/* =========================================================
   TI & Co. — Himalayan Rock Salt Export
   ========================================================= */

:root{
  --accent:#FF462E;
  --accent-soft:rgba(255,70,46,.10);
  --ink:#090909;
  --ink-2:#29292B;
  --ink-3:#1E1E1E;
  --paper:#FFFFFF;
  --paper-2:#F5F4F3;
  --paper-3:#F7F7F7;
  --paper-4:#F9F9F9;
  --line:#EAEAEA;
  --muted:#63615E;
  --muted-2:#7F7F80;

  /* Matches the reference: 1440 wide with 40px gutters, so content runs 40→1400
     at desktop rather than being centred inside a narrower column. */
  --wrap:1440px;
  --gutter:40px;
  --r-lg:22px;
  --r-md:14px;

  --sans:"Inter","Inter Placeholder",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:104px;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-optical-sizing:auto;
  font-size:16px;line-height:1.5;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p,figure,ul{margin:0;}
ul{padding:0;list-style:none;}
button,input,textarea{font:inherit;color:inherit;}
hr{border:0;border-top:1px solid var(--line);margin:0;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.mono{font-family:var(--mono);font-size:14px;letter-spacing:0;color:var(--ink-2);}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal--left{transform:translate3d(-42px,0,0);}
.reveal--right{transform:translate3d(42px,0,0);}
.reveal--scale{transform:scale(.94);}
/* Must stay last so it resets whichever start transform a variant set. */
.reveal.in{opacity:1;transform:none;}

/* ---------- scroll parallax ---------- */
/* JS writes an inline transform each frame, so nothing here may set one. */
[data-speed],[data-parallax],.hero__bg{will-change:transform;}

/* ---------- custom cursor ---------- */
/* .has-cursor is set by JS only on fine-pointer, non-reduced-motion devices,
   so touch and keyboard users keep the native cursor. */
.cursor{
  position:fixed;top:0;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:2px solid transparent;border-radius:999px;background:var(--accent);
  pointer-events:none;z-index:200;opacity:0;
  transform:translate3d(-100px,-100px,0);
  transition:opacity .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
  will-change:transform;
}
html.has-cursor .cursor{opacity:1;}
html.has-cursor .cursor.is-out{opacity:0;}
/* Hollow ring over anything clickable. */
html.has-cursor .cursor.is-active{background:transparent;border-color:var(--accent);}
/* Over a product card the dot becomes a filled orange disc with an arrow.
   Declared after .is-active so it wins when a card is also a link. */
html.has-cursor .cursor.is-arrow{background:var(--accent);border-color:transparent;}
.cursor__arrow{
  position:absolute;left:50%;top:50%;width:24px;height:24px;color:#fff;
  opacity:0;transition:opacity .25s var(--ease);
}
html.has-cursor .cursor.is-arrow .cursor__arrow{opacity:1;}
html.has-cursor,html.has-cursor *{cursor:none;}
/* Text fields keep a real caret — a dot alone can't show the insertion point. */
html.has-cursor input,html.has-cursor textarea,html.has-cursor select{cursor:auto;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .marquee__track{animation:none !important;}
  .nav,.topbar,.nav__inner,.brand img{transition:none;}
  .cursor{display:none;}
  [data-speed],[data-parallax],[data-zoom],.hero__bg{transform:none !important;}
}

/* ---------- shared bits ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;color:var(--ink-2);}
.eyebrow b{width:11px;height:11px;border-radius:2px;background:var(--accent);flex:none;}

.rule{position:relative;height:1px;background:var(--line);margin:0;}
.rule i{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-style:normal;font-size:15px;color:var(--muted-2);
  background:var(--paper);padding:0 8px;line-height:1;
}

.sechead{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:34px 0 46px;
}
.sechead .mono:last-child{text-align:right;}

.pill{
  display:inline-flex;align-items:center;gap:14px;
  padding:8px 26px 8px 8px;border-radius:999px;
  font-size:16px;font-weight:500;line-height:1;
  transition:transform .35s var(--ease),background .3s var(--ease);
}
.pill:hover{transform:translateY(-2px);}
.pill__dot{
  width:44px;height:44px;border-radius:999px;background:var(--accent);color:#fff;
  display:grid;place-items:center;flex:none;overflow:hidden;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.pill__dot svg{width:19px;height:19px;transition:transform .4s var(--ease);}
.pill:hover .pill__dot svg{transform:translateX(3px);}
.pill--light{background:#fff;color:var(--ink);}
.pill--grey{background:var(--paper-2);color:var(--ink);}
.pill--grey:hover{background:var(--line);}

.badge{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border-radius:12px;
  background:var(--accent-soft);color:var(--accent);
  font-size:15px;font-weight:500;line-height:1;
}
.badge svg{width:17px;height:17px;}

.display{
  font-size:clamp(44px,7.2vw,104px);font-weight:700;line-height:1.0;
  letter-spacing:-.045em;text-align:center;
}
.display--left{text-align:left;font-size:clamp(40px,5.6vw,80px);}
.lede{max-width:760px;margin-inline:auto;text-align:center;color:var(--muted);font-size:17px;line-height:1.5;}
.lede--left{margin-inline:0;text-align:left;max-width:460px;}

.statement{
  font-size:clamp(28px,3.6vw,50px);font-weight:600;line-height:1.15;
  letter-spacing:-.035em;text-indent:3.4em;
}

.dots{display:inline-flex;gap:6px;flex:none;}
.dots span{width:9px;height:9px;border-radius:999px;background:#D9D9D9;}
.dots span.on{background:var(--accent);}

.stars{display:flex;gap:5px;}
.stars svg{width:17px;height:17px;fill:var(--accent);}

.corner{position:absolute;width:26px;height:26px;pointer-events:none;z-index:3;}
.corner--tl{top:16px;left:16px;border-top:2px solid rgba(255,255,255,.55);border-left:2px solid rgba(255,255,255,.55);}
.corner--tr{top:16px;right:16px;border-top:2px solid rgba(255,255,255,.35);border-right:2px solid rgba(255,255,255,.35);}
.corner--orange{border-color:var(--accent);top:-14px;left:-14px;}
/* Declared last so it recolours whichever corner variant it is paired with. */
.corner--accent{border-color:var(--accent);}

.blob{
  position:absolute;z-index:0;pointer-events:none;
  background:var(--paper-2);opacity:.85;
}

/* =========================================================
   NAV
   ========================================================= */
/* Nav is fixed and auto-hides: it slides away on scroll down and returns on
   any upward scroll. Over the dark hero it stays transparent with white text;
   past the hero `body.nav-solid` swaps in a light bar with dark text, since
   white-on-white would otherwise be invisible. */
.topbar{
  position:fixed;top:0;left:0;right:0;height:5px;background:var(--accent);z-index:60;
  transition:transform .5s var(--ease);
}

.nav{
  position:fixed;top:5px;left:0;right:0;z-index:55;
  transition:transform .5s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:16px var(--gutter);
  display:flex;align-items:center;gap:28px;
  transition:padding .35s var(--ease);
}

/* Hidden state — nav clears its own height plus the 5px topbar above it. */
body.nav-hidden .nav{transform:translateY(-160%);}
body.nav-hidden .topbar{transform:translateY(-100%);}

/* Solid state, past the hero. */
body.nav-solid .nav{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 1px 0 var(--line),0 10px 30px -22px rgba(9,9,9,.45);
}
body.nav-solid .nav__inner{padding-block:9px;}
body.nav-solid .brand{color:var(--ink);}
body.nav-solid .brand img{width:44px;height:44px;}
body.nav-solid .nav__links a{color:var(--muted);}
body.nav-solid .nav__links a:hover,body.nav-solid .nav__links a.is-active{color:var(--ink);}
body.nav-solid .burger span{background:var(--ink);}
/* The CTA stays white on the solid bar; a hairline ring keeps it from
   dissolving into the background instead of inverting it to black. */
body.nav-solid .nav__cta{box-shadow:0 0 0 1px var(--line);}

.brand{display:flex;align-items:center;gap:16px;color:#fff;transition:color .35s var(--ease);}
.brand img{width:54px;height:54px;object-fit:contain;transition:width .35s var(--ease),height .35s var(--ease);}
.brand span{font-size:23px;font-weight:600;letter-spacing:-.03em;}

.nav__links{display:flex;align-items:flex-start;gap:34px;margin-left:auto;}
.nav__links a{
  color:rgba(255,255,255,.6);font-size:17px;font-weight:500;
  transition:color .25s var(--ease);
}
.nav__links a sup{font-family:var(--mono);font-size:10px;margin-left:2px;top:-.7em;}
.nav__links a:hover,.nav__links a.is-active{color:#fff;}

/* Hover floods the whole button with the dot's orange: a circle the size of
   the dot, anchored on it, scaled up until it fills the pill. The dot itself
   inverts to white so it stays legible once the flood lands. */
.nav__cta{margin-left:34px;position:relative;overflow:hidden;}
.nav__cta>*{position:relative;z-index:1;}
.nav__cta::before{
  content:"";position:absolute;z-index:0;left:30px;top:50%;
  width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:999px;
  background:var(--accent);transform:scale(0);
  transition:transform .5s var(--ease);
}
.nav__cta:hover::before{transform:scale(10);}
.nav__cta:hover{color:#fff;}
.nav__cta:hover .pill__dot{background:#fff;color:var(--accent);}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:auto;}
.burger span{display:block;width:26px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease);}
.burger span+span{margin-top:7px;}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg);}

.mobilemenu{
  position:fixed;inset:calc(5px + 86px) 0 auto 0;z-index:54;
  background:rgba(9,9,9,.96);backdrop-filter:blur(14px);
  padding:18px var(--gutter) 34px;display:grid;gap:4px;
}
.mobilemenu[hidden]{display:none;}
.mobilemenu a{
  color:#fff;font-size:24px;font-weight:600;letter-spacing:-.03em;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;align-items:baseline;gap:14px;
}
.mobilemenu em{font-family:var(--mono);font-style:normal;font-size:13px;color:var(--accent);}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100svh;background:#0B0B0B;overflow:hidden;isolation:isolate;}
/* bg, scrim and inner all stay at z-index:auto so paint order follows the DOM
   and no new stacking context forms — the headline's difference blend has to
   reach the photo underneath it. */
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,9,9,.9) 0%,rgba(9,9,9,.8) 24%,rgba(9,9,9,.36) 52%,rgba(9,9,9,.05) 100%);
}
/* No z-index here: a stacking context would trap the title's blend mode
   and it would stop reacting to the photo behind it. */
