/* ============================================================
   Shucks Maine Lobster — site stylesheet
   Source of truth: DESIGN.md (vintage soul, modern frame)
   ============================================================ */

/* ============ TOKENS ============ */
:root{
  --paper:#FFFFFF; --paper-2:#F5F3EF; --paper-3:#EAE6DE; /* white ground + soft warm off-whites for section bands */
  --ink:#241310; --ink-soft:#6A554B;
  --red:#BB180B; --red-deep:#8E1208;
  --red-ink:#BB180B; /* red used AS TEXT — lightened in dark mode for contrast */
  --shell:#BB180B; --brass:#D89A1C; --navy:#143049; --navy-deep:#0C2034; /* --shell is Lobster Red: hero/footer/feature panels (was maroon #4B1313). --brass = Drawn Butter, saturated toward logo gold #EA9E2B for more pop (was #C9912B) */
  --cream:#F4ECDD; /* Salt Paper survives only as the LIGHT FOREGROUND on red/dark panels (no longer the ground) */
  --line:rgba(36,19,16,.14);
  /* spacing — strict 8px grid */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px; --s7:56px; --s8:64px;
  --sec:clamp(72px,9vw,112px);
  --gut:clamp(20px,4vw,28px);
  --radius:4px; --radius-lg:10px; --radius-pill:999px;
  --maxw:1320px;
  --shadow:0 1px 0 rgba(36,19,16,.06), 0 18px 40px -28px rgba(36,19,16,.5);
  --font-display:"Fraunces",Georgia,serif;
  --font-body:"DM Sans",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  /* brand wave (from John's business card) — ONE continuous sine period that tiles with no gaps.
     preserveAspectRatio='none' lets the tile stretch edge-to-edge (no letterbox padding); the
     curve starts & ends at the baseline with matching slope so repeat-x is seamless. Color comes
     from background-color so it recolors per context. */
  --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22' viewBox='0 0 64 22' preserveAspectRatio='none'%3E%3Cpath d='M0 11 q 16 -14 32 0 t 32 0' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
[data-theme="dark"]{
  --paper:#231210; --paper-2:#2E1612; --paper-3:#3A1C16;
  --ink:#F4ECDD; --ink-soft:#C7AE9E;
  --red-ink:#E8604F;
  --line:rgba(244,236,221,.16);
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 22px 50px -30px rgba(0,0,0,.8);
}

/* ============ BASE ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); background:var(--paper); color:var(--ink);
  line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; transition:background .4s ease,color .4s ease;
}
body::before{ /* paper grain */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9990;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.18}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit} /* buttons don't inherit fonts by default */
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section{position:relative}

