/* ==========================================================================
   Legal Venture — Udaipur  ·  v3 stylesheet
   Direction: brand navy + gold (from the LV logo) — deep navy, warm sand,
   white paper, one sealing-wax red accent. Newsreader + Hanken Grotesk.
   ========================================================================== */

:root{
  /* colour */
  --navy-950:#081830;
  --navy-900:#0C2342;
  --navy-800:#0F2C52;
  --navy-700:#1A3D6B;
  --navy-600:#2A5288;
  --navy-100:#E2E8F1;
  --navy-50:#EFF3F8;
  --sand-50:#F8F4ED;
  --sand-100:#F1EADE;
  --sand-200:#E5DAC7;
  --paper:#FFFFFF;
  --ink:#131C2B;
  --ink-2:#434E5E;
  --ink-3:#6B7485;
  --line:#E3DACB;
  --gold:#9C7733;
  --gold-700:#7E5F26;
  --gold-50:#F6EFE1;
  --on-dark:#F4F1EA;
  --on-dark-2:rgba(244,241,234,.74);

  /* type */
  --f-display:"Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hi:"Tiro Devanagari Hindi", "Noto Serif Devanagari", serif;

  /* space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --gutter:clamp(16px, 4vw, 32px);
  --section:clamp(64px, 8vw, 120px);

  /* shape + depth */
  --r-sm:6px; --r-md:12px; --r-lg:20px;
  --sh-1:0 1px 2px rgba(12,35,66,.06), 0 2px 8px rgba(12,35,66,.05);
  --sh-2:0 2px 6px rgba(12,35,66,.06), 0 16px 40px rgba(12,35,66,.12);
  --sh-3:0 8px 20px rgba(12,35,66,.10), 0 30px 70px rgba(12,35,66,.18);

  /* motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --d1:160ms; --d2:260ms; --d3:700ms;
}

/* ------------------------------------------------------------- base ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0; background:var(--sand-50); color:var(--ink);
  font:400 17px/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:500; color:var(--ink); letter-spacing:-.015em; text-wrap:balance; }
address{ font-style:normal; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--navy-800); color:var(--on-dark); }
.container{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--gutter); }
.skip{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--navy-900); color:#fff; padding:10px 16px; border-radius:var(--r-sm); }
.skip:focus{ top:12px; }
.ph{ background:#FFF1A8; color:#3B3200; padding:0 .3em; border-radius:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[lang="hi"]{ font-family:var(--f-hi); letter-spacing:0; }

/* ---------------------------------------------------------- buttons ---- */
.btn{
  --bg:var(--navy-800); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 22px; border-radius:8px;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bd);
  font:600 15.5px/1.1 var(--f-body); letter-spacing:.005em; white-space:nowrap;
  transition:background var(--d2) var(--ease-out), color var(--d2) var(--ease-out), border-color var(--d2) var(--ease-out), transform var(--d1) var(--ease-out), box-shadow var(--d2) var(--ease-out);
}
.btn svg{ width:18px; height:18px; flex:0 0 auto; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-seal{ --bg:#C9A052; --fg:var(--navy-950); box-shadow:0 6px 18px -8px rgba(179,139,63,.6); }
.btn-seal:hover{ --bg:#D8B060; }
.btn-dark:hover{ --bg:var(--navy-700); }
.btn-line{ --bg:transparent; --fg:var(--navy-900); --bd:rgba(12,35,66,.28); }
.btn-line:hover{ --bd:var(--navy-900); --bg:rgba(12,35,66,.04); }
.btn-ghost-light{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.38); }
.btn-ghost-light:hover{ --bd:#fff; --bg:rgba(255,255,255,.07); }
.btn-ghost-light .ph{ font-weight:600; }
.link{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--navy-800);
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat; padding-bottom:3px;
  transition:background-size var(--d2) var(--ease-out), gap var(--d2) var(--ease-out);
}
.link svg{ width:18px; height:18px; }
.link:hover{ background-size:100% 1.5px; gap:12px; }

/* ----------------------------------------------------------- topbar ---- */
.topbar{ background:var(--navy-950); color:var(--on-dark-2); font-size:13.5px; }
.topbar-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); min-height:40px; }
.topbar-hi{ font-size:14px; color:var(--on-dark); opacity:.85; }
.topbar-links{ display:flex; gap:var(--s5); }
.topbar-links a{ display:inline-flex; align-items:center; gap:7px; transition:color var(--d1); }
.topbar-links a:hover{ color:#fff; }
.topbar-links svg{ width:15px; height:15px; opacity:.8; }
.topbar .ph{ background:rgba(255,241,168,.9); }

/* ----------------------------------------------------------- header ---- */
.site-header{
  position:sticky; top:0; z-index:60; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid transparent; transition:border-color var(--d2), box-shadow var(--d2);
}
.site-header.is-stuck{ border-color:var(--line); box-shadow:0 6px 24px -18px rgba(12,35,66,.5); }
.header-in{ display:flex; align-items:center; gap:var(--s6); min-height:78px; }
.brand{ display:inline-flex; align-items:center; gap:12px; flex:0 0 auto; }
.brand-logo{ height:52px; width:auto; transition:transform var(--d3) var(--ease-out); }
.brand:hover .brand-logo{ transform:translateY(-2px); }
.brand-word{ display:flex; flex-direction:column; font:600 23px/1 var(--f-display); letter-spacing:-.01em; color:var(--navy-900); }
.brand-word small{ margin-top:5px; font:600 10.5px/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.brand--light .brand-word{ color:#fff; }
.brand--light .brand-word small{ color:var(--on-dark-2); }
.nav{ margin-left:auto; }
.nav ul{ display:flex; gap:clamp(14px, 1.8vw, 28px); }
.nav a{ position:relative; display:block; white-space:nowrap; padding:10px 0; font-weight:500; font-size:15.5px; color:var(--ink-2); transition:color var(--d1); }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:4px; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform var(--d2) var(--ease-out); }
.nav a:hover{ color:var(--navy-900); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--navy-900); font-weight:600; }
.header-cta{ min-height:46px; padding:0 18px; font-size:14.5px; }
.menu-btn{ display:none; margin-left:auto; width:46px; height:46px; border-radius:10px; align-items:center; justify-content:center; color:var(--navy-900); border:1.5px solid var(--line); }
.menu-btn svg{ width:24px; height:24px; }

/* sheet (mobile menu) */
.sheet{ position:fixed; inset:0; z-index:120; overflow:hidden; contain:layout paint; }
.sheet[hidden]{ display:none; }
.sheet-backdrop{ position:absolute; inset:0; background:rgba(8,24,48,.5); opacity:0; transition:opacity var(--d2) var(--ease-out); }
.sheet-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(420px, 100%); background:var(--sand-50);
  display:flex; flex-direction:column; padding:var(--s4) var(--gutter) var(--s6);
  transform:translateX(100%); transition:transform 420ms var(--ease-out); overflow-y:auto;
}
.sheet.is-open .sheet-backdrop{ opacity:1; }
.sheet.is-open .sheet-panel{ transform:none; }
.sheet-top{ display:flex; align-items:center; justify-content:space-between; min-height:62px; }
.sheet-close{ width:46px; height:46px; display:grid; place-items:center; border-radius:10px; border:1.5px solid var(--line); color:var(--navy-900); }
.sheet-close svg{ width:24px; height:24px; }
.sheet-links{ margin-top:var(--s5); }
.sheet-links a{ display:flex; align-items:center; justify-content:space-between; padding:16px 2px; font:500 25px/1.2 var(--f-display); color:var(--navy-900); border-bottom:1px solid var(--line); }
.sheet-links a svg{ width:20px; height:20px; color:var(--gold); opacity:.8; }
.sheet-links a[aria-current="page"]{ color:var(--gold); }
.sheet-foot{ margin-top:auto; padding-top:var(--s6); display:grid; gap:var(--s3); }
.sheet-hi{ margin-top:var(--s3); text-align:center; color:var(--ink-3); font-size:14px; }
body.sheet-open{ overflow:hidden; }

