/* =============================================================================
   Calder & Reyes — demo law-firm site. Direction: STEEL & GLASS.
   A downtown injury firm rendered as a curtain wall: matte-black steel mullions
   over clear + seeded-white glass, real city light behind the grid, ONE oxblood
   pane reserved for the single most important action. Independent visual world —
   NOT the Burt brand (this site hosts the live Burt widget, it does not wear it).
   ============================================================================= */

:root {
  /* Steel */
  --steel-900: #101317;   /* near-black mullion / ink */
  --steel-800: #191d23;
  --steel-700: #262b32;   /* structural steel */
  --steel-500: #4b535d;   /* muted ink */
  --steel-400: #5a626b;   /* secondary / small text — AA on --paper */
  --steel-300: #9aa3ad;

  /* Glass */
  --glass-line:  #c3ccd1; /* mullion hairline on light */
  --glass-line2: #d8dee1;
  --glass-white: #eef1f2; /* seeded white pane */
  --glass-cool:  #e3e9ea; /* faint green-glass tint */
  --glass-deep:  #0d1013; /* glass at night (hero) */
  --paper:       #f4f6f6; /* page ground */
  --paper-2:     #ffffff;

  /* The one saturated pane */
  --oxblood:     #8f2d24;
  --oxblood-hi:  #a8392e;
  --oxblood-ink: #5f1c16;

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);

  --font-display: "Archivo", -apple-system, system-ui, sans-serif;
  --font-body: "Libre Franklin", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

::selection { background: var(--oxblood); color: #fff; }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; border-radius: 1px; }
::placeholder { color: var(--steel-400); opacity: 1; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--steel-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin: 0;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* Kicker — engraved technical label */
.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steel-400);
}
.kicker .dot { color: var(--oxblood); }
.kicker.on-dark { color: rgba(255,255,255,.62); }
.kicker.tight { margin-bottom: 26px; }

/* small utilities to keep markup free of inline style */
.unit { font-size: .6em; }
.section--flush-top { padding-top: 0; }
.disclaimer { font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); margin-top: 16px; }
.hero-proofwrap { width: 100%; }

