/* ============================================================
   hello refi — web stylesheet
   v1.29 · 2026-10-01
   THE single stylesheet for the site. Enqueue once, site-wide.
   Page blocks are markup only — no <style>, no inline styles.
   Never edit this file locally: additions come from Hello Refi
   as a new version, and a local edit is lost on the next drop.
   Change log at the bottom of the file.
   Single source of truth for the launch site.
   Load once site-wide. Page interiors are HTML blocks that
   use these classes. Do not hardcode hex values in a page.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Floods — only these three may fill a full-bleed section */
  --hr-coral:#FF6347;
  --hr-blue:#0062F0;
  --hr-yellow:#FFD200;

  /* Grounds */
  --hr-white:#FFFFFF;
  --hr-shell:#F9F4F2;   /* cards on white */
  --hr-navy:#050727;    /* the only dark ground */

  /* Accent — never floods a section */
  --hr-pink:#FFA1CD;

  /* Ink */
  --hr-ink:#17151C;     /* all type */
  --hr-ink-80:#453D4C;  /* lede */
  --hr-ink-65:#5C5563;  /* body on light */
  --hr-ink-50:#6E6472;  /* meta, captions */
  --hr-on-navy:#C9CCE0; /* secondary type on navy */

  /* Interaction */
  --hr-blue-dark:#004CBE;
  --hr-coral-dark:#E8442A;
  --hr-focus:#0062F0;
  --hr-error:#C7310F;   /* 5.9:1 on white — required markers and error text */

  /* The coral you may set type in. #FF6347 and --hr-coral-dark
     are fills only; this is the text-safe member of the family.
     5.9:1 on white, 5.1:1 on shell. --hr-error is its alias. */
  --hr-coral-text:#C7310F;

  /* Lines */
  --hr-rule:#E6DCD3;
  --hr-rule-soft:#EFE8E4;

  /* The blend. One moment per surface. Pink lives only here. */
  --hr-blend:linear-gradient(140deg,#FFA1CD 0%,#FF8B93 26%,#FF6347 56%,#FF9A3C 78%,#FFD200 100%);
  --hr-blend-tight:linear-gradient(140deg,#FFA1CD,#FF6347 60%,#FFD200);

  /* Shape */
  --hr-window:polygon(0 0,100% 0,100% 80%,31.8% 80%,13.3% 100%,13.1% 80%,0 80%);
  --hr-tail:polygon(0 0,100% 0,0 100%);
  --hr-pill:999px;
  --hr-radius:0;         /* everything except buttons is square */

  /* Type */
  --hr-font-display:'Gabarito',Verdana,sans-serif;
  --hr-font-body:'Public Sans',system-ui,-apple-system,sans-serif;

  /* Layout */
  --hr-container:1440px;
  --hr-gutter:40px;

  /* Spacing scale (4px base) */
  --hr-s1:4px;  --hr-s2:8px;   --hr-s3:12px;  --hr-s4:16px;
  --hr-s5:20px; --hr-s6:24px;  --hr-s7:32px;  --hr-s8:40px;
  --hr-s9:56px; --hr-s10:80px; --hr-s11:112px; --hr-s12:160px;

  /* Section rhythm */
  --hr-section-y:112px;
  --hr-section-y-tight:80px;

  /* Motion */
  --hr-ease:cubic-bezier(.2,.7,.3,1);
  --hr-dur:180ms;
}
@media (max-width:1024px){
  :root{ --hr-gutter:32px; --hr-section-y:80px; --hr-section-y-tight:64px; }
}
@media (max-width:767px){
  :root{ --hr-gutter:20px; --hr-section-y:64px; --hr-section-y-tight:48px; }
}

/* Scroll offset for the fixed header (§9/.hr-nav--sticky) — without
   this, every in-page anchor (/#faqs, /#calculator, /privacy-policy/
   #do-not-sell, etc.) scrolls its target right up against the top of
   the viewport, where the fixed header covers it. Matches the header's
   ~100px height. */
html{ scroll-padding-top:100px; }

/* ---------- 2. BASE ---------- */
body, .hr-page {
  margin:0;
  background:var(--hr-white);
  color:var(--hr-ink);
  font-family:var(--hr-font-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
.hr-page *,.hr-page *::before,.hr-page *::after{ box-sizing:border-box; }
.hr-page img{ display:block; max-width:100%; }
.hr-page a{ color:var(--hr-blue); text-decoration:none; }
.hr-page a:hover{ color:var(--hr-blue-dark); text-decoration:underline; }
/* Buttons and arrow links never underline, at any specificity. */
.hr-page a.hr-btn,.hr-page a.hr-btn:hover,
.hr-page a.hr-link,.hr-page a.hr-link:hover{ text-decoration:none; }
.hr-page :focus-visible{ outline:3px solid var(--hr-focus); outline-offset:3px; }

/* ---------- 3. LAYOUT ---------- */
.hr-section{
  padding:var(--hr-section-y) 0;
  background:var(--hr-white);
}
.hr-section--tight{ padding:var(--hr-section-y-tight) 0; }
.hr-section--flush{ padding:0; }

/* Flood variants. Max two non-white grounds per page. */
.hr-section--blue{ background:var(--hr-blue); color:var(--hr-white); }
.hr-section--coral{ background:var(--hr-coral); color:var(--hr-ink); }
.hr-section--yellow{ background:var(--hr-yellow); color:var(--hr-ink); }
.hr-section--navy{ background:var(--hr-navy); color:var(--hr-white); }
.hr-section--shell{ background:var(--hr-shell); color:var(--hr-ink); }

.hr-container{
  width:100%;
  max-width:var(--hr-container);
  margin-inline:auto;
  padding-inline:var(--hr-gutter);
}
.hr-stack{ display:flex; flex-direction:column; gap:var(--hr-s8); }
.hr-stack--sm{ gap:var(--hr-s5); }
.hr-stack--lg{ gap:var(--hr-s9); }

.hr-grid-2,.hr-grid-3,.hr-grid-4{ display:grid; gap:var(--hr-s6); }
.hr-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.hr-grid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.hr-grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* Asymmetric hero split: copy left, image right */
.hr-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:var(--hr-s9); align-items:center; }
/* Standalone, not a modifier — usable without .hr-split. */
.hr-split--even{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--hr-s9); align-items:start; }

@media (max-width:1024px){
  .hr-split,.hr-split--even{ grid-template-columns:minmax(0,1fr); gap:var(--hr-s8); }
  .hr-grid-3,.hr-grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .hr-grid-2,.hr-grid-3,.hr-grid-4{ grid-template-columns:minmax(0,1fr); gap:var(--hr-s5); }
}

.hr-rule{ border:0; border-top:1px solid var(--hr-rule); margin:0; }
.hr-section--blue .hr-rule,.hr-section--navy .hr-rule{ border-top-color:rgba(255,255,255,.28); }

/* ---------- 4. TYPE ---------- */
/* Sizes clamp across desktop 1440 / tablet 768 / mobile 390.
   Reviewable values are in the spec table; clamp keeps the
   in-between widths from breaking. */
.hr-eyebrow{
  font-family:var(--hr-font-body);
  font-size:14px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--hr-ink); margin:0;
}
.hr-section--blue .hr-eyebrow,.hr-section--navy .hr-eyebrow{ color:var(--hr-white); }

.hr-h1{
  font-family:var(--hr-font-display);
  font-size:clamp(40px,5.8vw,84px);
  font-weight:800; line-height:.92; letter-spacing:-.045em;
  margin:0;
}
.hr-h2{
  font-family:var(--hr-font-display);
  font-size:clamp(32px,4vw,56px);
  font-weight:800; line-height:.98; letter-spacing:-.04em;
  margin:0;
}
.hr-h3{
  font-family:var(--hr-font-display);
  font-size:clamp(24px,2vw,28px);
  font-weight:700; line-height:1.1; letter-spacing:-.02em;
  margin:0;
}
.hr-h4{
  font-family:var(--hr-font-display);
  font-size:20px; font-weight:700; line-height:1.2; letter-spacing:-.01em;
  margin:0;
}
.hr-lede{
  font-size:clamp(18px,1.6vw,22px);
  line-height:1.5; color:var(--hr-ink-80);
  max-width:56ch; margin:0;
}
.hr-body{
  font-size:18px; line-height:1.55; color:var(--hr-ink-65);
  max-width:68ch; margin:0;
}
.hr-small{ font-size:16px; line-height:1.5; color:var(--hr-ink-50); margin:0; }
.hr-fine{ font-size:14px; line-height:1.5; color:var(--hr-ink-50); margin:0; }

/* Type reverses on dark grounds */
.hr-section--blue .hr-h1,.hr-section--blue .hr-h2,.hr-section--blue .hr-h3,
.hr-section--navy .hr-h1,.hr-section--navy .hr-h2,.hr-section--navy .hr-h3{ color:var(--hr-white); }
.hr-section--blue .hr-lede,.hr-section--blue .hr-body{ color:var(--hr-white); }
.hr-section--navy .hr-lede,.hr-section--navy .hr-body{ color:var(--hr-on-navy); }
.hr-section--blue .hr-small,.hr-section--blue .hr-fine{ color:rgba(255,255,255,.88); }
.hr-section--navy .hr-small,.hr-section--navy .hr-fine{ color:var(--hr-on-navy); }
.hr-section--blue a:not(.hr-btn),.hr-section--navy a:not(.hr-btn){ color:var(--hr-yellow); }
.hr-section--blue a:not(.hr-btn):hover,.hr-section--navy a:not(.hr-btn):hover{ color:var(--hr-white); }

/* Coral and yellow are light floods: all type goes to FULL ink.
   The muted classes set their own color, so each must be named —
   --hr-ink-65 on coral is only 4.0:1. */
.hr-section--coral .hr-lede,.hr-section--yellow .hr-lede,
.hr-section--coral .hr-body,.hr-section--yellow .hr-body,
.hr-section--coral .hr-small,.hr-section--yellow .hr-small,
.hr-section--coral .hr-fine,.hr-section--yellow .hr-fine,
.hr-section--coral .hr-cta-note,.hr-section--yellow .hr-cta-note,
.hr-section--coral .hr-prose,.hr-section--yellow .hr-prose,
.hr-section--coral .hr-list li,.hr-section--yellow .hr-list li{ color:var(--hr-ink); }
.hr-section--coral .hr-h1,.hr-section--coral .hr-h2,.hr-section--coral .hr-h3,.hr-section--coral .hr-h4,
.hr-section--yellow .hr-h1,.hr-section--yellow .hr-h2,.hr-section--yellow .hr-h3,.hr-section--yellow .hr-h4{ color:var(--hr-ink); }
.hr-section--coral .hr-list__rest,.hr-section--yellow .hr-list__rest{ color:var(--hr-ink); }

/* Long-form body copy: legal, disclosures, about */
.hr-prose{ max-width:70ch; font-size:18px; line-height:1.65; color:var(--hr-ink-65); }
.hr-prose h1{ font-size:40px; line-height:1.1; letter-spacing:-.03em; margin:0 0 16px; color:var(--hr-ink); }
.hr-prose h2{ font-family:var(--hr-font-display); font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1.1; color:var(--hr-ink); margin:48px 0 16px; }
.hr-prose h3{ font-family:var(--hr-font-display); font-size:22px; font-weight:700; letter-spacing:-.015em; color:var(--hr-ink); margin:32px 0 12px; }
.hr-prose p,.hr-prose ul,.hr-prose ol{ margin:0 0 20px; }
.hr-prose li{ margin-bottom:10px; }
.hr-prose strong{ color:var(--hr-ink); font-weight:600; }
.hr-prose h4{ font-family:var(--hr-font-display); font-size:18px; font-weight:700; color:var(--hr-ink); margin:24px 0 8px; }

/* Data table — legal/disclosure pages only (e.g. CCPA category tables) */
.hr-table-wrap{ width:100%; overflow-x:auto; margin:0 0 20px; max-width:70ch; }
.hr-table{ width:100%; min-width:640px; border-collapse:collapse; font-size:16px; }
.hr-table th,.hr-table td{ border:1px solid var(--hr-rule); padding:12px 16px; text-align:left; vertical-align:top; }
.hr-table th{ background:var(--hr-shell); font-family:var(--hr-font-display); font-weight:700; color:var(--hr-ink); }
.hr-table td{ color:var(--hr-ink-65); }