.hero__inner{
  position:relative;
  max-width:var(--wrap);margin-inline:auto;
  padding:128px var(--gutter) 26px;
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
}
.hero__kicker{
  color:#fff;font-size:clamp(19px,2.3vw,33px);font-weight:700;letter-spacing:-.035em;
  margin-bottom:10px;
}
.hero__title{
  font-size:clamp(54px,16.8vw,238px);font-weight:700;line-height:.89;
  letter-spacing:-.055em;color:#fff;mix-blend-mode:difference;
  display:flex;flex-direction:column;
}
.hero__title .star{font-style:normal;color:var(--accent);}
.hero__note{
  position:absolute;right:var(--gutter);top:50%;transform:translateY(-38%);
  width:min(300px,42vw);text-align:right;color:#fff;z-index:3;
}
.hero__globe{width:62px;height:40px;color:#fff;margin-left:auto;margin-bottom:22px;}
.hero__note p{font-size:16px;line-height:1.5;}
.hero__scroll{
  position:absolute;right:var(--gutter);bottom:44px;color:#fff;
  width:26px;height:26px;animation:bob 2.4s ease-in-out infinite;
}
.hero__scroll svg{width:100%;height:100%;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}

/* =========================================================
   ABOUT
   ========================================================= */
.about{position:relative;padding:0 0 40px;background:var(--paper);overflow:hidden;}
.about .wrap{position:relative;z-index:1;}
.blob--a{left:-220px;top:180px;width:640px;height:900px;border-radius:38% 62% 55% 45%/45% 40% 60% 55%;}
.blob--b{right:-260px;top:520px;width:620px;height:760px;border-radius:60% 40% 45% 55%/50% 55% 45% 50%;}

.about__grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:40px;padding:56px 0 0;align-items:start;}
.about__body{max-width:1000px;}
.about__body .pill{margin-top:52px;}
.about__cols{display:grid;grid-template-columns:1fr 1fr;gap:40px 78px;margin-top:60px;max-width:880px;}
.about__cols hr{margin-bottom:22px;}
.about__cols h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px;}
.about__cols p{color:var(--muted);font-size:16px;line-height:1.5;}

