/* Urrutia Advisory — shared design system (11 sub-pages; index.html has its own inline
   stylesheet — see src/pages/index.astro).
   Phase 2 (Team/Web-Dev/output/redesign-phase2-report.md): every color/type/radius/shadow
   custom property below now resolves to Bianca's tokens (css/tokens.css, loaded first in
   BaseLayout) — the legacy hardcoded :root block (--bg/--surface/--ink/--muted/--line/
   --accent/--accent-ink/--accent-soft/--serif/--sans/--maxw/--radius) has been removed from
   the cascade; every usage site below was repointed to the real token name. Structural/
   layout rules (grid columns, flex, spacing between blocks) are unchanged pending Phase 3's
   content pass. New global components added at the bottom: Card hover state, Callout,
   Byline/ReviewedBy, DisclosureNote, StepList, Input error state, and a FAQ chevron built
   from Lucide's chevron-down.svg (no icon font).
   Contrast note: --color-accent is intentionally NOT used as small/body-weight text color
   on light backgrounds anywhere below (≈3.1:1, fails WCAG AA normal text — see tokens.json's
   own "never as small text on a light ground" rule and the contrast table in the phase2
   report). It's used only for large numerals, icon strokes, hairlines, and filled button
   backgrounds, where it passes. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--font-body);background:var(--color-bg-base);color:var(--color-text-primary);line-height:var(--text-body-lh);font-size:var(--text-body-size);-webkit-font-smoothing:antialiased}
a{color:var(--color-text-primary);text-decoration:underline;text-decoration-color:var(--color-border-hairline);text-underline-offset:2px}
a:hover{text-decoration-color:currentColor}
.wrap{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--container-gutter)}
em{font-style:italic}

/* ---- nav ---- */
header.nav{position:sticky;top:0;z-index:var(--z-header);display:flex;justify-content:center;padding:14px 16px;isolation:isolate;background:var(--color-bg-base)}
.navbar{display:flex;align-items:center;gap:8px;width:100%;max-width:var(--container-max-width);background:rgba(250,247,241,.88);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border:1px solid var(--color-border-hairline);border-radius:var(--radius-pill);padding:8px 10px 8px 16px;box-shadow:var(--shadow-resting)}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;padding-right:6px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand .layers{display:flex;flex-direction:column;gap:2.5px}
.brand .layers span{display:block;height:2.5px;background:var(--color-accent);border-radius:2px}
.brand .layers span:nth-child(1){width:18px}.brand .layers span:nth-child(2){width:13px;opacity:.7}.brand .layers span:nth-child(3){width:8px;opacity:.45}
/* R2 CLOSED (Phase 3A): the Phase 2 local override (a literal 0.05em, used because
   tokens.css authored --tracking-wordmark as 50px) is removed. Bianca fixed the token
   source to 0.05em in tokens.css v1.1.0, so this reads the token again and there is one
   source of truth for wordmark tracking. Same applies to --tracking-display (was the
   invalid `-0.5%`, now -0.005em) consumed at h1 below. */
.brand b{font-family:var(--font-display);font-weight:var(--weight-display-semibold);font-size:var(--text-h3-size);letter-spacing:var(--tracking-wordmark);color:var(--color-text-primary)}
.brand small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-secondary);font-weight:var(--weight-label);margin-top:1px}
/* .brand is reused inside the dark footer band — text-secondary (light-mode token) is
   2.8:1 there and fails AA; the on-dark variant (7.75:1) is required instead. */
footer .brand small{color:var(--color-text-secondary-on-dark)}
.navlinks{display:flex;gap:1px;margin-left:auto}
.navlinks a{font-size:var(--text-label-size);font-weight:var(--weight-label);color:var(--color-text-secondary);padding:8px 13px;border-radius:var(--radius-pill);white-space:nowrap;text-decoration:none;transition:color var(--duration-fast) var(--easing-standard)}
.navlinks a:hover{color:var(--color-text-primary);text-decoration:none}
.navlinks a.active{color:var(--color-text-primary);box-shadow:inset 0 -2px 0 var(--color-accent)}
/* Text color is --color-text-primary, NOT accent — this sits on the light header bar,
   and accent-as-text there is ~3.1:1 (fails AA; see the file-header contrast note). The
   icon alone carries the accent tint (decorative, exempt from text-contrast rules). */
