@charset "UTF-8";
/* ==========================================================================
   GENERATED FILE - do not edit assets/css/site.css directly.
   Source partials live in _src/styles/; rebuild with  python _src/bundle.py
   ==========================================================================
   ABY — אביטן בן-שימול יקותיאל
   Design system v2 — RTL-first, Hebrew-first.

   Typography: Heebo alone, across its full weight range. Heebo is Oded Ezer's
   Hebrew companion to Roboto and the default for modern Hebrew interfaces;
   using one family at many weights is what gives the page its calm, systematic
   feel rather than mixing display and text faces.

   Colour: sampled from the firm's own logo artwork (abs_logo_rgb-1.png) and
   from the brand colour already present in the previous site's CSS (#0e4964).
   ========================================================================== */

/* Heebo (Oded Ezer, SIL Open Font License 1.1) - served from this site.
   Self-hosted on purpose: with Google's CDN every visitor's IP reaches a
   third party on every page load, which is not acceptable for a law
   firm's site. Regenerate with: python _src/fonts.py */

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/heebo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/heebo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand — sampled from the logo */
  --ink:          #1C3B4F;
  --ink-deep:     #10222F;
  --ink-black:    #0A161E;
  --petrol:       #0E4964;
  --petrol-lift:  #176C92;
  --slate:        #546B7A;
  --silver:       #A7A6A6;
  --silver-soft:  #C6CED3;

  /* Surfaces */
  --bg:           #FFFFFF;
  --bg-soft:      #F5F6F7;
  --bg-mute:      #ECEFF1;
  --hairline:     #E3E7EA;
  --hairline-2:   #F0F2F4;
  --border-ctl:   #7E8C96;      /* interactive boundaries — 3.3:1 on white */

  /* Semantic */
  --text:         #152836;
  --text-dim:     #5A6F7D;
  --on-dark:      #FFFFFF;
  --on-dark-dim:  #AFC2CE;
  --focus:        #0E4964;

  --font: "Heebo", "Segoe UI", "Arial Hebrew", Arial, sans-serif;

  /* Fluid scale — large, Apple-ish, light weights at big sizes */
  --fs-mega:  clamp(2.9rem, 1.1rem + 7.4vw, 7.5rem);
  --fs-h1:    clamp(2.3rem, 1.4rem + 3.8vw, 4.8rem);
  --fs-h2:    clamp(1.85rem, 1.25rem + 2.5vw, 3.4rem);
  --fs-h3:    clamp(1.2rem, 1.06rem + 0.6vw, 1.55rem);
  --fs-lede:  clamp(1.1rem, 1.0rem + 0.55vw, 1.5rem);
  --fs-body:  1.0625rem;
  --fs-sm:    0.9375rem;
  --fs-xs:    0.8125rem;

  /* Spacing */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;  --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:9rem;

  --section-y: clamp(4rem, 2rem + 7vw, 9rem);
  --gutter:    clamp(1.25rem, 0.4rem + 3vw, 4rem);
  --measure:   66ch;
  --maxw:      1360px;
  --maxw-text: 760px;

  --r-sm: 6px;
  --r:    14px;
  --r-lg: 24px;

  /* Motion — one easing family, used everywhere */
  --t-fast: 180ms;
  --t-mid:  340ms;
  --t-slow: 620ms;
  --t-vslow: 1100ms;
  --ease:    cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --header-h: 72px;
}
@media (max-width: 860px) { :root { --header-h: 62px; } }

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul,ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
a { color: var(--petrol); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--petrol-lift); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--ink); color: #fff; }

