/* ==========================================================================
   Copleys Solicitors
   Type system: Fraunces (display) · Poppins (brand/UI, matches the logo
   wordmark) · Inter (body copy). Brand blue sampled from the logo: #165CA1
   ========================================================================== */

:root {
  /* Brand */
  --blue:        #165ca1;   /* exact logo blue */
  --blue-400:    #3f86cf;
  --blue-600:    #134f8a;
  --blue-700:    #0f3f70;
  --navy:        #0d2740;   /* deep navy for dark sections */
  --navy-900:    #081b2e;
  --gold:        #c2974b;   /* restrained premium accent */
  --gold-soft:   #e6cf9c;

  /* Neutrals */
  --ink:         #16202b;
  --body:        #3c4a59;
  --muted:       #6b7886;
  --line:        #e4e9ee;
  --line-2:      #d4dbe3;
  --bg:          #ffffff;
  --bg-soft:     #f5f7fa;
  --bg-soft-2:   #eef2f6;
  --white:       #ffffff;

  /* Type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --brand:   "Poppins", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* kept as an alias so any legacy rule still resolves to the display face */
  --serif:   var(--display);

  /* Layout */
  --maxw: 1240px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(13,39,64,.06), 0 2px 8px rgba(13,39,64,.05);
  --shadow:    0 6px 24px rgba(13,39,64,.08), 0 2px 6px rgba(13,39,64,.05);
  --shadow-lg: 0 24px 60px rgba(13,39,64,.16);

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --ease-back: cubic-bezier(.34,1.4,.64,1);

  /* Header scroll progress, 0 (at rest) → 1 (condensed). Written by main.js. */
  --hp: 0;

  /* Header metrics, everything in the bar interpolates off --hp so the logo,
     the bar height and the nav text all grow and shrink together. */
  --nav-h:   calc(112px - 40px * var(--hp));
  --logo-h:  calc(78px  - 32px * var(--hp));
  --nav-fs:  calc(1rem  - .1rem * var(--hp));
  --nav-pad: calc(1.05rem - .22rem * var(--hp));
  --nav-gap: calc(6px - 4px * var(--hp));
}

/* Smooth cross-document transitions where the browser supports them. */
@view-transition { navigation: auto; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--body);
  background: var(--bg);
  line-height: 1.68;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--blue-700); }
ul { list-style: none; padding: 0; }

::selection { background: rgba(22,92,161,.16); color: var(--ink); }

/* Fine-grained film grain over the whole page. Costs nothing, reads expensive. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .028; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Custom scrollbar (WebKit + Firefox) */
html { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--blue), var(--blue-700));
  border-radius: 99px; border: 3px solid var(--bg-soft);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--blue-700), var(--navy)); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 0, "WONK" 0;
  color: var(--ink);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.018em;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 100; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.35rem; letter-spacing: -.012em; }
em { font-style: italic; }
/* headings carry no margin by default (see the reset), so give them air when
   copy follows directly */
