/* ==========================================================================
   TRIVEDI LEGAL
   Layout and motion transcribed from the reference build; palette, typeface,
   photography and copy are this practice's own.

   Reference grid at 1440: 176px gutters, 1088px content column.
   ========================================================================== */

/* ---------- fonts (self-hosted, work from file://) ---------------------- */
@font-face {
  font-family: "GeneralSans";
  src: url("../fonts/generalsans.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "GeneralSans";
  src: url("../fonts/generalsans-italic.woff2") format("woff2-variations");
  font-weight: 200 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "JetMono";
  src: url("../fonts/jetmono.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-display: swap;
}

/* ---------- tokens ------------------------------------------------------ */
:root {
  --paper:    #eef2f8;         /* the light ground, cooled toward the accent */
  --ink:      #141b26;         /* blue-black text on paper — 15.4:1 */
  --ink-mute: #5a6678;         /* 5.2:1 */
  --ink-faint:#5c6470;         /* 5.3:1 — the quiet label tone */
  --ink-hair: rgba(20, 27, 38, .14);

  /* The four "dark" bands are light blue. The token names are kept so every
     :is(.band--dark, .pcard) override in this sheet still resolves — they now
     read ink on blue instead of bone on navy. */
  --dark:   #d5e4f5;           /* the band surface: a clear step off the paper */
  --dark-2: #cadef3;
  --dark-3: #c0d8f1;
  --dark-4: #b6d2ef;           /* the deepest of the four process cards */
  --on-dark:       #10233a;                  /* 12.3:1 on --dark, 10.2:1 on --dark-4 */
  --on-dark-mute:  rgba(16, 35, 58, .72);    /* 5.5:1 / 5.0:1 */
  --on-dark-faint: rgba(16, 35, 58, .42);    /* graphics only */
  --on-dark-hair:  rgba(16, 35, 58, .18);

  --accent:      #6ba3de;      /* near-black on this is 7.1:1 */
  --accent-hi:   #86b6e6;      /* button hover */
  --accent-lift: #1d5490;      /* accent TEXT on the blue bands: 5.9:1 / 4.9:1 */
  --accent-ink:  #2a6099;      /* accent TEXT on paper: 5.8:1 */
  --on-accent:   #0c1a2e;      /* the label a light accent has to carry */
  --danger:      #a3271a;      /* form errors on paper: 6.5:1 */
  --ring:        rgba(107, 163, 222, .34);

  --display: "GeneralSans", "Helvetica Neue", Arial, sans-serif;
  --heavy:   "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --body:    "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --mono:    "JetMono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --circular:"Poppins", "Century Gothic", var(--body);   /* section eyebrows */

  --gut: clamp(20px, 12.22vw, 176px);
  --nav: 96px;
  --r-img: 24px;
  --r-band: 40px;

  --e-out: cubic-bezier(.16, .84, .32, 1);
  --e-in-out: cubic-bezier(.62, .02, .2, 1);
}

/* ---------- reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

/* Lenis drives the wheel; it keeps NATIVE scroll position, so position:sticky —
   the counsel rail and the process card stack — keeps working. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.6;
  letter-spacing: -.003em;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--accent); color: var(--on-accent);
  padding: 12px 18px; font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- layout ------------------------------------------------------ */
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gut); }

.band { position: relative; }
.band--paper { background: var(--paper); color: var(--ink); }
.band--dark {
  background: var(--dark); color: var(--on-dark);
  border-radius: var(--r-band) var(--r-band) 0 0;
}
.pad { padding-block: 120px; }

/* ---------- type -------------------------------------------------------- */
.label {
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
:is(.band--dark, .pcard) .label { color: var(--on-dark); }
.label--dim { font-weight: 400; letter-spacing: .12em; color: var(--ink-faint); }
:is(.band--dark, .pcard) .label--dim { color: var(--on-dark-mute); }
:is(.band--dark, .pcard) .label--lead { color: var(--accent-lift); }

/* Every section is introduced by this. Geometric and bold so it reads as a
   title rather than as more small-caps metadata like .label--dim. */
.label--lead {
  display: inline-block;
  color: var(--accent-ink);
  font-family: var(--circular);
  font-weight: 700;
  font-size: clamp(12px, 1vw, 13px);
  line-height: 1.2;
  letter-spacing: .09em;
}

.h1, .h2 {
  font-family: var(--display);
  font-weight: 500;
}
.h1 { font-size: clamp(30px, 7.4vw, 72px); line-height: .98; letter-spacing: -.035em; }
.h2 { font-size: clamp(25px, 5.4vw, 52px); line-height: 1.02; letter-spacing: -.03em; }
.em { font-style: italic; font-weight: 500; letter-spacing: -.02em; }
.dot { color: var(--accent); }
:is(.band--dark, .pcard) .dot { color: var(--accent-lift); }

.lead { font-size: clamp(17px, 1.32vw, 19px); line-height: 1.5; letter-spacing: -.005em; color: var(--ink-mute); }
:is(.band--dark, .pcard) .lead { color: var(--on-dark-mute); }
.body { font-size: 16.5px; line-height: 1.6; color: var(--ink-mute); }
:is(.band--dark, .pcard) .body { color: var(--on-dark-mute); }

/* ---------- buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 47px; padding: 0 26px;
  background: var(--accent); color: var(--on-accent);
  border-radius: 999px;
  font-weight: 600; font-size: 14.5px; letter-spacing: -.005em;
  transition: background .3s var(--e-out);
}
.btn:hover { background: var(--accent-hi); }
.btn .arr, .tlink .arr { flex: 0 0 auto; transition: transform .34s var(--e-out); }
.btn:hover .arr, .tlink:hover .arr { transform: translate(3px, -3px); }

/* the label cycles one line on hover, as the reference does with stacked copies */
.mq { display: block; height: 17.4px; overflow: hidden; }
.mq span { display: block; height: 17.4px; line-height: 17.4px; transition: transform .44s var(--e-in-out); }
.btn:hover .mq span, .tlink:hover .mq span { transform: translateY(-17.4px); }

.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink-hair); }
.btn--ghost:hover { background: rgba(20, 27, 38, .05); border-color: rgba(20, 27, 38, .32); }
.band--dark .btn--ghost { color: var(--on-dark); border-color: var(--on-dark-hair); }
.band--dark .btn--ghost:hover { background: rgba(16, 35, 58, .06); border-color: var(--on-dark-faint); }

.tlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 500; font-size: 14px; letter-spacing: -.005em;
}


/* ---------- loading screen ---------------------------------------------- */
/* Hidden unless JS is running, so with scripting off nothing ever covers the
   page. `is-loading` is set in the head, before first paint. */
.loader { display: none; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

html.js .loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--paper);
  transition: opacity .62s var(--e-out), visibility .62s;
}
html.js.is-loaded .loader { opacity: 0; visibility: hidden; pointer-events: none; }
html.is-loading { overflow: hidden; }

.loader__in { display: grid; justify-items: center; gap: 22px; padding: 24px; }
.loader__seal { width: 92px; height: 92px; object-fit: contain; animation: sealIn .8s var(--e-out) both; }
.loader__word {
  font-family: var(--heavy); font-weight: 700; font-size: 14px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  animation: sealIn .8s var(--e-out) .09s both;
}
.loader__bar {
  width: 168px; height: 2px; border-radius: 2px; overflow: hidden;
  background: var(--ink-hair);
  animation: sealIn .8s var(--e-out) .18s both;
}
.loader__bar i {
  display: block; width: 100%; height: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
}
@keyframes sealIn {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ---------- nav --------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav); display: flex; align-items: center;
  background: rgba(238, 242, 248, .82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  color: var(--ink);
  transition: background .45s var(--e-out), color .45s var(--e-out);
}
.nav.on-dark { background: rgba(213, 228, 245, .82); color: var(--on-dark); }
.nav__in { display: flex; align-items: center; gap: 30px; width: 100%; }
.nav__mark { display: flex; align-items: center; gap: 11px; margin-right: auto; min-height: 44px; }
.nav__mark svg { width: 21px; height: 21px; flex: 0 0 auto; color: var(--accent); }
.nav__word { font-family: var(--heavy); font-weight: 700; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; }
.nav__word sup { font-size: .46em; vertical-align: super; opacity: .65; }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links > a, .nav__drop > button { position: relative; font-size: 14px; font-weight: 500; letter-spacing: -.007em; }
.nav__links > a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px;
  height: 1px; background: var(--accent-ink); transition: right .36s var(--e-out);
}
.nav__links > a:hover::after { right: 0; }

.nav__drop { position: relative; }
.nav__drop > button { display: inline-flex; align-items: center; gap: 6px; }
.nav__drop > button svg { transition: transform .3s var(--e-out); }
.nav__drop[data-open="true"] > button svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 18px); left: -16px;
  min-width: 262px; padding: 8px;
  background: var(--dark); color: var(--on-dark);
  border: 1px solid var(--on-dark-hair);
  border-radius: 14px;
  box-shadow: 0 26px 64px rgba(16, 35, 58, .2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .26s var(--e-out), transform .26s var(--e-out), visibility .26s;
}
.nav__drop[data-open="true"] .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a { display: block; padding: 11px 12px; border-radius: 9px; font-size: 14px; transition: background .2s; }
.nav__menu a:hover { background: rgba(16, 35, 58, .06); }
.nav__menu a span {
  display: block; margin-top: 3px;
  font: 400 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark-mute);
}

.nav__cta { height: 44px; padding: 0 22px; font-size: 14px; }

.burger { display: none; width: 44px; height: 44px; margin-right: -10px; align-items: center; justify-content: center; }
.burger i { display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; transition: background .2s; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: currentColor; transition: transform .3s var(--e-out); }
.burger i::before { top: -6px; }
.burger i::after { top: 6px; }
.nav[data-menu="true"] .burger i { background: transparent; }
.nav[data-menu="true"] .burger i::before { transform: translateY(6px) rotate(45deg); }
.nav[data-menu="true"] .burger i::after { transform: translateY(-6px) rotate(-45deg); }

.sheet {
  position: fixed; inset: var(--nav) 0 0 0; z-index: 88;
  background: var(--paper); padding: 28px var(--gut) 48px;
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .3s var(--e-out), transform .3s var(--e-out), visibility .3s;
}
.sheet[data-open="true"] { opacity: 1; transform: none; visibility: visible; }
.sheet a { font-family: var(--display); font-weight: 500; font-size: 30px; letter-spacing: -.03em; padding: 15px 0; border-bottom: 1px solid var(--ink-hair); }
.sheet .btn { margin-top: 30px; align-self: flex-start; }

/* ---------- the seal ---------------------------------------------------- */
/* Both bands are light now, so the full-colour print carries everywhere and
   the bone-and-gold one (logo-light.png) is no longer swapped in. */
.seal { position: relative; display: block; width: 54px; height: 54px; flex: 0 0 54px; }
.seal img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .45s var(--e-out);
}
.seal--light { opacity: 0; }

