/* ==========================================================================
   VSF — Vahan Sarkissian Financial Guidance Services
   Visual system. Content is unchanged; this file carries the design.

   Direction: one light source. The brand gold behaves like the low sun in the
   logo — it illuminates edges, rules and markers, and never becomes body text.
   Body copy is a serif because the articles are long-form essays, not
   marketing blurbs. Headings are a grotesque so the page reads modern rather
   than legal.
   ========================================================================== */

:root {
  --gold:        #f5c02c;
  --gold-lift:   #ffd45e;
  --gold-text:   #8a6206;
  --gold-haze:   #fdf4dd;

  --ink:         #221f1a;
  --ink-2:       #4f4a41;
  --ink-3:       #756f64;

  --char:        #24221d;
  --char-deep:   #16150f;
  --band:        #3a3730;
  --paper:       #ffffff;
  --rule:        #e6e2d8;
  --rule-firm:   #cdc7b8;

  --t--1: 0.8125rem;
  --t-0:  1.0625rem;
  --t-1:  1.3125rem;
  --t-2:  1.625rem;
  --t-3:  2.0625rem;
  --t-4:  clamp(2rem, 1.4rem + 2vw, 2.75rem);
  --t-5:  clamp(2.5rem, 1.6rem + 3.4vw, 3.75rem);
  --t-6:  clamp(2.75rem, 1.2rem + 6vw, 5.25rem);

  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.375rem;
  --s-4: 2.25rem;
  --s-5: 3.5rem;
  --s-6: 5.5rem;

  --measure: 70ch;
  --shell: 1220px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --display: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --text: "Newsreader", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--text);
  font-size: var(--t-1);
  font-optical-sizing: auto;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}

h1 { font-size: var(--t-5); }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-2); letter-spacing: -0.012em; }
h4 { font-size: var(--t-1); letter-spacing: -0.008em; }
h5 { font-size: var(--t-0); letter-spacing: 0; }
h6 { font-size: var(--t-0); letter-spacing: 0; color: var(--ink-2); }

p { margin: 0 0 var(--s-3); max-width: var(--measure); text-wrap: pretty; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 0.18em; text-decoration-color: var(--rule-firm); }
a:hover { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }

strong, b { font-weight: 600; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1px; }

::selection { background: var(--gold); color: var(--ink); }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 56rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--gold); color: var(--ink);
  padding: var(--s-2) var(--s-3);
  font-family: var(--display); font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.section { padding-block: var(--s-6); }
.section--tight { padding-block: var(--s-5); }