h1 + p, h2 + p, h3 + p, h4 + p, h2 + ul, h3 + ul { margin-top: 1rem; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink); font-weight: 600; }

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

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(68px, 9.5vw, 132px) 0; position: relative; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy); color: #cdd9e6; }
.section--navy h2, .section--navy h3 { color: #fff; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* Soft brand wash that bleeds between light sections */
.section--soft::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(680px 420px at 12% 0%, rgba(22,92,161,.07), transparent 62%),
    radial-gradient(560px 400px at 92% 100%, rgba(194,151,75,.09), transparent 62%);
}
.section--soft > * { position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--brand);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px; display: inline-block;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transform-origin: left; animation: rule-in .9s var(--ease-expo) both;
}
@keyframes rule-in { from { scale: 0 1; } to { scale: 1 1; } }
.section--navy .eyebrow, .hero .eyebrow, .page-hero .eyebrow { color: var(--gold-soft); }
.lead { font-size: 1.17rem; color: var(--muted); line-height: 1.72; }
.section--navy .lead { color: #aebfd0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--brand); font-weight: 500; font-size: .95rem; letter-spacing: -.005em;
  padding: .88rem 1.7rem; border-radius: 999px;
  border: 1.5px solid transparent; cursor: pointer;
  transition: translate .3s var(--ease-back), transform .4s var(--ease-expo), background .25s var(--ease),
              box-shadow .3s var(--ease), color .2s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  /* --mag* is nudged toward the pointer by main.js; `translate` above stays
     free for the hover lift so the two compose instead of fighting */
  transform: translate(var(--magx, 0px), var(--magy, 0px));
}
/* light sheen that sweeps across on hover */
.btn::before {
  content: ""; position: absolute; top: 0; left: -120%; z-index: -1;
  width: 55%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transition: left .7s var(--ease-expo);
}
.btn:hover::before { left: 160%; }
.btn:active { translate: 0 0; scale: .975; }
.btn svg { width: 18px; height: 18px; transition: translate .3s var(--ease-back); }
.btn:hover svg { translate: 3px 0; }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px -8px rgba(22,92,161,.6); }
.btn--primary:hover { background: var(--blue-700); color: #fff; translate: 0 -3px; box-shadow: 0 18px 34px -10px rgba(22,92,161,.62); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--blue); color: var(--blue); translate: 0 -3px; box-shadow: 0 12px 26px -14px rgba(22,92,161,.7); }
.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { color: var(--blue-700); translate: 0 -3px; box-shadow: 0 18px 34px -12px rgba(0,0,0,.5); }
.btn--outline-light { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.38); backdrop-filter: blur(4px); }
.btn--outline-light:hover { background: rgba(255,255,255,.13); color: #fff; border-color: #fff; translate: 0 -3px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.topbar {
  background: linear-gradient(90deg, var(--navy-900) 0%, var(--navy) 52%, var(--blue-700) 145%);
  color: #b9c8d8;
  font-family: var(--brand);
  font-size: .8rem;
  position: relative; overflow: hidden;
}
/* slow specular sweep across the top strip */
.topbar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%);
  translate: -60% 0;
  animation: topbar-sweep 9s var(--ease) infinite;
}
@keyframes topbar-sweep { 0%,72% { translate: -60% 0; } 100% { translate: 160% 0; } }
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 44px; flex-wrap: wrap; position: relative; z-index: 1;
}
.topbar a { color: #d7e2ee; }
.topbar a:hover { color: #fff; }
.topbar__offices { display: flex; gap: 24px; flex-wrap: wrap; }
.topbar__offices span { display: inline-flex; align-items: center; gap: .45rem; }
.topbar__offices svg { width: 14px; height: 14px; color: var(--gold-soft); }
.topbar__social { display: flex; gap: 8px; align-items: center; }
.topbar__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  transition: background .25s var(--ease), translate .25s var(--ease-back), color .2s var(--ease);
}
.topbar__social a:hover { background: var(--gold); color: var(--navy); translate: 0 -2px; }
.topbar__social svg { width: 15px; height: 15px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  isolation: isolate;
  transition: translate .45s var(--ease-expo);
}
/* base glass plate, always present */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: rgba(255,255,255,.62);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(228,233,238,.65);
}
/* condensed plate, faded in by --hp as you scroll */
.site-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(190%) blur(22px);
  -webkit-backdrop-filter: saturate(190%) blur(22px);
  box-shadow: 0 14px 44px -18px rgba(13,39,64,.45);
  opacity: var(--hp);
  border-bottom: 1px solid transparent;
}
/* hairline of brand colour that draws itself in as the bar condenses */
.site-header .nav::after {
  content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(22,92,161,.35), rgba(194,151,75,.45), transparent);
  scale: var(--hp) 1; opacity: var(--hp);
  transition: none;
}
.site-header.is-hidden { translate: 0 -100%; }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--nav-h); gap: 24px; position: relative;
}
.brand {
  display: flex; align-items: center; flex-shrink: 0;
  position: relative; z-index: 2;
  transition: scale .35s var(--ease-back), filter .35s var(--ease);
}
.brand img { height: var(--logo-h); width: auto; }
.brand:hover { scale: 1.035; filter: drop-shadow(0 8px 18px rgba(22,92,161,.28)); }
.brand:active { scale: .995; }

.nav-links { display: flex; align-items: center; gap: var(--nav-gap); }
.nav-links > li > a {
  display: block; padding: .58rem var(--nav-pad); border-radius: 999px;
  font-family: var(--brand); font-weight: 500;
  font-size: var(--nav-fs); color: var(--ink);
  letter-spacing: calc(.004em - .014em * var(--hp));
  position: relative; z-index: 1; white-space: nowrap;
  transition: color .22s var(--ease);
}
.nav-links > li > a:hover { color: var(--blue); }
.nav-links > li > a[aria-current="page"] { color: var(--blue); font-weight: 600; }
/* gold dot marks the page you're on */
.nav-links > li > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: calc(.3rem - .06rem * var(--hp));
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  translate: -50% 0;
  box-shadow: 0 0 0 0 rgba(194,151,75,.5);
  animation: dot-pulse 3.2s ease-out infinite;
}
@keyframes dot-pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(194,151,75,.45); }
  35%           { box-shadow: 0 0 0 7px rgba(194,151,75,0); }
}

/* Sliding highlight that chases the pointer across the bar (built in JS) */
.nav-pill {
  position: absolute; top: 50%; left: 0; z-index: 0; pointer-events: none;
  width: var(--pill-w, 0px); height: var(--pill-h, 40px);
  translate: var(--pill-x, 0px) -50%;
  border-radius: 999px; opacity: 0;
  background: linear-gradient(180deg, rgba(22,92,161,.13), rgba(22,92,161,.06));
  box-shadow: inset 0 0 0 1px rgba(22,92,161,.16), 0 10px 22px -14px rgba(22,92,161,.9);
  transition: translate .42s var(--ease-expo), width .42s var(--ease-expo),
              height .3s var(--ease), opacity .28s var(--ease);
}
.nav.pill-on .nav-pill { opacity: 1; }

.nav-cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-btn { display: none; }
.nav-btn.btn {
  font-size: calc(.92rem - .06rem * var(--hp));
  padding: calc(.72rem - .1rem * var(--hp)) calc(1.5rem - .28rem * var(--hp));
}

/* Desktop: logo left, nav + CTA right, one vertically centred row. */
@media (min-width: 1024px) {
  .nav { flex-wrap: nowrap; gap: 4px; }
  .nav-menu { display: contents; }        /* hoist lists + button onto the row */
  .brand { order: 0; margin-right: auto; }
  .nav-left, .nav-right { display: flex; align-items: center; gap: var(--nav-gap); }
  .nav-left  { order: 1; }
  .nav-right { order: 2; }
  .nav-btn   { order: 3; display: inline-flex; margin-left: calc(20px - 6px * var(--hp)); }
}
/* Seven links, a wide logo and a CTA is a lot of bar. Between the mobile
   breakpoint and a comfortable desktop, tighten everything so it still fits. */