.foot__mark { margin: 0; align-items: center; gap: 12px; }
.foot__mark .seal { width: 54px; height: 54px; flex-basis: 54px; }

.sheet .seal { width: 44px; height: 44px; flex-basis: 44px; }

/* ---------- hero -------------------------------------------------------- */
.hero { padding-top: 168px; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  gap: clamp(28px, 3.34vw, 48px);
  align-items: start;
}
.hero .h1 { margin-top: 0; }     /* the eyebrow it used to clear is gone */
.hero .lead { margin-top: 30px; max-width: 452px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 36px; }

/* Right column, measured off the reference at 1440: the cluster spans
   x704..1320, i.e. it starts inside the copy column's gutter and bleeds 56px
   past the content edge. Plate A 448x504 at x872, plate B 268x300 at x704,
   badge 84px at x662 — all expressed as shares of a 616x528 stage. */
.hero__stage { position: relative; aspect-ratio: 616 / 528; margin-top: -56px; }
@media (min-width: 1120px) {
  .hero__stage { margin-left: -8.33vw; margin-right: -3.89vw; }
}
/* The drawings share the page's own paper, so without a hairline the plates
   dissolve into it — and the two hero plates read as one drawing. */
.hero__plate { position: absolute; overflow: hidden; outline: 1px solid var(--ink-hair); outline-offset: -1px; }
.hero__plate img { width: 100%; height: 100%; object-fit: cover; }
.hero__plate--a { right: 0; top: 0; width: 72.7%; height: 95.5%; border-radius: var(--r-img) 0 0 var(--r-img); }
.hero__plate--b { left: 0; top: 42.4%; width: 43.5%; height: 56.8%; border-radius: var(--r-img); }
.hero__badge {
  position: absolute; left: -6.8%; top: 34.5%; z-index: 3;
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff;
  transition: transform .55s var(--e-out), background .3s;
}
.hero__badge:hover { transform: scale(1.07) rotate(45deg); background: var(--accent-hi); }
.hero__badge svg { width: 20px; height: 20px; }

.bigword {
  margin-top: clamp(52px, 6vw, 88px); padding-bottom: 72px;
  font-family: var(--heavy); font-weight: 800;
  font-size: 120px; line-height: .89; letter-spacing: -.045em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--accent-ink);
}

/* The wordmark, rebuilt as a particle field. The real text stays in the DOM and
   simply is not painted while the canvas is up: it is what the fitter measures,
   what a screen reader reads, and what the page falls back to. The canvas is
   inflated vertically so the scattered dots have somewhere to fly in from, and
   never takes the pointer — the repel reads window coordinates instead. */
[data-particles] {
  position: relative;
  --px-hi: var(--accent);        /* what the dots ramp toward across the width */
}
[data-particles].has-px > span { opacity: 0; }
.px-field {
  position: absolute; left: 0; top: -96px;
  /* a canvas is a replaced element: with width/height auto it takes its own
     intrinsic 300x150 and the insets are simply ignored */
  width: 100%; height: calc(100% + 192px);
  display: block; pointer-events: none;
}

/* ---------- section head ------------------------------------------------ */
.shead { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.shead--low { align-items: flex-end; }
.shead--low .h2 { margin-top: 44px; }
.shead--low .label { padding-bottom: 6px; }

/* ---------- about / two-column claim ---------------------------------------------------- */
.practice .h2 { margin-top: 44px; }
.practice__cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(30px, 8vw, 120px); margin-top: 82px; align-items: start;
}
.practice__claim {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.02em;
  max-width: 26ch;
}
.practice__aside .btn { margin-top: 30px; }

/* expanding gallery — four panels, one open.
   Everything here runs on one duration and one curve. The note is deliberately
   held back until the panel has finished widening and dropped the instant it
   starts closing, because the messy part was watching the copy re-wrap while
   the box was still resizing. */
.gallery {
  --g: .66s;                       /* the one duration the whole panel shares */
  display: flex; gap: 10px; margin-top: 88px; height: clamp(320px, 33.3vw, 480px);
}
.gpanel {
  position: relative; flex: 1 1 0; min-width: 0; cursor: pointer;
  border-radius: var(--r-img); overflow: hidden; background: var(--paper);
  transition: flex-grow var(--g) var(--e-in-out);
}
.gpanel.is-open { flex-grow: 2.98; }
.gpanel > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* the caption fades up over the bottom of the panel, so the crop favours the
     top: faces stay in view on the short stacked panels of tablet and phone */
  object-position: 50% 28%;
  opacity: 1;
  transition: opacity var(--g) var(--e-in-out), transform var(--g) var(--e-in-out);
}
.gpanel.is-open > img { opacity: 1; transform: scale(1.03); }
/* The drawing fades into the paper it is printed on, and the caption is set
   in ink over it — a dark scrim would grey out the whole plate. */
.gpanel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(to top,
    rgba(238, 242, 248, .97) 0%, rgba(238, 242, 248, .94) 26%,
    rgba(238, 242, 248, .46) 40%, rgba(238, 242, 248, 0) 53%);
  box-shadow: inset 0 0 0 1px var(--ink-hair);
}

.gpanel__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 24px clamp(16px, 1.9vw, 26px); color: var(--ink); }
.gpanel__idx { font: 400 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--accent-ink); }

