/* =========================================================================
   CO₂ — THE SAFETY MOLECULE
   Type rule: exactly THREE sizes (--fs-title / --fs-sub / --fs-body)
              and THREE families (title / subtitle / body).
   Colour: ~70% warm off-white, ~20% ocean petrol, ~10% mint.
   ========================================================================= */

:root{
  /* ---- the only three type sizes on the site ---- */
  --fs-title: clamp(2.1rem, 1.15rem + 4.1vw, 4.15rem);
  --fs-sub:   clamp(1.125rem, 1.02rem + 0.52vw, 1.5rem);
  --fs-body:  clamp(0.95rem, 0.905rem + 0.22vw, 1.0625rem);

  /* ---- the only three families ---- */
  --font-title: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-sub:   "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* ---- colour ---- */
  --paper:    #FAF8F5;
  --paper-2:  #F2EEE8;
  --paper-3:  #E9E3DA;
  --ink:      #0E2128;
  --ink-75:   rgba(14,33,40,.75);
  --ink-55:   rgba(14,33,40,.56);
  --petrol:   #1B4550;
  --petrol-2: #2C6670;
  --petrol-3: #62A0A2;
  --mint:     #A9D8C9;
  --mint-2:   #D8EDE4;
  --mint-3:   #EEF7F3;
  --line:     rgba(14,33,40,.12);
  --line-soft:rgba(14,33,40,.07);

  --sp-sec: clamp(76px, 9vw, 156px);
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1280px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-pill: 999px;
  --ease: cubic-bezier(.16,1,.3,1);
  --head-h: 74px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);font-weight:400;
  line-height:1.72;letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,ul{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--mint);color:var(--petrol)}

/* ---------- typography primitives (3 sizes only) ---------- */
.t-title{
  font-family:var(--font-title);font-size:var(--fs-title);
  font-weight:300;line-height:1.05;letter-spacing:-.022em;text-wrap:balance;
}
.t-title strong{font-weight:inherit;color:var(--petrol)}
.t-title em{font-style:normal;color:var(--petrol-2)}
.t-sub{
  font-family:var(--font-sub);font-size:var(--fs-sub);
  font-weight:300;line-height:1.42;letter-spacing:-.006em;text-wrap:pretty;
}
.t-body{font-size:var(--fs-body)}
/* labels / eyebrows / nav all reuse the BODY size — tracking does the work */
.t-label{
  font-family:var(--font-title);font-size:var(--fs-body);
  font-weight:400;text-transform:uppercase;letter-spacing:.24em;line-height:1.5;
}
.t-mark{font-family:var(--font-title);font-weight:300;letter-spacing:.2em;text-transform:uppercase}
.muted{color:var(--ink-55)}
.petrol{color:var(--petrol)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sp-sec);position:relative}
.sec--tight{padding-block:clamp(56px,6vw,104px)}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}
.grid{display:grid;gap:clamp(24px,3vw,44px)}
.stack{display:flex;flex-direction:column}
.gap-s{gap:14px}.gap-m{gap:24px}.gap-l{gap:40px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.rv-clip{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease);transition-delay:var(--d,0ms)}
.rv-clip.in{clip-path:inset(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--petrol);--fg:#fff;--bd:var(--petrol);
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  padding:.95em 1.65em;border-radius:var(--r-pill);border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);overflow:hidden;isolation:isolate;
  font-family:var(--font-title);font-weight:400;letter-spacing:.06em;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--mint);transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(27,69,80,.55);color:var(--petrol);border-color:var(--mint)}
.btn:hover::before{transform:translateY(0)}
.btn .ar{transition:transform .5s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn--ghost{--bg:transparent;--fg:var(--petrol);--bd:rgba(27,69,80,.32)}
.btn--ghost:hover{box-shadow:0 14px 30px -18px rgba(27,69,80,.45)}
.btn--light{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.4)}
.btn--light:hover{color:var(--petrol)}
.btn--solid-light{--bg:var(--mint-3);--fg:var(--petrol);--bd:transparent}

