/* ============================================================
   Click Soft Solutions — Design System
   Dark editorial. Archivo display, IBM Plex Mono for data labels.
   Gradient mark: #F0058B -> #8E33F6
   ============================================================ */

:root{
  /* Surfaces */
  --bg:#08070C;
  --bg-2:#0B0912;
  --bg-3:#12101A;
  --cream:#F3F1EE;
  --cream-ink:#12101A;

  /* Lines */
  --line:rgba(255,255,255,0.10);
  --line-soft:rgba(255,255,255,0.06);
  --line-strong:rgba(255,255,255,0.18);
  --line-dark:rgba(18,16,26,0.14);

  /* Type colours */
  --ink:#F6F5F9;
  --body:#A7A2B6;
  --muted:#918CA3;
  --dim:#7E798E;
  --faint:#6E6980;

  /* Accent */
  --pink:#F0058B;
  --purple:#8E33F6;
  --purple-2:#9B3CF7;
  --grad:linear-gradient(96deg,#F0058B,#8E33F6);
  --grad-text:linear-gradient(96deg,#F0058B,#9B3CF7);

  --radius:2px;
  --max:1480px;
  --gutter:clamp(20px,4vw,56px);
  --section-y:clamp(52px,7vw,104px);

  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:'Archivo', Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
a:hover{color:var(--pink);}
img{max-width:100%; display:block;}
::selection{background:var(--pink); color:#fff;}

h1,h2,h3,h4{color:var(--ink); margin:0 0 14px; font-weight:800; letter-spacing:-0.03em; line-height:1.05;}
h1{font-size:clamp(34px,5.8vw,88px); font-weight:900; letter-spacing:-0.048em; line-height:0.95;}
h2{font-size:clamp(24px,3.6vw,48px); letter-spacing:-0.042em; line-height:1.02;}
h3{font-size:clamp(18px,1.9vw,27px); font-weight:700; letter-spacing:-0.03em;}
h4{font-size:15px; font-weight:700; letter-spacing:-0.01em;}
p{margin:0 0 16px;}

/* Gradient text run, used once per page at most */
.grad{
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

section{padding:var(--section-y) var(--gutter);}
.wrap{max-width:var(--max); margin:0 auto;}
.center{text-align:center;}
.muted{color:var(--muted);}
.lead{font-size:clamp(16px,1.4vw,21px); line-height:1.55; color:var(--body); max-width:54ch; text-wrap:pretty;}

/* ---------- Accessibility ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--pink); color:#fff;
  padding:10px 16px; z-index:300; font-family:var(--mono); font-size:12px;
  text-transform:uppercase; letter-spacing:0.1em;
}
.skip-link:focus{left:0;}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--pink); outline-offset:3px;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

/* ============================================================
   Section marker:  [ 01 ] ———— CAPABILITIES
   ============================================================ */
.marker{
  display:flex; align-items:center; gap:14px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:20px;
}
.marker .idx{color:var(--pink);}
.marker .rule{width:32px; height:1px; background:var(--pink); flex:none;}

.eyebrow{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:18px;
}
.eyebrow .idx{color:var(--pink);}

/* Section head: title left, note right */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,56px);
}
.section-head h2{margin:0; max-width:18ch;}
.section-head .note{
  margin:0; max-width:34ch; font-family:var(--mono); font-size:13.5px;
  line-height:1.7; color:var(--muted);
}
.section-head.stacked{display:block; max-width:none;}

/* ---------- Mono utility text ---------- */
.mono{font-family:var(--mono);}
.label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--dim);
}
.label-pink{
  font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--pink);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary,.btn-secondary,.btn-light{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--sans); font-size:15px; border-radius:var(--radius);
  padding:16px 26px; cursor:pointer; border:none; line-height:1.2;
  transition:filter .15s, border-color .15s, background .15s, color .15s;
}
.btn-primary{background:var(--grad); color:#fff; font-weight:700;}
.btn-primary:hover{filter:brightness(1.12); color:#fff;}
.btn-secondary{
  border:1px solid rgba(255,255,255,0.22); color:var(--ink);
  font-weight:600; background:transparent;
}
.btn-secondary:hover{border-color:var(--ink); color:var(--ink);}
.btn-light{background:var(--ink); color:var(--bg); font-weight:700; padding:18px 30px;}
.btn-light:hover{background:#fff; color:var(--bg);}
.btn-primary .arw,.btn-secondary .arw,.btn-light .arw{font-family:var(--mono);}

/* Underlined mono link */
.link-mono{
  display:inline-block; font-family:var(--mono); font-size:11.5px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid rgba(240,5,139,0.6); padding-bottom:3px;
}
.link-mono:hover{border-color:var(--pink); color:var(--ink);}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  padding:0 var(--gutter); height:74px;
  background:rgba(8,7,12,0.84); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.brand{
  display:flex; align-items:center; gap:0;
  font-size:28px; font-weight:800; letter-spacing:-0.020em; line-height:1;
}
.brand:hover{color:inherit;}
/* The mark IS the capital C. Its viewBox is trimmed to the ink, so the
   gap below is a true ink-to-ink gap. Height matches Archivo's cap C
   (0.711em, overshoot included); the gap is 0.055em. Both measured. */
.brand .mark{
  height:0.711em; width:0.666em; flex:none; overflow:visible;
  margin-right:0.055em; align-self:center; margin-top:-0.015em;
}
.brand .b1{color:var(--ink);}
.brand .b2{color:#C0BCD0; font-weight:500;}

.site-header nav{display:flex; align-items:center; gap:clamp(12px,2vw,30px); font-size:14px; font-weight:500;}
.site-header nav a{color:#A7A2B6; padding:26px 0; border-bottom:2px solid transparent;}
.site-header nav a:hover{color:#fff;}
.site-header nav a.active{color:#fff; border-bottom-color:var(--pink);}

.header-actions{display:flex; align-items:center; gap:18px;}
.header-actions .seekers{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted);
}
.header-actions .seekers:hover{color:var(--ink);}
.header-actions .btn-primary{padding:11px 20px; font-size:14px;}

.menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.menu-toggle span{display:block; width:22px; height:2px; background:var(--ink);}

@media (max-width:1080px){
  .site-header nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--bg-2); flex-direction:column; align-items:stretch; gap:0;
    border-bottom:1px solid var(--line); max-height:78vh; overflow-y:auto;
  }
  .site-header nav.open{display:flex;}
  .site-header nav a{padding:15px var(--gutter); border-top:1px solid var(--line-soft); border-bottom:none;}
  .site-header nav a.active{color:var(--pink); border-bottom:none;}
  .menu-toggle{display:flex;}
  .header-actions .seekers{display:none;}
}
@media (max-width:520px){
  .header-actions .btn-primary{display:none;}
  .brand{font-size:23px;}
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(48px,7vw,104px) var(--gutter) 0;
  background:var(--bg);
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,0.05) 0 1px,transparent 1px calc(100%/12));
}
.hero::after{
  content:''; position:absolute; top:-25%; right:-10%; width:70vw; height:70vw;
  max-width:900px; max-height:900px; pointer-events:none;
  background:radial-gradient(circle,rgba(240,5,139,0.24),transparent 62%);
  animation:csBloom 14s ease-in-out infinite;
}
.hero .wrap{position:relative; z-index:1;}
.hero h1{max-width:19ch; margin:0;}
.hero .hero-body{margin-top:clamp(34px,5vw,68px); padding-bottom:clamp(44px,6vw,84px);}
.hero .lead{margin:0 0 32px;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px;}
@keyframes csBloom{
  0%{transform:translate3d(0,0,0) scale(1); opacity:.5}
  50%{transform:translate3d(4%,-3%,0) scale(1.15); opacity:.8}
  100%{transform:translate3d(0,0,0) scale(1); opacity:.5}
}

/* Inner page hero */
.page-hero{
  position:relative; overflow:hidden;
  padding:clamp(44px,6vw,88px) var(--gutter) clamp(36px,4.5vw,64px);
  border-bottom:1px solid var(--line);
}
.page-hero::after{
  content:''; position:absolute; top:-40%; right:-6%; width:52vw; height:52vw;
  max-width:680px; max-height:680px; pointer-events:none;
  background:radial-gradient(circle,rgba(240,5,139,0.15),transparent 64%);
}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero h1{font-size:clamp(30px,4.8vw,64px); max-width:17ch; margin:0 0 22px;}
.page-hero .lead{margin:0;}

/* Breadcrumb */
.breadcrumb{
  padding:12px var(--gutter); border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--faint);
}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--pink);}
.breadcrumb .sep{margin:0 8px; opacity:0.5;}
.breadcrumb .current{color:var(--body);}

