/* =====================================================================
   DR. HUGI — Wealth Strategist
   Brand kit: #FFFFFF · #000000 · #F6DDAE champagne · Poppins Bold hooks
   Cream paper ground, Fraunces display, hard offset shadows.
   Pages: index · about · services · contact
   ===================================================================== */

:root {
  --paper:     #F4EFE6;
  --paper-2:   #ECE5D8;
  --white:     #FFFFFF;
  --champ:     #F6DDAE;
  --champ-2:   #FBEBCB;
  --ink:       #1F1C18;
  --stone:     #6B655C;
  --line:      rgba(31,28,24,.14);
  --gold:      #B8955C;

  --f-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --f-sans:  'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease:   cubic-bezier(.22, .61, .36, 1);
  --ease-o: cubic-bezier(.16, 1, .3, 1);
  --pop:    cubic-bezier(.34, 1.56, .64, 1);

  --r: 14px;
  --r-sm: 8px;
  --shadow: 5px 5px 0 var(--ink);
  --container: 1180px;
  --gutter: clamp(18px, 5vw, 64px);
  --gutter-safe: clamp(18px, 5vw, 64px);
  --navh: 88px;
}

@supports (width: max(0px, env(safe-area-inset-left))) {
  :root { --gutter-safe: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--stone);
  font-family: var(--f-sans); font-weight: 400; font-size: 16.5px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer { position: relative; z-index: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.1; font-family: var(--f-serif); color: var(--ink); }
p { margin: 0 0 1.2em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--champ); color: var(--ink); }

/* --gutter-safe, not --gutter: the pages opt into viewport-fit=cover, so in
   landscape on a notched phone the layout runs under the sensor housing.
   The nav already had side insets; nothing below it did. */
.container { width: min(var(--container), calc(100% - var(--gutter-safe) * 2)); margin-inline: auto; }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--tight { padding-block: clamp(44px, 6vw, 80px); }

/* ---------- Type ---------- */
.hook {
  display: inline-block; padding: 8px 14px;
  background: var(--white); color: var(--ink);
  font-family: var(--f-sans); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 6px; box-shadow: 3px 3px 0 var(--ink);
}
.hook--champ { background: var(--champ); }
.title { font-size: clamp(2.1rem, 4.9vw, 3.9rem); font-weight: 300; letter-spacing: -.018em; font-variation-settings: 'opsz' 144; }
.title em { font-style: italic; font-weight: 300; color: var(--gold); }
.lead { max-width: 600px; font-size: clamp(15.5px, 1.4vw, 17.5px); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.head { margin-bottom: clamp(34px, 5vw, 64px); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 24px; border-radius: var(--r-sm);
  font-family: var(--f-sans); font-weight: 600; font-size: 14.5px;
  border: 1.5px solid var(--ink); cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .25s;
}
.btn--ink   { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--gold); }
.btn--champ { background: var(--champ); color: var(--ink); box-shadow: var(--shadow); }
.btn--white { background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
@media (hover: hover) and (pointer: fine) { .btn--ink:hover, .btn--champ:hover, .btn--white:hover { transform: translate(-2px, -2px); } }
@media (hover: hover) and (pointer: fine) { .btn--ink:hover { box-shadow: 6px 6px 0 var(--gold); } }
@media (hover: hover) and (pointer: fine) { .btn--champ:hover, .btn--white:hover { box-shadow: 7px 7px 0 var(--ink); } }
.btn--ink:active, .btn--champ:active, .btn--white:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink); padding-inline: 8px; box-shadow: none; }
.btn--ghost::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 12px; height: 1.5px; background: var(--gold); transform: scaleX(.45); transform-origin: left; transition: transform .35s var(--ease-o); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover::after { transform: scaleX(1); } }
.btn .arrow { display: inline-block; transition: transform .25s var(--ease-o); }
@media (hover: hover) and (pointer: fine) { .btn:hover .arrow { transform: translateX(4px); } }

.btn__done { display: none; }
.btn.is-done .btn__label { display: none; }
.btn.is-done .btn__done { display: inline; }
.btn.is-busy { opacity: .7; pointer-events: none; }
.hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; pointer-events: none; }

/* ---------- Preloader ---------- */
.preloader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--paper); transition: opacity .55s var(--ease), visibility .55s; }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__mark img { width: 104px; height: 104px; border-radius: 50%; animation: bob 1.5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.03); } }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 90; padding: 18px 0; transition: padding .35s var(--ease); padding-top: calc(18px + env(safe-area-inset-top)); }
.nav__inner { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.nav::before { content: ''; position: absolute; inset: 0; z-index: -2; background: rgba(244,239,230,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--ink); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; }
.nav.is-scrolled { padding: 10px 0; padding-top: calc(10px + env(safe-area-inset-top)); }
.nav.is-scrolled::before { opacity: 1; }
.nav__inner { width: min(1400px, 100% - var(--gutter) * 2); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; }
.brand__mark { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: var(--white); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); transition: transform .3s var(--pop); }
.brand__mark img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
@media (hover: hover) and (pointer: fine) { .brand:hover .brand__mark { transform: rotate(-6deg) scale(1.06); } }
.brand__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; overflow: hidden; }
.brand__name, .brand__tag { overflow: hidden; text-overflow: ellipsis; }
.brand__name { font-family: var(--f-serif); font-size: 18px; letter-spacing: .14em; color: var(--ink); }
.brand__tag { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-top: 5px; white-space: nowrap; }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a:not(.btn):not(.nav__phone) { position: relative; font-size: 14.5px; font-weight: 500; color: var(--ink); opacity: .78; transition: opacity .3s; padding: 6px 0; }
.nav__links a:not(.btn):not(.nav__phone)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--champ); border-top: 1px solid var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-o); }
@media (hover: hover) and (pointer: fine) { .nav__links a:not(.btn):not(.nav__phone):hover, .nav__links a.is-active { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .nav__links a:not(.btn):not(.nav__phone):hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; } }

.nav__right { display: flex; align-items: center; gap: 16px; }
.nav__phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: var(--white); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-weight: 600; font-size: 14px; color: var(--ink); transition: transform .2s var(--pop), background .2s; }
.nav__phone svg { width: 15px; height: 15px; fill: var(--ink); flex: none; }
@media (hover: hover) and (pointer: fine) { .nav__phone:hover { transform: translateY(-2px); background: var(--champ); } }
.nav__phone--menu { display: none; }
.nav__cta { padding: 11px 20px; }
.nav__cta-mobile { display: none; }

.burger { display: none; flex: none; width: 48px; height: 48px; padding: 12px; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r-sm); box-shadow: 3px 3px 0 var(--ink); flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--ink); transition: transform .35s var(--ease), opacity .3s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* the label is hidden on small screens, so the pill has to keep its own
   44px tap target rather than shrinking to fit one icon */
