/* ============ AURORA HERO ============
   The look is kept; the way it was built is not.

   The old version stacked, on one full-viewport element: two gradient
   layers animated by background-position, background-attachment:fixed,
   filter:blur(10px) saturate(200%), a radial mask, TWO mix-blend-mode
   :difference layers, filter:invert(1) on the content, and a
   backdrop-filter of contrast + blur + url(#fluted) where #fluted was an
   SVG feImage/feTile/feDisplacementMap chain. Every one of those is a
   per-frame repaint of the whole viewport, and background-attachment
   :fixed alone is a well known scroll-jank source.

   Now: one oversized gradient layer moved with translate3d, which the
   compositor owns, over a dark ground. No blend modes, no backdrop
   filters, no fixed attachment, no SVG filter. The colours and the drift
   are the same. */
.aurora-hero-wrapper{
  position:relative;overflow:hidden;isolation:isolate;
  width:100%;min-height:520px;height:100vh;background:#0d1b1a}
.aurora-hero-bg{position:absolute;top:-30%;left:-60%;width:220%;height:160%;
  pointer-events:none;will-change:transform;
  background-image:repeating-linear-gradient(100deg,
    #0E9C93 0%,#5FC9BF 6%,#F0854B 11%,#CFE9E3 16%,#0B857D 22%,#0E9C93 28%);
  opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse at 68% 12%,#000 26%,transparent 66%);
  mask-image:radial-gradient(ellipse at 68% 12%,#000 26%,transparent 66%);
  animation:auroraDrift 48s linear infinite alternate}
@keyframes auroraDrift{
  from{transform:translate3d(0,0,0) rotate(-2deg)}
  to  {transform:translate3d(-16%,3%,0) rotate(2deg)}
}
/* a second, slower band gives the depth the blend modes used to fake */
.aurora-hero-bg::after{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(88deg,
    transparent 0%,rgba(13,27,26,.85) 5%,transparent 11%);
  will-change:transform;
  animation:auroraBands 64s linear infinite}
@keyframes auroraBands{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(12%,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .aurora-hero-bg,.aurora-hero-bg::after{animation:none}
}

.aurora-content{
  position:absolute;inset:0;z-index:2;
  display:flex;place-content:center;place-items:center;flex-flow:column;
  gap:4.5%;text-align:center;padding:0 24px}
.h1-scalingSize{
  font-family:var(--serif);font-size:clamp(20px,3.4vw,58px);
  font-weight:800;letter-spacing:-.035em;line-height:1.05;
  color:#fff;text-shadow:0 4px 30px rgba(6,14,13,.7);
  white-space:nowrap;max-width:none}

.ld-hero-sub{position:absolute;left:0;right:0;bottom:clamp(26px,5vh,52px);z-index:3;
  text-align:center;padding:0 24px;
  font-size:clamp(14px,1.1vw,17px);color:rgba(250,248,243,.72);letter-spacing:.01em}

@media(max-width:820px){
  .aurora-hero-wrapper{height:100vh;min-height:460px}
  .h1-scalingSize{font-size:clamp(14px,4.3vw,32px)}
}
/* a scroll cue at the foot of the hero */
.ld-hero-cue{position:absolute;left:50%;bottom:clamp(26px,5vh,52px);transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--disp);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(250,248,243,.86);text-shadow:0 2px 12px rgba(6,14,13,.8)}
.ld-hero-cue svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;animation:ldBob 2s var(--ease) infinite}
@keyframes ldBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ============ PORTRAITS ============ */
.ld-people{background:var(--ivory);padding:clamp(60px,10vh,120px) 0 clamp(56px,9vh,110px)}
.ld-people .wrap{max-width:var(--maxw)}
.ld-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,64px);
  max-width:760px;margin:0 auto}                 /* <=380px/tile; the 1254px source downscales, so it stays crisp even at 3x */

.ld-card{display:flex;flex-direction:column;align-items:center;gap:0;cursor:pointer;
  background:none;border:0;padding:0;text-align:center;width:100%}
.ld-shot{position:relative;display:grid;place-items:center;overflow:hidden;width:100%;
  aspect-ratio:1/1;border-radius:24px;image-rendering:auto;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c,#0E9C93) 18%,var(--surface-2)),var(--surface-2));
  background-size:cover;background-position:center 22%;
  border:1px solid var(--line);
  box-shadow:0 34px 64px -46px rgba(28,42,40,.55);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s var(--ease)}
