/* J2B — Jawad To Business
   Keeps the jawad.vip palette (near-black + #C9A84C gold) and moves it from
   "private holding company" to "trading house you can send a purchase order
   to": gridded, formal, dense with real information rather than atmosphere.

   Liquid glass is used deliberately and sparingly — nav, cards, the search
   shell — never on body copy, because a B2B buyer is here to read specs. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* brand, carried over unchanged */
  --bg:#0A0A0A;
  --surface:#100f0b;
  --card:#141209;
  --gold:#C9A84C;
  --gold-dark:#8B6914;
  --gold-light:#E8D08A;
  --text:#EAE7DE;
  --muted:#8E887A;
  --dim:#5b5648;

  --line:rgba(234,231,222,.10);
  --line2:rgba(201,168,76,.32);
  --glass:rgba(255,255,255,.045);
  --glass2:rgba(255,255,255,.075);
  --blur:22px;

  --disp:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',system-ui,-apple-system,sans-serif;

  --r:14px;          /* he asked for rounded buttons; one radius everywhere */
  --r-sm:10px;
  --r-lg:20px;
  --maxw:1240px;
  --ease:cubic-bezier(.16,1,.3,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:rgba(201,168,76,.3)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:500;line-height:1.12;letter-spacing:-.01em}

/* ── ambient ─────────────────────────────────────────────── */
.amb{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 78% -10%,rgba(201,168,76,.10),transparent 60%),
    radial-gradient(50vw 45vh at -8% 60%,rgba(139,105,20,.07),transparent 60%)}
.grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4;
  background-image:linear-gradient(rgba(234,231,222,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(234,231,222,.028) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(70vw 70vh at 50% 0%,#000,transparent 75%);
          mask-image:radial-gradient(70vw 70vh at 50% 0%,#000,transparent 75%)}

/* ── liquid glass ────────────────────────────────────────── */
/* Plain blur is the baseline. Where the browser supports an SVG backdrop
   filter (Chromium today), the same surface picks up real refraction. */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
          backdrop-filter:blur(var(--blur)) saturate(150%);
  border:1px solid var(--line);
  border-radius:var(--r);
}
@supports ((backdrop-filter:url("#j2b-liquid")) or (-webkit-backdrop-filter:url("#j2b-liquid"))){
  .glass{
    -webkit-backdrop-filter:url("#j2b-liquid") blur(11px) saturate(150%);
            backdrop-filter:url("#j2b-liquid") blur(11px) saturate(150%);
  }
}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 rgba(0,0,0,.28)}

/* ── shell ───────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
section{padding:clamp(64px,8vw,110px) 0}
.eyebrow{display:inline-block;font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);font-weight:500}
.lead{color:var(--muted);font-size:16.5px;max-width:62ch}
.muted{color:var(--muted)}
.center{text-align:center}
.shead{margin-bottom:clamp(34px,5vw,54px)}
.shead h2{font-size:clamp(30px,4.4vw,52px);margin:14px 0 14px}
.shead h2 em{font-style:italic;color:var(--gold-light)}
.shead.center{max-width:680px;margin-left:auto;margin-right:auto}
.shead.center .lead{margin:0 auto}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent);border:0;margin:0}

/* ── topbar + nav ────────────────────────────────────────── */
.topbar{background:#070706;border-bottom:1px solid var(--line);text-align:center;
  padding:9px 16px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  max-height:80px;overflow:hidden;
  transition:max-height .44s var(--ease), opacity .3s var(--ease),
             padding .44s var(--ease), border-color .3s}
.topbar b{color:var(--gold);font-weight:500}
/* scrolled: fold it away. coming back to the top unfolds it, same curve. */
.head.compact .topbar{max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-bottom-color:transparent}
.nav-in{transition:height .44s var(--ease)}
.head.compact .nav-in{height:64px}

/* The topbar and the nav are ONE sticky unit. They used to be two: the topbar
   scrolled away while the nav was still travelling down to top:0, so for about
   60px there was a translucent strip with page content showing through above
   the bar — the bar looked detached from the top of the screen. Now the header
   sticks as a whole and the topbar collapses into it smoothly instead. */
/* Fixed, not sticky, with a spacer below holding the expanded height. Sticky
   sits in normal flow, so collapsing the topbar removed 48px of document above
   the scroll position and the browser compensated — the page visibly jumped as
   the bar folded. Fixed + constant spacer means the fold changes nothing in
   flow, so it is pure animation. */
.head{position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(10,10,10,.72);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
  transition:background .4s var(--ease), border-color .4s, box-shadow .4s var(--ease)}
.head.compact{background:rgba(10,10,10,.92);box-shadow:0 12px 34px -26px rgba(0,0,0,.95)}
.nav{background:transparent;border:0}
.head-spacer{height:var(--head-h,125px)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand .mk{width:40px;height:40px;border-radius:var(--r-sm);flex:none}
.brand .bw{display:flex;flex-direction:column;line-height:1}
.brand .bw b{font-family:var(--disp);font-size:22px;font-weight:600;letter-spacing:.04em}
.brand .bw span{font-size:8.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.menu{display:flex;align-items:center;gap:4px}
.menu a{position:relative;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:10px 15px;border-radius:var(--r-sm);transition:color .25s,background .25s}
.menu a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.menu a.on{color:var(--gold-light)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;cursor:pointer}
.burger span{display:block;width:18px;height:1px;background:var(--text);margin:4px 0}
.mnav{position:fixed;inset:0;z-index:90;background:var(--bg);padding:26px 32px;
  transform:translateX(101%);transition:transform .42s var(--ease);display:flex;flex-direction:column}
.mnav.open{transform:none}
.mnav .x{align-self:flex-end;background:none;border:0;font-size:26px;color:var(--text);cursor:pointer;line-height:1}
.mnav a{font-family:var(--disp);font-size:30px;padding:18px 0;border-bottom:1px solid var(--line)}

/* ── buttons: rounded, as asked ──────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  padding:15px 30px;border-radius:999px;border:1px solid var(--gold);color:var(--gold-light);
  background:transparent;cursor:pointer;overflow:hidden;transition:color .3s,border-color .3s,transform .3s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .42s var(--ease);z-index:-1}
.btn:hover{color:#0d0b05;transform:translateY(-1px)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn.solid{background:var(--gold);color:#0d0b05;border-color:var(--gold)}
.btn.solid::before{background:var(--gold-light)}
.btn.solid:hover{color:#0d0b05}
.btn.ghost{border-color:var(--line);color:var(--text)}
.btn.ghost::before{background:var(--text)}
.btn.ghost:hover{color:var(--bg);border-color:var(--text)}
.btn.sm{padding:11px 20px;font-size:10.5px}
.btn.wide{width:100%}

/* ── hero + typewriter ───────────────────────────────────── */
.hero{position:relative;padding:clamp(70px,10vw,130px) 0 clamp(50px,7vw,90px)}
.hero-in{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.tw-stage{min-height:clamp(96px,15vw,190px);display:flex;align-items:center;margin-bottom:6px}
.tw{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:1;
  font-size:clamp(58px,12vw,150px);color:var(--text);white-space:nowrap}
/* On a phone the full name does not fit on one line at any readable size, so
   let it wrap onto two and give the stage room for them. Kept nowrap above
   this width because it is the stronger look when it fits. */
@media (max-width:720px){
  .tw{white-space:normal;font-size:clamp(38px,11.5vw,64px);line-height:1.02;overflow-wrap:break-word}
  .tw-stage{min-height:auto;padding:4px 0 2px}
}
.tw .caret{display:inline-block;width:.06em;height:.82em;background:var(--gold);
  margin-left:.06em;vertical-align:-.06em;animation:blink 1s steps(1) infinite}
.tw.done .caret{display:none}
@keyframes blink{50%{opacity:0}}
/* the scribble that strikes J2B out before the full name arrives */
.tw-scribble{position:absolute;left:0;top:50%;width:0;height:auto;pointer-events:none;overflow:visible}
.tw-scribble path{stroke:var(--gold);stroke-width:5;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.tw-scribble.go path{animation:scribble .44s var(--ease) forwards}
@keyframes scribble{to{stroke-dashoffset:0}}
.hero h1{font-size:clamp(28px,3.6vw,44px);margin:10px 0 20px;font-weight:400}
.hero h1 em{font-style:italic;color:var(--gold-light)}
.hero .lead{font-size:17.5px;margin-bottom:32px;max-width:56ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-marks{display:flex;gap:34px;flex-wrap:wrap;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.hero-marks div{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hero-marks div b{display:block;font-family:var(--disp);font-size:24px;color:var(--text);letter-spacing:0;text-transform:none;margin-bottom:5px;font-weight:600}
@media (prefers-reduced-motion:reduce){
  .tw .caret{animation:none}
  .tw-scribble.go path{animation:none;stroke-dashoffset:0}
}

/* ── verticals ───────────────────────────────────────────── */
.verts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.vert{position:relative;padding:30px 28px 26px;border-radius:var(--r-lg);overflow:hidden;
  transition:transform .5s var(--ease),border-color .4s}
.vert:hover{transform:translateY(-4px);border-color:var(--line2)}
.vert .n{font-family:var(--disp);font-size:12px;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:16px}
.vert h3{font-size:26px;margin-bottom:10px}
.vert p{font-size:14px;color:var(--muted);line-height:1.7}
.vert .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.vert .tags span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px}

/* ── process ─────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden}
.step{background:var(--bg);padding:28px 22px;transition:background .5s}
.step:hover{background:var(--surface)}
.step b{display:block;font-family:var(--disp);font-size:13px;letter-spacing:.24em;color:var(--gold);margin-bottom:14px}
.step h4{font-size:20px;margin-bottom:8px}
.step p{font-size:13.5px;color:var(--muted);line-height:1.65}

/* ── search-first catalogue ──────────────────────────────── */
.searchwrap{max-width:760px;margin:0 auto}
.searchwrap h2{font-size:clamp(28px,4vw,46px);text-align:center;margin-bottom:26px}
.searchbox{position:relative;padding:6px;border-radius:999px}
.searchbox input{width:100%;background:transparent;border:0;outline:none;
  padding:17px 56px 17px 26px;font-size:16px;font-weight:300;border-radius:999px}
.searchbox input::placeholder{color:var(--dim)}
.searchbox .ico{position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--gold);pointer-events:none}
.quick{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.quick button{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:.25s}
.quick button:hover{border-color:var(--line2);color:var(--text)}

.cats{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:0 0 30px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.chip{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:11px 19px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;transition:.25s}
.chip:hover{border-color:var(--line2);color:var(--text)}
.chip.on{background:var(--gold);border-color:var(--gold);color:#0d0b05}
.count{margin-left:auto;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.item{position:relative;padding:26px;border-radius:var(--r-lg);cursor:pointer;
  transition:transform .45s var(--ease),border-color .4s}
.item:hover{transform:translateY(-3px);border-color:var(--line2)}
.item .cat{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:12px}
.item h3{font-size:21px;margin-bottom:8px;line-height:1.25}
.item p{font-size:13.5px;color:var(--muted);line-height:1.65}
.item .meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap}
.item .meta span{font-size:11px;color:var(--dim);letter-spacing:.06em}
.item .meta span b{color:var(--muted);font-weight:400}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty b{display:block;font-family:var(--disp);font-size:26px;color:var(--text);margin-bottom:10px}

/* ── detail panel ────────────────────────────────────────── */
.panel{position:fixed;inset:0;z-index:120;background:rgba(6,6,5,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:30px}
.panel.open{display:flex}
.panel .inner{max-width:720px;width:100%;max-height:88vh;overflow-y:auto;border-radius:var(--r-lg);padding:38px 36px;background:var(--card);border:1px solid var(--line)}
.panel h3{font-size:30px;margin:10px 0 12px}
.panel .specs{margin:22px 0;border-top:1px solid var(--line);padding-top:18px;display:grid;gap:10px}
.panel .specs div{display:flex;justify-content:space-between;gap:18px;font-size:13.5px;color:var(--text)}
.panel .specs div span:first-child{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:10.5px}
.panel .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.panel .x{position:absolute;top:24px;right:28px;background:none;border:0;font-size:30px;color:var(--text);cursor:pointer;line-height:1}

/* ── terms / how we work ─────────────────────────────────── */
.tcards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.tcard{padding:28px;border-radius:var(--r-lg)}
.tcard b{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.tcard h3{font-size:22px;margin-bottom:10px}
.tcard p{font-size:14px;color:var(--muted);line-height:1.75}
.tcard ul{margin:12px 0 0;padding-left:18px}
.tcard li{font-size:14px;color:var(--muted);line-height:1.85}
.tcard li::marker{color:var(--gold)}

/* ── form ────────────────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:14px 15px;font-size:15px;font-weight:300;transition:border-color .3s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold)}
.field textarea{min-height:150px;resize:vertical}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat}
.note{font-size:12.5px;color:var(--muted);margin-top:8px}

/* ── contact cards ───────────────────────────────────────── */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ccard{padding:26px;border-radius:var(--r-lg)}
.ccard b{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.ccard p{font-size:15px;line-height:1.75}
.ccard a:hover{color:var(--gold-light)}

/* ── footer ──────────────────────────────────────────────── */
footer{background:#070706;border-top:1px solid var(--line);padding:clamp(50px,7vw,80px) 0 30px;margin-top:20px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
.fgrid h5{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;font-weight:500;font-family:var(--sans)}
.fgrid a,.fgrid p{display:block;font-size:14px;color:var(--muted);margin-bottom:9px;font-weight:300}
.fgrid a:hover{color:var(--gold-light)}
.fbrand .disp{font-family:var(--disp);font-size:26px;font-weight:600;letter-spacing:.04em;margin-bottom:12px;display:block}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.legal{font-size:11.5px;color:var(--dim);margin-top:12px;line-height:1.8}

/* ── reveal ──────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1040px){
  .verts{grid-template-columns:1fr 1fr}
  .grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .menu{display:none}
  .burger{display:block}
  .verts{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .tcards{grid-template-columns:1fr}
  .ccards{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap,.nav-in,.hero-in{padding-left:20px;padding-right:20px}
  .hero{padding-top:34px;padding-bottom:38px}
  .hero h1{font-size:clamp(22px,6vw,30px)}
  .hero .lead{font-size:15.5px}
  .hero-cta{gap:10px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .hero-marks{margin-top:30px;padding-top:20px;gap:18px}
  .hero-marks div{flex:1 1 100%}
  .hero-marks div b{font-size:20px}
  .topbar{font-size:9px;letter-spacing:.14em;padding:8px 12px}
  .grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .hero-marks{gap:22px}
}

/* ═══════════════════════════════════════════════════════════
   MOTION
   Animated start to finish, but a B2B buyer is here to read, so
   every timing is short and nothing blocks reading. All of it is
   switched off by prefers-reduced-motion at the bottom.
   ═══════════════════════════════════════════════════════════ */

/* ── page enter / exit ─────────────────────────────────────
   The page fades up on arrival and away on an internal link, so
   navigation feels like one surface rather than four documents. */
/* Opacity only, deliberately. A transform on <body> — even one animating to
   none, even after it has finished, because the animation still fills — makes
   <body> the containing block for fixed-position descendants, and the fixed
   header then scrolls away with the page instead of staying put. Fading is
   enough here and it costs nothing. */
@keyframes pageIn { from { opacity:0 } to { opacity:1 } }
body { animation: pageIn .45s var(--ease) both; }
body.leaving { opacity:0; transition:opacity .24s ease; }

/* ── grid entry, staggered ─────────────────────────────────
   The stagger rides on the scroll reveal rather than on a page-load keyframe.
   It used to be `animation: cardIn ... both` on .item/.vert, but those elements
   also carry .rv, and a filling animation beats the .rv opacity:0 rule — so
   every card was already visible before you scrolled to it and the whole page
   read as static. --d is set per index in JS. */
.rv { transition-delay: var(--d, 0s); }

/* re-filtering: fade the grid out, swap, fade back in */
.grid.swapping { opacity:0; transform:translateY(6px); transition:opacity .16s ease, transform .16s ease; }
.grid { transition:opacity .28s var(--ease), transform .28s var(--ease); }

/* ── card press ────────────────────────────────────────────*/
.item { transition:transform .45s var(--ease), border-color .4s, box-shadow .45s var(--ease); }
.item:hover { box-shadow:0 18px 46px -26px rgba(0,0,0,.85), 0 0 34px -22px var(--gold); }
.item:active { transform:translateY(-1px) scale(.988); transition-duration:.12s; }
.vert:active { transform:translateY(-2px) scale(.992); transition-duration:.12s; }

/* the card that was clicked lifts toward the panel that is opening */
.item.launching { transform:translateY(-6px) scale(1.015); box-shadow:0 26px 60px -28px rgba(0,0,0,.9), 0 0 42px -18px var(--gold); }

/* ── detail panel ──────────────────────────────────────────*/
.panel { opacity:0; transition:opacity .3s var(--ease); }
.panel.open { opacity:1; }
.panel .inner { transform:translateY(22px) scale(.965); opacity:0;
  transition:transform .42s var(--ease), opacity .32s var(--ease); }
.panel.open .inner { transform:none; opacity:1; }
.panel.closing { opacity:0; }
.panel.closing .inner { transform:translateY(12px) scale(.98); opacity:0; transition-duration:.2s; }
/* the spec rows arrive after the panel, one after another */
.panel.open .specs div { animation: rowIn .4s var(--ease) both; }
@keyframes rowIn { from { opacity:0; transform:translateX(-8px) } to { opacity:1; transform:none } }
.panel.open .specs div:nth-child(1){animation-delay:.14s}
.panel.open .specs div:nth-child(2){animation-delay:.19s}
.panel.open .specs div:nth-child(3){animation-delay:.24s}
.panel.open .specs div:nth-child(4){animation-delay:.29s}
.panel.open .specs div:nth-child(5){animation-delay:.34s}
.panel .x { transition:transform .3s var(--ease), color .25s }
.panel .x:hover { transform:rotate(90deg); color:var(--gold) }

/* ── chips and quick tags ──────────────────────────────────*/
.chip, .quick button { transition:background .3s var(--ease), border-color .3s, color .3s, transform .2s var(--ease) }
.chip:active, .quick button:active { transform:scale(.95) }

/* ── search field focus ────────────────────────────────────*/
.searchbox { transition:border-color .35s var(--ease), box-shadow .45s var(--ease), transform .35s var(--ease) }
.searchbox:focus-within { border-color:var(--line2); transform:translateY(-2px);
  box-shadow:0 16px 44px -26px rgba(0,0,0,.9), 0 0 32px -20px var(--gold) }
.searchbox .ico { transition:transform .35s var(--ease), color .3s }
.searchbox:focus-within .ico { transform:translateY(-50%) scale(1.12) }

/* ── nav ───────────────────────────────────────────────────*/
/* .nav.scrolled moved to .head.compact above, since the header is the sticky
   element now and the nav is just its lower row. */
.brand .mk { transition:transform .5s var(--ease) }
.brand:hover .mk { transform:rotate(-6deg) scale(1.06) }

/* ── section rules draw themselves in ──────────────────────*/
.rule { transform:scaleX(0); transform-origin:center; transition:transform 1s var(--ease) }
.rule.in { transform:scaleX(1) }

/* ── steps ─────────────────────────────────────────────────*/
.step { transition:background .5s, transform .4s var(--ease) }
.step:hover { transform:translateY(-3px) }

/* ── ambient drift, very slow, purely atmospheric ──────────*/
@keyframes drift { 0%,100% { transform:translate3d(0,0,0) } 50% { transform:translate3d(-2%,1.5%,0) } }
.amb { animation: drift 26s ease-in-out infinite }

@media (prefers-reduced-motion: reduce) {
  body, .amb, .panel .specs div { animation:none !important }
  body.leaving { opacity:1 }
  .panel .inner, .grid, .rule { transition:none !important; transform:none !important; opacity:1 !important }
  .item.launching { transform:none; box-shadow:none }
}