/* ══ SPA ROUTER ══ */
.page-view { display:none !important; }
.page-view.active { display:block !important; }

/* ══ PAGE TRANSITION ══ */
.page-view.entering {
  animation: pageIn 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes pageIn {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══ HOME PAGE CSS ══ */

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS (DESIGN.md is the source of truth)
═══════════════════════════════════════════════════════════ */
:root{
  /* Color — OKLCH primary, hex fallback */
  --ink:           oklch(98% 0 0);
  --ink-2:         oklch(82% 0 0);
  --ink-3:         oklch(64% 0 0);
  --ink-4:         oklch(46% 0 0);
  --bg:            oklch(11% 0 0);
  --bg-2:          oklch(16% 0 0);
  --bg-3:          oklch(21% 0 0);
  --bg-ink:        oklch(96% 0.006 60);
  --ink-on-light:  oklch(15% 0 0);
  --red:           oklch(48% 0.20 27);
  --red-hot:       oklch(58% 0.22 28);
  --red-deep:      oklch(33% 0.16 28);
  --gold:          oklch(74% 0.13 75);
  --molten:        oklch(67% 0.20 45);

  /* Legacy aliases — kept for backward compatibility while components migrate */
  --red2:          var(--red-hot);
  --dark:          #0a0a0a;
  --dark2:         #161616;
  --light:         #fbfbfb;
  --grey:          #969696;

  /* Type */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-ui:      'Barlow Condensed', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-3xs:  0.625rem;
  --text-2xs:  0.75rem;
  --text-xs:   0.8125rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.333rem;
  --text-xl:   1.777rem;
  --text-2xl:  clamp(1.75rem,  3vw,  2.37rem);
  --text-3xl:  clamp(2.25rem,  4vw,  3.16rem);
  --text-4xl:  clamp(2.75rem,  5vw,  4.21rem);
  --text-5xl:  clamp(3.5rem,   7vw,  5.61rem);
  --text-display: clamp(4rem, 10vw, 6rem);

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: clamp(96px, 12vw, 160px);
  --space-11: clamp(120px, 16vw, 220px);

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 360ms;
  --dur-4: 600ms;
  --dur-5: 900ms;
  --dur-6: 1400ms;

  /* Layout */
  --container: 1240px;
  --gutter:    clamp(24px, 4vw, 72px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Barlow',sans-serif;background:var(--dark);color:var(--light);overflow-x:hidden;}

/* ══ NAV ══ */
nav{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  height:70px;display:flex;align-items:center;
  background:rgba(10,10,10,0.25);
  backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background 0.5s,box-shadow 0.5s,backdrop-filter 0.5s,border-color 0.5s;
}
nav.scrolled{background:rgba(255,255,255,0.32);backdrop-filter:blur(50px) saturate(2.0);-webkit-backdrop-filter:blur(50px) saturate(2.0);box-shadow:0 1px 20px rgba(0,0,0,0.06),0 0 0 0.5px rgba(255,255,255,0.12);border-bottom:1px solid rgba(0,0,0,0.06);}

/* Corporate logo tab — WHITE background, wider */
.nav-logo-tab{
  display:flex;align-items:center;justify-content:center;
  align-self:stretch;
  background:rgba(255,255,255,0.95);
  padding:0 56px 0 44px;
  clip-path:polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
  flex-shrink:0;
  border-bottom:3px solid var(--red);
  transition:all 0.35s;
  min-width:240px;
}
nav.scrolled .nav-logo-tab{
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
  border-bottom-color:transparent;
  padding:0 40px 0 32px;
  background:rgba(255,255,255,0.95);
}
.nav-logo-tab img{height:50px;width:auto;display:block;}

.nav-links{
  flex:1;display:flex;align-items:center;justify-content:center;
  gap:44px;list-style:none;
}
.nav-links a{
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;
  color:rgba(255,255,255,0.8);text-decoration:none;
  position:relative;padding-bottom:4px;transition:color 0.3s;
}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 0.3s;}
.nav-links a:hover{color:#fff;}.nav-links a:hover::after{transform:scaleX(1);}
nav.scrolled .nav-links a{color:rgba(20,20,20,0.65);}
nav.scrolled .nav-links a:hover{color:#111;}

.nav-right{display:flex;align-items:center;gap:12px;padding-right:40px;}
.li-btn{display:flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.6);text-decoration:none;border:1px solid rgba(255,255,255,0.12);padding:8px 16px;border-radius:10px;background:rgba(255,255,255,0.06);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);transition:color var(--dur-2) var(--ease-out-quart),border-color var(--dur-2) var(--ease-out-quart),background var(--dur-2) var(--ease-out-quart);}
.li-btn svg{width:14px;height:14px;fill:#0077B5;flex-shrink:0;}
.li-btn:hover{color:#fff;border-color:rgba(0,119,181,0.4);background:rgba(0,119,181,0.12);}
nav.scrolled .li-btn{color:rgba(20,20,20,0.55);border-color:rgba(0,0,0,0.08);background:rgba(0,0,0,0.04);}
nav.scrolled .li-btn:hover{color:#111;border-color:#0077B5;background:rgba(0,119,181,0.08);}
.btn-quote{background:rgba(192,0,12,0.35);color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;padding:10px 26px;text-decoration:none;border-radius:10px;border:1px solid rgba(255,255,255,0.15);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);transition:background var(--dur-2) var(--ease-out-quart),border-color var(--dur-2) var(--ease-out-quart),box-shadow var(--dur-2) var(--ease-out-quart);}
.btn-quote:hover{background:rgba(232,0,15,0.5);border-color:rgba(255,255,255,0.22);box-shadow:0 4px 20px rgba(192,0,12,0.2),inset 0 1px 0 rgba(255,255,255,0.2);}

/* ══ HERO ══ */
.hero{height:100vh;min-height:680px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.hero-bg{position:absolute;inset:0;overflow:hidden;will-change:transform;}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(0.72) contrast(1.08) saturate(1.12);opacity:0;transition:opacity 1.2s ease;will-change:opacity;contain:strict;}
.hero-video.active{opacity:1;}
@keyframes hzoom{from{transform:scale(1);}to{transform:scale(1.07);}}
.hero-ov1{position:absolute;inset:0;background:linear-gradient(110deg,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.78) 38%,rgba(0,0,0,0.55) 65%,rgba(0,0,0,0.35) 100%);}
.hero-ov2{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.55) 0%,transparent 22%,transparent 68%,rgba(0,0,0,0.82) 100%);}

.hero-glow{position:absolute;bottom:-80px;right:6%;width:680px;height:580px;background:radial-gradient(ellipse,rgba(192,0,12,0.22) 0%,rgba(255,70,0,0.07) 45%,transparent 68%);pointer-events:none;animation:glow 7s ease-in-out infinite alternate;}
@keyframes glow{from{opacity:0.55;transform:scale(0.9);}to{opacity:1;transform:scale(1.1);}}
.embers{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.ember{position:absolute;border-radius:50%;opacity:0;animation:rise linear infinite;}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(1);}10%{opacity:1;}80%{opacity:0.3;}100%{opacity:0;transform:translateY(-75vh) translateX(var(--dx)) scale(0.1);}}
.hero-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;padding:0 24px;}
.hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(64px,10vw,128px);letter-spacing:-0.04em;line-height:0.92;margin-bottom:14px;text-wrap:balance;}
/* The cascade controls the reveal — no top-level animation needed on .hero-title anymore. */
/* Elegant shimmer text */
.hero-title .psm{
  color: var(--red);
  position: relative;
  text-shadow: 0 0 80px rgba(192,0,12,0.25);
}
.hero-title .psm::after {
  content: 'PSM';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 35%,
    rgba(255,255,255,0.12) 48%,
    rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.12) 52%,
    transparent 65%,
    transparent 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSweep 6s 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerSweep {
  0%, 100% { background-position: 250% 0; }
  40%, 60% { background-position: -50% 0; }
}
.hero-title .ore{
  color: rgba(255,255,255,0.92);
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.hero-tag{font-family:var(--font-body);font-size:clamp(13px,1.5vw,17px);font-weight:300;letter-spacing:0.04em;color:rgba(255,255,255,0.85);text-shadow:0 2px 18px rgba(0,0,0,0.95);margin-bottom:28px;animation:fup 1s 0.28s var(--ease-out-expo) both;}
.hero-rule{width:56px;height:1px;background:var(--red);margin:0 auto 26px;animation:fup 1s 0.36s var(--ease-out-expo) both;}
.hero-desc{max-width:540px;margin:0 auto 36px;text-align:center;animation:fup 1s 0.42s var(--ease-out-expo) both;}
.hero-statement-q{font-family:var(--font-body);font-size:var(--text-md);font-style:italic;font-weight:300;letter-spacing:0;text-transform:none;color:var(--red-hot);margin:0 0 var(--space-3);text-shadow:0 1px 10px rgba(0,0,0,0.85);}
.hero-statement-headline{font-family:var(--font-display);font-size:clamp(28px,3.4vw,44px);font-weight:400;letter-spacing:-0.02em;line-height:1;color:#fff;margin:0 0 var(--space-3);text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,0.9);}
.hero-statement-headline span{color:var(--red);}
.hero-statement-tag{font-family:var(--font-body);font-size:var(--text-sm);font-weight:300;letter-spacing:0;text-transform:none;color:rgba(255,255,255,0.6);margin:0;text-shadow:0 1px 10px rgba(0,0,0,0.85);}
.hero-cta{animation:fup 1s 0.52s var(--ease-out-expo) both;}
@keyframes fup{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
/* Primary button: solid red surface + skewed-rhombus clip.
   Canonical rule defined further down (about-page CSS block).
   The glassmorphism duplicate that used to live here is retired. */
.scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;animation:fup 1s 0.9s var(--ease-out-expo) both;}
.scroll-cue span{font-family:'Barlow Condensed',sans-serif;font-size:8px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.28);}
.scroll-arrow{width:16px;height:16px;border-right:1px solid rgba(192,0,12,0.55);border-bottom:1px solid rgba(192,0,12,0.55);transform:rotate(45deg);animation:scrollHintNudge 2.4s cubic-bezier(0.16,1,0.3,1) infinite;}
@keyframes scrollHintNudge{0%,100%{transform:rotate(45deg) translateY(0);opacity:0.4;}50%{transform:rotate(45deg) translateY(5px);opacity:1;}}

/* ══ TICKER ══ */
.ticker{background:var(--red);padding:12px 0;overflow:hidden;white-space:nowrap;}
.ticker-inner{display:inline-flex;animation:tick 44s linear infinite;will-change:transform;}
@keyframes tick{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.t-item{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.85);padding:0 28px;display:flex;align-items:center;gap:14px;}
.t-dot{width:3px;height:3px;background:rgba(255,255,255,0.3);border-radius:50%;flex-shrink:0;}

/* ══ PRODUCTS ══ */
.products-section{padding:110px 60px;background:var(--dark2);content-visibility:auto;contain-intrinsic-size:auto 800px;}
.sec-header{text-align:center;max-width:620px;margin:0 auto 72px;}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:var(--red);display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;}
.eyebrow::before,.eyebrow::after{content:'';flex:1;max-width:30px;height:1px;background:var(--red);}
.sec-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(36px,5vw,58px);line-height:0.95;letter-spacing:-0.02em;color:#fff;margin-bottom:12px;text-wrap:balance;}
.sec-title .r{color:var(--red);}
.sec-sub{font-size:14px;font-weight:300;line-height:1.85;color:rgba(240,237,232,0.45);}

.products-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
  max-width:1000px;
  margin:0 auto;
  align-items:start;
}

/* ══ BAG CARD — uses your actual label image ══ */
.prod-card{
  position:relative;text-decoration:none;display:flex;flex-direction:column;
  transition:transform var(--dur-4) var(--ease-out-expo);
  will-change:transform;contain:layout style;
}
@media (hover: hover) and (pointer: fine){
  .prod-card:hover{transform:translateY(-14px);}
}
.prod-card:active{transform:translateY(0) scale(0.98);transition-duration:80ms;}

/* The bag image wrapper — fixed aspect ratio matching real bag (1186:1770 ≈ 2:3) */
.bag-img-wrap{
  position:relative;
  width:100%;
  aspect-ratio: 1186 / 1770;   /* exact pixel ratio from your screenshots */
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  transition:box-shadow 0.45s;
}
@media (hover: hover) and (pointer: fine){
  .prod-card:hover .bag-img-wrap{
    box-shadow:0 40px 100px rgba(0,0,0,0.8), 0 0 0 1px rgba(192,0,12,0.2), 0 0 50px rgba(192,0,12,0.12);
  }
}
.bag-img-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  display:block;
}

/* Ground shadow */
.bag-shadow{
  position:absolute;bottom:-18px;left:10%;right:10%;
  height:28px;
  background:radial-gradient(ellipse,rgba(0,0,0,0.7) 0%,transparent 70%);
  transition:all 0.45s;pointer-events:none;
}
@media (hover: hover) and (pointer: fine){
  .prod-card:hover .bag-shadow{bottom:-24px;left:14%;right:14%;opacity:0.55;}
}

/* Hover badge */
.bag-badge{
  position:absolute;top:12px;right:12px;z-index:5;
  background:rgba(8,8,8,0.85);border:1px solid rgba(192,0,12,0.5);
  font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--red);
  padding:5px 14px;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%);
  opacity:0;transform:translateY(-4px);transition:all 0.3s;
}
@media (hover: hover) and (pointer: fine){
  .prod-card:hover .bag-badge{opacity:1;transform:translateY(0);}
}

/* Card text below */
.prod-info{padding:22px 4px 4px;}
.prod-name{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:#fff;line-height:1;margin-bottom:6px;}
.prod-desc{font-size:13px;color:var(--grey);line-height:1.65;margin-bottom:10px;}
.prod-link{display:inline-flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);border-bottom:1px solid var(--red);padding-bottom:2px;transition:gap 0.3s;}
@media (hover: hover) and (pointer: fine){
  .prod-card:hover .prod-link{gap:12px;}
}

