/* ============================================================
   Lamp — After Dark
   One stylesheet for the whole site.
   Tokens up top; ~20 component classes; one breakpoint.

   Sections:
     1. Self-hosted fonts (IBM Plex, OFL licensed — see ../fonts/OFL.txt)
     2. Design system verbatim from the handoff
        (style-guide/design_handoff_after_dark/site/lamp.css)
     3. Production additions (hover states, hamburger nav, skip link,
        modifier classes replacing the handoff's inline styles)
   ============================================================ */

/* ---- 1. fonts ---- */
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/IBMPlexSans-Regular-lAaOGmG.woff2") format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/IBMPlexSans-Medium-3wJLLO0.woff2") format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/IBMPlexSans-SemiBold-qoos00i.woff2") format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/IBMPlexMono-Regular-D--HSF-.woff2") format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/IBMPlexMono-Medium-rjIKkM0.woff2") format('woff2');
}

/* ---- 2. design system (handoff verbatim) ---- */

:root{
  --bg:        #0f0e0c;
  --ink:       #ece6da;
  --amber:     #e8a13d;
  --on-amber:  #171205;
  --body:      rgba(236,230,218,.68);
  --dim:       rgba(236,230,218,.55);
  --faint:     rgba(236,230,218,.4);
  --line:      rgba(236,230,218,.12);  /* hairlines */
  --edge:      rgba(236,230,218,.14);  /* card borders */
  --fill:      rgba(236,230,218,.03);  /* card fills */
  --amber-edge:rgba(232,161,61,.3);
  --amber-fill:rgba(232,161,61,.07);
  --glow:      rgba(232,161,61,.24);
  --mono:      'IBM Plex Mono', monospace;
}

/* ---- base ---- */
*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--ink);
      font:16px/1.65 'IBM Plex Sans', system-ui, sans-serif; }
a{ color:inherit; text-decoration:none }
img{ max-width:100% }
h1{ font-size:60px; font-weight:600; line-height:1.1; letter-spacing:-.025em; margin:0; text-wrap:balance }
h2{ font-size:38px; font-weight:600; line-height:1.2; letter-spacing:-.02em; margin:0 0 18px; text-wrap:balance }
h3{ font-size:19px; font-weight:600; line-height:1.35; margin:0 0 10px }
p{ margin:0 0 18px; color:var(--body) }
p:last-child{ margin-bottom:0 }
.amber{ color:var(--amber) }
.lede{ font-size:19px; max-width:680px }
.big{ font-size:30px; line-height:1.45; font-weight:500; color:var(--ink) }

.wrap{ max-width:1240px; margin:0 auto; padding:0 56px }
section{ border-bottom:1px solid var(--line); padding:80px 0 }

/* ---- atoms ---- */
.label{ font-family:var(--mono); font-size:13px; letter-spacing:.16em;
        text-transform:uppercase; color:var(--dim); margin:0 0 32px }
.label.amber{ color:var(--amber) }
.num{ font-family:var(--mono); font-size:13px; color:var(--amber) }

.btn{ display:inline-block; background:var(--amber); color:var(--on-amber);
      border:1px solid var(--amber); border-radius:6px; padding:14px 30px;
      font:600 16px/1.4 'IBM Plex Sans', sans-serif; cursor:pointer }
.btn.ghost{ background:none; color:var(--ink); border-color:rgba(236,230,218,.3); font-weight:400 }
.actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px }

.chip{ display:inline-block; border:1px solid rgba(236,230,218,.2); border-radius:999px;
       padding:9px 20px; font-size:14px; color:var(--body) }
.chip.on{ border-color:rgba(232,161,61,.5); background:rgba(232,161,61,.1); color:var(--amber) }
.chips{ display:flex; flex-wrap:wrap; gap:10px }

.dot{ display:inline-block; width:12px; height:12px; border-radius:50%;
      background:var(--amber); box-shadow:0 0 14px 3px rgba(232,161,61,.55) }

.avatar{ display:flex; align-items:center; justify-content:center; flex:none;
         width:72px; height:72px; border-radius:50%; font-size:24px; font-weight:600;
         color:var(--amber); background:rgba(232,161,61,.15); border:1px solid rgba(232,161,61,.4) }

/* ---- layout helpers ---- */
.grid{ display:grid; gap:24px }
.grid.c2{ grid-template-columns:1fr 1fr }
.grid.c3{ grid-template-columns:1fr 1fr 1fr }
.grid.c4{ grid-template-columns:repeat(4,1fr) }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start }
.split.narrow{ grid-template-columns:1fr 420px }
.split.rnarrow{ grid-template-columns:420px 1fr }

/* ---- components ---- */
.card{ border:1px solid var(--edge); border-radius:12px; padding:34px; background:var(--fill) }
.card.amber{ border-color:var(--amber-edge); background:var(--amber-fill) }
.card .more{ display:inline-block; margin-top:8px; font-size:15px; color:var(--amber) }
.card p{ font-size:15px }

