/* ============================================================
   Ariane Bibas — Residential Mortgage + Design
   Warm editorial palette drawn from arianebibas.com,
   structure modeled on a full-service loan-officer site.
   ============================================================ */

:root {
  /* Header bar height: everything that sits under or beside the sticky header reads this. */
  --nav-h: 164px;
  --bg: #FAF9F6;
  --bg-alt: #F1EEE7;
  --card: #FFFFFF;
  --ink: #1F1D1A;
  --ink-soft: #57534B;
  --ink-faint: #6E6B62;
  --line: #E4DFD4;
  --brass: #846D1F;
  --brass-dark: #715A14;
  --brass-tint: #F3EBDC;
  --bronze: #A26A1F;
  --bronze-tint: #F1E4CE;
  --gold: #A8863A;
  --gold-dark: #86692C;
  --gold-tint: #F1E7D2;
  --navy: #1E4066;
  --navy-dark: #15304F;
  --blue: #2C5B9E;
  --blue-tint: #E9EFF7;
  --dark: #081B33;
  --dark-2: #0F294E;
  --cream: #F3EFE7;
  --cream-soft: #CFC9BC;
  --grey-cool: #EDE9E3;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(31, 29, 26, 0.08);
  --maxw: 1160px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--nav-h) + 1px); }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--brass-dark); text-decoration: none; }
a:hover { color: var(--brass); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */
h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.06;
  color: var(--ink);
  letter-spacing: 0.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); }
h2 { font-size: clamp(2.2rem, 4.2vw, 3.7rem); }
h3 { font-size: 1.45rem; }
.kicker {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.45rem, 2.1vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--brass);
  margin-bottom: 10px;
}
.cta-dark .kicker, .page-hero .kicker { color: #E4CE9F; }
.kicker-logo { height: clamp(120px, 14vw, 168px); width: auto; display: block; margin: 0 0 14px 0; }
.kicker-logo-row { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.kicker-logo-row .kicker-logo { margin-bottom: 0; }
.kicker-photo-frame {
  display: block; height: clamp(120px, 14vw, 168px); width: clamp(120px, 14vw, 168px);
  border-radius: 0; overflow: hidden; flex: 0 0 auto;
  border: 2px solid var(--card); box-shadow: var(--shadow);
}
.kicker-photo-frame img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  transform: scale(1.4); transform-origin: 50% 29%;
}
.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 640px; text-wrap: pretty; }
.section { padding: 96px 0; }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head p { margin-top: 16px; color: var(--ink-soft); }
#programs .section-head { max-width: none; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.25;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.22s ease;
}
.btn-primary { background: var(--brass-dark); color: #fff; }
.btn-primary:hover { background: var(--brass); color: #fff; }
.btn-outline { border-color: var(--navy); color: var(--cream); background: var(--navy); }
.btn-outline:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-outline-strong { border-width: 2.5px; border-color: var(--navy-dark); color: var(--navy-dark); background: rgba(21, 48, 79, 0.08); }
.btn-outline-strong:hover { background: var(--navy-dark); color: var(--cream); }
.btn-solid-blue { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.btn-solid-blue:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-bronze { background: var(--brass-dark); color: #fff; border-color: var(--brass-dark); }
.btn-bronze:hover { background: var(--brass); color: #fff; border-color: var(--brass); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-light:hover { background: #fff; color: var(--ink); }
.btn-outline-light { border-color: var(--cream-soft); color: var(--cream); background: rgba(24, 22, 18, 0.4); backdrop-filter: blur(3px); }
.btn-outline-light:hover { background: var(--cream); color: var(--ink); }
.btn-blue-gold { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.btn-blue-gold:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }

/* The "Loan Calculator" hero button is gold with a dark blue outline,
   wherever it appears, and darkens further on hover. */
.btn.btn-calc {
  background: var(--cream-soft); color: var(--navy); border: 2.5px solid var(--navy);
  padding: 10.5px 22.5px; font-size: 0.92rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn.btn-calc:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Sticky mobile call/book bar ---------- */
.mobile-cta-bar { display: none; }
@media (max-width: 680px) {
  :root { --nav-h: 96px; }
}
@media (max-width: 680px) {
  body { padding-bottom: 62px; }
  body.nav-open .mobile-cta-bar { display: none; }
  .mobile-cta-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.14);
  }
  .mobile-cta-bar a {
    flex: 1 1 50%; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 10px; font-family: var(--sans); font-size: 0.92rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .mobile-cta-bar svg { flex: 0 0 auto; }
  .mobile-cta-bar .mobile-cta-call { background: var(--dark); color: var(--cream); }
  .mobile-cta-bar .mobile-cta-book { background: var(--brass-dark); color: #fff; }
}

/* ---------- Ariane Bibas brand (in nav) ---------- */
.nav-brand { position: relative; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; text-decoration: none; }
/* The boxed "ariane bibas" logo, filling most of the header height. */
.nav-brand-mark { position: relative; display: block; width: 120px; height: 120px; flex: 0 0 auto; }
.nav-brand-mark img {
  position: absolute; inset: 0; height: 100%; width: 100%;
  object-fit: contain; object-position: center; transition: opacity 0.35s ease;
}
.nav-brand .brand-cream { opacity: 0; }
.site-header .nav-brand .brand-dark { opacity: 0; }
.site-header .nav-brand .brand-cream { opacity: 1; }
/* Portrait beside the logo, the same square size, as the heroes once showed them. */
.nav-brand-photo {
  display: block; flex: 0 0 auto; overflow: hidden;
  width: 120px; height: 120px;
  border: 2px solid var(--ink); transition: border-color 0.35s ease;
}
.site-header .nav-brand-photo { border-color: var(--cream); }
.nav-brand-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.nav-brand-name {
  font-family: var(--serif); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap; transition: color 0.35s ease;
}
.site-header .nav-brand-name { color: var(--cream); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }

/* ---------- Header ---------- */
.site-header {
  transition: background 0.35s ease, border-color 0.35s ease;
}
/* Over the homepage photo: a soft dark fade behind the bar so the cream links stay legible. */
.site-header {
  background: linear-gradient(180deg, rgba(18, 16, 13, 0.62) 0%, rgba(18, 16, 13, 0.32) 65%, rgba(18, 16, 13, 0) 100%); border-bottom: 0; backdrop-filter: none;
}
.site-header .nav-links a:not(.btn) { color: rgba(247, 244, 237, 0.92); }
.site-header .nav-links a:not(.btn):hover { color: #fff; }
.site-header .nav-toggle { color: var(--cream); }
.site-header .nav-links a.btn-outline {
  border-width: 2px; border-color: var(--navy-dark); color: #fff;
  background: var(--navy-dark);
}
.site-header .nav-links a.btn-outline:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--line);
}
/* The frosted bar lives on ::before (not the header itself) so the fade below can blur the page too. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(250, 249, 246, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity 0.35s ease;
}
.site-header::before { opacity: 0; }
/* Once scrolling, the bar's bottom edge becomes a soft fade instead of a hard line, so the page
   dissolves into it as it slides up underneath. */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 64px; pointer-events: none;
  background: rgba(250, 249, 246, 0.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.6) 40%, transparent 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
.site-header.scrolled { border-bottom-color: transparent; }
.site-header.scrolled::after { opacity: 1; }
.nav {
  display: flex; align-items: center; gap: 20px;
  height: var(--nav-h); padding-top: 22px;
  max-width: var(--maxw);
}
.nav-links { margin-left: auto; }
/* ---------- Site search ---------- */
.nav-search-toggle {
  background: none; border: 0; display: flex; align-items: center; padding: 4px;
  color: var(--ink-soft); cursor: pointer;
}
.nav-search-toggle:hover { color: var(--ink); }
.site-header .nav-search-toggle { color: rgba(247, 244, 237, 0.92); }
.site-header .nav-search-toggle:hover { color: #fff; }
.search-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(18, 16, 13, 0.55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 90px 20px 20px;
}
.search-overlay[hidden] { display: none; }
.search-panel {
  width: 100%; max-width: 640px; max-height: 78vh;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
}
.search-input-row { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.search-input-row svg { flex: 0 0 auto; color: var(--ink-faint); }
#site-search-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-family: var(--sans); font-size: 1.05rem; color: var(--ink);
}
.search-close { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--ink-faint); cursor: pointer; padding: 2px 6px; }
.search-close:hover { color: var(--ink); }
.search-results { overflow-y: auto; padding: 8px; flex: 1 1 auto; min-height: 0; }
.search-footer {
  flex: 0 0 auto; padding: 14px 22px; border-top: 1px solid var(--line);
  font-size: 0.92rem; color: var(--ink-soft); text-align: center;
}
.search-footer a { color: var(--brass-dark); font-weight: 700; }
.search-footer a:hover { color: var(--brass); }
.search-result { display: block; padding: 12px 14px; border-radius: 10px; }
.search-result:hover { background: var(--bg-alt); }
.search-result .sr-cat {
  display: block; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 4px;
}
.search-result .sr-title { display: block; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.search-result .sr-snippet { display: block; font-size: 0.92rem; color: var(--ink-soft); }
.search-result mark { background: var(--brass-tint); color: var(--brass-dark); border-radius: 3px; padding: 0 1px; }
.search-empty { padding: 34px 14px; text-align: center; color: var(--ink-faint); font-size: 0.92rem; }
.bio-lic {
  display: block; font-family: var(--sans); font-style: normal;
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brass-dark); margin-top: 14px;
}
.about-cta { margin-top: 24px; }
.nav-links { display: flex; align-items: center; gap: 20px; list-style: none; flex-wrap: nowrap; }
.nav-links a {
  font-size: 1.08rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
  letter-spacing: 0.02em;
}
.nav-links a:not(.btn):hover, .nav-links a.active:not(.btn) { color: var(--ink); }
.nav-links a.nav-hot { color: var(--navy-dark); font-weight: 700; }
.site-header .nav-links a.nav-hot:not(.btn) { color: #E4CE9F; }
.nav-links a:not(.btn) { position: relative; padding-bottom: 4px; }
.nav-links a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.nav-links a:not(.btn):hover::after, .nav-links a.active:not(.btn)::after { transform: scaleX(1); }
.nav-links .btn { padding: 10px 22px; font-size: 0.92rem; }
.nav-links a.btn-primary { color: #fff; }
.nav-links a.btn-primary:hover { color: #fff; }
.nav-links a.btn-outline { color: var(--cream); }
.nav-links a.btn-outline:hover { color: #fff; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; font-size: 1.6rem; color: var(--ink); cursor: pointer; }

/* ---------- Nav dropdowns (Loans / Resources) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle {
  background: none; border: 0; padding: 0 0 4px; margin: 0; cursor: pointer;
  font-family: var(--sans); font-size: 1.08rem; font-weight: 500; color: var(--ink-soft);
  letter-spacing: 0.02em; white-space: nowrap; position: relative;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-dropdown-toggle::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.active { color: var(--ink); }
.nav-dropdown-toggle:hover::after, .nav-dropdown-toggle.active::after { transform: scaleX(1); }
.nav-caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); transition: transform 0.2s ease; flex-shrink: 0; }
.nav-dropdown.open .nav-caret { transform: rotate(225deg) translate(0, 1px); }
.nav-dropdown-menu {
  list-style: none; margin: 0; padding: 10px; z-index: 60;
  position: absolute; top: 100%; left: 50%; min-width: 190px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); margin-top: 12px;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.nav-dropdown-menu a {
  display: block; padding: 9px 14px; border-radius: 8px;
  font-size: 1.02rem; font-weight: 500; color: var(--ink-soft); white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--bg-alt); color: var(--ink); }
.nav-dropdown-menu a.active { color: var(--brass-dark); font-weight: 700; }
/* The three most-used calculators, listed by name under "Loan Calculators" */
.nav-dropdown-menu a.nav-sub { padding-left: 30px; font-size: 0.95rem; }
.nav-dropdown-menu a.nav-sub::before { content: "– "; color: var(--brass); }
.nav-dropdown-menu a.nav-hot { color: var(--navy-dark); font-weight: 700; }
@media (min-width: 1101px) {
  .nav-dropdown.open .nav-dropdown-menu {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
  }
}
.site-header .nav-dropdown-toggle { color: rgba(247, 244, 237, 0.92); }
.site-header .nav-dropdown-toggle:hover,
.site-header .nav-dropdown-toggle.active { color: #fff; }
.site-header .nav-links .nav-dropdown-menu a:not(.btn) { color: var(--ink-soft); }
.site-header .nav-links .nav-dropdown-menu a:not(.btn):hover { background: var(--bg-alt); color: var(--ink); }
.site-header .nav-links .nav-dropdown-menu a.nav-hot { color: var(--navy-dark); }

/* ---------- Hero ---------- */
.hero-inner { max-width: 760px; will-change: transform, opacity; }
.hero .btn-row { flex-wrap: nowrap; }
.hero .btn { padding: 12px 20px; font-size: 0.92rem; letter-spacing: 0.1em; white-space: nowrap; }
.hero-creds {
  display: block; text-align: left;
  font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  margin: 0 0 6px;
}
.hero-creds:last-of-type { margin-bottom: 0; }
/* Licence numbers stay whole, so a narrow screen breaks the line before them instead. */
.hero-creds .org { white-space: nowrap; }
/* NAR mark rules: REALTOR in caps with the registered symbol shown. */
.hero-creds .reg { font-size: 0.62em; letter-spacing: normal; vertical-align: 0.5em; }
.hero .lede .reg { font-size: 0.6em; vertical-align: 0.45em; }
.hero-creds .sep { opacity: 0.5; }
/* Her own mark, large, with the name and all three roles listed beside it. */
.hero-identity { display: flex; align-items: center; gap: 24px; margin-bottom: 32px; }
.hero-identity-media { display: none; }
/* The five disciplines, listed under the firm name. */
.hero-disciplines { list-style: none; margin: 0; padding: 0; }
/* Same label style as the firm name above (so the two read as one unit), in cream, each led by a short bronze dash. */
.hero-disciplines li {
  position: relative; padding-left: 30px;
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(247, 244, 237, 0.92); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); line-height: 1.5; margin: 0 0 7px;
}
.hero-disciplines li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 16px; height: 1px; background: #E4CE9F; }
.hero-disciplines li:last-child { margin-bottom: 0; }

/* Intro: Ariane's photo large beside her story, licences at the end of it. */
.about-grid.about-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
.about-feature .about-photo-big { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; }
.about-feature .about-photo-big img { object-position: center; }
.about-licenses { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); }
.about-licenses li { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 6px; }
.about-licenses strong { color: var(--ink); }
.about-licenses .reg, .about-text .reg { font-size: 0.6em; vertical-align: 0.5em; }

/* Whatever your situation: one large card per team, each with its own photo and button. */
.service-kicker { display: block; color: var(--brass); font-size: clamp(1.3rem, 1.8vw, 1.6rem); letter-spacing: 0.04em; margin-bottom: 12px; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 1120px; margin: 0 auto; }
.service-card {
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.service-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.service-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt); }
.service-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.service-card:hover .service-img img { transform: scale(1.04); }
.service-body { display: flex; flex-direction: column; flex: 1; padding: 30px 32px 32px; }
.service-team { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin-bottom: 10px; }
.service-card h3 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.1; margin-bottom: 14px; }
.service-card p { color: var(--ink-soft); font-size: 1rem; line-height: 1.6; margin: 0 0 24px; flex: 1; }
.service-card .btn { align-self: flex-start; padding: 11px 20px; font-size: 0.92rem; }
@media (max-width: 980px) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .service-body { padding: 24px 24px 26px; }
  .about-grid.about-feature { grid-template-columns: 1fr; }
  .about-feature .about-photo-big { grid-column: 1; grid-row: auto; max-width: 520px; }
}
@media (max-width: 680px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-card h3 { font-size: 1.9rem; }
  .about-feature .about-photo-big { max-width: none; }
}
.hero-logo { display: block; height: clamp(120px, 14vw, 168px); width: auto; flex: 0 0 auto; }
.hero-identity-text { min-width: 0; }
.hero-name {
  display: block; font-family: var(--sans);
  font-size: 1.2rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: #E4CE9F;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); margin-bottom: 18px;
}
/* Top-aligned so the logo sits just under the C2 Financial mark in the header. */
.hero { position: relative; min-height: 86vh; margin-top: calc(-1 * var(--nav-h) - 6px); padding-top: calc(var(--nav-h) + 16px); padding-bottom: 48px; display: flex; align-items: flex-start; color: var(--cream); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; will-change: transform; transform-origin: center center; }
@media (prefers-reduced-motion: reduce) {
  .hero-bg img, .photo-hero-bg { animation: none; }
}
@media (min-width: 681px) {
  .hero-bg img[src*="dining-angled-hero"] { height: 100%; top: 0; object-position: 0% center; }
}
@media (max-width: 680px) {
  .hero .btn-row { flex-wrap: wrap; }
  .hero .btn { white-space: normal; }
  .analysis-banner .btn-row { flex-wrap: wrap; }
  .analysis-banner .btn { white-space: normal; }
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18,16,13,0.92) 0%, rgba(18,16,13,0.6) 18%, rgba(18,16,13,0) 42%),
    linear-gradient(90deg, rgba(24,22,18,0.94) 0%, rgba(24,22,18,0.78) 40%, rgba(24,22,18,0) 70%);
}
.hero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 24px; padding-bottom: 70px; }
.hero h1 { color: #fff; max-width: 760px; }
.hero h1 em { font-style: italic; color: #E4CE9F; }
.hero h1.hero-lead { margin-bottom: 26px; }
.hero .lede { color: rgba(247, 244, 237, 0.86); font-size: 1.12rem; font-style: italic; line-height: 1.7; max-width: 600px; margin: 26px 0 36px; text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.hero .kicker { -webkit-text-stroke: 0; color: #E4CE9F; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.3em; margin-bottom: 10px; }

/* ---------- Pillars (three licenses) ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pillar {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 38px 32px; box-shadow: var(--shadow);
}
.pillar .num {
  font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--brass);
  display: block; margin-bottom: 14px;
}
.pillar:nth-child(2) .num { color: var(--blue); }
.pillar h3 { margin-bottom: 12px; }
.pillar p { color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Who I help ---------- */
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
#equity .help-grid { grid-template-columns: repeat(2, 1fr); }
.help-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px;
}
.help-card h3 { font-size: 1.2rem; margin-bottom: 8px; }
.help-card p { font-size: 0.93rem; color: var(--ink-soft); }
.card-link { display: inline-block; margin-top: 12px; font-size: 0.92rem; font-weight: 700; color: var(--brass-dark); }

.help-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 44px; }
.help-pill {
  cursor: pointer;
  padding: 15px 28px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.02em; color: var(--ink);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.help-pill:hover {
  color: #fff; background: var(--brass-dark); border-color: var(--brass-dark);
  box-shadow: 0 4px 14px rgba(133, 102, 52, 0.35);
}
.help-pill.active {
  color: #fff; background: var(--brass-dark); border-color: var(--brass-dark);
  box-shadow: 0 4px 14px rgba(133, 102, 52, 0.35);
}
.help-panel { display: none; }
.help-panel.active { display: block; animation: help-panel-in 0.35s ease; }
@keyframes help-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Programs ---------- */
.bg-alt { background: var(--bg-alt); }
.bg-brass { background: var(--brass-tint); }
.bg-cool { background: var(--grey-cool); }
.bg-dark { background: var(--dark); color: var(--cream); }
.bg-dark .kicker { color: #E4CE9F; }
.bg-dark h2 { color: #fff; }
.bg-dark .section-head p { color: rgba(243, 239, 231, 0.75); }
.programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.program {
  background: var(--card); border: 2px solid var(--brass); border-radius: var(--radius);
  padding: 27px 23px; transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.program { display: flex; flex-direction: column; color: inherit; }
.program:hover {
  transform: translateY(-4px);
  border-color: var(--brass);
  box-shadow: 0 0 0 4px var(--brass-tint), var(--shadow);
  background: linear-gradient(0deg, rgba(133, 102, 52, 0.07), rgba(133, 102, 52, 0.07)), var(--card);
}
.program .learn { display: block; margin-top: auto; padding-top: 16px; font-size: 0.92rem; font-weight: 700; color: var(--brass-dark); transition: color 0.2s ease; }
.program-thumb {
  display: block; margin: -28px -24px 18px; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0; aspect-ratio: 16 / 7;
}
.program-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.85); transition: transform 0.4s ease, filter 0.4s ease;
}
.program:hover .program-thumb img { transform: scale(1.05); filter: saturate(1.1); }
.program-thumb img[src*="reverse"] { object-position: 50% 18%; }
.programs-xref { margin-top: 30px; font-size: 0.92rem; color: var(--ink-soft); line-height: 2.2; }
.programs-xref .chip { margin-left: 6px; }
.program.hot { border-top: 3px solid var(--brass); }
.program .badge {
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--brass-dark); background: var(--brass-tint); border-radius: 20px;
  padding: 4px 11px; display: inline-block; margin-bottom: 12px;
}
.program h3 { font-size: 1.55rem; margin-bottom: 8px; font-weight: 700; transition: color 0.2s ease; }
.program p { font-size: 0.92rem; color: var(--ink-soft); transition: color 0.2s ease; }
.program-more {
  border-style: dashed; border-color: var(--line); background: var(--card);
}

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 380px 1fr; column-gap: 64px; align-items: stretch; }
.about-sidebar { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 24px; align-self: start; }
.about-kicker-row { display: flex; flex-direction: row; align-items: flex-start; gap: 24px; }
.about-kicker-logo { height: clamp(90px, 10.5vw, 126px); width: auto; display: block; flex-shrink: 0; }
.about-id { display: flex; flex-direction: column; }
.about-name {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 2.1rem; letter-spacing: 0.03em; color: var(--ink); margin-bottom: 8px;
}
.about-id .bio-lic { font-size: 1.02rem; line-height: 1.5; margin-top: 0; }
.about-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; will-change: transform; }
.about-text { grid-column: 2; grid-row: 1; max-width: 700px; }
.about-text .kicker.about-tagline { font-size: clamp(2.6rem, 4.4vw, 3.9rem); font-style: normal; font-weight: 700; margin-bottom: 10px; }
.about-text h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 700; margin-bottom: 22px; }
.about-text p { color: var(--ink-soft); margin-bottom: 16px; }


/* ---------- Calculators ---------- */
#calculators .section-head { max-width: none; }
.calc-shell {
  background: var(--card); border: 1px solid var(--line); border-top: none;
  border-radius: var(--radius); box-shadow: 0 22px 60px rgba(31, 29, 26, 0.14); overflow: hidden;
  position: relative;
}
.calc-shell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 1;
  background: var(--brass);
}
.calc-tabs { display: flex; flex-wrap: wrap; gap: 10px; padding: 22px; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.calc-tab {
  flex: 0 1 auto; padding: 13px 20px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.05em; color: var(--ink-soft);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.calc-tab:hover { color: var(--gold-dark); background: var(--gold-tint); border-color: var(--gold); }
.tab-badge {
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: var(--gold-dark); border-radius: 20px;
  padding: 2px 8px; margin-left: 7px; vertical-align: middle;
}
.calc-tab.active {
  /* #8F7030: the gold, deepened just enough for white text to pass 4.5:1 */
  color: #fff; background: #8F7030; border-color: #8F7030;
  box-shadow: 0 4px 14px rgba(184, 149, 46, 0.4);
}
.calc-tab.active .tab-badge { background: #fff; color: var(--gold-dark); }
.calc-panel { display: none; padding: 40px; }
.calc-panel.active { display: block; }
.calc-panel-head { margin-bottom: 28px; max-width: 720px; }
.calc-panel-head h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 6px; }
.calc-panel-head p { font-size: 0.93rem; color: var(--ink-soft); }
.calc-panel-body { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.calc-fields label { display: block; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); margin: 16px 0 6px; }
.calc-fields label:first-child { margin-top: 0; }
.field-hint { font-size: 0.92rem; color: var(--ink-faint); line-height: 1.4; margin: -2px 0 6px; }
.calc-warning {
  display: inline-block; margin-top: 12px; padding: 8px 14px; border-radius: 8px;
  background: var(--brass-tint); border: 1px solid var(--brass); color: var(--brass-dark);
  font-weight: 600; font-size: 0.92rem; line-height: 1.4;
}
.calc-checkbox { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); margin: 16px 0 6px; cursor: pointer; }
.calc-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brass-dark); cursor: pointer; }
.slider-row { display: flex; align-items: center; gap: 14px; }
.slider-row input[type="number"] { flex: 0 0 130px; width: 130px; }
.slider-row input[type="range"] { flex: 1; margin: 0; }
.slider-row .num-affix { position: relative; flex: 0 0 130px; width: 130px; }
.slider-row .num-affix input { width: 100%; }
.num-affix.dollar input { padding-left: 22px; }
.num-affix.dollar::before {
  content: "$"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size: 0.95rem; pointer-events: none;
}
.num-affix.percent input { padding-right: 24px; }
.num-affix.percent::after {
  content: "%"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  color: var(--ink-soft); font-size: 0.95rem; pointer-events: none;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px;
  background: var(--line); border-radius: 2px; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--brass-dark); border: 2px solid var(--card);
  box-shadow: 0 1px 4px rgba(31, 29, 26, 0.3); cursor: pointer;
}
input[type="range"]::-moz-range-track { height: 4px; background: var(--line); border-radius: 2px; }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--brass-dark);
  border: 2px solid var(--card); box-shadow: 0 1px 4px rgba(31, 29, 26, 0.3); cursor: pointer;
}
input[type="range"]:focus { outline: none; }
input[type="range"]:focus::-webkit-slider-thumb { outline: 2px solid var(--brass); outline-offset: 2px; }
.calc-fields input, .calc-fields select {
  width: 100%; padding: 12px 14px; font-size: 1rem; font-family: var(--sans);
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink);
}
.calc-fields input:focus, .calc-fields select:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
.calc-result { background: var(--bg-alt); border-radius: var(--radius); padding: 32px; align-self: start; }
.calc-result .big { font-family: var(--serif); font-size: 2.6rem; color: var(--brass-dark); line-height: 1.1; }
.calc-result .big-label { font-size: 0.92rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.calc-result table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: 0.92rem; }
.calc-result td { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.calc-result td:last-child { text-align: right; font-weight: 600; color: var(--ink); }
.calc-note { font-size: 0.92rem; color: var(--ink-faint); margin-top: 18px; line-height: 1.5; }
.calc-note-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: inherit;
  color: var(--brass-dark); font-weight: 700; cursor: pointer; text-decoration: underline;
}
.calc-note-link:hover { color: var(--brass); }

.calc-disclaimer, .programs-disclaimer {
  margin-top: 20px; font-size: 0.92rem; line-height: 1.65;
  color: var(--ink-faint); max-width: 980px;
  border-left: 3px solid var(--brass); padding-left: 16px; border-radius: 4px;
}

