/*
Theme Name: RCG Theme
Theme URI: https://rcgaccountants.com
Author: GearUp Code
Author URI: https://gearupcode.com
Description: Custom theme for RCG Accounting & Associates, Inc. — Pembroke Pines, Florida. Editorial layout built on the bar mark from the RCG sign; Fraunces display, Inter Tight body, Plex Mono for figures; palette sampled from the logo and the office.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary — built for RCG Accounting & Associates, Inc.
Text Domain: rcg
*/

/* ── Tokens ─────────────────────────────────────────────── */
:root{
  /* Sampled from the office itself: brass letters on a warm wall, and the
     manila of a client file. The paper tone is deliberately a folder buff
     rather than a grey-cream, and the accent is oxblood rather than
     terracotta — twenty-five years of practice reads darker and calmer. */
  --ink:      #14100C;
  --ink-soft: #4A4238;
  --brown:    #6E2318;   /* oxblood */
  --brown-dk: #551A11;
  --gold:     #B08322;   /* brass, off the logo */
  --gold-lt:  #D6AC4A;
  /* Three light surfaces, lightest at the top of the page: the hero opens
     bright, the body settles onto manila, and the contact block sits a step
     deeper. Reads as a ladder rather than one flat ground. */
  --paper-hi: #FCFAF5;   /* hero — warm white, not a sterile #fff */
  --paper:    #F0E9DA;   /* manila */
  --paper-2:  #E5DAC3;   /* a third surface, so the page is not just paper/ink */
  --rule:     #D3C6AA;
  --rule-hi:  #BFAE8C;
  --band-tx:  #CFC3AE;

  --wrap: 1560px;
  --pad: clamp(1.25rem, 4vw, 4rem);
  /* The single inset every section measures from: enough to centre a --wrap
     content column, never less than --pad. The old version capped at 10rem,
     which stopped the gutter running away on a large monitor but also let the
     content itself sprawl — at 2545px the stance, resources and contact grids
     ran to 2385px while the services list stopped at 1260px, so no two
     sections shared a right edge. Capping the inset was the wrong half of the
     problem; capping the measure is the right one. */
  --inset: max(var(--pad), calc((100vw - var(--wrap)) / 2));
  --gutter: var(--inset);   /* retained: every section already measures off this */

  /* ONE two-column split for the whole page. Every section used to invent its
     own (26rem / 30rem / 26rem / 22rem / 720px, with four different gaps),
     which is why no two of them lined up.
     The main column is a fixed reading measure pinned to the right edge, and
     the side column takes the slack — so photographs and the big figures get
     the extra width, while text never stretches past a comfortable line and
     never leaves a lake of space beside it. */
  --col-main: 46rem;
  --col-gap:  clamp(2.5rem, 5vw, 6rem);

  /* Fraunces for display — a serif with actual weight in it. The thin
     editorial serif this used before is the house style of every generated
     site on the internet right now; the same "established practice" signal
     comes across better from a face that looks like it was cut, not set.
     Plex Mono is reserved for figures: dates, phone, address, amounts. */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{ color:inherit; }
img{ max-width:100%; display:block; }

:where(a,button):focus-visible{
  outline:2px solid var(--brown);
  outline-offset:3px;
  border-radius:2px;
}

/* No max-width and no auto margin: the inset does the centring, which keeps a
   full-bleed background on the section while its content still lines up with
   every other section's. */
.wrap{
  width:100%;
  padding-inline:var(--inset);
}

/* ── Header ─────────────────────────────────────────────── */
/* Header shares the hero's ground so the top of the page reads as one bright
   zone, with the binding bar as the break down to the manila body. */
.site-header{
  position:sticky; top:0; z-index:50;
  padding-block:1.15rem; background:var(--paper-hi);
  box-shadow:0 0 0 rgba(20,16,12,0);
  transition:box-shadow .3s ease;
}
.site-header.is-scrolled{
  box-shadow:0 8px 24px rgba(20,16,12,.09);
}
.header-row{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem); }
.brand{ flex:0 0 auto; text-decoration:none; }
.brand img{ height:clamp(38px,4.6vw,52px); width:auto; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:clamp(1.1rem,2.2vw,2rem); }
.nav a{
  font-size:.9375rem; font-weight:500; text-decoration:none;
  color:var(--ink-soft); padding-block:.35rem;
  border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav a:hover{ color:var(--brown); border-bottom-color:var(--gold); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--brown); }

.header-utils{
  display:flex; align-items:center; gap:1.25rem;
  padding-left:clamp(.75rem,2vw,1.5rem);
  border-left:1px solid var(--rule);
}
.lang{ display:inline-flex; align-items:center; font-size:.75rem; font-weight:700; letter-spacing:.09em; gap:.5rem; margin:0; }
.lang a{ text-decoration:none; color:#9A9287; transition:color .18s ease; }
.lang a:hover{ color:var(--brown); }
.lang a[aria-current="true"]{ color:var(--ink); }
.lang span{ color:var(--rule-hi); }

.tel{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.9375rem; font-weight:600; text-decoration:none;
  color:var(--brown); white-space:nowrap; transition:color .18s ease;
}
.tel:hover{ color:var(--brown-dk); }
.tel svg{ width:15px; height:15px; flex:0 0 auto; }

/* Mobile menu */
.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px;
  margin-left:.25rem;
  padding:0;
  background:none; border:1px solid var(--rule-hi); border-radius:2px;
  cursor:pointer;
}
.nav-toggle span{
  display:block; position:relative;
  width:19px; height:1.5px; background:var(--ink);
  transition:background-color .2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:""; position:absolute; left:0;
  width:19px; height:1.5px; background:var(--ink);
  transition:transform .24s cubic-bezier(.72,0,.22,1);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{ display:none; }
.mobile-nav.open{ display:block; }
.mobile-nav ul{ list-style:none; margin:0; padding:.5rem 0 1.25rem; }
.mobile-nav a{
  display:block;
  padding:.85rem 0;
  border-bottom:1px solid var(--rule);
  font-family:var(--display);
  font-size:1.25rem; font-weight:400;
  text-decoration:none; color:var(--ink);
}
.mobile-nav .m-lang{
  margin:1.1rem 0 0;
  font-size:.75rem; font-weight:700; letter-spacing:.09em;
}
.mobile-nav .m-lang a{
  display:inline; border:0; padding:0;
  font-family:var(--sans); font-size:.75rem; color:#9A9287;
}
.mobile-nav .m-lang a[aria-current="true"]{ color:var(--ink); }

.binding{ height:4px; background:var(--brown); }

/* ── Back to top ────────────────────────────────────────── */
.scroll-top{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem);
  z-index:45;
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brown); color:#fff;
  border:1px solid var(--brown); border-radius:50%; cursor:pointer;
  box-shadow:0 8px 20px rgba(20,16,12,.2);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9);
  transition:opacity .3s cubic-bezier(.22,.68,.32,1),
             transform .3s cubic-bezier(.22,.68,.32,1),
             background-color .18s ease,
             visibility 0s linear .3s;
}
.scroll-top.is-visible{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
  transition:opacity .3s cubic-bezier(.22,.68,.32,1),
             transform .3s cubic-bezier(.22,.68,.32,1),
             background-color .18s ease;
}
.scroll-top:hover{ background:var(--brown-dk); border-color:var(--brown-dk); }
.scroll-top svg{ width:18px; height:18px; }
@media (prefers-reduced-motion: reduce){
  .scroll-top{ transition:opacity .15s linear, visibility 0s linear .15s; }
  .scroll-top.is-visible{ transition:opacity .15s linear; }
}

/* ── Hero: photo as a masked background layer, copy floating over it ──
   Positioning technique matches the reference comp (RCG Home v2): the image
   is not a bounded figure in a grid track, it is an absolute layer behind
   the copy, cropped by two independent masks (vertical, then horizontal) so
   it dissolves into the page on both the top/bottom and the left. Colors,
   fonts and the copy column itself are unchanged from the original build. */
.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:clamp(560px, 76vh, 800px);
  background:var(--paper-hi);
}

.hero-media{
  position:absolute;
  top:0; right:0; bottom:0;
  /* 41% tracks the copy nicely up to ~2000px, but past that the percentage
     keeps marching right while the copy column stops at its max-width — the
     two separate and the overlap the design depends on turns into a dead gap.
     Capping the offset keeps the photo tucked against the copy on wide monitors. */
  left:min(41%, 820px);
  z-index:0;
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.55) 90%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 74%, rgba(0,0,0,.55) 90%, rgba(0,0,0,0) 100%);
}
.hero-media-inner{
  position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 12%, rgba(0,0,0,.22) 26%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.92) 58%, #000 72%);
          mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 12%, rgba(0,0,0,.22) 26%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.92) 58%, #000 72%);
}
/* <picture> is inline by default, which would break the height:100% chain
   the absolute layer depends on. */
.hero-media picture{ display:block; width:100%; height:100%; }
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:56% 30%;
  display:block;
  filter:contrast(1.07) saturate(1.08) brightness(1.02);
}
.hero-scrim{
  position:absolute; inset:0;
  /* Top stop has to track the hero's own ground or it casts a tinted haze
     across the bright surface. */
  background:linear-gradient(to bottom, rgba(252,250,245,.32) 0%, rgba(252,250,245,0) 22%, rgba(20,16,12,0) 58%, rgba(20,16,12,.38) 100%);
}
.hero-copy{
  position:relative;
  z-index:2;
  padding-left:var(--gutter);
  padding-right:clamp(1.5rem, 3vw, 3rem);
  padding-block:clamp(2.5rem, 5vw, 4rem);
  /* box-sizing is border-box, so the gutter has to be added on top of the
     text measure — otherwise the padding eats the column and the display
     headline is left wrapping inside a few hundred pixels. */
  max-width:calc(var(--gutter) + 44rem);
}

/* logo motif, at graphic scale */
/* ── The bar mark ───────────────────────────────────────── */
/* Lifted off her own sign — the stack of brass rules that steps in width to
   the left of "RCG". It is the one device the page is built on: it opens the
   hero, it heads every section, and it replaced the 01/02/03 that used to
   number the services. Her services are not a sequence — nothing comes
   before or after anything — so numbering them was decoration dressed up as
   structure. The mark says the same thing and is actually hers. */
.mark{
  display:flex; flex-direction:column; gap:3px;
  width:58px; margin-bottom:1.6rem;
}
.mark i{
  display:block; height:4px;
  background:var(--gold);
  transform-origin:left center;
}
.mark i:nth-child(2){ width:88%; }
.mark i:nth-child(3){ width:76%; }
.mark i:nth-child(4){ width:64%; }
.mark i:nth-child(5){ width:52%; }
@media (prefers-reduced-motion: no-preference){
  .mark i{ animation:draw .5s cubic-bezier(.72,0,.22,1) both; }
  .mark i:nth-child(1){ animation-delay:.16s; }
  .mark i:nth-child(2){ animation-delay:.23s; }
  .mark i:nth-child(3){ animation-delay:.30s; }
  .mark i:nth-child(4){ animation-delay:.37s; }
  .mark i:nth-child(5){ animation-delay:.44s; }
}
@keyframes draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* Section eyebrows carry a single bar off the same mark, so every section
   opens with the device rather than with bare letterspaced capitals. */
