/* ============================================================
   AI-INCLUDED.CO.UK — SHARED STYLESHEET
   Carried over from the _template.html prototype, plus
   components for service cards, the services hub and
   coming-soon placeholders. Amber-on-coal.
   ============================================================ */

:root{
  --amber:#D49010; --amber-light:#E8A020; --amber-pale:#F0C060; --amber-text:#E8A020;
  --cream:#EDE4D0; --coal:#0D0B08; --charcoal:#161410;
  /* --smoke retired 2026-06-15: faint grey was hard to read; secondary text now uses --cream */
  --panel:#1A1714; --panel-lighter:#221E1A;
  --border:rgba(200,134,10,0.25); --border-bright:rgba(200,134,10,0.5);
  --rail-w:228px; --shell-max:1440px; --pad:40px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--coal); color:var(--cream);
  font-family:'DM Sans',system-ui,sans-serif; font-size:18px; line-height:1.6; min-height:100vh;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 18% 15%, rgba(200,134,10,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 85%, rgba(200,134,10,0.03) 0%, transparent 60%);
}
a{color:inherit;}

/* ── ACCESSIBILITY: keyboard focus + skip link (A3) ── */
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:2px;}
/* keep mouse clicks clean, only show the ring for keyboard users */
:focus:not(:focus-visible){outline:none;}
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:300;
  background:var(--amber); color:var(--coal);
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase; text-decoration:none;
  padding:10px 16px; border-radius:3px; transition:top .15s ease;
}
.skip-link:focus{top:8px;}

/* ── TOP BAR ── */
.topbar{position:sticky; top:0; z-index:100; background:rgba(13,11,8,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border);}
.topbar-inner{max-width:var(--shell-max); margin:0 auto; padding:0 var(--pad); height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.nav-logo{text-decoration:none; display:flex; flex-direction:column; line-height:1;}
.logo-line{display:flex; align-items:stretch;}
.nav-logo .l{font-family:Arial,sans-serif; font-size:11px; font-weight:400; color:var(--cream); display:flex; align-items:center; justify-content:center; width:14px; height:14px;}
.nav-logo .l.hi{background:#C00000; color:#fff; font-weight:700;}
.logo-julian{padding-left:28px;}
.burger{display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--cream);}
.burger svg{display:block;}
.utils{display:flex; align-items:center; gap:4px;}
.util-btn{background:none; border:none; cursor:pointer; color:var(--cream); width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:3px; transition:color .2s, background .2s; text-decoration:none;}
.util-btn:hover{color:var(--amber); background:rgba(200,134,10,0.08);}
.util-btn svg{width:19px; height:19px; display:block;}
.util-sep{width:1px; height:22px; background:var(--border); margin:0 6px;}

/* ── DOMAIN BAR ── */
.domain-bar{background:var(--amber); position:sticky; top:64px; z-index:99;}
.domain-inner{max-width:var(--shell-max); margin:0 auto; padding:0 var(--pad); height:22px; display:flex; justify-content:flex-end; align-items:center;}
.db-letter{font-family:Arial,sans-serif; font-size:11px; font-weight:700; color:var(--coal); width:16px; text-align:center;}
.db-sep{font-family:Arial,sans-serif; font-size:11px; color:var(--coal); width:9px; text-align:center;}

/* ── SHELL: RAIL + CONTENT ── */
.shell{max-width:var(--shell-max); margin:0 auto; display:grid; grid-template-columns:var(--rail-w) 1fr;}
.rail{position:sticky; top:86px; align-self:start; height:calc(100vh - 86px); padding:36px 24px; border-right:1px solid var(--border); overflow-y:auto;}
.rail-label{font-family:'Inter',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--amber-text); opacity:.8; margin:0 12px 14px;}
.rail-nav{list-style:none; display:flex; flex-direction:column; gap:2px;}
.rail-nav a{display:block; font-family:'Inter',sans-serif; font-size:13px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color:var(--cream); text-decoration:none; padding:11px 12px; border-left:2px solid transparent; transition:color .2s, border-color .2s, background .2s;}
.rail-nav a:hover{color:var(--amber); background:rgba(200,134,10,0.05);}
.rail-nav a.active{color:var(--amber); border-left-color:var(--amber); background:rgba(200,134,10,0.07);}
/* ── NAV SUBMENUS (twisties) ── */
.rail-nav .has-children, .drawer-nav .has-children{display:flex; flex-direction:column;}
.nav-parent{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; background:none; border:none; cursor:pointer; text-align:left; font-family:'Inter',sans-serif; font-size:13px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color:var(--cream); padding:11px 12px; border-left:2px solid transparent; transition:color .2s, background .2s;}
.nav-parent:hover{color:var(--amber); background:rgba(200,134,10,0.05);}
.nav-caret{flex:none; opacity:.7; transition:transform .2s;}
.has-children.open > .nav-parent{color:var(--amber);}
.has-children.open > .nav-parent .nav-caret{transform:rotate(180deg);}
.subnav{list-style:none; margin:0; padding:0; max-height:0; overflow:hidden; transition:max-height .28s ease;}
.has-children.open > .subnav{max-height:520px;}
.subnav a{display:block; font-family:'Inter',sans-serif; font-size:12px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; color:var(--cream); opacity:.82; text-decoration:none; padding:9px 12px 9px 24px; border-left:2px solid transparent; transition:color .2s, border-color .2s, background .2s;}
.subnav a:hover{color:var(--amber); opacity:1; background:rgba(200,134,10,0.05);}
.subnav a.active{color:var(--amber); opacity:1; border-left-color:var(--amber); background:rgba(200,134,10,0.07);}