/* keyboard focus — visible everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--red-ink);outline-offset:2px;border-radius:2px}
.bg-shell :focus-visible,.bg-navy :focus-visible,.hero :focus-visible,
.page-hero :focus-visible,footer :focus-visible{outline-color:var(--brass)}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--red);color:#fff;
  padding:12px 20px;font-weight:700;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}

/* ============ TYPE ============ */
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red-ink);font-weight:700}
.eyebrow.muted{color:var(--ink-soft)}
.eyebrow.brass{color:var(--brass)}
h1,h2,h3{font-family:var(--font-display);line-height:1.04;font-weight:900;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(2.7rem,6.5vw,5.5rem);line-height:1}
h2{font-size:clamp(2.1rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:600}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-soft);max-width:54ch;text-wrap:pretty}
.serif-it{font-family:var(--font-display);font-style:italic;font-weight:500}
.on-dark{color:#F4ECDD}
.on-dark .lead{color:rgba(244,236,221,.82)}

/* ============ TEXTURE ============ */
.halftone{background-image:radial-gradient(rgba(0,0,0,.22) 1.1px,transparent 1.2px);background-size:7px 7px}
/* ============ BRAND WAVE DIVIDER / ACCENT ============ */
/* shared mask (longhand to avoid shorthand parsing quirks): height-locked, width auto so each
   tile stays proportional and connects to the next → one continuous wave, never gaps */
.rule-wave,
.wave-accent,
.sec-head h2::after,.split h2::after,.page-hero h1::after,.hero-home h1::after{
  background-color:var(--red);
  -webkit-mask-image:var(--wave);mask-image:var(--wave);
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  -webkit-mask-position:left center;mask-position:left center;
  -webkit-mask-size:auto 100%;mask-size:auto 100%}
/* full-width divider — place inside .wrap so it respects content gutters like the card */
.rule-wave{height:22px;border:0;margin:0}
/* short recurring accent under left-aligned headings (~2 periods) */
.wave-accent,
.sec-head h2::after,.split h2::after,.page-hero h1::after,.hero-home h1::after{
  content:"";display:block;height:15px;width:88px;margin-top:14px}
/* brass on dark contexts + dark mode (red is too low-contrast there) */
.bg-shell .rule-wave,.bg-navy .rule-wave,footer .rule-wave,
.bg-shell .wave-accent,.bg-navy .wave-accent,.on-dark .wave-accent,
.page-hero h1::after,.hero-home h1::after,
.bg-shell .split h2::after,.bg-navy .split h2::after,
[data-theme="dark"] .rule-wave,[data-theme="dark"] .sec-head h2::after,
[data-theme="dark"] .split h2::after{background-color:var(--brass)}
/* graceful fallback where CSS mask is unsupported: thin solid rule, hide the accents */
@supports not ((-webkit-mask:linear-gradient(#000,#000)) or (mask:linear-gradient(#000,#000))){
  .rule-wave{height:2px;background:var(--red);opacity:.5}
  .sec-head h2::after,.split h2::after,.page-hero h1::after,.hero-home h1::after,.wave-accent{display:none}
}

/* ============ BUTTONS ============ */
.btn{font-family:var(--font-body);font-weight:700;font-size:.95rem;line-height:1;padding:15px 26px;border-radius:var(--radius);
  cursor:pointer;border:2px solid var(--red);display:inline-flex;align-items:center;gap:8px;
  transition:transform .12s var(--ease-out),background .2s ease,color .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn-secondary{background:transparent;color:var(--red)}
.btn-secondary:hover{background:var(--red);color:#fff}
.btn-light{color:#F4ECDD;border-color:#F4ECDD;background:transparent}
.btn-light:hover{background:#F4ECDD;color:var(--shell)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink);padding-left:0;padding-right:0}
.btn-ghost:hover{color:var(--red)}

/* ============ SCROLL PROGRESS (tide line) ============ */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;
  transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--red),var(--brass))}
@supports (animation-timeline: scroll()){
  .scrollbar{animation:sbgrow linear both;animation-timeline:scroll(root)}
}
@keyframes sbgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============ NAV ============ */
header.nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:94px;gap:var(--s3)}
.nav .logo{height:78px;flex:none}
.nav-links{display:flex;gap:var(--s5);font-weight:500;font-size:.95rem}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--red);transition:width .2s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:var(--s2)}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border:1.5px solid var(--line);border-radius:var(--radius-pill);
  background:transparent;color:var(--ink);cursor:pointer;font-size:.95rem;flex:none;transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:var(--red);color:var(--red)}
.nav-toggle{display:none}

/* mobile menu */
.mobile-menu{position:fixed;inset:94px 0 auto 0;z-index:95;background:var(--paper);border-bottom:1px solid var(--line);
  transform:translateY(-120%);visibility:hidden; /* hidden = not tabbable while closed */
  transition:transform .35s var(--ease-out),visibility 0s .35s;box-shadow:var(--shadow)}
