/* ─── INITIAL LOADER ─── */
#page-loader{position:fixed;inset:0;z-index:9999;background:#0B0D10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;transition:opacity .6s cubic-bezier(.19,1,.22,1);font-family:"Geist",system-ui,sans-serif}
#page-loader.hidden{opacity:0;pointer-events:none}
.loader-mark{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:10.5px;letter-spacing:.38em;text-transform:uppercase;color:#fff}
.loader-sep{position:relative;display:flex;align-items:center}
.loader-b{width:20px;height:1px;background:#fff}
.loader-d{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4px;height:4px;border:1px solid #fff;border-radius:50%;background:#0B0D10}
.loader-line{width:120px;height:1px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.loader-fill{position:absolute;inset:0;background:#2A4D7A;transform:translateX(-100%);animation:loader-sweep 1.2s cubic-bezier(.19,1,.22,1) infinite}
@keyframes loader-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Hide initial content under loader until ready */
body.loading{overflow:hidden}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-l,.reveal-r,.reveal-scale,.reveal-blur,.hero-h1{opacity:1!important;transform:none!important;filter:none!important}
}

/* ─── TOKENS ─── */
:root{
  --p:#1F3A5C;--p2:#2A4D7A;--p3:#16304F;--p-dim:rgba(31,58,92,.2);
  --ink:#0B0D10;--ink2:#141720;--ink3:#1C2029;--ink4:#242830;
  --bone:#FFFFFF;--bone2:#F5F5F5;--stone:#EBEBEB;--white:#FFFFFF;
  --gold:#C8A96A;--gold2:rgba(200,169,106,.12);
  --mute3:rgba(255,255,255,.09);--mute2:rgba(255,255,255,.18);--mute:rgba(255,255,255,.36);
  --lmute3:rgba(0,0,0,.07);--lmute2:rgba(0,0,0,.16);--lmute:rgba(0,0,0,.36);
  --serif:"Newsreader",Georgia,serif;
  --sans:"Geist",system-ui,sans-serif;
  --mono:"Geist Mono",monospace;
  --ease:cubic-bezier(.19,1,.22,1);--cg-ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{background:var(--ink);color:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* ── PAGE SWITCHING ── */
.page{display:none}
.page.active{display:block;animation:pgIn .4s var(--ease) both}
@keyframes pgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── SCROLL REVEAL ── */
/* Calm, composed motion system */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-l.in{opacity:1;transform:translateX(0)}
.reveal-r{opacity:0;transform:translateX(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal-r.in{opacity:1;transform:translateX(0)}
.reveal-scale{opacity:0;transform:scale(.96);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal-scale.in{opacity:1;transform:scale(1)}
.reveal-blur{opacity:0;filter:blur(6px);transition:opacity 1.1s var(--ease),filter 1.1s var(--ease)}
.reveal-blur.in{opacity:1;filter:blur(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.22s}.d3{transition-delay:.34s}.d4{transition-delay:.46s}.d5{transition-delay:.58s}

/* Hero headline — slow glide in */
.hero-h1{opacity:0;transform:translateY(32px);transition:opacity 1.2s var(--ease) .15s,transform 1.2s var(--ease) .15s}
.hero-h1.in{opacity:1;transform:translateY(0)}

/* Page entrance — smoother */
.page.active{animation:pgIn .6s var(--ease) both}

/* Section divider draw-in */
.draw-line{position:relative}
.draw-line::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;opacity:.2;transition:width 1.2s var(--ease)}
.draw-line.in::after{width:100%}

/* Product card hover */
.prod-card{transition:background .35s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)!important}
.prod-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.32)}

/* Surface row hover */
.surface-row{transition:background .35s var(--ease),padding-left .4s var(--ease)}
.surface-row:hover{background:rgba(0,0,0,.025);padding-left:8px}

/* Routine step hover */
.routine-step{transition:background .35s var(--ease)}
.routine-step:hover{background:rgba(0,0,0,.025)}

/* Testimonial card hover */
.tcard{transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .35s var(--ease)}
.tcard:hover{transform:translateY(-3px);box-shadow:0 16px 48px rgba(0,0,0,.06);background:rgba(0,0,0,.015)}

/* Buttons — subtle elevation on hover */
.btn-primary,.btn-ghost,.nav-shop,.prod-add,.buy-bar-btn,.cf-sub{transition:background .25s var(--ease),border-color .25s,box-shadow .35s var(--ease),color .25s,transform .25s var(--ease)}
.btn-primary:hover,.nav-shop:hover,.prod-add:hover,.buy-bar-btn:hover,.cf-sub:hover{box-shadow:0 12px 32px rgba(31,58,92,.4);transform:translateY(-1px)}
.btn-ghost:hover{transform:translateY(-1px)}

/* Nav underline */
.nav-links li a{position:relative;border-bottom:none!important}
.nav-links li a::after{content:'';position:absolute;left:16px;right:16px;bottom:14px;width:auto;height:2px;background:var(--p2);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links li a:hover::after,.nav-links li a.act::after{transform:scaleX(1)}

/* Footer link underline */
footer ul li a{position:relative;display:inline-block}
footer ul li a::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--p2);transition:width .4s var(--ease)}
footer ul li a:hover::after{width:100%}

/* Manifesto pulse */
.mfst{position:relative;overflow:hidden}
.mfst::before{content:'';position:absolute;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);animation:mfst-pulse 8s ease-in-out infinite;pointer-events:none;z-index:0}
.mfst-inner{position:relative;z-index:1}
@keyframes mfst-pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5}50%{transform:translate(-50%,-50%) scale(1.15);opacity:.9}}

/* Form focus states */
.cf{transition:border-color .3s var(--ease)}
.cf:focus-within{border-bottom-color:var(--p2)}
.cf label{transition:color .3s var(--ease)}
.cf:focus-within label{color:rgba(255,255,255,.55)}

/* Image hover scale */
.prod-img,.j-img{overflow:hidden}
.prod-img .ph,.j-img .ph{transition:transform 1.4s var(--ease)}
.prod-card:hover .prod-img .ph,.j-e:hover .j-img .ph{transform:scale(1.04)}

/* Journal card hover */
.j-e{transition:background .35s var(--ease)}
.j-e:hover{background:rgba(0,0,0,.02)}

/* ── PLACEHOLDERS ── */
.ph{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ph.dk{background:var(--ink3)}.ph.lt{background:#E8E8E8}.ph.md{background:#192030}
.ph::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom right,transparent calc(50%-.5px),rgba(255,255,255,.055) calc(50%-.5px),rgba(255,255,255,.055) calc(50%+.5px),transparent calc(50%+.5px)),
             linear-gradient(to bottom left, transparent calc(50%-.5px),rgba(255,255,255,.055) calc(50%-.5px),rgba(255,255,255,.055) calc(50%+.5px),transparent calc(50%+.5px))}
.ph.lt::before{background:linear-gradient(to bottom right,transparent calc(50%-.5px),rgba(0,0,0,.065) calc(50%-.5px),rgba(0,0,0,.065) calc(50%+.5px),transparent calc(50%+.5px)),
               linear-gradient(to bottom left, transparent calc(50%-.5px),rgba(0,0,0,.065) calc(50%-.5px),rgba(0,0,0,.065) calc(50%+.5px),transparent calc(50%+.5px))}
.ph::after{content:'';position:absolute;inset:20px;border:1px solid rgba(255,255,255,.055);pointer-events:none;z-index:1}
.ph.lt::after{border-color:rgba(0,0,0,.055)}
.ph .ph-ic{position:relative;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ph.lt .ph-ic{border-color:rgba(0,0,0,.15)}
.ph .ph-ic svg{width:15px;height:15px;opacity:.28}
.ph .cap{position:absolute;bottom:16px;left:20px;font-family:var(--mono);font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.22);z-index:3;line-height:1;pointer-events:none}
.ph.lt .cap{color:rgba(0,0,0,.22)}
.ph.drag-over{outline:2px solid var(--p2);outline-offset:-2px}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:4;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.ph img.loaded{opacity:1}

/* ── COLORBAR ── */
.cbar{display:flex;height:2px;position:fixed;top:0;left:0;right:0;z-index:400}
.cbar>div:nth-child(1){flex:38;background:#fff}
.cbar>div:nth-child(2){flex:32;background:var(--p)}
.cbar>div:nth-child(3){flex:18;background:var(--ink)}
.cbar>div:nth-child(4){flex:7;background:var(--bone)}
.cbar>div:nth-child(5){flex:5;background:#565E36}

/* ── NAV ── */
nav{position:fixed;top:2px;left:0;right:0;z-index:300;height:60px;display:flex;justify-content:space-between;align-items:center;padding:0 52px;border-bottom:1px solid var(--mute3);background:rgba(11,13,16,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:background .3s}
.mark{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.38em;text-transform:uppercase;color:#fff;cursor:pointer;user-select:none}
.mark .sep{position:relative;display:flex;align-items:center}
.mark .sep .b{width:20px;height:1px;background:currentColor}
.mark .sep .d{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4px;height:4px;border:1px solid currentColor;border-radius:50%;background:rgba(11,13,16,.88)}
.nav-links{display:flex;gap:0;list-style:none}
.nav-links li a{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.32);padding:20px 16px;display:block;transition:color .2s;border-bottom:2px solid transparent;cursor:pointer;user-select:none}
.nav-links li a:hover{color:rgba(255,255,255,.78)}
.nav-links li a.act{color:#fff;border-color:var(--p2)}
.nav-shop{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;background:var(--p);color:#fff;border:none;padding:10px 22px;cursor:pointer;transition:background .2s;user-select:none}
.nav-shop:hover{background:var(--p2)}

/* ── STICKY BUY BAR ── */
.buy-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:rgba(11,13,16,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--mute3);
  padding:16px 52px;
  display:flex;align-items:center;justify-content:space-between;
  transform:translateY(100%);transition:transform .4s var(--ease);
}
.buy-bar.visible{transform:translateY(0)}
.buy-bar-left{display:flex;flex-direction:column;gap:3px}
.buy-bar-product{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.buy-bar-name{font-family:var(--sans);font-weight:600;font-size:15px;color:#fff}
.buy-bar-right{display:flex;align-items:center;gap:16px}
.buy-bar-price{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.5)}
.buy-bar-btn{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;background:var(--p);color:#fff;border:none;padding:12px 28px;cursor:pointer;transition:background .2s;white-space:nowrap}
.buy-bar-btn:hover{background:var(--p2)}
.buy-bar-close{background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;padding:4px 8px;font-size:18px;line-height:1;transition:color .2s}
.buy-bar-close:hover{color:#fff}

/* ─────────────────────────────────────────────
   HOME PAGE
───────────────────────────────────────────── */
#page-home{padding-top:62px;background:var(--ink)}

/* HERO — full bleed */
.home-hero{position:relative;min-height:100vh;display:flex;flex-direction:column;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background:var(--ink3);cursor:pointer}
.hero-bg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,16,.4) 0%,rgba(11,13,16,0) 35%,rgba(11,13,16,0) 60%,rgba(11,13,16,.85) 100%)}
.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.hero-upload-hint{position:absolute;bottom:50%;left:50%;transform:translate(-50%,50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none}
.hero-upload-hint .ph-ic{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.hero-upload-hint .ph-ic svg{width:18px;height:18px;opacity:.28}
.hero-upload-hint span{font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.2);white-space:nowrap}
.hero-bg .cap{position:absolute;bottom:16px;left:20px;font-family:var(--mono);font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.2);z-index:3;line-height:1;pointer-events:none}
.hero-bg.drag-over{outline:2px solid var(--p2);outline-offset:-2px}

.hero-body{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:80px;padding:56px 52px;align-items:center}
.hero-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--p2);margin-bottom:32px}
.hero-h1{font-family:var(--sans);font-weight:700;font-size:clamp(56px,7vw,120px);line-height:.92;letter-spacing:-.04em;color:#fff}
.hero-h1 .dim{color:rgba(255,255,255,.18);font-weight:300}
.hero-h1 .ac{color:var(--p2)}
.hero-right{padding-left:52px;border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:22px;justify-content:center}
.hero-right .lead{font-family:var(--serif);font-style:normal;font-weight:300;font-size:21px;line-height:1.4;color:rgba(255,255,255,.78);max-width:380px}
.hero-right p{font-size:14px;line-height:1.78;color:rgba(255,255,255,.38);font-weight:300;max-width:400px}
.hero-right p b{color:rgba(255,255,255,.78);font-weight:500}
.hero-cta-row{display:flex;gap:12px;margin-top:8px}
.btn-primary{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;background:var(--p);color:#fff;border:none;padding:13px 26px;cursor:pointer;transition:background .2s;white-space:nowrap}
.btn-primary:hover{background:var(--p2)}
.btn-ghost{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;background:none;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.2);padding:13px 26px;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-ghost:hover{color:#fff;border-color:rgba(255,255,255,.5)}



/* OBSERVATION — white */
.obs{background:var(--white);border-bottom:1px solid var(--lmute3)}
.obs-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:660px}
.obs-copy{padding:100px 52px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--lmute3);color:var(--ink)}
.obs-copy h2{font-family:var(--sans);font-weight:700;font-size:clamp(34px,4.2vw,68px);line-height:.9;letter-spacing:-.042em;color:var(--ink);margin-bottom:44px}
.obs-copy h2 em{color:rgba(0,0,0,.15);font-style:normal;font-weight:300}
.obs-copy p{font-size:15px;line-height:1.78;color:rgba(0,0,0,.44);font-weight:300;max-width:440px;margin-bottom:18px}
.obs-copy p b{color:var(--ink);font-weight:500}
.obs-copy .obs-link{display:inline-flex;align-items:center;gap:10px;margin-top:12px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--p);cursor:pointer;border-bottom:1px solid var(--p-dim);padding-bottom:2px;transition:opacity .2s}
.obs-copy .obs-link:hover{opacity:.7}
.obs-imgs{display:grid;grid-template-rows:1fr 1fr}
.obs-imgs .ph:first-child{border-bottom:1px solid var(--lmute3)}

/* MANIFESTO — petrol */
.mfst{padding:148px 52px;background:var(--p);display:flex;align-items:center;justify-content:center;min-height:50vh}
.mfst-inner{max-width:820px;text-align:center}
.mfst-label{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.24);margin-bottom:40px}
.mfst-q{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(22px,3.2vw,50px);line-height:1.16;letter-spacing:-.012em;color:#fff}
.mfst-q em{color:rgba(255,255,255,.28);font-style:normal}
.mfst-rule{width:28px;height:1px;background:rgba(255,255,255,.16);margin:44px auto 0}

/* SIGNATURE PRODUCTS — ink */
.products-sec{background:var(--ink);border-bottom:1px solid var(--mute3)}
.products-header{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;padding:96px 52px 64px;border-bottom:1px solid var(--mute3)}
.products-header h2{font-family:var(--sans);font-weight:700;font-size:clamp(32px,3.8vw,60px);line-height:.93;letter-spacing:-.038em;color:#fff}
.products-header p{font-size:14px;line-height:1.76;color:rgba(255,255,255,.36);font-weight:300}
.products-header .see-all{margin-top:20px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.36);border-bottom:1px solid rgba(255,255,255,.12);padding-bottom:2px;display:inline-block;cursor:pointer;transition:color .2s}
.products-header .see-all:hover{color:#fff}

.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:none}
.prod-card{border-right:1px solid var(--mute3);transition:background .22s;cursor:pointer;position:relative}
.prod-card:last-child{border-right:none}
.prod-card:hover{background:rgba(255,255,255,.025)}
.prod-card.featured{background:var(--ink2)}
.prod-img{height:320px;position:relative;overflow:hidden}
.prod-img .ph{height:100%}
.prod-badge{position:absolute;top:16px;left:16px;z-index:5;font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;background:var(--p);color:#fff;padding:5px 10px;pointer-events:none}
.prod-body{padding:28px 28px 32px}
.prod-system{font-family:var(--mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--p2);margin-bottom:10px}
.prod-name{font-family:var(--sans);font-weight:600;font-size:18px;color:#fff;letter-spacing:-.014em;margin-bottom:8px;line-height:1.18}
.prod-tagline{font-family:var(--serif);font-style:italic;font-weight:300;font-size:14px;color:rgba(255,255,255,.38);margin-bottom:16px;line-height:1.4}
.prod-surface{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.24);margin-bottom:20px}
.prod-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--mute3);padding-top:20px;margin-top:4px}
.prod-price{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.6)}
.prod-add{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;background:var(--p);color:#fff;border:none;padding:9px 18px;cursor:pointer;transition:background .2s}
.prod-add:hover{background:var(--p2)}
.prod-card:hover .prod-add{background:var(--p2)}

/* ROUTINE — bone */
.routine{background:var(--white);color:var(--ink);border-bottom:1px solid var(--lmute3)}
.routine-header{padding:96px 52px 64px;border-bottom:1px solid var(--lmute3)}
.routine-label{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(0,0,0,.28);margin-bottom:24px}
.routine-header h2{font-family:var(--sans);font-weight:700;font-size:clamp(32px,3.8vw,60px);line-height:.93;letter-spacing:-.038em;color:var(--ink)}
.routine-steps{display:grid;grid-template-columns:repeat(4,1fr);padding:0 52px}
.routine-step{padding:52px 40px 52px 0;border-right:1px solid var(--lmute3)}
.routine-step:last-child{border-right:none}
.routine-step:not(:first-child){padding-left:40px;padding-right:0}
.routine-step:last-child{padding-right:0}
.rs-num{font-family:var(--sans);font-weight:700;font-size:clamp(52px,5vw,80px);line-height:1;letter-spacing:-.04em;color:rgba(0,0,0,.07);margin-bottom:8px}
.rs-freq{font-family:var(--mono);font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,0,0,.28);margin-bottom:14px}
.rs-name{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink);margin-bottom:10px;letter-spacing:-.01em}
.rs-body{font-size:13px;line-height:1.74;color:rgba(0,0,0,.44);font-weight:300;margin-bottom:20px}
.rs-product{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--p);border:1px solid var(--p-dim);padding:5px 10px;display:inline-block;cursor:pointer;transition:background .2s,color .2s}
.rs-product:hover{background:var(--p);color:#fff}

/* PRINCIPLES — olive editorial */
.prin{padding:120px 52px;background:#565E36;border-bottom:1px solid rgba(255,255,255,.08)}
.prin-label{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:56px}
.pr{display:grid;grid-template-columns:72px 1fr 1fr;border-top:1px solid rgba(255,255,255,.14);padding:48px 0;align-items:start}
.pr:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.pr-num{font-family:var(--sans);font-weight:700;font-size:clamp(44px,4.5vw,72px);line-height:1;letter-spacing:-.04em;color:rgba(255,255,255,.12);padding-top:4px}
.pr-title{font-family:var(--sans);font-weight:600;font-size:16px;color:#fff;line-height:1.24;letter-spacing:-.012em;padding:0 52px 0 36px}
.pr-body{font-size:14px;line-height:1.78;color:rgba(255,255,255,.58);font-weight:300}

/* TRUST — white */
.trust{background:var(--white);color:var(--ink);border-bottom:1px solid var(--lmute3)}
.trust-header{padding:96px 52px 64px;border-bottom:1px solid var(--lmute3)}
.trust-label{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(0,0,0,.28);margin-bottom:24px}
.trust-header h2{font-family:var(--sans);font-weight:700;font-size:clamp(32px,3.5vw,54px);line-height:.94;letter-spacing:-.036em;color:var(--ink)}
.testimonials{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:none}
.tcard{padding:52px 40px;border-right:1px solid var(--lmute3);border-bottom:1px solid var(--lmute3)}
.tcard:nth-child(3n){border-right:none}
.tcard:nth-child(n+4){border-bottom:none}
.tcard-stars{display:flex;gap:4px;margin-bottom:20px}
.tcard-stars span{width:8px;height:8px;background:var(--p);border-radius:50%;display:block}
.tcard-q{font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;line-height:1.44;color:var(--ink);margin-bottom:20px}
.tcard-meta{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(0,0,0,.3)}
.tcard-vehicle{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--p);margin-top:6px}
/* before/after */
.before-after{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--lmute3)}
.ba-panel{position:relative}
.ba-panel:first-child{border-right:1px solid var(--lmute3)}
.ba-img{height:400px}
.ba-label{position:absolute;bottom:20px;left:24px;font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;background:var(--ink);color:rgba(255,255,255,.7);padding:5px 10px}
.ba-caption{padding:24px 32px;border-top:1px solid var(--lmute3)}
.ba-caption p{font-size:13px;line-height:1.72;color:rgba(0,0,0,.42);font-weight:300}

/* BRAND STATEMENT — petrol */
.stmt{padding:148px 52px;background:var(--p);border-bottom:1px solid rgba(255,255,255,.08)}
.stmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.stmt-h{font-family:var(--sans);font-weight:700;font-size:clamp(48px,7vw,110px);line-height:.83;letter-spacing:-.048em;color:#fff}
.stmt-h span{color:rgba(255,255,255,.1);font-weight:300}
.stmt-right{border-left:1px solid rgba(255,255,255,.14);padding-left:68px}
.stmt-row{border-top:1px solid rgba(255,255,255,.1);padding:22px 0}
.stmt-lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.26);margin-bottom:10px}
.stmt-row p{font-size:15px;color:rgba(255,255,255,.56);font-weight:300;line-height:1.5}
.stmt-row p b{color:#fff;font-weight:500}

/* START HERE CTA — ink */
.start-here{padding:120px 52px;background:var(--ink);border-bottom:1px solid var(--mute3);text-align:center}
.start-here h2{font-family:var(--sans);font-weight:700;font-size:clamp(36px,4.5vw,72px);line-height:.9;letter-spacing:-.04em;color:#fff;margin-bottom:20px}
.start-here p{font-size:15px;line-height:1.72;color:rgba(255,255,255,.36);font-weight:300;max-width:480px;margin:0 auto 40px}
.start-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.path-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:var(--ink2);border:1px solid var(--mute3);padding:20px 28px;cursor:pointer;transition:border-color .2s,background .2s;min-width:200px}
.path-btn:hover{border-color:rgba(255,255,255,.3);background:var(--ink3)}
.path-btn .pb-label{font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3)}
.path-btn .pb-name{font-family:var(--sans);font-weight:600;font-size:14px;color:#fff}

/* ─────────────────────────────────────────────
   PHILOSOPHY PAGE
───────────────────────────────────────────── */
#page-philosophy{padding-top:62px;background:var(--white);color:var(--ink)}

.phil-intro-sec{padding:112px 52px;border-bottom:1px solid var(--lmute3)}
.phil-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.phil-intro-grid h2{font-family:var(--sans);font-weight:700;font-size:clamp(36px,4.6vw,74px);line-height:.9;letter-spacing:-.042em;color:var(--ink)}
.phil-intro-grid h2 em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--p)}
.phil-intro-grid p{font-size:15px;line-height:1.76;color:rgba(0,0,0,.42);font-weight:300}