.rail-cta{margin-top:24px; padding:0 12px;}
.rail-cta a{display:block; text-align:center; padding:12px 14px; background:var(--amber); color:var(--coal); font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; transition:background .2s;}
.rail-cta a:hover{background:var(--amber-light);}

/* ── CONTENT ── */
.content{padding:56px var(--pad) 96px; min-width:0; position:relative; z-index:1;}
.page-label{font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber-text); margin-bottom:18px;}
.content h1{font-size:clamp(34px,4.2vw,50px); font-weight:700; line-height:1.1; margin-bottom:18px; max-width:16ch;}
.lede{font-size:19px; color:var(--cream); max-width:60ch; margin-bottom:8px;}
.measure{max-width:68ch;}
.measure p{margin:22px 0; color:var(--cream);}
.measure h2{font-size:24px; font-weight:600; margin:44px 0 6px;}
.media{margin:40px 0; max-width:none; background:var(--panel); border:1px solid var(--border); border-radius:3px; aspect-ratio:16/8; display:flex; align-items:center; justify-content:center; color:var(--cream); font-family:'Inter',sans-serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;}
.note{display:inline-block; margin-top:8px; padding:3px 10px; background:rgba(200,134,10,0.1); border:1px solid var(--border); border-radius:2px; font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--amber-text);}

/* end CTA band */
.cta-band{margin:64px 0 0; padding:40px var(--pad); background:var(--panel); border:1px solid var(--border); border-radius:3px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.cta-band p{font-size:20px; font-weight:600; color:var(--cream); max-width:34ch;}
.cta-primary{display:inline-block; padding:14px 28px; background:var(--amber); color:var(--coal); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; transition:background .2s; white-space:nowrap;}
.cta-primary:hover{background:var(--amber-light);}

/* ── HERO (Home) ── */
.hero{padding:24px 0 8px;}
.hero h1{font-size:clamp(40px,5.2vw,64px); max-width:18ch;}
.hero .promise{color:var(--amber-text);}
.hero-sub{font-size:21px; color:var(--cream); max-width:54ch; margin:8px 0 28px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
.btn-secondary{display:inline-block; padding:14px 26px; border:1px solid var(--border-bright); color:var(--cream); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; text-decoration:none; transition:border-color .2s, background .2s;}
.btn-secondary:hover{border-color:var(--amber); background:rgba(200,134,10,0.06);}

/* ── CREDIBILITY BAND (Home, S1) ── */
.cred-band{
  margin:40px 0 0; padding:28px var(--pad);
  background:linear-gradient(180deg,var(--panel),var(--charcoal));
  border:1px solid var(--border-bright); border-radius:4px;
  display:grid; grid-template-columns:auto 1fr 1.1fr; gap:32px; align-items:center;
}
.cred-stat{display:flex; flex-direction:column; gap:6px; max-width:18ch;}
.cred-num{font-size:clamp(46px,5.4vw,64px); font-weight:700; line-height:1; color:var(--amber-text);}
.cred-plus{font-size:0.55em; vertical-align:super;}
.cred-lab{font-size:14px; line-height:1.4; color:var(--cream);}
.cred-clients-lab{font-family:'Inter',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber-text); opacity:.85; margin-bottom:12px;}
.cred-quote{margin:0; border-left:2px solid var(--amber); padding-left:18px;}
.cred-quote blockquote{font-size:16px; line-height:1.5; color:var(--cream); font-style:italic;}
.cred-quote figcaption{margin-top:10px; font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--amber-text);}
@media (max-width:920px){
  .cred-band{grid-template-columns:1fr; gap:24px;}
  .cred-stat{flex-direction:row; align-items:baseline; gap:14px; max-width:none;}
}

