/* ==========================================================================
   FLOW STATE — STYLESHEET (one file for the whole site)
   ==========================================================================

   HOW TO CHANGE THE COLOURS
   -------------------------
   Every colour on the site comes from the list just below (":root").
   Change a value there and it updates on every page.
   Example: to change the yellow, edit  --color-accent.

   WHAT IS IN THIS FILE
   --------------------
    1. Colours, fonts and sizes (edit these!)
    2. Basics (page, text, links)
    3. Layout helpers
    4. Buttons
    5. Header and menu
    6. Home page hero ("Find your flow")
    7. Sections, cards, steps
    8. Careers (list of open roles, job pages)
    9. FAQ accordion
   10. Forms
   11. Voice recorder
   12. Footer
   13. Small extras ([CONFIRM] highlight, 404 page, reduced motion)
   14. Page transitions (moving between Home, Careers, FAQ and Contact)
   ========================================================================== */


/* ==========================================================================
   1. COLOURS, FONTS AND SIZES  — edit these to re-theme the site
   ========================================================================== */
:root {
  /* Brand colours (taken from the Flow State logo and banner) */
  --color-bg: #000000;             /* page background                         */
  --color-surface: #0c0c0c;        /* cards and panels                        */
  --color-surface-2: #161616;      /* form fields, raised panels              */
  --color-border: #2a2a2a;         /* thin lines around cards                 */
  --color-border-strong: #707070;  /* borders of form fields                  */
  --color-text: #ffffff;           /* main text                               */
  --color-text-muted: #bcbcbc;     /* secondary text                          */
  --color-accent: #f9bd10;         /* Flow State yellow: buttons, highlights  */
  --color-accent-hover: #ffd24d;   /* yellow when the mouse is over a button  */
  --color-on-accent: #000000;      /* text placed on top of the yellow        */
  --color-error: #ff8585;          /* error messages                          */
  --color-success: #5fe08c;        /* success messages                        */
  --color-focus: #ffffff;          /* keyboard focus outline                  */
  --grid-line: rgba(255, 255, 255, 0.055); /* faint grid behind page headers  */

  /* Fonts ("Archivo" is loaded for free from Google Fonts in each page's <head>) */
  --font-display: "Archivo", "Arial Black", "Segoe UI", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Shapes and sizes */
  --radius: 16px;                  /* roundness of cards                      */
  --radius-small: 10px;            /* roundness of form fields                */
  --page-width: 1140px;            /* maximum width of the page content       */
  --header-height: 68px;

  /* Page transitions: how long the fade between pages takes.
     0.3s is quick and smooth; try 0.5s for slower, 0.2s for snappier. */
  --page-transition-time: 0.3s;
}


/* ==========================================================================
   2. BASICS
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;              /* makes date pickers, dropdowns etc. dark */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

main {
  flex: 1;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-stretch: 125%;              /* the wide, heavy look from the banner    */
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 7.2vw, 3.6rem); }
h2 { font-size: clamp(1.55rem, 4.8vw, 2.5rem); }
h3 { font-size: 1.1rem; line-height: 1.2; letter-spacing: 0; font-weight: 800; }

p {
  margin: 0 0 1em;
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--color-accent-hover);
}

strong {
  font-weight: 700;
}

/* Keyboard focus: always clearly visible */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* Text that only screen readers should "see" */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to content" link for keyboard users (appears when you press Tab) */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -120px;
  z-index: 1000;
  padding: 0.75rem 1.1rem;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 800;
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
  color: var(--color-on-accent);
}


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.container-narrow {
  max-width: 800px;
}

.section {
  padding-block: clamp(3.5rem, 9vw, 6rem);
}

.section-alt {
  background: var(--color-surface);
  border-block: 1px solid #1b1b1b;
}

.section-head {
  max-width: 44rem;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.section-head p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: clamp(1.1rem, 2.4vw, 1.25rem);
  color: var(--color-text-muted);
  max-width: 40rem;
}

.muted {
  color: var(--color-text-muted);
}

/* Small yellow label above a heading */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.16em;
  line-height: 1.65;               /* same height whether it is a paragraph or a heading */
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
}

/* Faint square grid, like the banner background */
.bg-grid {
  position: relative;
  isolation: isolate;
}

.bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  pointer-events: none;
}

.grid-3,
.grid-2 {
  display: grid;
  gap: 1.1rem;
}

