/* ============================================================
   GAM COMMUNICATION LLC — DIRECTION B "TECHNICAL WORKSHOP"
   Tokens: 1. primitives  2. semantic roles  3. components
   ============================================================ */
:root{
  /* --- 1. primitives (cool-tinted greys, never neutral grey) --- */
  --g-950:#090B0C; --g-900:#0C0F10; --g-850:#101415; --g-800:#151A1B;
  --g-700:#1E2425; --g-600:#2C3436; --g-500:#3D4749; --g-400:#5B6668;
  --g-300:#7E8A8B; --g-200:#A9B2B2; --g-100:#D6DBDA; --g-050:#EDF0EF;
  --phosphor:#B7F24B;        /* the one electric accent */
  --phosphor-dim:#7FA832;

  /* --- 2. semantic roles (named by job, never by colour) --- */
  --surface-base:var(--g-950);
  --surface-panel:var(--g-900);
  --surface-raised:var(--g-850);
  --surface-inset:var(--g-800);
  --rule-hairline:var(--g-700);   /* thin rules between rows */
  --rule-edge:var(--g-600);       /* card and panel edges */
  --rule-strong:var(--g-500);
  --ink-primary:var(--g-050);     /* 16.6:1 on base */
  --ink-body:var(--g-100);        /* 12.4:1 */
  --ink-muted:var(--g-200);       /*  7.6:1 */
  --ink-label:var(--g-300);       /*  4.6:1 — smallest text still AA */
  --ink-dormant:var(--g-400);     /* non-text only: rules, ticks */
  --accent-signal:var(--phosphor);
  --accent-ink:var(--g-950);      /* text placed ON the accent */
  --accent-quiet:var(--phosphor-dim);

  /* --- typography --- */
  --font-display:"Archivo",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --step--1:clamp(.75rem,.72rem + .12vw,.8125rem);
  --step-0:clamp(.9375rem,.9rem + .18vw,1rem);
  --step-1:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  --step-2:clamp(1.375rem,1.25rem + .6vw,1.75rem);
  --step-3:clamp(1.75rem,1.5rem + 1.2vw,2.5rem);
  --step-4:clamp(2.25rem,1.7rem + 2.6vw,4rem);

  /* --- spacing 4/8 --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(20px,4vw,56px);
  --maxw:1280px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--surface-base); color:var(--ink-body);
  font-family:var(--font-display); font-variation-settings:"wdth" 100,"wght" 400;
  font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* machined surface: a faint measured grid, not a decorative texture */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 100%);
}
body>*{position:relative; z-index:1}
img{max-width:100%}
a{color:inherit}

h1,h2,h3,h4{
  font-family:var(--font-display); margin:0;
  font-variation-settings:"wdth" 86,"wght" 700;
  letter-spacing:-.015em; line-height:1.04; color:var(--ink-primary);
  text-wrap:balance;
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2); font-variation-settings:"wdth" 88,"wght" 650}
h4{font-size:var(--step-1); font-variation-settings:"wdth" 92,"wght" 600; letter-spacing:-.005em}
p{margin:0}

.shell{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.lede{font-size:var(--step-1); color:var(--ink-muted); line-height:1.55; max-width:62ch}
.measure{max-width:64ch}

/* --- micro label: mono, caps, tracked, numbered --- */
.tag{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-label);
  display:inline-flex; align-items:center; gap:var(--s-3);
}
.tag .idx{color:var(--accent-quiet)}
.tag--rule{width:100%; gap:var(--s-4)}
.tag--rule::after{content:""; flex:1; height:1px; background:var(--rule-hairline)}

.mono{font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.01em}

/* --- section frame with visible vertical rules --- */
.band{border-top:1px solid var(--rule-hairline); padding-block:var(--s-9)}
.band--tight{padding-block:var(--s-8)}

