/* ============================================================
   DINE & GLORY — DESIGN SYSTEM
   Palette: warm/earthy (cream, sand, taupe, espresso, charcoal)
   with a single deep-green accent.
   Type: Archivo (display + body) + IBM Plex Mono (eyebrows/labels)
   No real photography/logo exists yet — all imagery is a placeholder
   "editorial wash" treatment (gradient + line art) built in CSS/SVG so
   the layout reads premium even before real photos are dropped in.
   Swap: replace .ph-photo backgrounds, and CSS variables below.
   ============================================================ */

:root{
  /* ---- Brand palette ---- */
  --cream:      #F4ECE4;
  --cream-rgb:  244,236,228;
  --sand:       #E6D5C3;
  --sand-rgb:   230,213,195;
  --taupe:      #CDBCAA;
  --taupe-rgb:  205,188,170;
  --espresso:   #6C5F51;
  --espresso-rgb: 108,95,81;
  --charcoal:   #2D2925;
  --charcoal-rgb: 45,41,37;
  --white:      #FFFFFF;

  /* Single accent — deep green. Used for CTAs, links, focus and eyebrows. */
  --accent:     #3E5B4A;
  --accent-rgb: 62,91,74;
  --accent-deep:#35503F;
  --sage:       #8FA894;
  --faint:      #8B7C6B;

  --success:    #3E5B4A;
  --success-bg: #E7EEE4;

  /* ---- Semantic ---- */
  --bg:         var(--cream);
  --bg-alt:     var(--sand);
  --surface:    var(--white);
  --text:       var(--charcoal);
  --text-muted: var(--espresso);
  --border:     rgba(var(--charcoal-rgb), 0.14);
  --border-soft:rgba(var(--charcoal-rgb), 0.08);

  /* ---- Type ---- */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .22s;
  --dur: .45s;
  --dur-slow: .9s;

  /* ---- Misc ---- */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --shadow-sm: 0 1px 3px rgba(var(--charcoal-rgb),0.08);
  --shadow-md: 0 12px 32px rgba(var(--charcoal-rgb),0.10);
  --shadow-lg: 0 30px 70px rgba(var(--charcoal-rgb),0.18);
  --maxw: 1240px;
  --header-h: 84px;
  --header-h-scrolled: 64px;
}

/* ============ RESET ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
/* Deliberately NOT respecting prefers-reduced-motion — site owner chose to
   always animate for every visitor, overriding that accessibility setting. */
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.7; font-size:16px;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
[hidden]{ display:none !important; }
button{ font-family:inherit; }
input,select,textarea{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--charcoal); color:var(--cream);
  padding:12px 18px; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ============ TYPE SCALE ============ */
h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:800; color:var(--charcoal); margin:0; letter-spacing:-0.03em; }
h1{ font-size:clamp(40px,6vw,76px); line-height:1.0; letter-spacing:-0.04em; }
h2{ font-size:clamp(30px,4.2vw,48px); line-height:1.06; letter-spacing:-0.035em; }
h3{ font-size:clamp(22px,2.6vw,28px); line-height:1.2; letter-spacing:-0.025em; }
h4{ font-size:19px; line-height:1.35; font-weight:700; letter-spacing:-0.02em; }
p{ margin:0; }
.lede{ font-size:clamp(17px,1.6vw,20px); color:var(--text-muted); line-height:1.65; }
.eyebrow{
  display:inline-flex; align-items:center; gap:14px; font-family:var(--font-mono);
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.eyebrow::before{ content:""; width:44px; height:1px; background:var(--accent); display:inline-block; }
.tag-todo{
  display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  background:var(--sand); color:var(--espresso); border:1px dashed var(--taupe); padding:2px 7px; border-radius:2px;
  vertical-align:middle; margin-left:6px;
}

/* ============ LAYOUT ============ */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
section{ padding:32px 0; position:relative; }
section[id]{ scroll-margin-top:96px; }
.section-tight{ padding:28px 0; }
.section-head{ max-width:640px; margin-bottom:36px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .lede{ margin-top:16px; }
.grid{ display:grid; gap:24px; }
.bleed{ width:100%; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 30px; border-radius:var(--radius-sm); font-weight:700; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase; border:1.5px solid transparent; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn-primary{ background:var(--accent); color:var(--cream); }
.btn-primary:hover{ background:var(--accent-deep); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--charcoal); border-color:rgba(var(--charcoal-rgb),.3); }
.btn-outline:hover{ background:var(--charcoal); border-color:var(--charcoal); color:var(--cream); }
.btn-ghost{ background:transparent; color:var(--charcoal); }
.btn-ghost:hover{ background:rgba(var(--charcoal-rgb),0.06); }
.btn-light{ background:var(--cream); color:var(--charcoal); }
.btn-light:hover{ background:var(--white); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.btn-sm{ padding:11px 20px; font-size:12px; }
.btn-lg{ padding:19px 38px; font-size:13.5px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }
.btn-icon-only{ padding:12px; border-radius:50%; }

/* ---- Cut-corner motif -------------------------------------------------
   Diagonal pair: top-right + bottom-left. Applied to the two hero buttons,
   the header CTA (scaled down), and the chat launcher. clip-path is left
   out of every transition on purpose — the reveal is meant to SNAP. */
.hero-actions .btn{
  --cut: 10px;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                    100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
/* the outlined hero button stays a plain rectangle until hover */
.hero-actions .btn-outline{ clip-path:none; }
.hero-actions .btn-outline:hover,
.hero-actions .btn-outline:focus-visible{
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                    100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.header-cta{
  --cut: 7px;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                    100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* magnetic wrapper: JS nudges translate on mousemove */
.btn-magnetic{ transition:transform .15s var(--ease-soft), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:50%; background:transparent; border:none; color:var(--charcoal); cursor:pointer;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  position:relative;
}
.icon-btn:hover{ background:rgba(var(--charcoal-rgb),0.07); }
.icon-btn svg{ width:20px; height:20px; }
.icon-btn.sm{ width:34px; height:34px; }
.icon-btn.sm svg{ width:16px; height:16px; }

/* animated underline link */
.link-underline{ position:relative; display:inline-block; }
.link-underline::after{
  content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform var(--dur) var(--ease);
}
.link-underline:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:200; background:rgba(var(--cream-rgb),0.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.scrolled{ border-color:var(--border-soft); box-shadow:0 8px 24px rgba(var(--charcoal-rgb),0.06); }

/* ---- Home page only: transparent header overlaying the hero, ----
   ---- solidifying into the standard header once scrolled. ---- */
body.page-home .site-header{
  position:fixed; left:0; right:0; top:0;
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
  box-shadow:none;
  transition:background-color .55s var(--ease), backdrop-filter .55s var(--ease),
             border-color .5s var(--ease), box-shadow .5s var(--ease);
}
body.page-home .site-header.scrolled{
  background:rgba(var(--cream-rgb),0.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.header-inner{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:28px;
  transition:height var(--dur) var(--ease);
}
.site-header.scrolled .header-inner{ height:var(--header-h-scrolled); }

.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand-mark{ width:34px; height:34px; color:var(--charcoal); flex:none; transition:transform var(--dur) var(--ease); }
.brand:hover .brand-mark{ transform:rotate(-8deg); }
.brand-word{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--charcoal); letter-spacing:-0.025em; }
.brand-word .amp{ color:var(--accent); margin:0 3px; }

.main-nav{ flex:1; display:flex; justify-content:center; }
.main-nav ul{ display:flex; align-items:center; gap:34px; }
.main-nav a{ font-size:14px; font-weight:500; color:var(--charcoal); position:relative; padding:8px 0; }
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:2px; width:100%; height:1.5px; background:var(--charcoal);
  transform:scaleX(0); transform-origin:right; transition:transform var(--dur) var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); transform-origin:left; }
.main-nav a.active{ font-weight:700; }
.has-flyout{ position:relative; }
.flyout{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px); min-width:230px;
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:10px; display:flex; flex-direction:column; gap:2px;
  opacity:0; pointer-events:none; transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.has-flyout:hover .flyout, .has-flyout:focus-within .flyout{ opacity:1; pointer-events:auto; transform:translate(-50%,4px); }
.flyout a{ padding:10px 14px; border-radius:6px; font-size:13.5px; }
.flyout a::after{ display:none; }
.flyout a:hover{ background:var(--cream); }

.header-actions{ display:flex; align-items:center; gap:6px; flex:none; }
.header-cta{ margin-left:8px; }
.cart-btn{ position:relative; }
.cart-count{
  position:absolute; top:2px; right:2px; background:var(--charcoal); color:var(--cream);
  font-size:10px; font-weight:700; min-width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:0 3px; border:2px solid var(--cream);
}
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; width:42px; height:42px; }
.nav-toggle span{ display:block; width:20px; height:1.6px; background:var(--charcoal); margin:5px auto; border-radius:2px; transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

.search-panel{
  max-height:0; overflow:hidden; background:var(--surface); border-bottom:1px solid transparent;
  transition:max-height var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.search-panel.open{ max-height:90px; border-color:var(--border-soft); }
.search-panel-inner{ display:flex; align-items:center; gap:14px; padding:22px 28px; }
.search-panel-inner svg{ width:20px; height:20px; color:var(--espresso); flex:none; }
.search-panel-inner input{
  flex:1; border:none; background:none; font-size:18px; font-family:var(--font-display); color:var(--charcoal); outline:none;
}
.search-panel-inner input::placeholder{ color:var(--taupe); }

@media (max-width:1080px){
  .main-nav{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle{ display:block; }
}

/* mobile drawer */
.mobile-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(360px,86vw); background:var(--cream); z-index:260;
  padding:calc(var(--header-h) + 20px) 30px 30px; transform:translateX(100%); transition:transform .4s var(--ease);
  box-shadow:-20px 0 60px rgba(var(--charcoal-rgb),0.18); display:flex; flex-direction:column; gap:28px;
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer ul{ display:flex; flex-direction:column; gap:6px; }
.mobile-drawer li{ opacity:0; transform:translateX(16px); transition:opacity .4s var(--ease), transform .4s var(--ease); transition-delay:calc(var(--i) * 0.04s); }
.mobile-drawer.open li{ opacity:1; transform:translateX(0); }
.mobile-drawer a{ font-family:var(--font-display); font-size:22px; padding:10px 0; display:block; }
.mobile-drawer .btn{ opacity:0; transition:opacity .4s var(--ease); transition-delay:.35s; }
.mobile-drawer.open .btn{ opacity:1; }
.drawer-scrim{
  position:fixed; inset:0; background:rgba(var(--charcoal-rgb),0.35); z-index:250; opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease); backdrop-filter:blur(2px);
}
.drawer-scrim.open{ opacity:1; pointer-events:auto; }

/* ============ FOOTER ============ */
.site-footer{
  background:var(--charcoal); color:rgba(var(--cream-rgb),0.78); padding:56px 0 0; margin-top:64px;
  position:relative; overflow:hidden; container-type:inline-size;
  /* the wordmark is a fixed glyph run in a fixed face: natural width is 5.37x
     the font-size, so full size is sized in CSS and is correct on frame one */
  --mark-size:min(calc((100cqw - 120px) / 5.37), 172px);
}
.footer-veil{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--pattern-dark); background-size:120px 120px; opacity:.5;
  animation:footerDrift 40s linear infinite;
}
@keyframes footerDrift{ from{ background-position:0 0; } to{ background-position:480px -240px; } }
.site-footer .wrap{ position:relative; z-index:1; }
/* the wordmark: centred behind the footer content, growing small -> large
   once, as a timed animation, the first time the footer comes into view */
.footer-markzone{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.footer-mark{
  position:absolute; left:50%; top:50%; white-space:nowrap; will-change:transform;
  transform-origin:center center; transform:translate(-50%,-50%) scale(.26);
  transition:transform 1.15s cubic-bezier(.22,.61,.36,1), opacity .8s linear;
  opacity:.55;
  font-size:var(--mark-size); font-family:var(--font-display); font-weight:800;
  letter-spacing:-.045em; line-height:.84; color:rgba(var(--cream-rgb),.11);
}
.site-footer.mark-in .footer-mark{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.footer-mark .amp{ color:rgba(62,91,74,.6); }
/* content sits above the mark */
.footer-top, .footer-bottom{ position:relative; z-index:1; }
.footer-top{ display:grid; grid-template-columns:1.6fr 0.8fr 0.9fr 1fr; gap:48px; padding-bottom:40px; }
.site-footer .brand-mark, .site-footer .brand-word{ color:var(--cream); }
.footer-brand p{ margin:18px 0 26px; font-size:14.5px; max-width:320px; opacity:.82; }
.newsletter-form label{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(var(--cream-rgb),0.6); display:block; margin-bottom:10px; }
.newsletter-row{ display:flex; gap:10px; }
.newsletter-row input{
  flex:1; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18); border-radius:var(--radius-sm);
  padding:12px 14px; color:var(--cream); font-size:14px;
}
.newsletter-row input::placeholder{ color:rgba(255,255,255,0.4); }
.footer-col h5{ color:var(--cream); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:20px; }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{ font-size:14px; opacity:.8; transition:opacity var(--dur-fast) var(--ease); }
.footer-col a:hover{ opacity:1; }
.footer-contact li{ font-size:14px; opacity:.8; line-height:1.6; }
.social-row{ display:flex; gap:8px; margin-top:20px; }
.social-row .icon-btn{ color:var(--cream); background:rgba(255,255,255,0.07); }
.social-row .icon-btn:hover{ background:rgba(255,255,255,0.16); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.12); padding:26px 0; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:12px; font-size:13px; opacity:.6;
}
.legal-links{ display:flex; gap:22px; }
@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } .footer-bottom{ flex-direction:column; } }

/* ============ BREADCRUMBS ============ */
.breadcrumbs{ padding:22px 0 0; }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--text-muted); }
.breadcrumbs a{ color:var(--text-muted); transition:color var(--dur-fast) var(--ease); }
.breadcrumbs a:hover{ color:var(--charcoal); }
.breadcrumbs li:not(:last-child)::after{ content:"›"; margin-left:8px; color:var(--taupe); }
.breadcrumbs li.current{ color:var(--charcoal); font-weight:600; }

/* ============ PLACEHOLDER PHOTOGRAPHY ============
   Editorial gradient washes standing in for real product photography.
   Swap by replacing the background-image / adding a real <img>. */
.ph-photo{
  position:relative; overflow:hidden; background:var(--sand); isolation:isolate;
}
.ph-photo::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 20% 15%, rgba(var(--cream-rgb),0.9), transparent 55%),
    radial-gradient(100% 90% at 85% 90%, rgba(var(--charcoal-rgb),0.16), transparent 60%),
    linear-gradient(155deg, var(--sand) 0%, var(--taupe) 100%);
}
.ph-photo::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 60px rgba(var(--charcoal-rgb),0.08); }
.ph-photo .ph-icon{ position:absolute; z-index:1; color:rgba(var(--charcoal-rgb),0.28); }
.ph-photo .ph-tag{
  position:absolute; z-index:2; bottom:14px; left:14px; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--espresso); background:rgba(var(--cream-rgb),0.85); padding:4px 9px; border-radius:5px;
}
.ph-photo.tone-b::before{ background:radial-gradient(120% 100% at 80% 10%, rgba(var(--cream-rgb),0.85), transparent 55%), radial-gradient(100% 90% at 10% 95%, rgba(var(--charcoal-rgb),0.18), transparent 60%), linear-gradient(155deg, var(--taupe) 0%, var(--espresso) 100%); }
.ph-photo.tone-c::before{ background:radial-gradient(120% 100% at 50% 0%, rgba(var(--cream-rgb),0.9), transparent 55%), linear-gradient(160deg, var(--cream) 0%, var(--sand) 100%); }
.ph-photo.tone-dark::before{ background:radial-gradient(130% 110% at 30% 20%, rgba(255,255,255,0.08), transparent 55%), linear-gradient(160deg, var(--espresso) 0%, var(--charcoal) 100%); }
.ph-photo.tone-dark .ph-icon{ color:rgba(var(--cream-rgb),0.35); }
.ph-photo.tone-dark .ph-tag{ background:rgba(var(--charcoal-rgb),0.55); color:var(--cream); }

