/* 4Seasons Heritage Limited — energy site
   Tokens: navy + amber are the brand's existing colours. */
:root{
  --navy:#0B1F33;
  --panel:#12304A;
  --amber:#F2A007;
  --amber-deep:#8A5A00;   /* amber that passes contrast on white */
  --white:#FFFFFF;
  --mist:#F3F5F7;
  --line:#E3E8ED;
  --line-dark:rgba(255,255,255,.14);
  --steel:#5E7183;
  --fog:#A9B8C6;          /* muted text on navy */
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--navy);background:var(--white);-webkit-font-smoothing:antialiased;accent-color:var(--amber)}
::selection{background:var(--amber);color:var(--navy)}
input,textarea,select{caret-color:var(--amber-deep)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-0.02em;line-height:1.05}
p{margin:0}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--navy);padding:10px 14px;font-weight:700;z-index:100}
.skip:focus{left:8px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
@media(max-width:640px){.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy);color:var(--white)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{width:auto;height:44px;flex:none}
.brand .wordmark{height:34px;width:auto;display:block}
.brand .lockup{height:84px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:28px}
.nav a{text-decoration:none;font-size:15px;font-weight:500;color:rgba(255,255,255,.82)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--amber);text-underline-offset:9px}
.nav-toggle{display:none;background:var(--panel);border:0;color:var(--white);border-radius:999px;padding:11px 16px;font:600 15px var(--sans);cursor:pointer}
@media(max-width:960px){
  .nav-toggle{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:72px;background:var(--panel);flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 20px}
  .nav.is-open{display:flex}
  .nav a{padding:15px 4px;font-size:17px}
  .nav a[aria-current="page"]{text-decoration:none;color:var(--amber)}
  .nav .btn{margin-top:14px;text-align:center}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;text-decoration:none;font:700 15px/1 var(--sans);padding:15px 22px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-amber{background:var(--amber);color:var(--navy)}
.btn-amber:hover{background:#FFB627}
.btn-line{border-color:currentColor;background:transparent}
.btn-line:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.on-navy .btn-line:hover{background:var(--white);color:var(--navy);border-color:var(--white)}
.nav .btn,.nav .btn[aria-current="page"]{color:var(--navy);text-decoration:none}

/* ---------- bands ---------- */
.band{padding:112px 0}
.band-tight{padding:72px 0}
.on-navy{background:var(--navy);color:var(--white)}
.on-mist{background:var(--mist)}
@media(max-width:760px){.band{padding:72px 0}.band-tight{padding:56px 0}}

.lede{font-size:20px;line-height:1.5;max-width:58ch}
.muted{color:var(--steel)}
.lede.muted{color:var(--navy)}
.on-navy .muted{color:var(--fog)}
.h-xl{font-size:clamp(44px,7.2vw,104px);font-weight:900;letter-spacing:-0.035em;line-height:.95}
.h-lg{font-size:clamp(32px,3.8vw,52px);font-weight:800;letter-spacing:-0.03em;line-height:1.02}
.h-md{font-size:clamp(28px,2.6vw,36px)}
.h-sm{font-size:28px;letter-spacing:-0.02em;line-height:1.15}
.spec{font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- home hero: full-bleed photo, slogan as headline ---------- */
.hero-photo{position:relative;min-height:min(80vh,700px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-photo>img,.hero-photo>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:-2}
.hero-photo>video{object-position:72% center;background:#020608}
.hero-photo.film::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,6,8,.86) 0,rgba(2,6,8,.62) 38%,rgba(2,6,8,.12) 62%,rgba(2,6,8,0) 80%),linear-gradient(180deg,rgba(2,6,8,0) 55%,rgba(2,6,8,.55) 100%)} /* taste-skill-ignore: film scrim */
.hero-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient( /* taste-skill-ignore: scrim under text on a photo */180deg,rgba(11,31,51,.3) 0%,rgba(11,31,51,.12) 38%,rgba(11,31,51,.9) 100%)}
.hero-photo-body{width:100%;display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:end;padding-top:150px;padding-bottom:56px}
.hero-photo.short{min-height:min(58vh,520px)}
.hero-photo .page-hero{padding-top:120px;padding-bottom:56px;width:100%}
.hero-photo .page-hero .lede{color:rgba(255,255,255,.92)}
.h-hero{font-size:clamp(34px,4.4vw,62px);font-weight:900;letter-spacing:-0.045em;line-height:.88}
.hero-side p{font-size:20px;max-width:40ch;color:rgba(255,255,255,.92)}
.hero-side .form-actions{margin-top:24px}
@media(max-width:860px){.hero-photo>video{object-position:60% center}.hero-photo.film::before{background:linear-gradient( /* taste-skill-ignore: film scrim */180deg,rgba(2,6,8,.35) 0,rgba(2,6,8,.8) 55%,rgba(2,6,8,.9) 100%)}.hero-photo{min-height:0}.hero-photo-body{grid-template-columns:1fr;gap:26px;padding-top:120px;padding-bottom:72px}}

/* ---------- four sources columns ---------- */
.hero-head{padding:56px 24px 36px;display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:end}
.hero-head p{max-width:44ch;color:var(--fog);font-size:19px}
@media(max-width:860px){.hero-head{grid-template-columns:1fr;gap:20px;padding:40px 16px 28px}}
.seasons{display:flex;height:min(64vh,600px);min-height:440px;gap:2px;background:var(--navy)}
.season{position:relative;flex:1 1 0;overflow:hidden;color:var(--white);text-decoration:none;transition:flex-grow .5s cubic-bezier(.2,.7,.2,1)}
.season img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.season::after{content:"";position:absolute;inset:0;background:linear-gradient( /* taste-skill-ignore: scrim under text on a photo */180deg,rgba(11,31,51,.78) 0%,rgba(11,31,51,.12) 32%,rgba(11,31,51,.12) 55%,rgba(11,31,51,.86) 100%)}
.season-body{position:absolute;inset:0;padding:26px 28px 28px;z-index:1;display:flex;flex-direction:column;align-items:flex-start}
.season-body .season-line{margin-top:auto}
.season-name{font-size:clamp(30px,3.4vw,54px);font-weight:900;letter-spacing:-0.035em;line-height:.95;overflow-wrap:anywhere}
.season-line{margin-top:12px;max-width:30ch;font-size:17px;color:rgba(255,255,255,.88);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.season-go{display:inline-block;margin-top:16px;font-weight:700;font-size:15px;color:var(--amber);opacity:0;transition:opacity .35s}
.season:hover,.season:focus-visible{flex-grow:1.9}
.season:hover img,.season:focus-visible img{transform:scale(1.04)}
.season:hover .season-line,.season:focus-visible .season-line,.season:hover .season-go,.season:focus-visible .season-go{opacity:1;transform:none}
.season:focus-visible{outline-offset:-4px}
@media(max-width:820px){
  .seasons{flex-direction:column;height:auto;min-height:0}
  .season{flex:none;height:220px}
  .season:hover,.season:focus-visible{flex-grow:0}
  .season-line{opacity:1;transform:none}
  .season-go{display:none}
  .season{margin-top:2px}
  .season::after{background:linear-gradient( /* taste-skill-ignore: scrim under text on a photo */180deg,rgba(11,31,51,.72),rgba(11,31,51,.6) 50%,rgba(11,31,51,.82))}
}
/* one orchestrated load: columns rise in sequence */
@media(prefers-reduced-motion:no-preference){
  .seasons .season{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  .seasons .season:nth-child(2){animation-delay:.08s}
  .seasons .season:nth-child(3){animation-delay:.16s}
  .seasons .season:nth-child(4){animation-delay:.24s}
}
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){.hero-photo>img{animation:drift 26s cubic-bezier(.2,.6,.2,1) both}}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.07)}}
/* section entrances: parts rise once as a section enters; content is visible without script */
.js .rise{opacity:0;transform:translateY(18px)}
.js .rise.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.btn:active{transform:translateY(1px)}
.strip img,.item img,.row-media img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.strip a:hover img,.item:hover img,.row-media:hover img{transform:scale(1.025)}
@media(prefers-reduced-motion:reduce){.ident-card{display:none}.seasons .season,.hero-photo>img{animation:none}.js .rise{opacity:1;transform:none;transition:none}.season,.season img,.strip img,.item img,.row-media img{transition:none}html{scroll-behavior:auto}}

