/* =============================================================================
   HITESH H. VIRDA, ADVOCATE — STYLESHEET
   -----------------------------------------------------------------------------
   Visual language taken from the firm's own artwork:

     · Monochrome only. The logo, the business card and the office signboard are
       pure black and white, so the site is too — ink on warm paper, reversed to
       paper on ink for the signboard-style bands. The single exception is the
       WhatsApp green, which is functional rather than decorative.
     · Cinzel for display type — the closest web face to the engraved small-caps
       serif of the "LAWYER'S DESK" wordmark and the "BHAVESH R. BAMBHVA" name
       setting on the card.
     · Manrope for text and interface — matching the geometric, letter-spaced
       sans of the "LAW FIRM | ADVOCATES | LEGAL ADVISORS" tagline.
     · The pointed hexagon from the reverse of the business card is the recurring
       device: the emblem seal and the map marker. The advocate's portrait is a
       circle, so the photograph reads as a portrait rather than a brand shape.
     · Hairline rules under names, as ruled beneath the advocate's name on the
       card. The oversized ghosted mark bleeding off the edge repeats the card's
       front face.

   CONTENTS
     1.  Tokens
     2.  Reset & base
     3.  Typography primitives
     4.  Layout primitives
     5.  Icons
     6.  Buttons & links
     7.  Site header & navigation
     8.  Hero
     9.  About
     10. Advocate profile
     11. Practice areas
     12. Legal insights
     13. Office & map
     14. Contact form
     15. Footer
     16. Mobile quick action bar
     17. Motion
     18. Entry disclaimer
   ========================================================================== */


/* ═══════════════════════════════════════════════════════════════ 1. TOKENS ══ */

:root {
  /* Ink — from the signboard and logo */
  --ink:        #0d0d0f;
  --ink-2:      #17171b;
  --ink-3:      #212127;
  --ink-line:   #2f2f37;
  --ink-text:   #d9d5cd;
  --ink-text-2: #8f8b83;

  /* Paper — warm off-white, as the card stock reads */
  --paper:      #faf8f4;
  --paper-2:    #f2eee7;
  --paper-3:    #e9e4da;
  --line:       #ddd7ca;
  --line-soft:  #e9e4da;

  --text:       #14141a;
  --text-2:     #55524c;
  --text-3:     #6f6b62;   /* 5.0:1 on paper — WCAG AA at small sizes */

  /* Functional only */
  --wa:         #107a5a;
  --wa-dark:    #0c6349;
  --danger:     #a3211d;

  --font-display: "Cinzel", "Times New Roman", Georgia, serif;
  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Shared by .section's padding and its anchor offset, so a jump to a
     section lands clear of the header at every width. */
  --section-pad: clamp(3.75rem, 2.4rem + 6vw, 7rem);

  --gutter: clamp(1.25rem, 4.2vw, 3rem);
  --maxw: 1180px;
  --header-h: 68px;

  --radius: 2px;
  --radius-lg: 3px;

  --shadow-sm: 0 1px 2px rgba(13, 13, 15, .05);
  --shadow-md: 0 8px 26px -14px rgba(13, 13, 15, .28);
  --shadow-lg: 0 22px 60px -30px rgba(13, 13, 15, .42);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .28s;

  /* Pointed hexagon — the device on the reverse of the business card */
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

@media (min-width: 1024px) {
  :root { --header-h: 84px; }
}


/* ══════════════════════════════════════════════════════ 2. RESET & BASE ══ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Room for the mobile quick action bar so it never covers content. */
@media (max-width: 1023px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.15; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
address { font-style: normal; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-ink :focus-visible,
.section--practice :focus-visible,
.sitefooter :focus-visible { outline-color: var(--paper); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem;
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }


/* ═══════════════════════════════════════════ 3. TYPOGRAPHY PRIMITIVES ══ */

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.15rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.eyebrow__num {
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text);
  padding-right: .6rem;
  border-right: 1px solid var(--line);
}
.eyebrow--rule::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--text-3);
  flex: none;
}
.section__head--center .eyebrow,
.section__head .eyebrow { justify-content: inherit; }

