/* ============================================================================
   glass-light.css - repaints the dark "liquid glass" theme to the light
   AJC homepage design system (see index.html, the canonical source).

   Load this AFTER glass.css / cases.css / commit.css. It only overrides
   presentation: colours, type, radii, shadows. It never changes layout
   flow, never touches [hidden] behaviour, and none of the stylesheets it
   overrides are themselves modified - glass.css is shared with pages that
   are deliberately out of scope (careers-*, calculator, financial-model,
   index-old), so it must stay exactly as it is.
   ============================================================================ */

:root{
  /* glass.css declares these as a dark palette; retarget them in place so
     every rule that consumes them lands on the light system. */
  --serif:'Plus Jakarta Sans',sans-serif;
  --body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Plus Jakarta Sans',sans-serif;
  --display:'Plus Jakarta Sans',sans-serif;
  --gold:#C7963F; --gold-dim:#AB8032; --gold-deep:#A57B28; --gold-d:#AB8032;
  --ink:#131313; --cream:#FBF8F1; --pill-bg:#F7EFDD; --pill-bd:#E3CD9C;
  --paper:#FBF8F1;
  --line:rgba(17,17,17,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* the white-on-dark text ramp flips to ink-on-light */
  --w90:#131313; --w70:#4a4a4a; --w50:#6b6257; --w30:#8a8177;
}

/* full-screen fixed layers: grain + ambient dark gradient */
body::after{display:none!important}
body::before{display:none!important}

html{background:#fff}
body{
  background:#fff;color:#3c3c3c;
  font-family:var(--body);font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--pill-bg);color:var(--ink)}
h1,h2,h3,h4,h5{color:var(--ink)}

/* Jakarta has no true italic; glass.css/cases.css set font-style:italic on
   every display number for its serif face, which the browser then
   synthesises into a smeared oblique. Neutralise it globally. */
.serif,.sb .v,.sb .v .u,.big-metric,.mv,.cmv,.prv,.bv,.fcv,
.phase .num,.rlv,.rmore summary .pm,em{font-style:normal!important}

/* ---------- surfaces ---------- */
.liquid-glass,.liquid-glass-strong{
  background:#fff!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:1px solid var(--line)!important;
  box-shadow:0 18px 44px rgba(40,30,10,.09)!important;
}
.liquid-glass::before,.liquid-glass-strong::before{display:none!important}

/* ---------- buttons ---------- */
.btn-gold{
  background:linear-gradient(to bottom,var(--gold),var(--gold-dim))!important;
  color:#fff!important;
  font-family:var(--body);font-weight:700;font-size:15px;
  border-radius:100px;padding:16px 32px;
  box-shadow:0 12px 28px rgba(171,128,50,.32)!important;
}
.btn-gold:hover{
  transform:translateY(-2px);filter:brightness(1.05);
  box-shadow:0 18px 38px rgba(171,128,50,.4)!important;
}
.btn-white,.btn-glass{
  background:#fff!important;color:var(--ink)!important;
  border:1.5px solid var(--line)!important;border-radius:100px;
  font-family:var(--body);font-weight:700;
  box-shadow:0 6px 18px rgba(40,30,10,.06)!important;
}
.btn-white:hover,.btn-glass:hover{border-color:var(--pill-bd)!important;box-shadow:0 10px 24px rgba(40,30,10,.1)!important}
.btn-white::before,.btn-glass::before{display:none!important}
/* .btn-bare is white text in glass.css - invisible on a light page.
   Only in-scope pages load this file, so the dark pages keep the white. */
.btn-bare{color:var(--ink)!important;font-weight:700}
.btn-bare:hover{color:var(--gold-dim)!important;opacity:1}

/* ---------- chips ---------- */
.tag-pill,.cpill{
  background:var(--pill-bg)!important;border:1px solid var(--pill-bd)!important;
  color:var(--gold-deep)!important;font-family:var(--body);font-weight:700;
  letter-spacing:.1em;box-shadow:none!important;
}
.tag-pill::before,.cpill::before{display:none!important}

/* ---------- nav ----------
   glass.js injects .nav-burger and the .nav-mobile panel at runtime, so
   both need light styling. .nav-mobile is NOT hidden here: the pages that
   must hide it (the Calendly ones, where a fixed backdrop-filter layer
   blanks the embed) already do so in their own <style> blocks. */
.nav .nav-logo{background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
.nav-burger{
  background:#fff!important;border:1px solid var(--line)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 6px 18px rgba(40,30,10,.06)!important;
}
.nav-burger span{background:var(--ink)!important}
.nav-mobile{
  background:#fff!important;border:1px solid var(--line)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 18px 44px rgba(40,30,10,.14)!important;
}
.nav-mobile::before{display:none!important}
.nav-mobile-links a{color:var(--ink)!important;font-weight:700}
.nav-mobile-links a:hover{color:var(--gold-dim)!important}

/* ---------- charts (white presentation attributes -> CSS wins) ---------- */
.chart{background:var(--cream)!important;border:1px solid var(--line)!important;box-shadow:none!important}
.chart svg line{stroke:rgba(17,17,17,0.07)!important}
.spark{stroke:var(--gold-dim)!important}
.spark-dot{fill:rgba(17,17,17,0.28)!important}
.dot-gold{fill:var(--gold)!important}
.halo-gold{stroke:var(--gold)!important;fill:none!important}
.qlabel{color:#5a5a5a!important;font-weight:600}
.xlabels span{color:#8a8177!important;font-weight:600}

/* ---------- stat + case internals ---------- */
.sb .k{color:#8a8177!important;font-weight:700}
.sb .v{color:var(--ink)!important;font-weight:800;letter-spacing:-.03em}
.sb .d{color:#8a8177!important;font-weight:500}
.big-metric,.mv,.cmv,.rlv sup{color:var(--gold-dim)!important;font-weight:800}
.big-metric-l,.ml,.cml{color:#6b6257!important;font-weight:500}
.case h3,.ccard h4,.rcase h3{color:var(--ink)!important;font-weight:800;letter-spacing:-.02em}
.case .desc,.ccard .cdesc,.rstory{color:#5a5a5a!important;font-weight:400}
.rstory b{color:var(--ink)!important;font-weight:700}

/* ---------- cases.css ledger ---------- */
.res-band .bandhead{border-bottom-color:var(--line)!important}
.res-band h2.bt{color:var(--ink)!important;font-weight:800}
.res-band h2.bt em{color:var(--gold-dim)!important;font-weight:800}
.res-band .bandsub{color:#8a8177!important;font-weight:600}
.rcase-media{border-color:var(--line)!important;background:var(--cream)!important}
.rcase-media img{box-shadow:0 14px 34px rgba(40,30,10,.14)!important}
.rcase-foot,.rlede,.rmore{border-color:var(--line)!important}
.rlede .rlv{color:var(--ink)!important;font-weight:800}
.rlede .rll{color:var(--gold-deep)!important;font-weight:700}
.rmore summary{color:#8a8177!important;font-weight:700}
.rmore summary:hover{color:var(--gold-dim)!important}
.rmore summary .pm{color:var(--gold-dim)!important}

/* before / after breakdown */
.ba-block.before .bah{color:#8a8177!important;font-weight:700}
.ba-block.solution .bah{color:var(--gold-deep)!important;font-weight:700}
.ba-block .bah::after{background:var(--line)!important}
.ba-list li{color:#4a4a4a!important;font-weight:400}
.ba-list li b{color:var(--ink)!important;font-weight:700}

/* win cards + other-project cards: index.html .tcard treatment */
.wincard{
  background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;
  box-shadow:0 12px 34px rgba(40,30,10,.06)!important;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.wincard:hover{transform:translateY(-3px);box-shadow:0 20px 46px rgba(40,30,10,.1)!important}
.wincard .wc{color:#454545!important;font-weight:400}
.wincard .wc b{color:var(--gold-dim)!important;font-weight:700}
.opcard{
  background:#fff!important;border:1px solid var(--line)!important;border-radius:16px!important;
  box-shadow:0 12px 34px rgba(40,30,10,.06)!important;
}
.opcard .opt{color:var(--gold-deep)!important;font-weight:700}

/* ---------- commit.css commitment box ----------
   Colour only. The .is-done / .is-error / [hidden] state classes that
   commit.js toggles are left entirely alone. */
.commitbox{
  background:linear-gradient(180deg,#FDFAF3,#F6EEDC)!important;
  border:1px solid var(--pill-bd)!important;border-radius:18px;
  box-shadow:0 18px 44px rgba(40,30,10,.09)!important;
}
.commitbox::before{display:none!important}
.commitbox .cb-title{color:var(--ink)!important;font-weight:800}
.commitbox .cb-sub{color:#5a5a5a!important;font-weight:400}
.commitbox .cb-sub b{color:var(--gold-deep)!important;font-weight:700}
.commitbox .cb-input{
  background:#fff!important;border:1.5px solid var(--line)!important;
  color:var(--ink)!important;border-radius:12px;font-weight:400;
}
.commitbox .cb-input::placeholder{color:#a9a196!important}
.commitbox .cb-input:focus{
  border-color:var(--pill-bd)!important;background:#fff!important;
  box-shadow:0 0 0 4px rgba(199,150,63,.14)!important;
}
.commitbox.is-error .cb-input{border-color:#c0392b!important}
.commitbox .cb-btn{
  background:linear-gradient(to bottom,var(--gold),var(--gold-dim))!important;
  color:#fff!important;border-radius:100px;font-weight:700;
  box-shadow:0 10px 24px rgba(171,128,50,.28)!important;
}
.commitbox .cb-err{color:#c0392b!important;font-weight:600}
.commitbox .cb-err b{color:var(--ink)!important;font-weight:700}
.commitbox .cb-done .cb-tick{
  background:linear-gradient(to bottom,var(--gold),var(--gold-dim))!important;color:#fff!important;
}
.commitbox .cb-done b{color:var(--ink)!important;font-weight:800}
.commitbox .cb-done span{color:#5a5a5a!important;font-weight:400}

/* ---------- footer ---------- */
footer.mini{border-top:1px solid var(--line)!important;background:#fff}
footer.mini .frow{color:#8a8177!important;font-weight:600}
footer.mini .frow a{color:#6b6257!important}
footer.mini .frow a:hover{color:var(--gold-dim)!important}
.disclaimer{color:#9a917f!important;font-weight:400}

/* ---------- misc dark remnants ---------- */
hr,.divider{border-color:var(--line)!important}