.mobile-menu.open{transform:none;visibility:visible;transition:transform .35s var(--ease-out)}
.mobile-menu .wrap{display:flex;flex-direction:column;gap:var(--s1);padding-top:var(--s3);padding-bottom:var(--s4)}
.mobile-menu a{font-family:var(--font-display);font-size:1.5rem;font-weight:600;padding:10px 0;border-bottom:1px solid var(--line)}
.mobile-menu a.btn{font-family:var(--font-body);font-size:.95rem;margin-top:var(--s2);justify-content:center;border-bottom:2px solid var(--red)}

/* ============ HERO (home) ============ */
.hero{background:var(--shell);color:#F4ECDD;overflow:hidden;isolation:isolate}
.hero-home{background:url("../assets/img/hero-harbor.jpg") center/cover var(--shell)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-home>.hero-grad{z-index:-1;background:
  linear-gradient(92deg,rgba(36,19,16,.92) 0%,rgba(36,19,16,.6) 44%,rgba(36,19,16,.2) 100%),
  radial-gradient(120% 90% at 80% 10%,rgba(187,24,11,.45),transparent 55%),
  radial-gradient(90% 80% at 10% 100%,rgba(20,48,73,.5),transparent 60%)}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.4px);background-size:9px 9px}
.hero-grad{position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 80% 10%,rgba(187,24,11,.55),transparent 55%),
             radial-gradient(90% 80% at 10% 100%,rgba(20,48,73,.6),transparent 60%)}
.hero-in{display:grid;grid-template-columns:1.12fr .88fr;gap:var(--s6);align-items:center;
  min-height:clamp(500px,76vh,700px);padding:var(--s8) 0 calc(var(--s8) + var(--s4))}
.hero h1{color:#F8F2E6;margin:var(--s2) 0 var(--s3)}
.hero h1 em{color:var(--brass)}
.hero .lead{color:rgba(244,236,221,.82)}
.hero-cta{display:flex;gap:var(--s2);margin-top:var(--s5);flex-wrap:wrap}
.hero-stamp{display:flex;justify-content:center;align-items:center;will-change:transform}
.hero-stamp img{width:min(340px,78%);filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}
.js .hero-stamp img{animation:press 1s var(--ease-out) both}
@keyframes press{0%{opacity:0;transform:scale(1.35) rotate(-12deg)}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(-7deg)}}

/* ============ PAGE HERO (interior pages) ============ */
.page-hero{background-color:var(--shell);background-size:cover;background-position:center;background-repeat:no-repeat;color:#F4ECDD;overflow:hidden;isolation:isolate}
.ph-about{background-image:url("../assets/img/about-hero.jpg")}
.ph-products{background-image:url("../assets/img/products-hero.jpg")}
.ph-contact{background-image:url("../assets/img/contact-hero.jpg")}
.page-hero .hero-grad{background:
  linear-gradient(92deg,rgba(36,19,16,.92) 0%,rgba(36,19,16,.66) 50%,rgba(36,19,16,.42) 100%),
  radial-gradient(100% 120% at 85% 0,rgba(187,24,11,.4),transparent 55%),
  radial-gradient(80% 100% at 0 100%,rgba(20,48,73,.5),transparent 60%)}
.page-hero-in{padding-block:calc(var(--s8) + var(--s2)) var(--s8)} /* padding-block keeps .wrap's gutters */
.page-hero-in > *{max-width:62ch}
.page-hero h1{color:#F8F2E6;margin:var(--s2) 0 var(--s3);font-size:clamp(2.4rem,5.5vw,4.5rem)}
.page-hero .lead{color:rgba(244,236,221,.82)}
/* certified seal as a recurring ink-stamp (DESIGN.md signature device) */
.page-hero{position:relative}
.page-hero-in{position:relative;z-index:1}
.hero-seal{position:absolute;top:50%;right:clamp(-40px,-1vw,12px);transform:translateY(-50%);
  width:min(360px,38vw);opacity:.2;z-index:0;pointer-events:none;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.35))}
@media(max-width:560px){.hero-seal{width:240px;opacity:.15;right:-44px}}

