/* GVN Estate Invest - site stylesheet (2026 redesign).

   The look: deep navy grounds, warm cream reading surfaces, gold from the
   logo used as the single accent. Bodoni Moda for display, Hanken Grotesk
   for reading. Gold text only where the contrast passes:
     --gold / --gold-hi on navy, --gold-deep on cream and ivory.

   Shape rule: buttons and chips are pills; cards, tiles and images use
   --r (14px); inputs use --r-sm (8px). */

@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni-moda.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy-950: #0a111d;
  --navy-900: #0e1726;
  --navy-850: #132036;
  --navy-800: #1a2a44;
  --navy-700: #26395a;
  --cream: #f3eee5;
  --cream-2: #e9e1d2;
  --ivory: #fbf9f5;
  --ink: #121a28;
  --text: #2a313d;
  --muted: #535b69;
  --line: #d9cfbd;
  --on-dark: #ece7de;
  --on-dark-muted: #a9b2c1;
  --gold: #c6a15b;
  --gold-hi: #e6cf98;
  --gold-deep: #7a5719;
  --gold-line: rgba(198, 161, 91, .3);
  --gold-wash: rgba(198, 161, 91, .12);
  --ok: #1d6b3a;
  --err: #a12a1f;
  --r: 14px;
  --r-sm: 8px;
  --wrap: 1200px;
  --header-h: 76px;
  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-light: 0 1px 2px rgba(18, 26, 40, .06), 0 8px 16px -10px rgba(18, 26, 40, .22);
  --shadow-dark: 0 2px 4px rgba(0, 0, 0, .25), 0 24px 48px -16px rgba(0, 0, 0, .55);
  /* z-index scale */
  --z-header: 50;
  --z-skip: 100;
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  /* Inherited by every Bodoni use (headings, fact numbers, nav, card numbers);
     Hanken has no opsz axis, so it ignores this. See h1-h4 below. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 24;
  background: var(--cream);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--gold); color: var(--navy-950); }
img { max-width: 100%; height: auto; display: block; }
svg.ic { width: 1.25em; height: 1.25em; flex-shrink: 0; display: inline-block; vertical-align: -.2em; }
a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s var(--ease); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  /* Bodoni Moda's display cut (opsz 96, which "auto" picks at heading
     sizes) has hairline strokes and loose spacing that read as broken
     kerning on screen. A fixed text-weight cut keeps the high contrast
     but sets tight and sturdy. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 24;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 .5em;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: 1.05; }
h2 { font-size: clamp(1.95rem, 3.4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 1.9vw, 1.55rem); line-height: 1.2; }
h1 em, h2 em, h3 em, .hl { font-style: normal; color: var(--gold-deep); }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.25em; }
hr { border: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: var(--z-skip); background: var(--gold-hi); color: var(--navy-950); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; }
.skip:focus { top: 12px; }

/* Scrollbar, caret, form accents: themed so browser defaults don't leak. */
html { scrollbar-color: var(--navy-700) var(--cream-2); }
input, textarea { caret-color: var(--gold-deep); }

/* ------------------------------------------------------------ layout */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.narrow { max-width: 820px; }
.section { padding: clamp(64px, 9vw, 128px) 0; position: relative; }
.section--tight { padding: clamp(44px, 6vw, 72px) 0; }
.section--alt { background: var(--cream-2); }
.section--white, .section--ivory { background: var(--ivory); }
.section--dark { background: var(--navy-900); color: var(--on-dark-muted); }
.section--deep { background: var(--navy-950); color: var(--on-dark-muted); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--on-dark); }
.section--dark h2 em, .section--deep h2 em, .section--dark .hl, .section--deep .hl { color: var(--gold-hi); }
.section--dark a:not(.btn), .section--deep a:not(.btn) { color: var(--gold-hi); }
.section--dark a:not(.btn):hover, .section--deep a:not(.btn):hover { color: var(--on-dark); }
.section--dark strong, .section--deep strong { color: var(--on-dark); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; }
.section--dark .eyebrow, .section--deep .eyebrow, .hero .eyebrow { color: var(--gold); }
.lede { font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.6; color: var(--muted); max-width: 40em; }
.section--dark .lede, .section--deep .lede, .hero .lede { color: var(--on-dark-muted); }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }
.rule { width: 64px; height: 1px; background: var(--gold); border: 0; margin: 28px 0; }
.center .rule { margin-left: auto; margin-right: auto; }
.head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.head h2 { margin-bottom: .35em; }
.head p:last-child { margin-bottom: 0; }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 44px); }
.head-row h2 { margin: 0; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; }
.text-link .ic { transition: transform .35s var(--ease); }
.text-link:hover .ic { transform: translateX(4px); }