.gpanel__name {
  display: flex; align-items: center; margin-top: 11px;
  /* three lines are always reserved: a closed panel wraps the title ("Business /
     Commercial Law" takes three) and an open one does not, and without this the
     whole stack jumps as the wrap changes */
  min-height: 3.45em;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(16px, 1.45vw, 21px); line-height: 1.15; letter-spacing: -.02em;
}
.gpanel__name::before {
  content: ""; flex: 0 0 auto; box-sizing: content-box;
  width: 0; height: 2px; background: var(--accent);
  /* the gap travels with the rule, and only exists while the rule does: a
     closed panel needs all of its ~125px for "Relationship" */
  border-right: 0 solid transparent;
  background-clip: padding-box;
  transition: width var(--g) var(--e-in-out), border-right-width var(--g) var(--e-in-out);
}
.gpanel.is-open .gpanel__name::before { width: 26px; border-right-width: 13px; }

/* 0fr -> 1fr animates to the real content height, unlike a guessed max-height */
.gpanel__reveal {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--g) var(--e-in-out);
}
.gpanel.is-open .gpanel__reveal { grid-template-rows: 1fr; }
.gpanel__note {
  overflow: hidden; max-width: 46ch;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-mute);
  opacity: 0;
  /* closing: gone at once, so the re-wrap is never seen */
  transition: opacity .22s linear, padding-top var(--g) var(--e-in-out);
}
.gpanel.is-open .gpanel__note {
  opacity: 1; padding-top: 13px;
  /* opening: wait for the width to settle first */
  transition: opacity .32s var(--e-out) calc(var(--g) * .72), padding-top var(--g) var(--e-in-out);
}

/* ---------- your lawyer: one profile ------------------------------------ */
/* Trivedi Legal is a sole practice, so the section is one portrait and the
   lawyer's own story rather than a rail of partners. */
.team { padding-bottom: clamp(88px, 9vw, 120px); }
.lawyer {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px); margin-top: 56px; align-items: start;
}
.lawyer__shot {
  aspect-ratio: 760 / 900; border-radius: var(--r-img); overflow: hidden;
  background: var(--paper); outline: 1px solid var(--ink-hair); outline-offset: -1px;
}
.lawyer__shot img { width: 100%; height: 100%; object-fit: cover; }
.lawyer__lead {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.02em; max-width: 26ch;
}
.lawyer__body .body { margin-top: 26px; max-width: 60ch; }
.lawyer__facts { margin-top: 30px; border-top: 1px solid var(--ink-hair); }
.lawyer__facts > div {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
  gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--ink-hair);
}
.lawyer__facts dt { font: 400 10.5px/1.6 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); }
.lawyer__facts dd { margin: 0; font-size: 16px; line-height: 1.5; }
.lawyer__aside { margin-top: 22px; font-size: 15.5px; line-height: 1.6; color: var(--ink-mute); max-width: 60ch; }
.lawyer .btn { margin-top: 30px; }

/* ---------- process (stacked sticky cards) ------------------------------ */
.pcard {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; align-items: center;
  border-radius: var(--r-band) var(--r-band) 0 0;
  overflow: hidden;
  color: var(--on-dark);
  background-image:
    linear-gradient(rgba(29, 84, 144, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 84, 144, .09) 1px, transparent 1px);
  background-size: 62px 62px, 62px 62px;
}
.pcard:nth-child(1) { background-color: var(--dark); }
.pcard:nth-child(2) { background-color: var(--dark-2); }
.pcard:nth-child(3) { background-color: var(--dark-3); }
.pcard:nth-child(4) { background-color: var(--dark-4); }
.pcard:nth-child(5) { background-color: var(--dark-3); }   /* six practice areas now: the last two step back up */
.pcard:nth-child(6) { background-color: var(--dark-2); }
.pcard__in { width: 100%; padding-block: 108px; }
.pcard__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 512px); gap: clamp(30px, 5vw, 64px); margin-top: 60px; align-items: start; }
.pcard__num { font-family: var(--display); font-weight: 500; font-size: clamp(96px, 13.2vw, 190px); line-height: .82; letter-spacing: -.05em; }
.pcard__shot { margin-top: 26px; height: 150px; border-radius: var(--r-img); overflow: hidden; outline: 1px solid var(--on-dark-hair); outline-offset: -1px; }
.pcard__shot img { width: 100%; height: 100%; object-fit: cover; }
.pcard dl { margin-top: 32px; border-top: 1px solid var(--on-dark-hair); }
.pcard dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--on-dark-hair); }
.pcard dt { font: 400 10.5px/1.6 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--on-dark-mute); }
.pcard dd { font-size: 16.5px; }

/* ---------- marker sweep (kept: used inside FAQ answers) -------------- */
/* the marker sweep, revealed with its row */
mark {
  color: var(--on-accent); background-color: var(--accent);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: .08em .16em; margin: 0 -.04em; border-radius: 3px;
  background-image: linear-gradient(118deg, var(--accent) 0%, var(--accent-hi) 100%);
  background-repeat: no-repeat; background-size: 0 100%;
  box-shadow: inset 0 0 0 100vmax rgba(238, 242, 248, 0);
  transition: background-size .66s var(--e-in-out), color .4s var(--e-in-out);
}
.is-in mark { background-size: 100% 100%; }
.is-in mark:nth-of-type(2) { transition-delay: .18s; }
.is-in mark:nth-of-type(3) { transition-delay: .36s; }

/* ---------- contact photo fan + next steps ------------------------------ */

/* four plates fanned, as on the reference */
.steps { margin-top: 22px; border-top: 1px solid var(--ink-hair); }
.steps li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--ink-hair); }
.steps b { font: 400 11px/1.6 var(--mono); letter-spacing: .12em; color: var(--accent-ink); }
.steps p { font-size: 16.5px; line-height: 1.5; }

/* ---------- services lead ----------------------------------------------- */
.services__lead { margin-top: 34px; max-width: 54ch; }