/* ---------- 5. BUTTONS ---------- */
/* Buttons are the only round objects on the site. */
.hr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--hr-font-display); font-weight:700;
  font-size:17px; line-height:1;
  padding:16px 28px;
  border:0; border-radius:var(--hr-pill);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  align-self:flex-start; /* never stretch when stacked in a column flex parent */
  transition:background-color var(--hr-dur) var(--hr-ease),
             color var(--hr-dur) var(--hr-ease),
             transform var(--hr-dur) var(--hr-ease);
}
.hr-btn:hover{ transform:translateY(-1px); text-decoration:none; }
.hr-btn:active{ transform:translateY(0); }
.hr-btn--lg{ font-size:21px; padding:20px 34px; }
.hr-btn--sm{ font-size:15px; padding:12px 20px; }

/* Ground → pill pairing. One pill color per ground, nothing beside it. */
.hr-btn--blue,a.hr-btn--blue{ background:var(--hr-blue); color:var(--hr-white); }        /* on white, shell, coral, yellow */
.hr-btn--blue:hover,a.hr-btn--blue:hover{ background:var(--hr-blue-dark); color:var(--hr-white); }
.hr-btn--yellow,a.hr-btn--yellow{ background:var(--hr-yellow); color:var(--hr-ink); }    /* on blue, navy */
.hr-btn--yellow:hover,a.hr-btn--yellow:hover{ background:#F0C200; color:var(--hr-ink); }
.hr-btn--white,a.hr-btn--white{ background:var(--hr-white); color:var(--hr-ink); }       /* on coral, alt for blue */
.hr-btn--white:hover,a.hr-btn--white:hover{ background:var(--hr-shell); color:var(--hr-ink); }
.hr-btn--ink,a.hr-btn--ink{ background:var(--hr-ink); color:var(--hr-white); }           /* utility only */
.hr-btn--ink:hover,a.hr-btn--ink:hover{ background:#000; color:var(--hr-white); }

/* Text link with arrow, for secondary actions */
.hr-link,a.hr-link{ font-family:var(--hr-font-display); font-weight:700; font-size:17px; color:var(--hr-blue); display:inline-flex; align-items:center; gap:8px; align-self:flex-start; }
.hr-link:hover,a.hr-link:hover{ color:var(--hr-blue-dark); text-decoration:none; }
.hr-link svg{ transition:transform var(--hr-dur) var(--hr-ease); }
.hr-link:hover svg{ transform:translateX(3px); }

/* Reassurance text that sits beside a CTA */
.hr-cta-row{ display:flex; gap:var(--hr-s5); align-items:center; flex-wrap:wrap; }
.hr-cta-note{ font-size:17px; line-height:1.4; font-weight:500; color:var(--hr-ink-50); }
.hr-section--blue .hr-cta-note,.hr-section--navy .hr-cta-note{ color:rgba(255,255,255,.9); }

/* ---------- 6. CARDS ---------- */
/* Square. Always. No shadows, no borders unless stated. */
.hr-card{
  background:var(--hr-shell);
  color:var(--hr-ink);
  padding:var(--hr-s8) 36px;
  border-radius:var(--hr-radius);
  display:flex; flex-direction:column; gap:var(--hr-s4);
}
.hr-card--white{ background:var(--hr-white); }
.hr-card--navy{ background:var(--hr-navy); color:var(--hr-white); }
.hr-card--coral{ background:var(--hr-coral); }
.hr-card--tight{ padding:var(--hr-s6); }
/* .hr-card--navy is a dark ground even on a white section. */
.hr-card--navy .hr-h1,.hr-card--navy .hr-h2,.hr-card--navy .hr-h3,.hr-card--navy .hr-h4{ color:var(--hr-white); }
.hr-card--navy .hr-lede,.hr-card--navy .hr-body{ color:var(--hr-on-navy); }
.hr-card--navy .hr-small,.hr-card--navy .hr-fine{ color:var(--hr-on-navy); }
.hr-card--navy .hr-eyebrow,.hr-card--navy .hr-stat__label{ color:var(--hr-white); }
/* .hr-rule-top defaults to a light-ground border color (--hr-rule); a
   navy CARD (unlike .hr-section--navy, handled separately below) needs
   its own override so the divider is visible against the dark ground.
   Matches .hr-list li's border-bottom-color on navy (rgba(255,255,255,.22),
   a few lines up) rather than the .28 used on .hr-section--blue/--navy —
   navy is a much darker ground than blue, so the same .28 opacity read
   as noticeably bolder/higher-contrast here; .22 reads equally faint. */
.hr-card--navy .hr-rule-top{ border-top-color:rgba(255,255,255,.22); }
.hr-card--navy a:not(.hr-btn){ color:var(--hr-yellow); }
.hr-card--navy a:not(.hr-btn):hover{ color:var(--hr-white); }
.hr-card--tall{ min-height:400px; }
.hr-card__foot{ margin-top:auto; }
/* White cards are the default on a blue or navy flood */
.hr-section--blue .hr-card,.hr-section--navy .hr-card{ background:var(--hr-white); color:var(--hr-ink); }
.hr-section--blue .hr-card .hr-body,.hr-section--navy .hr-card .hr-body{ color:var(--hr-ink-65); }

/* Square number chip — steps, ranked lists */
.hr-chip{
  align-self:flex-start;
  background:var(--hr-yellow); color:var(--hr-ink);
  font-family:var(--hr-font-display); font-weight:800; font-size:22px; line-height:1;
  padding:10px 18px; border-radius:0;
}
.hr-chip--blue{ background:var(--hr-blue); color:var(--hr-white); }
.hr-chip--coral{ background:var(--hr-coral); color:var(--hr-ink); }

/* Tag / eyebrow chip, square */
.hr-tag{
  display:inline-block; background:var(--hr-shell); color:var(--hr-ink);
  font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 12px; border-radius:0;
}

/* ---------- 7. STAT / NUMERAL ---------- */
.hr-stat__num{
  font-family:var(--hr-font-display);
  font-size:clamp(72px,8vw,124px);
  font-weight:800; letter-spacing:-.05em; line-height:.9;
  color:var(--hr-navy); display:block;
}
/* The blend through a numeral works on navy only — every stop of
   the ramp is too light to read on white or shell. */
.hr-card--navy .hr-stat__num--blend,
.hr-section--navy .hr-stat__num--blend{
  background:var(--hr-blend-tight);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- 8. WINDOW CROP (the mark's shape) ---------- */
.hr-window{ clip-path:var(--hr-window); overflow:hidden; }
.hr-window > img,.hr-window > video{ width:100%; height:100%; object-fit:cover; }
/* Focal point — per-photo art direction. Pick the side of the frame the crop
   should favour so the subject lands centred in the window. */
.hr-focus-l img{ object-position:25% center; }
.hr-focus-cl img{ object-position:38% center; }
.hr-focus-c img{ object-position:center center; }
.hr-focus-cr img{ object-position:62% center; }
.hr-focus-r img{ object-position:75% center; }
.hr-focus-t img{ object-position:center 20%; }
.hr-focus-bl img{ object-position:35% 72%; }
.hr-focus-bl2 img{ object-position:35% 88%; }  /* harder upward shift */
.hr-focus-tl img{ object-position:35% 28%; }
.hr-focus-tr img{ object-position:64% 28%; }
.hr-focus-br img{ object-position:65% 72%; }
/* Zoom inside the crop — the window clips, so this enlarges the subject
   without changing the frame. Pair with a focus class to re-centre. */
.hr-zoom-105 img{ transform:scale(1.05); }
.hr-zoom-110 img{ transform:scale(1.10); }
.hr-zoom-115 img{ transform:scale(1.15); }
.hr-zoom-125 img{ transform:scale(1.25); }
/* Mirror. Combine with a zoom via the paired classes. */
.hr-flip-x img{ transform:scaleX(-1); }
.hr-flip-x.hr-zoom-110 img{ transform:scaleX(-1) scale(1.10); }
.hr-flip-x.hr-zoom-115 img{ transform:scaleX(-1) scale(1.15); }
.hr-flip-x.hr-zoom-125 img{ transform:scaleX(-1) scale(1.25); }
.hr-focus-b img{ object-position:center 80%; }
/* Gradient frame around a cropped image — one per page, hero only */
.hr-frame{ background:var(--hr-blend); padding:22px; }
.hr-frame--flat{ background:var(--hr-shell); padding:0; }
/* Solid-color frames — same padding as the blend frame, no gradient.
   Use these when a page already has its one blend moment elsewhere. */
.hr-frame--yellow{ background:var(--hr-yellow); }
.hr-frame--coral{ background:var(--hr-coral); }
.hr-frame--blue{ background:var(--hr-blue); }
.hr-frame--navy{ background:var(--hr-navy); }
.hr-window--hero{ height:520px; }
.hr-window--tall{ height:560px; }
.hr-window--card{ height:170px; }
@media (max-width:1024px){
  .hr-window--hero{ height:400px; }
  .hr-window--tall{ height:420px; }
}
@media (max-width:767px){
  .hr-frame{ padding:14px; }
  .hr-window--hero{ height:280px; }
  .hr-window--tall{ height:340px; }
}

/* Blend field, for a half-section panel */
.hr-blend{ background:var(--hr-blend); }

/* Icon tile — every product icon sits on the blend */
.hr-icon-tile{
  width:64px; height:64px; flex:none;
  background:var(--hr-blend-tight);
  display:flex; align-items:center; justify-content:center;
  border-radius:0;
}
.hr-icon-tile svg{ width:34px; height:34px; stroke:var(--hr-ink); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.hr-icon-tile--lg{ width:88px; height:88px; }
.hr-icon-tile--lg svg{ width:46px; height:46px; }

/* Icons — one sprite, referenced by id. See §7 of the style guide.
   <svg class="hr-icon"><use href="/assets/icons.svg#clock"></use></svg>
   Stroke follows currentColor, so an icon inherits its container's ink. */
/* Paint lives here, not on the sprite root: content pulled in by an external
   <use> inherits from the referencing document, so the sprite's own
   fill/stroke attributes never reach it. */
.hr-icon{
  width:24px; height:24px; flex:none; display:block;
  color:var(--hr-ink);
  fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round;
}
.hr-icon--lg{ width:34px; height:34px; }
.hr-icon--xl{ width:46px; height:46px; }
.hr-icon-tile .hr-icon{ width:34px; height:34px; color:var(--hr-ink); }
.hr-icon-tile--lg .hr-icon{ width:46px; height:46px; }

/* Tail graphic — CAMPAIGN ONLY. Not for web sections.
   Kept here only so social/print exports share one definition. */
.hr-tail{ clip-path:var(--hr-tail); aspect-ratio:1.41/1; background:var(--hr-coral); }

/* ---------- 9. HEADER / FOOTER (Elementor-native) ---------- */
.hr-nav{ background:var(--hr-white); }
/* padding-block only — a shorthand here would wipe out the
   horizontal gutter .hr-container sets, unflushing the logo. */
.hr-nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--hr-s7); padding-block:24px; }
/* Scoped to .hr-nav (not just .hr-nav__logo alone) — the same
   .elementor img{height:auto} specificity war as .hr-hero-flood__img
   and .hr-band-photo below: (0,1,1) beats our unscoped (0,1,0), and the
   logo falls back to its natural (large) intrinsic size. The dev
   restored this scope directly on WP after the logo kept disappearing
   whenever our CSS was pasted in — merged back here 29 Sep 2026 so we
   stop overriding that fix on the next paste. */
.hr-nav .hr-nav__logo{ height:51px; }
.hr-nav__links{ display:flex; gap:var(--hr-s7); font-size:17px; font-weight:600; }
.hr-nav__links a{ color:var(--hr-ink); }
.hr-nav__links a:hover{ color:var(--hr-blue); text-decoration:none; }
.hr-nav__links a[aria-current="page"]{ box-shadow:inset 0 -3px 0 var(--hr-coral); }
.hr-nav__actions{ display:flex; gap:var(--hr-s5); align-items:center; }

/* Dropdown — square panel, no animation. Elementor's nav widget
   renders the <ul>; these rules restyle it. Structure comes from
   Appearance > Menus, not from markup. */
.hr-nav__item{ position:relative; display:inline-flex; align-items:center; gap:6px; }
.hr-nav__item > a{ display:inline-flex; align-items:center; gap:6px; }
.hr-nav__item > a .hr-icon{ width:14px; height:14px; color:currentColor; }
.hr-submenu{
  position:absolute; top:100%; left:-16px; z-index:60;
  min-width:260px; margin:0; padding:8px 0; list-style:none;
  background:var(--hr-white); border:1px solid var(--hr-rule); border-radius:0;
  opacity:0; visibility:hidden; transition:opacity var(--hr-dur) var(--hr-ease);
}
.hr-nav__item:hover > .hr-submenu,
.hr-nav__item:focus-within > .hr-submenu{ opacity:1; visibility:visible; }
.hr-submenu a{
  display:block; padding:12px 16px;
  font-family:var(--hr-font-body); font-size:17px; font-weight:500; line-height:1.3;
  color:var(--hr-ink); text-decoration:none;
}
.hr-submenu a:hover{ color:var(--hr-blue); text-decoration:none; }
@media (max-width:1024px){ .hr-submenu{ display:none; } }
a.hr-nav__signin{ font-size:17px; font-weight:600; color:var(--hr-ink); }
a.hr-nav__signin:hover{ color:var(--hr-blue); text-decoration:none; }
a.hr-nav__phone{ display:inline-flex; align-items:center; gap:8px; font-family:var(--hr-font-display); font-weight:700; font-size:17px; color:var(--hr-ink); white-space:nowrap; }
a.hr-nav__phone:hover{ color:var(--hr-blue); text-decoration:none; }
a.hr-nav__phone .hr-icon{ width:20px; height:20px; color:currentColor; }
@media (max-width:767px){ a.hr-nav__phone span{ display:none; } }
/* Compact header row (≤1024px, same breakpoint the burger/mobile menu
   takes over at) — the phone link and "Received a mailer?" button are
   dropped entirely here, not just shrunk, per user 29 Sep 2026: both
   are already available inside the opened mobile menu
   (.hr-mobile-menu__footer has its own copy of each), so the compact
   bar only needs the logo and the burger. Scoped to .hr-nav__inner so
   this doesn't touch the phone link inside .hr-mobile-menu__footer,
   which is a sibling of .hr-nav__inner, not a descendant — confirmed
   live that scoping this way leaves the mobile menu's own phone number
   and mailer button untouched. Logo bumped to 48px at this breakpoint
   (was 42px) — burger is a fixed 48×48px regardless of logo size, so
   this doesn't grow the header at all, just fills the space that was
   already reserved. */
@media (max-width:1024px){
  .hr-nav__links,.hr-nav__signin{ display:none; }
  .hr-nav .hr-nav__logo{ height:48px; }
  .hr-nav__inner a.hr-nav__phone,
  .hr-nav__inner .hr-nav__actions .hr-btn{ display:none; }
}

.hr-footer{ background:var(--hr-navy); color:var(--hr-on-navy); padding:var(--hr-s10) 0 var(--hr-s8); }
.hr-footer a:not(.hr-btn){ color:var(--hr-white); font-size:17px; }
.hr-footer a:not(.hr-btn):hover{ color:var(--hr-yellow); text-decoration:none; }
.hr-footer__head{ font-family:var(--hr-font-display); font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hr-white); margin:0 0 var(--hr-s4); }
.hr-footer__col{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.hr-footer__col img,.hr-footer__logo{ align-self:flex-start; width:auto; }
/* Scoped to .hr-footer — same .elementor img{height:auto} specificity
   war as .hr-nav__logo above. This is the actual explanation for the
   footer-logo-renders-at-0×0 mystery investigated earlier: at the time,
   the fix that worked was an inline style on the <img> itself, which
   masked the real cause rather than explaining it. Confirmed 29 Sep
   2026 by directly inspecting matched rules on the live site —
   .elementor img{height:auto} (0,1,1) was beating the unscoped
   .hr-footer__logo{height:44px} (0,1,0) the whole time. */
.hr-footer .hr-footer__logo{ height:44px; }
.hr-footer__legal{ font-size:14px; line-height:1.6; color:var(--hr-on-navy); }

/* ---------- 10. FAQ / ACCORDION ---------- */
.hr-faq{ border-top:1px solid var(--hr-rule); }
.hr-faq__item{ border-bottom:1px solid var(--hr-rule); }
.hr-faq__q{
  width:100%; background:none; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:var(--hr-s5);
  padding:24px 0; text-align:left;
  font-family:var(--hr-font-display); font-weight:700; font-size:22px; letter-spacing:-.015em; color:var(--hr-ink);
}
.hr-faq__q:hover,.hr-faq__q:focus{ color:var(--hr-blue); background:none; }
.hr-faq__sign{ width:20px; height:20px; flex:none; position:relative; }
.hr-faq__sign::before,.hr-faq__sign::after{ content:""; position:absolute; background:var(--hr-blue); }
.hr-faq__sign::before{ left:0; top:9px; width:20px; height:2px; }
.hr-faq__sign::after{ left:9px; top:0; width:2px; height:20px; transition:transform var(--hr-dur) var(--hr-ease); }
.hr-faq__item[open] .hr-faq__sign::after,
.hr-faq__q[aria-expanded="true"] .hr-faq__sign::after{ transform:scaleY(0); }
.hr-faq__a{ padding:0 0 24px; font-size:18px; line-height:1.55; color:var(--hr-ink-65); max-width:70ch; }

/* ---------- 11. FORMS (Gravity Forms) ---------- */
/* Scope these with a wrapper class so plugin updates can't win. */
.hr-form .gform_wrapper,.hr-form{ font-family:var(--hr-font-body); }
.hr-form .gfield_label,.hr-form label{
  font-size:16px; font-weight:600; color:var(--hr-ink);
  margin-bottom:8px; display:block;
}
.hr-form .gfield_required{ color:var(--hr-error); }
.hr-form input[type="text"],.hr-form input[type="email"],.hr-form input[type="tel"],
.hr-form input[type="number"],.hr-form select,.hr-form textarea{
  width:100%; font-family:var(--hr-font-body); font-size:18px; color:var(--hr-ink);
  background:var(--hr-white); border:2px solid var(--hr-rule); border-radius:0;
  padding:14px 16px; transition:border-color var(--hr-dur) var(--hr-ease);
}
.hr-form input:hover,.hr-form select:hover,.hr-form textarea:hover{ border-color:var(--hr-ink-50); }
.hr-form input:focus,.hr-form select:focus,.hr-form textarea:focus{
  border-color:var(--hr-blue); outline:0; box-shadow:0 0 0 3px rgba(0,98,240,.18);
}
.hr-form .gfield_description,.hr-form .hr-form__hint{ font-size:14px; color:var(--hr-ink-50); margin-top:6px; }
.hr-form .gfield_error input,.hr-form .hr-form__field--error input{ border-color:var(--hr-coral); }
.hr-form .validation_message,.hr-form .hr-form__error{ font-size:14px; font-weight:600; color:#C7310F; margin-top:6px; }
.hr-form .gform_button,.hr-form button[type="submit"]{
  font-family:var(--hr-font-display); font-weight:700; font-size:21px; line-height:1;
  background:var(--hr-blue); color:var(--hr-white);
  border:0; border-radius:var(--hr-pill); padding:20px 34px; cursor:pointer;
  transition:background-color var(--hr-dur) var(--hr-ease);
}
.hr-form .gform_button:hover,.hr-form button[type="submit"]:hover{ background:var(--hr-blue-dark); }
.hr-form .gform_fields{ display:grid; gap:var(--hr-s5); }

/* Gravity Forms "Orbital" theme (v3+) styles its own button through CSS
   custom properties rather than plain declarations, and Orbital also
   auto-generates a per-form, ID-scoped inline <style> block from whatever
   Base Color the form editor's Appearance tab has set — that block beats
   a class selector on padding-x and font-size specifically (confirmed
   live against form ID 1 on hellorefi.wpengine.com, 28 Sep 2026), so
   those two need !important; every other property here wins on
   specificity alone. Scoped to .hr-form so it can never reach a Gravity
   Forms instance outside our own markup. This is additive to the
   .gform_button rule above, which still covers non-Orbital GF themes. */
.hr-form .gform-theme{
  --gf-ctrl-btn-bg-color-primary:var(--hr-blue);
  --gf-ctrl-btn-color-primary:var(--hr-white);
  --gf-ctrl-btn-radius:var(--hr-pill);
  --gf-ctrl-btn-font-family:var(--hr-font-display);
  --gf-ctrl-btn-font-weight:700;
  --gf-ctrl-btn-padding-y:20px;
  --gf-ctrl-btn-padding-x:34px !important;
  --gf-ctrl-btn-font-size:21px !important;
}
.hr-form .gform-theme .gform_button:hover{ background-color:var(--hr-blue-dark) !important; }
/* Form sitting on a flood: put it in a white card first */
.hr-form--card{ background:var(--hr-white); padding:var(--hr-s8); }

/* ---------- 12. MOTION ---------- */
/* Restraint is the brand. Hover only, 180ms, no scroll animation,
   no parallax, no reveal-on-scroll. */
.hr-hover-lift{ transition:transform var(--hr-dur) var(--hr-ease); }
.hr-hover-lift:hover{ transform:translateY(-2px); }
@media (prefers-reduced-motion:reduce){
  .hr-page *,.hr-page *::before,.hr-page *::after{
    transition-duration:.01ms !important; animation-duration:.01ms !important;
  }
}

/* ---------- 13. UTILITIES ---------- */
.hr-max-40{ max-width:40ch; } .hr-max-56{ max-width:56ch; } .hr-max-68{ max-width:68ch; }
.hr-center{ text-align:center; margin-inline:auto; }
.hr-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hr-flex-between{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--hr-s8); flex-wrap:wrap; }


/* ============================================================
   v1.1 — patterns added for the homepage build, 2026-09-23.
   Token layer above is unchanged. Append-only.
   ============================================================ */

/* Trust bar — dotted row of reassurances under a hero CTA */
.hr-trust{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; }
.hr-trust > span{ font-size:16px; font-weight:600; color:var(--hr-ink); }
.hr-trust__dot{ color:#C9BEB6; }

/* Stat row — numeral over label. Plain navy numerals on light grounds;
   the blend treatment stays navy-only. */
/* Grid, not flex: equal tracks keep every stat on one row regardless of how
   long a caption is. Count-agnostic — 2, 3 or 4 stats all behave. */
.hr-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--hr-s6) var(--hr-s7); }
.hr-stat{ display:flex; flex-direction:column; gap:2px; }
.hr-stat__num--sm{ font-size:clamp(36px,3.4vw,56px); }
.hr-stat__cap{ font-size:17px; line-height:1.4; font-weight:500; color:var(--hr-ink-65); }
.hr-section--blue .hr-stat__cap,.hr-section--navy .hr-stat__cap{ color:var(--hr-white); }
.hr-section--coral .hr-stat__cap,.hr-section--yellow .hr-stat__cap{ color:var(--hr-ink); }
@media (max-width:767px){ .hr-stats{ grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:var(--hr-s5) var(--hr-s6); } }

/* Vertical numbered steps — use when there are more than three */
.hr-steps{ display:flex; flex-direction:column; gap:var(--hr-s4); }
/* Five-across process row. Cards size to the tallest card's content —
   never set a min-height here or they fill with empty white. */
.hr-steps--row{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--hr-s5); align-items:stretch; }
.hr-step.hr-step--col{ display:flex; flex-direction:column; gap:var(--hr-s3); padding:28px 24px; }
.hr-step.hr-step--col .hr-step__n{ align-self:flex-start; margin-bottom:var(--hr-s2); }
@media (max-width:1180px){ .hr-steps--row{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:767px){ .hr-steps--row{ grid-template-columns:minmax(0,1fr); gap:var(--hr-s4); } }
.hr-step{
  background:var(--hr-white); color:var(--hr-ink);
  padding:28px 32px; border-radius:var(--hr-radius);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--hr-s6); align-items:start;
}
.hr-step__n{
  background:var(--hr-yellow); color:var(--hr-ink);
  font-family:var(--hr-font-display); font-weight:800; font-size:22px; line-height:1;
  padding:12px 16px; border-radius:0;
  justify-self:start; align-self:start;   /* never stretch, in grid or flex */
}
.hr-step__body{ display:flex; flex-direction:column; gap:6px; }
@media (max-width:767px){ .hr-step{ padding:24px; gap:var(--hr-s5); } }

/* Panel — a card at section scale (the rates block) */
.hr-panel{ padding:64px 56px; }
.hr-panel__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--hr-s10); align-items:start; }
@media (max-width:1024px){ .hr-panel__grid{ grid-template-columns:minmax(0,1fr); gap:var(--hr-s8); } }
@media (max-width:1024px){ .hr-panel{ padding:48px 36px; } }
@media (max-width:767px){ .hr-panel{ padding:36px 24px; } }
.hr-stat__label{ font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--hr-ink); }
.hr-section--navy .hr-stat__label,.hr-card--navy .hr-stat__label{ color:var(--hr-white); }
.hr-flag{ font-size:15px; font-weight:700; letter-spacing:.04em; color:#C7310F; }
.hr-card--navy .hr-flag,.hr-section--navy .hr-flag{ color:var(--hr-yellow); }

/* Ruled list — qualification criteria, eligibility */
.hr-list{ list-style:none; margin:0; padding:0; }
.hr-list li{ padding:16px 0; border-bottom:1px solid var(--hr-rule); font-size:18px; line-height:1.5; }
.hr-list li:last-child{ border-bottom:0; }
.hr-card--navy .hr-list li,.hr-section--navy .hr-list li{ border-bottom-color:rgba(255,255,255,.22); color:var(--hr-white); }

/* Ruled list with a numbered marker */
.hr-list--numbered li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:baseline; padding:20px 0; border-top:1px solid var(--hr-rule); border-bottom:0; }
.hr-list--numbered li:last-child{ border-bottom:1px solid var(--hr-rule); }
/* Ordinals are content, so they take ink — coral fails 4.5:1 on shell. */
.hr-list__n{ font-family:var(--hr-font-display); font-weight:800; font-size:17px; color:var(--hr-ink); }
.hr-list__lead{ font-weight:700; color:var(--hr-ink); }
.hr-list__rest{ color:var(--hr-ink-65); }