.phil-failures{padding:0 52px 120px;background:var(--white)}
.phil-layout{display:grid;grid-template-columns:272px 1fr;gap:92px;padding-top:92px}
.phil-sticky{position:sticky;top:88px;align-self:start}
.phil-sticky h3{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--ink);margin-bottom:14px;line-height:1.3}
.phil-sticky p{font-size:13px;line-height:1.76;color:rgba(0,0,0,.36);font-weight:300}
.pe{padding:48px 0;border-top:1px solid var(--lmute3)}
.pe:last-child{border-bottom:1px solid var(--lmute3)}
.pe-n{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;color:rgba(0,0,0,.24);text-transform:uppercase;margin-bottom:18px}
.pe h4{font-family:var(--sans);font-weight:600;font-size:18px;color:var(--ink);margin-bottom:14px;line-height:1.24;letter-spacing:-.014em}
.pe p{font-size:14px;line-height:1.78;color:rgba(0,0,0,.42);font-weight:300;max-width:520px;margin-bottom:16px}
.pe-product-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--p);border:1px solid var(--p-dim);padding:7px 14px;cursor:pointer;transition:background .2s,color .2s}
.pe-product-link:hover{background:var(--p);color:#fff}
.pe-arr{width:12px;height:1px;background:currentColor;position:relative;display:inline-block}
.pe-arr::after{content:'';position:absolute;right:0;top:-3px;width:4px;height:4px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}

.own{padding:120px 52px;background:#565E36;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.own-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.own-copy h2{font-family:var(--sans);font-weight:700;font-size:clamp(30px,3.6vw,56px);line-height:.95;letter-spacing:-.034em;color:#fff;margin-bottom:28px}
.own-copy h2 em{font-family:var(--serif);font-style:italic;font-weight:300;color:rgba(255,255,255,.42)}
.own-copy p{font-size:14px;line-height:1.78;color:rgba(255,255,255,.58);font-weight:300;margin-bottom:18px;max-width:420px}
.own-img{height:500px}

.founder{background:var(--ink);border-top:1px solid var(--mute3)}
.founder-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:740px}
.founder-img-col .ph{height:100%;min-height:740px}
.founder-text-col{padding:84px 52px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--mute3)}
.founder-text-col h2{font-family:var(--sans);font-weight:700;font-size:clamp(26px,2.8vw,44px);line-height:1.04;letter-spacing:-.028em;color:#fff;margin-bottom:28px}
.founder-text-col h2 em{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--p2)}
.founder-text-col p{font-size:14px;line-height:1.78;color:rgba(255,255,255,.36);font-weight:300;margin-bottom:16px;max-width:440px}
.specs{border-top:1px solid var(--mute3);margin-top:36px}
.spec-r{display:grid;grid-template-columns:136px 1fr;border-bottom:1px solid var(--mute3);padding:13px 0;align-items:baseline}
.spec-l{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.22)}
.spec-v{font-family:var(--sans);font-weight:400;font-size:14.5px;color:rgba(255,255,255,.6)}
.spec-v.it{font-family:var(--serif);font-style:italic;font-size:16px;color:rgba(255,255,255,.4)}