.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.85rem);
  line-height: 1.18;
  letter-spacing: .005em;
  margin: 0 0 1.1rem;
  text-wrap: balance;
}

.section__lead,
.lede {
  color: var(--text-2);
  font-size: clamp(1rem, .97rem + .18vw, 1.0625rem);
  max-width: 62ch;
}
.lede {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: var(--text);
  line-height: 1.6;
}
.lede strong { font-weight: 600; }

.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--line);
  transition: text-decoration-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link:hover { text-decoration-color: currentColor; }

.link--arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
}
.link--arrow::after {
  content: "";
  width: .7em; height: .7em;
  background: currentColor;
  -webkit-mask: var(--ico-arrow) center / contain no-repeat;
  mask: var(--ico-arrow) center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.link--arrow:hover { border-bottom-color: currentColor; }
.link--arrow:hover::after { transform: translateX(3px); }


/* ══════════════════════════════════════════════ 4. LAYOUT PRIMITIVES ══ */

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-pad);
  /* Land the heading 1.5rem under the header, not 1.5rem under the section's
     own top padding. The subtraction is what removes the dead space; the value
     goes slightly negative on a wide screen, which is exactly what is wanted. */
  scroll-margin-top: calc(var(--header-h) + 1.5rem - var(--section-pad));
}

.section__head {
  max-width: 60ch;
  margin-bottom: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
}
.section__head--left { max-width: 58ch; }

.section--profile   { background: var(--paper-2); }
.section--contact   { background: var(--paper-2); }

/* Signboard band — white on black, as the firm's own board is set. */
.section--practice {
  background: var(--ink);
  color: var(--ink-text);
}
.section--practice .section__title { color: var(--paper); }
.section--practice .eyebrow { color: var(--ink-text-2); }
.section--practice .eyebrow__num { color: var(--paper); border-right-color: var(--ink-line); }
.section--practice .section__lead { color: var(--ink-text-2); }
.section--practice .link { text-decoration-color: var(--ink-line); }

/* Hairline between the two paper sections at the top of the page. */
.section--about { border-bottom: 1px solid var(--line-soft); }
.section--office { border-bottom: 1px solid var(--line-soft); }


/* ═══════════════════════════════════════════════════════════ 5. ICONS ══ */
/* Monochrome masks: they inherit currentColor, so one definition works on both
   paper and ink and no icon font or SVG library is needed. */

:root {
  --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  --ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --ico-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
  --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 6 19 12 13 18'/%3E%3C/svg%3E");
  --ico-wa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.04 2C6.6 2 2.17 6.43 2.17 11.87c0 1.74.46 3.44 1.32 4.94L2 22.2l5.53-1.45a9.85 9.85 0 0 0 4.51 1.1h.01c5.44 0 9.87-4.43 9.87-9.87S17.48 2 12.04 2zm0 18.02h-.01a8.2 8.2 0 0 1-4.17-1.14l-.3-.18-3.1.81.83-3.02-.2-.31a8.16 8.16 0 0 1-1.25-4.36c0-4.52 3.68-8.2 8.21-8.2a8.16 8.16 0 0 1 8.19 8.21c0 4.52-3.68 8.19-8.2 8.19zm4.5-6.14c-.25-.12-1.46-.72-1.68-.8-.23-.08-.39-.12-.55.13-.17.24-.64.79-.78.96-.14.16-.29.18-.53.06-.25-.12-1.04-.38-1.98-1.22-.73-.65-1.23-1.46-1.37-1.7-.15-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.09-.17.04-.31-.02-.43-.06-.12-.55-1.33-.76-1.82-.2-.48-.4-.41-.55-.42h-.47c-.16 0-.43.06-.65.3-.22.25-.85.84-.85 2.04s.87 2.37 1 2.53c.12.17 1.72 2.62 4.16 3.67.58.25 1.03.4 1.39.51.58.19 1.11.16 1.53.1.47-.07 1.46-.6 1.66-1.17.21-.58.21-1.07.15-1.17-.06-.11-.22-.17-.47-.29z'/%3E%3C/svg%3E");
}

