/* ==========================================================================
   SMD Attorneys — Schur Marais Du Plessis
   Stylesheet
   --------------------------------------------------------------------------
   Palette is driven entirely by the tokens in :root. Change the token,
   change the whole site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --accent:        #99272D;   /* client-specified accent */
  --accent-dark:   #7C1F24;
  --accent-light:  #B8474D;
  --accent-wash:   #F7EDED;

  /* Charcoal — sampled from the supplied logo */
  --charcoal:      #1A2227;
  --charcoal-2:    #302F2F;
  --charcoal-soft: #465056;

  /* Warm neutrals — these are what make it feel boutique rather than corporate */
  --cream:         #FBF8F5;
  --cream-2:       #F4EFE9;
  --sand:          #E5DCD1;
  --sand-2:        #D6C9BA;

  --ink:           #262C30;
  --ink-muted:     #5D666C;

  --white:         #FFFFFF;

  /* Type */
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --wrap:      1180px;
  --wrap-slim: 820px;
  --wrap-chrome: var(--wrap);   /* header + footer; widened past --wrap on big screens */
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* Surface */
  --radius:    4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(26, 34, 39, .06), 0 2px 8px rgba(26, 34, 39, .05);
  --shadow-md: 0 4px 12px rgba(26, 34, 39, .07), 0 12px 32px rgba(26, 34, 39, .08);
  --shadow-lg: 0 8px 24px rgba(26, 34, 39, .10), 0 24px 60px rgba(26, 34, 39, .12);

  --ease: cubic-bezier(.22, .61, .36, 1);
  /* Long and heavily eased-out — this one reads as a glide rather than a move */
  --glide: .5s cubic-bezier(.25, 1, .3, 1);

  --header-h: 104px;
  --topbar-h: 40px;
}

/* On large monitors a fixed 1180px measure strands the content in the middle of
   the viewport with dead background either side, so the wrap steps up with the
   screen instead. Stepped rather than fluid so the layout keeps its proportions
   at the sizes most visitors are on. Past 1500px the header and footer go
   edge-to-edge — as site chrome they look better anchored to the viewport than
   tracking the content measure. */
@media (min-width: 1500px) {
  :root { --wrap: 1440px; --gutter: 3rem; --wrap-chrome: 100%; }
}
@media (min-width: 1800px) {
  :root { --wrap: 1660px; --gutter: 3.5rem; }
}
@media (min-width: 2100px) {
  :root { --wrap: 1900px; --gutter: 4rem; }
}
@media (min-width: 2500px) {
  :root { --wrap: 2200px; --gutter: 4.5rem; }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--charcoal);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5.2vw, 3.65rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 600; }

p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--accent-dark); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

strong { font-weight: 600; color: var(--charcoal); }