/* Square-bullet checklist */
.hr-check{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.hr-check li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; font-size:18px; line-height:1.5; color:var(--hr-ink); }
.hr-check li::before{ content:""; width:10px; height:10px; background:var(--hr-coral); margin-top:8px; }

/* Media card — window-cropped image above copy */
.hr-media-card{ background:var(--hr-white); display:flex; flex-direction:column; border-radius:var(--hr-radius); height:100%; }
.hr-media-card__img{ clip-path:var(--hr-window); overflow:hidden; height:200px; }
.hr-media-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hr-media-card__img.hr-focus-l img{ object-position:25% center; }
.hr-media-card__img.hr-focus-cl img{ object-position:38% center; }
.hr-media-card__img.hr-focus-cr img{ object-position:62% center; }
.hr-media-card__img.hr-focus-r img{ object-position:75% center; }
.hr-media-card__img.hr-focus-bl img{ object-position:35% 72%; }
.hr-media-card__img.hr-focus-bl2 img{ object-position:35% 88%; }
.hr-focus-bl2 img{ object-position:35% 88%; }  /* harder upward shift */
.hr-focus-tl img{ object-position:35% 28%; }
.hr-focus-tr img{ object-position:64% 28%; }
.hr-media-card__img.hr-zoom-110 img{ transform:scale(1.10); }
.hr-media-card__img.hr-zoom-115 img{ transform:scale(1.15); }
.hr-media-card__img.hr-zoom-125 img{ transform:scale(1.25); }
/* Mirror. Combine with a zoom via the paired classes. */
.hr-flip-x img{ transform:scaleX(-1); }
.hr-flip-x.hr-zoom-110 img{ transform:scaleX(-1) scale(1.10); }
.hr-flip-x.hr-zoom-115 img{ transform:scaleX(-1) scale(1.15); }
.hr-flip-x.hr-zoom-125 img{ transform:scaleX(-1) scale(1.25); }
.hr-media-card__img.hr-flip-x img{ transform:scaleX(-1); }
.hr-media-card__img.hr-flip-x.hr-zoom-115 img{ transform:scaleX(-1) scale(1.15); }
.hr-media-card__body{ padding:24px 28px 32px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; }