/* ============ ANIMATION UTILITIES ============
   NOTE: every settled (.in-view) state resets to `transform:none`, not
   translate(0)/scale(1). A residual transform keeps the element on a
   composited layer, and text rasterised on that layer renders soft/hazy.
   Dropping the transform hands painting back to the normal text renderer. */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform:scale(.94); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-scale.in-view{ opacity:1; transform:none; }
.reveal-left{ opacity:0; transform:translateX(-32px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-left.in-view{ opacity:1; transform:none; }
.reveal-right{ opacity:0; transform:translateX(32px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-right.in-view{ opacity:1; transform:none; }
.stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--d,0) * 70ms); }
.stagger.in-view > *{ opacity:1; transform:none; }

.split-words .word, .split-lines .line{ display:inline-block; overflow:hidden; }
.split-words .word span, .split-lines .line span{
  display:inline-block; transform:translateY(110%); transition:transform .8s var(--ease);
  transition-delay:calc(var(--d,0) * 55ms);
}
.split-words.in-view .word span, .split-lines.in-view .line span{ transform:none; }

[data-parallax]{ will-change:transform; }

.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; width:max-content; animation:marquee 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============ SIGNATURE PATTERN SYSTEM ============
   A recurring hand-drawn "steam-weave" motif, distilled from the brand's
   bowl+steam mark, used as a subtle textured layer instead of flat color
   blocks — this is the site's repeating visual signature. Two colorways
   (light strokes for dark backgrounds, dark strokes for light ones), one
   static, one slow-panning "living" variant for hero-scale moments. */
:root{
  --pattern-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 34 Q20 16 40 34 T80 34 T120 34' fill='none' stroke='%23615649' stroke-width='1.3' stroke-opacity='.16'/%3E%3Cpath d='M0 86 Q20 68 40 86 T80 86 T120 86' fill='none' stroke='%23615649' stroke-width='1.3' stroke-opacity='.16'/%3E%3Ccircle cx='20' cy='60' r='1.7' fill='%23615649' fill-opacity='.22'/%3E%3Ccircle cx='100' cy='12' r='1.7' fill='%23615649' fill-opacity='.22'/%3E%3Ccircle cx='100' cy='108' r='1.7' fill='%23615649' fill-opacity='.22'/%3E%3C/svg%3E");
  --pattern-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 34 Q20 16 40 34 T80 34 T120 34' fill='none' stroke='%23F4ECE4' stroke-width='1.3' stroke-opacity='.14'/%3E%3Cpath d='M0 86 Q20 68 40 86 T80 86 T120 86' fill='none' stroke='%23F4ECE4' stroke-width='1.3' stroke-opacity='.14'/%3E%3Ccircle cx='20' cy='60' r='1.7' fill='%23F4ECE4' fill-opacity='.18'/%3E%3Ccircle cx='100' cy='12' r='1.7' fill='%23F4ECE4' fill-opacity='.18'/%3E%3Ccircle cx='100' cy='108' r='1.7' fill='%23F4ECE4' fill-opacity='.18'/%3E%3C/svg%3E");
}
.pattern-veil{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:var(--pattern-light); background-size:120px 120px; }
.pattern-veil.dark{ background-image:var(--pattern-dark); }
.pattern-veil.pan{ animation:patternPan 60s linear infinite; }
@keyframes patternPan{ from{ background-position:0 0; } to{ background-position:480px 240px; } }

/* Shared 3D-tilt targets — JS (initTilt) writes rotateX/Y transforms here */
[data-tilt]{ transition:transform .4s var(--ease-soft); will-change:transform; }

/* Gentle infinite float, used for badges/chips that need to feel "alive" */
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

/* Slow full-rotation, used for decorative rings/orbits */
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============ CARDS ============ */
.card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }

/* ============ FORMS ============ */
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--espresso); margin-bottom:8px; text-transform:uppercase; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border:1.5px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font-body); font-size:15px; color:var(--charcoal); background:var(--surface);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--charcoal); box-shadow:0 0 0 4px rgba(var(--charcoal-rgb),0.08); }
.field textarea{ resize:vertical; min-height:110px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.checkbox-row{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-muted); }
.checkbox-row input{ width:18px; height:18px; accent-color:var(--charcoal); }
.form-note{ font-size:12.5px; color:var(--text-muted); margin-top:14px; }

/* toggle switch */
.switch{ position:relative; display:inline-flex; align-items:center; gap:12px; cursor:pointer; }
.switch input{ display:none; }
.switch .track{ width:44px; height:24px; background:var(--taupe); border-radius:999px; position:relative; transition:background var(--dur-fast) var(--ease); }
.switch .track::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--white); border-radius:50%; transition:transform var(--dur-fast) var(--ease); box-shadow:var(--shadow-sm); }
.switch input:checked + .track{ background:var(--charcoal); }
.switch input:checked + .track::after{ transform:translateX(20px); }
.switch .switch-label{ font-size:14px; color:var(--charcoal); }

@media (max-width:720px){ .field-row{ grid-template-columns:1fr; } }

/* ============ CHAT WIDGET ============ */
.chat-widget{ position:fixed; right:26px; bottom:26px; z-index:300; }
.chat-launcher{
  --cut: 10px;
  width:58px; height:58px; border-radius:0; background:var(--charcoal); color:var(--cream); border:none;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                    100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-lg);
  transition:transform var(--dur-fast) var(--ease-soft);
}
.chat-launcher:hover{ transform:scale(1.06) rotate(-4deg); }
.chat-launcher svg{ width:26px; height:26px; }
.chat-panel{
  position:absolute; bottom:74px; right:0; width:340px; max-width:calc(100vw - 40px); background:var(--surface);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--border-soft);
  transform:translateY(16px) scale(.97); opacity:0; pointer-events:none; transition:all var(--dur) var(--ease);
}
.chat-panel.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.chat-head{ background:var(--charcoal); color:var(--cream); padding:18px 20px; display:flex; justify-content:space-between; align-items:flex-start; }
.chat-head strong{ display:block; font-family:var(--font-display); font-size:16px; }
.chat-head span{ font-size:12px; opacity:.7; }
.chat-head .icon-btn{ color:var(--cream); }
.chat-body{ padding:18px 20px; max-height:280px; overflow-y:auto; }
.chat-msg{ background:var(--cream); padding:12px 14px; border-radius:14px 14px 14px 4px; font-size:13.5px; line-height:1.55; max-width:90%; }
.chat-quick{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.chat-quick button{ text-align:left; background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13px; cursor:pointer; transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.chat-quick button:hover{ border-color:var(--charcoal); background:var(--cream); }
.chat-input-row{ display:flex; gap:8px; padding:14px; border-top:1px solid var(--border-soft); }
.chat-input-row input{ flex:1; border:1.5px solid var(--border); border-radius:999px; padding:10px 16px; font-size:13.5px; }
.chat-input-row input:focus{ outline:none; border-color:var(--charcoal); }
.chat-input-row button{ width:38px; height:38px; border-radius:50%; background:var(--charcoal); color:var(--cream); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.chat-input-row button svg{ width:16px; height:16px; }
.chat-note{ font-size:10.5px; color:var(--text-muted); text-align:center; padding:0 14px 14px; }

/* ============ CAROUSEL CHROME ============ */
[data-carousel]{ position:relative; }
.carousel-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x proximity; scroll-behavior:smooth;
  -ms-overflow-style:none; scrollbar-width:none; cursor:grab; padding-bottom:6px;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.carousel-track.dragging{ cursor:grabbing; scroll-snap-type:none; }
.carousel-slide{ flex:none; scroll-snap-align:start; }
.carousel-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:28px; }
.carousel-arrows{ display:flex; gap:10px; }
.carousel-prev, .carousel-next{ background:var(--surface); border:1.5px solid var(--border); }
.carousel-prev:hover, .carousel-next:hover{ background:var(--charcoal); border-color:var(--charcoal); color:var(--cream); }
.carousel-dots{ display:flex; gap:8px; }
.carousel-dots button{ width:7px; height:7px; border-radius:50%; border:none; background:var(--taupe); cursor:pointer; padding:0; transition:all var(--dur-fast) var(--ease); }
.carousel-dots button.active{ background:var(--charcoal); width:22px; border-radius:4px; }

/* ============ PRODUCT CARD ============ */
.product-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden;
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); display:flex; flex-direction:column; height:100%;
}
.product-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-5px); }
.product-card-media{ aspect-ratio:4/3; position:relative; display:block; }
.product-card-media .ph-photo{ position:absolute; inset:0; }
.product-card-media .ph-photo .pattern-veil{ opacity:.32; transition:opacity .5s var(--ease); }
.product-card:hover .product-card-media .ph-photo .pattern-veil{ opacity:.62; }
.product-card:hover .ph-photo::before{ transform:scale(1.06); }
.ph-photo::before{ transition:transform .6s var(--ease); }
.product-card-media .ph-icon{ transition:transform .5s var(--ease); }
.product-card:hover .product-card-media .ph-icon{ transform:scale(1.08) translateY(-2px); }
.product-card-cat{
  position:absolute; top:12px; left:12px; z-index:2; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; background:rgba(var(--cream-rgb),0.92); color:var(--espresso); padding:5px 10px; border-radius:999px;
}
.product-card-status{
  position:absolute; top:12px; right:12px; z-index:2; font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:5px 9px; border-radius:999px;
}
.product-card-status.limited{ background:#F3E3C6; color:#8A6516; }
.product-card-status.unavailable{ background:rgba(var(--charcoal-rgb),0.86); color:var(--cream); }
.product-card-quickadd{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2; opacity:0; transform:translateY(8px);
  transition:all var(--dur-fast) var(--ease);
}
.product-card:hover .product-card-quickadd{ opacity:1; transform:translateY(0); }
.product-card-body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-card-body h4{ font-size:16.5px; }
.product-card-body .spec-line{ font-size:12.5px; color:var(--text-muted); }
.product-card-foot{ margin-top:auto; padding-top:12px; display:flex; justify-content:space-between; align-items:center; }
.product-card-foot .btn{ width:100%; }

/* ============ CATEGORY CARD ============ */
.category-card{
  position:relative; border-radius:var(--radius); overflow:hidden; min-height:340px; display:flex; flex-direction:column;
  justify-content:flex-end; padding:28px; color:var(--cream); isolation:isolate;
}
.category-card .ph-photo{ position:absolute; inset:0; z-index:-1; }
.category-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(var(--charcoal-rgb),0.75) 0%, rgba(var(--charcoal-rgb),0.05) 60%); z-index:0; }
.category-card > *{ position:relative; z-index:1; }
.category-card h3{ color:var(--cream); margin-bottom:6px; }
.category-card p{ color:rgba(var(--cream-rgb),0.78); font-size:14px; margin-bottom:14px; }
.category-card .cta-line{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.category-card .cta-line svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease); }
.category-card:hover .cta-line svg{ transform:translateX(5px); }
.category-card:hover{ box-shadow:var(--shadow-lg); }
/* The tilt now lives on the image plate, so the card itself must NOT carry
   preserve-3d (that alone is enough to composite the text and soften it). */
.category-card[data-tilt]{ transition:box-shadow .3s var(--ease); }
.category-card[data-tilt] .ph-photo{ transition:transform .4s var(--ease-soft); }
.category-card .pattern-veil{ transition:opacity .4s var(--ease); opacity:.6; }
.category-card:hover .ph-photo::before{ transform:scale(1.08); }
/* The card's own [data-tilt] hover-tilt already owns `transform` (rotateX/Y,
   set inline by JS) at a snappy .35s, which would otherwise fight the
   shared .stagger reveal's slower .7s translateY on that same property —
   the two together were cancelling each other's opacity fade. Give this
   card's scroll-in reveal its own lane using the standalone translate/scale
   properties instead (independent of transform, so nothing collides), and
   explicitly zero out the inherited transform so it doesn't double up. */
.cat-grid.stagger > .category-card{
  opacity:0; transform:none; translate:0 26px; scale:.97;
  transition:opacity .7s var(--ease), translate .7s var(--ease), scale .7s var(--ease);
}
.cat-grid.stagger.in-view > .category-card{ opacity:1; translate:0 0; scale:1; }
.category-card:hover .pattern-veil{ opacity:1; }

/* ---- Split-reveal category columns (.cat-split) ------------------------
   At rest: five pure image plates, each captioned with its family name.
   On hover the hovered column widens, its plate gives up height from the
   bottom, and the copy grows into the space it vacates — one continuous
   push rather than a slide. First column sits open so the behaviour is
   legible before the cursor arrives. No counters, no scrollbar: the row
   is a flex track that always fits its container. */
