/* LevelQuote home page, version 3 (Nov 1, 2026): an architectural instrument panel.
   Graphite is the surface; steel sits on fine edges, selected lettering and buttons; green marks the brand and selected
   states; cedar and amber are kept for a selected detail. The quote and the report stay light paper documents.
   Self-contained: the home page loads this file instead of /site.css (the other pages keep /site.css).
   Motion: everything decorative stops under prefers-reduced-motion and under html[data-motion=off] (the header's pause). */

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  /* surfaces */
  --bg:#090D10; --bg-2:#0C1316; --panel:#12191D; --panel-2:#101719; --panel-3:#172226;
  /* text on dark: full opacity always */
  --ink:#EDF0EB; --text:#BDC7C3; --muted:#9DABA5;
  /* lines */
  --line:#263236; --line-2:#3A4846; --line-g:#345547; --grid:rgba(114,159,142,.06);
  /* brand and warmth */
  --green:#AFCCB9; --green-2:#8FC4B5; --pine:#1E7A52; --pine-text:#7FD3A5;
  --amber:#DCAA76; --cedar:#C48643; --pen:#E8673D;
  /* steel */
  --steel:#A8B4BC; --steel-hi:#E7EEF1; --steel-lo:#6E7A82; --steel-shadow:#3B454B;
  --chrome:linear-gradient(105deg,#A3AEB6 0%,#D3DBE0 16%,#94A0A8 34%,#C2CCD2 50%,#8A959D 66%,#DCE3E7 84%,#A3AEB6 100%);
  --brush:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.08) 1px 2px,rgba(255,255,255,.02) 2px 3px);
  /* paper documents */
  --paper:#E9ECE4; --paper-2:#E4E8DD; --paper-ink:#1C2B23; --paper-text:#3A4D41; --paper-faint:#4F5F54; --paper-line:#C4CEC2;
  /* type */
  --sans:Archivo,"Helvetica Neue",Arial,sans-serif;
  --mono:"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:56px;
  --header:72px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header) + 16px)}
