/* ==========================================================================
   Final direction — B's structure with A's personality.
   Layered on top of main.css and scoped to :root[data-route="b"], which is
   now the default. main.css alone (?route=a) is kept only as a reference.
   ========================================================================== */

/* 1. Type scale: B's system, with A's confidence restored selectively ----- */
:root[data-route="b"] {
  --fs-display: clamp(2.375rem, 1.3rem + 5vw, 5.75rem);         /* hero 39 → 92 */
  --fs-statement: clamp(2.125rem, 1.25rem + 3.4vw, 4.25rem);    /* Philosophy 34 → 68 */
  --fs-section: clamp(1.875rem, 1.3rem + 1.9vw, 3rem);          /* section headings 30 → 48 */
  --fs-subheading: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);       /* rows 24 → 34 */
  --fs-body: clamp(1.0625rem, 1rem + 0.15vw, 1.125rem);         /* body 17 → 18 */
  --fs-micro: 0.75rem;                                          /* metadata 12 */
  --tracking-display: -0.035em;
  --space-section: clamp(4.5rem, 3rem + 5vw, 7.5rem);
}

/* Headings: regular weight, precise tracking */
:root[data-route="b"] .hero__title { font-weight: 350; line-height: 1.02; }
:root[data-route="b"] .philosophy__statement { font-weight: 350; line-height: 1.06; letter-spacing: -0.03em; }
:root[data-route="b"] .direction__title,
:root[data-route="b"] .about__title,
:root[data-route="b"] .contact__title { font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
:root[data-route="b"] .service__name { font-weight: 400; letter-spacing: -0.015em; }
@media (max-width: 47.99rem) {
  /* balanced wrapping strands "Different" on narrow screens; normal wrapping reads better */
  :root[data-route="b"] .about__title { text-wrap: pretty; }
}

/* 2. Hero: confident on load, less empty space above it ------------------ */
:root[data-route="b"] .hero__inner {
  justify-content: center;
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
}
@media (min-width: 48rem) {
  :root[data-route="b"] .hero__content { margin-top: 0; }
}
:root[data-route="b"] .hero__geometry { transform: translate3d(0, calc(var(--p, 0) * 3rem), 0); }
:root[data-route="b"] .hero__lead { margin-top: var(--space-6); }
:root[data-route="b"] .hero__cta { margin-top: var(--space-6); }

/* 3. Rhythm: B's compact spacing ---------------------------------------- */
:root[data-route="b"] .services { padding-top: clamp(3rem, 2rem + 3vw, 5rem); }
:root[data-route="b"] .service { padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
:root[data-route="b"] .philosophy { padding-block: clamp(5rem, 3rem + 6vw, 9rem); }
:root[data-route="b"] .philosophy__label { margin-bottom: var(--space-6); }
:root[data-route="b"] .philosophy__copy { margin-top: var(--space-7); }
:root[data-route="b"] .direction { padding-block: clamp(4.5rem, 3rem + 4vw, 7rem) clamp(9rem, 7rem + 8vw, 11rem); }
:root[data-route="b"] .direction__geometry { opacity: 0.85; transform: translate3d(0, calc((1 - var(--p, 1)) * 1.5rem), 0); }
:root[data-route="b"] .about__grid,
:root[data-route="b"] .contact__grid { margin-top: var(--space-6); }

/* 4. Color: A's cyan identity, used for markers and details -------------- */
/* Section markers: cyan, with A's tick; the tick hangs so wrapped labels align */
:root[data-route="b"] .eyebrow--section {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  color: var(--color-accent);
}
:root[data-route="b"] .eyebrow--section::before {
  flex: none;
  margin: 0.62em 0 0;
}
/* In-section eyebrows (Listen / Build / Discover) in cyan, smaller than markers */
:root[data-route="b"] .service__step { color: var(--color-accent); }
/* Philosophy keeps A's cyan full stop */
:root[data-route="b"] .philosophy__stop { color: var(--color-accent); }

/* 5. Readability: stronger secondary text, same palette ------------------ */
:root[data-route="b"] .hero__lead,
:root[data-route="b"] .service__summary,
:root[data-route="b"] .philosophy__copy,
:root[data-route="b"] .direction__copy,
:root[data-route="b"] .about__copy,
:root[data-route="b"] .contact__copy { font-weight: 400; }
:root[data-route="b"] .label,
:root[data-route="b"] .site-footer__meta dt,
:root[data-route="b"] .site-footer__legal,
:root[data-route="b"] .field__optional,
:root[data-route="b"] .contact-form__note { color: var(--color-text-muted); }

/* 6. Contact form: clearly visible fields and action --------------------- */
:root[data-route="b"] .field label { color: var(--color-text); }
:root[data-route="b"] .field label[for="cf-company"] { justify-content: flex-start; gap: 0.3em; }
:root[data-route="b"] .field__optional {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}
:root[data-route="b"] .field input,
:root[data-route="b"] .field textarea { border-bottom-color: rgb(154 171 186 / 0.58); }   /* 3.3:1 against navy */
:root[data-route="b"] .field input:hover,
:root[data-route="b"] .field textarea:hover { border-bottom-color: rgb(154 171 186 / 0.75); }
:root[data-route="b"] .contact-form__submit {
  margin-left: 0;
  background-color: rgb(72 171 196 / 0.14);
}
:root[data-route="b"] .contact-form__submit:hover,
:root[data-route="b"] .contact-form__submit:focus-visible { background-color: rgb(72 171 196 / 0.26); }

/* 7. Motion: brief reveals; content readable almost immediately ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root[data-route="b"].reveal-ready [data-reveal] {
    transform: translateY(0.4rem);
    transition-duration: 450ms;
    transition-delay: calc(var(--reveal-delay, 0ms) * 0.4);
  }
  :root[data-route="b"].reveal-ready .service[data-reveal] { transform: none; }
  :root[data-route="b"].reveal-ready .service[data-reveal] > * {
    transform: translateY(0.3rem);
    transition-duration: 450ms;
    transition-delay: 0ms;
  }
  :root[data-route="b"].reveal-ready .service[data-reveal] > :nth-child(3) { transition-delay: 60ms; }
  :root[data-route="b"].reveal-ready [data-reveal].is-visible,
  :root[data-route="b"].reveal-ready .service[data-reveal].is-visible > * { transform: none; }
  :root[data-route="b"].reveal-ready .philosophy__stop { transition-delay: 250ms; transition-duration: 400ms; }
  :root[data-route="b"] .hero__line,
  :root[data-route="b"] .hero__lead,
  :root[data-route="b"] .hero__cta { animation-name: rise-quiet; animation-duration: 550ms; }
  :root[data-route="b"] .hero__line:nth-child(1) { animation-delay: 0ms; }
  :root[data-route="b"] .hero__line:nth-child(2) { animation-delay: 80ms; }
  :root[data-route="b"] .hero__lead { animation-delay: 160ms; }
  :root[data-route="b"] .hero__cta { animation-delay: 240ms; }
}
@keyframes rise-quiet {
  from { opacity: 0; transform: translateY(0.35rem); }
  to   { opacity: 1; transform: none; }
}

/* 7b. Pebble homepage ---------------------------------------------------- */
/* Hero: "AI" sits in the secondary slate, quietly; longer lines may use full width */
:root[data-route="b"] .hero__ai { color: var(--color-text-muted); }
:root[data-route="b"] .hero__content { max-width: none; }
:root[data-route="b"] .hero__lead { max-width: 44ch; }

/* Navigation in the cyan section-label type */
:root[data-route="b"] .site-nav__link {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
:root[data-route="b"] .site-nav__link:hover,
:root[data-route="b"] .site-nav__link:focus-visible { color: var(--color-text); }
:root[data-route="b"] .site-nav__short { display: none; }
@media (min-width: 64rem) and (max-width: 79.99rem) {
  /* laptop widths: shorter label on screen; the full label stays available to screen readers */
  :root[data-route="b"] .site-nav__full {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  :root[data-route="b"] .site-nav__short { display: inline; }
  :root[data-route="b"] .site-nav__list { gap: 1.75rem; }
}
@media (max-width: 63.99rem) {
  :root[data-route="b"] .site-nav__link { font-size: 1.125rem; line-height: 1.4; }
}

/* Shared editorial rows (the "Where we come in" grammar) */
:root[data-route="b"] .rows-section { padding-block: clamp(4rem, 2.75rem + 4.5vw, 6.5rem); }
:root[data-route="b"] .rows__content { margin-top: var(--space-6); }
:root[data-route="b"] .rows { list-style: none; padding: 0; margin: 0; }
:root[data-route="b"] .row {
  display: grid;
  gap: var(--space-3);
  padding-block: clamp(1.25rem, 1rem + 1vw, 2rem);
  border-top: 1px solid var(--color-line);
}
:root[data-route="b"] .row:last-child { border-bottom: 1px solid var(--color-line); }
:root[data-route="b"] .row__name {
  max-width: 22ch;
  font-size: var(--fs-subheading);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-text);
  text-wrap: balance;
}
:root[data-route="b"] .row__text {
  max-width: 44ch;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
@media (min-width: 48rem) {
  :root[data-route="b"] .row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: baseline;
  }
  :root[data-route="b"] .row__name { grid-column: 1 / span 6; }
  :root[data-route="b"] .row__text { grid-column: 7 / -1; }
}
/* Closing lines: two related treatments, so sections share a system without repeating */
:root[data-route="b"] .rows__closing {
  max-width: 34ch;
  margin-top: var(--space-7);
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: balance;
}
:root[data-route="b"] .rows__statement {
  max-width: 20ch;
  margin-top: var(--space-7);
  font-size: var(--fs-section);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-wrap: balance;
}
:root[data-route="b"] .rows__stop { color: var(--color-accent); }
/* What you get keeps the drawing; its own hairline replaces the full-bleed one */
:root[data-route="b"] .deliverables::before { display: none; }

/* Contact: reassurance carries the weight; email is a clear second path */
:root[data-route="b"] .contact__reassurance {
  max-width: 30ch;
  margin-top: var(--space-6);
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent);
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: balance;
}
:root[data-route="b"] .contact__direct { margin-top: var(--space-6); }
:root[data-route="b"] .contact__direct .link-cta { font-size: var(--fs-body); }

/* 8. Grid discipline: a fixed label rail on desktop ---------------------
   Each section opens with a full-width hairline; the section label sits in
   columns 1–3 and all content starts on one shared line at column 4. */
@media (min-width: 64rem) {
  :root[data-route="b"] .services > .container,
  :root[data-route="b"] .about > .container,
  :root[data-route="b"] .rows-section > .container,
  :root[data-route="b"] .contact > .container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    row-gap: var(--space-5);
  }
  :root[data-route="b"] .services > .container::before,
  :root[data-route="b"] .about > .container::before,
  :root[data-route="b"] .rows-section > .container::before,
  :root[data-route="b"] .contact > .container::before,
  :root[data-route="b"] .philosophy__inner::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1;
    height: 1px;
    background: var(--color-line);
  }
  :root[data-route="b"] .section-head {
    grid-column: 1 / span 3;
    grid-row: 2;
    padding-top: 0;
    border-top: 0;
  }
  :root[data-route="b"] .services__list,
  :root[data-route="b"] .about__grid,
  :root[data-route="b"] .rows__content,
  :root[data-route="b"] .contact__grid {
    grid-column: 4 / -1;
    grid-row: 2;
    margin-top: 0;
  }
  :root[data-route="b"] .service:first-child { padding-top: 0; }
  :root[data-route="b"] .row:first-child { border-top: 0; padding-top: 0; }
  :root[data-route="b"] .service__step { grid-column: 1 / span 5; }
  :root[data-route="b"] .service__name { grid-column: 1 / span 5; }
  :root[data-route="b"] .service__body { grid-column: 7 / -1; }

  /* Philosophy on the same rail */
  :root[data-route="b"] .philosophy__inner { row-gap: var(--space-5); }
  :root[data-route="b"] .philosophy__label { grid-column: 1 / span 3; grid-row: 2; margin-bottom: 0; }
  :root[data-route="b"] .philosophy__statement { grid-column: 4 / -1; grid-row: 2; }
  :root[data-route="b"] .philosophy__copy { grid-column: 4 / span 6; grid-row: 3; margin-top: var(--space-5); }

  /* R&D on the same rail; the construction drawing stays inside the rail */
  :root[data-route="b"] .direction { padding-block: clamp(4.5rem, 3rem + 4vw, 7rem); }
  :root[data-route="b"] .direction__geometry { width: min(30vw, 26rem); }
  :root[data-route="b"] .direction__aside { grid-column: 1 / span 3; }
  :root[data-route="b"] .direction__content { grid-column: 4 / -1; }

  /* About: flush to the content line, no offset */
  :root[data-route="b"] .about__grid { row-gap: var(--space-6); }
  :root[data-route="b"] .about__body { grid-column: 1 / span 8; }

  /* Contact: intro and form share the content area */
  :root[data-route="b"] .contact__intro { grid-column: 1 / span 6; }
  :root[data-route="b"] .contact-form { grid-column: 7 / -1; }
}
@media (min-width: 64rem) and (max-width: 79.99rem) {
  /* the intro column is ~20px too narrow for a two-line heading here; borrow part of the empty gutter */
  :root[data-route="b"] .contact__title { margin-right: -2rem; }
}