/* ===== Self-hosted fonts (was Google Fonts CDN) ===== */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/fraunces-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/fraunces-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/fraunces-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/fraunces-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fraunces-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/fraunces-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/outfit-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/outfit-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/outfit-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/outfit-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/outfit-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/outfit-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   BOOK A CALL — floating CTA
   ============================================================ */
.call-float{
  position:fixed;bottom:28px;right:28px;z-index:900;
  display:flex;align-items:center;gap:0;
  background:var(--seafoam);color:#fff;
  border-radius:999px;cursor:pointer;text-decoration:none;
  box-shadow:0 8px 28px rgba(22,184,148,.48),0 2px 8px rgba(0,0,0,.18);
  overflow:hidden;
  transition:box-shadow .3s ease,transform .2s ease;
  transform:translateY(0);
}
.call-float:hover{
  box-shadow:0 12px 36px rgba(22,184,148,.62),0 4px 14px rgba(0,0,0,.22);
  transform:translateY(-3px);
}
.call-float:active{transform:translateY(0) scale(.97)}
.call-float .cf-icon{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:1.2rem;
}
.call-float .cf-label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  transition:max-width .4s cubic-bezier(.4,0,.2,1),padding-right .4s cubic-bezier(.4,0,.2,1);
  padding-right:0;
}
.call-float:hover .cf-label{max-width:140px;padding-right:18px}
.call-float::after{
  content:"";position:absolute;inset:0;border-radius:999px;
  box-shadow:0 0 0 0 rgba(22,184,148,.6);
  animation:cfPulse 2.4s ease-out infinite;
}
@keyframes cfPulse{
  0%{box-shadow:0 0 0 0 rgba(22,184,148,.55)}
  70%{box-shadow:0 0 0 14px rgba(22,184,148,0)}
  100%{box-shadow:0 0 0 0 rgba(22,184,148,0)}
}

/* ============================================================
   COASTPLATE — Vancouver restaurant supplies
   ============================================================ */
:root{
  --emblem:url('./img/emblem.webp');
  --tide:#0B2B3C;
  --tide-2:#12384B;
  --deep:#061A24;
  --foam:#F3F6F5;
  --foam-2:#E7EEEC;
  --clear:#5BA9C9;
  --clear-bright:#7FCBE0;
  --seafoam:#16B894;
  --seafoam-deep:#0A7D64;
  --sand:#E9E2D4;
  --ink:#0B2B3C;
  --muted:#5E7480;
  --line:rgba(11,43,60,.14);
  --line-strong:rgba(11,43,60,.26);
  --line-inv:rgba(243,246,245,.16);
  --display:'Fraunces',serif;
  --body:'Outfit',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --max:1280px;
  --gutter:clamp(20px,4vw,56px);
  --r:14px;
  --r-sm:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);background:var(--foam);color:var(--ink);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;text-wrap:pretty;
}
::selection{background:var(--seafoam);color:#fff}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.skip-link,.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:10px 18px;
  background:var(--tide);color:var(--foam);border-radius:8px;z-index:9999;font-weight:600;outline:3px solid var(--seafoam)}