.cat-grid-5.cat-split-row{
  display:flex; gap:10px; grid-template-columns:none; overflow:visible;
}
.category-card.cat-split{
  flex:1 1 0; min-width:0; min-height:0; height:460px; padding:0;
  display:flex; flex-direction:column; justify-content:flex-start;
  background:var(--surface); border:1px solid var(--border-soft);
  transition:flex-grow .6s var(--ease-soft), box-shadow .35s var(--ease);
}
.category-card.cat-split::after{ display:none; }
.cat-plate{ position:relative; flex:1 1 auto; overflow:hidden; }
.cat-split .cat-plate .ph-photo{ position:absolute; inset:0; z-index:0; }
.cat-plate::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, rgba(var(--charcoal-rgb),0.82) 0%, rgba(var(--charcoal-rgb),0.06) 58%);
}
.cat-plate-name{
  position:absolute; z-index:2; left:18px; right:18px; bottom:18px;
  font-family:var(--font-display); font-weight:800; font-size:18px;
  line-height:1.14; letter-spacing:-0.025em; color:var(--cream);
  transition:opacity .3s var(--ease);
}
.cat-split .cat-body{
  flex:none; max-height:0; opacity:0; overflow:hidden; padding:0 18px;
  transition:max-height .55s var(--ease-soft), opacity .4s var(--ease), padding .55s var(--ease-soft);
}
.cat-split .cat-body h3{ color:var(--charcoal); font-size:19px; margin-bottom:7px; }
.cat-split .cat-body p{ color:var(--text-muted); font-size:13px; line-height:1.5; margin-bottom:14px; }
.cat-split .cat-body .cta-line{ color:var(--accent); font-size:11.5px; letter-spacing:.06em; }
.cat-split .cat-body .cta-line svg{ width:13px; height:13px; }
/* open state — driven by :hover, with the first column open at rest */
.cat-split-row:hover .cat-split:hover,
.cat-split-row:not(:hover) .cat-split.is-open{ flex-grow:2.4; box-shadow:var(--shadow-lg); }
.cat-split-row:hover .cat-split:hover .cat-body,
.cat-split-row:not(:hover) .cat-split.is-open .cat-body{ max-height:190px; opacity:1; padding:18px 18px 20px; }
.cat-split-row:hover .cat-split:hover .cat-plate-name,
.cat-split-row:not(:hover) .cat-split.is-open .cat-plate-name{ opacity:0; }
/* stagger reveal targets the columns */
.cat-grid.stagger.in-view > .category-card.cat-split{ opacity:1; translate:0 0; scale:1; }
@media (max-width:1000px){
  .cat-grid-5.cat-split-row{ flex-wrap:wrap; }
  .category-card.cat-split{ flex:1 1 46%; height:400px; }
  .cat-split-row:hover .cat-split:hover,
  .cat-split-row:not(:hover) .cat-split.is-open{ flex-grow:1; }
}
@media (max-width:560px){ .category-card.cat-split{ flex:1 1 100%; height:340px; } }

/* ============ STAT BAND ============ */
.stat-band{ background:var(--charcoal); color:var(--cream); border-radius:var(--radius-lg); padding:64px 48px; position:relative; overflow:hidden; }
.stat-band .pattern-veil{ opacity:.8; }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; position:relative; z-index:1; }
.stat-item strong{ display:block; font-family:var(--font-display); font-size:clamp(34px,4vw,52px); font-weight:800; letter-spacing:-0.035em; position:relative; }
.stat-item span{ font-size:13.5px; color:rgba(var(--cream-rgb),0.65); }
@media (max-width:900px){ .stat-grid{ grid-template-columns:1fr 1fr; } }

/* ============ CHIP / BADGE ============ */
.chip{ display:inline-flex; align-items:center; gap:6px; background:var(--sand); color:var(--espresso); font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px; }
.chip.dark{ background:rgba(255,255,255,0.1); color:var(--cream); }
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--success); flex:none; }

/* ============ TESTIMONIAL CARD ============ */
.testi-card{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:30px; height:100%;
  display:flex; flex-direction:column; position:relative; overflow:hidden; isolation:isolate;
  transition:box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}
.testi-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-6px); border-color:transparent; }
.testi-card > *{ position:relative; z-index:1; }
.testi-card > .pattern-veil{ position:absolute; z-index:0; opacity:.22; transition:opacity .5s var(--ease); }
.testi-card:hover > .pattern-veil{ opacity:.4; }
.testi-quote{ width:30px; height:22px; fill:var(--sand); margin-bottom:8px; transition:fill .4s var(--ease); }
.testi-card:hover .testi-quote{ fill:var(--taupe); }
.testi-card .stars{ color:var(--accent); letter-spacing:3px; margin-bottom:16px; }
.testi-card p{ font-family:var(--font-display); font-size:18px; font-weight:500; line-height:1.55; color:var(--charcoal); margin-bottom:24px; flex:1; letter-spacing:-0.015em; }
.testi-person{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:40px; height:40px; border-radius:50%; background:var(--sand); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:500; color:var(--accent); font-size:13px; flex:none;
  box-shadow:0 0 0 0 rgba(var(--taupe-rgb),0.5); transition:box-shadow .4s var(--ease), transform .4s var(--ease);
}
.testi-card:hover .avatar{ box-shadow:0 0 0 4px rgba(var(--taupe-rgb),0.28); transform:scale(1.05); }
.testi-person strong{ display:block; font-size:13.5px; font-family:var(--font-body); }
.testi-person span{ font-size:12.5px; color:var(--text-muted); }

/* ============================================================
   PAGE: HOME
   ============================================================ */
.hero{
  min-height:94vh; display:flex; align-items:center; position:relative; overflow:hidden;
  padding:calc(var(--header-h) + 40px) 0 80px;
}
.hero-bg{ position:absolute; inset:0; z-index:-2; background:var(--cream); }
.hero-bg .pattern-veil{ opacity:.7; }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.55; animation:blobDrift 22s var(--ease-soft) infinite alternate; }
.hero-blob.b1{ width:520px; height:520px; top:-140px; right:-120px; background:radial-gradient(circle, var(--taupe), transparent 70%); }
.hero-blob.b2{ width:420px; height:420px; bottom:-160px; left:-100px; background:radial-gradient(circle, var(--sand), transparent 70%); animation-delay:-11s; }
@keyframes blobDrift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(26px,-22px,0) scale(1.08); } }
.hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center; }
.hero-eyebrow{ margin-bottom:22px; }
.hero h1{ margin-bottom:22px; }
.hero h1 .line{ display:block; }
.hero-swoosh{ display:block; overflow:visible; margin:0 0 22px; }
.hero-swoosh path{ fill:none; stroke:var(--espresso); stroke-width:2.2; stroke-linecap:round; stroke-dasharray:280; stroke-dashoffset:280; transition:stroke-dashoffset 1.3s var(--ease) .15s; }
.hero-swoosh.in-view path{ stroke-dashoffset:0; }
.hero .lede{ max-width:480px; margin-bottom:38px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:52px; }
.hero-trust{ display:flex; gap:28px; flex-wrap:wrap; }
.hero-trust .chip{ background:var(--surface); border:1px solid var(--border-soft); }

.hero-visual{ position:relative; height:520px; }
.hero-visual::before{
  content:""; position:absolute; inset:-12%; z-index:-3; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--taupe-rgb),0.4), transparent 68%);
  filter:blur(34px); animation:glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }
.hero-visual-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.hero-visual .layer{ position:absolute; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); }
.hero-visual .layer-1{ width:78%; height:70%; top:0; right:0; }
.hero-visual .layer-2{ width:56%; height:46%; bottom:0; left:0; border:6px solid var(--cream); }
.hero-visual .ph-icon{ width:64px; height:64px; }
.hero-visual .layer-2 .ph-icon{ width:44px; height:44px; animation:iconPulse 4s ease-in-out infinite; }
@keyframes iconPulse{ 0%,100%{ transform:scale(1) rotate(0deg); } 50%{ transform:scale(1.08) rotate(-3deg); } }

/* Animated steam-rising scene — fills the main hero panel, echoes the brand mark */
.ph-scene{ position:absolute; inset:0; margin:auto; width:60%; height:60%; color:rgba(var(--charcoal-rgb),0.32); }
.ph-scene .steam{ opacity:0; transform-origin:center; animation:steamRise 4.2s ease-in-out infinite; }
.ph-scene .s1{ animation-delay:.1s; }
.ph-scene .s2{ animation-delay:1s; }
.ph-scene .s3{ animation-delay:1.9s; }
@keyframes steamRise{
  0%{ opacity:0; transform:translateY(8px) scaleY(.9); }
  22%{ opacity:.9; }
  70%{ opacity:.45; }
  100%{ opacity:0; transform:translateY(-14px) scaleY(1.1); }
}

/* Staggered entrance for the floating badges, then they settle into their bob loop */
.hero-float-badge{ opacity:0; }
.hero-float-badge.fb1{ animation:badgeIn .7s var(--ease) .9s forwards, floaty 5s ease-in-out 1.6s infinite; }
.hero-float-badge.fb2{ animation:badgeIn .7s var(--ease) 1.3s forwards, floaty 5s ease-in-out 2s infinite; }
@keyframes badgeIn{ from{ opacity:0; transform:translateY(14px) scale(.94); } to{ opacity:1; transform:translateY(0) scale(1); } }
.hero-orbit{
  position:absolute; top:50%; left:50%; width:145%; height:145%; margin:-72.5% 0 0 -72.5%;
  z-index:-1; pointer-events:none; animation:spin 50s linear infinite;
}
.hero-orbit svg{ width:100%; height:100%; }
.hero-float-badge{
  position:absolute; display:flex; align-items:center; gap:8px; background:var(--surface);
  border:1px solid var(--border-soft); border-radius:999px; padding:11px 18px 11px 13px;
  font-size:12.5px; font-weight:700; color:var(--charcoal); box-shadow:var(--shadow-md);
  z-index:2; animation:floaty 5s ease-in-out infinite; white-space:nowrap;
}
.hero-float-badge svg{ width:16px; height:16px; color:var(--success); flex:none; }
.hero-float-badge.fb1{ top:-16px; left:-16px; animation-delay:0s; }
.hero-float-badge.fb2{ bottom:20px; right:-20px; animation-delay:1.6s; }
@media (max-width:980px){ .hero-orbit, .hero-float-badge{ display:none; } }

.scroll-cue{
  position:absolute; left:50%; bottom:34px; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:8px; color:var(--espresso); z-index:1;
}
.scroll-cue span{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }
.scroll-cue .line{ width:1.5px; height:34px; background:var(--taupe); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--charcoal); animation:scrollcue 1.8s ease-in-out infinite; }
@keyframes scrollcue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-visual{ height:340px; order:-1; }
}

/* ============ SEGMENTS STRIP (continuous coverflow: cards grow/shrink smoothly
   as they drift past the center — scale is computed and applied per animation
   frame in JS, not toggled by a class, so the size change is a smooth continuum
   rather than a snap between two states. Base size here is the "actual" 1x
   size JS scales from: center peak = 1.5x area (~1.225x linear), sides settle
   at 0.75x area (~0.866x linear). ============ */
