/* ══════════════════════════════════════════════════════════════
   FIRST SCREEN ONLY.
   Structure taken from the exemplar's hero-default-block:
   full-bleed photo bed, dark overlay, 10-col grid, copy in 7,
   badge pill → uppercase display H1 → short lede → one button.
   Palette: Arizona southwest. Saturated, not pastel.
   ══════════════════════════════════════════════════════════════ */

:root{
  --night:      #17100c;   /* mesquite black-brown */
  --night-2:    #241811;
  --clay:       #a8371f;   /* canyon red clay — the CTA */
  --clay-lit:   #c6452a;
  --turq:       #17787a;   /* Sonoran turquoise, deep — small doses */
  --sand:       #ede0cb;   /* warm bone */
  --sand-dim:   rgba(237,224,203,.72);
  /* Review stars and the one figure the Results page leads with. Three values
     because a gold that reads on the night ground is invisible on the lit band,
     and the figure wants to be brighter than a star. */
  --gold:       #c9963f;   /* stars, on the dark ground */
  --gold-lit:   #e6bb6e;   /* the headline verdict */
  --gold-deep:  #8a6420;   /* stars, on the lit band */

  --display: "Archivo", system-ui, sans-serif;
  --text:    "Montserrat", system-ui, sans-serif;
  --serif:   "Lora", ui-serif, Georgia, serif;   /* client voices only */
  --gutter:  clamp(1.25rem, 4vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; }

/* Reserve the scrollbar's space on every page, whether or not it scrolls.
   Without this, a page tall enough to scroll is 15px narrower than one that
   is not, and everything right-aligned in the masthead jumps sideways between
   pages. No effect where scrollbars overlay the content (macOS trackpad
   default); it matters when they take up room. */
html{ scrollbar-gutter:stable; }
body{
  background:var(--night);
  color:var(--sand);
  font-family:var(--text);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* Read aloud, never shown — e.g. "(opens in a new tab)" on links that
   leave the site. */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ── header, laid over the hero ───────────────────────────────── */

.masthead{
  position:absolute; inset:0 0 auto 0; z-index:20;
  padding:1.15rem var(--gutter);
  /* top, not centre: the logo is far taller than the menu and the button,
     and centred on it they sat well down from the top of the page */
  display:flex; align-items:flex-start; gap:clamp(.85rem,2.6vw,2.5rem);
}

.mark{ display:flex; align-items:center; gap:.85rem; margin-right:auto; }
/* Kellen's logo. The file is 3x the home size with its navy ground taken out,
   so it sits on the night ground or the hero photograph without a box.
   Height is a variable, and width follows from the file's 319x264 shape, so
   the menu's spacing below can allow for whichever size is showing. The
   home hero's copy starts lower to clear it. */
.masthead{ --logo-h:132px; --logo-w:calc(var(--logo-h) * 319 / 264); }
/* contain: should a tight row ever narrow it, it scales down whole rather than
   being squeezed out of shape */
.mark__logo{ display:block; height:var(--logo-h); width:auto; object-fit:contain; }

.nav{
  /* One knob. --nav-gap is the space between links inside a group, with the
     interpunct centered in it; the other two are derived from it so the
     breakpoints below still have a single value to tighten. The bars sit
     closer to their neighbors than links sit to each other, and Questions?
     and Contact stand a little further apart, having no interpunct. */
  --nav-gap:clamp(.7rem,1.55vw,1.45rem);
  --rule-gap:calc(var(--nav-gap) * .59);
  --tail-gap:calc(var(--nav-gap) * .95);
  /* Only the interpuncted group is opened up; the interpunct is centered in
     this rather than in --nav-gap, so it stays on the midpoint. */
  --dot-gap:calc(var(--nav-gap) * 1.3);
  display:flex;
  /* Centred, so the words sit on the middle of the menu's height, which the
     edge rule makes the call button's height: text and button share a
     centre. Baseline alignment rode the words at the top of that height,
     above the button's middle. Within each group the links still share a
     baseline (below), which keeps Contact's larger letters in line. */
  align-items:center;
  gap:var(--rule-gap); font-size:1rem; font-weight:600;
}
/* Each group is its own row of links, so when the menu has to break it
   breaks between the groups — never inside one. */
.nav__group{ display:flex; align-items:baseline; gap:var(--nav-gap); }
.nav__group:first-child{ gap:var(--dot-gap); }
.nav__group:last-child{ gap:var(--tail-gap); }
.nav a{
  position:relative; padding-block:.4rem; border-bottom:1px solid transparent;
  /* one fixed line height for every link, Contact's larger size included, so
     their boxes are the same height and centring them keeps one baseline */
  line-height:1.4rem;
  /* holds the links over the brighter parts of the home photograph, the
     same way the headline is held; invisible on the solid bar */
  text-shadow:0 1px 12px rgba(23,16,12,.7), 0 1px 3px rgba(23,16,12,.55);
}
.nav a:hover{ color:#fff; }
.nav a[aria-current="page"]{ color:#fff; border-bottom-color:var(--clay); }
.nav a[href="/contact/"]{ font-size:1.1em; }

/* Interpuncts between links in the first group only; Questions? and
   Contact stand apart. Drawn as a small circle with empty content rather
   than a typed "·", so screen readers do not announce "middle dot"
   between every link. Centered in the gap, whatever the gap is. */
.nav__group:first-child a + a::before{
  content:""; position:absolute; top:50%;
  left:calc(var(--dot-gap) / -2);
  width:3.5px; height:3.5px; border-radius:50%;
  background:rgba(237,224,203,.5);
  transform:translate(-50%,-50%);
}

/* divides the two groups: who and what / questions and contact.
   An element rather than a literal "|", which a screen reader would
   announce as "vertical bar". Centred in the row, as the links are. */
.nav__rule{
  align-self:center;
  width:1px; height:1.1em;
  background:rgba(237,224,203,.28);
}

/* Closes the menu's left edge, standing as tall as the call button facing
   it, so the links read as a bracketed block rather than adrift between
   the logo and the button. Drawn on the nav rather than as an element:
   a span here would become .nav's first child and stop
   .nav__group:first-child matching, taking the interpuncts with it. */
.nav::before{
  content:""; align-self:center;
  /* the call button's height — its 2 × .95rem padding plus a 1em line box */
  width:1px; height:3.1rem;
  /* clay, like the mark's rule and the call button, so the row is closed at
     both ends by the same color rather than by a neutral hairline */
  background:var(--clay);
  /* stands off the menu further than the gap between the groups, so it reads
     as the row's edge and not as another divider inside it */
  margin-right:.3rem;
}

.phone{
  display:flex; align-items:center; gap:.6rem;
  background:var(--clay); color:#fff;
  padding:.95rem 1.4rem;
  font-weight:700; font-size:1rem; letter-spacing:.01em;
}
.phone:hover{ background:var(--clay-lit); }
.phone svg{ width:17px; height:17px; flex:none; }

/* ── hero ─────────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:grid; align-items:center;
  overflow:hidden;
  isolation:isolate;
}

/* the photo bed — three slides, crossfading */
.bed{ position:absolute; inset:0; z-index:-2; }

.slide{
  position:absolute; inset:0;
  opacity:0;
  /* a faded-out slide is still there, and would otherwise swallow clicks
     meant for the slide on screen. The keyframes hand hit-testing to
     whichever slide is actually visible. */
  pointer-events:none;
  animation:cycle 21s infinite;
}
.slide img{
  width:100%; height:100%;
  /* cover, so a narrowing window re-crops toward the subject
     instead of shrinking it */
  object-fit:cover;
}
.slide:nth-child(1){ animation-delay:0s;  }
.slide:nth-child(2){ animation-delay:7s;  }
.slide:nth-child(3){ animation-delay:14s; }

/* each anchored on its own subject, all of which sit right of center */
.slide:nth-child(1) img{ object-position:62% 38%; }  /* both faces */
.slide:nth-child(2) img{ object-position:64% 42%; }  /* truck + horizon */
.slide:nth-child(3) img{ object-position:72% 28%; }  /* Kellen, head safe */

/* The scrim rides on each slide rather than on the bed, so a slide can
   opt out and carry its own. Default: the exemplar's flat black plus a
   left weighting to give the copy a ground. */
.slide::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(23,16,12,.82) 0%, rgba(23,16,12,.55) 46%, rgba(23,16,12,.28) 100%),
    rgba(0,0,0,.3);
}

/* Conversation slide: two layers instead, and no flat black on top —
   stacking all three turns the frame to mud.
   1. left-to-right, dark under the headline, releasing before Kellen
   2. radial vignette, open on his face, closing toward every edge */
.slide--talk::after{
  background:
    radial-gradient(62% 68% at 70% 30%,
      rgba(23,16,12,0) 0%, rgba(23,16,12,.30) 52%, rgba(23,16,12,.80) 100%),
    linear-gradient(90deg,
      rgba(23,16,12,.90) 0%, rgba(23,16,12,.70) 42%,
      rgba(23,16,12,.12) 62%, rgba(23,16,12,.28) 100%);
}

/* Highway frame: no flat black. The sunset is the only color in the
   slide and the shared overlay was draining it — the left weighting
   alone is enough to hold the headline. */
.slide--road::after{
  background:
    linear-gradient(90deg,
      rgba(23,16,12,.86) 0%, rgba(23,16,12,.56) 40%,
      rgba(23,16,12,.14) 66%, rgba(23,16,12,.06) 100%),
    rgba(0,0,0,.06);
}

/* Each frame can carry its own note in the lower right. It belongs to
   the slide, so it fades with it. */
.caption,.roadnote{
  position:absolute; z-index:3; margin:0;
  right:var(--gutter); bottom:clamp(2rem,5vh,3.2rem);
  text-align:right;
  text-shadow:0 1px 14px rgba(23,16,12,.9), 0 1px 3px rgba(23,16,12,.8);
}
.caption{
  font-size:.9rem; font-weight:500;
  color:var(--sand-dim);
}

/* Highway frame: a statement of fact that happens to be a link.
   No button, no arrow, no exclamation — the second line is simply
   brighter than the first. */
.roadnote{
  display:block; max-width:30rem;
  font-size:clamp(1.15rem,1.7vw,1.45rem); line-height:1.45;
  font-weight:500; font-style:italic;
  color:rgba(237,224,203,.72);
  /* pulled up and in off the corner, so it sits in the gravel rather
     than on the roadway */
  right:clamp(2rem,12vw,11.5rem);
  bottom:clamp(3.5rem,16vh,9.5rem);
}
/* second line is the click target — same pill as the badge top-left,
   so the two read as one component family across the screen */
.roadnote span{
  display:inline-block; margin-top:.55rem;
  background:rgba(23,120,122,.34);
  border:1px solid rgba(23,120,122,.7);
  border-radius:999px;
  padding:.42rem 1.05rem;
  color:var(--sand); font-weight:600;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.roadnote:hover span{
  background:rgba(23,120,122,.55); border-color:var(--turq); color:#fff;
}

/* Courthouse frame: a client's own words, set in serif so the voice
   reads as a person rather than as more of the firm's copy. */
.quote{
  position:absolute; z-index:3; margin:0;
  right:var(--gutter); bottom:clamp(2.5rem,7vh,4.5rem);
  max-width:min(34rem,52vw); text-align:right;
  text-shadow:0 1px 14px rgba(23,16,12,.95), 0 1px 3px rgba(23,16,12,.85);
}
.quote blockquote{
  margin:0;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(.92rem,1.1vw,1.02rem); line-height:1.6;
  color:#fbf4e7;
}
.quote figcaption{
  margin-top:.7rem;
  font-family:var(--serif); font-style:italic;
  font-size:.86rem; color:rgba(237,224,203,.88);
}
.quote .stars{ margin-left:.45rem; letter-spacing:.1em; color:var(--gold); }
.caption strong{
  display:block; margin-top:.15rem;
  font-family:var(--display); font-weight:700; font-stretch:114%;
  font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase;
  color:var(--sand);
}

@keyframes cycle{
  0%{opacity:0; pointer-events:none}
  4%{opacity:1; pointer-events:auto}
  33%{opacity:1; pointer-events:auto}
  38%{opacity:0; pointer-events:none}
  100%{opacity:0; pointer-events:none}
}
@media (prefers-reduced-motion:reduce){
  .slide{ animation:none; }
  .slide:nth-child(1){ opacity:1; }
}

/* ── hero copy — exemplar's 10-col grid, copy in 7 ────────────── */

.hero__grid{
  position:relative; z-index:4;
  width:100%; max-width:84rem; margin-inline:auto;
  padding:13.25rem var(--gutter) 7rem;
  display:grid; grid-template-columns:repeat(10,1fr); gap:2rem;
  /* the grid is mostly empty padding laid over the whole photograph;
     without this it intercepts clicks aimed at the slide's own note */
  pointer-events:none;
}
.hero__copy{ grid-column:1 / span 7; pointer-events:auto; }

.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(23,120,122,.3);
  border:1px solid rgba(23,120,122,.65);
  border-radius:999px;
  padding:.3rem .85rem;
  font-size:.8rem; font-weight:600; letter-spacing:.02em;
}
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--turq); }

