/* ==========================================================================
   InnerLAB - styles.css
   Design system per build specification. Inter throughout.
   Dark / light alternating sections, yellow as instrument accent.
   ========================================================================== */

:root{
  --black:#0A0A0A;
  --graphite:#151515;
  --card-dark:#1C1C1C;
  --border-dark:#2B2B2B;

  --yellow:#FFD51F;
  --yellow-hover:#E8BE00;
  --yellow-text:#8A6D00;

  --warm-white:#F7F6F2;
  --white:#FFFFFF;
  --text:#161616;
  --gray:#6F6F6F;
  --light-gray:#B8B8B8;
  --border:#DEDDD8;

  --alert:#D9432B;
  --verified:#3E9E6B;

  --ease:cubic-bezier(.4,0,.2,1);
  --font:"Inter","Segoe UI",Calibri,system-ui,-apple-system,Arial,sans-serif;
  --shell:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none !important}

html{scroll-behavior:smooth}

body{
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  color:var(--warm-white);
  background:var(--black);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

.mono{font-family:var(--font);font-weight:400}

.shell{max-width:var(--shell);margin:0 auto;padding:0 24px}

/* Focus rings: visible everywhere, adjusted for light sections */
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;border-radius:2px}
.sec-light :focus-visible{outline-color:var(--yellow-text)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--yellow);color:var(--text);
  padding:10px 18px;font-weight:600;
}
.skip-link:focus{left:12px;top:12px}

/* ---------- Type ---------- */

h1,h2,h3{font-weight:700;line-height:1.12;letter-spacing:-.022em;color:var(--white)}
h1{font-size:clamp(2.2rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:1.2rem}
.sec-light h1,.sec-light h2,.sec-light h3{color:var(--text)}

p{max-width:64ch}

.eyebrow{
  display:block;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--yellow);
  margin-bottom:16px;
}
.sec-light .eyebrow{color:var(--yellow-text)}

.lede{color:var(--light-gray)}
.sec-light .lede{color:var(--gray)}

.emphasis{font-weight:600;color:var(--white)}
.sec-light .emphasis{color:var(--text)}

.big-closer{
  font-size:clamp(1.25rem,2.4vw,1.7rem);
  font-weight:600;
  line-height:1.35;
  color:var(--white);
  max-width:28em;
}
.sec-light .big-closer{color:var(--text)}

/* ---------- Buttons ---------- */

.btn{
  position:relative;
  display:inline-block;
  font-family:var(--font);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.1em;
  padding:14px 26px;
  border:1px solid transparent;
  border-radius:3px;
  overflow:hidden;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .25s var(--ease),box-shadow .35s var(--ease);
  text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0);transition-duration:.1s}
.btn-yellow{background:var(--yellow);color:var(--text)}
.btn-yellow:hover{background:var(--yellow-hover);box-shadow:0 10px 26px rgba(255,213,31,.22)}
.btn-yellow::after{
  content:"";
  position:absolute;top:0;bottom:0;left:-70%;width:44%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg);
  transition:left .6s var(--ease);
  pointer-events:none;
}
.btn-yellow:hover::after{left:130%}
.btn-black{background:var(--black);color:var(--warm-white)}
.btn-black:hover{background:var(--card-dark)}
.btn-ghost{border-color:#3B3B3B;color:var(--warm-white)}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.sec-light .btn-ghost{border-color:#C9C8C2;color:var(--text)}
.sec-light .btn-ghost:hover{border-color:var(--yellow-text);color:var(--yellow-text)}

/* ---------- Header ---------- */

.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,.96);
  border-bottom:1px solid var(--border-dark);
  transition:box-shadow .35s var(--ease);
}
.site-header.scrolled{box-shadow:0 10px 28px rgba(0,0,0,.4)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}

.brand{display:flex;flex-direction:column;gap:2px;flex-shrink:0;text-decoration:none}
.brand-fallback{font-size:1.4rem;font-style:italic;color:var(--yellow);letter-spacing:.02em}
/* NDT + logo: the company name, read as one unit and never wrapped. The tag
   is drawn in CSS beside the artwork; the logo asset itself is untouched.
   --logo-h is the only place the rendered logo height is set; the image takes
   its width from it, so the tag and the artwork cannot drift apart.
   --logo-ink-top and --logo-ink-h are MEASURED from assets/logo.png (2172x724):
   the wordmark occupies only the band from 20.99% to 71.13% of the image
   height, the rest being transparent padding. Sizing the tag to that band is
   what makes NDT and innerLAB the same visual size. Re-measure both if that
   file is ever replaced or re-cropped; the padding and font-size fractions
   below are design choices and do not depend on the asset. */
.brand-lockup{
  --logo-ink-top:.2099;--logo-ink-h:.5014;
  display:flex;align-items:flex-start;flex-wrap:nowrap;
}
.brand-lockup img{height:var(--logo-h);width:auto;flex:none}
.site-header .brand-lockup{--logo-h:50px;gap:10px}
.f-brand .brand-lockup{--logo-h:56px;gap:11px}
.brand-ndt{
  flex:none;
  display:flex;align-items:center;justify-content:center;
  /* border-box height, so the 1px border sits inside the ink band */
  height:calc(var(--logo-h) * var(--logo-ink-h));
  margin-top:calc(var(--logo-h) * var(--logo-ink-top));
  padding:0 calc(var(--logo-h) * .125);
  font-size:calc(var(--logo-h) * .27);
  font-weight:700;letter-spacing:.06em;line-height:1;
  color:var(--yellow);
  border:1px solid rgba(255,213,31,.5);border-radius:3px;
}
.brand-tagline{
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.24em;
  color:var(--gray);
  text-decoration:none;
}

.site-nav{display:flex;align-items:center;gap:2px}
.site-nav a{
  font-size:.86rem;
  font-weight:500;
  color:var(--light-gray);
  padding:9px 12px;
  white-space:nowrap;
  border-radius:3px;
  transition:color .3s var(--ease);
}
.site-nav a:hover{color:var(--white)}
.site-nav a[aria-current="page"]{color:var(--yellow)}

/* ---------- Services dropdown ---------- */
.nav-group{position:relative;display:flex;align-items:center}
.nav-trigger{
  display:inline-flex;align-items:center;gap:8px;
  font-family:inherit;font-size:.86rem;font-weight:500;
  color:var(--light-gray);background:none;border:0;cursor:pointer;
  padding:9px 12px;border-radius:3px;white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav-trigger:hover,.nav-group.is-open .nav-trigger{color:var(--white)}
/* the visitor is on one of the five service pages */
.nav-trigger.is-current{color:var(--yellow)}
.nav-caret{
  width:6px;height:6px;flex:none;margin-top:-3px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);transition:transform .25s var(--ease),margin .25s var(--ease);
}
.nav-group.is-open .nav-caret{transform:rotate(-135deg);margin-top:2px}

.nav-menu{
  display:none;
  position:absolute;top:calc(100% + 11px);left:0;
  min-width:226px;
  background:var(--graphite);
  border:1px solid var(--border-dark);border-radius:4px;
  padding:7px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  z-index:120;
}
.nav-menu a{display:block;padding:10px 13px;font-size:.84rem;border-radius:3px}
.nav-menu a:hover{color:var(--white);background:var(--card-dark)}
.nav-menu a[aria-current="page"]{color:var(--yellow);background:rgba(255,213,31,.07)}
.nav-group.is-open > .nav-menu{display:block;animation:navMenuIn .18s var(--ease) both}
@keyframes navMenuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* With scripting off, hover and keyboard focus still reveal the menu. Once
   main.js marks the document, it owns the state instead, so Escape and a
   click outside can actually close it. */
@media(hover:hover) and (min-width:1081px){
  html:not(.js-nav) .nav-group:hover > .nav-menu,
  html:not(.js-nav) .nav-group:focus-within > .nav-menu{display:block}
  html:not(.js-nav) .nav-group:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:13px}
}
/* the bridge that lets the pointer cross the gap into the panel */
.nav-group.is-open::after{content:"";position:absolute;left:0;right:0;top:100%;height:13px}
@media(max-width:1080px){.nav-group.is-open::after{display:none}}
@media(prefers-reduced-motion:reduce){
  .nav-group.is-open > .nav-menu,
  .nav-group:hover > .nav-menu,
  .nav-group:focus-within > .nav-menu{animation:none}
  .nav-caret{transition:none}
}

.nav-burger{
  display:none;
  width:46px;height:46px;
  background:none;border:1px solid var(--border-dark);border-radius:3px;
  position:relative;
}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{
  content:"";position:absolute;left:12px;width:20px;height:2px;background:var(--warm-white);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.nav-burger span{top:22px}
.nav-burger span::before{left:0;top:-6px}
.nav-burger span::after{left:0;top:6px}
body.nav-open .nav-burger span{background:transparent}
body.nav-open .nav-burger span::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Sections ---------- */

.sec{padding:96px 0}
.sec-dark{background:var(--black);color:var(--warm-white)}
.sec-graphite{background:var(--graphite);color:var(--warm-white)}
.sec-light{background:var(--warm-white);color:var(--text)}
.sec-light p{color:#3A3A38}
.sec-dark p,.sec-graphite p{color:var(--light-gray)}

.sec-head{max-width:720px;margin-bottom:48px}
.sec-head p{margin-top:16px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center p{margin-left:auto;margin-right:auto}

/* ---------- Hero scaffold ---------- */

.hero{background:var(--black);border-bottom:1px solid var(--border-dark);padding:72px 0 80px}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,15fr) minmax(0,17fr);
  gap:56px;
  align-items:center;
}
.hero-copy h1{margin-bottom:20px}
.hero-copy p{color:var(--light-gray);margin-bottom:14px}
.hero-copy .hero-sub{font-size:1.15rem;font-weight:600;color:var(--warm-white)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

/* The stage: every hero interaction lives inside this frame. */
.stage{
  position:relative;
  background:var(--graphite);
  border:1px solid var(--border-dark);
  border-radius:6px;
  overflow:hidden;
}
.stage-hint{
  margin-top:12px;
  font-family:var(--font);
  font-size:.68rem;
  letter-spacing:.14em;
  color:var(--gray);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.stage-hint button{
  background:none;border:none;color:var(--gray);
  font-family:var(--font);font-size:.68rem;letter-spacing:.14em;
  text-decoration:underline;text-underline-offset:3px;
}
.stage-hint button:hover{color:var(--yellow)}

/* ---------- Cards (hover: thin yellow rule sweeping the top edge) ---------- */

.card{
  position:relative;
  background:var(--card-dark);
  border:1px solid var(--border-dark);
  border-radius:4px;
  padding:30px 28px;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease);
}
.card:hover::before,.card:focus-within::before{transform:scaleX(1)}
.card,.feature,.pair{
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.card:hover,.feature:hover,.pair:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(0,0,0,.3);
}
.sec-light .card:hover,.sec-light .feature:hover,.pair:hover{
  box-shadow:0 16px 30px rgba(20,20,10,.1);
  border-color:#CFCEC6;
}
.sec-light .card{background:var(--white);border-color:var(--border)}
.card h3{margin-bottom:12px}
.card p{font-size:.95rem}
.card .card-link{
  display:inline-block;
  margin-top:18px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--yellow);
}
.sec-light .card .card-link{color:var(--yellow-text)}
.card .card-link{position:relative;padding-bottom:3px}
.card .card-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease);
}
.card .card-link:hover::after,.card:hover .card-link::after{transform:scaleX(1)}

.card-grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* Home services: five cards read as three then a centred pair. Six equal
   tracks with each card spanning two keeps the card width identical to the
   three-column row, and leaves one free track either side of the last two.
   Applies wherever the three-column row is active; below 861px the grid
   drops to two columns and this no longer applies. */
@media(min-width:861px){
  #services .card-grid{grid-template-columns:repeat(6,1fr)}
  #services .card-grid > .card{grid-column:span 2}
  #services .card-grid > .card:nth-child(4){grid-column:2 / span 2}
  #services .card-grid > .card:nth-child(5){grid-column:4 / span 2}
}

.card .kicker{
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--gray);
  display:block;
  margin-bottom:14px;
}
.card .hook{font-weight:600;color:var(--white);margin-bottom:10px}
.sec-light .card .hook{color:var(--text)}
.card .note{font-size:.9rem;color:var(--gray);margin-top:12px}

/* ---------- Split rows ---------- */

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.split > div > p{margin-bottom:14px}

/* ---------- Arrow pairs (When the Details Matter) ---------- */

.pair-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0 36px}
.pair{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:4px;
  padding:26px 24px;
  position:relative;
  overflow:hidden;
}
.pair::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.pair:hover::before{transform:scaleX(1)}
.pair .from{font-weight:600;color:var(--text)}
.pair .to-arrow{
  display:block;
  color:var(--yellow-text);
  margin:10px 0;
  font-size:.85rem;
}
.pair .to{color:var(--gray)}

/* ---------- Feature list (Built Around Your Operation) ---------- */

.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px}
.feature{
  position:relative;
  border:1px solid var(--border-dark);
  background:var(--card-dark);
  border-radius:4px;
  padding:24px 26px;
  overflow:hidden;
}
.feature::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.feature:hover::before{transform:scaleX(1)}
.sec-light .feature{background:var(--white);border-color:var(--border)}
.feature b{display:block;color:var(--white);margin-bottom:6px}
.sec-light .feature b{color:var(--text)}
.feature p{font-size:.93rem}

/* ---------- Statement stack ---------- */

.statement-list{margin:28px 0;display:grid;gap:12px}
.statement-list li{
  padding-left:22px;
  position:relative;
  color:var(--light-gray);
}
.sec-light .statement-list li{color:#3A3A38}
.statement-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:10px;height:2px;background:var(--yellow);
}
.sec-light .statement-list li::before{background:var(--yellow-text)}

/* ---------- CTA band (dark, once per page, above the footer) ---------- */

.cta-band{
  position:relative;
  background:
    radial-gradient(760px 320px at 84% 55%, rgba(255,213,31,.09), transparent 65%),
    linear-gradient(120deg, var(--black), var(--graphite));
  border-top:1px solid var(--border-dark);
  color:var(--warm-white);
  padding:84px 0;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute;top:0;left:0;
  width:180px;height:2px;
  background:linear-gradient(90deg, var(--yellow), transparent);
}
.cta-band .eyebrow{color:var(--yellow)}
.cta-band h2{color:var(--white);margin-bottom:14px}
.cta-band p{color:var(--light-gray);max-width:58ch}
.cta-band .btn-black{background:var(--yellow);color:var(--text)}
.cta-band .btn-black:hover{background:var(--yellow-hover)}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:44px}
.cta-inner .btn{flex-shrink:0}

/* ---------- Footer ---------- */