/* ------------------------------------------------------------ buttons
   Primary = brushed gold ("metallic" from Valentine's button board, CSS only).
   The arrow slides on hover (from the interactive-hover reference). */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 13px 26px; border-radius: 999px;
  font: 600 .98rem/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; text-align: center; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .3s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  touch-action: manipulation;
}
.btn .ic { transition: transform .35s var(--ease); }
.btn:hover .ic { transform: translateX(4px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn--gold, .btn--metal {
  color: var(--navy-950);
  background-color: #d6b46f;
  background-image: linear-gradient(180deg, #ecd9a6 0%, #d6b46f 46%, #b98f45 54%, #d9bb7c 100%);
  border-color: rgba(255, 240, 200, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(90, 60, 10, .35), 0 8px 18px -10px rgba(6, 10, 18, .55);
}
.btn--gold::after, .btn--metal::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 46%, transparent 62%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn--gold:hover, .btn--metal:hover { color: var(--navy-950); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(90, 60, 10, .35), 0 12px 20px -10px rgba(6, 10, 18, .6); }
.btn--gold:hover::after, .btn--metal:hover::after { transform: translateX(120%); }
.btn--dark { background: var(--navy-900); color: var(--on-dark); border-color: var(--navy-900); }
.btn--dark:hover { background: var(--navy-700); border-color: var(--navy-700); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: rgba(18, 26, 40, .35); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.section--dark .btn--ghost, .section--deep .btn--ghost, .hero .btn--ghost, .cta-band .btn--ghost, .site-footer .btn--ghost {
  color: var(--on-dark); border-color: rgba(230, 207, 152, .45); background: rgba(255, 255, 255, .02);
}
.section--dark .btn--ghost:hover, .section--deep .btn--ghost:hover, .hero .btn--ghost:hover, .cta-band .btn--ghost:hover, .site-footer .btn--ghost:hover {
  background: rgba(230, 207, 152, .12); border-color: var(--gold-hi); color: #fff;
}
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.center .btn-row { justify-content: center; }
.btn[disabled] { opacity: .6; cursor: progress; }
@media (max-width: 480px) { .btn { white-space: normal; } .btn-row .btn { width: 100%; } }

/* ------------------------------------------------------------ header
   Fixed. Transparent over the dark hero, solid navy once scrolled (site.js
   toggles .is-solid). Every page starts with a dark hero. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  color: var(--on-dark);
  background: linear-gradient(180deg, rgba(10, 17, 29, .7), rgba(10, 17, 29, 0));
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-solid, .site-header.is-open {
  background: rgba(10, 17, 29, .94);
  border-bottom-color: var(--gold-line);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-solid { background: rgba(10, 17, 29, .82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: 196px; height: auto; }
@media (max-width: 420px) { .brand img { width: 164px; } }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a:not(.btn) {
  position: relative; color: var(--on-dark); text-decoration: none; font-size: .94rem; font-weight: 500;
  padding: 10px 12px; border-radius: 6px; transition: color .2s var(--ease);
}
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav a:not(.btn):hover { color: var(--gold-hi); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--gold-hi); }
.nav .btn { margin-left: 14px; min-height: 44px; padding: 10px 20px; font-size: .9rem; }
.nav-toggle {
  display: none; align-items: center; gap: 8px; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(230, 207, 152, .4); color: var(--on-dark); border-radius: 999px;
  min-height: 44px; min-width: 44px; padding: 8px 16px; font: 600 .92rem var(--sans); cursor: pointer;
}
.nav-toggle .ic { width: 20px; height: 20px; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: inline-block; }
@media (max-width: 1060px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    background: var(--navy-950); flex-direction: column; align-items: stretch;
    padding: 12px clamp(16px, 4vw, 32px) 28px; border-bottom: 1px solid var(--gold-line);
  }
  .nav.is-open { display: flex; }
  .nav a:not(.btn) { font-family: var(--serif); font-size: 1.45rem; padding: 14px 2px; border-bottom: 1px solid rgba(255, 255, 255, .07); border-radius: 0; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin: 20px 0 0; }
  .site-header .wrap { position: relative; }
  .nav.is-open > * { animation: navIn .5s var(--ease) both; }
  .nav.is-open > *:nth-child(2) { animation-delay: .03s; }
  .nav.is-open > *:nth-child(3) { animation-delay: .06s; }
  .nav.is-open > *:nth-child(4) { animation-delay: .09s; }
  .nav.is-open > *:nth-child(5) { animation-delay: .12s; }
  .nav.is-open > *:nth-child(6) { animation-delay: .15s; }
  .nav.is-open > *:nth-child(7) { animation-delay: .18s; }
}
@keyframes navIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ hero */
.hero { background: var(--navy-950); color: var(--on-dark-muted); position: relative; overflow: hidden; isolation: isolate; }
.hero h1 { color: #f7f3ec; max-width: 15em; }
.hero--photo h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); max-width: 14.5em; }
.hero h1 em, .hero h1 .hl { color: var(--gold-hi); }
.hero a:not(.btn) { color: var(--gold-hi); }
.hero a:not(.btn):hover { color: #fff; }
.hero .slogan { font-family: var(--serif); font-size: clamp(1.25rem, 2.1vw, 1.6rem); color: var(--gold-hi); margin: 4px 0 18px; letter-spacing: .01em; }

/* Home: full-bleed photograph with a navy scrim. */
.hero--photo { min-height: min(100dvh, 920px); display: flex; flex-direction: column; justify-content: center; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 17, 29, .96) 0%, rgba(10, 17, 29, .86) 38%, rgba(10, 17, 29, .45) 72%, rgba(10, 17, 29, .3) 100%),
    linear-gradient(0deg, rgba(10, 17, 29, 1) 0%, rgba(10, 17, 29, 0) 34%);
}
.hero--photo .wrap { padding-top: calc(var(--header-h) + clamp(40px, 7vw, 88px)); padding-bottom: clamp(120px, 14vw, 170px); }
.hero-copy { max-width: 820px; }
.hero-copy .lede { max-width: 34em; }
@media (max-width: 760px) {
  .hero--photo::before { background: linear-gradient(180deg, rgba(10, 17, 29, .55) 0%, rgba(10, 17, 29, .72) 45%, rgba(10, 17, 29, .9) 80%, rgba(10, 17, 29, 1) 100%); }
  .hero-media img { object-position: 40% 50%; }
}

/* Inner pages: navy with a faint, blurred photographic texture. */
.hero--page::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/assets/img/hero-texture.webp") center 40% / cover no-repeat;
  opacity: .16; mix-blend-mode: luminosity;
}
.hero--page::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(800px 380px at 88% 0%, rgba(198, 161, 91, .18), transparent 65%), linear-gradient(0deg, var(--navy-950), rgba(10, 17, 29, .2) 60%);
}
.hero:not(.hero--photo):not(.hero--page) > .wrap { padding-top: calc(var(--header-h) + 56px); padding-bottom: 64px; }
.hero--page .wrap { padding-top: calc(var(--header-h) + clamp(44px, 6vw, 84px)); padding-bottom: clamp(48px, 6vw, 84px); }
.hero--page h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-grid > img { box-shadow: var(--shadow-dark); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-card {
  background-color: rgba(19, 32, 54, .6); background-image: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0));
  border: 1px solid var(--gold-line); border-radius: var(--r); padding: 28px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.hero-card h2 { font-size: 1.5rem; color: var(--on-dark); }
.hero-card ul { margin: 0; padding: 0; list-style: none; }
.hero-card li { padding: 12px 0 12px 30px; border-bottom: 1px solid rgba(255, 255, 255, .08); position: relative; color: var(--on-dark); }
.hero-card li:last-child { border-bottom: 0; padding-bottom: 0; }
.hero-card li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 14px; height: 1px; background: var(--gold); }