/* ══ WHY CHOOSE US — clean corporate ══ */
.why-section{padding:110px 60px;background:#fff;content-visibility:auto;contain-intrinsic-size:auto 900px;}
.why-header{text-align:center;max-width:640px;margin:0 auto 64px;}
.why-header .eyebrow{color:var(--red);}
.why-header .eyebrow::before,.why-header .eyebrow::after{background:var(--red);}
.why-header .sec-title{color:#111;}
.why-header .sec-sub{color:#666;}

/* 6-card grid — clean, no sci-fi */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  max-width:1080px;
  margin:0 auto 80px;
  background:#e8e8e8;
  border:1px solid #e8e8e8;
}
.why-card{
  background:#fff;
  padding:40px 36px;
  display:flex;flex-direction:column;gap:16px;
  transition:background 0.3s;
  position:relative;
}
.why-card:hover{background:#fafafa;}
.why-card::after{
  content:'';position:absolute;top:0;left:36px;right:36px;
  height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.why-card:hover::after{transform:scaleX(1);}
.wc-num{
  font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:3px;
  color:var(--red);
}
.wc-icon-row{
  width:44px;height:44px;
  border:1.5px solid #ddd;
  display:flex;align-items:center;justify-content:center;
  border-radius:2px;
  transition:border-color 0.3s,background 0.3s;
}
.why-card:hover .wc-icon-row{border-color:var(--red);background:rgba(192,0,12,0.04);}
.wc-icon-row svg{width:20px;height:20px;fill:none;stroke:#333;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke 0.3s;}
.why-card:hover .wc-icon-row svg{stroke:var(--red);}
.wc-body h4{
  font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;color:#111;margin-bottom:6px;
}
.wc-body p{font-size:13.5px;color:#666;line-height:1.75;}

/* Tagline strip */
.why-strip{
  max-width:1080px;margin:0 auto;
  background:#111;
  padding:36px 52px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.why-strip-txt .t1{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(24px,3vw,40px);
  letter-spacing:2px;color:#fff;line-height:1;
}
.why-strip-txt .t1 span{color:var(--red);}
.why-strip-txt .t2{
  font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:300;
  letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.35);margin-top:6px;
}
.why-strip .btn-primary{flex-shrink:0;}

/* ══ FOOTER ══ */
footer{background:#0a0a0a;border-top:1px solid #1a1a1a;padding:72px 60px 0;}
.footer-inner{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:60px;max-width:1200px;margin:0 auto;padding-bottom:56px;
  border-bottom:1px solid #1e1e1e;
}
.footer-brand{}
.footer-logo{width:110px;height:110px;display:block;margin-bottom:24px;background:#fff;border-radius:50%;padding:14px;object-fit:contain;box-shadow:0 4px 24px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.06);}
.footer-tagline{font-size:13px;font-weight:300;line-height:1.8;color:rgba(255,255,255,0.38);max-width:240px;margin-bottom:24px;}
.footer-social{display:flex;gap:10px;}
.social-btn{
  width:36px;height:36px;border:1px solid #2a2a2a;
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--dur-2) var(--ease-out-quart),background var(--dur-2) var(--ease-out-quart),transform var(--dur-1) var(--ease-out-quart);
  will-change:transform;
}
.social-btn svg{width:15px;height:15px;fill:rgba(255,255,255,0.45);transition:fill var(--dur-2) var(--ease-out-quart);}
@media (hover: hover) and (pointer: fine){
  .social-btn:hover{border-color:#0077B5;background:rgba(0,119,181,0.1);}
  .social-btn:hover svg{fill:#0077B5;}
}
.social-btn:active{transform:scale(0.94);transition-duration:80ms;}

.footer-col h5{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.3);
  margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #1e1e1e;
}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{
  font-size:13.5px;color:rgba(255,255,255,0.5);text-decoration:none;
  transition:color var(--dur-2) var(--ease-out-quart);display:flex;align-items:center;gap:8px;
}
.footer-col ul li a::before{content:'';width:12px;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease-out-quart);flex-shrink:0;}
@media (hover: hover) and (pointer: fine){
  .footer-col ul li a:hover{color:#fff;}
  .footer-col ul li a:hover::before{transform:scaleX(1);}
}

.footer-contact-item{display:flex;gap:14px;margin-bottom:18px;align-items:flex-start;}
.fci-icon{
  width:34px;height:34px;flex-shrink:0;
  border:1px solid #222;
  display:flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.fci-icon svg{width:14px;height:14px;fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.fci-text{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.6;}
.fci-text strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.25);margin-bottom:3px;}
.fci-text a{color:rgba(255,255,255,0.5);text-decoration:none;transition:color var(--dur-2) var(--ease-out-quart);}
@media (hover: hover) and (pointer: fine){
  .fci-text a:hover{color:#fff;}
}

.footer-bottom{
  max-width:1200px;margin:0 auto;
  padding:20px 0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.footer-copy{font-size:12px;color:rgba(255,255,255,0.2);letter-spacing:0.5px;}
.footer-copy span{color:rgba(255,255,255,0.35);}
.footer-legal{display:flex;gap:24px;}
.footer-legal a{font-size:12px;color:rgba(255,255,255,0.2);text-decoration:none;transition:color var(--dur-2) var(--ease-out-quart);}
@media (hover: hover) and (pointer: fine){
  .footer-legal a:hover{color:rgba(255,255,255,0.5);}
}



#scrollTop{position:fixed;bottom:26px;right:26px;width:42px;height:42px;background:var(--red);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:999;color:#fff;font-size:18px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-out-quart),background var(--dur-2) var(--ease-out-quart),transform var(--dur-1) var(--ease-out-quart);will-change:transform;}
#scrollTop.show{opacity:1;pointer-events:all;}
@media (hover: hover) and (pointer: fine){#scrollTop:hover{background:var(--red-hot);}}
#scrollTop:active{transform:scale(0.94);transition-duration:80ms;}


/* ══ ABOUT PAGE CSS ══ */
:root{
  --red:#C0000C; --red2:#E8000F;
  --dark:#080808; --dark2:#0f0f0f;
  --light:#F0EDE8; --grey:#7A7F8A;
  --ink:#111111; --paper:#F7F5F2;
}
body{font-family:'Barlow',sans-serif;background:#fff;color:var(--ink);overflow-x:hidden;}

/* ══ NAV (same as homepage) ══ */
nav{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  height:70px;display:flex;align-items:stretch;
  background:rgba(8,8,8,0.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.06);
  transition:background 0.4s,box-shadow 0.4s;
}
nav.scrolled{background:#fff;box-shadow:0 2px 20px rgba(0,0,0,0.1);border-bottom-color:transparent;}
.nav-logo-tab{
  display:flex;align-items:center;justify-content:center;
  background:#fff;padding:0 56px 0 44px;
  clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);
  flex-shrink:0;border-bottom:3px solid var(--red);
  
  transition:all 0.35s;min-width:240px;
}
nav.scrolled .nav-logo-tab{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);border-bottom-color:transparent;padding:0 40px 0 32px;}
.nav-links{flex:1;display:flex;align-items:center;justify-content:center;gap:44px;list-style:none;}
.nav-links a{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:rgba(255,255,255,0.8);text-decoration:none;position:relative;padding-bottom:4px;transition:color 0.3s;}
.nav-links a:hover,.nav-links a.active{color:#fff;}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);}
nav.scrolled .nav-links a:hover,nav.scrolled .nav-links a.active{color:#111;}
.btn-quote:hover{background:var(--red2);}

/* ══════════════════════════════
   HERO — editorial split layout
══════════════════════════════ */
.about-hero{
  height:100vh;min-height:700px;
  display:grid;grid-template-columns:1fr 1fr;
  padding-top:70px;
}

/* Left: text panel — !important to override any WP Customizer additional-CSS rule
   that previously injected a background-image url onto .ah-left for the old hero design */
.ah-left{
  background:var(--ink) !important;
  background-image:none !important;
  background-color:var(--ink) !important;
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 72px;
  position:relative;overflow:hidden;
}

/* ══════════════════════════════
   ABOUT — INTRO BAND (below hero)
══════════════════════════════ */
.about-intro {
  background: var(--paper);
  padding: 110px 60px 100px;
  border-bottom: 1px solid #eee;
}
.ai-inner {
  max-width: 920px;
  margin: 0 auto;
}
.ai-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.ai-eyebrow::after {
  content: '';
  width: 50px;
  height: 1px;
  background: var(--red);
}
.ai-lead {
  font-family: 'Barlow', sans-serif;
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: 0.2px;
}
.ai-lead strong {
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--red);
  padding-bottom: 1px;
}
@media (max-width: 768px) {
  .about-intro { padding: 64px 24px 60px; }
  .ai-lead { font-size: 18px; }
}
/* Subtle texture */
.ah-left::before{
  content:'';position:absolute;inset:0;
  background-image:repeating-linear-gradient(
    0deg,transparent,transparent 59px,rgba(255,255,255,0.02) 60px
  ),repeating-linear-gradient(
    90deg,transparent,transparent 59px,rgba(255,255,255,0.02) 60px
  );
  pointer-events:none;
}
.ah-eyebrow{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:5px;text-transform:uppercase;color:var(--red);
  display:flex;align-items:center;gap:14px;margin-bottom:28px;
  opacity:0;transform:translateY(20px);animation:fadeup 0.9s 0.2s both;
}
.ah-eyebrow::after{content:'';flex:1;height:1px;background:rgba(192,0,12,0.4);max-width:50px;}
.ah-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(64px,8vw,112px);
  line-height:0.88;letter-spacing:2px;
  color:#fff;margin-bottom:32px;
  opacity:0;transform:translateY(28px);animation:fadeup 0.9s 0.35s both;
}
.ah-title .r{color:var(--red);}
.ah-rule{width:40px;height:2px;background:var(--red);margin-bottom:28px;opacity:0;animation:fadeup 0.9s 0.5s both;}
.ah-lead{
  font-family:'Barlow',sans-serif;font-size:15px;font-weight:300;line-height:1.9;
  color:rgba(255,255,255,0.55);max-width:420px;
  opacity:0;transform:translateY(20px);animation:fadeup 0.9s 0.6s both;
}
/* Vertical label on left edge */
.ah-vert{
  position:absolute;left:28px;top:50%;transform:translateY(-50%) rotate(-90deg);
  font-family:'Barlow Condensed',sans-serif;font-size:9px;font-weight:700;
  letter-spacing:5px;text-transform:uppercase;color:rgba(255,255,255,0.12);
  white-space:nowrap;
}

/* Right: photo panel */
.ah-right{
  position:relative;overflow:hidden;
}
.ah-right img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1.05);
  animation:shrink 1.4s 0s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes shrink{to{transform:scale(1);}}
/* Red overlay corner accent */
.ah-right::after{
  content:'';position:absolute;bottom:0;left:0;
  width:5px;height:40%;background:var(--red);
}
/* Year badge */
.ah-year{
  position:absolute;bottom:44px;right:44px;
  background:var(--red);
  padding:18px 22px;
  font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:3px;
  color:rgba(255,255,255,0.9);text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.ah-year strong{font-size:36px;letter-spacing:0;line-height:1;color:#fff;display:block;}
@keyframes fadeup{from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}}

/* ══════════════════════════════
   STAT BAR
══════════════════════════════ */
.stat-bar{
  background:var(--red);
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:100%;
}
.stat-item{
  padding:36px 44px;
  border-right:1px solid rgba(255,255,255,0.15);
  display:flex;flex-direction:column;gap:4px;
}
.stat-item:last-child{border-right:none;}
.stat-num{
  font-family:'Bebas Neue',sans-serif;font-size:52px;letter-spacing:-1px;
  color:#fff;line-height:1;
}
.stat-label{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.6);
}

/* ══════════════════════════════
   WHO WE ARE — full narrative
══════════════════════════════ */
.who-section{
  padding:120px 0;
  background:#fff;
}
.who-inner{
  max-width:1200px;margin:0 auto;padding:0 60px;
  display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:start;
}
.who-left{
  position:sticky;top:120px;
}
.section-label{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:5px;text-transform:uppercase;color:var(--red);
  display:flex;align-items:center;gap:12px;margin-bottom:28px;
}
.section-label::before{content:'';width:28px;height:1px;background:var(--red);}
.who-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(48px,5.5vw,72px);letter-spacing:1px;line-height:0.92;
  color:var(--ink);margin-bottom:32px;
}
.who-title span{color:var(--red);}
/* Pull quote — top accent rule, not a side stripe */
.pull-quote{
  border-top:2px solid var(--red);
  padding:24px 0 0 0;
  margin-top:40px;
}
.pull-quote p{
  font-family:'Playfair Display',serif;font-size:17px;font-style:italic;
  color:#444;line-height:1.75;
}
.pull-quote cite{
  display:block;margin-top:12px;
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:var(--grey);font-style:normal;
}
.who-right{}
.who-para{
  font-size:16px;font-weight:300;line-height:2;color:#444;
  margin-bottom:28px;
}
.who-para strong{font-weight:600;color:var(--ink);}
/* Highlight sentence */
.who-highlight{
  font-family:'Playfair Display',serif;font-size:20px;font-style:italic;
  color:var(--ink);line-height:1.65;
  padding:32px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;
  margin:36px 0;
}
.who-highlight span{color:var(--red);font-style:normal;font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;vertical-align:middle;}

/* ══════════════════════════════
   PHILOSOPHY — dark section, 3 principles
══════════════════════════════ */
.phil-section{
  background:var(--ink);
  padding:120px 60px;
  position:relative;overflow:hidden;
}
/* Faint large watermark */
.phil-section::before{
  content:'PSM';
  position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  font-family:'Bebas Neue',sans-serif;font-size:420px;letter-spacing:-10px;
  color:rgba(255,255,255,0.02);line-height:1;pointer-events:none;user-select:none;
}
.phil-inner{max-width:1200px;margin:0 auto;}
.phil-header{margin-bottom:72px;}
.phil-header .section-label{color:var(--red);}
.phil-header .section-label::before{background:var(--red);}
.phil-title{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,6vw,80px);
  letter-spacing:2px;color:#fff;line-height:0.92;
}
.phil-title span{color:var(--red);}
.phil-intro{
  max-width:560px;margin-top:24px;
  font-size:15px;font-weight:300;line-height:1.9;color:rgba(255,255,255,0.45);
}

/* 3-principle layout */
.phil-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:rgba(255,255,255,0.06);
  margin-bottom:80px;
}
.phil-card{
  background:var(--ink);
  padding:48px 40px;
  position:relative;overflow:hidden;
  transition:background 0.4s;
}
.phil-card:hover{background:#0f0f0f;}
.phil-card::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.phil-card:hover::before{transform:scaleX(1);}
.phil-num{
  font-family:'Bebas Neue',sans-serif;font-size:72px;letter-spacing:-2px;
  color:rgba(255,255,255,0.06);line-height:1;margin-bottom:24px;
  transition:color 0.4s;
}
.phil-card:hover .phil-num{color:rgba(192,0,12,0.15);}
.phil-icon{
  width:48px;height:48px;border:1px solid rgba(255,255,255,0.12);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;border-radius:2px;transition:border-color 0.3s;
}
.phil-card:hover .phil-icon{border-color:rgba(192,0,12,0.4);}
.phil-icon svg{width:22px;height:22px;fill:none;stroke:rgba(255,255,255,0.5);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke 0.3s;}
.phil-card:hover .phil-icon svg{stroke:var(--red);}
.phil-h{
  font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;
  letter-spacing:1px;color:#fff;margin-bottom:16px;
}
.phil-p{
  font-size:14px;font-weight:300;line-height:1.85;color:rgba(255,255,255,0.45);
}
.phil-p strong{color:rgba(255,255,255,0.7);font-weight:500;}

/* Closing philosophy statement */
.phil-closing{
  border-top:1px solid rgba(255,255,255,0.07);
  padding-top:60px;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.phil-closing-quote{
  font-family:'Playfair Display',serif;font-size:22px;font-style:italic;
  color:rgba(255,255,255,0.7);line-height:1.65;
}
.phil-closing-quote span{color:var(--red);font-style:normal;}
.phil-closing-cta{}
.phil-closing-cta p{
  font-size:14px;font-weight:300;line-height:1.9;
  color:rgba(255,255,255,0.38);margin-bottom:28px;
}
.btn-primary{
  display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  padding:15px 42px;text-decoration:none;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  transition:background var(--dur-1) var(--ease-out-quart),transform var(--dur-1) var(--ease-out-quart);
  will-change:transform;
}
@media (hover: hover) and (pointer: fine){
  .btn-primary:hover{background:var(--red-hot);transform:translateY(-1px);}
}
.btn-primary:active{transform:translateY(0) scale(0.97);transition-duration:80ms;}

/* ══════════════════════════════
   ROOTS SECTION — geography + heritage
══════════════════════════════ */
.roots-section{
  padding:120px 60px;background:var(--paper);
}
.roots-inner{max-width:1200px;margin:0 auto;}
.roots-header{margin-bottom:72px;text-align:center;}
.roots-header .section-label{justify-content:center;}
.roots-header .section-label::before{display:none;}
.roots-header .section-label::after{content:'';width:28px;height:1px;background:var(--red);}
.roots-title{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,5.5vw,70px);
  letter-spacing:2px;color:var(--ink);line-height:0.92;
}
.roots-title span{color:var(--red);}
.roots-sub{font-size:15px;font-weight:300;line-height:1.85;color:#666;max-width:540px;margin:16px auto 0;}
.roots-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;
  background:#ddd;
}
.roots-card{
  background:var(--paper);
  padding:52px 48px;
  position:relative;
}
.roots-card-num{
  font-family:'Bebas Neue',sans-serif;font-size:120px;letter-spacing:-4px;
  color:rgba(0,0,0,0.04);position:absolute;bottom:-10px;right:32px;
  line-height:1;pointer-events:none;
}
.rc-state{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:4px;text-transform:uppercase;color:var(--red);margin-bottom:12px;
}
.rc-title{
  font-family:'Bebas Neue',sans-serif;font-size:36px;letter-spacing:1px;
  color:var(--ink);margin-bottom:20px;
}
.rc-body{font-size:14px;font-weight:300;line-height:1.85;color:#555;}
.rc-body strong{color:var(--ink);font-weight:600;}

/* ══════════════════════════════
   CLOSING TAGLINE BAND (About page)
══════════════════════════════ */
.about-tagline-band {
  background:var(--ink);
  color:#fff;
  padding:120px 60px 130px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.about-tagline-band::before {
  content:'';
  position:absolute;
  top:0; left:50%;
  width:1px; height:60px;
  background:linear-gradient(180deg, transparent, var(--red));
  transform:translateX(-50%);
}
.atb-inner {
  max-width:780px; margin:0 auto;
  position:relative; z-index:2;
}
.atb-rule {
  width:32px; height:2px; background:var(--red);
  margin:0 auto 36px;
}
.atb-line {
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(36px, 5vw, 60px);
  letter-spacing:3px;
  line-height:1.05;
  color:#fff;
  margin-bottom:24px;
}
.atb-line em {
  font-style:italic;
  font-family:'Barlow', serif;
  font-weight:300;
  letter-spacing:0;
  color:rgba(255,255,255,0.78);
  font-size:0.88em;
}
.atb-sub {
  font-family:'Barlow', sans-serif;
  font-size:14px;
  font-weight:300;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.42);
  margin-top:14px;
  line-height:1.6;
}
@media (max-width: 768px) {
  .about-tagline-band { padding:80px 24px 90px; }
  .atb-line { letter-spacing:2px; }
}

/* ══════════════════════════════
   FOUNDER BRIDGE — teaser for management page
══════════════════════════════ */
.founder-section{
  background:var(--ink);
  padding:100px 60px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;max-width:100%;
}
.founder-left{
  padding-right:80px;
  display:flex;flex-direction:column;justify-content:center;
}
.founder-left .section-label{color:rgba(255,255,255,0.3);}
.founder-left .section-label::before{background:rgba(255,255,255,0.15);}
.founder-name{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(48px,6vw,80px);
  letter-spacing:1px;color:#fff;line-height:0.92;margin-bottom:24px;
}
.founder-name span{color:var(--red);}
.founder-title-role{
  font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.3);
  margin-bottom:32px;
}
.founder-bio{
  font-size:15px;font-weight:300;line-height:1.9;color:rgba(255,255,255,0.5);
  margin-bottom:36px;
}
.founder-bio strong{color:rgba(255,255,255,0.8);font-weight:500;}
.founder-right{
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
  display:flex;flex-direction:column;justify-content:center;
  padding:64px 60px;
  position:relative;
}
.founder-right::before{
  content:'';position:absolute;top:0;left:0;bottom:0;
  width:2px;background:var(--red);
}
.legacy-heading{
  font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.25);
  margin-bottom:32px;
}
.legacy-item{
  padding:20px 0;border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:flex-start;gap:20px;
}
.legacy-item:last-child{border-bottom:none;}
.li-dot{
  width:6px;height:6px;background:var(--red);border-radius:50%;
  margin-top:8px;flex-shrink:0;
}
.li-body h4{
  font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:1px;color:#fff;margin-bottom:4px;
}
.li-body p{font-size:13px;color:rgba(255,255,255,0.38);line-height:1.6;}

/* ══════════════════════════════
   FOOTER (same as homepage)
══════════════════════════════ */
footer{background:#0a0a0a;border-top:1px solid #1a1a1a;padding:72px 60px 0;}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;max-width:1200px;margin:0 auto;padding-bottom:56px;border-bottom:1px solid #1e1e1e;}
.social-btn{width:36px;height:36px;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;transition:border-color 0.3s,background 0.3s;text-decoration:none;}
.footer-col h5{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #1e1e1e;}
.footer-col ul li a{font-size:13.5px;color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.25s;display:flex;align-items:center;gap:8px;}
.fci-icon{width:34px;height:34px;flex-shrink:0;border:1px solid #222;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.footer-bottom{max-width:1200px;margin:0 auto;padding:20px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.footer-legal a:hover{color:rgba(255,255,255,0.5);}





/* ══ SCROLL TOP ══ */
#scrollTop{position:fixed;bottom:26px;right:26px;width:42px;height:42px;background:var(--red);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:999;color:#fff;font-size:18px;clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);opacity:0;pointer-events:none;transition:opacity 0.3s,background 0.3s;}

/* ══ PRODUCTS PAGE CSS ══ */
:root {
  --red:#C0000C; --red2:#E8000F;
  --dark:#080808; --dark2:#111;
  --light:#F0EDE8; --grey:#7A7F8A;
  --paper:#F7F5F2; --ink:#111;
  --green:#2E7D32; --orange:#C06000;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Barlow',sans-serif; background:#fff; color:var(--ink); overflow-x:hidden; }

/* ═══════════════ NAV ═══════════════ */
nav {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  height:70px; display:flex; align-items:stretch;
  background:rgba(8,8,8,0.95); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.05);
  transition:background 0.4s, box-shadow 0.4s;
}
nav.scrolled { background:#fff; box-shadow:0 2px 20px rgba(0,0,0,0.1); border-bottom-color:transparent; }
.nav-logo-tab {
  display:flex; align-items:center; justify-content:center;
  background:#fff; padding:0 56px 0 44px;
  clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);
  flex-shrink:0; border-bottom:3px solid var(--red);
  
  transition:all 0.35s; min-width:240px;
}
nav.scrolled .nav-logo-tab { clip-path:polygon(0 0,100% 0,100% 100%,0 100%);  border-bottom-color:transparent; padding:0 40px 0 32px; }
.nav-logo-tab img { height:50px; width:auto; display:block; }
.nav-links { flex:1; display:flex; align-items:center; justify-content:center; gap:44px; list-style:none; }
.nav-links a { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:3.5px; text-transform:uppercase; color:rgba(255,255,255,0.8); text-decoration:none; position:relative; padding-bottom:4px; transition:color 0.3s; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform 0.3s; }
.nav-links a:hover, .nav-links a.active { color:#fff; }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
nav.scrolled .nav-links a { color:rgba(20,20,20,0.65); }
nav.scrolled .nav-links a:hover, nav.scrolled .nav-links a.active { color:#111; }
.nav-right { display:flex; align-items:center; gap:12px; padding-right:40px; }
.li-btn { display:flex; align-items:center; gap:7px; font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.5); text-decoration:none; border:1px solid rgba(255,255,255,0.15); padding:8px 16px; transition:all 0.3s; }
.li-btn svg { width:14px; height:14px; fill:#0077B5; flex-shrink:0; }
.li-btn:hover { color:#fff; border-color:#0077B5; background:rgba(0,119,181,0.1); }
nav.scrolled .li-btn { color:rgba(20,20,20,0.55); border-color:rgba(0,0,0,0.12); }
.btn-quote { background:var(--red); color:#fff; font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; padding:10px 26px; text-decoration:none; clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%); transition:background 0.3s; }
.btn-quote:hover { background:var(--red2); }

/* ═══════════════ HERO ═══════════════ */
.prod-hero {
  height:72vh; min-height:560px;
  position:relative; display:flex; align-items:flex-end;
  padding:0 60px 80px; padding-top:70px;
  overflow:hidden;
}
.ph-bg {
  position:absolute; inset:0;
  
  background-size:cover; background-position:center 35%;
  animation:hzoom 24s ease-in-out infinite alternate;
}
@keyframes hzoom { from { transform:scale(1); }
to { transform:scale(1.06); } }
.ph-ov { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.82) 100%); }
.ph-content { position:relative; z-index:2; max-width:1200px; width:100%; }
.ph-eyebrow {
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:5px; text-transform:uppercase; color:var(--red);
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
  opacity:0; animation:fup 0.8s 0.1s both;
}
.ph-eyebrow::after { content:''; width:36px; height:1px; background:var(--red); }
.ph-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(56px,8vw,100px); letter-spacing:3px; line-height:0.9;
  color:#fff; margin-bottom:20px;
  opacity:0; animation:fup 0.8s 0.2s both;
}
.ph-title span { color:var(--red); }
.ph-desc {
  font-size:15px; font-weight:300; line-height:1.8; color:rgba(255,255,255,0.55);
  max-width:540px;
  opacity:0; animation:fup 0.8s 0.35s both;
}

/* Quick-jump nav pills */
.prod-jumps {
  position:sticky; top:70px; z-index:100;
  background:var(--dark2); border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
  gap:0; overflow:hidden;
}
.pj-item {
  display:flex; align-items:center; gap:10px;
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:rgba(255,255,255,0.45); text-decoration:none;
  padding:18px 36px;
  border-right:1px solid rgba(255,255,255,0.06);
  transition:all 0.3s;
  position:relative;
}
.pj-item::before {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--red);
  transform:scaleX(0); transition:transform 0.3s;
}
.pj-item:hover, .pj-item.active { color:#fff; background:rgba(255,255,255,0.03); }
.pj-item:hover::before, .pj-item.active::before { transform:scaleX(1); }
.pj-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.pj-dot.red { background:var(--red); }
.pj-dot.green { background:var(--green); }
.pj-dot.orange { background:var(--orange); }

/* ═══════════════ PRODUCT SECTION ═══════════════ */
/* Alternating layout: odd=image-left text-right, even=text-left image-right */
.product-section {
  padding:0;
  scroll-margin-top:130px;
}

/* Top full-width colour banner */
.ps-banner {
  background:var(--red);
  padding:20px 60px;
  display:flex; align-items:center; gap:20px;
}
.ps-banner-num {
  font-family:'Bebas Neue',sans-serif; font-size:80px; letter-spacing:-2px;
  color:rgba(255,255,255,0.12); line-height:1; flex-shrink:0;
}
.ps-banner-info { flex:1; }
.ps-banner-code {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(36px,4vw,56px);
  letter-spacing:2px; color:#fff; line-height:1;
}
.ps-banner-sub {
  font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.6);
  margin-top:4px;
}
.ps-grade-pill {
  padding:10px 28px; border-radius:3px;
  font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:800;
  letter-spacing:5px; color:#fff; text-transform:uppercase;
  flex-shrink:0;
}
.pill-none { background:rgba(0,0,0,0.25); }
.pill-green { background:var(--green); }
.pill-orange { background:var(--orange); }

/* Main content: split grid */
.ps-body {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:600px;
}
.ps-body.flip { direction:rtl; }
.ps-body.flip > * { direction:ltr; }

/* Bag column */
.ps-bag {
  background:var(--paper);
  display:flex; align-items:center; justify-content:center;
  padding:64px 48px;
  position:relative; overflow:hidden;
}
/* Large faint product code watermark */
.ps-bag::before {
  content:attr(data-code);
  position:absolute; bottom:-20px; left:-10px; right:-10px;
  font-family:'Bebas Neue',sans-serif; font-size:120px; letter-spacing:-4px;
  color:rgba(0,0,0,0.04); line-height:1;
  white-space:nowrap; pointer-events:none; overflow:hidden;
}
.bag-float {
  width:78%;
  max-width:360px;
  filter:drop-shadow(0 32px 60px rgba(0,0,0,0.22));
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1), filter 0.6s;
  transform:translateY(0) rotate(-1deg);
}
.ps-bag:hover .bag-float {
  transform:translateY(-16px) rotate(0deg);
  filter:drop-shadow(0 52px 80px rgba(0,0,0,0.3));
}
/* Floating tag */
.bag-tag {
  position:absolute; top:36px; right:36px;
  background:var(--dark2); border:1px solid rgba(192,0,12,0.4);
  padding:8px 18px;
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--red);
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}

/* Text column */
.ps-text {
  background:#fff;
  padding:72px 64px;
  display:flex; flex-direction:column; justify-content:center;
}
.ps-overline {
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:5px; text-transform:uppercase; color:var(--red);
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.ps-overline::before { content:''; width:24px; height:1px; background:var(--red); }
.ps-name {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(44px,5vw,68px); letter-spacing:1px; line-height:0.92;
  color:var(--ink); margin-bottom:20px;
}
.ps-tagline {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:17px; color:#555; line-height:1.7;
  border-left:2px solid var(--red); padding-left:18px;
  margin-bottom:32px;
}
.ps-desc {
  font-size:15px; font-weight:300; line-height:1.9; color:#555;
  margin-bottom:36px;
}
.ps-desc strong { font-weight:600; color:var(--ink); }

/* Spec table */
.ps-specs {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1px; background:#eee;
  border:1px solid #eee; margin-bottom:36px;
}
.spec-item {
  background:#fff; padding:16px 20px;
  transition:background 0.25s;
}
.spec-item:hover { background:var(--paper); }
.spec-label {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--grey);
  margin-bottom:5px;
}
.spec-val {
  font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:700;
  color:var(--ink); letter-spacing:0.5px;
}

/* Feature pills */
.ps-features {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px;
}
.feat-tag {
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  padding:7px 16px; border:1px solid #ddd; color:#444;
  transition:all 0.25s;
}
.feat-tag:hover { border-color:var(--red); color:var(--red); background:rgba(192,0,12,0.03); }

/* CTA row */
.ps-cta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:var(--red); color:#fff;
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  padding:15px 36px; text-decoration:none;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  transition:background 0.3s, transform 0.2s;
}
.btn-primary:hover { background:var(--red2); transform:translateY(-2px); }
.btn-secondary {
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(0,0,0,0.12); color:#444;
  background:rgba(255,255,255,0.3);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  padding:14px 28px; text-decoration:none;
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
  transition:all 0.3s;
}
.btn-secondary:hover { border-color:rgba(0,0,0,0.2); color:#111; background:rgba(255,255,255,0.45); }

/* ═══════════════ PRODUCT DIVIDER ═══════════════ */
.prod-divider {
  background:var(--dark); padding:32px 60px;
  display:flex; align-items:center; gap:20px;
}
.pd-line { flex:1; height:1px; background:rgba(255,255,255,0.07); }
.pd-text {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:5px; text-transform:uppercase; color:rgba(255,255,255,0.2);
  white-space:nowrap;
}

/* ═══════════════ PRODUCT CARDS — 3-UP LAYOUT ═══════════════ */
.pc-section {
  padding: 80px 60px 40px;
  background: var(--paper);
  scroll-margin-top: 130px;
}
.pc-row {
  display: flex;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
  transition: gap 0.5s cubic-bezier(0.16,1,0.3,1);
}

/* Individual card */
.product-card {
  flex: 1 1 0%;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s, border-color 0.4s, background 0.4s;
  position: relative;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
  border-color: rgba(192,0,12,0.2);
}
/* Active card grows, siblings shrink */
.product-card.active {
  flex: 2.4 1 0%;
  border-color: rgba(192,0,12,0.3);
  box-shadow: 0 24px 70px rgba(0,0,0,0.14);
  transform: translateY(-8px);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.5);
}
/* Siblings shrink and recede */
.pc-row:has(.product-card.active) .product-card:not(.active) {
  flex: 0.8 1 0%;
  opacity: 0.7;
  transform: scale(0.97);
}
.pc-row:has(.product-card.active) .product-card:not(.active):hover {
  opacity: 0.9;
  transform: scale(0.98);
}

/* Preview area (always visible) */
.pc-preview {
  padding: 28px 24px 24px;
  text-align: center;
  position: relative;
}

/* Image wrapper — relative for badge overlay */
.pc-img-wrap {
  width: 75%;
  max-width: 240px;
  margin: 0 auto 20px;
  aspect-ratio: 1186 / 1770;
  position: relative;
}
.pc-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15));
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.product-card:hover .pc-img-wrap img {
  transform: translateY(-8px) rotate(-1deg);
}
.product-card.active .pc-img-wrap img {
  transform: translateY(-4px);
}

/* Badge — overlaid on bag image */
.pc-badge {
  position: absolute; bottom: 12px; left: 50%;
  transform: translateX(-50%);
  font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: #fff;
  padding: 6px 16px; border-radius: 6px;
  z-index: 2;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.pc-badge-red { background: var(--red); }
.pc-badge-green { background: var(--green); }
.pc-badge-orange { background: var(--orange); }

.pc-num {
  font-family: 'Bebas Neue', sans-serif; font-size: 14px; letter-spacing: 3px;
  color: rgba(192,0,12,0.35); margin-bottom: 8px;
}
.pc-title {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(22px,2.5vw,28px);
  letter-spacing: 1px; color: var(--ink); line-height: 1; margin-bottom: 10px;
}
.pc-short {
  font-size: 13px; font-weight: 300; line-height: 1.7; color: #777;
  max-width: 260px; margin: 0 auto;
}
.pc-tap {
  margin-top: 16px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: var(--red);
  opacity: 0.6; transition: opacity 0.3s;
}
.pc-tap span { display: inline-block; transition: transform 0.3s; }
.product-card:hover .pc-tap { opacity: 1; }
.product-card:hover .pc-tap span { transform: translateY(3px); }
.product-card.active .pc-tap span { transform: rotate(180deg); }

/* Expanded content (hidden by default) — uses the grid-template-rows
   trick so we never animate layout properties (height/max-height/padding). */
.pc-expand {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.6s var(--ease-out-quart), opacity 0.4s ease 0.15s;
}
.pc-expand > .pc-expand-inner { min-height: 0; overflow: hidden; }
.product-card.active .pc-expand {
  grid-template-rows: 1fr;
  opacity: 1;
}
.pc-expand-inner {
  padding: 0 28px 32px;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 8px;
  padding-top: 24px;
}
.pc-tagline {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: 15px; color: #555; line-height: 1.7;
  border-left: 2px solid var(--red); padding-left: 16px;
  margin-bottom: 20px;
}
.pc-desc {
  font-size: 13.5px; font-weight: 300; line-height: 1.85; color: #555;
  margin-bottom: 24px;
}
.pc-desc strong { font-weight: 600; color: var(--ink); }

/* Reuse existing .ps-specs, .ps-features, .ps-cta, .spec-item inside cards */
.pc-expand-inner .ps-specs {
  margin-bottom: 20px;
}
.pc-expand-inner .ps-features {
  margin-bottom: 20px;
}
.pc-expand-inner .feat-tag {
  font-size: 10px; padding: 5px 12px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .pc-section { padding: 60px 24px 24px; }
  .pc-row { flex-direction: column; gap: 16px; }
  .product-card { flex: none; width: 100%; }
}
@media (max-width: 480px) {
  .pc-section { padding: 40px 16px 16px; }
  .pc-row { gap: 12px; }
  .pc-preview { padding: 20px 16px 16px; }
  .pc-expand-inner { padding: 0 16px 24px; padding-top: 20px; }
  .pc-title { font-size: 22px; }
}

/* ═══════════════ COMPARISON TABLE ═══════════════ */
.compare-section {
  padding:110px 60px;
  background:var(--paper);
}
.compare-inner { max-width:1100px; margin:0 auto; }
.compare-header { text-align:center; margin-bottom:64px; }
.section-label {
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:5px; text-transform:uppercase; color:var(--red);
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:16px;
}
.sec-title {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(36px,5vw,58px);
  letter-spacing:2px; color:#fff; line-height:0.95;
}
.sec-title .r { color:var(--red); }
.compare-table { width:100%; border-collapse:collapse; }
.compare-table th, .compare-table td { text-align:left; padding:18px 24px; }
.compare-table thead th {
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--grey);
  border-bottom:2px solid var(--ink); padding-bottom:14px;
}
.compare-table thead th.highlight { color:var(--red); border-bottom-color:var(--red); }
.compare-table tbody tr { border-bottom:1px solid #e8e8e8; transition:background 0.2s; }
.compare-table tbody tr:hover { background:rgba(192,0,12,0.02); }
.compare-table tbody td {
  font-size:14px; color:#444; font-weight:300; line-height:1.5;
}
.compare-table tbody td:first-child {
  font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:1px; color:var(--ink); text-transform:uppercase;
}
.check { color:var(--green); font-size:18px; }
.cross { color:#bbb; font-size:18px; }
.compare-pill {
  display:inline-block; padding:3px 12px;
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:#fff; border-radius:2px;
}
.cp-r { background:var(--red); }
.cp-g { background:var(--green); }
.cp-o { background:var(--orange); }

/* ═══════════════ APPLICATIONS ═══════════════ */
.apps-section {
  padding:110px 60px;
  background:var(--dark);
  position:relative; overflow:hidden;
}
.apps-section::before {
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(192,0,12,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(192,0,12,0.03) 1px,transparent 1px);
  background-size:60px 60px; pointer-events:none;
}
.apps-inner { max-width:1100px; margin:0 auto; position:relative; z-index:1; }
.apps-header { margin-bottom:64px; }
.apps-header .section-label { justify-content:flex-start; }
.apps-header .section-label::before { content:''; width:0; }
.apps-header .sec-title { color:#fff; }
.apps-header .sec-title .r { color:var(--red); }
.apps-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:rgba(255,255,255,0.05);
}
.app-card {
  background:var(--dark); padding:44px 36px;
  transition:background 0.35s; position:relative; overflow:hidden;
}
.app-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.app-card:hover { background:rgba(255,255,255,0.02); }
.app-card:hover::before { transform:scaleX(1); }
.app-icon {
  width:52px; height:52px; border:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:24px; transition:border-color 0.3s;
}
.app-card:hover .app-icon { border-color:rgba(192,0,12,0.5); }
.app-icon svg { width:24px; height:24px; fill:none; stroke:rgba(255,255,255,0.45); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke 0.3s; }
.app-card:hover .app-icon svg { stroke:var(--red); }
.app-title { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700; letter-spacing:1px; color:#fff; margin-bottom:12px; }
.app-desc { font-size:13px; font-weight:300; line-height:1.75; color:rgba(255,255,255,0.4); }

/* ═══════════════ CTA STRIP ═══════════════ */
.cta-strip {
  background:var(--red); padding:64px 60px;
  display:flex; align-items:center; justify-content:space-between;
  gap:40px;
}
.cta-strip-txt .t1 {
  font-family:'Bebas Neue',sans-serif; font-size:clamp(28px,4vw,50px);
  letter-spacing:2px; color:#fff; line-height:1;
}
.cta-strip-txt .t2 {
  font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:300;
  letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-top:8px;
}
.btn-white {
  display:inline-flex; align-items:center; gap:10px;
  background:#fff; color:var(--red);
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  padding:16px 42px; text-decoration:none;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);
  transition:background 0.3s, transform 0.2s; flex-shrink:0;
}
.btn-white:hover { background:var(--light); transform:translateY(-2px); }

/* ═══════════════ FOOTER ═══════════════ */
footer{background:#0a0a0a;border-top:1px solid #1a1a1a;padding:72px 60px 0;}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;max-width:1200px;margin:0 auto;padding-bottom:56px;border-bottom:1px solid #1e1e1e;}
.social-btn{width:36px;height:36px;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;transition:border-color 0.3s,background 0.3s;text-decoration:none;}
.footer-col h5{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #1e1e1e;}
.footer-col ul li a{font-size:13.5px;color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.25s;display:flex;align-items:center;gap:8px;}
.fci-icon{width:34px;height:34px;flex-shrink:0;border:1px solid #222;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.footer-bottom{max-width:1200px;margin:0 auto;padding:20px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.footer-copy{font-size:12px;color:rgba(255,255,255,0.2);}
.footer-legal a:hover{color:rgba(255,255,255,0.5);}







@keyframes fup { from { opacity:0; transform:translateY(24px); }
to { opacity:1; transform:translateY(0); } }

/* ══ MANAGEMENT PAGE CSS ══ */
:root {
  --red:#C0000C; --red2:#E8000F;
  --dark:#080808; --dark2:#111;
  --paper:#F7F5F2; --ink:#111; --grey:#7A7F8A;
  --gold:#B8960C;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Barlow',sans-serif; background:#fff; color:var(--ink); overflow-x:hidden; }

/* NAV */
nav { position:fixed;top:0;left:0;width:100%;z-index:1000;height:70px;display:flex;align-items:stretch;background:rgba(8,8,8,0.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.05);transition:background 0.4s,box-shadow 0.4s; }
nav.scrolled { background:#fff;box-shadow:0 2px 20px rgba(0,0,0,0.1);border-bottom-color:transparent; }
.nav-logo-tab { display:flex;align-items:center;justify-content:center;background:#fff;padding:0 56px 0 44px;clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);flex-shrink:0;border-bottom:3px solid var(--red);transition:all 0.35s;min-width:240px; }
nav.scrolled .nav-logo-tab { clip-path:polygon(0 0,100% 0,100% 100%,0 100%);border-bottom-color:transparent;padding:0 40px 0 32px; }
.nav-logo-tab img { height:50px;width:auto;display:block; }
.nav-links { flex:1;display:flex;align-items:center;justify-content:center;gap:44px;list-style:none; }
.nav-links a { font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:rgba(255,255,255,0.8);text-decoration:none;position:relative;padding-bottom:4px;transition:color 0.3s; }
.nav-links a::after { content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 0.3s; }
.nav-links a:hover,.nav-links a.active { color:#fff; }
.nav-links a:hover::after,.nav-links a.active::after { transform:scaleX(1); }
nav.scrolled .nav-links a { color:rgba(20,20,20,0.65); }
nav.scrolled .nav-links a:hover,nav.scrolled .nav-links a.active { color:#111; }
.nav-right { display:flex;align-items:center;gap:12px;padding-right:40px; }
.li-btn { display:flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.5);text-decoration:none;border:1px solid rgba(255,255,255,0.15);padding:8px 16px;transition:all 0.3s; }
.li-btn svg { width:14px;height:14px;fill:#0077B5;flex-shrink:0; }
.li-btn:hover { color:#fff;border-color:#0077B5;background:rgba(0,119,181,0.1); }
nav.scrolled .li-btn { color:rgba(20,20,20,0.55);border-color:rgba(0,0,0,0.12); }
.btn-quote { background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;padding:10px 26px;text-decoration:none;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:background 0.3s; }
.btn-quote:hover { background:var(--red2); }

/* HERO */
.mgmt-hero { height:65vh;min-height:500px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:0 60px 72px;padding-top:70px; }
.mh-bg { position:absolute;inset:0;background-size:cover;background-position:center 30%;animation:hzoom 28s ease-in-out infinite alternate; }
@keyframes hzoom { from { transform:scale(1); }
to { transform:scale(1.06); } }
.mh-ov { position:absolute;inset:0;background:linear-gradient(105deg,rgba(0,0,0,0.96) 0%,rgba(0,0,0,0.75) 50%,rgba(0,0,0,0.4) 100%); }
.mh-redbar { position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red); }
.mh-content { position:relative;z-index:2;max-width:1200px;width:100%; }
.mh-overline { font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:14px;margin-bottom:18px;opacity:0;animation:fup 0.8s 0.1s both; }
.mh-overline::after { content:'';width:36px;height:1px;background:var(--red); }
.mh-title { font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,8vw,96px);letter-spacing:3px;line-height:0.9;color:#fff;margin-bottom:18px;opacity:0;animation:fup 0.8s 0.2s both; }
.mh-title span { color:var(--red); }
.mh-sub { font-size:15px;font-weight:300;line-height:1.8;color:rgba(255,255,255,0.5);max-width:520px;opacity:0;animation:fup 0.8s 0.35s both; }
@keyframes fup { from { opacity:0;transform:translateY(22px); }
to { opacity:1;transform:translateY(0); } }

/* HERITAGE STATS — trimmed */
.heritage-bar { background:var(--dark2);padding:0 60px;display:flex;align-items:stretch;border-bottom:1px solid rgba(255,255,255,0.04); }
.hb-item { padding:26px 48px 26px 0;border-right:1px solid rgba(255,255,255,0.06);margin-right:48px;display:flex;flex-direction:column;gap:3px; }
.hb-item:last-child { border-right:none; }
.hb-num { font-family:'Bebas Neue',sans-serif;font-size:38px;letter-spacing:-1px;color:#fff;line-height:1; }
.hb-num span { color:var(--red);font-size:24px; }
.hb-label { font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.3); }

/* ═══ PERSON SECTIONS ═══ */
.person-section { scroll-margin-top:80px; }
.person-banner {
  padding:52px 60px 0;
  background:#fff;
  display:flex; align-items:flex-end; gap:32px;
  border-top:4px solid;
}
.person-banner.gold-accent { border-top-color:var(--gold); }
.person-banner.red-accent  { border-top-color:var(--red); }
.pb-number { font-family:'Bebas Neue',sans-serif;font-size:120px;letter-spacing:-4px;line-height:1;color:rgba(0,0,0,0.05);margin-bottom:-12px;flex-shrink:0; }
.pb-role { font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;margin-bottom:10px; }
.pb-role.gold { color:var(--gold); }
.pb-role.red  { color:var(--red); }
.pb-name { font-family:'Bebas Neue',sans-serif;font-size:clamp(52px,7vw,88px);letter-spacing:1px;line-height:0.9;color:var(--ink); }

/* PERSON BODY — portrait + bio only */
.person-body {
  display:grid;
  grid-template-columns:320px 1fr;
  gap:72px;
  padding:56px 60px 88px;
  align-items:start;
}

/* Portrait */
.portrait-wrap { position:sticky; top:100px; }
.portrait-frame {
  width:100%; aspect-ratio:3/4;
  background:var(--paper); border:1px solid #e0e0e0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; overflow:hidden; margin-bottom:20px;
}
.portrait-frame::before {
  content:''; position:absolute; top:14px; left:14px;
  width:36px; height:36px; border-top:2px solid; border-left:2px solid;
}
.portrait-frame::after {
  content:''; position:absolute; bottom:14px; right:14px;
  width:36px; height:36px; border-bottom:2px solid; border-right:2px solid;
}
.portrait-frame.gold::before,.portrait-frame.gold::after { border-color:var(--gold); }
.portrait-frame.red-f::before,.portrait-frame.red-f::after { border-color:var(--red); }
.portrait-mono { font-family:'Bebas Neue',sans-serif;font-size:96px;letter-spacing:-4px;line-height:1;color:rgba(0,0,0,0.07); }
/* Name + role beneath photo */
.portrait-name { font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:1px;color:var(--ink);text-align:center; }
.portrait-role { font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:var(--grey);text-align:center;margin-top:4px; }

/* Portrait photos */
.portrait-photo {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
}


/* Bio */
.bio-label { font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:24px; }
.bio-label.gold { color:var(--gold); }
.bio-label.gold::before { content:'';width:24px;height:1px;background:var(--gold); }
.bio-label.red  { color:var(--red); }
.bio-label.red::before  { content:'';width:24px;height:1px;background:var(--red); }
.bio-intro { font-family:'Playfair Display',serif;font-size:19px;line-height:1.7;color:var(--ink);margin-bottom:26px;font-style:italic; }
.bio-intro strong { font-style:normal; }
.bio-para { font-size:15px;font-weight:300;line-height:1.95;color:#444;margin-bottom:20px; }
.bio-para strong { font-weight:600;color:var(--ink); }
.bio-pullquote { border-top:2px solid;padding:18px 0 0 0;margin:30px 0; }
.bio-pullquote.gold { border-top-color:var(--gold); }
.bio-pullquote.red  { border-top-color:var(--red); }
.bio-pullquote p { font-family:'Playfair Display',serif;font-size:17px;font-style:italic;color:#555;line-height:1.7; }

/* DIVIDER */
.person-divider { background:var(--paper);padding:36px 60px;display:flex;align-items:center;gap:24px; }
.pd-line { flex:1;height:1px;background:#ddd; }
.pd-text { font-family:'Barlow Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:#aaa;white-space:nowrap; }

/* VALUES */
.values-section { background:var(--dark);padding:110px 60px;position:relative;overflow:hidden; }
.values-section::after { content:'PSM';position:absolute;left:-30px;bottom:-40px;font-family:'Bebas Neue',sans-serif;font-size:380px;letter-spacing:-10px;color:rgba(255,255,255,0.02);line-height:1;pointer-events:none; }
.values-inner { max-width:1200px;margin:0 auto;position:relative;z-index:1; }
.values-top { display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:72px; }
.section-label { font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:12px;margin-bottom:20px; }
.section-label::before { content:'';width:24px;height:1px;background:var(--red); }
.values-title { font-family:'Bebas Neue',sans-serif;font-size:clamp(44px,5.5vw,68px);letter-spacing:2px;line-height:0.92;color:#fff; }
.values-title span { color:var(--red); }
.values-right p { font-size:15px;font-weight:300;line-height:1.95;color:rgba(255,255,255,0.45); }
.values-right p+p { margin-top:18px; }
.values-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,0.05); }
.val-card { background:var(--dark);padding:44px 36px;position:relative;overflow:hidden;transition:background 0.35s; }
.val-card:hover { background:rgba(255,255,255,0.025); }
.val-card::before { content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.val-card:hover::before { transform:scaleX(1); }
.val-num { font-family:'Bebas Neue',sans-serif;font-size:64px;letter-spacing:-2px;color:rgba(255,255,255,0.05);line-height:1;margin-bottom:18px;transition:color 0.4s; }
.val-card:hover .val-num { color:rgba(192,0,12,0.12); }
.val-h { font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:700;letter-spacing:1px;color:#fff;margin-bottom:12px; }
.val-p { font-size:13px;font-weight:300;line-height:1.8;color:rgba(255,255,255,0.38); }

/* FOOTER */
footer{background:#0a0a0a;border-top:1px solid #1a1a1a;padding:72px 60px 0;}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;max-width:1200px;margin:0 auto;padding-bottom:56px;border-bottom:1px solid #1e1e1e;}
.social-btn{width:36px;height:36px;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;transition:border-color 0.3s,background 0.3s;text-decoration:none;}
.footer-col h5{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #1e1e1e;}
.footer-col ul li a{font-size:13.5px;color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.25s;display:flex;align-items:center;gap:8px;}
.fci-icon{width:34px;height:34px;flex-shrink:0;border:1px solid #222;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.footer-bottom{max-width:1200px;margin:0 auto;padding:20px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.footer-copy{font-size:12px;color:rgba(255,255,255,0.2);}
.footer-legal a:hover{color:rgba(255,255,255,0.5);}








/* ══ CONTACT PAGE CSS ══ */
:root {
  --red:#C0000C; --red2:#E8000F;
  --dark:#080808; --dark2:#111;
  --paper:#F7F5F2; --ink:#111; --grey:#7A7F8A;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Barlow',sans-serif; background:#fff; color:var(--ink); overflow-x:hidden; }

/* ═══ NAV ═══ */
nav { position:fixed;top:0;left:0;width:100%;z-index:1000;height:70px;display:flex;align-items:stretch;background:rgba(8,8,8,0.95);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.05);transition:background 0.4s,box-shadow 0.4s; }
nav.scrolled { background:#fff;box-shadow:0 2px 20px rgba(0,0,0,0.1);border-bottom-color:transparent; }
.nav-logo-tab { display:flex;align-items:center;justify-content:center;background:#fff;padding:0 56px 0 44px;clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);flex-shrink:0;border-bottom:3px solid var(--red);transition:all 0.35s;min-width:240px; }
nav.scrolled .nav-logo-tab { clip-path:polygon(0 0,100% 0,100% 100%,0 100%);border-bottom-color:transparent;padding:0 40px 0 32px; }
.nav-logo-tab img { height:50px;width:auto;display:block; }
.nav-links { flex:1;display:flex;align-items:center;justify-content:center;gap:44px;list-style:none; }
.nav-links a { font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;color:rgba(255,255,255,0.8);text-decoration:none;position:relative;padding-bottom:4px;transition:color 0.3s; }
.nav-links a::after { content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 0.3s; }
.nav-links a:hover,.nav-links a.active { color:#fff; }
.nav-links a:hover::after,.nav-links a.active::after { transform:scaleX(1); }
nav.scrolled .nav-links a { color:rgba(20,20,20,0.65); }
nav.scrolled .nav-links a:hover,nav.scrolled .nav-links a.active { color:#111; }
.nav-right { display:flex;align-items:center;gap:12px;padding-right:40px; }
.li-btn { display:flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.5);text-decoration:none;border:1px solid rgba(255,255,255,0.15);padding:8px 16px;transition:all 0.3s; }
.li-btn svg { width:14px;height:14px;fill:#0077B5;flex-shrink:0; }
.li-btn:hover { color:#fff;border-color:#0077B5;background:rgba(0,119,181,0.1); }
nav.scrolled .li-btn { color:rgba(20,20,20,0.55);border-color:rgba(0,0,0,0.12); }
.btn-quote { background:var(--red);color:#fff;font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;padding:10px 26px;text-decoration:none;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:background 0.3s; }
.btn-quote:hover { background:var(--red2); }

/* ═══ HERO ═══ */
.contact-hero {
  height:60vh; min-height:460px;
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
  padding:0 60px 72px; padding-top:70px;
}
.ch-bg {
  position:absolute; inset:0;
  
  background-size:cover; background-position:center 40%;
  animation:hzoom 28s ease-in-out infinite alternate;
}
@keyframes hzoom { from { transform:scale(1); }
to { transform:scale(1.05); } }
.ch-ov {
  position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.3) 100%);
}
.ch-redbar { position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red); }
.ch-content { position:relative; z-index:2; max-width:1200px; width:100%; }
.ch-eyebrow {
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:5px; text-transform:uppercase; color:var(--red);
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
  opacity:0; animation:fup 0.8s 0.1s both;
}
.ch-eyebrow::after { content:''; width:36px; height:1px; background:var(--red); }
.ch-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(52px,8vw,96px); letter-spacing:3px; line-height:0.9;
  color:#fff; margin-bottom:16px;
  opacity:0; animation:fup 0.8s 0.2s both;
}
.ch-title span { color:var(--red); }
.ch-sub {
  font-size:15px; font-weight:300; line-height:1.8; color:rgba(255,255,255,0.5); max-width:500px;
  opacity:0; animation:fup 0.8s 0.35s both;
}
@keyframes fup { from { opacity:0;transform:translateY(22px); }
to { opacity:1;transform:translateY(0); } }

/* ═══ CONTACT INFO STRIP ═══ */
.info-strip {
  background:var(--red);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.is-item {
  padding:36px 48px;
  border-right:1px solid rgba(255,255,255,0.15);
  display:flex; align-items:flex-start; gap:18px;
  transition:background 0.3s; cursor:default;
}
.is-item:last-child { border-right:none; }
.is-item:hover { background:rgba(0,0,0,0.1); }
.is-icon {
  width:44px; height:44px; flex-shrink:0;
  border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center;
  margin-top:2px;
}
.is-icon svg { width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.is-label {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.55);
  margin-bottom:6px;
}
.is-val {
  font-size:15px; font-weight:400; color:#fff; line-height:1.5;
}
.is-val a { color:#fff; text-decoration:none; }
.is-val a:hover { text-decoration:underline; }

/* ═══ MAIN BODY ═══ */
.contact-body {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:700px;
}

/* Left — form */
.cf-left {
  padding:88px 72px 88px 60px;
  background:#fff;
}
.cf-heading {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px,4vw,52px); letter-spacing:2px; line-height:0.92;
  color:var(--ink); margin-bottom:12px;
}
.cf-heading span { color:var(--red); }
.cf-sub {
  font-size:14px; font-weight:300; line-height:1.8; color:var(--grey);
  margin-bottom:44px; max-width:420px;
}

/* Form */
.form-group {
  margin-bottom:24px;
}
.form-row {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.form-label {
  display:block;
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--grey);
  margin-bottom:8px;
}
.form-input, .form-select, .form-textarea {
  width:100%;
  background:#fff; border:1px solid #ddd;
  font-family:'Barlow',sans-serif; font-size:14px; font-weight:300; color:var(--ink);
  padding:14px 16px;
  outline:none;
  transition:border-color 0.25s, box-shadow 0.25s;
  -webkit-appearance:none; border-radius:0;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(192,0,12,0.06);
}
.form-input::placeholder, .form-textarea::placeholder { color:#bbb; }
.form-textarea { resize:vertical; min-height:130px; }
.form-select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; }
.form-submit {
  display:inline-flex; align-items:center; gap:12px;
  background:var(--red); color:#fff;
  font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  padding:17px 48px;
  border:none; cursor:pointer;
  clip-path:polygon(14px 0,100% 0,calc(100% - 14px) 100%,0 100%);
  transition:background 0.3s, transform 0.2s;
  margin-top:8px;
}
.form-submit:hover { background:var(--red2); transform:translateY(-2px); }
.form-submit svg { width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; }

/* Success message */
.form-success {
  display:none;
  background:var(--paper); border-top:2px solid var(--red);
  padding:24px; margin-top:24px;
  font-size:14px; font-weight:300; color:#444; line-height:1.7;
}
.form-success strong { color:var(--ink); font-weight:600; }

/* Right — map + details */
.cf-right {
  background:var(--dark2);
  display:flex; flex-direction:column;
  position:relative; overflow:hidden;
}

/* Map embed */
.map-container {
  flex:1; min-height:380px; position:relative;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.map-container iframe {
  width:100%; height:100%; border:none; display:block;
  filter:grayscale(0.2) contrast(1.05);
}
/* Map overlay pin label */
.map-pin-label {
  position:absolute; bottom:20px; left:20px;
  background:var(--dark); border:1px solid rgba(192,0,12,0.4);
  padding:10px 18px;
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:#fff;
  display:flex; align-items:center; gap:8px;
}
.map-pin-label::before {
  content:''; width:6px; height:6px; background:var(--red); border-radius:50%; flex-shrink:0;
}

/* Details panel below map */
.cf-details {
  padding:44px 52px;
}
.cf-details-heading {
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,0.25);
  margin-bottom:28px; padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.detail-row {
  display:flex; align-items:flex-start; gap:16px;
  padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.05);
}
.detail-row:last-child { border-bottom:none; }
.detail-icon {
  width:36px; height:36px; flex-shrink:0;
  border:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
  margin-top:1px;
}
.detail-icon svg { width:14px;height:14px;fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.detail-label {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.25);
  margin-bottom:4px;
}
.detail-val {
  font-size:13.5px; color:rgba(255,255,255,0.65); line-height:1.6;
}
.detail-val a { color:rgba(255,255,255,0.65); text-decoration:none; transition:color 0.25s; }
.detail-val a:hover { color:#fff; }

/* ═══ WHY REACH OUT ═══ */
.reach-section {
  background:var(--paper);
  padding:100px 60px;
}
.reach-inner {
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.reach-left .eyebrow {
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:5px; text-transform:uppercase; color:var(--red);
  display:flex; align-items:center; gap:12px; margin-bottom:20px;
}
.reach-left .eyebrow::before { content:''; width:24px; height:1px; background:var(--red); }
.reach-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(40px,5vw,60px); letter-spacing:2px; line-height:0.92;
  color:var(--ink); margin-bottom:20px;
}
.reach-title span { color:var(--red); }
.reach-desc {
  font-size:15px; font-weight:300; line-height:1.9; color:#555;
}
.reach-right {
  display:flex; flex-direction:column; gap:1px; background:#ddd;
  border:1px solid #ddd;
}
.reach-item {
  background:var(--paper); padding:28px 32px;
  display:flex; align-items:flex-start; gap:18px;
  transition:background 0.25s;
}
.reach-item:hover { background:#fff; }
.ri-num {
  font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:-1px;
  color:rgba(192,0,12,0.15); line-height:1; flex-shrink:0; width:36px;
  transition:color 0.3s;
}
.reach-item:hover .ri-num { color:var(--red); }
.ri-body h4 {
  font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700;
  letter-spacing:0.5px; color:var(--ink); margin-bottom:4px;
}
.ri-body p { font-size:13.5px; font-weight:300; line-height:1.7; color:#666; }

/* ═══ CONTACT HERO — CTA BUTTONS ═══ */
.ch-cta-row {
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:32px;
  opacity:0; animation:fup 0.8s 0.5s both;
}
.ch-cta {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px;
  font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.04);
  color:#fff;
  transition:background 0.25s, border-color 0.25s, transform 0.2s;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ch-cta svg { width:16px; height:16px; flex-shrink:0; }
.ch-cta:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.35); transform:translateY(-2px); }
.ch-cta-primary { background:var(--red); border-color:var(--red); }
.ch-cta-primary:hover { background:#a8000a; border-color:#a8000a; }
.ch-cta-wa { background:rgba(37,211,102,0.12); border-color:rgba(37,211,102,0.35); }
.ch-cta-wa svg { color:#25D366; }
.ch-cta-wa:hover { background:#25D366; border-color:#25D366; color:#fff; }
.ch-cta-wa:hover svg { color:#fff; }

/* ═══ INFO STRIP — 4 column variant ═══ */
.info-strip-4 { grid-template-columns:repeat(4,1fr); }

/* ═══ 4-CHANNEL CONTACT CARDS ═══ */
.quick-contact-section {
  background:#fff;
  padding:80px 60px 70px;
  border-bottom:1px solid #eee;
}
.qc-inner {
  max-width:1200px; margin:0 auto; text-align:center;
}
.qc-eyebrow {
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:5px; text-transform:uppercase; color:var(--red);
  display:inline-flex; align-items:center; gap:14px; margin-bottom:18px;
}
.qc-eyebrow::before, .qc-eyebrow::after { content:''; width:30px; height:1px; background:var(--red); }
.qc-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px,4.5vw,54px); letter-spacing:3px; line-height:0.95;
  color:var(--ink); margin-bottom:48px;
}
.qc-title span { color:var(--red); }
.qc-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.qc-card {
  background:#fafafa;
  border:1px solid #eaeaea;
  border-top:3px solid var(--red);
  padding:36px 28px 32px;
  text-decoration:none;
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:left;
  transition:transform 0.3s var(--ease-out-quart,cubic-bezier(0.16,1,0.3,1)), box-shadow 0.3s, background 0.3s, border-color 0.3s;
  position:relative;
  min-height:200px;
}
.qc-card:hover {
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.08);
  background:#fff;
}
.qc-card-icon {
  width:44px; height:44px;
  background:rgba(192,0,12,0.08);
  border:1px solid rgba(192,0,12,0.18);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  transition:background 0.25s, border-color 0.25s;
}
.qc-card-icon svg { width:20px; height:20px; color:var(--red); }
.qc-card:hover .qc-card-icon { background:var(--red); border-color:var(--red); }
.qc-card:hover .qc-card-icon svg { color:#fff; }
.qc-card-label {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:#888;
  margin-bottom:8px;
}
.qc-card-value {
  font-family:'Barlow',sans-serif; font-size:16px; font-weight:500;
  color:var(--ink); line-height:1.4;
  margin-bottom:auto;
  padding-bottom:14px;
}
.qc-card-cta {
  font-family:'Barlow Condensed',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase; color:var(--red);
  margin-top:12px;
  transition:transform 0.25s;
}
.qc-card:hover .qc-card-cta { transform:translateX(4px); }

/* WhatsApp card — green accent */
.qc-card-wa { border-top-color:#25D366; }
.qc-card-wa .qc-card-icon { background:rgba(37,211,102,0.08); border-color:rgba(37,211,102,0.2); }
.qc-card-wa .qc-card-icon svg { color:#25D366; }
.qc-card-wa:hover .qc-card-icon { background:#25D366; border-color:#25D366; }
.qc-card-wa .qc-card-cta { color:#25D366; }

/* ═══ FORM PRIVACY NOTE ═══ */
.form-privacy-note {
  margin-top:16px;
  font-size:11.5px; color:#999; line-height:1.6;
}
.form-privacy-note a { color:var(--red); text-decoration:underline; }
.form-privacy-note a:hover { color:var(--red2); }

/* ═══ CONTACT DETAIL — utility classes ═══ */
.detail-inline-link { color:var(--red) !important; font-size:12px; letter-spacing:1px; }
.detail-inline-link:hover { color:#fff !important; }
.detail-soft { color:rgba(255,255,255,0.35); font-size:12px; }

/* ═══ MOBILE STICKY CONTACT BAR ═══ */
.mobile-contact-bar {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:9000;
  background:#0a0a0a; border-top:1px solid #222;
  box-shadow:0 -6px 24px rgba(0,0,0,0.35);
  padding-bottom:env(safe-area-inset-bottom);
}
.mcb-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:11px 4px 10px;
  text-decoration:none;
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; color:#fff;
  border-right:1px solid #1a1a1a;
  background:transparent;
  transition:background 0.2s;
}
.mcb-btn:last-child { border-right:none; }
.mcb-btn svg { width:18px; height:18px; }
.mcb-btn:active { transform:scale(0.96); }
.mcb-call { background:rgba(192,0,12,0.85); }
.mcb-call:hover, .mcb-call:active { background:var(--red); }
.mcb-wa { background:#25D366; color:#fff; }
.mcb-wa:hover, .mcb-wa:active { background:#1ebe5d; }
.mcb-form { background:#0a0a0a; }
.mcb-form:hover, .mcb-form:active { background:#1a1a1a; }

@media (max-width: 768px) {
  .mobile-contact-bar { display:flex; }
  /* Push footer up so the bar doesn't cover the footer-bottom links */
  body.page-template-page-contact-us footer { padding-bottom:72px; }

  /* Hero CTA row */
  .ch-cta-row { gap:10px; }
  .ch-cta { padding:12px 18px; font-size:11.5px; letter-spacing:2px; }
  .ch-cta svg { width:14px; height:14px; }

  /* Info strip — stack to 2 cols then 1 */
  .info-strip-4 { grid-template-columns:repeat(2,1fr); }
  .info-strip-4 .is-item { border-right:none; border-bottom:1px solid rgba(255,255,255,0.12); }
  .info-strip-4 .is-item:nth-child(odd) { border-right:1px solid rgba(255,255,255,0.12); }
  .info-strip-4 .is-item:nth-last-child(-n+2) { border-bottom:none; }

  /* Quick-contact grid — 2 cols on tablet, 1 col below */
  .quick-contact-section { padding:60px 24px 50px; }
  .qc-grid { grid-template-columns:repeat(2,1fr); gap:14px; }
  .qc-card { padding:28px 20px 24px; min-height:180px; }
  .qc-title { margin-bottom:36px; letter-spacing:2px; }
}

@media (max-width: 480px) {
  .info-strip-4 { grid-template-columns:1fr; }
  .info-strip-4 .is-item { border-right:none !important; border-bottom:1px solid rgba(255,255,255,0.12); }
  .info-strip-4 .is-item:last-child { border-bottom:none; }

  .qc-grid { grid-template-columns:1fr; }
  .qc-card { min-height:auto; }

  .ch-cta-row { flex-direction:column; align-items:stretch; }
  .ch-cta { justify-content:center; }
}

/* ═══ FOOTER ═══ */
footer{background:#0a0a0a;border-top:1px solid #1a1a1a;padding:72px 60px 0;}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;max-width:1200px;margin:0 auto;padding-bottom:56px;border-bottom:1px solid #1e1e1e;}
.social-btn{width:36px;height:36px;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;transition:border-color 0.3s,background 0.3s;text-decoration:none;}
.footer-col h5{font-family:'Barlow Condensed',sans-serif;font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:20px;padding-bottom:10px;border-bottom:1px solid #1e1e1e;}
.footer-col ul li a{font-size:13.5px;color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.25s;display:flex;align-items:center;gap:8px;}
.fci-icon{width:34px;height:34px;flex-shrink:0;border:1px solid #222;display:flex;align-items:center;justify-content:center;margin-top:1px;}
.footer-bottom{max-width:1200px;margin:0 auto;padding:20px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.footer-copy{font-size:12px;color:rgba(255,255,255,0.2);}
.footer-legal a:hover{color:rgba(255,255,255,0.5);}








/* Fix: why-section heading visible on white background */
.why-section .sec-title { color: #080808; }
.why-section .sec-sub { color: rgba(8,8,8,0.55); }
.why-section .eyebrow { color: var(--red); }









/* ── Nav Dropdown ── */
.nav-has-dropdown { position: relative; }
.nav-arrow { font-size: 7px; margin-left: 5px; opacity: 0.55; transition: transform 0.25s; display: inline-block; position: relative; top: -1px; }
.nav-has-dropdown:hover .nav-arrow,
.nav-has-dropdown.dropdown-open .nav-arrow { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(8,8,8,0.35); backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.1); border-top: 2px solid rgba(192,0,12,0.5);
  min-width: 220px; padding: 12px 0 8px; z-index: 2000; list-style: none;
  border-radius: 0 0 14px 14px; box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.3s;
}
.nav-has-dropdown.dropdown-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
}
.nav-dropdown li a {
  display: block; padding: 10px 20px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(240,237,232,0.75) !important; white-space: nowrap;
  transition: color 0.2s, background 0.2s, transform 0.2s var(--ease-out-quart);
}
.nav-dropdown li a:hover { color: #fff !important; background: rgba(192,0,12,0.12); transform: translateX(6px); }
.nav-dropdown-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 6px 0; }
.nav-dropdown-category {
  padding: 8px 20px 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
  color: rgba(192,0,12,0.8); font-family: 'Barlow Condensed', sans-serif;
}

/* ── Scrolled Nav Dropdown — dark text on light glass ── */
nav.scrolled .nav-dropdown {
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(50px) saturate(1.8); -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border: 1px solid rgba(0,0,0,0.08); border-top: 2px solid var(--red);
  box-shadow: 0 20px 60px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.5);
}
nav.scrolled .nav-dropdown li a {
  color: rgba(20,20,20,0.8) !important;
}
nav.scrolled .nav-dropdown li a:hover {
  color: var(--red) !important;
  background: rgba(192,0,12,0.06);
}
nav.scrolled .nav-dropdown-divider {
  background: rgba(0,0,0,0.06);
}

/* ── Contact Details Card ── */
.contact-details-card {
  background: #0f0f0f; border: 1px solid #1e1e1e; border-top: 3px solid var(--red);
  padding: 40px; height: 100%; display: flex; flex-direction: column; gap: 28px;
}
.cdc-heading { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 3px; color: #fff; padding-bottom: 20px; border-bottom: 1px solid #1e1e1e; }
.cdc-item { display: flex; align-items: flex-start; gap: 16px; }
.cdc-icon { width: 36px; height: 36px; background: rgba(192,0,12,0.1); border: 1px solid rgba(192,0,12,0.2); border-radius: 2px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cdc-icon svg { width: 16px; height: 16px; stroke: var(--red); fill: none; stroke-width: 1.5; }
.cdc-text { font-size: 13px; line-height: 1.8; color: rgba(240,237,232,0.65); }
.cdc-text strong { display: block; color: #fff; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.cdc-text a { color: rgba(240,237,232,0.65); transition: color 0.2s; }
.cdc-text a:hover { color: var(--red); }
.cdc-note { margin-top: auto; padding-top: 20px; border-top: 1px solid #1e1e1e; font-size: 11px; letter-spacing: 1px; color: rgba(240,237,232,0.3); font-style: italic; }

/* ── Mobile dropdown ── */
@media (max-width: 768px) {
  .nav-dropdown {
    position: static; transform: none;
    background: rgba(255,255,255,0.04); border: none;
    border-top: 1px solid color-mix(in oklch, var(--red) 50%, transparent);
    margin: 0 40px 8px; padding: 4px 0;
    display: none; box-shadow: none; border-radius: 0;
  }
  .nav-has-dropdown.open .nav-dropdown { display: block; }
  .nav-dropdown li a { padding: 10px 16px; font-size: 11px; text-align: left; }
  nav.scrolled .nav-dropdown {
    background: rgba(0,0,0,0.04); border: none; border-left: 2px solid var(--red);
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  nav.scrolled .nav-dropdown li a { color: rgba(20,20,20,0.75) !important; }
  nav.scrolled .nav-dropdown li a:hover { color: var(--red) !important; background: rgba(192,0,12,0.04); }
}

.nav-has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -20px;
  right: -20px;
  height: 20px;
}

/* ══ REVEAL ANIMATIONS — now GSAP-driven ══ */
/* Initial state only; GSAP handles the animation */
.reveal,
.reveal-left,
.reveal-right {
  will-change: transform, opacity;
}

/* ── SMARTER APPROACH SECTION ── */
.smarter-section {
  padding: var(--sec-pad);
  background: #F7F5F2;
}
.smarter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: rgba(0,0,0,0.08);
  margin: 48px 0 40px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.smarter-card {
  background: #F7F5F2;
  padding: 36px 40px;
  position: relative;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
  color: #111111;
}
.smarter-card:hover {
  background: #fff;
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
}
.smarter-card:hover .sc-num { color: rgba(192,0,12,0.5); }
.smarter-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 40px;
  background: var(--red);
}
.sc-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(192,0,12,0.3);
  margin-bottom: 12px;
}
.smarter-card h4 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #111111 !important;
  margin-bottom: 12px;
}
.smarter-card p {
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: #444444 !important;
}
.smarter-statement {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 40px;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.smarter-statement p {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  color: #111111 !important;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.smarter-statement span {
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
  .smarter-grid { grid-template-columns: 1fr; }
  .smarter-card { padding: 28px 24px; }
}

/* ── BTN DARK ── */
.btn-dark {
  display:inline-flex; align-items:center; gap:8px;
  background:#111111; color:#fff;
  font-family:'Barlow Condensed',sans-serif; font-size:12px;
  font-weight:700; letter-spacing:3px; text-transform:uppercase;
  padding:13px 32px; text-decoration:none;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  transition:background 0.2s;
}
.btn-dark:hover { background:#333; color:#fff; }

/* ══════════════════════════════════════════════════════════════
   PSM ORECHEM v3.0 — LUXURY / CRYPTO-LEVEL POLISH
   ══════════════════════════════════════════════════════════════ */

/* ── SCROLL PROGRESS BAR — thin, elegant ── */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--red);
  z-index: 10000;
  transition: none;
}

/* ── GLASS MORPHISM — refined ── */
.glass {
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border-radius: 12px;
}

/* ── Scrolled nav: subtle frost, not double-saturated ── */
nav.scrolled {
  background: rgba(255, 255, 255, 0.36) !important;
  backdrop-filter: blur(24px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ── CARD HOVER — subtle lift with soft glow (hover-gated) ── */
.prod-card,
.adv-card {
  transition: transform var(--dur-4) var(--ease-out-expo), box-shadow var(--dur-4) var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine) {
  .prod-card:hover,
  .adv-card:hover {
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(192, 0, 12, 0.06);
  }
}

/* Card shine — subtle light follow on hover */
.card-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
    500px circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255, 255, 255, 0.04),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.6s ease;
  border-radius: inherit;
}
.prod-card:hover .card-shine,
.adv-card:hover .card-shine {
  opacity: 1;
}

/* ── CRYSTAL BUTTON REFINEMENTS ── */
.btn-quote {
  background: rgba(192,0,12,0.85);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 10px 26px;
  text-decoration: none;
  border-radius: 6px;
  clip-path: none;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-quote:hover {
  background: rgba(232,0,15,0.9);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(192,0,12,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-dark {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(17,17,17,0.9);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 13px 32px;
  text-decoration: none;
  border-radius: 6px;
  clip-path: none;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-dark:hover {
  background: rgba(40,40,40,0.95);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
  color: #fff;
}

/* ── FORM SUBMIT BUTTON ── */
.form-submit {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.form-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(192,0,12,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}

/* ══ MOLTEN FLOW SECTION ══ */
.molten-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #0A0A0A;
  content-visibility: auto;
  contain-intrinsic-size: auto 80vh;
}
.molten-flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  will-change: contents;
  contain: strict;
}
.molten-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 80px 40px;
  max-width: 700px;
}
.molten-modes {
  position: absolute;
  bottom: 24px;
  right: 28px;
  z-index: 10;
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 3px;
}
.molten-mode {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  background: transparent;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.35s ease;
}
.molten-mode:hover { color: rgba(255,255,255,0.55); }
.molten-mode.active {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* FURNEX hero with molten flow */
.furnex-hero {
  position: relative;
}
.furnex-hero .molten-flow-canvas {
  z-index: 0;
}
.furnex-hero .molten-modes {
  bottom: 24px;
  right: 28px;
}

@media (max-width: 768px) {
  .molten-section { min-height: 50vh; }
  .molten-content { padding: 60px 24px; }
  .molten-modes { bottom: 12px; right: 12px; }
  .molten-mode { font-size: 9px; padding: 5px 10px; letter-spacing: 1.5px; }
}

/* ── FURNACE PULSE NAV BUTTON ── */
.btn-furnace-pulse, .btn-science {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 9px 20px;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: all 0.35s ease;
}
.btn-furnace-pulse:hover, .btn-science:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border-color: rgba(255,255,255,0.22);
}
nav.scrolled .btn-furnace-pulse, nav.scrolled .btn-science {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: rgba(20,20,20,0.6);
}
nav.scrolled .btn-furnace-pulse:hover, nav.scrolled .btn-science:hover {
  background: rgba(0,0,0,0.08);
  color: #111;
  border-color: rgba(0,0,0,0.15);
}

/* ── FURNEX NAV BUTTON ── */
.btn-furnex {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(192,0,12,0.1);
  color: var(--red);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 9px 20px;
  text-decoration: none;
  border-radius: 10px;
  border: 1px solid rgba(192,0,12,0.18);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: all 0.35s ease;
}
.btn-furnex:hover {
  background: rgba(192,0,12,0.35);
  color: #fff;
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 4px 20px rgba(192,0,12,0.2), inset 0 1px 0 rgba(255,255,255,0.15);
}
nav.scrolled .btn-furnex {
  background: rgba(192,0,12,0.06);
  border-color: rgba(192,0,12,0.12);
  color: var(--red);
}
nav.scrolled .btn-furnex:hover {
  background: rgba(192,0,12,0.3);
  color: #fff;
  border-color: rgba(192,0,12,0.3);
}

/* ── CURSOR GLOW — very subtle ── */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 0, 12, 0.02) 0%, transparent 60%);
  pointer-events: none;
  z-index: 9998;
  will-change: transform;
}

/* ── HAMBURGER MENU ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 24px;
  z-index: 1001;
  margin-left: auto;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  transition: transform 0.3s, opacity 0.3s, background 0.3s;
  transform-origin: center;
}
nav.scrolled .nav-hamburger span {
  background: #111;
}
/* Hamburger → X animation */
nav.nav-open .nav-hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
nav.nav-open .nav-hamburger span:nth-child(2) {
  opacity: 0;
}
nav.nav-open .nav-hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ── MOBILE NAV ── */
@media (max-width: 768px) {
  .nav-hamburger {
    display: flex;
  }
  .nav-links {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(8, 8, 8, 0.35);
    backdrop-filter: blur(50px) saturate(1.8);
    -webkit-backdrop-filter: blur(50px) saturate(1.8);
    padding: 24px 0;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  nav.nav-open .nav-links {
    max-height: 80vh;
    opacity: 1;
    overflow-y: auto;
  }
  nav.scrolled .nav-links {
    background: rgba(255, 255, 255, 0.3);
  }
  .nav-links li {
    width: 100%;
  }
  .nav-links a {
    display: block;
    padding: 14px 32px !important;
    font-size: 13px !important;
    letter-spacing: 2.5px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
  nav.scrolled .nav-links a {
    border-bottom-color: rgba(0, 0, 0, 0.04);
  }
  .nav-right {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    justify-content: center;
    padding: 16px 24px !important;
    background: rgba(8, 8, 8, 0.3);
    backdrop-filter: blur(50px) saturate(1.8);
    -webkit-backdrop-filter: blur(50px) saturate(1.8);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s 0.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s 0.1s ease;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-wrap: wrap;
    gap: 10px !important;
  }
  nav.nav-open .nav-right {
    max-height: 200px;
    opacity: 1;
    top: auto;
  }
  nav.scrolled .nav-right {
    background: rgba(255, 255, 255, 0.25);
  }
  .nav-logo-tab {
    min-width: 180px !important;
    padding: 0 32px 0 20px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   PHONE-SPECIFIC MOBILE — 480px and below
   Exact replica optimized for all phone screens
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── GLOBAL PHONE OVERRIDES ── */
  * { -webkit-tap-highlight-color: transparent; }
  .reveal, .reveal-left, .reveal-right { will-change: auto; }

  /* ── NAV ── */
  .nav-logo-tab {
    min-width: 130px !important;
    padding: 0 24px 0 14px !important;
  }
  .nav-logo-tab img { height: 38px; }
  .nav-hamburger { padding: 12px 16px; }
  .nav-links a {
    padding: 12px 24px !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
  }
  nav.nav-open .nav-right {
    padding: 12px 16px !important;
    gap: 8px !important;
  }
  .btn-furnace-pulse, .btn-science { font-size: 10px; padding: 8px 14px; letter-spacing: 2px; }
  .btn-furnex { font-size: 10px; padding: 8px 14px; letter-spacing: 2px; }
  .btn-quote { font-size: 10px; padding: 9px 18px; letter-spacing: 2px; }
  .li-btn { font-size: 10px; padding: 7px 12px; letter-spacing: 2px; }

  /* ── HERO ── */
  .hero { min-height: 100svh; }
  .hero-content { padding: 0 16px; }
  .hero-title {
    font-size: clamp(42px, 14vw, 68px) !important;
    letter-spacing: 6px;
  }
  .hero-tag {
    font-size: clamp(9px, 2.8vw, 13px) !important;
    letter-spacing: 3px;
    margin-bottom: 18px;
  }
  .hero-rule { width: 32px; margin-bottom: 16px; }
  .hero-desc { margin-bottom: 24px !important; }
  .hero-cta {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 280px;
  }
  .hero-cta .btn-primary {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 11px;
    padding: 14px 20px;
  }
  .hero-glow {
    width: 320px; height: 280px;
    bottom: -40px; right: -5%;
  }
  .scroll-cue { bottom: 16px; }
  .scroll-cue span { font-size: 7px; letter-spacing: 3px; }

  /* Hero decorated statement block (inline styles) */
  .hero-desc > div > div:nth-child(2) {
    font-size: 10px !important; letter-spacing: 5px !important;
  }
  .hero-desc > div > div:nth-child(3) {
    font-size: clamp(15px, 5vw, 20px) !important; letter-spacing: 1px !important;
  }
  .hero-desc > div > div:nth-child(4) {
    font-size: clamp(10px, 3vw, 12px) !important;
  }

  /* ── TICKER ── */
  .ticker { padding: 8px 0; }
  .t-item { font-size: 9px; letter-spacing: 3px; padding: 0 18px; }

  /* ── PRODUCTS ── */
  .products-section { padding: 60px 20px !important; }
  .sec-header { margin-bottom: 48px; }
  .eyebrow { font-size: 9px; letter-spacing: 4px; gap: 10px; margin-bottom: 10px; }
  .sec-title { font-size: clamp(28px, 8vw, 42px) !important; letter-spacing: 1px; }
  .sec-sub { font-size: 13px; line-height: 1.7; }
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    max-width: 300px;
    margin: 0 auto;
  }
  .prod-info { padding: 16px 2px 2px; }
  .prod-name { font-size: 17px; letter-spacing: 1.5px; }
  .prod-desc { font-size: 12px; line-height: 1.6; margin-bottom: 8px; }
  .prod-link { font-size: 10px; letter-spacing: 1.5px; }
  .bag-badge {
    font-size: 8px; padding: 4px 10px;
    opacity: 1 !important; transform: none !important;
  }

  /* ── WHY CHOOSE US ── */
  .why-section { padding: 60px 20px !important; }
  .why-header { margin-bottom: 40px; }
  .why-header .sec-title { font-size: clamp(28px, 8vw, 42px) !important; }
  .why-header .sec-sub { font-size: 13px; }
  .why-grid {
    grid-template-columns: 1fr !important;
    max-width: 100%;
  }
  .why-card { padding: 28px 24px; }
  .wc-body h4 { font-size: 14px; }
  .wc-body p { font-size: 12.5px; }
  .why-strip {
    flex-direction: column !important;
    text-align: center;
    padding: 28px 20px !important;
    gap: 20px !important;
  }
  .why-strip-txt .t1 { font-size: clamp(20px, 6vw, 32px) !important; }
  .why-strip-txt .t2 { font-size: 10px; letter-spacing: 2px; }
  .why-strip .btn-primary {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  /* ── MOLTEN SECTION ── */
  .molten-section { min-height: 40vh; }
  .molten-content { padding: 40px 16px; }
  .molten-content h2 {
    font-size: clamp(48px, 16vw, 80px) !important;
    letter-spacing: 3px !important;
  }
  .molten-content h3 {
    font-size: clamp(20px, 6vw, 32px) !important;
    letter-spacing: 2px !important;
  }
  .molten-content p {
    font-size: 13px !important;
  }
  .molten-modes { bottom: 8px; right: 8px; padding: 2px; }
  .molten-mode { font-size: 8px; padding: 4px 8px; letter-spacing: 1px; }

  /* ── FURNEX SECTION (inline styles — override) ── */
  #furnex div[style*="padding:72px 60px"] {
    padding: 40px 16px !important;
  }
  #furnex div[style*="padding:100px 60px"] {
    padding: 48px 16px !important;
  }
  #furnex div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  #furnex div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  #furnex div[style*="padding:56px 48px"] {
    padding: 28px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid #111 !important;
  }
  #furnex div[style*="padding:80px 60px"] {
    padding: 48px 16px !important;
  }
  #furnex h3 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  #furnex div[style*="padding:80px 60px"] .btn-primary,
  #furnex div[style*="padding:80px 60px"] a[style*="inline-block"] {
    width: 100%;
    text-align: center;
    display: block !important;
    padding: 14px 20px !important;
    min-height: 48px;
    box-sizing: border-box;
  }
  /* Furnex CTA buttons stacked */
  #furnex div[style*="display:flex;gap:16px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #furnex div[style*="display:flex;gap:16px"] a {
    text-align: center !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ── FOOTER ── */
  footer { padding: 40px 20px 0 !important; }
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding-bottom: 36px !important;
  }
  .footer-logo { width: 96px !important; height: 96px !important; }
  .footer-tagline { max-width: 100%; font-size: 12px; }
  .footer-col h5 { font-size: 10px; letter-spacing: 3px; margin-bottom: 14px; }
  .footer-col ul li a { font-size: 12.5px; }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 16px 0 20px;
  }
  .footer-copy { font-size: 11px; }
  .footer-legal { gap: 16px; }
  .footer-legal a { font-size: 11px; }

  /* ── SCROLL TOP BUTTON ── */
  #scrollTop {
    width: 38px; height: 38px;
    bottom: 16px; right: 16px;
    font-size: 16px;
  }

  /* ── BUTTONS — touch friendly ── */
  .btn-primary {
    min-height: 44px;
    font-size: 11px;
    padding: 12px 24px;
  }

  /* ── ABOUT PAGE HERO (if visited on phone) ── */
  .about-hero {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: auto !important;
  }
  .ah-left { padding: 100px 24px 60px !important; }
  .ah-title { font-size: clamp(42px, 12vw, 64px) !important; }
  .ah-right { height: 50vw; min-height: 200px; }
  .ah-vert { display: none; }

  /* Stat bar */
  .stat-bar {
    grid-template-columns: 1fr 1fr !important;
  }
  .stat-item { padding: 24px 20px; }
  .stat-num { font-size: 36px; }
  .stat-label { font-size: 9px; letter-spacing: 2px; }

  /* Who section */
  .who-inner {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 0 20px !important;
  }
  .who-section { padding: 60px 0 !important; }
  .who-left { position: static !important; }
  .who-title { font-size: clamp(36px, 10vw, 52px) !important; }

  /* Philosophy section */
  .phil-section { padding: 60px 20px !important; }

  /* Contact details card */
  .contact-details-card { padding: 28px 20px; }

  /* ── REDUCE HEAVY EFFECTS ON PHONES ── */
  .cursor-glow { display: none !important; }
  .card-shine { display: none !important; }
}

/* ══════════════════════════════════════════
   LEGAL PAGES (Privacy Policy, Terms of Use)
   ══════════════════════════════════════════ */
.legal-hero {
  padding: 160px 40px 80px;
  background: var(--ink);
  text-align: center;
}
.legal-hero-inner {
  max-width: 700px;
  margin: 0 auto;
}
.legal-hero .section-label {
  justify-content: center;
  color: var(--red);
}
.legal-hero .section-label::before { display: none; }
.legal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(42px, 8vw, 72px);
  color: #fff;
  letter-spacing: 4px;
  line-height: 1;
  margin-bottom: 20px;
}
.legal-rule {
  width: 40px;
  height: 2px;
  background: var(--red);
  margin: 0 auto 20px;
}
.legal-updated {
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.legal-body {
  padding: 80px 40px;
  background: #fff;
}
.legal-inner {
  max-width: 800px;
  margin: 0 auto;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
.legal-inner h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: #111;
  letter-spacing: 2px;
  margin: 48px 0 16px;
}
.legal-inner h2:first-of-type {
  margin-top: 0;
}
.legal-inner h3 {
  font-family: 'Barlow', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #111;
  margin: 28px 0 12px;
}
.legal-inner p {
  margin-bottom: 16px;
}
.legal-inner ul {
  margin: 0 0 20px 24px;
  padding: 0;
}
.legal-inner li {
  margin-bottom: 8px;
}

/* ── Dense legal styling (Privacy Policy + Terms of Use) ──
   Smaller font, tighter line-height, compact paragraphs, and a clear
   numbered-section hierarchy — designed to fit comprehensive text without
   visual fatigue. Applied via .legal-dense on the inner container. */
.legal-inner.legal-dense {
  font-size: 13.5px;
  line-height: 1.65;
  color: #2a2a2a;
  max-width: 820px;
}
.legal-inner.legal-dense .legal-preamble {
  font-size: 13px;
  line-height: 1.6;
  background: #f7f3f3;
  border-left: 3px solid var(--red);
  padding: 14px 18px;
  margin: 0 0 36px;
  color: #1a1a1a;
}
.legal-inner.legal-dense h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: #111;
  margin: 36px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e6e6e6;
}
.legal-inner.legal-dense h2:first-of-type { margin-top: 0; }
.legal-inner.legal-dense h3 {
  font-family: 'Barlow', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #111;
  margin: 22px 0 8px;
  text-transform: none;
}
.legal-inner.legal-dense p {
  font-size: 13.5px;
  line-height: 1.65;
  margin-bottom: 12px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.legal-inner.legal-dense ul {
  margin: 6px 0 16px 22px;
  padding: 0;
  list-style: disc;
}
.legal-inner.legal-dense li {
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 6px;
  text-align: justify;
  text-justify: inter-word;
}
.legal-inner.legal-dense strong { color: #111; font-weight: 600; }
.legal-inner.legal-dense a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--red) 40%, transparent);
}
.legal-inner.legal-dense a:hover { border-bottom-color: var(--red); }

@media (max-width: 768px) {
  .legal-inner.legal-dense {
    font-size: 13px;
    line-height: 1.6;
    max-width: 100%;
    padding: 0;
  }
  .legal-inner.legal-dense h2 { font-size: 18px; margin: 28px 0 8px; }
  .legal-inner.legal-dense p,
  .legal-inner.legal-dense li {
    font-size: 13px;
    text-align: left;
  }
  .legal-inner.legal-dense .legal-preamble { font-size: 12.5px; padding: 12px 14px; }
}
@media (max-width: 480px) {
  .legal-inner.legal-dense {
    font-size: 12.5px;
  }
  .legal-inner.legal-dense p,
  .legal-inner.legal-dense li {
    font-size: 12.5px;
  }
  .legal-inner.legal-dense h2 { font-size: 17px; letter-spacing: 1px; }
}
.legal-inner a {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.legal-inner a:hover {
  border-bottom-color: var(--red);
}
@media (max-width: 768px) {
  .legal-hero { padding: 120px 20px 60px; }
  .legal-body { padding: 50px 20px; }
  .legal-inner h2 { font-size: 24px; margin-top: 36px; }
}

/* ═══════════════════════════════════════════════════════════
   SILICA CANVAS HOSTS — Quartz Genesis (home) + Granulometry Symphony (products)
═══════════════════════════════════════════════════════════ */
.silica-canvas-host {
  background: radial-gradient(ellipse at 50% 55%, #0d0708 0%, #050505 72%);
  contain: layout paint;
}
.silica-canvas-host canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto;
}

/* ─────────────────────────────────────────────────────
   HOME HERO — Cinematic Video Treatment
   Million-dollar feel: subtle Ken Burns on the video,
   vignette, letterbox bars, thin red frame lines,
   corner viewfinder brackets, drifting dust motes.
───────────────────────────────────────────────────── */
.hero-cinematic { background: #000; }
.hero-cinematic .hero-bg {
  will-change: transform;
  animation: heroKenburns 32s ease-in-out infinite alternate;
}
@keyframes heroKenburns {
  0%   { transform: scale(1.0) translate(0%, 0%); }
  100% { transform: scale(1.07) translate(-1.5%, 0.8%); }
}
.hero-cinematic .hero-video {
  filter: brightness(0.72) contrast(1.20) saturate(0.92);
}

/* Vignette — refined cinematic darken at edges */
.hero-cinematic .hero-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 110% 85% at center, transparent 30%, rgba(0,0,0,0.55) 92%, rgba(0,0,0,0.85) 100%);
}

/* Letterbox bars — thin, top and bottom */
.hero-cinematic .hero-letterbox {
  position: absolute; left: 0; right: 0; height: 56px;
  z-index: 3; pointer-events: none;
}
.hero-cinematic .hero-letterbox-top {
  top: 0;
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 55%, transparent 100%);
}
.hero-cinematic .hero-letterbox-bot {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 55%, transparent 100%);
}

/* Hairline red frame lines — sit on the inner edge of the letterboxes */
.hero-cinematic .hero-frameline {
  position: absolute; left: 8%; right: 8%; height: 1px;
  z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(192,0,12,0.35) 18%, rgba(192,0,12,0.65) 50%, rgba(192,0,12,0.35) 82%, transparent 100%);
}
.hero-cinematic .hero-frameline-top { top: 56px; }
.hero-cinematic .hero-frameline-bot { bottom: 56px; }

/* Corner viewfinder brackets — premium luxury cinema feel */
.hero-cinematic .hero-corner {
  position: absolute; width: 28px; height: 28px;
  z-index: 4; pointer-events: none; opacity: 0.65;
  animation: cornerFade 1.4s ease-out 0.6s both;
}
.hero-cinematic .hero-corner-tl { top: 78px;    left: 64px;  border-top: 1px solid #C0000C; border-left: 1px solid #C0000C; }
.hero-cinematic .hero-corner-tr { top: 78px;    right: 64px; border-top: 1px solid #C0000C; border-right: 1px solid #C0000C; }
.hero-cinematic .hero-corner-bl { bottom: 78px; left: 64px;  border-bottom: 1px solid #C0000C; border-left: 1px solid #C0000C; }
.hero-cinematic .hero-corner-br { bottom: 78px; right: 64px; border-bottom: 1px solid #C0000C; border-right: 1px solid #C0000C; }
@keyframes cornerFade { from { opacity: 0; transform: scale(0.5); } to { opacity: 0.65; transform: scale(1); } }

/* Drifting dust motes — subtle golden particles rising slowly */
.hero-cinematic .hero-dust {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
}
.hero-cinematic .hero-dust-mote {
  position: absolute;
  bottom: -10px;
  width: 2px; height: 2px;
  background: rgba(255, 210, 150, 0.85);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 180, 100, 0.7);
  animation-name: dustRise;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.hero-cinematic .hero-dust-mote:nth-child(3n) {
  background: rgba(255, 230, 200, 0.65);
  box-shadow: 0 0 5px rgba(255, 200, 130, 0.55);
}
.hero-cinematic .hero-dust-mote:nth-child(5n) {
  background: rgba(255, 180, 100, 0.9);
  box-shadow: 0 0 8px rgba(255, 140, 50, 0.75);
}
@keyframes dustRise {
  0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { transform: translate(28px, -110vh) scale(1.2); opacity: 0; }
}

/* Overlays tuned for the video */
.hero-cinematic .hero-ov1 {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.15) 28%,
    rgba(0,0,0,0.05) 50%,
    rgba(0,0,0,0.22) 78%,
    rgba(0,0,0,0.55) 100%);
}
.hero-cinematic .hero-ov2 {
  background: radial-gradient(ellipse 58% 42% at 50% 48%, rgba(0,0,0,0.38) 0%, transparent 75%);
}
.hero-cinematic .hero-glow { opacity: 0.85; }
.hero-cinematic .hero-title {
  text-shadow: 0 2px 26px rgba(0,0,0,0.92), 0 0 80px rgba(0,0,0,0.55), 0 0 3px rgba(0,0,0,0.7);
}
.hero-cinematic .hero-tag { text-shadow: 0 2px 18px rgba(0,0,0,0.92); }
.hero-cinematic .hero-desc { text-shadow: 0 1px 14px rgba(0,0,0,0.88); }

/* Mobile: keep cinematic vibe but shrink margins */
@media (max-width: 768px) {
  .hero-cinematic .hero-letterbox { height: 36px; }
  .hero-cinematic .hero-corner { width: 18px; height: 18px; }
  .hero-cinematic .hero-corner-tl,
  .hero-cinematic .hero-corner-tr { top: 50px; }
  .hero-cinematic .hero-corner-bl,
  .hero-cinematic .hero-corner-br { bottom: 50px; }
  .hero-cinematic .hero-corner-tl,
  .hero-cinematic .hero-corner-bl { left: 22px; }
  .hero-cinematic .hero-corner-tr,
  .hero-cinematic .hero-corner-br { right: 22px; }
  .hero-cinematic .hero-frameline-top { top: 36px; }
  .hero-cinematic .hero-frameline-bot { bottom: 36px; }
  .hero-cinematic .hero-frameline { left: 4%; right: 4%; }
  /* Trim dust motes to half on phones — less paint, same vibe */
  .hero-cinematic .hero-dust-mote:nth-child(2n) { display: none; }
  /* Disable Ken Burns on mobile — saves battery, smoother scroll */
  .hero-cinematic .hero-bg { animation: none; }
}

/* ── Products hero (Granulometry Symphony — lining animation) ── */
.prod-hero-silica { background: #060406; }
.prod-hero-silica .ph-bg {
  animation: none !important;
  background-image: none !important;
}
.prod-hero-silica .ph-ov {
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.30) 55%, rgba(0,0,0,0.78) 100%);
}
.prod-hero-silica .ph-title {
  text-shadow: 0 2px 22px rgba(0,0,0,0.75);
}
.prod-hero-silica .ph-desc {
  text-shadow: 0 1px 10px rgba(0,0,0,0.85);
}

/* ── The Science CTA strip on /products ── */
.prod-science-cta {
  background: linear-gradient(135deg, #0a0608 0%, #1c0a0e 50%, #0a0608 100%);
  border-top: 1px solid rgba(192,0,12,0.15);
  border-bottom: 1px solid rgba(192,0,12,0.15);
  padding: 56px 60px;
}
.psc-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px; flex-wrap: wrap;
}
.psc-text { flex: 1; min-width: 280px; }
.psc-eyebrow {
  font-family: var(--font-body); font-size: var(--text-sm); font-style: italic;
  font-weight: 300; letter-spacing: 0; text-transform: none;
  color: var(--ink-3); margin-bottom: var(--space-2);
}
.psc-title {
  font-family: 'Bebas Neue',sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -0.02em; color: #fff; line-height: 1.0; margin-bottom: 8px;
  text-wrap: balance;
}
.psc-title span { color: var(--red); }
.psc-desc {
  font-family: 'Barlow',sans-serif; font-size: 14px; font-weight: 300;
  color: rgba(255,255,255,0.55); line-height: 1.7; margin: 0; max-width: 540px;
  text-wrap: pretty;
}
.psc-cta {
  font-family: 'Bebas Neue',sans-serif; font-size: 14px; letter-spacing: 0.18em;
  color: #fff; text-decoration: none;
  border: 1px solid rgba(192,0,12,0.6);
  padding: 14px 26px;
  background: rgba(192,0,12,0.10);
  transition: background var(--dur-2) var(--ease-out-quart),
              border-color var(--dur-2) var(--ease-out-quart),
              transform var(--dur-1) var(--ease-out-quart);
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .psc-cta:hover { background: var(--red); border-color: var(--red); }
  .psc-cta:hover span { transform: translateX(4px); }
}
.psc-cta:active { transform: scale(0.97); transition-duration: 80ms; }
.psc-cta span { transition: transform var(--dur-2) var(--ease-out-quart); }
@media (max-width: 768px) {
  .prod-science-cta { padding: 40px 24px; }
  .psc-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL-REVEAL — used across /the-science (and reusable).

   Defensive default: every [data-ts-reveal] element is fully
   visible.  The hidden state only applies when <html> carries
   .has-ts-reveal, which the inline script in the JS bundle
   adds the moment the document starts parsing.  This means:
   - No JS / JS error → content ships visible.
   - Slow scroll into view → no half-dim mid-transition state
     trapped on screen, because the reveal runs faster (0.6s).
═══════════════════════════════════════════════════════════ */
[data-ts-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.has-ts-reveal [data-ts-reveal]:not(.is-in)              { opacity: 0; transform: translateY(40px); }
.has-ts-reveal [data-ts-reveal="left"]:not(.is-in)       { transform: translateX(-70px); }
.has-ts-reveal [data-ts-reveal="right"]:not(.is-in)      { transform: translateX(70px); }
.has-ts-reveal [data-ts-reveal="up"]:not(.is-in)         { transform: translateY(50px); }
.has-ts-reveal [data-ts-reveal="scale"]:not(.is-in)      { transform: scale(0.92); }
.has-ts-reveal [data-ts-reveal="fade"]:not(.is-in)       { transform: none; }
.has-ts-reveal [data-ts-reveal="rise"]:not(.is-in)       { transform: translateY(28px); }
.has-ts-reveal [data-ts-reveal].is-in                    { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════════════════════
   /THE-SCIENCE PAGE — silica transformation journey
═══════════════════════════════════════════════════════════ */
.ts-hero {
  position: relative;
  min-height: 60vh;
  padding: 180px 60px 100px;
  background: #060608;
  overflow: hidden;
  display: flex; align-items: center;
}
.ts-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(192,0,12,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #050507 0%, #0c0608 100%);
  pointer-events: none;
}
.ts-hero-content { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; text-align: center; }
.ts-hero-eyebrow {
  font-family: 'Barlow Condensed',sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 7px; text-transform: uppercase; color: rgba(192,0,12,0.85);
  margin-bottom: 22px;
}
.ts-hero-title {
  font-family: 'Bebas Neue',sans-serif;
  font-size: clamp(56px, 9vw, 132px);
  letter-spacing: 6px; line-height: 0.88; color: #fff;
  margin-bottom: 26px;
}
.ts-hero-title span { color: var(--red); }
.ts-hero-desc {
  font-family: 'Barlow',sans-serif; font-size: 16px; font-weight: 300;
  line-height: 1.8; color: rgba(255,255,255,0.55);
  max-width: 640px; margin: 0 auto 44px;
}
.ts-hero-jumps {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; max-width: 880px; margin: 0 auto;
}
.ts-jump {
  font-family: 'Barlow Condensed',sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.6); text-decoration: none;
  padding: 10px 16px;
  border: 1px solid rgba(255,255,255,0.10);
  transition: all 0.25s;
  display: inline-flex; align-items: center; gap: 8px;
}
.ts-jump span { color: var(--red); font-weight: 700; opacity: 0.85; }
.ts-jump:hover { color: #fff; border-color: rgba(192,0,12,0.6); background: rgba(192,0,12,0.06); }

/* ── Stage sections ── */
.ts-stage {
  padding: 130px 60px;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.ts-stage-dark    { background: #0a0a0c; }
.ts-stage-darker  { background: #060608; }
.ts-stage-blackest{ background: #040406; }
.ts-stage-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px;
  align-items: center;
}
.ts-stage-inner.ts-flip > .ts-stage-text { order: 2; }
.ts-stage-inner.ts-flip > .ts-stage-canvas { order: 1; }
.ts-stage-inner.ts-stack { grid-template-columns: 1fr; gap: 56px; }
.ts-text-center { text-align: center; max-width: 720px; margin: 0 auto; }
.ts-stage-num {
  font-family: 'Bebas Neue',sans-serif; font-size: 80px; line-height: 0.85;
  color: rgba(192,0,12,0.18); margin-bottom: 12px;
}
.ts-stage-eyebrow {
  font-family: 'Barlow Condensed',sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 6px; text-transform: uppercase; color: var(--red);
  margin-bottom: 18px;
}
.ts-stage-title {
  font-family: 'Bebas Neue',sans-serif;
  font-size: clamp(36px, 4.4vw, 60px);
  letter-spacing: 3px; line-height: 0.92; color: #fff;
  margin-bottom: 22px;
}
.ts-stage-title span { color: var(--red); }
.ts-stage-desc {
  font-family: 'Barlow',sans-serif; font-size: 15px; font-weight: 300;
  line-height: 1.85; color: rgba(255,255,255,0.55); max-width: 460px;
  margin-bottom: 28px;
}
.ts-text-center .ts-stage-desc { margin-left: auto; margin-right: auto; }

/* spec lists */
.ts-spec-list { list-style: none; padding: 0; margin: 16px 0 0; }
.ts-spec-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: 'Barlow Condensed',sans-serif;
  font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
}
.ts-spec-list span { color: rgba(255,255,255,0.45); }
.ts-spec-list b { color: #fff; font-weight: 700; }

/* grade cards */
.ts-grade-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.ts-grade-card {
  background: rgba(255,255,255,0.025);
  border-left: 2px solid var(--red);
  padding: 14px 18px;
}
.ts-grade-size {
  font-family: 'Bebas Neue',sans-serif; font-size: 18px; letter-spacing: 2px;
  color: #fff;
}
.ts-grade-name {
  font-family: 'Barlow Condensed',sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: rgba(255,255,255,0.7);
  margin-top: 3px;
}
.ts-grade-note {
  font-family: 'Barlow',sans-serif; font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.45); margin-top: 6px; font-style: italic;
}

/* zone legends */
.ts-zones { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.ts-zone {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 14px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ts-zone span { display: block; height: 8px; border-radius: 0; }
.ts-zone b {
  font-family: 'Barlow Condensed',sans-serif; font-size: 13px;
  letter-spacing: 2px; text-transform: uppercase; color: #fff; font-weight: 700;
}
.ts-zone i {
  font-family: 'Barlow',sans-serif; font-size: 11px; font-weight: 300;
  color: rgba(255,255,255,0.5); font-style: normal;
}

/* canvas hosts */
.ts-stage-canvas {
  position: relative;
  width: 100%; height: 520px;
  background: radial-gradient(ellipse at 50% 60%, #1a0a08 0%, #060406 80%);
  overflow: hidden;
}
.ts-stage-canvas-wide { height: 640px; }

/* Stage 3 — Recipe layout */
.ts-recipe {
  display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap;
  gap: 14px; margin: 36px 0 0;
}
.ts-recipe-item {
  flex: 1; min-width: 180px; max-width: 240px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 22px 18px;
  text-align: center;
}
.ts-recipe-pct {
  font-family: 'Bebas Neue',sans-serif; font-size: 38px; letter-spacing: 1px;
  color: #fff; line-height: 1;
}
.ts-recipe-dot {
  width: 12px; height: 12px; border-radius: 50%;
  margin: 12px auto 14px;
  box-shadow: 0 0 18px rgba(232,144,72,0.55);
}
.ts-recipe-label {
  font-family: 'Barlow Condensed',sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: #fff;
  margin-bottom: 6px;
}
.ts-recipe-note {
  font-family: 'Barlow',sans-serif; font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.55); line-height: 1.5;
}
.ts-recipe-plus, .ts-recipe-equals {
  font-family: 'Bebas Neue',sans-serif; font-size: 28px; letter-spacing: 1px;
  color: rgba(192,0,12,0.7);
  display: flex; align-items: center;
}
.ts-recipe-result {
  flex: 1; min-width: 220px; max-width: 280px;
  background: linear-gradient(135deg, rgba(192,0,12,0.20), rgba(80,4,4,0.55));
  border: 1px solid rgba(192,0,12,0.40);
  padding: 24px 20px;
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.ts-recipe-result-label {
  font-family: 'Bebas Neue',sans-serif; font-size: 20px; letter-spacing: 2.5px;
  color: #fff; margin-bottom: 8px;
}
.ts-recipe-result-note {
  font-family: 'Barlow',sans-serif; font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.65); line-height: 1.5;
}

/* Stage 4 — Binder cards */
.ts-binder-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 36px 0 0; max-width: 1200px;
}
.ts-binder-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid rgba(255,255,255,0.15);
  padding: 28px 24px;
  display: flex; flex-direction: column;
}
.ts-binder-mid {
  border-top-color: #5a2018;
  background: rgba(90,32,24,0.10);
}
.ts-binder-premium {
  border-top-color: #C0000C;
  background: linear-gradient(180deg, rgba(192,0,12,0.10) 0%, rgba(192,0,12,0.02) 100%);
  box-shadow: 0 0 60px rgba(192,0,12,0.10);
}
.ts-binder-tag {
  display: inline-block; align-self: flex-start;
  font-family: 'Barlow Condensed',sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 5px 10px; margin-bottom: 18px;
}
.ts-binder-name {
  font-family: 'Bebas Neue',sans-serif; font-size: 22px; letter-spacing: 2px;
  color: #fff; margin-bottom: 5px;
}
.ts-binder-sub {
  font-family: 'Barlow',sans-serif; font-size: 12px; font-weight: 400; font-style: italic;
  color: rgba(255,255,255,0.50); margin-bottom: 16px;
}
.ts-binder-body {
  font-family: 'Barlow',sans-serif; font-size: 14px; font-weight: 300;
  color: rgba(255,255,255,0.7); line-height: 1.75;
  margin: 0 0 18px;
}
.ts-binder-strip {
  margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06);
  font-family: 'Barlow Condensed',sans-serif; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: baseline;
}
.ts-binder-strip span { color: rgba(255,255,255,0.40); }
.ts-binder-strip b { color: #fff; font-weight: 700; text-align: right; }

@media (max-width: 900px) {
  .ts-binder-cards { grid-template-columns: 1fr; }
  .ts-recipe-plus, .ts-recipe-equals { display: none; }
}

/* Stage 7 — Phase Transformation zone cards (below the working-lining viz) */
.ts-phase-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 48px 0 0; max-width: 1200px;
}
.ts-phase-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 0 24px 26px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ts-phase-band { height: 6px; margin: 0 -24px 22px; }
.ts-phase-tag {
  font-family: 'Barlow Condensed',sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.45); margin-bottom: 10px;
}
.ts-phase-name {
  font-family: 'Bebas Neue',sans-serif; font-size: 22px; letter-spacing: 2px;
  color: #fff; margin-bottom: 4px;
}
.ts-phase-sub {
  font-family: 'Barlow',sans-serif; font-size: 12px; font-weight: 400; font-style: italic;
  color: rgba(255,255,255,0.50); margin-bottom: 16px;
}
.ts-phase-body {
  font-family: 'Barlow',sans-serif; font-size: 13px; font-weight: 300;
  color: rgba(255,255,255,0.72); line-height: 1.75; margin: 0;
}
@media (max-width: 900px) {
  .ts-phase-cards { grid-template-columns: 1fr; }
}

/* FURNEX outro section */
.ts-furnex-outro {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(192,0,12,0.20) 0%, transparent 65%),
    linear-gradient(135deg, #08080a 0%, #1a0408 50%, #08080a 100%);
  padding: 130px 60px 120px;
  text-align: center;
  border-top: 1px solid rgba(192,0,12,0.20);
}
.ts-furnex-inner { max-width: 820px; margin: 0 auto; }
.ts-furnex-eyebrow {
  font-family: 'Barlow Condensed',sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 6px; text-transform: uppercase; color: rgba(192,0,12,0.85);
  margin-bottom: 22px;
}
.ts-furnex-title {
  font-family: 'Bebas Neue',sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: 4px; line-height: 0.92; color: #fff;
  margin-bottom: 24px;
}
.ts-furnex-title span { color: var(--red); }
.ts-furnex-desc {
  font-family: 'Barlow',sans-serif; font-size: 16px; font-weight: 300;
  color: rgba(255,255,255,0.65); line-height: 1.85;
  max-width: 660px; margin: 0 auto 30px;
}
.ts-furnex-bullets {
  list-style: none; padding: 0; margin: 0 auto 38px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 960px;
  text-align: left;
}
.ts-furnex-bullets li {
  font-family: 'Barlow',sans-serif; font-size: 13.5px; line-height: 1.65;
  color: rgba(255,255,255,0.68);
  padding: 4px 0 4px 18px;
  border-left: 2px solid var(--red);
}
.ts-furnex-bullets li b {
  display: block; font-family: 'Bebas Neue',sans-serif; font-size: 18px;
  letter-spacing: 2.5px; color: #fff; margin-bottom: 6px;
}
.ts-furnex-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 900px) {
  .ts-furnex-bullets { grid-template-columns: 1fr; max-width: 380px; gap: 16px; }
}
@media (max-width: 768px) {
  .ts-furnex-outro { padding: 80px 24px; }
}

/* CTA strip */
.ts-cta {
  background: linear-gradient(135deg, #08080a 0%, #1a0408 100%);
  padding: 110px 60px;
  text-align: center;
  border-top: 1px solid rgba(192,0,12,0.18);
}
.ts-cta-inner { max-width: 800px; margin: 0 auto; }
.ts-cta-title {
  font-family: 'Bebas Neue',sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: 3px; line-height: 0.92; color: #fff; margin-bottom: 22px;
}
.ts-cta-title span { color: var(--red); }
.ts-cta-desc {
  font-family: 'Barlow',sans-serif; font-size: 15px; font-weight: 300;
  line-height: 1.85; color: rgba(255,255,255,0.55);
  max-width: 540px; margin: 0 auto 38px;
}
.ts-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Mobile */
@media (max-width: 900px) {
  .ts-stage-inner,
  .ts-stage-inner.ts-flip {
    grid-template-columns: 1fr; gap: 48px;
  }
  .ts-stage-inner.ts-flip > .ts-stage-text { order: 1; }
  .ts-stage-inner.ts-flip > .ts-stage-canvas { order: 2; }
}
@media (max-width: 768px) {
  .ts-hero { padding: 130px 24px 70px; min-height: 0; }
  .ts-hero-jumps { gap: 8px; }
  .ts-jump { font-size: 10px; padding: 8px 12px; letter-spacing: 1.5px; }
  .ts-stage { padding: 80px 24px; }
  .ts-stage-num { font-size: 56px; }
  .ts-stage-canvas { height: 380px; }
  .ts-stage-canvas-wide { height: 460px; }
  .ts-cta { padding: 70px 24px; }
}


/* ═══════════════════════════════════════════════════════════
   I-IMPECCABLE OVERHAUL · Phase A — Foundation layer.

   Loaded after every other rule so it wins.  Implements the
   token system from DESIGN.md, retires banned patterns
   (side-stripes, default tracked-uppercase eyebrows, layout-
   property transitions, bounce/elastic), and adds the new
   editorial section + accent-card components.
═══════════════════════════════════════════════════════════ */

/* ── Banned pattern: side-stripe red borders ──
   We retire every `border-left: Npx solid var(--red)` decorative
   accent across the codebase by neutralising it on the components
   that used it most, and providing an opt-in `.accent-top` and
   `.accent-frame` replacement. Components that genuinely need an
   emphasis bar use the top-bar treatment. */

.gran-hud,
.gran-badge,
.furnace-callout-inner,
.ts-grade-card,
.ts-binder-card,
.ts-phase-card,
.ts-furnex-bullets li,
.ts-recipe-result,
.psc-cta,
.psc-text > .psc-eyebrow + .psc-title { border-left-width: 0 !important; }

/* The cards that need genuine emphasis get a top accent bar instead.
   Each card kind has a tunable --accent-c so the chrome stays unified
   but the differentiation between (BASEMIX / BORIC / BORON) is preserved. */
.ts-binder-card,
.ts-phase-card,
.ts-recipe-result,
.ts-grade-card {
  position: relative;
  border: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
  background: var(--bg-2);
  isolation: isolate;
  --accent-c: color-mix(in oklch, var(--ink) 14%, transparent);
}
.ts-binder-mid     { --accent-c: oklch(50% 0.10 30); }  /* boric copper */
.ts-binder-premium { --accent-c: var(--red); }
.ts-binder-card::before,
.ts-phase-card::before,
.ts-grade-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 2px;
  background: var(--accent-c);
  z-index: 1;
}
.ts-binder-premium {
  border-color: color-mix(in oklch, var(--red) 22%, transparent);
  box-shadow: 0 0 90px -20px color-mix(in oklch, var(--red) 35%, transparent);
}
.ts-recipe-result {
  border-color: color-mix(in oklch, var(--red) 35%, transparent);
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--red) 14%, transparent) 0%,
    color-mix(in oklch, var(--red) 4%, transparent) 100%);
}

/* FURNEX outro bullets — replace side-stripe with top-aligned dot + thin top hairline */
.ts-furnex-bullets li {
  padding: 18px 0 4px 0;
  border-top: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  position: relative;
}
.ts-furnex-bullets li::before {
  content: '';
  position: absolute; left: 0; top: -4px;
  width: 36px; height: 2px; background: var(--red);
}

/* HUD overlay (Granulometry) — replace red side-stripe with thin top hairline */
.gran-hud {
  border-top: 1px solid color-mix(in oklch, var(--red) 50%, transparent);
}
.gran-badge {
  border-top: 2px solid var(--ink);
  background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%);
}
.furnace-callout-inner {
  border-top: 1px solid var(--red);
}

/* ── Banned pattern: layout-property transitions ──
   We override the four offenders with transform-based alternatives. */

.nav-links a::after { transition: transform var(--dur-2) var(--ease-out-quart); }
.silica-grains-and-powder .pj-item,
.pj-item { transition: color var(--dur-2) var(--ease-out-quart); }

/* ── Banned pattern: bounce easing — retire .scroll-cue and any inheritors ── */
@keyframes scrollHintMove {
  0%   { transform: translateY(0);    opacity: 0.9; }
  50%  { transform: translateY(6px);  opacity: 1; }
  100% { transform: translateY(0);    opacity: 0.9; }
}
.scroll-arrow { animation: scrollHintMove 2.2s var(--ease-out-quart) infinite; }

/* ── Banned pattern: default tracked-uppercase eyebrow ──
   We leave existing in place where they are clearly intentional brand voice
   (.eyebrow, .ph-eyebrow, .fx-label on /furnex are kept) but ensure new
   editorial sections use heading-only delimiters. The .editorial-eyebrow
   utility lets one specific section use a kicker as deliberate voice; the
   default for new sections is no eyebrow. */

.editorial-section {
  padding: var(--space-10) var(--gutter);
}
.editorial-section + .editorial-section { padding-top: 0; }
.editorial-section > .editorial-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.editorial-heading {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: var(--space-5);
}
.editorial-heading .accent { color: var(--red); }
.editorial-lede {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
}

/* Editorial indexed run: large display number aligned to heading (replaces 01/02/03 scaffolding) */
.editorial-index {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-5);
  align-items: baseline;
  margin-bottom: var(--space-5);
}
.editorial-index-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: color-mix(in oklch, var(--ink) 18%, transparent);
}
.editorial-index .editorial-heading { margin-bottom: 0; }

/* ── Hero title cascade utility ──
   Splits a heading into per-word lines that reveal with clip-path + translateY.
   Used on /the-science hero, and any other hero we wire up. */
.hero-cascade { display: inline-block; perspective: 1000px; }
.hero-cascade-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.hero-cascade-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition:
    transform var(--dur-5) var(--ease-out-expo),
    opacity var(--dur-4) var(--ease-out-quart);
  opacity: 0;
}
.hero-cascade.is-in .hero-cascade-line > span {
  transform: translateY(0);
  opacity: 1;
}

/* Per-line stagger (up to 6 lines) */
.hero-cascade.is-in .hero-cascade-line:nth-child(1) > span { transition-delay: 0ms; }
.hero-cascade.is-in .hero-cascade-line:nth-child(2) > span { transition-delay: 80ms; }
.hero-cascade.is-in .hero-cascade-line:nth-child(3) > span { transition-delay: 160ms; }
.hero-cascade.is-in .hero-cascade-line:nth-child(4) > span { transition-delay: 240ms; }
.hero-cascade.is-in .hero-cascade-line:nth-child(5) > span { transition-delay: 320ms; }
.hero-cascade.is-in .hero-cascade-line:nth-child(6) > span { transition-delay: 400ms; }

/* ── Refined scroll reveal ──
   Tightens easing curves and adds three more variants used by the
   editorial sections we'll introduce in Phase B-E. */
[data-ts-reveal] {
  transition-timing-function: var(--ease-out-expo);
}
[data-ts-reveal="fade"]  { transform: none; }
[data-ts-reveal="rise"]  { transform: translateY(28px); }
[data-ts-reveal="fade"].is-in,
[data-ts-reveal="rise"].is-in { transform: none; }

/* ── Reduced motion ──
   Emil rule: keep opacity transitions for comprehension; drop
   transform / position-based motion. The JS observer short-
   circuits, so reveals snap to .is-in immediately. The
   200ms opacity transition below is the only motion the user
   sees on reveal. Hover lifts and press scales are stripped
   on the components that use them. Keyframe animations are
   suppressed globally. */
@media (prefers-reduced-motion: reduce) {
  /* Reveal: opacity only, no transform */
  [data-ts-reveal] {
    transition: opacity 200ms ease !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
  .has-ts-reveal [data-ts-reveal]:not(.is-in) { transform: none !important; }

  /* Hero cascade: snap to final position */
  .hero-cascade-line > span {
    transform: none !important;
    opacity: 1 !important;
    transition: opacity 1ms linear !important;
  }

  /* Strip hover/press transforms across buttons + cards */
  .btn-primary,
  .btn-outline-red,
  .btn-on-red,
  .btn-on-red-outline,
  .psc-cta,
  .hiw-card,
  .prod-card,
  .advantage-card,
  .social-btn,
  #scrollTop {
    transform: none !important;
  }
  .btn-primary:hover, .btn-primary:active,
  .btn-outline-red:hover, .btn-outline-red:active,
  .btn-on-red:hover, .btn-on-red:active,
  .btn-on-red-outline:hover, .btn-on-red-outline:active,
  .psc-cta:hover, .psc-cta:active,
  .hiw-card:hover, .hiw-card:active,
  .prod-card:hover, .prod-card:active,
  .advantage-card:hover,
  .social-btn:hover, .social-btn:active,
  #scrollTop:hover, #scrollTop:active {
    transform: none !important;
  }

  /* Kill keyframe animations globally — they're position/scale-driven */
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ── Focus visibility ──
   Brand-locked focus ring, accessible on all bg surfaces. */
:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--red-hot);
  outline-offset: 3px;
  border-radius: 1px;
}


/* ═══════════════════════════════════════════════════════════
   THE SCIENCE PAGE · editorial pass — retire scaffold-grammar
   on the eight stages without reauthoring the markup.

   Strategy:
   1. The .ts-stage-num scaffolded numerical block becomes a
      small label that sits next to a hairline rule, then the
      heading. The chapter index reads, but no longer dominates.
   2. The .ts-stage-eyebrow tracked-uppercase kicker is demoted
      to a sentence-case subtitle, integrated with the heading
      rather than scaffolded above every section.
   3. Section titles get a balance + max-width discipline.
═══════════════════════════════════════════════════════════ */

/* Top scaffold: small chapter index + hairline rule */
.ts-stage-num {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  margin-bottom: var(--space-3);
  text-transform: none;
}
.ts-stage-num::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--red);
}
.ts-stage-num::after {
  content: ' · CHAPTER';
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Eyebrow retirement — demote to a subtitle, lose the tracking,
   keep it as voiced sentence case introducing the heading. */
.ts-stage-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  margin-bottom: var(--space-3);
}

/* Headings: pull tracking tighter and let titles breathe. */
.ts-stage-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: #fbfbfb;
  margin-bottom: var(--space-5);
  text-wrap: balance;
  max-width: 22ch;
}
.ts-stage-title span { color: var(--red); }
/* Defensive: in case cascade or animation isn't applied, the title is still
   bright white. */
.ts-stage-text > h2.ts-stage-title { color: #fbfbfb; }
.ts-text-center .ts-stage-title { margin-left: auto; margin-right: auto; }

/* Descriptions: tighten body color, widen line-length budget */
.ts-stage-desc {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: rgba(255,255,255,0.74);
  margin: 0 0 var(--space-4);
  max-width: 60ch;
  text-wrap: pretty;
}
.ts-text-center .ts-stage-desc { margin-left: auto; margin-right: auto; }

/* Hero of /the-science — keep big, retire the eyebrow's tracking. */
.ts-hero-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--space-5);
}
/* Override duplicate-rule conflict: the original definition at line ~3597 set
   color:#fff which was being overridden by this later block to color:var(--ink)
   (dark on dark = invisible). Force white explicitly and constrain red to only
   the inline-styled span. */
.ts-hero-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 128px);
  letter-spacing: -0.02em;
  line-height: 0.88;
  color: #fff !important;
  margin-bottom: var(--space-5);
}
.ts-hero-title .hero-cascade-line,
.ts-hero-title .hero-cascade-line > span {
  color: #fff;
}
.ts-hero-title .hero-cascade-line > span[style*="color"] {
  /* Allow inline style="color:var(--red)" to win for the FURNACE LINING span */
  color: var(--red) !important;
}

/* Jump nav: looser items, no over-tracking */
.ts-hero-jumps { gap: var(--space-3); }
.ts-jump {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  padding: var(--space-3) var(--space-4);
  color: rgba(255,255,255,0.7);
  border: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
  transition: color var(--dur-2) var(--ease-out-quart), border-color var(--dur-2) var(--ease-out-quart), background var(--dur-2) var(--ease-out-quart);
}
.ts-jump span {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0;
  color: var(--red);
  margin-right: 2px;
  opacity: 0.85;
}
.ts-jump:hover {
  color: #fff;
  border-color: color-mix(in oklch, var(--red) 50%, transparent);
  background: color-mix(in oklch, var(--red) 5%, transparent);
}

/* FURNEX outro: bigger headline cadence */
.ts-furnex-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--red-hot);
}
.ts-furnex-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .ts-hero-title, .ts-stage-title, .ts-furnex-title {
    transition: opacity 1ms linear !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   HOME · The PSM Advantage — editorial showcase (replaces the
   six-identical-cards grid). One featured pair (Heritage + AI),
   one quiet baseline list, one strip CTA.
═══════════════════════════════════════════════════════════ */
.advantage {
  background: var(--bg);
  padding: var(--space-10) var(--gutter);
  color: #fbfbfb;
}
/* Override the legacy .why-section colors that leak through (because we
   kept .why-section on the element for backward compat). */
.advantage,
.advantage .advantage-card,
.advantage .advantage-card-title,
.advantage .advantage-title,
.advantage .advantage-baseline-title,
.advantage .advantage-baseline-list b,
.advantage .advantage-strip-txt .t1 { color: #fbfbfb; }
.advantage .advantage-lede,
.advantage .advantage-card-body,
.advantage .advantage-baseline-list span,
.advantage .advantage-strip-txt .t2 { color: rgba(255,255,255,0.72); }
.advantage .advantage-card-tag,
.advantage .advantage-baseline-title { color: rgba(255,255,255,0.55); }
.advantage-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.advantage-head {
  max-width: 880px;
  margin-bottom: var(--space-9);
}
.advantage-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: var(--space-4);
}
.advantage-title span { color: var(--red); }
.advantage-lede {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
}

/* Featured cards — two of them. Heritage left, AI right. */
.advantage-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-9);
}
.advantage-card {
  position: relative;
  padding: var(--space-7);
  background: var(--bg-2);
  border: 1px solid color-mix(in oklch, var(--ink) 6%, transparent);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-3) var(--ease-out-quart),
              border-color var(--dur-3) var(--ease-out-quart);
}
.advantage-card:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--ink) 14%, transparent); }
.advantage-card-tag {
  font-family: var(--font-ui);
  font-size: var(--text-3xs);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--space-6);
}
.advantage-card-fig {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  color: var(--ink);
}
.advantage-bignum {
  font-family: var(--font-display);
  font-size: clamp(96px, 14vw, 184px);
  letter-spacing: -0.03em;
  line-height: 0.85;
  color: #fbfbfb;
}
.advantage-bigunit {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: 0;
  color: rgba(255,255,255,0.55);
  line-height: 0.95;
}
.advantage-bigword {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 120px);
  letter-spacing: -0.025em;
  line-height: 0.85;
  color: var(--ink);
}
.advantage-card-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}
.advantage-card-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}
.advantage-card-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--red);
  transition: color var(--dur-2) var(--ease-out-quart);
}
.advantage-card-link:hover { color: var(--red-hot); }

/* Heritage card — pull-quote authority */
.advantage-card--heritage { background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%); }
.advantage-card--heritage::after {
  content: '';
  position: absolute; right: -40px; bottom: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, color-mix(in oklch, var(--gold) 18%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* AI card — quiet red drench */
.advantage-card--ai {
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in oklch, var(--red) 18%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg-3) 100%);
  border-color: color-mix(in oklch, var(--red) 20%, transparent);
}
.advantage-card--ai .advantage-bigword { color: var(--red); }
.advantage-card--ai .advantage-card-tag { color: var(--red-hot); }

/* Baseline — the rest, quiet, in a 2-col list */
.advantage-baseline {
  border-top: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
  padding-top: var(--space-7);
  margin-bottom: var(--space-9);
}
.advantage-baseline-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-3);
  margin-bottom: var(--space-6);
  text-transform: none;
  letter-spacing: 0;
}
.advantage-baseline-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  column-gap: var(--space-7);
  row-gap: var(--space-5);
}
.advantage-baseline-list li {
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in oklch, var(--ink) 6%, transparent);
}
.advantage-baseline-list b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: var(--space-2);
  font-weight: 400;
}
.advantage-baseline-list span {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-2);
}

