/* SmartLabs: shared styles for the work index, case studies, and project references.
   Same tokens, spacing and proportions as index.html. */

:root{
  --white:#fff;--bg:#F5F8FD;--navy:#091E3A;--blue:#0052CC;--blue-h:#003F9E;
  --blue-lt:#E8F1FD;--blue-bd:#C5D9F5;--text:#0D2040;--mid:#3D5578;--dim:#7A96B8;
  --border:#D3E1F2;--blight:#EAF1FA;
  --sans:'IBM Plex Sans',sans-serif;--mono:'IBM Plex Mono',monospace;
  --read:655px; /* shared reading width: body text ~100 chars/line, boxes capped to match */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;word-break:break-word;}
*{-webkit-tap-highlight-color:transparent;}
html{overflow-x:hidden;scroll-behavior:smooth;}
body{background:var(--white);color:var(--text);font-family:var(--sans);font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;}
img{max-width:100%;height:auto;}

/* NAV — scoped to the site header: the contents rail is also a <nav>, and a bare
   `nav` selector was giving it the header's fixed position, 60px height and bottom border. */
body > nav{position:fixed;top:0;left:0;right:0;z-index:100;height:60px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--blight);}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 60px;height:100%;display:flex;align-items:center;justify-content:space-between;}
.logo{font-weight:600;font-size:16px;color:var(--navy);text-decoration:none;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;}
nav ul{display:flex;gap:4px;list-style:none;align-items:center;}
nav ul a{font-size:14px;color:var(--mid);text-decoration:none;padding:6px 14px;border-radius:7px;transition:background .15s,color .15s;white-space:nowrap;}
nav ul a:hover{background:var(--blue-lt);color:var(--blue);}
nav ul a.active{color:var(--blue);font-weight:500;}
.nc{background:var(--blue)!important;color:white!important;font-weight:500!important;}
.nc:hover{background:var(--blue-h)!important;}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:4px;width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:0;}
.hamburger span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;}

/* KEYBOARD FOCUS (whole cards are links, so this must be visible) */
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px;}
.hero a:focus-visible,.cta-band a:focus-visible{outline-color:#fff;}

/* WRAP */
.wrap{max-width:1100px;margin:0 auto;padding:0 60px;}

/* HERO */
.hero{padding-top:60px;background:linear-gradient(135deg,#071428 0%,#0A2047 55%,#071E3A 100%);position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:52px 52px;pointer-events:none;}
.hero-inner{position:relative;z-index:1;padding:44px 60px 34px;max-width:1100px;margin:0 auto;}
.crumb{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;}
.crumb a{color:rgba(255,255,255,.45);text-decoration:none;}
.crumb a:hover{color:#fff;}
h1{font-size:clamp(25px,3.2vw,36px);font-weight:600;color:white;line-height:1.18;letter-spacing:-.025em;max-width:780px;margin-bottom:16px;}
.hero-sub{font-size:15px;color:rgba(255,255,255,.75);line-height:1.75;font-weight:300;max-width:660px;}
.hero-sub+.hero-sub{margin-top:12px;}
.hero-org{font-size:13px;color:rgba(255,255,255,.55);margin-top:2px;line-height:1.65;max-width:660px;}
.hero-org strong{color:rgba(255,255,255,.9);font-weight:500;}

/* HERO FACT BAR */
/* Flex, not a grid: equal columns would space the items out across the full width.
   Sized to their content and set side by side, as on the home page stat row. */
.hero-facts{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.09);padding:24px 60px;max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:20px 56px;}
.hfact-label{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.42);letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;}
.hfact-val{font-size:13px;color:rgba(255,255,255,.82);line-height:1.5;}

/* TWO-COLUMN ARTICLE LAYOUT: sticky contents rail + reading column */
.cs-layout{max-width:1100px;margin:0 auto;padding:0 60px;display:grid;grid-template-columns:196px 1fr;gap:56px;align-items:start;}
.toc{position:sticky;top:84px;padding:48px 0 40px;transition:opacity .2s;}
/* once the article has scrolled past, retire the rail so it does not trail into the sections below */
.toc.done{opacity:0;visibility:hidden;}
.toc-label{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;padding-left:12px;}
.toc a{display:block;font-size:13px;color:var(--mid);text-decoration:none;padding:7px 12px;border-left:2px solid var(--border);line-height:1.4;transition:color .15s,border-color .15s,background .15s;}
.toc a:hover{color:var(--blue);border-left-color:var(--blue-bd);background:var(--bg);}
.toc a.active{color:var(--blue);border-left-color:var(--blue);font-weight:500;}
.cs-main{padding:48px 0 60px;min-width:0;}

/* SECTIONS */
.cs-sec{padding:34px 0;border-top:1px solid var(--blight);scroll-margin-top:80px;}
.cs-sec:first-child{border-top:none;padding-top:0;}
.sec{padding:56px 0;}
.sec-alt{background:var(--bg);border-top:1px solid var(--blight);border-bottom:1px solid var(--blight);}
.eyebrow{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--blue);letter-spacing:.13em;text-transform:uppercase;margin-bottom:10px;}
.section-label{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;}
h2{font-size:clamp(19px,2.2vw,24px);font-weight:600;color:var(--navy);line-height:1.28;letter-spacing:-.02em;margin-bottom:14px;}
h3{font-size:15px;font-weight:600;color:var(--navy);line-height:1.4;letter-spacing:-.01em;margin-bottom:8px;}
.sh{margin-bottom:34px;}
.sh h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:8px;}
.sh p{font-size:15px;color:var(--mid);max-width:620px;line-height:1.65;}