html[data-motion=off]{scroll-behavior:auto}
body{margin:0; background:var(--bg); color:var(--ink); font:400 1rem/1.65 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--bg)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
h1,h2,h3,h4{font-family:var(--sans); color:var(--ink); font-weight:650; text-wrap:balance}
h2{font-size:clamp(2.2rem,1.25rem + 3.1vw,3.85rem); line-height:1.06; letter-spacing:-.045em}
h2>span{display:block}
h2>span:not(.metal-type){color:var(--muted)}
h3{letter-spacing:-.03em; line-height:1.15}
p{color:var(--text); line-height:1.65}
a{color:inherit; text-decoration:none}
p a,li a,dd a,.faq details a{color:var(--pine-text); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
p a:hover,li a:hover,dd a:hover{color:var(--ink)}
b,strong{font-weight:650}
img,svg{display:block; max-width:100%}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--amber); outline-offset:4px; border-radius:2px}
::selection{background:#AFCCB9; color:#090D10}
[id]{scroll-margin-top:calc(var(--header) + 16px)}
.anchor{display:block; height:0; width:0}
.sr{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:fixed; top:-100px; left:16px; z-index:100; background:var(--ink); color:var(--bg); padding:12px 16px; font-weight:650; border-radius:3px}
.skip:focus{top:12px}
.wrap{width:min(1240px, calc(100% - 2 * var(--gutter))); margin-inline:auto}
.section{padding-block:clamp(72px, 8.5vw, 112px)}

/* labels */
.eyebrow{font:500 .75rem/1.6 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--green)}
.status-dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:10px; vertical-align:middle; box-shadow:0 0 12px rgba(175,204,185,.35); font-style:normal}
.metal-type{color:#C9D2D4; background:linear-gradient(110deg,#F0F3F1 8%,#8E9A9F 32%,#F5F6F3 49%,#A6B5BC 70%,#E1E6E3 95%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hrm-tag{display:inline-block; font:600 .6875rem/1 var(--mono); letter-spacing:.08em; color:var(--amber); border:1px solid rgba(220,170,118,.55); padding:3px 6px; border-radius:2px; vertical-align:middle; font-style:normal}
.cta-note{color:var(--muted); font-size:.875rem; line-height:1.55}

/* ---------- buttons and links ---------- */
.button{display:inline-flex; align-items:center; justify-content:space-between; gap:28px; min-height:50px; padding:14px 20px; position:relative; overflow:hidden;
  font:700 .875rem/1.2 var(--sans); letter-spacing:.005em; color:#101C17; background:linear-gradient(115deg,#E7EDE7,#B9C7C0); border:1px solid #E6EEE6; border-radius:3px;
  text-decoration:none; cursor:pointer; transition:background-color .2s, transform .2s var(--ease), box-shadow .2s}
.button>span{font-size:1.15rem; font-weight:400; line-height:1}
.button:hover{transform:translateY(-2px); background:#EFF3ED; box-shadow:0 0 0 3px rgba(185,199,192,.14)}
.button:active{transform:none; box-shadow:none}
.button-primary::after{content:""; position:absolute; top:-30%; bottom:-30%; left:0; width:45%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); transform:translateX(-220%) skewX(-24deg); pointer-events:none}
.button-primary:hover::after,.button-primary:focus-visible::after{animation:button-sweep .8s ease-out}
.button-outline{color:var(--ink); background:transparent; border-color:#6A8274}
.button-outline:hover{background:#1B2A24; color:var(--ink)}
.button-small{min-height:42px; padding:9px 14px; gap:16px; font-size:.8125rem}
.text-link{display:inline-flex; align-items:center; gap:12px; font-size:.875rem; color:#CEDBD0; border-bottom:1px solid #80998A; padding-block:8px; min-height:40px; text-decoration:none}
.text-link span{color:#A5C4AF}
.text-link:hover{color:#fff; border-bottom-color:var(--green)}

/* ---------- header ---------- */
.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; height:var(--header); display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-inline:max(32px, env(safe-area-inset-left,0px)) max(32px, env(safe-area-inset-right,0px));
  background:rgba(9,13,16,.95); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid #283136; transition:box-shadow .2s}
.site-header.scrolled{box-shadow:0 12px 28px -20px rgba(0,0,0,.95)}
.site-header::after{content:""; position:absolute; left:12%; right:52%; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,rgba(231,238,241,.55),transparent); pointer-events:none}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); white-space:nowrap}
.brand svg{width:32px; height:32px; flex:none}
.brand b{font:800 1.2rem/1 var(--sans); font-stretch:122%; letter-spacing:.015em}
.desktop-nav{display:flex; gap:26px; font-size:.84rem}
.desktop-nav a{color:var(--text); padding:8px 0; position:relative}
.desktop-nav a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--steel-hi); transform:scaleX(0); transform-origin:left; transition:transform .2s var(--ease)}
.desktop-nav a:hover{color:var(--ink)} .desktop-nav a:hover::after,.desktop-nav a:focus-visible::after{transform:none}
.header-actions{display:flex; align-items:center; gap:10px}
.header-actions>*{flex:none}
.motion-toggle{width:40px; height:40px; display:inline-grid; place-items:center; background:transparent; border:1px solid var(--line-2); border-radius:3px; color:#B6C4BC; font-size:.8rem; line-height:1}
.motion-toggle:hover{color:var(--ink); border-color:var(--steel-lo)}
.motion-toggle[aria-pressed=true]{color:var(--amber); border-color:rgba(220,170,118,.6)}
.menu-toggle{display:none; width:44px; height:44px; place-items:center; background:transparent; border:1px solid var(--line-2); border-radius:3px; font-size:1.15rem; line-height:1}
.site-header .button-small{transition:opacity .2s, visibility .2s, transform .2s var(--ease), background-color .2s}
.mobile-nav{position:absolute; top:100%; left:0; right:0; padding:10px max(18px, env(safe-area-inset-left,0px)) 18px; background:#0E1517; border-bottom:1px solid var(--line-2); box-shadow:0 24px 40px -24px rgba(0,0,0,.9)}
.mobile-nav a{display:flex; align-items:center; min-height:48px; padding:0 6px; font-size:1rem; color:var(--ink); border-bottom:1px solid var(--line)}
.mobile-nav .motion-row{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:48px; padding:0 6px; margin-top:6px; background:transparent; border:0; color:var(--text); font-size:.9375rem; text-align:left}
.mobile-nav .motion-row .mt-icon{display:inline-grid; place-items:center; width:36px; height:36px; border:1px solid var(--line-2); border-radius:3px; color:#B6C4BC}
.mobile-nav .motion-row[aria-pressed=true] .mt-icon{color:var(--amber); border-color:rgba(220,170,118,.6)}
.site-progress{position:absolute; left:0; bottom:-1px; height:2px; width:100%; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,#6C9A80,#D4E5D5); box-shadow:0 0 10px rgba(163,219,172,.4); pointer-events:none}

/* ---------- location band (html.away only) and the folded Halifax-only block ---------- */
.geoband{display:none; background:#142024; color:var(--text); border-bottom:1px solid var(--line-2); font-size:.875rem}
html.away .geoband{display:block}
.geoband .in{width:min(1240px, calc(100% - 2 * var(--gutter))); margin-inline:auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; padding-block:8px}
.geoband p{flex:1 1 32em; min-width:0; color:var(--text)}
.geoband p b{color:var(--ink)}
.textbtn{font:600 .8125rem var(--sans); color:var(--ink); background:transparent; border:1px solid var(--line-2); border-radius:3px; padding:6px 12px; min-height:36px; cursor:pointer}
.textbtn:hover{border-color:var(--steel)}
.geopick{display:none; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; width:100%; padding:8px 0 6px}
.geoband.open .geopick{display:flex}
.field{display:flex; flex-direction:column; gap:6px; flex:1 1 180px; min-width:0}
.field label{font-weight:600; font-size:.8125rem; color:var(--ink)}
.field .opt{color:var(--muted); font-weight:400}
.field select,.field input{min-height:44px; padding:8px 11px; background:var(--bg); color:var(--ink); border:1px solid var(--line-2); border-radius:3px; width:100%}
.field select:focus,.field input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(175,204,185,.2)}
.geopick .btn{min-height:44px; padding:8px 16px; font:700 .8125rem var(--sans); color:#101C17; background:linear-gradient(115deg,#E7EDE7,#B9C7C0); border:1px solid #E6EEE6; border-radius:3px}
.geopick .fine{flex-basis:100%; color:var(--muted); font-size:.8125rem}
.hrmfold{display:none; background:var(--bg-2); border-block:1px solid var(--line)}
html.away .hrmfold{display:block}
.hrmfold .in{width:min(1240px, calc(100% - 2 * var(--gutter))); margin-inline:auto; padding-block:30px 34px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px}
.hrmfold h2{font-size:1.25rem; letter-spacing:-.02em; line-height:1.3; flex:1 1 20em}
.hrmfold p{flex:1 1 100%; max-width:52em; font-size:.9375rem}
.hrmfold .btn{flex:none; min-height:44px; padding:9px 18px; font:700 .8125rem var(--sans); color:var(--ink); background:transparent; border:1px solid #6A8274; border-radius:3px}
.hrmfold .btn:hover{background:#1B2A24}
html.away .hrm-only:not(.shown){display:none}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:radial-gradient(ellipse at 74% 36%,#233035 0%,#0E181C 31%,var(--bg) 65%)}
.hero::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(114,159,142,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(114,159,142,.035) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:linear-gradient(90deg,transparent,#000); mask-image:linear-gradient(90deg,transparent,#000); pointer-events:none}
.hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,.98fr) minmax(0,1.08fr); gap:40px; align-items:center; padding-block:52px 44px}
.hero-copy{position:relative; z-index:2; min-width:0}
.hero-copy .eyebrow{color:#A9CDBB}
.hero h1{margin-top:24px; font-size:clamp(2.85rem, .6rem + 4.6vw, 5.1rem); line-height:1; letter-spacing:-.05em; font-weight:650}
.hero h1>span{display:block}
.final-line{font-size:.64em; font-weight:400; letter-spacing:-.035em; line-height:1.12; color:#A7C3B5; padding-top:.3em}
.hero-description{font-size:1.0625rem; line-height:1.72; max-width:29em; margin-top:26px}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:30px}
.hero-price{display:flex; align-items:center; gap:16px; margin-top:28px}
.hero-price>strong{font-size:2rem; font-weight:500; letter-spacing:-.05em; color:var(--ink); line-height:1}
.hero-price>span{font-size:.8125rem; line-height:1.65; color:var(--text); padding-left:16px; border-left:1px solid #3E4B47}
.hero-alt{margin-top:16px; font-size:.875rem; color:var(--muted)}
.hero-object{min-width:0; position:relative; z-index:1}

/* ---------- architecture explorer ---------- */
.architecture-console{position:relative; isolation:isolate; background:#101719; border:1px solid #667571; box-shadow:0 30px 80px rgba(0,0,0,.28), inset 0 1px 0 rgba(228,240,227,.13)}
.architecture-console::before{content:""; position:absolute; inset:-1px 20% auto 8%; height:1px; background:linear-gradient(90deg,transparent,#D6E7DD,transparent); z-index:2}
.architecture-header{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 12px; padding:12px 16px; border-bottom:1px solid #345547; font:500 .6875rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#B9D4C5}
.architecture-header span:last-child{color:#9DB8AA}
.architecture-screen{position:relative; aspect-ratio:1.62; overflow:hidden; background:#0B1513; min-width:0}
.architecture-screen svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.architecture-screen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.architecture-screen::after{content:""; position:absolute; inset:0; border:12px solid rgba(9,19,16,.19); box-shadow:inset 0 0 60px rgba(3,16,11,.32); pointer-events:none}
.scope-beam{position:absolute; top:-12%; bottom:-12%; left:-22%; width:20%; background:linear-gradient(90deg,transparent,rgba(189,238,220,.07),transparent); transform:translateX(0) skewX(-16deg); opacity:0; pointer-events:none; will-change:transform; animation:scope-light 9s ease-in-out infinite}
.architecture-screen[data-view=plan] .scope-beam,.architecture-screen[data-view=elevation] .scope-beam{display:none}
.architecture-nav{display:flex; gap:4px; padding:5px; background:#10191B; border-block:1px solid #345547}
.architecture-nav button{flex:1; min-height:40px; padding:6px 4px; background:transparent; border:1px solid transparent; color:#A7BFB2; font:500 .75rem var(--mono); letter-spacing:.02em}
.architecture-nav button:hover{color:#EFF9F1; background:#1D2E28}
.architecture-nav button[aria-pressed=true]{color:#E2F0E7; background:#2C3C3D; border-color:#769C87; box-shadow:inset 0 1px 0 rgba(203,236,213,.14)}
.layer-control{display:flex; align-items:center; gap:12px; padding:8px 16px; border-bottom:1px solid #314C3E; font:500 .75rem var(--mono); color:#B8CDBF}
.layer-control label{white-space:nowrap}
.layer-control input{flex:1; min-width:40px; height:28px; accent-color:#A6D5B8; margin:0}
.layer-control output{min-width:92px; text-align:right; color:#D0E6D5; font-size:.6875rem}
.layer-control.is-inactive{color:#93A79B}
.layer-control.is-inactive input{opacity:.32}
.layer-control.is-inactive output{color:#93A79B}
.architecture-tools{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:4px 10px; border-bottom:1px solid #314C3E}
.architecture-tools button{min-height:40px; padding:6px 8px; background:transparent; border:0; color:#C2D7CA; font:500 .75rem var(--mono); letter-spacing:.03em}
.architecture-tools button:hover{color:#fff}
.architecture-tools button:disabled{opacity:.4; cursor:default}
.architecture-tools div{display:flex; gap:6px}
.architecture-tools div button{min-width:40px; font-size:1.1rem; line-height:1}
.architecture-parts{display:flex; padding:0 12px; border-bottom:1px solid #314C3E}
.architecture-parts button{flex:1; min-height:42px; padding:6px 4px; background:transparent; border:0; border-bottom:2px solid transparent; color:#A3BCAC; font:500 .75rem var(--mono)}
.architecture-parts button span{margin-right:5px; color:#B8D3BD}
.architecture-parts button:hover{color:var(--ink)}
.architecture-parts button[aria-pressed=true]{color:#E7C291; border-bottom-color:#D8AD77}
.architecture-insight{min-height:84px; padding:13px 16px; background:linear-gradient(115deg,#223131,#131F22)}
.architecture-insight strong{font:600 .6875rem var(--mono); letter-spacing:.08em; color:#E0BC8C; text-transform:uppercase}
.architecture-insight p{font-size:.875rem; line-height:1.55; margin-top:6px; color:#D7E5DB}

/* method rail */
.system-rail{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid #42614E; background:#0D1517; padding-block:20px; overflow:hidden}
.system-rail::before{content:""; position:absolute; top:0; left:0; width:22%; height:1px; background:linear-gradient(90deg,transparent,#C7E3D2,transparent); animation:rail-travel 12s linear infinite}
.system-rail a{display:flex; align-items:center; gap:14px; padding:4px 22px; border-right:1px solid #345541; color:#C2D3C7; min-width:0}
.system-rail a:last-child{border-right:0}
.system-rail a>span{font:500 .75rem var(--mono); color:#A1BBA9}
.system-rail b{display:block; font-size:.875rem; font-weight:600; color:var(--ink)}
.system-rail small{display:block; font-size:.78rem; color:#A7BBAC; margin-top:3px}
.system-rail a:hover b{color:#fff}

/* ---------- section headings ---------- */
.section-heading{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); column-gap:clamp(40px,7vw,100px); align-items:end; margin-bottom:44px}
.section-heading .eyebrow{grid-column:1/-1; margin-bottom:22px}
.section-heading>p:last-child{font-size:1rem; max-width:30em; padding-bottom:6px}
.section-heading.compact{display:block}
.section-heading.compact>p:last-child{margin-top:22px; max-width:36em}

/* ---------- review desk ---------- */
.metal-frame{position:relative; border:1px solid #65716D; box-shadow:inset 0 1px 0 rgba(226,236,227,.13), 0 20px 60px rgba(0,0,0,.13)}
.metal-frame::before{content:""; position:absolute; top:-1px; left:15%; right:35%; height:1px; background:linear-gradient(90deg,transparent,#EDF3EB,transparent); pointer-events:none}
.review-workbench{background:var(--panel)}
.workbench-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px; min-height:64px; padding:12px 26px; border-bottom:1px solid #303C40}
.workbench-bar>span{font:500 .75rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#C3D2C8}
.segmented{display:inline-flex; gap:2px; padding:3px; border:1px solid #384740; background:#0B1110; border-radius:3px}
.segmented button{min-height:40px; padding:8px 14px; border:0; border-radius:1px; background:transparent; color:#B3C2B9; font-size:.8125rem; white-space:nowrap}
.segmented button:hover{color:var(--ink)}
.segmented button[aria-pressed=true]{background:#B7C9BC; color:#0C1810}
.segmented button span{padding-left:6px}
.review-sequence{display:flex; align-items:center; justify-content:space-between; gap:22px; padding:14px 26px; background:#162324; border-bottom:1px solid #43584B}
.review-sequence>div{display:flex; align-items:center; gap:18px}
.review-sequence button{min-height:44px; padding:10px 16px; border:1px solid #759A80; background:#253E2C; color:#E3EEE1; font-size:.8125rem; border-radius:2px}
.review-sequence button:hover{background:#2E4C37}
.review-sequence button[aria-pressed=true]{background:#C7D9C5; color:#142219}
.review-sequence p{font-size:.8125rem; line-height:1.5; color:#C0D2C4; max-width:28em}
.sequence-status{font:500 .6875rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#B4D0BB; white-space:nowrap}
.sequence-steps{display:flex; gap:5px}
.sequence-steps i{display:block; width:28px; height:3px; background:#3B5945}
.sequence-steps i.is-current{background:#D7B585}
.sequence-steps i.is-done{background:#9CC4A8}
.workbench-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,52px); padding:38px}

/* the sample quote: a light document */
.quote-paper{align-self:start; min-width:0; padding:28px 26px 22px; background:var(--paper); color:var(--paper-ink); border-radius:1px; box-shadow:0 18px 30px rgba(0,0,0,.25); transform:rotate(-1deg); transition:transform .4s var(--ease)}
.quote-paper.is-reviewed{transform:none}
.paper-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:16px; border-bottom:1px solid #AEBBAE}
.paper-head strong{display:block; font:600 .75rem var(--mono); letter-spacing:.05em; text-transform:uppercase; color:var(--paper-ink)}
.paper-head div span{display:block; margin-top:6px; font-size:.75rem; color:var(--paper-faint)}
.paper-tag{font:600 .6875rem var(--mono); letter-spacing:.08em; text-transform:uppercase; border:1px solid #7E967F; padding:5px 7px; color:#2F4D35}
.paper-job{font-size:.8125rem; color:var(--paper-text); margin-block:16px 8px}
.quote-line{display:flex; align-items:baseline; justify-content:space-between; gap:14px; width:100%; padding:11px 0; border-bottom:1px solid var(--paper-line); font-size:.8125rem; line-height:1.5; color:var(--paper-ink); text-align:left}
.quote-line>span{min-width:0}
.quote-line b{font-size:.8125rem; font-weight:600; white-space:nowrap}
.quote-line .missing{font-style:italic; color:var(--paper-faint)}
.quote-issue{position:relative; background:transparent; border:0; border-bottom:1px solid var(--paper-line); padding-right:0; font-family:var(--sans); cursor:pointer; transition:background-color .25s, box-shadow .25s, padding .25s}
.quote-issue:hover{background:#DFE5D9}
.quote-issue em{display:none; position:absolute; left:-12px; top:50%; transform:translate(-50%,-50%); width:22px; height:22px; place-items:center; border-radius:50%; background:#C48643; color:#18251C; font:700 .625rem var(--mono); font-style:normal}
.is-reviewed .quote-issue{background:#D9E1D4; padding-left:10px}
.is-reviewed .quote-issue em{display:grid}
.is-reviewed .quote-issue.active{background:#E2C49E; box-shadow:inset 3px 0 #8B5526}
.quote-total{display:flex; justify-content:space-between; align-items:center; gap:18px; padding-top:20px; font-size:.8125rem; color:var(--paper-text)}
.quote-total strong{font-size:1.9rem; font-weight:650; letter-spacing:-.04em; color:var(--paper-ink)}
.paper-note{margin-top:18px; font-size:.75rem; color:var(--paper-faint)}

/* findings */
.review-findings{min-width:0; padding:10px 4px 4px}
.findings-stack{display:grid; margin-top:16px}
.finding{grid-area:1/1; min-width:0; display:flex; flex-direction:column}
html.js .finding{visibility:hidden}
html.js .finding.is-on{visibility:visible}
html:not(.js) .finding+.finding{grid-area:auto; margin-top:22px}
.finding h3{font-size:clamp(1.55rem,1.1rem + 1.2vw,2rem); line-height:1.12; margin-bottom:12px}
.finding>p{font-size:.9375rem}
.finding-detail{margin-top:16px; padding:12px 15px; border-left:2px solid var(--amber); background:#24312B; color:#E0E9E0 !important; font-size:.9375rem; line-height:1.65}
.finding-detail b{color:#F3DDBF}
.finding-options{margin-top:24px; border-top:1px solid #435149}
.finding-options button{display:flex; align-items:center; gap:18px; width:100%; min-height:52px; padding:12px 4px; border:0; border-bottom:1px solid #435149; background:transparent; color:#CDD9CF; text-align:left; transition:color .2s, background-color .2s}
.finding-options button span{font:500 .75rem var(--mono); color:#9DB7A5}
.finding-options button b{font-size:.9375rem; font-weight:500}
.finding-options button i{margin-left:auto; font-style:normal; font-size:1.05rem}
.finding-options button:hover{background:#18231F; color:var(--ink)}
.finding-options button[aria-pressed=true]{color:#F0DABD; box-shadow:inset 2px 0 var(--amber)}
.finding-options button[aria-pressed=true] span{color:var(--amber)}
.review-findings>.text-link{margin-top:22px}
.review-method{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding:22px 26px; background:#0F191C; border-top:1px solid #4B6553}
.review-method>div{display:flex; gap:12px; align-items:flex-start}
.review-method span{font:500 .75rem var(--mono); color:#A3CDAF; padding-top:2px}
.review-method b{display:block; font-size:.9375rem; font-weight:600; color:#DCE7DA}
.review-method p{font-size:.875rem; line-height:1.55; margin-top:4px; color:#AFC2B2}

/* ---------- report ---------- */
.report-section{position:relative; overflow:hidden; background:linear-gradient(135deg,#16211F,#101619 66%); border-block:1px solid #35413E}
.report-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(48px,9vw,130px); align-items:center}
.report-copy h2{margin-top:24px; font-size:clamp(3rem,1.6rem + 4.2vw,5.1rem); letter-spacing:-.05em; line-height:1}
.report-copy>p:not(.eyebrow){max-width:29em; font-size:1rem; margin-top:24px}
.report-tabs{margin-block:28px 22px; border-top:1px solid #46524B}
.report-tabs button{display:flex; align-items:center; gap:18px; width:100%; min-height:54px; padding:14px 0; background:none; border:0; border-bottom:1px solid #46524B; color:#AFC0B2; font-size:.9375rem; text-align:left; transition:color .2s, border-color .2s}
.report-tabs button span{font:500 .75rem var(--mono)}
.report-tabs button i{margin-left:auto; font-style:normal}
.report-tabs button:hover{color:var(--ink)}
.report-tabs button[aria-pressed=true]{color:#F3F1E7; border-bottom-color:#BFD0BF}
.report-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:26px}
.report-actions .cta-note{max-width:20em}
.report-display{position:relative; padding:16px 22px; perspective:1200px}
.report-sheet{position:relative; z-index:1; padding:34px; background:var(--paper); color:var(--paper-ink); transform:rotate(3deg); box-shadow:-15px 18px 0 #27362E, 0 25px 60px rgba(0,0,0,.3); transition:transform .4s var(--ease)}
.report-display:hover .report-sheet,.report-display:focus-within .report-sheet{transform:rotate(0)}
.report-offset-line{position:absolute; inset:1px 0 0 24px; border:1px solid #617668; transform:rotate(-3deg); pointer-events:none}
.report-sheet-top{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:20px; margin-bottom:24px; border-bottom:2px solid #405D49}
.report-sheet-top span{font:800 .9rem var(--sans); font-stretch:122%; letter-spacing:.015em}
.report-sheet-top b{font:600 .6875rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#3F5949}
.sheet-eyebrow{display:block; font:500 .6875rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#4A6252}
.rp-panels{display:grid; margin-top:16px}
.rp-panel{grid-area:1/1; min-width:0; display:flex; flex-direction:column}
.rp-panel .report-verdict{margin-top:auto}
.rp-panel>p+.report-list,.rp-panel>p+.report-visual{margin-bottom:24px}
html.js .rp-panel{visibility:hidden}
html.js .rp-panel.is-on{visibility:visible}
html:not(.js) .rp-panel+.rp-panel{grid-area:auto; margin-top:26px; padding-top:22px; border-top:1px solid var(--paper-line)}
.rp-panel h3{font-size:clamp(1.5rem,1.1rem + 1vw,1.9rem); line-height:1.1; color:var(--paper-ink)}
.rp-panel h3 span{display:block}
.rp-panel>p{font-size:.875rem; line-height:1.65; color:var(--paper-text); margin-top:12px}
.report-visual{margin-block:26px 4px}
.report-visual>span{font:500 .6875rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#435D4A}
.range-track{position:relative; height:13px; margin-top:40px; background:linear-gradient(90deg,#B9C8AE,#6E9471,#B9C8AE); border-inline:1px solid #4C7052}
.range-track i{position:absolute; left:40%; top:-6px; width:2px; height:26px; background:#24412C}
.range-track b{position:absolute; left:40%; top:-28px; transform:translateX(-50%); font-size:.8125rem; font-weight:650}
.range-labels{display:flex; justify-content:space-between; margin-top:12px; font:500 .75rem var(--mono); color:var(--paper-text)}
.range-read{margin-top:14px; font-size:.875rem; color:var(--paper-text)}
.report-list{list-style:none; margin:20px 0 4px; padding:0}
.report-list li{padding:10px 0; border-bottom:1px solid #BCC7B5; font-size:.875rem; line-height:1.5; color:var(--paper-ink)}
.report-list li b{font:600 .75rem var(--mono); color:#7A4A1E; margin-right:8px}
.report-verdict{margin-top:24px; padding-top:18px; border-top:1px solid #A9B7A5}
.report-verdict>span{display:block; margin-bottom:8px; font:600 .6875rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#435D4A}
.report-verdict strong{font-size:1.5rem; line-height:1.15; letter-spacing:-.035em; color:var(--paper-ink)}
.report-signature{display:flex; align-items:center; justify-content:space-between; margin-top:22px; padding-top:13px; border-top:1px solid #B4BFAF; font-size:.75rem; color:var(--paper-faint)}
.report-signature svg{width:24px; fill:none; stroke:#315638; stroke-width:2}

/* expandable sections, shared */
.more{border-top:1px solid #46524B; border-bottom:1px solid #46524B}
.more>summary{display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:52px; padding:12px 0; list-style:none; cursor:pointer; font-size:.9375rem; color:#D5E0D7}
.more>summary::-webkit-details-marker{display:none}
.more>summary>span{font-size:1.3rem; color:#AFC9B5; transition:transform .2s var(--ease)}
.more[open]>summary>span{transform:rotate(45deg)}
.more>summary:hover{color:#fff}
.gets{list-style:none; padding:0 0 18px; margin:0}
.gets li{position:relative; padding:9px 0 9px 26px; font-size:.9375rem; line-height:1.55; color:var(--text)}
.gets li::before{content:"↗"; position:absolute; left:0; top:9px; color:#9FBAA6}

/* ---------- steps ---------- */
.process-head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,6vw,80px); align-items:center}
.photo{position:relative; margin:0; border:1px solid #465047; overflow:hidden; min-width:0; background:var(--panel)}
.photo img{width:100%; height:auto; aspect-ratio:3/2; object-fit:cover}
.image-corner{position:absolute; right:14px; bottom:14px; width:24px; height:24px; border-right:1px solid #E1EBDF; border-bottom:1px solid #E1EBDF; pointer-events:none}
.process-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,55px); list-style:none; padding:0; margin:52px 0 0}
.process-number{font-size:3.3rem; font-weight:400; letter-spacing:-.06em; line-height:1.1; color:#8FA698}
.process-rule{position:relative; height:1px; overflow:hidden; background:linear-gradient(90deg,#8FA792,#37493D); margin-top:6px}
.process-rule::before{content:""; position:absolute; top:0; left:0; width:25%; height:1px; background:#E0F4E0; box-shadow:0 0 8px rgba(177,237,186,.4); animation:rail-travel 7s linear infinite}
.process-grid li:nth-child(2) .process-rule::before{animation-delay:1s}
.process-grid li:nth-child(3) .process-rule::before{animation-delay:2s}
.process-grid h3{font-size:1.4rem; margin:22px 0 10px}
.process-grid p{font-size:.9375rem; max-width:24em}
.trades{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px 18px; list-style:none; padding:22px 0 0; margin:44px 0 0; border-top:1px solid var(--line); font-size:.875rem; color:var(--text)}
.trades li{display:flex; align-items:center; gap:10px}
.trades li::before{content:""; width:5px; height:5px; flex:none; background:#5E8070}
.trades .lbl{grid-column:1/-1; font:500 .75rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--green)}
.trades .lbl::before{display:none}

/* ---------- pricing ---------- */
.pricing-section{background:#101619; border-block:1px solid #27383A}
.pricing-layout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:48px; align-items:start}
.featured-price{padding:34px; background:linear-gradient(140deg,#1C2D25,#111B16)}
.featured-price .eyebrow{color:#B9D6C2}
.featured-price h3{margin-top:18px; font-size:1.35rem}
.price-line{display:flex; align-items:center; gap:22px; margin-top:16px}
.price-line>strong{font-size:clamp(4rem,3rem + 2.4vw,5rem); font-weight:400; line-height:1; letter-spacing:-.07em; color:var(--ink)}
.price-line>span{font-size:.8125rem; line-height:1.7; color:#B9CFC0}
.featured-price>p{font-size:.9375rem; margin-top:16px; color:#C6D6CA}
.featured-price ul{list-style:none; padding:0; margin:20px 0 26px}
.featured-price li{position:relative; padding:8px 0 8px 26px; font-size:.9375rem; color:#D2DED3; line-height:1.5}
.featured-price li::before{content:"↗"; position:absolute; left:0; top:8px; color:#A9C5B0}
.featured-price .button{width:100%}
.price-assurance{margin-top:22px; padding-top:18px; border-top:1px solid #3C5344; font-size:.8125rem !important; line-height:1.65; color:#C0D3C5 !important}
.price-assurance b{color:var(--ink); font-weight:600}
.service-list-title{display:flex; justify-content:space-between; gap:20px; padding:4px 0 16px; border-bottom:1px solid #45514B; font:500 .6875rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#AEC2B5}
.pl-rows{list-style:none; margin:0; padding:0}
.pl-rows a{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; border-bottom:1px solid #35443B; color:var(--ink); text-decoration:none; transition:color .2s}
.pl-rows a>div{min-width:0}
.pl-rows a b{display:block; font-size:1.0625rem; font-weight:550; letter-spacing:-.02em}
.pl-rows a div>span{display:block; margin-top:6px; font-size:.8125rem; line-height:1.55; color:#AFC1B4}
.pl-rows a strong{font-size:1.3rem; font-weight:400; letter-spacing:-.04em; white-space:nowrap}
.pl-rows a strong small{font-size:.75rem; letter-spacing:0; color:#AFC1B4}
.pl-rows a i{margin-left:14px; font-style:normal; font-size:1.05rem; color:#ACC4B1}
.pl-rows a:hover{color:var(--amber)}
.pl-rows a:hover b{color:var(--amber)}
.more-services{border-bottom:1px solid #35443B}
.more-services>summary{display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:56px; padding:14px 0; list-style:none; cursor:pointer; font-size:.9375rem; color:#D5E0D7}
.more-services>summary::-webkit-details-marker{display:none}
.more-services>summary>span{font-size:1.3rem; color:#AFC9B5; transition:transform .2s var(--ease)}
.more-services[open]>summary>span{transform:rotate(45deg)}
.more-services .pl-rows a{padding:18px 0}
.more-services .pl-rows li:last-child a{border-bottom:0}
.service-note{margin-top:18px; font-size:.8125rem; color:var(--muted)}

/* ---------- reviewer and independence ---------- */
.reviewer-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(36px,6vw,82px); align-items:center}
.reviewer-grid .photo img{aspect-ratio:1.15}
/* Matthew's portrait: a 4:5 photo, kept whole on desktop; head-first crop on phones */
.reviewer-grid .photo.me{max-width:460px; justify-self:center; width:100%}
.reviewer-grid .photo.me img{aspect-ratio:4/5; object-position:50% 0}
.photo.me figcaption{position:absolute; left:0; right:0; bottom:0; padding:28px 18px 14px; background:linear-gradient(to top, rgba(17,20,18,.82), rgba(17,20,18,0)); color:#F2F4EF; display:flex; flex-direction:column; gap:2px}
.photo.me figcaption b{font-weight:650; font-size:1.05rem; letter-spacing:.01em}
.photo.me figcaption span{font-size:.85rem; color:#C9D3C8}
.reviewer-copy h2{margin-top:22px; font-size:clamp(2.1rem,1.3rem + 2.2vw,2.9rem)}
.reviewer-copy>p:not(.eyebrow){font-size:.9375rem; margin-top:18px}
.reviewer-copy>p b{color:var(--ink); font-weight:600}
.signature-line{display:flex; align-items:center; gap:16px; margin-top:28px; padding-top:22px; border-top:1px solid #435447}
.signature-line svg{width:34px; height:34px; flex:none}
.signature-line strong{display:block; font-size:.9375rem; font-weight:600}
.signature-line div>span{display:block; margin-top:4px; font-size:.8125rem; color:#A3BBA9}
.promise{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,3vw,36px); list-style:none; padding:28px 0 0; margin:64px 0 0; border-top:1px solid #4B5B51; position:relative}
.promise::before{content:""; position:absolute; top:-1px; left:0; width:30%; height:1px; background:linear-gradient(90deg,var(--steel-hi),transparent)}
.promise li{font-size:.875rem; line-height:1.6; color:var(--text)}
.promise li b{display:block; margin-bottom:8px; font-size:1rem; font-weight:600; color:var(--ink); letter-spacing:-.01em}
.promise li::before{content:counter(list-item, decimal-leading-zero); display:block; margin-bottom:10px; font:500 .75rem var(--mono); color:var(--green)}

/* ---------- Level Bids ---------- */
.bids.section{padding-top:clamp(28px,4vw,48px)}
.bids-banner{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); background:#13211B; border:1px solid #354B40; overflow:hidden}
.bids-image{min-width:0; position:relative; min-height:280px}
.bids-image img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bids-content{padding:clamp(28px,4vw,52px)}
.bids-content h2{margin:18px 0 16px; font-size:clamp(1.9rem,1.2rem + 1.9vw,2.6rem)}
.bids-content>p:not(.eyebrow){font-size:.9375rem}
.bids-actions{display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:26px}
.bids-more{margin-top:28px}
.bids-detail{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,4vw,56px); align-items:center; padding:12px 0 30px}
.rules{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.rules li{position:relative; padding-left:26px; font-size:.9375rem; line-height:1.6; color:var(--text)}
.rules li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--pine-text); font-weight:700}
.rules li b{color:var(--ink); font-weight:600}
.bids-more .cta-note{padding-bottom:20px}

/* the sample bid comparison: a paper document */
.cmpwrap{position:relative; width:100%; max-width:520px; margin-inline:auto; padding:22px 6px 34px}
.cmpsheet{position:relative; padding:34px 18px 18px; background:var(--paper); color:var(--paper-ink); border-radius:1px; transform:rotate(-.8deg); box-shadow:-12px 14px 0 #27362E, 0 24px 50px rgba(0,0,0,.3)}
.cmpsheet .stamp{position:absolute; right:-6px; top:-16px; display:inline-block; border:2.5px solid #C23A11; color:#A33008; background:var(--paper); border-radius:6px; font:780 .95rem var(--sans); font-stretch:118%; letter-spacing:.05em; padding:5px 12px; transform:rotate(-5deg); white-space:nowrap}
.cmpsheet .sh{display:flex; justify-content:space-between; gap:10px; border-bottom:2px solid var(--paper-ink); padding-bottom:8px; margin-bottom:6px; font-size:.8125rem}
.cmpsheet .sh b{font-weight:700; letter-spacing:.02em}
.cmpsheet .sh span{color:var(--paper-faint); font-size:.75rem; text-align:right}
.cmptable{width:100%; border-collapse:collapse; table-layout:fixed; font-size:.8125rem; font-variant-numeric:tabular-nums}
.cmptable th,.cmptable td{padding:7px 4px; border-bottom:1px dashed var(--paper-line); text-align:left; vertical-align:top; color:var(--paper-ink)}
.cmptable thead th{font-weight:700; line-height:1.15; padding-bottom:9px; border-bottom:1px solid #A9B7A5}
.cmptable thead th:first-child{width:24%}
.cmptable thead .fine{font-size:.6875rem; color:var(--paper-faint); font-weight:500}
.cmptable tbody th{color:var(--paper-faint); font-weight:500}
.cmptable td.y{color:#2E6B4F; font-weight:700}
.cmptable td.n{color:#A33008; font-weight:700}
.cmptable tr.tot td{font-weight:750}
.cmpsheet .note{padding:12px 0 4px; font-family:Caveat,"Segoe Print","Bradley Hand",cursive; font-weight:600; font-size:1.2rem; line-height:1.15; color:#A33008}
.cmpsheet .seal{position:absolute; left:14px; bottom:-15px; display:inline-flex; align-items:center; gap:6px; padding:3px 11px 3px 8px; background:#E3EFE7; color:#2E6B4F; border:1.5px solid #2E6B4F; border-radius:999px; font-size:.78rem; font-weight:700; white-space:nowrap; transform:rotate(3deg)}
.cmpsheet .seal svg{width:16px; height:16px}

/* ---------- landlords (HRM) ---------- */
.landlords{background:#0D1517; border-block:1px solid #2C3D37}
.landlords-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(28px,5vw,72px); align-items:center}
.landlords h2{margin-top:20px; font-size:clamp(1.9rem,1.2rem + 1.9vw,2.6rem)}
.landlords-copy>p:not(.eyebrow){font-size:.9375rem; margin-top:16px; max-width:36em}
.landlords-copy .button{margin-top:26px}
.bignums{display:flex; flex-direction:column; gap:22px; padding-left:26px; border-left:1px solid #4B5B51}
.bignums div{display:flex; flex-direction:column; gap:4px}
.bignums dt{font-size:clamp(1.8rem,1.3rem + 1.4vw,2.5rem); font-weight:500; letter-spacing:-.04em; line-height:1.05; color:var(--ink)}
.bignums dd{font-size:.875rem; color:var(--text)}

/* ---------- check it yourself: facts, red flags, deposit check, drawing set ---------- */
.flags-section{background:var(--bg)}
.facts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3.5vw,44px); padding:26px 0 30px; border-block:1px solid #33433C; margin-bottom:46px; position:relative; overflow:hidden}
.facts::before{content:""; position:absolute; top:-1px; left:0; width:22%; height:1px; background:linear-gradient(90deg,transparent,#C7E3D2,transparent); animation:rail-travel 12s linear infinite}
.fact .big{font-size:1.2rem; line-height:1.3; letter-spacing:-.02em; color:var(--ink); font-weight:550}
.fact .big .hl{color:var(--amber)}
.fact p:not(.big){font-size:.875rem; margin-top:10px}
.fact .src{display:block; margin-top:12px; font:500 .6875rem/1.5 var(--mono); letter-spacing:.04em; color:var(--muted)}
.flaggrid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,64px); align-items:start}
.flags{list-style:none; padding:0; margin:0; counter-reset:flag; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 34px}
.flags li{display:flex; gap:14px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line); font-size:.9375rem; line-height:1.5; min-width:0}
.flags li::before{counter-increment:flag; content:counter(flag, decimal-leading-zero); flex:none; font:600 .8125rem var(--mono); color:var(--amber)}
.flags b{color:var(--ink); font-weight:600}
.flags span{color:var(--text)}
.checker{display:flex; flex-direction:column; gap:14px; padding:26px; background:var(--panel); border:1px solid #4E5C57; box-shadow:inset 0 1px 0 rgba(226,236,227,.1)}
.checker h3{display:flex; align-items:center; gap:10px; font-size:1.25rem}
.checker .sub{font-size:.875rem}
.checker label{display:block; margin-bottom:6px; font-size:.8125rem; font-weight:600; color:var(--ink)}
.checker label .opt{color:var(--muted); font-weight:400}
.checker input{width:100%; min-height:48px; padding:11px 12px; font-variant-numeric:tabular-nums; color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:3px}
.checker input:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(175,204,185,.2)}
.checker input::placeholder{color:#7F8E88}
.checker .deprow{display:flex; gap:8px}
.checker .deprow input{flex:1; min-width:0}
.checker .unit{display:flex; flex:none; border:1px solid var(--line-2); border-radius:3px; overflow:hidden; background:var(--bg)}
.checker .unit button{min-width:48px; padding:0 14px; border:0; background:transparent; color:var(--muted); font-weight:650; font-size:1rem}
.checker .unit button+button{border-left:1px solid var(--line-2)}
.checker .unit button.on{background:#B7C9BC; color:#0C1810}
.checker .btn{min-height:48px; padding:12px 18px; font:700 .875rem var(--sans); color:#101C17; background:linear-gradient(115deg,#E7EDE7,#B9C7C0); border:1px solid #E6EEE6; border-radius:3px}
.checker .btn:hover{background:#EFF3ED}
.checker .out{min-height:3.4em; padding:4px 0 4px 14px; border-left:3px solid var(--line-2); font-size:.9375rem; color:var(--text)}
.checker .out b{display:block; color:var(--ink)}
.checker .out.good{border-color:#7CBD97}
.checker .out.warn{border-color:var(--amber)}
.checker .out.bad{border-color:var(--pen)}
.checker .fine{font-size:.8125rem; color:var(--muted)}
.drawing-more{margin-top:46px}
.drawing-more>summary{font-size:1rem}

/* the drawing set (A-01 to A-04), kept from the Nov 1 build: steel frame, graphite drafting surface */
.plate-wrap{padding:10px 0 30px; perspective:1600px}
.plate-frame{position:relative; padding:7px; border-radius:6px; background:var(--chrome); box-shadow:inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(0,0,0,.55), 0 34px 70px -30px rgba(0,0,0,.95)}
.plate-frame::before{content:""; position:absolute; inset:0; border-radius:inherit; background:var(--brush); mix-blend-mode:multiply; pointer-events:none; opacity:.9}
.plate-frame::after{content:""; position:absolute; inset:6px; border-radius:4px; box-shadow:inset 0 0 0 1px var(--steel-shadow); pointer-events:none}
@media (hover:hover) and (pointer:fine){ .plate-frame{transition:transform .5s var(--ease); transform:var(--tilt, none)} }
.plate{position:relative; z-index:1; overflow:hidden; border-radius:3px; padding:18px 22px 0; color:var(--ink); background-color:#141D21;
  background-image:linear-gradient(rgba(114,159,142,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(114,159,142,.07) 1px,transparent 1px); background-size:28px 28px}
.plate-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px 28px; padding-bottom:14px; border-bottom:1px solid var(--line-2)}
.plate-title .ref{display:block; font:500 .6875rem var(--mono); letter-spacing:.13em; color:var(--muted); margin-bottom:6px}
.plate-title h3{font-size:1.15rem; color:var(--ink); letter-spacing:-.02em}
.plate-views{display:inline-flex; gap:2px; padding:3px; border-radius:3px; background:var(--chrome); border:1px solid var(--steel-lo)}
.plate-views button{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 13px; border:0; border-radius:2px; background:transparent; color:#0B0F11; font:650 .8125rem var(--sans)}
.plate-views button span{font:600 .6875rem var(--mono); letter-spacing:.08em}
.plate-views button[aria-pressed=true]{background:#0B0F11; color:var(--ink); box-shadow:inset 0 0 0 1px var(--pine)}
.plate-stage{position:relative; aspect-ratio:1520/840; margin:8px 0 4px}
.plate-view{position:absolute; inset:0; opacity:0; transition:opacity .3s var(--ease)}
.plate-view.is-on{opacity:1}
.plate-view svg{width:100%; height:100%; display:block; overflow:visible}
.pl-ink{fill:none; stroke:var(--steel-hi); stroke-width:1.6px; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round}
.pl-fine{fill:none; stroke:var(--steel); stroke-width:.8px; vector-effect:non-scaling-stroke; opacity:.8}
.pl-faint{opacity:.42}
.pl-dim{fill:none; stroke:var(--steel); stroke-width:.7px; vector-effect:non-scaling-stroke}
.pl-dash{fill:none; stroke:var(--steel); stroke-width:.9px; vector-effect:non-scaling-stroke; stroke-dasharray:9 6; opacity:.7}
.pl-poche{fill:var(--steel-hi); stroke:none}
.pl-cut{fill:var(--steel-hi); opacity:.14; stroke:none}
.pl-text{font-family:var(--mono); fill:var(--ink)} .pl-dimtext{fill:var(--muted)} .pl-room{font-weight:600; fill:var(--ink)}
.pl-marker .pl-ink,.pl-north .pl-fine{fill:none}
.pl-lead{fill:none; stroke:var(--pen); stroke-width:1.4px; vector-effect:non-scaling-stroke}
.pl-dot{fill:var(--pen)}
.pl-note{fill:#F08A5F; font-weight:600}
.hs{cursor:pointer}
.hs circle{fill:#C23A11; stroke:#141D21; stroke-width:2.5px; vector-effect:non-scaling-stroke}
.hs:focus-visible{outline:none}
.hs:focus-visible circle{stroke:var(--amber); stroke-width:4px}
.hs text{fill:#fff; font-family:var(--mono); font-weight:700; pointer-events:none}
.plate[class*="hs-on"] .hs{opacity:.45}
.plate[class*="hs-on"] .note{opacity:.38 !important}
.plate.hs-on-1 .hs[data-hs="1"],.plate.hs-on-2 .hs[data-hs="2"],.plate.hs-on-3 .hs[data-hs="3"],.plate.hs-on-4 .hs[data-hs="4"],.plate.hs-on-5 .hs[data-hs="5"]{opacity:1}
.plate.hs-on-1 .note[data-note="1"],.plate.hs-on-2 .note[data-note="2"],.plate.hs-on-3 .note[data-note="3"],.plate.hs-on-4 .note[data-note="4"],.plate.hs-on-5 .note[data-note="5"]{opacity:1 !important}
.plate.hs-on-1 [data-t="1"],.plate.hs-on-2 [data-t="2"],.plate.hs-on-3 [data-t="3"],.plate.hs-on-4 [data-t="4"],.plate.hs-on-5 [data-t="5"]{stroke:var(--pine-text); stroke-width:3px; opacity:1; stroke-dasharray:none}
.plate-block{display:flex; flex-wrap:wrap; gap:6px 0; margin:0 -22px; padding:10px 22px 12px; background:linear-gradient(180deg,var(--steel-hi),var(--steel)); border-top:1px solid var(--steel-lo); font:600 .6875rem/1.3 var(--mono); letter-spacing:.08em; color:#0B0F11}
.plate-block span{padding-right:14px; margin-right:14px; border-right:1px solid var(--steel-lo)}
.plate-block span:last-child{border-right:0; margin-right:0}
.plate-block .plate-note{color:#7A2208; font-weight:700}
.plate-link{margin-top:16px; padding:12px 16px; border:1px solid var(--line-2); border-left:3px solid var(--pen); background:var(--panel)}
.plate-link .ref{display:block; margin-bottom:4px; font:500 .6875rem var(--mono); letter-spacing:.13em; color:var(--muted)}
.plate-link p{font-size:.9375rem; color:var(--text)} .plate-link p b{color:var(--ink)}
.hs-list{list-style:none; padding:0; margin:14px 0 0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.hs-list li{border-top:1px solid var(--line-2); padding-top:10px; min-width:0}
.hs-btn{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:6px 4px; background:transparent; border:0; border-radius:2px; color:var(--ink); font:650 .9375rem var(--sans); text-align:left}
.hs-btn b{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none; border-radius:50%; background:#C23A11; color:#fff; font:700 .8125rem var(--mono)}
.hs-btn[aria-pressed=true]{color:#F08A5F; box-shadow:inset 0 0 0 1px var(--pen)}
.hs-list p{margin:4px 4px 0; font-size:.875rem; line-height:1.5; color:var(--text)}
/* each view draws in once, then the pen and labels follow */
html.js .plate-view .pl-ink,html.js .plate-view .pl-fine,html.js .plate-view .pl-dash{stroke-dasharray:1; stroke-dashoffset:1}
html.js .plate-view.draw .pl-ink,html.js .plate-view.draw .pl-fine{animation:platedraw .55s ease-out forwards; animation-delay:calc(var(--i, 0) * 9ms)}
html.js .plate-view.draw .pl-dash{animation:platedraw .55s ease-out forwards; animation-delay:1.2s}
html.js .plate-view .pl-poche,html.js .plate-view .pl-dim,html.js .plate-view .pl-text,html.js .plate-view .pl-dimtext,html.js .plate-view .pl-cut,html.js .plate-view .note,html.js .plate-view .hs{opacity:0}
html.js .plate-view.draw .pl-poche{transition:opacity .5s ease .6s; opacity:1}
html.js .plate-view.draw .pl-cut{transition:opacity .6s ease 1.3s; opacity:.14}
html.js .plate-view.draw .pl-dim,html.js .plate-view.draw .pl-dimtext,html.js .plate-view.draw .pl-text{transition:opacity .5s ease 1.4s; opacity:1}
html.js .plate-view [data-stage="2"].pl-ink,html.js .plate-view [data-stage="2"].pl-fine{animation-delay:calc(.45s + var(--i, 0) * 7ms) !important}
html.js .plate-view .note .pl-lead{stroke-dasharray:1; stroke-dashoffset:1}
html.js .plate-view.draw .note{opacity:1; transition:opacity .3s ease 1.9s}
html.js .plate-view.draw .note .pl-lead{animation:platedraw .5s ease-out 1.9s forwards}
html.js .plate-view.draw .hs{opacity:1; transition:opacity .35s ease 2.4s}
html.js .plate-view.drawn .pl-ink,html.js .plate-view.drawn .pl-fine,html.js .plate-view.drawn .pl-dash,html.js .plate-view.drawn .note .pl-lead{animation:none; stroke-dashoffset:0}
html.js .plate-view.drawn .pl-poche,html.js .plate-view.drawn .pl-dim,html.js .plate-view.drawn .pl-text,html.js .plate-view.drawn .pl-dimtext,html.js .plate-view.drawn .note,html.js .plate-view.drawn .hs{opacity:1; transition:none}
html.js .plate-view.drawn .pl-cut{opacity:.14; transition:none}
.plate-view.drawn .pl-faint{opacity:.42}

/* ---------- questions ---------- */
.questions-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(36px,6vw,80px); align-items:start}
.questions-grid h2{margin-block:22px 22px}
.questions-grid .intro>p:not(.eyebrow){font-size:.9375rem}
.faq{border-top:1px solid #4E5D52}
.faq-group{margin:0; padding:26px 0 6px; font:500 .75rem var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--green)}
.faq-group:first-child{padding-top:16px}
.faq details{border-bottom:1px solid #36473D}
.faq summary{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:56px; padding:16px 0; list-style:none; cursor:pointer; font-size:1rem; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; font-size:1.35rem; line-height:1; color:#AFC9B5; transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:#fff}
.faq details p{padding:0 32px 22px 0; font-size:.9375rem}
.faq .body{overflow:hidden}
.faq .body.anim{transition:height .32s var(--ease)}

/* ---------- closing ---------- */
.closing{position:relative; overflow:hidden; background:#0D1215; border-block:1px solid #526168}
.closing-art{position:absolute; inset:0; pointer-events:none}
.closing-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:right center}
.closing-art::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,#0D1215 0%,rgba(13,18,21,.86) 48%,rgba(13,18,21,.3) 100%)}
.closing-content{position:relative; padding-block:clamp(70px,8vw,96px)}
.closing h2{margin-top:24px; font-size:clamp(2.9rem,1.4rem + 4.8vw,5.6rem); line-height:1.02; letter-spacing:-.05em}
.closing h2>span.metal-type{display:block}
.closing-lede{max-width:34em; margin-top:26px; font-size:1rem; color:#D0D9D4 !important}
.closing-actions{display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; margin-top:34px}
.privnote{max-width:44em; margin-top:28px; font-size:.875rem; line-height:1.7; color:#C7D0CB !important}
.privnote b{color:var(--ink); font-weight:600}

/* ---------- phone booking dock ---------- */
.purchase-dock{display:none; position:fixed; left:0; right:0; bottom:0; z-index:45; align-items:center; justify-content:space-between; gap:16px;
  padding:10px max(16px, env(safe-area-inset-right,0px)) max(10px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));
  background:rgba(12,23,19,.97); -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px); border-top:1px solid #718F7B; transform:translateY(110%); transition:transform .3s var(--ease)}
.purchase-dock strong{display:block; font-size:.8125rem; font-weight:600}
.purchase-dock small{display:block; margin-top:3px; font-size:.75rem; color:#B2CABA}
.purchase-dock .button{min-height:44px; padding:10px 14px; gap:16px; font-size:.8125rem; flex:none}

/* ---------- footer ---------- */
.site-footer{padding-top:44px; border-top:1px solid var(--line)}
.footer-top{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap}
.footer-top nav{display:flex; flex-wrap:wrap; gap:6px 24px; font-size:.875rem}
.footer-top nav a{color:#C3CEC7; padding:6px 0}
.footer-top nav a:hover{color:var(--ink)}
.site-footer p{font-size:.8125rem; line-height:1.75; color:#A5B3AD; max-width:62em; margin-top:16px}
.site-footer p:first-of-type{margin-top:28px}
.site-footer p b{color:var(--ink); font-weight:600}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin-top:28px; padding:18px 0 24px; border-top:1px solid #303D36; font:500 .6875rem var(--mono); letter-spacing:.04em; color:#A0AEA8}

/* ---------- round 2 (Nov 1, late morning): instrument readout, scope callouts, marked-up quote, sheet marks ---------- */
/* explorer: a live readout of the view, sitting on the drawing like an instrument's status line */
.readout{position:absolute; left:12px; top:10px; z-index:2; display:flex; flex-wrap:wrap; gap:0; max-width:calc(100% - 24px); padding:5px 9px; font:500 .6875rem/1.35 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#C9DDD1; background:rgba(8,16,14,.78); border:1px solid #2F4A40; border-left:2px solid var(--green); pointer-events:none; font-variant-numeric:tabular-nums}
.readout .ro-extra{color:#9FBDAE; white-space:pre}
.architecture-screen[data-view=material] .readout{background:rgba(8,12,12,.7)}
/* layer slider, replay and rotation share one row on wider screens */
.architecture-controls{display:flex; align-items:stretch; border-bottom:1px solid #314C3E}
.architecture-controls .layer-control{flex:1 1 auto; border-bottom:0; min-width:0}
.architecture-controls .architecture-tools{flex:none; border-bottom:0; border-left:1px solid #314C3E}
/* what's on the quote, what isn't, and what to ask */
.insight-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 18px; margin:10px 0 0}
.insight-grid div{min-width:0; padding-top:8px; border-top:1px solid rgba(175,204,185,.22)}
.insight-grid dt{font:500 .6875rem var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#A9CDBB}
.insight-grid div:nth-child(2) dt{color:#E0BC8C}
.insight-grid dd{margin:4px 0 0; font-size:.8125rem; line-height:1.45; color:#E0EAE3}
.insight-link{display:inline-flex; align-items:center; gap:8px; margin-top:10px; min-height:32px; font-size:.8125rem; color:#D7E5DB; border-bottom:1px solid #6E8F7E; text-decoration:none}
.insight-link:hover{color:#fff; border-bottom-color:var(--green)}
.architecture-insight{min-height:0}

/* the sample quote, marked up: the reviewer's pen notes and the circled deposit appear with the review.
   Their space is kept while hidden, so showing the review moves nothing. */
.quote-line .pen{display:block; margin-top:2px; font:600 1.06rem/1.1 Caveat,"Segoe Print","Bradley Hand",cursive; font-style:normal; letter-spacing:.01em; color:#8E2A06; visibility:hidden; opacity:0; transform:translateX(-6px); transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s .45s}
.quote-line .pen.ok{color:#245C42}
.is-reviewed .quote-line .pen{visibility:visible; opacity:1; transform:none; transition:opacity .45s var(--ease), transform .45s var(--ease), visibility 0s}
.is-reviewed .quote-issue[data-issue=scope] .pen{transition-delay:.15s}
.is-reviewed .quote-issue[data-issue=disposal] .pen{transition-delay:.3s}
.is-reviewed .quote-issue[data-issue=payment] .pen{transition-delay:.45s}
.quote-line .circ{position:relative; display:inline-block; padding:0 4px}
.quote-line .circ svg{position:absolute; left:-10px; top:-7px; width:calc(100% + 20px); height:calc(100% + 14px); overflow:visible; pointer-events:none}
.quote-line .circ ellipse{fill:none; stroke:#B8360B; stroke-width:1.8; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .25s var(--ease)}
.is-reviewed .quote-line .circ ellipse{stroke-dashoffset:0; transition:stroke-dashoffset .7s var(--ease) .55s}
html:not(.js) .quote-line .pen{visibility:visible; opacity:1; transform:none}
html:not(.js) .quote-line .circ ellipse{stroke-dashoffset:0}

/* drawing-sheet reference marks along the top of the hero, like the border of a construction sheet */
.sheet-marks{position:absolute; left:0; right:0; top:14px; display:none; grid-template-columns:repeat(6,1fr); pointer-events:none; z-index:1}
.sheet-marks span{position:relative; text-align:center; font:500 .625rem var(--mono); letter-spacing:.12em; color:#6E8A82; border-left:1px solid rgba(85,113,106,.45); height:14px; line-height:14px}
.sheet-marks span:last-child{border-right:1px solid rgba(85,113,106,.45)}
.sheet-marks::after{content:""; position:absolute; left:0; right:0; top:7px; height:1px; background:linear-gradient(90deg,rgba(85,113,106,.35),rgba(85,113,106,.12) 50%,rgba(85,113,106,.35)); z-index:-1}

/* the header marks the section being read */
.desktop-nav a[aria-current]{color:var(--ink)}
.desktop-nav a[aria-current]::after{transform:none; background:var(--green)}

/* a short steel rule after each section label, drawn as the section arrives */
.section-heading .eyebrow{display:flex; align-items:center; gap:14px}
.section-heading .eyebrow::after{content:""; flex:none; width:72px; height:1px; background:linear-gradient(90deg,var(--steel-hi),rgba(231,238,241,0)); transform-origin:left center}
html.js .section-heading.rv .eyebrow::after{transform:scaleX(0); transition:transform .9s var(--ease) .25s}
html.js .section-heading.rv.rv-in .eyebrow::after{transform:none}

/* light moving across the steel in the closing section */
.closing-art::before{content:""; position:absolute; top:-20%; bottom:-20%; left:40%; width:22%; z-index:1; background:linear-gradient(100deg,transparent 0%,rgba(231,238,241,0) 30%,rgba(231,238,241,.10) 50%,rgba(231,238,241,0) 70%,transparent 100%); transform:translateX(-120%) skewX(-14deg); animation:steel-light 11s ease-in-out infinite; pointer-events:none}
@keyframes steel-light{0%,18%{transform:translateX(-120%) skewX(-14deg); opacity:0} 30%{opacity:1} 70%{opacity:1} 82%,100%{transform:translateX(330%) skewX(-14deg); opacity:0}}
html[data-motion=off] .closing-art::before{display:none}

/* footer: a title block, as on a drawing sheet */
.title-block{display:grid; grid-template-columns:1.3fr 1fr 1.5fr 1fr .8fr; margin-top:30px; border:1px solid #3A4A46; border-bottom:0}
.title-block span{display:flex; flex-direction:column; gap:3px; padding:10px 14px; border-left:1px solid #3A4A46; font:500 .75rem/1.35 var(--mono); color:#C3CEC7; min-width:0}
.title-block span:first-child{border-left:0}
.title-block b{font:600 .625rem var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#9DB8AA}
.title-block span:first-child b{font:800 .9rem var(--sans); font-stretch:122%; letter-spacing:.015em; text-transform:uppercase; color:var(--ink)}
.title-block + .footer-bottom{margin-top:0; border-top:1px solid #3A4A46}

/* ---------- motion ---------- */
@keyframes button-sweep{to{transform:translateX(450%) skewX(-24deg)}}
@keyframes rail-travel{from{transform:translateX(-20%); opacity:0} 10%{opacity:1} 90%{opacity:1} to{transform:translateX(450%); opacity:0}}
@keyframes scope-light{0%,10%{transform:translateX(0) skewX(-16deg); opacity:0} 20%{opacity:1} 60%,100%{transform:translateX(660%) skewX(-16deg); opacity:0}}
@keyframes platedraw{to{stroke-dashoffset:0}}
@keyframes enter{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
html.js[data-motion=on] .hero-copy{animation:enter .7s var(--ease) both}
html.js[data-motion=on] .hero-object{animation:enter .85s .08s var(--ease) both}
html.js .rv{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
html.js .rv.rv-in,html.js .rv:focus-within{opacity:1; transform:none}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{animation:none !important; transition:none !important}
html[data-motion=off] .rv{opacity:1 !important; transform:none !important}
html[data-motion=off] .scope-beam,html[data-motion=off] .system-rail::before,html[data-motion=off] .process-rule::before,html[data-motion=off] .facts::before{display:none}
html[data-motion=off] .plate-view .pl-ink,html[data-motion=off] .plate-view .pl-fine,html[data-motion=off] .plate-view .pl-dash,html[data-motion=off] .plate-view .note .pl-lead{stroke-dashoffset:0 !important}
html[data-motion=off] .plate-view .pl-poche,html[data-motion=off] .plate-view .pl-dim,html[data-motion=off] .plate-view .pl-text,html[data-motion=off] .plate-view .pl-dimtext,html[data-motion=off] .plate-view .note,html[data-motion=off] .plate-view .hs{opacity:1 !important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rv{opacity:1 !important; transform:none !important}
  .scope-beam,.system-rail::before,.process-rule::before,.facts::before,.closing-art::before{display:none}
  .quote-line .pen{transform:none}
}

/* ---------- responsive ---------- */
@media (min-width:1101px){
  .sheet-marks{display:grid}
  .questions-grid .intro{position:sticky; top:calc(var(--header) + 40px)}
}
@media (min-width:1600px){
  .hero-grid{padding-block:84px 70px}
  .hero-description{font-size:1.125rem}
}
@media (max-width:1180px){
  .desktop-nav{gap:18px}
  .desktop-nav a:nth-child(5){display:none}
}
@media (max-width:1100px){
  :root{--gutter:35px}
  .site-header{padding-inline:max(24px, env(safe-area-inset-left,0px)) max(24px, env(safe-area-inset-right,0px))}
  .desktop-nav a:nth-child(4){display:none}
  .hero-grid{gap:28px}
  .architecture-screen{aspect-ratio:1.45}
  .system-rail a{padding-inline:14px; gap:10px}
  .review-sequence p{max-width:20em}
  .workbench-grid{padding:28px}
  .pricing-layout{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:30px}
  .featured-price{padding:28px}
  .hs-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr); padding-block:40px 34px; gap:34px}
  .hero h1{font-size:clamp(2.75rem, 1.2rem + 6.6vw, 4.6rem)}
  .hero-description{max-width:36em}
  .architecture-screen{aspect-ratio:1.6}
  .title-block{grid-template-columns:repeat(3,minmax(0,1fr))}
  .title-block span:nth-child(4){border-left:0}
  .title-block span:nth-child(n+4){border-top:1px solid #3A4A46}
}
@media (max-width:920px){
  .flaggrid,.bids-detail,.landlords-grid{grid-template-columns:minmax(0,1fr)}
  .bignums{padding-left:0; padding-top:22px; border-left:0; border-top:1px solid #4B5B51}
  .promise{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:800px){
  :root{--gutter:22px; --header:64px}
  .site-header{padding-inline:max(18px, env(safe-area-inset-left,0px)) max(18px, env(safe-area-inset-right,0px))}
  .desktop-nav{display:none}
  .menu-toggle{display:inline-grid}
  .motion-toggle{width:44px; height:44px}
  .brand svg{width:28px; height:28px}
  .brand b{font-size:1.05rem}
  .hero-grid{padding-block:36px 30px; gap:32px}
  .hero h1{font-size:clamp(2.75rem, 1.2rem + 7.6vw, 4.4rem)}
  .architecture-screen{aspect-ratio:1.3}
  .architecture-nav button,.architecture-parts button{min-height:44px}
  .architecture-tools button{min-height:44px}
  .architecture-tools div button{min-width:44px}
  .layer-control{padding-block:6px}
  .layer-control input{height:44px}
  .architecture-controls{display:block; border-bottom:0}
  .architecture-controls .layer-control{border-bottom:1px solid #314C3E}
  .architecture-controls .architecture-tools{border-left:0; border-bottom:1px solid #314C3E}
  .insight-grid{grid-template-columns:minmax(0,1fr); gap:0}
  .insight-grid div{display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; padding:8px 0}
  .insight-grid dd{margin:0}
  .readout .ro-extra{display:none}
  .system-rail{grid-template-columns:repeat(2,minmax(0,1fr)); padding-block:0}
  .system-rail a{padding:18px 16px; border-bottom:1px solid #345541}
  .system-rail a:nth-child(2){border-right:0}
  .system-rail a:nth-child(3),.system-rail a:nth-child(4){border-bottom:0}
  .section-heading{display:block; margin-bottom:30px}
  .section-heading>p:last-child{margin-top:18px; max-width:36em}
  .workbench-bar{padding:14px 18px}
  .review-sequence{flex-direction:column; align-items:flex-start; gap:12px; padding:16px 18px}
  .review-sequence>div{flex-wrap:wrap; gap:10px 16px}
  .review-sequence p{max-width:none}
  .workbench-grid{grid-template-columns:minmax(0,1fr); gap:26px; padding:22px 18px 26px}
  .quote-paper{transform:rotate(-.6deg)}
  .review-method{grid-template-columns:minmax(0,1fr); gap:16px; padding:20px 18px}
  .report-layout{grid-template-columns:minmax(0,1fr); gap:44px}
  .report-display{max-width:500px; width:100%; margin-inline:auto; padding:12px 18px 22px}
  .report-sheet{padding:26px}
  .process-head{grid-template-columns:minmax(0,1fr)}
  .process-grid{grid-template-columns:minmax(0,1fr); gap:0; margin-top:34px}
  .process-grid li{display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:18px; padding:22px 0; border-top:1px solid #35483B}
  .process-number{grid-row:1/4; font-size:2.3rem}
  .process-rule{display:none}
  .process-grid h3{margin:2px 0 8px; font-size:1.25rem}
  .pricing-layout{grid-template-columns:minmax(0,1fr); gap:36px}
  .reviewer-grid{grid-template-columns:minmax(0,1fr); gap:30px}
  .reviewer-grid .photo img{aspect-ratio:1.6}
  .reviewer-grid .photo.me{max-width:420px}
  .reviewer-grid .photo.me img{aspect-ratio:1}
  .bids-banner{grid-template-columns:minmax(0,1fr)}
  .bids-image{min-height:0; aspect-ratio:16/9}
  .questions-grid{grid-template-columns:minmax(0,1fr); gap:24px}
  .facts{grid-template-columns:minmax(0,1fr); gap:22px}
  .flags{grid-template-columns:minmax(0,1fr)}
  .closing-art::after{background:linear-gradient(90deg,rgba(13,18,21,.94),rgba(13,18,21,.72))}
  .purchase-dock{display:flex}
  .purchase-dock.is-visible{transform:none}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  body.dock-visible .site-header .button-small{opacity:0; visibility:hidden}
  .plate{padding:14px 12px 0}
  .plate-block{margin:0 -12px; padding:10px 12px}
  .plate-view svg .note{display:none}
  .hs-list{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .header-actions .button-small{padding:9px 11px; gap:10px}
  .header-actions .motion-toggle{display:none}
}
@media (max-width:480px){
  :root{--gutter:18px}
  .site-header{gap:8px; padding-inline:max(12px, env(safe-area-inset-left,0px)) max(12px, env(safe-area-inset-right,0px))}
  .brand{gap:6px}
  .brand svg{width:24px; height:24px}
  .brand b{font-size:.92rem; font-stretch:108%; letter-spacing:.01em}
  .header-actions{gap:8px}
  .header-actions .button-small{padding:9px 10px; gap:8px; font-size:.78rem}
  .hero h1{font-size:clamp(2.3rem, .6rem + 9.6vw, 3.2rem)}
  .hero-actions{align-items:flex-start}
  .hero-price>strong{font-size:1.75rem}
  .architecture-screen{aspect-ratio:1.18}
  .title-block{grid-template-columns:minmax(0,1fr)}
  .title-block span{border-left:0; border-top:1px solid #3A4A46; flex-direction:row; justify-content:space-between; gap:12px; text-align:right}
  .title-block span:first-child{border-top:0}
  .architecture-nav{gap:2px; padding:4px}
  .architecture-nav button{font-size:.6875rem; padding-inline:2px}
  .architecture-parts{padding:0 6px}
  .layer-control{gap:9px; padding-inline:12px}
  .layer-control output{min-width:76px}
  .workbench-bar .segmented{width:100%}
  .workbench-bar .segmented button{flex:1}
  .quote-paper{padding:22px 16px 18px}
  .quote-issue em{left:-8px; width:18px; height:18px}
  .quote-line{gap:10px}
  .report-copy h2{font-size:3.2rem}
  .report-display{padding-inline:12px}
  .report-sheet{padding:22px 18px; transform:rotate(1.6deg); box-shadow:-9px 12px 0 #27362E, 0 20px 40px rgba(0,0,0,.3)}
  .featured-price{padding:24px 20px}
  .pl-rows a{gap:14px}
  .pl-rows a i{margin-left:8px}
  .promise{grid-template-columns:minmax(0,1fr)}
  .bids-content{padding:24px 20px}
  .closing-actions{flex-direction:column; align-items:flex-start}
  .cmptable{font-size:.75rem}
  .cmptable th,.cmptable td{padding:6px 2px}
  .cmpwrap{padding-inline:0}
  .cmpsheet .stamp{right:2px}
  .plate-views{display:flex; width:100%}
  .plate-views button{flex:1; justify-content:center; padding-inline:4px; font-size:.75rem}
  .plate-views button span{display:none}
}

@media (max-width:400px){
  .menu-toggle{width:42px}
  .header-actions .button-small>span{display:none}
}
@media (max-width:340px){
  .header-actions .button-small{display:none}
}

/* ---------- Home page v4 (Nov 1, 2026, evening): a short sales page ----------
   Hero with the review photo and a sample verdict, a trust strip, service cards (three main, four more, an HRM block),
   three steps, the sample report, the reviewer, Halifax sections, "check it yourself", FAQ. The review desk, scope explorer
   and drawing set moved to /how-we-review, which shares this stylesheet. Same tokens, type and steel buttons as v3. */
.v4-hero .wrap{position:relative}
.v4-hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(32px,5vw,72px); align-items:center; padding-block:clamp(40px,6vw,76px) clamp(40px,5vw,64px)}
.v4-hero-copy{position:relative; z-index:2; min-width:0}
.v4-hero-copy .eyebrow{color:#A9CDBB}
.v4-checks{list-style:none; padding:0; margin:28px 0 0; display:grid; gap:10px}
.v4-checks li{position:relative; padding-left:30px; font-size:.95rem; color:var(--text); line-height:1.5}
.v4-checks li::before{content:""; position:absolute; left:2px; top:.28em; width:16px; height:16px; border-radius:50%; background:#1D3A2C; box-shadow:inset 0 0 0 1px #4E7F63}
.v4-checks li::after{content:""; position:absolute; left:7px; top:.5em; width:5px; height:8px; border:solid var(--pine-text); border-width:0 2px 2px 0; transform:rotate(45deg)}
.v4-checks b{color:var(--ink); font-weight:650}
.v4-hero-media{position:relative; margin:0; min-width:0}
.v4-hero-media img{width:100%; height:auto; aspect-ratio:4/3.1; object-fit:cover; border:1px solid #4E5E58; box-shadow:0 30px 80px rgba(0,0,0,.35)}
.v4-verdict{position:absolute; left:-28px; bottom:-26px; width:min(340px,82%); background:var(--paper); color:var(--paper-ink); border:1px solid var(--paper-line); padding:16px 18px 14px; box-shadow:0 24px 50px rgba(0,0,0,.45); transform:rotate(-1.2deg)}
.v4-verdict-tag{display:block; font:600 .68rem/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--paper-faint)}
.v4-range{position:relative; height:10px; margin:30px 0 6px; background:linear-gradient(90deg,#8DB69A,#5E9C7A 50%,#8DB69A); border-radius:5px} /* the bar is the sample's fair range, $17,500 to $21,000 */
.v4-range i{position:absolute; left:40%; top:-5px; width:3px; height:20px; background:var(--paper-ink); border-radius:2px}
.v4-range b{position:absolute; left:40%; bottom:15px; transform:translateX(-50%); font:700 .85rem/1 var(--sans); color:var(--paper-ink); white-space:nowrap}
.v4-range-labels{display:flex; justify-content:space-between; font:500 .7rem/1.2 var(--mono); color:var(--paper-faint)}
.v4-verdict-call{margin-top:10px; padding-top:10px; border-top:1px dashed var(--paper-line); color:var(--paper-ink) !important; font-weight:650; font-size:.98rem; line-height:1.35}

.v4-trust{border-block:1px solid var(--line); background:#0C1316}
.v4-trust .wrap{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0}
.v4-trust span{padding:20px 22px; font-size:.9rem; color:var(--text); line-height:1.45; border-left:1px solid var(--line)}
.v4-trust span:first-child{border-left:0; padding-left:0}
.v4-trust b{display:block; color:var(--ink); font-size:1.05rem; font-weight:650; margin-bottom:2px}

.v4-head{max-width:46rem; margin-bottom:clamp(28px,4vw,44px)}
.v4-head .eyebrow{margin-bottom:14px}
.v4-head h2,.v4-services h2,.v4-how h2{font-size:clamp(1.95rem,1.15rem + 2.3vw,3rem); letter-spacing:-.04em; line-height:1.08}
.v4-head p:last-child{margin-top:14px; font-size:1rem; max-width:40em}

.v4-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch}
.v4-card{position:relative; display:flex; flex-direction:column; gap:12px; background:var(--panel); border:1px solid var(--line-2); padding:28px 24px 22px; min-width:0}
.v4-card.is-featured{background:linear-gradient(160deg,#18291F,#101A15); border-color:#5C8A6E; box-shadow:0 20px 50px rgba(0,0,0,.25)}
.v4-tag{position:absolute; top:-12px; left:22px; background:var(--green); color:#0B1410; font:700 .68rem/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; padding:6px 9px}
.v4-card h3{font-size:1.35rem; letter-spacing:-.02em}
.v4-card>p{font-size:.95rem; color:var(--text)}
.v4-price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:6px 0 4px}
.v4-price strong{font-size:2.6rem; font-weight:550; letter-spacing:-.05em; color:var(--ink); line-height:1}
.v4-price>span{font-size:.82rem; color:var(--muted)}
.v4-ticks{list-style:none; padding:14px 0 0; margin:0 0 6px; border-top:1px solid var(--line); display:grid; gap:9px}
.v4-ticks li{position:relative; padding-left:24px; font-size:.92rem; color:#CFD9D2; line-height:1.45}
.v4-ticks li::before{content:""; position:absolute; left:3px; top:.38em; width:5px; height:9px; border:solid var(--pine-text); border-width:0 2px 2px 0; transform:rotate(45deg)}
.v4-card .button{margin-top:auto; width:100%}
.v4-fine{font-size:.8rem !important; color:var(--muted) !important}
.v4-guarantee{margin-top:22px; padding:14px 18px; border:1px solid #3E5A4A; background:#0F1B16; font-size:.92rem; color:var(--text)}
.v4-guarantee b{color:var(--ink)}
.v4-sub{margin-top:clamp(40px,5vw,56px); font-size:1.2rem; letter-spacing:-.02em}
.v4-minis{list-style:none; padding:0; margin:16px 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.v4-minis a{display:flex; flex-direction:column; gap:6px; height:100%; padding:18px 18px 16px; background:var(--panel-2); border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:border-color .2s, background-color .2s}
.v4-minis a:hover,.v4-minis a:focus-visible{border-color:#6A8274; background:#13201B}
.v4-minis b{font-size:1rem; font-weight:600; letter-spacing:-.015em; line-height:1.3}
.v4-minis span{font-size:.84rem; color:var(--muted); line-height:1.45}
.v4-minis strong{margin-top:auto; padding-top:10px; font-size:1.35rem; font-weight:550; letter-spacing:-.04em}
.v4-minis strong::after{content:" ↗"; font-size:.85rem; color:#9FBBA8}
.v4-minis strong small{font-size:.72rem; letter-spacing:0; color:var(--muted); font-weight:400}
.v4-local{margin-top:clamp(36px,5vw,52px); padding:24px; border:1px solid #5B4A36; background:linear-gradient(160deg,#1A1712,#11120F)}
.v4-local-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 20px}
.v4-local-head h3{font-size:1.2rem; letter-spacing:-.02em; color:var(--amber)}
.v4-local-head p{font-size:.88rem; color:var(--muted)}
.v4-local .v4-minis a{background:#15140F; border-color:#3D3528}
.v4-local .v4-minis a:hover{border-color:var(--cedar)}
.v4-services .service-note{margin-top:22px}

.v4-steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; counter-reset:none}
.v4-steps li{background:var(--panel); border:1px solid var(--line-2); padding:26px 24px; display:flex; flex-direction:column; gap:10px}
.v4-step-n{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid #6A8274; color:var(--ink); font-weight:650; font-size:1.05rem}
.v4-steps h3{font-size:1.2rem}
.v4-steps p{font-size:.94rem}
.v4-how-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px 32px; margin-top:28px}
.v4-how-foot .trades{flex:1 1 520px; margin:0; padding-top:0; border-top:0}
.v4-more-link{margin-top:28px}

.v4-intro{position:relative; background:radial-gradient(ellipse at 74% 36%,#233035 0%,#0E181C 31%,var(--bg) 65%); border-bottom:1px solid var(--line)}
.v4-intro .wrap{padding-block:clamp(34px,5vw,64px)}
.v4-intro h1{margin-top:14px; font-size:clamp(2.2rem,1.3rem + 3vw,3.6rem); letter-spacing:-.045em; line-height:1.04}
.v4-crumbs{font-size:.85rem; color:var(--muted); margin-bottom:18px}
.v4-crumbs a{color:var(--text); text-decoration:none} .v4-crumbs a:hover{color:var(--ink)}

.explore-model{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr); gap:clamp(28px,4vw,56px); align-items:center; margin-top:64px}
.explore-model-copy h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem)}
.explore-model-copy p{margin-top:14px; max-width:26em}

@media (max-width:1100px){
  .v4-minis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .v4-hero-grid{grid-template-columns:minmax(0,1fr)}
  .v4-hero-media{max-width:620px}
  .v4-verdict{left:12px; bottom:-30px}
  .v4-hero-grid{padding-bottom:64px}
  .v4-cards,.v4-steps{grid-template-columns:minmax(0,1fr)}
  .v4-cards{max-width:560px}
  .explore-model{grid-template-columns:minmax(0,1fr); margin-top:48px}
}
@media (max-width:800px){
  .v4-trust .wrap{grid-template-columns:minmax(0,1fr)}
  .v4-trust span{border-left:0; border-top:1px solid var(--line); padding:14px 0}
  .v4-trust span:first-child{border-top:0}
  .v4-card{padding:24px 18px 18px}
  .v4-local{padding:18px}
}
@media (max-width:560px){
  .v4-minis{grid-template-columns:minmax(0,1fr)}
  .v4-minis a{flex-direction:row; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:12px}
  .v4-minis b{flex:1 1 60%}
  .v4-minis span{order:3; flex-basis:100%}
  .v4-minis strong{margin-top:0; padding-top:0}
  .v4-hero-media img{display:none} /* on phones the sample verdict carries the hero; the services come sooner */
  .v4-verdict{position:relative; left:auto; bottom:auto; width:auto; margin:0; transform:none}
  .v4-hero-grid{padding-bottom:36px; gap:26px}
}

/* ---------- v5 (Nov 1, 2026, night): the instrument layer ----------
   The brand is a level, so every technical-looking thing on the page is a real measurement: the hero panel checks the
   sample quote line by line and a level vial shows where its price sits against the fair range; the 48-hour window is a
   calibrated track; the trust strip is a ruler edge; the deposit check answers with the same vial. One orchestrated
   moment (the hero check on load); everything else moves only when someone acts. Paper stays for documents. */
:root{--signal:#7FD3A5; --signal-soft:rgba(127,211,165,.12); --caution:#DCAA76; --flag:#F08A5F; --hair:rgba(175,204,185,.22)}
body{font-variant-numeric:lining-nums}
.v4-price strong,.v4-minis strong,.lqc-lines b,.lqc-total b,.stat-num,.checker .out b{font-variant-numeric:tabular-nums lining-nums}

/* section labels: sentence case, a measured tick instead of tracked capitals */
.eyebrow{font:600 .8125rem/1.5 var(--sans); letter-spacing:.01em; text-transform:none; color:#A9C7B5; display:flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:18px; height:1px; flex:none; background:currentColor; opacity:.75; box-shadow:0 -3px 0 -0px transparent}
.v4-hero-copy .eyebrow::before,.eyebrow:has(.status-dot)::before{display:none}
.status-dot{margin-right:0}
.faq-group,.trades .lbl{font:600 .8125rem/1.5 var(--sans); letter-spacing:.01em; text-transform:none}
.v4-tag{font:700 .72rem/1 var(--sans); letter-spacing:.02em; text-transform:none; padding:6px 10px}

/* hero ground: a fine drafting grid under the existing coarse one, fading out toward the copy */
.v4-hero::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(150,190,175,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(150,190,175,.035) 1px,transparent 1px);
  background-size:12px 12px; -webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 45%,#000 0%,transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 72% 45%,#000 0%,transparent 75%)}
.v4-hero-media img{border-color:#3C4B47; border-radius:4px}

/* the review panel */
.lq-console{position:absolute; left:calc(-1 * clamp(24px, (100vw - 1100px) * .42, 120px)); bottom:-52px; z-index:3; width:min(384px,84%); padding:14px 16px 15px; color:var(--text);
  background:linear-gradient(180deg,rgba(19,27,31,.96),rgba(11,17,20,.97)); border:1px solid var(--hair); border-radius:6px;
  box-shadow:0 34px 80px -20px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.lqc-head{position:relative; display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:10px; margin-bottom:4px; font-size:.78rem; font-weight:600; color:var(--ink)}
.lqc-head::before{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line)}
.lqc-head::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,var(--signal),rgba(127,211,165,.4)); transform-origin:left center}
.lqc-chip{font-size:.7rem; font-weight:600; color:var(--muted); padding:3px 8px; border:1px solid var(--line-2); border-radius:999px; white-space:nowrap}
.lqc-lines{list-style:none; margin:0; padding:0}
.lqc-lines li{display:grid; grid-template-columns:minmax(0,1fr) auto 72px; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed rgba(58,72,70,.7); font-size:.8125rem; line-height:1.3}
.lqc-lines li span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lqc-lines b{font-weight:600; color:var(--ink); text-align:right}
.lqc-lines em{font-style:normal; font-size:.6875rem; font-weight:700; letter-spacing:.01em; text-align:center; padding:3px 0; border-radius:3px}
.lqc-lines [data-s="ok"] em{color:var(--signal); background:var(--signal-soft); box-shadow:inset 0 0 0 1px rgba(127,211,165,.3)}
.lqc-lines [data-s="pin"] em{color:var(--caution); background:rgba(220,170,118,.1); box-shadow:inset 0 0 0 1px rgba(220,170,118,.32)}
.lqc-lines [data-s="miss"] em,.lqc-lines [data-s="flag"] em{color:var(--flag); background:rgba(232,103,61,.12); box-shadow:inset 0 0 0 1px rgba(232,103,61,.38)}
.lqc-level{padding-top:12px}
.lqc-total{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 0 10px; font-size:.78rem; color:var(--muted)}
.lqc-total b{font-size:1.1rem; font-weight:650; color:var(--ink); letter-spacing:-.01em}
.lqc-read{margin:6px 0 0; font-size:.78rem; color:var(--signal)}
.lqc-verdict{margin:12px 0 0; padding-top:11px; border-top:1px solid rgba(175,204,185,.18); font-size:.94rem; line-height:1.4; color:var(--ink) !important}
.lqc-verdict b{font-weight:700}

/* the level vial: two lines mark the fair range, the bubble is the quote */
.lq-vial{position:relative; height:22px; border-radius:11px; overflow:hidden;
  background:linear-gradient(180deg,rgba(175,204,185,.17),rgba(127,211,165,.06) 55%,rgba(175,204,185,.13));
  box-shadow:inset 0 0 0 1px rgba(175,204,185,.32),inset 0 2px 4px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.07)}
.lq-vial::before{content:""; position:absolute; top:0; bottom:0; left:var(--lo); width:calc(var(--hi) - var(--lo)); background:rgba(127,211,165,.13); border-inline:1.5px solid rgba(127,211,165,.9)}
/* the bubble rides a full-width carriage moved with a transform, so it never shifts layout */
.lq-bubble{position:absolute; top:4px; bottom:4px; left:0; width:100%; transform:translateX(var(--at)); pointer-events:none}
.lq-bubble::before{content:""; position:absolute; top:0; bottom:0; left:-17px; width:34px; border-radius:8px;
  background:radial-gradient(ellipse at 36% 30%,rgba(255,255,255,.95) 0 13%,rgba(222,246,232,.72) 30%,rgba(127,211,165,.55) 70%,rgba(127,211,165,.32));
  box-shadow:0 0 12px rgba(127,211,165,.55),inset 0 0 0 1px rgba(255,255,255,.35)}
.lq-vial[data-state="warn"]{--b1:rgba(244,214,180,.75); --b2:rgba(220,170,118,.6)}
.lq-vial[data-state="bad"]{--b1:rgba(250,200,180,.75); --b2:rgba(232,103,61,.6)}
.lq-vial[data-state="warn"] .lq-bubble::before,.lq-vial[data-state="bad"] .lq-bubble::before{background:radial-gradient(ellipse at 36% 30%,rgba(255,255,255,.95) 0 13%,var(--b1) 32%,var(--b2) 72%); box-shadow:0 0 12px var(--b2),inset 0 0 0 1px rgba(255,255,255,.35)}
.lq-scale{position:relative; height:24px; margin-top:3px;
  background:repeating-linear-gradient(90deg,rgba(175,204,185,.55) 0 1px,transparent 1px 12.5%) 0 0/100% 7px no-repeat,
             repeating-linear-gradient(90deg,rgba(175,204,185,.28) 0 1px,transparent 1px 3.125%) 0 0/100% 4px no-repeat}
.lq-scale span{position:absolute; top:9px; left:var(--x); transform:translateX(-50%); font:500 .6875rem/1 var(--mono); color:var(--muted); white-space:nowrap}

/* the one orchestrated moment: the sample quote gets checked, then the bubble settles */
@keyframes lq-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes lq-chip{from{opacity:0; transform:translateX(-6px)} to{opacity:1; transform:none}}
@keyframes lq-fill{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes lq-fade{from{opacity:0} to{opacity:1}}
@keyframes lq-settle{0%{transform:translateX(3%)} 60%{transform:translateX(calc(var(--at) + 5%))} 80%{transform:translateX(calc(var(--at) - 1.6%))} 100%{transform:translateX(var(--at))}}
.lq-console{animation:lq-rise .7s var(--ease) .15s both}
.lqc-head::after{animation:lq-fill 1.5s cubic-bezier(.4,0,.2,1) .6s both}
.lqc-lines em{animation:lq-chip .32s var(--ease) both}
.lqc-lines li:nth-child(1) em{animation-delay:.75s} .lqc-lines li:nth-child(2) em{animation-delay:.97s}
.lqc-lines li:nth-child(3) em{animation-delay:1.19s} .lqc-lines li:nth-child(4) em{animation-delay:1.41s}
.lqc-lines li:nth-child(5) em{animation-delay:1.63s} .lqc-lines li:nth-child(6) em{animation-delay:1.85s} .lqc-lines li:nth-child(7) em{animation-delay:2.05s}
.lq-console .lq-bubble{animation:lq-settle 1.25s cubic-bezier(.25,.8,.3,1) 2.3s both}
.lq-console .lqc-read,.lq-console .lqc-verdict{animation:lq-fade .5s ease 3.3s both}
html[data-motion="off"] .lq-console,html[data-motion="off"] .lq-console *{animation:none !important}
@media (prefers-reduced-motion:reduce){.lq-console,.lq-console *{animation:none !important}}

/* trust strip: a ruler edge, majors every 64px */
.v4-trust{position:relative; background:#0B1215}
.v4-trust::before,.v4-trust::after{content:""; position:absolute; left:0; right:0; top:0; pointer-events:none}
.v4-trust::before{height:5px; background:repeating-linear-gradient(90deg,rgba(175,204,185,.22) 0 1px,transparent 1px 8px)}
.v4-trust::after{height:10px; background:repeating-linear-gradient(90deg,rgba(175,204,185,.42) 0 1px,transparent 1px 64px)}
.v4-trust span{padding-top:24px}
.v4-trust b{letter-spacing:-.01em}

/* 48-hour window */
.lq-track{position:relative; height:74px; margin:0 0 18px}
.lq-track-rule{position:absolute; left:16.667%; right:16.667%; top:20px; height:12px;
  background:repeating-linear-gradient(90deg,rgba(175,204,185,.45) 0 1px,transparent 1px 16.6667%) 0 0/100% 12px no-repeat,
             repeating-linear-gradient(90deg,rgba(175,204,185,.2) 0 1px,transparent 1px 2.0833%) 0 3px/100% 6px no-repeat}
.lq-track-rule i{position:absolute; left:0; right:0; top:5px; height:2px; background:linear-gradient(90deg,var(--signal),rgba(127,211,165,.35) 55%,var(--signal)); box-shadow:0 0 10px rgba(127,211,165,.35)}
.lq-track-node{position:absolute; top:19px; left:var(--x); width:14px; height:14px; margin-left:-7px; border-radius:50%; background:var(--bg); box-shadow:0 0 0 2px var(--signal),0 0 14px rgba(127,211,165,.45)}
.lq-track-node.is-mid{width:10px; height:10px; margin-left:-5px; top:21px; box-shadow:0 0 0 2px rgba(175,204,185,.6)}
.lq-track-node.is-end{background:var(--signal)}
.lq-track-t{position:absolute; top:46px; left:var(--x); transform:translateX(-50%); font:500 .75rem/1.2 var(--mono); color:var(--muted); white-space:nowrap}
.lq-track-t:nth-of-type(1){color:#CFE0D5} .lq-track-t:last-child{color:var(--signal)}

/* sample report card: the same vial on paper */
.range-track{height:18px; border-radius:9px; border:0; background:linear-gradient(180deg,#D5E0D2,#B8CDB5 55%,#CFDCCB); box-shadow:inset 0 0 0 1px #7E9C83,inset 0 2px 3px rgba(31,61,40,.25)}
.range-track i{top:3px; height:12px; width:30px; margin-left:-15px; border-radius:7px; background:radial-gradient(ellipse at 36% 30%,#fff 0 14%,#E6F2E6 34%,#9CC3A4 78%); box-shadow:0 0 0 1px rgba(36,65,44,.35),0 1px 4px rgba(36,65,44,.3)}
.range-track b{top:-26px}

/* deposit check answers with a vial: lines at 10% and 25% on a 0 to 60% scale */
.checker .out .lq-vial{margin-top:12px; height:18px; border-radius:9px}
.checker .out .lq-bubble{top:3px; bottom:3px}
.checker .out .lq-bubble::before{left:-13px; width:26px}
.checker .out .lq-scale{height:20px}
.checker .out .lq-scale span{top:8px}

/* service cards: the featured one gets a lit top edge; prices read as figures */
.v4-card{border-radius:4px}
.v4-card.is-featured::before{content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:2px; background:linear-gradient(90deg,transparent,var(--signal) 20%,var(--signal) 80%,transparent); border-radius:4px 4px 0 0}
.v4-minis a,.v4-guarantee,.v4-local,.checker{border-radius:4px}
.v4-steps li{border-radius:4px}

@media (max-width:1180px){
  .lq-console{bottom:-44px; width:min(360px,90%); padding:12px 14px 13px}
  .lqc-lines li{padding:5px 0}
}
@media (max-width:960px){
  .lq-console{left:14px; bottom:-34px; width:min(384px,80%)}
  .lq-track{display:none}
}
@media (max-width:560px){
  .lq-console{position:relative; left:auto; bottom:auto; width:auto; -webkit-backdrop-filter:none; backdrop-filter:none}
  .lqc-lines li{grid-template-columns:minmax(0,1fr) auto 66px; gap:8px}
}
.v4-trust small{display:block; margin-bottom:6px; font:500 .6875rem/1 var(--mono); letter-spacing:.04em; color:#7F958A}
/* between tablet and desktop the hero stacks earlier, and the panel sits off the photo's right edge so both stay visible */
@media (max-width:1180px) and (min-width:961px){
  .v4-hero-grid{grid-template-columns:minmax(0,1fr); padding-bottom:72px}
  .v4-hero-media{max-width:560px}
  .lq-console{left:calc(100% - 150px); bottom:-40px; width:360px}
}
.lq-scale.is-pct{background:repeating-linear-gradient(90deg,rgba(175,204,185,.55) 0 1px,transparent 1px 8.3333%) 0 0/100% 7px no-repeat,
  repeating-linear-gradient(90deg,rgba(175,204,185,.26) 0 1px,transparent 1px 1.6667%) 0 0/100% 4px no-repeat}

/* red-flag check: each flag is a toggle; the tally is an eight-cell meter */
.rf-hint{margin:0 0 4px; font-size:.875rem; color:var(--muted)}
.flags .rf{display:block; position:relative; width:100%; margin:0; padding:0 36px 0 0; border:0; background:none; color:inherit; font:inherit; line-height:inherit; text-align:left; cursor:pointer; -webkit-tap-highlight-color:transparent}
.flags .rf::after{content:""; position:absolute; right:0; top:50%; width:20px; height:20px; margin-top:-10px; border-radius:3px; box-shadow:inset 0 0 0 1.5px #4E5E58; transition:background-color .15s, box-shadow .15s}
.flags .rf:hover::after{box-shadow:inset 0 0 0 1.5px #8FA89A}
.flags .rf[aria-pressed="true"]::after{box-shadow:none; background:var(--pen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.6-5.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.flags .rf:focus-visible{outline:2px solid var(--green); outline-offset:4px; border-radius:2px}
.flags li:has(.rf[aria-pressed="true"]){background:linear-gradient(90deg,rgba(232,103,61,.09),transparent 70%)}
.flags li:has(.rf[aria-pressed="true"])::before{color:var(--flag)}
.flags .rf[aria-pressed="true"] b{color:#fff}
.rf-out{display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:18px; padding:14px 16px; border:1px solid var(--line-2); border-radius:4px; background:#0C1316; transition:border-color .2s}
.rf-out p{margin:0; flex:1 1 220px; font-size:.92rem; color:var(--text)}
.rf-out b{margin-right:6px; color:var(--ink); font-variant-numeric:tabular-nums}
.rf-meter{display:grid; grid-template-columns:repeat(8,14px); gap:4px}
.rf-meter i{height:14px; border-radius:2px; background:#162024; box-shadow:inset 0 0 0 1px #2C3A3E; transition:background-color .15s}
.rf-meter i.on{background:var(--caution); box-shadow:none}
.rf-out[data-n="many"]{border-color:rgba(232,103,61,.5)}
.rf-out[data-n="many"] .rf-meter i.on{background:var(--flag)}
.rf-out .button{min-height:44px; padding:10px 16px; gap:18px}
.section-heading .eyebrow::before{display:none} /* those labels already carry a trailing rule */