/* ZonneGids reference design. The owner's September screenshots define this system. */
:root {
  --navy:#07152F; --green:#15A34A; --green-dark:#10863D; --green-soft:#E8F7ED;
  --yellow:#FFC52E; --blue-soft:#EEF8FF; --section-green:#F4FAF6; --muted:#53627A;
  --border:#E5E9EE; --white:#FFFFFF;
  --ground:var(--white); --soft:var(--section-green); --warm:var(--green-soft);
  --navy-2:var(--navy); --ink:var(--navy); --ink-soft:var(--muted); --ink-mut:var(--muted);
  --rule:var(--border); --rule-2:#cbd5df; --primary:var(--green); --primary-dark:var(--green-dark);
  --primary-ink:var(--green-dark); --primary-tint:var(--green-soft); --accent:var(--green); --accent-tint:var(--green-soft);
  --sans:Inter,"Segoe UI",system-ui,sans-serif; --display:var(--sans); --wrap:1520px;
  --r:22px; --r-md:18px; --r-sm:12px; --measure:70ch; --header-h:82px;
  --shadow:0 12px 35px rgba(7,21,47,.08); --shadow-lg:0 18px 45px rgba(7,21,47,.12);
  --ref-ink:var(--navy); --ref-coral:var(--green); --ref-paper:var(--white); --ref-black:var(--navy);
}
* { box-sizing:border-box; }
html { scroll-padding-top:100px; }
body { margin:0; background:var(--white); color:var(--navy); font-family:var(--sans); font-size:18px; line-height:1.65; }
body h1,body h2,body h3,body h4,body .card-title { font-family:var(--sans); color:var(--navy); font-weight:800; letter-spacing:-.035em; }
body h1 { font-size:clamp(42px,4.4vw,68px); line-height:1.04; }
body h2 { font-size:40px; line-height:1.15; }
body h3 { font-size:24px; line-height:1.25; }
body p { color:var(--muted); }
body .wrap { width:100%; max-width:1520px; padding-inline:64px; margin-inline:auto; }
body .band { padding-block:80px; background:var(--white); }
button,input,select,textarea { font-family:var(--sans); }
a { text-underline-offset:4px; }
:where(a,button,input,select,summary):focus-visible { outline:3px solid var(--green-dark); outline-offset:4px; }
body .btn,body .cine-button { font-family:var(--sans); font-size:17px; font-weight:700; border-radius:12px; min-height:50px; padding:12px 24px; box-shadow:var(--shadow); }
body .btn-primary,body .btn--primary,body .cine-button { background:var(--green-dark); border-color:var(--green-dark); color:#fff; }
body .btn-primary:hover,body .btn--primary:hover { background:#096c30; }
body .page-transition { display:none; }

/* Shared 82px header. */
.zg-header { position:sticky; top:0; z-index:100; height:82px; background:#fff; border-bottom:1px solid var(--border); }
.zg-header-inner { max-width:1680px; width:100%; margin:auto; height:82px; padding:0 64px; display:flex; align-items:center; gap:26px; }
.zg-brand { display:flex; gap:8px; align-items:center; flex:0 0 268px; text-decoration:none; color:var(--navy); }
.zg-brand-sun { width:60px; height:60px; flex:none; }
.zg-brand b { display:block; font-size:38px; line-height:1.05; letter-spacing:-1.7px; font-weight:800; }
.zg-brand b i { color:var(--green-dark); font-style:normal; }
.zg-brand small { display:block; font-size:10.4px; line-height:1.5; color:var(--navy); white-space:nowrap; }
.zg-header .zg-nav { display:flex; position:static; flex:1; justify-content:center; align-items:center; gap:23px; margin:0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.zg-header .zg-nav a { display:block; position:relative; padding:29px 0; font:500 14px/24px var(--sans); white-space:nowrap; color:var(--navy); text-decoration:none; background:transparent; border-radius:0; }
.zg-header .zg-nav a[aria-current=page] { color:var(--navy); font-weight:700; background:none; }
.zg-header .zg-nav a[aria-current=page]::after { content:""; height:3px; position:absolute; left:0; right:0; bottom:17px; border-radius:3px; background:var(--green); }
.zg-header-actions { display:flex; align-items:center; gap:18px; margin-left:auto; }
.zg-search-open { display:grid; place-items:center; width:40px; height:48px; padding:8px; border:0; background:transparent; color:var(--navy); cursor:pointer; }
.zg-header-actions svg,.zg-menu svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.zg-header-cta { display:flex; align-items:center; justify-content:center; gap:13px; width:220px; height:49px; background:var(--green-dark); color:white; border-radius:12px; font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap; }
.zg-header-cta:hover { background:#087433; }
.zg-header .zg-menu { display:none; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--navy); min-width:44px; height:44px; align-items:center; justify-content:center; padding:9px; }

/* Hero: large typography over a photo that bleeds to the viewport edge. */
.zg-ref-hero { position:relative; isolation:isolate; height:580px; background:var(--blue-soft); overflow:hidden; }
.zg-ref-hero-left { position:relative; z-index:3; width:49%; max-width:calc(760px + (100vw - 1520px)/2); height:100%; padding:53px 20px 40px max(64px,calc((100vw - 1520px)/2 + 64px)); }
.zg-ref-eyebrow { font-size:12px; font-weight:600; letter-spacing:.25em; text-transform:uppercase; color:var(--navy); margin:0; line-height:1.5; }
.zg-ref-hero h1 { color:var(--navy); font-size:68px; font-weight:800; line-height:.98; letter-spacing:-.045em; margin:23px 0 18px; max-width:590px; }
.zg-ref-ul-wrap { position:relative; display:inline-block; }
.zg-ref-ul-wrap svg { position:absolute; left:-3%; bottom:-.16em; width:108%; height:.24em; overflow:visible; }
.zg-ref-hero .zg-ref-lead { font-size:20px; line-height:1.43; max-width:565px; color:var(--muted); margin:20px 0 0; }
.zg-ref-btn { display:inline-flex; align-items:center; justify-content:center; gap:12px; font-family:var(--sans); font-weight:700; text-decoration:none; border:0; cursor:pointer; white-space:nowrap; }
.zg-ref-btn--cta { background:var(--green-dark); color:#fff; min-width:360px; height:55px; border-radius:999px; font-size:17px; padding:0 26px; margin-top:22px; }
.zg-ref-btn--cta:hover { background:#087433; }
.zg-ref-icn { width:24px; height:24px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.zg-ref-btn .zg-ref-icn { width:19px; height:19px; }
.zg-ref-checks { display:flex; gap:19px; flex-wrap:nowrap; margin-top:21px; }
.zg-ref-checks>span { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; white-space:nowrap; }
.zg-ref-checks i { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#ccebdc; color:var(--green-dark); flex:none; }
.zg-ref-checks .zg-ref-icn { width:14px; height:14px; stroke-width:3; }
.zg-ref-hero-photo { position:absolute; inset:0 0 0 37%; z-index:0; }
.zg-ref-hero-photo img { width:100%; height:100%; object-fit:cover; object-position:62% 48%; max-width:none; display:block; }
.zg-ref-hero-photo::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,var(--blue-soft) 0%,rgba(238,248,255,.97) 5%,rgba(238,248,255,.65) 20%,rgba(238,248,255,0) 42%); }
.zg-ref-badge { position:absolute; z-index:4; left:55%; top:35px; width:165px; height:165px; border-radius:50%; display:grid; place-items:center; background:var(--yellow); color:var(--navy); font-size:22px; font-weight:800; line-height:1.12; text-align:center; transform:rotate(-8deg); box-shadow:0 12px 32px #ffc52e22; }
.zg-ref-badge b { font-weight:800; }
.zg-ref-badge .zg-ref-rays { display:none; }
.zg-ref-fcard { position:absolute; z-index:4; display:flex; align-items:center; gap:16px; padding:19px 21px; border-radius:18px; background:rgba(255,255,255,.97); box-shadow:0 12px 35px rgba(7,21,47,.12); color:var(--navy); }
.zg-ref-fcard .zg-ref-ic { color:var(--green); flex:none; display:grid; place-items:center; }
.zg-ref-fcard .zg-ref-icn { width:38px; height:38px; stroke-width:2.5; }
.zg-ref-fcard small { font-size:14px; line-height:1.45; display:block; color:var(--navy); }
.zg-ref-fcard .zg-ref-big { font-size:27px; font-weight:800; color:var(--green-dark); display:block; line-height:1.2; }
.zg-ref-fcard b { font-size:16px; line-height:1.4; color:var(--navy); }
.zg-ref-fcard--save { top:82px; right:56px; width:228px; }
.zg-ref-fcard--co2 { top:259px; right:242px; width:222px; }
.zg-ref-fcard--val { bottom:75px; right:56px; width:239px; }
.zg-ref-features { position:relative; z-index:5; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1500px; width:calc(100% - 128px); min-height:112px; margin:-30px auto 0; border-radius:22px; background:white; box-shadow:var(--shadow); padding:16px 0; }
.zg-ref-feat { display:flex; align-items:center; gap:17px; padding:2px 24px; }
.zg-ref-feat+.zg-ref-feat { border-left:1px solid var(--border); }
.zg-ref-feat .zg-ref-ic { width:42px; flex:none; color:var(--navy); }
.zg-ref-feat .zg-ref-icn { width:38px; height:38px; }
.zg-ref-feat:last-child .zg-ref-ic { color:var(--green); }
.zg-ref-feat b { font-size:15px; line-height:1.4; display:block; letter-spacing:-.02em; }
.zg-ref-feat p { font-size:13.5px; line-height:1.55; margin:4px 0 0; }
.zg-ref-how { position:relative; background:var(--section-green); margin-top:-82px; padding:120px 0 42px; }
.zg-ref-wrap { max-width:1520px; margin-inline:auto; padding-inline:64px; width:100%; }
.zg-ref-how .zg-ref-eyebrow { text-align:center; color:var(--green-dark); }
.zg-ref-how h2 { text-align:center; font-size:34px; margin:12px 0 25px; line-height:1.2; }
.zg-ref-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding-right:92px; }
.zg-ref-step { display:flex; align-items:flex-start; gap:17px; background:white; border-radius:20px; box-shadow:var(--shadow); padding:23px 22px; }
.zg-ref-step .zg-ref-n { width:43px; height:43px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--green-dark); color:#fff; font-size:23px; }
.zg-ref-step b { display:block; font-size:15px; line-height:1.4; }
.zg-ref-step p { margin:5px 0 0; font-size:14px; line-height:1.5; }
.zg-ref-note { position:absolute; z-index:2; right:32px; bottom:22px; width:125px; font-family:"Segoe Print","Bradley Hand",cursive; font-style:italic; font-size:18px; line-height:1.25; color:var(--green-dark); transform:rotate(-7deg); margin:0; }
.zg-ref-note svg { width:75px; height:40px; margin:5px 0 0 10px; }
.zg-example-note { padding-block:16px; margin-block:0; font-size:12px; line-height:1.55; background:white; }
.zg-example-note a { color:var(--green-dark); }

/* Existing content sections: full horizontal composition, bounded vertical spacing. */
.home-reference .energy-story,.home-reference .solar-lab,.home-reference .calculator-stage,.home-reference .trust-stage,.home-reference .knowledge-stage,.home-reference .latest-stage,.home-reference .final-stage { padding:80px 0; min-height:0; background:var(--white); color:var(--navy); overflow:hidden; }
.home-reference .energy-story,.home-reference .trust-stage,.home-reference .latest-stage { background:var(--section-green); }
.home-reference .energy-story::before,.home-reference .solar-lab::after,.home-reference .final-stage::before,.home-reference .final-stage::after,.home-reference .tech-grid { display:none; }
.home-reference .cine-kicker { color:var(--green-dark)!important; font-family:var(--sans); font-size:12px; letter-spacing:.18em; line-height:1.5; margin:0 0 16px; }
.home-reference h2 { max-width:none; font-size:42px; line-height:1.12; font-weight:800; }
.home-reference h2 em { color:var(--green-dark); font-style:normal; }
.home-reference .energy-story__head { position:static; width:100%; max-width:900px; text-align:center; margin:0 auto 36px; padding:0 24px; }
.home-reference .energy-story__head p { color:var(--muted); font-size:18px; max-width:780px; margin-inline:auto; }
.home-reference .energy-reactor,.home-reference .energy-line { display:none; }
.home-reference .energy-track { display:grid; width:100%; grid-template-columns:repeat(5,minmax(0,1fr)); max-width:1520px; padding:0 64px; margin:auto; gap:20px; }
.home-reference .energy-step { display:block; opacity:1; transform:none; padding:24px; min-height:0; background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); }
.home-reference .energy-step>span { color:var(--green-dark); font-size:19px; }
.home-reference .energy-step h3 { font-size:23px; margin:15px 0 10px; color:var(--navy); }
.home-reference .energy-story__head h2 { color:var(--navy); }
.home-reference .energy-step p { font-size:16px; color:var(--muted); }
.home-reference .energy-step>i { display:none; }
.home-reference .solar-lab__grid,.home-reference .calculator-stage__grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; min-height:0; }
.home-reference .solar-lab__copy { max-width:none; }
.home-reference .solar-lab__copy>p:not(.cine-kicker) { font-size:18px; max-width:60ch; width:auto; }
.home-reference .solar-lab__copy>p::after { content:none; }
.home-reference .orientation-tabs { display:none; }
.home-reference .lab-output { margin:24px 0 0; color:var(--navy); border-color:var(--border); }
.home-reference .lab-output b { font-family:var(--sans); font-size:42px; font-weight:800; color:var(--navy); }
.home-reference .lab-output small,.home-reference .lab-output em { color:var(--muted); }
.home-reference .house-stage { min-height:380px; height:380px; background:var(--blue-soft); border:1px solid var(--border); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.home-reference .calc-preview { display:none; }
.home-reference .calculator-stage__grid { position:relative; isolation:isolate; overflow:hidden; grid-template-columns:1fr; background:var(--blue-soft); border-radius:22px; padding-block:40px; }
.home-reference .calculator-stage__grid>div:first-child { width:56%; }
.home-reference .calculator-stage__grid::after { content:""; position:absolute; z-index:-1; inset:0 0 0 50%; background:linear-gradient(90deg,var(--blue-soft),transparent 50%),url('/assets/img/hero-house.webp') 62% center/cover; }
.home-reference .calculator-stage h2 { max-width:850px; }
.home-reference .trust-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:32px; }
.home-reference [data-reveal] { opacity:1!important; transform:none!important; }
.home-reference .trust-stage h2 { margin-bottom:30px; }
.home-reference .trust-list article { display:block; padding:28px; border:1px solid var(--border); border-radius:22px; background:#fff; box-shadow:var(--shadow); }
.home-reference .trust-list h3 { font-size:23px; }
.home-reference .trust-list span { color:var(--green-dark); }
.home-reference .trust-list p { color:var(--muted); }
.home-reference .knowledge-head { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:32px; }
.home-reference .knowledge-head>a { color:var(--green-dark); }
.home-reference .knowledge-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.home-reference .knowledge-card { position:relative; display:flex; flex-direction:column; min-height:0; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); opacity:1!important; transform:none!important; filter:none!important; padding:0 0 26px; color:var(--navy); }
.home-reference .knowledge-card:nth-child(n) { grid-column:auto; grid-row:auto; min-height:0; }
.home-reference .knowledge-card__media { position:relative; inset:auto; z-index:auto; height:230px; flex:none; width:100%; }
.home-reference .knowledge-card__media picture { display:block; width:100%; height:100%; }
.home-reference .knowledge-card__media img { width:100%; height:100%; object-fit:cover; }
.home-reference .knowledge-card__media::after { display:none; }
.home-reference .knowledge-card>span { padding:22px 24px 0; color:var(--green-dark); font-size:13px; }
.home-reference .knowledge-card h3 { font-family:var(--sans); color:var(--navy); font-size:26px; margin:10px 50px 0 24px; }
.home-reference .knowledge-card>b { position:absolute; right:24px; bottom:23px; color:var(--green-dark); }
.home-reference .latest-editorial { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.home-reference .latest-editorial>a { background:white; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); padding:28px; opacity:1!important; transform:none!important; }
.home-reference .latest-editorial h3 { font-size:25px; font-weight:700; }
.home-reference .latest-editorial b { color:var(--green-dark); }
.home-reference .final-stage { background:var(--green-soft); }
.home-reference .final-stage h2,.home-reference .final-stage p { color:var(--navy); }
.home-reference .final-stage__inner { padding-block:0; min-height:0; }
.home-reference .roof-scanner--photo { min-height:0; height:520px; margin:0; padding:0; overflow:hidden; border:0; border-radius:24px; background:none; box-shadow:var(--shadow-lg); }
.home-reference .roof-scanner--photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:64% center; }

/* Green actions turn black on mouse hover — hover-capable pointers only, so a
   tap on a touch device does not leave a "stuck" black button. */
:where(.zg-header-cta,.zg-ref-btn--cta,.btn-primary,.btn--primary,.cine-button,.roof-direction__cta) { transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease; }
@media (hover:hover) and (pointer:fine) {
  :where(.zg-header-cta,.zg-ref-btn--cta,.btn-primary,.btn--primary,.cine-button,.roof-direction__cta):hover { background:#000!important; border-color:#000!important; color:#fff!important; }
}

/* Article, archive, calculator and utility template system. */
body .article-head,body.category-editorial .article-head,body.about-editorial .article-head,body.calculator-cinematic .article-head { background:var(--blue-soft); padding:45px 0 48px; min-height:0; color:var(--navy); display:block; }
body .article-head::after { display:none; }
body .article-head h1,body.category-editorial .article-head h1,body.about-editorial .article-head h1,body.calculator-cinematic .article-head h1 { font-size:clamp(44px,4.3vw,64px); font-weight:800; max-width:1100px; color:var(--navy); margin:22px 0 18px; line-height:1.08; }
body .article-head p,body.category-editorial .article-head p { color:var(--muted)!important; font-size:20px; max-width:900px; }
body .breadcrumbs,body .breadcrumbs a,body.category-editorial .breadcrumbs,body.category-editorial .breadcrumbs a { color:var(--muted); font-size:13px; }
body .breadcrumbs { line-height:1.8; }
body .article-meta { font-size:14px; color:var(--muted); gap:20px; }
body .article-meta .dot { color:var(--green); }
body.page-overview .article-head { position:relative; isolation:isolate; min-height:310px; padding-block:38px; background:var(--blue-soft); overflow:hidden; }
body.page-overview .article-head::before { content:""; position:absolute; inset:0 0 0 48%; z-index:-1; background:linear-gradient(90deg,var(--blue-soft),transparent 60%),url('/assets/img/hero-reference-v2.png') 65% 45%/cover; }
body.page-overview .article-head h1 { font-size:54px; max-width:650px; }
body.page-overview .article-head p { max-width:600px; }
body .grid--3 { gap:28px; grid-template-columns:repeat(3,minmax(0,1fr)); }
body .card { position:relative; background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; color:var(--navy); }
body .card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
body .card-media { aspect-ratio:16/9; overflow:hidden; }
body .card-media img { object-fit:cover; width:100%; height:100%; }
body .card-body { padding:24px 24px 28px; position:static; }
body .card-cat { position:absolute; top:17px; left:17px; background:var(--green-soft); color:#076c30; border-radius:999px; padding:4px 11px; font-size:11px; font-weight:700; line-height:1.5; letter-spacing:.02em; }
body .card-title { font-size:24px; line-height:1.25; font-weight:750; letter-spacing:-.035em; margin:0 0 12px; }
body .card-excerpt { font-size:16px; line-height:1.6; color:var(--muted); }
body .card-meta { font-size:13px; color:var(--muted); margin-top:22px; padding-right:32px; }
body .card::after { content:"→"; position:absolute; right:23px; bottom:24px; font-size:30px; color:var(--green-dark); line-height:1; }
body .prose { font-size:19px; line-height:1.7; color:var(--muted); max-width:80ch; }
body .prose h2 { font-size:36px; font-weight:800; line-height:1.2; margin-top:1.65em; }
body .prose h3 { font-size:25px; font-weight:700; }
body .prose a:not(.btn) { color:#087538; }
body .prose table { font-size:16px; }
body .prose th { color:var(--navy); background:#f6f8fb; font-size:13px; text-transform:none; letter-spacing:0; }
body .prose td { color:var(--muted); }
body .prose blockquote,body .toc,body .takeaways,body .inline-cta,body .notice { background:var(--green-soft); border-color:var(--border); border-radius:18px; }
body .toc a { color:var(--navy); font-size:15px; }
body .inline-cta { padding:26px; }
body .author { background:var(--section-green); max-width:none; }
body .article-layout { max-width:1520px; width:100%; padding:0 64px; grid-template-columns:minmax(0,1fr) 320px; gap:40px; }
body .article-main { min-width:0; }
body.article-redesign .article-head { background:#fff; padding:38px 0 20px; }
body.article-redesign .article-head .wrap { padding:0; }
body.article-redesign .article-head h1 { font-size:56px; max-width:950px; }
body.article-redesign .article-head p { font-size:19px; }
body .article-figure { border-radius:20px; overflow:hidden; box-shadow:var(--shadow); }
body .article-figure img { width:100%; object-fit:cover; }
body .article-sidebar { padding-top:70px; min-width:0; }
body .side-card { background:#fff; border:1px solid var(--border); border-radius:20px; padding:25px; box-shadow:var(--shadow); color:var(--navy); }
body .side-card:first-child { background:var(--green-soft); }
body .side-card h2,body .side-card h3 { font-size:23px; line-height:1.2; }
body .side-card p,body .side-card li { font-size:15px; color:var(--muted); }
body .side-card .btn { font-size:15px; padding:12px 16px; width:100%; }
body .about-hero { width:calc(100% - 128px); max-width:1392px; height:480px; border-radius:22px; margin:32px auto 48px; }
body.calculator-cinematic { background:var(--white); }
body .zg-calc,body.calculator-cinematic .zg-calc { background:#fff; max-width:1000px; border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow); }
body .zg-calc__panel,body.calculator-cinematic .zg-calc__panel { padding:32px; background:white; }
body .zg-calc__panel[hidden] { display:none; }
body .zg-calc__progress { background:var(--section-green); }
body.calculator-cinematic main>.band { background:var(--white); }
body.calculator-cinematic .zg-calc { color:var(--navy); }
body.calculator-cinematic .zg-calc__progress { background:var(--section-green); border-color:var(--border); }
body.calculator-cinematic .zg-calc__step { color:var(--muted); }
body.calculator-cinematic .zg-calc__step--active { background:#fff; }
body.calculator-cinematic .zg-calc__panel-title { color:var(--navy); font-weight:800; }
body.calculator-cinematic .zg-calc__input-wrap,body.calculator-cinematic .zg-calc__field select,body.calculator-cinematic .zg-calc__radio-card,body.calculator-cinematic .zg-calc__metric,body.calculator-cinematic .zg-calc__details,body.calculator-cinematic .zg-calc__assume { background:#fff; border-color:#cbd5df; color:var(--navy); }
body.calculator-cinematic .zg-calc__input-wrap input,body.calculator-cinematic .zg-calc__field select { color:var(--navy); }
body.calculator-cinematic .zg-calc__input-unit,body.calculator-cinematic .zg-calc__input-prefix { background:var(--blue-soft); color:var(--muted); }
body.calculator-cinematic .zg-calc__radio-card.is-checked { border-color:var(--green-dark); background:var(--green-soft); }
body.calculator-cinematic .zg-calc__toggle--active { background:var(--green-dark); border-color:var(--green-dark); color:white; }
body.calculator-cinematic .zg-calc__metric--primary { background:var(--green-dark); border-color:var(--green-dark); }
body.calculator-cinematic .zg-calc__metric--primary * { color:#fff!important; }
body.calculator-cinematic .article-head p:not(.eyebrow) { color:var(--muted)!important; }
body .zg-calc__step { font-size:16px; }
body .zg-calc__step--active,body.calculator-cinematic .zg-calc__step--active { color:var(--green-dark); border-color:var(--green); }
body .zg-calc__panel-title { font-size:29px; }
body .zg-calc__field>label { font-size:16px; }
body .zg-calc__input-wrap input,body .zg-calc__field select { min-height:52px; }
body .zg-calc__metric--primary { background:var(--green-dark); border-color:var(--green-dark); }
body .zg-calc__metric--primary span { color:white; }
body .site-footer { background:white; color:var(--navy); border-top:1px solid var(--border); padding:50px 0 24px; }
body .site-footer h3 { font-size:16px; color:var(--navy); }
body .site-footer p,body .site-footer a,body .footer-bottom { color:var(--muted); font-size:14px; }
body .site-footer .logo b { color:var(--navy); font-family:var(--sans); }
body .site-footer .logo b span { color:var(--green-dark); }
body .site-footer .logo svg>circle:first-child { fill:none; }
body .site-footer .logo svg>circle:nth-child(2) { fill:var(--yellow); }
body .site-footer .logo svg g { stroke:var(--yellow); }
body .footer-bottom { border-color:var(--border); }
.zg-legacy-links { max-width:1520px; padding:20px 64px 0; margin:auto; display:flex; gap:22px; flex-wrap:wrap; }
body .zg-legacy-links a { font-size:12px; }
body .consent-banner { background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg); z-index:200; color:var(--navy); }
body .consent-banner a { color:var(--green-dark); }

/* Search is real local content, never a non-working mockup control. */
.zg-search-dialog { width:min(760px,calc(100% - 32px)); max-height:85vh; overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--border); border-radius:24px; padding:28px; color:var(--navy); box-shadow:var(--shadow-lg); }
.zg-search-dialog::backdrop { background:rgba(7,21,47,.48); }
.zg-search-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.zg-search-heading h2 { font-size:28px; margin:0 0 20px; }
.zg-search-close { border:0; background:var(--section-green); border-radius:50%; width:44px; height:44px; font-size:29px; color:var(--navy); cursor:pointer; }
.zg-search-dialog label { display:block; font-size:15px; margin:8px 0; }
.zg-search-dialog input { width:100%; padding:15px; border:1px solid #b4c4d3; border-radius:12px; font-size:17px; }
.zg-search-status { font-size:14px; }
.zg-search-results a { display:block; padding:18px 0; border-top:1px solid var(--border); color:var(--navy); text-decoration:none; }
.zg-search-results strong { display:block; font-size:18px; }
.zg-search-results span { display:block; margin-top:5px; color:var(--muted); font-size:14px; }

@media(min-width:1600px) {
  .zg-header-inner { padding-inline:80px; gap:32px; }
  .zg-header .zg-nav { gap:26px; }
  .zg-header .zg-nav a { font-size:14px; }
  .zg-ref-hero-left { padding-top:53px; }
  .zg-ref-checks { gap:24px; }
  .zg-ref-checks>span { font-size:13px; }
}
@media(max-width:1250px) {
  .zg-header-inner { padding-inline:32px; gap:20px; }
  .zg-brand { flex-basis:244px; }
  .zg-brand b { font-size:31px; }
  .zg-header .zg-nav { display:none; }
  .zg-header .zg-menu { display:flex; }
  .zg-header .zg-nav.open { display:flex; position:absolute; top:82px; left:24px; right:24px; flex-direction:column; align-items:stretch; gap:0; background:#fff; padding:12px 24px; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-lg); }
  .zg-header .zg-nav a { padding:12px 0; font-size:16px; }
  .zg-header .zg-nav a[aria-current=page]::after { bottom:5px; right:auto; width:40px; }
  .zg-ref-hero { height:560px; }
  .zg-ref-hero-left { width:54%; padding:42px 15px 35px 40px; max-width:none; }
  .zg-ref-hero h1 { font-size:54px; }
  .zg-ref-hero .zg-ref-lead { font-size:18px; }
  .zg-ref-checks { gap:12px; flex-wrap:wrap; }
  .zg-ref-checks>span { font-size:11px; }
  .zg-ref-badge { left:56%; top:28px; width:136px; height:136px; font-size:19px; }
  .zg-ref-fcard { padding:14px; gap:10px; }
  .zg-ref-fcard--save { width:186px; right:25px; top:176px; }
  .zg-ref-fcard--co2 { width:188px; right:80px; top:302px; }
  .zg-ref-fcard--val { width:192px; right:24px; bottom:38px; }
  .zg-ref-fcard .zg-ref-big { font-size:24px; }
  .zg-ref-fcard b,.zg-ref-fcard small { font-size:12px; }
  .zg-ref-features { width:calc(100% - 64px); }
  .zg-ref-feat { padding:0 15px; gap:11px; }
  .zg-ref-feat .zg-ref-ic { width:31px; }
  .zg-ref-feat .zg-ref-icn { width:30px; }
  .zg-ref-feat b { font-size:13px; }
  .zg-ref-feat p { font-size:12px; }
  .zg-ref-wrap,body .wrap { padding-inline:32px; }
  .zg-ref-how h2 { font-size:30px; }
  .zg-ref-steps { gap:16px; padding-right:0; }
  .zg-ref-step { padding:20px 17px; gap:12px; }
  .zg-ref-note { display:none; }
  .home-reference .energy-track { padding-inline:32px; gap:14px; }
  .home-reference .energy-step { padding:18px; }
  .home-reference .trust-list { grid-template-columns:repeat(2,1fr); }
  body .article-layout { padding-inline:32px; grid-template-columns:minmax(0,1fr) 280px; gap:28px; }
  body.article-redesign .article-head h1 { font-size:44px; }
}
@media(max-width:760px) {
  body { font-size:17px; }
  body .wrap,.zg-ref-wrap { padding-inline:22px; }
  .zg-header,.zg-header-inner { height:74px; }
  .zg-header-inner { padding-inline:17px; gap:8px; }
  .zg-brand { flex-basis:auto; gap:4px; margin-right:auto; }
  .zg-brand-sun { width:45px; height:45px; }
  .zg-brand b { font-size:26px; letter-spacing:-1.2px; }
  .zg-brand small { font-size:8px; }
  .zg-header-actions { margin-left:0; gap:0; }
  .zg-header-cta { display:none; }
  .zg-header .zg-nav.open { top:74px; left:12px; right:12px; }
  .zg-header .zg-menu { min-width:40px; width:40px; height:40px; }
  .zg-search-open { width:36px; }
  .zg-ref-hero { height:auto; min-height:990px; padding-bottom:460px; }
  .zg-ref-hero-left { width:100%; max-width:none; padding:32px 22px 30px; height:auto; }
  .zg-ref-eyebrow { font-size:10px; letter-spacing:.18em; }
  .zg-ref-hero h1 { font-size:43px; line-height:1.02; letter-spacing:-.045em; margin-top:20px; }
  .zg-ref-hero .zg-ref-lead { font-size:17px; line-height:1.5; margin-top:22px; }
  .zg-ref-btn--cta { min-width:0; width:100%; height:55px; font-size:15px; margin-top:22px; }
  .zg-ref-checks { gap:9px 16px; margin-top:19px; }
  .zg-ref-checks>span { font-size:11px; }
  .zg-ref-checks i { width:21px; height:21px; }
  .zg-ref-hero-photo { inset:auto 0 0; height:460px; }
  .zg-ref-hero-photo img { object-position:62% center; }
  .zg-ref-hero-photo::before { background:linear-gradient(180deg,var(--blue-soft),rgba(238,248,255,0) 25%); }
  .zg-ref-badge { left:22px; top:auto; bottom:294px; width:116px; height:116px; font-size:17px; }
  .zg-ref-fcard { border-radius:16px; padding:12px; gap:10px; }
  .zg-ref-fcard .zg-ref-icn { width:27px; height:27px; }
  .zg-ref-fcard--save { top:auto; bottom:243px; right:17px; width:168px; }
  .zg-ref-fcard--co2 { top:auto; bottom:133px; right:auto; left:22px; width:178px; }
  .zg-ref-fcard--val { bottom:40px; right:17px; width:180px; }
  .zg-ref-features { width:calc(100% - 32px); grid-template-columns:1fr; padding:12px 20px; border-radius:20px; margin-top:-22px; }
  .zg-ref-feat { padding:18px 0; gap:18px; }
  .zg-ref-feat+.zg-ref-feat { border-left:0; border-top:1px solid var(--border); }
  .zg-ref-feat b { font-size:16px; }
  .zg-ref-feat p { font-size:14px; }
  .zg-ref-feat .zg-ref-ic,.zg-ref-feat .zg-ref-icn { width:38px; }
  .zg-ref-how { margin-top:-20px; padding:56px 0 35px; }
  .zg-ref-how h2 { font-size:28px; margin:12px 0 24px; }
  .zg-ref-steps { grid-template-columns:1fr; gap:14px; }
  .zg-ref-step { padding:22px; }
  .zg-ref-step b { font-size:16px; }
  .zg-ref-step p { font-size:14px; }
  .zg-example-note { font-size:11px; padding-block:15px; }
  body .band { padding-block:40px; }
  body h2,.home-reference h2 { font-size:31px; }
  .home-reference .energy-story,.home-reference .solar-lab,.home-reference .calculator-stage,.home-reference .trust-stage,.home-reference .knowledge-stage,.home-reference .latest-stage,.home-reference .final-stage { padding-block:45px; }
  .home-reference .energy-track { grid-template-columns:1fr; padding-inline:22px; }
  .home-reference .energy-step { padding:22px; }
  .home-reference .solar-lab__grid,.home-reference .calculator-stage__grid { grid-template-columns:1fr; gap:25px; }
  .home-reference .calculator-stage__grid>div:first-child { width:100%; }
  .home-reference .calculator-stage__grid::after { display:none; }
  .home-reference .house-stage { height:320px; min-height:320px; }
  .home-reference .trust-list,.home-reference .knowledge-grid,.home-reference .latest-editorial { grid-template-columns:1fr; gap:20px; }
  .home-reference .knowledge-head { display:block; }
  .home-reference .knowledge-head>a { display:inline-block; margin-top:18px; }
  body .article-head,body.category-editorial .article-head,body.about-editorial .article-head,body.calculator-cinematic .article-head { padding-block:28px; }
  body .article-head h1,body.category-editorial .article-head h1,body.about-editorial .article-head h1,body.calculator-cinematic .article-head h1,body.article-redesign .article-head h1 { font-size:36px; line-height:1.1; }
  body .article-head p,body.article-redesign .article-head p { font-size:17px; }
  body.page-overview .article-head { min-height:350px; padding-bottom:130px; }
  body.page-overview .article-head::before { inset:42% 0 0; background:linear-gradient(180deg,var(--blue-soft),transparent 70%),url('/assets/img/hero-reference-v2.png') center 43%/cover; }
  body.page-overview .article-head h1 { font-size:39px; }
  body .grid--3 { grid-template-columns:1fr; gap:24px; }
  body .card-title { font-size:24px; }
  body .card-body { padding:22px; }
  body .article-layout { display:block; padding:0 22px; }
  body .article-sidebar { padding-top:30px; }
  body .prose { font-size:17px; max-width:100%; }
  body .prose h2 { font-size:29px; }
  body .prose h3 { font-size:23px; }
  body .article-meta { gap:10px; font-size:12px; flex-wrap:wrap; }
  body .breadcrumbs { font-size:11px; overflow-wrap:anywhere; }
  body .toc { position:static; }
  body .about-hero { width:calc(100% - 44px); height:270px; }
  .home-reference .roof-scanner--photo { height:330px; }
  body .zg-calc__panel,body.calculator-cinematic .zg-calc__panel { padding:22px; }
  body .zg-calc__step { font-size:13px; }
  body .zg-calc__panel-title { font-size:25px; }
  body .zg-calc__actions { flex-wrap:wrap; gap:12px; }
  body .zg-calc__actions .btn { width:100%; }
  body .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  body .footer-grid>div:first-child { grid-column:1/-1; }
  .zg-legacy-links { padding-inline:22px; gap:14px; }
  .zg-search-dialog { padding:22px; }
  .zg-search-heading h2 { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Mobile app shell. */
.zg-app-nav { display:none; }
@media(max-width:760px) {
  :root { --app-pad:16px; --app-nav-h:80px; }
  html { scroll-padding-top:76px; background:#f4f7f5; overflow-x:clip; }
  body { padding-bottom:calc(var(--app-nav-h) + env(safe-area-inset-bottom)); background:#f4f7f5; color:var(--navy); font-size:16px; overflow-x:clip; }
  body .wrap,.zg-ref-wrap { padding-inline:var(--app-pad); }

  .zg-header { height:62px; border:0; box-shadow:0 1px 0 rgba(7,21,47,.08); }
  .zg-header-inner { height:62px; padding:0 16px; }
  .zg-brand-sun { width:38px; height:38px; }
  .zg-brand b { font-size:23px; letter-spacing:-1px; }
  .zg-brand small,.zg-header .zg-menu,.zg-search-open { display:none; }
  .zg-header::after { content:"Onafhankelijk"; position:absolute; right:16px; top:20px; padding:5px 9px; border-radius:999px; background:var(--green-soft); color:var(--green-dark); font-size:9px; font-weight:800; letter-spacing:.04em; white-space:nowrap; }

  .zg-app-nav { position:fixed; z-index:1000; display:grid; grid-template-columns:repeat(4,1fr); left:10px; right:10px; bottom:calc(8px + env(safe-area-inset-bottom)); height:64px; padding:5px 7px; border:1px solid rgba(7,21,47,.09); border-radius:20px; background:rgba(255,255,255,.96); box-shadow:0 12px 35px rgba(7,21,47,.18); backdrop-filter:blur(18px); }
  .zg-app-nav a,.zg-app-nav button { display:flex; min-width:0; min-height:48px; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:4px 2px; border:0; border-radius:14px; background:transparent; color:#718096; font:700 10px/1.1 var(--sans); text-decoration:none; -webkit-tap-highlight-color:transparent; }
  .zg-app-nav svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
  .zg-app-nav [aria-current=page] { background:var(--green-soft); color:var(--green-dark); }
  .zg-app-nav :where(a,button):focus-visible { outline:3px solid var(--green-dark); outline-offset:-3px; }
  .zg-app-nav :where(a,button):active { transform:scale(.94); }

  .zg-ref-hero { width:auto!important; max-width:calc(100% - 20px); min-height:0; margin:10px; padding:0 0 247px; border-radius:26px; background:#eaf6f0; box-shadow:0 12px 30px rgba(7,21,47,.08); }
  .zg-ref-hero-left { padding:26px 18px 24px; }
  .zg-ref-hero h1 { margin:14px 0 16px; font-size:39px; line-height:1.01; }
  .zg-ref-hero .zg-ref-lead { margin-top:0; font-size:15px; line-height:1.48; }
  .zg-ref-btn--cta { height:52px; margin-top:18px; border-radius:15px; }
  .zg-ref-checks { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .zg-ref-checks>span:last-child { grid-column:1/-1; }
  .zg-ref-hero-photo { height:247px; }
  .zg-ref-hero-photo::before { background:linear-gradient(180deg,#eaf6f0 0,transparent 22%); }
  .zg-ref-badge { bottom:174px; left:18px; width:82px; height:82px; font-size:12px; }
  .zg-ref-fcard { display:none; }

  .zg-ref-features { display:flex; width:100%; margin:4px 0 0; padding:16px; gap:12px; overflow-x:auto; border-radius:0; box-shadow:none; scroll-snap-type:x mandatory; scrollbar-width:none; background:#f4f7f5; }
  .zg-ref-features::-webkit-scrollbar,.home-reference .energy-track::-webkit-scrollbar,.home-reference .knowledge-grid::-webkit-scrollbar { display:none; }
  .zg-ref-feat { flex:0 0 82%; min-height:116px; padding:20px; border:1px solid var(--border)!important; border-radius:20px; background:#fff; box-shadow:0 6px 20px rgba(7,21,47,.06); scroll-snap-align:center; }

  .zg-ref-how { margin:0 10px 10px; padding:34px 8px; border-radius:26px; }
  .zg-ref-how h2 { font-size:26px; }
  .zg-ref-step { border:1px solid var(--border); border-radius:18px; box-shadow:none; }

  .home-reference .energy-story,.home-reference .solar-lab,.home-reference .calculator-stage,.home-reference .trust-stage,.home-reference .knowledge-stage,.home-reference .latest-stage,.home-reference .final-stage { margin:10px; padding-block:38px; border-radius:26px; }
  .home-reference .energy-story__head { padding:0 16px; text-align:left; }
  .home-reference .energy-story__head p { font-size:15px; }
  /* "Volg één foton": compact vertical list — number beside each explanation, no horizontal scroll. */
  .home-reference .energy-track { display:flex; flex-direction:column; width:auto; padding:0 16px; gap:10px; overflow:visible; scroll-snap-type:none; }
  .home-reference .energy-step { flex:0 0 auto; width:auto; display:flex; align-items:flex-start; gap:12px; padding:16px; border-radius:16px; box-shadow:none; scroll-snap-align:none; }
  .home-reference .energy-step>span { flex:none; margin:0; min-width:1.6em; font-size:14px; font-weight:800; color:var(--green-dark); }
  .home-reference .energy-step>div { min-width:0; }
  .home-reference .energy-step h3 { margin:0 0 3px; font-size:16px; }
  .home-reference .energy-step p { font-size:13.5px; line-height:1.5; }
  .home-reference .energy-step>i { display:none; }
  .home-reference .calculator-stage__grid { margin-inline:16px; width:auto; padding:28px 22px; border-radius:20px; }
  .home-reference .trust-list { gap:12px; }
  .home-reference .trust-list article { padding:20px; border-radius:18px; box-shadow:none; }
  .home-reference .knowledge-head { padding-inline:2px; }
  /* "Knowledge system": full-width rows — small image left, wrapping title right, arrow in its own column. */
  .home-reference .knowledge-grid { display:flex; flex-direction:column; gap:10px; overflow:visible; scroll-snap-type:none; }
  .home-reference .knowledge-card { flex:0 0 auto; width:auto; display:grid; grid-template-columns:64px minmax(0,1fr) auto; grid-template-rows:auto auto; column-gap:12px; align-items:center; padding:10px; border-radius:16px; box-shadow:none; scroll-snap-align:none; overflow:hidden; }
  .home-reference .knowledge-card__media { grid-column:1; grid-row:1 / 3; width:64px; height:64px; border-radius:12px; overflow:hidden; }
  .home-reference .knowledge-card>span { grid-column:2; grid-row:1; align-self:end; padding:0; font-size:11px; }
  .home-reference .knowledge-card h3 { grid-column:2; grid-row:2; align-self:start; margin:2px 0 0; font-size:15px; line-height:1.3; }
  .home-reference .knowledge-card>b { position:static; grid-column:3; grid-row:1 / 3; align-self:center; margin:0; font-size:18px; }
  .home-reference .latest-editorial { gap:12px; }
  .home-reference .latest-editorial>a { padding:20px; border-radius:18px; box-shadow:none; }
  .home-reference .roof-scanner--photo { height:245px; border-radius:20px; }

  body .article-head,body.category-editorial .article-head,body.about-editorial .article-head,body.calculator-cinematic .article-head { margin:10px; padding:25px 6px 27px; border-radius:24px; }
  body .article-head h1,body.category-editorial .article-head h1,body.about-editorial .article-head h1,body.calculator-cinematic .article-head h1,body.article-redesign .article-head h1 { font-size:34px; }
  body.page-overview .article-head { min-height:320px; padding-bottom:120px; }
  body .article-layout { padding:0 10px; }
  body .article-main,body .article-sidebar>.side-card,body .card,body .zg-calc { border-radius:22px; }
  body .article-main { padding:18px 16px; background:#fff; }
  body .prose { font-size:17px; line-height:1.7; }
  body .prose h2 { font-size:27px; scroll-margin-top:76px; }
  body .prose h3 { scroll-margin-top:76px; }
  /* Wide tables scroll inside their own container; the page never moves. */
  body .prose .table-scroll { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; max-width:100%; border:1px solid var(--border); border-radius:14px; }
  body .prose .table-scroll table { margin:0; min-width:520px; width:100%; white-space:normal; }
  body .prose table:not(.table-scroll table) { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; max-width:100%; white-space:normal; border-radius:14px; }
  body .prose :where(.table-scroll,table) th,body .prose :where(.table-scroll,table) td { white-space:normal; }
  body .toc,body .takeaways,body .inline-cta,body .notice { border-radius:18px; padding:18px; }
  /* Consent UI clears the fixed bottom navigation, stays compact, never
     swallows the viewport, and scrolls internally on very small screens. */
  body .consent-banner { left:10px; right:10px; bottom:calc(var(--app-nav-h) + 8px + env(safe-area-inset-bottom)); max-width:none; border-radius:18px; padding:14px 16px; max-height:min(60vh,420px); overflow-y:auto; overscroll-behavior:contain; }
  body .consent-banner p { margin:0 0 6px; font-size:14px; }
  body .consent-banner div { flex-wrap:wrap; align-items:stretch; gap:8px; margin-top:10px; }
  body .consent-banner .btn { flex:1 1 auto; min-height:46px; white-space:nowrap; padding-inline:14px; }
  body .consent-banner div a { flex:1 1 100%; text-align:center; padding-top:2px; }
  body .grid--3 { gap:14px; }
  body .card { box-shadow:0 6px 20px rgba(7,21,47,.06); }
  body .card-media { aspect-ratio:1.55; }
  body .zg-calc__panel,body.calculator-cinematic .zg-calc__panel { padding:18px 16px; }
  body .zg-calc__progress { overflow-x:auto; scrollbar-width:none; }
  body .site-footer { margin-top:10px; padding-bottom:30px; }
  body .footer-grid { grid-template-columns:1fr; }
  body .footer-grid>div:first-child { grid-column:auto; }
  .zg-search-dialog { width:calc(100% - 20px); max-height:calc(100dvh - 92px); margin:10px auto auto; padding:20px 16px; border-radius:24px; }
}

/* Roof direction: photographic, practical and consistent with the reference site. */
.home-reference .roof-direction { padding:88px 0; background:#fff; }
.home-reference .roof-direction__grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr); gap:72px; align-items:center; }
.home-reference .roof-direction__copy { max-width:650px; }
.home-reference .roof-direction__copy h2 { margin:14px 0 18px; font-size:48px; line-height:1.04; }
.home-reference .roof-direction__copy>p:last-of-type { margin:0 0 30px; max-width:570px; font-size:18px; line-height:1.6; }
.home-reference .roof-direction__tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.home-reference .roof-direction__tabs button { min-height:86px; display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; column-gap:8px; align-items:center; text-align:left; padding:13px 14px; border:1px solid #dce5ec; border-radius:15px; background:#fff; color:var(--navy); font:700 14px/1.2 var(--sans); cursor:pointer; box-shadow:0 5px 16px rgba(7,21,47,.04); }
.home-reference .roof-direction__tabs button>span { grid-row:1/3; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--blue-soft); color:var(--green-dark); font-size:18px; }
.home-reference .roof-direction__tabs button small { color:var(--muted); font-size:11px; font-weight:500; }
.home-reference .roof-direction__tabs button[aria-pressed="true"] { border:2px solid var(--green); background:var(--green-soft); padding:12px 13px; box-shadow:0 8px 24px rgba(21,163,74,.12); }
.home-reference .roof-direction__tabs button[aria-pressed="true"]>span { background:var(--green); color:#fff; }
.home-reference .roof-direction__visual { position:relative; min-height:500px; overflow:hidden; border-radius:24px; background:var(--blue-soft); box-shadow:0 18px 45px rgba(7,21,47,.12); }
.home-reference .roof-direction__visual>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:55% center; }
.home-reference .roof-direction__visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(7,21,47,.62)); pointer-events:none; }
.home-reference .roof-direction__result { position:absolute; z-index:2; left:24px; bottom:24px; width:310px; padding:20px 22px; border-radius:18px; background:rgba(255,255,255,.96); box-shadow:var(--shadow); }
.home-reference .roof-direction__result>span { display:block; color:var(--muted); font-size:13px; }
.home-reference .roof-direction__result strong { display:block; margin:3px 0 13px; color:var(--green-dark); font-size:34px; line-height:1.1; }
.home-reference .roof-direction__result>div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--border); }
.home-reference .roof-direction__result b { color:var(--navy); font-size:14px; }
.home-reference .roof-direction__result small { color:var(--muted); font-size:11px; }
.home-reference .roof-direction__cta { position:absolute; z-index:2; right:24px; bottom:24px; min-height:50px; display:flex; align-items:center; gap:12px; padding:0 20px; border-radius:12px; background:var(--green-dark); color:#fff; text-decoration:none; font-size:14px; font-weight:700; }
@media(max-width:1050px) {
  .home-reference .roof-direction__grid { grid-template-columns:1fr; gap:36px; }
  .home-reference .roof-direction__copy { max-width:none; }
  .home-reference .roof-direction__visual { min-height:470px; }
}
@media(max-width:760px) {
  .home-reference .roof-direction { padding:52px 0; }
  .home-reference .roof-direction__grid { gap:28px; }
  .home-reference .roof-direction__copy h2 { font-size:36px; }
  .home-reference .roof-direction__copy>p:last-of-type { font-size:16px; margin-bottom:22px; }
  .home-reference .roof-direction__tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .home-reference .roof-direction__tabs button { min-height:74px; padding:10px; font-size:13px; }
  .home-reference .roof-direction__tabs button[aria-pressed="true"] { padding:9px; }
  .home-reference .roof-direction__visual { min-height:430px; border-radius:20px; }
  .home-reference .roof-direction__result { left:14px; right:14px; bottom:76px; width:auto; padding:16px 18px; }
  .home-reference .roof-direction__result strong { font-size:29px; }
  .home-reference .roof-direction__cta { left:14px; right:14px; bottom:14px; justify-content:center; }
}