/* Bee Seen Social — styles.css
   One stylesheet, layered. No build step.
   Direction: "Light Through the Wing" (see PLAN.md §7). Whitespace density 2/10 (PLAN.md §7a). */

@layer tokens, base, layout, components, sections, motion;

/* ------------------------------------------------------------------ tokens */
@layer tokens {
  @font-face {
    font-family: "Jost";
    src: url("/assets/fonts/jost-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Figtree";
    src: url("/assets/fonts/figtree-var.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
  }

  :root {
    /* colour, sampled from assets/logo-bee-seen-social.jpg */
    --paper: #ffffff;          /* logo ground: header, footer, page */
    --membrane: #fdf7ea;       /* pale wing membrane: warm surfaces */
    --honey: #fce6b7;          /* wing interior: soft fields */
    --sky-wash: #f0f7fc;       /* wing tip, diluted: Bee Personal surface */
    --sky: #bee2fa;            /* wing tips */
    --sky-deep: #7fb9dd;
    --gold: #c47a0c;           /* hexagon stroke: lines, icons, ornament */
    --gold-bright: #e8a020;
    --gold-ink: #8a5606;       /* text gold, >= 6:1 on white */
    --gold-btn: #9c6208;       /* button fill, white text >= 5:1 */
    --gold-btn-deep: #7f4f05;
    --ink: #2a2622;
    --ink-soft: #5e5650;
    --error: #a3342b;          /* form errors, >= 6:1 on white */
    --line: #d9d4cc;           /* neutral borders on form controls */

    /* type */
    --font-display: "Jost", "Futura", "Century Gothic", sans-serif;
    --font-text: "Figtree", "Segoe UI", system-ui, sans-serif;
    --fs-display: clamp(3.25rem, 1.1rem + 6.2vw, 6.5rem);   /* 52px phone -> 104px desktop */
    --fs-h2: clamp(2.5rem, 1.4rem + 3.2vw, 4.25rem);         /* 40px -> 68px */
    --fs-h3: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);           /* 24px -> 31px */
    --fs-body: clamp(1.125rem, 1rem + 0.42vw, 1.3125rem);    /* 18px -> 21px */
    --fs-small: clamp(1rem, 0.94rem + 0.25vw, 1.125rem);     /* 16px -> 18px: nav, lists, meta */
    --fs-fine: 0.9375rem;                                     /* 15px: tags, notes, legal */

    /* space (PLAN.md §7a) */
    --margin: clamp(24px, 7vw, 120px);
    --section-y: clamp(80px, 7.5vw + 52px, 176px);   /* ~160px @1440, ~110px @768, 80px @375 */
    --content: 1200px;
    --measure: 42ch;
    --gap-card: clamp(24px, 3.4vw, 48px);
    --pad-card: clamp(36px, 5.2vw, 84px);
    --s-heading: clamp(16px, 1.4vw, 20px);   /* heading -> paragraph */
    --s-action: clamp(24px, 2.2vw, 32px);    /* paragraph -> action */
    --s-content: clamp(40px, 4.3vw, 64px);   /* section head -> its content (grid, track) */

    /* shape */
    --radius-card: 28px;
    --radius-media: 20px;

    /* motion (emil-design-eng / review-animations STANDARDS.md) */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  }
}

/* -------------------------------------------------------------------- base */
@layer base {
  [hidden] { display: none !important; } /* hidden always wins over layout display rules */
  *, *::before, *::after { box-sizing: border-box; }
  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scrollbar-color: var(--honey) var(--paper);
  }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  img, svg { display: block; max-width: 100%; }
  img { height: auto; }
  h1, h2, h3, p, ul, ol, figure { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 300;
    color: var(--ink);
    text-wrap: balance;
  }
  p { text-wrap: pretty; }
  a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
  ::selection { background: var(--honey); color: var(--ink); }
  :focus-visible {
    outline: 2px solid var(--gold-ink);
    outline-offset: 4px;
    border-radius: 4px;
  }
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: absolute; left: var(--margin); top: -100px; z-index: 100;
    background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 999px;
    text-decoration: none; font-size: var(--fs-small);
  }
  .skip-link:focus-visible { top: 16px; }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
  .wrap {
    width: min(100% - 2 * var(--margin), var(--content));
    margin-inline: auto;
  }
  .section { padding-block: var(--section-y); position: relative; }
  .section + .section { padding-top: 0; } /* one gap between sections, not two */
  .hero + .section { padding-top: clamp(56px, 5.6vw, 100px); } /* hero already ends in air */
  .section-head { max-width: 34rem; }
  /* wide variant: heading left, sentence answers it on the right (no one-sided void) */
  @media (min-width: 900px) {
    .section-head--wide {
      max-width: none;
      display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end;
    }
    .section-head--wide p { margin-top: 0; padding-bottom: 0.5em; }
    /* Home: the sentence sits right beside its heading, not across the page */
    .section-head--tight { grid-template-columns: minmax(0, max-content) minmax(0, 26rem); gap: clamp(40px, 4vw, 64px); }
  }
  .section-head h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; }
  .section-head p {
    margin-top: var(--s-heading);
    color: var(--ink-soft);
    max-width: var(--measure);
  }
}

/* -------------------------------------------------------------- components */
@layer components {
  /* buttons: fully round, two styles only */
  .btn {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 0 30px;
    border-radius: 999px;
    font: 500 1.0625rem/1.3 var(--font-text);
    text-align: left;
    letter-spacing: 0.005em;
    text-decoration: none;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition:
      background-color 200ms ease,
      color 200ms ease,
      border-color 200ms ease,
      transform 120ms var(--ease-out);
  }
  .btn:active { transform: scale(0.97); transition-duration: 160ms; }
  .btn--primary { background: var(--gold-btn); color: #fff; }
  .btn--ghost { color: var(--gold-ink); border-color: var(--gold); background: var(--paper); }
  .btn .arrow { flex-shrink: 0; } /* the arrow never collapses when a label runs long */
  .btn .arrow { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .btn--primary:hover { background: var(--gold-btn-deep); }
    .btn--ghost:hover { border-color: var(--gold-btn); background: var(--membrane); }
    .btn:hover .arrow { transform: translateX(3px); }
  }

  .link-arrow {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--gold-ink); font-weight: 500; text-decoration: none;
    padding-block: 10px; /* 44px tap target */
  }
  .link-arrow span { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent); text-underline-offset: 0.3em; transition: text-decoration-color 200ms ease; }
  .link-arrow .arrow { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .link-arrow:hover span { text-decoration-color: var(--gold-ink); }
    .link-arrow:hover .arrow { transform: translateX(3px); }
  }

  /* logo lockup: the original JPEG on white + the name as live type */
  .lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
  .lockup img { width: auto; height: 64px; }
  .lockup__name { display: grid; font-family: var(--font-display); line-height: 0.86; }
  .lockup__name b { font-weight: 300; font-size: 1.75rem; letter-spacing: -0.01em; }
  .lockup__name small {
    margin-top: 8px; font-size: 0.6875rem; font-weight: 400;
    letter-spacing: 0.62em; text-transform: uppercase; color: var(--gold-ink);
  }
  .lockup--stacked { flex-direction: column; align-items: flex-start; gap: 18px; }
  .lockup--stacked img { height: 88px; }

  /* the wing: motion lives on the wrappers, art is swappable (PLAN.md §7b) */
  .wing { position: relative; pointer-events: none; }
  .wing__open, .wing__drift, .wing__breathe { transform-origin: 11.8% 62.9%; } /* wing root */
  .wing__breathe { position: relative; }
  .wing__art { width: 100%; height: auto; overflow: visible; }
  .wing__sheen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .wing__sheen-band { transform-box: view-box; }
  .wing__veins .v, .wing__edges .v { vector-effect: non-scaling-stroke; }

  /* photos */
  .photo { overflow: hidden; border-radius: var(--radius-media); background: var(--membrane); }
  .photo img { width: 100%; height: 100%; object-fit: cover; }

  /* WhatsApp floating button: phones only (PLAN.md §3) */
  .wa-fab {
    position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 40;
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--paper); color: var(--gold);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, white), 0 8px 24px -6px rgb(122 78 10 / 0.28); /* taste-skill-ignore: truly floating button; subtle shadow requested in the brief */
    opacity: 0; transform: translateY(8px); visibility: hidden;
    transition: opacity 150ms ease, transform 150ms var(--ease-out), visibility 0s linear 150ms;
  }
  .wa-fab svg { width: 24px; height: 24px; fill: currentColor; }
  .wa-fab.is-shown {
    opacity: 1; transform: none; visibility: visible;
    transition: opacity 200ms ease, transform 200ms var(--ease-out), visibility 0s;
  }
  .wa-fab:active { transform: scale(0.97); }
  @media (min-width: 768px) { .wa-fab { display: none; } }
  @media (max-width: 767.98px) { body.has-fab { padding-bottom: 88px; } }
}