/* Sticky column — releases when the layout stacks */
.hr-sticky{ position:sticky; top:120px; }
@media (max-width:1024px){ .hr-sticky{ position:static; } }

/* Footnote row under a flood section */
.hr-footnotes{ margin-top:48px; padding-top:28px; border-top:1px solid var(--hr-rule); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.hr-section--blue .hr-footnotes,.hr-section--navy .hr-footnotes{ border-top-color:rgba(255,255,255,.28); }
@media (max-width:1024px){ .hr-footnotes{ grid-template-columns:minmax(0,1fr); } }

/* Nav burger — hidden above 1024. Rebuilt 1 Oct 2026 from a <button>
   with a JS click handler into a <label> wrapping a checkbox
   (#hr-nav-toggle) — see header.html's own note for why. The checkbox
   is invisible but covers the label's full box and sits on top of it,
   so every click/tap goes straight to a native checkbox, not through
   any custom event handler. */
.hr-nav__burger{ display:none; position:relative; width:48px; height:48px; background:none; border:0; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
/* Hello Elementor's own reset.css sets button:hover/button:focus to a
   raspberry background (#c36) site-wide, for every plain <button> — the
   burger is a <button type="button"> with no other hover/focus rule of
   its own, so that theme default was the one showing through. Equal
   specificity to the theme's rule, but this loads later in the
   cascade, so it wins without needing !important. Confirmed live via
   focus state on hellorefi.wpengine.com, 28 Sep 2026. Kept here even
   after the button→label rebuild in case Elementor's reset also
   targets labels or inputs the same way. */
.hr-nav__burger:hover,.hr-nav__burger:focus{ background:none; }
.hr-nav__burger span{ display:block; width:24px; height:2px; background:var(--hr-ink); }
.hr-nav__toggle-input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
@media (max-width:1024px){ .hr-nav__burger{ display:flex; } }

/* CTA band — headline left, pill right, stacks at tablet.
   Use this for every closing CTA. Do not hand-roll a centred one. */
.hr-cta-band{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--hr-s8) var(--hr-col-gap); align-items:center;
}
.hr-cta-band__copy{ grid-column:auto / span 7; display:flex; flex-direction:column; gap:var(--hr-s3); }
.hr-cta-band .hr-btn{ grid-column:auto / span 5; justify-self:end; align-self:center; }
@media (max-width:1024px){
  .hr-cta-band{ grid-template-columns:minmax(0,1fr); gap:var(--hr-s6); }
  .hr-cta-band__copy,.hr-cta-band .hr-btn{ grid-column:auto; }
  .hr-cta-band .hr-btn{ justify-self:start; }
}

/* Footer grid */
.hr-footer__grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:56px; }
@media (max-width:1024px){ .hr-footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; } }
@media (max-width:767px){ .hr-footer__grid{ grid-template-columns:minmax(0,1fr); gap:32px; } }
/* Light footer — white ground, so every reversed color has to flip back. */
.hr-footer--light{ background:var(--hr-white); color:var(--hr-ink-65); }
.hr-footer--light .hr-footer__head{ color:var(--hr-ink); }
.hr-footer--light .hr-footer__legal{ color:var(--hr-ink-65); }
.hr-footer--light a:not(.hr-btn){ color:var(--hr-ink); }
.hr-footer--light a:not(.hr-btn):hover,
.hr-footer--light a.hr-nav__phone:hover,
.hr-footer--light a.hr-nav__phone:hover span{ color:var(--hr-blue); }
.hr-footer--light span{ color:var(--hr-ink); }
.hr-footer--light .hr-footer__legal,.hr-footer--light .hr-footer__legal span{ color:var(--hr-ink-65); }
.hr-footer--light [style*="border-top"],.hr-footer--light .hr-rule{ border-top-color:var(--hr-rule) !important; }

.hr-social{ display:grid; grid-template-columns:repeat(3, 44px); gap:var(--hr-s4); }
.hr-social a{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:var(--hr-white); }
.hr-social a:hover{ background:var(--hr-blue); }
.hr-social a:hover .hr-icon{ color:var(--hr-white); }
/* Brand marks are filled, not stroked — override the line-icon paint. */
.hr-social .hr-icon{ width:18px; height:18px; color:var(--hr-ink); fill:currentColor; stroke:none; }
.hr-footer--light .hr-social a{ background:var(--hr-shell); }
.hr-footer--light .hr-social a:hover{ background:var(--hr-blue); }
.hr-footer--light .hr-social a:hover .hr-icon{ color:var(--hr-white); }
.hr-footer:not(.hr-footer--light) .hr-social a{ background:rgba(255,255,255,.1); }
.hr-footer:not(.hr-footer--light) .hr-social .hr-icon{ color:var(--hr-white); }

/* TEMPORARY — social icons hidden for launch, per user 30 Sep 2026;
   planned follow-up to bring them back by end of week. Hides the whole
   footer column (heading + icon row), not just .hr-social itself —
   .hr-social alone would leave the "Connect with us on social" heading
   orphaned with nothing under it. :has() targets only the column that
   contains .hr-social, so the "Navigate" column (same hr-c3 hr-ct4
   classes) is untouched. Remove this rule (and this comment) to
   restore — no markup changes needed anywhere, nothing else to revert. */
.hr-footer__col:has(.hr-social){ display:none; }

.hr-footer__links{ display:flex; flex-wrap:wrap; gap:10px 24px; }
.hr-footer__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 32px; }

/* Hero split keeps a soft cap so the copy column is never starved */
.hr-split--hero{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,560px); gap:var(--hr-s9); align-items:center; }
@media (max-width:1024px){ .hr-split--hero{ grid-template-columns:minmax(0,1fr); } }


/* ------------------------------------------------------------
   Ink scoping for white-ground patterns sitting on a flood.
   A flood section reverses type to white for its OWN children;
   any white or shell card inside it must re-ink its contents or
   it renders white-on-white. Every white-ground pattern must be
   listed here. If you add one in a future version, add it here
   in the same commit.
   ------------------------------------------------------------ */
.hr-section--blue .hr-card,.hr-section--navy .hr-card,
.hr-section--blue .hr-step,.hr-section--navy .hr-step,
.hr-section--blue .hr-media-card,.hr-section--navy .hr-media-card,
.hr-section--coral .hr-card,.hr-section--coral .hr-step,.hr-section--coral .hr-media-card,
.hr-section--yellow .hr-card,.hr-section--yellow .hr-step,.hr-section--yellow .hr-media-card{
  color:var(--hr-ink);
}
.hr-section--blue .hr-step .hr-h1,.hr-section--blue .hr-step .hr-h2,.hr-section--blue .hr-step .hr-h3,.hr-section--blue .hr-step .hr-h4,
.hr-section--navy .hr-step .hr-h1,.hr-section--navy .hr-step .hr-h2,.hr-section--navy .hr-step .hr-h3,.hr-section--navy .hr-step .hr-h4,
.hr-section--blue .hr-media-card .hr-h1,.hr-section--blue .hr-media-card .hr-h2,.hr-section--blue .hr-media-card .hr-h3,.hr-section--blue .hr-media-card .hr-h4,
.hr-section--navy .hr-media-card .hr-h1,.hr-section--navy .hr-media-card .hr-h2,.hr-section--navy .hr-media-card .hr-h3,.hr-section--navy .hr-media-card .hr-h4,
.hr-section--blue .hr-card .hr-h1,.hr-section--blue .hr-card .hr-h2,.hr-section--blue .hr-card .hr-h3,.hr-section--blue .hr-card .hr-h4,
.hr-section--navy .hr-card .hr-h1,.hr-section--navy .hr-card .hr-h2,.hr-section--navy .hr-card .hr-h3,.hr-section--navy .hr-card .hr-h4{
  color:var(--hr-ink);
}
.hr-section--blue .hr-step .hr-body,.hr-section--navy .hr-step .hr-body,
.hr-section--blue .hr-media-card .hr-body,.hr-section--navy .hr-media-card .hr-body,
.hr-section--blue .hr-card .hr-body,.hr-section--navy .hr-card .hr-body{
  color:var(--hr-ink-65);
}
.hr-section--blue .hr-step .hr-lede,.hr-section--navy .hr-step .hr-lede,
.hr-section--blue .hr-media-card .hr-lede,.hr-section--navy .hr-media-card .hr-lede,
.hr-section--blue .hr-card .hr-lede,.hr-section--navy .hr-card .hr-lede{
  color:var(--hr-ink-80);
}
.hr-section--blue .hr-step .hr-small,.hr-section--blue .hr-step .hr-fine,
.hr-section--navy .hr-step .hr-small,.hr-section--navy .hr-step .hr-fine,
.hr-section--blue .hr-media-card .hr-small,.hr-section--blue .hr-media-card .hr-fine,
.hr-section--navy .hr-media-card .hr-small,.hr-section--navy .hr-media-card .hr-fine,
.hr-section--blue .hr-card .hr-small,.hr-section--blue .hr-card .hr-fine,
.hr-section--navy .hr-card .hr-small,.hr-section--navy .hr-card .hr-fine{
  color:var(--hr-ink-50);
}
.hr-section--blue .hr-step .hr-eyebrow,.hr-section--navy .hr-step .hr-eyebrow,
.hr-section--blue .hr-card .hr-eyebrow,.hr-section--navy .hr-card .hr-eyebrow{
  color:var(--hr-ink);
}
.hr-section--blue .hr-step a:not(.hr-btn),.hr-section--navy .hr-step a:not(.hr-btn),
.hr-section--blue .hr-card a:not(.hr-btn),.hr-section--navy .hr-card a:not(.hr-btn),
.hr-section--blue .hr-media-card a:not(.hr-btn),.hr-section--navy .hr-media-card a:not(.hr-btn){
  color:var(--hr-blue);
}
.hr-section--blue .hr-step .hr-list li,.hr-section--navy .hr-step .hr-list li,
.hr-section--blue .hr-card .hr-list li,.hr-section--navy .hr-card .hr-list li{
  color:var(--hr-ink); border-bottom-color:var(--hr-rule);
}