@media (min-width: 640px) {
  .grid-3,
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 50px;
  padding: 0.7rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0.05em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Yellow button — the main call to action */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  color: var(--color-on-accent);
}

/* Outlined white button */
.btn-ghost {
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn-ghost:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

/* Black button (used on the yellow band) */
.btn-dark {
  background: #000000;
  color: #ffffff;
}

.btn-dark:hover {
  background: #262626;
  color: #ffffff;
}

.btn-small {
  min-height: 42px;
  padding: 0.5rem 1.1rem;
  font-size: 0.8rem;
}

.btn-large {
  min-height: 58px;
  padding: 0.9rem 2.2rem;
  font-size: 1rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}


/* ==========================================================================
   5. HEADER AND MENU
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #1b1b1b;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--header-height);
}

/* Logo + company name */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  color: var(--color-text);
  text-decoration: none;
}

.brand:hover {
  color: var(--color-text);
}

.brand img {
  display: block;
  width: auto;
  height: 34px;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-weight: 600;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--color-text);
}

/* The page you are currently on (a job page keeps "Careers" marked) */
.site-nav a[aria-current] {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.45em;
}

/* On wide screens the yellow line is its own small bar, so it can glide from
   one menu item to the next when the page changes (see section 14). */
@media (min-width: 860px) {
  .site-nav a[aria-current] {
    position: relative;
    text-decoration: none;
  }

  .site-nav a[aria-current]::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.15rem;
    height: 3px;
    border-radius: 3px;
    background: var(--color-accent);
    view-transition-name: nav-indicator;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Menu button (phones only) */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1.5px solid #4a4a4a;
  border-radius: 12px;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Phones and small tablets: the links move into a drop-down menu */
@media (max-width: 859px) {
  .js .nav-toggle {
    display: inline-flex;
  }

  .js .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.25rem 1.25rem 1rem;
    background: #000000;
    border-bottom: 1px solid var(--color-border);
  }

  .js .site-nav.is-open {
    display: block;
  }

  .js .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .site-nav a {
    padding: 0.95rem 0.25rem;
    border-bottom: 1px solid #1b1b1b;
    border-radius: 0;
    font-size: 1.1rem;
  }

  /* If JavaScript is switched off, simply show the links under the logo */
  html:not(.js) .header-inner {
    flex-wrap: wrap;
    padding-block: 0.5rem;
  }

  html:not(.js) .site-nav {
    order: 3;
    width: 100%;
  }

  html:not(.js) .site-nav ul {
    flex-wrap: wrap;
  }
}

/* Small phones: tighten the header so everything fits on one line.
   The yellow button reads "Apply" instead of "Apply Now". */
@media (max-width: 440px) {
  .brand img { height: 30px; }
  .brand-name { font-size: 0.85rem; }
  .header-actions .btn-small { padding-inline: 0.95rem; font-size: 0.76rem; white-space: nowrap; }
  .hide-narrow { display: none; }
}

@media (max-width: 345px) {
  .brand-name { display: none; }
}


/* ==========================================================================
   6. HOME PAGE HERO  ("Find your flow")
   ========================================================================== */
.hero {
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 7vw, 5rem);
}

.hero-content {
  max-width: 40rem;
}

.hero-title {
  margin: 0 0 0.35em;
  font-size: clamp(2.7rem, 12.5vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
}

.hero-title span {
  display: block;
}

.hero-title .accent {
  color: var(--color-accent);
  font-size: 1.42em;
  line-height: 0.92;
}

.hero .lead {
  margin-bottom: 1.75rem;
  color: #d6d6d6;
}

/* Three quick facts under the buttons */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 34rem;
  margin: 2.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid #2a2a2a;
  list-style: none;
}

.hero-facts strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.92rem, 3.6vw, 1.15rem);
  font-weight: 900;
  font-stretch: 118%;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-facts span {
  display: block;
  margin-top: 0.2rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.35;
}

/* "What we do": under the hero text on phones, beside it on wide screens */
.hero-about {
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid #2a2a2a;
}

.hero-about .lead {
  margin-bottom: 1.25rem;
  font-size: 1.08rem;
}

/* The three numbered boxes (01, 02, 03), one under the other */
.about-cards {
  display: grid;
  gap: 0.75rem;
}

.about-cards .card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  height: auto;
  padding: 1.1rem 1.25rem;
}