/* Hero entrance: the one authored load moment. */
@media (prefers-reduced-motion: no-preference) {
  .hero .wrap > *, .hero-copy > * { animation: rise .9s var(--ease) both; }
  .hero-copy > *:nth-child(2) { animation-delay: .08s; }
  .hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .hero-copy > *:nth-child(4) { animation-delay: .24s; }
  .hero-copy > *:nth-child(5) { animation-delay: .32s; }
  .hero-media img { animation: settle 2.4s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }

/* ------------------------------------------------------------ fact strip
   Floats over the bottom edge of the home hero. Facts only, no claims. */
.facts-wrap { position: relative; z-index: 2; margin-top: clamp(-96px, -8vw, -72px); }
.facts {
  list-style: none; margin: 0; padding: 8px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background-color: var(--navy-900); background-image: linear-gradient(180deg, var(--navy-850), var(--navy-900));
  border: 1px solid var(--gold-line); border-radius: 20px; box-shadow: var(--shadow-dark);
}
.facts li { display: flex; align-items: center; gap: 16px; padding: 22px 22px; position: relative; color: var(--on-dark-muted); }
.facts li + li::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: rgba(230, 207, 152, .18); }
.facts .ic-ring { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold-line); color: var(--gold); }
.facts .ic-ring .ic { width: 26px; height: 26px; }
.facts strong { display: block; font: 500 clamp(1.7rem, 2.4vw, 2.2rem)/1 var(--serif); color: var(--gold-hi); margin-bottom: 6px; }
.facts span { display: block; font-size: .92rem; line-height: 1.35; }
@media (max-width: 960px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .facts li:nth-child(3)::before { display: none; } }
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; }
  .facts li { padding: 16px 14px; }
  .facts li + li::before { left: 14px; right: 14px; top: 0; bottom: auto; width: auto; height: 1px; }
  .facts li:nth-child(3)::before { display: block; }
}

