/* JDA Machining — shared site styles.
   Loaded by every page; cached long-term by the _headers rule for /assets/*.
   Page-specific one-off styling still lives inline in each page's markup. */

:root{
  --bg:#0A0D11; --panel:#10141A; --band:#0C1014;
  --line:#222932; --line2:#2C3540;
  --text:#EEF2F6; --muted:#A2AFBC; --dim:#76828F;
  --blue:#2E6BFF; --blue2:#4D82FF; --gold:#F2A93B;
  --field:#5A6573;
  --mono:'IBM Plex Mono',monospace;
}

/* ---- base ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);-webkit-font-smoothing:antialiased}
::selection{background:var(--blue);color:#fff}
.jhide{display:none}
.page{background:var(--bg);color:var(--text);font-family:'Archivo',system-ui,sans-serif;font-size:16px;line-height:1.65;overflow-x:clip}
.wrap{max-width:1280px;margin:0 auto;padding-left:clamp(20px,4.5vw,56px);padding-right:clamp(20px,4.5vw,56px)}

@keyframes jdaFade{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes jdaSpin{to{transform:translateY(-50%) rotate(360deg)}}
@keyframes jdaScan{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* ---- focus ----
   Visible keyboard focus everywhere. The angled CTAs use clip-path, which clips
   any outline drawn outside the box, so those get an inset ring instead. */