/* ─────────────────────────────────────────────
   MATERIALS PAGE
───────────────────────────────────────────── */
#page-materials{padding-top:62px;background:var(--white);color:var(--ink)}
#page-ev-car-care{padding-top:62px;background:var(--white);color:var(--ink)}

.mat-header-sec{padding:96px 52px 0}
.mat-label{font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(0,0,0,.26);margin-bottom:28px}
.mat-h1{font-family:var(--sans);font-weight:700;font-size:clamp(48px,7vw,120px);line-height:.84;letter-spacing:-.048em;color:var(--ink);margin-bottom:0}
.mat-h1 span{color:rgba(0,0,0,.1);font-weight:300}
.mat-hero{height:500px;border-top:1px solid var(--lmute3);border-bottom:1px solid var(--lmute3);margin-top:60px}

.mat-surfaces{padding:0 52px;border-bottom:1px solid var(--lmute3)}
.surface-row{display:grid;grid-template-columns:64px 196px 1fr 200px;gap:0;border-top:1px solid var(--lmute3);padding:44px 0;align-items:start}
.sr-idx{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,0,0,.24);padding-top:3px}
.sr-name{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);line-height:1.2;padding-right:40px}
.sr-body{font-size:14px;line-height:1.76;color:rgba(0,0,0,.42);font-weight:300;padding-right:36px}
.sr-right{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.sr-tag{font-family:var(--mono);font-size:7.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--p);border:1px solid var(--p-dim);padding:5px 10px;display:inline-block}
.sr-prod-link{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(0,0,0,.36);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.sr-prod-link:hover{color:var(--p)}
.sr-prod-link::after{content:'→';font-size:10px}

.form-sec{padding:120px 52px;background:var(--ink);border-bottom:1px solid var(--mute3)}
.form-header{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:72px}
.form-header h2{font-family:var(--sans);font-weight:700;font-size:clamp(34px,4.2vw,66px);line-height:.92;letter-spacing:-.04em;color:#fff}
.form-header p{font-size:14px;line-height:1.76;color:rgba(255,255,255,.34);font-weight:300}
.form-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--mute3)}
.fg-e{padding:48px 48px 48px 0;border-right:1px solid var(--mute3);border-bottom:1px solid var(--mute3)}
.fg-e:nth-child(even){padding:48px 0 48px 48px;border-right:none}
.fg-e:nth-last-child(-n+2){border-bottom:none}
.fg-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--p2);margin-bottom:14px;display:block}
.fg-e h3{font-family:var(--sans);font-weight:600;font-size:15px;color:#fff;margin-bottom:12px;line-height:1.26;letter-spacing:-.012em}
.fg-e p{font-size:13.5px;line-height:1.76;color:rgba(255,255,255,.32);font-weight:300}

.mat-img-strip{display:grid;grid-template-columns:repeat(4,1fr);height:290px;background:var(--white);border-top:1px solid var(--lmute3)}
.mat-img-strip .ph{border-right:1px solid var(--lmute3)}
.mat-img-strip .ph:last-child{border-right:none}

/* ─────────────────────────────────────────────
   JOURNAL PAGE
───────────────────────────────────────────── */
#page-journal{padding-top:62px;background:var(--white);color:var(--ink)}

.j-header-sec{padding:96px 52px 72px;border-bottom:1px solid var(--lmute3)}
.j-header-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.j-header-grid h2{font-family:var(--sans);font-weight:700;font-size:clamp(44px,5.6vw,92px);line-height:.88;letter-spacing:-.046em;color:var(--ink)}
.j-header-grid p{font-size:14px;line-height:1.76;color:rgba(0,0,0,.42);font-weight:300}

.j-featured{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--lmute3)}
.jf-img{height:480px;border-right:1px solid var(--lmute3)}
.jf-body{padding:64px 48px;display:flex;flex-direction:column;justify-content:center}
.j-cat{font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--p);margin-bottom:18px;display:block}
.jf-body h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(20px,2.2vw,34px);line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin-bottom:18px}
.jf-body p{font-size:14px;line-height:1.76;color:rgba(0,0,0,.42);font-weight:300;margin-bottom:28px}
.j-link{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,0,0,.3);border-bottom:1px solid var(--lmute2);padding-bottom:3px;transition:color .2s;cursor:pointer}
.j-link:hover{color:var(--p)}
.j-arr{width:14px;height:1px;background:currentColor;position:relative;display:inline-block}
.j-arr::after{content:'';position:absolute;right:0;top:-3px;width:5px;height:5px;border-right:1px solid currentColor;border-top:1px solid currentColor;transform:rotate(45deg)}

.j-grid{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--lmute3)}
.j-e{border-right:1px solid var(--lmute3)}
.j-e:last-child{border-right:none}
.j-img{height:240px}
.j-body{padding:26px 26px 34px}
.j-body .j-cat{margin-bottom:12px}
.j-body h4{font-family:var(--sans);font-weight:600;font-size:15px;line-height:1.28;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px}
.j-body p{font-size:13px;line-height:1.74;color:rgba(0,0,0,.38);font-weight:300;margin-bottom:18px}

