/* Roundhouse website, UI lift 2026-09-30. White page, ink type, one hi-vis accent.
   Headings in DIN Alternate (Bahnschrift on Windows), words in the system face, data in the system mono.
   Every colour is a token in the one :root block below. Single theme: no dark mode, ever. */

:root{
  color-scheme:light only;

  /* Ink and neutrals. Contrast on white: ink 18.9, steel 6.7, steel-2 4.7 */
  --ink:#0E1116;--ink-2:#1C222A;--ink-3:#2A313A;
  --steel:#545D68;--steel-2:#6B7580;
  --line:#E3E6EA;--line-2:#CDD2D8;--control-line:#8B949E;/* 3.1 on white: the edge of a field must read (WCAG 1.4.11) */
  --mist:#F4F6F8;--paper:#FFFFFF;

  /* Hi-vis. orange is for fills, marks and focus (3.4 on white, graphics only; ink on orange 5.6).
     orange-ink is the text and link shade (5.5 on white, 5.1 on mist). */
  --orange:#F25A1E;--orange-hover:#E04E14;--orange-ink:#B8420F;--orange-ink-2:#963509;
  --orange-tint:#FFF3EC;--orange-line:#F8C4AE;

  /* Status, only where a status is shown */
  --go:#1F6B3E;--go-tint:#E8F2EC;--wait:#7A5210;--wait-line:#C98A12;--wait-tint:#FFF9EE;--stop:#B42318;--stop-tint:#FEF3F2;

  /* Names the older markup still uses, pointed at the new palette */
  --brick:var(--orange-ink);--brick-dk:var(--orange-ink-2);--concrete:var(--line);--muted:var(--steel);

  /* Type */
  --head:"DIN Alternate",Bahnschrift,"D-DIN","DIN 1451","Helvetica Neue",Arial,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:var(--text);/* 2026-10-02: no monospace anywhere, Ahmed reads it as AI. Figures use tabular numbers instead. */
  --fig:var(--head);
  --fs-display:clamp(40px,5.4vw,76px);
  --fs-h1:clamp(34px,4.1vw,56px);
  --fs-h2:clamp(28px,2.9vw,40px);
  --fs-h3:20px;
  --fs-body:17px;
  --fs-small:14px;

  /* Shape and depth */
  --r-btn:6px;--r-card:10px;--r-media:12px;--r-panel:16px;
  --shadow-1:0 1px 2px rgba(14,17,22,.05);
  --shadow-2:0 1px 2px rgba(14,17,22,.05),0 12px 32px -16px rgba(14,17,22,.22);
  --shadow-3:0 2px 6px rgba(14,17,22,.08),0 24px 56px -20px rgba(14,17,22,.35);
  --gutter:clamp(16px,4vw,56px);
  --nav-h:68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--text);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern"}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
img{height:auto}
figure,p,h1,h2,h3,ul,ol{margin:0}
ul,ol{padding:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
/* Touch: no double tap zoom delay on controls, and a light orange flash where a tap lands */
html{-webkit-tap-highlight-color:rgba(242,90,30,.16)}
a,button,input,select,textarea,summary,label{touch-action:manipulation}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--orange-tint);color:var(--ink)}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}
/* An orange control takes an ink ring, orange on orange would vanish; a focused control never sits under the sticky header */
.btn-ink:focus-visible,.btn-brick:focus-visible,.nav-cta:focus-visible,.rhc-launch:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
:where(a,button,input,select,textarea,summary,[tabindex]):focus{scroll-margin-block:calc(var(--nav-h) + 16px) 16px}
.wrap{width:min(1240px,100% - 2*var(--gutter));margin-inline:auto}

/* Type scale */
h1,h2,h3{font-family:var(--head);font-weight:700;letter-spacing:-.012em;text-wrap:balance;font-variant-numeric:tabular-nums}
h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.016em}
h3{font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.006em}
.lede{font-size:18px;line-height:1.6;color:var(--steel);max-width:38ch;text-wrap:pretty}
.fig{font-family:var(--fig);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:0}

/* Buttons and links. One primary (hi-vis orange, ink words), one outline. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r-btn);font-size:15px;font-weight:600;letter-spacing:-.005em;border:1px solid transparent;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn span[aria-hidden]{display:none}
.btn-ink,.btn-brick{background:var(--orange);color:var(--ink);box-shadow:inset 0 -2px 0 rgba(14,17,22,.1)}
.btn-ink:hover,.btn-brick:hover{background:var(--orange-hover)}
.btn-line,.btn-outline{border-color:var(--line-2);color:var(--ink);background:var(--paper);box-shadow:var(--shadow-1)}
.btn-line:hover,.btn-outline:hover{border-color:var(--ink)}
.btn-white{background:var(--paper);color:var(--ink)}
.btn-white:hover{background:var(--mist)}
.btn:disabled{opacity:.6;cursor:wait}
.link{font-weight:600;color:var(--orange-ink);text-decoration:underline;text-decoration-color:var(--orange-line);text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .15s,color .15s}
.link:hover{color:var(--orange-ink-2);text-decoration-color:currentColor}
.text-link{font-weight:600;color:var(--orange-ink)}
.text-link:hover{color:var(--orange-ink-2)}
.text-link span[aria-hidden]{display:none}

/* Header */
.nav{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px -18px rgba(14,17,22,.3)}
.nav-inner{display:flex;align-items:center;gap:28px;min-height:var(--nav-h)}
.logo{display:inline-flex;align-items:center;flex:none;min-height:44px}
.logo img{height:26px;width:auto}
.desktop-nav{display:flex;gap:2px;margin-left:auto;align-self:stretch}
.desktop-nav a{position:relative;display:inline-flex;align-items:center;font-size:15px;font-weight:500;color:var(--steel);padding:0 12px;transition:color .15s}
.desktop-nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.desktop-nav a:hover{color:var(--ink)}
.desktop-nav a:hover::after{transform:scaleX(1);background:var(--line-2)}
.desktop-nav a[aria-current]{color:var(--ink)}
.desktop-nav a[aria-current]::after{transform:scaleX(1);background:var(--orange)}
.nav-cta{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-btn);background:var(--orange);color:var(--ink);font-size:14px;font-weight:600;white-space:nowrap;box-shadow:inset 0 -2px 0 rgba(14,17,22,.14);transition:background-color .15s}
.nav-cta:hover{background:var(--orange-hover)}
.nav-cta span[aria-hidden]{display:none}
.menu-toggle{display:none}
/* The mobile menu shows only at 940px and below (the media queries further down), and only while open */
.mobile-menu,.mobile-menu[hidden]{display:none}

/* Home: hero */
.hero{padding:clamp(32px,5vw,72px) 0 clamp(8px,2vw,24px)}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(28px,3.5vw,48px)}
.hero-top > *{min-width:0}
.hero h1{font-size:var(--fs-display);line-height:.98;letter-spacing:-.028em}
.hero .lede{font-size:17px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.stage{position:relative}
.frame{position:relative;border-radius:var(--r-media);overflow:hidden;background:var(--line);aspect-ratio:16/10}
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(14,17,22,.08);pointer-events:none}
.stage .frame{aspect-ratio:2.25/1}
.frame video,.frame img{width:100%;height:100%;object-fit:cover}
.stage .jobcard-slot{position:absolute;left:28px;bottom:28px;z-index:2;width:min(360px,80%)}

/* Home: sections. A band head sits on a hairline with a short orange lead, like a rule with its zero mark. */
.band{padding:clamp(56px,7vw,96px) 0}
.band + .band{padding-top:0}
.head{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(28px,3.5vw,44px);padding-top:clamp(20px,2.2vw,28px);border-top:1px solid var(--line)}
.head::before{content:"";position:absolute;left:0;top:-1px;width:40px;height:3px;background:var(--orange)}
.head p{color:var(--steel);max-width:44ch;font-size:17px}
.desk-caption{margin-top:14px;font-size:13px;color:var(--steel)}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tile{display:block}
.tile .frame{aspect-ratio:3/4}
.tile h3{margin-top:16px;font-size:19px}
.tile p{margin-top:4px;color:var(--steel);font-size:14.5px;line-height:1.5;max-width:30ch}
.tile:hover h3{color:var(--orange-ink)}