/* text link with sweeping underline */
.lnk{position:relative;display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-title);letter-spacing:.06em;color:var(--petrol)}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease)}
.lnk:hover::after{transform:scaleX(1);transform-origin:left}
.lnk .ar{transition:transform .5s var(--ease)}
.lnk:hover .ar{transform:translateX(5px)}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:60;transition:background .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s}
.hd .wrap{max-width:1480px}
.hd__in{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);height:var(--head-h)}
.hd.stuck{background:rgba(250,248,245,.82);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 var(--line-soft)}
.hd__logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.hd__logo img{height:42px;width:auto;transition:transform .6s var(--ease)}
.hd__logo:hover img{transform:scale(1.06)}
.hd__logo span{display:none;font-family:var(--font-title);font-weight:300;letter-spacing:.12em;text-transform:uppercase;font-size:var(--fs-body);white-space:nowrap;color:var(--petrol)}
@media(min-width:1600px){.hd__logo span{display:block}}
.hd__nav{display:flex;align-items:center;gap:clamp(9px,1.15vw,20px);margin-left:auto}
.hd__nav a{position:relative;font-family:var(--font-title);font-weight:400;letter-spacing:.028em;color:var(--ink-75);padding:6px 2px;transition:color .4s var(--ease);white-space:nowrap}
.hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--petrol);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.hd__nav a:hover{color:var(--petrol)}
.hd__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-check{display:none}
.hd__nav a[aria-current]{color:var(--petrol)}
.hd__nav a[aria-current]::after{transform:scaleX(1)}
.hd__side{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.hd .btn{padding:.62em 1.25em}
.lang{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-title);letter-spacing:.1em;color:var(--ink-55)}
.lang a{padding:2px 1px;transition:color .35s var(--ease)}
.lang a[aria-current]{color:var(--petrol)}
.lang a:hover{color:var(--petrol)}
.lang i{font-style:normal;opacity:.35}
.burger{display:none;position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);padding:0}
/* the bar is positioned from the centre rather than laid out as a flex/grid
   item, so it cannot drift no matter how the button box is sized */
.burger span{position:absolute;top:50%;left:50%;width:17px;height:1px;margin:0;
  background:var(--ink);transform:translate(-50%,-50%);transition:background .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:17px;height:1px;
  background:var(--ink);transition:transform .45s var(--ease)}
.burger span::before{top:-5px}.burger span::after{top:5px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:translateY(5px) rotate(45deg)}
body.nav-open .burger span::after{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:1320px){
  .burger{display:block}
  /* the nav becomes position:fixed below, so its margin-left:auto stops
     pushing anything — the side group has to claim the gap itself */
  .hd__side{margin-left:auto}
  .hd__nav{
    position:fixed;inset:var(--head-h) 0 auto;flex-direction:column;align-items:flex-start;
    gap:2px;padding:26px var(--gutter) 38px;background:rgba(250,248,245,.97);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    box-shadow:0 20px 40px -26px rgba(14,33,40,.4);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
    max-height:calc(100svh - var(--head-h));overflow-y:auto;
  }
  body.nav-open .hd__nav{opacity:1;visibility:visible;transform:none}
  .hd__nav a{padding:11px 0;width:100%;border-bottom:1px solid var(--line-soft)}
  .hd__nav a::after{display:none}
}
@media (max-width:560px){
  .hd .btn{display:none}
  .hd__nav .nav-check{display:block;color:var(--petrol);font-weight:500}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,940px);display:flex;align-items:center;padding-top:calc(var(--head-h) + 40px);padding-bottom:clamp(60px,8vw,110px);overflow:hidden}
.hero__in{position:relative;z-index:2;max-width:1000px}
.hero__eyebrow{color:var(--petrol-2);margin-bottom:clamp(20px,3vw,34px)}
.hero .t-title{margin-bottom:clamp(22px,3vw,34px)}
.hero__mol{
  font-family:var(--font-title);font-weight:300;letter-spacing:.34em;text-transform:uppercase;
  font-size:var(--fs-body);color:var(--petrol);margin-bottom:clamp(24px,3vw,36px);
  display:flex;align-items:center;gap:16px;
}
.hero__mol::before{content:"";width:clamp(28px,5vw,72px);height:1px;background:var(--petrol-3)}
.hero__lines{display:flex;flex-wrap:wrap;gap:8px 28px;margin-bottom:clamp(30px,4vw,46px);max-width:640px}
.hero__lines li{position:relative;padding-left:18px;color:var(--ink-75);font-size:var(--fs-body)}
.hero__lines li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(169,216,201,.28)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.hero__scroll{position:absolute;left:var(--gutter);bottom:26px;z-index:2;display:flex;align-items:center;gap:12px;color:var(--ink-55);font-family:var(--font-title);letter-spacing:.2em;text-transform:uppercase;font-size:var(--fs-body)}
.hero__scroll i{display:block;width:1px;height:38px;background:linear-gradient(var(--petrol-3),transparent);animation:drip 2.6s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:700px){
  .hero__scroll{display:none}
  .hero{text-align:center}
  .hero__in{margin-inline:auto}
  .hero__mol{justify-content:center;letter-spacing:.18em;text-wrap:balance}
  .hero__mol::before{display:none}
  .hero__lines{flex-direction:column;align-items:center;gap:9px;max-width:none;margin-inline:auto}
  .hero__lines li{padding-left:0}
  .hero__lines li::before{display:none}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:center}
}