.ld-card:hover .ld-shot{transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--c,#0E9C93) 45%,var(--line));
  box-shadow:0 46px 64px -40px rgba(28,42,40,.6)}
/* monogram stands in until the real headshot file exists */
.ld-mono{font-family:var(--serif);font-weight:800;font-size:clamp(38px,4.6vw,68px);
  letter-spacing:.02em;color:color-mix(in srgb,var(--c,#0E9C93) 70%,var(--ink))}
.ld-shot.has-shot{background-color:transparent}
.ld-shot.has-shot .ld-mono{display:none}
/* real 1254x1254 sources now, so no sharpening crutch is needed */

.ld-cap{display:block;margin-top:clamp(16px,2vh,22px)}
.ld-cap b{display:block;font-family:var(--serif);font-weight:800;
  font-size:clamp(18px,1.85vw,26px);letter-spacing:-.028em;line-height:1.12;color:var(--ink)}
.ld-cap > span{display:block;font-family:var(--disp);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal-deep);margin-top:9px}
.ld-hint{display:inline-block;margin-top:14px;
  font-family:var(--disp);font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--teal);
  opacity:0;transform:translateY(-4px);
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ld-card:hover .ld-hint,.ld-card:focus-visible .ld-hint{opacity:1;transform:none}

.ld-source{display:none}

@media(max-width:760px){.ld-grid{grid-template-columns:1fr;gap:38px}
  .ld-card{max-width:380px;margin:0 auto}}

/* ============ PROFILE DIALOG ============ */
.ld-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vh,48px) 20px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.ld-modal.open{opacity:1;visibility:visible}
.ld-modal-back{position:absolute;inset:0;background:rgba(16,22,21,.55);backdrop-filter:blur(7px)}
.ld-modal-card{--c:#0E9C93;position:relative;width:min(880px,100%);max-height:88vh;overflow-y:auto;
  overscroll-behavior:contain;                 /* keep wheel inside the dialog */
  background:var(--ivory);border:1px solid var(--line);border-radius:26px;
  padding:clamp(30px,4vw,56px);
  box-shadow:0 60px 64px -40px rgba(28,42,40,.6);
  transform:translateY(20px) scale(.985);transition:transform .45s var(--ease)}
.ld-modal.open .ld-modal-card{transform:none}
/* animated gradient field behind the profile */
/* Was a WebGL animated-gradient. It created a GL context on page load for
   a dialog most visitors never open. Two drifting blobs, paused until the
   dialog is actually shown. */
.ld-modal-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:26px;
  background:linear-gradient(150deg,#FAF8F3,#DCEDE9 55%,#E9F3F8)}
.ld-modal-fx::before,.ld-modal-fx::after{content:"";position:absolute;
  width:78%;aspect-ratio:1.2;border-radius:50%;will-change:transform;
  animation-play-state:paused}
.ld-modal-fx::before{left:-16%;top:-24%;
  background:radial-gradient(closest-side,rgba(111,201,191,.62),transparent 72%);
  animation:agA 20s ease-in-out infinite alternate}
.ld-modal-fx::after{right:-18%;bottom:-26%;
  background:radial-gradient(closest-side,rgba(14,156,147,.38),transparent 74%);
  animation:agB 25s ease-in-out infinite alternate}
.ld-modal.open .ld-modal-fx::before,.ld-modal.open .ld-modal-fx::after{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.ld-modal-fx::before,.ld-modal-fx::after{animation:none}}
/* soften it so the copy never fights the field */
.ld-modal-card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:26px;
  background:linear-gradient(180deg,rgba(250,248,243,.78),rgba(250,248,243,.9))}
.ld-modal-card > *:not(.ld-modal-fx){position:relative;z-index:2}
.ld-modal-x{position:absolute;top:16px;right:16px;z-index:3;
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  font-size:21px;line-height:1;color:var(--ink);cursor:pointer;font-family:var(--body)}
.ld-modal-x:hover{transform:rotate(90deg)}

.ld-modal-head{display:flex;justify-content:center;margin-bottom:clamp(18px,2.6vh,28px)}
.ld-modal-shot{position:relative;display:grid;place-items:center;overflow:hidden;
  width:clamp(104px,11vw,140px);height:clamp(104px,11vw,140px);border-radius:26px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--c) 20%,var(--surface-2)),var(--surface-2));
  background-size:cover;background-position:center 22%;
  border:1.5px solid color-mix(in srgb,var(--c) 34%,transparent)}