.about__shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:106px 0 96px;}
.about__shots figure{border-radius:var(--r-md);overflow:hidden;aspect-ratio:440/244;}
.about__shots img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
.about__shots figure:hover img{transform:scale(1.045);}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{overflow:hidden;border-block:1px solid var(--line);margin:80px 0;}
.marquee__track{display:flex;width:max-content;animation:slide 34s linear infinite;}
.marquee__track img{
  width:145px;height:174px;object-fit:contain;padding:58px 40px;
  border-right:1px solid var(--line);flex:none;
}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* =========================================================
   PROCESS
   ========================================================= */
.process{padding:20px 0 0;}
.process__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:190px;}
.pcard{
  background:var(--paper-2);border-radius:var(--r-lg);
  padding:26px 24px 26px;min-height:334px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .5s var(--ease);
}
.pcard:hover{transform:translateY(-6px);}
.pcard header{display:flex;align-items:flex-start;justify-content:space-between;}
.pcard__num{font-size:38px;line-height:1;color:var(--ink);}
.pcard__foot h3{display:flex;align-items:center;gap:11px;font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:14px;}
.pcard__foot h3 b{width:11px;height:11px;border-radius:2px;background:var(--accent);flex:none;}
.pcard__foot p{color:var(--muted);font-size:16px;line-height:1.5;}

