/* components part 1 of 9 — split for the host's 16KB FTP ceiling.
   Generated by split_for_ftp.py; edit the prototype, not this. */
/* Section components. Generated from webref by extract.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);font-weight:700;line-height:1.02;text-wrap:balance;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)}
.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)}
/* The site logo is already visible in the header behind the drawer, so the drawer
   carries only the close button. */
.m-head{display:flex;align-items:center;justify-content:flex-end;margin-bottom:20px}
.m-close{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);padding:4px 8px}

/* HERO — wider media, tighter gap, social-proof row */
.hero{background:var(--white)}
/* Hero is a full-bleed band: the media reaches the right viewport edge and sits
   flush top and bottom, while the copy keeps its gutter. That inset/no-inset
   contrast is what makes the render read large (same trick cylind.com uses). */
.hero-inner{max-width:none;margin:0;padding-inline:0;padding-block:0}
.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 h1{font-size:clamp(40px,5.4vw,64px);font-weight:800;letter-spacing:-0.04em;line-height:1.03;margin:16px 0 22px;max-width:none}
.hero h1 .h1-lite{font-weight:400;letter-spacing:-0.02em}
.hero h1 em{font-weight:400}
.hero h1 em{font-style:italic;color:var(--accent);font-weight:700}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,2.8vw,44px);align-items:stretch}
.hero-txt{padding-left:var(--edge-vp);padding-block:clamp(44px,4.6vw,80px);max-width:calc(var(--measure) + var(--edge-vp));align-self:center;min-width:0}
.hero-sub{font-size:19px;color:var(--muted);max-width:48ch;margin-bottom:26px;line-height:1.55}
.hero .eyebrow{margin-bottom:12px}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:4px}
.hero-btns .btn{padding:14px 22px;font-size:13.5px;letter-spacing:.03em;gap:7px}
.hero-btns .btn svg{width:15px;height:15px}@media(max-width:600px){.hero-btns{flex-direction:column;align-items:stretch}.hero-btns .btn{width:100%;justify-content:center}}
.hero-scarce{margin-top:16px}
.hero-proof{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.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)}
.hero-proof .rate{display:flex;flex-direction:column;line-height:1.2}
.hero-proof .stars{color:var(--accent);font-size:14px;letter-spacing:.06em}
.hero-proof .stars b{color:var(--ink);font-family:var(--disp);font-weight:800;margin-left:5px;letter-spacing:-0.01em}
.hero-proof .ptxt{font-size:12.5px;color:var(--muted);max-width:34ch;line-height:1.45}
.hero-scarce{margin-top:18px;font-size:13px;color:var(--muted);font-weight:600;letter-spacing:.01em}
/* min-width:0 defeats the grid blowout: a grid item defaults to min-width:auto and
   refuses to shrink below its content's min-content width, which pushed the hero
   media ~6px past the viewport at 375. */
.hero-media{position:relative;align-self:stretch;min-width:0}
.hero-media img.hero-img,.hero-media video.hero-img{display:block;width:100%;aspect-ratio:auto;height:100%;min-height:clamp(420px,40vw,620px);object-fit:cover;border-radius:0}
/* The still is only a stand-in for the video, so it stays hidden wherever the video
   plays. Both selectors carry the .hero-img class deliberately: a plain
   `.hero-media .hero-still` loses to `.hero-media img.hero-img` on specificity and
   the still renders underneath the video. */
.hero-media img.hero-img.hero-still{display:none}