/* Mono figures */
.fig { font-family: var(--font-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }

/* -------------------------------------------------------------------- Buttons */
.btn {
  --pad-y: 15px; --pad-x: 26px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  padding: var(--pad-y) var(--pad-x);
  border: 1px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.btn-primary { background: var(--oxblood); color: #fff; }
.btn-primary:hover { background: var(--oxblood-hi); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--steel-900); border-color: var(--steel-700); }
.btn-ghost:hover { background: var(--steel-900); color: #fff; }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost-light:hover { background: #fff; color: var(--steel-900); border-color:#fff; }
.btn-lg { --pad-y: 18px; --pad-x: 32px; font-size: 17px; }
.btn .arrow { transition: transform .18s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ------------------------------------------------------- Steel-grid mechanics */
/* Thin double mullion + hairline. Used as borders across the site. */
.grid-frame { position: relative; }
.mullion-x { border-inline: 1px solid var(--glass-line); }
.mullion-y { border-block: 1px solid var(--glass-line); }

/* A pane of seeded glass with faint reflection — the calm ground material. */
.pane {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(200deg, var(--glass-white) 0%, var(--glass-cool) 100%);
  overflow: hidden;
}
.pane::after { /* diagonal light streak across the glass */
  content: ""; position: absolute; inset: -20% -40%;
  background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,.55) 50%, transparent 55%);
  transform: translateX(-30%); opacity: .0; transition: opacity .5s var(--ease), transform 1.1s var(--ease);
  pointer-events: none;
}
.pane:hover::after { opacity: .9; transform: translateX(30%); }

/* =========================================================================== */
/* NAV                                                                          */
/* =========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244,246,246,.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--glass-line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.brand .name {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  letter-spacing: 0.02em; color: var(--steel-900); line-height: 1;
}
.brand .name .amp { color: var(--oxblood); font-weight: 700; }
.brand .sub { display:block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing:.22em; color: var(--steel-400); margin-top: 3px; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--steel-700); transition: color .15s; }
.nav-links a:hover { color: var(--oxblood); }
.nav-tel { font-family: var(--font-mono); font-size: 15px; font-weight: 600; letter-spacing:-.01em; color: var(--steel-900); text-decoration: none; white-space: nowrap; }
.nav-tel .lbl { display:block; font-size: 9px; letter-spacing:.2em; color: var(--steel-400); font-weight:500; }
.nav-cta { }
.nav-burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-burger span { display:block; width: 24px; height: 2px; background: var(--steel-900); margin: 5px 0; transition: .2s; }
/* mobile-only in-menu actions (hidden on desktop) */
.nav-m-tel, .nav-m-cta { display: none; }

/* =========================================================================== */
/* HERO — city through a glass curtain wall                                     */
/* =========================================================================== */
.hero {
  position: relative;
  background: var(--glass-deep);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* the photographic slot — GPT-image-2 fills --hero-img; until then a night-glass gradient */
.hero-photo {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 90% at 72% 12%, rgba(143,45,36,.30) 0%, transparent 52%),
    radial-gradient(90% 70% at 18% 30%, rgba(120,150,175,.12) 0%, transparent 60%),
    linear-gradient(180deg, #0f141a 0%, #18202a 46%, #10161c 100%);
  background-size: cover; background-position: center;
}
.hero-photo.has-img { background-image: var(--hero-img); }
/* real hero photo carries its own steel curtain wall → retire the painted grid */
.hero.has-photo .hero-grid { opacity: 0; }
.hero-photo::after { /* legibility scrim */
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(8,10,12,.86) 0%, rgba(8,10,12,.6) 44%, rgba(8,10,12,.15) 100%);
}
/* the steel curtain-wall grid painted OVER the photo */
.hero-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    /* steel mullions — the visible curtain wall */
    linear-gradient(90deg, rgba(150,166,182,.30) 0 2px, transparent 2px),
    linear-gradient(rgba(150,166,182,.24) 0 2px, transparent 2px),
    /* glass-edge highlight beside each mullion */
    linear-gradient(90deg, rgba(255,255,255,.11) 0 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 0 1px, transparent 1px);
  background-size: 33.33% 196px, 33.33% 196px, 33.33% 196px, 33.33% 196px;
  background-position: 2px 2px, 2px 2px, 0 0, 0 0;
  mask-image: linear-gradient(100deg, #000 0%, #000 58%, transparent 96%);
}
.hero-inner { position: relative; padding: clamp(64px, 12vh, 148px) 0 clamp(56px, 9vh, 120px); max-width: 840px; }
.hero .kicker { color: rgba(255,255,255,.72); margin-bottom: 22px; }
.hero h1 {
  font-size: clamp(44px, 6.6vw, 88px);
  letter-spacing: -0.035em;
  margin: 0 0 24px;
}
.hero h1 .soft { color: rgba(255,255,255,.6); }
.hero-sub { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.5; color: rgba(255,255,255,.86); max-width: 560px; margin: 0 0 34px; }
.hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-tel { color:#fff; text-decoration:none; font-family: var(--font-mono); font-weight:600; font-size:17px; display:flex; flex-direction:column; }
.hero-tel .lbl { font-size:10px; letter-spacing:.2em; color: rgba(255,255,255,.6); font-weight:500; }

/* proof ribbon at the base of the hero — real recovery figures in glass */
.hero-proof {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.14);
}
.hero-proof .cell { padding: 26px var(--gutter); border-inline-start: 1px solid rgba(255,255,255,.1); }
.hero-proof .cell:first-child { border-inline-start: 0; }
.hero-proof .n { font-family: var(--font-mono); font-weight: 600; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; color:#fff; }
.hero-proof .l { font-size: 13.5px; color: rgba(255,255,255,.66); margin-top: 4px; }

/* =========================================================================== */
/* SECTION scaffolding                                                          */
/* =========================================================================== */
section { position: relative; }
.section { padding: clamp(72px, 11vh, 132px) 0; }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -.03em; margin: 16px 0 0; }
.section-head p { color: var(--steel-500); font-size: 18px; margin: 18px 0 0; max-width: 620px; }

/* RESULTS — a ledger of recoveries set in the steel grid */
.ledger { border: 1px solid var(--glass-line); border-bottom: 0; background: var(--paper-2); }
.ledger-row {
  display: grid; grid-template-columns: minmax(0,1.1fr) 2fr minmax(0,.9fr);
  align-items: baseline; gap: 24px;
  padding: 28px var(--gutter); border-bottom: 1px solid var(--glass-line);
  transition: background .2s var(--ease);
}
.ledger-row:hover { background: var(--glass-white); }
.ledger-amt { font-family: var(--font-mono); font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.03em; color: var(--steel-900); }
.ledger-amt .cur { color: var(--oxblood); }
.ledger-case { color: var(--steel-700); font-size: 17px; }
.ledger-case b { font-weight: 600; color: var(--steel-900); display:block; font-family:var(--font-display); letter-spacing:-.01em; margin-bottom:2px; }
.ledger-tag { justify-self: end; font-family: var(--font-mono); font-size: 12px; letter-spacing:.12em; text-transform: uppercase; color: var(--steel-400); border:1px solid var(--glass-line); padding: 5px 10px; border-radius: 2px; }

/* PRACTICE — glass panes in a mullion grid */
.practice-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--glass-line); }
.pcard {
  padding: 30px 26px 34px; min-height: 210px;
  border-inline-start: 1px solid var(--glass-line); border-bottom: 1px solid var(--glass-line);
  text-decoration: none; color: var(--steel-900);
  display: flex; flex-direction: column; gap: 12px;
  transition: color .2s;
}
.pcard:nth-child(4n+1) { border-inline-start: 0; }
.pcard .idx { font-family: var(--font-mono); font-size: 12px; color: var(--steel-300); letter-spacing:.1em; }
.pcard h3 { font-size: 21px; letter-spacing: -.02em; margin-top: 6px; }
.pcard p { font-size: 14.5px; color: var(--steel-500); margin: 0; line-height: 1.5; }
.pcard .go { margin-top: auto; font-family: var(--font-mono); font-size: 12.5px; letter-spacing:.08em; color: var(--oxblood); opacity: 0; transform: translateX(-6px); transition: .2s var(--ease); }
.pcard:hover .go { opacity: 1; transform: none; }

