/* AMPL elite pass. Progressive enhancement only: every rule here is decoration or motion.
   Motion is transform/opacity only and switches off under prefers-reduced-motion.
   Without JavaScript the page is complete; elite.js only adds the scrolled header,
   card spotlight and photo reveal. Stage colours are not used for decoration. */

/* ---------- 1. Living background lines (hero, footer, service headers) ---------- */
svg.trace{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;pointer-events:none;z-index:0;color:#9fb0d3}
.trace__r{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.2;vector-effect:non-scaling-stroke}
.trace__n rect{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.34;vector-effect:non-scaling-stroke}
.trace__p{fill:#eef2fb;opacity:0}
.trace--light{color:#3d4a78}
.trace--light .trace__r{opacity:.14}.trace--light .trace__n rect{opacity:.24}.trace--light .trace__p{fill:#3d4a78}
.sculpt-hero>.trace{z-index:0}
.foot{position:relative;isolation:isolate}
.sv-bh,.sv-mh,.sv-ch,.sv-ph{position:relative;isolation:isolate;overflow:clip}
.sv-bh>:not(.trace),.sv-mh>:not(.trace),.sv-ch>:not(.trace),.sv-ph>:not(.trace){position:relative;z-index:1}
@media(prefers-reduced-motion:no-preference){
  .trace__hero0{animation:trace-hero0 22s linear 0s infinite}
  .trace__hero1{animation:trace-hero1 17s linear 4s infinite}
  .trace__hero2{animation:trace-hero2 19s linear 9s infinite}
  .trace__side0{animation:trace-side0 22s linear 0s infinite}
  .trace__side1{animation:trace-side1 17s linear 4s infinite}
  .trace__side2{animation:trace-side2 19s linear 9s infinite}
}
/* packets travel the orthogonal routes, then rest; keyframe stops are proportional to segment lengths (generated) */
@keyframes trace-hero0{0%{transform:translate(560px,600px);opacity:0}3%{opacity:.9}5.05%{transform:translate(560px,545px)}34.46%{transform:translate(880px,545px)}38.59%{transform:translate(880px,500px)}68.0%{transform:translate(1200px,500px);opacity:.9}72%,100%{transform:translate(1200px,500px);opacity:0}}
@keyframes trace-hero1{0%{transform:translate(1200px,100px);opacity:0}3%{opacity:.9}26.71%{transform:translate(980px,100px)}34.0%{transform:translate(980px,40px)}68.0%{transform:translate(700px,40px);opacity:.9}72%,100%{transform:translate(700px,40px);opacity:0}}
@keyframes trace-hero2{0%{transform:translate(0px,60px);opacity:0}3%{opacity:.9}26.61%{transform:translate(180px,60px)}32.52%{transform:translate(180px,20px)}68.0%{transform:translate(420px,20px);opacity:.9}72%,100%{transform:translate(420px,20px);opacity:0}}
@keyframes trace-side0{0%{transform:translate(1200px,70px);opacity:0}3%{opacity:.9}33.66%{transform:translate(900px,70px)}38.83%{transform:translate(900px,24px)}68.0%{transform:translate(640px,24px);opacity:.9}72%,100%{transform:translate(640px,24px);opacity:0}}
@keyframes trace-side1{0%{transform:translate(1200px,300px);opacity:0}3%{opacity:.9}11.77%{transform:translate(1110px,300px)}40.54%{transform:translate(1110px,520px)}57.54%{transform:translate(980px,520px)}68.0%{transform:translate(980px,600px);opacity:.9}72%,100%{transform:translate(980px,600px);opacity:0}}
@keyframes trace-side2{0%{transform:translate(780px,600px);opacity:0}3%{opacity:.9}12.36%{transform:translate(780px,560px)}68.0%{transform:translate(960px,560px);opacity:.9}72%,100%{transform:translate(960px,560px);opacity:0}}

/* ---------- 2. Fine grain on the dark surfaces (static) ---------- */
.sculpt-hero::after,.foot::after,.sv-bh::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- 3. Header: a soft shadow fades in once the page scrolls ----------
   (Kept solid navy: the logo uses mix-blend-mode, which cannot blend over a blurred, translucent header.) */
.masthead::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .3s ease;box-shadow:0 12px 32px -16px #0b1220b3,0 2px 0 #ffffff0f inset}
.masthead[data-scrolled]::before{opacity:1}

/* ---------- 4. Buttons and links ---------- */
.btn,.nav .nav__cta{transition:transform .18s cubic-bezier(.2,.7,.3,1),background-color .18s ease,color .18s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:hover,.nav .nav__cta:hover{transform:translateY(-1px)}
}
@media(prefers-reduced-motion:no-preference){
  .btn:active,.nav .nav__cta:active{transform:scale(.97)}
}
.svc-action{position:relative;text-decoration:none!important}
.svc-action::after{content:"";position:absolute;left:0;right:0;bottom:.35rem;height:1.5px;background:currentColor;transform-origin:right;pointer-events:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .svc-action:hover::after{animation:underline-swap .55s cubic-bezier(.6,0,.3,1) both}
}
@keyframes underline-swap{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
}
html{scroll-padding-top:7rem}

/* ---------- 5. Card spotlight (fine pointers; span inserted by elite.js) ---------- */
.elite-spot{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:0}
.elite-spot::before{content:"";position:absolute;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
  background:radial-gradient(closest-side,#ffffffe6,#ffffff00);opacity:0;transform:translate(var(--mx,50%),var(--my,50%));transition:opacity .3s ease}
.has-spot{position:relative}
.has-spot>:not(.elite-spot){position:relative;z-index:1}
.has-spot:hover>.elite-spot::before{opacity:1}
@media(prefers-reduced-motion:reduce){.elite-spot{display:none}}

/* ---------- 6. Photo reveal (only when elite.js runs and motion is allowed) ---------- */
@media(prefers-reduced-motion:no-preference){
  .elite-js .elite-photo img{opacity:0;transform:scale(1.035);transition:opacity .9s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
  .elite-js .elite-photo.is-in img{opacity:1;transform:none}
}

/* ---------- 7. Service page headers: glass cards on the existing "Sounds like" and ticket boxes ---------- */
.sv-qcard,.sv-readout,.sv-ticket{-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);box-shadow:0 18px 40px -24px #232f4766,0 2px 8px -4px #232f4726}
.sv-qcard,.sv-readout{background-color:#fffdf7cc;border-radius:12px}
.sv-ticket{background-color:#ffffff0d}

/* ---------- 8. Typography polish (no copy, size or face changes) ---------- */
h1,h2,h3,.lede,.sv-hook{text-wrap:balance}
p,li,.sv-intro{text-wrap:pretty}
body{font-kerning:normal;text-rendering:optimizeLegibility}
.sculpt-hero,.foot,.dark,.sv-bh,.masthead{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.sv-catalogue-number,.sv-num,.sv-mono,time{font-variant-numeric:tabular-nums}
q{hanging-punctuation:first}

/* ---------- 9. Photographs ----------
   Home, Practice and Services photos moved to photo-stage.css (pass 6: photos as stages, not blocks). */
/* Contact: photo above the LinkedIn link */
.contact-side{display:grid;gap:1.25rem;align-content:start;min-width:0}
.contact-photo{margin:0}
.contact-photo img{display:block;width:100%;height:auto;aspect-ratio:1232/928;object-fit:cover;border-radius:20px;box-shadow:0 24px 48px -28px #232f4773,0 6px 16px -10px #232f4740}