/* animated atmosphere */
.atmo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmo__orb{
  position:absolute;border-radius:50%;filter:blur(46px);opacity:.62;
  background:radial-gradient(circle at 35% 35%,var(--mint) 0%,rgba(169,216,201,.42) 42%,rgba(169,216,201,0) 70%);
  animation:breathe 11s ease-in-out infinite;
}
/* The hero breathes: 4s in, 1s hold, 6s out, 1s rest. A longer exhale than
   inhale is the pattern the brand's own tools train, so the page sets the
   rhythm it is selling — watch it for a few seconds and you fall into it. */
.atmo__breath{position:absolute;width:min(74vw,780px);aspect-ratio:1;
  right:-12vw;top:50%;transform:translateY(-50%)}
.atmo__breath > i{position:absolute;inset:0;border-radius:50%;display:block}
.atmo__breath .atmo__orb{
  filter:blur(52px);opacity:1;animation:breath-cycle 12s infinite;
  background:radial-gradient(circle at 42% 38%,
    rgba(169,216,201,.92) 0%, rgba(169,216,201,.48) 38%,
    rgba(98,160,162,.20) 60%, rgba(98,160,162,0) 74%);
}
/* one ring released on each exhale */
.atmo__ring{border:1px solid var(--petrol-3);opacity:0;
  animation:exhale-ring 12s ease-out infinite}
.atmo__ring--2{border-color:var(--mint);animation-delay:1.1s;opacity:0}
@keyframes breath-cycle{
  0%   {transform:scale(.94);opacity:.5;  animation-timing-function:cubic-bezier(.34,0,.24,1)}  /* inhale 4s */
  33%  {transform:scale(1.16);opacity:.85;animation-timing-function:linear}                     /* hold 1s   */
  42%  {transform:scale(1.16);opacity:.85;animation-timing-function:cubic-bezier(.42,0,.32,1)}  /* exhale 6s */
  92%  {transform:scale(.94);opacity:.48; animation-timing-function:linear}                     /* rest 1s   */
  100% {transform:scale(.94);opacity:.5}
}
@keyframes exhale-ring{
  0%,42%   {transform:scale(.62);opacity:0}
  52%      {opacity:.34}
  92%,100% {transform:scale(1.32);opacity:0}
}
@media(max-width:700px){
  .atmo__breath{width:min(112vw,560px);right:auto;left:50%;top:34vh;transform:translate(-50%,-50%)}
}
@media (prefers-reduced-motion:reduce){
  .atmo__ring{display:none}
  .atmo__breath .atmo__orb{opacity:.6}
}
.atmo__orb--b{width:min(42vw,520px);aspect-ratio:1;left:-12vw;bottom:-16vh;animation-delay:-4.6s;
  background:radial-gradient(circle at 50% 50%,rgba(98,160,162,.42) 0%,rgba(98,160,162,0) 68%)}
.atmo__orb--c{width:min(30vw,380px);aspect-ratio:1;right:22vw;bottom:2vh;animation-delay:-8s;opacity:.4;
  background:radial-gradient(circle at 50% 50%,rgba(216,237,228,.9) 0%,rgba(216,237,228,0) 70%)}