/* ============================================================
   v1.2 — 12-column grid, 2026-09-23.
   One grid for every page. Desktop 12 columns, tablet 8, mobile 4.
   Content width at 1440 is 1360px: 12 columns of 91.33px + 11 gutters of 24px.
   Put .hr-grid-12 on the row, .hr-cN on each child (N = desktop span).
   Tablet span defaults to full width; set .hr-ctN to override.
   Mobile is always full width.
   ============================================================ */
:root{ --hr-col-gap:24px; }
@media (max-width:1024px){ :root{ --hr-col-gap:20px; } }
@media (max-width:767px){ :root{ --hr-col-gap:16px; } }

.hr-grid-12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--hr-s9) var(--hr-col-gap);
  align-items:start;
}
.hr-grid-12--center{ align-items:center; }
.hr-grid-12--stretch{ align-items:stretch; }  /* equal-height cards in a row */
.hr-grid-12--end{ align-items:end; }
.hr-grid-12--tight{ gap:var(--hr-s6) var(--hr-col-gap); }
.hr-c1{ grid-column:auto / span 1; }
.hr-c2{ grid-column:auto / span 2; }
.hr-c3{ grid-column:auto / span 3; }
.hr-c4{ grid-column:auto / span 4; }
.hr-c5{ grid-column:auto / span 5; }
.hr-c6{ grid-column:auto / span 6; }
.hr-c7{ grid-column:auto / span 7; }
.hr-c8{ grid-column:auto / span 8; }
.hr-c9{ grid-column:auto / span 9; }
.hr-c10{ grid-column:auto / span 10; }
.hr-c11{ grid-column:auto / span 11; }
.hr-c12{ grid-column:auto / span 12; }
/* Column offsets. NEVER set grid-column-start inline — an inline value
   outranks the breakpoint resets below and grid invents implicit tracks. */
.hr-off1{ grid-column-start:2; }
.hr-off2{ grid-column-start:2; }
.hr-off3{ grid-column-start:3; }
.hr-off4{ grid-column-start:4; }
.hr-off5{ grid-column-start:5; }
.hr-off6{ grid-column-start:6; }
.hr-off7{ grid-column-start:7; }
.hr-off8{ grid-column-start:8; }
.hr-off9{ grid-column-start:9; }
.hr-off10{ grid-column-start:10; }
.hr-off11{ grid-column-start:11; }
.hr-off12{ grid-column-start:12; }

@media (max-width:1024px){
  .hr-grid-12{ grid-template-columns:repeat(8,minmax(0,1fr)); gap:var(--hr-s8) var(--hr-col-gap); }
  /* Offsets reset FIRST — grid-column:span writes grid-column-start, so a
     later start:auto longhand would wipe the span out. */
  .hr-off1,.hr-off2,.hr-off3,.hr-off4,.hr-off5,.hr-off6,
  .hr-off7,.hr-off8,.hr-off9,.hr-off10,.hr-off11,.hr-off12{ grid-column-start:auto; }
  .hr-c1,.hr-c2,.hr-c3,.hr-c4,.hr-c5,.hr-c6,.hr-c7,.hr-c8,.hr-c9,.hr-c10,.hr-c11,.hr-c12{ grid-column:auto / span 8; }
  .hr-ct1{ grid-column:auto / span 1; } .hr-ct2{ grid-column:auto / span 2; }
  .hr-ct3{ grid-column:auto / span 3; } .hr-ct4{ grid-column:auto / span 4; }
  .hr-ct5{ grid-column:auto / span 5; } .hr-ct6{ grid-column:auto / span 6; }
  .hr-ct7{ grid-column:auto / span 7; } .hr-ct8{ grid-column:auto / span 8; }
}
@media (max-width:767px){
  .hr-grid-12{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--hr-s6) var(--hr-col-gap); }
  .hr-off1,.hr-off2,.hr-off3,.hr-off4,.hr-off5,.hr-off6,
  .hr-off7,.hr-off8,.hr-off9,.hr-off10,.hr-off11,.hr-off12{ grid-column-start:auto; }
  .hr-c1,.hr-c2,.hr-c3,.hr-c4,.hr-c5,.hr-c6,.hr-c7,.hr-c8,.hr-c9,.hr-c10,.hr-c11,.hr-c12{ grid-column:auto / span 4; }
    .hr-ct1,.hr-ct2,.hr-ct3,.hr-ct4,.hr-ct5,.hr-ct6,.hr-ct7,.hr-ct8{ grid-column:auto / span 4; }
}

/* The five-step process rail is a deliberate off-grid exception: five equal
   tracks spanning all 12 columns. Its outer edges align; its interior does not.
   This is the only exception in the system. */


/* ============================================================
   v1.3 — spacing utilities, 2026-09-23.
   For per-element tinkering ONLY. Every value comes from the
   4px scale (--hr-s1…12 = 4 8 12 16 20 24 32 40 56 80 112 160).
   Rules: never type a raw px value in a page; never use these to
   rebuild a layout the grid already handles; never put one on a
   .hr-container or .hr-section (those own the gutter and rhythm).
   Suffix -0 zeroes the property.
   ============================================================ */
.hr-pt-1{ padding-top:var(--hr-s1); }
.hr-pt-2{ padding-top:var(--hr-s2); }
.hr-pt-3{ padding-top:var(--hr-s3); }
.hr-pt-4{ padding-top:var(--hr-s4); }
.hr-pt-5{ padding-top:var(--hr-s5); }
.hr-pt-6{ padding-top:var(--hr-s6); }
.hr-pt-7{ padding-top:var(--hr-s7); }
.hr-pt-8{ padding-top:var(--hr-s8); }
.hr-pt-9{ padding-top:var(--hr-s9); }
.hr-pt-10{ padding-top:var(--hr-s10); }
.hr-pt-11{ padding-top:var(--hr-s11); }
.hr-pt-12{ padding-top:var(--hr-s12); }
.hr-pt-0{ padding-top:0; }
.hr-pb-1{ padding-bottom:var(--hr-s1); }
.hr-pb-2{ padding-bottom:var(--hr-s2); }
.hr-pb-3{ padding-bottom:var(--hr-s3); }
.hr-pb-4{ padding-bottom:var(--hr-s4); }
.hr-pb-5{ padding-bottom:var(--hr-s5); }
.hr-pb-6{ padding-bottom:var(--hr-s6); }
.hr-pb-7{ padding-bottom:var(--hr-s7); }
.hr-pb-8{ padding-bottom:var(--hr-s8); }
.hr-pb-9{ padding-bottom:var(--hr-s9); }
.hr-pb-10{ padding-bottom:var(--hr-s10); }
.hr-pb-11{ padding-bottom:var(--hr-s11); }
.hr-pb-12{ padding-bottom:var(--hr-s12); }
.hr-pb-0{ padding-bottom:0; }
.hr-py-1{ padding-block:var(--hr-s1); }
.hr-py-2{ padding-block:var(--hr-s2); }
.hr-py-3{ padding-block:var(--hr-s3); }
.hr-py-4{ padding-block:var(--hr-s4); }
.hr-py-5{ padding-block:var(--hr-s5); }
.hr-py-6{ padding-block:var(--hr-s6); }
.hr-py-7{ padding-block:var(--hr-s7); }
.hr-py-8{ padding-block:var(--hr-s8); }
.hr-py-9{ padding-block:var(--hr-s9); }
.hr-py-10{ padding-block:var(--hr-s10); }
.hr-py-11{ padding-block:var(--hr-s11); }
.hr-py-12{ padding-block:var(--hr-s12); }
.hr-px-1{ padding-inline:var(--hr-s1); }
.hr-px-2{ padding-inline:var(--hr-s2); }
.hr-px-3{ padding-inline:var(--hr-s3); }
.hr-px-4{ padding-inline:var(--hr-s4); }
.hr-px-5{ padding-inline:var(--hr-s5); }
.hr-px-6{ padding-inline:var(--hr-s6); }
.hr-px-7{ padding-inline:var(--hr-s7); }
.hr-px-8{ padding-inline:var(--hr-s8); }
.hr-px-9{ padding-inline:var(--hr-s9); }
.hr-px-10{ padding-inline:var(--hr-s10); }
.hr-px-11{ padding-inline:var(--hr-s11); }
.hr-px-12{ padding-inline:var(--hr-s12); }
.hr-mt-1{ margin-top:var(--hr-s1); }
.hr-mt-2{ margin-top:var(--hr-s2); }
.hr-mt-3{ margin-top:var(--hr-s3); }
.hr-mt-4{ margin-top:var(--hr-s4); }
.hr-mt-5{ margin-top:var(--hr-s5); }
.hr-mt-6{ margin-top:var(--hr-s6); }
.hr-mt-7{ margin-top:var(--hr-s7); }
.hr-mt-8{ margin-top:var(--hr-s8); }
.hr-mt-9{ margin-top:var(--hr-s9); }
.hr-mt-10{ margin-top:var(--hr-s10); }
.hr-mt-11{ margin-top:var(--hr-s11); }
.hr-mt-12{ margin-top:var(--hr-s12); }
.hr-mt-0{ margin-top:0; }
.hr-mb-1{ margin-bottom:var(--hr-s1); }
.hr-mb-2{ margin-bottom:var(--hr-s2); }
.hr-mb-3{ margin-bottom:var(--hr-s3); }
.hr-mb-4{ margin-bottom:var(--hr-s4); }
.hr-mb-5{ margin-bottom:var(--hr-s5); }
.hr-mb-6{ margin-bottom:var(--hr-s6); }
.hr-mb-7{ margin-bottom:var(--hr-s7); }
.hr-mb-8{ margin-bottom:var(--hr-s8); }
.hr-mb-9{ margin-bottom:var(--hr-s9); }
.hr-mb-10{ margin-bottom:var(--hr-s10); }
.hr-mb-11{ margin-bottom:var(--hr-s11); }
.hr-mb-12{ margin-bottom:var(--hr-s12); }
.hr-mb-0{ margin-bottom:0; }
.hr-gap-1{ gap:var(--hr-s1); }
.hr-gap-2{ gap:var(--hr-s2); }
.hr-gap-3{ gap:var(--hr-s3); }
.hr-gap-4{ gap:var(--hr-s4); }
.hr-gap-5{ gap:var(--hr-s5); }
.hr-gap-6{ gap:var(--hr-s6); }
.hr-gap-7{ gap:var(--hr-s7); }
.hr-gap-8{ gap:var(--hr-s8); }
.hr-gap-9{ gap:var(--hr-s9); }
.hr-gap-10{ gap:var(--hr-s10); }
.hr-gap-11{ gap:var(--hr-s11); }
.hr-gap-12{ gap:var(--hr-s12); }
.hr-gap-y-1{ row-gap:var(--hr-s1); }
.hr-gap-y-2{ row-gap:var(--hr-s2); }
.hr-gap-y-3{ row-gap:var(--hr-s3); }
.hr-gap-y-4{ row-gap:var(--hr-s4); }
.hr-gap-y-5{ row-gap:var(--hr-s5); }
.hr-gap-y-6{ row-gap:var(--hr-s6); }
.hr-gap-y-7{ row-gap:var(--hr-s7); }
.hr-gap-y-8{ row-gap:var(--hr-s8); }
.hr-gap-y-9{ row-gap:var(--hr-s9); }
.hr-gap-y-10{ row-gap:var(--hr-s10); }
.hr-gap-y-11{ row-gap:var(--hr-s11); }
.hr-gap-y-12{ row-gap:var(--hr-s12); }

/* Tablet and mobile overrides, for the cases where desktop spacing
   is too generous once a row stacks. */
