/* ==========================================================================
   rigid-frame.css — styles for the /rigid-frame/ section ONLY.

   EVERY selector here is prefixed `.rf`, and the section's markup is wrapped in
   <div class="rf"> by includes/rigid-frame/head.php. That is deliberate: this
   began as a standalone site's whole-page stylesheet and still styles headings,
   tables, buttons, and cards. Unscoped, it would restyle the shared site header
   and its CTA on section pages only — which reads as a bug, not a design.

   If you add a rule, prefix it. If you remove the wrapper the section loses its
   styling entirely; that is the intended failure mode, not a silent global leak.
   ========================================================================== */

/* ==========================================================================
   RigidBuildings.com

   Visual brief: this is a reference, not a landing page. It should read like
   something an engineer would keep a tab open on - dense, quiet, numeric.
   The accent is oxide red, after the red iron primer on PEMB primary framing.
   Numbers use tabular figures everywhere so columns of them line up.
   ========================================================================== */

.rf{
  --ink:        #14181d;
  --ink-2:      #3d4650;
  --ink-3:      #6b7684;
  --line:       #dfe4ea;
  --line-2:     #eef1f4;
  --bg:         #ffffff;
  --bg-2:       #f6f8fa;
  --bg-3:       #eef1f5;

  --iron:       #a33f2c;   /* red iron primer */
  --iron-dk:    #862f1f;
  --iron-lt:    #fbf0ed;
  --steel:      #1f2933;   /* header, footer */
  --steel-2:    #2c3742;

  --ok:         #1c6b4a;
  --warn:       #8a5a10;
  --warn-bg:    #fdf6e8;

  --wrap:       1120px;
  --r:          6px;
  --sp:         1rem;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

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

.rf{ -webkit-text-size-adjust: 100%; }

.rf{
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

.rf h1, .rf h2, .rf h3, .rf h4{ line-height: 1.22; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.011em; }
.rf h1{ font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -.021em; }
.rf h2{ font-size: clamp(1.3rem, 2.4vw, 1.65rem); }
.rf h3{ font-size: 1.1rem; }
.rf p{ margin: 0 0 1em; }
.rf a{ color: var(--iron); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.rf a:hover{ color: var(--iron-dk); }
.rf strong{ font-weight: 650; }
.rf small{ font-size: .84rem; }
.rf code, .rf kbd{ font-family: var(--mono); font-size: .9em; }

.rf .wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.rf .narrow{ max-width: 46rem; }

.rf .skip{
  position: absolute; left: -9999px;
  background: var(--steel); color: #fff; padding: .6rem 1rem; z-index: 50;
}
.rf .skip:focus{ left: .5rem; top: .5rem; }

.rf :where(a, .rf button, .rf input, .rf select, .rf textarea):focus-visible{
  outline: 2px solid var(--iron);
  outline-offset: 2px;
}

/* ---------- Header ---------- */

.rf .site-head{
  background: var(--steel);
  color: #fff;
  border-bottom: 3px solid var(--iron);
}
.rf .head-in{ display: flex; align-items: center; gap: 1rem; min-height: 68px; }

.rf .brand{ display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.rf .brand-mark{ color: var(--iron); display: flex; flex: none; }
.rf .brand-txt{ display: flex; flex-direction: column; line-height: 1.15; }
.rf .brand-txt strong{ font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.rf .brand-txt .tld{ color: #8f9aa6; font-weight: 500; }
.rf .brand-txt em{
  font-style: normal; font-size: .68rem; letter-spacing: .07em;
  text-transform: uppercase; color: #93a0ad;
}

.rf .site-nav{ margin-left: auto; }
.rf .site-nav ul{ display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.rf .site-nav a{
  display: block; padding: .5rem .7rem; border-radius: var(--r);
  color: #d5dce3; text-decoration: none; font-size: .93rem; font-weight: 550;
}
.rf .site-nav a:hover{ background: var(--steel-2); color: #fff; }
.rf .site-nav a.on{ color: #fff; box-shadow: inset 0 -2px 0 var(--iron); }

.rf .nav-btn{
  display: none; margin-left: auto; width: 42px; height: 38px;
  background: none; border: 1px solid #46525f; border-radius: var(--r); cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.rf .nav-btn span{ display: block; width: 18px; height: 2px; background: #cfd6dd; }

/* ---------- Buttons ---------- */

.rf .btn{
  display: inline-block; padding: .65rem 1.15rem;
  background: var(--iron); color: #fff !important;
  border: 1px solid var(--iron); border-radius: var(--r);
  font: inherit; font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer; text-align: center;
}
.rf .btn:hover{ background: var(--iron-dk); border-color: var(--iron-dk); }
.rf .btn-sm{ padding: .45rem .85rem; font-size: .9rem; }
.rf .btn-lg{ padding: .8rem 1.5rem; font-size: 1.02rem; width: 100%; }
.rf .btn-ghost{
  background: transparent; color: var(--iron) !important; border-color: var(--line);
}
.rf .btn-ghost:hover{ background: var(--iron-lt); border-color: var(--iron); }

/* ---------- Breadcrumbs ---------- */

.rf .crumbs{ background: var(--bg-2); border-bottom: 1px solid var(--line); font-size: .85rem; }
.rf .crumbs ol{ display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: .6rem 0; }
.rf .crumbs li + li::before{ content: "/"; color: var(--ink-3); margin-right: .4rem; }
.rf .crumbs a{ color: var(--ink-2); }
.rf .crumbs [aria-current]{ color: var(--ink-3); }

/* ---------- Hero ---------- */

.rf .hero{ background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 2.5rem 0; }
.rf .hero h1{ max-width: 24ch; }
.rf .hero .lede{ font-size: 1.12rem; color: var(--ink-2); max-width: 60ch; margin-bottom: 0; }
.rf .eyebrow{
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--iron); font-weight: 700; margin: 0 0 .6rem;
}

.rf section{ padding: 2.5rem 0; }
.rf section.tight{ padding: 1.5rem 0; }
.rf section + section{ border-top: 1px solid var(--line-2); }

/* ---------- Calculator ---------- */

.rf .calc{ display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }

/* Grid items default to min-width:auto, which refuses to shrink below their
   min-content width. A `min-width: 30rem` table inside a grid item therefore
   widens its own track and pushes the whole page into horizontal scroll — even
   though the table sits in an overflow-x:auto wrapper that looks like it should
   contain it. This is why the tracks are minmax(0, …) and the items get an
   explicit min-width: 0. Removing either brings the overflow straight back. */
.rf .calc > *{ min-width: 0; }

@media (min-width: 900px) {
  .rf .calc{ grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 2rem; }
  .rf .calc-in{ position: sticky; top: 1rem; }
}

.rf .calc-in{
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.25rem;
}
.rf .calc-in h2{ font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }

.rf .f{ margin-bottom: .9rem; }
.rf .f label{ display: block; font-size: .86rem; font-weight: 600; margin-bottom: .28rem; }
.rf .f .hint{ display: block; font-weight: 400; color: var(--ink-3); font-size: .8rem; }
.rf .f input[type="number"], .rf .f input[type="text"], .rf .f select{
  width: 100%; padding: .5rem .6rem; font: inherit; font-size: .95rem;
  border: 1px solid #c8d0d9; border-radius: var(--r); background: #fff; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rf .f-row{ display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.rf .f-check{ display: flex; gap: .55rem; align-items: flex-start; margin-bottom: .7rem; font-size: .89rem; }
.rf .f-check input{ margin: .28rem 0 0; flex: none; }
.rf .f-check label{ font-weight: 500; }

/* Result cards */

.rf .res-grid{ display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rf .res{
  border: 1px solid var(--line); border-left: 3px solid var(--iron);
  border-radius: var(--r); padding: .9rem 1rem; background: #fff;
}
.rf .res .k{
  font-size: .72rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin: 0 0 .3rem;
}
.rf .res .v{ font-size: 1.5rem; font-weight: 680; font-family: var(--mono); letter-spacing: -.02em; margin: 0; }
.rf .res .u{ font-size: .85rem; color: var(--ink-3); font-weight: 500; font-family: var(--sans); }
.rf .res .sub{ font-size: .82rem; color: var(--ink-3); margin: .25rem 0 0; }

.rf .verdict{
  border: 1px solid var(--line); border-top: 4px solid var(--iron);
  border-radius: var(--r); padding: 1.25rem; background: #fff; margin-bottom: 1.25rem;
}
.rf .verdict .k{
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin: 0 0 .2rem;
}
.rf .verdict h2, .rf .verdict .pick{ font-size: 1.55rem; margin: 0 0 .6rem; letter-spacing: -.02em; }
.rf .verdict ul{ margin: 0; padding-left: 1.15rem; }
.rf .verdict li{ margin-bottom: .4rem; }
.rf .verdict li:last-child{ margin-bottom: 0; }

/* ---------- Tables ---------- */

.rf .t-scroll{ overflow-x: auto; margin: 0 0 1rem; -webkit-overflow-scrolling: touch; }
.rf table.data{ width: 100%; min-width: 30rem; border-collapse: collapse; font-size: .92rem; }
.rf table.data caption{
  text-align: left; font-size: .82rem; color: var(--ink-3); padding-bottom: .5rem;
}
.rf table.data th, .rf table.data td{
  padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.rf table.data thead th{
  background: var(--bg-3); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); border-bottom: 1px solid #cdd5dd;
}
.rf table.data td.n, .rf table.data th.n{ text-align: right; font-family: var(--mono); white-space: nowrap; }
.rf table.data tbody tr:hover{ background: var(--bg-2); }
.rf table.data tr.hi{ background: var(--iron-lt); }
.rf table.data tr.hi td{ font-weight: 600; }

/* ---------- Callouts ---------- */

.rf .note, .rf .warn, .rf .prov{
  border-radius: var(--r); padding: .85rem 1rem; font-size: .89rem; margin: 0 0 1.25rem;
}
.rf .note{ background: var(--bg-2); border-left: 3px solid var(--ink-3); color: var(--ink-2); }
.rf .warn{ background: var(--warn-bg); border-left: 3px solid var(--warn); color: #5c3d08; }
.rf .prov{ background: var(--iron-lt); border-left: 3px solid var(--iron); color: #6d2a1c; }
.rf .note :last-child, .rf .warn :last-child, .rf .prov :last-child{ margin-bottom: 0; }
.rf .note strong, .rf .warn strong, .rf .prov strong{ font-weight: 700; }

.rf .caveat{ font-size: .82rem; color: var(--ink-3); margin: .75rem 0 0; }

/* ---------- Cards / lists ---------- */

.rf .cards{ display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rf .card{
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem;
  background: #fff; text-decoration: none; color: inherit; display: block;
}
.rf .card:hover{ border-color: var(--iron); }
.rf .card h3{ margin-bottom: .35rem; }
.rf .card p{ font-size: .9rem; color: var(--ink-2); margin: 0; }
.rf .card .go{ font-size: .85rem; font-weight: 600; color: var(--iron); margin-top: .6rem; display: block; }

.rf dl.gloss{ margin: 0; }
.rf dl.gloss dt{
  font-weight: 650; margin-top: 1.35rem; padding-top: 1.35rem;
  border-top: 1px solid var(--line-2); font-size: 1.05rem;
}
.rf dl.gloss dt:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
.rf dl.gloss dd{ margin: .35rem 0 0; color: var(--ink-2); }
.rf dl.gloss .also{ font-size: .84rem; color: var(--ink-3); margin-top: .35rem; }

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

.rf .lead-form{
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.5rem; background: #fff; max-width: 44rem;
}
.rf .lf-head{ margin-bottom: .3rem; }
.rf .lf-intro{ color: var(--ink-2); font-size: .95rem; }
.rf .lf-carried{ background: var(--iron-lt); border-radius: var(--r); padding: .6rem .8rem; font-size: .9rem; }
.rf .lf-step{ padding-top: 1.1rem; margin-top: 1.1rem; border-top: 1px solid var(--line-2); }
.rf .lf-legend{
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; margin-bottom: .8rem;
}
.rf .lf-row{ display: grid; gap: .8rem; grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .rf .lf-row-2{ grid-template-columns: 1fr 1fr; }
  .rf .lf-row-3{ grid-template-columns: 1fr 1fr 1fr; }
}
.rf .lf-f{ margin-bottom: .8rem; }
.rf .lf-f label{ display: block; font-size: .86rem; font-weight: 600; margin-bottom: .28rem; }
.rf .lf-f .opt{ font-weight: 400; color: var(--ink-3); }
.rf .lf-f input, .rf .lf-f select, .rf .lf-f textarea{
  width: 100%; padding: .58rem .7rem; font: inherit; font-size: .97rem;
  border: 1px solid #c8d0d9; border-radius: var(--r); background: #fff; color: var(--ink);
}
.rf .lf-f textarea{ resize: vertical; }
.rf .lf-f input:invalid:not(:placeholder-shown){ border-color: var(--iron); }

.rf .lf-consent{
  display: flex; gap: .6rem; align-items: flex-start;
  background: var(--bg-2); border-radius: var(--r); padding: .85rem;
  font-size: .82rem; color: var(--ink-2); margin-bottom: 1rem; line-height: 1.5;
}
.rf .lf-consent input{ margin: .2rem 0 0; flex: none; width: 17px; height: 17px; }
.rf .lf-consent label{ font-weight: 400; }
.rf .lf-err{ color: var(--iron-dk); font-size: .88rem; font-weight: 600; margin: .6rem 0 0; }
.rf .lf-err:empty{ display: none; }
.rf .lf-fine{ font-size: .78rem; color: var(--ink-3); margin: .8rem 0 0; }

.rf .hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Footer ---------- */

.rf .site-foot{
  background: var(--steel); color: #b9c3cd; margin-top: 3rem;
  padding: 2.5rem 0 1.75rem; font-size: .9rem;
}
.rf .foot-cols{ display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rf .site-foot h2{
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; margin-bottom: .6rem;
}
.rf .site-foot ul{ list-style: none; margin: 0; padding: 0; }
.rf .site-foot li{ margin-bottom: .35rem; }
.rf .site-foot a{ color: #b9c3cd; text-decoration: none; }
.rf .site-foot a:hover{ color: #fff; text-decoration: underline; }
.rf .foot-note{ font-size: .86rem; line-height: 1.55; }
.rf .foot-note a{ color: #fff; text-decoration: underline; }

.rf .disclaimer{
  margin: 2rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid #3a4653;
  font-size: .82rem; color: #96a2ae;
}
.rf .copyright{ font-size: .78rem; color: #7d8894; margin: 0; }

/* ---------- Small screens ---------- */

@media (max-width: 780px) {
  .rf{ font-size: 16px; }
  .rf .nav-btn{ display: flex; }
  .rf .site-nav{ display: none; width: 100%; order: 3; margin: 0; }
  .rf .site-nav.open{ display: block; }
  .rf .site-nav ul{ flex-direction: column; align-items: stretch; padding-bottom: .75rem; gap: 0; }
  .rf .site-nav a{ padding: .7rem .5rem; border-top: 1px solid #3a4653; border-radius: 0; }
  .rf .head-in{ flex-wrap: wrap; }
  .rf .lead-form, .rf .calc-in{ padding: 1.1rem; }
  .rf section{ padding: 1.85rem 0; }
}

/* ---------- Dark ---------- */

@media (prefers-color-scheme: dark) {
  .rf{
    --ink: #e6eaee; --ink-2: #b3bcc6; --ink-3: #8592a0;
    --line: #2f3843; --line-2: #262e37;
    --bg: #12161b; --bg-2: #181e25; --bg-3: #1f262e;
    --iron: #d4674c; --iron-dk: #e4805f; --iron-lt: #2a1a16;
    --steel: #0d1116; --steel-2: #1b232c;
    --warn-bg: #2a2313;
  }
  .rf .res, .rf .verdict, .rf .card, .rf .lead-form, .rf table.data tbody tr{ background: var(--bg-2); }
  .rf .f input, .rf .f select, .rf .lf-f input, .rf .lf-f select, .rf .lf-f textarea{
    background: var(--bg-3); border-color: #3a4550; color: var(--ink);
  }
  .rf table.data thead th{ background: var(--bg-3); border-bottom-color: #3a4550; }
  .rf .warn{ color: #e8d5a8; }
  .rf .prov{ color: #f0b9a8; }
  .rf .btn{ color: #12161b !important; }
  .rf .site-foot{ color: #98a4b0; }
}

@media print {
  .rf .site-head, .rf .site-foot, .rf .crumbs, .rf .lead-form, .rf .nav-btn{ display: none; }
  .rf{ font-size: 11pt; }
}

/* ==========================================================================
   Host-site integration.

   Everything above came from the standalone site and describes its own look.
   These rules reconcile that with the host: they use the SITE's tokens
   (--navy, --orange, --gray-*, declared on :root in css/style.css and inherited
   into .rf) rather than the section's own, so the section reads as part of
   MetalBuilding.info instead of a page from somewhere else pasted in.
   ========================================================================== */

/* Section sub-navigation.
   Lives inside .rf — see the note in includes/rigid-frame/head.php. Styled after
   the site's own breadcrumb bar so it sits under the header without competing
   with it, with the site's orange as the active marker. */
.rf .rf-subnav {
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.rf .rf-subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rf .rf-subnav a {
  display: block;
  padding: .75rem .95rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.rf .rf-subnav a:hover {
  color: var(--navy);
  background: var(--gray-100);
}
.rf .rf-subnav a.on {
  color: var(--navy);
  border-bottom-color: var(--orange);
}

/* Hero.
   The standalone version was a pale grey band, which is right under a dark
   header of its own and wrong under this site's — it read as an unstyled block.
   This matches the site's .page-hero treatment: navy gradient, white type,
   orange accent on the eyebrow. */
.rf .hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  color: var(--white);
  border-bottom: 0;
  padding: 3.25rem 0 2.75rem;
}
.rf .hero h1 {
  color: var(--white);
  font-weight: 800;
  letter-spacing: -.03em;
}
.rf .hero .lede {
  color: rgba(255, 255, 255, .82);
}
.rf .hero .eyebrow {
  color: var(--orange-light);
}
.rf .hero .lede strong,
.rf .hero .lede a {
  color: var(--white);
}

/* The section's own container width, matched to the site's .container so the
   two do not disagree by a few pixels down the page. */
.rf .wrap {
  max-width: 1200px;
}

@media (prefers-color-scheme: dark) {
  /* The host site is light-only. Do not let the section's dark palette fire
     inside it, or the page splits into a light header and a dark body. */
  .rf {
    --ink: #14181d; --ink-2: #3d4650; --ink-3: #6b7684;
    --line: #dfe4ea; --line-2: #eef1f4;
    --bg: #ffffff; --bg-2: #f6f8fa; --bg-3: #eef1f5;
    --iron: #a33f2c; --iron-dk: #862f1f; --iron-lt: #fbf0ed;
    --warn-bg: #fdf6e8;
  }
  .rf .res, .rf .verdict, .rf .card, .rf .lead-form, .rf table.data tbody tr { background: #fff; }
  .rf .btn { color: #fff !important; }
}

/* The host's .btn sets `white-space: nowrap`. The section's scoped `.rf .btn`
   wins on specificity only for the properties it declares, and it did not
   declare that one — so the calculator's hand-off button, whose label carries
   the full geometry ("Get engineered quotes for a 120 x 200 x 24 ft building"),
   refused to wrap and pushed the page 85px wide at 375px. */
.rf .btn {
  white-space: normal;
  max-width: 100%;
}

/* ==========================================================================
   Quote form.

   The form is the point of its page, so it gets the dominant column and the
   guidance becomes a quiet aside beside it. Everything here is built from the
   HOST's tokens — navy header, orange focus — because a lead form that looks
   borrowed from another site is a form people do not trust with a phone number.
   ========================================================================== */

.rf .rf-quote {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.rf .rf-quote > * { min-width: 0; }

@media (min-width: 940px) {
  .rf .rf-quote {
    /* Form dominant, guidance supporting — the inverse of what .calc does. */
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
  .rf .rf-quote-aside { position: sticky; top: 1.5rem; }
}

/* The aside recedes: smaller, quieter, clearly secondary to the form. */
.rf .rf-quote-aside { font-size: .935rem; color: var(--gray-600); }
.rf .rf-quote-aside h2 { font-size: 1.15rem; color: var(--navy); }
.rf .rf-quote-aside li { margin-bottom: .6rem; }
.rf .rf-quote-aside strong { color: var(--gray-800); }

/* ---------- The card ---------- */

.rf .lead-form {
  max-width: none;                /* the grid column decides the width now */
  padding: 0;                     /* the band and body carry their own */
  overflow: hidden;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  background: var(--white);
}

.rf .lf-top {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 1.5rem 1.75rem 1.35rem;
}
.rf .lf-head {
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .35rem;
}
.rf .lf-intro {
  color: rgba(255, 255, 255, .78);
  font-size: .95rem;
  margin: 0;
}

.rf .lf-body { padding: 1.6rem 1.75rem 1.75rem; counter-reset: rfstep; }

/* Arriving from a calculator: show the geometry that carried across, so the
   pre-filled fields do not look like the form guessed. */
.rf .lf-carried {
  background: var(--gray-50);
  border: 1px dashed var(--gray-300);
  border-radius: var(--radius);
  padding: .7rem .9rem;
  font-size: .9rem;
  color: var(--gray-700);
  margin: 0 0 1.35rem;
}
.rf .lf-carried strong { color: var(--navy); font-family: var(--mono); }

/* ---------- Steps ---------- */

.rf .lf-step {
  counter-increment: rfstep;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}
.rf .lf-step:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }

.rf .lf-legend {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}
/* Numbered from a counter rather than markup, so reordering the steps cannot
   leave the numbers lying. */
.rf .lf-legend::before {
  content: counter(rfstep);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* ---------- Fields ---------- */

.rf .lf-row { gap: 1rem; }
.rf .lf-f { margin-bottom: 1rem; }
.rf .lf-f label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: .35rem;
}
.rf .lf-f .opt { font-weight: 400; color: var(--gray-400); }

.rf .lf-f input,
.rf .lf-f select,
.rf .lf-f textarea {
  padding: .7rem .8rem;
  font-size: 1rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--gray-900);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rf .lf-f input:hover,
.rf .lf-f select:hover,
.rf .lf-f textarea:hover { border-color: var(--gray-400); }

.rf .lf-f input:focus,
.rf .lf-f select:focus,
.rf .lf-f textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(224, 123, 42, .18);
}
/* Numeric answers line up when they are tabular. */
.rf .lf-f input[type="number"],
.rf .lf-f input[type="tel"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* The three geometry fields are one decision, so they read as one block. */
.rf .lf-step[data-step="1"] .lf-row-3 {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1rem 1rem .1rem;
  margin-bottom: 1rem;
}

/* ---------- Consent and submit ---------- */

/* Kept fully legible on purpose. This paragraph is the evidence that the call
   was authorised; shrinking it to get it out of the way would defeat it. */
.rf .lf-consent {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: .95rem 1rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--gray-600);
  margin-bottom: 1.25rem;
}
.rf .lf-consent input { width: 18px; height: 18px; accent-color: var(--orange); margin-top: .15rem; }
.rf .lf-consent a { color: var(--steel); }

.rf .lead-form .btn-lg {
  width: 100%;
  padding: .9rem 1.5rem;
  font-size: 1.03rem;
  font-weight: 700;
  border-radius: var(--radius);
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white) !important;
  box-shadow: 0 2px 8px rgba(224, 123, 42, .28);
  transition: background .15s ease, box-shadow .15s ease, transform .08s ease;
}
.rf .lead-form .btn-lg:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  box-shadow: 0 4px 14px rgba(224, 123, 42, .34);
}
.rf .lead-form .btn-lg:active { transform: translateY(1px); }
.rf .lead-form .btn-lg[disabled] { opacity: .65; box-shadow: none; cursor: default; }

.rf .lf-err {
  background: #fdecea;
  border-left: 3px solid #c0392b;
  border-radius: var(--radius-sm);
  padding: .6rem .75rem;
  color: #8f2d22;
  font-size: .88rem;
  font-weight: 600;
  margin: .85rem 0 0;
}
.rf .lf-fine { font-size: .8rem; color: var(--gray-500); margin: .9rem 0 0; text-align: center; }

@media (max-width: 620px) {
  .rf .lf-top { padding: 1.25rem 1.15rem 1.1rem; }
  .rf .lf-body { padding: 1.25rem 1.15rem 1.4rem; }
  .rf .lf-step[data-step="1"] .lf-row-3 { padding: .85rem .85rem .05rem; }
}

/* Conversion actions carry the host's orange; navigation inside the section
   keeps its own oxide red. The distinction is deliberate — "get quotes" is the
   same action as the header CTA and should look like it, while "open the full
   selector" is just a link with a box round it. */
.rf [data-quote-link] {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white) !important;
  box-shadow: 0 2px 8px rgba(224, 123, 42, .28);
}
.rf [data-quote-link]:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
}

/* ==========================================================================
   Frame elevations.

   The drawings inherit currentColor, so the colour is set by whatever they sit
   in — near-white on the navy hero, muted navy on a white card — and one set of
   geometry serves both. Nothing here sets a fill or stroke colour directly.
   ========================================================================== */

.rf .rf-fig,
.rf .rf-hero-fig { display: block; width: 100%; height: auto; overflow: visible; }

.rf .rf-fig-t {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  fill: currentColor;
  opacity: .75;
  text-transform: uppercase;
}

/* ---------- Hero ---------- */

.rf .rf-hero-split .wrap {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.rf .rf-hero-art {
  color: rgba(255, 255, 255, .9);
  max-width: 460px;
  width: 100%;
  justify-self: center;
}
.rf .rf-hero-art .rf-fig-t { font-size: 11px; opacity: .62; }

@media (min-width: 900px) {
  .rf .rf-hero-split .wrap {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: 3rem;
  }
  .rf .rf-hero-copy h1 { max-width: 18ch; }
}

/* Below the copy on small screens the drawing is decoration competing for the
   fold, so it goes. The page loses nothing: every term it labels is defined in
   the text underneath. */
@media (max-width: 640px) {
  .rf .rf-hero-art { display: none; }
}

/* ---------- Frame type cards ---------- */

.rf .rf-frame-card { display: flex; flex-direction: column; }
.rf .rf-frame-card-fig {
  color: var(--navy);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: .5rem .35rem .15rem;
  margin-bottom: .9rem;
}
.rf .rf-frame-card:hover .rf-frame-card-fig {
  background: #fff;
  border-color: var(--orange);
}
.rf .rf-frame-card-fig .rf-fig { transition: transform .25s ease; }
.rf .rf-frame-card:hover .rf-frame-card-fig .rf-fig { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .rf .rf-frame-card-fig .rf-fig { transition: none; }
  .rf .rf-frame-card:hover .rf-frame-card-fig .rf-fig { transform: none; }
}