:root{
    --bone:#E9E2D3; --paper:#FFFFFF; --ink:#2A1519; --muted:#7C6A62;
    --wine:#5E1B27; --wine-d:#45131D; --red:#97283A; --red-2:#86202F;
    --on-dark:#F1E7DA; --on-dark-mut:#CDB7AE;
    --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
    --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
    --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
    --maxw:1200px; --gap:132px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:100px;}
  body{ margin:0; overflow-x:clip; background:var(--bone); color:var(--ink); font-family:var(--sans);
    font-size:18px; line-height:1.55; font-weight:400; -webkit-font-smoothing:antialiased; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding-left:28px; padding-right:28px; }
  h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.05; margin:0; letter-spacing:-0.028em; }
  p{ margin:0; }
  a{ color:inherit; text-decoration:none; }

  .label{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.07em; text-transform:uppercase;
    color:var(--muted); display:inline-flex; align-items:center; gap:10px; }
  .label::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red); flex:none; }
  .label.on-dark{ color:var(--on-dark-mut); }
  .btn{ font-family:var(--sans); font-weight:500; font-size:15px; display:inline-flex; align-items:center; gap:10px;
    background:var(--red); color:var(--on-dark); padding:15px 26px; border-radius:100px; border:none; cursor:pointer; transition:background .18s ease, transform .18s ease; }
  .btn:hover{ background:var(--red-2); } .btn:active{ transform:scale(.98); }
  .btn.bone{ background:var(--paper); color:var(--wine); } .btn.bone:hover{ background:#fff; }
  .btn .ar{ font-family:var(--mono); }

  /* NAV */
  .nav-outer{ position:sticky; top:16px; z-index:50; padding:0 28px; }
  .nav{ max-width:var(--maxw); margin:0 auto; background:rgba(255,255,255,.86); backdrop-filter:blur(12px);
    border-radius:100px; padding:12px 14px 12px 24px; box-shadow:none;
    display:flex; align-items:center; justify-content:space-between;
    transition:max-width .55s cubic-bezier(.22,.61,.36,1), background .35s ease, box-shadow .35s ease, padding .35s ease; }
  /* on scroll: contract into a centered floating pill (Baseframe-style) */
  /* multi-page nav keeps full width on scroll (room for 7 links); only the chrome shifts */
  .nav-outer.scrolled .nav{ background:rgba(255,255,255,.95); box-shadow:none; max-width:1060px; }
  .brand{ font-family:var(--serif); font-size:22px; display:flex; align-items:center; gap:11px; color:var(--ink); }
  .brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--wine); }
  .brand-logo{ display:block; height:21px; width:auto; color:var(--wine); }
  .nav-links{ display:flex; gap:26px; font-size:14px; color:var(--muted); }
  .nav-links a{ transition:color .2s ease; white-space:nowrap; } .nav-links a:hover{ color:var(--ink); }
  .nav-links a[aria-current="page"]{ color:var(--wine); }
  .nav-right{ display:flex; align-items:center; gap:12px; }
  .nav .btn{ padding:11px 20px; font-size:14px; }
  /* mobile menu toggle (hamburger) - hidden on desktop */
  .nav-toggle{ display:none; width:42px; height:42px; border:none; background:transparent; cursor:pointer;
    border-radius:50%; align-items:center; justify-content:center; flex-direction:column; gap:5px; flex:none; }
  .nav-toggle span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
  .nav-outer.open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-outer.open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-outer.open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  /* mobile dropdown panel */
  .nav-panel{ display:none; max-width:var(--maxw); margin:10px auto 0; background:rgba(255,255,255,.97);
    backdrop-filter:blur(12px); border-radius:24px; padding:14px; box-shadow:none;
    flex-direction:column; gap:2px; }
  .nav-panel a{ padding:13px 16px; border-radius:14px; font-size:16px; color:var(--ink); transition:background .15s ease; }
  .nav-panel a:hover{ background:var(--bone); }
  .nav-panel a[aria-current="page"]{ color:var(--wine); }
  .nav-panel .btn{ margin-top:8px; justify-content:center; color:var(--on-dark); }
  .nav-panel .btn:hover{ color:#fff; }
  .nav-outer.open .nav-panel{ display:flex; }

  /* HERO */
  .hero-pad{ padding:22px 28px 0; }
  .hero{ max-width:var(--maxw); margin:0 auto; position:relative; border-radius:28px; overflow:hidden;
    background:var(--wine); color:var(--on-dark); min-height:600px; display:flex; }
  .hero-text{ width:54%; padding:90px 56px 56px; display:flex; flex-direction:column; }
  .hero-text .label{ margin-bottom:30px; }
  .hero h1{ font-size:62px; color:#F7EDDF; line-height:1.02; letter-spacing:-0.035em; }
  .hero h1 em{ font-style:italic; }
  .hero .sub{ font-size:19px; line-height:1.5; color:var(--on-dark-mut); margin:28px 0 0; max-width:440px; }
  .hero .cta-row{ margin-top:38px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
  .hero .micro{ font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:#C2A99F; }
  .hero .badge{ margin-top:auto; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--on-dark-mut); display:inline-flex; align-items:center; gap:9px; padding-top:36px; }
  .hero .badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red); }
  .hero-visual{ position:absolute; right:0; top:0; bottom:0; width:46%; background:var(--wine-d); overflow:hidden; }
  .hero-visual video,.hero-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  /* interior (non-home) hero - a touch shorter */
  .hero.interior{ min-height:460px; }
  .hero.interior .hero-text{ padding:74px 56px 52px; }
  .whatcard{ position:absolute; right:30px; bottom:30px; width:250px; background:var(--wine);
    border-radius:16px; padding:20px 22px; color:var(--on-dark); box-shadow:none; }
  .whatcard .h{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:13px; }
  .whatcard ul{ margin:0; padding:0; list-style:none; font-size:13.5px; line-height:1.5; }
  .whatcard li{ padding:6px 0; display:flex; gap:10px; } .whatcard li:first-child{ padding-top:0; }
  .whatcard li::before{ content:"-"; color:#C98; }

  /* uniform section rhythm - padding-top can't collapse */
  section{ padding-top:var(--gap); }
  .center{ text-align:center; }
  .manifesto{ font-family:var(--serif); font-weight:400; font-size:42px; line-height:1.22;
    max-width:900px; margin:28px auto 0; letter-spacing:-0.03em; }
  .manifesto em{ font-style:italic; color:var(--wine); }

  /* marquee marks */
  .marks{ margin-top:64px; overflow:hidden; }
  .marks-track{ display:inline-flex; gap:46px; white-space:nowrap; animation:marquee 34s linear infinite; }
  .marks-track:hover{ animation-play-state:paused; }
  @keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
  .marks span{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
    display:inline-flex; align-items:center; gap:11px; }
  .marks span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--red); flex:none; }

  .head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
  .sec-head{ max-width:620px; }
  .sec-head .label{ margin-bottom:24px; }
  .sec-head h2{ font-size:46px; }
  .sec-head p{ color:var(--muted); font-size:19px; margin-top:18px; line-height:1.5; }
  .arrows{ display:flex; gap:12px; flex:none; }
  .arrows button{ width:54px; height:54px; border-radius:50%; border:none; background:var(--wine); color:var(--on-dark);
    font-family:var(--mono); font-size:18px; cursor:pointer; transition:background .2s ease, transform .15s ease; }
  .arrows button:hover{ background:var(--red); } .arrows button:active{ transform:scale(.93); }

  /* cards */
  .grid{ display:grid; gap:26px; margin-top:60px; }
  .g4{ grid-template-columns:repeat(4,1fr); }
  .card{ background:var(--paper); border-radius:24px; padding:26px 22px; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
  .card:hover{ transform:translateY(-6px); box-shadow:none; }
  /* full-bleed image card (blog/news) - image edge-to-edge, no padding around it */
  .postcard{ overflow:hidden; }
  .postcard .pc-img{ margin:-32px -28px 20px; aspect-ratio:16/10; overflow:hidden; background:var(--bone); }
  .postcard .pc-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
  .postcard:hover .pc-img img{ transform:scale(1.03); }
  .card .n{ font-family:var(--mono); font-size:13px; color:var(--red); }
  .card h3{ font-size:22px; margin:16px 0 11px; line-height:1.1; color:var(--wine); }
  .card p{ color:var(--muted); font-size:15.5px; line-height:1.55; }
  .pc-more{ display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--red); }
  .pc-more .ar{ transition:transform .25s ease; }
  .card.postcard:hover .pc-more .ar{ transform:translateX(4px); }
  .feature{ padding:37px 34px; } .feature h3{ font-size:30px; margin:16px 0 14px; } .feature p{ font-size:16.5px; }

  /* inside carousel */
  .carousel{ display:flex; gap:26px; margin-top:60px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
  .carousel::-webkit-scrollbar{ display:none; }
  .carousel .card{ flex:0 0 286px; scroll-snap-align:start; }

  /* approach */
  .twocol{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
  .twocol .label{ margin-bottom:24px; }
  .twocol .lead-h{ font-size:40px; } .twocol .lead-p{ color:var(--muted); font-size:18px; margin-top:18px; line-height:1.55; }
  .stack{ display:flex; flex-direction:column; gap:22px; }

  /* PAGE HEAD - simple text header for legal/utility pages (no hero image) */
  .pagehead{ padding:64px 0 6px; max-width:820px; }
  .pagehead h1{ font-size:clamp(38px,6vw,58px); line-height:1.04; letter-spacing:-.02em; margin-top:18px; }
  .pagehead .sub{ font-size:19px; color:var(--muted); margin-top:20px; max-width:640px; line-height:1.55; }
  @media (max-width:720px){ .pagehead{ padding-top:44px; } }

  /* LEGAL / PROSE - narrow reading column with numbered sections */
  .legal{ max-width:780px; margin:54px 0 0; }
  .legal .sec{ margin-top:40px; }
  .legal .sec:first-child{ margin-top:0; }
  .legal .sec h2{ font-size:23px; display:flex; gap:14px; align-items:baseline; letter-spacing:-.01em; }
  .legal .sec h2 .num{ color:var(--red); font-family:var(--mono); font-size:14px; font-weight:500; flex:none; }
  .legal p{ color:#5C5048; font-size:16.5px; line-height:1.72; margin-top:14px; }
  .legal p a{ color:var(--red); text-decoration:underline; text-underline-offset:2px; }
  .legal .note{ margin-top:46px; padding:22px 24px; border:1px solid #E4DACB; border-radius:16px; background:var(--paper);
    font-size:14px; line-height:1.6; color:var(--muted); }
  .legal .note strong{ color:var(--ink); }

  /* ARTICLE / PROSE - blog post reading layout (Baseframe editorial pattern) */
  /* tight, centred header close to the nav, then a full-bleed hero, then a narrow prose column */
  article > section:first-of-type{ padding-top:40px; }
  article .pagehead{ padding:0; max-width:800px; margin:0 auto; text-align:center; }
  article .pagehead .post-meta{ display:inline-block; margin-bottom:16px; }
  article .pagehead h1{ margin-top:0; }
  /* blog hero is a contained box (not full-bleed) at ~half the old height, image centred (BugHerd #57) */
  .article-hero{ width:100%; margin:40px 0 0; border-radius:24px; overflow:hidden; height:clamp(200px,28vw,400px); box-shadow:none; }
  .article-hero img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
  .prose{ max-width:720px; margin:48px auto 0; }
  @media (max-width:720px){ article > section:first-of-type{ padding-top:24px; } .article-hero{ margin-top:28px; height:clamp(180px,46vw,260px); } }
  article .pagehead .sub{ margin-left:auto; margin-right:auto; }
  .prose p{ color:#5C5048; font-size:17.5px; line-height:1.78; margin-top:22px; }
  .prose p:first-child{ margin-top:0; font-size:21px; line-height:1.6; color:var(--ink); }
  .prose h2{ font-family:var(--serif); font-size:29px; line-height:1.15; letter-spacing:-.015em; color:var(--wine); margin:46px 0 -4px; }
  /* mid-article image as a contained box in the reading column, centred (matches the hero box) */
  .prose .bleed-fig{ width:100%; margin:46px 0; border-radius:20px; overflow:hidden; height:clamp(200px,36vw,360px); }
  .prose .bleed-fig img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
  .prose .bleed-fig figcaption{ position:relative; }
  .post-meta{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

  /* SPLIT - alternating image/text rows (Baseframe rhythm) */
  .split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:stretch; margin-top:var(--gap); }
  .split:first-child{ margin-top:60px; }
  .split .copy .label{ margin-bottom:22px; }
  .split .copy h2{ font-size:38px; } .split .copy h3{ font-size:30px; color:var(--wine); }
  .split .copy p{ color:var(--muted); font-size:18px; margin-top:18px; line-height:1.55; }
  .split .copy .p2{ margin-top:14px; }
  /* figure fills the grid row (= the text column height); image positioned to fill the figure,
     so the two columns of every split row line up exactly - same top, same height. */
  .split .ph{ position:relative; border-radius:24px; overflow:hidden; height:100%; min-height:32rem; background:var(--wine-d); box-shadow:none; }
  .split .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .split.flip .ph{ order:-1; }
  /* feature list inside copy */
  .ticks{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
  .ticks li{ position:relative; padding-left:26px; font-size:16.5px; color:var(--ink); }
  .ticks li::before{ content:""; position:absolute; left:0; top:9px; width:9px; height:9px; border-radius:50%; background:var(--red); }

  /* illustrated art-feature (playing-card homage beside copy) */
  .artfeature{ display:grid; grid-template-columns:0.78fr 1.22fr; gap:56px; align-items:center; margin-top:var(--gap); }
  .artfeature .cardfig{ border-radius:16px; overflow:hidden; box-shadow:none; max-width:360px; justify-self:center; }
  .artfeature .cardfig img{ width:100%; display:block; }
  .gmark{ display:block; width:118px; height:auto; margin:0 auto 22px; mix-blend-mode:multiply; }
  @media (max-width:820px){ .artfeature{ grid-template-columns:1fr; gap:34px; } }

  /* wine wall - row of grand-cru bottle cards */
  .winewall{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:46px; }
  .winewall figure{ margin:0; text-align:center; }
  /* product bottles sit on solid wine-red; contain shows the WHOLE bottle (no crop), red fills any gap */
  .winewall img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center; border-radius:14px; display:block; background:var(--wine); }
  .winewall figcaption{ font-family:var(--mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-top:12px; }
  @media (max-width:760px){ .winewall{ grid-template-columns:repeat(2,1fr); gap:14px; } }

  /* media band */
  .media{ position:relative; border-radius:24px; overflow:hidden; height:644px; background:var(--wine-d); }
  /* video is oversized & top-anchored so the bottom strip (Grok watermark) is clipped away */
  .media video,.media>img{ position:absolute; top:0; left:0; width:100%; height:calc(100% + 130px); object-fit:cover; object-position:center top; display:block; }
  .media .cap{ position:absolute; left:34px; bottom:34px; background:var(--wine); border-radius:16px; padding:20px 24px; max-width:380px; }
  .media .cap p{ font-family:var(--serif); font-size:23px; color:#F7EDDF; margin-top:10px; line-height:1.15; }

  /* stats */
  .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:60px; }
  .stat .num{ font-family:var(--serif); font-size:74px; line-height:1; color:var(--wine); letter-spacing:-0.03em; }
  .stat .lbl{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-top:12px; }

  /* quote */
  .quote{ background:var(--paper); border-radius:24px; padding:100px 64px; text-align:center; }
  .quote p{ font-family:var(--serif); font-weight:400; font-size:36px; line-height:1.3; max-width:880px; margin:22px auto 0; letter-spacing:-0.025em; color:var(--wine); }

  /* CONTACT */
  .contactwrap{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:54px; margin-top:60px; align-items:start; }
  .cinfo{ display:flex; flex-direction:column; gap:28px; }
  .cinfo .item .k{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px; }
  .cinfo .item .v{ font-family:var(--serif); font-size:21px; color:var(--wine); line-height:1.3; }
  .cinfo .item a.v{ transition:color .2s ease; } .cinfo .item a.v:hover{ color:var(--red); }
  .cform{ background:var(--paper); border-radius:24px; padding:34px 32px; box-shadow:none; }
  .cform .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field{ display:flex; flex-direction:column; gap:7px; margin-top:16px; }
  .field:first-child,.cform .row .field{ margin-top:0; }
  .cform .row{ margin-top:16px; }
  .field label{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
  .field input,.field textarea,.field select{ font-family:var(--sans); font-size:16px; padding:13px 16px; border-radius:12px; border:1px solid #E4DACB; background:var(--bone); color:var(--ink); width:100%; }
  .field input:focus,.field textarea:focus,.field select:focus{ outline:2px solid var(--red); outline-offset:1px; border-color:transparent; }
  .field textarea{ min-height:120px; resize:vertical; }
  .cform .btn{ margin-top:20px; }
  @media (max-width:900px){ .contactwrap{ grid-template-columns:1fr; } .cform .row{ grid-template-columns:1fr; } }

  /* form choice chips (radios / checkboxes) */
  .field .opt-l{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
  /* plain small tickbox + label, no chip background (BugHerd #58) */
  .choices{ display:flex; flex-wrap:wrap; gap:12px 24px; }
  .choices label{ font-size:15px; display:inline-flex; gap:9px; align-items:center; cursor:pointer; color:var(--ink); text-transform:none; letter-spacing:0; font-family:var(--sans); transition:color .15s ease; }
  .choices label:hover{ color:var(--red); }
  .choices input{ accent-color:var(--red); width:16px; height:16px; margin:0; flex:none; }
  .cform .full{ grid-column:1 / -1; }
  /* consent checkbox - custom box that adapts to light or dark backgrounds (uses currentColor) */
  .consent{ display:flex; align-items:flex-start; gap:11px; line-height:1.5; cursor:pointer; }
  .consent input[type=checkbox]{ appearance:none; -webkit-appearance:none; flex:none; width:18px; height:18px; margin:1px 0 0;
    border:1.5px solid currentColor; border-radius:5px; background:transparent; opacity:.7; cursor:pointer; position:relative;
    transition:background .15s ease, border-color .15s ease, opacity .15s ease; }
  .consent input[type=checkbox]:hover{ opacity:1; }
  .consent input[type=checkbox]:checked{ background:var(--red); border-color:var(--red); opacity:1; }
  .consent input[type=checkbox]:checked::after{ content:""; position:absolute; left:5px; top:1.5px; width:5px; height:9px;
    border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
  .consent input[type=checkbox]:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
  /* on the dark footer the box should read white, not the dim footer text colour (BugHerd #59) */
  .site-footer .consent input[type=checkbox]{ border-color:rgba(255,255,255,.85); opacity:1; }
  .pay-note{ margin-top:18px; font-size:13px; line-height:1.6; color:var(--muted); padding:16px 18px; border:1px dashed #D9CCBA; border-radius:14px; }

  /* testimonial quote card (grid item) */
  .quotecard{ background:var(--paper); border-radius:20px; padding:22px 21px; display:flex; flex-direction:column; justify-content:space-between; gap:18px; }
  .quotecard p{ font-family:var(--serif); font-size:18px; line-height:1.5; color:var(--ink); }
  .quotecard .who{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

  /* FAQ */
  .faq{ margin-top:60px; display:flex; flex-direction:column; gap:14px; }
  details{ background:var(--paper); border-radius:16px; padding:4px 30px; }
  summary{ list-style:none; cursor:pointer; padding:24px 0; font-family:var(--serif); font-size:23px;
    display:flex; justify-content:space-between; align-items:center; gap:24px; }
  summary::-webkit-details-marker{ display:none; }
  summary .pl{ font-family:var(--mono); color:var(--red); font-size:22px; transition:transform .2s ease; flex:none; }
  details[open] summary .pl{ transform:rotate(45deg); }
  details .a{ color:var(--muted); font-size:17px; padding:0 0 26px; max-width:840px; line-height:1.55; }

  /* FOOTER */
  .site-footer{ padding-top:var(--gap); }
  .footer-inner{ max-width:var(--maxw); margin:0 auto; background:var(--wine); color:var(--on-dark);
    border-radius:28px 28px 0 0; padding:92px 64px 56px; }
  .site-footer .big{ font-family:var(--serif); font-weight:400; font-size:58px; line-height:1.08; color:#F7EDDF; letter-spacing:-0.035em; max-width:760px; margin-top:24px; }
  .site-footer .big em{ font-style:italic; }
  .form{ margin-top:40px; display:flex; gap:12px; flex-wrap:wrap; max-width:560px; }
  .form input[type=email]{ flex:1; min-width:250px; font-family:var(--sans); font-size:16px; padding:16px 22px;
    border-radius:100px; border:none; background:var(--paper); color:var(--ink); }
  .form input::placeholder{ color:#A99; }
  .consent{ margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:#C2A99F;
    display:flex; gap:10px; align-items:flex-start; max-width:540px; line-height:1.5; }
  .consent input{ margin-top:2px; }
  .formnote{ margin-top:12px; font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:#C2A99F; }
  .formnote a{ color:#E9D3CB; text-decoration:underline; text-underline-offset:2px; }
  .statnote{ font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:22px; letter-spacing:.01em; }
  .foot-contact{ display:flex; flex-wrap:wrap; gap:44px; margin-top:76px; }
  .foot-contact .c-l{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:8px; }
  .foot-contact .c-v{ font-family:var(--serif); font-size:21px; color:#F7EDDF; }
  .foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; margin-top:68px; }
  .foot-brand{ font-family:var(--serif); font-size:26px; color:#F7EDDF; display:flex; align-items:center; gap:12px; }
  .foot-brand .dot{ width:9px;height:9px;border-radius:50%;background:var(--paper); }
  .foot-logo{ display:block; height:23px; width:auto; color:#F7EDDF; }
  .foot-logo{ display:block; height:26px; width:auto; color:#F7EDDF; }
  .foot-links{ display:flex; gap:30px; font-size:14px; color:var(--on-dark-mut); }
  .foot-links a{ transition:color .2s ease; } .foot-links a:hover{ color:#fff; }
  .disc{ margin-top:36px; font-family:var(--mono); font-size:11px; color:#B89E96; line-height:1.7; max-width:920px; letter-spacing:.01em; }

  /* scroll reveal */
  .js .reveal{ opacity:0; transform:translateY(32px); }
  .js .reveal.in{ opacity:1; transform:none; transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
  @media print{ .reveal{ opacity:1!important; transform:none!important; } .marks-track{ animation:none!important; } }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
    .reveal{ opacity:1!important; transform:none!important; }
  }

  @media (max-width:900px){
    :root{ --gap:88px; }
    .hero{ flex-direction:column; } .hero-text{ width:100%; padding:54px 32px; } .hero-visual{ position:relative; width:100%; height:300px; }
    .hero h1{ font-size:44px; } .g4{ grid-template-columns:1fr 1fr; } .twocol{ grid-template-columns:1fr; }
    .nav-links{ display:none; } .nav-toggle{ display:flex; } .nav-right .btn{ display:none; } .stats{ grid-template-columns:1fr 1fr; }
    .foot-cols{ grid-template-columns:1fr 1fr; }
    .manifesto,.quote p{ font-size:30px; } .sec-head h2,.twocol .lead-h{ font-size:32px; } .site-footer .big{ font-size:38px; }
    .footer-inner{ padding:56px 32px 44px; } .quote{ padding:60px 32px; } .head-row{ flex-direction:column; align-items:flex-start; } .media{ height:448px; }
  }
  /* PRESS strip - grayscale logo row */
  .press{ margin-top:60px; }
  .press .row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:30px 52px; margin-top:26px; }
  .press img{ height:27px; width:auto; opacity:.5; filter:grayscale(1); transition:opacity .25s ease; }
  .press img:hover{ opacity:.8; }
  @media (max-width:560px){ .press img{ height:21px; } .press .row{ gap:22px 32px; } }

  /* FOOTER sitemap columns (added 0b) */
  .foot-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:76px; }
  .foot-col{ display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
  .foot-col .c-l{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:5px; }
  .foot-col a{ font-size:15px; color:var(--on-dark); transition:color .2s ease; } .foot-col a:hover{ color:#fff; }
  .foot-col .c-plain{ font-size:14px; color:var(--on-dark-mut); line-height:1.5; }

  @media (max-width:560px){ .g4,.stats{ grid-template-columns:1fr; } body{font-size:17px;} .hero h1{font-size:38px;}
    .foot-cols{ grid-template-columns:1fr 1fr; gap:30px 24px; } }

  /* ════════════════════════════════════════════════════════════════════════════════════════
     TIER A - extra section archetypes (Baseframe-derived, 2026-06-23). See ELEMENT-INVENTORY.md.
     Built to widen the layout vocabulary beyond hero→split→g4→quote and stop pages repeating.
     ════════════════════════════════════════════════════════════════════════════════════════ */

  /* shared icon chip (bento / values / methods) */
  .ic{ width:46px; height:46px; border-radius:13px; background:var(--bone); color:var(--wine);
    display:inline-flex; align-items:center; justify-content:center; flex:none; }
  .ic svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .ic.dark{ background:rgba(247,237,223,.10); color:#F7EDDF; }

  /* (1) BENTO - mixed-size feature grid; replaces the flat g4 where rhythm matters */
  .bento{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:26px; margin-top:60px; }
  .bento .b{ background:var(--paper); border-radius:24px; padding:26px 24px; display:flex; flex-direction:column; gap:14px;
    transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
  .bento .b:hover{ transform:translateY(-6px); box-shadow:none; }
  .bento .b.wide{ grid-column:span 2; } .bento .b.tall{ grid-row:span 2; }
  .bento .b h3{ font-size:23px; color:var(--wine); line-height:1.1; }
  .bento .b p{ color:var(--muted); font-size:15.5px; line-height:1.55; }
  .bento .b .n{ font-family:var(--mono); font-size:13px; color:var(--red); }
  .bento .b.dark .n{ color:var(--on-dark); }   /* eyebrow on dark cards: light/bone, not red (BugHerd #60/#67) */
  .bento .b.dark{ background:var(--wine); color:var(--on-dark); }
  .bento .b.dark h3{ color:#F7EDDF; } .bento .b.dark p{ color:var(--on-dark-mut); }
  .bento .b.tall{ justify-content:space-between; }
  .bento .b .fill{ margin-top:auto; }
  .bento .b.img{ padding:0; overflow:hidden; position:relative; min-height:240px; }
  .bento .b.img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .bento .b.img .cap{ position:relative; margin-top:auto; padding:19px; background:linear-gradient(transparent,rgba(40,12,16,.78)); color:#F7EDDF; }
  .bento .b.img .cap h3{ color:#F7EDDF; }

  /* (2)+(3) TABS - generic controller drives both faq-tabs and service-tabs */
  .tabbar{ display:flex; flex-wrap:wrap; gap:10px; margin-top:60px; }
  .tabbar button{ font-family:var(--sans); font-size:14.5px; padding:11px 20px; border-radius:999px; border:1px solid #E4DACB;
    background:var(--paper); color:var(--muted); cursor:pointer; transition:all .18s ease; }
  .tabbar button:hover{ border-color:var(--red); color:var(--ink); }
  .tabbar button.on{ background:var(--wine); border-color:var(--wine); color:var(--on-dark); }
  /* mobile: swap the tab button row for a dropdown (BugHerd #56) */
  .tab-select{ display:none; }
  @media (max-width:700px){
    .tabbar{ display:none; }
    .tab-select{ display:block; width:100%; margin-top:36px; font-family:var(--sans); font-size:16px; color:var(--ink);
      padding:14px 44px 14px 16px; border-radius:12px; border:1px solid #E4DACB; background:var(--paper); cursor:pointer; appearance:none; -webkit-appearance:none;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397283A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      background-repeat:no-repeat; background-position:right 14px center; background-size:18px; }
    .tab-select:focus{ outline:2px solid var(--red); outline-offset:1px; border-color:transparent; }
  }
  /* JS-scoped so no-JS users & crawlers still see every pane (graceful degradation) */
  .js [data-pane]{ display:none; } .js [data-pane].on{ display:block; animation:fadein .4s ease; }
  @keyframes fadein{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
  .faqtabs [data-pane]{ margin-top:26px; }

  /* (3) SERVICE TABS - vertical rail + panel */
  .svctabs{ display:grid; grid-template-columns:.82fr 1.18fr; gap:48px; margin-top:60px; align-items:start; }
  .svctabs .rail{ display:flex; flex-direction:column; gap:6px; }
  .svctabs .rail button{ text-align:left; font-family:var(--serif); font-size:22px; color:var(--muted); background:transparent;
    border:none; border-left:2px solid #E4DACB; padding:14px 0 14px 22px; cursor:pointer; transition:all .2s ease; letter-spacing:-.01em; }
  .svctabs .rail button:hover{ color:var(--ink); }
  .svctabs .rail button.on{ color:var(--wine); border-left-color:var(--red); }
  .svctabs .panel{ background:var(--paper); border-radius:24px; padding:44px 42px; }
  .svctabs .panel .n{ font-family:var(--mono); font-size:13px; color:var(--red); }
  .svctabs .panel h3{ font-size:30px; color:var(--wine); margin:14px 0 12px; }
  .svctabs .panel p{ color:var(--muted); font-size:17px; line-height:1.55; }

  /* (4) TIMELINE - dated milestones on a rail */
  .timeline{ margin-top:60px; position:relative; padding-left:34px; max-width:760px; }
  .timeline::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px;
    background:linear-gradient(var(--red),#E4DACB); }
  .tl-item{ position:relative; padding:0 0 40px; }
  .tl-item:last-child{ padding-bottom:0; }
  .tl-item::before{ content:""; position:absolute; left:-34px; top:5px; width:14px; height:14px; border-radius:50%;
    background:var(--paper); border:3px solid var(--red); }
  .tl-item .d{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--red); }
  .tl-item h3{ font-size:24px; color:var(--wine); margin:9px 0 8px; }
  .tl-item p{ color:var(--muted); font-size:16px; line-height:1.55; }

  /* (5) HERO add-on - stat row baked into the hero text column */
  .hero-stats{ display:flex; gap:40px; flex-wrap:wrap; margin-top:auto; padding-top:42px; }
  .hero-stats .s .n{ font-family:var(--serif); font-size:40px; line-height:1; color:#F7EDDF; letter-spacing:-.03em; }
  .hero-stats .s .l{ font-family:var(--mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--on-dark-mut); margin-top:9px; max-width:150px; }

  /* (6) STAT TILES - carded statistics (distinct from the bare .stats row) */
  .stattiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:60px; }
  .stattiles .t{ background:var(--paper); border-radius:24px; padding:42px 34px; }
  .stattiles .t .n{ font-family:var(--serif); font-size:60px; line-height:1; color:var(--wine); letter-spacing:-.03em; }
  .stattiles .t .l{ font-size:16px; color:var(--ink); margin-top:16px; } .stattiles .t .s{ color:var(--muted); font-size:14.5px; margin-top:8px; line-height:1.5; }
  .stattiles .t.dark{ background:var(--wine); color:var(--on-dark); } .stattiles .t.dark .n{ color:#F7EDDF; } .stattiles .t.dark .l{ color:#F7EDDF; } .stattiles .t.dark .s{ color:var(--on-dark-mut); }

  /* (7) BIG-STATEMENT (philosophy/vision) + VALUES grid */
  .bigstate{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start; margin-top:54px; }
  .bigstate .st{ font-family:var(--serif); font-size:40px; line-height:1.18; letter-spacing:-.03em; color:var(--ink); }
  .bigstate .st em{ font-style:italic; color:var(--wine); }
  .bigstate .body p{ color:var(--muted); font-size:18px; line-height:1.6; } .bigstate .body p+p{ margin-top:16px; }
  .values{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; margin-top:60px; }
  .values .v{ border-top:1px solid #DCD0C0; padding-top:22px; display:flex; flex-direction:column; gap:13px; }
  .values .v h3{ font-size:20px; color:var(--wine); } .values .v p{ color:var(--muted); font-size:15.5px; line-height:1.55; }

  /* (8) WORD MARQUEE - multi-row, opposing directions */
  .wordmarquee{ overflow:hidden; margin-top:64px; display:flex; flex-direction:column; gap:14px; }
  .wmrow{ display:inline-flex; gap:34px; white-space:nowrap; width:max-content; }
  .wmrow.l{ animation:marquee 46s linear infinite; } .wmrow.r{ animation:marquee-r 46s linear infinite; }
  @keyframes marquee-r{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
  .wmrow span{ font-family:var(--serif); font-size:40px; letter-spacing:-.03em; color:var(--muted); display:inline-flex; align-items:center; gap:34px; }
  .wmrow span::after{ content:"·"; color:var(--red); } .wmrow.alt span{ color:var(--wine); }

  /* (9) CTA BAND with contact-method cards (cta-v1) */
  .ctaband{ background:var(--wine); color:var(--on-dark); border-radius:28px; padding:64px; margin-top:60px;
    display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:center; }
  .ctaband h2{ font-size:44px; color:#F7EDDF; line-height:1.06; } .ctaband h2 em{ font-style:italic; }
  .ctaband .sub{ color:var(--on-dark-mut); font-size:18px; margin-top:18px; max-width:420px; line-height:1.5; }
  .ctaband .cta-row{ margin-top:30px; }
  .methods{ display:flex; flex-direction:column; gap:14px; }
  .method{ background:rgba(247,237,223,.06); border-radius:16px; padding:18px 22px; display:flex; gap:16px; align-items:center;
    transition:background .2s ease; } .method:hover{ background:rgba(247,237,223,.12); }
  .method .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-mut); display:block; margin-bottom:5px; }
  .method .v{ font-family:var(--serif); font-size:19px; color:#F7EDDF; }

  /* (10) OVERLAY CARD on a split photo (offset card over imagery) */
  .split .ph{ position:relative; }
  .overcard{ position:absolute; left:20px; bottom:20px; background:var(--paper); border-radius:16px; padding:20px 22px;
    box-shadow:none; max-width:248px; }
  .overcard .k{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--red); }
  .overcard .v{ font-family:var(--serif); font-size:30px; color:var(--wine); line-height:1; margin:7px 0 6px; letter-spacing:-.02em; }
  .overcard p{ color:var(--muted); font-size:13px; line-height:1.45; }

  /* (11) VIDEO FEATURE CARD + LIGHTBOX */
  .videocard{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:16/9; background:var(--wine-d); cursor:pointer; margin-top:60px; }
  .videocard img,.videocard video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .videocard .play{ position:absolute; inset:0; margin:auto; width:84px; height:84px; border-radius:50%; border:none; cursor:pointer;
    background:rgba(94,27,39,.86); color:#F7EDDF; display:flex; align-items:center; justify-content:center; transition:transform .2s ease, background .2s ease; }
  .videocard:hover .play{ transform:scale(1.08); background:var(--red); }
  .videocard .play svg{ width:30px; height:30px; margin-left:4px; fill:currentColor; }
  .videocard .cap{ position:absolute; left:30px; bottom:30px; right:30px; color:#F7EDDF; pointer-events:none; }
  .videocard .cap .label{ color:var(--on-dark-mut); } .videocard .cap p{ font-family:var(--serif); font-size:24px; margin-top:10px; line-height:1.15; max-width:440px; }
  .lightbox{ position:fixed; inset:0; z-index:200; background:rgba(20,8,12,.84); backdrop-filter:blur(6px);
    display:none; align-items:center; justify-content:center; padding:24px; }
  .lightbox.on{ display:flex; }
  .lightbox video{ width:min(960px,94vw); max-height:88vh; border-radius:16px; box-shadow:none; background:#000; }
  .lightbox .x{ position:absolute; top:24px; right:28px; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
    background:rgba(247,237,223,.14); color:#F7EDDF; font-size:22px; line-height:1; }
  .lightbox .x:hover{ background:rgba(247,237,223,.26); }

  /* TIER A responsive */
  @media (max-width:900px){
    .bento{ grid-template-columns:1fr 1fr; } .bento .b.wide,.bento .b.tall{ grid-column:auto; grid-row:auto; }
    .svctabs{ grid-template-columns:1fr; } .svctabs .rail{ flex-direction:row; flex-wrap:wrap; }
    .svctabs .rail button{ border-left:none; border-bottom:2px solid #E4DACB; padding:10px 0; } .svctabs .rail button.on{ border-bottom-color:var(--red); }
    .stattiles{ grid-template-columns:1fr; } .bigstate{ grid-template-columns:1fr; gap:30px; } .bigstate .st{ font-size:30px; }
    .values{ grid-template-columns:1fr 1fr; } .ctaband{ grid-template-columns:1fr; padding:44px 32px; } .ctaband h2{ font-size:32px; }
    .wmrow span{ font-size:30px; } .hero-stats .s .n{ font-size:32px; }
  }
  @media (max-width:560px){ .bento{ grid-template-columns:1fr; } .values{ grid-template-columns:1fr; } }

  /* ════════════════════════════════════════════════════════════════════════════════════════
     FIGMA SECTIONS (2026-06-23) - richer Baseframe blocks rebuilt with Vinadamo content:
     philosophy split · media-rich services bento · stat bars · full-bleed photo CTA · contact cards.
     ════════════════════════════════════════════════════════════════════════════════════════ */

  /* PHILOSOPHY split - heading + lead + button (top), icon mini-features (bottom), tall media (right) */
  .philosophy{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; margin-top:60px; align-items:stretch; }
  .philosophy .pcopy{ display:flex; flex-direction:column; }
  .philosophy h2{ font-size:40px; letter-spacing:-.03em; } .philosophy.dark h2{ color:#F7EDDF; }
  .philosophy .lead{ color:var(--muted); font-size:18px; line-height:1.55; margin-top:18px; max-width:460px; }
  .philosophy .cta-row{ margin-top:28px; display:flex; }
  .ifeats{ margin-top:auto; padding-top:54px; display:grid; grid-template-columns:1fr 1fr; gap:30px 34px; }
  .ifeat .ic{ margin-bottom:13px; }
  .ifeat h3{ font-size:17px; color:var(--wine); } .ifeat p{ color:var(--muted); font-size:14.5px; line-height:1.5; margin-top:7px; }
  .philosophy .pmedia{ position:relative; border-radius:24px; overflow:hidden; min-height:440px; background:var(--wine-d); }
  .philosophy .pmedia img,.philosophy .pmedia video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  /* dark variant (wine panel) */
  .philosophy.dark{ background:var(--wine); color:var(--on-dark); border-radius:28px; padding:60px; }
  .philosophy.dark .lead{ color:var(--on-dark-mut); }
  .philosophy.dark .ifeat h3{ color:#F7EDDF; } .philosophy.dark .ifeat p{ color:var(--on-dark-mut); }
  .philosophy.dark .ic{ background:rgba(247,237,223,.10); color:#F7EDDF; }
  /* portal-update card overlay (honest: real portal features, not a fake chat) */
  .portalcard{ position:absolute; right:20px; bottom:20px; display:flex; flex-direction:column; align-items:flex-end; gap:9px; max-width:300px; }
  .bub{ width:fit-content; max-width:280px; }
  /* #1 - staggered "chat" entrance when the section reveals */
  .js .philosophy .bub{ opacity:0; transform:translateY(10px); }
  .js .philosophy.in .bub{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
  .philosophy.in .bub:nth-child(1){ transition-delay:.25s; } .philosophy.in .bub:nth-child(2){ transition-delay:.6s; } .philosophy.in .bub:nth-child(3){ transition-delay:.95s; }
  .bub{ background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:14px;
    padding:11px 15px; font-size:13px; line-height:1.35; color:var(--ink); box-shadow:0 10px 30px rgba(30,8,12,.22);
    display:flex; gap:10px; align-items:center; }
  .bub .d{ width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; }
  .bub.me{ align-self:flex-end; background:var(--wine); color:#F7EDDF; }

  /* SERVICES BENTO - Baseframe rhythm: alternating-width rows · uniform-height cards · 16px gap/radius
     content fills each card (label+title+copy top-left, media behind, element pinned bottom) */
  .svcbento{ display:flex; flex-direction:column; gap:16px; margin-top:60px; }
  .svcrow{ display:grid; gap:16px; }
  .svcrow.r1{ grid-template-columns:1.45fr 1fr; }
  .svcrow.r2{ grid-template-columns:1fr 1.45fr; }
  .svcrow.r3{ grid-template-columns:1.2fr 1fr; }
  .sb{ position:relative; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; height:27rem;
    transition:transform .3s cubic-bezier(.2,.7,.2,1); }
  .sb:hover{ transform:translateY(-4px); }
  .sb.tile{ background:var(--paper); padding:32px; }
  .sb.photo{ padding:26px; color:#F7EDDF; }
  .sb.photo>img,.sb.photo>video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .sb.photo::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(135deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.16) 36%,rgba(0,0,0,0) 60%),linear-gradient(180deg,rgba(40,12,16,.5) 0%,rgba(40,12,16,.1) 34%,rgba(40,12,16,.1) 60%,rgba(40,12,16,.58) 100%); }
  .sb.photo>*{ position:relative; z-index:2; }
  .sb .n{ font-family:var(--mono); font-size:12px; line-height:16px; letter-spacing:.75px; text-transform:uppercase; }
  .sb.tile .n{ color:var(--red); } .sb.photo .n{ color:rgba(247,237,223,.8); }
  .sb h3{ font-family:var(--serif); font-size:28px; line-height:32px; letter-spacing:-.5px; margin-top:12px; }
  .sb.tile h3{ color:var(--wine); } .sb.photo h3{ color:#F7EDDF; }
  .sb p{ font-size:16px; line-height:24px; margin-top:14px; max-width:24rem; }
  .sb.tile p{ color:var(--muted); } .sb.photo p{ color:rgba(247,237,223,.88); }
  .sb .grow{ flex:1 1 auto; }
  /* document card (real condition-report element) - replaces Baseframe's folder graphic */
  .docpanel{ margin-top:auto; background:var(--bone); border:1px solid #27241f14; border-radius:8px; padding:16px 18px; display:flex; gap:16px; align-items:center; }
  .docpanel .ic{ width:44px; height:44px; border-radius:8px; background:var(--paper); color:var(--wine); flex:none; }
  .docpanel .t b{ display:block; font-family:var(--serif); font-size:18px; color:var(--ink); }
  .docpanel .t span{ font-family:var(--mono); font-size:10px; letter-spacing:.75px; text-transform:uppercase; color:var(--red); }
  /* #4 - condition-report panel: wine bg, white text */
  .docpanel.wine{ background:var(--wine); border-color:transparent; }
  .docpanel.wine .ic{ background:rgba(247,237,223,.14); color:#F7EDDF; }
  .docpanel.wine .t b{ color:#F7EDDF; } .docpanel.wine .t span{ color:#E9C9CF; }
  /* #5 - ownership: a different (lighter) treatment - key-fact tick list */
  .keyfacts{ margin-top:auto; list-style:none; padding:0; display:flex; flex-direction:column; gap:11px; }
  .keyfacts li{ position:relative; padding-left:24px; font-size:15.5px; line-height:1.45; color:var(--ink); }
  .keyfacts li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; border-radius:50%; background:var(--red); }
  /* press-logo proof row on a dark photo card - replaces Baseframe's "10,000 users" avatar wall */
  .sb .minilogos{ display:flex; gap:24px; align-items:center; margin-top:24px; flex-wrap:wrap; }
  .sb .minilogos img{ height:52px; width:auto; filter:brightness(0) invert(1); opacity:.85; }
  .sb .playdot{ width:64px; height:64px; border-radius:50%; background:rgba(247,237,223,.16); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center; margin-top:auto; }
  .sb .playdot svg{ width:22px; height:22px; fill:#F7EDDF; margin-left:3px; }

  /* STAT BARS - portrait (left) + carded stat rows (right) + honest footnote */
  .statbars{ display:grid; grid-template-columns:.82fr 1.18fr; gap:54px; margin-top:60px; align-items:stretch; }
  .statbars .portrait{ border-radius:16px; overflow:hidden; background:var(--wine-d); min-height:100%; margin:0; }
  .statbars .portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
  .statbars .right{ display:flex; flex-direction:column; justify-content:center; }
  .statbars .bars{ display:flex; flex-direction:column; gap:14px; margin-top:30px; }
  .bar{ background:var(--bone); border-radius:16px; padding:18px 21px 28px; position:relative; overflow:hidden; }
  /* full-width track + fill flush to the card edges (no left padding) - clipped by the card radius (BugHerd #54) */
  .bar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:8px; background:rgba(42,21,25,.08); }
  /* gradient fill grows left -> right when the section scrolls into view; widths differ per --w */
  .bar::before{ content:""; position:absolute; left:0; bottom:0; height:8px; width:0; max-width:100%; background:linear-gradient(90deg,var(--red),var(--wine-d)); transition:width 1.3s cubic-bezier(.2,.7,.2,1); z-index:1; }
  .statbars.in .bar::before{ width:var(--w,70%); }
  .bar .n{ position:relative; z-index:2; font-family:var(--serif); font-size:30px; color:var(--wine); line-height:1; letter-spacing:-.02em; }
  .bar .l{ position:relative; z-index:2; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:8px; }

  /* FULL-BLEED PHOTO CTA band */
  .photocta{ position:relative; border-radius:28px; overflow:hidden; min-height:440px; display:flex; align-items:center; justify-content:center; text-align:center; margin-top:0; }
  .photocta img,.photocta video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .photocta::after{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(40,12,16,.42),rgba(40,12,16,.6)); }
  .photocta .inner{ position:relative; z-index:2; color:#F7EDDF; max-width:580px; padding:48px 40px; }
  .photocta .inner .label{ justify-content:center; color:var(--on-dark-mut); }
  .photocta h2{ color:#F7EDDF; font-size:46px; margin-top:18px; } .photocta h2 em{ font-style:italic; }
  .photocta .inner p{ color:rgba(247,237,223,.86); font-size:18px; line-height:1.5; margin-top:16px; }
  .photocta .cta-row{ margin-top:30px; display:flex; justify-content:center; }

  /* CONTACT-METHOD cards (dark, 3-up) */
  .contactcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
  .cc{ background:#FFFFFF; border-radius:16px; padding:26px; min-height:25.88rem; display:flex; flex-direction:column; color:var(--ink); transition:background .2s ease; }
  .cc:hover{ background:#F4EFE7; }
  .cc .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
  .cc .top .k{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
  .cc .ic{ background:var(--bone); color:var(--wine); width:48px; height:48px; border-radius:12px; }
  .cc .v{ font-family:var(--serif); font-size:24px; color:var(--wine); margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .cc .v .ar{ font-family:var(--mono); color:var(--red); }

  /* FIGMA SECTIONS - responsive */
  @media (max-width:900px){
    .philosophy{ grid-template-columns:1fr; } .philosophy.dark{ padding:40px 30px; }
    .svcbento{ grid-template-columns:1fr; } .statbars{ grid-template-columns:1fr; } .statbars .portrait{ aspect-ratio:16/10; }
    .contactcards{ grid-template-columns:1fr; } .photocta h2{ font-size:32px; } .philosophy h2{ font-size:30px; }
  }
  @media (max-width:560px){ .ifeats{ grid-template-columns:1fr; } }

  /* ── Mobile QA (2026-06-23): stack splits + collapse inline-styled card grids ── */
  @media (max-width:760px){
    .split{ grid-template-columns:1fr; gap:34px; }
    .split .ph{ height:auto; min-height:0; aspect-ratio:3/2; }
    .split.flip .ph{ order:0; }
    .svcrow{ grid-template-columns:1fr !important; }   /* services bento rows stack (were clipping headings) */
    .sb{ height:22rem; }
  }
  /* inline style="grid-template-columns:repeat(3,1fr)" beats the .g4 query, so override with !important */
  @media (max-width:900px){ .grid.g4{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .grid, .grid.g4{ grid-template-columns:1fr !important; } }

  /* ── Mobile centring: heroes + section/page intros read better centred on a phone ── */
  @media (max-width:700px){
    .hero-text{ align-items:center; text-align:center; }
    .hero-text .cta-row{ justify-content:center; }
    .sec-head, .pagehead{ text-align:center; margin-left:auto; margin-right:auto; }
    .hero-text .label, .sec-head .label, .pagehead .label{ justify-content:center; }
    .hero-text .label::before, .hero .badge::before, .sec-head .label::before, .pagehead .label::before{ display:none; }
    .hero .badge{ justify-content:center; }
  }


/* BugHerd #32/#34: product bottle shots shown whole on white */
/* bottle product shots: red-bg images on a wine-red container (contain = whole bottle, no crop) */
.hero-visual.shot{ background:var(--wine); }
.hero-visual.shot img{ object-fit:contain; object-position:center; padding:0; }
/* .fill = a hero image already composed at frame size (bottle + red glow): cover fills the panel edge-to-edge (BugHerd #66) */
.hero-visual.shot.fill img{ object-fit:cover; }
.split .ph.shot{ background:var(--wine); }
.split .ph.shot img{ object-fit:contain; object-position:center; padding:0; }
.split .ph.shot.fill img{ object-fit:cover; }   /* frame-composed image fills the split panel (BugHerd #70) */

/* full-bleed media hero (cask page) */
.hero.heromedia{ display:block; }
.hero.heromedia .herobg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero.heromedia::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(40,12,16,.92),rgba(40,12,16,.64) 48%,rgba(40,12,16,.26)); }
.hero.heromedia .hero-text{ position:relative; z-index:2; width:62%; max-width:660px; }
@media (max-width:768px){ .hero.heromedia .hero-text{ width:100%; } .hero.heromedia::after{ background:linear-gradient(rgba(40,12,16,.84),rgba(40,12,16,.68)); } }

/* Casks nav dropdown (desktop hover; mobile uses panel sub-links) */
.nav-links .nav-dd{ position:relative; display:inline-flex; align-items:center; }
.nav-dd > a{ display:inline-flex; align-items:center; gap:6px; }
.nav-dd .cv{ font-size:9px; line-height:1; opacity:.65; transition:transform .2s ease; }
.nav-dd:hover .cv, .nav-dd:focus-within .cv{ transform:rotate(180deg); }
.nav-dd::after{ content:""; position:absolute; top:100%; left:-12px; right:-12px; height:18px; }
.nav-dd-menu{ position:absolute; top:100%; left:50%; margin-top:14px; min-width:240px;
  background:rgba(255,255,255,.98); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(40,12,16,.10); border-radius:18px; padding:10px;
  display:flex; flex-direction:column; gap:2px; z-index:60;
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-dd-menu a{ padding:11px 15px; border-radius:12px; font-size:14px; color:var(--ink); white-space:nowrap; }
.nav-dd-menu a:hover{ background:var(--bone); color:var(--wine); }
.nav-panel a.nsub{ display:block; }
.nav-panel a.nsub:hover{ background:var(--bone); }

/* mobile nav accordion (Wine / Casks) */
.nav-panel details.ndd{ display:block; background:none; border-radius:0; padding:0; }
.nav-panel details.ndd summary{ list-style:none; cursor:pointer; padding:13px 16px; border-radius:14px;
  font-size:16px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:10px; transition:background .15s ease; }
.nav-panel details.ndd summary::-webkit-details-marker{ display:none; }
.nav-panel details.ndd summary::marker{ content:""; }
.nav-panel details.ndd summary:hover{ background:var(--bone); }
.nav-panel details.ndd summary.cur{ color:var(--wine); }
.nav-panel details.ndd .ar2{ font-size:11px; color:var(--muted); transition:transform .2s ease; }
.nav-panel details.ndd[open] summary .ar2{ transform:rotate(90deg); }