/* product-image logo stamp — ONE treatment for every product photo (cards + split media).
   No box/halo/padding: just the logo + a drop-shadow. Logo COLOUR adapts per photo
   (red on light shots, white/USA-Flag on dark) so it reads with no backing.
   Selectors outweigh .ph>img / .media>img (0,1,1). */
.card .ph .prod-stamp,
.split .media .prod-stamp{position:absolute;top:12px;right:12px;left:auto;bottom:auto;
  object-fit:contain;z-index:2;background:none;padding:0;border-radius:0;
  /* tight dark keyline (stacked 0-offset shadows) lets the WHITE logo read on light photos, + depth */
  filter:drop-shadow(0 0 1.5px rgba(0,0,0,.85)) drop-shadow(0 0 1.5px rgba(0,0,0,.7)) drop-shadow(0 2px 6px rgba(0,0,0,.5));
  transition:transform .2s var(--ease-out)}
.card .ph .prod-stamp{width:62px;height:62px;top:10px;right:10px}
.split .media .prod-stamp{width:104px;height:104px;top:16px;right:16px}
.card:hover .ph .prod-stamp{transform:scale(1.06)}

/* large faint seal watermark on dark feature panels */
.has-wm{position:relative;overflow:hidden}
.seal-wm{position:absolute;right:-120px;bottom:-130px;width:min(560px,60vw);z-index:0;
  opacity:.08;pointer-events:none}
.has-wm > .wrap{position:relative;z-index:1}

/* certified seal as a static CREDENTIAL, locked up with the section heading so it reads as
   part of the masthead — not a stray icon. Seal pins to the top-right, aligned to the heading
   top. Reuses the .hero-seal drop-shadow; NO press animation (hero keeps that). */
.cred-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.cred-head > .cred-titles{flex:1 1 58%;min-width:min(100%,300px)}
.cred-head > .cred-titles > :first-child{margin-top:0}
.cred-seal{flex:0 0 auto;width:clamp(104px,12vw,148px);height:auto;margin-top:4px;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.28))}
@media(max-width:560px){.cred-seal{width:clamp(88px,26vw,112px)}}
/* small inline seal that locks up beside the footer "100% Certified Maine Lobster™" line */
.seal-inline{display:inline-block;width:54px;height:auto;vertical-align:middle;margin-inline-end:12px}

/* print-only logo (nav is hidden when printing) */
.print-logo{display:none}

