/* ============================================================
   RiberGruppen ApS - fælles stylesheet
   Palette: udelukkende sort, hvid og gråtoner.
   Alle fotos gengives sort/hvid via .photo img { filter: grayscale }
   ============================================================ */
:root{
  --blue:#1268E3;
  --blue-dark:#0B51B8;
  --black:#000000;
  --ink:#111111;
  --ink-2:#3d3d3d;
  --ink-3:#6b6b6b;
  --line:#e0e0e0;
  --line-strong:#111111;
  --grey-1:#f4f4f4;
  --grey-2:#e8e8e8;
  --white:#ffffff;
  --sans:system-ui,-apple-system,"Segoe UI","Helvetica Neue",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --wrap:1200px;
  --gut:28px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  text-wrap:pretty;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
img{filter:grayscale(100%) contrast(106%)}
.photo img{filter:grayscale(100%) contrast(106%)}
a{color:var(--black);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.06;letter-spacing:-.015em;margin:0;color:var(--black)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 22px}
.eyebrow--onblack{color:rgba(255,255,255,.6)}
.lede{font-size:19px;color:var(--ink-2)}

/* ---------------- knapper ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:15px 30px;border:0;border-radius:0;cursor:pointer;
  font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:.01em;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.btn:hover{text-decoration:none}
.btn--solid{background:var(--blue);color:var(--white)}
.btn--solid:hover{background:var(--blue-dark)}
.btn--outline{background:transparent;color:var(--black);box-shadow:inset 0 0 0 1.5px var(--black)}
.btn--outline:hover{background:var(--black);color:var(--white)}
.btn--invert{background:var(--blue);color:var(--white)}
.btn--invert:hover{background:var(--blue-dark)}
.btn--onblack{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn--onblack:hover{background:rgba(255,255,255,.14)}
.btn--sm{min-height:46px;padding:12px 22px;font-size:15px}
.header-cta .btn--solid,.lp-header .btn--solid{background:var(--black);color:var(--white)}
.header-cta .btn--solid:hover,.lp-header .btn--solid:hover{background:var(--ink-2)}

/* ---------------- topbar ---------------- */
.topbar{background:var(--black);color:rgba(255,255,255,.75);font-size:13.5px}
.topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 32px;min-height:44px}
.topbar ul{display:flex;flex-wrap:wrap;gap:6px 28px}
.topbar li{display:flex;align-items:center;gap:9px}
.tick-sm{width:5px;height:5px;background:var(--white);flex:0 0 auto}