.stat b{ display:block; font-size:34px; font-weight:600; letter-spacing:-.02em;
         color:var(--amber); text-shadow:0 0 20px rgba(232,161,61,.35) }
.stat span{ display:block; margin-top:6px; font-size:13px; line-height:1.5; color:var(--dim) }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.stats .stat{ border:1px solid var(--edge); border-radius:12px; padding:24px; background:var(--fill) }

.step{ border-top:1px solid rgba(232,161,61,.5); padding-top:22px }
.step p{ font-size:14px }

blockquote{ margin:32px 0 0; padding:4px 0 4px 24px; border-left:2px solid var(--amber) }
blockquote p{ font-style:italic; font-size:18px; color:var(--ink) }
blockquote cite{ font-style:normal; font-size:14px; color:var(--dim) }

.tick li::marker{ content:"→  "; color:var(--amber) }
.cross li::marker{ content:"✕  " }
.card ul{ list-style-position:inside; padding:0; margin:0; display:grid; gap:14px; font-size:15px }
.card.plain ul{ color:var(--body) }

.rows{ display:grid }
.rows > *{ display:grid; grid-template-columns:1fr auto auto; gap:24px; align-items:baseline;
           padding:16px 0; border-top:1px solid var(--line) }
.rows > *:last-child{ border-bottom:1px solid var(--line) }
.rows b{ font-weight:600 }
.rows .meta{ font-family:var(--mono); font-size:13px; color:var(--dim) }
.rows a{ color:var(--amber); font-size:14px }

.field{ display:grid; gap:8px; margin-bottom:22px }
.field span{ font-size:14px; color:rgba(236,230,218,.7) }
input, textarea{ width:100%; background:none; border:1px solid rgba(236,230,218,.2);
       border-radius:8px; padding:14px 16px; color:var(--ink);
       font:15px 'IBM Plex Sans', sans-serif }
input::placeholder, textarea::placeholder{ color:rgba(236,230,218,.35) }
textarea{ min-height:110px; resize:vertical }

/* ---- header ---- */
header{ border-bottom:1px solid var(--line) }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:24px 0 }
.logo{ display:flex; align-items:center; gap:10px; font-size:21px; font-weight:600 }
.nav-links{ display:flex; align-items:center; gap:34px; font-size:15px; color:rgba(236,230,218,.7) }
.nav-links a[aria-current]{ color:var(--amber) }
.nav-links .btn{ padding:11px 22px; font-size:15px }

/* ---- hero ---- */
.hero{ position:relative; overflow:hidden; padding:110px 0 90px }
.hero::before{ content:""; position:absolute; pointer-events:none; border-radius:50%;
    width:900px; height:620px; top:-280px; left:50%; transform:translateX(-50%);
    background:radial-gradient(ellipse at center, var(--glow) 0%, transparent 70%) }
.hero.left::before{ left:-120px; transform:none }
.hero.right::before{ left:auto; right:-120px; transform:none }
.hero .wrap{ position:relative }
.hero.center{ text-align:center }
.hero.center .lede, .hero.center .actions{ margin-left:auto; margin-right:auto }
.hero.center .actions{ justify-content:center }
.hero .lede{ margin-top:28px }

/* ---- cta band ---- */
.cta{ position:relative; overflow:hidden; padding:110px 0; text-align:center }
.cta::before{ content:""; position:absolute; pointer-events:none; border-radius:50%;
    width:900px; height:600px; bottom:-300px; left:50%; transform:translateX(-50%);
    background:radial-gradient(ellipse at center, rgba(232,161,61,.22) 0%, transparent 65%) }
.cta .wrap{ position:relative }
.cta h2{ font-size:48px }
.cta p{ max-width:560px; margin:0 auto }
.cta .actions{ justify-content:center }

/* ---- footer ---- */
.site-foot{ padding:56px 0 28px }
.site-foot .cols{ display:grid; grid-template-columns:1fr auto auto; gap:80px;
    padding-bottom:40px; border-bottom:1px solid var(--line) }
.site-foot .cols > div{ display:grid; gap:12px; font-size:14px; color:var(--body); align-content:start }
.site-foot small{ font-size:14px; color:var(--dim) }
.site-foot .head{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--faint) }
.site-foot .legal{ display:flex; justify-content:space-between; padding-top:22px;
    font-size:13px; color:var(--faint) }