/* ------------------------------------------------------ type helpers ---- */
.kicker{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:var(--s4);
  font:600 12.5px/1.2 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--navy-700);
}
.kicker::before{ content:""; width:26px; height:2px; background:var(--gold); border-radius:2px; }
.on-dark .kicker{ color:#C8D3E4; }
.h-xl{ font-size:clamp(2.5rem, 1.4rem + 4vw, 4.4rem); line-height:1.02; letter-spacing:-.025em; font-weight:450; }
.h-lg{ font-size:clamp(2rem, 1.35rem + 2.5vw, 3.2rem); line-height:1.08; letter-spacing:-.02em; }
.h-md{ font-size:clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem); line-height:1.15; }
em.accent, .h-xl em, .h-lg em{ font-style:italic; color:var(--gold); font-weight:inherit; }
.on-dark em.accent, .on-dark .h-lg em{ color:#D8B872; }
.lead{ font-size:clamp(17px, 16px + .3vw, 19.5px); line-height:1.65; color:var(--ink-2); max-width:62ch; }
.on-dark{ color:var(--on-dark); }
.on-dark h1,.on-dark h2,.on-dark h3{ color:#fff; }
.on-dark .lead{ color:var(--on-dark-2); }

.section{ padding-block:var(--section); }
.section--white{ background:var(--paper); }
.section--sand{ background:var(--sand-100); }
.section--navy{ background:var(--navy-900); }

.head-split{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--s7); align-items:end; margin-bottom:clamp(40px, 5vw, 72px); }
.head-split .lead{ padding-bottom:6px; }
.head-stack{ max-width:760px; margin-bottom:clamp(36px, 4vw, 56px); }
.head-stack .lead{ margin-top:var(--s4); }

/* ticks list */
.ticks{ display:grid; gap:10px; }
.ticks li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink-2); line-height:1.5; }
.ticks svg{ flex:0 0 auto; width:18px; height:18px; margin-top:3px; color:var(--navy-600); }
.on-dark .ticks li{ color:var(--on-dark-2); }
.on-dark .ticks svg{ color:#D8B872; }

/* ------------------------------------------------------------- hero ---- */
.hero{ position:relative; padding-block:clamp(32px, 4vw, 56px) clamp(56px, 7vw, 104px); overflow:clip; }
.hero::before{ /* faint engraved grid like ledger paper, top-right only */
  content:""; position:absolute; inset:0 0 auto auto; width:48%; height:70%;
  background-image:linear-gradient(rgba(12,35,66,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(12,35,66,.045) 1px, transparent 1px);
  background-size:28px 28px; mask-image:radial-gradient(ellipse at 80% 20%, #000 20%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse at 80% 20%, #000 20%, transparent 70%);
  pointer-events:none;
}
.hero-grid{ position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(40px, 6vw, 88px); align-items:center; }
.hero-copy .h-xl{ margin-top:var(--s2); }
.hero-copy .lead{ margin-top:var(--s5); }
.hero-hi{ margin-top:var(--s5); font-size:17px; color:var(--navy-700); }
.hero-btns{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }
.hero-trust{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s5); margin-top:clamp(36px, 4vw, 56px); padding-top:var(--s5); border-top:1px solid var(--line); }
.hero-trust li{ display:flex; flex-direction:column; gap:8px; font-size:14.5px; line-height:1.45; color:var(--ink-2); }
.hero-trust b{ display:block; font:600 16px/1.3 var(--f-display); color:var(--navy-900); letter-spacing:0; }
.hero-trust svg{ width:24px; height:24px; color:var(--gold); }

.hero-media{ position:relative; }
.hero-photo{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; background:var(--sand-200); box-shadow:var(--sh-3); }
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.hero-photo figcaption{ position:absolute; right:14px; bottom:12px; font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.88); text-shadow:0 1px 6px rgba(0,0,0,.5); }

/* the paper "document" card — signature element */
.doc{
  position:relative; background:var(--paper); border-radius:6px; box-shadow:var(--sh-2);
  padding:26px 26px 24px; color:var(--ink);
}
.doc::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:6px 0 0 6px; background:var(--navy-800); }
.doc-title{ font:600 19px/1.25 var(--f-display); color:var(--navy-900); padding-right:64px; }
.doc-sub{ margin-top:4px; font-size:13px; color:var(--ink-3); letter-spacing:.02em; }
.doc .ticks{ margin-top:var(--s4); gap:9px; }
.doc .ticks li{ font-size:15px; color:var(--ink); }
.doc .seal-stamp{ position:absolute; top:-26px; right:-18px; width:92px; height:92px; transform:rotate(-12deg); filter:drop-shadow(0 6px 10px rgba(126,95,38,.35)); }
.hero .doc{ position:absolute; left:clamp(-72px, -5vw, -24px); bottom:36px; width:min(330px, 78%); }