/* ── INCLUDED REASSURANCE (Home, S4) ── */
.reassure{margin:56px 0 0; padding:32px var(--pad); background:rgba(200,134,10,0.06); border:1px solid var(--border); border-radius:4px; max-width:none;}
.reassure-lead{font-size:22px; font-weight:600; color:var(--amber-text); margin-bottom:10px;}
.reassure p{color:var(--cream); max-width:62ch;}
.reassure p + p{margin-top:0;}

/* ── INTAKE TEASER ── */
.intake{margin:48px 0 0; padding:32px var(--pad); background:linear-gradient(180deg,var(--panel),var(--charcoal)); border:1px solid var(--border-bright); border-radius:4px;}
.intake h2{font-size:24px; font-weight:600; margin-bottom:8px;}
.intake p{color:var(--cream); max-width:54ch; margin-bottom:18px;}
.intake-doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;}
.door{display:block; padding:14px 16px; background:var(--coal); border:1px solid var(--border); border-radius:3px; text-decoration:none; color:var(--cream); font-size:15px; transition:border-color .2s, background .2s;}
.door:hover{border-color:var(--amber); background:rgba(200,134,10,0.05);}

/* ── SERVICE CARDS / HUB ── */
.audience-block{margin:40px 0;}
.audience-block > h2{font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber-text); margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--border);}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.card{position:relative; display:flex; flex-direction:column; padding:22px; background:var(--panel); border:1px solid var(--border); border-radius:4px; text-decoration:none; color:var(--cream); transition:border-color .2s, transform .15s, background .2s;}
.card:hover{border-color:var(--amber); transform:translateY(-2px); background:var(--panel-lighter);}
.card.hero-card{border-color:var(--border-bright); background:linear-gradient(180deg,rgba(200,134,10,0.08),var(--panel));}
.card h3{font-size:20px; font-weight:600; margin-bottom:8px; padding-right:90px;}
.card p{font-size:15px; color:var(--cream); flex:1;}
.card .price{margin-top:16px; font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.04em; text-transform:uppercase; color:var(--amber-text);}
.badge{position:absolute; top:18px; right:18px; font-family:'Inter',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:4px 9px; border-radius:2px;}
.badge.live{background:rgba(120,200,120,0.14); color:#8FD89A; border:1px solid rgba(120,200,120,0.35);}
.badge.soon{background:rgba(200,134,10,0.12); color:var(--amber-text); border:1px solid var(--border);}

/* ── CONTACT FORM ── */
.contact-form{max-width:46rem; margin:32px 0 8px;}
.contact-form .field{margin-bottom:18px; display:flex; flex-direction:column;}
.contact-form label{font-family:'Inter',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--amber-text); margin-bottom:7px;}
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-family:'DM Sans',system-ui,sans-serif; font-size:16px; color:var(--cream);
  background:var(--panel); border:1px solid var(--border); border-radius:3px;
  padding:12px 14px; width:100%; transition:border-color .2s, background .2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{outline:none; border-color:var(--amber); background:var(--panel-lighter);}
.contact-form textarea{resize:vertical; min-height:120px;}
.contact-form select{appearance:none; cursor:pointer;}
.contact-form button{margin-top:6px; border:none; cursor:pointer;}
/* honeypot — visually and from AT, but present in the DOM for bots */
.contact-form .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
/* placeholder: clearly legible, just lighter weight than typed text */
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#B7AC95; opacity:1;}