/* ============================================================
   Marquee (partner / client strip)
   ============================================================ */
.marquee-sec{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(24px,3vw,40px) 0; overflow:hidden;
}
.marquee-sec .cap{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--faint);
  padding:0 var(--gutter); margin-bottom:20px;
  display:flex; align-items:center; gap:16px;
}
.marquee-sec .cap .rule{flex:1; height:1px; background:var(--line-soft);}
.marquee{display:flex; width:max-content; animation:csMarquee 42s linear infinite;}
.marquee:hover{animation-play-state:paused;}
.marquee .row{display:flex; align-items:center;}
.marquee .item{
  font-size:clamp(20px,2.4vw,34px); font-weight:700; letter-spacing:-0.03em;
  color:#3A3646; padding:0 clamp(24px,3vw,46px); white-space:nowrap;
}
.marquee .dot{color:var(--pink); font-size:10px;}
@keyframes csMarquee{from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)}}

/* ============================================================
   Stat row
   ============================================================ */
.stat-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));}
.stat-box{padding:clamp(24px,3vw,40px) clamp(16px,2vw,28px); border-left:1px solid var(--line);}
.stat-box:first-child{border-left:none; padding-left:0;}
.stat-box .num{
  font-size:clamp(34px,5vw,72px); font-weight:900; letter-spacing:-0.05em;
  line-height:0.92; color:var(--ink);
}
.stat-box .num .accent{color:var(--pink);}
.stat-box .lbl{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--dim); margin-top:14px; line-height:1.6;
}
@media (max-width:860px){
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat-box:nth-child(3){border-left:none; padding-left:0;}
  .stat-box:nth-child(n+3){border-top:1px solid var(--line);}
}
@media (max-width:460px){
  .stat-grid{grid-template-columns:minmax(0,1fr);}
  .stat-box{border-left:none; padding-left:0; border-top:1px solid var(--line);}
  .stat-box:first-child{border-top:none;}
}