.ico,
[class*="ico--"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ico--phone { -webkit-mask-image: var(--ico-phone); mask-image: var(--ico-phone); }
.ico--pin   { -webkit-mask-image: var(--ico-pin);   mask-image: var(--ico-pin); }
.ico--doc   { -webkit-mask-image: var(--ico-doc);   mask-image: var(--ico-doc); }
.ico--wa    { -webkit-mask-image: var(--ico-wa);    mask-image: var(--ico-wa); }


/* ═════════════════════════════════════════════════ 6. BUTTONS & LINKS ══ */

.btn {
  --btn-py: .8rem;
  --btn-px: 1.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: var(--btn-py) var(--btn-px);
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn .ico, .btn [class*="ico--"] { font-size: 1.05em; }

.btn--solid {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--solid:hover { background: #000; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn--solid:active { transform: translateY(0); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--paper); transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--ink-line);
}
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn--wa {
  background: var(--wa);
  color: #fff;
  border-color: var(--wa);
}
.btn--wa:hover { background: var(--wa-dark); border-color: var(--wa-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.btn--sm { --btn-py: .55rem; --btn-px: .95rem; min-height: 40px; font-size: .8125rem; }
.btn--lg { --btn-py: 1rem; --btn-px: 1.7rem; min-height: 54px; font-size: .9375rem; }
.btn--block { display: flex; width: 100%; }

.btn[aria-disabled="true"],
.btn:disabled { opacity: .55; pointer-events: none; }


/* ══════════════════════════════════ 7. SITE HEADER & NAVIGATION ══ */

.brand-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.siteheader {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Near-opaque instead of frosted. A backdrop-filter on a sticky header
     forces the compositor to re-blur everything behind it on every scroll
     frame, which stutters badly on integrated graphics. At .94 alpha the
     frosted effect was barely perceptible anyway, so this costs nothing
     visually and removes the jank entirely. */
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.siteheader.is-stuck {
  border-bottom-color: var(--line);
}

.siteheader__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  transition: min-height var(--dur) var(--ease);
}

/* — Brand lockup: the extracted mark beside the wordmark, set in Cinzel — */
.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: none;
  min-width: 0;
}
.brand__mark {
  display: block;
  width: 26px;
  color: var(--ink);
  flex: none;
  transition: width var(--dur) var(--ease);
}
.brand__mark svg { display: block; width: 100%; height: auto; }
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.9375rem, .82rem + .5vw, 1.1875rem);
  letter-spacing: .012em;
  line-height: 1.1;
  white-space: nowrap;
}
/* Hidden on the very smallest screens so the header lockup never forces the
   page wider than the viewport; the tagline returns from 360px up. */
.brand__tagline {
  display: none;
  font-size: .5rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.4;
  margin-top: 2px;
  white-space: nowrap;
}
.brand__tagline i { font-style: normal; opacity: .5; margin-inline: .1em; }

@media (min-width: 360px) {
  .brand__tagline { display: block; }
}
@media (min-width: 480px) {
  .brand__mark { width: 30px; }
  .brand__tagline { font-size: .5625rem; }
}
@media (min-width: 1024px) {
  .brand { gap: .95rem; }
  .brand__mark { width: 36px; }
  .brand__tagline { font-size: .625rem; letter-spacing: .19em; }
}

.siteheader__actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: none;
}

/* — Toggle — */
.navtoggle {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.navtoggle:hover { border-color: var(--ink); }
.navtoggle__bars { display: grid; gap: 4px; width: 18px; }
.navtoggle__bars i {
  display: block; height: 1.5px; width: 100%;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s var(--ease), width .3s var(--ease);
  transform-origin: center;
}
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] .navtoggle__bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* — Navigation: drawer below 900px, inline above — */
.nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem var(--gutter) 2rem;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  /* Visibility flips instantly on open so the drawer can take focus at once,
     and is held back until the fade has finished on close. Transitioning
     visibility over a duration would report `hidden` at the moment the drawer
     opens, and focus() on a hidden element is silently refused. */
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility 0s linear .24s;
}
.nav.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity .24s var(--ease), transform .24s var(--ease), visibility 0s linear 0s;
}