.section--warm { background: var(--char); color: #e8e4da; }
.section--warm h1, .section--warm h2, .section--warm h3 { color: #fff; }
.section--warm p { color: #cfc9bc; }

.rule-accent { position: relative; padding-top: var(--s-3); }
.rule-accent::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 2px; background: var(--rule);
}
.rule-accent::after {
  content: ""; position: absolute; top: 0; left: 0;
  width: 4.5rem; height: 2px; background: var(--gold);
}
.section--warm .rule-accent::before { background: rgba(255,255,255,0.18); }

.rule-accent--center { text-align: center; }
.rule-accent--center::before, .rule-accent--center::after { left: 50%; transform: translateX(-50%); }

.lede { font-size: var(--t-2); line-height: 1.55; color: var(--ink-2); }

.btn {
  display: inline-block; font-family: var(--display); font-weight: 600;
  font-size: var(--t--1); line-height: 1; padding: 0.95em 1.6em;
  border: 1.5px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn--ghost { border-color: var(--rule-firm); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.section--warm .btn--ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.section--warm .btn--ghost:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }

.btn--on-dark { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--on-dark:hover { background: #fff; border-color: #fff; }

.topbar { background: var(--char-deep); color: #b9b3a6; font-family: var(--display); font-size: var(--t--1); }
.topbar__inner {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: flex-end; align-items: center; padding-block: 0.55rem;
}
.topbar a { color: #d6d0c3; text-decoration: none; }
.topbar a:hover { color: var(--gold-lift); text-decoration: underline; text-underline-offset: .2em; }
.topbar__lang [aria-current="true"] { color: var(--gold-lift); font-weight: 600; }

.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); padding-block: 0.85rem; position: relative;
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo { width: 158px; height: auto; flex: none; }
.footer .brand__logo { width: 172px; }
@media (max-width: 420px) { .brand__logo { width: 126px; } }

.nav-toggle {
  display: none; background: transparent; border: 1px solid var(--rule-firm);
  border-radius: 2px; padding: 0.5rem 0.8rem;
  font-family: var(--display); font-weight: 600; font-size: var(--t--1);
  color: var(--ink); cursor: pointer;
}

.nav__list { display: flex; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.nav__list a {
  font-family: var(--display); font-weight: 500; font-size: 0.9375rem;
  text-decoration: none; display: block; padding: 0.3rem 0 0.25rem;
  border-bottom: 2px solid transparent; color: var(--ink-2);
  transition: color .15s ease, border-color .15s ease;
}
.nav__list a:hover { color: var(--ink); border-bottom-color: var(--rule-firm); }
.nav__list a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: calc(var(--gutter) * -1);
    right: calc(var(--gutter) * -1); top: 100%;
    background: #fff; border-bottom: 1px solid var(--rule);
    padding: var(--s-1) var(--gutter) var(--s-3);
    box-shadow: 0 18px 40px -24px rgba(0,0,0,.4);
  }
  .nav[data-open="true"] { display: block; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); font-size: var(--t-1); }
}

.hero { position: relative; background: var(--char-deep); overflow: hidden; isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 84% 38%; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(14,13,9,.93) 0%, rgba(14,13,9,.80) 42%,
                               rgba(14,13,9,.22) 74%, rgba(14,13,9,0) 100%);
}
.hero__inner { position: relative; padding-block: clamp(3.25rem, 8vw, 6.5rem); max-width: 46rem; }
.hero__title {
  font-size: var(--t-6); line-height: 1.02; letter-spacing: -0.035em;
  color: #fff; margin: 0 0 var(--s-3); font-weight: 600;
}
.hero__title strong { font-weight: 600; }
.hero__lede {
  font-size: var(--t-1); line-height: 1.55; color: #ded8ca; max-width: 36rem;
  margin: 0; padding-top: var(--s-3); border-top: 2px solid var(--gold); display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__title, .hero__lede { animation: rise .9s cubic-bezier(.2,.7,.3,1) both; }
  .hero__lede { animation-delay: .12s; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
}

.pagehead { background: var(--char); color: #fff; padding-block: var(--s-5); border-bottom: 2px solid var(--gold); }
.pagehead h1 { color: #fff; margin-bottom: var(--s-2); max-width: 20ch; }
.pagehead p { color: #cac4b7; max-width: 52ch; margin: 0; font-size: var(--t-1); }

.breadcrumb { font-family: var(--display); font-size: var(--t--1); color: #9b9488; margin-bottom: var(--s-3); }
.breadcrumb a { color: #cac4b7; text-decoration: none; }
.breadcrumb a:hover { color: var(--gold-lift); text-decoration: underline; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .45rem; color: #6b655a; }

.prose-center { text-align: center; }
.prose-center p { margin-inline: auto; }
.prose-center h2 {
  max-width: 18ch; margin-inline: auto;
  font-size: var(--t-5); letter-spacing: -0.03em; line-height: 1.06;
  margin-bottom: var(--s-4);
}
.prose-center .lede { font-size: var(--t-2); max-width: 44ch; }
.prose-center p:not(.lede) { font-size: var(--t-1); color: var(--ink-2); max-width: 52ch; }

.grid { display: grid; gap: var(--s-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.pathway {
  display: flex; flex-direction: column; background: none; border: 0;
  padding: var(--s-3) 0 0; position: relative;
  border-top: 2px solid rgba(255,255,255,.18);
}
.pathway::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 3rem; height: 2px; background: var(--gold);
}
.pathway__icon { width: 40px; margin-bottom: var(--s-3); }
.pathway h3 { margin-bottom: .25rem; color: #fff; font-size: var(--t-2); max-width: 16ch; }
.pathway__sub { font-family: var(--display); font-size: .875rem; font-weight: 500; color: var(--gold-lift); margin-bottom: var(--s-2); }
.pathway p { font-size: var(--t-0); color: #c9c3b6; flex: 1; line-height: 1.6; margin-bottom: var(--s-3); }
.pathway .btn { align-self: flex-start; margin-top: var(--s-2); }

.advisor {
  display: grid; gap: var(--s-5) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  align-items: start;
}
.advisor__portrait {
  width: 100%; border-radius: 2px;
  box-shadow: 0 2px 0 0 var(--gold), 0 28px 50px -34px rgba(34,31,26,.6);
}
.advisor__id { border-left: 2px solid var(--gold); padding: .15rem 0 .15rem var(--s-2); margin-top: var(--s-3); }
.advisor__name { font-family: var(--display); font-weight: 600; font-size: var(--t-2); line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
.advisor__title { margin: .25rem 0 0; font-size: var(--t-0); color: var(--ink-2); line-height: 1.4; }
.advisor__firm { margin: 0; font-size: .9375rem; color: var(--ink-3); line-height: 1.4; }

.postlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.postlist.grid--3 { grid-template-columns: 1fr; gap: 0; max-width: 64rem; margin-inline: auto; }

.postcard {
  display: grid; grid-template-columns: 1fr minmax(0, 13rem);
  gap: var(--s-4); align-items: start; background: none; border: 0;
  padding-block: var(--s-4); border-top: 1px solid var(--rule);
}
.postlist > li:first-child .postcard { border-top: 0; padding-top: 0; }
.postcard__thumb {
  grid-column: 2; grid-row: 1; border: 1px solid var(--rule); border-radius: 2px;
  aspect-ratio: 16 / 10; object-fit: cover; background: #faf8f3; width: 100%;
}
.postcard__body { grid-column: 1; grid-row: 1; padding: 0; display: block; }
.postcard h3 { font-size: var(--t-3); margin-bottom: var(--s-1); max-width: 30ch; }
.postcard h3 a { text-decoration: none; }
.postcard h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.postcard p { font-size: var(--t-0); color: var(--ink-2); margin-bottom: 0; max-width: none; line-height: 1.6; }
.postcard .btn { display: none; }

@media (max-width: 680px) {
  .postcard { grid-template-columns: 1fr; gap: var(--s-2); }
  .postcard__thumb { grid-column: 1; grid-row: 1; }
  .postcard__body { grid-row: 2; }
  .postcard h3 { font-size: var(--t-2); }
}

.postdate {
  display: block; font-family: var(--display); font-size: .8125rem; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--ink-3); margin-bottom: var(--s-1);
}

.postlist--compact { gap: 0; }
.postlist--compact li { border-top: 1px solid var(--rule); padding-block: var(--s-3); }
.postlist--compact li:first-child { border-top: 0; padding-top: 0; }
.postlist--compact li { padding-block: var(--s-3); }
.postlist--compact h3 { font-size: var(--t-2); margin-bottom: .3rem; max-width: 26ch; }
.postlist--compact h3 a { text-decoration: none; }
.postlist--compact h3 a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.postlist--compact p { font-size: var(--t-0); color: var(--ink-2); margin: 0; line-height: 1.6; max-width: 54ch; }

.article { padding-block: var(--s-5) var(--s-6); }
.article .shell { max-width: 46rem; }
.article h1 { max-width: 18ch; font-size: var(--t-5); }

/* The article summary. Set apart so a reader can take the gist in a few
   seconds and decide whether to read on: tinted ground, gold rule, larger
   type than the body, and a label. */
.summary {
  background: var(--gold-haze);
  border-left: 3px solid var(--gold);
  border-radius: 0 2px 2px 0;
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  margin-bottom: var(--s-5);
}
.summary__label {
  font-family: var(--display);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--gold-text);
  margin: 0 0 .4rem;
  line-height: 1;
}
.summary__text {
  font-size: var(--t-2);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  max-width: 54ch;
}
@media (min-width: 64rem) {
  .article .summary { width: calc(100% + 3rem); margin-left: -3rem; padding-left: calc(3rem - 3px); }
}

/* .article p would otherwise out-specify .lede and flatten the opening
   paragraph to body size. */
.article p.lede {
  font-size: var(--t-2); line-height: 1.5; color: var(--ink-2);
  margin-bottom: var(--s-4);
}

@media (min-width: 64rem) {
  .article .article__figure { width: calc(100% + 6rem); margin-left: -3rem; max-width: none; }
}
.article__meta {
  font-family: var(--display); font-size: var(--t--1); color: var(--ink-3);
  margin-bottom: var(--s-4); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule); max-width: none;
}
.article__meta .sep {
  display: inline-block; width: 1px; height: .85em; background: var(--rule-firm);
  margin-inline: .7rem; vertical-align: -.05em;
}
.article__figure { margin: 0 0 var(--s-5); border-radius: 2px; border-bottom: 2px solid var(--gold); }
.article h2 { font-size: var(--t-3); margin-top: var(--s-5); margin-bottom: var(--s-2); max-width: 26ch; }
.article h3 { font-size: var(--t-2); margin-top: var(--s-4); margin-bottom: var(--s-2); }
.article h4 { margin-top: var(--s-4); margin-bottom: var(--s-2); font-size: var(--t-1); }
.article h5, .article h6 { margin-top: var(--s-3); margin-bottom: .4rem; }
.article p { font-size: var(--t-1); }
.article ul, .article ol { max-width: var(--measure); padding-left: 1.4rem; margin-bottom: var(--s-3); }
.article li { margin-bottom: .45rem; padding-left: .2rem; }
.article li::marker { color: var(--gold-text); }
.article blockquote {
  margin: var(--s-4) 0; padding: var(--s-2) 0 var(--s-2) var(--s-3);
  border-left: 3px solid var(--gold); max-width: var(--measure);
  font-size: var(--t-2); line-height: 1.5; color: var(--ink);
}
.article blockquote p:last-child { margin-bottom: 0; }
.article hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-5) 0; max-width: var(--measure); }
.article table {
  width: 100%; max-width: none; border-collapse: collapse;
  margin-bottom: var(--s-4); font-family: var(--display); font-size: .9375rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.article thead th { text-align: left; font-weight: 600; padding: .7rem .8rem; border-bottom: 2px solid var(--ink); }
.article tbody td { padding: .65rem .8rem; border-bottom: 1px solid var(--rule); }
.article tbody tr:nth-child(odd) td { background: #faf8f3; }
.table-scroll { overflow-x: auto; margin-bottom: var(--s-4); }

.callout {
  border: 0; border-left: 3px solid var(--gold); background: var(--gold-haze);
  padding: var(--s-3); border-radius: 0 2px 2px 0; max-width: var(--measure); margin-bottom: var(--s-4);
}
.callout h3 { margin-top: 0; margin-bottom: .3rem; font-size: var(--t-1); }
.callout p { margin-bottom: .5rem; font-size: var(--t-0); }
.callout p:last-child { margin-bottom: 0; }

.pager {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule);
}
.pager a {
  display: block; text-decoration: none; border: 1px solid var(--rule);
  border-radius: 2px; padding: var(--s-2) var(--s-3);
  transition: border-color .18s ease, background .18s ease;
}
.pager a:hover { border-color: var(--gold); background: var(--gold-haze); }
.pager__role { display: block; font-family: var(--display); font-size: .75rem; color: var(--ink-3); margin-bottom: .2rem; }
.pager__title { font-family: var(--display); font-weight: 500; font-size: var(--t-0); color: var(--ink); line-height: 1.3; }

.capability { background: var(--band); color: #ece8de; padding-block: var(--s-6); }
.capability h2 { color: #fff; text-align: center; max-width: 28ch; margin-inline: auto; margin-bottom: var(--s-5); font-size: var(--t-4); letter-spacing: -0.025em; }
.capability__grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
@media (min-width: 60rem) { .capability__grid { grid-template-columns: repeat(3, 1fr); } }
.capability h3 {
  color: var(--gold-lift); font-size: var(--t-0); font-weight: 600; letter-spacing: 0;
  padding-bottom: .5rem; margin-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.22);
}
.capability ul { list-style: none; margin: 0; padding: 0; font-family: var(--display); font-size: .9375rem; }
.capability li { padding-block: .28rem; color: #ddd8cc; line-height: 1.45; }
.capability__notes {
  margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.2);
  font-family: var(--display); font-size: .8125rem; line-height: 1.6; color: #c3bdb0;
}
.capability__notes ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
@media (min-width: 60rem) { .capability__notes ul { grid-template-columns: 1fr 1fr; gap: .35rem var(--s-5); } }
.capability__notes li { padding-left: 1.3rem; text-indent: -1.3rem; }
.capability__marker { display: inline-block; min-width: .9rem; color: var(--gold-lift); font-weight: 600; vertical-align: super; font-size: .72em; }

.contact-grid { display: grid; gap: var(--s-5) var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-items: start; }
.contact-card { background: var(--gold); color: var(--ink); padding: var(--s-4); border-radius: 2px; }
.contact-card h2 { margin-top: 0; font-size: var(--t-3); }
.contact-card p { font-size: var(--t-0); }
.contact-card a { color: var(--ink); text-decoration-color: rgba(34,31,26,.4); }
.contact-card a:hover { text-decoration-color: var(--ink); }
.contact-list { list-style: none; margin: 0; padding: 0; font-family: var(--display); font-size: .9375rem; }
.contact-list li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7rem; }
.contact-list svg { width: 18px; flex: none; margin-top: 4px; }

.field { margin-bottom: var(--s-3); max-width: 32rem; }
.field label { display: block; font-family: var(--display); font-weight: 500; font-size: .875rem; margin-bottom: .35rem; }
.field input, .field textarea {
  width: 100%; font-family: var(--display); font-size: var(--t-0); padding: .7rem .8rem;
  border: 1px solid var(--rule-firm); border-radius: 2px; background: #fff; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--gold-haze); outline: none; }
.field textarea { min-height: 9rem; resize: vertical; }
.field__hint { font-family: var(--display); font-size: .8125rem; color: var(--ink-3); margin: .35rem 0 0; }

.map-frame { border: 1px solid var(--rule); border-radius: 2px; }

/* Google map. Fixed aspect ratio so it reflows on a phone without the iframe
   collapsing, and a gold underline to match the other framed media. */
.map-embed {
  position: relative;
  aspect-ratio: 21 / 9;
  border: 1px solid var(--rule);
  border-bottom: 2px solid var(--gold);
  border-radius: 2px;
  overflow: hidden;
  background: var(--paper-warm, #faf8f3);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 40rem) { .map-embed { aspect-ratio: 4 / 3; } }

.gate {
  border: 1px solid var(--rule); border-left: 3px solid var(--gold); background: #faf8f3;
  padding: var(--s-3); border-radius: 0 2px 2px 0; max-width: 32rem;
}
.gate__q { font-family: var(--display); font-weight: 600; font-size: var(--t-1); margin-bottom: var(--s-2); }
.gate__reveal { font-family: var(--display); font-weight: 600; font-size: var(--t-2); word-break: break-all; margin-bottom: var(--s-3); letter-spacing: -0.01em; }
.gate__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cta-strip { background: var(--gold); padding-block: var(--s-4); }
.cta-strip__inner { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; }
.cta-strip h2 { margin: 0; font-size: var(--t-3); }
.cta-strip p { margin: .25rem 0 0; color: #5c4a14; font-size: var(--t-0); }
.cta-strip .btn--ghost { border-color: rgba(34,31,26,.45); }
.cta-strip .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.footer { background: var(--char-deep); color: #b4aea1; font-family: var(--display); font-size: .9375rem; padding-block: var(--s-5) var(--s-4); }
.footer a { color: #ddd7ca; text-decoration-color: rgba(255,255,255,.28); }
.footer a:hover { color: var(--gold-lift); text-decoration-color: var(--gold-lift); }
.footer__top {
  display: grid; gap: var(--s-4) var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  padding-bottom: var(--s-4); border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer h2 { color: #fff; font-size: .875rem; font-weight: 600; letter-spacing: 0; margin-bottom: .8rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .45rem; line-height: 1.5; }
.footer .btn { margin-top: var(--s-2); }

.social { display: flex; gap: .5rem; margin-top: var(--s-3); }
.social a { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.26); border-radius: 2px; transition: background .18s ease, border-color .18s ease; }
.social a:hover { background: var(--gold); border-color: var(--gold); }
.social a:hover svg { fill: var(--ink); }
.social svg { width: 16px; fill: #ddd7ca; }

.footer__legal { padding-top: var(--s-4); font-size: .8125rem; line-height: 1.65; color: #918b7f; }
.footer__legal h3 { color: #ddd7ca; font-size: .8125rem; font-weight: 600; margin: var(--s-3) 0 .3rem; }
.footer__legal p { max-width: 68ch; margin-bottom: .6rem; }
.footer__legal a { color: #c3bdb0; }

@media (min-width: 60rem) {
  .footer__legal { columns: 2; column-gap: var(--s-6); }
  .footer__legal > * { break-inside: avoid; }
  .footer__legal > h3:first-of-type { margin-top: 0; }
}

.footer__meta {
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; font-size: .8125rem;
}
.footer__meta p { max-width: none; }

.disclosure-nav {
  list-style: none; padding: var(--s-3) 0 0; margin: 0 0 var(--s-5);
  display: grid; gap: .4rem var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  font-family: var(--display); font-size: .9375rem; border-top: 2px solid var(--rule);
}
.disclosure-block { padding-block: var(--s-4); border-top: 1px solid var(--rule); }
.disclosure-block:first-of-type { border-top: 0; padding-top: 0; }
.disclosure-block h2 { font-size: var(--t-2); }
.disclosure-block p, .disclosure-block li { font-size: var(--t-0); color: var(--ink-2); }

@media print {
  .topbar, .nav, .nav-toggle, .cta-strip, .hero__media, .social, .pager { display: none; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .masthead { position: static; }
  .capability, .footer { background: none; color: #000; }
  .capability h2, .capability h3, .footer h2, .footer h3 { color: #000; }
  .capability li, .footer li, .footer__legal { color: #222; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}


/* --- Service catalogue ---------------------------------------------------
   Seven groups of items. Two columns on wide screens, each group opening with
   the same gold-ruled heading used elsewhere on the site, so the page reads as
   part of the design rather than as a pasted-in document. */

.service-grid {
  display: grid;
  gap: var(--s-5) var(--s-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  .service-grid { grid-template-columns: 1fr 1fr; }
}

.service-group h2 {
  font-size: var(--t-2);
  margin-bottom: var(--s-3);
  max-width: 22ch;
}

.service-list { list-style: none; margin: 0; padding: 0; max-width: 46ch; }
.service-list li {
  position: relative;
  padding: .55rem 0 .55rem 1.4rem;
  font-size: var(--t-0);
  line-height: 1.5;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
}
.service-list li:first-child { border-top: 0; padding-top: 0; }
.service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2em;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 1px;
}
.service-list li:first-child::before { top: .62em; }


/* --- Self-assessment -----------------------------------------------------
   One question on screen at a time, large tap targets, and a result that
   reads as a map rather than a grade. Nothing here persists: the privacy
   panel is a claim the script has to keep, so it is stated plainly up front. */

.quiz { max-width: 44rem; }

.quiz__privacy {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  background: #faf8f3;
  border-radius: 0 2px 2px 0;
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}
.quiz__privacy p { margin: 0; font-size: var(--t-0); color: var(--ink-2); }

.quiz__meta {
  font-family: var(--display);
  font-size: .8125rem;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}

.quiz__progress { margin-bottom: var(--s-4); }
.quiz__bar {
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: .6rem;
}
.quiz__bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
  transition: width .32s cubic-bezier(.2,.7,.3,1);
}
.quiz__progress .quiz__meta { margin-bottom: 0; }

.quiz__field { border: 0; padding: 0; margin: 0 0 var(--s-4); }
.quiz__q {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-3);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  padding: 0;
  margin-bottom: var(--s-4);
  max-width: 32ch;
  text-wrap: balance;
}

.quiz__options { display: grid; gap: .6rem; }
.quiz__opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--display);
  font-size: var(--t-0);
  font-weight: 500;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule-firm);
  border-radius: 2px;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.quiz__opt:hover { border-color: var(--ink); transform: translateX(2px); }
.quiz__opt.is-chosen { border-color: var(--gold); background: var(--gold-haze); }

.quiz__list { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.quiz__list li {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
}
.quiz__list li:first-child { border-top: 0; }
.quiz__list strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-1);
  display: block;
  margin-bottom: .3rem;
}
.quiz__list--open li { position: relative; padding-left: 1.3rem; }
.quiz__list--open li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(var(--s-3) + .45em);
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 1px;
}
.quiz__why {
  font-size: var(--t-0);
  color: var(--ink-2);
  margin: 0 0 .5rem;
  max-width: 58ch;
}
.quiz__read {
  font-family: var(--display);
  font-size: .875rem;
  text-decoration-color: var(--gold);
}

.quiz__next {
  border-top: 2px solid var(--rule);
  padding-top: var(--s-4);
  margin-top: var(--s-4);
}
.quiz__next h3 { font-size: var(--t-2); }
[data-quiz-headline]:focus { outline: none; }

@media (max-width: 40rem) {
  .quiz__q { font-size: var(--t-2); }
  .quiz__opt { padding: .9rem 1rem; }
}

.quiz__reading {
  border-top: 2px solid var(--rule);
  padding-top: var(--s-4);
  margin-top: var(--s-4);
}
.quiz__reading h3 { font-size: var(--t-2); }
.quiz__reading .quiz__list li { padding-left: 0; }
.quiz__reading .quiz__list li::before { content: none; }
.quiz__reading .quiz__read {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-1);
  display: block;
  margin-bottom: .25rem;
}

/* --- Hero, stacked tagline ----------------------------------------------
   Four lines, each its own block, set tighter than normal heading leading so
   the stack reads as one unit. The kicker is smaller and lighter so the three
   pillar words carry the weight. */

.hero__stack { display: block; }
.hero__stack span { display: block; line-height: 0.98; }
.hero__kicker {
  font-size: 0.46em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gold);
  margin-bottom: 0.32em;
  line-height: 1.1 !important;
}
@media (max-width: 40rem) {
  .hero__kicker { font-size: 0.52em; }
}