, so a middle click or
"open in new tab" behaves the way a link is expected to. .btn-primary is
already display:block and centred, so it needs nothing extra to sit right. */
.hero-ctas{display:flex; flex-direction:column; gap:12px; margin-bottom:18px;}
.hero-ctas .btn-outline{width:100%;}
.hero .btn-primary{
font-size:17px; padding:19px 30px;
transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.hero .btn-primary:hover{transform:translateY(-2px); box-shadow:0 16px 34px rgba(201,162,39,.42);}
.hero .btn-outline.on-dark{transition:background .22s ease, border-color .22s ease;}
.hero .btn-outline.on-dark:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.7);}
.hero-rating{display:flex; align-items:center; gap:10px; margin-bottom:34px; flex-wrap:wrap;}
.hero-rating svg{flex:none;}
.hero-rating-stars{color:var(--gold); font-size:14px; letter-spacing:1.5px;}
.hero-rating-text{font-size:13.5px; color:#DCD8C8;}
.hero-rating-text b{color:#fff; font-weight:700;}
.hero-rating-sep{color:rgba(255,255,255,.3); font-size:14px;}
/* Three glass cards, at every width. They used to be a one line strip below
768px and full blocks above it, which is why the repeater carried a second
short wording; Mads' version is the same grid on a phone. */
.hero-stats-full{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.hero-stats-full .stat{
background:rgba(8,10,16,.4); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:17px 12px;
box-shadow:0 8px 22px rgba(0,0,0,.18);
transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.hero-stats-full .stat:hover{transform:translateY(-6px) scale(1.02); background:rgba(8,10,16,.55); box-shadow:0 20px 40px rgba(0,0,0,.3);}
.hero-stats-full .stat b{font-family:'Space Grotesk',sans-serif; font-size:19px; color:#fff; display:block; margin-bottom:2px; font-weight:700;}
.hero-stats-full .stat span{font-size:11.5px; color:#D8D4C4;}
/* Above the fold, so it cannot wait for the scroll observer the rest of the
page uses: it would never fire. Plain animation with a per element delay. */
.hero-fade{opacity:0; animation:heroFadeUp .65s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--d, 0ms);}
@keyframes heroFadeUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);}}
@media(prefers-reduced-motion: reduce){
.hero-fade{animation:none; opacity:1; transform:none;}
}
/* Without JavaScript the animation still runs, since it is pure CSS. This is
for the case where the stylesheet loads and the animation is interrupted. */
.no-js .hero-fade{opacity:1; animation:none;}
@media(min-width:1024px){
.hero{
min-height:92vh; padding:140px 0 100px;
background-image:url('../images/hero-desktop.jpg');
background-image:image-set(url('../images/hero-desktop.webp') type('image/webp'), url('../images/hero-desktop.jpg') type('image/jpeg'));
background-position:center 65%;
}
.hero .wrap{max-width:1400px;}
/* 740 rather than the 640 it is on a phone. Mads' mock breaks the heading
over three lines; his wording ends "brugte campingvogne" and ours keeps the
full stop he asked us to keep, and those two characters are the difference
between three lines and four at 60px. The lead and the stat cards set their
own narrower widths below, so only the heading and the row of ticks use
the extra hundred pixels. */
.hero-left{max-width:740px;}
.hero h1{font-size:clamp(40px,4.6vw,60px); margin-bottom:28px;}
.hero p.lead{font-size:18.5px; max-width:500px; margin-bottom:36px;}
.hero-pitches{flex-direction:row; gap:20px; margin-bottom:40px;}
.hero-ctas{flex-direction:row; align-items:center; gap:18px; margin-bottom:22px;}
.hero-ctas .btn-primary, .hero-ctas .btn-outline{width:auto;}
.hero .btn-primary{box-shadow:0 10px 30px rgba(201,162,39,.3); padding:17px 30px;}
.hero-stats-full{max-width:560px; gap:14px;}
.hero-stats-full .stat{padding:20px 18px;}
.hero-stats-full .stat b{font-size:26px;}
.hero-stats-full .stat span{font-size:12.5px;}
}
/* =========================================================
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;}
/* Promoted from h4 so the outline does not jump a level under the section's
h2. Font and weight restated because the base h1,h2,h3 rule would otherwise
change it from Inter 700 to Space Grotesk 600. */
.feature-point h3{font-size:15.5px; margin-bottom:4px; font-family:'Inter',sans-serif; font-weight:700;}
.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;}
/* Only the card that has somewhere to send the reader gets one. The arrow
points down because the destination is further down this same page. */
.trio-card-link{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:14px; font-weight:700; color:var(--gold-dim); text-decoration:none; border-bottom:1px solid transparent;}
.trio-card-link:hover{border-bottom-color:currentColor;}
.trio-card-link svg{width:15px; height:15px; flex:none;}
/* ---- 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 h3{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 ---- */
/* scroll-margin-top because this is a jump target now: the sticky nav is 52px
tall and would otherwise sit on top of the heading the reader was sent to. */
.review-wall-head{text-align:center; margin-top:72px; margin-bottom:32px; scroll-margin-top:80px;}
.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 ----
Two different things at two sizes, and deliberately so.
From 768px up it is the marquee: two or three rows of cards drifting in
alternate directions. Mads' words for it are "et virvar af reviews", and he
likes it, so above a phone nothing here has changed.
On a phone it was one row of that same marquee, which meant a reader saw a
third of the reviews at most, one at a time, at the speed the animation
chose. His note of 9 August: "på mobil bliver den temmelig fesen med en linje
som bare scroller langsomt til siden, tænker ikke folk har tålmodig til at
læse mere end 1-2 af dem og så ser de aldrig de +20 andre". So the phone gets
a plain vertical list of all of them instead, four to start with and the rest
behind a button. Reading down is what the device is for; a sideways marquee
fights the one gesture the reader is already making.
display:contents on the row and the track is what flattens the three rows
into one column without changing the markup the marquee needs. */
.review-wall{display:flex; flex-direction:column; gap:12px;}
.review-row{display:contents;}
.review-track{display:contents;}
/* The marquee's second copy of every card. Nothing to make continuous here. */
.rc-card[data-dup]{display:none;}
.review-wall.is-collapsed .rc-card.rc-more{display:none;}
.review-more{margin-top:20px;}
@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;}
/* Back to the marquee. Everything the phone list switched off, switched on
again, and the card takes the width the PHP measured from its text. */
.review-wall{gap:20px; overflow:hidden;}
.review-row{
display:block; 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(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;}
.rc-card{width:var(--w);}
.rc-card[data-dup]{display:block;}
.review-wall.is-collapsed .rc-card.rc-more{display:block;}
.review-more{display:none;}
}
@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;}
/* The button is a phone control; it stays hidden by the 768px rule. */
.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;}
.faq-more{margin-top:22px;}
@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;}
.faq-more{max-width:760px; margin-top:26px;}
}
/* =========================================================
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('../images/guide-mobile.jpg');
background-image:linear-gradient(160deg, rgba(18,17,9,.05), rgba(18,17,9,.3)), image-set(url('../images/guide-mobile.webp') type('image/webp'), url('../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('../images/guide-desktop.jpg');
background-image:linear-gradient(160deg, rgba(18,17,9,.05), rgba(18,17,9,.3)), image-set(url('../images/guide-desktop.webp') type('image/webp'), url('../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;}
}
/* =========================================================
SECTION RHYTHM
Mads: "fra det køber vi og ned til kundeoplevelser, der er det hele grå
baggrund og uden sektions adskillelse". Measured, he was right: after the
dark "om os" band there were 2.841px of unbroken #F6F5F1 across three
sections with no border and no change of colour anywhere in it.
The obvious fix, alternating with --surface, is wrong nearly everywhere:
this design's main device is a white card on the cream page, and a white
card on a white section is just a hairline. Checked section by section, and
every light one carries white children except the guide, whose only white
element sits on top of a photo rather than on the section itself. So the
guide is the one that turns white, and everything else alternates with a
second cream a step deeper.
--bg-alt is the deepest tone that keeps --gold-dim above 4.5:1 for the
eyebrow labels; it measures 4.65, where one further step down measures 4.49
and fails. White cards separate from it better than from --bg (1.18 against
1.09), so the alternation makes the cards read more clearly, not less.
Top to bottom the page now goes cream, alt, dark, cream, white, dark, cream,
dark, cream. No two neighbouring sections share a background.
========================================================= */
.section-alt{
background:var(--bg-alt);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.section-surface{
background:var(--surface);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
/* =========================================================
VIDEO
========================================================= */
.video-section{background:var(--dark); color:#fff;}
/* Player one side, a short piece of copy the other. Stacked on a phone, with
the player first either way: it is the reason the section exists. */
.video-layout{display:grid; gap:24px; grid-template-columns:1fr; align-items:center;}
.video-copy{max-width:52ch;}
.video-copy h2{color:#fff; margin-bottom:12px;}
.video-copy p{color:rgba(255,255,255,.72); font-size:15px;}
.video-frame{
position:relative; width:100%; overflow:hidden; background:#000;
border-radius:14px; border:1px solid var(--dark-line);
}
.is-wide .video-frame{aspect-ratio:16/9;}
/* A 9:16 frame given a full column would be taller than most screens, so the
Short is capped and centred rather than left to fill the width it is given. */
.is-tall .video-frame{aspect-ratio:9/16; max-width:320px; margin-inline:auto;}
.video-play{
position:absolute; inset:0; width:100%; height:100%;
padding:0; margin:0; border:0; background:none; cursor:pointer; display:block;
}
.video-play img{width:100%; height:100%; object-fit:cover; display:block;}
.video-play-icon{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:64px; height:64px; border-radius:50%;
background:rgba(18,17,9,.62); border:1px solid rgba(255,255,255,.38);
display:grid; place-items:center;
transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.video-play-icon svg{width:26px; height:26px; color:#fff; margin-left:3px; transition:color .18s ease;}
.video-play:hover .video-play-icon{background:var(--gold); border-color:var(--gold); transform:translate(-50%,-50%) scale(1.06);}
.video-play:hover .video-play-icon svg{color:var(--dark);}
.video-play:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
/* The iframe that replaces the button once someone presses play. */
.video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
/* Qualified with p, or ".video-copy p" above outranks it and the small print
is neither small nor dim. */
p.video-note{margin:18px 0 0; font-size:13px; color:rgba(255,255,255,.5);}
@media(min-width:900px){
/* The wide player earns most of the row. The vertical one is only 320px, so
there the copy takes the space instead of being squeezed beside it. */
.video-layout{gap:48px;}
.video-layout.is-wide{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);}
/* The vertical player is only 320px wide. Left to fill a full-width row it
and the copy end up pinned to opposite edges with a hole between them, so
this pair is sized to its content and centred instead. */
.video-layout.is-tall{grid-template-columns:320px minmax(0,460px); justify-content:center;}
/* The second section puts the player on the other side, so two of these in
one page do not read as the same block printed twice. Order, not
direction: the player stays first in the document either way, which is
the order it should be read and tabbed in. */
.video-layout.is-mirrored .video-media{order:2;}
.video-layout.is-mirrored.is-wide{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);}
.video-layout.is-mirrored.is-tall{grid-template-columns:minmax(0,460px) 320px;}
/* The copy is capped, so in a mirrored row it sits against the player rather
than drifting away from it. */
.video-layout.is-mirrored .video-copy{justify-self:end;}
}
@media(prefers-reduced-motion:reduce){
.video-play-icon, .video-play-icon svg{transition:none;}
.video-play:hover .video-play-icon{transform:translate(-50%,-50%);}
}
/* =========================================================
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);}
/* In the original design .fb-post-img was the ![]()
itself. Here it is a
wrapper, because the same slot also renders a placeholder, so the styling
has to reach the image inside it rather than stopping at the box. */
.fb-post-img{width:100%; display:block;}
.fb-post-img 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-on-soft); 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;}
/* Three screenshots of three different posts are three different heights,
and side by side that put the card bodies at three different depths with
the buttons under them stepping down the row. Stacked on a phone nobody
can see it, which is why Mads reported it as a desktop problem.
720x497 is the shortest of the three, so the other two lose the strip of
gravel under the van rather than anything being stretched, and top keeps
the Facebook header and the post text, which is the part worth reading.
Only where there is a screenshot: the empty-slot placeholder has its own
4:5 box and should keep it. */
.fb-post-img:not(.fb-post-placeholder){aspect-ratio:720/497;}
.fb-post-img:not(.fb-post-placeholder) img{height:100%; object-fit:cover; object-position:top;}
}
/* =========================================================
TESTIMONIALS
========================================================= */
/* The collage was one 1600px file for every screen, and at 332 KB it was the
single heaviest thing the front page downloaded — heavier than the hero, and
fetched at the same time, so the two competed for a phone's bandwidth while
the hero was still what the LCP was waiting on.
It is a photograph of several hundred caravans under an 82 to 94 percent
black wash. Almost none of it survives to the screen, which is why the build
already encodes it at quality 50. Quality was not the lever left; resolution
was. Every other section background on the site already ships a phone
variant, and this one simply never got one.
900x600 under that wash on a 412px screen: 78 KB instead of 332. Desktop
keeps the full file below. */
.testi-section{
position:relative; color:#fff;
background-image:linear-gradient(180deg, rgba(9,8,4,.82) 0%, rgba(9,8,4,.94) 100%), url('../images/testimonials-bg-mobile.jpg');
background-image:linear-gradient(180deg, rgba(9,8,4,.82) 0%, rgba(9,8,4,.94) 100%), image-set(url('../images/testimonials-bg-mobile.webp') type('image/webp'), url('../images/testimonials-bg-mobile.jpg') type('image/jpeg'));
background-size:cover; background-position:center;
}
@media(min-width:1024px){
.testi-section{
background-image:linear-gradient(180deg, rgba(9,8,4,.82) 0%, rgba(9,8,4,.94) 100%), url('../images/testimonials-bg.jpg');
background-image:linear-gradient(180deg, rgba(9,8,4,.82) 0%, rgba(9,8,4,.94) 100%), image-set(url('../images/testimonials-bg.webp') type('image/webp'), url('../images/testimonials-bg.jpg') type('image/jpeg'));
}
}
.testi-section .section-head h2{color:#fff;}
.testi-section .section-head p{color:#C7C3B3;}
.testi-carousel-wrap{position:relative;}
/* scroll-behavior lives in the media query below, not here: behavior:'auto'
from JS means "whatever the CSS says", so leaving smooth on unconditionally
overrode the reduced-motion branch in site.js and animated it anyway. */
.testi-grid{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; 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;}
@media (prefers-reduced-motion: no-preference){
.testi-grid{scroll-behavior:smooth;}
}
.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-on-soft); 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);}
/* No gap. The buttons are the spacing: each one is a hit target wrapped around
a small dot, so a gap on top of that is added to padding that is already
there. With one, six-pixel dots sat thirty pixels apart and read as five
unrelated specks rather than as one control. */
.testi-dots{display:flex; gap:0; justify-content:center; margin-top:16px;}
/* The dot is drawn by ::before so the button can be a real hit target without
the design growing a row of fat circles. */
/* 24 wide, not 18. WCAG 2.2's minimum target is 24x24, and the height was
already there while the width was six pixels short, which is the sort of miss
that only a tool finds: the dots look identical either way and Lighthouse
failed the desktop front page on it while passing the phone, because the
coarse-pointer rule below was doing the job everywhere it was consulted.
Only the hit area grows. The dot is still seven pixels. */
.testi-dots button{
appearance:none; -webkit-appearance:none; background:none; border:0; padding:0; margin:0;
width:24px; height:24px; display:grid; place-items:center; cursor:pointer; border-radius:50%;
}
/* display:grid above outranks the user agent's [hidden]{display:none}, so
without this the dots that lead nowhere at this width come back. */
.testi-dots button[hidden]{display:none;}
.testi-dots button::before{
content:""; width:7px; height:7px; border-radius:50%;
background:rgba(255,255,255,.25); transition:background .2s ease, width .2s ease, height .2s ease;
}
.testi-dots button:hover::before{background:rgba(255,255,255,.5);}
/* Grown rather than scaled. scale(1.2) on a six-pixel circle is a 1.2 pixel
difference, landing off the pixel grid, so the current slide was marked by a
dot that was the same size as the others and slightly blurrier. */
.testi-dots button.active::before{background:var(--gold); width:10px; height:10px;}
.testi-dots button:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
@media (pointer:coarse){
.testi-dots button{width:32px; height:44px;}
}
.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);}
/* Reaching the end should look like reaching the end. Kept visible rather
than hidden so the pair does not jump position when one is spent. */
.testi-nav[disabled]{opacity:.3; cursor:default; pointer-events:none;}
.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('../images/footer-photo-mobile.jpg');
background-image:linear-gradient(180deg, rgba(9,8,4,.15) 0%, #0C0B06 100%), image-set(url('../images/footer-photo-mobile.webp') type('image/webp'), url('../images/footer-photo-mobile.jpg') type('image/jpeg')); background-size:cover; background-position:center;}
footer{background:#0C0B06; color:#8A8571; padding:32px 0 100px;}
/* Two columns on a phone, not one.
Stacked, the three link columns came to 551px on their own and the whole
footer to 1114px against an 844px screen: a screen and a half of footer
under a page that had already finished. Kontakt and Sider sit side by side
now and Selskab takes the row below. The brand block spans, because the
blurb needs the full width to stay three lines rather than six.
Grid rather than two wrappers in footer.php, so the markup keeps matching
the repeater: a fourth column added in wp-admin lands in the free cell
instead of needing a template change. */
.footer-top{display:grid; grid-template-columns:1fr 1fr; gap:24px 20px; align-items:start;}
.footer-top > div:first-child{grid-column:1 / -1;}
/* The three columns are not the same height: Kontakt holds two links, Sider
four, Selskab an address. Left to flow two-by-two they made a row as tall as
Sider, so Kontakt sat over 90px of nothing and Selskab took a whole row of
its own with the right half empty. It read as a layout that had lost a
column rather than one with three.
So the two short ones stack in the left cell and the long one takes both
rows beside them. 531px of block becomes 439px, and the footer comes in
under one phone screen. A fourth column added in wp-admin is still fine: it
is not placed here, so it auto-flows into the first free cell underneath. */
.footer-top > div:nth-child(2){grid-column:1; grid-row:2;}
.footer-top > div:nth-child(3){grid-column:2; grid-row:2 / span 2;}
.footer-top > div:nth-child(4){grid-column:1; grid-row:3;}
.footer-logo{display:flex; align-items:center; margin-bottom:12px;}
/* The full lockup, so it is the drawing that gets the height rather than the
wordmark it already contains. 64px on a phone: still the drawing rather than
a smudge, and 20px that the footer does not have to spend. */
.footer-logo-img{height:64px; width:auto; display:block;}
footer p{font-size:13.5px; line-height:1.75; margin-bottom:0;}
/* Footer links were 22px tall with an 8px gap, so a 30px pitch on a phone.
Padding rather than a taller line-height, so the text rhythm is unchanged
and only the hit area grows. */
footer .flinks{display:flex; flex-direction:column; gap:2px;}
footer a{font-size:13.5px; color:#8A8571; display:flex; align-items:center; min-height:44px;}
/* A link with no URL renders as a span, which is the address and the CVR
number. Nothing taps them, so the 44px touch minimum above was 44px of air
each. They get ordinary line spacing instead. */
footer .flinks span{display:block; font-size:13.5px; line-height:1.7; padding:3px 0;}
footer a:hover{color:#fff;}
/* The column headings were only given a colour inside the 1024px block, so
below that they fell back to the global h1,h2,h3 rule and rendered #15140f
on #0C0B06: a contrast ratio of 1.06, which is black on black. KONTAKT,
SIDER and SELSKAB were simply not there on any phone. Desktop screenshots
could never show it, because desktop is the one place it was styled. */
footer h3{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.06em;
margin-bottom:14px; font-family:'Inter',sans-serif; font-weight:700;}
/* One hairline in the whole footer.
There were three: under the columns, over the SEO paragraph and over the
copyright. Stacked in 200px that reads as ruled paper, and two of them
bracketed a single small paragraph, dividing fine print from fine print.
The rule that earns its place is the one separating the navigable footer
from the legal tail. The rest is spacing. */
.footer-seo{margin-top:32px;}
/* #6B6656 measured 3.30:1 on --dark. This is 12.5px body copy, so it needs
4.5, and #847E6E gives 4.68 without turning the fine print into a feature. */
.footer-seo p{font-size:12.5px; line-height:1.7; color:#847E6E; max-width:820px; margin:0;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); margin-top:32px; padding-top:20px; font-size:12px; color:#847E6E; 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('../images/footer-photo-desktop.jpg');
background-image:linear-gradient(180deg, rgba(9,8,4,.15) 0%, #0C0B06 100%), image-set(url('../images/footer-photo-desktop.webp') type('image/webp'), url('../images/footer-photo-desktop.jpg') type('image/jpeg'));}
footer{padding:64px 0 28px;}
/* Grid, not `flex + space-between`. Flex sized each column to its own text,
which put the four columns at 300 / 159 / 77 / 233px and dumped all the
slack into one 340px hole between the logo and the first link column. The
brand column gets the extra width because it carries the wordmark and the
blurb; the three link columns are equal to each other whatever they hold,
so adding a footer link can no longer reflow the whole row. */
.footer-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; align-items:start;
gap:40px; padding-bottom:0;}
/* The phone spans the brand block across its two columns. Here there are
four and it is the first of them, so the span has to come back off. The
same goes for the stacking of the short columns: with four cells in one
row there is no hole left to fill. */
.footer-top > div:first-child{grid-column:auto;}
.footer-top > div:nth-child(2),
.footer-top > div:nth-child(3),
.footer-top > div:nth-child(4){grid-column:auto; grid-row:auto;}
.footer-logo-img{height:104px;}
footer p{max-width:34ch;}
footer h3{margin-bottom:16px;}
/* 2.1 was set as a line-height, so it padded every link to 28px tall and
stretched a four-item column to 130px of mostly air. The gap on .flinks
does the spacing now, which is the same rhythm without the dead space.
The 44px touch minimum is dropped here: this breakpoint is a mouse. */
footer a, footer .flinks span{line-height:1.5; min-height:0; display:block;}
footer .flinks{gap:11px;}
.footer-bottom{flex-direction:row; justify-content:space-between; flex-wrap:wrap;
gap:16px; margin-top:32px; padding-top:18px;}
}
/* =========================================================
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
========================================================= */
/* --bg-alt rather than --bg, because the section below it is the form section
and that is cream too. Two neighbouring cream sections is the one thing the
SECTION RHYTHM block above says the page does not do, and it is what Mads
saw: the quote "falder i et med formularen". The hairline is only on the
bottom edge. Above is the dark testimonial band, where a change of tone is
already absolute and a light line would just sit on it. */
.owner-quote{background:var(--bg-alt); border-bottom:1px solid var(--line); 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;}
/* On the pale gold panel, so the darker of the two golds. */
.vs-solution .vs-label{color:var(--gold-on-soft);}
.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;}
/* The bottom bar is absolutely positioned over the step, so the step has to
reserve room under itself or its last question sits behind the bar with no
way to scroll it clear. 130px was measured against the bar as it usually
looks, and the bar is not one height: the error banner adds about 54px, the
Tilbage button another 40, the upload line another 20. Miss by any of those
and the last control on the step is unreachable, which is exactly what Mads
hit -- the warning about Registreringsattest and Gæld covered the Gæld
buttons he was being asked to use. form.js measures the bar and keeps
--fw-bar-space in step with it; 130px stays as the value before the script
runs and if it never does. */
.fw-main{padding:28px 20px var(--fw-bar-space,130px); max-width:640px; margin:0 auto;}
@media(min-width:768px){ .fw-main{padding:40px 40px var(--fw-bar-space,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. */
/* These are the focus targets on every step change, so they take focus
programmatically and should not draw a ring for it. */
.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:14px;}
.fw-errbanner.show{display:block;}
/* The bar is normally a fade, so the step scrolls away under it. A message
makes it about 45px taller than the space the step reserves underneath
itself, which pushed its top edge up into the content -- and the top of a
fade is transparent, so the question showed through behind the error. Solid
from edge to edge while there is something to say, with the fade moved out to
a soft edge above it. */
.fw-bottombar:has(.fw-errbanner.show){background:var(--surface); box-shadow:0 -16px 20px 8px var(--surface);}
.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);}
/* The labelled way back, under the primary button. Quiet enough that it does
not compete with Næste, present enough to be found. */
.fw-btn-back{display:none; margin:10px auto 0; background:none; border:none; border-radius:999px; padding:9px 18px; font-size:15px; font-weight:600; color:var(--ink-soft); cursor:pointer;}
.fw-btn-back.show{display:block;}
.fw-btn-back:hover{color:var(--ink); background:var(--bg);}
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;}
/* The -3px above is right for a note under a label, which is part of the label.
Under a field it is wrong: fields carry 4px below them, so the note landed 1px
off the box and read as something attached to the input rather than a remark
about it. Worse, the 14px under it was then larger than the 1px over it, so it
grouped downwards, towards the next question it has nothing to do with. Nine
over, matching the label-to-field gap, and clear air under. */
.fw-main input + .fw-note,
.fw-main textarea + .fw-note,
.fw-price-input + .fw-note{margin-top:5px; margin-bottom:22px;}
/* A label directly under a field starts a new question and needs to look like
it. It was sitting 4px below the previous input.
.fw-helper is in this list because of a trap: the "can't remember the model?"
panel sits between the model field and the Årgang label and is switched off
and on, and CSS counts a display:none element as the adjacent sibling either
way. So "input + label" silently stopped matching the moment that panel
existed in the markup, whether or not it was on screen. Both orders are
spaced here, and the gap moves onto the label so it survives the panel
disappearing. */
.fw-main input + label.fw-l,
.fw-main textarea + label.fw-l,
.fw-main .fw-helper + label.fw-l{margin-top:18px;}
.fw-main input + .fw-helper{margin-top:10px;}
.fw-main .fw-helper:has(+ label.fw-l){margin-bottom:0;}
/* Both of these land under the last inspection row: the "you did not pick any
equipment" line, which was overlapping it by 3px, and the free-text question
that closes the step, which was 8px under it. */
.fw-insp-row + .fw-note{margin-top:14px;}
.fw-insp-row + label.fw-l{margin-top:18px;}
.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);}
/* These appear in reaction to an answer, so they sit under the control that
triggered them. The -4px this used to have put them 2px off the price field
and the choice list, and actually overlapping the follow-up block, which made
a coloured panel look like part of the control rather than a reply to it.
Nothing above a warning ever wanted pulling up. */
.fw-warn{border-radius:11px;padding:13px 15px;font-size:13.5px;margin:10px 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-on-soft);background:var(--gold-soft);}
/* --good-line is a border colour and works as one. Filled with white text on
it, it measured 3.77:1, and as the caption under a completed sub-step it
measured the same against the page. --good-ink is the same green four
steps darker and is what these two use. */
.fw-step-item.step-done .fw-step-circle{border-color:var(--good-ink);background:var(--good-ink);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-ink);}
.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 h3{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);}
/* auto-fill rather than a fixed four, so the thumbnails stay a usable size
instead of shrinking to four tiny squares on a 320px phone and stretching to
four large ones on a desktop. */
.fw-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px;margin-bottom:16px;border-radius:12px;transition:box-shadow .15s ease;}
@media(min-width:600px){.fw-photo-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));}}
.fw-photo-grid.is-dropping{box-shadow:0 0 0 2px var(--gold);}
.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;}
/* 24px was the visible circle and also the whole tap target, on a thumbnail
small enough that missing it hits the photo instead. The button is 34px on
touch, which is close enough to the 44px guidance for a control that is not
destructive, and the padding keeps it off the corner. */
.fw-photo-remove{position:absolute;top:3px;right:3px;width:28px;height:28px;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;
-webkit-tap-highlight-color:transparent;}
.fw-photo-remove:hover{background:rgba(9,8,4,.92);}
.fw-photo-remove:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media(hover:none){.fw-photo-remove{width:34px;height:34px;font-size:20px;background:rgba(9,8,4,.82);}}
.fw-photo-pick{width:100%;text-align:center;}
.fw-photo-msg{margin-top:10px;display:none;}
.fw-photo-msg.show{display:block;}
/* Dragging needs a pointer that can drag. On a phone this sentence is just a
thing that is not true. */
.fw-photo-draghint{display:none;}
@media(hover:hover) and (pointer:fine){.fw-photo-draghint{display:inline;}}
/* The upload bar under the send button. Height stays reserved by nothing:
it is display:none until there is progress, so it cannot shift the button
on the steps where no upload is happening. */
.fw-send-progress{display:none;margin-top:10px;height:4px;border-radius:2px;background:rgba(9,8,4,.12);overflow:hidden;}
.fw-send-progress.show{display:block;}
.fw-send-progress-bar{width:0;height:100%;background:var(--gold);transition:width .2s ease;}
.fw-success-note{display:none;margin-top:14px;font-size:14px;color:var(--ink-soft);}
.fw-success-note.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;}
/* The honeypot, and the only thing on the form that wants display:none: it has
to be invisible to Chrome's autofill, not just to people. See wizard.php. */
.fw-hp{display:none;}
.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;}
/* The warnings in Mads' own guide. They are the sentences that cost money if
they are missed, so they are pulled out of the run of paragraphs rather than
left to read like the rest. A and not a
: post_content goes through
wpautop, which would wrap the inside of a div in a paragraph of its own.
Written as p.guide-warn because .guide-block p above is the more specific
selector and would otherwise keep the colour. */
.guide-block p.guide-warn{border-left:3px solid var(--gold-dim); background:var(--gold-soft); border-radius:0 8px 8px 0; padding:14px 16px; margin:0 0 16px; color:var(--ink); font-size:15px; line-height:1.65;}
.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;}
}
/* =========================================================
CONSENT BANNER
Complianz renders its own markup and its own palette. The accept button
ships as #fff on #4EBE1E, which measures 2.41:1 and fails at any size, and
it is the single most-clicked control on the site. Darkened to #2F7A12,
which measures 5.14:1 against white and still reads as the green "yes".
Scoped to the button only, so the rest of the banner keeps whatever
Complianz is configured to show.
========================================================= */
.cmplz-btn.cmplz-accept{background-color:#2F7A12 !important; border-color:#2F7A12 !important; color:#fff !important;}
.cmplz-btn.cmplz-accept:hover{background-color:#276810 !important; border-color:#276810 !important;}