.nav__list { display: flex; flex-direction: column; }
.nav__link {
  display: block;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: .02em;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.nav__link:hover { padding-left: .4rem; }
.nav__link[aria-current="true"] { font-weight: 600; }

.nav__drawerfoot {
  display: grid;
  gap: .6rem;
  margin-top: 1.5rem;
}

@media (min-width: 1024px) {
  .navtoggle { display: none; }
  .nav {
    position: static;
    display: flex;
    align-items: center;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-height: none;
    overflow: visible;
    transform: none;
    opacity: 1;
    visibility: visible;
    margin-inline: auto;
  }
  .nav__list { flex-direction: row; gap: clamp(.9rem, 1.6vw, 1.9rem); }
  .nav__link {
    position: relative;
    padding: .35rem 0;
    border: 0;
    font-family: var(--font-sans);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--text-2);
  }
  .nav__link:hover { padding-left: 0; color: var(--text); }
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    height: 1px; width: 100%;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="true"]::after { transform: scaleX(1); }
  .nav__link[aria-current="true"],
  .nav__link[aria-current="page"] { color: var(--text); }
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__drawerfoot { display: none; }
}

/* Just above the drawer breakpoint the nav tightens so seven items still sit
   on one line without crowding the lockup. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav__list { gap: .8rem; }
  .nav__link { font-size: .75rem; letter-spacing: .075em; }
}

body.nav-open { overflow: hidden; }

/* Scrim behind the open drawer: it separates the menu from the page and, since
   a click on it lands on <body>, the outside-click handler closes the drawer. */
body.nav-open::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(13, 13, 15, .45);
  animation: scrim-in .24s var(--ease);
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1024px) { body.nav-open::after { display: none; } }


/* ═══════════════════════════════════════════════════════════════ 8. HERO ══ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.25rem, 1.5rem + 8vw, 7.5rem) clamp(3.5rem, 2rem + 7vw, 8rem);
  background: var(--paper);
}

/* The oversized ghosted mark bleeding off the edge, exactly as the front of the
   firm's business card is composed. */
.hero__watermark {
  position: absolute;
  top: 50%;
  left: -14%;
  width: clamp(320px, 52vw, 720px);
  color: var(--ink);
  opacity: .045;
  transform: translateY(-50%) rotate(-8deg);
  pointer-events: none;
  z-index: 0;
}
.hero__watermark svg { width: 100%; height: auto; display: block; }
@media (min-width: 900px) {
  /* Sized so the rotated bounding box clears the hero top and bottom,
     not so the artwork alone measures nicely: at 6deg the box is about
     1.48x the width given here. Held inside the right edge too, so the
     whole mark reads rather than a cropped corner of it. */
  .hero__watermark {
    left: auto;
    right: 3%;
    top: 50%;
    width: clamp(300px, 34vw, 480px);
    opacity: .055;
    transform: translateY(-50%) rotate(6deg);
  }
}

.hero__inner { position: relative; z-index: 1; }
.hero__body { max-width: 46rem; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.35rem, 1.1rem + 6.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: .008em;
  margin: 0 0 1.15rem;
  text-wrap: balance;
}

.hero__tagline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .7rem;
  margin: 0 0 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: clamp(.6875rem, .62rem + .3vw, .8125rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-2);
  max-width: 34rem;
}
.hero__tagline i { font-style: normal; color: var(--line); }

.hero__lead {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 40rem;
  margin-bottom: 2.25rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
}
@media (max-width: 419px) {
  .hero__actions { display: grid; }
}

.hero__facts {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 46rem;
}
.hero__facts li {
  background: var(--paper);
  padding: .95rem 1.1rem;
  font-size: .9375rem;
  color: var(--text);
}
.hero__factlabel {
  display: block;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .28rem;
}
@media (min-width: 720px) {
  .hero__facts { grid-template-columns: repeat(3, 1fr); }
}