hr {
  border: 0;
  border-top: 1px solid var(--sand);
  margin: 2.5rem 0;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--slim { max-width: var(--wrap-slim); }

/* Site chrome follows --wrap-chrome instead of --wrap, so the logo, call button
   and footer columns sit against the viewport edges on wide screens rather than
   floating in from them. Declared here so the later component rules — which set
   layout but not width — don't override it. */
.topbar__inner,
.header__inner,
.site-footer > .wrap { max-width: var(--wrap-chrome); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--cream  { background: var(--cream-2); }
.section--white  { background: var(--white); }
.section--dark   { background: var(--charcoal); color: rgba(255,255,255,.82); }
.section--dark h2, .section--dark h3 { color: #fff; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* Keeps a short phrase from breaking across lines — used on the footer
   copyright so "reserved" can't be left stranded on its own line. */
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. Typographic components
   -------------------------------------------------------------------------- */

/* Small accent label above a heading — the recurring motif of the site */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.center .eyebrow { justify-content: center; }

.section--dark .eyebrow { color: var(--accent-light); }
.section--dark .eyebrow::before { background: var(--accent-light); }

.lead {
  font-size: clamp(1.075rem, 1.6vw, 1.2rem);
  line-height: 1.68;
  color: var(--ink-muted);
  max-width: 62ch;
}
.section--dark .lead { color: rgba(255,255,255,.75); }

.section-head { max-width: 66ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.center .section-head { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1.075rem 1.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 10px rgba(153, 39, 45, .22);
}
.btn--primary:hover {
  background: var(--accent-dark);
  color: #fff;
  box-shadow: 0 6px 20px rgba(153, 39, 45, .3);
}

.btn--ghost {
  background: transparent;
  color: var(--charcoal);
  border-color: var(--sand-2);
}
.btn--ghost:hover {
  border-color: var(--charcoal);
  color: var(--charcoal);
  background: rgba(26, 34, 39, .03);
}

.btn--light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.4);
}
.btn--light:hover { background: #fff; color: var(--charcoal); border-color: #fff; }

.btn--solid-light { background: #fff; color: var(--charcoal); }
.btn--solid-light:hover { background: var(--cream-2); color: var(--charcoal); }

.btn--sm { padding: .8rem 1.3rem; font-size: .78rem; }

/* For labels too long to hold one line on a phone. The label is split into
   nowrap spans in the markup so the break lands at a chosen point rather than
   orphaning the last word. */
.btn--wrap {
  flex-wrap: wrap;
  gap: .3em;
  line-height: 1.25;
  text-align: center;
}
.btn--wrap > span { white-space: nowrap; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2rem;
}
.center .btn-row { justify-content: center; }

/* Text link with a small arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.link-arrow svg { transition: transform .22s var(--ease); flex: none; }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--charcoal);
  color: rgba(255,255,255,.72);
  font-size: .8125rem;
  letter-spacing: .01em;
  /* Height is constant — the strip leaves by scrolling out of view under the
     header's negative sticky offset, not by collapsing this box. Animating the
     height here would change the document height mid-scroll and make the page
     lurch under the reader. */
  height: var(--topbar-h);
  overflow: hidden;
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  height: 40px; /* fixed, so the contents don't squash as the bar collapses */
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}
a.topbar__item:hover { color: #fff; }
.topbar__item svg { flex: none; opacity: .7; }
.topbar__spacer { margin-left: auto; }
.topbar__social {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255,255,255,.72);
}
.topbar__social:hover { color: #fff; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 245, .96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--sand);
  /* Kept on the compositor: the backdrop-filter above would otherwise
     re-rasterise the whole bar on every frame of the glide and judder the
     nav text. */
  will-change: transform;
  transition: transform var(--glide), box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: var(--shadow-sm); }

/* The contact strip glides out of view as soon as the reader starts scrolling,
   leaving the logo/nav bar pinned. Driven by a timed transform rather than by
   scroll position: a single wheel notch is ~100px, so anything tied 1:1 to
   scroll covers the strip's 40px in one frame and snaps. A transform also
   doesn't reflow, so the page below never shifts. */
.site-header.is-scrolled { transform: translateY(calc(var(--topbar-h) * -1)); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; flex: none; }
/* Sized so the wordmark (≈2.23:1) clears the header height with breathing room
   above and below rather than sitting flush against it. */
.brand img { width: clamp(138px, 16vw, 172px); height: auto; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.1rem);
}
.nav__link {
  position: relative;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--charcoal);
  padding-block: .5rem;
  white-space: nowrap;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__link:hover { color: var(--accent); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--accent); }

.header__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: none;
}

