/* Udine Wealth Management
   Tokens first; everything below is driven from them. */

@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-wght-italic.woff2") format("woff2-variations"), url("../fonts/instrument-sans-latin-wght-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  /* colour */
  --ink: #001233;          /* primary navy text */
  --head: #000d25;         /* header and footer */
  --card: #214f87;         /* quote cards */
  --card-deep: #1a4174;
  --accent: #167cae;        /* brand blue: text, icons, rules, buttons; white text on it is 4.6:1 */
  --accent-bright: #1a90ca; /* the original lighter blue, only for accents on dark surfaces (quote marks) */
  --accent-ink: #136f9f;   /* small accent text (AA on white) */
  --deep: #124768;         /* card titles */
  --paper: #ffffff;
  --tint: #f6f9f9;
  --mist: #ecf0f1;
  --line: #dbe3ea;
  --muted: #4b5869;
  --faint: rgba(255, 255, 255, .14);
  --danger: #b3261e;
  --ok: #1d7a4a;

  /* type */
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-body: clamp(16px, .25vw + 15px, 18px);
  --fs-small: clamp(14px, .15vw + 13.4px, 15.5px);
  --fs-eyebrow: clamp(26px, 1.2vw + 20px, 36px);
  --fs-display: clamp(40px, 3.4vw + 22px, 72px);
  --fs-display-xl: clamp(48px, 3vw + 24px, 72px);
  --fs-h3: clamp(24px, 1.3vw + 18px, 38px);
  --fs-quote: clamp(22px, 1vw + 17px, 30px);

  /* space */
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1280px;
  --section: clamp(72px, 9vw, 144px);
  --stack: clamp(16px, 1.4vw, 24px);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(0, 18, 51, .06), 0 12px 32px -12px rgba(0, 18, 51, .22);
  --shadow-lg: 0 2px 4px rgba(0, 18, 51, .08), 0 30px 60px -20px rgba(0, 18, 51, .38);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .7s;
  --head-h: 76px;
  --head-h-compact: 62px;   /* header height once the page has scrolled */
  --anchor-gap: clamp(24px, 3vw, 40px);
  --team-pad: clamp(56px, 8vw, 120px);
  --hero-overlap: clamp(56px, 6.5vw, 120px);   /* how far the hero quote card hangs into About */
}

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
/* Anchor jumps: clear the compact (scrolled) header plus a small gap. Each section then cancels its own
   top padding with a negative scroll-margin, so nav links land on the content, not on empty padding. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h-compact) + var(--anchor-gap)); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--fs-body)/1.62 var(--sans); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-ink); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--deep); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--paper); color: var(--ink); border-radius: 8px; box-shadow: var(--shadow); transition: top .2s; }
.skip:focus { top: 12px; }
.icon { width: 1em; height: 1em; flex: none; vertical-align: -.125em; }
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.anchor-alias { position: absolute; }   /* legacy Squarespace anchors; they sit where the content starts */