/* ── CONTACT: form + contact-card aside ── */
.contact-layout{display:grid; grid-template-columns:1fr 260px; gap:40px; align-items:start; margin-top:24px;}
.contact-card{background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:22px; position:sticky; top:110px;}
.contact-card h2{font-size:15px; font-family:'Inter',sans-serif; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--amber-text); margin-bottom:14px;}
.contact-card .qr{background:#fff; border-radius:6px; padding:12px; display:block;}
.contact-card .qr img,.contact-card .qr svg{display:block; width:100%; height:auto;}
.contact-card .qr-cap{font-size:13px; color:var(--cream); margin:12px 0 18px; text-align:center;}
.vcard-btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:13px 16px; background:var(--amber); color:var(--coal); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; text-decoration:none; border-radius:3px; transition:background .2s;}
.vcard-btn:hover{background:var(--amber-light);}
.vcard-btn svg{width:16px; height:16px;}
@media (max-width:860px){
  .contact-layout{grid-template-columns:1fr;}
  .contact-card{position:static; max-width:320px;}
}

/* coming-soon page block */

/* coming-soon page block */
.soon-block{margin:32px 0; padding:36px var(--pad); background:var(--panel); border:1px dashed var(--border-bright); border-radius:4px; text-align:center;}
.soon-block .tag{font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber-text);}
.soon-block h2{font-size:26px; font-weight:600; margin:10px 0 8px;}
.soon-block p{color:var(--cream); max-width:52ch; margin:0 auto;}

/* ── FOOTER ── */
footer{position:relative; z-index:1; max-width:var(--shell-max); margin:0 auto; padding:0 var(--pad) 48px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; padding-top:32px; border-top:1px solid var(--border); gap:20px; flex-wrap:wrap;}
.footer-name{font-family:'Inter',sans-serif; font-size:13px; color:var(--cream);}
.footer-name strong{color:var(--cream); font-weight:500;}
.footer-links{display:flex; gap:26px; flex-wrap:wrap;}
.footer-links a{font-family:'Inter',sans-serif; font-size:12px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; color:var(--cream); text-decoration:none; transition:color .2s;}
.footer-links a:hover{color:var(--amber);}

/* ── MOBILE DRAWER ── */
.drawer{position:fixed; inset:0; z-index:200; display:none;}
.drawer.open{display:block;}
.drawer-scrim{position:absolute; inset:0; background:rgba(0,0,0,0.55);}
.drawer-panel{position:absolute; top:0; left:0; bottom:0; width:280px; max-width:82vw; background:var(--charcoal); border-right:1px solid var(--border); padding:20px 0; transform:translateX(-100%); transition:transform .25s ease; overflow-y:auto;}
.drawer.open .drawer-panel{transform:translateX(0);}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:0 18px 16px; border-bottom:1px solid var(--border);}
.drawer-head .lab{font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--amber-text);}
.drawer-close{background:none; border:none; color:var(--cream); cursor:pointer; padding:4px; display:flex;}
.drawer-nav{list-style:none; padding:8px 0;}
.drawer-nav a{display:block; font-family:'Inter',sans-serif; font-size:14px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color:var(--cream); text-decoration:none; padding:13px 22px; border-left:2px solid transparent;}
.drawer-nav a.active{color:var(--amber); border-left-color:var(--amber); background:rgba(200,134,10,0.07);}

/* ── RESPONSIVE ── */
@media (max-width:768px){
  :root{--pad:22px;}
  .burger{display:flex;}
  .shell{grid-template-columns:1fr;}
  .rail{display:none;}
  .content{padding:36px var(--pad) 72px;}
  .util-desktop{display:none;}
  .cta-band{padding:28px var(--pad);}
  .footer-inner{flex-direction:column; text-align:center; align-items:center;}
}
@media (min-width:769px){
  .util-mobile-only{display:none;}
}

/* ── ASSET CARDS (composed from assets.json) ── */
.card-thumb{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:3px; margin-bottom:14px; background:var(--charcoal); display:block;}
.asset-type{font-family:'Inter',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--amber-text); margin-bottom:6px;}
.card h3 + .asset-tags, .card p + .asset-tags{margin-top:14px;}
.asset-tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:14px;}
.asset-tags span{font-family:'Inter',sans-serif; font-size:10px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color:var(--cream); border:1px solid var(--border); padding:3px 7px; border-radius:2px; opacity:0.85;}
.card .card-thumb + .asset-type{margin-top:2px;}
/* asset cards drop the right-padding reserved for the service badge */
.evidence-section .card h3, .proof-grid .card h3{padding-right:0;}
.proof-grid{margin:24px 0 8px;}