.about-cards .card-number {
  grid-row: 1 / span 2;
  margin: 0.2rem 0 0;
}

.about-cards .card h3 {
  margin-bottom: 0.3rem;
}

.about-cards .card p {
  grid-column: 2;
  font-size: 0.98rem;
  line-height: 1.55;
}

/* Wide screens: "Find your flow" on the left, "What we do" on the right */
@media (min-width: 960px) {
  .hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }

  .hero-content {
    max-width: none;
  }

  /* On smaller laptops the left half is narrow, so the big words shrink a little to fit */
  .hero-title {
    font-size: min(5.4rem, 7.6vw);
  }

  .hero-about {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

/* "Now hiring": a short summary of the open job.
   It is hidden unless the screen is very wide (see the block after this one). */
.hero-role {
  display: none;
}

.card.role-spotlight {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: auto;
}

.card.role-spotlight h3 {
  margin-bottom: 0;
  font-size: 1.25rem;
}

/* The big yellow figure: "3,000+ JOD" */
.role-spotlight .role-pay {
  margin: 1rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid #262626;
}

.role-pay strong {
  display: block;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.7vw, 2.1rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
  white-space: nowrap;
}

.role-pay span {
  display: block;
  margin-top: 0.45rem;
}

.role-spotlight .check-list {
  margin-bottom: 1.1rem;
  font-size: 0.98rem;
}

.role-spotlight .btn {
  margin-top: auto;              /* keeps the button at the bottom of the box */
}

.role-spotlight .btn svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* Very wide screens (big monitors): the rest of the page stays in the middle,
   which used to leave an empty area to the right of "What we do". Here the top
   section keeps its left edge but runs further to the right, and the
   "Now hiring" box appears as a third column in that area. */
@media (min-width: 1600px) {
  .hero-layout {
    width: auto;
    max-width: 1800px;
    margin-left: calc((100% - var(--page-width)) / 2);
    margin-right: 0;
    padding-right: clamp(1.5rem, 2.5vw, 3rem);
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.61fr);
  }

  .hero-side {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.66fr);
    gap: clamp(1.5rem, 2.2vw, 2.5rem);
  }

  .hero-role {
    display: flex;
    flex-direction: column;
  }
}


/* ==========================================================================
   7. SECTIONS, CARDS, STEPS
   ========================================================================== */
.card {
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.section-alt .card {
  background: #000000;
}

.card h3 {
  margin-bottom: 0.5rem;
}

.card p {
  margin: 0;
  color: var(--color-text-muted);
}

.card-number {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.08em;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  background: rgba(249, 189, 16, 0.12);
  color: var(--color-accent);
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

/* Numbered steps ("How to apply") */
.steps {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.steps li {
  position: relative;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  counter-increment: step;
}

.section-alt .steps li {
  background: #000000;
}

.steps li::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: 0.9rem;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
}

.steps h3 {
  margin-bottom: 0.5rem;
}

.steps p {
  margin: 0;
  color: var(--color-text-muted);
}

/* Two-column block: text on the left, panel on the right */
.split {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3.5rem; }
}

.panel {
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.section-alt .panel {
  background: #000000;
}

.panel > :last-child {
  margin-bottom: 0;
}

/* Bullet list with yellow markers */
.check-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  margin-bottom: 0.65rem;
  padding-left: 1.6rem;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.7rem;
  height: 3px;
  border-radius: 3px;
  background: var(--color-accent);
}

/* Yellow call-to-action band */
.cta-band {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.cta-band .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(2.5rem, 6vw, 3.75rem);
}

.cta-band h2 {
  margin: 0 0 0.3rem;
}

.cta-band p {
  margin: 0;
  max-width: 34rem;
  font-weight: 500;
}

.cta-band :focus-visible {
  outline-color: #000000;
}

/* Header strip at the top of inner pages (Careers, FAQ, Contact) */
.page-hero {
  padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(2rem, 5vw, 3rem);
}

.page-hero h1 {
  margin-bottom: 0.35em;
}

.page-hero .lead {
  margin-bottom: 0;
}

/* Small rounded labels (e.g. "Remote") */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 0.35rem 0.85rem;
  border: 1px solid #3d3d3d;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  font-size: 0.88rem;
  font-weight: 600;
}


/* ==========================================================================
   8. CAREERS  (the list of open roles, and each job's own page)
   ========================================================================== */