/* ─────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────── */
#page-contact{padding-top:62px;background:var(--ink)}
.ct-wrap{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 62px)}
.ct-img-col .ph{height:100%;min-height:calc(100vh - 62px)}
.ct-form-col{padding:84px 52px;display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--mute3)}
.ct-form-col h2{font-family:var(--sans);font-weight:700;font-size:clamp(28px,3vw,46px);line-height:.97;letter-spacing:-.032em;color:#fff;margin-bottom:12px}
.ct-sub{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.32);font-weight:300;margin-bottom:44px;max-width:340px}
.cf{border-bottom:1px solid var(--mute3);padding:17px 0}
.cf label{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.24);margin-bottom:10px}
.cf input,.cf textarea{width:100%;background:none;border:none;outline:none;font-family:var(--sans);font-size:14.5px;color:#fff;font-weight:300;caret-color:var(--p2)}
.cf input::placeholder,.cf textarea::placeholder{color:rgba(255,255,255,.16)}
.cf textarea{min-height:60px;resize:none}
.cf-sub{background:var(--p);color:#fff;border:none;font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;padding:14px 26px;cursor:pointer;margin-top:26px;display:block;transition:background .2s}
.cf-sub:hover{background:var(--p2)}
.cf-note{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:rgba(255,255,255,.18);text-transform:uppercase;margin-top:14px}
.ct-info{display:flex;flex-wrap:wrap;gap:36px;margin-top:40px}
.ct-info-text{font-size:14px;line-height:1.6;color:rgba(255,255,255,.4);font-weight:300;max-width:260px}
.ct-info-text a{transition:color .25s var(--ease)}
.ct-info-text a:hover{color:#fff}

/* ── FOOTER ── */
footer{background:var(--ink2);padding:52px;border-top:1px solid var(--mute3)}
.ft-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;padding-bottom:44px;border-bottom:1px solid var(--mute3)}
.fc-h{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.24);margin-bottom:18px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer ul li a{font-size:13px;color:rgba(255,255,255,.28);font-weight:300;transition:color .2s;cursor:pointer}
footer ul li a:hover{color:rgba(255,255,255,.72)}
.ft-brand p{font-size:13px;line-height:1.72;color:rgba(255,255,255,.24);font-weight:300;max-width:270px;margin-top:14px}
.ft-bot{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.ft-bot .mark .sep .d{background:var(--ink2)}
.ft-meta{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.18)}

/* ── SHARED UTILITY ── */
.btn-row{display:flex;gap:10px;margin-top:24px}

/* ── MOBILE ── */
@media(max-width:960px){
  nav{padding:0 20px}.nav-links li a{padding:20px 11px;font-size:8px;letter-spacing:.16em}
  .hero-body,.home-body{grid-template-columns:1fr;padding:64px 20px 40px}
  .hero-right{padding-left:0;border-left:none;border-top:1px solid rgba(255,255,255,.08);padding-top:28px;margin-top:32px}
  .hero-scroll{padding:16px 20px}
  .obs-wrap,.founder-wrap,.ct-wrap,.own-grid,.stmt-grid,.form-header,.phil-intro-grid,.j-header-grid,.j-featured,.products-header{grid-template-columns:1fr}
  .obs-copy{padding:64px 20px;border-right:none}
  .obs-imgs{grid-template-rows:250px 250px}
  .founder-img-col,.ct-img-col,.own-img{display:none}
  .founder-text-col{padding:64px 20px;border-left:none}
  .ct-form-col{padding:64px 20px;border-left:none}
  .mfst,.stmt,.start-here{padding:80px 20px}
  .routine-steps{grid-template-columns:1fr 1fr;padding:0 20px}
  .routine-step,.routine-step:not(:first-child){padding:36px 0;border-right:none;border-bottom:1px solid var(--lmute3)}
  .routine-step:nth-child(odd){padding-right:24px;border-right:1px solid var(--lmute3)}
  .routine-step:nth-child(even){padding-left:24px}
  .routine-step:nth-last-child(-n+2){border-bottom:none}
  .prod-grid{grid-template-columns:1fr}
  .prod-card{border-right:none;border-bottom:1px solid var(--mute3)}
  .phil-layout{grid-template-columns:1fr}
  .phil-sticky{position:static;margin-bottom:28px}
  .pr{grid-template-columns:1fr;gap:10px;padding:36px 0}.pr-num{font-size:40px}.pr-title{padding:0}
  .surface-row{grid-template-columns:1fr;gap:10px;padding:32px 0}
  .mat-img-strip,.j-grid{grid-template-columns:1fr 1fr}
  .jf-img{display:none}.jf-body{padding:36px 20px}
  .form-grid{grid-template-columns:1fr}
  .fg-e{border-right:none;padding:36px 0!important}
  .stmt-right{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.1);padding-top:24px}
  .ft-cols{grid-template-columns:1fr 1fr;gap:28px}
  .testimonials{grid-template-columns:1fr}
  .tcard{border-right:none}
  .before-after{grid-template-columns:1fr}
  .ba-panel:first-child{border-right:none;border-bottom:1px solid var(--lmute3)}
  .prin,.own,.phil-intro-sec,.phil-failures,.trust-header,.mat-header-sec,.form-sec,.j-header-sec,.mat-surfaces,.routine-header{padding-left:20px;padding-right:20px}
  .trust{padding:0}
  .buy-bar{padding:14px 20px}
  .path-btn{min-width:140px;padding:16px 18px}
}

/* ── IMAGE LOADING / ERROR STATES ── */
img{background:#141720}
img[loading="lazy"]{opacity:0;transition:opacity .6s cubic-bezier(.19,1,.22,1)}
img[loading="lazy"].loaded{opacity:1}

/* ── CART DRAWER ── */
.cart-drawer{position:fixed;inset:0;z-index:999;pointer-events:none}
.cart-drawer.active{pointer-events:auto}
.cart-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .4s cubic-bezier(.19,1,.22,1);cursor:pointer}
.cart-drawer.active .cart-overlay{opacity:1}
.cart-panel{position:absolute;right:0;top:0;width:460px;max-width:100%;height:100%;background:#0B0D10;border-left:1px solid rgba(255,255,255,.08);transform:translateX(100%);transition:transform .5s cubic-bezier(.19,1,.22,1);display:flex;flex-direction:column;color:#fff;font-family:var(--sans)}
.cart-drawer.active .cart-panel{transform:translateX(0)}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:28px;border-bottom:1px solid rgba(255,255,255,.08)}
.cart-header h3{font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.04em;color:#fff}
.cart-header button{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;font-size:22px;line-height:1;padding:4px 8px;transition:color .2s}
.cart-header button:hover{color:#fff}
.cart-items{flex:1;overflow-y:auto;padding:8px 28px}
.cart-empty{padding:48px 0;text-align:center;color:rgba(255,255,255,.36);font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase}
.cart-item{display:grid;grid-template-columns:1fr auto;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.06);align-items:center}
.cart-item-name{font-family:var(--sans);font-size:14px;color:#fff}
.cart-item-meta{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:rgba(255,255,255,.4);text-transform:uppercase;margin-top:4px}
.cart-item-price{font-family:var(--mono);font-size:13px;color:rgba(255,255,255,.7)}
.cart-item-remove{background:none;border:none;color:rgba(255,255,255,.3);cursor:pointer;font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;padding:6px 0;margin-top:6px;transition:color .2s}
.cart-item-remove:hover{color:#fff}
.cart-footer{padding:28px;border-top:1px solid rgba(255,255,255,.08)}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:20px}
.cart-total .amt{font-size:16px;letter-spacing:.08em;color:#fff}
.checkout-trust{display:flex;justify-content:space-between;gap:8px;margin-bottom:18px;font-family:var(--mono);font-size:7px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.34)}
.cart-checkout{display:flex;justify-content:center;align-items:center;height:54px;background:#1F3A5C;color:#fff;text-transform:uppercase;letter-spacing:.24em;font-size:9px;font-family:var(--mono);text-decoration:none;transition:background .2s}
.cart-checkout:hover{background:#2A4D7A}
@media(max-width:520px){.cart-panel{width:100%}}

/* ── EMAIL CAPTURE ── */
.email-capture{padding:120px 52px;background:var(--ink);color:#fff;border-bottom:1px solid var(--mute3)}
.email-capture-inner{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:center}
.email-capture h3{font-family:var(--sans);font-weight:700;font-size:clamp(28px,3.4vw,52px);line-height:1.04;letter-spacing:-.032em;color:#fff;max-width:480px}
.email-capture h3 em{font-family:var(--serif);font-style:italic;font-weight:300;color:rgba(255,255,255,.4)}
.email-form{display:flex;flex-direction:column;gap:14px}
.email-form input{width:100%;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.18);outline:none;font-family:var(--sans);font-size:15px;color:#fff;font-weight:300;padding:14px 0;caret-color:var(--p2);transition:border-color .3s}
.email-form input:focus{border-bottom-color:var(--p2)}
.email-form input::placeholder{color:rgba(255,255,255,.22)}
.email-form button{background:var(--p);color:#fff;border:none;padding:15px 32px;cursor:pointer;font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;align-self:flex-start;transition:background .2s,transform .2s}
.email-form button:hover{background:var(--p2);transform:translateY(-1px)}
.email-form .email-note{font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.28);margin-top:6px}
@media(max-width:760px){.email-capture{padding:80px 20px}.email-capture-inner{grid-template-columns:1fr;gap:40px}}

/* ── FOOTER TRUST STRIP ── */
.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:32px 0;border-bottom:1px solid var(--mute3);margin-bottom:32px;font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.trust-strip div{display:flex;align-items:center;gap:10px}
.trust-strip div::before{content:'';width:5px;height:5px;background:var(--p2);border-radius:50%;flex-shrink:0}
@media(max-width:760px){.trust-strip{grid-template-columns:1fr 1fr;gap:14px}}

/* ── PRODUCT POINTS ── */
.prod-points{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.prod-points li{font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42);display:flex;align-items:center;gap:8px}
.prod-points li::before{content:'';width:4px;height:4px;background:var(--p2);border-radius:50%;display:inline-block;flex-shrink:0}

/* ── MOBILE MENU ── */
.menu-toggle{display:none;background:none;border:none;color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;padding:10px 12px;align-items:center;gap:8px}
.menu-toggle .mt-icon{display:inline-flex;flex-direction:column;gap:3px}
.menu-toggle .mt-icon span{display:block;width:16px;height:1px;background:#fff;transition:transform .3s var(--ease),opacity .3s}
body.menu-open{overflow:hidden}
body.menu-open .menu-toggle .mt-icon span:nth-child(1){transform:translateY(2px) rotate(45deg)}
body.menu-open .menu-toggle .mt-icon span:nth-child(2){opacity:0}
body.menu-open .menu-toggle .mt-icon span:nth-child(3){transform:translateY(-2px) rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:250;background:rgba(11,13,16,.98);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:80px 28px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.mobile-nav.open{opacity:1;pointer-events:auto}
.mobile-nav ul{list-style:none;display:flex;flex-direction:column;gap:24px}
.mobile-nav ul li{opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mobile-nav.open ul li{opacity:1;transform:translateY(0)}
.mobile-nav.open ul li:nth-child(1){transition-delay:.08s}
.mobile-nav.open ul li:nth-child(2){transition-delay:.14s}
.mobile-nav.open ul li:nth-child(3){transition-delay:.2s}
.mobile-nav.open ul li:nth-child(4){transition-delay:.26s}
.mobile-nav.open ul li:nth-child(5){transition-delay:.32s}
.mobile-nav ul li a{font-family:var(--sans);font-weight:600;font-size:36px;letter-spacing:-.02em;color:#fff;text-decoration:none}
.mobile-nav ul li a.act{color:var(--p2)}
.mobile-nav .mobile-shop{margin-top:48px;background:var(--p);color:#fff;text-decoration:none;padding:16px 32px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;display:inline-block}
@media(max-width:960px){
  .menu-toggle{display:inline-flex}
  nav .nav-links{display:none}
  nav .nav-shop{display:none}
}

/* ── WHATSAPP FLOATING BUTTON ── */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:240;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(0,0,0,.28);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.wa-float svg{width:30px;height:30px}
.wa-float:hover{transform:scale(1.08);box-shadow:0 12px 36px rgba(0,0,0,.36)}
@media (max-width:680px){
  .wa-float{right:16px;bottom:16px;width:50px;height:50px}
  .wa-float svg{width:27px;height:27px}
}

/* ═══════════════════════════════════════════════════════
   CARVE GARAGE — ENHANCEMENT LAYER
   Animation, polish, micro-interactions.
   Does not alter content or structure.
═══════════════════════════════════════════════════════ */

:root{
  /* Brandbook easing: settles slowly, no bounce, no overshoot */
  --cg-ease:cubic-bezier(.2,.7,.2,1);
  --cg-ease-out:cubic-bezier(.16,1,.3,1);
  --cg-t-quick:200ms;
  --cg-t-base:400ms;
  --cg-t-slow:700ms;
  --cg-t-cinema:1200ms;
  --p-dark:#7A9DCE;
}

/* ── HERO HEADLINE : editorial italic blend ───────────
   Match the Newsreader-italic emphasis pattern used on
   Philosophy / Materials / Founder headings. */
.hero-h1 .ac{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  color:var(--p-dark);
  letter-spacing:-.022em;
  font-size:1.06em;
  display:inline-block;
  padding:0 .04em;
}
.hero-h1 .dim{
  color:rgba(255,255,255,.28);
  font-weight:300;
}

/* ── NAV : readable text ─────────────────────────────── */
.nav-links li a{color:rgba(255,255,255,.66)!important}
.nav-links li a:hover{color:#fff!important}
.nav-links li a.act{color:#fff!important}

/* ── FOOTER : readable text ──────────────────────────── */
footer .fc-h{color:rgba(255,255,255,.5)!important}
footer ul li a{color:rgba(255,255,255,.56)!important}
footer ul li a:hover{color:#fff!important}
.ft-brand p{color:rgba(255,255,255,.52)!important}
.ft-meta{color:rgba(255,255,255,.42)!important}
.trust-strip{color:rgba(255,255,255,.62)!important}

/* ── PAGE FADE-IN ── */
body{opacity:0;transition:opacity .8s var(--cg-ease)}
body.cg-ready{opacity:1}

/* ── NAV : scroll-aware shrink + refined hover ── */
nav{transition:height .4s var(--cg-ease),padding .4s var(--cg-ease),background .4s var(--cg-ease),border-color .4s var(--cg-ease)}
body.cg-scrolled nav{height:52px;background:rgba(11,13,16,.94);border-bottom-color:rgba(255,255,255,.14)}
body.cg-scrolled .mark{font-size:9.5px}
body.cg-scrolled .mark .sep .b{width:16px}

/* Logo aperture pulse — every 4s in idle */
.mark .sep .d{transition:background .25s var(--cg-ease),box-shadow .35s var(--cg-ease);animation:cgAperturePulse 4.2s var(--cg-ease) infinite}
.mark:hover .sep .d{animation:none;background:currentColor;box-shadow:0 0 0 6px rgba(255,255,255,.06)}
@keyframes cgAperturePulse{
  0%,72%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  80%{box-shadow:0 0 0 3px rgba(255,255,255,.16)}
  88%{box-shadow:0 0 0 7px rgba(255,255,255,0)}
}

/* Nav link refined hover — underline from centre */
.nav-links li a::after{left:50%!important;right:auto!important;width:0;transform:none!important;transition:width .42s var(--cg-ease),left .42s var(--cg-ease)!important}
.nav-links li a:hover::after,.nav-links li a.act::after{left:16px!important;width:calc(100% - 32px)}

/* Shop btn — gentle ambient glow on hover */
.nav-shop{position:relative;overflow:hidden;transition:background .25s var(--cg-ease),box-shadow .35s var(--cg-ease)!important}
.nav-shop::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-110%);transition:transform .8s var(--cg-ease)}
.nav-shop:hover{box-shadow:0 8px 28px rgba(31,58,92,.55)}
.nav-shop:hover::after{transform:translateX(110%)}

/* ── HERO : cinematic entrance + subtle ambient ── */
.hero-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(31,58,92,.18) 0%,transparent 55%);opacity:0;animation:cgHeroAmbient 14s var(--cg-ease) infinite alternate;pointer-events:none;z-index:1}
@keyframes cgHeroAmbient{
  0%{opacity:.3;transform:translate(-3%,2%)}
  100%{opacity:.55;transform:translate(3%,-2%)}
}

/* h1 word stagger (set by JS via .cg-w spans) */
.hero-h1 .cg-w{display:inline-block;overflow:hidden;vertical-align:top}
.hero-h1 .cg-w > span{display:inline-block;transform:translateY(110%);opacity:0;transition:transform 1s var(--cg-ease-out),opacity .8s var(--cg-ease-out)}
.hero-h1.cg-in .cg-w > span{transform:translateY(0);opacity:1}

/* Right-column stagger */
.hero-right .lead,.hero-right p,.hero-cta-row{opacity:0;transform:translateY(14px);transition:opacity .9s var(--cg-ease-out),transform .9s var(--cg-ease-out)}
.hero-right.cg-in .lead{opacity:1;transform:none;transition-delay:.45s}
.hero-right.cg-in p{opacity:.78;transform:none;transition-delay:.6s}
.hero-right.cg-in p:not(.lead){opacity:.42}
.hero-right.cg-in .hero-cta-row{opacity:1;transform:none;transition-delay:.78s}

/* Scroll cue — bottom-centre of hero */
.home-hero::after{content:'SCROLL';position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:8px;letter-spacing:.32em;color:rgba(255,255,255,.32);z-index:3;padding-bottom:24px;pointer-events:none;opacity:0;animation:cgScrollCueIn 1s var(--cg-ease) 1.4s forwards,cgScrollCueBob 2.6s var(--cg-ease) 2.4s infinite}
.home-hero::before{content:'';position:absolute;bottom:20px;left:50%;width:1px;height:20px;background:linear-gradient(to bottom,rgba(255,255,255,.3),transparent);z-index:3;pointer-events:none;opacity:0;animation:cgScrollCueIn 1s var(--cg-ease) 1.6s forwards}
@keyframes cgScrollCueIn{to{opacity:1}}
@keyframes cgScrollCueBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}

/* ── BUTTONS : refined micro-interactions ── */
.btn-primary,.prod-add,.buy-bar-btn,.cf-sub,.email-form button,.cart-checkout,.nav-shop{position:relative;will-change:transform,box-shadow}
.btn-primary,.prod-add,.buy-bar-btn,.cf-sub,.email-form button{transition:background .25s var(--cg-ease),box-shadow .4s var(--cg-ease),transform .25s var(--cg-ease)!important}
.btn-primary:hover,.prod-add:hover,.buy-bar-btn:hover,.cf-sub:hover,.email-form button:hover{box-shadow:0 14px 38px rgba(31,58,92,.45),0 0 0 1px rgba(255,255,255,.06) inset;transform:translateY(-2px)}
.btn-ghost{transition:background .25s var(--cg-ease),border-color .3s var(--cg-ease),color .25s var(--cg-ease),transform .25s var(--cg-ease)}
.btn-ghost:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.55);transform:translateY(-1px)}

/* ── PRODUCT CARDS : softer hover, deeper depth ── */
.prod-card{transition:background .35s var(--cg-ease),transform .55s var(--cg-ease),box-shadow .55s var(--cg-ease)!important}
.prod-card:hover{transform:translateY(-6px);box-shadow:0 30px 80px -10px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.06) inset}
.prod-card .prod-img{position:relative;overflow:hidden}
.prod-card .prod-img .ph{transition:transform 1.4s var(--cg-ease)!important}
.prod-card:hover .prod-img .ph{transform:scale(1.045)}
.prod-card .prod-img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(11,13,16,.4) 100%);pointer-events:none;opacity:0;transition:opacity .5s var(--cg-ease);z-index:2}
.prod-card:hover .prod-img::after{opacity:1}
.prod-card .prod-price{transition:color .35s var(--cg-ease)}
.prod-card:hover .prod-price{color:#fff}
.prod-card.featured{position:relative}
.prod-card.featured::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--p2),transparent);opacity:0;transition:opacity .5s var(--cg-ease);z-index:6}
.prod-card.featured:hover::before{opacity:.8}
.prod-badge{transition:transform .4s var(--cg-ease),background .3s var(--cg-ease)}
.prod-card:hover .prod-badge{background:var(--p2);transform:translateY(-2px)}

/* ── OBSERVATION images : subtle zoom ── */
.obs-imgs .ph{transition:transform 1.6s var(--cg-ease)!important;overflow:hidden}
.obs-imgs .ph:hover{transform:scale(1.02)}

/* ── ROUTINE : number colour transition on view ── */
.routine-step{position:relative;transition:background .35s var(--cg-ease)!important}
.routine-step::before{content:'';position:absolute;top:52px;left:0;width:0;height:1px;background:var(--p2);transition:width .9s var(--cg-ease) .15s}
.routine-step.cg-in::before{width:32px}
.rs-num{transition:color .9s var(--cg-ease) .1s,transform .9s var(--cg-ease) .1s}
.routine-step.cg-in .rs-num{color:rgba(0,0,0,.18);transform:translateX(0)}
.rs-product{position:relative;overflow:hidden}
.rs-product::after{content:'';position:absolute;inset:0;background:var(--p);transform:translateX(-101%);transition:transform .5s var(--cg-ease);z-index:0}
.rs-product:hover::after{transform:translateX(0)}
.rs-product{position:relative}
.rs-product > *,.rs-product{position:relative;z-index:1}
.rs-product:hover{color:#fff!important;border-color:var(--p)!important}

/* ── PRINCIPLES : draw + lift ── */
.pr{transition:background .35s var(--cg-ease),padding-left .4s var(--cg-ease);position:relative}
.pr::before{content:'';position:absolute;top:48px;left:0;width:0;height:1px;background:rgba(255,255,255,.32);transition:width .8s var(--cg-ease) .1s}
.pr.cg-in::before{width:48px}
.pr:hover{background:rgba(255,255,255,.03);padding-left:14px}
.pr-num{transition:color .6s var(--cg-ease)}
.pr:hover .pr-num{color:rgba(255,255,255,.28)}

/* ── TESTIMONIALS : star pop-in ── */
.tcard-stars span{transform:scale(.4);opacity:0;transition:transform .6s var(--cg-ease),opacity .6s var(--cg-ease)}
.tcard.cg-in .tcard-stars span{transform:scale(1);opacity:1}
.tcard.cg-in .tcard-stars span:nth-child(1){transition-delay:.1s}
.tcard.cg-in .tcard-stars span:nth-child(2){transition-delay:.18s}
.tcard.cg-in .tcard-stars span:nth-child(3){transition-delay:.26s}
.tcard.cg-in .tcard-stars span:nth-child(4){transition-delay:.34s}
.tcard.cg-in .tcard-stars span:nth-child(5){transition-delay:.42s}
.tcard{transition:transform .55s var(--cg-ease),box-shadow .55s var(--cg-ease),background .4s var(--cg-ease)!important}
.tcard:hover{transform:translateY(-4px);box-shadow:0 24px 60px -10px rgba(0,0,0,.08);background:rgba(0,0,0,.018)}

/* ── BEFORE / AFTER : crossfade hover ── */
.ba-img{position:relative;overflow:hidden;transition:transform 1.4s var(--cg-ease)}
.ba-panel:hover .ba-img{transform:scale(1.03)}
.ba-label{transition:background .35s var(--cg-ease),color .35s var(--cg-ease)}
.ba-panel:hover .ba-label{background:var(--p2);color:#fff}

/* ── MANIFESTO : refined pulse ── */
.mfst{position:relative;overflow:hidden}
.mfst::before{transition:transform 14s var(--cg-ease),opacity 8s var(--cg-ease)!important;animation:cgMfstPulse 12s var(--cg-ease) infinite!important}
@keyframes cgMfstPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.42}
  50%{transform:translate(-50%,-50%) scale(1.2);opacity:.82}
}
.mfst-q em{transition:color .8s var(--cg-ease)}
.mfst:hover .mfst-q em{color:rgba(255,255,255,.46)}

/* ── BRAND STATEMENT : ambient depth ── */
.stmt{position:relative;overflow:hidden}
.stmt::before{content:'';position:absolute;width:120%;height:120%;left:-10%;top:-10%;background:radial-gradient(ellipse at 30% 50%,rgba(255,255,255,.045) 0%,transparent 50%);pointer-events:none;animation:cgStmtDrift 22s linear infinite}
@keyframes cgStmtDrift{0%{transform:translate(0,0)}50%{transform:translate(4%,-3%)}100%{transform:translate(0,0)}}
.stmt-h{position:relative;z-index:1}
.stmt-h span{transition:color 1s var(--cg-ease)}
.stmt:hover .stmt-h span{color:rgba(255,255,255,.18)}

/* ── PATH BUTTONS : refined ── */
.path-btn{position:relative;overflow:hidden;transition:border-color .3s var(--cg-ease),background .3s var(--cg-ease),transform .3s var(--cg-ease)!important}
.path-btn::after{content:'→';position:absolute;right:18px;top:50%;transform:translate(20px,-50%);opacity:0;font-size:14px;color:var(--p2);transition:transform .4s var(--cg-ease),opacity .3s var(--cg-ease)}
.path-btn:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.4)}
.path-btn:hover::after{transform:translate(0,-50%);opacity:1}

/* ── PLACEHOLDER SHIMMER ── */
@keyframes cgShimmer{0%{opacity:.35}50%{opacity:.7}100%{opacity:.35}}
.ph .ph-ic{animation:cgShimmer 3.4s var(--cg-ease) infinite}
.ph img.loaded ~ .ph-ic,.ph:has(img.loaded) .ph-ic{display:none}

/* ── EMAIL CAPTURE : input focus glow ── */
.email-form input{transition:border-color .35s var(--cg-ease),box-shadow .35s var(--cg-ease)}
.email-form input:focus{border-bottom-color:var(--p2);box-shadow:0 12px 24px -20px rgba(31,58,92,.5)}

/* ── CONTACT FORM : softer field interaction ── */
.cf{transition:border-bottom-color .35s var(--cg-ease)}
.cf:focus-within{border-bottom-color:var(--p2)}
.cf label{transition:color .35s var(--cg-ease),transform .35s var(--cg-ease)}
.cf:focus-within label{color:rgba(255,255,255,.7);transform:translateY(-2px)}

/* ── CART DRAWER : smoother slide ── */
.cart-panel{transition:transform .6s var(--cg-ease)!important}
.cart-item{animation:cgCartItemIn .5s var(--cg-ease) both}
@keyframes cgCartItemIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* ── PAGE TRANSITIONS : smoother ── */
.page{display:none}
.page.active{display:block;animation:cgPageIn .7s var(--cg-ease) both!important}
@keyframes cgPageIn{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}

/* ── REVEAL : brandbook timing ── */
.reveal,.reveal-l,.reveal-r,.reveal-scale,.reveal-blur{transition-timing-function:var(--cg-ease)!important;transition-duration:1s!important}
.reveal{transform:translateY(22px)}

/* Sticky buy bar polish */
.buy-bar{transition:transform .55s var(--cg-ease)!important}

/* ── SURFACE-ROW arrow on hover (materials) ── */
.surface-row{transition:background .35s var(--cg-ease),padding-left .4s var(--cg-ease)!important;position:relative}
.surface-row::before{content:'';position:absolute;left:0;top:50%;width:0;height:1px;background:var(--p);transform:translateY(-50%);transition:width .55s var(--cg-ease)}
.surface-row:hover::before{width:24px}
.surface-row:hover{padding-left:36px;background:rgba(0,0,0,.025)}

/* ── PHILOSOPHY failure-mode rows ── */
.pe{transition:background .35s var(--cg-ease),padding .4s var(--cg-ease);position:relative}
.pe:hover{background:rgba(0,0,0,.02);padding-left:14px;padding-right:14px}

/* ── JOURNAL cards ── */
.j-e{transition:background .4s var(--cg-ease),transform .5s var(--cg-ease)!important}
.j-e:hover{transform:translateY(-3px)}
.j-img .ph{transition:transform 1.4s var(--cg-ease)!important}
.j-e:hover .j-img .ph{transform:scale(1.04)}
.j-link{position:relative}
.j-link::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--p);transform:scaleX(.4);transform-origin:left;transition:transform .5s var(--cg-ease)}
.j-link:hover::after{transform:scaleX(1)}

