/*
 * Firmamassage-bysider — sidens egen finpuds.
 *
 * Alt der kan komme fra designsystemet, behandling.css eller by.css KOMMER
 * derfra. Her står kun det de tre filer ikke dækker, fordi det kun findes på
 * denne sidetype. Alt er scopet til .zfirmaby, så intet kan brede sig.
 *
 * ⚠️ Ingen hardcodede brandfarver — kun var(--color-*) / var(--font-*).
 * (#fff og rgba-hvid er tilladt; designsystemet bruger dem selv.)
 * Breakpoints følger sitets skala: 480 / 600 / 768 / 900 / 1024 / 1200.
 */

/* ── Sektionsrytme ───────────────────────────────────────────────────────────
   Samme trin som bysiden og firmasiderne: 2,5rem fra overskriftsblokken ned
   til indholdet på desktop, 1,1rem under 768px (spejler .zb-grid__sub's egen
   margin-top, så luften over og under brødteksten er ens). Wrapperens første
   og sidste barn nulstilles, fordi .z-benefit-grid, ol.z-steps og .z-checklist
   hver bærer sin egen margin — uden nulstillingen bliver trinnet tre
   forskellige tal (målt 30/26/29px på firmasiden 27-08-2026). */
.zfirmaby .zb-grid__sub + .zency-article,
.zfirmaby .z-section-h2 + .zency-article{margin-top:2.5rem}
.zfirmaby .zency-article > :first-child{margin-top:0}
.zfirmaby .zency-article > :last-child{margin-bottom:0}
@media (max-width:767px){
.zfirmaby .zb-grid__sub + .zency-article,
.zfirmaby .z-section-h2 + .zency-article{margin-top:1.1rem}
}

/* Heroens eyebrow findes ikke på bysiderne, så den har ingen luft ned til
   overskriften. 0,75rem ligger på sitets egen skala. */
.zfirmaby .zb-hero__inner .z-eyebrow{margin-bottom:.75rem}

/* ── Skiftevis flade ─────────────────────────────────────────────────────────
   .zb-grid er sage-50 (#f3f6f5). Første udgave satte båndet til #f6f8f5 — tre
   RGB-trin fra sage-50, altså usynligt, så seks sektioner i træk stod som ét
   3.600px langt felt. Hvid er den flade .zby-nearby allerede bruger længere
   nede på siden, så alternationen genbruger sidens egen rytme frem for at
   indføre en ny tone. */