.skip-link {
  position: absolute; inset-inline-start: 1rem; top: -100px; z-index: 1200;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; border-radius: var(--r-sm);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text { max-width: calc(var(--maxw-text) + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .58); }
.section--alt { background: var(--bg-soft); }
.section--ink { background: var(--ink); color: var(--on-dark); }
.section--black { background: var(--ink-black); color: var(--on-dark); }
.section--ink a, .section--black a { color: #fff; }

/* ---------- 4. Typography ------------------------------------------------ */
.h-mega { font-size: var(--fs-mega); font-weight: 200; line-height: 1.0; letter-spacing: -.042em; }
.h1     { font-size: var(--fs-h1);  font-weight: 300; line-height: 1.06; letter-spacing: -.032em; }
.h2     { font-size: var(--fs-h2);  font-weight: 300; line-height: 1.12; letter-spacing: -.026em; }
.h3     { font-size: var(--fs-h3);  font-weight: 600; line-height: 1.32; letter-spacing: -.01em; }
.lede   { font-size: var(--fs-lede); font-weight: 300; line-height: 1.55; letter-spacing: -.012em; }
.muted  { color: var(--text-dim); }
.small  { font-size: var(--fs-sm); }

.eyebrow {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .18em;
  color: var(--slate); margin: 0 0 var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
}
.eyebrow::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hairline); max-width: 80px; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::before { content: ""; flex: 1 1 auto; height: 1px; background: var(--hairline); max-width: 80px; }
.section--ink .eyebrow, .section--black .eyebrow, .page-head .eyebrow { color: var(--on-dark-dim); }
.section--ink .eyebrow::after, .section--ink .eyebrow::before,
.section--black .eyebrow::after, .section--black .eyebrow::before,
.page-head .eyebrow::after, .page-head .eyebrow::before { background: rgba(255,255,255,.22); }

.section-head { max-width: var(--maxw-text); margin-bottom: var(--s-8); }
.section-head .lede { margin-top: var(--s-4); color: var(--text-dim); }
.section--ink .section-head .lede, .section--black .section-head .lede { color: var(--on-dark-dim); }
.section-head--center { margin-inline: auto; text-align: center; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-5); }
.prose p { line-height: 1.82; font-weight: 400; }
.prose h2 { font-size: var(--fs-h2); margin-top: var(--s-8); }
.prose h3 { font-size: 1.22rem; font-weight: 700; margin-top: var(--s-7); letter-spacing: -.01em; }
.prose ol { padding-inline-start: 1.35rem; list-style: decimal; }
.prose ul { list-style: none; padding-inline-start: 0; }
.prose li + li { margin-top: var(--s-3); }
.prose li { line-height: 1.8; }
.prose ul > li { position: relative; padding-inline-start: 1.5rem; }
.prose ul > li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .82em;
  width: 8px; height: 1px; background: var(--silver);
}
.prose blockquote {
  margin: 0; padding: var(--s-5) var(--s-6);
  border-inline-start: 2px solid var(--petrol);
  background: var(--bg-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: var(--fs-sm); line-height: 1.8;
}
.prose figure { margin: 0; }
.prose figure img { border-radius: var(--r); }

/* ---------- 5. Buttons & links ------------------------------------------- */
.btn {
  --bg2: var(--ink); --fg2: #fff; --bd2: var(--ink);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 50px; padding: .8rem 1.9rem;
  background: var(--bg2); color: var(--fg2);
  border: 1px solid var(--bd2); border-radius: 100px;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
.btn:hover { --bg2: var(--petrol); --bd2: var(--petrol); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(14,73,100,.26); }
.btn:active { transform: translateY(0); }
.btn--ghost { --bg2: transparent; --fg2: var(--text); --bd2: var(--border-ctl); }
.btn--ghost:hover { --bg2: var(--ink); --bd2: var(--ink); color: #fff; }
.btn--light { --bg2: #fff; --fg2: var(--ink); --bd2: #fff; }
.btn--light:hover { --bg2: var(--silver-soft); --bd2: var(--silver-soft); color: var(--ink); }
.btn--on-dark-ghost { --bg2: transparent; --fg2: #fff; --bd2: rgba(255,255,255,.42); }
.btn--on-dark-ghost:hover { --bg2: #fff; --fg2: var(--ink); --bd2: #fff; box-shadow: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-sm); font-weight: 600; color: var(--petrol);
  text-decoration: none; min-height: 44px;
}
.link-arrow .bar {
  display: inline-block; width: 22px; height: 1px; background: currentColor;
  transition: width var(--t-mid) var(--ease);
}
.link-arrow:hover .bar, a:hover .link-arrow .bar { width: 38px; }

/* ==========================================================================
   6. INTRO — the title screen
   A navy field whose light follows the pointer, the logo, and a reveal that
   opens from wherever the visitor clicked. Hard-capped at five seconds.
   ========================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--ink-deep);
  cursor: pointer;
  overflow: hidden;
  /* The exit is driven from JS with a radial mask, so there is no clip-path
     or transition to fight with here. */
}
.intro[hidden] { display: none; }

/* Two pointer-reactive light fields. Their colours are set from JS as
   --glow-a / --glow-b so the rule stays inside the brand palette. */
.intro-field {
  position: absolute; inset: -20%;
  background:
    radial-gradient(44vmax 44vmax at var(--gx, 50%) var(--gy, 42%),
                    var(--glow-a, #205C7C) 0%, transparent 62%),
    radial-gradient(60vmax 60vmax at var(--gx2, 30%) var(--gy2, 78%),
                    var(--glow-b, #123A51) 0%, transparent 66%);
  filter: blur(14px);
  transition: background var(--t-slow) linear;
  will-change: background;
}
.intro-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 35%, rgba(10,22,30,.72) 100%),
    linear-gradient(to bottom, rgba(10,22,30,.28), transparent 30%, rgba(10,22,30,.45));
  pointer-events: none;
}
/* a fine grid that catches the moving light — reads as "technical" */
.intro-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(70% 60% at var(--gx, 50%) var(--gy, 45%), #000 0%, transparent 72%);
          mask-image: radial-gradient(70% 60% at var(--gx, 50%) var(--gy, 45%), #000 0%, transparent 72%);
}

.intro-inner { position: relative; z-index: 2; text-align: center; padding: var(--gutter); }
.intro-logo {
  width: min(42vw, 300px); height: auto; margin-inline: auto;
  opacity: 0; transform: scale(.88);
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.45));
}
.intro-rule {
  width: 0; height: 1px; margin: clamp(1.6rem,4vw,3rem) auto 0;
  background: linear-gradient(90deg, transparent, var(--silver-soft), transparent);
}
.intro-t1, .intro-t2 { opacity: 0; transform: translateY(14px); color: #fff; }
.intro-t1 {
  margin-top: clamp(1.4rem,3vw,2.4rem);
  font-size: clamp(1.05rem,.8rem + 1.1vw,1.7rem); font-weight: 300; letter-spacing: -.015em;
}
.intro-t2 {
  margin-top: .5rem; color: var(--on-dark-dim);
  font-size: clamp(.82rem,.72rem + .4vw,1.05rem); font-weight: 300; letter-spacing: .14em;
}
.intro-hint {
  position: absolute; inset-inline: 0; bottom: clamp(1.5rem,4vh,3rem); z-index: 2;
  text-align: center; font-size: var(--fs-xs); letter-spacing: .16em;
  color: rgba(255,255,255,.5); opacity: 0;
  transition: opacity var(--t-slow) var(--ease) 1800ms;
}
.intro.is-ready .intro-hint { opacity: 1; }

/* entrance choreography */
/* A single long ease: the logo snaps into place in the first second or so and
   then keeps creeping forward for the rest of the hold, so ten seconds on
   screen never feels like a frozen slide. */
.intro.is-ready .intro-logo {
  opacity: 1; transform: scale(1.03);
  transition: opacity 900ms var(--ease-out), transform 9000ms var(--ease-out);
}
.intro.is-ready .intro-rule {
  width: min(58vw, 300px);
  transition: width 1100ms var(--ease-out) 420ms;
}
.intro.is-ready .intro-t1 {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease) 620ms, transform 900ms var(--ease-out) 620ms;
}
.intro.is-ready .intro-t2 {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease) 780ms, transform 900ms var(--ease-out) 780ms;
}

/* The exit — "through the glass".
   The whole title layer dollies toward the viewer, falls out of focus and
   dissolves. The logo travels further and faster than the field behind it,
   so the moment reads as depth rather than as a shape crossing the screen.
   Timed to match INTRO_OUT in site.js (1400ms). */
.intro.is-out {
  opacity: 0;
  transform: scale(1.12);
  filter: blur(16px);
  transition: opacity 1400ms var(--ease-io),
              transform 1400ms var(--ease-out),
              filter 1150ms var(--ease-io);
}
.intro.is-out .intro-logo {
  opacity: 0; transform: scale(1.85);
  transition: opacity 820ms var(--ease-io), transform 1400ms var(--ease-out);
}
.intro.is-out .intro-rule { width: 0; transition: width 760ms var(--ease-io); }
.intro.is-out .intro-t1,
.intro.is-out .intro-t2 {
  opacity: 0; transform: translateY(-14px);
  transition: opacity 520ms var(--ease), transform 760ms var(--ease-io);
}
.intro.is-out .intro-hint { opacity: 0; transition: opacity 300ms var(--ease); }

/* the page behind settles into place as the intro opens */
/* The shell is scaled above 1 while armed, so both the document and the
   body must clip, or those few seconds produce a horizontal scrollbar. */
html.intro-armed, body.intro-armed { overflow: hidden; }
body.intro-armed .page-shell { transform: scale(1.06); filter: blur(7px); opacity: .55; }
.page-shell {
  transform-origin: 50% 42%;
  transition: transform var(--t-vslow) var(--ease-out),
              filter 900ms var(--ease-out), opacity 800ms var(--ease);
}

/* ---------- 7. Header ---------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.site-header.is-stuck { background: rgba(255,255,255,.86); border-bottom-color: var(--hairline); }
.header-bar { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; flex: 0 0 auto; min-height: 44px; min-width: 44px; }
.brand img { height: 42px; width: auto; transition: transform var(--t-mid) var(--ease); }
.brand:hover img { transform: scale(1.04); }
@media (max-width: 860px) { .brand img { height: 34px; } }
.brand-text { display: none; }
@media (min-width: 1120px) {
  .brand-text { display: block; border-inline-start: 1px solid var(--hairline); padding-inline-start: var(--s-3); }
  .brand-text b { display: block; font-size: .95rem; font-weight: 500; letter-spacing: -.02em; color: var(--text); line-height: 1.25; }
  .brand-text span { display: block; font-size: .7rem; font-weight: 400; color: var(--slate); letter-spacing: .06em; }
}

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: clamp(.25rem,-.5rem + 1.6vw,1.25rem); }
  .nav > li { list-style: none; position: relative; }
  .nav > li > a {
    display: flex; align-items: center; height: var(--header-h); padding-inline: .55rem;
    font-size: .95rem; font-weight: 400; letter-spacing: -.012em;
    color: var(--text); text-decoration: none; white-space: nowrap; position: relative;
    transition: color var(--t-fast) var(--ease);
  }
  .nav > li > a::after {
    content: ""; position: absolute; inset-inline: .55rem; bottom: 18px; height: 1.5px;
    background: var(--petrol); border-radius: 2px;
    transform: scaleX(0); transform-origin: right;
    transition: transform var(--t-mid) var(--ease-out);
  }
  .nav > li > a:hover { color: var(--petrol); }
  .nav > li > a:hover::after, .nav > li > a[aria-current="page"]::after { transform: scaleX(1); }
  .nav > li > a[aria-current="page"] { color: var(--petrol); font-weight: 500; }

  .submenu {
    position: absolute; inset-inline-start: 0; top: calc(var(--header-h) - 8px);
    min-width: 236px; margin: 0; padding: var(--s-2);
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid var(--hairline); border-radius: var(--r);
    box-shadow: 0 20px 50px rgba(21,40,54,.14);
    opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
    transition: opacity var(--t-fast) var(--ease), transform var(--t-mid) var(--ease-out), visibility var(--t-mid);
  }
  .has-sub:hover .submenu, .has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
  .submenu li { list-style: none; }
  .submenu a {
    display: block; padding: .62rem .9rem; border-radius: var(--r-sm);
    font-size: .92rem; color: var(--text); text-decoration: none;
    transition: background var(--t-fast) var(--ease), padding-inline-start var(--t-fast) var(--ease);
  }
  .submenu a:hover, .submenu a[aria-current="page"] { background: var(--bg-soft); color: var(--petrol); padding-inline-start: 1.2rem; }
}

.header-cta { display: none; }
@media (min-width: 1240px) { .header-cta { display: inline-flex; min-height: 44px; padding: .55rem 1.4rem; } }
.header-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; min-width: 44px; padding: 0 .6rem;
  font-size: .95rem; font-weight: 500; color: var(--text); text-decoration: none; white-space: nowrap;
}
.header-tel svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--petrol); }
.header-tel span { display: none; }
@media (min-width: 560px) { .header-tel span { display: inline; } }
@media (min-width: 1240px) { .header-tel { display: none; } }

.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: 0 0 auto; cursor: pointer;
  background: none; border: 1px solid var(--border-ctl); border-radius: 100px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.burger:hover { background: var(--bg-soft); }
@media (min-width: 1024px) { .burger { display: none; } }
.burger .lines { position: relative; width: 19px; height: 12px; }
.burger .lines i {
  position: absolute; inset-inline: 0; height: 1.5px; background: var(--text); border-radius: 2px;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease), top var(--t-mid) var(--ease);
}
.burger .lines i:nth-child(1) { top: 0; }
.burger .lines i:nth-child(2) { top: 5px; }
.burger .lines i:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .lines i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .lines i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .lines i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  overflow-y: auto; padding: var(--s-5) 0 var(--s-8);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out), visibility var(--t-mid);
  -webkit-overflow-scrolling: touch;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1024px) { .drawer { display: none; } }
.drawer ul { list-style: none; }
.drawer > .wrap > ul > li { border-bottom: 1px solid var(--hairline-2); }
.drawer a {
  display: flex; align-items: center; min-height: 56px;
  font-size: 1.3rem; font-weight: 300; letter-spacing: -.028em;
  color: var(--text); text-decoration: none;
}
.drawer a[aria-current="page"] { color: var(--petrol); font-weight: 500; }
.drawer .submenu { padding: 0 0 var(--s-4); margin: 0; }
.drawer .submenu a {
  font-size: 1rem; font-weight: 400; min-height: 48px; color: var(--text-dim);
  padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--hairline);
}
.drawer .submenu a:hover, .drawer .submenu a[aria-current="page"] { color: var(--petrol); border-inline-start-color: var(--petrol); }
.drawer-actions { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
body.nav-open { overflow: hidden; }

/* ---------- 8. Hero ------------------------------------------------------ */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero-grid {
  display: grid; gap: var(--s-7); align-items: center;
  padding-block: clamp(3.5rem, 1.5rem + 8vw, 8rem);
}
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.08fr .92fr; gap: clamp(2rem,-1rem + 6vw,5rem); }
}
.hero h1 { color: #fff; }
.hero-lede { margin-top: var(--s-5); font-size: var(--fs-lede); font-weight: 300; line-height: 1.55; color: #E4ECF1; max-width: 50ch; }
.hero-sub { margin-top: var(--s-3); color: var(--on-dark-dim); max-width: 52ch; font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.hero-rule { width: 58px; height: 2px; background: var(--silver); margin-top: var(--s-7); opacity: .65; }
.hero-figure { position: relative; }
.hero-figure img { width: 100%; border-radius: var(--r-lg); filter: saturate(.9) contrast(1.03); }
.hero-figure::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); pointer-events: none;
  background: linear-gradient(to top, rgba(16,34,47,.42), transparent 55%);
}
.hero-meta {
  position: absolute; inset-block-end: 0; inset-inline-start: 0; z-index: 1;
  padding: var(--s-5) var(--s-6); font-size: var(--fs-xs); letter-spacing: .14em; color: #fff;
}

.page-head { background: var(--ink); color: #fff; padding-block: clamp(3rem,1.6rem + 5vw,6rem); }
.page-head h1 { color: #fff; max-width: 20ch; }
.page-head .lede { margin-top: var(--s-5); color: var(--on-dark-dim); max-width: 58ch; }
.page-head--crumbs { padding-block: var(--s-4); }
.page-head--crumbs .crumbs { margin-bottom: 0; }

.crumbs { font-size: var(--fs-xs); color: var(--on-dark-dim); margin-bottom: var(--s-5); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.crumbs a { color: var(--on-dark-dim); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-inline-end: .45rem; opacity: .45; }
.crumbs [aria-current="page"] { color: #fff; }

/* ---------- 9. Grids ----------------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.grid--2,.grid--3,.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2,.grid--3,.grid--4 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) {
  .grid--3 { grid-template-columns: repeat(3,1fr); }
  .grid--4 { grid-template-columns: repeat(4,1fr); }
  .grid { gap: var(--s-6); }
}

/* The team is five people. A four-column grid would strand the fifth on a
   row of its own, so the team gets its own ramp up to five across. */
.grid--team { grid-template-columns: 1fr; }
@media (min-width: 520px)  { .grid--team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 760px)  { .grid--team { grid-template-columns: repeat(3, 1fr); } }
/* --team-cols is written by the generator from the actual roster size, so
   the row never leaves an empty cell when someone joins or leaves. */
@media (min-width: 1100px) {
  .grid--team { grid-template-columns: repeat(var(--team-cols, 4), 1fr); gap: var(--s-5); }
}

/* ---------- 10. Pillar (home) -------------------------------------------- */
.pillar {
  position: relative; display: flex; flex-direction: column;
  padding: var(--s-6) var(--s-5) var(--s-6) var(--s-5);
  border-radius: var(--r); text-decoration: none; color: inherit;
  background: var(--bg-soft);
  overflow: hidden; isolation: isolate;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease);
}
.pillar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
}
.pillar .num {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .18em; color: var(--slate);
  transition: color var(--t-mid) var(--ease);
}
.pillar h3 { margin-top: var(--s-5); font-size: 1.6rem; font-weight: 300; letter-spacing: -.028em; transition: color var(--t-mid) var(--ease); }
.pillar p { margin-top: var(--s-4); font-size: var(--fs-sm); line-height: 1.75; color: var(--text-dim); flex: 1 1 auto; transition: color var(--t-mid) var(--ease); }
.pillar .link-arrow { margin-top: var(--s-5); min-height: 0; transition: color var(--t-mid) var(--ease); }
@media (hover: hover) {
  .pillar:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(21,40,54,.16); }
  .pillar:hover::before { opacity: 1; }
  .pillar:hover h3, .pillar:hover .link-arrow { color: #fff; }
  .pillar:hover p { color: var(--on-dark-dim); }
  .pillar:hover .num { color: var(--silver-soft); }
}
.pillar:focus-visible { transform: translateY(-6px); }

/* ---------- 11. Practice card (image + sliding description) -------------- */
.area-card {
  position: relative; display: block; text-decoration: none; color: inherit;
  border-radius: var(--r); overflow: hidden; background: var(--ink);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease);
}
.area-card .thumb { display: block; position: relative; aspect-ratio: 3/4; overflow: hidden; }
.area-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-vslow) var(--ease-out), filter var(--t-slow) var(--ease);
  filter: saturate(.78) brightness(.82);
}
.area-card .veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,22,30,.92) 6%, rgba(10,22,30,.35) 46%, rgba(10,22,30,.08) 100%);
  transition: opacity var(--t-slow) var(--ease);
}
.area-card .body {
  display: block;
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: var(--s-6) var(--s-5);
  color: #fff;
}
.area-card h3 { font-size: 1.45rem; font-weight: 300; letter-spacing: -.03em; }
.area-card .desc {
  display: block;
  margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.7; color: var(--on-dark-dim);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out), opacity var(--t-mid) var(--ease), margin-top var(--t-slow) var(--ease-out);
}
.area-card .go {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: var(--s-4);
  font-size: var(--fs-sm); font-weight: 600; color: #fff;
}
.area-card .go .bar { display: inline-block; width: 20px; height: 1px; background: currentColor; transition: width var(--t-mid) var(--ease); }
@media (hover: hover) {
  .area-card:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(21,40,54,.24); }
  .area-card:hover .thumb img { transform: scale(1.07); filter: saturate(1) brightness(.9); }
  .area-card:hover .desc { max-height: 12em; opacity: 1; }
  .area-card:hover .go .bar { width: 34px; }
}
.area-card:focus-visible .desc, .area-card.is-open .desc { max-height: 12em; opacity: 1; }
/* Touch devices get the description without a hover state. */
@media (hover: none) {
  .area-card .desc { max-height: 12em; opacity: 1; }
}