@media (max-width: 1040px) { .nav__right .nav__phone span { display: none; } .nav__phone { padding: 8px 12px; min-width: 44px; justify-content: center; } }
@media (max-width: 900px) {
  .nav__right { gap: 10px; }
  .nav__right .nav__cta { display: none; }
  .burger { display: flex; }
  .nav__links {
    position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: safe center; gap: 22px;
    background: var(--paper); opacity: 0; visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s;
    padding: calc(var(--navh) + 16px) max(24px, env(safe-area-inset-right, 0px)) 32px max(24px, env(safe-area-inset-left, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; }
  /* full width rows: tapping anywhere on the line should work, not just on
     the six characters of the word itself */
  .nav__links a:not(.btn):not(.nav__phone) { font-family: var(--f-serif); font-size: clamp(26px, 8vw, 34px); font-weight: 300; opacity: 1; display: block; width: 100%; text-align: center; padding: 10px 0; }
  .nav__links a:not(.btn):not(.nav__phone)::after { display: none; }
  .nav__links { overscroll-behavior: contain; padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .nav__phone--menu { display: inline-flex; }
  .nav__cta-mobile { display: inline-flex; }
}

/* ---------- Home hero ---------- */
.hero { padding: calc(var(--navh) + 40px) 0 50px; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.hero__title { font-size: clamp(2.35rem, 6vw, 5.2rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.03; font-variation-settings: 'opsz' 144; }
.hero__title .block {
  display: inline-block; padding: .04em .18em .02em; margin-bottom: .1em;
  background: var(--champ); border: 1.5px solid var(--ink); border-radius: 10px; box-shadow: 6px 6px 0 var(--ink);
}
.hero__title em { font-style: italic; font-weight: 300; }
.hero__sub { max-width: 520px; margin: 26px 0 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }

.portrait { position: relative; justify-self: center; width: min(100%, 440px); }
.portrait__blob { position: absolute; inset: 6% -6% -4% -6%; background: var(--champ); border-radius: 48% 52% 44% 56% / 50% 44% 56% 50%; border: 1.5px solid var(--ink); animation: blob 14s ease-in-out infinite; z-index: 0; }
.portrait__img { position: relative; z-index: 1; border-radius: var(--r); border: 1.5px solid var(--ink); box-shadow: var(--shadow); overflow: hidden; background: #2a2a3d; }
.portrait__img img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
@keyframes blob {
  0%, 100% { border-radius: 48% 52% 44% 56% / 50% 44% 56% 50%; }
  50%      { border-radius: 56% 44% 52% 48% / 44% 56% 46% 54%; }
}
@media (max-width: 860px) {
  .hero { padding-top: calc(var(--navh) + 16px); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { order: 1; } .portrait { order: 2; width: min(100% - 28px, 360px); margin-top: 8px; }
  .hero__sub { max-width: none; }
}

/* ---------- Marquee ribbon ---------- */
.ribbon { overflow: hidden; background: var(--ink); color: var(--paper); border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); padding: 13px 0; }
.ribbon--champ { background: var(--champ); color: var(--ink); }
/* The track holds two identical copies and slides exactly one copy's width.
   The spacing lives INSIDE each copy as padding, not as a flex gap: with a gap
   the track is (copy + gap + copy) wide, so sliding 50% of it lands half a gap
   short and the strip visibly jumps every lap. */
.ribbon__track { display: flex; gap: 0; width: max-content; animation: marquee 32s linear infinite; will-change: transform; }
.ribbon__track span { font-family: var(--f-sans); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; display: inline-flex; align-items: center; gap: 40px; padding-right: 40px; }
.ribbon__track i { font-style: normal; font-family: var(--f-serif); font-size: 17px; color: var(--gold); }
/* translate3d keeps it on the compositor, so it stays smooth on a phone
   instead of repainting the whole strip every frame */
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
/* pausing on hover is for mice. On a touch screen :hover sticks after a tap,
   which would freeze the strip for the rest of the visit. */
@media (hover: hover) and (pointer: fine) { .ribbon:hover .ribbon__track { animation-play-state: paused; } }

/* ---------- Consultation bar ---------- */
.consult { position: relative; z-index: 5; width: min(1040px, calc(100% - var(--gutter-safe) * 2)); margin: clamp(32px, 5vw, 56px) auto 0; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.consult__form { display: grid; grid-template-columns: 1fr 1.2fr .95fr .8fr 1.05fr auto; align-items: stretch; }
.consult__field { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px 22px; border-right: 1.5px solid var(--ink); }
.consult__field > span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.consult__field input, .consult__field select { background: transparent; border: 0; outline: 0; padding: 0; font-family: var(--f-serif); font-size: 18px; color: var(--ink); border-bottom: 1.5px solid transparent; transition: border-color .3s; min-height: 44px; }
.consult__field select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F1C18' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center; }
.consult__field input::placeholder { color: rgba(107,101,92,.55); }
.consult__field input:focus, .consult__field select:focus { border-bottom-color: var(--gold); }
.consult__submit { border: 0; border-radius: 0; box-shadow: none; padding-inline: 32px; }
@media (hover: hover) and (pointer: fine) { .consult__submit:hover { transform: none; box-shadow: none; background: #33302A; } }
@media (max-width: 1100px) {
  .consult__form { grid-template-columns: 1fr 1fr; }
  .consult__field { border-top: 1.5px solid var(--ink); }
  .consult__field:nth-child(2), .consult__field:nth-child(3) { border-top: 0; }
  .consult__field:nth-child(3), .consult__field:nth-child(5) { border-right: 0; }
  .consult__field:nth-child(6) { grid-column: 1 / -1; border-right: 0; }
  .consult__submit { grid-column: 1 / -1; padding-block: 18px; }
}
@media (max-width: 560px) {
  .consult__form { grid-template-columns: minmax(0, 1fr); }
  .consult__field { border-right: 0; border-top: 1.5px solid var(--ink); padding: 15px 18px; }
  .consult__field:nth-child(2) { border-top: 0; }
}

/* Form success state */
.formdone { padding: clamp(28px, 5vw, 44px); text-align: center; }
.formdone__tick { width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; background: var(--champ); border: 1.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); display: grid; place-items: center; animation: pop-in .5s var(--pop) both; }
.formdone__tick svg { width: 28px; height: 28px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.formdone h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 10px; }
.formdone p { margin: 0 auto; max-width: 420px; font-size: 15.5px; }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards--6 { grid-template-columns: repeat(3, 1fr); }
.card { display: flex; flex-direction: column; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); transition: transform .25s var(--ease-o), box-shadow .25s var(--ease-o); }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); } }
.card--link { color: inherit; }
@media (hover: hover) and (pointer: fine) { .card--link:hover .card__title { color: var(--gold); } }
.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1.5px solid var(--ink); background: var(--paper-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-o); }
@media (hover: hover) and (pointer: fine) { .card:hover .card__media img { transform: scale(1.05); } }
.card__badge { position: absolute; top: 14px; left: 14px; padding: 6px 11px; background: var(--champ); border: 1.5px solid var(--ink); border-radius: 6px; font-family: var(--f-sans); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--ink); }
.card__body { padding: 26px 24px 27px; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: clamp(22px, 2.1vw, 27px); margin-bottom: 11px; transition: color .2s; }
.card__body p { font-size: 15px; margin-bottom: 16px; flex: 1; }
.link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.link span { transition: transform .3s var(--ease-o); }
@media (hover: hover) and (pointer: fine) { .link:hover span { transform: translateX(5px); } }
@media (max-width: 960px) { .cards, .cards--6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cards, .cards--6 { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; } }

/* ---------- Panels ---------- */
.panel { position: relative; background: var(--champ-2); border: 1.5px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow); padding: clamp(24px, 4vw, 56px); }
.panel--ink { background: var(--ink); color: rgba(244,239,230,.8); box-shadow: 6px 6px 0 var(--gold); }
.panel--ink h2, .panel--ink h3 { color: var(--paper); }
.panel__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.panel__photo { border-radius: var(--r); border: 1.5px solid var(--ink); overflow: hidden; box-shadow: var(--shadow); transform: rotate(-2deg); transition: transform .4s var(--pop); background: var(--paper-2); }
@media (hover: hover) and (pointer: fine) { .panel:hover .panel__photo { transform: rotate(0deg) scale(1.02); } }
.panel__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.panel p { font-size: 16.5px; }
.panel p strong { color: var(--ink); font-weight: 600; }
.panel--ink p strong { color: var(--paper); }
@media (max-width: 860px) { .panel__grid { grid-template-columns: minmax(0, 1fr); } .panel__photo { max-width: 320px; margin-inline: auto; } }

/* ---------- Values ---------- */
.values { padding: 28px 0; }
.values__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.values__list li { font-weight: 300; padding: 9px 17px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 999px; font-family: var(--f-serif); font-style: italic; font-size: clamp(16px, 1.7vw, 19px); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .2s var(--pop); }
@media (hover: hover) and (pointer: fine) { .values__list li:hover { transform: translateY(-3px) rotate(-2deg); background: var(--champ); } }

/* ---------- Quote ---------- */
.quote { position: relative; isolation: isolate; overflow: hidden; padding: clamp(80px, 12vw, 160px) 0; display: grid; place-items: center; }
.quote__bg { position: absolute; inset: -12% 0; z-index: -2; background: var(--paper-2); will-change: transform; }
.quote__bg img { width: 100%; height: 100%; object-fit: cover; }
.quote__veil { position: absolute; inset: 0; z-index: -1; background: rgba(244,239,230,.84); }
.quote__body { text-align: center; max-width: 820px; margin: 0 auto; }
.quote__mark { display: block; font-family: var(--f-serif); font-size: 84px; line-height: .5; color: var(--gold); margin-bottom: 22px; }
.quote__body p { font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: clamp(1.35rem, 3vw, 2.3rem); line-height: 1.4; color: var(--ink); }
.quote__body cite { display: inline-block; margin-top: 16px; font-style: normal; }

/* ---------- Sub page hero ---------- */
.page-hero { padding: calc(var(--navh) + 40px) 0 32px; }
.page-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 6vw, 80px); align-items: center; }
.page-hero__title { font-size: clamp(2.2rem, 5.4vw, 4.6rem); font-weight: 300; letter-spacing: -.02em; line-height: 1.04; font-variation-settings: 'opsz' 144; }
.page-hero__title em { font-style: italic; font-weight: 300; color: var(--gold); }
.page-hero__sub { max-width: 560px; margin: 22px 0 0; font-size: clamp(16px, 1.5vw, 18px); }
.page-hero__photo { border-radius: var(--r); border: 1.5px solid var(--ink); overflow: hidden; box-shadow: var(--shadow); background: var(--paper-2); transform: rotate(1.5deg); }
.page-hero__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
.page-hero__photo--tall img { aspect-ratio: 5 / 9; }   /* the narrow brand book crops */
.page-hero__photo--wide img { aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .page-hero { padding-top: calc(var(--navh) + 16px); }
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero__photo { max-width: 330px; margin-inline: auto; }
  .page-hero__photo--tall img { aspect-ratio: 4 / 5; }
  .page-hero__sub { max-width: none; }
}