h1{
  margin:1.4rem 0 1.5rem;
  font-family:var(--display);
  font-weight:800;
  /* wide, not squeezed — the horizontal read */
  font-stretch:116%;
  font-size:clamp(2.1rem, 3.7vw, 3.5rem);
  line-height:1.0;
  letter-spacing:-.005em;
  text-transform:uppercase;
  color:#fff;
  /* No ch measure — the ch unit is the width of a zero, which is a poor
     proxy for wide capitals, so it drifted as the window resized. The
     breaks are chosen in the markup instead; balance covers the narrow
     widths where the hard break has to release. */
  text-wrap:balance;
  /* holds the type over the bright parts of a frame without having to
     darken the photograph itself any further */
  text-shadow:0 2px 34px rgba(23,16,12,.6), 0 1px 4px rgba(23,16,12,.45);
}
/* below this the chosen break is too wide to hold — let balance re-flow it */
@media (max-width:44rem){ .hbreak{ display:none; } }

.lede{
  margin:0 0 2.4rem;
  max-width:33rem;
  font-size:1.15rem; line-height:1.62; font-weight:600;
  color:rgba(237,224,203,.86);
  text-shadow:0 1px 18px rgba(23,16,12,.7), 0 1px 3px rgba(23,16,12,.5);
}
/* block, so the sentence always breaks after the dash */
.lede__lead{
  display:block; margin-bottom:.3rem;
  font-size:1.16em; line-height:1.4;
  color:rgba(237,224,203,.95);
}

.cta{
  display:inline-flex; align-items:center; gap:.75rem;
  background:var(--clay); color:#fff;
  padding:1.15rem 2rem;
  font-weight:700; font-size:1.02rem;
}
.cta:hover{ background:var(--clay-lit); }
.cta svg{ width:15px; height:15px; }

/* shrinks to the button's width, so the line beneath centers on the
   button rather than on the column */
.cta-group{ display:inline-block; }

.under{
  margin:.8rem 0 0; font-size:.85rem; font-weight:500;
  text-align:center;
  color:rgba(237,224,203,.82);
}

/* ── carousel controls ────────────────────────────────────────── */

.dots{
  position:absolute; z-index:6; left:var(--gutter);
  bottom:clamp(2rem,5vh,3.2rem);
  display:flex; align-items:center; gap:.7rem;
}
.dots span{
  width:44px; height:3px; background:rgba(237,224,203,.28);
  position:relative; overflow:hidden;
}
.dots span::after{
  content:""; position:absolute; inset:0; background:var(--sand);
  transform:scaleX(0); transform-origin:left;
  animation:fill 21s infinite;
}
.dots span:nth-child(1)::after{ animation-delay:0s; }
.dots span:nth-child(2)::after{ animation-delay:7s; }
.dots span:nth-child(3)::after{ animation-delay:14s; }
@keyframes fill{
  0%{transform:scaleX(0)} 33%{transform:scaleX(1)} 34%,100%{transform:scaleX(0)}
}
@media (prefers-reduced-motion:reduce){ .dots span::after{ animation:none; } }

/* ── narrow ───────────────────────────────────────────────────── */

/* Nothing in the masthead may ever break onto a second line. Without this
   the row crushes as the window narrows: "How We Help" becomes three lines,
   the phone number splits at its hyphen. */
.nav a, .phone__num{ white-space:nowrap; }

/* One row — name, six links, call button — is tight from here down, so
   the "Call us:" label goes first. The icon already says "call".
   Tightening --nav-gap carries the bars and the Contact gap down with it. */
@media (max-width:82rem){
  .phone__label{ display:none; }
  .nav{ --nav-gap:clamp(.45rem,1vw,.7rem); }
  .masthead{ gap:clamp(.85rem,1.7vw,1.7rem); }
}

/* The logo is narrower than the wordmark it replaced, and the space between
   it and the menu grows one-for-one with the window. The menu's own spacing
   takes that space up, so the logo sits one masthead gap from the menu, the
   same distance as the call button on the other side: logo, menu and button
   evenly spaced. Only the spacing grows, via --nav-gap, which every gap in
   the menu is derived from.

   Solved from measurement rather than eyed: with no spacing at all the menu
   is 534.6px wide and has 6.5 gaps' worth of spacing, so the gap is the room
   left over divided by 6.5. The room is the window, less two gutters, less
   the two masthead gaps either side of the menu, less the logo's width, less
   everything else of fixed width (the button, the menu's words). The button
   gains its "Call us:" label above 82rem and the masthead gap changes rule
   there, hence two rules. Below 65rem, where even the tightest spacing no
   longer fits beside the logo, the menu leaves the row and keeps its
   spacing. Capped at 3rem: past about 1460px wide, filling the space would
   spread the items too far apart. */
@media (min-width:65.0625rem) and (max-width:82rem){
  .nav{
    --nav-gap:clamp(.45rem, calc((100vw - 2 * var(--gutter) - 2 * clamp(.85rem, 1.7vw, 1.7rem) - 710.85px - var(--logo-w)) / 6.5), 3rem);
  }
}
@media (min-width:82.0625rem){
  .nav{
    --nav-gap:clamp(1rem, calc((100vw - 2 * var(--gutter) - 2 * min(2.6vw, 2.5rem) - 775.5px - var(--logo-w)) / 6.5), 3rem);
  }
}
/* Wherever the capped spacing leaves room over, the menu sits centred between
   the logo and the call button rather than pushed against the button: the
   free space goes to both sides of it instead of all beside the logo. */
@media (min-width:65.0625rem){
  .mark{ margin-right:0; }
  .nav{ margin-inline:auto; }
}

/* Two rows: logo and call button on top, the menu centered beneath.
   Switches at the point the menu's tightest spacing stops fitting beside
   the logo (about 1035px), so the text never has to shrink to fit — the
   layout rearranges instead. The top row is roomy again, so the label
   comes back. */
@media (max-width:65rem){
  .masthead{ flex-wrap:wrap; row-gap:.85rem; }
  /* the logo takes whatever the call button leaves, so on the narrowest
     phone it scales down whole instead of pushing the button down to a row
     of its own */
  .mark{ flex:1 1 0; min-width:0; }
  /* row-gap alone sets the distance to the menu row — the nav carried a
     padding-top as well while there was a divider above it to clear */
  .nav{
    order:3; flex-basis:100%;
    justify-content:center;
  }
  /* The edge rule brackets the menu against the call button opposite it.
     On its own centered row there is nothing to bracket it against, and a
     tall rule left of a centered menu just reads as a stray mark. */
  .nav::before{ display:none; }
  .phone__label{ display:inline; }
  .hero__grid{ padding-top:16.25rem; }
}

/* Between phone width and 65rem, rather than drop to a row of its own, the
   menu stays between the logo and the call button and folds onto two lines:
   the pages, Co-counsel included, over Questions? and Contact, which sit to
   the right, nearest the button. The divider before Questions? goes, since
   the line break now does its job, and so do the edge rule and the button's
   "Call us:" label, to leave the menu room. One row deep again, so the home
   hero's copy goes back up to its single-row offset. These come after the
   two-row rules above and so win over them. From 43rem: measured, logo,
   two-line menu and button need about 682px, and narrower the button runs
   off the edge. */
@media (min-width:43rem) and (max-width:65rem){
  .masthead{ flex-wrap:nowrap; }
  .mark{ flex:none; margin-right:0; }
  /* A grid rather than wrapping flex, so the menu is exactly as wide as its
     first line and the second can end flush under it: pages, divider and
     Co-counsel across the top; Questions? and Contact spanning beneath,
     pushed to the right. */
  .nav{
    order:0; flex:0 1 auto; margin-inline:auto;
    display:grid; grid-template-columns:repeat(3,auto); align-items:baseline;
    gap:.3rem var(--rule-gap);
  }
  .nav__group:last-child{ grid-column:1 / -1; justify-self:end; }
  /* the second divider, the one before Questions? */
  .nav__rule ~ .nav__rule{ display:none; }
  .phone__label{ display:none; }
  .hero__grid{ padding-top:13.25rem; }
}

/* Phone widths: the two groups stack, each centered on its own line. The
   divider goes — the line break does its job now. */
@media (max-width:36rem){
  .nav{
    flex-direction:column; align-items:center; row-gap:.2rem;
    --nav-gap:1rem; font-size:.9rem;
  }
  .nav__rule{ display:none; }
  /* smaller on a phone, where the masthead is already two rows deep */
  .masthead{ --logo-h:84px; }
  .hero__grid{ padding-top:16.25rem; }
}
@media (max-width:48rem){
  .hero__copy{ grid-column:1 / -1; }
  .hero__grid{ padding-bottom:9rem; }
  h1{ max-width:none; }
  .spec{
    position:static; width:auto; margin-top:2.5rem;
    opacity:1; animation:none;
  }
  .spec:nth-of-type(2),.spec:nth-of-type(3){ display:none; }
  .phone__num{ display:none; }
  .phone{ padding:.85rem 1rem; }
}

/* ══════════════════════════════════════════════════════════════
   INTERIOR PAGES — contact, thank you
   ══════════════════════════════════════════════════════════════ */

/* The masthead overlays the hero on the home page. Everywhere else it
   is a real bar in the flow. */
.masthead--solid{
  position:static;
  background:var(--night);
}