/* ------------------------------------------------------- practice ---- */
.practice-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(28px, 3.4vw, 48px); }
.practice{ display:flex; flex-direction:column; }
.practice-img{ position:relative; display:block; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; background:var(--sand-200); }
.practice-img img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease-out); }
.practice:hover .practice-img img{ transform:scale(1.045); }
.practice-no{ position:absolute; left:14px; top:14px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.92); font:600 15px/1 var(--f-display); color:var(--gold); }
.practice h3{ margin-top:var(--s5); font-size:clamp(1.45rem, 1.2rem + .7vw, 1.75rem); line-height:1.2; }
.practice h3 a{ transition:color var(--d1); }
.practice h3 a:hover{ color:var(--navy-700); }
.practice > p{ margin-top:var(--s3); color:var(--ink-2); }
.practice .ticks{ margin-top:var(--s4); font-size:15.5px; }
.practice .link{ margin-top:auto; padding-top:var(--s5); align-self:flex-start; background-position:0 calc(100% - 0px); }

/* ------------------------------------------------------------ why ------ */
.why-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.why-photo{ position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/5; }
.why-photo img{ width:100%; height:100%; object-fit:cover; }
.why-badge{ position:absolute; left:20px; right:20px; bottom:20px; display:flex; gap:14px; align-items:center; padding:16px 18px; background:rgba(8,24,48,.86); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:var(--r-md); color:var(--on-dark); font-size:14.5px; line-height:1.45; }
.why-badge svg{ flex:0 0 auto; width:28px; height:28px; color:#D8B872; }
.why-badge b{ display:block; color:#fff; font:600 16px/1.3 var(--f-display); }
.reasons{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px); margin-top:clamp(32px, 4vw, 48px); }
.reason-ic{ display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:var(--navy-50); color:var(--navy-700); }
.reason-ic svg{ width:24px; height:24px; }
.reason h3{ margin-top:var(--s4); font-size:1.28rem; line-height:1.25; }
.reason p{ margin-top:var(--s2); color:var(--ink-2); font-size:16px; }

/* ------------------------------------------------------ photo band ----- */
.band{ position:relative; isolation:isolate; min-height:clamp(420px, 52vw, 600px); display:flex; align-items:center; overflow:hidden; background:var(--navy-950); }
.band > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.band::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(8,24,48,.94) 0%, rgba(8,24,48,.78) 42%, rgba(8,24,48,.25) 100%); }
.band-in{ max-width:720px; padding-block:var(--s9); }
.band blockquote{ margin:0; font:italic 400 clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem)/1.15 var(--f-display); color:#fff; letter-spacing:-.015em; text-wrap:balance; }
.band blockquote::before{ content:"“"; display:block; height:.55em; font-size:2.3em; line-height:1; color:#D8B872; font-style:normal; }
.band cite{ display:block; margin-top:var(--s5); font:500 15px/1.5 var(--f-body); font-style:normal; color:var(--on-dark-2); max-width:52ch; }
.band .btn{ margin-top:var(--s6); }

/* ------------------------------------------------------------ steps ---- */
.steps{ position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:var(--s5); counter-reset:step; }
.steps::before{ content:""; position:absolute; top:27px; left:28px; right:28px; height:1px; background:repeating-linear-gradient(90deg, var(--navy-600) 0 6px, transparent 6px 12px); opacity:.5; }
.step{ position:relative; }
.step-n{ position:relative; display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--paper); border:1.5px solid var(--navy-700); font:600 19px/1 var(--f-display); color:var(--navy-800); box-shadow:0 0 0 8px var(--sand-100); }
.step:last-child .step-n{ background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
.step h3{ margin-top:var(--s5); font-size:1.2rem; line-height:1.25; }
.step p{ margin-top:var(--s2); font-size:15.5px; color:var(--ink-2); }

/* ------------------------------------------------------------- team ---- */
.team-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(28px, 3vw, 44px) clamp(20px, 3vw, 40px); }
.person{ display:flex; gap:18px; align-items:center; }
.monogram{
  position:relative; flex:0 0 auto; display:grid; place-items:center; width:78px; height:78px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--navy-700), var(--navy-900)); color:#fff;
  font:500 25px/1 var(--f-display); letter-spacing:.02em;
  box-shadow:inset 0 0 0 4px var(--navy-900), inset 0 0 0 5px rgba(255,255,255,.28);
}
.monogram--gold{ background:radial-gradient(circle at 35% 30%, #C49A4C, var(--gold-700)); box-shadow:inset 0 0 0 4px var(--gold-700), inset 0 0 0 5px rgba(255,255,255,.3); }
.person h3{ font-size:1.3rem; line-height:1.2; }
.person-role{ margin-top:5px; font:600 12px/1.3 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-700); }
.person-loc{ margin-top:3px; font-size:14.5px; color:var(--ink-3); }
.team-foot{ margin-top:clamp(36px, 4vw, 56px); display:flex; flex-wrap:wrap; align-items:center; gap:var(--s5); justify-content:space-between; padding-top:var(--s5); border-top:1px solid var(--line); color:var(--ink-2); }

/* ------------------------------------------------------------ court ---- */
.court-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.court-grid .ticks{ margin-top:var(--s5); }
.court-grid .btns{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }
.court-photo{ position:relative; }
.court-photo .frame{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:1/1; }
.court-photo img{ width:100%; height:100%; object-fit:cover; }
.court-photo::after{ content:""; position:absolute; inset:18px -18px -18px 18px; border:1.5px solid rgba(216,184,114,.45); border-radius:var(--r-lg); z-index:-1; }
.court-photo{ isolation:isolate; }
.courts{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); margin-top:var(--s6); }
.courts div{ padding:16px 18px; border-radius:var(--r-md); background:rgba(255,255,255,.06); }
.courts b{ display:block; font:600 17px/1.25 var(--f-display); color:#fff; }
.courts span{ font-size:14px; color:var(--on-dark-2); }

/* ---------------------------------------------------- faq + contact ---- */
.faq-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(40px, 5vw, 80px); align-items:start; }
.qa-list{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{ list-style:none; cursor:pointer; display:flex; gap:var(--s4); align-items:flex-start; justify-content:space-between; padding:22px 0; font:500 1.18rem/1.35 var(--f-display); color:var(--navy-900); }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--gold-700); }
.qa summary i{ position:relative; flex:0 0 auto; width:28px; height:28px; margin-top:-1px; border-radius:50%; border:1.5px solid var(--line); transition:background var(--d2), border-color var(--d2); }
.qa summary i::before,.qa summary i::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.6px; margin:-.8px 0 0 -5.5px; background:var(--navy-800); transition:transform var(--d2) var(--ease-out); }
.qa summary i::after{ transform:rotate(90deg); }
.qa[open] summary i{ background:var(--navy-800); border-color:var(--navy-800); }
.qa[open] summary i::before,.qa[open] summary i::after{ background:#fff; }
.qa[open] summary i::after{ transform:rotate(0); }
.qa-a{ padding:0 48px 24px 0; color:var(--ink-2); }

.desk{ position:sticky; top:110px; padding:clamp(28px, 3vw, 40px); border-radius:var(--r-lg); background:var(--navy-900); color:var(--on-dark); overflow:hidden; isolation:isolate; }
.desk::after{ content:""; position:absolute; right:-60px; bottom:-60px; width:220px; height:220px; border-radius:50%; border:1px solid rgba(255,255,255,.08); box-shadow:0 0 0 30px rgba(255,255,255,.025), 0 0 0 60px rgba(255,255,255,.02); z-index:-1; }
.desk h2{ color:#fff; font-size:1.7rem; line-height:1.2; }
.desk > p{ margin-top:var(--s3); color:var(--on-dark-2); font-size:15.5px; }
.desk-list{ display:grid; gap:18px; margin-top:var(--s5); }
.desk-list li{ display:flex; gap:14px; font-size:15.5px; line-height:1.5; }
.desk-list svg{ flex:0 0 auto; width:20px; height:20px; margin-top:2px; color:#D8B872; }
.desk-list small{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,241,234,.55); margin-bottom:2px; }
.desk-list a:hover{ text-decoration:underline; text-underline-offset:3px; }
.desk .btn{ width:100%; margin-top:var(--s6); }
.desk .btn + .btn{ margin-top:var(--s3); }

/* -------------------------------------------------------- page hero ---- */
.phero{ position:relative; isolation:isolate; display:flex; align-items:flex-end; min-height:clamp(420px, 44vw, 560px); overflow:hidden; background:var(--navy-950); }
.phero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.phero::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(8,24,48,.95) 0%, rgba(8,24,48,.82) 40%, rgba(8,24,48,.35) 100%), linear-gradient(0deg, rgba(8,24,48,.6), transparent 45%); }
.phero-in{ width:100%; padding-block:var(--s9) clamp(48px, 6vw, 80px); color:var(--on-dark); }
.phero h1{ max-width:17ch; color:#fff; font-size:clamp(2.35rem, 1.5rem + 3.2vw, 4rem); line-height:1.04; letter-spacing:-.022em; font-weight:450; }
.phero h1 em{ font-style:italic; color:#D8B872; }
.phero .lead{ margin-top:var(--s5); color:var(--on-dark-2); max-width:58ch; }
.phero .btns{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:var(--s5); font-size:14px; color:rgba(244,241,234,.66); }
.crumbs a{ color:rgba(244,241,234,.86); }
.crumbs a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.crumbs [aria-current]{ color:#D8B872; }

/* ------------------------------------------------------------ intro ---- */
.intro-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.intro-grid .lead + p, .intro-grid p + p{ margin-top:var(--s4); color:var(--ink-2); }
.intro-grid .btns{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }
.intro-photo{ position:relative; }
.intro-photo .frame{ border-radius:var(--r-lg); overflow:hidden; aspect-ratio:5/4; }
.intro-photo img{ width:100%; height:100%; object-fit:cover; }
.intro-photo .doc{ position:absolute; right:20px; bottom:-36px; width:min(300px, 80%); }
.intro-photo .doc .ticks li{ font-size:14.5px; }

/* ---------------------------------------------------- service list ----- */
.svc-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(36px, 4vw, 56px) clamp(32px, 5vw, 80px); }
.svc{ display:grid; grid-template-columns:56px 1fr; gap:20px; align-items:start; scroll-margin-top:120px; }
.svc-ic{ display:grid; place-items:center; width:56px; height:56px; border-radius:16px; background:var(--navy-50); color:var(--navy-700); transition:background var(--d2), color var(--d2), transform var(--d2) var(--ease-out); }
.svc:hover .svc-ic{ background:var(--navy-800); color:#fff; transform:rotate(-4deg); }
.svc-ic svg{ width:26px; height:26px; }
.svc h3{ font-size:1.35rem; line-height:1.22; }
.svc p{ margin-top:var(--s2); color:var(--ink-2); }
.svc .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s3); }
.svc .tags span{ font-size:13px; font-weight:500; color:var(--navy-700); background:var(--navy-50); padding:4px 10px; border-radius:999px; }

/* ------------------------------------------------ document checklist --- */
.paper-wrap{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(40px, 6vw, 96px); align-items:start; }
.paper{ position:relative; background:var(--paper); border-radius:6px; box-shadow:var(--sh-2); padding:clamp(28px, 4vw, 48px); }
.paper::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; border-radius:6px 6px 0 0; background:linear-gradient(90deg, var(--navy-800) 0 70%, var(--gold) 70%); }
.paper-head{ display:flex; justify-content:space-between; gap:var(--s5); align-items:flex-start; padding-bottom:var(--s5); border-bottom:1px dashed var(--sand-200); }
.paper-head h3{ font-size:1.5rem; line-height:1.2; color:var(--navy-900); }
.paper-head p{ margin-top:6px; font-size:14px; color:var(--ink-3); }
.paper-head .seal-stamp{ width:78px; height:78px; flex:0 0 auto; transform:rotate(-10deg); margin-top:-6px; }
.paper-list{ counter-reset:doc; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s6); margin-top:var(--s3); }
.paper-list li{ counter-increment:doc; display:grid; grid-template-columns:34px 1fr; gap:8px; padding:14px 0; border-bottom:1px solid #F0EAE0; }
.paper-list li::before{ content:counter(doc, decimal-leading-zero); font:600 14px/1.6 var(--f-display); color:var(--gold); }
.paper-list b{ display:block; font-weight:600; color:var(--ink); line-height:1.4; }
.paper-list span{ display:block; margin-top:2px; font-size:14.5px; color:var(--ink-3); line-height:1.5; }
.paper-note{ margin-top:var(--s5); font-size:14px; color:var(--ink-3); }

/* ------------------------------------------------------------ table ---- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-md); background:var(--paper); box-shadow:var(--sh-1); }
.table{ width:100%; min-width:640px; border-collapse:collapse; font-size:15.5px; }
.table th{ text-align:left; padding:18px 22px; font:600 12px/1.3 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); background:var(--sand-50); }
.table td{ padding:20px 22px; border-top:1px solid var(--line); color:var(--ink-2); vertical-align:top; }
.table td:first-child{ font:600 1.08rem/1.3 var(--f-display); color:var(--navy-900); width:28%; }
.table tr{ transition:background var(--d1); }
.table tbody tr:hover{ background:var(--navy-50); }

/* ----------------------------------------------------------- values ---- */
.values{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(32px, 4vw, 64px); }
.value-n{ font:italic 400 3.4rem/1 var(--f-display); color:var(--gold); }
.value h3{ margin-top:var(--s4); font-size:1.45rem; }
.value p{ margin-top:var(--s3); color:var(--ink-2); }

/* ------------------------------------------------------------ story ---- */
.story-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
.story-photo{ border-radius:200px 200px var(--r-lg) var(--r-lg); overflow:hidden; aspect-ratio:3/4; max-width:460px; }
.story-photo img{ width:100%; height:100%; object-fit:cover; }
.story-grid .lead{ margin-top:var(--s5); }
.story-grid p + p{ margin-top:var(--s4); color:var(--ink-2); }

/* ---------------------------------------------------------- contact ---- */
.contact-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(32px, 5vw, 72px); align-items:start; min-width:0; }
.contact-info{ min-width:0; }
.info-list{ display:grid; gap:var(--s5); margin-top:var(--s5); }
.info-list li{ display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:start; }
.info-list .ic{ display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--navy-50); color:var(--navy-700); }
.info-list .ic svg{ width:22px; height:22px; }
.info-list small{ display:block; font:600 12px/1.3 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; }
.info-list a,.info-list address,.info-list p{ color:var(--ink); font-size:16.5px; line-height:1.55; }
.info-list a:hover{ color:var(--gold-700); }
.map{ margin-top:var(--s6); border-radius:var(--r-md); overflow:hidden; aspect-ratio:16/11; background:var(--sand-200); box-shadow:var(--sh-1); }
.map iframe{ width:100%; height:100%; border:0; display:block; }
.form-card{ min-width:0; background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--sh-2); padding:clamp(24px, 3.5vw, 44px); scroll-margin-top:110px; }
.form-card h2{ font-size:1.8rem; line-height:1.2; }
.form-card > p{ margin-top:var(--s2); color:var(--ink-2); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s5) var(--s4); margin-top:var(--s6); min-width:0; }
.field{ display:grid; gap:8px; min-width:0; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:14px; font-weight:600; color:var(--ink); }
.field label span{ color:var(--gold); }
.field input,.field select,.field textarea{
  width:100%; min-width:0; min-height:52px; padding:12px 14px; border-radius:10px;
  border:1.5px solid var(--line); background:var(--sand-50); color:var(--ink); font:inherit; font-size:16px;
  transition:border-color var(--d1), background var(--d1), box-shadow var(--d1);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--sand-200); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--navy-700); background:#fff; box-shadow:0 0 0 4px rgba(26,61,107,.12); }