/* ---------- FAQ ---------------------------------------------------------- */
.faq__grid {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 96px); margin-top: clamp(48px, 5.4vw, 72px); align-items: start;
}
.faq__list { border-top: 1px solid var(--on-dark-hair); }
.faq__item { border-bottom: 1px solid var(--on-dark-hair); }
.faq__item h3 { margin: 0; }
.faq__q {
  display: flex; width: 100%; gap: 24px; align-items: center; justify-content: space-between;
  padding: 24px 0; text-align: left;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(17px, 1.65vw, 22px); line-height: 1.28; letter-spacing: -.02em;
  color: var(--on-dark); transition: color .25s var(--e-out);
}
.faq__q:hover { color: var(--accent-lift); }
.faq__item.is-open .faq__q { color: var(--accent-lift); }
.faq__mark {
  position: relative; flex: 0 0 34px; width: 34px; height: 34px;
  border-radius: 50%; border: 1px solid var(--on-dark-hair);
  transition: background .3s var(--e-out), border-color .3s var(--e-out), color .3s;
}
.faq__mark::before, .faq__mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 1.6px; background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .4s var(--e-out), opacity .3s var(--e-out);
}
.faq__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__mark { background: var(--accent-lift); border-color: var(--accent-lift); color: var(--paper); }
.faq__item.is-open .faq__mark::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

/* [hidden] has to be restated or display:grid wins */
.faq__a[hidden] { display: none; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--e-in-out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__inner { overflow: hidden; }
.faq__inner p {
  padding-bottom: 28px; max-width: 62ch;
  font-size: clamp(16px, 1.26vw, 17.5px); line-height: 1.62; color: var(--on-dark-mute);
}

/* ---------- contact ------------------------------------------------------ */
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px);
  gap: clamp(34px, 6vw, 92px); margin-top: clamp(48px, 5.4vw, 72px); align-items: start;
}

.form { display: flex; flex-direction: column; gap: 22px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field > label { font: 500 13.5px/1.3 var(--body); color: var(--ink); }
.field__opt { font-weight: 400; color: var(--ink-mute); }
.req { color: var(--accent-ink); }

/* the checkbox is NOT a text field: min-height cannot be undone by height, so
   a 52px floor here stretched it into a tall rectangle */
.field input:not([type="checkbox"]), .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 14px 16px;
  font: 400 16px/1.5 var(--body); color: var(--ink);
  background: rgba(255, 255, 255, .66);
  border: 1px solid var(--ink-hair); border-radius: 8px;
  transition: border-color .22s, background .22s, box-shadow .22s;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #94968f; }
.field input:not([type="checkbox"]):focus, .field textarea:focus, .field select:focus {
  outline: none; background: #fff;
  border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--ring);
}
.field[data-invalid="true"] input:not([type="checkbox"]),
.field[data-invalid="true"] textarea,
.field[data-invalid="true"] select { border-color: var(--danger); }
.field[data-invalid="true"] input:not([type="checkbox"]):focus,
.field[data-invalid="true"] textarea:focus,
.field[data-invalid="true"] select:focus { box-shadow: 0 0 0 3px rgba(163, 39, 26, .22); }

.field__hint { font-size: 13.5px; line-height: 1.45; color: var(--ink-mute); }
.field__err { font-size: 13.5px; line-height: 1.45; color: var(--danger); }
.field__err:empty, .field__hint:empty { display: none; }

.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 46px; }
.select > svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-mute); }

.field--check { position: relative; gap: 10px; }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 13px; align-items: start; cursor: pointer; }
/* The input IS the box — an invisible input under a decorative span double-fires
   (the input toggles, then the label forwards to it again) and reads as a no-op. */
.check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; min-height: 0; padding: 0; margin: 1px 0 0;
  display: grid; place-items: center;
  border: 1px solid var(--ink-hair); border-radius: 5px;
  background: rgba(255, 255, 255, .66);
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.check input[type="checkbox"]::after {
  content: ""; width: 11px; height: 6px;
  border-left: 2px solid var(--on-accent); border-bottom: 2px solid var(--on-accent);
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0; transition: opacity .18s var(--e-out);
}
.check input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.check input[type="checkbox"]:checked::after { opacity: 1; }
.check input[type="checkbox"]:focus-visible { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--ring); outline: none; }
.check__text { font-size: 14.5px; line-height: 1.5; color: var(--ink-mute); padding-block: 2px; }
.field--check[data-invalid="true"] .check input[type="checkbox"] { border-color: var(--danger); }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 6px; }
.form__status { font-size: 15px; line-height: 1.5; }
.form__status:empty { display: none; }
.form__status[data-state="ok"] { color: var(--accent-ink); font-weight: 500; }
.form__status[data-state="err"] { color: var(--danger); }

.contact__direct { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--ink-hair); }
.contact__direct .label { margin-bottom: 15px; }
.contact__direct p + p { margin-top: 2px; }
.contact__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(18px, 1.55vw, 21px); letter-spacing: -.02em; color: var(--ink);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--ink-hair);
  transition: text-decoration-color .25s;
}
.contact__link:hover { text-decoration-color: var(--accent-ink); }
.contact__note {
  margin-left: 10px; font: 400 10.5px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.contact__addr { margin-top: 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-mute); }