.ld-modal-shot.has-shot .ld-mono{display:none}
.ld-modal-shot .ld-mono{font-size:clamp(30px,3vw,42px)}

.ld-modal-body{text-align:left}
.ld-modal-body h2{font-family:var(--serif);font-weight:800;font-size:clamp(26px,3.2vw,44px);
  letter-spacing:-.032em;line-height:1.04;color:var(--ink);text-align:center}
.ld-titles{font-family:var(--disp);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c);text-align:center;margin-top:12px;line-height:1.9}
.ld-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin:clamp(20px,2.6vh,28px) 0 clamp(24px,3vh,34px)}
.ld-li{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:999px;
  text-decoration:none;font-family:var(--disp);font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--ink)}
.ld-li svg{width:16px;height:16px;fill:currentColor}
.ld-li[href^="mailto"] svg{fill:none}

.ld-modal-body p:not(.ld-titles){font-size:clamp(14.5px,1.05vw,16.5px);color:var(--ink-soft);
  line-height:1.78;margin-top:15px}
.ld-sub{font-family:var(--disp);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mut);margin-top:clamp(24px,3vh,32px);padding-top:16px;border-top:1px solid var(--line)}
.ld-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ld-chips span{font-family:var(--disp);font-size:12px;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;background:var(--surface-2);
  transition:border-color .4s var(--ease),transform .4s var(--ease)}
.ld-chips span:hover{border-color:var(--c);transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  .ld-modal-card{transform:none}
  .ld-card:hover .ld-shot{transform:none}
}

/* ============ CLOSE ============ */
.ld-close{position:relative;overflow:hidden;background:#0d1b1a;text-align:center;
  padding:clamp(66px,10vh,124px) 0}
/* Was a WebGL pulse-lines field. Two drifting gradient blobs give the same slow
   wash for one paint and no GL context. */
.ld-close-wave{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(150deg,#0d1b1a,#16302d 56%,#0a1513)}
.ld-close-wave::before,.ld-close-wave::after{content:"";position:absolute;
  width:70%;aspect-ratio:1.3;border-radius:50%;will-change:transform}
.ld-close-wave::before{left:-12%;top:-26%;
  background:radial-gradient(closest-side,rgba(14,156,147,.40),transparent 72%);
  animation:ldwA 28s ease-in-out infinite alternate}
.ld-close-wave::after{right:-14%;bottom:-28%;
  background:radial-gradient(closest-side,rgba(240,133,75,.24),transparent 74%);
  animation:ldwB 35s ease-in-out infinite alternate}
@keyframes ldwA{to{transform:translate3d(20%,22%,0) scale(1.18)}}
@keyframes ldwB{to{transform:translate3d(-18%,-20%,0) scale(1.14)}}
@media(prefers-reduced-motion:reduce){.ld-close-wave::before,.ld-close-wave::after{animation:none}}
/* hold the centre back so the headline reads over the pulsing lines */
.ld-close::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%,rgba(13,27,26,.86),rgba(13,27,26,.5))}
.ld-close .wrap{position:relative;z-index:2;max-width:var(--maxw)}
.ld-close h2{font-family:var(--serif);font-weight:800;font-size:clamp(28px,4vw,54px);
  letter-spacing:-.03em;line-height:1.05;color:#fff}
.ld-close h2 em{font-style:italic;color:#7fe3d9}
.ld-close p{font-size:clamp(15px,1.15vw,18px);color:rgba(250,248,243,.76);margin-top:16px}
.ld-go{display:block;width:fit-content;margin:clamp(30px,4.4vh,46px) auto 0;border-radius:999px;
  text-decoration:none;transition:transform .45s var(--ease)}
.ld-go:hover{transform:translateY(-3px)}
.ld-go-in{display:flex;align-items:center;gap:12px;padding:18px 40px;border-radius:999px;
  color:#fff;font-family:var(--disp);font-size:15px;font-weight:600;letter-spacing:.03em;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  box-shadow:0 20px 50px -22px rgba(28,42,40,.42),inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .4s var(--ease),border-color .4s,color .35s}
.ld-go:hover .ld-go-in{background:rgba(14,156,147,.5);border-color:rgba(127,227,217,.6);color:#fff}
.ld-go-in svg{width:19px;height:19px}