.trades-card{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:var(--r-panel);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(32px,5vw,72px);align-items:center}
.trades-copy{position:relative;min-width:0}
.trades-card .fan{position:absolute;right:-60px;bottom:0;width:min(520px,52%);height:auto;pointer-events:none;opacity:.55}
.trades-card h2{color:#fff;max-width:22ch;position:relative}
.trades-copy > p{color:rgba(255,255,255,.74);margin-top:14px;max-width:46ch}
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,180px));gap:clamp(20px,4vw,56px);margin:40px 0 36px;position:relative}
.terms b{display:block;white-space:nowrap;font-family:var(--fig);font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(40px,4.4vw,58px);line-height:.95;letter-spacing:-.02em}
.terms span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.74)}
.trades-card .btn{position:relative}

.guides{border-top:1px solid var(--line)}
.guides a{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line);font-size:clamp(18px,1.7vw,21px);font-weight:500;letter-spacing:-.01em;transition:color .15s,padding .2s}
.guides a small{font-size:13px;font-weight:600;color:var(--steel);border:1px solid var(--line-2);border-radius:var(--r-btn);padding:5px 12px;transition:border-color .15s,color .15s,background-color .15s}
.guides a:hover{color:var(--orange-ink)}
.guides a:hover small{color:var(--ink);border-color:var(--orange);background:var(--orange-tint)}

.payout{position:relative;background:var(--paper);color:var(--ink);border-radius:var(--r-card);padding:18px 20px 16px;box-shadow:var(--shadow-3);font-size:14px}
.po-head{display:flex;align-items:center;gap:10px}
.po-id{font-family:var(--mono);font-weight:600;font-size:14px;white-space:nowrap}
.po-ex{font-size:12.5px;color:var(--steel)}
.po-pill{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--go);background:var(--go-tint);border-radius:999px;padding:2px 10px}
.po-title{font-weight:600;margin:6px 0 10px}
.payout ol{list-style:none;border-top:1px solid var(--line)}
.payout li{display:grid;grid-template-columns:52px 1fr;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);line-height:1.35}
.payout li span{font-family:var(--mono);font-size:13px;color:var(--steel)}
.payout li:last-child span{color:var(--orange-ink)}
.po-foot{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;color:var(--steel)}
.po-foot b{font-family:var(--fig);font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums}

/* Closing panel: mist with a hairline frame; the orange lives in the mark and the button */
.close-band{padding-top:0}
.close-panel{position:relative;overflow:hidden;background:var(--mist);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,40px);align-items:center}
.close-mark{width:72px;height:auto}
.close-panel h2{max-width:30ch}
.closing .eyebrow{display:none}

/* Footer: the one full width ink panel, the page's foundation */
.foot{background:var(--ink);color:rgba(255,255,255,.66);padding:64px 0 28px;font-size:14.5px;margin-top:clamp(24px,4vw,56px)}
.foot .logo img{height:auto;width:200px}
.footer-top{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.footer-brand p{margin:18px 0;max-width:30ch;color:rgba(255,255,255,.66)}
.footer-brand .foot-contact{margin-top:0;display:flex;flex-direction:column;gap:4px}
.foot-contact a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px;align-self:flex-start}
.footer-top nav{display:flex;flex-direction:column;gap:2px}
.footer-top nav .foot-h{font-family:var(--head);font-size:15px;font-weight:700;color:#fff;letter-spacing:0;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-top nav a{padding:5px 0;transition:color .15s}
.footer-top nav a:hover{color:#fff}
.foot :focus-visible{outline-color:var(--orange)}
.foot-areas{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.foot-areas .foot-h{font-family:var(--head);font-size:15px;font-weight:700;color:#fff;margin-bottom:10px}
.foot-places{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px 28px;font-size:14px}
.foot-places > div{display:flex;flex-direction:column;gap:2px}
.foot-places .foot-r{margin-bottom:4px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.5)}
.foot-places .foot-r a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}
.foot-places a{padding:3px 0}
.foot-all{margin-top:14px;font-size:14px}
.foot-all a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px}
@media (max-width:700px){.foot-places{display:none}.foot-all{margin-top:0}.foot-all a{display:inline-flex;align-items:center;min-height:44px}}
.foot-areas a{transition:color .15s}
.foot-areas a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}