/* PROMISE — split: the pledge + the human line, one accent pane */
.promise { background: var(--steel-900); color: #fff; }
.promise .wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.promise h2 { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -.03em; }
.promise .lead { color: rgba(255,255,255,.62); font-size: 18px; margin-top: 22px; max-width: 460px; }
.pledge { display: grid; gap: 2px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); }
.pledge .item { background: var(--steel-900); padding: 24px 26px; }
.pledge .item:nth-child(1) { background: var(--oxblood); } /* the one saturated pane */
.pledge .item h3 { font-size: 17px; margin: 0 0 6px; }
.pledge .item p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,.7); }
.pledge .item:nth-child(1) p { color: rgba(255,255,255,.85); }

/* ATTORNEYS — steel-framed portraits (photographic slots) */
.attys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--glass-line); }
.atty { display: grid; grid-template-columns: 200px 1fr; gap: 0; border-inline-start: 1px solid var(--glass-line); }
.atty:first-child { border-inline-start: 0; }
.atty-portrait {
  aspect-ratio: 3/4; background: var(--glass-cool); position: relative; overflow: hidden;
  border-inline-end: 1px solid var(--glass-line);
  background-size: cover; background-position: center top;
}
.atty-portrait .mono {  /* placeholder monogram until GPT-image-2 fills it */
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 46px; color: var(--steel-300);
  background:
    linear-gradient(135deg, rgba(255,255,255,.7), transparent 45%),
    linear-gradient(200deg, var(--glass-white), var(--glass-cool));
}
.atty-portrait.has-img .mono { display: none; }
.atty-body { padding: 26px 28px; display: flex; flex-direction: column; }
.atty-body h3 { font-size: 23px; letter-spacing:-.02em; }
.atty-role { font-family: var(--font-mono); font-size: 12px; letter-spacing:.12em; text-transform: uppercase; color: var(--oxblood); margin-top: 6px; }
.atty-body p { font-size: 14.5px; color: var(--steel-500); margin: 14px 0 0; }
.atty-creds { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.cred { font-family: var(--font-mono); font-size: 11px; letter-spacing:.06em; color: var(--steel-500); border: 1px solid var(--glass-line); padding: 5px 9px; border-radius: 2px; }

/* QUOTE — a single client voice */
.quote { background: var(--paper-2); border-block: 1px solid var(--glass-line); }
.quote .wrap { max-width: 940px; }
.quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.6vw, 40px); line-height: 1.22; letter-spacing: -.025em; }
.quote blockquote .mk { color: var(--oxblood); }
.quote cite { display: block; margin-top: 24px; font-style: normal; font-family: var(--font-mono); font-size: 13px; letter-spacing:.06em; color: var(--steel-400); }