/* =========================================================
   PRODUCTS
   ========================================================= */
.products{position:relative;padding:0;overflow:hidden;}
.products .wrap{position:relative;z-index:1;}
.blob--c{right:-300px;top:0;width:700px;height:640px;border-radius:55% 45% 40% 60%/50% 45% 55% 50%;}

.products__head{display:flex;flex-direction:column;align-items:center;gap:26px;padding:34px 0 66px;}
.products__head .display{margin-top:4px;}
.supplied{font-size:15px;color:var(--muted);margin-top:6px;}
.supplied__flags{display:flex;gap:56px;align-items:center;flex-wrap:wrap;justify-content:center;}
.supplied__flags img{width:64px;height:52px;object-fit:contain;}

.products__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding-bottom:180px;}
.prod{
  background:var(--paper-2);border-radius:var(--r-lg);padding:9px 9px 0;
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease);
}
.prod:hover{transform:translateY(-6px);}
.prod__img{border-radius:16px;overflow:hidden;aspect-ratio:650/354;}
.prod__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease),filter .6s var(--ease);
}
/* Zooms and softens on hover so the arrow cursor reads against it. */
.prod:hover .prod__img img{transform:scale(1.08);filter:blur(3px);}
.prod__meta{display:flex;align-items:center;gap:16px;padding:18px 12px 20px;}
.prod__text{flex:1;min-width:0;}
.prod__text h3{font-size:18px;font-weight:600;letter-spacing:-.025em;}
.prod__text p{color:var(--muted);font-size:15px;margin-top:2px;}
.tags{display:flex;gap:8px;flex:none;justify-content:flex-end;}
.tags span{
  background:#EDECEB;border-radius:999px;padding:10px 16px;
  font-size:14px;font-weight:500;color:var(--ink-2);line-height:1;white-space:nowrap;
}

/* =========================================================
   STATS
   ========================================================= */