/* Always-visible click-to-call — required by the brief, top right on every viewport */
.btn--call {
  background: var(--accent);
  color: #fff;
  padding: .85rem 1.35rem;
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: none;
  box-shadow: 0 2px 10px rgba(153, 39, 45, .22);
}
.btn--call:hover { background: var(--accent-dark); color: #fff; }
.btn--call svg { flex: none; }
.btn--call .btn__label { font-weight: 600; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--sand-2);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 20px; height: 1.5px;
  background: var(--charcoal);
  transition: background .2s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px; height: 1.5px;
  background: var(--charcoal);
  transition: transform .25s var(--ease), top .25s var(--ease);
}
.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 { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--charcoal);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
/* Warm charcoal wash keeps the photo friendly rather than cold */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(26,34,39,.86) 0,
      rgba(26,34,39,.66) 58rem,
      rgba(26,34,39,.12) 100%),
    linear-gradient(to top, rgba(26,34,39,.44) 0%, rgba(26,34,39,0) 55%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  /* Weighted to the top so the copy sits below the faces in the photo. */
  padding-top: clamp(6rem, 15vw, 13.5rem);
  padding-bottom: clamp(3.5rem, 8.3vw, 7.5rem);
  max-width: 44rem;
}
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero__sub {
  font-size: clamp(1.075rem, 1.7vw, 1.25rem);
  line-height: 1.7;
  color: rgba(255,255,255,.8);
  max-width: 38rem;
  margin-bottom: 2.25rem;
}
.hero .eyebrow { color: #fff; opacity: .85; }
/* Eyebrow sits beneath the buttons on the hero. */
.hero .btn-row + .eyebrow { margin: 1.9rem 0 0; }
.hero .eyebrow::before { background: var(--accent-light); }

/* Compact hero used on interior pages */
.page-hero {
  position: relative;
  background: var(--charcoal);
  overflow: hidden;
  /* Height would otherwise follow the intro copy, leaving pages with a one-line
     intro (About, Privacy, Site Map) visibly shorter than the two-line ones.
     It tracks the viewport so the banner keeps its proportions as the screen
     widens — pinned at a fixed px the header stayed 432px while the viewport
     grew, turning it into a thin strip that cropped the top off the team photo.
     The copy is anchored to the top rather than centred, so its distance from
     the top is set by --hero-pad-top and does not drift as the height changes. */
  min-height: clamp(19rem, 26vw, 42rem);
  display: flex;
  align-items: flex-start;
}
.page-hero__media { position: absolute; inset: 0; }
.page-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* The box is wider than the 3.08:1 photos, so cover trims top and bottom.
     Each banner's subject sits at a different height, so each gets its own
     focal point rather than a single global guess. */
  object-position: center 30%;
}
.page-hero__media--contact   img { object-position: center 20%; }
.page-hero__media--services  img { object-position: center 50%; }
.page-hero__media--attorneys img { object-position: center 22%; }
.page-hero__media--about     img { object-position: center 25%; }
.page-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  /* Mid-stop is in rem, not %, so the dark zone always spans the text block
     whatever the viewport. On narrow screens the stop falls off-canvas and the
     wash stays uniformly dark behind full-width text; on wide screens the photo
     opens up to the right of the copy. It sits past the 46rem copy measure
     because .wrap is centred above 1180px, which pushes the copy's right edge
     out to ~990px — a 50rem stop left the end of it on the lightened side. */
  background: linear-gradient(to right,
    rgba(26,34,39,.86) 0,
    rgba(26,34,39,.66) 62rem,
    rgba(26,34,39,.14) 100%);
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  /* Sets how far the copy sits from the top of the banner. The section
     min-height supplies the space below it, so trimming the header height
     pulls the next section up without moving this copy. */
  padding-top: clamp(4rem, 10.1vw, 20rem);
  padding-bottom: clamp(1rem, 2vw, 3rem);
  max-width: 46rem;
}
.page-hero h1 { color: #fff; margin-bottom: .35em; }
.page-hero p {
  color: rgba(255,255,255,.78);
  font-size: 1.075rem;
  max-width: 46ch;
  margin: 0;
}
/* The intro reserves two lines so pages with a one-line intro (About, Privacy,
   Site Map) stand the same height as the two-line ones. Header height is
   content-driven, so without this they render visibly shorter. */
.page-hero h1 + p { min-height: 3.44em; }

/* "Book your consultation" is long enough to run right across the nameplate in
   the photo behind it. Wrapping it to two lines keeps the copy clear of the board. */
.page-hero__inner--tight h1 { max-width: 14ch; }


.breadcrumb {
  font-size: .8125rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  margin-bottom: 1rem;
}
.breadcrumb a { color: rgba(255,255,255,.75); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { margin-inline: .5rem; opacity: .5; }

/* --------------------------------------------------------------------------
   8. Trust strip
   -------------------------------------------------------------------------- */
.trust {
  background: var(--white);
  border-bottom: 1px solid var(--sand);
}
.trust__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.trust__item {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
  text-align: center;
  border-right: 1px solid var(--sand);
}
.trust__item:last-child { border-right: 0; }
.trust__num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--accent);
  line-height: 1.1;
  margin-bottom: .35rem;
}
.trust__label {
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   9. Split (image + text)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }

.split__media { position: relative; }
.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Thin accent frame offset behind the photo — quiet, boutique detail */
.split__media::before {
  content: "";
  position: absolute;
  inset: -14px -14px 14px 14px;
  border: 1px solid var(--sand-2);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.stat-badge {
  position: absolute;
  right: -18px;
  bottom: -22px;
  background: var(--accent);
  color: #fff;
  padding: 1.35rem 1.6rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-align: center;
  max-width: 190px;
}
.stat-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: #fff;
  line-height: 1;
  margin-bottom: .2rem;
}
.stat-badge span {
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
}

/* Signature-style pull quote */
.pull-quote {
  border-left: 2px solid var(--accent);
  padding: .25rem 0 .25rem 1.5rem;
  margin: 2rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.6;
  color: var(--charcoal);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   10. Service cards (home + services index)
   -------------------------------------------------------------------------- */
.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.svc-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.svc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--sand-2);
}
.svc-card:hover::before { transform: scaleX(1); }

.svc-card__icon {
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--accent-wash);
  color: var(--accent);
  margin-bottom: 1.35rem;
  flex: none;
}
.svc-card h3 { margin-bottom: .5rem; font-size: 1.25rem; }
.svc-card p {
  color: var(--ink-muted);
  font-size: .9688rem;
  margin-bottom: 1.5rem;
}
.svc-card__foot { margin-top: auto; }
.svc-card__attorney {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--sand);
  font-size: .8125rem;
  color: var(--ink-muted);
}
.svc-card__attorney img {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
/* Services shared between two attorneys show both faces, overlapped, with a
   ring in the card colour so the front avatar reads as being in front. */
.svc-card__avatars { display: flex; flex: none; }
.svc-card__avatars img + img {
  margin-left: -12px;
  box-shadow: 0 0 0 2px var(--white);
}

/* --------------------------------------------------------------------------
   11. Services page — persistent side navigation + panels
   -------------------------------------------------------------------------- */
.svc-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* Grid items default to min-width:auto, so the mobile chip rail — a flex row of
   eight fixed-width chips — reported its full ~1020px as the track's minimum
   and dragged the entire page wider than the viewport. Zeroing it lets the rail
   scroll inside itself, which is what the overflow-x on it was always for. */
.svc-layout > * { min-width: 0; }

.svc-nav {
  position: sticky;
  top: calc(var(--header-h) + 1.75rem);
  max-height: calc(100vh - var(--header-h) - 3.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.svc-nav__title {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: .9rem;
  margin: 0 0 .5rem;
  border-bottom: 1px solid var(--sand);
}
.svc-nav__list { list-style: none; margin: 0; padding: 0; }
.svc-nav__list li { margin: 0; }

/* Thirteen services are too many to scan as one flat list, so the sidebar is
   broken into departments. The heading is a plain <li>, not a nested list, to
   keep every button a direct sibling inside the single tablist. */
.svc-nav__group {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 1.15rem .75rem .5rem 1rem;
  margin: 0;
}
.svc-nav__list li:first-child .svc-nav__group { padding-top: .35rem; }

.svc-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--sand);
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--charcoal);
  padding: .72rem .75rem .72rem 1rem;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), padding-left .2s var(--ease);
}
.svc-nav__link svg { flex: none; opacity: 0; transform: translateX(-4px); transition: all .2s var(--ease); }
.svc-nav__link:hover {
  background: var(--cream-2);
  color: var(--accent);
  padding-left: 1.2rem;
}
.svc-nav__link.is-active {
  background: var(--accent-wash);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.svc-nav__link.is-active svg { opacity: 1; transform: translateX(0); }

.svc-nav__aside {
  margin-top: 1.75rem;
  padding: 1.5rem;
  background: var(--charcoal);
  border-radius: var(--radius-lg);
  color: rgba(255,255,255,.72);
  font-size: .875rem;
  line-height: 1.6;
}
.svc-nav__aside h4 {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.075rem;
  font-weight: 500;
  margin-bottom: .5rem;
}
.svc-nav__aside .btn { width: 100%; margin-top: 1rem; }

/* Panels */
.svc-panel { display: none; animation: fadeUp .45s var(--ease) both; }
.svc-panel.is-active { display: block; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.svc-panel__head { margin-bottom: 2rem; }
.svc-panel h2 { font-size: clamp(1.75rem, 3.2vw, 2.35rem); margin-bottom: .35em; }
.svc-panel__lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-muted);
}
.svc-panel__body { max-width: 68ch; }
.svc-panel__body h3 {
  font-size: 1.2rem;
  margin-top: 2.25rem;
  margin-bottom: .65rem;
}

