/* font-display:swap (chosen 2026-09-29): the brand font always shows. Accepted trade-off: if the font arrives after
   first paint, the swap can move the header and hero slightly (CLS ~0.025, still "good"). optional would avoid
   that but can leave a first page view in the system font. */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-var.woff2") format("woff2-variations"),url("../fonts/archivo-var.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}
:root{
  --ink:#14171C;
  --ink-2:#1C2027;
  --ink-3:#262B33;
  --volt:#F5C400;
  --volt-deep:#D9AE00;
  --steel:#3B5C6B;
  --steel-soft:#E3E9EB;
  --paper:#F7F7F5;
  --white:#FFFFFF;
  --muted:#5A636D;
  --muted-dark:#A9B1BA;
  --line:#DEDFDB;
  --line-dark:#2E343D;
  --ok:#7BD389;
  --radius:10px;
  --radius-lg:16px;
  --wrap:1200px;
  --header-h:72px;
  --font:"Archivo",ui-sans-serif,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;font-stretch:100%;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-stretch:125%;font-weight:800;line-height:1.08;letter-spacing:-.015em;margin:0}
p{margin:0}
[hidden]{display:none!important}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
section[id]{scroll-margin-top:calc(var(--header-h) + 8px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--volt);color:var(--ink);padding:10px 16px;border-radius:6px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.on-dark:focus-visible{outline-color:var(--volt)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:8px;font:inherit;font-weight:700;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background-color .18s,border-color .18s,color .18s,transform .18s;white-space:nowrap}
.btn svg{width:20px;height:20px;flex:none}
.btn-volt{background:var(--volt);color:var(--ink)}
.btn-volt:hover{background:var(--volt-deep)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--ink-3)}
.btn-ghost-light{border-color:rgba(247,247,245,.35);color:var(--paper)}
.btn-ghost-light:hover{border-color:var(--paper);background:rgba(247,247,245,.06)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--volt)}
.on-dark .eyebrow{color:var(--muted-dark)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(247,247,245,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.site-header.scrolled{border-color:var(--line);box-shadow:0 6px 24px -18px rgba(20,23,28,.5)}
.header-inner{display:flex;align-items:center;gap:24px;height:var(--header-h)}
.brand{display:block;flex:none}
.brand img{height:24px;width:auto}
.nav{margin-left:auto}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:8px 12px;border-radius:6px;font-size:15px;font-weight:600;text-decoration:none;color:var(--ink)}
.nav a:hover{background:rgba(20,23,28,.06)}
.nav a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--volt);border-radius:6px 6px 0 0}
.header-actions{display:flex;align-items:center;gap:12px}
.header-phone{display:flex;flex-direction:column;line-height:1.15;text-decoration:none;font-weight:800;font-stretch:112%;font-size:16px}
.header-phone small{font-weight:600;font-stretch:100%;font-size:12px;color:var(--steel);letter-spacing:.02em}
.header-actions .btn{min-height:44px;padding:0 18px;font-size:15px}
.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;border:1.5px solid var(--line);background:var(--white);cursor:pointer;color:var(--ink)}
.menu-toggle svg{width:22px;height:22px}
.call-icon{display:none}

@media (max-width:1080px){
  .header-phone{display:none}
}
@media (max-width:900px){
  :root{--header-h:64px}
  .brand img{height:20px}
  .menu-toggle{display:inline-flex}
  .header-actions{margin-left:auto}
  .header-actions .btn-label{display:none}
  .header-actions .btn{width:44px;padding:0}
  .nav{position:absolute;left:0;right:0;top:100%;margin:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -20px rgba(20,23,28,.4);display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column;padding:8px 16px 16px}
  .nav a{padding:14px 8px;font-size:17px;border-bottom:1px solid var(--line);border-radius:0}
  .nav li:last-child a{border-bottom:0}
}