.stats{padding:0 0 130px;}
.stats .about__grid{padding-top:56px;}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 110px;padding-top:116px;}
/* Descendant selector so it outranks the `.stat p` body rule below. */
.stat .stat__num{font-size:clamp(70px,8.4vw,124px);font-weight:700;line-height:.92;letter-spacing:-.06em;color:var(--ink);}
.stat hr{margin:26px 0 18px;}
.stat h3{font-size:23px;font-weight:600;letter-spacing:-.03em;margin-bottom:10px;}
.stat p{color:var(--muted);font-size:16px;line-height:1.45;}

/* =========================================================
   PARALLAX BAND
   ========================================================= */
.band{height:min(78vh,760px);overflow:hidden;position:relative;background:#111;}
/* Extra height is parallax headroom — the image travels inside this overflow. */
.band img{width:100%;height:134%;object-fit:cover;position:absolute;top:-17%;left:0;will-change:transform;}

/* =========================================================
   WHY US
   ========================================================= */
.why{padding:80px 0 0;}
.why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:170px;}
.why__card{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:640px;background:var(--paper-2);}

/* The photo is the card. Copy sits on top of it, over a light wash that keeps
   the dark type readable. Oversized and offset so it has room to parallax. */
.why__card--a{display:block;}
.why__truck{
  position:absolute;left:0;top:-9%;width:100%;height:118%;
  object-fit:cover;object-position:center 58%;filter:grayscale(1);
}
.why__card--a::after{
  content:"";position:absolute;inset:0 0 auto 0;height:54%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(245,244,243,.97) 0%,rgba(245,244,243,.8) 48%,rgba(245,244,243,0) 100%);
}
.why__copy{position:relative;z-index:2;padding:38px 34px 0;text-align:center;}
.why__copy h3{font-size:20px;font-weight:600;letter-spacing:-.025em;margin-bottom:10px;}
.why__copy p{color:var(--muted-2);font-size:15px;line-height:1.45;}
.why__logo{position:absolute;left:50%;bottom:132px;transform:translateX(-50%);width:56px;height:auto;z-index:2;}

.why__card--b{background:var(--paper-2);display:flex;}
.why__bar{position:absolute;top:0;bottom:0;width:22px;background:linear-gradient(180deg,#FF6A4A,#FFB9A6 45%,#FF7D5E);}
.why__bar--l{left:0;}
.why__bar--r{right:0;}
.why__inner{
  position:relative;z-index:1;margin:0 22px;flex:1;
  background:var(--paper-3);
  background-image:repeating-linear-gradient(135deg,rgba(9,9,9,.032) 0 2px,transparent 2px 10px);
  display:flex;flex-direction:column;align-items:center;
  padding:30px 22px 0;overflow:hidden;
}
.why__small{font-size:13px;font-weight:600;color:var(--muted);text-align:center;line-height:1.35;max-width:44ch;}
/* Narrow measure forces the three-line break the headline is designed around. */
.why__big{
  font-size:clamp(34px,3.7vw,54px);font-weight:700;line-height:1.0;
  letter-spacing:-.05em;text-align:center;margin-top:14px;max-width:9ch;
}
/* The wrapper owns the centring so the image's transform stays free for
   parallax — a translateX(-50%) here would be overwritten every frame. */
.why__minerwrap{
  position:absolute;left:0;right:0;bottom:-30px;z-index:2;
  display:flex;justify-content:center;pointer-events:none;
}
.why__minerwrap img{width:auto;max-height:520px;object-fit:contain;}

.why__card--c{background:#141414;color:#fff;padding:30px 30px 0;display:flex;flex-direction:column;overflow:hidden;}
.why__card--c::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 70% at 70% 0%,rgba(120,60,40,.55),transparent 60%);
}
.why__card--c>*{position:relative;z-index:1;}
/* ...but not the corner bracket, which must stay pinned to the card edge. */
.why__card--c>.corner{position:absolute;}
.why__label{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.62);text-transform:uppercase;}
.why__hours{font-size:52px;font-weight:700;letter-spacing:-.05em;line-height:1;margin:8px 0 12px;}
.why__body{color:rgba(255,255,255,.78);font-size:15px;line-height:1.5;margin-top:16px;}
/* Bleeds off the bottom edge on purpose; the card clips it. */
.why__phone{margin:24px auto -58px;width:min(340px,97%);position:relative;z-index:1;}

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews{position:relative;overflow:hidden;}
.reviews .wrap{position:relative;z-index:1;}
.blob--d{left:-300px;top:200px;width:660px;height:900px;border-radius:45% 55% 60% 40%/50% 45% 55% 50%;}
.blob--e{right:-320px;top:420px;width:700px;height:820px;border-radius:60% 40% 45% 55%/45% 55% 45% 55%;}