/* CONTACT / free case review */
.contact { background: var(--steel-900); color: #fff; }
.contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); }
.contact h2 { font-size: clamp(30px, 4.4vw, 54px); letter-spacing: -.03em; }
.contact .lead { color: rgba(255,255,255,.66); font-size: 18px; margin-top: 20px; max-width: 440px; }
.contact-meta { margin-top: 36px; display: grid; gap: 20px; }
.contact-meta .row { display: flex; gap: 14px; align-items: baseline; }
.contact-meta .k { font-family: var(--font-mono); font-size: 11px; letter-spacing:.18em; text-transform: uppercase; color: rgba(255,255,255,.5); width: 72px; flex: none; }
.contact-meta .v { color:#fff; text-decoration: none; font-size: 16px; }
.contact-meta a.v:hover { color: var(--oxblood-hi); }
.chat-nudge { margin-top: 30px; display:flex; gap:12px; align-items:center; font-size:14px; color: rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.16); padding:14px 16px; border-radius:2px; }
.chat-nudge b { color:#fff; font-weight:600; }
.chat-nudge .live { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:#fff; }
.chat-nudge .live::before { content:""; width:8px; height:8px; border-radius:50%; background: var(--oxblood-hi); box-shadow:0 0 0 0 rgba(168,57,46,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(168,57,46,.55)} 70%{box-shadow:0 0 0 8px rgba(168,57,46,0)} 100%{box-shadow:0 0 0 0 rgba(168,57,46,0)} }
@media (prefers-reduced-motion: reduce){ .chat-nudge .live::before{ animation:none } }

.form { background: var(--paper-2); color: var(--steel-900); padding: clamp(28px, 4vw, 40px); border-radius: 2px; }
.form .fh { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing:-.02em; margin-bottom: 6px; }
.form .fs { font-size: 14px; color: var(--steel-500); margin-bottom: 22px; }
.field { margin-bottom: 16px; }
.field label { display:block; font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em; text-transform: uppercase; color: var(--steel-500); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--steel-900);
  padding: 13px 14px; border: 1px solid var(--glass-line2); border-radius: 2px; background: var(--paper);
  caret-color: var(--oxblood);
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--oxblood); box-shadow: 0 0 0 3px rgba(143,45,36,.12); }
.field textarea { resize: vertical; min-height: 96px; }
.form .btn { width: 100%; justify-content: center; }
.form .disc { font-size: 11.5px; color: var(--steel-500); margin-top: 14px; line-height: 1.5; }
.form-sent { text-align: center; padding: 30px 8px 18px; }
.form-sent .sent-mark {
  width: 54px; height: 54px; margin: 0 auto 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; color: #fff; background: var(--oxblood);
}
.form-sent .fh { margin-bottom: 10px; }
.form-sent .sent-p { font-size: 15px; color: var(--steel-500); max-width: 320px; margin: 0 auto; line-height: 1.55; }
.form-sent .sent-p b { color: var(--steel-900); }