/* overflow-x:clip so decoration can never widen the page: the wash behind
   the Results verdict runs far past its section so its fade finishes out of
   sight, and unclipped that alone gave the page a sideways scroll. .page is
   full width, so this cuts at the window's edge. clip, not hidden: it makes
   no scroll container, so nothing else about the page changes. */
.page{
  padding:clamp(2rem,4.67vw,3.67rem) var(--gutter) clamp(4rem,8vw,7rem);
  overflow-x:clip;
}

/* The footer always takes a scroll to reach, however short the page: the
   content is at least a screen tall, and the masthead sits above it. The
   home page gets the same from its hero, which is a screen tall itself. */
main{ display:block; min-height:100svh; }
.wrap{ max-width:80rem; margin-inline:auto; }

.page-head{ max-width:44rem; margin-bottom:clamp(3rem,6vw,4.5rem); }
.page-head h1{
  font-family:var(--display); font-weight:800; font-stretch:116%;
  font-size:clamp(2rem,4.4vw,3.5rem); line-height:1.0;
  letter-spacing:-.005em; text-transform:uppercase;
  color:#fff; margin:1.1rem 0 1.4rem; text-wrap:balance;
}
.page-head p{
  margin:0; max-width:34rem;
  font-size:clamp(1.02rem,1.2vw,1.15rem); line-height:1.6;
  color:rgba(237,224,203,.82);
}

.eyebrow{
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--turq); margin:0;
}

/* ── the two columns ──────────────────────────────────────────── */

.contact-grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
@media (max-width:60rem){ .contact-grid{ grid-template-columns:1fr; } }

/* ── form ─────────────────────────────────────────────────────── */

.form{ max-width:38rem; }
.form__row{
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;
}
@media (max-width:34rem){ .form__row{ grid-template-columns:1fr; } }

.field{ margin-bottom:1.1rem; }
.field label{
  display:block; margin-bottom:.45rem;
  font-size:.82rem; font-weight:600; letter-spacing:.02em;
  color:rgba(237,224,203,.86);
}
.field .req{ color:var(--clay-lit); }

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--text); font-size:1rem; font-weight:500;
  color:var(--sand);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(237,224,203,.22);
  border-radius:2px;
  padding:.85rem .95rem;
  transition:border-color .16s ease, background-color .16s ease;
}
.field textarea{ min-height:8.5rem; resize:vertical; line-height:1.55; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(237,224,203,.38); }

.field input:hover,
.field select:hover,
.field textarea:hover{ border-color:rgba(237,224,203,.36); }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--turq);
  background:rgba(23,120,122,.1);
  box-shadow:0 0 0 3px rgba(23,120,122,.24);
}

/* only after the browser has something to judge — not while typing */
.field input:not(:placeholder-shown):invalid,
.field textarea:not(:placeholder-shown):invalid{
  border-color:rgba(198,69,42,.8);
}

.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(237,224,203,.6) 50%),
                   linear-gradient(135deg,rgba(237,224,203,.6) 50%,transparent 50%);
  background-position:calc(100% - 20px) 1.35rem, calc(100% - 14px) 1.35rem;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:2.6rem;
}
.field select option{ background:var(--night-2); color:var(--sand); }

/* consent */
.consent{
  display:flex; gap:.8rem; align-items:flex-start;
  margin:1.6rem 0 1.4rem;
}
.consent input{
  flex:none; width:1.15rem; height:1.15rem; margin-top:.15rem;
  accent-color:var(--turq);
}
.consent label{
  font-size:.86rem; line-height:1.5; font-weight:500;
  color:rgba(237,224,203,.76);
}

/* honeypot — off-screen rather than display:none, and out of the tab
   order, so a keyboard or screen-reader user can never land in it */
.trap{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden;
}

.submit{
  display:inline-flex; align-items:center; gap:.75rem;
  background:var(--clay); color:#fff;
  border:none; border-radius:0;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:1.05rem; letter-spacing:.01em;
  padding:1.15rem 2.1rem; cursor:pointer;
  transition:background-color .16s ease;
}
.submit:hover{ background:var(--clay-lit); }
.submit svg{ width:15px; height:15px; }

.form__note{
  margin:1.5rem 0 0; max-width:34rem;
  font-size:.8rem; line-height:1.55;
  color:rgba(237,224,203,.52);
}

/* ── error banners, shown by :target so no JavaScript is needed ── */

.alert{ display:none; }
.alert:target{
  display:block;
  margin-bottom:2rem; padding:1rem 1.2rem;
  border-left:3px solid var(--clay-lit);
  background:rgba(198,69,42,.14);
  font-size:.92rem; line-height:1.55;
  color:rgba(237,224,203,.94);
}
.alert strong{ display:block; margin-bottom:.2rem; color:#fff; }

/* ── right column ─────────────────────────────────────────────── */

.aside__block{
  padding-bottom:1.8rem; margin-bottom:1.8rem;
  border-bottom:1px solid rgba(237,224,203,.14);
}
.aside__block:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }

.aside__block h2{
  font-family:var(--display); font-weight:700; font-stretch:114%;
  font-size:1.05rem; letter-spacing:.02em; text-transform:uppercase;
  margin:.9rem 0 .8rem; color:#fff;
}
.aside__block p{
  margin:0 0 .8rem; font-size:.95rem; line-height:1.6;
  color:rgba(237,224,203,.8);
}
.aside__block p:last-child{ margin-bottom:0; }

.bignum{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--display); font-weight:800; font-stretch:116%;
  font-size:clamp(1.6rem,2.6vw,2.1rem); letter-spacing:-.01em;
  color:#fff; margin:.5rem 0 .6rem;
}
.bignum:hover{ color:var(--clay-lit); }
.bignum svg{ width:22px; height:22px; flex:none; color:var(--clay-lit); }

.steps{ list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li{
  counter-increment:s;
  display:grid; grid-template-columns:1.9rem 1fr; gap:.2rem .8rem;
  margin-bottom:1rem; font-size:.92rem; line-height:1.55;
  color:rgba(237,224,203,.8);
}
.steps li:last-child{ margin-bottom:0; }
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--display); font-weight:700; font-stretch:118%;
  font-size:.8rem; letter-spacing:.06em; color:var(--turq);
  padding-top:.15rem;
}

/* ── contact: every way in, not only the form ─────────────────── */

/* Same proportions as .contact-grid, which the referral page still uses.
   Left: the introduction, then the form. Right: the office, then the
   .aside__block pattern the referral page uses. */
.reach{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
@media (max-width:60rem){ .reach{ grid-template-columns:1fr; } }

/* The title and lede sit in the left column here, so they take its full
   width rather than the narrow measure .page-head uses across the top of
   other pages. The heading loses its top margin, which assumed an eyebrow
   above it, so it lines up with the top of the map. */
.reach .page-head,
.reach .page-head p{ max-width:none; }
.reach .page-head h1{ margin-top:0; }
.reach .page-head p + p{ margin-top:1rem; }

/* Call · Send us a message — the two ways in, under the introduction. */
.reach .page-head p.hello{
  margin-top:1.6rem;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .8rem;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:1.05rem; letter-spacing:.01em; color:rgba(237,224,203,.5);
}
.hello a{
  color:#fff; text-decoration:underline;
  text-decoration-color:var(--clay-lit); text-underline-offset:.25em;
}
.hello a:hover{ color:var(--clay-lit); }

.write{ margin-bottom:2rem; scroll-margin-top:1.5rem; }
.write h2{
  margin:0 0 .7rem;
  font-family:var(--display); font-weight:700; font-stretch:114%;
  font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.2;
  text-transform:uppercase; letter-spacing:.01em; color:#fff;
}
.write__aside{
  margin:0; max-width:34rem;
  font-size:.88rem; line-height:1.6; color:rgba(237,224,203,.6);
}
.write__aside a{
  color:var(--sand); text-decoration:underline;
  text-decoration-color:var(--clay-lit); text-underline-offset:.2em;
}
.write__aside a:hover{ color:#fff; }

/* The map is a link to Google Maps: unfaded, in a clay hairline. */
.office__map{
  display:block; margin:1.4rem 0 .9rem;
  border:1px solid var(--clay);
  transition:border-color .16s ease;
}
.office__map:hover{ border-color:var(--clay-lit); }
.office__map img{ width:100%; height:auto; }
.office__addr{
  /* flex so the copy button sits beside the first line, at the top */
  display:flex; align-items:flex-start;
  margin:.9rem 0 .7rem;
  font-style:normal; font-size:1.05rem; line-height:1.5; font-weight:600;
  color:#fff;
}
/* Phone and fax on one line under the address, fax to the right. Wraps
   rather than squeezes when the column is narrow. */
.aside__block p.office__line{
  display:flex; flex-wrap:wrap; gap:.3rem 2rem;
  margin:0;
  font-size:.95rem; font-weight:600; color:rgba(237,224,203,.86);
}
.office__line .eyebrow{ margin-right:.5rem; font-size:.8rem; }
.office__line > span{ display:inline-flex; align-items:center; }

/* Copy-to-clipboard, beside a number. Revealed by js/copy.js; the rule on
   [hidden] is needed because display:inline-grid would otherwise override
   the attribute. On a successful copy the icon turns to a check. */
.copy{
  display:inline-grid; place-items:center;
  width:1.7rem; height:1.7rem; margin-left:.25rem; padding:0;
  border:0; border-radius:2px; background:none; cursor:pointer;
  color:rgba(237,224,203,.5);
  transition:color .16s ease;
}
.copy[hidden]{ display:none; }
.copy:hover{ color:#fff; }
.copy:focus-visible{ outline:2px solid var(--turq); outline-offset:1px; }
.copy svg{ grid-area:1/1; width:14px; height:14px; }
.copy__done{ visibility:hidden; color:var(--turq); }
.copy.is-copied .copy__idle{ visibility:hidden; }
.copy.is-copied .copy__done{ visibility:visible; }
.office__line a:hover{ color:var(--clay-lit); }
/* The heading follows the directions link here rather than an eyebrow. */
.office__dir + h2{ margin-top:2rem; }
.office__dir{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--clay-lit);
}
.office__dir:hover{ color:#fff; }
.office__dir svg{ width:13px; height:13px; }

/* ── social ───────────────────────────────────────────────────── */

/* Kellen's accounts, one quiet line centred above the footer: a label set as
   Meet Kellen's "MEET KELLEN" actually renders (the eyebrow as .page-head p
   resizes it), then the five marks, in the footer's muted bone, brightening
   only under the pointer. */
.social{ padding:clamp(.95rem,1.83vw,1.32rem) var(--gutter); }
/* Centred on the icons, not on the whole line: two equal side columns with
   the icons between them, and the label set against the icons in the left
   one. On a phone there is no room beside them, so it goes above. */
.social .wrap{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:.6rem 1.6rem;
}
.social__lead{ justify-self:end; white-space:nowrap; }
@media (max-width:36rem){
  .social .wrap{ grid-template-columns:auto; justify-content:center; }
  .social__lead{ justify-self:center; }
}
.social__lead{
  margin:0;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:clamp(1.12rem,1.32vw,1.27rem);
  letter-spacing:.145em; text-transform:uppercase;
  color:rgba(237,224,203,.5);
}
.social__list{ display:flex; gap:1.1rem; margin:0; padding:0; list-style:none; }
.social a{ display:block; color:rgba(237,224,203,.55); transition:color .16s ease; }
.social a:hover{ color:var(--sand); }
.social a:focus-visible{ outline:2px solid var(--clay); outline-offset:4px; }
.social svg{ display:block; width:22.5px; height:22.5px; fill:currentColor; }
/* Under the socials, the footer's rule sits close over its text: the space
   goes above the rule, between it and the socials, instead. */
.social + .foot{ padding-top:clamp(.25rem,.5vw,.35rem); }

/* ── footer ───────────────────────────────────────────────────── */

.foot{
  border-top:1px solid rgba(237,224,203,.14);
  padding:clamp(1.25rem,2.5vw,1.75rem) var(--gutter) clamp(.625rem,1.25vw,.875rem);
  font-size:.78rem; line-height:1.35;
  color:rgba(237,224,203,.5);
}
/* No measure of its own: at full width the footer is two lines — who,
   where and licensed where, then the disclaimer — and it wraps naturally
   below that. Set tight, as one block rather than two paragraphs. */
.foot p{ margin:0 0 .2rem; }
.foot p:last-child{ margin-bottom:0; }
.foot a{ color:rgba(237,224,203,.7); text-decoration:underline; }

/* ── thank you ────────────────────────────────────────────────── */

/* The check hangs in the margin to the left of the title, so the title
   stays flush with the column as on every other page. Copy hangs off its
   heading by the same indent How We Help, Co-counsel and Results use. */
.done{
  max-width:40rem;
  --tick:4rem;
  --tick-gap:1rem;
  --copy-indent:clamp(.85rem,2vw,1.5rem);
}
.done h1{ position:relative; margin-top:.5rem; }
.done .tick{
  position:absolute; right:100%; top:50%; transform:translateY(-50%);
  margin-right:var(--tick-gap);
  width:var(--tick); height:var(--tick);
  color:var(--turq);
}
.done .page-head p:not(.eyebrow),
.done .aside__block p,
.done .aside__block .bignum{ padding-left:var(--copy-indent); }

/* Narrower than the column plus room for the check on its left, there is no
   margin to hang it in, so it sits beside the title instead. */
@media (max-width:52rem){
  .done h1{ display:flex; align-items:center; gap:var(--tick-gap); }
  .done .tick{ position:static; transform:none; margin:0; flex:none; }
}

/* ── meet kellen ──────────────────────────────────────────────── */

/* Two columns the whole way down. Left: the story, then the invitation to
   call. Right: the photograph, dissolving into his credentials. */
.about{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(2.5rem,5.5vw,5rem); align-items:start;
}
.about .page-head{ margin-bottom:2.2rem; }

/* scoped under .page-head, whose own paragraph rule would otherwise win */
.page-head .about__lede{
  font-size:clamp(1.2rem,1.6vw,1.45rem); line-height:1.55;
  color:rgba(237,224,203,.95); max-width:none;
}
.about__body p{
  /* fills its column: a fixed cap left ~90px of empty column between the
     text and the photo on wide windows */
  margin:0 0 1.4rem; max-width:none;
  font-size:1.05rem; line-height:1.78;
  color:rgba(237,224,203,.82);
}

/* A person speaking in their own words is set in the serif, the same as
   the client quote on the home page. */
.pullquote{
  margin:2.6rem 0 0; padding-left:1.4rem;
  border-left:3px solid var(--clay); max-width:36rem;
}
.pullquote blockquote{ margin:0; }
.pullquote p{
  margin:0;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.25rem,1.8vw,1.55rem); line-height:1.5;
  color:#fbf4e7;
}
.pullquote figcaption{
  margin-top:1rem;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sand-dim);
}

/* The call to action follows the quote directly, in the reading column,
   rather than waiting at the foot of the page. */
.about-cta{
  margin-top:clamp(2.8rem,5vw,3.8rem); padding-top:2.4rem;
  border-top:1px solid rgba(237,224,203,.14);
}
.about-cta h2{
  margin:0 0 .9rem;
  font-family:var(--display); font-weight:800; font-stretch:116%;
  font-size:clamp(1.7rem,3vw,2.4rem); text-transform:uppercase; color:#fff;
}
.about-cta p{
  margin:0 0 1.8rem; max-width:34rem;
  font-size:1.05rem; line-height:1.6; color:rgba(237,224,203,.82);
}
/* "We can help." — italic, a touch larger, and one extra space's width
   of room before it (a margin, since extra space characters collapse). */
.about-cta__help{
  font-style:italic; font-size:1.06em;
  margin-left:.3em;
}
.about-cta__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem 2.2rem; }
.about-cta__actions .bignum{ margin:0; }