/* Inner pages */
.eyebrow{font-size:14px;font-weight:500;color:var(--steel);letter-spacing:0;text-transform:none}
a.eyebrow{transition:color .15s}
a.eyebrow:hover{color:var(--orange-ink)}
.page-head{padding:clamp(40px,6vw,88px) 0 clamp(32px,4vw,56px)}
.page-head .eyebrow{display:block;margin-bottom:18px}
.page-head h1{font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.022em;max-width:22ch}
.page-intro{font-size:19px;line-height:1.6;color:var(--steel);max-width:62ch;margin-top:22px}
.page-intro a{color:var(--orange-ink);text-decoration:underline;text-decoration-color:var(--orange-line);text-underline-offset:4px}
.page-head .btn{margin-top:28px}
.page-image{margin-bottom:clamp(32px,4vw,56px)}
.page-image img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-media)}
.section{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px);padding:clamp(32px,4vw,52px) 0;border-top:1px solid var(--line);background:linear-gradient(var(--orange),var(--orange)) 0 0/40px 3px no-repeat border-box}
.sh{display:flex;gap:14px;align-items:baseline}
.sh .n{display:none}
.sh h2{font-size:clamp(22px,2vw,28px);line-height:1.18;letter-spacing:-.01em}
.section-content{min-width:0}
.prose{font-size:var(--fs-body);line-height:1.72;max-width:68ch}
.prose p + p{margin-top:16px}
.prose a{color:var(--orange-ink);text-decoration:underline;text-decoration-color:var(--orange-line);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .15s}
.prose a:hover{text-decoration-color:currentColor}
.prose ul,.prose ol{padding-left:22px;margin:14px 0}
.prose ul li::marker{color:var(--orange)}
.prose ol li::marker{color:var(--steel);font-variant-numeric:tabular-nums}
.prose li{margin-bottom:8px;padding-left:4px}
.prose strong{font-weight:600}
.prose h3{font-size:20px;margin:28px 0 8px}
.prose h3:first-child{margin-top:0}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--mist);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* Tables: hairlines, an ink rule under the head, tabular figures */
.tbl-wrap{overflow-x:auto}
.tbl{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th:first-child,.tbl td:first-child{padding-left:0}
.tbl thead th{font-weight:600;font-size:13px;color:var(--steel);border-bottom:1px solid var(--ink);padding-top:0}
.tbl tbody tr{transition:background-color .15s}
.tbl tbody tr:hover{background:var(--mist)}
.review-date{font-size:13px;color:var(--steel);margin-top:20px}

/* FAQ: a squared plus that turns orange when open */
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq details:first-child{padding-top:0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:20px;font-size:18px;font-weight:600;letter-spacing:-.01em;transition:color .15s}
.faq summary:hover{color:var(--orange-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"";flex:none;width:28px;height:28px;margin-top:-2px;border:1px solid var(--line-2);border-radius:var(--r-btn);background:linear-gradient(var(--ink),var(--ink)) center/11px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 11px no-repeat;transition:border-color .15s,background-color .15s}
.faq details[open] summary:after{background:var(--orange) linear-gradient(var(--ink),var(--ink)) center/11px 1.5px no-repeat;border-color:var(--orange)}
.faq details p{margin-top:12px;color:var(--steel);max-width:68ch}
.sources li{margin-bottom:10px}
.sources a{color:var(--orange-ink);text-decoration:underline;text-decoration-color:var(--orange-line);text-underline-offset:3px}

/* Fact tiles on service and trade pages */
.terms-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-bottom:clamp(32px,4vw,56px);border-block:1px solid var(--line)}
.terms-strip > div{padding:22px 24px;border-left:1px solid var(--line)}
.terms-strip > div:first-child{border-left:0;padding-left:0}
.terms-strip strong{display:block;font-family:var(--fig);font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(34px,3.4vw,46px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.terms-strip strong::after,.lp-stats dt::after{content:"";display:block;width:28px;height:3px;margin-top:12px;border-radius:2px;background:var(--orange)}
.terms-strip h2{font-family:var(--text);font-size:16px;font-weight:600;margin-top:12px;letter-spacing:-.005em}
.terms-strip p{font-size:14px;color:var(--steel);margin-top:6px}

/* Forms */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fields label{display:block;font-size:14px;font-weight:600}
.fields label > input,.fields label > select,.fields label > textarea{display:block;margin-top:8px}
.fields input,.fields select,.fields textarea{border:1px solid var(--control-line);border-radius:8px;background:var(--paper);padding:12px 14px;min-height:48px;width:100%;min-width:0;font-size:16px;font-weight:400;box-shadow:inset 0 1px 2px rgba(14,17,22,.04);transition:border-color .15s,box-shadow .15s}
.fields input:hover,.fields select:hover,.fields textarea:hover{border-color:var(--steel-2)}
.fields input:focus-visible,.fields select:focus-visible,.fields textarea:focus-visible{border-color:var(--ink);outline:0;box-shadow:0 0 0 3px rgba(242,90,30,.28)}
.fields select{appearance:none;-webkit-appearance:none;padding-right:40px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230E1116' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center/12px 8px no-repeat}
.fields [aria-invalid=true]{border-color:var(--stop);background-color:var(--stop-tint)}
.fields textarea{resize:vertical;line-height:1.5}
.fields .wide{grid-column:1/-1}
.fields input[type=checkbox],.fields input[type=radio]{accent-color:var(--orange-ink)}
.fields input[type=file]{padding:10px;border-style:dashed;background:var(--mist)}
.opt-note{font-size:12px;font-weight:400;color:var(--steel)}
.sh-lede{margin-bottom:24px;color:var(--steel)}
.form-foot{margin-top:28px}
.form-status{margin-top:14px;font-size:14px}
.form-status.err{color:var(--stop)}
.form-status.ok{color:var(--go)}
.form-privacy{font-size:13px;color:var(--steel);margin-top:20px}
.form-privacy a{text-decoration:underline;text-underline-offset:3px}
.preview-note{background:var(--mist);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 16px;font-size:14px;margin-bottom:22px}
.hp,.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.small{font-size:13px}
.muted{color:var(--steel)}

.nw{white-space:nowrap}
.svc-more{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;align-items:center}
.svc-more span{font-size:14px;color:var(--steel);margin-right:6px}
.svc-more a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-btn);font-size:14.5px;font-weight:500;transition:border-color .15s,background-color .15s}
.svc-more a:hover{border-color:var(--ink)}
.svc-more a.all{background:var(--ink);color:#fff;border-color:var(--ink)}
.svc-more a.all:hover{background:var(--ink-3)}

/* Responsive */
@media (max-width:1000px){
  .hero-top{grid-template-columns:1fr}
  .hero .lede{max-width:52ch}
  .stage .frame{aspect-ratio:16/10}
  .stage .jobcard-slot{left:16px;bottom:16px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .trades-card{grid-template-columns:1fr}
  .payout{max-width:420px}
  .footer-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
  .section{grid-template-columns:1fr;gap:18px}
}
@media (max-width:800px){
  .desktop-nav{display:none}
  :root{--nav-h:60px}
  .nav-inner{gap:12px}
  .logo img{height:22px}
  .nav-cta{margin-left:auto;min-height:38px;padding:0 14px;font-size:13px}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;background:none;border:0;border-radius:var(--r-btn)}
  .menu-toggle span{width:20px;height:1.5px;background:var(--ink);transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .mobile-menu{display:grid;padding:8px var(--gutter) 20px;border-top:1px solid var(--line);background:var(--paper)}
  .mobile-menu a{font-size:18px;font-weight:500;padding:12px 0;border-bottom:1px solid var(--line)}
  .head{display:block}
  .head p{margin-top:10px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .close-panel{grid-template-columns:1fr}
  .close-mark{width:56px}
  .terms{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .terms span{font-size:13px}
  .trades-card .fan{opacity:.5;width:90%}
  .terms-strip{grid-template-columns:1fr}
  .terms-strip > div{border-left:0;border-top:1px solid var(--line)}
  .terms-strip > div:first-child{border-top:0}
  .fields{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav-cta,.menu-toggle{min-height:44px;min-width:44px}
  .footer-top nav a{padding:11px 0}
  .faq summary{padding-block:8px}
  .page-image img{aspect-ratio:4/3}
  .terms-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .terms-strip > div{padding:14px 12px;border-top:0;border-left:1px solid var(--line)}
  .terms-strip strong::after{margin-top:8px;width:20px}
  .terms-strip > div:first-child{border-left:0}
  .terms-strip strong{font-size:32px}
  .terms-strip h2{font-size:13px;margin-top:6px}
  .terms-strip p{display:none}
  .svc-more a{min-height:44px}
  .hero h1{font-size:clamp(34px,10vw,46px)}
  .terms b{font-size:clamp(30px,9vw,40px)}
  .lede{font-size:17px}
  .hero-actions .btn{flex:1}
  .stage .frame{aspect-ratio:4/5}
  .stage .jobcard-slot{position:relative;left:auto;bottom:auto;width:auto;margin:-72px 12px 0}
  .credit{top:10px;bottom:auto}
  .guides a{grid-template-columns:1fr}
  .tile h3{font-size:16px}
  .tile p{font-size:13.5px}
  .footer-top{grid-template-columns:1fr 1fr}
  .guides a small{display:none}
  .page-intro{font-size:17px}
  .prose{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
}


/* A fact still to confirm. Preview builds only; a release build fails before one can ship. Wait amber, outlined. */
.pending{display:inline-flex;align-items:center;border:1px solid var(--wait-line);color:var(--wait);background:var(--wait-tint);border-radius:999px;padding:0 9px;font-size:12px;font-weight:600;line-height:1.7;letter-spacing:0;white-space:nowrap;vertical-align:middle;cursor:help}
/* In a table a chip wraps, so a row of unknown facts fits the column instead of pushing the table sideways. */
.tbl .pending{white-space:normal;border-radius:8px;line-height:1.4;padding:2px 8px}
.facts-tbl th,.facts-tbl td{padding:12px 10px}
.preview-flag{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:18px;font-size:13px;color:var(--steel)}

/* Header phone */
.nav-phone-slot{display:inline-flex;align-items:center;margin-left:4px}
.nav-phone{font-family:var(--fig);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.nav-phone:hover{color:var(--orange-ink)}
.mobile-phone{padding:14px 0 4px}
.mobile-phone .nav-phone{font-size:22px}

/* Footer: brand plus up to six columns */
.footer-cols{grid-template-columns:minmax(0,1.5fr) repeat(var(--cols,3),minmax(0,1fr));gap:28px}
.footer-bottom .foot-reg{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Related pages */
.related{list-style:none;border-top:1px solid var(--line)}
.related li{padding:16px 0;border-bottom:1px solid var(--line)}
.related a{font-size:18px;font-weight:600;letter-spacing:-.01em;transition:color .15s}
.related a:hover{color:var(--orange-ink)}
.related p{margin-top:4px;font-size:14.5px;color:var(--steel);max-width:68ch}
.related-hub{margin-top:18px;font-size:15px}

/* Hubs */
.hub-list{list-style:none;border-top:1px solid var(--line)}
.hub-list li{padding:18px 0;border-bottom:1px solid var(--line)}
.hub-list a{font-size:19px;font-weight:600;letter-spacing:-.01em;transition:color .15s}
.hub-list a:hover{color:var(--orange-ink)}
.hub-list p{margin-top:4px;font-size:15px;color:var(--steel);max-width:68ch}
.hub-list .hub-meta{font-size:13px}
.faq-groups{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.faq-groups a,.pill-links a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-btn);font-size:14.5px;font-weight:500;transition:border-color .15s,background-color .15s}
.faq-groups a:hover,.pill-links a:hover{border-color:var(--ink)}
.pill-links{display:flex;flex-wrap:wrap;gap:8px}
.faq-group + .faq-group{margin-top:40px}
.faq-group h3{margin-bottom:14px}
.faq-from{font-size:14px;color:var(--steel)}

/* Trust: facts table */
.facts-tbl th[scope=row]{font-size:15px;color:var(--ink);font-weight:600}
.facts-tbl td{white-space:normal}

/* Area */
.coverage-status{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600}
.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:2px 12px;font-size:13px;font-weight:600}
.status-served{color:var(--go);background:var(--go-tint)}
.status-pending{color:var(--wait);background:var(--wait-tint);border:1px solid var(--wait-line)}
.coverage-list{list-style:none;margin-top:16px;border-top:1px solid var(--line)}
.coverage-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.local-rules{padding-left:22px}
.local-rules li{margin-bottom:22px;padding-left:4px}
.local-rules li::marker{color:var(--steel);font-variant-numeric:tabular-nums}
.rule-src{font-size:14px;color:var(--steel);margin-top:6px}
.rule-src a{color:var(--orange-ink);text-decoration:underline;text-decoration-color:var(--orange-line);text-underline-offset:3px}

/* Contact */
.lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lane{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:24px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,box-shadow .15s}
.lane:hover{border-color:var(--line-2);box-shadow:var(--shadow-2)}
.lane .prose{font-size:15.5px}
.lane .btn{align-self:flex-start;margin-top:auto}
.reach{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;border-top:1px solid var(--line)}
.reach div{padding:14px 0;border-bottom:1px solid var(--line)}
.reach dt{font-size:13px;font-weight:600;color:var(--steel)}
.reach dd{margin:4px 0 0;font-size:17px}
.reach dd a{color:var(--orange-ink)}

/* Legal */
.legal-meta{margin-top:18px;font-size:14px;color:var(--steel)}
.toc{margin-top:28px;max-width:62ch}
.toc ol{padding-left:22px;margin-top:6px}
.toc li{padding:3px 0}
.toc a{color:var(--orange-ink)}

/* Tools, resources, thanks */
.tool-widget{min-width:0}
.resource-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.resource-actions .btn{margin-top:0}
.print-only{display:none}
.thanks-next{padding:clamp(24px,4vw,48px) 0 clamp(48px,6vw,88px)}

@media (max-width:1100px){
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-cols .footer-brand{grid-column:1/-1}
  .nav-phone-slot{display:none}
  .nav-inner{gap:18px}
  .desktop-nav a{padding:0 9px;white-space:nowrap}
  .desktop-nav a::after{left:9px;right:9px}
}
/* Five nav items need the menu a little earlier than the original 800px breakpoint. Same rules as there. */
@media (max-width:940px){
  .desktop-nav{display:none}
  .nav-cta{margin-left:auto}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;background:none;border:0;border-radius:var(--r-btn)}
  .menu-toggle span{width:20px;height:1.5px;background:var(--ink);transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .mobile-menu{display:grid;padding:8px var(--gutter) 20px;border-top:1px solid var(--line);background:var(--paper)}
  .mobile-menu a{font-size:18px;font-weight:500;padding:12px 0;border-bottom:1px solid var(--line)}
  .mobile-menu a[aria-current]{color:var(--orange-ink)}
}
@media (max-width:800px){
  .nav-phone-slot{display:none}
  .lanes{grid-template-columns:1fr}
  .reach{grid-template-columns:1fr}
}
@media (max-width:560px){
  .footer-cols{grid-template-columns:1fr 1fr}
}

/* Print: resources and any page a reader prints. Paper, not the screen layout. */
@page{size:letter;margin:.6in}
@media print{
  body{font-size:11pt;line-height:1.45;color:#000}
  .nav,.foot,.close-band,.lead-band,.crumbs,.related-section,.no-print,.page-image,.preview-flag,.menu-toggle{display:none!important}
  .print-only{display:block}
  .print-source{font-size:9pt;color:#444;margin-top:8px}
  .wrap{width:100%}
  .page-head{padding:0 0 12pt}
  .page-head h1{font-size:22pt;max-width:none}
  .page-intro{font-size:11.5pt;color:#222;max-width:none}
  .section{display:block;padding:10pt 0;border-top:1px solid #bbb;break-inside:auto;background:none}
  .sh h2{font-size:14pt;margin-bottom:6pt;break-after:avoid}
  .prose{font-size:11pt;max-width:none}
  .prose li{break-inside:avoid}
  .prose a,.sources a{color:#000;border:0;text-decoration:none}
  .sources a::after{content:" " attr(href);font-size:8.5pt;color:#444;word-break:break-all}
  .faq details{padding:6pt 0}
  .faq details > *{display:block}
  .faq summary:after{content:none}
  .tbl{font-size:10pt}
  .pending{border-color:var(--wait-line);background:none}
}

.form-step + .form-step{margin-top:32px}
@media (max-width:640px){
  .facts-tbl,.facts-tbl tbody,.facts-tbl tr,.facts-tbl th,.facts-tbl td{display:block;width:100%}
  .facts-tbl thead{display:none}
  .facts-tbl tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .facts-tbl th,.facts-tbl td{padding:2px 0;border:0}
  .tbl-wrap{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
}

/* Segments: who we work for strip under the hero, the Why Roundhouse block, the warranty table note. */
.who-strip{display:flex;align-items:baseline;gap:10px 28px;margin-top:clamp(20px,2.4vw,32px);padding:18px 0;border-bottom:1px solid var(--line)}
.who-label{font-size:14px;color:var(--steel);white-space:nowrap;margin:0}
.who-strip ul{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:0;padding:0}
.who-strip a{font-size:16px;font-weight:500;color:var(--ink);white-space:nowrap;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color .15s,color .15s}
.who-strip a:hover{text-decoration-color:var(--orange)}
.pillars{border-top:1px solid var(--line);margin:0}
.pillars > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:8px 32px;padding:22px 0;border-bottom:1px solid var(--line)}
.pillars dt{font-family:var(--head);font-size:clamp(19px,1.7vw,23px);font-weight:700;letter-spacing:-.01em}
.pillars dd{margin:0;color:var(--steel);font-size:17px;line-height:1.55;max-width:52ch;text-wrap:pretty}
.pillars-more{margin-top:28px}
.tbl-note{margin-top:14px;font-size:15px;color:var(--steel);max-width:68ch}
.warranty-tbl{max-width:760px}
@media (max-width:800px){
  .who-strip{display:block}
  .who-label{margin-bottom:10px}
  .who-strip ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
  .who-strip a{display:inline-flex;align-items:center;min-height:40px;white-space:normal}
  .pillars > div{grid-template-columns:1fr}
}
.footer-bottom{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 40px;align-items:start}
.foot-legal,.foot-regs{display:flex;flex-direction:column;gap:6px;min-width:0}
.foot-regs{align-items:flex-end;text-align:right}
.prose p,.prose li,.page-intro,.head p,.hero .lede{text-wrap:pretty}
@media (max-width:800px){
  .footer-bottom{grid-template-columns:1fr}
  .foot-regs{align-items:flex-start;text-align:left}
}
.warranty-tbl tbody th{font-size:15px;font-weight:500;color:var(--ink)}
.foot-legal span{text-wrap:pretty}

/* Powered by Nezam AI: one quiet line under the legal row, the credit drawn white on the ink footer */
.foot-credit{display:flex;align-items:center;gap:8px;margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:rgba(255,255,255,.56)}
.foot-credit a{display:inline-flex;align-items:center;opacity:.72;transition:opacity .2s}
.foot-credit a:hover,.foot-credit a:focus-visible{opacity:1}
.foot-credit img{display:block;height:16px;width:auto;filter:brightness(0) invert(1)}

/* ===== Lift 2026-10-01: lead intake, landing layout, auto cards and steps ===== */

/* Lead intake: closes every client page */
.lead-band{padding-top:clamp(48px,6vw,96px);padding-bottom:clamp(48px,6vw,88px)}
/* Lead intake, light 2026-10-02: a warm panel with a photo, the steps and the form on white. No dark box. */
.lead-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border:1px solid var(--line);border-radius:var(--r-panel);background:#fff;overflow:hidden;box-shadow:var(--shadow-2)}
.lead-copy{position:relative;padding:clamp(28px,4vw,52px);background:#FBF8F5;border-right:1px solid var(--line);display:flex;flex-direction:column}
.lead-eyebrow{display:none}
.lead-copy h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.lead-text{margin-top:14px;color:var(--steel);font-size:17px;max-width:44ch}
.lead-next{list-style:none;margin:28px 0 0;padding:0;border-bottom:1px solid var(--line)}
.lead-next li{padding:12px 0;border-top:1px solid var(--line)}
.lead-next b{display:block;font-weight:600;color:var(--ink)}
.lead-next span{color:var(--steel);font-size:15px}
.lead-photo{margin:auto 0 0;padding-top:28px}
.lead-photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px}
.lead-form{position:relative;background:#fff;color:var(--ink);padding:clamp(24px,3.4vw,48px)}
.lead-form .fields{gap:14px 16px}
.lead-form .fields input,.lead-form .fields select,.lead-form .fields textarea{min-height:46px;padding:10px 12px}
.lead-form .form-foot{margin-top:18px}
.lead-form .form-foot .btn{width:100%;justify-content:center;min-height:50px;font-size:16px}
.lead-form .form-privacy{margin-top:12px;font-size:13px;color:var(--steel)}
.lead-form .form-privacy a{color:var(--orange-ink);text-decoration:underline}
@media (max-width:900px){.lead-panel{grid-template-columns:1fr}.lead-copy{border-right:0;border-bottom:1px solid var(--line)}}

/* Landing hero: copy left, photo right, then the stat strip */
.lp-hero{padding:clamp(28px,4vw,64px) 0 0}
.lp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.lp-hero-grid.no-photo{grid-template-columns:minmax(0,1fr)}
.lp-hero-copy{min-width:0;max-width:620px}
.lp-hero h1{font-size:clamp(36px,4.2vw,58px);line-height:1.03;letter-spacing:-.025em;margin-top:14px;text-wrap:balance}
.lp-lede{margin-top:20px;font-size:18px;line-height:1.6;color:var(--steel);max-width:52ch}
.lp-hero .hero-proof{list-style:none;margin:28px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.lp-hero .hero-proof li{position:relative;padding-left:30px;font-weight:500}
.lp-hero .hero-proof li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:4px;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%230E1116' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.lp-hero-photo{border-radius:var(--r-panel);overflow:hidden;aspect-ratio:4/3;background:var(--mist);box-shadow:var(--shadow-2)}
.lp-hero-photo img{width:100%;height:100%;object-fit:cover}
.lp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:clamp(36px,5vw,64px) 0 0;border-block:1px solid var(--line)}
.lp-stats > div{padding:22px 24px;border-left:1px solid var(--line)}
.lp-stats > div:first-child{border-left:0;padding-left:0}
.lp-stats dt{font:700 clamp(24px,2.3vw,32px)/1.05 var(--fig);letter-spacing:-.015em;font-variant-numeric:tabular-nums}
.lp-stats dd{margin:6px 0 0;color:var(--steel);font-size:14.5px;line-height:1.45}
/* The intro sits on the page's left edge with the hero copy, its measure set on the text, not the wrap (a max-width on
   the wrap centred it), and keeps its distance from the first section rule */
.lp-intro{margin-top:clamp(36px,4vw,56px);margin-bottom:clamp(36px,4vw,56px);font-size:18px;max-width:none}
.lp-intro > *{max-width:72ch}
@media (max-width:1000px){.lp-hero-grid{grid-template-columns:1fr}.lp-hero-copy{max-width:none}.lp-hero-photo{aspect-ratio:16/9}}
@media (max-width:640px){.lp-stats{grid-template-columns:1fr 1fr}.lp-stats > div:nth-child(odd){border-left:0;padding-left:0}.lp-stats > div:nth-child(n+3){border-top:1px solid var(--line)}.lp-stats > div{padding:16px 14px}}

/* Landing sections: heading on top, full width content, alternate sections on mist */
.lp-sec{display:block;padding:clamp(22px,2.4vw,30px) 0 clamp(48px,6vw,80px)}
.lp-sec .sh{margin-bottom:clamp(20px,2.6vw,32px)}
.lp-sec .sh h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.02em;max-width:32ch}
.lp-sec .section-content > .prose{max-width:none}
.lp-sec .prose > p{max-width:68ch;font-size:17.5px}
.lp-sec .faq{max-width:880px}

/* Bold led lists become cards (ul) or steps (ol), on every page */
.prose ul.cards,.prose ol.steps{list-style:none;padding:0;margin:24px 0 36px}
.prose ul.cards:last-child,.prose ol.steps:last-child{margin-bottom:0}
.prose ul.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:28px 32px}
.prose ul.cards.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.prose ul.cards.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.prose ul.cards.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
.section:not(.lp-sec) .prose ul.cards.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){.prose ul.cards.n3,.prose ul.cards.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.prose ul.cards.n2,.prose ul.cards.n3,.prose ul.cards.n4,.section:not(.lp-sec) .prose ul.cards.n4{grid-template-columns:1fr}}
.prose ul.cards li{margin:0;padding:16px 0 0;border-top:1px solid var(--ink);position:relative}
.prose .card-t{display:block;font:700 19px/1.25 var(--head);letter-spacing:-.005em;color:var(--ink)}
.prose .card-b{display:block;margin-top:8px;color:var(--steel);font-size:15.5px;line-height:1.55}
.prose ol.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0}
.prose ol.steps li{margin:0;padding:22px 28px 10px 0;border-top:1px solid var(--ink);position:relative}
.prose ol.steps li::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.prose blockquote.callout{margin:24px 0;padding:22px 26px;border:0;border-left:4px solid var(--orange);background:var(--orange-tint);border-radius:0 var(--r-card) var(--r-card) 0;font:600 clamp(18px,1.6vw,21px)/1.45 var(--head);color:var(--ink)}
.prose blockquote.callout p{margin:0;max-width:none}

.lead-form-wrap{position:relative;min-width:0}
.lead-form-wrap .preview-note{margin:clamp(24px,3.4vw,48px) clamp(24px,3.4vw,48px) 0;color:var(--ink)}
.qr .preview-note{margin:10px 0 0;padding:8px 10px;font-size:12.5px}
.lp-sec .hub-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px;border:0}
.lp-sec .hub-list li{position:relative;margin:0;padding:22px 22px 20px;border:1px solid var(--line-2);border-radius:var(--r-card);background:var(--paper);transition:border-color .15s}
.lp-sec .hub-list li:hover,.lp-sec .hub-list li:focus-within{border-color:var(--ink)}
.lp-sec .hub-list li:hover a{color:var(--orange-ink)}
.lp-sec .hub-list a{display:block;font:700 19px/1.25 var(--head);color:var(--ink)}
.lp-sec .hub-list a::after{content:"";position:absolute;inset:0}
.lp-sec .hub-list p{margin-top:8px;color:var(--steel);font-size:15px;line-height:1.5}
/* Tables on the landing layout: a card, a mist header, the last column read as the Roundhouse answer */
.lp-sec .tbl-wrap{border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);box-shadow:var(--shadow-1)}
.lp-sec .tbl{font-size:15.5px}
.lp-sec .tbl th,.lp-sec .tbl td,.lp-sec .tbl th:first-child,.lp-sec .tbl td:first-child{padding:14px 18px}
.lp-sec .tbl thead th{padding-top:14px;background:var(--mist);border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-3)}
.lp-sec .tbl tbody td:first-child{font-weight:600;color:var(--ink)}
.lp-sec .tbl tbody tr:last-child td{border-bottom:0}
.lp-sec .tbl td:last-child:not(:first-child){color:var(--ink)}
.lp-sec .tbl thead th:last-child:not(:first-child){color:var(--orange-ink)}
.prose ol.steps.c4,.prose ol.steps.c7,.prose ol.steps.c8{grid-template-columns:repeat(4,minmax(0,1fr))}
.prose ol.steps.c3,.prose ol.steps.c6{grid-template-columns:repeat(3,minmax(0,1fr))}
.prose ol.steps.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:900px){.prose ol.steps.c4,.prose ol.steps.c5,.prose ol.steps.c6,.prose ol.steps.c7,.prose ol.steps.c8{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.prose ol.steps[class*=" c"]{grid-template-columns:1fr}}
.lp-sec .tbl-wrap table{width:100%;max-width:none}

/* ===== Codex review fixes 2026-10-02 ===== */

/* Breadcrumb: the same trail as the page's BreadcrumbList, in the eyebrow's place and size */
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;font-size:14px;font-weight:500;color:var(--steel);min-width:0}
.crumbs li{display:inline-flex;align-items:baseline;min-width:0}
.crumbs li + li::before{content:"/";margin:0 8px;color:var(--line-2)}
.crumbs a{color:var(--steel);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .15s,text-decoration-color .15s}
.crumbs a:hover{color:var(--orange-ink);text-decoration-color:currentColor}
.crumbs [aria-current]{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(52ch,100%)}
.crumbs li:last-child{flex:1 1 0;min-width:8ch}
.page-head .crumbs{margin-bottom:18px}
.lp-hero-copy .crumbs{margin-bottom:0}
@media (max-width:560px){.crumbs a{display:inline-flex;align-items:center;min-height:32px}.crumbs li:last-child:nth-child(n+3){display:none}}

/* Tables of three or more columns stack on a phone: one card per row, the first cell as its title, every other
   cell under its column heading (data-label, from sitegen.render) */
@media (max-width:640px){
  .tbl-stack,.tbl-stack tbody,.tbl-stack tr,.tbl-stack td{display:block;width:100%}
  .tbl-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl-wrap:has(.tbl-stack){overflow:visible;margin-inline:0;padding-inline:0}
  .tbl-stack tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .tbl-stack tbody tr:hover{background:none}
  .tbl-stack td,.tbl-stack td:first-child,.lp-sec .tbl.tbl-stack td,.lp-sec .tbl.tbl-stack td:first-child{padding:0;border:0}
  .tbl-stack td:first-child{font-weight:600;font-size:16px;color:var(--ink);margin-bottom:8px}
  .tbl-stack td + td{margin-top:8px}
  .tbl-stack td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:13px;font-weight:600;color:var(--steel)}
  .lp-sec .tbl-stack tr{padding:16px 18px}
  .lp-sec .tbl-stack tr:last-child{border-bottom:0}
  .lp-sec .tbl-stack td:last-child[data-label]:not(:first-child)::before{color:var(--orange-ink)}
}

/* Landing rhythm: a section of a few lines of prose, and the sources, take less room than one with a component */
.lp-sec.lp-short{padding:clamp(22px,2.4vw,30px) 0 clamp(32px,4vw,48px)}

/* Mobile header: a smaller mark, a tighter row and a one word button, so the logo, Request and the menu all fit */
@media (max-width:420px){
  .nav-inner{gap:8px}
  .logo img{height:20px}
  .nav-cta{padding:0 12px}
}
@media (max-width:370px){.nav-cta .cta-more{display:none}}
@media (max-width:350px){.logo img{height:17px}}

/* Closing lead form on a phone: the pitch and the form, not the three steps, so Get started lands on the form */
@media (max-width:600px){
  .lead-band{padding-top:32px;padding-bottom:40px}
  .lead-copy{padding:24px 20px}.lead-form{padding:22px 18px}.lead-photo{display:none}.lead-form-wrap .preview-note{margin:20px 18px 0}
  .lead-next{display:none}
  .lead-text{font-size:16px}
}

/* Forms: required marks, field messages, and the optional building details folded away */
.required-note{margin:0 0 14px;font-size:13px;color:var(--steel)}
.req{font-size:12px;font-weight:500;color:var(--orange-ink)}
.field-err{display:block;margin-top:6px;font-size:13px;font-weight:500;color:var(--stop)}
.more-fields{border:1px solid var(--control-line);border-radius:8px;background:var(--paper)}
.more-fields > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;font-size:15px;font-weight:600}
.more-fields > summary::-webkit-details-marker{display:none}
.more-fields > summary::before{content:"";flex:none;width:9px;height:9px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg);transition:transform .15s}
.more-fields[open] > summary::before{transform:rotate(45deg) translate(-2px,-2px)}
.more-fields > summary:hover{color:var(--orange-ink)}
.more-fields > .fields{padding:16px 14px 18px;border-top:1px solid var(--line)}

/* Request work: the page photo and three reassurances beside the form, no second heading */
.request-layout{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.request-aside{display:grid;gap:22px;align-content:start}
.request-photo{border-radius:var(--r-media);overflow:hidden;aspect-ratio:4/3;background:var(--mist)}
.request-photo img{width:100%;height:100%;object-fit:cover}
.request-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.request-points li{position:relative;padding-left:30px;font-weight:500;line-height:1.45}
.request-points li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:4px;background:var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%230E1116' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
@media (max-width:1000px){
  .request-layout{grid-template-columns:1fr}
  .request-aside{order:2}
  .request-photo{aspect-ratio:16/9}
}
@media (max-width:600px){.request-photo{display:none}}

/* The sample report section: heading on top, the report and its notes across the full width */
.report-section{display:block}
.report-section .sh{margin-bottom:clamp(20px,2.6vw,32px)}
.thanks-ref{margin-top:18px;font-size:17px;color:var(--steel)}
.thanks-ref b{font-family:var(--mono);font-weight:600;color:var(--ink);letter-spacing:0}

/* The FAQ hub: question links, ruled, each to the page that answers it */
.faq-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);max-width:760px}
.faq-index li{border-bottom:1px solid var(--line)}
.faq-index a{display:flex;align-items:center;min-height:48px;padding:10px 0;font-size:16.5px;font-weight:500;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .15s,text-decoration-color .15s}
.faq-index a:hover{text-decoration-color:currentColor}
.faq-index a:hover{color:var(--orange-ink)}

/* Video loops over page photos (partials/_vloop.html, site.js). Hidden until the clip plays, so the photo shows first. */
.page-image,.lp-hero-photo,.h4-photo{position:relative}
.vloop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;pointer-events:none}
.page-image .vloop{border-radius:var(--r-media)}
.vloop.on{opacity:1}
.vctl{position:absolute;left:14px;bottom:14px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.88);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer;opacity:0;transition:opacity .3s}
.vloop.on~.vctl{opacity:1}
.vctl::before,.vctl::after{content:"";position:absolute;top:16px;width:3px;height:12px;background:var(--ink);border-radius:1px}
.vctl::before{left:17px}.vctl::after{left:24px}
.vctl.paused::after{display:none}
.vctl.paused::before{left:18px;top:15px;width:0;height:0;background:none;border-radius:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--ink)}
.vctl:focus-visible{outline:0;box-shadow:0 0 0 2px var(--paper),0 0 0 5px var(--ink);opacity:1}