@media (min-width: 1024px) and (max-width: 1339px) {
  :root {
    --logo-h:  calc(64px - 22px * var(--hp));
    --nav-fs:  calc(.92rem - .06rem * var(--hp));
    --nav-pad: calc(.72rem - .12rem * var(--hp));
    --nav-gap: 0px;
  }
  .nav-btn.btn {
    font-size: calc(.85rem - .03rem * var(--hp));
    padding: calc(.62rem - .06rem * var(--hp)) calc(1.15rem - .15rem * var(--hp));
  }
  .nav-btn { margin-left: 10px; }
}

/* ---------- Mega menu ---------- */
.has-sub { position: relative; }
.has-sub > a::before {
  content: ""; position: absolute; left: 50%; bottom: .3rem;
  width: 0; height: 2px; border-radius: 2px; background: var(--gold);
  translate: -50% 0; transition: width .3s var(--ease-expo);
}
.has-sub:hover > a::before, .has-sub:focus-within > a::before { width: 16px; }
.has-sub > a .caret {
  display: inline-block; width: .55em; height: .55em; margin-left: .4rem;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  translate: 0 -.12em; rotate: 45deg; opacity: .55;
  transition: rotate .3s var(--ease-back), opacity .2s, translate .3s var(--ease-back);
}
.has-sub:hover > a .caret, .has-sub:focus-within > a .caret { rotate: -135deg; translate: 0 .1em; opacity: 1; }

.submenu {
  position: absolute; top: 100%; left: 50%;
  width: min(640px, 92vw);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  margin-top: 12px; padding: 14px;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(190%) blur(26px);
  -webkit-backdrop-filter: saturate(190%) blur(26px);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 22px;
  box-shadow: 0 38px 80px -28px rgba(13,39,64,.45), 0 0 0 1px rgba(13,39,64,.05);
  opacity: 0; visibility: hidden;
  translate: -50% 14px; scale: .97; transform-origin: top center;
  transition: opacity .3s var(--ease), translate .38s var(--ease-expo),
              scale .38s var(--ease-expo), visibility .38s;
}
/* invisible bridge so the pointer can travel from the link into the panel */
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.has-sub:hover .submenu, .has-sub:focus-within .submenu {
  opacity: 1; visibility: visible; translate: -50% 0; scale: 1;
}
.submenu a {
  display: grid; grid-template-columns: 40px 1fr; gap: 13px; align-items: center;
  padding: 11px 12px; border-radius: 14px;
  font-family: var(--brand); font-size: .93rem; font-weight: 500; color: var(--ink);
  opacity: 0; translate: 0 10px;
  transition: background .22s var(--ease), color .22s var(--ease),
              opacity .4s var(--ease), translate .45s var(--ease-expo);
}
.has-sub:hover .submenu a, .has-sub:focus-within .submenu a { opacity: 1; translate: 0 0; }
.submenu a:nth-child(1) { transition-delay: .04s; }
.submenu a:nth-child(2) { transition-delay: .08s; }
.submenu a:nth-child(3) { transition-delay: .12s; }
.submenu a:nth-child(4) { transition-delay: .16s; }
.submenu a:nth-child(5) { transition-delay: .20s; }
.submenu a:nth-child(6) { transition-delay: .24s; }
.submenu a:hover { background: rgba(22,92,161,.07); color: var(--blue); }
.submenu .mt { display: block; line-height: 1.3; }
.submenu .mt span { display: block; font-family: var(--sans); font-size: .77rem; color: var(--muted); font-weight: 400; margin-top: 3px; line-height: 1.45; }
.submenu .mi {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(22,92,161,.13), rgba(22,92,161,.04));
  color: var(--blue);
  transition: background .28s var(--ease), scale .32s var(--ease-back), rotate .32s var(--ease-back);
}
.submenu .mi svg { width: 20px; height: 20px; }
.submenu a:hover .mi {
  background: linear-gradient(140deg, rgba(22,92,161,.2), rgba(194,151,75,.18));
  scale: 1.08; rotate: -4deg;
}