/* ============ TRUST TICKER ============ */
.trust{background:var(--red);color:#fff;overflow:hidden;border-block:1px solid rgba(0,0,0,.12)}
.ticker{display:flex;width:max-content;animation:scrollx 34s linear infinite}
.trust:hover .ticker{animation-play-state:paused}
.tick-item{display:flex;align-items:center;gap:12px;padding:15px clamp(1.4rem,3.5vw,2.6rem);white-space:nowrap;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.85)}
.tick-item b{color:#fff} /* brass on red failed AA (2.3:1) */
html:not(.js) .ticker{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
/* separator is the Shucks logo as a small recurring stamp */
.tick-sep{display:inline-block;width:34px;height:22px;font-size:0;line-height:0;opacity:.95;vertical-align:middle;
  background:url("../Shucks%20Maine%20Lobster%20Brand%20Assets/Logo/White/Shucks%20Maine%20Lobster%20Logo%20-%20White.svg") center/contain no-repeat}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
.pad{padding-block:var(--sec)}
.pad-sm{padding-block:clamp(48px,6vw,72px)}
.sec-head{max-width:60ch;margin-bottom:var(--s7)}
.sec-head h2{margin:12px 0 var(--s2)}
.bg-2{background:var(--paper-2)}
.bg-3{background:var(--paper-3)}
.bg-shell{background:var(--shell);color:#F4ECDD}
.bg-navy{background:var(--navy);color:#F4ECDD}
.bg-navy .eyebrow{color:var(--brass)}
.bg-shell .lead,.bg-navy .lead{color:rgba(244,236,221,.82)}

/* ============ SPLIT (image + copy) ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center}
.split.rev > .media{order:2}
.split .media{aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:var(--paper-3) center/cover;border:1px solid var(--line)}
.media>img,.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .media.tall{aspect-ratio:4/5}
.split .media .credit{position:absolute;left:18px;bottom:16px;z-index:1;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,236,221,.92)}
.split .media .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,16,20,.6),transparent 42%)}
/* Photo column that fills the sibling text column's height (spec splits) — no stranded whitespace */
.split .col-fill{display:flex;flex-direction:column;align-self:stretch}
.split .col-fill .media{flex:1;min-height:320px;aspect-ratio:auto}
.split h2{margin:12px 0 var(--s2)}
.split .btn{margin-top:var(--s4)}

/* ============ CARD GRID (product lines) ============ */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s var(--ease-out),box-shadow .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ph{aspect-ratio:4/3;position:relative;background:var(--paper-3) center/cover}
.card .meta{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .spec{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:3px;padding:3px 8px}
.card h3{font-size:1.2rem;font-weight:600;line-height:1.12}
.card p{color:var(--ink-soft);font-size:.95rem}
.card .more{margin-top:auto;padding-top:var(--s1);font-weight:700;color:var(--red-ink);font-size:.9rem}
/* Product carousel (homepage) — arrows page the track when more cards than fit */
.carousel{position:relative}
.car-track{display:flex;gap:var(--s3);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  padding:8px 0 20px;margin:-8px 0 -20px; /* room for hover lift + shadow inside the clip */
  scrollbar-width:none;-ms-overflow-style:none}
.car-track::-webkit-scrollbar{display:none}
.car-track>.card{flex:0 0 calc((100% - 3*var(--s3))/4);scroll-snap-align:start}
.car-btn{position:absolute;top:calc(50% - 19px);z-index:5;background:var(--paper);box-shadow:var(--shadow)}
.car-btn.prev{left:-14px}
.car-btn.next{right:-14px}
.car-btn[disabled]{opacity:.35;cursor:default}
.car-btn[disabled]:hover{border-color:var(--line);color:var(--ink)}
html:not(.js) .car-btn{display:none} /* no JS → native swipe/scroll only */

/* Product variants — two distinct programs under one photo, as bordered tiles in a split text column (cooked: Fresh / Frozen) */
.variants{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.variant{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s4);border-top:3px solid var(--red)}
.variant .v-k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-ink);font-weight:700;margin-bottom:8px}
.variant h3{font-size:1.2rem;font-weight:600;line-height:1.1}
.variant p{color:var(--ink-soft);font-size:.95rem;margin-top:var(--s2)}
@media (max-width:560px){.variants{grid-template-columns:1fr}}

/* ============ BENEFITS / STEPS ============ */
.benefits{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s4)}
.benefit{text-align:left}
.benefit .num{font-family:var(--font-display);font-weight:900;font-size:2.6rem;color:var(--red);line-height:1;display:block;margin-bottom:var(--s1)}
.benefit h3{font-size:1.05rem;font-weight:700;font-family:var(--font-body);margin-bottom:6px}
.benefit p{color:var(--ink-soft);font-size:.9rem}
.bg-navy .benefit p,.bg-shell .benefit p{color:rgba(244,236,221,.75)}
.bg-navy .benefit .num{color:var(--brass)}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6);counter-reset:s}
.step{position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-display);font-weight:900;
  font-size:3.4rem;color:var(--red);line-height:1;display:block;margin-bottom:var(--s1)}
.step h3{margin-bottom:var(--s1)}
.step p{color:var(--ink-soft)}

/* ============ SERVE MANIFEST (dock-tag line, not buttons) ============ */
/* flex-wrap so items break between each other on any width (the spans are adjacent in
   the HTML with no whitespace, so inline flow can't wrap between them); nowrap keeps each
   multi-word value intact ("3–4 OZ", "Hotels & Resorts"). Middot ::before draws the seam. */