/* ===== Codex UI/UX review 2026-10-03: forms, chat and the mobile menu ===== */

/* The request form says it is not an emergency line before it asks anything */
.form-alert{margin:0 0 16px;padding:12px 14px;border-left:3px solid var(--orange);background:var(--orange-tint);font-size:14px;line-height:1.5}
.form-alert strong{font-weight:600}

/* Placeholders at a measured colour, not the browser's: steel on white is 6.68:1 */
.fields ::placeholder{color:var(--steel);opacity:1}

/* Request work and contact: proof beside the form down to 801px; below that the three points come first and the
   photo goes. The aside is already first in the markup, so order only undoes site.css. */
@media (min-width:801px) and (max-width:1000px){
  .request-layout{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:32px}
  .request-aside{order:0}
  .request-photo{aspect-ratio:4/3}
}
@media (max-width:800px){
  .request-layout{gap:20px}
  .request-aside{order:-1}
  .request-photo{display:none}
}

/* The mobile menu while open (site.js sets html.menu-open): the page behind stays put, the menu scrolls inside the
   screen, and the chat steps aside */
html.menu-open,html.menu-open body{overflow:hidden}
html.menu-open .rhc{display:none}
@media (max-width:940px){
  .mobile-menu{max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain}
}

/* ===== Codex UI/UX review 2026-10-03: page templates and wayfinding ===== */

