/* Tobi Real careers page. Tokens below: change --brand* for the CI greens.
   Montserrat is self-hosted (SIL OFL, licence in assets/fonts) rather than
   pulled from Google, so the page still makes zero third-party requests. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 800;               /* variable; one file covers the range */
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  /* Slovak lives here: c, d, l, n, r, s, t with carons and acutes are all
     latin-ext. Shipping only `latin` breaks Slovak words mid-render. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Palette: the client's defined green #6A9C41 ("RGB 106 156 65") is the MAIN
   colour and carries the big fields. Three greens, no lime: on a #6A9C41 field
   the lime scored 1.44:1 and was unusable. Every pairing is contrast-checked. */
:root {
  --brand:        #6a9c41;   /* THE main colour: hero, stats and footer fields,
                                section titles, rules */
  --brand-deep:   #0b2e13;   /* type ON the brand field, the CTA, focus ring */
  --brand-mid:    #41661f;   /* links, checked controls, input hovers */

  /* Paper */
  --paper:        #ffffff;
  --paper-2:      #f4f5f6;
  --paper-3:      #e9ecef;

  /* Semantics */
  --text:         #151515;
  --text-muted:   #495057;
  --line:         #dee2e6;
  --line-strong:  #6c757d;
  --danger:       #a71d2a;
  --field-bg:     #ffffff;

  /* Type. One family; weight and tracking do the differentiating, which is
     how their own site uses Gordita (black / bold / regular). */
  --font-display: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
  --font-prose:   "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
  --font-label:   "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;

  /* Rhythm */
  --measure:      58ch;
  --gutter:       clamp(1.25rem, 5vw, 4rem);
  --radius:       3px;
}

/* --- reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-prose);
  font-size: clamp(1.0625rem, 0.55vw + 0.95rem, 1.1875rem);
  line-height: 1.6;
}

img { display: block; max-width: 100%; }

a { color: var(--brand-mid); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-deep); }

:focus-visible {
  outline: 3px solid var(--brand-deep);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 0; top: 0; z-index: 10;
  transform: translateY(-120%);
  background: var(--brand-deep); color: #ffffff;
  font-family: var(--font-label); font-size: 0.875rem;
  padding: 0.75rem 1.25rem; text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

/* --- shared -------------------------------------------------------------- */

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.02;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin: 0 0 1.5rem;
}

.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.0625rem 2.25rem;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease;
}

/* The only fill that reads on BOTH the brand field and the light form band:
   4.56:1 against the green, 13.6:1 against the form band. */
.btn--cta {
  background: var(--brand-deep);
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(11, 46, 19, 0.3);
}
/* Darker on hover, not lighter: the mid olive is only 2.05:1 from the
   brand field, so the button would dissolve into it. */