.nav-phone{display:flex;align-items:center;gap:6px;font-size:var(--text-label-size);font-weight:var(--weight-label);color:var(--color-text-primary);white-space:nowrap;margin-left:4px;text-decoration:none;padding:8px 6px}
.nav-phone:hover{text-decoration:underline}
.nav-phone-ico{flex-shrink:0;color:var(--color-accent)}
.nav-cta{font-size:var(--text-label-size);font-weight:var(--weight-body-semibold);color:var(--color-text-on-accent);background:var(--color-accent);padding:9px 16px;border-radius:var(--radius-pill);white-space:nowrap;margin-left:4px;text-decoration:none;transition:background var(--duration-fast) var(--easing-standard)}
.nav-cta:hover{background:var(--color-accent-hover);text-decoration:none}
.burger{display:none;flex-direction:column;gap:4px;margin-left:auto;background:none;border:0;cursor:pointer;padding:12px}
.burger span{width:22px;height:2px;background:var(--color-text-primary);border-radius:2px}

/* ---- layout ---- */
main{padding-top:8px}
.crumb{font-size:var(--text-caption-size);color:var(--color-text-secondary);padding:14px 0 0}
.crumb a{color:var(--color-text-secondary)}
.hero{padding:34px 0 8px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:var(--text-label-size);font-weight:var(--weight-label);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-secondary);margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--color-accent)}
h1{font-family:var(--font-display);font-weight:var(--weight-display-semibold);font-size:var(--text-display-size);line-height:var(--text-display-lh);letter-spacing:var(--tracking-display)}
h1 em{font-style:italic;color:var(--color-text-primary)}
h2{font-family:var(--font-display);font-weight:var(--weight-display-semibold);font-size:var(--text-h2-size);line-height:var(--text-h2-lh);margin:34px 0 12px;letter-spacing:var(--tracking-h2,0)}
h3{font-family:var(--font-body);font-size:var(--text-h3-size);line-height:var(--text-h3-lh);font-weight:var(--weight-body-semibold);margin:18px 0 6px}
p{margin:9px 0;color:var(--color-text-primary)}
.lead{font-size:var(--text-h3-size);color:var(--color-text-secondary);max-width:680px;margin-top:18px;line-height:1.5}
.section{padding:14px 0}
.prose{max-width:var(--container-text-width)}
.prose ul{margin:10px 0 10px 20px}.prose li{margin:5px 0;color:var(--color-text-primary)}

/* ---- buttons (Button component: primary / secondary("ghost") / text) ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-body);font-size:var(--text-button-size);font-weight:var(--weight-body-semibold);letter-spacing:var(--tracking-button);padding:14px 26px;min-height:44px;border-radius:var(--radius-pill);cursor:pointer;border:1.5px solid transparent;transition:background var(--duration-fast) var(--easing-standard),border-color var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard);text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--color-accent);color:var(--color-text-on-accent)}
.btn-primary:hover{background:var(--color-accent-hover)}
.btn-primary:active{background:var(--color-accent);transform:translateY(1px)}
.btn-primary:disabled,.btn-primary[disabled]{opacity:.4;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--color-text-primary);border-color:var(--color-text-primary)}
.btn-ghost:hover{background:var(--color-bg-surface);border-color:var(--color-text-primary)}
.btn-ghost:active{background:var(--color-bg-surface-hover)}
.btn-ghost:disabled,.btn-ghost[disabled]{opacity:.4;cursor:not-allowed}
/* Text/link button — deliberately NOT --color-accent on light grounds: at ~3.1:1 it fails
   WCAG AA for normal text (see the file header note and the phase2 report's contrast
   table). --color-text-primary is the compliant default; footer/.story (the two dark-band
   placements) use the accent tint, which passes at 5.1:1 on dark. */
.btn-text{background:none;border:0;padding:0;min-height:0;color:var(--color-text-primary);font-weight:var(--weight-body-semibold);text-decoration:underline;text-decoration-color:transparent}
.btn-text:hover{text-decoration-color:currentColor}
footer .btn-text,.story .btn-text{color:var(--color-accent-on-dark)}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;margin-top:24px}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:var(--text-label-size);font-weight:var(--weight-body-regular);color:var(--color-text-primary);background:var(--color-bg-surface);border:1px solid var(--color-border-hairline);padding:8px 14px;border-radius:var(--radius-pill)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent)}