.serve{display:flex;flex-wrap:wrap;align-items:baseline;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;line-height:1.7;row-gap:2px;color:var(--ink-soft)}
.serve span{white-space:nowrap}
.serve span:not(:first-child)::before{content:"·";margin:0 .55em;opacity:.5}
/* dark grounds: light foreground + fainter separator (matches .bg-shell .benefit p) */
.bg-shell .serve,.bg-navy .serve{color:rgba(244,236,221,.82)}
.bg-shell .serve span:not(:first-child)::before,
.bg-navy .serve span:not(:first-child)::before{opacity:.4}

/* ============ UNIT TOGGLE (oz ⇄ g) ============ */
/* Eyebrow + unit switch on one row above a spec cluster */
.spec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.spec-head .eyebrow{margin-bottom:0}
.unit-switch{display:inline-flex;align-items:center;gap:8px}
.unit-switch__label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.unit-toggle{display:inline-flex;border:1.5px solid var(--line);border-radius:var(--radius-pill);overflow:hidden}
.unit-toggle button{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:5px 13px;background:transparent;color:var(--ink-soft);border:0;cursor:pointer;line-height:1.6;
  transition:background .16s var(--ease-out),color .16s var(--ease-out)}
.unit-toggle button+button{border-left:1.5px solid var(--line)}
.unit-toggle button[aria-pressed="true"]{background:var(--red);color:#fff}
.unit-toggle button:hover:not([aria-pressed="true"]){color:var(--ink)}
.bg-shell .unit-toggle,.bg-navy .unit-toggle{border-color:rgba(244,236,221,.35)}
.bg-shell .unit-toggle button+button,.bg-navy .unit-toggle button+button{border-left-color:rgba(244,236,221,.35)}

/* ============ TABLE (size chart) ============ */
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.tbl caption{text-align:left;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding-bottom:10px}
.tbl th{background:var(--red);color:#fff;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;padding:12px 18px;text-align:left}
.tbl td{padding:12px 18px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;background:var(--paper-2)}

/* ============ QUOTE BAND ============ */
.quote-band blockquote{font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,2.8vw,2.4rem);line-height:1.2;max-width:26ch}
.quote-band cite{display:block;margin-top:var(--s3);font-family:var(--font-mono);font-size:.78rem;
  letter-spacing:.1em;color:var(--red-ink);font-style:normal} /* brass on cream failed AA (2.4:1) */
.bg-shell .quote-band cite,.bg-navy .quote-band cite,.on-dark cite{color:var(--brass)}
/* ---- On-red accents ---- .bg-shell & footer are now Lobster Red, where brass
   fails AA (2.3:1 — same reason the trust ticker uses white, not brass). Recolor
   their eyebrows, cites and heading/divider waves to cream. Navy panels & dark
   mode keep brass (unchanged above). Equal specificity + later source = wins. */
.bg-shell .eyebrow{color:var(--cream)}
/* cite: covers both markups — .quote-band nested inside .bg-shell (home) AND
   .bg-shell.quote-band on the same section (about/contact, where .on-dark cite
   would otherwise keep it brass). Keep the .quote-band selector for the home
   case so it outranks the original .bg-shell .quote-band cite brass rule. */
.bg-shell cite,.bg-shell .quote-band cite{color:var(--cream)}
.bg-shell .rule-wave,footer .rule-wave,
.bg-shell .wave-accent,.bg-shell .split h2::after{background-color:var(--cream)}

/* ============ BELIEF — Taste & Trust statement ============ */
.belief{align-items:start}                                   /* top-align copy with the tall image */
.belief-copy{max-width:38rem}
.belief-intro{margin-top:var(--s3);font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.18;color:var(--ink);max-width:20ch;text-wrap:balance}
/* the two pillars — dock-manifest pair */
.belief-pair{margin:var(--s5) 0 var(--s3);border-top:1px solid var(--line)}
.belief-item{display:grid;grid-template-columns:5rem 1fr;gap:var(--s3);align-items:baseline;
  padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.belief-item dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--red-ink)}