/* ── FOUNDER specs row hover ── */
.spec-r{transition:border-color .35s var(--cg-ease)}
.spec-r:hover{border-bottom-color:rgba(255,255,255,.18)}
.spec-r:hover .spec-l{color:rgba(255,255,255,.5)}
.spec-l{transition:color .35s var(--cg-ease)}

/* ── MOBILE / KEYBOARD focus respect ── */
:focus-visible{outline:1px solid var(--p2);outline-offset:3px}
button:focus-visible,a:focus-visible{outline-color:var(--p-dark,#7A9DCE)}

/* ── REDUCED-MOTION : kill ambient animations ── */
@media (prefers-reduced-motion: reduce){
  .home-hero::after,.home-hero::before,.hero-bg::before,.mfst::before,.stmt::before{animation:none!important}
  .mark .sep .d{animation:none!important}
  .ph .ph-ic{animation:none!important}
}

/* ═══════════════════════════════════════════════════════
   BLOG + ADMIN STYLES
   Editorial post pages, admin shell, markdown editor
═══════════════════════════════════════════════════════ */

/* Journal feed loading state */
.j-loading{padding:80px 52px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(0,0,0,.3)}

/* ── SINGLE POST PAGE ── */
#page-post{padding-top:62px;background:#FFFFFF;color:var(--ink);min-height:100vh}
.post-loading{padding:120px 52px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(0,0,0,.3)}
.post-hero{padding:80px 52px 0;max-width:1200px;margin:0 auto}
.post-cat{font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--p);margin-bottom:24px;display:block}
.post-title{font-family:var(--sans);font-weight:700;font-size:clamp(36px,4.8vw,76px);line-height:.95;letter-spacing:-.038em;color:var(--ink);max-width:900px;margin-bottom:32px}
.post-meta{display:flex;gap:24px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,0,0,.4);padding-bottom:40px;border-bottom:1px solid rgba(0,0,0,.08)}
.post-meta span{display:flex;align-items:center;gap:8px}
.post-cover{margin:48px auto;max-width:1200px;padding:0 52px}
.post-cover img{width:100%;height:auto;display:block;max-height:560px;object-fit:cover}
.post-body{max-width:720px;margin:0 auto;padding:48px 52px 120px;font-family:var(--sans);font-size:17px;line-height:1.7;color:rgba(0,0,0,.78);font-weight:400}
.post-body h1{font-family:var(--sans);font-weight:700;font-size:clamp(28px,3vw,42px);line-height:1.1;margin:48px 0 20px;letter-spacing:-.02em;color:var(--ink)}
.post-body h2{font-family:var(--sans);font-weight:700;font-size:clamp(24px,2.4vw,32px);line-height:1.18;margin:40px 0 16px;letter-spacing:-.018em;color:var(--ink)}
.post-body h3{font-family:var(--sans);font-weight:600;font-size:20px;line-height:1.24;margin:32px 0 14px;color:var(--ink)}
.post-body p{margin:0 0 22px}
.post-body a{color:var(--p);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.post-body a:hover{color:var(--p2)}
.post-body img{max-width:100%;height:auto;display:block;margin:32px 0}
.post-body blockquote{border-left:2px solid var(--p);padding:8px 0 8px 24px;margin:32px 0;color:rgba(0,0,0,.6);font-family:var(--serif);font-size:20px;line-height:1.5}
.post-body blockquote p{margin:0}
.post-body ul,.post-body ol{margin:0 0 22px;padding-left:24px}
.post-body li{margin-bottom:8px}
.post-body pre{background:#0B0D10;color:#F4F2EC;padding:20px 24px;overflow-x:auto;margin:24px 0;font-family:var(--mono);font-size:13px;line-height:1.6}
.post-body code{font-family:var(--mono);font-size:.92em;background:rgba(0,0,0,.05);padding:2px 6px;border-radius:2px}
.post-body pre code{background:none;padding:0}
.post-body hr{border:none;border-top:1px solid rgba(0,0,0,.1);margin:48px 0}
.post-footer{max-width:720px;margin:0 auto;padding:48px 52px;border-top:1px solid rgba(0,0,0,.08)}
.post-back{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(0,0,0,.42);cursor:pointer;text-decoration:none}
.post-back:hover{color:var(--p)}

/* ── BLOG INDEX CARDS (dynamic) ── */
.journal-feed-grid{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid rgba(0,0,0,.08)}
.journal-feed-card{border-right:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);cursor:pointer;background:#fff;transition:background .3s}
.journal-feed-card:hover{background:rgba(0,0,0,.018)}
.journal-feed-card .cover{height:260px;background:#E8E8E8;background-size:cover;background-position:center;position:relative}
.journal-feed-card .meta{padding:24px 28px 32px}
.journal-feed-card h4{font-family:var(--sans);font-weight:600;font-size:18px;line-height:1.24;letter-spacing:-.012em;color:var(--ink);margin:12px 0 10px}
.journal-feed-card p{font-size:13.5px;line-height:1.7;color:rgba(0,0,0,.46);font-weight:300;margin-bottom:16px}
.journal-feed-card .info{display:flex;gap:16px;font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,0,0,.32)}
.journal-feed-featured{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid rgba(0,0,0,.08);cursor:pointer;background:#fff;transition:background .3s}
.journal-feed-featured:hover{background:rgba(0,0,0,.018)}
.journal-feed-featured .cover{min-height:440px;background:#E8E8E8;background-size:cover;background-position:center;border-right:1px solid rgba(0,0,0,.08)}
.journal-feed-featured .body{padding:56px 48px;display:flex;flex-direction:column;justify-content:center}
.journal-feed-featured .body h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,2.6vw,38px);line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin:18px 0}
.journal-feed-featured .body p{font-size:15px;line-height:1.74;color:rgba(0,0,0,.5);font-weight:300;margin-bottom:28px}

/* ── ADMIN SHELL ── */
#page-admin-login,#page-admin-dashboard,#page-admin-editor{padding-top:62px;background:#0B0D10;min-height:100vh}
.admin-login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:40px}
.admin-login-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(20px);padding:48px;max-width:420px;width:100%}
.admin-kicker{font-family:var(--mono);font-size:9px;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:32px}
.admin-login-card h2{font-family:var(--sans);font-weight:700;font-size:28px;color:#fff;margin-bottom:10px;letter-spacing:-.02em}
.admin-sub{font-size:14px;color:rgba(255,255,255,.4);font-weight:300;margin-bottom:36px}

.admin-shell{min-height:100vh;background:#0B0D10;color:#fff}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(11,13,16,.95);backdrop-filter:blur(20px);position:sticky;top:62px;z-index:100}
.admin-brand{display:flex;align-items:center;gap:18px}
.admin-badge{font-family:var(--mono);font-size:8.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--p2);border:1px solid rgba(42,77,122,.4);padding:4px 8px}
.admin-actions{display:flex;align-items:center;gap:12px}
#adminWho{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-right:8px}
.admin-btn{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.12);padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-block;transition:background .2s,border-color .2s}
.admin-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.admin-btn.ghost{background:transparent}
.admin-btn.primary{background:var(--p);border-color:var(--p)}
.admin-btn.primary:hover{background:var(--p2);border-color:var(--p2)}