.btn--cta:hover { background: var(--text); color: #ffffff; }
.btn--cta:active { transform: translateY(1px); }
.btn--cta[disabled] {
  background: var(--paper-3);
  color: var(--text-muted);
  cursor: progress;
  box-shadow: none;
}

/* --- header -------------------------------------------------------------- */

/* Photo band, then the headline on the brand field, with the field fading up
   into the photo on wide screens. Text ON the photo was measured and dropped:
   dark type on #6a9c41 is 4.56:1 flat, so any picture showing through puts it
   under 4.5, and white needs a wash dark enough to erase the photo. */
.hero {
  display: grid;
  background: var(--brand);
}

.hero__media { position: relative; overflow: hidden; }

.hero__media picture { display: block; line-height: 0; }

.hero__media img {
  width: 100%;
  height: auto;
  display: block;
}

.hero__panel {
  background: var(--brand);
  position: relative;
}

.hero__inner {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1.75rem, 4vw, 2.5rem) var(--gutter) clamp(2rem, 3.5vw, 3rem);
  color: #ffffff;
  text-align: center;
  animation: hero-in 620ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.hero__title {
  margin-bottom: 0.875rem;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.96;
  /* Measured from the shipped woff2: the headline sets at ~17.1px of width per
     1px of size, so one line needs 17.1 x size + ~100px for the logo and gap.
     4.6vw clears that from 1280px up; the 6rem cap stops it running away on a
     2560 screen, and below 48rem it wraps, as it should on a phone. */
  font-size: clamp(2.25rem, 4.6vw, 6rem);
  margin: 0;
  text-wrap: balance;
}

/* 24px is the floor, not a taste call: white on the brand field is 3.26:1,
   which WCAG allows for large text only - and large starts at 24px. */
.hero__lede {
  font-weight: 300;
  font-size: clamp(1.5rem, 1.7vw, 1.75rem);
  line-height: 1.35;
  max-width: 34ch;
  margin: 0 auto 1.5rem;
  color: #ffffff;
  text-wrap: balance;
}

.hero__inner .btn--cta {
  display: block;
  width: fit-content;
  margin-inline: auto;
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Below the logo's own width the lockup has to stack, or the headline is
   squeezed into a column two words wide. */
/* --- wide: cap the photo, fade it into the field ------------------------- */

@media (min-width: 48rem) {
  /* 92dvh, not 100: a hero flush with the fold reads as the end of the page.
     8dvh is under the next section's 7rem top padding below 1400px tall, so
     a white strip shows, never a sliced heading. */
  /* The field is content-height and the photo takes the rest, so the total is
     exact whatever the copy does. */
  .hero {
    min-height: 92vh;
    min-height: 92dvh;
    grid-template-rows: minmax(max(240px, 26vw), 1fr) auto;
  }

  /* The photo is taken out of flow. height: 100% against a grid row whose
     height is not yet definite resolves to auto, so the image came back at
     its natural 2560x1707 and dragged the hero to 1.5 screens. Out of flow,
     the row is sized by the track alone and inset: 0 makes the box definite. */
  .hero__media { min-height: 0; }

  .hero__media picture {
    position: absolute;
    inset: 0;
  }

  .hero__media img { width: 100%; height: 100%; }

  /* Read off the frame: heads at 29%, shoes at 75%. A flexing photo means the
     window varies with viewport height; the 26vw floor bounds it at 39% of
     the frame, where 45% holds the heads in on every desktop shape. */
  .hero__media img {
    object-fit: cover;
    object-position: 50% 45%;
  }

  /* A short window cannot hold the group at all, so it keeps the faces. */
  @media (max-height: 50rem) {
    .hero__media img { object-position: 50% 36%; }
  }

  /* The 68rem reading measure is what forced the headline onto two lines. It
     does not apply to a display line, and the lede (34ch) and the button
     (fit-content) carry their own widths, so only the lockup widens. */
  .hero__inner { max-width: none; }

  /* The fade sits ABOVE the field, never inside it: the headline has to be on
     solid colour from its first pixel. */
  .hero__panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: clamp(4rem, 8vw, 8rem);
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--brand) 0%, transparent) 0%,
      color-mix(in srgb, var(--brand) 8%, transparent) 28%,
      color-mix(in srgb, var(--brand) 30%, transparent) 55%,
      color-mix(in srgb, var(--brand) 68%, transparent) 78%,
      var(--brand) 100%
    );
  }
}

/* --- content blocks ------------------------------------------------------- */

.block { padding: clamp(3.5rem, 9vw, 7rem) 0; }

.block--paper { background: var(--paper); }

/* A rule between sections that share a background. Between a brand-field
   section and a paper one the colour change is already the divider, and a
   green rule directly under a green block would simply not be visible - so
   the rule is drawn only where it can do any work. */
.block--paper + .block--paper,
.block--paper + .form-block { border-top: 4px solid var(--brand); }

/* Body copy on the field is near-black, not dark green: --brand-deep clears
   4.5:1 but only just, and green-on-green separates by luminance alone, which
   reads as muddy at paragraph length. --text is 5.59:1 and separates by hue. */
.block--brand {
  background: var(--brand);
  color: var(--text);
}
/* Large display only: white on the brand green is 3.26:1, which passes for
   large text and nothing else. Body copy on the field takes --brand-deep,
   which is 4.56:1 - the same rule the path labels follow. */
