/* ============================================================
   Murphy & Murphy Counseling — stylesheet

   Structure is deliberate and documented. Everything a
   re-skin needs to change is in the token block below. If you find
   yourself editing a rule further down to change a color or a face, add
   a token instead. Pages carry no hand-placed colors.

   PALETTE (client brief, 20 Sep 2026): near-black and ONE accent. The
   accent is the warm taupe from his own brand pack — deliberately
   unsaturated (hard no #7: no bright or saturated colors). Light mode
   is a warm cream page with near-black type; dark mode is the inverse.
   The hero and the closing band are near-black in BOTH modes — that is
   the brand, not a theme.

   FONTS: self-hosted, never a CDN (CSP font-src 'self' enforces it).
   See fonts/README.md for provenance.
   ============================================================ */

@font-face{
  font-family:'Playfair Display';
  font-style:normal; font-weight:400 900; font-display:swap;
  src:url('/assets/fonts/playfair-display-latin-var.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display';
  font-style:italic; font-weight:400 900; font-display:swap;
  src:url('/assets/fonts/playfair-display-latin-var-italic.woff2') format('woff2');
}

:root{
  color-scheme:light dark;

  /* --- surfaces --- */
  --ground:light-dark(#F3EFE8,#101010);
  --ground-2:light-dark(#EAE5DC,#161616);
  --surface:light-dark(#FBF9F5,#1A1A1A);
  --surface-2:light-dark(#F3EFE8,#202020);
  --line:light-dark(#D8D1C4,#2E2C29);
  --line-soft:light-dark(#E4DED3,#232221);

  /* --- text --- */
  --text:light-dark(#141414,#F3EFE8);
  --text-2:light-dark(#3A3733,#CFC9BF);
  --muted:light-dark(#655F57,#9A938A);

  /* --- the near-black. Buttons and the wordmark use it; in dark mode it
         becomes cream so a solid button still reads as solid. --- */
  --ink:light-dark(#121212,#F3EFE8);
  --ink-text:light-dark(#F3EFE8,#121212);

  /* --- accent: the ONE color. Warm taupe, measured >= 4.5:1 as text on
         every light surface it sits on (5.79 on --ground, 5.29 on
         --ground-2). --- */
  --accent:light-dark(#6A5A47,#C4B6A0);
  --accent-2:light-dark(#4F4335,#D6CBB8);
  --accent-soft:light-dark(#E9E2D6,#24211D);
  --accent-ink:light-dark(#F3EFE8,#121212);

  /* --- the band: near-black in both modes --- */
  --band:#111111;
  --band-2:#181818;
  --band-text:#F3EFE8;
  --band-text-2:#D9D3C8;
  --band-muted:#B5AEA3;
  --band-line:#2C2A27;
  --band-accent:#B9AB95;       /* taupe as a fill: button on the band */
  --band-accent-2:#C9BCA7;
  --band-accent-ink:#111111;   /* 8.4:1 on --band-accent */

  --focus:light-dark(#1B5FB0,#7FB2F0);
  --shadow:light-dark(rgba(20,20,20,.08),rgba(0,0,0,.5));

  /* --- type --- */
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* --- metrics --- */
  --measure:62ch;
  --pad:clamp(20px,5vw,56px);
  --maxw:1180px;
  --radius:2px;                /* the brand is square-cornered */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--ground);
}

body{
  margin:0;
  background:var(--ground);
  color:var(--text-2);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

::selection{background:var(--accent);color:var(--accent-ink)}

/* ---------- focus: visible, always ----------
   Never remove this without replacing it. Keyboard users navigate by it. */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
  border-radius:3px;
}

main:focus{outline:none}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  color:var(--text);
  font-weight:400;
  line-height:1.12;
  margin:0;
  letter-spacing:-.005em;
}
h1{font-size:clamp(36px,5.2vw,62px)}
h2{font-size:clamp(28px,3.6vw,42px)}
h3{font-size:clamp(20px,2.2vw,24px)}
h4{font-size:15px;font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* Short paragraphs are a client decision (hard no #4). The measure is
   narrow on purpose so a long paragraph looks long while it is written. */
p{margin:0 0 18px;max-width:var(--measure)}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-2)}
img{max-width:100%;height:auto;display:block}
hr{border:0;border-top:1px solid var(--line);margin:44px 0}
strong{color:var(--text);font-weight:600}

.cp-eyebrow{
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0;
}
.cp-lede{
  font-size:clamp(18px,2vw,21px);
  line-height:1.6;
  color:var(--text-2);
  max-width:54ch;
}
.cp-rule{
  width:56px;height:1px;
  background:var(--accent);
  border:0;margin:22px 0 0;
}

/* ---------- layout ---------- */
.cp-shell{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.cp-sec{padding-block:clamp(56px,8vw,104px)}
.cp-sec + .cp-sec{border-top:1px solid var(--line-soft)}
.cp-sec-tight{padding-block:clamp(36px,5vw,64px)}

/* ---------- the band: near-black, both modes ---------- */
.cp-band{
  background:var(--band);
  color:var(--band-text-2);
  border-top:0 !important;
}
.cp-band h1,.cp-band h2,.cp-band h3{color:var(--band-text)}
.cp-band p{color:var(--band-text-2)}
.cp-band .cp-lede{color:var(--band-text-2)}
.cp-band .cp-eyebrow{color:var(--band-accent)}
.cp-band .cp-rule{background:var(--band-accent)}
.cp-band a{color:var(--band-accent-2)}
.cp-band a:hover{color:var(--band-text)}
.cp-band ::selection{background:var(--band-accent);color:var(--band-accent-ink)}
.cp-band .cp-btn{background:var(--band-accent);border-color:var(--band-accent);color:var(--band-accent-ink)}
.cp-band .cp-btn:hover{background:var(--band-accent-2);border-color:var(--band-accent-2);color:var(--band-accent-ink)}
.cp-band .cp-btn.is-ghost{background:none;border-color:var(--band-muted);color:var(--band-text)}
.cp-band .cp-btn.is-ghost:hover{background:var(--band-2);color:var(--band-text)}
.cp-band + .cp-sec{border-top:0}
.cp-band + .cp-band{border-top:1px solid var(--band-line) !important}

/* ---------- skip link ---------- */
.cp-skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--ink);
  color:var(--ink-text);
  padding:12px 20px;
  font-weight:600;
  text-decoration:none;
}
.cp-skip:focus{left:0}

/* ---------- nav ---------- */
.cp-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:color-mix(in srgb,var(--ground) 90%,transparent);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.cp-nav-in{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:12px var(--pad);
  display:flex;
  align-items:center;
  gap:20px;
}

/* The wordmark. Typographic on purpose: the client's logo exists only as
   a raster on a black square (no vector on file, intake). A monogram set
   in the display face is crisp at every size the nav uses; the real mark
   goes in the footer where its black plate matches the band. Budget the
   vector redraw — see the build notes. */
.cp-mark{
  color:var(--text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
}
.cp-mark:hover{color:var(--text)}
.cp-mono{
  font-family:var(--display);
  font-size:30px;
  line-height:1;
  letter-spacing:-.06em;
  font-weight:500;
}
.cp-mono i{font-style:italic;font-weight:400;margin:0 -.02em}
.cp-markname{
  display:flex;flex-direction:column;
  font-family:var(--sans);
  line-height:1.15;
  padding-left:12px;
  border-left:1px solid var(--line);
}
.cp-markname b{font-weight:600;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase}
.cp-markname span{font-weight:400;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
@media (max-width:420px){.cp-markname{display:none}}

.cp-nav-links{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:24px;
}
.cp-nav-links a{
  color:var(--text-2);
  text-decoration:none;
  font-size:14.5px;
  letter-spacing:.02em;
}
.cp-nav-links a:hover,
.cp-nav-links a[aria-current="page"]{color:var(--text)}
.cp-nav-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:7px;text-decoration-color:var(--accent)}

.cp-nav-cta{
  background:var(--ink);
  color:var(--ink-text) !important;
  padding:10px 18px;
  border:1px solid var(--ink);
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12.5px !important;
  font-weight:600;
}
.cp-nav-cta:hover{background:transparent;color:var(--text) !important}

.cp-burger{
  display:none;
  margin-left:auto;
  background:none;
  border:1px solid var(--line);
  color:var(--text);
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.14em;
  padding:9px 14px;
  cursor:pointer;
}

@media (max-width:920px){
  .cp-burger{display:block}
  .cp-nav-links{
    display:none;
    position:absolute;
    inset:100% 0 auto 0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:8px var(--pad) 20px;
  }
  .cp-nav-links.is-open{display:flex}
  .cp-nav-links a{padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:16px}
  .cp-nav-cta{margin-top:14px;text-align:center;border-bottom:0 !important}
}

/* ---------- buttons ---------- */
.cp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--ink);
  color:var(--ink-text);
  border:1px solid var(--ink);
  padding:14px 26px;
  font:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.cp-btn:hover{background:transparent;color:var(--text);border-color:var(--ink)}
.cp-btn.is-ghost{background:none;color:var(--text);border-color:var(--line)}
.cp-btn.is-ghost:hover{border-color:var(--ink)}

.cp-arrow{
  width:16px;height:16px;flex:none;
  stroke:currentColor;fill:none;stroke-width:1.6;
}

/* ---------- hero: split ----------
   Words one side, one photograph the other (client's choice). The photo
   panel is 3:4 and now carries the real portrait (22 Sep 2026); the design
   leans on that photograph, so do not compensate with decoration. */
.cp-hero{
  padding-block:clamp(40px,6vw,72px) 0;
}
.cp-split{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,72px);
  align-items:end;
}
.cp-hero-copy{padding-bottom:clamp(44px,7vw,96px)}
.cp-hero h1{margin-top:20px;max-width:15ch}
.cp-hero .cp-lede{margin-top:26px}
.cp-hero-acts{
  margin-top:34px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.cp-hero-note{
  margin-top:26px;
  font-size:14px;
  color:var(--band-muted);
  max-width:46ch;
}
.cp-portrait{
  position:relative;
  aspect-ratio:3/4;
  width:100%;
  max-width:520px;
  margin-inline:auto;
  overflow:hidden;
  background:var(--band-2);
}
/* <picture> is display:contents so the <img> keeps .cp-portrait as its
   containing block — otherwise height:100% resolves against the inline
   <picture>, becomes auto, and the cover crop silently stops working.

   object-position is biased right on purpose. Both portraits were shot
   against the practice's wall sign, which sits at the right of a 5:6 frame,
   and the desktop panel is a narrower 3:4. A centered crop clips the last
   letter of the name off the sign behind them. */
.cp-portrait picture{display:contents}
.cp-portrait img{width:100%;height:100%;object-fit:cover;object-position:right center}
/* hairline frame, inset — the brand's corner marks */
.cp-portrait::after{
  content:"";
  position:absolute;inset:14px;
  border:1px solid rgba(243,239,232,.22);
  pointer-events:none;
}
@media (max-width:860px){
  .cp-split{grid-template-columns:1fr;align-items:start}
  .cp-hero-copy{padding-bottom:0}
  .cp-portrait{max-width:none;aspect-ratio:4/5;margin-top:6px}
  .cp-hero{padding-bottom:0}
}

/* ---------- the strip under the hero: who we see ---------- */
.cp-strip{
  border-bottom:1px solid var(--line-soft);
}
.cp-strip-in{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:18px var(--pad);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 26px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}
.cp-strip-in span + span::before{
  content:"";
  display:inline-block;
  width:4px;height:4px;
  background:var(--accent);
  margin-right:26px;
  vertical-align:middle;
}
@media (max-width:600px){
  .cp-strip-in{gap:8px 18px;font-size:12px}
  .cp-strip-in span + span::before{margin-right:18px}
}

/* ---------- page header (inner pages) ---------- */
.cp-page-head{
  padding-block:clamp(48px,7vw,88px);
  border-bottom:1px solid var(--line-soft);
  background:var(--ground-2);
}
.cp-page-head h1{margin-top:16px;max-width:18ch}
.cp-page-head .cp-lede{margin-top:22px}

/* ---------- section headings ---------- */
.cp-head{margin-bottom:clamp(28px,4vw,44px)}
.cp-head h2{margin-top:14px;max-width:22ch}
.cp-head .cp-lede{margin-top:16px}
.cp-head.is-center{text-align:center}
.cp-head.is-center h2,.cp-head.is-center .cp-lede,.cp-head.is-center p{margin-inline:auto}
.cp-head.is-center .cp-rule{margin-inline:auto}

/* ---------- cards ---------- */
.cp-grid{
  display:grid;
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.cp-card{
  background:var(--surface);
  padding:30px 28px 28px;
}
.cp-card h3{margin-bottom:12px}
.cp-card p{font-size:16px}
.cp-card p:last-child{margin-bottom:0}
.cp-card .cp-eyebrow{margin-bottom:14px}
.cp-card-link{
  display:inline-block;
  margin-top:8px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
}

/* ---------- services grid (five across, like his mockup) ---------- */
.cp-services{
  display:grid;
  gap:1px;
  background:var(--line);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.cp-service{
  background:var(--ground);
  padding:30px 22px;
  text-align:center;
}
.cp-service h3{font-size:17px;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);font-weight:600;margin:16px 0 10px;line-height:1.35}
.cp-service p{font-size:15px;margin:0 auto;max-width:26ch;color:var(--muted)}
.cp-icon{
  width:56px;height:56px;
  margin:0 auto;
  border-radius:50%;
  border:1px solid var(--accent);
  display:grid;place-items:center;
  color:var(--accent);
}
.cp-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- numbered list (process, services page) ---------- */
.cp-list{list-style:none;margin:0;padding:0;counter-reset:cp}
.cp-list > li{
  counter-increment:cp;
  position:relative;
  border-top:1px solid var(--line);
  padding:28px 0 28px 72px;
}
.cp-list > li:last-child{border-bottom:1px solid var(--line)}
.cp-list > li::before{
  content:counter(cp,decimal-leading-zero);
  position:absolute;
  left:0;top:30px;
  font-family:var(--display);
  font-size:22px;
  color:var(--accent);
  letter-spacing:.02em;
}
.cp-list h2,.cp-list h3{margin-bottom:10px}
.cp-list h2{font-size:clamp(22px,2.6vw,28px)}
.cp-list p:last-child{margin-bottom:0}
@media (max-width:520px){.cp-list > li{padding-left:52px}}

/* ---------- two-column prose (facts beside text) ---------- */
.cp-cols{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(32px,6vw,88px);
  align-items:start;
}
@media (max-width:860px){.cp-cols{grid-template-columns:1fr}}
.cp-facts{
  border-top:1px solid var(--line);
  margin:0;padding:0;list-style:none;
}
.cp-facts li{
  border-bottom:1px solid var(--line);
  padding:16px 0;
  display:grid;
  grid-template-columns:minmax(0,9ch) minmax(0,1fr);
  gap:16px;
  font-size:15.5px;
}
.cp-facts dt,.cp-facts b{
  font-family:var(--sans);
  font-weight:600;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  padding-top:3px;
}
.cp-facts span{color:var(--text-2)}

/* ---------- pull quote ---------- */
.cp-quote{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.25;
  color:var(--band-text);
  max-width:20ch;
  margin:0;
}
.cp-quote::before{
  content:"\201C";
  display:block;
  font-size:2em;
  line-height:.6;
  color:var(--band-accent);
  margin-bottom:.2em;
}
.cp-quote-by{
  margin-top:22px;
  font-size:12.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--band-muted);
}

/* ---------- money line: direct, set apart ---------- */
.cp-plain{
  border-left:2px solid var(--accent);
  padding:6px 0 6px 22px;
  margin:28px 0;
}
.cp-plain p{margin:0;color:var(--text)}
.cp-plain p + p{margin-top:8px;color:var(--text-2);font-size:15.5px}
.cp-band .cp-plain{border-color:var(--band-accent)}
.cp-band .cp-plain p{color:var(--band-text)}
.cp-band .cp-plain p + p{color:var(--band-text-2)}

/* ---------- forms ---------- */
.cp-form{max-width:560px}
.cp-field{margin-bottom:22px}
.cp-field label{
  display:block;
  font-size:14.5px;
  font-weight:600;
  color:var(--text);
  margin-bottom:7px;
}
.cp-field .cp-hint{
  display:block;
  font-size:13.5px;
  color:var(--muted);
  margin-top:-3px;
  margin-bottom:8px;
}
.cp-field input,
.cp-field select,
.cp-field textarea{
  width:100%;
  font:inherit;
  font-size:16px;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:13px 14px;
}
.cp-field textarea{min-height:120px;resize:vertical}
.cp-field input:focus,
.cp-field select:focus,
.cp-field textarea:focus{border-color:var(--accent)}
.cp-fieldset{border:0;padding:0;margin:0 0 22px}
.cp-fieldset legend{font-size:14.5px;font-weight:600;color:var(--text);margin-bottom:10px;padding:0}
.cp-choices{display:flex;flex-wrap:wrap;gap:10px}
.cp-choices label{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);
  background:var(--surface);
  padding:9px 14px;
  font-size:15px;
  color:var(--text-2);
  cursor:pointer;
}
.cp-choices input{accent-color:var(--accent);margin:0}
.cp-choices label:has(input:checked){border-color:var(--accent);color:var(--text)}

/* Inline validation: on blur, not on load. :user-invalid (not :invalid)
   so a form does not open covered in red before anyone has typed. The
   error text is tied with aria-describedby and announced by the aria-live
   region site.js manages. */
.cp-field input:user-invalid,
.cp-field select:user-invalid,
.cp-field textarea:user-invalid{border-color:light-dark(#9B2C2C,#F0A0A0)}
.cp-field input:user-valid,
.cp-field select:user-valid{border-color:var(--accent)}
.cp-error{
  display:none;
  font-size:13.5px;
  color:light-dark(#9B2C2C,#F0A0A0);
  margin-top:7px;
}
.cp-field:has(:user-invalid) .cp-error{display:block}
.cp-form-summary{
  display:none;
  border:1px solid light-dark(#9B2C2C,#F0A0A0);
  padding:14px 18px;
  margin-bottom:22px;
  font-size:15px;
}
.cp-form-summary.is-on{display:block}
.cp-form-summary a{color:inherit}

/* honeypot — hidden from people, not from bots. Never display:none:
   some bots skip those. Off-screen and out of the tab order. */
.cp-hp{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

.cp-form-note{
  font-size:14px;
  color:var(--muted);
  max-width:52ch;
  margin-top:18px;
}

/* ---------- action bar (sticky, mobile) ---------- */
.cp-actionbar{
  position:fixed;
  inset:auto 0 0 0;
  z-index:90;
  display:none;
  gap:10px;
  /* safe-area: without this the bar sits under the iPhone home indicator. */
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--ground) 94%,transparent);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.cp-actionbar .cp-btn{flex:1;justify-content:center;padding:14px 12px;letter-spacing:.08em;white-space:nowrap}
.cp-bar-tel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:50px;
  border:1px solid var(--ink);
  color:var(--text);
  flex:none;
}
@media (max-width:700px){
  .cp-actionbar{display:flex}
  /* Must clear .cp-actionbar — measured 79px on 19 Sep — plus the safe
     area. It was 78px: one pixel short, which put footer links under it. */
  body{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
}

/* ---------- footer: on the band ---------- */
.cp-foot{
  background:var(--band);
  color:var(--band-text-2);
  padding-block:60px 30px;
  border-top:1px solid var(--band-line);
}
.cp-foot-grid{
  display:grid;
  gap:40px;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
}
@media (max-width:900px){.cp-foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cp-foot-grid{grid-template-columns:1fr}}
.cp-foot-logo{width:150px;height:auto}
.cp-foot p{color:var(--band-muted)}
/* Footer section headings are h2, not h4 — they follow the page's h1/h2
   with nothing between, and a screen reader navigating by heading level
   should not hit a phantom gap. The small-caps look is the class's job,
   not the tag's. */
.cp-foot-h{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--band-muted);
  margin:0 0 16px;
}
.cp-foot-links{display:flex;flex-direction:column;gap:10px}
.cp-foot-links a,
.cp-foot-legal a{
  color:var(--band-text-2);
  text-decoration:none;
  font-size:14.5px;
}
.cp-foot-links a:hover,
.cp-foot-legal a:hover{color:var(--band-text);text-decoration:underline}
.cp-foot-legal{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px}
.cp-foot-bot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  margin-top:48px;
  padding-top:22px;
  border-top:1px solid var(--band-line);
  font-size:13px;
  color:var(--band-muted);
}
.cp-foot-tag{
  font-family:var(--display);
  font-style:italic;
  color:var(--band-text);
  font-size:18px;
}

/* ---------- legal / statement pages read like articles ---------- */
.cp-prose{max-width:var(--measure)}
.cp-prose h2{margin:44px 0 16px}
.cp-prose h3{margin:30px 0 12px}
.cp-prose h2:first-child{margin-top:0}
.cp-prose ul,.cp-prose ol{padding-left:22px;margin:0 0 18px;max-width:var(--measure)}
.cp-prose li{margin-bottom:9px}
.cp-prose table{
  border-collapse:collapse;
  width:100%;
  margin:22px 0;
  font-size:15px;
}
.cp-prose th,.cp-prose td{
  border:1px solid var(--line);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}
.cp-prose th{background:var(--surface-2);font-weight:600;color:var(--text)}
/* wide tables scroll rather than breaking the page */
.cp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.cp-callout{
  border-left:2px solid var(--accent);
  background:var(--accent-soft);
  padding:18px 22px;
  margin:26px 0;
}
.cp-callout p:last-child{margin-bottom:0}

.cp-updated{font-size:13.5px;color:var(--muted);letter-spacing:.04em}

/* ---------- 404 ---------- */
.cp-404{padding-block:clamp(70px,13vw,150px)}

/* ---------- scroll reveal ----------
   Gated on .js, which a one-line inline script in <head> adds to <html>.
   If JavaScript is off, blocked, or site.js fails to load, this rule never
   applies and the content is simply visible. Hiding content by default and
   relying on script to reveal it is how a broken deploy becomes a blank
   page — do not remove the .js prefix. */
.js .cp-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .cp-reveal.is-in{opacity:1;transform:none}

/* ---------- reduced motion ----------
   Respected, not merely acknowledged. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .cp-reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- forced colors (Windows high contrast) ---------- */
@media (forced-colors:active){
  .cp-btn,.cp-nav-cta{border:1px solid ButtonText}
  .cp-card,.cp-service,.cp-field input,.cp-field select,.cp-field textarea{border:1px solid CanvasText}
  .cp-portrait::after{border-color:CanvasText}
}

/* ---------- print ---------- */
@media print{
  .cp-nav,.cp-actionbar,.cp-skip,.cp-hero-acts{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  .cp-band,.cp-foot{background:#fff;color:#000}
  .cp-band h1,.cp-band h2,.cp-quote{color:#000}
  .cp-reveal{opacity:1;transform:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}