.hero__scroll {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 1;
  padding: .5rem;
}
.hero__scrollline {
  display: block;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, transparent, var(--text-3));
  position: relative;
  overflow: hidden;
}
.hero__scrollline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  animation: scrollcue 2.4s var(--ease) infinite;
}
@keyframes scrollcue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
@media (min-width: 1024px) and (min-height: 720px) {
  .hero__scroll { display: block; }
}


/* ══════════════════════════════════════════════════════════════ 9. ABOUT ══ */

.about__grid {
  display: grid;
  gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
@media (min-width: 940px) {
  .about__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
}

.about__intro > p { max-width: 60ch; }
.about__intro .lede { margin-bottom: 1.1em; }

.pillars {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
}
.pillar { background: var(--paper); padding: 1.35rem 1.4rem; }
.pillar__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: .4rem;
}
.pillar__text { margin: 0; font-size: .9375rem; color: var(--text-2); line-height: 1.55; }

@media (min-width: 620px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}

/* — Emblem seal, framed in the card's hexagon — */
.about__seal { display: flex; justify-content: center; }
.seal {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 1 / 1.1547;
  clip-path: var(--hex);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 2rem 1.5rem;
  text-align: center;
}
.seal__emblem { display: block; width: 26%; color: var(--paper); }
.seal__emblem svg { width: 100%; height: auto; display: block; }
.seal__word {
  margin: .7rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
}
.seal__sub {
  margin: 0;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-text-2);
}


/* ═══════════════════════════════════════════════════ 10. ADVOCATE PROFILE ══ */
/* One advocate, so this is a single editorial profile block rather than a grid
   of cards: portrait on the left, name / credentials / actions on the right. */

.profile {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
}
@media (min-width: 720px) {
  .profile {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    align-items: start;
  }
}

.profile__portraitcol { display: flex; justify-content: center; }

/* Portrait frame — a circle. The hairline ring keeps the edge defined where the
   photograph's pale background meets the paper. Until a real photograph is
   supplied it holds the monogram over a faint mark. */
.profile__portrait {
  position: relative;
  width: min(230px, 62vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(13, 13, 15, .14);
}
.profile__portrait img { width: 100%; height: 100%; object-fit: cover; }
.profile__monogram {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  font-weight: 600;
  letter-spacing: .06em;
  position: relative;
  z-index: 1;
}
.profile__portraitmark {
  position: absolute;
  inset: auto 0 -6% 0;
  margin-inline: auto;
  width: 48%;
  opacity: .16;
  color: var(--paper);
}
.profile__portraitmark svg { width: 100%; height: auto; display: block; }

.profile__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.15;
  overflow-wrap: break-word;
}
/* The hairline ruled beneath the advocate's name on the card. */
.profile__rule {
  display: block;
  width: 56px; height: 1px;
  background: var(--ink);
  margin: .85rem 0 .8rem;
}
.profile__role {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0 0 1.6rem;
}

.profile__facts {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 0 0 1.75rem;
}
@media (min-width: 560px) {
  .profile__facts { grid-template-columns: repeat(2, 1fr); }
  /* An odd final fact spans both columns, so no empty cell is left showing. */
  .profile__factrow:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.profile__factrow { background: var(--paper); padding: .9rem 1.05rem; }
.profile__factrow dt {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .25rem;
}
.profile__factrow dd { margin: 0; font-size: .9375rem; color: var(--text); }

.profile__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.profile__actions .btn { flex: 1 1 auto; min-width: 10rem; }
@media (max-width: 419px) {
  .profile__actions { display: grid; }
  .profile__actions .btn { min-width: 0; }
}


/* ════════════════════════════════════════════════════ 11. PRACTICE AREAS ══ */

.practice {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink-line);
  counter-reset: practice;
}
/* Two columns rather than three: every area carries a line of description,
   and three columns squeeze it to three or four wrapped lines. */
@media (min-width: 760px) { .practice { grid-template-columns: repeat(2, 1fr); column-gap: clamp(2rem, 4vw, 4.5rem); } }

