@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 is a deep petrol: 9.3:1 on white, but barely 1.5:1 on the navy
   and near-black grounds. On those the ring turns white, so focus is just
   as findable in the dark sections as in the light ones. */
.section--ink :focus-visible, .section--black :focus-visible,
.hero :focus-visible, .page-head :focus-visible,
.cta-band :focus-visible, .site-footer :focus-visible,
.a11y-fab:focus-visible { outline-color: #fff; }
: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); }
/* Buttons carry their own foreground/background pair and must be left
   alone: this rule outranks .btn, and applying it to one turned the
   white "דף יצירת קשר" button into white text on white. */
.section--ink a:not(.btn), .section--black a:not(.btn) { 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, .hero .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:active { transform: translateY(0); }
.btn--ghost { --bg2: transparent; --fg2: var(--text); --bd2: var(--border-ctl); }
.btn--light { --bg2: #fff; --fg2: var(--ink); --bd2: #fff; }
.btn--on-dark-ghost { --bg2: transparent; --fg2: #fff; --bd2: rgba(255,255,255,.42); }

/* Hover is gated on a real pointer. A touch screen leaves :hover applied
   after a tap, and the state below then stays on the page for good.
   Every rule here sets --fg2 rather than `color`: when the base rule set
   `color` directly it out-ranked each variant's own hover colour, which is
   how the phone button ended up white text on a white pill. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    --bg2: var(--petrol); --bd2: var(--petrol); --fg2: #fff;
    transform: translateY(-2px); box-shadow: 0 10px 26px rgba(14,73,100,.26);
  }
  .btn--ghost:hover { --bg2: var(--ink); --bd2: var(--ink); --fg2: #fff; }
  .btn--light:hover { --bg2: var(--silver-soft); --bd2: var(--silver-soft); --fg2: var(--ink); }
  .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: three seconds on a
   phone, seven on a desktop. The two budgets are set in site.js and the
   choreography below is cut to fit each of them.
   ========================================================================== */
.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 the title card
   never feels like a frozen slide. The creep is matched to the desktop hold
   (5800ms) so it arrives exactly as the exit begins. */
.intro.is-ready .intro-logo {
  opacity: 1; transform: scale(1.03);
  transition: opacity 900ms var(--ease-out), transform 5800ms 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 (1200ms desktop, 1000ms phone). */
.intro.is-out {
  opacity: 0;
  transform: scale(1.12);
  filter: blur(16px);
  transition: opacity 1200ms var(--ease-io),
              transform 1200ms var(--ease-out),
              filter 1000ms var(--ease-io);
}
.intro.is-out .intro-logo {
  opacity: 0; transform: scale(1.85);
  transition: opacity 700ms var(--ease-io), transform 1200ms 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);
}

/* ---- Phone: the same card in three seconds -----------------------------
   Two thirds of the desktop budget, so the choreography is cut to match.
   Without this the entrance would still be arriving as the exit began, and
   the hint would appear for a fifth of a second before the card left. */
@media (max-width: 819px) {
  .intro.is-ready .intro-logo {
    transition: opacity 600ms var(--ease-out), transform 2000ms var(--ease-out);
  }
  .intro.is-ready .intro-rule { transition: width 700ms var(--ease-out) 240ms; }
  .intro.is-ready .intro-t1 {
    transition: opacity 500ms var(--ease) 360ms, transform 600ms var(--ease-out) 360ms;
  }
  .intro.is-ready .intro-t2 {
    transition: opacity 500ms var(--ease) 460ms, transform 600ms var(--ease-out) 460ms;
  }
  .intro-hint { transition: opacity var(--t-mid) var(--ease) 900ms; }

  .intro.is-out {
    transition: opacity 1000ms var(--ease-io),
                transform 1000ms var(--ease-out),
                filter 850ms var(--ease-io);
  }
  .intro.is-out .intro-logo {
    transition: opacity 560ms var(--ease-io), transform 1000ms var(--ease-out);
  }
}

/* ---------- 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);
}
/* The scrim has to hold 4.5:1 over the worst pixel the photograph can put
   behind it, which is pure white. Compositing rgba(10,22,30,a) over white
   and converting to relative luminance, a = .74 gives L = .079, and that
   carries every colour used on this plate:
       #FFFFFF  8.2:1      --silver-soft #C6CED3  5.1:1      #D7E3EA  6.3:1
   The old gradient reached full transparency at the top of the plate -
   exactly where the name sits - so over a light portrait the name was
   white on near-white. It still fades out, but now above the text: the
   extra top padding keeps every line below the .74 floor. */
.person .plate {
  display: block;
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: var(--s-5);
  padding-block-start: calc(var(--s-5) + 2.2rem);
  background: linear-gradient(to top,
              rgba(10,22,30,.97) 0%,
              rgba(10,22,30,.90) 58%,
              rgba(10,22,30,.74) 86%,
              rgba(10,22,30,.34) 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.
   ------------------------------------------------------------------------ */
/* The stage is a 3D ring: the neighbouring cards translate 62% of their own
   width to the sides, so the carousel has to clip itself. Without this the
   document grows wider than a phone screen and the whole page scrolls
   sideways - body's overflow-x is not honoured once a `perspective` is
   involved on iOS. `clip` is the right tool rather than `hidden`: it never
   turns this box into a scroll container, and `overflow-clip-margin` lets
   the drop shadow and the arrow buttons still paint outside the box while
   contributing nothing to the scrollable area. `hidden` stays first as the
   fallback for Safari < 16. */
.coverflow {
  position: relative;
  overflow-x: hidden;
  overflow: clip;
  overflow-clip-margin: 96px;
}
.cf-stage {
  position: relative;
  /* one source of truth for the card width, so the negative centring margin
     can never drift out of step with it. `min(..., 100%)` keeps the front
     card inside the stage on a narrow phone, where 20rem + 8vw alone comes
     out a hair wider than the column itself. */
  --cf-w: min(clamp(240px, 20rem + 8vw, 430px), 100%);
  height: clamp(300px, 20rem + 12vw, 480px);
  perspective: 1500px;
  perspective-origin: 50% 46%;
}
.cf-item {
  /* inset-inline-start, not left. The centring works by pulling the card
     back half its own width with a negative margin-inline-start - which in
     this RTL document is margin-RIGHT, and a margin-right does not move a
     box anchored by `left`. The whole ring was therefore sitting half a card
     to the right of the stage, which is why the right-hand side always ran
     out of room first and why a narrower window only ever cut cards off. */
  position: absolute; top: 0; inset-inline-start: 50%;
  width: var(--cf-w);
  margin-inline-start: calc(var(--cf-w) / -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: 44px; height: 44px; 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; }

/* ---- Phone: a swipeable row instead of the ring -------------------------
   Below 820px the front card alone is as wide as the column, so there is no
   room left to rotate anything into. The same cards become a scroll-snapping
   row: native momentum, one card centred at a time, all of them readable.
   site.js watches the same breakpoint and stops writing 3D transforms, so
   the !important here only covers the moment before it runs. */
@media (max-width: 819px) {
  .cf-stage {
    height: auto;
    display: flex;
    gap: var(--s-5);
    perspective: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-block-end: var(--s-4);
    scrollbar-width: none;
  }
  .cf-stage::-webkit-scrollbar { display: none; }
  .cf-item {
    position: static;
    margin-inline-start: 0;
    flex: 0 0 min(82%, 340px);
    width: auto;
    scroll-snap-align: center;
    transform: none !important;
    opacity: 1 !important;
  }
  /* the arrows belong to the ring; the row is driven by the finger */
  .cf-nav { display: none; }
  .cf-item a { box-shadow: 0 14px 34px rgba(10,22,30,.18); }
}

/* 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); }
/* Off-screen rather than display:none — some bots skip anything that is
   not rendered, and this one is meant to be found and filled in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field input:focus, .field textarea:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 4px rgba(14,73,100,.14); }
/* ...but a keyboard user needs more than a border that changes shade, so
   the ring comes back for them. Pointer focus keeps the quieter treatment
   above: :focus-visible is exactly that distinction. */
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.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,
.site-footer .hours-table th, .site-footer .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,
.site-footer .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); }

/* the two lines at the foot of the page hold real links, so they get a
   comfortable target height rather than the 19px of bare text */
.footer-base a { display: inline-flex; align-items: center; min-height: 44px; }
.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; }
}

/* ==========================================================================
   18. Accessibility menu
   Built here rather than pulled in from an overlay service. A third-party
   widget cannot make an inaccessible page accessible — it can only paint
   over it — and it would also hand every visitor's browsing to a server
   that is not ours. This menu changes the site's own tokens, so what it
   turns on is the real page, adjusted.

   Everything below is last in the bundle on purpose: these are the
   visitor's explicit choices and they have to win.
   ========================================================================== */

/* Font scale. The type scale is in rem with a vw term for fluidity, so the
   rem half of every size follows this and the layout keeps its proportions. */
html { font-size: calc(100% * var(--a11y-font, 1)); }

/* ---------- the button -------------------------------------------------- */
.a11y-fab {
  position: fixed; z-index: 95;
  inset-block-end: clamp(1rem, 2vh, 1.6rem);
  inset-inline-end: clamp(1rem, 2vw, 1.6rem);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink); border-radius: 100px;
  box-shadow: 0 8px 26px rgba(10,22,30,.28);
  cursor: pointer; padding: 0;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.a11y-fab svg { width: 26px; height: 26px; }
@media (hover: hover) and (pointer: fine) {
  .a11y-fab:hover { background: var(--petrol); transform: scale(1.06); }
}
.a11y-fab[aria-expanded="true"] { background: var(--petrol); }

/* ---------- the panel --------------------------------------------------- */
.a11y-panel {
  position: fixed; z-index: 96;
  inset-block-end: calc(clamp(1rem, 2vh, 1.6rem) + 64px);
  inset-inline-end: clamp(1rem, 2vw, 1.6rem);
  width: min(300px, calc(100vw - 2rem));
  max-height: min(70vh, 560px); overflow-y: auto;
  background: #fff; color: var(--text);
  border: 1px solid var(--border-ctl); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(10,22,30,.26);
  padding: var(--s-4);
}
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.a11y-head h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.a11y-x {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 100px; cursor: pointer;
  font-size: 1.5rem; line-height: 1; color: var(--text);
}
.a11y-panel .a11y-opt {
  display: block; width: 100%; text-align: start;
  min-height: 44px; margin-top: var(--s-2); padding: .6rem .9rem;
  background: #fff; color: var(--text);
  border: 1px solid var(--border-ctl); border-radius: 10px;
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.a11y-panel .a11y-opt[aria-pressed="true"] {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .a11y-panel .a11y-opt:hover { background: var(--bg-mute); }
  .a11y-panel .a11y-opt[aria-pressed="true"]:hover { background: var(--petrol); color: #fff; }
  .a11y-x:hover { background: var(--bg-mute); }
}
.a11y-row { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.a11y-row .a11y-opt { margin-top: 0; text-align: center; }
.a11y-panel .a11y-reset { margin-top: var(--s-4); border-style: dashed; }
.a11y-foot { margin-top: var(--s-4); font-size: var(--fs-xs); }
.a11y-foot a { color: var(--petrol); }

/* ---------- what the options actually do -------------------------------- */

/* High contrast: black on white, every boundary visible. The tokens are
   redefined rather than colours being forced on elements, so the page keeps
   working exactly as it does normally. */
html.a11y-contrast {
  --ink: #000000;
  --ink-deep: #000000;
  --ink-black: #000000;
  --petrol: #00386B;
  --petrol-lift: #00386B;
  --slate: #000000;
  --silver: #000000;
  --silver-soft: #FFFFFF;
  --bg: #FFFFFF;
  --bg-soft: #FFFFFF;
  --bg-mute: #FFFFFF;
  --hairline: #000000;
  --hairline-2: #000000;
  --border-ctl: #000000;
  --border-strong: #000000;
  --text: #000000;
  --text-dim: #000000;
  --on-dark: #FFFFFF;
  --on-dark-dim: #FFFFFF;
  --focus: #00386B;
}
html.a11y-contrast .veil,
html.a11y-contrast .intro-veil { background: rgba(0,0,0,.72) !important; }

/* Grey scale. Applied to the shell and to each fixed layer separately: a
   filter on a common ancestor would become the containing block for the
   fixed header drawer and for this menu, and they would stop being fixed. */
html.a11y-mono .page-shell,
html.a11y-mono .drawer,
html.a11y-mono .a11y-fab,
html.a11y-mono .a11y-panel { filter: grayscale(1); }

/* Links have to be distinguishable by more than colour. */
html.a11y-links a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Stop animations. Same shape as the prefers-reduced-motion rules, but
   chosen deliberately rather than read from the operating system. */
html.a11y-still *,
html.a11y-still *::before,
html.a11y-still *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* A plain, widely-installed face for anyone who finds the brand type hard
   to read, with the tight tracking of the display sizes relaxed. */
html.a11y-readable body,
html.a11y-readable button,
html.a11y-readable input,
html.a11y-readable select,
html.a11y-readable textarea {
  font-family: Arial, "Arial Hebrew", "Segoe UI", sans-serif !important;
  letter-spacing: normal !important;
}
html.a11y-readable h1,
html.a11y-readable h2,
html.a11y-readable h3,
html.a11y-readable .h1,
html.a11y-readable .h2,
html.a11y-readable .h3 {
  font-weight: 700 !important;
  letter-spacing: normal !important;
}

@media print {
  .a11y-fab, .a11y-panel { display: none !important; }
}