.site-footer{background:var(--black);border-top:1px solid var(--border-dark);padding-top:70px}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1.1fr);
  gap:44px;
  padding-bottom:52px;
}
.f-tag{font-size:.62rem;font-weight:600;letter-spacing:.22em;color:var(--gray);margin:10px 0 16px}
.f-desc{font-size:.92rem;color:var(--light-gray);max-width:36ch}
.f-col h2{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin-bottom:18px}
.f-col ul{display:grid;gap:10px}
.f-col a{font-size:.93rem;color:var(--light-gray);transition:color .3s var(--ease)}
.f-col a:hover{color:var(--yellow)}
.f-contact li{display:flex;gap:12px;align-items:baseline;font-size:.93rem;color:var(--light-gray)}
.f-contact .lbl{font-size:.66rem;font-weight:600;letter-spacing:.1em;color:var(--gray);min-width:44px}
.footer-legal{
  border-top:1px solid var(--border-dark);padding-top:26px;padding-bottom:30px;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:baseline;gap:8px 28px;
}
.footer-legal > .f-legal-links{justify-self:center}
.footer-legal > .f-credit{justify-self:end;text-align:right}
.footer-legal p{font-size:.78rem;color:var(--gray);max-width:none;line-height:1.65}
.f-copy{font-size:.8rem;letter-spacing:0}
.footer-legal p + .f-copy{margin-top:14px}
/* the credit borrows the footer link colours rather than introducing its own */
.f-credit a{color:var(--light-gray);transition:color .3s var(--ease)}
.f-credit a:hover{color:var(--yellow)}

/* ---------- Forms ---------- */

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .field-full{grid-column:1/-1}
.field label{
  display:block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--light-gray);
  margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%;
  background:var(--card-dark);
  border:1px solid var(--border-dark);
  border-radius:3px;
  color:var(--warm-white);
  font-family:var(--font);
  font-size:.96rem;
  padding:13px 14px;
  transition:border-color .3s var(--ease);
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--yellow)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--alert)}
.field .err{
  display:none;
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.02em;
  color:#F08070;
  margin-top:6px;
}
.field.invalid .err{display:block}
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-status{
  display:none;
  border:1px solid var(--verified);
  border-radius:3px;
  color:#7FCBA4;
  font-size:.92rem;
  padding:14px 16px;
  margin-bottom:22px;
}
.form-status.error{border-color:var(--alert);color:#F08070}
.form-status.show{display:block}

/* ---------- Contact info panel ---------- */

/* Direct contact sits with the form, not in a section of its own. */
.direct-contact{margin-top:38px;display:grid;gap:28px}
.dc-item{display:flex;align-items:flex-start;gap:16px}
.dc-art{width:32px;height:32px;flex:none;margin-top:1px}
.dc-item .lbl{
  display:block;font-family:var(--font);font-size:.62rem;
  letter-spacing:.18em;color:var(--gray);margin-bottom:6px;
}
.dc-item a,.dc-item .val{font-size:1.02rem;font-weight:600;color:var(--white)}
.dc-item a{
  text-decoration:none;border-bottom:1px solid transparent;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.dc-item a:hover{color:var(--yellow);border-bottom-color:rgba(255,213,31,.5)}
.dc-art .svc-accent{opacity:.85;transition:opacity .25s var(--ease)}
.dc-item:hover .dc-art .svc-accent{opacity:1}

/* ---------- NDT Training page ---------- */

/* Level I reads into Level II. A rule, not a progress widget. */
.lvl-progress{
  display:flex;align-items:center;gap:16px;
  max-width:560px;margin:26px auto 0;
  font-size:.6rem;font-weight:600;letter-spacing:.2em;color:var(--gray);
}
.lvl-progress i{flex:1;height:1px;background:var(--yellow);opacity:.5;position:relative}
.lvl-progress i::after{
  content:"";position:absolute;right:0;top:-3.5px;
  border-left:5px solid var(--yellow);
  border-top:3.5px solid transparent;border-bottom:3.5px solid transparent;
}

@media(max-width:760px){
  /* Each readout takes its own row, so the panel height no longer depends on
     which method happens to carry the longest status text. */
  .bench-status{flex-direction:column;align-items:flex-start;gap:6px}
  /* Panel captions and their control each take a row, so the hero height does
     not change when a longer status or hint string appears. */
  .stage-hint{flex-direction:column;align-items:flex-start;gap:7px}
  /* The per method instruction varies in length, so reserve two lines for it
     and the panel stops moving when the method changes. */
  #bench-hint{display:block;min-height:3.2em}
  /* Same on the audit hero: the hint grows once the finding is named. */
  #thread-hint{display:block;min-height:3.2em}
}

@media(max-width:640px){
  .lvl-progress{gap:10px;font-size:.55rem}
}

/* ---------- Quality Training page figures ---------- */

.qt-figure{width:100%;max-width:360px;height:auto;display:block;margin-top:28px}
.qt-figure-lg{max-width:390px}
.qt-figure-sm{max-width:320px}
/* labels that belong to a finding appear once the relationship is drawn */
.qt-figure .svc-draw-t{opacity:0;transition:opacity .5s var(--ease) .55s}
.rv-in .qt-figure .svc-draw-t{opacity:1}
.qt-mark{width:34px;height:34px;display:block;margin-bottom:12px}
.qt-figure-xl{max-width:440px}

/* =========================================================
   Message board: the public page, then the moderation screens
   inside Studio. Both reuse the existing tokens and controls.
   ========================================================= */

.board-hero{padding:72px 0 60px}
.board-intro{max-width:60ch}
.board-lede{font-size:1.08rem;color:var(--light-gray);margin-top:14px}

/* ---------- the board ---------- */
.board-list{list-style:none;display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.board-item{position:relative;background:var(--white);padding:34px 36px 30px}
.board-item.is-featured{background:#FCFBF7}
/* the only emphasis a featured message gets */
.board-item.is-featured::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--yellow)}
.board-flag{
  font-size:.56rem;letter-spacing:.22em;color:var(--yellow-text);margin-bottom:12px;
}
.board-quote{
  font-size:clamp(1.02rem,1.7vw,1.18rem);line-height:1.62;color:var(--text);
  max-width:74ch;
}
.board-by{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.board-name{font-weight:700;color:var(--text);font-size:.98rem}
.board-attr{font-size:.88rem;color:var(--gray);margin-top:3px}
.board-date{font-size:.6rem;letter-spacing:.16em;color:var(--light-gray);margin-top:9px}

.board-empty{
  border:1px dashed var(--border);border-radius:4px;
  padding:64px 32px;text-align:center;
}
.board-empty h2{margin-bottom:10px}
.board-empty p{margin-bottom:24px}

/* ---------- the form ---------- */
.board-form-wrap{max-width:760px}
.board-grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.board-form .field-full{grid-column:1/-1}
.board-form .field{display:flex;flex-direction:column;gap:7px}
.board-form label{
  font-family:var(--font);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--light-gray);
}
.board-form .req{color:var(--yellow)}
.board-form .opt{color:var(--gray);letter-spacing:.1em}
.board-form input[type=text],.board-form input[type=email],.board-form textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--warm-white);
  background:var(--graphite);border:1px solid var(--border-dark);border-radius:3px;
  padding:12px 14px;
}
.board-form textarea{resize:vertical;min-height:150px;line-height:1.6}
.board-form input:focus-visible,.board-form textarea:focus-visible,
.board-form input[type=checkbox]:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.board-form input[aria-invalid="true"],.board-form textarea[aria-invalid="true"]{border-color:var(--alert)}
.board-form .hint{font-size:.72rem;color:var(--gray);letter-spacing:0;text-transform:none;font-family:inherit}
.board-form .err{
  font-size:.74rem;color:#F0A093;letter-spacing:0;text-transform:none;font-family:inherit;
}
.board-formerr{
  border:1px solid var(--alert);border-left-width:2px;border-radius:3px;
  padding:13px 16px;margin-bottom:22px;color:#F0A093;font-size:.92rem;
}
.board-consent{margin-top:22px;display:grid;gap:14px}
.board-form .check{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-family:inherit;font-size:.9rem;letter-spacing:0;text-transform:none;
  color:var(--light-gray);line-height:1.5;
}
.board-form .check input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--yellow)}
.board-form .btn{margin-top:26px}
.board-note{font-size:.58rem;letter-spacing:.18em;color:var(--gray);margin-top:16px}
/* the honeypot: off screen for people, present for bots */
.board-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.board-thanks{
  border:1px solid var(--border-dark);border-left:2px solid var(--yellow);border-radius:4px;
  background:var(--graphite);padding:34px 36px;
}
.board-thanks h3{font-size:1.5rem;margin-bottom:8px;color:var(--white)}

@media(max-width:640px){
  .board-grid{grid-template-columns:minmax(0,1fr)}
  .board-item{padding:26px 22px 24px}
}

/* =========================================================
   LumioTrack, the product page.
   Same reveal contract as the rest of the site: everything is
   authored in its finished state and only pulled back by .rv,
   which main.js adds once it knows it can reveal it again. So
   the page reads complete with no JS and under reduced motion.
   ========================================================= */

.ltk-hero{padding:72px 0 84px}
.ltk-hero-copy{max-width:64ch}
/* The supplied mark is white artwork on transparency, so it belongs only on
   a dark ground. It is the symbol alone, so the product name sits beside it. */
.ltk-logo{display:flex;align-items:center;gap:15px;margin-bottom:24px}
.ltk-logo img{height:54px;width:auto;flex:none}
.ltk-logo b{
  font-size:2rem;font-weight:800;letter-spacing:-.025em;line-height:1;
  color:var(--white);
}
.ltk-logo--sm{gap:11px;margin-bottom:18px}
.ltk-logo--sm img{height:38px}
.ltk-logo--sm b{font-size:1.4rem}
.ltk-hero h1{margin-bottom:22px}
/* the half of the message that has to land */
.ltk-hero h1 em{font-style:normal;color:var(--yellow)}
.ltk-lede{font-size:1.08rem;color:var(--light-gray);max-width:62ch}

/* ---------------------------------------------------------
   The architecture. Four areas above, four below, LumioTrack
   between them. The labels are real markup and the linework is
   CSS, so small screens get a different composition rather than
   a shrunken copy of this one.
   --------------------------------------------------------- */
.ltk-arch{position:relative;margin-top:64px;padding:34px 0 8px}
.ltk-arch-frame{position:absolute;inset:0;pointer-events:none}
.ltk-arch-frame .c{position:absolute;width:16px;height:16px}
.ltk-arch-frame .c::before,.ltk-arch-frame .c::after{content:"";position:absolute;background:#3A3B40}
.ltk-arch-frame .c::before{width:16px;height:1px}
.ltk-arch-frame .c::after{width:1px;height:16px}
.ltk-arch-frame .c1{top:0;left:0}
.ltk-arch-frame .c2{top:0;right:0}
.ltk-arch-frame .c2::before,.ltk-arch-frame .c2::after{right:0}
.ltk-arch-frame .c3{bottom:0;left:0}
.ltk-arch-frame .c3::before{bottom:0}
.ltk-arch-frame .c4{bottom:0;right:0}
.ltk-arch-frame .c4::before{bottom:0;right:0}
.ltk-arch-frame .c4::after{right:0}

.ltk-arch-row{
  list-style:none;display:grid;gap:16px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.ltk-nodebox{
  position:relative;
  border:1px solid var(--border-dark);border-radius:3px;
  background:var(--graphite);
  padding:16px 18px 15px;
  font-family:var(--font);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--warm-white);
  opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(.15s + var(--c) * .1s);
}
.ltk-arch-row--out .ltk-nodebox{transition-delay:calc(1.55s + var(--c) * .1s)}
.ltk-nodebox .ref{
  display:block;font-size:.56rem;letter-spacing:.2em;color:var(--gray);margin-bottom:7px;
}
.rv:not(.rv-in) .ltk-nodebox{opacity:0;transform:translateY(-8px);transition:none}
.rv:not(.rv-in) .ltk-arch-row--out .ltk-nodebox{transform:translateY(8px)}

/* the linework between the areas and the platform */
.ltk-link{position:relative;height:62px}
.ltk-link i{position:absolute;background:#3A3B40;display:block}
.ltk-link .v{
  top:0;height:28px;width:1px;left:calc(12.5% + var(--c) * 25%);
  transform:scaleY(1);transform-origin:top;
}
.ltk-link .bus{top:28px;left:12.5%;right:12.5%;height:1px;transform:scaleX(1);transform-origin:center}
.ltk-link .stem{top:28px;left:50%;width:1px;height:34px;transform:scaleY(1);transform-origin:top}
.ltk-link .tip{
  top:54px;left:50%;width:9px;height:9px;margin-left:-4.5px;background:none;
  border-right:1px solid var(--yellow);border-bottom:1px solid var(--yellow);
  transform:rotate(45deg);opacity:1;
}
/* the outward half runs the other way */
.ltk-link--out .stem{top:0;height:30px}
.ltk-link--out .bus{top:30px}
.ltk-link--out .v{top:30px;height:32px;transform-origin:top}
.ltk-link--out .tip{
  top:52px;left:calc(12.5% + var(--c) * 25%);
  border-color:#5B5B57;
}
.ltk-link--out .t0{--c:0}.ltk-link--out .t1{--c:1}
.ltk-link--out .t2{--c:2}.ltk-link--out .t3{--c:3}

/* A signal draws in yellow, then settles to structure. Two delayed
   transitions on one element: the draw, then the colour handing back. */
.ltk-link .v,.ltk-link .bus,.ltk-link .stem{
  transition:transform .42s var(--ease) var(--d,0s),
             background-color .5s var(--ease) calc(var(--d,0s) + .42s);
}
.ltk-link--in .v{--d:.55s}
.ltk-link--in .bus{--d:.95s}
.ltk-link--in .stem{--d:1.2s;background:var(--yellow)}
.ltk-link--in .tip{transition:opacity .3s var(--ease) 1.5s}
.ltk-link--out .stem{--d:1.95s;background:var(--yellow)}
.ltk-link--out .bus{--d:2.2s}
.ltk-link--out .v{--d:2.45s}
.ltk-link--out .tip{transition:opacity .3s var(--ease) 2.8s}
.rv:not(.rv-in) .ltk-link .v,.rv:not(.rv-in) .ltk-link .bus{
  transform:scaleY(0) scaleX(0);background:var(--yellow);transition:none;
}
.rv:not(.rv-in) .ltk-link .stem{transform:scaleY(0);background:var(--yellow);transition:none}
.rv:not(.rv-in) .ltk-link .tip{opacity:0;transition:none}

/* the platform itself */
.ltk-core{
  position:relative;margin:0 auto;width:min(360px,100%);
  border:1.5px solid var(--warm-white);border-radius:3px;
  background:var(--black);
  padding:22px 26px 20px;text-align:center;
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) 1.5s,transform .5s var(--ease) 1.5s;
}
.rv:not(.rv-in) .ltk-core{opacity:0;transform:scale(.96);transition:none}
.ltk-core-mark{
  position:absolute;top:-1px;left:-1px;width:18px;height:18px;
  border-top:2px solid var(--yellow);border-left:2px solid var(--yellow);
}
.ltk-core-name{
  font-size:1.5rem;font-weight:800;letter-spacing:-.01em;color:var(--white);line-height:1.1;
}
.ltk-core-sub{
  margin-top:8px;
  font-family:var(--font);font-size:.6rem;letter-spacing:.22em;color:var(--yellow);
}

/* ---------- 02. the challenge ---------- */
.split--ltk{align-items:center}
.split--ltk > div:last-child{display:flex;justify-content:center}
.ltk-fig{width:100%;max-width:440px;height:auto;display:block}
.ltk-frag{opacity:1;transition:opacity .5s var(--ease);transition-delay:calc(.1s + var(--i) * .12s)}
.ltk-break{opacity:1;transition:opacity .5s var(--ease) .9s}
.ltk-break--mark{opacity:.7}
.ltk-align{opacity:1;transition:opacity .5s var(--ease) 1.4s}
.ltk-align2{opacity:1;transition:opacity .6s var(--ease) 1.7s}
.rv:not(.rv-in) .ltk-frag,.rv:not(.rv-in) .ltk-break,
.rv:not(.rv-in) .ltk-align,.rv:not(.rv-in) .ltk-align2{opacity:0;transition:none}

/* ---------- 03. the six areas ---------- */
.ltk-areas{display:grid;gap:0;border-top:1px solid var(--border-dark)}
.ltk-area{
  display:grid;gap:44px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  padding:44px 0;border-bottom:1px solid var(--border-dark);
}
.ltk-area:nth-child(even) .ltk-area-copy{order:2}
.ltk-area-copy{position:relative;padding-left:56px}
.ltk-area-n{
  position:absolute;left:0;top:2px;
  font-family:var(--font);font-size:.74rem;letter-spacing:.16em;color:var(--yellow);
}
.ltk-area-copy h3{font-size:clamp(1.2rem,2.2vw,1.55rem);margin-bottom:12px}
.ltk-area-copy p{font-size:.98rem;max-width:46ch}
.ltk-area-tag{
  margin-top:14px;
  font-family:var(--font);font-size:.6rem;letter-spacing:.2em;color:var(--gray);
}
.ltk-area-art svg{width:100%;max-width:340px;height:auto;display:block;margin:0 auto}
.ltk-a-flow,.ltk-a-key,.ltk-a-now{opacity:1;transition:opacity .5s var(--ease) .5s}
/* the status chip that has not been reached yet */
.ltk-a-key--dim{opacity:.45}
.ltk-a-mesh{opacity:1;transition:opacity .5s var(--ease) .35s}
.ltk-a-trace{stroke-dasharray:280;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease) .3s}
.ltk-a-bar path{
  stroke-dasharray:160;stroke-dashoffset:0;
  transition:stroke-dashoffset .6s var(--ease);transition-delay:calc(.25s + var(--i) * .14s);
}
.rv:not(.rv-in) .ltk-a-flow,.rv:not(.rv-in) .ltk-a-key,
.rv:not(.rv-in) .ltk-a-now,.rv:not(.rv-in) .ltk-a-mesh{opacity:0;transition:none}
.rv:not(.rv-in) .ltk-a-trace{stroke-dashoffset:280;transition:none}
.rv:not(.rv-in) .ltk-a-bar path{stroke-dashoffset:160;transition:none}

