/* ===========================================================================
   Design 12 — Fresh Mint (duotone)
   Deep teal + mint + peach. Modern, clean, rounded; two-column hero, no waves.
   Schibsted Grotesk display · Figtree body. Duotone illustrations.
   =========================================================================== */
:root {
  --bg:#eef7f2; --panel:#ffffff; --tint:#e3f3ec;
  --teal:#1f6f63; --teal-dk:#16524a; --mint:#cdeee2; --peach:#ef9d76; --peach-dk:#d87f55;
  --ink:#1d3a34; --ink-soft:#577a72; --line:#d2e8df;
  --r:18px; --r-sm:12px;
  --shadow:0 16px 34px -22px rgba(22,82,74,.3); --shadow-lg:0 28px 56px -24px rgba(22,82,74,.4);
  --maxw:1140px; --fd:"Schibsted Grotesk", system-ui, sans-serif; --fb:"Figtree", system-ui, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; font-family:var(--fb); color:var(--ink); background:var(--bg); line-height:1.65; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--fd); color:var(--ink); line-height:1.08; margin:0 0 .4em; font-weight:700; letter-spacing:-.01em; }
p { margin:0 0 1rem; }
a { color:var(--teal-dk); text-decoration:none; }
img { display:block; max-width:100%; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.narrow { max-width:780px; }
.accent { color:var(--peach-dk); }
.skip { position:absolute; left:-999px; }
.skip:focus { left:16px; top:12px; z-index:100; background:var(--teal); color:#fff; padding:8px 14px; border-radius:10px; }
.wave { display:none; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--fb); font-weight:700; font-size:.96rem; padding:.8rem 1.5rem; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .2s, background .2s; white-space:nowrap; }
.btn-lg { padding:.98rem 1.9rem; font-size:1.04rem; }
.btn-primary { background:var(--teal); color:#fff; box-shadow:0 12px 26px -12px rgba(31,111,99,.6); }
.btn-primary:hover { background:var(--teal-dk); transform:translateY(-2px); }
.btn-ghost { background:#fff; color:var(--teal-dk); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--teal); transform:translateY(-2px); }
.btn-light { background:#fff; color:var(--teal-dk); }
.btn-light:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }

.site-header { position:sticky; top:0; z-index:50; background:rgba(238,247,242,.92); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:box-shadow .25s,border-color .25s; }
.site-header.is-stuck { box-shadow:0 8px 26px -20px rgba(22,82,74,.5); border-color:var(--line); }
.header-inner { display:flex; align-items:center; gap:1.25rem; height:78px; }
.brand-logo { height:46px; width:auto; display:block; }
.brand-logo-footer { height:116px; width:auto; margin-bottom:.8rem; }
.nav { margin-left:auto; display:flex; align-items:center; gap:1.6rem; }
.nav a { color:var(--ink); font-weight:600; font-size:.95rem; }
.nav a:hover { color:var(--teal); }
.nav .nav-cta { display:none; }
.header-call { margin-left:1rem; }
.nav-toggle { display:none; }

/* hero: two-column */
.hero { background:linear-gradient(180deg,var(--bg),#fff); padding:clamp(2.5rem,6vw,5rem) 0; }
.hero-inner { display:grid; grid-template-columns:1.02fr .98fr; column-gap:clamp(2rem,5vw,4rem); align-items:center; text-align:left; }
.hero-inner > * { grid-column:1; max-width:560px; }
.hero-img { grid-column:2 !important; grid-row:1 / -1; align-self:center; max-width:none !important; margin:0; border-radius:var(--r); box-shadow:var(--shadow-lg); }
.eyebrow { display:inline-block; font-weight:700; font-size:.8rem; color:var(--teal-dk); background:var(--mint); padding:.4rem 1rem; border-radius:999px; margin-bottom:1.2rem; }
.hero h1 { font-size:clamp(2.4rem,5vw,4rem); }
.hero .lead { font-size:clamp(1.05rem,2vw,1.28rem); color:var(--ink-soft); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin:1.5rem 0 1.4rem; }
.hero-trust { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; color:var(--ink-soft); font-weight:600; font-size:.9rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.hero-trust span:first-child { color:var(--peach-dk); }

.section { padding:clamp(3rem,7vw,5.5rem) 0; }
.section-tint { background:var(--tint); }
.section-head { max-width:660px; margin:0 auto clamp(2rem,4vw,3rem); text-align:center; }
.kicker { font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; color:var(--teal); margin:0 0 .6rem; }
h2 { font-size:clamp(1.9rem,3.7vw,2.8rem); }
.section-sub { color:var(--ink-soft); font-size:1.06rem; }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1.9rem 1.7rem; box-shadow:var(--shadow); transition:transform .18s,box-shadow .2s; }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.card-icon { display:inline-grid; place-content:center; width:58px; height:58px; border-radius:16px; color:#fff; margin-bottom:1rem; background:var(--teal); }
.card-icon.i2 { background:var(--peach); } .card-icon.i3 { background:var(--teal-dk); }
.card-icon svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.card h3 { font-size:1.25rem; }
.card p { margin:0; color:var(--ink-soft); }

.ba-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.ba { --pos:50%; position:relative; aspect-ratio:3/2; overflow:hidden; border-radius:var(--r); box-shadow:var(--shadow); margin:0; background:var(--mint); }
.ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba-before { position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle { position:absolute; top:0; bottom:0; left:var(--pos); width:3px; background:#fff; transform:translateX(-50%); pointer-events:none; box-shadow:0 0 0 1px rgba(22,82,74,.15); }
.ba-handle::after { content:"⇄"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; background:#fff; color:var(--teal); border-radius:50%; display:grid; place-content:center; box-shadow:var(--shadow); }
.ba-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ba-tag { position:absolute; top:12px; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(22,82,74,.8); padding:.22rem .58rem; border-radius:999px; pointer-events:none; }
.ba-before-tag { left:12px; } .ba-after-tag { right:12px; background:var(--peach-dk); }
.ba figcaption { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(22,82,74,.82)); color:#fff; font-weight:600; padding:1.5rem .9rem .6rem; font-size:.88rem; }
.work-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.3rem; }
.work-grid img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-sm); box-shadow:var(--shadow); transition:transform .18s; }
.work-grid img:hover { transform:translateY(-4px); }

.areas-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.area-list { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.area-list li { background:#fff; border:1px solid var(--line); border-radius:999px; padding:.55rem 1.1rem; font-weight:600; color:var(--teal-dk); }
.area-list li::before { content:"•"; color:var(--peach-dk); margin-right:.4rem; font-weight:800; }

.reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
.review { margin:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:1.9rem; box-shadow:var(--shadow); }
.stars { color:var(--peach-dk); letter-spacing:.1em; font-size:1.05rem; margin-bottom:.7rem; }
.review p { font-size:1.06rem; color:var(--ink); }
.review cite { display:block; margin-top:1rem; font-style:normal; font-weight:700; color:var(--teal-dk); font-size:.9rem; }

.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact-list { list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:0; }
.contact-list li { display:grid; grid-template-columns:70px 1fr; align-items:baseline; gap:1rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
.ci-label { font-weight:700; text-transform:uppercase; font-size:.7rem; letter-spacing:.08em; color:var(--teal); }
.ci-value { font-weight:600; color:var(--teal-dk); }
a.ci-value:hover { color:var(--peach-dk); }
.estimate { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.3rem); box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { display:flex; flex-direction:column; gap:.35rem; }
.field-full { grid-column:1/-1; }
.estimate label { font-weight:700; font-size:.82rem; color:var(--ink-soft); }
.estimate input,.estimate select,.estimate textarea { font:inherit; padding:.72rem .9rem; border:1.5px solid var(--line); border-radius:12px; background:var(--bg); color:var(--ink); width:100%; }
.estimate input:focus,.estimate select:focus,.estimate textarea:focus { outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,111,99,.16); }
.estimate .btn { grid-column:1/-1; }
.form-note { grid-column:1/-1; margin:0; color:var(--teal-dk); font-weight:700; }
.form-fineprint { grid-column:1/-1; margin:0; font-size:.82rem; color:var(--ink-soft); }

.faq { display:grid; gap:.8rem; }
.faq-item { background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.faq-q { width:100%; text-align:left; background:none; border:0; cursor:pointer; font-family:var(--fd); font-size:1.12rem; font-weight:700; color:var(--ink); padding:1.1rem 1.3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq-i { position:relative; flex:none; width:18px; height:18px; }
.faq-i::before,.faq-i::after { content:""; position:absolute; background:var(--teal); border-radius:2px; transition:transform .2s; }
.faq-i::before { top:8px; left:0; width:18px; height:2px; }
.faq-i::after { top:0; left:8px; width:2px; height:18px; }
.faq-q[aria-expanded="true"] .faq-i::after { transform:scaleY(0); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .28s ease; }
.faq-a p { margin:0; padding:0 1.3rem 1.2rem; color:var(--ink-soft); }

.cta-band { background:linear-gradient(120deg,var(--teal),#2c8f80); color:#fff; }
.cta-inner { text-align:center; padding:clamp(2.8rem,6vw,4.6rem) 0; }
.cta-band h2 { color:#fff; font-size:clamp(2rem,4vw,2.9rem); }
.cta-band p { color:rgba(255,255,255,.92); font-size:1.15rem; margin-bottom:1.6rem; }

.site-footer { background:var(--teal-dk); color:#bfdcd4; padding:clamp(2.5rem,5vw,3.5rem) 0 1.5rem; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.footer-meta { color:#88aaa2; font-size:.9rem; }
.site-footer h4 { color:#fff; font-family:var(--fd); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.8rem; }
.site-footer a { color:#bfdcd4; }
.site-footer a:hover { color:#fff; }
.site-footer p { margin:.3rem 0; }
.footer-areas { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:.25rem .8rem; color:#bfdcd4; font-size:.92rem; }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.14); margin-top:2.5rem; padding-top:1.4rem; font-size:.86rem; color:#88aaa2; }

[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity:1; transform:none; }

@media (max-width:900px) {
  .cards,.ba-grid,.work-grid,.reviews { grid-template-columns:repeat(2,1fr); }
  .hero-inner,.areas-grid,.contact-grid { grid-template-columns:1fr; }
  .hero-inner > *, .hero-img { grid-column:1 !important; max-width:none; }
  .hero-img { grid-row:auto; order:-1; margin-bottom:1.5rem; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .header-call { display:none; }
  .nav { position:fixed; inset:78px 0 auto 0; flex-direction:column; align-items:stretch; background:#fff; border-bottom:1px solid var(--line); padding:1rem 24px 1.4rem; gap:.1rem; transform:translateY(-130%); transition:transform .3s ease; box-shadow:var(--shadow-lg); }
  body.nav-open .nav { transform:none; }
  .nav a { padding:.8rem 0; border-bottom:1px solid var(--line); }
  .nav .nav-cta { display:block; color:var(--teal); }
  .nav-toggle { display:inline-flex; flex-direction:column; justify-content:center; gap:5px; margin-left:auto; width:46px; height:46px; background:none; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
  .nav-toggle span { display:block; width:22px; height:2px; background:var(--teal-dk); margin:0 auto; transition:transform .25s,opacity .2s; }
  body.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
}
@media (max-width:560px) {
  .cards,.ba-grid,.work-grid,.reviews,.area-list,.footer-grid,.estimate { grid-template-columns:1fr; }
  .footer-bottom { justify-content:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } [data-reveal] { opacity:1; transform:none; transition:none; } }