/* PROSE — capped to ~100 chars; boxes below share --read so text and boxes stay aligned */
.prose{font-size:14.5px;color:var(--mid);line-height:1.8;max-width:var(--read);}
.prose p{margin-bottom:14px;}
.prose p:last-child{margin-bottom:0;}
.prose strong{color:var(--text);font-weight:500;}
.prose a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue-bd);}
.prose a:hover{border-bottom-color:var(--blue);}
.prose ul{list-style:none;margin:14px 0;}
.prose li{position:relative;padding-left:18px;margin-bottom:8px;}
.prose li::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:var(--blue-bd);}
/* Numbered steps: flex with baseline alignment, so the small mono number sits on the same
   baseline as the body text. Absolutely positioning it would ride high, the two font sizes
   having different half-leading. */
.prose ol{list-style:none;counter-reset:s;margin:14px 0;}
.prose ol li{counter-increment:s;display:flex;align-items:baseline;gap:10px;padding-left:0;position:static;}
.prose ol li::before{content:counter(s,decimal-leading-zero);position:static;flex:0 0 18px;width:18px;height:auto;border-radius:0;background:none;font-family:var(--mono);font-size:11px;color:var(--blue);}
.sub{margin-top:26px;}

/* FIGURES (photo / clip) */
.fig{margin-top:26px;max-width:var(--read);}
.fig img,.fig video{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:var(--bg);}
.fig video{background:#000;}
.fig figcaption{font-size:12.5px;color:var(--dim);line-height:1.6;margin-top:10px;max-width:580px;}
.fig-credit{display:block;margin-top:8px;font-size:11px;color:var(--dim);}
.fig-square{max-width:400px;margin-left:auto;margin-right:auto;}

/* METRICS */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:26px;max-width:var(--read);}
.metric{border:1px solid var(--border);border-radius:12px;padding:18px 18px 16px;background:var(--bg);}
.metric-v{font-family:var(--mono);font-size:20px;font-weight:500;color:var(--navy);line-height:1.25;letter-spacing:-.01em;}
.metric-l{font-size:12px;color:var(--mid);margin-top:7px;line-height:1.5;}

/* NOTE (status / caveat) */
.note{border:1px solid var(--blue-bd);background:var(--blue-lt);border-radius:10px;padding:15px 18px;font-size:13px;color:var(--mid);line-height:1.65;max-width:var(--read);}
.note strong{color:var(--navy);font-weight:500;}