/* ---------- 04. connected by design ---------- */
.ltk-wide{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.ltk-wide:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.ltk-mesh{display:block;min-width:900px;width:100%;height:auto}
.ltk-m-field{opacity:1;transition:opacity .6s var(--ease) .1s}
.ltk-m-zone > g{opacity:1;transition:opacity .5s var(--ease);transition-delay:calc(.4s + var(--i) * .12s)}
.ltk-m-path path{
  stroke-dasharray:420;stroke-dashoffset:0;
  transition:stroke-dashoffset .8s var(--ease);transition-delay:calc(1.1s + var(--i) * .09s);
}
.ltk-m-live path{
  stroke-dasharray:420;stroke-dashoffset:0;
  transition:stroke-dashoffset 1s var(--ease);transition-delay:calc(1.9s + var(--i) * .22s);
}
.ltk-m-status{opacity:1;transition:opacity .5s var(--ease) 2.8s}
.rv:not(.rv-in) .ltk-m-field,.rv:not(.rv-in) .ltk-m-zone > g,
.rv:not(.rv-in) .ltk-m-status{opacity:0;transition:none}
.rv:not(.rv-in) .ltk-m-path path,.rv:not(.rv-in) .ltk-m-live path{stroke-dashoffset:420;transition:none}

/* ---------- 05. the real product ---------- */
.ltk-shot{
  position:relative;border:1px solid var(--border);border-radius:4px;
  background:var(--white);overflow:hidden;
  opacity:1;transition:opacity .6s var(--ease) .1s;
}
.rv:not(.rv-in) .ltk-shot{opacity:0;transition:none}
.ltk-shot img{display:block;width:100%;height:auto}
.ltk-shot-pending{display:none}
/* until the real asset lands, an honest slot rather than a fake interface */
.ltk-shot.is-pending{background:#F1F0EC;border-style:dashed;border-color:var(--light-gray)}
.ltk-shot.is-pending .ltk-shot-pending{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  aspect-ratio:16/9;position:relative;
}
.ltk-shot-pending .c{position:absolute;width:20px;height:20px}
.ltk-shot-pending .c::before,.ltk-shot-pending .c::after{content:"";position:absolute;background:var(--light-gray)}
.ltk-shot-pending .c::before{width:20px;height:1px}
.ltk-shot-pending .c::after{width:1px;height:20px}
.ltk-shot-pending .c1{top:16px;left:16px}
.ltk-shot-pending .c2{top:16px;right:16px}
.ltk-shot-pending .c2::before,.ltk-shot-pending .c2::after{right:0}
.ltk-shot-pending .c3{bottom:16px;left:16px}
.ltk-shot-pending .c3::before{bottom:0}
.ltk-shot-pending .c4{bottom:16px;right:16px}
.ltk-shot-pending .c4::before{bottom:0;right:0}
.ltk-shot-pending .c4::after{right:0}
.ltk-shot-note{
  font-family:var(--font);font-size:.72rem;letter-spacing:.22em;color:var(--gray);
}
.ltk-shot-path{font-family:var(--font);font-size:.6rem;letter-spacing:.1em;color:var(--light-gray)}

/* ---------- 06. configurable ---------- */
.ltk-fig--cfg{max-width:460px}
.ltk-closer{
  margin-top:18px;font-size:1.1rem;font-weight:600;color:var(--white);
}
.ltk-cfg{opacity:1;transition:opacity .55s var(--ease);transition-delay:calc(.25s + var(--i) * .22s)}
.rv:not(.rv-in) .ltk-cfg{opacity:0;transition:none}

/* ---------- 07. cta ---------- */
.ltk-cta .ltk-logo{margin-bottom:16px}

@media(max-width:1000px){
  .ltk-area{grid-template-columns:minmax(0,1fr);gap:30px}
  .ltk-area:nth-child(even) .ltk-area-copy{order:0}
  .split--ltk{align-items:start}
  .ltk-nodebox{font-size:.68rem;padding:13px 14px 12px;letter-spacing:.1em}
  .ltk-arch-row{gap:10px}
}
/* Below this the four-across composition stops being readable, so the
   architecture is rebuilt as a stack rather than scaled down. */
@media(max-width:720px){
  .ltk-arch{padding:26px 0 6px}
  .ltk-arch-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .ltk-nodebox{
    padding:12px 14px;display:flex;align-items:baseline;gap:12px;
    border-left:2px solid var(--border-dark);
  }
  .ltk-nodebox .ref{margin-bottom:0;flex:none}
  .ltk-arch-row .ltk-nodebox{border-left-color:#4A4B50}
  .ltk-arch-row--out .ltk-nodebox{border-left-color:#4A4B50}
  .rv:not(.rv-in) .ltk-nodebox{transform:translateY(0) translateX(-8px)}
  .rv:not(.rv-in) .ltk-arch-row--out .ltk-nodebox{transform:translateY(0) translateX(-8px)}
  /* one spine down the stack instead of four columns into a bus */
  .ltk-link{height:44px}
  .ltk-link .v,.ltk-link .bus{display:none}
  .ltk-link .stem{top:0;left:calc(1rem + 1px);height:44px}
  .ltk-link--out .stem{top:0;height:44px}
  .ltk-link .tip{top:34px;left:calc(1rem + 1px)}
  .ltk-link--out .tip{display:none}
  .ltk-link--out .t0{display:block;left:calc(1rem + 1px)}
  .ltk-core{width:100%;text-align:left;padding:20px 22px}
  .ltk-mesh{min-width:820px}
}
@media(max-width:640px){
  .ltk-hero{padding:52px 0 64px}
  .ltk-logo img{height:44px}
  .ltk-logo b{font-size:1.65rem}
  .ltk-area-copy{padding-left:44px}
  .ltk-shot-note{font-size:.62rem;letter-spacing:.16em}
}

@media(prefers-reduced-motion:reduce){
  .ltk-nodebox,.ltk-core,.ltk-frag,.ltk-break,.ltk-align,.ltk-align2,
  .ltk-a-flow,.ltk-a-key,.ltk-a-now,.ltk-a-mesh,.ltk-m-field,
  .ltk-m-zone > g,.ltk-m-status,.ltk-shot,.ltk-cfg{opacity:1;transform:none}
  /* the chevron is geometry: show it without unrotating it */
  .ltk-link .tip{opacity:1}
  .ltk-break--mark{opacity:.7}
  .ltk-a-key--dim{opacity:.45}
  .ltk-a-trace,.ltk-a-bar path,.ltk-m-path path,.ltk-m-live path{stroke-dashoffset:0}
  .ltk-link .v,.ltk-link .bus,.ltk-link .stem{transform:none;background:#3A3B40}
  .ltk-link--in .stem,.ltk-link--out .stem{background:var(--yellow)}
}

/* =========================================================
   LumioTrack partnership.
   Same reveal contract as the rest of the site: everything is
   authored in its finished state and only pulled back by .rv,
   which main.js adds once it knows it can reveal it again.
   ========================================================= */

.hero-grid--lt{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.lt-stage-frame{padding:0}
.lt-frame-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--border-dark);
  font-family:var(--font);font-size:.64rem;letter-spacing:.2em;color:var(--gray);
}
.lt-frame-head .lt-frame-key{color:var(--yellow)}
.lt-hero-art{display:block;width:100%;height:auto;padding:16px 18px 18px}

/* the two contributions arrive, then one signal goes in */
.lt-src{opacity:1;transition:opacity .5s var(--ease);transition-delay:calc(.15s + var(--i) * .2s)}
.lt-feed path{stroke-dasharray:150;stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease) .5s}
.lt-signal{stroke-dasharray:38;stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease) 1.3s}
.lt-signal-head,.lt-dest{opacity:1;transition:opacity .5s var(--ease) 1.6s}
.lt-mesh path{stroke-dasharray:50;stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease) 1.95s}
.rv:not(.rv-in) .lt-src,.rv:not(.rv-in) .lt-signal-head,.rv:not(.rv-in) .lt-dest{opacity:0;transition:none}
.rv:not(.rv-in) .lt-feed path{stroke-dashoffset:150;transition:none}
.rv:not(.rv-in) .lt-signal{stroke-dashoffset:38;transition:none}
.rv:not(.rv-in) .lt-mesh path{stroke-dashoffset:50;transition:none}

/* ---------- 2. two knowledge sets converging ---------- */
.lt-converge{
  display:grid;gap:34px;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr) minmax(0,1fr);
}
.lt-side h3{margin-bottom:6px}
.lt-side-tag{
  font-family:var(--font);font-size:.62rem;letter-spacing:.16em;
  color:var(--gray);margin-bottom:18px;
}
.lt-side ul{list-style:none;display:grid;gap:10px}
.lt-side li{
  position:relative;padding-left:20px;font-size:.98rem;font-weight:600;color:var(--text);
}
.lt-side li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--yellow-text);
}
.lt-converge .lt-side:last-child{text-align:right}
.lt-converge .lt-side:last-child li{padding-left:0;padding-right:20px}
.lt-converge .lt-side:last-child li::before{left:auto;right:0}
.lt-hub{text-align:center}
.lt-hub-art{width:100%;max-width:150px;height:auto;display:block;margin:0 auto}
.lt-hub-label{
  margin-top:10px;font-family:var(--font);font-size:.72rem;
  letter-spacing:.18em;color:var(--text);font-weight:600;
}
.lt-hub-feed path{stroke-dasharray:120;stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--ease) .2s}
.lt-hub-node{opacity:1;transition:opacity .5s var(--ease) .9s}
.lt-hub-mesh path{stroke-dasharray:20;stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--ease) 1.2s}
.rv:not(.rv-in) .lt-hub-feed path{stroke-dashoffset:120;transition:none}
.rv:not(.rv-in) .lt-hub-node{opacity:0;transition:none}
.rv:not(.rv-in) .lt-hub-mesh path{stroke-dashoffset:20;transition:none}

/* ---------- 3. the architecture drawing ---------- */
.lt-wide{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.lt-wide:focus-visible,.lt-flow-scroll:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.lt-arch{display:block;min-width:900px;width:100%;height:auto}
.lt-scroll-note{
  margin-top:14px;font-family:var(--font);font-size:.58rem;
  letter-spacing:.16em;color:var(--gray);
}
.lt-node rect,.lt-node-t text{
  opacity:1;transition:opacity .45s var(--ease);transition-delay:calc(.3s + var(--i) * .07s);
}
.lt-drop path,path.lt-drop{stroke-dasharray:300;stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--ease) .5s}
.lt-bus{stroke-dasharray:720;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease) .7s}
.lt-core{opacity:1;transition:opacity .5s var(--ease) 1.1s}
.lt-core-feed{stroke-dasharray:70;stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease) 1.4s}
.lt-ctrl{opacity:1;transition:opacity .55s var(--ease) 1.7s}
.rv:not(.rv-in) .lt-node rect,.rv:not(.rv-in) .lt-node-t text,
.rv:not(.rv-in) .lt-core,.rv:not(.rv-in) .lt-ctrl{opacity:0;transition:none}
.rv:not(.rv-in) .lt-drop path,.rv:not(.rv-in) path.lt-drop{stroke-dashoffset:300;transition:none}
.rv:not(.rv-in) .lt-bus{stroke-dashoffset:720;transition:none}
.rv:not(.rv-in) .lt-core-feed{stroke-dashoffset:70;transition:none}