/* ---------- 12. Person card (hover reveals the brief) -------------------- */
.person {
  position: relative; display: block; text-decoration: none; color: inherit;
  border-radius: var(--r); overflow: hidden; background: var(--bg-mute);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease);
}
.person .portrait { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; }
.person .portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  filter: grayscale(100%) contrast(1.05);
  transition: filter var(--t-slow) var(--ease), transform var(--t-vslow) var(--ease-out);
}
.person .plate {
  display: block;
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: var(--s-5);
  background: linear-gradient(to top, rgba(10,22,30,.93) 10%, rgba(10,22,30,.55) 55%, transparent 100%);
  color: #fff;
}
.person .name { display: block; font-size: 1.22rem; font-weight: 400; letter-spacing: -.026em; }
.person .role { display: block; margin-top: .2rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; color: var(--silver-soft); }
.person .brief {
  display: block; margin-top: var(--s-3);
  font-size: var(--fs-sm); line-height: 1.65; color: #D7E3EA;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out), opacity var(--t-mid) var(--ease), margin-top var(--t-slow) var(--ease-out);
}
.person .more {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--s-3);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; color: #fff;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--t-slow) var(--ease-out), opacity var(--t-mid) var(--ease) 80ms;
}
.person .more .bar { display: inline-block; width: 18px; height: 1px; background: currentColor; }
@media (hover: hover) {
  .person:hover { transform: translateY(-6px); box-shadow: 0 26px 56px rgba(21,40,54,.22); }
  .person:hover .portrait img { filter: grayscale(0) contrast(1.02); transform: scale(1.05); }
  .person:hover .brief { max-height: 14em; opacity: 1; }
  .person:hover .more { max-height: 3em; opacity: 1; }
}
.person:focus-visible .brief, .person.is-open .brief { max-height: 14em; opacity: 1; }
.person:focus-visible .more, .person.is-open .more { max-height: 3em; opacity: 1; }
.person:focus-visible .portrait img, .person.is-open .portrait img { filter: grayscale(0); }
@media (hover: none) {
  .person .brief { max-height: 14em; opacity: 1; }
  .person .portrait img { filter: grayscale(0) contrast(1.02); }
}
.person--static { cursor: default; }

