:root{
  --bg:#f6f3ee;
  --bg-2:#efe7da;
  --panel:#ffffff;
  --panel-soft:#fbf8f3;
  --line:#ded6ca;
  --line-strong:#cbbfb0;
  --text:#1f252c;
  --muted:#5b646d;
  --muted-soft:#7f8a95;
  --accent:#6da7ca;
  --accent-2:#98cdb3;
  --accent-3:#f2c472;
  --accent-4:#f09d91;
  --shadow:0 24px 60px rgba(31,37,44,.08);
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;
  --container:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(109,167,202,.10), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(152,205,179,.18), transparent 24%),
    linear-gradient(180deg, #faf8f3 0%, var(--bg) 44%, #f3ede3 100%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--container), calc(100% - 2rem)); margin:0 auto}
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:999px;
  border:1px solid rgba(31,37,44,.08); background:rgba(255,255,255,.72);
  box-shadow:0 8px 30px rgba(31,37,44,.04);
  font-size:.86rem; font-weight:700; color:#456177;
}
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(246,243,238,.78);
  border-bottom:1px solid rgba(109,108,105,.12);
  backdrop-filter: blur(16px);
}
.topbarInner{
  width:min(var(--container), calc(100% - 2rem)); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 0;
}
.brand{
  display:flex; align-items:center; gap:.85rem; min-width:0;
}
.logoBadge{
  width:48px; height:48px; flex:0 0 48px;
  border-radius:18px; padding:.55rem;
  background:linear-gradient(180deg, rgba(109,167,202,.14), rgba(255,255,255,.95));
  border:1px solid rgba(31,37,44,.08);
  box-shadow:0 10px 28px rgba(31,37,44,.06);
}
.logoBadge img{width:100%; height:100%; object-fit:contain}
.brandStack{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.brandWordmark{height:26px; width:auto; max-width:min(48vw, 240px); object-fit:contain; object-position:left center}
.brandSub{font-size:.8rem; color:var(--muted); font-weight:600; letter-spacing:.02em}
.nav{display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; justify-content:flex-end}
.nav a{
  padding:.75rem 1rem; border-radius:999px;
  color:var(--muted); font-weight:700;
}
.nav a:hover{background:rgba(255,255,255,.72); color:var(--text)}
.nav .cta{
  background:var(--text); color:white;
  box-shadow:0 14px 30px rgba(31,37,44,.18);
}
.nav .cta:hover{background:#2b333b; color:white}
.pageWrap{position:relative; overflow:hidden}
.pageWrap::before{
  content:"";
  position:fixed; inset:auto -10rem -2rem auto;
  width:min(50vw, 760px); aspect-ratio:960/760;
  background:url('/assets/gisborne-map.svg') center/contain no-repeat;
  opacity:.10; pointer-events:none; z-index:-1; transform:rotate(-4deg);
}
.hero{
  padding:3.4rem 0 2rem;
  display:grid; grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  gap:1.5rem; align-items:stretch;
}
.heroPanel, .panel{
  background:rgba(255,255,255,.78); border:1px solid rgba(31,37,44,.08);
  border-radius:var(--radius-xl); box-shadow:var(--shadow);
}
.heroMain{
  position:relative; padding:2rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.90), rgba(255,250,245,.92)),
    linear-gradient(180deg, rgba(109,167,202,.08), transparent);
}
.heroMain::after{
  content:""; position:absolute; right:-5rem; top:-4rem; width:14rem; height:14rem;
  background:radial-gradient(circle, rgba(242,196,114,.30), transparent 68%);
  pointer-events:none;
}
.heroWordmark{height:auto; width:min(100%, 540px); margin:1.1rem 0 .7rem}
.heroTitle{font-size:clamp(2.15rem, 5vw, 3.9rem); line-height:1.05; margin:0 0 .9rem; letter-spacing:-.05em}
.lead{font-size:1.06rem; color:var(--muted); max-width:58ch; line-height:1.75}
.buttonRow{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.45rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:1rem 1.2rem; border-radius:16px; border:1px solid rgba(31,37,44,.12);
  background:var(--panel); color:var(--text); font-weight:800; cursor:pointer;
  box-shadow:0 10px 24px rgba(31,37,44,.05);
}
.btn:hover{transform:translateY(-1px); box-shadow:0 16px 30px rgba(31,37,44,.08)}
.btn.primary{background:var(--text); color:#fff; border-color:transparent}
.btn.accent{background:rgba(109,167,202,.14); color:#2f5671; border-color:rgba(109,167,202,.20)}
.pillRow{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.45rem}
.pill{
  display:inline-flex; align-items:center; gap:.45rem; padding:.7rem .95rem; border-radius:999px;
  background:rgba(255,255,255,.78); border:1px solid rgba(31,37,44,.08); color:var(--muted); font-weight:700; font-size:.94rem;
}
.heroSide{
  padding:1rem; display:grid; gap:1rem;
  background:
    linear-gradient(180deg, rgba(109,167,202,.12), rgba(152,205,179,.10) 36%, rgba(255,255,255,.95));
}
.portraitCard{
  position:relative; min-height:420px; border-radius:26px; overflow:hidden;
  background:linear-gradient(180deg, rgba(109,167,202,.16), rgba(255,255,255,.74) 44%, rgba(255,255,255,.95));
  border:1px solid rgba(31,37,44,.08);
}
.portraitCard::before{
  content:""; position:absolute; inset:1rem 1rem auto auto; width:180px; height:180px;
  background:radial-gradient(circle, rgba(152,205,179,.45), transparent 65%);
}
.portraitCard img{
  position:absolute; inset:auto 50% 0 auto; transform:translateX(32%); max-height:102%; width:auto;
}
.portraitNote{
  position:absolute; left:1rem; right:1rem; bottom:1rem;
  background:rgba(255,255,255,.85); border:1px solid rgba(31,37,44,.08);
  border-radius:20px; padding:1rem; backdrop-filter:blur(10px);
}
.portraitNote strong{display:block; margin-bottom:.25rem}
.portraitNote p{margin:0; color:var(--muted); line-height:1.6; font-size:.95rem}
.sideGrid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.miniCard{
  padding:1rem 1rem 1.1rem; border-radius:22px; border:1px solid rgba(31,37,44,.08);
  background:rgba(255,255,255,.86);
}
.miniCard.accentBlue{background:rgba(109,167,202,.13)}
.miniCard.accentGreen{background:rgba(152,205,179,.18)}
.miniCard strong{display:block; margin-bottom:.3rem; font-size:1.02rem}
.miniCard span{color:var(--muted); line-height:1.55; font-size:.95rem}
.section{padding:1rem 0 0}
.sectionHead{display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.sectionHead h2, .panel h2{font-size:clamp(1.7rem, 4vw, 2.5rem); margin:0 0 .45rem; letter-spacing:-.04em}
.sectionHead p, .panel p{color:var(--muted); line-height:1.75}
.split{display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(280px, .9fr); gap:1.3rem}
.panel{padding:1.6rem}
.serviceGrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem}
.serviceCard{
  padding:1.1rem; border-radius:22px; border:1px solid rgba(31,37,44,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,242,.92));
}
.serviceCard h3{margin:.2rem 0 .35rem; font-size:1.05rem}
.serviceCard p{margin:0; font-size:.95rem}
.section ul.clean{margin:.2rem 0 0; padding-left:1.1rem; color:var(--muted)}
.section ul.clean li{margin:.6rem 0; line-height:1.7}
.callout{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(109,167,202,.14), rgba(255,255,255,.92));
}
.callout::after{content:""; position:absolute; inset:auto -2rem -4rem auto; width:10rem; height:10rem; background:radial-gradient(circle, rgba(242,196,114,.34), transparent 68%)}
.stepGrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:1rem}
.step{padding:1.2rem; border-radius:22px; border:1px solid rgba(31,37,44,.08); background:var(--panel-soft)}
.stepNum{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--text); color:#fff; font-weight:900; margin-bottom:.85rem}
.step h3{margin:0 0 .35rem; font-size:1.04rem}
.quoteGrid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:1.3rem}
.mapCard{
  min-height:240px; border-radius:26px; border:1px solid rgba(31,37,44,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.86)),
    url('/assets/gisborne-map.svg') center/cover no-repeat;
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.2rem;
}
.mapCard h3{margin:0 0 .35rem}
.quoteForm .row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.quoteForm label{display:block; margin:.95rem 0 .38rem; font-size:.94rem; font-weight:700; color:#38424d}
.quoteForm input, .quoteForm textarea{
  width:100%; padding:1rem; border-radius:16px; border:1px solid rgba(31,37,44,.14);
  background:#fff; color:var(--text); font:inherit; outline:none;
}
.quoteForm input:focus, .quoteForm textarea:focus{border-color:rgba(109,167,202,.65); box-shadow:0 0 0 4px rgba(109,167,202,.12)}
.quoteForm textarea{min-height:145px; resize:vertical}
.small{font-size:.92rem; color:var(--muted-soft); line-height:1.7}
.checkRow{display:flex; gap:.7rem; align-items:flex-start; margin-top:.9rem}
.checkRow input{width:auto; margin-top:.3rem}
.chips{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1rem}
.chipBtn, .chip{
  border:1px solid rgba(31,37,44,.08); background:rgba(255,255,255,.84); color:#39434d;
  padding:.75rem 1rem; border-radius:999px; font-weight:700; cursor:pointer;
}
.chipBtn:hover, .chip:hover{background:rgba(109,167,202,.12)}
.chip.active{background:rgba(109,167,202,.18); border-color:rgba(109,167,202,.32)}
.footer{padding:2rem 0 3rem; color:var(--muted); font-size:.95rem}
.footerInner{
  background:rgba(255,255,255,.76); border:1px solid rgba(31,37,44,.08); border-radius:24px; padding:1.2rem 1.4rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.toast{
  position:fixed; right:1rem; bottom:1rem; z-index:50; max-width:360px;
  padding:1rem 1.1rem; border-radius:18px; background:#1f252c; color:#fff;
  box-shadow:0 18px 40px rgba(31,37,44,.24); opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.toast.show{opacity:1; transform:translateY(0)}
.hp{position:absolute;left:-9999px;top:-9999px}
.list{display:grid; gap:1rem; margin-top:1rem}
.reportCard{padding:1.2rem; border-radius:24px; border:1px solid rgba(31,37,44,.08); background:rgba(255,255,255,.84)}
.reportCard h2{font-size:1.2rem; margin:0 0 .4rem}
.reportMeta{color:var(--muted-soft); font-size:.9rem; margin-bottom:.8rem}
.reportTags{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem}
.reportTag{padding:.45rem .7rem; font-size:.82rem; border-radius:999px; background:rgba(109,167,202,.12); color:#486880; font-weight:700}
.searchRow{display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:space-between}
.searchWrap{flex:1 1 320px}
.searchWrap input{width:100%; padding:1rem; border-radius:16px; border:1px solid rgba(31,37,44,.14)}
.empty{padding:1.2rem; border-radius:18px; border:1px dashed rgba(31,37,44,.18); color:var(--muted)}
.reportHero{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:1rem}
.gallery{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.mediaCard{padding:1rem; border-radius:22px; background:rgba(255,255,255,.84); border:1px solid rgba(31,37,44,.08)}
.mediaCard img{border-radius:16px; margin-top:.75rem; width:100%; object-fit:cover}
.aboutGrid{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:1.3rem; align-items:start}
.interestGrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:1rem}
.interestCard{padding:1.15rem; border-radius:22px; border:1px solid rgba(31,37,44,.08); background:rgba(255,255,255,.84)}
.interestCard h3{margin:.2rem 0 .35rem; font-size:1.02rem}
.interestCard p{margin:0; font-size:.95rem}
.highlight{
  background:linear-gradient(135deg, rgba(152,205,179,.20), rgba(255,255,255,.90));
}
@media (max-width:980px){
  .hero,.split,.quoteGrid,.aboutGrid,.reportHero{grid-template-columns:1fr}
  .serviceGrid,.stepGrid,.interestGrid{grid-template-columns:1fr 1fr}
  .pageWrap::before{width:min(80vw, 560px); opacity:.08}
}
@media (max-width:680px){
  .topbarInner{align-items:flex-start; flex-direction:column}
  .nav{width:100%; justify-content:flex-start}
  .heroMain,.heroSide,.panel{padding:1.2rem}
  .serviceGrid,.stepGrid,.interestGrid,.gallery,.quoteForm .row,.sideGrid{grid-template-columns:1fr}
  .heroTitle{font-size:2.2rem}
  .brandWordmark{max-width:70vw}
}