.admin-main{padding:48px 32px}
.admin-main h1{font-family:var(--sans);font-weight:700;font-size:32px;letter-spacing:-.022em;margin-bottom:32px;color:#fff}

.admin-posts-list{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.08)}
.admin-post-row{display:grid;grid-template-columns:1fr 120px 100px 100px 120px 200px;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.admin-post-row .title{font-size:14px;color:#fff;font-weight:500}
.admin-post-row .meta{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.admin-post-row .status{font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;padding:4px 8px;border-radius:2px;text-align:center;display:inline-block}
.admin-post-row .status.published{background:rgba(42,77,122,.2);color:#7BA0CC}
.admin-post-row .status.draft{background:rgba(255,255,255,.06);color:rgba(255,255,255,.5)}
.admin-post-row .actions{display:flex;gap:8px;justify-content:flex-end}
.admin-post-row .actions a,.admin-post-row .actions button{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);background:none;border:none;cursor:pointer;text-decoration:none;padding:6px 10px;transition:color .2s}
.admin-post-row .actions a:hover{color:#fff}
.admin-post-row .actions .danger:hover{color:#FF6464}
.admin-post-row .actions .send:hover{color:#7BA0CC}

/* ── EDITOR ── */
.editor-meta{padding:32px 32px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.editor-title-input{width:100%;font-family:var(--sans);font-weight:700;font-size:36px;background:none;border:none;outline:none;color:#fff;padding:0;letter-spacing:-.024em;margin-bottom:18px}
.editor-title-input::placeholder{color:rgba(255,255,255,.18)}
.editor-meta-row{display:flex;gap:16px;margin-bottom:14px}
.editor-inline-input{flex:1;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);outline:none;padding:10px 14px;text-transform:lowercase}
.editor-inline-input::placeholder{color:rgba(255,255,255,.25);text-transform:none}
.editor-excerpt{width:100%;font-family:var(--sans);font-size:14px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);outline:none;padding:12px 14px;resize:vertical;min-height:60px;line-height:1.5;font-weight:300;margin-bottom:14px}
.editor-excerpt::placeholder{color:rgba(255,255,255,.25)}
.editor-cover-row{display:flex;gap:12px;align-items:center}
.editor-upload-cover{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:10px 18px;cursor:pointer;display:inline-block;white-space:nowrap}
.editor-upload-cover:hover{background:rgba(255,255,255,.12)}

.editor-split{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 380px)}
.editor-side{display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.08)}
.editor-side:last-child{border-right:none}
.editor-toolbar{display:flex;gap:2px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.3)}
.editor-toolbar button,.editor-toolbar label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;background:transparent;border:none;color:rgba(255,255,255,.6);padding:6px 10px;cursor:pointer;transition:color .2s,background .2s}
.editor-toolbar button:hover,.editor-toolbar label:hover{background:rgba(255,255,255,.06);color:#fff}
.editor-img-btn{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.6);padding:6px 10px;cursor:pointer}
#postContent{flex:1;width:100%;background:#0B0D10;color:rgba(255,255,255,.9);border:none;outline:none;padding:24px 32px;font-family:var(--mono);font-size:14px;line-height:1.7;resize:none;font-weight:400}
#postContent::placeholder{color:rgba(255,255,255,.2)}

.editor-preview{background:#FFFFFF;color:var(--ink);overflow-y:auto;max-height:calc(100vh - 380px)}
.editor-preview-meta{padding:10px 32px;border-bottom:1px solid rgba(0,0,0,.06);font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:rgba(0,0,0,.4)}
.post-preview-content{padding:32px;font-family:var(--sans);font-size:16px;line-height:1.7;color:rgba(0,0,0,.78)}
.post-preview-content h1{font-size:32px;font-weight:700;line-height:1.1;margin:32px 0 16px;color:var(--ink);letter-spacing:-.02em}
.post-preview-content h2{font-size:24px;font-weight:700;line-height:1.2;margin:28px 0 14px;color:var(--ink);letter-spacing:-.018em}
.post-preview-content h3{font-size:18px;font-weight:600;margin:24px 0 12px;color:var(--ink)}
.post-preview-content p{margin:0 0 16px}
.post-preview-content blockquote{border-left:2px solid var(--p);padding-left:20px;margin:24px 0;font-family:var(--serif);font-style:italic;color:rgba(0,0,0,.6)}
.post-preview-content img{max-width:100%;height:auto;display:block;margin:24px 0}
.post-preview-content a{color:var(--p);text-decoration:underline}
.post-preview-content ul,.post-preview-content ol{margin:0 0 16px;padding-left:24px}
.post-preview-content code{background:rgba(0,0,0,.06);padding:2px 6px;font-family:var(--mono);font-size:.9em}
.post-preview-content pre{background:#0B0D10;color:#F4F2EC;padding:16px 20px;overflow-x:auto;font-family:var(--mono);font-size:12px}

.editor-status{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:14px 32px;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.3)}
.editor-status.success{color:#7BC47B}
.editor-status.error{color:#FF8484}

/* Mobile responsiveness for blog/admin */
@media(max-width:960px){
  .journal-feed-grid{grid-template-columns:1fr 1fr}
  .journal-feed-featured{grid-template-columns:1fr}
  .journal-feed-featured .cover{min-height:240px;border-right:none;border-bottom:1px solid rgba(0,0,0,.08)}
  .journal-feed-featured .body{padding:32px 24px}
  .post-hero,.post-cover,.post-body,.post-footer{padding-left:24px;padding-right:24px}
  .post-meta{flex-wrap:wrap;gap:14px;font-size:8.5px}
  .admin-post-row{grid-template-columns:1fr;gap:8px}
  .admin-post-row .actions{justify-content:flex-start}
  .editor-split{grid-template-columns:1fr;min-height:auto}
  .editor-side{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .editor-preview{max-height:none}
  .editor-meta{padding:24px 20px 12px}
  .admin-topbar{padding:14px 20px;flex-wrap:wrap;gap:12px}
  .admin-main{padding:32px 20px}
  .editor-title-input{font-size:24px}
}
@media(max-width:600px){
  .journal-feed-grid{grid-template-columns:1fr}
  .admin-actions{flex-wrap:wrap}
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE REDESIGN — PREMIUM EDITORIAL LAYER
   "Porsche meets Apple" — warm off-white alternating with deep ink
   All classes prefixed hp- to avoid collisions
═══════════════════════════════════════════════════════════════ */

/* ── VARIABLES (supplemental) ── */
:root{
  --bone2:#F5F5F5;
  --section:clamp(80px,10vw,140px);
  --gutter:clamp(20px,4.5vw,72px);
}

/* Override page-home base */
#page-home{background:var(--bone);padding-top:0}

/* hero-bg::after creates a gradient when the class is present;
   suppress it here since hp-hero-overlay div handles the overlay */
.hp-hero .hero-bg::after{content:none}

/* hero-h1 base styles bleed font-size onto hp-h1; contain it */
.hp-hero .hero-h1{font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit}

/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */
.hp-hero{
  position:relative;min-height:100vh;display:flex;flex-direction:column;
  background:var(--ink);overflow:hidden;
}
.hp-hero-bg{
  position:absolute;inset:0;z-index:0;background:var(--ink3);cursor:pointer;
}
.hp-hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,13,16,.56) 0%,rgba(11,13,16,.08) 30%,rgba(11,13,16,.08) 60%,rgba(11,13,16,.78) 100%);
}
.hp-hero-body{
  position:relative;z-index:2;flex:1;display:flex;align-items:center;
  padding:calc(62px + clamp(52px,8vh,100px)) var(--gutter) clamp(52px,8vh,100px);
}
.hp-hero-left{max-width:760px}
.hp-hero-kicker{
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.36);margin-bottom:40px;display:block;
}
.hp-h1{
  font-family:var(--sans);font-weight:700;line-height:.88;margin-bottom:28px;
}
.hp-h1-serif{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(64px,8.5vw,120px);color:#fff;line-height:.88;
  display:block;letter-spacing:-.024em;
}
.hp-h1-sans{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(40px,5.5vw,80px);color:rgba(255,255,255,.55);line-height:1;
  display:block;letter-spacing:-.028em;
}
.hp-hero-sub{
  font-size:16px;line-height:1.72;max-width:420px;color:rgba(255,255,255,.52);
  font-weight:300;margin-bottom:0;
}
.hp-hero-cta{
  display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;
}
.hp-btn-prim{
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  background:var(--p);color:#fff;padding:13px 28px;border:none;cursor:pointer;
  display:inline-block;transition:background .25s var(--cg-ease),transform .25s var(--cg-ease),box-shadow .35s var(--cg-ease);
  white-space:nowrap;
}
.hp-btn-prim:hover{background:var(--p2);transform:translateY(-2px);box-shadow:0 12px 32px rgba(31,58,92,.45)}
.hp-hero-stats{
  display:flex;gap:40px;margin-top:40px;
  border-top:1px solid rgba(255,255,255,.1);padding-top:32px;flex-wrap:wrap;
}
.hp-stat{display:flex;flex-direction:column;gap:4px}
.hp-stat-n{
  font-family:var(--mono);font-size:28px;font-weight:300;
  color:rgba(255,255,255,.7);letter-spacing:-.02em;line-height:1;
}
.hp-stat-l{
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.28);line-height:1.4;
}
.hp-scroll-ind{
  position:absolute;bottom:36px;left:var(--gutter);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hp-scroll-line{width:1px;height:40px;background:rgba(255,255,255,.2);display:block}
.hp-scroll-ind span{
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.22);
  transform:rotate(90deg);transform-origin:center;display:block;white-space:nowrap;
}

/* ─────────────────────────────────────────────
   PROBLEM (hp-shift)
───────────────────────────────────────────── */
.hp-shift{background:var(--bone);color:var(--ink);padding:0}
.hp-shift-top{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  padding:var(--section) var(--gutter);border-bottom:1px solid var(--lmute3);
  align-items:start;
}
.hp-sec-label{
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(0,0,0,.28);margin-bottom:24px;display:block;
}
.hp-sec-label-lt{color:rgba(255,255,255,.28)}
.hp-shift-h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(40px,5.5vw,80px);line-height:.9;letter-spacing:-.044em;
  color:var(--ink);margin:0;
}
.hp-shift-h2 em{
  font-family:var(--serif);font-style:italic;font-weight:300;
  color:rgba(0,0,0,.22);
}
.hp-shift-copy{display:flex;flex-direction:column;gap:20px;justify-content:center}
.hp-shift-copy p{font-size:15px;line-height:1.78;color:rgba(0,0,0,.46);font-weight:300}
.hp-shift-copy p b{color:var(--ink);font-weight:500}
.hp-shift-img{border-top:1px solid var(--lmute3);height:500px}
.hp-shift-img .ph{height:100%}
.hp-shift-insight{background:var(--ink);padding:52px var(--gutter)}
.hp-shift-insight p{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(18px,2.5vw,34px);line-height:1.3;
  color:rgba(255,255,255,.72);max-width:820px;margin:0;
}

/* ─────────────────────────────────────────────
   SURFACES (hp-surf)
───────────────────────────────────────────── */
.hp-surf{background:var(--ink);padding:var(--section) 0;color:#fff}
.hp-surf-header{padding:0 var(--gutter);margin-bottom:64px}
.hp-surf-h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(40px,5.5vw,80px);line-height:.9;letter-spacing:-.044em;
  color:#fff;margin:0;
}
.hp-surf-table{border-top:1px solid var(--mute3)}
.hp-surf-row{
  display:grid;grid-template-columns:64px 200px 1fr 280px;
  border-bottom:1px solid var(--mute3);
  padding:36px var(--gutter);align-items:start;
  transition:background .3s var(--cg-ease);
}
.hp-surf-row:hover{background:rgba(255,255,255,.025)}
.surf-idx{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(255,255,255,.22);padding-top:2px;
}
.surf-name{
  font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1.3;
}
.surf-fail{
  font-size:14px;line-height:1.72;color:rgba(255,255,255,.4);
  font-weight:300;padding-right:48px;
}
.surf-req{
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--p2);line-height:1.6;
}
.hp-surf-link{
  padding:28px var(--gutter);display:block;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.28);border-top:1px solid var(--mute3);
  transition:color .2s var(--cg-ease);
}
.hp-surf-link:hover{color:#fff}

/* ─────────────────────────────────────────────
   PRODUCTS (hp-prods)
───────────────────────────────────────────── */
.hp-prods{background:var(--bone);padding:var(--section) 0}
.hp-prods-header{padding:0 var(--gutter);margin-bottom:80px}
.hp-prods-h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(40px,5.5vw,80px);line-height:.9;letter-spacing:-.044em;
  color:var(--ink);margin:0;
}
.hp-prod-row{
  display:grid;grid-template-columns:1fr 1fr;min-height:600px;
  border-top:1px solid var(--lmute3);cursor:default;
  transition:none;transform:none;box-shadow:none;
}
.hp-prod-row:hover{transform:none;box-shadow:none}
.hp-prod-row-rev{direction:rtl}
.hp-prod-row-rev > *{direction:ltr}
.hp-prod-content{
  padding:clamp(52px,6vw,96px) var(--gutter);
  display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid var(--lmute3);
}
.hp-prod-row-rev .hp-prod-content{
  border-right:none;border-left:1px solid var(--lmute3);
}
.hp-prod-content-rev{
  border-right:none!important;border-left:1px solid var(--lmute3);
}
.hp-prod-num{
  font-family:var(--mono);font-weight:300;
  font-size:clamp(80px,10vw,140px);line-height:1;
  color:rgba(0,0,0,.06);letter-spacing:-.04em;
  margin-bottom:-24px;user-select:none;
}
.hp-prod-name{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(28px,3.2vw,48px);line-height:.95;
  letter-spacing:-.032em;color:var(--ink);margin-bottom:16px;
}
.hp-prod-tagline{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(15px,1.8vw,22px);color:rgba(0,0,0,.42);
  margin-bottom:28px;line-height:1.4;
}
.hp-prod-surface{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(0,0,0,.3);margin-bottom:20px;
}
.hp-prod-specs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.hp-prod-spec{
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--lmute2);padding:5px 10px;color:rgba(0,0,0,.4);
}
.hp-prod-footer{
  display:flex;align-items:center;gap:24px;
  border-top:1px solid var(--lmute2);padding-top:24px;margin-top:4px;
}
.hp-prod-price{
  font-family:var(--mono);font-size:15px;letter-spacing:.06em;color:var(--ink);
}
.hp-prod-cta{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  background:var(--p);color:#fff;padding:11px 24px;border:none;cursor:pointer;
  display:inline-block;transition:background .25s var(--cg-ease),transform .25s var(--cg-ease);
  white-space:nowrap;
}
.hp-prod-cta:hover{background:var(--p2);transform:translateY(-1px)}
.hp-prod-badge{
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  background:var(--p);color:#fff;padding:4px 10px;
  margin-bottom:16px;display:inline-block;align-self:flex-start;
}
.hp-prod-image{position:relative;overflow:hidden;background:var(--stone)}
.hp-prod-image .ph{height:100%;min-height:500px}
.hp-prod-image .ph{transition:transform 1.4s var(--cg-ease)}
.hp-prod-row:hover .hp-prod-image .ph{transform:scale(1.03)}