.block--brand .section-title { color: #ffffff; }

/* Light is the real readability problem here, not the colour - the badges are
   the same ink on the same green and read fine at 700. Thin strokes lose
   contrast against a mid-tone ground in a way the ratio does not model. */
.block--brand .block__lede {
  color: var(--text);
  font-weight: 500;
}

.block--brand .path__label { font-weight: 500; }

.block__inner,
.form-block__inner,
.footer__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.block--paper .section-title { color: var(--brand); }

/* Centred sections: the heading and the lede centre, and the content column
   sits in the middle - but body text inside stays left-aligned, because
   centred paragraphs and centred form labels are hard to read. */
.block--centred .section-title,
.block--centred .block__lede,
.block--centred .form-block__lede {
  text-align: center;
  margin-inline: auto;
}

.block--centred .faq,
.block--centred .form,
.block--centred .form__note,
.block--centred .state,
.block--centred .prose {
  margin-inline: auto;
}

/* Tím is one short line, so centring the text itself reads well there. */
.block--centred .prose--lead { text-align: center; }

.block__lede {
  font-weight: 300;
  max-width: 52ch;
  margin: -0.5rem 0 2.25rem;
  color: var(--text-muted);
}

/* On paper, Light plus muted grey is too faint to hold a section on its own.
   It works where the section has cards or a timeline carrying the weight; the
   Marketing section is prose only, and it receded. */
.block--paper .block__lede {
  font-weight: 400;
  color: var(--text);
}

/* Body stays 400. Light is for the lead lines, not for reading paragraphs. */
.prose { max-width: var(--measure); font-size: 1.0625em; font-weight: 400; }
.prose p { margin: 0 0 1.15em; }
.prose p:last-child { margin-bottom: 0; }

/* Used once, in Marketing, where it is the body of the section rather than a
   lead-in - so it takes body weight. */
.prose--lead {
  font-weight: 400;
  font-size: clamp(1.1875rem, 1.4vw, 1.4375rem);
  line-height: 1.5;
  max-width: 46ch;
}

/* --- tick and arrow lists ------------------------------------------------ */

/* Both markers are drawn with borders rather than set as glyphs: the tick and
   the arrow live outside latin-ext, so a subsetted Montserrat cannot show
   them and the browser would substitute a different face mid-line. */
.ticks,
.arrows {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.6875rem;
}

.ticks li,
.arrows li {
  position: relative;
  padding-left: 1.875rem;
  line-height: 1.5;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0.1875rem;
  top: 0.32em;
  width: 0.75rem;
  height: 0.4375rem;
  border-left: 2px solid var(--brand-mid);
  border-bottom: 2px solid var(--brand-mid);
  transform: rotate(-45deg);
}

.arrows li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.5em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-top: 2px solid var(--brand-mid);
  border-right: 2px solid var(--brand-mid);
  transform: rotate(45deg);
}

.arrows--centred {
  max-width: 26rem;
  margin-inline: auto;
  text-align: left;
}

/* --- badges: the short facts, inline on the brand field ------------------ */

.badges {
  list-style: none;
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem 0.6875rem;
}

.badges li {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.78125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 38%, transparent);
  border-radius: 999px;
  padding: 0.4375rem 0.9375rem;
}

/* "Realitná kancelária roka 2019 & 2024" measures 345px set: wider than the
   content column on any phone under ~390px. A stadium shape that wraps to two
   lines reads as a mistake, so below 34rem the badges stack as full-width
   rectangles, where wrapping looks intended. */
@media (max-width: 33.999rem) {
  .badges {
    display: grid;
    gap: 0.5rem;
  }
  .badges li {
    border-radius: var(--radius);
    text-align: center;
    padding-inline: 0.75rem;
  }
}

/* --- the two tracks ------------------------------------------------------ */

.tracks {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  text-align: left;
}

@media (min-width: 48rem) {
  .tracks { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* Flex column with the button pushed to the bottom, so two tracks of
   different list lengths still line their buttons up. */
.track {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.track__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.15;
  /* --brand is 2.99:1 on the card's grey back - a hundredth under the 3:1
     floor. Sub-headings take --brand-mid, which clears it everywhere. */
  color: var(--brand-mid);
  margin: 0 0 0.6875rem;
}

.track__lede { margin: 0 0 1.375rem; color: var(--text); line-height: 1.6; }

.track__label,
.duo__label {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 0.875rem;
}

/* Stretched, not sized to content: "Chcem sa porozprávať o zmene" is wider
   than the card at phone widths, and an inline-block button would overflow
   it rather than wrap. */
.btn--track {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
  padding-inline: 1.25rem;
  /* "Chcem sa porozprávať o zmene" is 369px set and wraps on every phone, so
     the two lines need to sit tight rather than at body leading. */
  line-height: 1.3;
}

/* --- you / us ------------------------------------------------------------ */

.duo {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3rem);
  text-align: left;
}

@media (min-width: 48rem) {
  .duo { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 4rem); }
}