/* ============================================================
   Grids + cards
   ============================================================ */
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line);}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--line);}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line);}
.grid-2 > *,.grid-3 > *,.grid-4 > *{background:var(--bg);}
@media (max-width:1000px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr);}}

/* Bordered hairline card inside a hairline grid */
.card{
  padding:clamp(24px,2.8vw,36px);
  display:flex; flex-direction:column;
  transition:background .18s;
}
.card:hover{background:var(--bg-2); color:inherit;}
.card .card-num{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em;
  color:var(--pink); margin-bottom:16px; display:block;
}
.card h3{margin-bottom:10px; font-size:clamp(17px,1.5vw,21px);}
.card p{color:var(--muted); font-size:14.5px; margin:0; line-height:1.65;}
a.card:hover h3{color:var(--ink);}

/* Standalone panel (not in a hairline grid) */
.panel{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012));
  padding:clamp(22px,2.6vw,32px);
}
.panel h3{margin-bottom:12px;}
.panel p{color:var(--muted); font-size:14.5px;}
.panel p:last-child{margin-bottom:0;}

/* Split layout */
.split{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(32px,4vw,72px); align-items:start;}
.split.center-y{align-items:center;}
@media (max-width:1000px){.split{grid-template-columns:minmax(0,1fr);}}
.split p{color:var(--body); font-size:15.5px;}

/* Industry / detail card with list */
.ind-card{padding:clamp(24px,2.8vw,36px); display:block;}
.ind-card:hover{background:var(--bg-2); color:inherit;}
.ind-card .card-num{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.1em;
  color:var(--pink); margin-bottom:14px; display:block;
}
.ind-card h3{margin-bottom:10px;}
.ind-card p{color:var(--muted); font-size:14.5px; margin-bottom:16px;}
.ind-card ul{margin:0; padding:0; list-style:none;}
.ind-card li{
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em;
  color:var(--dim); padding:7px 0; border-top:1px solid var(--line-soft);
}

/* Tech card */
.tech-card{padding:clamp(24px,2.8vw,34px);}
.tech-card h3{font-size:clamp(16px,1.4vw,20px); margin-bottom:16px;}
.tech-line{font-size:13.5px; color:var(--muted); margin-bottom:9px; line-height:1.6;}
.tech-line b{color:var(--body); font-weight:500; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; display:block; margin-bottom:2px; color:var(--faint);}