.advantage-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-7);
  background: var(--bg-2);
  border: 1px solid color-mix(in oklch, var(--ink) 6%, transparent);
  border-top: 2px solid var(--red);
  flex-wrap: wrap;
}
.advantage-strip-txt .t1 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: var(--space-1);
}
.advantage-strip-txt .t1 span { color: var(--red); }
.advantage-strip-txt .t2 {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--ink-2);
}

@media (max-width: 900px) {
  .advantage-feature { grid-template-columns: 1fr; gap: var(--space-5); }
  .advantage-card { padding: var(--space-6); }
  .advantage-strip { flex-direction: column; align-items: flex-start; padding: var(--space-6); }
}


/* ═══════════════════════════════════════════════════════════
   HOME · TEST · TAILOR · TRACK (3T framework).
   Editorial showcase — dark surface, no eyebrow scaffolding,
   no numbered badges, no connector arrows. Accent only on the
   FURNEX (AI) card. Press/hover motion per Emil + DESIGN.md.
═══════════════════════════════════════════════════════════ */
.hiw-section {
  background: var(--bg-2);
  padding: var(--space-10) var(--gutter);
}
.hiw-inner {
  max-width: var(--container);
  margin: 0 auto;
}
.hiw-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-9);
}
.hiw-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.21rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.hiw-title-r { color: var(--red); }
.hiw-lede {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
  margin: 0 auto;
  max-width: 60ch;
}