/* Checklist used for sub-services and process lists */
.tick-list { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; }
.tick-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .7rem;
  color: var(--ink);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(45deg);
}

/* Numbered process steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0; }
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3.25rem;
  padding-bottom: 1.5rem;
  margin: 0;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: -.1em;
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--accent);
  background: var(--accent-wash);
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.steps li::after {
  content: "";
  position: absolute;
  left: 17px; top: 40px; bottom: 6px;
  width: 1px;
  background: var(--sand);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps strong { display: block; margin-bottom: .15rem; }

/* Attorney + enquiry block that sits at the foot of every service panel */
.svc-attorney {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 1.75rem;
  align-items: center;
  margin-top: 2.75rem;
  padding: 1.75rem;
  background: var(--white);
  border: 1px solid var(--sand);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.svc-attorney__photo {
  width: 132px; height: 158px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream-2);
}
.svc-attorney__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .35rem;
}
.svc-attorney__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--charcoal);
  margin-bottom: .1rem;
}
.svc-attorney__role {
  font-size: .875rem;
  color: var(--accent);
  margin-bottom: .9rem;
}
.svc-attorney__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .9rem;
}
.svc-attorney__note {
  font-size: .9375rem;
  color: var(--ink-muted);
  margin: 0;
}

/* Services handled by two attorneys: drop the single portrait column and show
   both people side by side above the shared enquiry buttons. */
.svc-attorney--pair { grid-template-columns: 1fr; }
.svc-attorney__people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.75rem;
  margin-bottom: 1.25rem;
}
.svc-attorney__person {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.svc-attorney__person img {
  width: 76px; height: 92px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream-2);
  flex: none;
}
.svc-attorney__person .svc-attorney__name { font-size: 1.15rem; }
.svc-attorney__person .svc-attorney__role { margin-bottom: .3rem; }

/* Mobile chip rail — keeps every service reachable while reading */
.svc-rail { display: none; }

/* --------------------------------------------------------------------------
   12. Attorney cards
   -------------------------------------------------------------------------- */
.person {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.person__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--cream-2);
}
.person__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.person:hover .person__media img { transform: scale(1.04); }

.person__body { padding: 1.5rem 1.65rem 1.75rem; }
.person__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--charcoal);
  margin-bottom: .15rem;
}
.person__role {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .9rem;
}
.person__desc {
  font-size: .9375rem;
  color: var(--ink-muted);
  margin-bottom: 1.15rem;
}
.person__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.25rem;
}
.tag {
  font-size: .72rem;
  letter-spacing: .04em;
  padding: .3rem .65rem;
  background: var(--cream-2);
  border: 1px solid var(--sand);
  border-radius: 100px;
  color: var(--ink-muted);
}

/* Full attorney profile row */
.profile {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--sand);
}
.profile:last-of-type { border-bottom: 0; }
.profile__media { position: relative; }
.profile__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  background: var(--cream-2);
}
.profile__name { margin-bottom: .1em; }
.profile__role {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.profile__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--sand);
}
.profile__contact-item { font-size: .9375rem; }
.profile__contact-item span {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .2rem;
}

/* --------------------------------------------------------------------------
   13. Accent band
   -------------------------------------------------------------------------- */
.band {
  background: var(--accent);
  color: rgba(255,255,255,.85);
  position: relative;
  overflow: hidden;
}
.band::after {
  /* Very soft depth so the flat red doesn't feel like a warning banner */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.12), transparent 60%);
  pointer-events: none;
}
.band .wrap { position: relative; z-index: 1; }
.band h2 { color: #fff; }
.band .eyebrow { color: rgba(255,255,255,.85); }
.band .eyebrow::before { background: rgba(255,255,255,.6); }

.band__split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-sm);
}

.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--charcoal);
  margin-bottom: .45rem;
}
.field label .req { color: var(--accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  /* Must not drop below 16px — iOS Safari auto-zooms the page on focus for
     anything smaller, which throws the form off-screen mid-typing. */
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--sand-2);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235D666C' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(153, 39, 45, .12);
}
.field input:invalid:not(:placeholder-shown) { border-color: var(--accent-light); }

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

.form-note {
  font-size: .8125rem;
  color: var(--ink-muted);
  line-height: 1.55;
  margin-top: 1rem;
}

.form-success {
  display: none;
  text-align: center;
  padding: 2rem 1rem;
}
.form-success.is-visible { display: block; }
.form-success__icon {
  width: 56px; height: 56px;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
}
.form-success h3 { margin-bottom: .4rem; }
.form-success p { color: var(--ink-muted); }
.form-devnote {
  margin-top: 1.25rem;
  font-size: .78rem;
  font-style: italic;
  color: var(--ink-muted);
  opacity: .8;
}

/* --------------------------------------------------------------------------
   15. Enquiry modal
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.modal.is-open { display: flex; }
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 34, 39, .6);
  backdrop-filter: blur(3px);
  animation: fade .25s var(--ease) both;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.modal__dialog {
  position: relative;
  z-index: 1;
  width: min(600px, 100%);
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: var(--cream);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  animation: fadeUp .3s var(--ease) both;
}
.modal__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--sand);
  border-radius: 50%;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.modal__close:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.modal__head { margin-bottom: 1.5rem; padding-right: 2.5rem; }
.modal__head h3 { margin-bottom: .3rem; }
.modal__head p { color: var(--ink-muted); font-size: .9375rem; margin: 0; }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   16. Contact page bits
   -------------------------------------------------------------------------- */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--sand);
  margin: 0;
}
.contact-list li:first-child { padding-top: 0; }
.contact-list li:last-child { border-bottom: 0; }
.contact-list__icon {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--accent-wash);
  color: var(--accent);
  border-radius: var(--radius);
}
.contact-list__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .2rem;
}
.contact-list__value {
  font-size: 1.05rem;
  color: var(--charcoal);
  line-height: 1.5;
}
.contact-list__value a { color: var(--charcoal); }
.contact-list__value .contact-list__dept {
  display: block;
  font-size: .8rem;
  color: var(--ink-muted);
  margin: .05rem 0 .55rem;
}
.contact-list__value .contact-list__dept:last-child { margin-bottom: 0; }
.contact-list__value a:hover { color: var(--accent); }

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--sand);
  box-shadow: var(--shadow-sm);
  background: var(--cream-2);
}
.map-frame iframe { display: block; width: 100%; height: 420px; border: 0; }

/* --------------------------------------------------------------------------
   17. Prose (privacy / sitemap)
   -------------------------------------------------------------------------- */
.prose h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.prose h3 { font-size: 1.15rem; margin-top: 1.75rem; }
.prose ul { padding-left: 1.25rem; }
.prose > *:first-child { margin-top: 0; }

/* Numbered clauses (privacy policy): 1., 2. … with sub-clauses 6.1, 6.2 … */
.prose ol.clauses,
.prose ol.clauses ol { list-style: none; padding-left: 0; }
.prose ol.clauses { counter-reset: clause; }
.prose ol.clauses > li {
  counter-increment: clause;
  position: relative;
  padding-left: 2.25rem;
  margin-top: .75rem;
}
.prose ol.clauses > li::before {
  content: counter(clause) ".";
  position: absolute;
  left: 0;
  font-weight: 600;
  color: var(--accent);
}
.prose ol.clauses ol { counter-reset: subclause; margin-top: .5rem; }
.prose ol.clauses ol > li {
  counter-increment: subclause;
  position: relative;
  padding-left: 2.75rem;
  margin-top: .4rem;
}
.prose ol.clauses ol > li::before {
  content: counter(clause) "." counter(subclause);
  position: absolute;
  left: 0;
  color: var(--ink-muted);
}
.prose .toc { columns: 2 16rem; column-gap: 2rem; }
.prose .toc li { break-inside: avoid; }

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.sitemap-col {
  background: var(--white);
  border: 1px solid var(--sand);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.sitemap-col h3 {
  font-size: 1.075rem;
  padding-bottom: .75rem;
  margin-bottom: .75rem;
  border-bottom: 1px solid var(--sand);
}
.sitemap-col ul { list-style: none; padding: 0; margin: 0; }
.sitemap-col li { margin-bottom: .5rem; }
.sitemap-col a { font-size: .9375rem; color: var(--charcoal); }
.sitemap-col a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--charcoal);
  color: rgba(255,255,255,.65);
  font-size: .9375rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer__brand img {
  width: 210px;
  /* Invert the charcoal wordmark to white for the dark footer */
  filter: brightness(0) invert(1);
  opacity: .95;
  margin-bottom: 1.25rem;
}
.footer__brand p { font-size: .9375rem; line-height: 1.65; max-width: 34ch; }

.footer__title {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.25rem;
}
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: .6rem; }
.footer__list a { color: rgba(255,255,255,.65); font-size: .9375rem; }
.footer__list a:hover { color: #fff; }

.footer__contact { font-style: normal; line-height: 1.85; }
.footer__contact a { color: rgba(255,255,255,.65); }
.footer__contact a:hover { color: #fff; }
.footer__contact strong { color: #fff; font-weight: 500; }

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
  padding: .6rem 1rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius);
  color: rgba(255,255,255,.75);
  font-size: .875rem;
}
.footer__social:hover { border-color: #fff; color: #fff; }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.5);
}
.footer__bottom nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer__bottom a { color: rgba(255,255,255,.5); }
.footer__bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   18b. Back to top
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--charcoal);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  /* Hidden until the visitor is far enough down to want it */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .28s var(--ease), transform .28s var(--ease),
              visibility .28s, background-color .22s var(--ease);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.to-top svg { transition: transform .22s var(--ease); }
.to-top:hover svg { transform: translateY(-2px); }