a:focus-visible,button:focus-visible{outline:2px solid var(--blue2);outline-offset:3px}
.btn-blue:focus-visible,.mnav-cta:focus-visible,.stk-quote:focus-visible,[style*="clip-path"]:focus-visible,button[type=submit]:focus-visible{outline:2px solid #fff;outline-offset:-5px}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--blue);color:#fff;font-weight:700;padding:10px 16px;text-decoration:none}
.skip:focus{top:12px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
.btn-blue{background:var(--blue);color:#fff;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.btn-ghost{border:1px solid var(--line2);color:var(--text)}
.btn-sm{font-size:.82rem;padding:12px 20px}
.btn-md{font-size:.9rem;padding:14px 26px}

/* ---- header ---- */
.site-head{position:sticky;top:0;z-index:200;background:rgba(10,13,17,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.head-in{height:74px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.brand img{height:46px;width:auto;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-weight:900;letter-spacing:.02em;font-size:1.02rem;white-space:nowrap}
.brand-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;margin-top:3px}
.jdesk{display:flex;gap:30px;align-items:center}
.nav-a{text-decoration:none;font-size:.84rem;font-weight:600;letter-spacing:.03em;color:var(--muted)}
.nav-a.dim{font-size:.78rem;color:var(--dim)}
.nav-a.on{color:var(--text)}
.jburger{display:none;background:none;border:1px solid var(--line2);color:#fff;width:46px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.jburger svg{width:20px;height:20px}
.jmob{display:none;border-top:1px solid var(--line);background:var(--bg);flex-direction:column;padding:6px 0 14px}
.jmob a{padding:14px clamp(20px,4.5vw,56px);text-decoration:none;color:var(--muted);font-weight:600;border-top:1px solid var(--line)}
.jmob a.on{color:var(--text)}
.jmob .mnav-cta{margin:14px clamp(20px,4.5vw,56px) 0;display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-weight:700;padding:14px 20px;border-top:none}
@media(max-width:1040px){
  .jdesk{display:none!important}
  .jburger{display:inline-flex!important}
  .jmob:not(.jhide){display:flex}
}
@media(min-width:1041px){.jmob{display:none!important}}

/* ---- mobile sticky quote bar ---- */
.jmstk{position:fixed;bottom:0;left:0;right:0;z-index:190;display:none;background:rgba(10,13,17,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px clamp(16px,4vw,24px);gap:10px}
.jmstk a{display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.88rem;text-decoration:none;white-space:nowrap}
.jmstk .stk-quote{flex:1;background:var(--blue);color:#fff;padding:14px 16px}
.jmstk .stk-call{border:1px solid var(--line2);color:var(--text);padding:14px 18px}
@media(max-width:1040px){.jmstk{display:flex!important}body.jda-pad{padding-bottom:76px}}

/* ---- compact footer (all pages except home) ---- */
.foot{max-width:1280px;margin:0 auto;padding:clamp(48px,7vh,64px) clamp(20px,4.5vw,56px) 38px;border-top:1px solid var(--line)}
.foot-cta{border:1px solid var(--line);background:radial-gradient(70% 130% at 12% 0%,rgba(46,107,255,.08),transparent 55%),var(--panel);padding:clamp(24px,3.5vw,36px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.foot-cta-h{font-size:clamp(1.1rem,2vw,1.35rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;max-width:28ch}
.foot-cta-p{margin-top:8px;color:var(--dim);font-size:.88rem;max-width:42ch}
.foot-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.foot-row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;align-items:center}
.foot-logo{text-decoration:none;color:var(--text)}
.foot-logo b{font-size:1.05rem;font-weight:900}
.foot-nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-nav a{color:var(--dim);font-size:.82rem;text-decoration:none}
.foot-addr{font-style:normal;color:var(--dim);font-size:.82rem}
.foot-addr a{color:var(--muted);text-decoration:none}

/* ---- full footer (home) ---- */
.bigfoot{max-width:1280px;margin:0 auto;padding:clamp(56px,8vh,72px) clamp(20px,4.5vw,56px) 38px}
.bigfoot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:38px;margin-bottom:48px}
@media(max-width:980px){.bigfoot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.bigfoot-grid{grid-template-columns:1fr}}
.bigfoot-lockup{width:260px;max-width:82%;height:auto;display:block;margin-bottom:16px}
.bigfoot-blurb{color:var(--dim);font-size:.85rem;max-width:300px;line-height:1.75}
.foot-h{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:18px}
.bigfoot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.bigfoot ul a,.bigfoot ul li{color:var(--muted);text-decoration:none;font-size:.88rem}
.bigfoot-addr{font-style:normal;color:var(--muted);font-size:.88rem;line-height:1.9}
.bigfoot-addr a{color:var(--text);text-decoration:none}
.bigfoot-bar{border-top:1px solid var(--line);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.bigfoot-bar span,.bigfoot-bar a{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-decoration:none}

/* ---- quote form ---- */
input,select,textarea,button{font-family:'Archivo',sans-serif}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue2);outline-offset:2px;border-color:var(--blue)!important}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.in{background:var(--bg);border:1px solid var(--field);color:var(--text);font-size:.92rem;padding:13px 14px;min-height:48px;width:100%}
textarea.in{min-height:128px;resize:vertical}
.in-file{padding:11px 12px;color:var(--muted);cursor:pointer}
.in-file::file-selector-button{margin-right:14px;border:1px solid var(--field);background:var(--panel);color:var(--text);font:600 .82rem 'Archivo',sans-serif;padding:8px 14px;cursor:pointer}
.qtype{cursor:pointer;border:1px solid var(--field);background:var(--bg);color:var(--text);font-size:.84rem;padding:11px 16px;font-weight:600;font-family:'Archivo',sans-serif}

/* =====================================================================
   Components. Pages compose these instead of inline style="" attributes.
   Layout: .wrap (width + side gutters) + a .sec* class (vertical rhythm).
   ===================================================================== */

/* ---- sections ---- */
.sec{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,8vh,96px)}
.sec-lg{padding-top:clamp(72px,10vh,128px);padding-bottom:clamp(72px,10vh,128px)}
.sec-hero{padding-top:clamp(32px,5vh,56px);padding-bottom:clamp(56px,8vh,88px)}
.band{background:var(--band);border-top:1px solid var(--line)}
.rule-top{border-top:1px solid var(--line)}
.quote-band{background:radial-gradient(85% 120% at 88% 6%,rgba(46,107,255,.13),transparent 58%),var(--band);border-top:1px solid var(--line)}
.quote-band-in{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}

/* ---- type ---- */
.eyebrow{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.eyebrow.blue{color:var(--blue2)}
.eyebrow.muted{color:var(--muted)}
.eyebrow.gold{color:var(--gold)}
.eyebrow.wide{letter-spacing:.2em}
.mono{font-family:var(--mono)}
.h-hero{font-size:clamp(2.3rem,5vw,4rem);font-weight:900;line-height:1.02;letter-spacing:-.03em;max-width:16ch}
.h-xl{font-size:clamp(2rem,4vw,3.1rem);font-weight:800;letter-spacing:-.02em;line-height:1.05;max-width:18ch}
.h-lg{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;max-width:22ch}
.h-md{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;letter-spacing:-.015em;line-height:1.1}
.h-card{font-size:1.4rem;font-weight:800;letter-spacing:-.01em}
.h-sm{font-size:1.08rem;font-weight:700}
.lead{color:var(--muted);font-size:clamp(1.02rem,1.4vw,1.16rem);line-height:1.75;max-width:60ch}
.body{color:var(--muted);font-size:.94rem;line-height:1.7}
.note{color:var(--dim);font-size:.86rem;line-height:1.7}
.t-text{color:var(--text)} .t-muted{color:var(--muted)} .t-dim{color:var(--dim)} .t-blue{color:var(--blue2)}

/* kicker: "—— LABEL ————————" section label with a blue lead rule and optional trailing hairline */
.kicker{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.kicker::before{content:"";flex:0 0 38px;height:1px;background:var(--blue)}
.kicker.rule::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- buttons (extend .btn / .btn-blue / .btn-ghost above) ---- */
.btn-lg{font-size:.92rem;padding:16px 30px}
.btn-blue.btn-md,.btn-blue.btn-lg{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---- grids ----
   .hairgrid = cells separated by 1px lines (gap shows the --line background).
   .cols-N collapse: 4→2 at 880px, 3→2 at 880px, everything → 1 at 620px. */
.grid{display:grid;gap:clamp(18px,2.4vw,32px)}
.hairgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:880px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}
/* .split = two-column hero/feature layout that stacks at 880px */
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,4.5vw,64px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr}}
/* .head-split = section heading left, intro paragraph right; stacks at 880px */
.head-split{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(32px,4vh,48px)}
.head-split > p{max-width:42ch}

/* ---- cards & cells ---- */
.card{background:var(--panel);padding:36px 32px}
.card-link{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:var(--text)}
.panel{border:1px solid var(--line);background:var(--panel)}
.panel-grad{border:1px solid var(--line2);background:linear-gradient(160deg,#12161D,#0C0F14)}
@media(max-width:620px){.card{padding:28px 22px}}

/* spec strip: label/value cells under a hairgrid */
.spec-strip{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-top:none;overflow:hidden}
.spec{flex:1 1 240px;padding:20px 24px;display:flex;flex-direction:column;gap:5px;border-left:1px solid var(--line);border-top:1px solid var(--line);margin:-1px 0 0 -1px}
.spec b{font-size:.85rem;color:var(--muted);font-weight:600}

/* ledger rows (equipment list, timeline): label column + content; stacks on phones */
.ledger-row{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:24px;padding:20px 8px;border-bottom:1px solid var(--line)}
@media(max-width:620px){.ledger-row{grid-template-columns:1fr;gap:4px}}

/* chips: small mono tags */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:.7rem;color:var(--muted);border:1px solid var(--line2);padding:9px 13px}

/* slash list: "/ item" bullets */
.slash-list{list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.9rem}
.slash-list li{position:relative;padding-left:16px}
.slash-list li::before{content:"/" / "";position:absolute;left:0;color:var(--blue2)}

/* ---- media ---- */
.cover{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.tile{aspect-ratio:1;overflow:hidden;background:var(--bg)}
.fig{position:relative;overflow:hidden;border:1px solid var(--line)}
.fig-tall{aspect-ratio:4/5}
.figcap{position:absolute;left:0;right:0;bottom:0;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:rgba(10,13,17,.85);border-top:1px solid var(--line);padding:9px 14px}

/* ---- breadcrumb ---- */
.crumbs{padding-top:22px;line-height:26px;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li + li::before{content:"/" / "";margin-right:8px}
.crumbs a{color:var(--dim);text-decoration:none;padding:6px 0}
.crumbs [aria-current]{color:var(--blue2)}

/* =====================================================================
   Shared layout pieces (service pages, interior pages)
   ===================================================================== */
/* wip-service.css: additions needed by the six service pages. To be merged into site.css. */

/* .flow: vertical rhythm for a stack of text (card, callout): 12px between items, 10px after an eyebrow */
.flow > * + *{margin-top:12px}
.flow > .eyebrow + *{margin-top:10px}

/* .trio: a 3-item .cols-3 grid that skips the 2-up step (no orphan cell); 3 across until phones, then 1 */
@media(min-width:621px) and (max-width:880px){.cols-3.trio{grid-template-columns:repeat(3,1fr)}}

/* .callout: bordered-left aside note (scope / disclaimer) */
.callout{border-left:2px solid var(--line2);padding:6px 0 6px 22px;max-width:78ch;margin-bottom:32px}

/* .quote-band-sub: small dim line under the quote-band heading */
.quote-band-sub{margin-top:10px;color:var(--dim);font-size:.92rem;max-width:48ch}

/* =====================================================================
   Interior pages: about, capabilities, industries, work, shop, quote, 404
   ===================================================================== */
/* wip-pages.css: additions needed by about, capabilities, industries, work, shop,
   request-a-quote and 404. To be merged into site.css. */

/* ---- section rhythm ---- */
/* .sec-intro: page intro with no hero image (kicker + h1 + lead) */
.sec-intro{padding-top:clamp(48px,7vh,88px);padding-bottom:clamp(36px,5vh,56px)}
/* .sec-sm: tighter section, mostly paired with .pt-0 to continue the section above */
.sec-sm{padding-top:clamp(40px,6vh,64px);padding-bottom:clamp(40px,6vh,64px)}
.pt-0{padding-top:0}


.flow > * + *{margin-top:12px}
.flow > .eyebrow + *{margin-top:10px}




/* .stack: flex column with a fixed gap (list of cards / links) */
.stack{display:flex;flex-direction:column;gap:14px}

/* ---- type ---- */
/* .h-display: the large interior-page h1 (bigger than .h-hero) */
.h-display{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:900;line-height:1;letter-spacing:-.03em;max-width:16ch}
/* .h-card.sm / .lg: smaller (value cards) and larger (service index cards) card headings */
.h-card.sm{font-size:1.2rem}
.h-card.lg{font-size:1.5rem}
/* .body.sm: card copy one step smaller than .body */
.body.sm{font-size:.92rem}
/* .prose: multi-paragraph reading block */
.prose{display:flex;flex-direction:column;gap:18px;color:var(--muted);font-size:1.05rem;line-height:1.85}
/* .num: mono figure in blue (index numbers, dates, prices) */
.num{font-family:var(--mono);font-size:.9rem;color:var(--blue2)}
.num.lg{font-size:1.1rem}
/* .text-link / .more-link: inline blue link, and the mono "Explore →" link */
.text-link{color:var(--blue2);text-decoration:none}
.more-link{display:inline-block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue2);text-decoration:none}
/* programmatic focus targets (tabindex=-1 headings) get no ring */
[tabindex="-1"]:focus{outline:none}

/* ---- media ---- */
/* .bg-hero: hero band with a faded full-bleed photo behind the copy */
.bg-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.bg-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2;filter:saturate(.85)}
.bg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 30%,rgba(10,13,17,.5))}
.bg-hero-in{position:relative;z-index:1;padding-top:clamp(56px,9vh,104px);padding-bottom:clamp(56px,9vh,104px)}
/* .hero-lockup: brand lockup above a hero heading */
.hero-lockup{width:min(380px,72vw);height:auto;margin-bottom:26px;filter:drop-shadow(0 6px 24px rgba(0,0,0,.5))}
/* .gallery: square-tile photo grid, 4 across, 2 on phones (img sizes attrs assume the 760px break) */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}
.ratio-43{aspect-ratio:4/3}

/* ---- ledger variant ---- */
/* .ledger-row.label-col: fixed label column + content (timeline); stacks on phones */
.ledger-row.label-col{grid-template-columns:130px 1fr;padding:24px 8px}
.ledger-row .mono{font-size:.78rem;color:var(--muted)}
.ledger-row.label-col p{margin-top:4px}
@media(max-width:620px){.ledger-row.label-col{grid-template-columns:1fr;gap:6px}}

/* ---- panels ---- */
/* .index-row: numbered row card: index | heading + copy | detail list; stacks below 820px */
.index-row{display:grid;grid-template-columns:96px 1.2fr 1.4fr;gap:clamp(20px,3vw,40px);padding:clamp(28px,3.5vw,40px);align-items:start}
@media(max-width:820px){.index-row{grid-template-columns:1fr;gap:18px}}
/* .cta-panel: bordered inline call-to-action (text left, button right; wraps) */
.cta-panel{border:1px solid var(--line);background:var(--panel);padding:clamp(24px,3.5vw,36px);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-panel.glow{background:radial-gradient(70% 130% at 12% 0%,rgba(46,107,255,.08),transparent 55%),var(--panel)}
.cta-panel.glow-r{background:radial-gradient(70% 130% at 88% 0%,rgba(46,107,255,.1),transparent 55%),var(--panel)}
.cta-panel-h{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:800;letter-spacing:-.02em;line-height:1.2;max-width:30ch}
/* .card.compact: card with tighter padding (sidebar cards) */
.card.compact{padding:28px}
/* .product: shop card (photo on top, body below), used as a link */
.product{background:var(--panel);text-decoration:none;color:var(--text);display:flex;flex-direction:column}
.product img{width:100%;height:100%;object-fit:cover}
.product-body{padding:26px 28px}
.product-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* .contact-link: phone / email line in a contact card */
.contact-link{color:var(--text);text-decoration:none;font-size:.98rem;font-weight:600;overflow-wrap:anywhere}

/* ---- quote page ---- */
/* .quote-grid: info rail + form; one column below 900px with the form first */
.quote-grid{display:grid;grid-template-columns:1fr 1.18fr;gap:clamp(36px,5vw,72px);align-items:start}
@media(max-width:900px){.quote-grid{grid-template-columns:1fr}.quote-grid-main{order:-1}}
.quote-grid-main{padding:clamp(26px,3.5vw,40px)}
/* .fields: two-up form field grid, one column on phones */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:600px){.fields{grid-template-columns:1fr}}
.qtype[aria-pressed="true"]{border-color:var(--blue);background:rgba(46,107,255,.14)}
/* .note-box: dashed aside inside a form */
.note-box{border:1px dashed var(--line2);padding:18px;color:var(--dim);font-size:.84rem;line-height:1.6}
.btn-submit{margin-top:22px;width:100%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;font-weight:700;font-size:.95rem;padding:17px 28px;border:none}
.form-err{margin-top:14px;font-size:.84rem;color:var(--gold);text-align:center}
.success{text-align:center;padding:30px 10px}
.success-icon{width:56px;height:56px;border:1px solid var(--blue);color:var(--blue2);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.success .body{max-width:46ch;margin-left:auto;margin-right:auto}

/* ---- 404 ---- */
.err-page{color:var(--text);font-family:'Archivo',system-ui,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px}
.err-box{max-width:520px;text-align:center}
.err-box .eyebrow{font-size:.7rem;letter-spacing:.18em;margin-bottom:18px}
.err-h{font-size:clamp(2rem,6vw,3rem);font-weight:900;line-height:1.05;letter-spacing:-.03em;margin-bottom:16px}
.err-box .btn-row{justify-content:center;gap:12px;margin-top:0}
.err-box .btn{font-size:.9rem;padding:14px 24px;letter-spacing:0}
/* .btn-fill: blue button without the clipped corner */
.btn-fill{background:var(--blue);color:#fff}

/* ---- spacing utilities (snap to 8/12/16/24); last so they beat component margins ---- */

/* =====================================================================
   Homepage
   ===================================================================== */
/* wip-home.css: classes needed by index.html that site.css doesn't have yet.
   To be merged into site.css (Components section) by the lead. */

/* ---- utilities ---- */
.rule-bottom{border-bottom:1px solid var(--line)}
.bg-band{background:var(--band)}
.glass{background:rgba(16,20,26,.5)}
.link{color:var(--blue2);text-decoration:none}
.push{margin-top:auto}
.self-start{align-self:flex-start}
.nowrap{white-space:nowrap}
.mb-head{margin-bottom:clamp(36px,5vh,56px)}

/* ---- motion: staggered fade-up on load ---- */
.fade-up{animation:jdaFade .7s both}
.delay-1{animation-delay:.05s}
.delay-2{animation-delay:.15s}
.delay-3{animation-delay:.3s}
.delay-4{animation-delay:.45s}

/* ---- sections ---- */
.sec-md{padding-top:clamp(64px,9vh,116px);padding-bottom:clamp(64px,9vh,116px)}
.sec-tail{padding-bottom:clamp(48px,7vh,80px)}
.glow-band{background:radial-gradient(85% 120% at 88% 6%,rgba(46,107,255,.15),transparent 58%),var(--bg)}

/* ---- type ---- */
.h-home{font-size:clamp(2.8rem,8vw,6.2rem);font-weight:900;line-height:.97;letter-spacing:-.03em;max-width:13ch}
.h-quote{display:block;margin-bottom:14px;font-size:clamp(1.3rem,2vw,1.65rem);font-weight:800;letter-spacing:-.015em;line-height:1.15}
.h-item{font-size:1.2rem;font-weight:800}
.lead-xl{margin-top:28px;max-width:60ch;color:var(--muted);font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.7}
.intro{color:var(--muted);font-size:1rem;line-height:1.7;max-width:44ch}
.head-split > .intro{max-width:44ch}
.body-lg{color:var(--muted);font-size:1.02rem;line-height:1.75}
.desc{color:var(--dim);font-size:.88rem;line-height:1.6}
.desc.sm{font-size:.84rem}
.desc.lg{font-size:.92rem;line-height:1.7}
.desc.xs{font-size:.78rem}
.statement{color:var(--text);font-size:.94rem;line-height:1.65;font-weight:600}
.statement + .desc{margin-top:6px;font-size:.82rem}
.lead-line{margin-top:14px;font-size:1.3rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.eyebrow.block{display:block;margin-bottom:8px}
.idx{font-family:var(--mono);font-size:.72rem;color:var(--dim)}

/* ---- buttons ---- */
.btn-flat{background:var(--blue);color:#fff}
.btn-group{display:flex;gap:12px;flex-wrap:wrap}
.btn-col{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.btn-col + p{margin-top:18px}
/* keep two large CTAs side by side on 390px phones */
@media(max-width:420px){.btn-lg{padding-left:24px;padding-right:24px}}

/* ---- layout ---- */
/* .duo = two equal columns; stacks at 880px. .lean = media-left case study, .end/.gap-lg = alignment/gap variants */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.duo.end{align-items:end}
.duo.gap-lg{gap:clamp(40px,5.5vw,80px)}
.duo.lean{grid-template-columns:1.05fr 1fr;gap:clamp(28px,4.5vw,56px);align-items:stretch}
@media(max-width:880px){.duo,.duo.lean{grid-template-columns:1fr}}
.grid.gap-lg{gap:clamp(22px,3vw,44px)}
/* .min-2: a 4-col grid that stops at 2 columns on phones (thumbnail grids) */
@media(max-width:620px){.cols-4.min-2{grid-template-columns:repeat(2,1fr)}}
/* 3 cells in a 2-col hairgrid would leave an empty grey cell: let the odd last one span */
@media(min-width:621px) and (max-width:880px){.hairgrid.cols-3 > :last-child:nth-child(odd){grid-column:span 2}}

/* ---- cards & cells ---- */
.card-block{display:block;text-decoration:none;color:var(--text)}
.card-block > p{max-width:42ch}
.card.tight{padding:24px 22px}
.more{display:inline-block;margin-top:20px}
.cell{background:var(--bg);padding:32px 28px 30px;min-height:210px}
.ico{width:30px;height:30px;color:var(--muted)}
.cta-box{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;padding:clamp(28px,4vw,40px)}
.cta-box.glow{border:1px solid var(--line);background:radial-gradient(70% 130% at 12% 0%,rgba(46,107,255,.1),transparent 55%),var(--panel);padding:clamp(30px,4vw,48px);gap:30px}
.cta-box .desc{margin-top:10px}
.panel.pad{padding:clamp(28px,3.5vw,42px)}

/* numbered step: boxed index, title, text */
.step-num{width:48px;height:48px;border:1px solid var(--line2);background:var(--panel);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.8rem;color:var(--blue2);margin-bottom:22px}
.step-num + h3{margin-bottom:9px}

/* stat row: big numbers in bordered cells; one column on phones */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
.stat{padding:30px 28px}
.stat + .stat{border-left:1px solid var(--line)}
.stat-num{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:900;letter-spacing:-.03em;line-height:1}
.stat-num + p{margin-top:10px}
@media(max-width:620px){.stat-row{grid-template-columns:1fr}.stat{padding:24px 22px}.stat + .stat{border-left:none;border-top:1px solid var(--line)}}

/* case study: image that fills its grid cell + problem/process/result column */
.fig-fill{min-height:340px}
.fig-fill > img{position:absolute;inset:0}
.stack-center{display:flex;flex-direction:column;justify-content:center;gap:22px}
.pps{border-left:2px solid var(--line);padding-left:22px}

/* row-link: numbered list row (index, title, text, arrow); stacks on phones */
.row-link{display:grid;grid-template-columns:90px 1.05fr 2fr auto;gap:26px;align-items:center;padding:28px 8px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
@media(max-width:820px){.row-link{grid-template-columns:1fr;gap:8px;padding:24px 4px}}

/* ---- media ---- */
.bleed{position:relative;overflow:hidden;height:clamp(320px,52vh,560px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bleed .cover{object-position:center 42%}
.scanline{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(46,107,255,.06) 50%,transparent);transform:translateY(-100%);animation:jdaScan 8s cubic-bezier(.4,0,.2,1) infinite}
.figcap.split{display:flex;justify-content:space-between;gap:14px;padding:11px 18px}
.vidframe{border:1px solid var(--line);background:var(--bg);padding:10px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.vidframe iframe{border:0;overflow:hidden;display:block}
.reel{position:relative;display:block;width:267px;height:476px;max-width:100%;padding:0;border:0;background:var(--bg);cursor:pointer;overflow:hidden;color:var(--text)}
.reel img{width:100%;height:100%;object-fit:cover;opacity:.72;filter:saturate(.85);transition:opacity .25s}
.reel:hover img,.reel:focus-visible img{opacity:.9}
.reel-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(10,13,17,.7);border:1px solid rgba(255,255,255,.55)}
.reel-play::after{content:"";position:absolute;left:26px;top:20px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.reel-note{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;background:rgba(10,13,17,.85);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left}
.vidcap{margin-top:10px;display:flex;justify-content:space-between;letter-spacing:.12em}
.vidnote{margin-top:20px;text-align:center;font-size:.84rem;color:var(--dim)}

/* ---- home hero ---- */
.hero-xl{position:relative;overflow:hidden;min-height:90vh;display:flex;flex-direction:column;justify-content:center;padding-top:96px;border-bottom:1px solid var(--line)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3;filter:saturate(.85) contrast(1.05)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,13,17,.95) 0%,rgba(10,13,17,.62) 50%,rgba(10,13,17,.25) 100%),linear-gradient(to top,var(--bg) 2%,transparent 34%)}
.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(162,175,188,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(162,175,188,.05) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(120% 100% at 28% 30%,#000 28%,transparent 78%)}
/* spinning bolt-circle dial. A pseudo-element (not an inline <svg>) so the part that
   hangs off the right edge doesn't count as page content. Colors = --blue / --muted. */
.hero-xl::after{content:"";position:absolute;top:50%;right:-12%;width:min(56vw,720px);height:min(56vw,720px);transform:translateY(-50%);pointer-events:none;opacity:.5;animation:jdaSpin 240s linear infinite;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg stroke='%232E6BFF' fill='none' stroke-width='1.2'%3E%3Ccircle cx='300' cy='300' r='252'/%3E%3Ccircle cx='300' cy='300' r='92'/%3E%3Ccircle cx='470' cy='300' r='22'/%3E%3Ccircle cx='385' cy='447' r='22'/%3E%3Ccircle cx='215' cy='447' r='22'/%3E%3Ccircle cx='130' cy='300' r='22'/%3E%3Ccircle cx='215' cy='153' r='22'/%3E%3Ccircle cx='385' cy='153' r='22'/%3E%3C/g%3E%3Cg stroke='%23A2AFBC' fill='none' stroke-width='1' opacity='.6'%3E%3Ccircle cx='300' cy='300' r='170' stroke-dasharray='7 11'/%3E%3Cpath d='M300 6 V594 M6 300 H594' stroke-dasharray='34 8 5 8'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero-in{position:relative;z-index:2;width:100%}
.jherologo{position:relative;z-index:2;width:min(88%,560px);max-width:none;height:auto;display:block;margin:0 auto 36px;animation:jdaFade .8s both;filter:drop-shadow(0 6px 24px rgba(0,0,0,.55))}

/* proof bar: 4 facts along the bottom of the hero; 2x2 on phones */
.proof-bar{margin-top:clamp(48px,8vh,90px);position:relative;z-index:2;border-top:1px solid var(--line);background:rgba(10,13,17,.65);backdrop-filter:blur(6px)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.proof-cell{padding:22px;display:flex;flex-direction:column;gap:6px}
.proof-cell + .proof-cell{border-left:1px solid var(--line)}
.proof-cell b{font-weight:700;font-size:.92rem}
@media(max-width:760px){
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof-cell{padding:18px 16px}
  .proof-cell:nth-child(odd){padding-left:0}
  .proof-cell:nth-child(3){border-left:none}
  .proof-cell:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:760px){.jherologo{display:none}}
.gtile{position:relative;overflow:hidden;background:var(--bg);border:1px solid var(--line)}
.gtile img{width:100%;height:100%;object-fit:cover;filter:saturate(.9);transition:transform .5s ease}
.gtile:hover img{transform:scale(1.05)}
.vidstage{display:flex;gap:clamp(14px,2vw,24px);justify-content:center;flex-wrap:wrap}

/* =====================================================================
   Spacing utilities: last, so they win over component margins
   ===================================================================== */
.mt-1{margin-top:8px} .mt-2{margin-top:12px} .mt-3{margin-top:16px} .mt-4{margin-top:24px}

/* =====================================================================
   Design studio: metal cards and stickers (/design)
   Metal colors are painted from design.js so the card face, the swatches,
   and the cut-file preview stay on the same alloys.
   ===================================================================== */
.studio{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.9fr);gap:clamp(22px,3vw,40px);align-items:start}
.studio.jhide{display:none}
@media(max-width:900px){.studio{grid-template-columns:1fr}}
@media(min-width:901px){.studio-stage{position:sticky;top:90px}}
.studio-bench{min-height:460px;display:flex;align-items:center;justify-content:center;padding:28px 20px;border:1px solid var(--line);background:radial-gradient(50% 42% at 50% 46%,rgba(255,255,255,.05),transparent 72%),var(--bg)}
.studio-bench.is-over{outline:2px solid var(--blue);outline-offset:-2px}
@media(max-width:700px){.studio-bench{min-height:300px;padding:20px 12px}}
.studio-slot{position:relative;max-width:100%}
.studio-piece{position:absolute;inset:0}
.studio-piece:focus-visible{outline:2px solid var(--blue2);outline-offset:4px}
.studio-metal{position:absolute;inset:0}
.studio-safe{position:absolute;border:1px dashed rgba(20,16,12,.55);box-shadow:0 0 0 1px rgba(255,255,255,.28);pointer-events:none;z-index:2}
.studio-art{position:absolute;z-index:1;pointer-events:none}
.studio-art svg{display:block;width:100%;height:100%;overflow:visible}
.studio-piece[data-mode="engrave"]{border-radius:2.2%/4%;overflow:hidden;cursor:grab;touch-action:none;box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -1px 0 rgba(0,0,0,.4) inset,0 18px 28px rgba(0,0,0,.48)}
.studio-piece[data-mode="engrave"].is-drag{cursor:grabbing}
.studio-piece[data-mode="engrave"] .studio-art{mix-blend-mode:multiply}
.studio-piece[data-mode="cut"]{overflow:visible;background:transparent}
.studio-piece[data-mode="cut"] .studio-metal{display:none}
.studio-piece[data-mode="cut"] .studio-art svg{filter:drop-shadow(0 14px 14px rgba(0,0,0,.55))}
.studio-piece[data-product="card"][data-mode="cut"]{border:1px dashed var(--line2);border-radius:2.2%/4%}
.studio-readout{margin-top:14px;font-family:var(--mono);font-size:.78rem;line-height:1.55;color:var(--muted)}
.studio-place{margin-top:4px}
.studio-warn{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:12px}
.studio-warn:empty{display:none}
.studio-warn li{color:var(--gold);font-size:.84rem;line-height:1.5}
.studio-form{padding:clamp(22px,3vw,36px)}
.studio-form .choice-col,.studio-form .metal-row{margin-top:2px}
.choice-col{display:flex;flex-direction:column;gap:8px}
.studio-form .choice-btn,.studio-form .metal-opt,.studio-form .drop{font-family:'Archivo',system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--text);line-height:1.4}
.choice-btn,.metal-opt{position:relative;display:flex;flex-direction:column;gap:4px;border:1px solid var(--field);background:var(--bg);padding:12px 14px;cursor:pointer;font-size:.92rem}
.choice-btn input,.metal-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice-btn:has(input:checked),.metal-opt:has(input:checked){border-color:var(--blue);background:rgba(46,107,255,.14)}
.choice-btn:has(input:focus-visible),.metal-opt:has(input:focus-visible){outline:2px solid var(--blue2);outline-offset:2px}
.choice-btn b{font-size:.92rem;font-weight:700}
.choice-btn span,.metal-opt span{color:var(--dim);font-size:.8rem;line-height:1.45;font-weight:600}
.metal-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:380px){.metal-row{grid-template-columns:1fr}}
.metal-swatch{display:block;width:100%;height:28px;border:1px solid rgba(0,0,0,.35)}
.metal-opt span:last-child{color:var(--text);font-size:.78rem}
.studio-lab{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.studio-lab span{font-family:var(--mono);font-size:.75rem;color:var(--text)}
.studio input[type="range"]{width:100%;accent-color:var(--blue)}
.drop{position:relative;display:flex;flex-direction:column;gap:4px;border:1px dashed var(--line2);background:var(--bg);padding:16px;cursor:pointer}
.drop.is-over{border-color:var(--blue)}
.drop strong{font-size:.95rem}
.drop input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.studio-fileline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.studio-fileline.jhide{display:none}
.studio-fileline span{overflow-wrap:anywhere;font-size:.88rem}
.studio-fileline button{background:none;border:0;color:var(--blue2);font-weight:700;cursor:pointer;font-size:.84rem;padding:6px 0}
.studio .btn-submit:disabled{opacity:.55;cursor:not-allowed}
.studio-success{padding:clamp(28px,4vw,48px)}
.studio-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#d_measure{position:absolute;left:-10000px;top:0;width:800px;height:800px;overflow:hidden}