/* New homepage (?home=true). Scoped so the live homepage stays untouched. */
.ss-home{
  --ss-ink:#161616;
  --ss-green:#86BC25;
  --ss-green-deep:#163221;
  --ss-lime:#c6ee73;
  --ss-paper:#f3f6ef;
  --ss-muted:#5d675e;
  color:var(--ss-ink);
  background:#fff;
}
.ss-home *{box-sizing:border-box;}
.ss-home img{max-width:100%;}
.ss-home h1,
.ss-home h2,
.ss-home h3,
.ss-home .rc-question{
  font-family:inherit;
  text-transform:none;
}

.ss-home .ss-kicker{
  margin:0 0 8px;
  color:var(--ss-lime);
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ss-home .ss-kicker-dark{color:#4f7a12;}
.ss-home .ss-lead{
  max-width:38em;
  margin:0 0 22px;
  color:rgba(255,255,255,.82);
  font-size:17px;
  line-height:1.5;
}
.ss-home .ss-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:26px;
}
.ss-home .ss-head h2{
  margin:0;
  color:var(--ss-ink);
  font-size:clamp(28px, 3vw, 40px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.08;
}
.ss-home .ss-textlink{
  color:var(--ss-ink);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--ss-green);
  white-space:nowrap;
}
.ss-home .ss-textlink:hover{color:#3d6b0c;}
.ss-home .ss-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border-radius:999px;
  background:var(--ss-green);
  color:#14210a;
  font-weight:700;
  text-decoration:none;
  transition:background .2s ease, transform .2s ease;
}
.ss-home .ss-btn:hover{background:#78ab1d;color:#14210a;}
.ss-home .ss-btn-light{background:#fff;color:var(--ss-ink);}
.ss-home .ss-btn-light:hover{background:#f3f6ef;color:var(--ss-ink);}

.ss-home .ss-section{padding:72px 0 8px;}
.ss-home .ss-section-tight{padding-top:36px;}
.ss-home .ss-section-paper{
  margin-top:64px;
  padding:64px 0;
  background:var(--ss-paper);
}

/* Hero: film left, roof checker right */
.ss-home .ss-hero{
  background:
    radial-gradient(820px 380px at 12% 0%, rgba(134,188,37,.28), transparent 62%),
    linear-gradient(180deg, #102416 0%, #1b3a26 100%);
  padding:48px 0 72px;
}
.ss-home .ss-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(300px,.9fr);
  gap:36px;
  align-items:stretch;
}
.ss-home .ss-hero-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.ss-home .ss-hero h1{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(36px, 4.4vw, 58px);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.02;
}
.ss-home .ss-hero-video{
  position:relative;
  margin-top:auto;
  overflow:hidden;
  border-radius:18px;
  background:#0b1a10;
  aspect-ratio:16/9;
  box-shadow:0 22px 50px rgba(0,0,0,.28);
}
.ss-home .ss-hero-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.ss-home .ss-hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:16px 0 0;
  padding:0;
  list-style:none;
  color:rgba(255,255,255,.88);
  font-size:14px;
  font-weight:600;
}
.ss-home .ss-hero-points b{color:var(--ss-lime);}

.ss-home .ss-hero-side{min-width:0;}
.ss-home .ss-hero .roof-checker-wrap{
  max-width:none;
  width:auto;
  height:100%;
  margin:0;
  padding:0;
}
.ss-home .ss-hero .roof-checker{
  max-width:none;
  height:100%;
  padding:26px 24px 22px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
}
.ss-home .ss-hero .rc-head{margin-bottom:14px;}
.ss-home .ss-hero .rc-title{font-size:24px;letter-spacing:-.02em;}
.ss-home .ss-hero .rc-progress{margin-bottom:18px;}
.ss-home .ss-hero .rc-question{font-size:17px;margin-bottom:12px;}
.ss-home .ss-hero .rc-opt span{min-height:46px;padding:8px 16px;font-size:15px;}
.ss-home .ss-hero .rc-step{margin-bottom:0;}

/* Trust strip, sits on the hero edge */
.ss-home .ss-usps{margin-top:-36px;position:relative;z-index:2;}
.ss-home .ss-usps-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
  background:#fff;
  border-radius:18px;
  box-shadow:0 14px 40px rgba(16,36,22,.08);
}
.ss-home .ss-usps-row li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:22px 20px;
}
.ss-home .ss-usps-row li + li{box-shadow:inset 1px 0 0 #e6ece4;}
.ss-home .ss-usps-row strong{display:block;font-size:15px;line-height:1.3;}
.ss-home .ss-usps-row span{display:block;margin-top:3px;color:var(--ss-muted);font-size:13px;line-height:1.4;}
.ss-home .ss-usp-mark{
  flex:0 0 10px;
  width:10px;
  height:10px;
  margin-top:4px;
  border-radius:50%;
  background:var(--ss-green);
}

/* Two paths */
.ss-home .ss-paths{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.ss-home .ss-path{
  position:relative;
  display:flex;
  min-height:420px;
  overflow:hidden;
  border-radius:22px;
  color:#fff;
}
.ss-home .ss-path img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.16) contrast(1.05);
  transform:scale(1.02);
  transition:transform .6s ease;
}
.ss-home .ss-path:hover img{transform:scale(1.07);}
.ss-home .ss-path-body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width:100%;
  margin-top:auto;
  padding:110px 26px 24px;
  background:linear-gradient(180deg, rgba(12,24,16,0) 0%, rgba(12,24,16,.72) 42%, rgba(12,24,16,.94) 100%);
}
.ss-home .ss-path h3{
  margin:0 0 8px;
  color:#fff;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.03em;
}
.ss-home .ss-path p{margin:0 0 16px;max-width:34em;color:rgba(255,255,255,.9);line-height:1.45;}
.ss-home .ss-path-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;}
.ss-home .ss-path .ss-textlink,
.ss-home .ss-showroom .ss-textlink{color:#fff;border-bottom-color:var(--ss-lime);}
.ss-home .ss-path .ss-textlink:hover{color:#fff;}

/* Roof types */
.ss-home .ss-roofs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.ss-home .ss-roof{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:18px;
  aspect-ratio:4/5;
  color:#fff;
  text-decoration:none;
  background:#d7e3d4;
}
.ss-home .ss-roof img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.18) contrast(1.04);
  transition:transform .55s ease;
}
.ss-home .ss-roof:hover img{transform:scale(1.06);}
.ss-home .ss-roof span{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:56px 16px 16px;
  background:linear-gradient(transparent, rgba(10,24,14,.8));
  color:#fff;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.02em;
}