/* ---------- Burger ---------- */
.burger {
  display: none; background: none; border: 0; cursor: pointer;
  padding: 11px; border-radius: 12px; position: relative; z-index: 3;
  transition: background .25s var(--ease);
}
.burger:hover { background: rgba(22,92,161,.07); }
.burger span {
  display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: translate .35s var(--ease-back), rotate .35s var(--ease-back), opacity .2s, width .3s var(--ease);
}
.burger span + span { margin-top: 6px; }
.burger:hover span:nth-child(2) { width: 17px; }
body.menu-open .burger span:nth-child(1) { translate: 0 8px; rotate: 45deg; }
body.menu-open .burger span:nth-child(2) { opacity: 0; scale: .3 1; }
body.menu-open .burger span:nth-child(3) { translate: 0 -8px; rotate: -45deg; width: 24px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  background-color: var(--navy);
  color: #e7eef5;
  padding: clamp(80px, 12vw, 160px) 0 clamp(90px, 13vw, 170px);
  isolation: isolate;
}
/* banner photo, parallaxed by --par (written by main.js) */
.hero__bg {
  position: absolute; inset: -12% 0 -12% 0; z-index: 0; pointer-events: none;
  background: url("../assets/banner-building.jpg") center right / cover no-repeat;
  opacity: .85;
  translate: 0 calc(var(--par, 0) * 90px);
  scale: calc(1 + var(--par, 0) * .08);
  will-change: translate;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    radial-gradient(1100px 620px at 78% -12%, rgba(22,92,161,.3), transparent 62%),
    linear-gradient(95deg, #081b2e 0%, rgba(11,34,56,.96) 34%, rgba(13,39,64,.9) 62%, rgba(13,39,64,.84) 100%),
    linear-gradient(180deg, rgba(8,27,46,.5), transparent 26%, transparent 68%, rgba(8,27,46,.55));
}
/* drifting dot lattice + gold aurora */
.hero::after {
  content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 1;
  background:
    radial-gradient(520px 420px at 18% 22%, rgba(194,151,75,.16), transparent 62%),
    radial-gradient(620px 480px at 84% 78%, rgba(63,134,207,.2), transparent 64%),
    radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: auto, auto, 30px 30px;
  animation: aurora 22s ease-in-out infinite;
}
@keyframes aurora {
  0%,100% { background-position: 0 0, 0 0, 0 0;      opacity: .95; }
  50%     { background-position: 8% -6%, -7% 5%, 46px -26px; opacity: 1; }
}
.hero .container { position: relative; z-index: 2; }
.hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.hero__lead { font-size: 1.2rem; color: #b9cadb; margin: 1.5rem 0 2.2rem; max-width: 52ch; }
.hero__stats { display: flex; gap: 42px; margin-top: 3.2rem; flex-wrap: wrap; }
.hero__stat .n {
  font-family: var(--display); font-size: 2.3rem; color: #fff; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.hero__stat .l { font-family: var(--brand); font-size: .8rem; color: #9fb4c8; margin-top: .5rem; letter-spacing: .04em; }

.hero__card {
  background: linear-gradient(155deg, rgba(13,39,64,.74), rgba(8,27,46,.62));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px; padding: 30px;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 34px 70px -28px rgba(0,0,0,.85);
  position: relative; overflow: hidden;
  transition: transform .5s var(--ease-expo), border-color .4s var(--ease);
}
/* the 3D transform is only mounted while the pointer is on the card, so idle
   text is never rasterised into a blurry 3D layer */
.hero__card.tilt-on { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hero__card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.14), transparent 62%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.hero__card:hover { border-color: rgba(230,207,156,.4); }
.hero__card:hover::before { opacity: 1; }
.hero__card h3 { color: #fff; font-size: 1.25rem; margin-bottom: 4px; }
.hero__card p.sub { color: #9fb4c8; font-size: .92rem; margin-bottom: 18px; }
.office-card { display: flex; gap: 14px; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.12); transition: translate .3s var(--ease); }
.office-card:first-of-type { border-top: 0; }
.office-card:hover { translate: 4px 0; }
.office-card .ico {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: rgba(194,151,75,.16); color: var(--gold-soft); display: grid; place-items: center;
  transition: background .3s var(--ease), scale .3s var(--ease-back);
}
.office-card:hover .ico { background: rgba(194,151,75,.3); scale: 1.07; }
.office-card .ico svg { width: 20px; height: 20px; }
.office-card .name { color: #fff; font-weight: 600; font-size: .98rem; font-family: var(--brand); }
.office-card .addr { color: #9fb4c8; font-size: .85rem; }
.office-card .tel { color: var(--gold-soft); font-weight: 600; font-size: .98rem; font-family: var(--brand); }

/* scroll cue, injected by main.js */
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; z-index: 3;
  translate: -50% 0; display: grid; place-items: center; gap: 8px;
  font-family: var(--brand); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.55); pointer-events: none;
  opacity: calc(1 - var(--hp)); transition: opacity .3s var(--ease);
}
.scroll-cue i {
  display: block; width: 1px; height: 42px; overflow: hidden;
  background: rgba(255,255,255,.18); position: relative;
}
.scroll-cue i::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(var(--gold-soft), transparent);
  animation: cue 2.2s var(--ease) infinite;
}
@keyframes cue { 0% { translate: 0 -100%; } 60%,100% { translate: 0 100%; } }

/* trust strip */
.trustbar { background: var(--navy-900); color: #8ea4ba; font-family: var(--brand); }
.trustbar .container { display: flex; flex-wrap: wrap; gap: 18px 44px; align-items: center; justify-content: center; padding-block: 22px; font-size: .84rem; }
.trustbar span { display: inline-flex; align-items: center; gap: .5rem; transition: color .25s var(--ease), translate .25s var(--ease); }
.trustbar span:hover { color: #dce7f1; translate: 0 -2px; }
.trustbar svg { width: 16px; height: 16px; color: var(--gold); }

/* ==========================================================================
   Section heads
   ========================================================================== */
.sec-head { max-width: 660px; margin-bottom: 56px; }
.sec-head.center { margin-inline: auto; }
.sec-head p { margin-top: 1rem; }

/* ---------- Service cards ---------- */
.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.svc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 30px;
  display: flex; flex-direction: column; height: 100%;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .45s var(--ease-expo), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.svc-card.tilt-on { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.svc-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  scale: 0 1; transform-origin: left; transition: scale .45s var(--ease-expo);
}
.svc-card:hover { box-shadow: 0 26px 56px -22px rgba(22,92,161,.42); border-color: transparent; }
.svc-card:hover::after { scale: 1 1; }
.svc-card .ico {
  width: 58px; height: 58px; border-radius: 16px;
  background: linear-gradient(140deg, rgba(22,92,161,.13), rgba(22,92,161,.04));
  color: var(--blue); display: grid; place-items: center; margin-bottom: 22px;
  transition: background .35s var(--ease), scale .4s var(--ease-back), rotate .4s var(--ease-back);
}
.svc-card:hover .ico {
  scale: 1.08; rotate: -5deg;
  background: linear-gradient(140deg, rgba(22,92,161,.2), rgba(194,151,75,.16));
}
.svc-card .ico svg { width: 28px; height: 28px; }
.svc-card h3 { margin-bottom: 10px; }
.svc-card p { color: var(--body); font-size: .96rem; flex-grow: 1; }
.svc-card .more {
  margin-top: 20px; font-family: var(--brand); font-weight: 600; font-size: .88rem;
  color: var(--blue); display: inline-flex; align-items: center; gap: .45rem;
}
.svc-card .more svg { width: 16px; height: 16px; transition: translate .3s var(--ease-back); }
.svc-card:hover .more svg { translate: 5px 0; }

/* ---------- Feature / split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 84px); align-items: center; }
.split--reverse .split__media { order: 2; }
.feature-media {
  border-radius: var(--radius); overflow: hidden; position: relative;
  background: linear-gradient(135deg, var(--navy), var(--blue-700));
  aspect-ratio: 4/3; box-shadow: var(--shadow-lg);
}
/* offset gold frame that slides into register on scroll */
.feature-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.split__media { position: relative; }
.split__media::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border: 1px solid rgba(194,151,75,.45); border-radius: var(--radius);
  pointer-events: none; opacity: calc(var(--pe, 1) * .9);
  translate: calc((1 - var(--pe, 1)) * -22px) calc((1 - var(--pe, 1)) * -22px);
}
.feature-media svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.feature-media img {
  position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover;
  translate: 0 calc(var(--par, 0) * 34px);
}
.feature-media--photo { aspect-ratio: 4/5; }

.checklist { display: grid; gap: 15px; margin-top: 10px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; transition: translate .3s var(--ease); }
.checklist li:hover { translate: 5px 0; }
.checklist .tick {
  flex-shrink: 0; width: 25px; height: 25px; border-radius: 50%;
  background: rgba(22,92,161,.1); color: var(--blue); display: grid; place-items: center; margin-top: 2px;
  transition: background .25s var(--ease), scale .3s var(--ease-back);
}
.checklist li:hover .tick { background: var(--blue); color: #fff; scale: 1.1; }
.checklist .tick svg { width: 14px; height: 14px; }
.section--navy .checklist .tick { background: rgba(194,151,75,.2); color: var(--gold-soft); }
.section--navy .checklist li:hover .tick { background: var(--gold); color: var(--navy); }

/* ---------- Stats band ---------- */
.stats-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align: center; }
.stats-band > div { position: relative; padding: 8px 12px; }
.stats-band > div + div::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px;
  background: linear-gradient(transparent, rgba(194,151,75,.4), transparent);
}
.stats-band .n {
  font-family: var(--display); font-size: clamp(2.3rem,4.2vw,3.2rem); color: #fff; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.025em;
}
.stats-band .l { font-family: var(--brand); color: #9fb4c8; font-size: .88rem; margin-top: .7rem; }

/* ---------- Practice detail anchors ---------- */
.practice { scroll-margin-top: 130px; padding: clamp(52px,7.5vw,92px) 0; border-bottom: 1px solid var(--line); }
.practice:last-child { border-bottom: 0; }
.practice .tag { font-family: var(--brand); font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* ---------- Team ---------- */
.team-card { text-align: center; }
.team-card .avatar {
  width: 116px; height: 116px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center; font-family: var(--display); font-size: 2.4rem; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-700));
  box-shadow: 0 10px 24px rgba(22,92,161,.25);
}
.team-card h3 { font-size: 1.15rem; margin-bottom: 2px; }
.team-card .role { color: var(--blue); font-weight: 600; font-size: .9rem; }
.team-card .dept { color: var(--muted); font-size: .85rem; margin-top: 4px; }

/* ---------- Profile cards ---------- */
.profiles { display: grid; gap: 28px; }
.profile {
  display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden; isolation: isolate;
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.profile:hover { box-shadow: 0 26px 56px -24px rgba(22,92,161,.4); border-color: transparent; }
.profile__photo {
  border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--bg-soft-2), var(--bg-soft));
  border: 1px solid var(--line);
}
.profile__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
  transition: scale .6s var(--ease-expo);
}
.profile:hover .profile__photo img { scale: 1.05; }
.profile__meta { display: flex; flex-direction: column; }
.profile__name { font-size: 1.45rem; margin-bottom: 2px; }
.profile__role { font-family: var(--brand); color: var(--blue); font-weight: 600; font-size: .93rem; }
.profile__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 15px; }
.profile__badge {
  font-family: var(--brand); font-size: .68rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue-700); background: rgba(22,92,161,.09);
  padding: 5px 11px; border-radius: 999px;
  transition: background .25s var(--ease), translate .25s var(--ease-back);
}
.profile__badge:hover { background: rgba(22,92,161,.17); translate: 0 -2px; }
.profile__badge.alt { color: var(--gold); background: rgba(194,151,75,.14); }
.profile__badge.alt:hover { background: rgba(194,151,75,.24); }
.profile__bio { color: var(--body); font-size: .96rem; }
.profile__bio p { margin-bottom: .8rem; }
.profile__bio ul { display: grid; gap: 6px; margin: .2rem 0 1rem; }
.profile__bio ul li { position: relative; padding-left: 1.4rem; font-size: .93rem; }
.profile__bio ul li::before { content: ""; position: absolute; left: .2rem; top: .62rem; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.profile__quote { border-left: 3px solid var(--gold); padding: 4px 0 4px 18px; margin: 6px 0 14px; font-style: italic; color: var(--muted); font-size: .93rem; }
.profile__contact { margin-top: auto; padding-top: 15px; display: flex; flex-wrap: wrap; gap: 18px; font-size: .9rem; font-family: var(--brand); }
.profile__contact a { font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.profile__contact svg { width: 15px; height: 15px; }

@media (max-width: 720px) {
  .profile { grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .profile__photo { max-width: 180px; }
}

/* ---------- CTA band ---------- */
.cta {
  background: var(--navy);
  color: #cdd9e6; border-radius: 26px; padding: clamp(44px,6.5vw,84px);
  text-align: center; position: relative; overflow: hidden; isolation: isolate;
}
.cta::before {
  content: ""; position: absolute; inset: -40%; z-index: -1;
  background:
    radial-gradient(600px 380px at 22% 18%, rgba(22,92,161,.55), transparent 60%),
    radial-gradient(520px 360px at 80% 84%, rgba(194,151,75,.28), transparent 62%);
  animation: aurora 18s ease-in-out infinite;
}
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px; opacity: .6;
}
.cta h2 { color: #fff; margin-bottom: 14px; }
.cta p { max-width: 52ch; margin-inline: auto; margin-bottom: 30px; color: #b6c7d8; }
.cta .btn-row { justify-content: center; }

/* ---------- Page hero (interior) ---------- */
.page-hero {
  background: linear-gradient(180deg, #0b2238, var(--navy));
  color: #cdd9e6; padding: clamp(70px,9vw,124px) 0 clamp(54px,7vw,92px);
  position: relative; overflow: hidden; isolation: isolate;
}
.page-hero::before {
  content: ""; position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(760px 460px at 84% -10%, rgba(22,92,161,.42), transparent 62%),
    radial-gradient(520px 380px at 8% 105%, rgba(194,151,75,.2), transparent 62%);
  animation: aurora 20s ease-in-out infinite;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 28px 28px;
  mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
  opacity: .5;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #aebfd0; font-size: 1.15rem; max-width: 58ch; margin-top: 1.1rem; }
.breadcrumb { font-family: var(--brand); font-size: .8rem; color: #87a0b8; margin-bottom: 1.3rem; letter-spacing: .02em; }
.breadcrumb a { color: #b9cadb; }
.breadcrumb a:hover { color: #fff; }

/* ---------- Prose ---------- */
.prose h2 { margin: 2.6rem 0 1rem; }
.prose h3 { margin: 1.9rem 0 .8rem; color: var(--ink); }
.prose p { margin-bottom: 1.1rem; }
.prose ul.bullets { display: grid; gap: 11px; margin: 1rem 0 1.4rem; }
.prose ul.bullets li { position: relative; padding-left: 1.8rem; }
.prose ul.bullets li::before { content: ""; position: absolute; left: .2rem; top: .64rem; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.office-block {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px; box-shadow: var(--shadow-sm);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.office-block:hover { box-shadow: 0 22px 48px -24px rgba(22,92,161,.4); border-color: transparent; }
.office-block h3 { display: flex; align-items: center; gap: 11px; }
.office-block .pin { width: 36px; height: 36px; border-radius: 10px; background: rgba(22,92,161,.1); color: var(--blue); display: grid; place-items: center; }
.office-block .pin svg { width: 18px; height: 18px; }
.detail-row { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.detail-row:first-of-type { border-top: 0; }
.detail-row .k { font-family: var(--brand); color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; width: 66px; flex-shrink: 0; padding-top: 4px; }
.detail-row .v { color: var(--ink); font-weight: 500; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--brand); font-size: .84rem; font-weight: 500; color: var(--ink); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1.05rem; border: 1.5px solid var(--line-2); border-radius: 12px;
  font: inherit; font-size: .97rem; color: var(--ink); background: var(--bg-soft);
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(22,92,161,.13); }
.field textarea { min-height: 130px; resize: vertical; }
.form-note { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.form-success { display: none; padding: 14px 16px; border-radius: 12px; background: rgba(22,92,161,.08); color: var(--blue-700); font-weight: 500; font-size: .95rem; border: 1px solid rgba(22,92,161,.2); margin-top: 14px; }
.form-success.show { display: block; animation: pop-in .5s var(--ease-back) both; }
.form-error { display: none; padding: 14px 16px; border-radius: 12px; background: rgba(176,38,30,.07); color: #b0261e; font-weight: 500; font-size: .95rem; border: 1px solid rgba(176,38,30,.25); margin-top: 14px; }
.form-error.show { display: block; animation: pop-in .5s var(--ease-back) both; }
@keyframes pop-in { from { opacity: 0; translate: 0 8px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn.is-loading { opacity: .8; cursor: progress; }
.btn:disabled { opacity: .65; cursor: not-allowed; box-shadow: none; translate: 0 0; }

/* ---------- Map embed ---------- */
.map-frame { display: block; border: 0; width: 100%; height: 320px; border-radius: var(--radius); filter: grayscale(.25) contrast(1.05); transition: filter .5s var(--ease); }
.map-frame:hover { filter: grayscale(0) contrast(1); }

/* ---------- Accordion ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); }
.acc-item { border-top: 1px solid var(--line); }
.acc-item:first-child { border-top: 0; }
.acc-head {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--display); font-size: 1.12rem; color: var(--ink); letter-spacing: -.012em;
  transition: background .25s var(--ease), color .2s var(--ease);
}
.acc-head:hover { background: var(--bg-soft); color: var(--blue); }
.acc-head .plus {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft);
  color: var(--blue); display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
  transition: rotate .4s var(--ease-back), background .25s var(--ease), color .25s var(--ease);
}
.acc-item.open .acc-head .plus { rotate: 135deg; background: var(--blue); color: #fff; }
.acc-body { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease-expo); }
.acc-body__inner { padding: 0 26px 24px; color: var(--body); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--navy-900); color: #93a7bb; padding: 84px 0 0; font-size: .92rem;
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 420px at 10% 0%, rgba(22,92,161,.22), transparent 62%);
}
.site-footer > * { position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; padding-bottom: 52px; }
.site-footer h4 { color: #fff; font-family: var(--brand); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 20px; font-weight: 600; }
.site-footer a { color: #b3c4d4; }
.site-footer a:hover { color: #fff; }
.footer-brand img {
  height: 78px; width: auto; background: #fff; padding: 13px 18px; border-radius: 14px; margin-bottom: 20px;
  transition: scale .35s var(--ease-back), box-shadow .35s var(--ease);
}
.footer-brand img:hover { scale: 1.03; box-shadow: 0 14px 34px -12px rgba(0,0,0,.7); }
.footer-brand p { font-size: .9rem; color: #8298ad; max-width: 32ch; }
.footer-links li { margin-bottom: 11px; }
.footer-contact li { margin-bottom: 13px; display: flex; gap: 10px; }
.footer-contact svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; margin-top: 4px; }
.footer-social { display: flex; gap: 12px; margin-top: 10px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08);
  display: grid; place-items: center;
  transition: background .25s var(--ease), translate .3s var(--ease-back);
}
.footer-social a:hover { background: var(--blue); translate: 0 -3px; }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 24px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: #7e93a8; }
.footer-bottom .legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.sra-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); padding: 6px 12px; border-radius: 8px; font-size: .78rem; color: #9fb4c8; }
.sra-badge strong { color: #fff; }

/* ==========================================================================
   Motion system
   --pe (enter) and --px (exit) are written per element by main.js from the
   element's position in the viewport, so everything eases in on the way down
   and eases back out on the way up, in both directions.
   ========================================================================== */
/* with JS running, everything starts hidden so nothing flashes before the
   first frame; without JS the defaults below leave the page fully visible */
.js .reveal { --pe: 0; --px: 1; }

.reveal {
  --rev-in:  calc((1 - var(--pe, 1)) * var(--rev-dist, 42px));
  --rev-out: calc((1 - var(--px, 1)) * 26px);
  opacity: calc(var(--pe, 1) * var(--px, 1));
  translate: 0 calc(var(--rev-in) - var(--rev-out));
}
.reveal--left  { translate: calc((1 - var(--pe, 1)) * -46px) 0; }
.reveal--right { translate: calc((1 - var(--pe, 1)) *  46px) 0; }
.reveal--scale { scale: calc(.94 + .06 * var(--pe, 1)); }
.reveal--soft  { filter: blur(calc((1 - var(--pe, 1)) * 5px)); }

/* svc-card and profile stack a hover lift on top of the reveal offset */
.svc-card, .profile, .office-block { translate: 0 calc(var(--rev-in, 0px) - var(--rev-out, 0px) + var(--lift, 0px)); }
.svc-card:hover, .profile:hover, .office-block:hover { --lift: -7px; }

/* Word-by-word masked reveal for display headings (built in JS) */
.split-text .w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: .12em .1em .26em; margin: -.12em -.1em -.26em;
}
.split-text .wi {
  display: inline-block;
  translate: 0 115%; opacity: 0;
  transition: translate .95s var(--ease-expo) var(--wd, 0ms), opacity .8s var(--ease) var(--wd, 0ms);
}
.split-text.show .wi { translate: 0 0; opacity: 1; }

/* Above-the-fold intro, staggered by --d */
.intro { opacity: 0; animation: intro-up .95s var(--ease-expo) var(--d, 0ms) forwards; }
@keyframes intro-up { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
.intro-fade { opacity: 0; animation: intro-fade 1.1s var(--ease-expo) var(--d, 0ms) forwards; }
@keyframes intro-fade { from { opacity: 0; translate: 0 34px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }

/* Scroll progress indicator (element injected by JS) */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
  scale: var(--sp, 0) 1; transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--blue-400), var(--gold));
  pointer-events: none; will-change: scale;
}

/* Back to top (injected by JS) */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 150;
  width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--blue), var(--blue-700));
  box-shadow: 0 14px 32px -12px rgba(22,92,161,.9);
  opacity: 0; translate: 0 18px; pointer-events: none;
  transition: opacity .35s var(--ease), translate .45s var(--ease-back), scale .25s var(--ease-back);
}
.to-top.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top:hover { scale: 1.09; }
.to-top:active { scale: .95; }
.to-top svg { width: 20px; height: 20px; }
.to-top::before {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--blue);
  opacity: 0; scale: .9;
  transition: opacity .4s var(--ease), scale .4s var(--ease-expo);
}
.to-top:hover::before { opacity: .35; scale: 1.12; }

/* Cursor-follow spotlight on cards (uses --mx/--my set by JS) */
.svc-card::before, .profile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(22,92,161,.14), transparent 66%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.svc-card:hover::before, .profile:hover::before { opacity: 1; }

/* Animated underline on footer, breadcrumb and topbar links */
.footer-links a, .breadcrumb a, .legal-links a, .topbar__offices a { position: relative; }
.footer-links a::after, .breadcrumb a::after, .legal-links a::after, .topbar__offices a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; scale: 0 1; transform-origin: right;
  transition: scale .35s var(--ease-expo);
}
.footer-links a:hover::after, .breadcrumb a:hover::after,
.legal-links a:hover::after, .topbar__offices a:hover::after { scale: 1 1; transform-origin: left; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 1023px) {
  :root {
    --nav-h:  calc(88px - 16px * var(--hp));
    --logo-h: calc(62px - 12px * var(--hp));
  }
  .topbar { display: none; }
  .burger { display: block; order: 3; }
  /* backdrop-filter creates a containing block for fixed children, which would
     trap the full-screen mobile menu inside the header, so drop it here */
  .site-header::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.94); }
  .site-header::after { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .nav-pill { display: none; }
  .brand { order: 1; }

  /* the whole menu (both lists + button) becomes the slide-out panel */
  .nav-menu {
    order: 2; position: fixed; inset: var(--nav-h) 0 0; background: #fff;
    display: flex; flex-direction: column; align-items: stretch;
    padding: 26px 24px 44px; gap: 2px;
    translate: 0 0; clip-path: inset(0 0 100% 0);
    transition: clip-path .55s var(--ease-expo);
    overflow-y: auto; border-top: 1px solid var(--line);
  }
  .nav-menu::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(600px 400px at 100% 0%, rgba(22,92,161,.07), transparent 60%),
                radial-gradient(500px 340px at 0% 100%, rgba(194,151,75,.1), transparent 60%);
  }
  body.menu-open .nav-menu { clip-path: inset(0 0 0 0); }
  body.menu-open { overflow: hidden; }
  .nav-left, .nav-right { flex-direction: column; align-items: stretch; gap: 0; position: relative; }
  .nav-links > li { opacity: 0; translate: 0 16px; transition: opacity .5s var(--ease), translate .6s var(--ease-expo); }
  body.menu-open .nav-links > li { opacity: 1; translate: 0 0; }
  .nav-left  li:nth-child(1) { transition-delay: .10s; }
  .nav-left  li:nth-child(2) { transition-delay: .15s; }
  .nav-left  li:nth-child(3) { transition-delay: .20s; }
  .nav-right li:nth-child(1) { transition-delay: .25s; }
  .nav-right li:nth-child(2) { transition-delay: .30s; }
  .nav-right li:nth-child(3) { transition-delay: .35s; }
  .nav-right li:nth-child(4) { transition-delay: .40s; }
  .nav-links > li > a {
    padding: 1rem .4rem; font-size: 1.1rem; border-bottom: 1px solid var(--line); border-radius: 0;
    letter-spacing: -.01em;
  }
  .nav-links > li > a:hover { background: transparent; color: var(--blue); }
  .nav-links > li > a[aria-current="page"]::after { left: auto; right: .4rem; bottom: 50%; translate: 0 50%; }
  .has-sub > a .caret { float: right; margin-top: .45em; }
  .submenu {
    position: static; opacity: 1; visibility: visible; translate: 0 0; scale: 1;
    box-shadow: none; border: 0; padding: 6px 0 10px 8px; width: auto; margin: 0;
    grid-template-columns: 1fr; gap: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent;
  }
  .submenu a { opacity: 1; translate: 0 0; transition-delay: 0s !important; padding: 9px 8px; }
  .submenu .mi { width: 32px; height: 32px; border-radius: 9px; }
  .submenu .mi svg { width: 17px; height: 17px; }
  .nav-btn { display: inline-flex; margin-top: 22px; width: 100%;
    opacity: 0; translate: 0 16px; transition: opacity .5s var(--ease) .45s, translate .6s var(--ease-expo) .45s; }
  body.menu-open .nav-btn { opacity: 1; translate: 0 0; }
}
@media (max-width: 720px) {
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media::before { inset: 16px -16px -16px 16px; }
  .stats-band { grid-template-columns: 1fr 1fr; gap: 34px 16px; }
  .stats-band > div + div::before { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  body { font-size: 16px; }
  .hero__stats { gap: 26px; }
  .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
  /* the hero card fills the bottom of the hero on small screens */
  .scroll-cue { display: none; }
  /* pull the hero building image in from the far right to ~75% across */
  .hero__bg { background-position: 75% center; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal--left, .reveal--right, .reveal--scale, .reveal--soft,
  .svc-card, .profile, .office-block {
    opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important;
  }
  .split-text .wi { translate: none; opacity: 1; }
  .intro, .intro-fade { opacity: 1; animation: none; }
  .hero__bg, .feature-media img { translate: none !important; scale: none !important; }
  /* the decorative frame reads off --pe too, and pseudo-elements aren't
     covered by the rule above */
  .split__media::before { opacity: .9 !important; translate: none !important; }
  .scroll-cue { display: none; }
}