/* Sits above the sticky mobile service rail without crowding it */
@media (max-width: 620px) {
  .to-top { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .nav { gap: 1.1rem; }
  .nav__link { font-size: .8125rem; }
  .svc-layout { grid-template-columns: 250px 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 90px; }

  .brand img { width: clamp(130px, 34vw, 150px); }

  .topbar__inner { justify-content: center; }
  .topbar .topbar__item--addr { display: none; }

  .nav-toggle { display: flex; }

  /* The nav goes absolute at this width, taking its margin-left:auto with it —
     without this the call button and toggle sit hard up against the logo in the
     middle of the bar with the whole right half empty. */
  .header__actions { margin-left: auto; }

  .nav {
    /* Anchored to the header itself rather than to a measured viewport offset,
       so the panel stays flush under the logo bar whether or not the contact
       strip has slid away, and rides along with the header as it slides. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--sand);
    box-shadow: var(--shadow-md);
    padding: .5rem var(--gutter) 1.5rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .35s var(--ease), opacity .25s var(--ease), visibility .25s;
  }
  .nav.is-open {
    max-height: calc(100vh - var(--header-h));
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
  }
  .nav__link {
    padding: 1rem .25rem;
    border-bottom: 1px solid var(--sand);
    font-size: .9375rem;
  }
  .nav__link::after { display: none; }

  /* Phone stays top-right, collapses to an icon */
  .btn--call { padding: .8rem .95rem; }
  .btn--call .btn__label { display: none; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media::before { display: none; }
  .stat-badge { right: 12px; bottom: -18px; }

  .profile { grid-template-columns: 1fr; }
  .profile__media img { max-width: 320px; }

  .band__split { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr 1fr; }

  .sitemap-grid { grid-template-columns: 1fr 1fr; }

  /* Services: sidebar becomes a sticky horizontal rail so every service
     stays one tap away while reading — same intent as the desktop sidebar. */
  .svc-layout { grid-template-columns: 1fr; gap: 0; }
  .svc-nav { display: none; }

  .svc-rail {
    display: block;
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    margin: 0 calc(var(--gutter) * -1) 2rem;
    padding: .75rem var(--gutter);
    background: rgba(251, 248, 245, .97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sand);
  }
  /* Arrows flank the rail so it reads as scrollable even when the chips
     happen to end near the edge. Edge fades sit under them, and both are
     driven by .can-prev / .can-next set in main.js. */
  .svc-rail__inner {
    --rail-arrow: 32px;
    --rail-gap: .4rem;
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--rail-gap);
  }
  .svc-rail__inner::before,
  .svc-rail__inner::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    width: 26px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s var(--ease);
  }
  .svc-rail__inner::before {
    left: calc(var(--rail-arrow) + var(--rail-gap));
    background: linear-gradient(to right, var(--cream), rgba(251, 248, 245, 0));
  }
  .svc-rail__inner::after {
    right: calc(var(--rail-arrow) + var(--rail-gap));
    background: linear-gradient(to left, var(--cream), rgba(251, 248, 245, 0));
  }
  .svc-rail.can-prev .svc-rail__inner::before,
  .svc-rail.can-next .svc-rail__inner::after { opacity: 1; }

  .svc-rail__arrow {
    flex: none;
    width: var(--rail-arrow);
    height: var(--rail-arrow);
    display: grid;
    place-items: center;
    padding: 0;
    z-index: 2;
    border: 1px solid var(--sand-2);
    border-radius: 50%;
    background: var(--white);
    color: var(--charcoal);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: opacity .2s var(--ease), background-color .2s var(--ease),
                border-color .2s var(--ease), color .2s var(--ease);
  }
  .svc-rail__arrow:hover:not([disabled]),
  .svc-rail__arrow:active:not([disabled]) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .svc-rail__arrow[disabled] {
    opacity: .25;
    cursor: default;
    box-shadow: none;
  }

  .svc-rail__scroll {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .svc-rail__scroll::-webkit-scrollbar { display: none; }
  .svc-rail__chip {
    flex: none;
    scroll-snap-align: center;
    font-family: var(--font-body);
    font-size: .8125rem;
    white-space: nowrap;
    padding: .55rem 1rem;
    border: 1px solid var(--sand-2);
    background: var(--white);
    color: var(--charcoal);
    border-radius: 100px;
    cursor: pointer;
    transition: all .2s var(--ease);
  }
  .svc-rail__chip.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(153, 39, 45, .28);
  }

  .svc-attorney { grid-template-columns: 1fr; text-align: left; }
  .svc-attorney__photo { width: 110px; height: 132px; }
  .svc-attorney__people { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }

  .trust__inner { grid-template-columns: 1fr; }
  .trust__item { border-right: 0; border-bottom: 1px solid var(--sand); padding-block: 1.5rem; }
  .trust__item:last-child { border-bottom: 0; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  .field-row { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__bottom nav { margin-left: 0; gap: 1rem; }

  .sitemap-grid { grid-template-columns: 1fr; }

  .btn { width: 100%; }
  .btn--call, .btn--sm, .link-arrow { width: auto; }
  .btn-row .btn { width: 100%; }

  .stat-badge { position: static; margin-top: 1rem; max-width: none; }

  /* Side by side these two wrap onto separate rows at ragged widths. Stacked
     full-width they read as a pair. */
  .svc-attorney__meta { flex-direction: column; align-items: stretch; }
}

/* --------------------------------------------------------------------------
   21. Print & motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html, .svc-rail__scroll { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .modal, .btn, .svc-nav, .svc-rail, .to-top { display: none !important; }
  .svc-panel { display: block !important; }
  body { background: #fff; }
}