/* The same four links in the mobile menu, under a small heading */
.mobile-menu .menu-h{margin:20px 0 0;padding-bottom:4px;font-size:13px;font-weight:600;color:var(--steel)}

/* Section links land below the sticky header */
.section[id],.faq-group[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* "On this page" (pages 6): a two column list on wider screens, a closed fold on phones */
.toc{margin-top:28px;max-width:760px}
.toc-h{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--steel)}
.toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.toc li{padding:3px 0;break-inside:avoid}
.toc a{font-size:15px;color:var(--orange-ink);text-decoration:underline;text-decoration-color:var(--orange-line);text-underline-offset:4px;transition:text-decoration-color .15s}
.toc a:hover{text-decoration-color:currentColor}
.toc-fold{display:none}
@media (max-width:640px){
  .toc{display:none}
  .toc-fold{display:block;margin-top:24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .toc-fold summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;font-size:15px;font-weight:600;cursor:pointer;list-style:none}
  .toc-fold summary::-webkit-details-marker{display:none}
  .toc-fold summary::after{content:"";flex:none;width:28px;height:28px;border:1px solid var(--line-2);border-radius:var(--r-btn);background:linear-gradient(var(--ink),var(--ink)) center/11px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 11px no-repeat}
  .toc-fold details[open] summary::after{background:linear-gradient(var(--ink),var(--ink)) center/11px 1.5px no-repeat}
  .toc-fold ol{list-style:none;margin:0;padding:0 0 10px}
  .toc-fold a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--orange-ink)}
}