/* Reason cell */
.reason{padding:clamp(22px,2.5vw,32px);}
.reason h3{font-size:16.5px; margin-bottom:8px;}
.reason p{font-size:14px; color:var(--muted); margin:0;}

/* ============================================================
   Capability list (numbered rows)
   ============================================================ */
.cap-list{border-top:1px solid var(--line);}
.cap-row{
  display:flex; align-items:center; gap:20px; width:100%; text-align:left;
  border-bottom:1px solid var(--line); padding:clamp(15px,2vw,23px) 6px;
  background:transparent; color:inherit;
}
.cap-row:hover{background:rgba(255,255,255,0.03); color:inherit;}
.cap-row .n{font-family:var(--mono); font-size:11.5px; color:var(--faint); width:26px; flex:none;}
.cap-row .t{flex:1; font-size:clamp(17px,1.8vw,22px); font-weight:700; letter-spacing:-0.03em; color:var(--ink);}
.cap-row .arw{font-family:var(--mono); font-size:14px; color:transparent;}
.cap-row:hover .arw{color:var(--pink);}
.cap-row:hover .n{color:var(--pink);}

/* ============================================================
   Story / case card
   ============================================================ */
.story-card{
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012));
  padding:clamp(24px,3vw,40px); margin-bottom:22px;
}
.story-card .story-tag{
  display:inline-block; font-family:var(--mono); font-size:11px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--pink); margin-bottom:16px;
}
.story-card h3{font-size:clamp(20px,2.4vw,28px); font-weight:800; letter-spacing:-0.035em; line-height:1.05; margin-bottom:22px; max-width:22ch;}
.story-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; margin-bottom:26px;}
@media (max-width:820px){.story-grid{grid-template-columns:minmax(0,1fr); gap:20px;}}
.story-grid .story-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--faint); margin-bottom:8px;
}
.story-grid p{font-size:14.5px; color:var(--body); margin:0; line-height:1.65;}

/* Metric strip inside a story */
.metric-strip{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line);}
@media (max-width:620px){.metric-strip{grid-template-columns:minmax(0,1fr);}}
.metric-strip > div{padding:clamp(18px,2.2vw,26px); border-left:1px solid var(--line);}
.metric-strip > div:first-child{border-left:none;}
@media (max-width:620px){
  .metric-strip > div{border-left:none; border-top:1px solid var(--line);}
  .metric-strip > div:first-child{border-top:none;}
}
.metric-strip .m-num{font-size:clamp(26px,3vw,40px); font-weight:900; letter-spacing:-0.04em; color:var(--ink); line-height:1;}
.metric-strip .m-lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); margin-top:10px;}

.story-note{
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em;
  color:var(--faint); line-height:1.8; margin-top:8px;
}

/* ============================================================
   Data rows (locations, facts)
   ============================================================ */
.row-list{border-top:1px solid var(--line);}
.data-row{
  display:grid; grid-template-columns:90px minmax(0,220px) minmax(0,1fr) auto;
  gap:24px; align-items:baseline;
  padding:clamp(20px,2.4vw,30px) 0; border-bottom:1px solid var(--line);
}
.data-row .k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--pink);}
.data-row .t{font-size:clamp(18px,1.9vw,26px); font-weight:700; letter-spacing:-0.03em; color:var(--ink);}
.data-row .d{font-size:14.5px; color:var(--muted); line-height:1.7;}
.data-row .v{font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--dim); text-align:right; white-space:nowrap;}
@media (max-width:1000px){
  .data-row{grid-template-columns:minmax(0,1fr); gap:8px;}
  .data-row .v{text-align:left;}
}

/* Key/value fact rows */
.fact-row{
  display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:28px;
  padding:clamp(18px,2.2vw,26px) 0; border-bottom:1px solid var(--line); align-items:start;
}
.fact-row:last-child{border-bottom:none;}
@media (max-width:720px){.fact-row{grid-template-columns:minmax(0,1fr); gap:8px;}}
.fact-row .fact-k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--pink); padding-top:3px;}
.fact-row .fact-v{font-size:15.5px; color:var(--ink); font-weight:600;}
.fact-row .fact-v .sub{display:block; font-size:14px; color:var(--muted); margin-top:8px; font-weight:400; line-height:1.7;}

/* ============================================================
   Checklist + pills
   ============================================================ */