.reviews .products__head{padding-bottom:60px;}
.reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-bottom:110px;}
.review{background:var(--paper-2);border-radius:var(--r-lg);padding:24px;}
.review header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.avatar{width:48px;height:48px;border-radius:999px;object-fit:cover;}
.xmark{width:40px;height:40px;border-radius:999px;background:#EAE9E7;display:grid;place-items:center;color:var(--ink);}
.xmark svg{width:15px;height:15px;}
.review__quote{color:var(--ink-2);font-size:16px;line-height:1.5;margin-top:18px;}
.review hr{margin:26px 0 16px;border-color:#DEDDDB;}
.review__who{font-size:16px;font-weight:600;letter-spacing:-.02em;}
.review__who i{font-style:normal;color:var(--muted-2);margin:0 4px;}
.review__where{color:var(--muted-2);font-size:15px;margin-top:2px;}

/* =========================================================
   FAQ
   ========================================================= */
.faq{display:grid;grid-template-columns:minmax(0,461px) minmax(0,1fr);gap:0;padding:58px 0 130px;align-items:start;}
.faq__list{display:flex;flex-direction:column;}
.faq__item{border-bottom:1px solid var(--line);}
.faq__item:first-child{border-top:1px solid var(--line);}
.faq__q{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:286px 1fr 24px;align-items:center;gap:0;
  padding:24px 4px;
}
.faq__q .mono{color:var(--ink-2);}
.faq__label{font-size:17px;font-weight:500;letter-spacing:-.02em;}
.plus{position:relative;width:18px;height:18px;display:block;justify-self:end;}
.plus::before,.plus::after{
  content:"";position:absolute;left:0;top:8px;width:18px;height:1.6px;
  background:var(--ink-2);border-radius:2px;transition:transform .35s var(--ease);
}
.plus::after{transform:rotate(90deg);}
.faq__q[aria-expanded="true"] .plus::after{transform:rotate(0deg);}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease);}
.faq__a>p{overflow:hidden;color:var(--muted);font-size:16px;line-height:1.55;padding-left:290px;padding-right:60px;}
.faq__item.open .faq__a{grid-template-rows:1fr;}
.faq__item.open .faq__a>p{padding-bottom:26px;}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{position:relative;overflow:hidden;padding-bottom:120px;}
.contact .wrap{position:relative;z-index:1;}
.blob--f{left:-280px;top:60px;width:620px;height:820px;border-radius:40% 60% 55% 45%/50% 50% 50% 50%;}
.blob--g{right:-300px;top:-40px;width:660px;height:760px;border-radius:55% 45% 50% 50%/45% 55% 45% 55%;}

.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,700px);gap:80px 170px;padding-top:34px;}
.contact__left .badge{margin-bottom:34px;}
.contact__left .display{margin-bottom:22px;}
.contact__left hr{margin:34px 0 26px;}
.contact__list{display:grid;gap:20px;}
.contact__list li{display:flex;align-items:flex-start;gap:14px;font-size:16px;line-height:1.45;}
.contact__list i{
  width:26px;height:26px;border-radius:999px;background:#FFD9D1;color:var(--accent);
  display:grid;place-items:center;font-style:normal;font-size:16px;line-height:1;flex:none;margin-top:1px;
}