.zfirmaby .zfirmaby-band{background:#fff}

/* ── Anker-landinger ─────────────────────────────────────────────────────────
   Headeren er klæbende: 122px på computer, 116px på mobil (målt 01-08-2026,
   samme højde pinnet som ikke). Uden scroll-margin lander #tilbud og #faq bag
   den. Værdierne er dem header-CTA'ens egen klik-handler bruger: mobil måler
   på INDHOLDET (den tomme 64px-padding glider op bag headeren, så panelet
   lander 20px under den), computer har plads til at sektionskanten må ses.
   Se memo header-cta-logik: scroll-margin dækker ALLE veje til ankeret, JS
   kun den ene. */
.zfirmaby #tilbud,
.zfirmaby #faq{scroll-margin-top:146px}
@media (max-width:767px){
.zfirmaby #tilbud,
.zfirmaby #faq{scroll-margin-top:72px}
}

/* Kortene i de to grids skal være lige høje uanset tekstlængde. */
.zfirmaby .z-benefit-card{display:flex;flex-direction:column}
.zfirmaby .z-benefit-card p{flex:1 1 auto;margin-bottom:0}

/* "Regn prisen ud" / "Se alt om firmamassage": en enkelt sekundær knap efter
   et grid. Sage = sekundær handling på lys flade (oliven er reserveret den
   primære CTA). Luft opad, så den ikke klistrer på sidste kort. */
.zfirmaby .zfirmaby-mere{margin:2rem 0 0}
.zfirmaby .zfirmaby-mere--center{text-align:center}

/* ── Kundelogoer ───────────────────────────────────────────────
   Selve baandet er HUBBENS (.marquee / .logo-mark, kopieret i
   firmaby-sektioner.css). Herunder staar kun placeringen og labelen.

   Baandet ligger hoejt paa siden, lige under trust-strippen - ikke ved
   formularen, hvor det laa til 30-08-2026 (maalt 4.239px nede = 56 % af
   siden). Logoer er en TROVAERDIGHEDSPORT og skal ses foerst; ved
   formularen staar Rasmus-citatet og de tre loefter, som er den rigtige
   slags tryghed lige foer man taster sit nummer ind.

   Cremefarven er bevidst: trust-strippen OVER er hvid og byteksten UNDER
   er sage-50, saa et hvidt eller sage baand ville smelte sammen med sin
   nabo. Creme er sidens tredje tone (FAQ og garanti bruger den) og er
   samtidig den farve hubben selv giver sit trustband. */
.zfirmaby .zfirmaby-kunder{
	background:var(--color-cream);
	padding:clamp(1.9rem,1.5rem + 1.4vw,2.9rem) 0;
}
.zfirmaby .zfirmaby-kunder__label{
	font-family:var(--font-dosis);font-weight:700;font-size:.75rem;
	letter-spacing:.14em;text-transform:uppercase;color:var(--color-sage-500);
	margin:0 0 1.2rem;text-align:center;
}
/* Designsystemets prose-lift tegner en sage-prik som ::before paa hvert li i
   .zency-article. Loefte-listen har sine egne ikoner og skal ikke have den. */
.zency-article .zfirmaby-loefter li::before{content:none;display:none}

/* ── Konverteringspanelet ────────────────────────────────────────────────────
   .z-cta-band leverer normalt --grad-panel-dark. Her tvinges den til flad
   forest, fordi panelet er TEKST-TUNGT (overskrift + brødtekst + tre labels +
   citat + tre løfter + fin skrift): brandreglen siger flad forest til netop
   det, og tallene giver den ret — hvidt på gradientens lyse stop (#5b746f)
   måler 5,03:1, hvidt på forest 14,13:1. Samtidig bliver panelet sidens ENE
   mørke flade, altså dens visuelle fokuspunkt. */
/* Specificiteten skal op: designsystemets .zency-article .z-cta-band har
   samme vægt (0,2,0) og loader efter denne fil i LiteSpeeds samlede CSS, saa
   en to-klasse-selektor taber paa kilderækkefølge. Målt live 28-08-2026. */
.zfirmaby-tilbud .zency-article .z-cta-band{background:var(--color-forest)}
/* Tilbudssektionen selv er hvid, saa alternationen sage-50 <-> hvid holder
   hele vejen ned, og det mørke panel staar rent paa hvid. */
.zfirmaby .zfirmaby-tilbud{background:#fff}

/* ── Lead-formularen ─────────────────────────────────────────────────────────
   .z-cta-band leverer baggrund, overskrift og knap; her ligger kun felterne.
   Tre felter side om side på desktop, stablet under 768px. */
.zency-article .zfirmaby-form{margin:1.6rem 0 0;text-align:left}
.zency-article .zfirmaby-form__felter{display:grid;gap:.85rem;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:767px){
.zency-article .zfirmaby-form__felter{grid-template-columns:minmax(0,1fr)}
}
.zency-article .zfirmaby-form__felt{display:flex;flex-direction:column;gap:.3rem}
/* ⚠️ Uden font-family arver felterne Hello-temaets systemfont (-apple-system)
   i stedet for Source Sans — målt live 28-08-2026. Brand-fonts er ufravigelige. */
.zency-article .zfirmaby-form__felt label{
	font-family:var(--font-source);font-size:.86rem;font-weight:600;
	color:var(--color-mint-soft);letter-spacing:.2px;
}
.zency-article .zfirmaby-form__felt input{
	width:100%;padding:.85rem 1rem;border:1.5px solid transparent;border-radius:.65rem;
	background:#fff;color:var(--color-ink);
	font-family:var(--font-source);font-size:1rem;line-height:1.4;
}
/* 16px minimum: under det zoomer iOS Safari ind på fokus og skubber layoutet. */
.zfirmaby-form__felt input::placeholder{color:var(--color-ink-soft);opacity:.7}
.zfirmaby-form__felt input:focus{
	outline:none;border-color:var(--color-mint);
	box-shadow:0 0 0 3px rgba(178,221,195,.55);
}
.zfirmaby-form__felt input[aria-invalid="true"]{border-color:var(--color-terracotta)}
.zfirmaby-form .z-cta-band__btn{
	margin-top:1.2rem;border:0;cursor:pointer;
	font-family:var(--font-dosis);font-size:1.05rem;
}
.zfirmaby-form .z-cta-band__btn:focus-visible{
	outline:2px solid var(--color-mint);outline-offset:3px;
}
.zfirmaby-form .z-cta-band__btn[disabled]{opacity:.6;cursor:default}

/* Svarlinjen efter indsendelse. Mint = kvittering, terracotta-lys = fejl —
   begge målt over 4,5:1 på forest. */
.zfirmaby-form .zform__svar{margin:.9rem 0 0;font-family:var(--font-source);font-size:.95rem}
.zfirmaby-form .zform__svar--ok{color:var(--color-mint)}
.zfirmaby-form .zform__svar--fejl{color:var(--color-gold-soft)}

/* ── Løfter under knappen (LIFT: Anxiety) ────────────────────────────────────
   De tre ting en indkøber er utryg ved lige før hun taster sit nummer ind:
   hvornår ringer I, binder jeg mig, og hvad sker der med mine oplysninger. */
.zency-article .zfirmaby-loefter{
	display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;justify-content:flex-start;
	margin:1.3rem 0 0;padding:0;list-style:none;
	font-family:var(--font-source);font-size:.88rem;color:var(--color-mint-soft);
}
/* Farven SKAL staa paa li'et, ikke kun paa ul'et: designsystemets
   .zency-article li vinder over en nedarvet farve, og maalingen 28-08-2026
   gav ink-soft paa forest = 1,64:1. Nu 11,4:1. */
.zency-article .zfirmaby-loefter li{display:flex;align-items:center;gap:.45rem;color:var(--color-mint-soft)}
.zency-article .zfirmaby-loefter svg{width:1rem;height:1rem;flex:none;color:var(--color-mint)}

/* Citatet lige over formularen. Named social proof på konverteringspunktet —
   Merriweather-citationstegnet er Zencys egen serif-accent. */
.zency-article .zfirmaby-citat{
	margin:0 0 1.6rem;padding:0 0 0 1.1rem;
	border-left:2px solid var(--color-sage-400);
}
.zency-article .zfirmaby-citat blockquote{
	margin:0;font-family:var(--font-merriweather);font-weight:300;
	font-size:1.02rem;line-height:1.5;color:#fff;text-wrap:pretty;
}
.zency-article .zfirmaby-citat figcaption{
	margin:.5rem 0 0;font-family:var(--font-source);font-size:.85rem;
	color:var(--color-mint-soft);
}
.zency-article .zfirmaby-citat figcaption b{font-weight:600;color:#fff}

.zency-article .zfirmaby-form__fine{
	margin:1.2rem 0 0;font-family:var(--font-source);font-size:.9rem;
	color:var(--color-mint-soft);
}
.zency-article .zfirmaby-form__fine a{color:#fff;text-decoration:underline}
.zency-article .zfirmaby-form__fine a:hover{color:var(--color-mint)}

/* ── Tre elementer brækker ALDRIG 2+1 ────────────────────────────────────────
   Morten 29-08-2026: "to ved siden af hinanden og ét der står alene harmonerer
   bare ikke". Hubben har allerede svaret — .models2__grid springer bevidst
   2-kolonne-trinnet over og går 1 -> 3 ved 820px. De to andre tre-element-grids
   på siden gjorde ikke: .hvor__valg gik 1 -> 2 (768) -> 3 (940), og bysidens
   .zby-nearby__grid 1 -> 2 (620) -> 3 (1000). Begge vinduer viste 2+1.
   Nu følger alle tre den samme trappe.

   ⚠️ Selektoren gentager .fm-rod fem gange med vilje: hubbens egen regel i
   firmaby-sektioner.css har den specificitet (0,6,0), og den fil er en ordret
   kopi der ikke må redigeres. Overstyringen skal derfor veje tungere (0,7,0). */
.zfirmaby .fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .hvor__valg{grid-template-columns:1fr}
.zfirmaby .zby-nearby__grid{grid-template-columns:1fr}
@media (min-width:820px){
.zfirmaby .fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .hvor__valg{grid-template-columns:repeat(3,1fr)}
.zfirmaby .zby-nearby__grid{grid-template-columns:repeat(3,1fr)}
}

/* Nabo-kortene bærer et dækningstal i stedet for en afstand, så etiketten
   skal kunne rumme to ord uden at brække. */
.zfirmaby .zby-loc__km{white-space:nowrap}

/* Mobil: centreret brødtekst mister effekten på smal skærm. Nabo-sektionens
   overskrift venstrestilles — og stregen skal følge med, ellers sidder den
   midt under venstrestillet tekst. */
@media (max-width:600px){
.zfirmaby .zby-nearby .z-section-h2--center{text-align:left}
.zfirmaby .zby-nearby .z-section-h2--center::after{left:0;transform:none}
.zency-article .zency-article .zfirmaby-kunder{text-align:left}
.zency-article .zency-article .zfirmaby-kunder__row{justify-content:flex-start}
.zency-article .zency-article .zfirmaby-loefter{gap:.5rem 1rem}
}

/* ---------------------------------------------------------------------------
   Hubbens sektions-rytme maa ikke folge med ind i bysidens sektioner.

   .models2 og .sted-sektion er FULDE sektioner paa hubben og baerer derfor
   --afsnit (7-8,9rem) som lodret padding plus en cremefarvet bund. Herinde
   ligger de inde i vores egen <section>, der allerede giver 64px luft,
   overskrift og underrubrik. Resultatet var 133px dodt beige mellem
   underrubrikken og betalingskortene (66px over stedkortene), og cremefarven
   braekkede sektionernes sage/hvid-alternation med en indrykket kasse, der
   ikke flugtede med noget.

   Nulstillingen FANDTES i firmaby-sektioner.css, men med specificitet 0,3,0
   mod den kopierede regels 0,6,0 - den har aldrig virket. Den staar nu her, i
   vores egen fil, saa den overlever en genskabelse af kopien, og med .fm-rod
   gentaget fem gange (0,7,0) saa den faktisk vinder. Samme teknik som
   grid-overstyringen ovenfor.
   --------------------------------------------------------------------------- */
.zfirmaby .fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .models2,
.zfirmaby .fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted-sektion{
  padding-top:0; padding-bottom:0; background:transparent}

/* Kortene skal stadig have luft ned fra underrubrikken. Husets rytme for et
   kortgitter efter en overskrift er ~1,8-2,5rem (.zby-nearby__grid 1,8rem,
   .z-callout 1,9rem, .zb-faq__list 2,5rem). Hubbens egen margin-top paa
   .hvor__valg nulstilles af den kopierede regel, saa begge gitre saettes her
   og faar praecis samme vaerdi - de to sektioner skal se ens ud. */
.zfirmaby .fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .models2__grid,
.zfirmaby .fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .sted-sektion .hvor__valg{margin-top:2rem}

/* ── Prisberegneren ──────────────────────────────────────────────
   Selve beregneren er HUBBENS (markup, CSS og JS kopieret 1:1 - se
   firmaby-sektioner.css og assets/firmaby-beregner.js). Herunder staar kun
   det, bysidens kontekst kraever.

   1) Hubbens sektions-rytme foelger med i den kopierede regel:
      padding-block:var(--afsnit) = 133px top og bund. Paa hubben er det
      rigtigt, for HELE hubben koerer den rytme. Bysiden koerer 64px, saa
      beregneren ville staa 2x saa luftig som sine naboer. Samme faelde som
      .models2 og .sted-sektion - og igen skal nulstillingen SLAA kopien:
      hubbens regel er 0,6,0, denne er 0,7,0.
   2) #calc-h fandtes kun paa hubben foer, saa scroll-margin blev injiceret
      der. Nu findes ankeret ogsaa her og skal fri af den klaebende header -
      samme vaerdier som #tilbud og #faq. */
.zfirmaby .fm-rod.fm-rod.fm-rod.fm-rod.fm-rod .calc{padding-block:clamp(3rem,2.5rem + 1.6vw,4rem)}
.zfirmaby #calc-h{scroll-margin-top:146px}
@media (max-width:900px){.zfirmaby #calc-h{scroll-margin-top:72px}}

/* ── Anmeldelser ──────────────────────────────────────────────────
   Selve slideren er husets eget modul (<zency-reviews>, shadow DOM - den
   kan IKKE styles herfra, al CSS bor i pluginnets widget.js).
   Herunder staar kun sektionens ramme.
   Creme, fordi naboen over (daekning) er hvid og naboen under (hvor massagen
   foregaar) er sage-50 - et hvidt eller sage baand ville smelte sammen. */
.zfirmaby .zfirmaby-anmeldelser{background:var(--color-cream)}
.zfirmaby .zfirmaby-anmeldelser zency-reviews{display:block;margin-top:2rem}