/* ---------- Amortization schedule ---------- */
/* ---------- Tax savings calculator ---------- */
.tax-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.tax-stats div { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.tax-stats span { display: block; font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.tax-stats strong { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); }
.tax-highlight { background: #EAF1E6; border: 1px solid #C9DCC0; border-radius: 10px; padding: 20px; margin-top: 20px; }
.tax-highlight .big-label { color: #3F6B37; }
.tax-highlight .big { color: #2F5233; }
.tax-highlight p { font-size: 0.92rem; color: #3F6B37; margin-top: 4px; }

.amort { margin-top: 18px; }
.amort summary { cursor: pointer; font-size: 0.92rem; font-weight: 600; color: var(--brass-dark); }
.amort-wrap { max-height: 260px; overflow: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; }
.amort-wrap table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.amort-wrap th, .amort-wrap td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.amort-wrap th:first-child, .amort-wrap td:first-child { text-align: left; }
.amort-wrap thead th { position: sticky; top: 0; background: var(--bg-alt); font-weight: 600; color: var(--ink-soft); }
.calc-subhead { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); margin: 28px 0 4px; padding-top: 22px; border-top: 1px solid var(--line); }
.calc-fields > .calc-subhead:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cm-compare-label { margin-top: 24px; }
.cm-compare { max-height: none; margin-top: 8px; }
.cm-compare tr.cm-current td { font-weight: 700; color: var(--ink); background: var(--bg); }

/* ---------- FAQ ---------- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 2px solid var(--cream-soft); }
.faq-q {
  width: 100%; background: none; border: 0; text-align: left; cursor: pointer;
  padding: 24px 40px 24px 0; position: relative;
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--ink);
}
.faq-q::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.4rem; color: var(--brass); transition: transform 0.25s;
}
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-a p { color: var(--ink-soft); padding-bottom: 24px; max-width: 720px; }
.faq-a p a { font-weight: 700; }

/* ---------- Resources teaser ---------- */
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.resource-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: block; color: inherit;
}
.resource-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: inherit; }
.resource-card .thumb { aspect-ratio: 16/9; overflow: hidden; }
.resource-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.resource-card:hover .thumb img { transform: scale(1.07); }
.resource-card:hover .thumb img[src*="ladera"] { transform: scale(1.6); }
.resource-card .body { padding: 24px; }
.resource-card .cat { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.resource-card:nth-child(2) .cat { color: var(--navy); }
.resource-card h3 { font-size: 1.25rem; margin: 8px 0; }
.resource-card p { font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Photo hero backdrop ---------- */
.photo-hero, .analysis-banner { position: relative; overflow: hidden; }
.photo-hero-bg { position: absolute; inset: 0; }
.photo-hero-bg img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.photo-hero-tall { width: 100%; min-height: 760px; }
.photo-hero-tall .photo-hero-bg img { top: 0; height: 100%; object-fit: cover; object-position: center; }
/* Real Estate: the renovation film plays silently on a loop as the hero background */
.photo-hero-bg .hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.photo-hero-bg img[src*="couple-hero"] { object-position: 96% top; left: auto; right: 0; max-width: 1900px; }
.photo-hero-bg img[src*="blog-hero"] { object-position: 88% 40%; }
.photo-hero-bg img[src*="brooklyn-ph"] { top: 0; height: 100%; object-position: center bottom; }
.photo-hero-bg img[src*="guides-hero"] { object-position: center 100%; transform-origin: center bottom; scale: 1.2; }
.photo-hero-bg img[src*="blueprint-hero"] { object-position: center bottom; }
.photo-hero-bg img[src*="laguna-coastline"] { object-position: center 65%; }
.photo-hero-bg img[src*="construction-flipped"] { top: -2.5%; left: -1%; width: 104%; height: 105%; object-position: center top; }
.photo-hero-bg img[src*="ariane-house-hero"] { object-position: 70% 15%; }
.photo-hero-bg img[src*="ladera-ranch-aerial"] { object-position: center 85%; transform-origin: center bottom; transform: scale(1) !important; }
.photo-hero-bg img[src*="glossary-hero"] { object-position: center bottom; }
/* Loan Services: on wide screens the hero grows with the photo so heads at the top are never cut off. */
.photo-hero-tall:has(img[src*="glossary-hero"]) { min-height: max(760px, 44vw); }
.photo-hero-tall .photo-hero-bg img[src*="glossary-hero"] { object-position: center 20%; }
.photo-hero-bg:has(img[src*="glossary-hero"]) { transform-origin: center 70%; }
@media (min-width: 681px) {
  /* Container matches the source photo's own aspect ratio (1282x596), so
     object-fit: cover needs zero cropping on any edge above ~1420px wide --
     the whole photo, including Ariane at the door on the right, is fully
     visible. Below that, min-height keeps the overlaid heading/lede/badge
     block from overlapping itself, which reintroduces a little (much
     smaller than before) side-crop -- an unavoidable trade-off against a
     photo this much wider than the hero box is tall. The site-wide
     oversize/shift hack is disabled here so the starting frame is exactly
     the full photo; the standard hero-zoom animation is kept for the same
     slow parallax-style motion every other hero photo has. */
  /* Loan Services set the standard here; see .photo-hero-tall above. */
}
@media (min-width: 681px) {
  .photo-hero-bg { transform-origin: center center; }
  .photo-hero-bg:has(img[src*="brooklyn-ph"]) { transform-origin: center 55%; }
}
@media (max-width: 680px) {
  /* All page-hero photo banners: show the full photo above the text
     instead of cropping it as a background — nothing in the image
     gets cut off or covered by the headline. */
  .page-hero.photo-hero-tall { aspect-ratio: unset; min-height: 0; padding: 0; }
  .photo-hero-tall .photo-hero-bg { position: static; }
  .photo-hero-tall .photo-hero-bg img { position: static; width: 100%; height: auto; object-fit: initial; object-position: initial; }
  .photo-hero-tall .photo-hero-bg img[src*="couple-hero"] { aspect-ratio: 2128 / 912; object-fit: cover; object-position: 85% top; }
  .photo-hero-tall .photo-hero-bg::after { content: none; }
  .photo-hero-tall .photo-hero-bg .hero-video { position: static; display: block; height: auto; aspect-ratio: 16 / 9; }
  .photo-hero-tall .wrap { padding-top: 32px; padding-bottom: 48px; }
}
@media (min-width: 681px) {
  .photo-hero-tall .wrap { position: relative; }
  .photo-hero-tall .hero-lic-block { margin-top: 26px; }
  .photo-hero-tall .hero-lic-badges { margin-bottom: 14px; }
  .photo-hero-tall .hero-lic { line-height: 1.7; }
  .photo-hero-tall .hero-lic-block + .btn-row { margin-top: 24px !important; }
  .photo-hero-tall .hero-lic { margin-top: 0; }
}
.photo-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(18, 16, 13, 0.93) 0%, rgba(18, 16, 13, 0.82) 55%, rgba(18, 16, 13, 0.55) 100%);
}
.analysis-banner .photo-hero-bg::after {
  background: linear-gradient(100deg, rgba(18, 16, 13, 0.93) 0%, rgba(18, 16, 13, 0.85) 45%, rgba(18, 16, 13, 0.45) 65%, rgba(18, 16, 13, 0.05) 100%);
}
.photo-hero-tall .photo-hero-bg::after {
  background: linear-gradient(100deg, rgba(18, 16, 13, 0.92) 0%, rgba(18, 16, 13, 0.8) 32%, rgba(18, 16, 13, 0.35) 48%, rgba(18, 16, 13, 0) 60%);
}
.photo-hero-bg:has(img[src*="glossary-hero"])::after {
  background: linear-gradient(100deg, rgba(18, 16, 13, 0.78) 0%, rgba(18, 16, 13, 0.65) 35%, rgba(18, 16, 13, 0.3) 50%, rgba(18, 16, 13, 0) 62%);
}
.photo-hero .wrap, .analysis-banner .wrap { position: relative; z-index: 2; will-change: transform, opacity; }

/* ---------- Analysis banner ---------- */
.analysis-banner {
  background: linear-gradient(120deg, var(--dark) 0%, var(--dark-2) 100%);
  color: var(--cream); padding: 84px 0;
}
.analysis-banner h2 { color: #fff; margin-bottom: 18px; }
.analysis-banner .kicker { color: #E4CE9F; }
.analysis-banner .lede { color: rgba(247, 244, 237, 0.9); margin-bottom: 32px; max-width: 720px; }
.analysis-banner .btn-row { flex-wrap: nowrap; }
.analysis-banner .btn-calc {
  padding: 15.5px 32.5px; font-size: 0.92rem;
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.analysis-banner .btn-calc:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ---------- Dark CTA ---------- */
.cta-dark { background: var(--dark); color: var(--cream); text-align: center; }
.cta-dark h2 { color: #fff; }
.cta-dark .lede { color: rgba(243,239,231,0.8); margin: 18px auto 34px; }
.cta-dark .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: var(--cream-soft); padding: 70px 0 40px; border-top: 1px solid var(--dark-2); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; gap: 36px; margin-bottom: 48px; }
.site-footer h4, .site-footer .footer-h {
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; margin-bottom: 18px;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; font-size: 0.92rem; }
.site-footer a {
  color: var(--cream-soft); display: inline-block;
  padding: 4px 12px; margin: -4px -12px;
  border-radius: 999px; border: 1px solid transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.site-footer a:hover { color: #fff; background: #000; border-color: #fff; }
.footer-brand .name { font-family: var(--serif); font-size: 1.5rem; color: #fff; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; display: block; }
.footer-brand .tag { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.62em; text-transform: uppercase; color: #E4CE9F; display: block; margin: 3px 0 16px; }
.footer-brand p { font-size: 0.92rem; }
.footer-mark { height: 110px; width: auto; display: block; margin-bottom: 14px; }
.footer-title { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #E4CE9F; display: block; margin: 4px 0 16px; }
/* Contact column: one email per side of the business, each under a small gold label. */
.footer-contact li { margin-bottom: 18px; }
.footer-contact-label {
  display: block; margin-bottom: 6px;
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #E4CE9F;
}
.footer-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; margin: 22px 0 6px; }
.footer-logos img, .footer-logos a { flex: 0 0 auto; }
.footer-logos img { height: 30px; width: auto; opacity: 0.95; }
.footer-logos img.eho { height: 42px; }
.footer-logos img.nmls { height: 38px; }
.footer-logos img.csr { height: 34px; }
/* Design credit: the one place on a mortgage site that sells her design practice,
   so it sits above the legal fine print rather than inside it. */
.design-credit {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin: 8px 0 30px; padding: 22px 26px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}
.design-credit-mark { width: 62px; height: 62px; flex: 0 0 auto; object-fit: contain; }
.design-credit p { flex: 1 1 320px; margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--cream); }
.design-credit p strong { color: #fff; }
.design-credit .btn { flex: 0 0 auto; padding: 10px 18px; font-size: 0.92rem; white-space: nowrap; }
/* .site-footer a would otherwise repaint this cream-on-cream. */
.site-footer .design-credit .btn { color: var(--ink); margin: 0; border-color: transparent; }
.site-footer .design-credit .btn:hover { color: var(--ink); background: #fff; border-color: transparent; }
@media (max-width: 680px) {
  .design-credit { gap: 16px; padding: 20px; }
  .design-credit-mark { width: 52px; height: 52px; }
  .design-credit p { flex-basis: 100%; font-size: 0.92rem; }
  .design-credit .btn { width: 100%; text-align: center; }
}
.compliance .license-line {
  font-size: 1.02rem; color: var(--cream); line-height: 1.8; margin-bottom: 18px;
}
.compliance .license-line strong {
  color: #fff; font-family: var(--serif); font-size: 1.3rem; letter-spacing: 0.04em;
}
.compliance .license-line .lic {
  color: #E4CE9F; font-weight: 700; letter-spacing: 0.05em;
}
.compliance {
  position: relative; padding-top: 30px;
  font-size: 0.92rem; line-height: 1.75; color: #C6C0B2;
}
.compliance::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 600px; max-width: 100%; height: 1px; background: var(--dark-2);
}
.compliance p { margin-bottom: 10px; }
.compliance .replace { color: #E4CE9F; }

/* ---------- Inner-page hero ---------- */
.page-hero { background: var(--dark); color: var(--cream); padding: 90px 0 70px; }
/* These heroes carry a full-size logo and portrait, so they run tighter top and bottom. */
.page-hero.photo-hero-tall { padding-top: 72px; padding-bottom: 36px; }
.page-hero h1 { color: #fff; font-size: clamp(2.4rem, 4.5vw, 3.6rem); }
.page-hero .lede { color: rgba(243,239,231,0.85); margin-top: 16px; }
.photo-hero-tall .lede { max-width: 440px; }
.page-hero .kicker { color: #E4CE9F; }
.hero-lic-block { margin-top: 40px; }
.hero-lic-badges { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
.hero-lic-logo { display: block; height: 224px; width: auto; margin-bottom: 0; }
.hero-lic-photo-frame {
  display: block; height: 224px; width: 224px; margin-bottom: 0;
  border-radius: 0; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.hero-lic-photo {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
}
.hero-lic {
  display: block; margin-top: 20px; font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; line-height: 1.8;
  color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  text-wrap: pretty;
}
.hero-lic-block .hero-lic { margin-top: 0; }
.hero-lic.article-lic {
  color: var(--ink-faint); text-shadow: none; text-transform: none;
  letter-spacing: 0.04em; font-weight: 600; margin: -8px 0 20px;
}
.lic-sep { display: none; }
.hero-lic-title { display: block; }

/* ---------- Glossary primer ---------- */
.primer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.primer-card {
  background: var(--card); border: 2px solid var(--brass); border-radius: var(--radius);
  padding: 28px 26px;
}
.primer-card h3 { font-size: 1.55rem; margin-bottom: 6px; font-weight: 700; }
.primer-card > p { font-size: 0.93rem; color: var(--ink-soft); margin-bottom: 14px; min-height: 44px; }
.facts { list-style: none; margin-bottom: 16px; }
.facts li {
  font-size: 0.92rem; color: var(--ink); padding: 7px 0;
  border-bottom: 1px dashed var(--line); line-height: 1.45;
}
.facts li span {
  display: block; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brass-dark);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; font-size: 0.92rem; font-weight: 700; cursor: pointer;
  background: var(--brass-tint); color: var(--brass-dark);
  padding: 5px 13px; border-radius: 999px; transition: background 0.15s, color 0.15s;
}
.chip:hover { background: var(--brass); color: #fff; }
.chip-tooltip {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(4px);
  width: max-content; max-width: min(280px, calc(100vw - 48px));
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); padding: 12px 14px;
  font-size: 0.92rem; font-weight: 400; line-height: 1.5; text-align: left;
  letter-spacing: normal; text-transform: none; white-space: normal;
  opacity: 0; pointer-events: none; z-index: 300;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.chip-tooltip::after {
  content: ""; position: absolute; top: 100%; left: calc(50% - var(--tip-shift, 0px)); transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--card);
}
.chip:hover .chip-tooltip, .chip:focus-within .chip-tooltip, .chip.open .chip-tooltip {
  opacity: 1; pointer-events: auto; transform: translateX(calc(-50% + var(--tip-shift, 0px))) translateY(0);
}
.chip-tooltip-link {
  display: block; margin-top: 8px; font-size: 0.92rem; font-weight: 700; color: var(--brass-dark);
}
.chip-tooltip-link:hover { color: var(--brass); }
.cat-pills {
  position: sticky; top: calc(var(--nav-h) + 1px); z-index: 91;
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px;
  margin: 0; padding: 14px 2px;
  background: var(--bg-alt);
}
.cat-pills .pill {
  flex: 0 0 auto; line-height: 1;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 600; cursor: pointer;
  background: var(--card); color: var(--ink-soft); border: 1px solid var(--line);
  padding: 10px 20px; border-radius: 999px; transition: all 0.15s;
}
.cat-pills .pill:hover { border-color: var(--brass); color: var(--brass-dark); }
.cat-pills .pill.on { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.term-card:hover, .primer-card:hover {
  border-color: var(--brass);
  box-shadow: 0 0 0 4px var(--brass-tint), var(--shadow);
  background: linear-gradient(0deg, rgba(133, 102, 52, 0.07), rgba(133, 102, 52, 0.07)), var(--card);
  transform: translateY(-4px);
  transition: all 0.2s ease;
}
.term-card.focused, .primer-card.focused {
  border-color: var(--brass);
  box-shadow: 0 0 0 4px var(--brass-tint), var(--shadow);
  background: linear-gradient(0deg, rgba(133, 102, 52, 0.05), rgba(133, 102, 52, 0.05)), var(--card);
  animation: focus-pulse 1.6s ease 2;
}
@keyframes focus-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--brass-tint), var(--shadow); }
  50% { box-shadow: 0 0 0 9px var(--brass-tint), var(--shadow); }
}
.term-card mark { background: #F3E3B8; color: var(--ink); padding: 0 2px; border-radius: 3px; }
.term-aka { font-size: 0.92rem; color: var(--ink-faint); margin-top: 8px; }
.term-aka span { font-weight: 600; color: var(--brass-dark); }
.term-ex {
  margin-top: 12px; padding: 14px 18px; font-size: 0.92rem; line-height: 1.6;
  background: var(--bg-alt); border-left: 3px solid var(--brass); border-radius: 8px;
  color: var(--ink-soft);
}
.term-ex strong { color: var(--brass-dark); }
#glossary-go { padding: 13px 28px; }
@media (max-width: 980px) { .primer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .primer-grid { grid-template-columns: 1fr; } }

/* ---------- Glossary ---------- */
.glossary-controls { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.glossary-controls input, .glossary-controls select {
  padding: 13px 16px; font-size: 0.95rem; font-family: var(--sans);
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink);
}
.glossary-controls input { flex: 1; min-width: 240px; }
.letter-nav {
  position: sticky; top: 149px; z-index: 90;
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
  margin: 0 0 40px; padding: 14px 2px;
  background: var(--bg-alt); border-bottom: 1px solid var(--line);
}
.letter-nav a {
  flex: 0 0 auto;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px; font-size: 0.92rem; font-weight: 600;
  color: var(--ink-soft); background: var(--card);
}
.letter-nav a.on:hover { border-color: var(--brass); color: var(--brass-dark); }
.letter-nav a.off { opacity: 0.3; pointer-events: none; }
.glossary-letter, .term-card { scroll-margin-top: calc(var(--nav-h) + 129px); }
.glossary-letter { font-family: var(--serif); font-size: 2.2rem; color: var(--brass); border-bottom: 1px solid var(--line); margin: 44px 0 20px; padding-bottom: 6px; }
.term-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 26px; margin-bottom: 14px; }
.term-card h3 { font-size: 1.25rem; display: inline; }
.term-card .cat-pill {
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass-dark); background: var(--brass-tint); border-radius: 20px; padding: 3px 10px;
  margin-left: 10px; vertical-align: middle; white-space: nowrap;
}
.term-card p { color: var(--ink-soft); font-size: 0.95rem; margin-top: 8px; }

/* ---------- Guides ---------- */
.guide-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; overflow: hidden; }
.guide-head { width: 100%; background: none; border: 0; text-align: left; cursor: pointer; padding: 28px 60px 28px 30px; position: relative; }
.guide-head h3 { font-size: 1.45rem; margin-bottom: 4px; }
.guide-head .sub { color: var(--ink-soft); font-size: 0.93rem; font-family: var(--sans); text-wrap: balance; }
.guide-head .cat-pill {
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brass-dark); background: var(--brass-tint); border-radius: 20px; padding: 3px 10px;
  display: inline-block; margin-bottom: 10px; font-family: var(--sans);
}
.guide-head::after {
  content: "+"; position: absolute; right: 28px; top: 34px;
  font-size: 1.5rem; color: var(--brass); transition: transform 0.25s;
}
.guide-card.open .guide-head::after { transform: rotate(45deg); }
.guide-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.guide-body-inner { padding: 0 30px 30px; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.7; }
.guide-body h3 { font-size: 1.35rem; margin: 24px 0 10px; color: var(--ink); }
.guide-body ul, .guide-body ol { padding-left: 22px; margin: 8px 0; }
.guide-body li { margin-bottom: 8px; }
.guide-body p { margin-bottom: 12px; }

/* ---------- Blog ---------- */
.post-list .post-row {
  display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 22px; color: inherit; transition: transform 0.2s, box-shadow 0.2s;
}
.post-list .post-row:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.post-row .thumb { height: 100%; min-height: 200px; overflow: hidden; }
.post-row .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.thumb img[src*="ladera"] { object-position: center 80%; transform-origin: center bottom; transform: scale(1.5); }
.post-list .post-row:hover .thumb img { transform: scale(1.07); }
.post-list .post-row:hover .thumb img[src*="ladera"] { transform: scale(1.6); }
.post-row .body { padding: 26px 30px 26px 0; }
.post-row .meta { font-size: 0.92rem; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; text-wrap: balance; }
.post-row h3 { font-size: 1.55rem; font-weight: 700; margin: 8px 0; }
.post-row p { color: var(--ink-soft); font-size: 0.95rem; text-wrap: pretty; }

/* Article pages */
.article { max-width: 760px; margin: 0 auto; }
.article .meta { font-size: 0.92rem; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; text-wrap: pretty; }
.article h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 24px; }
.article h2 { font-size: 1.7rem; margin: 36px 0 14px; }
.article p { color: var(--ink-soft); margin-bottom: 16px; }
.article ul, .article ol { padding-left: 24px; color: var(--ink-soft); margin-bottom: 16px; }
.article li { margin-bottom: 8px; }
.article .hero-img { border-radius: var(--radius); overflow: hidden; margin-bottom: 34px; }
.article .hero-img img { width: 100%; height: auto; will-change: transform; }

.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.before-after figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.before-after img { width: 100%; height: 100%; object-fit: cover; }
.before-after figcaption {
  position: absolute; top: 12px; left: 12px; padding: 5px 12px;
  font-size: 0.92rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(20, 18, 14, 0.55); border-radius: 100px;
  backdrop-filter: blur(2px);
}
.article .caption { font-size: 0.92rem; color: var(--ink-faint); margin-top: -6px; margin-bottom: 26px; text-wrap: pretty; }
@media (max-width: 560px) {
  .before-after { grid-template-columns: 1fr; }
}

/* ---------- Loan Analysis quiz ---------- */
.quiz-shell {
  max-width: 780px; margin: 0 auto; border-radius: var(--radius); overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--brass);
  box-shadow: 0 22px 60px rgba(31, 29, 26, 0.12); padding: 46px 50px 50px;
}
.quiz-progress { display: flex; gap: 8px; margin-bottom: 30px; }
.quiz-progress .dot { width: 34px; height: 4px; background: var(--line); transition: background 0.3s; }
.quiz-progress .dot.done { background: var(--brass); }
.quiz-progress .dot.now { background: var(--ink); }
.quiz-count { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-dark); margin-bottom: 10px; }
.quiz-q { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 26px; }
.quiz-q em { color: var(--brass-dark); }
.quiz-opts { display: grid; gap: 12px; }
.quiz-opt {
  text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 22px; cursor: pointer; font-family: var(--sans);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
@media (hover: hover) { .quiz-opt:hover { border-color: var(--brass); background: var(--brass-tint); transform: translateX(4px); } }
.quiz-opt.picked { border-color: var(--brass); background: var(--brass-tint); }
.quiz-opt strong { display: block; font-size: 1.02rem; color: var(--ink); }
.quiz-opt span { display: block; font-size: 0.92rem; color: var(--ink-faint); margin-top: 3px; }
.quiz-back { background: none; border: 0; color: var(--brass-dark); font-weight: 600; font-size: 0.92rem; cursor: pointer; margin-top: 22px; padding: 4px 0; }
.quiz-recap { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin-bottom: 24px; }
.quiz-recap-label { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-dark); margin-bottom: 10px; }
.quiz-recap-list { display: grid; gap: 8px; }
.quiz-recap-list li { display: flex; justify-content: space-between; gap: 16px; font-size: 0.92rem; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.quiz-recap-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.quiz-recap-list li span { color: var(--ink-faint); }
.quiz-why { color: var(--ink-soft); margin-bottom: 14px; font-size: 1.05rem; }
.quiz-power {
  background: var(--bg-alt); border-left: 3px solid var(--brass); border-radius: 10px;
  padding: 18px 22px; margin: 18px 0;
}
.quiz-power span { display: block; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-dark); }
.quiz-power strong { display: block; font-family: var(--serif); font-size: 1.9rem; color: var(--ink); margin: 4px 0; }
.quiz-power em { display: block; font-size: 0.92rem; color: var(--ink-faint); font-style: normal; line-height: 1.5; }
.quiz-alt { color: var(--ink-faint); font-size: 0.92rem; margin-bottom: 8px; }
.quiz-h3 { font-family: var(--serif); font-size: 1.3rem; margin: 26px 0 12px; }
.quiz-steps-list { padding-left: 22px; color: var(--ink-soft); }
.quiz-steps-list li { margin-bottom: 8px; }
.quiz-tools { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
.quiz-tools a { font-weight: 600; font-size: 0.92rem; }
.prequal {
  margin-top: 30px; padding: 28px; background: var(--brass-tint); border-radius: 12px;
  border-left: 3px solid var(--brass);
}
.prequal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 18px; }
.prequal-grid input {
  padding: 13px 14px; font-size: 0.98rem; font-family: var(--sans);
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.prequal-grid input:focus { outline: 2px solid var(--brass); }
@media (max-width: 680px) { .quiz-shell { padding: 30px 22px 36px; } .prequal-grid { grid-template-columns: 1fr; } }

/* ---------- Calculator lead capture ---------- */
.calc-panel-body > .calc-note, .calc-panel-body > .calc-lead { grid-column: 1 / -1; }
.calc-panel-body > .calc-note { margin-top: 4px; }
.calc-lead { margin-top: 28px; }
.calc-lead .lc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.prequal .pq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lc-consent-row { align-items: flex-start; font-weight: 400; font-size: 0.92rem; line-height: 1.5; gap: 10px; margin: 14px 0; }
.lc-consent-row input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.lc-note.error { color: #A23B3B; }
.lc-note.success { color: #3F6B37; font-weight: 600; }
.calc-lead .lc-submit[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- Split-word headline entrance ---------- */
.split-headline .w { display: inline-block; opacity: 0; transform: translateX(-16px); }
.reveal.visible .split-headline .w,
.reveal.visible.split-headline .w {
  opacity: 1; transform: none;
  transition: opacity 0.6s cubic-bezier(0.22,0.7,0.3,1), transform 0.6s cubic-bezier(0.22,0.7,0.3,1);
  transition-delay: var(--stagger, 0s);
}
.hero .split-headline .w,
.page-hero .split-headline .w {
  animation: wordIn 0.6s cubic-bezier(0.22,0.7,0.3,1) both;
  animation-delay: calc(var(--stagger, 0s) + 0.15s);
}
@keyframes wordIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .split-headline .w { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ---------- Path to Closing steps ---------- */
.path-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.path-rail {
  grid-column: 1 / -1; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  margin-bottom: 4px;
}
.path-rail::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 50%;
  height: 2px; background: rgba(243, 239, 231, 0.25); transform: translateY(-50%); z-index: 0;
}
.bg-alt .path-rail::before {
  background: var(--line);
}
.path-dot {
  position: relative; z-index: 1; width: 54px; height: 54px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--brass); color: var(--cream);
  font-family: var(--serif); font-weight: 700; font-size: 1.2rem;
  box-shadow: var(--shadow);
}
.path-step {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 28px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.path-step .step-label {
  display: block; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brass); margin-bottom: 14px;
}
.path-step h3 { margin-bottom: 12px; }
.path-step p { color: var(--ink-soft); font-size: 0.97rem; }
/* Pin the Apply Now link to the same bottom edge across every card in the
   row, regardless of how much text sits above it in each one. */
.path-step .card-link { margin-top: auto; padding-top: 16px; }
.path-steps .path-step:nth-child(2) { transition-delay: 0s; }
.path-steps .path-step:nth-child(3) { transition-delay: 0.12s; }
.path-steps .path-step:nth-child(4) { transition-delay: 0.24s; }
.path-steps .path-step:nth-child(5) { transition-delay: 0.36s; }
.path-recap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.path-recap-label {
  text-align: center; font-weight: 700; font-size: 0.95rem; color: var(--ink);
}
.path-details { margin-top: 28px; text-align: center; }
.path-details-summary {
  cursor: pointer; list-style: none; user-select: none;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 0.92rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-dark);
}
.path-details-summary::-webkit-details-marker { display: none; }
/* Hairline plus: two 1px drafting lines (not a text glyph), like the marks beside the hero disciplines. */
.path-details-summary::before {
  content: ""; flex-shrink: 0; width: 16px; height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 16px no-repeat;
  transition: transform 0.3s ease;
}
.path-details-summary:hover::before { transform: rotate(90deg); }
.path-details[open] .path-details-summary::before {
  background: linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat;
}
.path-details-summary:hover { color: var(--brass); }
.path-steps-details { margin-top: 30px; text-align: left; }
.engagement-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 48px; margin-top: 8px; }
.engagement-track p { color: var(--ink-soft); margin: 14px 0 24px; }
.engagement-track ul { padding-left: 20px; margin: 4px 0 20px; }
.engagement-track ul li { margin-bottom: 10px; color: var(--ink-soft); }
.engage-steps { display: grid; gap: 16px; margin-bottom: 20px; }
/* Flat-grid variant: intro copy, then each Step N pair, then each closing
   link, all placed directly as siblings in the same 2-column grid as
   .engagement-tracks -- so a row's height matches its taller cell instead of
   two independently-flowing columns drifting out of alignment. */
.engagement-track-intro p { color: var(--ink-soft); margin: 14px 0 0; }
.engagement-tracks > .card-link { align-self: start; }
@media (max-width: 980px) {
  .engagement-tracks { grid-template-columns: 1fr; gap: 40px; }
  /* Regroup the flat 2-column grid back into two complete, coherent blocks
     once stacked to one column -- otherwise the two tracks' rows would
     interleave in DOM order (intro A, intro B, step 1 A, step 1 B, ...). */
  .engagement-tracks > :nth-child(1) { order: 1; }
  .engagement-tracks > :nth-child(3) { order: 2; }
  .engagement-tracks > :nth-child(5) { order: 3; }
  .engagement-tracks > :nth-child(7) { order: 4; }
  .engagement-tracks > :nth-child(9) { order: 5; }
  .engagement-tracks > :nth-child(2) { order: 6; }
  .engagement-tracks > :nth-child(4) { order: 7; }
  .engagement-tracks > :nth-child(6) { order: 8; }
  .engagement-tracks > :nth-child(8) { order: 9; }
  .engagement-tracks > :nth-child(10) { order: 10; }
}
@media (max-width: 980px) {
  .path-steps { grid-template-columns: 1fr 1fr; }
  .path-steps .path-rail { display: none; }
}
@media (max-width: 680px) {
  .path-steps { grid-template-columns: 1fr; }
  .path-recap { gap: 10px; }
  .path-recap .path-dot { width: 40px; height: 40px; font-size: 1rem; }
  .path-recap-label { font-size: 0.92rem; line-height: 1.25; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .pillars, .help-grid, .resource-grid { grid-template-columns: 1fr 1fr; }
  .programs-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-sidebar, .about-text { grid-column: 1; grid-row: auto; }
  .about-sidebar { max-width: 420px; margin-top: 0; }
  .calc-panel-body { grid-template-columns: 1fr; }
  .tax-stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: 4px 24px 14px; gap: 0;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  /* Compact menu: each link is one slim row with a hairline divider, no big gaps. */
  .nav-links > li { border-bottom: 1px solid var(--line); }
  .nav-links > li:last-child { border-bottom: 0; padding-top: 10px; }
  .nav-links > li > a:not(.btn), .nav-links .nav-dropdown-toggle { display: flex; padding: 10px 0; font-size: 1.05rem; line-height: 1.3; }
  .nav-links a:not(.btn)::after, .nav-links .nav-dropdown-toggle::after { display: none; }
  .nav-links a.active:not(.btn) { color: var(--brass-dark); font-weight: 600; }
  .nav-links .btn { display: block; text-align: center; padding: 10px 20px; line-height: 1.3; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .site-header .nav-links.open a:not(.btn) { color: var(--ink-soft); }
  .site-header .nav-links.open .nav-dropdown-toggle { color: var(--ink-soft); }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: 0 0 4px; }
  .nav-dropdown-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    display: none; margin: 10px 0 0; padding: 0 0 0 16px;
    background: none; border: 0; box-shadow: none;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
  .nav-dropdown-menu a { padding: 0; }
  .nav-dropdown-menu a.nav-sub { padding-left: 16px; }
}
@media (max-width: 680px) {
  .section { padding: 64px 0; }
  .pillars, .help-grid, .resource-grid, .programs-grid { grid-template-columns: 1fr; }
  #equity .help-grid { grid-template-columns: 1fr; }
  .post-list .post-row { grid-template-columns: 1fr; }
  .post-row .body { padding: 0 26px 26px; }
  /* Phone hero, top to bottom: the dining room as a wide band under a slim header, then
     Ariane's logo and portrait stacked on the left with her name and titles to the right,
     then the headline, paragraph and buttons — all on the navy panel. The header's logo
     and portrait are hidden on phones because they live here instead. */
  :root { --nav-h: 64px; }
  .nav { padding-top: 0; }
  .site-header.over-hero .nav-brand { display: none; }
  .hero { display: flex; flex-direction: column; align-items: stretch; min-height: 0; margin-top: calc(-1 * var(--nav-h) - 6px); padding: 0 0 48px; background: var(--dark); }
  /* .wrap and .hero-inner become transparent so the identity row can sit above the photo band */
  .hero .wrap, .hero-inner { display: contents; }
  .hero-inner > * { margin-left: 24px; margin-right: 24px; }
  .hero-identity { order: -1; }
  /* Headline leads, right under the menu bar, ahead of the logo-and-disciplines row */
  .hero-inner .split-headline.hero-lead { order: -2; margin: 0; padding: calc(var(--nav-h) + 18px) 24px 0; background: var(--dark); }
  .hero-inner .split-headline.hero-lead + .hero-identity { padding-top: 18px; }
  .hero-bg { order: 0; display: block; position: relative; inset: auto; height: auto; aspect-ratio: 16 / 10; margin: 0; }
  .hero-inner .split-headline { order: 1; margin: 22px 24px 0; }
  .hero-inner .lede { order: 2; }
  .hero-inner .btn-row { order: 3; }
  .hero-bg img { top: -15%; height: 130%; object-position: 40% center; }
  .photo-hero-bg img { top: -15%; height: 130%; }
  .hero-bg::after { display: none; }
  .hero-identity { display: flex; align-items: center; gap: 20px; margin: 0; padding: calc(var(--nav-h) + 14px) 24px 22px; background: var(--dark); }
  .hero-identity-media { display: flex; flex-direction: row; gap: 10px; flex: 0 0 auto; }
  .hero-logo { display: block; height: 104px; width: auto; }
  .hero-portrait { display: block; width: 80px; height: 80px; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.55); }
  .hero-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .hero-identity-text { min-width: 0; }
  .hero-name { display: none; }
  .hero-disciplines li { font-size: 0.88rem; letter-spacing: 0.06em; line-height: 1.3; margin-bottom: 7px; white-space: normal; padding-left: 24px; }
  .hero-disciplines li::before { width: 12px; top: 0.62em; }
  .hero-creds { font-size: 0.92rem; letter-spacing: 0.05em; line-height: 1.45; margin-bottom: 4px; }
  .hero-creds:last-of-type { margin-bottom: 0; }
  /* Too narrow for role and licence on one line, so drop the licence to its own line
     rather than let the separator dangle at the end of the first one. */
  .hero-creds .sep { display: none; }
  .hero-creds .org { display: block; }
  .hero h1 { font-size: 2.5rem; }
}
/* Very narrow phones (iPhone SE and similar): the words drop beneath the headshot-and-logo pair. */
@media (max-width: 360px) {
  .hero-identity { flex-wrap: wrap; gap: 12px 14px; }
  .hero-identity-text { flex: 1 1 100%; }
}

/* ---------- Mobile readiness (2026-09-14 audit) ---------- */
/* Off-screen decor (hidden term tooltips, zoomed hero photos) must never let the page scroll sideways.
   `clip` rather than `hidden` so the sticky glossary bars and header keep working. */
html, body { overflow-x: clip; }

@media (max-width: 1100px) {
  /* Hamburger: 44px tap target without shifting the layout */
  .nav-toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; margin-right: -10px; }
  /* Open menu: every row starts at the same left edge; the two buttons span the full width */
  .nav-links { align-items: stretch; }
  .nav-links li { width: 100%; }
  .nav-links a:not(.btn) { display: inline-block; }
  .nav-links .nav-search-toggle { padding: 8px 12px; margin: 0 0 0 -12px; }
  .site-header .nav-links.open .nav-search-toggle { color: var(--ink-soft); }
  .nav-links .btn { display: block; text-align: center; }
}

@media (max-width: 680px) {
  /* iPhones zoom the page when a focused field is under 16px */
  .calc-fields input, .calc-fields select,
  .glossary-controls input, .glossary-controls select,
  .prequal-grid input, .calc-lead input:not([type="checkbox"]),
  .search-input-row input { font-size: 16px; }

  /* Hero: shorter paragraph so the buttons land on the first screen */
  .hero .lede { font-size: 1.05rem; margin: 14px 24px 22px; }

  /* Buttons: slightly tighter so labels like "Browse All Loan Programs →" fit on one line */
  .btn { padding: 11px 20px; letter-spacing: 0.08em; }

  /* Calculators: fields were 41px wider than their column and ran into the card edge */
  .calc-panel { padding: 28px 20px; }
  .calc-panel-body { gap: 28px; }
  .calc-panel-body > * { min-width: 0; }
  .slider-row input[type="number"], .slider-row .num-affix { flex: 0 0 112px; width: 112px; }
  .calc-result table, .amort-wrap table { display: block; overflow-x: auto; }
  .cm-compare table { display: table; font-size: 0.8rem; }
  .cm-compare th, .cm-compare td { padding: 7px 5px; }

  /* Tap targets */
  .letter-nav { gap: 8px; }
  .letter-nav a { width: 40px; height: 40px; }
  .glossary-letter, .term-card { scroll-margin-top: 219px; }
  .chip { padding: 8px 14px; }
  .card-link { padding: 8px 0; margin-top: 4px; }
}

/* ---------- Design services page ---------- */
/* This hero's photo is 1800x1201 — much squarer than the 2128x912 banners the other
   heroes use — so at the shared 730px height most of the room was being cropped away.
   Matching the photo's own proportion shows it nearly whole, capped so it cannot
   swallow a large screen. */
#design-hero .photo-hero-bg img { object-position: center 55%; }

/* The page is carried by photographs, so the sections sit tighter than the site default. */
.page-design .section { padding: 54px 0; }
.page-design .section-head { margin-bottom: 30px; }
.page-design .section-head p { margin-top: 12px; }
.page-design .film-band { padding-top: 40px; padding-bottom: 20px; }
.page-design #portfolio { padding-top: 34px; }
.page-design .design-disclosure { margin-top: 26px; }
/* Portfolio tiles: image-led, title over the photo, the way her own portfolio reads. */
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.portfolio-tile { position: relative; margin: 0; border-radius: 14px; overflow: hidden; }
.portfolio-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.portfolio-tile:hover img { transform: scale(1.06); }
.portfolio-tile figcaption {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 16px;
  background: linear-gradient(180deg, rgba(8, 27, 51, 0) 0%, rgba(8, 27, 51, 0.78) 100%);
}
/* Clean photos until you hover. Only where a pointer can hover — on a phone there
   is no hover, so the titles stay visible or the projects would have no names. */
@media (hover: hover) {
  .portfolio-tile figcaption { opacity: 0; transition: opacity 0.28s ease; }
  .portfolio-tile:hover figcaption,
  .portfolio-tile:focus-within figcaption { opacity: 1; }
}
.pt-title {
  color: #fff; font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
@media (max-width: 1100px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

.ba-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.ba-shot { position: relative; margin: 0; border-radius: 14px; overflow: hidden; }
.ba-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ba-shot figcaption { position: absolute; left: 16px; bottom: 16px; }
.ba-tag {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: rgba(8, 27, 51, 0.82); color: var(--cream);
  font-size: 0.92rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.ba-tag-after { background: var(--brass-dark); color: #fff; }
/* Interactive before/after: drag anywhere on the photo; the before shot is clipped at --pos. */
#before-after h2 em { font-style: italic; color: #E4CE9F; }
.ba-slider { position: relative; max-width: 1080px; margin: 0 auto; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 2; user-select: none; touch-action: pan-y; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
.ba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-tag-left, .ba-tag-right { position: absolute; bottom: 16px; z-index: 2; pointer-events: none; }
.ba-tag-left { left: 16px; }
.ba-tag-right { right: 16px; }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; z-index: 2; pointer-events: none; box-shadow: 0 0 12px rgba(0, 0, 0, 0.35); }
.ba-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--navy-dark);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; line-height: 1;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); border: 3px solid #E4CE9F;
}
.ba-slider input.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; z-index: 3; background: none; -webkit-appearance: none; appearance: none; }
.ba-slider input.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100vh; cursor: ew-resize; }
.ba-slider input.ba-range::-moz-range-thumb { width: 60px; height: 100vh; border: 0; cursor: ew-resize; }
.ba-slider:focus-within .ba-knob { outline: 3px solid #E4CE9F; outline-offset: 3px; }
.ba-hint { text-align: center; margin-top: 16px; color: rgba(243, 239, 231, 0.65); font-size: 0.95rem; letter-spacing: 0.04em; }
/* Portfolio tiles open a gallery. */
.portfolio-tile[data-gallery] { cursor: zoom-in; }
.portfolio-tile[data-gallery]:focus-visible,
.portfolio-tile:has(.pt-open:focus-visible) { outline: 3px solid var(--brass); outline-offset: 3px; }
/* The tile's photo sits inside a real <button> — reset it so the tile looks exactly as before */
.pt-open { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; }
.pt-open:focus-visible { outline: none; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: rgba(10, 14, 22, 0.94); opacity: 0; transition: opacity 0.25s ease; }
.lightbox.is-open { opacity: 1; }
.lightbox[hidden] { display: none; }
.lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: min(1400px, 100%); }
.lb-img { display: block; max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.lb-cap { margin-top: 14px; color: var(--cream); font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; white-space: pre; }
.lb-close, .lb-prev, .lb-next { flex: 0 0 auto; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255, 255, 255, 0.22); }
.lb-prev, .lb-next { width: 52px; height: 52px; font-size: 2.2rem; line-height: 1; padding-bottom: 4px; }
.lb-close { position: fixed; top: 18px; right: 18px; z-index: 3; width: 54px; height: 54px; font-size: 2.2rem; line-height: 1; background: rgba(10, 12, 18, 0.85) !important; border: 2px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
.lb-img { cursor: zoom-out; }
.lightbox { cursor: zoom-out; }
.lb-prev, .lb-next { cursor: pointer; }
.lightbox.lb-single .lb-prev, .lightbox.lb-single .lb-next { visibility: hidden; }
html.lb-open { overflow: hidden; }
/* Arrows stay pinned to the same spot on screen for every photo, whatever its size, so the
   hand never has to move; a generous invisible hit area around each means a near-miss still counts. */
.lb-prev, .lb-next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2; width: 60px; height: 60px; }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-prev::after, .lb-next::after { content: ""; position: absolute; inset: -60px -24px; }
.lightbox { padding-left: 108px; padding-right: 108px; }
@media (max-width: 680px) {
  .lightbox { padding: 60px 8px 24px; gap: 4px; }
  .lightbox { padding-left: 52px; padding-right: 52px; }
  .lb-prev, .lb-next { width: 42px; height: 42px; font-size: 1.8rem; }
  .lb-prev { left: 6px; } .lb-next { right: 6px; }
  .lb-prev::after, .lb-next::after { inset: -50px -6px; }
  .ba-knob { width: 44px; height: 44px; font-size: 1.2rem; }
  .ba-tag-left, .ba-tag-right { bottom: 10px; }
  .ba-tag-left { left: 10px; } .ba-tag-right { right: 10px; }
}

.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.work-shot { margin: 0; border-radius: 14px; overflow: hidden; }
.work-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.work-shot:hover img { transform: scale(1.05); }
.work-wide { grid-column: span 2; }
.work-wide img { aspect-ratio: 16 / 9; }

.design-disclosure {
  max-width: 800px; margin: 36px auto 0; text-align: center;
  font-size: 0.92rem; line-height: 1.7; color: var(--ink-soft);
}

@media (max-width: 900px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .ba-pair { grid-template-columns: 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .work-wide { grid-column: auto; }
  .work-wide img { aspect-ratio: 4 / 3; }
}

/* ---------- Featured film (design services) ---------- */
/* Plays inline in the page, held narrower than the text column so it reads as a
   piece of work rather than a full-bleed banner. Tighter above than a normal
   section, so it sits close under the hero. */
.film-band { padding-top: 46px; }
.film-band .section-head { margin-bottom: 30px; }
.film-frame { position: relative; max-width: 820px; margin: 0 auto; border-radius: 16px; overflow: hidden; line-height: 0; }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.film-sound {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--navy);
  font-family: var(--sans); font-size: 0.92rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); transition: background 0.2s ease, transform 0.2s ease;
}
.film-sound:hover { background: #fff; transform: translateY(-1px); }
.film-sound.is-on { background: var(--navy); color: var(--cream); }
@media (max-width: 680px) {
  .film-sound { top: 10px; right: 10px; padding: 8px 13px; font-size: 0.92rem; }
}

/* ---------- Web design page ---------- */
/* Hero: text and portrait on the left, this site's own homepage in a browser frame on the
   right — the one sample shown publicly, since client sites are not advertised. */
.web-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
#web-hero { padding-top: 44px; }
.web-kicker { display: block; font-family: var(--sans); font-style: normal; font-weight: 700; text-transform: uppercase; color: #E4CE9F; font-size: 0.95rem; letter-spacing: 0.3em; margin-bottom: 18px; }
.page-hero h1.web-lead { font-size: clamp(2.4rem, 3.7vw, 3.7rem); line-height: 1.08; margin-bottom: 22px; }
@media (min-width: 981px) { .page-hero h1.web-lead { white-space: nowrap; } }
.web-lead em { font-style: italic; color: #E4CE9F; }
.browser-mock { margin: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.browser-bar { display: flex; gap: 7px; padding: 11px 14px; background: #ECE8E0; }
.browser-bar span { width: 11px; height: 11px; border-radius: 50%; background: #CFC8BB; }
.browser-mock img { display: block; width: 100%; height: auto; }
.browser-mock figcaption {
  padding: 12px 16px; background: var(--dark-2); color: var(--cream-soft);
  font-size: 0.92rem; letter-spacing: 0.04em; text-align: center;
}
.bg-dark .design-disclosure { color: rgba(243, 239, 231, 0.62); }
@media (max-width: 980px) {
  .web-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Moving blue background: "Whatever your situation" ---------- */
/* Soft blurred blue glows that drift, plus fine wavy lines flowing slowly across the
   lower left, in the site's blue. Sits behind the cards; pauses for reduced motion. */
.path-fx { position: relative; overflow: hidden; isolation: isolate; }
.path-fx > .wrap { position: relative; z-index: 1; }
.path-fx-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.path-fx-glow {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55;
  will-change: transform;
}
.path-fx-glow.g1 {
  width: 520px; height: 420px; left: -160px; top: -120px;
  background: radial-gradient(circle at 40% 40%, #6f8ff0 0%, #9fc3ff 45%, rgba(159,195,255,0) 72%);
  animation: path-glow-a 18s ease-in-out infinite alternate;
}
.path-fx-glow.g2 {
  width: 460px; height: 380px; right: -140px; bottom: -140px;
  background: radial-gradient(circle at 60% 60%, #2c5b9e 0%, #7fa6e6 45%, rgba(127,166,230,0) 72%);
  opacity: 0.35;
  animation: path-glow-b 22s ease-in-out infinite alternate;
}
@keyframes path-glow-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes path-glow-b { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-110px, -60px) scale(0.95); } }
/* Live silk ribbons across the whole section (js/silk-waves.js), soft blue on the light background. */
.silk-canvas.silk-light { color: #2c5b9e; opacity: 0.17; }
/* From today to closing day: Ariane's Arapaho floor plan, traced from her CAD export, drawn in white
   behind the steps. The SVG animates itself (lines draw in, hold, fade, redraw every 16s). */
.bp-host { position: relative; overflow: hidden; isolation: isolate; }
.bp-host > .wrap { position: relative; z-index: 1; }
.bp-sheet {
  position: absolute; z-index: 0; pointer-events: none; inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255,255,255,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
/* One copy of the plan, enlarged to fill the full width (cropped top and bottom) so it never repeats. */
.bp-plan { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: brightness(0) invert(1); }
@media (max-width: 680px) { .bp-sheet { opacity: 0.12; } }
/* Light sections: the same plan in its original blueprint blue on a faint blue grid. */
.bp-light .bp-sheet {
  opacity: 0.22;
  background-image:
    linear-gradient(rgba(44, 91, 158, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 91, 158, 0.28) 1px, transparent 1px);
}
.bp-light .bp-plan { filter: none; }
@media (max-width: 680px) { .bp-light .bp-sheet { opacity: 0.16; } }
@media (max-width: 680px) {
  .path-fx-glow.g1 { width: 340px; height: 300px; left: -140px; top: -90px; }
  .path-fx-glow.g2 { width: 300px; height: 260px; right: -120px; bottom: -100px; }
}
@media (prefers-reduced-motion: reduce) {
  .path-fx-glow { animation: none; }
}

/* ---------- Web Design hero: live silk lines (js/silk-waves.js) ---------- */
/* Same idea as the "Whatever your situation" waves, but the lines run the full height on the
   far left, fold gently into each other like draped fabric, and fade out toward the image.
   The mask sits on a still wrapper so the fade stays put while the lines flow beneath it. */
.web-fx .path-fx-glow.g1 { opacity: 0.35; }
.web-fx .path-fx-glow.g2 { opacity: 0.25; }
.fabric-mask {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 0%, #000 22%, transparent 60%);
}
.silk-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; color: #9fc3ff; opacity: 0.34; }
@media (max-width: 680px) {
  .fabric-mask { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 85%); mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 85%); }
}
/* Web Design: SEO & AEO, the metrics every client gets. */
.seo-report { margin-top: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; }
.seo-report-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin: 0 0 16px; text-align: center; }
.seo-metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; }
.seo-metrics li { position: relative; padding-left: 26px; color: var(--ink); font-size: 0.95rem; }
.seo-metrics li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--brass); font-weight: 700; }
@media (max-width: 980px) { .seo-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .seo-metrics { grid-template-columns: 1fr; } .seo-report { padding: 24px 22px; } }

/* ---------- Live site previews (see main.js) ---------- */
/* The real homepage at desktop size (1440×900), scaled to fit the frame. The saved picture
   underneath shows until the live page has loaded. */
.live-shot { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--dark); }
.live-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.live-shot iframe {
  position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0;
  transform: scale(var(--s, 0.4)); transform-origin: 0 0; pointer-events: none;
  opacity: 0; transition: opacity 0.5s ease;
}
.live-shot.is-live iframe { opacity: 1; }
html.in-preview { overflow: hidden; }
html.in-preview .c2chat-launcher, html.in-preview .c2chat-panel, html.in-preview .mobile-cta-bar { display: none !important; }

/* "Whatever your situation": still, with a soft golden ombre (cream at the top warming to champagne gold). */
.gold-ombre { background: linear-gradient(180deg, #FBF9F5 0%, #F4EFE3 55%, #EBE3D0 100%); }
/* Web Design teaser on the homepage: dark blue so it reads as its own section after the calculators. */
#web-design-teaser .programs-disclaimer { color: rgba(243, 239, 231, 0.62); }
#web-design-teaser .split-headline { color: #fff; }

/* ---------- Homepage calculators: graph paper with self-drawing growth curves ---------- */
/* Faint grid plus gold and blue curves (equity building, a balance paying down, value
   compounding) that draw in, hold, fade and redraw. The SVG animates itself. */
.growth-layer {
  background-image:
    linear-gradient(rgba(44, 91, 158, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 91, 158, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 55%, #000 45%, transparent 100%);
          mask-image: radial-gradient(ellipse 85% 80% at 50% 55%, #000 45%, transparent 100%);
}
.growth-curves { position: absolute; left: 0; right: 0; bottom: 6%; width: 100%; height: 78%; opacity: 0.38; }
@media (max-width: 680px) { .growth-curves { height: 60%; opacity: 0.3; } }

/* ---------- Homepage Design card: Ariane's plan crossfades into the finished room ---------- */
/* Same Orange County living room — the drawing, then the built result, on a slow loop. */
.service-img-swap { position: relative; }
.service-img-swap .swap-plan { position: absolute; inset: 0; background: #fff; animation: plan-swap 12s ease-in-out infinite; }
@keyframes plan-swap { 0%, 30% { opacity: 1; } 42%, 88% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .service-img-swap .swap-plan { animation: none; opacity: 0; } }

/* ---------- Homepage calculators: a live-looking preview instead of picking calculators for people ---------- */
.calc-teaser { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.calc-teaser-shot { display: block; color: inherit; }
.calc-teaser-shot .browser-mock { box-shadow: 0 24px 60px rgba(20, 30, 50, 0.22); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.calc-teaser-shot:hover .browser-mock { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(20, 30, 50, 0.3); }
.calc-teaser-text p { font-size: 1.08rem; color: var(--ink-soft); margin-bottom: 24px; }
@media (max-width: 900px) { .calc-teaser { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================
   Accessibility (WCAG 2.2 AA)
   ============================================================ */
/* Screen-reader-only text */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Skip link: hidden until a keyboard user tabs to it */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 2000;
  padding: 12px 20px; border-radius: 8px;
  background: var(--dark); color: var(--cream); font-weight: 700; font-size: 0.95rem;
  transform: translateY(-160%); transition: transform 0.2s ease;
}
.skip-link:focus { transform: none; color: var(--cream); }
main:focus, .quiz-q:focus { outline: none; }
/* The <nav> landmark wrapper must not change the header layout */
.nav-main { display: contents; }
/* Footer column headings are <h2> for document structure but keep the small-caps label look */
.site-footer .footer-h { font-family: var(--sans); line-height: 1.65; letter-spacing: 0.22em; text-wrap: wrap; }

/* Visible keyboard focus everywhere: brass ring on light areas, cream ring on dark areas */
:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
.site-header :focus-visible,
.site-footer :focus-visible, .bg-dark :focus-visible, .cta-dark :focus-visible,
.page-hero :focus-visible, .hero :focus-visible, .analysis-banner :focus-visible,
.lightbox :focus-visible, .mobile-cta-bar :focus-visible, .c2chat-header :focus-visible { outline-color: var(--cream); }
.site-header .nav-links.open :focus-visible,
.site-header .nav-dropdown-menu :focus-visible { outline-color: var(--brass); }
/* Search field: the input itself has no outline, so ring the whole input row */
.search-input-row:focus-within { box-shadow: inset 0 0 0 3px var(--brass); }

/* Links inside running text are underlined, not told apart by color alone */
main :is(p, li) a:not([class]), .compliance a {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}

/* Photo heroes: text over photos keeps at least 4.5:1 (3:1 for the big headline) —
   the lede is fully opaque cream and the dark wash under the text column reaches a little further. */
.photo-hero-tall .lede { color: var(--cream); }
@media (min-width: 681px) {
  /* --col-end = right edge of the hero text column (max 440px wide inside the 1160px wrap) */
  .photo-hero-tall .photo-hero-bg::after {
    --col-end: calc(max(24px, (100% - 1160px) / 2 + 24px) + 440px);
    background: linear-gradient(100deg, rgba(18, 16, 13, 0.92) 0%, rgba(18, 16, 13, 0.82) var(--col-end), rgba(18, 16, 13, 0.4) calc(var(--col-end) + 140px), rgba(18, 16, 13, 0) calc(var(--col-end) + 300px));
  }
  .photo-hero-tall .photo-hero-bg:has(img[src*="glossary-hero"])::after {
    background: linear-gradient(100deg, rgba(18, 16, 13, 0.86) 0%, rgba(18, 16, 13, 0.8) var(--col-end), rgba(18, 16, 13, 0.35) calc(var(--col-end) + 140px), rgba(18, 16, 13, 0) calc(var(--col-end) + 300px));
  }
  /* Design's headline is long and runs out over the bright windows */
  #design-hero .photo-hero-bg::after {
    background: linear-gradient(100deg, rgba(18, 16, 13, 0.92) 0%, rgba(18, 16, 13, 0.82) var(--col-end), rgba(18, 16, 13, 0.6) calc(var(--col-end) + 160px), rgba(18, 16, 13, 0.4) calc(var(--col-end) + 300px), rgba(18, 16, 13, 0) calc(var(--col-end) + 480px));
  }
}

/* Real Estate hero film: pause / play control */
.hero-video-toggle {
  /* top-right: bottom-right would sit under the fixed "Ask a question" chat button */
  position: absolute; right: 24px; top: 24px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18, 16, 13, 0.55); color: var(--cream);
  border: 1px solid rgba(243, 239, 231, 0.55); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.2s ease;
}
.hero-video-toggle:hover { background: rgba(18, 16, 13, 0.8); }
.hero-video-toggle svg { width: 16px; height: 16px; }
.hero-video-toggle .icon-play { display: none; }
.hero-video-toggle[aria-pressed="true"] .icon-play { display: block; }
.hero-video-toggle[aria-pressed="true"] .icon-pause { display: none; }
@media (max-width: 680px) {
  /* On phones the film sits above the text at 16:9 and drifts up to ~33px with scroll —
     keep the control on the film's right side, clear of that drift (takes no extra space) */
  .hero-video-toggle { position: relative; right: auto; top: auto; margin: -89px 12px 45px auto; }
}

/* Reduced motion: no entrances, pulses, zooms or smooth scrolling */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .term-card.focused, .primer-card.focused { animation: none; }
  .help-panel.active { animation: none; }
  .hero-bg img, .photo-hero-bg, .photo-hero-bg img { animation: none !important; }
  .portfolio-tile img, .portfolio-tile:hover img { transition: none; transform: none; }
}

/* ---------- Footer: faint blueprint behind the dark blue ---------- */
/* A still, cream-lined copy of Ariane's Arapaho floor plan on the right, over faint
   graph-paper lines across the whole footer. Sits behind all footer content. */
.site-footer { position: relative; isolation: isolate; overflow: hidden; }
.site-footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    url("../images/blueprint-footer.svg"),
    linear-gradient(rgba(243, 239, 231, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 239, 231, 0.035) 1px, transparent 1px);
  background-size: min(40%, 560px) auto, 36px 36px, 36px 36px;
  background-position: right -3% top 30px, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat;
}
@media (max-width: 680px) {
  .site-footer::before { background-size: 78% auto, 28px 28px, 28px 28px; background-position: right -24% top 20px, 0 0, 0 0; }
}

/* ---------- Homepage contact: phone and the two emails, by service ---------- */
.contact-ways { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px; margin: 36px auto 0; padding: 0; }
.contact-ways li { text-align: center; }
.contact-ways span { display: block; font-size: 0.92rem; letter-spacing: 0.12em; text-transform: uppercase; color: #E4CE9F; margin-bottom: 4px; }
.contact-ways a { color: var(--cream); font-size: 1.08rem; text-decoration: underline; text-underline-offset: 4px; }
.contact-ways a:hover { color: #fff; }

/* ---------- Headlines appear whole (no word-by-word build) ---------- */
/* The section's own gentle fade/drift still plays; the words no longer arrive one at a time. */
.split-headline .w { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }

/* ---------- Footer: diagonal blue ombre, blueprint fading out ---------- */
/* Deep navy in the top-left easing to a softer blue in the bottom-right; the blueprint and
   graph paper dissolve diagonally so they never end on a hard edge. */
.site-footer { background: linear-gradient(135deg, #08132a 0%, #0d1f3d 38%, #17345f 72%, #24497c 100%); }
.site-footer::before {
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 100% 0%, #000 15%, rgba(0, 0, 0, 0.45) 45%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 85% at 100% 0%, #000 15%, rgba(0, 0, 0, 0.45) 45%, transparent 75%);
}

/* ---------- Phones: compact logo on inner pages ---------- */
@media (max-width: 680px) {
  .site-header:not(.over-hero) .nav-brand-mark { width: 52px; height: 52px; }
}
/* Blog hero photo has a dark edge in the image itself — crop a little wider */
.photo-hero-bg img[src*="construction-flipped"] { left: -3% !important; width: 106% !important; max-width: none !important; }

/* ---------- Step numbers as an architectural grid line ---------- */
/* A hairline running the full width of the page, with each step marked by a drafting-style
   grid bubble (thin ring, number inside) and a short tick through the line — like the column
   grid on a construction drawing. */
.path-rail { margin-bottom: 10px; }
.path-rail::before {
  left: 50%; right: auto; width: 100vw; height: 1px; transform: translate(-50%, -50%);
  background: rgba(243, 239, 231, 0.45);
}
.bg-alt .path-rail::before, .section:not(.bg-dark):not(.cta-dark) .path-rail::before { background: rgba(21, 48, 79, 0.35); }
.path-dot {
  width: 46px; height: 46px; background: var(--dark); color: #E4CE9F;
  border: 1px solid #E4CE9F; box-shadow: none;
  font-family: var(--sans); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.08em;
}
.path-dot::before, .path-dot::after {
  content: ""; position: absolute; left: 50%; width: 1px; height: 14px; background: currentColor; opacity: 0.7;
}
.path-dot::before { bottom: 100%; }
.path-dot::after { top: 100%; }
.section:not(.bg-dark):not(.cta-dark) .path-dot { background: var(--bg); color: var(--navy-dark); border-color: var(--navy-dark); }
.bg-alt .path-dot { background: var(--bg-alt) !important; }

/* ---------- Inner pages: hero photo runs up behind the nav (like the homepage) ---------- */
/* js/main.js gives the header .over-hero on wider screens, so the bar starts dark over the
   photo and turns light on scroll. The hero is pulled up by the nav's height and padded back. */
@media (min-width: 681px) {
  .page-hero.under-nav { margin-top: calc(-1 * var(--nav-h) - 6px); padding-top: calc(var(--nav-h) + 96px); }
  .page-hero.photo-hero-tall.under-nav { padding-top: calc(var(--nav-h) + 78px); min-height: calc(760px + var(--nav-h)); }
  .photo-hero-tall.under-nav:has(img[src*="glossary-hero"]) { min-height: calc(max(760px, 44vw) + var(--nav-h)); }
  #web-hero.under-nav { padding-top: calc(var(--nav-h) + 50px); }
}

/* ---------- Real Estate hero: a gentler, more gradual dark fade on the left ---------- */
.photo-hero-tall .photo-hero-bg:has(.hero-video)::after {
  background: linear-gradient(100deg, rgba(18, 16, 13, 0.72) 0%, rgba(18, 16, 13, 0.6) 22%, rgba(18, 16, 13, 0.42) 40%, rgba(18, 16, 13, 0.22) 56%, rgba(18, 16, 13, 0.08) 70%, rgba(18, 16, 13, 0) 84%);
}
#real-estate-hero h1, #real-estate-hero .lede, #real-estate-hero .hero-lic { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }

/* ---------- Homepage calculators: eases in from the section above; meets the navy below with a clean edge ---------- */
#calculators {
  background: linear-gradient(180deg, var(--bg-alt) 0, var(--bg) 220px);
}
#calculators .growth-layer {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 92%), radial-gradient(ellipse 85% 80% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 92%), radial-gradient(ellipse 85% 80% at 50% 50%, #000 40%, transparent 100%);
          mask-composite: intersect;
}

/* ---------- Design page: "Drawn in-house" construction-document sheets ---------- */
.drawings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; margin-top: 8px; }
.drawing-sheet { margin: 0; }
.drawing-sheet .pt-open { display: block; width: 100%; padding: 0; border: 1px solid rgba(21, 48, 79, 0.18); background: #fff; cursor: zoom-in; }
.drawing-sheet img { display: block; width: 100%; height: auto; }
.drawing-sheet figcaption { display: flex; align-items: baseline; gap: 14px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(21, 48, 79, 0.25); }
.drawing-sheet .sheet-no { font-size: 0.92rem; font-weight: 600; letter-spacing: 0.14em; color: var(--navy-dark); }
.drawing-sheet .sheet-title { font-size: 0.92rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 760px) { .drawings-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================
   Architectural refresh (2026-10-03)
   Quiet, drawn-not-decorated: square corners, hairlines instead of shadows,
   one label style, three button looks, and a drawing-sheet title block over
   each main section. Same navy / cream / brass palette.
   ============================================================ */
:root {
  --hair: rgba(21, 48, 79, 0.14);
  --hair-strong: rgba(21, 48, 79, 0.32);
  --hair-dark: rgba(243, 239, 231, 0.28);
  --label: rgba(21, 48, 79, 0.8);   /* navy-dark at ~80% — 6:1 on the cream backgrounds */
  --label-dark: #E4CE9F;
  --radius: 2px;
  --shadow: none;
}

/* ---------- Buttons: three looks ---------- */
.btn {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.3;
  padding: 14px 26px; border-radius: 2px; border: 1px solid transparent;
  box-shadow: none; transform: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* (a) Primary — navy fill, cream text; hover turns it into the ghost. */
.btn-primary, .btn-solid-blue, .btn-bronze, .btn-outline,
.analysis-banner .btn-calc {
  background: var(--navy-dark); color: var(--cream); border-color: var(--navy-dark);
}
.btn-primary:hover, .btn-solid-blue:hover, .btn-bronze:hover, .btn-outline:hover,
.analysis-banner .btn-calc:hover,
.service-card:hover .btn-solid-blue {
  background: transparent; color: var(--navy-dark); border-color: var(--navy-dark);
}
/* (a) Primary on dark — cream fill, navy text. */
.btn-light, .btn-blue-gold, .btn.btn-calc,
:is(.bg-dark, .cta-dark, .hero, .page-hero) :is(.btn-primary, .btn-solid-blue, .btn-bronze, .btn-outline) {
  background: var(--cream); color: var(--navy-dark); border-color: var(--cream);
  padding: 14px 26px; font-size: 0.78rem;
}
.btn-light:hover, .btn-blue-gold:hover, .btn.btn-calc:hover,
:is(.bg-dark, .cta-dark, .hero, .page-hero) :is(.btn-primary, .btn-solid-blue, .btn-bronze, .btn-outline):hover {
  background: transparent; color: var(--cream); border-color: var(--cream);
}
/* (b) Ghost — transparent with a 1px line in the text color. */
.btn-outline-strong { background: transparent; color: var(--navy-dark); border: 1px solid currentColor; }
.btn-outline-strong:hover { background: var(--navy-dark); color: var(--cream); border-color: var(--navy-dark); }
.btn-outline-light { background: transparent; color: var(--cream); border: 1px solid currentColor; }
.btn-outline-light:hover { background: var(--cream); color: var(--navy-dark); border-color: var(--cream); }
/* Size overrides from older rules all collapse to the one size. */
.hero .btn, .service-card .btn, .nav-links .btn, .analysis-banner .btn-calc { padding: 14px 26px; font-size: 0.78rem; letter-spacing: 0.14em; }
.service-card .btn { padding: 12px 22px; }
#glossary-go { padding: 14px 26px; }
/* Header "Book a Call": navy primary everywhere; over a photo it gets a faint cream edge so it reads. */
.nav-links .btn { padding: 11px 20px; }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: var(--cream); }
.nav-links a.btn-primary { background: var(--navy-dark); border-color: var(--navy-dark); }
.nav-links a.btn-primary:hover { background: var(--navy); border-color: var(--navy); }
.site-header .nav-links a.btn-primary { border-color: rgba(243, 239, 231, 0.55); }
@media (max-width: 1100px) {
  .site-header .nav-links.open a.btn-primary { border-color: var(--navy-dark); }
}
@media (max-width: 680px) {
  .btn, .hero .btn, .btn.btn-calc, .btn-light, .btn-outline-light { padding: 13px 20px; letter-spacing: 0.12em; }
}
/* (c) Text link with an arrow. */
.card-link, .program .learn {
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; color: var(--brass-dark);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
  text-decoration-color: rgba(113, 90, 20, 0.45);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.card-link:hover, .program:hover .learn { color: var(--navy-dark); text-decoration-color: currentColor; }

/* ---------- One label style ---------- */
.kicker, .service-kicker, .about-text .kicker.about-tagline, .web-kicker,
.hero .kicker, .page-hero .kicker {
  display: block; font-family: var(--sans); font-style: normal;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1.4; color: var(--label); margin-bottom: 14px; -webkit-text-stroke: 0;
}
/* "Meet Ariane." introduces the founder, so it reads a step larger than the other labels. */
.about-text .kicker.about-tagline { font-size: 1.3rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none; margin-bottom: 14px; }
:is(.bg-dark, .cta-dark, .hero, .page-hero, .analysis-banner) .kicker, .web-kicker { color: var(--label-dark); }
/* Smaller labels on cards, tags and footers follow the same voice. */
.service-team, .resource-card .cat, .path-step .step-label, .facts li span,
.quiz-count, .quiz-recap-label, .quiz-power span, .seo-report-title,
.search-result .sr-cat, .path-details-summary, .calc-result .big-label, .tax-stats span {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-dark);
}
.resource-card:nth-child(2) .cat { color: var(--brass-dark); }
.calc-result .big-label, .tax-stats span { color: var(--ink-faint); }
.footer-contact-label, .footer-title, .contact-ways span {
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em;
}
.site-footer h4, .site-footer .footer-h { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; }
.post-row .meta, .article .meta { font-size: 0.78rem; letter-spacing: 0.14em; }
/* Badges and category tags: hairline-framed labels, no pills. */
.program .badge, .term-card .cat-pill, .guide-head .cat-pill {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em;
  color: var(--brass-dark); background: transparent; border: 1px solid rgba(113, 90, 20, 0.35);
  border-radius: 2px; padding: 3px 9px;
}
.ba-tag, .before-after figcaption {
  border-radius: 2px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; padding: 6px 12px;
}
.ba-tag-after { background: rgba(21, 48, 79, 0.88); color: var(--cream); }
.pt-title { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; }
/* "New" on calculator tabs: kept for screen readers, hidden on screen. */
.tab-badge {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.calc-tab { position: relative; }

/* ---------- Chips, pills and tabs: square, hairline, navy when chosen ---------- */
.chip {
  border-radius: 2px; background: transparent; border: 1px solid rgba(113, 90, 20, 0.35);
  font-weight: 500; color: var(--brass-dark);
}
.chip:hover { background: var(--brass-dark); color: #fff; border-color: var(--brass-dark); }
.chip-tooltip { border-radius: 2px; box-shadow: none; border-color: var(--hair-strong); }
.help-pill, .cat-pills .pill, .calc-tab {
  border-radius: 2px; border: 1px solid var(--hair-strong); box-shadow: none;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em;
}
.help-pill:hover, .calc-tab:hover, .cat-pills .pill:hover {
  background: var(--card); color: var(--navy-dark); border-color: var(--navy-dark); box-shadow: none;
}
.help-pill.active, .calc-tab.active, .cat-pills .pill.on {
  background: var(--navy-dark); color: var(--cream); border-color: var(--navy-dark); box-shadow: none;
}
.letter-nav a { border-radius: 2px; }
.letter-nav a.on:hover { border-color: var(--navy-dark); color: var(--navy-dark); }

/* ---------- Cards: hairline frames, square corners, no lift ---------- */
.service-card, .program, .help-card, .path-step, .resource-card, .guide-card, .term-card,
.primer-card, .pillar, .calc-shell, .quiz-shell, .quiz-opt, .quiz-recap, .post-list .post-row,
.seo-report, .tax-stats div, .search-panel, .nav-dropdown-menu, .engagement-track {
  border-radius: 2px; box-shadow: none; border: 1px solid var(--hair);
}
.engagement-track { border: 0; }
.program.hot { border-top: 1px solid var(--hair); }
.program-more { border-style: dashed; border-color: var(--hair-strong); }
.calc-shell { border-top: 1px solid var(--hair); }
.calc-shell::before { height: 1px; background: var(--brass); opacity: 0.6; }
.quiz-shell { border-top: 1px solid var(--hair); }
.calc-result, .tax-highlight, .prequal, .quiz-power, .term-ex, .calc-warning, .amort-wrap,
.calc-fields input, .calc-fields select, .glossary-controls input, .glossary-controls select,
.prequal-grid input, .search-result, .nav-dropdown-menu a, .skip-link {
  border-radius: 2px;
}
.prequal, .quiz-power, .term-ex { border-left-width: 1px; }
.calc-disclaimer, .programs-disclaimer { border-left-width: 1px; border-radius: 0; }
/* Hover: the frame darkens a touch. Nothing moves, nothing grows. */
.service-card:hover, .program:hover, .resource-card:hover, .post-list .post-row:hover,
.term-card:hover, .primer-card:hover {
  transform: none; box-shadow: none; border-color: var(--hair-strong); background: var(--card); transition: border-color 0.2s ease;
}
.term-card.focused, .primer-card.focused {
  animation: none; box-shadow: inset 0 0 0 1px var(--navy-dark); border-color: var(--navy-dark);
  background: linear-gradient(0deg, rgba(21, 48, 79, 0.04), rgba(21, 48, 79, 0.04)), var(--card);
}
@media (hover: hover) { .quiz-opt:hover { transform: none; border-color: var(--navy-dark); background: var(--card); } }
.quiz-opt.picked { border-color: var(--navy-dark); background: rgba(21, 48, 79, 0.05); }
/* Card pictures hold still. */
.service-card:hover .service-img img, .program:hover .program-thumb img,
.resource-card:hover .thumb img, .post-list .post-row:hover .thumb img,
.portfolio-tile:hover img, .work-shot:hover img { transform: none; }
.program:hover .program-thumb img { filter: saturate(0.85); }
.resource-card:hover .thumb img[src*="ladera"], .post-list .post-row:hover .thumb img[src*="ladera"] { transform: scale(1.5); }
.program-thumb { border-radius: 0; }
/* Photographs and drawings: crisp, square, a thin frame at most. */
.portfolio-tile, .ba-shot, .work-shot, .film-frame, .about-photo, .article .hero-img,
.before-after figure, .ba-slider, .browser-mock, .lb-img, .kicker-photo-frame {
  border-radius: 2px; box-shadow: none;
}
.browser-mock { border: 1px solid var(--hair); }
.bg-dark .browser-mock, .page-hero .browser-mock { border-color: rgba(243, 239, 231, 0.18); }
.calc-teaser-shot .browser-mock, .calc-teaser-shot:hover .browser-mock { box-shadow: none; transform: none; }
.calc-teaser-shot:hover .browser-mock { border-color: var(--hair-strong); }
.film-sound {
  border-radius: 2px; box-shadow: none; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em;
  border: 1px solid var(--hair-strong);
}
.film-sound:hover { transform: none; }
/* FAQ: a single hairline between questions. */
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-item:first-child { border-top: 1px solid var(--hair); }

/* ---------- Motion: opacity-only reveals ---------- */
.reveal { transform: none; transition: opacity 0.8s ease; }
.help-panel.active { animation: help-panel-fade 0.35s ease; }
@keyframes help-panel-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Calculators teaser: fade into navy only where navy follows ---------- */
#calculators { background: linear-gradient(180deg, var(--bg-alt) 0, var(--bg) 220px); }
#calculators.bg-alt { background: var(--bg-alt); }
#calculators:has(+ .bg-dark) {
  background: linear-gradient(180deg, var(--bg-alt) 0, var(--bg) 220px);
}

/* ---------- Phone call bar: appears once the hero has scrolled away ---------- */
@media (max-width: 680px) {
  .mobile-cta-bar {
    box-shadow: none; border-top: 1px solid var(--hair-strong); background: var(--bg);
    transform: translateY(100%); visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  body.cta-bar-on .mobile-cta-bar { transform: none; visibility: visible; transition: transform 0.3s ease, visibility 0s; }
  .mobile-cta-bar a { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; padding: 15px 10px; }
  .mobile-cta-bar .mobile-cta-call { background: var(--navy-dark); color: var(--cream); }
  .mobile-cta-bar .mobile-cta-book { background: var(--bg); color: var(--navy-dark); }
  .mobile-cta-bar .mobile-cta-book:focus-visible { outline-color: var(--navy-dark); }
}
@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .mobile-cta-bar, body.cta-bar-on .mobile-cta-bar { transition: none; }
}

/* ---------- Footer partner logos: one tidy row, one height, one baseline ---------- */
.footer-logos { align-items: flex-end; gap: 14px 18px; }
.footer-logos a { display: block; padding: 0; margin: 0; border: 0; border-radius: 0; line-height: 0; }
.footer-logos a:hover { background: none; border-color: transparent; opacity: 0.8; }
.footer-logos img, .footer-logos img.eho, .footer-logos img.nmls, .footer-logos img.csr { height: 28px; width: auto; }
/* Wide screens: the row runs past the narrow brand column into the empty space beneath
   the Services links, so all four marks sit on one line. */
@media (min-width: 981px) { .footer-logos { flex-wrap: nowrap; width: max-content; position: relative; z-index: 1; } }
.site-footer a { border-radius: 2px; }

/* ---------- Drawings (Design page) in the same system ---------- */
.drawing-sheet .pt-open { border-color: var(--hair-strong); border-radius: 0; }
.drawing-sheet figcaption { border-top-color: var(--hair-strong); }
.drawing-sheet .sheet-no, .drawing-sheet .sheet-title { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; }
.drawing-sheet .sheet-no { color: var(--navy-dark); }

/* Loan Finder hero: Brooklyn dining room looking out over the city */
.photo-hero-bg img[src*="brooklyn-ph-08"] { object-position: center 45%; }

/* ---------- Phones: crisp header edge (no fade washing out the dark hero text) ---------- */
@media (max-width: 680px) {
  .site-header::after { display: none; }
  .site-header::before { background: var(--bg); }
  .site-header.scrolled { border-bottom: 1px solid var(--line); }
  /* Homepage: the logo appears in the bar once the page starts scrolling */
  .site-header.over-hero.scrolled .nav-brand { display: flex; }
  .site-header.over-hero.scrolled .nav-brand-mark { width: 52px; height: 52px; }
}
/* Phones: the hero photo band clips its own parallax drift so it never slides over the heading */
@media (max-width: 680px) { .photo-hero-tall .photo-hero-bg { overflow: hidden; } }
/* Phones: room under the hero headline so the descenders of "Design" and "life" aren't
   painted over by the dark identity band that follows it */
@media (max-width: 680px) {
  .hero-inner .split-headline.hero-lead { padding-bottom: 0.22em; }
  .hero-inner .split-headline.hero-lead + .hero-identity { padding-top: 10px; }
}

/* Hero areas of expertise: small outlined square "grid points" instead of dashes */
.hero-disciplines li::before { width: 7px; height: 7px; top: 0.5em; background: none; border: 1px solid #E4CE9F; box-sizing: border-box; }
@media (max-width: 680px) { .hero-disciplines li::before { width: 6px; height: 6px; top: 0.48em; } }

/* Hero areas of expertise: a hairline architectural plus (crosshair) instead of the square */
.hero-disciplines li::before, .hero-disciplines li::after {
  content: ""; position: absolute; border: 0; background: #E4CE9F; box-sizing: content-box;
}
.hero-disciplines li::before { left: 0; top: 0.72em; width: 11px; height: 1px; }
.hero-disciplines li::after  { left: 5px; top: calc(0.72em - 5px); width: 1px; height: 11px; }
@media (max-width: 680px) {
  .hero-disciplines li::before { top: 0.66em; width: 9px; height: 1px; }
  .hero-disciplines li::after  { left: 4px; top: calc(0.66em - 4px); width: 1px; height: 9px; }
}

/* Hero areas of expertise link to their pages — quiet until hovered */
.hero-disciplines a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.3s ease, color 0.2s ease; padding-bottom: 2px; }
.hero-disciplines a:hover, .hero-disciplines a:focus-visible { color: #fff; background-size: 100% 1px; }
.hero-disciplines li:has(a:hover)::before, .hero-disciplines li:has(a:hover)::after { background: #fff; }
.hero-disciplines a::after { content: ""; position: absolute; inset: -6px 0; } /* comfortable tap target */
.hero .hero-disciplines li a { text-decoration: none; }

/* ---------- Phones: inner-page heroes follow the homepage order ---------- */
/* Title first on navy right under the menu bar, then the photo band, then intro, licence
   line and buttons — no empty band above the photo. */
@media (max-width: 680px) {
  .page-hero.photo-hero-tall, .page-hero.photo-hero-tall.under-nav { padding: 0 !important; min-height: 0 !important; display: flex; flex-direction: column; }
  .page-hero.photo-hero-tall > .wrap { display: contents; }
  .page-hero.photo-hero-tall > .wrap > * { order: 2; margin-left: 24px; margin-right: 24px; }
  .page-hero.photo-hero-tall > .wrap > h1 { order: 0; margin-top: 0; margin-bottom: 0; padding: 30px 0 24px; }
  .page-hero.photo-hero-tall > .photo-hero-bg { order: 1; }
  .page-hero.photo-hero-tall > .wrap > .lede { margin-top: 26px; }
  .page-hero.photo-hero-tall > .wrap > :last-child { margin-bottom: 44px; }
}
@media (max-width: 680px) {
  /* Fixed photo frame; the image/video is 130% tall inside it so the scroll drift never shows an edge */
  .page-hero.photo-hero-tall > .photo-hero-bg { position: relative !important; aspect-ratio: 16 / 10; overflow: hidden; }
  .page-hero.photo-hero-tall > .photo-hero-bg > img,
  .page-hero.photo-hero-tall > .photo-hero-bg > .hero-video { position: absolute !important; left: 0; top: -15% !important; width: 100% !important; height: 130% !important; max-width: none !important; object-fit: cover !important; aspect-ratio: auto !important; }
}
@media (max-width: 680px) {
  /* Pause button rides in the photo band (order 1), bottom-right corner */
  .page-hero.photo-hero-tall > .hero-video-toggle { order: 1; position: relative !important; top: auto !important; bottom: auto !important; right: auto !important; left: auto !important; align-self: flex-end; margin: -56px 12px 12px 0; z-index: 3; }
}
@media (max-width: 680px) { .page-hero.photo-hero-tall > .photo-hero-bg > img[src*="construction-flipped"] { left: 0 !important; width: 100% !important; } }
/* Blog hero: Brooklyn living room with the spiral stair */
.photo-hero-bg img[src*="brooklyn-ph-10"] { object-position: center 55%; }
/* Before/after slider inside an article (light background) */
.article .ba-slider { margin: 28px 0 10px; }
.ba-hint.ba-hint-light { color: var(--ink-soft); }

/* Page titles: second line in gold italic, like the homepage hero */
.page-hero h1 em { font-style: italic; color: #E4CE9F; }
.article h1 em, main > .article h1 em { font-style: italic; color: var(--brass-dark, #715A14); }
/* Drawn in-house: smaller sheet previews, four across */
.drawings-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
.drawing-sheet .sheet-title { font-size: 0.78rem; }
@media (max-width: 1000px) { .drawings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .drawings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; } .drawing-sheet figcaption { flex-direction: column; gap: 2px; } }
/* Lightbox never enlarges drawings beyond their small native size */
.lightbox .lb-img[src*="park-city-"][src*="plan"], .lightbox .lb-img[src*="park-city-"][src*="elevations"], .lightbox .lb-img[src*="park-city-"][src*="details"] { max-width: min(100%, 800px); }
.drawing-sheet .sheet-no { white-space: nowrap; }

/* ---------- Portfolio: clean photos, project name as a caption underneath ---------- */
.portfolio-tile { overflow: visible; border-radius: 0; }
.portfolio-tile .pt-open { overflow: hidden; }
.portfolio-tile figcaption {
  position: static !important; inset: auto; opacity: 1 !important; background: none !important;
  padding: 10px 0 0; margin-top: 0; border-top: 1px solid rgba(21, 48, 79, 0.22);
}
.portfolio-tile .pt-title { color: var(--navy-dark); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.portfolio-tile .pt-open img { transition: filter 0.3s ease; }
@media (hover: hover) {
  .portfolio-tile:hover .pt-open img { filter: brightness(1.06); }
  .portfolio-tile:hover .pt-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
}
.portfolio-grid { row-gap: 28px; }
@media (max-width: 760px) { .portfolio-grid { row-gap: 22px; } .portfolio-tile figcaption { padding-top: 8px; } .portfolio-tile .pt-title { font-size: 0.72rem; letter-spacing: 0.12em; } }
.portfolio-tile figcaption { line-height: 1.35; } .portfolio-tile .pt-title { display: block; line-height: 1.35; }


/* ---------- Homepage Design card: three-step story on an 18s loop ----------
   rug plan → fireplace elevation draws itself → the finished room (rug and fireplace) */
.service-img-swap .swap-photo { width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%; }
.service-img-swap .swap-plan { animation: card-plan 18s ease-in-out infinite; }
.service-img-swap .swap-elev { position: absolute; inset: 0; background: #F7F5F0; display: flex; align-items: center; justify-content: center; padding: 5% 9%; opacity: 0; animation: card-elev 18s ease-in-out infinite; }
.service-img-swap .swap-elev img { width: 100%; height: 100%; object-fit: contain; }
@keyframes card-plan { 0%, 27% { opacity: 1; } 33%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes card-elev { 0%, 30% { opacity: 0; } 33%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .service-img-swap .swap-elev { animation: none; opacity: 0; } }
.service-img img[src*="card-financing-meeting"] { object-position: center 18%; }

/* ---------- Nav: solid navy on every page, at the top and while scrolling ---------- */
/* The bar is the site's dark navy with cream links; on wider screens a soft navy fade
   below it lets the page dissolve into the bar as it scrolls underneath. */
.site-header, .site-header.scrolled { background: var(--dark); border-bottom-color: transparent; }
.site-header::before { opacity: 0; }
.site-header::after {
  background: linear-gradient(180deg, var(--dark) 0%, rgba(8, 27, 51, 0.55) 45%, rgba(8, 27, 51, 0) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  -webkit-mask-image: none; mask-image: none;
  height: 64px; opacity: 1;
}
@media (max-width: 680px) {
  .site-header.scrolled { border-bottom: 0; }
}
/* The current page's link stays readable on the navy bar. */
@media (min-width: 681px) { .site-header .nav-links > li > a.active:not(.btn) { color: #fff; } }

/* Desktop: at the top of a page with a hero photo, that photo shows behind the logo and
   menu under a soft charcoal shade. Once you scroll (or on pages without a hero photo) the
   bar becomes dark smoked glass that takes on the colors behind it, with no navy and no fade. */
@media (min-width: 681px) {
  .site-header.over-hero:not(.scrolled) {
    background: linear-gradient(180deg, rgba(18, 16, 13, 0.62) 0%, rgba(18, 16, 13, 0.32) 65%, rgba(18, 16, 13, 0) 100%);
    border-bottom: 0;
  }
  .site-header.scrolled, .site-header:not(.over-hero) { background: transparent; border-bottom: 0; }
  .site-header.scrolled::before, .site-header:not(.over-hero)::before {
    background: var(--nav-glass, rgba(22, 20, 17, 0.93)); transition: background-color 0.3s ease;
    -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
    opacity: 1;
  }
  .site-header::after, .site-header.scrolled::after { opacity: 0; }
}


/* Gold phrase inside a headline (e.g. "let's find your next step together.") */
.gold-text { color: #E4CE9F; }

/* ---------- All page heroes use the Real Estate hero's soft, even wash ---------- */
/* A diagonal shade, darkest behind the text on the left, that eases out gradually across the
   photo — no hard dark column — with a soft shadow under the text so it stays readable. */
@media (min-width: 681px) {
  .photo-hero-tall .photo-hero-bg::after,
  .photo-hero-tall .photo-hero-bg:has(img[src*="glossary-hero"])::after,
  #design-hero .photo-hero-bg::after {
    background: linear-gradient(100deg, rgba(18, 16, 13, 0.86) 0%, rgba(18, 16, 13, 0.78) 24%, rgba(18, 16, 13, 0.6) 40%, rgba(18, 16, 13, 0.34) 56%, rgba(18, 16, 13, 0.12) 70%, rgba(18, 16, 13, 0) 84%) !important;
  }
  .photo-hero-tall h1, .photo-hero-tall .lede, .photo-hero-tall .hero-lic { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); }
}
@media (min-width: 681px) {
  #analysis-hero .photo-hero-bg::after { background: linear-gradient(100deg, rgba(18, 16, 13, 0.88) 0%, rgba(18, 16, 13, 0.8) 24%, rgba(18, 16, 13, 0.62) 42%, rgba(18, 16, 13, 0.36) 58%, rgba(18, 16, 13, 0.12) 72%, rgba(18, 16, 13, 0) 86%) !important; }
}

/* ---------- Hero photos: slow push-in restored (with the scroll parallax) ---------- */
@keyframes hero-zoom { from { scale: 1; } to { scale: 1.12; } }
.hero-bg img { animation: hero-zoom 22s ease-out forwards; transform-origin: center center; }
@media (min-width: 681px) {
  .photo-hero-bg { animation: hero-zoom 24s ease-out forwards; transform-origin: center center; will-change: transform; }
  .photo-hero-bg:has(img[src*="brooklyn-ph"]) { transform-origin: center 55%; }
}
@media (prefers-reduced-motion: reduce) { .hero-bg img, .photo-hero-bg { animation: none; } }

/* Hairline arrow on buttons: a 1px drafting-style arrow in the button's own text color,
   used in place of the typed "→". Nudges forward on hover. */
.hl-arrow {
  display: inline-block; width: 22px; height: 10px; margin-left: 12px; vertical-align: 0.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M0 5h21M16.5.5 21 5l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 10'%3E%3Cpath d='M0 5h21M16.5.5 21 5l-4.5 4.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s ease;
}
.btn:hover .hl-arrow { transform: translateX(4px); }
/* Financing hero: full family photo, framed so the woman at the door stays in view */
#whoihelp-hero .photo-hero-bg img { object-position: 62% 55% !important; }
#whoihelp-hero .photo-hero-bg { transform-origin: 70% 60%; }
.hero-disciplines .hd-sep { margin: 0 0.35em; opacity: 0.7; }
@media (max-width: 680px) { .hero-disciplines .hd-sep { display: none; } .hero-disciplines a[href*="#seo-aeo"] { display: block; } }

/* ---------- Web Design: SEO & AEO, on navy with a live search → AI answer demo ---------- */
.seo-x-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.seo-x h2 em { color: #E4CE9F; font-style: italic; }
.seo-x-lede { color: rgba(243, 239, 231, 0.82); margin: 18px 0 30px; max-width: 520px; }
.seo-x-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(228, 206, 159, 0.35); }
.seo-x-list li { display: grid; grid-template-columns: 54px 1fr; gap: 8px; padding: 20px 0; border-bottom: 1px solid rgba(228, 206, 159, 0.2); }
.seo-x-no { font-size: 0.82rem; letter-spacing: 0.14em; color: #E4CE9F; padding-top: 5px; }
.seo-x-list h3 { color: #fff; font-size: 1.3rem; margin: 0 0 6px; }
.seo-x-list p { color: rgba(243, 239, 231, 0.75); margin: 0; font-size: 0.98rem; }
.seo-x-demo { margin: 0; padding: 28px; border: 1px solid rgba(228, 206, 159, 0.35); background: rgba(255, 255, 255, 0.03); }
.seo-x-label { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #E4CE9F; margin-bottom: 10px; }
.seo-x-query { background: #F7F5F0; color: #1c1b19; padding: 14px 16px; font-size: 0.98rem; min-height: 1.6em; display: flex; align-items: center; }
.seo-x-caret { display: inline-block; width: 1px; height: 1.1em; background: #1c1b19; margin-left: 2px; animation: seo-blink 1s steps(1) infinite; }
@keyframes seo-blink { 50% { opacity: 0; } }
.seo-x-result, .seo-x-ai { opacity: 0; transform: translateY(8px); transition: opacity 0.6s ease, transform 0.6s ease; }
.seo-x-demo.is-done .seo-x-result, .seo-x-demo.is-done .seo-x-ai { opacity: 1; transform: none; }
.seo-x-demo.is-done .seo-x-ai { transition-delay: 0.7s; }
.seo-x-result { margin-top: 12px; padding: 14px 16px; border-left: 2px solid #E4CE9F; background: rgba(255, 255, 255, 0.05); }
.seo-x-url { display: block; font-size: 0.8rem; color: rgba(243, 239, 231, 0.6); }
.seo-x-title { display: block; color: #fff; font-family: var(--serif); font-size: 1.2rem; margin: 2px 0 4px; }
.seo-x-snip { display: block; font-size: 0.9rem; color: rgba(243, 239, 231, 0.72); }
.seo-x-ai { margin-top: 24px; }
.seo-x-answer { margin: 0; padding: 16px; background: rgba(228, 206, 159, 0.08); border: 1px solid rgba(228, 206, 159, 0.25); color: rgba(243, 239, 231, 0.9); font-size: 0.96rem; }
.seo-x-answer strong { color: #E4CE9F; font-weight: 600; }
.seo-x-demo figcaption { margin-top: 16px; font-size: 0.8rem; color: rgba(243, 239, 231, 0.55); }
.seo-x-report { margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(228, 206, 159, 0.35); }
.seo-x-report-title { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: #E4CE9F; margin: 0 0 22px; }
.seo-x-report ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 40px; }
.seo-x-report li { display: flex; align-items: center; gap: 16px; color: rgba(243, 239, 231, 0.88); font-size: 0.98rem; }
.seo-x-report svg { flex: 0 0 96px; width: 96px; height: 26px; }
.seo-x-report polyline { fill: none; stroke: #E4CE9F; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.6s ease; }
.seo-x-report.visible polyline { stroke-dashoffset: 0; }
.seo-care-note { margin: 28px 0 0; font-size: 0.95rem; color: var(--ink-soft); }
@media (max-width: 900px) { .seo-x-grid { grid-template-columns: 1fr; gap: 40px; } .seo-x-report ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .seo-x-report ul { grid-template-columns: 1fr; } .seo-x-demo { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .seo-x-report polyline { stroke-dashoffset: 0; transition: none; } .seo-x-caret { animation: none; } }
.hero-disciplines a { position: relative; } /* tap zone hugs each link, so two links on one line each get their own hover */

/* Photo protection: photos can't be dragged out, and a long-press on a phone doesn't offer "Save image". */
img, video { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }


/* Branding page: the four services sit in one row on wide screens */
@media (min-width: 1100px) { #branding-services .help-grid { grid-template-columns: repeat(4, 1fr); } }

/* Homepage hero: each discipline's hairline + turns a quarter turn when its link is hovered,
   like the See Full Details toggle. Both strokes share the plus's center, so they spin together. */
.hero-disciplines li::before, .hero-disciplines li::after { transition: none; }
/* Only the hovered line animates; leaving snaps back instantly (a turned + looks identical), so
   just one + is ever seen spinning. */
.hero-disciplines li:has(a:hover)::before, .hero-disciplines li:has(a:hover)::after,
.hero-disciplines li:has(a:focus-visible)::before, .hero-disciplines li:has(a:focus-visible)::after { transform: rotate(90deg); transition: transform 0.2s ease-out, background-color 0.12s ease-out; }
/* Hover zones stop short of the next line, so two lines are never hovered at once. */
.hero-disciplines a::after { inset: -3px 0; }

/* ---------- Rent vs. Buy chart ---------- */
.rb-chart { margin: 22px 0 0; }
.rb-chart-title { font-size: 0.92rem; color: var(--ink); font-weight: 500; margin-bottom: 8px; }
.rb-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 6px; padding: 0; font-size: 0.88rem; color: var(--ink-soft); }
.rb-legend li { display: flex; align-items: center; gap: 8px; }
.rb-key { display: inline-block; width: 16px; height: 2px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.rb-legend .rb-key { margin-right: 0; }
.rb-key-rent { background: #2C5B9E; }
.rb-key-own { background: #A8863A; }
.rb-plot { position: relative; }
#rb-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rb-grid { stroke: rgba(21, 48, 79, 0.1); stroke-width: 1; }
.rb-ax { font-size: 11px; fill: var(--ink-soft); font-family: var(--sans); }
.rb-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rb-rent { stroke: #2C5B9E; }
.rb-own { stroke: #A8863A; }
.rb-be { stroke: rgba(21, 48, 79, 0.35); stroke-width: 1; stroke-dasharray: 3 3; }
.rb-be-t { font-size: 10.5px; }
.rb-cross { stroke: rgba(21, 48, 79, 0.35); stroke-width: 1; }
.rb-dot { stroke: #fff; stroke-width: 2; }
.rb-rent-d { fill: #2C5B9E; }
.rb-own-d { fill: #A8863A; }
#rb-hit { cursor: crosshair; touch-action: pan-y; }
.rb-tip { position: absolute; top: -6px; transform: translateY(-100%); background: #fff; border: 1px solid rgba(21, 48, 79, 0.18); padding: 8px 10px; font-size: 0.82rem; color: var(--ink); pointer-events: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(20, 30, 50, 0.12); }
.rb-tip strong { display: block; margin-bottom: 2px; }
.rb-tip span { display: block; color: var(--ink-soft); }
.rb-tip .rb-key { width: 10px; }
.rb-table { margin-top: 10px; font-size: 0.86rem; }
.rb-table summary { cursor: pointer; color: var(--brass-dark); }
.rb-table table { margin-top: 8px; width: 100%; }
/* Design page founder section: editorial layout. One text column; the portrait (tall, 4:5)
   floats at the left and the bio wraps around it; the materials palette is a small inset at the right. */
.principal-wrap { max-width: 980px; margin-left: auto; margin-right: auto; }
.principal-wrap .about-text, .principal-wrap .about-text p { max-width: none; }
.principal-photo { float: left; width: 280px; margin: 6px 36px 18px 0; } /* width set by main.js to match "Ariane Bibas" above */
.principal-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% center; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 680px) { .principal-photo { width: 46%; margin-right: 18px; } }
/* Materials palette: a small editorial inset that the bio text wraps around. */
.principal-palette { float: right; width: 210px; margin: 6px 0 14px 28px; }
.principal-palette img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.principal-palette figcaption { margin-top: 8px; font-size: 0.76rem; line-height: 1.45; color: var(--ink-soft); }
.principal-palette figcaption span { color: var(--ink-faint); font-style: italic; }
:is(#principal, #about) .about-licenses { clear: both; }
@media (max-width: 680px) { .principal-palette { width: 44%; margin-left: 18px; } }

/* Card and tile photo drift (main.js): photos are enlarged slightly so moving them inside
   their frames never reveals an edge. Uses the separate translate/scale properties so the
   existing hover zoom (transform) still works on top. */
.px-drift { scale: 1.14; will-change: translate; }
.thumb img[src*="ladera"].px-drift { scale: 1; } /* already enlarged 1.5x */

/* Design page founder bio: one text size and color throughout (intro, body and credentials match). */
:is(#principal, #about) .about-text p.lede, :is(#principal, #about) .about-licenses li { font-size: inherit; line-height: inherit; }

/* Design page founder heading: "Ariane Bibas Design (ABD)" in italic, with Design in gold. */
.abd-title em { font-style: italic; }
.abd-title .abd-gold { color: var(--brass); }
.about-licenses .lic-name strong { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; }

/* Homepage: name under Ariane's portrait */
.about-feature .about-figure { grid-column: 1; grid-row: 1; margin: 0; }
.about-figure .about-photo-big { grid-column: auto; grid-row: auto; }
.about-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(21, 48, 79, 0.22); }
.about-caption-name { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); }
.about-caption-role { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 980px) { .about-feature .about-figure { grid-row: auto; max-width: 520px; } }
@media (max-width: 680px) { .about-feature .about-figure { max-width: none; } }
.about-licenses-name { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); margin: 26px 0 -4px; }
.about-text .about-licenses-name { color: #1c1b19 !important; font-size: 1.45rem; font-weight: 600; }
/* Design page: Ariane's name, bold, first under the credentials line */
:is(#principal, #about) .about-licenses .lic-name strong { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: #1c1b19; letter-spacing: 0; }
:is(#principal, #about) .about-licenses .lic-name { margin-bottom: 6px; }
/* Design page: "Ariane Bibas Design" title matches the page title size and spans above the text */
#principal .abd-title { font-size: var(--design-title-size); line-height: 1.06; margin: 6px 0 28px; clear: both; }

/* Design page: the hero title and the "Ariane Bibas Design" heading share one size. */
:root { --design-title-size: clamp(2.4rem, 4.5vw, 3.6rem); }
#design-hero h1 { font-size: var(--design-title-size); }

/* ---------- Calculator usability pass ---------- */
/* Phones: one "Choose a calculator" dropdown replaces the row of tab buttons (js/main.js builds it). */
.calc-picker { display: none; }
.calc-picker label {
  display: block; margin-bottom: 8px; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.calc-picker select {
  width: 100%; padding: 13px 42px 13px 14px; font-family: var(--sans); font-size: 16px; font-weight: 500;
  color: var(--ink); border: 1px solid var(--hair-strong); border-radius: 2px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: var(--card) 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='%2315304F' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.calc-picker select:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
/* Phones: a slim bar pinned under the header repeats the open calculator's main result. */
.calc-sticky { display: none; }
@media (max-width: 720px) {
  .calc-tabs { display: none; }
  .calc-picker { display: block; padding: 20px; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
  .calc-shell { overflow: clip; } /* "hidden" would stop the result bar from sticking */
  .calc-panel { padding-top: 0; }
  .calc-sticky {
    display: flex; align-items: baseline; gap: 6px; position: sticky; top: var(--nav-h); z-index: 5;
    margin: 0 -40px 28px; padding: 10px 40px; background: var(--navy-dark); color: var(--cream);
    font-size: 0.9rem; line-height: 1.3; white-space: nowrap;
  }
  .calc-sticky-label { flex: 0 0 auto; color: rgba(243, 239, 231, 0.78); }
  .calc-sticky-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: #fff; }
  /* the soft fade under the header would sit on top of the result bar */
  body:has(.calc-sticky) .site-header::after { display: none; }
}
@media (max-width: 680px) {
  .calc-sticky { margin: 0 -20px 22px; padding: 10px 20px; }
}

/* Missing or out-of-range entries */
.calc-alert { margin-top: 8px; font-size: 0.92rem; font-weight: 600; color: #A23B3B; line-height: 1.4; }
.calc-fields input[aria-invalid="true"] { border-color: #A23B3B; outline-color: #A23B3B; }

/* Hints sitting under a slider row get a little air instead of butting against it */
.calc-fields .slider-row + .field-hint { margin-top: 8px; }
.calc-fields label + .field-hint { margin-top: -2px; }

/* Tax savings: the headline result leads the panel */
.tax-highlight.tax-highlight-top { margin-top: 0; margin-bottom: 20px; }

/* FHA vs. Conventional: Item | Conventional | FHA */
.calc-result .fc-table { table-layout: fixed; }
.fc-table th, .fc-table td {
  padding: 9px 0 9px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top;
}
.fc-table thead th {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
}
.fc-table thead th:first-child, .fc-table th[scope="row"] { text-align: left; padding-left: 0; width: 40%; }
.fc-table th[scope="row"] { font-weight: 400; color: var(--ink-soft); }
.calc-result .fc-table td { font-weight: 600; color: var(--ink); }
.fc-sub { display: block; font-size: 0.82rem; color: var(--ink-faint); }
.calc-result .fc-table td.fc-best { background: var(--brass-tint); box-shadow: inset 0 -2px 0 var(--brass); padding-right: 6px; }
.fc-ltv-hint { margin-top: 12px; }
@media (max-width: 680px) {
  .calc-result .fc-table { display: table; font-size: 0.8rem; }
  .fc-table th, .fc-table td { padding-left: 6px; }
  .fc-table thead th:first-child, .fc-table th[scope="row"] { width: 34%; }
  .fc-table thead th { font-size: 0.66rem; letter-spacing: 0.06em; }
  .fc-sub { font-size: 0.74rem; }
}

/* Lead forms: visible labels above each field; a larger, regular-weight consent box */
.pq-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pq-field label { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-soft); }
.pq-optional { font-weight: 400; color: var(--ink-faint); }
.lc-consent-row { font-weight: 400; }
.lc-consent-row input[type="checkbox"] { width: 24px; height: 24px; margin-top: 0; }

/* Loan Finder results: "Your answers" folds away below the recommendation */
details.quiz-recap { margin: 6px 0 24px; padding: 0; }
details.quiz-recap > summary { cursor: pointer; margin: 0; padding: 14px 20px; list-style-position: inside; }
details.quiz-recap[open] > summary { border-bottom: 1px solid var(--line); }
details.quiz-recap .quiz-recap-list { padding: 14px 20px 16px; }
.quiz-power + .quiz-why { margin-top: 4px; }

/* Loan Finder hero: a jump straight to the questions, on phones only */
.quiz-jump-row { display: none; }
@media (max-width: 680px) {
  .quiz-jump-row { display: block; margin: 14px 0 18px; }
}
/* Notes on the tinted lead-form panel: one step darker so they clear 4.5:1 contrast */
.prequal .calc-note:not(.error):not(.success) { color: var(--ink-soft); }

/* ---------- Card hover: every highlightable card flips to navy with light text ---------- */
:is(.service-card, .program, .resource-card, .post-list .post-row, .term-card, .primer-card) {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
:is(.service-card, .program, .resource-card, .post-list .post-row, .term-card, .primer-card):hover {
  background: var(--navy-dark); border-color: var(--navy-dark); color: rgba(247, 244, 237, 0.86);
}
:is(.service-card, .program, .resource-card, .post-list .post-row, .term-card, .primer-card):hover :is(h2, h3, h4, strong, li, a:not(.chip):not(.btn)) { color: #fff; }
:is(.service-card, .program, .resource-card, .post-list .post-row, .term-card, .primer-card):hover :is(p, .meta, .term-def, .term-ex) { color: rgba(247, 244, 237, 0.82); }
/* gold labels (e.g. DOWN PAYMENT, 03 · FINANCING TEAM, categories, "Learn more") turn champagne */
:is(.service-card, .program, .resource-card, .post-list .post-row, .term-card, .primer-card):hover :is(li > span, .service-team, .cat, .learn, .kicker, .term-cat) { color: #E4CE9F; }
:is(.service-card, .program, .resource-card, .post-list .post-row, .term-card, .primer-card):hover :is(li, ul) { border-color: rgba(247, 244, 237, 0.22); }
:is(.term-card, .primer-card):hover .chip { color: #E4CE9F; border-color: rgba(228, 206, 159, 0.6); background: transparent; }
:is(.term-card, .primer-card):hover .chip:hover { background: #E4CE9F; color: var(--navy-dark); }
/* the button inside a card turns cream so it still reads as a button on navy */
.service-card:hover .btn { background: var(--cream); color: var(--navy-dark); border-color: var(--cream); }

/* Navy cards: nothing keeps its dark day-time color — all text goes light, then labels go champagne. */
:where(.service-card, .program, .resource-card, .post-list .post-row, .term-card, .primer-card):hover :where(*:not(.btn):not(.chip)) { color: inherit; }
:is(.service-card, .program, .resource-card, .post-list .post-row, .term-card, .primer-card):hover :is(h2, h3, h4) { color: #fff; }
:is(.service-card, .program, .resource-card, .post-list .post-row, .term-card, .primer-card):hover :is(a:not(.btn):not(.chip), strong, b, [class*="alias"], [class*="aka"]) { color: #F2DFB4; }
/* Navy cards: every small label, tag and badge in bright champagne so it reads on navy. */
:is(.service-card, .program, .resource-card, .post-list .post-row, .term-card, .primer-card):hover :is(.cat-pill, .badge, li > span, .service-team, .cat, .learn, .kicker, .term-cat, .meta) {
  color: #F2DFB4; border-color: rgba(242, 223, 180, 0.7);
}
.term-card:hover .term-ex { background: rgba(255, 255, 255, 0.08); border-color: #F2DFB4; color: rgba(247, 244, 237, 0.9); }
.term-card:hover .term-ex :is(strong, b) { color: #F2DFB4; }
.term-card:hover .term-aka, .term-card:hover .term-aka span { color: #F2DFB4; }

/* "From today to move-in day": the four step cards share rows, so the labels, titles
   (Plan, Find, Finance, Build & Move In), text and links line up across the cards even
   when a label wraps to two lines. */
@supports (grid-template-rows: subgrid) {
  .path-steps .path-step { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .path-steps .path-step .step-label { align-self: start; }
  .path-steps .path-step .card-link { align-self: start; margin-top: 0; }
}

/* Homepage About: the name sits right on top of the credentials line, like a signature block. */
.about-text .about-licenses-name { margin: 30px 0 0; line-height: 1.2; }
.about-text .about-licenses-name + .about-licenses { margin-top: 10px; padding-top: 14px; }

/* Homepage hero: a lighter shade at the very top, so the photo shows behind the logo and menu
   (the menu keeps a soft text shadow so it stays readable). */
@media (min-width: 681px) {
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(18,16,13,0.5) 0%, rgba(18,16,13,0.28) 18%, rgba(18,16,13,0) 40%),
      linear-gradient(90deg, rgba(24,22,18,0.94) 0%, rgba(24,22,18,0.78) 40%, rgba(24,22,18,0) 70%);
  }
  .site-header.over-hero:not(.scrolled) { background: linear-gradient(180deg, rgba(18, 16, 13, 0.32) 0%, rgba(18, 16, 13, 0.14) 65%, rgba(18, 16, 13, 0) 100%); }
  .site-header.over-hero:not(.scrolled) .nav-links > li > :is(a, button) { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
}
/* Homepage Meet Ariane: headline in the site's standard section style, gold italic second half */
#about .about-text h2.about-head { font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 700; line-height: 1.08; margin-bottom: 24px; }
#about .about-text h2.about-head em { display: block; font-style: italic; color: var(--brass-dark); }
.calc-teaser-text .lf-note { font-size: 0.92rem; color: var(--ink-soft); margin: 18px 0 0; }

/* Browse Loans (main.js), every screen size: loan names only, each with a hairline plus;
   a tap or click opens that loan's details. Compact, so browsers can hone in on one loan.
   Cards line up at the top, so opening one never stretches its neighbours. */
.intro-more { display: none; }
.primer-grid { gap: 12px; align-items: start; }
.primer-card { padding: 0; }
.primer-card h3 { margin: 0; font-size: 1.35rem; }
.primer-toggle {
  all: unset; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; box-sizing: border-box; padding: 18px 22px; cursor: pointer;
}
.primer-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; }
.primer-toggle::after {
  content: ""; flex-shrink: 0; width: 16px; height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 16px no-repeat;
}
.primer-card.open .primer-toggle::after { background: linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat; }
.primer-card:not(.open) > :not(h3) { display: none; }
.primer-card.open > :not(h3) { margin-left: 22px; margin-right: 22px; }
.primer-card.open { padding-bottom: 20px; }
.primer-card > p { min-height: 0; }
@media (max-width: 680px) {
  .primer-grid { gap: 10px; }
  .primer-card h3 { font-size: 1.3rem; }
  .primer-toggle { padding: 18px 20px; }
  .primer-card.open > :not(h3) { margin-left: 20px; margin-right: 20px; }

  .intro-clamp:not(.expanded) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .intro-more {
    all: unset; display: inline-block; margin-top: 8px; cursor: pointer;
    font-family: var(--sans); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--brass-dark);
    text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  }
}

/* Homepage: Meet Ariane on a warm stone tone so it reads apart from the team section below */
#about { background: #EDE6DA; }
#about .about-caption { border-top-color: rgba(21, 48, 79, 0.28); }

/* ---------- Hero photos on phones: full width, trimmed from the top ---------- */
/* Each phone hero frame takes its own photo's proportions plus 18% (js/main.js adds
   .fullw and sets aspect-ratio), so the whole width of every photo shows. The photo
   sits 12% above the frame: the trim comes mostly off the top (ceiling / sky), with a
   little spare at the bottom for the scroll drift (main.js moves it at most 5.5%). */
@media (max-width: 680px) {
  .page-hero.photo-hero-tall > .photo-hero-bg.fullw > img,
  .hero .hero-bg.fullw > img {
    top: -12% !important; left: 0 !important; width: 100% !important; height: auto !important;
    max-width: none !important; object-fit: fill !important; object-position: initial !important;
    aspect-ratio: auto !important; scale: none !important;
  }
}

/* ---------- Mortgage Glossary on phones: term names only, tap the plus to open ---------- */
/* Same pattern as Browse Loans (js/glossary.js adds .term-toggle and .open).
   Above phone width every definition shows and the name is plain text. */
.term-toggle { all: unset; display: inline; }
/* All screen sizes now: only the term shows, with a plus; click to open the definition. */
@media all {
  .term-card { padding: 0; margin-bottom: 10px; }
  .term-card h3 { display: block; margin: 0; font-size: 1.3rem; }
  .term-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; box-sizing: border-box; padding: 18px 20px; cursor: pointer;
  }
  .term-toggle:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; }
  .term-toggle::after {
    content: ""; flex-shrink: 0; width: 16px; height: 16px;
    background:
      linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat,
      linear-gradient(currentColor, currentColor) center / 1px 16px no-repeat;
  }
  .term-card.open .term-toggle::after { background: linear-gradient(currentColor, currentColor) center / 16px 1px no-repeat; }
  .term-card:not(.open) > :not(h3) { display: none; }
  .term-card.open > :not(h3) { margin-left: 20px; margin-right: 20px; }
  .term-card.open > .cat-pill { display: inline-block; margin-top: 0; }
  .term-card.open { padding-bottom: 20px; }
}

/* ---------- Section headlines: bold italic, black with a gold ending ---------- */
/* Every section headline matches the "Ariane Bibas Design" title on the Design page:
   bold italic serif, the opening words in black and the closing phrase (<em>) in gold.
   On dark sections the gold is the lighter champagne so it stays readable. */
h2.split-headline { font-weight: 700; font-style: italic; }
h2.split-headline em { font-style: italic; color: var(--brass); }
:is(.cta-dark, .bg-dark, #web-design-teaser, .seo-x, #before-after, .analysis-banner) h2.split-headline em,
h2.split-headline .gold-text { color: #E4CE9F; }

/* Browse Loans: the last box invites people to ask about anything not listed. */
.primer-card-more { background: var(--brass-tint); border-color: var(--brass); }
.primer-card-more h3 { font-style: italic; color: var(--brass-dark); }
.primer-card-more .btn-row { margin-top: 4px; gap: 10px; }
.primer-card-more:hover .btn-solid-blue { background: var(--cream); color: var(--navy-dark); border-color: var(--cream); }
.primer-card-more:hover .btn-outline-strong { background: transparent; color: var(--cream); border-color: var(--cream); }

/* ============================================================
   Gallery refinements (2026-10-05)
   Geometric uppercase labels (Jost), slower opacity-only fades,
   staggered grids that drift gently (js/frame-drift.js), and quiet
   circle-arrow links for secondary actions.
   ============================================================ */
:root { --label-font: "Jost", "Futura", "Century Gothic", var(--sans); }

/* ---------- Labels, menu and buttons: Jost, uppercase, tracked ---------- */
.kicker, .service-kicker, .about-text .kicker.about-tagline, .web-kicker,
.hero .kicker, .page-hero .kicker, .analysis-banner .kicker,
.service-team, .resource-card .cat, .path-step .step-label, .facts li span,
.quiz-count, .quiz-recap-label, .quiz-power span, .seo-report-title,
.search-result .sr-cat, .path-details-summary, .calc-result .big-label, .tax-stats span,
.footer-contact-label, .footer-title, .contact-ways span,
.site-footer h4, .site-footer .footer-h, .post-row .meta, .article .meta,
.program .badge, .term-card .cat-pill, .guide-head .cat-pill,
.ba-tag, .before-after figcaption, .pt-title, .drawing-sheet .sheet-no, .drawing-sheet .sheet-title,
.hero-name, .hero-disciplines li, .btn {
  font-family: var(--label-font); font-weight: 500; text-transform: uppercase;
}
.kicker, .service-kicker, .about-text .kicker.about-tagline, .web-kicker,
.hero .kicker, .page-hero .kicker, .analysis-banner .kicker {
  font-size: 0.8rem; letter-spacing: 0.16em; line-height: 1.4; margin-bottom: 14px;
}
/* "Meet Ariane." joins the other labels: small, uppercase, tracked. */
.about-text .kicker.about-tagline { font-style: normal; }
.service-team, .resource-card .cat, .path-step .step-label, .path-details-summary,
.site-footer h4, .site-footer .footer-h { letter-spacing: 0.16em; }
.hero-name { font-weight: 500; letter-spacing: 0.22em; }
.hero-disciplines li { font-weight: 400; }
.btn { letter-spacing: 0.14em; }
/* Desktop menu: Jost uppercase, kept on one line. */
@media (min-width: 1101px) {
  .nav-links > li > a:not(.btn), .nav-links .nav-dropdown-toggle {
    font-family: var(--label-font); font-size: 0.84rem; font-weight: 500;
    letter-spacing: 0.13em; text-transform: uppercase;
  }
  .nav-links a.nav-hot:not(.btn) { font-weight: 500; }
}

/* ---------- Softer, slower fades: opacity only ---------- */
.reveal { transform: none; transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal.visible { transform: none; }
.split-headline .w { transform: none; }
.reveal.visible .split-headline .w,
.reveal.visible.split-headline .w {
  transform: none; transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: var(--stagger, 0s);
}
.hero .split-headline .w,
.page-hero .split-headline .w { animation: wordFade 1s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(var(--stagger, 0s) + 0.15s); }
@keyframes wordFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transition: none; }
}

/* ---------- Staggered grids: alternate columns sit lower (desktop) ---------- */
/* The lowered frames keep their full height (equal negative bottom margin), and the
   grid gains the same room at the bottom so nothing overlaps what follows. */
@media (min-width: 1101px) {
  .portfolio-grid, .drawings-grid { padding-bottom: 40px; }
  .portfolio-grid > :nth-child(4n+2), .portfolio-grid > :nth-child(4n+4),
  .drawings-grid > :nth-child(4n+2), .drawings-grid > :nth-child(4n+4) { margin-top: 40px; margin-bottom: -40px; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .portfolio-grid { padding-bottom: 40px; }
  .portfolio-grid > :nth-child(3n+2) { margin-top: 40px; margin-bottom: -40px; }
}
@media (min-width: 1001px) and (max-width: 1100px) {
  .drawings-grid { padding-bottom: 40px; }
  .drawings-grid > :nth-child(4n+2), .drawings-grid > :nth-child(4n+4) { margin-top: 40px; margin-bottom: -40px; }
}
@media (max-width: 759px), (prefers-reduced-motion: reduce) {
  .portfolio-tile, .drawing-sheet, .resource-grid .resource-card { translate: none; }
}

/* ---------- Circle-arrow links: quiet secondary actions ---------- */
.circle-link, .card-link.circle-link, .learn.circle-link {
  position: relative; display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 54px 0 0; margin-top: 16px;
  font-family: var(--label-font); font-size: 0.8rem; font-weight: 500; line-height: 1.35;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy-dark); text-decoration: none;
  transition: color 0.25s ease;
}
/* Inside cards the link sits on the card's bottom edge, sized to its words. */
.learn.circle-link, .path-step .card-link.circle-link { margin-top: auto; align-self: flex-start; }
.learn.circle-link { display: inline-flex; padding-top: 0; }
.program .learn.circle-link { margin-top: auto; }
.program > p, .path-step > p { margin-bottom: 18px; }
.circle-link::before {
  content: ""; position: absolute; right: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px;
  box-sizing: border-box; border: 1px solid currentColor; border-radius: 50%;
  background: transparent; transition: background-color 0.3s ease;
}
.circle-link::after {
  content: ""; position: absolute; right: 13px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.5 3H11v6.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.5 3H11v6.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s ease;
}
.circle-link:hover, .card-link.circle-link:hover { color: var(--navy-dark); text-decoration: none; }
.circle-link:hover::before, .program:hover .learn.circle-link::before,
.circle-link:focus-visible::before, .program:focus-visible .learn.circle-link::before {
  background: rgba(21, 48, 79, 0.1);
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.circle-link:hover::after, .program:hover .learn.circle-link::after { transform: translate(1px, -1px); }
.circle-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
:is(.bg-dark, .cta-dark, .hero, .page-hero, .analysis-banner) .circle-link:not(.card-link):not(.learn) { color: var(--cream); }
@media (prefers-reduced-motion: reduce) {
  .circle-link::before, .circle-link::after { transition: none; }
}

/* Drawing sheets sit on one straight line — no stagger, no drift */
.drawings-grid > .drawing-sheet { margin-top: 0 !important; margin-bottom: 0 !important; translate: none !important; transform: none !important; }
.drawings-grid { align-items: start; }

/* Card headings are always bold (step cards, help cards, program cards) */
.path-step h3, .help-card h3, .program h3, .engagement-track h3 { font-weight: 700; }
/* Every step card ends with a "Contact Ariane" next step, aligned to the card bottom */
.path-step .step-cta { margin-top: auto; padding-top: 20px; }

/* ---------- Heroes fit on one screen (desktop) ---------- */
@media (min-width: 981px) {
  /* Page heroes: exactly one screen tall, tighter spacing */
  .page-hero.photo-hero-tall.under-nav,
  .photo-hero-tall.under-nav:has(img[src*="glossary-hero"]) { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 40px; }
  .page-hero h1 { font-size: min(clamp(2.4rem, 4.5vw, 3.6rem), 7.2vh); }
  .page-hero .lede { margin-top: 12px; }
  .photo-hero-tall .lede { max-width: 560px; }
  /* Licence block: small portrait beside the three licence lines */
  .photo-hero-tall .hero-lic-block { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
  .photo-hero-tall .hero-lic-badges { margin-bottom: 0 !important; }
  .photo-hero-tall .hero-lic-photo-frame { width: 104px; height: 104px; }
  .photo-hero-tall .hero-lic { margin-top: 0; line-height: 1.75; }
  .photo-hero-tall .hero-lic-block + .btn-row { margin-top: 22px !important; }
  /* Homepage hero: headline and spacing scale with screen height */
  .hero { min-height: 100vh; min-height: 100svh; padding-bottom: 36px; }
  .hero h1.hero-lead { font-size: min(clamp(2.8rem, 6vw, 5.2rem), 9vh); margin-bottom: 18px; }
  .hero-inner { max-width: 820px; }
  .hero .lede { margin-bottom: 22px; }
}
@media (min-width: 981px) {
  .hero .lede { max-width: 760px; font-size: min(1.12rem, 2.4vh); }
  .hero-disciplines li { margin-bottom: 4px; }
  .hero h1.hero-lead { margin-bottom: 14px; }
  .hero-identity { margin-bottom: 20px; }
}

/* ---------- Selected Projects: one long row of large photographs (Northworks-style) ----------
   The row starts in line with the page text and runs off the right edge of the screen, so
   there is always another project peeking in. Arrows (or a trackpad / swipe) move through it. */
.rail-shell { position: relative; margin-inline: calc(50% - 50vw); --tile-h: min(76vh, 860px); }
/* Edge to edge: exactly three photos fill the screen width, no margin on either side. */
.portfolio-rail {
  --rail-pad: 0px;
  display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad);
  padding: 0 var(--rail-pad) 4px; scrollbar-width: none; scroll-behavior: smooth;
}
.portfolio-rail::-webkit-scrollbar { display: none; }
.portfolio-rail:focus-visible { outline: 2px solid var(--brass); outline-offset: 6px; }
.portfolio-rail .portfolio-tile {
  flex: 0 0 auto; width: calc((100% - 12px) / 3); height: var(--tile-h);
  scroll-snap-align: start; position: relative; overflow: hidden; border-radius: 0; translate: none !important;
}
.portfolio-rail .portfolio-tile .pt-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.portfolio-rail .portfolio-tile img {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.7,.2,1) !important;
}
.portfolio-rail .portfolio-tile figcaption {
  position: absolute !important; inset: auto 0 0 0; border-top: 0; pointer-events: none;
  padding: 120px 28px 26px !important; display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.55) 100%) !important;
}
.portfolio-rail .pt-place { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.08rem; color: rgba(255,255,255,0.88); }
.portfolio-rail .portfolio-tile .pt-title {
  font-family: "Jost", "Futura", sans-serif; color: #fff; font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  font-weight: 500; letter-spacing: 0.06em; line-height: 1.15; text-decoration: none !important;
}
.portfolio-rail .pt-view { font-family: "Cormorant Garamond", Georgia, serif; font-size: 1rem; color: rgba(255,255,255,0.9); margin-top: 10px; }
.portfolio-rail .pt-view::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); margin-left: 10px; vertical-align: middle; }
@media (hover: hover) {
  .portfolio-rail .portfolio-tile:hover img { transform: scale(1.04); filter: none; }
  .portfolio-rail .portfolio-tile:hover .pt-view { text-decoration: underline; text-underline-offset: 4px; }
}
.rail-arrow {
  position: absolute; top: calc(var(--tile-h, min(76vh, 860px)) / 2); z-index: 2; translate: 0 -50%;
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,0.82); border: 1px solid rgba(21,48,79,0.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .35s ease, background .25s ease;
}
.rail-arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--navy-dark); stroke-width: 1.4; }
.rail-arrow:hover { background: #fff; }
.rail-arrow:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.rail-next { right: 28px; }
.rail-prev { left: 28px; }
@media (min-width: 761px) and (max-width: 1100px) { .portfolio-rail .portfolio-tile { width: calc((100% - 6px) / 2); } }
.rail-arrow:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .rail-shell { --tile-h: 120vw; }
  .portfolio-rail .portfolio-tile { width: 100%; }
  .portfolio-rail .portfolio-tile figcaption { padding: 80px 18px 18px !important; }
  .rail-arrow { width: 48px; height: 48px; }
  .rail-next { right: 12px; } .rail-prev { left: 12px; }
}
@media (prefers-reduced-motion: reduce) { .portfolio-rail { scroll-behavior: auto; } }

/* ---------- Articles: three cards on one straight line, taller photos to draw readers in ---------- */
.resource-grid { align-items: stretch; }
.resource-grid > .resource-card { margin-top: 0 !important; margin-bottom: 0 !important; translate: none !important; }
@media (min-width: 981px) {
  .resource-card .thumb { aspect-ratio: 4 / 3.4; }
  .resource-card .body { padding: 28px 28px 32px; }
  .resource-card h3 { font-size: 1.5rem; line-height: 1.2; }
  .resource-card p { font-size: 1rem; }
}

/* ---------- Slim bar (Northworks-style), desktop ----------
   A thin bar with the "ariane bibas" wordmark instead of the tall boxed logo. On the
   homepage there is no bar over the opening photo at all; it slides in once the hero has
   scrolled away (the + links in the hero lead to every team in the meantime). */
.nav-wordmark { display: none; }
@media (min-width: 981px) {
  :root { --nav-h: 60px; }
  .nav { height: var(--nav-h); padding-top: 0; }
  .site-header .nav-brand-mark { display: none; }
  .site-header .nav-wordmark {
    display: block; font-family: "Jost", "Futura", sans-serif; font-weight: 400;
    font-size: 1.22rem; letter-spacing: 0.34em; text-transform: lowercase; line-height: 1;
    color: var(--cream); white-space: nowrap;
  }
  .site-header { transition: transform 0.45s cubic-bezier(.2,.7,.2,1), opacity 0.35s ease, background 0.35s ease; }
  .site-header.nav-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }
  .site-header .nav-links .nav-dropdown-menu { margin-top: 0; }
}
/* Book a Call: gold instead of navy, everywhere it appears in the bar */
.nav-links a.btn-primary, .site-header .nav-links a.btn-primary {
  background: #C2A266; border-color: #C2A266; color: #14120E;
}
.nav-links a.btn-primary:hover, .site-header .nav-links a.btn-primary:hover {
  background: #D6BC86; border-color: #D6BC86; color: #14120E;
}
@media (max-width: 980px) {
  .site-header .nav-links.open a.btn-primary { background: #C2A266; border-color: #C2A266; color: #14120E; }
}
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }
@media (min-width: 981px) { .site-header.nav-hidden:focus-within { transform: none; opacity: 1; pointer-events: auto; } }
@media (min-width: 981px) {
  .site-header .nav-links a.btn-primary { padding-top: 9px; padding-bottom: 9px; }
  .page-hero.photo-hero-tall.under-nav,
  .photo-hero-tall.under-nav:has(img[src*="glossary-hero"]) { padding-top: calc(var(--nav-h) + 56px); }
}

/* ---------- Homepage, desktop: the boxed logo large at top left; words sit low ----------
   With no menu bar over the opening photo, the logo carries the brand on its own. The
   headline and text are anchored to the bottom so they cover less of the dining table. */
.hero-mark { display: none; }
@media (min-width: 981px) {
  .hero-inner > .hero-mark { display: block; height: min(196px, 22vh); width: auto; margin: 0 0 26px; }
  .hero { align-items: flex-end; }
  .hero h1.hero-lead { font-size: min(clamp(2.6rem, 5.4vw, 4.8rem), 8vh); }
}

/* Slim bar logo: the "ab" mark in its thin cream box, then the name beside it */
.nav-boxmark { display: none; }
@media (min-width: 981px) {
  .site-header .nav-brand { gap: 14px; }
  .site-header .nav-boxmark {
    display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
    border: 1.5px solid var(--cream); box-sizing: border-box;
  }
  .site-header .nav-boxmark img { width: 30px; height: 30px; display: block; }
  /* Homepage: no space wasted under the words, so they sit low and clear the logo */
  .hero > .wrap { padding-bottom: 0; }
}

/* ---------- Send a Message: the closing section on every page (Northworks-style) ----------
   Light grey-blue band; the four teams as a square photo grid on the left, a quiet
   underlined form on the right, and the round Submit whose arrow turns to point the way. */
.contact-band { background: #E6E1D9; color: var(--navy-dark); padding: 76px 0; }
.cb-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.cb-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cb-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; }
.cb-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.cb-tile[href*="real-estate"] img { object-position: 60% 50%; }
.cb-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 55%, rgba(10,10,10,0.5) 100%); }
.cb-tile span {
  position: absolute; left: 16px; bottom: 14px; z-index: 1; color: #fff;
  font-family: var(--label-font); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.cb-tile:hover img { transform: scale(1.05); }
.cb-tile:focus-visible { outline: 2px solid var(--navy-dark); outline-offset: 3px; }
.contact-band .kicker { color: var(--label); }
.contact-band h2.split-headline { color: var(--navy-dark); font-size: clamp(2rem, 3.2vw, 2.8rem); line-height: 1.08; margin: 10px 0 12px; text-align: left; }
.contact-band h2.split-headline em { color: var(--brass); }
.cb-lede { color: var(--ink-soft); font-size: 1.02rem; max-width: 600px; margin: 0 0 22px; }
.cb-form { display: grid; gap: 16px; }
.cb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.cb-field { display: grid; gap: 2px; }
.cb-field > span { font-family: var(--label-font); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.cb-field > span i { font-style: normal; text-transform: none; letter-spacing: 0.02em; opacity: 0.8; }
.cb-field :is(input, select, textarea) {
  font: inherit; font-size: 1rem; color: var(--ink); background: transparent; width: 100%;
  border: 0; border-bottom: 1px solid rgba(21, 48, 79, 0.38); border-radius: 0; padding: 8px 0; resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cb-field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315304F' stroke-width='1.2'/%3E%3C/svg%3E") right 2px center / 11px no-repeat; padding-right: 20px; }
.cb-field :is(input, select, textarea):focus { outline: none; border-bottom-color: var(--navy-dark); box-shadow: 0 1px 0 var(--navy-dark); }
.cb-field :is(input, textarea)[aria-invalid="true"] { border-bottom-color: #A3341F; box-shadow: 0 1px 0 #A3341F; }
.cb-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.74rem; line-height: 1.5; color: var(--ink-soft); }
.cb-consent input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--navy-dark); }
.cb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.cb-actions { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; margin-top: 4px; }
.cb-status { margin: 0; font-size: 0.95rem; color: var(--navy-dark); }
.cb-status.is-error { color: #A3341F; }

/* Submit: the word, then an arrow inside a thin circle. On hover the arrow swings from
   pointing up-and-out to pointing straight ahead and reaches past the circle, which draws in. */
.submit-circle {
  position: relative; display: inline-flex; align-items: center; gap: 16px; cursor: pointer;
  background: none; border: 0; padding: 22px 6px 22px 0; color: var(--navy-dark);
  font-family: var(--label-font); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
}
.submit-circle .sc-arrow { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.submit-circle .sc-ring {
  position: absolute; right: -19px; top: 50%; width: 72px; height: 72px; margin-top: -36px;
  border: 1px solid rgba(21, 48, 79, 0.35); border-radius: 50%; pointer-events: none;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), border-color 0.3s ease;
}
.submit-circle:hover .sc-arrow, .submit-circle:focus-visible .sc-arrow { transform: translateX(7px) rotate(45deg); }
.submit-circle:hover .sc-ring, .submit-circle:focus-visible .sc-ring { transform: translateX(-8px) scale(0.76); border-color: var(--navy-dark); }
.submit-circle:focus-visible { outline: 2px solid var(--navy-dark); outline-offset: 6px; }
.submit-circle[disabled] { opacity: 0.55; cursor: wait; }

.cb-ways { list-style: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 36px; margin: 30px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(21, 48, 79, 0.18); }
.cb-ways span { display: block; font-family: var(--label-font); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); margin-bottom: 2px; }
.cb-ways a:not(.circle-link) { color: var(--navy-dark); font-size: 0.98rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cb-ways .circle-link { color: var(--navy-dark); }
@media (max-width: 980px) {
  .cb-grid { grid-template-columns: 1fr; gap: 36px; }
  .cb-mosaic { order: 2; grid-template-columns: repeat(4, 1fr); }
  .cb-tile span { left: 8px; bottom: 8px; font-size: 0.62rem; letter-spacing: 0.1em; }
}
@media (max-width: 600px) {
  .contact-band { padding: 56px 0; }
  .cb-row { grid-template-columns: 1fr; }
  .cb-mosaic { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .submit-circle .sc-arrow, .submit-circle .sc-ring, .cb-tile img { transition: none; }
}

/* Every diagonal arrow turns to point straight ahead on hover */
.circle-link::before { transition: background-color 0.3s ease, transform 0.5s cubic-bezier(.2,.7,.2,1); }
.circle-link::after { transition: transform 0.5s cubic-bezier(.2,.7,.2,1); }
.circle-link:hover::after, .circle-link:focus-visible::after, .program:hover .learn.circle-link::after { transform: translateX(3px) rotate(45deg); }
.ne-arrow { display: inline-block; transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
a:hover > .ne-arrow, a:focus-visible > .ne-arrow { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .ne-arrow { transition: none; }
}
.cb-consent[hidden] { display: none; }
.contact-band { padding: 64px 0; }
@media (min-width: 981px) {
  .cb-grid { align-items: stretch; }
  .cb-mosaic { grid-template-rows: 1fr 1fr; }
  .cb-mosaic .cb-tile { aspect-ratio: auto; min-height: 180px; }
}
.submit-circle { gap: 26px; }
.submit-circle:hover .sc-ring, .submit-circle:focus-visible .sc-ring { transform: translateX(-3px) scale(0.76); }

/* Homepage hero: lighter, airier shade behind the words; one quiet Book a Call */
@media (min-width: 981px) {
  .hero-bg::after {
    background:
      linear-gradient(180deg, rgba(18,16,13,0.18) 0%, rgba(18,16,13,0) 30%),
      linear-gradient(90deg, rgba(24,22,18,0.74) 0%, rgba(24,22,18,0.54) 38%, rgba(24,22,18,0) 66%);
  }
  .hero .hero-lead, .hero .hero-name, .hero-disciplines a { text-shadow: 0 1px 14px rgba(0,0,0,0.35); }
}
.hero .submit-circle.hero-cta { color: var(--cream); margin-top: 18px; padding-top: 18px; padding-bottom: 18px; text-decoration: none; }
.hero .hero-cta .sc-ring { border-color: rgba(243, 239, 231, 0.55); }
.hero .hero-cta:hover .sc-ring, .hero .hero-cta:focus-visible .sc-ring { border-color: var(--cream); }
.hero .hero-cta:focus-visible { outline-color: var(--cream); }
.hero .submit-circle.hero-cta { gap: 34px; align-self: flex-start; width: auto; }

/* ---------- Staggered fade-up reveal (Northworks-style) ----------
   When the project row scrolls into view, the photos appear slowly one after another from
   left to right: each fades in while rising about 80px, then settles onto the common line.
   It replays each time the row comes back on screen (js/project-rail.js). */
.js-stagger .portfolio-rail .portfolio-tile {
  opacity: 0; transform: translateY(80px);
  transition: opacity 0s, transform 0s;
}
.js-stagger .portfolio-rail.is-in .portfolio-tile {
  opacity: 1; transform: none;
  transition: opacity 1.8s ease, transform 2.4s cubic-bezier(.16,.84,.3,1);
  transition-delay: calc(var(--i, 0) * 450ms);
}
.js-stagger .portfolio-rail.is-settled .portfolio-tile { transition-delay: 0ms; }
@media (prefers-reduced-motion: reduce) {
  .js-stagger .portfolio-rail .portfolio-tile { opacity: 1; transform: none; transition: none; }
}
/* Hero team links: heavier and solid white so they read clearly over the photo */
.hero .hero-disciplines li { font-weight: 600; color: #fff; }
.hero .hero-disciplines li::before, .hero .hero-disciplines li::after { height: 1.5px; }
.hero .hero-disciplines li::after { width: 1.5px; height: 11px; }
.hero .hero-disciplines a { text-shadow: 0 1px 10px rgba(0,0,0,0.55); }

/* ---------- Lines that were fading out: stronger hairlines site-wide ---------- */
:root { --line: #C8C0B0; --hair: rgba(21, 48, 79, 0.28); }
:is(#principal, #about) .about-licenses, .about-licenses { border-top: 1.5px solid rgba(21, 48, 79, 0.35); }
.cb-ways { border-top-color: rgba(21, 48, 79, 0.32); }
.cb-field :is(input, select, textarea) { border-bottom-color: rgba(21, 48, 79, 0.5); }

/* ---------- Inner-page heroes, desktop: the boxed logo above the words, and the words
   sitting low on a full-screen photo, the same composition as the homepage ---------- */
.page-mark { display: none; }
@media (min-width: 981px) {
  .page-hero.under-nav { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100vh; min-height: 100svh; padding-bottom: 44px !important; }
  .page-hero.under-nav > .wrap { width: 100%; }
  .page-mark { display: block; height: min(150px, 16vh); width: auto; margin: 0 0 22px; }
  #web-hero.under-nav { padding-top: calc(var(--nav-h) + 40px); }
  #web-hero .web-hero-grid { align-items: end; }
}

/* Hero calls to action everywhere: the round-arrow link (arrow turns forward on hover) */
.page-hero .submit-circle.hero-cta { color: var(--cream); padding-top: 16px; padding-bottom: 16px; gap: 34px; text-decoration: none; }
.page-hero .hero-cta .sc-ring { border-color: rgba(243, 239, 231, 0.55); }
.page-hero .hero-cta:hover .sc-ring, .page-hero .hero-cta:focus-visible .sc-ring { border-color: var(--cream); }
.page-hero .hero-cta:focus-visible { outline-color: var(--cream); }
.page-hero .btn-row:has(.hero-cta) { gap: 8px 64px; align-items: center; }
@media (min-width: 981px) { .page-hero.under-nav { padding-bottom: 30px !important; } }

/* Web Design hero: the website preview starts level with the logo, and the silk waves and
   their glow are mirrored so the light sits top right, away from the words. */
@media (min-width: 981px) {
  #web-hero .web-hero-grid { align-items: start; }
  #web-hero .browser-mock { margin-top: 0; }
}
#web-hero .path-fx-layer { transform: scaleX(-1); }

/* ---------- Circle-arrow buttons on phones: small, tight, still ---------- */
/* No hover motion on phones (a tap left it half-animated). A small 1px circle sits
   centered on a diagonal arrow drawn at 1px, close to the word. */
@media (max-width: 680px) {
  .submit-circle { gap: 22px; padding: 10px 6px 10px 0; font-size: 0.95rem; }
  .submit-circle .sc-arrow { width: 16px; height: 16px; stroke-width: 1.5; transition: none; }
  .submit-circle .sc-ring { width: 36px; height: 36px; margin-top: -18px; right: -4px; border-width: 1px; transition: none; }
  .submit-circle:hover .sc-arrow, .submit-circle:focus-visible .sc-arrow,
  .submit-circle:hover .sc-ring, .submit-circle:focus-visible .sc-ring { transform: none; }
  .hero .submit-circle.hero-cta, .page-hero .submit-circle.hero-cta { gap: 22px; margin-top: 0; padding-top: 10px; padding-bottom: 10px; }
  .page-hero .btn-row:has(.hero-cta), .hero .btn-row:has(.hero-cta) { gap: 6px 36px; }
}

/* Web Design hero: the three circle-arrow links sit in one row under the words and the
   preview, spaced so the circles never touch. The silk waves reach further toward the
   centre before fading, and stay faintly visible behind the words. */
#web-hero .web-hero-ctas { grid-column: 1 / -1; margin-top: 0; gap: 12px 56px; }
#web-hero .web-hero-ctas .circle-link { color: var(--cream); margin-top: 0; }
#web-hero .web-hero-ctas .circle-link:hover { color: #fff; }
#web-hero .fabric-mask {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0,0,0,0.45) 78%, rgba(0,0,0,0.15) 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 45%, rgba(0,0,0,0.45) 78%, rgba(0,0,0,0.15) 100%);
}
@media (max-width: 680px) {
  #web-hero .web-hero-ctas { gap: 6px 36px; }
}

/* Contact band: warm grey, with the big boxed logo on the left (Northworks-style) in place of
   the photo mosaic. Submit uses the same small circle-arrow as Book a Call. */
.cb-mark { display: flex; align-items: center; justify-content: center; }
.cb-mark img { display: block; width: min(100%, 380px); height: auto; }
.cb-submit { background: none; border: 0; cursor: pointer; margin-top: 0; }
.cb-submit[disabled] { opacity: 0.55; cursor: wait; }
.cb-submit:focus-visible { outline: 2px solid var(--navy-dark); outline-offset: 6px; }
@media (max-width: 980px) {
  .cb-mark { order: 2; justify-content: flex-start; }
  .cb-mark img { width: 200px; }
}

/* Branding, Web & Print page: tighter. Shorter gaps between sections, a one-line
   "every website" note under the services, and a compact FAQ at the end. */
#web-hero ~ .section { padding-top: 48px !important; padding-bottom: 48px !important; }
#web-hero ~ .section .section-head { margin-bottom: 28px; }
#seo-care .section-head { margin-bottom: 0; }
#seo-care .seo-care-note { margin-top: 14px; }
.web-includes { max-width: 860px; margin: 28px auto 0; text-align: center; color: var(--ink-soft); font-size: 0.98rem; }
.web-includes strong { color: var(--navy-dark); }
#web-faq .design-disclosure { max-width: 820px; margin: 36px auto 0; }
@media (max-width: 680px) { #web-hero ~ .section { padding-top: 36px !important; padding-bottom: 36px !important; } }

/* ---------- Send a Message sits inside the footer ----------
   One navy block with the blueprint: the message form on top (logo in the left third,
   form from one-third across), a hairline, then the footer links. The footer's own logo
   is hidden since the one beside the form already signs it. */
.site-footer:has(> .contact-band) { padding-top: 0; }
.site-footer:has(> .contact-band) .footer-mark { display: none; }
.site-footer > .contact-band { background: transparent; color: var(--cream); padding: 80px 0 0; }
.site-footer > .contact-band .cb-grid {
  grid-template-columns: 1fr 2fr; align-items: start; gap: 48px;
  padding-bottom: 64px; margin-bottom: 64px; border-bottom: 1px solid rgba(243, 239, 231, 0.24);
}
.site-footer .cb-mark { justify-content: flex-start; padding-top: 6px; }
.site-footer .cb-mark img { width: 190px; }
.site-footer .contact-band .kicker, .site-footer .cb-field > span, .site-footer .cb-ways span { color: #E4CE9F; }
.site-footer .contact-band h2.split-headline { color: var(--cream); }
.site-footer .contact-band h2.split-headline em { color: #E4CE9F; }
.site-footer .cb-lede, .site-footer .cb-consent { color: rgba(243, 239, 231, 0.78); }
.site-footer .cb-field :is(input, select, textarea) { color: var(--cream); border-bottom-color: rgba(243, 239, 231, 0.4); }
.site-footer .cb-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F3EFE7' stroke-width='1.2'/%3E%3C/svg%3E"); }
.site-footer .cb-field select option { color: var(--ink); }
.site-footer .cb-field :is(input, select, textarea):focus { border-bottom-color: var(--cream); box-shadow: 0 1px 0 var(--cream); }
.site-footer .cb-status { color: var(--cream); }
.site-footer .cb-status.is-error { color: #F2B8A8; }
.site-footer .cb-ways { border-top-color: rgba(243, 239, 231, 0.18); }
.site-footer .contact-band a, .site-footer .contact-band a:hover { background: none; border-color: transparent; }
.site-footer .cb-ways a:not(.circle-link) { color: var(--cream); }
.site-footer .contact-band .circle-link, .site-footer .contact-band .circle-link:hover { color: var(--cream); }
.site-footer .cb-submit:focus-visible { outline-color: var(--cream); }
.site-footer .cb-consent input { accent-color: #E4CE9F; }
@media (max-width: 980px) {
  .site-footer > .contact-band .cb-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-footer .cb-mark { order: 0; }
  .site-footer .cb-mark img { width: 130px; }
}
@media (max-width: 680px) {
  .site-footer > .contact-band { padding-top: 56px; }
  .site-footer > .contact-band .cb-grid { padding-bottom: 44px; margin-bottom: 44px; }
}
.site-footer .contact-band .circle-link { padding: 0 54px 0 0; border: 0; }
.site-footer .contact-band a { margin: 0; border-radius: 0; }
.site-footer .cb-ways a:not(.circle-link) { padding: 0; }
.site-footer .contact-band .circle-link { margin-top: 0; }

/* Footer message area, compact: form starts close to the logo, tighter rows top to bottom */
.site-footer > .contact-band { padding-top: 52px; }
.site-footer > .contact-band .cb-grid { padding-bottom: 40px; margin-bottom: 40px; }
@media (min-width: 981px) {
  .site-footer > .contact-band .cb-grid { grid-template-columns: 190px minmax(0, 860px); gap: 64px; }
}
.site-footer .contact-band h2.split-headline { margin: 6px 0 8px; }
.site-footer .cb-lede { margin-bottom: 12px; }
.site-footer .cb-form, .site-footer .cb-row { row-gap: 8px; }
.site-footer .cb-field :is(input, select, textarea) { padding: 5px 0; }
.site-footer .cb-field textarea { min-height: 0; height: 3.2em; }
.site-footer .cb-ways { margin-top: 18px; padding-top: 14px; gap: 10px 32px; }

/* Web Design hero has no photo to anchor the bottom, so its content sits centred, a touch high */
@media (min-width: 981px) {
  #web-hero.under-nav { justify-content: center; padding-bottom: 72px !important; }
}
.hero-lic-photo[src*="ariane-face"] { object-position: 50% 50%; }

/* Inner-page heroes, desktop: everything starts at the same spot, the logo a third of the way
   down the screen, with the title, short intro, licence photo and buttons stacked below it.
   (Branding keeps its own centred layout, since it has no photo behind it.) */
@media (min-width: 981px) {
  .page-hero.under-nav:not(#web-hero) { justify-content: flex-start; padding-top: 33vh; padding-top: 33svh; }
}

/* The arrow turn also shows when the computer is set to reduce motion (it just snaps instead
   of gliding), and hovering a whole linked card turns the arrow inside it. */
a:hover .circle-link::after, a:hover .sc-arrow { transform: translateX(3px) rotate(45deg); }
@media (max-width: 680px) { a:hover .circle-link::after, a:hover .sc-arrow { transform: none; } }
/* Loan Finder hero: the jump to the questions shows on every screen size */
.quiz-jump-row.quiz-jump-all { display: block; margin: 18px 0 0; }

/* ---------- Branding page: brand storyboard ----------
   Eight small boards that tell how the Ariane Bibas brand was pulled together, laid out
   like a brand-guidelines book: mark, palette, type, photo overlay, stationery, signage,
   social, website. Every board is drawn in HTML and scales with its card (cqw units). */
.sb-head { max-width: 640px; margin: 8px 0 26px; }
.sb-head h3.split-headline { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.1; margin: 8px 0 8px; color: var(--navy-dark); }
.sb-head h3.split-headline em { color: var(--brass); }
.sb-head p { margin: 0; color: var(--ink-soft); }
.storyboard { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
.sb-card { margin: 0; }
.sb-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; container-type: inline-size; background: #fff; box-shadow: 0 1px 0 rgba(21,48,79,0.08), 0 14px 30px -18px rgba(21,48,79,0.45); }
.sb-art img { display: block; }
.sb-cap { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding-top: 14px; border-top: 0; }
.sb-no { grid-row: span 2; font-family: var(--label-font); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--brass); padding-top: 3px; }
.sb-cap h4 { margin: 0 0 4px; font-family: var(--label-font); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-dark); }
.sb-cap p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); }

/* 01 mark */
.sb-mark { background: #FAF8F4; }
.sb-rule { position: absolute; left: 6cqw; right: 6cqw; top: 5cqw; padding-bottom: 1.6cqw; border-bottom: 1px solid rgba(21,48,79,0.35); font-family: var(--label-font); font-size: 2.6cqw; letter-spacing: 0.08em; color: var(--navy-dark); }
.sb-rule b { color: var(--brass); font-weight: 400; }
.sb-mark img { position: absolute; width: 30cqw; height: auto; left: 50%; top: 54%; transform: translate(-50%, -50%); }
.sb-arc { position: absolute; width: 60cqw; height: 60cqw; left: -30cqw; bottom: -34cqw; border-radius: 50%; background: radial-gradient(circle at 60% 35%, #fff, #E9E4DA); box-shadow: 0 0 0 9cqw rgba(233,228,218,0.55); }

/* 02 palette */
.sb-palette { display: flex; }
.sb-palette > span { flex: 1; background: var(--c); position: relative; }
.sb-palette i { position: absolute; left: 0; right: 0; bottom: 5cqw; text-align: center; font-style: normal; font-family: var(--label-font); font-size: 2.4cqw; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); }
.sb-palette .lt i { color: var(--navy-dark); }

/* 03 type */
.sb-type { background: #15304F; color: var(--cream); display: flex; align-items: center; gap: 6%; padding: 0 8%; }
.sb-aa { font-family: var(--serif); font-size: 30cqw; line-height: 1; font-style: italic; color: #E4CE9F; }
.sb-type-list { display: grid; gap: 2.4cqw; border-left: 1px solid rgba(243,239,231,0.3); padding-left: 5cqw; }
.sb-type-list em { font-family: var(--serif); font-size: 5.4cqw; }
.sb-type-list b { font-family: var(--label-font); font-weight: 500; font-size: 2.8cqw; letter-spacing: 0.16em; }
.sb-type-list small { font-family: var(--sans); font-size: 3cqw; opacity: 0.8; }

/* 04 photo + overlay */
.sb-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sb-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21,48,79,0.94) 0%, rgba(21,48,79,0.7) 42%, rgba(21,48,79,0) 78%); }
.sb-photo-copy { position: absolute; z-index: 1; left: 7cqw; top: 50%; transform: translateY(-50%); display: grid; gap: 4cqw; color: var(--cream); font-family: var(--serif); font-size: 6.4cqw; line-height: 1.08; }
.sb-photo-copy img { width: 14cqw; height: auto; }
.sb-photo-copy em { color: #E4CE9F; }

/* 05 stationery */
.sb-stationery { background: #E6E1D9; }
.sb-bc { position: absolute; width: 36cqw; height: 21cqw; left: 8cqw; box-shadow: 0 2cqw 4cqw -2cqw rgba(0,0,0,0.35); }
.sb-bc img { height: auto; }
.sb-bc-dark { top: 12cqw; background: #15304F; display: grid; place-items: center; }
.sb-bc-dark img { width: 10cqw; }
.sb-bc-light { top: 40cqw; background: #fff; border-right: 1.6cqw solid #15304F; padding: 3cqw; }
.sb-bc-light img { width: 7cqw; margin-bottom: 3cqw; }
.sb-bc-light b { display: block; font-family: var(--serif); font-size: 3.2cqw; color: var(--navy-dark); font-weight: 600; }
.sb-bc-light small { display: block; font-family: var(--label-font); font-size: 1.9cqw; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); }
.sb-letter { position: absolute; right: 9cqw; top: 8cqw; bottom: 8cqw; width: 34cqw; background: #fff; border-bottom: 1.2cqw solid #15304F; padding: 4cqw; box-shadow: 0 2cqw 4cqw -2cqw rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 2cqw; }
.sb-letter img { width: 8cqw; height: auto; margin: 0 0 4cqw auto; }
.sb-letter i { display: block; height: 1cqw; background: rgba(21,48,79,0.16); }
.sb-letter i.short { width: 60%; }

/* 06 signage */
.sb-sign { background: linear-gradient(180deg, #EEF0F2 0 78%, #D9D6D0 78%); display: flex; justify-content: center; align-items: flex-end; gap: 7%; padding-bottom: 6%; }
.sb-roll { position: relative; width: 26cqw; height: 58cqw; overflow: hidden; border-top: 1.4cqw solid #B9BCC0; box-shadow: 0 2cqw 4cqw -2cqw rgba(0,0,0,0.4); display: flex; flex-direction: column; padding: 4cqw 3.4cqw; gap: 6cqw; font-family: var(--serif); font-size: 4.3cqw; line-height: 1.08; }
.sb-roll img { height: auto; }
.sb-roll-dark { background: #15304F; color: var(--cream); }
.sb-roll-dark::after { content: ""; position: absolute; width: 50cqw; height: 50cqw; border-radius: 50%; right: -30cqw; bottom: -22cqw; background: rgba(132,109,31,0.35); }
.sb-roll-dark img { width: 11cqw; }
.sb-roll-dark em { color: #E4CE9F; }
.sb-roll-photo { background: #FAF8F4; color: var(--navy-dark); }
.sb-roll-photo .sb-roll-logo { width: 11cqw; }
.sb-roll-photo em { color: var(--brass); }
.sb-roll-img { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44%; object-fit: cover; clip-path: ellipse(90% 100% at 50% 100%); }

/* 07 social */
.sb-social { background: #F3EFE7; display: grid; place-items: center; }
.sb-phone { width: 36cqw; height: 66cqw; margin-top: 12cqw; border: 1.6cqw solid #1B1B1B; border-bottom: 0; border-radius: 6cqw 6cqw 0 0; background: #fff; padding: 5cqw 2.4cqw 0; display: flex; flex-direction: column; gap: 2cqw; }
.sb-post-head { display: flex; align-items: center; gap: 2cqw; font-family: var(--sans); font-size: 2.4cqw; color: #222; }
.sb-post-head img { width: 5.4cqw; height: auto; }
.sb-post { position: relative; aspect-ratio: 1; background: #15304F; overflow: hidden; color: var(--cream); font-family: var(--serif); font-size: 3.6cqw; line-height: 1.08; padding: 3cqw; }
.sb-post img { position: absolute; width: 22cqw; height: 22cqw; right: -5cqw; bottom: -5cqw; border-radius: 50%; object-fit: cover; }
.sb-post em { color: #E4CE9F; }
.sb-post > span { position: relative; }

/* 08 website */
.sb-web { background: #15304F; display: grid; place-items: center; }
.sb-web::before { content: ""; position: absolute; width: 70cqw; height: 70cqw; border-radius: 50%; left: -26cqw; top: -30cqw; border: 1px solid rgba(228,206,159,0.35); }
.sb-browser { position: relative; width: 78cqw; background: #EDE9E1; padding: 4cqw 0 0; box-shadow: 0 3cqw 6cqw -3cqw rgba(0,0,0,0.5); }
.sb-browser i { position: absolute; top: 1.4cqw; left: 2cqw; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #C9C3B8; }
.sb-browser i:nth-child(2) { left: 4.4cqw; } .sb-browser i:nth-child(3) { left: 6.8cqw; }
.sb-browser img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

@media (max-width: 1100px) { .storyboard { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  /* Phones: the boards scroll sideways like a film strip */
  .storyboard { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin-right: -16px; padding-right: 16px; padding-bottom: 6px; }
  .sb-card { scroll-snap-align: start; }
}

/* ---------- Loan Finder: the questions in a card over the hero photo (computers) ---------- */
@media (min-width: 981px) {
  .lf-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 56px; align-items: end; }
  #quiz-home.is-empty { display: none; }
  .quiz-shell.in-hero {
    max-width: none; margin: 0; padding: 26px 28px 24px; color: var(--ink);
    background: rgba(250, 249, 246, 0.96); border: 0; border-top: 3px solid var(--brass);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .quiz-shell.in-hero .quiz-progress { margin-bottom: 16px; gap: 6px; }
  .quiz-shell.in-hero .quiz-progress .dot { width: 26px; }
  .quiz-shell.in-hero .quiz-count { font-size: 0.74rem; margin-bottom: 4px; }
  .quiz-shell.in-hero .quiz-q { font-size: 1.55rem; margin-bottom: 14px; color: var(--ink); }
  .quiz-shell.in-hero .quiz-opts { gap: 6px; }
  .quiz-shell.in-hero .quiz-opt { padding: 9px 14px; border-radius: 2px; }
  .quiz-shell.in-hero .quiz-opt strong { font-size: 0.94rem; }
  .quiz-shell.in-hero .quiz-opt span { font-size: 0.8rem; margin-top: 1px; }
  .quiz-shell.in-hero .quiz-back { margin-top: 12px; }
  /* the jump link is for phones, where the questions sit below the photo */
  #analysis-hero .quiz-jump-row { display: none; }
}
@media (min-width: 981px) and (max-height: 820px) {
  .quiz-shell.in-hero .quiz-opt span { display: none; }
  .quiz-shell.in-hero .quiz-opt { padding: 8px 14px; }
}

/* Loan Finder hero card, dark glass: smoked translucent panel, hairline edges, cream type,
   and each answer a quiet row whose arrow turns forward on hover. */
@media (min-width: 981px) {
  .quiz-shell.in-hero {
    background: rgba(16, 15, 13, 0.52); color: var(--cream);
    border: 1px solid rgba(243, 239, 231, 0.16); border-top: 1px solid rgba(243, 239, 231, 0.16);
    border-radius: 2px; padding: 30px 30px 26px;
    -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  }
  .quiz-shell.in-hero .quiz-progress .dot { height: 2px; background: rgba(243, 239, 231, 0.22); }
  .quiz-shell.in-hero .quiz-progress .dot.done { background: #D9BF86; }
  .quiz-shell.in-hero .quiz-progress .dot.now { background: var(--cream); }
  .quiz-shell.in-hero .quiz-count { color: #E4CE9F; font-family: var(--label-font); font-weight: 500; letter-spacing: 0.18em; }
  .quiz-shell.in-hero .quiz-q { color: #fff; font-weight: 500; font-size: 1.7rem; }
  .quiz-shell.in-hero .quiz-opts { gap: 0; border-top: 1px solid rgba(243, 239, 231, 0.16); }
  .quiz-shell.in-hero .quiz-opt {
    position: relative; background: transparent; border: 0; border-bottom: 1px solid rgba(243, 239, 231, 0.16);
    border-radius: 0; padding: 11px 44px 11px 4px; transform: none;
    transition: background-color 0.25s ease, padding-left 0.35s cubic-bezier(.2,.7,.2,1);
  }
  .quiz-shell.in-hero .quiz-opt strong { color: var(--cream); font-weight: 500; font-size: 0.98rem; }
  .quiz-shell.in-hero .quiz-opt span { color: rgba(243, 239, 231, 0.62); }
  .quiz-shell.in-hero .quiz-opt::after {
    content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
    background: #E4CE9F;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.5 3H11v6.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11 11 3M4.5 3H11v6.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
  }
  .quiz-shell.in-hero .quiz-opt:hover, .quiz-shell.in-hero .quiz-opt:focus-visible, .quiz-shell.in-hero .quiz-opt.picked {
    background: rgba(243, 239, 231, 0.08); padding-left: 14px; border-color: rgba(243, 239, 231, 0.16); transform: none;
  }
  .quiz-shell.in-hero .quiz-opt:hover::after, .quiz-shell.in-hero .quiz-opt:focus-visible::after { transform: translateX(3px) rotate(45deg); }
  .quiz-shell.in-hero .quiz-opt:focus-visible { outline: 2px solid #E4CE9F; outline-offset: -2px; }
  .quiz-shell.in-hero .quiz-back { color: #E4CE9F; font-family: var(--label-font); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; }
}
@media (min-width: 981px) {
  .quiz-shell.in-hero { background: rgba(16, 15, 13, 0.68); }
  .quiz-shell.in-hero .quiz-opt span { color: rgba(243, 239, 231, 0.72); }
}
/* Loan Finder: words start at the same spot as every other page (logo a third of the way
   down); the question card starts level with the logo and is narrower. */
@media (min-width: 981px) {
  .lf-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: start; gap: 64px; }
}
@media (min-width: 981px) { .quiz-shell.in-hero .quiz-opt span { display: none; } .quiz-shell.in-hero .quiz-opt { padding-top: 12px; padding-bottom: 12px; } }
/* Loan Finder: questions live below the photo on every screen; the hero links down to them */
#analysis-hero .quiz-jump-row.quiz-jump-all { display: block; margin: 18px 0 0; }
/* A round-arrow link that leads further down the page: the arrow points down, and nudges down on hover */
.submit-circle.sc-down .sc-arrow { transform: rotate(135deg); }
.submit-circle.sc-down:hover .sc-arrow, .submit-circle.sc-down:focus-visible .sc-arrow { transform: translateY(5px) rotate(135deg); }

/* ---------- Web Design hero: a laptop showing this site, scrolling, with two of its pages
   floating out behind it like presentation sheets ---------- */
.device-scene { margin: 0; }
.ds-stage { position: relative; aspect-ratio: 1.22; }
.ds-sheet {
  position: absolute; overflow: hidden; background: #fff; border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: ds-float 9s ease-in-out infinite;
}
.ds-sheet img { display: block; width: 100%; height: auto; }
.ds-sheet-back { top: 0; left: 26%; width: 56%; rotate: 2deg; animation-delay: -3s; }
.ds-sheet-left { top: 27%; left: 0; width: 54%; rotate: -2.5deg; z-index: 2; animation-delay: -6s; }
.ds-laptop { position: absolute; right: 2%; bottom: 9%; width: 66%; z-index: 3; }
.ds-screen {
  position: relative; background: #141416; padding: 2.4% 2.4% 3%; border-radius: 12px 12px 4px 4px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 20px 50px rgba(0, 0, 0, 0.5);
}
.ds-screen::before { /* camera notch */
  content: ""; position: absolute; top: 0; left: 50%; width: 14%; height: 2.2%; translate: -50% 0;
  background: #141416; border-radius: 0 0 6px 6px; z-index: 2;
}
.ds-scroll { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 2px; background: var(--dark); }
.ds-scroll img { display: block; width: 100%; height: auto; animation: ds-scroll 46s cubic-bezier(.45,0,.55,1) infinite alternate; }
.ds-base {
  position: relative; left: -9%; width: 118%; height: 0; padding-bottom: 4.2%;
  background: linear-gradient(180deg, #e9e9ec 0%, #c9c9ce 55%, #9d9da3 100%);
  border-radius: 2px 2px 14px 14px; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35);
}
.ds-base::before { /* opening notch */
  content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 30%; translate: -50% 0;
  background: #b5b5ba; border-radius: 0 0 8px 8px;
}
.ds-floor {
  position: absolute; right: -2%; bottom: 3%; width: 76%; height: 7%; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(6px);
}
.device-scene figcaption { margin-top: 10px; text-align: center; color: rgba(243, 239, 231, 0.75); font-size: 0.9rem; }
@keyframes ds-scroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(-86.8%); } }
@keyframes ds-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@media (prefers-reduced-motion: reduce) {
  .ds-sheet, .ds-scroll img { animation: none; }
}

/* ---------- Web Design hero scene, square and straight (replaces the tilted version):
   one page standing behind, one page in front at the left, and a laptop at the right
   with the keyboard deck in view, this site scrolling on its screen ---------- */
.ds-stage { position: relative; aspect-ratio: 1.39; }
.ds-sheet { animation: none !important; rotate: none !important; border-radius: 2px; box-shadow: 0 26px 50px rgba(0, 0, 0, 0.42); }
.ds-sheet-back { top: 0; left: 22%; width: 51%; z-index: 1; }
.ds-sheet-left { top: 25%; left: 0; width: 51%; z-index: 3; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
.ds-laptop { position: absolute; left: 43.5%; top: 34%; width: 56.5%; right: auto; bottom: auto; z-index: 2; }
.ds-lid {
  margin: 0 5.5%; background: #1d1d20; padding: 2.2% 2.2% 2.6%; border-radius: 10px 10px 0 0;
  box-shadow: 0 0 0 1.5px #8d8d93 inset, 0 0 0 1px rgba(0, 0, 0, 0.6);
  position: relative;
}
.ds-lid::before { content: ""; position: absolute; top: 2.2%; left: 50%; width: 12%; height: 3.4%; translate: -50% 0; background: #1d1d20; border-radius: 0 0 5px 5px; z-index: 2; }
.ds-lid .ds-scroll { aspect-ratio: 16 / 10; overflow: hidden; background: var(--dark); border-radius: 0; }
.ds-deck {
  position: relative; display: block; height: 0; padding-bottom: 24%;
  background: linear-gradient(180deg, #5b5b60 0%, #5b5b60 3%, #e6e6ea 4%, #d7d7dc 55%, #c3c3c9 88%, #9c9ca2 100%);
  clip-path: polygon(5.5% 0, 94.5% 0, 100% 86%, 99% 100%, 1% 100%, 0 86%);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.35));
}
.ds-keys {
  position: absolute; left: 15%; right: 15%; top: 13%; height: 30%;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / 18 - 1px), #c9c9ce calc(100% / 18 - 1px) calc(100% / 18)),
    repeating-linear-gradient(180deg, transparent 0 calc(100% / 6 - 1px), #c9c9ce calc(100% / 6 - 1px) calc(100% / 6)),
    #3a3a3e;
  clip-path: polygon(1.5% 0, 98.5% 0, 100% 100%, 0 100%);
  border-radius: 2px;
}
.ds-pad { position: absolute; left: 37%; width: 26%; top: 50%; height: 30%; background: #cfcfd4; border-radius: 4px; box-shadow: 0 0 0 1px #b4b4ba inset; }
.ds-floor { position: absolute; z-index: 0; filter: blur(14px); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 68%); }
.ds-floor-l { left: 4%; top: 64%; width: 46%; height: 12%; }
.ds-floor-r { left: 44%; top: 92%; width: 58%; height: 10%; }
.device-scene .ds-floor:not(.ds-floor-l):not(.ds-floor-r) { display: none; }

/* Laptop, front view like a product photo: black glass screen in a slim aluminium edge,
   a faint glass reflection, and a thin aluminium base with the opening scoop. */
.ds-lid {
  margin: 0 4%; background: #0c0c0e; padding: 2% 2% 2.6%; border-radius: 14px 14px 2px 2px;
  box-shadow: 0 0 0 1px #9a9aa0, 0 0 0 2px #2a2a2e, 0 24px 50px rgba(0, 0, 0, 0.45);
}
.ds-lid::before { top: 0; height: 2.6%; width: 11%; background: #0c0c0e; border-radius: 0 0 6px 6px; }
.ds-lid::after { /* glass reflection */
  content: ""; position: absolute; inset: 2% 2% 2.6%; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 38%, rgba(255,255,255,0) 39%);
}
.ds-deck {
  height: auto; padding-bottom: 0; aspect-ratio: 100 / 3.4; clip-path: none; filter: none;
  background: linear-gradient(180deg, #f2f2f4 0%, #d8d8dc 30%, #bdbdc2 70%, #8e8e94 100%);
  border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 12px 18px rgba(0, 0, 0, 0.45);
}
.ds-deck::before { /* thumb scoop */
  content: ""; position: absolute; top: 0; left: 50%; width: 14%; height: 42%; translate: -50% 0;
  background: linear-gradient(180deg, #a9a9ae, #c9c9ce); border-radius: 0 0 10px 10px;
}
.ds-keys, .ds-pad { display: none; }
.ds-laptop { top: 30%; }
.ds-floor-r { top: 86%; }
.device-scene figcaption { margin-top: -13%; position: relative; z-index: 4; }

/* Branding page: the brass monogram opens the Brand Story — image left, heading right.
   Its soft edges dissolve into the stone section so the letters seem to stand on the page. */
.sb-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; margin: 26px 0 40px; }
.sb-hero-img { margin: 0; }
.sb-hero-img img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%);
}
.sb-hero .sb-head { margin: 0; max-width: 480px; }
.sb-hero .sb-head h3.split-headline { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.sb-hero .sb-head p + p { margin-top: 12px; }
@media (max-width: 860px) {
  .sb-hero { grid-template-columns: 1fr; gap: 22px; }
}

/* Brass monogram band, grey studio version: the photo runs the full width of the screen and
   the Brand Story heading sits in its open grey space on the right, so there is no seam
   between the photo's grey and the page. */
.sb-hero {
  position: relative; display: block; margin: 30px calc(50% - 50vw) 44px; background: #DDD9D5; overflow: hidden;
}
.sb-hero-img img {
  width: 100%; height: clamp(380px, 46vw, 720px); object-fit: cover; object-position: 30% 55%;
  -webkit-mask-image: none; mask-image: none;
}
.sb-hero .sb-head {
  position: absolute; top: 50%; translate: 0 -50%; max-width: 420px;
  left: max(58%, calc(50% + 120px)); right: 24px;
}
.sb-hero .sb-head h3.split-headline { color: var(--navy-dark); }
.sb-hero .sb-head p { color: #3f3c38; }
@media (max-width: 860px) {
  .sb-hero-img img { height: 64vw; object-position: 32% 55%; }
  .sb-hero .sb-head { position: static; translate: none; max-width: none; padding: 22px 24px 30px; }
}
@media (min-width: 861px) {
  .sb-hero { background: #DFDBD8; }
  .sb-hero-img img {
    width: 72vw; height: auto; object-fit: initial;
    -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 78%, transparent 100%);
  }
  .sb-hero .sb-head { left: max(64vw, calc(50% + 170px)); max-width: 400px; }
}
/* Brass monogram at half size: the letters sit within the page column on the left, their
   photo edges fading into the band's grey all round; the heading stays on the right. */
@media (min-width: 861px) {
  .sb-hero {
    display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px;
    padding: 36px max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
  }
  .sb-hero-img img {
    width: 36vw; max-width: 100%;
    -webkit-mask-image: radial-gradient(ellipse 70% 72% at 45% 52%, #000 55%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 72% at 45% 52%, #000 55%, transparent 100%);
  }
  .sb-hero .sb-head { position: static; translate: none; left: auto; right: auto; max-width: 440px; }
}
@media (min-width: 861px) {
  .sb-hero { background: #DBD7D4; }
  .sb-hero-img img {
    -webkit-mask-image: radial-gradient(closest-side at 46% 50%, #000 70%, transparent 100%);
            mask-image: radial-gradient(closest-side at 46% 50%, #000 70%, transparent 100%);
  }
}
/* The monogram photo's backdrop is now evened out to the band's exact grey, so no fade is needed */
.sb-hero { background: #DBD7D4; }
.sb-hero-img img { -webkit-mask-image: none !important; mask-image: none !important; }
.sb-hero-img img {
  -webkit-mask-image: radial-gradient(closest-side at 50% 50%, #000 82%, transparent 100%) !important;
          mask-image: radial-gradient(closest-side at 50% 50%, #000 82%, transparent 100%) !important;
}

/* ---------- Brand Story as guideline slides (Caplinx-style): two large slides per row,
   each opens full screen; the old drawn cards are retired. ---------- */
.storyboard.sb-slides { grid-template-columns: repeat(2, 1fr); gap: 44px 36px; }
.sb-slide { margin: 0; }
.sb-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.sb-open img { display: block; width: 100%; height: auto; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 40px rgba(21,48,79,.14); transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
@media (hover: hover) { .sb-open:hover img { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 26px 50px rgba(21,48,79,.2); } }
.sb-open:focus-visible { outline: 2px solid var(--navy-dark); outline-offset: 4px; }
.sb-slides .sb-cap { padding-top: 16px; }
@media (max-width: 680px) {
  .storyboard.sb-slides { grid-template-columns: none; grid-auto-columns: 88%; }
  .sb-slide { scroll-snap-align: start; }
}

/* Branding "What We Design" section: one flat grey from the heading, behind the brass
   monogram and down through the guideline slides — the monogram photo's backdrop is the
   same grey, so there is no seam anywhere. */
#branding-services.bg-alt { background: #DBD7D4; }
#branding-services .sb-hero { background: transparent; margin-top: 10px; margin-bottom: 30px; }

/* Brand boards: the first two show; the other six open on request */
.sb-slides.is-collapsed > li:nth-child(n+3) { display: none; }
.sb-more-row { display: flex; justify-content: center; margin: -12px 0 10px; }
.sb-more.is-open .sc-arrow { transform: rotate(-45deg); }
.sb-more.is-open:hover .sc-arrow, .sb-more.is-open:focus-visible .sc-arrow { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 680px) { .sb-slides.is-collapsed > li:nth-child(n+3) { display: block; } .sb-more-row { display: none; } }
.sb-more-row { margin: 0 0 56px; }
/* Down arrows are drawn pointing down (not a rotated diagonal), so they sit dead centre in the circle */
.submit-circle.sc-down .sc-arrow { transform: none; }
.submit-circle.sc-down:hover .sc-arrow, .submit-circle.sc-down:focus-visible .sc-arrow { transform: translateY(3px); }
.sb-more.is-open .sc-arrow { transform: rotate(180deg); }
.sb-more.is-open:hover .sc-arrow, .sb-more.is-open:focus-visible .sc-arrow { transform: translateY(-3px) rotate(180deg); }

/* ---------- Circle-arrow links: the arrow now sits INSIDE the circle element, centred by
   the layout itself, so up, down and diagonal arrows are dead centre in every browser.
   The circle line is drawn by ::before, so it can draw in on hover without moving the arrow. */
.submit-circle .sc-ring {
  position: relative; right: auto; top: auto; flex: 0 0 auto;
  display: grid; place-items: center; width: 72px; height: 72px;
  margin: -25px -25px -25px -25px; border: 0 none; border-radius: 50%;
  transform: none !important; background: none;
}
.submit-circle .sc-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid; border-color: inherit;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.submit-circle:hover .sc-ring::before, .submit-circle:focus-visible .sc-ring::before { transform: translateX(-3px) scale(0.76); }
@media (max-width: 680px) {
  .submit-circle .sc-ring { width: 36px; height: 36px; margin: -10px; }
  .submit-circle:hover .sc-ring::before, .submit-circle:focus-visible .sc-ring::before { transform: none; }
  .submit-circle .sc-ring::before { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .submit-circle .sc-ring::before { transition: none; } }
@media (min-width: 681px) { .submit-circle .sc-ring { margin-left: -8px; } }
/* Brand Story lead: the Logo Rationale board beside the heading */
.sb-hero-slide img { -webkit-mask-image: none !important; mask-image: none !important; width: 100% !important; max-width: none !important; height: auto !important; }
@media (min-width: 861px) { .sb-hero { grid-template-columns: 1.25fr 1fr !important; } }
.sb-hero-slide img { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 18px 40px rgba(21,48,79,.14); }
/* Brand boards fully folded until "See All Brand Boards" is pressed (all screen sizes) */
.sb-slides.is-collapsed { display: none !important; }
.sb-more-row { display: flex !important; margin: 4px 0 56px; }

/* ---------- SEO & AEO: a sample monthly report (illustration) — paper card on the navy ---------- */
.seo-sample { margin: 44px 0 0; background: #F7F5F1; color: var(--ink); padding: 30px 32px 22px; box-shadow: 0 30px 70px rgba(0,0,0,.35); }
.ss-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(21,48,79,.22); }
.ss-kicker { font-family: var(--label-font); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.ss-title { margin: 4px 0 0; font-family: var(--serif); font-size: 1.6rem; color: var(--navy-dark); line-height: 1.1; }
.ss-period { font-family: var(--label-font); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ss-tiles { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid rgba(21,48,79,.22); }
.ss-tile { padding: 20px 18px 18px; border-left: 1px solid rgba(21,48,79,.16); display: flex; flex-direction: column; gap: 4px; }
.ss-tile:first-child { border-left: 0; padding-left: 0; }
.ss-tile span { font-size: .82rem; color: var(--ink-soft); }
.ss-tile strong { font-family: var(--serif); font-weight: 500; font-size: 2.8rem; line-height: 1; color: var(--navy-dark); }
.ss-tile em { font-style: normal; font-size: .82rem; color: #2F6B4F; display: inline-flex; align-items: center; gap: 4px; }
.ss-tile em svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ss-tile:last-child em { color: var(--ink-soft); }
.ss-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 36px; padding: 22px 0 6px; }
.ss-panel-title { font-family: var(--label-font); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--navy-dark); margin: 0 0 14px; }
.ss-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ss-funnel li {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: var(--w); min-width: 240px; margin: 0 auto; padding: 12px 14px; color: #fff; font-size: .86rem;
}
.ss-funnel li:nth-child(1) { background: #4F6E93; } .ss-funnel li:nth-child(2) { background: #36577E; }
.ss-funnel li:nth-child(3) { background: #23446B; } .ss-funnel li:nth-child(4) { background: var(--dark); }
.ss-funnel b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-kw { width: 100%; border-collapse: collapse; font-size: .86rem; }
.ss-kw th, .ss-kw td { text-align: left; padding: 9px 6px; border-bottom: 1px solid rgba(21,48,79,.14); font-weight: 400; }
.ss-kw thead th { font-family: var(--label-font); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); padding-top: 0; }
.ss-kw tbody th { color: var(--ink); }
.ss-kw .kw-was { color: var(--ink-soft); font-variant-numeric: tabular-nums; width: 64px; }
.ss-kw .kw-now { width: 42%; }
.ss-kw .kw-now { display: flex; align-items: center; gap: 10px; }
.kw-bar { flex: 1; height: 6px; background: rgba(21,48,79,.12); position: relative; }
.kw-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--navy-dark); }
.ss-kw .kw-now b { font-weight: 600; color: var(--navy-dark); font-variant-numeric: tabular-nums; width: 28px; text-align: right; }
.seo-sample figcaption { margin-top: 14px; font-size: .76rem; color: var(--ink-soft); }
@media (max-width: 900px) {
  .ss-tiles { grid-template-columns: 1fr 1fr; }
  .ss-tile:nth-child(3) { border-left: 0; padding-left: 0; }
  .ss-tile:nth-child(n+3) { border-top: 1px solid rgba(21,48,79,.16); }
  .ss-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .seo-sample { padding: 22px 18px 16px; margin-left: -8px; margin-right: -8px; }
  .ss-head { flex-direction: column; align-items: flex-start; }
  .ss-funnel li { min-width: 0; width: max(var(--w), 70%); }
  .ss-tile strong { font-size: 2.2rem; }
}
.ss-kw .kw-now { display: table-cell; }
.kw-cell { display: flex; align-items: center; gap: 10px; }
.ss-funnel li span { white-space: nowrap; }
@media (max-width: 560px) { .ss-funnel li { width: max(var(--w), 84%); font-size: .8rem; padding: 10px 12px; } .ss-funnel li span { white-space: normal; } }
/* What We Design: warm paper background, so the grey Logo Rationale board reads as a board */
#branding-services.bg-alt { background: #F4F1EB; }
#branding-services .sb-hero, #branding-services .sb-hero-img { background: transparent !important; }
#branding-services .sb-hero-slide img { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 24px 50px rgba(21,48,79,.16); }
#branding-services .sb-hero { overflow: visible !important; }

/* ---------- What We Design: four image-led service tiles ----------
   Each tile is a tall photo of the work with a navy panel; on hover the photo drifts up,
   the panel rises to reveal the line, a brass rule draws across and the arrow turns. */
.svc-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.svc-tile { position: relative; display: block; aspect-ratio: 3 / 4.3; overflow: hidden; background: var(--dark); color: #fff; text-decoration: none; isolation: isolate; }
.svc-img { position: absolute; inset: 0; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.svc-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,27,51,0) 30%, rgba(8,27,51,.55) 55%, rgba(8,27,51,.96) 78%); transition: opacity .5s ease; }
.svc-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 22px 22px; display: flex; flex-direction: column; gap: 8px;
  transform: translateY(calc(100% - 118px)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.svc-no { font-family: var(--label-font); font-size: .74rem; letter-spacing: .2em; color: #E4CE9F; position: relative; padding-bottom: 10px; }
.svc-no::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 1px; background: #E4CE9F; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.svc-t { font-family: var(--serif); font-size: 1.65rem; line-height: 1.08; color: #fff; }
.svc-d { font-size: .92rem; line-height: 1.55; color: rgba(243,239,231,.86); opacity: 0; transition: opacity .45s ease .1s; }
.svc-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 6px; font-family: var(--label-font); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: #E4CE9F; opacity: 0; transition: opacity .45s ease .15s; }
.svc-go { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(228,206,159,.7); border-radius: 50%; }
.svc-go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
  .svc-tile:hover .svc-img img, .svc-tile:focus-visible .svc-img img { transform: scale(1.06) translateY(-3%); }
  .svc-tile:hover .svc-body, .svc-tile:focus-visible .svc-body { transform: none; }
  .svc-tile:hover .svc-d, .svc-tile:hover .svc-cta, .svc-tile:focus-visible .svc-d, .svc-tile:focus-visible .svc-cta { opacity: 1; }
  .svc-tile:hover .svc-no::after, .svc-tile:focus-visible .svc-no::after { width: 100%; }
  .svc-tile:hover .svc-go svg, .svc-tile:focus-visible .svc-go svg { transform: rotate(45deg); }
}
@media (hover: none) { .svc-body { transform: none; } .svc-d, .svc-cta { opacity: 1; } .svc-tile::before { background: linear-gradient(180deg, rgba(8,27,51,0) 15%, rgba(8,27,51,.7) 45%, rgba(8,27,51,.97) 70%); } }
.svc-tile:focus-visible { outline: 2px solid var(--navy-dark); outline-offset: 4px; }
@media (max-width: 1100px) { .svc-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-tiles { grid-template-columns: 1fr; } .svc-tile { aspect-ratio: 4 / 4.6; } }
@media (prefers-reduced-motion: reduce) { .svc-img img, .svc-body, .svc-d, .svc-cta, .svc-no::after, .svc-go svg { transition: none; } }

/* "Every website" promise: one slim line of gold-ticked points */
.web-promise { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 30px; margin: 34px auto 0; padding: 18px 26px; border-top: 1px solid rgba(21,48,79,.2); border-bottom: 1px solid rgba(21,48,79,.2); max-width: 1000px; }
.web-promise li { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ink); }
.web-promise b { font-family: var(--label-font); font-weight: 500; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.web-promise i { width: 14px; height: 9px; border-left: 1.5px solid var(--brass); border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg) translateY(-2px); }

/* Round-arrow buttons: no box after a mouse click, only for keyboard focus */
.submit-circle:focus:not(:focus-visible) { outline: none; }
.svc-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(8,27,51,.82); opacity: 0; transition: opacity .5s ease; }
@media (hover: hover) { .svc-tile:hover::after, .svc-tile:focus-visible::after { opacity: 1; } }
.svc-body { transform: translateY(calc(100% - 150px)); }
.svc-t { min-height: 2.16em; display: flex; align-items: flex-end; }
/* Service tiles: the way in is always visible — the "View" link shows at rest, the
   description joins it on hover */
.svc-cta { opacity: 1 !important; }
.svc-body { transform: translateY(calc(100% - 196px)); }
.svc-tile { cursor: zoom-in; }
.svc-tile[data-seo] { cursor: pointer; }

@media (min-width: 681px) {
  .term-toggle { padding: 20px 26px; }
  .term-card.open > :not(h3) { margin-left: 26px; margin-right: 26px; }
  .term-card.open { padding-bottom: 24px; }
  .term-toggle::after { width: 18px; height: 18px; background-size: 18px 1.5px, 1.5px 18px; transition: transform .3s ease; }
  .term-card.open .term-toggle::after { background-size: 18px 1.5px; }
}
/* Glossary plus spins a quarter turn on hover, like the hero's + links */
.term-toggle::after { transition: transform 0.25s ease-out; }
@media (hover: hover) {
  .term-toggle:hover::after, .term-toggle:focus-visible::after { transform: rotate(90deg); }
  .term-card.open .term-toggle:hover::after { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .term-toggle::after { transition: none; } }

/* Privacy policy page */
.privacy-page { padding-top: calc(var(--nav-h) + 56px); }
.privacy-wrap { max-width: 760px; }
.privacy-wrap h1.split-headline { font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 8px 0 6px; }
.privacy-date { color: var(--ink-soft); font-size: .9rem; margin-bottom: 26px; }
.privacy-wrap h2 { font-family: var(--serif); font-size: 1.45rem; color: var(--navy-dark); margin: 34px 0 10px; font-style: normal; font-weight: 600; }
.privacy-wrap p, .privacy-wrap li { color: var(--ink); line-height: 1.7; }
.privacy-wrap ul { padding-left: 20px; display: grid; gap: 8px; }
.privacy-wrap a { color: var(--navy-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer-privacy { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-header .nav-wordmark { letter-spacing: 0.2em; }