/* ---------- split statement ---------- */
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:start}
.split .lede{margin-top:4px}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:28px}}

/* ---------- coverage strip (facts, not vanity stats) ---------- */
.cover{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 40px;margin-top:72px;padding-top:28px;border-top:4px solid var(--navy)}
.cover h3{font-size:20px;letter-spacing:-0.015em;line-height:1.25}
.cover p{margin-top:8px;font-size:17px;color:var(--navy)}
@media(max-width:860px){.cover{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cover{grid-template-columns:1fr}}

/* ---------- product index (typographic list) ---------- */
.index{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 40px}
@media(max-width:760px){.index{grid-template-columns:1fr}}
.index a{display:block;padding:18px 22px;margin:0 -22px;border-radius:6px;text-decoration:none;transition:background .15s}
.index a:hover,.index a:focus-visible{background:var(--white)}
.index-name{display:block;font-size:clamp(28px,2.6vw,36px);font-weight:800;letter-spacing:-0.03em;line-height:1.05}
.index-meta{display:block;margin-top:4px;font-size:17px;color:var(--steel)}

/* ---------- media rows (solar, generators) ---------- */
.row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.row+.row{margin-top:96px}
.row.flip .row-media{order:2}
.row-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.row-copy .h-md{margin-bottom:16px}
.row-copy p+p{margin-top:12px}
@media(max-width:860px){.row{grid-template-columns:1fr;gap:24px}.row.flip .row-media{order:0}.row+.row{margin-top:64px}}

.facts{margin:22px 0 0;display:grid;grid-template-columns:auto 1fr;gap:8px 20px}
.facts dt{font-weight:700;font-size:15px}
.facts dd{margin:0;font-size:15px;color:var(--steel)}
.on-navy .facts dd{color:var(--fog)}

.ticks{list-style:none;margin:20px 0 0;padding:0}
.ticks li{position:relative;padding:8px 0 8px 28px;font-size:17px}
.ticks li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:3px;background:var(--amber)}