/* The bar is an inline-block rather than a flex item on purpose: as a flex
   container the eyebrow's text nodes become separate items and the line
   stops wrapping like text, which strands the "·" separator mid-line on a
   phone. */
.eyebrow{
  margin:0 0 clamp(1.1rem,2vw,1.6rem);
  font-size:.75rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brown);
}
.eyebrow::before{
  content:"";
  display:inline-block; vertical-align:middle;
  width:20px; height:3px;
  margin:-.15em .7rem 0 0;
  background:var(--gold);
}
/* The hero already opens on the full mark — a second bar under it is one
   accessory too many. */
.hero .eyebrow::before{ display:none; }
.eyebrow .dot{ color:var(--rule-hi); margin-inline:.55rem; }

.hero h1{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.4rem, 4.4vw, 4.5rem);
  line-height:1.1;
  /* Serifs need far less negative tracking than the geometric sans this was
     originally tuned against — anything tighter closes up the counters. */
  letter-spacing:-.012em;
  color:var(--ink);
  text-wrap:pretty;
  /* Measure set in characters rather than pixels, so the line breaks hold
     their shape as the display size scales with the viewport. */
  max-width:16ch;
}
.hero h1 em{
  font-style:normal;
  font-weight:500;
  color:var(--brown);
}

.hero .sub{
  margin:clamp(1.4rem,2.6vw,2rem) 0 0;
  max-width:40ch;
  font-size:clamp(1.0625rem,1.35vw,1.25rem);
  line-height:1.6;
  color:var(--ink-soft);
}

.actions{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  display:flex; flex-wrap:wrap; gap:.875rem 1rem; align-items:center;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:54px; padding:.9rem 1.75rem;
  font-family:var(--sans); font-size:.9375rem; font-weight:600;
  text-decoration:none; border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease,
             transform .22s cubic-bezier(.72,0,.22,1), box-shadow .22s cubic-bezier(.72,0,.22,1);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,16,12,.14); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn-primary{ background:var(--brown); color:#fff; border-color:var(--brown); }
.btn-primary:hover{ background:var(--brown-dk); border-color:var(--brown-dk); }
.btn-secondary{ background:rgba(255,255,255,.72); color:var(--ink); border-color:var(--rule-hi); }
/* For the dark bands. The oxblood primary sits too close to the ink ground to
   read as a button there; brass is the only accent with enough separation. */
.btn-brass{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.btn-brass:hover{ background:var(--gold-lt); border-color:var(--gold-lt); }
.btn-secondary:hover{ border-color:var(--brown); color:var(--brown); }
.btn-secondary svg{ width:15px; height:15px; color:var(--brown); }

/* ── Credential band ────────────────────────────────────── */
.credentials{ background:var(--ink); color:var(--band-tx); }
.cred-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.cred-item{
  padding:clamp(1.75rem,2.8vw,2.6rem) clamp(1.1rem,2vw,2rem);
  border-left:1px solid rgba(176,131,34,.26);
}
.cred-item:first-child{ border-left:0; padding-left:0; }
.cred-item:last-child{ padding-right:0; }
.cred-item h2{
  margin:0 0 .45rem;
  font-family:var(--sans);
  font-size:.72rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gold-lt);
}
.cred-item p{ margin:0; font-size:.9375rem; line-height:1.5; }

/* ── Meet Deborah ───────────────────────────────────────── */
/* Headline runs full width above the two columns rather than sitting inside
   the text column, so the section opens like a chapter. Below it: portrait
   left with its caption set underneath on a rule, copy right ending on the
   page's shared right edge. The photo no longer bleeds off the viewport —
   it is contained and captioned, which is what lets it be small enough not
   to dominate while still showing the whole frame. */
.meet{ padding-block:clamp(3.5rem, 7vw, 6rem); }

.meet-head{ margin-bottom:clamp(2rem, 3.5vw, 3.25rem); }
.meet-head h2{
  margin:0;
  max-width:18ch;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem, 3.6vw, 3.5rem);
  line-height:1.1;
  letter-spacing:-.022em;
  color:var(--ink);
  text-wrap:pretty;
}

/* Roughly 37/58 — the portrait needs to stay well under half or a 4:5 crop
   gets taller than the screen, and the copy takes the remainder so it still
   finishes on the shared right edge. */
.meet-body{
  display:grid;
  grid-template-columns:minmax(0, 37fr) minmax(0, 58fr);
  column-gap:clamp(2rem, 4vw, 4.5rem);
  align-items:start;
}

.meet-figure{
  margin:0;   /* <figure> ships a UA margin of 1em 40px */
}
.meet-figure picture{ display:block; }
.meet-figure img{
  width:100%; height:auto;
  /* Box follows the image's own 4:5, so nothing is cropped. */
  aspect-ratio:4/5;
  object-fit:cover;
}
.meet-figure figcaption{
  margin-top:clamp(.9rem, 1.4vw, 1.2rem);
  padding-top:clamp(.9rem, 1.4vw, 1.2rem);
  border-top:1px solid var(--rule-hi);
}
.meet-figure figcaption strong{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.1rem, 1.35vw, 1.3rem);
  letter-spacing:-.005em;
  color:var(--ink);
}
.meet-figure figcaption span{
  display:block;
  margin-top:.35rem;
  font-family:var(--sans);
  font-size:.6875rem; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:#8A8175;
}

.meet-copy p{
  margin:0 0 1.15rem;
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.72;
  color:var(--ink-soft);
}
/* Opening paragraph carries the warm accent — it is the story, the one after
   it is the credential. */
.meet-lead{
  color:var(--brown) !important;
  font-size:clamp(1.05rem, 1.15vw, 1.125rem) !important;
}

/* Memberships pulled out of the paragraph into a ruled list — three
   organisations read as a credential list, not as prose. Diamond is the bar
   mark's brass, turned. */
.memberships{
  margin:clamp(1.5rem, 2.4vw, 2rem) 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--rule);
}
.memberships li{
  display:flex; align-items:center; gap:.9rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--rule);
  font-size:.9375rem;
  line-height:1.5;
  color:var(--ink);
}
.memberships li::before{
  content:"";
  flex:0 0 auto;
  width:7px; height:7px;
  background:var(--gold);
  transform:rotate(45deg);
}

/* The line she reacted to, set in its own dark panel — the only dark element
   inside a light section, so it carries the weight the sentence deserves. */
.meet-quote{
  margin-top:clamp(1.75rem, 3vw, 2.5rem);
  padding:clamp(1.6rem, 2.8vw, 2.5rem);
  background:var(--ink);
}
.meet-quote p{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.2rem, 1.85vw, 1.6rem);
  line-height:1.35;
  letter-spacing:-.012em;
  color:#F4EFE4;
}
.meet-quote em{ font-style:italic; color:var(--gold-lt); }

.quote-link{
  display:inline-flex; align-items:center; gap:.8rem;
  margin-top:clamp(1.25rem, 2vw, 1.75rem);
  padding-bottom:.55rem;
  border-bottom:1px solid rgba(214,172,74,.45);
  font-size:.75rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none;
  color:var(--gold-lt);
  transition:color .18s ease, border-color .18s ease;
}
.quote-link span{ transition:transform .22s cubic-bezier(.72,0,.22,1); }
.quote-link:hover{ color:#fff; border-color:#fff; }
.quote-link:hover span{ transform:translateX(5px); }

/* ── Services cards ─────────────────────────────────────── */
/* Cells in a ruled grid, not detached boxes. No drop shadows and no rounded
   corners: the rest of the page is built from hairlines and brass rules, and
   a floating shadowed card is the one thing that would look imported from a
   template. The oxblood hover sweep is carried over from the index this
   replaced — it was the best part of it. */
.services{ padding-block:clamp(3.5rem, 7vw, 6rem); }

/* Text link finished with the same bar motif as the eyebrows and the hero
   mark: a short brass tick that draws out longer and darkens on hover,
   rather than a bare underlined link. */
.arrow-link{
  display:inline-flex; align-items:center; gap:.65rem;
  font-family:var(--sans); font-size:.8125rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--brown);
  transition:color .18s ease;
}
.arrow-link .line{
  display:inline-block;
  width:20px; height:2px;
  background:var(--gold);
  transition:width .32s cubic-bezier(.72,0,.22,1), background-color .18s ease;
}
.arrow-link:hover{ color:var(--brown-dk); }
.arrow-link:hover .line{ width:34px; background:var(--brown-dk); }

.svc-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem clamp(2rem, 5vw, 5rem);
  flex-wrap:wrap;
  margin-bottom:clamp(2.25rem, 4vw, 3.5rem);
}
.svc-head h2{
  margin:0;
  max-width:22ch;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem, 3.1vw, 3rem);
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--ink);
  text-wrap:pretty;
}
.svc-head .arrow-link{ margin-top:0; flex:0 0 auto; }

/* The container draws the top and left hairlines, each cell draws its own
   right and bottom — so shared edges never double up. */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.svc-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.85rem;
  padding:clamp(1.25rem, 1.9vw, 1.75rem);
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  text-decoration:none;
  transition:background-color .3s cubic-bezier(.4,0,.2,1);
}
.svc-card:hover{ background:var(--brown); }

.svc-card .svc-bars{ width:26px; }
.svc-name{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.1rem, 1.4vw, 1.35rem);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--ink);
  transition:color .28s ease;
}
.svc-desc{
  margin:0;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--ink-soft);
  transition:color .28s ease;
  flex:1 1 auto;   /* pushes the arrow to a common baseline across the row */
}
.svc-go{
  font-size:1.05rem;
  color:var(--rule-hi);
  transition:color .28s ease, transform .28s cubic-bezier(.72,0,.22,1);
}

.svc-card:hover .svc-name{ color:#fff; }
.svc-card:hover .svc-desc{ color:rgba(240,233,218,.86); }
.svc-card:hover .svc-go{ color:var(--gold-lt); transform:translateX(6px); }
.svc-card:hover .svc-bars i{ background:var(--gold-lt); transform:scaleX(1.2); }
.svc-card:hover .svc-thumb{ border-color:var(--gold); }

.svc-bars{
  display:flex; flex-direction:column; gap:3px;
  width:26px;
}
.svc-bars i{
  display:block; height:3px;
  background:var(--rule-hi);
  transform-origin:left center;
  transition:background-color .28s ease, transform .28s cubic-bezier(.72,0,.22,1);
}
.svc-bars i:nth-child(2){ width:76%; }
.svc-bars i:nth-child(3){ width:52%; }

.svc-thumb{
  aspect-ratio:4/3;
  width:100%;
  display:grid; place-items:center;
  overflow:hidden;
  border:1px solid var(--rule);
  background:
    repeating-linear-gradient(45deg, rgba(20,16,12,.035) 0 6px, transparent 6px 12px),
    var(--paper-2);
  transition:border-color .28s ease;
}
.svc-thumb > span{
  font-family:var(--mono);
  font-size:.5625rem; letter-spacing:.06em; text-transform:uppercase;
  color:#A2977F;
}
/* <picture> is inline by default, which would break the height chain the
   filled slot depends on. */
.svc-thumb picture{ display:block; width:100%; height:100%; }
.svc-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.68,.32,1);
}
.svc-card:hover .svc-thumb img{ transform:scale(1.06); }
/* A filled slot drops the placeholder hatching so it cannot show through a
   transparent edge. */