.segments-strip{ padding:60px 0 40px; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.segments-head{ margin-bottom:34px; display:flex; justify-content:center; }
.segments-label{
  display:inline-flex; align-items:center; gap:12px; font-family:var(--font-body);
  font-size:clamp(15px,1.7vw,19px); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--espresso);
}
.segments-label::before,.segments-label::after{ content:""; width:30px; height:1.5px; background:var(--espresso); display:inline-block; flex:none; }
.segments-carousel{
  position:relative; display:flex; justify-content:center;
  max-width:1760px; margin:0 auto; padding:0 28px;
}
.segments-viewport{
  position:relative; overflow:hidden; width:100%; max-width:1560px; padding:56px 0; cursor:grab; user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.segments-viewport.dragging{ cursor:grabbing; }
.segments-track{ display:flex; align-items:center; gap:148px; width:max-content; will-change:transform; }
.segment-card{
  flex:0 0 326px; width:326px; background:var(--surface); border:1px solid var(--border-soft); border-radius:24px;
  padding:44px 34px 48px; display:flex; flex-direction:column; gap:20px;
  box-shadow:0 16px 30px rgba(var(--charcoal-rgb),0.09);
  transition:border-color .4s var(--ease); will-change:transform,opacity;
}
.segment-icon{
  width:62px; height:62px; border-radius:17px; background:var(--sand); color:var(--espresso); flex:none;
  display:flex; align-items:center; justify-content:center;
}
.segment-icon svg{ width:31px; height:31px; }
.segment-card strong{ font-family:var(--font-display); font-size:23px; font-weight:700; letter-spacing:-0.025em; color:var(--charcoal); }
.segment-card span{ font-size:14.5px; color:var(--text-muted); line-height:1.55; }
.segments-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border-soft); background:rgba(var(--cream-rgb),0.95);
  display:flex; align-items:center; justify-content:center; color:var(--espresso); cursor:pointer; padding:0;
  box-shadow:var(--shadow-sm); transition:background var(--dur-fast) var(--ease), transform .2s var(--ease), box-shadow .3s var(--ease);
}
.segments-arrow:hover{ background:var(--cream); box-shadow:var(--shadow-md); }
.segments-arrow:active{ transform:translateY(-50%) scale(.92); }
.segments-arrow svg{ width:17px; height:17px; }
.segments-prev{ left:2px; }
.segments-next{ right:2px; }
.segments-strip + section{ padding-top:72px; }
@media (max-width:900px){
  .segment-card{ flex-basis:232px; width:232px; padding:30px 23px 32px; }
  .segments-track{ gap:86px; }
}
@media (max-width:640px){
  .segments-head{ margin-bottom:22px; }
  .segments-label{ font-size:14px; }
  .segments-label::before,.segments-label::after{ width:18px; }
  .segment-card{ flex-basis:180px; width:180px; padding:21px 17px 23px; gap:12px; }
  .segments-track{ gap:54px; }
  .segment-card strong{ font-size:16px; }
  .segments-arrow{ width:34px; height:34px; }
}

.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.step-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:30px 26px; position:relative; transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.step-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:transparent; }
.step-card .step-num{ position:absolute; top:20px; right:24px; font-family:var(--font-mono); font-size:26px; font-weight:500; letter-spacing:.08em; color:var(--taupe); transition:color .35s var(--ease); }
.step-card:hover .step-num{ color:var(--accent); }
.step-card .step-icon{ width:40px; height:40px; color:var(--accent); margin-bottom:20px; transition:transform .4s var(--ease-soft); }
.step-card:hover .step-icon{ transform:scale(1.12) rotate(-4deg); }
.step-card h4{ margin-bottom:8px; }
.step-card p{ font-size:14px; color:var(--text-muted); }
/* Connector between step cards: a static dashed line + chevron shows the
   left-to-right reading order (01 -> 02 -> 03 -> 04), while a bigger,
   glowing dot continuously travels the line the same way (left to right)
   as an accent pulse — desktop only, where the row reads as a chain. */
.step-arrow{ display:none; }
@media (min-width:901px){
  .steps-grid{ gap:44px; }
  /* distances below are measured rightward from the left card's own right
     edge (0) to the next card's left edge (44 = the gap width) */
  .step-card:not(:last-child)::after{
    content:""; position:absolute; top:50%; right:-28px; width:22px; height:0;
    border-top:2.5px dashed var(--taupe); transform:translateY(-50%); z-index:2;
  }
  .step-card:not(:last-child) .step-arrow{
    display:flex; position:absolute; top:50%; right:-42px; width:11px; height:11px;
    transform:translateY(-50%); z-index:2; color:var(--espresso);
  }
  .step-card:not(:last-child) .step-arrow svg{ width:100%; height:100%; }
  .step-card:not(:last-child)::before{
    content:""; position:absolute; top:50%; right:-6px; width:9px; height:9px; border-radius:50%;
    background:var(--espresso); box-shadow:0 0 0 5px rgba(var(--charcoal-rgb),0.09); transform:translateY(-50%); z-index:3;
    animation:flowDot 2.8s var(--ease) infinite;
  }
  .step-card:nth-child(2)::before{ animation-delay:.55s; }
  .step-card:nth-child(3)::before{ animation-delay:1.1s; }
}
@keyframes flowDot{ 0%{ right:-6px; opacity:0; } 14%{ opacity:1; } 80%{ opacity:1; } 100%{ right:-40px; opacity:0; } }
@media (max-width:900px){ .steps-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps-grid{ grid-template-columns:1fr; } }


.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:1000px){ .cat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .cat-grid{ grid-template-columns:1fr; } }

/* ---- Five-across catalogue row ----------------------------------------
   Five families on one line. Narrower columns need proportionally less
   air, not the same type in a smaller box — so the gutter tightens, the
   card grows taller (portrait proportion reads deliberate rather than
   squeezed), and padding/type step down together. */
.cat-grid-5{ grid-template-columns:repeat(5,1fr); gap:16px; }
.cat-grid-5 .category-card{ min-height:400px; padding:24px 20px 26px; }
.cat-grid-5 .category-card h3{ font-size:19px; letter-spacing:-0.025em; line-height:1.15; }
.cat-grid-5 .category-card p{ font-size:13px; line-height:1.5; margin-bottom:12px; }
.cat-grid-5 .category-card .cta-line{ font-size:11px; letter-spacing:.06em; gap:6px; }
.cat-grid-5 .category-card .cta-line svg{ width:12px; height:12px; }
@media (max-width:1180px){
  .cat-grid-5{ gap:13px; }
  .cat-grid-5 .category-card{ padding:20px 16px 22px; min-height:370px; }
  .cat-grid-5 .category-card h3{ font-size:17px; }
  .cat-grid-5 .category-card p{ font-size:12.5px; }
}
/* below ~1000px five columns genuinely can't breathe — fall back */
@media (max-width:1000px){
  .cat-grid-5{ grid-template-columns:1fr 1fr; gap:22px; }
  .cat-grid-5 .category-card{ min-height:340px; padding:28px; }
  .cat-grid-5 .category-card h3{ font-size:22px; }
  .cat-grid-5 .category-card p{ font-size:14px; }
}
@media (max-width:560px){ .cat-grid-5{ grid-template-columns:1fr; } }

/* ---- Sep 24 preview notice ------------------------------------------- */
.preview-note{
  display:flex; align-items:flex-start; gap:12px; margin-bottom:26px;
  background:var(--sand); border-left:3px solid var(--accent);
  padding:15px 18px;
}
.preview-note svg{ width:17px; height:17px; flex:none; color:var(--accent); margin-top:1px; }
.preview-note p{ margin:0; font-size:13px; line-height:1.55; color:var(--espresso); }
.preview-note strong{ font-weight:700; color:var(--charcoal); }

/* ---- Split-column overrides (must outrank .cat-grid-5 .category-card) --
   The split columns are image-first, so the white card padding reads as a
   thick mat around the plate. Tighten it to a thin, deliberate frame and
   let the copy carry its own inset. Also promotes the "Browse category"
   CTA: the arrow becomes a filled accent disc and the label steps up. */
.cat-grid-5 .category-card.cat-split{ padding:8px; }
.cat-grid-5 .category-card.cat-split .cat-plate-name{ left:14px; right:14px; bottom:14px; }
.cat-grid-5 .category-card.cat-split .cat-body{ padding:0 10px; }
.cat-split-row:hover .cat-split:hover .cat-body,
.cat-split-row:not(:hover) .cat-split.is-open .cat-body{ max-height:200px; padding:14px 10px 12px; }
/* CTA is a charcoal cut-corner pill that hugs the word — no arrow, no full
   width. Hovering anywhere on the column flips it to accent green, so the
   pill confirms the column's own hover rather than needing its own target. */
.cat-grid-5 .cat-split .cat-body .cta-line{
  display:inline-flex; align-items:center; justify-content:center;
  width:auto; margin-top:4px; padding:12px 19px;
  background:var(--charcoal); color:var(--cream);
  font-family:var(--font-display); font-size:11.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:background .32s var(--ease);
}
.cat-grid-5 .cat-split .cat-body .cta-line svg{ display:none; }
.cat-grid-5 .cat-split:hover .cat-body .cta-line{ background:var(--accent); }

.carousel-slide.product-slide{ width:290px; }

.why-grid{ display:grid; grid-template-columns:0.95fr 1.05fr; gap:64px; align-items:center; }
.why-list{ display:flex; flex-direction:column; gap:28px; }
.why-item{ display:flex; gap:18px; }
.why-item .icon-wrap{ flex:none; width:48px; height:48px; border-radius:12px; background:var(--sand); display:flex; align-items:center; justify-content:center; }
.why-item .icon-wrap svg{ width:22px; height:22px; color:var(--espresso); }
.why-item h4{ margin-bottom:5px; }
.why-item p{ font-size:14.5px; color:var(--text-muted); }
.why-visual{ position:relative; height:460px; }
.why-visual .layer{ position:absolute; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.why-visual .layer-1{ width:82%; height:74%; top:0; left:0; }
.why-visual .layer-2{ width:52%; height:44%; bottom:0; right:0; border:6px solid var(--cream); }
.why-visual .ph-icon{ width:56px; height:56px; }
.why-visual .layer-2 .ph-icon{ width:40px; height:40px; }
.why-visual .ph-ring{ position:absolute; top:-8%; right:-8%; width:46%; height:46%; z-index:-1; opacity:.5; animation:spin 60s linear infinite; }
@media (max-width:940px){ .why-grid{ grid-template-columns:1fr; } .why-visual{ height:340px; order:-1; } }
@media (max-width:520px){ .why-visual .layer-2{ display:none; } }

.trust-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.trust-card{ background:var(--charcoal); color:var(--cream); border-radius:var(--radius-lg); padding:44px; position:relative; overflow:hidden; min-height:280px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .4s var(--ease-soft), box-shadow .4s var(--ease); }
.trust-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.trust-card.alt{ background:var(--sand); color:var(--charcoal); }
.trust-card > *{ position:relative; z-index:1; }
.trust-card > .pattern-veil{ position:absolute; z-index:0; }
.trust-card h3{ color:inherit; margin-bottom:10px; max-width:320px; }
.trust-card p{ color:inherit; opacity:.78; max-width:340px; font-size:14.5px; margin-bottom:24px; }
.trust-card.alt .eyebrow{ color:var(--espresso); }
.trust-card:not(.alt) .eyebrow{ color:rgba(var(--cream-rgb),0.65); }
.trust-card:not(.alt) .eyebrow::before{ background:rgba(var(--cream-rgb),0.65); }
@media (max-width:860px){ .trust-grid{ grid-template-columns:1fr; } }

.testi-track .carousel-slide{ width:380px; }
@media (max-width:520px){ .testi-track .carousel-slide{ width:82vw; } }

.cta-strip{ background:var(--sand); border-radius:var(--radius-lg); padding:64px 56px; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; position:relative; overflow:hidden; }
.cta-strip > *{ position:relative; z-index:1; }
.cta-strip > .pattern-veil{ position:absolute; z-index:0; }
.cta-strip h2{ max-width:520px; }
@media (max-width:760px){ .cta-strip{ padding:44px 28px; } }

/* ============================================================
   GENERIC PAGE BANNER (products / category / certifications / etc.)
   ============================================================ */
.page-banner{ padding:56px 0 60px; position:relative; overflow:hidden; }
.page-banner .ph-photo{ position:absolute; inset:0; z-index:-1; opacity:.5; }
.page-banner-inner{ max-width:720px; }
.page-banner h1{ font-size:clamp(32px,4.4vw,50px); margin-top:6px; }
.page-banner .lede{ margin-top:16px; }

/* ============================================================
   PAGE: PRODUCTS LISTING
   ============================================================ */
.products-layout{ display:grid; grid-template-columns:260px 1fr; gap:44px; align-items:start; padding:0 0 100px; }
.filters-panel{ position:sticky; top:calc(var(--header-h) + 24px); }
.filter-group{ border-bottom:1px solid var(--border-soft); padding-bottom:20px; margin-bottom:20px; }
.filter-group h5{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--charcoal); margin-bottom:14px; }
.filter-check{ display:flex; align-items:center; gap:10px; padding:7px 0; font-size:14px; color:var(--text-muted); cursor:pointer; }
.filter-check input{ width:16px; height:16px; accent-color:var(--charcoal); }
.filter-check:hover{ color:var(--charcoal); }
.filter-check .count{ margin-left:auto; font-size:12px; color:var(--espresso); }
.filters-clear{ font-size:12.5px; font-weight:600; color:var(--espresso); text-decoration:underline; text-underline-offset:3px; background:none; border:none; cursor:pointer; padding:0; }

.products-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.result-count{ font-size:14px; color:var(--text-muted); }
.toolbar-right{ display:flex; align-items:center; gap:14px; }
.sort-select{ padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:13.5px; background:var(--surface); color:var(--charcoal); cursor:pointer; }
.filters-toggle-mobile{ display:none; }

.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.product-grid.list-empty{ display:block; }
.empty-state{ text-align:center; padding:80px 20px; color:var(--text-muted); }
.empty-state svg{ width:48px; height:48px; color:var(--taupe); margin-bottom:18px; }

.pagination{ display:flex; justify-content:center; align-items:center; gap:8px; margin-top:56px; }
.pagination button{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface);
  color:var(--charcoal); font-size:13.5px; font-weight:600; cursor:pointer; transition:all var(--dur-fast) var(--ease);
}
.pagination button.active{ background:var(--charcoal); border-color:var(--charcoal); color:var(--cream); }
.pagination button:hover:not(.active):not(:disabled){ border-color:var(--charcoal); }
.pagination button:disabled{ opacity:.35; cursor:not-allowed; }
.pagination .pg-arrow{ border-radius:999px; width:auto; padding:0 14px; }

@media (max-width:980px){
  .products-layout{ grid-template-columns:1fr; }
  .filters-panel{
    position:fixed; inset:0 0 0 auto; width:min(340px,88vw); background:var(--cream); z-index:280; padding:24px;
    transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto; box-shadow:-16px 0 50px rgba(var(--charcoal-rgb),0.18);
  }
  .filters-panel.open{ transform:translateX(0); }
  .filters-toggle-mobile{ display:inline-flex; }
  .filters-panel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
}
@media (min-width:981px){ .filters-panel-head{ display:none; } }
.product-grid{ }
@media (max-width:900px){ .product-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .product-grid{ grid-template-columns:1fr; } }

/* ============================================================
   PAGE: PRODUCT DETAIL
   ============================================================ */