@media (max-width:1024px){
  .hr-t-pt-1{ padding-top:var(--hr-s1); } .hr-t-pb-1{ padding-bottom:var(--hr-s1); } .hr-t-mt-1{ margin-top:var(--hr-s1); } .hr-t-gap-1{ gap:var(--hr-s1); }
  .hr-t-pt-2{ padding-top:var(--hr-s2); } .hr-t-pb-2{ padding-bottom:var(--hr-s2); } .hr-t-mt-2{ margin-top:var(--hr-s2); } .hr-t-gap-2{ gap:var(--hr-s2); }
  .hr-t-pt-3{ padding-top:var(--hr-s3); } .hr-t-pb-3{ padding-bottom:var(--hr-s3); } .hr-t-mt-3{ margin-top:var(--hr-s3); } .hr-t-gap-3{ gap:var(--hr-s3); }
  .hr-t-pt-4{ padding-top:var(--hr-s4); } .hr-t-pb-4{ padding-bottom:var(--hr-s4); } .hr-t-mt-4{ margin-top:var(--hr-s4); } .hr-t-gap-4{ gap:var(--hr-s4); }
  .hr-t-pt-5{ padding-top:var(--hr-s5); } .hr-t-pb-5{ padding-bottom:var(--hr-s5); } .hr-t-mt-5{ margin-top:var(--hr-s5); } .hr-t-gap-5{ gap:var(--hr-s5); }
  .hr-t-pt-6{ padding-top:var(--hr-s6); } .hr-t-pb-6{ padding-bottom:var(--hr-s6); } .hr-t-mt-6{ margin-top:var(--hr-s6); } .hr-t-gap-6{ gap:var(--hr-s6); }
  .hr-t-pt-7{ padding-top:var(--hr-s7); } .hr-t-pb-7{ padding-bottom:var(--hr-s7); } .hr-t-mt-7{ margin-top:var(--hr-s7); } .hr-t-gap-7{ gap:var(--hr-s7); }
  .hr-t-pt-8{ padding-top:var(--hr-s8); } .hr-t-pb-8{ padding-bottom:var(--hr-s8); } .hr-t-mt-8{ margin-top:var(--hr-s8); } .hr-t-gap-8{ gap:var(--hr-s8); }
  .hr-t-pt-9{ padding-top:var(--hr-s9); } .hr-t-pb-9{ padding-bottom:var(--hr-s9); } .hr-t-mt-9{ margin-top:var(--hr-s9); } .hr-t-gap-9{ gap:var(--hr-s9); }
  .hr-t-pt-10{ padding-top:var(--hr-s10); } .hr-t-pb-10{ padding-bottom:var(--hr-s10); } .hr-t-mt-10{ margin-top:var(--hr-s10); } .hr-t-gap-10{ gap:var(--hr-s10); }
  .hr-t-pt-11{ padding-top:var(--hr-s11); } .hr-t-pb-11{ padding-bottom:var(--hr-s11); } .hr-t-mt-11{ margin-top:var(--hr-s11); } .hr-t-gap-11{ gap:var(--hr-s11); }
  .hr-t-pt-12{ padding-top:var(--hr-s12); } .hr-t-pb-12{ padding-bottom:var(--hr-s12); } .hr-t-mt-12{ margin-top:var(--hr-s12); } .hr-t-gap-12{ gap:var(--hr-s12); }
  .hr-t-pt-0{ padding-top:0; } .hr-t-pb-0{ padding-bottom:0; } .hr-t-mt-0{ margin-top:0; }
}
@media (max-width:767px){
  .hr-m-pt-1{ padding-top:var(--hr-s1); } .hr-m-pb-1{ padding-bottom:var(--hr-s1); } .hr-m-mt-1{ margin-top:var(--hr-s1); } .hr-m-gap-1{ gap:var(--hr-s1); }
  .hr-m-pt-2{ padding-top:var(--hr-s2); } .hr-m-pb-2{ padding-bottom:var(--hr-s2); } .hr-m-mt-2{ margin-top:var(--hr-s2); } .hr-m-gap-2{ gap:var(--hr-s2); }
  .hr-m-pt-3{ padding-top:var(--hr-s3); } .hr-m-pb-3{ padding-bottom:var(--hr-s3); } .hr-m-mt-3{ margin-top:var(--hr-s3); } .hr-m-gap-3{ gap:var(--hr-s3); }
  .hr-m-pt-4{ padding-top:var(--hr-s4); } .hr-m-pb-4{ padding-bottom:var(--hr-s4); } .hr-m-mt-4{ margin-top:var(--hr-s4); } .hr-m-gap-4{ gap:var(--hr-s4); }
  .hr-m-pt-5{ padding-top:var(--hr-s5); } .hr-m-pb-5{ padding-bottom:var(--hr-s5); } .hr-m-mt-5{ margin-top:var(--hr-s5); } .hr-m-gap-5{ gap:var(--hr-s5); }
  .hr-m-pt-6{ padding-top:var(--hr-s6); } .hr-m-pb-6{ padding-bottom:var(--hr-s6); } .hr-m-mt-6{ margin-top:var(--hr-s6); } .hr-m-gap-6{ gap:var(--hr-s6); }
  .hr-m-pt-7{ padding-top:var(--hr-s7); } .hr-m-pb-7{ padding-bottom:var(--hr-s7); } .hr-m-mt-7{ margin-top:var(--hr-s7); } .hr-m-gap-7{ gap:var(--hr-s7); }
  .hr-m-pt-8{ padding-top:var(--hr-s8); } .hr-m-pb-8{ padding-bottom:var(--hr-s8); } .hr-m-mt-8{ margin-top:var(--hr-s8); } .hr-m-gap-8{ gap:var(--hr-s8); }
  .hr-m-pt-9{ padding-top:var(--hr-s9); } .hr-m-pb-9{ padding-bottom:var(--hr-s9); } .hr-m-mt-9{ margin-top:var(--hr-s9); } .hr-m-gap-9{ gap:var(--hr-s9); }
  .hr-m-pt-10{ padding-top:var(--hr-s10); } .hr-m-pb-10{ padding-bottom:var(--hr-s10); } .hr-m-mt-10{ margin-top:var(--hr-s10); } .hr-m-gap-10{ gap:var(--hr-s10); }
  .hr-m-pt-11{ padding-top:var(--hr-s11); } .hr-m-pb-11{ padding-bottom:var(--hr-s11); } .hr-m-mt-11{ margin-top:var(--hr-s11); } .hr-m-gap-11{ gap:var(--hr-s11); }
  .hr-m-pt-12{ padding-top:var(--hr-s12); } .hr-m-pb-12{ padding-bottom:var(--hr-s12); } .hr-m-mt-12{ margin-top:var(--hr-s12); } .hr-m-gap-12{ gap:var(--hr-s12); }
  .hr-m-pt-0{ padding-top:0; } .hr-m-pb-0{ padding-bottom:0; } .hr-m-mt-0{ margin-top:0; }
}


/* ============================================================
   Calculator placeholder — a static mock of stage 1 of the
   embedded rate widget, styled to the spec in
   calculator-spec.html. NOT the real form: the live widget
   renders in shadow DOM and is styled by the vendor.
   Replace this block's markup with the embed when it lands.
   ============================================================ */
