/* ARFloors — design option B "Broadsheet", owner-approved 2026-08-09.
 *
 * ⛔ A DIFFERENT ARCHITECTURE, not a repalette. The owner's standing note 2026-08-09: the round had
 * become one template in four palettes. B is a centred MASTHEAD with rules and a serif display
 * face, the nav below the wordmark rather than beside it, and the hero as a wide band UNDER the
 * masthead — the headline sits on paper, never over the photograph. XSITE-OK
 *
 * Load-bearing details, do not remove:
 *   1. `body.ar-page a{color:inherit}` (0,1,2) OUTRANKS `.ar-btn` (0,1,0). Button colour must be
 *      set at `body.ar-page a.ar-btn`.
 *   2. The theme ships `img{height:auto}`, which beats `height:100%` on the hero image.
 *   3. The estimator RESULT block needs LAYOUT rules, not just colour.
 *   4. The hero band's object-position is tuned to the CURRENT photograph — a centred crop of a
 *      room fills a short wide band with wall. Re-check it whenever the hero changes.
 */

:root{
  --ar-ink:#1C1A17;
  --ar-mut:#6A6459;
  --ar-paper:#F7F4EC;    /* newsprint cream */
  --ar-sand:#EEEADE;
  --ar-red:#7C2B22;      /* oxblood — the masthead accent */
  --ar-red-dk:#65221B;
  --ar-line:#D9D3C4;
}

/* ---------------------------------------------------------------- WordPress scaffolding
   GeneratePress's own header, nav and footer are replaced wholesale. */
body.ar-page .site-header,
body.ar-page .main-navigation,
body.ar-page .site-footer{ display:none !important; }

body.ar-page{
  margin:0; background:var(--ar-paper); color:var(--ar-ink);
  font:16.5px/1.66 "Inter",ui-sans-serif,system-ui,-apple-system,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.ar-page .site.grid-container,
body.ar-page .site-content,
body.ar-page .content-area,
body.ar-page .site-main{ max-width:100%; width:100%; padding:0; margin:0; }
body.ar-page .site-content{ display:block; }
body.ar-fullbleed .inside-article{ padding:0; background:transparent; border:0; box-shadow:none; }
body.ar-fullbleed .entry-header{ display:none; }
body.ar-fullbleed .entry-content{ margin:0; }

body.ar-page h1, body.ar-page h2, body.ar-page h3, body.ar-page h4{
  margin:0; font-weight:640; letter-spacing:-.022em; line-height:1.12;
}
body.ar-page a{ color:inherit; }
.ar-wrap{ max-width:1180px; margin:0 auto; padding:0 26px; }

/* numbers get a plate serif — the one typographic signature of this site */
.ar-num-face{ font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; }

/* ---------------------------------------------------------------- header */
.ar-hdr{ background:rgba(251,247,240,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--ar-line); color:var(--ar-ink); position:sticky; top:0; z-index:30; }
.ar-hdr .ar-wrap{ display:flex; align-items:center; gap:30px; height:74px; }
.ar-brand{ text-decoration:none; display:flex; flex-direction:column; gap:3px; line-height:1; }
.ar-brand .bn{ font:750 22px/1 inherit; letter-spacing:-.035em; color:var(--ar-ink); }
.ar-brand .bn em{ font-style:normal; color:var(--ar-red); }
.ar-brand .bs{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ar-mut);
  display:flex; gap:8px; white-space:nowrap; }
.ar-brand .bmotto{ text-transform:none; letter-spacing:.01em; font-size:11px; font-style:italic; }
.ar-nav{ margin-left:auto; display:flex; gap:26px; font-size:14.5px; color:var(--ar-mut);
  list-style:none; margin-block:0; padding:0; }
.ar-nav a{ text-decoration:none; padding:5px 0; border-bottom:2px solid transparent; }
.ar-nav a:hover{ border-color:var(--ar-red); color:var(--ar-red); }
.ar-navtoggle{ display:none; margin-left:auto; background:none; border:1px solid var(--ar-line);
  color:var(--ar-ink); border-radius:99px; padding:9px 15px; font:14px inherit; cursor:pointer; }

/* nav submenus — the design-round mockups had a FLAT nav, so these rules did not exist until
   real pages grew children and every child rendered inline at scrollWidth 2027. */
