/* ============================================================================
   Rank Forge Marketing — Conversion UX Layer (2026)
   ----------------------------------------------------------------------------
   Structural patterns borrowed from high-converting agency sites: lead capture
   inside the hero, a dark capability band, tabbed proof, a filterable review
   rail, and a pre-footer conversion band. Loads AFTER rf-brand-2026.css so it
   can lean on the brand tokens rather than restate them.
   ========================================================================== */

:root{
  --ux-navy:#141d2b;
  --ux-navy-2:#1e2a3a;
  --ux-navy-3:#26364a;
  --ux-orange:#e4531e;
  --ux-orange-2:#f2721f;
  --ux-paper:#fcfbf9;
  --ux-cream:#f4f1ea;
  --ux-line:rgba(255,255,255,.13);
  --ux-shell:1240px;
  --ux-pad:clamp(18px,4vw,40px);
}

.ux-shell{max-width:var(--ux-shell);margin:0 auto;padding-left:var(--ux-pad);padding-right:var(--ux-pad);}

/* ==========================================================================
   1. Scroll reveal — the single biggest cure for "static template" feel.
   Everything is visible by default; JS opts elements in, so no-JS and
   reduced-motion users never lose content.
   ========================================================================== */
[data-ux-reveal]{opacity:0;transform:translateY(14px);}
.ux-js [data-ux-reveal]{transition:opacity .42s cubic-bezier(.22,.61,.36,1),transform .42s cubic-bezier(.22,.61,.36,1);}
[data-ux-reveal].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  [data-ux-reveal]{opacity:1 !important;transform:none !important;transition:none !important;}
}
html:not(.ux-js) [data-ux-reveal]{opacity:1;transform:none;}

/* ==========================================================================
   2. Sticky booking rail + header elevation
   ========================================================================== */
.ux-booktab{
  position:fixed;right:0;top:52%;transform:translateY(-50%);z-index:70;
  display:flex;align-items:center;gap:9px;
  writing-mode:vertical-rl;
  background:var(--ux-orange);color:#fff;text-decoration:none;
  font:700 13.5px/1 var(--rfb-text,"Source Sans 3",Arial,sans-serif);
  letter-spacing:.06em;padding:20px 11px;
  border-radius:6px 0 0 6px;
  box-shadow:-6px 10px 26px rgba(20,29,43,.24);
  transition:background .2s ease,padding .2s ease;
}
.ux-booktab:hover,.ux-booktab:focus-visible{background:#c8430f;padding-right:15px;color:#fff;}
.ux-booktab svg{transform:rotate(90deg);flex:none;}
@media (max-width:900px){.ux-booktab{display:none;}}

/* Header gains a shadow once the page scrolls — depth cue, not decoration. */
.ux-js .rfn,.ux-js .rfnav{transition:box-shadow .25s ease;}
.ux-scrolled .rfn,.ux-scrolled .rfnav{box-shadow:0 10px 30px rgba(20,29,43,.10);}

/* ==========================================================================
   3. Hero — dark, photographic, with the lead form sitting in it
   ========================================================================== */
.ux-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(228,83,30,.22),transparent 58%),
    radial-gradient(90% 70% at 8% 100%,rgba(46,86,140,.30),transparent 62%),
    linear-gradient(168deg,var(--ux-navy-2) 0%,var(--ux-navy) 62%,#0f1621 100%);
  color:#fff;
}
.ux-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(70% 60% at 30% 20%,#000,transparent 76%);
}
.ux-hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(30px,4.4vw,58px);align-items:center;
  padding-top:clamp(46px,6vw,84px);padding-bottom:clamp(46px,6vw,84px);
}
@media (max-width:960px){.ux-hero-grid{grid-template-columns:1fr;}}

.ux-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font:600 12px/1 var(--rfb-text,"Source Sans 3",Arial,sans-serif);
  letter-spacing:.16em;text-transform:uppercase;color:#f9b48f;
  margin:0 0 20px;
}
.ux-eyebrow::before{content:"";width:26px;height:2px;background:var(--ux-orange);}

.ux-hero h1{
  margin:0 0 18px;
  font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:800;font-size:clamp(34px,5.1vw,62px);line-height:1.02;
  letter-spacing:-.028em;color:#fff;text-wrap:balance;
}
.ux-hero h1 em{font-style:normal;color:#f9a273;}
.ux-hero-sub{
  margin:0 0 26px;max-width:56ch;
  font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:rgba(255,255,255,.80);
}
.ux-hero-points{
  list-style:none;margin:0 0 30px;padding:0;
  display:grid;gap:11px;
}
.ux-hero-points li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:15.5px;line-height:1.45;color:rgba(255,255,255,.90);
}
.ux-hero-points svg{flex:none;margin-top:2px;color:var(--ux-orange-2);}