/* ============ HEADER ============ */
.masthead{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--surface-base) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-hairline);
}
.masthead .shell{display:flex; align-items:center; gap:var(--s-5); min-height:68px}
.brand{display:flex; align-items:center; gap:var(--s-3); text-decoration:none; margin-right:auto}
.brand .mark{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border:1px solid var(--rule-strong); color:var(--accent-signal);
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.04em;
}
.brand .name{
  font-variation-settings:"wdth" 86,"wght" 700; font-size:16px;
  letter-spacing:-.01em; color:var(--ink-primary); white-space:nowrap;
}
.brand .suffix{font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; color:var(--ink-label); margin-left:2px}
.nav{display:flex; gap:2px}
.nav a{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; color:var(--ink-muted);
  padding:8px 12px; border:1px solid transparent;
}
.nav a:hover,.nav a:focus-visible{color:var(--ink-primary); border-color:var(--rule-edge)}
.nav a[aria-current]{color:var(--accent-signal); border-color:var(--rule-edge)}
.nav-toggle{display:none!important}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:var(--s-3);
  font-family:var(--font-mono); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:13px 20px; border:1px solid var(--rule-strong); color:var(--ink-primary);
  background:transparent; transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.btn:hover{border-color:var(--ink-dormant); color:#fff}
.btn--primary{background:var(--accent-signal); border-color:var(--accent-signal); color:var(--accent-ink); font-weight:700}
.btn--primary:hover{background:#C6FA63; border-color:#C6FA63; color:var(--accent-ink)}
.btn .arrow{font-size:14px; line-height:1}
:focus-visible{outline:2px solid var(--accent-signal); outline-offset:3px}

/* ============ HERO ============ */
.hero{padding-block:clamp(48px,7vw,104px) var(--s-9)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,72px); align-items:start}
.hero h1 .lit{color:var(--accent-signal)}
.hero .lede{margin-top:var(--s-5)}
.hero-actions{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6)}

/* fact strip — data blocks on a rule */
.factstrip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:var(--s-7); border-top:1px solid var(--rule-hairline)}
.factstrip div{padding:var(--s-4) var(--s-4) 0 0; border-right:1px solid var(--rule-hairline)}
.factstrip div:last-child{border-right:0}
.factstrip dt{font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-label)}
.factstrip dd{margin:var(--s-2) 0 0; font-family:var(--font-mono); font-size:13px; color:var(--ink-body); line-height:1.45}

/* ============ PANEL: company record (hand-drawn interface object) ============ */
.panel{border:1px solid var(--rule-edge); background:var(--surface-panel)}
.panel__head{
  display:flex; align-items:center; gap:var(--s-3);
  padding:12px var(--s-4); border-bottom:1px solid var(--rule-hairline); background:var(--surface-raised);
}
.panel__head .dot{width:7px; height:7px; background:var(--accent-signal); flex:none}
.panel__head .title{font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-muted)}
.panel__head .right{margin-left:auto; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--ink-label)}
.record{display:grid}
.record__row{display:grid; grid-template-columns:26px 132px minmax(0,1fr); align-items:baseline; gap:var(--s-3); padding:11px var(--s-4); border-bottom:1px solid var(--rule-hairline)}
.record__row:last-child{border-bottom:0}
.record__n{font-family:var(--font-mono); font-size:10px; color:var(--ink-dormant)}
.record__k{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-label)}
.record__v{font-family:var(--font-mono); font-size:13px; color:var(--ink-body); line-height:1.5; overflow-wrap:anywhere}
.record__v b{color:var(--ink-primary); font-weight:500}
.panel__foot{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; padding:12px var(--s-4); border-top:1px solid var(--rule-edge); background:var(--surface-raised)}
.stamp{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-signal); border:1px solid var(--accent-quiet); padding:4px 8px}
.panel__foot .note{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--ink-label)}

/* ============ WHAT WE DO ============ */
.threecol{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-top:var(--s-7); border-top:1px solid var(--rule-edge)}
.threecol > article{padding:var(--s-6) var(--s-5) 0 0; border-right:1px solid var(--rule-hairline)}
.threecol > article:last-child{border-right:0; padding-right:0}
.threecol > article:not(:first-child){padding-left:var(--s-5)}
.threecol h3{margin-bottom:var(--s-3)}
.threecol p{color:var(--ink-muted); max-width:42ch}
.threecol .tag{margin-bottom:var(--s-4)}

