/* Fonts are loaded via tags in index.html , not @import,
for faster discovery and rendering. See index.html. */
/* =========================================================
VARIABLES
========================================================= */
:root{
--bg:#F6F5F1;
--surface:#FFFFFF;
--ink:#15140F;
--ink-soft:#5C594C;
--dark:#121109;
--dark-2:#1D1B12;
--dark-line:rgba(255,255,255,.10);
--gold:#C9A227;
--gold-hover:#B08D1F;
--gold-soft:#EFE2BC;
--gold-dim:#8A7431;
--line:#E4E1D6;
--good-bg:#EAF2E6; --good-ink:#3E6C34; --good-line:#5A9146;
--bad-bg:#FBEAE6; --bad-ink:#9C3B24; --bad-line:#C24A2C;
--radius:8px;
--shadow-sm:0 1px 2px rgba(21,20,15,.04), 0 4px 14px rgba(21,20,15,.05);
--shadow-lg:0 8px 24px rgba(21,20,15,.08), 0 24px 48px rgba(21,20,15,.10);
--wrap-pad:20px;
--section-pad:64px;
}
@media(min-width:768px){ :root{ --wrap-pad:32px; --section-pad:96px; } }
@media(min-width:1024px){ :root{ --section-pad:140px; } }
/* =========================================================
RESET
========================================================= */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:'Inter',system-ui,sans-serif; font-size:16.5px; line-height:1.6;
-webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
/* =========================================================
TYPOGRAPHY
========================================================= */
h1,h2,h3{font-family:'Space Grotesk',sans-serif; color:var(--ink); margin:0; font-weight:600; letter-spacing:-0.01em;}
.eyebrow{
font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
color:var(--gold-dim); font-weight:500; display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.eyebrow.on-dark{color:var(--gold-soft);}
.eyebrow-rule{width:22px; height:1px; background:var(--gold-dim);}
.eyebrow.on-dark .eyebrow-rule{background:var(--gold-soft);}
@media(min-width:768px){
.eyebrow{font-size:12.5px; gap:10px; margin-bottom:18px;}
.eyebrow-rule{width:28px;}
}
/* =========================================================
LAYOUT
========================================================= */
.wrap{padding:0 var(--wrap-pad); max-width:1180px; margin:0 auto;}
section{padding:var(--section-pad) 0;}
.photo{background-size:cover; background-position:center;}
.section-head{margin-bottom:28px;}
.section-head-tight{margin-bottom:24px;}
.section-head h2{font-size:24px; margin-bottom:10px; line-height:1.18;}
.section-head p{color:var(--ink-soft); font-size:14.5px;}
@media(min-width:768px){
.section-head{margin-bottom:48px;}
.section-head h2{font-size:36px; margin-bottom:16px;}
.section-head p{font-size:17px; max-width:600px;}
}
/* Scoped to .js so that if the script fails to load, everything below the fold
still renders instead of staying invisible at opacity 0. */
.js .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.js .reveal.in{opacity:1; transform:translateY(0);}
@media(prefers-reduced-motion: reduce){ .js .reveal{opacity:1; transform:none; transition:none;} }
.skip-link{position:absolute; left:-9999px; top:12px; z-index:200; background:var(--gold); color:var(--dark); padding:12px 20px; border-radius:8px; font-weight:700; font-size:14px;}
.skip-link:focus{left:12px;}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
outline:2.5px solid var(--gold); outline-offset:2px;
}
/* =========================================================
BUTTONS
========================================================= */
.btn-primary{
background:var(--gold); color:var(--dark); padding:16px 22px; border-radius:999px; font-weight:700; font-size:15.5px;
border:none; cursor:pointer; width:100%; text-align:center; display:block; box-shadow:0 8px 22px rgba(201,162,39,.3);
transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{background:var(--gold-hover);}
/* Opts a button back into full width where the desktop rule would shrink it. */
.btn-block{width:100%; text-align:center;}
.btn-outline{
background:transparent; border:1.5px solid var(--ink); color:var(--ink); padding:13px 20px; border-radius:999px;
font-weight:600; font-size:14px; display:inline-block; width:100%; text-align:center; transition:all .2s ease;
}
.btn-outline:hover{background:var(--ink); color:#fff;}
.btn-outline.on-dark{border-color:rgba(255,255,255,.3); color:#fff;}
.btn-outline.on-dark:hover{background:#fff; color:var(--dark); border-color:#fff;}
.fb-see-all{margin-top:24px; max-width:320px;}
@media(min-width:768px){
.btn-primary{padding:18px 32px; font-size:16px; width:auto; box-shadow:0 10px 30px rgba(201,162,39,.3);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(201,162,39,.4);}
.btn-outline{padding:15px 26px; font-size:15px; width:auto; white-space:nowrap;}
}
/* =========================================================
NAVIGATION
========================================================= */
nav.top{position:sticky; top:0; z-index:100; background:var(--bg); border-bottom:1px solid var(--line); padding:13px 0;}
.nav-inner{padding:0 var(--wrap-pad); max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between;}
/* The gold script wordmark from the live site. Sized by height so the aspect
ratio holds, and given an explicit width/height on the ![]()
so it reserves
its space and does not shift the header while loading. */
/* The wordmark is wide, and flex:none meant burger + logo + CTA came to 279px
inside a 265px content box at 320px wide, pushing the CTA off the screen.
Letting the logo shrink is invisible at that size and keeps both the top
CTA and the logo on the smallest phones still in use. min-width:0 is the
part that actually allows it: a flex item will not shrink below its content
without it. */
.logo{display:flex; align-items:center; flex:0 1 auto; min-width:0;}
.logo-img{height:30px; width:auto; max-width:100%; display:block; object-fit:contain; object-position:left center;}
.nav-cta{background:var(--gold); color:var(--dark); padding:10px 16px; border-radius:999px; font-size:13.5px; font-weight:700; flex:none; white-space:nowrap;}
.nav-links{display:none;}
.nav-burger{
display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px;
background:none; border:1.5px solid var(--line); cursor:pointer; margin-right:10px; flex:none;
}
.nav-burger svg{width:18px; height:18px; color:var(--ink);}
.nav-mobile-menu{
position:fixed; top:64px; left:0; right:0; bottom:0; z-index:99; background:var(--bg);
padding:24px var(--wrap-pad); display:none; flex-direction:column; gap:4px; overflow-y:auto;
}
.nav-mobile-menu.open{display:flex;}
.nav-mobile-menu a{padding:16px 4px; font-size:17px; font-weight:600; border-bottom:1px solid var(--line);}
@media(min-width:1024px){
.nav-burger, .nav-mobile-menu{display:none !important;}
.nav-links{display:flex; gap:36px; font-size:14.5px; font-weight:500; color:var(--ink-soft);}
.nav-links a:hover{color:var(--ink);}
.nav-cta{padding:11px 22px; font-size:14px;}
.nav-cta:hover{background:#fff; box-shadow:0 0 0 1.5px var(--gold) inset;}
}
/* =========================================================
HERO
========================================================= */
.hero{
position:relative; min-height:82vh; display:flex; align-items:flex-end;
background-image:linear-gradient(180deg, rgba(9,8,4,.4) 0%, rgba(9,8,4,.6) 45%, rgba(9,8,4,.94) 100%), url('/assets/images/hero-mobile.jpg');
background-image:linear-gradient(180deg, rgba(9,8,4,.4) 0%, rgba(9,8,4,.6) 45%, rgba(9,8,4,.94) 100%), image-set(url('/assets/images/hero-mobile.webp') type('image/webp'), url('/assets/images/hero-mobile.jpg') type('image/jpeg'));
background-size:cover; background-position:center 60%;
color:#fff; padding:28px 0 32px;
}
.hero-inner{position:relative; z-index:1; width:100%;}
.hero .eyebrow{color:var(--gold-soft);}
.hero h1{font-size:clamp(28px,8vw,36px); line-height:1.12; color:#fff; margin-bottom:14px;}
.hero h1 .accent{color:var(--gold);}
.hero p.lead{font-size:15.5px; color:#DCD8C8; margin-bottom:22px; font-weight:400; line-height:1.55;}
.hero-note{font-size:12.5px; color:#B3AE9C; text-align:center; margin-top:12px;}
.hero-micro-stats{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; border-top:1px solid rgba(255,255,255,.14); padding-top:16px;}
.hero-micro-stats span{font-size:12px; color:#B3AE9C;}
.hero-micro-stats b{color:#fff; font-weight:700;}
.hero-micro-stats .dot{color:var(--gold);}
.hero-stats-full, .hero-float-badge, .scroll-cue{display:none;}
@media(min-width:1024px){
.hero{
min-height:100vh; padding:180px 0 96px;
background-image:linear-gradient(180deg, rgba(9,8,4,.35) 0%, rgba(9,8,4,.55) 55%, rgba(9,8,4,.92) 100%), url('/assets/images/hero-desktop.jpg');
background-image:linear-gradient(180deg, rgba(9,8,4,.35) 0%, rgba(9,8,4,.55) 55%, rgba(9,8,4,.92) 100%), image-set(url('/assets/images/hero-desktop.webp') type('image/webp'), url('/assets/images/hero-desktop.jpg') type('image/jpeg'));
background-position:center 65%;
}
.hero h1{font-size:clamp(40px,5.6vw,70px); max-width:900px; margin-bottom:26px;}
.hero p.lead{font-size:18.5px; max-width:540px; margin-bottom:40px;}
.hero-ctas{display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-bottom:60px;}
.btn-primary{box-shadow:0 10px 30px rgba(201,162,39,.3);}
.hero-micro-stats{display:none;}
.hero-stats-full{display:flex; gap:56px; border-top:1px solid rgba(255,255,255,.16); padding-top:32px; flex-wrap:wrap;}
.hero-stats-full .stat b{font-family:'Space Grotesk',sans-serif; font-size:28px; color:#fff; display:block; font-weight:600;}
.hero-stats-full .stat span{font-size:13.5px; color:#B3AE9C;}
.hero-float-badge{
display:flex; position:absolute; z-index:2; right:32px; bottom:120px; align-items:center; gap:14px;
background:rgba(18,17,9,.88); border:1px solid rgba(255,255,255,.16);
border-radius:8px; padding:16px 20px; max-width:280px; box-shadow:var(--shadow-lg);
}
.hero-float-badge-dot{width:10px; height:10px; border-radius:50%; background:#5EDD8C; flex:none; box-shadow:0 0 0 4px rgba(94,221,140,.18); animation:dotPulse 2.2s ease-in-out infinite;}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 4px rgba(94,221,140,.18);}50%{box-shadow:0 0 0 8px rgba(94,221,140,.1);}}
.hero-float-badge b{display:block; font-size:13.5px; color:#fff; font-weight:700; line-height:1.35;}
.hero-float-badge span{font-size:12px; color:#B3AE9C;}
.scroll-cue{display:flex; position:absolute; right:32px; bottom:36px; z-index:2; flex-direction:column; align-items:center; gap:8px; color:#B3AE9C; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;}
.scroll-cue .line{width:1px; height:36px; background:linear-gradient(180deg, var(--gold) 0%, transparent 100%); animation:scrollPulse 2s ease-in-out infinite;}
@keyframes scrollPulse{0%,100%{opacity:.3;}50%{opacity:1;}}
}
/* =========================================================
TRUST STRIP
========================================================= */
.trust-strip{background:var(--surface); border-bottom:1px solid var(--line); padding:20px 0;}
.trust-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 10px;}
.trust-grid .item{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); font-weight:500;}
.trust-grid .item svg{width:15px; height:15px; color:var(--gold-dim); flex:none;}
@media(min-width:768px){
.trust-strip{padding:24px 0;}
.trust-grid{grid-template-columns:none; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;}
.trust-grid .item{font-size:13.5px;}
.trust-grid .item svg{width:16px; height:16px;}
}
/* =========================================================
BENEFITS (feature + trio, merged single DOM)
========================================================= */
.feature-grid{
display:grid;
grid-template-columns:1fr;
grid-template-areas:
"heading"
"image"
"steps"
"cta";
gap:24px;
}
.feature-heading{grid-area:heading;}
.feature-img-wrap{grid-area:image;}
.feature-img-real{width:100%; height:auto; display:block; border-radius:20px; box-shadow:0 8px 20px rgba(0,0,0,.08);}
.feature-heading h2{font-size:24px; margin-bottom:6px; line-height:1.16;}
.feature-points{grid-area:steps; display:flex; flex-direction:column; gap:18px;}
.feature-point{display:flex; gap:14px;}
.feature-point .num{font-family:'Space Grotesk'; font-weight:700; color:var(--gold-dim); font-size:14px; width:24px; flex:none;}
.feature-point h4{font-size:15.5px; margin-bottom:4px;}
.feature-point p{font-size:14px; color:var(--ink-soft); margin:0;}
.feature-cta{grid-area:cta;}
.trio{display:flex; flex-direction:column; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:32px; gap:1px;}
.trio-card{background:var(--surface); padding:22px 20px;}
.trio-card .benefit-icon{width:40px; height:40px; border-radius:11px; background:var(--gold-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.trio-card .benefit-icon svg{width:19px; height:19px; color:var(--gold-dim);}
.trio-card h3{font-size:16.5px; margin-bottom:8px;}
.trio-card p{font-size:14px; color:var(--ink-soft); margin:0; line-height:1.55;}
/* ---- Tablet: two columns, image gets priority (55/45), image spans all rows ---- */
@media(min-width:768px) and (max-width:1199px){
.feature-grid{
grid-template-columns:1.2fr 1fr;
grid-template-areas:
"image heading"
"image steps"
"image cta";
gap:40px;
align-items:start;
}
.feature-heading h2{font-size:28px; margin-bottom:8px;}
.feature-points{gap:18px;}
.feature-cta{align-self:start;}
.trio{flex-direction:row; margin-top:32px;}
.trio-card{flex:1; padding:28px 24px;}
}
/* ---- Desktop: image dominant (60/40), section grows taller rather than shrinking the image ---- */
@media(min-width:1200px){
.process-wrap{
max-width:1600px;
width:min(1600px, calc(100vw - 64px));
margin:0 auto;
}
.feature-grid{
grid-template-columns:1.5fr 1fr;
grid-template-areas:
"image heading"
"image steps"
"image cta";
gap:64px;
align-items:start;
}
.feature-heading{align-self:start;}
.feature-heading h2{font-size:38px; margin-bottom:20px; line-height:1.12;}
.feature-points{gap:26px;}
.feature-point .num{font-size:16px; width:30px;}
.feature-point h4{font-size:18px;}
.feature-point p{font-size:15.5px;}
.feature-cta{margin-top:8px;}
.trio{flex-direction:row; margin-top:32px;}
.trio-card{flex:1; padding:36px 32px;}
.trio-card .benefit-icon{width:44px; height:44px;}
.trio-card h3{font-size:18px;}
.trio-card p{font-size:14.5px;}
}
/* =========================================================
ABOUT
========================================================= */
.about{
position:relative; padding-top:96px; padding-bottom:96px;
background-color:#171511;
background-image:
radial-gradient(ellipse 90% 70% at 20% 0%, #1D1A16 0%, transparent 60%),
radial-gradient(ellipse 90% 70% at 80% 100%, #1D1A16 0%, transparent 60%),
linear-gradient(160deg, #11110E 0%, #171511 50%, #11110E 100%);
}
.about::after{
content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
background-image:radial-gradient(circle, #fff 1px, transparent 1px);
background-size:3px 3px;
}
.about .wrap{position:relative; z-index:1;}
/* ---- premium info card, standalone, normal flow, never overlapped ---- */
.about-intro{max-width:1180px;}
.about-card{
position:relative; background:#fff; border-radius:24px; padding:40px 32px;
box-shadow:0 40px 90px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.2);
max-width:1000px; margin:0 auto; overflow:hidden;
}
.gold-accent{position:absolute; top:0; left:0; width:64px; height:4px; background:var(--gold); border-radius:0 0 4px 0;}
.about-card-grid{display:flex; flex-direction:column; gap:28px;}
.about h2{color:#15140F; font-size:23px; margin-bottom:14px; line-height:1.2;}
.about p{color:#3A382F; font-size:14px; margin-bottom:12px; line-height:1.6;}
.about-quote{font-family:'Space Grotesk',sans-serif; font-size:15.5px; color:#15140F; font-weight:500; margin:18px 0 0; line-height:1.4;}
.about-quote span{color:var(--gold-dim); display:block; font-family:'Inter'; font-weight:600; font-size:12.5px; margin-top:10px;}
.metric-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
.metric-card{background:var(--bg); padding:18px 16px;}
.metric-card b{font-family:'Space Grotesk',sans-serif; font-size:23px; color:#15140F; display:block; margin-bottom:4px; font-weight:700;}
.metric-card span{font-size:11.5px; color:#6B6656;}
/* ---- review wall header ---- */
.review-wall-head{text-align:center; margin-top:72px; margin-bottom:32px;}
.review-wall-head h3{color:#fff; font-size:22px; font-family:'Space Grotesk',sans-serif; font-weight:600; margin-bottom:12px;}
.rating-line{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; color:#B8B2A0; font-size:14px;}
.stars-lg{color:var(--gold); font-size:16px; letter-spacing:2px;}
/* ---- review wall: auto-scrolling rows ---- */
.review-wall{display:flex; flex-direction:column; gap:20px; overflow:hidden;}
.review-row{overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);}
.review-row:nth-child(2), .review-row:nth-child(3){display:none;}
.review-track{display:flex; gap:20px; width:max-content; animation:scrollLeftAnim 60s linear infinite;}
.review-row[data-dir="right"] .review-track{animation-name:scrollRightAnim;}
.review-row:hover .review-track{animation-play-state:paused;}
@keyframes scrollLeftAnim{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes scrollRightAnim{from{transform:translateX(-50%);}to{transform:translateX(0);}}
.rc-card{background:#fff; border-radius:22px; padding:20px 22px; box-shadow:0 14px 34px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12); flex:none;}
.rc-head{display:flex; align-items:center; gap:11px; margin-bottom:10px;}
.rc-avatar{width:38px; height:38px; border-radius:50%; flex:none; position:relative; overflow:hidden; filter:blur(4px) saturate(1.25);}
.rc-avatar::before{
content:''; position:absolute; inset:-30%;
background:radial-gradient(circle at 30% 25%, hsl(var(--h),75%,78%) 0%, hsl(var(--h),55%,50%) 55%, hsl(var(--h),45%,28%) 100%);
}
.rc-stars{color:var(--gold-dim); font-size:11.5px; letter-spacing:1.5px; margin-bottom:2px;}
.rc-name{font-weight:700; font-size:13.5px; color:#15140F;}
.rc-card p{margin:0; font-size:13.5px; color:#15140F; line-height:1.55;}
.review-collage-note{color:#B8B2A0; font-size:12.5px; margin-top:36px; text-align:center; font-weight:500;}
@media(min-width:768px){
.about-card{padding:56px; border-radius:26px;}
.about-card-grid{flex-direction:row; align-items:center; gap:48px;}
.about-card-grid > div:first-child{flex:1.15;}
.metric-grid{flex:.85; align-self:stretch;}
.about h2{font-size:27px;}
.about p{font-size:15px;}
.about-quote{font-size:17px;}
.metric-card b{font-size:26px;}
.review-row:nth-child(2){display:block;}
}
@media(min-width:1024px){
.about-card{padding:64px;}
.about h2{font-size:30px;}
.about p{font-size:15.5px;}
.about-quote{font-size:18px;}
.metric-card b{font-size:28px;}
.review-row:nth-child(3){display:block;}
.review-wall-head{margin-top:88px; margin-bottom:40px;}
.review-wall-head h3{font-size:26px;}
}
@media(prefers-reduced-motion: reduce){
.review-track{animation:none;}
}
/* =========================================================
FAQ (accordion at all sizes)
========================================================= */
.faq-acc{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);}
.faq-acc details{border-bottom:1px solid var(--line);}
.faq-acc details:last-child{border-bottom:none;}
.faq-acc summary{
padding:17px 18px; font-size:15px; font-weight:700; cursor:pointer; list-style:none;
display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-acc summary::-webkit-details-marker{display:none;}
.faq-acc summary .chev{transition:transform .2s ease; color:var(--gold-dim); flex:none;}
.faq-acc details[open] summary .chev{transform:rotate(180deg);}
.faq-acc .faq-body{padding:0 18px 18px; font-size:13.5px; color:var(--ink-soft); line-height:1.55;}
@media(min-width:1024px){
.faq-acc{max-width:760px;}
.faq-acc summary{padding:24px 28px; font-size:16.5px;}
.faq-acc .faq-body{padding:0 28px 26px; font-size:15px;}
}
/* =========================================================
GUIDE
========================================================= */
.guide-img-m{aspect-ratio:16/10; border-radius:8px; margin-bottom:20px; position:relative; background-color:var(--gold-soft);
background-size:cover; background-position:center 30%;
background-image:linear-gradient(160deg, rgba(18,17,9,.05), rgba(18,17,9,.3)), url('/assets/images/guide-mobile.jpg');
background-image:linear-gradient(160deg, rgba(18,17,9,.05), rgba(18,17,9,.3)), image-set(url('/assets/images/guide-mobile.webp') type('image/webp'), url('/assets/images/guide-mobile.jpg') type('image/jpeg'));}
.guide-tag-m{position:absolute; bottom:14px; left:14px; background:rgba(255,255,255,.94); border-radius:10px; padding:10px 14px; font-size:12px;}
.guide-tag-m b{display:block; font-family:'Space Grotesk'; font-size:13px;}
.guide-tag-m span{color:var(--ink-soft);}
.guide-text h2{font-size:22px; margin-bottom:12px;}
.guide-text p{color:var(--ink-soft); font-size:14.5px; margin-bottom:20px; line-height:1.6;}
/* Scoped to .guide-text, because the desktop .guide-text p rule further down
the file otherwise wins on specificity and pushes this back to 16.5px. */
.guide-text p.guide-note{font-size:13px;}
@media(min-width:1024px){
.guide-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;}
.guide-text{padding-right:64px;}
.guide-text h2{font-size:32px; margin-bottom:18px;}
.guide-text p{font-size:16.5px; margin-bottom:32px;}
.guide-img-m{aspect-ratio:5/4; border-radius:10px; box-shadow:var(--shadow-lg); margin-bottom:0;
background-size:cover; background-position:center 30%;
background-image:linear-gradient(160deg, rgba(18,17,9,.05), rgba(18,17,9,.3)), url('/assets/images/guide-desktop.jpg');
background-image:linear-gradient(160deg, rgba(18,17,9,.05), rgba(18,17,9,.3)), image-set(url('/assets/images/guide-desktop.webp') type('image/webp'), url('/assets/images/guide-desktop.jpg') type('image/jpeg'));}
.guide-tag-m{bottom:22px; left:22px; padding:14px 18px; max-width:240px; box-shadow:var(--shadow-sm); background:#fff;}
.guide-tag-m b{font-size:14px;}
.guide-tag-m span{font-size:12.5px;}
}
/* =========================================================
FACEBOOK PANEL
========================================================= */
.fb-post-grid{display:flex; flex-direction:column; gap:16px;}
.fb-post-card{display:block; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease;}
.fb-post-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.fb-post-img{width:100%; height:auto; display:block; border-radius:9px 9px 0 0;}
/* Standing in until the three real Facebook screenshots arrive. Deliberately
obvious rather than a broken image, so it is clear what is still missing. */
.fb-post-placeholder{aspect-ratio:4/5; background:var(--bg); border-bottom:1px solid var(--line);
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
color:var(--ink-soft); font-size:13px; font-weight:600; text-align:center; padding:16px;}
.fb-post-placeholder svg{width:30px; height:30px; opacity:.45;}
.fb-post-body{padding:16px 18px;}
.fb-post-head{display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--ink); margin-bottom:8px;}
.fb-post-link-btn{display:block; text-align:center; background:var(--gold-soft); color:var(--gold-dim); font-weight:700; font-size:13.5px; padding:11px 14px; border-radius:999px; margin-top:14px; transition:background .18s ease, color .18s ease;}
.fb-post-link-btn:hover{background:var(--gold); color:var(--dark);}
@media(min-width:768px){
.fb-post-grid{flex-direction:row; gap:20px;}
.fb-post-card{flex:1;}
}
/* =========================================================
TESTIMONIALS
========================================================= */
.testi-section{
position:relative; color:#fff;
background-image:linear-gradient(180deg, rgba(9,8,4,.82) 0%, rgba(9,8,4,.94) 100%), url('/assets/images/testimonials-bg.jpg');
background-image:linear-gradient(180deg, rgba(9,8,4,.82) 0%, rgba(9,8,4,.94) 100%), image-set(url('/assets/images/testimonials-bg.webp') type('image/webp'), url('/assets/images/testimonials-bg.jpg') type('image/jpeg'));
background-size:cover; background-position:center;
}
.testi-section .section-head h2{color:#fff;}
.testi-section .section-head p{color:#C7C3B3;}
.testi-carousel-wrap{position:relative;}
.testi-grid{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding-bottom:6px; scrollbar-width:none; margin:0 calc(-1 * var(--wrap-pad)); padding-left:var(--wrap-pad); padding-right:var(--wrap-pad);}
.testi-grid::-webkit-scrollbar{display:none;}
.testi-card{
scroll-snap-align:start; flex:0 0 82%; background:var(--surface); border:1px solid rgba(255,255,255,.08);
border-radius:8px; padding:22px; box-shadow:var(--shadow-lg);
}
.stars{color:var(--gold-dim); font-size:14px; margin-bottom:12px; letter-spacing:2px;}
.testi-card p{font-size:14px; color:var(--ink); margin:0 0 16px; line-height:1.55;}
.testi-foot{display:flex; align-items:center; gap:10px;}
.testi-avatar{width:34px; height:34px; border-radius:50%; background:var(--gold-soft); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk'; font-weight:600; color:var(--gold-dim); font-size:12.5px; flex:none;}
.testi-name{font-weight:700; font-size:13.5px; color:var(--ink);}
.testi-loc{font-size:12px; color:var(--ink-soft);}
.testi-dots{display:flex; gap:6px; justify-content:center; margin-top:16px;}
.testi-dots span{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.25);}
.testi-dots span.active{background:var(--gold);}
.testi-nav{display:none;}
@media(min-width:1024px){
.testi-grid{gap:22px; margin:0; padding-left:0; padding-right:0;}
.testi-card{flex:0 0 calc((100% - 44px) / 3); padding:32px;}
.stars{font-size:15px; margin-bottom:16px;}
.testi-card p{font-size:15.5px; margin:0 0 20px;}
.testi-avatar{width:38px; height:38px; font-size:14px;}
.testi-name{font-size:14.5px;}
.testi-nav{
display:flex; position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff; cursor:pointer;
align-items:center; justify-content:center; transition:background .2s ease;
}
.testi-nav:hover{background:rgba(255,255,255,.2);}
.testi-nav svg{width:20px; height:20px;}
.testi-nav.prev{left:-8px;}
.testi-nav.next{right:-8px;}
}
@media(min-width:1220px){
.testi-nav.prev{left:-56px;}
.testi-nav.next{right:-56px;}
}
/* =========================================================
FORM SECTION SHELL
========================================================= */
.form-section{background:var(--bg); padding-top:56px;}
.form-section .section-head h2{color:var(--ink);}
.form-section .section-head p{color:var(--ink-soft);}
.form-section .eyebrow{color:var(--gold-dim);}
.form-shell{background:var(--surface); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg); min-height:600px; position:relative;}
/* =========================================================
FOOTER
========================================================= */
.footer-photo-m{height:150px; background-color:var(--dark-2);
background-image:linear-gradient(180deg, rgba(9,8,4,.15) 0%, #0C0B06 100%), url('/assets/images/footer-photo-mobile.jpg');
background-image:linear-gradient(180deg, rgba(9,8,4,.15) 0%, #0C0B06 100%), image-set(url('/assets/images/footer-photo-mobile.webp') type('image/webp'), url('/assets/images/footer-photo-mobile.jpg') type('image/jpeg')); background-size:cover; background-position:center;}
footer{background:#0C0B06; color:#8A8571; padding:40px 0 100px;}
.footer-top{display:flex; flex-direction:column; gap:28px;}
.footer-logo{display:flex; align-items:center; margin-bottom:14px;}
.footer-logo-img{height:38px; width:auto; display:block;}
footer p{font-size:13.5px; line-height:1.75; margin-bottom:0;}
footer .flinks{display:flex; flex-direction:column; gap:8px;}
footer a{font-size:13.5px; color:#8A8571; display:block;}
footer a:hover{color:#fff;}
.footer-seo{margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,.08);}
.footer-seo p{font-size:12.5px; line-height:1.7; color:#6B6656; max-width:820px; margin:0;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:28px; padding-top:18px; font-size:12px; color:#5F5B4C; display:flex; flex-direction:column; gap:6px;}
@media(min-width:1024px){
.footer-photo-m{height:280px;
background-image:linear-gradient(180deg, rgba(9,8,4,.15) 0%, #0C0B06 100%), url('/assets/images/footer-photo-desktop.jpg');
background-image:linear-gradient(180deg, rgba(9,8,4,.15) 0%, #0C0B06 100%), image-set(url('/assets/images/footer-photo-desktop.webp') type('image/webp'), url('/assets/images/footer-photo-desktop.jpg') type('image/jpeg'));}
footer{padding:64px 0 28px;}
.footer-top{flex-direction:row; justify-content:space-between; gap:48px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,.08);}
.footer-logo-img{height:44px;}
footer p{max-width:300px;}
footer h4{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px; font-family:'Inter'; font-weight:700;}
footer a{line-height:2.1;}
.footer-bottom{flex-direction:row; justify-content:space-between; flex-wrap:wrap; margin-top:0;}
}
/* =========================================================
STICKY MOBILE CTA
========================================================= */
.mobile-cta-bar{
position:fixed; left:14px; right:14px; bottom:14px; z-index:90;
background:var(--gold); color:var(--dark); text-align:center; padding:15px; border-radius:999px;
font-weight:700; font-size:14.5px; box-shadow:0 8px 22px rgba(0,0,0,.25);
transform:translateY(120%); transition:transform .3s ease;
}
.mobile-cta-bar.show{transform:translateY(0);}
@media(min-width:1024px){ .mobile-cta-bar{display:none;} }
/* =========================================================
OWNER QUOTE
========================================================= */
.owner-quote{background:var(--bg); padding:44px 0;}
.owner-quote .wrap{text-align:center;}
.owner-quote-mark{font-family:'Space Grotesk',sans-serif; font-size:40px; color:var(--gold); line-height:1; margin-bottom:6px;}
.owner-quote p{font-family:'Space Grotesk',sans-serif; font-size:19px; line-height:1.45; color:var(--ink); max-width:340px; margin:0 auto 16px; font-weight:500;}
.owner-quote-by{font-size:13px; color:var(--ink-soft);}
.owner-quote-by b{color:var(--ink); font-weight:700;}
@media(min-width:768px){
.owner-quote p{max-width:520px; font-size:21px;}
}
/* ---------- COMPARISON SECTION (decision helper: framed panel, visible preview card, heavy CTA) ---------- */
.decision-panel{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:28px 22px; box-shadow:var(--shadow-sm);}
/* Scoped to .section-head for the same reason as .guide-note: the desktop
.section-head p rule comes later and would otherwise take the size back. */
.section-head p.decision-intro{color:var(--ink-soft); font-size:16px; max-width:560px;}
@media(min-width:1024px){ .decision-panel{padding:56px;} }
.decision-toggle-btn{
display:flex; align-items:center; justify-content:center; gap:10px; width:100%; max-width:360px; margin:24px auto 0;
background:var(--gold); color:var(--dark); border:none; padding:17px 26px; border-radius:999px; font-weight:700; font-size:15.5px; cursor:pointer;
box-shadow:0 10px 26px rgba(201,162,39,.3); transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.decision-toggle-btn:hover{background:var(--gold-hover); transform:translateY(-2px); box-shadow:0 14px 32px rgba(201,162,39,.38);}
.decision-toggle-btn .chev{transition:transform .25s ease;}
.decision-toggle-btn.open .chev{transform:rotate(180deg);}
.decision-content{max-height:0; overflow:hidden; transition:max-height .5s ease;}
.decision-inner{padding-top:28px;}
.vs-grid{display:grid; grid-template-columns:1fr; gap:16px;}
.vs-card{background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:16px;}
.decision-content .vs-card{margin-bottom:0;}
.vs-problem{padding:18px 20px 14px;}
.vs-solution{padding:14px 20px 18px; background:var(--gold-soft); border-top:1px solid var(--gold);}
.vs-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--ink-soft); margin-bottom:8px; display:flex; align-items:center; gap:6px;}
.vs-solution .vs-label{color:var(--gold-dim);}
.vs-label svg{width:14px; height:14px; flex:none;}
.vs-card p{margin:0; font-size:13.5px; line-height:1.5; color:var(--ink-soft);}
.vs-solution p{color:var(--ink); font-weight:500;}
.vs-arrow-row{display:flex; justify-content:center; padding:1px 0;}
.vs-arrow-row svg{width:17px; height:17px; color:var(--gold-dim);}
/* ---------- FORM ---------- */
.fw-topbar{position:sticky; top:0; z-index:5; background:var(--surface); padding:24px 32px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:18px;}
.fw-back{background:none;border:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;visibility:hidden;color:var(--ink);}
.fw-back:hover{background:var(--bg);}
.fw-back.show{visibility:visible;}
.fw-progress{flex:1;}
.fw-track{height:6px;background:var(--line);border-radius:999px;overflow:hidden;}
.fw-fill{height:100%;background:var(--gold);width:0%;transition:width .3s ease;}
.fw-label{font-size:12px;font-weight:600;color:var(--ink-soft);margin-top:8px;display:flex;justify-content:space-between;}
.fw-main{padding:28px 20px 130px; max-width:640px; margin:0 auto;}
@media(min-width:768px){ .fw-main{padding:40px 40px 130px;} }
.fw-step{display:none; flex-direction:column; animation:fwIn .3s ease;}
.fw-step.active{display:flex;}
@keyframes fwIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.fw-qtitle{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:27px; margin-bottom:10px; letter-spacing:-0.01em;}
/* Focus lands here on every step change so the new question gets announced.
These headings carry tabindex="-1" and are never reachable by Tab, so hiding
the ring costs keyboard users nothing. */
.fw-qtitle:focus, .fw-success h2:focus{outline:none;}
.fw-qtitle-sub{margin-top:24px; font-size:22px;}
/* Lifted out of repeated inline styles so the stylesheet stays the one place
these are defined. */
.fw-review-value{display:flex; align-items:center; gap:4px;}
.fb-icon{color:#1877F2;}
.h2-compact{font-size:30px; margin-bottom:14px;}
.h2-form{font-size:36px; margin-bottom:16px;}
.head-loose{margin-bottom:44px;}
.lead-narrow{max-width:600px;}
.fw-qsub{font-size:15px;color:var(--ink-soft);margin-bottom:24px; line-height:1.55;}
/* The question label above each yes/no row in the inspection steps. Must come
after .fw-qsub, which it sits alongside and overrides. */
.fw-insp-q{margin-bottom:6px; font-weight:700; color:var(--ink);}
.fw-bottombar{position:absolute; left:0; right:0; bottom:0; padding:20px 32px 28px; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--surface) 40%);}
.fw-errbanner{display:none; background:var(--bad-bg); color:var(--bad-ink); border-left:4px solid var(--bad-line); border-radius:8px; padding:11px 14px; font-size:13px; font-weight:600; margin-bottom:12px;}
.fw-errbanner.show{display:block;}
.fw-btn-primary{width:100%; max-width:576px; margin:0 auto; display:block; background:var(--dark); color:#fff; border:none; border-radius:999px; padding:17px; font-size:16px; font-weight:700; cursor:pointer; transition:background .2s ease;}
.fw-btn-primary:hover{background:var(--gold-hover);}
label.fw-l{display:block;font-size:15px;font-weight:600;margin-bottom:9px;}
/* A label sitting under a preceding control rather than at the top of a step. */
label.fw-l-spaced{margin-top:8px;}
label.fw-l-spaced-lg{margin-top:10px;}
/* A label with the little "?" button beside it. */
label.fw-l-with-info{display:flex; align-items:center; gap:7px;}
/* The quieter second-tier label, used for the plate and VIN pair. */
label.fw-l-sub{font-size:13.5px; color:var(--ink-soft); margin-bottom:6px;}
label.fw-l-sub.fw-l-with-info{gap:6px;}
.fw-l-hint{color:var(--gold-dim);}
.fw-note{font-size:13.5px;color:var(--ink-soft);margin:-3px 0 14px;line-height:1.55;}
.fw-main input[type=text],.fw-main input[type=tel],.fw-main input[type=email],.fw-main input[type=number],.fw-main textarea{
width:100%;font-family:'Inter',sans-serif;font-size:16px;padding:15px 16px;border:1.5px solid var(--line);border-radius:11px;background:var(--bg);color:var(--ink);margin-bottom:4px;
}
.fw-main textarea{min-height:92px;resize:vertical;}
.fw-main input:focus,.fw-main textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.15); background:#fff;}
.fw-main input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;}
.fw-mono{font-family:'IBM Plex Mono',monospace;}
input.fw-error,textarea.fw-error{border-color:var(--bad-line) !important;}
.fw-group-error{outline:2px solid var(--bad-line);outline-offset:4px;border-radius:16px;}
.fw-choice-list{display:flex;flex-direction:column;gap:11px;margin-bottom:6px;}
.fw-choice-row{display:flex;align-items:center;gap:13px;border:1.5px solid var(--line);border-radius:13px;padding:15px 17px;background:var(--bg);font-size:15.5px;font-weight:600;cursor:pointer; transition:border-color .15s ease, background .15s ease;}
/* The real checkbox/radio sits under the styled box. Clipped rather than
display:none so it keeps its place in the tab order and stays announced. */
.fw-choice-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.fw-choice-row:focus-within{outline:2.5px solid var(--gold); outline-offset:2px;}
.fw-choice-row:hover{border-color:var(--gold-dim);}
.fw-choice-row .box{width:22px;height:22px;border-radius:6px;border:2px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;}
.fw-choice-row.radio .box{border-radius:50%;}
.fw-choice-row.selected{border-color:var(--gold);background:var(--gold-soft);}
.fw-choice-row.selected .box{background:var(--gold);border-color:var(--gold);}
.fw-choice-row .box svg{display:none;width:14px;height:14px;color:#fff;}
.fw-choice-row.selected .box svg{display:block;}
.fw-choice-row.radio.selected .box::after{content:'';width:10px;height:10px;border-radius:50%;background:#fff;}
.fw-yn{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:8px;}
.fw-yn button{flex:1 1 auto;min-width:110px;min-height:50px;padding:12px 10px;border-radius:11px;border:1.5px solid var(--line);background:var(--bg);font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer; transition:border-color .15s ease;}
.fw-yn button:hover{border-color:var(--gold-dim);}
.fw-yn button.active{background:var(--gold);border-color:var(--gold);color:var(--dark);}
.fw-mini-yn{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px;}
.fw-mini-yn button{flex:1 1 30%;min-height:46px;padding:9px 8px;border-radius:11px;border:1.5px solid var(--line);background:var(--bg);font-size:13px;font-weight:700;cursor:pointer;}
.fw-mini-yn button.active{background:var(--gold);border-color:var(--gold);color:var(--dark);}
.fw-info-toggle{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);background:var(--bg);color:var(--ink-soft);font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;padding:0;}
.fw-group-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--gold-dim);margin:24px 0 14px;padding-top:18px;border-top:1px solid var(--line);}
.fw-group-title:first-of-type{margin-top:2px;padding-top:0;border-top:none;}
.fw-helper{background:var(--gold-soft);border-radius:11px;padding:14px 16px;font-size:13.5px;margin-bottom:20px;display:flex;gap:11px;align-items:flex-start;color:var(--ink);}
.fw-helper svg{flex:none;margin-top:2px;color:var(--gold-dim);}
.fw-warn{border-radius:11px;padding:13px 15px;font-size:13.5px;margin:-4px 0 16px;display:none;border-left:4px solid;}
.fw-warn.show{display:block;}
.fw-warn.info{background:var(--gold-soft);color:var(--gold-dim);border-left-color:var(--gold-dim);}
.fw-warn.good{background:var(--good-bg);color:var(--good-ink);border-left-color:var(--good-line);}
.fw-warn.bad{background:var(--bad-bg);color:var(--bad-ink);border-left-color:var(--bad-line);}
.fw-stepper{display:flex;align-items:flex-start;margin-bottom:24px;pointer-events:none;}
.fw-step-item{display:flex;flex-direction:column;align-items:center;gap:8px;width:96px;flex:none;}
.fw-step-circle{width:30px;height:30px;border-radius:50%;border:2px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--ink-soft);}
.fw-step-item.active .fw-step-circle{border-color:var(--gold);color:var(--gold-dim);background:var(--gold-soft);}
.fw-step-item.step-done .fw-step-circle{border-color:var(--good-line);background:var(--good-line);color:#fff;}
.fw-step-caption{font-size:10.5px;font-weight:700;color:var(--ink-soft);text-align:center;}
.fw-step-item.active .fw-step-caption{color:var(--gold-dim);}
.fw-step-item.step-done .fw-step-caption{color:var(--good-line);}
.fw-step-connector{flex:1;height:2px;background:var(--line);margin-top:15px;}
.fw-step-connector.step-done{background:var(--good-line);}
.fw-price-input{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:13px;background:var(--bg);padding:6px 18px;margin-bottom:6px;}
.fw-price-input input{border:none;background:transparent;padding:15px 0;font-size:27px;font-weight:700;color:var(--ink);margin:0; font-family:'Space Grotesk';}
.fw-price-input span{color:var(--ink-soft);font-size:16px;}
.fw-benefit-box{background:var(--dark);color:#fff;border-radius:13px;padding:18px 20px;margin-bottom:18px;}
.fw-benefit-box-spaced{margin-top:6px;}
.fw-benefit-box h4{color:var(--gold-soft);font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 12px;font-family:'Inter';font-weight:700;}
.fw-benefit-box ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.fw-benefit-box li{display:flex;gap:9px;font-size:13.5px;align-items:flex-start;color:#DCD8C8;}
.fw-benefit-box svg{flex:none;margin-top:2px;color:var(--gold);}
.fw-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:16px;}
.fw-photo-slot{aspect-ratio:1;border:1.5px dashed var(--line);border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--bg);font-size:12px;color:var(--ink-soft);overflow:hidden;}
.fw-photo-slot img{width:100%;height:100%;object-fit:cover;}
.fw-photo-slot.filled{border-style:solid;border-color:var(--gold);position:relative;}
.fw-photo-remove{position:absolute;top:5px;right:5px;width:24px;height:24px;border:none;border-radius:50%;
background:rgba(9,8,4,.72);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.fw-photo-remove:hover{background:rgba(9,8,4,.92);}
.fw-photo-pick{width:100%;text-align:center;}
.fw-photo-msg{margin-top:10px;display:none;}
.fw-photo-msg.show{display:block;}
.fw-note-spaced{margin-top:12px;}
/* Conditional blocks. form.js flips display between none and block, so their
spacing has to live here rather than beside the display in a style attribute,
or it would be lost the moment the script rewrote the attribute. */
.fw-insp-followup{margin-bottom:14px;}
.fw-followup-block{margin-top:10px;}
.fw-inline-link{color:var(--gold-dim);font-weight:600;}
.fw-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.fw-review-row{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;}
/* The last row closes the list, so it does not need a rule under it. */
.fw-review-row:last-child{border-bottom:none;}
.fw-review-row span:first-child{color:var(--ink-soft);}
.fw-review-row span:last-child{font-weight:700;text-align:right;}
.fw-review-edit{font-size:12.5px;color:var(--gold-dim);font-weight:700;cursor:pointer;margin-left:8px;background:none;border:none;padding:0;font-family:inherit;}
.fw-success{text-align:center;padding:70px 10px;}
.fw-success h2{font-size:30px;}
.fw-success p{color:var(--ink-soft);margin-top:14px;}
.fw-resume{display:none;background:var(--gold-soft);border:1px solid var(--gold);border-radius:11px;padding:16px;margin-bottom:18px;font-size:13.5px;}
.fw-resume.show{display:block;}
.fw-resume-actions{display:flex;gap:9px;margin-top:11px;}
.fw-resume-actions button{flex:1;border:none;border-radius:9px;padding:11px;font-size:13px;font-weight:700;cursor:pointer;}
.fw-resume-yes{background:var(--dark);color:#fff;}
.fw-resume-no{background:transparent;border:1.5px solid var(--line);color:var(--ink-soft);}
/* =========================================================
SUBPAGES
Shared shell for /faq/, /guides/, /kontakt-os/ and 404.
========================================================= */
.page-hero{
background:var(--dark); color:#fff; padding:48px 0 52px;
border-bottom:1px solid var(--dark-line);
}
.page-hero h1{color:#fff; font-size:clamp(28px,7vw,38px); line-height:1.14; margin-bottom:14px; max-width:820px;}
.page-hero-lead{color:#C7C3B3; font-size:15.5px; max-width:620px; margin:0; line-height:1.65;}
@media(min-width:1024px){
.page-hero{padding:88px 0 92px;}
.page-hero h1{font-size:clamp(38px,4.4vw,52px); margin-bottom:20px;}
.page-hero-lead{font-size:18px;}
}
.page-body{padding:48px 0 8px;}
@media(min-width:1024px){ .page-body{padding:80px 0 16px;} }
/* ---- FAQ page ---- */
.faq-group{margin-bottom:38px;}
.faq-group:last-child{margin-bottom:0;}
.faq-group-title{
font-size:15px; text-transform:uppercase; letter-spacing:.07em; color:var(--gold-dim);
font-family:'IBM Plex Mono',monospace; font-weight:500; margin-bottom:14px;
}
@media(min-width:1024px){
.faq-group{margin-bottom:56px;}
.faq-group-title{font-size:13px; margin-bottom:18px;}
}
/* ---- Guide page ---- */
.guide-intro{
background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--gold);
border-radius:var(--radius); padding:24px 22px; margin-bottom:44px; box-shadow:var(--shadow-sm);
}
.guide-intro h2{font-size:20px; margin-bottom:12px;}
.guide-intro p{color:var(--ink-soft); font-size:15px; line-height:1.7; margin:0 0 12px;}
.guide-intro p:last-child{margin-bottom:0;}
.guide-block{margin-bottom:52px; max-width:1180px;}
.guide-block:last-child{margin-bottom:0;}
.guide-block h2{font-size:23px; margin-bottom:14px;}
.guide-block p{color:var(--ink-soft); font-size:15.5px; line-height:1.72; margin:0 0 14px; max-width:760px;}
.guide-list{color:var(--ink-soft); font-size:15.5px; line-height:1.9; margin:0 0 14px; padding-left:20px; max-width:760px;}
.guide-figures{display:grid; grid-template-columns:1fr; gap:20px; margin-top:22px;}
.guide-figure{margin:0;}
.guide-figure img{
width:100%; height:auto; border-radius:10px; display:block;
border:1px solid var(--line); background:var(--surface);
}
.guide-figure figcaption{
font-size:13.5px; color:var(--ink-soft); line-height:1.55; margin-top:10px; padding-left:2px;
}
@media(min-width:768px){
.guide-intro{padding:30px 30px; margin-bottom:60px;}
.guide-intro h2{font-size:23px;}
.guide-block{margin-bottom:76px;}
.guide-block h2{font-size:30px; margin-bottom:18px;}
.guide-figures{grid-template-columns:repeat(2,1fr); gap:26px;}
.guide-figure-portrait img{max-height:520px; width:auto;}
}
@media(min-width:1024px){
.guide-figures{grid-template-columns:repeat(3,1fr);}
}
/* ---- Contact page ---- */
.contact-grid{display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:44px;}
.contact-card{
background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
padding:26px 24px; box-shadow:var(--shadow-sm);
}
.contact-card h2{font-size:21px; margin-bottom:12px;}
.contact-card p{color:var(--ink-soft); font-size:15px; line-height:1.7; margin:0 0 18px;}
.contact-btn{max-width:320px;}
.contact-mail{
display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:500;
color:var(--gold-dim); border-bottom:1.5px solid var(--gold); padding-bottom:3px;
}
.contact-mail:hover{color:var(--ink); border-color:var(--ink);}
/* Wraps a paragraph or two of small print under the card's link. The !important
that used to be here was working around .contact-card p, which this now beats
on specificity honestly. */
.contact-note{margin-top:20px;}
.contact-card .contact-note p{font-size:14px; margin-bottom:0;}
.contact-card .contact-note p + p{margin-top:10px;}
.contact-details{
display:grid; grid-template-columns:1fr; gap:26px;
border-top:1px solid var(--line); padding-top:34px;
}
.contact-details h3{font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); margin-bottom:10px; font-family:'Inter',sans-serif; font-weight:700;}
.contact-details p{color:var(--ink-soft); font-size:14.5px; line-height:1.75; margin:0;}
@media(min-width:768px){
.contact-grid{grid-template-columns:repeat(2,1fr); gap:26px; margin-bottom:64px;}
.contact-details{grid-template-columns:repeat(3,1fr); gap:44px; padding-top:44px;}
}
/* ---- 404 ---- */
.notfound-links{display:grid; grid-template-columns:1fr; gap:12px;}
.notfound-link{
background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
padding:20px 22px; display:block; transition:border-color .18s ease, transform .18s ease;
}
.notfound-link:hover{border-color:var(--gold); transform:translateY(-2px);}
.notfound-link-title{display:block; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px; margin-bottom:5px;}
.notfound-link-sub{display:block; color:var(--ink-soft); font-size:14px;}
@media(min-width:768px){ .notfound-links{grid-template-columns:repeat(2,1fr); gap:18px;} }
/* ---- Shared closing CTA ---- */
.page-cta{padding:56px 0 72px;}
.page-cta-inner{
background:var(--dark); border-radius:16px; padding:34px 26px; text-align:center;
}
.page-cta-inner h2{color:#fff; font-size:24px; margin-bottom:12px;}
.page-cta-inner p{color:#C7C3B3; font-size:15px; line-height:1.65; margin:0 auto 24px; max-width:520px;}
.page-cta-btn{display:inline-block; width:auto; max-width:100%;}
@media(min-width:1024px){
.page-cta{padding:80px 0 104px;}
.page-cta-inner{padding:60px 40px;}
.page-cta-inner h2{font-size:34px; margin-bottom:16px;}
.page-cta-inner p{font-size:17px; margin-bottom:32px;}
}