.duo__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: var(--brand-mid);
  margin: 0 0 0.875rem;
  padding-bottom: 0.6875rem;
  border-bottom: 2px solid var(--brand);
}

.duo__note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* A closing line under a section's columns: centred, narrower than the
   columns, so it reads as the section's conclusion rather than a fifth item. */
.block__close {
  max-width: 58ch;
  margin: clamp(2.25rem, 4vw, 3rem) auto 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.25rem);
  background: var(--paper-2);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius);
  text-align: center;
  font-weight: 500;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--text);
}

/* --- cards: what you learn ----------------------------------------------- */

/* Paper cards on the brand field. Body copy in white on the green would be
   3.26:1 - legal for large text only - so the copy sits on paper instead. */
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  text-align: left;
}

@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--brand-mid);
  margin: 0 0 0.5rem;
}

.card p { margin: 0; color: var(--text); line-height: 1.6; }

/* --- timeline ------------------------------------------------------------ */

/* The brief asked for a horizontal line showing the stages in sequence. The
   line is on the list, the numbered markers sit on it, and each marker
   carries a ring in the section colour so the line appears to pass behind. */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  counter-reset: stage;
  display: grid;
  gap: 1.625rem;
  text-align: left;
}

.timeline__step { counter-increment: stage; position: relative; }

.timeline__step::before {
  content: counter(stage);
  position: absolute;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: 0 0 0 5px var(--paper);
}

.timeline__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--brand-mid);
  margin: 0 0 0.375rem;
}

.timeline__step p { margin: 0; line-height: 1.6; color: var(--text); }

/* Narrow: the line runs down the left, markers on it. */
@media (max-width: 47.999rem) {
  .timeline { padding-left: 3.25rem; }
  .timeline::before {
    content: "";
    position: absolute;
    left: 1.0625rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--line);
  }
  .timeline__step::before { left: -3.25rem; top: -0.125rem; }
}

/* Wide: four columns with the line running through them. The stages run 63 to
   168 characters, so one column is eight lines and another three; each sits in
   a panel instead, and grid stretch makes the panels equal height. */
/* The marker is lifted out of the panel by the margin that pushes the panel
   down, which puts it back on the line. */
@media (min-width: 48rem) {
  .timeline {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
  }
  .timeline::before {
    content: "";
    position: absolute;
    top: 1.0625rem;
    left: 1.0625rem;
    right: 1.0625rem;
    height: 2px;
    background: var(--line);
  }
  .timeline__step {
    margin-top: 3.25rem;
    padding: 1.375rem 1.25rem 1.5rem;
    background: var(--paper-2);
    border-radius: var(--radius);
  }
  .timeline__step::before { left: 0; top: -3.25rem; }
}

/* --- the path ------------------------------------------------------------ */

/* Three numbered stops alternating sides, finishing at the rating card. Stops
   are full-width grid rows, so a stop's 50% is the path's 50% - which is what
   lets each node sit on the shared spine. */
.path {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  counter-reset: stop;
  display: grid;
  gap: clamp(2.5rem, 7vw, 4.5rem);
}

.path__stop {
  counter-increment: stop;
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

.path__figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 4.75rem);
  line-height: 0.9;
  color: #ffffff;
  margin: 0 0 0.375rem;
}

.path__label {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  max-width: 34ch;
}

.path__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  display: block;
}

/* The numbered node. On narrow screens the spine runs down the left. */
.path__stop::before {
  content: counter(stop);
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--brand-deep);
  color: #ffffff;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.9375rem;
  box-shadow: 0 0 0 5px var(--brand);
}

/* --- narrow: one column, spine down the left ----------------------------- */

@media (max-width: 47.999rem) {
  .path { padding-left: 3.25rem; }

  .path::before {
    content: "";
    position: absolute;
    left: 1.125rem;
    top: 0.5rem;
    bottom: -1.5rem;
    width: 2px;
    background: var(--brand-deep);
    opacity: 0.55;
  }

  .path__stop::before { left: -3.25rem; top: 0; }
  .path__end { margin-left: 3.25rem; }
}

/* --- wide: alternating sides, spine down the middle ---------------------- */