/* a lawyer whose details are still placeholder text */
.person .flag, .bio-flag {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .7rem; border-radius: 100px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: #fff;
}
.person .flag { position: absolute; top: var(--s-4); inset-inline-end: var(--s-4); z-index: 3; }
.bio-flag { background: #FFF4D6; border-color: #E8C765; color: #6B4E06; margin-bottom: var(--s-5); }

/* The head of department, shown beside a practice area. */
.lead-card {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--s-5);
  align-items: center; text-decoration: none; color: inherit;
}
.lead-portrait {
  display: block; width: 92px; aspect-ratio: 1; overflow: hidden;
  border-radius: var(--r-sm); background: var(--bg-mute);
}
.lead-portrait img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  filter: grayscale(100%); transition: filter var(--t-slow) var(--ease), transform var(--t-slow) var(--ease-out);
}
.lead-card:hover .lead-portrait img, .lead-card:focus-visible .lead-portrait img {
  filter: none; transform: scale(1.05);
}
.lead-text { display: block; }
.lead-name { display: block; font-size: 1.1rem; font-weight: 500; letter-spacing: -.022em; }
.lead-role { display: block; margin-top: .15rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; color: var(--petrol); }
.lead-card .link-arrow { margin-top: .4rem; min-height: 0; }

/* ---------- 13. Press & articles ----------------------------------------- */
.press-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.press-card .thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-mute); }
.press-card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform var(--t-vslow) var(--ease-out); }
.press-card .body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1 1 auto; }
.press-card h3 { font-size: 1.08rem; font-weight: 400; line-height: 1.42; letter-spacing: -.018em; transition: color var(--t-fast) var(--ease); }
.press-card .link-arrow { margin-top: auto; padding-top: var(--s-4); min-height: 0; }
@media (hover: hover) {
  .press-card:hover { transform: translateY(-5px); border-color: transparent; box-shadow: 0 24px 50px rgba(21,40,54,.15); }
  .press-card:hover .thumb img { transform: scale(1.05); }
  .press-card:hover h3 { color: var(--petrol); }
}