/* ---------- The list of open roles (careers.html) ---------- */

/* The "1 open role" line above the list, with a thin line running to the right */
.roles-count {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.roles-count::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.role-list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: role;             /* numbers the jobs 01, 02, 03… by itself  */
}

/* One job in the list. The whole box is clickable (see .role-link below).
   Phones: everything is stacked. Wide screens: number, text and button sit
   side by side (see the "min-width: 800px" block further down). */
.role-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "number  labels"
    "title   title"
    "summary summary"
    "facts   facts"
    "button  button";
  column-gap: 0.85rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  counter-increment: role;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.role-card:hover {
  border-color: var(--color-accent);
  background: #111111;
}

/* The yellow number: 01, 02, 03… */
.role-card::before {
  content: counter(role, decimal-leading-zero);
  grid-area: number;
  align-self: center;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 900;
  font-stretch: 125%;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* Small labels above the job title: "Hiring now / Sales" */
.role-labels {
  grid-area: labels;
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.7rem;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
}

.role-labels span + span::before {
  content: "/";
  margin-right: 0.7rem;
  color: #5c5c5c;
}

/* "Hiring now" with its yellow dot */
.role-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-text);
}

.role-status::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(249, 189, 16, 0.22);
}

.role-title {
  grid-area: title;
  margin: 0.9rem 0 0.5rem;
  font-size: clamp(1.5rem, 5.4vw, 2.1rem);
}

/* The job title is the link. Its invisible "::after" layer covers the whole
   box, so a click or tap anywhere on the box opens the job. */
.role-link {
  color: var(--color-text);
  text-decoration: none;
}

.role-link:hover {
  color: var(--color-text);
}

.role-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}

.role-summary {
  grid-area: summary;
  max-width: 40rem;
  margin: 0 0 1.1rem;
  color: var(--color-text-muted);
}

.role-card .chips {
  grid-area: facts;
  margin: 0;
}

/* The "View role" button. It is part of the clickable box, not a separate link. */
.role-cta {
  grid-area: button;
  margin-top: 1.5rem;
}

.role-cta svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.role-card:hover .role-cta {
  background: var(--color-accent-hover);
}

.role-card:hover .role-cta svg {
  transform: translateX(4px);
}

/* Keyboard focus: outline the whole box, not just the job title */
@supports selector(:has(a)) {
  .role-link:focus-visible {
    outline: none;
  }

  .role-card:has(.role-link:focus-visible) {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }
}

@media (min-width: 800px) {
  .role-card {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    grid-template-areas:
      "number labels  button"
      "number title   button"
      "number summary button"
      "number facts   button";
    column-gap: 1.5rem;
  }

  .role-card::before {
    align-self: start;
    font-size: 1.9rem;
  }

  .role-title {
    margin-top: 0.65rem;
  }

  .role-cta {
    align-self: center;
    margin-top: 0;
  }
}

/* ---------- A closed role ----------
   Shown for information only: greyed out, smaller, with no page of its own.
   In careers.html it is a job block with the extra word "is-closed". */
.role-card.is-closed,
.role-card.is-closed:hover {
  padding-block: clamp(1rem, 3vw, 1.35rem);
  border-color: #1f1f1f;
  background: #070707;
}

.role-card.is-closed::before {
  color: #7a7a7a;                  /* grey number instead of yellow */
}

.is-closed .role-status {
  color: var(--color-text-muted);
}

.is-closed .role-status::before {
  border: 2px solid #7a7a7a;       /* an empty grey ring instead of the yellow dot */
  background: transparent;
  box-shadow: none;
}

.is-closed .role-title {
  margin: 0.6rem 0 0.25rem;
  color: #a6a6a6;
  font-size: clamp(1.15rem, 4.2vw, 1.45rem);
}

.is-closed .role-summary {
  margin-bottom: 0;
  color: #9a9a9a;
  font-size: 0.98rem;
}

/* The grey "Closed" tag on the right (wide screens only; on phones the small
   "Closed" label above the job title already says it) */
.role-closed-tag {
  display: none;
}

@media (min-width: 800px) {
  .role-closed-tag {
    grid-area: button;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.4rem 1.3rem;
    border: 1.5px solid #3a3a3a;
    border-radius: 999px;
    color: #9a9a9a;
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 800;
    font-stretch: 112%;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
  }
}