/* ───────── type ───────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: .45em; margin: 0 0 .4em;
  font: 400 var(--fs-eyebrow)/1.1 var(--serif); color: var(--accent);
}
.eyebrow::after { content: ""; width: 1.05em; height: 1.5px; background: currentColor; transform-origin: left; }
.js .eyebrow[data-reveal]::after { transform: scaleX(0); transition: transform .9s var(--ease) .25s; }
.js .eyebrow[data-reveal].is-in::after { transform: none; }
.eyebrow--sub { margin-top: clamp(40px, 5vw, 64px); }
.display { font: 400 var(--fs-display)/1.02 var(--serif); letter-spacing: -.01em; color: var(--ink); margin-bottom: .32em; }
.display--xl { font-size: var(--fs-display-xl); line-height: .98; }
.display--stack { font-size: clamp(36px, 2.4vw + 20px, 54px); line-height: 1.06; }
.display--stack span { display: block; }
.accent { color: var(--accent); }
.subhead { font: 400 var(--fs-h3)/1.15 var(--serif); color: var(--ink); margin-bottom: .8em; }
.prose p { color: var(--ink); }
.section { position: relative; padding-block: var(--section); scroll-margin-top: calc(-1 * var(--section)); }
.section--tint { background: var(--tint); }

/* ───────── buttons ───────── */
.btn {
  --b: var(--accent-ink);
  display: inline-flex; align-items: center; gap: .9em; padding: .82em 1.35em;
  border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: var(--b);
  font: 700 var(--fs-small)/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.btn .icon { width: 1.15em; height: 1.15em; transition: transform .3s var(--ease); }
.btn:hover { background: var(--b); color: #fff; border-color: var(--b); box-shadow: 0 10px 24px -12px rgba(19, 111, 159, .7); }
.btn:hover .icon { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: .6em 1.05em; font-size: 13.5px; gap: .7em; }
.btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--solid:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--fill { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn--fill:hover { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 10px 24px -12px rgba(0, 18, 51, .7); }
.btn--light { --b: #fff; color: #fff; }
.btn--light:hover { color: var(--ink); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ───────── header ───────── */
/* Fixed, with its full height reserved on body: when it compacts on scroll the page does not shift,
   so anchor jumps land where they aim and the first scroll has no jolt. */
body:has(> .head) { padding-top: calc(var(--head-h) + 1px); }
.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--head); color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  transition: box-shadow .3s, background-color .3s;
}
.head.is-scrolled { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); background: rgba(0, 13, 37, .94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.head__bar {
  display: flex; align-items: center; gap: 24px; height: var(--head-h);
  max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
  transition: height .3s var(--ease);
}
.head.is-scrolled .head__bar { height: 62px; }
.head__brand { flex: none; display: block; }
.head__brand img { width: clamp(190px, 18vw, 268px); transition: width .3s var(--ease); }
.head.is-scrolled .head__brand img { width: clamp(176px, 15vw, 228px); }
.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(8px, 1.6vw, 28px); }
.nav__list { display: flex; gap: clamp(4px, 1.2vw, 20px); }
.nav__list a, .nav__login {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 6px;
  color: #e9eef3; font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
}
.nav__list a::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 4px; height: 1.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav__list a:hover, .nav__list a[aria-current="true"] { color: #fff; }
.nav__list a:hover::after, .nav__list a[aria-current="true"]::after { transform: none; }
.nav__login { padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; transition: background-color .25s, border-color .25s; }
.nav__login:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); color: #fff; }
/* Primary CTA: the only nav item that opens an overlay. White on the accent is 4.6:1. */
.nav__cta {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent); color: #fff; font: 700 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .25s, border-color .25s, color .25s, box-shadow .25s;
}
.nav__cta .icon { width: 17px; height: 17px; }
.nav__cta:hover { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 0 8px 22px -10px rgba(26, 144, 202, .9); }
.nav__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.head__toggle {
  display: none; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(255, 255, 255, .25); border-radius: 12px; color: #fff; cursor: pointer;
}
.head__toggle .icon { width: 22px; height: 22px; }

@media (max-width: 920px) {
  :root { --head-h: 66px; }
  .head__toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 20px; background: var(--head); border-bottom: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .3s var(--ease); }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { display: flex; padding: 16px 2px; font-size: 17px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .nav__list a::after { display: none; }
  .nav__cta { justify-content: center; margin-top: 18px; padding: 15px; font-size: 16px; }
  .nav__login { justify-content: center; margin-top: 10px; padding: 14px; }
  .js .nav:not(.is-open) { pointer-events: none; }
}
html:not(.js) .nav { position: static; visibility: visible; opacity: 1; transform: none; }

/* ───────── hero ───────── */
/* the quote card hangs below the hero into About, so the hero must not clip and must paint above the next section */
.hero { position: relative; z-index: 2; isolation: isolate; background: var(--head); color: #fff; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 13, 37, .35), rgba(0, 13, 37, 0) 45%), linear-gradient(0deg, rgba(0, 13, 37, .45), rgba(0, 13, 37, 0) 35%); }
.js .hero__bg { animation: hero-drift 14s var(--ease) both; }
@keyframes hero-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero__inner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: end;
  min-height: clamp(540px, 72vh, 760px); padding-top: clamp(28px, 4vw, 60px);
}
.hero__portrait { align-self: end; justify-self: center; width: min(100%, 470px); max-height: calc(min(72vh, 760px) - 28px); object-fit: contain; object-position: bottom; }
/* the portrait is a cutout anchored to the hero's bottom edge, so it does not animate (rising made it appear to emerge from About) */
.qcard.qcard--hero {
  /* sits in the lower half of the hero and hangs into About, as on the Squarespace site */
  align-self: end; justify-self: start; width: min(100%, clamp(420px, 35vw, 640px)); max-width: none;
  min-height: clamp(360px, 29vw, 560px); margin: 0;
  padding: clamp(32px, 3.4vw, 64px) clamp(28px, 3.6vw, 68px) clamp(40px, 4.5vw, 84px);
  translate: 0 var(--hero-overlap);
}
.qcard--hero .qcard__quote p { font-size: clamp(25px, 1.25vw + 13px, 40px); line-height: 1.18; }
.qcard--hero .qcard__name { font-size: clamp(18px, .5vw + 13px, 24px); }
.qcard--hero .qcard__name .icon { width: 1.1em; height: 1.1em; }
.qcard--hero .qcard__role { font-size: clamp(14.5px, .35vw + 11px, 18px); }
.qcard--hero .qcard__mark { width: clamp(34px, 2.4vw, 46px); height: auto; aspect-ratio: 32 / 24; }
/* The card is opaque from the first frame and settles from slightly larger, so it always covers the
   cutout's lower edge (a fade would let that edge show through while the card is semi-transparent). */
.js .qcard--hero { animation: card-settle 1.1s var(--ease) .2s both; transform-origin: 50% 100%; }
@keyframes card-settle {
  from { transform: scale(1.07); box-shadow: 0 50px 90px -24px rgba(0, 6, 20, .55); }
  to { transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 20px; }
  /* Phones: cap the portrait to the visible screen (svh excludes the browser's toolbars) and tuck the card a
     little further over it, so more of the quote fits on first view. vh is the fallback for older browsers. */
  .hero__portrait { width: auto; max-width: 78%; height: clamp(290px, 54vh, 470px); height: clamp(290px, 54svh, 470px); max-height: none; margin-bottom: -2px; }
  :root { --hero-overlap: 48px; }
  .qcard.qcard--hero { justify-self: stretch; width: auto; min-height: 0; margin-top: -96px; }
}

/* ───────── quote card ───────── */
.qcard {
  position: relative; margin: 0; max-width: 440px; padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px) clamp(28px, 3vw, 40px);
  background: linear-gradient(160deg, var(--card) 0%, var(--card-deep) 100%); color: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.qcard__mark { width: 34px; height: 26px; color: var(--accent-bright); margin-bottom: 14px; }
.qcard__quote { margin: 0; }
.qcard__quote p { margin: 0; font: italic 400 var(--fs-quote)/1.22 var(--serif); letter-spacing: .005em; }
.qcard__by { display: grid; gap: 2px; margin-top: clamp(22px, 2.4vw, 34px); }
.qcard__by--photo { grid-template-columns: auto 1fr; align-items: center; gap: clamp(16px, 1.6vw, 22px); }
.qcard__photo { width: clamp(96px, 10vw, 120px); height: clamp(96px, 10vw, 120px); border-radius: 14px; object-fit: cover; object-position: 50% 28%; border: 2px solid rgba(255, 255, 255, .25); }
.qcard__name { display: inline-flex; align-items: center; gap: 9px; color: #fff; font: 600 18px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .45); }
.qcard__name:hover { color: #cfe7f5; }
.qcard__name .icon { width: 20px; height: 20px; opacity: .85; }
.qcard__role { display: block; color: #a9bfda; font: 500 14.5px/1.4 var(--sans); }

/* ───────── about + metrics ───────── */
/* top padding: room for the hero card's overhang plus a reduced gap; anchor jumps cancel the same amount */
.about { --about-pad: calc(var(--hero-overlap) + var(--section) * .5); padding-top: var(--about-pad); scroll-margin-top: calc(-1 * var(--about-pad)); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.about__copy > p:not(.eyebrow):not(.subhead) { max-width: 62ch; }
.metrics__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.metric {
  display: grid; justify-items: center; text-align: center; gap: 6px; padding: clamp(22px, 2.4vw, 34px) 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.metric:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.metric__icon { width: 44px; height: 44px; color: var(--accent); margin-bottom: 4px; }
.metric__value { margin: 0; display: flex; align-items: baseline; gap: .12em; font: 400 clamp(44px, 3vw + 20px, 64px)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.metric__pre, .metric__suf { font-size: .62em; }
.metric__suf { margin-left: .08em; white-space: nowrap; }
.metric__label { margin: 0; color: var(--accent-ink); font: 500 var(--fs-small)/1.3 var(--sans); }
.metrics__asof { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: 14px; }

/* ───────── split layout (quote card aside) ───────── */
.split { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.split__aside { position: sticky; top: calc(var(--head-h-compact) + var(--anchor-gap)); }
.split__cta { margin: 28px 0 0; display: flex; justify-content: center; }
.split__main .prose { max-width: 70ch; }
@media (max-width: 960px) {
  .about__grid, .split { grid-template-columns: minmax(0, 1fr); }
  .split__aside { position: static; }
  .split__aside .qcard { max-width: none; }
  .clients .split__aside { order: 2; }
}

/* ───────── services ───────── */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(32px, 4vw, 56px); }
.svc {
  display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.svc__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--mist); }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.svc:hover .svc__media img { transform: scale(1.05); }
.svc__body { padding: clamp(20px, 2.2vw, 30px); }
.svc__title { font: 400 clamp(26px, 1.1vw + 20px, 34px)/1.08 var(--serif); color: var(--deep); margin-bottom: .35em; }
.svc__lede { color: var(--accent-ink); font-size: var(--fs-small); line-height: 1.45; }
.svc__body p:last-child { margin: 0; font-size: var(--fs-small); color: var(--ink); }
@media (max-width: 640px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }

/* ───────── team ───────── */
.team { position: relative; isolation: isolate; padding-block: var(--team-pad); scroll-margin-top: calc(-1 * var(--team-pad)); background: var(--head); }
.team__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.team__media img { width: 100%; height: 100%; object-fit: cover; object-position: 65% 40%; }
/* darken only behind the panel so the people in the photo on the right stay clear */
.team__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 13, 37, .5) 0%, rgba(0, 13, 37, .18) 55%, rgba(0, 13, 37, 0) 80%); }
.team__panel {
  max-width: 800px; padding: clamp(28px, 4.5vw, 64px); border-radius: calc(var(--radius) + 6px);
  background: rgba(236, 240, 241, .94); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow-lg);
}
.team__intro { max-width: 70ch; }
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(22px, 2.4vw, 32px); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(28px, 3.4vw, 44px); }
/* team listing: text only on the panel (headshots live in the bios), each person marked by a rule */
.person { display: flex; flex-direction: column; padding-top: 16px; border-top: 1.5px solid rgba(0, 18, 51, .16); transition: border-color .35s; }
.person:hover { border-top-color: var(--accent); }
.person__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; }
.person__name { font: 600 17px/1.3 var(--sans); color: var(--ink); }
.person__title { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.person__mail { margin: 2px 0 12px; font-size: 14px; overflow-wrap: anywhere; }
.person__body .btn { margin-top: auto; }
.partners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: 18px; }
.partner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.partner__logo { width: 100%; height: clamp(64px, 6vw, 84px); display: block; padding: 12px 16px; background: var(--paper); border-radius: var(--radius-sm); box-shadow: 0 1px 2px rgba(0, 18, 51, .06); }
.partner__logo img { width: 100%; height: 100%; object-fit: contain; }
.partner__role { margin: 0; font-size: 14.5px; color: var(--ink); }
@media (max-width: 560px) {
  .people { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .partners { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ───────── statement ───────── */
.statement { position: relative; overflow: clip; padding-block: clamp(72px, 10vw, 150px); background: radial-gradient(120% 140% at 85% 0%, #123566 0%, var(--head) 60%); color: #fff; text-align: center; }
.statement__inner { display: grid; justify-items: center; gap: clamp(24px, 3vw, 40px); max-width: 1040px; }
.statement__mark { width: 52px; height: 40px; color: var(--accent-bright); }
.statement__quote { margin: 0; font: italic 400 clamp(30px, 2.6vw + 16px, 56px)/1.15 var(--serif); text-wrap: balance; }

/* ───────── market notes ───────── */
.notes__grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.notes__copy { position: sticky; top: calc(var(--head-h-compact) + var(--anchor-gap)); }
.checks { display: grid; gap: 14px; margin-top: 28px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-weight: 600; color: var(--deep); line-height: 1.4; }
.checks .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
@media (max-width: 960px) { .notes__grid { grid-template-columns: minmax(0, 1fr); } .notes__copy { position: static; } }

/* ───────── form ───────── */
/* Market Notes form: a sheet of letterhead. Square corners, a fine rule, a soft offset shadow. */
.formcard {
  --rule: #6e7a8c;   /* field underline: about 4.3:1 on the paper, above the 3:1 needed for form controls */
  padding: clamp(28px, 5vw, 80px) clamp(22px, 5.5vw, 88px) clamp(32px, 5vw, 72px);
  background: #f8fafa; border: 1px solid #6b7183; border-radius: 0;
  box-shadow: 16px 18px 26px -10px rgba(0, 18, 51, .3);
}
.formcard--flat { box-shadow: none; background: var(--tint); }
/* Contact overlay: the Market Notes name above the shared form, as on the main page but scaled to the panel */
.formcard__title { font-size: clamp(38px, 2.2vw + 22px, 60px); line-height: 1; margin: 0 48px clamp(18px, 2vw, 28px) 0; }
.formcard__logo { width: clamp(170px, 14vw, 220px); margin: 0 0 clamp(32px, 4vw, 56px) auto; }
.form__intro { font: 400 clamp(24px, 1vw + 19px, 34px)/1.18 var(--serif); color: var(--ink); margin-bottom: clamp(28px, 3vw, 44px); }
.form { display: grid; gap: clamp(26px, 2.6vw, 38px); }
.field { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 6px; }
.field__label { padding: 0; font: 400 clamp(16px, .3vw + 14.5px, 18px)/1.35 var(--sans); color: var(--ink); }
.field__sub { font-size: 14.5px; color: var(--ink); }
.field__hint { font-size: 13px; line-height: 1.45; color: var(--muted); }
.req { margin-left: .45em; font-weight: 400; font-size: .86em; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .select select {
  width: 100%; min-height: 44px; padding: 10px 2px 8px; border: 0; border-bottom: 1.5px solid var(--rule, #6e7a8c);
  border-radius: 0; background: transparent; font-size: 16px; appearance: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input:hover, .select select:hover { border-bottom-color: var(--ink); }
/* focus: the line thickens to 3px in blue and the field gets a faint wash, so focus never relies on colour alone */
.field input:focus, .select select:focus { outline: none; border-bottom-color: var(--accent-ink); box-shadow: 0 1.5px 0 0 var(--accent-ink); background: rgba(26, 144, 202, .06); }
.field input:focus-visible, .select select:focus-visible { outline: none; }
.field input[aria-invalid="true"] { border-bottom-color: var(--danger); box-shadow: 0 1.5px 0 0 var(--danger); background: rgba(179, 38, 30, .04); }
.select { position: relative; display: block; }
.select select { padding-right: 32px; cursor: pointer; color: var(--ink); }
.select .icon { position: absolute; right: 4px; top: 50%; width: 18px; height: 18px; translate: 0 -50%; pointer-events: none; color: var(--ink); }
.field--follow { padding: 4px 0 4px 16px; border-left: 2px solid var(--accent); }
.formcard .btn { border-radius: 2px; }
.field--follow:not([hidden]) { animation: rise .45s var(--ease) both; }
.checks-inline { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 6px; }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent-ink); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__actions { display: flex; justify-content: flex-end; }
.form__error { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); background: #fcefee; color: var(--danger); font-size: 14.5px; }
.form__note { font-size: 14px; color: var(--muted); }
.form__done { display: grid; justify-items: start; gap: 6px; padding: 12px 0; outline: none; }
.form__done:not([hidden]) { animation: rise .6s var(--ease) both; }
.form__done-icon { width: 46px; height: 46px; padding: 10px; border-radius: 50%; background: rgba(26, 144, 202, .12); color: var(--accent-ink); margin-bottom: 8px; }
.form__done h3 { font: 400 clamp(32px, 2vw + 20px, 44px)/1.05 var(--serif); }
.form__done p { margin: 0; font-weight: 500; max-width: 46ch; }
@media (max-width: 480px) { .select select { font-size: 14.5px; padding-right: 24px; } .select .icon { right: 0; }
  .field__row { grid-template-columns: minmax(0, 1fr); } .form__actions .btn { width: 100%; justify-content: center; } }

/* ───────── footer ───────── */
.foot { background: var(--head); color: #fff; }
.foot__top { display: grid; justify-items: center; gap: 26px; padding-block: clamp(48px, 6vw, 80px); text-align: center; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; }
.foot__links a { padding: 4px 16px; color: #e9eef3; font-size: 15.5px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .35); }
.foot__links a + a { border-left: 1px solid rgba(255, 255, 255, .25); }
.foot__links a:hover { color: #fff; text-decoration-color: currentColor; }
.foot__addr { font-style: normal; font-size: 15px; line-height: 1.6; color: #c8d3df; }
.foot__addr strong { color: #fff; }

/* ───────── ATG branding footer (shared house block) ─────────
   Portable: set the three --atg-foot-* tokens per site; nothing else changes. */
.atg-foot {
  --atg-foot-fg: var(--paper, #fff);
  --atg-foot-muted: rgba(255, 255, 255, .69);
  --atg-foot-line: var(--faint, rgba(255, 255, 255, .14));
  text-align: center; color: var(--atg-foot-fg);
  border-top: 1px solid var(--atg-foot-line);
  padding: clamp(36px, 6vh, 56px) 16px calc(clamp(28px, 5vh, 44px) + var(--dock-space, 0px));
  transition: padding .5s ease;
}
.atg-foot__copy { margin: 0; font-size: clamp(15px, 1vw + 8px, 18px); font-weight: 500; }
.atg-foot__credit {
  margin: 2.25vh 0 0; font-family: system-ui, sans-serif; font-size: 90%; font-weight: 400;
  text-transform: lowercase; color: #eee;
}
.atg-foot__brand { display: inline-block; margin-left: .14rem; text-transform: lowercase; }
.atg-foot__brand a { color: var(--atg-foot-fg); text-decoration: none; }
.atg-foot__brand a:hover { text-decoration: underline; text-underline-offset: 3px; }
.atg-foot__brand::after {
  /* external-link mark as a masked SVG so it takes the text colour; swap to FA ("\f14c") on sites that load the kit */
  content: ""; display: inline-block; width: .74em; height: .74em; margin-left: .3rem; vertical-align: -.04em;
  background-color: currentColor; opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-8.5 8.5'/%3E%3Cpath d='M19 14.5V19a1.5 1.5 0 0 1-1.5 1.5h-12A1.5 1.5 0 0 1 4 19V7a1.5 1.5 0 0 1 1.5-1.5H10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-8.5 8.5'/%3E%3Cpath d='M19 14.5V19a1.5 1.5 0 0 1-1.5 1.5h-12A1.5 1.5 0 0 1 4 19V7a1.5 1.5 0 0 1 1.5-1.5H10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.atg-foot__brand b { font-weight: 700; }
.atg-foot__tag-link { display: inline-block; margin-top: 1.5vh; border-radius: 50%; }
.atg-foot__tag {
  display: inline-block; vertical-align: middle; border-radius: 50%;
  filter: grayscale(100%); transform: scale(1);
  transition: filter 1s ease-in-out, transform 1s ease-in-out;
}
.atg-foot__tag-link:hover .atg-foot__tag,
.atg-foot__tag-link:focus-visible .atg-foot__tag { filter: grayscale(0%); transform: scale(1.25); }
.atg-foot__tag-link:focus-visible { outline: 2px solid var(--atg-foot-fg); outline-offset: 6px; }

/* ───────── overlays (native dialog) ───────── */
.sheet {
  width: min(100% - 24px, 920px); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0;
  border: 0; border-radius: calc(var(--radius) + 6px); background: var(--paper); color: var(--ink);
  box-shadow: 0 40px 100px -20px rgba(0, 6, 20, .6); overflow: hidden;
  opacity: 0; transform: translateY(24px) scale(.98);
  transition: opacity .35s var(--ease), transform .45s var(--ease), overlay .45s allow-discrete, display .45s allow-discrete;
}
.sheet[open] { opacity: 1; transform: none; }
.sheet:focus, .sheet:focus-visible { outline: none; }   /* the dialog box is not a control; its buttons and fields keep their focus rings */
@starting-style { .sheet[open] { opacity: 0; transform: translateY(24px) scale(.98); } }
.sheet::backdrop { background: rgba(0, 9, 27, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background-color .35s, backdrop-filter .35s, overlay .45s allow-discrete, display .45s allow-discrete; }
.sheet[open]::backdrop { background: rgba(0, 9, 27, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@starting-style { .sheet[open]::backdrop { background: rgba(0, 9, 27, 0); backdrop-filter: blur(0); } }
.sheet--wide { width: min(100% - 24px, 1180px); }
.sheet__panel { position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.sheet__close {
  position: sticky; top: 14px; float: right; z-index: 3; margin: 14px 14px -58px 0; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--mist); color: var(--ink); cursor: pointer;
  transition: background-color .2s, transform .3s var(--ease);
}
.sheet__close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.sheet__close .icon { width: 20px; height: 20px; }
.sheet__close--onimg { background: rgba(255, 255, 255, .9); }
.sheet__hero { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; }
html.has-sheet { overflow: hidden; }

.doc { padding: clamp(32px, 5vw, 64px) clamp(22px, 5vw, 72px) clamp(36px, 5vw, 64px); }
.doc h3 { font: 400 clamp(22px, .8vw + 18px, 28px)/1.2 var(--serif); margin: 1.4em 0 .6em; color: var(--ink); }
.doc ul { margin: 0 0 1em; padding-left: 1.2em; list-style: disc; }
.doc li { margin-bottom: .5em; }
.doc li::marker { color: var(--accent); }
.doc__lead { font-size: 1.08em; color: var(--deep); font-weight: 500; }
.doc__pull { margin: .2em 0 1.2em; padding: 0 0 0 22px; border-left: 3px solid var(--accent); }
.doc__pull p { font: italic 400 clamp(22px, 1vw + 17px, 30px)/1.25 var(--serif); color: var(--deep); }
.doc__logo { width: 220px; margin-bottom: 24px; }
.doc__logo--wide { width: 280px; }
.terms { margin: 0; display: grid; gap: 4px; }
.terms dt { margin-top: 14px; font: 700 13.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--deep); }
.terms dd { margin: 0; }

/* The blue sits on the whole grid so the left column stays blue to the bottom while its contents stick. */
.bio { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; background: var(--card); }
.bio__side { position: sticky; top: 0; padding: clamp(24px, 3vw, 40px); color: #fff; }
.bio__main { background: var(--paper); align-self: stretch; }
.bio__photo { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--card-deep); box-shadow: 0 18px 36px -16px rgba(0, 6, 20, .6); border: 1px solid rgba(255, 255, 255, .14); }
.bio__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.bio__contact { display: grid; gap: 10px; 
margin-top: 3vh;
border-top: 7px solid var(--accent-bright);
padding-top: 3vh;
 }
.bio__contact a, .cperson a:not(.cperson__name) { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 15px; text-decoration: none; overflow-wrap: anywhere; }
.bio__contact a:hover, .cperson a:hover { color: var(--accent-ink); }
.bio__contact .icon, .cperson .icon { width: 18px; height: 18px; color: var(--accent); }
.bio__contact a { color: #fff; }
.bio__contact a:hover { color: #cfe7f5; text-decoration: underline; text-underline-offset: 3px; }
.bio__contact .icon { color: #8fcaee; }   /* lighter than --accent so the icons hold contrast on the card blue */
.bio__main { padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 56px) clamp(32px, 4vw, 56px); }
.bio__name { font: 400 clamp(38px, 2.4vw + 22px, 60px)/1 var(--serif); padding-right: 48px; }
.bio__title { margin: 10px 0 24px; color: var(--accent-ink); font-weight: 600; }
/* short screens: pinning would hide the bottom of the side column */
@media (max-height: 620px) { .bio__side { position: static; } }
@media (max-width: 760px) {
  .bio { grid-template-columns: minmax(0, 1fr); }
  .bio__side { position: static; display: grid; grid-template-columns: 112px; gap: 16px; padding: 24px 24px 22px; }
  .bio__contact { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .bio__contact a { overflow-wrap: normal; white-space: nowrap; }
}

.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.contact__intro { padding: clamp(32px, 4vw, 56px); }
/* The Palm Beach Gardens map: baked into navy in the image itself, so it reads as texture, not a picture. */
.contact__intro {
  position: relative; isolation: isolate; color: #fff;
  background: #0f2547 url("../images/contact-map.webp") 70% 50% / cover no-repeat;
}
.contact__intro::before {   /* a gentle wash at the top keeps the headline crisp over the busiest roads */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 24, 52, .55) 0%, rgba(8, 24, 52, 0) 45%);
}
.contact__intro .display, .contact__intro .subhead { color: #fff; }
.contact__intro p { color: #d9e3ef; }
.contact__intro .cperson { border-color: rgba(255, 255, 255, .2); background: rgba(8, 24, 52, .35); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.contact__intro .cperson__name { color: #fff; }
.contact__intro .cperson a:not(.cperson__name) { color: #e3ebf4; }
.contact__intro .cperson a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.contact__intro .cperson .icon { color: #8fcaee; }
.contact .formcard { border: 0; border-radius: 0; padding: clamp(32px, 4vw, 56px); }
.contact__people { display: grid; gap: 14px; margin-top: 28px; }
.cperson { display: grid; grid-template-columns: clamp(84px, 8vw, 104px) minmax(0, 1fr); gap: clamp(16px, 1.6vw, 22px); align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.cperson__photo { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; object-fit: cover; object-position: 50% 28%; }
.cperson div { display: grid; gap: 3px; min-width: 0; }
.cperson__photo--empty { display: grid; place-items: center; background: linear-gradient(160deg, #dfe7ee, #cbd7e2); color: var(--card); font: 400 32px/1 var(--serif); }
.cperson__name { font-weight: 700; color: var(--ink); text-decoration: none; }
@media (max-width: 480px) {
  /* photo and name side by side, contact links full width below so addresses never break */
  .cperson { grid-template-columns: 84px minmax(0, 1fr); row-gap: 10px; }
  .cperson div { display: contents; }
  .cperson__name { align-self: center; font-size: 17px; }
  .cperson a:not(.cperson__name) { grid-column: 1 / -1; white-space: nowrap; overflow-wrap: normal; }
}
@media (max-width: 880px) { .contact { grid-template-columns: minmax(0, 1fr); } }

/* ───────── reveal on scroll ───────── */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .head, .hero__media, .sheet, .atg-foot__tag-link { display: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}