/* ---------------- header (fast/sticky) ---------------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line)}
.site-header .wrap.header-top{display:flex;align-items:center;gap:24px;min-height:84px;padding-top:10px;padding-bottom:10px}
.header-nav{border-top:1px solid var(--line);background:var(--white)}
.header-nav .wrap{display:flex;align-items:center;min-height:56px}
.logo{display:flex;flex-direction:column;line-height:1.1;flex:0 0 auto}
.logo__name{font-family:var(--serif);font-size:25px;font-weight:600;letter-spacing:-.02em;color:var(--black)}
.logo__sub{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.nav{display:flex;align-items:center;gap:36px;flex-wrap:wrap;width:100%}
.nav a{font-size:15px;font-weight:600;white-space:nowrap;padding:6px 0}
.nav a:hover{text-decoration:none;box-shadow:inset 0 -2px 0 var(--black)}
.nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--black)}
.header-cta{display:flex;align-items:center;gap:20px;flex:0 0 auto;margin-left:auto}
.phone{display:flex;flex-direction:column;line-height:1.15}
.phone span{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.phone strong{font-family:var(--serif);font-size:22px;font-weight:600}
.phone:hover{text-decoration:none}
.phone:hover strong{box-shadow:inset 0 -2px 0 var(--black)}
.burger{display:none;margin-left:auto;width:48px;height:48px;padding:0;background:none;border:0;cursor:pointer;place-items:center}
.burger i{display:block;width:24px;height:1.5px;background:var(--black);position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:24px;height:1.5px;background:var(--black)}
.burger i::before{top:-7px}.burger i::after{top:7px}
.mobile-nav{display:none;background:var(--white);border-top:1px solid var(--line)}
.mobile-nav[data-open=true]{display:block}
.mobile-nav ul{padding:6px var(--gut) 22px}
.mobile-nav a{display:block;padding:15px 0;font-weight:600;border-bottom:1px solid var(--line)}
.mobile-nav .btn{margin-top:18px;width:100%}

/* ---------------- placeholder-bokse ---------------- */
.ph{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;
  background:var(--grey-1);border:1px solid var(--line);
  padding:26px;text-align:center;color:var(--ink-2);font-size:14.5px;line-height:1.5;
}
.ph b{display:block;font-size:15.5px;font-weight:700;color:var(--black)}
.ph code{background:var(--black);color:var(--white);padding:5px 11px;font-size:12.5px;letter-spacing:.06em}
.ph--onblack{background:#1c1c1c;border-color:#3a3a3a;color:rgba(255,255,255,.72)}
.ph--onblack b{color:var(--white)}
.ph--onblack code{background:var(--white);color:var(--black)}

/* ---------------- hero (forside) ---------------- */
.hero{padding:100px 0 92px}
.hero .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:72px;align-items:center}
.hero h1{font-size:clamp(42px,6vw,80px);margin-bottom:26px}
.hero h1 span{display:block}
.hero p{font-size:20px;color:var(--ink-2);max-width:48ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero__facts{display:flex;flex-wrap:wrap;gap:20px 56px;margin-top:52px;padding-top:30px;border-top:1px solid var(--line)}
.hero__facts div{display:flex;flex-direction:column}
.hero__facts strong{font-family:var(--serif);font-size:30px;font-weight:600}
.hero__facts span{font-size:13.5px;color:var(--ink-3)}
/* hero med baggrundsbillede */
.hero--bg{position:relative;isolation:isolate;overflow:hidden;background:var(--black);padding:168px 0 156px}
.hero--bg .wrap{display:block;position:relative}
.hero__bg{position:absolute;inset:0;z-index:-2;background:var(--black) center/cover no-repeat;filter:grayscale(100%) contrast(106%)}
.hero__bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.hero--bg h1{color:var(--white);max-width:28ch;margin-bottom:26px}
.hero--bg .hero__claim{color:var(--white);font-family:var(--serif);font-size:clamp(24px,2.8vw,36px);line-height:1.2;max-width:34ch;margin:0 0 20px}
.hero--bg .hero__sub{color:rgba(255,255,255,.82);font-size:19px;max-width:56ch;margin-top:0}
.service .btn--invert{background:var(--white);color:var(--black);box-shadow:none}
.service .btn--invert:hover{background:var(--grey-2)}
.btn--onphoto{background:var(--white);color:var(--black)}
.btn--onphoto:hover{background:var(--grey-2)}
.btn--onphoto-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--white)}
.btn--onphoto-ghost:hover{background:rgba(255,255,255,.14)}
.herofacts{padding:56px 0 72px;background:var(--white)}
.herofacts .hero__facts{margin-top:0}
@media (max-width:980px){
  .hero--bg{padding:104px 0 96px}
}

/* ---------------- sidehoved (undersider) ---------------- */
.page-hero{padding:88px 0 76px;border-bottom:1px solid var(--line)}
.page-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.page-hero h1{font-size:clamp(38px,5.2vw,68px);margin-bottom:22px}
.page-hero p{font-size:19px;color:var(--ink-2);max-width:50ch}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.crumbs{font-size:13px;letter-spacing:.06em;color:var(--ink-3);margin-bottom:22px}
.crumbs a{color:var(--ink-3)}