ul.check{list-style:none; padding:0; margin:0;}
ul.check li{
  position:relative; padding:11px 0 11px 30px; font-size:15px; color:var(--body);
  border-top:1px solid var(--line-soft); line-height:1.6;
}
ul.check li:first-child{border-top:none;}
ul.check li::before{
  content:''; position:absolute; left:2px; top:19px; width:12px; height:7px;
  border-left:2px solid var(--pink); border-bottom:2px solid var(--pink);
  transform:rotate(-45deg);
}
ul.check li b{color:var(--ink); font-weight:600;}

.pill-list{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}
.pill-list li{
  border:1px solid var(--line); color:var(--body); padding:9px 16px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
}

/* ============================================================
   Light (cream) section — inverts everything inside
   ============================================================ */
.alt-bg{background:var(--cream); color:var(--cream-ink);}
.alt-bg h1,.alt-bg h2,.alt-bg h3,.alt-bg h4{color:var(--cream-ink);}
.alt-bg .marker,.alt-bg .eyebrow{color:#6B6678;}
.alt-bg .marker .rule{background:var(--pink);}
.alt-bg .section-head .note{color:#6B6678;}
.alt-bg .grid-2,.alt-bg .grid-3,.alt-bg .grid-4{background:var(--line-dark);}
.alt-bg .grid-2 > *,.alt-bg .grid-3 > *,.alt-bg .grid-4 > *{background:var(--cream);}
.alt-bg .card:hover,.alt-bg .ind-card:hover{background:#EAE7E1;}
.alt-bg .card p,.alt-bg .ind-card p{color:#5E5A6C;}
.alt-bg .ind-card li{color:#6B6678; border-color:rgba(18,16,26,0.10);}
.alt-bg .panel{border-color:var(--line-dark); background:rgba(255,255,255,0.5);}
.alt-bg .panel p{color:#5E5A6C;}
.alt-bg ul.check li{color:#3A3646; border-color:rgba(18,16,26,0.10);}
.alt-bg ul.check li b{color:var(--cream-ink);}
.alt-bg .pill-list li{border-color:var(--line-dark); color:#5E5A6C;}
.alt-bg .label,.alt-bg .data-row .v{color:#7E798E;}
.alt-bg .row-list,.alt-bg .data-row,.alt-bg .fact-row{border-color:var(--line-dark);}
.alt-bg .data-row .t{color:var(--cream-ink);}
.alt-bg .data-row .d{color:#5E5A6C;}
.alt-bg .stat-box{border-color:var(--line-dark);}
.alt-bg .stat-box .num{color:var(--cream-ink);}
.alt-bg .stat-box .lbl{color:#6B6678;}
.alt-bg .btn-secondary{border-color:rgba(18,16,26,0.28); color:var(--cream-ink);}
.alt-bg .btn-secondary:hover{border-color:var(--cream-ink);}
.alt-bg .link-mono{color:var(--cream-ink);}
.alt-bg .muted{color:#5E5A6C;}
.alt-bg p{color:#5E5A6C;}
.alt-bg a:hover{color:var(--pink);}
.alt-bg .reason p,.alt-bg .tech-line{color:#5E5A6C;}

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{
  position:relative; overflow:hidden;
  padding:clamp(64px,9vw,140px) var(--gutter);
  border-top:1px solid var(--line);
}
.cta-band::after{
  content:''; position:absolute; top:-30%; left:30%; width:60vw; height:60vw;
  max-width:820px; max-height:820px; pointer-events:none;
  background:radial-gradient(circle,rgba(123,44,245,0.26),transparent 62%);
}
.cta-band .wrap{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr); gap:clamp(32px,4vw,64px); align-items:center;}
@media (max-width:1000px){.cta-band .wrap{grid-template-columns:minmax(0,1fr);}}
.cta-band h2{font-size:clamp(28px,4.5vw,68px); margin:0; max-width:14ch;}
.cta-band p{color:var(--body); font-size:16px; margin:0 0 26px; max-width:38ch;}

/* ============================================================
   Job cards
   ============================================================ */
.job-card{
  border-bottom:1px solid var(--line); padding:clamp(24px,3vw,36px) 0;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:start;
}
.job-card:first-child{border-top:1px solid var(--line);}
@media (max-width:720px){.job-card{grid-template-columns:minmax(0,1fr);}}
.job-card .job-id{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  color:var(--pink); margin-bottom:10px;
}
.job-card h3{font-size:clamp(19px,2vw,28px); margin-bottom:10px;}
.job-card .meta{font-family:var(--mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--dim);}

details.job-details{margin-top:18px;}
details.job-details summary{
  cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--pink); list-style:none;
  display:inline-flex; align-items:center; gap:8px;
}
details.job-details summary::-webkit-details-marker{display:none;}
details.job-details summary::after{content:'+'; font-size:13px;}
details.job-details[open] summary::after{content:'\2212';}
details.job-details .job-body{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
  font-size:14.5px; color:var(--muted); max-width:75ch;
}
details.job-details .job-body h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--faint); margin:22px 0 10px; font-weight:500;
}
details.job-details .job-body ul{padding-left:18px; margin:0;}
details.job-details .job-body li{margin-bottom:8px; line-height:1.65;}

.job-note{
  border:1px solid var(--line); padding:clamp(22px,2.6vw,32px);
  margin-top:36px; text-align:center; color:var(--muted); font-size:14.5px;
}

/* ============================================================
   Forms
   ============================================================ */
form.box-form{border:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,0.045),rgba(255,255,255,0.012)); padding:clamp(24px,3vw,36px);}
.field{margin-bottom:18px;}
.field label{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--dim); margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%; padding:13px 14px; background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.16); border-radius:var(--radius);
  font-family:var(--sans); font-size:15px; color:var(--ink);
}
.field textarea{resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--pink); background:rgba(0,0,0,0.5);}
.field select option{background:var(--bg-2); color:var(--ink);}
.row-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
@media (max-width:520px){.row-2{grid-template-columns:minmax(0,1fr);}}
.status-box{display:none; padding:13px 15px; font-size:14px; margin-bottom:16px; border-radius:var(--radius);}
.status-box.ok{display:block; background:rgba(34,197,139,0.12); border:1px solid rgba(34,197,139,0.4); color:#22C58B;}
.status-box.err{display:block; background:rgba(240,5,139,0.10); border:1px solid rgba(240,5,139,0.4); color:#F0058B;}
.status-box a{color:inherit; text-decoration:underline;}

.info-item{display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line);}
.info-item:first-child{border-top:none; padding-top:0;}
.info-item .k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--pink); width:130px; flex:none; padding-top:4px;}
.info-item .v{font-size:15.5px; color:var(--ink);}
.info-item .v a:hover{color:var(--pink);}

/* ============================================================
   Modal
   ============================================================ */
.modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(5,4,8,0.82);
  backdrop-filter:blur(6px); z-index:200; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open{display:flex;}
.modal-box{
  background:var(--bg-2); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:clamp(24px,3vw,36px); max-width:520px; width:100%; max-height:90vh;
  overflow-y:auto; position:relative;
}
.modal-close{position:absolute; top:14px; right:16px; background:none; border:none; font-size:24px; cursor:pointer; color:var(--muted); padding:4px; line-height:1;}
.modal-close:hover{color:var(--pink);}
.modal-box h3{margin-bottom:6px;}
.modal-box .modal-sub{color:var(--muted); font-size:14px; margin-bottom:22px;}
.resume-note{border:1px solid var(--line); padding:12px 14px; font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.6;}
.resume-note a{color:var(--pink);}

/* ============================================================
   Sidebar layout (industry detail pages)
   ============================================================ */
.ind-layout{display:grid; grid-template-columns:minmax(0,250px) minmax(0,1fr); gap:clamp(32px,4.5vw,72px); align-items:start;}
@media (max-width:1000px){.ind-layout{grid-template-columns:minmax(0,1fr); gap:32px;}}
.ind-nav{position:sticky; top:98px; border-top:1px solid var(--line);}
@media (max-width:1000px){.ind-nav{position:static;}}
.ind-nav h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--faint); font-weight:500;
  padding:14px 0 12px; margin:0;
}
.ind-nav a{
  display:block; padding:12px 0; border-top:1px solid var(--line-soft);
  font-size:14.5px; color:var(--muted);
}
.ind-nav a:hover{color:var(--ink);}
.ind-nav a.current{color:var(--pink);}
.ind-body h2{font-size:clamp(22px,2.4vw,34px); margin:44px 0 16px;}
.ind-body h2:first-child{margin-top:0;}
.ind-body p{color:var(--body); font-size:15.5px; line-height:1.75;}

/* ============================================================
   Prose (legal pages)
   ============================================================ */
.prose{max-width:78ch;}
.prose h2{font-size:clamp(20px,2.2vw,30px); margin:48px 0 14px;}
.prose h3{font-size:17px; margin:28px 0 10px;}
.prose p,.prose li{color:var(--muted); font-size:15px; line-height:1.75;}
.prose ul{padding-left:20px;}
.prose li{margin-bottom:10px;}
.prose a{color:var(--ink); border-bottom:1px solid rgba(240,5,139,0.5);}
.prose a:hover{color:var(--pink);}
.prose .updated{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--faint); margin-bottom:12px;}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{border-top:1px solid var(--line); padding:clamp(48px,6vw,88px) var(--gutter) 0;}
.footer-top{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.5vw,56px);
}
@media (max-width:1000px){.footer-top{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.footer-top{grid-template-columns:minmax(0,1fr);}}
.footer-col h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--faint); font-weight:500; margin-bottom:18px;
}
.footer-col .brand{font-size:25px; margin-bottom:18px;}
.footer-col p{font-size:15px; line-height:1.6; color:var(--dim); max-width:34ch;}
.footer-links{display:flex; flex-direction:column; gap:11px;}
.footer-links a,.footer-links span{font-size:14.5px; color:var(--body);}
.footer-links a:hover{color:var(--pink);}
.footer-bottom{
  max-width:var(--max); margin:clamp(40px,5vw,72px) auto 0;
  border-top:1px solid var(--line-soft); padding:22px 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--faint);
}
.footer-bottom a{color:var(--faint);}
.footer-bottom a:hover{color:var(--pink);}
.footer-bottom .grp{display:flex; gap:24px; flex-wrap:wrap;}