/* ── EVIDENCE FILTER (single axis: theme, pure CSS, works with JS off) ── */
.ev-filter .evf{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.ev-tabs{display:flex; flex-wrap:wrap; gap:2px;}
.ev-theme-tabs{border-bottom:1px solid var(--border); margin:30px 0 26px;}
.ev-tabs label{font-family:'Inter',sans-serif; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--cream); cursor:pointer; transition:color .2s, border-color .2s, background .2s;}
.ev-theme-tabs label{font-size:12px; padding:12px 18px; border-bottom:2px solid transparent; margin-bottom:-1px;}
.ev-tabs label:hover{color:var(--amber);}

.ev-grid .ev-card{display:none;}

/* show cards matching the active theme */
#evf-reg:checked   ~ .ev-grid .ev-card.cat-reg{display:flex;}
#evf-tools:checked ~ .ev-grid .ev-card.cat-tools{display:flex;}
#evf-arch:checked  ~ .ev-grid .ev-card.cat-arch{display:flex;}
#evf-learn:checked ~ .ev-grid .ev-card.cat-learn{display:flex;}

/* active theme tab */
#evf-reg:checked   ~ .ev-theme-tabs label[for="evf-reg"],
#evf-tools:checked ~ .ev-theme-tabs label[for="evf-tools"],
#evf-arch:checked  ~ .ev-theme-tabs label[for="evf-arch"],
#evf-learn:checked ~ .ev-theme-tabs label[for="evf-learn"]{color:var(--amber); border-bottom-color:var(--amber);}

/* keyboard focus rings on the matching tab */
#evf-reg:focus-visible   ~ .ev-theme-tabs label[for="evf-reg"],
#evf-tools:focus-visible ~ .ev-theme-tabs label[for="evf-tools"],
#evf-arch:focus-visible  ~ .ev-theme-tabs label[for="evf-arch"],
#evf-learn:focus-visible ~ .ev-theme-tabs label[for="evf-learn"]{outline:2px solid var(--amber); outline-offset:3px;}

/* ── TESTIMONIALS (the word on the work) ── */
.testimonials{margin:64px 0 0;}
.testimonials .measure h2{margin-top:6px;}
.testimonials .measure p{margin:18px 0;}
.testimonials .measure a{color:var(--amber-text);}
.quote-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-top:28px;}
.quote-card{display:flex; flex-direction:column; padding:24px; background:var(--panel); border:1px solid var(--border); border-radius:4px;}
.quote-card blockquote{position:relative; font-size:16px; line-height:1.55; color:var(--cream); padding-top:30px; flex:1;}
.quote-card blockquote::before{content:'\201C'; position:absolute; top:-6px; left:-2px; font-family:Georgia,serif; font-size:54px; line-height:1; color:var(--amber); opacity:.55;}
.quote-card figcaption{margin-top:18px; padding-top:14px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:2px;}
.quote-card .q-name{font-weight:600; color:var(--cream); font-size:15px;}
.quote-card .q-title{font-size:13px; color:var(--cream); opacity:.85;}
.quote-card .q-rel{font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--amber-text); margin-top:4px;}