.hr-calc{ background:var(--hr-white); border:1px solid var(--hr-rule); padding:32px; width:100%; }
@media (max-width:767px){ .hr-calc{ padding:20px; } }
.hr-calc__progress{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:4px; margin-bottom:28px; }
.hr-calc__progress i{ height:6px; background:#EFE8E4; display:block; }
.hr-calc__progress i.on{ background:var(--hr-coral); }
.hr-calc__h{ font-family:var(--hr-font-display); font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1.05; margin:0 0 8px; color:var(--hr-ink); }
.hr-calc__sub{ font-size:17px; line-height:1.5; color:var(--hr-ink-65); margin:0 0 24px; }
.hr-calc__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
@media (max-width:560px){ .hr-calc__grid{ grid-template-columns:minmax(0,1fr); } }
.hr-calc__field{ display:flex; flex-direction:column; gap:6px; }
.hr-calc__field label{ font-size:14px; font-weight:600; color:var(--hr-ink-65); }
.hr-calc__req{ color:var(--hr-error); }
.hr-calc__input{
  font-family:var(--hr-font-body); font-size:19px; font-weight:500; color:var(--hr-ink);
  background:var(--hr-shell); border:0; border-bottom:2px solid #C9BEB6; border-radius:0;
  padding:13px 14px; width:100%; outline:0;
  transition:border-color var(--hr-dur) var(--hr-ease);
}
.hr-calc__input:hover{ border-bottom-color:var(--hr-ink-50); }
.hr-calc__input:focus{ background:var(--hr-white); border-bottom-color:var(--hr-blue); box-shadow:inset 0 0 0 2px var(--hr-blue); }
.hr-calc__slider{ margin:26px 0 0; }
.hr-calc__slider__top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; gap:16px; }
.hr-calc__slider__lab{ font-size:14px; font-weight:600; color:var(--hr-ink-65); }
.hr-calc__slider__val{ font-family:var(--hr-font-display); font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--hr-ink); }
.hr-calc__track{ position:relative; height:6px; background:#EFE8E4; }
.hr-calc__track i{ position:absolute; left:0; top:0; bottom:0; width:79.7%; background:var(--hr-blue); }
.hr-calc__track b{ position:absolute; left:79.7%; top:50%; width:22px; height:22px; background:var(--hr-blue); transform:translate(-50%,-50%); }
.hr-calc__ends{ display:flex; justify-content:space-between; margin-top:10px; font-size:14px; color:var(--hr-ink-50); }
.hr-calc__cta{
  display:block; width:100%; text-align:center; cursor:pointer;
  font-family:var(--hr-font-display); font-weight:700; font-size:21px; line-height:1;
  background:var(--hr-blue); color:var(--hr-white); border:0; border-radius:var(--hr-pill);
  padding:20px 28px; margin-top:28px;
  transition:background-color var(--hr-dur) var(--hr-ease);
}
.hr-calc__cta:hover{ background:var(--hr-blue-dark); }
.hr-calc__trust{ display:flex; align-items:center; gap:8px; justify-content:center; font-size:14px; font-weight:600; color:var(--hr-ink-65); margin:16px 0 0; }
.hr-calc__trust .hr-icon{ width:18px; height:18px; color:var(--hr-ink); }


/* ---------- 13. MOBILE NAV (v1.4) ---------- */
/* The nav burger existed from v1.1 with no behavior wired to it — the
   original spec assumed Elementor's native nav widget would supply the
   open/close JS. Since header/footer ship as static HTML instead, this
   adds the missing mobile menu (markup lives in header.html), a header
   overflow fix at real phone widths (~375px, pill was pushing the
   burger off-screen), and keeping the burger/close control above the
   overlay once open. Pairs with nav.js (site-wide enqueue, same as
   this file). */
@media (max-width:480px){
  .hr-nav .hr-nav__logo{ height:44px; }
}
/* .hr-nav__actions{gap:8px} and .hr-nav__actions .hr-btn{...} used to
   live in this block, sizing down the phone link and "Received a
   mailer?" button at the smallest phone widths — both are display:none
   in .hr-nav__inner by the ≤1024px rule above (which this breakpoint
   nests inside), so those two rules had nothing left to style. Removed
   29 Sep 2026, same change that dropped both elements from the compact
   bar. */

/* Open state keys off the checkbox's own :checked, via :has() on the
   header ancestor — not a JS-toggled class. See header.html/this
   file's burger notes above: this is the part that's now guaranteed to
   work with zero JavaScript involved. */
.hr-nav:has(.hr-nav__toggle-input:checked) .hr-nav__actions{ position:relative; z-index:95; }
.hr-nav__burger span{ transition:transform 180ms cubic-bezier(.2,.7,.3,1), opacity 180ms cubic-bezier(.2,.7,.3,1); }
.hr-nav:has(.hr-nav__toggle-input:checked) .hr-nav__burger span:nth-of-type(1){ transform:translateY(7px) rotate(45deg); }
.hr-nav:has(.hr-nav__toggle-input:checked) .hr-nav__burger span:nth-of-type(2){ opacity:0; }
.hr-nav:has(.hr-nav__toggle-input:checked) .hr-nav__burger span:nth-of-type(3){ transform:translateY(-7px) rotate(-45deg); }

.hr-mobile-menu{
  position:fixed; inset:0; top:0;
  background:var(--hr-white);
  z-index:90;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:144px 40px 40px;
  overflow-y:auto;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 180ms cubic-bezier(.2,.7,.3,1);
}
.hr-nav:has(.hr-nav__toggle-input:checked) ~ .hr-mobile-menu{ opacity:1; visibility:visible; pointer-events:auto; }

.hr-mobile-menu__nav{ display:flex; flex-direction:column; gap:20px; }
a.hr-mobile-menu__link{
  font-family:var(--hr-font-display); font-weight:700; font-size:28px;
  color:var(--hr-ink); text-decoration:none;
}
a.hr-mobile-menu__link:hover{ color:var(--hr-blue); }
.hr-mobile-menu__group{ display:flex; flex-direction:column; gap:16px; }
a.hr-mobile-menu__sublink{
  font-family:var(--hr-font-body); font-weight:500; font-size:18px;
  color:var(--hr-ink-65); text-decoration:none; padding-left:20px;
}
a.hr-mobile-menu__sublink:hover{ color:var(--hr-blue); }
.hr-mobile-menu__footer{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.hr-mobile-menu__footer a.hr-nav__phone span{ display:inline; }
.hr-mobile-menu__footer a.hr-nav__phone{ font-size:18px; }
/* The mobile-width a.hr-nav__phone span{display:none} above (§9) was
   written for the compact header nav bar, where hiding the number text
   and keeping only the icon saves real width. .hr-nav__phone is reused
   on .hr-footer too, where there's no width constraint — the rule was
   stripping the number there too, leaving a lone, unlabeled phone icon.
   Same re-enable pattern as .hr-mobile-menu__footer above. */
.hr-footer a.hr-nav__phone span{ display:inline; }

@media (min-width:1025px){ .hr-mobile-menu{ display:none !important; } }

@media (prefers-reduced-motion:reduce){
  .hr-mobile-menu, .hr-nav__burger span{ transition:none; }
}

body:has(#hr-nav-toggle:checked){ overflow:hidden; }


/* ============================================================
   v1.7 — base-reset scope fix + utility classes, 2026-09-23.
   Append-only. No rule above this line is modified.
   ============================================================ */

/* ---- Base-reset scope ----------------------------------------
   §2 scopes the resets to a .hr-page ancestor. The header, the
   mobile-menu overlay and the footer are SIBLINGS of .hr-page,
   so they never received them: .hr-container stayed content-box
   and rendered 64px wider than the viewport (width:100% plus two
   gutters), giving the whole document a horizontal scroll and
   pushing the burger off-screen. These rules name every block
   root so each fragment is correct standalone. */
.hr-nav,.hr-nav *,.hr-nav *::before,.hr-nav *::after,
.hr-mobile-menu,.hr-mobile-menu *,.hr-mobile-menu *::before,.hr-mobile-menu *::after,
.hr-footer,.hr-footer *,.hr-footer *::before,.hr-footer *::after{ box-sizing:border-box; }
.hr-nav img,.hr-mobile-menu img,.hr-footer img{ display:block; max-width:100%; }
.hr-nav a,.hr-mobile-menu a,.hr-footer a{ text-decoration:none; }
.hr-nav :focus-visible,.hr-mobile-menu :focus-visible,.hr-footer :focus-visible{
  outline:3px solid var(--hr-focus); outline-offset:3px;
}

/* ---- Mobile menu: keep the logo above the overlay ----
   .hr-mobile-menu is a CHILD of <header>, so header, overlay and
   actions all stack in one context. v1.4 lifted .hr-nav__actions
   to z-index 95 but not the logo, so the overlay (90) painted over
   it and the mark vanished the moment the menu opened. */
.hr-nav:has(.hr-nav__toggle-input:checked) .hr-nav__inner > a{ position:relative; z-index:95; }

/* ---- Arrow link beside a pill --------------------------------
   .hr-btn and .hr-link both carry align-self:flex-start in §5 so
   they never stretch in a column flex parent. Inside .hr-cta-row
   (a ROW with align-items:center) that same declaration stops the
   link centring on the pill — it floats 20px high. Re-centre both
   when they sit in a cta row. */
.hr-cta-row > .hr-link,.hr-cta-row > .hr-btn{ align-self:center; }

/* Focal variant: right of frame, a little above centre. Sits
   between .hr-focus-tr (28%) and .hr-focus-cr (50%) — the band
   crop needs the driver's head clear of the top edge without
   losing the wheel at the bottom. */
.hr-focus-cr2 img{ object-position:62% 38%; }
.hr-focus-c2 img{ object-position:50% 36%; }
.hr-focus-cr3 img{ object-position:62% 62%; }
.hr-focus-bl3 img{ object-position:35% 80%; }
.hr-focus-c3 img{ object-position:50% 65%; }

/* ---- Yellow accent line on dark grounds ---------------------
   §4 reverses .hr-h1/2/3 to white inside a blue or navy section
   (0,2,0), which outranks .hr-yellow-ink (0,1,0) — so a heading
   carrying both rendered white and the accent was lost. Yellow
   on blue is 3.55:1: LARGE TEXT ONLY (24px+, or 18.66px+ bold).
   Do not use .hr-yellow-ink at body size on a blue ground. */
.hr-section--blue .hr-yellow-ink,.hr-section--navy .hr-yellow-ink,
.hr-card--navy .hr-yellow-ink{ color:var(--hr-yellow); }

/* ---- Arrow link tap target ----------------------------------
   .hr-link is 17px on a 1.0 line box = 21px tall, under the
   24x24 minimum in WCAG 2.2 AA (2.5.8). Padding grows the hit
   box only — type, color and arrow are unchanged, and inside
   .hr-cta-row nothing shifts because the row centres its
   children. */
.hr-link,a.hr-link{ padding-block:2px; min-height:24px; }

/* ---- Links on the light floods ------------------------------
   §4 reverses every muted type class on coral and yellow but
   never names <a>, and the yellow-link rule only covers blue and
   navy — so an anchor on coral fell through to the base blue:
   1.78:1. The guide's ground table says coral and yellow take
   ink (6.1:1 and 12:1). Underlined, since ink-on-ink needs the
   affordance. */
.hr-section--coral a:not(.hr-btn),.hr-section--yellow a:not(.hr-btn){
  color:var(--hr-ink); text-decoration:underline; text-underline-offset:3px;
}
.hr-section--coral a:not(.hr-btn):hover,.hr-section--yellow a:not(.hr-btn):hover{
  color:var(--hr-ink); text-decoration:none;
}

/* ---- Photo collage ------------------------------------------
   2x2 of window crops in one column. Equal rows, so a framed
   tile and a bare tile still line up. Tiles take the small tail
   — a full 56px notch in a 270px tile eats the face. */
.hr-collage{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:0; }
.hr-collage--tall{ height:560px; }
.hr-collage > *{ min-height:0; }
/* Tiles butt together. Only the framed tile is window-cropped —
   four tails in a 2x2 reads as noise, one reads as the mark. */
.hr-collage > .hr-window{ clip-path:none; }
.hr-collage .hr-frame{ height:100%; padding:14px; }
.hr-collage .hr-window{ height:100%; --hr-tail-d:34px; --hr-tail-w:48px; --hr-tail-x:32px; }
@media (max-width:1024px){ .hr-collage--tall{ height:460px; } }
@media (max-width:767px){ .hr-collage--tall{ height:360px; } .hr-collage .hr-frame{ padding:9px; } }

/* ---- Wide, shallow window band --------------------------------
   A full-container letterbox crop. Sits under hero copy where a
   tall side-by-side photo would push the fold down.

   The tail is pinned to a fixed size by v1.8 below. */
.hr-window--band{ height:320px; }
@media (max-width:1024px){ .hr-window--band{ height:260px; } }
@media (max-width:767px){ .hr-window--band{ height:200px; } }

/* ---- Sticky header — replaces the inline style on <header> ----
   position:sticky here does nothing: Hello Elementor's own reset.css
   sets body{overflow-x:clip} site-wide, and per spec, an element with
   overflow-x set to anything but visible forces its own overflow-y to
   compute as auto instead of visible — turning <body> into a scroll/
   clip container. Any ancestor along a sticky element's chain with
   non-visible overflow breaks position:sticky outright, so the header
   was silently behaving as an ordinary in-flow element the whole time
   (confirmed live, 29 Sep 2026: computed style said "sticky", but
   getBoundingClientRect().top tracked -scrollY 1:1 on scroll — it
   never stuck — reproduced on both mobile and desktop). Switched to
   position:fixed, which isn't subject to ancestor overflow the way
   sticky is. Needs a padding-top below to reserve the space the header
   no longer takes up in normal flow. Confirmed live: header height is
   ~97-100px across every breakpoint (logo shrinks at smaller widths,
   but padding-block:24px dominates the header's total height
   regardless), so one padding-top value covers all of them.

   Targets body, not .hr-page: confirmed live on hellorefi.wpengine.com
   30 Sep 2026 that the page's <main class="hr-page"> wrapper isn't
   present in the rendered DOM (the header's Elementor HTML widget
   sits directly among the page's other widgets, with no .hr-page
   ancestor to catch this rule) — so a .hr-page-scoped padding-top was
   silently a no-op there, letting the hero render underneath the fixed
   header on both mobile and desktop. body always exists regardless of
   how a page's markup gets wrapped, so this rule targets it instead.
   Flagged separately: the missing .hr-page wrapper likely also means
   this file's other .hr-page-scoped resets (box-sizing, img, link,
   focus-visible — see the "§2" block near the top of this file) aren't
   applying live either; worth confirming with whoever pastes page
   markup into Elementor that <main class="hr-page"> is kept intact,
   per each page file's own header comment. */
.hr-nav--sticky{ position:fixed; top:0; left:0; right:0; z-index:900; border-bottom:1px solid var(--hr-rule-soft); }
body{ padding-top:100px; }

/* ---- Type size utilities — replace inline font-size overrides ---- */
.hr-fs-15{ font-size:15px; } .hr-fs-17{ font-size:17px; } .hr-fs-18{ font-size:18px; }
.hr-fs-19{ font-size:19px; } .hr-fs-20{ font-size:20px; } .hr-fs-21{ font-size:21px; }
.hr-fs-23{ font-size:23px; } .hr-fs-24{ font-size:24px; } .hr-fs-26{ font-size:26px; }
.hr-fs-28{ font-size:28px; } .hr-fs-32{ font-size:32px; }
.hr-stat__num--md{ font-size:clamp(42px,5vw,76px); }
.hr-stat__num--lg{ font-size:clamp(56px,6.4vw,96px); }

/* ---- Measure utilities — replace inline max-width overrides ---- */
.hr-max-20{ max-width:20ch; } .hr-max-24{ max-width:24ch; } .hr-max-28{ max-width:28ch; }
.hr-max-32{ max-width:32ch; } .hr-max-34{ max-width:34ch; } .hr-max-36{ max-width:36ch; }
.hr-max-44{ max-width:44ch; } .hr-max-48{ max-width:48ch; } .hr-max-52{ max-width:52ch; }
.hr-max-54{ max-width:54ch; } .hr-max-60{ max-width:60ch; } .hr-max-64{ max-width:64ch; }

/* ---- Misc utilities ---- */
.hr-yellow-ink{ color:var(--hr-yellow); }
.hr-bold-ink{ font-weight:700; color:var(--hr-ink); }
.hr-rule-top{ border-top:1px solid var(--hr-rule); }
.hr-section--blue .hr-rule-top,.hr-section--navy .hr-rule-top{ border-top-color:rgba(255,255,255,.28); }
.hr-w-full{ width:100%; }


/* ============================================================
   v1.8 — the tail stops stretching, 2026-09-23. Append-only.
   ============================================================ */

/* --hr-window sizes the tail in PERCENTAGES, so the notch takes
   its shape from the box: near-square in a narrow column, a long
   flat wedge in a wide band (measured 0.85:1 to 3.84:1 across one
   page). The mark itself is fixed: 74.6 x 52.8 in the logo file,
   1.41:1. These rules pin the tail to that ratio in px, so it is
   the same object at every width and height.
   Applies site-wide — homepage windows pick it up too. */
:root{ --hr-tail-d:56px; --hr-tail-w:79px; --hr-tail-x:64px; }
@media (max-width:767px){ :root{ --hr-tail-d:40px; --hr-tail-w:56px; --hr-tail-x:44px; } }

.hr-window,.hr-media-card__img{
  clip-path:polygon(
    0 0,100% 0,
    100% calc(100% - var(--hr-tail-d)),
    calc(var(--hr-tail-x) + var(--hr-tail-w)) calc(100% - var(--hr-tail-d)),
    var(--hr-tail-x) 100%,
    calc(var(--hr-tail-x) - 1px) calc(100% - var(--hr-tail-d)),
    0 calc(100% - var(--hr-tail-d)));
}
/* Shallow crops get a proportionally smaller tail — 56px of notch
   in a 170px card is a third of the image. */
.hr-window--card,.hr-media-card__img{ --hr-tail-d:34px; --hr-tail-w:48px; --hr-tail-x:40px; }



/* ---- Photo-flood hero ---------------------------------------
   A full-bleed photograph with the headline on a solid coral
   panel laid over it. The PANEL carries the type, not the photo,
   so the pairing stays at 6.1:1 ink-on-coral whatever art is
   dropped in — the photo can be swapped without re-testing
   legibility, which type set directly on a photograph cannot
   promise. Square, like every other surface. The panel hangs
   below the image onto the section beneath it; that overlap is
   the whole gesture, so do not zero the negative margin.
   Built for /about/. Reusable on any page that opens on a
   photograph. */
.hr-hero-flood{ position:relative; display:grid; }
/* Scoped to .hr-hero-flood (not just .hr-hero-flood__img alone) so this
   beats Hello Elementor's .elementor img{height:auto} reset, which
   otherwise wins on specificity and lets the image render at its
   natural aspect ratio — uncapped, and visibly oversized on wide
   screens. Confirmed live, 29 Sep 2026: was rendering ~997px tall at a
   2560px-wide viewport instead of capping at 660px. max-height is
   redundant with clamp()'s own ceiling but kept explicit as a second
   guard. */
.hr-hero-flood .hr-hero-flood__img{
  grid-area:1 / 1; width:100%; height:clamp(420px,62vh,660px); max-height:660px;
  object-fit:cover; object-position:center; display:block;
}
.hr-hero-flood__inner{ grid-area:1 / 1; display:flex; align-items:flex-end; }
.hr-hero-flood__panel{
  position:relative; z-index:1;
  background:var(--hr-coral); color:var(--hr-ink);
  padding:var(--hr-s8); max-width:620px;
  margin-bottom:calc(-1 * var(--hr-s9));
  display:flex; flex-direction:column; gap:var(--hr-s5);
}
/* Window-shaped panel — the mark's notch cut out of the coral,
   so the photograph shows through the tail. Extra bottom padding
   keeps the last line of the headline clear of the notch. */
/* Blue panel — the one way to set the greeting in white. White on
   coral is 2.9:1 and banned outright; white on blue is 5.4:1. */
.hr-hero-flood__panel--blue{ background:var(--hr-blue); color:var(--hr-white); }
/* White panel — ink at 17.5:1, the highest-contrast option on the
   page and the quietest against a busy photograph. */
.hr-hero-flood__panel--white{ background:var(--hr-white); color:var(--hr-ink); }
.hr-hero-flood__panel--blue .hr-eyebrow,
.hr-hero-flood__panel--blue .hr-h1{ color:var(--hr-white); }

/* Blend frame around the panel — placement A from §the blend, the
   same pattern as a framed hero photo. The notch cuts through the
   panel to the blend beneath, so the frame reads as the tail of a
   speech bubble. This is the page's one blend moment; nothing else
   on the page may take the ramp. */
.hr-hero-flood__frame{
  position:relative; z-index:1; max-width:812px;
  margin-bottom:calc(-1 * var(--hr-s7));
}
.hr-hero-flood__frame .hr-hero-flood__panel{ margin-bottom:0; max-width:none; }
@media (max-width:1024px){ .hr-hero-flood__frame{ margin-bottom:calc(-1 * var(--hr-s6)); } }
@media (max-width:767px){ .hr-hero-flood__frame{ margin-bottom:calc(-1 * var(--hr-s5)); } }

.hr-hero-flood__panel--window{
  clip-path:var(--hr-window);
  padding-bottom:calc(var(--hr-s10) + var(--hr-tail-d));
  margin-bottom:calc(-1 * var(--hr-s7));
}

@media (max-width:1024px){
  .hr-hero-flood .hr-hero-flood__img{ height:clamp(360px,50vh,500px); max-height:500px; }
  .hr-hero-flood__panel{ padding:var(--hr-s7); margin-bottom:calc(-1 * var(--hr-s8)); }
  .hr-hero-flood__panel--window{ padding-bottom:calc(var(--hr-s9) + var(--hr-tail-d)); margin-bottom:calc(-1 * var(--hr-s6)); }
}
@media (max-width:767px){
  .hr-hero-flood .hr-hero-flood__img{ height:320px; max-height:320px; }
  .hr-hero-flood__panel{ padding:var(--hr-s6); margin-bottom:calc(-1 * var(--hr-s7)); }
  .hr-hero-flood__panel--window{ padding-bottom:calc(var(--hr-s8) + var(--hr-tail-d)); margin-bottom:calc(-1 * var(--hr-s5)); }
}


/* ---- The greeting, at poster scale --------------------------
   One word, once, in the h1 of the about page. Gabarito 800 the
   same as .hr-h1 — this only changes the size, so it is still
   the heading face. Never use it for a word that is not the
   brand's own greeting. */
.hr-hello{
  display:block; font-style:normal;
  font-size:clamp(64px,10.5vw,160px); line-height:.84; letter-spacing:-.05em;
}

/* ---- Full-bleed photograph as a page break ------------------
   Edge to edge, no window crop — the crop is for photos that sit
   inside the grid. A bleed photo is already doing the work the
   notch does, and two marks in one image reads as a mistake.
   Scoped to .hr-page (not just .hr-band-photo alone) for the same
   reason as .hr-hero-flood__img above — Hello Elementor's
   .elementor img{height:auto} otherwise wins on specificity and lets
   the image scale to its natural aspect ratio, uncapped. Confirmed
   live, 29 Sep 2026: was rendering ~1706px tall at a 2560px-wide
   viewport instead of capping at 680px. */
.hr-page .hr-band-photo{ display:block; width:100%; height:clamp(360px,58vh,680px); max-height:680px; object-fit:cover; }
/* The focus classes act on a child img; a bleed photo IS the
   element, so it needs its own vertical variants. */
.hr-band-photo.hr-focus-t{ object-position:center 20%; }
.hr-band-photo.hr-focus-b{ object-position:center bottom; }

/* ---- Numeral tile -------------------------------------------
   The blend as a square with an INK numeral on it — the same
   move as .hr-icon-tile, at chapter scale. Solves what the blend
   numeral cannot: every stop of the ramp is light, so ink clears
   4.5:1 across the whole gradient (6.1:1 at the coral midpoint,
   12:1 at the yellow end), and it works on white, shell and navy
   alike. Like icon tiles, tiles are a repeatable placement — a
   set of them is one blend moment, not three. */
.hr-num-tile{
  background:var(--hr-blend); display:grid; place-items:center;
  width:136px; height:136px; flex:0 0 auto;
}
.hr-num-tile .hr-stat__num{
  font-size:68px; line-height:1; color:var(--hr-ink);
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
}
@media (max-width:1024px){
  .hr-num-tile{ width:104px; height:104px; }
  .hr-num-tile .hr-stat__num{ font-size:52px; }
}
@media (max-width:767px){
  .hr-num-tile{ width:88px; height:88px; }
  .hr-num-tile .hr-stat__num{ font-size:44px; }
}


/* ============================================================
   v1.15 — hero-flood panel ink, 2026-09-25. Append-only.
   ============================================================ */

/* The §4 reversals name .hr-section--coral / --yellow only, so a
   coral panel that is not a section fell through: every muted
   type class sets its own color, and --hr-ink-65 on coral is
   4.0:1. The panel already declares color:var(--hr-ink), but
   inheritance loses to a class that names its own color — so
   each one has to be named here too, exactly as §4 does. */
.hr-hero-flood__panel .hr-lede,
.hr-hero-flood__panel .hr-body,
.hr-hero-flood__panel .hr-small,
.hr-hero-flood__panel .hr-fine,
.hr-hero-flood__panel .hr-cta-note,
.hr-hero-flood__panel .hr-list li,
.hr-hero-flood__panel .hr-list__rest{ color:var(--hr-ink); }

/* The blue panel is the one dark ground among the variants:
   white at 5.4:1, and it must outrank the ink rule above. */
.hr-hero-flood__panel--blue .hr-lede,
.hr-hero-flood__panel--blue .hr-body,
.hr-hero-flood__panel--blue .hr-small,
.hr-hero-flood__panel--blue .hr-fine,
.hr-hero-flood__panel--blue .hr-cta-note,
.hr-hero-flood__panel--blue .hr-list li,
.hr-hero-flood__panel--blue .hr-list__rest{ color:var(--hr-white); }


/* ============================================================
   v1.16 — contact form, 2026-09-25. Append-only.
   ============================================================ */

/* Plain-HTML form layout, for forms not rendered by Gravity.
   Same field styling as §11; these only handle the arrangement. */
.hr-form__fields{ display:grid; gap:var(--hr-s5); }
.hr-form__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--hr-s5); }
@media (max-width:767px){ .hr-form__row{ grid-template-columns:minmax(0,1fr); } }
.hr-form__req{ color:var(--hr-coral-text); }

/* Consent checkbox — 44px tap target beside fine print. */
.hr-form__consent{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:8px; align-items:start; }
.hr-form__consent__box{ width:44px; height:44px; display:grid; place-items:center; margin-left:-10px; }
.hr-form__consent input[type="checkbox"]{ width:24px; height:24px; margin:0; accent-color:var(--hr-blue); }
.hr-form .hr-form__consent label{
  font-size:14px; font-weight:400; line-height:1.6; color:var(--hr-ink-65);
  margin:0; padding-top:11px;
}


/* ============================================================
   v1.16 — icon row, 2026-09-25. Append-only.
   ============================================================ */

/* Icon tile beside a line of copy. Tile keeps its own size; the copy
   takes the rest of the row and stays top-aligned with it. */
.hr-icon-row{ display:flex; align-items:flex-start; gap:var(--hr-s5); }
.hr-icon-row > .hr-icon-tile{ flex:0 0 auto; }
.hr-icon-row > p{ flex:1 1 auto; margin:0; }
/* v1.13 (theirs) set no breakpoint, so a 64px tile held its place
   inside a mobile column with a 20px gutter and left the copy too
   narrow to set. The tile is a fixed object and the column is not,
   so the row breaks rather than the type. */
@media (max-width:767px){
  .hr-icon-row{ flex-direction:column; align-items:flex-start; gap:var(--hr-s4); }
}
/* .hr-icon-row is top-aligned so a tile lines up with the first
   line of a paragraph. Where the copy is a single short line the
   tile reads as floating above it — this modifier centres the two
   against each other. One line of copy only; on a paragraph the
   top alignment is still right. */
.hr-icon-row--center{ align-items:center; }
@media (max-width:767px){
  /* Below 767px .hr-icon-row switches to a stacked column (rule above),
     so align-items:center here would center the tile and copy
     horizontally instead of aligning them left — this reverts to
     flex-start at that breakpoint so --center only affects the row
     layout it was designed for. */
  .hr-icon-row--center{ align-items:flex-start; }
}


/* ============================================================
   v1.27 — Osano hidden-dialog click-blocking fix, 2026-10-01.
   ============================================================ */

/* Osano's own CMP script (not ours — loaded site-wide, not part of this
   file) renders its "manage preferences" info dialog as a fixed,
   full-viewport container with pointer-events:auto and an effectively
   maximum z-index (2147483638), even while it carries Osano's own
   "--hidden" modifier class. A hidden element should never still be
   clickable — if Osano's hidden-state styling doesn't reliably apply
   before paint on every device (timing/engine-dependent), this
   full-screen, top-stacked, auto-pointer-events box can silently
   swallow taps anywhere on the page, including the header's hamburger
   button, while being completely invisible. Investigated live 1 Oct
   2026 after the mobile nav was reported broken for real users post-
   launch (nav.js's own click/touchend handling checked out fine in
   every test). This rule forces pointer-events:none specifically when
   Osano's own hidden class is present, so the dialog is only ever
   clickable when Osano itself has made it visible. */
.osano-cm-dialog--hidden,
.osano-cm-info-dialog--hidden{ pointer-events:none !important; }


/* ============================================================
   v1.16 — co-brand lockup, 2026-09-25. Append-only.
   ============================================================ */

/* Hello Refi mark + hairline + partner mark, one baseline.
   Ours leads and is the larger of the two. */
.hr-cobrand{ display:flex; align-items:center; gap:var(--hr-s6); }
.hr-cobrand__logo{ height:42px; width:auto; display:block; }
.hr-cobrand__rule{ width:1px; height:34px; background:var(--hr-rule); flex:0 0 auto; }
.hr-cobrand__partner{ height:auto; max-height:44px; max-width:230px; width:auto; display:block; }
@media (max-width:640px){
  .hr-cobrand{ gap:var(--hr-s4); }
  .hr-cobrand__logo{ height:34px; }
  .hr-cobrand__partner{ max-height:34px; }
}


/* ============================================================
   v1.16 — CTA band aside, 2026-09-25. Append-only.
   ============================================================ */

/* CTA band aside — the pill with a line of fine print beneath it.
   The band's own rule places a direct-child .hr-btn in the right five
   columns; when the button needs a note under it, wrap both in this
   instead so the pair keeps that placement and right alignment. */
.hr-cta-band__aside{
  grid-column:auto / span 5; justify-self:end; align-self:center;
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--hr-s4);
  text-align:right;
}
.hr-cta-band__aside .hr-btn{ align-self:flex-end; }
@media (max-width:1024px){
  .hr-cta-band__aside{ grid-column:auto; justify-self:start; align-items:flex-start; text-align:left; }
  .hr-cta-band__aside .hr-btn{ align-self:flex-start; }
}

/* A link inside footer fine print (e.g. the NMLS Consumer Access link)
   should always match its surrounding text size, not the generic
   17px footer-link default. */
.hr-footer__legal a:not(.hr-btn){ font-size:inherit; }