/* ==========================================================================
   Fedora Fiduciary — version 3
   Layout after daltonfiduciaryservices.com · content from v1 + v2
   PALETTE: navy, with the brass/gilt accent carried over from versions 1 and 2.
   Gold is an accent, never a ground. It arrives through two per-surface tokens:
     --gold       gold that carries TEXT, so it changes with the surface
                  (#8A6B2A on light at 4.85:1, #F0DDA8 on navy at 9.4:1)
     --gold-mark  gold for marks, hairlines and chevrons that carry no words
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* navy ladder — the whole palette */
  --ink:#0C1730;          /* deepest, headings on light */
  --deep:#081226;         /* near-black navy, top bar */
  --navy-header:#1A3163;  /* brand header navy */
  --blue-1:#21407F;
  --blue-2:#28509C;
  --blue-3:#3163BC;       /* the accent that replaces gold */
  --blue-4:#4C7FD6;       /* hover / highlight */
  --ice:#E3EBF8;          /* light accent on dark grounds (4.81:1 on #3163BC) */
  --ice-2:#F2F6FD;
  --pale:#FFFFFF;
  --paper:#F2F5FB;        /* second light ground */
  --paper-line:#DCE4F2;

  /* brass ladder — the gold hint, same values as versions 1 and 2 */
  --brass:#C6A254;
  --gilt:#F0DDA8;
  --gilt-deep:#8A6B2A;
  --brass-plate:linear-gradient(100deg,#8A6B2A 0%,#C6A254 18%,#F2E1AE 37%,#CBA85C 54%,#96742F 74%,#DCC287 100%);
  /* a brighter plate for anything that carries dark type: every stop clears
     4.5:1 against #120E05, which the full plate above does not at its ends */
  --brass-bright:linear-gradient(100deg,#B28F3F 0%,#D6B569 22%,#F2E1AE 46%,#D8B86D 68%,#B99447 100%);
  --brass-ink:#120E05;    /* the only type colr that sits on a gold plate */
  --brass-ease:cubic-bezier(.33,.72,0,1);

  /* per-surface tokens, redefined by each .surf-* class */
  --fg:#000000;
  --fg-2:#2B313C;
  --heading:var(--ink);
  --accent:var(--blue-1);
  --accent-2:var(--blue-2);
  --gold:#7E6126;
  --gold-mark:#A9842F;
  --gold-line:rgba(138,107,42,.34);
  --line:rgba(12,23,48,.16);
  --line-soft:rgba(12,23,48,.09);
  --panel:#FFFFFF;
  --panel-line:rgba(12,23,48,.12);

  /* gradients */
  --g-hero:linear-gradient(135deg,#0C1730 0%,#1A3163 38%,#21407F 66%,#3163BC 100%);
  /* bands sit in the deep navy register so the brass carries; the brighter blues
     stay in the ladder for links and focus but no longer flood whole sections */
  --g-band:radial-gradient(120% 140% at 100% 0%,rgba(49,99,188,.30) 0%,rgba(49,99,188,0) 55%),linear-gradient(160deg,#0E1B38 0%,#142852 55%,#1A3163 100%);
  --g-band-2:radial-gradient(110% 130% at 0% 100%,rgba(49,99,188,.26) 0%,rgba(49,99,188,0) 55%),linear-gradient(200deg,#0E1B38 0%,#13264D 55%,#1A3163 100%);
  --g-deep:linear-gradient(168deg,#0C1730 0%,#12203F 55%,#1A3163 100%);
  --g-pale:linear-gradient(180deg,#F5F7FB 0%,#F1F4FA 100%);
  --g-rule:linear-gradient(90deg,transparent,var(--accent),transparent);
  --g-plate:linear-gradient(135deg,#1A3163 0%,#28509C 50%,#3163BC 100%);

  /* type */
  /* Three voices, each with one job:
     --caps    Cinzel, only for short uppercase labels (eyebrows, wordmark, kicker)
     --display Cormorant Garamond, for every heading, in sentence case
     --script  Parisienne, only for the tagline
     --text    Source Sans 3, for reading and for interface labels */
  --caps:"Cinzel","Caps Fallback",Optima,"Palatino Linotype",Georgia,serif;
  --display:"Cormorant Garamond","Serif Fallback",Garamond,Georgia,"Times New Roman",serif;
  --script:"Parisienne","Script Fallback","Snell Roundhand","Segoe Script",cursive;
  --text:"Source Sans 3","Sans Fallback","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --shadow-sm:0 1px 2px rgba(12,23,48,.06),0 4px 14px -6px rgba(12,23,48,.12);
  --shadow-md:0 2px 4px rgba(12,23,48,.05),0 18px 40px -22px rgba(12,23,48,.35);

  /* metrics */
  --shell:1240px;
  --gutter:clamp(20px,5vw,64px);
  --band:clamp(72px,9vw,132px);
  --band-sm:clamp(48px,5.5vw,80px);
  --colgap:clamp(18px,2.4vw,34px);
  --r:3px;
  --r-lg:6px;
  --ease:cubic-bezier(.16,.84,.24,1);
}

@font-face{ font-family:"Caps Fallback"; src:local("Optima"),local("Palatino Linotype"),local("Georgia"); size-adjust:96%; ascent-override:92%; }
@font-face{ font-family:"Serif Fallback"; src:local("Georgia"),local("Times New Roman"); size-adjust:103%; }
@font-face{ font-family:"Script Fallback"; src:local("Snell Roundhand"),local("Segoe Script"); size-adjust:80%; }
@font-face{ font-family:"Sans Fallback"; src:local("Arial"),local("Helvetica"); size-adjust:94%; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--pale);
  color:var(--fg);
  font-family:var(--text);
  font-size:18px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); }
:focus-visible{ outline:2px solid var(--gold-mark); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--brass); color:#0A1226; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.shell-narrow{ max-width:900px; }
.band{ padding-block:var(--band); position:relative; }
.band-sm{ padding-block:var(--band-sm); position:relative; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; z-index:200; background:#fff; color:var(--ink); padding:12px 18px; border-radius:var(--r); }

/* --------------------------------------------------------------------------
   2. SURFACES
   -------------------------------------------------------------------------- */
.surf-pale{
  background:var(--pale); color:#000;
  --fg:#000000; --fg-2:#2B313C; --heading:var(--ink);
  --accent:#21407F; --accent-2:#28509C;
  --gold:#7E6126; --gold-mark:#A9842F; --gold-line:rgba(138,107,42,.34);
  --line:rgba(12,23,48,.16); --line-soft:rgba(12,23,48,.09);
  --panel:#FFFFFF; --panel-line:rgba(12,23,48,.12);
}
.surf-paper{
  background:var(--g-pale); color:#000;
  --fg:#000000; --fg-2:#2B313C; --heading:var(--ink);
  --accent:#21407F; --accent-2:#28509C;
  --gold:#7E6126; --gold-mark:#A9842F; --gold-line:rgba(138,107,42,.34);
  --line:rgba(12,23,48,.16); --line-soft:rgba(12,23,48,.09);
  --panel:#FFFFFF; --panel-line:rgba(12,23,48,.12);
}
.surf-b1,.surf-b2,.surf-deep,.surf-img{
  color:#FFFFFF;
  --fg:#FFFFFF; --fg-2:#E9EFFA; --heading:#FFFFFF;
  --accent:#E3EBF8; --accent-2:#F2F6FD;
  --gold:#F0DDA8; --gold-mark:#C6A254; --gold-line:rgba(198,162,84,.42);
  --line:rgba(255,255,255,.24); --line-soft:rgba(255,255,255,.13);
  --panel:rgba(255,255,255,.08); --panel-line:rgba(255,255,255,.20);
}
.surf-b1{ background:var(--g-band); }
.surf-b2{ background:var(--g-band-2); }
.surf-deep{ background:var(--g-deep); }

/* image-backed surfaces: photograph under a navy gradient scrim.
   Both layers live on ::before, because ::after is taken by .grain — an element
   only ever has one of each pseudo-element. Swap --img for a real photograph
   and nothing else needs to change. */
.surf-img{ position:relative; background:var(--ink); isolation:isolate; }
.surf-img::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--scrim,linear-gradient(98deg,rgba(8,18,38,.95) 0%,rgba(11,21,44,.88) 34%,rgba(19,36,74,.72) 64%,rgba(33,64,127,.54) 100%)), var(--img);
  background-size:cover, cover;
  background-position:center, var(--img-pos,center);
  background-repeat:no-repeat, no-repeat;
}
.surf-img > *{ position:relative; z-index:1; }

/* lighter file on small screens — each section supplies --img-sm alongside --img */
@media (max-width:900px){
  .surf-img::before{
    background-image:var(--scrim,linear-gradient(98deg,rgba(8,18,38,.95) 0%,rgba(11,21,44,.88) 34%,rgba(19,36,74,.72) 64%,rgba(33,64,127,.54) 100%)), var(--img-sm,var(--img));
    background-position:center, var(--img-pos-sm,var(--img-pos,center));
  }
}

/* Scrim variants, chosen per section by where the text sits over the photograph.
   These are deliberately light. The people in these photographs are the reason
   the photographs are here, so the wash holds only over the text column and then
   falls away fast: by two thirds across, the subject is carrying barely a tint.
   The floor is .60 alpha wherever body copy sits, which is what white type needs
   to clear 4.5:1 even if the pixel underneath it were pure white. Headings sit
   above a heavier stop again. The text-shadow below is the belt to this braces. */
.scrim-left{
  --scrim:linear-gradient(96deg,
    rgba(8,18,38,.90) 0%, rgba(10,20,42,.84) 26%, rgba(11,22,46,.70) 46%,
    rgba(14,28,58,.46) 60%, rgba(20,39,80,.22) 76%, rgba(28,55,110,.10) 100%);
}
/* centred copy over a subject that sits right of centre: a soft diagonal that
   keeps weight under the words and opens toward the lower right */
.scrim-even{
  --scrim:linear-gradient(168deg,
    rgba(9,19,40,.78) 0%, rgba(11,22,46,.70) 34%, rgba(12,24,50,.62) 58%,
    rgba(13,26,54,.56) 80%, rgba(14,28,58,.50) 100%);
}
/* the consultation strip: a vignette, open at the edges so the room reads */
.scrim-deep{
  --scrim:radial-gradient(86% 150% at 50% 48%,
    rgba(9,19,40,.80) 0%, rgba(10,20,44,.70) 46%, rgba(11,22,46,.46) 76%, rgba(13,26,54,.26) 100%);
}

/* On a phone there is no room to put copy beside anybody, so the horizontal
   falloff becomes a vertical one: heavier at the top where the words are,
   opening toward the bottom of the frame. */
@media (max-width:900px){
  .scrim-left{
    --scrim:linear-gradient(176deg,
      rgba(8,18,38,.86) 0%, rgba(10,20,42,.76) 40%, rgba(12,24,50,.64) 74%, rgba(13,26,54,.60) 100%);
  }
  .scrim-even{
    --scrim:linear-gradient(176deg,
      rgba(9,19,40,.80) 0%, rgba(11,22,46,.70) 46%, rgba(13,26,54,.56) 100%);
  }
  .scrim-deep{
    --scrim:radial-gradient(110% 130% at 50% 44%,
      rgba(9,19,40,.82) 0%, rgba(10,20,44,.72) 50%, rgba(12,24,50,.50) 100%);
  }
}

/* A copy column held to one side of an image band, so the photograph's subject
   keeps the other side to itself. Used where faces sit right of centre and
   centred text would land across them. */
.side-col{ max-width:min(580px,53%); }
@media (max-width:1024px){ .side-col{ max-width:min(580px,64%); } }
@media (max-width:900px){ .side-col{ max-width:100%; } }

/* A small note at the foot of an image band can land on a blown-out highlight
   that no sane scrim would cover. Rather than darken the whole photograph for
   one line, the note carries its own ground. */
.surf-img .form-note,.surf-img .badge-note,.surf-img .feenote{
  display:inline-block; background:rgba(7,15,32,.66);
  padding:8px 15px; border-radius:var(--r);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}

/* Insurance for type over a photograph. On a navy ground this is invisible; where
   the scrim has thinned and a bright highlight comes through, it is what keeps the
   letterforms edged. Cheaper and far less destructive than more scrim. */
.surf-img h1,.surf-img h2,.surf-img h3,.surf-img h4,
.surf-img p,.surf-img li,.surf-img .eyebrow,.surf-img .hero-tag,.surf-img dt,.surf-img dd{
  text-shadow:0 1px 2px rgba(5,11,26,.58), 0 0 20px rgba(5,11,26,.46);
}
.surf-img .btn{ text-shadow:none; }

/* ---- image-slot markers -------------------------------------------------
   Each image-backed section carries one of these tags naming the slot and the
   size to supply. When the real photographs are in, delete this whole block
   (or add `.slot-tag{display:none}`) and every marker disappears at once.     */
.slot-tag{
  position:absolute; right:14px; bottom:14px; z-index:3; max-width:min(92%,420px);
  display:flex; align-items:baseline; gap:.65em; flex-wrap:wrap;
  padding:8px 13px; border-radius:var(--r);
  background:rgba(8,18,38,.72); border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(3px);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; line-height:1.45; letter-spacing:.02em; color:#DCE5F5;
  pointer-events:none;
}
.slot-tag b{ color:#fff; font-family:var(--caps); font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; font-size:10.5px; }
.slot-tag i{ font-style:normal; color:#A9BCDD; }
@media (max-width:620px){ .slot-tag{ right:10px; bottom:10px; font-size:10.5px; padding:6px 10px; } }
@media print{ .slot-tag{ display:none; } }

/* hairline grain so large navy fields do not band on wide screens */
.grain::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay; background-size:180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. TYPE
   -------------------------------------------------------------------------- */
h1,h2,h3,h4{ font-family:var(--display); color:var(--heading); font-weight:600; line-height:1.1; letter-spacing:0; margin:0 0 .5em; text-wrap:balance; }
h1{ font-size:clamp(2.5rem,1.4rem + 3.5vw,4.3rem); letter-spacing:-.005em; line-height:1.04; }
h2{ font-size:clamp(2.05rem,1.3rem + 2.3vw,3.2rem); }
h3{ font-size:clamp(1.34rem,1.16rem + .55vw,1.62rem); line-height:1.2; letter-spacing:0; font-weight:700; text-wrap:pretty; }
h4{ font-family:var(--caps); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; }
p{ text-wrap:pretty; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
.band p,.band li,.band dd,.band td,.band-sm p,.band-sm li{ color:var(--fg); }
.surf-b1 p,.surf-b2 p,.surf-deep p,.surf-img p,
.surf-b1 li,.surf-b2 li,.surf-deep li,.surf-img li{ font-weight:400; color:var(--fg); }
.surf-pale p,.surf-paper p,.surf-pale li,.surf-paper li{ font-weight:400; color:var(--fg-2); }

.eyebrow{
  font-family:var(--caps); font-size:.78rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1.15em; display:flex; align-items:center; gap:.85em; font-weight:600;
}
.eyebrow::after{ content:""; height:1px; flex:1; max-width:120px; background:linear-gradient(90deg,var(--gold-mark),transparent); }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ content:""; height:1px; flex:1; max-width:90px; background:linear-gradient(90deg,transparent,var(--gold-mark)); }

.lede{ font-size:clamp(1.1rem,1rem + .45vw,1.3rem); color:var(--fg-2); font-weight:400; line-height:1.6; max-width:60ch; }
.surf-b1 .lede,.surf-b2 .lede,.surf-deep .lede,.surf-img .lede{ font-weight:400; color:var(--fg-2); }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }
/* the short rule is a struck brass bar, not a fade, so it reads the same weight
   on a pale ground and on navy */
.rule{ width:48px; height:2px; background:var(--brass-plate); background-size:220% 100%; margin:0 0 1.6em; border:0; border-radius:1px; }
.center .rule{ margin-inline:auto; }

.sect-head{ max-width:70ch; margin-bottom:clamp(30px,4vw,54px); }
.sect-head.center{ margin-inline:auto; }

/* --------------------------------------------------------------------------
   4. BUTTONS AND LINKS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--text); font-size:.84rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  padding:16px 30px; min-height:52px; border-radius:var(--r); border:1px solid transparent; line-height:1.2;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background 280ms var(--ease), color 280ms var(--ease), border-color 280ms var(--ease), transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

/* The brass plate, as in versions 1 and 2. One treatment on every ground, light
   or dark — a gold button on navy is the whole reason the brass exists, and the
   plate carries dark type at 6.3:1 at its darkest stop. On hover the plate goes
   navy and the label turns gilt, which is the move from version 2. */
.btn-primary{
  background:var(--brass-bright); background-size:200% 100%; background-position:18% 0;
  color:var(--brass-ink); font-weight:600; border-color:transparent;
  background:linear-gradient(180deg,#E3C77F 0%,#D2B062 55%,#C49F50 100%);
  box-shadow:inset 0 1px 0 rgba(255,251,236,.55), 0 1px 2px rgba(60,44,10,.18), 0 10px 22px -14px rgba(120,92,36,.75);
  transition:background-position 700ms var(--brass-ease), background 420ms var(--brass-ease),
             color 300ms, box-shadow 300ms, transform 280ms var(--ease);
}
.btn-primary:hover{
  background:linear-gradient(100deg,#12203F 0%,#1B2C52 45%,#0E1A36 100%);
  color:var(--gilt);
  box-shadow:inset 0 0 0 1px rgba(198,162,84,.6), 0 14px 28px -16px rgba(12,23,48,.6);
}
.btn-primary:active{ box-shadow:inset 0 1px 0 rgba(255,251,236,.55), 0 5px 12px -9px rgba(150,116,47,.9); }

.btn-ghost{ border-color:rgba(12,23,48,.28); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:#fff; }
.surf-b1 .btn-ghost,.surf-b2 .btn-ghost,.surf-deep .btn-ghost,.surf-img .btn-ghost{
  border-color:rgba(240,221,168,.45); color:var(--gilt);
}
.surf-b1 .btn-ghost:hover,.surf-b2 .btn-ghost:hover,.surf-deep .btn-ghost:hover,.surf-img .btn-ghost:hover{
  background:rgba(255,255,255,.08); border-color:var(--gilt); color:#fff;
}
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(26px,3vw,38px); }
.center .btn-row,.btn-row.center,.cta-strip .btn-row,.statement .btn-row{ justify-content:center; }

.tlink{
  display:inline-flex; align-items:center; gap:.5em; text-decoration:none;
  font-family:var(--text); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--accent); padding-bottom:3px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%; background-size:0 1px;
  transition:background-size 360ms var(--ease), color 260ms var(--ease);
}
.tlink:hover{ background-size:100% 1px; }
.tlink svg{ width:14px; height:14px; transition:transform 300ms var(--ease); }
.tlink:hover svg{ transform:translateX(4px); }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.topbar{ background:var(--deep); color:var(--ice); font-size:.86rem; }
.topbar .shell{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:44px; flex-wrap:wrap; }
.topbar a{ color:var(--ice); text-decoration:none; transition:color .22s; }
.topbar a:hover{ color:#fff; }
.topbar-left{ display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.topbar-left span{ display:inline-flex; align-items:center; gap:.5em; }
.topbar-left svg{ width:14px; height:14px; opacity:.8; }
.topbar-right{ display:flex; gap:6px; align-items:center; }
.topbar-right a{ width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(255,255,255,.18); transition:background .22s, border-color .22s; }
.topbar-right a:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); }
.topbar-right svg{ width:14px; height:14px; }

.site-header{
  background:var(--navy-header); position:sticky; top:0; z-index:130;
  border-bottom:1px solid rgba(198,162,84,.32);
  box-shadow:0 2px 20px -8px rgba(8,18,38,.7);
}
.site-header .shell{ display:flex; align-items:center; gap:clamp(16px,3vw,40px); min-height:88px; }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; margin-right:auto; }
.brand img{ width:78px; height:auto; }
.brand-name{ font-family:var(--caps); color:#fff; line-height:1.1; letter-spacing:.18em; font-size:1.02rem; font-weight:600; }
.brand-name b{ display:block; font-weight:500; }
.brand-name i{ display:block; font-style:normal; font-size:.8em; color:var(--brass); letter-spacing:.2em; }

.nav{ display:flex; gap:clamp(12px,1.7vw,26px); align-items:center; }
.nav a{
  color:#D5DFF0; text-decoration:none; font-family:var(--text); font-size:.8rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; padding:10px 2px; position:relative; white-space:nowrap;
  transition:color .24s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--brass-plate); background-size:140% 100%; transform:scaleX(0); transform-origin:left;
  transition:transform 320ms var(--brass-ease);
}
.nav a:hover{ color:#fff; }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:#fff; }
.header-cta{ padding:12px 22px; font-size:.78rem; }
.burger{ display:none; background:none; border:1px solid rgba(255,255,255,.3); border-radius:var(--r); width:44px; height:40px; cursor:pointer; align-items:center; justify-content:center; }
.burger span{ display:block; width:20px; height:2px; background:#fff; position:relative; transition:background .2s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:#fff; transition:transform .3s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }

/* The menu lives inside the sticky header, so it stays pinned to the top while the
   page scrolls, and the header's z-index keeps it above every band and the phone bar. */
.mobile-nav{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:var(--navy-header); border-bottom:1px solid rgba(198,162,84,.32);
  box-shadow:0 18px 30px -12px rgba(5,11,26,.75);
  max-height:calc(100vh - 72px); max-height:calc(100dvh - 72px); overflow-y:auto; overscroll-behavior:contain;
}
.mobile-nav.open{ display:block; }
.mobile-nav a{
  display:block; padding:15px var(--gutter); color:#E8EEF9; text-decoration:none;
  font-family:var(--text); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.88rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.mobile-nav a:hover{ background:rgba(255,255,255,.07); color:#fff; }

@media (max-width:1040px){
  .nav,.header-cta{ display:none; }
  .burger{ display:flex; }
  .site-header .shell{ justify-content:space-between; min-height:72px; }
}
@media (max-width:620px){
  .topbar-left{ gap:14px; font-size:.8rem; }
  .topbar .shell{ padding-block:8px; }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero{ padding-block:clamp(84px,12vw,170px); overflow:hidden; }
.hero-inner{ max-width:760px; }
.hero h1{ margin-bottom:.34em; }
.hero h1 em{ font-style:normal; display:flex; align-items:center; gap:.9em; font-family:var(--caps); font-weight:600; color:#FFFFFF; font-size:clamp(.78rem,.7rem + .3vw,.92rem); line-height:1.4; letter-spacing:.3em; text-transform:uppercase; margin-bottom:1.5rem; }
.hero h1 em::after{ content:""; height:1px; width:64px; background:linear-gradient(90deg,var(--gold-mark),transparent); }
.hero .hero-sub{ font-family:var(--script); font-style:normal; font-size:clamp(1.5rem,1.15rem + 1.1vw,2.1rem); color:var(--gilt); font-weight:400; line-height:1.35; margin:.15em 0 .6em; letter-spacing:.01em; }
.hero p{ color:#DCE5F5; max-width:54ch; font-size:1.08rem; }
.hero .btn-row{ margin-top:clamp(28px,3.4vw,42px); }
.hero-tag{
  display:flex; gap:clamp(.8rem,2vw,1.4rem); align-items:center; margin-top:clamp(34px,4vw,52px);
  font-family:var(--caps); font-size:.8rem; letter-spacing:.26em; color:var(--gilt); text-transform:uppercase;
}
.hero .hero-tag{ font-size:.8rem; max-width:none; flex-wrap:wrap; }
.hero-tag i{ width:4px; height:4px; background:var(--brass); rotate:45deg; flex:none; }

/* smaller page heroes */
.phero{ padding-block:clamp(66px,8.5vw,126px); }
.phero h1{ margin-bottom:.3em; }
.phero .lede{ color:#DCE5F5; }
.crumb{ font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); margin-bottom:1.3em; }
.crumb a{ color:var(--ice); text-decoration:none; }
.crumb a:hover{ color:#fff; text-decoration:underline; }
.crumb span{ opacity:.55; margin-inline:.5em; }

/* --------------------------------------------------------------------------
   7. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4.5vw,72px); align-items:center; }
.split-40{ grid-template-columns:.86fr 1.14fr; }
.split-60{ grid-template-columns:1.14fr .86fr; }
@media (max-width:900px){ .split,.split-40,.split-60{ grid-template-columns:1fr; } }

.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--colgap); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--colgap); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--colgap); }
.grid-5{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--colgap); }
@media (max-width:1100px){ .grid-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:980px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){ .grid-3{ grid-template-columns:1fr; } .grid-5{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-4,.grid-5{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px); position:relative; overflow:hidden;
  transition:transform 380ms var(--ease), box-shadow 380ms var(--ease), border-color 380ms var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--brass-plate); background-size:200% 100%;
  transform:scaleX(0); transform-origin:left;
  transition:transform 460ms var(--brass-ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -26px rgba(12,23,48,.5); border-color:var(--gold-line); }
.card:hover::before{ transform:scaleX(1); }
.surf-b1 .card:hover,.surf-b2 .card:hover,.surf-deep .card:hover,.surf-img .card:hover{
  box-shadow:0 22px 44px -22px rgba(0,0,0,.6); border-color:rgba(255,255,255,.45);
}
.card h3{ margin-bottom:.5em; }
.card p{ font-size:1rem; line-height:1.6; }
.card .tlink{ margin-top:1.1em; }

/* five-up service grid needs a tighter card */
.grid-5 .card{ padding:clamp(20px,1.9vw,26px) clamp(18px,1.6vw,22px); text-align:center; }
.grid-5 .svc-card .ico{ margin-inline:auto; width:50px; height:50px; }
.grid-5 .card h3{ font-size:1.04rem; }
.grid-5 .card p{ font-size:.93rem; line-height:1.62; }
.grid-5 .card .tlink{ align-self:center; margin-top:auto; padding-top:1.1em; }
@media (max-width:1100px){ .grid-5 .card{ text-align:left; } .grid-5 .svc-card .ico{ margin-inline:0; } .grid-5 .card .tlink{ align-self:flex-start; } }

/* service card with icon plaque */
.svc-card{ text-align:left; display:flex; flex-direction:column; }
.ico{
  width:56px; height:56px; border-radius:var(--r); display:grid; place-items:center;
  background:var(--brass-plate); background-size:180% 100%; background-position:14% 0;
  margin-bottom:20px; flex:none;
  box-shadow:inset 0 1px 0 rgba(255,250,235,.6), 0 8px 20px -12px rgba(120,92,36,.8);
}
.ico svg{ width:28px; height:28px; stroke:#17120A; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

/* numbered list cards */
.numbered{ counter-reset:n; display:grid; gap:var(--colgap); grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .numbered{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .numbered{ grid-template-columns:1fr; } }
.numbered > li{ counter-increment:n; list-style:none; padding-left:0; position:relative; }
.num{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--display); font-size:1.08rem; font-weight:700; color:#17120A;
  background:var(--brass-bright); background-size:180% 100%; background-position:16% 0;
  margin-bottom:16px; border:1px solid rgba(110,85,32,.5);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.55), 0 6px 16px -9px rgba(120,92,36,.85);
}
.numbered h3{ font-size:1.2rem; margin-bottom:.4em; }
.numbered p{ font-size:1rem; line-height:1.6; margin:0; }

/* --------------------------------------------------------------------------
   9. CHECK LISTS
   -------------------------------------------------------------------------- */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.checks li{ position:relative; padding-left:34px; }
.checks li::before{
  content:""; position:absolute; left:0; top:.55em; width:16px; height:16px; border-radius:50%;
  background:var(--brass-bright); background-size:200% 100%; background-position:20% 0;
  box-shadow:inset 0 1px 0 rgba(255,250,235,.6);
}
.checks li::after{
  content:""; position:absolute; left:5px; top:calc(.55em + 5px); width:6px; height:3px;
  border-left:1.7px solid #17120A; border-bottom:1.7px solid #17120A; transform:rotate(-45deg);
}
.checks.two{ grid-template-columns:repeat(2,1fr); gap:14px var(--colgap); }
@media (max-width:760px){ .checks.two{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   10. STATEMENT / PULL BANDS
   -------------------------------------------------------------------------- */
.statement{ text-align:center; }
.statement p{
  font-family:var(--display); font-style:italic; font-size:clamp(1.85rem,1.2rem + 2.2vw,3rem);
  line-height:1.2; font-weight:500; letter-spacing:0; color:var(--heading);
  max-width:22ch; margin-inline:auto;
}
.cta-strip{ text-align:center; }
.cta-strip h2{ max-width:22ch; margin-inline:auto; }
.cta-strip .lede{ margin-inline:auto; }

.letter{ max-width:680px; margin-inline:auto; }
.letter > p:not(.eyebrow){ font-size:1.06rem; line-height:1.8; }
.letter-sign{ margin-top:2em; line-height:1.6; color:var(--fg-2); font-size:.95rem !important; }
.letter-name{ display:block; font-family:var(--display); font-style:italic; font-size:1.6rem; color:var(--heading); letter-spacing:.02em; margin-bottom:.2em; }

/* --------------------------------------------------------------------------
   11. FIGURES AND PLACEHOLDERS
   -------------------------------------------------------------------------- */
.fig{ position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 30px 60px -38px rgba(12,23,48,.66); }
.fig img{ width:100%; display:block; }
.fig-tall{ aspect-ratio:4/5; }
.fig-tall img{ height:100%; object-fit:cover; }
.figcap{ font-size:.86rem; color:var(--fg-2); margin-top:12px; line-height:1.55; }

.ph-note{
  font-size:.82rem; line-height:1.5; color:var(--fg-2);
  border-left:2px solid var(--accent); padding:4px 0 4px 12px; margin-top:12px;
}
.ph-note b{ font-weight:600; color:var(--heading); }

/* --------------------------------------------------------------------------
   12. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.qa{ border-top:1px solid var(--line); max-width:920px; margin-inline:auto; }
.qa details{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-family:var(--display); font-size:clamp(1.3rem,1.12rem + .5vw,1.55rem);
  color:var(--heading); font-weight:600; line-height:1.3;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:""; position:absolute; right:6px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--gold-mark); border-bottom:2px solid var(--gold-mark);
  transform:translateY(-70%) rotate(45deg); transition:transform 340ms var(--ease);
}
.qa details[open] summary::after{ transform:translateY(-25%) rotate(225deg); }
.qa summary:hover{ color:var(--accent); }
.qa-body{ padding:0 44px 26px 0; }
.qa-body p{ margin:0 0 .9em; font-size:.99rem; }
.qa-body p:last-child{ margin:0; }

/* --------------------------------------------------------------------------
   13. FEE SCHEDULE
   -------------------------------------------------------------------------- */
.feeblock{ border-top:1px solid var(--line); padding-top:clamp(28px,3.2vw,44px); margin-top:clamp(28px,3.2vw,44px); }
.feeblock:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
.feeblock h3{ font-size:clamp(1.2rem,1.04rem + .6vw,1.55rem); margin-bottom:.35em; }
.feerate{
  font-family:var(--display); font-size:clamp(1.3rem,1.1rem + .9vw,1.85rem);
  color:var(--gold); font-weight:500; letter-spacing:.02em; margin:0 0 .75em; display:block;
}
.feelist{ list-style:none; margin:1em 0 0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px var(--colgap); }
@media (max-width:760px){ .feelist{ grid-template-columns:1fr; } }
.feelist li{ position:relative; padding-left:20px; font-size:.97rem; }
.feelist li::before{ content:""; position:absolute; left:0; top:.72em; width:7px; height:7px; rotate:45deg; background:var(--gold-mark); }
.feenote{ font-size:.88rem; color:var(--fg-2); font-style:italic; margin-top:1.6em; }

.rate-card{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px); text-align:center;
}
.rate-card .k{ font-family:var(--caps); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2); display:block; margin-bottom:.6em; }
.rate-card .v{ font-family:var(--caps); font-size:clamp(1.15rem,1rem + .6vw,1.45rem); color:var(--gold); font-weight:500; }

/* --------------------------------------------------------------------------
   14. CONTACT
   -------------------------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,4vw,64px); }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.cdl{ display:grid; gap:20px; margin:1.6em 0 0; }
.cdl > div{ border-left:2px solid var(--gold-line); padding-left:16px; }
.cdl dt{ font-family:var(--text); font-weight:600; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.35em; }
.cdl dd{ margin:0; font-size:1.02rem; }
.cdl a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.cdl a:hover{ border-color:currentColor; }

.form{ display:grid; gap:16px; }
.field label{ display:block; font-family:var(--text); font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2); margin-bottom:8px; }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--text); font-size:1rem; color:var(--fg);
  background:#fff; border:1px solid var(--panel-line); border-radius:var(--r);
  padding:13px 14px; transition:border-color .24s, box-shadow .24s;
}
.surf-b1 .field input,.surf-b1 .field textarea,.surf-b1 .field select,
.surf-b2 .field input,.surf-b2 .field textarea,.surf-b2 .field select,
.surf-deep .field input,.surf-deep .field textarea,.surf-deep .field select,
.surf-img .field input,.surf-img .field textarea,.surf-img .field select{
  background:rgba(255,255,255,.96); color:#0C1730; border-color:rgba(255,255,255,.4);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--blue-3); box-shadow:0 0 0 3px rgba(49,99,188,.2);
}
.field textarea{ min-height:132px; resize:vertical; }
.field select{
  appearance:none; padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,#21407F 50%),linear-gradient(135deg,#21407F 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}
.form-note{ font-size:.84rem; color:var(--fg-2); }
.form-ok{ display:none; padding:14px 16px; border-radius:var(--r); background:rgba(49,99,188,.12); border:1px solid var(--blue-3); font-size:.95rem; }
.form-ok.show{ display:block; }

/* --------------------------------------------------------------------------
   15. BADGES / NEWSLETTER / RESOURCES
   -------------------------------------------------------------------------- */
.badges{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--colgap); max-width:1080px; margin-inline:auto; }
@media (max-width:900px){ .badges{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .badges{ grid-template-columns:1fr; } }
.badge{
  border:1px solid var(--panel-line); border-radius:var(--r-lg); background:var(--panel);
  min-height:126px; display:grid; place-items:center; text-align:center; padding:20px;
}
.badge span{ font-size:.85rem; line-height:1.5; color:var(--fg-2); }
.badge b{ display:block; font-family:var(--caps); font-size:1.18rem; color:var(--gold); letter-spacing:.1em; margin-bottom:.4em; }
.badge img{ width:auto; height:auto; max-width:100%; max-height:112px; object-fit:contain; display:block; }
.badge-cap{ gap:10px; align-content:center; }
.badge-cap img{ max-height:90px; margin-inline:auto; }
.badge-cap span{ font-family:var(--text); font-weight:600; font-size:.78rem; letter-spacing:.12em; color:var(--fg-2); }
.badge-note{ text-align:center; font-size:.82rem; color:var(--fg-2); margin-top:20px; font-style:italic; }

.news-form{ display:flex; gap:12px; max-width:520px; margin-inline:auto; flex-wrap:wrap; }
.news-form input{ flex:1 1 240px; }
.news-form .btn{ flex:none; }

.res-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.res-list a{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 20px; background:var(--panel); border:1px solid var(--panel-line);
  border-radius:var(--r); text-decoration:none; color:var(--fg);
  transition:border-color .26s, transform .26s var(--ease), background .26s;
}
.res-list a:hover{ border-color:var(--gold-mark); transform:translateX(4px); }
.res-list b{ font-family:var(--display); font-weight:700; font-size:1.3rem; letter-spacing:0; }
.res-list svg{ width:20px; height:20px; flex:none; color:var(--gold-mark); }
.res-list em{ font-style:normal; font-size:.85rem; color:var(--fg-2); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.footer{ background:var(--g-deep); color:#D6DFEF; padding-block:clamp(52px,6vw,84px) 0; position:relative; }
.footer a{ color:#D6DFEF; text-decoration:none; }
.footer a:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(26px,3.5vw,54px); }
@media (max-width:980px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.f-mark{ width:210px; height:auto; margin-bottom:20px; }
.footer h4{ color:var(--ice); font-size:.78rem; letter-spacing:.2em; margin-bottom:1.1em; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:.95rem; }
.footer p{ font-size:.95rem; color:#BFCBE2; }
.f-social{ display:flex; gap:8px; margin-top:18px; }
.f-social a{ width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; transition:background .22s,border-color .22s; }
.f-social a:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45); }
.f-social svg{ width:15px; height:15px; }
.footer-bottom{
  margin-top:clamp(40px,4.5vw,64px); border-top:1px solid rgba(255,255,255,.13);
  padding-block:26px 34px; font-size:.86rem; color:#9FADC8;
}
.footer-bottom p{ font-size:.86rem; color:#9FADC8; margin-bottom:.8em; }
.footer-bottom p:last-child{ margin-bottom:0; }

/* --------------------------------------------------------------------------
   17. MOTION
   -------------------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity 760ms var(--ease), transform 760ms var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:90ms; } .reveal.d2{ transition-delay:180ms; }
.reveal.d3{ transition-delay:270ms; } .reveal.d4{ transition-delay:360ms; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .btn:hover,.card:hover,.res-list a:hover{ transform:none !important; }
}
.no-js .reveal{ opacity:1; transform:none; }

/* Reading progress: a brass hairline across the very top of the window, scaled
   to how far down the page you are. It rides above the sticky header and fades
   in only once the page has moved, so a page opened and left alone stays still.
   Built in app.js; no markup carries it. */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  transform:scaleX(var(--sp,0)); transform-origin:left;
  background:var(--brass-plate); background-size:100vw 100%;
  opacity:0; transition:opacity .45s;
  pointer-events:none;
}
.scrolled .progress{ opacity:1; }

@media print{
  .topbar,.site-header,.mobile-nav,.btn,.news-form,.progress{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .surf-b1,.surf-b2,.surf-deep,.surf-img{ background:#fff !important; color:#000 !important; }
  .surf-img::before,.surf-img::after{ display:none !important; }
}

/* --------------------------------------------------------------------------
   FEE SCHEDULE (matches the v2 fee page: single column, hairline-divided blocks)
   -------------------------------------------------------------------------- */
.fs .fs-head{ max-width:76ch; margin-bottom:clamp(32px,5vw,64px); }
.fs .fs-head::before{ content:""; display:block; width:38px; height:1px; margin-bottom:24px; background:var(--gold-mark); }
.fs .fs-lede{ font-size:clamp(19px,1.05rem + .5vw,22.5px); line-height:1.6; color:var(--heading); margin:0 0 16px; }
.fs .fs-head p{ max-width:62ch; }
.fs .ph{ background:rgba(138,107,42,.15); box-shadow:inset 0 -1px 0 rgba(138,107,42,.6); color:#5A4718; padding:0 .18em; border-radius:1px; white-space:nowrap; }
.fs-block{ padding-block:32px; border-top:1px solid var(--line); max-width:76ch; }
.fs-block h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.1rem,.9rem + .5vw,1.28rem); line-height:1.26; letter-spacing:-.008em; color:var(--heading); margin:0 0 8px; }
.fs-rate{ font-family:var(--display); font-weight:600; letter-spacing:0; font-size:clamp(30px,1.3rem + 1.4vw,40px); color:var(--ink); margin:0 0 16px; }
.fs-block p{ margin:0 0 1em; }
.fs-list{ margin:8px 0 0; padding:0; list-style:none; display:grid; gap:.6rem; }
.fs-list li{ position:relative; padding-left:1.1rem; font-size:18px; color:var(--fg); }
.fs-list li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px; background:var(--gold-mark); rotate:45deg; }
.fs-note{ margin:16px 0 0; font-size:16.5px; font-style:italic; color:var(--fg-2); }
.fs-cta{ margin-top:32px; }
.fs-ast{ font-size:.8em; font-weight:600; margin-left:.12em; vertical-align:super; line-height:0; color:var(--gold); }
.fs-foot{ margin:10px 0 0; font-size:.8rem; line-height:1.5; color:var(--fg-2); }

/* ==========================================================================
   18. DESIGN REFINEMENTS (v4)
   Layout and polish only. No copy changed. Each block names what it fixes.
   ========================================================================== */

/* Founder portraits: a brass hairline frame offset behind the photograph gives
   the portrait the weight of a principal's photo rather than a stock card. */
.split-40 > .reveal:first-child{ position:relative; isolation:isolate; }
.split-40 > .reveal:first-child::before{
  content:""; position:absolute; inset:28px -22px -22px 28px; z-index:-1;
  border:1px solid var(--gold-line); border-radius:var(--r-lg);
}
@media (max-width:900px){ .split-40 > .reveal:first-child::before{ inset:16px -12px -12px 16px; } }
.split-40 .fig-tall{ box-shadow:var(--shadow-md); }

/* Icon plaques: navy tile, brass line icon. Quieter than a solid gold block and
   it reads as the same family as the header. */
.ico{
  width:54px; height:54px; border-radius:var(--r);
  background:linear-gradient(150deg,#1D3768 0%,#0C1730 100%);
  box-shadow:inset 0 0 0 1px rgba(198,162,84,.5), 0 8px 18px -12px rgba(12,23,48,.8);
}
.ico svg{ stroke:#E3C77F; width:26px; height:26px; stroke-width:1.5; }

/* Home services: five cards in a 3 + 2 arrangement instead of five squeezed
   columns, so titles stay on one or two lines and the copy is readable. */
.grid-5{ grid-template-columns:repeat(6,1fr); }
.grid-5 > *{ grid-column:span 2; }
.grid-5 > :nth-child(4){ grid-column:2 / span 2; }
.grid-5 .card{ text-align:left; padding:clamp(26px,2.6vw,36px); }
.grid-5 .svc-card .ico{ margin-inline:0; width:54px; height:54px; margin-bottom:22px; }
.grid-5 .card h3{ font-size:clamp(1.2rem,1.05rem + .4vw,1.38rem); }
.grid-5 .card p{ font-size:1.02rem; line-height:1.6; }
.grid-5 .card .tlink{ align-self:flex-start; }
@media (max-width:980px){
  .grid-5{ grid-template-columns:repeat(2,1fr); }
  .grid-5 > *,.grid-5 > :nth-child(4){ grid-column:auto; }
}
@media (max-width:620px){ .grid-5{ grid-template-columns:1fr; } }

.card{ box-shadow:var(--shadow-sm); }
.surf-b1 .card,.surf-b2 .card,.surf-deep .card,.surf-img .card{ box-shadow:none; }

/* "Why appoint": a permanent brass top edge so the four cards read as a set
   even before hover. */
.why-card{ padding-top:clamp(30px,3vw,40px); }
.why-card::before{ transform:scaleX(1); height:2px; background:var(--brass-plate); }
.why-card:hover::before{ height:3px; }

/* "Putting the needs of others first": the photograph was a thin letterbox
   floating beside a tall list. It now fills the column height. */
.split-stretch{ align-items:stretch; }
.fig-fill{ height:100%; min-height:440px; box-shadow:var(--shadow-md); }
.fig-fill img{ height:100%; object-fit:cover; object-position:48% 40%; }
@media (max-width:900px){ .fig-fill{ min-height:0; aspect-ratio:4/3; height:auto; } }

/* Scope band: heading and button on the left, the eight duties in a ruled
   panel on the right, so the band no longer has an empty right half. */
.scope-grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-rows:auto 1fr; gap:28px clamp(40px,6vw,96px); align-items:start;
}
.scope-grid > .sect-head{ grid-column:1; grid-row:1; margin-bottom:0; }
.scope-grid > .btn-row{ grid-column:1; grid-row:2; margin-top:4px; }
.scope-grid > .scope-list{ grid-column:2; grid-row:1 / span 2; }
.scope-list.checks.two{
  grid-template-columns:1fr; gap:0;
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); padding:6px clamp(20px,2.4vw,32px);
}
.scope-list li{ padding:15px 0 15px 36px; border-bottom:1px solid rgba(255,255,255,.1); }
.scope-list li:last-child{ border-bottom:0; }
.scope-list li::before{ top:calc(15px + .42em); }
.scope-list li::after{ top:calc(15px + .42em + 5px); }
@media (max-width:900px){
  .scope-grid{ grid-template-columns:1fr; }
  .scope-grid > *{ grid-column:1 !important; grid-row:auto !important; }
  .scope-grid > .sect-head{ order:1; } .scope-grid > .scope-list{ order:2; } .scope-grid > .btn-row{ order:3; }
}

/* Statement band: the quote now sits left, clear of the man's face, with a
   brass rule above it rather than centred across the photograph. */
.statement-side{ text-align:left; }
.statement-side .side-col::before{ content:""; display:block; width:48px; height:2px; background:var(--brass-plate); margin-bottom:28px; }
.statement-side p{ margin-inline:0; max-width:19ch; }
.statement .statement-side .btn-row,.statement-side .btn-row{ justify-content:flex-start; }
.statement.statement-side .btn-row{ justify-content:flex-start; }

/* Numbered "what to expect": each promise in its own panel. */
.numbered > li{
  background:var(--panel); border:1px solid var(--panel-line); border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);
}
.surf-pale .numbered > li,.surf-paper .numbered > li{ box-shadow:var(--shadow-sm); }
.num{ width:44px; height:44px; margin-bottom:20px; }

/* FAQ: each question is its own panel; the open one lifts. A circled chevron
   makes the control obvious to older readers. */
.qa{ border-top:0; display:grid; gap:12px; }
.qa details{
  border:1px solid var(--panel-line); border-radius:var(--r-lg); background:var(--panel);
  transition:box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}
.surf-pale .qa details{ background:#F6F8FC; }
.qa details[open]{ background:#fff; border-color:var(--gold-line); box-shadow:var(--shadow-md); }
.qa summary{ padding:22px 72px 22px clamp(20px,2.4vw,30px); }
.qa summary::before{
  content:""; position:absolute; right:clamp(16px,2vw,24px); top:50%; width:34px; height:34px; margin-top:-17px;
  border-radius:50%; border:1px solid var(--gold-line); transition:background 300ms, border-color 300ms;
}
.qa summary::after{ right:calc(clamp(16px,2vw,24px) + 12px); width:9px; height:9px; border-width:0 1.8px 1.8px 0; }
.qa details[open] summary::before{ background:var(--ink); border-color:var(--ink); }
.qa details[open] summary::after{ border-color:var(--gilt); }
.qa summary:hover::before{ border-color:var(--gold-mark); }
.qa-body{ padding:0 72px 26px clamp(20px,2.4vw,30px); }
.qa-body p{ font-size:1.02rem; line-height:1.68; }
@media (max-width:620px){ .qa summary{ padding-right:62px; } .qa-body{ padding-right:20px; } }

/* Resources list: a touch more air, brass arrow in a ring. */
.res-list{ gap:14px; }
.res-list a{ padding:22px 26px; border-radius:var(--r-lg); }
.res-list a:hover{ background:rgba(255,255,255,.12); }
.res-list em{ font-size:.95rem; }
.res-list svg{ width:38px; height:38px; padding:9px; border-radius:50%; border:1px solid var(--gold-line); }

/* Memberships: one quiet ruled row instead of four boxed tiles. */
.badges{ gap:0; }
.badge{ border:0; background:transparent; border-left:1px solid var(--line-soft); border-radius:0; min-height:120px; }
.badge:first-child{ border-left:0; }
@media (max-width:900px){
  .badge{ border-left:0; border-top:1px solid var(--line-soft); }
  .badge:nth-child(-n+2){ border-top:0; }
  .badge:nth-child(even){ border-left:1px solid var(--line-soft); }
}
@media (max-width:520px){ .badges{ grid-template-columns:repeat(2,1fr); } .badge{ min-height:110px; padding:16px 10px; } .badge img{ max-height:80px; } .badge-cap img{ max-height:64px; } }

/* Services page: tighter bands and the detail copy held in a brass-edged
   panel, so five near-identical sections read as a structured list. */
.svc-band{ padding-block:clamp(56px,6.5vw,104px); }
.svc-band + .svc-band{ border-top:1px solid var(--line-soft); }
.svc-band .split{ align-items:center; }
.svc-band h2{ font-size:clamp(1.7rem,1.15rem + 1.6vw,2.45rem); }
.svc-detail{
  background:var(--panel); border:1px solid var(--panel-line); border-left:3px solid var(--gold-mark);
  border-radius:var(--r-lg); padding:clamp(26px,3vw,40px); box-shadow:var(--shadow-sm);
}
.svc-detail .btn-row{ margin-top:26px; }

/* Fee schedule: the intro holds the left column (sticky on desktop) and the
   four fee blocks become cards on the right, instead of one narrow column
   with an empty right half. */
.fs-grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(36px,6vw,96px); align-items:start; }
.fs .fs-head{ position:sticky; top:124px; margin-bottom:0; }
.fs .fs-lede{ font-family:var(--display); font-size:clamp(1.75rem,1.2rem + 1.4vw,2.4rem); line-height:1.2; letter-spacing:0; font-weight:600; }
.fs-block{
  max-width:none; border-top:0; background:#fff; border:1px solid var(--panel-line);
  border-radius:var(--r-lg); padding:clamp(26px,3vw,40px); margin-bottom:18px; box-shadow:var(--shadow-sm);
}
.fs-block h3{ font-size:clamp(1.2rem,1rem + .5vw,1.4rem); margin-bottom:10px; }
.fs-rate{ padding-bottom:16px; border-bottom:1px solid var(--line-soft); margin-bottom:18px; }
.fs-ast{ color:var(--gold); }
.fs-list li{ font-size:1.02rem; color:var(--fg-2); }
.fs-block:nth-of-type(1) .fs-list{ grid-template-columns:1fr 1fr; column-gap:28px; }
.fs-note{ margin-top:26px; }
.fs-block > :last-child{ margin-bottom:0; }
@media (max-width:900px){
  .fs-grid{ grid-template-columns:1fr; }
  .fs .fs-head{ position:static; }
  .fs-block:nth-of-type(1) .fs-list{ grid-template-columns:1fr; }
}

/* Contact: the form sits on a white card, which reads as "fill me in" on both
   the pale contact page and the navy band on About. */
.form-card{
  --fg:#0C1730; --fg-2:#3A4352; --heading:var(--ink); --gold:#7E6126; --gold-mark:#A9842F;
  --gold-line:rgba(138,107,42,.34); --panel-line:rgba(12,23,48,.12);
  background:#fff; color:#0C1730; border:1px solid rgba(12,23,48,.1); border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,44px); box-shadow:0 30px 60px -36px rgba(8,18,38,.55);
}
.form-card h3{ font-size:1.5rem; margin-bottom:1em; color:var(--ink); text-shadow:none; }
.form-card .field input,.form-card .field textarea,.form-card .field select{
  background-color:#F6F8FC; color:#0C1730; border-color:rgba(12,23,48,.16);
}
.form-card .field input:focus,.form-card .field textarea:focus,.form-card .field select:focus{ background-color:#fff; }
.form-card .btn{ width:100%; }
.form-card p{ color:var(--fg-2); text-shadow:none; }
.cdl dd{ font-size:1.06rem; }

/* Contact details band and CTA strip headings: one size up for clarity. */
.band-sm.surf-b1 h3{ font-size:1.35rem; }
.cta-strip h2{ font-size:clamp(1.9rem,1.25rem + 2vw,2.9rem); }

/* Footer: wordmark and type tuned to the new scale. */
.footer ul{ font-size:1rem; gap:12px; }
.footer-bottom p{ font-size:.88rem; }

/* Phones: full-width buttons are easier to hit and stop ragged button rows. */
@media (max-width:520px){
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn-row .btn{ width:100%; }
  .hero h1 em::after{ display:none; }
  .fs-cta .btn{ width:100%; }
}

/* Footer tagline in the same handwriting script as the hero line. */
.footer .f-tagline{ font-family:var(--script); font-size:1.5rem; line-height:1.3; color:var(--gilt); }

/* Home hero, bright photograph. The family and the flying fedora carry the
   picture, so the wash is light: a single navy fade under the copy at lower
   left, gone before it reaches the family. The hat sits in the top ~37% of the
   frame, so the copy is pinned to the bottom of a banner tall enough that the
   copy always starts below the hat. */
.hero-bright{
  --scrim:linear-gradient(72deg,
    rgba(8,18,38,.86) 0%, rgba(8,18,38,.78) 26%, rgba(8,18,38,.58) 42%,
    rgba(8,18,38,.24) 55%, rgba(8,18,38,.06) 63%, rgba(8,18,38,0) 70%);
  min-height:clamp(860px,94vh,1000px); display:flex; align-items:flex-end;
  padding-block:120px clamp(44px,4.5vw,64px);
}
.hero-bright > .shell{ width:100%; }
.hero-bright .hero-inner{ max-width:760px; }
.hero-bright h1{ font-size:clamp(2.3rem,1.3rem + 2vw,3rem); line-height:1.08; margin-bottom:.25em; }
.hero-bright h1 em{ color:#fff; margin-bottom:1.1rem; }
.hero-bright .hero-sub{ white-space:nowrap; margin:.1em 0 .5em; }
.hero-bright p:not(.hero-sub):not(.hero-tag){ max-width:560px; }
.hero-bright .btn-row{ margin-top:clamp(20px,2.4vw,30px); }
.hero-bright .hero-tag{ margin-top:clamp(20px,2.2vw,30px); color:#fff; }
.hero-bright h1,.hero-bright p{
  text-shadow:0 1px 2px rgba(5,11,26,.7), 0 0 18px rgba(5,11,26,.55), 0 0 40px rgba(5,11,26,.35);
}
.hero-bright .btn{ text-shadow:none; }
.hero-bright .btn-ghost{ background:rgba(8,18,38,.5); }
@media (max-width:1200px){ .hero-bright{ min-height:940px; } }
/* Phones and small tablets: the photograph shows above the copy (hat in view),
   and the wash only deepens where the copy begins. */
@media (max-width:900px){
  .hero-bright{
    --scrim:linear-gradient(180deg,
      rgba(8,18,38,0) 0%, rgba(8,18,38,0) 30%, rgba(8,18,38,.6) 39%, rgba(8,18,38,.82) 50%, rgba(8,18,38,.86) 100%);
    min-height:0; padding-block:410px 44px;
  }
  .hero-bright .hero-sub{ white-space:normal; }
}
.hero-bright .hero-sub{ color:#F7E8BF; text-shadow:0 1px 1px rgba(5,11,26,.85), 0 0 12px rgba(5,11,26,.7), 0 0 30px rgba(5,11,26,.45); }

/* Extra shade in the lower-left corner, under the script line and the
   description. Written out as its own layer so the photo keeps its focal point. */
.hero-bright::before{
  background-image:var(--scrim),
    radial-gradient(70% 75% at 0% 100%, rgba(8,18,38,.62) 0%, rgba(8,18,38,.38) 45%, rgba(8,18,38,0) 100%),
    var(--img);
  background-size:cover, cover, cover;
  background-position:center, center, var(--img-pos,center);
  background-repeat:no-repeat;
}
@media (max-width:900px){
  .hero-bright::before{
    background-image:var(--scrim),
      radial-gradient(90% 55% at 0% 100%, rgba(8,18,38,.45) 0%, rgba(8,18,38,0) 100%),
      var(--img-sm,var(--img));
    background-position:center, center, var(--img-pos-sm,var(--img-pos,center));
  }
}

/* Phone-only contact bar, fixed to the bottom of the screen. */
.mobile-bar{ display:none; }
@media (max-width:640px){
  .mobile-bar{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:110;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(12,23,48,.97); border-top:1px solid rgba(198,162,84,.45);
    box-shadow:0 -10px 28px -12px rgba(5,11,26,.6);
  }
  .mobile-bar a{
    display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px;
    border-radius:var(--r); text-decoration:none;
    font-family:var(--text); font-weight:600; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase;
  }
  .mobile-bar svg{ width:18px; height:18px; flex:none; }
  .mb-call{ background:linear-gradient(180deg,#E3C77F 0%,#D2B062 55%,#C49F50 100%); color:var(--brass-ink); }
  .mb-mail{ border:1px solid rgba(240,221,168,.55); color:var(--gilt); }
  .mb-mail:active,.mb-call:active{ transform:translateY(1px); }
  body{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); }
}
@media print{ .mobile-bar{ display:none !important; } }

/* Contact page title: gold, bold, centered, with its tagline centered beneath */
.phero h1.title-gold{ color:var(--gilt); font-weight:700; text-align:center; }
.phero h1.title-gold + .lede{ text-align:center; margin-inline:auto; }
.phero:has(h1.title-gold) .crumb{ text-align:center; }

/* Form-not-connected notice, directly under "Send a message" */
.form-note-top{ margin:.2em 0 1.2em; padding:12px 14px; border-left:3px solid var(--gold-mark,#A9842F); background:rgba(169,132,47,.08); border-radius:0 var(--r) var(--r) 0; color:var(--fg); font-size:.9rem; line-height:1.5; }

/* About hero subtitle: drop the divider and stack the license on phones */
@media (max-width:600px){ .phero .sep{ display:none; } .phero .lede-2{ display:block; } }

/* About hero: tall enough to show the whole photo, dog included
   (the image is 2.4 : 1, so 41.7vw is its natural height) */
.phero-tall{ min-height:37vw; display:flex; align-items:center; }
.phero-tall > .shell{ width:100%; }
/* Tablet and phone: the words sit on navy at the top and the photograph fills the
   lower part of the banner, so nothing covers Shannon or the dog. */
@media (max-width:900px){
  .phero-tall{ min-height:640px; align-items:flex-start; }
  .phero-tall::before{
    background-color:var(--ink);
    background-image:linear-gradient(180deg, rgba(8,18,38,1) 0%, rgba(8,18,38,1) var(--top,34%), rgba(8,18,38,.6) calc(var(--top,34%) + 6%), rgba(8,18,38,.2) calc(var(--top,34%) + 14%), rgba(8,18,38,0) calc(var(--top,34%) + 24%)), var(--img-sm,var(--img));
    background-size:cover, auto 66%;
    background-position:center, 80% 100%;
  }
}
@media (max-width:600px){
  .phero-tall{ min-height:600px; }
  .phero-tall::before{ --top:38%; background-size:cover, auto 62%; background-position:center, 82% 100%; }
}

/* Contact form: hidden spam trap and the failure message */
.hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form{ position:relative; }
.form-err{ display:none; padding:14px 16px; border-radius:var(--r); background:rgba(180,40,40,.08); border:1px solid rgba(160,40,40,.45); font-size:.95rem; }
.form-err.show{ display:block; }
.form button[disabled]{ opacity:.7; cursor:progress; }