@keyframes breathe{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.14) translateY(-2.2%)}}
.atmo__wave{position:absolute;left:-6%;width:112%;opacity:.5}
.atmo__wave path{fill:none;stroke:var(--petrol-3);stroke-width:1;opacity:.5}
.atmo__wave--1{bottom:4%;animation:drift 26s linear infinite}
.atmo__wave--2{bottom:12%;opacity:.3;animation:drift 34s linear infinite reverse}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-8%)}}
.atmo__grain{position:absolute;inset:0;opacity:.5;mix-blend-mode:multiply;
  background-image:radial-gradient(circle at 1px 1px,rgba(14,33,40,.06) 1px,transparent 0);background-size:4px 4px}

/* ---------- section heads ---------- */
.shead{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2vw,26px);margin-bottom:clamp(38px,4.6vw,72px)}
.shead__eyebrow{color:var(--petrol-2);display:flex;align-items:center;gap:14px}
.shead__eyebrow::before{content:"";width:34px;height:1px;background:var(--petrol-3);flex:0 0 auto}
.shead--split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:end;gap:clamp(24px,4vw,64px)}
@media(max-width:900px){.shead--split{grid-template-columns:1fr}}

/* ---------- two-column prose ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.prose p+p{margin-top:1.15em}
.prose{color:var(--ink-75);max-width:62ch}

/* ---------- molecule figure ---------- */
.mol{position:relative;aspect-ratio:1/.86;display:grid;place-items:center;margin:0}
.mol svg{width:100%;height:auto;overflow:visible;animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-1.4%)}50%{transform:translateY(1.4%)}}
.mol .m-atom{transform-box:fill-box;transform-origin:center;animation:pulse 3.4s ease-in-out infinite}
.mol .m-atom--o1{animation-delay:-1.1s}
.mol .m-atom--o2{animation-delay:-2.2s}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.075)}}
.mol .m-ring{transform-box:fill-box;transform-origin:center;animation:spin 15s linear infinite}
.mol .m-ring--r{animation-direction:reverse;animation-duration:21s}
.mol .m-ring:nth-of-type(3){animation-duration:18s}
@keyframes spin{to{transform:rotate(360deg)}}
.mol .m-bond{stroke-dasharray:3 6;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-18}}

/* ---------- why: molecule pinned while the argument scrolls past ---------- */
.why{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(30px,5vw,88px);align-items:start}
.why__flow{display:flex;flex-direction:column;gap:clamp(34px,6.5vh,86px);padding-bottom:clamp(20px,12vh,140px)}
.why__head{display:grid;gap:22px}
.why__flow .t-sub{max-width:32ch;color:var(--petrol)}
.why .mol{position:sticky;top:calc(var(--head-h) + clamp(20px,9vh,96px));align-self:start}
@media(max-width:900px){
  .why{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  .why .mol{position:static;order:-1;max-width:420px}
  .why__flow{padding-block:0;gap:clamp(26px,4vw,40px)}
}
.roles ol{border-top:1px solid var(--line);margin-top:18px}
.roles li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,26px);align-items:baseline;
  padding:clamp(13px,1.7vw,21px) 0;border-bottom:1px solid var(--line);
  transition:padding-left .55s var(--ease),color .45s var(--ease)}
.roles li:hover{padding-left:12px;color:var(--petrol)}
.roles li span{font-family:var(--font-title);letter-spacing:.14em;color:var(--petrol-3);font-size:var(--fs-body);transition:color .45s var(--ease)}
.roles li:hover span{color:var(--petrol)}
.roles li b{font-family:var(--font-sub);font-weight:400;font-size:var(--fs-sub);line-height:1.3}

/* ---------- dark section ---------- */
.dark{background:var(--petrol);color:#fff;position:relative;overflow:hidden}
.dark .muted{color:rgba(255,255,255,.62)}
.dark .t-title em{color:var(--mint)}
.dark .shead__eyebrow{color:var(--mint)}
.dark .shead__eyebrow::before{background:rgba(169,216,201,.6)}
.dark .lnk{color:var(--mint)}
.dark .prose{color:rgba(255,255,255,.76)}
.dark__glow{position:absolute;inset:auto -10% -40% auto;width:min(70vw,780px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(169,216,201,.22) 0%,rgba(169,216,201,0) 68%);filter:blur(30px);
  animation:breathe 13s ease-in-out infinite;pointer-events:none}

/* ---------- alarm → regulation ---------- */
.shift{margin-top:clamp(40px,5.5vw,80px)}
.shift__axis{display:flex;align-items:center;gap:clamp(14px,2vw,26px);color:var(--mint)}
.shift__line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.22),var(--mint))}
.shift__signal{position:relative;margin:clamp(8px,1.2vw,16px) 0 0;isolation:isolate}
.shift__signal .sig{display:block;width:100%;height:clamp(84px,9.4vw,112px);overflow:visible;
  color:rgba(169,216,201,.34)}