.practice__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.25rem .25rem;
  border-bottom: 1px solid var(--ink-line);
  transition: padding-left var(--dur) var(--ease), color var(--dur) var(--ease);
}
.practice__item:hover { padding-left: .6rem; color: var(--paper); }
.practice__num {
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--ink-text-2);
  flex: none;
}
.practice__title {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  font-weight: 500;
  letter-spacing: .015em;
  color: var(--paper);
}
.practice__note {
  display: block;
  margin-top: .25rem;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-text-2);
}

.practice__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.1rem;
  padding: .4rem .8rem;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-text-2);
}
.practice__badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}


/* ═══════════════════════════════════════════════════ 12. LEGAL INSIGHTS ══ */

/* The home page's window on to the knowledge centre. It sits between the ink of
   the practice areas and the paper of the office, so it takes the paper.

   The entries themselves are written into index.html by the insights generator;
   these are only the styles they land in. */

.section--insights { border-bottom: 1px solid var(--line-soft); }

.hinsights {
  display: grid;
  gap: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  margin-top: clamp(2rem, 1.6rem + 1.6vw, 3rem);
}

@media (min-width: 700px) {
  .hinsights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.hcard { position: relative; }

.hcard__media {
  display: block;
  margin-bottom: .95rem;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.hcard__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.hcard:hover .hcard__media img { transform: scale(1.04); }

.hcard__cat {
  margin: 0 0 .4rem;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.hcard__title {
  margin: 0 0 .5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: .01em;
  text-wrap: balance;
}

/* The whole card is the hit area; the accessible name stays the title. */
.hcard__title a::after { content: ""; position: absolute; inset: 0; }

.hcard__meta {
  margin: 0;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.hinsights__more { margin: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem) 0 0; }


/* ══════════════════════════════════════════════════════ 13. OFFICE & MAP ══ */

.office__grid {
  display: grid;
  gap: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  align-items: start;
}
@media (min-width: 940px) {
  .office__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.office__address {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + .6vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .01em;
  margin-bottom: 1.6rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--ink);
}
.office__line { display: block; }
.office__address--sm {
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.6;
  border-left-width: 1px;
  border-left-color: var(--line);
  padding-left: .9rem;
  margin-bottom: 1rem;
}

.office__meta {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 0 0 1.75rem;
}
.office__metaitem { background: var(--paper); padding: .9rem 1.1rem; }
.office__meta dt {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .25rem;
}
.office__meta dd { margin: 0; font-size: .9375rem; }
@media (min-width: 520px) { .office__meta { grid-template-columns: repeat(2, 1fr); } }

.office__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 419px) { .office__actions { display: grid; } }

/* — Map: a facade until the visitor asks for it — */
.office__mapwrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-2);
}
.mapfacade {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, var(--line-soft) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, var(--line-soft) 38px 39px),
    var(--paper-2);
}
@media (min-width: 560px) { .mapfacade { aspect-ratio: 16 / 10; } }

.mapfacade__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.5rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mapfacade__btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.mapfacade__pin {
  width: 40px;
  aspect-ratio: 1 / 1.1547;
  clip-path: var(--hex);
  background: var(--ink);
  position: relative;
}
.mapfacade__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  -webkit-mask: var(--ico-pin) center / 45% no-repeat;
  mask: var(--ico-pin) center / 45% no-repeat;
}
.mapfacade__label {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.mapfacade__hint {
  font-size: .75rem;
  color: var(--text-3);
  letter-spacing: .02em;
}

.office__mapwrap iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 260px;
  border: 0;
}
@media (min-width: 560px) { .office__mapwrap iframe { aspect-ratio: 16 / 10; } }


/* ═══════════════════════════════════════════════════════ 14. CONTACT FORM ══ */

.contact__grid {
  display: grid;
  gap: clamp(1.75rem, 1.3rem + 2.4vw, 3rem);
  align-items: start;
}
@media (min-width: 940px) {
  .contact__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.cform {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 1rem + 1.6vw, 2.25rem);
}
.cform__req {
  font-size: .75rem;
  color: var(--text-3);
  letter-spacing: .04em;
  margin-bottom: 1.5rem;
}