/* ---------- solar teaser strip ---------- */
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:48px}
.strip a{text-decoration:none;display:block}
.strip img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:4px}
.strip span{display:block;margin-top:12px;font-weight:700;font-size:17px;line-height:1.25}
.strip a:hover span{color:var(--amber)}
@media(max-width:900px){.strip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.strip{grid-template-columns:1fr 1fr}}

/* ---------- product catalogue ---------- */
.group+.group{margin-top:104px}
.group-head{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:end;padding-bottom:28px;border-bottom:2px solid var(--navy)}
@media(max-width:860px){.group-head{grid-template-columns:1fr;gap:12px}}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 48px;margin-top:40px}
@media(max-width:760px){.items{grid-template-columns:1fr;gap:48px}}
.item{scroll-margin-top:96px}
.item img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.item h3{margin-top:20px;font-size:28px;letter-spacing:-0.025em}
.item p{margin-top:8px;color:var(--navy)}
.item .facts{margin-top:16px}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding-top:96px;padding-bottom:72px}
.page-hero .h-xl{max-width:14ch;font-size:clamp(40px,6.5vw,88px)}
.page-hero .lede{margin-top:24px;color:var(--fog)}
@media(max-width:760px){.page-hero{padding-top:64px;padding-bottom:48px}}