@media (min-width: 48rem) {
  .path::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 1rem;
    bottom: -2rem;
    width: 2px;
    transform: translateX(-50%);
    background: var(--brand-deep);
    opacity: 0.55;
  }

  .path__stop {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
  }

  .path__stop::before {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Text right, image left on every second stop - the mirrored step. */
  .path__stop:nth-child(even) .path__text { grid-column: 2; grid-row: 1; }
  .path__stop:nth-child(even) .path__media { grid-column: 1; grid-row: 1; }

  /* Text hugs the spine on both sides. */
  .path__stop:nth-child(odd) .path__text { text-align: right; justify-self: end; }
  .path__stop:nth-child(odd) .path__label { margin-left: auto; }
}

/* --- google reviews ------------------------------------------------------ */

.reviews {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper);
  border-radius: var(--radius);
  border-left: 5px solid var(--brand);
  color: var(--text);
  max-width: 34rem;
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.reviews__score {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.reviews__figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  line-height: 0.9;
  color: var(--brand-deep);
  margin: 0;
}

.reviews__meta {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  display: grid;
  gap: 0.125rem;
}

.reviews__stars {
  color: var(--brand);
  font-size: 1rem;
  letter-spacing: 0.15em;
}

.reviews__chart {
  width: 100%;
  max-width: 483px;
  height: auto;
}

/* The end of the path. */
.path__end {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.path__end::before {
  content: "";
  position: absolute;
  top: -1.5rem;
  left: 50%;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--brand-deep);
  box-shadow: 0 0 0 5px var(--brand);
}

@media (max-width: 47.999rem) {
  .path__end::before { left: -2.125rem; transform: none; }
}

.reviews figcaption {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* --- faq ----------------------------------------------------------------- */

.faq {
  max-width: 46rem;
  display: grid;
  gap: 0.75rem;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 160ms ease;
}
.faq__item:hover { border-color: var(--brand); }
.faq__item[open] { border-color: var(--brand); }

.faq__item summary {
  /* A disclosure header is a control, so double- or spam-clicking it should
     not select the text. */
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  padding: 1.125rem 1.25rem;
  list-style: none;                 /* drop the default triangle */
  text-align: left;
}
.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary:focus-visible {
  outline: 3px solid var(--brand-deep);
  outline-offset: -3px;
  border-radius: var(--radius);
}

/* Bigger, because the old 0.9375rem label size was easy to scroll past. */
.faq__q {
  flex: 1;
  margin: 0;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--brand-deep);
}

/* The chevron. A pseudo-element on the summary, so it cannot be selected
   with the text and needs no extra markup. */
.faq__item summary::after {
  content: "";
  flex: none;
  width: 0.6875rem;
  height: 0.6875rem;
  border-right: 2.5px solid var(--brand);
  border-bottom: 2.5px solid var(--brand);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.faq__item[open] summary::after { transform: rotate(225deg) translateY(-2px); }

.faq__a {
  padding: 0 1.25rem 1.25rem;
  text-align: left;
}
/* Disclosure animation, done by the browser. Two JS attempts animated a child
   of ::details-content, which Chrome transitions itself - they fought, and the
   collapse stalled on reaching the content. interpolate-size is what lets
   0 -> auto interpolate; Firefox has neither, so it toggles instantly there. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }

  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 300ms cubic-bezier(0.2, 0.7, 0.3, 1),
                content-visibility 300ms allow-discrete;
  }

  .faq__item[open]::details-content { block-size: auto; }
}

.faq__a p {
  margin: 0;
  max-width: var(--measure);
  color: var(--text);
}

/* --- form block ---------------------------------------------------------- */

.form-block {
  background: var(--paper);
  /* White, not the grey tint: on #f4f5f6 the green section title fell to
     2.99:1 and the input hover border with it. The rule marks the section. */
  border-top: 4px solid var(--brand);
  padding: clamp(3.5rem, 9vw, 7rem) 0;
  scroll-margin-top: 24px;
}

.form-block .section-title { color: var(--brand); }

.form-block__lede {
  font-weight: 300;
  max-width: 48ch;
  margin: 0 0 2.5rem;
  color: var(--text-muted);
}

.form {
  max-width: 34rem;
  display: grid;
  gap: 1.5rem;
}

.field { display: grid; gap: 0.4375rem; }

.field label,
.consent__legend {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-deep);
}