/* =========================================================================== */
/* FOOTER                                                                       */
/* =========================================================================== */
.footer { background: var(--paper); border-top: 1px solid var(--glass-line); padding: 64px 0 40px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer .brand { margin: 0 0 16px; }
.footer p { font-size: 14px; color: var(--steel-500); max-width: 320px; }
.footer h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing:.16em; text-transform: uppercase; color: var(--steel-400); margin: 0 0 16px; font-weight: 500; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer ul a { text-decoration: none; font-size: 14.5px; color: var(--steel-700); }
.footer ul a:hover { color: var(--oxblood); }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--glass-line); }
.footer-bottom p { font-size: 12.5px; color: var(--steel-400); margin: 0; max-width: none; }
.demo-flag { font-family: var(--font-mono); font-size: 11px; letter-spacing:.06em; color: var(--steel-500); border:1px solid var(--glass-line); border-radius:2px; padding: 8px 12px; background: var(--paper-2); }
.demo-flag b { color: var(--oxblood); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } }

/* =========================================================================== */
/* RESPONSIVE                                                                   */
/* =========================================================================== */
@media (max-width: 1000px) {
  .practice-grid { grid-template-columns: repeat(2, 1fr); }
  .pcard:nth-child(4n+1) { border-inline-start: 1px solid var(--glass-line); }
  .pcard:nth-child(2n+1) { border-inline-start: 0; }
  .promise .wrap, .contact .wrap { grid-template-columns: 1fr; }
  .attys { grid-template-columns: 1fr; }
  .atty:first-child { border-bottom: 1px solid var(--glass-line); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  /* Collapse the nav to a burger before the desktop bar overflows (~950px of items). */
  .nav-links, .nav .nav-cta, .nav-tel { display: none; }
  .nav-burger { display: block; }
  .nav[data-open="1"] .nav-links { display: flex; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--paper-2); border-bottom: 1px solid var(--glass-line); padding: 8px var(--gutter) 20px; }
  .nav[data-open="1"] .nav-links a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--glass-line); }
  .nav[data-open="1"] .nav-m-tel {
    display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 16px 0 6px;
    font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--steel-900); text-decoration: none;
  }
  .nav[data-open="1"] .nav-m-tel .lbl { font-size: 10px; letter-spacing:.18em; color: var(--steel-400); }
  .nav[data-open="1"] .nav-m-cta { display: inline-flex; width: 100%; justify-content: center; margin-top: 8px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero-grid { mask-image: none; background-size: 50% 150px; }
  .hero-proof { grid-template-columns: 1fr; }
  .hero-proof .cell { border-inline-start: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .ledger-row { grid-template-columns: 1fr; gap: 8px; }
  .ledger-tag { justify-self: start; }
  .practice-grid { grid-template-columns: 1fr; }
  .pcard:nth-child(2n+1) { border-inline-start: 1px solid var(--glass-line); }
  .atty { grid-template-columns: 120px 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .atty { grid-template-columns: 1fr; }
  .atty-portrait { max-height: 240px; }
}

/* Cookie consent styles (mirrors the block in /styles.css) — the demo page loads only this sheet.
   The demo sheet uses a different token set, so define the tokens the consent CSS needs, scoped to the
   consent components (concrete values from the Burt monochrome palette) so the banner renders correctly
   here regardless of the demo's own variables. */
.consent-banner, .consent-modal, .consent-toast, .footer-link-btn, .consent-footer-links {
  --ink: #14161A; --slate: #565E69; --steel: #828A95; --mist: #AEB5BE;
  --line: #E4E7EB; --line-soft: #EEF0F2; --surface: #FFFFFF; --surface-2: #F8F9FA;
  --on-accent: #FFFFFF; --accent: #14161A; --accent-press: #000000;
  --note: #3E4A5B; --note-soft: #EAEDF1;
  --radius: 6px; --radius-lg: 11px; --radius-xl: 16px;
  --font-display: 'Bricolage Grotesque','Hanken Grotesk',Georgia,sans-serif;
  --font-body: 'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  --shadow-2: 0 2px 4px rgba(16,20,26,.05), 0 8px 24px rgba(16,20,26,.07);
}
/* ── Cookie consent: banner, preferences modal, toast (consent.js) ─────────────────────────────── */
.consent-banner {
  position: fixed; inset: auto 0 0 0; z-index: 9999;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  transform: translateY(110%); transition: transform .28s ease; visibility: hidden;
}
.consent-banner[data-open="1"] { transform: translateY(0); visibility: visible; }
.consent-inner {
  max-width: 1120px; margin: 0 auto; padding: 18px 24px;
  display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.consent-copy { flex: 1 1 420px; min-width: 280px; }
.consent-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.consent-text { font-size: 13.5px; line-height: 1.5; color: var(--slate); margin: 0; }
.consent-text a { color: var(--ink); text-decoration: underline; }
.consent-gpc { font-size: 12.5px; color: var(--note); background: var(--note-soft); border-radius: var(--radius); padding: 8px 10px; margin: 8px 0 0; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.consent-btn {
  font: 600 13.5px/1 var(--font-body); cursor: pointer;
  border-radius: var(--radius); padding: 11px 16px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); transition: background .15s, border-color .15s;
}
.consent-btn:hover { border-color: var(--mist); }
.consent-btn-ghost { background: var(--surface); }
/* GDPR: Reject is a one-click action on the SAME first layer as Accept (the load-bearing requirement).
   Accept is accent-filled; Reject is a ghost button of equal size and click-count. */
.consent-btn-solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.consent-btn-solid:hover { background: var(--accent-press); border-color: var(--accent-press); }

.consent-modal {
  position: fixed; inset: 0; z-index: 10000; background: rgba(16,20,26,.42);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .2s;
}
.consent-modal[data-open="1"] { opacity: 1; visibility: visible; }
.consent-modal-card {
  background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-2);
  max-width: 540px; width: 100%; padding: 28px; max-height: 88vh; overflow: auto;
}
.consent-modal-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 6px; color: var(--ink); }
.consent-modal-lede { font-size: 14px; color: var(--slate); margin: 0 0 18px; line-height: 1.5; }
.consent-row {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  padding: 14px 0; border-top: 1px solid var(--line-soft);
}
.consent-row span { display: flex; flex-direction: column; gap: 3px; }
.consent-row strong { font-size: 14px; color: var(--ink); font-weight: 600; }
.consent-row em { font-style: normal; font-size: 12.5px; color: var(--steel); line-height: 1.45; }
.consent-row input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); flex: 0 0 auto; cursor: pointer; }
.consent-row input[disabled] { cursor: not-allowed; opacity: .6; }
.consent-modal-gpc { margin: 14px 0 0; }
.consent-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; }

.consent-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); z-index: 10001;
  background: var(--ink); color: var(--on-accent); font-size: 13.5px; font-weight: 500;
  padding: 12px 18px; border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  opacity: 0; transition: opacity .3s, transform .3s; max-width: 92vw; text-align: center;
}
.consent-toast[data-open="1"] { opacity: 1; transform: translate(-50%, 0); }

.footer-link-btn {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; text-decoration: none;
}
.footer-link-btn:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .consent-inner { padding: 16px; gap: 14px; }
  .consent-actions { width: 100%; }
  .consent-actions .consent-btn { flex: 1 1 auto; }
}
.consent-footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; padding: 14px 0 0; margin-top: 8px; border-top: 1px solid var(--line-soft); }
.consent-footer-links .footer-link-btn { color: var(--slate); font-size: 13px; }