.ux-hero-actions{display:flex;flex-wrap:wrap;gap:13px;align-items:center;}
.ux-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ux-orange);color:#fff;text-decoration:none;
  font:700 16px/1 var(--rfb-text,"Source Sans 3",Arial,sans-serif);
  padding:16px 26px;border:none;border-radius:var(--rfb-r-control,4px);cursor:pointer;
  box-shadow:0 12px 26px rgba(228,83,30,.26);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.ux-btn:hover,.ux-btn:focus-visible{background:#c8430f;transform:translateY(-2px);box-shadow:0 18px 34px rgba(228,83,30,.32);color:#fff;}
.ux-btn--ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34);box-shadow:none;
}
.ux-btn--ghost:hover,.ux-btn--ghost:focus-visible{background:rgba(255,255,255,.09);border-color:#fff;color:#fff;}
.ux-btn--dark{background:var(--ux-navy-2);box-shadow:0 12px 26px rgba(20,29,43,.20);}
.ux-btn--dark:hover{background:#0f1621;}

.ux-hero-phone{
  display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font:700 17px/1 var(--rfb-text,"Source Sans 3",Arial,sans-serif);
}
.ux-hero-phone small{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-bottom:5px;}
.ux-hero-phone:hover{color:#f9a273;}

/* --- the in-hero lead card ------------------------------------------------ */
.ux-leadcard{
  background:var(--ux-paper);border-radius:var(--rfb-r-card,8px);
  box-shadow:0 34px 70px rgba(8,14,24,.42);
  padding:clamp(22px,2.6vw,30px);
  border-top:4px solid var(--ux-orange);
}
.ux-leadcard h2{
  margin:0 0 6px;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:800;font-size:clamp(21px,2.2vw,26px);line-height:1.1;
  letter-spacing:-.02em;color:var(--ux-navy-2);
}
.ux-leadcard p{margin:0 0 18px;font-size:14.5px;line-height:1.5;color:#5b6672;}
.ux-form{display:grid;gap:10px;}
.ux-field{position:relative;display:flex;align-items:center;}
.ux-field svg{position:absolute;left:14px;color:#9aa3ad;pointer-events:none;}
.ux-form input,.ux-form select,.ux-form textarea{
  width:100%;box-sizing:border-box;
  background:#f4f2ed;border:1px solid #ddd7cb;
  border-radius:var(--rfb-r-control,4px);
  padding:14px 15px 14px 42px;
  font-family:var(--rfb-text,"Source Sans 3",Arial,sans-serif);
  color:var(--ux-navy-2);outline:none;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.ux-form textarea{padding-left:15px;min-height:88px;resize:vertical;}
.ux-form select{appearance:none;color:#5b6672;}
.ux-form input:focus,.ux-form select:focus,.ux-form textarea:focus{
  background:#fff;border-color:var(--ux-orange);box-shadow:0 0 0 3px rgba(228,83,30,.16);
}
.ux-form button{width:100%;justify-content:center;margin-top:4px;}
.ux-form-note{
  margin:12px 0 0;display:flex;align-items:center;gap:7px;
  font-size:12.5px;line-height:1.4;color:#6d737b;
}
.ux-form-note svg{flex:none;color:#4c9a5f;}
.ux-hp{position:absolute;left:-9999px;}

/* ==========================================================================
   4. Credential strip directly under the hero
   ========================================================================== */
.ux-credbar{background:var(--ux-paper);border-bottom:1px solid var(--rfb-line,#ddd6c9);}
.ux-credbar-in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(18px,3.4vw,44px);padding:20px 0;
}
.ux-cred{
  display:flex;align-items:center;gap:11px;
  font:600 13.5px/1.35 var(--rfb-text,"Source Sans 3",Arial,sans-serif);color:#4a5058;
  text-decoration:none;
}
.ux-cred strong{display:block;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);font-size:19px;color:var(--ux-navy-2);line-height:1;margin-bottom:3px;}
.ux-cred-ico{
  width:38px;height:38px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(228,83,30,.10);color:var(--ux-orange);
}
.ux-cred-stars{color:#f5a623;letter-spacing:1.5px;font-size:13px;}

/* ==========================================================================
   5. Dark capability band ("Results-driven Marketing")
   ========================================================================== */
.ux-caps{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(150deg,var(--ux-navy-2),var(--ux-navy) 70%);
  padding:clamp(52px,6.4vw,86px) 0;
}
.ux-caps::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 80% at 50% -10%,rgba(228,83,30,.18),transparent 62%);
}
.ux-caps>*{position:relative;z-index:1;}
.ux-band-head{text-align:center;max-width:760px;margin:0 auto clamp(34px,4vw,52px);}
.ux-band-head h2{
  margin:0 0 14px;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:800;font-size:clamp(27px,3.5vw,42px);line-height:1.1;letter-spacing:-.025em;
  color:inherit;text-wrap:balance;
}
.ux-band-head p{margin:0 auto;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.72);max-width:62ch;}
.ux-caps .ux-band-head p{color:rgba(255,255,255,.72);}

.ux-capgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(14px,1.8vw,22px);
}
.ux-cap{
  display:block;text-decoration:none;text-align:center;color:#fff;
  background:rgba(255,255,255,.045);
  border:1px solid var(--ux-line);border-radius:var(--rfb-r-card,8px);
  padding:30px 20px 26px;
  transition:transform .22s ease,background .22s ease,border-color .22s ease;
}
.ux-cap:hover,.ux-cap:focus-visible{
  transform:translateY(-6px);background:rgba(255,255,255,.09);border-color:rgba(228,83,30,.55);color:#fff;
}
.ux-cap-ico{
  width:56px;height:56px;margin:0 auto 16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(228,83,30,.16);color:#f9a273;
  transition:background .22s ease,color .22s ease;
}
.ux-cap:hover .ux-cap-ico{background:var(--ux-orange);color:#fff;}
.ux-cap h3{margin:0 0 8px;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);font-weight:700;font-size:17.5px;letter-spacing:-.01em;color:#fff;}
.ux-cap p{margin:0 auto;font-size:14px;line-height:1.5;color:rgba(255,255,255,.68);max-width:30ch;}

/* ==========================================================================
   6. Section scaffolding on light ground
   ========================================================================== */
.ux-section{padding:clamp(52px,6.4vw,88px) 0;}
.ux-section--paper{background:var(--ux-paper);}
.ux-section--cream{background:var(--ux-cream);}
.ux-section-head{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(18px,3vw,44px);align-items:end;margin-bottom:clamp(28px,3.4vw,44px);
}
@media (max-width:820px){.ux-section-head{grid-template-columns:1fr;align-items:start;}}
.ux-section-head h2{
  margin:0;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:800;font-size:clamp(27px,3.5vw,42px);line-height:1.08;
  letter-spacing:-.026em;color:var(--ux-navy-2);text-wrap:balance;
}
.ux-section-head p{margin:0;font-size:16.5px;line-height:1.62;color:#54606d;}
.ux-kicker{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;
  font:700 12px/1 var(--rfb-text,"Source Sans 3",Arial,sans-serif);
  letter-spacing:.16em;text-transform:uppercase;color:var(--rfb-orange-dark,#bd3f16);
}
.ux-kicker::before{content:"";width:24px;height:2px;background:var(--ux-orange);}

/* ==========================================================================
   7. Tabbed proof cards with stat pairs
   ========================================================================== */
.ux-tabs{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-bottom:clamp(24px,3vw,36px);
}
.ux-tab{
  appearance:none;cursor:pointer;
  background:transparent;color:#4a5058;
  border:1px solid var(--rfb-line,#ddd6c9);border-radius:100px;
  font:600 14px/1 var(--rfb-text,"Source Sans 3",Arial,sans-serif);
  padding:11px 20px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.ux-tab:hover{border-color:var(--ux-orange);color:var(--rfb-orange-dark,#bd3f16);}
.ux-tab[aria-selected="true"]{background:var(--ux-orange);border-color:var(--ux-orange);color:#fff;}

.ux-proofgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:clamp(16px,2vw,26px);}
.ux-proof{
  display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  background:var(--ux-paper);border:1px solid var(--rfb-line,#ddd6c9);
  border-radius:var(--rfb-r-card,8px);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.ux-proof:hover,.ux-proof:focus-visible{transform:translateY(-7px);box-shadow:var(--rfb-shadow-lift,0 26px 60px rgba(23,24,26,.13));border-color:rgba(228,83,30,.4);}
.ux-proof-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e9e5dc;}
.ux-proof-media img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.ux-proof:hover .ux-proof-media img{transform:scale(1.05);}
.ux-proof-tag{
  position:absolute;left:14px;top:14px;
  background:rgba(20,29,43,.86);color:#fff;
  font:600 11.5px/1 var(--rfb-text,"Source Sans 3",Arial,sans-serif);
  letter-spacing:.09em;text-transform:uppercase;padding:8px 11px;border-radius:3px;
  backdrop-filter:blur(4px);
}
.ux-proof-body{padding:20px 22px 8px;flex:1;}
.ux-proof-body h3{margin:0 0 8px;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);font-weight:700;font-size:19px;line-height:1.22;letter-spacing:-.015em;color:var(--ux-navy-2);}
.ux-proof-body p{margin:0;font-size:14.5px;line-height:1.55;color:#5b6672;}
.ux-proof-stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rfb-line,#ddd6c9);margin-top:18px;}
.ux-proof-stats div{padding:18px 14px;text-align:center;}
.ux-proof-stats div+div{border-left:1px solid var(--rfb-line,#ddd6c9);}
.ux-proof-stats b{
  display:block;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:800;font-size:clamp(24px,3vw,32px);line-height:1;
  letter-spacing:-.03em;color:var(--ux-orange);margin-bottom:6px;
}
.ux-proof-stats small{display:block;font-size:11.5px;line-height:1.35;color:#6d737b;}
.ux-proof-cta{padding:0 22px 20px;}
.ux-proof-cta span{
  display:inline-flex;align-items:center;gap:7px;
  font:700 14px/1 var(--rfb-text,"Source Sans 3",Arial,sans-serif);color:var(--rfb-orange-dark,#bd3f16);
}
.ux-proof:hover .ux-proof-cta span{gap:12px;}
.ux-proof-cta span{transition:gap .2s ease;}
.ux-center{text-align:center;margin-top:clamp(26px,3vw,38px);}

/* ==========================================================================
   8. Capability rows (alternating media/copy) — replaces flat card grids
   ========================================================================== */
.ux-split{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(26px,4vw,60px);align-items:center;
}
.ux-split+.ux-split{margin-top:clamp(46px,5.4vw,78px);}
/* A split band with no media column: keep the copy at a readable measure
   instead of letting it stretch the full shell width. */
.ux-split--solo{grid-template-columns:minmax(0,760px);justify-content:center;text-align:left;}

.ux-split--flip .ux-split-media{order:-1;}
@media (max-width:760px){.ux-split--flip .ux-split-media{order:0;}}
.ux-split-media{
  position:relative;border-radius:var(--rfb-r-card,8px);overflow:hidden;
  box-shadow:var(--rfb-shadow,0 18px 44px rgba(23,24,26,.09));
  background:#e9e5dc;
}
.ux-split-media img{width:100%;height:100%;display:block;object-fit:cover;}
.ux-split h3{
  margin:0 0 14px;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:800;font-size:clamp(24px,2.9vw,34px);line-height:1.12;
  letter-spacing:-.024em;color:var(--ux-navy-2);
}
.ux-split p{margin:0 0 18px;font-size:16.5px;line-height:1.65;color:#54606d;}
.ux-checks{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px 18px;}
.ux-checks li{display:flex;align-items:flex-start;gap:9px;font-size:15px;line-height:1.45;color:#3f4a56;}
.ux-checks svg{flex:none;margin-top:2px;color:var(--ux-orange);}
.ux-metric{
  display:flex;align-items:baseline;gap:12px;margin:0 0 18px;
}
.ux-metric b{
  font-family:var(--rfb-display,"Archivo",Arial,sans-serif);font-weight:800;
  font-size:clamp(34px,4.6vw,52px);line-height:1;letter-spacing:-.035em;color:var(--ux-orange);
}
.ux-metric span{font-size:15px;line-height:1.4;color:#54606d;max-width:34ch;}

/* ==========================================================================
   9. Review rail
   ========================================================================== */
.ux-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(16px,2vw,24px);}
.ux-review{
  background:var(--ux-paper);border:1px solid var(--rfb-line,#ddd6c9);
  border-radius:var(--rfb-r-card,8px);padding:26px 24px;margin:0;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .22s ease,box-shadow .22s ease;
}
.ux-review:hover{transform:translateY(-5px);box-shadow:var(--rfb-shadow,0 18px 44px rgba(23,24,26,.09));}
.ux-review-stars{color:#f5a623;letter-spacing:2px;font-size:15px;}
.ux-review blockquote{margin:0;font-size:16px;line-height:1.62;color:#2f3a46;}
.ux-review figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px;}
.ux-review-avatar{
  width:42px;height:42px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--ux-navy-2);color:#fff;
  font:700 15px/1 var(--rfb-display,"Archivo",Arial,sans-serif);
}
.ux-review figcaption b{display:block;font-size:15px;color:var(--ux-navy-2);}
.ux-review figcaption span:not(.ux-review-avatar){display:block;font-size:12.5px;color:#6d737b;}

/* ==========================================================================
   10. Pre-footer conversion band — form left, contact + proof right
   ========================================================================== */
.ux-convert{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(158deg,var(--ux-navy-2) 0%,var(--ux-navy) 58%,#0e151f 100%);
  padding:clamp(48px,6vw,80px) 0;
}
.ux-convert::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 90% at 88% 6%,rgba(228,83,30,.20),transparent 60%);
}
.ux-convert-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,4vw,56px);align-items:start;
}
@media (max-width:900px){.ux-convert-grid{grid-template-columns:1fr;}}
.ux-convert h2{
  margin:0 0 12px;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:800;font-size:clamp(27px,3.5vw,40px);line-height:1.1;
  letter-spacing:-.026em;color:#fff;text-wrap:balance;
}
.ux-convert-lead{margin:0 0 24px;font-size:16.5px;line-height:1.62;color:rgba(255,255,255,.78);max-width:56ch;}
.ux-convert-phone{
  display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid var(--ux-line);
  border-radius:var(--rfb-r-card,8px);padding:16px 22px;margin-bottom:24px;
  transition:background .2s ease,border-color .2s ease;
}
.ux-convert-phone:hover{background:rgba(255,255,255,.12);border-color:rgba(228,83,30,.6);}
.ux-convert-phone .ux-cred-ico{background:rgba(228,83,30,.18);color:#f9a273;}
.ux-convert-phone small{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;margin-bottom:5px;}
.ux-convert-phone strong{display:block;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);font-size:clamp(21px,2.4vw,27px);line-height:1;color:#fff;letter-spacing:-.02em;}
.ux-convert-checks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px;}
.ux-convert-checks li{display:flex;align-items:flex-start;gap:11px;font-size:16px;line-height:1.45;color:rgba(255,255,255,.9);}
.ux-convert-checks svg{flex:none;margin-top:2px;color:var(--ux-orange-2);}
.ux-convert-quote{
  background:rgba(255,255,255,.055);border:1px solid var(--ux-line);
  border-radius:var(--rfb-r-card,8px);padding:22px 24px;margin:0;
}
.ux-convert-quote blockquote{margin:0 0 14px;font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.86);}
.ux-convert-quote figcaption{display:flex;align-items:center;gap:12px;}
.ux-convert-quote figcaption b{display:block;font-size:14.5px;color:#fff;}
.ux-convert-quote figcaption span:not(.ux-review-avatar){display:block;font-size:12.5px;color:rgba(255,255,255,.58);}

/* The lead card sits on dark here; keep it paper so the form reads as the
   brightest, most obvious action on the page. */
.ux-convert .ux-leadcard{box-shadow:0 30px 64px rgba(6,11,20,.48);}

/* ==========================================================================
   11. Mobile action bar (all pages, small screens only)
   ========================================================================== */
.ux-mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;
  box-shadow:0 -6px 22px rgba(20,29,43,.22);
}
.ux-mobar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;padding:15px 10px;
  font:700 15px/1 var(--rfb-text,"Source Sans 3",Arial,sans-serif);
}
.ux-mobar .ux-mobar-call{background:var(--ux-navy-2);color:#fff;}
.ux-mobar .ux-mobar-cta{background:var(--ux-orange);color:#fff;flex:1.4;}
@media (max-width:900px){
  .ux-mobar{display:flex;}
  /* The bar is fixed, so the last of the footer needs room to clear it. */
  body{padding-bottom:56px;}
  /* Keep the existing homepage bar from doubling up with this one. */
  .rfn-mobbar{display:none !important;}
}

/* ==========================================================================
   12. Interior-page hero lift — interior heroes stay light but gain depth,
   a breadcrumb rhythm, and a tighter form so the whole site reads as one
   system rather than two.
   ========================================================================== */
.ax-hero .rf-leadbox{
  box-shadow:0 30px 66px rgba(20,29,43,.16) !important;
  border-top:4px solid var(--ux-orange) !important;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease;
}
.ax-hero .rf-leadbox:hover{transform:translateY(-4px);box-shadow:0 38px 78px rgba(20,29,43,.20) !important;}
.ax-hero .rf-leadbox input:focus,
.ax-hero .rf-leadbox select:focus,
.ax-hero .rf-leadbox textarea:focus{
  border-color:var(--ux-orange) !important;
  box-shadow:0 0 0 3px rgba(228,83,30,.16) !important;
  background:#fff !important;
}

/* ==========================================================================
   13. Print / focus hygiene
   ========================================================================== */
.ux-booktab:focus-visible,.ux-tab:focus-visible,.ux-cap:focus-visible,
.ux-proof:focus-visible,.ux-btn:focus-visible{
  outline:3px solid #1668d8;outline-offset:3px;
}
@media print{.ux-booktab,.ux-mobar{display:none !important;}}

/* --------------------------------------------------------------------------
   Grid rhythm: auto-fit leaves an orphan on the last row for 3- and 6-item
   sets, which reads as a mistake. Both grids get explicit column counts.
   -------------------------------------------------------------------------- */
@media (min-width:1000px){
  .ux-capgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ux-proofgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:600px) and (max-width:999px){
  .ux-capgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ux-proofgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:599px){
  .ux-capgrid,.ux-proofgrid{grid-template-columns:minmax(0,1fr);}
}

/* Reviews: the pair reads better as a wide quote + a narrower link card. */
@media (min-width:820px){
  .ux-reviews{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);}
}

/* --------------------------------------------------------------------------
   The lead card is a light island inside the dark band, so the band's white
   heading and quote-avatar colours have to stop at its edge.
   -------------------------------------------------------------------------- */
.ux-convert .ux-leadcard h2{color:var(--ux-navy-2);}
.ux-convert .ux-leadcard p{color:#5b6672;}
.ux-convert .ux-review-avatar{background:rgba(255,255,255,.14);color:#fff;}
.ux-convert-quote figcaption a{text-decoration:none;}
.ux-convert-quote figcaption a:hover{color:#f9a273;}

/* --------------------------------------------------------------------------
   Carried-over editorial sections: their left columns were narrow enough that
   the headings set three or four words to a line, which reads as broken next
   to the new full-width section heads. Widened, gaps tightened.
   -------------------------------------------------------------------------- */
@media (min-width:940px){
  .rf3-audit-grid{grid-template-columns:minmax(0,1fr) minmax(400px,1fr);gap:clamp(40px,5vw,72px);}
  .rf3-faq-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(40px,5vw,64px);}
}
/* The audit heading was capped at 12ch, which forced a four-line stack. It now
   matches the scale of the other section heads on the page. */
.rf3-audit-copy h2{max-width:20ch;font-size:clamp(28px,3.5vw,44px);line-height:1.06;letter-spacing:-.03em;}
.rf3-audit-copy .rf3-choice-list{margin-bottom:22px;}

/* ==========================================================================
   14. Search-performance panel
   --------------------------------------------------------------------------
   Real Search Console figures, rendered as a branded panel rather than a
   screenshot of Google's UI. Two measures, each on its OWN scale in its own
   row group — never a shared or dual axis. Every value is direct-labelled
   text, so the numbers reach screen readers and the bars stay decorative.

   Emphasis pair on the panel's dark surface (#16202f):
     · prior period  #8794a6  5.3:1   (recessive)
     · latest period #e4531e  4.3:1   (accent)
   CVD separation ΔE 16.1 deutan / 26.7 tritan; normal-vision ΔE 21.7.
   ========================================================================== */
.ux-panel{
  --ux-p-prior:#8794a6;
  --ux-p-now:#e4531e;
  background:#16202f;
  border:1px solid rgba(255,255,255,.11);
  border-radius:var(--rfb-r-card,8px);
  box-shadow:0 26px 58px rgba(8,14,24,.30);
  padding:22px 24px 20px;
  color:#fff;
  font-family:var(--rfb-text,"Source Sans 3",Arial,sans-serif);
}
.ux-panel-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.ux-panel-head b{
  display:block;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:700;font-size:16.5px;letter-spacing:-.012em;color:#fff;
}
.ux-panel-head small{display:block;font-size:12px;line-height:1.45;color:#a7b2c1;margin-top:4px;}
.ux-panel-src{
  flex:none;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;color:#a7b2c1;
}

.ux-measure+.ux-measure{margin-top:20px;}
.ux-measure-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;
}
.ux-measure-top h4{
  margin:0;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#a7b2c1;
}
.ux-delta{
  font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:800;font-size:15px;letter-spacing:-.02em;color:var(--ux-p-now);
}
.ux-delta--down{color:#a7b2c1;}

/* One row per period. The label column is fixed so the two bars share a
   baseline; the value column is fixed so the numbers align on their left edge
   rather than drifting with bar length. */
.ux-bars{display:grid;gap:2px;}   /* 2px surface gap between adjacent fills */
.ux-bar{
  display:grid;grid-template-columns:58px minmax(0,1fr) 78px;
  align-items:center;gap:10px;
}
.ux-bar dt{
  margin:0;font-size:11.5px;color:#a7b2c1;white-space:nowrap;
}
.ux-bar-track{height:16px;position:relative;}
.ux-bar-fill{
  display:block;height:100%;
  border-radius:0 4px 4px 0;      /* rounded data-end, anchored at baseline */
  min-width:3px;
  transition:width .8s cubic-bezier(.22,.61,.36,1);
}
.ux-bar--prior .ux-bar-fill{background:var(--ux-p-prior);}
.ux-bar--now .ux-bar-fill{background:var(--ux-p-now);}
.ux-bar dd{
  margin:0;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:700;font-size:14.5px;letter-spacing:-.015em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.ux-bar--prior dd{color:#a7b2c1;font-weight:600;}
.ux-bar:hover .ux-bar-fill{filter:brightness(1.14);}

.ux-panel-note{
  margin:18px 0 0;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.13);
  font-size:11.5px;line-height:1.55;color:#94a0b0;
}
.ux-panel-note b{color:#c3ccd8;font-weight:600;}

/* The bars grow in when the panel scrolls into view. Reduced motion and the
   no-JS path both land on the final width immediately. */
.ux-js [data-ux-reveal] .ux-bar-fill{width:0 !important;}
.ux-js [data-ux-reveal].is-in .ux-bar-fill{width:var(--w) !important;}
@media (prefers-reduced-motion:reduce){
  .ux-js [data-ux-reveal] .ux-bar-fill{width:var(--w) !important;transition:none;}
}

@media (max-width:420px){
  .ux-bar{grid-template-columns:50px minmax(0,1fr) 66px;gap:8px;}
  .ux-bar dd{font-size:13px;}
}

/* Panel grid on light ground */
.ux-panelgrid{display:grid;gap:clamp(16px,2vw,22px);}
@media (min-width:900px){.ux-panelgrid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1000px){.ux-panelgrid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.ux-perf-foot{
  max-width:none;margin:clamp(22px,2.6vw,32px) 0 0;
  padding-top:18px;border-top:1px solid var(--rfb-line,#ddd6c9);
  font-size:13px;line-height:1.6;color:#6d737b;
}
/* In the capability split the panel replaces an image, so it must not inherit
   the media wrapper's photo framing. */
.ux-split>.ux-panel{align-self:center;}

/* Each evidence row now names the period it covers, so the historical sales
   figures cannot be read as belonging to the current search window. */
.rf-result-table dt{display:block;}
.rf-result-table dt span{
  display:block;margin-top:4px;
  font-size:11.5px;line-height:1.4;letter-spacing:.04em;
  color:#8b939c;text-transform:none;font-weight:400;
}
.rf3-outcome-list dt span{
  display:block;margin-top:4px;
  font-size:11.5px;line-height:1.4;color:#8b939c;
  text-transform:none;letter-spacing:.04em;font-weight:400;
}

/* --------------------------------------------------------------------------
   Stat variant of the panel. Some sources report a current value and a percent
   change but no prior absolute (Wix analytics does this), so back-computing a
   prior figure would invent precision the source never gave. Those properties
   get value + delta rows instead of paired bars.
   -------------------------------------------------------------------------- */
.ux-statrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  align-items:baseline;gap:12px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.10);
}
.ux-statrow:last-of-type{border-bottom:0;}
.ux-statrow dt{margin:0;font-size:13.5px;line-height:1.35;color:#a7b2c1;}
.ux-statrow dd{
  margin:0;font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:800;font-size:22px;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums;
}
.ux-statrow .ux-delta{font-size:13.5px;min-width:52px;text-align:right;}
.ux-stats{margin:0;}
.ux-statrow-sub{display:block;margin-top:3px;font-size:11px;color:#8b939c;}

/* ==========================================================================
   15. Surface guard
   --------------------------------------------------------------------------
   The homepage carries a legacy odd/even section repaint scoped to
   .rf-page-home, which is added by JS only when the path resolves to "/" —
   so it never fires on /index.html and a local check of that file cannot see
   it. These declarations restate each band's intended surface at matching
   specificity from the last-loaded sheet, so the layer holds even if another
   blanket rule is introduced later.
   ========================================================================== */
.rf-page-home main>section.ux-hero,
.ux-hero{
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(228,83,30,.22),transparent 58%),
    radial-gradient(90% 70% at 8% 100%,rgba(46,86,140,.30),transparent 62%),
    linear-gradient(168deg,var(--ux-navy-2) 0%,var(--ux-navy) 62%,#0f1621 100%) !important;
}
.rf-page-home main>section.ux-caps,
.ux-caps{background:linear-gradient(150deg,var(--ux-navy-2),var(--ux-navy) 70%) !important;}
.rf-page-home main>section.ux-convert,
.ux-convert{background:linear-gradient(158deg,var(--ux-navy-2) 0%,var(--ux-navy) 58%,#0e151f 100%) !important;}
.rf-page-home main>section.ux-credbar,
.ux-credbar{background:var(--ux-paper) !important;}
.rf-page-home main>section.ux-section--paper,
.ux-section--paper{background:var(--ux-paper) !important;}
.rf-page-home main>section.ux-section--cream,
.ux-section--cream{background:var(--ux-cream) !important;}

/* ==========================================================================
   16. De-templating pass
   --------------------------------------------------------------------------
   The rule-dash + wide-tracked all-caps eyebrow is the single most templated
   thing on the page. Labels keep their job but lose the costume: sentence
   case, normal tracking, no rule.
   ========================================================================== */
.ux-kicker,.ux-eyebrow{
  letter-spacing:0;
  text-transform:none;
  font-size:14px;
  font-weight:600;
  gap:0;
  margin-bottom:10px;
}
.ux-kicker::before,.ux-eyebrow::before{display:none;}
.ux-eyebrow{color:#f9a273;}

/* Panel labels read as words, not as system output. */
.ux-measure-top h4,
.ux-panel-src{text-transform:none;letter-spacing:0;font-size:13.5px;}
.ux-panel-src{font-size:11.5px;color:#7d8899;font-weight:600;}

/* ==========================================================================
   17. Vertical rhythm
   --------------------------------------------------------------------------
   Section padding and head margins were tuned for a page with fewer bands.
   With the full set in place the page read as mostly gaps, so every vertical
   interval tightens by roughly a quarter.
   ========================================================================== */
.ux-section{padding:clamp(40px,4.4vw,64px) 0;}
.ux-caps{padding:clamp(40px,4.6vw,66px) 0;}
.ux-convert{padding:clamp(38px,4.4vw,62px) 0;}
.ux-hero-grid{padding-top:clamp(34px,4vw,58px);padding-bottom:clamp(34px,4vw,58px);}
.ux-section-head,.ux-band-head{margin-bottom:clamp(22px,2.4vw,32px);}
.ux-split+.ux-split{margin-top:clamp(34px,3.6vw,52px);}
.ux-split{gap:clamp(22px,3vw,44px);}
.ux-center{margin-top:clamp(20px,2.2vw,28px);}
.ux-band-head p,.ux-section-head p{font-size:15.5px;}

/* ==========================================================================
   18. Panel refinement
   --------------------------------------------------------------------------
   Cards stretch to a shared height with the note pinned to the bottom, so a
   row of them lines up instead of ending at four different places. Bars get
   thinner and the figures get larger — the number is the point, not the bar.
   ========================================================================== */
.ux-panelgrid{align-items:stretch;}
.ux-panel{display:flex;flex-direction:column;padding:20px 22px 18px;}
.ux-panel-note{margin-top:auto;font-size:11.5px;line-height:1.5;}
.ux-panel-head{padding-bottom:12px;margin-bottom:16px;align-items:flex-start;}
.ux-panel-head b{font-size:17px;}
.ux-panel-head small{font-size:11.5px;color:#8d99a8;}

.ux-measure+.ux-measure{margin-top:16px;}
.ux-measure-top{margin-bottom:8px;}
.ux-measure-top h4{color:#c3ccd8;font-weight:600;}
.ux-delta{font-size:16px;}

.ux-bar{grid-template-columns:44px minmax(0,1fr) 72px;gap:9px;}
.ux-bar dt{font-size:11px;color:#7d8899;}
.ux-bar-track{height:11px;}
.ux-bar-fill{border-radius:3px;}
.ux-bar dd{font-size:15.5px;}
.ux-bars{gap:4px;}

.ux-statrow{padding:11px 0;}
.ux-statrow dt{font-size:13.5px;color:#c3ccd8;}
.ux-statrow dd{font-size:24px;}

/* The avatar is a span inside a figcaption, so it has to outrank the generic
   caption-span treatment in every context it appears. */
.ux-review-avatar,
.ux-review figcaption .ux-review-avatar,
.ux-convert-quote figcaption .ux-review-avatar{
  display:flex !important;
  align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;border-radius:50%;
  font-size:15px !important;line-height:1 !important;font-weight:700;
  color:#fff !important;
}
.ux-review .ux-review-avatar{background:var(--ux-navy-2);}
.ux-convert .ux-review-avatar{background:rgba(255,255,255,.16);}

/* Carried-over kickers wear the same rule-dash + tracked caps costume the new
   ones just shed; match them so the page reads as one voice. */
.rf3-kicker,.rf-kicker{
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:14px !important;
  font-weight:600 !important;
  gap:0 !important;
}
.rf3-kicker::before,.rf-kicker::before{display:none !important;}

/* Carried-over display headings ran to four lines in narrow columns. */
.rf3-founder-copy h2{font-size:clamp(26px,3.2vw,40px) !important;line-height:1.08;letter-spacing:-.028em;}
.rf3-faq-grid h2.rf3-title{font-size:clamp(26px,3.2vw,40px) !important;line-height:1.08;}
@media (min-width:940px){
  /* The photo column was wider than the photo, leaving a dead margin. */
  .rf3-founder-grid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr) !important;gap:clamp(28px,3.4vw,48px) !important;}
}
.rf3-founder-photo img{width:100%;height:auto;}

/* ==========================================================================
   19. Mobile hero order
   --------------------------------------------------------------------------
   Stacked, the copy column ran headline → subhead → three bullets → button →
   phone before the form appeared, pushing the one thing the page is asking
   for about a screen and a half down. `display:contents` promotes the copy
   block's children to grid items so the form can sit directly under the
   subhead, with the supporting proof following it.
   ========================================================================== */
@media (max-width:960px){
  .ux-hero-copy{display:contents;}
  .ux-hero h1{order:1;}
  .ux-hero-sub{order:2;margin-bottom:20px;font-size:16.5px;line-height:1.5;}
  .ux-leadcard{order:3;}
  .ux-hero-points{order:4;margin:22px 0 0;gap:9px;}
  .ux-hero-points li{font-size:14.5px;line-height:1.4;}
  .ux-hero-actions{order:5;margin-top:20px;}
  .ux-hero-grid{gap:0;}
  .ux-hero h1{font-size:clamp(30px,8.4vw,40px);margin-bottom:14px;}
}

/* The last two tracked-caps micro-labels on the page. */
.ux-hero-phone small,
.ux-convert-phone small{
  letter-spacing:0;
  text-transform:none;
  font-size:12.5px;
  font-weight:500;
  color:rgba(255,255,255,.62);
}

/* Placeholders were light enough to read as filled-in values at a glance. */
.ux-form input::placeholder,.ux-form textarea::placeholder{color:#767f89;opacity:1;}
.ux-form select{color:#767f89;}
.ux-form select:valid{color:var(--ux-navy-2);}

/* ==========================================================================
   20. Editorial rows
   --------------------------------------------------------------------------
   Replaces the equal-width card grid that repeated on every interior page:
   three or four identical boxes, icon on top, centred. Each item is now a
   full-width asymmetric row — index and title in a narrow column, substance
   in a wider one — separated by hairlines rather than boxed.
   ========================================================================== */
.ux-rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rfb-line,#ddd6c9);}
.ux-row{
  display:grid;
  grid-template-columns:38px minmax(0,0.82fr) minmax(0,1.5fr);
  gap:clamp(14px,2.4vw,34px);
  align-items:start;
  padding:clamp(20px,2.4vw,30px) 0;
  border-bottom:1px solid var(--rfb-line,#ddd6c9);
}
.ux-row-num{
  font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:700;font-size:14px;line-height:1.5;
  color:var(--rfb-orange-dark,#bd3f16);
  font-variant-numeric:tabular-nums;
}
.ux-row-title{min-width:0;}
.ux-row-title h3{
  margin:0;
  font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-weight:700;font-size:clamp(18px,1.9vw,22px);line-height:1.2;
  letter-spacing:-.018em;color:var(--ux-navy-2);text-wrap:balance;
}
.ux-row-meta{
  display:block;margin-top:7px;
  font-size:12.5px;line-height:1.4;color:#7c848d;
}
.ux-row-body{min-width:0;}
.ux-row-body>*:first-child{margin-top:0;}
.ux-row-body>*:last-child{margin-bottom:0;}
.ux-row-body p{margin:0 0 10px;font-size:15.5px;line-height:1.62;color:#4d5866;max-width:62ch;}
/* The old checklist rows were inline-styled flex divs; they keep working and
   just get tighter spacing and a two-up grid at width. */
.ux-row-body>div{font-size:14.5px;line-height:1.45;color:#3f4a56;}
.ux-row-checks{display:grid;gap:7px;margin-top:4px;}
.ux-row:hover .ux-row-num{color:var(--ux-orange);}

/* On dark sections the same rows invert. */
.rf-tone-ink .ux-rows,[style*="background:#1E2A3A" i] .ux-rows{border-top-color:rgba(255,255,255,.16);}
.rf-tone-ink .ux-row,[style*="background:#1E2A3A" i] .ux-row{border-bottom-color:rgba(255,255,255,.16);}
.rf-tone-ink .ux-row-title h3,[style*="background:#1E2A3A" i] .ux-row-title h3{color:#fff;}
.rf-tone-ink .ux-row-body p,[style*="background:#1E2A3A" i] .ux-row-body p{color:rgba(255,255,255,.78);}
.rf-tone-ink .ux-row-num,[style*="background:#1E2A3A" i] .ux-row-num{color:var(--rfb-orange-light,#f79a6e);}

@media (max-width:760px){
  .ux-row{grid-template-columns:30px minmax(0,1fr);gap:10px 12px;padding:18px 0;}
  .ux-row-body{grid-column:2;}
  .ux-row-title h3{font-size:18px;}
}

/* Section heads on interior pages were centred blocks; left-align them so the
   page has one reading edge. */
main section h2[style]{text-wrap:balance;}

/* ==========================================================================
   21. Left-align the interior pages
   --------------------------------------------------------------------------
   Interior heroes and section heads were centred blocks with an auto-margin
   paragraph under them, which is the layout every templated page uses. They
   now share the one reading edge the rest of the page has. Dark CTA bands
   keep their centring: a full-width band is a deliberate change of rhythm,
   not the default.
   ========================================================================== */
main section:not(.ux-caps):not(.ux-convert) [style*="text-align:center"]{
  text-align:left !important;
}
main section:not(.ux-caps):not(.ux-convert) [style*="text-align:center"]>p,
main section:not(.ux-caps):not(.ux-convert) [style*="text-align:center"]>h1,
main section:not(.ux-caps):not(.ux-convert) [style*="text-align:center"]>h2{
  margin-left:0 !important;
  margin-right:0 !important;
}
/* The hero paragraph was capped at 640px and centred under a wider heading;
   left-aligned it just needs a sane measure. */
main section [style*="text-align:center"]>p[style*="max-width"]{max-width:62ch !important;}

/* Auto section nav: it wore the same tracked-caps costume and sat too tall. */
.rf3-section-nav a{
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  white-space:nowrap;
}
.rf3-section-nav-inner{gap:clamp(14px,2vw,28px);padding-top:10px;padding-bottom:10px;overflow-x:auto;}

/* ==========================================================================
   22. Header space
   --------------------------------------------------------------------------
   Interior heroes still reserved a full screen for four lines of type.
   ========================================================================== */
main>section:first-of-type>div[style*="padding"]{
  padding-top:clamp(22px,2.6vw,38px) !important;
  padding-bottom:clamp(28px,3.4vw,48px) !important;
}
.ux-hero-grid{padding-top:clamp(26px,3vw,44px);padding-bottom:clamp(26px,3vw,44px);}
main section [style*="text-align:center"]>h1,
main>section:first-of-type h1[style]{margin-bottom:12px !important;}

/* ==========================================================================
   23. Aspect-ratio images
   --------------------------------------------------------------------------
   These <img> tags carry width/height attributes for layout stability. Those
   attributes are presentational hints, so when a rule sets aspect-ratio but
   never sets height, the attribute wins and the ratio is ignored — the proof
   gallery was rendering 372px wide by 1002px tall. Any image whose ratio is
   declared needs height:auto for that ratio to govern.
   ========================================================================== */
.rf-proof-figure img,
.ux-proof-media img,
.rf3-project img,
.rf3-work-index-media img{height:auto;}
.ux-proof-media img,.rf3-project img{height:100%;}

/* Selected-work card media placeholder: used until an approved live capture
   is available for a project. Mirrors .rf3-work-index-placeholder on /case-studies. */
.ux-proof-media--ph{
  display:flex;flex-direction:column;justify-content:flex-end;gap:9px;
  padding:26px 24px;background:var(--ux-navy-2,#1e2a3a);color:#fff;
}
.ux-proof-media--ph strong{
  font-family:var(--rfb-display,"Archivo",Arial,sans-serif);
  font-size:clamp(24px,3vw,34px);line-height:1;letter-spacing:-.035em;max-width:14ch;
}
.ux-proof-media--ph small{font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.72);}

/* Hide the placeholder caption text once a real capture loads into the slot. */
.ux-proof-media:not(.ux-proof-media--ph) strong,
.ux-proof-media:not(.ux-proof-media--ph) small{display:none;}