/* SPEC LIST (technical stack) */
.spec{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--white);max-width:var(--read);}
.spec-row{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:14px 20px;border-bottom:1px solid var(--blight);}
.spec-row:last-child{border-bottom:none;}
.spec-k{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;padding-top:3px;}
.spec-v{font-size:13px;color:var(--mid);line-height:1.6;}
.spec-v strong{color:var(--text);font-weight:500;}

/* CONSTRAINT CELLS */
.cells{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:12px;overflow:hidden;max-width:var(--read);}
.cell{padding:20px 18px;background:var(--bg);border-right:1px solid var(--border);}
.cell:last-child{border-right:none;}
.cell-num{font-family:var(--mono);font-size:10px;color:var(--blue);letter-spacing:.08em;margin-bottom:8px;}
.cell-t{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.35;}
.cell p{font-size:12px;color:var(--mid);margin-top:6px;line-height:1.55;}

/* TABLES */
.tbl{width:100%;max-width:var(--read);border-collapse:collapse;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--white);}
.tbl th{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;text-align:left;font-weight:500;padding:13px 18px;background:var(--bg);border-bottom:1px solid var(--border);}
.tbl td{font-size:13px;color:var(--mid);line-height:1.6;padding:13px 18px;border-bottom:1px solid var(--blight);vertical-align:top;}
.tbl tr:last-child td,.tbl tr:last-child th[scope=row]{border-bottom:none;}
.tbl th[scope=row]{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--text);text-transform:none;letter-spacing:normal;background:none;padding:13px 18px;border-bottom:1px solid var(--blight);vertical-align:top;width:32%;}
.tbl td:first-child{width:auto;}
.tbl .then{color:var(--text);}
.tbl .then::before{content:'\2192';color:var(--blue);font-family:var(--mono);font-size:12px;margin-right:8px;}

/* PULL QUOTE */
.pq{border-left:3px solid var(--blue);background:var(--bg);border-radius:0 12px 12px 0;padding:24px 26px;max-width:var(--read);}
.pq blockquote{font-size:15px;color:var(--text);line-height:1.78;font-weight:300;font-style:italic;margin-bottom:16px;}
.pq figcaption{font-size:12.5px;color:var(--dim);line-height:1.55;font-style:normal;}
.pq figcaption strong{display:block;color:var(--navy);font-weight:600;font-size:13px;margin-bottom:2px;}

/* WORK CARDS */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.work-grid-2{grid-template-columns:repeat(2,1fr);}
.work-card{display:flex;flex-direction:column;gap:9px;text-decoration:none;background:var(--bg);border:1.5px solid var(--border);border-radius:14px;padding:24px 22px;transition:border-color .2s,background .2s,transform .18s,box-shadow .18s;}
.work-card:hover{border-color:var(--blue);background:var(--blue-lt);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,82,204,.10);}
.work-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;color:var(--blue);background:var(--blue-lt);border:1px solid var(--blue-bd);padding:3px 10px;border-radius:100px;letter-spacing:.08em;white-space:nowrap;}
.work-card:hover .tag{background:var(--white);}
.kindtag{font-family:var(--mono);font-size:9.5px;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.work-org{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.02em;line-height:1.45;}
.work-title{font-size:15px;font-weight:600;color:var(--navy);line-height:1.4;letter-spacing:-.01em;}
.work-desc{font-size:13px;color:var(--mid);line-height:1.65;flex:1;}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.chip{font-family:var(--mono);font-size:10px;color:var(--mid);background:var(--white);border:1px solid var(--border);padding:3px 9px;border-radius:100px;letter-spacing:.04em;}
.work-fact{font-family:var(--mono);font-size:11px;color:var(--dim);border-top:1px solid var(--blight);padding-top:12px;margin-top:4px;line-height:1.55;}
.work-arr{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--blue);font-weight:500;transition:gap .15s;margin-top:2px;}
.work-card:hover .work-arr{gap:8px;}

