:root{ --green:#0A2530; --green-deep:#0A1E1A; --cream:#FBF9F4; --card:#EDE6D6; --divider:#D8D0BC; --amber:#FFC01F; --amber-2:#F0AC00; --teal-cream:#1A8A78; --teal-dark:#3EC9B3; --body:#2A2A2A; --ink-soft:rgba(244,239,229,0.62); --ink-softer:rgba(244,239,229,0.32); --rule-dark:rgba(244,239,229,0.10); --ease-out:cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1); --max:1280px; }
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:'Inter', system-ui, -apple-system, Segoe UI, sans-serif; background:var(--cream); color:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 1.5rem; }
@media (min-width: 768px){
  .wrap{ padding:0 3rem; }
}
.display{ font-family:'Barlow Condensed','Inter',sans-serif; font-weight:800; letter-spacing:-0.01em; line-height:0.95; }
.display-lg{ font-size:clamp(2.4rem, 6vw, 5rem); }
.lede{ font-family:'Inter',sans-serif; font-size:clamp(1.05rem,1.6vw,1.22rem); line-height:1.55; max-width:46ch; }
.lede-dark{ color:var(--ink-soft); }
p{ max-width:65ch; }
/* Logo lockup — official brand asset */
.logo-link{ display:inline-flex; align-items:center; line-height:0; }
.logo-link img{ display:block; height:34px; width:auto; }
.logo-nav{ height:44px; }
@media (min-width:768px){
  .logo-nav{ height:52px; }
}
.logo-foot{ height:46px; }
/* Standalone amber battery icon — the ī, recognisable on its own */
/* Larger standalone version — for section markers, dividers */
/* Used as a list-style bullet */
nav.top{ position:fixed; top:0; left:0; right:0; z-index:80; padding:1.45rem 1.5rem; display:flex; align-items:center; justify-content:space-between; transition:background 280ms var(--ease-out), border-color 280ms var(--ease-out), backdrop-filter 280ms var(--ease-out); border-bottom:1px solid transparent; }
@media (min-width:768px){
  nav.top{ padding:1.55rem 3rem; }
}
nav.top.scrolled{ background:rgba(15,41,36,0.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom-color:var(--rule-dark); }
.nav-links{ display:none; gap:1.15rem; font-size:0.85rem; color:var(--cream); font-weight:500; }
@media (min-width:1200px){
  .nav-links{ display:flex; align-items:center; }
}
.nav-links a{ color:var(--ink-soft); transition:color 160ms ease; }
.nav-links a:hover{ color:var(--cream); }
.nav-dd{ position:relative; display:inline-flex; align-items:center; }
.nav-dd-trigger{ display:inline-flex; align-items:center; gap:0.3rem; background:transparent; border:0; padding:0; margin:0; cursor:pointer; font-family:inherit; font-size:0.85rem; font-weight:500; color:var(--ink-soft); transition:color 160ms ease; }
.nav-dd-trigger .chev{ width:13px; height:13px; opacity:0.8; transition:transform 240ms var(--ease-out); }
.nav-dd:hover .nav-dd-trigger, .nav-dd.open .nav-dd-trigger{ color:var(--cream); }
.nav-dd:hover .nav-dd-trigger .chev, .nav-dd.open .nav-dd-trigger .chev{ transform:rotate(180deg); }
.nav-dd::after{ content:''; position:absolute; top:100%; left:-1rem; right:-1rem; height:1.1rem; }
.nav-dd-menu{ position:absolute; top:100%; left:50%; margin-top:0.9rem; transform:translateX(-50%) translateY(8px); min-width:210px; background:rgba(248,244,236,0.98); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(15,41,36,0.12); border-radius:15px; box-shadow:0 24px 50px -16px rgba(15,41,36,0.28); padding:0.5rem; display:flex; flex-direction:column; gap:0.1rem; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 200ms var(--ease-out), transform 260ms var(--ease-out), visibility 200ms; z-index:90; }
.nav-dd:hover .nav-dd-menu, .nav-dd.open .nav-dd-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dd--end .nav-dd-menu{ left:auto; right:0; transform:translateX(0) translateY(8px); }
.nav-dd--end:hover .nav-dd-menu, .nav-dd--end.open .nav-dd-menu{ transform:translateX(0) translateY(0); }
.nav-dd-menu a{ display:flex; flex-direction:column; gap:0.12rem; padding:0.62rem 0.8rem; border-radius:10px; transition:background 140ms ease, padding-left 220ms var(--ease-out); }
.nav-dd-menu a:hover{ background:rgba(0,128,129,0.09); padding-left:1rem; }
.nav-dd-menu .mi-t{ color:#0A2530; font-size:0.9rem; font-weight:600; transition:color 140ms ease; }
.nav-dd-menu a:hover .mi-t{ color:#3EC9B3; }
.cta{ display:inline-flex; align-items:center; justify-content:center; background:var(--amber); color:var(--green); font-family:'Inter',sans-serif; font-weight:600; font-size:0.82rem; letter-spacing:0.04em; padding:0.75rem 1.4rem; border:none; cursor:pointer; border-radius:9999px; transition:background 160ms var(--ease-out), transform 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out); }
.cta:hover{ background:var(--amber-2); }
.cta:active{ transform:scale(0.97); }
.cta-ghost{ background:#14C3A8; color:var(--cream); border:1px solid #14C3A8; padding:0.7rem 1.1rem; gap:0.45rem; box-shadow:0 0 0 0 rgba(0,128,129,0); }
.cta-ghost:hover{ background:#00A0A1; border-color:#00A0A1; color:var(--cream); box-shadow:0 0 0 4px rgba(0,128,129,0.18); }
.cta-ghost .lock{ width:14px; height:14px; display:inline-block; }
.nav-cta-group{ display:inline-flex; align-items:center; gap:0.55rem; }
.hero{ min-height:100dvh; background:linear-gradient(180deg, rgba(15,41,36,0.62) 0%, rgba(15,41,36,0.55) 45%, rgba(15,41,36,0.78) 100%), url('assets/hero-woven.webp') center/cover no-repeat, var(--green); color:var(--cream); position:relative; overflow:hidden; padding:8rem 0 5rem; }
.hero h1{ color:var(--cream); margin-bottom:1.75rem; }
.waitlist{ max-width:30rem; background:transparent; border:0; padding:0; }
.waitlist label{ display:block; font-size:0.7rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:rgba(244,239,229,0.82); margin-bottom:0.6rem; }
.waitlist .row{ display:grid; grid-template-columns:1fr; gap:0.6rem; }
@media (min-width:520px){
  .waitlist .row{ grid-template-columns:1fr auto; }
}
.waitlist input[type="email"]{ background:transparent; border:1px solid transparent; outline:none; color:var(--cream); font-family:inherit; font-size:1rem; padding:0.85rem 1rem; border-radius:12px; width:100%; transition:border-color 160ms ease; }
.waitlist input[type="email"]::placeholder{ color:var(--ink-soft); }
.waitlist input[type="email"]:focus{ border-color:rgba(244,239,229,0.18); }
.waitlist .submit{ background:var(--amber); color:var(--green); font-weight:600; font-family:inherit; font-size:0.9rem; border:none; padding:0.85rem 1.35rem; border-radius:12px; cursor:pointer; transition:background 160ms var(--ease-out), transform 160ms var(--ease-out); white-space:nowrap; }
.waitlist .submit:hover{ background:var(--amber-2); }
.waitlist .submit:active{ transform:scale(0.97); }
.waitlist .fine{ font-size:0.7rem; color:rgba(244,239,229,0.66); margin-top:0.85rem; line-height:1.5; }
.pad{ padding:6rem 0; }
@media (min-width:768px){
  .pad{ padding:8rem 0; }
}
.sec-head{ margin-bottom:3rem; max-width:60ch; }
.sec-head h2{ color:var(--green); margin-bottom:1rem; }
.sec-head p{ color:var(--body); font-size:1.05rem; line-height:1.6; }
.how{ background:var(--green); color:var(--cream); }
.how .sec-head h2{ color:var(--cream); }
.how .sec-head p{ color:var(--ink-soft); }
.steps{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--rule-dark); }
@media (min-width:880px){
  .steps{ grid-template-columns:repeat(4,1fr); border-top:none; }
}
.step{ padding:2rem 0; border-bottom:1px solid var(--rule-dark); display:flex; gap:1.25rem; }
@media (min-width:880px){
  .step{ flex-direction:column; padding:0 2rem 0 0; border-bottom:none; border-left:1px solid var(--rule-dark); padding-left:2rem; min-height:240px; }
  .step:first-child{ border-left:none; padding-left:0; }
}
.step h4{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.4rem; color:var(--cream); margin-bottom:0.5rem; }
.step p{ color:var(--ink-soft); font-size:0.92rem; line-height:1.55; }
/* Sell power with us */
.share{ background:var(--green); border-radius:24px; padding:2.5rem 1.75rem; color:var(--cream); position:relative; overflow:hidden; }
@media (min-width:880px){
  .share{ padding:3rem 3.25rem; }
}
.share::before{ content:""; position:absolute; top:-30%; right:-8%; width:52%; height:160%; background:radial-gradient(ellipse at center, rgba(255,192,31,0.07) 0%, transparent 62%); pointer-events:none; }
.share > *{ position:relative; z-index:1; }
.anchor{ background:var(--green-deep); color:var(--cream); position:relative; overflow:hidden; }
.anchor::before{ content:""; position:absolute; top:-20%; right:-10%; width:60%; height:140%; background:radial-gradient(ellipse at center, rgba(255,192,31,0.06) 0%, transparent 60%); pointer-events:none; }
.anchor h2{ color:var(--cream); margin-bottom:1.5rem; }
.anchor .lede-dark{ color:var(--ink-soft); }
/* Early adopter block — sits inside the anchor section */
/* Contact block — visible on the front page */
.contact{ background:var(--cream); border-top:1px solid var(--divider); padding:5rem 0; }
.contact h2{ color:var(--green); margin-bottom:1rem; }
.faq{ background:var(--cream); border-top:1px solid var(--divider); }
.faq details{ border-bottom:1px solid var(--divider); padding:1.25rem 0; }
.faq details:first-of-type{ border-top:1px solid var(--divider); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:2rem; font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:clamp(1.2rem,1.9vw,1.45rem); color:var(--green); transition:color 160ms ease; padding:0.4rem 0; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--teal-cream); }
.faq .answer{ padding:1.1rem 0 0.5rem; color:var(--body); font-size:1rem; line-height:1.65; max-width:64ch; }
.faq .answer p + p{ margin-top:0.85rem; }
footer{ background:var(--green-deep); color:var(--ink-soft); padding:4rem 0 2.5rem; font-size:0.88rem; }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
@media (min-width:760px){
  .foot-grid{ grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; }
}
footer .blurb{ max-width:30ch; line-height:1.5; color:var(--ink-softer); font-size:0.85rem; }
.foot-col h5{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:1rem; }
.foot-col ul{ list-style:none; display:grid; gap:0.6rem; }
.foot-col a{ color:var(--ink-soft); transition:color 160ms ease; }
.foot-col a:hover{ color:var(--cream); }
.foot-legal{ border-top:1px solid var(--rule-dark); margin-top:3rem; padding-top:1.75rem; display:flex; flex-direction:column; gap:0.75rem; font-size:0.74rem; color:var(--ink-softer); }
@media (min-width:680px){
  .foot-legal{ flex-direction:row; justify-content:space-between; align-items:center; }
}
@starting-style{ .rise{ opacity:0; transform:translateY(12px); } }
.reveal{ opacity:0; transform:translateY(16px); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:0.001ms !important; animation-duration:0.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}
/* Stacked waitlist form fields */
.waitlist .field{ margin-bottom:0.55rem; }
.waitlist .field:last-of-type{ margin-bottom:0.85rem; }
.waitlist input[type="text"], .waitlist input[type="tel"]{ background:transparent; border:1px solid transparent; outline:none; color:var(--cream); font-family:inherit; font-size:0.98rem; padding:0.78rem 1rem; border-radius:12px; width:100%; transition:border-color 160ms ease; }
.waitlist input[type="text"]::placeholder, .waitlist input[type="tel"]::placeholder{ color:var(--ink-soft); }
.waitlist input[type="text"]:focus, .waitlist input[type="tel"]:focus{ border-color:rgba(244,239,229,0.18); }
.waitlist .field input{ background:rgba(244,239,229,0.06); border:1px solid rgba(244,239,229,0.38); }
.waitlist .field input:focus{ border-color:rgba(255,192,31,0.7); background:rgba(244,239,229,0.09); }
.waitlist .submit.full{ width:100%; padding:0.95rem 1.4rem; font-size:0.95rem; }
/* AddressFinder dropdown — themed to the dark hero card */
/* Invalid field highlight */
@keyframes shake{10%, 90%{ transform:translateX(-1.5px); }20%, 80%{ transform:translateX(2.5px); }30%, 50%, 70%{ transform:translateX(-4px); }40%, 60%{ transform:translateX(4px); }
    }
/* ──── STYLISED SUCCESS STATE ──── */
@keyframes success-rise{
      from{ opacity:0; transform:translateY(14px) scale(0.97); }
      to{ opacity:1; transform:translateY(0) scale(1); }
    }
@keyframes bat-glow{0%, 100%{ box-shadow:0 0 18px rgba(255,192,31,0.5); }
      50%{ box-shadow:0 0 32px rgba(255,192,31,0.9); }
    }
::selection{ background:var(--amber); color:var(--green); }
.page-label{ font-family:'Inter',sans-serif; font-weight:600; font-size:0.72rem; letter-spacing:0.26em; text-transform:uppercase; color:#3EC9B3; margin-left:0.85rem; padding-left:0.85rem; border-left:1px solid rgba(244,239,229,0.22); line-height:1; align-self:center; white-space:nowrap; }
/* cta glow on hover */
.cta, .cta-ghost, .waitlist .submit{ transition:background .18s ease, transform .2s ease, box-shadow .28s ease, filter .2s ease, color .18s ease, text-shadow .2s ease !important; }
.cta:hover, .waitlist .submit:hover{ transform:translateY(-2px); box-shadow:0 0 22px 2px rgba(255,192,31,0.55), 0 10px 28px rgba(255,192,31,0.30); filter:brightness(1.06); }
.cta-ghost:hover{ transform:translateY(-2px); box-shadow:0 0 22px 1px rgba(0,160,161,0.55), 0 10px 26px rgba(0,128,129,0.30); color:#fff; text-shadow:0 0 12px rgba(62,201,179,0.7); }
/* ══════════════════════════════════════════════════════
       JOURNEY COMPONENTS  (icon diagrams + photo bands)
       ══════════════════════════════════════════════════════ */
/* ── Icon system ── */
.ico-wrap{ flex-shrink:0; line-height:0; }
.ico-wrap svg{ width:100%; height:100%; display:block; color:var(--green); }
.ico-52{ width:50px; height:50px; }
.ico-44{ width:42px; height:42px; }
@media (min-width:768px){
  .ico-52{ width:56px; height:56px; }
}
.em-amber{ color:var(--amber); }
/* ── Full-bleed photo breaker ── */
/* ── Section 01: what Tīrama is ── */
.what{ background:var(--cream); }
.what .sec-head h2{ color:var(--green); font-size:clamp(2.2rem,4.6vw,3.8rem); }
/* ── The offer, in four parts ── */
.part{ background:var(--card); border:1px solid var(--divider); border-top:3px solid var(--pc); border-radius:20px; padding:1.9rem 1.6rem 1.5rem; display:flex; flex-direction:column; box-shadow:0 4px 16px -6px rgba(15,41,36,0.06); transition:transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .part:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -10px rgba(15,41,36,0.14); }
}
.part .ico-wrap{ margin-bottom:1.1rem; }
.part h4{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:clamp(1.4rem,2vw,1.65rem); color:var(--green); line-height:1.05; margin-bottom:0.7rem; }
.part p{ color:var(--body); font-size:0.94rem; line-height:1.58; margin-bottom:1.35rem; }
.part .jump{ margin-top:auto; display:inline-flex; align-items:center; gap:0.45rem; font-size:0.8rem; font-weight:600; color:var(--green); border-top:1px solid var(--divider); padding-top:0.9rem; transition:color 160ms ease, gap 200ms var(--ease-out); }
.part .jump svg{ width:13px; height:13px; }
.part .jump:hover{ color:var(--teal-cream); gap:0.7rem; }
/* ── Why 01: the two lanes ── */
.whyb{ background:var(--green); color:var(--cream); }
.whyb .sec-head h2{ color:var(--cream); }
.whyb .sec-head p{ color:var(--ink-soft); }
.lanes{ display:grid; gap:1.5rem; margin-top:1rem; min-width:0; }
.lane{ background:rgba(244,239,229,0.035); border:1px solid var(--rule-dark); border-radius:24px; padding:1.9rem 1.5rem; min-width:0; overflow:hidden; }
@media (min-width:1040px){
  .lane{ display:grid; grid-template-columns:16.5rem 1fr; gap:2.25rem; align-items:center; padding:2.25rem 2.25rem; }
}
.lane.hi{ border-color:rgba(255,192,31,0.28); background:rgba(255,192,31,0.045); }
.lane-head{ min-width:0; }
.lane-head h3{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:clamp(1.6rem,2.8vw,2.05rem); color:var(--cream); line-height:1.02; margin-bottom:0.8rem; }
.lane-head p{ color:var(--ink-soft); font-size:0.9rem; line-height:1.6; max-width:38ch; }
.track{ display:flex; align-items:flex-start; gap:0.35rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:1.75rem 0 0.75rem; scrollbar-width:thin; min-width:0; max-width:100%; }
@media (min-width:1040px){
  .track{ padding:0; }
}
.track::-webkit-scrollbar{ height:4px; }
.track::-webkit-scrollbar-thumb{ background:rgba(244,239,229,0.16); border-radius:99px; }
.tnode{ flex:0 0 auto; width:96px; text-align:center; }
.tnode .ico-wrap{ margin:0 auto 0.7rem; }
.tnode h5{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:0.96rem; color:var(--cream); line-height:1.12; }
.tnode p{ font-size:0.7rem; line-height:1.35; color:var(--ink-softer); margin-top:0.25rem; }
.tnode.key h5{ color:var(--amber); }
.tarrow{ flex:0 0 auto; width:46px; display:flex; flex-direction:column; align-items:center; gap:0.4rem; padding-top:1.15rem; }
.tarrow .lbl{ font-size:0.58rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--teal-dark); text-align:center; line-height:1.2; }
.tarrow.key .lbl{ color:var(--amber); }
.tarrow svg{ width:100%; height:12px; color:var(--amber); }
.payoff{ margin-top:3rem; padding-top:2.25rem; border-top:1px solid var(--rule-dark); display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.payoff p{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:clamp(1.35rem,3vw,2.15rem); color:var(--cream); line-height:1.08; max-width:none; }
/* ── Why 02: price ── */
/* ── Why 03: backup ── */
.whyk{ background:var(--card); border-top:1px solid var(--divider); }
.whyk-grid{ display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; }
@media (min-width:960px){
  .whyk-grid{ grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:5rem; }
}
.whyk-img{ border-radius:24px; overflow:hidden; aspect-ratio:4/5; position:relative; }
.whyk-img img{ width:100%; height:100%; object-fit:cover; }
.whyk h2{ color:var(--green); margin-bottom:1.25rem; }
.whyk .lede{ color:var(--body); margin-bottom:2.25rem; max-width:52ch; }
.kpoints{ list-style:none; display:grid; gap:1.5rem; border-top:1px solid var(--divider); padding-top:1.75rem; }
@media (min-width:640px){
  .kpoints{ grid-template-columns:repeat(3,1fr); gap:2rem; }
}
.kpoints li .ico-wrap{ margin-bottom:0.8rem; }
.kpoints h4{ font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.25rem; color:var(--green); margin-bottom:0.35rem; line-height:1.1; }
.kpoints p{ font-size:0.9rem; line-height:1.55; color:var(--body); }
/* ── Why 04: the venn ── */
/* ── Solar aside ── */
/* ── Anchor jump offset for the fixed nav ── */
section[id]{ scroll-margin-top:5.5rem; }