/* ---- author byline (E-E-A-T) / ReviewedBy ----
   .byline is the existing per-page author block. .reviewed-by is new (Phase 2 adds the
   class; no page yet separates "written by" from a distinct reviewer — see phase2 report). */
.byline,.reviewed-by{display:flex;gap:14px;align-items:center;background:var(--color-bg-surface);border:1px solid var(--color-border-hairline);border-radius:var(--radius-md);padding:14px 16px;margin:26px 0;max-width:var(--container-text-width)}
.byline .ph-photo{width:52px;height:52px;border-radius:50%;border:2px dashed var(--color-accent);background:var(--color-bg-surface-hover);display:flex;align-items:center;justify-content:center;color:var(--color-text-primary);flex-shrink:0;font-size:10px;text-align:center;line-height:1.1}
.byline img,.reviewed-by img{border-radius:50%;object-fit:cover;flex-shrink:0}
.byline .who,.reviewed-by .who{font-size:var(--text-caption-size)}
.byline .who b,.reviewed-by .who b{color:var(--color-text-primary)}
.byline .who span,.reviewed-by .who span{display:block;color:var(--color-text-secondary);font-size:var(--text-caption-size);margin-top:2px}
.reviewed-by .check{color:var(--color-confirm);flex-shrink:0}

/* ---- .warm-photo — Phase 4 image pass (Kieran K10); warm-overlay treatment now BAKED
   into the asset (Phase 5, Bianca's headshot-asset-spec.md) ----
   The <picture> wrapper carries pre-cropped (4:5), pre-graded avif/webp/jpg masters
   (Team/Brand-Creative/scripts/process_headshot.py; committed under public/img/, NOT
   generated by astro:assets — see K8 in scripts/optimize-images.mjs's header, still the
   reason images don't route through the Astro pipeline). The warm duotone (18% blend
   toward --color-bg-dark in shadow / --color-bg-base in highlight) is now resolved once
   into the file, so there is no live `::after` compositing layer any more — that layer
   was the likely cause of Phase 4's +17ms INP move (redesign-phase4-report.md §7) and is
   deliberately not reintroduced. Re-bake via Bianca's script if the source photo changes. */
.warm-photo{position:relative;display:block;line-height:0;flex-shrink:0;overflow:hidden}
.warm-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.warm-photo--avatar{width:52px;height:52px;border-radius:50%}
.warm-photo--avatar img{object-position:50% 22%}
.ph-field{display:inline-block;background:var(--color-bg-surface);border:1px dashed var(--color-accent);border-radius:var(--radius-sm);padding:0 7px;color:var(--color-text-primary);font-weight:var(--weight-body-semibold)}

/* ---- disclosure note (new global component: "not a lender", compensation asides) ---- */
.disclosure-note{background:var(--color-bg-surface);border-radius:var(--radius-md);border-left:3px solid var(--color-accent);padding:14px 16px;margin:20px 0;max-width:var(--container-text-width);font-size:var(--text-caption-size);line-height:var(--text-caption-lh);color:var(--color-text-secondary)}
.disclosure-note strong{color:var(--color-text-primary)}

/* ---- key facts / cards ---- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0;max-width:760px}
.fact{background:var(--color-bg-surface);border:1px solid var(--color-border-hairline);border-radius:var(--radius-md);padding:16px}
/* NOT --color-accent here: measured 2.66:1 on --color-bg-surface (fails even the 3:1
   large-text minimum — accent only clears ~3:1 on --color-bg-base, and this card sits on
   surface). --color-text-primary is the safe, always-passing choice. */
.fact b{display:block;font-family:var(--font-display);font-size:var(--text-h2-size);color:var(--color-text-primary)}
.fact span{font-size:var(--text-caption-size);color:var(--color-text-secondary)}

/* ---- generic Card component (rest/hover) — used by .related below and available for
   Phase 3 markup ---- */
.card{background:var(--color-bg-surface);border:1px solid var(--color-border-hairline);border-radius:var(--radius-md);box-shadow:var(--shadow-resting);padding:20px}
a.card{display:block;text-decoration:none;color:inherit;transition:box-shadow var(--duration-fast) var(--easing-standard),transform var(--duration-fast) var(--easing-standard),border-color var(--duration-fast) var(--easing-standard)}
a.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px);border-color:var(--color-accent)}