/* ---------- 4. platform zones ---------- */
.lt-zones{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
.lt-zone{
  position:relative;background:var(--white);border:1px solid var(--border);
  border-radius:4px;padding:26px 26px 24px;overflow:hidden;
}
.lt-zone::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.lt-zone:hover::before{transform:scaleX(1)}
.lt-zone-art{height:48px;width:auto;display:block;margin-bottom:16px}
.lt-zone h3{margin-bottom:14px;font-size:1.1rem}
.lt-zone ul{list-style:none;display:grid;gap:8px}
.lt-zone li{
  position:relative;padding-left:16px;font-size:.92rem;color:#3A3A38;
}
.lt-zone li::before{
  content:"";position:absolute;left:0;top:.6em;width:6px;height:1px;background:var(--light-gray);
}
.lt-itar{
  margin-top:20px;display:flex;gap:22px;align-items:flex-start;
  background:var(--white);border:1px solid var(--border);border-left:2px solid var(--yellow);
  border-radius:4px;padding:26px 28px;
}
.lt-itar-art{width:52px;height:52px;flex:none}
.lt-itar h3{margin-bottom:8px;font-size:1.05rem}
.lt-itar p{font-size:.95rem;max-width:60ch}

/* ---------- 5. the connected workflow ---------- */
.lt-flow-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:1px 0 4px}
.lt-flow{min-width:940px}
.lt-stages{
  position:relative;list-style:none;padding-top:30px;
  display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:0;
}
.lt-stages::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#3A3B40}
/* one pass of the signal, left to right, then it stays */
.lt-stages::after{
  content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--yellow);
  transform:scaleX(1);transform-origin:left;transition:transform 2.4s var(--ease) .35s;
}
.rv:not(.rv-in) .lt-stages::after{transform:scaleX(0);transition:none}
.lt-stages li{
  position:relative;padding:0 10px 0 0;
  font-size:.82rem;line-height:1.35;color:var(--warm-white);
}
.lt-stages li::before{
  content:"";position:absolute;top:-22px;left:0;width:9px;height:9px;
  border:1.4px solid #9C9B96;background:var(--graphite);border-radius:2px;
}
.lt-stages li:last-child::before{border-color:var(--yellow)}
.lt-stages .n{
  display:block;font-family:var(--font);font-size:.6rem;letter-spacing:.16em;
  color:var(--gray);margin-bottom:6px;
}
.lt-layers{
  list-style:none;margin-top:26px;display:grid;gap:10px;
}
.lt-layers li{
  position:relative;padding:11px 16px;
  border:1px dashed #3A3B40;border-radius:3px;
  font-family:var(--font);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--light-gray);
}
.lt-layers li::after{
  content:"APPLIED ACROSS EVERY STAGE";
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:.56rem;letter-spacing:.14em;color:var(--gray);
}

/* ---------- 6. InnerLAB's role ---------- */
.split--lt{align-items:center}
.split--lt > div:last-child{display:flex;justify-content:center}
.lt-fig{width:100%;max-width:360px;height:auto;display:block}
.lt-objective{color:var(--warm-white);font-weight:600;margin-top:18px}
.lt-step > g,.lt-step circle{
  opacity:1;transition:opacity .5s var(--ease);transition-delay:calc(.55s + var(--i) * .26s);
}
.lt-step-line{stroke-dasharray:262;stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease) .2s}
.rv:not(.rv-in) .lt-step > g,.rv:not(.rv-in) .lt-step circle{opacity:0;transition:none}
.rv:not(.rv-in) .lt-step-line{stroke-dashoffset:262;transition:none}

/* ---------- 7. how the collaboration works ---------- */
.lt-collab{
  list-style:none;display:grid;gap:0;
  grid-template-columns:repeat(5,minmax(0,1fr));
  position:relative;padding-top:34px;
}
.lt-collab::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--border)}
.lt-collab::after{
  content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--yellow);
  transform:scaleX(1);transform-origin:left;transition:transform 2s var(--ease) .3s;
}
.rv:not(.rv-in) .lt-collab::after,.rv:not(.rv-in).lt-collab::after{transform:scaleX(0);transition:none}
.lt-collab li{position:relative;padding:0 26px 0 0}
.lt-collab li::before{
  content:"";position:absolute;top:-26px;left:0;width:9px;height:9px;
  border:1.4px solid var(--gray);background:var(--warm-white);border-radius:2px;
}
.lt-collab li:last-child::before{border-color:var(--yellow-text)}
.lt-collab .n{
  display:block;font-family:var(--font);font-size:.62rem;letter-spacing:.18em;
  color:var(--yellow-text);margin-bottom:8px;
}
.lt-collab b{display:block;color:var(--text);margin-bottom:6px;font-size:1rem}
.lt-collab p{font-size:.9rem;line-height:1.55}

/* ---------- 8. the shared approach ---------- */
.lt-triad{
  position:relative;display:grid;gap:0;
  grid-template-columns:repeat(3,minmax(0,1fr));padding-top:36px;
}
.lt-triad::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#3A3B40}
.lt-triad::after{
  content:"";position:absolute;top:-1px;left:0;right:0;height:3px;background:var(--yellow);
  transform:scaleX(1);transform-origin:left;transition:transform 1.8s var(--ease) .3s;
}
.rv:not(.rv-in) .lt-triad::after,.rv:not(.rv-in).lt-triad::after{transform:scaleX(0);transition:none}
.lt-triad-item{position:relative;padding-right:32px}
.lt-triad-item::before{
  content:"";position:absolute;top:-28px;left:0;width:11px;height:11px;
  border:1.5px solid var(--yellow);background:var(--black);border-radius:2px;
}
.lt-triad-item b{
  display:block;font-family:var(--font);font-size:.78rem;letter-spacing:.2em;
  color:var(--yellow);margin-bottom:12px;
}
.lt-triad-item span{
  display:block;font-size:clamp(1.15rem,2.1vw,1.5rem);font-weight:600;
  line-height:1.35;color:var(--white);
}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.cta-band .btn-ghost{border-color:#3B3B3B;color:var(--warm-white)}
.cta-band .btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}

@media(max-width:1000px){
  .hero-grid--lt{grid-template-columns:minmax(0,1fr)}
  .lt-converge{grid-template-columns:minmax(0,1fr);gap:26px}
  .lt-converge .lt-side:last-child{text-align:left}
  .lt-converge .lt-side:last-child li{padding-left:20px;padding-right:0}
  .lt-converge .lt-side:last-child li::before{left:0;right:auto}
  .lt-hub{order:-1}
  .lt-zones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lt-collab{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .lt-collab::after,.lt-collab::before{display:none}
  .lt-collab li{padding:0 20px 0 18px;border-left:2px solid var(--border)}
  .lt-collab li::before{display:none}
  .lt-collab li:first-child{border-left-color:var(--yellow-text)}
  .lt-triad{grid-template-columns:minmax(0,1fr);row-gap:30px;padding-top:0}
  .lt-triad::before,.lt-triad::after{display:none}
  .lt-triad-item{padding:0 0 0 18px;border-left:2px solid var(--yellow)}
  .lt-triad-item::before{display:none}
  .split--lt{align-items:start}
}
@media(max-width:640px){
  .lt-zones{grid-template-columns:minmax(0,1fr)}
  .lt-collab{grid-template-columns:minmax(0,1fr)}
  .lt-itar{flex-direction:column;gap:16px}
  .lt-layers li::after{display:none}
  .lt-hero-art{padding:12px 14px 14px}
  .lt-frame-head{padding:12px 14px;font-size:.6rem;letter-spacing:.16em}
}

@media(prefers-reduced-motion:reduce){
  .lt-feed path,.lt-signal,.lt-mesh path,.lt-hub-feed path,.lt-hub-mesh path,
  .lt-drop path,path.lt-drop,.lt-bus,.lt-core-feed,.lt-step-line{stroke-dashoffset:0}
  .lt-src,.lt-signal-head,.lt-dest,.lt-hub-node,.lt-node rect,.lt-node-t text,
  .lt-core,.lt-ctrl,.lt-step > g,.lt-step circle{opacity:1}
  .lt-stages::after,.lt-collab::after,.lt-triad::after{transform:scaleX(1)}
}

/* =========================================================
   About Linda Beene: the career record.
   Every animated element is authored in its FINAL state and is
   only pulled back by .rv, which main.js adds solely when it has
   confirmed it can reveal it again. No JS, or reduced motion, and
   the record simply reads as finished.
   ========================================================= */

.hero-grid--record{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)}
.record-stage{padding:0}
.rec-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--border-dark);
  font-family:var(--font);font-size:.64rem;letter-spacing:.2em;color:var(--gray);
}
.rec-head .rec-span{color:var(--yellow)}
.ct{display:block;width:100%;height:auto;padding:18px 20px 20px}

/* the run of the rail, drawn once */
.ct-trace{stroke-dasharray:466;stroke-dashoffset:0;transition:stroke-dashoffset 2.5s var(--ease) .25s}
.rv:not(.rv-in) .ct-trace{stroke-dashoffset:466;transition:none}
.ct-label,.ct-now{opacity:1;transition:opacity .55s var(--ease)}
.ct-label{transition-delay:calc(.45s + var(--i) * .44s)}
.ct-now{transition-delay:2.5s}
.rv:not(.rv-in) .ct-label,.rv:not(.rv-in) .ct-now{opacity:0;transition:none}

/* ---------- shared figure behaviour on this page ---------- */
.rec-fig{width:100%;max-width:340px;height:auto;display:block;margin-top:30px}
.split--record{align-items:center}
.split--record > div:last-child{display:flex;justify-content:center}

.rf-riser path,.cr-branch path{
  stroke-dasharray:70;stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease) .2s;
}
.rv:not(.rv-in) .rf-riser path,.rv:not(.rv-in) .cr-branch path{stroke-dashoffset:70;transition:none}
.rf-bar,.rf-text text{opacity:1;transition:opacity .5s var(--ease);transition-delay:calc(.35s + var(--i) * .28s)}
.rv:not(.rv-in) .rf-bar,.rv:not(.rv-in) .rf-text text{opacity:0;transition:none}

/* the credential track draws its trunk, then puts the roles on it */
.cr-trunk{stroke-dasharray:214;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease) .15s}
.rv:not(.rv-in) .cr-trunk{stroke-dashoffset:214;transition:none}
.cr-branch path{transition-delay:calc(.7s + var(--i) * .3s)}
.cr-text > g{opacity:1;transition:opacity .5s var(--ease);transition-delay:calc(.95s + var(--i) * .3s)}
.rv:not(.rv-in) .cr-text > g{opacity:0;transition:none}

/* the airframe, drawn once, then annotated */
.af-body path{stroke-dasharray:520;stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease) .2s}
.rv:not(.rv-in) .af-body path{stroke-dashoffset:520;transition:none}
.af-note path,.af-note circle,.af-note text{
  opacity:1;transition:opacity .5s var(--ease);transition-delay:calc(1.2s + var(--i) * .26s);
}
.af-key{opacity:1;transition:opacity .5s var(--ease) 2.1s}
.rv:not(.rv-in) .af-note path,.rv:not(.rv-in) .af-note circle,
.rv:not(.rv-in) .af-note text,.rv:not(.rv-in) .af-key{opacity:0;transition:none}
.af{max-width:400px}
/* the leadership progression has the room, so it takes it */
.rec-fig--lg{max-width:420px}

/* ---------- the standing figures ---------- */
.role-list{list-style:none;margin:18px 0 0;display:grid;gap:10px}
.role-list li{
  position:relative;padding-left:20px;font-size:.98rem;font-weight:600;color:var(--text);
}
.role-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:var(--yellow-text);
}
.metric{margin-top:30px;padding-top:22px;border-top:1px solid var(--border)}
.metric b{
  display:block;font-size:clamp(2rem,4.4vw,2.9rem);font-weight:800;
  letter-spacing:-.02em;line-height:1;color:var(--text);
}
.metric span{
  display:block;margin-top:9px;
  font-family:var(--font);font-size:.66rem;letter-spacing:.2em;color:var(--gray);
}
.sec-dark .metric{border-top-color:var(--border-dark)}
.sec-dark .metric b{color:var(--white)}
.metric--lead{margin-top:22px;border-top:none;padding-top:0}
.metric--lead + p{margin-top:26px}

/* ---------- credential list ---------- */
.cred-list{margin-top:20px;display:grid;gap:20px}
.cred{padding-left:18px;border-left:2px solid var(--border)}
.cred:first-child{border-left-color:var(--yellow)}
.cred dt{font-size:1.02rem;font-weight:700;color:var(--text)}
.cred dd{margin-top:5px;font-size:.92rem;line-height:1.55;color:#3A3A38}

/* ---------- NDT method matrix ---------- */
.method-line{
  margin-top:14px;font-family:var(--font);font-size:.9rem;
  letter-spacing:.14em;color:var(--yellow);
}
.method-grid{
  margin-top:46px;display:grid;gap:1px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--border-dark);border:1px solid var(--border-dark);border-radius:4px;overflow:hidden;
}
.method{
  background:var(--graphite);padding:26px 20px 22px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  transition:background .25s var(--ease);
}
.method:hover{background:#1C1C1C}
.method-art{width:100%;max-width:96px;height:auto;display:block}
.method h3{
  margin:0;font-family:var(--font);font-size:.86rem;font-weight:500;
  letter-spacing:.18em;color:var(--warm-white);
}
.ma-key{opacity:.78;transition:opacity .25s var(--ease)}
.method:hover .ma-key,.method:focus-within .ma-key{opacity:1}

/* ---------- closing span ---------- */
.sec-head--span{max-width:none}
.span-years{
  display:flex;align-items:center;gap:18px;
  font-family:var(--font);font-size:clamp(1.6rem,4vw,2.4rem);
  letter-spacing:.06em;color:var(--white);
}
.span-years i{flex:1;max-width:120px;height:1px;background:var(--yellow)}
.sec-head--span h2{margin-top:18px;max-width:16em}
.span-wrap{margin-top:52px}
.span-track{
  position:relative;list-style:none;padding-top:26px;
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
}
.span-track::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#3A3B40}
.span-track li{
  position:relative;text-align:center;padding:0 4px;
  font-family:var(--font);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--light-gray);
}
.span-track li::before{
  content:"";position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:1px;height:11px;background:#5B5B57;
}
/* one pass of the inspection line, then it stays */
.span-track::after{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--yellow);
  transform:scaleX(1);transform-origin:left;
  transition:transform 2s var(--ease) .3s;
}
.rv:not(.rv-in) .span-track::after{transform:scaleX(0);transition:none}

@media(max-width:1000px){
  .hero-grid--record{grid-template-columns:minmax(0,1fr)}
  .split--record{align-items:start}
  .rec-fig{margin-top:34px}
}
@media(max-width:860px){
  .method-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span-track{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px}
  .span-track li:nth-child(n+5)::before{display:none}
  .span-track::after{display:none}
  .span-track::before{right:auto;width:100%}
}
@media(max-width:640px){
  .ct{padding:14px 14px 16px}
  .rec-head{padding:12px 14px;font-size:.6rem;letter-spacing:.16em}
  .method{padding:22px 14px 18px}
  .method-art{max-width:82px}
  .span-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span-track li::before{display:none}
  .span-track::before{display:none}
  .span-track li{
    text-align:left;padding:9px 0 9px 16px;
    border-left:2px solid var(--border-dark);
  }
  .span-track li:first-child{border-left-color:var(--yellow)}
  .span-wrap{margin-top:36px}
  .cred{padding-left:14px}
}

@media(prefers-reduced-motion:reduce){
  .ct-trace,.cr-trunk,.af-body path,.rf-riser path,.cr-branch path{stroke-dashoffset:0}
  .ct-label,.ct-now,.rf-bar,.rf-text text,.af-note path,.af-note circle,
  .af-note text,.af-key,.cr-text > g{opacity:1}
  .span-track::after{transform:scaleX(1)}
}

/* ---------- Technical Support figures ---------- */
/* Marks inside the examination feature cards. */
/* The document marks on this page need a wider canvas than the shared 72
   unit mark, so they must be free to shrink or stack rather than be cut. */