/* The right column is a container, so the photograph's height can be set
   in units of the column's width (cqw) — and the credentials' overlap
   can then be a true fraction of that height, which plain percentages,
   being measured against width, cannot express. */
.about__side{
  container-type:inline-size;
  /* a 4:5 portrait: height is 125% of the column's width */
  --photo-h:125cqw;
}
.about__photo{ position:relative; margin:0; }
/* Two separate jobs, done separately.

   1. Hiding the hard edge: a thin feather. The photograph fades to
      transparent through a mask shaped like a blurred rectangle, so the
      corners stay soft and the page shows through — no color to match,
      no visible box on any screen. Thin on purpose: this only exists to
      lose the line, only a few pixels wide. viewBox 400×500 matches the
      photo's 4:5 so the blur is not stretched; the rectangle sits 4
      units in with a blur of 1.5, putting the very edge at ~0.4% opacity. */
.about__photo img{
  width:100%; height:var(--photo-h);
  object-fit:cover; object-position:76% 34%;   /* holds Kellen, not the dome */
  --edge-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Crect x='4' y='4' width='392' height='492' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E");
  /* A second, wide and gentle layer, multiplied with the first: it only
     thins the photo to ~55% at the edge and eases back to full over a
     much wider band (blur 10). Together: a steep drop right at the edge,
     then a long soft tail further in — which one symmetric blur can't do. */
  --edge-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' preserveAspectRatio='none'%3E%3Cfilter id='g' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3Crect width='400' height='500' fill='%23fff' fill-opacity='.55'/%3E%3Crect x='18' y='18' width='364' height='464' fill='%23fff' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-image:var(--edge-mask), var(--edge-soft);
  -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;
          mask-image:var(--edge-mask), var(--edge-soft);
          mask-size:100% 100%; mask-repeat:no-repeat;
          mask-composite:intersect;
}
/* 2. The vignette: radial, centered. An ellipse the same shape as the
      frame (farthest-corner), so all four corners sit at the same distance
      from the center and darken evenly. Untouched through the middle,
      barely touched at the middle of each edge, darkest at the corners.
      Several stops rather than one straight ramp, so the falloff eases in
      with no visible starting ring. In the page color, so where the
      photo has feathered out it darkens nothing but page. */
.about__photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* closest-side: the ellipse meets the middle of each edge at 100%, so
     the corners sit at ~141% — past it — and stops beyond 100% can take
     them almost to black while the edge midpoints stay moderate. Sized
     to the corners instead, only the corner points themselves (hidden by
     the feather) reached full strength and the vignette barely read. */
  /* Centered 40% from the top rather than 50%, so the top and upper corners
     lighten and the bottom deepens. The radii are given explicitly (the
     same 50%/50% that closest-side meant when centered): with an off-center
     position closest-side would shrink to the nearer top edge and darken
     the top instead. */
  background:radial-gradient(ellipse 50% 50% at 50% 40%,
    rgba(23,16,12,0)   70%,
    rgba(23,16,12,.20) 76%,
    rgba(23,16,12,.40) 82%,
    rgba(23,16,12,.56) 91%,
    rgba(23,16,12,.70) 102%,
    rgba(23,16,12,.86) 114%,
    rgba(23,16,12,.955) 126%,
    rgba(23,16,12,1)    136.5%); /* solid from here out to each corner */
}

/* The credentials rise over the photograph's dissolving bottom, starting
   7% up from its lower edge, where the photo is still faintly there. */
.facts{
  position:relative; z-index:1;
  margin:calc(var(--photo-h) * -.07) 0 0;
  padding-left:.6rem;   /* nudged in from the photo's faded left edge */
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.5rem 1.6rem;
}
/* A soft darker band behind only the first row, where the credentials sit
   over the photograph. Feathered top and bottom; it runs past both sides
   of the column onto the page, which is already dark, so it has no side
   edges to show. .facts is its own stacking context (z-index:1), so this
   sits above the photo but behind the text. */
.facts::before{
  content:""; position:absolute; z-index:-1;
  left:-1.5rem; right:-1.5rem; top:-1.4rem; height:9rem;
  background:linear-gradient(to bottom,
    rgba(23,16,12,0) 0%, rgba(23,16,12,.55) 28%,
    rgba(23,16,12,.55) 72%, rgba(23,16,12,0) 100%);
}
.facts dt, .facts dd{
  text-shadow:0 1px 10px rgba(23,16,12,.9), 0 1px 2px rgba(23,16,12,.8);
}
.facts dt{
  margin-bottom:.45rem;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--turq);
}
.facts dd{ margin:0; font-size:.98rem; line-height:1.5; color:rgba(237,224,203,.9); }

/* Pinned while the bio is read, then carried on with the page once the
   text column runs out. Only when the window is tall enough to show the
   whole right column at once — otherwise the lower credentials would be
   cut off for as long as it stayed pinned. */
/* 55rem (880px): measured, not guessed — with the photograph at its full
   4:5 size the right column peaks at ~842px tall on a wide window, plus
   the 2rem it pins below the top. */
@media (min-width:60.01rem) and (min-height:55rem){
  .about__side{ position:sticky; top:2rem; }
}

/* Narrow. The mobile layout is still to be designed (see TODO); for now
   nothing overlaps: photograph, bio, call to action, then credentials. */
@media (max-width:60rem){
  .about{ grid-template-columns:1fr; }
  .about__side{ display:contents; }
  .about__photo{ order:-1; }
  .about__photo img{ height:auto; aspect-ratio:3/2; object-position:74% 30%; }
  .facts{ order:1; margin-top:0; }
}

/* ── how we help ──────────────────────────────────────────────── */

/* Copy hangs off its heading rather than sitting flush with it. One value,
   shared by the lede under the H1 and the copy under each H2, so the two
   cannot drift apart. */
.help-head, .help{ --copy-indent:clamp(.85rem,2vw,1.5rem); }

/* One distance between a picture and the copy beside it, shared by both
   sections that have one, so the two cannot drift apart. */
.help{ --plate-gap:clamp(1rem,2vw,2rem); }

/* Lede on the left, footage on the right, both on the first screen. */
.help-head{
  max-width:none; margin-bottom:clamp(2rem,4vw,3rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(2rem,4vw,4rem); align-items:start;
}
.help-head h1{ margin:0 0 1.2rem; }
.help-head__copy{ max-width:40rem; }

@media (max-width:62rem){
  .help-head{ grid-template-columns:1fr; gap:2rem; }
}
.page-head .help-lede{
  margin:0 0 1rem; padding-left:var(--copy-indent);
  font-size:clamp(1.1rem,1.4vw,1.28rem); line-height:1.6;
  color:rgba(237,224,203,.92); max-width:44rem;
}

/* Each section is a heading over its own copy. Nothing between them but
   room — the space does the separating. */
.help{
  padding:clamp(1.75rem,3.2vw,2.55rem) 0;
}
.help h2{
  margin:0 0 .7rem; max-width:44rem;
  font-family:var(--display); font-weight:700; font-stretch:114%;
  font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.2;
  text-transform:uppercase; letter-spacing:.01em; color:#fff;
  text-wrap:balance;
}
/* The list column is exempt from the indent: its items already carry one of
   their own for the dashes, and it answers to its own label rather than to
   the section heading. */
.help__body{ padding-left:var(--copy-indent); }
.help__body--list{ padding-left:0; }
.help__body p{
  margin:0 0 1.2rem; max-width:44rem;
  font-size:1.05rem; line-height:1.75; color:rgba(237,224,203,.84);
}
.help__body p:last-child{ margin-bottom:0; }

/* The first section runs two columns: the account of what disappears on the
   left, the list of what we investigate on the right. The split is off
   center — the prose wants the tighter measure, the list wants the room. */
.help__cols{
  display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(2rem,4vw,4rem); align-items:start;
}

/* This heading runs the full width, over both columns, rather than sitting
   at the reading measure the one-column sections use. */
.help--split h2{ max-width:none; }

/* The sections below are staggered rather than stacked flush left, and the
   photography occupies the space the stagger opens up. The copy column
   keeps its own 44rem measure throughout. */
.help--right{
  display:grid; grid-template-columns:minmax(0,30%) minmax(0,1fr);
  gap:var(--plate-gap);
}
/* The column widths are set against the copy's 44rem measure: they leave it
   almost exactly that, so the space beside the text is the gap itself and
   not slack the cap was leaving. Halving the gap therefore means widening
   both pictures by what it gave up, or the copy column would absorb it. */
.help--flanked{
  display:grid; grid-template-columns:12.9% minmax(0,1fr) 27.9%;
  gap:var(--plate-gap);
}

/* Placeholders for photography not yet chosen. Same dashed language as the
   video slot, so an unfilled page reads as unfinished, not broken. */
.imgframe{
  margin:0; aspect-ratio:4/5;
  display:grid; place-items:center;
  background:rgba(237,224,203,.04);
  border:1px dashed rgba(237,224,203,.28);
}
/* Beside copy, a placeholder takes its height from that copy: the row is as
   tall as the text and the figure stretches to fill it. Clearing the ratio
   is what allows the stretch — a ratio would hand each box a height of its
   own, derived from its column width, so a pair would not even match. */
.help--right .imgframe,
.help--flanked .imgframe{ aspect-ratio:auto; }
/* A frame holding a photograph drops the placeholder's dashed chrome, and
   the picture fills it, cropping to fit rather than distorting. */
.imgframe--photo{
  display:block; overflow:hidden;
  background:none; border:0;
}
/* The edges dissolve the way Meet Kellen's portrait does: two masks, not
   one, because a single symmetric blur cannot be both steep and long.

   1. A thin steep feather — a blurred rectangle inset 4 units, which puts
      the very edge near zero and loses the hard line in a few pixels.
   2. A wide gentle layer multiplied with it — a .55 base easing back to
      full over a much broader band, so past the feather there is a long
      soft tail rather than an abrupt return to the full picture.

   The viewBox has to match the frame's proportions or the blur stretches,
   and preserveAspectRatio='none' lets it scale to whatever the frame is.
   These two frames land near square; the narrow one is handled below. */
.imgframe--photo img{
  width:100%; height:100%;
  object-fit:cover; object-position:var(--focus,50% 50%);
  --edge-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Crect x='4' y='4' width='392' height='392' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E");
  --edge-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' preserveAspectRatio='none'%3E%3Cfilter id='g' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3Crect width='400' height='400' fill='%23fff' fill-opacity='.55'/%3E%3Crect x='18' y='18' width='364' height='364' fill='%23fff' filter='url(%23g)'/%3E%3C/svg%3E");
  -webkit-mask-image:var(--edge-mask), var(--edge-soft);
  -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;
          mask-image:var(--edge-mask), var(--edge-soft);
          mask-size:100% 100%; mask-repeat:no-repeat;
          mask-composite:intersect;
}

/* The narrow slot runs about 1:2, so it takes its own viewBox — a square
   one would stretch the feather to twice the thickness top and bottom as
   at the sides. The soft band is gentler too: 18 units of a 180-wide box
   would thin a fifth of the picture, where on a 400 box it is a twentieth. */
.imgframe--scales img{
  --edge-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 386' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Crect x='4' y='4' width='172' height='378' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E");
  --edge-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 386' preserveAspectRatio='none'%3E%3Cfilter id='g' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3Crect width='180' height='386' fill='%23fff' fill-opacity='.55'/%3E%3Crect x='10' y='10' width='160' height='366' fill='%23fff' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Where each photograph holds as its frame crops it. The frames are sized
   by the copy beside them, so the crop shifts with the window and what has
   to survive it is named here, per picture. */
.imgframe--scales{  --focus:46% 50%; }  /* the post and the hanging pan */
.imgframe--care{    --focus:50% 20%; }  /* the heads, and the hands below */
.imgframe--counsel{ --focus:50% 35%; }  /* both faces, and both pairs of hands */
.imgframe span{
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  text-align:center; padding:.5rem;
  color:rgba(237,224,203,.5);
}

/* The placeholders are decoration: they punctuate the copy and give it some
   context. They must never outweigh it, so as the window narrows they give
   up their share, then drop out — they never take the full width. */

@media (max-width:62rem){
  .help__cols{ grid-template-columns:1fr; gap:2rem; }
  /* Stacked, it is a one-column section again, so the heading takes the
     reading measure back. */
  .help--split h2{ max-width:44rem; }
  /* Three columns no longer fit. The left sliver is down to a hair at this
     width, so it goes and the copy runs beside the right image alone. */
  .help--flanked{ grid-template-columns:minmax(0,1fr) 30%; }
  .help--flanked > .imgframe:first-child{ display:none; }
}

@media (max-width:46rem){
  /* Now genuinely too narrow to sit anything beside the copy. The one
     remaining placeholder per section becomes a shallow band above it —
     a break in the page, not a billboard. */
  .help--right, .help--flanked{ grid-template-columns:1fr; gap:2rem; }
  .imgframe,
  .help--right .imgframe,
  .help--flanked .imgframe{ aspect-ratio:21/9; }
}

/* Holds the slot the footage will occupy, in the head's right column. */
.videoframe{ margin:0; }
.videoframe__box{
  position:relative; aspect-ratio:16/9;
  display:grid; place-items:center;
  background:var(--night);
  overflow:hidden;
}
/* The loop and, once asked for, the player: same box, stacked. */
.videoframe__loop,
.videoframe__box iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
  display:block; object-fit:cover;
}

/* The play control sits over the loop. Its own words, not an aria-label,
   so it reads the same to everyone. */
.videoframe__play{
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.7rem 1.1rem .7rem .9rem;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--sand); background:rgba(23,16,12,.62);
  border:1px solid rgba(237,224,203,.34);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, opacity .25s ease;
}
.videoframe__play svg{ width:1.1em; height:1.1em; }
.videoframe__play:hover,
.videoframe__play:focus-visible{
  background:rgba(23,16,12,.8); border-color:var(--sand);
}

/* Handing over to the player: the loop and the button fade out, the player
   fades up a beat later. Both ends of that dip are the page color and so is
   the player while it loads, which is what hides the seam — there is no way
   to know the moment playback actually starts without YouTube's own script,
   and that is a third party. */
.videoframe__box.is-playing .videoframe__loop,
.videoframe__box.is-playing .videoframe__play{
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.videoframe__box iframe{
  z-index:1;
  animation:videofade .45s ease .15s both;
}
@keyframes videofade{ from{ opacity:0 } to{ opacity:1 } }

@media (prefers-reduced-motion:reduce){
  .videoframe__box iframe{ animation:none; }
}
.videoframe figcaption{
  margin-top:.7rem;
  font-size:.86rem; line-height:1.5; font-style:italic;
  color:rgba(237,224,203,.62);
}

/* The one denser reference area. No cards, no icons, nothing collapsed. */
.evidence{ list-style:none; margin:0; padding:0; max-width:44rem; }
/* Pushed down to sit on the first line of copy in the column beside it. The
   two boxes are already flush at the top; this makes up the difference in
   half-leading between 1.05rem/1.75 copy and a .7rem label on default
   leading, which is what left the label riding high. */
.evidence__label{ margin:0 0 .55rem; padding-top:.35rem; }
.evidence li{
  position:relative; padding-left:2.05rem;
  margin-bottom:1.15rem;
  font-size:1rem; line-height:1.55; color:rgba(237,224,203,.84);
}
.evidence li:last-child{ margin-bottom:0; }
.evidence li::before{
  content:""; position:absolute; left:0; top:.8em;
  width:1.2rem; height:1px;
  background:var(--turq); opacity:.8;
}
/* The name on one line, what it means on the next. */
.evidence strong{ display:block; font-weight:700; color:#fff; }
.evidence__detail{
  display:block; font-style:italic;
  color:rgba(237,224,203,.72);
}

/* No rule above the closing CTA either; Meet Kellen keeps its own. With
   nothing drawn between them, the separation has to come from space, so
   the CTA sits a little further down than the sections do from each other. */
/* Set in a third of the way, so the closing block sits under the copy
   rather than under the page's left edge. */
.help-cta{
  margin-top:clamp(2.5rem,5vw,4.4rem);
  border-top:none; padding:0 0 0 16.5%;
}
.about-cta p.help-cta__terms{ font-weight:700; color:rgba(237,224,203,.95); margin-top:-.8rem; }

/* Has to sit after the rule above, not with the other narrow-width rules
   further up the file: same specificity, so whichever comes last wins. */
@media (max-width:46rem){
  /* A third of this width is no longer an indent, it is a squeeze. */
  .help-cta{ padding-left:0; }
}


/* ── co-counsel ───────────────────────────────────────────────── */

/* The one page addressed to other lawyers rather than to injured people.
   It borrows How We Help's section primitives — .help, .help__cols,
   .help__body — so the two read as the same site, and adds only what this
   page's own furniture needs. */

/* Copy hangs off the heading here too; the same value How We Help uses. */
.cc-head{ --copy-indent:clamp(.85rem,2vw,1.5rem); }

/* Left: the pitch and the two ways out of it. Right: the facts a referring
   attorney wants settled before reading a word of prose. */
.cc-head{
  max-width:none; margin-bottom:clamp(2.5rem,5vw,3.5rem);
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(2rem,4.5vw,4.5rem); align-items:start;
}
/* Balance is off here, which it is not on the other page heads. The break
   is chosen in the markup and never releases, so there is nothing left for
   balance to decide — and left on, it evened the two lines by splitting the
   name across them at phone widths, which is the one thing this heading
   must not do. "Kellen Bradley" fits the column with room to spare; it only
   wrapped because balance preferred two short lines to one long one. */
.cc-head h1{ margin:1.1rem 0 1rem; text-wrap:normal; }
.cc-head__copy{ max-width:44rem; }

/* The line under the headline: the whole offer in eight words. Brighter and
   larger than the lede beneath it, so the two do not read as one paragraph
   broken in half. */
.page-head .cc-deck{
  margin:0 0 1.1rem; padding-left:var(--copy-indent);
  font-size:clamp(1.22rem,1.9vw,1.6rem); line-height:1.3;
  font-weight:600; color:#fff; max-width:34rem;
}
.page-head .cc-lede{
  margin:0; padding-left:var(--copy-indent);
  font-size:clamp(1.02rem,1.25vw,1.15rem); line-height:1.7;
  color:rgba(237,224,203,.84); max-width:40rem;
}

.cc-actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 1.6rem;
  margin-top:clamp(1.8rem,3vw,2.4rem); padding-left:var(--copy-indent);
}

/* The second action, where there are two. Same shape as .submit and the
   same type, drawn in outline: it is the alternative, not the ask. */
.ghost{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1.15rem 1.9rem;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:1.05rem; letter-spacing:.01em;
  color:var(--sand);
  border:1px solid rgba(237,224,203,.34);
  transition:border-color .16s ease, color .16s ease, background-color .16s ease;
}
.ghost:hover{
  color:#fff; border-color:var(--sand);
  background:rgba(237,224,203,.06);
}

/* The facts panel. A clay rule down its left edge rather than a box — the
   same way the pull quote on Meet Kellen is marked — with hairlines between
   the rows so four short answers do not run together. */
.cc-brief{
  margin:.4rem 0 0; padding-left:1.4rem;
  border-left:3px solid var(--clay);
}
.cc-brief > div{
  padding-bottom:1.1rem; margin-bottom:1.1rem;
  border-bottom:1px solid rgba(237,224,203,.14);
}
.cc-brief > div:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.cc-brief dt{
  margin-bottom:.35rem;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--turq);
}
.cc-brief dd{
  margin:0; font-size:.96rem; line-height:1.55;
  color:rgba(237,224,203,.84);
}