/* ---- mobile ---- */
@media (max-width:900px){
  .wrap{ padding:0 22px }
  section{ padding:40px 0 }
  h1{ font-size:34px }
  h2{ font-size:26px }
  .lede{ font-size:15px }
  .big{ font-size:21px }
  .hero{ padding:56px 0 46px }
  .cta{ padding:52px 0 }
  .cta h2{ font-size:28px }
  .grid.c2, .grid.c3, .grid.c4, .split, .split.narrow, .split.rnarrow{ grid-template-columns:1fr }
  .split{ gap:32px }
  .actions{ flex-direction:column }
  .btn{ text-align:center; width:100% }
  .nav-links a:not(.btn){ display:none }   /* links live in footer on mobile */
  .nav-links .btn{ width:auto }
  .rows > *{ grid-template-columns:1fr; gap:4px }
  .site-foot .cols{ grid-template-columns:1fr; gap:28px }
}

/* ============================================================
   3. Production additions
   ============================================================ */

/* ---- hover states ---- */
.btn:hover{ filter:brightness(1.08) }
.btn.ghost:hover{ filter:none; border-color:rgba(236,230,218,.5) }
.card:has(a.more):hover{ border-color:rgba(236,230,218,.25) }
.nav-links a:not(.btn):hover{ color:var(--ink) }
.rows a:hover, .card .more:hover{ text-decoration:underline }

/* ---- skip link ---- */
.skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip:focus{ left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
    background:var(--bg); border:1px solid var(--amber-edge); border-radius:10px; z-index:9999 }

/* ---- heading sizes (replace the handoff's inline styles, which
       would override the 900px media query and break mobile) ---- */
.h1-72{ font-size:72px }
.h1-64{ font-size:64px }
.h1-58{ font-size:58px }
.h1-56{ font-size:56px }
.h1-54{ font-size:54px }
.h1-52{ font-size:52px }
.h2-34{ font-size:34px }

/* ---- repeated inline-style patterns, promoted to classes ---- */
.head{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--faint) }

.stats.bare{ gap:12px }
.stats.bare .stat{ border:0; padding:0; background:none; border-radius:0 }
.stats.bare .stat b{ font-size:27px }

.stat-rows{ display:grid; gap:0 }
.stat-rows .stat{ display:flex; align-items:baseline; gap:18px;
    padding:14px 0; border-top:1px solid var(--line) }
.stat-rows .stat:last-child{ border-bottom:1px solid var(--line) }
.stat-rows .stat b{ min-width:110px }
.stat-rows .stat span{ margin-top:0 }

.card.pad-48{ padding:48px }
.card.pad-40{ padding:40px }
.card.pad-30{ padding:30px }
.card.pad-24{ padding:24px }
.card.pad-22{ padding:22px }
.card.dense p{ font-size:14px }

.avatar.lg{ width:88px; height:88px; font-size:30px }

.card .num + h3{ margin-top:14px }
.step .num + h3{ margin-top:12px }

.site-foot .logo{ font-size:19px }
.site-foot .dot{ width:10px; height:10px }

.contact-hero{ grid-template-columns:1fr 560px; gap:80px }

/* ---- key/value meta rows (case-study details): fixed label column so
       long values don't squeeze the label, values left-aligned ---- */
.rows.kv > *{ grid-template-columns:160px 1fr auto }

/* ---- prose pages (privacy) ---- */
.prose ul{ padding-left:20px; margin:0 0 18px; color:var(--body); display:grid; gap:8px }

/* ---- contact form ---- */
/* explicit height so per-field style injection (password managers) or zoom
   rounding can't change one input's box relative to its row neighbour */
input{ height:48px }
input:focus, textarea:focus{ outline:none; border-color:var(--amber) }
.chip{ cursor:pointer; position:relative; user-select:none; -webkit-user-select:none }
.chip input[type=radio]{ position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none }
.chip:has(input:checked){ border-color:rgba(232,161,61,.5); background:rgba(232,161,61,.1); color:var(--amber) }
.field-error{ font-size:13px; color:var(--amber) }
.honeypot{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.form-banner{ margin-bottom:24px; padding:20px 24px }

/* ---- mobile: hamburger nav + resets for the classes above ---- */
.nav-toggle{ display:none; background:none; border:1px solid var(--edge); border-radius:8px;
    color:var(--ink); padding:8px 12px; font:15px 'IBM Plex Sans', sans-serif; cursor:pointer }

@media (max-width:900px){
  .h1-72, .h1-64, .h1-58, .h1-56, .h1-54, .h1-52{ font-size:34px }
  .h2-34{ font-size:26px }
  .contact-hero{ grid-template-columns:1fr; gap:32px }

  .nav-toggle{ display:inline-block }
  .nav-links{ position:relative }
  .nav-links.open a:not(.btn){ display:block }
  header .nav{ flex-wrap:wrap; gap:14px }
  .nav-links.open{ order:3; flex-basis:100%; flex-direction:column; align-items:stretch;
      display:flex; gap:0; padding:8px 0 16px; border-top:1px solid var(--line) }
  .nav-links.open a:not(.btn){ padding:12px 0; border-bottom:1px solid var(--line) }
  .nav-links.open .btn{ margin-top:14px; width:100% }
}