.contact__form{position:relative;display:grid;gap:18px;align-content:start;}
.contact__form input,.contact__form textarea{
  width:100%;background:var(--paper-2);border:1px solid transparent;border-radius:var(--r-md);
  padding:26px 24px;font-size:16px;resize:vertical;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.contact__form textarea{min-height:150px;}
.contact__form ::placeholder{color:var(--muted-2);}
.contact__form input:focus,.contact__form textarea:focus{outline:0;border-color:var(--accent);background:#fff;}
.contact__form button{
  background:var(--ink);color:#fff;border:0;border-radius:var(--r-md);
  padding:26px 24px;font-size:17px;font-weight:500;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.contact__form button:hover{background:var(--ink-3);transform:translateY(-2px);}
.formnote{font-size:15px;color:var(--muted);min-height:1em;}
.formnote.ok{color:#1B7F4B;}
.formnote.err{color:var(--accent);}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--paper);padding-bottom:40px;}
.footer__card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);padding:14px;}
/* Inner frame clips the scroll-driven zoom at the image's own radius, so the
   card's rounded corners survive the scale. */
.footer__zoom{border-radius:16px;overflow:hidden;aspect-ratio:1376/641;}
.footer__zoom img{width:100%;height:100%;object-fit:cover;will-change:transform;}
.footer__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:auto;}

.footer__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,452px);gap:60px;padding:74px 0 40px;}
.footer__hi{font-size:clamp(30px,2.9vw,42px);font-weight:600;letter-spacing:-.04em;color:#B9B7B4;line-height:1.05;}
.footer__mail{
  display:inline-block;font-size:clamp(22px,2.9vw,42px);font-weight:600;letter-spacing:-.04em;
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;line-height:1.05;
  overflow-wrap:anywhere;
}
.footer__mail:hover{color:var(--accent);}
.footer__tag{color:var(--muted);font-size:16px;margin:22px 0 30px;}

.footer__nav{display:flex;flex-direction:column;}
.footer__nav a{
  display:flex;align-items:center;gap:8px;padding:19px 4px;
  border-bottom:1px solid var(--line);color:var(--muted-2);
  font-size:19px;font-weight:500;letter-spacing:-.025em;
  transition:color .25s var(--ease),padding-left .3s var(--ease);
}
.footer__nav a:first-child{border-top:1px solid var(--line);color:var(--ink);}
.footer__nav a:hover{color:var(--ink);padding-left:12px;}
.footer__nav em{font-style:normal;font-size:12px;}
.footer__nav span{flex:1;}
.footer__nav svg{width:19px;height:19px;}

.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:34px;font-size:16px;}
.footer__bottom a:hover{color:var(--accent);}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* =========================================================
   PRODUCT PAGES
   ========================================================= */