.article-row {
  display: grid; gap: var(--s-4); padding: var(--s-6) var(--s-4);
  border-top: 1px solid var(--hairline); text-decoration: none; color: inherit;
  border-radius: var(--r-sm);
  transition: background var(--t-mid) var(--ease), padding-inline var(--t-mid) var(--ease);
}
@media (min-width: 820px) { .article-row { grid-template-columns: 170px 1fr auto; align-items: start; gap: var(--s-6); } }
.article-row:last-of-type { border-bottom: 1px solid var(--hairline); }
.article-row h3 { font-size: 1.42rem; font-weight: 300; letter-spacing: -.03em; transition: color var(--t-fast) var(--ease); }
.article-row p { margin-top: var(--s-3); font-size: var(--fs-sm); line-height: 1.75; color: var(--text-dim); max-width: 62ch; }
.article-row .link-arrow { min-height: 0; }
@media (hover: hover) {
  .article-row:hover { background: var(--bg-soft); padding-inline: var(--s-5); }
  .article-row:hover h3 { color: var(--petrol); }
  .article-row:hover .bar { width: 38px; }
}

.meta { font-size: var(--fs-xs); letter-spacing: .06em; color: var(--slate); }
.meta time { font-variant-numeric: tabular-nums; }
.tag {
  display: inline-block; padding: .3rem .75rem; border-radius: 100px;
  border: 1px solid var(--hairline); background: #fff;
  font-size: var(--fs-xs); color: var(--slate); white-space: nowrap;
}
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-7); }
.filter {
  min-height: 44px; padding: .5rem 1.2rem; cursor: pointer;
  background: #fff; border: 1px solid var(--border-ctl); border-radius: 100px;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-dim);
  transition: all var(--t-fast) var(--ease);
}
.filter:hover { color: var(--text); border-color: var(--text); transform: translateY(-1px); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- 13b. Press coverflow ----------------------------------------
   A 3D carousel: the active clipping sits flat and forward, its neighbours
   rotate away on the Y axis. Driven from JS, which writes a transform per
   item; everything degrades to a plain scrolling row without JS.
   ------------------------------------------------------------------------ */
.coverflow { position: relative; }
.cf-stage {
  position: relative;
  height: clamp(300px, 20rem + 12vw, 480px);
  perspective: 1500px;
  perspective-origin: 50% 46%;
}
.cf-item {
  position: absolute; top: 0; left: 50%;
  width: clamp(240px, 20rem + 8vw, 430px);
  margin-inline-start: calc(clamp(240px, 20rem + 8vw, 430px) / -2);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-mid) var(--ease);
}
.cf-item a {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border-radius: var(--r);
  overflow: hidden; box-shadow: 0 26px 60px rgba(10,22,30,.3);
}
.cf-item .shot { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-mute); }
.cf-item .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.cf-item .cap { display: block; padding: var(--s-4) var(--s-5) var(--s-5); }
.cf-item .cap .meta { display: block; }
.cf-item .cap h3 {
  margin-top: .4rem; font-size: 1rem; font-weight: 500; line-height: 1.45;
  letter-spacing: -.016em; color: var(--text);
}
/* only the item in front is a tab stop and a pointer target */
.cf-item[aria-hidden="true"] a { pointer-events: none; }
.cf-item.is-active a:hover h3 { color: var(--petrol); }