/* ---------------- sektioner ---------------- */
section{padding:100px 0}
.alt{background:var(--grey-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.black{background:var(--black);color:rgba(255,255,255,.8)}
.black h2,.black h3{color:var(--white)}
.black .lede{color:rgba(255,255,255,.8)}
.section-head{max-width:64ch;margin-bottom:56px}
.section-head h2{font-size:clamp(32px,4.2vw,54px);margin-bottom:18px}

/* ---------------- fire ydelseskort ---------------- */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line-strong)}
.service{
  display:flex;flex-direction:column;gap:18px;padding:38px 32px 34px;
  border-right:1px solid var(--line-strong);background:var(--white);
}
.services .service:last-child{border-right:0}
.service--dark{background:var(--black);color:rgba(255,255,255,.78);border-right-color:var(--black)}
.service--dark h3{color:var(--white)}
.service__no{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.service--dark .service__no{color:rgba(255,255,255,.55)}
.service h3{font-size:27px}
.service p{font-size:16px}
.service .btn{margin-top:auto;align-self:flex-start}

/* ---------------- to kolonner / kort ---------------- */
.two{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.grid-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-cards--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.grid-cards--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.grid-cards,.grid-cards--3{grid-template-columns:1fr}}
.card{background:var(--white);border:1px solid var(--line-strong);display:flex;flex-direction:column}
.card__photo{border-bottom:1px solid var(--line-strong)}
.card__photo img{width:100%;height:280px;object-fit:cover}
.card__body{padding:38px;display:flex;flex-direction:column;gap:22px;flex:1}
.card h3{font-size:30px}
.card__label{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.card p{color:var(--ink-2)}
.card ul{display:grid;gap:13px}
.card li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;color:var(--ink-2);font-size:16px}
.card li b{font-family:var(--serif);font-size:15px;color:var(--black);padding-top:1px}
.card .btn{margin-top:auto;align-self:flex-start}

/* ---------------- talsektion ---------------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.25)}
.stat{padding:44px 40px 0 0;border-right:1px solid rgba(255,255,255,.25);display:flex;flex-direction:column;gap:14px}
.stats .stat:last-child{border-right:0;padding-right:0}
.stats .stat:not(:first-child){padding-left:40px}
.stat strong{font-family:var(--serif);font-size:clamp(44px,5.6vw,76px);line-height:.94;font-weight:600;color:var(--white);letter-spacing:-.02em}
.stat span{font-size:16.5px;color:rgba(255,255,255,.7);max-width:26ch}

/* ---------------- tre trin ---------------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--black)}
.step{padding:34px 40px 8px 0;display:flex;flex-direction:column;gap:16px;border-right:1px solid var(--line)}
.steps .step:last-child{border-right:0;padding-right:0}
.steps .step:not(:first-child){padding-left:40px}
.step__no{font-family:var(--serif);font-size:56px;line-height:.9;font-weight:600}
.step h3{font-size:24px}
.step p{color:var(--ink-2);font-size:16px}

/* ---------------- case ---------------- */
.case .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.case h2{font-size:clamp(30px,3.8vw,46px);margin-bottom:22px}
.case p+p{margin-top:14px}
.result{margin-top:36px;padding:28px 32px;background:var(--white);color:var(--black);display:flex;flex-direction:column;gap:6px}
.result span{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.result strong{font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);font-weight:600;line-height:1.05}
.case blockquote{margin:34px 0 0;padding-left:24px;border-left:2px solid rgba(255,255,255,.6);font-family:var(--serif);font-size:21px;line-height:1.45;color:var(--white)}
.case cite{display:block;margin-top:14px;font:600 14px/1.4 var(--sans);font-style:normal;color:rgba(255,255,255,.55)}

/* ---------------- før/efter-slider ---------------- */
.ba{position:relative;overflow:hidden;background:#1c1c1c;--split:100%}
.ba__pane{display:grid}
.ba__pane>*{grid-area:1/1}
.ba__after{clip-path:inset(0 0 0 var(--split,100%))}
.ba__img{width:100%;height:520px;object-fit:cover}
@media (max-width:700px){.ba__img{height:340px}}
.ba__tag{
  position:absolute;top:16px;padding:6px 12px;background:var(--white);color:var(--black);
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;z-index:3;pointer-events:none;
}
.ba__tag--l{left:16px}.ba__tag--r{right:16px}
.ba__line{position:absolute;top:0;bottom:0;left:var(--split,100%);width:2px;background:var(--white);z-index:2;pointer-events:none}
.ba__note{display:block;margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.55)}
.ba input[type=range]{
  position:absolute;left:0;right:0;bottom:18px;width:calc(100% - 32px);margin:0 16px;z-index:4;
  -webkit-appearance:none;appearance:none;accent-color:#000;background:transparent;height:34px;cursor:ew-resize;
}
.ba input[type=range]::-webkit-slider-runnable-track{height:2px;background:rgba(255,255,255,.55)}
.ba input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-14px;border-radius:50%;background:var(--white);border:2px solid var(--black)}
.ba input[type=range]::-moz-range-track{height:2px;background:rgba(255,255,255,.55)}
.ba input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--white);border:2px solid var(--black)}