/* ── NOW / STATUS FILTER (About) — single axis, pure CSS, works with JS off ── */
.now-filter .nowf{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.now-tabs{display:flex; flex-wrap:wrap; gap:2px; margin:0 0 22px;}
.now-tabs label{font-family:'Inter',sans-serif; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; font-size:11px; padding:7px 13px; border:1px solid transparent; border-radius:3px; color:var(--cream); cursor:pointer; opacity:.85; transition:color .2s, border-color .2s, background .2s;}
.now-tabs label:hover{color:var(--amber); background:rgba(200,134,10,0.06);}
.now-grid .now-card{display:none;}
#now-shipped:checked  ~ .now-grid .now-card.st-shipped{display:flex;}
#now-build:checked    ~ .now-grid .now-card.st-build{display:flex;}
#now-research:checked ~ .now-grid .now-card.st-research{display:flex;}
#now-ongoing:checked  ~ .now-grid .now-card.st-ongoing{display:flex;}
#now-shipped:checked  ~ .now-tabs label[for="now-shipped"],
#now-build:checked    ~ .now-tabs label[for="now-build"],
#now-research:checked ~ .now-tabs label[for="now-research"],
#now-ongoing:checked  ~ .now-tabs label[for="now-ongoing"]{color:var(--amber); background:rgba(200,134,10,0.10); border-color:var(--border);}
#now-shipped:focus-visible  ~ .now-tabs label[for="now-shipped"],
#now-build:focus-visible    ~ .now-tabs label[for="now-build"],
#now-research:focus-visible ~ .now-tabs label[for="now-research"],
#now-ongoing:focus-visible  ~ .now-tabs label[for="now-ongoing"]{outline:2px solid var(--amber); outline-offset:3px;}

/* ── DEMO BANNER (preview pages with illustrative data) ── */
.demo-banner{margin:24px 0; padding:14px 18px; background:rgba(200,134,10,0.10); border:1px solid var(--border-bright); border-radius:4px; font-size:15px; line-height:1.55; color:var(--cream);}
.demo-banner strong{color:var(--amber-text);}

/* ── FEATURE / VIEW LIST (parallel items, subtle amber marker) ── */
.view-list{list-style:none; margin:18px 0; display:flex; flex-direction:column; gap:12px; max-width:68ch;}
.view-list li{position:relative; padding-left:20px; color:var(--cream); font-size:18px; line-height:1.55;}
.view-list li::before{content:''; position:absolute; left:2px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--amber);}

/* ── SCREENSHOT GALLERY + PURE-CSS LIGHTBOX (works JS-off) ── */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin:28px 0 8px;}
.shot{display:block; background:var(--panel); border:1px solid var(--border); border-radius:4px; overflow:hidden; text-decoration:none; color:var(--cream); transition:border-color .2s, transform .15s;}
.shot:hover{border-color:var(--amber); transform:translateY(-2px);}
.shot img{display:block; width:100%; height:auto; border-top:1px solid var(--border);}
.shot-cap{display:block; padding:12px 14px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber-text);}
.lb{display:none; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,0.88); padding:4vh 4vw; align-items:center; justify-content:center; cursor:zoom-out;}
.lb:target{display:flex;}
.lb img{max-width:100%; max-height:92vh; object-fit:contain; border-radius:4px; box-shadow:0 10px 40px rgba(0,0,0,0.5);}

/* ── INFO TOOLTIP (design standard §1: hover/focus CSS tooltip, adapted for plain examples) ── */
.yoke-labelrow{display:flex; align-items:center; gap:7px; margin-bottom:7px;}
.yoke-labelrow label{margin-bottom:0;}
.tip{position:relative; display:inline-flex; line-height:0;}
.tip-trigger{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:700;
  width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--amber); background:none; border:1px solid var(--amber); border-radius:50%;
  cursor:help; padding:0; text-transform:none; letter-spacing:0;
}
.tip-trigger:hover,.tip-trigger:focus-visible{background:rgba(200,134,10,0.14); outline:none;}
.tip-bubble{
  position:absolute; left:0; top:calc(100% + 8px); z-index:200;
  width:300px; max-width:80vw;
  background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--amber);
  border-radius:4px; padding:14px 16px; box-shadow:0 8px 28px rgba(0,0,0,0.45);
  color:var(--cream); font-family:'DM Sans',system-ui,sans-serif; font-size:15px; font-weight:400;
  line-height:1.55; text-transform:none; letter-spacing:normal;
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s, transform .15s, visibility .15s; pointer-events:none;
}
.tip-trigger:hover + .tip-bubble,
.tip-trigger:focus + .tip-bubble,
.tip-trigger:focus-visible + .tip-bubble{opacity:1; visibility:visible; transform:translateY(0);}
.tip-bubble .tip-lead{display:block; color:#fff; font-weight:600; margin-bottom:6px;}
.tip-bubble .tip-tag{display:block; margin-top:10px; color:var(--amber-text); font-style:italic;}
@media(max-width:820px){ .tip-bubble{left:auto; right:0;} }