.svc-thumb:has(img){ background:var(--ink); }

/* The grid's own call to action — "See all services" sits at the top of the
   section, so without this the reader finishes six cards with nothing to do. */
.svc-foot{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:1.25rem clamp(1.5rem, 3vw, 3rem);
  padding-top:clamp(2rem, 3.5vw, 3rem);
}
.svc-foot p{
  margin:0;
  max-width:44ch;
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.7;
  color:var(--ink-soft);
}
.svc-foot .btn{ flex:0 0 auto; }

/* Sits beside a button as the quieter second option. */
.inline-tel{
  font-family:var(--mono);
  font-size:.875rem;
  letter-spacing:-.01em;
  color:var(--band-tx);
  text-decoration:none;
  border-bottom:1px solid rgba(176,131,34,.4);
  padding-bottom:2px;
  transition:color .18s ease, border-color .18s ease;
}
.inline-tel:hover{ color:var(--gold-lt); border-color:var(--gold-lt); }

/* ── Reach / referral stance ────────────────────────────── */
/* The page's second dark anchor. Her sharpest correction on the whole draft
   was "I have clients in all 50 states", so it is set as the figure rather
   than left inside a sentence. */
.stance{
  background:var(--ink);
  color:var(--band-tx);
  padding-block:clamp(3rem, 5.5vw, 5rem);
}
.stance-grid{
  display:grid;
  grid-template-columns:1fr minmax(0, var(--col-main));
  gap:var(--col-gap);
  align-items:center;
}

/* Same eyebrow, on the dark ground. */
.eyebrow-g{
  margin:0 0 clamp(1.25rem, 2vw, 1.75rem);
  font-family:var(--sans);
  font-size:.75rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-lt);
}
.eyebrow-g::before{
  content:"";
  display:inline-block; vertical-align:middle;
  width:20px; height:3px;
  margin:-.15em .7rem 0 0;
  background:var(--gold-lt);
}
.bignum{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(5.5rem, 12vw, 11rem);
  line-height:.86;
  letter-spacing:-.03em;
  color:var(--gold-lt);
}
.bignum-label{
  margin:clamp(1rem, 1.8vw, 1.5rem) 0 0;
  max-width:26ch;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--band-tx);
}
.stance-figure .mark{ margin:clamp(1.75rem, 3vw, 2.5rem) 0 0; }
.stance-figure .mark i{ background:linear-gradient(90deg, var(--gold-lt), var(--gold)); }

.stance-stat{
  display:flex;
  align-items:baseline;
  gap:.75rem;
  margin:clamp(1.5rem, 2.4vw, 2rem) 0 0;
  padding-top:clamp(1.5rem, 2.4vw, 2rem);
  border-top:1px solid rgba(176,131,34,.28);
}
.stance-stat-num{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.75rem, 3vw, 2.5rem);
  line-height:1;
  color:var(--gold-lt);
}
.stance-stat-label{
  max-width:14ch;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--band-tx);
}

.stance-copy{
  border-left:1px solid rgba(176,131,34,.28);
  padding-left:clamp(2rem, 4vw, 4.5rem);
}
.stance-copy p{
  margin:0 0 1.25rem;
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.75;
  color:var(--band-tx);
}
.stance-copy .lead{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.3rem, 2vw, 1.85rem);
  line-height:1.4;
  letter-spacing:-.012em;
  color:#F2EEE6;
  margin-bottom:clamp(1.5rem, 2.4vw, 2rem);
  max-width:34ch;
}
.stance-copy .lead em{ font-style:normal; color:var(--gold-lt); }
.stance-close{
  margin-bottom:0 !important;
  padding-top:1.35rem;
  border-top:1px solid rgba(176,131,34,.28);
  color:var(--gold-lt) !important;
}

/* ── Resources / filing calendar ────────────────────────── */
/* A dark band carrying a three-up calendar, not another two-column text
   block. Meet sits above it and contact below, both light and both split in
   two columns — on the shared manila ground this section had no boundary at
   either end and the three ran together as one long stretch. The band breaks
   it at the top, the deeper manila of contact breaks it at the bottom, and
   the three-column calendar gives it a structure nothing else on the page
   uses. Dates read as a schedule she maintains rather than a paragraph. */
.resources{
  background:var(--ink);
  color:var(--band-tx);
  padding-block:clamp(3.5rem, 7vw, 6rem);
}

.res-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem clamp(2rem, 5vw, 5rem);
  flex-wrap:wrap;
  margin-bottom:clamp(2.25rem, 4vw, 3.5rem);
}
.res-head h2{
  margin:0;
  max-width:22ch;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem, 3.1vw, 3rem);
  line-height:1.14;
  letter-spacing:-.02em;
  color:#F4EFE4;
  text-wrap:pretty;
}
.res-sub{
  margin:.85rem 0 0;
  max-width:42ch;
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.7;
  color:var(--band-tx);
}
.res-head .arrow-link{ margin-top:0; flex:0 0 auto; }

/* Arrow link on a dark ground. */
.arrow-link-g{ color:var(--gold-lt); }
.arrow-link-g .line{ background:var(--gold-lt); }
.arrow-link-g:hover{ color:#fff; }
.arrow-link-g:hover .line{ background:#fff; }

.cal{ border-top:2px solid var(--gold); }

.cal-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.4rem 1.5rem; flex-wrap:wrap;
  padding:1.05rem 0 1rem;
  border-bottom:1px solid rgba(176,131,34,.3);
}
.cal-head h3{
  margin:0;
  font-family:var(--sans);
  font-size:.75rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:#fff;
}
.cal-head .stamp{ color:var(--band-tx); }

/* The three dates run across rather than down — the one place on the page
   that is a three-column layout. */
.cal-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}
.cal-item{
  padding:clamp(1.5rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.4vw, 2.25rem);
  border-left:1px solid rgba(176,131,34,.3);
}
.cal-item:first-child{ border-left:0; padding-left:0; }
.cal-item:last-child{ padding-right:0; }
.cal-date{
  display:block;
  margin-bottom:.65rem;
  font-family:var(--mono);
  font-weight:500;
  font-size:1.0625rem;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--gold-lt);
}
.cal-item p{
  margin:0;
  font-size:.9375rem;
  line-height:1.65;
  color:var(--band-tx);
}

.cal-note{
  margin:0;
  padding:1.1rem 0 0;
  border-top:1px solid rgba(176,131,34,.3);
  font-size:.8125rem;
  line-height:1.6;
  color:var(--band-tx);
}

/* Her own closing line, given the same weight the pull quote gets in meet. */
.cal-close{
  margin:clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding-top:clamp(1.3rem, 2.2vw, 1.75rem);
  border-top:2px solid var(--gold);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.15rem, 1.7vw, 1.45rem);
  line-height:1.4;
  color:#F4EFE4;
}

/* ── Get in touch ───────────────────────────────────────── */
.contact{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  padding-block:clamp(4rem, 8vw, 7rem);
}
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0, var(--col-main)) 1fr;
  gap:var(--col-gap);
  align-items:start;
}
.contact-copy h2{
  margin:0 0 clamp(1.1rem, 2vw, 1.5rem);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem, 3.1vw, 3rem);
  line-height:1.14;
  letter-spacing:-.02em;
}
.contact-copy > p{
  margin:0 0 clamp(2rem, 3.5vw, 2.75rem);
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.72;
  color:var(--ink-soft);
}
/* The phone number is the real call to action for a referral practice, so it
   is set at display scale rather than as another line of small print. */
.tel-big{
  display:inline-block;
  font-family:var(--mono);
  font-weight:500;
  font-size:clamp(1.65rem, 2.5vw, 2.3rem);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--brown);
  text-decoration:none;
  transition:color .18s ease;
}
.tel-big:hover{ color:var(--brown-dk); }

/* Icon-led rows, stacked label over value — same device as the Contact
   masthead's quick-facts line, reused here so the two contact blocks read as
   one system. The old version packed a fixed 5.5rem label column against a
   value column with tight .7rem padding, which is what read as crumbled: an
   address that wraps to two lines had nowhere to breathe, and the muted
   uppercase labels sat immediately beside the value with no visual anchor. */
.detail-list{ margin:clamp(2rem, 3.4vw, 2.5rem) 0 0; padding:0; list-style:none; }
.detail-list li{
  display:flex;
  align-items:flex-start;
  gap:1rem;
  padding:1.15rem 0;
  border-top:1px solid var(--rule-hi);
}
.detail-list li:last-child{ padding-bottom:0; }
.dl-icon{
  display:flex; flex:0 0 auto;
  align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem;
  margin-top:.1rem;
  border:1px solid var(--rule-hi);
}
.dl-icon svg{ width:15px; height:15px; color:var(--brown); }
.dl-body{ display:flex; flex-direction:column; gap:.35rem; }
.detail-list dt, .detail-list .k{
  font-family:var(--mono);
  font-size:.6875rem; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:#8A8175;
}
.detail-list dd, .detail-list li > span:last-child{
  margin:0;
  font-size:1rem;
  line-height:1.55;
  color:var(--ink-soft);
}
.detail-list a{ color:var(--brown); text-decoration:none; border-bottom:1px solid transparent; }
.detail-list a:hover{ border-color:var(--brown); }

.notice{
  margin:clamp(1.75rem, 3vw, 2.25rem) 0 0;
  padding:1.25rem 1.5rem;
  border-left:3px solid var(--brown);
  background:rgba(110,35,24,.06);
  font-size:1rem;
  line-height:1.65;
  color:var(--ink);
}

/* Form card — same paper-document language as the ledger above */
.form-card{
  background:#fff;
  border:1px solid var(--rule);
  box-shadow:0 30px 60px -40px rgba(28,28,27,.42);
  padding:clamp(1.5rem, 3vw, 2.75rem);
}
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 clamp(1rem, 2vw, 1.5rem);
}
.field{ margin-bottom:clamp(1.25rem, 2.2vw, 1.6rem); }
.field:last-of-type{ margin-bottom:0; }
.field > label,
.chips-label{
  display:block;
  margin-bottom:.6rem;
  font-size:.6875rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#6E665B;
}
.req{ color:var(--brown); }