/* Shop + blog blocks, tightened to match */
.ss-home .ss-shop{padding-top:28px;}
.ss-home .ss-shop .home-products,
.ss-home .ss-stories .home-products{padding-top:20px;padding-bottom:10px;}
.ss-home .home-products .header-title .title,
.ss-home .home-products .header-title .maintitle{
  font-size:clamp(28px, 3vw, 40px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.08;
}
.ss-home .home-products .header-title .subtitle{color:var(--ss-muted);}
.ss-home #blog .blog-article .img-wrap{
  border-radius:16px;
  aspect-ratio:16/10;
  background-size:cover;
  background-position:center;
}
.ss-home #blog .blog-article .meta{padding-top:16px;}

/* Showroom */
.ss-home .ss-showroom{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:520px;
  overflow:hidden;
  border-radius:24px;
  background:var(--ss-green-deep);
  color:#fff;
}
.ss-home .ss-showroom-photo{
  position:relative;
  margin:0;
  min-height:320px;
  background:
    url('https://cdn.webshopapp.com/shops/315695/files/492914539/1200x900x1/organische-vormen.jpg') center/cover no-repeat;
}
.ss-home .ss-showroom-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(1.1) contrast(1.04);
}
.ss-home .ss-showroom-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:40px 36px;
}
.ss-home .ss-showroom h2{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(30px, 3vw, 42px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
}
.ss-home .ss-showroom-copy > p{margin:0 0 16px;color:rgba(255,255,255,.86);line-height:1.5;}
.ss-home .ss-showroom-address{
  font-weight:700;
  color:#fff;
}
.ss-home .ss-hours{
  margin:0 0 22px;
  padding:0;
  list-style:none;
  max-width:320px;
}
.ss-home .ss-hours li{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:8px 0;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:15px;
}
.ss-home .ss-hours li:last-child{border-bottom:1px solid rgba(255,255,255,.16);}

/* Benefits */
.ss-home .ss-benefits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:26px;
}
.ss-home .ss-benefits article{
  padding:22px 20px 8px;
  border-radius:16px;
  background:#fff;
}
.ss-home .ss-benefits h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.02em;
}
.ss-home .ss-benefits p{margin:0;color:var(--ss-muted);line-height:1.45;}

.ss-home .ss-reviews{padding-bottom:20px;}

@media (max-width: 980px){
  .ss-home .ss-hero{padding:32px 0 56px;}
  .ss-home .ss-hero-grid,
  .ss-home .ss-paths,
  .ss-home .ss-roofs,
  .ss-home .ss-showroom,
  .ss-home .ss-benefits,
  .ss-home .ss-usps-row{grid-template-columns:1fr 1fr;}
  .ss-home .ss-usps-row li:nth-child(odd){box-shadow:none;}
  .ss-home .ss-usps-row li:nth-child(n+3){box-shadow:inset 0 1px 0 #e6ece4;}
  .ss-home .ss-showroom-copy{padding:32px 24px;}
  .ss-home .ss-section{padding-top:48px;}
}
@media (max-width: 700px){
  .ss-home .ss-hero-grid,
  .ss-home .ss-paths,
  .ss-home .ss-roofs,
  .ss-home .ss-benefits,
  .ss-home .ss-usps-row,
  .ss-home .ss-head{grid-template-columns:1fr;display:grid;}
  .ss-home .ss-head{align-items:flex-start;}
  .ss-home .ss-usps{margin-top:-28px;}
  .ss-home .ss-usps-row li,
  .ss-home .ss-usps-row li + li{box-shadow:inset 0 1px 0 #e6ece4;}
  .ss-home .ss-usps-row li:first-child{box-shadow:none;}
  .ss-home .ss-path{min-height:360px;}
  .ss-home .ss-roof{aspect-ratio:16/10;}
  .ss-home .ss-hero .roof-checker{padding:20px 16px 16px;}
  .ss-home .ss-hero .rc-title{font-size:20px;}
}
@media (prefers-reduced-motion: reduce){
  .ss-home .ss-path img,
  .ss-home .ss-roof img{transition:none;}
}