/* ---------------------------------------------------------------- sections */
@layer sections {
  /* header (white: the logo sits on it) */
  .site-header { background: var(--paper); position: relative; z-index: 30; }
  .site-header__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    padding-block: clamp(20px, 2.6vw, 36px);
  }
  .nav { display: flex; align-items: center; gap: clamp(28px, 3vw, 44px); }
  .nav__list { display: flex; gap: clamp(24px, 2.6vw, 40px); margin: 0; padding: 0; list-style: none; }
  .nav__list a {
    font-size: var(--fs-small); color: var(--ink-soft); text-decoration: none;
    padding-block: 12px; transition: color 200ms ease;
  }
  .nav__list a[aria-current="page"] { color: var(--ink); }
  @media (hover: hover) and (pointer: fine) { .nav__list a:hover { color: var(--gold-ink); } }
  .nav .btn { min-height: 48px; padding: 0 24px; font-size: var(--fs-small); }
  .menu-toggle {
    display: none; align-items: center; gap: 10px;
    min-height: 48px; padding: 0 4px 0 16px; border: 0; background: none;
    font: 500 var(--fs-small) var(--font-text); color: var(--ink); cursor: pointer;
  }
  .menu-toggle svg { width: 28px; height: 28px; }

  @media (max-width: 1023.98px) {
    .menu-toggle { display: inline-flex; }
    .lockup img { height: 52px; }
    .lockup__name b { font-size: 1.5rem; }
    .nav {
      position: fixed; inset: 0; z-index: 50;
      flex-direction: column; justify-content: center; align-items: flex-start; gap: 48px;
      padding: 96px var(--margin) 48px;
      background: var(--paper);
      clip-path: inset(0 0 100% 0);
      visibility: hidden;
      transition: clip-path 200ms var(--ease-out), visibility 0s linear 200ms;
    }
    .nav.is-open {
      clip-path: inset(0 0 0 0); visibility: visible;
      transition: clip-path 280ms var(--ease-out), visibility 0s;
    }
    .nav__list { flex-direction: column; gap: 8px; }
    .nav__list a { font-family: var(--font-display); font-weight: 300; font-size: 2.25rem; color: var(--ink); line-height: 1.3; }
    .nav__close { position: absolute; top: 24px; right: var(--margin); }
    /* in the phone menu "Let's talk" is the one call to action: filled, like the primary button */
    .nav .btn--ghost { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; min-height: 56px; padding: 0 32px; font-size: var(--fs-body); }
  }
  @media (min-width: 1024px) { .nav__close { display: none; } }

  /* hero */
  .hero { position: relative; overflow: clip; }
  .hero__grid {
    display: grid; grid-template-columns: repeat(12, 1fr); align-items: center;
    min-height: clamp(560px, calc(100svh - 140px), 900px);
    padding-block: clamp(48px, 6vw, 96px) clamp(24px, 3vw, 48px);
  }
  .hero__text { grid-column: 1 / span 7; position: relative; z-index: 2; }
  .hero h1 .l { display: block; }
  .hero h1 {
    font-size: var(--fs-display); line-height: 1; letter-spacing: -0.03em;
    font-weight: 300; text-transform: lowercase;
  }
  .hero h1 .dot { color: var(--gold); }
  .hero__lead { margin-top: clamp(32px, 3vw, 48px); max-width: 32rem; color: var(--ink); }
  /* Home hero language pill (hidden until the Spanish pages exist; PLAN.md §10) */
  .lang-pill[hidden] { display: none !important; }
  .lang-pill {
    display: inline-flex; align-items: center; gap: 14px; margin-bottom: clamp(28px, 2.6vw, 40px);
    padding: 4px 22px 4px 4px; border-radius: 999px;
    background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--gold) 28%, white);
  }
  .lang-pill__opts { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-small); }
  .lang-pill__note { font-size: var(--fs-fine); color: var(--gold-ink); white-space: nowrap; }
  .lang-pill .lang__opt[aria-current="true"] { background: color-mix(in srgb, var(--honey) 55%, white); }
  @media (max-width: 559.98px) {
    .lang-pill { flex-wrap: wrap; gap: 10px 14px; padding: 0; border: 0; border-radius: 0; background: none; }
    .lang-pill__opts { padding: 3px; border-radius: 999px; background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--gold) 28%, white); }
  }
  .hero__actions { margin-top: var(--s-action); }
  .hero__wing {
    position: absolute; z-index: 1;
    width: clamp(560px, 56vw, 920px);
    right: clamp(16px, 2.2vw, 40px); /* whole wing inside the frame, tip included */
    top: 50%; translate: 0 -50%;
  }
  .hero__lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
  .hero__lines path { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0.55; vector-effect: non-scaling-stroke; }
  @media (max-width: 899.98px) {
    .hero__grid { min-height: auto; padding-block: 24px 16px; align-items: start; }
    .hero__text { grid-column: 1 / -1; padding-top: min(68vw, 420px); }
    .hero__wing { width: min(94vw, 580px); right: 3vw; top: 12px; translate: 0 0; }
    .hero__lines { height: calc(min(68vw, 420px) - 8px); } /* the lines end ~30px above the headline (which starts at 24px + min(68vw, 420px)), so they stay in the wing's field */
  }

  /* two front doors */
  .doors__grid {
    margin-top: var(--s-content);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-card);
  }
  .door {
    border-radius: var(--radius-card); overflow: hidden;
    background: var(--membrane);
    display: flex; flex-direction: column;
  }
  .door--personal { background: var(--sky-wash); }
  .door .photo { border-radius: 0; aspect-ratio: 16 / 10; }
  .door__body { padding: var(--pad-card); display: flex; flex-direction: column; flex: 1; }
  .door h3 {
    font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3);
    letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2;
  }
  .door__line { display: block; width: 40px; height: 2px; background: var(--gold); margin-bottom: 28px; border-radius: 2px; }
  .door--personal .door__line { background: var(--sky-deep); }
  .door__lead { margin-top: 24px; max-width: 28rem; }
  .door__services {
    margin-top: 40px; display: grid; gap: 14px;
    font-size: var(--fs-small); color: var(--ink-soft);
  }
  .door__services li { display: flex; align-items: center; gap: 14px; }
  .door__services li::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--gold); flex: none;
  }
  .door--personal .door__services li::before { background: var(--sky-deep); }
  .door .link-arrow { margin-top: auto; padding-top: 48px; align-self: flex-start; }
  @media (max-width: 899.98px) { .doors__grid { grid-template-columns: 1fr; } }

  /* the hive method */
  .hive__track { position: relative; margin-top: var(--s-content); }
  .hive__steps {
    position: relative;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
    margin: 0; padding: 0; list-style: none;
  }
  .hive__curve { position: absolute; left: 0; right: 0; top: 0; height: 80px; width: 100%; overflow: visible; }
  .hive__curve path { fill: none; stroke: var(--gold); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
  .hive__step { position: relative; padding-top: calc(var(--y) + 44px); text-align: center; }
  .hive__node {
    position: absolute; left: 50%; top: var(--y); translate: -50% -50%;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--paper); border: 1.5px solid var(--gold);
  }
  .hive__node::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--gold-bright);
  }
  .hive__step h3 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.005em; }
  .hive__step p { margin-top: 10px; color: var(--ink-soft); font-size: var(--fs-small); }
  .hive__curve--v { display: none; }
  @media (max-width: 767.98px) {
    .hive__steps { grid-template-columns: 1fr; gap: 56px; padding-left: 44px; }
    .hive__track { margin-top: 40px; }
    .hive__curve--h { display: none; }
    .hive__curve--v { display: block; left: 0; top: 8px; bottom: 8px; width: 28px; height: auto; right: auto; }
    .hive__step { text-align: left; padding-top: 0; }
    .hive__node { left: -37px; top: 14px; translate: 0 -50%; }
  }

  /* our work preview */
  .work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
  .work__grid {
    margin-top: var(--s-content);
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-card);
    padding: 0; list-style: none;
  }
  .tile .photo { aspect-ratio: 4 / 5; }
  .tile__tag {
    display: inline-block; margin-top: 28px;
    font-size: var(--fs-fine); color: var(--gold-ink);
  }
  .tile h3 { margin-top: 8px; font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; }
  /* linked tiles: the whole tile is the target, the title carries the link */
  .tile:has(.tile__link) { position: relative; }
  .tile__link { color: inherit; text-decoration: none; }
  .tile__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-media); }
  .tile__link:focus-visible { outline: none; }
  .tile__link:focus-visible::after { outline: 1.6px solid var(--gold-ink); outline-offset: 6px; }
  @media (hover: hover) and (pointer: fine) { .tile:has(.tile__link):hover h3 { color: var(--gold-ink); } }
  .tile__meta { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-soft); }
  .work__note { margin-top: 36px; font-size: var(--fs-fine); color: var(--ink-soft); }
  .work__note--top { margin-top: 16px; }
  @media (max-width: 899.98px) {
    .work__grid { grid-template-columns: 1fr 1fr; }
    .work__grid > :nth-child(3) { display: none; }
  }
  @media (max-width: 559.98px) { .work__grid { grid-template-columns: 1fr; gap: 64px; } }

  /* closing band */
  .band {
    position: relative; overflow: hidden;
    border-radius: var(--radius-card); background: var(--membrane);
    display: grid; grid-template-columns: 5fr 7fr; align-items: center;
    min-height: clamp(380px, 34vw, 480px);
  }
  .band__wing { position: absolute; left: -9%; top: 50%; width: min(56%, 620px); translate: 0 -46%; opacity: 0.95; }
  .band__wing img { width: 100%; }
  .band__text { grid-column: 2; padding: var(--pad-card); position: relative; }
  .band h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; }
  .band p { margin-top: var(--s-heading); color: var(--ink-soft); max-width: 32rem; }
  .band__actions { margin-top: var(--s-action); display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
  @media (max-width: 899.98px) {
    .band { grid-template-columns: 1fr; }
    .band__text { grid-column: 1; padding-top: clamp(200px, 48vw, 300px); }
    .band__wing { left: 6%; top: 20px; translate: 0 0; width: 72%; }
  }

  /* footer (white: the logo sits on it) */
  .site-footer { background: var(--paper); padding-block: clamp(48px, 5.6vw, 100px) 40px; }
  .footer__grid {
    display: grid; grid-template-columns: 4fr 2fr 3fr 3fr; gap: 48px;
  }
  .footer__tagline { margin-top: 32px; font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h3); color: var(--gold-ink); }
  .footer__lang { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-soft); }
  .footer__title { font: 500 var(--fs-small) var(--font-text); color: var(--ink); margin-bottom: 20px; }
  .footer__list { display: grid; gap: 4px; padding: 0; margin: 0; list-style: none; font-size: var(--fs-small); }
  .footer__list a { color: var(--ink-soft); text-decoration: none; display: inline-block; padding-block: 8px; transition: color 200ms ease; }
  @media (hover: hover) and (pointer: fine) { .footer__list a:hover { color: var(--gold-ink); } }
  .social { display: flex; gap: 8px; margin-top: 16px; }
  .social a {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    color: var(--gold-ink); background: var(--membrane);
    transition: background-color 200ms ease, color 200ms ease;
  }
  .social svg { width: 18px; height: 18px; fill: currentColor; }
  @media (hover: hover) and (pointer: fine) { .social a:hover { background: var(--honey); } }
  .footer__base {
    margin-top: clamp(56px, 5vw, 80px); padding-top: 24px;
    display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap;
    font-size: var(--fs-fine); color: var(--ink-soft);
  }
  .footer__base a { color: var(--ink-soft); }
  .credits summary { cursor: pointer; list-style: none; padding-block: 4px; }
  .credits summary::-webkit-details-marker { display: none; }
  .credits summary span { text-decoration: underline; text-underline-offset: 0.25em; }
  .credits ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; max-width: 40rem; }
  @media (max-width: 1023.98px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: 56px 32px; } .footer__brand { grid-column: 1 / -1; } }
  @media (max-width: 559.98px) { .footer__grid { grid-template-columns: 1fr; } }

  /* ---------- division pages (Bee Business / Bee Personal): one shared template ---------- */
  .hero--division .hero__grid { min-height: clamp(520px, calc(78svh - 140px), 760px); }
  .hero--division h1 { text-transform: none; }
  .hero--division .hero__wing { width: clamp(480px, 48vw, 780px); }
  /* Our Work: a shorter hero, so our own project rises into the first screen */
  @media (min-width: 900px) {
    .page-work .hero--division .hero__grid { min-height: clamp(420px, calc(60svh - 120px), 580px); }
    .page-work .hero--division .hero__wing { width: clamp(400px, 40vw, 640px); }
  }
  .page-work .work-gallery { padding-top: clamp(16px, 2vw, 32px); }
  @media (max-width: 899.98px) {
    .hero--division .hero__grid { min-height: auto; }
    .hero--division .hero__wing { width: min(94vw, 580px); }  /* same phone wing as Home */
    .hero--division .hero__lines { height: min(62vw, 280px); } /* lines stay in the wing's field, never across the title */
  }
  .hero__actions { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; }

  .services__grid { margin-top: var(--s-content); display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px; align-items: stretch; }
  .services__intro { grid-column: 1 / span 5; position: relative; }
  .services__intro .photo { position: sticky; top: 48px; height: min(calc(100svh - 96px), 100%); min-height: 520px; }
  .services__list { grid-column: 7 / -1; display: grid; gap: 60px; margin: 0; padding: 0; list-style: none; }
  /* the intro sentence starts on the same column as the service list below it */
  @media (min-width: 900px) {
    .services .section-head--wide { grid-template-columns: repeat(12, 1fr); gap: 48px; }
    .services .section-head--wide h2 { grid-column: 1 / span 6; }
    .services .section-head--wide p { grid-column: 7 / -1; }
  }
  .service h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; }
  .service p { margin-top: 12px; color: var(--ink-soft); max-width: var(--measure); }
  .service__line { display: block; width: 40px; height: 2px; border-radius: 2px; background: var(--gold); margin-bottom: 24px; opacity: 0.7; }
  .page-personal .service__line { background: var(--sky-deep); }
  @media (max-width: 899.98px) {
    .services__grid { grid-template-columns: 1fr; gap: var(--s-content); }
    .services__intro, .services__list { grid-column: 1 / -1; }
    .services__intro .photo { position: static; height: auto; min-height: 0; aspect-ratio: 4 / 3; }
    .services__list { gap: 44px; }
  }

  .pack {
    position: relative; overflow: hidden;
    border-radius: var(--radius-card); background: var(--membrane);
    padding: var(--pad-card);
    display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center;
  }
  .page-personal .pack { background: var(--sky-wash); }
  .page-personal .band { background: var(--sky-wash); } /* the division accent carries to the close, as honey does for Bee Business */
  .pack h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; }
  .pack p { margin-top: var(--s-heading); color: var(--ink-soft); max-width: var(--measure); }
  .pack__actions { margin-top: var(--s-action); display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
  /* wide screens: a wider text column so the two actions sit on one row */
  @media (min-width: 1100px) { .pack { grid-template-columns: 8fr 4fr; } .pack__actions { gap: 16px 20px; } .pack__actions .btn { white-space: nowrap; } }
  @media (max-width: 899.98px) { .pack { grid-template-columns: 1fr; } }
  /* phones: the decorative curve would only add empty space; the two actions take the full width, one line each */
  @media (max-width: 559.98px) {
    .pack__actions { flex-direction: column; align-items: stretch; gap: 12px; }
    .pack__actions .btn { justify-content: center; white-space: nowrap; padding-inline: 14px; gap: 8px; font-size: var(--fs-small); }
  }
  @media (max-width: 359.98px) { .pack__actions .btn { white-space: normal; text-align: center; } }

  .work__grid--two { grid-template-columns: 1fr 1fr; }
  .work__grid--two .tile .photo { aspect-ratio: 4 / 3; }
  @media (max-width: 559.98px) { .work__grid--two { grid-template-columns: 1fr; } }

  /* ---------- About page ---------- */
  /* 1. Our story: editorial title, text beside a tall photo with the wing perched on its corner */
  .about-story { padding-block: clamp(48px, 6vw, 96px) 0; }
  .page-about .section-head { max-width: 54rem; }
  .page-about { --fs-about: clamp(2.5rem, 1rem + 5vw, 5.5rem); --fs-statement: clamp(2.125rem, 1.2rem + 2.6vw, 3.5rem); }
  .page-about .band h2 { font-size: var(--fs-statement); }
  .about-story h1 {
    font-size: var(--fs-about); line-height: 1.02; letter-spacing: -0.03em;
    text-transform: none; max-width: 15em;
  }
  .about-story h1 .l { display: block; }
  .about-story__grid {
    margin-top: var(--s-content);
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px; align-items: start;
  }
  .about-story__text { grid-column: 1 / span 5; display: grid; gap: var(--s-action); }
  .about-story__text p { max-width: var(--measure); }
  .about-story__text p:first-child { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h3); line-height: 1.4; letter-spacing: -0.005em; max-width: 22em; }
  .about-story__text p + p { color: var(--ink-soft); }
  .about-story__media { grid-column: 7 / -1; position: relative; margin-top: clamp(64px, 7vw, 104px); /* room for the wing, clear of the title */ }
  .about-story__media .photo { aspect-ratio: 4 / 3; }
  .about-story .hero__wing { left: -30%; top: -13%; right: auto; translate: 0 0; width: 64%; z-index: 2; }
  @media (max-width: 899.98px) {
    .about-story__grid { grid-template-columns: 1fr; gap: var(--s-content); }
    .about-story__text, .about-story__media { grid-column: 1 / -1; }
    .about-story__media { margin-top: 64px; }
    .about-story .hero__wing { left: -6%; top: -64px; width: 78%; }
  }

  /* 2. What we believe: one large statement on a membrane field, a faint wing revealing behind */
  .believe__panel {
    position: relative; overflow: hidden;
    border-radius: var(--radius-card); background: var(--membrane);
    padding: var(--pad-card);
    display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 48px;
  }
  .believe__panel h2 {
    grid-column: 1 / span 9; position: relative; z-index: 1;
    font-size: var(--fs-about); line-height: 1.04; letter-spacing: -0.025em;
  }
  .believe__panel p { position: relative; z-index: 1; color: var(--ink); max-width: 30rem; }
  .believe__panel p:nth-of-type(1) { grid-column: 1 / span 4; }
  .believe__panel p:nth-of-type(2) { grid-column: 5 / span 4; color: var(--ink-soft); }
  .believe__wing { position: absolute; right: -10%; bottom: -26%; width: min(52%, 640px); opacity: 0.55; pointer-events: none; }
  .believe__wing img { width: 100%; }
  @media (max-width: 899.98px) {
    .believe__panel { grid-template-columns: 1fr; padding-bottom: clamp(200px, 52vw, 320px); }
    .believe__panel h2, .believe__panel p:nth-of-type(1), .believe__panel p:nth-of-type(2) { grid-column: 1 / -1; }
    .believe__wing { width: 88%; right: -18%; bottom: -12%; }
  }

  /* 3. What makes us different: four principles in one aligned editorial row, no cards */
  .principles {
    margin: var(--s-content) 0 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 40px;
  }
  .principle__num {
    display: block; font-family: var(--font-display); font-weight: 300;
    font-size: var(--fs-statement); line-height: 1; letter-spacing: -0.02em;
    color: var(--gold-ink);
  }
  .principle h3 { margin-top: 28px; font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; }
  .principle p { margin-top: 12px; color: var(--ink-soft); font-size: var(--fs-small); max-width: 28ch; }
  @media (max-width: 1023.98px) { .principles { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 559.98px) {
    .principles { grid-template-columns: 1fr; gap: 48px; }
    .principle { display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; }
    .principle__num { grid-row: span 2; font-size: 2.25rem; }
    .principle h3 { margin-top: 2px; }
  }

  /* 4. Two sides, one vision: the two division panels joined by one drawn line */
  .sides { position: relative; margin-top: var(--s-content); }
  .sides__link { position: absolute; left: 0; right: 0; top: -28px; width: 100%; height: 40px; overflow: visible; }
  .sides__link path { fill: none; stroke: var(--gold); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
  .sides .doors__grid { margin-top: 0; }
  .door__label { margin-top: 12px; font-size: var(--fs-small); color: var(--gold-ink); }
  .door--personal .door__label { color: #3f6f8f; }
  @media (max-width: 899.98px) { .sides__link { display: none; } }

  /* 5. The Hive Method on About carries the step numbers */
  .hive__num { display: block; margin-bottom: 8px; font-family: var(--font-display); font-weight: 300; font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--gold-ink); }

  /* 6. Closing tagline */
  .band__tagline { margin-top: 32px; font-family: var(--font-display); font-weight: 300; font-size: var(--fs-h3); color: var(--gold-ink); }

  /* ---------- Our Work ---------- */
  .filter { margin-top: var(--s-content); display: flex; flex-wrap: wrap; gap: 12px; }
  .filter button {
    min-height: 48px; padding: 0 24px; border-radius: 999px; cursor: pointer;
    font: 500 var(--fs-small) var(--font-text); color: var(--ink-soft);
    background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--gold) 35%, white);
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 120ms var(--ease-out);
  }
  .filter button:active { transform: scale(0.97); transition-duration: 160ms; }
  .filter button[aria-pressed="true"] { background: var(--gold-btn); border-color: var(--gold-btn); color: #fff; }
  @media (hover: hover) and (pointer: fine) { .filter button[aria-pressed="false"]:hover { border-color: var(--gold); color: var(--gold-ink); } }
  @media (max-width: 479.98px) {
    .filter { gap: 6px; }
    .filter button { padding: 0 14px; white-space: nowrap; font-size: var(--fs-fine); }
    .filter button[data-show="all"] { min-width: 58px; }
  }
  .project__facts { margin: 20px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: var(--fs-small); }
  .project__facts dt { color: var(--ink-soft); }
  .project__facts dd { margin: 0; color: var(--ink); }
  .case[hidden], .cases > .case[hidden] { display: none; }

  /* designed screens on a tinted stage (Our Work, and the "Ideas" tiles on Home and the division pages).
     Screens live in tools/screens/ and are styled by screens.css. */
  .stage { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-card); background: var(--stage-bg, var(--membrane)); }
  .stage > .frame { position: absolute; }
  /* "Concept" chip: the honesty label sits on the screens themselves, before any reading */
  .stage__chip {
    position: absolute; z-index: 2; top: 16px; right: 16px;
    padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.92);
    font-size: var(--fs-fine); color: var(--ink);
  }
  .stage__chip--real { left: 16px; right: auto; background: var(--honey); color: var(--gold-ink); }
  /* the phone overlaps the desktop only at its edge, so key controls in both stay visible */
  .stage > .frame--desktop { left: 4%; top: 9%; width: 73%; }
  .stage > .frame--phone { right: 4%; bottom: 6%; width: 23%; }
  .stage--posts > .frame--desktop, .stage--plan > .frame--desktop { top: 6%; }
  .stage--posts > .frame--post { bottom: 8%; width: 24%; }
  .stage--posts > .hj-p1 { left: 28%; rotate: -3deg; }
  .stage--posts > .hj-p2 { left: 50%; bottom: 13%; rotate: 1.5deg; }
  .stage--posts > .hj-p3 { left: 71%; rotate: -1deg; }
  .stage--plan > .frame--card { left: 4%; bottom: 6%; width: 34%; }
  .stage--featured { aspect-ratio: 15 / 8; }
  .stage--featured > .frame--desktop { left: 4%; top: 13%; width: 60%; }
  .stage--featured > .frame--sheet { right: 5%; top: 8%; width: 29%; }
  .tile .stage--phone { aspect-ratio: 4 / 5; }
  .stage--tile.stage--phone > .frame--phone { left: 50%; right: auto; top: 10%; bottom: auto; width: 54%; translate: -50% 0; }
  .tile .stage--desktop { aspect-ratio: 4 / 3; }
  .stage--tile.stage--desktop > .frame--desktop { left: 7%; top: 13%; width: 86%; }
  @media (max-width: 899.98px) {
    .stage:not(.stage--tile) { aspect-ratio: 4 / 5; }
    .stage__chip { top: 12px; right: auto; left: 12px; }
    .stage > .frame--desktop, .stage--posts > .frame--desktop, .stage--plan > .frame--desktop, .stage--featured > .frame--desktop { left: 6%; top: 15%; width: 88%; }
    .stage--featured > .frame--sheet { right: 6%; top: auto; bottom: 5%; width: 58%; }
    .stage--featured > .frame--desktop { top: 19%; }
    .stage > .frame--phone, .stage--featured > .frame--phone { right: 6%; bottom: 5%; width: 36%; }
    .stage--posts > .frame--post { width: 30%; }
    .stage--posts > .hj-p1 { left: 4%; bottom: 10%; }
    .stage--posts > .hj-p2 { left: 35%; bottom: 16%; }
    .stage--posts > .hj-p3 { left: 66%; bottom: 7%; }
    .stage--plan > .frame--card { left: 5%; bottom: 7%; width: 52%; }
  }

  /* case studies */
  .case--featured { margin-top: var(--s-content); }
  .cases { display: grid; gap: clamp(96px, 9vw, 160px); margin-top: var(--s-content); }
  /* the filter sits between our own project and the concepts, and filters the concepts only */
  .concepts-bar { margin-top: clamp(96px, 9vw, 160px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
  .concepts-bar .filter { margin-top: 0; }
  .filter__label { font-size: var(--fs-small); color: var(--ink-soft); }
  @media (min-width: 900px) {
    /* stages and stories start together; the stage stays in view while the story is read */
    .cases > .case:not(.case--wide) { align-items: start; }
    .cases > .case:not(.case--wide) > .stage { position: sticky; top: 40px; }
  }
  .cases > .case { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 88px); align-items: center; }
  .cases > .case:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .cases > .case:nth-child(even) > .stage { order: 2; }
  /* one case breaks the alternating rhythm: a wide, phone-first stage with its story in columns below */
  .cases > .case.case--wide { grid-template-columns: 1fr; gap: 0; }
  .stage--wide { aspect-ratio: 16 / 7.4; }
  .stage--wide > .frame--phone { left: 7%; right: auto; top: 10%; bottom: auto; width: 15%; }
  .stage--wide > .frame--desktop { left: auto; right: 6%; top: 8%; width: 62%; }
  .case__tag { display: inline-block; font-size: var(--fs-fine); color: var(--gold-ink); }
  .case__tag--real { padding: 6px 14px; border-radius: 999px; background: var(--honey); }
  .case h2 { margin-top: 10px; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 400; line-height: 1.12; }
  .case--featured h2 { font-size: var(--fs-h2); line-height: 1.05; }
  .case__kind { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-soft); }
  .case__brief { margin-top: 20px; max-width: var(--measure); }
  .case__label {
    margin-top: 28px; font-family: var(--font-text); font-size: var(--fs-fine); font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-ink);
  }
  .case__story > div > .case__label:first-child { margin-top: 0; }
  .case__label + p { margin-top: 8px; max-width: var(--measure); font-size: var(--fs-small); color: var(--ink-soft); }
  .case__list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--fs-small); }
  .case__list li { position: relative; padding-left: 20px; }
  .case__list li::before { content: ""; position: absolute; left: 2px; top: 0.68em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
  .case__steps { margin: 10px 0 0; display: grid; gap: 12px; font-size: var(--fs-small); }
  .case__steps dt { font-weight: 600; }
  .case__steps dd { margin: 2px 0 0; color: var(--ink-soft); }
  .case .project__facts { margin-top: 28px; }
  .case__note { margin-top: 16px; font-size: var(--fs-fine); color: var(--ink-soft); }
  /* case invitation: the arrow stays with the last word when the line wraps */
  .case__cta { display: block; margin-top: var(--s-action); }
  .case__cta > span { display: inline; }
  .link-arrow__end { white-space: nowrap; }
  .link-arrow__end .arrow { display: inline-block; margin-left: 10px; vertical-align: -0.1em; }
  .case dd, .case p, .case li { text-wrap: pretty; }
  /* folded lists: open on desktop; on phones they fold behind a tap (main.js) */
  .case__more > summary { list-style: none; }
  @media (min-width: 900px) { .case__more > summary { pointer-events: none; } }
  .case__more > summary::-webkit-details-marker { display: none; }
  .case__more > summary .case__label { margin-top: 0; }
  .case__more { margin-top: 28px; }
  .case__story > div > .case__more:first-child { margin-top: 0; }
  @media (max-width: 899.98px) {
    .case__more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; }
    .case__more > summary::after {
      content: ""; width: 10px; height: 10px; margin-right: 6px;
      border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
      rotate: 45deg; translate: 0 -3px; transition: rotate 200ms var(--ease-out), translate 200ms var(--ease-out);
    }
    .case__more[open] > summary::after { rotate: -135deg; translate: 0 3px; }
  }
  .case__story--featured, .case__story--cols { margin-top: var(--s-content); display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; }
  @media (max-width: 899.98px) {
    .cases > .case, .cases > .case:nth-child(even) { grid-template-columns: 1fr; }
    .cases > .case:nth-child(even) > .stage { order: 0; }
    .case__story--featured, .case__story--cols { grid-template-columns: 1fr 1fr; }
    .case__story--featured > :first-child, .case__story--cols > :first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 599.98px) { .case__story--featured, .case__story--cols { grid-template-columns: 1fr; } }
  @media (max-width: 899.98px) {
    .stage--wide > .frame--phone { left: auto; right: 6%; top: auto; bottom: 5%; width: 36%; }
    .stage--wide > .frame--desktop { right: auto; left: 6%; top: 15%; width: 88%; }
  }

  /* ---------- Contact ---------- */
  #inquiry, #book { scroll-margin-top: clamp(48px, 6vw, 88px); }
  .options { margin: var(--s-content) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-card); }
  .option { border-radius: var(--radius-card); background: var(--membrane); padding: clamp(32px, 3.6vw, 56px); display: flex; flex-direction: column; }
  .option:nth-child(2) { background: var(--sky-wash); }
  .option:nth-child(3) { background: #f6f1ea; } /* warm stone: the third tint, no outline */
  .option h2, .option h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; }
  .option p a { color: var(--gold-ink); }
  .option .btn { white-space: nowrap; }
  .nowrap { white-space: nowrap; }
  .option p { margin-top: 12px; color: var(--ink-soft); }
  .option p { margin-bottom: 32px; }
  .option > :last-child { margin-top: auto; align-self: flex-start; }
  @media (max-width: 899.98px) { .options { grid-template-columns: 1fr; } }

  .cal { border-radius: var(--radius-card); background: var(--membrane); overflow: hidden; min-height: 720px; }
  .split { display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px; align-items: start; }
  .split__intro { grid-column: 1 / span 4; }
  .split__intro h2 { font-size: clamp(2.125rem, 1.2rem + 2.6vw, 3.5rem); }
  .split__main { grid-column: 6 / -1; }
  @media (max-width: 899.98px) { .split { grid-template-columns: 1fr; gap: var(--s-content); } .split__intro, .split__main { grid-column: 1 / -1; } }


  .form { display: grid; gap: 28px; }
  .field { display: grid; gap: 8px; }
  .field label, .field legend { font-weight: 500; font-size: var(--fs-small); color: var(--ink); padding: 0; }
  .field .hint { font-weight: 400; color: var(--ink-soft); }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
    width: 100%; font: 400 var(--fs-body) / 1.5 var(--font-text); color: var(--ink);
    background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--gold) 28%, var(--line)); border-radius: 14px;
    padding: 14px 16px; min-height: 52px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }
  .field textarea { min-height: 160px; resize: vertical; }
  .field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--gold-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); } /* taste-skill-ignore: focus ring on a real form field */
  .field [aria-invalid="true"] { border-color: var(--error); }
  .field .error { color: var(--error); font-size: var(--fs-small); }
  .field .error:empty { display: none; }
  fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
  .choices { display: flex; flex-wrap: wrap; gap: 10px; }
  .choice { position: relative; }
  .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .choice span {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
    font-size: var(--fs-small); color: var(--ink-soft); background: var(--paper);
    border: 1.5px solid color-mix(in srgb, var(--gold) 28%, var(--line));
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  .choice input:checked + span { background: var(--membrane); border-color: var(--gold); color: var(--ink); }
  .choice input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
  .choice[hidden] { display: none; }
  .form__honey { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: off-screen spam trap, not a rule */
  .form__status { font-size: var(--fs-small); color: var(--error); }
  .form__status:empty { display: none; }
  .form .btn[disabled] { opacity: 0.7; cursor: progress; }
  .form__note { font-size: var(--fs-fine); color: var(--ink-soft); }

  /* booking reassurance under "Get my free diagnosis" (approved 2026-11-05) */
  .cta-note { margin-top: 14px; font-size: var(--fs-fine); color: var(--ink-soft); line-height: 1.5; }
  .cta-note > span { display: block; color: var(--gold-ink); letter-spacing: 0.02em; }
  .cta-note strong { font-weight: 600; }
  /* "Free · 30 minutes · English or Spanish": each item stays whole and lines only wrap between items.
     Every item carries its own leading dot; the row is shifted left by one dot's width and clipped there,
     so the dot that starts a line is never seen and no line ends on a dot. */
  .cta-note > .cta-meta {
    --sep: 1.1em;
    display: flex; flex-wrap: wrap;
    margin-left: calc(-1 * var(--sep)); clip-path: inset(-0.25em 0 -0.25em var(--sep));
  }
  .cta-meta > * { white-space: nowrap; }
  .cta-meta > *::before { content: "\00B7"; content: "\00B7" / ""; display: inline-block; width: var(--sep); text-align: center; font-weight: 400; }
  .option .cta-note { margin-top: 12px; }

  /* Bee Personal: who it is for, and the hero in the division's sky */
  .hero__for { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-soft); max-width: 32rem; }
  .page-personal .hero { background: var(--sky-wash); }
  .page-personal .hero__lines path { stroke: var(--sky-deep); }

  /* package panel: a quiet honeycomb instead of a curve (nothing reads as a chart) */
  .pack__comb { width: 100%; max-width: 300px; height: auto; margin-inline: auto; overflow: visible; }
  .pack__comb path { fill: none; stroke: var(--gold); stroke-width: 1.25; vector-effect: non-scaling-stroke; opacity: 0.8; }
  .page-personal .pack__comb path { stroke: var(--sky-deep); }
  @media (max-width: 559.98px) { .pack__comb { display: none; } }

  /* About: meet the founder. An editorial spread: portrait left (it stays in view on desktop), her name and words right */
  .founder__grid { display: grid; grid-template-columns: 1fr; }
  .founder__eyebrow { display: flex; align-items: center; gap: 14px; font-size: var(--fs-small); font-weight: 500; color: var(--gold-ink); }
  .founder__line { flex: none; width: 40px; height: 1.5px; border-radius: 1px; background: var(--gold); }
  .founder__head h2 { margin-top: clamp(16px, 1.6vw, 24px); font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.025em; }
  .founder__role { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-soft); }
  /* The portrait in one tall arch on the white page: a 4:5 photo whose backdrop is graded to exactly the arch's cream
     (--membrane, PHOTO-BRIEF.md F1), a thin gold line echoing the arch a little outside it, and the wing half-hidden
     behind its top corner. */
  .founder { overflow-x: clip; }
  .founder__media { margin: var(--s-content) 0 0; }
  .founder__arch {
    --gap: clamp(10px, 1.1vw, 16px);   /* photo -> gold line */
    position: relative; isolation: isolate;
    width: min(100%, 452px); padding: var(--gap);
    margin-inline: auto;
  }
  .founder__photo {
    position: relative; z-index: 2;
    aspect-ratio: 4 / 5;
    border-radius: 50% 50% 0 0 / 40% 40% 0 0;   /* a true semicircle on top: radius = half the width */
    background: var(--membrane);
  }
  .founder__photo img { object-position: 50% 0; }
  .founder__outline {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible;
    fill: none; stroke: var(--gold); stroke-width: 0.22; opacity: 0.8;
  }
  .founder__wing {
    position: absolute; z-index: 0; pointer-events: none;
    left: 52%; top: -9%; width: 70%; opacity: 0.5;
  }
  .founder__wing img { width: 100%; height: auto; }
  .founder__body { margin-top: var(--s-content); }
  .founder__quote {
    position: relative; margin: 0 0 var(--s-content);
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.22; letter-spacing: -0.012em;
    color: var(--ink); max-width: 17em; text-wrap: balance;
  }
  /* hanging quotation marks in the logo's gold, so the words line up with the text below */
  .founder__quote p::before, .founder__quote p::after { font-family: var(--font-text); font-weight: 500; color: var(--gold); }
  .founder__quote p::before { content: "\201C"; position: absolute; left: -0.5em; }
  .founder__quote p::after { content: "\201D"; margin-left: 0.04em; }
  .founder__body > p { max-width: 34rem; color: var(--ink-soft); }
  .founder__body > p + p { margin-top: 1em; }
  .founder__body > blockquote + p { color: var(--ink); }
  @media (min-width: 900px) {
    .founder__grid { grid-template-columns: repeat(12, 1fr); column-gap: 48px; }
    .founder__media { grid-column: 1 / span 5; grid-row: 1 / span 2; align-self: start; margin: 0; position: sticky; top: 48px; }
    .founder__arch { margin-inline: 0; }
    .founder__head { grid-column: 7 / -1; grid-row: 1; }   /* the arch top lines up with "Meet the founder" */
    .founder__body { grid-column: 7 / -1; grid-row: 2; }
  }
  @media (max-width: 899.98px) {
    .founder__quote { padding-left: 0.5em; }
    .founder__quote p::before { left: 0; }
  }

  /* ---------- Contact: two ways in ---------- */
  /* a decision page: a compact hero, so both ways in are on the first screen */
  .page-contact .hero--division .hero__grid { min-height: auto; padding-block: clamp(40px, 5vw, 80px) 0; }
  @media (min-width: 900px) { .page-contact .hero--division .hero__wing { width: clamp(360px, 32vw, 520px); } }
  .page-contact .hero + .section { padding-top: clamp(32px, 3.5vw, 56px); }
  @media (min-width: 900px) { .page-contact .hero__lines { left: auto; width: 52%; } } /* lines stay in the wing's half, off the text */
  @media (max-width: 899.98px) {
    .page-contact .hero__text { padding-top: min(38vw, 260px); }
    .page-contact .hero--division .hero__wing { width: min(54vw, 360px); }
    .page-contact .hero__lines { height: calc(min(38vw, 260px) - 8px); }
    .page-contact .hero + .section { padding-top: 12px; }
  }
  .options--two { grid-template-columns: repeat(2, 1fr); }
  /* both cards share one set of rows (heading and text, button, note), so the buttons line up; same width too */
  .options--two .option { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; }
  .options--two .option > .btn { margin-top: 0; align-self: start; justify-self: start; width: min(19rem, 100%); justify-content: center; }
  /* a longer label (Spanish) may take two balanced lines on a narrow card instead of spilling out */
  .options--two .option > .btn { white-space: normal; text-wrap: balance; text-align: center; padding-block: 12px; }
  .options__email { margin-top: 32px; color: var(--ink-soft); }
  .options__email a { color: var(--gold-ink); }
  @media (max-width: 899.98px) { .options--two { grid-template-columns: 1fr; } }

  /* ---------- Diagnostic (/diagnostic/): a focused page, one column of questions ---------- */
  .dx-intro { padding-block: clamp(28px, 3.5vw, 56px) clamp(16px, 2vw, 32px); }
  .dx-intro__grid { display: grid; grid-template-columns: minmax(0, 680px) minmax(0, 1fr); gap: 48px; align-items: center; }
  .dx-intro h1 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em; }
  .dx-intro__lead { margin-top: var(--s-heading); max-width: 36rem; }
  .dx-points { margin: 20px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .dx-points b { display: block; font-size: var(--fs-fine); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); }
  .dx-points span { display: block; margin-top: 6px; font-size: var(--fs-small); color: var(--ink-soft); }
  .dx-intro__wa { margin-top: 16px; font-size: var(--fs-small); color: var(--ink-soft); }
  .dx-intro__wa a { color: var(--gold-ink); }
  .dx-intro__wing img { width: min(100%, 360px); height: auto; margin-left: auto; opacity: 0.55; }
  @media (max-width: 899.98px) {
    .dx-intro__grid { grid-template-columns: 1fr; }
    .dx-intro__wing { display: none; }
    .dx-points { grid-template-columns: 1fr; gap: 16px; }
  }

  .dx { padding-bottom: var(--section-y); }
  .dx-form, .dx-book { max-width: 680px; }
  .dx-form { display: grid; gap: 0; scroll-margin-top: 32px; }
  .dx-form[hidden], .dx-book[hidden], .dx-intro[hidden] { display: none; }
  .dx-book { scroll-margin-top: 32px; }
  .dx-restored { margin-bottom: 24px; font-size: var(--fs-small); color: var(--ink-soft); }
  .dx-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 0.25em; }

  .dx-progress { margin-bottom: 32px; }
  .dx-progress__bar { height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--honey) 70%, white); overflow: hidden; }
  .dx-progress__bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--gold); transition: width 500ms var(--ease-out); }
  .dx-progress__text { margin-top: 12px; font-size: var(--fs-fine); color: var(--ink-soft); }
  .dx-key { margin-top: 4px; font-size: var(--fs-fine); color: var(--ink-soft); }

  .dx-step { display: grid; gap: 40px; padding-top: 8px; }
  .dx-step + .dx-step { margin-top: 64px; } /* without JavaScript every step shows, one after another */
  .js .dx-step { display: none; }
  .js .dx-step.is-current { display: grid; }
  .js .dx-step + .dx-step { margin-top: 0; }
  .dx-step__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; outline: none; }
  .dx-q legend.dx-step__title--first { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; margin-bottom: 16px; }

  .dx-q legend, .dx-q > label { font-size: var(--fs-body); font-weight: 500; line-height: 1.4; margin-bottom: 6px; }
  .dx-star { color: var(--gold); }
  .dx-ex { font-size: var(--fs-fine); color: var(--ink-soft); }
  .dx-q legend + .dx-ex { margin: -2px 0 6px; }
  .dx-err { color: var(--error); font-size: var(--fs-small); }
  .dx-err:empty { display: none; }
  .dx-count { font-size: var(--fs-fine); color: var(--ink-soft); }
  .dx-count:empty { display: none; }
  .dx-q textarea { min-height: 96px; }
  .dx-other { margin-top: 10px; }
  .dx-small { font-size: var(--fs-fine); color: var(--ink-soft); }
  .dx-small a { color: var(--gold-ink); }

  /* options: rows for single answers and challenges, chips for short lists */
  .dx-opts--rows { display: grid; gap: 10px; }
  .dx-opts--chips { display: flex; flex-wrap: wrap; gap: 10px; }
  .dx-opt { position: relative; }
  .dx-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .dx-opt span {
    display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 12px 18px; border-radius: 14px; cursor: pointer;
    font-size: var(--fs-small); color: var(--ink); background: var(--paper);
    border: 1.5px solid color-mix(in srgb, var(--gold) 26%, var(--line));
    transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
  }
  .dx-opt span::before {
    content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--gold) 55%, var(--line)); background: var(--paper);
    transition: background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }
  .dx-opt input[type="checkbox"] + span::before { border-radius: 5px; }
  .dx-opt input:checked + span { background: var(--membrane); border-color: var(--gold); }
  .dx-opt input:checked + span::before { background: var(--gold-btn); border-color: var(--gold-btn); box-shadow: inset 0 0 0 3px var(--paper); } /* taste-skill-ignore: inner ring of a chosen radio/checkbox indicator, not elevation */
  .dx-opt input[type="checkbox"]:checked + span::before { box-shadow: inset 0 0 0 3px var(--paper); } /* taste-skill-ignore: inner ring of a chosen radio/checkbox indicator, not elevation */
  .dx-opt input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
  .dx-opt input:disabled + span { opacity: 0.5; cursor: not-allowed; color: var(--ink-soft); border-style: dashed; background: transparent; }
  .dx-opts--chips .dx-opt span { min-height: 48px; padding: 10px 18px 10px 14px; border-radius: 999px; gap: 10px; }
  @media (hover: hover) and (pointer: fine) { .dx-opt input:not(:checked):not(:disabled) + span:hover { border-color: var(--gold); } }

  /* screen 1: two large choices */
  .dx-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .dx-q legend.dx-step__title--first { margin-bottom: 12px; }
  .dx-card { position: relative; }
  .dx-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .dx-card span {
    display: grid; gap: 10px; min-height: 150px; align-content: end; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-card); cursor: pointer;
    background: var(--membrane); border: 1.5px solid transparent;
    transition: transform 220ms var(--ease-out), border-color 180ms ease;
  }
  .dx-card--personal span { background: var(--sky-wash); }
  .dx-card b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: 0.02em; }
  .dx-card small { font-size: var(--fs-small); color: var(--ink-soft); }
  .dx-card input:checked + span { border-color: var(--gold); }
  .dx-card input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 4px; }
  @media (hover: hover) and (pointer: fine) { .dx-card span:hover { transform: translateY(-3px); } }
  @media (max-width: 559.98px) { .dx-cards { grid-template-columns: 1fr; gap: 12px; } .dx-card span { min-height: 0; padding: 22px 24px; } .dx-points { gap: 10px; } .dx-points span { margin-top: 2px; } }

  .dx-switch { padding: 20px 24px; border-radius: 16px; background: var(--membrane); }
  .dx-switch__actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; }

  .dx-status { margin-top: 24px; font-size: var(--fs-small); color: var(--error); }
  .dx-status:empty { display: none; }
  .dx-nav { margin-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .dx-nav .dx-next { margin-left: auto; }
  .dx-nav [hidden] { display: none; }
  .dx-nav .btn[disabled] { opacity: 0.7; cursor: progress; }
  .dx-nojs { margin-top: 48px; }
  .js .dx-nojs { display: none; }
  html:not(.js) .dx-nav { display: none; }

  .dx-book__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; outline: none; }
  .dx-book__lead { margin-top: 10px; color: var(--ink-soft); }
  .dx-book .cal { margin-top: 32px; }
  .dx-book__later { margin-top: 20px; font-size: var(--fs-small); color: var(--ink-soft); }
  .dx-book { max-width: 880px; }

  /* ---------- Thank-you / 404 ---------- */
  .steps { margin: var(--s-content) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .steps h3 { font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; }
  .steps p { margin-top: 8px; color: var(--ink-soft); font-size: var(--fs-small); max-width: 30ch; }
  @media (max-width: 767.98px) { .steps { grid-template-columns: 1fr; gap: 32px; } }
  .landing { margin: var(--s-content) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .landing a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 28px; border-radius: 20px; background: var(--membrane); text-decoration: none; transition: transform 220ms var(--ease-out), background-color 200ms ease; }
  .landing li:nth-child(even) a { background: var(--sky-wash); }
  .landing strong { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.2; }
  .landing span { font-size: var(--fs-small); color: var(--ink-soft); }
  @media (hover: hover) and (pointer: fine) { .landing a:hover { transform: translateY(-4px); } }
  @media (max-width: 899.98px) { .landing { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 479.98px) { .landing { grid-template-columns: 1fr; } }

  /* ---------- Privacy (reading page) ---------- */
  .policy { display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px; align-items: start; }
  .policy .prose { grid-column: 1 / span 7; grid-row: 1; }
  .policy__toc { grid-column: 9 / -1; grid-row: 1; position: sticky; top: 48px; padding: 28px; border-radius: 20px; background: var(--sky-wash); }
  .policy__toc-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); }
  .policy__toc ol { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
  .policy__toc a { display: block; padding-block: 8px; font-size: var(--fs-small); color: var(--ink-soft); text-decoration: none; transition: color 200ms ease; }
  @media (hover: hover) and (pointer: fine) { .policy__toc a:hover { color: var(--gold-ink); } }
  .policy .prose h2:first-child { margin-top: 0; }
  @media (max-width: 899.98px) { .policy { grid-template-columns: 1fr; } .policy .prose, .policy__toc { grid-column: 1 / -1; grid-row: auto; } .policy__toc { position: static; } }
  .prose { max-width: 44rem; }
  .prose h2 { margin-top: 64px; font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; }
  .prose p, .prose ul { margin-top: 16px; }
  .prose ul { padding-left: 1.2em; }
  .prose li + li { margin-top: 8px; }
  .prose a { color: var(--gold-ink); }
  .notice { margin-top: var(--s-content); padding: 24px 28px; border-radius: 20px; background: var(--membrane); max-width: 44rem; }
  .notice strong { font-weight: 600; }
  .page-intro { padding-block: clamp(48px, 6vw, 96px) 0; }
  .page-intro h1 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; }
  .page-intro p { margin-top: var(--s-heading); color: var(--ink-soft); max-width: var(--measure); }

  /* ---------- EN / ES switch (header + phone menu); hidden until the Spanish pages exist ---------- */
  .lang[hidden] { display: none !important; }
  .lang { position: relative; display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-small); }
  .lang__opt {
    display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 999px;
    color: var(--ink-soft); text-decoration: none; letter-spacing: 0.06em;
    transition: color 200ms ease, background-color 200ms ease;
  }
  .lang__opt[aria-current="true"] { color: var(--gold-ink); background: var(--membrane); }
  .lang__sep { color: color-mix(in srgb, var(--gold) 50%, white); }
  .lang__hint {
    position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; white-space: nowrap;
    padding: 6px 12px; border-radius: 999px; background: var(--membrane);
    font-size: var(--fs-fine); color: var(--gold-ink);
    opacity: 0; transform: translateY(-4px); pointer-events: none;
    transition: opacity 180ms ease, transform 180ms var(--ease-out);
  }
  .lang:hover .lang__hint, .lang:focus-within .lang__hint { opacity: 1; transform: none; }
  @media (hover: hover) and (pointer: fine) { .lang__opt:not([aria-current="true"]):hover { color: var(--gold-ink); } }
  @media (max-width: 1023.98px) {
    .lang { flex-wrap: wrap; gap: 4px 2px; }
    .lang__hint { position: static; translate: none; opacity: 1; transform: none; padding: 4px 0 0; background: none; flex-basis: 100%; }
  }

  /* ---------- Contact: an elegant calendar placeholder until Calendly is ready ---------- */
  .cal { position: relative; display: block; text-align: center; padding: 0; }
  .cal__placeholder {
    min-height: 720px; padding: clamp(32px, 4vw, 56px);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    transition: opacity 300ms ease;
  }
  .cal__wing { width: 120px; height: auto; margin-bottom: 16px; }
  .cal__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); }
  .cal__grid { margin: 24px auto 20px; display: grid; grid-template-columns: repeat(7, 28px); gap: 12px; }
  .cal__grid i { width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--honey) 70%, white); }
  .cal__grid i:nth-child(-n+4) { background: color-mix(in srgb, var(--honey) 30%, white); }
  .cal__status { color: var(--ink-soft); }
  .cal .btn { margin-top: 20px; }
  .cal__fallback { margin-top: 8px; }
  .cal.is-loading .btn { display: none; }
  .cal iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 400ms ease; }
  .cal.is-ready { background: var(--paper); }
  .cal.is-ready iframe { opacity: 1; }
  .cal.is-ready .cal__placeholder { opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
  @media (max-width: 559.98px) { .cal__grid { grid-template-columns: repeat(7, 24px); gap: 8px; } .cal__grid i { width: 24px; height: 24px; } }

  /* phones: the largest gaps tighten (hero -> first section, last section -> footer) */
  @media (max-width: 767.98px) {
    .hero + .section { padding-top: 56px; }
    main > .section:last-child { padding-bottom: 56px; }
    .site-footer { padding-top: 40px; }
  }
  /* small phones: closing band keeps its heading to two lines and its button on one */
  @media (max-width: 559.98px) {
    .band__text { padding-inline: 28px; }
    .band__actions { gap: 16px 28px; }
    .band__actions .btn { padding-inline: 24px; white-space: nowrap; }
    .band h2, .pack h2, .services .section-head h2, .page-about .section-head h2 { font-size: 2.125rem; }
    .pack { padding-inline: 28px; }
  }
}

