/* Law Office of Pauline D. Aguilar
   Palette taken from the firm's existing brand tokens and logo:
   navy #1F2942, deep navy #131A2A, champagne gold #C9AA7E, cream #F5F1EB.
   Type: Playfair Display (display) + Inter (body) — the pairing already in use.
   Light ground with navy sections; the gold is spent sparingly, on rules and
   accents, the way it appears in the logo. */

:root {
  --navy-950: #0F1523;
  --navy-900: #131A2A;
  --navy-800: #182134;
  --navy: #1F2942;
  --navy-600: #283657;

  --gold: #C9AA7E;
  --gold-lift: #E0C79C;
  --gold-deep: #A5844F;

  --cream: #F5F1EB;
  --cream-dim: #CFC7BB;
  --cream-mute: #98A0AD;

  --paper: #FBF9F6;
  --paper-alt: #F4F0E9;
  --ink: #1F2942;
  --ink-soft: #5A6672;
  --line: #E4DED4;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;

  --shell: 1140px;
  --gutter: clamp(20px, 5vw, 40px);
  --section: clamp(64px, 8vw, 112px);
}

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

/* Do NOT add overflow-x:hidden to html and body. Measured 2026-10-08: the page
   has zero horizontal overflow from 320px to 1440px, so the guard protected
   nothing — and overflow-x:hidden on BOTH html and body is the known cause of
   broken vertical scrolling in iOS Safari. Fix real overflow at its source. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(36px, 5.4vw, 58px); font-weight: 500; line-height: 1.05; }
h2 { font-size: clamp(28px, 4.1vw, 42px); font-weight: 500; }
h3 { font-size: clamp(19px, 2.1vw, 23px); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 780px; }
section { padding-block: var(--section); }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 16px;
}
.lede { font-size: clamp(17.5px, 1.9vw, 20px); color: var(--ink-soft); max-width: 64ch; }
.rule { width: 64px; height: 1px; border: 0; margin: 0 0 26px; background: linear-gradient(90deg, var(--gold-deep), rgba(165,132,79,0)); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border: 1px solid transparent; border-radius: 3px;
  font-size: 15.5px; font-weight: 600; letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-800); }
.btn--gold { background: var(--gold); color: #16203A; font-weight: 700; }
.btn--gold:hover { background: var(--gold-lift); }
.btn--ghost { border-color: rgba(31,41,66,.28); color: var(--ink); }
.btn--ghost:hover { border-color: var(--navy); }
.btn--small { padding: 11px 20px; font-size: 14.5px; }
.on-navy .btn--ghost { border-color: rgba(201,170,126,.44); color: var(--cream); }
.on-navy .btn--ghost:hover { border-color: var(--gold); color: #fff; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,249,246,.94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar { display: flex; align-items: center; gap: 22px; min-height: 78px; }
.brand { flex: none; text-decoration: none; }
.brand img { height: 40px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.site-nav a { font-size: 14.5px; color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--navy); }
.header-cta { display: flex; align-items: center; gap: 12px; flex: none; }
.header-phone { font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-phone:hover { color: var(--gold-deep); }
@media (max-width: 1000px) { .site-nav { display: none; } }
@media (max-width: 860px) {
  .header-cta .btn { display: none; }
  .brand img { height: 34px; }
}
@media (max-width: 560px) { .brand img { height: 30px; } }

/* ---------- hero ---------- */

.hero { background: var(--paper); padding-block: clamp(44px, 6vw, 76px) var(--section); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(34px, 5vw, 64px); align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: 20px; }
.hero h1 em { font-style: italic; font-weight: 400; color: var(--gold-deep); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 28px 0 0; padding: 0;
  list-style: none; font-size: 14px; color: var(--ink-soft);
}
.hero__trust li { display: flex; align-items: center; gap: 9px; }
.hero__trust li::before { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex: none; }

.hero__media { position: relative; }
.hero__media img { width: 100%; height: auto; border-radius: 2px; }
.hero__media::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 1px solid var(--gold); z-index: -1; pointer-events: none;
}

/* ---------- trust strip ---------- */

.strip { background: var(--navy); color: var(--cream); padding-block: 0; }
.strip__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: rgba(201,170,126,.24);
}
@media (max-width: 760px) { .strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--navy); padding: clamp(22px, 3vw, 32px) clamp(16px, 2.2vw, 26px); }
.stat__n {
  font-family: var(--display);
  font-size: clamp(21px, 2.3vw, 30px);
  font-weight: 500; line-height: 1.15; color: var(--gold); margin-bottom: 7px;
  text-wrap: balance;
  overflow-wrap: break-word;   /* a long label wraps instead of spilling the cell */
  hyphens: auto;
}
.stat__l { font-size: 13.5px; line-height: 1.5; color: var(--cream-dim); margin: 0; }

/* ---------- navy sections ---------- */

.on-navy { background: var(--navy-900); color: var(--cream); }
.on-navy .eyebrow { color: var(--gold); }
.on-navy .lede { color: var(--cream-dim); }
.on-navy .rule { background: linear-gradient(90deg, var(--gold), rgba(201,170,126,0)); }
.alt { background: var(--paper-alt); }