.field { margin-bottom: 1.25rem; }
.field-row { display: grid; gap: 0; }
@media (min-width: 560px) {
  .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
}

.field__label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: .45rem;
}
.field__star { color: var(--danger); }
.field__opt { font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--text-3); }

.field__input {
  width: 100%;
  padding: .8rem .9rem;
  min-height: 48px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 1rem;           /* 16px — stops iOS zooming on focus */
  line-height: 1.45;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input::placeholder { color: #77736b; }   /* 4.7:1 on white */
.field__input:hover { border-color: #c9c2b3; }
.field__input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(13, 13, 15, .1);
}
.field__input:focus-visible { outline: none; }
.field__input--area { resize: vertical; min-height: 130px; }

.field__group { display: flex; }
.field__prefix {
  display: grid;
  place-items: center;
  padding-inline: .8rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-2);
  flex: none;
}
.field__input--grouped { border-radius: 0 var(--radius) var(--radius) 0; }
.field__group .field__input { flex: 1 1 auto; min-width: 0; }

.field__hint { margin: .4rem 0 0; font-size: .75rem; color: var(--text-3); }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  margin: .45rem 0 0;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--danger);
}
.field__error::before { content: "\26A0"; flex: none; line-height: 1.4; }
/* `display: flex` above would otherwise defeat the hidden attribute. */
.field__error[hidden] { display: none; }

.field.is-invalid .field__input { border-color: var(--danger); }
.field.is-invalid .field__input:focus { box-shadow: 0 0 0 3px rgba(163, 33, 29, .12); }

#cf-submit { margin-top: .5rem; }

.cform__status {
  margin: 1rem 0 0;
  padding: 0;
  font-size: .875rem;
  line-height: 1.55;
}
.cform__status:empty { display: none; }
.cform__status.is-ok {
  padding: .8rem 1rem;
  background: var(--paper-2);
  border-left: 2px solid var(--ink);
  color: var(--text);
}
.cform__status.is-error {
  padding: .8rem 1rem;
  background: rgba(163, 33, 29, .07);
  border-left: 2px solid var(--danger);
  color: var(--danger);
}

.cform__note {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  font-size: .75rem;
  line-height: 1.6;
  color: var(--text-3);
}

/* — Direct contact rail — */
.contactrail {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 1rem + 1.6vw, 1.85rem);
}
.contactrail__title {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1rem;
}
.contactrail__list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.contactrail__item { background: var(--paper); padding: 1rem 1.1rem; }
.contactrail__who {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .015em;
  line-height: 1.25;
  margin-bottom: .15rem;
}
.contactrail__role {
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .7rem;
}
.contactrail__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.contactrail__actions .btn { flex: 1 1 auto; min-width: 8.5rem; }
.contactrail__block { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }


/* ════════════════════════════════════════════════════════════ 15. FOOTER ══ */

.sitefooter {
  background: var(--ink);
  color: var(--ink-text);
  padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem) 0;
}

.sitefooter__top {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
@media (min-width: 640px)  { .sitefooter__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sitefooter__top { grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; } }

.sitefooter__emblem { display: block; width: 40px; color: var(--paper); margin-bottom: 1.1rem; }
.sitefooter__emblem svg { width: 100%; height: auto; display: block; }
.sitefooter__name {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: .015em;
  color: var(--paper);
  margin: 0 0 .4rem;
}
.sitefooter__tagline {
  margin: 0;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--ink-text-2);
}
.sitefooter__tagline i { font-style: normal; opacity: .55; margin-inline: .15em; }
.sitefooter__firm {
  margin: .9rem 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--ink-text-2);
  max-width: 26ch;
}

.sitefooter__coltitle {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-text-2);
  margin-bottom: 1rem;
}
.sitefooter__links { display: grid; gap: .6rem; font-size: .9375rem; }
.sitefooter__links a {
  color: var(--ink-text);
  transition: color var(--dur) var(--ease);
}
.sitefooter__links a:hover { color: var(--paper); }
.sitefooter__links--contact { gap: 1rem; }
.sitefooter__contactlabel {
  display: block;
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-text-2);
  margin-bottom: .15rem;
}
.sitefooter__addr { font-size: .9375rem; line-height: 1.7; margin-bottom: 1rem; }
.sitefooter .link--arrow { border-bottom-color: var(--ink-line); color: var(--paper); }