/* Actions in a plain page header: city pages (pages 7) and the 404 (pages 22) */
.page-head .hero-actions{margin-top:24px}
.page-head .hero-actions .btn{margin-top:0}

/* Generated indexes run full width with the heading above them (pages 16) */
.block-hub,.block-faqhub,.block-areagroups{grid-template-columns:minmax(0,1fr);row-gap:24px}

/* The service area directory (pages 17) */
.area-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.area-grid .faq-group{margin:0}
@media (max-width:900px){.area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.area-grid{grid-template-columns:minmax(0,1fr)}}

/* The FAQ hub (pages 12): the search box, then one fold per group with its count */
.faq-search{display:grid;gap:8px;max-width:520px;margin-bottom:24px}
.faq-search[hidden]{display:none}
.faq-search label{font-size:14px;font-weight:600}
.faq-search input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--control-line);border-radius:8px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.faq-search input:focus-visible{border-color:var(--ink);outline:0;box-shadow:0 0 0 3px rgba(242,90,30,.28)}
.faq-count{min-height:1.4em;font-size:14px;color:var(--steel)}
details.faq-group{border-top:1px solid var(--line)}
details.faq-group:last-of-type{border-bottom:1px solid var(--line)}
details.faq-group + details.faq-group{margin-top:0}
details.faq-group summary{display:flex;align-items:center;gap:16px;min-height:60px;padding:12px 0;cursor:pointer;list-style:none}
details.faq-group summary::-webkit-details-marker{display:none}
details.faq-group summary h3{margin:0;font-size:var(--fs-h3);transition:color .15s}
details.faq-group summary:hover h3{color:var(--orange-ink)}
details.faq-group summary::after{content:"";flex:none;width:28px;height:28px;border:1px solid var(--line-2);border-radius:var(--r-btn);background:linear-gradient(var(--ink),var(--ink)) center/11px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px 11px no-repeat}
details.faq-group[open] summary::after{background:var(--orange) linear-gradient(var(--ink),var(--ink)) center/11px 1.5px no-repeat;border-color:var(--orange)}
.faq-n{margin-left:auto;font-size:14px;color:var(--steel);white-space:nowrap}
details.faq-group .faq-index{margin-bottom:28px}
.faq-groups a[hidden],.faq-index li[hidden],details.faq-group[hidden]{display:none}
@media (min-width:1001px){
  .block-faqhub .faq-index{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
}

/* The trades hub's finder (pages 18): trade names only, two columns */
.trade-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;max-width:760px;border-top:1px solid var(--line)}
.trade-index li{border-bottom:1px solid var(--line)}
.trade-index a{display:flex;align-items:center;min-height:48px;padding:8px 0;font-size:16px;font-weight:500;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .15s,text-decoration-color .15s}
.trade-index a:hover{color:var(--orange-ink);text-decoration-color:currentColor}