/* ---------- Checklist / steps ---------- */
.checklist li { position: relative; padding: 13px 0 13px 40px; border-top: 1.5px solid var(--line); font-size: 15.5px; color: var(--ink); }
.checklist li:last-child { border-bottom: 1.5px solid var(--line); }
.checklist li::before { content: ''; position: absolute; left: 0; top: 15px; width: 24px; height: 24px; border-radius: 50%; background: var(--champ); border: 1.5px solid var(--ink); }
.checklist li::after { content: ''; position: absolute; left: 8px; top: 21px; width: 8px; height: 5px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { padding: 26px 24px; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); }
.step__num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--champ); border: 1.5px solid var(--ink); font-family: var(--f-serif); font-size: 20px; color: var(--ink); margin-bottom: 16px; }
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p { font-size: 15px; margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin-inline: auto; } }

/* ---------- About ---------- */
.story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 80px); align-items: start; }
.story p { font-size: clamp(15.5px, 1.5vw, 17px); }
/* an editorial lead in, so the opening of her story carries weight */
.story > div > p:first-of-type { font-size: clamp(17.5px, 2vw, 22px); line-height: 1.6; color: var(--ink); font-weight: 300; }
.story strong { color: var(--ink); font-weight: 600; }
.creds { display: grid; gap: 12px; }
.creds li { display: flex; align-items: center; gap: 14px; padding: 17px 20px; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r-sm); box-shadow: 4px 4px 0 var(--ink); font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.creds li i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--champ); border: 1.5px solid var(--ink); font-style: normal; }
.creds li span { margin-left: auto; padding-left: 12px; flex: none; color: var(--stone); font-weight: 600; font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.stats { display: flex; gap: clamp(22px, 4.5vw, 58px); flex-wrap: wrap; margin-top: 40px; }
.stat { display: grid; grid-template-columns: auto auto; column-gap: 2px; align-items: baseline; }
.stat__num { font-family: var(--f-serif); font-size: clamp(52px, 6.6vw, 80px); line-height: .95; color: var(--ink); font-weight: 300; font-variation-settings: 'opsz' 144; letter-spacing: -.02em; }
.stat__plus { font-family: var(--f-serif); font-size: clamp(24px, 2.8vw, 34px); color: var(--gold); line-height: 1; }
.stat__lbl { grid-column: 1 / -1; margin-top: 16px; padding-top: 13px; border-top: 2.5px solid var(--champ); font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; line-height: 1.5; color: var(--stone); }
@media (max-width: 860px) { .story { grid-template-columns: minmax(0, 1fr); } }

/* Photo strip: these crops are tall and narrow, so the frame matches them */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 920px; margin-inline: auto; justify-items: center; }
.gallery figure { margin: 0; width: 100%; border-radius: var(--r); border: 1.5px solid var(--ink); overflow: hidden; box-shadow: 4px 4px 0 var(--ink); background: var(--paper-2); transition: transform .3s var(--pop); }
.gallery figure:nth-child(odd) { transform: rotate(-1.5deg); }
.gallery figure:nth-child(even) { transform: rotate(1.5deg); }
@media (hover: hover) and (pointer: fine) { .gallery figure:hover { transform: rotate(0) scale(1.03); } }
.gallery img { width: 100%; aspect-ratio: 5 / 9; object-fit: cover; object-position: center; }
@media (max-width: 860px) { .gallery { grid-template-columns: 1fr 1fr; max-width: 460px; } }