.sig-sweep{
  position:absolute;inset:0;line-height:0;color:var(--mint);
  filter:drop-shadow(0 0 7px rgba(169,216,201,.6));
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%,#000 60%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 40%,#000 60%,transparent 100%);
  -webkit-mask-size:40% 100%;  mask-size:40% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:sweep 7s linear infinite;
}
@keyframes sweep{
  from{-webkit-mask-position:-10% 0;mask-position:-10% 0}
  to  {-webkit-mask-position:110% 0;mask-position:110% 0}
}
.shift__stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,34px)}
.shift__stages li{
  position:relative;padding-top:clamp(22px,2.4vw,32px);
  border-top:1px solid rgba(255,255,255,.26);
  transition:transform .6s var(--ease);
}
.shift__stages li::after{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--mint);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.shift__stages li:hover{transform:translateY(-4px)}
.shift__stages li:hover::after{transform:scaleX(1)}
.shift__dot{position:absolute;left:0;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--mint);
  opacity:.4;animation:stagelight 7s ease-in-out infinite}
@keyframes stagelight{
  0%,14%,100%{opacity:.4;transform:scale(.8);box-shadow:0 0 0 0 rgba(169,216,201,0)}
  4%{opacity:1;transform:scale(1.3);box-shadow:0 0 0 8px rgba(169,216,201,.14)}
}
.shift__n{display:block;font-family:var(--font-title);letter-spacing:.2em;color:var(--mint);font-size:var(--fs-body);opacity:.7}
.shift__w{display:block;margin:10px 0 8px;font-family:var(--font-title);font-weight:300;font-size:var(--fs-sub);
  letter-spacing:.16em;text-transform:uppercase;color:#fff;line-height:1.2}
.shift__x{display:block;color:rgba(255,255,255,.66);font-size:var(--fs-body);line-height:1.55;max-width:26ch}
.shift__note{margin-top:clamp(26px,3vw,40px);max-width:52ch}
@media(max-width:820px){.shift__stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,4vw,30px)}}
@media(max-width:480px){.shift__stages{grid-template-columns:1fr}}

/* ---------- "does this feel familiar" ---------- */
.feels{display:grid;gap:0;border-top:1px solid var(--line)}
.feels li{border-bottom:1px solid var(--line);padding:clamp(16px,2vw,24px) 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2.4vw,34px);align-items:baseline;transition:padding-left .55s var(--ease),color .45s var(--ease)}
.feels li:hover{padding-left:12px;color:var(--petrol)}
.feels li span{font-family:var(--font-title);letter-spacing:.14em;color:var(--petrol-3);font-size:var(--fs-body);transition:color .45s var(--ease)}
.feels li:hover span{color:var(--petrol)}
.feels li p{font-family:var(--font-sub);font-size:var(--fs-sub);font-weight:300;line-height:1.4}

/* ---------- statement band ---------- */
.band{position:relative;overflow:hidden;background:var(--paper-2)}
.band__in{position:relative;z-index:2;text-align:center;max-width:960px;margin-inline:auto}
.band .t-title{margin-bottom:clamp(20px,2.6vw,32px)}
.pulse-ring{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(86vw,760px);aspect-ratio:1;z-index:1;pointer-events:none}
.pulse-ring i{position:absolute;inset:0;border:1px solid var(--petrol-3);border-radius:50%;opacity:0;animation:ripple 7s var(--ease) infinite}
.pulse-ring i:nth-child(2){animation-delay:-2.33s}
.pulse-ring i:nth-child(3){animation-delay:-4.66s}
@keyframes ripple{0%{transform:scale(.35);opacity:0}18%{opacity:.4}100%{transform:scale(1);opacity:0}}