.ar-nav > li{ position:relative; }
.ar-nav > li > a{ display:flex; align-items:center; gap:7px; }
.ar-caret{ width:7px; height:7px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.6; }
.ar-sub{ position:absolute; top:100%; left:-14px; min-width:242px; background:var(--ar-paper);
  border:1px solid var(--ar-line); border-radius:4px; padding:8px; display:none;
  box-shadow:0 16px 36px rgba(36,28,21,.14); }
.ar-nav > li:hover > .ar-sub, .ar-nav > li:focus-within > .ar-sub{ display:block; }
.ar-sub a{ display:block; padding:9px 12px; text-decoration:none; color:var(--ar-ink);
  font-size:14.5px; border-bottom:0; border-radius:3px; }
.ar-sub a:hover{ background:var(--ar-sand); color:var(--ar-red); }

/* ---------------------------------------------------------------- hero (C: full-bleed photo,
   headline OVERLAID). Dual gradient: bottom for depth, left so the type column keeps a dark
   ground even where the photograph is bright. Measured at 5.62:1 on the design round. */
.ar-hero{ position:relative; min-height:clamp(440px,56vw,620px); display:flex; align-items:flex-end;
  background:#20261F; padding:0; }
.ar-hero.sm{ min-height:clamp(300px,34vw,430px); }
.ar-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ar-hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,22,16,.30) 0 28%,rgba(12,18,13,.93)),
             linear-gradient(96deg,rgba(14,20,15,.72) 0 32%,rgba(14,20,15,.32) 60%,rgba(14,20,15,.04)); }