/* ------------------------------------------------------------ mosaic (three ways we can help) */
.mosaic { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.mosaic-tiles { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: repeat(2, minmax(220px, 1fr)); gap: 16px; }
.mosaic-tiles .tile:first-child { grid-row: span 2; }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px;
  border-radius: var(--r); overflow: hidden; isolation: isolate; text-decoration: none; color: var(--on-dark);
  padding: 24px; background: var(--navy-900); box-shadow: var(--shadow-light);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 17, 29, 0) 25%, rgba(10, 17, 29, .55) 55%, rgba(10, 17, 29, .92) 100%); }
.tile h3 { color: #fff; font-size: clamp(1.3rem, 2vw, 1.65rem); margin: 0 52px 6px 0; }
.tile p { margin: 0 52px 0 0; color: #d9dde4; font-size: .98rem; line-height: 1.45; }
.tile .go {
  position: absolute; right: 20px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(230, 207, 152, .6); color: var(--gold-hi);
  transition: transform .45s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.tile:hover img { transform: scale(1.05); }
.tile:hover .go { background: var(--gold-hi); color: var(--navy-950); transform: rotate(-45deg); }
.tile:hover { color: #fff; }
.tile--guide { background: radial-gradient(120% 90% at 85% 10%, var(--navy-700), var(--navy-950) 70%); }
.tile--guide img {
  inset: 20px 20px auto auto; width: min(36%, 170px); height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 8px; transform: rotate(4deg); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .7); z-index: 0;
}
.tile--guide::before { background: linear-gradient(180deg, transparent 40%, rgba(10, 17, 29, .6) 100%); }
.tile--guide h3, .tile--guide p, .tile--guide .go { position: relative; z-index: 1; }
.tile--guide h3, .tile--guide p { max-width: 60%; margin-right: 0; }
.tile--guide .go { position: absolute; }
.tile--guide:hover img { transform: rotate(1deg) scale(1.04); }
@media (max-width: 960px) { .mosaic { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .mosaic-tiles { grid-template-columns: 1fr; grid-template-rows: none; }
  .mosaic-tiles .tile:first-child { grid-row: auto; min-height: 300px; }
}

/* ------------------------------------------------------------ grids & cards */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card {
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--shadow-light); position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s var(--ease);
}
.card h3 { margin-bottom: .45em; }
.card p:last-child { margin-bottom: 0; }
.card--plain { box-shadow: none; }
.card .num { font-family: var(--serif); font-size: 2.2rem; color: var(--gold-deep); line-height: 1; margin-bottom: 12px; display: block; }
.card .card-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 22px; color: var(--gold-deep); border: 1px solid var(--line); background: var(--cream); }
.card .card-ic .ic { width: 26px; height: 26px; }
.card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--media img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.card--media .card-body { padding: 24px; }
.section--dark .card, .section--deep .card {
  background-color: var(--navy-850); background-image: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0));
  border-color: rgba(230, 207, 152, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); color: var(--on-dark-muted);
}
.section--dark .card .card-ic, .section--deep .card .card-ic { color: var(--gold); border-color: var(--gold-line); background: rgba(198, 161, 91, .06); }
.section--dark .card .num, .section--deep .card .num { color: var(--gold); }
@media (hover: hover) {
  .card--lift:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(18, 26, 40, .06), 0 14px 18px -12px rgba(18, 26, 40, .3); }
  .section--dark .card--lift:hover, .section--deep .card--lift:hover { border-color: rgba(230, 207, 152, .4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 40px -20px rgba(0, 0, 0, .7); }
}
.card-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; margin-top: 4px; }
.card-link .ic { transition: transform .35s var(--ease); }
.card-link:hover .ic { transform: translateX(4px); }

/* Promise list used beside the intro copy (the four pillars). */
.promises { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.promises li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; color: var(--ink); }
.promises .ic { color: var(--gold-deep); margin-top: 2px; width: 20px; height: 20px; }
@media (max-width: 520px) { .promises { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.split--rev > :first-child { order: 2; }
@media (max-width: 860px) { .split, .split--wide { grid-template-columns: 1fr; } .split--rev > :first-child { order: 0; } }
.portrait { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-light); background: var(--cream-2); position: relative; }
.portrait img { width: 100%; }
.framed { position: relative; }
.framed::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--gold); border-radius: var(--r); z-index: 0; opacity: .6; }
.framed > * { position: relative; z-index: 1; }
@media (max-width: 520px) { .framed::before { inset: 12px -10px -12px 10px; } }
.caption { font-size: .92rem; color: var(--muted); margin-top: 18px; line-height: 1.55; }