.card-head--wide{gap:12px}
.card-head--wide .svc-art{flex:0 1 auto;width:112px;height:auto;max-width:100%}
@media(max-width:1060px){
  .card-head--wide{flex-direction:column;align-items:flex-start;gap:14px}
}
.feat-art{height:48px;width:auto;display:block;margin-bottom:16px}
.feat-art .svc-accent{opacity:.72;transition:opacity .5s var(--ease) .25s}
.rv-in .feat-art .svc-accent{opacity:1}
/* The section head carries its own figure where the row is otherwise empty. */
/* Only split the head once the figure can keep its own size beside it. */
@media(min-width:1200px){
  .sec-head--fig{
    max-width:none;display:grid;gap:48px;align-items:center;
    grid-template-columns:minmax(0,1fr) 390px;
    grid-template-rows:repeat(4,auto);   /* so the figure has rows to span */
  }
  .sec-head--fig .eyebrow,.sec-head--fig h2,.sec-head--fig p{grid-column:1;max-width:680px}
  .sec-head--fig .qt-figure{grid-column:2;grid-row:1/-1;align-self:center;justify-self:end;margin-top:0}
}
@media(max-width:640px){
  .feat-art{height:42px}
}
@media(prefers-reduced-motion:reduce){
  .feat-art .svc-accent{opacity:1}
}
/* a figure that belongs to the whole section, not one column of it */
.fig-wide{grid-column:1/-1;justify-self:center;width:100%;display:flex;justify-content:center}
.fig-wide .qt-figure{margin-top:14px}
/* the six area diagrams share one grid cell, so selecting never resizes the panel */
.area-art{display:grid;margin-top:22px;padding-top:18px;border-top:1px solid var(--border-dark)}
.area-art svg{
  grid-area:1/1;width:100%;max-width:320px;height:auto;justify-self:start;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease);
}
.area-art svg.is-on{opacity:1;visibility:visible}

/* Figures resolve once, as their section scrolls in. Nothing loops. */
.qt-figure .svc-accent{opacity:.7;transition:opacity .5s var(--ease) .25s}
.qt-figure .svc-draw{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .55s var(--ease) .4s}
.qt-figure .qt-trace{stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset .9s var(--ease) .15s}
.rv-in .qt-figure .svc-accent{opacity:1}
.rv-in .qt-figure .svc-draw{stroke-dashoffset:0}
.rv-in .qt-figure .qt-trace{stroke-dashoffset:0}

.qt-mark .svc-accent{opacity:.75;transition:opacity .22s var(--ease)}
.feature:hover .qt-mark .svc-accent{opacity:1}

@media(max-width:640px){
  .qt-figure{margin-top:22px}
  .qt-mark{width:30px;height:30px}
}

@media(prefers-reduced-motion:reduce){
  .qt-figure .svc-draw,.qt-figure .qt-trace{stroke-dashoffset:0}
  .qt-figure .svc-accent,.qt-figure .svc-draw-t{opacity:1}
}

/* ---------- Service card technical sketches ---------- */

.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.card-head .kicker{margin-bottom:0}
.svc-art{height:52px;width:auto;flex:none}
/* At rest the yellow reads as a quiet accent; hover strengthens it and draws
   in the one mark that names what the service actually does. */
.svc-art .svc-accent{opacity:.7;transition:opacity .22s var(--ease)}
.svc-art .svc-draw{stroke-dasharray:90;stroke-dashoffset:90;transition:stroke-dashoffset .28s var(--ease)}
.card:hover .svc-accent,.card:focus-within .svc-accent{opacity:1}
.card:hover .svc-draw,.card:focus-within .svc-draw{stroke-dashoffset:0}

@media(max-width:640px){
  .svc-art{height:44px}
}

@media(prefers-reduced-motion:reduce){
  .svc-art .svc-draw{stroke-dashoffset:0}
}

/* ==========================================================================
   HOMEPAGE SUPPORTING DETAIL
   Technical accents only. The turbine hero stays the single strong visual;
   everything below it stays editorial.
   ========================================================================== */

/* Faint partial component drawing sitting behind the copy. */
.tech-section{position:relative;overflow:hidden}
.tech-section .shell{position:relative;z-index:1}
.tech-bg{position:absolute;pointer-events:none;opacity:.07}
.tech-bg svg{width:100%;height:auto;display:block}
.tech-bg-right{top:50%;right:-70px;transform:translateY(-50%);width:min(560px,48%)}
.tech-bg-left{top:50%;left:-80px;transform:translateY(-50%);width:min(430px,40%)}

/* One small inspection motif. Deliberately the only mark in this section. */
.hw-motif{width:180px;height:auto;margin-top:24px;display:block}

/* The four pieces, drawn as a process trace rather than a workflow diagram. */
.flow-chain{
  list-style:none;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-top:52px;
}
.flow-node{
  position:relative;
  padding:28px 20px 22px;
  border:1px solid var(--border-dark);
  border-radius:4px;
  background:var(--card-dark);
}
/* the junction marker each segment runs between */
.fn-terminal{
  position:absolute;top:-5px;left:50%;
  width:9px;height:9px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--black);border:1.5px solid var(--yellow);
}
/* the trace itself, drawn from this terminal to the next */
.flow-node::after{
  content:"";position:absolute;top:-1px;
  left:calc(50% + 9px);right:calc(-50% - 11px);
  height:1px;background:var(--yellow);opacity:.45;
}
.flow-node::before{
  content:"";position:absolute;top:-4.5px;right:calc(-50% - 11px);
  width:0;height:0;
  border-left:5px solid var(--yellow);
  border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent;
  opacity:.55;
}
.flow-node:last-child::after,.flow-node:last-child::before{display:none}
.fn-code{display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;color:var(--yellow);margin-bottom:10px}
.flow-node b{display:block;color:var(--white);font-size:1rem;line-height:1.25;margin-bottom:8px}
.flow-node p{font-size:.89rem;line-height:1.5;color:var(--light-gray)}
.flow-note{margin-top:30px;font-size:.98rem;font-weight:600;color:var(--warm-white);max-width:none}

/* Small technical marks in the three paired cards. */
.pair .p-mark{width:22px;height:22px;display:block;margin-bottom:14px}

@media(max-width:900px){
  /* The background drawing is decoration, so it goes first on small screens. */
  .tech-bg{display:none}
  /* Chain runs top to bottom, so the trace turns with it. */
  .flow-chain{grid-template-columns:1fr;gap:28px;margin-top:40px}
  .flow-node::after{
    top:auto;bottom:-28px;left:50%;right:auto;
    width:1px;height:28px;transform:translateX(-50%);
  }
  .flow-node::before{
    top:auto;bottom:-16px;right:auto;left:50%;
    transform:translateX(-50%);
    border-left:3.5px solid transparent;
    border-right:3.5px solid transparent;
    border-top:5px solid var(--yellow);
    border-bottom:none;
  }
}

@media(max-width:640px){
  .hw-motif{width:150px}
}

/* ---------- Home: the experience behind InnerLAB ---------- */

.exp-track{
  list-style:none;position:relative;margin-top:44px;padding-top:30px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
.exp-track::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#3A3B40}
.exp-track::after{
  content:"";position:absolute;top:-1px;left:0;right:0;height:3px;
  background:var(--yellow);transform:scaleX(1);transform-origin:left;
  transition:transform 1.6s var(--ease) .3s;
}
.rv:not(.rv-in).exp-track::after{transform:scaleX(0);transition:none}
.exp-track li{position:relative;padding-right:32px}
.exp-track li::before{
  content:"";position:absolute;top:-22px;left:0;width:10px;height:10px;
  border:1.5px solid var(--yellow);background:var(--graphite);border-radius:2px;
}
.exp-track b{
  display:block;font-size:.76rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:10px;
}
.exp-track span{display:block;font-size:1.05rem;line-height:1.45;color:var(--white)}

.exp-close{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  margin-top:52px;padding-top:28px;border-top:1px solid var(--border-dark);
}
.exp-close p{
  font-size:clamp(1.05rem,2vw,1.32rem);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--white);
}

@media(max-width:860px){
  .exp-track{grid-template-columns:minmax(0,1fr);row-gap:26px;padding-top:0}
  .exp-track::before,.exp-track::after{display:none}
  .exp-track li{padding:0 0 0 18px;border-left:2px solid var(--yellow)}
  .exp-track li::before{display:none}
}

/* ==========================================================================
   HERO INTERACTIONS
   ========================================================================== */

/* ---------- 1. Home: Turbine inspection drawing ----------
   Everything is authored fully visible. JS "arms" the panel (sets inline opacity)
   only once it knows it can animate, so a no-JS or failed-JS page still shows the
   complete drawing with all three findings, never an empty box. */

.tb-stage{aspect-ratio:4/3}
.tb-stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}

#tb-primary,#tb-detail,#tb-construction,#tb-titleblock,#tb-scan,.tb-ind{
  transition:opacity .85s var(--ease);
}

/* Marker numerals stay on the drawing at every width, and grow once the written
   labels move out to the legend. */
.tb-num{font-size:15px;font-weight:500}

/* Findings: hovering one brightens it and dims the others (JS drives the opacity,
   this class carries the non-conflicting emphasis). */
.tb-ind{cursor:default}
.tb-ind .tb-leader{transition:stroke-width .25s var(--ease)}
.tb-ind.tb-hot .tb-leader{stroke-width:2}

