/* Extracted 2026-09-17 from the inline <style> in index.html (lines 81-2086) when the site
   became multi-page: one download, cached across all 13 pages. Content unchanged. */
/* ============================================================
   CHUCKY LAW — "BILLBOARD" (v3)
   Bright, commercial, personal. Red like a billboard, white like
   daylight, navy from her logo. Brenda front and center — her
   photos, her story, her words. Anton shouts, Barlow talks,
   Caveat writes the photo captions by hand.
   ============================================================ */
:root{
  /* ── BRAND PASS 2026-09-02 — Brenda's NEW logo: metallic GOLD + deep
     BURGUNDY Lady Justice on white, burgundy sweep, thin gold rule. The old
     red "Chucky-hair scales" mark and its billboard red are RETIRED (she is
     replacing the mark over infringement worries).
     ⚠️ These five values are SAMPLED BY EYE from her logo screenshot — the
     real file has not arrived. When it does, drop its true values in HERE and
     the whole site follows; nothing else needs touching. */
  --gold:#C9A24A;          /* gold on DARK: text, icons, hairlines, the CTA fill */
  --gold-lite:#E2C57E;     /* gold that has to sit brighter on dark */
  --gold-deep:#8C6A1F;     /* gold on LIGHT: rules, stamps, borders — never body text */
  --burgundy:#6E1020;
  --burgundy-lite:#8E2231;
  --burgundy-deep:#4A0A16;
  --cream:#F7F3EC;
  --bone:#EDE7DC;
  --bone-dim:rgba(237,231,220,.78);
  --ink-0:#0B0E13;         /* the dark base */
  /* --red* keep their names so all ~80 existing call sites flip at once.
     They are BURGUNDY now. Do not reintroduce a bright red. */
  --red:#8E2231;
  --red-deep:#6E1020;
  --red-dark:#4A0A16;
  --navy:#0B0E13;
  --navy-2:#141922;
  --paper:#FFFFFF;
  --warm:#F7F3EC;
  --ink:#1C2027;
  --smoke:#5B6470;
  --line:#E4DDD0;
  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --sans:"Barlow",-apple-system,"Segoe UI",sans-serif;
  --hand:"Caveat",cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
/* W1 live-check find: smooth scroll + a body overflow-x clip left anchor
   navigation doing NOTHING in embedded/in-app browsers — and this site's
   audience is injured people in exactly those browsers. Navigation must be
   dependable everywhere, so: no smooth, and the sideways clip lives on html. */
html{overflow-x:hidden}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
.wrap{width:min(1200px,92vw);margin-inline:auto}

/* language layers */
html[data-lang="en"] .es{display:none !important}
html[data-lang="es"] .en{display:none !important}

/* type */
.shout{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.95;letter-spacing:.004em}
.eyebrow{font-family:var(--display);text-transform:uppercase;font-size:.82rem;letter-spacing:.3em;color:var(--red)}
.lede{font-size:1.18rem;line-height:1.65;color:var(--smoke)}
.lede strong{color:var(--ink);font-weight:600}
.hand{font-family:var(--hand);font-size:1.35rem;color:var(--smoke)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:.95rem;
  padding:1.05rem 1.8rem;border-radius:8px;transition:transform .15s ease,box-shadow .2s ease,background .15s ease;
}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 30px rgba(196,36,48,.35)}
@media (hover:hover) and (pointer:fine) {
.btn-red:hover{background:var(--red-deep);transform:translateY(-2px)}
}
.btn-white{background:#fff;color:var(--red);box-shadow:0 10px 30px rgba(16,21,28,.25)}
@media (hover:hover) and (pointer:fine) {
.btn-white:hover{transform:translateY(-2px)}
}
.btn-ghost-w{border:2px solid rgba(255,255,255,.65);color:#fff}
@media (hover:hover) and (pointer:fine) {
.btn-ghost-w:hover{border-color:#fff}
}

/* ---------- announce ---------- */
.announce{background:var(--navy);color:#fff;font-family:var(--display);
  text-transform:uppercase;letter-spacing:.13em;font-size:.7rem;position:relative;z-index:60}
.announce .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 0}
.announce-items{flex:1 1 auto;display:flex;align-items:center;justify-content:space-evenly;
  gap:.3rem 1.4rem;flex-wrap:wrap;margin-right:1rem}
/* Aug 27, Cam's phone check: the spread clipped the ES toggle on mobile — items
   go full-width centered rows, the toggle gets its own guaranteed row. */
@media(max-width:700px){
  .announce .wrap{flex-wrap:wrap;justify-content:center;row-gap:.2rem;text-align:center}
  .announce-items{flex:1 1 100%;justify-content:center;gap:.15rem 1rem;margin-right:0}
}
.announce a{border-bottom:1px solid rgba(255,255,255,.4)}
.lang-toggle{display:inline-flex;border:1px solid rgba(255,255,255,.45);border-radius:99px;overflow:hidden}
.lang-toggle button{font-family:var(--display);letter-spacing:.1em;font-size:.66rem;
  padding:.26rem .68rem;min-height:44px;color:#fff;opacity:.6;text-transform:uppercase}
.lang-toggle button[aria-pressed="true"]{background:var(--red);opacity:1}

/* ---------- nav (navy — her logo's own background, so the real art blends) ---------- */
.nav{background:var(--navy);border-bottom:3px solid var(--red);position:relative;z-index:60}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:.55rem 0;gap:1rem}
.nav-logo img{height:64px;width:auto}
.nav-links{display:flex;gap:1.3rem;align-items:center;font-family:var(--display);
  text-transform:uppercase;font-size:.74rem;letter-spacing:.15em;color:#B9C2CE}
@media (hover:hover) and (pointer:fine) {
.nav-links a:hover{color:#fff}
}
.nav .btn{padding:.6rem 1.15rem;font-size:.76rem}
/* Sep 2, launch pass A-4: below 900px the link set was simply hidden and nothing
   replaced it. A <details> menu opens and closes with no JS at all; the
   close-on-tap listener in the script is enhancement only. */
.mobile-nav{display:none;position:relative}
.mobile-nav>summary{list-style:none;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;border:1px solid rgba(255,255,255,.24);border-radius:6px}
.mobile-nav>summary::-webkit-details-marker{display:none}
.mobile-nav>summary svg{width:22px;height:22px;stroke:#D5DBE3;fill:none;stroke-width:2;stroke-linecap:round}
.mobile-nav[open]>summary{border-color:var(--red)}
.mobile-nav[open]>summary svg{stroke:#fff}
.mobile-nav-panel{position:absolute;right:0;top:calc(100% + .55rem);z-index:5;
  width:max-content;min-width:200px;max-width:min(260px,78vw);
  background:var(--navy);border:1px solid rgba(255,255,255,.16);border-radius:8px;
  box-shadow:0 18px 50px rgba(11,14,19,.6);padding:.25rem 0}
.mobile-nav-panel a{display:flex;align-items:center;min-height:44px;padding:.55rem 1.1rem;
  font-family:var(--display);text-transform:uppercase;font-size:.78rem;letter-spacing:.13em;color:#D5DBE3}
.mobile-nav-panel a:hover,.mobile-nav-panel a:focus-visible{background:rgba(255,255,255,.08);color:#fff}
@media(max-width:900px){.nav-links{display:none}.mobile-nav{display:block}}

/* ---------- floatbar: slides down from the top once you scroll into the page ---------- */
.floatbar{
  position:fixed;top:0;left:0;right:0;z-index:65;
  background:var(--navy);border-bottom:3px solid var(--red);
  box-shadow:0 10px 30px rgba(16,21,28,.35);
  transform:translateY(-110%);visibility:hidden;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s .3s;
}
.floatbar.show{transform:translateY(0);visibility:visible;transition:transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s}
.floatbar .wrap{display:flex;align-items:center;gap:1rem;padding:.5rem 0}
.floatbar .fb-mark{display:flex;align-items:center;gap:.7rem;color:#fff}
.floatbar .fb-mark img{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:center 40%;border:2px solid var(--red)}
.floatbar .fb-mark b{font-family:var(--display);font-weight:400;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase}
.floatbar .fb-mark b i{font-style:normal;color:var(--red)}
.floatbar .fb-phone{
  margin-left:auto;font-family:var(--display);letter-spacing:.08em;font-size:1.05rem;color:#fff;
}
@media (hover:hover) and (pointer:fine) {
.floatbar .fb-phone:hover{color:#E8B4B7}
}
.floatbar .btn{padding:.55rem 1.1rem;font-size:.74rem}
@media(max-width:560px){.floatbar .fb-phone{display:none}}
@media (prefers-reduced-motion:reduce){.floatbar{transition:none}}

/* ---------- quickhelp: the assistant at the START of the page (Cam, Aug 24) ---------- */
.quickhelp{background:var(--paper);border-bottom:1px solid rgba(16,21,28,.08);
}
@keyframes qhDrop{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:1}}
.qh-inner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.7rem 0}
.qh-label{font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;color:var(--navy);white-space:nowrap}
.qh-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.qh-chip{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;
  padding:.45rem .85rem;border:2px solid var(--navy);border-radius:99px;background:#fff;color:var(--navy);
  cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
@media (hover:hover) and (pointer:fine) {
.qh-chip:hover{background:var(--red);border-color:var(--red);color:#fff}
}
.qh-note{font-size:.8rem;color:rgba(16,21,28,.65)}
a.qh-fallback{text-decoration:underline;color:var(--red);font-weight:600}
@media(max-width:640px){.qh-inner{gap:.5rem;padding:.6rem 0}}

/* ---------- hero (the billboard) ---------- */
.hero{position:relative;background:linear-gradient(160deg,var(--red) 0%,var(--red-deep) 70%,var(--red-dark) 100%);color:#fff;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,transparent 40%);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:end;min-height:600px}
@media(max-width:780px){.hero .wrap{grid-template-columns:1fr;min-height:0}}
.hero-copy{padding:4.5rem 0 5.5rem}
@media(max-width:780px){.hero-copy{padding:3.2rem 0 2.5rem}}
.hero-kicker{
  display:inline-block;background:#fff;color:var(--red);font-family:var(--display);
  text-transform:uppercase;letter-spacing:.18em;font-size:.9rem;padding:.45rem 1.1rem;
  border-radius:6px;transform:rotate(-1.5deg);margin-bottom:1.4rem;box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.hero h1{font-size:clamp(3.4rem,8.5vw,6.8rem);text-shadow:0 4px 0 rgba(0,0,0,.15)}
.hero-sub{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(1.05rem,2.3vw,1.5rem);color:#FFD9DB;margin:1.1rem 0 1.4rem;line-height:1.3;
}
.hero .lede{color:rgba(255,255,255,.92);max-width:30em}
.hero .lede strong{color:#fff}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;margin-top:1.8rem}
.hero-ticks{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.8rem;font-weight:600;font-size:.95rem}
.hero-ticks > span::before{content:"✓ ";font-weight:800}
.hero-steps{display:flex;gap:1.15rem;flex-wrap:wrap;margin-top:1.1rem;align-items:center}
.hero-steps > span{display:flex;align-items:baseline;gap:.45rem;font-weight:700;font-size:.92rem;color:#fff}
.hero-steps b{font-family:var(--display);color:#FFD9A0;font-size:1.15rem;line-height:1}
.hero-copy{position:relative;z-index:2}
.hero-echo{
  position:absolute;right:-3%;bottom:4%;font-family:var(--display);
  font-size:clamp(6rem,16vw,14rem);line-height:.82;color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.14);text-transform:uppercase;
  pointer-events:none;user-select:none;z-index:0;
}
.hero-dots{
  position:absolute;left:0;bottom:0;width:340px;height:220px;pointer-events:none;opacity:.14;
  background-image:radial-gradient(rgba(255,255,255,.5) 1.5px,transparent 1.6px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(120% 100% at 0% 100%,#000 40%,transparent 75%);
  mask-image:radial-gradient(120% 100% at 0% 100%,#000 40%,transparent 75%);
}
.badge-spin{
  position:absolute;top:5%;left:-6%;width:118px;height:118px;z-index:3;
  animation:spin 18s linear infinite;filter:drop-shadow(0 8px 18px rgba(0,0,0,.3));
}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:780px){.hero-echo,.badge-spin,.hero-dots{display:none}}
.hero-photo{position:relative;z-index:1;align-self:end;display:flex;justify-content:center}
.hero-photo::before{
  content:"";position:absolute;bottom:-8%;left:50%;transform:translateX(-50%);
  width:120%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 65%);
}
.hero-photo img{position:relative;width:min(400px,80vw);height:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
@media(max-width:900px){.hero-photo img{width:min(320px,70vw)}}

@keyframes rise{to{opacity:1;transform:none}}

/* ---------- chant band ---------- */
.chant{background:var(--navy);color:#fff;overflow:hidden;padding:.8rem 0;position:relative;z-index:3}
.chant-track{display:flex;gap:3.2rem;white-space:nowrap;animation:chant 28s linear infinite;width:max-content}
.chant span{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.95rem;color:#E8B4B7}
.chant span::after{content:"✊";margin-left:3.2rem}
@keyframes chant{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:5.5rem 0;position:relative}
.sec-head{max-width:760px;margin-bottom:3rem}
.sec-head h2{font-size:clamp(2.3rem,4.6vw,3.6rem);margin:.7rem 0 1rem;color:var(--navy)}
.sec-head h2 .r{color:var(--red)}

/* ---------- meet brenda (the story) ---------- */
.brenda{background:var(--warm)}
.brenda-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:start}
@media(max-width:900px){.brenda-grid{grid-template-columns:1fr}}
.polaroid{
  background:#fff;padding:1rem 1rem 1.1rem;border-radius:4px;
  box-shadow:0 18px 50px rgba(28,32,39,.16);transform:rotate(-2deg);
  max-width:420px;position:sticky;top:6.5rem;
}
/* the source photos are 1080×2110 phone screenshots — without height:auto the height
   ATTRIBUTE wins and stretches her 5×; the 4:5 crop frames the face like a real polaroid */
.polaroid img{border-radius:2px;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 22%}
.polaroid .cap{text-align:center;margin-top:.8rem;font-family:var(--hand);font-size:1.4rem;color:var(--ink)}
.polaroid.two{transform:rotate(1.6deg);margin-top:2.2rem;position:static}
/* Sep 2: the second print is the STANDING shot (same shoot, same suit as the
   first), so it is cropped taller and lower — her stance and the desk, not a
   second head-and-shoulders. Two prints, two different moments. */
.polaroid.two img{aspect-ratio:3/4;object-position:center 38%}
@media(max-width:900px){.polaroid{position:static}} /* R4-4: no sticky overlap in one column */
@media(max-width:420px){ /* R5-3: ≤360px viewports clipped the ES toggle; rotated polaroids poked past the edge */
  .announce .wrap{flex-wrap:wrap;justify-content:center;row-gap:.15rem;text-align:center;padding:.45rem 0}
  .polaroid{transform:rotate(-1deg)}
  .polaroid.two{transform:rotate(.8deg)}
}
.story-beats{display:grid;gap:2.2rem}
.beat{display:flex;gap:1.4rem;align-items:flex-start}
.beat-n{
  flex:none;width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;
  font-family:var(--display);font-size:1.4rem;display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(196,36,48,.3);
}
.beat h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.05em;
  font-size:1.25rem;color:var(--navy);margin-bottom:.4rem}
.beat p{color:#3A414C;margin-bottom:.6rem}
.pull{
  background:var(--navy);color:#fff;border-radius:14px;padding:1.8rem 2rem;margin-top:.6rem;
  position:relative;overflow:hidden;
}
.pull::before{content:"“";font-family:var(--display);font-size:5rem;position:absolute;top:-.6rem;left:1rem;color:var(--red);opacity:.9}
.pull blockquote{font-size:1.25rem;font-style:italic;line-height:1.55;position:relative;padding-left:2.6rem}
.pull cite{display:block;margin-top:.8rem;font-style:normal;font-family:var(--hand);font-size:1.35rem;color:#E8B4B7;padding-left:2.6rem}

/* ---------- practice areas ---------- */
.pa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:900px){.pa-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pa-grid{grid-template-columns:1fr}}
.pa{
  border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
@media (hover:hover) and (pointer:fine) {
.pa:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(28,32,39,.14);border-color:rgba(196,36,48,.35)}
}
.pa > img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .3s ease}
@media (hover:hover) and (pointer:fine) {
.pa:hover > img{transform:scale(1.04)}
}
.pa-body{padding:1.4rem 1.6rem 1.7rem;position:relative}
.pa-body::before{content:"";position:absolute;top:0;left:1.6rem;width:44px;height:3px;background:var(--red)}
.pa h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:1.08rem;color:var(--navy);margin:.9rem 0 .45rem}
.pa p{color:var(--smoke);font-size:.96rem}

/* ---------- how it works ---------- */
.how{background:var(--warm)}
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.how-grid{grid-template-columns:1fr}}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:2rem 1.8rem;position:relative;overflow:hidden}
.step::before{
  content:attr(data-n);position:absolute;top:-1.2rem;right:.4rem;font-family:var(--display);
  font-size:7rem;color:rgba(196,36,48,.08);line-height:1;
}
.step h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:1.15rem;color:var(--navy);margin-bottom:.5rem}
.step p{color:var(--smoke);font-size:.98rem}
.step .hand{margin-top:.7rem;font-size:1.25rem}

/* ---------- good to know: checklist + FAQ ---------- */
.know-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:start}
@media(max-width:900px){.know-grid{grid-template-columns:1fr}}
.checkcard{background:var(--navy);color:#fff;border-radius:16px;padding:2rem 1.9rem}
.checkcard h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.05em;font-size:1.3rem;margin-bottom:1.2rem}
.checkcard ol{list-style:none;display:grid;gap:.9rem}
.checkcard li{display:flex;gap:.8rem;align-items:flex-start;font-size:.98rem;color:#D5DAE2}
.checkcard li b{color:#fff;font-weight:600}
.checkcard li::before{content:"✓";flex:none;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;font-size:.8rem;font-weight:800;margin-top:.1rem}
.checkcard .fine{font-size:.78rem;color:#8791A0;margin-top:1.2rem;line-height:1.6}
.faq{display:grid;gap:.8rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;padding:1.1rem 1.3rem;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;font-weight:700;color:var(--navy);font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.3rem;color:var(--red);flex:none;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details > div{padding:0 1.3rem 1.2rem;color:var(--smoke);font-size:.97rem;line-height:1.65}

/* ---------- promise (red band) ---------- */
.promise{background:linear-gradient(160deg,var(--red),var(--red-deep));color:#fff}
.promise .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
@media(max-width:900px){.promise .wrap{grid-template-columns:1fr}}
.promise h2{font-size:clamp(2.4rem,5.2vw,4rem)}
.promise .zero{font-size:1.35em;text-shadow:0 4px 0 rgba(0,0,0,.18)}
.promise-note{font-family:var(--hand);font-size:1.5rem;color:#FFD9DB;margin-top:1.2rem}
.points{display:grid;gap:1rem}
.point{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:1.25rem 1.4rem}
.point b{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:.3rem;font-size:1rem}
.point p{color:rgba(255,255,255,.9);font-size:.95rem}

/* ---------- español (navy, the real logo lives here comfortably) ---------- */
.espanol{background:var(--navy);color:#fff}
.espanol .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:3.5rem;align-items:center}
@media(max-width:900px){.espanol .wrap{grid-template-columns:1fr}}
.espanol .eyebrow{color:#E8B4B7}
.espanol h2{font-size:clamp(2.3rem,5vw,3.8rem);color:#fff}
.espanol .lede{color:#C4CBD6}
.espanol .lede strong{color:#fff}
.espanol .hand{color:#E8B4B7;font-size:1.7rem;margin-top:1.2rem}
.espanol-logo img{width:min(360px,80vw);margin-inline:auto;border-radius:10px}

/* ---------- contact ---------- */
.contact{background:var(--warm)}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
.ways{display:grid;gap:1rem;align-content:start}
.way{display:flex;align-items:center;gap:1.1rem;background:#fff;border:1px solid var(--line);
  padding:1.3rem 1.4rem;border-radius:12px;transition:border-color .2s ease,transform .15s ease,box-shadow .18s ease}
@media (hover:hover) and (pointer:fine) {
.way:hover{border-color:rgba(196,36,48,.4);transform:translateX(4px);box-shadow:0 10px 30px rgba(28,32,39,.08)}
}
.way svg{width:28px;height:28px;stroke:var(--red);flex-shrink:0}
.way b{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.1em;display:block;font-size:.9rem;color:var(--navy)}
.way span{color:var(--smoke);font-size:.92rem}
form{display:grid;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.8rem;box-shadow:0 16px 44px rgba(28,32,39,.08)}
.field label{display:block;font-family:var(--display);text-transform:uppercase;font-size:.66rem;
  letter-spacing:.2em;color:var(--smoke);margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;background:var(--warm);border:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-size:1rem;padding:.85rem 1rem;border-radius:8px;outline:none;
  transition:border-color .2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.field textarea{min-height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:.8rem;color:var(--smoke);line-height:1.6}
.field-note{margin:-.15rem 0 .45rem}
.form-lead{margin-bottom:.2rem}
.form-status:empty{display:none}
.form-status{border-left:3px solid var(--red);padding:.2rem 0 .2rem .8rem}
.form-status:focus{outline:2px solid var(--red);outline-offset:3px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- footer (navy — real logo again) ---------- */
footer{padding:3.5rem 0 8.5rem;background:var(--navy);color:#B9C2CE}
.foot-top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2.2rem;align-items:center}
.foot-top img{height:96px;width:auto;border-radius:8px}
.foot-contact{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;
  display:grid;gap:.5rem;text-align:right}
@media (hover:hover) and (pointer:fine) {
.foot-contact a:hover{color:#fff}
}
.disclaimer{color:#8791A0;font-size:.82rem;line-height:1.7;max-width:72em}
.disclaimer p{margin-bottom:.7rem}
.disclaimer a{color:#A8B0BC;text-decoration:underline}

/* ---------- THE CHUCKY DOCK (light theme) ---------- */













@media (hover:hover) and (pointer:fine) {

}




@media (hover:hover) and (pointer:fine) {

}


@keyframes pulse{0%{transform:scale(.85);opacity:1}70%,100%{transform:scale(1.3);opacity:0}}

/* Aug 27, Cam's find: hiding the whole dock while chatting stranded the visitor
   with only the widget's bubble — no way back to Call/Email. Now the bar YIELDS
   the corner instead of dying: bubble/panel/circle hide, the labeled bar slides
   to bottom-LEFT and stays reachable for the whole chat. */



/* the labeled bar (desktop) — Rafi pattern, our brand */


@media (hover:hover) and (pointer:fine) {

}






@media(max-width:840px){ .dockbar{display:none} }
/* Sep 15 (revise session): on desktop the labeled bar was sitting on Brenda's
   shoulder at the fold, next to the hero's own Call / Request buttons. It now
   arrives with the floatbar (same 420px trigger) and stays whenever a routed
   view, the panel or the chat is open. JS marks .fold-managed — with JS off
   the bar is simply visible, as before. */
@media(min-width:841px){



}
@media(prefers-reduced-motion:reduce){.dockbar{transition:none}}

/* ---------- mobile call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:69;display:none;
  grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.callbar a,.callbar button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1.05rem .5rem;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.callbar .c1{background:var(--red);color:#fff}
.callbar .c2{background:#fff;color:var(--navy)}
.callbar .c3{background:var(--navy);color:#fff}
@media(max-width:840px){
  .callbar{display:grid}

}

/* SMS channels hidden until JS confirms the number takes texts (Codex R3-3) */
a[href^="sms:"]{display:none}
/* keep the AI widget clear of the mobile call bar */
@media (prefers-reduced-motion:reduce){

  [data-rise]{animation:none !important;opacity:1 !important;transform:none !important}
  .rv{opacity:1;transform:none;transition:none}
  .tile,.tile-go{transition:none !important}
  .tile:hover,.tile:focus-visible{transform:none}
  @media (hover:hover) and (pointer:fine) {
  .tile:hover .tile-go{transform:none}
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE CASE FILE (v4, 2026-08-25) — Cam's direction, chosen over the living
   skyline and the all-in-Chucky treatments.

   THE RULE THIS WHOLE SYSTEM OBEYS: every physical touch must read as
   METICULOUS, never as cute. A law firm cannot look like a scrapbook. The clip,
   the tab, the stamp and the margin note are here because "meticulous" is
   precisely the thing you want to believe about whoever is handling your claim.
   The moment one of them reads as decoration it is doing damage, not work.

   Textures are CSS and SVG only — never bitmaps. The preview bundle is already
   3MB and paper grain as a JPEG would be indefensible on a phone over LTE.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --manila:#E3CFA4;      /* the folder itself */
  --manila-2:#D8C094;    /* its shadowed edge */
  --manila-3:#C9AE7E;    /* the tab, one step darker so it reads in front */
  --sheet:#FCFAF6;       /* the page — warmer than --paper, it is paper */
  --sheet-2:#F4F0E7;
  --rule:#D9D2C4;        /* the printed rule on a page */
  --rule-blue:#BFD0DC;   /* the faint blue line of a legal pad */
  /* ADVERSARIAL ROUND F1 (2026-08-25): was #8A8272, which measures 3.65 / 3.33 /
     3.27 against the sheet, warm and hero grounds — under 4.5:1 on all three,
     and I had put it on the hero ticks, the fine print and the form note.
     Self-inflicted, and on a law firm's intake page. #6E6658 measures
     5.44 / 4.96 / 4.87. Decorative-only tones keep the lighter value. */
  --archive:#6E6658;
  --archive-soft:#8A8272;
  --stamp:#B32430;
}

/* Paper grain. One inline SVG turbulence, ~300 bytes, tiled by the browser —
   the cheapest honest paper there is. Kept very low opacity: grain you can
   consciously see is grain that has become a pattern. */
/* ADVERSARIAL ROUND F2: this shipped at z-index:1 while .hero-file's .wrap is
   position:relative with z-index AUTO, and .hero-file creates no stacking
   context (z-index auto, isolation auto). So a multiply-blended grain layer was
   compositing OVER the headline and body copy, not under them — measured, not
   guessed. The overlay drops behind and direct children are lifted above it. */
.paper-grain{position:relative}
.paper-grain > *{position:relative;z-index:1}
.paper-grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>")}

/* ── THE FOLDER ─────────────────────────────────────────────────────────────
   Built from two boxes, not an image: the back panel, and the front panel that
   the sheets sit between. The tab is a real element so it can carry a name. */
.file{position:relative;max-width:1120px;margin:0 auto}
.file-tab{position:relative;z-index:3;display:inline-flex;align-items:center;gap:.6rem;
  margin-left:clamp(14px,5vw,64px);padding:.62rem 1.5rem .5rem;
  background:var(--manila-3);color:#4A3B22;
  font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  border-radius:10px 14px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 -1px 2px rgba(0,0,0,.10)}
.file-tab::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 2px rgba(196,36,48,.22)}
.file-body{position:relative;z-index:2;background:var(--manila);border-radius:0 16px 4px 4px;
  padding:clamp(14px,2.4vw,26px) clamp(14px,2.4vw,26px) clamp(20px,3vw,34px);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 24px 60px -22px rgba(58,42,16,.55),
             0 3px 10px rgba(58,42,16,.16)}
/* the crease where the folder folds — one gradient, sells the whole object */
.file-body::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:linear-gradient(180deg,rgba(0,0,0,.14),transparent);border-radius:0 16px 0 0}

/* ── THE SHEET ──────────────────────────────────────────────────────────────
   The page inside the folder. Slightly rotated by default so it reads as
   PLACED rather than aligned — a filed page is never perfectly square. */
.sheet{position:relative;background:var(--sheet);border-radius:3px;
  padding:clamp(24px,4.4vw,60px) clamp(22px,4vw,56px);
  box-shadow:0 1px 2px rgba(58,42,16,.18), 0 14px 34px -16px rgba(58,42,16,.42)}
.sheet + .sheet{margin-top:14px}
.sheet-rot{transform:rotate(-.35deg)}
.sheet-rot-r{transform:rotate(.28deg)}
/* the stack underneath: two pseudo-sheets peeking out, so it has depth */
.sheet-stack::before,.sheet-stack::after{content:"";position:absolute;inset:0;
  background:var(--sheet-2);border-radius:3px;z-index:-1;
  box-shadow:0 1px 2px rgba(58,42,16,.14)}
.sheet-stack::before{transform:rotate(.9deg) translate(4px,3px)}
.sheet-stack::after{transform:rotate(-1.1deg) translate(-5px,6px)}

/* ── THE CLIP ───────────────────────────────────────────────────────────────
   Drawn, not photographed. A real paperclip is one continuous stroke doubling
   back on itself; two rounded rects at different insets read as exactly that
   at small sizes and cost nothing. */
.clip{position:absolute;top:-16px;left:34px;width:34px;height:78px;z-index:4;
  filter:drop-shadow(0 3px 3px rgba(58,42,16,.35))}
.clip i,.clip b{position:absolute;border:2.5px solid #9AA3AD;border-radius:16px;
  background:transparent;display:block}
.clip i{inset:0}
.clip b{inset:7px 7px 16px;border-color:#B7BFC8}

/* ── THE STAMP ──────────────────────────────────────────────────────────────
   Rubber, not vector-crisp: slightly transparent, slightly rotated, with a
   double rule. Perfect edges would read as a badge, and a badge is marketing.  */
.stamp{display:inline-block;transform:rotate(-8deg);
  padding:.42rem 1.05rem;border:3px double var(--stamp);border-radius:5px;
  color:var(--stamp);opacity:.86;
  font-family:var(--display);font-size:clamp(.9rem,2.2vw,1.3rem);letter-spacing:.09em;
  text-transform:uppercase;line-height:1.06;text-align:center}
.stamp.big{transform:rotate(-6deg) scale(1.28)}

/* ── HER HAND ───────────────────────────────────────────────────────────────
   Margin notes in her own colour. Caveat was already loaded by v3 for the
   pull-quotes, so the handwriting cost zero bytes to provision. */
.hand{font-family:var(--hand);color:var(--red);
  font-size:clamp(1.25rem,3.1vw,1.85rem);line-height:1.24;transform:rotate(-1.6deg)}
.hand-arrow{display:block;width:64px;height:34px;margin:.2rem 0 .1rem;opacity:.85}

/* ── RULED PAPER ────────────────────────────────────────────────────────────
   For the sheets that should read as a legal pad rather than letterhead. */
.ruled{background-image:repeating-linear-gradient(180deg,transparent 0 30px,var(--rule-blue) 30px 31px);
  background-position:0 6px}
.ruled-margin{position:relative}
.ruled-margin::before{content:"";position:absolute;top:0;bottom:0;left:clamp(30px,6%,66px);
  width:1px;background:rgba(196,36,48,.30)}

/* ── HERO, staged as the file ───────────────────────────────────────────────
   The ground goes from flat brand red to a warm archive surface so the manila
   can read as an object sitting on it. Red is NOT retired — it moves to where
   it does more work: the headline, the stamp, the tab pip, the rule. Red type
   on white paper is louder than white type on red, because the paper gives it
   an edge to press against. */
.hero-file{background:
   radial-gradient(120% 90% at 50% -10%, #FFFDF8 0%, #F6EFE2 42%, #EDE3D2 72%, #E4D7C2 100%);
  color:var(--ink);padding:clamp(28px,5vw,64px) 0 clamp(40px,6vw,80px)}
/* v3's hero wrap was a two-column grid (copy | photo) with a 600px floor.
   The file is now the single child, so it was landing in the 1.15fr column and
   the folder rendered at half width with dead cream beside it. The staging
   moved inside the sheet, so the wrap goes back to being a plain block. */
.hero-file .wrap{max-width:1180px;display:block;min-height:0;gap:0}
.hero-file .hero-copy{padding:0}
.hero-sheet{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(20px,3.4vw,52px);align-items:center}

/* v3's hero type was tuned for white-on-red. On paper it needs its own values. */
.hero-file .hero-kicker{display:inline-block;background:var(--red);color:#fff;
  padding:.34rem .9rem;border-radius:3px;letter-spacing:.16em;font-size:.74rem;
  text-transform:uppercase;font-weight:800;transform:rotate(-.8deg)}
.hero-file .shout{color:var(--red);margin:.5rem 0 .1rem;
  font-size:clamp(3.1rem,10.5vw,6.6rem);line-height:.88;letter-spacing:-.01em;
  text-shadow:none}
.hero-file .hero-sub{color:var(--ink);font-family:var(--display);
  font-size:clamp(1rem,2.5vw,1.35rem);letter-spacing:.02em;
  padding-bottom:.85rem;margin-bottom:.85rem;border-bottom:1px solid var(--rule)}
.hero-file .lede{color:#3A3F49;font-size:clamp(1rem,1.9vw,1.12rem);line-height:1.62}
.hero-file .lede strong{color:var(--ink)}
.hero-file .hero-ticks{color:var(--archive)}
.hero-file .hero-ticks span::before{color:var(--red)}
/* the ghost button had a white border for a red ground; on paper it needs ink */
.btn-ghost-d{background:transparent;color:var(--ink);border:2px solid var(--ink)}
@media (hover:hover) and (pointer:fine) {
.btn-ghost-d:hover{background:var(--ink);color:#fff}
}

/* the exhibit: a photograph clipped onto the page, not a floating cut-out */
.hero-exhibit{position:relative;margin:0;padding:14px 14px 8px;background:#fff;
  border-radius:2px;transform:rotate(1.4deg);
  box-shadow:0 2px 3px rgba(58,42,16,.20), 0 20px 44px -18px rgba(58,42,16,.5)}
.hero-exhibit img{display:block;width:100%;height:auto;border-radius:1px;
  background:linear-gradient(180deg,#EFE9DE,#E2DACB)}
.exhibit-clip{position:absolute;top:-18px;right:26px;width:30px;height:70px;z-index:4;
  filter:drop-shadow(0 3px 3px rgba(58,42,16,.35))}
.exhibit-clip i,.exhibit-clip b{position:absolute;border:2.5px solid #9AA3AD;
  border-radius:15px;display:block}
.exhibit-clip i{inset:0}
.exhibit-clip b{inset:6px 6px 15px;border-color:#B7BFC8}
/* v3's .badge-spin pins itself top:5%/left:-6% for the red hero. Both of those
   still apply here and win over a right/bottom pair, which is why the seal
   landed over her face. Reset the pair we are not using rather than fight
   specificity. */
.hero-exhibit .seal{position:absolute;top:auto;left:auto;
  right:-30px;bottom:26px;width:clamp(76px,9vw,104px);height:clamp(76px,9vw,104px);
  filter:drop-shadow(0 6px 14px rgba(58,42,16,.42))}

/* the cutout carries transparent headroom, which read as a badly cropped print.
   Crop to her rather than to the file's bounding box. */
.hero-exhibit img{max-height:min(62vh,560px);object-fit:cover;object-position:50% 8%}
.hero-exhibit figcaption{margin:.7rem .2rem .1rem}

@media (max-width:900px){
  .hero-sheet{grid-template-columns:1fr}
  .hero-exhibit{max-width:340px;margin:0 auto;transform:rotate(1deg)}
  .hero-exhibit .seal{right:-14px;bottom:20px;width:82px;height:82px}
}
@media (prefers-reduced-motion:reduce){
  .sheet-rot,.sheet-rot-r,.hero-exhibit,.hero-file .hero-kicker,.hand{transform:none}
}

/* ── THE CASE TIMELINE ──────────────────────────────────────────────────────
   v3 laid the three steps out as three equal columns, which says "three
   features". A claim is not three features, it is a sequence with an order and
   an end — so it is staged as one route, read top to bottom, drawn as you go.
   ⚠️ WITHOUT JS this must still be a plain, complete, readable list. The rail
   is decorative and aria-hidden; the stations are ordinary blocks that need no
   script to be legible. Verified with JS disabled. */
.timeline{position:relative;display:block;padding-left:clamp(58px,8vw,104px)}
.tl-line{position:absolute;left:clamp(6px,1.6vw,26px);top:8px;bottom:8px;
  width:clamp(40px,5vw,60px);height:calc(100% - 16px);overflow:visible}
.timeline .station{position:relative;margin:0 0 clamp(26px,4vw,52px)}
.timeline .station:last-child{margin-bottom:0}

/* the station mark: a struck number, not a pill. It arrives when the route
   reaches it — see .hit below. */
.st-mark{position:absolute;left:calc(-1 * clamp(58px,8vw,104px));top:2px;
  width:clamp(42px,5.4vw,56px);height:clamp(42px,5.4vw,56px);
  display:grid;place-items:center;border-radius:50%;
  background:var(--sheet);border:3px solid var(--red);color:var(--red);
  font-family:var(--display);font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1;
  box-shadow:0 2px 0 rgba(196,36,48,.18);
  transform:scale(.72) rotate(-12deg);opacity:0;
  transition:transform .42s cubic-bezier(.2,1.5,.4,1), opacity .3s ease}
.timeline .station.hit .st-mark{transform:scale(1) rotate(-4deg);opacity:1}
/* the ink bleed a rubber mark leaves — appears a beat after the strike */
.st-mark::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(196,36,48,.30);opacity:0;transition:opacity .5s ease .18s}
.timeline .station.hit .st-mark::after{opacity:1}

.timeline .station h3{margin-top:.1rem}

/* the payoff at the end of the route */
.tl-stamp{margin-top:1.1rem;opacity:0;transform:rotate(-14deg) scale(1.5);
  transition:opacity .34s ease, transform .5s cubic-bezier(.2,1.6,.35,1)}
.timeline .station.hit .tl-stamp{opacity:.86;transform:rotate(-6deg) scale(1.28)}

@media (prefers-reduced-motion:reduce){
  .st-mark{transform:none;opacity:1;transition:none}
  .st-mark::after{opacity:1;transition:none}
  .tl-stamp{opacity:.86;transform:rotate(-6deg) scale(1.28);transition:none}
  .tl-line{display:none}   /* a line that cannot draw is just a stripe */
}

/* ── THE EXHIBITS ───────────────────────────────────────────────────────────
   The six practice areas were a grid of rounded cards — the same component
   every competitor uses. Here they are what they actually are: photographs
   entered into a file.

   The labels are a CSS COUNTER, not markup. `counter(exh, upper-alpha)` gives
   Exhibit A…F, and keying the word off html[data-lang] keeps the bilingual
   contract without touching a single one of the six blocks — so nothing in the
   copy that six review rounds signed off on gets re-opened to add a label. */
#cases{background:
  radial-gradient(90% 60% at 50% 0%, #FBF7EF 0%, #F4EDE0 55%, #EDE4D4 100%)}
.pa-grid{counter-reset:exh}
.pa{counter-increment:exh;position:relative;background:#fff;border:0;border-radius:2px;
  padding:13px 13px 0;overflow:visible;
  box-shadow:0 2px 3px rgba(58,42,16,.16), 0 18px 40px -20px rgba(58,42,16,.45);
  transition:transform .34s cubic-bezier(.2,.9,.3,1), box-shadow .34s ease}
/* placed, not aligned — a filed photograph is never perfectly square */
.pa:nth-child(3n+1){transform:rotate(-.9deg)}
.pa:nth-child(3n+2){transform:rotate(.7deg)}
.pa:nth-child(3n+3){transform:rotate(-.35deg)}
@media (hover:hover) and (pointer:fine) {
.pa:hover{transform:rotate(0) translateY(-6px);
  box-shadow:0 3px 5px rgba(58,42,16,.18), 0 30px 60px -22px rgba(58,42,16,.55);z-index:3}
}

.pa::before{position:absolute;top:-13px;left:16px;z-index:2;
  padding:.3rem .72rem;background:var(--manila-3);color:#4A3B22;border-radius:3px 3px 0 0;
  font-family:var(--sans);font-weight:800;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 -1px 2px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.4)}
html[data-lang="en"] .pa::before{content:"Exhibit " counter(exh, upper-alpha)}
html[data-lang="es"] .pa::before{content:"Prueba " counter(exh, upper-alpha)}

.pa img{border-radius:1px;filter:saturate(.94) contrast(1.03)}
.pa-body{padding:.95rem .35rem 1.1rem}
.pa-body h3{font-family:var(--display);letter-spacing:.01em}
/* the printed rule under an exhibit's caption */
.pa-body h3::after{content:"";display:block;width:38px;height:2px;background:var(--red);
  margin:.5rem 0 .6rem;opacity:.85}

@media (prefers-reduced-motion:reduce){
  .pa,.pa:nth-child(3n+1),.pa:nth-child(3n+2),.pa:nth-child(3n+3){transform:none;transition:none}
  @media (hover:hover) and (pointer:fine) {
  .pa:hover{transform:none}
  }
}

/* ══ THE REST OF THE FILE ═══════════════════════════════════════════════════
   Staged in CSS wherever CSS can carry it. Every one of these sections has copy
   that six review rounds are closed against, so the rule is the same as #cases:
   change the staging, never the strings. Markup edits here are limited to
   adding a wrapper where a sheet genuinely needs one. */

/* ── .brenda — THE PERSONAL EXHIBIT ─────────────────────────────────────────
   Her story is the one part of the file that is not evidence, so it is staged
   as the page someone actually wrote: a ruled pad with a red margin line, and
   the beats numbered down it. */
.brenda{background:linear-gradient(180deg,#FBF7EF 0%,#F5EEE1 100%)}
.brenda .brenda-grid{position:relative}
.brenda .beat{position:relative;padding-left:clamp(38px,5vw,64px)}
.brenda .beat::before{content:"";position:absolute;left:clamp(14px,2vw,26px);top:.3em;bottom:-.6em;
  width:1px;background:rgba(196,36,48,.26)}
.brenda .beat:last-child::before{bottom:.6em}
.brenda .beat-n{position:absolute;left:0;top:0;width:clamp(28px,3.4vw,36px);height:clamp(28px,3.4vw,36px);
  display:grid;place-items:center;border-radius:50%;
  background:var(--sheet);border:2px solid var(--red);color:var(--red);
  font-family:var(--display);font-size:.9rem;line-height:1}
/* the polaroid v3 already had — given a clip and a little more weight */
.brenda .polaroid{position:relative;box-shadow:0 2px 3px rgba(58,42,16,.18),0 22px 48px -20px rgba(58,42,16,.5)}
.brenda .polaroid::before{content:"";position:absolute;top:-16px;left:28px;width:30px;height:70px;
  border:2.5px solid #9AA3AD;border-radius:15px;z-index:4;
  filter:drop-shadow(0 3px 3px rgba(58,42,16,.3))}

/* ── #know — THE SHEET YOU READ BEFORE YOU SIGN ─────────────────────────────
   Ruled paper, and the answers marked the way a person marks a page they are
   working through. */
#know{background:var(--sheet)}
#know .checkcard,#know .faq{position:relative;background:#fff;border-radius:2px;
  padding:clamp(18px,2.6vw,30px) clamp(18px,2.6vw,30px) clamp(18px,2.6vw,26px);
  box-shadow:0 1px 2px rgba(58,42,16,.14),0 14px 32px -18px rgba(58,42,16,.4)}
#know .checkcard{border-left:3px solid var(--red)}
/* the red pen underline that appears as you read it */
#know .checkcard h3,#know .faq h3{position:relative;display:inline-block}
#know .checkcard h3::after,#know .faq h3::after{content:"";position:absolute;
  left:0;right:0;bottom:-3px;height:2px;background:var(--red);opacity:.55;
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.9,.3,1)}
/* v3 already observes every .rv and adds .in — and #know's cards are .rv.
   Reusing that beat rather than adding a second observer: one mechanism, and
   the no-JS fallback that forces .rv visible covers this underline too. */
#know .checkcard h3::after,#know .faq h3::after{transform:scaleX(1);transition:none}
#know .fine{color:var(--archive)}

/* ── #promise — THE SIGNED PAGE ─────────────────────────────────────────────*/
#promise{background:
  radial-gradient(80% 60% at 50% 0%,#FBF7EF,#F1E8D9 70%,#E9DDC8 100%)}
#promise .points{position:relative}
#promise .point{position:relative;padding-left:2.1rem}
#promise .point::before{content:"✓";position:absolute;left:0;top:.02em;
  color:var(--red);font-family:var(--display);font-size:1.15em;line-height:1}
#promise .promise-note{font-family:var(--hand);color:var(--red);
  font-size:clamp(1.2rem,2.8vw,1.7rem);transform:rotate(-1.2deg)}

/* ── #espanol — THE SAME FILE, TABBED ───────────────────────────────────────
   The language toggle is already a first-class contract on this site; here it
   becomes a physical divider, which is what a bilingual file actually is. */
#espanol{position:relative;background:var(--navy);color:#fff;
  margin-top:clamp(26px,4vw,44px)}
#espanol::before{content:"Español";position:absolute;top:-30px;
  left:clamp(16px,6vw,80px);padding:.5rem 1.5rem .42rem;
  background:var(--manila-3);color:#4A3B22;border-radius:10px 14px 0 0;
  font-family:var(--sans);font-weight:800;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;box-shadow:0 -1px 2px rgba(0,0,0,.14)}

/* ── #contact — OPEN YOUR FILE ──────────────────────────────────────────────
   The payoff of the metaphor. Fields are ruled lines on a form, not boxes. */
#contact{background:linear-gradient(180deg,#F6EFE2 0%,#EFE5D4 100%)}
/* CODEX R1 (medium): this rule reintroduced horizontal overflow at 320px that
   approved index.html does not have — scrollWidth 330 vs clientWidth 320.
   Grid items default to min-width:auto, so the 40px of padding I added pushed
   each child's min-content width to 317.5px inside a 294.4px wrapper and the
   TRACK grew past its own container. With body{overflow-x:hidden} the right
   edge is simply cropped, on the contact form, on a phone. min-width:0 lets the
   child shrink; minmax(0,1fr) stops the track resolving to max-content. */
/* Mirrors v3's own shape exactly — 1fr 1.1fr breaking at 900px — with the
   tracks wrapped in minmax(0,…) so they can no longer resolve to max-content.
   My first pass at this used 1fr 1fr at 861px, which quietly restyled the
   desktop proportions and moved the breakpoint 39px. The fix for an overflow
   bug is not licence to redesign the section. */
#contact .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
@media(max-width:900px){#contact .contact-grid{grid-template-columns:minmax(0,1fr)}}
#contact .contact-grid > *{min-width:0;background:var(--sheet);border-radius:2px;
  padding:clamp(20px,3vw,34px);
  box-shadow:0 1px 2px rgba(58,42,16,.14),0 18px 40px -20px rgba(58,42,16,.42)}
#contact .contact-grid a,#contact .contact-grid p{overflow-wrap:anywhere}
#contact .field input,#contact .field textarea,#contact .field select{
  background:transparent;border:0;border-bottom:1.5px solid var(--rule);border-radius:0;
  padding-left:0;padding-right:0;transition:border-color .2s ease}
/* ADVERSARIAL ROUND F3 — the worst of the three. This rule used to also set
   `outline:2px solid transparent`. v3 already ships
   `.field input:focus-visible{outline:2px solid var(--red)}` at specificity
   (0,2,1); this selector is (1,2,1), so it WON and painted the keyboard focus
   ring transparent on every field of the intake form. The box-shadow I had
   substituted is not a replacement — forced-colors mode strips box-shadow and
   keeps outlines, so high-contrast users would have had no focus indicator at
   all. The outline is now left entirely to v3's rule; this only recolours the
   rule the field sits on. */
#contact .field input:focus,#contact .field textarea:focus,#contact .field select:focus{
  border-bottom-color:var(--red)}
#contact .form-note{color:var(--archive)}

@media (prefers-reduced-motion:reduce){
  #know .checkcard h3::after,#know .faq h3::after{transform:scaleX(1);transition:none}
  #promise .promise-note,.brenda .polaroid{transform:none}
}

/* ══ ARIZONA, IN THE FILE ═══════════════════════════════════════════════════
   Cam's ask: the site should feel like it belongs to Phoenix. The trap is
   bolting a photograph onto a paper metaphor, where it reads as a stock image
   dropped on stationery. So Arizona arrives the way it would actually appear in
   a lawyer's file: engraved on the letterhead, stamped on the evidence, and
   seen once — properly — through a window.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · THE LETTERHEAD ENGRAVING ───────────────────────────────────────────*/
.letterhead{grid-column:1 / -1;display:flex;align-items:flex-end;gap:1rem;
  margin:0 0 clamp(14px,2vw,26px);padding-bottom:.7rem;
  border-bottom:1px solid var(--rule)}
/* preserveAspectRatio:none + a taller rendered box. "meet" was letterboxing a
   1000x62 viewBox into a very wide strip, which flattened every landform into a
   sparkline and made the downtown cluster read as a bar chart. */
/* Aug 26, Cam: the "Phoenix · Arizona" word is gone — the ridge IS the locality
   now, so it runs full-width and taller. */
.letterhead svg{flex:1 1 auto;width:100%;height:clamp(66px,8vw,104px);display:block;opacity:.66}
/* struck, not faded in: the ridge draws left to right on load */
.lh-ridge{stroke-dasharray:var(--lh,2400);stroke-dashoffset:var(--lh,2400);
  animation:engrave 1.9s cubic-bezier(.35,.85,.35,1) .35s forwards}
@keyframes engrave{to{stroke-dashoffset:0}}
.lh-city rect{opacity:0;animation:inkin .5s ease forwards}
.lh-city rect:nth-child(1){animation-delay:1.32s} .lh-city rect:nth-child(2){animation-delay:1.40s}
.lh-city rect:nth-child(3){animation-delay:1.48s} .lh-city rect:nth-child(4){animation-delay:1.56s}
.lh-city rect:nth-child(5){animation-delay:1.64s} .lh-city rect:nth-child(6){animation-delay:1.72s}
@keyframes inkin{to{opacity:1}}

/* ── 5 · THE PHOENIX POSTMARK ───────────────────────────────────────────────
   ⛔ NO DATE. A dated filing stamp on a marketing page reads as a record of
   something that did not happen, which is the fabricated-artifact line and also
   Cam's own no-fake-anything standard. Place and county are simply true. */
.pa{position:relative}
/* CODEX R2 (medium): anchored 8px off the card's bottom edge, this sat OVER the
   last line of every practice-area description — measured 10px of overlap at
   320px. Copy stamped through by decoration is the opposite of meticulous,
   which is the one thing this whole design has to be. .pa-body now reserves the
   stamp's height so it lands on paper, not on words.
   CODEX R3 (low): it was also unreadable — 7.36px at opacity .42 measures
   2.11:1 on white. Muting text with opacity is the mistake; a real postmark is
   small but it is INK. Now opaque at ~10px, and re-measured.
   CODEX R4 (judgement): and it stayed English in Spanish mode while the exhibit
   label beside it correctly switched to "Prueba" — I keyed one and forgot the
   other. Keyed off html[data-lang] now, the same way. */
.pa-body{padding-bottom:calc(1.1rem + 2.6em)}
.pa::after{white-space:pre;text-align:center;
  position:absolute;right:10px;bottom:10px;z-index:2;pointer-events:none;
  padding:.32rem .5rem;border:1.5px double var(--stamp);border-radius:3px;
  color:var(--stamp);transform:rotate(-7deg);
  font-family:var(--sans);font-weight:700;font-size:.62rem;line-height:1.3;
  letter-spacing:.12em;text-transform:uppercase}
html[data-lang="en"] .pa::after{content:"Phoenix, Arizona\A Maricopa County"}
html[data-lang="es"] .pa::after{content:"Phoenix, Arizona\A Condado de Maricopa"}
/* and on the file tab itself, so the whole file is filed somewhere */
/* CODEX R3: was opacity .72 → 3.05:1 on manila. Same mistake as the postmark —
   opacity is not a way to make text quieter, it is a way to make it fail. The
   tab's own ink colour already measures 5.07:1; the separator carries the
   visual step-down instead. */
.file-tab::after{content:"Phoenix, AZ";margin-left:.55rem;padding-left:.55rem;
  border-left:1px solid rgba(74,59,34,.34);
  font-size:.66em;letter-spacing:.16em}

@media (prefers-reduced-motion:reduce){
  .lh-ridge{animation:none;stroke-dashoffset:0}
  .lh-city rect{animation:none;opacity:1}
  .pa::after{transform:rotate(-7deg)}
}

/* ── 3 · THE WINDOW ─────────────────────────────────────────────────────────*/
.window{background:linear-gradient(180deg,#F5EEE1 0%,#FBF7EF 100%);
  padding:clamp(30px,5vw,64px) 0}
.win-frame{position:relative;margin:0;padding:14px 14px 0;background:#fff;border-radius:2px;
  transform:rotate(-.6deg);
  box-shadow:0 2px 3px rgba(58,42,16,.20), 0 26px 56px -22px rgba(58,42,16,.55)}
.win-scene{position:relative;overflow:hidden;border-radius:1px;
  height:clamp(220px,34vw,420px);background:#141C33;
  --t:0;   /* 0 = day, 1 = night. Driven by the band's own position. */
  --p:0}
.win-scene > .wsky{position:absolute;inset:0}
.wsky-day{background:linear-gradient(180deg,#7FB3D9 0%,#BBD5E8 44%,#F3D9B8 78%,#F0C89A 100%);
  opacity:calc(1 - var(--t))}
.wsky-dusk{background:linear-gradient(180deg,#3B2A5A 0%,#7C3F6B 36%,#C95B4A 66%,#E8894F 87%,#F2A85C 100%);
  opacity:calc(1 - 4 * (var(--t) - .5) * (var(--t) - .5))}
.wsky-night{background:linear-gradient(180deg,#080C18 0%,#141C33 40%,#33223C 70%,#5A2E38 90%,#7A3A34 100%);
  opacity:var(--t)}
.wstars{position:absolute;inset:0 0 46% 0;opacity:calc((var(--t) - .5) * 2)}
.wstars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.95}}
.wridge{position:absolute;left:-5%;right:-5%;width:110%;display:block}
.wridge-far {bottom:33%;transform:translate3d(0,calc(var(--p) * -10px),0);opacity:.85}
.wridge-mid {bottom:23%;transform:translate3d(0,calc(var(--p) * -20px),0)}
.wridge-near{bottom:0;transform:translate3d(0,calc(var(--p) * -34px),0)}
.wdowntown{position:absolute;left:0;right:0;bottom:20%;height:30%;
  transform:translate3d(0,calc(var(--p) * -26px),0)}
.wwin{fill:#FFD9A0}
/* Gated on --t alone, NOT on a .lit class. .lit existed so the silhouette
   could paint one frame before the lights came on, but --t starts at 0 and
   window opacity is calc(--t * --w), so they are already invisible at midday —
   the class was buying nothing and cost real degradation: with JS off it is
   never added, so the city stayed dark even though the noscript sheet forces
   the sky to dusk. One less piece of state, and the audit stops flagging it. */
.wwin{opacity:calc(var(--t) * var(--w,1))}
.wlanes{position:absolute;left:0;right:0;bottom:9%;height:38px;overflow:hidden;
  opacity:calc(var(--t) * .8)}
.wlane{position:absolute;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#FFE2B0,transparent);
  animation:drive linear infinite}
.wlane.rev{background:linear-gradient(90deg,transparent,#FF9E9E,transparent)}
@keyframes drive{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
.whaze{position:absolute;left:0;right:0;bottom:0;height:44%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,170,110,calc(.26 * (1 - var(--t)) + .14)) 72%,rgba(120,50,40,calc(.20 * var(--t))) 100%);
  mix-blend-mode:screen}
/* the frame's own inner shadow — a print sits IN a mount, it does not float */
.win-scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.30)}
.win-frame figcaption{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.2rem 1rem;padding:.75rem .3rem .9rem}
.win-note{font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--archive)}

@media (max-width:820px){ .wlanes{display:none} }
@media (prefers-reduced-motion:reduce){
  .wstars i,.wlane{animation:none}
  .wridge,.wdowntown{transform:none}
  .wlanes{display:none}
  .win-frame{transform:none}
  /* a scene that cannot move should still be a picture, not a black box:
     hold it at dusk, which is the frame worth showing if you only get one */
  .win-scene{--t:.62}
}

/* ── #espanol: her standing figure on the navy ──────────────────────────────
   A cutout on a dark ground needs a floor and a light source or it floats:
   a soft red rim from behind (the brand as backlight) and an elliptical floor
   shadow seat her in the space. */
.espanol-brenda{display:flex;align-items:flex-end;justify-content:center;position:relative}
.espanol-brenda img{max-height:min(520px,58vh);width:auto;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.55));position:relative;z-index:1}
.espanol-brenda::before{content:"";position:absolute;inset:auto 0 8%;height:70%;z-index:0;
  background:radial-gradient(50% 60% at 50% 60%,rgba(196,36,48,.32),transparent 70%)}
.espanol-brenda::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:62%;height:22px;border-radius:50%;background:rgba(0,0,0,.5);filter:blur(10px);z-index:0}
@media (max-width:820px){.espanol-brenda img{max-height:380px}}

/* ═══════════════════════════════════════════════════════════════════════════
   PHOENIX BOLD — override layer (v5, 2026-08-25 evening)
   Cam saw the Case File live and killed it: beige-on-beige, no punch. This
   layer sits LAST in the cascade and re-skins the page: deep navy and dusk,
   billboard type, the real burning-sky photograph (licensed Adobe Stock
   446842494, Estrella Mountains) as the hero ground. The paper metaphor dies
   here; the inventions (timeline, stamps, engraving, window) survive, re-inked.
   Density pass per Cam: tighter sections, smaller headers, smaller cards,
   less scroll.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --pb-night:#0B1220; --pb-navy:#10151C; --pb-navy2:#161D28;
  --pb-dusk1:#2A1B3D; --pb-dusk2:#7C2D3E; --pb-ember:#E8894F;
  --pb-line:rgba(255,255,255,.14);
}

/* ── DENSITY PASS (Cam: "everything is spread… so much scrolling") ────────── */
section .wrap, .hero .wrap{padding-top:clamp(34px,5vw,64px);padding-bottom:clamp(34px,5vw,64px)}
.sec-head{margin-bottom:clamp(14px,2vw,24px)}
.sec-head .shout, section .shout{font-size:clamp(1.9rem,4.6vw,3.4rem)}   /* was up to 5.5rem */
.sec-head .lede, section > .wrap > .lede{font-size:clamp(.95rem,1.6vw,1.05rem);max-width:46em}
p.lede{margin-top:.6rem}

/* ── THE GROUND: navy, always ─────────────────────────────────────────────── */
body{background:var(--pb-navy);color:#EAECEF}
.paper-grain::after{display:none}                      /* the paper is gone */

/* ── HERO: the burning sky ────────────────────────────────────────────────── */
.hero-file{position:relative;color:#fff;
  background:
    linear-gradient(180deg, rgba(11,18,32,.20) 0%, rgba(11,18,32,.05) 30%,
                            rgba(16,21,28,.55) 72%, var(--pb-navy) 98%),
    url("az-dusk.jpg") center 32%/cover no-repeat, var(--pb-night)}
/* the folder chrome dissolves — structure stays for the review-closed markup */
.hero-file .file-tab{background:rgba(11,18,32,.55);color:#fff;border-radius:4px;
  backdrop-filter:blur(4px);box-shadow:none;font-size:.68rem;padding:.45rem 1rem}
.hero-file .file-tab::before{background:#FF5A66}
.hero-file .file-tab::after{border-left-color:rgba(255,255,255,.35)}
.hero-file .file-body{background:transparent;box-shadow:none;padding:0;border-radius:0}
.hero-file .file-body::before{display:none}
.hero-file .sheet{background:transparent;box-shadow:none;padding:clamp(14px,2.5vw,30px) 0 0}
.hero-file .sheet-stack::before,.hero-file .sheet-stack::after{display:none}
.hero-file .sheet-rot{transform:none}
.hero-file .clip{display:none}
/* letterhead engraving: white line on the sky, quieter */
.hero-file .letterhead{border-bottom-color:rgba(255,255,255,.22)}
.hero-file .letterhead svg{opacity:.9}
.hero-file .lh-ridge{stroke:#fff}
.hero-file .lh-city{fill:#fff}
/* type: billboard white/red on dusk.
   Aug 27, Cam (pre-call, off Rafi's hero): IN YOUR FACE — bigger, slanted,
   hard-edged. The title is the billboard; nothing on the sky competes with it. */
.hero-file .hero-kicker{background:#fff;color:var(--red);transform:none;
  font-size:clamp(.9rem,1.9vw,1.2rem);padding:.45rem 1rem;letter-spacing:.24em}
.hero-file .shout{color:#fff;font-size:clamp(3.6rem,11vw,7.4rem);
  font-style:italic;letter-spacing:.005em;
  text-shadow:0 3px 0 rgba(11,18,32,.4), 0 10px 42px rgba(11,18,32,.8)}
.hero-file .shout + .hero-sub, .hero-file .hero-sub{color:#FFD9A0;border-bottom-color:rgba(255,255,255,.25)}
.hero-file .lede{color:rgba(255,255,255,.92)}
.hero-file .lede strong{color:#fff}
.hero-file .hero-ticks{color:rgba(255,255,255,.85)}
.btn-ghost-d{color:#fff;border-color:#fff}
@media (hover:hover) and (pointer:fine) {
.btn-ghost-d:hover{background:#fff;color:var(--pb-navy)}
}
/* the exhibit card becomes a bold framed portrait — HER, staring back */
.hero-exhibit{background:#fff;padding:10px 10px 8px;transform:rotate(0);
  border-radius:4px;box-shadow:0 30px 70px -24px rgba(0,0,0,.75)}
.hero-exhibit img{max-height:min(54vh,470px);object-position:50% 12%}
.hero-exhibit figcaption .hand{color:var(--red)}
.exhibit-clip{display:none}
.hero-exhibit .seal{right:-20px;bottom:-16px}

/* ── SECTION RHYTHM: dark / light beats instead of endless cream ──────────── */
.brenda{background:var(--pb-navy2);color:#EAECEF}
.brenda .eyebrow{color:#FF8A93}
.brenda .shout{color:#fff}
.brenda .lede{color:rgba(255,255,255,.85)}
.brenda .beat h3{color:#fff}
.brenda .beat p{color:rgba(255,255,255,.78)}
.brenda .beat::before{background:rgba(255,90,102,.4)}
.brenda .beat-n{background:transparent;border-color:#FF5A66;color:#FF8A93}
.brenda .polaroid{box-shadow:0 24px 54px -22px rgba(0,0,0,.8)}
.brenda .polaroid::before{display:none}
.brenda .hand{color:#FF8A93}

.window{background:var(--pb-navy);padding:clamp(20px,3.4vw,40px) 0}
.win-frame{background:#0E1420;padding:8px;transform:none;
  box-shadow:0 0 0 1px var(--pb-line), 0 26px 60px -24px rgba(0,0,0,.8)}
.win-frame figcaption{color:rgba(255,255,255,.8)}
.win-frame .hand{color:#FF8A93}
.win-note{color:rgba(255,255,255,.55)}

#cases{background:#F6F2EA}   /* ONE light beat so the rhythm breathes */
#cases .shout{color:var(--ink)}
/* smaller cards (Cam: images "so big, and they don't still have to be") */
.pa-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,1.8vw,22px)}
.pa{padding:8px 8px 0}
.pa img{aspect-ratio:16/10;object-fit:cover}
.pa-body{padding:.7rem .3rem 1rem}
.pa-body h3{font-size:1.02rem}
.pa-body p{font-size:.88rem}
.pa-body{padding-bottom:calc(.9rem + 2.2em)}
.pa::after{font-size:.5rem;opacity:.9}

#how{background:var(--pb-navy)}
#how .shout{color:#fff}
/* Aug 27, Cam's find: the section went navy but the cards stayed WHITE from the
   paper era — white words on white cards. Cards go dark like the case views. */
#how .step{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
#how .step h3{color:#fff}
#how .step p{color:rgba(255,255,255,.78)}
#how .step .hand{color:#FFD9A0}
.tl-line path{stroke:#FF5A66}
.st-mark{background:var(--pb-navy);border-color:#FF5A66;color:#FF8A93;box-shadow:none}
#how .hand{color:#FF8A93}
.tl-stamp{border-color:#FF5A66;color:#FF8A93}

#know{background:#131A24}
#know .shout{color:#fff}
#know .checkcard,#know .faq{background:#1A2230;box-shadow:0 1px 0 var(--pb-line)}
#know .checkcard{border-left-color:#FF5A66}
#know .checkcard h3,#know .faq h3{color:#fff}
#know .checkcard p,#know .faq p{color:rgba(255,255,255,.78)}
#know .fine{color:rgba(255,255,255,.5)}

#promise{background:
  linear-gradient(180deg, rgba(16,21,28,.86), rgba(16,21,28,.94)),
  url("az-dusk.jpg") center 70%/cover no-repeat}
#promise .shout,#promise .point{color:#fff}
#promise .point::before{color:#FF8A93}
#promise .promise-note{color:#FF8A93}

#espanol{background:var(--red)}
#espanol::before{background:#fff;color:var(--red);box-shadow:none}
.espanol-brenda{display:none}   /* Cam: "that far picture… so incredibly bad" — beaten by the
  later, equal-specificity .espanol-brenda{display:flex} in the brand-pass block below; no
  !important needed on either side (D2: dropped from both so late cascade alone decides). */

#contact{background:#F6F2EA}
#contact .shout{color:var(--ink)}

footer{background:var(--pb-night)}

/* chant strip stays red — it pops on navy now */

@media (prefers-reduced-motion:reduce){ .hero-file{background-attachment:scroll} }

/* ═══════════════════════════════════════════════════════════════════════════
   PHOENIX BOLD — round 2 (Codex creative review, 2026-08-25 6:23p, verified
   before adoption: header stack measured 223px, quickhelp 96px, brenda gap
   64px — all as claimed). The theme of this layer is RESTRAINT: every element
   earns its place or leaves.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CUTS ──────────────────────────────────────────────────────────────────*/
.chant,.chant-track{display:none !important}          /* slogan noise → first-move band */
.hero-exhibit .seal{display:none !important}          /* campaign merch; $0 already in the ticks */
/* the file tab chrome dies; one quiet locality line remains */
.hero-file .file-tab{background:transparent;backdrop-filter:none;box-shadow:none;
  padding:0;margin-left:0;border-radius:0;color:rgba(255,255,255,.78);
  font-size:.64rem;letter-spacing:.2em}
.hero-file .file-tab::before{display:none}
/* Caveat retired everywhere — scripted writing without a real signature reads
   scrapbook. Same words, set straight. */
.hand{font-family:var(--sans);font-weight:600;transform:none;
  font-size:clamp(.95rem,1.6vw,1.1rem);letter-spacing:.01em}
/* the sunset appears ONCE. #promise back to quiet navy. */
#promise{background:linear-gradient(180deg,var(--pb-navy2),var(--pb-navy))}

/* ── HEADER COMPACTION (223px → ~128px desktop, ~88px mobile) ─────────────*/
.topbar{padding:.35rem 0;font-size:.68rem}
nav .wrap, .nav .wrap{padding-top:.4rem;padding-bottom:.4rem}
/* (logo height moved to the round-5/6 block below — the compaction's 40px here
   was silently overriding Cam's 68px via .nav's higher specificity) */
.quickhelp{padding:.35rem 0}
.quickhelp .qh-chip, .quickhelp a, .quickhelp button{padding:.3rem .8rem;font-size:.72rem}
.quickhelp p, .qh-note{display:none}                  /* the explainer line goes; chips self-explain */
@media (max-width:700px){
  .quickhelp{display:none}
  /* the topbar wrapped to two rows at 390px — the phone number and toggle row
     goes; the number lives in the hero CTA, the callbar and the floatbar, and
     the language toggle lives in the nav on mobile per v3's own pattern. */
  .topbar{font-size:.6rem;padding:.28rem 0}
  .topbar a[href^="tel:"]{display:none}
  
  .hero-file .letterhead{margin-bottom:4px}
  .hero-file .letterhead svg{height:52px} /* Aug 26: ridge grew site-wide; keep mobile in step */
}  /* Codex C1 — clips at 390px; prompts live in the dock. Desktop keeps them: Cam asked for this strip on Monday. */

/* ── DENSITY, round 2 ─────────────────────────────────────────────────────*/
section .wrap{padding-top:clamp(28px,3.6vw,48px);padding-bottom:clamp(28px,3.6vw,48px)}
.hero-file .wrap{padding-top:40px;padding-bottom:40px}
@media (max-width:700px){ .hero-file .wrap{padding-top:28px;padding-bottom:28px} }
.hero-file .lede{font-size:clamp(1rem,1.7vw,1.1rem)}         /* floor 16px */
.brenda .brenda-grid{gap:32px}
.brenda .beat{margin-bottom:22px}
/* Aug 27, Cam (phone check before Brenda's call): Meet Brenda mobile spacing
   compressed — less dead navy above the head, tighter photo→story rhythm. */
@media (max-width:700px){
  .brenda{padding-top:44px;padding-bottom:52px}
  .brenda .sec-head{margin-bottom:6px}
  .brenda .sec-head .lede{margin-bottom:0}
  .brenda .brenda-grid{gap:22px}
  .brenda .story-beats{gap:24px}
  .brenda .polaroid.two{margin-top:1.1rem}
  /* Cam's find: the old sticky design's top:104px rode along on position:relative,
     visually shoving both photos 104px down over beat 1. Zero it on phones. */
  .brenda .polaroid{position:static;top:auto}
}
/* cards: were over-compressed — Codex is right */
.pa-body h3{font-size:1.125rem}
.pa-body p{font-size:.9375rem}
@media (max-width:700px){ .pa img{aspect-ratio:2/1} }

/* ── HERO AS ONE COMPOSED UNIT ────────────────────────────────────────────*/
.hero-sheet{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:clamp(18px,3vw,44px)}
/* rows pinned EXPLICITLY. With the portrait spanning rows 1-2 of column 2, the
   full-width letterhead could not auto-place beside it, so the whole left
   column cascaded below the portrait and the headline vanished off the first
   screen — caught on reload. The letterhead narrows to column 1; the sky
   supplies the width it used to span. */
.hero-file .letterhead{grid-column:1;grid-row:1;margin-bottom:10px}
.hero-copy{grid-column:1;grid-row:2}
.hero-exhibit{grid-column:2;grid-row:1 / span 2;margin-top:8px;max-width:340px}
.hero-exhibit img{max-height:none;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.hero-exhibit figcaption{padding:.45rem .2rem .1rem}
.hero-exhibit figcaption .hand{color:var(--red);font-size:.95rem}
@media (max-width:900px){
  .hero-sheet{display:block}
  .hero-exhibit{float:right;width:44%;max-width:230px;margin:0 0 10px 14px;transform:none}
  .hero-file .shout{font-size:clamp(2.7rem,13.5vw,4.1rem)}
  .hero-file .hero-ctas, .hero-file .lede{clear:both}
}

/* ── ADDS ─────────────────────────────────────────────────────────────────*/
/* A1 · first move */
/* .firstmove retired Aug 27 (Cam) — 1-2-3 folded into .hero-steps */
.fm-wrap-retired{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
  padding-top:clamp(16px,2vw,24px);padding-bottom:clamp(16px,2vw,24px)}
.fm-cell{display:flex;align-items:baseline;gap:.6rem}
.fm-cell b{font-family:var(--display);font-size:1.5rem;line-height:1;opacity:.85}
.fm-cell p{margin:0;font-weight:600;font-size:clamp(.9rem,1.5vw,1.05rem)}
@media (max-width:700px){ .fm-wrap{grid-template-columns:1fr;gap:.5rem} }

/* A3 · section numbering — editorial discipline without the paper theme */
.sec-head .eyebrow{position:relative;display:inline-flex;align-items:center;gap:.6rem}
.sec-head .eyebrow::after{content:"";width:34px;height:1px;background:currentColor;opacity:.45}
#cases   .sec-head .eyebrow::before{content:"01"}
#how     .sec-head .eyebrow::before{content:"02"}
#know    .sec-head .eyebrow::before{content:"03"}
.brenda  .sec-head .eyebrow::before{content:"04"}
#contact .sec-head .eyebrow::before{content:"05"}
.sec-head .eyebrow::before{font-family:var(--display);font-size:.9em;color:var(--red);letter-spacing:.05em}
.brenda .sec-head .eyebrow::before,#how .sec-head .eyebrow::before,#know .sec-head .eyebrow::before{color:#FF8A93}

/* A4 · card intent state */
.pa-go{margin:.5rem 0 0;font-weight:700;font-size:.82rem;letter-spacing:.04em;
  color:var(--red);text-transform:uppercase}
.pa-body h3::after{transition:width .16s ease}
.pa:hover .pa-body h3::after,.pa:focus-within .pa-body h3::after{width:58px}
@media (hover:hover) and (pointer:fine) {
.pa:hover{transform:translateY(-2px)}    /* was -6px; restraint */
}

/* A7 · intent-only micro-interactions, 140-180ms, reduced-motion safe */
.btn, .pa, .pa-body h3::after, .fm-cell, nav a{transition:transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease}
.btn:focus-visible, nav a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .btn,.pa,.pa-body h3::after,.fm-cell,nav a{transition:none}
  @media (hover:hover) and (pointer:fine) {
  .pa:hover{transform:none}
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHOENIX BOLD round 3 — HUB & VIEWS (Cam's button: "click a box and just
   know what it is"). The homepage becomes a short hub; nine tiles open
   focused views with real URLs (#/car-accidents…). One file underneath, so
   the bilingual toggle, the dock, the noscript law and every review fix
   survive. With JS off, every view renders stacked — the page stays complete.
   ═══════════════════════════════════════════════════════════════════════════ */

/* views hidden until routed; the router stamps body[data-route] */
.view{display:none}
body[data-route="car-accidents"]  #v-car-accidents,
body[data-route="motorcycle"]     #v-motorcycle,
body[data-route="slip-fall"]      #v-slip-fall,
body[data-route="wrongful-death"] #v-wrongful-death,
body[data-route="serious-injury"] #v-serious-injury,
body[data-route="dog-bites"]      #v-dog-bites,
body[data-route="probate"]        #v-probate,
body[data-route="how-it-works"]   #how,
body[data-route="questions"]      #know,
body[data-route="espanol"]        #espanol,
body[data-route="meet-brenda"]    #v-brenda{display:block}
/* a routed view takes over: the hub steps aside */
body[data-route] .hero-file, body[data-route] .firstmove, body[data-route] #brenda,
body[data-route] .window, body[data-route] #cases, body[data-route] #promise,
body[data-route] #contact{display:none}
/* contact stays reachable from every view via the CTAs; footer always shows */

/* the tile grid — the "click a box" moment */
.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:820px){ .tile-grid{grid-template-columns:repeat(2,1fr)} }
.tile{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:1.05rem 1.15rem;background:#fff;border:1px solid #E4DDD0;border-radius:6px;
  color:var(--ink);text-decoration:none;font-family:var(--display);
  font-size:clamp(1rem,1.8vw,1.2rem);letter-spacing:.02em;
  box-shadow:0 1px 2px rgba(58,42,16,.08);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease}
.tile:hover,.tile:focus-visible{transform:translateY(-2px);border-color:var(--red);
  box-shadow:0 8px 22px -10px rgba(179,36,48,.35)}
.tile-go{color:var(--red);font-size:1.1em;transition:transform .15s ease}
@media (hover:hover) and (pointer:fine) {
.tile:hover .tile-go{transform:translateX(4px)}
}
.tile-alt{background:var(--pb-navy);color:#fff;border-color:transparent}
.tile-alt .tile-go{color:#FF8A93}

/* view chrome */
.view-wrap{max-width:860px}
.view-back{display:inline-block;margin-bottom:1rem;font-weight:700;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--red);text-decoration:none}
@media (hover:hover) and (pointer:fine) {
.view-back:hover{text-decoration:underline}
}
.view-head{display:flex;align-items:center;gap:1rem;margin:.2rem 0 .8rem}
.view-head img{width:120px;height:76px;object-fit:cover;border-radius:4px}
.view-head h2{font-family:var(--display);font-size:clamp(1.7rem,4vw,2.6rem);color:#fff}
#v-car-accidents,#v-motorcycle,#v-slip-fall,#v-wrongful-death,#v-serious-injury,#v-dog-bites,#v-probate{
  background:var(--pb-navy2);color:#EAECEF;min-height:60vh}
.view .lede{color:rgba(255,255,255,.86)}
.view-ticks{margin:1.1rem 0 .4rem;color:rgba(255,255,255,.85)}
.view-ticks span::before{color:#FF8A93}
/* dark views need the dark back-link variant */
#how .view-back,#know .view-back,
#v-car-accidents .view-back,#v-motorcycle .view-back,#v-slip-fall .view-back,
#v-wrongful-death .view-back,#v-serious-injury .view-back,#v-dog-bites .view-back,#v-probate .view-back{color:#FF8A93}
#espanol .view-back{color:#fff}

/* ── the "flow into each other" joins Cam asked for (hub only) ─────────────*/
.brenda,.window,#cases,#promise,#contact{position:relative}
#cases::before,#contact::before{content:"";position:absolute;top:0;left:0;right:0;height:64px;
  background:linear-gradient(180deg,var(--pb-navy),transparent);pointer-events:none}
#promise::before{content:"";position:absolute;top:0;left:0;right:0;height:64px;
  background:linear-gradient(180deg,#F6F2EA,transparent);opacity:.14;pointer-events:none}

/* ── THE WINDOW, round 4: the REAL valley (Cam: "I don't know what that is —
   change it immediately… an active Phoenix view with the mountains in back,
   Chucky prominently in the sky"). Adobe Stock 389655219 (under license): downtown
   Phoenix at sunset, the ranges layered behind, open pink sky — and the
   wordmark set INTO that sky. "Active" = a slow Ken Burns drift plus a
   static warm ember glow; complete and readable with motion off. ────── */
.win-photo{position:relative;overflow:hidden;border-radius:2px;
  height:clamp(240px,38vw,460px);background:var(--pb-navy)}
.wp-img{position:absolute;inset:-4%;
  /* round 6, Cam: "Higgsfield is so incredibly strong — make something really
     cool, a sunrise with Camelback in view of downtown, alive somehow."
     Generated as deliberately STYLIZED cinematic artwork (Cinema Studio 2.5,
     2K) — brand art of the valley, not faux photography; Cam overrode my
     no-AI-places rule knowingly and the stylization is the honest middle.
     Three takes generated; this one won: first light raking the towers gold,
     the mountain burning red behind downtown, amber sky carrying the mark.
     His stock pick (az-camelback.jpg) stays in assets as the alternate. */
  background:url("az-sunrise.jpg") center 30%/cover no-repeat;
  animation:kenburns 36s ease-in-out infinite alternate;
  transform-origin:52% 60%}
@keyframes kenburns{from{transform:scale(1) translateX(0)}to{transform:scale(1.09) translateX(-1.6%)}}
/* legibility + mood: gentle navy floor, static ember glow in the sky */
.wp-grade{position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(16,21,28,.16) 0%, transparent 34%,
    rgba(16,21,28,.42) 82%, rgba(16,21,28,.66) 100%)}
.wp-grade::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 42% at 50% 18%, rgba(232,137,79,.26), transparent 70%);
  opacity:.7;mix-blend-mode:screen} /* W1-3: static ember — the pulse made "art or photo?" ambiguous */
/* Chucky, in the sky */
.wp-mark{position:absolute;top:9%;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;gap:.15rem;text-align:center}
.wp-word{font-family:var(--display);color:#fff;-webkit-text-stroke:.5px rgba(16,21,28,.15);
  font-size:clamp(2rem,6vw,4.2rem);letter-spacing:.06em;line-height:1;
  text-shadow:0 2px 18px rgba(16,21,28,.65), 0 0 44px rgba(232,137,79,.35)}
.wp-word i{font-style:normal;color:#FF5A66}
.wp-sub{font-family:var(--sans);font-weight:700;color:rgba(255,255,255,.92);
  font-size:clamp(.72rem,1.5vw,.95rem);letter-spacing:.3em;text-transform:uppercase;
  text-shadow:0 1px 10px rgba(16,21,28,.7)}
@media (prefers-reduced-motion:reduce){
  .wp-img{animation:none;inset:0}
  .wp-grade::after{animation:none;opacity:.7}
}

/* ── round 5: the emblem, the faces, the proof ─────────────────────────────*/
/* Cam: "make the emblem bigger, more clickable." Bigger art, a real hit area,
   a hover response, and it now exits any view back to the hub. */
/* round 6, Cam: "make it BIGGER" (68px) · Aug 26, Cam again: bigger still —
   84px desktop. FOUND + FIXED here: the Aug-25 compaction's `.nav img{40px}`
   out-specified this rule, so the emblem had been 40px on every screen since
   Monday — which is why Cam kept asking. Both selectors now, one owner. */
nav img, .nav img{height:84px;width:auto}
.nav-logo{display:inline-flex;align-items:center;padding:6px 10px;margin:-6px 0;
  border-radius:6px;transition:background-color .15s ease, transform .15s ease}
.nav-logo:hover,.nav-logo:focus-visible{background:rgba(255,255,255,.07);transform:scale(1.03)}
@media (max-width:700px){ nav img, .nav img{height:62px} }

/* tiles with faces */
/* Aug 27, Cam: postage-stamp thumbs → IMAGE CARDS. Photo on top, wording under,
   the whole card is the click into that case's page (which books the call). */
.tile{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0;
  padding:0;overflow:hidden;border-radius:9px}
.tile-thumb{grid-column:1 / -1;width:100%;height:auto;aspect-ratio:16/10;
  border-radius:0;overflow:hidden}
.tile-t{padding:.8rem .4rem .8rem 1rem}
.tile-go{padding:.8rem 1rem .8rem 0;align-self:center}
.tile-alt{grid-template-columns:1fr auto;padding:0}
.tile-alt .tile-t{padding:1.1rem .4rem 1.1rem 1rem}
.tile-alt .tile-go{padding:1.1rem 1rem 1.1rem 0}
.tile-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease}
@media (hover:hover) and (pointer:fine) {
.tile:hover .tile-thumb img{transform:scale(1.07)}
}
.tile-alt .tile-thumb{display:none}
/* Brenda 9/7: "add probate to services offered" — NOT an injury case and not
   contingency, so it gets its own full-width row under the six injury cards
   instead of a seventh look-alike; the view says plainly which pledge applies. */
.tile-wide{grid-column:1 / -1}
.tile-wide .tile-t small{display:block;font-family:var(--sans);font-weight:500;font-size:.78rem;
  letter-spacing:.02em;text-transform:none;opacity:.8;margin-top:.15rem}

/* the trust strip */
.truststrip{background:var(--pb-night);border-top:1px solid var(--pb-line);
  border-bottom:1px solid var(--pb-line)}
.ts-wrap{display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2.2rem);
  flex-wrap:wrap;padding-top:clamp(18px,2.4vw,28px);padding-bottom:clamp(18px,2.4vw,28px)}
.ts-states{display:flex;align-items:center;gap:clamp(.7rem,1.6vw,1.2rem)}
.ts-states b{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.4rem);
  color:#fff;letter-spacing:.04em}
.ts-states i{width:5px;height:5px;border-radius:50%;background:#FF5A66}
.ts-line{margin:0;color:rgba(255,255,255,.85);font-weight:600;
  font-size:clamp(.9rem,1.6vw,1.05rem)}
@media (max-width:700px){ .ts-wrap{flex-direction:column;gap:.5rem;text-align:center} }

/* ═══════════════════════════════════════════════════════════════════════════
   BRAND PASS — 2026-09-02. Brenda's NEW logo: metallic GOLD + deep BURGUNDY
   Lady Justice on white, burgundy sweep, gold rule. The old red "Chucky-hair
   scales" mark is retired everywhere (infringement worry) and the bright
   billboard red goes with it.

   THE SYSTEM (one rule, so the page never turns yellow):
     · GOLD lives on DARK — text, icons, hairlines, and the primary button.
     · GOLD-DEEP is gold on LIGHT — rules, stamps, borders only (never body text).
     · BURGUNDY is structure — panels, fills, ghost borders, small text on light.
     · CREAM / BONE carry the light beats.
   Palette values are SAMPLED BY EYE from her logo screenshot; the real file has
   not landed. Every one is a custom property — drop the true values into the
   :root block at the top of this file and the whole site follows.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ground: one ink family, no navy ──────────────────────────────────────── */
:root{
  --pb-night:#0B0E13; --pb-navy:#0F131A; --pb-navy2:#141922;
  --pb-dusk1:#1B0A12; --pb-dusk2:#6E1020; --pb-ember:#C9A24A;
  --pb-line:rgba(201,162,74,.16);
}
body{background:var(--pb-navy)}

/* ── LOGO: the temporary TEXT lockup ───────────────────────────────────────
   Her real file replaces .wordmark; the box is sized to the 84px the old image
   held, so nothing shifts when it lands. ──────────────────────────────────── */
.wordmark{display:flex;flex-direction:column;justify-content:center;gap:.26rem;
  height:72px;line-height:1}
.wm-name{font-family:var(--display);font-weight:400;text-transform:uppercase;
  color:var(--cream);font-size:1.82rem;letter-spacing:.055em;line-height:1}
.wm-rule{display:block;height:1px;width:100%;
  background:linear-gradient(90deg,var(--gold),rgba(201,162,74,.14))}
.wm-tag{font-family:var(--sans);font-weight:600;color:var(--gold);
  font-size:.5rem;letter-spacing:.185em;text-transform:uppercase;line-height:1.25}
.nav-logo{align-items:center}
@media(max-width:700px){
  .wordmark{height:62px;gap:.22rem}
  .wm-name{font-size:1.5rem}
  .wm-tag{font-size:.42rem;letter-spacing:.14em}
}
/* the scales glyph — ours, drawn from primitives; never a copy of a real mark */
.glyph-scales{width:100%;height:100%;display:block;color:var(--gold);
  stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

/* footer lockup, one size up */
.foot-lockup .wordmark{height:auto;gap:.4rem}
.foot-lockup .wm-name{font-size:clamp(1.9rem,4.2vw,2.7rem)}
.foot-lockup .wm-tag{font-size:.58rem;letter-spacing:.2em}
.foot-lockup{display:flex;align-items:center;gap:1.1rem}
.foot-lockup .foot-glyph{width:52px;height:52px;flex:none}

/* ── ANNOUNCE + NAV: burgundy band under a gold hairline ──────────────────── */
.announce{background:var(--pb-night);color:var(--bone);
  border-bottom:1px solid rgba(201,162,74,.14)}
.announce a{border-bottom-color:rgba(201,162,74,.5);color:var(--gold-lite)}
.lang-toggle{border-color:rgba(201,162,74,.4)}
.lang-toggle button[aria-pressed="true"]{background:var(--gold);color:var(--ink-0);opacity:1}
.nav{background:var(--pb-night);border-bottom:none;position:relative}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--burgundy) 0%,var(--burgundy-lite) 46%,var(--gold) 100%)}
.nav-links{color:var(--bone-dim)}
.nav-links a{position:relative;padding-bottom:3px}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--gold);transition:right .22s cubic-bezier(.16,1,.3,1)}
@media (hover:hover) and (pointer:fine) {
.nav-links a:hover{color:var(--cream)}
}
.nav-links a:hover::after,.nav-links a:focus-visible::after{right:0}
.mobile-nav>summary{border-color:rgba(201,162,74,.34)}
.mobile-nav[open]>summary{border-color:var(--gold)}
.floatbar{background:var(--pb-night);border-bottom:1px solid rgba(201,162,74,.2)}
.floatbar .fb-mark{display:flex;align-items:center;gap:.55rem}
.floatbar .fb-glyph{width:30px;height:30px;flex:none}
.floatbar .fb-mark b i{color:var(--gold)}

/* ── BUTTONS: gold is the action, burgundy is the alternative ─────────────── */
/* .btn-red keeps its name so every call site flips at once — it is GOLD now. */
.btn-red{background:var(--gold);color:var(--ink-0);font-weight:400;
  box-shadow:0 10px 30px -12px rgba(201,162,74,.55);border:1px solid var(--gold)}
@media (hover:hover) and (pointer:fine) {
.btn-red:hover{background:var(--gold-lite);border-color:var(--gold-lite);
  color:var(--ink-0);box-shadow:0 14px 34px -12px rgba(201,162,74,.7)}
}
.btn-white{background:var(--cream);color:var(--burgundy);border:1px solid var(--cream)}
@media (hover:hover) and (pointer:fine) {
.btn-white:hover{background:#fff}
}
.btn-ghost-w{border:1px solid rgba(247,243,236,.55);color:var(--cream);background:transparent}
@media (hover:hover) and (pointer:fine) {
.btn-ghost-w:hover{border-color:var(--cream);background:rgba(247,243,236,.1)}
}
/* ghost on LIGHT grounds = burgundy-bordered, per the brand ruling */
.btn-ghost-d{background:transparent;color:var(--burgundy);border:1px solid var(--burgundy)}
@media (hover:hover) and (pointer:fine) {
.btn-ghost-d:hover{background:var(--burgundy);color:var(--cream);border-color:var(--burgundy)}
}
/* ...but on the dark hero a burgundy border is invisible against ink, so the
   hero's secondary takes the gold hairline instead. Documented deviation. */
.hero-file .btn-ghost-d{color:var(--gold);border-color:rgba(201,162,74,.55);background:rgba(201,162,74,.05)}
@media (hover:hover) and (pointer:fine) {
.hero-file .btn-ghost-d:hover{background:rgba(201,162,74,.14);border-color:var(--gold);color:var(--gold-lite)}
}
.btn{border-radius:6px;font-weight:400}

/* ── THE HERO ──────────────────────────────────────────────────────────────
   The stock sunset is retired: under a burgundy grade it read as a stock
   sunset with a burgundy filter on it, and it fought the standing figure for
   the whole top third. In its place, a composed ink→burgundy field with ONE
   ambient drift (the page's only ambient effect) and a fine grain. ────────── */
.hero-file{
  background:
    radial-gradient(46% 74% at 82% 40%, rgba(142,34,49,.58), transparent 68%),
    radial-gradient(70% 52% at 32% 6%, rgba(110,16,32,.34), transparent 70%),
    radial-gradient(52% 44% at 4% 98%, rgba(201,162,74,.08), transparent 74%),
    linear-gradient(174deg,#0B0E13 0%,#140910 44%,#180A11 66%,#0B0E13 100%);
  border-bottom:1px solid rgba(201,162,74,.16)}
/* AMBIENT (Mode B port of react-bits Backgrounds/Aurora — CSS only, 0 KB JS):
   two soft colour fields drifting against each other at 26s. */
.hero::before{
  inset:-8%;
  background:
    radial-gradient(26% 36% at 78% 34%, rgba(142,34,49,.34), transparent 68%),
    radial-gradient(30% 30% at 34% 74%, rgba(110,16,32,.24), transparent 72%);
  filter:blur(14px);
  animation:heroDrift 26s ease-in-out infinite alternate;
  will-change:transform}
@keyframes heroDrift{from{transform:translate3d(-1.5%,1.5%,0) scale(1)}
                     to{transform:translate3d(2.5%,-2%,0) scale(1.09)}}
.hero-file.paper-grain::after{display:block;opacity:.16;mix-blend-mode:overlay}
.hero-file .file-tab{display:none}

.hero-file .hero-kicker{background:transparent;color:var(--gold);
  border:1px solid rgba(201,162,74,.42);border-radius:99px;
  padding:.42rem 1.05rem;letter-spacing:.26em;font-weight:400;
  font-size:clamp(.66rem,1.35vw,.78rem);box-shadow:none}
.hero-file .shout{color:var(--cream);font-size:clamp(3.1rem,9.4vw,6.2rem);
  letter-spacing:-.005em;line-height:.9;
  text-shadow:0 14px 46px rgba(0,0,0,.55)}
.hero-file .shout::after{content:"";display:block;width:clamp(90px,12vw,168px);height:2px;
  margin-top:clamp(14px,1.8vw,22px);
  background:linear-gradient(90deg,var(--gold),rgba(201,162,74,0))}
.hero-file .hero-sub, .hero-file .shout + .hero-sub{
  color:var(--bone);font-family:var(--sans);font-weight:600;text-transform:none;
  letter-spacing:.005em;font-size:clamp(1.02rem,1.9vw,1.28rem);
  border-bottom:none;padding-bottom:0;margin:clamp(14px,1.8vw,20px) 0 0;max-width:22em}
.hero-file .hero-ctas{margin-top:clamp(20px,2.6vw,30px);gap:.8rem}

/* the proof rail — Mode B port of react-bits Animations/StarBorder: a gold
   highlight travelling the top hairline of a bordered panel. */
.hero-file .hero-ticks{position:relative;margin-top:clamp(18px,2.4vw,26px);
  padding:.8rem 1rem;border:1px solid rgba(201,162,74,.22);border-radius:8px;
  background:rgba(11,14,19,.42);backdrop-filter:blur(3px);overflow:hidden;
  gap:.5rem 1.15rem;color:var(--bone);font-size:.86rem;max-width:44em}
.hero-file .hero-ticks::before{content:"";position:absolute;top:-1px;left:-40%;
  width:40%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lite),transparent);}
@keyframes railGlint{from{left:-40%}to{left:120%}}
.hero-file .hero-ticks span::before{color:var(--gold);font-weight:700}
.hero-file .hero-steps{margin-top:clamp(14px,1.8vw,20px);gap:.4rem 1.35rem;
  color:var(--bone-dim);font-size:.86rem}
.hero-file .hero-steps > span{color:var(--bone-dim)}
.hero-file .hero-steps b{color:var(--gold);font-size:1.05rem}
.hero-file .letterhead{display:none}   /* the drawn ridge read as an EKG line — retired with the fight-poster concept */

/* ── THE PORTRAIT: her own photograph, framed ──────────────────────────────
   Sep 2, Brenda's pick (confirmed through Cam): the hero carries the real
   photo she liked — the one captioned "Your story matters" — not a cut-out.
   A photograph has its own background, so it needs an edge: an ink mat with a
   thin gold rule, cropped 3:4 to her face with the office art still behind
   her. The burgundy halo stays (it lit the old figure); the gold floor line
   goes, because a card does not stand on anything. */
.hero-file .hero-exhibit{background:rgba(13,17,23,.92);padding:9px 9px 7px;
  border:1px solid rgba(201,162,74,.5);border-radius:3px;
  box-shadow:0 24px 46px -22px rgba(0,0,0,.85);
  position:relative;align-self:end;margin:0;max-width:none;transform:none;overflow:visible}
.hero-file .hero-exhibit::before{content:"";position:absolute;z-index:0;
  left:50%;top:-6%;width:150%;height:112%;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;filter:blur(3px);
  background:radial-gradient(closest-side,rgba(142,34,49,.6),rgba(110,16,32,.2) 54%,transparent 76%)}
.hero-file .hero-exhibit img{position:relative;z-index:1;display:block;
  background:none;border-radius:1px;filter:none;
  width:100%;height:auto;max-height:none;
  aspect-ratio:3/4;object-fit:cover;object-position:57% 62%}
.hero-file .hero-exhibit figcaption{position:relative;z-index:1;text-align:center;
  padding:.7rem 0 0;white-space:nowrap;
  color:var(--gold);font-family:var(--sans);font-weight:600;
  font-size:clamp(.6rem,1.05vw,.74rem);letter-spacing:.16em;text-transform:uppercase}

.hero-sheet{grid-template-columns:minmax(0,1fr) minmax(148px,248px);
  align-items:end;gap:clamp(18px,3.4vw,54px)}
.hero .wrap{min-height:0}
.hero-file .file,.hero-file .file-body{padding:0}
.hero-copy{grid-column:1;grid-row:1 / span 2;align-self:center}
.hero-file .hero-exhibit{grid-column:2;grid-row:1 / span 2;margin-top:0}
header.hero-file{padding:0}
header.hero-file > .wrap{padding-top:clamp(26px,3.2vw,44px);
  padding-bottom:clamp(26px,3.2vw,44px);min-height:0}
.hero-file .sheet{padding-top:0}
.hero-file .file-body{padding:0}
@media(max-width:900px){
  .hero-sheet{display:block}
  .hero-file .hero-exhibit{float:right;width:38%;max-width:190px;margin:0 0 8px 16px}
  /* the nowrap caption overflowed the floated column at 375–430 (clipped by
     html{overflow-x:hidden}, so scrollWidth never showed it) — it wraps here */
  .hero-file .hero-exhibit figcaption{white-space:normal;line-height:1.35;
    font-size:.56rem;letter-spacing:.08em;padding-top:.6rem}
  .hero-file .shout{font-size:clamp(2.7rem,12.4vw,4rem)}
  .hero-file .hero-ticks,.hero-file .hero-steps,.hero-file .hero-ctas{clear:both}
}
@media(max-width:520px){
  .hero-file .hero-exhibit{width:36%;max-width:150px;margin-left:12px}
  .hero-file .hero-exhibit figcaption .hand{font-size:.66rem;letter-spacing:.1em}
}

/* ── SECTIONS: gold on the dark beats, burgundy on the light ──────────────── */
#cases,#contact{background:var(--cream)}
#cases > .wrap,#contact > .wrap{padding-bottom:clamp(34px,3.8vw,54px)}
#cases .sec-head .eyebrow,#contact .sec-head .eyebrow{color:var(--burgundy)}
/* the accent word in a heading: BURGUNDY on the light beats (8.7:1 on cream),
   GOLD on the dark ones — burgundy on ink measures 2.0:1 and is unreadable. */
.eyebrow{color:var(--burgundy)}
.sec-head h2 .r,.shout .r{color:var(--burgundy)}
.brenda .shout .r,#how .shout .r,#know .shout .r,#promise .shout .r,
#espanol .shout .r,.view .shout .r,.brenda .sec-head h2 .r,#how .sec-head h2 .r,
#know .sec-head h2 .r{color:var(--gold)}
/* the section joins were 64px gradient smears that muddied every light beat;
   a 1px gold hairline is the same job, done cleanly */
#cases::before,#contact::before,#promise::before{height:1px;opacity:1;
  background:linear-gradient(90deg,rgba(201,162,74,0),rgba(201,162,74,.55),rgba(201,162,74,0))}
.sec-head .eyebrow::before{color:var(--burgundy)}
.brenda .sec-head .eyebrow::before,#how .sec-head .eyebrow::before,
#know .sec-head .eyebrow::before{color:var(--gold)}
.brenda{background:var(--pb-navy2)}
.brenda .eyebrow{color:var(--gold)}
.brenda .beat::before{background:rgba(201,162,74,.34)}
.brenda .beat-n{border-color:var(--gold);color:var(--gold)}
.brenda .hand{color:var(--gold-lite)}
.window{background:var(--pb-navy)}
.win-frame{background:var(--pb-night);box-shadow:0 0 0 1px var(--pb-line),0 26px 60px -24px rgba(0,0,0,.8)}
.win-frame .hand{color:var(--gold-lite)}
#how{background:var(--pb-navy)}
#how .step{background:rgba(201,162,74,.045);border-color:rgba(201,162,74,.16)}
#how .step .hand{color:var(--gold-lite)}
#how .hand{color:var(--gold-lite)}
.tl-line path{stroke:var(--gold)}
.st-mark{background:var(--pb-navy);border-color:var(--gold);color:var(--gold)}
.tl-stamp{border-color:var(--gold);color:var(--gold)}
#know{background:var(--pb-navy2)}
#know .checkcard,#know .faq{background:var(--pb-night);box-shadow:0 1px 0 var(--pb-line)}
#know .checkcard{border-left-color:var(--gold)}
#promise{background:linear-gradient(180deg,var(--pb-navy2),var(--pb-navy))}
#promise .point::before{color:var(--gold)}
#promise .promise-note{color:var(--gold-lite)}
#espanol{background:linear-gradient(165deg,var(--burgundy) 0%,var(--burgundy-deep) 100%)}
#espanol::before{background:var(--gold);color:var(--ink-0)}
#espanol .hand{color:var(--gold-lite)}
#espanol .view-back{color:var(--gold-lite)}
/* Brenda 9/8 ("the spacing seems off"): the global section padding (88px) sat on
   top of both wraps' own padding, leaving ~105px of empty burgundy between the
   Español tab and ← Volver; and the eyebrow had no gap to the headline, so on a
   phone (where it wraps to two lines) it ran straight into "Hablo español."
   Tightened for this view only — the hub sections keep their rhythm. */
#espanol{padding-top:clamp(18px,3vw,36px);padding-bottom:clamp(28px,4vw,56px)}
#espanol .eyebrow{line-height:1.5;margin-bottom:.75rem}
#espanol .shout{margin-top:0}
@media (max-width:600px){ #espanol .eyebrow{font-size:.72rem;letter-spacing:.2em} }
footer{background:var(--pb-night);border-top:1px solid rgba(201,162,74,.14)}

/* views */
#v-car-accidents,#v-motorcycle,#v-slip-fall,#v-wrongful-death,#v-serious-injury,
#v-dog-bites,#v-probate{background:var(--pb-navy2)}
.view-ticks span::before{color:var(--gold)}
#how .view-back,#know .view-back,
#v-car-accidents .view-back,#v-motorcycle .view-back,#v-slip-fall .view-back,
#v-wrongful-death .view-back,#v-serious-injury .view-back,#v-dog-bites .view-back,#v-probate .view-back{color:var(--gold)}
.view-head h2{color:var(--cream)}

/* ── LIGHT-GROUND GOLD = --gold-deep, rules and marks only, never body text ─ */
.pa-body h3::after{background:var(--gold-deep)}
.pa-body::before{background:var(--gold-deep)}
@media (hover:hover) and (pointer:fine) {
.pa:hover{border-color:rgba(140,106,31,.45)}
}
.pa-go{color:var(--burgundy)}
.stamp{border-color:var(--gold-deep);color:var(--gold-deep);
  box-shadow:0 2px 0 rgba(140,106,31,.16)}
.exhibit-tag{border-color:rgba(140,106,31,.34)}
.file-tab::before{background:var(--gold-deep);box-shadow:0 0 0 2px rgba(140,106,31,.2)}
.checkcard li::before{background:var(--gold-deep);color:var(--cream)}
.faq summary::after{color:var(--burgundy)}
.pull::before{color:var(--gold-deep)}
.way svg{stroke:var(--burgundy)}
@media (hover:hover) and (pointer:fine) {
.way:hover{border-color:rgba(110,16,32,.4)}
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--burgundy)}
.form-status{border-left-color:var(--gold-deep)}
a.qh-fallback{color:var(--burgundy)}
.view-back{color:var(--burgundy)}

/* ── QUICK-HELP: was a white slab wedged between the dark nav and the dark
   hero — the one remaining "template" seam in the header stack. Same copy,
   same chips, same wiring; it now belongs to the header. ─────────────────── */
.quickhelp{background:var(--pb-night);border-bottom:1px solid rgba(201,162,74,.14);
  border-top:none}
.quickhelp .qh-label,.qh-label{color:var(--bone-dim)}
.qh-chip{background:transparent;border:1px solid rgba(201,162,74,.34);
  color:var(--bone);border-radius:99px}
.qh-chip:hover,.qh-chip:focus-visible{background:var(--gold);border-color:var(--gold);
  color:var(--ink-0)}
a.qh-fallback{color:var(--gold)}

/* ── TILES: SpotlightCard + GlareHover, ported ─────────────────────────────
   react-bits Components/SpotlightCard (radial at --mouse-x/--mouse-y, 0.5s
   opacity fade) merged with Animations/GlareHover (a linear sheen swept by
   background-position over 650ms). Both are pointer-gated. ────────────────── */
.tile{--mx:50%;--my:50%;border:1px solid #E3DACA;border-radius:10px;
  box-shadow:0 1px 2px rgba(11,14,19,.06);position:relative}
.tile::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(220px circle at var(--mx) var(--my),
             rgba(201,162,74,.28),transparent 76%)}
.tile::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(-48deg,transparent 58%,rgba(247,243,236,.42) 68%,
             transparent 74%,transparent 100%);
  background-size:250% 250%;background-repeat:no-repeat;
  background-position:-110% -110%;transition:background-position .65s ease}
.tile-alt{background:var(--pb-navy);border-color:transparent}
.tile-alt .tile-go{color:var(--gold)}
@media (hover:hover) and (pointer:fine){
  .tile:hover,.tile:focus-visible{border-color:rgba(140,106,31,.5);
    box-shadow:0 12px 30px -14px rgba(11,14,19,.4)}
  .tile:hover::before,.tile:focus-within::before{opacity:1}
  .tile:hover::after{background-position:110% 110%}
  .tile-alt:hover{border-color:rgba(201,162,74,.5)}
}
.tile-go{color:var(--burgundy)}

/* practice cards get the same spotlight, in burgundy on their light ground */
.pa{--mx:50%;--my:50%;position:relative}
.pa::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(240px circle at var(--mx) var(--my),
             rgba(140,106,31,.16),transparent 78%)}
@media (hover:hover) and (pointer:fine){ .pa:hover::before{opacity:1} }

/* ── DOCK + CALL BAR ──────────────────────────────────────────────────────── */



@media (hover:hover) and (pointer:fine) {

}

@media (hover:hover) and (pointer:fine) {

}







/* the Chat pill: the one gold-lit surface that is always on screen —
   StarBorder's travelling highlight, reused at pill scale. */



.callbar{background:rgba(201,162,74,.22);border-top:1px solid rgba(201,162,74,.3)}
.callbar .c1{background:var(--gold);color:var(--ink-0)}
.callbar .c2{background:var(--pb-night);color:var(--cream)}
.callbar .c3{background:var(--pb-night);color:var(--cream)}

/* ── FORM + CONTACT on the cream ground ───────────────────────────────────── */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline-color:var(--burgundy)}
.btn:focus-visible,nav a:focus-visible,.tile:focus-visible,
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
#cases .shout,#contact .shout{color:var(--ink)}

/* ── TYPE + RHYTHM: one scale, one radius language, one shadow language ───── */
.sec-head .shout,section .shout{font-size:clamp(1.95rem,4.2vw,3.15rem);letter-spacing:-.005em}
.sec-head{margin-bottom:clamp(16px,2.2vw,26px)}
section .wrap{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,72px)}
.sec-head .eyebrow{letter-spacing:.28em;font-size:.72rem}
.tile,.pa,.step,.checkcard,.faq,.win-frame{border-radius:10px}
.tile-thumb{border-radius:0}


/* ── SPLIT-TEXT reveal (react-bits TextAnimations/SplitText, Mode B) ────────
   Words, not chars: chars on a 6rem Anton headline flicker. Rise + fade,
   60 ms stagger, the power3.out curve as cubic-bezier(.16,1,.3,1). ───────── */
.sw{display:inline-block;will-change:transform,opacity;
  opacity:0;transform:translateY(.42em);
  animation:swRise .78s cubic-bezier(.16,1,.3,1) both}
@keyframes swRise{to{opacity:1;transform:none}}

/* ── MAGNET (react-bits Animations/Magnet, Mode B) ─────────────────────────
   ≤6 px pull inside a 60 px halo; spring back on leave. Pointer-gated in JS. */
[data-magnet]{will-change:transform;transition:transform .45s ease-in-out}


/* ── DARK-GROUND OVERRIDES, LAST WORD ──────────────────────────────────────
   Everything above sets the LIGHT-ground values (burgundy text, --gold-deep
   rules). These re-state them for the dark beats and the routed views, where
   burgundy measures 1.5:1 and --gold-deep 3.5:1 against ink. Contrast probe
   caught all three: the eyebrows on #how/#know, the ghost CTA on every case
   view, and the timeline stamp. Keep this block at the bottom. */
.brenda .eyebrow,#how .eyebrow,#know .eyebrow,#promise .eyebrow,#espanol .eyebrow,
.view .eyebrow,.window .eyebrow,.truststrip .eyebrow{color:var(--gold)}
/* #espanol's ground IS burgundy, so gold measures 3.6:1 there — it takes the
   lighter gold (5.2:1) instead. */
#espanol .eyebrow{color:var(--gold-lite)}
.hero-file .btn-ghost-d,.view .btn-ghost-d,#how .btn-ghost-d,#know .btn-ghost-d,
.brenda .btn-ghost-d,#promise .btn-ghost-d,.window .btn-ghost-d{
  color:var(--gold);border-color:rgba(201,162,74,.55);background:rgba(201,162,74,.05)}
@media (hover:hover) and (pointer:fine) {
.hero-file .btn-ghost-d:hover,.view .btn-ghost-d:hover,#how .btn-ghost-d:hover,
#know .btn-ghost-d:hover,.brenda .btn-ghost-d:hover,#promise .btn-ghost-d:hover{
  background:rgba(201,162,74,.14);border-color:var(--gold);color:var(--gold-lite)}
}
.tl-stamp,#how .stamp,#know .stamp,.view .stamp,.brenda .stamp,#promise .stamp{
  border-color:var(--gold);color:var(--gold);box-shadow:0 2px 0 rgba(201,162,74,.16);
  background:transparent}
#how .checkcard li::before,#know .checkcard li::before,.view .checkcard li::before{
  background:var(--gold);color:var(--ink-0)}
#how .faq summary::after,#know .faq summary::after,.view .faq summary::after{color:var(--gold)}
#how .pull::before,#know .pull::before,.brenda .pull::before{color:var(--gold)}
#know .fine,.view .fine{color:rgba(237,231,220,.62)}

/* ── ROUTED VIEWS: the back-link wrap was carrying a full section's padding
   on top of the view's own, so every case page opened with ~340px of nothing. */
.view > .wrap:first-child{padding-top:clamp(16px,2vw,26px);padding-bottom:0}
.view > .wrap:first-child + .wrap{padding-top:clamp(8px,1.4vw,18px)}
.view-back{font-size:.78rem;letter-spacing:.14em}

/* ── MOBILE: the nav CTA wrapped to two lines at 375, and the floated figure
   pushed the hero CTAs 150px down the page. ─────────────────────────────── */
@media(max-width:700px){
  .nav .btn{padding:.55rem .85rem;min-height:44px;font-size:.68rem;white-space:nowrap}
  .nav .wrap{gap:.6rem}
  .hero-file .hero-exhibit{margin-bottom:0}
  .hero-file .hero-exhibit figcaption{padding-top:.45rem}
  .hero-file .shout{font-size:clamp(2.5rem,11.4vw,3.6rem)}
  .hero-file .hero-sub{font-size:1.02rem;margin-top:12px}
  .hero-file .hero-ctas{margin-top:18px;gap:.6rem}
  .hero-file .hero-ctas .btn{width:100%}
  /* the floating dock button is fixed bottom-right and at the fold it landed
     ON the last line of these two blocks — it clipped the tail of "Se habla
     español" in ES. Keep 5.6rem of the right edge free for it; the panel border
     stays full width so it still lines up with the buttons above. */
  .hero-file .hero-ticks{font-size:.8rem;padding:.7rem 5.6rem .7rem .85rem}
  .hero-file .hero-steps{padding-right:5.6rem}
}

/* ── MOTION + INPUT GATES ─────────────────────────────────────────────────── */
@media (hover:none),(pointer:coarse){
  .tile::before,.tile::after,.pa::before{display:none}
  [data-magnet]{transform:none !important}
}
@media (prefers-reduced-motion:reduce){
  .hero::before{animation:none}

  .sw{animation:none;opacity:1;transform:none}
  [data-magnet]{transition:none;transform:none !important}
  .tile::after{transition:none}
  .nav-links a::after{transition:none}
}



/* ── THE BRAND PLATE: her mark, at a size where it reads ───────────────────
   Her logo's own device, rebuilt full-width: the figure standing at the left
   edge, a burgundy sweep along the bottom with a thin gold rule above it, and
   the wordmark set beside her. She is SEATED on the sweep (the interim cut-out
   has her feet cut flat) and her left edge is pinned to the plate's own edge
   (the sword tip runs off the file's left edge and must never end mid-air).
   Both rules survive a re-cut. ──────────────────────────────────────────── */
.window{background:var(--pb-night)}
.brandplate{position:relative;overflow:hidden;border-radius:12px;padding:0;
  transform:none;box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  border:1px solid rgba(201,162,74,.16);
  background:
    radial-gradient(64% 96% at 20% 104%, rgba(110,16,32,.62), transparent 66%),
    radial-gradient(50% 60% at 88% 6%, rgba(201,162,74,.10), transparent 70%),
    linear-gradient(158deg,#141922 0%,#0B0E13 62%);
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;
  gap:clamp(14px,3.4vw,56px)}
.bp-figure{grid-column:1;align-self:end;justify-self:start;
  height:clamp(170px,27vw,392px);width:auto;max-width:none;
  margin:clamp(26px,3vw,40px) 0 0;position:relative;z-index:2;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.62))}
.bp-word{grid-column:2;align-self:center;display:flex;flex-direction:column;
  align-items:flex-start;gap:.7rem;text-align:left;
  padding:clamp(24px,3vw,40px) clamp(16px,3.4vw,52px) clamp(48px,6vw,80px) 0}
.bp-rule{display:block;width:clamp(90px,15vw,220px);height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(201,162,74,0))}
.brandplate .wp-word{position:static;color:var(--cream);text-shadow:none;
  -webkit-text-stroke:0;letter-spacing:.045em;line-height:.98;
  font-size:clamp(1.45rem,5.4vw,4rem)}
.brandplate .wp-word i{color:var(--gold)}
.brandplate .wp-sub{position:static;color:var(--gold);text-shadow:none;
  letter-spacing:.26em;font-size:clamp(.6rem,1.3vw,.84rem)}
.bp-sweep{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  height:clamp(20px,2.7vw,36px);border-radius:0 0 11px 11px;
  border-top:2px solid var(--gold);
  background:linear-gradient(180deg,var(--burgundy) 0%,var(--burgundy-deep) 100%)}
/* the retired stock band's rules are dead with its markup — neutralised so a
   future edit cannot resurrect assets/az-sunrise.jpg by accident. This is the
   LAST same-specificity .wp-mark rule in the sheet (the only one that set
   display at all was the base .wp-mark{display:flex} near line 1424), so
   display:none wins on source order alone — !important dropped (D2). */
.wp-img,.wp-grade,.wp-mark,.win-photo{display:none;background:none}

/* ── ESPAÑOL: the headshot lands here (the swap's other half) ─────────────── */
.espanol-brenda{display:flex}
.espanol-brenda img{max-height:min(460px,54vh);width:auto;border-radius:10px;
  border:1px solid rgba(201,162,74,.34);
  box-shadow:0 28px 62px -26px rgba(0,0,0,.8)}
.espanol-brenda::before{background:radial-gradient(closest-side,rgba(201,162,74,.16),transparent 72%)}
.espanol-brenda::after{display:none}
.espanol .eyebrow{color:var(--gold-lite)}
.espanol .lede{color:var(--bone-dim)}
.espanol .lede strong{color:var(--cream)}
@media(max-width:900px){ .espanol-brenda{display:none !important} }