/* ---------- footer ------------------------------------------------------ */
.site-footer {
  background: var(--dark); color: var(--on-dark);
  border-radius: var(--r-band) var(--r-band) 0 0;
  padding-top: 104px;
}
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .72fr) minmax(0, .72fr) minmax(0, 1.06fr); gap: clamp(28px, 3.4vw, 52px); }
.foot__blurb { margin-top: 22px; max-width: 38ch; color: var(--on-dark-mute); }
.foot__addr { margin-top: 26px; font: 400 10.5px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-mute); }
.foot__col h4 { margin: 0 0 20px; font: 500 10.5px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--on-dark-mute); }
.foot__col li + li { margin-top: 2px; }
.foot__col a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; color: var(--on-dark-mute); transition: color .24s;
}
.foot__col a:hover { color: var(--accent-lift); }

.foot__word {
  margin-top: 104px;
  font-family: var(--heavy); font-weight: 800;
  font-size: 150px; line-height: .86; letter-spacing: -.045em; text-transform: uppercase;
  color: #3d73ac;              /* a mid blue: reads as a tonal slab, not a second headline */
  --px-hi: var(--accent-ink);  /* on the blue band the dots ramp DOWN, into the ink */
  white-space: nowrap;
}
.foot__bar { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; margin-top: 30px; padding: 22px 0 34px; border-top: 1px solid var(--on-dark-hair); }
.foot__bar p { font: 400 10.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-mute); }
.foot__top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-mute); transition: color .24s; }
.foot__top:hover { color: var(--accent-lift); }

/* ---------- principles (word switcher) ---------------------------------- */
.principles { padding-block: 0; }
.principles__stick { padding-block: 120px; }
.pr {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(30px, 6vw, 96px); margin-top: 64px; align-items: center;
}
.pr__words { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pr__word {
  padding: 4px 0; text-align: left;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 4.3vw, 62px); line-height: 1.12; letter-spacing: -.035em;   /* "Professionalism" is 15 letters */
  color: rgba(16, 35, 58, .55);      /* 3.4:1 — dim, but still legible */
  transition: color .5s var(--e-out);
}
.pr__word:hover { color: rgba(16, 35, 58, .78); }
.pr__word.is-active, .pr__word.is-active:hover { color: var(--accent-lift); }

.pr__stage { position: relative; }
.pr__stage > img { width: 100%; height: auto; border-radius: var(--r-img); outline: 1px solid var(--ink-hair); outline-offset: -1px; }
.pr__panel {
  position: absolute; left: -14%; right: 8%; top: -5%;
  background: var(--paper); color: var(--ink);
  border-radius: var(--r-img); padding: clamp(22px, 2vw, 30px);
  box-shadow: 0 32px 74px rgba(16, 35, 58, .2);
}
.pr__pane[hidden] { display: none; }
.pr__pane { animation: paneIn .5s var(--e-out) both; }
@keyframes paneIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pr__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pr__head h3 { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -.024em; }
.pr__n { font: 400 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--accent-ink); }
.pr__panel p { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--ink-mute); }

/* ---------- footer contact + social ------------------------------------- */
.foot__social { display: flex; gap: 10px; margin-top: 28px; }
.foot__social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--on-dark-hair); color: var(--on-dark-mute);
  transition: color .25s, border-color .25s, background .25s;
}
.foot__social a:hover { color: var(--on-dark); border-color: var(--on-dark-faint); background: rgba(16, 35, 58, .06); }
.foot__social svg { width: 19px; height: 19px; }
.foot__contact h4 {
  margin: 0 0 20px; font: 500 10.5px/1 var(--mono);
  letter-spacing: .15em; text-transform: uppercase; color: var(--on-dark-mute);
}
.foot__contact .foot__addr {
  margin-top: 0; font: 400 16px/1.6 var(--body);
  letter-spacing: -.003em; text-transform: none; color: var(--on-dark-mute);
}
.foot__contact p + p { margin-top: 2px; }
.foot__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 16px; color: var(--on-dark);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--on-dark-faint);
  transition: text-decoration-color .25s, color .25s;
}
.foot__link:hover { text-decoration-color: var(--accent-lift); }

/* ---------- enquiry modal ------------------------------------------------ */
/* A native <dialog>, so focus trapping, Esc and focus-return come for free. */
.modal {
  width: min(660px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  margin: auto;
  padding: clamp(26px, 3vw, 42px);
  border: 0; border-radius: 16px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 110px rgba(12, 26, 46, .5);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .3s var(--e-out), transform .36s var(--e-out);
}
.modal.is-open { opacity: 1; transform: none; }
.modal::backdrop { background: rgba(12, 26, 46, .74); }
@supports (backdrop-filter: blur(4px)) {
  .modal::backdrop { backdrop-filter: blur(5px); }
}

.modal__close {
  position: absolute; top: 18px; right: 18px;
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--ink-hair); color: var(--ink-mute);
  transition: background .22s, color .22s, border-color .22s;
}
.modal__close:hover { background: rgba(12, 26, 46, .06); color: var(--ink); border-color: rgba(20, 27, 38, .32); }
.modal__close svg { width: 16px; height: 16px; }

.modal__title {
  margin-top: 16px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(24px, 2.6vw, 33px); line-height: 1.1; letter-spacing: -.026em;
  max-width: 18ch;
}
.modal__note { margin-top: 14px; max-width: 52ch; font-size: 15.5px; line-height: 1.55; color: var(--ink-mute); }
.modal .form { margin-top: 28px; gap: 18px; }
.modal .form textarea { min-height: 116px; }

@media (max-width: 720px) {
  .modal { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; padding-top: 68px; }
  .modal__close { position: fixed; top: 12px; right: 12px; background: var(--paper); }
}

/* ---------- reveal machinery -------------------------------------------- */
[data-rise] { opacity: 0; transform: translateY(26px); }
.is-in [data-rise], [data-rise].is-in {
  opacity: 1; transform: none;
  transition: opacity .84s var(--e-out), transform .84s var(--e-out);
}
[data-rise-delay="1"] { transition-delay: .09s; }
[data-rise-delay="2"] { transition-delay: .18s; }
[data-rise-delay="3"] { transition-delay: .27s; }
[data-rise-delay="4"] { transition-delay: .36s; }

.split { display: block; }
.split .ln { display: block; overflow: hidden; white-space: nowrap;
  padding-block: .02em .14em; margin-block: -.02em -.14em; }
.split .ch { display: inline-block; white-space: pre; transform: translateY(108%); transition: transform .95s var(--e-out); }
.is-in .split .ch { transform: none; }

.rise-img { opacity: 0; transform: scale(1.06); transition: opacity 1s var(--e-out), transform 1.3s var(--e-in-out); }
.is-in .rise-img, .rise-img.is-in { opacity: 1; transform: none; }

/* ---------- scroll-scrubbed word reveal --------------------------------- */
/* The paragraph's own travel through the viewport drives --p (0 -> 1) and each
   word carries its index, so the line fills in reading order with an eight-word
   soft edge. The interpolation is done here rather than in script: that is ONE
   style write per block per frame instead of one per word. With JS off, or
   under reduced motion, the words are never split and the paragraph is itself. */
[data-scrub] { --p: 0; }
[data-scrub] .wd {
  display: inline-block;
  --t: clamp(0, (var(--p) * (var(--n) + 8) - var(--i)) / 8, 1);
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * .46em));
}

/* ---------- responsive --------------------------------------------------- */
@media (max-width: 1120px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: flex; }
  .hero__grid, .practice__cols, .people__grid, .pcard__row,
  .faq__grid, .contact__grid { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr { grid-template-columns: 1fr; gap: 36px; }
  .pr__panel { position: static; margin-top: -18%; margin-inline: 6% 0; }
  .hero__stage { margin-top: 44px; max-width: 560px; }
  .foot__grid { gap: 44px; }
  .pcard { position: relative; top: auto; min-height: auto; }
  .pcard__in { padding-block: 84px; }
  .lawyer { grid-template-columns: minmax(0, 1fr); }
  .lawyer__shot { max-width: 420px; }
  .pad { padding-block: 92px; }
  .bigword { font-size: 13vw; }
}
/* Below 1100px a closed panel is too narrow for the firm's own card titles
   ("Relationship", "Immigration" overflow at ~75px), so the row becomes the
   stacked accordion phones use. Full width, every title fits on one line. */
