/* blog part 1 of 3. Generated by build_blog.py; edit theme/blog/blog.css or the master prototype. */
/* Base rules copied from webref/interior-ref.html by build_blog.py. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Elementor content renders inside our pages (the quote popup), and display:block
   on its inline icon images is a real difference. Excluding WordPress's own
   attachment-* classes too would be over-reach: content images need max-width. */
img:not([class*="elementor"]){max-width:100%;display:block}
/* Full-bleed idiom, used by every edge-to-edge image section on this page.
   Only valid on an element whose containing block spans the full .wrap content
   box (a direct child of .wrap, or of a single-column flex/grid inside it) —
   on a grid ITEM the 50% resolves against the column, not the page. */
.bleed{width:var(--bleed);max-width:none;margin-left:calc(50% - var(--bleed)/2)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);text-wrap:balance}
h1,h2{font-weight:650;line-height:1.0;letter-spacing:-0.024em}
h3,h4{font-weight:700;line-height:1.02;letter-spacing:-0.03em}
.eyebrow{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:20px;display:inline-block}
.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--gut)}
.wrap-wide{max-width:var(--wide);margin:0 auto;padding-inline:var(--gut)}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:15.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;padding:16px 32px;border-radius:999px;transition:.25s ease;cursor:pointer;border:1.5px solid transparent;white-space:nowrap}
.btn-p{background:var(--accent);--btn-fg:#fff;color:#fff;border-color:var(--accent)}
/* Keeps button text still on hover. hello-elementor's a:hover{color:#336} is (0,1,1)
   and outranks a button's own .btn-g{color:...} at (0,1,0). A literal per variant will
   not do — .btn-g is --ink on light bands and #fff on dark — so each resting rule also
   declares --btn-fg with the value it paints, and this (0,2,0) rule puts it back. */
.btn:hover,.btn:focus,.nav-cta:hover,.nav-cta:focus{color:var(--btn-fg)}
.btn-p:hover,.btn-p:focus{background:var(--accent-d);border-color:var(--accent-d)}
.btn-g{background:transparent;--btn-fg:var(--ink);color:var(--ink);border-color:var(--ink)}
/* Outline buttons take a faint wash of their own colour and KEEP their text colour.
   They used to invert to a solid fill, which made the outline buttons behave completely
   differently from the solid ones (which merely darken) — five button types, five
   different hovers. One rule now: solid darkens, outline washes. */
.btn-g:hover,.btn-g:focus{background:var(--wash-lt)}
.btn-l{background:#fff;--btn-fg:var(--ink);color:var(--ink);border-color:#fff}
.btn-l:hover,.btn-l:focus{background:var(--wash-lt)}
.btn-gold{background:var(--accent);--btn-fg:#1a140c;color:#1a140c;border-color:var(--accent)}
.btn-gold:hover,.btn-gold:focus{background:var(--accent-d);border-color:var(--accent-d)}
/* buyer's-guide button — white text, always visible on dark card */
.btn-guide{background:var(--accent);--btn-fg:#fff!important;color:#fff!important;border-color:var(--accent)}
.btn-guide:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn svg{width:16px;height:16px}
.tlink{color:var(--accent);font-weight:600;border-bottom:1px solid rgba(178,138,87,.35);transition:border-color .2s}
.tlink:hover{border-color:var(--accent)}
.crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.crumb a{color:var(--accent);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span[aria-hidden]{color:var(--faint);font-weight:400}
.crumb span[aria-current]{color:var(--muted)}
.hero-avatars{display:flex}
/* Bare-img fallback, kept so any avatar row that has not been wrapped still renders. */
.hero-avatars img{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-9px;object-fit:cover;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.hero-avatars img:first-child{margin-left:0}
/* THE REVIEW AVATARS.
   The framing is now baked into the FILES. These used to be 1024x1024 half-body
   portraits dropped into a 46px circle: square source into a square box means
   object-fit:cover crops nothing, so a face landed about eight pixels across and the
   only thing that survived was hair colour. That is why seven distinct people read as
   one person seven times. They are cropped head-and-shoulders before upload, which is
   also what finally lets the lighting and hair variety show at all.
   The zoom range dropped to 1.01-1.09 to match: on a face-tight crop the old 1.20
   cut the top of the head off.
   Positions 4 and 5 are both men and both source frames are angled the same way, so
   5 is mirrored too: with only 4 flipped they still read as one person twice.
   These are seven generated portraits, and generated portraits all arrive the same way:
   square to camera, evenly lit, studio-clean. Seven of those in a row stops reading as
   seven customers and starts reading as stock art, which defeats the only job the
   cluster has. Rather than regenerate, break the sameness in CSS — mirror three of them,
   spread the zoom from 1.02 to 1.20 so the heads are not all framed at one distance,
   move each crop off dead centre, and pull exposure, contrast and warmth a few percent
   apart so the lighting stops matching.
   The .av wrapper carries the ring and does the clipping, so scaling the IMAGE cannot
   scale the 2px border with it — which is the whole reason the zoom can vary at all.
   --ring lets the footer swap white for the dark ground without restating the box. */
.hero-avatars .av{--ring:#fff;width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--ring);overflow:hidden;margin-left:-9px;
  box-shadow:0 1px 4px rgba(0,0,0,.12)}
.hero-avatars .av:first-child{margin-left:0}
.hero-avatars .av img{width:100%;height:100%;display:block;object-fit:cover;
  border:0;border-radius:0;margin:0;box-shadow:none}
.hero-avatars .av:nth-child(1) img{transform:scale(1.03);filter:contrast(1.05) saturate(.93) brightness(1.04)}
.hero-avatars .av:nth-child(2) img{transform:scaleX(-1) scale(1.08);filter:contrast(.93) saturate(1.08) brightness(.96) hue-rotate(-5deg)}
.hero-avatars .av:nth-child(3) img{transform:scale(1.05);filter:contrast(1.10) saturate(.88) sepia(.06)}
.hero-avatars .av:nth-child(4) img{transform:scaleX(-1) scale(1.01);filter:contrast(.97) saturate(1.14) brightness(1.06) hue-rotate(4deg)}
.hero-avatars .av:nth-child(5) img{transform:scaleX(-1) scale(1.09);filter:contrast(1.02) saturate(.96) brightness(.94)}
.hero-avatars .av:nth-child(6) img{transform:scaleX(-1) scale(1.04);filter:contrast(1.08) saturate(1.05) brightness(1.02) sepia(.10)}
.hero-avatars .av:nth-child(7) img{transform:scale(1.06);filter:contrast(.95) saturate(.90) hue-rotate(-3deg)}
/* .pagecta stacks: bg image z0, scrim ::after z1, copy z2. The loop replaces the
   image, so it takes the image's layer, not one above the scrim. */
.pagecta > .motion-v{z-index:0}
details.faq{border-bottom:1px solid var(--hair)}
details.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;align-items:center;gap:20px;font-family:var(--sans)}
details.faq summary::-webkit-details-marker{display:none}
details.faq:hover summary .q{color:var(--accent)}
details.faq summary .q{font-size:19px;font-weight:700;color:var(--ink);flex:1;letter-spacing:-0.015em;transition:color .2s}
details.faq summary .pl{width:20px;height:20px;position:relative;flex:0 0 20px}
details.faq summary .pl::before,details.faq summary .pl::after{content:"";position:absolute;background:var(--accent);transition:.3s;border-radius:2px}
details.faq summary .pl::before{top:9px;left:0;width:20px;height:2.5px}
details.faq summary .pl::after{top:0;left:9px;width:2.5px;height:20px}
details.faq[open] summary .pl::after{transform:rotate(90deg);opacity:0}
details.faq .a{padding:0 0 26px;color:var(--body);max-width:74ch;line-height:1.72;font-size:16px}
/* PAGE CTA */
.pagecta{position:relative;overflow:hidden;background:var(--warm)}
.pagecta img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.pagecta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,19,16,.74),rgba(20,19,16,.86));z-index:1}
.pagecta .wrap{position:relative;z-index:2;text-align:center;padding-block:clamp(68px,8vw,112px)}
.pagecta .eyebrow{color:#d8b98a}
.pagecta h2{color:#fff;font-size:clamp(31px,4.2vw,53px);font-weight:650;letter-spacing:-0.024em;line-height:1.05;max-width:20ch;margin:0 auto 20px}
.pagecta p{color:rgba(255,255,255,.82);font-size:18px;line-height:1.6;max-width:56ch;margin:0 auto 30px}
.pagecta .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.pagecta .btn-g{--btn-fg:#fff;color:#fff;border-color:rgba(255,255,255,.55)}
.pagecta .btn-g:hover,.pagecta .btn-g:focus{background:rgba(255,255,255,.14)}
.pagecta .offer{margin-top:24px;font-size:14.5px;color:rgba(255,255,255,.66);font-weight:600;letter-spacing:.02em;max-width:56ch;margin-inline:auto}

/* ------------------------------------------------------------------ blog
   Blog posts and the /blog/ index. Everything above this line in the built sheet is
   copied from the master prototype (webref/interior-ref.html) by build_blog.py, so the
   base type, buttons, crumbs and FAQ accordion stay the design system's own rules.
   Only the article layout is new here.

   Every heading rule is scoped to TWO classes. Elementor's kit ships
   `.elementor-kit-5 h1..h6 {font-size}` at (0,1,1), and it does load on posts; a
   single-class rule would lose to it on the live site and look fine locally. */

/* ---- post head */
/* Top spacing, crumb and H1 match /reviews/ (section.tst-sec, .tst-head h1). The H1 states
   its weight because the Elementor kit sets `.elementor-kit-5 h1{font-weight:normal}` at
   (0,1,1), which beats the base h1 rule; that is why it rendered at 400. */
.bp .bp-head{padding-block:clamp(28px,2.8vw,52px) clamp(22px,3vw,36px)}
.bp{--bp-measure:760px}
/* One centred text column, with the contents list floating in the right-hand margin. The head
   uses the same three columns so the title, the summary and the article share one left edge. */
.bp .bp-head .wrap,.bp .bp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--bp-measure)) minmax(0,1fr);
  column-gap:clamp(28px,4vw,64px)}
.bp .bp-head-in{grid-column:2}
.bp .bp-head h1{font-size:clamp(34px,4.4vw,54px);font-weight:650;letter-spacing:-0.024em;line-height:1.0;margin:12px 0 18px}