.timeline { position: relative; display: grid; gap: 0; margin-top: 18px; max-width: 880px; margin-inline: auto; }
.timeline::before { content: ''; position: absolute; top: 30px; bottom: 30px; left: 127px; width: 1.5px; background: var(--line); }
.tl { display: grid; grid-template-columns: 96px 30px minmax(0, 1fr); gap: 0 16px; align-items: start; text-align: left; padding: clamp(15px, 1.9vw, 21px) 0; }
.tl__year { font-family: var(--f-serif); font-size: clamp(30px, 3.2vw, 42px); color: var(--gold); line-height: 1; margin: 0; font-weight: 300; text-align: right; font-variation-settings: 'opsz' 144; }
.tl__dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--white); position: relative; justify-self: center; margin: 11px 0 0; flex: none; }
.tl__dot::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--champ); transform: scale(0); transition: transform .45s var(--pop); }
.tl.is-in .tl__dot::after { transform: scale(1); }
.tl__txt { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; max-width: none; color: var(--ink); padding-top: 7px; }
@media (max-width: 1000px) {
  /* Tablet: the same three column rail, just tighter. The dot MUST stay in
     the grid flow. Absolutely positioning it drops it out, which leaves only
     two grid items and collapses the text into the 30px dot column. */
  .tl { grid-template-columns: 74px 26px minmax(0, 1fr); gap: 0 14px; padding: 15px 0; }
  .tl__year { font-size: clamp(26px, 3.4vw, 32px); }
  .tl__dot { position: relative; left: auto; top: auto; margin: 9px 0 0; justify-self: center; }
  .tl__txt { max-width: none; font-size: 15.5px; }
  .timeline::before { left: 101px; }
}

/* ---------- Services page ---------- */
.rows { display: grid; gap: clamp(48px, 8vw, 110px); }
.row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: center; scroll-margin-top: 110px; }
.row--flip .row__media { order: 2; }
.row__media { position: relative; border-radius: var(--r); border: 1.5px solid var(--ink); overflow: hidden; box-shadow: var(--shadow); background: var(--paper-2); transform: rotate(-1.5deg); transition: transform .4s var(--pop); }
.row--flip .row__media { transform: rotate(1.5deg); }
@media (hover: hover) and (pointer: fine) { .row:hover .row__media { transform: rotate(0) scale(1.02); } }
.row__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.row__body .title { font-size: clamp(1.75rem, 3.6vw, 2.9rem); }
.row__body .lead { margin: 14px 0 6px; }
.row__body .checklist { margin-bottom: 22px; }
@media (max-width: 860px) { .row { grid-template-columns: minmax(0, 1fr); } .row--flip .row__media { order: 0; } }

.jump { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 16px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 600; font-size: 13.5px; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .2s var(--pop), background .2s; }
@media (hover: hover) and (pointer: fine) { .chip:hover { transform: translateY(-3px); background: var(--champ); } }