/* "See all services" under a city's common services (pages 15) */
.links-more{margin-top:16px}

@media print{
  .toc-fold,.faq-search{display:none!important}
}

/* ===== Ahmed's feedback 2026-10-03: the service area, the towns and the address checker ===== */
/* The address checker (partials/_area_check.html). The card the homepage map sits beside, and the head of the
   service area index. Its form shows once static/area-check.js runs; until then a link to the request form. */
.area-check{padding:22px 24px;border:1px solid var(--orange-line);border-radius:16px;background:linear-gradient(180deg,var(--orange-tint),#fff 75%);min-width:0}
.block-areagroups .area-check{max-width:40rem;margin:0 0 28px}
.ac-h{font:700 21px/1.15 var(--head);letter-spacing:-.01em}
.ac-lede{margin:8px 0 16px;color:var(--ink-3);font-size:15px;line-height:1.5}
.ac-label{display:block;margin:0 0 6px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.ac-row{display:flex;gap:8px;align-items:stretch}
.ac-input{flex:1 1 auto;min-width:0;width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--control-line);border-radius:8px;background:var(--paper);font-size:16px;box-shadow:inset 0 1px 2px rgba(14,17,22,.04);transition:border-color .15s,box-shadow .15s}
.ac-input:hover{border-color:var(--steel-2)}
.ac-input:focus-visible{border-color:var(--ink);outline:0;box-shadow:0 0 0 3px rgba(242,90,30,.28)}
.ac-btn{flex:none;padding:0 20px}
.ac-result:not(:empty){margin-top:16px;padding-top:16px;border-top:1px solid var(--orange-line)}
.ac-verdict{font-size:17px;font-weight:700;line-height:1.35;color:var(--ink)}
.area-check[data-state="served"] .ac-verdict{color:var(--go)}
.ac-note{margin:4px 0 14px;color:var(--ink-3);font-size:15px;line-height:1.5}
.ac-result .ac-verdict:only-child{margin:0}
.ac-go{max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-block:10px}
.ac-nojs{margin:0}
.ac-nojs .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-block:10px}
@media (max-width:600px){
  .area-check{padding:18px 16px}
  .ac-btn{padding:0 16px}
}

/* Communities and nearby towns: one quiet line under a city's coverage, a region's group and a hub's row. */
.coverage-also{margin:10px 0 0;color:var(--steel);font-size:15.5px;line-height:1.5}
.coverage-parts{color:var(--steel);font-size:14px;font-weight:400}
.area-also{margin:12px 0 0;color:var(--steel);font-size:14px;line-height:1.5}

/* ===== Ahmed's feedback 2026-10-03: inspections, cleaning and the how it works steps ===== */
/* How it works, 2026-10-03 (Ahmed: "make this as easy as possible for everyone"). The client's four steps lead,
   with plain step numbers on the rule (1 to 4, never 01), and the closing form one button away. */
#what-you-do .prose ol.steps{counter-reset:rh-step;margin-top:40px;row-gap:36px}
#what-you-do .prose ol.steps li{counter-increment:rh-step;padding:30px 28px 0 0}
#what-you-do .prose ol.steps li::before{content:counter(rh-step);top:-16px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--orange);color:var(--ink);font:700 15px/1 var(--head)}
#what-you-do .prose .card-t{font-size:21px}
#what-you-do .prose .card-b{font-size:16px}
#what-you-do .prose > p > a[href="#get-started"]{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:var(--r-btn);background:var(--orange);color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;box-shadow:inset 0 -2px 0 rgba(14,17,22,.1);transition:background-color .15s}
#what-you-do .prose > p > a[href="#get-started"]:hover{background:var(--orange-hover)}
#what-you-do .prose > p > a[href="#get-started"]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* The eight stages as a compact record: step number, stage, what goes on the record, one ruled row each */
#the-eight-steps .prose ol.steps{display:block;counter-reset:rh-stage;margin-top:24px;border-bottom:1px solid var(--line)}
#the-eight-steps .prose ol.steps li{counter-increment:rh-stage;display:grid;grid-template-columns:2.5rem minmax(0,10rem) minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:14px 0;border-top:1px solid var(--line)}
#the-eight-steps .prose ol.steps li:first-child{border-top-color:var(--ink)}
#the-eight-steps .prose ol.steps li::before{content:counter(rh-stage);position:static;width:auto;height:auto;border-radius:0;background:none;font:700 15px/1.5 var(--head);color:var(--steel)}
#the-eight-steps .prose ol.steps .card-t{font-size:17px;line-height:1.5}
#the-eight-steps .prose ol.steps .card-b{margin-top:0;font-size:15.5px}
@media (max-width:640px){
  #the-eight-steps .prose ol.steps li{grid-template-columns:2rem minmax(0,1fr)}
  #the-eight-steps .prose ol.steps .card-b{grid-column:2}
}

/* ===== Ahmed's feedback 2026-10-03: the blog index and post pages ===== */
/* Blog cards: /blog/ (templates/blog.html) and More posts under a post (templates/post.html), one partial
   (partials/_post_card.html). A card's one link is its title, stretched over the card, so the whole card clicks
   and the focus ring sits on the card. Photos 16:9 with the rounded corners of the site's other photo cards. */
.blog-head{padding-bottom:clamp(28px,3.5vw,48px)}
.bp-index{padding-bottom:clamp(56px,7vw,96px)}
.bp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,52px) clamp(20px,2.4vw,32px)}
.bp-card{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-media)}
.bp-photo{margin:0 0 16px;border-radius:var(--r-media);overflow:hidden;aspect-ratio:16/9;background:var(--mist)}
.bp-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bp-card:hover .bp-photo img{transform:scale(1.03)}
.bp-title{font:700 21px/1.22 var(--head);letter-spacing:-.01em;color:var(--ink)}
.bp-link{color:inherit;transition:color .15s}
.bp-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.bp-card:hover .bp-link{color:var(--orange-ink)}
.bp-link:focus-visible{outline:none}
.bp-card:focus-within{outline:2px solid var(--orange);outline-offset:6px}
.bp-meta{display:flex;flex-wrap:wrap;align-items:center;margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--steel);font-variant-numeric:tabular-nums}
.bp-meta > * + *::before{content:"";display:inline-block;width:3px;height:3px;margin:0 10px;border-radius:50%;background:currentColor;vertical-align:middle}
.bp-desc{margin:10px 0 0;color:var(--steel);font-size:15.5px;line-height:1.55;max-width:60ch}

/* The newest post: wide, the photo beside the words */
.bp-feature{grid-column:1/-1;border-radius:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center;padding-bottom:clamp(36px,4vw,52px);border-bottom:1px solid var(--line)}
.bp-feature .bp-photo{margin:0}
.bp-feature .bp-title{font-size:clamp(26px,2.8vw,40px);line-height:1.1;letter-spacing:-.018em;text-wrap:balance}
.bp-feature .bp-meta{margin-top:14px;font-size:15px}
.bp-feature .bp-desc{margin-top:14px;font-size:17px;max-width:44ch}