/* ─────────────────────────────────────────────
   SYSTEM (hp-sys)
───────────────────────────────────────────── */
.hp-sys{background:var(--ink2);padding:var(--section) var(--gutter);color:#fff}
.hp-sys-header{margin-bottom:72px}
.hp-sys-h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(40px,5.5vw,80px);line-height:.9;letter-spacing:-.044em;
  color:#fff;margin:0;
}
.hp-sys-steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--mute3);
}
.hp-sys-step{
  padding:48px 40px 48px 0;border-right:1px solid var(--mute3);
}
.hp-sys-step:last-child{border-right:none}
.hp-sys-step:not(:first-child){padding-left:40px;padding-right:40px}
.hp-sys-step:last-child{padding-right:0}
.hp-sys-num{
  font-family:var(--mono);font-weight:300;
  font-size:clamp(56px,6vw,88px);line-height:1;
  letter-spacing:-.04em;color:rgba(255,255,255,.07);margin-bottom:4px;
}
.hp-sys-freq{
  font-family:var(--mono);font-size:8px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--p2);margin-bottom:12px;display:block;
}
.hp-sys-name{
  font-family:var(--sans);font-weight:600;font-size:17px;
  color:#fff;margin-bottom:12px;letter-spacing:-.012em;
}
.hp-sys-body{
  font-size:13px;line-height:1.78;color:rgba(255,255,255,.38);
  font-weight:300;margin-bottom:20px;
}
.hp-sys-product{
  font-family:var(--mono);font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.1);
  padding:6px 12px;display:inline-block;
  transition:background .2s var(--cg-ease),border-color .2s var(--cg-ease),color .2s var(--cg-ease);
}
.hp-sys-product:hover{background:var(--p);border-color:var(--p);color:#fff}

/* ─────────────────────────────────────────────
   PRINCIPLES (hp-prin)
───────────────────────────────────────────── */
.hp-prin{background:#4A5230;padding:0 var(--gutter);color:#fff}
.hp-prin-label{
  padding:var(--section) 0 56px;
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(255,255,255,.4);display:block;
}
.hp-pr{
  display:grid;grid-template-columns:80px 1fr 1fr;
  border-top:1px solid rgba(255,255,255,.12);padding:52px 0;align-items:start;
}
.hp-pr:last-child{border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:var(--section)}
.hp-pr-num{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(48px,5vw,72px);line-height:1;
  letter-spacing:-.04em;color:rgba(255,255,255,.1);padding-top:4px;
}
.hp-pr-title{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(15px,1.8vw,20px);color:#fff;line-height:1.26;
  letter-spacing:-.014em;padding:0 48px 0 40px;
}
.hp-pr-body{
  font-size:14px;line-height:1.8;color:rgba(255,255,255,.52);font-weight:300;
}

/* ─────────────────────────────────────────────
   PROOF (hp-proof)
───────────────────────────────────────────── */
.hp-proof{background:#FFFFFF;color:var(--ink);border-top:1px solid var(--lmute3)}
.hp-proof-header{padding:var(--section) var(--gutter) 64px}
.hp-proof-header h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(32px,3.5vw,54px);line-height:.94;letter-spacing:-.036em;
  color:var(--ink);
}
.hp-proof-cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--lmute3)}
.hp-pcard{padding:48px 36px;border-right:1px solid var(--lmute3)}
.hp-pcard:last-child{border-right:none}
.hp-pcard-stars{display:flex;gap:4px;margin-bottom:22px}
.hp-pcard-star{width:7px;height:7px;border-radius:50%;background:var(--p);display:block}
.hp-pcard-q{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(16px,1.8vw,21px);line-height:1.46;
  color:var(--ink);margin-bottom:24px;
}
.hp-pcard-meta{
  font-family:var(--mono);font-size:8px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(0,0,0,.3);
}
.hp-pcard-vehicle{
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--p);margin-top:6px;
}
.hp-ba{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--lmute3)}
.hp-ba-panel{position:relative}
.hp-ba-panel:first-child{border-right:1px solid var(--lmute3)}
.hp-ba-img{height:420px}
.hp-ba-caption{padding:24px 36px;border-top:1px solid var(--lmute3)}
.hp-ba-caption p{font-size:13px;line-height:1.74;color:rgba(0,0,0,.42);font-weight:300}
.hp-ba-label{
  position:absolute;bottom:20px;left:24px;z-index:5;
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  background:var(--ink);color:rgba(255,255,255,.65);padding:5px 10px;
}

