/* ============================================================
   HERO — section 1
   ============================================================ */
#hero{min-height:100svh;display:flex;align-items:flex-start;padding-top:clamp(104px,13vh,140px);padding-bottom:clamp(60px,10vh,110px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr);align-items:center;gap:clamp(30px,5vw,70px)}
/* the logo moment: aurora glow behind + a passing sheen.
   sits above the grid so it centers on the full wrap width */
.hero-logo-wrap{position:relative;width:fit-content;margin:0 auto 1.8rem;
  opacity:0;transform:translateY(16px) scale(.93);
  transition:opacity 1.1s var(--ease) .2s,transform 1.1s var(--ease) .2s}
.ready .hero-logo-wrap{opacity:1;transform:none;animation:logo-breathe 7s ease-in-out 2.2s infinite}
@keyframes logo-breathe{0%,100%{transform:none}50%{transform:scale(1.02)}}

/* aurora — the three logo colours drifting softly behind the mark */
.hero-logo-wrap::before{content:"";position:absolute;inset:-16%;z-index:-1;border-radius:50%;opacity:.7;
  background:
    radial-gradient(closest-side at 28% 32%,var(--yellow),transparent 72%),
    radial-gradient(closest-side at 74% 28%,var(--turq),transparent 72%),
    radial-gradient(closest-side at 56% 78%,var(--pink),transparent 74%);
  filter:blur(26px);animation:logo-glow 9s ease-in-out infinite}
@keyframes logo-glow{
  0%,100%{opacity:.5;transform:scale(.96) rotate(-4deg)}
  50%{opacity:.85;transform:scale(1.07) rotate(5deg)}}

/* a slow light sweep across the mark every few breaths */
.hero-logo-wrap::after{content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%) no-repeat;
  background-size:250% 100%;background-position:140% 0;
  animation:logo-sheen 8s ease-in-out 3.5s infinite}
@keyframes logo-sheen{0%,55%{background-position:140% 0}85%,100%{background-position:-60% 0}}

.hero-logo{display:block;height:clamp(110px,15vw,168px);width:auto;background:transparent}
/* lives inside the h1 now (SEO: location + service in the heading), so reset the display-font inheritance */
.hero-mark{display:block;font-family:var(--body);font-size:.7rem;line-height:1.4;letter-spacing:.3em;text-transform:uppercase;color:var(--turq-deep);font-weight:600;margin-bottom:1.8rem}

/* the headline slides its lines up out of their masks once .ready lands */
h1 .l{display:block;overflow:hidden;padding-bottom:.18em}
h1 .l i{display:block;font-style:normal;transform:translateY(105%);transition:transform 1.15s var(--ease)}
h1 .l:nth-child(2) i{transition-delay:.12s}
.ready h1 .l i{transform:translateY(0)}
h1 .hl{position:relative;display:inline-block}
h1 .hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.12em;height:.26em;
  background:var(--yellow-fluo);z-index:-1;transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease) .9s}
.ready h1 .hl::after{transform:scaleX(1)}
#hero h1{margin-bottom:1.2rem}
.hero-copy{max-width:38rem}
.hero-copy > .panel{margin-top:1.8rem;max-width:38rem}
.hero-sub{max-width:36ch;margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.fade-up{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease) .5s,transform 1s var(--ease) .5s}
.ready .fade-up{opacity:1;transform:none}

.hero-photo{position:relative;will-change:transform;margin:0}
.hero-photo img{width:100%;aspect-ratio:3/4.1;object-fit:cover;object-position:center 30%}
.hero-photo::after{content:"";position:absolute;inset:0;border:3px solid var(--turq);transform:translate(15px,15px);pointer-events:none}

/* the breathing badge — its dot is scaled from js/enso.js */
.breath{position:absolute;left:calc(-1 * clamp(14px,3vw,38px));bottom:26px;display:flex;align-items:center;gap:.7rem;
  background:var(--pink);color:var(--ink);padding:.45rem .85rem .45rem .5rem;font-size:.6rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.breath-ring{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center}
.breath-dot{width:7px;height:7px;border-radius:50%;background:var(--ink)}

@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{display:none}
  .hero-copy{margin-inline:auto}
}