/* ---------- Contact ---------- */
.cform { background: var(--white); padding: clamp(22px, 4vw, 40px); border: 1.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cform__field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.cform__field > span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.cform__field > span em { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 400; }
.cform__field input, .cform__field textarea, .cform__select { background: transparent; border: 0; outline: 0; border-bottom: 1.5px solid var(--ink); padding: 10px 0; color: var(--ink); font-family: var(--f-serif); font-size: 17px; transition: border-color .3s; resize: vertical; border-radius: 0; }
.cform__select { -webkit-appearance: none; appearance: none; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F1C18' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right center; padding-right: 22px; }
.cform__field input:focus, .cform__field textarea:focus, .cform__select:focus { border-bottom-color: var(--gold); }
.cform__submit { width: 100%; margin-top: 6px; }
.cform__note { margin: 14px 0 0; font-size: 13px; text-align: center; }
@media (max-width: 900px) { .cform__row { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* the contact page ends on the form now, so it needs its own breathing
   room before the footer instead of borrowing it from a section below */
.page-hero:has(.page-hero__grid--form) { padding-bottom: clamp(60px, 7vw, 104px); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: rgba(244,239,230,.7); border-top: 1.5px solid var(--ink); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 36px; align-items: center; padding: 52px 0 34px; }
.footer .brand__mark { box-shadow: 2px 2px 0 var(--gold); border-color: var(--champ); }
.footer .brand__name { color: var(--paper); }
.footer .brand__tag { color: rgba(244,239,230,.6); }
.footer__brand p { margin: 16px 0 0; font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: 17px; color: rgba(244,239,230,.75); }
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--paper); opacity: .75; transition: opacity .3s; }
@media (hover: hover) and (pointer: fine) { .footer__links a:hover { opacity: 1; } }
.footer__social { display: flex; gap: 10px; }
.footer__social a { width: 46px; height: 46px; display: grid; place-items: center; background: transparent; border: 1.5px solid rgba(244,239,230,.35); border-radius: 50%; transition: transform .3s var(--pop), background .3s, border-color .3s; }
@media (hover: hover) and (pointer: fine) { .footer__social a:hover { background: var(--champ); border-color: var(--champ); transform: translateY(-3px) rotate(-6deg); } }
.footer__social svg { width: 18px; height: 18px; fill: none; stroke: var(--paper); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) { .footer__social a:hover svg { stroke: var(--ink); } }
.footer__bottom { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 18px 0 28px; border-top: 1px solid rgba(244,239,230,.15); font-size: 12.5px; }
.footer__bottom p { margin: 0; }
.footer__disclaimer { opacity: .7; max-width: 540px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .footer__bottom { flex-direction: column; } }

/* ---------- Motion ---------- */
/* Visible by default; only the .js class (set by the page itself) arms the animation,
   so the site still reads if JavaScript is blocked or fails. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .75s var(--ease-o), transform .75s var(--ease-o); transition-delay: var(--d, 0s); }
.js [data-reveal="pop"] { transform: translateY(18px) scale(.96); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  /* The blanket rule above would snap the marquee to its end frame and freeze
     it, so the strip has to opt back out by name. iOS reports reduced motion
     for Low Power Mode as well as the accessibility switch, which is a lot of
     ordinary visitors, and a frozen or wrapped block of service names does not
     read as the strip it is meant to be. It keeps scrolling, in one row, at
     a little slower than normal so it stays a drift rather than a ticker. */
  .ribbon__track {
    animation: marquee 48s linear infinite !important;
    animation-duration: 48s !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
    width: max-content;
    justify-content: flex-start;
  }
  .ribbon__track span { white-space: nowrap; flex-wrap: nowrap; }
}


/* ---------- Added: state field, logo panel, contact layout, legal page ---------- */
.consult__field select { text-overflow: ellipsis; }
.consult__field--sm select { font-size: 16px; }

/* About teaser now uses her logo mark rather than a photo */
.panel__photo--logo { border: 0; box-shadow: none; background: transparent !important; transform: none; border-radius: 0; display: grid; place-items: center; }
/* The logo is a 512px circle from the brand book. Shown any bigger than
   256px wide it is upscaled on a retina screen and goes soft, so it is
   capped there, square rather than letterboxed in a 4:5 box. */
.panel__photo--logo img { width: min(256px, 100%); aspect-ratio: 1 / 1; object-fit: contain; transition: transform .5s var(--pop); }
@media (max-width: 860px) { .panel__photo--logo img { width: min(210px, 100%); } }
@media (hover: hover) and (pointer: fine) { .panel:hover .panel__photo--logo { transform: none; } }
@media (hover: hover) and (pointer: fine) { .panel:hover .panel__photo--logo img { transform: scale(1.04) rotate(-3deg); } }

/* Contact: the form sits in the first screen */
.page-hero__grid--form { grid-template-columns: 1fr 1.02fr; align-items: start; gap: clamp(28px, 5vw, 64px); }
.page-hero__grid--form .cform { margin-top: 6px; }
.contact__intro .checklist { margin-top: 22px; max-width: 520px; }

/* Her photo sits beside the form rather than under it, so the picture and
   the submit button are both on screen at first glance. The text wraps
   alongside it, which keeps the left column the same height as the form.
   The frame keeps the 5/9 shape of the brand book crop, so nothing is cut. */
.contact__introrow { display: grid; grid-template-columns: 208px 1fr; gap: clamp(18px, 2.4vw, 30px); align-items: start; margin-top: 26px; }
.contact__portrait { max-width: 208px; transform: rotate(-1.5deg); }
.contact__portrait img { aspect-ratio: 5 / 9; }
.contact__introtext .page-hero__sub { margin-top: 0; }
.contact__introtext .checklist { margin-top: 18px; }
@media (max-width: 1080px) and (min-width: 861px) {
  .contact__introrow { grid-template-columns: 172px 1fr; }
  .contact__portrait { max-width: 172px; }
}
@media (max-width: 900px) {
  .page-hero__grid--form { grid-template-columns: minmax(0, 1fr); }
  /* stacked, the supporting copy would push the form off screen, so the
     form comes straight after the headline and the rest follows it */
  .contact__intro { display: contents; }
  .contact__intro .hook { order: 1; }
  .page-hero__grid--form .page-hero__title { order: 2; }
  .page-hero__grid--form .cform { order: 3; }
  .contact__introrow { order: 4; grid-template-columns: minmax(0, 1fr); margin-top: 30px; justify-items: center; }
  .contact__introtext { order: 1; }
  .contact__portrait { order: 2; margin-inline: auto; max-width: 260px; }
  .contact__introtext .checklist { margin-top: 0; }
}

/* Disclosures page */
.legal { max-width: 760px; }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin: 38px 0 10px; }
.legal p { font-size: 15.5px; line-height: 1.75; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .legal a:hover { color: var(--gold); } }
.legal__updated { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); }
.legal__draft { background: var(--champ); border: 1.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px 24px; margin-bottom: 34px; }
.legal__draft strong { display: block; font-family: var(--f-sans); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.legal__draft p { margin: 0; font-size: 15px; color: var(--ink); }
.footer__disclaimer a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }


/* =====================================================================
   Light / dark
   No stored choice follows the device setting; the toggle in the header
   overrides it and is remembered. Champagne is a light surface in both
   themes, so anything sitting on it keeps dark text via --on-champ.
   ===================================================================== */
