/* ═══════════════════════════════════════════════════════════════════════
   JOSE CASTILLO LOANS — brand system v1.0
   Derived from 04-resources/brand-guidelines.png. Shared by index.html,
   start.html and privacy.html. Change a token here, not in a page.

   The rules that are not negotiable, straight off the guideline sheet:
     · Square corners everywhere. No radius, anywhere, ever.
     · Red is the mark and the primary action. Never body copy, never a link.
     · Section dividers are 2px ink. Row dividers are 1px rule grey.
     · No shadows, no gradients, no outlines on the mark.
     · Archivo only — Extrabold for names and headlines, Regular/Semibold
       for copy. Never two weights in one row.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* brand palette — exact values from the guideline sheet */
  --red:       #EC3013;  /* SIGNAL RED */
  --ink:       #201E1D;  /* INK        */
  --graphite:  #444141;  /* GRAPHITE   */
  --rule-grey: #D7D3D3;  /* RULE GREY  */
  --ground:    #F3F2F2;  /* GROUND     */
  --white:     #FFFFFF;  /* WHITE      */

  /* semantic roles — these are what the pages actually reference */
  --bg:       var(--ground);
  --surface:  var(--white);
  --fg:       var(--ink);
  --fg-2:     var(--graphite);
  --rule:     var(--rule-grey);
  --divider:  var(--ink);
  --field-bg: var(--white);
  /* The logo PNGs ship with an opaque ground baked in — white on the primary
     lockup, exactly #201E1D on the reversed one. The header band is set to
     match whichever one it is showing, so the lockup sits flush with no panel
     edge around it. Do not change one without the other. */
  --head-bg: var(--white);
  --foot-rule: #3D3A39;
  --foot-fg-2: #A9A4A2;

  --font: "Archivo", "Archivo Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* the lockup sets names at -0.035em and LOANS at 0.4em; both recur in UI */
  --track-tight: -.035em;
  --track-wide: .4em;
  /* Display sizes close up further than the lockup does — tracking that reads
     correct at 20px is loose at 70px. Two values, not one. */
  --track-display: -.042em;

  /* Archivo is loaded with its WIDTH axis, so the display voice and the body
     voice are the same family at two widths rather than two families. This is
     the only typographic liberty on the page: h1 and h2 sit at 112%, every
     other element stays at the drawn width. Arial ignores it and falls back
     cleanly. */
  --wdth-display: 112%;

  --gut: clamp(20px, 5vw, 40px);  /* page gutter   */
  --wrap: 1140px;                 /* content width */
}

/* Dark ground is a sanctioned variation on the guideline sheet — the lockup
   reverses (red roof, white bar) and red itself stays exactly as specified. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1918; --surface: #2A2726; --fg: #F3F2F2; --fg-2: #B4AFAD;
    --rule: #565150; --divider: #F3F2F2; --field-bg: #2B2928; --head-bg: var(--ink);
  }
}
:root[data-theme="dark"] {
  --bg: #1A1918; --surface: #2A2726; --fg: #F3F2F2; --fg-2: #B4AFAD;
  --rule: #565150; --divider: #F3F2F2; --field-bg: #2B2928; --head-bg: var(--ink);
}

/* Metric-matched fallback so headlines do not reflow if Archivo is slow.
   Arial is the nearest grotesque already on every machine; the overrides
   pull it onto Archivo's metrics. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 101%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: var(--track-tight);
  line-height: 1.02;
  text-wrap: balance;
}
/* h1 and h2 are the display roles. h3/h4 are structural labels and stay at the
   drawn width, which is what keeps the two voices distinguishable. */
h1, h2 { font-stretch: var(--wdth-display); letter-spacing: var(--track-display); }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

/* Red never carries a link. Links are ink with a rule under them. */
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--red); }

:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
/* A red ring on a red button is not a ring. Anything whose own ground is
   Signal Red takes the ink one, which reads against both the control and the
   band behind it. */
.btn:focus-visible, .skip:focus-visible { outline-color: var(--fg); }
::selection { background: var(--red); color: var(--white); }

/* The header is sticky, so anything jumped to needs to clear it. */
main[id], section[id], div[id] { scroll-margin-top: 96px; }

/* ── shared type utilities ─────────────────────────────────────────── */
.eyebrow {
  font-size: .7rem; font-weight: 600; line-height: 1.4;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2);
}
.wide-label {  /* the LOANS treatment, reused for small structural labels */
  font-size: .62rem; font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.skip {
  position: absolute; left: -9999px; z-index: 99;
  background: var(--red); color: var(--white);
  padding: 12px 20px; font-weight: 700; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── the mark ───────────────────────────────────────────────────────
   Roof stays SIGNAL RED in every variation. The bar takes the opposite of
   the ground it sits on — which is exactly how the reversed lockup is drawn. */
.mark { display: block; overflow: visible; }
.mark .roof { stroke: var(--red); fill: none; stroke-linecap: butt; stroke-linejoin: miter; }
.mark .bar { fill: var(--fg); }

/* ── buttons ────────────────────────────────────────────────────────
   Wide buttons set their label flush left, per the guideline sheet. Hover
   moves red to ink rather than inventing a tint that is not in the palette. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 26px; border: 2px solid var(--red); background: var(--red);
  color: var(--white); font: inherit; font-weight: 700; font-size: .92rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* On a dark ground the ink hover would vanish, so it flips to white. A button
   sitting on a ground that does not follow the theme — the red closing band —
   opts out with .btn-fixed and keeps the hover its own section defines. */
:root[data-theme="dark"] .btn:not(.btn-fixed):hover { background: var(--white); border-color: var(--white); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.btn-fixed):hover { background: var(--white); border-color: var(--white); color: var(--ink); }
}

/* The outlined button is already theme-agnostic: it inverts fg and bg, which
   are whatever the current ground says they are. No dark-mode variant needed. */
.btn-line { background: none; border-color: var(--fg); color: var(--fg); }
.btn-line:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }

.btn-wide { width: 100%; justify-content: space-between; text-align: left; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { flex: none; }

/* ── rules ─────────────────────────────────────────────────────────── */
.rule-section { border: 0; border-top: 2px solid var(--divider); margin: 0; }
.rule-row { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* ── red tile: feature and step markers, white glyph, never a filled icon ── */
.tile {
  flex: none; width: 44px; height: 44px; background: var(--red); color: var(--white);
  display: grid; place-items: center; font-weight: 800; font-size: .95rem;
}
.ico, .tile svg {
  stroke: currentColor; stroke-width: 2; stroke-linecap: square;
  stroke-linejoin: miter; fill: none;
}

/* ── site header ───────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--head-bg); border-bottom: 2px solid var(--divider);
}
.head-in {
  max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut);
  height: 76px; display: flex; align-items: center; gap: 24px;
}
/* The lockup is the one thing in this band that must never be compressed. */
.head-logo { flex: none; margin-right: auto; display: flex; align-items: center; text-decoration: none; }
.head-logo img { width: 186px; height: auto; }
.head-nav { flex: none; display: flex; align-items: center; gap: 26px; }
.head-nav a {
  font-size: .76rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--fg-2);
}
.head-nav a:hover { color: var(--fg); }
.head-cta { flex: none; padding: 13px 20px; font-size: .76rem; }

/* The direct line is neither navigation nor the primary action, so it takes a
   third weight: full ink, bold, tabular. On a page whose argument is "you are
   talking to a person", the number belongs above the fold on every screen. */
.head-tel {
  flex: none;
  font-size: .86rem; font-weight: 700; letter-spacing: var(--track-tight);
  color: var(--fg); text-decoration: none; white-space: nowrap;
}
.head-tel:hover { text-decoration: underline; text-decoration-color: var(--red); }

/* Language toggle. It names the language you would switch TO, written IN that
   language — someone scanning an English page for a way out of English is
   looking for the word "Espanol", not for a flag or a two-letter code. Flags
   are wrong here anyway: they name countries, and this is about a language.

   It is a bordered box because it is a control, not a nav link, and it outranks
   both the section nav and the number: on the narrowest screens the only things
   left in the band are the lockup, the language, and the way into the form. */
.head-lang {
  flex: none; padding: 8px 12px; border: 1px solid var(--rule);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--fg);
  white-space: nowrap; transition: border-color .14s ease;
}
.head-lang:hover { border-color: var(--fg); }
.head-lang .lang-short { display: none; }

/* Under 560 the lockup, the language control and the action stop fitting on
   one row. The control drops to its code rather than the action being
   squeezed -- the accessible name keeps the full language either way. */
@media (max-width: 560px) {
  .head-lang { padding: 8px 9px; letter-spacing: .06em; }
  .head-lang .lang-full { display: none; }
  .head-lang .lang-short { display: inline; }
}

/* The nav goes before the row is tight enough to squeeze the lockup. With the
   language control in the band as well, that point moved up again. */
/* 1120, not 1080: the Spanish labels are the wider set, and the band has to
   clear the longer of the two languages or the row collapses on one of them. */
@media (max-width: 1120px) { .head-nav { display: none; } }
@media (max-width: 620px) { .head-tel { display: none; } }
@media (max-width: 520px) {
  .head-in { height: 64px; gap: 12px; }
  .head-logo img { width: 140px; }
  .head-cta { padding: 11px 13px; font-size: .68rem; letter-spacing: .05em; }
}
/* Small phones. Three things still share the row -- lockup, language, action --
   and none may be dropped or squeezed, so each gives up a little. */
@media (max-width: 400px) {
  .head-in { gap: 10px; }
  .head-logo img { width: 132px; }
  .head-cta { padding: 10px 9px; font-size: .64rem; }
}
/* At 360 and below the three no longer fit, so the action leaves the band --
   it is the one of the three that is repeated in the page. The homepage puts
   the form directly under the hero, privacy.html closes with the same button,
   and start.html never had one up here. Identity and language always stay. */
@media (max-width: 360px) { .head-cta { display: none; } }

/* ── site footer ───────────────────────────────────────────────────── */
.site-foot { background: var(--ink); color: var(--ground); padding: 56px 0 44px; }
.foot-in { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.site-foot a { color: var(--ground); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.foot-top {
  display: flex; flex-wrap: wrap; gap: 30px 40px;
  align-items: flex-start; justify-content: space-between;
  padding-bottom: 28px; border-bottom: 1px solid var(--foot-rule);
}
.foot-logo img { width: 214px; height: auto; }
.foot-contact { display: grid; gap: 5px; font-size: .92rem; }
.foot-contact .eyebrow { color: var(--foot-fg-2); margin-bottom: 4px; }
.eho { display: flex; align-items: center; gap: 11px; }
.eho span { font-size: .62rem; font-weight: 700; letter-spacing: .1em; line-height: 1.35; }
.lic { margin-top: 26px; font-size: .84rem; }
.lic span { color: var(--foot-fg-2); }
.disclaim { margin-top: 16px; font-size: .72rem; line-height: 1.65; color: var(--foot-fg-2); max-width: 94ch; }
.foot-links {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--foot-rule);
  display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: .78rem;
}

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