/* ---------------- tillid / USP ---------------- */
.usps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.usp{display:flex;flex-direction:column;gap:16px}
.usp__icon{width:56px;height:56px;border:1.5px solid var(--black);display:grid;place-items:center}
.usp__icon svg{width:26px;height:26px;fill:none;stroke:var(--black);stroke-width:1.6;stroke-linecap:square}
.usp h3{font-size:22px}
.usp p{color:var(--ink-2);font-size:16px}

/* ---------------- lister på undersider ---------------- */
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 44px}
.checks li{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;color:var(--ink-2)}
.checks li b{font-family:var(--serif);font-size:15px;color:var(--black)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{font-family:var(--serif);font-size:21px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-family:var(--sans);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{margin-top:12px;color:var(--ink-2);max-width:70ch}

/* ---------------- case-liste ---------------- */
.caselist{display:grid;gap:0;border-top:1px solid var(--line-strong)}
.caseitem{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding:40px 0;border-bottom:1px solid var(--line-strong);align-items:center}
.caseitem h3{font-size:28px;margin-bottom:12px}
.caseitem p{color:var(--ink-2)}
.caseitem__result{margin-top:20px;display:inline-flex;flex-direction:column;gap:4px;background:var(--black);color:var(--white);padding:16px 22px}
.caseitem__result span{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.caseitem__result strong{font-family:var(--serif);font-size:26px;font-weight:600}

/* ---------------- kontaktformular ---------------- */
.form{display:grid;gap:18px;max-width:560px}
.field{display:grid;gap:8px}
.field label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--white);
  border:1.5px solid var(--black);border-radius:0;padding:14px 16px;width:100%;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--black);outline-offset:1px}
.form__note{font-size:13.5px;color:var(--ink-3)}

/* ---------------- cta-bånd ---------------- */
.band{padding:88px 0}
.band .wrap{display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between}
.band h2{font-size:clamp(28px,3.6vw,44px);max-width:24ch}
.band p{margin-top:12px;color:rgba(255,255,255,.7)}
.band__actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------------- footer ---------------- */
.footer{background:var(--white);padding:80px 0 0;font-size:15.5px;color:var(--ink-2);border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:44px}
.footer h3{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px}
.footer ul{display:grid;gap:11px}
.footer__contact strong{display:block;font-family:var(--serif);font-size:26px;font-weight:600}
.footer__bottom{margin-top:64px;border-top:1px solid var(--line);padding:26px 0;display:flex;flex-wrap:wrap;gap:10px 32px;justify-content:space-between;font-size:14px;color:var(--ink-3)}

/* ---------------- responsivt ---------------- */
@media (max-width:1180px){
  .nav{gap:24px}
  .nav a{font-size:14.5px}
}
@media (max-width:900px){
  .header-cta .btn{display:none}
  .burger{display:grid}
  .header-nav .wrap{min-height:50px}
  .nav{gap:26px}
  .nav a{font-size:15px}
  .nav a:nth-child(n+4){display:none}
}
@media (max-width:980px){
  .hero .wrap,.case .wrap,.page-hero .wrap,.split{grid-template-columns:1fr;gap:44px}
  .two,.usps,.checks{grid-template-columns:1fr}
  .services{grid-template-columns:repeat(2,1fr)}
  .service{border-bottom:1px solid var(--line-strong)}
  .services .service:nth-child(2n){border-right:0}
  .services .service:nth-last-child(-n+2){border-bottom:0}
  .steps,.stats{grid-template-columns:1fr;border-top:0}
  .step,.steps .step:not(:first-child){border-right:0;border-top:2px solid var(--black);padding:28px 0 32px}
  .stat,.stats .stat:not(:first-child){border-right:0;border-top:1px solid rgba(255,255,255,.25);padding:32px 0 34px}
  .caseitem{grid-template-columns:1fr;gap:28px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px}
  section{padding:76px 0}
}
@media (max-width:600px){
  :root{--gut:20px}
  .topbar{display:none}
  .logo__sub{display:none}
  .site-header .wrap.header-top{min-height:64px}
  .header-cta .phone{display:none}
  .btn{width:100%}
  .card .btn,.service .btn{width:auto}
  .hero{padding:60px 0 68px}
  .page-hero{padding:56px 0 60px}
  .services{grid-template-columns:1fr}
  .services .service{border-right:0;border-bottom:1px solid var(--line-strong)}
  .services .service:last-child{border-bottom:0}
  .card__body{padding:28px}
  .footer__grid{grid-template-columns:1fr}
}

/* ---------------- hero-undertekst ---------------- */
.hero__sub{font-size:20px;color:var(--ink-2);max-width:48ch;margin-top:22px}