/* ---- Step list ("How it works") — new global component; numeral is decorative ---- */
.step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:24px 0}
.step-list .step{display:block}
.step-list .n{font-family:var(--font-display);font-weight:var(--weight-display-semibold);font-size:var(--text-numeral-size);line-height:var(--text-numeral-lh);color:var(--color-accent);margin-bottom:12px}
.step-list h3{margin-top:0}
.step-list p{color:var(--color-text-secondary);font-size:var(--text-body-size)}
@media(max-width:880px){.step-list{grid-template-columns:1fr}}

/* ---- FAQ accordion (native <details>/<summary>) ----
   Chevron is Lucide's chevron-down.svg (public/icons/chevron-down.svg), applied as a
   mask so it inherits currentColor — no icon font, per the build brief. */
.faq{max-width:var(--container-text-width);margin-top:10px}
.faq details{border:1px solid var(--color-border-hairline);border-radius:var(--radius-sm);background:var(--color-bg-surface);padding:0 16px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:var(--weight-label);padding:14px 0;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;font-size:var(--text-body-size);color:var(--color-text-primary)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:18px;height:18px;flex-shrink:0;background-color:var(--color-accent);-webkit-mask:url("/icons/chevron-down.svg") center/contain no-repeat;mask:url("/icons/chevron-down.svg") center/contain no-repeat;transition:transform var(--duration-fast) var(--easing-standard)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{padding:0 0 14px;color:var(--color-text-primary);font-size:var(--text-caption-size)}

/* ---- related / guides cards (Card component instance) ---- */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.related.related-2{grid-template-columns:repeat(2,1fr)}
.related a{display:block;background:var(--color-bg-surface);border:1px solid var(--color-border-hairline);border-radius:var(--radius-md);box-shadow:var(--shadow-resting);padding:16px;color:var(--color-text-primary);text-decoration:none;transition:transform var(--duration-fast) var(--easing-standard),box-shadow var(--duration-fast) var(--easing-standard),border-color var(--duration-fast) var(--easing-standard)}
.related a:hover{border-color:var(--color-accent);text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-hover)}
.related a b{display:block;font-size:var(--text-caption-size);font-weight:var(--weight-body-semibold);transition:color var(--duration-fast) var(--easing-standard)}
.related a span{font-size:var(--text-caption-size);color:var(--color-text-secondary)}

/* ---- lead form (behavior/fields/endpoints unchanged — js/strata.js untouched; Input
   component tokens applied to the existing markup only) ---- */
/* --muted/--accent-ink compat aliases, scoped to .cta-band only: js/strata.js's
   injectTalkNow() (untouched per the build brief — behavior/markup there is out of
   scope) writes inline `color:var(--muted,#5C616A)` / `var(--accent-ink,#7E551F)` styles
   into content it appends inside this element. With the legacy globals removed, those
   var() calls fell through to their hardcoded fallback hex, which measured 2.55-2.69:1 on
   this dark band (fails AA). Defining the two names here (nowhere else) restores a
   resolvable value — the on-dark tokens, which pass — without resurrecting them
   anywhere else in the cascade or touching the JS. */