.hiw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
/* 2-card variant — used after Furnace Pulse was de-linked.
   Constrained max-width keeps cards from going too wide on big screens. */
.hiw-grid--two {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px;
  margin: 0 auto;
}
.hiw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--bg-3);
  border: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
  padding: var(--space-7) var(--space-6);
  color: var(--ink);
  transition: transform var(--dur-3) var(--ease-out-quart),
              border-color var(--dur-3) var(--ease-out-quart);
  will-change: transform;
  isolation: isolate;
}
.hiw-card--ai {
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in oklch, var(--red) 16%, transparent) 0%, transparent 60%),
    var(--bg-3);
  border-color: color-mix(in oklch, var(--red) 25%, transparent);
}
.hiw-card--ai::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--red);
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .hiw-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklch, var(--ink) 22%, transparent);
  }
  .hiw-card--ai:hover { border-color: color-mix(in oklch, var(--red) 45%, transparent); }
}
.hiw-card:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }

.hiw-card-icon {
  width: 40px;
  height: 40px;
  color: var(--red);
  margin-bottom: var(--space-6);
}
.hiw-card-icon svg { width: 100%; height: 100%; display: block; }

.hiw-card-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
.hiw-card-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 var(--space-5);
  text-wrap: pretty;
}
.hiw-card-body b { color: var(--ink); font-weight: 600; }
.hiw-card-get {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-3);
  margin: auto 0 var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
}
.hiw-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--red);
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in oklch, var(--red) 55%, transparent);
  align-self: flex-start;
  transition: color var(--dur-2) var(--ease-out-quart),
              border-color var(--dur-2) var(--ease-out-quart);
}
.hiw-card-cta-arrow {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine) {
  .hiw-card:hover .hiw-card-cta { color: var(--red-hot); border-color: var(--red-hot); }
  .hiw-card:hover .hiw-card-cta-arrow { transform: translateX(4px); }
}