/* ---------------- hook på ydelseskort ---------------- */
.service p.service__hook{font-family:var(--serif);font-size:19px;line-height:1.3;color:var(--black)}
.service--dark .service__hook{color:var(--white)}

/* ---------------- teaser under ydelseskort ---------------- */
.service__teaser{font-style:italic;font-size:15px;line-height:1.5;color:var(--ink-3)}
.service--dark .service__teaser{color:rgba(255,255,255,.6)}
.service__teaser a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.service--dark .service__teaser a{color:var(--white)}

/* ---------------- prisboks ---------------- */
.pricebox{background:var(--black);color:rgba(255,255,255,.78);padding:44px 40px;display:flex;flex-direction:column;gap:18px}
.pricebox__result{margin-top:10px;padding-top:22px;border-top:1px solid rgba(255,255,255,.25);display:flex;flex-direction:column;gap:8px}
.pricebox__result span{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.pricebox__result strong{font-family:var(--serif);font-size:clamp(44px,5.4vw,72px);line-height:.95;font-weight:600;color:var(--white);letter-spacing:-.02em}
@media (max-width:600px){.pricebox{padding:32px 26px}}

/* ---------------- StoneCarpet: anvendelseskort ---------------- */
.usecases{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-strong)}
.usecase{padding:34px 30px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.usecases .usecase:nth-child(3n){border-right:0}
.usecases .usecase:nth-last-child(-n+3){border-bottom:0}
.usecase__no{font-size:11.5px;font-weight:700;letter-spacing:.2em;color:var(--ink-3)}
.usecase h3{font-size:25px}
.usecase p{font-size:16px;color:var(--ink-2)}
.usecase p.usecase__spec{font-family:var(--serif);font-size:19px;color:var(--black)}

/* ---------------- StoneCarpet: underlag ---------------- */
.subbase{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--black)}
.subbase__col{padding:32px 40px 0 0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.subbase .subbase__col:last-child{border-right:0;padding-right:0}
.subbase .subbase__col:not(:first-child){padding-left:40px}
.subbase h3{font-size:22px}
.subbase p{color:var(--ink-2);font-size:16px}

/* ---------------- StoneCarpet: prisberegner ---------------- */
.calc{background:#1c1c1c;padding:38px 34px;display:grid;gap:18px}
.calc .field label{color:rgba(255,255,255,.6)}
.calc .field input,.calc .field select{background:var(--black);color:var(--white);border-color:rgba(255,255,255,.6)}
.calc .field input:focus,.calc .field select:focus{outline-color:var(--white)}
.calc__out{border-top:1px solid rgba(255,255,255,.25);padding-top:22px;display:flex;flex-direction:column;gap:8px}
.calc__out>span:first-child{font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.calc__out strong{font-family:var(--serif);font-size:clamp(36px,4.6vw,58px);line-height:.98;font-weight:600;color:var(--white);letter-spacing:-.02em}
.calc__out>span:last-child{font-size:14.5px;color:rgba(255,255,255,.6)}
.calc__note{font-size:14.5px;color:rgba(255,255,255,.6);border-left:2px solid rgba(255,255,255,.4);padding-left:18px;max-width:46ch}
@media (max-width:980px){
  .usecases{grid-template-columns:1fr}
  .usecase{border-right:0}
  .usecases .usecase:last-child{border-bottom:0}
  .subbase{grid-template-columns:1fr;border-top:0}
  .subbase__col,.subbase .subbase__col:not(:first-child){border-right:0;border-top:2px solid var(--black);padding:26px 0 30px}
}
@media (max-width:600px){.calc{padding:28px 22px}}

/* ---------------- sidehoved på sort (sideskift-markering) ---------------- */
.page-hero--black{background:var(--black);border-bottom:0}
.page-hero--black h1{color:var(--white)}
.page-hero--black p{color:rgba(255,255,255,.78)}
.page-hero--black .crumbs,.page-hero--black .crumbs a{color:rgba(255,255,255,.55)}
.page-hero--black .hero__facts{border-top-color:rgba(255,255,255,.25)}
.page-hero--black .hero__facts strong,.page-hero--black .hero__facts strong a{color:var(--white)}
.page-hero--black .hero__facts span{color:rgba(255,255,255,.6)}
.page-hero--black .btn--solid{background:var(--blue);color:var(--white)}
.page-hero--black .btn--solid:hover{background:var(--blue-dark)}
.page-hero--black .btn--outline{color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.page-hero--black .btn--outline:hover{background:rgba(255,255,255,.14);color:var(--white)}
.page-hero--black .ph{background:#1c1c1c;border-color:#3a3a3a;color:rgba(255,255,255,.72)}
.page-hero--black .ph b{color:var(--white)}
.page-hero--black .ph code{background:var(--white);color:var(--black)}

/* ---------------- simpel faktaliste (kontakt) ---------------- */
.factlist{display:grid;gap:0;border-top:1px solid var(--line)}
.factlist li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}

/* ---------------- underoverskrift i beregner ---------------- */
.calc__sub{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--white);margin-top:8px;padding-top:18px;border-top:1px solid rgba(255,255,255,.25)}
.calc>.calc__sub:first-child{margin-top:0;padding-top:0;border-top:0}
.calc__out span:empty{display:none}

/* ---------------- ekspertisekort (boligforeninger) ---------------- */
.expertise{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.expertise__card{background:var(--black);color:rgba(255,255,255,.78);padding:38px 32px;display:flex;flex-direction:column;gap:18px}
.expertise__card h3{color:var(--white);font-size:26px;line-height:1.1}
.expertise__card p{font-size:16.5px}
@media (max-width:980px){.expertise{grid-template-columns:1fr}}

.field__hint{font-size:14.5px;color:var(--ink-3);margin-top:2px}

/* ---------------- caseforløb (undersider) ---------------- */
.caseflow{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid var(--black)}
.caseflow__step{padding:32px 40px 34px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.caseflow .caseflow__step:nth-child(2n){border-right:0;padding-left:40px}
.caseflow .caseflow__step:nth-last-child(-n+2){border-bottom:0}
.caseflow__no{font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.caseflow h3{font-size:26px}
.caseflow p{color:var(--ink-2);font-size:16.5px}
.caseresult{font-size:clamp(36px,4.6vw,64px);line-height:1;margin-bottom:24px}
.caseresult__note{font-size:14.5px;color:rgba(255,255,255,.55);max-width:52ch}
.expertise__card .btn{margin-top:auto;align-self:flex-start;text-align:left}
@media (max-width:980px){
  .caseflow{grid-template-columns:1fr;border-top:0}
  .caseflow__step,.caseflow .caseflow__step:nth-child(2n){border-right:0;border-bottom:0;border-top:2px solid var(--black);padding:28px 0 32px}
}

.card__teaser{font-style:italic;font-size:15px;line-height:1.5;color:var(--ink-3)}
.card__teaser a{color:var(--black);text-decoration:underline;text-underline-offset:3px}

/* ---------------- flydende kontaktknap (mobil) ---------------- */
.fab{display:none}
@media (max-width:900px){
  .fab{position:fixed;z-index:60;right:18px;bottom:calc(20px + env(safe-area-inset-bottom));
    display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
    background:var(--blue);color:var(--white);box-shadow:0 6px 24px rgba(0,0,0,.28)}
  .fab:hover{text-decoration:none}
  .fab svg{width:26px;height:26px;display:block}
}

/* ---------------- fade-in af sideoverskrifter ---------------- */
@keyframes riberFadeIn{from{opacity:0}to{opacity:1}}
.hero h1,.page-hero h1{animation:riberFadeIn .9s ease both}
@media (prefers-reduced-motion:reduce){.hero h1,.page-hero h1{animation:none}}

/* ---------------- caseheader med baggrundsbillede ---------------- */
.page-hero--bg{position:relative;isolation:isolate;background:var(--black) center/cover no-repeat;
  padding:120px 0 110px;overflow:hidden}
.page-hero--bg::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.74) 52%,rgba(0,0,0,.5) 100%)}
.page-hero--bg .wrap{display:block;position:relative}
.page-hero__bg{position:absolute;inset:0;z-index:-2;background:center/cover no-repeat;filter:grayscale(100%) contrast(106%)}
.page-hero--bg .casehero{max-width:62ch;background:rgba(0,0,0,.55);
  padding:44px 46px;backdrop-filter:blur(2px)}
.page-hero--bg .casehero p{max-width:58ch}
@media (max-width:700px){
  .page-hero--bg{padding:72px 0 68px}
  .page-hero--bg .casehero{padding:28px 22px}
}