.field.invalid input,.field.invalid select,.field.invalid textarea{ border-color:var(--gold); background:var(--gold-50); }
.field .err{ display:none; font-size:13px; color:var(--gold-700); }
.field.invalid .err{ display:block; }
.form-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); margin-top:var(--s6); }
.form-foot p{ font-size:14px; color:var(--ink-3); }
.form-foot p a{ color:var(--navy-800); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.btn[disabled]{ opacity:.6; pointer-events:none; }
.form-ok{ display:none; margin-top:var(--s5); padding:16px 18px; border-radius:10px; background:var(--navy-50); color:var(--navy-900); font-weight:500; }
.form-ok.show{ display:block; }

/* -------------------------------------------------------------- 404 ---- */
.nf{ min-height:62vh; display:grid; place-items:center; text-align:center; }
.nf .seal-stamp{ width:120px; height:120px; margin:0 auto var(--s5); transform:rotate(-10deg); }
.nf .lead{ margin:var(--s4) auto 0; }
.nf .btns{ display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:center; margin-top:var(--s6); }

/* ----------------------------------------------------------- footer ---- */
.footer{ background:var(--navy-950); color:var(--on-dark-2); font-size:15.5px; padding-top:clamp(56px, 7vw, 96px); }
.footer-cta{ display:grid; grid-template-columns:minmax(0,1.3fr) auto; gap:var(--s6); align-items:end; padding-bottom:clamp(44px, 5vw, 72px); border-bottom:1px solid rgba(255,255,255,.1); }
.footer-cta-title{ font:400 clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem)/1.12 var(--f-display); color:#fff; letter-spacing:-.02em; max-width:22ch; text-wrap:balance; }
.footer-cta-btns{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:clamp(32px, 4vw, 56px); padding-block:clamp(44px, 5vw, 64px); }
.footer-about p{ margin-top:var(--s5); max-width:40ch; line-height:1.65; }
.footer-hi{ font-size:15px; color:#D8B872 !important; }
.footer-h{ font:600 12px/1.3 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:rgba(244,241,234,.5); margin-bottom:var(--s4); }
.footer-col ul{ display:grid; gap:12px; }
.footer-col a{ transition:color var(--d1); }
.footer-col a:hover{ color:#fff; }
.footer-office address,.footer-office p{ line-height:1.65; }
.footer-office p:not(.footer-h){ margin-top:var(--s3); }
.footer-base{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s3); padding-block:24px; border-top:1px solid rgba(255,255,255,.1); font-size:14px; color:rgba(244,241,234,.55); }
.footer-base a{ color:rgba(244,241,234,.8); }
.footer-base a:hover{ color:#fff; }

/* ------------------------------------------------ floating buttons ---- */
.fab-stack{ position:fixed; right:20px; bottom:20px; z-index:80; display:flex; flex-direction:column; align-items:center; gap:12px; }
.fab{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; box-shadow:0 10px 24px -8px rgba(8,24,48,.45); transition:transform var(--d2) var(--ease-out), opacity var(--d2), visibility var(--d2); }
.fab svg{ width:26px; height:26px; }
.fab-wa{ background:#1FAF5A; color:#fff; }
.fab-wa:hover{ transform:scale(1.06); }
.fab-top{ width:46px; height:46px; background:var(--paper); color:var(--navy-900); border:1px solid var(--line); opacity:0; visibility:hidden; transform:translateY(10px); }
.fab-top svg{ width:20px; height:20px; }
.fab-top.show{ opacity:1; visibility:visible; transform:none; }
.fab-top:hover{ background:var(--navy-900); color:#fff; }
.mbar{ display:none; }

/* ------------------------------------------------------------ motion --- */
.js .rv{ opacity:0; transform:translateY(18px); transition:opacity var(--d3) var(--ease-out), transform var(--d3) var(--ease-out); transition-delay:var(--dl, 0ms); }
.js .rv.in{ opacity:1; transform:none; }
.js .hero-copy > *{ opacity:0; transform:translateY(16px); animation:rise 820ms var(--ease-out) forwards; }
.js .hero-copy > :nth-child(1){ animation-delay:60ms; }
.js .hero-copy > :nth-child(2){ animation-delay:140ms; }
.js .hero-copy > :nth-child(3){ animation-delay:240ms; }
.js .hero-copy > :nth-child(4){ animation-delay:320ms; }
.js .hero-copy > :nth-child(5){ animation-delay:400ms; }
.js .hero-copy > :nth-child(6){ animation-delay:480ms; }
.js .hero-photo{ clip-path:inset(12% 0 0 0 round var(--r-lg)); animation:unveil 1200ms var(--ease-out) 120ms forwards; }
.js .hero-photo img{ transform:scale(1.08); animation:settle 1600ms var(--ease-out) 120ms forwards; }
.js .hero .doc{ opacity:0; transform:translateY(24px) rotate(-1.5deg); animation:rise 900ms var(--ease-out) 650ms forwards; }
.js .hero .doc .seal-stamp{ opacity:0; transform:scale(1.6) rotate(-30deg); animation:stamp 520ms cubic-bezier(.3,1.6,.5,1) 1250ms forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@keyframes unveil{ to{ clip-path:inset(0 0 0 0 round var(--r-lg)); } }
@keyframes settle{ to{ transform:scale(1); } }
@keyframes stamp{ to{ opacity:1; transform:rotate(-12deg) scale(1); } }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:1ms !important; animation-delay:0ms !important; transition-duration:1ms !important; }
  .js .rv{ opacity:1; transform:none; }
}

/* -------------------------------------------------------- responsive --- */
@media (max-width: 1220px){
  .nav, .header-cta{ display:none; }
  .menu-btn{ display:inline-flex; }
}
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ max-width:620px; }
  .hero .doc{ left:auto; right:-8px; }
  .practice-grid{ grid-template-columns:1fr 1fr; }
  .practice:last-child{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s6); align-items:start; }
  .practice:last-child .practice-img{ grid-row:1 / span 5; }
  .practice:last-child h3{ margin-top:0; }
  .why-grid,.court-grid,.intro-grid,.story-grid,.paper-wrap,.faq-grid,.contact-grid{ grid-template-columns:1fr; }
  .why-photo{ aspect-ratio:16/10; }
  .steps{ grid-template-columns:1fr; gap:0; }
  .steps::before{ top:28px; bottom:28px; left:27px; right:auto; width:1px; height:auto; background:repeating-linear-gradient(180deg, var(--navy-600) 0 6px, transparent 6px 12px); }
  .step{ display:grid; grid-template-columns:56px 1fr; gap:0 20px; padding-bottom:var(--s6); }
  .step:last-child{ padding-bottom:0; }
  .step h3{ margin-top:12px; }
  .step p{ grid-column:2; }
  .team-grid{ grid-template-columns:1fr 1fr; }
  .desk{ position:relative; top:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-cta{ grid-template-columns:1fr; align-items:start; }
  .intro-photo{ max-width:640px; }
  .story-photo{ max-width:420px; }
  .court-photo{ max-width:560px; }
}
@media (max-width: 760px){
  body{ font-size:16.5px; padding-bottom:64px; }
  .topbar-hi{ display:none; }
  .topbar-in{ justify-content:center; }
  .topbar-links a:last-child{ display:none; }
  .header-in{ min-height:66px; }
  .brand-logo{ height:44px; }
  .brand-word{ font-size:21px; }
  .head-split{ grid-template-columns:1fr; gap:var(--s4); }
  .hero-trust{ grid-template-columns:1fr; gap:var(--s4); }
  .hero-trust li{ flex-direction:row; align-items:flex-start; gap:14px; }
  .hero-trust svg{ flex:0 0 auto; margin-top:2px; }
  .hero-btns .btn, .phero .btns .btn, .intro-grid .btns .btn, .court-grid .btns .btn{ flex:1 1 100%; }
  .hero-photo{ aspect-ratio:4/4.3; }
  .hero .doc{ position:relative; left:auto; right:auto; bottom:auto; width:auto; margin:-72px 14px 0; }
  .practice-grid{ grid-template-columns:1fr; gap:var(--s7); }
  .practice:last-child{ display:flex; }
  .practice:last-child h3{ margin-top:var(--s5); }
  .reasons{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .svc-grid{ grid-template-columns:1fr; }
  .svc{ grid-template-columns:48px 1fr; gap:16px; }
  .svc-ic{ width:48px; height:48px; border-radius:14px; }
  .paper-list{ grid-template-columns:1fr; }
  .paper-head .seal-stamp{ width:62px; height:62px; }
  .values{ grid-template-columns:1fr; }
  .courts{ grid-template-columns:1fr; }
  .intro-photo .doc{ position:relative; right:auto; bottom:auto; width:auto; margin:-56px 14px 0; }
  .court-photo::after{ inset:12px -10px -12px 12px; }
  .form-grid{ grid-template-columns:1fr; }
  .qa summary{ font-size:1.08rem; }
  .qa-a{ padding-right:0; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-cta-btns .btn{ flex:1 1 100%; }
  .fab-stack{ bottom:80px; right:14px; }
  .fab-wa{ display:none; }
  .mbar{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:1fr 1fr; background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -8px 24px -16px rgba(8,24,48,.4); padding-bottom:env(safe-area-inset-bottom); }
  .mbar a{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:60px; font-weight:600; color:var(--navy-900); }
  .mbar a svg{ width:20px; height:20px; }
  .mbar-wa{ background:#1FAF5A; color:#fff !important; }
  .band-in{ padding-block:var(--s8); }
  .band::before{ background:linear-gradient(180deg, rgba(8,24,48,.7), rgba(8,24,48,.92)); }
  .phero::before{ background:linear-gradient(180deg, rgba(8,24,48,.55) 0%, rgba(8,24,48,.9) 60%, rgba(8,24,48,.96) 100%); }
  .phero-in{ padding-top:var(--s10); }
}
@media (max-width: 380px){
  .brand-word small{ letter-spacing:.1em; }
  .btn{ padding:0 16px; }
}

/* dark-section variants */
.on-dark .person-role{ color:#D8B872; }
.on-dark .person-loc{ color:var(--on-dark-2); }
.on-dark .monogram{ background:radial-gradient(circle at 35% 30%, var(--navy-600), var(--navy-800)); box-shadow:inset 0 0 0 4px var(--navy-950), inset 0 0 0 5px rgba(255,255,255,.3); }
.team-grid--dark{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (max-width: 760px){ .team-grid--dark{ grid-template-columns:1fr; } }

/* ---------------------------------------------- four equal practice areas --- */
.area-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(24px, 2.6vw, 36px); }
.area{ display:flex; flex-direction:column; }
.area-img{ position:relative; display:block; border-radius:var(--r-md); overflow:hidden; aspect-ratio:4/3; background:var(--sand-200); }
.area-img img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease-out); }
.area:hover .area-img img{ transform:scale(1.05); }
.area h3{ margin-top:var(--s5); font-size:clamp(1.3rem, 1.1rem + .5vw, 1.5rem); line-height:1.22; }
.area h3 a:hover{ color:var(--navy-700); }
.area > p{ margin-top:var(--s3); color:var(--ink-2); font-size:16px; }
.area .link{ margin-top:auto; padding-top:var(--s5); align-self:flex-start; }

/* all-services tiles — every service the same size */
.tiles{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.tile{ position:relative; display:flex; flex-direction:column; gap:14px; padding:22px 20px 20px; background:var(--paper); border-radius:var(--r-md); box-shadow:var(--sh-1); min-height:100%; transition:transform var(--d2) var(--ease-out), box-shadow var(--d2) var(--ease-out); }
.tile:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.tile-ic{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:var(--navy-50); color:var(--navy-700); transition:background var(--d2), color var(--d2); }
.tile:hover .tile-ic{ background:var(--navy-800); color:#fff; }
.tile-ic svg{ width:22px; height:22px; }
.tile-body b{ display:block; font:500 1.08rem/1.3 var(--f-display); color:var(--ink); }
.tile-body span{ display:block; margin-top:6px; font-size:14.5px; line-height:1.5; color:var(--ink-3); }
.tile-tag{ margin-top:auto; align-self:flex-start; font:600 11px/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; padding:6px 9px; border-radius:999px; background:var(--gold-50); color:var(--gold-700); }

/* hero card: the four desks */
.doc-areas{ margin-top:var(--s4); display:grid; }
.doc-areas a{ display:grid; grid-template-columns:30px 1fr 18px; align-items:center; gap:8px; padding:11px 0; border-top:1px solid #EEE7DA; font-weight:500; font-size:15.5px; color:var(--ink); transition:color var(--d1); }
.doc-areas li:first-child a{ border-top:0; }
.doc-areas a span{ font:600 13px/1 var(--f-display); color:var(--gold); }
.doc-areas a svg{ width:16px; height:16px; color:var(--gold); opacity:0; transform:translateX(-4px); transition:opacity var(--d1), transform var(--d2) var(--ease-out); }
.doc-areas a:hover{ color:var(--navy-700); }
.doc-areas a:hover svg{ opacity:1; transform:none; }

/* team on navy */
.on-dark .team-foot{ border-color:rgba(255,255,255,.12); color:var(--on-dark-2); }
.link--light{ color:#D8B872; }

@media (max-width: 1100px){
  .area-grid{ grid-template-columns:1fr 1fr; gap:var(--s7) var(--s6); }
  .tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px){
  .area-grid{ grid-template-columns:1fr; }
  .tiles{ grid-template-columns:1fr; gap:10px; }
  .tile{ display:grid; grid-template-columns:44px 1fr; gap:4px 16px; padding:18px; }
  .tile-ic{ grid-row:1 / span 2; }
  .tile-tag{ grid-column:2; margin-top:8px; }
}