.cta-band{--muted:var(--color-text-secondary-on-dark);--accent-ink:var(--color-accent-on-dark);background:var(--color-bg-dark);color:var(--color-text-primary-on-dark);border-radius:var(--radius-md);padding:34px;margin:34px 0;max-width:none}
.cta-band h2{color:var(--color-text-primary-on-dark);margin-top:0}
.cta-band p{color:var(--color-text-secondary-on-dark)}
.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;max-width:640px}
.lead-form .full{grid-column:1 / -1}
.lead-form label{display:block;font-size:var(--text-label-size);font-weight:var(--weight-label);margin-bottom:5px;color:var(--color-text-primary-on-dark)}
.lead-form input,.lead-form select{width:100%;min-height:44px;font-family:var(--font-body);font-size:var(--text-body-size);padding:12px 14px;border:1px solid var(--color-border-subtle-on-dark);border-radius:var(--radius-sm);background:var(--color-bg-dark-surface);color:var(--color-text-primary-on-dark)}
.lead-form input::placeholder{color:var(--color-input-placeholder)}
.lead-form input:focus,.lead-form select:focus{outline:none;border-color:var(--color-border-focus-on-dark);box-shadow:0 0 0 2px var(--color-border-focus-on-dark)}
/* Error state — dormant until Phase 3 wires per-field validation classes; JS/markup unchanged this phase. */
.lead-form .field.has-error input,.lead-form .field.has-error select{border-color:var(--color-error-border);background:var(--color-error-bg);color:var(--color-text-primary)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-caption-size);color:var(--color-text-secondary-on-dark);line-height:1.45}
.consent input{width:17px;height:17px;margin-top:2px;flex-shrink:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-ok{display:none;background:rgba(180,134,58,.18);border:1px solid var(--color-accent);border-radius:var(--radius-md);padding:16px;color:var(--color-text-primary-on-dark);margin-top:14px}
.form-err{display:none;color:#F2A99B;font-size:var(--text-caption-size);margin-top:10px}
/* self-scheduling block injected into the success state */
/* two-step micro-commitment progress */
.form-steps{grid-column:1 / -1;display:flex;align-items:center;gap:8px;font-size:var(--text-caption-size);color:var(--color-text-secondary-on-dark);margin-bottom:2px}
.form-steps .sdot{width:8px;height:8px;border-radius:50%;background:var(--color-border-subtle-on-dark);display:inline-block}
.form-steps .sdot.on{background:var(--color-accent)}
.form-steps b{color:var(--color-text-primary-on-dark);font-weight:var(--weight-body-semibold)}
.form-steps .fback{color:var(--color-text-secondary-on-dark);margin-right:4px;text-decoration:underline}
/* soft parallel CTA to the lead magnet */
.soft-cta{margin-top:16px;font-size:var(--text-caption-size);color:var(--color-text-secondary-on-dark)}
.soft-cta a{color:var(--color-accent-on-dark);text-decoration:underline}
/* Phase 3B (Milo Reyes): the testimonial/social-proof component (.quotes/.quote/.ph)
   is removed — dead CSS, never consumed by any page (grep-verified 0 usages), and the
   Owner's 2026-09-05 decision removed the client-stories/testimonial block sitewide
   (site-copy-v2.md change-log item 3). Nothing to hide; there was never a rendered
   instance to remove from markup. */

/* ---- footer (design spec §1.2: dark band, NAP, disclosures, links) ---- */
footer{background:var(--color-bg-dark);color:var(--color-text-secondary-on-dark);padding:50px 0 32px;font-size:var(--text-caption-size);margin-top:40px}
footer .ftop{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:38px;margin-bottom:30px}
footer h2{color:var(--color-text-primary-on-dark);font-size:var(--text-h3-size);margin-bottom:13px;font-weight:var(--weight-body-semibold);font-family:var(--font-body)}
footer a{color:var(--color-text-secondary-on-dark);text-decoration:none}footer a:hover{color:var(--color-text-primary-on-dark);text-decoration:underline}
footer ul{list-style:none}footer li{margin-bottom:8px}
.footer-nap{margin-top:14px;color:var(--color-text-secondary-on-dark)}
.footer-nap a{color:var(--color-text-secondary-on-dark)}
.footer-nap a:hover{color:var(--color-text-primary-on-dark)}
.legal{border-top:1px solid var(--color-border-subtle-on-dark);padding-top:20px;font-size:var(--text-caption-size);color:var(--color-text-secondary-on-dark);line-height:1.7}
.legal p{margin-bottom:9px;color:var(--color-text-secondary-on-dark)}
.fbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:18px;font-size:var(--text-caption-size)}
@media(max-width:880px){
  .facts,.related,.related.related-2,.lead-form,.quotes{grid-template-columns:1fr}
  footer .ftop{grid-template-columns:1fr 1fr}
  .navlinks,.nav-phone,.nav-cta{display:none}.burger{display:flex}
  .navbar.open{border-radius:18px;flex-wrap:wrap;transition:border-radius var(--duration-base) var(--easing-standard)}
  .navbar.open .navlinks{display:flex;flex-direction:column;width:100%;order:3;margin:6px 0 4px}
  .navbar.open .navlinks a{padding:11px 14px}
  .navbar.open .nav-phone{display:flex;width:100%;order:4;justify-content:center;padding:11px 14px}
  .navbar.open .nav-cta{display:block;width:100%;order:5;text-align:center;margin:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}