/* What these cases turn on: seven short entries, so hairlines rather than
   the dashes the evidence list uses — a different list doing a different
   job on a different page. */
.roster{ list-style:none; margin:0; padding:0; max-width:34rem; }
/* Sits down on the first line of the copy beside it, the same correction
   the evidence label makes for the same reason. */
.roster__label{ margin:0 0 .55rem; padding-top:.35rem; }
.roster li{
  padding:.7rem 0;
  border-bottom:1px solid rgba(237,224,203,.14);
  font-size:1rem; line-height:1.5;
  color:rgba(237,224,203,.88);
}
.roster li:last-child{ border-bottom:none; }

/* The eight things a co-counsel relationship actually gets you. Numbered,
   in the same leading-zero figures the contact page counts steps with, and
   set two across so the list is read as a whole rather than scrolled. */
.offer{
  list-style:none; counter-reset:o;
  margin:clamp(1.6rem,3vw,2.2rem) 0 0; padding-left:var(--copy-indent);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.6rem clamp(2rem,4vw,4rem);
  max-width:64rem;
}
.offer li{
  counter-increment:o;
  display:grid; grid-template-columns:2.2rem 1fr; gap:.15rem .7rem;
  /* The items in a row are the same height as the tallest of them, and
     auto rows would share that extra height out between the label and the
     line under it — leaving a short entry's detail floating below its own
     heading. Content-sized rows, packed to the top. */
  align-content:start;
}
.offer li::before{
  content:counter(o,decimal-leading-zero);
  grid-row:1 / span 2;
  font-family:var(--display); font-weight:700; font-stretch:118%;
  font-size:.8rem; letter-spacing:.06em; color:var(--turq);
  padding-top:.3rem;
}
.offer strong{
  font-size:1.02rem; line-height:1.4; font-weight:700; color:#fff;
}
.offer span{
  font-size:.96rem; line-height:1.6; font-style:italic;
  color:rgba(237,224,203,.74);
}

/* Two ways in, side by side, each under its own rule: the choice is the
   point, so neither is allowed to look like the default. */
.entry{
  margin-top:clamp(1.4rem,2.5vw,1.9rem); padding-left:var(--copy-indent);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem);
  max-width:64rem;
}
.entry__half{ border-top:1px solid rgba(237,224,203,.22); padding-top:1.1rem; }
.entry__half .eyebrow{ margin-bottom:.7rem; }
.entry__half p:not(.eyebrow){
  margin:0; font-size:1.02rem; line-height:1.7;
  color:rgba(237,224,203,.84);
}

/* The case profile. Dashes here, as on How We Help's evidence list: these
   are things to check a case against, not a sequence. */
.criteria{
  list-style:none; margin:0 0 1.4rem; padding:0; max-width:44rem;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem 2rem;
}
.criteria li{
  position:relative; padding-left:2.05rem;
  font-size:1rem; line-height:1.5; color:rgba(237,224,203,.88);
}
.criteria li::before{
  content:""; position:absolute; left:0; top:.75em;
  width:1.2rem; height:1px;
  background:var(--turq); opacity:.8;
}
/* The last one is a sentence rather than a phrase; it takes the full width
   so it does not break into three cramped lines beside a two-word item. */
.criteria li:last-child{ grid-column:1 / -1; }

/* No rule above the closing block, the same as How We Help's: the
   separation is space, which is why it sits further down than the sections
   do from each other. Set in from the left, so it closes under the copy
   rather than under the page's edge. */
.cc-cta{
  margin-top:clamp(2.5rem,5vw,4.4rem);
  border-top:none; padding:0 0 0 16.5%;
}
.about-cta p.cc-cta__note{
  margin:1.6rem 0 0; max-width:34rem;
  font-size:.86rem; line-height:1.6;
  color:rgba(237,224,203,.55);
}

/* ── co-counsel, narrow ───────────────────────────────────────── */

/* The facts panel drops under the pitch rather than beside it, keeping its
   clay rule. Below this the two-across lists are the next to go. */
@media (max-width:62rem){
  .cc-head{ grid-template-columns:1fr; gap:2.2rem; }
  .cc-head__copy{ max-width:none; }
}

@media (max-width:46rem){
  .offer, .entry, .criteria{ grid-template-columns:1fr; }
  .offer{ gap:1.4rem; }
  .entry{ gap:1.8rem; }
  /* A sixth of this width is a squeeze rather than an indent — the same
     point at which How We Help's closing block gives its own up. */
  .cc-cta{ padding-left:0; }
}

/* ── refer ────────────────────────────────────────────────────── */

/* The referral form reuses the contact page's furniture — .contact-grid,
   .form, .field, .alert, .aside__block — because it is the same object doing
   the same job for a different person. Only what that person needs and the
   client does not is below. */

/* The wrong door. Most of this site speaks to injured people, so some of
   them will land on a page written for lawyers, and the cost of not saying
   so is someone hurt in a crash filling in a referral form and believing
   they have reached a lawyer. Turquoise rather than the clay of a call to
   action: it is a redirection, not the thing we want them to do here. */
.wrongdoor{
  position:relative;
  max-width:44rem; margin:0 0 clamp(2.5rem,5vw,3.5rem);
  padding:1.3rem 1.5rem;
  border-left:3px solid var(--turq);
  background:rgba(23,120,122,.1);
}
.wrongdoor p{
  margin:0 0 .7rem; font-size:.96rem; line-height:1.6;
  color:rgba(237,224,203,.84);
}
.wrongdoor p:last-child{ margin-bottom:0; }
.wrongdoor__q{
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:1.02rem; letter-spacing:.01em;
  color:#fff;
}
/* The way out, as a pill — the same shape the hero badge and the highway
   note use, so it reads as one family across the site. Centered and sitting
   astride the box's lower edge rather than inside it: it is the exit, not
   another line of the paragraph. Still not clay, which stays reserved for
   the thing we actually want done on this page. */
.wrongdoor__go{
  /* Left in the flow and pulled up over the paragraph rather than positioned
     against the box, so the box still sizes itself around its contents. The
     lift is the paragraph's bottom margin plus half a line, which puts the
     top of the pill on the middle of the last line — beside "free.", which
     is short enough that the two never collide. */
  display:flex; width:fit-content;
  margin:-1.45rem auto 0;
  align-items:center; gap:.5rem;
  padding:.45rem 1.15rem;
  border:1px solid rgba(23,120,122,.75);
  border-radius:999px;
  /* A solid fill, mixed rather than named: the pill crosses two different
     grounds — the tinted box above, the page below — and a translucent fill
     would come out two different colors across that edge. */
  background:color-mix(in srgb, var(--turq) 26%, var(--night));
  font-size:.95rem; font-weight:600; color:#fff;
  white-space:nowrap;
  transition:background-color .16s ease, border-color .16s ease;
}
.wrongdoor__go:hover{
  background:color-mix(in srgb, var(--turq) 45%, var(--night));
  border-color:var(--turq);
}
.wrongdoor__go svg{ width:12px; height:12px; }

/* The form asks about two parties, so it is in two halves. Browsers give a
   fieldset a border and padding of its own; none of that is wanted, only the
   grouping it carries to a screen reader. */
.form fieldset{
  border:0; margin:0 0 2rem; padding:0;
  /* min-width:0, or a fieldset refuses to shrink below its widest child and
     takes the two-column rows with it at narrow widths. */
  min-width:0;
}
.form fieldset:last-of-type{ margin-bottom:1.6rem; }
/* display:block takes the legend out of the border gap the browser normally
   reserves for it and puts it in the flow as an ordinary heading. Not
   floated: a float is picked up by the two-column row that follows, which
   then wraps around it in whatever width is left over. */
.form legend{
  display:block; width:100%;
  padding:0; margin-bottom:1rem;
}
.fieldset__note{
  margin:0 0 1.1rem; font-size:.86rem; line-height:1.55;
  color:rgba(237,224,203,.6);
}