/* ------------------------------------------------------------ process timeline (home, horizontal) */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; counter-reset: proc; }
.process::before { content: ""; position: absolute; top: 31px; left: calc(16.66% + 8px); right: calc(16.66% + 8px); height: 1px; background: var(--gold); opacity: .45; }
.process li { text-align: center; position: relative; counter-increment: proc; padding: 0 8px; }
.process li::before {
  content: counter(proc, decimal-leading-zero); display: grid; place-items: center; margin: 0 auto 24px;
  width: 62px; height: 62px; border-radius: 50%; position: relative; z-index: 1;
  font: 500 1.2rem/1 var(--serif); color: var(--navy-950);
  background: linear-gradient(180deg, #ecd9a6, #c9a45e); box-shadow: 0 0 0 8px var(--cream), 0 10px 24px -10px rgba(122, 87, 25, .7);
}
.process h3 { margin-bottom: .35em; }
.process p { color: var(--muted); max-width: 22em; margin: 0 auto; }
@media (max-width: 760px) {
  .process { grid-template-columns: 1fr; gap: 28px; }
  .process::before { top: 31px; bottom: 31px; left: 31px; right: auto; width: 1px; height: auto; background: var(--gold); }
  .process li { text-align: left; display: grid; grid-template-columns: 62px 1fr; gap: 0 20px; padding: 0; }
  .process li::before { grid-row: span 2; margin: 0; }
  .process p { margin: 0; }
}

/* Values row (about): three equal ideals, deliberately un-numbered. */
.values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.values li { border-top: 1px solid var(--gold); padding-top: 26px; }
.values h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.values p { color: var(--muted); margin: 0; }
@media (max-width: 760px) { .values { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ steps (vertical blueprint timeline) */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; position: relative; }
.steps li { counter-increment: step; position: relative; padding: 0 0 34px 84px; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -4px;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  font: 500 1.05rem/1 var(--serif); color: var(--gold-deep); background: var(--ivory); border: 1px solid var(--gold);
  box-shadow: 0 0 0 6px var(--cream);
}
.steps li::after { content: ""; position: absolute; left: 27px; top: 54px; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--gold), rgba(198, 161, 91, .25)); }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: clamp(1.25rem, 2vw, 1.45rem); margin: 6px 0 8px; }
.steps p { margin: 0; color: var(--muted); }
.steps .tag { display: inline-block; font: 600 .72rem/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-wash); border: 1px solid var(--gold-line); padding: 2px 10px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.section--alt .steps li::before { box-shadow: 0 0 0 6px var(--cream-2); }
.section--white .steps li::before, .section--ivory .steps li::before { box-shadow: 0 0 0 6px var(--ivory); }
@media (max-width: 520px) {
  .steps li { padding-left: 64px; }
  .steps li::before { width: 44px; height: 44px; font-size: .95rem; }
  .steps li::after { left: 22px; top: 44px; }
}

/* ------------------------------------------------------------ areas (13 towns) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.chips li { border: 1px solid var(--line); background: var(--ivory); border-radius: 999px; padding: 8px 16px; font-size: .97rem; }
.chips li span { color: var(--muted); font-size: .82rem; margin-left: 6px; letter-spacing: .06em; }
.chips a { text-decoration: none; font-weight: 600; }
.areas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.areas .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.areas .chips li {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 16px 4px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--serif); font-size: 1.12rem; color: var(--ink);
}
.areas .chips li span { font-family: var(--sans); font-size: .78rem; font-weight: 700; color: var(--gold-deep); border: 1px solid var(--gold-line); border-radius: 999px; padding: 1px 9px; }
.areas-photo { margin-top: 28px; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-light); }
.areas-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .areas { grid-template-columns: 1fr; } .areas-photo { display: none; } }

.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li { padding: 10px 0 10px 36px; position: relative; border-bottom: 1px solid var(--line); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: ""; position: absolute; left: 6px; top: 17px; width: 13px; height: 7px; border-left: 1.5px solid var(--gold-deep); border-bottom: 1.5px solid var(--gold-deep); transform: rotate(-45deg); }

/* ------------------------------------------------------------ packages */
.packages { align-items: stretch; }
.package { display: flex; flex-direction: column; }
.package .count { display: flex; align-items: baseline; gap: 10px; font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 18px; }
.package .count b { font: 500 3rem/1 var(--serif); letter-spacing: -.02em; text-transform: none; color: var(--gold-deep); }
.section--dark .package .count, .section--dark .package .count b, .section--deep .package .count, .section--deep .package .count b { color: var(--gold); }
.package ul { margin: 14px 0 26px; padding: 0; list-style: none; color: var(--muted); }
.package ul li { padding: 8px 0 8px 26px; position: relative; border-top: 1px solid var(--line); font-size: .98rem; }
.package ul li::before { content: ""; position: absolute; left: 4px; top: 16px; width: 10px; height: 6px; border-left: 1.5px solid var(--gold-deep); border-bottom: 1.5px solid var(--gold-deep); transform: rotate(-45deg); }
.package .btn { margin-top: auto; align-self: flex-start; }
.package--featured { border-color: var(--gold) !important; }
.section--dark .package--featured, .section--deep .package--featured { background-color: var(--navy-850); background-image: linear-gradient(180deg, rgba(198, 161, 91, .1), rgba(255, 255, 255, 0)); }