/* ---------- world cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.cards{grid-template-columns:1fr}}
.card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  padding:clamp(24px,2.5vw,34px);border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.2));
  overflow:hidden;isolation:isolate;
  transition:transform .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease);
}
.card::before{content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(169,216,201,.55),rgba(169,216,201,0) 70%);
  opacity:0;transform:scale(.6);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.card:hover{transform:translateY(-6px);border-color:rgba(27,69,80,.26);box-shadow:0 26px 54px -30px rgba(14,33,40,.32)}
.card:hover::before{opacity:1;transform:scale(1)}
.card__n{font-family:var(--font-title);letter-spacing:.2em;color:var(--petrol-3);font-size:var(--fs-body)}
.card__t{font-family:var(--font-title);font-weight:300;font-size:var(--fs-sub);letter-spacing:.11em;text-transform:uppercase;line-height:1.3;color:var(--petrol)}
.card__tags{font-size:var(--fs-body);color:var(--petrol-2);letter-spacing:.02em}
.card__d{color:var(--ink-75);flex:1}
.card .lnk{margin-top:6px}

/* ---------- product cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,30px)}
@media(max-width:1100px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.pgrid{grid-template-columns:1fr}}
.pc{display:flex;flex-direction:column;gap:16px;height:100%}
.pc__media{
  position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--paper-2);
  aspect-ratio:4/5;border:1px solid var(--line-soft);
  transition:box-shadow .6s var(--ease),border-color .6s var(--ease);
}
.pc__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.05s var(--ease),opacity .6s var(--ease)}
.pc__media img+img{position:absolute;inset:0;opacity:0}
.pc:hover .pc__media{box-shadow:0 28px 56px -34px rgba(14,33,40,.4);border-color:rgba(27,69,80,.2)}
.pc:hover .pc__media img{transform:scale(1.055)}
.pc:hover .pc__media img+img{opacity:1}
.pc__cat{position:absolute;left:12px;top:12px;z-index:2;padding:.34em .9em;border-radius:var(--r-pill);
  background:rgba(250,248,245,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:var(--font-title);font-size:var(--fs-body);letter-spacing:.12em;text-transform:uppercase;color:var(--petrol);
  transform:translateY(-6px);opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pc:hover .pc__cat{opacity:1;transform:none}
.pc__body{display:flex;flex-direction:column;gap:8px;flex:1}
.pc__t{font-family:var(--font-sub);font-weight:400;font-size:var(--fs-sub);line-height:1.28;letter-spacing:-.004em;transition:color .4s var(--ease)}
.pc:hover .pc__t{color:var(--petrol)}
.pc__d{color:var(--ink-55);flex:1}
.pc__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line-soft)}
.pc__price{font-family:var(--font-sub);font-size:var(--fs-sub);font-weight:400;color:var(--petrol)}
.pc__go{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-title);letter-spacing:.08em;color:var(--petrol);opacity:.62;transition:opacity .45s var(--ease)}
.pc:hover .pc__go{opacity:1}
.pc:hover .pc__go .ar{transform:translateX(4px)}
.pc__go .ar{transition:transform .5s var(--ease)}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:clamp(28px,3.4vw,48px)}
.chip{padding:.6em 1.25em;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink-75);
  font-family:var(--font-title);letter-spacing:.06em;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.chip:hover{border-color:rgba(27,69,80,.34);color:var(--petrol);transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:#fff}
.chip em{font-style:normal;opacity:.5;margin-left:.5em}
.pc[hidden]{display:none}

/* ---------- product detail ---------- */
.pd{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,4.6vw,78px);align-items:start;padding-top:calc(var(--head-h) + clamp(28px,4vw,56px))}
@media(max-width:920px){.pd{grid-template-columns:1fr}}
.pd__gallery{position:sticky;top:calc(var(--head-h) + 24px);display:flex;flex-direction:column;gap:12px}
@media(max-width:920px){.pd__gallery{position:static}}
.pd__stage{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);border:1px solid var(--line-soft);aspect-ratio:1/1}
.pd__stage img{width:100%;height:100%;object-fit:cover;transition:opacity .55s var(--ease),transform 1.1s var(--ease)}
.pd__stage:hover img{transform:scale(1.03)}
.pd__thumbs{display:flex;gap:10px;flex-wrap:wrap}
.pd__thumbs button{width:66px;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  opacity:.55;transition:opacity .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.pd__thumbs button:hover{opacity:1;transform:translateY(-2px)}
.pd__thumbs button[aria-current="true"]{opacity:1;border-color:var(--petrol)}
.pd__thumbs img{width:100%;height:100%;object-fit:cover}
.crumbs{display:flex;align-items:center;gap:.55em;color:var(--ink-55);font-family:var(--font-title);letter-spacing:.08em;margin-bottom:22px}
.crumbs a:hover{color:var(--petrol)}
.pd__price{display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;margin:clamp(18px,2.4vw,26px) 0}
.pd__price b{font-family:var(--font-sub);font-size:var(--fs-sub);font-weight:400;color:var(--petrol)}
.pd__buy{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(22px,2.6vw,30px) 0}
.pd__note{color:var(--ink-55);max-width:56ch}
.vars{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;margin-top:26px}
.vars li{background:var(--paper);display:flex;justify-content:space-between;gap:18px;padding:.85em 1.1em;transition:background .45s var(--ease)}
.vars li:hover{background:var(--mint-3)}
.vars span{color:var(--ink-75)}
.vars b{font-weight:400;color:var(--petrol);font-family:var(--font-sub);white-space:nowrap}
.pd__desc{margin-top:clamp(30px,3.4vw,44px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line);color:var(--ink-75)}
.pd__desc h3{font-family:var(--font-title);font-weight:400;font-size:var(--fs-sub);letter-spacing:.1em;text-transform:uppercase;color:var(--petrol);margin:2em 0 .7em}
.pd__desc h3:first-child{margin-top:0}
.pd__desc p+p{margin-top:1.1em}
.pd__desc ul{margin:1em 0;display:grid;gap:.55em}
.pd__desc li{position:relative;padding-left:20px}
.pd__desc li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--mint)}

