/* ================= tokens ================= */
  :root {
    color-scheme: light;

    /* the locked TC palette */
    --espresso:   #261614;   /* Vintage — dark cards, nav pill, footer */
    --espresso-2: #1a0f0d;   /* Vintage, deepest — marquee strip */
    --butter:     #adbdcc;   /* Mineral — light cards and plates */
    --clay:       #094943;   /* Deep Turquoise — accent blocks, chips, CTAs */
    --teal:       #009c8e;   /* Turquoise — small accents on the dark grounds */
    --teal-lit:   #009c8e;
    --sand:       #adbdcc;   /* Mineral as secondary text on dark */
    --on-dark:    #faf7f2;   /* beige as text on every dark ground */
    --depth:      #094943;
    --cta:        #094943;
    --on-cta:     #faf7f2;
    --on-light:   #261614;   /* fixed Vintage ink for Mineral plates */

    /* surfaces */
    --page:       #faf7f2;
    --raised:     #f3ede4;
    --ink:        #261614;
    --ink-2:      #6b5a54;
    --hair:       rgba(38,22,20,.18);
    --hair-2:     rgba(38,22,20,.32);

    --r-sm: 12px; --r-md: 20px; --r-lg: 30px; --r-xl: 44px; --r-pill: 999px;

    --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
    --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans:  "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

    --gut: 24px; --maxw: 1140px;
    --ease: cubic-bezier(.22,.8,.24,1);
  }

  /* ================= base ================= */
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--page); color: var(--ink);
    font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
  .band { padding-block: clamp(60px, 8vw, 110px); position: relative; }
  .band--tall { padding-block: clamp(72px, 10vw, 136px); }

  h1,h2,h3,h4 { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
  h1 { font-size: clamp(42px, 7.4vw, 82px); line-height: .96; }
  h2 { font-size: clamp(33px, 4.9vw, 58px); line-height: 1.0; }
  h3 { font-size: clamp(24px, 2.7vw, 33px); line-height: 1.12; }
  h4 { font-size: 22px; line-height: 1.16; }
  em { font-style: italic; color: var(--clay); }
  p { margin: 0; }
  a { color: inherit; }
  img { max-width: 100%; display: block; }

  .eyebrow {
    font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .2em;
    text-transform: uppercase; margin: 0 0 12px; display: flex; align-items: center; gap: 12px; color: var(--ink-2);
  }
  .eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
  .eyebrow--solo::after { display: none; }
  .lede { font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-2); margin-top: 18px; max-width: 54ch; }
  .meta { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

  .on-dark  { background: var(--espresso);   color: var(--on-dark); }
  .on-deep  { background: var(--espresso-2); color: var(--on-dark); }
  .on-butter{ background: var(--butter);     color: var(--on-light); }
  .on-raised{ background: var(--raised); }
  .on-dark .eyebrow, .on-deep .eyebrow { color: var(--sand); }
  .on-dark .eyebrow::after, .on-deep .eyebrow::after { background: rgba(244,236,224,.25); }
  .on-butter .eyebrow { color: var(--clay); }
  .on-butter .eyebrow::after { background: rgba(38,22,20,.24); }
  .on-dark .lede, .on-deep .lede { color: var(--sand); }
  .on-butter .lede { color: var(--ink); }
  .on-butter em { color: var(--clay); }

  /* ================= controls ================= */
  .btn {
    font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px;
    border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none;
    background: var(--cta); color: var(--on-cta);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
  }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(38,22,20,.22); }
  .btn--ghost { background: transparent; color: inherit; border-color: var(--hair-2); box-shadow: none; }
  .on-dark .btn--ghost, .on-deep .btn--ghost { border-color: rgba(244,236,224,.4); }
  .btn--ghost:hover { background: var(--clay); border-color: var(--clay); color: var(--on-dark); }
  .btn .arw { transition: transform .3s var(--ease); }
  .btn:hover .arw { transform: translateX(5px); }

  a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--clay); outline-offset: 3px;
  }

  /* ================= photographs ================= */
  .frame { border-radius: var(--r-lg); overflow: hidden; background: var(--espresso-2); position: relative; }
  .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .card:hover .frame img, .frame--hover:hover img { transform: scale(1.05); }
  .frame--34 { aspect-ratio: 3/4; }

  /* ================= motion ================= */
  @keyframes zoomIn { from { transform: scale(1.08); } to { transform: scale(1); } }
  @keyframes slide  { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  .hero__photo img { animation: zoomIn 1.4s var(--ease) both; }

  .marquee { overflow: hidden; padding-block: 34px; margin-block: clamp(44px, 7vw, 92px); border-block: 1px solid rgba(244,236,224,.2); background: var(--espresso-2); }
  .marquee__track { display: flex; width: max-content; animation: slide 34s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__set { display: flex; align-items: center; flex: none; }
  .marquee span {
    font-family: var(--serif); font-size: clamp(36px, 5.2vw, 62px); line-height: 1;
    letter-spacing: -.02em; color: var(--on-dark); padding-inline: 28px; white-space: nowrap;
  }
  .marquee span:nth-child(even) { color: var(--teal); font-style: italic; }
  .marquee .dot { color: var(--sand); font-family: var(--sans); font-size: 20px; padding-inline: 0; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

  /* ================= nav ================= */
  .nav {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
    background: var(--espresso); color: var(--on-dark);
    border-bottom: 1px solid rgba(244,236,224,.18);
    transition: padding .35s var(--ease);
  }
  .nav__in { display: flex; align-items: center; gap: 20px; padding-block: 18px; transition: padding .35s var(--ease); }
  .nav.small .nav__in { padding-block: 10px; }
  .mark { display: block; line-height: 0; flex: none; }
  .mark img { height: 46px; width: auto; transition: height .35s var(--ease); }
  .nav.small .mark img { height: 38px; }
  @media (max-width: 480px) { .mark img { height: 40px; } }
  .nav__links { display: flex; gap: 26px; list-style: none; margin: 0 auto 0 30px; padding: 0; }
  .nav__links a {
    font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; text-decoration: none; position: relative; padding-bottom: 5px;
  }
  .nav__links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--clay); transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
  .nav .btn { padding: 12px 20px; }
  .burger { display: none; background: transparent; border: 1px solid rgba(244,236,224,.4); color: inherit; border-radius: var(--r-pill); padding: 11px 17px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
  @media (max-width: 920px) {
    .nav__links { display: none; }
    .nav__links.open { display: flex; flex-direction: column; gap: 18px; position: absolute; top: 100%; left: 0; right: 0; background: var(--espresso); padding: 22px var(--gut) 30px; margin: 0; border-bottom: 1px solid rgba(244,236,224,.18); }
    .burger { display: inline-block; margin-left: auto; }
    .nav .btn { display: none; }
  }
  @media (max-width: 600px) {
    .nav__in { gap: 10px; }
    .nav__in > .pillbtn { padding: 10px 14px; letter-spacing: .04em; }
    .nav__in > .pillbtn .badge { display: none; }
    .burger { padding: 10px 13px; }
  }
  @media (max-width: 400px) {
    .nav__in { gap: 8px; }
    .nav__in > .pillbtn { padding: 10px 11px; font-size: 10px; }
    .burger { padding: 10px 11px; font-size: 10px; }
    .mark img { height: 40px; }
  }

  /* ================= hero ================= */
  .hero { background: var(--espresso); color: var(--on-dark); overflow: hidden; }
  .hero__in { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; padding-block: clamp(52px, 7vw, 100px); }
  .hero__photo { aspect-ratio: 4/5; width: 100%; border-radius: var(--r-xl); }
  .hero__card { background: var(--butter); color: var(--on-light); border-radius: var(--r-xl); padding: clamp(30px, 3.6vw, 50px); max-width: 570px; }
  .hero__card .eyebrow { color: var(--clay); }
  .hero__card .eyebrow::after { background: rgba(38,22,20,.24); }
  .hero__card em { color: var(--clay); }
  .hero__card .lede { color: var(--ink); }
  .capture { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
  .capture input {
    flex: 1 1 200px; min-width: 0; font-family: var(--sans); font-size: 15px; color: var(--ink);
    background: rgba(255,255,255,.5); border: 1px solid rgba(38,22,20,.24); border-radius: var(--r-pill); padding: 14px 22px;
  }
  .capture input::placeholder { color: var(--ink-2); }
  .fine { font-size: 13px; color: var(--ink-2); margin-top: 14px; }
  .fine b { color: var(--clay); font-weight: 400; }
  @media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; } .hero__photo { order: -1; aspect-ratio: 3/2; } }

  /* ================= grids ================= */
  .three { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 46px; }
  .two   { display: grid; grid-template-columns: repeat(2,1fr); gap: 30px; margin-top: 46px; }
  .cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 46px; }
  @media (max-width: 920px) { .three, .cards { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 640px) { .three, .two, .cards { grid-template-columns: 1fr; } }

  .glyph { width: 46px; height: 46px; }
  .glyph * { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; }
  .on-dark .glyph *, .on-deep .glyph * { stroke: var(--clay); }

  .card {
    background: var(--raised); border-radius: var(--r-lg); border: 1px solid var(--hair);
    overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  }
  .card:hover { transform: translateY(-6px); border-color: var(--clay); box-shadow: 0 16px 36px rgba(38,22,20,.16); }
  .card .frame { border-radius: 0; aspect-ratio: 3/2; }
  .card .frame[style*="flex"] { aspect-ratio: auto; }
  .card__body { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .card__kick { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
  .card__more { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hair); display: flex; align-items: center; gap: 8px; }
  .card:hover .arw { transform: translateX(5px); }
  .arw { display: inline-block; transition: transform .3s var(--ease); }

  /* ================= app panel ================= */
  .appgrid { display: grid; grid-template-columns: 1fr 350px; gap: 58px; align-items: center; }
  @media (max-width: 900px) { .appgrid { grid-template-columns: 1fr; } }

  .feat { display: flex; gap: 20px; align-items: flex-start; }
  .feat .num { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; color: var(--teal); padding-top: 7px; }

  .event { display: grid; grid-template-columns: 160px 1fr auto; gap: 26px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--hair); transition: padding-inline .35s var(--ease); }
  .event:first-of-type { border-top: 1px solid var(--hair); }
  .event:hover { padding-inline: 10px; }
  .event .when { color: var(--clay); }
  .event .where { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
  @media (max-width: 780px) { .event { grid-template-columns: 1fr; gap: 12px; } }

  .tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 42px; }
  @media (max-width: 920px) { .tiles { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 580px) { .tiles { grid-template-columns: 1fr; } }
  .tile {
    border-radius: var(--r-lg); padding: 28px; min-height: 176px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 18px; text-decoration: none;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .tile:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 16px 36px rgba(38,22,20,.2); }
  .tile:nth-child(4n+1) { background: var(--espresso); color: var(--on-dark); }
  .tile:nth-child(4n+2) { background: var(--butter);   color: var(--on-light); }
  .tile:nth-child(4n+3) { background: var(--depth);    color: var(--on-dark); }
  .tile:nth-child(4n+4) { background: var(--teal);     color: var(--on-dark); }
  .tile .count { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }

  /* ================= footer ================= */
  .foot { background: var(--espresso-2); color: var(--on-dark); padding-block: clamp(52px,6vw,80px) 28px; }
  .fcols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
  @media (max-width: 880px) { .fcols { grid-template-columns: 1fr 1fr; } }
  .foot h4 { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; }
  .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .foot a { text-decoration: none; font-size: 15px; transition: color .3s var(--ease), transform .3s var(--ease); display: inline-block; }
  .foot a:hover { color: var(--teal); transform: translateX(4px); }
  .foot .hline { color: var(--sand); margin-top: 18px; max-width: 30ch; }
  .fbase { margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(244,236,224,.22); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--sand); }

  .page[hidden] { display: none !important; }

  /* ===================== v3 · bold-sans editorial layout ===================== */
  h1, h2, h3, h4 { font-family: var(--sans); font-weight: 500; letter-spacing: -.035em; }
  h1 { font-size: clamp(34px, 5.4vw, 62px); line-height: 1.02; }
  h2 { font-size: clamp(28px, 3.8vw, 44px); line-height: 1.04; }
  h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; }
  h4 { font-size: 20px; line-height: 1.15; letter-spacing: -.02em; }
  em { font-style: normal; color: var(--clay); }

  /* --- light nav, like the reference --- */
  .nav { background: var(--page); color: var(--ink); border-bottom: 0; }
  .nav__in { padding-block: 18px; gap: 18px; }
  .mark img { height: 46px; }
  .nav.small .mark img { height: 38px; }
  .nav__links { margin-left: auto; margin-right: 0; gap: 30px; }
  .nav__links a { font-family: var(--sans); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; }
  .nav__links a::after { background: var(--ink); }
  .nav .btn { background: var(--espresso); color: var(--on-dark); padding: 12px 8px 12px 20px; }
  .burger { border-color: var(--hair-2); }
  @media (max-width: 920px) { .nav__links.open { background: var(--page); border-bottom: 1px solid var(--hair); } }

  /* --- pill button with its circular badge --- */
  .pillbtn {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--espresso); color: var(--on-dark);
    border: 0; border-radius: var(--r-pill); cursor: pointer;
    padding: 9px 9px 9px 24px; text-decoration: none;
    font-family: var(--sans); font-size: 15px; font-weight: 400; white-space: nowrap;
    transition: transform .3s var(--ease), background .3s var(--ease);
  }
  .pillbtn:hover { transform: translateY(-2px); background: var(--clay); color: var(--on-dark); }
  .pillbtn .badge {
    width: 34px; height: 34px; border-radius: var(--r-pill); flex: none;
    background: var(--butter); display: grid; place-items: center;
    transition: background .3s var(--ease), transform .3s var(--ease);
  }
  .pillbtn:hover .badge { background: var(--ink); transform: rotate(45deg); }
  .pillbtn .badge svg { width: 15px; height: 15px; fill: none; stroke: var(--on-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .pillbtn:hover .badge svg { stroke: var(--on-dark); }
  .badge.big { width: 44px; height: 44px; background: var(--butter); border-radius: var(--r-pill); display: grid; place-items: center; }
  .badge.big svg { width: 18px; height: 18px; fill: none; stroke: var(--on-light); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  /* --- hero --- */
  .hero2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 36px; align-items: end; padding-block: clamp(28px, 4vw, 56px) 30px; }
  .hero2 .big { max-width: 21ch; }
  .house {
    font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .2em;
    text-transform: uppercase; color: var(--clay); margin: 0 0 14px;
  }

  /* --- the conviction band --- */
  .conviction { padding-bottom: clamp(56px, 7vw, 92px); }
  .conviction__card {
    background: var(--clay); color: var(--on-dark); border-radius: var(--r-xl);
    padding: clamp(44px, 7vw, 96px) clamp(32px, 5vw, 72px);
  }
  .conviction__tag {
    font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .2em;
    text-transform: uppercase; color: var(--butter); margin-bottom: 22px;
  }
  .conviction__card h2 { color: var(--on-dark); max-width: 17ch; }
  .conviction__card em { color: var(--butter); }
  .conviction__line {
    margin-top: 26px; max-width: 46ch;
    font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; color: var(--on-dark);
  }
  .conviction__line b { color: var(--butter); font-weight: 400; }
  .hero2__side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-bottom: 6px; }
  .hero2__side p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
  @media (max-width: 860px) { .hero2 { grid-template-columns: 1fr; align-items: start; } .wide-only { display: none; } }

  /* --- image strip with the mark behind --- */
  .strip { position: relative; padding-bottom: 8px; }
  .strip__row { position: relative; z-index: 1; display: grid; grid-template-columns: 1.35fr .72fr 1.35fr; gap: 14px; }
  .shot { border-radius: var(--r-lg); overflow: hidden; background: var(--espresso-2); aspect-ratio: 16/11; }
  .shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .shot:hover img { transform: scale(1.05); }
  .s-b { aspect-ratio: 8/11; align-self: stretch; }
  @media (max-width: 860px) { .strip__row { grid-template-columns: 1fr 1fr; } .s-c { grid-column: 1 / -1; } }

  /* --- centred intro --- */
  .intro { text-align: center; padding-block: clamp(56px, 7vw, 92px); display: flex; flex-direction: column; align-items: center; gap: 30px; }
  .intro__text {
    font-family: var(--sans); font-weight: 500; letter-spacing: -.03em;
    font-size: clamp(22px, 3vw, 36px); line-height: 1.34; max-width: 26ch; color: var(--ink);
  }
  .chip {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    border: 1.5px solid var(--clay); border-radius: var(--r-pill);
    padding: 2px 16px 4px; color: var(--ink);
  }
  .chip .ic { width: .82em; height: .82em; flex: none; fill: none; stroke: var(--clay); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

  /* --- example answer --- */
  .demo { padding-bottom: clamp(56px, 7vw, 92px); }
  .demo__card { background: var(--espresso); color: var(--on-dark); border-radius: var(--r-xl); padding: clamp(30px, 4vw, 54px); max-width: 780px; }
  .demo__tag { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--clay); margin-bottom: 18px; }
  .demo__q { font-size: clamp(19px, 2.2vw, 25px); font-weight: 400; color: var(--butter); margin-bottom: 18px; }
  .demo__a { font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: var(--on-dark); }
  .demo__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(250,247,242,.22); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }

  /* --- bento --- */
  .bento { display: grid; grid-template-columns: .82fr 1.18fr; gap: 14px; padding-bottom: clamp(56px, 7vw, 92px); }
  .bento__lead {
    background: var(--butter); color: var(--on-light); border-radius: var(--r-lg);
    padding: 34px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
    text-decoration: none; min-height: 250px; transition: transform .4s var(--ease);
  }
  .bento__lead:hover { transform: translateY(-4px); }
  .arrowbig svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
  .bento__lead:hover .arrowbig svg { transform: translateX(5px); }
  .bento__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bcard {
    background: var(--clay); color: var(--on-dark); border-radius: var(--r-lg);
    padding: 22px; min-height: 128px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
    transition: transform .4s var(--ease);
  }
  .bcard:hover { transform: translateY(-4px); }
  .bcard p { font-size: 14px; line-height: 1.4; max-width: 22ch; font-weight: 400; }
  .bic { width: 30px; height: 30px; border-radius: var(--r-pill); background: rgba(250,247,242,.2); display: grid; place-items: center; }
  .bic svg { width: 15px; height: 15px; fill: none; stroke: var(--on-dark); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  @media (max-width: 860px) { .bento { grid-template-columns: 1fr; } }

  /* --- portfolio grid --- */
  .folio {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    padding-bottom: clamp(56px, 7vw, 92px);
  }
  .folio__head {
    background: var(--espresso); color: var(--on-dark); border-radius: var(--r-lg);
    padding: 30px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
    text-decoration: none; min-height: 168px; transition: transform .4s var(--ease);
  }
  .folio__head:hover { transform: translateY(-4px); }
  .f { border-radius: var(--r-lg); overflow: hidden; background: var(--espresso-2); }
  .f img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
  .f:hover img { transform: scale(1.05); }
  .f1 { grid-row: span 2; aspect-ratio: auto; min-height: 340px; }
  .f2, .f3 { aspect-ratio: 3/2; }
  .f4, .f5 { aspect-ratio: 3/2; }
  .f6 { grid-column: span 2; aspect-ratio: 16/7; }
  @media (max-width: 860px) {
    .folio { grid-template-columns: 1fr 1fr; }
    .f1 { grid-row: auto; min-height: 0; aspect-ratio: 3/4; }
    .f6 { grid-column: span 2; }
  }

  /* --- process --- */
  .steps { padding-bottom: clamp(56px, 7vw, 92px); padding-top: clamp(56px, 7vw, 92px); }
  .steps__top { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 34px; }
  .steps__top p { font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
  @media (max-width: 860px) { .steps__top { grid-template-columns: 1fr; } }
  .steps__body { display: grid; grid-template-columns: 1.55fr .85fr; gap: 26px; align-items: start; }
  @media (max-width: 860px) { .steps__body { grid-template-columns: 1fr; } }
  .steplist { border-top: 1px solid var(--hair); }
  .step { border-bottom: 1px solid var(--hair); }
  .step__btn {
    width: 100%; display: flex; align-items: center; gap: 20px; text-align: left;
    background: transparent; border: 0; cursor: pointer; padding: 20px 0; color: var(--ink-2);
    font-family: var(--sans); font-size: 17px; font-weight: 400;
    transition: color .3s var(--ease);
  }
  .step.open .step__btn, .step__btn:hover { color: var(--ink); }
  .num {
    width: 34px; height: 34px; flex: none; border-radius: var(--r-pill);
    display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 500;
    border: 1px solid var(--hair-2); color: var(--ink-2);
    transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  }
  .step.open .num { background: var(--espresso); color: var(--on-dark); border-color: var(--espresso); }
  .step__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
  .step.open .step__wrap { grid-template-rows: 1fr; }
  .step__in { overflow: hidden; }
  .step__in p { padding: 0 0 22px 54px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
  .steps__shot { border-radius: var(--r-lg); overflow: hidden; background: var(--espresso-2); aspect-ratio: 4/5; }
  .steps__shot img { width: 100%; height: 100%; object-fit: cover; }

  .pillbtn.light { background: var(--butter); color: var(--on-light); }
  .pillbtn.light .badge { background: var(--espresso); }
  .pillbtn.light .badge svg { stroke: var(--on-dark); }
  .pillbtn.light:hover { background: var(--on-dark); }
  .pillbtn.ghosty { background: transparent; color: var(--on-dark); border: 1px solid rgba(250,247,242,.4); padding: 13px 24px; }
  .pillbtn.ghosty:hover { background: var(--butter); color: var(--on-light); border-color: var(--butter); }

  /* --- closing card --- */
  .closer { padding-bottom: clamp(56px, 7vw, 92px); }
  .closer__card {
    background: var(--clay); color: var(--on-dark); border-radius: var(--r-xl);
    padding: clamp(36px, 5vw, 68px); text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
  }
  .closer__mark { width: 84px; height: auto; }
  .closer__card h2 { color: var(--on-dark); }
  .closer__card > p { color: var(--sand); max-width: 46ch; font-size: 16px; }
  .closer .capture { justify-content: center; max-width: 480px; width: 100%; }
  .closer .capture input { background: rgba(244,236,224,.08); border-color: rgba(244,236,224,.34); color: var(--on-dark); }
  .closer .capture input::placeholder { color: var(--sand); }
  .closer .fine { color: var(--sand); }
  .closer .fine b { color: var(--butter); }

  /* --- curator brief form --- */
  .bf { font-family: var(--sans); font-size: 15px; color: var(--on-light);
    background: rgba(255,255,255,.55); border: 1px solid rgba(38,22,20,.24);
    border-radius: var(--r-md); padding: 14px 18px; width: 100%; min-width: 0; }
  .bf::placeholder { color: rgba(38,22,20,.55); }
  textarea.bf { border-radius: var(--r-md); resize: vertical; }
  @media (max-width: 560px) { #brief-form > div { grid-template-columns: 1fr !important; } }

  /* ===================== production additions (not in the prototype) ===================== */

  /* accent words on the espresso bands: --clay on --espresso is unreadable (§7 em rule) */
  .on-dark em, .on-deep em { color: var(--teal); }

  /* Web3Forms honeypot */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

  /* legal & support pages: no prototype design, so plain prose on the house tokens */
  .legal { max-width: 780px; }
  .legal h1 { margin-bottom: 18px; }
  .legal .policy-date, .legal .legal-updated {
    display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-2); margin-bottom: 30px; }
  .legal .policy-intro, .legal .legal-intro { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; margin-bottom: 8px; }
  .legal h2 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; margin: 52px 0 14px; }
  .legal h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.02em; margin: 30px 0 10px; }
  .legal p { color: var(--ink-2); }
  .legal p + p, .legal ul + p, .legal p + ul, .legal ul + ul { margin-top: 14px; }
  .legal ul { padding-left: 1.2em; margin: 0; display: grid; gap: 6px; color: var(--ink-2); }
  .legal strong { font-weight: 500; color: var(--ink); }
  .legal a:not(.btn) { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
  .legal .policy-contact, .legal .legal-callout {
    background: var(--raised); border-radius: var(--r-md); padding: 22px 26px; margin-top: 18px; }
  .legal .policy-contact p + p { margin-top: 2px; }
  .legal .policy-cta { margin-top: 20px; }

  /* photo crops: keep the labels in frame when a portrait photo sits in a wide slot */
  img[src$="bottle-diloro-32.jpg"]   { object-position: 50% 72%; }
  img[src$="bottle-polisson-45.jpg"] { object-position: 50% 69%; }
  img[src$="cellar-cabinet.jpg"]     { object-position: 62% 50%; }
  img[src$="chainmail-portrait.jpg"] { object-position: 50% 42%; }
  .f6 img[src$="pour-table-wide.jpg"] { object-position: 50% 48%; }