/* An aside link that is a link and nothing more. */
.quiet{
  font-size:.92rem; font-weight:600;
  color:rgba(237,224,203,.8);
  border-bottom:1px solid rgba(237,224,203,.3);
}
.quiet:hover{ color:#fff; border-bottom-color:var(--sand); }

/* The confirmation after a referral is sent. It borrows Co-counsel's pair of
   ruled halves rather than stacking the contact page's sidebar blocks down a
   narrow centered column, which is what it was doing: sidebar furniture
   carrying a page, floating in the middle of an empty one. */
.done-next{
  /* .entry is indented under a heading on Co-counsel. Here it answers to the
     page head rather than to an h2, so it sits flush. */
  padding-left:0;
  margin-top:0;
}
.done-next .bignum{ margin:.1rem 0 .7rem; }
.done-back{ margin:clamp(2.5rem,5vw,3.5rem) 0 0; }

/* ── results ──────────────────────────────────────────────────── */

/* The one page that is allowed to be bright. Everywhere else the ground is
   night and the type is bone; here the record is read on the dark and the
   clients speak on a lit band, because they are the only voices on the site
   that are not the firm's. */

/* Copy hangs off the heading, the same value How We Help and Co-counsel use.
   The verdict block borrows .help__body for its prose, which reads this. */
.res-head, .verdict{ --copy-indent:clamp(.85rem,2vw,1.5rem); }

/* Left: what the page is. Right: the four numbers somebody came here for. */
/* The left column is the lede's own measure, 40rem, so it ends where the
   copy ends and the white space beside it starts at a known line. */
.res-head{
  --res-head-gap:clamp(2rem,4.5vw,4.5rem);
  max-width:none; margin-bottom:clamp(1.67rem,3.33vw,2.33rem);
  display:grid; grid-template-columns:minmax(0,40rem) minmax(0,1fr);
  gap:var(--res-head-gap); align-items:start;
}

/* The numbers, centred in the white space beside the copy, both ways. Down:
   centred on the copy's row. Across: centred in the right column, then drawn
   back by half the gap, so the centre is the midpoint between where the copy
   ends and the page's right edge, not the column's. As wide as its contents,
   so there is something to centre. */
.res-numbers{
  align-self:center; justify-self:center; width:fit-content;
  translate:calc(var(--res-head-gap) / -2) 0;
}
.res-head h1{ margin:1.1rem 0 1rem; }
.res-head__copy{ max-width:44rem; }

/* The claim, in one sentence, brighter and larger than the lede beneath it so
   the two do not read as one paragraph broken in half — Co-counsel's deck. */
.page-head .res-deck{
  margin:0 0 1.1rem; padding-left:var(--copy-indent);
  font-size:clamp(1.22rem,1.9vw,1.6rem); line-height:1.35;
  font-weight:600; color:#fff; max-width:34rem;
}
.page-head .res-lede{
  margin:0; padding-left:var(--copy-indent);
  font-size:clamp(1.02rem,1.25vw,1.15rem); line-height:1.7;
  color:rgba(237,224,203,.84); max-width:40rem;
}

/* Every figure on the page added up, over the four below. Smaller than
   RESULTS and than the Lucero figure, and white rather than gold: gold is
   the verdict's. .page-head in the selector, or `.page-head p { margin:0 }`
   outranks it and the gap is lost. */
.page-head .res-total{ margin:0 0 1.1rem; }
.res-total__amount{
  display:block;
  font-family:var(--display); font-weight:800; font-stretch:118%;
  font-size:clamp(2.18rem,3.19vw,2.86rem); line-height:1; letter-spacing:-.01em;
  color:#fff;
}
.res-total__label{
  display:block; margin-bottom:.35rem;
  font-size:1.03rem; line-height:1.4; letter-spacing:.02em;
  color:rgba(237,224,203,.62);
}

/* Four figures, two across, each under its own hairline. The markup is an
   ordinary definition list — label, then value — and column-reverse puts the
   number on top without asking a screen reader to read it backwards. */
.score{
  margin:.4rem 0 0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.7rem 1.5rem;
}
.score > div{
  display:flex; flex-direction:column-reverse;
  border-top:1px solid rgba(237,224,203,.2); padding-top:.9rem;
}
.score dd{
  margin:0;
  font-family:var(--display); font-weight:800; font-stretch:116%;
  font-size:clamp(1.66rem,2.68vw,2.22rem); line-height:1; letter-spacing:-.01em;
  color:#fff;
}
.score dt{
  margin-top:.45rem;
  font-size:.78rem; line-height:1.45;
  color:rgba(237,224,203,.66);
}

/* ── the headline verdict ─────────────────────────────────────── */

/* A warm wash behind the figure rather than a box around it: the page gets
   brighter where the number is, which is the whole argument of the section.
   It runs past the copy and fades out well before the frame beside it. */
/* Three children, two rows. The figure and its label take row one of the left
   column on their own; the case name, the account and the jury's line take
   row two, and the photograph takes row two of the right column. Its top edge
   therefore sits on the case name's, and stays there whatever those sizes
   become. The row gap is what the heading's top margin used to be. */
.verdict{
  display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,1fr);
  gap:1.6rem clamp(2rem,4vw,3.5rem); align-items:start;
  /* No bottom padding: the ledger below brings its own, and the
     photograph is taller than the copy beside it, so the left column
     already trails off into space before the next heading. Two
     paddings on top of that put far too much air above it. */
  padding:clamp(1.33rem,2.67vw,2.13rem) 0 0;
  position:relative; isolation:isolate;
}
.verdict__head{ grid-column:1; grid-row:1; min-width:0; }
.verdict__body{ grid-column:1; grid-row:2; }
/* The warm wash behind the figure, on a layer larger than the block instead
   of on the block itself.

   A gradient is clipped to its element's box. Painted straight onto .verdict
   — as wide as the page and only a few hundred pixels tall — the falloff had
   nowhere to finish: it still had colour in it at the top and left edges, so
   at some widths it stopped dead and drew a rectangle. Here it is on a layer
   extending well past all four sides, so the fade completes outside the
   visible area and there is no edge to find at any width. */
.verdict::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset:-70% -28%;
  background:radial-gradient(34% 40% at 30% 50%,
    rgba(230,187,110,.17) 0%, rgba(230,187,110,.07) 44%, rgba(230,187,110,0) 72%);
}
/* min-width:0, or a grid column refuses to shrink below its widest child —
   here the figure, which is one unbreakable line at its largest size. */
.verdict__body{ min-width:0; }
.verdict__amount{
  margin:1rem 0 0;
  font-family:var(--display); font-weight:800; font-stretch:118%;
  font-size:clamp(2.9rem,7vw,5.2rem); line-height:.95; letter-spacing:-.02em;
  color:var(--gold-lit);
}
.verdict__terms{
  margin:.6rem 0 0;
  font-size:.96rem; letter-spacing:.02em;
  color:rgba(237,224,203,.8);
}
.verdict h2{
  /* no top margin: the grid's row gap sets the distance from the figure
     above, and a margin here would push the heading down out of line with
     the photograph beside it */
  margin:0 0 1rem;
  font-family:var(--display); font-weight:700; font-stretch:114%;
  font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.2;
  text-transform:uppercase; letter-spacing:.01em; color:#fff;
}
/* The sentence the whole case turns on. Brighter and set apart, with the clay
   rule that marks a person speaking elsewhere on the site — here, the jury.
   The rule hangs left of the indented copy, the way Meet Kellen's pull quote
   hangs off its column. */
.verdict__punch{
  margin:1.6rem 0 0; padding-left:1.2rem;
  border-left:3px solid var(--clay);
  font-size:1.1rem; line-height:1.6; color:#fff;
}
/* The appellate decision, as a footnote to the case rather than more of its
   story: small, dim, set in with the copy, and plainly a link. */