/* ------------------------------------------------------------------ motion
   All motion is opt-in: content is visible without JS and with reduced motion.
   Checked against review-animations' Ten Standards (PLAN.md §8). */
@layer motion {
  /* wing: opening (Home, first load per session) */
  .js .hero .wing__open { opacity: 0; transform: rotate(-10deg) scale(0.96); }
  .js .hero .wing.is-open .wing__open {
    opacity: 1; transform: none;
    transition: opacity 900ms ease, transform 1200ms var(--ease-out);
  }
  .js .hero .wing.is-static .wing__open { opacity: 1; transform: none; }

  /* drift + breathing: two layers, two periods, never in sync */
  @keyframes wing-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(0, -6px, 0) rotate(-1deg); }
  }
  @keyframes wing-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.012); }
  }
  .js .hero .wing.is-alive .wing__drift { animation: wing-drift 11s ease-in-out infinite; will-change: transform; }
  .js .hero .wing.is-alive .wing__breathe { animation: wing-breathe 6.5s ease-in-out infinite; will-change: transform; }
  /* light sheen: one slow pass across the membrane, then a long rest */
  @keyframes wing-sheen {
    0% { transform: translateX(0); }
    46% { transform: translateX(1480px); }
    100% { transform: translateX(1480px); }
  }
  .js .hero .wing.is-alive .wing__sheen-band { animation: wing-sheen 13s cubic-bezier(0.45, 0, 0.25, 1) 0.6s infinite; }
  .js .hero .wing.is-paused .wing__drift,
  .js .hero .wing.is-paused .wing__breathe,
  .js .hero .wing.is-paused .wing__sheen-band { animation-play-state: paused; }

  /* veins draw from the root outward */
  .js .wing .v { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .wing.is-drawn .v {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 760ms var(--ease-out) calc(var(--o) * 840ms);
  }
  .js .wing.is-drawn .v--edge { transition-duration: 1400ms; transition-delay: 0ms; }

  /* gold lines draw once when they enter view */
  .js [data-draw] path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js [data-draw].is-drawn path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms var(--ease-in-out) calc(var(--i, 0) * 120ms);
  }
  .js .hero__lines[data-draw].is-drawn path { transition-duration: 1600ms; transition-delay: calc(400ms + var(--i, 0) * 160ms); }

  /* staggered reveals, once */
  .js [data-reveal] > * , .js [data-reveal-item] { opacity: 0; transform: translateY(16px); }
  .js [data-reveal].is-in > *, .js [data-reveal].is-in [data-reveal-item] {
    opacity: 1; transform: none;
    transition: opacity 500ms ease, transform 500ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .js [data-reveal][data-reveal-mode="items"] > * { opacity: 1; transform: none; }

  /* About: the faint wing behind "What we believe" unveils from its root, once */
  .js .believe__wing img { clip-path: inset(0 100% 0 0); }
  .js .believe__wing.is-in img { clip-path: inset(0 0 0 0); transition: clip-path 1600ms var(--ease-in-out) 200ms; }

  /* About: the gold arch draws itself once, the portrait fades in softly inside it, then the wing appears */
  .js .founder__media[data-reveal] > .founder__arch { opacity: 1; transform: none; }
  .js .founder__media[data-reveal] .founder__outline path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .founder__media[data-reveal] .founder__photo,
  .js .founder__media[data-reveal] .founder__wing { opacity: 0; }
  .js .founder__media[data-reveal].is-in .founder__outline path { stroke-dashoffset: 0; transition: stroke-dashoffset 1800ms var(--ease-in-out); }
  .js .founder__media[data-reveal].is-in .founder__photo { opacity: 1; transition: opacity 1100ms ease 200ms; }
  .js .founder__media[data-reveal].is-in .founder__wing { opacity: 0.5; transition: opacity 1200ms ease 900ms; }

  /* card lift + line brighten (mouse only) */
  .door, .tile .photo, .tile .stage { transition: transform 220ms var(--ease-out); }
  .door__line { opacity: 0.6; transition: opacity 220ms ease; }
  @media (hover: hover) and (pointer: fine) {
    .door:hover { transform: translateY(-4px); }
    .door:hover .door__line { opacity: 1; }
    .tile:hover .photo, .tile:hover .stage { transform: translateY(-4px); }
  }

  /* reduced motion: no travel, lines fully drawn, gentle fades only */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .hero .wing__open { opacity: 1 !important; transform: none !important; transition: none !important; }
    .js .hero .wing .wing__drift, .js .hero .wing .wing__breathe, .js .hero .wing .wing__sheen-band { animation: none !important; }
    .js .wing .v, .js [data-draw] path { stroke-dashoffset: 0 !important; transition: none !important; }
    .js [data-reveal] > *, .js [data-reveal-item] { transform: none !important; }
    .js [data-reveal].is-in > *, .js [data-reveal].is-in [data-reveal-item] { transition: opacity 200ms ease !important; transition-delay: 0ms !important; }
    .door, .tile .photo, .tile .stage, .btn, .wa-fab { transition-property: opacity, background-color, color, border-color !important; }
    .door:hover, .tile:hover .photo, .tile:hover .stage { transform: none !important; }
    .js .believe__wing img { clip-path: none !important; transition: none !important; }
    .js .founder__media[data-reveal] .founder__outline path { stroke-dashoffset: 0 !important; transition: none !important; }
    .js .founder__media[data-reveal].is-in .founder__photo, .js .founder__media[data-reveal].is-in .founder__wing { transition: opacity 200ms ease !important; }
    .nav, .nav.is-open { transition: visibility 0s !important; }
  }
}