.req { color: var(--danger); }
.opt {
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: none;
}

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.8125rem 0.875rem;
  width: 100%;
  min-height: 3rem;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--brand-mid) 50%),
    linear-gradient(135deg, var(--brand-mid) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) calc(50% + 2px),
    calc(100% - 0.9375rem) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

input:hover, select:hover, textarea:hover { border-color: var(--brand); }

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
}

.field[data-invalid] input,
.field[data-invalid] select {
  border-color: var(--danger);
}

.hint, .err, .form__note {
  font-family: var(--font-label);
  font-size: 0.78125rem;
  line-height: 1.5;
  margin: 0;
}
.hint { color: var(--text-muted); }
.err  { color: var(--danger); font-weight: 700; }
.form__note { color: var(--text-muted); margin-top: -0.5rem; }

/* honeypot — hidden from humans without display:none tripping bot heuristics */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- radio group --------------------------------------------------------- */

.field--radio {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4375rem;
}

.field--radio legend {
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-deep);
  padding: 0;
  margin-bottom: 0.4375rem;
}

.radios { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Three long options wrap into a ragged mess as pills in a row, so this
   group stacks and each option spans the field. */
.radios--stacked { display: grid; gap: 0.625rem; }
.radios--stacked .radio label { padding-inline: 1.25rem; }

/* Whole pill is the target, so it clears 44px without a stray hit area. */
.radio { position: relative; }

.radio input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
}

.radio label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.8125rem 1.75rem;
  min-height: 3rem;
  line-height: 1.375rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.radio input:hover + label { border-color: var(--brand); }

.radio input:checked + label {
  background: var(--brand-mid);
  border-color: var(--brand-mid);
  color: #fff;
}

.radio input:focus-visible + label {
  outline: 3px solid var(--brand-deep);
  outline-offset: 2px;
}

.field--radio[data-invalid] .radio label { border-color: var(--danger); }

/* --- file input ---------------------------------------------------------- */

input[type="file"] {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.6875rem 0.75rem;
  width: 100%;
  min-height: 3rem;
}

input[type="file"]::file-selector-button {
  font: inherit;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-deep);
  background: var(--paper-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  margin-right: 0.875rem;
  min-height: 2.25rem;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--paper-3); }

input[type="file"]:hover { border-color: var(--brand); }
input[type="file"]:focus-visible {
  outline: none;
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent);
}

.field[data-invalid] input[type="file"] { border-color: var(--danger); }

/* --- consent ------------------------------------------------------------- */

.consent {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 1.5rem 1.375rem 1.25rem;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.consent__legend { padding: 0 0.4375rem; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.875rem;
  align-items: start;
}

.check input[type="checkbox"] {
  appearance: none;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 0 0 -0.625rem;
  border: 0;
  background: none;
  position: relative;
  cursor: pointer;
  flex: none;
}

.check input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1.5rem; height: 1.5rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--field-bg);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.check input[type="checkbox"]:hover::before { border-color: var(--brand); }

.check input[type="checkbox"]:checked::before {
  background: var(--brand-mid);
  border-color: var(--brand-mid);
}

/* the tick */
.check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0.75rem; height: 0.4375rem;
  transform: translate(-50%, -70%) rotate(-45deg);
  border: solid #fff;
  border-width: 0 0 2.5px 2.5px;
}

/* Ring hugs the visible box, not the 44px hit area. */
.check input[type="checkbox"]:focus-visible { outline: none; }
.check input[type="checkbox"]:focus-visible::before {
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 45%, transparent);
}

.check label {
  font-family: var(--font-prose);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--text);
  padding-top: 0.6875rem;   /* first line centred on the 44px box */
  cursor: pointer;
}

.gdpr { border-top: 1px solid var(--line); padding-top: 1rem; }

.gdpr summary {
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-mid);
  cursor: pointer;
  padding: 0.375rem 0;
}
.gdpr summary:hover { color: var(--brand-deep); }

.gdpr__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
  padding-top: 0.75rem;
}
.gdpr__body h4 {
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 0.875rem;
}
.gdpr__body p { margin: 0 0 0.75rem; }
.gdpr__body strong { color: var(--text); }

.gdpr__date {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1rem;
}

.turnstile:empty { display: none; }

/* --- states -------------------------------------------------------------- */