/* ---------- Hero ---------- */
.grid-bg{position:relative;overflow:hidden;isolation:isolate}
.hero{background:var(--ink);color:var(--paper)}
.grid-bg::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(247,247,245,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(247,247,245,.045) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 80% 90% at 70% 40%,#000 30%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 90% at 70% 40%,#000 30%,transparent 80%)}
.grid-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(-45deg,var(--volt) 0 14px,var(--ink) 14px 28px);opacity:.9}
.hero-inner{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;padding:96px 24px 104px}
.hero h1{font-size:clamp(36px,4.6vw,62px);margin:20px 0 24px}
@media (min-width:600px){.hero h1 .nw{white-space:nowrap}}
.hero h1 .hl{color:var(--volt)}
.hero-lead{font-size:clamp(17px,1.5vw,19px);color:#D5D9DD;max-width:36em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero-ctas .btn{min-height:56px;font-size:17px;padding:0 28px}
.trust{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 32px;margin:44px 0 0;padding:28px 0 0;border-top:1px solid var(--line-dark);list-style:none}
.trust li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--paper)}
.trust svg{width:22px;height:22px;color:var(--volt);flex:none}

/* status panel: breaker-panel look */
.panel{background:linear-gradient(180deg,var(--ink-2),#171B21);border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:28px;box-shadow:0 40px 80px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04)}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;margin-bottom:8px;border-bottom:1px solid var(--line-dark)}
.panel-head span{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark)}
.panel-head .screws{display:flex;gap:6px}
.panel-head .screws i{width:8px;height:8px;border-radius:50%;background:#3A414B;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
/* Each row is dl > div.circuit > dt + dd (valid definition-list markup). The breaker sits inside the dt and is
   positioned into the left column, so the look matches the former 34px + 16px gap grid, vertically centred. */
.circuit{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:81px;padding:16px 0 16px 50px;border-bottom:1px dashed var(--line-dark)}
.circuit .breaker{position:absolute;left:0;top:50%;margin-top:-24px}
.circuit:last-of-type{border-bottom:0}
.breaker{width:34px;height:48px;border-radius:6px;background:#0E1115;border:1px solid #333A44;position:relative}
.breaker::after{content:"";position:absolute;left:7px;right:7px;top:6px;height:18px;border-radius:3px;background:#C9CED4}
.breaker.on::after{background:var(--volt);top:auto;bottom:6px}
.circuit dt{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}
.circuit dd{margin:2px 0 0;font-size:17px;font-weight:700;color:var(--paper);display:flex;align-items:center;gap:10px}
.circuit dd small{display:block;font-weight:500;font-size:14px;color:var(--muted-dark)}
/* Kontor status: all three possible texts share one grid cell (the two extra are invisible sizers), so the row
   always has the height of the longest one and never moves when site.js swaps the text in. */
.status-slot{display:grid}
.status-slot>span{grid-area:1/1}
.status-slot .sizer{visibility:hidden}
.led{width:9px;height:9px;border-radius:50%;background:var(--volt);box-shadow:0 0 0 4px rgba(245,196,0,.16);flex:none}
.led.pulse{animation:pulse 2.2s ease-in-out infinite}
.led.off{background:#6B737D;box-shadow:none}
.led.green{background:var(--ok);box-shadow:0 0 0 4px rgba(123,211,137,.16)}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(245,196,0,0)}}
.panel .btn{width:100%;margin-top:18px;min-height:56px;font-size:17px}

@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:48px;padding:64px 24px 80px}
  .trust{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .hero-inner{padding:48px 20px 72px}
  .hero-ctas .btn{width:100%}
  .trust{grid-template-columns:1fr}
  .panel{padding:22px}
}

/* ---------- Generic sections ---------- */
.section{padding:112px 0}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:56px}
.section-head h2{font-size:clamp(30px,3.6vw,46px);margin-top:16px}
.section-head p{color:var(--muted);font-size:18px;max-width:34em}
.on-dark{background:var(--ink);color:var(--paper)}
.on-dark .section-head p{color:var(--muted-dark)}
@media (max-width:860px){
  .section{padding:80px 0}
  .section-head{grid-template-columns:1fr;gap:16px;margin-bottom:40px}
}

/* ---------- Services ---------- */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s}
.card:hover{border-color:#C6C9C2;transform:translateY(-3px);box-shadow:0 24px 40px -30px rgba(20,23,28,.45)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.card-icon{width:52px;height:52px;border-radius:12px;background:var(--steel-soft);color:var(--steel);display:grid;place-items:center}
.card-icon svg{width:26px;height:26px}
.card-num{font-size:13px;font-weight:700;letter-spacing:.12em;color:#9AA1A8;font-stretch:125%}
.card h3{font-size:22px;margin-bottom:12px}
.card p{color:var(--muted);font-size:16px}
.card.featured{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.card.featured p{color:var(--muted-dark)}
.card.featured .card-icon{background:var(--volt);color:var(--ink)}
.tag{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:5px;background:var(--volt);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.06em;vertical-align:middle;font-stretch:100%}
.card.cta-card{background:var(--steel);border-color:var(--steel);color:var(--white);justify-content:space-between}
.card.cta-card p{color:#DCE5E8;margin-bottom:28px}
.card.cta-card .btn{align-self:flex-start}
@media (max-width:980px){.services{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.services{grid-template-columns:1fr}.card{padding:26px}}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:start}
.about h2{font-size:clamp(30px,3.6vw,46px);margin:16px 0 24px}
.about-lead{font-size:19px;color:var(--ink);margin-bottom:18px}
.about-copy p+p{margin-top:14px}
.about-copy .muted{color:var(--muted)}
.principles{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.principles li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--line)}
.principles b{font-stretch:125%;font-weight:800;font-size:14px;color:var(--steel);padding-top:3px}
.principles strong{display:block;font-size:18px;margin-bottom:2px}
.principles span{color:var(--muted);font-size:16px}
.facts{background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:36px;position:relative;overflow:hidden}
.facts::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--volt)}
.facts h3{font-size:20px;margin-bottom:20px}
.facts dl{margin:0;display:grid;gap:0}
.facts dl div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line-dark)}
.facts dl div:last-child{border-bottom:0}
.facts dt{color:var(--muted-dark);font-size:14px;font-weight:600}
.facts dd{margin:0;font-weight:600}
@media (max-width:900px){.about{grid-template-columns:1fr;gap:48px}}
@media (max-width:480px){.facts{padding:28px 22px}.facts dl div{grid-template-columns:1fr;gap:2px}}