.input{
  width:100%;
  padding:.85rem 1rem;
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:#FBF7EE;
  border:1px solid var(--rule-hi);
  border-radius:2px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.input:focus{
  outline:0;
  border-color:var(--brown);
  box-shadow:0 0 0 3px rgba(110,35,24,.12);
}
textarea.input{ min-height:7.5rem; resize:vertical; }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip-in{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.chip{
  display:inline-flex; align-items:center;
  padding:.55rem .95rem;
  font-size:.875rem; font-weight:500;
  color:var(--ink-soft);
  background:#FBF7EE;
  border:1px solid var(--rule-hi);
  border-radius:2px;
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover{ border-color:var(--brown); color:var(--brown); }
.chip-in:checked + .chip{
  background:var(--brown); border-color:var(--brown); color:#fff;
}
.chip-in:focus-visible + .chip{ outline:2px solid var(--brown); outline-offset:3px; }

.form-foot{
  margin:clamp(1.5rem, 2.5vw, 2rem) 0 0;
  font-size:.875rem; line-height:1.65; color:var(--ink-soft);
}
.form-foot a{ color:var(--brown); }
.form-status{
  margin:1rem 0 0;
  font-size:.9375rem;
  color:var(--brown);
}
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ── Contact page: the map ──────────────────────────────── */
/* Her explicit call on the map question: a plain image, address printed
   beside it, nothing clickable — never an interactive embed. Sits inside
   contact-copy, directly under the Office row it depicts, filling the same
   column every other element in this section measures off — a standalone
   section for one small image had nothing else on its row to relate to and
   read as dropped in from nowhere. It also closes most of the gap between
   this column and the taller form beside it. */
.office-map{
  margin:clamp(1.75rem, 3vw, 2.25rem) 0 0;
  border:1px solid var(--rule);
  background:#fff;
}
.office-map picture{ display:block; }
.office-map img{ display:block; width:100%; height:auto; }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{ background:var(--ink); color:var(--band-tx); border-top:1px solid rgba(176,131,34,.22); }
.footer-top{
  display:grid;
  grid-template-columns:minmax(14rem, 22rem) 1fr auto;
  gap:clamp(2rem, 4vw, 4.5rem);
  padding-block:clamp(3rem, 5.5vw, 4.5rem);
}
.footer-brand .mark{ margin-bottom:1.35rem; }
.footer-brand .mark i{ background:var(--gold-lt); }
.footer-brand img{
  height:44px; width:auto;
  /* the logo art is dark-on-light; reversed out cleanly for the ink ground */
  filter:brightness(0) invert(1);
  opacity:.92;
}
.footer-brand p{
  margin:1.15rem 0 0;
  max-width:32ch;
  font-size:.9375rem;
  line-height:1.7;
}
/* The two list columns get a hairline left rule so they read as a deliberate
   three-up layout rather than three blocks floating with no relation. */
.footer-col{
  padding-left:clamp(1.5rem, 3vw, 3rem);
  border-left:1px solid rgba(176,131,34,.22);
}
.footer-col h2{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 1.1rem;
  font-family:var(--sans);
  font-size:.6875rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-lt);
}
.footer-col h2::before{
  content:""; flex:0 0 auto;
  width:16px; height:2px;
  background:var(--gold);
}
.footer-nav{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.footer-nav a,
.footer-col address a{
  position:relative; display:inline-block;
  color:var(--band-tx); text-decoration:none;
  transition:color .18s ease;
}
.footer-nav a::after,
.footer-col address a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background:var(--gold-lt);
  transition:right .28s cubic-bezier(.72,0,.22,1);
}
.footer-nav a:hover,
.footer-col address a:hover{ color:var(--gold-lt); }
.footer-nav a:hover::after,
.footer-col address a:hover::after{ right:0; }
.footer-col address{
  font-style:normal;
  font-size:.9375rem;
  line-height:1.75;
}
/* The phone is the one thing in this column worth a second look, so it is
   set apart from the address block rather than filed as another line of it. */
.footer-tel{
  display:inline-block;
  margin:0 0 1.1rem;
  font-family:var(--mono); font-weight:500;
  font-size:clamp(1.35rem, 1.9vw, 1.65rem);
  letter-spacing:-.01em;
  color:var(--gold-lt);
  text-decoration:none;
  transition:color .18s ease;
}
.footer-tel:hover{ color:#fff; }

.footer-bar{
  border-top:1px solid rgba(176,131,34,.22);
  padding-block:1.4rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.6rem 1.5rem;
  font-size:.8125rem;
  color:#8F887C;
}
.footer-bar p{ margin:0; }

/* ── Scroll reveal ──────────────────────────────────────── */
/* Scoped to .js (set inline in <head>): this rule hides the entire page below
   the hero and relies on script to bring it back, so it must never apply when
   scripting is unavailable. */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{
    opacity:0; transform:translateY(22px);
    transition:opacity .75s cubic-bezier(.22,.68,.32,1), transform .75s cubic-bezier(.22,.68,.32,1);
    transition-delay:calc(var(--i, 0) * 70ms);   /* for lists: set --i per item */
  }
  .js .reveal.in{ opacity:1; transform:none; }
  .js .reveal.d1{ transition-delay:.08s; }
  .js .reveal.d2{ transition-delay:.16s; }
  .js .reveal.d3{ transition-delay:.24s; }
  .js .reveal.d4{ transition-delay:.32s; }
}

/* ── Load sequence ──────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .rise{ opacity:0; transform:translateY(16px); animation:rise .8s cubic-bezier(.22,.68,.32,1) forwards; }
  .rise-1{ animation-delay:.06s; }
  .rise-2{ animation-delay:.16s; }
  .rise-3{ animation-delay:.28s; }
  .rise-4{ animation-delay:.4s; }
  .rise-5{ animation-delay:.52s; }
}
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px){
  .hero{ min-height:520px; }
  .hero-media{ left:48%; }
}
@media (max-width: 1000px){
  .nav{ display:none; }
  .header-utils{ margin-left:auto; border-left:0; padding-left:0; }
  .nav-toggle{ display:inline-flex; }
}
@media (max-width: 900px){
  /* Below this width the layered background trick stops working — there is
     no room to sit copy beside an image bleeding off 41% of the section, so
     the photo becomes a normal stacked block above the copy instead. */
  .hero{
    display:block;
    min-height:0;
    padding-bottom:clamp(2.5rem,6vw,4rem);
  }
  .hero-media{
    position:relative;
    inset:auto; left:auto;
    aspect-ratio:16/10;
    -webkit-mask-image:none; mask-image:none;
  }
  .hero-media-inner{
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to bottom, #000 0%, #000 80%, rgba(0,0,0,0) 100%);
  }
  .hero-media img{ object-position:50% 22%; }
  .hero-scrim{ display:none; }
  .hero-copy{
    padding-inline:var(--pad);
    padding-block:2rem 0;
    max-width:none;
  }
  /* Portrait stacks above the copy. minmax(0,…) not 1fr — a bare 1fr track
     carries an automatic min-content floor, which is what put this page into
     horizontal scroll once before. */
  .meet-body{
    grid-template-columns:minmax(0, 1fr);
    row-gap:clamp(2rem, 5vw, 2.75rem);
  }
  .meet-figure{ max-width:min(78vw, 420px); }
  /* Six cards go three-up on desktop, two-up here, one-up on a phone. */
  .svc-grid{ grid-template-columns:repeat(2, 1fr); }
  .svc-head{ display:block; }
  .svc-head .arrow-link{ margin-top:1.5rem; }
  .stance-grid{ grid-template-columns:1fr; gap:clamp(2rem, 5vw, 2.75rem); }
  .stance-copy{
    border-left:0; padding-left:0;
    border-top:1px solid rgba(176,131,34,.28);
    padding-top:clamp(2rem, 5vw, 2.5rem);
  }
  .contact-grid{ grid-template-columns:1fr; gap:clamp(2rem, 5vw, 2.75rem); }
  /* The calendar stacks: vertical rules between columns become horizontal
     rules between rows. */
  .res-head{ display:block; }
  .res-head .arrow-link{ margin-top:1.5rem; }
  .cal-grid{ grid-template-columns:1fr; }
  .cal-item{
    padding-inline:0;
    border-left:0;
    border-top:1px solid rgba(176,131,34,.3);
  }
  .cal-item:first-child{ border-top:0; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:2.5rem; }
  .footer-brand{ grid-column:1 / -1; }
  .cred-grid{ grid-template-columns:repeat(2,1fr); }
  .cred-item{ border-top:1px solid rgba(176,131,34,.26); }
  .cred-item:nth-child(-n+2){ border-top:0; }
  .cred-item:nth-child(odd){ border-left:0; padding-left:0; }
  .cred-item:nth-child(even){ padding-right:0; }
}
@media (max-width: 620px){
  .lang{ display:none; }
  /* 3/2 rather than 4/3 — a shorter photo block keeps the headline, subhead
     and both CTAs inside a phone viewport instead of pushing them under it. */
  .hero-media{ aspect-ratio:3/2; }
  .hero-media img{ object-position:44% 24%; }
  .hero h1{ font-size:clamp(2.15rem, 8.4vw, 2.9rem); }
  .meet-figure{ max-width:min(84vw, 380px); }
  .svc-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .cred-grid{ grid-template-columns:1fr; }
  .cred-item{ padding-inline:0; border-left:0; }
  .cred-item:nth-child(-n+2){ border-top:1px solid rgba(176,131,34,.26); }
  .cred-item:first-child{ border-top:0; }
  .actions .btn{ flex:1 1 100%; }
}

/* Very small handsets. The header row (logo + phone + hamburger) is the one
   thing that will not fit at 320px — it forced a horizontal scrollbar across
   the whole page. Trim the pieces rather than dropping the phone number,
   which is the primary call to action for this client. */
@media (max-width: 400px){
  .brand img{ height:30px; }
  .header-row{ gap:.6rem; }
  .tel{ font-size:.8125rem; gap:.35rem; }
  .tel svg{ width:13px; height:13px; }
  .nav-toggle{ width:38px; height:38px; margin-left:0; }
}

/* ── Inner page masthead ────────────────────────────────── */
/* Shared by every page that is not the front page. It carries the header's
   own ground so the top of the document reads as one bright zone, exactly
   the way the hero does, with the binding bar as the break. The title takes
   the slack column and the deck sits in the reading measure, so an inner
   page opens on the same left and right edges as every section under it. */
.page-head{
  position:relative;
  overflow:hidden;                 /* clips the bled mark */
  background:var(--paper-hi);
  padding-block:clamp(3.25rem, 6vw, 5.75rem) clamp(3.25rem, 6.5vw, 5.5rem);
}
.page-head-grid{
  position:relative; z-index:1;    /* sits over .head-mark */
  display:grid;
  grid-template-columns:1fr minmax(0, var(--col-main));
  gap:var(--col-gap);
  align-items:end;
}
.page-head h1{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  /* Larger than any headline inside the page: this is the one place the
     display face is allowed to be the loudest thing on screen. Deliberately
     NOT text-wrap:balance — balancing keeps the line short, which kills the
     overlap onto the mark behind it (same trap as the home hero). */
  font-size:clamp(3.1rem, 7.6vw, 7.25rem);
  line-height:.92;
  letter-spacing:-.032em;
  color:var(--ink);
}
/* "RCG" carries the brand colour, the same emphasis move the home headline
   makes. Not italic — the display face's italic reads weak at this size. */
.page-head h1 em{
  font-style:normal;
  font-weight:500;
  color:var(--brown);
}
.page-head-deck{ padding-bottom:.4rem; }
.page-head-deck p{
  margin:0 0 1.1rem;
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.72;
  color:var(--ink-soft);
}
.page-head-deck p:last-child{ margin-bottom:0; }

/* The opening paragraph carries slightly more weight than the note under it,
   so the deck steps down to body copy rather than dropping straight to it. */
.head-lead{
  font-size:clamp(1.0625rem, 1.15vw, 1.15rem) !important;
  color:var(--ink) !important;
}
/* Her "we are not a large office" line is an aside, not a third paragraph —
   ruled off in brass so it reads as the firm speaking in its own voice. */
.head-note{
  padding-left:clamp(1rem, 1.6vw, 1.4rem);
  border-left:2px solid var(--gold);
  font-size:1rem !important;
}

/* ── Contact masthead: typed lead line ──────────────────── */
/* The visible text is typed in by the script at the bottom of
   page-contact.php; the caret keeps blinking after typing finishes rather
   than vanishing, so the line reads as "still listening" instead of a
   one-shot effect. Under reduced motion the script writes the full string in
   one go and the blink is switched off, so the bar just sits as a steady
   cursor rather than an idle animation nobody asked to keep running. */
.type-cursor{
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:2px;
  vertical-align:-.08em;
  background:var(--brown);
  animation:caret-blink 1s step-end infinite;
}
@media (prefers-reduced-motion: reduce){
  .type-cursor{ animation:none; opacity:.6; }
}
@keyframes caret-blink{ 0%, 100%{ opacity:1; } 50%{ opacity:0; } }

/* ── Services masthead: the preview stack ───────────────── */
/* Three real service photos overlapped like prints on a desk, replacing an
   earlier "6" numeral device — a bare count read as a ceiling on the
   practice rather than a summary of it. White paper borders and a soft
   shadow are a deliberate exception to the site's flat-hairline cards: this
   is meant to read as physical objects stacked, not another ruled panel. */
.svc-preview{
  position:relative;
  height:11.4rem;
  margin:clamp(2.5rem, 4vw, 3.5rem) 0 0;
  max-width:34rem;
}
.svc-preview-img{
  position:absolute;
  top:0;
  width:clamp(8rem, 11vw, 9.5rem); height:clamp(8rem, 11vw, 9.5rem);
  padding:5px;
  background:#fff;
  border:1px solid var(--rule);
  box-shadow:0 16px 30px -18px rgba(28,28,27,.4);
  /* The base rotation lives in its own property so the hover fan-out below
     can add to it with a transition, rather than overwriting the transform
     outright and losing the tilt. */
  transition:transform .45s cubic-bezier(.22,.68,.32,1), box-shadow .3s ease;
}
.svc-preview-img img{ display:block; width:100%; height:100%; object-fit:cover; }
.svc-preview-1{ left:0; top:1rem; --rot:-5deg; transform:rotate(var(--rot)); z-index:1; }
.svc-preview-2{ left:clamp(5.5rem, 8vw, 6.6rem); top:0; --rot:4deg; transform:rotate(var(--rot)); z-index:2; }
.svc-preview-3{ left:clamp(11rem, 16vw, 13.2rem); top:1.4rem; --rot:-3deg; transform:rotate(var(--rot)); z-index:1; }

/* Hover the whole stack and the three prints fan apart and lift, like
   spreading photos on a desk to look at them, then settle back together
   when the cursor leaves. Each keeps its own tilt, just exaggerated. */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .svc-preview:hover .svc-preview-1{ transform:translate(-.5rem, -.4rem) rotate(calc(var(--rot) - 4deg)); }
  .svc-preview:hover .svc-preview-2{ transform:translateY(-.7rem) rotate(calc(var(--rot) + 3deg)); }
  .svc-preview:hover .svc-preview-3{ transform:translate(.5rem, -.4rem) rotate(calc(var(--rot) - 3deg)); }
  .svc-preview:hover .svc-preview-img{ box-shadow:0 22px 34px -16px rgba(28,28,27,.48); }
}