/* ============ PRODUCTS ============ */
.products{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5); margin-top:var(--s-7)}
.product{border:1px solid var(--rule-edge); background:var(--surface-panel); display:flex; flex-direction:column}
.product__head{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-4); border-bottom:1px solid var(--rule-hairline)}
.product__head h3{font-size:var(--step-2); margin-right:auto}
.status{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--rule-edge); color:var(--ink-muted)}
.status i{width:6px; height:6px; display:block; background:var(--ink-dormant)}
.status--live{color:var(--accent-signal); border-color:var(--accent-quiet)}
.status--live i{background:var(--accent-signal)}
.product__body{padding:var(--s-5) var(--s-4); display:flex; flex-direction:column; gap:var(--s-4); flex:1}
.product__body p{color:var(--ink-muted)}
.product__meta{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--rule-hairline); margin-top:auto}
.product__meta div{padding:var(--s-3) var(--s-4); border-right:1px solid var(--rule-hairline)}
.product__meta div:last-child{border-right:0}
.product__meta span{display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-label)}
.product__meta a,.product__meta strong{font-family:var(--font-mono); font-size:12px; color:var(--ink-primary); font-weight:400; text-decoration:none; border-bottom:1px solid var(--rule-strong)}
.product__meta strong{border-bottom:0}

/* --- figure: expiry timeline, drawn in CSS --- */
.fig{border:1px solid var(--rule-hairline); background:var(--surface-inset); padding:var(--s-4)}
.fig__cap{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-label); margin-bottom:var(--s-4)}
.timeline{position:relative; height:64px}
.timeline__axis{position:absolute; left:0; right:0; top:34px; height:1px; background:var(--rule-strong)}
.timeline__tick{position:absolute; top:28px; width:1px; height:13px; background:var(--ink-dormant)}
.timeline__window{position:absolute; top:14px; height:20px; border:1px solid var(--accent-quiet); background:rgba(183,242,75,.1)}
.timeline__lbl{position:absolute; top:0; font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-label); white-space:nowrap}
.timeline__end{position:absolute; top:24px; width:2px; height:21px; background:var(--accent-signal)}
.timeline__foot{position:absolute; top:48px; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; color:var(--ink-dormant); white-space:nowrap}

/* --- figure: attribution path (SVG) --- */
.flowfig svg{display:block; width:100%; height:auto}

/* ============ IN BUILD ============ */
.build{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:var(--s-6); border-top:1px solid var(--rule-hairline)}
.build > div{padding:var(--s-5) var(--s-5) var(--s-5) 0; border-right:1px solid var(--rule-hairline); display:flex; gap:var(--s-4); align-items:flex-start}
.build > div:last-child{border-right:0; padding-right:0; padding-left:var(--s-5)}
.build h4{margin-bottom:6px}
.build p{color:var(--ink-label); font-size:var(--step--1); max-width:40ch}
.hatch{width:44px; height:44px; flex:none; border:1px solid var(--rule-edge);
  background-image:repeating-linear-gradient(45deg,var(--g-700) 0 2px,transparent 2px 7px)}

/* ============ INFRASTRUCTURE ============ */
.infra{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px,5vw,64px); align-items:center; margin-top:var(--s-7)}
.infra ul{list-style:none; margin:var(--s-5) 0 0; padding:0; border-top:1px solid var(--rule-hairline)}
.infra li{display:grid; grid-template-columns:18px minmax(0,1fr); gap:var(--s-3); padding:var(--s-4) 0; border-bottom:1px solid var(--rule-hairline); color:var(--ink-muted)}
.infra li::before{content:""; width:7px; height:7px; margin-top:9px; background:var(--accent-signal)}
.diagram{border:1px solid var(--rule-edge); background:var(--surface-panel); padding:var(--s-5)}
.diagram svg{display:block; width:100%; height:auto}

/* ============ BILLING TABLE ============ */
.tablewrap{margin-top:var(--s-6); border:1px solid var(--rule-edge); background:var(--surface-panel)}
table.data{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:13px}
table.data th,table.data td{text-align:left; padding:14px var(--s-4); border-bottom:1px solid var(--rule-hairline); vertical-align:top}
table.data tr:last-child th,table.data tr:last-child td{border-bottom:0}
table.data th{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-label); font-weight:500; width:230px; white-space:nowrap}
table.data td{color:var(--ink-body); line-height:1.55}
table.data tr:hover td,table.data tr:hover th{background:var(--surface-raised)}