:focus-visible{outline:3px solid var(--seafoam-deep);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono)}
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--seafoam-deep);display:inline-flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.dark .eyebrow{color:var(--clear-bright)}
.display{font-family:var(--display);line-height:1.02;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
.section{padding:clamp(70px,9vw,128px) 0}
.section-head{max-width:680px;margin-bottom:clamp(38px,5vw,64px)}
.section-head h2{font-size:clamp(2.3rem,5vw,4rem);margin:18px 0 16px}
.section-head p{color:var(--muted);font-size:1.06rem}
.dark{background:var(--tide);color:var(--foam)}
.dark .section-head p{color:#9DB4BE}

.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  font-family:var(--body);font-weight:600;font-size:.95rem;letter-spacing:.01em;
  padding:15px 28px;border:1.5px solid transparent;transition:all .22s;white-space:nowrap;
}
.btn-sea{background:var(--seafoam-deep);color:#fff}
.btn-sea:hover{background:#086b52;transform:translateY(-2px)}
.btn-ink{background:var(--tide);color:var(--foam)}
.btn-ink:hover{background:var(--deep);transform:translateY(-2px)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--tide);background:var(--tide);color:var(--foam)}
.btn-ghost-inv{border-color:var(--line-inv);color:var(--foam)}
.btn-ghost-inv:hover{background:var(--foam);color:var(--tide)}

/* ============================================================
   TOPBAR + NAV
   ============================================================ */
.topbar{background:linear-gradient(90deg,var(--deep) 0%,#0d3347 50%,var(--deep) 100%);color:var(--foam);border-bottom:1px solid rgba(91,169,201,.18)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:42px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.topbar b{color:var(--seafoam)}
.topbar-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--seafoam);margin-right:9px;vertical-align:middle;
  animation:tdot 2s ease-in-out infinite}
@keyframes tdot{0%,100%{box-shadow:0 0 0 0 rgba(22,184,148,.5)}50%{box-shadow:0 0 0 5px rgba(22,184,148,0)}}
nav.main{position:sticky;top:0;z-index:200;background:rgba(243,246,245,.82);
  backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line)}
nav.main .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.logo{display:flex;align-items:center;gap:12px}
.logo .emblem{width:46px;height:46px;flex-shrink:0;background:var(--emblem) center/contain no-repeat;display:block}
.logo .name{font-family:var(--display);font-weight:600;font-size:1.32rem;letter-spacing:-.01em;line-height:1}
.logo .name small{display:block;font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase;margin-top:3px;font-weight:400}
.navlinks{display:flex;gap:4px;list-style:none}
.navlinks a{font-family:var(--body);font-weight:500;font-size:.92rem;padding:10px 16px;
  border-radius:999px;transition:background .2s,color .2s;color:var(--tide)}
.navlinks a:hover{background:var(--foam-2)}
.navlinks a.active{background:var(--tide);color:var(--foam)}
.nav-right{display:flex;align-items:center;gap:12px}
.cart-btn{position:relative;background:var(--seafoam-deep);color:#fff;border:none;border-radius:999px;
  font-weight:600;font-size:.9rem;padding:12px 20px;transition:background .2s}
.cart-btn:hover{background:#086b52}
.cart-count{position:absolute;top:-7px;right:-7px;background:var(--tide);color:#fff;font-size:.66rem;
  min-width:21px;height:21px;border-radius:999px;display:grid;place-items:center;font-weight:700;
  border:2px solid var(--foam);transition:transform .2s}
.cart-count.pop{transform:scale(1.4)}
.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:10px;
  width:46px;height:46px;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:var(--tide);display:block;border-radius:2px}

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
main{animation:pagein .45s cubic-bezier(.2,.7,.2,1)}
@keyframes pagein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--tide);color:var(--foam);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 86% -8%,rgba(91,169,201,.34),transparent 60%),
    radial-gradient(760px 480px at 6% 108%,rgba(22,184,148,.22),transparent 58%);}