/* More posts under a post: small cards in the section column */
.bp-mini{gap:28px 20px}
.bp-mini .bp-photo{margin-bottom:12px}
.bp-mini .bp-title{font-size:17px;line-height:1.28}
.bp-mini .bp-meta{margin-top:6px;font-size:13.5px}
.bp-mini .bp-read{display:none}

/* The post page: the byline, the photo under the H1 (the LCP image), the body column */
.post-head{padding-bottom:clamp(24px,3vw,40px)}
.post-byline{margin-top:20px;font-size:15px}
.post-photo{margin-bottom:clamp(32px,4vw,56px)}
.post-photo img{width:100%;max-width:960px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-media);background:var(--mist)}

@media (max-width:1000px){
  .bp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bp-mini{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .bp-feature{grid-template-columns:1fr;gap:0}
  .bp-feature .bp-photo{margin-bottom:16px}
  .bp-feature .bp-desc{font-size:16px}
}
@media (max-width:640px){
  .bp-grid,.bp-mini{grid-template-columns:1fr}
  .bp-mini{gap:18px}
  .bp-mini .bp-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start}
  .bp-mini .bp-photo{margin:0;border-radius:8px}
  .bp-mini .bp-title{font-size:16px}
  .post-byline > :first-child{flex-basis:100%}
  .post-byline > :nth-child(2)::before{content:none}
}
@media (prefers-reduced-motion:reduce){.bp-photo img{transition:none}.bp-card:hover .bp-photo img{transform:none}}
@media print{.bp-mini,.block-more-posts{display:none!important}.post-photo img{max-width:100%}}

/* ===== Ahmed's feedback 2026-10-03: the work order review and the sample building check ===== */
/* The work order review on /maintenance-review/ (partials/_wo_review.html, tools/work-order-review.js). Plain bars
   made with CSS, no chart library. Figures in the DIN head face with tabular numbers, never monospace. */
.wor{max-width:900px}
.wor h3{margin:0 0 10px;font:700 18px/1.25 var(--head);letter-spacing:-.005em}
.wor-privacy{margin:0;padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--go);border-radius:var(--r-card);background:var(--go-tint);font-size:15px;line-height:1.5}
.wor-privacy b{color:var(--go)}
.wor-pick{display:grid;gap:14px}
.wor-file{display:block;font-size:14px;font-weight:600}
.wor-file input{display:block;width:100%;min-width:0;min-height:56px;margin-top:8px;padding:12px;border:1px dashed var(--control-line);border-radius:8px;background:var(--mist);font-size:15px;font-weight:400;cursor:pointer}
.wor-file input:hover{border-color:var(--ink)}
.wor-file input:focus-visible{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(242,90,30,.28)}
.wor-actions{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.wor .btn{white-space:normal;text-align:center;min-height:48px}
.wor-link{display:inline-flex;align-items:center;min-height:44px}
.wor-map fieldset{border:0;margin:0;padding:0;min-width:0}
.wor-map legend{padding:0;margin-bottom:6px;font:700 18px/1.25 var(--head)}
.wor-map .tool-note{margin:0 0 14px}
.wor-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 20px}
.wor-roles label{min-width:0}
.wor-status{margin:0;min-height:1.5em;font-size:15px;font-weight:600}
.wor-status:empty{min-height:0}
.wor-bad{color:var(--stop)}
.wor-report > * + *{margin-top:14px}
.wor-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.wor-figs > div{padding:14px 16px 0;border-left:1px solid var(--line);min-width:0}
.wor-figs > div:first-child{border-left:0;padding-left:0}
.wor-figs dt{font-size:13px;font-weight:600;color:var(--steel)}
.wor-figs dd{margin:4px 0 0;font:700 32px/1.1 var(--fig);font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.wor-na{display:block;font:600 14px/1.3 var(--text);color:var(--steel);letter-spacing:0}
.wor-range{margin:0;font-size:15px;color:var(--steel)}
.wor-sec{padding-top:16px;border-top:1px solid var(--line)}
.wor-sec h3{font-size:16px;margin-bottom:8px}
.wor-lead{margin:0 0 10px;font-size:16px;line-height:1.5}
.wor-none{margin:0;font-size:15px;color:var(--steel)}
.wor-bars{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wor-bars li{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:15px}
.wor-bar-label{overflow-wrap:anywhere}
.wor-bar-track{display:block;height:14px;border-radius:3px;background:var(--mist);overflow:hidden}
.wor-bar-fill{display:block;height:100%;min-width:2px;background:var(--orange);border-radius:3px}
.wor-bar-fill[style="width:0%"]{min-width:0}
.wor-bar-n{min-width:64px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.wor-next{display:grid;gap:10px;padding:18px 20px;border:1px solid var(--orange-line);border-radius:var(--r-card);background:var(--orange-tint)}
.wor-next h3,.wor-next p{margin:0}
.wor-next p{font-size:15px;color:var(--steel)}
.wor-changes h3{margin-bottom:12px}
.wor-change-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.wor-change-list li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.wor-change-list b{font:700 15.5px/1.5 var(--head)}
.wor-changes .tool-note{margin:12px 0 0}
@media (max-width:760px){
  .wor-roles{grid-template-columns:1fr 1fr}
  .wor-figs{grid-template-columns:1fr 1fr;border-top:0}
  .wor-figs > div,.wor-figs > div:first-child{border-left:0;border-top:1px solid var(--line);padding:12px 12px 12px 0}
  .wor-figs dd{font-size:28px}
  .wor-bars li{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}
  .wor-bar-track{grid-column:1/-1;grid-row:2}
  .wor-change-list li{grid-template-columns:1fr}
}
@media (max-width:480px){
  .wor-roles{grid-template-columns:1fr}
  .wor-actions .btn{width:100%}
  .wor-next{padding:16px}
}
@media print{.wor-pick,.wor-map,.wor-next{display:none!important}}

/* The sample building check on /building-check/ (partials/_check_sample.html). The sheet, the head, the meta grid
   and the photo stamps reuse the work order report's rs- classes in content-components.css; only what the report
   does not have is here: priorities, findings and the priced list. */
.ck-layout{display:grid;gap:20px;max-width:860px}
.ck .rs-sheet{padding:clamp(16px,2.4vw,28px)}
.ck-sample{margin:12px 0 0;padding:10px 14px;border:1px solid var(--wait-line);border-radius:8px;background:var(--wait-tint);color:var(--wait);font-size:14.5px;font-weight:600;line-height:1.45}
.ck-tally{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.ck-tally li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.ck-pri{display:inline-flex;align-items:center;justify-content:center;min-width:52px;padding:3px 10px;border-radius:999px;border:1px solid;font:700 12.5px/1.2 var(--head);letter-spacing:.01em;white-space:nowrap}
.ck-now{color:var(--stop);background:var(--stop-tint);border-color:#F1B8B2}
.ck-soon{color:var(--wait);background:var(--wait-tint);border-color:var(--wait-line)}
.ck-plan{color:var(--steel);background:var(--mist);border-color:var(--line-2)}
.ck-area{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.ck-area > h3{margin:0 0 4px;font:700 17px/1.25 var(--head);color:var(--ink)}
.ck-area > .ck-scope{margin:0 0 10px;font-size:14px;color:var(--steel)}
.ck-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ck-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.ck-item .ck-pri{grid-row:1/span 2;margin-top:1px}
.ck-where{margin:0;font-weight:700;font-size:15.5px;line-height:1.35}
.ck-seen{margin:0;font-size:15px;line-height:1.5}
.ck-item .rs-pair{grid-column:1/-1;margin:8px 0 0}
.ck-clear{margin:0;padding:10px 14px;border:1px dashed var(--line-2);border-radius:10px;font-size:15px;color:var(--steel)}
.ck-priced .tbl{margin:0}
.ck-priced td:last-child{color:var(--steel);font-weight:600}
@media (min-width:641px){.ck-priced th:last-child,.ck-priced td:last-child{width:11em}.ck-priced th:nth-child(3),.ck-priced td:nth-child(3){width:6.5em}}
.ck-foot{margin-top:18px;padding:14px 16px;border-radius:10px;background:var(--mist);font-size:15px;line-height:1.5}
.ck-foot p{margin:0}
.ck-foot p + p{margin-top:6px}
.ck-cta{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.ck-cta .btn{white-space:normal;text-align:center}
@media (max-width:600px){
  .ck-item{grid-template-columns:1fr}
  .ck-item .ck-pri{grid-row:auto;justify-self:start}
  .ck-cta .btn{width:100%}
}