/* Dashed box under the last job: an empty place where the next role will go */
.role-empty {
  margin: 1rem 0 0;
  padding: 1.1rem clamp(1.25rem, 4vw, 2rem);
  border: 1.5px dashed #3a3a3a;
  border-radius: var(--radius);
  color: var(--color-text-muted);
}

.roles-help {
  margin: 1.75rem 0 0;
  color: var(--color-text-muted);
}

/* ---------- A job's own page (for example job-remote-sales-rep.html) ---------- */

/* "All open roles" link at the top of a job page */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 36px;
  margin-bottom: 1.1rem;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover {
  color: var(--color-accent);
}

.back-link svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.back-link:hover svg {
  transform: translateX(-3px);
}

.job-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 960px) {
  .job-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 3.5rem;
    align-items: start;
  }

  .job-summary {
    position: sticky;
    top: calc(var(--header-height) + 24px);
  }
}

.job-description h2 {
  margin-top: 2.2rem;
  font-size: clamp(1.25rem, 3.6vw, 1.6rem);
}

.job-description h2:first-child {
  margin-top: 0;
}

.job-description p {
  color: #dddddd;
}

.job-summary h2 {
  font-size: 1.15rem;
}

/* "At a glance" list */
.facts {
  margin: 0 0 1.5rem;
}

.facts div {
  padding: 0.75rem 0;
  border-bottom: 1px solid #222222;
}

.facts div:first-child {
  padding-top: 0;
}

.facts dt {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
}

.job-summary .btn {
  width: 100%;
}


/* ==========================================================================
   9. FAQ ACCORDION
   ========================================================================== */
.faq-group {
  margin-bottom: 2.75rem;
}

.faq-group h2 {
  font-size: clamp(1.2rem, 3.6vw, 1.5rem);
}

.faq-item {
  margin-bottom: 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  transition: border-color 0.3s ease;
}

.faq-item[open] {
  border-color: #4a4a4a;
}

/* "is-closing" is added by main.js for the moment a question is sliding shut */
.faq-item.is-closing {
  border-color: var(--color-border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--color-accent);
}

/* The + / − sign. When a question opens, the sign turns and its upright bar
   shrinks away, so the + becomes a −. */
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent)) center / 2.5px 100% no-repeat;
  transition: transform 0.3s ease, background-size 0.3s ease;
}

.faq-item[open]:not(.is-closing) summary::after {
  background-size: 100% 2.5px, 2.5px 0;
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.2rem 1.15rem;
  color: #dddddd;
}

/* Opening a question: the answer fades in and settles into place.
   The box itself glides open and shut — that part is done by assets/js/main.js. */
.faq-item[open] .faq-answer {
  animation: faq-answer-in 0.35s ease both;
}

@keyframes faq-answer-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.faq-answer > :last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   10. FORMS
   ========================================================================== */
.form-card {
  padding: clamp(1.25rem, 4.5vw, 2.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.form-section {
  margin: 0 0 2.25rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid #222222;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
}

/* Yellow numbered circle next to each form section title */
.form-section-title .num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.9rem;
  font-stretch: 100%;
}

.field {
  min-width: 0;
  margin: 0 0 1.35rem;
  padding: 0;
  border: 0;
}

.field-row {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 620px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field > label,
.field > legend,
.field > .label {
  display: block;
  margin-bottom: 0.4rem;
  padding: 0;
  font-weight: 700;
}

.hint {
  margin: 0.4rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.field > legend + .hint {
  margin: 0 0 0.75rem;
}

.input {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background-color: var(--color-surface-2);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;                 /* 16px or more stops iPhones zooming in  */
  line-height: 1.4;
}

.input:hover {
  border-color: #a0a0a0;
}

.input:focus-visible,
.input-file:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
  border-radius: var(--radius-small);
}

textarea.input {
  min-height: 160px;
  resize: vertical;
}

select.input {
  padding-right: 2.5rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  cursor: pointer;
}

/* Date field: keep the text left-aligned on iPhones */
input[type="date"].input {
  -webkit-appearance: none;
  appearance: none;
}

input[type="date"].input::-webkit-date-and-time-value {
  text-align: left;
}

/* Phone number: country code + number side by side */
.phone-row {
  display: grid;
  grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr);
  gap: 0.6rem;
}

@media (max-width: 430px) {
  .phone-row { grid-template-columns: minmax(0, 9.2rem) minmax(0, 1fr); }
}

/* File upload fields */
.input-file {
  display: block;
  width: 100%;
  padding: 0.65rem;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.input-file::file-selector-button {
  margin-right: 0.9rem;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

/* Yes / No choices */
.choice-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  max-width: 22rem;
}

.choice {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.6rem 1rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface-2);
  font-weight: 700;
  cursor: pointer;
}

.choice:hover {
  border-color: #a0a0a0;
}

.choice:has(input:checked) {
  border-color: var(--color-accent);
  background: rgba(249, 189, 16, 0.1);
}

.choice input,
.checkbox input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* Consent tick box */
.field > label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0;
  font-weight: 500;
  cursor: pointer;
}