/* ------------------------------------------------------------ comparison table */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--line); background: var(--ivory); }
table { width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--navy-900); color: var(--on-dark); font-weight: 600; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
.compare th:first-child { background: var(--navy-950); color: var(--gold-hi); }
.compare td:first-child { font-weight: 600; color: var(--ink); background: rgba(198, 161, 91, .08); }
.compare td:first-child::before { content: ""; display: inline-block; width: 10px; height: 6px; margin: 0 10px 3px 0; border-left: 1.5px solid var(--gold-deep); border-bottom: 1.5px solid var(--gold-deep); transform: rotate(-45deg); }
.compare td:last-child { color: var(--muted); }

/* ------------------------------------------------------------ FAQ */
.faq-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-layout > :first-child { position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } .faq-layout > :first-child { position: static; } }
.faq-group + .faq-group { margin-top: 36px; }
.faq-group h3 { font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 8px; }
details.faq { border-bottom: 1px solid var(--line); }
details.faq summary {
  cursor: pointer; padding: 22px 56px 22px 0; list-style: none; position: relative;
  font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.3rem); font-weight: 500; line-height: 1.35; color: var(--ink);
  transition: color .2s var(--ease);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%;
  border: 1px solid var(--gold-line);
  background:
    linear-gradient(var(--gold-deep), var(--gold-deep)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--gold-deep), var(--gold-deep)) center / 1.5px 12px no-repeat;
  transition: transform .4s var(--ease), background-color .3s var(--ease);
}
details.faq[open] summary::after { transform: rotate(45deg); background-color: var(--gold-wash); }
details.faq summary:hover { color: var(--gold-deep); }
details.faq .answer { padding: 0 56px 24px 0; color: var(--muted); }
details.faq .answer p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) { details.faq[open] .answer { animation: rise .5s var(--ease) both; } }