.state {
  border-radius: var(--radius);
  padding: 1.375rem 1.5rem;
  animation: fade-in 260ms ease both;
}

.state--success {
  max-width: 34rem;
  background: var(--brand-deep);
  color: var(--paper);
  border-left: 5px solid var(--brand);
  padding: 2rem 2rem 1.75rem;
}
.state--success p { margin: 0 0 0.75rem; }
.state--success p:last-child { margin-bottom: 0; }
.state--success a { color: var(--brand); }

.state__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.05;
  margin: 0 0 0.75rem;
  color: #fff;
}

.state--error {
  background: color-mix(in srgb, var(--danger) 9%, var(--paper));
  border-left: 5px solid var(--danger);
  color: var(--text);
  font-size: 0.9375rem;
}
.state--error p { margin: 0 0 0.5rem; }
.state--error p:last-child { margin-bottom: 0; }

.state__meta { font-size: 0.9375rem; color: inherit; opacity: 0.85; }

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* A button, because it opens a dialog rather than navigating - but it sits
   between two links in the footer, so it has to look like one. */
.footer__link {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}
.footer__link:hover { text-decoration: none; }

/* --- cookie bar ---------------------------------------------------------- */

/* Fixed to the bottom rather than a modal: it must not trap anyone who only
   wants to read the page, and the form stays reachable behind it. */
.cc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--paper);
  border-top: 4px solid var(--brand);
  box-shadow: 0 -6px 24px color-mix(in srgb, var(--brand-deep) 18%, transparent);
}

.cc__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 1.5rem) var(--gutter);
  display: grid;
  gap: clamp(0.875rem, 2vw, 1.5rem);
  align-items: center;
}

@media (min-width: 48rem) {
  .cc__inner { grid-template-columns: 1fr auto; }
}

.cc__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--brand-mid);
  margin: 0 0 0.375rem;
}

.cc__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text);
  max-width: 68ch;
}

/* Accept and reject side by side and the same size: refusing has to be as
   easy as agreeing, so the reject is a button, not a link in a sub-panel. */
.cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.cc__btn {
  padding: 0.875rem 1.5rem;
  font-size: 0.875rem;
  white-space: nowrap;
}

.cc__btn--ghost {
  background: var(--paper);
  color: var(--brand-deep);
  border: 2px solid var(--brand-deep);
}
.cc__btn--ghost:hover { background: var(--paper-2); }

/* --- footer -------------------------------------------------------------- */

.footer {
  background: var(--brand);
  color: var(--brand-deep);
  padding: 2.5rem 0;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
}
.footer p { margin: 0; }

/* The commercial-register entry: required, but it should not shout. */
.footer__reg {
  flex-basis: 100%;
  font-size: 0.6875rem;
  opacity: 0.85;
}
.footer a { color: var(--brand-deep); }
.footer a:hover { color: var(--text); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 48rem) {
  .form-block__inner .form { max-width: none; }
}

/* --- motion ------------------------------------------------------------- */

/* Reveal on scroll. main.js adds .js-reveal, so without JavaScript nothing
   is ever hidden. */
:root.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

:root.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Never hide content on paper. */
@media print {
  :root.js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* Cards lift a little on hover: alive, not distracting. */
.card,
.track {
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1),
              box-shadow 200ms ease;
}
.card:hover,
.track:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-deep) 14%, transparent);
}

.timeline__step::before { transition: transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.timeline__step:hover::before { transform: scale(1.08); }

.path__media img { transition: transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.path__stop:hover .path__media img { transform: translateY(-4px); }

.reviews { transition: transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1); }
.reviews:hover { transform: translateY(-3px); }

.btn--cta {
  transition: background-color 140ms ease, transform 140ms ease, box-shadow 180ms ease;
}
.btn--cta:hover { box-shadow: 0 6px 18px -6px rgba(22, 36, 29, 0.45); }

/* --- motion / contrast preferences --------------------------------------- */

@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;
  }
}

@media (prefers-contrast: more) {

  input, select, textarea { border-width: 2px; }
}

@media print {
  .hero__media, .footer, .btn { display: none; }
  .reviews__chart { display: none; }
  /* The hero text is white; with the field gone it needs an ink colour. */
  .hero, .hero__panel { background: none; }
  .hero__panel::before { display: none; }
  .hero__inner, .hero__title, .hero__lede { color: var(--text); }
}