.hero .waves{position:absolute;left:0;right:0;bottom:-1px;z-index:2;line-height:0}
.hero .wrap{position:relative;z-index:1;padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(96px,12vw,168px)}
.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(34px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.9rem,7vw,6rem);margin:22px 0 0;font-weight:600}
.hero h1 .it{font-style:italic;color:var(--clear-bright);font-weight:400}
.hero p.lead{margin-top:26px;max-width:520px;color:#AEC6D0;font-size:1.12rem;line-height:1.6}
.hero-ctas{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}
.hero-meta{display:flex;gap:30px;margin-top:42px;flex-wrap:wrap}
.hero-meta .m b{font-family:var(--display);font-size:1.9rem;font-weight:600;display:block;line-height:1}
.hero-meta .m span{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#88A4AF;margin-top:6px;display:block}
.hero-art{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
@keyframes float1{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}
@keyframes float2{0%,100%{transform:translateX(-50%) translateY(-6px)}50%{transform:translateX(-50%) translateY(8px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   CIRCULAR PLATE HERO ART
   ============================================================ */
.hero-plate{
  position:relative;width:min(400px,90vw);height:min(400px,90vw);flex-shrink:0;
  border-radius:50%;background:#e6e6e6;
  box-shadow:16px 16px 32px #bebebe,-16px -16px 32px #ffffff;
  animation:plate-float 5s ease-in-out infinite;
  transition:box-shadow .5s ease;
}
.hero-plate:hover{box-shadow:20px 20px 40px #bebebe,-20px -20px 40px #ffffff}
.plate-ring-1{position:absolute;inset:2px;border-radius:50%;background:#e6e6e6;
  box-shadow:inset 6px 6px 12px #d1d1d1,inset -6px -6px 12px #ffffff;pointer-events:none}
.plate-ring-2{position:absolute;inset:12px;border-radius:50%;background:#e6e6e6;
  box-shadow:inset 4px 4px 8px #d1d1d1,inset -4px -4px 8px #ffffff;pointer-events:none}
.plate-center-wrap{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:10;pointer-events:none;transition:opacity .3s ease}
.plate-center-card{
  padding:20px;border-radius:24px;background:#e6e6e6;
  box-shadow:6px 6px 12px #d1d1d1,-6px -6px 12px #ffffff}
.plate-center-card img{width:80px;height:80px;object-fit:contain;display:block}
.plate-img-overlay{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;border-radius:50%;overflow:hidden;
  opacity:0;transition:opacity .3s ease}
.plate-img-overlay.active{opacity:1}
.plate-img-overlay img{width:72%;height:72%;object-fit:contain}
.plate-svg-ring{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  animation:plate-spin 30s linear infinite}
@keyframes plate-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes plate-spin{to{transform:rotate(360deg)}}

/* ============================================================
   BELT STRIP
   ============================================================ */
.belt{background:var(--deep);color:var(--foam);overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line-inv)}
.belt-inner{display:inline-flex;animation:tick 30s linear infinite;padding:14px 0}
@keyframes tick{to{transform:translateX(-50%)}}
.belt span{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:0 26px;color:#9DB4BE}
.belt span b{color:var(--seafoam)}

/* ============================================================
   VALUE STRIP
   ============================================================ */
.vstrip{border-bottom:1px solid var(--line)}
.vstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.vcell{padding:32px 26px;border-left:1px solid var(--line)}
.vcell:first-child{border-left:none}
.vcell .ic{font-size:1.4rem}
.vcell h3{font-weight:600;font-size:1.02rem;margin:12px 0 5px}
.vcell p{color:var(--muted);font-size:.88rem;line-height:1.5}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .26s,box-shadow .26s,border-color .26s}
.pcard:hover{transform:translateY(-6px);border-color:var(--clear);box-shadow:0 28px 56px -30px rgba(11,43,60,.4)}
.pcard-vis{position:relative;height:224px;overflow:hidden;background:var(--tide);
  border-bottom:1px solid var(--line);transition:background .42s ease}
.pcard:hover .pcard-vis{background:#fff}
.pcard-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px;transition:opacity .42s ease;}
.pp-main{opacity:1;z-index:1}
.pp-alt{opacity:0;z-index:2}
.pcard:hover .pp-main{opacity:0}
.pcard:hover .pp-alt{opacity:1}
.pcard-variant-hint{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:5;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,246,245,.38);background:rgba(255,255,255,.08);
  padding:3px 10px;border-radius:999px;pointer-events:none;white-space:nowrap;
  transition:color .42s ease,background .42s ease;
}
.pcard-vis .ml{position:absolute;top:13px;left:14px;font-family:var(--display);font-weight:600;
  font-size:1.15rem;color:var(--foam);z-index:5}
.pcard-vis .ml small{font-family:var(--mono);font-size:.6rem;font-weight:400;color:rgba(243,246,245,.55);
  display:block;letter-spacing:.1em;margin-top:1px}
.pcard-vis .flags{position:absolute;top:13px;right:13px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;z-index:5}
.flag{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;font-weight:500}
.flag.vent{background:var(--clear);color:#fff}
.flag.bver{background:var(--sand);color:var(--tide)}
.flag.micro{background:var(--seafoam-deep);color:#fff}
.flag.stock{background:var(--seafoam-deep);color:#fff;box-shadow:0 0 0 3px rgba(10,125,100,.2)}
.case-qty.ask{font-family:var(--body);font-weight:600;font-size:.92rem;color:var(--muted)}
.pcard-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:13px;flex:1}
.pcard-body .sku{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.pcard-body h3{font-family:var(--display);font-weight:600;font-size:1.12rem;line-height:1.22}
.spec-table{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.spec-table div{background:#fff;padding:9px 11px}
.spec-table .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.spec-table .v{font-weight:600;font-size:.84rem;margin-top:2px}
.pcard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;gap:12px}
.case-qty{font-family:var(--display);font-weight:600;font-size:1.05rem}
.case-qty small{font-family:var(--mono);font-size:.58rem;font-weight:400;color:var(--muted);
  display:block;letter-spacing:.1em;text-transform:uppercase}
.add-btn{background:var(--tide);color:#fff;border:none;border-radius:999px;font-weight:600;
  font-size:.82rem;padding:11px 17px;transition:background .2s;white-space:nowrap}
.add-btn:hover{background:var(--seafoam-deep)}
.add-btn.added{background:var(--seafoam-deep)}
/* Cup card — allow lid hover flip, but no card lift */
.cup-card:hover{transform:none}
/* Boost cup visibility on dark bg — transparent PPs need a glow to read against navy */
.cup-card .pp-main{filter:drop-shadow(0 0 14px rgba(180,220,255,.35)) brightness(1.5) contrast(1.1)}
/* 500pcs cups were shot on teal studio bg — desaturate so they read as clear/silver */
.cup-card[data-qty="500"] .pp-main{filter:saturate(0.08) brightness(1.25)}
/* Paper cups & napkins are matte, not clear plastic — skip the glow/brighten treatment above */
.paper-card .pp-main{filter:none}

/* ============================================================
   SPLIT FEATURE
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,84px);align-items:center}
.split-visual{position:relative;min-height:440px;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(160deg,var(--tide-2),var(--deep));border:1px solid var(--line-inv);
  display:flex;align-items:flex-end;padding:30px}
.split-visual::before{content:"";position:absolute;inset:0;
  background:radial-gradient(420px 300px at 70% 20%,rgba(91,169,201,.3),transparent 62%)}
.split-visual .float-box{position:absolute;border-radius:14px;border:1.5px solid rgba(255,255,255,.45);
  background:linear-gradient(160deg,rgba(127,203,224,.3),rgba(127,203,224,.05));backdrop-filter:blur(2px)}
.split-visual .fb1{width:46%;height:30%;top:18%;left:14%;animation:float1 6s ease-in-out infinite}
.split-visual .fb2{width:34%;height:24%;top:42%;left:50%;animation:float2 7s ease-in-out infinite}
.split-visual .tag{position:relative;z-index:1;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:#BFD6DE;border:1px solid var(--line-inv);padding:8px 14px;border-radius:999px;background:rgba(6,26,36,.5)}
.split-visual .box-svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:24px;opacity:.92;mix-blend-mode:lighten}

/* ============================================================
   PRIVACY PAGE
   ============================================================ */
.privacy-body{max-width:800px;margin:0 auto}
.privacy-body h2{font-family:var(--display);font-size:1.5rem;font-weight:600;margin:2.4rem 0 .7rem;color:var(--tide)}
.privacy-body h3{font-family:var(--display);font-size:1.1rem;font-weight:600;margin:1.4rem 0 .4rem;color:var(--tide)}
.privacy-body p,.privacy-body li{font-size:.97rem;line-height:1.75;color:var(--ink)}
.privacy-body ul{padding-left:1.4rem;margin:.4rem 0}
.privacy-body hr{border:none;border-top:1px solid var(--line);margin:2rem 0}
.privacy-body .priv-meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:2rem}

/* privacy checkbox */
.field-check{display:flex;align-items:flex-start;gap:10px;margin-top:4px}
.field-check input[type=checkbox]{width:17px;height:17px;flex-shrink:0;margin-top:3px;accent-color:var(--seafoam);cursor:pointer}
.field-check label{font-size:.9rem;color:var(--ink);cursor:pointer;margin:0}
.field-check a{color:var(--seafoam-deep);text-decoration:underline}
.feature-list{margin-top:30px}
.feature{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--line)}
.feature:last-child{border-bottom:1px solid var(--line)}
.feature .ic{font-size:1.5rem;line-height:1}
.feature h3{font-weight:600;font-size:1.06rem;margin-bottom:5px}
.feature p{color:var(--muted);font-size:.95rem}
.dark .feature{border-color:var(--line-inv)}.dark .feature p{color:#9DB4BE}

/* ============================================================
   PROCESS STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{border:1px solid var(--line-inv);border-radius:var(--r);padding:28px;position:relative;
  background:linear-gradient(160deg,rgba(255,255,255,.04),transparent 60%)}
.step .n{font-family:var(--mono);font-size:.72rem;color:var(--clear-bright);letter-spacing:.1em}
.step h3{font-family:var(--display);font-weight:600;font-size:1.2rem;margin:14px 0 8px}
.step p{color:#9DB4BE;font-size:.92rem}
.step .line{position:absolute;top:38px;right:-9px;color:var(--clear);font-size:1.1rem;z-index:1}
.step:last-child .line{display:none}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{background:linear-gradient(135deg,var(--seafoam),var(--clear));color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 90% 0%,rgba(255,255,255,.22),transparent 60%)}
.cta-band .wrap{position:relative;display:flex;justify-content:space-between;align-items:center;gap:30px;
  padding-top:64px;padding-bottom:64px;flex-wrap:wrap}
.cta-band h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.4vw,3.4rem);max-width:640px;line-height:1.05}
.btn-white{background:#fff;color:var(--tide)}
.btn-white:hover{background:var(--tide);color:#fff}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{background:var(--tide);color:var(--foam);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 360px at 88% 0%,rgba(91,169,201,.3),transparent 60%)}
.page-hero .wrap{position:relative;padding-top:clamp(50px,7vw,90px);padding-bottom:clamp(50px,7vw,90px);text-align:center}
.page-hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.6rem,6vw,5rem);margin-top:18px;line-height:1.02}
.page-hero p{margin-top:18px;color:#AEC6D0;max-width:600px;font-size:1.08rem;margin-left:auto;margin-right:auto}
.page-hero .eyebrow{justify-content:center}

/* ============================================================
   CATALOG controls
   ============================================================ */
.cat-toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:30px}
.filters{display:flex;gap:9px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line-strong);background:none;border-radius:999px;font-weight:500;
  font-size:.86rem;padding:9px 17px;transition:all .2s;color:var(--tide)}
.chip:hover{border-color:var(--tide)}
.chip.on{background:var(--tide);border-color:var(--tide);color:#fff}
.sortsel{font-family:var(--body);font-weight:500;font-size:.86rem;border:1.5px solid var(--line-strong);
  border-radius:999px;padding:9px 16px;background:#fff;color:var(--tide)}
.result-count{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.range-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.range-card{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--line);background:#fff;
  border-radius:var(--r);padding:24px;transition:transform .24s,border-color .24s,box-shadow .24s;cursor:pointer}
.range-card:hover{transform:translateY(-4px);border-color:var(--clear);box-shadow:0 22px 44px -28px rgba(11,43,60,.36)}
.range-card .ic{font-size:1.7rem;line-height:1;flex-shrink:0}
.range-card h4{font-family:var(--display);font-weight:600;font-size:1.18rem;margin-bottom:6px}
.range-card p{color:var(--muted);font-size:.92rem;line-height:1.5}
.range-card .ask{display:inline-block;margin-top:11px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--seafoam-deep);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.home-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hcat{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);background:#fff;border-radius:var(--r);
  padding:24px;transition:transform .24s,border-color .24s,box-shadow .24s;position:relative;overflow:hidden;cursor:pointer}
.hcat:hover{transform:translateY(-5px);border-color:var(--clear);box-shadow:0 24px 48px -28px rgba(11,43,60,.4)}
.hcat .ic{font-size:1.8rem;line-height:1}
.hcat h3{font-family:var(--display);font-weight:600;font-size:1.16rem}
.hcat p{color:var(--muted);font-size:.86rem;line-height:1.45}
.hcat .tag{margin-top:auto;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase}
.hcat .tag.stk{color:var(--seafoam-deep)}
.hcat .tag.ask{color:var(--muted)}
.hcat::after{content:"→";position:absolute;right:20px;top:24px;color:var(--clear);opacity:0;transform:translateX(-6px);transition:all .24s}
.hcat:hover::after{opacity:1;transform:none}
.cat-rail{position:sticky;top:76px;z-index:90;background:rgba(243,246,245,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.cat-rail-inner{display:flex;gap:4px;overflow-x:auto;padding:12px 0;scrollbar-width:none}
.cat-rail-inner::-webkit-scrollbar{display:none}
.cat-rail a{flex-shrink:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);padding:9px 14px;border-radius:999px;transition:all .2s;white-space:nowrap;display:flex;align-items:center;gap:7px}
.cat-rail a .rn{color:var(--clear);font-weight:600}
.cat-rail a:hover{background:var(--foam-2);color:var(--tide)}
.cat-rail a.active{background:var(--tide);color:#fff}
.cat-rail a.active .rn{color:var(--clear-bright)}
.catsec{scroll-margin-top:140px}
.catsec-head{display:flex;align-items:flex-start;gap:22px;margin-bottom:clamp(28px,4vw,44px)}
.catsec-head .catnum{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4vw,3.2rem);
  color:var(--clear);line-height:1;flex-shrink:0}
.catsec-head h2{font-size:clamp(1.9rem,4vw,3rem);margin-bottom:10px}
.catsec-head p{color:var(--muted);font-size:1rem;max-width:640px}
.catsec-head .instock-pill,.catsec-head .ask-pill{flex-shrink:0;margin-left:auto;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 13px;border-radius:999px;align-self:center}
.catsec-head .instock-pill{background:#0E9C7E;color:#fff}
.catsec-head .ask-pill{border:1px solid var(--line-strong);color:var(--muted)}
.catsec.alt{background:var(--foam-2)}
.line-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.line-card{border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:22px;
  display:flex;flex-direction:column;gap:9px;transition:transform .22s,border-color .22s,box-shadow .22s;min-height:220px}
.catsec.alt .line-card{background:#fff}
.line-card:hover{transform:translateY(-4px);border-color:var(--clear);box-shadow:0 20px 40px -26px rgba(11,43,60,.34)}
.line-card .ic{font-size:1.5rem;line-height:1}
.line-card h4{font-family:var(--display);font-weight:600;font-size:1.05rem}
.line-card p{color:var(--muted);font-size:.84rem;line-height:1.45;flex:1}
.line-card .ask-btn{align-self:flex-start;margin-top:4px;background:none;border:1px solid var(--line-strong);
  border-radius:999px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tide);padding:8px 14px;transition:all .2s}
.line-card .ask-btn:hover{background:var(--tide);color:#fff;border-color:var(--tide)}
/* line-card footer — always stack vertically so button never overflows */
.line-card .pcard-foot{flex-direction:column;align-items:stretch;gap:8px;padding-top:8px}
.line-card .pcard-foot .add-btn{text-align:center;font-size:.78rem}
.perks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.perk{border:1px solid var(--line-inv);border-radius:var(--r);padding:26px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),transparent 60%)}
.perk .ic{font-size:1.5rem}
.perk h3{font-weight:600;font-size:1.02rem;margin:12px 0 6px}
.perk p{color:#9DB4BE;font-size:.88rem;line-height:1.5}

/* ============================================================
   ABOUT
   ============================================================ */
.about-lead{font-family:var(--display);font-weight:400;font-size:clamp(.9rem,1.6vw,1.18rem);line-height:1.55;max-width:1060px}
.about-lead em{font-style:italic;color:var(--seafoam-deep)}
.timeline{margin-top:8px}
.tl{position:relative;padding:0 0 38px 42px;border-left:2px solid var(--line)}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-9px;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--foam);border:3px solid var(--seafoam)}
.tl .yr{font-family:var(--mono);font-size:.82rem;color:var(--seafoam-deep);letter-spacing:.08em}
.tl h4{font-family:var(--display);font-weight:600;font-size:1.25rem;margin:5px 0 6px}
.tl p{color:var(--muted);font-size:.96rem;max-width:520px}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vc{border:1px solid var(--line-inv);border-radius:var(--r);padding:30px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),transparent 60%)}
.vc .ic{font-size:1.8rem}
.vc h4{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:16px 0 10px}
.vc p{color:#9DB4BE;font-size:.94rem}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{display:flex;flex-direction:column;gap:0;max-width:860px;margin:0 auto}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--seafoam);
  flex-shrink:0;transition:transform .25s ease;line-height:1;min-width:20px;text-align:center
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item h3{font-family:var(--display);font-size:1.08rem;font-weight:600;color:var(--tide);line-height:1.35;margin:0}
.faq-item p{font-size:.97rem;line-height:1.75;color:var(--ink);padding-bottom:22px;margin:0}

/* ============================================================
   CONTACT
   ============================================================ */
.cmethod-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:64px}
.cmethod{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:34px 28px;
  transition:box-shadow .25s,transform .25s;display:flex;flex-direction:column;gap:6px}
.cmethod:hover{box-shadow:0 14px 36px -18px rgba(11,43,60,.18);transform:translateY(-3px)}
.cmethod .cm-icon{font-size:1.7rem;margin-bottom:8px;line-height:1}
.cmethod h3{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--tide);margin-bottom:2px}
.cmethod a{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--seafoam);
  text-decoration:none;display:block;transition:color .2s}
.cmethod a:hover{color:var(--seafoam-deep)}
.cmethod p{color:var(--muted);font-size:.88rem;margin:0;line-height:1.5}
.cmethod .hours-val{font-family:var(--display);font-weight:600;font-size:1.15rem;color:var(--tide);line-height:1.3}
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,7vw,88px);align-items:start}
.form{display:flex;flex-direction:column;gap:17px}
.field label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;border:1.5px solid var(--line-strong);background:#fff;
  border-radius:var(--r-sm);padding:14px 15px;font-family:var(--body);font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--seafoam);
  box-shadow:0 0 0 3px rgba(22,184,148,.16)}
.field textarea{min-height:130px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.form-ok{display:none;background:var(--tide);color:var(--foam);border-radius:var(--r-sm);padding:20px;
  font-family:var(--mono);font-size:.78rem;line-height:1.6;border-left:4px solid var(--seafoam)}
.form-ok.show{display:block}
.next-steps>h3{font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--tide);margin-bottom:26px}
.next-steps{position:sticky;top:110px}
.ns{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line);align-items:flex-start}
.ns:first-of-type{border-top:none;padding-top:0}
.ns-num{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--seafoam);font-weight:700;
  background:rgba(22,184,148,.1);border-radius:999px;width:34px;height:34px;
  display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.ns h4{font-weight:600;font-size:.98rem;margin-bottom:4px;color:var(--tide)}
.ns p{font-size:.87rem;color:var(--muted);margin:0;line-height:1.55}
.contact-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:70px;padding-top:60px;border-top:1px solid var(--line)}
.cp{background:var(--tide);color:var(--foam);border-radius:var(--r);padding:28px 24px}
.cp .cpic{font-size:1.5rem;margin-bottom:12px}
.cp h4{font-weight:600;font-size:.98rem;margin-bottom:6px}
.cp p{color:#9DB4BE;font-size:.87rem;line-height:1.5;margin:0}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--deep);color:var(--foam)}
.foot-top .wrap{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-top:70px;padding-bottom:54px}
.foot-brand p{color:#9DB4BE;font-size:.92rem;margin-top:16px;max-width:300px}
.foot-col .foot-h5{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--clear-bright);margin-bottom:16px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-col a{color:#9DB4BE;font-size:.92rem;transition:color .2s}
.foot-col a:hover{color:var(--foam)}
.foot-nap{background:var(--ink);border-top:1px solid var(--line-inv);padding:10px 0}
.foot-nap address{font-style:normal;font-size:.78rem;color:rgba(255,255,255,.45);letter-spacing:.02em}
.foot-nap address a{color:rgba(255,255,255,.45);text-decoration:none}
.foot-nap address a:hover{color:var(--seafoam)}
.foot-bottom{border-top:1px solid var(--line-inv)}
.foot-bottom .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:20px;padding-bottom:20px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:#7892A0}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---- 980px: tablet ---- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:340px;margin:28px auto 0}
  .hero p.lead{max-width:100%}
  .vstrip .wrap{grid-template-columns:1fr 1fr}
  .vcell:nth-child(3){border-left:none}.vcell{border-top:1px solid var(--line)}
  .vcell:nth-child(-n+2){border-top:none}
  .split{grid-template-columns:1fr}.split-visual{min-height:280px}
  .steps{grid-template-columns:1fr 1fr}.step .line{display:none}
  .range-grid{grid-template-columns:1fr}
  .home-cats{grid-template-columns:1fr 1fr}
  .perks-grid{grid-template-columns:1fr 1fr}
  .catsec-head{flex-wrap:wrap}
  .catsec-head .instock-pill,.catsec-head .ask-pill{margin-left:0}
  .cat-rail{top:76px}
  .values-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .cmethod-strip{grid-template-columns:1fr 1fr}.contact-perks{grid-template-columns:1fr 1fr}
  .next-steps{position:static}
  .foot-top .wrap{grid-template-columns:1fr 1fr}
}

/* ---- 720px: mobile ---- */
@media(max-width:720px){
  /* nav */
  .navlinks{
    display:none;position:absolute;top:76px;left:0;right:0;
    background:var(--foam);flex-direction:column;
    border-bottom:1px solid var(--line);
    padding:14px var(--gutter) 22px;gap:3px;
    box-shadow:0 12px 32px rgba(11,43,60,.1)
  }
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 16px;border-radius:10px;font-size:1rem}
  .navlinks a.active,.navlinks a:hover{background:var(--foam-2);color:var(--tide)}
  .burger{display:flex}
  .topbar .wrap span:last-child{display:none}
  .topbar .wrap{height:36px;font-size:.62rem}

  /* hero — show plate at mobile size, centered below text */
  .hero-art{max-width:220px;margin:32px auto 0;opacity:.9}
  .hero-plate{width:220px;height:220px}
  .hero p.lead{margin-left:0;max-width:100%}
  .hero-ctas{justify-content:flex-start}
  .hero-meta{justify-content:flex-start}
  .hero-meta .m b{font-size:1.5rem}

  /* sections */
  .section{padding:clamp(44px,8vw,80px) 0}
  .section-head{margin-bottom:clamp(28px,5vw,44px)}

  /* value strip */
  .vstrip .wrap{grid-template-columns:1fr}
  .vcell{border-left:none;border-top:1px solid var(--line);padding:18px 0}
  .vcell:first-child{border-top:none}

  /* grids */
  .home-cats{grid-template-columns:1fr}
  .perks-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .cta-band .wrap{flex-direction:column;align-items:flex-start}
  .cmethod-strip{grid-template-columns:1fr}
  .contact-perks{grid-template-columns:1fr}
  .foot-top .wrap{grid-template-columns:1fr}

  /* catalog */
  .cat-toolbar{flex-direction:column;align-items:stretch}
  .sortsel{width:100%}

  /* timeline tighter on mobile */
  .tl{padding:0 0 28px 26px}
  .tl::before{left:-7px;width:12px;height:12px}

  /* step cards */
  .step{padding:22px 18px}

  /* footer */
  .foot-top .wrap{padding-top:44px;padding-bottom:36px}

  /* floating call btn — smaller, higher so it doesn't cover content */
  .call-float{bottom:16px;right:16px}
  .call-float .cf-icon{width:46px;height:46px}

  /* FAQ items — more padding on summary for fat-finger targets */
  .faq-item summary{padding:18px 0;gap:14px}
  .faq-item h3{font-size:1rem}

  /* cta band */
  .cta-band h2{font-size:clamp(1.7rem,5.5vw,2.6rem)}
}

/* ---- 480px: small phone ---- */
@media(max-width:480px){
  .prod-grid{grid-template-columns:1fr}
  .home-cats{grid-template-columns:1fr}

  /* hero */
  .hero-art{max-width:180px}
  .hero-plate{width:180px;height:180px}
  .hero h1{font-size:clamp(2.4rem,9vw,3.2rem)}
  .hero-ctas{flex-direction:column;align-items:flex-start}
  .hero-ctas .btn{width:100%;justify-content:center}

  /* product card footer */
  .pcard-foot{flex-direction:column;align-items:stretch;gap:10px}
  .pcard-foot .add-btn{text-align:center}

  /* catalog head */
  .catsec-head{gap:10px}
  .catsec-head .catnum{font-size:1.6rem}

  /* footer */
  .foot-top .wrap{gap:20px}
  .foot-bottom .wrap{flex-direction:column;align-items:flex-start;gap:8px}

  /* page hero inner pages */
  .page-hero h1{font-size:clamp(2rem,8vw,2.8rem)}

  /* values grid stays 1 col */
  .values-grid{grid-template-columns:1fr}

  /* FAQ */
  .faq-list{margin:0}
}

/* ---- CART PANEL ---- */
.cart-panel { display:none }
.cart-panel.open { display:block }
.cart-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:900; cursor:pointer;
}
.cart-drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw);
  background:var(--surface,#fff); z-index:901;
  display:flex; flex-direction:column;
  box-shadow:-4px 0 32px rgba(0,0,0,.18);
}
.cart-drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 16px; border-bottom:1px solid var(--border,#e5e7eb);
}
.cart-drawer-head h3 { margin:0; font-size:1.1rem }
.cart-close-btn {
  background:none; border:none; font-size:1.6rem; cursor:pointer;
  color:var(--text-2,#6b7280); line-height:1; padding:4px 8px;
}
.cart-drawer-items {
  flex:1; overflow-y:auto; padding:16px 24px;
  display:flex; flex-direction:column; gap:12px;
}
.cart-empty {
  color:var(--text-2,#6b7280); text-align:center;
  margin-top:40px; font-size:.95rem;
}
.cart-item {
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:8px;
  background:var(--surface-2,#f5f7fa);
}
.cart-item-info { flex:1; min-width:0 }
.cart-item-name { font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cart-item-sku { font-size:.78rem; color:var(--text-2,#6b7280); font-family:monospace }
.cart-remove-btn {
  background:none; border:1px solid var(--border,#e5e7eb);
  border-radius:6px; padding:4px 8px; font-size:.8rem;
  cursor:pointer; color:var(--text-2,#6b7280); white-space:nowrap;
}
.cart-remove-btn:hover { border-color:#ef4444; color:#ef4444 }
.cart-drawer-foot {
  padding:16px 24px 24px; border-top:1px solid var(--border,#e5e7eb);
  display:flex; flex-direction:column; gap:10px;
}
.cart-drawer-foot .btn { width:100%; text-align:center; justify-content:center }
.cart-clear-btn {
  background:none; border:none; cursor:pointer;
  color:var(--text-2,#6b7280); font-size:.85rem; text-decoration:underline;
  align-self:center;
}

/* ===== Polish: selection color, smooth anchors, back-to-top ===== */
::selection{background:#0A7D64;color:#fff}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:96px}
.to-top{position:fixed;left:22px;bottom:22px;z-index:60;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);background:var(--tide,#0B2B3C);color:#EAF4F1;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s;
  box-shadow:0 6px 18px rgba(4,20,28,.35)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:#0A7D64}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}