/* Each print also drops into place on load, thrown in from a different
   angle and a beat apart, so the first thing that happens on this page is
   real work landing on the desk rather than a fade. Declarative and
   fill-mode:both, same pattern as .rise — no JS involved, so it plays
   whether or not the reveal script ever loads. Reduced motion drops straight
   to the resting rotation with no throw. */
@media (prefers-reduced-motion: no-preference){
  .svc-preview-1{ animation:svc-drop-1 .85s cubic-bezier(.22,.68,.32,1) .55s both; }
  .svc-preview-2{ animation:svc-drop-2 .85s cubic-bezier(.22,.68,.32,1) .68s both; }
  .svc-preview-3{ animation:svc-drop-3 .85s cubic-bezier(.22,.68,.32,1) .81s both; }
}
@keyframes svc-drop-1{
  from{ opacity:0; transform:translate(-2.5rem, -2rem) rotate(-26deg) scale(.8); }
  to{ opacity:1; transform:translate(0, 0) rotate(var(--rot)) scale(1); }
}
@keyframes svc-drop-2{
  from{ opacity:0; transform:translate(1rem, -2.75rem) rotate(24deg) scale(.8); }
  to{ opacity:1; transform:translate(0, 0) rotate(var(--rot)) scale(1); }
}
@keyframes svc-drop-3{
  from{ opacity:0; transform:translate(2.75rem, -2rem) rotate(-22deg) scale(.8); }
  to{ opacity:1; transform:translate(0, 0) rotate(var(--rot)) scale(1); }
}

/* ── Resources masthead: the stamp ──────────────────────── */
/* This page's own device: an inked date stamp rather than a card, a button,
   or a photo — the entire point of the page is that it stays current, so
   the masthead says so the way a real document does. The doubled border and
   uneven per-corner radius are what keep it from reading as just another
   ruled box; a perfectly square double rule would look like a badge, not a
   stamp. */
.res-stamp{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  margin:clamp(2.25rem, 3.6vw, 3.25rem) 0 0;
  padding:.9rem 1.6rem;
  border:2px solid var(--brown);
  border-radius:3px 8px 4px 9px / 7px 4px 9px 5px;
  outline:1px solid var(--brown);
  outline-offset:3px;
  transform:rotate(-3deg);
  color:var(--brown);
}
.res-stamp-label{
  font-family:var(--mono);
  font-size:.6875rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase;
}
.res-stamp-date{
  font-family:var(--mono);
  font-size:1.4rem; font-weight:500; letter-spacing:.03em;
  text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

/* ── Resources page: what to bring ──────────────────────── */
/* A ruled 2-up card grid, same shared-edge technique as Home's service
   cards (container draws the top+left hairline, each card its own
   right+bottom, so no edge ever doubles). Checkbox-square bullets rather
   than the brass diamonds used elsewhere — these are things to physically
   gather, not credentials to skim, and a checkbox says so at a glance. */
.res-lists{
  background:var(--paper);
  border-top:1px solid var(--rule);
  padding-block:clamp(4rem, 7vw, 6.5rem);
}
.res-lists-head{ max-width:40rem; margin-bottom:clamp(2.75rem, 5vw, 4rem); }
.res-lists-head h2{
  margin:.6rem 0 0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem, 3.4vw, 3.1rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
}

.checklist-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.checklist-card{
  padding:clamp(1.75rem, 3vw, 2.5rem);
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.checklist-card-head{
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:0 0 1.25rem;
}
.checklist-icon{
  display:flex; flex:0 0 auto;
  align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem;
  border:1px solid var(--rule-hi);
}
.checklist-icon svg{ width:16px; height:16px; color:var(--brown); }
.checklist-card h3{
  margin:0;
  flex:1 1 auto;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.2rem, 1.6vw, 1.4rem);
  letter-spacing:-.01em;
  color:var(--ink);
}
/* Live "checked / total" count, filled in and kept current by the script in
   footer.php. Reserves its own width via tabular-nums so the card heading
   doesn't reflow sideways as the number of digits changes. */
.checklist-count{
  flex:0 0 auto;
  font-family:var(--mono);
  font-size:.75rem; font-weight:500;
  font-variant-numeric:tabular-nums;
  color:#8A8175;
  transition:color .2s ease;
}
.checklist-count.is-complete{ color:var(--brown); }

.checklist-card ul{ margin:0; padding:0; list-style:none; }
.checklist-card li{
  position:relative;
  margin-bottom:.6rem;
}
.checklist-card li:last-child{ margin-bottom:0; }

/* A real checkbox, not a decorative square — visually hidden but present
   for keyboard focus and screen readers; the label draws the box itself so
   focus and hover states can style it via the sibling selectors below. */
.check-item{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.checklist-card label{
  position:relative;
  display:block;
  padding-left:1.75rem;
  font-size:.9375rem;
  line-height:1.6;
  color:var(--ink-soft);
  cursor:pointer;
  transition:color .2s ease, opacity .2s ease;
}
.checklist-card label::before{
  content:"";
  position:absolute;
  left:0; top:.15rem;
  width:13px; height:13px;
  border:1.5px solid var(--brown);
  background:#fff;
  transition:background-color .15s ease;
}
.checklist-card label::after{
  content:"";
  position:absolute;
  left:3px; top:.32rem;
  width:7px; height:4px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
  opacity:0;
  transition:opacity .1s ease;
}
.check-item:checked + label::before{ background:var(--brown); }
.check-item:checked + label::after{ opacity:1; }
.check-item:checked + label{ color:var(--rule-hi); text-decoration:line-through; }
.check-item:checked + label strong{ color:inherit; }
.check-item:focus-visible + label::before{ outline:2px solid var(--brown); outline-offset:2px; }
.checklist-card label:hover::before{ border-color:var(--brown-dk); }

.checklist-card li strong{ font-weight:600; color:var(--ink); }
.checklist-note{
  margin:1.5rem 0 0;
  padding-top:1.25rem;
  border-top:1px solid var(--rule-hi);
  font-size:.875rem;
  line-height:1.65;
  color:var(--ink-soft);
}

/* ── Resources page: what's changed ─────────────────────── */
/* A dated log, most recent first, on the page's second dark band. Reuses
   .res-lists-head for spacing but needs its own heading colour since that
   class defaults to ink for a light ground. */
.res-changelog{
  background:var(--ink);
  color:var(--band-tx);
  padding-block:clamp(4rem, 7vw, 6.5rem);
}
.res-changelog .res-lists-head h2{ color:#F4EFE4; }
.changelog{
  margin:0; padding:0; list-style:none;
  border-top:1px solid rgba(176,131,34,.28);
}
.changelog-item{
  display:grid;
  grid-template-columns:10rem minmax(0, 1fr);
  gap:.5rem 2rem;
  padding:clamp(1.25rem, 2.2vw, 1.5rem) 0;
  border-bottom:1px solid rgba(176,131,34,.28);
}
.changelog-date{
  font-family:var(--mono);
  font-size:.8125rem; font-weight:500; letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gold-lt);
}
.changelog-item p{ margin:0; font-size:1rem; line-height:1.7; color:var(--band-tx); }

/* ── Resources page: office notice ──────────────────────── */
/* Renders only when $rcg_office_notice is set (see page-resources.php) —
   matches her spec that this section hides itself entirely when empty. */
.res-notice{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  padding-block:clamp(3rem, 6vw, 5rem);
}
.res-notice-text{
  margin:.75rem 0 0;
  max-width:60ch;
  font-size:1.0625rem;
  line-height:1.7;
  color:var(--ink);
}

/* ── Services page: the list ────────────────────────────── */
/* Numbered ledger rows, not Home's photo card grid — this page is read, not
   pitched, and six full descriptions plus an includes list each need more
   room than a card gives. Each row carries the same real photography used on
   Home, cropped square with the number tagged onto its corner, so the row
   reads as one photo-plus-catalog-entry rather than a numeral floating next
   to unrelated text. */
.svc-list{
  background:var(--paper);
  border-top:1px solid var(--rule);
  padding-block:clamp(4rem, 7vw, 6.5rem);
}
.svc-list-head{ max-width:40rem; margin-bottom:clamp(2.75rem, 5vw, 4rem); }
.svc-list-head h2{
  margin:.6rem 0 0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem, 3.4vw, 3.1rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
}

/* A brass rail runs behind the thumb column and fills with scroll progress —
   the same device as the About page's founding-story rail, driven by the
   matching script in footer.php. It threads through the gaps between rows
   and disappears behind each opaque photo, so it reads as a thread strung
   through six prints rather than a bar sitting beside the list. Desktop
   only: on the stacked mobile layout the thumb is no longer a fixed-width
   left column, so the rail's centring math would land nowhere near it. */
.svc-index-wrap{ position:relative; }
.svc-rail{
  position:absolute;
  top:0; bottom:0;
  left:calc(clamp(9rem, 13vw, 10.5rem) / 2 - 1px);
  width:2px;
  background:var(--rule-hi);
}
.svc-rail i{
  display:block;
  width:100%; height:100%;
  background:var(--gold);
  transform:scaleY(var(--fill, 0));
  transform-origin:top;
}

.svc-index{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.svc-row{
  position:relative;
  display:grid;
  grid-template-columns:clamp(9rem, 13vw, 10.5rem) minmax(0, 1fr);
  gap:clamp(1.5rem, 3vw, 3rem);
  padding-block:clamp(2.5rem, 4vw, 3.5rem);
  border-bottom:1px solid var(--rule);
}
/* The numeral moves from a standalone figure onto the photo's own corner —
   a catalog tag on a print, tying the number and the image into one object
   instead of two things sitting side by side. The image itself zooms
   slightly on hover, the same touch Home's own service cards already use,
   so the two pages share one photo behaviour rather than two. */
.svc-row-thumb{
  position:relative;
  width:clamp(9rem, 13vw, 10.5rem); height:clamp(9rem, 13vw, 10.5rem);
  overflow:hidden;
  border:1px solid var(--rule-hi);
  transition:box-shadow .3s ease;
}
.svc-row-thumb picture, .svc-row-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.svc-row-thumb img{ transition:transform .5s cubic-bezier(.22,.68,.32,1); }
@media (hover: hover){
  .svc-row:hover .svc-row-thumb img{ transform:scale(1.08); }
  .svc-row:hover .svc-row-thumb{ box-shadow:0 18px 30px -20px rgba(28,28,27,.4); }
}
.svc-row-tag{
  position:absolute;
  top:0; left:0;
  padding:.25rem .5rem;
  background:var(--brown);
  font-family:var(--mono);
  font-weight:500;
  font-size:.8125rem;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  color:#fff;
}
.svc-row-body h3{
  margin:0 0 .9rem;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.4rem, 2vw, 1.75rem);
  letter-spacing:-.015em;
  color:var(--ink);
}
.svc-row-body p{
  margin:0 0 1rem;
  max-width:60ch;
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-soft);
}
.svc-row-body p:last-of-type{ margin-bottom:1.4rem; }

.svc-tags-label{
  display:block;
  margin:0 0 .65rem;
  font-family:var(--mono);
  font-size:.6875rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase;
  color:#8A8175;
}
.svc-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; }
.svc-tags li{
  padding:.4rem .75rem;
  border:1px solid var(--rule-hi);
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.02em;
  color:var(--ink-soft);
}