.hiw-closing {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-style: italic;
  line-height: 1.65;
  color: var(--ink-2);
  text-align: center;
  margin: var(--space-9) auto 0;
  padding-top: var(--space-7);
  border-top: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
  max-width: 60ch;
  text-wrap: pretty;
}
.hiw-closing span { color: var(--red); font-style: normal; }

@media (max-width: 900px) {
  .hiw-grid, .hiw-grid--two { grid-template-columns: 1fr; gap: var(--space-4); }
  .hiw-grid--two { max-width: 520px; }
  .hiw-card { padding: var(--space-6) var(--space-5); }
  .hiw-head { margin-bottom: var(--space-7); }
}
@media (max-width: 480px) {
  .hiw-section { padding: var(--space-9) var(--space-4); }
}


/* ═══════════════════════════════════════════════════════════
   HOME · Furnace Pulse CTA + Molten + FURNEX band.
   Retires 7 tracked-uppercase eyebrows, doubled AI chip,
   diagonal hatch overlays, inline-onmouseover JS, and
   inline-style maintenance burden. Token-driven typography
   with explicit hex fallbacks where the about-page :root
   override would otherwise clobber --ink.
═══════════════════════════════════════════════════════════ */

/* ── FURNACE PULSE CTA ── */
.fpulse-cta {
  position: relative;
  background: #0c0f14;
  padding: var(--space-9) var(--gutter);
  border-top: 1px solid color-mix(in oklch, var(--red) 18%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--red) 18%, transparent);
  overflow: hidden;
  color: #fbfbfb;
}
.fpulse-cta-glow {
  position: absolute; top: 50%; left: 30%;
  transform: translate(-50%, -50%);
  width: 600px; height: 200px;
  background: radial-gradient(ellipse, color-mix(in oklch, var(--red) 12%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.fpulse-cta-inner {
  position: relative; z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  flex-wrap: wrap;
}
.fpulse-cta-text { flex: 1; min-width: 280px; }
.fpulse-cta-kicker {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  margin: 0 0 var(--space-3);
}
.fpulse-cta-h {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: #fbfbfb;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.fpulse-cta-h span { color: var(--red); }
.fpulse-cta-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}

/* ── Outlined red button (used for transparent-on-dark CTAs) ── */
.btn-outline-red {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  background: transparent;
  border: 2px solid var(--red);
  color: #fbfbfb;
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: 0.18em;
  padding: 16px 36px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--dur-2) var(--ease-out-quart),
              border-color var(--dur-2) var(--ease-out-quart),
              transform var(--dur-1) var(--ease-out-quart);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .btn-outline-red:hover { background: var(--red); transform: translateY(-1px); }
}
.btn-outline-red:active { transform: scale(0.97); transition-duration: 80ms; }

/* ── MOLTEN STARBURST · content typography ── */
.molten-h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 9vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: #fbfbfb;
  margin: 0 0 var(--space-3);
}
.molten-h1 span { color: var(--red-hot); }
.molten-kicker {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.5);
  margin: 0 0 var(--space-5);
}
.molten-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: #fbfbfb;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.molten-h2 span { color: var(--red-hot); }
.molten-body {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.55);
  max-width: 560px;
  margin: 0 auto;
  text-wrap: pretty;
}
/* Molten mode buttons: gate hover, specific-property transition */
.molten-mode {
  transition: color var(--dur-2) var(--ease-out-quart),
              background var(--dur-2) var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine) {
  .molten-mode:hover { color: rgba(255,255,255,0.85); }
}