.belief-item dd{margin:0;font-family:var(--font-display);font-weight:500;line-height:1.12;
  font-size:clamp(1.35rem,2.1vw,1.85rem);color:var(--ink)}
/* answer + hero "Yes." */
.belief-answer{margin-top:var(--s5);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.belief-yes{margin-top:6px;font-family:var(--font-display);font-style:italic;font-weight:900;line-height:.92;
  font-size:clamp(3.4rem,6.5vw,5.2rem);color:var(--ink)}
.belief-yes span{color:var(--red-ink)}                       /* period in brand red */
.belief-body{margin-top:var(--s4);max-width:46ch}
/* sign-off lockup */
.belief-sign{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}
.belief-sign .k{display:block;margin-bottom:8px;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--red-ink)}
.belief-sign p{font-family:var(--font-display);font-style:italic;font-weight:500;line-height:1.2;
  font-size:clamp(1.3rem,2vw,1.65rem);color:var(--ink);max-width:24ch}
[data-theme="dark"] .belief .wave-accent{background-color:var(--brass)}
@media (max-width:560px){
  .belief-item{grid-template-columns:1fr;gap:4px;padding:var(--s2) 0}
}

/* ============ PROSE (about page) ============ */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:var(--s7) 0 var(--s3)}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:var(--s2);color:var(--ink);font-size:1.05rem}
.prose p.dim{color:var(--ink-soft)}
.prose .pull{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(1.3rem,2.2vw,1.7rem);
  line-height:1.25;color:var(--red-ink);border-left:4px solid var(--red-ink);padding-left:var(--s3);margin:var(--s4) 0}

/* ============ FAQ ============ */
.faq{display:grid;gap:var(--s2);max-width:760px}
.faq details{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--paper-2)}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+" / "";font-family:var(--font-display);font-size:1.4rem;color:var(--red-ink);line-height:1;flex:none}
.faq details[open] summary::after{content:"–" / ""}
.faq .a{padding:0 22px 18px;color:var(--ink-soft)}

/* ============ FORMS ============ */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{border:1.5px solid var(--line);border-radius:var(--radius);padding:13px 14px;
  background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.form-grid .full{grid-column:1/-1}
/* Honeypot: visually + AT-hidden, but still in the DOM for bots to trip on. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* Submit feedback banner — semantic colors per DESIGN.md (success=navy, error=red),
   tinted ground + 4px left border; tokens keep it correct in dark mode. */
.form-status{margin-top:var(--s2);padding:14px 16px;border-radius:var(--radius);
  border-left:4px solid var(--ink-soft);font-size:.95rem;line-height:1.5;color:var(--ink);
  background:var(--paper-2)}
.form-status a{text-decoration:underline}
.form-status.success{border-left-color:var(--navy);padding-right:96px;min-height:72px;display:flex;flex-direction:column;justify-content:center;
  background-color:color-mix(in srgb,var(--navy) 12%,var(--paper));
  /* Blue certified seal = success/trust semantic (matches Atlantic Navy); reads on the light tinted ground */
  background-image:url("../Shucks%20Maine%20Lobster%20Brand%20Assets/Certified%20Stamp/Blue/100%20Percent%20Certified%20Maine%20Lobster%20Stamp%20-%20Blue.svg");
  background-repeat:no-repeat;background-position:right 16px center;background-size:64px}
[data-theme="dark"] .form-status.success{
  /* Blue won't read on the dark-shell tint → White seal */
  background-image:url("../Shucks%20Maine%20Lobster%20Brand%20Assets/Certified%20Stamp/White/100%20Percent%20Certified%20Maine%20Lobster%20Stamp%20-%20White.svg")}
.form-status.error{border-left-color:var(--red);background:color-mix(in srgb,var(--red) 10%,var(--paper))}
.btn:disabled,.btn[aria-busy=true]{opacity:.65;cursor:progress}
.btn:disabled:hover,.btn[aria-busy=true]:hover{transform:none}

/* contact cards */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.ccard{border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s4);background:var(--paper-2);min-width:0}
.ccard a{overflow-wrap:anywhere} /* long email must wrap on small screens */
.ccard .k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red-ink);font-weight:700;display:block;margin-bottom:10px}
.ccard a{font-family:var(--font-display);font-weight:600;font-size:1.25rem;line-height:1.2}
.ccard a:hover{color:var(--red)}
.ccard p{color:var(--ink-soft);font-size:.9rem;margin-top:8px}