.sitefooter__bottom {
  border-top: 1px solid var(--ink-line);
  padding-block: 1.75rem 2rem;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 900px) {
  .sitefooter__bottom { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: end; }
}
.disclaimer {
  margin: 0;
  font-size: .75rem;
  line-height: 1.7;
  color: var(--ink-text-2);
  max-width: 78ch;
}
.disclaimer strong { color: var(--ink-text); font-weight: 600; }
.copyright {
  margin: 0;
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--ink-text-2);
}
@media (min-width: 900px) { .copyright { text-align: right; } }
@media (max-width: 899px) { .sitefooter__bottom { padding-bottom: 2.5rem; } }


/* ═════════════════════════════════════════ 16. MOBILE QUICK ACTION BAR ══ */

.quickbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .6);
}
@media (min-width: 1024px) { .quickbar { display: none; } }

.quickbar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 64px;
  padding: .5rem .25rem;
  color: var(--ink-text);
  border-right: 1px solid var(--ink-line);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.quickbar__btn:last-child { border-right: 0; }
.quickbar__btn:active { background: var(--ink-3); color: var(--paper); }
.quickbar__ico { width: 20px; height: 20px; }
.quickbar__label {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.quickbar__btn--wa { color: #4fd48a; }
.quickbar__btn--cta { background: var(--paper); color: var(--ink); }
.quickbar__btn--cta:active { background: var(--paper-3); color: var(--ink); }


/* ═══════════════════════════════════════════════════════════ 17. MOTION ══ */
/* Reveal styles only apply when JavaScript is running, so the content is never
   left invisible if the script fails to load. */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }

.js .advocate[data-reveal],
.js .practice__item[data-reveal] { transition-delay: var(--reveal-delay, 0s); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero__scrollline::after { display: none; }
}

@media print {
  .siteheader, .quickbar, .hero__scroll, .nav, .mapfacade { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .section { padding-block: 1.5rem; page-break-inside: avoid; }
  .section--practice, .sitefooter { background: #fff; color: #000; }
  .section--practice .section__title, .practice__title, .sitefooter__name { color: #000; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* ═════════════════════════════════════════════════ 18. ENTRY DISCLAIMER ══ */

/* The Rule 36 acknowledgement gate.

   Visibility is decided in CSS rather than in script. html.js is stamped by the
   inline <head> script, and html.disclaimer-ack alongside it for a visitor who
   has agreed before - so both states are settled before the first paint and
   neither one flashes.

   The consequence worth keeping: with JavaScript off, html.js is never stamped,
   the gate stays display:none, and the page is read normally behind the footer
   disclaimer. Nobody is locked out by a script that failed to load. */

.entrygate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(13, 13, 15, .74);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

html.js:not(.disclaimer-ack) .entrygate { display: flex; }
html.js:not(.disclaimer-ack) body { overflow: hidden; }

.entrygate__panel {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: min(86vh, 780px);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.entrygate__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

.entrygate__intro {
  margin: 0 0 1.1rem;
  font-size: .9375rem;
  color: var(--text-2);
}

/* The terms scroll inside the panel instead of the panel outgrowing the
   viewport - on a short screen the accept button has to stay reachable. */
.entrygate__terms {
  overflow-y: auto;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.entrygate__list { display: grid; gap: .85rem; }

.entrygate__list li {
  position: relative;
  padding-left: 1.2rem;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--text-2);
}

/* The pointed hexagon again, at bullet size. */
.entrygate__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  background: var(--text-3);
  clip-path: var(--hex);
}

.entrygate__accept { margin-top: 1.45rem; align-self: center; }

@media (max-width: 599px) {
  .entrygate__accept { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  html.js:not(.disclaimer-ack) .entrygate__panel {
    animation: entrygate-in .34s var(--ease) both;
  }
}

@keyframes entrygate-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}