.cf-nav {
  position: absolute; top: 46%; z-index: 40; translate: 0 -50%;
  width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--text);
  border: 1px solid var(--hairline); border-radius: 100px;
  box-shadow: 0 8px 24px rgba(10,22,30,.14);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.cf-nav:hover { background: var(--ink); border-color: var(--ink); color: #fff; transform: scale(1.06); }
.cf-nav svg { width: 18px; height: 18px; }
.cf-prev { inset-inline-end: clamp(-6px, -1vw, 6px); }
.cf-next { inset-inline-start: clamp(-6px, -1vw, 6px); }
.section--ink .cf-nav, .section--black .cf-nav {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.section--ink .cf-nav:hover, .section--black .cf-nav:hover { background: #fff; color: var(--ink); border-color: #fff; }

.cf-dots { display: flex; justify-content: center; gap: .55rem; margin-top: var(--s-6); }
.cf-dot {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.cf-dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 100px;
  background: var(--silver); transition: all var(--t-mid) var(--ease);
}
.cf-dot[aria-selected="true"]::before { width: 26px; background: var(--ink); }
.section--ink .cf-dot::before, .section--black .cf-dot::before { background: rgba(255,255,255,.4); }
.section--ink .cf-dot[aria-selected="true"]::before,
.section--black .cf-dot[aria-selected="true"]::before { background: #fff; }

/* Without JS the stage is just a horizontal row of readable cards. */
.no-js .cf-stage { height: auto; display: flex; gap: var(--s-5); overflow-x: auto; perspective: none; padding-bottom: var(--s-4); }
.no-js .cf-item { position: static; margin-inline-start: 0; flex: 0 0 300px; transform: none !important; opacity: 1 !important; }
.no-js .cf-nav, .no-js .cf-dots { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cf-item { transition: none; }
}

/* ---------- 14. Split, facts, bio ---------------------------------------- */
.split { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2rem,0rem + 5vw,5rem); }
  .split--narrow-media { grid-template-columns: .85fr 1.15fr; }
}
.split img { border-radius: var(--r); width: 100%; }

.facts { display: grid; gap: var(--s-6); }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(3,1fr); } }
.fact { padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.section--ink .fact, .section--black .fact { border-top-color: rgba(255,255,255,.35); }
.fact b { display: block; font-size: 1.22rem; font-weight: 400; letter-spacing: -.024em; margin-bottom: var(--s-3); }
.fact p { font-size: var(--fs-sm); line-height: 1.75; color: var(--text-dim); }
.section--ink .fact p, .section--black .fact p { color: var(--on-dark-dim); }

.bio-head { display: grid; gap: var(--s-6); }
@media (min-width: 880px) { .bio-head { grid-template-columns: 320px 1fr; gap: var(--s-8); align-items: start; } }
.bio-portrait { border-radius: var(--r); overflow: hidden; background: var(--bg-mute); aspect-ratio: 3/4; }
.bio-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.bio-role { margin-top: var(--s-4); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; color: var(--petrol); }
.bio-spec { margin-top: var(--s-4); font-size: var(--fs-lede); font-weight: 300; line-height: 1.55; color: var(--text-dim); }
.dl-blocks { display: grid; gap: var(--s-7); margin-top: var(--s-8); }
@media (min-width: 760px) { .dl-blocks { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.dl-block h2 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; color: var(--slate);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s-4);
}
.dl-block ul { list-style: none; }
.dl-block li { line-height: 1.75; }
.dl-block li + li { margin-top: var(--s-3); }

/* ---------- 15. Forms ---------------------------------------------------- */
.form-card {
  background: #fff; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  padding: clamp(1.5rem,.9rem + 2vw,2.75rem);
}
.section--ink .form-card, .section--black .form-card {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.form-grid { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: var(--fs-sm); font-weight: 500; }
.section--ink .field label, .section--black .field label { color: #fff; }
.field .req { color: var(--petrol); }
.section--ink .field .req, .section--black .field .req { color: var(--silver-soft); }
.field input, .field textarea {
  width: 100%; min-height: 50px; padding: .75rem 1rem;
  font: inherit; font-size: var(--fs-sm); color: var(--text);
  background: #fff; border: 1px solid var(--border-ctl); border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.7; }
.field input:hover, .field textarea:hover { border-color: var(--slate); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 4px rgba(14,73,100,.14); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B3261E; }
.field .err { font-size: var(--fs-xs); color: #B3261E; min-height: 1.1em; }
.section--ink .field .err, .section--black .field .err { color: #FFB4AB; }
.form-note { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); font-size: var(--fs-xs); color: var(--text-dim); }
.section--ink .form-note, .section--black .form-note { border-top-color: rgba(255,255,255,.16); color: var(--on-dark-dim); }
.form-status { margin-top: var(--s-4); font-size: var(--fs-sm); }

/* ---------- 16. Contact / footer ----------------------------------------- */
.contact-list { list-style: none; display: grid; gap: var(--s-5); }
.contact-item { display: flex; gap: var(--s-4); align-items: flex-start; }
.contact-item svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .9rem; color: var(--petrol); }
.section--ink .contact-item svg, .section--black .contact-item svg { color: var(--silver-soft); }
.contact-item .k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; color: var(--slate); }
.section--ink .contact-item .k, .section--black .contact-item .k { color: var(--on-dark-dim); }
.contact-item .v { font-size: 1.05rem; }
.contact-item .v a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.contact-item .v a:hover { text-decoration: underline; }

.hours-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hours-table th, .hours-table td { padding: .55rem 0; text-align: start; border-bottom: 1px solid var(--hairline); font-weight: 400; }
.section--ink .hours-table th, .section--ink .hours-table td,
.section--black .hours-table th, .section--black .hours-table td { border-bottom-color: rgba(255,255,255,.14); }
.hours-table td { text-align: end; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.section--ink .hours-table td, .section--black .hours-table td { color: var(--on-dark-dim); }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: none; }

.cta-band { background: var(--ink-black); color: #fff; }
.cta-band .inner { display: grid; gap: var(--s-5); align-items: center; padding-block: clamp(3rem,1.6rem + 4vw,5.5rem); }
@media (min-width: 900px) { .cta-band .inner { grid-template-columns: 1fr auto; gap: var(--s-8); } }
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { margin-top: var(--s-4); color: var(--on-dark-dim); max-width: 46ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.site-footer { background: var(--ink-black); color: #fff; padding-block: var(--s-9) var(--s-5); border-top: 1px solid rgba(255,255,255,.08); }
.footer-grid { display: grid; gap: var(--s-7); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1060px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; gap: var(--s-6); } }
.site-footer h2 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; color: #fff;
  margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid rgba(255,255,255,.16);
}
.site-footer p, .site-footer li { color: var(--on-dark-dim); font-size: var(--fs-sm); line-height: 1.8; }
.site-footer ul { list-style: none; }
.site-footer a { color: var(--on-dark-dim); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.site-footer a:hover { color: #fff; }
.site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-nav-link { min-height: 44px; }
.site-footer li + li { margin-top: 0; }
.footer-logo { height: 50px; width: auto; margin-bottom: var(--s-4); }
.social-row { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 100px;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.social-row a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); transform: translateY(-2px); }
.social-row svg { width: 18px; height: 18px; color: #fff; }
.social-row--light a { border-color: var(--hairline); }
.social-row--light a:hover { background: var(--ink); border-color: var(--ink); }
.social-row--light svg { color: var(--text); }
.social-row--light a:hover svg { color: #fff; }
.footer-base {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between; align-items: center;
  font-size: var(--fs-xs); color: var(--on-dark-dim);
}

/* ---------- 17. Utilities ------------------------------------------------ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.stack-sm > * + * { margin-top: var(--s-3); }
.stack > * + * { margin-top: var(--s-5); }
.text-center { text-align: center; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }

/* ---------- 18. Motion --------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(26px); }
[data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-slow) var(--ease), transform 900ms var(--ease-out);
}
[data-reveal][style*="--d"] { transition-delay: var(--d); }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .pillar:hover,.area-card:hover,.person:hover,.press-card:hover,.btn:hover { transform: none; }
  .intro { display: none !important; }
  html.intro-armed, body.intro-armed { overflow: auto; }
  body.intro-armed .page-shell { transform: none; filter: none; opacity: 1; }
}

/* ---------- 19. Print ---------------------------------------------------- */
@media print {
  .site-header,.drawer,.cta-band,.site-footer,.form-card,.burger,.intro { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .hero,.page-head,.section--ink,.section--black { background: #fff !important; color: #000 !important; }
  .hero h1,.page-head h1,.section--ink *,.section--black * { color: #000 !important; }
  .page-shell { transform: none !important; filter: none !important; opacity: 1 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}