/* ── FURNEX BAND ── */
.fx-section { background: var(--bg); color: #fbfbfb; }

/* Teaser */
.fx-teaser {
  position: relative;
  background: #080808;
  border-top: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  padding: var(--space-9) var(--gutter);
  text-align: center;
  overflow: hidden;
}
.fx-teaser-glow {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 300px;
  background: radial-gradient(ellipse, color-mix(in oklch, var(--red) 14%, transparent) 0%, transparent 65%);
  pointer-events: none;
}
.fx-teaser-inner { position: relative; z-index: 1; }
.fx-teaser-line {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.72);
  margin: 0 auto var(--space-6);
  max-width: 60ch;
}
.fx-teaser-coda {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-5);
  margin: 0;
  flex-wrap: wrap;
}
.fx-teaser-rule {
  display: block;
  height: 1px; width: 80px;
  background: linear-gradient(to right, transparent, color-mix(in oklch, var(--red) 50%, transparent), transparent);
}
.fx-teaser-italic {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
}

/* Problem / Solution split */
.fx-split {
  background: #0a0a0a;
  padding: var(--space-10) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.fx-split-panel { color: #fbfbfb; }
.fx-split-tag {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  margin: 0 0 var(--space-4);
}
.fx-split-h {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 52px);
  letter-spacing: -0.02em;
  line-height: 0.92;
  color: #fbfbfb;
  margin: 0 0 var(--space-6);
  text-wrap: balance;
}
.fx-split-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.85;
  color: rgba(255,255,255,0.7);
  margin: 0 0 var(--space-6);
  text-wrap: pretty;
}
.fx-split-body b { color: #fbfbfb; font-weight: 600; }

.fx-pains {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.fx-pain {
  display: flex; align-items: flex-start; gap: var(--space-3);
}
.fx-pain-check {
  width: 18px; height: 18px;
  border: 1px solid color-mix(in oklch, var(--red) 40%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
  color: var(--red);
}
.fx-pain-check svg { width: 10px; height: 10px; display: block; }
.fx-pain-text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
}

/* Feature strip */
.fx-feats {
  background: #050709;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
  color: #fbfbfb;
}
.fx-feats-rule {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--red) 20%, var(--red) 80%, transparent 100%);
}
.fx-feats-grid {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.fx-feat {
  position: relative;
  padding: var(--space-8) var(--space-7);
  border-right: 1px solid #111;
  display: flex;
  flex-direction: column;
}
.fx-feat:last-child { border-right: none; }
.fx-feat-tag {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  margin: 0 0 var(--space-4);
}
.fx-feat-h {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fbfbfb;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.fx-feat-rule {
  width: 28px; height: 2px;
  background: var(--red);
  margin: 0 0 var(--space-4);
}
.fx-feat-body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.62);
  margin: 0;
  text-wrap: pretty;
}