/* ============ CTA BAND ============ */
.cta-band{text-align:left}
.cta-band .in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.cta-band h2{max-width:22ch}

/* ============ FOOTER ============ */
footer{background:var(--shell);color:#F4ECDD;padding:var(--s8) 0 var(--s5);position:relative;overflow:hidden}
footer .hero-grad{background:radial-gradient(70% 120% at 0 0,rgba(20,48,73,.5),transparent 60%)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:var(--s6);margin-bottom:var(--s6)}
footer img.flogo{height:88px;margin-bottom:var(--s3)}
footer .foot-h{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin-bottom:var(--s2);font-weight:700} /* was brass — fails AA on the red footer */
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer a:hover{color:#fff} /* was brass */
.foot-base{border-top:1px solid rgba(244,236,221,.2);padding-top:var(--s3);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:rgba(255,255,255,.82)} /* bumped from cream .6 for contrast on red */

/* ============ REVEAL (JS enhancement only) ============
   Content hides only once JS "arms" it (right before observing).
   No JS / failed JS / print / capture => everything stays visible. */
.js .reveal.armed{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media(max-width:1100px){
  .grid.g4{grid-template-columns:repeat(2,1fr)}
  .car-track>.card{flex-basis:calc((100% - var(--s3))/2)}
  .benefits{grid-template-columns:repeat(3,1fr);row-gap:var(--s5)}
  .foot-grid{grid-template-columns:1fr 1fr} /* 2×2 — never hide a link column */
}
@media(max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:grid}
  .nav .order-btn{padding:11px 14px;font-size:.85rem} /* compact, but the primary CTA stays */
  .hero-home{background:linear-gradient(rgba(36,19,16,.84),rgba(36,19,16,.7)),
    url("../assets/img/hero-harbor.jpg") center/cover var(--shell)} /* even scrim for centered mobile text */
  .hero-in{grid-template-columns:1fr;gap:var(--s4);text-align:center;min-height:0;padding:var(--s7) 0 var(--s8)}
  .hero-stamp{order:-1}
  .hero-stamp img{width:min(220px,52%)}
  .hero-cta{justify-content:center}
  .split,.split.rev{grid-template-columns:1fr}
  .split.rev > .media{order:0}
  .split{gap:var(--s4)}
  .split .col-fill .media{flex:none;aspect-ratio:16/10;min-height:0} /* stacked: no sibling height to fill */
  .grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:var(--s5)}
  .benefits{grid-template-columns:repeat(2,1fr)}
  .contact-cards{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  footer ul{gap:2px}
  footer ul a{display:inline-block;padding-block:10px} /* ≥41px touch targets on mobile */
}
@media(max-width:560px){
  .grid,.grid.g4{grid-template-columns:1fr}
  .car-track>.card{flex-basis:100%}
  .benefits{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .cta-band .in{flex-direction:column;align-items:flex-start}
}

@media print{
  .js .reveal{opacity:1;transform:none}
  .nav,.mobile-menu,.scrollbar,.trust{display:none}
  .print-logo{display:block;width:160px;height:auto;margin:0 0 var(--s3)}
  .hero-seal,.prod-stamp,.seal-wm,.cred-seal,.seal-inline{display:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .scrollbar{display:none}
  .ticker{animation:none;width:100%;flex-wrap:wrap;justify-content:center}
}