.ar-hero .ar-wrap{ position:relative; z-index:2; padding:112px 26px 50px; }
.ar-hero .inner{ max-width:60ch; }
.ar-hero h1{ font-size:clamp(31px,4.4vw,52px); line-height:1.06; color:#fff; }
.ar-hero p{ margin:16px 0 0; color:#DCE7DC; font-size:18px; max-width:52ch; }
.ar-eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
  color:#A9D8BE; margin-bottom:14px; }

/* ---------------------------------------------------------------- buttons */
.ar-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.ar-btn{ display:inline-block; background:var(--ar-red); color:#fff; text-decoration:none;
  padding:14px 26px; font:650 15px/1 inherit; border-radius:3px; }
.ar-btn:hover{ background:var(--ar-red-dk); }
.ar-btn.alt{ background:transparent; border:1px solid rgba(251,247,240,.44); color:#FBF7F0; }
.ar-btn.alt:hover{ border-color:#fff; }
/* ⚠️ `body.ar-page a{color:inherit}` outranks `.ar-btn`. Set it at matching specificity or every
   button inherits its surroundings — this shipped as a 1.92:1 failure on the previous site. */
body.ar-page a.ar-btn{ color:#fff; }
body.ar-page a.ar-btn.alt{ color:#FBF7F0; }
body.ar-page a.ar-btn:hover{ color:#fff; }

/* ---------------------------------------------------------------- sections */
.ar-sec{ padding:66px 0; border-bottom:1px solid var(--ar-line); }
.ar-sec.alt{ background:var(--ar-sand); }
.ar-sec.dark{ background:var(--ar-ink); color:#EADFCF; border-bottom:0; }
.ar-sec.dark h2{ color:#fff; }
.ar-num{ font:700 12px/1 inherit; letter-spacing:.2em; color:var(--ar-red); margin-bottom:14px;
  text-transform:uppercase; }
.ar-sec h2{ font-size:clamp(24px,3vw,35px); max-width:22ch; }
.ar-lede{ color:var(--ar-mut); max-width:62ch; margin-top:14px; }
.ar-sec.dark .ar-lede{ color:#C4B4A2; }

/* materials */
.ar-mgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px; }
.ar-mcard{ background:var(--ar-paper); border:1px solid var(--ar-line); border-radius:3px;
  overflow:hidden; text-decoration:none; display:block; }
.ar-mcard img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.ar-mcard .t{ display:block; padding:15px 17px 19px; }
.ar-mcard h3{ font-size:16.5px; }
.ar-mcard p{ margin:6px 0 0; font-size:14px; color:var(--ar-mut); }
.ar-mcard:hover{ border-color:var(--ar-red); }
.ar-mcard:hover h3{ color:var(--ar-red); }

/* rooms */
.ar-rooms{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
.ar-room{ position:relative; overflow:hidden; text-decoration:none; display:block;
  min-height:210px; border-radius:3px; }
.ar-room img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* the label sits on the photo, so the scrim is load-bearing: 17px bold is NOT WCAG "large text"
   (that needs 18.66px), so a shallow scrim is a genuine AA failure, not a pass. */
.ar-room::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(14,18,15,.02) 26%,rgba(9,7,6,.62) 62%,rgba(7,5,4,.96)); }
.ar-room .lab{ position:absolute; left:20px; right:20px; bottom:16px; z-index:2; color:#fff; }
.ar-room .lab h3{ font-size:17px; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.ar-room .lab p{ margin:5px 0 0; font-size:13.5px; color:#E4DACE; }

/* costs */
table.ar-costs{ width:100%; border-collapse:collapse; margin-top:32px; font-size:16px; }
table.ar-costs th{ text-align:left; font:700 11px/1 inherit; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ar-mut); padding:0 0 12px;
  border-bottom:2px solid var(--ar-ink); }
table.ar-costs td{ padding:14px 0; border-bottom:1px solid var(--ar-line); }
table.ar-costs td.p{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600;
  white-space:nowrap; color:var(--ar-red-dk);
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; font-size:17px; }
table.ar-costs td.u{ text-align:right; color:var(--ar-mut); font-size:13px; width:92px; }
.ar-disclaimer{ margin-top:18px; font-size:13.5px; color:var(--ar-mut); max-width:66ch; }

/* facts */
.ar-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:34px;
  border-top:2px solid var(--ar-ink); border-bottom:1px solid var(--ar-line); }
.ar-facts div{ padding:24px 22px 24px 0; border-right:1px solid var(--ar-line); }
.ar-facts div:last-child{ border-right:0; }
.ar-facts .n{ font:600 clamp(21px,2.6vw,30px)/1 "Iowan Old Style","Palatino Linotype",Georgia,serif;
  color:var(--ar-clay); letter-spacing:-.01em; }
.ar-facts p{ margin:8px 0 0; font-size:13.5px; color:var(--ar-mut); max-width:24ch; }

/* Arkansas notes */
.ar-notes{ margin-top:32px; display:grid; gap:0; }
.ar-note-row{ display:grid; grid-template-columns:34px 1fr; gap:20px; padding:22px 0;
  border-bottom:1px solid var(--ar-line); }
.ar-note-row .k{ font:700 13px/1 "Iowan Old Style",Georgia,serif; color:var(--ar-red);
  letter-spacing:.04em; }
.ar-note-row h3{ font-size:18px; }
.ar-note-row p{ margin:8px 0 0; font-size:15.5px; color:var(--ar-mut); }
.ar-notes .c{ background:var(--ar-paper); border:1px solid var(--ar-line); border-radius:3px;
  padding:24px; }
.ar-notes .c h3{ font-size:18px; }
.ar-notes .c p{ margin:9px 0 0; font-size:15px; color:var(--ar-mut); }

/* a dated callout */
.ar-alert{ background:var(--ar-ink); color:#EADFCF; padding:26px 28px; margin-top:34px;
  border-radius:3px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; }
.ar-alert .tag{ background:var(--ar-red); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; padding:7px 12px; white-space:nowrap;
  border-radius:99px; }
.ar-alert h3{ font-size:19px; color:#fff; }
.ar-alert p{ margin:9px 0 0; font-size:15.5px; color:#C4B4A2; max-width:74ch; }

/* cities */
.ar-cities{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.ar-cities a{ background:var(--ar-paper); border:1px solid var(--ar-line); border-radius:3px;
  padding:10px 19px; text-decoration:none; font-size:15.5px; }
.ar-cities a:hover{ border-color:var(--ar-red); color:var(--ar-red); }

/* faq */
.ar-faq{ margin-top:30px; max-width:76ch; }
.ar-faq details{ border-bottom:1px solid var(--ar-line); padding:18px 0; }
.ar-faq summary{ cursor:pointer; font-weight:650; font-size:17px; }
.ar-faq summary::marker{ color:var(--ar-red); }
.ar-faq p{ margin:10px 0 0; color:var(--ar-mut); font-size:16px; }

/* ---------------------------------------------------------------- estimator
   BOTH themes styled from the start — a sibling shipped the light variant unstyled at 2.39:1. */
.ar-est{ background:var(--ar-ink); color:#DCE7DC; }
.ar-est .ar-wrap{ display:grid; grid-template-columns:1fr 400px; gap:46px; align-items:center;
  padding:60px 26px; }
.ar-est h2{ color:#fff; }
.ar-est .ar-lede, .ar-est-points{ color:#C4B4A2; }
.ar-panel{ background:#283127; border:1px solid #364234; border-radius:4px; padding:24px; }
.ar-panel h3{ font-size:15px; color:#fff; margin-bottom:16px; }
.ar-field{ margin-bottom:13px; }
.ar-field label{ display:block; font-size:12.5px; font-weight:600; color:#A9B6A6; margin-bottom:6px; }
.ar-field input,.ar-field select{ width:100%; border:1px solid #3D2F24; border-radius:3px;
  padding:11px 12px; font:15px inherit; background:#161C16; color:#EFF3EC; }
.ar-row2{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.ar-gobtn{ width:100%; margin-top:6px; background:var(--ar-red); color:#fff; border:0; padding:14px;
  font:650 15px/1 inherit; border-radius:3px; cursor:pointer; }
.ar-gobtn:hover{ background:#BF452C; }
.ar-panel .note{ font-size:12.5px; color:#A9B6A6; margin-top:12px; line-height:1.5; }
.ar-toggle{ background:none; border:0; padding:4px 0; cursor:pointer; font:inherit; font-size:13px;
  text-decoration:underline; text-underline-offset:3px; color:#A9B6A6; }

/* light variant, used on the standalone estimator page */
.ar-est.light{ background:var(--ar-sand); color:var(--ar-ink); }
.ar-est.light h2{ color:var(--ar-ink); }
.ar-est.light .ar-lede,.ar-est.light .ar-est-points{ color:var(--ar-mut); }
.ar-est.light .ar-panel{ background:var(--ar-paper); border-color:var(--ar-line); }
.ar-est.light .ar-panel h3{ color:var(--ar-ink); }
.ar-est.light .ar-field label{ color:#5C5046; }
.ar-est.light .ar-field input,.ar-est.light .ar-field select{ background:#fff;
  border-color:var(--ar-line); color:var(--ar-ink); }
.ar-est.light .ar-panel .note,.ar-est.light .ar-toggle{ color:#5C5046; }

/* ---------------------------------------------------------------- estimator RESULT
   ⚠️ LAYOUT, not just colour. Colour-only styling passes a contrast check while rendering
   "Materials$1,100 – $3,250" run together — that shipped on four sites in this group. */
.ar-result{ margin-top:22px; padding-top:20px; border-top:1px solid #364234; }
.ar-est.light .ar-result{ border-top-color:var(--ar-line); }
.ar-total-cap{ font-size:12px; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
  color:#A9B6A6; }
.ar-total{ font-size:clamp(26px,3.4vw,34px); font-weight:600; letter-spacing:-.02em;
  margin:6px 0 16px; font-variant-numeric:tabular-nums; color:#A9D8BE;
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; }
.ar-split-row{ display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid #364234; font-size:15px; color:#DCE7DC; }
.ar-split-row span:last-child{ text-align:right; font-weight:600;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.ar-split-row:last-of-type{ border-bottom:0; }
.ar-explain{ margin-top:16px; font-size:14.5px; line-height:1.62; color:#C4B4A2; }
.ar-explain p{ margin:0 0 10px; }
.ar-explain p:last-child{ margin-bottom:0; }
.ar-estimate-flag{ margin-top:16px; padding:14px 16px; border-radius:3px; font-size:14px;
  line-height:1.6; background:#2C352B; color:#DDE6DC; }
.ar-est.light .ar-total-cap{ color:var(--ar-mut); }
.ar-est.light .ar-total{ color:var(--ar-red-dk); }
.ar-est.light .ar-split-row{ color:var(--ar-ink); border-bottom-color:var(--ar-line); }
.ar-est.light .ar-explain{ color:var(--ar-mut); }
.ar-est.light .ar-estimate-flag{ background:#EEF2E7; color:#3E4A3C; }

/* ---------------------------------------------------------------- related links + footer */
.ar-related{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.ar-related a{ background:var(--ar-paper); border:1px solid var(--ar-line); border-radius:3px;
  padding:10px 18px; text-decoration:none; font-size:15px; }
.ar-related a:hover{ border-color:var(--ar-red); color:var(--ar-red); }

.ar-ft{ background:var(--ar-ink); color:#AFBCAE; padding:56px 0 30px; font-size:14.5px; }
.ar-ft-cols{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; }
.ar-ft-brand{ font:750 20px/1 inherit; color:#fff; letter-spacing:-.03em; }
.ar-ft-tag{ margin-top:6px; font-size:13.5px; font-style:italic; color:#A9D8BE; }
.ar-ft-note{ margin:11px 0 0; font-size:13.5px; max-width:40ch; color:#AFBCAE; }
.ar-ft h4{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#95A394;
  margin-bottom:11px; }
.ar-ft a{ display:block; text-decoration:none; padding:4px 0; color:#AFBCAE; }
.ar-ft a:hover{ color:#fff; }
.ar-ft-fine{ margin-top:40px; padding-top:18px; border-top:1px solid #2E3A2D; font-size:13px;
  color:#95A394; }
.ar-ft-sep{ margin:0 9px; }
.ar-ft-inq{ display:inline !important; color:#95A394 !important; text-decoration:underline; }
.ar-ft-inq:hover{ color:#fff !important; }

/* wide content scrolls inside its OWN box; the page body never scrolls */
.ar-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.ar-tablewrap table{ min-width:520px; }

/* ---------------------------------------------------------------- article pages */
body.ar-article .inside-article{ max-width:800px; margin:0 auto; padding:52px 26px 30px;
  background:transparent; border:0; box-shadow:none; }
body.ar-article .entry-header{ margin-bottom:0; }
body.ar-article .entry-title{ font-size:clamp(29px,3.8vw,44px); letter-spacing:-.025em; }
body.ar-article .entry-meta{ font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ar-mut); margin-top:14px; }
body.ar-article .entry-content{ margin-top:26px; font-size:17px; line-height:1.72; }
body.ar-article .entry-content h2{ font-size:25px; margin:44px 0 0; }
body.ar-article .entry-content h3{ font-size:19px; margin:32px 0 0; }
body.ar-article .entry-content p{ margin:15px 0 0; }
body.ar-article .entry-content ul,body.ar-article .entry-content ol{ margin:15px 0 0;
  padding-left:22px; }
body.ar-article .entry-content li{ margin-bottom:8px; }
body.ar-article .entry-content li::marker{ color:var(--ar-red); }
body.ar-article .entry-content a{ color:var(--ar-red-dk); text-underline-offset:2px; }
body.ar-article .entry-content img{ max-width:100%; height:auto; display:block; }
body.ar-article .entry-content figure{ margin:34px 0 0; }
body.ar-article .entry-content figcaption{ font-size:13px; color:var(--ar-mut); margin-top:8px; }
/* same specificity trap: `body.ar-article .entry-content a` (0,0,3,1) outranks `.ar-btn` */
body.ar-article .entry-content a.ar-btn{ color:#fff; }
body.ar-article .entry-content a.ar-btn.alt{ color:#FBF7F0; }
body.ar-article .entry-content .ar-hero a{ text-decoration:none; }

/* the hero must break OUT of the article column, and the theme's own title is suppressed so the
   heading is not printed twice */
body.ar-article .entry-content > .ar-hero{
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  width:100vw; max-width:100vw; margin-top:0;
}
body.ar-has-hero .entry-header,
body.ar-has-hero .entry-title{ display:none !important; }
body.ar-has-hero .entry-content{ margin-top:0; }
body.ar-has-hero .site-content,
body.ar-has-hero .content-area,
body.ar-has-hero .entry-content{ padding-top:0 !important; margin-top:0 !important; }
body.ar-has-hero .inside-article{ padding-top:0 !important; }

/* the theme's `img{height:auto}` beats `height:100%` on the absolutely positioned hero image,
   so it renders at natural height and body text is drawn over the photograph. Force it. */
.ar-hero.has-photo > img,
.ar-hero > img{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important; max-width:none !important;
}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1080px){
  /* LOAD-BEARING: the motto is nowrap and will widen the header past the viewport */
  .ar-brand .bdot,.ar-brand .bmotto{ display:none; }
}
@media(max-width:980px){
  .ar-rooms{ grid-template-columns:1fr 1fr; }
  .ar-mgrid{ grid-template-columns:1fr 1fr; }
  .ar-est .ar-wrap{ grid-template-columns:1fr; gap:30px; }
  .ar-facts{ grid-template-columns:1fr 1fr; }
  .ar-ft-cols{ grid-template-columns:1fr 1fr; }
  .ar-alert{ grid-template-columns:1fr; gap:14px; }
}
@media(max-width:760px){
  .ar-navtoggle{ display:block; }
  .ar-nav{ position:absolute; top:100%; left:0; right:0; background:var(--ar-paper);
    flex-direction:column; gap:0; padding:6px 26px 16px; display:none;
    border-bottom:3px solid var(--ar-red); box-shadow:0 18px 30px rgba(36,28,21,.12); }
  .ar-nav.open{ display:flex; }
  .ar-nav a{ padding:13px 0; border-bottom:1px solid var(--ar-line); }
  .ar-nav > li{ position:static; }
  .ar-sub{ position:static; display:block; border:0; box-shadow:none; padding:0 0 10px 12px;
    min-width:0; background:transparent; }
  .ar-caret{ display:none; }
  .ar-rooms,.ar-mgrid{ grid-template-columns:1fr; }
  .ar-facts{ grid-template-columns:1fr; }
  .ar-facts div{ border-right:0; border-bottom:1px solid var(--ar-line); padding-right:0; }
  .ar-hero .ar-wrap{ padding:88px 26px 40px; }
}
@media(max-width:520px){ .ar-brand .bs{ display:none; } }
@media(max-width:420px){ .ar-split-row{ font-size:14px; gap:10px; } }


/* ---------------------------------------------------------------- OPTION B: BROADSHEET
   Taken from design-round/build.py's B_CSS, which is what the owner picked. Structure IS the
   design here, so the two things that must not drift are:
     1. the masthead STACKS — rule, wordmark alone, strapline, then the nav on its own ruled row;
     2. the headline block sits ON PAPER and the photograph is a wide band BENEATH it. Type is
        never set over the picture in this option.
   These rules come LAST in the file, so anything unconditional here outranks the breakpoint
   rules above — which is how the mobile nav toggle got switched off once already. Scope
   display switches to a media query. */
.ar-hdr{ background:var(--ar-paper); border-bottom:3px double var(--ar-ink); position:relative;
  padding:22px 0 0; }
.ar-hdr .ar-wrap{ display:block; height:auto; max-width:1060px; margin:0 auto; padding:0 28px;
  text-align:center; border-bottom:0; }
.ar-mh-rule{ height:1px; background:var(--ar-line); margin:0 0 12px; }
.ar-brand{ display:block; text-align:center; }
.ar-brand .bn{ font:400 clamp(30px,4.4vw,48px)/1 "Iowan Old Style","Palatino Linotype",Georgia,serif;
  letter-spacing:.01em; color:var(--ar-ink); }
.ar-brand .bn em{ font-style:italic; color:var(--ar-red); }
.ar-mh-sub{ margin-top:7px; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ar-mut); }
/* ⚠️ SECOND TIME. An unconditional `display:flex` here comes LATER than the
   @media(max-width:760px){.ar-nav{display:none}} rule above, so at 375px the nav rendered
   permanently expanded AND the toggle showed. Never set `display` on .ar-nav outside a
   breakpoint in this block — the whole file's mobile behaviour lives above it. */
.ar-nav{ justify-content:center; gap:26px; margin:16px 0 0; padding:11px 0;
  border-top:1px solid var(--ar-line); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ar-ink); }
@media(min-width:761px){ .ar-nav{ display:flex; } }
.ar-nav a{ border-bottom:0; text-decoration:none; }
.ar-nav a:hover{ color:var(--ar-red); }
.ar-navtoggle{ margin:0 auto 12px; }
@media(min-width:761px){ .ar-navtoggle{ display:none; } }
@media(max-width:760px){ .ar-navtoggle{ display:block; } }

/* hero: headline on PAPER, photograph as a wide band beneath it */
.ar-hero{ position:static; min-height:0; display:block; background:var(--ar-paper);
  padding:34px 0 0; text-align:center; }
.ar-hero::after{ display:none; }
.ar-hero .ar-wrap{ position:static; padding:0 28px; max-width:1060px; margin:0 auto; }
.ar-hero .inner{ max-width:none; }
.ar-hero h1{ font:400 clamp(32px,5vw,56px)/1.06 "Iowan Old Style","Palatino Linotype",Georgia,serif;
  color:var(--ar-ink); letter-spacing:-.012em; max-width:20ch; margin:0 auto; }
.ar-hero p{ margin:14px auto 0; color:var(--ar-mut); font-size:18px; max-width:60ch;
  font-family:"Iowan Old Style",Georgia,serif; font-style:italic; }
.ar-eyebrow{ color:var(--ar-red); letter-spacing:.22em; font-size:11px; text-transform:uppercase;
  margin-bottom:12px; }
.ar-btns{ justify-content:center; margin-top:22px; margin-bottom:0; }

/* the photograph, as its own band under the type */
.ar-leadshot{ margin-top:26px; height:clamp(300px,42vw,560px); position:relative; overflow:hidden;
  border-top:1px solid var(--ar-line); border-bottom:1px solid var(--ar-line); }
.ar-leadshot img{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  object-fit:cover !important;
  /* ⚠️ FLOORING SITE — the floor must dominate this short wide band, not the wall. A centred
     crop fills it with wall and skirting. Tuned to the CURRENT photograph; re-check it whenever
     the hero image changes. */
  object-position:var(--ar-focus, 50% 70%);
  /* 62% is tuned to hero-room #35493907 (the site hero): an empty room shot where the floor
     already fills the lower two thirds, so a hard downward bias crops into skirting. The
     per-page override below moves it for photographs framed differently. */
  display:block; max-width:none; }
.ar-hero.sm .ar-leadshot{ height:clamp(240px,30vw,400px); }
@media(max-width:760px){
  .ar-leadshot{ height:230px; }
  .ar-hero.sm .ar-leadshot{ height:190px; }
  .ar-brand .bn{ font-size:30px; }
  .ar-nav{ gap:16px; font-size:11px; }
}

/* body type: serif headings on newsprint */
body.ar-page h1, body.ar-page h2, body.ar-page h3{
  font-family:"Iowan Old Style","Palatino Linotype",Georgia,serif; font-weight:400;
  letter-spacing:-.012em; }
.ar-sec h2{ font-size:clamp(23px,2.9vw,32px); }
.ar-num{ letter-spacing:.2em; }
table.ar-costs td.p{ font-family:"Iowan Old Style",Georgia,serif; color:var(--ar-red-dk); }
.ar-facts .n{ font-family:"Iowan Old Style",Georgia,serif; color:var(--ar-red-dk); }
body.ar-page a.ar-btn{ color:#fff; }
body.ar-page a.ar-btn.alt{ color:var(--ar-ink); }
.ar-btn{ background:var(--ar-red); border-radius:2px; }
.ar-btn.alt{ background:transparent; border:1px solid var(--ar-ink); color:var(--ar-ink); }



/* ---------------------------------------------------------------- CENTRING THE HERO TYPE
   ⚠️ `body.ar-page h1,h2,h3,h4{margin:0}` is specificity (0,1,2) and sits LATER in this file, so
   it beat `.ar-hero h1` (0,1,1) and wiped the `margin:0 auto`. The h1 kept its 20ch max-width and
   sat flush LEFT inside a centred box — the heading looked off-centre on every page with a hero
   while the buttons, which centre via flex, stayed centred. That mismatch is the tell.

   Diagnosed with CSS.getMatchedStylesForNode rather than guessed: the browser named the winning
   rule. Fixed by out-specifying it, not with !important. */
body.ar-page .ar-hero h1{ margin-left:auto; margin-right:auto; }
body.ar-page .ar-hero p{ margin-left:auto; margin-right:auto; }
body.ar-page .ar-hero .inner{ margin-left:auto; margin-right:auto; }
body.ar-page .ar-hero .ar-eyebrow{ margin-left:auto; margin-right:auto; }


/* ---------------------------------------------------------------- MOBILE NAV, RE-ASSERTED LAST
   The Broadsheet block above restyles .ar-nav, so the collapse has to be restated after it or the
   drawer stays open. Two sites in this portfolio shipped with no working mobile nav and this file
   has now broken it twice; verify_live.py's nav check is what caught both. */
@media(max-width:760px){
  .ar-nav{ position:absolute; top:100%; left:0; right:0; z-index:40;
    background:var(--ar-paper); flex-direction:column; gap:0; margin:0;
    padding:6px 26px 16px; display:none; border-top:1px solid var(--ar-line);
    border-bottom:3px solid var(--ar-red); box-shadow:0 18px 30px rgba(36,28,21,.14); }
  .ar-nav.open{ display:flex; }
  .ar-nav > li{ width:100%; }
}