/* Final red-flood CTA */
.fx-final {
  background: var(--red);
  padding: var(--space-9) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fbfbfb;
}
.fx-final-inner {
  position: relative; z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
}
.fx-final-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--red);
  background: #fff;
  padding: 6px 14px;
  margin: 0 0 var(--space-5);
}
.fx-final-h {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: #fbfbfb;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.fx-final-body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
  max-width: 56ch;
  margin: 0 auto var(--space-7);
  text-wrap: pretty;
}
.fx-final-buttons {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}
.btn-on-red {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: #fff;
  color: var(--red);
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: 0.18em;
  padding: 16px 44px;
  text-decoration: none;
  transition: background var(--dur-2) var(--ease-out-quart),
              transform var(--dur-1) var(--ease-out-quart);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .btn-on-red:hover { background: rgba(255,255,255,0.9); transform: translateY(-1px); }
}
.btn-on-red:active { transform: scale(0.97); transition-duration: 80ms; }

.btn-on-red-outline {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: transparent;
  border: 2px solid rgba(255,255,255,0.55);
  color: #fbfbfb;
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: 0.18em;
  padding: 14px 42px;
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease-out-quart),
              background var(--dur-2) var(--ease-out-quart),
              transform var(--dur-1) var(--ease-out-quart);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .btn-on-red-outline:hover {
    background: rgba(255,255,255,0.12);
    border-color: #fff;
    transform: translateY(-1px);
  }
}
.btn-on-red-outline:active { transform: scale(0.97); transition-duration: 80ms; }

/* Responsive */
@media (max-width: 900px) {
  .fx-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .fx-feats-grid { grid-template-columns: 1fr; }
  .fx-feat { border-right: none; border-bottom: 1px solid #111; }
  .fx-feat:last-child { border-bottom: none; }
}
@media (max-width: 768px) {
  .fpulse-cta-inner { flex-direction: column; align-items: flex-start; gap: var(--space-5); text-align: left; }
  .fpulse-cta { padding: var(--space-8) var(--gutter); }
  .fx-teaser { padding: var(--space-8) var(--gutter); }
  .fx-split { padding: var(--space-9) var(--gutter); }
  .fx-final { padding: var(--space-8) var(--gutter); }
}
@media (max-width: 480px) {
  .fpulse-cta { padding: var(--space-7) var(--space-4); }
  .fx-teaser { padding: var(--space-7) var(--space-4); }
  .fx-split { padding: var(--space-7) var(--space-4); gap: var(--space-6); }
  .fx-feat { padding: var(--space-6) var(--space-5); }
  .fx-final { padding: var(--space-7) var(--space-4); }
  .fx-final-buttons { flex-direction: column; align-items: stretch; }
  .btn-on-red, .btn-on-red-outline { justify-content: center; }
  .fx-teaser-coda { gap: var(--space-3); }
  .fx-teaser-rule { width: 40px; }
}


/* ═══════════════════════════════════════════════════════════
   HOMEPAGE TOKEN RESTORATION
   Earlier in the file, an about-page :root override clobbers
   --ink and a few siblings so the inner pages can run a light
   theme. The homepage needs the OKLCH originals back. body.home
   is the scope WordPress applies to the front page; defining
   tokens here shadows the inherited :root override for every
   descendant of body.home, leaving inner pages untouched.
═══════════════════════════════════════════════════════════ */
body.home,
body.page-the-science,
body.page-template-page-the-science,
body.page-id-178 {
  --ink:           oklch(98% 0 0);
  --ink-2:         oklch(82% 0 0);
  --ink-3:         oklch(64% 0 0);
  --ink-4:         oklch(46% 0 0);
  --bg:            oklch(11% 0 0);
  --bg-2:          oklch(16% 0 0);
  --bg-3:          oklch(21% 0 0);
  --bg-ink:        oklch(96% 0.006 60);
  --ink-on-light:  oklch(15% 0 0);
  --red:           oklch(48% 0.20 27);
  --red-hot:       oklch(58% 0.22 28);
  --red-deep:      oklch(33% 0.16 28);
  --red2:          oklch(58% 0.22 28);
  --gold:          oklch(74% 0.13 75);
  --molten:        oklch(67% 0.20 45);
  background:      var(--bg);
  color:           var(--ink);
}



/* ═══════════════════════════════════════════════════════════
   HOME · Science feature — replaces the old thin .prod-science-cta strip
   with a substantial editorial moment: big display title, eight stage
   preview chips, and a deliberate red-on-black cinematic surface.
═══════════════════════════════════════════════════════════ */
.science-feature {
  position: relative;
  padding: var(--space-10) var(--gutter);
  background: #0a0608;
  border-top: 1px solid color-mix(in oklch, var(--red) 18%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--red) 18%, transparent);
  overflow: hidden;
  color: #fbfbfb;
}
.science-feature-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 18% 32%, color-mix(in oklch, var(--red) 22%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 88% 78%, color-mix(in oklch, var(--molten) 14%, transparent) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.science-feature-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
}
.science-feature-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.55);
  margin: 0 0 var(--space-3);
}
.science-feature-title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: #fbfbfb;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.science-feature-title span { color: var(--red); }
.science-feature-desc {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 62ch;
  margin: 0 0 var(--space-8);
  text-wrap: pretty;
}

/* Eight-stage preview chips */
.science-feature-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: color-mix(in oklch, var(--ink) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
}
.science-feature-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-4) var(--space-5);
  background: #0a0608;
  transition: background var(--dur-2) var(--ease-out-quart);
}
.science-feature-chip-num {
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: 0;
  color: var(--red);
  line-height: 1;
}
.science-feature-chip-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(255,255,255,0.82);
  line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) {
  .science-feature-chip:hover {
    background: color-mix(in oklch, var(--red) 10%, #0a0608);
  }
}

/* CTA — bigger than the old strip CTA */
.science-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-7);
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fbfbfb;
  text-decoration: none;
  background: var(--red);
  border: 1px solid var(--red);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: background var(--dur-1) var(--ease-out-quart),
              transform var(--dur-1) var(--ease-out-quart);
  will-change: transform;
}
.science-feature-cta-arrow {
  display: inline-block;
  transition: transform var(--dur-2) var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine) {
  .science-feature-cta:hover { background: var(--red-hot); transform: translateY(-1px); }
  .science-feature-cta:hover .science-feature-cta-arrow { transform: translateX(4px); }
}
.science-feature-cta:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; }

@media (max-width: 768px) {
  .science-feature { padding: var(--space-9) var(--gutter); }
  .science-feature-chips { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .science-feature { padding: var(--space-8) var(--space-4); }
  .science-feature-chips { grid-template-columns: 1fr 1fr; }
  .science-feature-chip { padding: var(--space-3) var(--space-4); }
  .science-feature-cta { padding: var(--space-3) var(--space-6); font-size: var(--text-sm); }
}


/* FURNEX outro: same color fix as homepage advantage block */
.ts-furnex-outro,
.ts-furnex-title,
.ts-furnex-bullets li b {
  color: #fbfbfb;
}


/* ═══════════════════════════════════════════════════════════
   PHASE 4 — MOBILE COMPATIBILITY (universal safety pass)
   Targets Redmi/Realme 360px and modern iPhone 390-414px.

   Addresses gaps the audit found:
   • Footer grid never collapses below 768px (4 redeclarations)
   • Two-column grids retain 60-100px gaps at the 768px collapse
   • Inline-styled section padding (60-100px) doesn't shrink
   • Blog wrap padding frozen at 768px
   • Hero font floor too large for 320-360px viewports
   • Touch targets <44px on nav buttons at narrow widths
   • Inner-page hero/split-grid layouts uncollapsed
   • Science / Furnex pinned canvases at fixed pixel heights

   Uses !important throughout to defeat inline styles in the
   page-templates/ files (which have hard-coded padding).
═══════════════════════════════════════════════════════════ */

/* ── 1. Universal overflow safety ── */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  img, video, canvas, iframe, picture, svg:not(.molten-flow-canvas):not(.nav-logo-tab img) {
    max-width: 100%;
    height: auto;
  }
}

/* ── 2. Footer grid: collapse at 900 and 480 ── */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    padding: 56px 24px 36px !important;
  }
  footer { padding: 0 !important; }
}
@media (max-width: 480px) {
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px 16px 28px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 18px 16px 22px !important;
    gap: 12px !important;
  }
  .footer-logo { width: 88px !important; height: 88px !important; }
  .footer-tagline { font-size: 12.5px !important; }
}

/* ── 3. Hero title floor on narrow viewports ── */
@media (max-width: 480px) {
  .hero-title {
    font-size: clamp(52px, 14vw, 84px) !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 10px !important;
  }
  .hero-tag {
    font-size: 13px !important;
    padding: 0 16px !important;
  }
  .hero-statement-headline {
    font-size: clamp(22px, 6.5vw, 32px) !important;
    line-height: 1.05 !important;
  }
  .hero-statement-q { font-size: 14px !important; }
  .hero-statement-tag { font-size: 12px !important; }
  .hero-content { padding: 0 20px !important; }
  .hero-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 24px !important;
  }
  .hero-cta .btn-primary {
    justify-content: center !important;
    width: 100% !important;
  }
}

/* ── 4. Section padding: shrink large hard-coded values ── */
@media (max-width: 768px) {
  section[style*="padding:100px"], section[style*="padding: 100px"],
  div[style*="padding:100px"],     div[style*="padding: 100px"] {
    padding: 64px 24px !important;
  }
  section[style*="padding:80px"], section[style*="padding: 80px"],
  div[style*="padding:80px"],     div[style*="padding: 80px"] {
    padding: 56px 24px !important;
  }
  section[style*="padding:72px"], section[style*="padding: 72px"],
  div[style*="padding:72px"],     div[style*="padding: 72px"] {
    padding: 48px 24px !important;
  }
  section[style*="padding:120px"], section[style*="padding: 120px"],
  div[style*="padding:120px"],     div[style*="padding: 120px"] {
    padding: 72px 24px !important;
  }
  section[style*="padding:130px"], section[style*="padding: 130px"],
  div[style*="padding:130px"],     div[style*="padding: 130px"] {
    padding: 72px 24px !important;
  }
}
@media (max-width: 480px) {
  section[style*="padding:100px"], section[style*="padding: 100px"],
  div[style*="padding:100px"],     div[style*="padding: 100px"] { padding: 48px 16px !important; }
  section[style*="padding:80px"], section[style*="padding: 80px"],
  div[style*="padding:80px"],     div[style*="padding: 80px"] { padding: 44px 16px !important; }
  section[style*="padding:72px"], section[style*="padding: 72px"],
  div[style*="padding:72px"],     div[style*="padding: 72px"] { padding: 40px 16px !important; }
  section[style*="padding:120px"], section[style*="padding: 120px"],
  div[style*="padding:120px"],     div[style*="padding: 120px"] { padding: 56px 16px !important; }
  section[style*="padding:130px"], section[style*="padding: 130px"],
  div[style*="padding:130px"],     div[style*="padding: 130px"] { padding: 56px 16px !important; }
}

