/* Home page: "day and night water". Loaded by index.html only.
   Colours come from the day/night tokens in empo.css. */
.hm-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-ink)}
.hm-h2{font-family:var(--head);font-weight:500;font-size:clamp(32px,4.2vw,56px);line-height:1.06;letter-spacing:-.02em;margin-top:16px;text-wrap:balance}
.hm-wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.hm-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 26px;line-height:1.25;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .2s ease,background .2s ease,color .2s ease}
.hm-btn:hover{transform:translateY(-2px)}
.hm-btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.hm-btn.solid{background:var(--orange);color:var(--navy)}
.hm-btn.solid:hover{background:#ff7a33}
.hm-btn.line{border:1.5px solid var(--ink);color:var(--ink)}
.hm-btn.line:hover{background:var(--ink);color:var(--bg)}

/* ---- Hero: the water ---- */
/* The hero runs under the floating menu bar (bar height 64px + 12px gap). */
.hm-hero{position:relative;min-height:min(100svh,940px);margin-top:-76px;padding-top:76px;display:flex;flex-direction:column;overflow:hidden}
.hm-field{position:absolute;inset:32% 0 0 0;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 86%,transparent 100%)}
/* Static backdrop: shows before three.js is ready and stays when it cannot run. */
.hm-field::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,color-mix(in srgb,var(--ink) 32%,transparent) 1.2px,transparent 1.6px) 0 0/22px 14px;transition:opacity .8s ease}
.hm-field::after{content:"";position:absolute;left:68%;top:50%;width:44vmin;height:13vmin;border-radius:50%;border:2px solid var(--orange);opacity:.8;transform:translate(-50%,-50%);transition:opacity .8s ease}
.hm-field canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .8s ease}
.hm-field.is-live canvas{opacity:1}
.hm-field.is-live::before,.hm-field.is-live::after{opacity:0}
/* Scrim: keeps the dots away from the text (4.5:1 holds on the plain ground). */
.hm-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 62% at 22% 46%,rgb(var(--bg-rgb)/.95) 0,rgb(var(--bg-rgb)/.82) 55%,rgb(var(--bg-rgb)/0) 100%)}
.hm-hero-body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,5vh,56px) clamp(20px,5vw,64px) clamp(120px,22vh,240px);max-width:1240px;width:100%;margin:0 auto}
.hm-h1{font-family:var(--head);font-weight:400;font-size:clamp(46px,8.4vw,124px);line-height:.96;letter-spacing:-.03em;margin-top:22px;max-width:12ch;text-wrap:balance}
.hm-h1 em{font-style:italic;color:var(--orange-ink)}
[data-theme=night] .hm-h1 em{color:var(--orange)}
.hm-sub{font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:46ch;margin-top:28px;color:var(--ink-2)}
.hm-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* ---- Photo + numbers ---- */
.hm-frame{border-radius:28px;overflow:hidden;border:1px solid var(--line);background:var(--surface);transition:background-color .4s ease,border-color .4s ease}
.hm-frame img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;object-position:50% 60%}
.hm-proof{display:grid;grid-template-columns:repeat(3,1fr)}
.hm-proof .stat{padding:24px 28px;border-left:1px solid var(--line)}
.hm-proof .stat:first-child{border-left:0}
.hm-proof .stat .n{font-family:var(--head);font-weight:400;font-size:clamp(32px,4.4vw,64px);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.hm-proof .stat .l{font-size:14px;font-weight:600;color:var(--ink-2);margin-top:8px;opacity:1}

/* ---- Services: a ruled list ---- */
.hm-services{padding-top:clamp(72px,10vw,136px);padding-bottom:clamp(72px,10vw,136px);scroll-margin-top:60px}
.hm-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px)}
.hm-sticky{position:sticky;top:110px;align-self:start}
.hm-sticky .hm-btn{margin-top:28px}
.hm-rows{list-style:none;border-top:1.5px solid var(--ink)}
.hm-rows a{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .25s ease,background .25s ease}
.hm-rows a:hover{padding-left:14px;background:var(--surface)}
.hm-rows a:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;border-radius:8px}
.hm-rows .num{font-family:var(--head);font-size:20px;color:var(--orange-ink)}
.hm-rows h3{font-family:var(--head);font-weight:600;font-size:clamp(22px,2.2vw,30px);line-height:1.2}
.hm-rows p{margin-top:6px;color:var(--ink-2);max-width:52ch}
.hm-rows .arr{font-size:22px;transition:transform .25s ease}
.hm-rows a:hover .arr{transform:translateX(6px);color:var(--orange-ink)}

/* ---- Ecosystem doors ---- */
.hm-doors{padding-top:clamp(72px,10vw,128px);padding-bottom:clamp(40px,6vw,72px)}
.hm-doors .grid-auto{margin-top:44px;gap:20px}
.hm-doors .eco{border-radius:24px}

@media (max-width:860px){
  .hm-split{grid-template-columns:1fr}
  .hm-sticky{position:static}
  .hm-rows a{grid-template-columns:36px 1fr auto}
  .hm-frame img{aspect-ratio:4/3}
  .hm-proof .stat{padding:16px 14px}
  .hm-field{inset:54% 0 0 0}
  .hm-hero::after{background:linear-gradient(180deg,rgb(var(--bg-rgb)/.96) 0,rgb(var(--bg-rgb)/.9) 62%,rgb(var(--bg-rgb)/0) 84%)}
}

/* ---- Closing CTA: rings on still water ---- */
.hm-cta{position:relative;margin-top:clamp(40px,6vw,88px)}
.hm-cta::before,.hm-cta::after{content:"";position:absolute;left:50%;top:50%;width:min(120vw,1100px);aspect-ratio:3/1;border-radius:50%;border:2px solid var(--orange);opacity:.5;transform:translate(-50%,-50%);pointer-events:none}
.hm-cta::after{width:min(80vw,700px);opacity:.25}
.hm-cta .cta-inner{position:relative;z-index:1}