/* ---------- marquee ---------- */
.mq{overflow:hidden;border-block:1px solid var(--line);padding-block:clamp(16px,1.8vw,24px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq__track{display:flex;width:max-content;animation:slide 46s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__track span{font-family:var(--font-title);font-weight:300;font-size:var(--fs-sub);letter-spacing:.18em;text-transform:uppercase;color:var(--petrol);padding-inline:clamp(18px,2.4vw,34px);white-space:nowrap;display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.mq__track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--mint)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- notice ---------- */
.notice{display:flex;gap:14px;align-items:flex-start;padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--mint-3);color:var(--ink-75)}
.notice svg{flex:0 0 auto;margin-top:.24em;color:var(--petrol-2)}

/* ---------- footer ---------- */
.ft{background:var(--petrol);color:#fff;padding-block:clamp(56px,6vw,96px) 30px;position:relative;overflow:hidden}
.ft .muted{color:rgba(255,255,255,.58)}
.ft .t-sub{color:#fff}
.ft a{color:rgba(255,255,255,.72);transition:color .4s var(--ease)}
.ft a:hover{color:var(--mint)}
.ft__top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,60px);padding-bottom:clamp(38px,4vw,58px);border-bottom:1px solid rgba(255,255,255,.16)}
@media(max-width:860px){.ft__top{grid-template-columns:1fr 1fr}.ft__brand{grid-column:1/-1}}
@media(max-width:520px){.ft__top{grid-template-columns:1fr}}
.ft__logo{height:56px;width:auto;margin-bottom:22px;filter:brightness(0) invert(1);opacity:.88}
.ft h4{font-family:var(--font-title);font-weight:400;font-size:var(--fs-body);letter-spacing:.22em;text-transform:uppercase;color:var(--mint);margin-bottom:18px}
.ft ul{display:grid;gap:10px}
.ft__bottom{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;padding-top:26px;color:rgba(255,255,255,.55)}
.ft__glow{position:absolute;inset:auto auto -50% -14%;width:min(60vw,640px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(169,216,201,.2),rgba(169,216,201,0) 68%);filter:blur(24px);pointer-events:none;animation:breathe 15s ease-in-out infinite}

/* ---------- CO₂ Check page ---------- */
.checkmain{padding-top:calc(var(--head-h) + clamp(18px,3vw,44px));padding-bottom:clamp(44px,6vw,96px)}

/* ---------- misc ---------- */
.soon{display:inline-flex;align-items:center;gap:.6em;color:var(--ink-55);font-family:var(--font-title);letter-spacing:.06em}
.soon i{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--petrol-2);outline-offset:3px;border-radius:4px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}.rv-clip{clip-path:none}
}