/* ── 5. Inline grid collapse: 2-col → 1-col, 3-col → 1-col, 4-col → 2-col ── */
@media (max-width: 768px) {
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns:repeat(3, 1fr)"],
  div[style*="grid-template-columns: repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"],
  div[style*="grid-template-columns: repeat(4,1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
}
@media (max-width: 480px) {
  div[style*="grid-template-columns:repeat(4,1fr)"],
  div[style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 6. Inline-flex rows: stack on mobile ── */
@media (max-width: 480px) {
  div[style*="display:flex"][style*="gap:48px"],
  div[style*="display:flex"][style*="gap: 48px"],
  div[style*="display:flex"][style*="gap:40px"],
  div[style*="display:flex"][style*="gap: 40px"],
  div[style*="display:flex"][style*="justify-content:space-between"]:not(.hero-cta):not(.footer-social):not(.molten-modes) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
}

/* ── 7. Inline max-widths: never exceed viewport ── */
@media (max-width: 480px) {
  [style*="max-width:1100px"], [style*="max-width: 1100px"],
  [style*="max-width:1200px"], [style*="max-width: 1200px"],
  [style*="max-width:1240px"], [style*="max-width: 1240px"],
  [style*="max-width:820px"],  [style*="max-width: 820px"],
  [style*="max-width:560px"],  [style*="max-width: 560px"],
  [style*="max-width:580px"],  [style*="max-width: 580px"],
  [style*="max-width:600px"],  [style*="max-width: 600px"],
  [style*="max-width:640px"],  [style*="max-width: 640px"] {
    max-width: 100% !important;
  }
}

/* ── 8. Touch targets: 44x44 minimum on phones ── */
@media (max-width: 768px) {
  .btn-primary, .btn-quote, .btn-furnex, .btn-furnace-pulse, .btn-science,
  .btn-secondary, .btn-dark,
  .btn-on-red, .btn-on-red-outline, .btn-outline-red,
  .psc-cta, .li-btn {
    min-height: 44px;
    align-items: center;
  }
  .nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-hamburger { min-width: 44px; min-height: 44px; }
}

/* ── 9. About page hero: split-layout collapse ── */
@media (max-width: 900px) {
  .about-hero {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 70px !important;
  }
  .ah-left {
    padding: 56px 24px !important;
    min-height: 60vh !important;
  }
  .ah-right {
    min-height: 280px !important;
    max-height: 360px !important;
  }
  .ah-vert { display: none !important; }
  .ah-title { font-size: clamp(48px, 11vw, 88px) !important; }
}
@media (max-width: 480px) {
  .ah-left { padding: 44px 16px !important; min-height: 50vh !important; }
  .ah-right { min-height: 200px !important; max-height: 280px !important; }
  .ah-title { font-size: clamp(40px, 12vw, 72px) !important; letter-spacing: -0.03em !important; }
  .ah-lead { font-size: 14px !important; }
  .ah-year { padding: 14px 16px !important; bottom: 20px !important; right: 20px !important; }
  .ah-year strong { font-size: 28px !important; }
}

/* ── 10. Stat bar: 2x2 → 1 col ── */
@media (max-width: 768px) {
  .stat-bar {
    grid-template-columns: 1fr 1fr !important;
  }
  .stat-item {
    padding: 22px 16px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  }
  .stat-item:nth-child(3), .stat-item:nth-child(4) {
    border-bottom: none !important;
  }
  .stat-num { font-size: 32px !important; }
  .stat-label { font-size: 9px !important; letter-spacing: 2px !important; }
}
@media (max-width: 480px) {
  .stat-bar { grid-template-columns: 1fr 1fr !important; }
  .stat-num { font-size: 26px !important; }
}

/* ── 11. Who section: split → stack, sticky off ── */
@media (max-width: 900px) {
  .who-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 24px !important;
  }
  .who-left { position: static !important; top: auto !important; }
  .who-title { font-size: clamp(40px, 9vw, 64px) !important; }
}
@media (max-width: 480px) {
  .who-section { padding: 64px 0 !important; }
  .who-inner { padding: 0 16px !important; gap: 28px !important; }
  .who-para { font-size: 14.5px !important; line-height: 1.85 !important; margin-bottom: 22px !important; }
}

/* ── 12. Philosophy grid (about): collapse ── */
@media (max-width: 768px) {
  .phil-grid { grid-template-columns: 1fr !important; }
  .phil-section { padding: 72px 24px !important; }
  .phil-section::before { font-size: 220px !important; right: -20px !important; }
  .phil-closing { grid-template-columns: 1fr !important; gap: 28px !important; }
}
@media (max-width: 480px) {
  .phil-section { padding: 48px 16px !important; }
  .phil-section::before { font-size: 160px !important; }
  .phil-card { padding: 32px 24px !important; }
  .phil-title { font-size: clamp(36px, 9vw, 60px) !important; }
}

/* ── 13. Roots grid: split → stack ── */
@media (max-width: 768px) {
  .roots-section { padding: 72px 24px !important; }
  .roots-grid { grid-template-columns: 1fr !important; }
  .roots-card { padding: 40px 28px !important; }
  .rc-title { font-size: 28px !important; }
}
@media (max-width: 480px) {
  .roots-section { padding: 48px 16px !important; }
  .roots-card { padding: 32px 20px !important; }
  .roots-card-num { font-size: 80px !important; }
}

/* ── 14. Why grid (6-card): collapse ── */
@media (max-width: 900px) {
  .why-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .why-grid { grid-template-columns: 1fr !important; }
  .why-section { padding: 64px 16px !important; }
  .why-card { padding: 32px 24px !important; }
  .why-strip { padding: 28px 24px !important; flex-direction: column !important; gap: 20px !important; align-items: flex-start !important; }
}

/* ── 15. Products page hero ── */
@media (max-width: 768px) {
  .ph-title { font-size: clamp(48px, 12vw, 88px) !important; letter-spacing: -0.03em !important; }
  .ph-eyebrow { letter-spacing: 4px !important; }
}
@media (max-width: 480px) {
  .ph-title { font-size: clamp(40px, 13vw, 72px) !important; letter-spacing: -0.03em !important; }
}

/* ── 16. The Science page stages ── */
@media (max-width: 900px) {
  .ts-stage-inner { grid-template-columns: 1fr !important; gap: 36px !important; }
  .ts-stage { padding: 72px 24px !important; }
  .ts-stage-canvas { height: 320px !important; }
  .ts-stage-canvas-wide { height: 360px !important; }
  .ts-stage-title { max-width: 100% !important; }
}
@media (max-width: 480px) {
  .ts-stage { padding: 56px 16px !important; }
  .ts-hero { padding: 110px 16px 56px !important; }
  .ts-stage-canvas { height: 240px !important; }
  .ts-stage-canvas-wide { height: 280px !important; }
  .ts-hero-title { font-size: clamp(40px, 11vw, 72px) !important; letter-spacing: -0.03em !important; }
  .ts-stage-title { font-size: clamp(28px, 7vw, 44px) !important; letter-spacing: -0.02em !important; }
  .ts-jump { font-size: 9px !important; padding: 7px 10px !important; letter-spacing: 1px !important; }
}

/* ── 17. Furnex page hero ── */
@media (max-width: 768px) {
  .fx-hero-title { font-size: clamp(48px, 12vw, 88px) !important; letter-spacing: -0.03em !important; line-height: 0.92 !important; }
}
@media (max-width: 480px) {
  .fx-hero-title { font-size: clamp(40px, 13vw, 72px) !important; }
  .fx-intro { max-width: 100% !important; padding: 0 16px !important; }
}

/* ── 18. PSC CTA strip + Furnace Pulse + Final CTA stacks on mobile ── */
@media (max-width: 768px) {
  .psc-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 20px !important;
  }
  .psc-cta { justify-content: center !important; align-self: stretch !important; }
}

/* ── 19. Contact form: single column + iOS zoom prevention ── */
@media (max-width: 768px) {
  .contact-form-grid, .audit-form-grid, .furnex-access-grid,
  form .form-row, form .form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}
@media (max-width: 480px) {
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="url"], input[type="search"],
  textarea, select {
    font-size: 16px !important;  /* prevents iOS Safari auto-zoom */
  }
}

/* ── 20. Reach / contact section ── */
@media (max-width: 768px) {
  .reach-inner, .ch-inner, .contact-section .contact-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 56px 24px !important;
  }
}
@media (max-width: 480px) {
  .reach-inner, .ch-inner, .contact-section .contact-inner { padding: 40px 16px !important; }
  .reach-title, .ch-title { font-size: clamp(36px, 10vw, 64px) !important; letter-spacing: -0.03em !important; }
}

/* ── 21. Blog typography + spacing ── */
@media (max-width: 768px) {
  .blog-hero, .blog-wrap, .blog-content,
  .blog-article, .article-body {
    padding: 56px 24px !important;
    max-width: 100% !important;
  }
  .blog-title, .article-title, .blog-h1 {
    font-size: clamp(36px, 8vw, 56px) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
  }
}
@media (max-width: 480px) {
  .blog-hero, .blog-wrap, .blog-content,
  .blog-article, .article-body {
    padding: 40px 16px !important;
  }
  .blog-title, .article-title, .blog-h1 {
    font-size: clamp(28px, 9vw, 48px) !important;
  }
  .related-grid, .blog-grid, .article-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ── 22. Hero text shadow tightening for legibility on busy backgrounds ── */
@media (max-width: 768px) {
  .hero-title, .hero-tag,
  .hero-statement-headline, .hero-statement-q, .hero-statement-tag,
  .molten-h1, .molten-h2 {
    text-shadow: 0 2px 12px rgba(0,0,0,0.95), 0 0 30px rgba(0,0,0,0.55) !important;
  }
}

/* ── 23. Disable expensive desktop-only animations on mobile ── */
@media (max-width: 768px) {
  .hero-bg, .hero-cinematic .hero-bg { animation: none !important; }
  .hero-cinematic .hero-corner { display: none !important; }
  .hero-cinematic .hero-frameline { display: none !important; }
  /* Dust motes already halved on mobile via existing rule; nothing extra. */
}

/* ── 24. Nav: ensure mobile drawer at 768px+ ── */
@media (max-width: 768px) {
  nav { height: 64px !important; }
  .nav-logo-tab {
    padding: 0 36px 0 20px !important;
    min-width: 160px !important;
  }
  .nav-logo-tab img { height: 38px !important; }
  .nav-right { padding-right: 12px !important; gap: 6px !important; }
  /* When closed, only logo + hamburger visible; when open, the drawer is full-screen */
  nav .btn-quote { display: none !important; }
  nav .li-btn { display: none !important; }
  nav .btn-furnace-pulse, nav .btn-science { display: none !important; }
  nav .btn-furnex { display: none !important; }
  nav.nav-open .nav-right { display: flex !important; padding: 24px !important; gap: 12px !important; flex-direction: column !important; align-items: stretch !important; }
  nav.nav-open .btn-quote, nav.nav-open .li-btn,
  nav.nav-open .btn-furnace-pulse, nav.nav-open .btn-science, nav.nav-open .btn-furnex {
    display: inline-flex !important;
    justify-content: center !important;
    min-height: 44px !important;
  }
}
@media (max-width: 480px) {
  nav { height: 60px !important; }
  .nav-logo-tab {
    padding: 0 24px 0 16px !important;
    min-width: 132px !important;
  }
  .nav-logo-tab img { height: 32px !important; }
}

/* ── 25. Universal: any element overflow-wrap on phones ── */
@media (max-width: 480px) {
  h1, h2, h3, h4, h5, p, span, a, li, b, strong, em {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   PRODUCTS PAGE FAQ — silica ramming mass questions
   Native <details>/<summary> for a11y + zero JS, styled to match
   the dark editorial card system.
═══════════════════════════════════════════════════════════ */
.psm-faq {
  background: var(--bg);
  color: #fbfbfb;
  padding: var(--space-10) var(--gutter);
}
.psm-faq-inner {
  max-width: 900px;
  margin: 0 auto;
}
.psm-faq-head {
  text-align: center;
  margin-bottom: var(--space-9);
}
.psm-faq-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.16rem);
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: #fbfbfb;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.psm-faq-lede {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  color: rgba(255,255,255,0.7);
  margin: 0 auto;
  max-width: 60ch;
  text-wrap: pretty;
}
.psm-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.psm-faq-item {
  border-top: 1px solid color-mix(in oklch, #fbfbfb 10%, transparent);
  padding: 0;
}
.psm-faq-item:last-child {
  border-bottom: 1px solid color-mix(in oklch, #fbfbfb 10%, transparent);
}
.psm-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-5) 56px var(--space-5) 0;
  position: relative;
  transition: color var(--dur-2) var(--ease-out-quart);
}
.psm-faq-item > summary::-webkit-details-marker { display: none; }
.psm-faq-item > summary > h3 {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
  letter-spacing: 0;
  line-height: 1.25;
  color: #fbfbfb;
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}
.psm-faq-item > summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 14px;
  border-right: 1.5px solid var(--red);
  border-bottom: 1.5px solid var(--red);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-2) var(--ease-out-quart);
}
.psm-faq-item[open] > summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
@media (hover: hover) and (pointer: fine) {
  .psm-faq-item > summary:hover > h3 { color: var(--red-hot); }
}
.psm-faq-body {
  padding: 0 56px var(--space-6) 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: rgba(255,255,255,0.78);
  text-wrap: pretty;
}
.psm-faq-body p { margin: 0 0 var(--space-4); }
.psm-faq-body p:last-child { margin-bottom: 0; }
.psm-faq-body ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}
.psm-faq-body li {
  margin-bottom: var(--space-2);
}
.psm-faq-body b {
  color: #fbfbfb;
  font-weight: 600;
}
.psm-faq-body a {
  color: var(--red-hot);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--red-hot) 50%, transparent);
  transition: color var(--dur-2) var(--ease-out-quart), border-color var(--dur-2) var(--ease-out-quart);
}
@media (hover: hover) and (pointer: fine) {
  .psm-faq-body a:hover { color: #fff; border-color: #fff; }
}
@media (max-width: 768px) {
  .psm-faq { padding: var(--space-9) var(--space-4); }
  .psm-faq-head { margin-bottom: var(--space-7); }
  .psm-faq-item > summary { padding: var(--space-4) 44px var(--space-4) 0; }
  .psm-faq-body { padding: 0 44px var(--space-5) 0; }
}




/* ════════════════════════════════════════════════════════════════
   MOBILE NAV — CONSOLIDATED FIX (overrides all earlier nav rules)
   Append-only block at the end of the file so cascade order wins.
   Applies at ≤768px (tablet) and tightens at ≤480px (phone).
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. CLOSED state: only logo + hamburger visible ── */
  nav {
    height: 64px !important;
    padding: 0 !important;
    background: rgba(8,8,8,0.55) !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    transition: background 0.3s ease, height 0.3s ease !important;
  }
  nav.scrolled {
    background: rgba(245,242,237,0.85) !important;
  }
  nav .nav-links { display: none !important; }
  nav .nav-right { display: none !important; }

  /* Hamburger — always top-right, above drawer */
  .nav-hamburger {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background: transparent !important;
    border: none !important;
    z-index: 10001 !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  .nav-hamburger span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #fff !important;
    transition: transform 0.3s ease, opacity 0.25s ease !important;
    transform-origin: center !important;
  }
  nav.scrolled .nav-hamburger span { background: #111 !important; }
  nav.nav-open .nav-hamburger span { background: #fff !important; }

  /* Hamburger → X when open */
  nav.nav-open .nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  nav.nav-open .nav-hamburger span:nth-child(2) {
    opacity: 0 !important;
  }
  nav.nav-open .nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* ── 2. OPEN state: full-screen drawer ── */
  nav.nav-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important; /* dynamic viewport — handles iOS toolbars */
    min-height: 100vh !important;
    width: 100% !important;
    background: #0a0a0a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9998 !important;
    padding-top: env(safe-area-inset-top, 0) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }

  /* Logo stays in its angled tab at top-left */
  nav.nav-open .nav-logo-tab {
    position: relative !important;
    flex-shrink: 0 !important;
    width: auto !important;
    align-self: flex-start !important;
    z-index: 1 !important;
  }

  /* ── 3. NAV LINKS — vertical stack, full-width tap targets ──
     CRITICAL: legacy CSS at line ~2802 sets position:fixed/top:70/max-height:0
     on .nav-links. We MUST override or the menu sits behind the buttons. */
  nav.nav-open .nav-links {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex: 1 1 auto !important;
    padding: 40px 0 16px !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    transition: none !important;
  }
  nav.nav-open .nav-links > li {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  nav.nav-open .nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 18px 32px !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.92) !important;
    text-decoration: none !important;
    min-height: 56px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
  }
  nav.nav-open .nav-links > li > a:hover,
  nav.nav-open .nav-links > li > a:active,
  nav.nav-open .nav-links > li > a.active {
    background: rgba(192,0,12,0.12) !important;
    color: #fff !important;
  }
  /* Kill the desktop underline animation in the drawer */
  nav.nav-open .nav-links > li > a::after {
    display: none !important;
  }

  /* ── 4. PRODUCTS DROPDOWN — accordion accordion accordion ── */
  nav.nav-open .nav-has-dropdown { position: relative !important; }
  nav.nav-open .nav-has-dropdown > a .nav-arrow {
    font-size: 9px !important;
    margin-left: auto !important;
    opacity: 0.6 !important;
    transition: transform 0.25s ease !important;
    display: inline-block !important;
  }
  nav.nav-open .nav-has-dropdown.open > a .nav-arrow {
    transform: rotate(180deg) !important;
  }

  nav.nav-open .nav-dropdown {
    display: none !important;
    position: static !important;
    transform: none !important;
    background: rgba(255,255,255,0.03) !important;
    border: none !important;
    border-top: 1px solid rgba(192,0,12,0.4) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 12px !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    min-width: 0 !important;
  }
  nav.nav-open .nav-has-dropdown.open .nav-dropdown {
    display: block !important;
  }
  nav.nav-open .nav-dropdown li {
    border-bottom: none !important;
    list-style: none !important;
  }
  nav.nav-open .nav-dropdown li a {
    display: block !important;
    padding: 12px 56px !important;
    font-size: 12px !important;
    letter-spacing: 2.5px !important;
    color: rgba(255,255,255,0.7) !important;
    background: transparent !important;
    transform: none !important;
    min-height: 44px !important;
  }
  nav.nav-open .nav-dropdown li a:hover,
  nav.nav-open .nav-dropdown li a:active {
    color: #fff !important;
    background: rgba(192,0,12,0.1) !important;
    transform: none !important;
  }

  /* ── 5. NAV-RIGHT BUTTONS — bottom of drawer, vertical stack ──
     CRITICAL: legacy CSS sets position:fixed/top:70/max-height:200/flex-wrap:wrap
     on .nav-right which we MUST override or the buttons render off-screen
     in a 2-col wrap that overlays the nav links. */
  nav.nav-open .nav-right {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 24px 32px max(32px, env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: none !important;
    margin-top: auto !important; /* push to bottom */
    flex-shrink: 0 !important;
    transition: none !important;
  }
  nav.nav-open .nav-right > a {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 13px 24px !important;
    font-size: 12px !important;
    letter-spacing: 2.5px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
  }

  /* Lock body scroll when drawer is open (JS already toggles overflow:hidden) */
  body.nav-locked { overflow: hidden !important; }
}

/* ── 6. Tighten for small phones ── */
@media (max-width: 480px) {
  nav { height: 60px !important; }
  nav.nav-open .nav-links > li > a {
    padding: 16px 24px !important;
    font-size: 14px !important;
    letter-spacing: 3.5px !important;
  }
  nav.nav-open .nav-dropdown li a {
    padding: 11px 44px !important;
    font-size: 11.5px !important;
  }
  nav.nav-open .nav-right {
    padding: 20px 24px max(28px, env(safe-area-inset-bottom)) !important;
  }
}


/* ════════════════════════════════════════════════════════════════
   MOBILE CONTENT FIXES v2 — issues found during live audit:
   1) Contact page two-column body never stacked on phones
   2) Hero CTA pair flowed off-screen when only stacked at 480px
   3) Roots-card giant "01/02" overlapped the body paragraph
   4) Generic horizontal-overflow safety
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Contact page: two-column body → single column stack ── */
  .contact-body {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .cf-left {
    padding: 56px 24px 48px !important;
  }
  .cf-right {
    padding: 0 !important;
  }
  .cf-right .map-container {
    min-height: 280px !important;
    height: 320px !important;
  }
  .cf-details {
    padding: 36px 24px !important;
  }
  .cf-heading {
    font-size: clamp(34px, 8vw, 44px) !important;
  }

  /* ── Contact hero CTA row: stack from 768 (was only stacking at 480) ── */
  .ch-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 320px !important;
  }
  .ch-cta {
    justify-content: center !important;
    width: 100% !important;
  }

  /* ── About page roots cards: the giant 01/02 watermark
        was a 120px absolute number that overlapped the body paragraph.
        Move it to the top-left corner and shrink it. ── */
  .roots-card-num {
    font-size: 64px !important;
    top: 12px !important;
    right: auto !important;
    left: 20px !important;
    line-height: 1 !important;
    color: rgba(0,0,0,0.06) !important;
  }
  .roots-card {
    padding-top: 72px !important;
  }

  /* ── Horizontal overflow safety —
        any element wider than viewport gets clipped to viewport ── */
  html, body { overflow-x: hidden !important; }
}

@media (max-width: 480px) {
  /* Phone: tighten contact form even more */
  .cf-left { padding: 44px 18px 40px !important; }
  .cf-details { padding: 28px 18px !important; }
  .cf-heading { font-size: 30px !important; }

  /* Phone: keep roots-card-num small and out of body text path */
  .roots-card-num { font-size: 52px !important; }
}


/* ═══════════════════════════════════════════════════════════
   CRAFT PASS v7.6 — consistency, contrast, a11y, reduced motion.
   Appended last so these corrections win the cascade at equal
   specificity. Tokens used here are defined once (line ~20).
═══════════════════════════════════════════════════════════ */

/* Skip link — invisible until keyboard focus, then unmistakable */
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 2000;
  background: var(--red); color: #fff;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  padding: 14px 22px;
  transition: top var(--dur-2) var(--ease-out-quart);
}
.skip-link:focus-visible { top: 16px; }

/* Brand selection color */
::selection { background: var(--red); color: #fff; }

/* Ticker: two identical sets make the loop seamless; keep them inline */
.ticker-set { display: inline-flex; align-items: center; }

/* Contrast corrections — body-size copy must clear 4.5:1 (WCAG AA) */
.sec-sub { color: rgba(240, 237, 232, 0.66); }
.why-section .sec-sub { color: rgba(8, 8, 8, 0.72); }
.ph-desc { color: rgba(255, 255, 255, 0.68); }

/* Form focus: a visible ring, not a whisper */
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(192, 0, 12, 0.18);
}

/* Footer contact column — stacked links inside each item */
.footer-contact-item .fci-text a { display: block; }

/* Touch targets ≥44px on coarse pointers, desktop look unchanged */
@media (pointer: coarse) {
  .li-btn, .btn-quote, .btn-furnex, .btn-science {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-links a { padding-top: 10px; padding-bottom: 10px; }
  .footer-col ul li a, .footer-legal a { padding: 6px 0; }
  #scrollTop { width: 48px; height: 48px; }
}

/* Reduced motion: ambient loops stop, hero video yields to its poster
   (video sources are also withheld in JS for reduced-motion visitors) */
@media (prefers-reduced-motion: reduce) {
  .ticker-inner { animation: none; }
  .hero-dust-mote, #embers > * { animation: none !important; opacity: 0; }
  .ph-bg, .mh-bg { animation: none !important; }
  .cursor-glow { display: none !important; }
  .scroll-cue, .scroll-cue .scroll-arrow { animation: none !important; }
}