/* ---------- Reviews ---------- */
.reviews-sec{background:var(--steel-soft)}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review-slot{margin:0;border:2px dashed #AFC0C6;border-radius:var(--radius-lg);padding:32px;min-height:220px;display:flex;flex-direction:column;gap:18px;background:rgba(255,255,255,.45)}
/* Stars: yellow with a dark outline so they stay visible (3:1) on the light steel background */
.review-slot .stars{display:flex;gap:4px}
.review-slot .stars svg{width:22px;height:22px;fill:var(--volt);stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.review-slot .review-text{margin:0;flex:1;font-size:18px;font-weight:600;line-height:1.5;color:var(--ink)}
.review-slot figcaption{font-size:15px;font-weight:600;color:var(--steel)}
@media (max-width:900px){.reviews{grid-template-columns:1fr}.review-slot{min-height:0}}

/* ---------- Booking ---------- */
.cal-box{background:var(--white);color:var(--ink);border-radius:var(--radius-lg);min-height:560px;overflow:hidden;position:relative}
#cal-inline{width:100%;min-height:560px;max-height:820px;overflow:auto}
.cal-fallback{padding:48px 40px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:560px;gap:16px;background:linear-gradient(180deg,#fff,#F1F2EF)}
.cal-fallback .cal-icon{width:56px;height:56px;border-radius:12px;background:var(--ink);color:var(--volt);display:grid;place-items:center;margin-bottom:8px}
.cal-fallback .cal-icon svg{width:28px;height:28px}
.cal-fallback h2{font-size:24px}
.cal-fallback p{color:var(--muted);max-width:30em}
.cal-fallback .btn{margin-top:8px}
@media (max-width:900px){#cal-inline{max-height:75vh}.cal-fallback{padding:36px 24px;min-height:420px}}

/* ---------- Forms ---------- */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label,.field legend{font-size:14px;font-weight:700}
.field .opt{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1.5px solid #CFD2CC;border-radius:8px;padding:13px 14px;min-height:50px;width:100%;transition:border-color .15s,background-color .15s}
.field textarea{min-height:140px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314171C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#9DA3A0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);background:var(--white);box-shadow:0 0 0 3px rgba(245,196,0,.55)}
fieldset.field{border:0;padding:0;margin:0 0 18px;min-width:0}
.segmented{display:flex;gap:10px;flex-wrap:wrap}
.segmented label{position:relative;display:flex;align-items:center;gap:10px;padding:12px 16px;border:1.5px solid #CFD2CC;border-radius:8px;background:var(--paper);font-weight:600;font-size:15px;cursor:pointer}
.segmented input{accent-color:var(--ink);width:18px;height:18px;margin:0}
.segmented label:has(input:checked){border-color:var(--ink);background:var(--white)}
.segmented label:has(input:focus-visible){box-shadow:0 0 0 3px rgba(245,196,0,.55)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:8px}
.form-foot small{color:var(--muted);font-size:13px;flex:1;min-width:220px}
.form-privacy-note{margin-top:16px;font-size:13px;line-height:1.5;color:var(--muted)}
.form-privacy-note a{color:var(--ink);font-weight:600}
/* Short demo notice under a raw email link (reviews page, footer): same message as the form notice, one line */
.email-demo-note{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--muted)}
.site-footer .email-demo-note{color:#8C95A0;max-width:26ch}
.form-status{margin-top:18px;padding:14px 16px;border-radius:8px;font-weight:600;font-size:15px}
.form-status.ok{background:#E7F5EA;color:#1E5A2B}
.form-status.err{background:#FBE9E7;color:#8A2A1B}
.btn[disabled]{opacity:.6;cursor:progress}
.botcheck{display:none!important}
@media (max-width:560px){.form-card{padding:26px 20px}.grid-2{grid-template-columns:1fr;gap:0}.form-foot .btn{width:100%}}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 4px;font-weight:800;font-stretch:112%;font-size:20px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;transition:transform .2s,background-color .2s,border-color .2s}
.faq summary .pm svg{width:16px;height:16px}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--volt);border-color:var(--volt)}
.faq summary:hover .pm{border-color:var(--ink)}
.faq .answer{padding:0 60px 28px 4px;color:var(--muted);font-size:17px}
@media (max-width:900px){.faq summary{font-size:18px}.faq .answer{padding-right:4px}}

/* ---------- Contact ---------- */

/* ---------- Footer ---------- */
.site-footer{background:#0E1014;color:var(--muted-dark);padding:72px 0 32px;font-size:15px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.footer-grid img{height:22px;width:auto;margin-bottom:20px}
.footer-grid .footer-h{margin:0 0 14px;color:var(--paper);font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-stretch:112%}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* Footer links: 44px-tall tap target (same size as every other control on the site). Text size is unchanged;
   the extra height is clickable padding, and the list keeps its 8px gap so neighbouring targets never overlap. */
.footer-grid a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted-dark)}
.footer-grid a:hover,.footer-grid a[aria-current="page"]{color:var(--volt)}
.footer-bottom{margin-top:56px;padding-top:24px;border-top:1px solid #22272E;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;font-size:13px}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px}
.footer-links a,.footer-links button{display:inline-flex;align-items:center;background:none;border:0;padding:4px 0;min-height:44px;font:inherit;color:var(--muted-dark);text-decoration:underline;cursor:pointer}
.footer-links a:hover,.footer-links button:hover,.footer-links a[aria-current="page"]{color:var(--volt)}
.demo-note{flex-basis:100%;color:#7C858F}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}


/* ---------- Sub-page hero ---------- */
.page-hero{background:var(--ink);color:var(--paper)}
.page-hero .wrap{padding-top:88px;padding-bottom:88px}
.page-hero h1{font-size:clamp(34px,5vw,60px);margin:18px 0 20px;max-width:16em}
.page-hero p{color:#D5D9DD;font-size:clamp(17px,1.5vw,19px);max-width:38em}
.page-hero.tall .wrap{padding-top:120px;padding-bottom:140px}
@media (max-width:560px){.page-hero .wrap{padding-top:56px;padding-bottom:64px}}

/* ---------- Helpers ---------- */
.pt-0{padding-top:0}
.mt-12{margin-top:12px}
.mt-24{margin-top:24px}
.nowrap{white-space:nowrap}
.narrow{max-width:880px}
.h-lg{font-size:clamp(30px,3.6vw,46px);margin:16px 0 20px}
.h-md{font-size:clamp(24px,2.6vw,32px);margin-bottom:20px}
.h-sm{font-size:22px;margin-bottom:24px}
.lead-muted{color:var(--muted);font-size:18px}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:700;text-decoration:none;padding-bottom:2px;border-bottom:2px solid var(--volt)}
.more svg{width:18px;height:18px;transition:transform .2s}
.more:hover svg{transform:translateX(3px)}
.note{margin-top:40px;color:var(--muted);font-size:17px}
.note a{color:var(--ink);font-weight:700}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.split>*{min-width:0}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:40px}}

/* card link */
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:20px;font-weight:700;font-size:15px;text-decoration:none;color:var(--ink)}
.card-link svg{width:16px;height:16px;transition:transform .2s}
.card-link:hover svg{transform:translateX(3px)}
.card.featured .card-link{color:var(--volt)}

/* ---------- Service rows (Tjänster) ---------- */
.svc{display:grid;grid-template-columns:72px 1fr auto;gap:32px;align-items:start;padding:40px 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 16px)}
.svc:last-child{border-bottom:1px solid var(--line)}
.svc h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px}
.svc p{color:var(--muted);max-width:40em}
.svc .btn{margin-top:4px}
.card-icon.lg{width:72px;height:72px;border-radius:16px}
.card-icon.lg svg{width:34px;height:34px}
.svc.featured{background:var(--ink);color:var(--paper);border:0;border-radius:var(--radius-lg);padding:40px;margin:16px 0}
.svc.featured p{color:var(--muted-dark)}
.svc.featured .card-icon{background:var(--volt);color:var(--ink)}
.svc.featured+.svc{border-top:0}
@media (max-width:760px){
  .svc{grid-template-columns:1fr;gap:18px;padding:32px 0}
  .svc.featured{margin:16px 0;padding:28px 24px}
  .card-icon.lg{width:56px;height:56px}
  .card-icon.lg svg{width:28px;height:28px}
  .svc .btn{justify-self:start}
}

/* ---------- Process ---------- */
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.process li{background:var(--white);border-radius:var(--radius-lg);padding:32px;border-top:4px solid var(--volt)}
.process b{font-stretch:125%;font-weight:800;color:var(--steel);font-size:14px}
.process h3{font-size:21px;margin:14px 0 10px}
.process p{color:var(--muted);font-size:16px}
@media (max-width:860px){.process{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta-band{background:var(--volt);color:var(--ink)}
.cta-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px 40px;padding-top:64px;padding-bottom:64px}
.cta-band h2{font-size:clamp(26px,3vw,38px)}
.cta-band p{font-size:18px;margin-top:8px;font-weight:500}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.cta-band .btn-ghost:hover{background:var(--ink);color:var(--volt)}
@media (max-width:560px){.cta-actions,.cta-actions .btn{width:100%}}

/* ---------- Booking ---------- */
.checks{list-style:none;padding:0;margin:0 0 32px;display:flex;flex-wrap:wrap;gap:14px 36px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.checks svg{width:22px;height:22px;color:var(--steel);flex:none;margin-top:2px}
.checks a{color:var(--ink);font-weight:800}
.cal-box{border:1px solid var(--line)}

/* ---------- Contact ---------- */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.contact-list li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white)}
.contact-list li>div{min-width:0}
.contact-list .ci{width:48px;height:48px;border-radius:10px;background:var(--ink);color:var(--volt);display:grid;place-items:center}
.contact-list .ci svg{width:22px;height:22px}
.contact-list small{display:block;color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.04em}
.contact-list a,.contact-list span{font-weight:700;font-size:17px;text-decoration:none;color:var(--ink);overflow-wrap:anywhere}
.contact-list a:hover{text-decoration:underline;text-decoration-color:var(--volt);text-decoration-thickness:2px}
.urgent{margin-top:32px;padding:22px 24px;border-radius:var(--radius);background:var(--ink);color:var(--paper);display:flex;gap:16px;align-items:flex-start}
.urgent svg{width:26px;height:26px;color:var(--volt);flex:none}
.urgent strong{display:block;margin-bottom:4px}
.urgent a{color:var(--volt);font-weight:800;text-decoration:none;font-stretch:112%}
.urgent a:hover{text-decoration:underline}
#offert{scroll-margin-top:var(--header-h)}

/* ---------- Privacy policy page (article generated by the Byggium privacy-policy kit) ---------- */
.policy-page{padding-top:72px}
.privacy-policy{font-size:17px;line-height:1.7}
.privacy-policy h1{font-size:clamp(34px,5vw,54px);margin-bottom:20px}
.privacy-policy h2{font-size:clamp(22px,2.4vw,28px);margin:56px 0 16px;padding-top:24px;border-top:1px solid var(--line)}
.privacy-policy h3{font-size:19px;margin:0 0 12px}
.privacy-policy h4{font-size:16px;margin:0 0 6px;font-stretch:112%}
.privacy-policy p,.privacy-policy ul{margin:0 0 14px;color:#3A424B}
.privacy-policy ul{padding-left:22px}
.privacy-policy li{margin-bottom:6px}
.privacy-policy a{color:var(--ink);font-weight:600;text-decoration-color:var(--volt);text-decoration-thickness:2px}
.privacy-policy .pp-tool{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--volt);border-radius:var(--radius);padding:24px 28px;margin:20px 0}
.privacy-policy .pp-tool p:last-child{margin-bottom:0}
.privacy-policy [data-bcc-open-settings]{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;margin-top:6px;border-radius:8px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.privacy-policy [data-bcc-open-settings]:hover{background:var(--ink-3)}
.privacy-policy .bcc-list-cat{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin:14px 0}
.privacy-policy .bcc-list-table{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.privacy-policy .bcc-list-table th,.privacy-policy .bcc-list-table td{text-align:left;vertical-align:top;padding:8px 12px 8px 0;border-top:1px solid var(--line)}
.privacy-policy .bcc-list-table th{font-weight:700;color:var(--ink)}
.privacy-policy .bcc-list-table td:first-child{font-weight:600;overflow-wrap:anywhere}
@media (max-width:560px){.privacy-policy .pp-tool,.privacy-policy .bcc-list-cat{padding:18px}.privacy-policy .bcc-list-table{font-size:13px}}

/* ---------- Cookie banner: brand theme via the engine's --bcc-* variables (engine file stays untouched) ---------- */
:root{--bcc-bg:var(--ink);--bcc-text:var(--paper);--bcc-accent:var(--volt);--bcc-accent-text:var(--ink);--bcc-font:var(--font)}
/* Not covered by the variables: the brand stripe */
#byggium-cookie-banner{border-top:4px solid var(--volt)}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}