.pd-layout{ display:grid; grid-template-columns:1fr 1fr; gap:60px; padding-bottom:100px; }
.pd-gallery-main{ aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden; position:relative; margin-bottom:16px; }
.pd-thumbs{ display:flex; gap:12px; }
.pd-thumbs button{ width:76px; height:76px; border-radius:10px; overflow:hidden; border:2px solid transparent; padding:0; cursor:pointer; position:relative; }
.pd-thumbs button.active{ border-color:var(--charcoal); }
.pd-thumbs .ph-photo{ position:absolute; inset:0; }
.pd-info .chip{ margin-bottom:18px; }
.pd-info h1{ font-size:clamp(28px,3.4vw,40px); margin-bottom:14px; }
.pd-info .blurb{ font-size:16px; color:var(--text-muted); margin-bottom:28px; }
.pd-specs{ width:100%; border-collapse:collapse; margin-bottom:30px; }
.pd-specs tr{ border-bottom:1px solid var(--border-soft); }
.pd-specs td{ padding:13px 0; font-size:14.5px; }
.pd-specs td:first-child{ color:var(--text-muted); width:38%; font-weight:500; }
.pd-specs td:last-child{ color:var(--charcoal); font-weight:600; }
.pd-qty-row{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.qty-stepper{ display:flex; align-items:center; border:1.5px solid var(--border); border-radius:999px; overflow:hidden; }
.qty-stepper button{ width:40px; height:44px; background:none; border:none; font-size:18px; cursor:pointer; color:var(--charcoal); }
.qty-stepper button:hover{ background:var(--cream); }
.qty-stepper input{ width:48px; text-align:center; border:none; font-size:15px; font-weight:600; background:none; -moz-appearance:textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pd-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.pd-note{ font-size:12.5px; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
.pd-note svg{ width:16px; height:16px; flex:none; color:var(--espresso); }
.related-heading{ margin:0 0 28px; }
@media (max-width:900px){ .pd-layout{ grid-template-columns:1fr; gap:36px; } }

/* ============================================================
   PAGE: QUOTE / ENQUIRY CART
   ============================================================ */
.quote-layout{ display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:start; padding-bottom:110px; }
.cart-list{ display:flex; flex-direction:column; gap:16px; }
.cart-row{ display:flex; gap:18px; align-items:center; background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:16px; }
.cart-row .thumb{ width:76px; height:76px; border-radius:10px; overflow:hidden; position:relative; flex:none; }
.cart-row .thumb .ph-photo{ position:absolute; inset:0; }
.cart-row .info{ flex:1; min-width:0; }
.cart-row .info h4{ font-size:15.5px; margin-bottom:4px; }
.cart-row .info span{ font-size:12.5px; color:var(--text-muted); }
.cart-row .remove{ color:var(--text-muted); }
.cart-row .remove:hover{ color:#B0463F; }
.summary-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:30px; position:sticky; top:calc(var(--header-h) + 24px); }
.summary-row{ display:flex; justify-content:space-between; padding:10px 0; font-size:14.5px; border-bottom:1px dashed var(--border-soft); }
.summary-row:last-of-type{ border-bottom:none; }
.summary-row strong{ font-family:var(--font-display); font-size:18px; }
.callback-toggle{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-top:1px solid var(--border-soft); margin-top:6px; }
.empty-cart{ text-align:center; padding:90px 20px; }
.empty-cart .icon-wrap{ width:76px; height:76px; border-radius:50%; background:var(--sand); display:flex; align-items:center; justify-content:center; margin:0 auto 24px; }
.empty-cart .icon-wrap svg{ width:34px; height:34px; color:var(--espresso); }
.confirm-state{ text-align:center; padding:90px 20px; max-width:520px; margin:0 auto; }
.confirm-check{ width:84px; height:84px; border-radius:50%; background:var(--charcoal); display:flex; align-items:center; justify-content:center; margin:0 auto 28px; }
.confirm-check svg{ width:38px; height:38px; color:var(--cream); }
.confirm-ref{ display:inline-block; background:var(--sand); color:var(--espresso); padding:8px 16px; border-radius:999px; font-weight:700; font-size:13px; margin-top:16px; letter-spacing:.04em; }
@media (max-width:900px){ .quote-layout{ grid-template-columns:1fr; } .summary-card{ position:static; } }
@media (max-width:560px){ .cart-row{ flex-wrap:wrap; } }

/* ============================================================
   PAGE: CERTIFICATIONS
   ============================================================ */
.cert-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.cert-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:32px; display:flex; gap:20px; }
.cert-card .badge{ flex:none; width:56px; height:56px; border-radius:50%; background:var(--sand); display:flex; align-items:center; justify-content:center; }
.cert-card .badge svg{ width:26px; height:26px; color:var(--espresso); }
.cert-card h4{ margin-bottom:8px; }
.cert-card p{ font-size:14px; color:var(--text-muted); margin-bottom:12px; }
.cert-status{ font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px; display:inline-block; }
.cert-status.pending{ background:#F3E3C6; color:#8A6516; }
.cert-status.available{ background:var(--success-bg); color:var(--success); }
@media (max-width:800px){ .cert-grid{ grid-template-columns:1fr; } }

/* ============================================================
   PAGE: EXPORT MARKETS
   ============================================================ */
.market-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.market-card{ background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:28px; }
.market-card .market-head{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; }
.market-status{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.market-status.active{ background:var(--success-bg); color:var(--success); }
.market-status.expanding{ background:#F3E3C6; color:#8A6516; }
.market-status.planned{ background:var(--sand); color:var(--espresso); }
.market-card p{ font-size:14px; color:var(--text-muted); }
.world-motif{ position:relative; height:100%; min-height:320px; border-radius:var(--radius-lg); overflow:hidden; }
.world-motif svg{ position:absolute; inset:0; width:100%; height:100%; }
@media (max-width:760px){ .market-grid{ grid-template-columns:1fr; } }

/* ============================================================
   PAGE: CLIENTS & PARTNERS
   ============================================================ */
.client-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.client-tile{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:var(--radius); padding:34px 20px;
  display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-display);
  font-size:17px; color:var(--espresso); transition:all var(--dur) var(--ease); min-height:110px;
}
.client-tile:hover{ border-color:var(--charcoal); color:var(--charcoal); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
@media (max-width:900px){ .client-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   PAGE: FAQ
   ============================================================ */
.faq-groups{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:52px; }
.faq-group h3{ margin-bottom:6px; }
.faq-item{ border-bottom:1px solid var(--border-soft); }
.faq-q{
  width:100%; background:none; border:none; text-align:left; padding:22px 4px; display:flex;
  justify-content:space-between; align-items:center; gap:20px; cursor:pointer; font-family:var(--font-display); font-size:17px; color:var(--charcoal);
}
.faq-q .plus{ font-size:22px; color:var(--espresso); transition:transform var(--dur-fast) var(--ease); flex:none; }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--dur) var(--ease); }
.faq-a p{ padding:0 4px 22px; color:var(--text-muted); font-size:14.5px; max-width:680px; margin:0; }

/* ============================================================
   PAGE: ABOUT
   ============================================================ */
.about-hero{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about-visual{ height:420px; border-radius:var(--radius-lg); overflow:hidden; }
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.value-card{ text-align:center; padding:10px; }
.value-card .icon-wrap{ width:56px; height:56px; border-radius:16px; background:var(--sand); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.value-card .icon-wrap svg{ width:26px; height:26px; color:var(--espresso); }
@media (max-width:900px){ .about-hero{ grid-template-columns:1fr; } .about-visual{ order:-1; height:300px; } .value-grid{ grid-template-columns:1fr; } }

/* ============================================================
   PAGE: CONTACT
   ============================================================ */
.contact-layout{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; }
.contact-info-card{ background:var(--charcoal); color:var(--cream); border-radius:var(--radius-lg); padding:40px; }
.contact-info-card h3{ color:var(--cream); margin-bottom:24px; }
.contact-line{ display:flex; gap:14px; padding:16px 0; border-top:1px solid rgba(255,255,255,0.14); }
.contact-line:first-of-type{ border-top:none; }
.contact-line .icon{ width:20px; height:20px; color:var(--gold,var(--cream)); flex:none; margin-top:2px; opacity:.85; }
.contact-line strong{ display:block; font-size:14px; color:var(--cream); }
.contact-line span, .contact-line a{ font-size:13.5px; color:rgba(var(--cream-rgb),0.72); }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }

/* ============ TOAST ============ */
.toast{
  position:fixed; left:50%; bottom:30px; transform:translate(-50%,20px); background:var(--charcoal); color:var(--cream);
  padding:14px 22px; border-radius:999px; font-size:13.5px; font-weight:500; box-shadow:var(--shadow-lg);
  opacity:0; pointer-events:none; transition:all var(--dur) var(--ease); z-index:400; display:flex; align-items:center; gap:10px;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast svg{ width:16px; height:16px; color:#9CD3A4; }


/* ============================================================
   HOMEPAGE FEATURED CARROUSEL — quiet variant
   Scoped to #featuredTrack only, so the Products page keeps the
   fuller card. Strips the badges, the quick-add overlay and the
   boxed button, and removes every hover animation except a
   single border/rule shift. Nothing here moves on its own.
   ============================================================ */
#featuredTrack .product-card{
  background:none; border:none; border-radius:0; box-shadow:none; transition:none;
}
#featuredTrack .product-card:hover{ box-shadow:none; transform:none; }
#featuredTrack .product-card-cat,
#featuredTrack .product-card-status,
#featuredTrack .product-card-quickadd{ display:none; }
#featuredTrack .product-card-media{ border:1px solid var(--border-soft); }
#featuredTrack .product-card:hover .product-card-media{ border-color:rgba(var(--charcoal-rgb),0.3); }
/* hold the placeholder wash perfectly still on hover */
#featuredTrack .product-card:hover .ph-photo::before{ transform:none; }
#featuredTrack .product-card:hover .product-card-media .ph-photo .pattern-veil{ opacity:.32; }
#featuredTrack .product-card:hover .product-card-media .ph-icon{ transform:none; }
#featuredTrack .product-card-body{ padding:16px 0 0; gap:5px; }
#featuredTrack .product-card-body h4{ font-size:16px; line-height:1.25; }
#featuredTrack .product-card-body .spec-line{ font-size:12.5px; }
/* boxed CTA out, quiet mono rule in */
#featuredTrack .product-card-foot{ padding-top:12px; }
#featuredTrack .product-card-foot .btn{
  width:100%; overflow:visible; background:none; border:none; border-top:1px solid var(--border);
  border-radius:0; padding:11px 0 0; color:var(--text-muted);
  font-family:var(--font-mono); font-size:10.5px; font-weight:400; letter-spacing:.13em; text-transform:uppercase;
  justify-content:flex-start; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
#featuredTrack .product-card:hover .product-card-foot .btn{ color:var(--accent); border-color:var(--accent); }


/* ============================================================
   WHY US VISUAL — brought up to hero parity
   Same vocabulary as .hero-visual: 3D-tilted inner stage,
   pulsing glow behind the plates, deeper parallax on both
   layers, breathing icon on the small plate, and two floating
   check badges that fly in and settle into a bob loop.
   Positions are mirrored (big plate sits left here), so the
   badges swap corners. Entry is opacity-only so the parallax
   JS keeps sole ownership of the layers' transforms.
   ============================================================ */
.why-visual-inner{ position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.why-visual::before{
  content:""; position:absolute; inset:-10%; z-index:-3; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--taupe-rgb),0.42), transparent 68%);
  animation:glowPulse 9s ease-in-out infinite;
}
.why-visual .layer-2 .ph-icon{ animation:iconPulse 4s ease-in-out infinite; }
.why-visual .layer{ opacity:0; transition:opacity .6s var(--ease); }
.why-visual.in-view .layer-1{ opacity:1; }
.why-visual.in-view .layer-2{ opacity:1; transition-delay:.28s; }
/* mirrored badge corners — big plate is top-left in this section */
.why-visual .hero-float-badge.fb1{ top:-14px; right:-14px; left:auto; }
.why-visual .hero-float-badge.fb2{ bottom:14px; left:-18px; right:auto; }
/* the hero's badges animate on page load; this section is 4 screens down,
   so re-gate them on the reveal — they land after both plates are up */
.why-visual .hero-float-badge{ animation:none; opacity:0; }
.why-visual.in-view .hero-float-badge.fb1{ animation:badgeIn .7s var(--ease) .5s forwards, floaty 5s ease-in-out 1.2s infinite; }
.why-visual.in-view .hero-float-badge.fb2{ animation:badgeIn .7s var(--ease) .78s forwards, floaty 5s ease-in-out 1.5s infinite; }
@media (max-width:940px){ .why-visual .hero-float-badge{ display:none; } }
@media (prefers-reduced-motion:reduce){
  .why-visual .layer{ opacity:1; transition:none; }
  .why-visual::before{ animation:none; }
  .why-visual .hero-float-badge{ opacity:1; }
}


/* ============================================================
   TRUST BAND — resolving headline + stamped credentials
   Every animated property is transform or opacity, so the
   compositor owns the whole sequence and nothing re-lays-out:
   the headline's real letters are never rewritten (they fade
   and rise per character, grouped per word), and the monospace
   noise runs in an absolutely positioned overlay so its text
   churn is isolated from the card. Script side: one shared
   rAF, unsubscribing as each headline resolves.
   ============================================================ */
.tb-r1 .trust-card{ contain:paint; transition:box-shadow var(--dur) var(--ease); }
.tb-r1 .trust-card:hover{ transform:none; box-shadow:var(--shadow-md); }
.tb-r1 .trust-card{ opacity:0; transition:opacity .45s var(--ease); }
.tb-r1.in .trust-card{ opacity:1; }
.tb-r1.in .trust-card:nth-child(2){ transition-delay:.1s; }

.tb-r1 h3{ position:relative; }
.tb-r1 h3 .w{ display:inline-block; white-space:nowrap; }
.tb-r1 h3 .ch{ display:inline-block; opacity:0; transform:translateY(7px);
  transition:opacity .34s linear, transform .42s cubic-bezier(.2,.9,.3,1); will-change:transform, opacity; }
.tb-r1.in h3 .ch{ opacity:1; transform:none; }
.tb-r1 .noise{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
  font-family:var(--font-mono); font-weight:500; font-size:22px; line-height:1.28; letter-spacing:-.01em;
  color:rgba(var(--cream-rgb),.34); opacity:0; transition:opacity .3s linear; }
.tb-r1 .trust-card.alt .noise{ color:rgba(var(--charcoal-rgb),.3); }
.tb-r1 .noise.on{ opacity:1; }

.tb-r1 .trust-card h3{ max-width:min(320px, 60%); }
.tb-r1 .trust-card p{ max-width:min(340px, 62%); }
.tb-r1 .stamps{ position:absolute; right:34px; bottom:34px; z-index:3; display:flex; flex-direction:column; gap:9px; align-items:flex-end; max-width:34%; }
.tb-r1 .stamps b{
  font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  padding:7px 12px 6px; border:1.5px solid var(--sage); color:var(--sage);
  opacity:0; transform:scale(1.85) rotate(-8deg); transform-origin:right center;
  will-change:transform, opacity; backface-visibility:hidden;
  transition:opacity .14s linear, transform .34s cubic-bezier(.18,1.5,.45,1);
}
.tb-r1 .trust-card.alt .stamps b{ border-color:var(--accent); color:var(--accent); }
/* .stamped is latched by script on first hover and only released when
   the band scrolls out of view, so the credentials stay put */
.tb-r1 .trust-card:hover .stamps b,
.tb-r1 .trust-card.stamped .stamps b{ opacity:1; transform:none; }
.tb-r1 .trust-card:hover .stamps b:nth-child(2),
.tb-r1 .trust-card.stamped .stamps b:nth-child(2){ transition-delay:.1s; }
.tb-r1 .trust-card:hover .stamps b:nth-child(3),
.tb-r1 .trust-card.stamped .stamps b:nth-child(3){ transition-delay:.2s; }
.tb-r1 .trust-card:hover .stamps b:nth-child(4),
.tb-r1 .trust-card.stamped .stamps b:nth-child(4){ transition-delay:.3s; }
.tb-r1 .cta-line{ opacity:0; transition:opacity .4s linear 1.05s; }
.tb-r1.in .cta-line{ opacity:1; }
/* Below the shipped 1440px the cards get too narrow for an overlaid stamp
   column, so the stamps drop into the flow as a row under the paragraph
   instead of disappearing. */
@media (max-width:1180px){
  .tb-r1 .stamps{ position:static; flex-direction:row; flex-wrap:wrap; justify-content:flex-start;
    align-items:center; max-width:none; gap:7px; margin:-6px 0 20px; order:1; }
  .tb-r1 .cta-line{ order:2; }
  .tb-r1 .stamps b{ transform-origin:left center; }
  .tb-r1 .trust-card h3, .tb-r1 .trust-card p{ max-width:340px; }
  .tb-r1 .trust-card p{ margin-bottom:16px; }
}
/* No reduced-motion downgrade here on purpose: the band must read exactly
   like the approved R1 option, spring and stagger included. */


/* ============================================================
   CLOSING STRIP — drifting ground + oversized watermark
   The wave ground never stops moving; an outlined GLORY slides
   in behind the copy and stays. Copy lifts in per character
   (transform/opacity only). Buttons take the hero's cut-corner
   motif so the page's first and last CTAs match.
   ============================================================ */
.cta-c2{ position:relative; }
.cta-c2 > .pattern-veil{ animation:csDrift 30s linear infinite; }
@keyframes csDrift{ from{ background-position:0 0; } to{ background-position:-420px 210px; } }
.cta-c2 .mark{
  position:absolute; right:-2%; bottom:-14%; z-index:0; pointer-events:none;
  font-family:var(--font-display); font-weight:800; font-size:190px; line-height:.8; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px rgba(var(--espresso-rgb),.24);
  opacity:0; transform:translateX(44px); transition:opacity .8s linear, transform 1.1s var(--ease);
}
.cta-c2.in .mark{ opacity:1; transform:none; }
.cta-c2 h2{ position:relative; }
.cta-c2 h2 .w{ display:inline-block; white-space:nowrap; }
.cta-c2 h2 .ch{ display:inline-block; will-change:transform, opacity; }
.cta-c2 h2 .ch, .cta-c2 .lede, .cta-c2 .cta-acts{
  opacity:0; transform:translateY(12px);
  transition:opacity .4s linear, transform .55s var(--ease);
}
.cta-c2.in h2 .ch, .cta-c2.in .lede, .cta-c2.in .cta-acts{ opacity:1; transform:none; }
.cta-c2.in .lede{ transition-delay:.5s; }
.cta-c2.in .cta-acts{ transition-delay:.62s; }

/* cut-corner motif, same geometry and behaviour as the hero pair */
.cta-c2 .cta-acts .btn{
  --cut: 10px;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                    100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.cta-c2 .cta-acts .btn-outline{ clip-path:none; }
.cta-c2 .cta-acts .btn-outline:hover,
.cta-c2 .cta-acts .btn-outline:focus-visible{
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut),
                    100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
@media (max-width:1100px){ .cta-c2 .mark{ font-size:130px; bottom:-8%; } }


/* ============ CATEGORY SHOWCASE CAROUSEL ============ */
.showcase{ position:relative; background:var(--charcoal); overflow:hidden; padding:44px 0 44px; }
.showcase .showcase-veil{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--pattern-dark); background-size:120px 120px; opacity:.45; }
.showcase .sc-head{ position:relative; z-index:2; width:min(1296px, calc(100% - 144px)); margin:0 auto 26px; text-align:center; }
/* eyebrow on the dark ground: the light-on-dark sage, not --accent */
.showcase .sc-head .eyebrow{ justify-content:center; color:var(--sage); }
.showcase .sc-head .eyebrow::before{ background:var(--sage); }
.showcase .sc-head h2{ color:var(--cream); font-size:32px; line-height:1.1; letter-spacing:-.02em; margin:10px 0 0; }

.sc-stage{ position:relative; z-index:1; height:400px; perspective:1600px; }
.sc-card{ position:absolute; left:50%; top:0; width:290px; height:390px; display:flex; flex-direction:column;
  background:#201f1c; border:1px solid rgba(var(--cream-rgb),.14); overflow:hidden; transform-style:preserve-3d; cursor:pointer;
  transition:transform .48s cubic-bezier(.22,.61,.36,1), opacity .4s linear; will-change:transform, opacity; }
.sc-card[data-pos="0"]{ transform:translateX(-50%) translateZ(0) rotateY(0deg) scale(1); opacity:1; z-index:5; cursor:default; }
.sc-card[data-pos="-1"]{ transform:translateX(-160%) translateZ(-230px) rotateY(16deg) scale(.96); opacity:.62; z-index:4; }
.sc-card[data-pos="1"]{ transform:translateX(60%) translateZ(-230px) rotateY(-16deg) scale(.96); opacity:.62; z-index:4; }
.sc-card[data-pos="-2"]{ transform:translateX(-262%) translateZ(-460px) rotateY(22deg) scale(.92); opacity:.28; z-index:3; }
.sc-card[data-pos="2"]{ transform:translateX(162%) translateZ(-460px) rotateY(-22deg) scale(.92); opacity:.28; z-index:3; }
.sc-card[data-pos="hide"]{ transform:translateX(-50%) translateZ(-700px) scale(.9); opacity:0; z-index:1; pointer-events:none; }
/* a card crossing the wrap point is repositioned with no transition, so the
   long slide behind the stack is never seen */
.sc-card.warp{ transition:none !important; }
.sc-card[data-pos="-1"]:hover, .sc-card[data-pos="1"]:hover{ opacity:.85; }

.sc-body{ flex:1; min-height:0; position:relative; }
.sc-body .ph-photo{ position:absolute; inset:0; width:100%; height:100%; }
.sc-shade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.14) 44%, rgba(0,0,0,.82) 100%); }
.sc-copy{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; }
.sc-copy h3{ color:var(--cream); font-size:30px; line-height:.98; letter-spacing:-.03em; margin:0; }
.sc-copy em{ font-style:normal; display:block; font-size:13px; font-weight:500; color:rgba(var(--cream-rgb),.7); margin-top:8px; }
.sc-copy .sc-spec{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:rgba(var(--cream-rgb),.66); margin-top:14px; }
.sc-mark{ position:absolute; top:17px; left:22px; z-index:3; font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.2em; color:var(--cream); }
/* small cut-corner request button — top-right of the card only */
.sc-req{ position:absolute; top:14px; right:14px; z-index:4; display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px 7px; background:var(--cream); color:var(--charcoal);
  font-family:var(--font-display); font-size:11.5px; font-weight:600; white-space:nowrap; cursor:pointer;
  clip-path:polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition:background .25s var(--ease), transform .25s var(--ease); }
.sc-req svg{ width:11px; height:11px; transition:transform .25s var(--ease); }
.sc-req:hover{ background:var(--sage); }
.sc-req:hover svg{ transform:translateX(3px); }

.sc-rail{ position:relative; }
.sc-foot{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px, calc(50% - 620px)); pointer-events:none; }
.sc-foot .sc-btn{ pointer-events:auto; width:48px; height:48px; background:rgba(26,25,23,.55); }
.sc-btn{ display:grid; place-items:center; width:38px; height:38px; background:none; cursor:pointer;
  border:1px solid rgba(var(--cream-rgb),.28); color:var(--cream);
  transition:border-color .25s var(--ease), background .25s var(--ease); }