/* Status readout */
.tb-status{
  position:absolute;top:14px;right:14px;
  font-family:var(--font);
  font-size:.7rem;
  letter-spacing:.14em;
  color:var(--light-gray);
  background:rgba(10,10,10,.82);
  border:1px solid var(--border-dark);
  border-radius:3px;
  padding:7px 11px;
  pointer-events:none;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.tb-status.done{color:var(--yellow);border-color:rgba(255,213,31,.6)}

/* Findings legend: the accessible text alternative on desktop, and the readable
   replacement for the in-drawing labels on small screens. */
.tb-legend{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.tb-legend li{display:flex;gap:12px;align-items:baseline}
.tb-legend .n{color:var(--yellow);font-family:var(--font);font-size:.7rem;flex:none}
.tb-legend .t{font-size:.82rem;color:var(--light-gray)}
.tb-legend .t b{color:var(--warm-white);font-weight:600}

@media(max-width:1080px){
  /* Once the hero stacks to one column, keep the drawing from dominating the page. */
  .hero-stage{max-width:660px}
}

@media(max-width:900px){
  /* Simplify rather than shrink: drop construction detail, and move the label text
     out of the drawing into a legible legend beneath it. */
  .tb-dense{display:none}
  .tb-labeltext{display:none}
  .tb-num{font-size:24px}
  .tb-legend{
    position:static;width:auto;height:auto;padding:16px 0 0;margin:0;
    overflow:visible;clip:auto;white-space:normal;
    display:grid;gap:9px;
  }
}

@media(max-width:620px){
  /* On a phone the title block cannot be shrunk and stay readable, so it steps
     aside and the legend carries the revision mismatch in full words instead. */
  .tb-narrow-hide{display:none}
  .tb-num{font-size:30px}
}

/* ---------- 2. Quality Training: Requirement Translator ---------- */

.translator{display:grid;min-height:340px}
.tr-example{
  grid-area:1/1;
  display:grid;grid-template-columns:minmax(0,1fr) 3px minmax(0,1fr);
  visibility:hidden;opacity:0;
  transition:opacity .35s var(--ease);
}
.tr-example.is-active{visibility:visible;opacity:1}
.tr-left{padding:26px 24px;background:var(--card-dark)}
.tr-left .clause{
  font-family:var(--font);
  font-size:.78rem;
  line-height:1.75;
  color:var(--light-gray);
}
.tr-left .clause-id{color:var(--yellow);display:block;margin-bottom:10px;font-size:.68rem;letter-spacing:.16em}
.tr-rule{background:var(--border-dark);position:relative}
.tr-rule i{
  position:absolute;top:0;left:0;width:100%;height:0;
  background:var(--yellow);
  transition:height 1.1s var(--ease);
}
/* Reset instantly on a tab switch so the sweep never runs backwards.
   The marker and the blocks it reveals must reset together, or the copy
   stays lit while the rule replays and the sequence reads inverted. */
.translator:not(.swept) .tr-rule i,
.translator:not(.swept) .tr-right .tr-block{transition:none}
.translator.swept .tr-rule i{height:100%}
.tr-right{padding:26px 24px;position:relative}
.tr-right .tr-block{
  opacity:0;transform:translateY(6px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.translator.swept .tr-right .tr-block{opacity:1;transform:none}
.translator.swept .tr-right .tr-block:nth-child(2){transition-delay:.3s}
.translator.swept .tr-right .tr-block:nth-child(3){transition-delay:.55s}
.tr-right h3{font-size:.95rem;margin-bottom:8px}
.tr-right .tr-block + .tr-block{margin-top:15px}
.tr-stage-label{font-size:.8rem;color:var(--warm-white);margin:0 0 8px}
.tr-badge{
  margin-left:auto;align-self:center;
  font-size:.56rem;letter-spacing:.16em;
  color:var(--yellow);
  background:rgba(255,213,31,.08);
  border:1px solid rgba(255,213,31,.3);
  border-radius:3px;padding:4px 8px;white-space:nowrap;
}
.tr-right p{font-size:.87rem;line-height:1.5;color:var(--light-gray)}
.tr-right .aud{color:var(--yellow)}
.tr-tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border-dark);background:var(--graphite)}
.tr-tabs button{
  font-family:var(--font);font-size:.68rem;letter-spacing:.14em;
  background:none;border:1px solid var(--border-dark);border-radius:3px;
  color:var(--light-gray);padding:7px 12px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.tr-tabs button[aria-selected="true"]{border-color:var(--yellow);color:var(--yellow)}

/* ---------- 3. NDT Training: Method Bench ---------- */

.bench-tabs{display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border-dark);background:var(--graphite);flex-wrap:wrap}
.bench-tabs button{
  font-family:var(--font);font-size:.72rem;letter-spacing:.16em;
  background:none;border:1px solid var(--border-dark);border-radius:3px;
  color:var(--light-gray);padding:8px 16px;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.bench-tabs button[aria-selected="true"]{border-color:var(--yellow);color:var(--text);background:var(--yellow)}
.bench-body{position:relative}
.bench-body svg{display:block;width:100%;height:auto}
.bench-status{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 18px;border-top:1px solid var(--border-dark);
  font-family:var(--font);font-size:.68rem;letter-spacing:.12em;color:var(--gray);
}
.bench-status .det{color:var(--gray);transition:color .3s var(--ease)}
.bench-status .det.hot{color:var(--yellow)}

/* ---------- 4. Auditing: Pull the Thread ---------- */

.thread-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:0}
.thread-grid-outer{position:relative;padding:22px;border-right:1px solid var(--border-dark)}
.thread-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;z-index:2}
.tile{
  position:relative;
  background:var(--card-dark);
  border:1px solid var(--border-dark);
  border-radius:4px;
  padding:14px 12px 12px;
  text-align:left;
  color:var(--warm-white);
  transition:border-color .3s var(--ease);
  min-height:74px;
}
.tile:hover{border-color:#4A4A4A}
.tile.active{border-color:var(--yellow)}
.tile.bad{border-color:var(--alert)}
.tile .t-code{font-family:var(--font);font-size:.6rem;letter-spacing:.1em;color:var(--gray);display:block;margin-bottom:5px}
.tile .t-name{font-size:.8rem;font-weight:600;line-height:1.25;display:block}
.tile .t-dot{
  position:absolute;top:12px;right:12px;
  width:7px;height:7px;border-radius:50%;
  background:var(--verified);
  transition:background .3s var(--ease);
}
.tile.bad .t-dot{background:var(--alert)}
.thread-svg{position:absolute;inset:22px;z-index:3;pointer-events:none;overflow:visible}
.thread-svg line{
  stroke:var(--yellow);stroke-width:1.5;
  stroke-dasharray:400;stroke-dashoffset:400;
  transition:stroke-dashoffset .8s var(--ease);
}
.thread-svg line.drawn{stroke-dashoffset:0}
.thread-svg line.bad{stroke:var(--alert)}
.thread-inspector{padding:24px 22px;display:flex;flex-direction:column;gap:12px}
.thread-inspector .ti-label{font-family:var(--font);font-size:.64rem;letter-spacing:.2em;color:var(--gray)}
.thread-inspector .ti-title{font-weight:700;color:var(--white);font-size:1.02rem;line-height:1.3}
.thread-inspector .ti-title.bad{color:#F08070}
.thread-inspector p{font-size:.88rem;color:var(--light-gray)}
.thread-inspector .ti-req{
  font-family:var(--font);font-size:.7rem;line-height:1.6;
  border:1px dashed var(--border-dark);border-radius:3px;
  padding:12px;color:var(--light-gray);
}
.thread-inspector .ti-req.bad{border-color:var(--alert);color:#F08070}

/* ---------- 5. Level III: The Inbox ---------- */

.inbox{min-height:380px;display:flex;flex-direction:column}
.inbox-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--border-dark);background:var(--graphite);
  font-family:var(--font);font-size:.68rem;letter-spacing:.16em;color:var(--gray);
}
.inbox-count{color:var(--yellow)}
.inbox-list{list-style:none;padding:18px 20px;display:grid;gap:10px;transition:opacity .8s var(--ease),filter .8s var(--ease)}
.inbox-list li{
  display:flex;gap:14px;align-items:baseline;
  background:var(--card-dark);
  border:1px solid var(--border-dark);
  border-left:2px solid var(--yellow);
  border-radius:3px;
  padding:12px 16px;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.inbox-list li.in{opacity:1;transform:none}
.inbox-list li .t{font-family:var(--font);font-size:.7rem;color:var(--yellow);flex-shrink:0}
.inbox-list li .m{font-size:.9rem;color:var(--warm-white)}
.inbox.receded .inbox-list{opacity:.14;filter:blur(1px)}
.inbox-closer{
  position:absolute;inset:0;top:auto;bottom:0;height:calc(100% - 47px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:30px;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .8s var(--ease);
}
.inbox.receded .inbox-closer{opacity:1;pointer-events:auto}
.inbox-closer p{
  font-size:clamp(1.15rem,2.2vw,1.5rem);
  font-weight:600;color:var(--white);max-width:22em;
}
/* The first question is a worked example, so it is a real control. */
.inbox-open{
  display:flex;gap:14px;align-items:baseline;width:100%;
  background:none;border:none;padding:0;text-align:left;color:inherit;font:inherit;
}
.inbox-open .cue{
  margin-left:auto;flex:none;
  font-size:.56rem;letter-spacing:.16em;color:var(--yellow);
  border:1px solid rgba(255,213,31,.4);border-radius:3px;padding:3px 7px;
  opacity:0;transition:opacity .4s var(--ease);
}
.inbox.receded .inbox-open .cue{opacity:1}
.inbox-open:hover .cue{background:rgba(255,213,31,.12)}

/* Opening a question works it through in place: the rest step back,
   the chosen one stays, and the reasoning grows out of it. */
.inbox--path .inbox-closer{display:none}
.inbox--path .inbox-list{opacity:1;filter:none;transition:opacity .4s var(--ease),filter .4s var(--ease)}
.inbox--path .inbox-list li:not(.is-open){opacity:0;transform:translateY(-4px);pointer-events:none}
/* removed from the flow only after they have finished stepping back */
.inbox-list li.is-gone{display:none}
.inbox--path .inbox-list li.is-open{opacity:1;background:#202024;border-left-width:2px}
.inbox--path .inbox-list li.is-open .cue{opacity:0}
/* the line that carries the question down into the reasoning */
.inbox--path .inbox-list li.is-open::after{
  content:"";position:absolute;left:21px;top:100%;width:2px;height:14px;
  background:linear-gradient(180deg,var(--yellow),rgba(255,213,31,.15));
}
.inbox-list li{position:relative}
/* the question is already on screen, so the panel does not repeat it */
.inbox--path .dpath-q{display:none}
.dpath{position:relative;padding:20px 22px 24px;display:flex;flex-direction:column;gap:14px;transition:max-height .5s var(--ease)}
.dpath-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--border-dark);
  font-size:.68rem;letter-spacing:.16em;color:var(--gray);
}
.dpath-head button{
  background:none;border:none;color:var(--yellow);cursor:pointer;
  font-size:.62rem;letter-spacing:.14em;
  text-decoration:underline;text-underline-offset:3px;
}
.dpath-q{font-size:.98rem;font-weight:600;color:var(--white);max-width:none}
.dpath-rail{position:absolute;left:22px;width:34px;pointer-events:none}
.dpath-rail svg{display:block;overflow:visible}
.dp-progress{transition:stroke-dashoffset 1.1s var(--ease) .45s}
.dp-live{transition:transform 1.1s var(--ease) .45s}
.dpath-steps{list-style:none;display:grid;gap:11px;position:relative}
.dpath-steps li{position:relative;padding-left:44px}
.dpath-steps .s-label{display:block;font-size:.66rem;letter-spacing:.14em;color:var(--warm-white)}
.dpath-steps .s-detail{display:block;font-size:.83rem;line-height:1.5;color:var(--light-gray);margin-top:3px}
.dpath-closer{
  margin-top:2px;padding-top:14px;border-top:1px solid var(--border-dark);
  font-size:.9rem;font-weight:600;color:var(--white);max-width:none;
}

@media(max-width:640px){
  .dpath{padding:16px 16px 20px}
  .dpath-steps .s-detail{font-size:.8rem}
  .inbox-open .cue{display:none}
}

/* ---------- 6. Technical Support: The Draft ---------- */

.draft{display:grid;grid-template-columns:1fr 1fr}
.draft-pane{padding:20px;min-width:0}
.draft-pane.before{border-right:1px solid var(--border-dark);background:var(--card-dark)}
.draft-pane h4{
  font-family:var(--font);font-size:.64rem;font-weight:500;
  letter-spacing:.2em;color:var(--gray);margin-bottom:14px;
}
.draft-pane.after h4{color:var(--yellow)}
.draft-doc{font-family:var(--font);font-size:.74rem;line-height:1.8;color:var(--light-gray)}
.draft-doc .ln{display:block;margin-bottom:10px}
.flag{
  background:rgba(217,67,43,.14);
  color:#F0A093;
  border-bottom:1px dashed var(--alert);
  padding:0 2px;
  position:relative;
}
.flag-tag{
  font-size:.58rem;
  letter-spacing:.12em;
  color:var(--alert);
  border:1px solid var(--alert);
  border-radius:2px;
  padding:1px 5px;
  margin-left:6px;
  white-space:nowrap;
}
/* Authored complete. The script hides the lines only once it has confirmed
   it can bring them back, so the pane is never blank without JavaScript. */
.draft-pane.after .ln{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.draft-armed .draft-pane.after .ln{opacity:0;transform:translateY(4px)}
.draft-armed .draft-pane.after .ln.in{opacity:1;transform:none}
.draft-pane.after .fix{color:#BFE8CF}
.draft-head{display:flex;justify-content:flex-end;align-items:center;min-height:22px;margin-bottom:7px}
/* both headings reserve two lines, so the two documents always line up */
.draft-pane h4{min-height:3.2em}
/* the example values must never be mistaken for a universal requirement */
.ex-badge{
  flex:none;
  font-size:.52rem;letter-spacing:.14em;color:var(--yellow);
  background:rgba(255,213,31,.08);border:1px solid rgba(255,213,31,.3);
  border-radius:3px;padding:3px 6px;white-space:nowrap;
}
.draft-bar{height:3px;background:var(--border-dark);border-radius:2px;overflow:hidden}
/* what the reviewer is doing to the line that is landing */
.draft-step{
  font-family:var(--font);font-size:.58rem;letter-spacing:.15em;
  color:var(--gray);margin:9px 0 15px;min-height:1.1em;
}
.draft-step .n{color:var(--yellow);margin-right:7px}
.draft-step.is-gap{color:#B08A82}
.draft-step.is-gap .n{color:var(--alert)}
.draft-note{
  font-family:var(--font);font-size:.55rem;line-height:1.7;letter-spacing:.06em;
  color:var(--gray);margin-top:16px;padding-top:12px;
  border-top:1px solid var(--border-dark);
}
.draft-bar i{display:block;height:100%;width:100%;background:var(--yellow);transition:width .5s var(--ease)}
.draft-armed .draft-bar i{width:0}
.draft-toggle{display:none;gap:8px;padding:12px 18px;border-bottom:1px solid var(--border-dark);background:var(--graphite)}
.draft-toggle button{
  font-family:var(--font);font-size:.66rem;letter-spacing:.16em;
  background:none;border:1px solid var(--border-dark);border-radius:3px;
  color:var(--light-gray);padding:7px 14px;
}
.draft-toggle button[aria-selected="true"]{border-color:var(--yellow);color:var(--yellow)}

/* ---------- Level III: mentoring area selector ---------- */

.areas{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:28px;margin-top:44px}
.area-tabs{display:flex;flex-direction:column;gap:8px}
.area-tabs button{
  font-family:var(--font);
  font-size:.74rem;
  letter-spacing:.1em;
  text-align:left;
  background:var(--card-dark);
  border:1px solid var(--border-dark);
  border-radius:3px;
  color:var(--light-gray);
  padding:14px 16px;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.area-tabs button:hover{border-color:#4A4A4A}
.area-tabs button[aria-selected="true"]{border-color:var(--yellow);color:var(--yellow)}
.area-tabs button .n{color:var(--gray);margin-right:10px}
.area-tabs button[aria-selected="true"] .n{color:var(--yellow)}
.area-panel{
  position:relative;
  border:1px solid var(--border-dark);
  background:var(--card-dark);
  border-radius:4px;
  padding:34px 32px;
  overflow:hidden;
}
.area-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--yellow)}
.area-panel .kicker{font-size:.68rem;font-weight:600;letter-spacing:.14em;color:var(--gray);display:block;margin-bottom:12px}
.area-panel h3{margin-bottom:14px}
.area-panel .hook{font-weight:600;color:var(--white);margin-bottom:12px}
.area-panel p{font-size:.95rem;margin-bottom:12px}
.area-panel p:last-child{margin-bottom:0}

@media(max-width:860px){
  .areas{grid-template-columns:1fr}
  .area-tabs{flex-direction:row;flex-wrap:wrap}
  .area-tabs button{flex:1 1 45%}
}


/* ---------- Responsive ---------- */

@media(max-width:1080px){
  .nav-burger{display:block}
  .site-nav{
    display:none;
    position:fixed;inset:0;top:78px;
    background:var(--black);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    padding:28px 24px;gap:4px;
    z-index:99;
    overflow-y:auto;
  }
  body.nav-open .site-nav{display:flex}
  body.nav-open{overflow:hidden}
  .site-nav a{font-size:1.2rem;padding:16px 8px;border-bottom:1px solid var(--border-dark)}
  .nav-group{display:block;position:static}
  .nav-trigger{
    width:100%;justify-content:space-between;
    font-size:1.2rem;padding:16px 8px;
    border-bottom:1px solid var(--border-dark);
  }
  .nav-caret{margin-top:-4px}
  .nav-menu{
    position:static;min-width:0;padding:2px 0 6px 16px;
    background:none;border:0;box-shadow:none;
  }
  .nav-menu a{font-size:1.02rem;padding:13px 8px}
  .nav-menu a:hover{background:none}
  .nav-menu a[aria-current="page"]{background:none}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .thread-wrap{grid-template-columns:1fr}
  .thread-grid-outer{border-right:none;border-bottom:1px solid var(--border-dark)}
}

@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:36px}
  .grid-3{grid-template-columns:1fr 1fr}
  .pair-grid{grid-template-columns:1fr}
  .cta-inner{flex-direction:column;align-items:flex-start}
}

@media(max-width:768px){
  .sec{padding:72px 0}
  .hero{padding:56px 0 64px}
  .draft{grid-template-columns:1fr}
  .draft-pane{grid-area:1/1}   /* the taller version sets the height for both */
  /* the shorter version puts its closing note at the foot rather than
     leaving a block of empty card under the text */
  .draft-pane{display:flex;flex-direction:column}
  .draft-pane .draft-note{margin-top:auto}
  .draft-pane.before{border-right:none}
  .draft-toggle{display:flex}
  .draft.show-after .draft-pane.before{visibility:hidden}
  .draft:not(.show-after) .draft-pane.after{visibility:hidden}
  .translator{min-height:0}
  .tr-example{grid-template-columns:1fr}
  .tr-rule{display:none}
  .tr-right{border-top:2px solid var(--yellow)}
}

@media(max-width:640px){
  .grid-2,.grid-3,.feature-list,.form-grid{grid-template-columns:1fr}
  .form-grid .field-full{grid-column:auto}
  .footer-grid{grid-template-columns:1fr}
  .thread-grid{gap:9px}
  .tile{padding:10px 9px 9px;min-height:64px}
  .tile .t-name{font-size:.7rem}
  .tile .t-code{font-size:.53rem}
  .tb-status{top:10px;right:10px;font-size:.62rem;padding:5px 8px}
  .bench-tabs button{padding:7px 11px;font-size:.66rem}
}

/* ==========================================================================
   BLOG (public)
   ========================================================================== */

.post-card{padding:0;display:flex;flex-direction:column}
.post-card-img img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--border)}
.post-card .post-meta{padding:22px 24px 0;margin-bottom:10px}
.post-card h3{padding:0 24px}
.post-card h3 a:hover{color:var(--yellow-text)}
.post-card > p{padding:0 24px;margin-top:10px}
.post-card .card-link{margin:16px 24px 24px}

.post-meta{display:flex;gap:14px;align-items:baseline;font-size:.66rem;letter-spacing:.16em}
.post-meta .post-cat{color:var(--yellow)}
.sec-light .post-meta .post-cat{color:var(--yellow-text)}
.post-meta .post-date{color:var(--gray)}

.post-article .post-shell{max-width:780px}
.post-article h1{margin:10px 0 16px}
.post-article .post-desc{font-size:1.12rem;color:var(--light-gray);margin-bottom:28px}
.post-figure{margin:0 0 30px}
.post-figure img{width:100%;border-radius:6px;border:1px solid var(--border-dark)}
.post-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.post-tags .tag{border:1px solid var(--border-dark);border-radius:3px;padding:4px 10px;font-size:.62rem;letter-spacing:.14em;color:var(--light-gray)}
.post-back{margin-top:34px}

.prose{color:#C9C8C4}
.prose p{margin:16px 0;max-width:none}
.prose h2,.prose h3,.prose h4{color:var(--white);margin:34px 0 12px}
.prose h2{font-size:1.5rem}
.prose h3{font-size:1.2rem}
.prose h4{font-size:1.02rem}
.prose ul,.prose ol{margin:16px 0;padding-left:24px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:8px 0}
.prose blockquote{border-left:3px solid var(--yellow);padding:6px 0 6px 18px;margin:22px 0;color:var(--light-gray)}
.prose code{font-family:var(--font);font-size:.85em;background:#111;border:1px solid var(--border-dark);border-radius:3px;padding:1px 6px}
.prose pre{background:#111;border:1px solid var(--border-dark);border-radius:5px;padding:16px;overflow-x:auto;margin:22px 0}
.prose pre code{border:none;background:none;padding:0}
.prose img{border-radius:5px;border:1px solid var(--border-dark);margin:22px 0}
.prose a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}
.prose hr{border:none;border-top:1px solid var(--border-dark);margin:30px 0}

.preview-banner{
  position:sticky;top:0;z-index:90;
  background:var(--yellow);color:var(--text);
  text-align:center;padding:10px 16px;
  font-size:.66rem;letter-spacing:.18em;
}

/* ==========================================================================
   ADMIN (InnerLAB Studio: dark sidebar, light workspace)
   ========================================================================== */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.adm-body{background:var(--warm-white);color:var(--text)}
.adm-body .mono{font-family:var(--font)}

/* ---------- Sidebar ---------- */

.adm-side{
  position:fixed;top:0;bottom:0;left:0;width:232px;
  background:var(--black);
  display:flex;flex-direction:column;
  padding:24px 16px 20px;
  z-index:60;
}
.adm-brand{display:flex;flex-direction:column;gap:7px;padding:0 8px;color:var(--warm-white)}
.adm-brand img{width:132px;height:auto}
.adm-brand .mono{font-size:.6rem;letter-spacing:.34em;color:var(--yellow)}
.adm-nav{display:flex;flex-direction:column;gap:4px;margin-top:34px}
.adm-nav a,.adm-signout{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:7px;
  color:var(--light-gray);font-size:.92rem;font-weight:500;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.adm-nav a svg,.adm-signout svg{width:17px;height:17px;flex:none}
.adm-nav a:hover,.adm-signout:hover{background:var(--card-dark);color:var(--warm-white)}
.adm-nav a[aria-current="page"]{background:var(--card-dark);color:var(--yellow);box-shadow:inset 2px 0 0 var(--yellow)}
.adm-signout{margin-top:auto;color:var(--gray)}

.adm-main{margin-left:232px;min-height:100vh}
.adm-wrap{max-width:1200px;margin:0 auto;padding:32px 32px 90px}
.adm-main h1,.adm-main h2,.adm-main h3{color:var(--text)}

/* ---------- Auth screens (dark, centered) ---------- */

.adm-auth{background:var(--black)}
.adm-auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.adm-auth-card{
  width:min(440px,94vw);
  background:var(--graphite);
  border:1px solid var(--border-dark);
  border-radius:12px;
  padding:38px 34px;
}
.adm-auth-card h1{font-size:1.45rem;color:var(--white);margin:4px 0 0}
.adm-auth-logo{width:150px;margin-bottom:20px}
.adm-auth-card .adm-help{color:var(--light-gray);margin:12px 0 20px}
.adm-auth-card .field{margin-bottom:16px}
.adm-wide-btn{width:100%;margin-top:6px}
.adm-auth-card .adm-alert{background:none;border:1px solid var(--alert);color:#F0A093}

/* ---------- Shared light-workspace bits ---------- */

.adm-body .btn{text-transform:none;letter-spacing:.02em;font-size:.86rem;padding:11px 18px;border-radius:8px}
.btn-ghost-l{background:var(--white);border:1px solid var(--border);color:var(--text)}
.btn-ghost-l:hover{border-color:#B8B8B8}

.adm-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:24px}
.adm-card-eyebrow{
  display:flex;align-items:center;gap:8px;
  font-size:.64rem;font-weight:500;letter-spacing:.18em;
  color:var(--gray);margin-bottom:16px;
}
.adm-card-eyebrow svg{width:15px;height:15px;color:var(--yellow-text)}

.adm-help{font-size:.8rem;color:var(--gray);line-height:1.55;margin-top:10px}
.adm-inline-help{font-weight:400;font-size:.76rem;color:var(--gray)}

.adm-ok,.adm-alert,.adm-restore{border-radius:9px;padding:13px 16px;font-size:.9rem;margin-bottom:18px}
.adm-ok{background:rgba(62,158,107,.09);border:1px solid rgba(62,158,107,.4);color:#2E7A52}
.adm-alert{background:rgba(217,67,43,.06);border:1px solid rgba(217,67,43,.4);color:#A8351F}
.adm-alert ul{margin:8px 0 0 18px;list-style:disc}
.adm-alert li{margin:4px 0}
.adm-restore{background:rgba(217,160,43,.1);border:1px solid rgba(217,160,43,.45);color:#7A5606;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}

.adm-mini{font-family:var(--font);font-size:.64rem;letter-spacing:.1em;color:var(--yellow-text);background:none;border:none;padding:0;cursor:pointer}
.adm-mini:hover{text-decoration:underline;text-underline-offset:3px}
.adm-mini-danger{color:var(--alert)}

/* Light inputs inside the workspace */
.adm-main .field label{
  font-family:var(--font);font-size:.84rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--text);margin-bottom:7px;
}
.adm-main .field input,.adm-main .field select,.adm-main .field textarea{
  background:var(--white);border:1px solid var(--border);color:var(--text);
  border-radius:8px;
}
.adm-main .field input:focus,.adm-main .field select:focus,.adm-main .field textarea:focus{border-color:#C9A227;outline:none}
.adm-main .field input[type="date"]{color-scheme:light}
.adm-main .field textarea{min-height:64px}
.adm-main .desc-count{text-align:right}
.adm-main :focus-visible{outline-color:var(--yellow-text)}
.adm-main .field{margin-bottom:18px}

.adm-main .desc-count{color:var(--gray)}
.adm-main .desc-count.ok{color:#2E7A52}
.adm-main .desc-count.bad{color:#B07C10}

/* ---------- Dashboard ---------- */

.adm-banner{
  background:linear-gradient(120deg,var(--black),var(--graphite));
  border-radius:14px;
  padding:30px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  margin-bottom:20px;flex-wrap:wrap;
}
.adm-banner h1{font-size:1.65rem;color:var(--white)}
.adm-banner p{color:var(--light-gray);font-size:.94rem;margin-top:6px}

.adm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px}
.adm-stat{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:20px 22px;display:flex;align-items:center;gap:16px}
.adm-stat-tile{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
.adm-stat-tile svg{width:21px;height:21px}
.tile-yellow{background:rgba(255,213,31,.2);color:var(--yellow-text)}
.tile-green{background:rgba(62,158,107,.13);color:var(--verified)}
.tile-amber{background:rgba(217,160,43,.15);color:#B07C10}
.adm-stat b{display:block;font-size:1.55rem;line-height:1.05}
.adm-stat span{font-size:.78rem;color:var(--gray)}

.adm-posts{padding:0;overflow:hidden}
.adm-posts-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;flex-wrap:wrap}
.adm-posts-head h2{font-size:1.12rem}
.adm-count{font-size:.68rem;background:var(--warm-white);border:1px solid var(--border);border-radius:999px;padding:2px 10px;color:var(--gray);margin-left:8px;vertical-align:2px}

.adm-filters{display:flex;gap:10px;padding:0 24px 18px;flex-wrap:wrap}
.adm-filters input,.adm-filters select{
  background:var(--white);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-family:var(--font);font-size:.86rem;padding:9px 12px;
}
.adm-filters input[type="search"]{flex:1;min-width:180px}
.adm-sort{
  font-size:.62rem;letter-spacing:.12em;color:var(--gray);
  background:var(--white);border:1px solid var(--border);border-radius:8px;
  padding:9px 13px;cursor:pointer;
}
.adm-sort:hover{color:var(--text)}

.adm-table-wrap{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse}
.adm-table th{
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);text-align:left;
  padding:11px 24px;background:var(--warm-white);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.adm-table td{padding:15px 24px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:.9rem}
.adm-table tr:last-child td{border-bottom:none}
.adm-post-title{font-weight:600;color:var(--text)}
.adm-post-title:hover{color:var(--yellow-text)}
.adm-post-slug{display:block;font-size:.68rem;color:var(--gray);margin-top:3px}
.adm-td-updated{font-size:.72rem;color:var(--gray);white-space:nowrap}

.adm-pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:4px 11px;font-size:.72rem;font-weight:600;white-space:nowrap}
.adm-pill i{width:7px;height:7px;border-radius:50%;flex:none}
.adm-pill-cat{background:var(--warm-white);border:1px solid var(--border);color:#4A4A45}
.adm-pill-live{background:rgba(62,158,107,.11);color:#2E7A52}
.adm-pill-live i{background:var(--verified)}
.adm-pill-draft{background:rgba(217,160,43,.13);color:#8F6508}
.adm-pill-draft i{background:#D9A02B}

.adm-td-actions{text-align:right}
.adm-actions{display:inline-flex;gap:4px;align-items:center}
.adm-inline{display:inline-flex}
.adm-icon-btn{
  width:34px;height:34px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid transparent;color:var(--gray);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.adm-icon-btn svg{width:16px;height:16px}
.adm-icon-btn:hover{background:var(--warm-white);border-color:var(--border);color:var(--text)}
.adm-icon-danger:hover{color:var(--alert)}
.adm-del-wrap{display:inline-flex;align-items:center}
.adm-del-confirm{display:inline-flex;align-items:center;gap:8px;padding:0 4px}
.adm-del-confirm .mono{font-size:.66rem;color:var(--alert)}

.adm-nomatch{text-align:center;color:var(--gray);padding:26px 24px !important}
.adm-empty{text-align:center;padding:64px 24px}
.adm-empty svg{width:38px;height:38px;color:#C9C8C2;margin:0 auto 4px}
.adm-empty h3{margin:12px 0 6px}
.adm-empty p{color:var(--gray);margin-bottom:20px}
.adm-posts > .adm-help{padding:14px 24px 20px;margin:0}

/* ---------- Editor ---------- */

.adm-edit-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.adm-crumb{font-size:.9rem;color:var(--gray)}
.adm-crumb a:hover{color:var(--text)}
.adm-crumb span{margin:0 8px;color:#C9C8C2}
.adm-crumb b{color:var(--text);font-weight:600}
.adm-edit-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-savestate{font-size:.62rem;letter-spacing:.1em;color:var(--gray)}

.adm-versions-wrap{position:relative}
.adm-versions-pop{
  position:absolute;right:0;top:calc(100% + 10px);
  background:var(--white);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 14px 34px rgba(20,20,10,.14);
  padding:6px;display:grid;gap:2px;min-width:240px;z-index:70;
}
.adm-versions-pop button{
  display:flex;gap:10px;align-items:baseline;text-align:left;
  padding:9px 12px;border-radius:7px;border:none;background:none;
  font-family:var(--font);font-size:.84rem;color:var(--text);cursor:pointer;
}
.adm-versions-pop button:hover{background:var(--warm-white)}
.adm-versions-pop .mono{font-size:.66rem;color:var(--yellow-text);flex:none}

.adm-edit-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}
.adm-edit-main{display:grid;gap:22px;min-width:0}
.adm-edit-side{display:grid;gap:22px;min-width:0}

.adm-title-input{font-size:1.4rem;font-weight:600;padding:13px 16px}

.adm-slug-group{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--white)}
.adm-slug-group:focus-within{border-color:#C9A227}
.adm-slug-prefix{display:flex;align-items:center;background:var(--warm-white);border-right:1px solid var(--border);padding:0 12px;font-size:.76rem;color:var(--gray);white-space:nowrap}
.adm-slug-group input{border:none !important;border-radius:0 !important;flex:1;min-width:0;font-size:.8rem}
.adm-slug-group input:focus{outline:none}

.adm-main .editor-toolbar{
  display:flex;gap:3px;flex-wrap:wrap;align-items:center;
  border:1px solid var(--border);border-bottom:none;border-radius:8px 8px 0 0;
  padding:7px 8px;background:var(--warm-white);margin-bottom:0;
}
.adm-main .editor-toolbar button{
  font-family:var(--font);font-size:.78rem;font-weight:600;letter-spacing:.01em;
  color:#4A4A45;background:none;border:1px solid transparent;border-radius:6px;
  padding:6px 10px;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease);
}
.adm-main .editor-toolbar button:hover{background:var(--white);border-color:var(--border);color:var(--text)}
.tb-sep{width:1px;align-self:stretch;background:var(--border);margin:3px 5px}
.adm-main #pf-body{
  border-radius:0 0 8px 8px;
  font-family:var(--font);font-size:.84rem;line-height:1.75;
  min-height:320px;resize:vertical;
}
.adm-main #pf-body.dropping,.adm-drop.dropping{border-color:#C9A227;background:#FFFBE8}
.adm-body-meta{display:flex;justify-content:space-between;gap:14px;margin-top:8px;flex-wrap:wrap}
.adm-body-meta .mono{font-size:.62rem;letter-spacing:.08em;color:var(--gray)}
.adm-md-hint{opacity:.75}

/* Segmented publish control */
.adm-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:9px;overflow:hidden;background:var(--warm-white)}
.adm-seg input{position:absolute;opacity:0;pointer-events:none}
.adm-seg label{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 8px;font-size:.86rem;font-weight:600;color:var(--gray);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.adm-seg label i{width:7px;height:7px;border-radius:50%;background:#C9C8C2;flex:none}
.adm-seg #st-pub:checked ~ label[for="st-pub"],
.adm-seg #st-pub:checked + label{background:var(--black);color:var(--warm-white)}
.adm-seg #st-pub:checked + label i{background:var(--verified)}
.adm-seg #st-draft:checked + label{background:var(--black);color:var(--warm-white)}
.adm-seg #st-draft:checked + label i{background:#D9A02B}
.adm-seg input:focus-visible + label{outline:2px solid var(--yellow-text);outline-offset:-2px}

/* Readiness checklist */
.adm-ready{margin-top:18px;border-top:1px solid var(--border);padding-top:16px}
.adm-ready ul{display:grid;gap:8px}
.adm-ready li{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--gray)}
.adm-ready li .mono{font-size:.64rem}
.adm-ready li i{width:16px;height:16px;border-radius:50%;flex:none;position:relative}
.adm-ready li.ok{color:#2E7A52}
.adm-ready li.ok i{background:rgba(62,158,107,.16)}
.adm-ready li.ok i::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.6rem;color:var(--verified);font-weight:700}
.adm-ready li.todo i{border:1.5px dashed #C9A227;background:#FFF9E4}
.adm-ready.pulse{animation:readypulse 1.1s var(--ease)}
@keyframes readypulse{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 4px rgba(217,160,43,.25)}}

/* Cover image */
.adm-cover-current{position:relative;margin-bottom:14px}
.adm-cover-current img{width:100%;border-radius:9px;border:1px solid var(--border);display:block}
.adm-cover-current .adm-mini{position:absolute;top:8px;right:8px;background:var(--white);border:1px solid var(--border);border-radius:6px;padding:5px 9px}
.adm-drop{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  border:1.5px dashed #C9C8C2;border-radius:10px;
  padding:26px 14px;text-align:center;cursor:pointer;
  background:var(--warm-white);
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.adm-drop:hover{border-color:#C9A227;background:#FFFBE8}
.adm-drop:focus-within{outline:2px solid var(--yellow-text);outline-offset:3px}
.adm-drop svg{width:20px;height:20px;color:var(--gray)}
.adm-drop b{font-size:.88rem}
.adm-drop .mono{font-size:.6rem;letter-spacing:.1em;color:var(--gray)}
.adm-drop-state{color:var(--yellow-text) !important}
.adm-or{display:flex;align-items:center;gap:12px;margin:14px 0;font-size:.58rem;letter-spacing:.22em;color:var(--gray)}
.adm-or::before,.adm-or::after{content:"";height:1px;flex:1;background:var(--border)}

/* Search engine + social preview */
.adm-card-title{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.adm-card-title .adm-card-eyebrow{margin-bottom:0}
.adm-serp-tabs{display:flex;gap:6px}
.adm-serp-tabs button{
  font-family:var(--font);font-size:.58rem;letter-spacing:.14em;
  border:1px solid var(--border);border-radius:6px;background:var(--white);
  color:var(--gray);padding:5px 10px;cursor:pointer;
}
.adm-serp-tabs button[aria-selected="true"]{background:var(--black);border-color:var(--black);color:var(--warm-white)}
/* Deliberately not the site face: this box previews how a post will look in
   Google results, so it mimics Google's own typography. */
.adm-serp-box{
  margin-top:16px;border:1px solid var(--border);border-radius:10px;
  padding:16px 20px;display:grid;gap:4px;background:var(--white);
  font-family:arial,sans-serif;
}
.adm-serp-box[data-mode="mobile"]{max-width:400px;border-radius:16px;box-shadow:0 1px 10px rgba(20,20,10,.08)}
.adm-serp-crumb{font-size:.76rem;color:#4D5156}
.adm-serp-title{font-size:1.12rem;line-height:1.3;color:#1A0DAB}
.adm-serp-box[data-mode="mobile"] .adm-serp-title{font-size:1.02rem}
.adm-serp-desc{font-size:.82rem;line-height:1.5;color:#4D5156}
.adm-serp-warn{margin-top:10px;font-size:.6rem;letter-spacing:.08em;color:#B07C10}

.adm-social{margin:20px 0 22px;border-top:1px solid var(--border);padding-top:18px}
.adm-li-card{border:1px solid var(--border);border-radius:10px;overflow:hidden;max-width:460px;background:var(--white)}
.adm-li-img{
  aspect-ratio:1.91/1;background-color:var(--warm-white);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.adm-li-img .mono{font-size:.6rem;letter-spacing:.16em;color:#C9C8C2}
.adm-li-body{padding:12px 14px;display:grid;gap:3px;border-top:1px solid var(--border)}
.adm-li-body b{font-size:.95rem;line-height:1.3}
.adm-li-body span{font-size:.8rem;color:var(--gray)}
.adm-li-body .adm-li-domain{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}

/* ---------- Responsive admin ---------- */

@media(max-width:1080px){
  .adm-edit-grid{grid-template-columns:1fr}
}

@media(max-width:900px){
  .adm-side{
    position:sticky;top:0;bottom:auto;width:auto;
    flex-direction:row;align-items:center;gap:6px;
    padding:10px 14px;
  }
  .adm-brand{flex-direction:row;align-items:center;gap:10px;padding:0}
  .adm-brand img{width:96px}
  .adm-nav{flex-direction:row;margin-top:0;overflow-x:auto;flex:1;padding:0 4px}
  .adm-nav a span,.adm-signout span{display:none}
  .adm-nav a,.adm-signout{padding:10px}
  .adm-nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--yellow)}
  .adm-signout{margin-top:0}
  .adm-main{margin-left:0}
  .adm-wrap{padding:22px 16px 70px}
}

@media(max-width:640px){
  .adm-stats{grid-template-columns:1fr}
  .adm-banner{padding:24px 20px}
  /* the message board stacks instead, so it keeps every column */
  .adm-table:not(.adm-table--msg) th:nth-child(2),.adm-table:not(.adm-table--msg) td:nth-child(2),
  .adm-table:not(.adm-table--msg) th:nth-child(4),.adm-table:not(.adm-table--msg) td:nth-child(4){display:none}
  .adm-table th,.adm-table td{padding-left:16px;padding-right:16px}
  .adm-edit-actions{width:100%;justify-content:flex-end}
  .adm-title-input{font-size:1.15rem}
  .adm-card{padding:18px}
}

/* ---------- Scroll-in transitions (classes applied by main.js only) ---------- */

.rv{opacity:0;transform:translateY(16px)}
.rv-in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:var(--rvd,0ms);
}

/* ---------- Reduced motion ---------- */

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

/* =========================================================
   Studio: message board moderation.
   Reuses the existing Studio components (.adm-stat, .adm-table,
   .adm-pill, .adm-card, .adm-body .btn). Only additions live here.
   ========================================================= */

/* count of what is waiting, in the sidebar */
.adm-badge{
  margin-left:auto;font-style:normal;font-family:var(--font);font-size:.62rem;
  background:var(--yellow);color:var(--text);border-radius:9px;padding:1px 7px;font-weight:600;
}
.adm-vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Studio's buttons are the site .btn restyled; these only add a size and a
   danger tone, and give an icon inside a button a sane box. */
.adm-body .btn svg{width:15px;height:15px;flex:none}
.adm-body .btn{display:inline-flex;align-items:center;gap:8px}
.adm-body .btn-sm{padding:7px 12px;font-size:.76rem;border-radius:7px}
.adm-body .btn-danger-l{background:var(--alert);border:1px solid var(--alert);color:#fff}
.adm-body .btn-danger-l:hover{background:#BC3826;border-color:#BC3826}
.adm-body .adm-danger-link{color:var(--alert)}
.adm-body .adm-danger-link:hover{border-color:var(--alert);color:var(--alert)}

/* the board has four counters where the blog has three */
.adm-stats--four{grid-template-columns:repeat(4,minmax(0,1fr))}
.adm-stat--link{text-decoration:none;transition:border-color .2s var(--ease)}
.adm-stat--link:hover{border-color:var(--gray)}
.adm-stat--link[aria-current="true"]{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}

/* status tones, layered on the existing .adm-pill shape */
.adm-pill-pending{background:rgba(217,160,43,.13);color:#8F6508}
.adm-pill-pending i{background:#D9A02B}
.adm-pill-approved{background:rgba(62,158,107,.11);color:#2E7A52}
.adm-pill-approved i{background:var(--verified)}
.adm-pill-hidden{background:rgba(111,111,111,.14);color:#4A4A48}
.adm-pill-hidden i{background:var(--gray)}
.adm-pill-feat{background:rgba(255,213,31,.2);color:var(--yellow-text)}
.adm-pill-feat i{background:var(--yellow)}

.adm-search{flex:1;min-width:220px}
.adm-search input{
  width:100%;font:inherit;font-size:.86rem;padding:9px 12px;
  border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--text);
}
.adm-sortwrap select{
  font:inherit;font-size:.86rem;padding:9px 12px;
  border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--text);
}
.adm-rowlink{font-weight:600;color:var(--text)}
.adm-rowlink:hover{color:var(--yellow-text)}
.adm-meta{display:block;font-size:.72rem;color:var(--gray);margin-top:3px}
.adm-preview{color:#4A4A45;display:block;max-width:46ch}
.adm-rowacts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.adm-notice{
  border:1px solid var(--border);border-left:3px solid var(--verified);border-radius:8px;
  background:var(--white);padding:12px 16px;margin-bottom:20px;font-size:.9rem;color:var(--text);
}

/* ---------- one submission in full ---------- */
.adm-msg-crumb{font-size:.78rem;margin-bottom:6px}
.adm-msg-crumb a{color:var(--gray)}
.adm-msg-grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.adm-card-h{
  font-family:var(--font);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray);margin-bottom:16px;font-weight:500;
}
.adm-card-note{font-size:.82rem;color:var(--gray);margin-top:12px}
.adm-warn{color:#8F6508}
.adm-deflist{display:grid;gap:12px}
.adm-deflist > div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;align-items:baseline}
.adm-deflist dt{font-size:.78rem;color:var(--gray)}
.adm-deflist dd{font-size:.92rem;color:var(--text);word-break:break-word}
.adm-none{color:var(--light-gray)}
.adm-msg-body{font-size:.98rem;line-height:1.65;color:var(--text)}
.adm-editnote{margin-top:14px;font-size:.8rem;color:#8F6508}
.adm-preview-box{border:1px solid var(--border);border-left:3px solid var(--yellow);border-radius:8px;padding:16px 18px}
.adm-preview-name{font-weight:700;color:var(--text)}
.adm-preview-attr{font-size:.86rem;color:var(--gray);margin-top:3px}
.adm-preview-date{font-family:var(--font);font-size:.6rem;letter-spacing:.16em;color:var(--light-gray);margin-top:8px}
.adm-modacts{display:flex;gap:9px;flex-wrap:wrap}
.adm-backlink{margin-top:22px;font-size:.88rem}

.adm-confirm{
  border:1px solid var(--alert);border-radius:12px;background:var(--white);
  padding:24px 26px;margin-bottom:22px;
}
.adm-confirm h2{font-size:1.15rem;margin-bottom:8px}
.adm-confirm p{font-size:.92rem;color:#3A3A38}
.adm-confirm-acts{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:center}

@media(max-width:900px){
  .adm-msg-grid{grid-template-columns:minmax(0,1fr)}
  .adm-stats--four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  /* the moderation table becomes stacked rows rather than scrolling sideways */
  .adm-table--msg,.adm-table--msg tbody,.adm-table--msg tr,.adm-table--msg td{display:block;width:100%}
  .adm-table--msg thead{display:none}
  .adm-table--msg tr{border-bottom:1px solid var(--border);padding:10px 0}
  .adm-table--msg tr:last-child{border-bottom:0}
  .adm-table--msg td{border-bottom:0;padding:7px 20px;text-align:left}
  .adm-table--msg td::before{
    content:attr(data-label);display:block;
    font-family:var(--font);font-size:.55rem;letter-spacing:.18em;color:var(--light-gray);margin-bottom:5px;
  }
  .adm-preview{max-width:none}
  .adm-rowacts{justify-content:flex-start}
  .adm-deflist > div{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* =========================================================
   Contact: secondary message board entry point,
   Privacy Policy document, and the human site map.
   ========================================================= */

.board-callout{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
  margin-top:52px;padding-top:28px;border-top:1px solid var(--border-dark);
}
.board-callout > div{max-width:56ch}
.board-callout h2{font-size:clamp(1.15rem,2vw,1.45rem);margin:8px 0 8px}
.board-callout p{font-size:.92rem;margin:0}
.board-callout .btn{flex:none}

/* ---------- Footer: copyright and utility links read as one group ---------- */

.f-legal-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;color:var(--border-dark)}
.f-legal-links a{
  font-size:.78rem;color:var(--gray);
  transition:color .3s var(--ease);
}
.f-legal-links a:hover{color:var(--yellow)}

/* ---------- Editorial document page (Privacy Policy) ---------- */

.doc-stamp{
  display:inline-block;font-size:.66rem;letter-spacing:.16em;color:var(--yellow);
  margin-top:16px;padding:5px 10px;border:1px solid rgba(255,213,31,.3);border-radius:3px;
}
.doc{max-width:68ch}
.doc h2{
  font-size:clamp(1.02rem,1.6vw,1.2rem);margin:0 0 16px;
}
/* each numbered clause is its own band, so the rhythm comes from spacing */
.doc section + section{margin-top:40px;padding-top:34px;border-top:1px solid var(--border)}
.doc h3{font-size:.95rem;margin:24px 0 8px;color:var(--text)}
.doc p{margin-bottom:14px;line-height:1.75}
.doc > section > p:last-child,.doc-list:last-child{margin-bottom:0}
.doc a{color:var(--yellow-text);text-decoration:underline;text-underline-offset:2px}
.doc a:hover{color:var(--text)}
.doc code{
  font-family:var(--font);font-size:.9em;
  background:#EFEEE9;border:1px solid var(--border);border-radius:3px;padding:1px 6px;
}
.doc-list{list-style:none;margin:0 0 16px}
.doc-list li{position:relative;padding-left:20px;margin-bottom:11px;color:#3A3A38;line-height:1.7}
.doc-list li::before{
  content:"";position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--yellow-text);
}
/* a quiet aside, and a firmer warning; both stay inside the editorial voice */
.doc-note,.doc-warn{
  border-left:2px solid var(--border);padding:4px 0 4px 18px;margin:18px 0;font-size:.93rem;
}
.doc-warn{border-left-color:var(--yellow-text)}
/* label above value: the separation is structural, not just a flex gap, so
   the copied text and accessible name never run the two together */
.doc-contact{list-style:none;margin-top:18px;display:grid;gap:16px}
.doc-contact .lbl{
  display:block;font-size:.62rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gray);margin-bottom:3px;
}
.doc-contact li > a,.doc-contact li > span:last-child{font-size:.98rem;color:var(--text)}
.doc-contact li > a{color:var(--yellow-text)}

/* ---------- Site map: grouped link directory ---------- */

.map-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:46px 34px;
}
.map-col{border-top:1px solid var(--border);padding-top:18px;position:relative}
/* a short yellow segment sitting on the rule, the same accent language the
   section headers use elsewhere on the site */
.map-col::before{content:"";position:absolute;top:-1px;left:0;width:26px;height:2px;background:var(--yellow)}
.map-col h2{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gray);margin-bottom:16px;
}
.map-col ul{list-style:none}
.map-col li + li{margin-top:2px}
.map-col a{
  display:block;position:relative;padding:7px 0 7px 0;
  font-size:.98rem;font-weight:500;color:var(--text);
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
/* a small chevron drawn in CSS, revealed on hover only */
.map-col a::before{
  content:"";position:absolute;left:0;top:50%;width:5px;height:5px;
  border-right:1.5px solid var(--yellow-text);border-bottom:1.5px solid var(--yellow-text);
  transform:translateY(-50%) rotate(-45deg);
  opacity:0;transition:opacity .3s var(--ease);
}
.map-col a:hover,.map-col a:focus-visible{color:var(--yellow-text);padding-left:14px}
.map-col a:hover::before,.map-col a:focus-visible::before{opacity:1}

@media(prefers-reduced-motion:reduce){
  .map-col a{transition:color .3s var(--ease)}
  .map-col a:hover,.map-col a:focus-visible{padding-left:0}
  .map-col a::before{display:none}
}

@media(max-width:1024px){
  .map-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
}

@media(max-width:640px){
  .board-callout{margin-top:38px;padding-top:24px}
  .board-callout .btn{width:100%;text-align:center}
  .map-grid{grid-template-columns:1fr;gap:34px}
  /* padding only, so the tap target clears the 24px minimum without
     altering footer typography or the sibling link scale */
  .footer-legal{grid-template-columns:1fr;gap:14px}
  .footer-legal > .f-legal-links{justify-self:start}
  .footer-legal > .f-credit{justify-self:start;text-align:left}
  .f-legal-links a{padding:4px 0}
  .doc section + section{margin-top:32px;padding-top:28px}
}