.verdict__cite{
  margin:1.4rem 0 0; padding-left:var(--copy-indent); max-width:34rem;
  font-size:.8rem; line-height:1.55; color:rgba(237,224,203,.62);
}
.verdict__cite a{
  text-decoration:underline;
  text-decoration-color:var(--clay-lit); text-underline-offset:.2em;
}
.verdict__cite a:hover{ color:#fff; }
/* 16:9, which is the photograph's own shape — a 4:3 crop would take the left
   block and the right overhang off a building whose whole front is the
   subject, and cut the carved sign close.

   Set down from the top of the block rather than centred or bottom-aligned,
   so its top edge falls just under the figure. An offset rather than an
   alignment because the relationship asked for is to the figure above it,
   not to whatever height the copy happens to be — the tradeoff being that
   this wants rechecking if the eyebrow or the figure's size changes. */
.imgframe--verdict{
  aspect-ratio:16/9;
  grid-column:2; grid-row:2;
}
/* The feather has to match the frame's proportions or the blur stretches:
   the shared mask is a square viewBox and this frame is nearly twice as wide
   as it is tall. Same correction .imgframe--scales makes for being tall. */
.imgframe--verdict img{
  --edge-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 225' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Crect x='4' y='4' width='392' height='217' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E");
  --edge-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 225' preserveAspectRatio='none'%3E%3Cfilter id='g' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Crect width='400' height='225' fill='%23fff' fill-opacity='.55'/%3E%3Crect x='14' y='14' width='372' height='197' fill='%23fff' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── the ledger ───────────────────────────────────────────────── */

.ledger-section{ padding:clamp(1.6rem,3vw,2.4rem) 0 0; }
.ledger-section h2{
  margin:0 0 .7rem;
  font-family:var(--display); font-weight:700; font-stretch:114%;
  font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.2;
  text-transform:uppercase; letter-spacing:.01em; color:#fff;
}

/* Set in from the heading the way the Lucero copy is set in from its case
   name — same value, so the two cannot drift apart. The measure is left to
   be comfortable rather than pinned to the column edge or to the photograph
   above: it runs a little past both, which is the point, but where the line
   wants to break rather than where a mark says it must. */
.ledger-section{ --copy-indent:clamp(.85rem,2vw,1.5rem); }
.ledger__intro{
  margin:0 0 clamp(2rem,3.5vw,2.8rem);
  padding-left:var(--copy-indent); max-width:48rem;
  font-size:1.02rem; line-height:1.7; color:rgba(237,224,203,.8);
}

/* Hairlines, not cards. Boxes would turn people's cases into a price
   list; a rule over each entry keeps them a record. auto-fill rather than a
   fixed count, so the grid loses a column at a time as the window narrows and
   never needs a breakpoint of its own. */
.ledger{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
  gap:clamp(1.8rem,3vw,2.6rem) clamp(1.6rem,3vw,3rem);
}
.result{ border-top:1px solid rgba(237,224,203,.18); padding-top:1rem; }
.result__kind{
  margin:0;
  font-family:var(--display); font-weight:700; font-stretch:112%;
  font-size:.66rem; line-height:1.5; letter-spacing:.2em; text-transform:uppercase;
  color:var(--turq);
}
.result__amount{
  margin:.55rem 0 0;
  font-family:var(--display); font-weight:800; font-stretch:116%;
  font-size:clamp(1.5rem,2.3vw,1.9rem); line-height:1.05; letter-spacing:-.01em;
  color:#fff;
}
/* A sealed settlement takes the same slot but is plainly not a figure: the
   text font, italic, dimmer — it must not be mistaken for an amount. */
.result__amount--sealed{
  font-family:var(--text); font-weight:600; font-style:italic;
  font-size:1.12rem; line-height:1.3; letter-spacing:0;
  color:rgba(237,224,203,.78);
}
.result__terms{
  margin:.5rem 0 0;
  font-size:.8rem; line-height:1.5; font-style:italic;
  color:rgba(237,224,203,.62);
}
.result__title{
  margin:.7rem 0 0;
  font-size:.98rem; line-height:1.5; font-weight:600;
  color:rgba(237,224,203,.92);
}
.result__detail{
  margin:.5rem 0 0;
  font-size:.9rem; line-height:1.6;
  color:rgba(237,224,203,.66);
}

/* Where the figures are, so the qualification is too — the footer's version is
   for the whole site and nobody reads it at the moment it matters. */
.fineprint{
  margin:clamp(2.2rem,4vw,3rem) 0 0; max-width:52rem;
  padding-top:1.2rem; border-top:1px solid rgba(237,224,203,.14);
  font-size:.8rem; line-height:1.6;
  color:rgba(237,224,203,.52);
}

/* ── the lit band ─────────────────────────────────────────────── */

/* Full width, edge to edge, and the only place on the site where the type is
   dark on light. A clay rule across the top marks the change rather than
   letting the two grounds simply butt together. */
/* The light is centred in the band and falls away to every edge, so where it
   meets the night ground it is at its own deepest tone rather than its
   brightest. The seam was hard because the two loudest colours on the site
   were touching; this is the same edge with two thirds of the step taken out
   of it.

   Not a fade from night into the sand: blending near-black into cream runs
   through every muddy brown between them, and smeared across the full width
   of the page it reads as dirt. Nothing here blends the two grounds — the
   band simply arrives at its edges already halfway down. */
.daylight{
  border-top:3px solid var(--clay);
  background:radial-gradient(118% 135% at 50% 42%,
    #fdf8ee 0%, #f4e8d3 38%, #e4d3b5 72%, #d2bd99 100%);
  color:var(--night);
  /* and a shadow tucked just inside each edge, so the dark reads as sitting
     over the band rather than stopping dead against it. Both ends: the top
     alone left the band lit from below, which is a lighting direction
     nothing else on the page has. */
  box-shadow:
    inset 0  16px 26px -16px rgba(23,16,12,.6),
    inset 0 -16px 26px -16px rgba(23,16,12,.6);
  padding:clamp(3.2rem,6.5vw,5.5rem) var(--gutter);
}
/* The eyebrow is turquoise on night; at that value it is barely there on the
   band, so on the light it deepens rather than changing hue. */
.eyebrow--day{ color:#0f5557; }

.day-head{
  margin:1rem 0 1rem; max-width:34rem;
  font-family:var(--display); font-weight:800; font-stretch:116%;
  font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.05;
  text-transform:uppercase; letter-spacing:-.005em;
  color:var(--night); text-wrap:balance;
}
.day-lede{
  margin:0 0 clamp(2.2rem,4vw,3rem); max-width:38rem;
  font-size:1.02rem; line-height:1.7;
  color:rgba(23,16,12,.74);
}

/* The copy runs down the left in three rows; the badges occupy the right of
   the headline's row alone, so they centre on the headline rather than on
   the column as a whole. Column one is the copy's own measure, which leaves
   column two as the empty band beside it.

   Three knobs, all here: how wide each badge is drawn, the gap between the
   two, and how far across that empty band the pair's centre sits. */
.day-top{
  --badge-w:186px;
  --badge-gap:2rem;
  --badge-across:56%;
  display:grid;
  grid-template-columns:minmax(0,38rem) minmax(0,1fr);
  gap:0 clamp(1.5rem,4vw,3.5rem);
}
.day-top > .eyebrow--day{ grid-column:1; grid-row:1; }
.day-top > .day-head{    grid-column:1; grid-row:2; }
.day-top > .day-lede{    grid-column:1; grid-row:3; }

/* Row 2 with the headline, vertically centred on it. justify-self:start plus
   a margin rather than a percentage translate, so the pair cannot be dragged
   out past the band's right edge as the window narrows — the margin resolves
   against the column, and half the pair's width is taken back so it is its
   centre that lands on the mark, not its left edge. Capped at the room the
   column has left, so the nudge toward the mark never pushes the pair onto
   two rows while it would still fit on one. */
.day-badges{
  --pair-w:calc(2 * var(--badge-w) + var(--badge-gap));
  grid-column:2; grid-row:2;
  align-self:center; justify-self:start;
  display:flex; flex-wrap:wrap; gap:var(--badge-gap);
  margin-left:max(0px, min(calc(var(--badge-across) - var(--pair-w) / 2), calc(100% - var(--pair-w))));
}
.avvo-badge-link{ display:block; transition:transform .16s ease; }
.avvo-badge-link img{ display:block; width:var(--badge-w); height:auto; }
.avvo-badge-link:hover{ transform:translateY(-2px); }
.avvo-badge-link:focus-visible{
  outline:2px solid var(--clay); outline-offset:6px;
}

/* Below this the empty band beside the headline is too narrow for the pair
   side by side (two badges and their gap want about 390px, beside a 38rem
   column), so the badges take a row of their own under the copy — and
   centre in it, across and down. The margin is one value used twice rather
   than the lede's bottom margin plus a separate gap, which is what makes the
   space above and below them equal instead of nearly equal. Grid items do
   not collapse their margins, so the lower one also serves as the gap to
   the quotes. */
@media (max-width:72rem){
  .day-top{ grid-template-columns:1fr; }
  .day-top > .day-lede{ margin-bottom:0; }
  .day-badges{
    grid-column:1; grid-row:4;
    justify-self:center; align-self:center; justify-content:center;
    margin:clamp(2rem,7vw,2.9rem) 0;
  }
}

/* Columns rather than a grid: the quotes are wildly uneven in length, and a
   grid would leave every row as tall as its longest card. Columns just fill. */
.voices{
  columns:3; column-gap:clamp(1.8rem,3.5vw,3.2rem);
}
.voice{
  break-inside:avoid;
  margin:0 0 clamp(1.8rem,3vw,2.4rem);
  padding-left:1.1rem;
  border-left:2px solid rgba(168,55,31,.45);
}
.voice .stars{
  margin:0 0 .6rem;
  font-size:.82rem; letter-spacing:.14em;
  color:var(--gold-deep);
}
.voice blockquote{ margin:0; }
.voice blockquote p{
  margin:0;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1rem; line-height:1.65;
  color:rgba(23,16,12,.9);
}
.voice figcaption{
  margin-top:.8rem;
  font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:rgba(23,16,12,.7);
}
/* The date is the quieter half of the same line. */
.voice__when{ font-weight:500; color:rgba(23,16,12,.45); }
.voice__when::before{ content:"· "; }

.day-source{
  margin:clamp(1.4rem,2.5vw,2rem) 0 0; max-width:44rem;
  font-size:.82rem; line-height:1.6;
  color:rgba(23,16,12,.6);
}
.day-source a{
  color:rgba(23,16,12,.85);
  border-bottom:1px solid rgba(168,55,31,.5);
}
.day-source a:hover{ color:var(--clay); border-bottom-color:var(--clay); }

/* ── results, closing ─────────────────────────────────────────── */

/* The band has just given the page all the room it needs above. */
.page--band-below{ padding-top:clamp(2.5rem,5vw,4rem); }

/* 3:1, the photograph's own shape. It was composed as a band — the faces are
   deliberately out of frame and the held hands sit on the centre line — so
   cropping it to the 5:1 the empty placeholder used would cut the table and
   the lamp and leave the subject floating. */
.imgframe--closer{ aspect-ratio:3/1; }
/* Its own feather, for the same reason the courthouse has one: the shared
   mask is a square viewBox and this frame is three times as wide as it is
   tall, so the blur would be stretched flat at the top and bottom edges. */
.imgframe--closer img{
  --focus:50% 42%;
  --edge-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 133' preserveAspectRatio='none'%3E%3Cfilter id='f' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3C/filter%3E%3Crect x='4' y='4' width='392' height='125' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E");
  --edge-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 133' preserveAspectRatio='none'%3E%3Cfilter id='g' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Crect width='400' height='133' fill='%23fff' fill-opacity='.55'/%3E%3Crect x='10' y='8' width='380' height='117' fill='%23fff' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Set in from the left the way How We Help and Co-counsel close, so the last
   block sits under the copy rather than under the page's edge. */
.res-cta{
  margin-top:clamp(2.5rem,5vw,4rem);
  border-top:none; padding:0 0 0 16.5%;
}

/* ── results, narrow ──────────────────────────────────────────── */

@media (max-width:62rem){
  .res-head{ grid-template-columns:1fr; gap:2.2rem; }
  /* stacked, the numbers run the column's width under the copy, as before */
  .res-numbers{ justify-self:stretch; width:auto; translate:none; }
  .res-head__copy{ max-width:none; }
  /* The picture drops under the verdict rather than beside it. It keeps its
     16:9 — the photograph's own shape — so nothing changes but the column. */
  .verdict{ grid-template-columns:1fr; gap:2rem; }
  /* Stacked, it is a single column and the photograph follows the copy. */
  .imgframe--verdict{ grid-column:1; grid-row:3; }
  .voices{ columns:2; }
}

@media (max-width:46rem){
  .voices{ columns:1; }
  /* A sixth of this width is a squeeze rather than an indent, the same point
     at which the other two pages give their closing indent up. */
  .res-cta{ padding-left:0; }
}

/* ── questions ────────────────────────────────────────────────── */

/* Eight questions, each answered in two short paragraphs. Nothing collapsed:
   an accordion would hide the answers behind a click from exactly the person
   who came to read them. Instead the questions are listed together at the
   top, and each answer below is a How We Help section — heading over copy,
   the copy hanging off it — so the two pages read as one site. */

/* The heading and the line for anything not listed on the left, the index of
   questions beside them. The heading's column is the wider one: each of its
   sentences has to hold a line of its own. */
.qa-head{
  max-width:none;
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(1.5rem,3vw,3rem); align-items:start;
}
/* Set as written rather than in capitals: shouted, the two sentences read as
   a slogan; in sentence case they read as someone speaking. */
.qa-head h1{
  margin:0 0 clamp(3.5rem,7vw,6rem);
  text-transform:none;
}

/* The question and the way to the contact page on one line, hanging off the
   heading the distance How We Help's lede does. Wraps to put the button
   under the question when the column gets too narrow for both. */
.qa-ask{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:1rem 1.6rem;
  padding-left:clamp(.85rem,2vw,1.5rem);
}
/* Scoped under .page-head, whose own paragraph rule would otherwise win.
   The size of the lede on How We Help. */
.page-head .qa-lede{
  font-size:clamp(1.1rem,1.4vw,1.28rem); line-height:1.6;
  color:rgba(237,224,203,.92);
}

/* The index: a clay rule down the left, the way Co-counsel's facts panel is
   set. Between the entries, hairlines that start bright on the left and fade
   out to the right — they separate the questions without boxing them. */
.qa-index{
  list-style:none;
  margin:0; padding-left:1.4rem;
  border-left:3px solid var(--clay);
}
.qa-index li + li{
  background:linear-gradient(90deg,
    rgba(237,224,203,.34) 0%, rgba(237,224,203,0) 80%) top left / 100% 1px no-repeat;
}
.qa-index a{
  display:block; padding:.62rem 0;
  font-size:1rem; line-height:1.45; font-weight:600;
  color:rgba(237,224,203,.9);
  transition:color .16s ease;
}
.qa-index li:first-child a{ padding-top:0; }
.qa-index li:last-child a{ padding-bottom:0; }
.qa-index a:hover{ color:#fff; }

/* Each answer is a .help section; this adds only what a list of them needs. */
.qa{
  position:relative;
  /* lands a jumped-to question a little below the window's top edge */
  scroll-margin-top:1.5rem;
}
/* Answers are only two paragraphs, so they take a wider measure than How We
   Help's 44rem rather than running long and narrow down the page. */
.qa h2, .qa .help__body p{ max-width:54rem; }

/* Between answers, the same fading hairline the index uses: starting on the
   heading's edge, bright there, and gone well before the page's right side. */
.qa + .qa::before{
  content:""; position:absolute; top:0; left:0;
  width:100%; height:1px;
  background:linear-gradient(90deg,
    rgba(237,224,203,.34) 0%, rgba(237,224,203,0) 80%);
}

/* How We Help pulls this line up under a paragraph. Here it follows the
   heading directly, and the pull would leave it touching the heading. */
.qa-cta p.help-cta__terms{ margin-top:0; }

/* ── questions, narrow ────────────────────────────────────────── */

@media (max-width:62rem){
  .qa-head{ grid-template-columns:1fr; gap:2rem; }
}