/* ============================================================
   404
   ============================================================ */
.error-code{
  font-family:var(--mono); font-size:clamp(60px,10vw,150px); font-weight:500;
  color:var(--pink); line-height:1; margin-bottom:20px; letter-spacing:-0.02em;
}

/* Utilities */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.narrow{max-width:70ch;}
.rule-top{border-top:1px solid var(--line); padding-top:clamp(28px,3.5vw,48px);}


/* ============================================================
   Case study (Selected work)
   ============================================================ */
.case{border-top:1px solid var(--line); padding:clamp(40px,5vw,72px) 0;}
.case:last-of-type{border-bottom:1px solid var(--line);}
.case-tag{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--pink); margin-bottom:18px;
}
.case h3{
  font-size:clamp(24px,3.4vw,38px); font-weight:800; letter-spacing:-0.04em;
  line-height:1.02; margin-bottom:22px; max-width:20ch;
}
.case-intro{font-size:clamp(16px,1.4vw,20px); line-height:1.6; color:var(--body); max-width:60ch; margin-bottom:34px;}

.case-meta{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:clamp(30px,3.5vw,48px);
}
@media (max-width:820px){.case-meta{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:460px){.case-meta{grid-template-columns:minmax(0,1fr);}}
.case-meta > div{padding:20px 24px 20px 0; border-left:1px solid var(--line); padding-left:24px;}
.case-meta > div:first-child{border-left:none; padding-left:0;}
@media (max-width:820px){
  .case-meta > div:nth-child(3){border-left:none; padding-left:0;}
  .case-meta > div:nth-child(n+3){border-top:1px solid var(--line);}
}
@media (max-width:460px){
  .case-meta > div{border-left:none; padding-left:0; border-top:1px solid var(--line);}
  .case-meta > div:first-child{border-top:none;}
}
.case-meta .k{font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--faint);}
.case-meta .v{font-size:15px; font-weight:600; color:var(--ink); margin-top:8px; line-height:1.4;}

.case-body{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(26px,3vw,48px); margin-bottom:clamp(28px,3.5vw,44px);}
@media (max-width:900px){.case-body{grid-template-columns:minmax(0,1fr); gap:28px;}}
.case-body h4{
  font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--faint); font-weight:500; margin-bottom:12px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.case-body p{font-size:14.5px; line-height:1.7; color:var(--muted); margin:0 0 12px;}
.case-body ul{margin:0; padding:0; list-style:none;}
.case-body li{
  font-size:14.5px; line-height:1.6; color:var(--muted);
  padding-left:18px; position:relative; margin-bottom:10px;
}
.case-body li::before{content:''; position:absolute; left:0; top:9px; width:5px; height:5px; background:var(--pink);}