.phero{position:relative;min-height:660px;background:#0B0B0B;overflow:hidden;isolation:isolate;}
.phero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.phero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,9,9,.93) 0%,rgba(9,9,9,.82) 30%,rgba(9,9,9,.5) 64%,rgba(9,9,9,.3) 100%);
}
.phero__inner{
  position:relative;max-width:var(--wrap);margin-inline:auto;
  padding:150px var(--gutter) 58px;min-height:660px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
/* align-self stops the badge stretching to the full column width. */
.phero .badge{background:rgba(255,70,46,.16);align-self:flex-start;}
.phero__title{
  font-size:clamp(46px,8.4vw,112px);font-weight:700;line-height:.94;
  letter-spacing:-.05em;color:#fff;margin-top:20px;max-width:13ch;
}
.phero hr{border-color:rgba(255,255,255,.22);margin:34px 0 26px;max-width:640px;}
.phero__lede{color:rgba(255,255,255,.84);font-size:17px;line-height:1.6;max-width:640px;}
.phero__lede b{color:#fff;font-weight:600;}
.phero .tags{justify-content:flex-start;margin-top:34px;}
.phero .tags span{background:rgba(255,255,255,.13);color:#fff;}

/* Body rows: label parked in the left column, prose in the right. */
.psec{padding:96px 0 0;}
.prow{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:40px;align-items:start;}
.prow__body{max-width:980px;}
.prow__body h2{font-size:23px;font-weight:600;letter-spacing:-.03em;margin-bottom:14px;}
.prow__body p{color:var(--ink-2);font-size:clamp(19px,1.5vw,25px);line-height:1.45;letter-spacing:-.02em;}
.prow__body .dots{margin-top:34px;}
.prow + .prow{margin-top:92px;}
.psec hr{margin:56px 0;}

.pspec{display:grid;gap:16px;margin-top:26px;}
.pspec li{
  display:flex;gap:14px;align-items:flex-start;
  font-size:17px;line-height:1.5;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:16px;
}
.pspec li i{font-family:var(--mono);font-style:normal;color:var(--accent);flex:none;}
.pspec li b{font-weight:600;color:var(--ink);}

.more{padding:110px 0 0;}
.more .products__grid{padding-bottom:120px;}

@media (max-width:1180px){
  .prow{grid-template-columns:1fr;gap:22px;}
  .prow + .prow{margin-top:70px;}
}
@media (max-width:680px){
  .phero,.phero__inner{min-height:540px;}
  .phero__inner{padding:120px var(--gutter) 44px;}
  .phero .tags{flex-wrap:wrap;}
  .psec{padding-top:64px;}
  .more .products__grid{grid-template-columns:1fr;}
}

@media (max-width:1180px){
  :root{--gutter:32px;}
  .statement{text-indent:5em;}
  .about__grid{grid-template-columns:1fr;gap:26px;}
  .faq{grid-template-columns:1fr;gap:26px;}
  .faq__q{grid-template-columns:110px 1fr 24px;}
  .faq__a>p{padding-left:114px;padding-right:20px;}
  .contact__grid{grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:56px 60px;}
  .why__card{min-height:560px;}
}

@media (max-width:1000px){
  .nav__links,.nav__cta{display:none;}
  .burger{display:block;}
  .brand img{width:44px;height:44px;}
  .brand span{font-size:20px;}

  .hero__note{position:static;width:100%;max-width:520px;text-align:left;transform:none;margin-top:36px;}
  .hero__globe{margin-left:0;margin-bottom:16px;}
  .hero__inner{padding-top:130px;padding-bottom:96px;}

  .about__shots{grid-template-columns:1fr;padding:70px 0 60px;}
  .about__cols{grid-template-columns:1fr;gap:34px;margin-top:44px;}
  .process__grid{grid-template-columns:1fr;padding-bottom:110px;}
  .pcard{min-height:250px;}
  .products__grid{grid-template-columns:1fr;padding-bottom:110px;}
  .stats__grid{grid-template-columns:1fr;gap:52px;padding-top:70px;}
  .why{padding-top:100px;}
  .why__grid{grid-template-columns:1fr;padding-bottom:110px;}
  .reviews__grid{grid-template-columns:1fr;padding-bottom:70px;}
  .contact__grid{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr;gap:48px;padding-top:52px;}
  .marquee{margin:60px 0;}
  .band{height:52vh;}
}

@media (max-width:680px){
  :root{--gutter:20px;--r-lg:18px;}
  .sechead{grid-template-columns:1fr;gap:10px;padding:26px 0 32px;}
  .sechead .mono:last-child{text-align:left;}
  .statement{text-indent:0;font-size:26px;line-height:1.2;}
  .hero__kicker{font-size:20px;max-width:none;}
  .hero__title{letter-spacing:-.045em;}
  .prod__meta{flex-wrap:wrap;gap:14px;}
  .tags{justify-content:flex-start;width:100%;}
  .faq__q{grid-template-columns:44px 1fr 20px;gap:12px;padding:20px 2px;}
  .faq__a>p{padding-left:56px;padding-right:0;}
  .footer__nav a{font-size:17px;}
  .why__card{min-height:480px;}
  .why__logo{bottom:96px;}
  .contact__form input,.contact__form textarea,.contact__form button{padding:20px 18px;}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:10px;}
  .supplied__flags{gap:26px;}
  .supplied__flags img{width:46px;height:38px;}
  .marquee__track img{width:100px;height:124px;padding:26px 14px;}
  .band{height:44vh;}
}