/* ------------------------------------------------------------ CTA band */
.cta-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy-900); color: var(--on-dark-muted); border-radius: 22px;
  padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 28px; align-items: center;
  border: 1px solid var(--gold-line); box-shadow: var(--shadow-dark);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(600px 300px at 100% 100%, rgba(198, 161, 91, .22), transparent 70%), radial-gradient(500px 260px at 0% 0%, rgba(38, 57, 90, .9), transparent 70%);
}
.cta-band--photo::before {
  background: linear-gradient(90deg, rgba(10, 17, 29, .95) 0%, rgba(10, 17, 29, .82) 55%, rgba(10, 17, 29, .55) 100%), var(--cta-img, none) center / cover no-repeat;
}
.cta-band h2 { color: #f7f3ec; margin-bottom: .3em; }
.cta-band h2 em { color: var(--gold-hi); }
.cta-band p { margin: 0; max-width: 40em; }
.cta-band a:not(.btn) { color: var(--gold-hi); }
.cta-band .btn-row { margin-top: 0; }
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ forms */
.form-card {
  background: var(--ivory); border: 1px solid var(--line); border-top: 1px solid var(--gold); border-radius: 18px; padding: clamp(24px, 4vw, 48px);
  box-shadow: var(--shadow-light); position: relative; overflow: hidden;
}
.form-card h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
legend { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.45rem); line-height: 1.25; font-weight: 500; color: var(--ink); padding: 0; margin-bottom: 8px; }
.legend-note { color: var(--muted); font-size: .95rem; margin: 0 0 16px; }
.field label, .field .label { display: block; font-weight: 600; font-size: .95rem; color: var(--ink); margin-bottom: 7px; }
.req { color: var(--err); margin-left: 2px; }
.opt { color: var(--muted); font-weight: 400; font-size: .86rem; margin-left: 4px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="date"], .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 15px; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff; border: 1px solid #c8bca6; border-radius: var(--r-sm); appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #6b7180; opacity: 1; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--gold-deep) 50%), linear-gradient(135deg, var(--gold-deep) 50%, transparent 50%); background-position: calc(100% - 21px) 22px, calc(100% - 16px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #a99a7f; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-deep); outline: none; box-shadow: 0 0 0 4px rgba(198, 161, 91, .28); }
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--err); box-shadow: 0 0 0 3px rgba(161, 42, 31, .12); }
.field .hint { font-size: .88rem; color: var(--muted); margin-top: 7px; }
.field .error-text { font-size: .88rem; color: var(--err); margin-top: 7px; font-weight: 600; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400 !important; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--gold-deep); }
.check-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.check-grid .check { min-height: 44px; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
.check-grid .check:hover { border-color: var(--gold); }
.check-grid .check:has(input:checked) { border-color: var(--gold-deep); background: var(--gold-wash); }
.check-grid .check input { margin: 0; width: 18px; height: 18px; }
.file-input { display: block; width: 100%; padding: 14px; border: 1px dashed #b9ab92; border-radius: var(--r-sm); background: #fff; font: inherit; color: var(--muted); }
.file-input::file-selector-button { font: 600 .9rem var(--sans); color: var(--on-dark); background: var(--navy-900); border: 0; border-radius: 999px; padding: 9px 18px; margin-right: 14px; cursor: pointer; transition: background-color .2s var(--ease); }
.file-input::file-selector-button:hover { background: var(--navy-700); }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; }
/* Stepped forms (strategy call). Only once site.js has taken over; without it every step shows. */
.form-progress { margin: 0 0 22px; }
.form-progress-text { margin: 0 0 8px; font: 600 .8rem/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.form-progress-bar { height: 4px; border-radius: 999px; background: rgba(18, 26, 40, .1); overflow: hidden; }
.form-progress-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: inherit; transition: width .35s ease; }
.is-stepped .form-step { display: none; }
.is-stepped .form-step.is-current { display: block; }
.form-actions [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .form-progress-bar span { transition: none; } }
.form-card .btn--dark {
  color: var(--navy-950); border-color: rgba(255, 240, 200, .55);
  background-color: #d6b46f;
  background-image: linear-gradient(180deg, #ecd9a6 0%, #d6b46f 46%, #b98f45 54%, #d9bb7c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(90, 60, 10, .35), 0 8px 18px -10px rgba(18, 26, 40, .45);
  min-width: 220px;
}
.form-card .btn--dark:hover { filter: brightness(1.05); color: var(--navy-950); background-color: #d6b46f; }
.form-note { font-size: .92rem; color: var(--muted); margin: 14px 0 0; }
.form-status { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-sm); font-weight: 600; display: none; }
.form-status.is-ok { display: block; background: #e7f3ea; color: var(--ok); border: 1px solid #b9dcc4; }
.form-status.is-err { display: block; background: #fbeceb; color: var(--err); border: 1px solid #efc4bf; }
.form-status.is-busy { display: block; background: var(--gold-wash); color: var(--gold-deep); border: 1px solid var(--gold-line); }

/* Form pages: an aside of reassurance beside the form. */
.form-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.form-layout > aside { position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 900px) { .form-layout { grid-template-columns: 1fr; } .form-layout > aside { position: static; } }

/* ------------------------------------------------------------ prose (legal, blog) */
.prose { max-width: 740px; overflow-wrap: break-word; font-size: 1.08rem; line-height: 1.75; color: var(--text); }
.prose a { overflow-wrap: anywhere; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 1.8em; }
.prose h3 { font-size: clamp(1.3rem, 2.4vw, 1.5rem); margin-top: 1.6em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--gold-deep); }
.prose figure { margin: 2.2em 0; }
.prose figure img { border-radius: var(--r); box-shadow: var(--shadow-light); }
.prose figcaption { font-size: .9rem; color: var(--muted); margin-top: 10px; }
.prose blockquote { margin: 2em 0; padding: 4px 0 4px 24px; border-left: 1px solid var(--gold); font-family: var(--serif); font-size: 1.4rem; line-height: 1.45; color: var(--ink); }
.prose table { margin: 1.4em 0; font-size: .97rem; background: var(--ivory); }
.prose .table-wrap table { margin: 0; }
.prose th { background: var(--cream-2); color: var(--ink); }
.legal h2 { font-size: 1.55rem; }
.updated { color: var(--muted); font-size: .95rem; }

/* ------------------------------------------------------------ blog */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }
.post-card {
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-light); position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.post-card > a { display: block; overflow: hidden; }
.post-card img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; background: var(--cream-2); transition: transform 1s var(--ease); }
.post-card .body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.post-card h2, .post-card h3 { font-size: 1.32rem; line-height: 1.25; margin: 8px 0 10px; }
.post-card h2 a, .post-card h3 a { color: var(--ink); text-decoration: none; }
.post-card h2 a::after, .post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--gold-deep); }
.post-card p { color: var(--muted); font-size: .97rem; }
@media (hover: hover) {
  .post-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(18, 26, 40, .06), 0 14px 18px -12px rgba(18, 26, 40, .3); }
  .post-card:hover img { transform: scale(1.04); }
}
.post-card:focus-within { outline: 2px solid var(--gold); outline-offset: 3px; }
.post-card :focus-visible { outline: none; }
.meta { font-size: .86rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.meta time { color: var(--gold-deep); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }
.section--dark .post-card, .section--deep .post-card { background: var(--navy-850); border-color: rgba(230, 207, 152, .14); box-shadow: none; }
.section--dark .post-card h3 a, .section--deep .post-card h3 a, .section--dark .post-card h2 a, .section--deep .post-card h2 a { color: var(--on-dark); }
.section--dark .post-card h3 a:hover, .section--deep .post-card h3 a:hover { color: var(--gold-hi); }
.section--dark .post-card p, .section--deep .post-card p, .section--dark .post-card .meta, .section--deep .post-card .meta { color: var(--on-dark-muted); }
.section--dark .post-card .meta time, .section--deep .post-card .meta time { color: var(--gold); }
.cat-nav { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 40px; }
.cat-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--ivory); color: var(--ink); text-decoration: none; font-size: .93rem; font-weight: 600; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.cat-nav a:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.cat-nav a[aria-current="page"] { background: var(--navy-900); color: var(--gold-hi); border-color: var(--navy-900); }
.post-head { max-width: 900px; }
.post-head .meta { color: var(--on-dark-muted); margin-top: 18px; }
.post-head .meta time { color: var(--gold); }
.post-cats { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.post-cats a { color: var(--gold); }
.post-cover { margin: -48px auto 0; max-width: 960px; position: relative; padding: 0 20px; }
.post-cover img { border-radius: var(--r); box-shadow: var(--shadow-light); width: 100%; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 10px 0 0; }
.tags li { font-size: .86rem; padding: 5px 12px; border-radius: 999px; background: var(--cream-2); color: var(--muted); }

/* ------------------------------------------------------------ notice & contact list */
.notice { border: 1px solid var(--gold-line); background: var(--ivory); border-radius: var(--r); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-light); }
.contact-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.contact-list li { padding: 18px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 44px 1fr; gap: 2px 16px; align-items: center; }
.contact-list li > .ic { grid-row: span 2; width: 44px; height: 44px; padding: 11px; border-radius: 50%; border: 1px solid var(--gold-line); color: var(--gold-deep); background: var(--ivory); }
.contact-list .k { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.contact-list a, .contact-list .v { font-size: 1.15rem; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--gold-deep); text-decoration: underline; }

