:root{
  --ivory:#F4F0E8; --ink:#111214; --ink-2:#34363B; --mute:#62656C; --hair:rgba(17,18,20,.13);
  --red:#C8241A; --red-d:#A61C13; --gold:#C98F00;
  --serif:"Libre Caslon Display",Georgia,serif; --sans:"Schibsted Grotesk",system-ui,sans-serif; --mono:"Spline Sans Mono",ui-monospace,monospace;
  --gut:clamp(16px,3.4vw,56px); --nav:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* NAV */
.nav{position:sticky;top:0;z-index:60;background:rgba(244,240,232,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s;height:var(--nav);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:0 var(--gut)}
.brand{display:flex;align-items:center;gap:12px;justify-self:start}
.mark{width:40px;height:40px;border-radius:11px;flex:none}
.brand-name{font-weight:700;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.nav-links{display:flex;gap:42px;font-size:15.5px;font-weight:500;color:var(--ink-2)}
.nav-links a{position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--ink);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-info{justify-self:end;display:flex;align-items:center;gap:9px;font-size:15px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.nav.scrolled{border-color:var(--hair)}
.nav-info i{width:7px;height:7px;border-radius:50%;background:#1F8F4E}
.js-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#1F8F4E;flex:none}
.js-dot.closed{background:#B06A00}

/* HERO */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);height:calc(100svh - var(--nav));min-height:620px;max-height:980px}
.copy{display:flex;flex-direction:column;justify-content:center;padding:0 clamp(28px,4vw,72px) clamp(28px,5vh,56px) var(--gut)}
.eyebrow{font-size:15px;font-weight:500;color:var(--mute);margin-bottom:22px}
.h1{font-family:var(--serif);font-weight:400;font-size:clamp(56px,6.6vw,116px);line-height:.95;letter-spacing:-.025em}
.h1 .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.h1 .ln>span{display:inline-block}
.sub{margin-top:24px;max-width:42ch;font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.6;color:var(--ink-2)}

.rating{display:flex;align-items:center;gap:16px;margin-top:clamp(26px,4vh,40px);padding-top:clamp(22px,3.4vh,32px);border-top:1px solid var(--hair)}
.r-num{font-family:var(--serif);font-size:clamp(58px,4.6vw,78px);line-height:.8;letter-spacing:-.03em}
.r-meta{display:flex;flex-direction:column;gap:7px}
.r-stars{position:relative;display:inline-block;font-size:21px;letter-spacing:3px;color:#DCD5C7;line-height:1}
.r-fill{position:absolute;inset:0;width:94%;overflow:hidden;white-space:nowrap;color:var(--gold)}
.r-count{font-size:15.5px;font-weight:600;border-bottom:1px solid var(--hair);padding-bottom:2px;align-self:flex-start;transition:border-color .25s}
.rating:hover .r-count{border-color:var(--ink)}

.ctas{display:flex;align-items:center;gap:28px;margin-top:clamp(22px,3.4vh,32px)}
.call{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;height:62px;padding:0 30px 0 26px;border-radius:999px;background:var(--red);color:#fff;font-weight:700;font-size:19px;letter-spacing:-.015em;box-shadow:0 16px 30px -18px rgba(17,18,20,.8);transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s}
.call:hover{background:var(--red-d);transform:translateY(-2px)}
.call svg{width:19px;height:19px;fill:#fff;flex:none}
.sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 7s 3.4s ease-in-out infinite}
@keyframes sheen{0%,76%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}
.text{font-size:16.5px;font-weight:600;border-bottom:1.5px solid var(--ink);padding-bottom:2px;white-space:nowrap}
.text span{display:inline-block;transition:transform .25s}
.text:hover span{transform:translateX(4px)}

/* VISUAL */
.visual{position:relative;min-width:0}
.photo{position:absolute;inset:0;overflow:hidden;background:#2a2a2b}
.photo picture,.photo img{width:100%;height:100%}
.photo img{object-fit:cover;object-position:22% 55%}

/* honest receipt */
.receipt{position:absolute;right:clamp(24px,3vw,48px);bottom:clamp(24px,4.5vh,48px);width:clamp(290px,22vw,340px);margin:0;filter:drop-shadow(0 26px 34px rgba(0,0,0,.42))}
.paper{position:relative;padding:22px 22px 30px;background:#FFFDF8;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:#1d1e21;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%}
.rl{min-height:1em}
.r-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;margin-bottom:2px}
.r-head b{font-family:var(--sans);font-weight:750;font-size:15px;letter-spacing:.01em;text-transform:uppercase}
.r-head span{font-size:12px;color:#5c5f66}
.r-cut{height:1px;margin:11px 0;background:repeating-linear-gradient(90deg,#9b9a96 0 5px,transparent 5px 9px);min-height:0}
.r-k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#6a6c72;margin-top:6px}
.r-v{font-size:14px;font-weight:500}
.strike{position:relative;color:#7c7e83}
.strike i{position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--red);transform-origin:left;border-radius:2px}
.r-ok{color:#1d1e21}
.r-ok::after{content:" ✓";color:#1F8F4E;font-weight:700}
.r-row{display:flex;align-items:baseline;gap:6px;margin-top:5px}
.r-row .lead{flex:1;border-bottom:1.5px dotted #b3b1ab;transform:translateY(-3px)}
.r-total{font-weight:500;font-size:14px}
.r-total span:last-child{color:var(--red)}
.r-quote{font-family:var(--serif);font-size:17.5px;text-wrap:balance;line-height:1.22;letter-spacing:-.005em}
.r-by{margin-top:7px;font-size:12px;color:#5c5f66}
.r-by .st{color:var(--gold);letter-spacing:1px}


@media (max-width:1180px) and (min-width:761px){
  .nav-links{display:none}
  .nav{grid-template-columns:1fr auto}
  .hero{grid-template-columns:minmax(0,52fr) minmax(0,48fr)}
  .ctas{flex-direction:column;align-items:flex-start;gap:16px}
  .receipt{width:270px}
}

/* PHONE */
@media (max-width:760px){
  :root{--nav:60px}
  .nav{grid-template-columns:1fr auto}
  .nav-links,.addr{display:none}
  .mark{width:34px;height:34px;border-radius:9px}
  .brand-name{font-size:15.5px}
  .nav-info{font-size:13.5px;gap:7px}
  .hero{display:flex;flex-direction:column;height:auto;min-height:0;max-height:none}
  .visual{order:-1;height:clamp(190px,30svh,250px)}
  .photo img{object-position:35% 55%}
  .copy{padding:22px var(--gut) 28px}
  .eyebrow{display:none}
  .h1{font-size:clamp(44px,12.6vw,54px)}
  .sub{display:none}
  .rating{margin-top:20px;padding-top:18px;gap:14px}
  .r-num{font-size:56px}
  .r-stars{font-size:18px}
  .r-count{font-size:14.5px}
  .ctas{margin-top:18px;flex-direction:column;align-items:stretch;gap:14px}
  .call{justify-content:center;height:60px;font-size:19px}
  .text{align-self:center}
  .receipt{position:relative;left:auto;right:auto;bottom:auto;width:auto;max-width:360px;margin:6px auto 34px;padding:0 var(--gut);filter:drop-shadow(0 18px 26px rgba(17,18,20,.22))}
  .hero{padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}