/* ── Services page: FAQ ──────────────────────────────────── */
/* This page's dark band, and its only open/close interaction — native
   <details>/<summary>, no script. A plus mark drawn from two CSS strokes
   loses its vertical stroke on [open], turning into a minus. */
.svc-faq{
  background:var(--ink);
  color:var(--band-tx);
  padding-block:clamp(4rem, 7vw, 6.5rem);
}
.svc-faq-head{ max-width:40rem; margin-bottom:clamp(2.5rem, 4.5vw, 3.5rem); }
.svc-faq-head h2{
  margin:.6rem 0 0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem, 3.4vw, 3.1rem);
  line-height:1.12;
  letter-spacing:-.02em;
  color:#F4EFE4;
}

.faq-list{ border-top:1px solid rgba(176,131,34,.28); }
.faq-item{ border-bottom:1px solid rgba(176,131,34,.28); }
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(1rem, 3vw, 2rem);
  padding:clamp(1.25rem, 2vw, 1.6rem) 0;
  cursor:pointer;
  list-style:none;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.05rem, 1.6vw, 1.3rem);
  line-height:1.3;
  color:#F4EFE4;
  transition:color .18s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:""; }
.faq-item summary:hover{ color:var(--gold-lt); }
.faq-icon{ position:relative; flex:0 0 auto; width:18px; height:18px; }
.faq-icon::before, .faq-icon::after{
  content:"";
  position:absolute; top:50%; left:50%;
  background:var(--gold);
  transition:transform .2s ease;
}
.faq-icon::before{ width:14px; height:2px; transform:translate(-50%, -50%); }
.faq-icon::after{ width:2px; height:14px; transform:translate(-50%, -50%); }
.faq-item[open] .faq-icon::after{ transform:translate(-50%, -50%) scaleY(0); }
.faq-item p{
  margin:0 0 clamp(1.5rem, 2.5vw, 2rem);
  max-width:60ch;
  font-size:1rem;
  line-height:1.7;
  color:var(--band-tx);
}

/* ── The blown-up bar mark ──────────────────────────────── */
/* The logo's five tapering bars, scaled to fill the slack column and bled off
   the left edge so the masthead has something crossing its boundary. Kept in
   the paper tones: it is a ground for the title to sit on, not a second
   headline competing with it. */
/* The mark is sized off the headline's own box, not the section's, so it can
   never drift down behind the record card as the masthead grows. */
.head-title-wrap{ position:relative; }
.head-mark{
  position:absolute;
  z-index:0;
  left:calc((var(--inset) + clamp(1.5rem, 4vw, 4rem)) * -1);
  top:-6%;
  height:112%;
  width:min(52vw, 680px);
  display:flex; flex-direction:column;
  gap:clamp(6px, .7vw, 11px);
  pointer-events:none;
}
.head-mark i{
  display:block;
  flex:1;                          /* bars divide the headline's height */
  /* Deliberately far lighter than the manila surfaces elsewhere: this sits
     directly behind the largest type on the site, so it has to read as a
     watermark and never compete with the headline. */
  background:#F5EFE3;
  transform-origin:left center;
}
/* Taper matches the logo: each bar shorter than the last. The top two run
   full width so the mass reads as the mark and not as a chart. */
.head-mark i:nth-child(3){ width:93%; }
.head-mark i:nth-child(4){ width:84%; }
.head-mark i:nth-child(5){ width:71%; background:#F1EAD9; }
.head-mark i:nth-child(6){ width:55%; background:#F1EAD9; }
/* The headline itself has to clear the bars behind it. */
.page-head h1{ position:relative; z-index:1; }

@media (prefers-reduced-motion: no-preference){
  .head-mark i{ animation:draw .75s cubic-bezier(.72,0,.22,1) both; }
  .head-mark i:nth-child(1){ animation-delay:.10s; }
  .head-mark i:nth-child(2){ animation-delay:.17s; }
  .head-mark i:nth-child(3){ animation-delay:.24s; }
  .head-mark i:nth-child(4){ animation-delay:.31s; }
  .head-mark i:nth-child(5){ animation-delay:.38s; }
  .head-mark i:nth-child(6){ animation-delay:.45s; }
}

/* ── Masthead record card ───────────────────────────────── */
/* Ruled label/value rows in the mono face — the page's only definition list,
   so it does not repeat the credentials panel further down. */
.head-meta{
  margin:clamp(2rem, 3.4vw, 3rem) 0 0;
  max-width:29rem;
  border-top:1px solid var(--rule);
}
.head-meta-row{
  display:grid;
  grid-template-columns:8.5rem 1fr;
  gap:1rem;
  align-items:baseline;
  padding:.72rem 0;
  border-bottom:1px solid var(--rule);
}
.head-meta dt{
  font-family:var(--mono);
  font-size:.6875rem; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--brown);
}
.head-meta dd{
  margin:0;
  font-size:.9375rem;
  line-height:1.4;
  color:var(--ink);
}

/* ── Contact masthead: the call button ──────────────────── */
/* Replaces a plain ruled dl on this one page. A referral practice's first
   real action is picking up the phone, so it gets a real button instead of
   sitting as one row among three equal-weight facts — email and hours drop
   to a slim icon line beneath it. Square corners throughout, never rounded:
   this is the same ruled, no-shadow language as every card on the site. */
.contact-quick{
  margin:clamp(2rem, 3.4vw, 3rem) 0 0;
  max-width:29rem;
}
.quick-call{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.35rem;
  border:1px solid var(--brown);
  text-decoration:none;
  transition:background-color .18s ease;
}
.quick-call:hover{ background:var(--brown); }
.quick-call-ring{
  display:flex; flex:0 0 auto;
  align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem;
  border:1px solid var(--brown);
  transition:border-color .18s ease;
}
.quick-call-ring svg{ width:18px; height:18px; color:var(--brown); transition:color .18s ease; }
.quick-call:hover .quick-call-ring{ border-color:#fff; }
.quick-call:hover .quick-call-ring svg{ color:#fff; }
.quick-call-text{ display:flex; flex-direction:column; gap:.2rem; }
.quick-call-label{
  font-family:var(--mono);
  font-size:.6875rem; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--brown);
  transition:color .18s ease;
}
.quick-call-num{
  font-family:var(--mono);
  font-size:1.4rem; font-weight:500; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  transition:color .18s ease;
}
.quick-call:hover .quick-call-label,
.quick-call:hover .quick-call-num{ color:#fff; }

.quick-facts{
  display:flex; flex-wrap:wrap;
  gap:.6rem 1.75rem;
  margin:1.1rem 0 0;
  padding:0;
  list-style:none;
}
.quick-facts li{
  display:flex; align-items:center; gap:.55rem;
  font-size:.9375rem;
  color:var(--ink-soft);
}
.quick-facts svg{ width:15px; height:15px; flex:0 0 auto; color:var(--brown); }
.quick-facts a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule-hi); }
.quick-facts a:hover{ color:var(--brown); border-color:var(--brown); }

/* Visually hidden but available to assistive tech — used where an icon
   alone carries the meaning on screen (the email/hours icons above). */
.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* The approved standfirst, set in the display face and ruled off from the
   body copy under it — it is a subtitle, not a first paragraph. */
.page-head .deck{
  margin:0 0 clamp(1.25rem, 2.2vw, 1.75rem);
  padding-bottom:clamp(1.25rem, 2.2vw, 1.75rem);
  border-bottom:1px solid var(--rule);
  max-width:34ch;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.2rem, 1.85vw, 1.7rem);
  line-height:1.35;
  letter-spacing:-.012em;
  color:var(--brown);
}