/* ------------------------------------------------------------ social pills */
.social { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.social a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 10px; border: 1px solid rgba(230, 207, 152, .22); border-radius: 999px; transition: border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease); }
.social .ic { width: 20px; height: 20px; color: var(--gold); }
.social--light a { color: var(--ink); border-color: var(--line); background: var(--ivory); text-decoration: none; font-weight: 600; font-size: .95rem; }
.social--light .ic { color: var(--gold-deep); }
.social--light a:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* ------------------------------------------------------------ footer */
.site-footer { background: var(--navy-950); color: var(--on-dark-muted); font-size: .97rem; padding: clamp(64px, 8vw, 96px) 0 28px; position: relative; overflow: hidden; isolation: isolate; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .6; }
.site-footer::after { content: ""; position: absolute; right: -120px; bottom: -60px; width: 520px; height: 200px; z-index: -1; background: url("/assets/img/symbol-golden.webp") center / contain no-repeat; opacity: .05; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--gold-hi); text-decoration: underline; }
.site-footer a.btn--gold, .site-footer a.btn--gold:hover { color: var(--navy-950); text-decoration: none; }
.footer-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: clamp(36px, 5vw, 56px); margin-bottom: clamp(36px, 5vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.footer-cta p { margin: 0; font: 500 clamp(1.6rem, 3vw, 2.4rem)/1.15 var(--serif); color: #f7f3ec; max-width: 18em; }
.footer-cta p span { color: var(--gold-hi); }
.footer-grid { display: grid; grid-template-columns: 1.35fr 1fr .8fr 1fr; gap: 40px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.site-footer h2 { font-family: var(--sans); font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; font-weight: 700; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer address { font-style: normal; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact .ic { color: var(--gold); margin-top: 3px; width: 18px; height: 18px; }
.footer-motto { font-family: var(--serif); font-size: 1.3rem; color: var(--on-dark); line-height: 1.35; margin: 22px 0 10px; }
.footer-brand img { width: 220px; }
.footer-brand .slogan-line { color: var(--gold-hi); letter-spacing: .02em; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 48px; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-size: .86rem; }
.trading { display: flex; align-items: center; gap: 14px; }
.trading img { width: 74px; height: auto; }
.trading strong { color: var(--on-dark); }

/* ------------------------------------------------------------ scroll reveal
   site.js adds .reveal only when motion is allowed and IntersectionObserver
   exists, so content is never hidden without JS. */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.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; }
  .reveal { opacity: 1; transform: none; }
}