.checkbox input {
  margin-top: 0.2rem;
}

/* Two-way switch: "Record now" / "Upload a file" */
.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 1rem;
  padding: 4px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 999px;
  background: var(--color-surface-2);
}

.segmented label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.segmented input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmented span {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.segmented input:checked + span {
  background: #ffffff;
  color: #000000;
}

.segmented input:focus-visible + span {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.segmented input:disabled + span {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Error state */
.input[aria-invalid="true"],
.input-file[aria-invalid="true"],
.field.has-error .choice,
.field.has-error .recorder {
  border-color: var(--color-error);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.45rem 0 0;
  color: var(--color-error);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
}

.field-error::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--color-error);
  color: #000000;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
}

[hidden] {
  display: none !important;
}

/* Message boxes (info, error, success) */
.notice {
  margin: 0 0 1.5rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid #4a4a4a;
  border-left: 5px solid var(--color-accent);
  border-radius: var(--radius-small);
  background: var(--color-surface-2);
  font-size: 0.98rem;
  line-height: 1.5;
}

.notice-error {
  border-color: #6b3434;
  border-left-color: var(--color-error);
}

.notice-success {
  border-color: #2c5a3c;
  border-left-color: var(--color-success);
}

.notice > :last-child {
  margin-bottom: 0;
}

.form-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.form-actions .notice {
  width: 100%;
  margin: 0;
}

/* Small spinning circle shown while a form is sending */
.spinner {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  border: 3px solid rgba(0, 0, 0, 0.25);
  border-top-color: #000000;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* "Thank you" panel shown after a form is sent */
.success-panel {
  padding: clamp(1.75rem, 6vw, 3rem);
  border: 1px solid #2c5a3c;
  border-radius: var(--radius);
  background: var(--color-surface);
  text-align: center;
}

.success-panel:focus {
  outline: none;
}

.success-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.success-icon svg {
  width: 34px;
  height: 34px;
}

.success-panel p {
  max-width: 34rem;
  margin-inline: auto;
  color: #dddddd;
}

/* Spam trap: a field real visitors never see (see README) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The paragraph candidates read aloud */
.reading-text {
  margin: 0 0 1rem;
  padding: 1.1rem 1.25rem;
  border-left: 5px solid var(--color-accent);
  border-radius: 0 var(--radius-small) var(--radius-small) 0;
  background: var(--color-surface-2);
  font-size: 1.12rem;
  line-height: 1.75;
}

.reading-text p {
  margin: 0;
}

@media (max-width: 520px) {
  .reading-text {
    padding: 0.9rem 1rem;
    font-size: 1.04rem;
    line-height: 1.65;
  }
}


/* ==========================================================================
   11. VOICE RECORDER
   ========================================================================== */
.recorder {
  padding: 1.1rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-small);
  background: var(--color-surface-2);
}

/* While recording, the recorder stays pinned to the bottom of the screen.
   On a phone this lets candidates scroll up to read the paragraph and still
   see the timer and reach the "Stop" button. */
#audio-record-panel:has(.recorder[data-state="recording"]) {
  position: sticky;
  bottom: 0.75rem;
  z-index: 5;
}

.recorder[data-state="recording"] {
  border-color: #ff4d4d;
  box-shadow: 0 0 0 6px var(--color-surface), 0 -14px 28px 6px rgba(0, 0, 0, 0.8);
}

.recorder-display {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-variant-numeric: tabular-nums;
}

.recorder-dot {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #5c5c5c;
}

.recorder[data-state="recording"] .recorder-dot {
  background: #ff4d4d;
  animation: recorder-pulse 1.1s ease-in-out infinite;
}