/* ---------- hero: split, nothing overlaps the film ---------- */
.hero-split{display:grid;grid-template-columns:1fr 1fr;min-height:min(78vh,680px);background:var(--navy)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:56px max(24px,env(safe-area-inset-left,0px)) 56px max(24px,env(safe-area-inset-left,0px));padding-left:max(24px,calc((100vw - 1280px)/2 + 24px))}
.hero-logo{display:block;width:min(100%,440px);height:auto}
.h-tag{margin-top:20px;font-size:clamp(26px,2.8vw,40px);font-weight:800;letter-spacing:-0.02em;line-height:1.05;color:var(--amber)}
.hero-copy p{margin-top:20px;font-size:19px;line-height:1.45;color:var(--white);max-width:44ch}
.hero-copy .form-actions{margin-top:26px}
.hero-media{position:relative;background:#020608;overflow:hidden}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:860px){.hero-split{grid-template-columns:1fr;min-height:0}.hero-media{order:-1;aspect-ratio:16/10}.hero-media video{position:static;aspect-ratio:16/10}.hero-copy{padding:36px 24px 48px}.hero-logo{width:min(100%,340px)}}

/* ---------- brand ident video ---------- */
.ident-card{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:var(--white)}

/* ---------- full-width photo band ---------- */
.band-img{display:block;width:100%;height:min(62vh,540px);object-fit:cover;object-position:center 55%}
.cap{font-size:15px;color:var(--steel);padding-top:12px}

/* ---------- how we work (a real sequence) ---------- */
.steps{margin:40px 0 0;padding:0 0 0 1.5em;display:grid;grid-template-columns:repeat(3,1fr);gap:36px 40px;list-style:decimal}
.steps li{padding-right:8px}
.steps li::marker{color:var(--amber-deep);font-weight:800;font-size:20px}
.steps h3{font-size:20px;letter-spacing:-0.015em;line-height:1.25}
.steps p{margin-top:8px;font-size:17px;color:var(--navy)}
@media(max-width:860px){.steps{grid-template-columns:1fr;gap:28px}}

.notice{margin-top:56px;padding:32px 36px;background:var(--mist);border-radius:6px}
.on-mist .notice{background:var(--white)}
.notice h3{font-size:28px;letter-spacing:-0.02em;line-height:1.15}
.notice p{margin-top:10px;color:var(--navy);max-width:70ch}
.notice ul{margin:14px 0 0;padding-left:20px;columns:2;column-gap:32px}
.notice li{margin:4px 0;font-size:17px;break-inside:avoid}
.notice .strong{margin-top:14px;color:var(--navy);font-weight:700}
@media(max-width:620px){.notice{padding:22px 20px}.notice ul{columns:1}}

/* ---------- cta band ---------- */
.cta{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.cta .h-lg{max-width:16ch}

/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:32px}
.form-grid .full{grid-column:1/-1}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.field label,.field legend{display:block;font-weight:700;font-size:15px;margin-bottom:8px}
.field .hint{font-weight:400;color:var(--steel)}
.field input,.field select,.field textarea{width:100%;font:16px var(--sans);color:var(--navy);background:var(--white);border:1.5px solid var(--line);border-radius:8px;padding:12px 14px}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--amber);outline-offset:2px;border-color:var(--navy)}
.field textarea{min-height:120px;resize:vertical}
.field fieldset{border:0;margin:0;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{margin:0;font-weight:500;font-size:15px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:12px 16px;background:var(--mist);border-radius:999px;cursor:pointer;user-select:none;transition:background .15s,color .15s}
.chips input:checked+span{background:var(--navy);color:var(--white)}
.chips input:focus-visible+span{outline:3px solid var(--amber);outline-offset:2px}
.bulk-only[hidden]{display:none}
.form-error{min-height:24px;margin-top:16px;color:#B42318;font-weight:600;font-size:17px}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

.contact-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;align-items:start}
.contact-layout .form-grid{margin-top:0}
.contact-layout aside .facts{margin-top:16px}
.contact-layout p.muted{color:var(--navy)}
.contact-layout aside .notice ul{columns:1}
@media(max-width:900px){.contact-layout{grid-template-columns:1fr;gap:48px}}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:var(--fog);padding:72px 0 40px;font-size:17px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h4{color:var(--white);font-size:17px;letter-spacing:0;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:8px 0}
.foot a{text-decoration:none}
.foot a:hover{color:var(--white)}
.foot-base{margin-top:72px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:15px}
@media(max-width:760px){.foot{grid-template-columns:1fr}}