/* ============ CONTACT ============ */
.contact{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s-6); align-items:end; border:1px solid var(--rule-edge); background:var(--surface-panel); padding:clamp(24px,4vw,48px)}
.contact h2{max-width:18ch}
.mailto{font-family:var(--font-mono); font-size:clamp(14px,2.2vw,18px); color:var(--accent-signal); text-decoration:none; border-bottom:1px solid var(--accent-quiet); overflow-wrap:anywhere}

/* ============ FOOTER ============ */
.foot{border-top:1px solid var(--rule-edge); margin-top:var(--s-9); padding-block:var(--s-7) var(--s-6); background:var(--surface-panel)}
.foot__grid{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)); gap:var(--s-6)}
.foot h5{margin:0 0 var(--s-4); font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-label); font-weight:500}
.foot address{font-style:normal; font-family:var(--font-mono); font-size:12px; line-height:1.7; color:var(--ink-muted)}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.foot ul a{font-family:var(--font-mono); font-size:12px; color:var(--ink-muted); text-decoration:none}
.foot ul a:hover{color:var(--ink-primary)}
.legalbar{margin-top:var(--s-7); padding-top:var(--s-4); border-top:1px solid var(--rule-hairline); display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-5); font-family:var(--font-mono); font-size:11px; color:var(--ink-label)}

/* ============ PAGE SEPARATOR (mock-up only) ============ */
.pagebreak{border-top:1px solid var(--rule-edge); background:var(--g-950)}
.pagebreak .shell{display:flex; align-items:center; gap:var(--s-4); padding-block:var(--s-5)}
.pagebreak .line{flex:1; height:1px; background:repeating-linear-gradient(to right,var(--rule-strong) 0 6px,transparent 6px 12px)}
.pagebreak span{font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dormant); white-space:nowrap}
.pagebreak .note{color:var(--ink-label)}

/* page head for inner pages */
.pagehead{padding-block:var(--s-8) var(--s-6); border-bottom:1px solid var(--rule-hairline)}
.pagehead h2{margin-top:var(--s-4)}
.pagehead .lede{margin-top:var(--s-4)}

/* support Q/A blocks */
.qa{border-top:1px solid var(--rule-edge); margin-top:var(--s-7)}
.qa__item{display:grid; grid-template-columns:170px minmax(0,1fr); gap:var(--s-6); padding:var(--s-6) 0; border-bottom:1px solid var(--rule-hairline)}
.qa__item h4{margin-bottom:var(--s-3)}
.qa__item p{color:var(--ink-muted); max-width:62ch}
.qa__item p + p{margin-top:var(--s-3)}

/* ============ RESPONSIVE ============ */
@media (max-width:1023px){
  .hero-grid,.infra,.contact{grid-template-columns:minmax(0,1fr)}
  .contact{align-items:start}
  .threecol{grid-template-columns:minmax(0,1fr)}
  .threecol > article{border-right:0; border-bottom:1px solid var(--rule-hairline); padding:var(--s-5) 0}
  .threecol > article:not(:first-child){padding-left:0}
  .threecol > article:last-child{border-bottom:0}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-6)}
  .qa__item{grid-template-columns:minmax(0,1fr); gap:var(--s-3)}
}
@media (max-width:899px){
  .nav{display:none}
  .nav-toggle{display:inline-flex!important}
}
@media (max-width:767px){
  .products,.build{grid-template-columns:minmax(0,1fr)}
  .build > div{border-right:0; border-bottom:1px solid var(--rule-hairline); padding:var(--s-5) 0}
  .build > div:last-child{border-bottom:0; padding-left:0}
  .factstrip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .factstrip div{border-right:0; padding-right:var(--s-3); padding-bottom:var(--s-3)}
  .factstrip div:nth-child(odd){border-right:1px solid var(--rule-hairline)}
  .record__row{grid-template-columns:minmax(0,1fr)}
  .record__n{display:none}
  table.data th{width:auto; display:block; border-bottom:0; padding-bottom:0}
  table.data td{display:block; padding-top:6px}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
  .band{padding-block:var(--s-8)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}