.recorder[data-state="recorded"] .recorder-dot {
  background: var(--color-success);
}

@keyframes recorder-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.6); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 77, 77, 0); }
}

.recorder-time {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

.recorder-total {
  color: var(--color-text-muted);
  font-size: 1rem;
  font-weight: 600;
}

.recorder-progress {
  height: 6px;
  margin: 0.85rem 0 1rem;
  border-radius: 999px;
  background: #303030;
  overflow: hidden;
}

.recorder-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--color-accent);
}

.recorder-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.recorder-buttons .btn {
  min-height: 48px;
  padding-inline: 1.25rem;
}

@media (max-width: 430px) {
  .recorder-buttons .btn {
    padding-inline: 1rem;
    font-size: 0.82rem;
  }
}

.btn-icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: currentColor;
}

.btn-icon-record { border-radius: 50%; background: #d21f1f; }
.btn-icon-stop { border-radius: 2px; }
.btn-icon-play {
  width: 0;
  height: 0;
  background: transparent;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent currentColor;
}
.btn-icon-pause {
  width: 11px;
  height: 13px;
  background: transparent;
  border-style: solid;
  border-width: 0 4px;
  border-color: currentColor;
}

.recorder-status {
  min-height: 1.5em;
  margin: 0.9rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.recorder-status.is-error {
  color: var(--color-error);
  font-weight: 600;
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.site-footer {
  padding-block: 3rem 2rem;
  border-top: 1px solid #1b1b1b;
  background: #000000;
  font-size: 0.98rem;
}

.footer-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}

.footer-brand img {
  display: block;
  width: auto;
  height: 46px;
  margin-bottom: 0.9rem;
}

.footer-brand p {
  max-width: 24rem;
  margin: 0;
  color: var(--color-text-muted);
}

.site-footer h2 {
  margin-bottom: 0.9rem;
  font-size: 0.82rem;
  font-stretch: 112%;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.2rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 36px;
  color: var(--color-text);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.footer-links svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #1b1b1b;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.footer-bottom p {
  margin: 0;
}


/* ==========================================================================
   13. SMALL EXTRAS
   ========================================================================== */

/* Yellow highlight for text you still need to confirm.
   Search every file for [CONFIRM], fix the sentence, then delete the tag. */
mark.confirm {
  padding: 0.05em 0.4em;
  border-radius: 5px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.75em;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
  vertical-align: 0.08em;
}

mark.confirm:empty {
  display: none;
}

/* Contact page */
.contact-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 3rem;
    align-items: start;
  }
}

.contact-info h2 {
  font-size: 1.15rem;
}

.contact-info .facts dd a {
  word-break: break-word;
}

/* "Page not found" */
.not-found {
  display: grid;
  place-items: center;
  padding-block: clamp(4rem, 14vw, 9rem);
  text-align: center;
}

.not-found .big {
  margin: 0;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 22vw, 9rem);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 1;
}

/* Respect people who have asked their device for less animation */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   14. PAGE TRANSITIONS
   --------------------------------------------------------------------------
   When a visitor moves between Home, Careers, FAQ and Contact:
     - the old page fades out and the new page fades in, sliding up slightly
     - the header stays still
     - on wide screens the yellow line under the menu glides to the new page

   SPEED: change --page-transition-time at the top of this file.
   SWITCH OFF: delete this whole section.

   How it works: modern browsers animate between pages themselves ("view
   transitions"). Older browsers get a simple fade-in instead (the ".no-vt"
   rule at the end). Visitors who have asked their device for less animation
   get neither.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* The header is the same on every page, so it keeps its place */
.site-header {
  view-transition-name: site-header;
}

/* The page content: the old page leaves, then the new page arrives */
::view-transition-old(root) {
  animation: page-leave calc(var(--page-transition-time) * 0.6) ease-in both;
}

::view-transition-new(root) {
  animation: page-enter var(--page-transition-time) ease-out calc(var(--page-transition-time) * 0.3) both;
}

/* The yellow line under the menu glides for the same length of time */
::view-transition-group(nav-indicator) {
  animation-duration: var(--page-transition-time);
  animation-timing-function: ease-in-out;
}

@keyframes page-leave {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Older browsers (the "no-vt" label is added by a tiny script in each page's
   <head>): simply fade the new page in. */
.no-vt main {
  animation: page-enter calc(var(--page-transition-time) * 1.3) ease-out both;
}