/* ---------- cards ---------- */

.grid { display: grid; gap: 20px; margin-top: 42px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  padding: clamp(22px, 2.8vw, 30px); display: flex; flex-direction: column; gap: 11px;
}
.card h3 { margin: 0; }
.card p { margin: 0; font-size: 15.5px; color: var(--ink-soft); }
.card__link { margin-top: auto; padding-top: 6px; font-size: 14.5px; font-weight: 600; color: var(--navy); text-decoration: none; }
.card__link:hover { color: var(--gold-deep); }
.card__ix { font-family: var(--display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); }
.on-navy .card { background: var(--navy-800); border-color: rgba(201,170,126,.24); }
.on-navy .card p { color: var(--cream-dim); }
.on-navy .card__link { color: var(--gold); }

/* ---------- testimonials ---------- */

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 42px; }
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--gold);
  padding: clamp(22px, 2.6vw, 28px); display: flex; flex-direction: column; gap: 14px;
}
.quote blockquote { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); }
.quote figcaption { font-size: 13.5px; font-weight: 600; color: var(--navy); margin-top: auto; }
.stars { color: var(--gold); letter-spacing: .16em; font-size: 13px; }

/* ---------- bio ---------- */

.bio { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .bio { grid-template-columns: 1fr; } }
.bio__photo { position: relative; }
.bio__photo img {
  width: 100%;
  height: auto;            /* without this the HTML height attribute pins it and stretches */
  border-radius: 2px;
  /* the two headshots ship at different native ratios (1100x1016 and 733x1100),
     so normalise them to one portrait crop and keep faces in the upper third */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
}
.bio__meta { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--ink-soft); }
.bio__meta li { display: flex; gap: 10px; }
.bio__meta li::before { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex: none; margin-top: 10px; }

/* ---------- form ---------- */