/* CTA */
.cta-band{background:linear-gradient(135deg,#0A1E3C 0%,#0D2E5C 55%,#0A265A 100%);padding:52px 0;position:relative;overflow:hidden;}
.cta-band::before{content:'';position:absolute;top:-60px;right:8%;width:280px;height:280px;background:radial-gradient(circle,rgba(0,82,204,.35) 0%,transparent 70%);pointer-events:none;}
.cta-inner{max-width:1100px;margin:0 auto;padding:0 60px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;position:relative;z-index:1;}
.cta-text h2{font-size:clamp(20px,2.5vw,28px);color:white;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-bottom:8px;}
.cta-text p{font-size:15px;color:rgba(255,255,255,.7);max-width:520px;line-height:1.65;}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;}
.btn{min-height:44px;display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;font-weight:500;padding:11px 22px;border-radius:8px;border:none;cursor:pointer;text-decoration:none;transition:transform .14s,background .14s;white-space:nowrap;flex-shrink:0;}
.btn-white{background:white;color:var(--blue);}
.btn-white:hover{background:var(--blue-lt);transform:translateY(-1px);}
.btn-outline{background:rgba(255,255,255,.08);color:white;border:1px solid rgba(255,255,255,.2);}
.btn-outline:hover{background:rgba(255,255,255,.14);transform:translateY(-1px);}

/* FOOTER */
footer{border-top:1px solid var(--blight);padding:32px 0;background:var(--white);}
.footer-inner{max-width:1100px;margin:0 auto;padding:0 60px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.fcopy{font-size:13px;color:var(--dim);}
.flinks{display:flex;gap:4px;list-style:none;flex-wrap:wrap;}
.flinks a{font-size:13px;color:var(--dim);text-decoration:none;padding:4px 10px;border-radius:6px;transition:color .15s,background .15s;white-space:nowrap;}
.flinks a:hover{color:var(--blue);background:var(--blue-lt);}

/* RESPONSIVE */
@media(max-width:1040px){
  .nav-inner{padding:0 20px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));}
  .hamburger{display:flex;}
  nav ul{display:none;position:fixed;top:60px;left:0;right:0;z-index:99;background:#fff;border-bottom:1px solid var(--blight);flex-direction:column;align-items:stretch;gap:4px;padding:16px 20px;}
  nav ul.open{display:flex;-webkit-overflow-scrolling:touch;padding-bottom:max(16px,env(safe-area-inset-bottom));}
  nav ul li{width:100%;}
  nav ul a{display:flex;width:100%;padding:12px 14px;justify-content:flex-start;min-height:44px;align-items:center;}
  /* the contents rail needs a viewport it can sit beside; below this it just gets in the way */
  .cs-layout{grid-template-columns:1fr;gap:0;padding:0 40px;}
  .toc{display:none;}
  .cs-main{padding:40px 0 52px;}
  .hero-inner{padding:56px 40px 40px;}
  .hero-facts{gap:20px 48px;padding:24px 40px;}
  .work-grid,.work-grid-2{grid-template-columns:repeat(2,1fr);}
  .cells{grid-template-columns:1fr;}
  .cell{border-right:none;border-bottom:1px solid var(--border);}
  .cell:last-child{border-bottom:none;}
}
@media(max-width:680px){
  .wrap,.cs-layout,.cta-inner,.footer-inner{padding:0 20px!important;}
  .hero-inner{padding:48px 20px 32px;}
  .hero-facts{flex-direction:column;gap:16px;padding:22px 20px;}
  .work-grid,.work-grid-2{grid-template-columns:1fr;}
  .spec-row{grid-template-columns:1fr;gap:5px;}
  .metrics{grid-template-columns:1fr;}
  .tbl{display:block;overflow-x:auto;}
  .tbl th[scope=row]{width:auto;}
  .footer-inner{flex-direction:column;align-items:flex-start;padding-bottom:max(24px,env(safe-area-inset-bottom));}
}