@media (max-width: 1100px) {
  .gallery { flex-direction: column; height: auto; }
  .gpanel { flex: 0 0 auto; height: 94px; transition: height .7s var(--e-in-out); }
  .gpanel.is-open { height: 420px; }
  .gpanel__name { min-height: 1.2em; }
  /* Full-width stacked panels put the caption over the drawing itself, so the
     paper behind the text is solid and the scene sits above it: a closed row
     shows only a strip of the cartoon, an open one the top ~half. */
  .gpanel::after {
    background: linear-gradient(to top,
      rgba(238, 242, 248, .98) 0%, rgba(238, 242, 248, .97) 62%,
      rgba(238, 242, 248, .6) 82%, rgba(238, 242, 248, .25) 100%);
  }
  .gpanel.is-open::after {
    background: linear-gradient(to top,
      rgba(238, 242, 248, .98) 0%, rgba(238, 242, 248, .97) var(--solid, 46%),
      rgba(238, 242, 248, .55) calc(var(--solid, 46%) + 10%), rgba(238, 242, 248, 0) calc(var(--solid, 46%) + 22%));
  }
}
@media (max-width: 720px) {
  .gpanel.is-open { height: 470px; --solid: 52%; }   /* the notes wrap to 4-5 lines here */
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .seal { width: 44px; height: 44px; flex-basis: 44px; }
  .nav__word { font-size: 15.5px; }
  .foot__mark .seal { width: 46px; height: 46px; flex-basis: 46px; }
  .shead { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero { padding-top: 128px; }
  .hero__badge { width: 62px; height: 62px; }
  .form__row { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .pr__panel { margin-inline: 0; margin-top: -12%; }
}

/* ---------- reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rise], .split .ch, .rise-img, [data-scrub] .wd { opacity: 1 !important; transform: none !important; }
  [data-drift] { transform: none !important; }
  mark { background-size: 100% 100% !important; }
  .pcard { position: relative; min-height: auto; }
}

@media print {
  .nav, .sheet { display: none !important; }
  body { background: #fff; color: #000; }
}

/* the firm's own Practice Areas intro and contact intro (trivedilegal.co.nz) */
.services__intro { margin-top: 22px; max-width: 70ch; }
.contact__intro { margin-top: 28px; max-width: 62ch; }

/* original-site-only layout additions (2026-11-10) */
.practice__aside .body + .body { margin-top: 14px; }
.about__note { margin-top: 14px; font-size: 13.5px; line-height: 1.55; color: var(--on-dark-mute); }
.hero__eyebrow { margin-bottom: 22px; }
.hero__more { margin-top: 16px; max-width: 452px; }
.lawyer__body .body + .body { margin-top: 14px; }

/* header seal 50% bigger (54 -> 81px, 44 -> 66px on phones); the footer seal keeps its size */
.nav .seal { width: 81px; height: 81px; flex-basis: 81px; }
@media (max-width: 720px) { .nav .seal { width: 66px; height: 66px; flex-basis: 66px; } }

/* Practice Areas: the four boxes come first, under the label (2026-11-10) */
.services .gallery { margin-top: 0; }   /* the label above it was removed */

/* About: the firm's welcome text in two balanced columns under the claim,
   instead of one long 420px column (2026-11-10) */
#about .practice__cols { grid-template-columns: minmax(0, 1fr); gap: 44px; }
#about .practice__claim { max-width: 34ch; }
#about .practice__aside { columns: 2; column-gap: clamp(32px, 5vw, 72px); }
#about .practice__aside > * { break-inside: avoid; }
#about .practice__aside > .body:first-child { margin-top: 0; }
@media (max-width: 860px) { #about .practice__aside { columns: 1; } }

/* practice-area cartoon strips: 150 -> 240px tall, recut at 3.4:1 to show
   more of each figure; the tallest card still fits a 900px screen (2026-11-10) */
.pcard__shot { height: 240px; }

/* Practice Areas intro: heading + intro sit on the blue band right before the
   six numbered cards; card 1 continues the band without a second rounded top */
.practice-intro { padding-bottom: 0; }
.practice-intro .services__lead { margin-top: 30px; max-width: 54ch; }
.practice-intro + .process .pcard:first-child { border-radius: 0; }
.practice-intro .shead .h2 { margin-top: 44px; }   /* under the section label */
.process .pcard__row { margin-top: 0; }             /* the per-card label above it is gone */

/* nav: the current section's link keeps its underline (set by the scroll spy) */
.nav__links > a.is-current { color: var(--accent-ink); }
.nav__links > a.is-current::after { right: 0; background: var(--accent-ink); }
.nav.on-dark .nav__links > a.is-current { color: var(--accent-lift); }
.nav.on-dark .nav__links > a.is-current::after { background: var(--accent-lift); }
.nav__cta.is-current { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent-ink); }
/* a mouse click on a nav link should not leave the keyboard focus ring behind */
.nav__links > a:focus:not(:focus-visible) { outline: none; }

/* ---------- team: large cards, next one peeking (user wireframe) -------- */
.team__head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.team__ctrl { display: flex; gap: 10px; }
.team__ctrl[hidden] { display: none; }
.team__arrow {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--ink-hair); color: var(--ink);
  transition: background .25s, border-color .25s, opacity .25s;
}
.team__arrow svg { width: 16px; height: 16px; }
.team__arrow:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.team__arrow:disabled { opacity: .35; cursor: default; }
.tk {
  --tk-start: max(var(--gut), calc((100vw - 1440px) / 2 + var(--gut)));
  --tk-card: min(1240px, calc(100vw - var(--tk-start) - 150px));   /* wide card, ~110px of the next one showing */
  display: flex; align-items: stretch; gap: clamp(10px, 1vw, 16px);
  margin-top: 40px; padding: 4px var(--tk-start) 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--tk-start);
  scrollbar-width: none; cursor: grab;
}
.tk::-webkit-scrollbar { display: none; }
.tk.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.tk:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
/* room after the last card so it can slide to the same start line */
.tk__end { flex: 0 0 max(1px, calc(100vw - var(--tk-card) - var(--tk-start) * 2 - clamp(10px, 1vw, 16px))); }
.tk__card {
  flex: 0 0 var(--tk-card); scroll-snap-align: start;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(22px, 3vw, 44px);
  padding: clamp(20px, 2.6vw, 36px); border-radius: var(--r-img);
  background: #f7f9fc; box-shadow: 0 0 0 1px var(--ink-hair);
}
.tk__shot { align-self: start; aspect-ratio: 760 / 900; border-radius: 18px; overflow: hidden; background: var(--paper); }
.tk__shot img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.tk__body { min-width: 0; }
.tk__name { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -.03em; }
.tk__role { margin-top: 10px; font: 400 10.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.tk__lead { margin-top: 18px; font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3; letter-spacing: -.015em; }
.tk__p { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink-mute); }
.tk__aside { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink-faint); }
.tk__cta { margin-top: 24px; }
@media (max-width: 860px) {
  .tk { --tk-card: 76vw; }
  .tk__card { grid-template-columns: minmax(0, 1fr); }
  .tk__shot { max-width: 320px; width: 100%; }
}

/* ---------- team slider: scroll effects --------------------------------- */
.tk.is-gliding { scroll-snap-type: none; }
.tk__card {
  --a: min(1, max(var(--tk-p, 0), calc(var(--tk-p, 0) * -1)));   /* |p|, 0..1 */
  transform: scale(calc(1 - var(--a) * .06));
  transform-origin: 0% 50%;
  opacity: calc(1 - var(--a) * .35);
  will-change: transform;
}
.tk__shot img {
  transform: translateX(calc(var(--tk-p, 0) * -48px)) scale(1.12);   /* parallax inside the frame */
}
.tk__body > * {
  transform: translateX(calc(var(--tk-p, 0) * 70px));
  opacity: calc(1 - var(--a) * .6);
}
.tk__body > :nth-child(2) { transform: translateX(calc(var(--tk-p, 0) * 95px)); }
.tk__body > :nth-child(n+3) { transform: translateX(calc(var(--tk-p, 0) * 120px)); }
/* entrance: the row slides in once, the first time it is seen */
.tk.is-waiting .tk__card { translate: 18vw 0; opacity: 0; }
.tk.is-in .tk__card { translate: 0 0; transition: translate 1.1s var(--e-out), opacity .9s var(--e-out); }
.tk.is-in .tk__card:nth-child(2) { transition-delay: .12s; }
.tk.is-in .tk__card:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .tk__card, .tk__shot img, .tk__body > * { transform: none; opacity: 1; }
}