/* ─────────────────────────────────────────────
   STATEMENT (hp-stmt)
───────────────────────────────────────────── */
.hp-stmt{
  background:var(--ink);padding:var(--section) var(--gutter);
  text-align:center;border-top:1px solid var(--mute3);
}
.hp-stmt-h{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(40px,6vw,100px);line-height:.92;
  letter-spacing:-.02em;color:#fff;margin-bottom:28px;
}
.hp-stmt-sub{
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.24);
}

/* ─────────────────────────────────────────────
   START HERE (hp-start)
───────────────────────────────────────────── */
.hp-start{
  background:var(--bone2);padding:var(--section) var(--gutter);text-align:center;
}
.hp-start h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(32px,4vw,64px);line-height:.92;letter-spacing:-.04em;
  color:var(--ink);margin-bottom:20px;
}
.hp-start p{
  font-size:15px;line-height:1.72;color:rgba(0,0,0,.42);
  font-weight:300;max-width:480px;margin:0 auto 40px;
}
.hp-start .path-btn{
  background:#fff;border-color:var(--lmute2);
}
.hp-start .path-btn:hover{border-color:rgba(0,0,0,.3);background:#fff}
.hp-start .path-btn .pb-name{color:var(--ink)}

/* ─────────────────────────────────────────────
   RESPONSIVE — 960px
───────────────────────────────────────────── */
@media(max-width:960px){
  .hp-hero-body{padding-top:calc(62px + 48px);padding-bottom:48px}
  .hp-shift-top{grid-template-columns:1fr;gap:40px;padding:64px var(--gutter)}
  .hp-surf-row{grid-template-columns:1fr;gap:10px;padding:32px var(--gutter)}
  .surf-fail{padding-right:0}
  .hp-prod-row,.hp-prod-row-rev{grid-template-columns:1fr;direction:ltr}
  .hp-prod-row-rev > *{direction:ltr}
  .hp-prod-content,.hp-prod-content-rev{
    border-right:none!important;border-left:none!important;
    border-bottom:1px solid var(--lmute3);
    padding:48px var(--gutter);
  }
  .hp-prod-image{display:block;min-height:340px}
  .hp-prod-image .ph{min-height:340px}
  .hp-sys-steps{grid-template-columns:1fr 1fr}
  .hp-sys-step,.hp-sys-step:not(:first-child){
    padding:36px 0;border-right:none;border-bottom:1px solid var(--mute3);
  }
  .hp-sys-step:nth-child(odd){padding-right:24px;border-right:1px solid var(--mute3)}
  .hp-sys-step:nth-child(even){padding-left:24px}
  .hp-sys-step:nth-last-child(-n+2){border-bottom:none}
  .hp-pr{grid-template-columns:60px 1fr;grid-template-rows:auto auto}
  .hp-pr-title{padding:0 0 0 24px}
  .hp-pr-body{grid-column:2;padding-left:24px}
  .hp-proof-cards{grid-template-columns:1fr}
  .hp-pcard{border-right:none;border-bottom:1px solid var(--lmute3)}
  .hp-pcard:last-child{border-bottom:none}
  .hp-ba{grid-template-columns:1fr}
  .hp-ba-panel:first-child{border-right:none;border-bottom:1px solid var(--lmute3)}
  .hp-hero-stats{gap:24px}
}

/* ─────────────────────────────────────────────
   RESPONSIVE — 600px
───────────────────────────────────────────── */
@media(max-width:600px){
  .hp-h1-serif{font-size:clamp(52px,14vw,80px)}
  .hp-h1-sans{font-size:clamp(32px,9vw,56px)}
  .hp-hero-stats{gap:20px}
  .hp-stat:nth-child(n+3){display:none}
  .hp-sys-steps{grid-template-columns:1fr}
  .hp-sys-step,.hp-sys-step:not(:first-child){
    padding:28px 0;border-right:none;border-bottom:1px solid var(--mute3);
  }
  .hp-sys-step:nth-child(odd){padding-right:0;border-right:none}
  .hp-sys-step:nth-child(even){padding-left:0}
  .hp-sys-step:last-child{border-bottom:none}
  .hp-pr{grid-template-columns:1fr;gap:8px}
  .hp-pr-title,.hp-pr-body{padding-left:0!important}
  .hp-pr-num{font-size:40px}
  .hp-surf-row{padding:28px var(--gutter)}
  .surf-idx{display:none}
  .hp-shift-insight p{font-size:18px}
  .hp-stmt-h{font-size:clamp(36px,9vw,64px)}
}