/* ── Contact masthead: single short lead, no standfirst ────── */
/* Every other page-head-deck stacks a deck plus one or two paragraphs, tall
   enough to hold its own against the record card and read fine bottom-aligned
   (the shared .page-head-grid rule). Contact's approved copy is one line, so
   bottom-aligning it here stranded it far below the headline with a dead gap
   above. Centering it against the row instead reads as an answer sitting
   beside the question, not an afterthought at the foot of the column. */
.contact-head .page-head-deck{
  align-self:center;
  padding-bottom:0;
}
.contact-head .head-lead{
  max-width:30ch;
  font-size:clamp(1.15rem, 1.7vw, 1.375rem) !important;
}
@media (max-width: 900px){
  .contact-head .page-head-deck{ align-self:start; }
}

/* ── About: how the firm began ──────────────────────────── */
/* Her own account of founding the practice, on the dark ground so it reads
   as the page's set piece rather than as another block of body copy. The
   left column holds one line lifted out of the story as a margin note; the
   copy runs in the reading measure against a brass hairline. */
.story{
  position:relative;
  background:var(--ink);
  color:var(--band-tx);
  padding-block:clamp(3.5rem, 7vw, 6rem);
}
/* Ruled paper. 30px is the body copy's line height (1.0625rem x 1.75), so the
   prose lands on the rules rather than floating between them. Brass at 6% over
   ink is about #191309 — far too faint to move the text contrast, which stays
   at the band's usual ~10.9:1. */
/* 🔴 This layer must NOT carry the .reveal class, and must not be clipped to
   zero width as a hidden state. Both were tried: IntersectionObserver never
   delivered an entry for it, so .in never landed and the ruling stayed shut
   forever. A keyframe needs no trigger and cannot deadlock. */
.story-rules{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;          /* safe: this is a SIBLING of the sticky heading */
  pointer-events:none;
}
.story-rules i{
  position:absolute;
  left:0; right:0;
  top:-30px; bottom:-30px;  /* one period of slack so the drift never shows an edge */
  display:block;
  background:repeating-linear-gradient(
    to bottom,
    rgba(176,131,34,.09) 0 1px,
    transparent 1px 30px
  );
  /* Fades out top and bottom so the ruling has no hard start or finish. */
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 84%, transparent);
          mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 84%, transparent);
}
/* Drifts exactly one line spacing, so the loop is seamless. Transform only,
   which the compositor handles without repainting the gradient. */
@media (prefers-reduced-motion: no-preference){
  .story-rules i{
    will-change:transform;
    animation:rule-drift 26s linear infinite;
  }
}
@keyframes rule-drift{
  from{ transform:translate3d(0, 0, 0); }
  to  { transform:translate3d(0, 30px, 0); }
}
/* Content clears the ruling. */
.story-layout{ position:relative; z-index:1; }
.story-head{ margin-bottom:clamp(2rem, 3.5vw, 3rem); }
.story-head h2,
.principles-head h2{
  margin:0;
  max-width:20ch;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem, 3.3vw, 3.1rem);
  line-height:1.12;
  letter-spacing:-.022em;
  color:#F4EFE4;
  text-wrap:pretty;
}
/* ── The founding timeline ──────────────────────────────── */
/* Three stages, one per paragraph of her own account. The marker sits in the
   slack column and the copy in the reading measure, so the section keeps the
   page's shared alignment instead of inventing a split of its own. */
/* Heading left, everything else in the reading measure. The heading pins so the
   slack column is never blank while the stages move past. */
.story-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, var(--col-main));
  gap:var(--col-gap);
  align-items:start;
}
.story-head{ position:sticky; top:7rem; }

.timeline{
  position:relative;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:clamp(2.25rem, 4vw, 3.5rem);
}
/* The rail, drawn once for the whole sequence rather than per step, so it is
   continuous across the gaps. It runs down the left edge of the prose column,
   which is the single edge everything in this section now measures from. */
.timeline::before,
.timeline::after{
  content:'';
  position:absolute;
  top:.5rem;
  left:0;
  width:2px;
}
.timeline::before{
  bottom:.5rem;
  background:rgba(176,131,34,.18);
}
/* The filling half. Height is driven by scroll position from footer.php. */
.timeline::after{
  height:calc(var(--fill, 0) * (100% - 1rem));
  background:linear-gradient(to bottom, var(--gold), var(--gold-lt));
}

/* Each stage indents past the rail. Year and label sit on one line above the
   paragraph, so a marker shares its copy's left edge instead of floating in a
   column of its own half a screen away from the line it belongs to. */
.tl-step{
  position:relative;
  padding-left:clamp(1.5rem, 2.6vw, 2.5rem);
}
.tl-mark{
  display:flex;
  align-items:baseline;
  gap:.9rem;
  flex-wrap:wrap;
  margin-bottom:.65rem;
}
.tl-when{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.7rem, 2.5vw, 2.5rem);
  line-height:1;
  letter-spacing:-.022em;
  color:#F4EFE4;
  font-variant-numeric:tabular-nums;
}
.tl-label{
  font-family:var(--mono);
  font-size:.6875rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold);
}
/* The last marker's year counts up while you read, so its label would otherwise
   sit beside a half-counted year claiming twenty-five years. It fades in when
   the count lands — driven by a class, NOT by scroll progress, which could
   stall short and leave the label permanently dim. */
.tl-step:last-child .tl-label{
  opacity:.12;
  transition:opacity .5s ease .1s;
}
.story.is-counted .tl-step:last-child .tl-label{ opacity:1; }

.tl-copy{
  margin:0;
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.75;
  color:var(--band-tx);
}
/* The node on the rail, in the same brass diamond the credentials panel uses.
   It sits on the stage, level with the year, so it marks where a stage starts. */
.tl-step::before{
  content:'';
  position:absolute;
  top:.35rem;
  left:-5px;
  width:12px; height:12px;
  transform:rotate(45deg);
  background:var(--ink);
  box-shadow:inset 0 0 0 2px rgba(176,131,34,.45);
  transition:background .45s ease, box-shadow .45s ease;
}
/* Lights as the stage arrives, so the rail reads as being travelled. */
.tl-step.in::before{
  background:var(--gold-lt);
  box-shadow:inset 0 0 0 2px var(--gold-lt);
}
/* Her closing line, given the same weight the calendar's closing line gets
   on the home page — it is the sentence she wrote to explain the firm. It sits
   in the prose column so it shares a left edge with the stages above it. */
.story-close{
  margin:clamp(2.25rem, 4vw, 3.5rem) 0 0;
  /* Same indent the stages carry, so every line of prose in this column starts
     on one edge — the closing statement included. */
  padding:clamp(1.5rem, 2.6vw, 2.1rem) 0 0 clamp(1.5rem, 2.6vw, 2.5rem);
  border-top:2px solid var(--gold);
  max-width:none;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.4rem, 2.6vw, 2.4rem);
  line-height:1.28;
  letter-spacing:-.018em;
  color:#F4EFE4;
}
.story-close em{ font-style:italic; color:var(--gold-lt); }

/* ── About: portrait and credentials ────────────────────── */
/* Mirror of the home page's meet block — copy in the measure on the left,
   portrait taking the slack on the right — so the two pages do not open the
   same section twice in the same direction. */
.profile{
  background:var(--paper);
  padding-block:clamp(3.5rem, 7vw, 6rem);
}
/* `stretch`, not `start`: the portrait takes its height from the copy beside it
   rather than setting the row height itself. It used to force a 987px row
   against 466px of copy, leaving a 521px hole under the text — more empty
   paper than there was writing. */
.profile-grid{
  display:grid;
  grid-template-columns:minmax(0, var(--col-main)) 1fr;
  gap:var(--col-gap);
  align-items:stretch;
}
.profile-copy h2{
  margin:0 0 clamp(1.25rem, 2.2vw, 1.75rem);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2rem, 3.3vw, 3.1rem);
  line-height:1.1;
  letter-spacing:-.022em;
  color:var(--ink);
}
.profile-copy p{
  margin:0 0 1.15rem;
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.72;
  color:var(--ink-soft);
}
.profile-copy p:last-child{ margin-bottom:0; }
.profile-lead{
  color:var(--brown) !important;
  font-size:clamp(1.05rem, 1.15vw, 1.125rem) !important;
}
.profile-figure{
  position:relative;
  margin:0;                    /* <figure> ships a UA margin of 1em 40px */
  height:100%;
  /* Guard for viewports where the copy runs short — without it the frame can
     letterbox down to a sliver. */
  min-height:clamp(300px, 30vw, 480px);
  overflow:hidden;
}
.profile-figure picture{ display:block; height:100%; }
.profile-figure img{
  width:100%; height:100%;
  object-fit:cover;
  /* Holds her face and the sign as the frame's proportions change with the
     copy. The source is the landscape original, so a wide box crops the room,
     not her head. */
  object-position:34% 32%;
}
/* meet-b is the portrait-oriented file (960x1200), narrower than the wide
   landscape crop this position was tuned for. In a box wider than the
   source, cover scales to the box width, so the overflow is cropped
   top/bottom rather than left/right — a low Y keeps her face in frame and
   lets the crop take the room below her shoulders instead. */
.profile-figure-portrait img{ object-position:50% 18%; }
/* The old wide image (1195x797, ~3:2) contributed a modest intrinsic height
   to the grid row's auto-sizing at typical column widths. This one is
   960x1200, ~4:5, so at the same column width its own aspect ratio pushes
   the row (and the stretched copy column beside it) to roughly 900px, well
   past what three paragraphs need. Matching it exactly to the copy's height
   (the first fix) still left a photo that dominated the section — taller
   than anything else on the page in this kind of supporting-bio spot. Sized
   down for real now, and centred rather than stretched, so it sits beside
   the text as a smaller companion image instead of trying to fill the row. */