.sc-btn:hover{ border-color:var(--sage); background:rgba(62,91,74,.3); }
.sc-btn svg{ width:18px; height:18px; }
.sc-dots{ display:flex; gap:9px; }
.sc-dot{ width:7px; height:7px; background:rgba(var(--cream-rgb),.28); cursor:pointer;
  transition:background .3s var(--ease), transform .3s var(--ease); }
.sc-dot.on{ background:var(--sage); transform:scale(1.5); }

/* chat quick options are plain links (chat not connected to a live agent yet) */
.chat-quick a{ display:block; text-align:left; background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13px; color:var(--charcoal); text-decoration:none; transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.chat-quick a:hover{ border-color:var(--charcoal); background:var(--cream); }
.chat-body{ max-height:none; }
.showcase .sc-head .sc-intro{ color:rgba(var(--cream-rgb),.75); max-width:640px; margin:12px auto 0; font-size:15px; line-height:1.55; }
.tb-r1 .trust-card:not(.alt) p{ max-width:560px; }
.tb-r1 .trust-card p.tb-note{ font-size:12.5px; opacity:.62; margin-top:-12px; }
.hero h1{ font-size:clamp(40px, 4.4vw, 64px); }
.testi-card.is-placeholder p, .testi-card.is-placeholder strong, .testi-card.is-placeholder span{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; }
.main-nav a{ white-space:nowrap; }
.main-nav ul{ gap:28px; }
.header-cta{ white-space:nowrap; }