.form { display: flex; flex-direction: column; gap: 16px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 3px; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold-deep); outline-offset: 1px; border-color: var(--gold-deep); }
.field textarea { min-height: 130px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: 13px; color: var(--ink-soft); margin: 0; }
.form__status { font-size: 15px; padding: 13px 15px; border-radius: 3px; margin: 0; display: none; }
.form__status.ok { display: block; background: rgba(201,170,126,.16); border: 1px solid var(--gold); color: var(--navy); }
.form__status.bad { display: block; background: rgba(180,84,78,.1); border: 1px solid #B4544E; color: #8C3A35; }

/* ---------- emergency band ---------- */

.band {
  background: var(--navy-950); color: var(--cream); border-top: 2px solid var(--gold);
  padding-block: clamp(26px, 3.4vw, 38px);
}
.band__in { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: space-between; }
.band p { margin: 0; font-size: 15.5px; color: var(--cream-dim); max-width: 62ch; }
.band strong { color: #fff; }

/* ---------- faq ---------- */

.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font-family: var(--display); font-size: clamp(17px, 2vw, 20px); font-weight: 600; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 22px; font-weight: 400; color: var(--gold-deep);
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.faq__a { padding: 0 40px 22px 0; font-size: 16px; color: var(--ink-soft); }
.faq__a p { margin: 0; }

/* ---------- footer ---------- */

.site-footer { background: var(--navy-950); color: var(--cream-dim); padding-block: clamp(46px, 6vw, 68px) 34px; }
.site-footer a { color: var(--cream-dim); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 34px; }
@media (max-width: 800px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__grid img { height: 42px; width: auto; margin-bottom: 16px; }
.footer h4 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; }
.footer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.footer p { font-size: 14.5px; }
.footer__legal {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(201,170,126,.2);
  font-size: 12.5px; line-height: 1.7; color: #6E7789;
}
.footer__legal p { font-size: 12.5px; max-width: 92ch; }

.skip {
  position: absolute; left: -9999px; background: var(--navy); color: #fff;
  padding: 12px 18px; z-index: 100; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------- cinematic hero (video backdrop) ----------
   Pattern mirrors the K&E hero: the clip is a full-bleed backdrop behind a
   navy scrim, content centred on top. The scrim is not decoration — white type
   over moving footage is unreadable without it. */

.hero--film {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 88vh;
  background: var(--navy-900);
  color: var(--cream);
  padding-block: clamp(96px, 14vh, 150px) clamp(104px, 14vh, 140px);
  text-align: center;
}

.hero--film video,
.hero--film .hero__still {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero--film::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(15,21,35,.78) 0%,
      rgba(15,21,35,.34) 38%,
      rgba(15,21,35,.50) 62%,
      rgba(15,21,35,.88) 100%);
  /* a touch of extra weight directly behind the type block only */
  box-shadow: inset 0 0 clamp(120px, 22vw, 260px) rgba(15,21,35,.55);
}

.hero--film .eyebrow { color: var(--gold); }
.hero--film h1 {
  color: #fff; max-width: 20ch; margin-inline: auto;
  text-shadow: 0 2px 22px rgba(15,21,35,.6);
}
.hero--film h1 em { color: var(--gold-lift); }
.hero--film .lede {
  color: #E9E4DC; margin-inline: auto;
  text-shadow: 0 1px 14px rgba(15,21,35,.72);
}
.hero--film .hero__cta { justify-content: center; }
.hero--film .hero__trust {
  justify-content: center; color: #CBD2DB;
  text-shadow: 0 1px 12px rgba(15,21,35,.8);
}
.hero--film .btn--ghost { border-color: rgba(245,241,235,.5); color: #fff; }
.hero--film .btn--ghost:hover { border-color: var(--gold); }


@media (max-width: 640px) {
  .hero--film { min-height: 82vh; }
}

/* ---------- mobile call bar ----------
   Phone-only. A family law visitor in a crisis should never have to scroll to
   find the number. Sits above the iOS home indicator via safe-area inset. */

:root { --callbar-h: 0px; }

.callbar { display: none; }

@media (max-width: 860px) {
  :root { --callbar-h: 72px; }

  /* The sticky bar carries Call + Book at all times, so repeating them in the
     hero is redundant on a phone. Desktop has no bar, so the hero keeps them.
     Mid-page CTAs are untouched — those catch people at scroll depth, they are
     not duplicates of anything currently on screen. */
  .hero .hero__cta { display: none; }
  .hero .hero__trust { margin-top: 4px; }

  .callbar {
    display: flex; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 11px 14px calc(11px + env(safe-area-inset-bottom, 0px));
    background: rgba(251,249,246,.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(15,21,35,.10);
  }
  .callbar .btn { flex: 1; padding: 14px 10px; font-size: 15px; }

  /* the bar floats over the page, so give the document somewhere to end */
  body { padding-bottom: var(--callbar-h); }
}

@media (max-width: 400px) {
  .callbar .btn { font-size: 13.5px; letter-spacing: 0; }
}


/* ---------- consultation quiz ----------
   One question per screen. Targets are sized for a thumb, not a cursor: a
   distressed person filling this in on a phone is the default case, not the
   edge case. */

.quiz-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: clamp(20px, 3.2vw, 34px);
  min-height: 480px; display: flex; flex-direction: column;
}
#quiz { display: flex; flex-direction: column; flex: 1; }

.quiz-bar { height: 3px; background: var(--paper-alt); border-radius: 2px; overflow: hidden; }
.quiz-bar__fill { height: 100%; background: var(--gold); transition: width .3s ease; }

.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 22px; }
.quiz-back {
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
.quiz-back:hover { color: var(--navy); }
.quiz-back:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.quiz-count { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

.quiz-q { font-family: var(--display); font-size: clamp(22px, 3.1vw, 30px); font-weight: 500; line-height: 1.2; margin: 0 0 6px; color: var(--navy); }
.quiz-sub { font-size: 15.5px; color: var(--ink-soft); margin: 0 0 20px; }

.quiz-options { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.quiz-option {
  width: 100%; text-align: left; cursor: pointer;
  min-height: 58px; padding: 16px 46px 16px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink);
  position: relative;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.quiz-option::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; border-right: 1.5px solid var(--gold-deep); border-top: 1.5px solid var(--gold-deep);
  transform: translateY(-50%) rotate(45deg); opacity: .55;
}
.quiz-option:hover { border-color: var(--gold); background: #FDFBF8; }
.quiz-option:active { transform: scale(.995); }
.quiz-option.is-on { border-color: var(--gold); background: rgba(201,170,126,.12); }
.quiz-option:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.quiz-form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.quiz-submit { width: 100%; min-height: 56px; margin-top: 4px; }
.quiz-fine { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

.quiz-safety { display: flex; flex-direction: column; gap: 14px; }
.quiz-safety p { font-size: 16px; color: var(--ink-soft); margin: 0; }
.quiz-safety__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.quiz-safety__cta .btn { flex: 1 1 210px; }

.quiz-done { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin: auto 0; }
.quiz-done p { font-size: 16px; color: var(--ink-soft); margin: 0; }
.quiz-done__mark {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(201,170,126,.18); border: 1px solid var(--gold);
  color: var(--gold-deep); font-size: 24px;
}

@media (max-width: 560px) {
  .quiz-wrap { padding: 18px 16px 22px; min-height: 0; }
  .quiz-option { font-size: 16.5px; min-height: 62px; }
  .quiz-safety__cta .btn { flex: 1 1 100%; }
}

/* ── End of page on phones ─────────────────────────────────────────────
   On an iPhone you can pull past the last pixel, and the browser shows
   whatever is behind the page. That was a light colour under a dark footer,
   so the page looked like it kept going. Stop the bounce, and paint the
   canvas the footer's colour for browsers that ignore overscroll-behavior.
   body keeps its own background, so the page itself doesn't change. */
html { background-color: #0F1523; overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
/* The call bar is pinned to the bottom of the screen on phones. Without room
   reserved for it, it covered the end of the footer, so you kept scrolling
   to reach content you could never see. The bar is 76px; the 72px reserved before left 4px of footer under it. */
@media (max-width: 860px) { body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } }