/* Chucky Law — design tokens, Sep 15 2026 (Cam's polish brief, item 7).
   One serif (Newsreader) for headlines, one sans (Barlow) for everything else.
   THREE type sizes with real contrast, an 8px spacing scale, named colour roles,
   one easing. Every section reads from these; nothing sets its own font or
   colour without a reason written next to it. Loads last, so it wins. */
:root{
  /* type */
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --font-sans:"Barlow",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:var(--font-sans);          /* Anton is retired; every old "display" label is now Barlow 700 */
  --editorial:var(--font-serif);
  --sans:var(--font-sans);
  --fs-display:clamp(2.75rem,5.6vw,4.9rem);   /* 44 → 78px  · hero headline only */
  --fs-heading:clamp(2rem,3.4vw,3rem);        /* 32 → 48px  · one per section */
  --fs-body:1.0625rem;                        /* 17px       · everything else */
  --lh-display:1.02; --lh-heading:1.08; --lh-body:1.7;
  --track-label:.14em;                        /* labels = body font, 75% size, uppercase, tracked */
  /* spacing (8px scale) */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;
  --section-y:clamp(var(--s-6),9vw,var(--s-8));
  --wrap:1240px; --gutter:max(20px,5vw);
  /* colour roles */
  --c-bg:#F6F1E8;        /* ivory page */
  --c-surface:#FFFFFF;   /* paper for forms and image mats */
  --c-ink:#1C2027;       /* headlines, body */
  --c-muted:#4A4F57;     /* secondary text, captions */
  --c-rule:#E3DACB;      /* hairlines */
  --c-primary:#6E1020;   /* burgundy: buttons, italics, links */
  --c-primary-hover:#8E2231;
  --c-accent:#C9A24A;    /* gold: rules, eyebrows, numerals */
  --c-accent-soft:#E2C57E;/* gold on dark grounds */
  --c-dark:#2A0810;      /* the hero's deep burgundy ground */
  /* motion — the only easing on the site */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fade:400ms; --t-hover:200ms;
}
/* type scale applied */
h1,.hero-sky h1.shout{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:-.025em}
h2,.sec-head h2.shout,section .shout,.view .view-head h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-heading);line-height:var(--lh-heading);letter-spacing:-.02em;text-transform:none}
body{font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-ink)}
.eyebrow,.practice-caption,.qh-label,.announce,.nav-links,.wm-name,.fb-mark b,.dockbar a,.dockbar button,.callbar a,.callbar button,.btn,.view-back,.hero-sky .firm,figcaption{
  font-family:var(--font-sans)}
.eyebrow,.sec-head .eyebrow,.sec-head p.eyebrow,.view .eyebrow,.practice-caption,.qh-label,.hero-sky .firm{font-size:calc(var(--fs-body)*.75);letter-spacing:var(--track-label);text-transform:uppercase;font-weight:700}
.btn{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:calc(var(--fs-body)*.82)}
/* the old Anton wordmark, now Barlow: tighter tracking so it still reads as a mark */
.wm-name{font-family:var(--font-sans);font-weight:800;letter-spacing:.02em;font-size:1.55rem}
/* section rhythm */
main > section:not(.view):not(.hero){padding-top:var(--section-y);padding-bottom:var(--section-y)}
main > section:not(.view) > .wrap{padding-top:0;padding-bottom:0}
/* hover: colour and opacity only, 200ms, never a layout shift */
a,button{transition:color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease),opacity var(--t-hover) var(--ease)}

/* ---- polish brief item 2: header + mobile chrome ---- */
.announce .wrap{padding:.25rem 0;justify-content:flex-end}
.lang-toggle button{min-height:32px;min-width:44px;padding:0 .6rem}
.nav-logo{display:inline-flex;align-items:center;gap:.7rem}
.nav-logo img.nav-mark{width:44px;height:auto;display:block}
.wordmark{height:auto}
.wm-name{font-size:1.45rem;line-height:1}
.nav .wrap{padding:.55rem 0}
/* mobile bar: two buttons, 56px, no emoji */
.callbar-2{grid-template-columns:1fr 1fr}
.callbar-2{max-height:56px;overflow:hidden}
.callbar-2 a{min-height:55px;max-height:55px;padding:0 .5rem;gap:.55rem;font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}
.callbar-2 svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.callbar-2 .c1{background:var(--c-primary);color:#fff}
.callbar-2 .c2{background:var(--c-surface);color:var(--c-primary)}
@media(max-width:700px){
  .announce .wrap{padding:.2rem 0}
  .lang-toggle button{min-width:40px;min-height:36px;font-size:.62rem}
  .nav .wrap{padding:.5rem 0}
  .nav-logo img.nav-mark{width:36px}
  .wm-name{font-size:1.25rem}
  /* fixed chrome budget on phones: banner ≤ 64 + call bar 56 = 120 < 140. The scroll-in
     floatbar is off on phones — the call bar already carries the number. */
  .floatbar{display:none}
  .consultation-inner{display:flex;align-items:center;gap:12px;padding:8px 44px 8px 0}
  .consultation-kicker,.consultation-note{display:none}
  .consultation-offer h2{font-size:1rem;line-height:1.25;max-width:none}
  .consultation-cta{margin:0;min-height:40px;padding:6px 12px;font-size:.68rem;gap:10px;flex:none}
  .consultation-dismiss{top:50%;transform:translateY(-50%);width:36px;height:36px;font-size:1.4rem}
}

/* ---- item 3: Why Brenda (copy left, her photo right) ---- */
.why-brenda{background:var(--c-bg)}
.why-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center}
.why-brenda .sec-head{margin-bottom:var(--s-4);max-width:none}
.why-line{margin:0 0 var(--s-2);font-family:var(--font-serif);font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.35;color:var(--c-ink);max-width:24em}
.why-line + .why-line{color:var(--c-muted)}
.why-copy .btn{margin-top:var(--s-3)}
.why-photo{margin:0}
.why-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%}
.why-photo figcaption{padding:10px 0 0;font-size:calc(var(--fs-body)*.75);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
@media(max-width:900px){.why-grid{grid-template-columns:1fr;gap:var(--s-4)}.why-photo{max-width:420px}}

/* ---- instruction-manual pass: sections are headline + content, nothing above ---- */
.lead-line{margin:0 0 var(--s-3);font-family:var(--font-serif);font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.4;color:var(--c-muted);max-width:30em}
.hero-sky .hero-role{margin:.9rem 0 0}
.hero-sky .hero-line{margin-top:1.1rem}
.consultation{background:var(--c-surface)}
.consult-grid,.espanol-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:center}
.espanol-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.consult-photo,.espanol-photo{margin:0}
.consult-photo img,.espanol-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.espanol-photo img{object-position:50% 30%}
.consult-copy .btn,.espanol-copy .btn{margin-top:var(--s-3)}
.consult-copy h2,.espanol-copy h2{margin-bottom:var(--s-3)}
@media(max-width:900px){.consult-grid,.espanol-grid{grid-template-columns:1fr;gap:var(--s-4)}.consult-photo,.espanol-photo{max-width:420px;order:2}}

/* ---- Brenda's new mark (Sep 15): Lady Justice left of the wordmark, figure top on the cap line ---- */
.nav-logo{align-items:flex-start;gap:.75rem}
.nav-logo img.nav-mark{width:auto;height:56px}
.nav-logo .wordmark{padding-top:.18em}
@media(max-width:700px){.nav-logo img.nav-mark{width:auto;height:44px}.nav-logo .wordmark{padding-top:.12em}}
.floatbar .fb-glyph{width:auto;height:30px}
footer .foot-mark{height:72px;width:auto;display:block}
footer .foot-top .wordmark{padding-top:.2em}
.brandplate .bp-figure{filter:none}

/* ---- Part A: the practice list reserved a 24px first column for the numerals that are gone ---- */
.practice-list .tile{grid-template-columns:88px minmax(0,1fr) 22px;column-gap:20px;align-items:center}
.practice-list .tile .tile-t{font-size:clamp(1.35rem,1.9vw,1.75rem);line-height:1.15}
.practice-place::after{display:none}   /* the gold progress underline that tracked the counter */
@media(max-width:1100px){.practice-list .tile{grid-template-columns:66px minmax(0,1fr) 18px}}
@media(max-width:760px){.practice-list .tile{grid-template-columns:72px minmax(0,1fr) 18px;column-gap:14px}}
#cases > .wrap{padding-top:0;padding-bottom:0}
.practice-list .tile-wide{grid-template-columns:minmax(0,1fr) 22px}
.practice-list .tile-wide .tile-t{font-size:clamp(1.35rem,1.9vw,1.75rem)}

/* ---- Part B1: practice areas = burgundy band, six photo tiles ---- */
#cases.practice-band{background:var(--c-primary);color:var(--c-bg);padding-top:var(--section-y);padding-bottom:var(--section-y)}
.practice-band .practice-head{max-width:40em;margin-bottom:var(--s-5)}
.practice-band h2.shout,.practice-band h2.shout .r{color:var(--c-bg)}
.practice-band h2.shout .r{color:var(--c-accent-soft)}
.practice-band .lede{color:rgba(247,243,236,.82);margin:0}
.practice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.ptile{display:block;color:var(--c-bg);text-decoration:none}
.ptile-img{display:block;overflow:hidden;aspect-ratio:3/2;background:#3a0c14}
.ptile-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease)}
.ptile-t{display:block;padding:var(--s-2) 0 0;font-family:var(--font-serif);font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.2;transition:transform 300ms var(--ease),color 200ms var(--ease)}
@media(hover:hover) and (pointer:fine){.ptile:hover .ptile-img img{transform:scale(1.04)}.ptile:hover .ptile-t{transform:translateY(-2px);color:var(--c-accent-soft)}}
.ptile:focus-visible{outline:2px solid var(--c-accent-soft);outline-offset:4px}
.practice-more{margin:var(--s-4) 0 0;font-family:var(--font-serif);font-size:clamp(1.2rem,1.6vw,1.45rem)}
.practice-more a{color:var(--c-accent-soft);text-decoration:none;border-bottom:1px solid rgba(226,197,126,.4)}
.practice-band .illustration-note{margin:var(--s-4) 0 0;color:rgba(247,243,236,.6)}
@media(max-width:900px){.practice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}.ptile-t{font-size:1.05rem}}
@media(prefers-reduced-motion:reduce){.ptile-img img,.ptile-t{transition:none}.ptile:hover .ptile-img img{transform:none}}
/* the old "#cases .shout{ink}" rule outranks a class; match it with id + class */
#cases.practice-band h2.shout,#cases.practice-band .shout{color:var(--c-bg)}
#cases.practice-band h2.shout .r,#cases.practice-band .shout .r{color:var(--c-accent-soft)}
#cases.practice-band .lede,#cases.practice-band .sec-head .lede{color:rgba(247,243,236,.82)}

/* ---- Part B2: full-bleed photo break (static) ---- */
.photo-break{position:relative;height:56vh;min-height:360px;max-height:640px;overflow:hidden;background:#2A0810;display:flex;align-items:flex-end;padding:0 0 var(--s-6)!important}
.photo-break .break-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.photo-break::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,6,10,0) 35%,rgba(26,6,10,.72) 100%)}
.photo-break .break-copy{position:relative;z-index:1}
.break-line{margin:0;font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.15;color:var(--c-bg);max-width:18em;text-wrap:balance}
@media(max-width:760px){.photo-break{height:52vh;min-height:300px;padding-bottom:var(--s-5)!important}}
/* ---- Part B2: Español — photo edge-to-edge on the left, text in a narrow column ---- */
.espanol-home{padding:0!important}
.espanol-grid{display:grid;grid-template-columns:minmax(0,52%) minmax(0,48%);gap:0;align-items:center;width:100%}
.espanol-photo{order:1;margin:0;height:100%;min-height:520px}
.espanol-photo img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 30%;display:block}
.espanol-copy{order:2;padding:var(--section-y) max(20px,calc((100vw - var(--wrap))/2)) var(--section-y) clamp(32px,6vw,96px);max-width:34em}
@media(max-width:900px){.espanol-grid{grid-template-columns:1fr}.espanol-photo{min-height:0;max-width:none;height:auto;aspect-ratio:4/3}.espanol-copy{padding:var(--s-5) max(20px,5vw) var(--s-6);max-width:none}}
/* the standing photo is 1:2 — pin it inside its column so the copy sets the section height */
.espanol-photo{position:relative;min-height:560px}
.espanol-photo img{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:900px){.espanol-photo{min-height:0;aspect-ratio:4/3}.espanol-photo img{position:absolute}}
/* environments in place of repeat portraits (Brenda appears once per page) */
.why-photo img{aspect-ratio:4/5;object-position:50% 50%}
.espanol-photo img{object-position:50% 50%}
.consult-photo img{aspect-ratio:4/5;object-position:60% 50%}
#contact .contact-portrait.contact-env img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
#contact .contact-portrait.contact-env{display:block;margin:0 0 var(--s-3)}

/* ---- Part B3: consultation = burgundy band; Español text-first on phones ---- */
#consultation.consultation{background:var(--c-primary);color:var(--c-bg)}
#consultation.consultation h2.shout,#consultation.consultation .shout{color:var(--c-bg)}
#consultation.consultation h2.shout .r,#consultation.consultation .shout .r{color:var(--c-accent-soft)}
#consultation.consultation .why-line{color:var(--c-bg)}
#consultation.consultation .why-line + .why-line{color:rgba(247,243,236,.78)}
#consultation.consultation .btn.btn-red{background:var(--c-accent-soft);color:var(--c-ink);border-color:var(--c-accent-soft)}
#consultation.consultation .btn.btn-red:hover{background:var(--c-bg);color:var(--c-primary)}
.consult-photo img{filter:none}
@media(max-width:900px){.espanol-copy{order:1}.espanol-photo{order:2}}
.espanol-home{background:var(--c-bg)}

/* ---- item 5: the ONE scroll motion — fade-up on section entry, 400ms, the site easing.
   JS adds .fade-up to home sections and .is-in when they enter; no JS = visible. ---- */
.fade-up{opacity:0;transform:translateY(18px);transition:opacity var(--t-fade) var(--ease),transform var(--t-fade) var(--ease)}
.fade-up.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fade-up{opacity:1;transform:none;transition:none}}
.why-photo img{object-position:55% 45%}

/* ---- Part B, subpages: full-bleed photo break under the back link, one line of her copy ---- */
.view-break{position:relative;margin:var(--s-3) calc(50% - 50vw) var(--s-6);width:100vw;height:46vh;min-height:280px;max-height:520px;overflow:hidden;background:#2A0810}
.view-break img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.view-break::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,6,10,0) 40%,rgba(26,6,10,.7) 100%)}
.view-break figcaption{position:absolute;left:max(20px,calc((100vw - var(--wrap))/2));right:20px;bottom:var(--s-4);z-index:1;margin:0;
  font-family:var(--font-serif);font-style:italic;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.15;color:var(--c-bg);max-width:20em;text-wrap:balance}
.view .view-back{position:relative;z-index:2}
@media(max-width:760px){.view-break{height:40vh;min-height:240px;margin-bottom:var(--s-5)}.view-break figcaption{bottom:var(--s-3)}}

/* ---- Part B, subpages: one burgundy band per page (flat colour block, no radius, no shadow) ---- */
.view .band{background:var(--c-primary)!important;color:var(--c-bg)!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:var(--s-5) var(--s-4)!important;margin:var(--s-5) 0!important}
.view .band h2,.view .band h3,.view .band p,.view .band li,.view .band span,.view .band strong,.view .band cite,.view .band summary{color:var(--c-bg)!important}
.view .band h3{border-color:rgba(226,197,126,.35)!important}
.view .band a{color:var(--c-accent-soft)!important}
.view .band .btn,.view .band .btn-ghost-d{background:var(--c-accent-soft)!important;color:var(--c-ink)!important;border-color:var(--c-accent-soft)!important}
.view .band .btn span{color:var(--c-ink)!important}
.view .band ::before,.view .band ::after{border-color:rgba(226,197,126,.35)}
/* direct children of the page wrap can run edge to edge */
.view > .wrap > .band,.view .wrap > .client-guide.band,.view .wrap > .know-grid.band,.view .wrap > figure.band{margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding-left:max(20px,calc((100vw - var(--wrap))/2))!important;padding-right:max(20px,calc((100vw - var(--wrap))/2))!important}
.view .band.brandplate{background:var(--c-primary)!important}
/* the Your-rights checklist sat on a white card inside the band; flatten it */
.view .band .checkcard,.view .band .faq{background:transparent!important;border-color:rgba(226,197,126,.35)!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
.view .band .checkcard h3::after{background:var(--c-accent-soft)!important}
.view .band .checkcard li::before,.view .band .checkcard .tick{background:var(--c-accent-soft)!important;color:var(--c-primary)!important;border-color:var(--c-accent-soft)!important}
.view .band .fine,.view .band small{color:rgba(247,243,236,.7)!important}

/* ---- fix 4: shorter interior photo runway; no focus ring on routed headings; icon in buttons ---- */
.view-break{height:36vh;min-height:220px;max-height:380px;margin-bottom:var(--s-5)}
@media(max-width:760px){.view-break{height:30vh;min-height:200px}}
.view h2:focus,.view .shout:focus,.view [tabindex="-1"]:focus{outline:none}
.btn .btn-ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-right:.55rem;vertical-align:-3px}
/* ---- fix 5: on phones the banner sits above the call bar and never reflows the page ---- */
@media(max-width:700px){
  body{padding-top:0!important}
  html{scroll-padding-top:80px!important}
  .consultation-offer{top:auto;bottom:56px;inset:auto 0 56px 0;border-top:2px solid var(--gold);border-bottom:0;box-shadow:0 -8px 24px rgba(0,0,0,.14);animation:none}
}

/* ======================= BUTTON SYSTEM v2 — press-depth (Cam's button, Sep 17 2026) =======================
   One definition for every .btn, written last in the last stylesheet. Four older generations of .btn rules still sit in
   index.html, editorial.css and daylight.css (some keyed on ids); `:not(#_)` matches everything and adds id-level
   specificity, so this block wins everywhere without touching them. They are deleted in the final sweep.
   Feel: the face sits on a solid darker slab and sinks onto it when pressed. The slab is a zero-blur offset — a solid
   edge, not a drop shadow — and takes no layout space, so nothing around a pressed button moves.
   Pattern: 21st.dev "Press Depth" (ddoemonn, 23547), rebuilt in plain CSS without its pointer tilt. */
:root{--c-primary-slab:#470A14;--c-accent-slab:#A07E2E;--c-ghost-slab:#CDBFA6;--btn-depth:4px;--t-press:90ms}
.btn:not(#_):not(#_){
  position:relative;align-items:center;justify-content:center;gap:.7rem; /* display stays with the older rules: the header button is hidden on phones there */
  min-height:52px;padding:0 1.5rem;border:0;border-radius:4px;
  font-family:var(--font-sans);font-weight:700;font-size:calc(var(--fs-body)*.82);line-height:1.15;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  transform:translateY(0);-webkit-tap-highlight-color:transparent;cursor:pointer;
  transition:transform var(--t-press) var(--ease),box-shadow var(--t-press) var(--ease),background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.btn:not(#_):not(#_):active{transform:translateY(calc(var(--btn-depth) - 1px))}
.btn:not(#_):not(#_):focus-visible{outline:3px solid var(--c-ink);outline-offset:4px}
/* primary: burgundy face, on light surfaces */
.btn.btn-red:not(#_):not(#_){background:var(--c-primary);color:#fff;box-shadow:0 var(--btn-depth) 0 var(--c-primary-slab)}
.btn.btn-red:not(#_):not(#_):active{box-shadow:0 1px 0 var(--c-primary-slab)}
/* primary on burgundy / photo surfaces: the gold face, so the action never disappears into the band */
:is(header.hero,.nav,#consultation,.view .band,.espanol-page .band) .btn.btn-red:not(#_):not(#_),
.view .band .btn:not(#_):not(#_){background:var(--c-accent-soft)!important;color:var(--c-ink)!important;box-shadow:0 var(--btn-depth) 0 var(--c-accent-slab)}
:is(header.hero,.nav,#consultation,.view .band,.espanol-page .band) .btn.btn-red:not(#_):not(#_):active,
.view .band .btn:not(#_):not(#_):active{box-shadow:0 1px 0 var(--c-accent-slab)}
:is(header.hero,.nav,#consultation,.view .band) .btn:not(#_):not(#_):focus-visible{outline-color:var(--c-bg)}
/* secondary on light: paper face, burgundy ink, a hairline and a paper-coloured slab */
.btn.btn-ghost-d:not(#_):not(#_){background:var(--c-surface);color:var(--c-primary);box-shadow:inset 0 0 0 1px var(--c-primary),0 var(--btn-depth) 0 var(--c-ghost-slab)}
.btn.btn-ghost-d:not(#_):not(#_):active{box-shadow:inset 0 0 0 1px var(--c-primary),0 1px 0 var(--c-ghost-slab)}
/* secondary on dark: clear face, ivory hairline, translucent slab */
.btn.btn-ghost-w:not(#_):not(#_){background:transparent;color:var(--c-bg);box-shadow:inset 0 0 0 1px rgba(246,241,232,.7),0 var(--btn-depth) 0 rgba(246,241,232,.28)}
.btn.btn-ghost-w:not(#_):not(#_):active{box-shadow:inset 0 0 0 1px rgba(246,241,232,.7),0 1px 0 rgba(246,241,232,.28)}
@media(hover:hover) and (pointer:fine){
  .btn.btn-red:not(#_):not(#_):hover{background:var(--c-primary-hover)}
  :is(header.hero,.nav,#consultation,.view .band,.espanol-page .band) .btn.btn-red:not(#_):not(#_):hover,.view .band .btn:not(#_):not(#_):hover{background:var(--c-bg)!important}
  .btn.btn-ghost-d:not(#_):not(#_):hover{background:var(--c-primary);color:#fff}
  .btn.btn-ghost-w:not(#_):not(#_):hover{background:rgba(246,241,232,.12)}
  .btn:not(#_):hover .arr{transform:translateX(4px)}
}
/* compact contexts keep their size: the header and the float bar */
:is(.nav,.floatbar) .btn:not(#_):not(#_){min-height:44px;padding:0 1.05rem;font-size:.74rem;--btn-depth:3px}
/* the phone icon sits in a chip: gold on the burgundy face, burgundy on the gold face */
.btn:not(#_) .btn-ico,.hero-sky .btn:not(#_) svg{box-sizing:border-box;width:30px;height:30px;padding:6px;margin:0 .1rem 0 -.45rem;border-radius:50%;background:var(--c-accent-soft);color:var(--c-ink);stroke:currentColor;fill:none;stroke-width:1.9;vertical-align:middle}
:is(header.hero,.nav,#consultation,.view .band) .btn:not(#_) .btn-ico,header.hero .btn:not(#_) svg{background:var(--c-primary);color:#fff}
/* the brand arrow: a long hairline shaft with an open head, drawn once here and tinted by the text colour */
.arr{display:inline-block;flex:none;width:26px;height:12px;background:currentColor;vertical-align:-1px;transition:transform var(--t-hover) var(--ease);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 6h24M19 1l5.500 5-5.500 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 6h24M19 1l5.500 5-5.500 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media(max-width:700px){.btn.btn-red:not(#_):not(#_){min-height:56px}}
@media(prefers-reduced-motion:reduce){.btn:not(#_):not(#_),.btn:not(#_):not(#_):active,.arr,.btn:not(#_):hover .arr{transform:none;transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}}

/* ======================= BRAND LOGO (Sep 17 2026) — Brenda's gold "CHUCKY LAW" lockup =======================
   One transparent PNG (assets/logo-chucky-law-gold.png, 534x270) in the header, the float bar and the footer. It replaces
   the Lady Justice mark + sans wordmark; Lady Justice stays as artwork in the Meet Brenda section. Height-driven sizing:
   the lockup is two lines plus the emblem, so it needs more height than a one-line wordmark to stay legible. */
.brand-logo{display:block;height:60px;width:auto;flex:none}
.nav .nav-logo{display:flex;align-items:center}
.floatbar .fb-mark img.brand-logo{width:auto;height:42px;border:0;border-radius:0;object-fit:contain;object-position:center} /* an old rule circle-crops any image here (it was written for a headshot) */
.brand-logo--foot{height:112px;margin:0 0 var(--s-2)}
@media(max-width:700px){.brand-logo{height:50px}.brand-logo--foot{height:96px}}

/* ======================= THE DOCK + CALL BAR (Cam's button, Sep 17 2026) =======================
   Desktop (841px and up): a two-cell dock, bottom right — Call and Email, in the same press-depth language as the buttons.
   No chat (Cam's ruling). Phones keep the two-cell call bar; it now respects the iPhone home-indicator inset. */
.dockbar{position:fixed;right:24px;bottom:24px;z-index:70;display:flex;gap:6px;border:0;border-radius:0;box-shadow:none;background:none;overflow:visible}
.dockbar a{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding:0 1.1rem;border-radius:4px;
  font-family:var(--font-sans);font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;filter:none;
  transform:translateY(0);transition:transform var(--t-press) var(--ease),box-shadow var(--t-press) var(--ease),background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.dockbar a:active{transform:translateY(3px)}
.dockbar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dockbar .db-call{background:var(--c-primary);color:#fff;box-shadow:0 4px 0 var(--c-primary-slab),0 0 0 1px rgba(246,241,232,.55)}
.dockbar .db-call:active{box-shadow:0 1px 0 var(--c-primary-slab),0 0 0 1px rgba(246,241,232,.55)}
.dockbar .db-email{background:var(--c-surface);color:var(--c-primary);box-shadow:inset 0 0 0 1px var(--c-primary),0 4px 0 var(--c-ghost-slab)}
.dockbar .db-email:active{box-shadow:inset 0 0 0 1px var(--c-primary),0 1px 0 var(--c-ghost-slab)}
.dockbar a:focus-visible{outline:3px solid var(--c-ink);outline-offset:3px}
@media(hover:hover) and (pointer:fine){.dockbar .db-call:hover{background:var(--c-primary-hover);filter:none}.dockbar .db-email:hover{background:var(--c-primary);color:#fff;filter:none}}
@media(max-width:840px){.dockbar{display:none}}
@media(prefers-reduced-motion:reduce){.dockbar a,.dockbar a:active{transform:none;transition:background-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}}
@media print{.dockbar{display:none}}
/* phone call bar: clear the home indicator */
.callbar-2{max-height:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--c-primary)}
/* language toggle: a 44px touch target wherever a finger is likely (the pill itself keeps its look) */
@media(max-width:840px){.lang-toggle button{min-width:44px;min-height:44px}}

/* ======================= CHANGE-SET 3 (Sep 17 2026) =======================
   Hero: a second, quieter action beside the call button (wording already on the page in both languages).
   "You have Chucky": Brenda's own office photo; the frame keeps the 4:5 crop and sits on her, not the painting above her. */
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:2.2rem}
.hero-sky .hero-actions .btn:not(#_){margin-top:0}
@media(max-width:700px){.hero-actions{margin-top:1.5rem;gap:12px}.hero-actions .btn:not(#_):not(#_){width:100%;justify-content:flex-start}.hero-actions .btn.btn-ghost-w:not(#_):not(#_){justify-content:space-between}}
.why-photo img.why-brenda-photo{object-position:50% 60%}

/* ======================= PRACTICE AREAS — ruled list + photo stage (Cam's button, Sep 17 2026) =======================
   Desktop: a serif index with hairline rules; the photo beside it follows the row you hover or tab to (practice-list.js
   toggles .is-active; the incoming photo wipes in with clip-path — no scale, no shadow). Phones and tablets: the stage is
   gone and each row carries a small thumbnail. Pattern: 21st.dev "Interactive List Preview" (26256) + "Services" (11688). */
.plist-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:start}
.plist{list-style:none;margin:0;padding:0;border-top:1px solid rgba(226,197,126,.3)}
.plist li{margin:0;padding:0;border-bottom:1px solid rgba(226,197,126,.3)}
.prow{display:flex;align-items:center;gap:var(--s-2);min-height:72px;padding:14px 4px;color:rgba(246,241,232,.78);text-decoration:none;
  transition:color var(--t-hover) var(--ease),padding-left 300ms var(--ease)}
.prow-t{flex:1 1 auto;font-family:var(--font-serif);font-size:clamp(1.45rem,2.3vw,2.1rem);line-height:1.15;letter-spacing:-.01em}
.prow .arr{opacity:0;transform:translateX(-8px);transition:opacity var(--t-hover) var(--ease),transform 300ms var(--ease)}
.prow.is-active{color:var(--c-accent-soft);padding-left:14px}
.prow.is-active .arr{opacity:1;transform:none}
.prow:focus-visible{outline:3px solid var(--c-bg);outline-offset:2px}
.prow-thumb{display:none;flex:none;width:72px;aspect-ratio:3/2;overflow:hidden;background:#3a0c14}
.prow-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.pstage{position:sticky;top:110px;aspect-ratio:4/5;overflow:hidden;background:#3a0c14}
.pstage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 100% 0 0);z-index:0;
  transition:clip-path 520ms var(--ease)}
.pstage-img.is-active{clip-path:inset(0);z-index:1}
/* the photo that was showing stays underneath until the new one has wiped over it */
.pstage-img:not(.is-active){transition-delay:520ms;transition-duration:0s}
@media(max-width:900px){
  .plist-wrap{grid-template-columns:1fr}
  .pstage{display:none}
  .prow-thumb{display:block}
  .prow,.prow.is-active{padding-left:0;color:var(--c-bg)}
  .prow .arr{opacity:1;transform:none}
  .prow-t{font-size:1.3rem}
}
@media(prefers-reduced-motion:reduce){.prow,.prow .arr,.pstage-img,.pstage-img:not(.is-active){transition:none}.pstage-img{clip-path:none;opacity:0}.pstage-img.is-active{opacity:1}}

/* ======================= CHANGE-SET 5 (Cam's button, Sep 17 2026) =======================
   Consultation: the offer is a "coupon" on the burgundy band — a dashed gold frame, her words on the left, the two actions on
   the right (pattern seen on Shader via Mobbin). Flat colour only: no shadow, no gradient.
   Form: every field is a clear box with a 52px target and a burgundy focus edge; the reach-us rows get the brand arrow. */
#consultation .coupon{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(28px,4.5vw,64px);border:2px dashed rgba(226,197,126,.75);border-radius:6px;background:rgba(42,8,16,.28)}
#consultation .coupon h2.shout{margin:0 0 var(--s-3)}
#consultation .coupon .why-line{margin:0 0 var(--s-2);max-width:34em}
#consultation .coupon .why-line:last-child{margin-bottom:0}
#consultation .coupon-actions{display:grid;gap:16px;justify-items:stretch}
#consultation .coupon-actions .btn:not(#_){margin-top:0;width:100%}
@media(max-width:900px){#consultation .coupon{grid-template-columns:1fr;padding:28px 22px}}
/* the form */
#caseForm input:not(#_),#caseForm select:not(#_),#caseForm textarea:not(#_){min-height:52px;padding:12px 14px;border:1px solid #B5A998;border-radius:4px;background:var(--c-surface);
  color:var(--c-ink);font-family:var(--font-sans);font-size:16px;line-height:1.4;transition:border-color var(--t-hover) var(--ease)}
#caseForm textarea:not(#_){min-height:132px}
#caseForm input:not(#_):focus-visible,#caseForm select:not(#_):focus-visible,#caseForm textarea:not(#_):focus-visible{border-color:var(--c-primary);outline:2px solid var(--c-primary);outline-offset:2px}
#caseForm .hp:not(#_){min-height:0;padding:0;border:0} /* the honeypot stays invisible */
/* reach-us rows: the brand arrow on the right, colour-only hover */
#contact .way{position:relative;padding-right:44px}
#contact .way:after{content:'';position:absolute;right:6px;top:50%;width:26px;height:12px;margin-top:-6px;background:var(--c-primary);opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 6h24M19 1l5.500 5-5.500 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 12'%3E%3Cpath d='M0 6h24M19 1l5.500 5-5.500 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity var(--t-hover) var(--ease),transform 300ms var(--ease)}
@media(hover:hover) and (pointer:fine){#contact .way:hover:after{opacity:1;transform:translateX(4px)}}
#contact .way:focus-visible{outline:3px solid var(--c-ink);outline-offset:3px}
@media(prefers-reduced-motion:reduce){#contact .way:after{transition:none}#contact .way:hover:after{transform:none}}

/* ======================= CHANGE-SET 6 (Cam's button, Sep 17 2026) =======================
   How it works: a stepped ladder — numbered circles on one hairline, three across on desktop, a vertical rail on phones
   (pattern: 21st.dev "How It Works Steps" 26891 + Complex Law's stacked steps via Mobbin). The old "strike" animation never
   fired; its rules are outranked here and go in the final sweep. Reveal: the fade now runs on the blocks inside a section,
   staggered 80ms, so band backgrounds never blink (hero-sky.js sets --i). */
#how .timeline:not(#_){position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.5vw,56px);margin:0;padding:0;list-style:none}
#how .timeline:not(#_):before{content:'';position:absolute;left:24px;right:24px;top:24px;height:1px;background:var(--c-rule)}
#how .timeline .station:not(#_){position:relative;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
#how .timeline .station:not(#_):before{display:none}
#how .timeline .station:not(#_) .st-mark{position:relative;left:auto;top:auto;display:grid;place-items:center;width:48px;height:48px;margin:0 0 var(--s-3);border:0;border-radius:50%;
  background:var(--c-primary);color:var(--c-bg);box-shadow:0 0 0 6px var(--c-bg),0 0 0 7px var(--c-accent);opacity:1;transform:none;font:700 1.05rem/1 var(--font-sans)}
#how .timeline .station:not(#_) .st-mark b{font-weight:700}
#how .timeline .station:not(#_) .st-mark:after{display:none}
#how .timeline .station:not(#_) h3{margin:0 0 .6rem;font-family:var(--font-serif);font-weight:400;font-size:clamp(1.3rem,1.8vw,1.6rem);line-height:1.2;letter-spacing:-.01em;text-transform:none;color:var(--c-ink)}
#how .timeline .station:not(#_) p{margin:0;font-size:var(--fs-body);line-height:1.6;color:var(--c-muted)}
#how .timeline .station:not(#_) p.hand{margin-top:.8rem;color:var(--c-primary)}
#how .timeline .station:not(#_) .tl-stamp{margin-top:1.1rem;opacity:.86;transform:rotate(-6deg) scale(1.28);transition:none}
@media(max-width:900px){
  #how .timeline:not(#_){grid-template-columns:1fr;gap:0}
  #how .timeline:not(#_):before{left:23px;right:auto;top:24px;bottom:24px;width:1px;height:auto}
  #how .timeline .station:not(#_){display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:20px;padding-bottom:var(--s-4)}
  #how .timeline .station:not(#_):last-child{padding-bottom:0}
  #how .timeline .station:not(#_) .st-mark{grid-row:1/span 4;margin:0}
  #how .timeline .station:not(#_) h3{padding-top:10px}
  #how .timeline .station:not(#_) .tl-stamp{transform:rotate(-6deg) scale(1);transform-origin:left top;max-width:100%} /* the scaled stamp ran 25px past the phone edge */
}
/* the reveal, now per block with a stagger */
.fade-up{transition-delay:calc(var(--i,0) * 80ms)}
.fade-up.is-in{transition-delay:calc(var(--i,0) * 80ms)}