.profile-figure-portrait{
  align-self:center;
  justify-self:center;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:4/5;
  width:min(100%, 30rem);
}
/* Caption sits on the image as a plate. It used to repeat the section's own
   <h2> word for word — "Deborah Gonzalez, EA" directly beside a heading
   reading "Deborah Gonzalez, EA" — so the name has come out and only the role
   remains. */
.profile-figure figcaption{
  position:absolute;
  left:0; bottom:0;
  padding:.7rem clamp(1rem, 1.6vw, 1.35rem);
  background:var(--ink);
  border-left:3px solid var(--gold);
  font-family:var(--mono);
  font-size:.6875rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase;
  color:#F4EFE4;
}

/* The bordered panel her markup asked for. No organisation logos, because
   logos would mean linking out, which she ruled out for the whole site. */
.creds{
  margin-top:clamp(2.5rem, 4.5vw, 4rem);
  border:1px solid var(--rule-hi);
  background:#FBF7EE;
}
.creds-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.4rem 1.5rem; flex-wrap:wrap;
  padding:1rem clamp(1.25rem, 2.4vw, 2rem);
  background:var(--ink);
}
.creds-head h3{
  margin:0;
  font-family:var(--sans);
  font-size:.75rem; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:#fff;
}
.creds-head .stamp{
  margin:0;
  font-family:var(--mono);
  font-size:.75rem; letter-spacing:.04em;
  color:var(--gold-lt);
}
.creds-grid{
  margin:0; padding:0; list-style:none;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
}
.creds-grid li{
  display:flex; align-items:flex-start; gap:.85rem;
  padding:clamp(1.1rem, 2vw, 1.5rem) clamp(1.25rem, 2.4vw, 2rem);
  border-left:1px solid var(--rule);
  border-top:1px solid var(--rule);
  font-size:.9375rem;
  line-height:1.55;
  color:var(--ink);
}
.creds-grid li:nth-child(-n+3){ border-top:0; }
.creds-grid li:nth-child(3n+1){ border-left:0; }
.creds-grid li::before{
  content:"";
  flex:0 0 auto;
  width:7px; height:7px; margin-top:.45rem;
  background:var(--gold);
  transform:rotate(45deg);
}

/* ── About: how we work ─────────────────────────────────── */
/* Four ruled rows rather than four cards: the home page already spends its
   card grid on the services, and repeating that shape here is what makes a
   site read as assembled from one component. Label in the slack column,
   paragraph in the reading measure. */
.principles{
  background:var(--ink);
  color:var(--band-tx);
  padding-block:clamp(3.5rem, 7vw, 6rem);
}
.principles-head{ margin-bottom:clamp(2rem, 3.5vw, 3rem); }
/* Two-up quadrants divided by a brass cross. Was four full-width rows with the
   label in the slack column — which left roughly 500px of nothing between a
   two-word label and the paragraph it belonged to, four times over, and made
   this section read as the same device as the timeline above it. */
.principles-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:2px solid var(--gold);
}
.principle{
  position:relative;
  padding-block:clamp(1.75rem, 3vw, 2.75rem);
}
/* Padding is applied inwards only, so the outer edges still sit on the page's
   shared inset rather than indenting away from every other section. */
.principle:nth-child(odd){ padding-right:clamp(2rem, 4vw, 4rem); }
.principle:nth-child(even){ padding-left:clamp(2rem, 4vw, 4rem); }

/* The cross is drawn with pseudo-elements rather than borders so it can rule
   itself in — a border cannot be scaled. Visible by default; the hidden state
   lives inside the motion query below, so no-JS and reduced-motion visitors
   still get the full grid. */
.principle::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:rgba(176,131,34,.28);
  transform-origin:left center;
}
.principle:nth-child(even)::before{
  content:'';
  position:absolute; left:0; top:0; bottom:0; width:1px;
  background:rgba(176,131,34,.28);
  transform-origin:center top;
}
@media (prefers-reduced-motion: no-preference){
  .js .principle::after{
    transform:scaleX(0);
    transition:transform .95s cubic-bezier(.72, 0, .22, 1);
    transition-delay:calc(var(--i, 0) * 70ms + 140ms);
  }
  .js .principle:nth-child(even)::before{
    transform:scaleY(0);
    transition:transform .8s cubic-bezier(.72, 0, .22, 1);
    transition-delay:calc(var(--i, 0) * 70ms + 90ms);
  }
  .js .principle.in::after{ transform:scaleX(1); }
  .js .principle.in:nth-child(even)::before{ transform:scaleY(1); }
}
.principle h3{
  margin:0 0 clamp(.7rem, 1.2vw, 1rem);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.35rem, 2.1vw, 1.9rem);
  line-height:1.2;
  letter-spacing:-.018em;
  color:var(--gold-lt);
}
.principle p{
  margin:0;
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.75;
  color:var(--band-tx);
}

/* ── About: clients here and abroad ─────────────────────── */
.reach{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  padding-block:clamp(3.5rem, 7vw, 6rem);
}
.reach-grid{
  display:grid;
  grid-template-columns:minmax(0, var(--col-main)) 1fr;
  gap:var(--col-gap);
  /* `stretch`, not `start`: the figures distribute over the copy's full height
     instead of stopping 254px short of it. */
  align-items:stretch;
}
.reach-copy h2{
  margin:0 0 clamp(1.25rem, 2.2vw, 1.75rem);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.9rem, 3.1vw, 3rem);
  line-height:1.14;
  letter-spacing:-.02em;
  color:var(--ink);
}
.reach-copy p{
  margin:0 0 1.15rem;
  font-size:clamp(1rem, 1.05vw, 1.0625rem);
  line-height:1.72;
  color:var(--ink-soft);
}
.reach-close{
  margin:clamp(1.75rem, 3vw, 2.25rem) 0 0 !important;
  padding-top:1.35rem;
  border-top:1px solid var(--rule-hi);
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.15rem, 1.7vw, 1.45rem) !important;
  line-height:1.4;
  color:var(--brown) !important;
}
/* Three figures in a stack rather than a band across the page: the home page
   already runs a four-across credential band, and this is the same idea at a
   different scale, in the light palette, reading down instead of across. */
/* Spread down the column so the three figures answer the copy's height exactly
   — the section's only real defect was 254px of paper under them. */
.reach-figures{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-top:2px solid var(--gold);
}
.reach-fig{
  /* Label sits under its numeral rather than beside it, which lets the numeral
     carry real weight instead of being a small figure with a caption tacked on
     the end of a 713px row. */
  display:block;
  padding:clamp(1.1rem, 2vw, 1.6rem) 0;
  border-bottom:1px solid var(--rule-hi);
}
.reach-fig:last-child{ border-bottom:0; }
.reach-num{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(3rem, 5.4vw, 4.75rem);
  line-height:.92;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  color:var(--brown);
}
.reach-label{
  display:block;
  margin-top:.5rem;
  font-size:.75rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.5;
  color:#8A8175;
}

/* ── Inner pages: responsive ────────────────────────────── */
@media (max-width: 900px){
  .page-head-grid{
    grid-template-columns:1fr;
    gap:clamp(1.75rem, 4vw, 2.5rem);
    align-items:start;
  }
  .page-head-deck{ padding-bottom:0; }
  /* Stacked, the headline is narrower, so the mark comes in with it and the
     gaps tighten — it still bleeds, and the title still crosses it. */
  .head-mark{
    left:calc((var(--inset) + 1rem) * -1);
    width:min(84vw, 470px);
    gap:5px;
  }
  .head-meta{ max-width:none; }

  /* Numeral moves above the body instead of beside it — a 6rem number
     column left nothing but a squeezed line for the heading at phone width. */
  .svc-row{ grid-template-columns:1fr; gap:1rem; }
  .svc-row-thumb{ width:7.5rem; height:7.5rem; }
  .svc-rail{ display:none; }

  /* minmax(0,1fr), not a bare 1fr: a bare 1fr track still carries its
     children's min-content floor, and a long unbroken checklist line was
     forcing the single stacked column wider than the viewport. */
  .checklist-grid{ grid-template-columns:minmax(0, 1fr); }
  .changelog-item{ grid-template-columns:minmax(0, 1fr); gap:.35rem; }

  /* The timeline already reads as a single left-rail thread at every width, so
     stacking only needs the heading to stop pinning and the gaps to tighten. */
  .story-layout{ grid-template-columns:1fr; gap:clamp(1.75rem, 4vw, 2.5rem); }
  .story-head{ position:static; top:auto; }
  .timeline{ gap:clamp(1.75rem, 4.5vw, 2.5rem); }
  .tl-step{ padding-left:clamp(1.35rem, 5vw, 2rem); }

  .profile-grid{ grid-template-columns:1fr; gap:clamp(2rem, 5vw, 2.75rem); }
  /* Stacked there is no copy beside it to take height from, so the frame goes
     back to its own proportions and runs the full column. The old 420px cap
     was for the portrait crop and would strand this wide one in the corner. */
  .profile-figure{
    max-width:none;
    height:auto;
    min-height:0;
    aspect-ratio:3/2;
  }
  /* The 3:2 above was tuned for the old wide crop's own proportions. This
     portrait source is 4:5 (same as Home's meet-figure use of the same
     file) — forcing it into 3:2 here cropped away most of her, leaving
     mostly sign and wall around a small sliver of face. */
  .profile-figure-portrait{ aspect-ratio:4/5; }

  /* Two-up: the first-row and first-column resets have to be restated for
     the new column count or stray hairlines are left doubled. */
  .creds-grid{ grid-template-columns:repeat(2, 1fr); }
  .creds-grid li:nth-child(-n+3){ border-top:1px solid var(--rule); }
  .creds-grid li:nth-child(3n+1){ border-left:1px solid var(--rule); }
  .creds-grid li:nth-child(-n+2){ border-top:0; }
  .creds-grid li:nth-child(odd){ border-left:0; }

  /* Stacked: one column, so the dividing rule and the inward padding both go
     and every item measures off the page inset again. */
  .principles-list{ grid-template-columns:1fr; }
  .principle:nth-child(odd){ padding-right:0; }
  .principle:nth-child(even){ padding-left:0; }
  .principle:nth-child(even)::before{ content:none; }

  .reach-grid{ grid-template-columns:1fr; gap:clamp(2rem, 5vw, 2.75rem); }
  /* Stacked there is no copy height to answer, so the figures go back to their
     natural spacing and the last rule comes back to close the list. */
  .reach-figures{ display:block; }
  .reach-fig:last-child{ border-bottom:1px solid var(--rule-hi); }
}
@media (max-width: 620px){
  .creds-grid{ grid-template-columns:1fr; }
  .creds-grid li{ border-left:0; border-top:1px solid var(--rule); }
  .creds-grid li:first-child{ border-top:0; }

  /* The label column no longer fits beside its value at phone widths. */
  .head-meta-row{
    grid-template-columns:1fr;
    gap:.2rem;
    padding:.62rem 0;
  }
}