:root { --on-champ: #1F1C18; }

.hook--champ, .btn--champ, .card__badge, .step__num, .ribbon--champ,
.hero__title .block, .legal__draft, .legal__draft strong, .legal__draft p { color: var(--on-champ); }
@media (hover: hover) and (pointer: fine) { .values__list li:hover, .chip:hover, .nav__phone:hover, .themetoggle:hover { color: var(--on-champ); } }
.formdone__tick svg { stroke: var(--on-champ); }
.checklist li::after { border-left-color: var(--on-champ); border-bottom-color: var(--on-champ); }
@media (hover: hover) and (pointer: fine) { .footer__social a:hover svg, .themetoggle:hover svg { stroke: var(--on-champ); } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --paper:   #15130F;
  --paper-2: #1E1A15;
  --white:   #241F19;
  --champ:   #F6DDAE;
  --champ-2: #2C2519;
  --ink:     #F2ECE1;
  --stone:   #AEA69A;
  --line:    rgba(242,236,225,.18);
  --gold:    #D8B77E;
  }
  :root:not([data-theme="light"]) body::before { opacity: .03; }
  :root:not([data-theme="light"]) .footer,
  :root:not([data-theme="light"]) .panel--ink,
  :root:not([data-theme="light"]) .ribbon { background: #0C0A08; }
  :root:not([data-theme="light"]) .nav::before { background: rgba(21,19,15,.93); }
  :root:not([data-theme="light"]) .quote__veil { background: rgba(21,19,15,.86); }
  :root:not([data-theme="light"]) .portrait__img,
  :root:not([data-theme="light"]) .card__media,
  :root:not([data-theme="light"]) .row__media,
  :root:not([data-theme="light"]) .page-hero__photo,
  :root:not([data-theme="light"]) .panel__photo,
  :root:not([data-theme="light"]) .gallery figure,
  :root:not([data-theme="light"]) .quote__bg { background: #241F19; }
  :root:not([data-theme="light"]) .panel__photo--logo { background: transparent; }
  :root:not([data-theme="light"]) .brand__mark { background: #FFFFFF; }
  :root:not([data-theme="light"]) .ribbon,
  :root:not([data-theme="light"]) .panel--ink h2,
  :root:not([data-theme="light"]) .panel--ink h3,
  :root:not([data-theme="light"]) .footer .brand__name,
  :root:not([data-theme="light"]) .footer__links a,
  :root:not([data-theme="light"]) .footer__disclaimer a { color: #F2ECE1; }
  :root:not([data-theme="light"]) .footer__social svg { stroke: #F2ECE1; }
  :root:not([data-theme="light"]) .btn--ink { background: var(--champ); color: var(--on-champ); border-color: var(--champ); box-shadow: 4px 4px 0 var(--gold); }
  :root:not([data-theme="light"]) .btn--ink:hover { background: #FBEBCB; box-shadow: 6px 6px 0 var(--gold); }
  :root:not([data-theme="light"]) .consult__submit:hover { background: #FBEBCB; }
}

:root[data-theme="dark"] {
  --paper:   #15130F;
  --paper-2: #1E1A15;
  --white:   #241F19;
  --champ:   #F6DDAE;
  --champ-2: #2C2519;
  --ink:     #F2ECE1;
  --stone:   #AEA69A;
  --line:    rgba(242,236,225,.18);
  --gold:    #D8B77E;
}
:root[data-theme="dark"] body::before { opacity: .03; }
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .panel--ink,
:root[data-theme="dark"] .ribbon { background: #0C0A08; }
:root[data-theme="dark"] .nav::before { background: rgba(21,19,15,.93); }
:root[data-theme="dark"] .quote__veil { background: rgba(21,19,15,.86); }
:root[data-theme="dark"] .portrait__img,
:root[data-theme="dark"] .card__media,
:root[data-theme="dark"] .row__media,
:root[data-theme="dark"] .page-hero__photo,
:root[data-theme="dark"] .panel__photo,
:root[data-theme="dark"] .gallery figure,
:root[data-theme="dark"] .quote__bg { background: #241F19; }
:root[data-theme="dark"] .panel__photo--logo { background: transparent; }
:root[data-theme="dark"] .brand__mark { background: #FFFFFF; }
:root[data-theme="dark"] .ribbon,
:root[data-theme="dark"] .panel--ink h2,
:root[data-theme="dark"] .panel--ink h3,
:root[data-theme="dark"] .footer .brand__name,
:root[data-theme="dark"] .footer__links a,
:root[data-theme="dark"] .footer__disclaimer a { color: #F2ECE1; }
:root[data-theme="dark"] .footer__social svg { stroke: #F2ECE1; }
:root[data-theme="dark"] .btn--ink { background: var(--champ); color: var(--on-champ); border-color: var(--champ); box-shadow: 4px 4px 0 var(--gold); }
@media (hover: hover) and (pointer: fine) { :root[data-theme="dark"] .btn--ink:hover { background: #FBEBCB; box-shadow: 6px 6px 0 var(--gold); } }
@media (hover: hover) and (pointer: fine) { :root[data-theme="dark"] .consult__submit:hover { background: #FBEBCB; } }

/* ---------- Theme toggle ---------- */
.themetoggle {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--white); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  transition: transform .2s var(--pop), background .2s;
}
@media (hover: hover) and (pointer: fine) { .themetoggle:hover { transform: translateY(-2px); background: var(--champ); } }
.themetoggle:active { transform: translateY(1px); box-shadow: 1px 1px 0 var(--ink); }
.themetoggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.themetoggle__sun { display: none; }
.themetoggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle__sun { display: block; }
  :root:not([data-theme="light"]) .themetoggle__moon { display: none; }
}
:root[data-theme="dark"] .themetoggle__sun { display: block; }
:root[data-theme="dark"] .themetoggle__moon { display: none; }
:root[data-theme="light"] .themetoggle__sun { display: none; }
:root[data-theme="light"] .themetoggle__moon { display: block; }

/* ---------- Tablet and small laptop polish ---------- */
@media (max-width: 1100px) { .nav__inner { gap: 14px; } }
@media (max-width: 1000px) and (min-width: 861px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .steps .step:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav__right { order: 2; }
  .themetoggle { order: 3; }
  .burger { order: 4; }
}
@media (max-width: 420px) {
  .brand__tag { font-size: 9px; letter-spacing: .1em; }
  .brand__name { font-size: 16px; }
  .brand__mark { width: 42px; height: 42px; }
  .nav__inner { gap: 10px; }
}

/* Selects default to the width of their longest option, which was starving the
   submit button in the consultation bar. Let the grid decide instead. */
.consult__field { min-width: 0; }
.consult__field input, .consult__field select { width: 100%; min-width: 0; }
.consult__submit { min-width: max-content; }


/* =====================================================================
   Mobile hardening
   ===================================================================== */

/* iOS paints a grey box over anything tapped, which looks like a bug on
   the champagne buttons. Keep a faint tint so a tap still registers. */
html { -webkit-tap-highlight-color: rgba(31, 28, 24, .08); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* iOS inflates text in landscape unless this is pinned, which broke the
   nav on to two lines. */
body { overscroll-behavior-y: none; }

/* The footer disclaimer link was a 17px tall target. */
.footer__disclaimer a { display: inline-block; padding: 12px 0; min-height: 44px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 10px; }
.footer__links { margin-inline: -10px; }

/* Long unbreakable strings: her email address and the license numbers on
   the disclosures page are wider than a 320px phone. */
.legal p, .footer__disclaimer, .cform__note { overflow-wrap: anywhere; }

/* Keep the page clear of the home indicator on gesture phones. */
.footer__bottom { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }

@media (max-width: 900px) {
  /* Selects with 51 states must not be able to squeeze their own text out. */
  .cform__select, .consult__field select { min-width: 0; text-overflow: ellipsis; }
}

/* Very narrow phones, 320px class. */
@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .brand__name { font-size: 15px; }
  .brand__tag { font-size: 8.5px; }
  .brand__mark, .themetoggle { width: 44px; height: 44px; }
  .burger { width: 46px; height: 46px; padding: 12px; }
  .nav__inner { gap: 8px; }
}


/* ---------- Mobile hardening, second pass ---------- */

/* If main.js never arrives (a dropped request on a phone network is ordinary)
   the preloader would cover the site forever, because the only code that
   removes it lives in that file. Give the overlay its own way out: it fades
   itself after three seconds no matter what, and never exists at all without
   JS. Anything JS does is faster, so this is only ever a backstop. */
.preloader { animation: preloader-bail 0s linear 3s forwards; }
@keyframes preloader-bail { to { opacity: 0; visibility: hidden; pointer-events: none; } }
html:not(.js) .preloader { display: none; }

/* reportValidity scrolls the invalid field to the very top of the viewport,
   which on a phone is underneath the fixed nav, so the visitor sees the
   browser's error bubble pointing at nothing. */
html { scroll-padding-top: calc(var(--navh) + 12px); }
.consult__field, .cform__field { scroll-margin-top: calc(var(--navh) + 12px); }

/* The select chevron was a fixed dark hex baked into a data URI, so in dark
   mode it was near black on a near black field and the pickers looked like
   plain text. Redraw it in the light ink for both dark paths. */
.cform__error {
  margin: 12px 0 0; color: #8C2F1D; font-size: 14.5px; font-weight: 500;
  background: rgba(140, 47, 29, .08); border: 1.5px solid rgba(140, 47, 29, .35);
  border-radius: var(--r-sm); padding: 10px 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .consult__field select,
  :root:not([data-theme="light"]) .cform__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F2ECE1' stroke-width='1.5'/%3E%3C/svg%3E"); }
}
:root[data-theme="dark"] .consult__field select,
:root[data-theme="dark"] .cform__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F2ECE1' stroke-width='1.5'/%3E%3C/svg%3E"); }
:root[data-theme="light"] .consult__field select,
:root[data-theme="light"] .cform__select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231F1C18' stroke-width='1.5'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cform__error { color: #F0A392; border-color: rgba(240,163,146,.4); background: rgba(240,163,146,.1); } }
:root[data-theme="dark"] .cform__error { color: #F0A392; border-color: rgba(240,163,146,.4); background: rgba(240,163,146,.1); }


/* On a 320px phone "Ask about short and long term saving" is 350px on one
   line, and nowrap made the button push the page wider than the screen. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
}


/* ---------- Audit round, 2026-09-19 ---------- */

/* The frosted bar re-reads and re-blurs everything under a full width fixed
   strip on every scroll frame, and .is-scrolled never switches off once the
   visitor is 40px down. On a phone that runs alongside the marquee and the
   parallax. Desktop keeps the glass. */
@media (max-width: 900px) {
  .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(244,239,230,.98); }
}
@media (max-width: 900px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav::before { background: rgba(21,19,15,.98); }
}
@media (max-width: 900px) {
  :root[data-theme="dark"] .nav::before { background: rgba(21,19,15,.98); }
  :root[data-theme="light"] .nav::before { background: rgba(244,239,230,.98); }
}

/* The palette switches on data-theme, but the browser drawn parts of the form
   (the State picker sheet, the caret, the scrollbars) were still following the
   phone's own setting. A visitor who toggled against their device got a light
   picker over a dark page. */
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }


/* ---------- Select dropdown list ---------- */
/* The open list is painted by the browser, not by the page. It kept a white
   background while the options inherited the page's text colour through
   `button, input, select, textarea { color: inherit }`, so in dark mode the
   choices were cream on white and unreadable. Give the options both colours
   explicitly: --white and --ink already flip with the theme, so one rule
   covers light and dark. */
select option,
select optgroup {
  background-color: var(--white);
  color: var(--ink);
}
select option:disabled { color: var(--stone); }

/* color-scheme was only set when the visitor had used the toggle. Following
   the phone's own dark setting left it unset here, so the browser drawn parts
   (this list, the caret, scrollbars) still rendered light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}


/* ---------- Contact details (phone lives here now, not in the header) ---- */
.contact__below { display: grid; gap: 18px; }
.contact__below-title { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 300; }
.contact__list { max-width: 620px; }
.contact__list li { padding: 6px 0; border-top: 1.5px solid var(--line); display: grid; grid-template-columns: 82px 1fr; gap: 14px; align-items: center; }
.contact__list li:last-child { border-bottom: 1.5px solid var(--line); }
.contact__lbl { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.contact__list a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-serif); font-size: clamp(16px, 1.6vw, 19px); color: var(--ink); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .contact__list a:hover { color: var(--gold); } }
@media (max-width: 480px) { .contact__list li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- The pull quote is Dr. Hugi's own words ---------------------- */
/* It used to read as an anonymous testimonial, so the attribution now
   carries her mark and says so in as many words. */
.quote__who { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.quote__who img { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--white); flex: none; }
.quote__who > span { display: flex; flex-direction: column; line-height: 1.25; }
.quote__who strong { font-family: var(--f-sans); font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.quote__who em { font-style: normal; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }

/* ---------- Privacy note under the forms -------------------------------- */
.form__privacy { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--stone); }
.form__privacy a { color: var(--stone); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .form__privacy a:hover { color: var(--ink); } }
.consult .form__privacy { grid-column: 1 / -1; margin: 0; padding: 13px 22px 15px; border-top: 1.5px solid var(--ink); background: var(--paper); }


/* ---------- Optional consent to calls and texts ------------------------- */
/* Unticked by default on purpose: under Florida's FTSA the visitor ticking
   it is the signature, so it must never arrive pre ticked. */
.cform__consent { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin: 4px 0 18px; cursor: pointer; min-height: 44px; }
.cform__consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--gold); cursor: pointer; }
.cform__consent span { font-size: 12.5px; line-height: 1.6; color: var(--stone); }
.cform__consent strong { color: var(--ink); font-weight: 600; }


/* ---------- Affiliation line under the contact details ------------------ */
/* Florida rule 61J2-10.025(3)(a): online, the brokerage name sits adjacent to
   or immediately above or below the point of contact. Do not move it away
   from the phone and email. */
.contact__affil { margin: 4px 0 0; max-width: 620px; font-size: 13px; line-height: 1.6; color: var(--stone); }

/* the footer line is longer now; keep it readable rather than a grey wall */
.footer__disclaimer { max-width: 760px; line-height: 1.65; }


/* ---------- Timeline on narrow screens ---------------------------------- */
/* The year moves above the text and the rail hugs the left edge, so long
   entries keep a full width column to breathe in. */
@media (max-width: 720px) {
  .timeline { max-width: none; }
  .timeline::before { left: 11px; top: 22px; bottom: 22px; }
  .tl { grid-template-columns: 24px minmax(0, 1fr); gap: 0 16px; padding: 15px 0; }
  .tl__dot { grid-column: 1; grid-row: 1 / span 2; margin-top: 7px; }
  .tl__year { grid-column: 2; grid-row: 1; text-align: left; font-size: clamp(26px, 8vw, 32px); }
  .tl__txt { grid-column: 2; grid-row: 2; padding-top: 7px; }
}


/* ---------- Six fields in one row: a little tighter on wide screens ------ */
@media (min-width: 1101px) {
  .consult__field { padding: 18px 18px; }
  .consult__field input, .consult__field select { font-size: 17px; }
  .consult .form__privacy { padding-inline: 18px; }
}

/* ---------- Complimentary review intro on the contact page -------------- */
.review__outcome { margin: 18px 0 0; font-family: var(--f-serif); font-size: clamp(17px, 1.8vw, 20px); color: var(--ink); }
.review__meta { margin: 14px 0 0; font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.review__meta i { font-style: normal; color: var(--gold); margin-inline: 4px; }


/* =====================================================================
   Resources page
   ===================================================================== */
.res { scroll-margin-top: calc(var(--navh) + 12px); }
.res__jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.res__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.res__num { font-family: var(--f-serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; color: var(--gold); }
.res__head .title { margin: 0; }
.res__card { position: relative; max-width: 780px; background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: clamp(24px, 3.4vw, 40px); }
.res__card h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 300; margin: 16px 0 10px; }
.res__card p { max-width: 580px; margin-bottom: 24px; }
.res__badge { display: inline-block; padding: 6px 11px; background: var(--champ); color: var(--on-champ); border: 1.5px solid var(--ink); border-radius: 6px; font-family: var(--f-sans); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.res__badge--soft { background: var(--paper-2); color: var(--ink); }
/* the featured card is champagne in both themes, so it carries its own
   dark text and a dark button; the theme's ink button would be champagne
   on champagne in dark mode */
.res__card--feature { background: var(--champ); }
.res__card--feature h3, .res__card--feature p { color: var(--on-champ); }
.res__card--feature .res__badge { background: #FFFFFF; color: var(--on-champ); border-color: var(--on-champ); }
/* extra classes on purpose: the dark theme's own .btn--ink rules are
   (0,3,0) and would otherwise turn this champagne on a champagne card */
.res .res__card.res__card--feature .btn--ink { background: var(--on-champ); color: #F6DDAE; border-color: var(--on-champ); box-shadow: 4px 4px 0 var(--gold); }
@media (hover: hover) and (pointer: fine) { .res .res__card.res__card--feature .btn--ink:hover { background: #33302A; color: #F6DDAE; } }

/* ---------- Debt snowball calculator ---------- */
.calc { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--shadow); padding: clamp(22px, 3.2vw, 38px); }
.calc__intro h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 300; margin: 16px 0 10px; }
.calc__intro p { max-width: 660px; }
.calc__cols, .calc__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) 44px; gap: 14px; }
.calc__cols { margin-top: 20px; padding-bottom: 8px; border-bottom: 1.5px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.calc__row { align-items: end; padding: 8px 0 10px; border-bottom: 1.5px solid var(--line); }
.calc__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* the column headers label the fields on wide screens; the captions stay
   in the markup for screen readers */
.calc__cap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.calc__text, .calc__money, .calc__pct { position: relative; display: block; }
.calc__cell input, .calc__extra input { width: 100%; min-width: 0; min-height: 44px; padding: 0; border: 0; border-bottom: 1.5px solid var(--line); border-radius: 0; background: transparent; outline: 0; font-family: var(--f-serif); font-size: 18px; color: var(--ink); transition: border-color .25s; }
.calc__cell input:focus, .calc__extra input:focus { border-bottom-color: var(--gold); }
.calc__money input { padding-left: 14px; }
.calc__money::before { content: '$'; position: absolute; left: 0; bottom: 12px; font-family: var(--f-serif); font-size: 18px; color: var(--stone); pointer-events: none; }
.calc__pct input { padding-right: 20px; }
.calc__pct::after { content: '%'; position: absolute; right: 0; bottom: 12px; font-family: var(--f-serif); font-size: 18px; color: var(--stone); pointer-events: none; }
.calc__del { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: var(--stone); font-size: 22px; line-height: 1; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .calc__del:hover { border-color: var(--ink); color: var(--ink); } }
.calc__add { margin-top: 14px; min-height: 44px; padding: 10px 18px; border: 1.5px dashed var(--ink); border-radius: var(--r-sm); background: transparent; color: var(--ink); font-family: var(--f-sans); font-size: 14.5px; font-weight: 600; cursor: pointer; }
.calc__extra { display: grid; gap: 6px; max-width: 320px; margin-top: 26px; }
.calc__extra > span:first-child { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.calc__out { margin-top: 28px; }
.calc__result { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.calc__big { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 22px 24px; background: var(--champ); color: var(--on-champ); border: 1.5px solid var(--on-champ); border-radius: var(--r); box-shadow: 4px 4px 0 var(--on-champ); }
.calc__big span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.calc__big strong { font-family: var(--f-serif); font-weight: 300; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; font-variation-settings: 'opsz' 144; }
.calc__big em { font-style: normal; font-size: 15px; }
.calc__stats { display: grid; gap: 12px; }
.calc__stats > div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-sm); }
.calc__stats span { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.calc__stats strong { font-family: var(--f-serif); font-weight: 400; font-size: 24px; color: var(--ink); }
.calc__stats em { font-style: normal; font-size: 13.5px; color: var(--stone); }
.calc__save { margin: 18px 0 0; font-size: 16px; color: var(--ink); }
.calc__save strong { font-weight: 600; }
.calc__order { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: pay; }
.calc__order li { counter-increment: pay; display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-top: 1.5px solid var(--line); }
.calc__order li::before { content: counter(pay); min-width: 18px; font-family: var(--f-serif); color: var(--gold); }
.calc__order li span { color: var(--ink); font-weight: 500; }
.calc__order li em { margin-left: auto; font-style: normal; font-size: 14px; color: var(--stone); text-align: right; }
.calc__empty { margin: 0; color: var(--stone); }
.calc__warn { margin: 0; padding: 12px 16px; border-radius: var(--r-sm); background: rgba(140, 47, 29, .08); border: 1.5px solid rgba(140, 47, 29, .35); color: #8C2F1D; font-weight: 500; }
.calc__note { margin: 22px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--stone); }

@media (max-width: 720px) {
  .calc__cols { display: none; }
  .calc__row { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; padding: 16px 0; }
  .calc__cell--name { grid-column: 1 / -1; padding-right: 54px; }
  .calc__cap { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
  .calc__del { position: absolute; top: 14px; right: 0; }
  .calc__result { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .calc__warn { color: #F0A392; border-color: rgba(240,163,146,.4); background: rgba(240,163,146,.1); } }
:root[data-theme="dark"] .calc__warn { color: #F0A392; border-color: rgba(240,163,146,.4); background: rgba(240,163,146,.1); }