/* ============================================================
   Dr. Jhah Anabirae — split-hero personal portfolio
   Newsreader (display) + Atkinson Hyperlegible (UI / body)
   ============================================================ */

:root{
  --bg:        #FFF7FA;   /* warm blush white */
  --bg-tint:   #FFE9F2;   /* blush */
  --white:     #FFFFFF;

  --ink:       #2B1622;   /* warm near-black with a plum cast */
  --ink-soft:  #6E4C5E;
  --line:      rgba(43,22,34,.12);

  /* The pink. --pink is the loud one and is for fills and shapes only;
     --pink-dp is the text-safe version (5.6:1 on white). */
  --pink:      #FF4FA3;
  --pink-hot:  #FF1F8C;
  --pink-dp:   #C11A6B;
  --pink-lt:   #FFE2EF;
  --berry:     #4A0F32;

  /* Gold as metal, not mustard: a flat fill never reads as gold. The gradient
     runs highlight -> mid -> shadow -> highlight again, which is what gives
     the sheen. --gold-sh is the only one dark enough for small text. */
  --gold-hi:   #FBF0C4;
  --gold:      #E7C566;
  --gold-mid:  #C89B31;
  --gold-sh:   #8C6A16;
  --gold-grad: linear-gradient(135deg,
                 #FBF0C4 0%, #E7C566 18%, #C89B31 34%,
                 #FFFBEA 48%, #D9AE45 62%, #C89B31 78%, #8C6A16 100%);

  /* Card accents: a playful spread, all readable as headings on white. */
  --lilac:     #7B3FBF;
  --coral:     #C6402F;
  --c-magenta: #A81AA0;
  --c-berry:   #7A1247;

  --rail-w:    5rem;
  --shell:     72rem;
  --pad:       clamp(1.5rem, 4vw, 4rem);

  --serif: "Newsreader", Georgia, serif;
  --sans:  "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;

  --shadow:    0 20px 45px -30px rgba(31,23,41,.45);
  --shadow-lg: 0 30px 60px -30px rgba(31,23,41,.4);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.7;
  overflow-x:hidden;
}

p{ margin:0 0 1.1em; }
a{ color:inherit; text-underline-offset:.2em; }
img{ max-width:100%; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:fixed; left:1rem; top:-5rem; z-index:300;
  background:var(--pink-dp); color:#fff;
  padding:.75rem 1.2rem; font-weight:700; text-decoration:none; border-radius:.5rem;
  transition:top .15s ease;
}
.skip:focus{ top:1rem; }

/* The rail is fixed, so the page body and the footer both have to clear it.
   Leaving the footer out means it slides under the rail. */
main, .colophon{ margin-left:var(--rail-w); }

.shell{ max-width:var(--shell); margin:0 auto; }

/* ─── Icon rail ──────────────────────────────────────────── */
.rail{
  position:fixed; left:0; top:0; bottom:0; z-index:200;
  width:var(--rail-w);
  display:flex; align-items:center; justify-content:center;
  background:var(--white);
  border-right:1px solid var(--line);
}
.rail ul{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; }
.rail-btn{
  position:relative;
  display:grid; place-items:center;
  width:3rem; height:3rem;
  border-radius:1rem;
  background:var(--bg);
  color:var(--ink-soft);
  text-decoration:none;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.rail-btn svg{ width:1.375rem; height:1.375rem; fill:currentColor; }
.rail-btn:hover,
.rail-btn.is-active{ background:var(--pink-dp); color:#fff; transform:translateX(2px); }
@media (prefers-reduced-motion: reduce){ .rail-btn:hover, .rail-btn.is-active{ transform:none; } }

.rail-tip{
  position:absolute; left:calc(100% + .65rem); top:50%;
  transform:translateY(-50%) scale(.9);
  transform-origin:left center;
  background:var(--ink); color:#fff;
  font-size:.75rem; white-space:nowrap;
  padding:.35rem .7rem; border-radius:.4rem;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.rail-btn:hover .rail-tip,
.rail-btn:focus-visible .rail-tip{ opacity:1; transform:translateY(-50%) scale(1); }

/* ─── Hero ───────────────────────────────────────────────── */
.hero{
  display:grid;
  /* the copy column is the narrower one now: a 3:2 landscape photograph
     needs the wider side */
  grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);
  min-height:100vh;
}
.hero-photo{
  position:relative;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:clamp(1.5rem, 3vw, 3.5rem);
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(255,79,163,.34), transparent 70%),
    linear-gradient(165deg, #FFEFF6 0%, #FFD9EA 55%, #FFC7E0 100%);
}

/* The hero photograph is a landscape editorial shot and is shown whole: her
   surname is spelled out in glitter along the floor, so cropping it tight or
   cutting her out would throw away the part that acts as a logotype.
   It sits in a gold frame, drawn as two background layers because
   border-image cannot follow a border-radius. */
.photo-frame{
  position:relative;
  z-index:2;
  margin:0;
  width:min(100%, 46rem);
  padding:3px;
  border-radius:1.6rem;
  background:var(--gold-grad);
  background-size:230% 100%;
  background-position:18% 0;
  box-shadow:0 26px 50px -28px rgba(120,20,70,.45);
  transition:background-position 1.1s cubic-bezier(.3,.7,.3,1), transform .5s ease;
}
.photo-frame img{
  display:block;
  width:100%; height:auto;
  /* a white mat separates the photograph's pale studio backdrop from the
     saturated pink panel, the way a mount does in a real frame */
  border:clamp(.5rem, 1.4vw, .9rem) solid #fff;
  border-radius:1.45rem;
  background:#fff;
}
.hero-photo:hover .photo-frame{ background-position:82% 0; transform:translateY(-4px); }
@media (prefers-reduced-motion: reduce){
  .photo-frame{ transition:none; }
  .hero-photo:hover .photo-frame{ transform:none; }
}


/* ─── Abstract shapes in the photo panel ─────────────────── */
.ph{ position:absolute; display:block; z-index:1; pointer-events:none; }
.ph-front{ z-index:4; }

.ph-disc{
  width:76%; aspect-ratio:1; border-radius:50%;
  left:12%; top:9%;
  background:radial-gradient(circle at 34% 28%, rgba(255,79,163,.52), rgba(255,31,140,.18) 62%, transparent 72%);
}
.ph-ring{
  width:64%; aspect-ratio:1; border-radius:50%;
  left:-14%; top:22%;
  border:2px solid rgba(193,26,107,.26);
}
.ph-ring--sm{
  width:34%; left:auto; right:-9%; top:8%;
  border-style:dashed;
  border-color:rgba(200,155,49,.6);
}
.ph-dots{
  width:9rem; height:9rem;
  left:6%; bottom:12%;
  background-image:radial-gradient(rgba(193,26,107,.45) 1.6px, transparent 1.7px);
  background-size:14px 14px;
  -webkit-mask-image:linear-gradient(135deg, #000 30%, transparent 78%);
          mask-image:linear-gradient(135deg, #000 30%, transparent 78%);
}
.ph-slash{
  width:140%; height:2px;
  left:-20%; top:34%;
  background:linear-gradient(90deg, transparent, rgba(200,155,49,.75) 35%, transparent);
  transform:rotate(-14deg);
}

/* in front of her */

.ph-arc{
  width:58%; aspect-ratio:1; border-radius:50%;
  left:24%; bottom:-24%;
  border:2px solid rgba(255,255,255,.45);
  border-bottom-color:transparent; border-right-color:transparent;
  transform:rotate(26deg);
}
.ph-bead{
  width:.85rem; height:.85rem; border-radius:50%;
  left:16%; top:30%;
  background:var(--pink-dp); opacity:.55;
}
.ph-bead--2{
  width:1.6rem; height:1.6rem;
  left:auto; right:14%; top:62%;
  background:none; border:2px solid rgba(255,79,163,.75); opacity:.8;
}

.hero-body{
  position:relative;
  display:flex; align-items:center;
  padding:clamp(3rem, 7vw, 6rem) var(--pad);
  overflow:hidden;
}
.blob{
  position:absolute; display:block;
  width:58rem; aspect-ratio:1; border-radius:50%;
  background:var(--pink-lt);
  top:-30%; right:-28%;
  z-index:0;
}
.blob--small{
  width:16rem; background:rgba(231,197,102,.35);
  top:auto; bottom:-6rem; right:38%;
}
.hero-content{ position:relative; z-index:1; max-width:36rem; }

.eyebrow{
  font-size:.9375rem; color:var(--ink-soft);
  margin:0 0 .35rem;
}
.hero h1{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(2.125rem, 1.2rem + 3.4vw, 4rem);
  line-height:1.08;
  letter-spacing:-.025em;
  margin:0 0 1rem;
}
.hl{ color:var(--pink-dp); }

.hero-role{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color:var(--berry);
  margin-bottom:1.25rem;
}
.hero-intro{ color:var(--ink-soft); max-width:34rem; margin-bottom:2rem; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; margin:0; }
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.6rem;
  border-radius:999px;
  font-weight:700; font-size:.9375rem;
  text-decoration:none;
  border:2px solid transparent;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.btn svg{ width:1.05rem; height:1.05rem; fill:currentColor; }
.btn--primary{ background:var(--pink-dp); color:#fff; }
.btn--primary:hover{ background:var(--berry); transform:translateY(-2px); }
.btn--dark{ background:var(--ink); color:#fff; }
.btn--dark:hover{ background:#000; transform:translateY(-2px); }
.btn--outline{ border-color:var(--pink-dp); color:var(--pink-dp); }
.btn--outline:hover{ background:var(--pink-dp); color:#fff; transform:translateY(-2px); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

.cred-pills{
  list-style:none; margin:2.25rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.cred-pills li{
  font-size:.8125rem; line-height:1.4;
  padding:.4rem .9rem; border-radius:999px;
  background:var(--white); border:1px solid var(--line);
  color:var(--ink-soft);
}

@media (max-width: 62rem){
  .hero{ grid-template-columns:1fr; min-height:0; }
  /* photo first on small screens: it is the strongest opening */
  .hero-photo{ order:-1; padding:clamp(1.25rem, 5vw, 2.5rem); }
  .photo-frame{ width:100%; }
}

/* ─── Sections ───────────────────────────────────────────── */
.section{ padding:clamp(3.5rem, 8vw, 7rem) var(--pad); }
.section--tint{ background:var(--bg-tint); }

.kicker{
  display:inline-block;
  font-size:.75rem; font-weight:700; letter-spacing:.16em;
  color:var(--pink-dp);
  background:var(--pink-lt);
  padding:.3rem .85rem; border-radius:999px;
  margin:0 0 1rem;
}
.section-h{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(1.75rem, 1.2rem + 2.2vw, 2.875rem);
  line-height:1.15; letter-spacing:-.02em;
  margin:0 0 1rem; max-width:22ch;
}
.section-note{ color:var(--ink-soft); max-width:52ch; margin-bottom:2.5rem; }
.section-h + .about-grid,
.section-h + .misread,
.section-h + .record,
.section-h + .contact-card{ margin-top:2.5rem; }

.lead{
  font-size:clamp(1.125rem, 1.05rem + .5vw, 1.375rem);
  line-height:1.5; color:var(--ink);
}

/* ─── About ──────────────────────────────────────────────── */
.about-grid{
  display:grid; gap:clamp(2rem, 5vw, 4rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
}
.about-copy p{ max-width:56ch; color:var(--ink-soft); }
.about-copy .lead{ color:var(--ink); margin-bottom:1.4rem; }

.facets{
  list-style:none; margin:0; padding:2rem;
  background:var(--white); border-radius:1.5rem;
  box-shadow:var(--shadow);
  display:grid; gap:.9rem;
}
.facets li{
  position:relative; padding-left:1.75rem;
  font-family:var(--serif); font-size:1.1875rem; line-height:1.35;
}
.facets li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:.6rem; height:.6rem; border-radius:50%;
  background:var(--gold);
}
.facets li strong{ font-weight:400; }
.facets-note{
  font-family:var(--sans)!important;
  font-size:.9375rem!important; line-height:1.6!important;
  color:var(--ink-soft);
  padding-left:0!important;
  padding-top:.9rem;
  border-top:1px solid var(--line);
}
.facets-note::before{ display:none; }
@media (max-width: 58rem){ .about-grid{ grid-template-columns:1fr; } }

/* ─── Specialty ──────────────────────────────────────────── */
.misread{
  list-style:none; margin:0 0 3rem; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(min(16rem,100%),1fr));
}
.misread li{
  background:var(--white); border-radius:1.5rem;
  padding:2rem 1.75rem;
  box-shadow:var(--shadow);
}
.misread-icon{
  display:grid; place-items:center;
  width:3.25rem; height:3.25rem; border-radius:1rem;
  background:var(--pink-lt); color:var(--pink-dp);
  margin-bottom:1.1rem;
}
.misread-icon svg{ width:1.6rem; height:1.6rem; fill:currentColor; }
.misread h3{
  font-family:var(--serif); font-weight:400;
  font-size:1.375rem; line-height:1.2; margin:0 0 .4rem;
}
.misread p{ margin:0; color:var(--ink-soft); }

.spec-copy{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit, minmax(min(18rem,100%),1fr));
}
.spec-copy p{ margin:0; color:var(--ink-soft); }

/* ─── Services ───────────────────────────────────────────── */
.services{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit, minmax(min(19rem,100%),1fr));
}
.card{
  position:relative;
  background:var(--white); border-radius:1.5rem;
  padding:2rem 1.75rem;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
@media (prefers-reduced-motion: reduce){ .card:hover{ transform:none; } }
.card-icon{
  display:grid; place-items:center;
  width:3.25rem; height:3.25rem; border-radius:1rem;
  background:color-mix(in srgb, var(--card) 14%, white);
  color:var(--card);
  margin-bottom:1.1rem;
}
.card-icon svg{ width:1.6rem; height:1.6rem; fill:currentColor; }
.card h3{
  font-family:var(--serif); font-weight:400;
  font-size:1.4375rem; line-height:1.2;
  margin:0 0 .7rem; color:var(--card);
}
.card p{ font-size:1rem; color:var(--ink-soft); margin-bottom:.8em; }
.card p:last-child{ margin-bottom:0; }

/* ─── Record ─────────────────────────────────────────────── */
.record{
  list-style:none; margin:0 0 2rem; padding:0 0 0 2.25rem;
  position:relative;
}
.record::before{
  content:""; position:absolute; left:.4375rem; top:1rem; bottom:1rem;
  width:2px; border-radius:2px;
  background:linear-gradient(var(--gold), var(--coral), var(--c-magenta));
}
.record li{
  position:relative;
  display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr);
  gap:.4rem 2.5rem;
  padding:1.4rem 0;
}
.record li::before{
  content:""; position:absolute; left:-2.25rem; top:2rem;
  width:.9375rem; height:.9375rem; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px rgba(231,197,102,.4);
}
.age{
  margin:0; font-family:var(--serif);
  font-size:clamp(2.25rem, 1.7rem + 1.6vw, 3rem); line-height:1;
  color:var(--pink-dp);
}
.age span{
  display:block; font-family:var(--sans);
  font-size:.6875rem; letter-spacing:.16em;
  color:var(--ink-soft); margin-bottom:.35rem;
}
.age--text{ font-size:clamp(1.5rem,1.2rem + 1vw,2rem); font-style:italic; }
.age-body{ margin:0; max-width:52ch; color:var(--ink-soft); }
@media (max-width: 47.5rem){
  .record li{ grid-template-columns:1fr; gap:.3rem; }
  .record li::before{ top:2.2rem; }
}
.record-note{ max-width:58ch; color:var(--ink-soft); margin-bottom:2rem; }

/* ─── Creed ──────────────────────────────────────────────── */
.creed{
  position:relative; overflow:hidden;
  background:var(--berry); color:#fff;
  padding:clamp(4rem, 9vw, 7rem) var(--pad);
}
.blob--creed{
  width:40rem; background:rgba(255,79,163,.18);
  top:auto; right:-14%; bottom:-45%;
}
.creed .shell{ position:relative; z-index:1; }
.creed blockquote{ margin:0; }
.creed blockquote > p{ max-width:56ch; color:rgba(255,255,255,.8); }
.creed-ask{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.625rem, 1.1rem + 2.6vw, 3.25rem);
  line-height:1.2; color:#fff;
  margin-top:1.75rem; max-width:22ch;
}
.creed-ask em{ font-style:italic; color:var(--gold); }

/* ─── Contact ────────────────────────────────────────────── */
.contact-card{
  background:var(--white); border-radius:1.75rem;
  padding:clamp(2rem, 4vw, 3rem);
  box-shadow:var(--shadow);
  max-width:48rem;
}
.contact-card .lead{ max-width:38ch; margin-bottom:1.25rem; }
.email{
  font-family:var(--serif);
  font-size:clamp(1.375rem, .9rem + 2.2vw, 2.5rem);
  line-height:1.15; margin:0 0 1.75rem; word-break:break-word;
}
.email a{ color:var(--pink-dp); text-decoration-color:var(--gold); text-decoration-thickness:2px; }
.email a:hover{ color:var(--berry); }

.elsewhere-h{
  font-family:var(--sans);
  font-size:.75rem; font-weight:700; letter-spacing:.16em;
  color:var(--ink-soft);
  margin:2.75rem 0 1rem;
}
.elsewhere{ display:flex; flex-wrap:wrap; gap:.65rem; list-style:none; margin:0; padding:0; }
.elsewhere a{
  display:inline-block;
  padding:.55rem 1.2rem; border-radius:999px;
  background:var(--white); border:1px solid var(--line);
  text-decoration:none; font-size:.9375rem; color:var(--ink);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.elsewhere a:hover{ background:var(--pink-dp); border-color:var(--pink-dp); color:#fff; }

/* ─── Colophon ───────────────────────────────────────────── */
.colophon{
  background:var(--ink); color:rgba(255,255,255,.7);
  padding:clamp(2.5rem, 5vw, 4rem) var(--pad);
}
.colophon-line{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.0625rem, 1rem + .7vw, 1.5rem);
  line-height:1.35; color:#fff; max-width:34ch; margin-bottom:1.5rem;
}
.colophon-meta{ font-size:.8125rem; line-height:1.6; max-width:58ch; margin:0; }

/* ─── Small screens: rail becomes a bottom bar ───────────── */
@media (max-width: 47.5rem){
  :root{ --rail-w:0rem; }
  main, .colophon{ margin-left:0; }
  .rail{
    top:auto; bottom:0; right:0; width:auto; height:auto;
    border-right:0; border-top:1px solid var(--line);
    padding:.5rem;
    box-shadow:0 -8px 24px -18px rgba(31,23,41,.5);
  }
  .rail ul{ grid-auto-flow:column; gap:.4rem; justify-content:space-around; width:100%; }
  .rail-btn{ width:2.75rem; height:2.75rem; border-radius:.85rem; }
  .rail-btn:hover, .rail-btn.is-active{ transform:none; }
  .rail-tip{ display:none; }
  .colophon{ padding-bottom:5.5rem; }
  section[id]{ scroll-margin-top:1rem; }
}

@media (forced-colors: active){
  .blob{ display:none; }
  .card, .misread li, .facets, .contact-card{ border:1px solid CanvasText; }
}

/* ─── Phones ─────────────────────────────────────────────── */
@media (max-width: 47.5rem){
  /* the bottom bar sits above the home indicator on iOS */
  .rail{ padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom)); }
  .colophon{ padding-bottom:calc(6rem + env(safe-area-inset-bottom)); }

  /* the big hero blob fills the whole panel at this width, so shrink it
     back to a shape rather than a background */
  .blob{ width:30rem; top:-14%; right:-30%; }
  .blob--small{ width:11rem; bottom:-3rem; right:auto; left:-3rem; }

  .hero-body{ padding-top:2.5rem; padding-bottom:3rem; }
  .hero-content{ max-width:none; }
  .hero h1{ font-size:clamp(1.875rem, 1.1rem + 4.4vw, 2.5rem); }

  /* full-width buttons read better than two half-width pills */
  .btn-row{ gap:.75rem; }
  .btn{ flex:1 1 13rem; justify-content:center; }

  .facets{ padding:1.5rem 1.25rem; }
  .facets li{ font-size:1.0625rem; }
  .card, .misread li{ padding:1.5rem 1.25rem; }
  .contact-card{ padding:1.5rem 1.25rem; }
  .elsewhere a{ padding:.65rem 1.1rem; }

  /* the timeline column would leave the numeral stranded on its own line */
  .record{ padding-left:1.75rem; }
  .record li{ padding:1.1rem 0; }
  .record li::before{ left:-1.75rem; }
}

/* very narrow phones */
@media (max-width: 22.5rem){
  :root{ --pad:1.125rem; }
  .cred-pills li{ font-size:.75rem; }
  .rail-btn{ width:2.5rem; height:2.5rem; }
  .rail-btn svg{ width:1.2rem; height:1.2rem; }
}

/* ============================================================
   Motion
   Reveal uses the independent `translate` property so it never
   fights the `transform` used by hover states.
   ============================================================ */

.reveal{ opacity:0; translate:0 20px; }
.reveal.is-in{
  opacity:1; translate:0 0;
  transition:opacity .7s cubic-bezier(.22,.7,.3,1) var(--d,0ms),
             translate .7s cubic-bezier(.22,.7,.3,1) var(--d,0ms);
}

/* ─── Ambient: the hero blobs drift ──────────────────────── */
@keyframes drift-a{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(-2.5%,3%,0) scale(1.06); }
}
@keyframes drift-b{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%    { transform:translate3d(4%,-5%,0) scale(1.1); }
}
.hero .blob{ animation:drift-a 18s ease-in-out infinite; }
.hero .blob--small{ animation:drift-b 13s ease-in-out infinite; }
.blob--creed{ animation:drift-b 22s ease-in-out infinite; }

/* the shapes drift slowly, each on its own clock */
@keyframes float-a{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(0,-14px,0) } }
@keyframes float-b{ 0%,100%{ transform:translate3d(0,0,0) } 50%{ transform:translate3d(10px,8px,0) } }
@keyframes spin-slow{ to{ transform:rotate(360deg) } }
.ph-ring--sm{ animation:spin-slow 46s linear infinite; }
.ph-bead{ animation:float-a 9s ease-in-out infinite; }
.ph-bead--2{ animation:float-b 12s ease-in-out infinite; }
.ph-dots{ animation:float-b 15s ease-in-out infinite; }

/* ─── Buttons: icon leads the way ────────────────────────── */
.btn{ position:relative; overflow:hidden; }
.btn svg{ transition:transform .28s cubic-bezier(.3,1.4,.5,1); }
.btn:hover svg, .btn:focus-visible svg{ transform:translateX(4px) rotate(-6deg); }
.btn--primary:hover, .btn--dark:hover{ box-shadow:0 12px 24px -12px rgba(193,26,107,.6); }
.btn--outline:hover{ box-shadow:0 12px 24px -14px rgba(193,26,107,.55); }
.btn:active{ transform:translateY(0) scale(.98); }

/* ─── Rail: springy, and the active icon breathes ────────── */
.rail-btn{ transition:background .2s ease, color .2s ease, transform .28s cubic-bezier(.3,1.5,.5,1); }
.rail-btn:hover{ transform:translateX(3px) scale(1.06); }
.rail-btn svg{ transition:transform .28s cubic-bezier(.3,1.5,.5,1); }
.rail-btn:hover svg{ transform:scale(1.12); }
@keyframes ring{
  0%  { box-shadow:0 0 0 0 rgba(255,79,163,.5); }
  70% { box-shadow:0 0 0 .6rem rgba(255,79,163,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,79,163,0); }
}
.rail-btn.is-active{ animation:ring 2.4s ease-out infinite; }

/* ─── Service cards ──────────────────────────────────────── */
.card{ transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease; }
.card::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(120% 80% at 50% 0%,
             color-mix(in srgb, var(--card) 12%, transparent) 0%, transparent 60%);
  opacity:0; transition:opacity .35s ease;
  pointer-events:none;
}
.card:hover{ transform:translateY(-7px); }
.card:hover::after, .card:focus-within::after{ opacity:1; }
.card-icon{ transition:transform .35s cubic-bezier(.3,1.4,.5,1), background .3s ease, color .3s ease; }
.card:hover .card-icon{
  transform:translateY(-3px) rotate(-7deg) scale(1.08);
  background:var(--card); color:#fff;
}
.card h3{ transition:letter-spacing .3s ease; }
.card:hover h3{ letter-spacing:-.01em; }

/* ─── Misread cards ──────────────────────────────────────── */
.misread li{ transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease; }
.misread li:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.misread-icon{ transition:transform .35s cubic-bezier(.3,1.4,.5,1), background .3s ease, color .3s ease; }
.misread li:hover .misread-icon{
  transform:rotate(-8deg) scale(1.1);
  background:var(--pink-dp); color:#fff;
}

/* ─── Facets: the dot leads the line ─────────────────────── */
.facets li{ transition:transform .25s cubic-bezier(.2,.8,.3,1), color .25s ease; }
.facets li::before{ transition:transform .3s cubic-bezier(.3,1.5,.5,1), background .25s ease; }
.facets li:not(.facets-note):hover{ transform:translateX(6px); color:var(--pink-dp); }
.facets li:not(.facets-note):hover::before{ transform:scale(1.5); background:var(--pink-dp); }

/* ─── Timeline: the marker pulses on approach ────────────── */
.record li::before{ transition:transform .3s cubic-bezier(.3,1.5,.5,1), box-shadow .3s ease; }
.record li:hover::before{ transform:scale(1.25); box-shadow:0 0 0 7px rgba(231,197,102,.38); }
.record li .age{ transition:transform .3s cubic-bezier(.2,.8,.3,1), color .25s ease; }
.record li:hover .age{ transform:translateX(4px); color:var(--berry); }

/* ─── Social pills ───────────────────────────────────────── */
.elsewhere a{ transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s cubic-bezier(.3,1.4,.5,1); }
.elsewhere a:hover{ transform:translateY(-3px); }

/* ─── Email: underline sweeps in ─────────────────────────── */
.email a{
  background-image:linear-gradient(var(--gold), var(--gold));
  background-size:0% .18em; background-position:0 92%; background-repeat:no-repeat;
  text-decoration:none;
  transition:background-size .4s cubic-bezier(.2,.8,.3,1), color .25s ease;
}
.email a:hover{ background-size:100% .18em; }

/* ─── Kicker pill ────────────────────────────────────────── */
.kicker{ transition:transform .3s cubic-bezier(.3,1.4,.5,1); }
.section:hover .kicker{ transform:translateY(-2px); }

/* ─── Contact card ───────────────────────────────────────── */
.contact-card{ transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease; }
.contact-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* ─── Respect the setting: all of the above stops ────────── */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-in{ opacity:1; translate:none; transition:none; }
  .hero .blob, .hero .blob--small, .blob--creed,
  .ph-ring--sm, .ph-bead, .ph-bead--2, .ph-dots,
  .rail-btn.is-active{ animation:none; }
  .btn svg, .rail-btn, .rail-btn svg, .card, .card-icon,
  .misread li, .misread-icon, .facets li, .facets li::before,
  .record li::before, .record li .age, .elsewhere a, .email a,
  .kicker, .contact-card{ transition:none; }
  .btn:hover svg, .rail-btn:hover, .rail-btn:hover svg,
  .card:hover, .card:hover .card-icon, .misread li:hover, .misread li:hover .misread-icon,
  .facets li:not(.facets-note):hover, .facets li:not(.facets-note):hover::before,
  .record li:hover::before, .record li:hover .age, .elsewhere a:hover,
  .contact-card:hover{ transform:none; }
  .email a{ background-size:100% .18em; }
}

/* ─── Headline typing ────────────────────────────────────── */
.typed{ display:inline; }
.caret{
  display:none;                     /* only shown while typing */
  width:.075em; height:.82em;
  margin-left:.06em;
  background:var(--pink-dp);
  vertical-align:-.04em;
  border-radius:1px;
}
.is-typing .caret{ display:inline-block; animation:blink 1.05s steps(1) infinite; }
.is-typing .typed-out{ white-space:pre-wrap; }
@keyframes blink{ 0%,49%{ opacity:1 } 50%,100%{ opacity:0 } }

/* the caret stops blinking and fades out once the line is finished */
.is-typed .caret{ display:inline-block; animation:fade-caret 1.4s ease forwards; }
@keyframes fade-caret{ 0%,55%{ opacity:1 } 100%{ opacity:0 } }

@media (prefers-reduced-motion: reduce){
  .caret{ display:none!important; }
}

/* ─── Rotating role line ─────────────────────────────────── */
.role-lead{ color:var(--ink-soft); font-style:normal; }
.role-rotator{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
}
.role-word{
  display:inline-block;
  transition:opacity .3s ease, translate .34s cubic-bezier(.22,.8,.3,1);
}
.role-word.is-out{ opacity:0; translate:0 -.55em; }
.role-word.is-pre{ opacity:0; translate:0 .55em; transition:none; }

@media (prefers-reduced-motion: reduce){
  .role-word{ transition:none; }
}

/* A document button whose file is not in place yet. */
.btn.is-missing{
  opacity:.5;
  cursor:not-allowed;
  border-style:dashed;
}
.btn.is-missing svg{ display:none; }

/* ============================================================
   Pink & gold
   The gold is a gradient everywhere it appears, so it catches a
   highlight the way metal does. Flat gold reads as mustard.
   ============================================================ */

/* Metallic type. The gradient is painted through the glyphs, and is wider
   than the text so a hover can slide the highlight across it. */
.hl--gold{
  background:var(--gold-grad);
  background-size:220% 100%;
  background-position:12% 0;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  transition:background-position .9s cubic-bezier(.3,.7,.3,1);
}
.section-h:hover .hl--gold,
.creed-ask:hover .hl--gold{ background-position:88% 0; }

/* Fallback: if background-clip:text is unsupported the text would vanish. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .hl--gold{ color:var(--gold-sh); -webkit-text-fill-color:currentColor; }
}

/* ─── Buttons ────────────────────────────────────────────── */
/* ─── Metallic gold buttons ──────────────────────────────── */

/* A convincing metal surface needs four things, not just a gold fill:
   a gradient that ramps highlight -> mid -> shadow, a bright top edge,
   a dark bottom edge, and a moving specular highlight. The gradient is
   kept to the lighter half of the gold ramp so dark text stays legible
   across the whole face. */
.btn--gold{
  background:linear-gradient(135deg,
    #FBEFC0 0%, #E8CE7A 12%, #CFA63F 30%,
    #FFF8DC 46%, #D4AA42 58%, #B98F2C 78%, #E0BE62 100%);
  background-size:230% 100%;
  background-position:16% 0;
  color:var(--ink);
  border:1px solid rgba(140,106,22,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(140,106,22,.4),
    0 10px 22px -14px rgba(160,120,30,.85);
  transition:background-position .8s cubic-bezier(.3,.7,.3,1),
             transform .16s ease, box-shadow .2s ease;
}
.btn--gold:hover{
  background-position:84% 0;
  color:var(--ink);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(140,106,22,.45),
    0 14px 26px -14px rgba(160,120,30,.95);
}

/* The shine: a narrow skewed highlight that travels across on hover. */
.btn--gold::after{
  content:"";
  position:absolute; top:-10%; bottom:-10%;
  left:-50%; width:36%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  pointer-events:none;
  transition:left .7s cubic-bezier(.3,.7,.3,1);
}
.btn--gold:hover::after,
.btn--gold:focus-visible::after{ left:125%; }

/* The dark button becomes its companion: ink face, gold lettering and a
   hairline gold edge, so the pair reads as a set. */
.btn--dark{
  background:var(--ink);
  color:var(--gold);
  border:1px solid rgba(231,197,102,.55);
}
.btn--dark:hover{
  background:#1B0D15;
  color:var(--gold-hi);
  border-color:rgba(231,197,102,.9);
}

@media (prefers-reduced-motion: reduce){
  .btn--gold, .btn--gold::after{ transition:none; }
  .btn--gold:hover::after, .btn--gold:focus-visible::after{ left:-50%; }
}

/* The document buttons are the gold ones: a gradient border drawn as a
   background layer, since border-image cannot follow a border-radius. */
.btn--outline{
  position:relative;
  border-color:transparent;
  color:var(--gold-sh);
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    var(--gold-grad) border-box;
  background-size:100% 100%, 220% 100%;
  background-position:0 0, 15% 0;
  transition:background-position .7s cubic-bezier(.3,.7,.3,1), color .2s ease;
}
.btn--outline:hover{
  background-position:0 0, 85% 0;
  color:var(--ink);
  box-shadow:0 10px 24px -16px rgba(200,155,49,.9);
}
.btn.is-missing{ background:none; border-color:var(--gold-mid); color:var(--gold-sh); }

/* ─── Gold details ───────────────────────────────────────── */
.record::before{ background:var(--gold-grad); }
.record li::before{
  background:radial-gradient(circle at 32% 28%, var(--gold-hi), var(--gold) 45%, var(--gold-mid) 78%, var(--gold-sh));
  box-shadow:0 0 0 4px rgba(231,197,102,.35), inset 0 -1px 2px rgba(140,106,22,.5);
}
.facets li::before{
  background:radial-gradient(circle at 34% 30%, var(--gold-hi), var(--gold) 50%, var(--gold-mid));
}
.email a{
  background-image:var(--gold-grad);
  background-size:0% .2em;
}
.email a:hover{ background-size:100% .2em; }

/* ─── Pink details ───────────────────────────────────────── */
:focus-visible{ outline-color:var(--pink-hot); }
.kicker{ background:var(--pink-lt); color:var(--pink-dp); }
.misread-icon{ background:var(--pink-lt); color:var(--pink-dp); }
.misread li:hover .misread-icon{ background:var(--pink); color:#fff; }
.rail-btn:hover, .rail-btn.is-active{
  background:linear-gradient(135deg, var(--pink), var(--pink-hot));
}
.elsewhere a:hover{
  background:linear-gradient(135deg, var(--pink), var(--pink-hot));
  border-color:transparent;
}
.caret{ background:var(--pink-hot); }
.hero-role{ color:var(--pink-dp); }

/* ─── Sparkles ───────────────────────────────────────────── */
.ph-star{
  width:1.5rem; aspect-ratio:1;
  background:var(--gold-grad);
  clip-path:polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  opacity:.9;
}
.ph-star--1{ left:9%;  top:16%; }
.ph-star--2{ right:16%; top:44%; left:auto; width:1rem; }
.ph-star--3{ left:22%; bottom:16%; width:.85rem; }

@keyframes twinkle{
  0%,100%{ transform:scale(1) rotate(0deg);   opacity:.9; }
  50%    { transform:scale(.72) rotate(18deg); opacity:.5; }
}
.ph-star--1{ animation:twinkle 4.5s ease-in-out infinite; }
.ph-star--2{ animation:twinkle 6s   ease-in-out infinite .8s; }
.ph-star--3{ animation:twinkle 5.2s ease-in-out infinite 1.6s; }

@media (prefers-reduced-motion: reduce){
  .ph-star{ animation:none!important; }
  .hl--gold, .btn--outline{ transition:none; }
}

/* ─── More gold throughout ───────────────────────────────── */

/* Credential chips get a hairline gold edge and a faint gold wash. */
.cred-pills li{
  border-color:rgba(200,155,49,.5);
  background:linear-gradient(180deg, #FFFDF6, #FFF6E3);
  color:var(--ink-soft);
}

/* Kicker pills: pink face, gold rule underneath. */
.kicker{
  border-bottom:2px solid transparent;
  border-image:var(--gold-grad) 1;
  border-radius:0;
  padding:.3rem .2rem;
  background:none;
  color:var(--pink-dp);
}

/* Social pills pick up gold on hover instead of flat pink. */
.elsewhere a{ border-color:rgba(200,155,49,.45); }
.elsewhere a:hover{
  background:linear-gradient(135deg, #FFFDF2, #E7C566 55%, #D3AC45);
  border-color:rgba(140,106,22,.5);
  color:var(--ink);
}

/* The rail's active chip gets a gold ring so the gold reads on every screen. */
.rail-btn.is-active{
  box-shadow:0 0 0 2px rgba(231,197,102,.9), 0 0 0 4px rgba(231,197,102,.25);
}

/* A gold hairline closes the statement band. */
.creed{ border-bottom:3px solid transparent; border-image:var(--gold-grad) 1; }

/* Section headings sit above a short gold rule. */
.section-h::after{
  content:"";
  display:block;
  width:3.5rem; height:3px;
  margin-top:1rem;
  background:var(--gold-grad);
  border-radius:2px;
}

/* The portrait panel gets a gold edge where it meets the copy. */
.hero-photo{ border-right:3px solid transparent; border-image:var(--gold-grad) 1; }
@media (max-width: 62rem){
  .hero-photo{ border-right:0; border-bottom:3px solid transparent; border-image:var(--gold-grad) 1; }
}

/* ============================================================
   Round of client changes: pink secondary button, split
   credentials, butterfly card, specialty rebuild
   ============================================================ */

/* ─── Bright pink button ─────────────────────────────────── */
/* Dark ink on bright pink: white on this pink only reaches 3.6:1. */
.btn--pink{
  background:linear-gradient(135deg, #FF7ABB 0%, var(--pink) 48%, var(--pink-hot) 100%);
  color:var(--ink);
  border:1px solid rgba(193,26,107,.35);
  box-shadow:0 10px 22px -14px rgba(255,31,140,.9);
}
.btn--pink:hover{
  background:linear-gradient(135deg, #FF95CB 0%, #FF5FAB 50%, var(--pink) 100%);
  color:var(--ink);
  transform:translateY(-2px);
}

/* ─── Credentials, two groups ────────────────────────────── */
.creds{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.25rem 1.75rem;
  margin-top:2.25rem;
}
.cred-group .cred-pills{ margin-top:.6rem; }
.cred-h{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:1.125rem;
  color:var(--pink-dp);
  display:flex; align-items:center; gap:.6rem;
}
.cred-h::after{
  content:""; flex:1; height:1px;
  background:var(--gold-grad);
  opacity:.8;
}
@media (max-width: 30rem){
  .creds{ grid-template-columns:1fr; }
}

/* ─── Butterfly card ─────────────────────────────────────── */
.facets-card{
  position:relative;
  overflow:hidden;
  border-radius:1.75rem;
  padding:2.25rem 2rem;
  background:
    radial-gradient(120% 90% at 50% 40%, #FFF3F9 0%, #FFE4F0 70%, #FFD6E9 100%);
  box-shadow:var(--shadow);
  border:1px solid rgba(200,155,49,.35);
}
.facets-art{
  position:absolute;
  left:50%; top:50%;
  width:118%;
  transform:translate(-50%,-50%);
  opacity:.22;
  pointer-events:none;
}
@keyframes flutter{
  0%,100%{ transform:translate(-50%,-50%) scaleX(1); }
  50%    { transform:translate(-50%,-50%) scaleX(.94); }
}
.facets-card:hover .facets-art{ animation:flutter 1.6s ease-in-out infinite; }

/* the list sits on the card now, so it loses its own card styling */
.facets-card .facets{
  position:relative; z-index:1;
  background:none; box-shadow:none; padding:0;
}
.facets-card .facets li{ padding-left:2.1rem; }
.facets-card .facets li:not(.facets-note)::before{
  width:1.35rem; height:1.35rem;
  left:0; top:.05em;
  border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23FF4FA3' d='M12 10c-1.4-3.6-4.2-6-7-6-2 0-3 1.4-3 3.2 0 2.6 2.3 4.6 5.4 5.3C4.9 13.1 3 14.7 3 17c0 1.8 1.2 3 2.8 3 2.4 0 4.6-2.4 6.2-6 1.6 3.6 3.8 6 6.2 6 1.6 0 2.8-1.2 2.8-3 0-2.3-1.9-3.9-4.4-4.5C19.7 11.8 22 9.8 22 7.2 22 5.4 21 4 19 4c-2.8 0-5.6 2.4-7 6z'/%3E%3Cpath fill='%23C11A6B' d='M11.3 8h1.4v12h-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  box-shadow:none;
}
.facets-card .facets li:not(.facets-note):hover::before{
  transform:rotate(-12deg) scale(1.25);
  background-color:transparent;
}
.facets-card .facets-note{ border-top-color:rgba(193,26,107,.2); }

@media (prefers-reduced-motion: reduce){
  .facets-card:hover .facets-art{ animation:none; }
}

/* ─── Specialty, rebuilt ─────────────────────────────────── */
.spec{
  background:
    radial-gradient(60% 50% at 10% 10%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(50% 40% at 90% 90%, rgba(255,194,224,.55), transparent 70%),
    linear-gradient(180deg, #FFF0F6, #FFE6F1);
}
.spec-h{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.1rem, 1.3rem + 3.2vw, 4rem);
  line-height:1.08;
  letter-spacing:-.015em;
  text-align:center;
  max-width:18ch;
  margin:0 auto clamp(2.5rem, 5vw, 3.75rem);
}
.spec-h::before{
  content:""; display:block;
  width:3rem; height:1px; margin:0 auto 1.5rem;
  background:var(--gold-grad);
}
.spec-h em{ color:var(--pink-dp); font-style:italic; }

.spec .misread{ margin-bottom:clamp(2.5rem, 5vw, 4rem); }
.spec .misread li{
  text-align:center;
  padding:2.5rem 1.75rem 2.25rem;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.spec .misread-icon{
  width:5.5rem; height:5.5rem;
  margin:0 auto 1.35rem;
  border-radius:46% 54% 42% 58% / 55% 45% 55% 45%;
  background:radial-gradient(circle at 40% 35%, #FF9ACB, #FF6FB5 55%, rgba(255,111,181,.25) 100%);
  box-shadow:0 0 0 .6rem rgba(255,122,187,.14);
  color:#fff;
}
.spec .misread-icon svg{ width:2.1rem; height:2.1rem; }
.spec .misread li:hover .misread-icon{ background:radial-gradient(circle at 40% 35%, #FF7ABB, var(--pink-hot)); }
.spec .misread h3{ font-size:1.5rem; margin-bottom:.5rem; }
.spec .misread p{ font-family:var(--serif); font-size:1.125rem; }

.spec-cols{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:0;
  align-items:stretch;
}
.spec-col{
  padding:1.75rem 2rem;
  border-left:1px solid rgba(193,26,107,.18);
}
.spec-col:first-child{ border-left:0; }
.spec-col h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.5rem, 1.2rem + .9vw, 1.9rem);
  line-height:1.15;
  margin:0 0 .9rem;
}
.spec-col h3 em{ color:var(--pink-dp); font-style:italic; }
.spec-col p{ margin:0; color:var(--ink-soft); font-size:1rem; }

.spec-col--feature{
  position:relative;
  border-left:0;
  border-radius:1.5rem;
  background:linear-gradient(160deg, #FFE0EE, #FFD2E7);
  box-shadow:0 18px 40px -30px rgba(193,26,107,.6);
  padding-left:2rem;
}
.spec-col--feature + .spec-col{ border-left:0; }
.spec-heart{
  display:grid; place-items:center;
  width:2.75rem; height:2.75rem;
  border-radius:50%;
  background:rgba(255,255,255,.7);
  color:var(--pink-dp);
  margin-bottom:1rem;
}
.spec-heart svg{ width:1.3rem; height:1.3rem; fill:none; stroke:currentColor; stroke-width:1.8; }

@media (max-width: 52rem){
  .spec-cols{ grid-template-columns:1fr; gap:1rem; }
  .spec-col{ border-left:0; border-top:1px solid rgba(193,26,107,.18); padding:1.5rem .25rem; }
  .spec-col:first-child{ border-top:0; }
  .spec-col--feature{ border-top:0; padding:1.75rem 1.5rem; }
  .spec-col--feature + .spec-col{ border-top:0; }
}

/* ============================================================
   Round: serif headings, pinker highlights, butterflies
   ============================================================ */

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Brighter pink for the highlighted words in headings. Only legal at
   heading sizes: 3.8:1 clears the 3:1 bar for large text, not the 4.5:1
   bar for body text, so small text keeps --pink-dp. */
:root{ --pink-word:#E8337F; }

/* ─── Every heading in the Newsreader serif ──────────────── */
.hero h1,
.section-h,
.card h3,
.misread h3,
.contact-card h3{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.015em;
}
.hero h1{ line-height:1.02; font-size:clamp(2.5rem, 1.4rem + 4vw, 4.75rem); }
.section-h{ font-size:clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height:1.06; }

.hl,
.spec-h em,
.spec-col h3 em{ color:var(--pink-word); font-style:italic; }
.hl--gold{ font-style:italic; }
.caret{ background:var(--pink-word); }

/* ─── About: the list lives inside the butterfly ─────────── */
.facets-card{
  background:none;
  border:0;
  box-shadow:none;
  overflow:visible;
  padding:3.5rem 1.5rem;
  display:grid;
  place-items:center;
}
.facets-art{
  width:132%;
  max-width:none;
  opacity:.42;
  filter:drop-shadow(0 18px 30px rgba(193,26,107,.25));
}
.facets-card .facets{
  text-align:center;
  gap:.55rem;
  max-width:24rem;
}
.facets-card .facets li{ padding-left:0; }
.facets-card .facets li:not(.facets-note)::before{
  position:static;
  display:inline-block;
  vertical-align:-.15em;
  margin-right:.5rem;
  width:1.1rem; height:1.1rem;
}
.facets-card .facets li:not(.facets-note):hover{ transform:none; }
.facets-card .facets-note{
  border-top:0;
  padding-top:.4rem;
  font-style:italic;
  color:var(--ink-soft);
}
@media (max-width: 58rem){
  .facets-art{ width:118%; }
}

/* ─── Footer: a flock rising out of it ───────────────────── */
/* Static on purpose: size and opacity shrink as they climb, so they read as
   flying away without any animation. */
.colophon{ position:relative; overflow:visible; }
.flock{
  position:absolute; inset:0 0 auto 0;
  height:0;
  pointer-events:none;
  z-index:5;
}
.flutter{
  position:absolute;
  display:block;
  filter:drop-shadow(0 8px 12px rgba(74,15,50,.25));
}
.flutter--a{ right:7%;  top:-2.2rem;  width:6rem;   transform:rotate(-14deg); }
.flutter--b{ right:19%; top:-5.5rem;  width:4.2rem; transform:rotate(12deg);  opacity:.92; }
.flutter--c{ right:12%; top:-8.6rem;  width:3.2rem; transform:rotate(-22deg); opacity:.85; }
.flutter--d{ right:29%; top:-9.8rem;  width:2.6rem; transform:rotate(18deg);  opacity:.78; }
.flutter--e{ right:21%; top:-13rem;   width:2rem;   transform:rotate(-10deg); opacity:.68; }
.flutter--f{ right:35%; top:-15rem;   width:1.5rem; transform:rotate(24deg);  opacity:.55; }
.flutter--g{ right:27%; top:-17.4rem; width:1.1rem; transform:rotate(-26deg); opacity:.42; }

@media (max-width: 47.5rem){
  .flutter--a{ width:4.2rem; top:-1.6rem; }
  .flutter--b{ width:3rem;   top:-4rem; }
  .flutter--c{ width:2.3rem; top:-6.2rem; }
  .flutter--d{ width:1.9rem; top:-7rem; }
  .flutter--e{ width:1.5rem; top:-9.2rem; }
  .flutter--f{ width:1.1rem; top:-10.6rem; }
  .flutter--g{ display:none; }
}

/* Behind the text the butterfly's body is faint, so it doesn't strike through
   the words; custom properties inherit into <use>, so one symbol serves both. */
.facets-art{ --bf-body:rgba(193,26,107,.18); }
.facets-card .facets li,
.facets-card .facets-note{ text-shadow:0 0 10px #fff, 0 0 2px #fff; }

/* List bullets use the same butterfly as everywhere else. */
.facets-card .facets li:not(.facets-note)::before{ display:none; }
.bf-bullet{
  display:inline-block;
  width:1.45rem; height:auto;
  margin-right:.45rem;
  vertical-align:-.3em;
  transition:transform .3s cubic-bezier(.3,1.5,.5,1);
}
.facets-card .facets li:hover .bf-bullet{ transform:rotate(-14deg) scale(1.2); }
@media (prefers-reduced-motion: reduce){
  .facets-card .facets li:hover .bf-bullet{ transform:none; }
}

/* The About butterfly is deliberately wider than its column; clip the
   section's sides so it can never push the page into a horizontal scroll.
   overflow-x:clip, unlike hidden, doesn't create a scroll container. */
#about{ overflow-x:clip; }

/* ============================================================
   Round: legible gold type, Record edits, Services rebuild
   ============================================================ */

/* Gold *type* needs its own, darker ramp. The decorative gold gradient has
   highlight stops at 1.0-1.5:1 against the pink sections, which is why
   "twenty-five" washed out. Here the brightest stop (#A67C1E) is 3.3:1, so
   the words keep a metallic highlight and stay readable at heading size. */
:root{
  --gold-text: linear-gradient(100deg,
    #7A5C10 0%, #9A7418 22%, #A67C1E 40%, #8C6A16 58%, #A67C1E 76%, #7A5C10 100%);
}
.hl--gold{
  /* background-image, not the background shorthand: the shorthand resets
     background-clip to the full box and paints the gradient as a solid block */
  background-image:var(--gold-text);
  background-size:220% 100%;
  -webkit-background-clip:text;
          background-clip:text;
}

/* ─── Record ─────────────────────────────────────────────── */
/* the second sentence sits under the first, in the text column */
.record li .age-body--next{ grid-column:2; margin-top:.35rem; }
.age-body strong{ color:var(--ink); font-weight:700; }
@media (max-width: 47.5rem){
  .record li .age-body--next{ grid-column:auto; }
}

/* ─── Services ───────────────────────────────────────────── */
.svcs{
  background:
    radial-gradient(45% 35% at 0% 0%, rgba(255,194,224,.45), transparent 70%),
    radial-gradient(40% 35% at 100% 100%, rgba(255,194,224,.4), transparent 70%),
    #FFF8FA;
}
.svcs-h{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.2rem, 1.3rem + 3.4vw, 4.2rem);
  line-height:1.05;
  letter-spacing:-.015em;
  text-align:center;
  margin:0 auto .75rem;
  color:#5E1B3C;
}
.svcs-note{
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(1.1rem, 1rem + .4vw, 1.3rem);
  letter-spacing:.04em;
  color:var(--ink-soft);
  margin:0 auto clamp(2.5rem, 5vw, 3.5rem);
  max-width:none;
}

.svc-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(19rem,100%),1fr));
  gap:1.35rem;
}
.svc{
  position:relative;
  padding:2rem 1.75rem 1.9rem;
  border-radius:1.25rem;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(193,26,107,.1);
  box-shadow:0 18px 40px -32px rgba(94,27,60,.5);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.svc:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -30px rgba(94,27,60,.55); }
.svc--feature{
  background:linear-gradient(170deg, #FFF1F6, #FFE3EE);
  border:1.5px solid rgba(232,51,127,.35);
}

.svc-top{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:1.1rem;
  margin-bottom:1.1rem;
}
.svc-icon{
  display:grid; place-items:center;
  width:4.25rem; height:4.25rem;
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #FBE3EC, #F4CFDC);
  color:#A8436C;
  transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}
.svc-icon svg{ width:1.9rem; height:1.9rem; fill:currentColor; }
.svc-icon svg[viewBox="0 0 200 170"]{ width:2.6rem; }
.svc:hover .svc-icon{ transform:rotate(-8deg) scale(1.06); }
.svc h3{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.45rem, 1.2rem + .7vw, 1.75rem);
  line-height:1.12;
  color:#5E1B3C;
}
.svc-intro{
  font-family:var(--serif);
  font-size:1.125rem;
  line-height:1.45;
  color:var(--ink-soft);
  margin:0 0 1.1rem;
}
.svc-list{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.svc-list li{
  position:relative;
  padding-left:1.75rem;
  font-size:1rem;
  color:var(--ink-soft);
  line-height:1.45;
}
/* petal bullets */
.svc-list li::before{
  content:"";
  position:absolute; left:0; top:.4em;
  width:.95rem; height:.55rem;
  border-radius:100% 0 100% 0;
  background:linear-gradient(135deg, #F3A7C4, #E07AA2);
  transform:rotate(-20deg);
}
@media (prefers-reduced-motion: reduce){
  .svc, .svc-icon{ transition:none; }
  .svc:hover, .svc:hover .svc-icon{ transform:none; }
}

/* On the dark statement band the dark gold ramp would sink in, so gold type
   there keeps the bright ramp. */
.creed .hl--gold{ background-image:var(--gold-grad); }

/* ─── Statement band: pink, not plum ─────────────────────── */
/* #D1206C -> #C2185B keeps white text at 5.1-5.9:1. */
.creed{
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(255,122,187,.35), transparent 60%),
    linear-gradient(135deg, #D1206C 0%, #C2185B 100%);
}
.creed blockquote > p{ color:#fff; }
.blob--creed{ background:rgba(255,160,205,.28); }

/* Gold words on pink use the light end of the ramp only: the darker golds
   drop under 3:1 against this pink. Lightest-to-darkest stop here is
   #FFF8DC (≈5:1) down to #F2D27A (≈3.5:1). */
.creed .hl--gold{
  background-image:linear-gradient(100deg,
    #F2D27A 0%, #FFF3C8 30%, #FFFDF2 48%, #F6DE92 66%, #F2D27A 100%);
}

/* On phones the flock would climb into the social buttons. Flatten the
   climb and reserve that height at the bottom of the contact section, so
   the butterflies rise through empty space. */
@media (max-width: 47.5rem){
  #contact{ padding-bottom:9.5rem; }
  .flutter--a{ top:-1.4rem; }
  .flutter--b{ top:-2.9rem; }
  .flutter--c{ top:-4.1rem; }
  .flutter--d{ top:-4.8rem; }
  .flutter--e{ top:-5.9rem; }
  .flutter--f{ top:-6.7rem; }
}

/* Wider screens: same principle as phones. A shorter climb, and the space
   it needs reserved at the bottom of the contact section. */
@media (min-width: 47.5001rem){
  #contact{ padding-bottom:13rem; }
  .flutter--a{ top:-2.2rem; }
  .flutter--b{ top:-4.1rem; }
  .flutter--c{ top:-5.8rem; }
  .flutter--d{ top:-6.9rem; }
  .flutter--e{ top:-8.4rem; }
  .flutter--f{ top:-9.7rem; }
  .flutter--g{ top:-10.8rem; }
}

/* ─── Spacing pass: less dead air between and inside sections ─ */
/* Sections were 56-112px apart on phones and up to 224px on desktop. */
.section{ padding-top:clamp(2.25rem, 5vw, 4.5rem); padding-bottom:clamp(2.25rem, 5vw, 4.5rem); }
.creed{ padding-top:clamp(2.75rem, 6vw, 5rem); padding-bottom:clamp(2.75rem, 6vw, 5rem); }
.section-h{ margin-bottom:.75rem; }
.section-note{ margin-bottom:clamp(1.5rem, 3vw, 2.25rem); }
.section-h + .about-grid,
.section-h + .record,
.section-h + .contact-card{ margin-top:1.5rem; }
.spec-h{ margin-bottom:clamp(1.75rem, 4vw, 3rem); }
.spec .misread{ margin-bottom:clamp(1.75rem, 4vw, 3rem); }
.svcs-note{ margin-bottom:clamp(1.75rem, 4vw, 2.75rem); }

/* The butterfly card only needs enough height to show the wings; the list
   was floating in 76px of empty padding above it. */
.facets-card{ padding:1.75rem .75rem; }
.about-grid{ gap:clamp(1rem, 4vw, 3.5rem); }
@media (min-width: 58.001rem){
  .facets-card{ padding:2.25rem 1.25rem; }
}
@media (max-width: 47.5rem){
  .hero-body{ padding-bottom:2rem; }
}

/* Desktop: sections sat 128-199px apart. */
.section{ padding-top:clamp(2.25rem, 4vw, 3.5rem); padding-bottom:clamp(2.25rem, 4vw, 3.5rem); }
.creed{ padding-top:clamp(2.75rem, 5vw, 4rem); padding-bottom:clamp(2.75rem, 5vw, 4rem); }
@media (min-width: 47.5001rem){
  .hero-body{ padding-top:clamp(2.5rem, 5vw, 4rem); padding-bottom:clamp(2.5rem, 5vw, 4rem); }
}
/* the closing line of the quote was adding a paragraph margin on top of the
   band's own padding */
.creed blockquote > p:last-child{ margin-bottom:0; }

/* ─── Footer swarm ───────────────────────────────────────── */
/* Twelve butterflies at mixed sizes and angles, rising from the footer.
   A narrowed scaleX reads as a wing tilted away, which is what gives the
   swarm depth instead of looking like stickers. */
.flock{ transform-origin:100% 0; }
.fly{
  position:absolute;
  display:block;
  height:auto;
  filter:drop-shadow(0 6px 8px rgba(229,45,134,.22));
}
.fly-1 { right:6%;  top:-2.6rem;  width:5.4rem; transform:rotate(-16deg); }
.fly-2 { right:20%; top:-3.3rem;  width:2.3rem; transform:rotate(22deg)  scaleX(.6); }
.fly-3 { right:13%; top:-5.6rem;  width:3.8rem; transform:rotate(12deg)  scaleX(.72); }
.fly-4 { right:29%; top:-6.2rem;  width:1.7rem; transform:rotate(-24deg); }
.fly-5 { right:3%;  top:-7.4rem;  width:2.1rem; transform:rotate(18deg)  scaleX(.55); }
.fly-6 { right:22%; top:-8.4rem;  width:3rem;   transform:rotate(-10deg); }
.fly-7 { right:35%; top:-9rem;    width:1.35rem;transform:rotate(28deg); }
.fly-8 { right:10%; top:-10.1rem; width:1.6rem; transform:rotate(-30deg) scaleX(.6); }
.fly-9 { right:17%; top:-11.3rem; width:2.4rem; transform:rotate(8deg); }
.fly-10{ right:30%; top:-11.6rem; width:1.15rem;transform:rotate(-18deg); }
.fly-11{ right:41%; top:-5.2rem;  width:1.25rem;transform:rotate(14deg)  scaleX(.5); }
.fly-12{ right:1%;  top:-11.4rem; width:1.05rem;transform:rotate(24deg); }

/* The whole swarm shrinks as one on phones, so its shape holds and it
   stays inside the space reserved above the footer. */
@media (max-width: 47.5rem){
  .flock{ transform:scale(.62); }
}
@media (min-width: 47.5001rem) and (max-width: 62rem){
  .flock{ transform:scale(.8); }
}

/* ============================================================
   Hero photo: out of the frame, floating on the page
   ============================================================ */

/* The panel stops being a separate block: no gold divider, and its pink
   becomes a soft glow with no hard edge, so she sits on the page itself. */
.hero-photo{
  border:0;
  border-image:none;
  background:
    radial-gradient(55% 50% at 50% 48%, rgba(255,122,187,.38), rgba(255,179,214,.18) 55%, transparent 78%);
}
@media (max-width: 62rem){
  .hero-photo{ border:0; border-image:none; }
}

/* The shadow lives on the wrapper, not the image: filters run before masks,
   so a drop-shadow on the masked image would be the shadow of its whole
   rectangle, then cut off. On the wrapper it traces her outline. */
.float-wrap{
  position:relative;
  z-index:2;
  width:min(108%, 50rem);
  filter:drop-shadow(0 26px 24px rgba(229,45,134,.28));
  animation:float-bob 7s ease-in-out infinite;
}
.hero-cutout{
  display:block;
  width:100%; height:auto;
  -webkit-mask-image:url("assets/jhah-hero-2-matte.png");
          mask-image:url("assets/jhah-hero-2-matte.png");
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}
@keyframes float-bob{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}

/* ─── Butterflies bursting outward from her ──────────────── */
.burst{
  position:absolute;
  z-index:4;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 5px 7px rgba(229,45,134,.25));
  animation:burst-drift 6s ease-in-out infinite;
}
.burst-1{ left:28%; top:12%; width:3.2rem; --r:-30deg; }
.burst-2{ left:43%; top:5%;  width:2.1rem; --r:-6deg;  --sx:.6; }
.burst-3{ left:56%; top:11%; width:3.6rem; --r:18deg; }
.burst-4{ left:69%; top:4%;  width:1.8rem; --r:30deg; }
.burst-5{ left:74%; top:21%; width:2.6rem; --r:40deg;  --sx:.65; }
.burst-6{ left:17%; top:25%; width:1.6rem; --r:-40deg; }
.burst-7{ left:84%; top:13%; width:1.4rem; --r:24deg; }
.burst-8{ left:63%; top:28%; width:1.3rem; --r:12deg;  --sx:.55; }
/* each drifts a little further out and back on its own clock */
@keyframes burst-drift{
  0%,100%{ transform:rotate(var(--r,0deg)) scaleX(var(--sx,1)) translateY(0); }
  50%    { transform:rotate(var(--r,0deg)) scaleX(var(--sx,1)) translateY(-8px); }
}
.burst-2{ animation-delay:-1s; }  .burst-3{ animation-delay:-2.2s; }
.burst-4{ animation-delay:-3s; }  .burst-5{ animation-delay:-4.1s; }
.burst-6{ animation-delay:-.6s; } .burst-7{ animation-delay:-2.7s; }
.burst-8{ animation-delay:-5s; }

@media (max-width: 47.5rem){
  .float-wrap{ width:100%; }
  .burst{ transform-origin:center; }
  .burst-1{ width:2.2rem; } .burst-3{ width:2.5rem; } .burst-5{ width:1.8rem; }
  .burst-2,.burst-4,.burst-6,.burst-7,.burst-8{ width:1.2rem; }
}

@media (prefers-reduced-motion: reduce){
  .float-wrap, .burst{ animation:none; }
  .burst{ transform:rotate(var(--r,0deg)) scaleX(var(--sx,1)); }
}

/* Cropped version: matte and photo trimmed to her and the glitter. */
.hero-cutout{
  -webkit-mask-image:url("assets/jhah-hero-2-matte.png");
          mask-image:url("assets/jhah-hero-2-matte.png");
}
.float-wrap{ width:min(100%, 44rem); }

/* Butterflies now sit inside the wrapper, so these percentages are measured
   from her: head at roughly 32% across, 12% down. They fan out up and away. */
.burst{ z-index:3; }
.burst-1{ left:14%; top:-6%;  width:2.8rem; --r:-30deg; --sx:1; }
.burst-2{ left:25%; top:-17%; width:1.8rem; --r:-12deg; --sx:.6; }
.burst-3{ left:41%; top:-13%; width:3.2rem; --r:16deg;  --sx:1; }
.burst-4{ left:55%; top:-23%; width:1.6rem; --r:28deg;  --sx:1; }
.burst-5{ left:60%; top:1%;   width:2.4rem; --r:36deg;  --sx:.65; }
.burst-6{ left:3%;  top:13%;  width:1.5rem; --r:-42deg; --sx:1; }
.burst-7{ left:72%; top:-11%; width:1.3rem; --r:22deg;  --sx:1; }
.burst-8{ left:49%; top:17%;  width:1.2rem; --r:10deg;  --sx:.55; }
@media (max-width: 47.5rem){
  .burst-1{ width:2rem; } .burst-3{ width:2.3rem; } .burst-5{ width:1.7rem; }
  .burst-2,.burst-4,.burst-6,.burst-7,.burst-8{ width:1.1rem; }
}
/* phones: room above her for the butterflies that fly up out of the photo */
@media (max-width: 47.5rem){
  .hero-photo{ padding-top:3.25rem; }
}
@media (max-width: 47.5rem){
  .burst-4{ top:-14%; }
  .burst-2{ top:-13%; }
}

/* ============================================================
   Round: Garamond type, softer quote band, subtler butterfly
   ============================================================ */

/* Headings in Cormorant Garamond (softer, rounder curves, nothing like
   Times); smaller serif text in EB Garamond, which stays readable at
   body sizes where Cormorant gets thin. */
:root{
  --serif:   "EB Garamond", Garamond, "Cormorant Garamond", Georgia, serif;
  --display: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
}
.hero h1, .section-h, .spec-h, .svcs-h, .creed-ask,
.spec-col h3, .misread h3, .svc h3, .card h3, .age, .cred-h, .email{
  font-family:var(--display);
  letter-spacing:0;
}
.hero h1, .section-h, .spec-h, .svcs-h, .creed-ask{ font-weight:500; }
.spec-col h3, .misread h3, .svc h3, .card h3, .cred-h{ font-weight:600; }
/* Cormorant runs small for its size, so headings step up slightly */
.hero h1{ font-size:clamp(2.8rem, 1.6rem + 4.4vw, 5.2rem); line-height:1; }
.section-h{ font-size:clamp(2.2rem, 1.4rem + 2.8vw, 3.7rem); line-height:1.05; }
.spec-h, .svcs-h{ font-size:clamp(2.4rem, 1.4rem + 3.6vw, 4.5rem); }
.svc h3{ font-size:clamp(1.6rem, 1.3rem + .8vw, 1.95rem); }
.spec-col h3{ font-size:clamp(1.65rem, 1.3rem + 1vw, 2.1rem); }
.misread h3, .spec .misread h3{ font-size:1.7rem; }

/* line-style icons (the brain, the workshop book) */
svg.icon-line,
.svc-icon svg.icon-line,
.misread-icon svg.icon-line{
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* bold word in body copy */
.spec-col p strong{ color:var(--ink); font-weight:700; }

/* barely-there decorations on the two specialty columns */
.spec-col--feature{ position:relative; }
.spec-sprig{
  position:absolute; right:1.25rem; bottom:1rem;
  width:2.6rem; height:auto;
  color:var(--pink-word); opacity:.35;
  pointer-events:none;
}
.spec-leaf{
  display:block;
  width:1.9rem; height:auto;
  margin-bottom:.7rem;
  color:var(--pink-word); opacity:.55;
}

/* ─── Quote band: soft pink, not saturated ───────────────── */
.creed{
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255,194,224,.45), transparent 70%),
    linear-gradient(160deg, #FFF3F8 0%, #FFE6F0 100%);
  color:var(--ink);
}
.creed blockquote > p{ color:var(--ink-soft); }
.creed-ask{ color:#5E1B3C; }
/* back on a light background, gold words need the darker type ramp */
.creed .hl--gold{ background-image:var(--gold-text); }

.creed-bfly{
  position:absolute;
  right:-4%; top:50%;
  width:min(40rem, 70%);
  height:auto;
  transform:translateY(-50%) rotate(-8deg);
  color:#E8337F;
  opacity:.28;
  pointer-events:none;
}
.creed .shell{ position:relative; z-index:1; }
.creed-spark{
  position:absolute;
  width:.9rem; aspect-ratio:1;
  background:var(--gold-grad);
  clip-path:polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  opacity:.45;
  pointer-events:none;
  animation:twinkle 5s ease-in-out infinite;
}
.creed-spark--1{ right:18%; top:16%; }
.creed-spark--2{ right:36%; top:70%; width:.6rem; animation-delay:-1.5s; }
.creed-spark--3{ right:8%;  top:58%; width:.7rem; animation-delay:-3s; }
.creed-spark--4{ right:46%; top:22%; width:.5rem; animation-delay:-2.2s; }

/* ─── About: faint line butterfly, gold bullets back ─────── */
.facets-art--line{
  color:#E8337F;
  opacity:.4;
  filter:none;
  --bf-body:currentColor;
}
.facets-card .facets li:not(.facets-note)::before{
  display:inline-block;
  position:static;
  width:.55rem; height:.55rem;
  margin-right:.65rem;
  vertical-align:.18em;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, var(--gold-hi), var(--gold) 50%, var(--gold-mid));
  box-shadow:none;
}

@media (prefers-reduced-motion: reduce){
  .creed-spark{ animation:none; }
}
.facets-art--line{ opacity:.26; }
.spec-h{ max-width:21ch; }

/* ─── Portrait-orientation hero photo ────────────────────── */
/* This photo is tall (630x1200), so its width is capped by the viewport
   height as well as the column, or she'd run past the bottom of the screen. */
.float-wrap{ width:min(100%, 30rem, 52vh); }
@media (max-width: 47.5rem){
  .float-wrap{ width:min(78%, 22rem, 58vh); }
}

/* Butterflies re-aimed at her new head position (46% across, ~12% down),
   fanning up and out past her hair. */
.burst-1{ left:-16%; top:5%;   width:2.8rem; --r:-30deg; --sx:1; }
.burst-2{ left:6%;   top:-5%;  width:1.8rem; --r:-12deg; --sx:.6; }
.burst-3{ left:80%;  top:-2%;  width:3.2rem; --r:18deg;  --sx:1; }
.burst-4{ left:60%;  top:-9%;  width:1.6rem; --r:28deg;  --sx:1; }
.burst-5{ left:92%;  top:14%;  width:2.4rem; --r:36deg;  --sx:.65; }
.burst-6{ left:-24%; top:19%;  width:1.5rem; --r:-42deg; --sx:1; }
.burst-7{ left:104%; top:3%;   width:1.3rem; --r:22deg;  --sx:1; }
.burst-8{ left:30%;  top:-11%; width:1.2rem; --r:10deg;  --sx:.55; }
@media (max-width: 47.5rem){
  .burst-1{ width:2rem; } .burst-3{ width:2.3rem; } .burst-5{ width:1.7rem; }
  .burst-2,.burst-4,.burst-6,.burst-7,.burst-8{ width:1.1rem; }
  .burst-4{ top:-6%; } .burst-8{ top:-7%; }
}
/* Tall photo: keep her well inside the window, with headroom above for the
   butterflies that fly up out of her hair. */
@media (min-width: 47.5001rem){
  .float-wrap{ width:min(100%, 26rem, 40vh); }
  .hero-photo{ padding-top:clamp(4rem, 9vh, 6rem); padding-bottom:clamp(2rem, 5vh, 3.5rem); }
}
@media (max-width: 47.5rem){
  .burst-1{ left:-8%; } .burst-6{ left:-11%; } .burst-7{ left:94%; } .burst-5{ left:86%; }
}

/* ─── About: watercolour butterfly ───────────────────────── */
.facets-art--wc{
  width:150%;
  max-width:none;
  opacity:1;
  filter:none;
}
@media (max-width: 58rem){ .facets-art--wc{ width:128%; } }

/* soft blush washes above and below, like the reference */
#about{
  background:
    radial-gradient(40% 30% at 20% 0%, rgba(249,198,214,.35), transparent 70%),
    radial-gradient(40% 30% at 85% 100%, rgba(249,198,214,.35), transparent 70%),
    var(--bg);
}

/* the list sits left-aligned as a block, centred in the butterfly */
.facets-card .facets{
  text-align:left;
  width:fit-content;
  max-width:26rem;
  margin:0 auto;
  gap:.9rem;
}
.facets-card .facets li{
  font-family:var(--serif);
  font-size:clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  color:var(--ink);
}
.facets-card .facets-note{
  text-align:center;
  font-family:var(--serif) !important;
  font-style:italic;
  font-size:1.1rem !important;
  line-height:1.5 !important;
  margin-top:1rem;
}

/* gold four-point sparkles as bullets */
.facets-card .facets li:not(.facets-note)::before{
  width:1rem; height:1rem;
  margin-right:.8rem;
  vertical-align:-.1em;
  border-radius:0;
  background:var(--gold-grad);
  clip-path:polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}
/* more breathing room around the list inside the wings */
.facets-card{ padding-top:3.5rem; padding-bottom:3.5rem; }

/* ─── About butterfly, closer to the client's reference ──── */
.facets-art--bw{
  width:122%;
  max-width:none;
  opacity:1;
  filter:none;
}
@media (max-width: 58rem){ .facets-art--bw{ width:118%; } }
.facets-card{ padding-top:6rem; padding-bottom:6rem; }
.facets-card .facets li,
.facets-card .facets-note{
  text-shadow:0 0 8px #fff, 0 0 3px #fff, 0 0 1px #fff;
}
#about{
  background:
    radial-gradient(55% 22% at 30% 0%, rgba(249,196,211,.45), transparent 75%),
    radial-gradient(55% 22% at 75% 100%, rgba(249,196,211,.45), transparent 75%),
    var(--bg);
}

/* ─── Hero name: upright, black ──────────────────────────── */
.hero h1 .hl,
.hero h1 .typed{
  font-style:normal;
  color:var(--ink);
}
.hero h1{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:.005em;
}
.hero h1 .caret{ background:var(--ink); }

/* ─── Softer hero buttons ────────────────────────────────── */
/* Serif lettering, gentle gradients, thin gold edge, no heavy weight. */
.btn--rose,
.btn--champagne{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.1rem;
  letter-spacing:.01em;
  padding:.8rem 1.9rem;
  border:1px solid rgba(200,155,49,.55);
  transition:transform .16s ease, box-shadow .2s ease, filter .2s ease;
}
.btn--rose svg, .btn--champagne svg{ width:1rem; height:1rem; }

/* Dusty rose. White text needs a background of at least #B9536F (4.6:1);
   the lighter look comes from a soft sheen along the top edge only, where
   no text sits. */
.btn--rose{
  color:#fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(135deg, #BC5673 0%, #B9536F 50%, #B14D69 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -12px rgba(177,77,105,.8);
}
.btn--rose:hover{ color:#fff; filter:brightness(1.05); transform:translateY(-2px); }

/* Champagne */
.btn--champagne{
  color:var(--ink);
  background:linear-gradient(135deg, #F7ECDF 0%, #EDD9C1 55%, #F3E4D1 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px -12px rgba(160,120,70,.6);
}
.btn--champagne:hover{ color:var(--ink); filter:brightness(1.03); transform:translateY(-2px); }

@media (prefers-reduced-motion: reduce){
  .btn--rose:hover, .btn--champagne:hover{ transform:none; }
}

/* ─── Hero name: "Dr. Jhah" upright and black, "Anabirae" pink italic ─ */
.hero h1 .name-first{
  display:block;
  font-style:normal;
  font-weight:600;
  color:var(--ink);
}
.hero h1 .hl,
.hero h1 .typed{
  font-style:italic;
  font-weight:500;
  color:var(--pink-word);
}
.hero h1 .caret{ background:var(--pink-word); }

/* About list: gold circles instead of sparkles */
.facets-card .facets li:not(.facets-note)::before{
  clip-path:none;
  border-radius:50%;
  width:.62rem; height:.62rem;
  margin-right:.85rem;
  vertical-align:.12em;
  background:radial-gradient(circle at 34% 30%, var(--gold-hi), var(--gold) 50%, var(--gold-mid));
}

/* ─── Quote section: ribbon butterfly, to the client's reference ─ */
.creed--ribbon{
  position:relative;
  overflow:hidden;
  background:linear-gradient(160deg, #FDF2F5 0%, #FBE8EF 100%);
  padding-top:clamp(3.5rem, 7vw, 6rem);
  padding-bottom:clamp(4rem, 8vw, 7rem);
  border-bottom:0;
}
.creed-art{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.creed--ribbon .shell{ position:relative; z-index:1; }
.creed--ribbon blockquote{ max-width:min(58%, 44rem); }
.creed--ribbon blockquote > p{
  font-family:var(--serif);
  font-size:clamp(1.1rem, 1rem + .35vw, 1.3rem);
  line-height:1.55;
  color:#6B4A5B;
  max-width:52ch;
  text-shadow:0 0 8px #FDF2F5, 0 0 2px #FDF2F5;
}
.creed--ribbon .creed-ask{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:clamp(2.2rem, 1.3rem + 3vw, 4.1rem);
  line-height:1.12;
  color:#5B3A50;
  max-width:18ch;
  margin-top:2.25rem;
  text-shadow:0 0 10px #FDF2F5;
}
.creed--ribbon .creed-ask .hl--gold{ background-image:var(--gold-text); text-shadow:none; }

/* phones: the art sits behind the full-width text, so it steps back */
@media (max-width: 47.5rem){
  .creed--ribbon blockquote{ max-width:none; }
  .creed-art{ opacity:.45; }
}
.creed--ribbon blockquote{ max-width:min(62%, 48rem); }
.creed--ribbon .creed-ask{ max-width:24ch; }
@media (max-width: 47.5rem){ .creed--ribbon blockquote{ max-width:none; } }

/* ─── Hero buttons: satin, to the client's reference ─────── */
.btn--rose,
.btn--champagne{
  font-family:var(--display);
  font-weight:500;
  font-size:1.5rem;           /* large text: keeps white-on-rose readable (3.5:1 at 24px) */
  letter-spacing:.005em;
  line-height:1;
  padding:.85rem 2.4rem;
  gap:.9rem;
  min-width:13.5rem;
  justify-content:center;
  border-radius:999px;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-arrow{
  width:1.15rem; height:1.15rem;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s ease;
}
.btn--rose:hover .btn-arrow,
.btn--champagne:hover .btn-arrow{ transform:translateX(4px); }

/* Rose satin: diagonal light streaks over a rose base, a pale rim, and a
   soft inner shade along the bottom that gives it the rounded, glossy feel. */
.btn--rose{
  color:#fff;
  border:1.5px solid rgba(255,220,230,.95);
  background:
    linear-gradient(112deg, transparent 22%, rgba(255,255,255,.32) 30%, transparent 38%,
                            transparent 58%, rgba(255,255,255,.2) 64%, transparent 70%),
    linear-gradient(180deg, #D8798F 0%, #CC6A86 48%, #C4607D 100%);
  box-shadow:
    0 0 0 1px rgba(196,96,125,.55),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -3px 6px rgba(140,40,75,.22),
    0 12px 22px -14px rgba(190,80,110,.75);
}
.btn--rose:hover{ color:#fff; transform:translateY(-2px); filter:brightness(1.04); }

/* Champagne pearl with a gold rim */
.btn--champagne{
  color:var(--ink);
  border:1.5px solid #C9A56A;
  background:
    linear-gradient(112deg, transparent 50%, rgba(255,255,255,.75) 58%, transparent 66%),
    linear-gradient(180deg, #FBF6F1 0%, #EFE4DA 55%, #E6D6C8 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -3px 6px rgba(160,120,80,.14),
    0 12px 22px -14px rgba(160,120,80,.55);
}
.btn--champagne:hover{ color:var(--ink); transform:translateY(-2px); filter:brightness(1.02); }

@media (max-width: 47.5rem){
  .btn--rose, .btn--champagne{ min-width:0; font-size:1.4rem; padding:.8rem 1.6rem; }
}
@media (prefers-reduced-motion: reduce){
  .btn--rose:hover, .btn--champagne:hover{ transform:none; }
  .btn--rose:hover .btn-arrow, .btn--champagne:hover .btn-arrow{ transform:none; }
}
/* the generic .btn svg rule fills icons solid and tilts them on hover;
   the arrows stay as strokes and only slide */
.btn .btn-arrow{ fill:none; width:1.15rem; height:1.15rem; }
.btn:hover .btn-arrow, .btn:focus-visible .btn-arrow{ transform:translateX(4px); }
/* keep 24px on phones too, where the white-on-rose contrast depends on it */
@media (max-width: 47.5rem){
  .btn--rose, .btn--champagne{ font-size:1.5rem; }
}
.btn--rose, .btn--champagne{ min-width:0; padding:.85rem 1.55rem; gap:.6rem; }
.hero .btn-row{ gap:.75rem; }

/* ─── Quote section: exact reference butterfly ───────────── */
/* The butterfly is cut straight from the client's reference image; the
   section background matches its pink (#FDECF1) and the image's left edge
   fades out, so the join is invisible. */
.creed--ribbon{
  background:linear-gradient(180deg, #FDEDF2 0%, #FCECEF 55%, #FDE9EE 100%);
  padding-top:clamp(4rem, 8vw, 7rem);
  padding-bottom:clamp(4.5rem, 9vw, 7.5rem);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg, #C9A45A, #E6CD8E 50%, #C9A45A) 1;
}
.creed-img{
  position:absolute;
  top:0; right:0;
  height:100%; width:auto;
  max-width:62%;
  object-fit:cover;
  object-position:left center;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 16%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 16%);
  pointer-events:none;
}
.creed--ribbon blockquote{ max-width:min(66%, 58rem); }
.creed--ribbon blockquote > p{
  font-family:var(--serif);
  font-size:clamp(1.15rem, 1rem + .45vw, 1.4rem);
  line-height:1.5;
  color:#6B4A5B;
  max-width:44ch;
  text-shadow:0 0 10px #FDECF1, 0 0 3px #FDECF1;
}
.creed--ribbon blockquote > p + p{ margin-top:1.6rem; }
.creed--ribbon .creed-ask{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(2.3rem, 1.2rem + 3.4vw, 4.4rem);
  line-height:1.2;
  color:#5B3A50;
  max-width:none;
  margin-top:2.5rem;
  text-shadow:0 0 12px #FDECF1;
}
.br-wide{ display:inline; }
@media (max-width: 62rem){
  .br-wide{ display:none; }
  .creed-img{ max-width:none; width:100%; opacity:.4; object-position:right center; }
  .creed--ribbon blockquote{ max-width:none; }
}
.creed--ribbon blockquote{ max-width:min(100%, 66rem); }
.creed--ribbon blockquote > p{ max-width:62ch; }
@media (max-width: 62rem){ .creed--ribbon blockquote{ max-width:none; } }

/* ─── Hero buttons v3: glass tiles with a hand-drawn rose-gold rim ───
   Irregular radii give the soft, brushed shape of the reference; the rim is a
   gradient border (padding-box fill over a border-box gradient). */
.btn--rose,
.btn--champagne{
  color:#5A2D2A;
  font-weight:500;
  padding:1rem 2.1rem;
  gap:1rem;
  border:1.5px solid transparent;
  transition:transform .2s ease, box-shadow .3s ease, filter .3s ease;
}
.btn--rose{
  border-radius:2.2rem .9rem 1.6rem 1.1rem / 1.9rem 1rem 1.6rem 1.5rem;
  background:
    linear-gradient(118deg, transparent 18%, rgba(255,255,255,.45) 26%, transparent 34%,
                            transparent 62%, rgba(255,255,255,.3) 70%, transparent 78%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 45%) padding-box,
    linear-gradient(100deg, #F4C9D0 0%, #EDB6C0 45%, #F3CCD3 100%) padding-box,
    linear-gradient(135deg, #E9B89A, #B8734F 35%, #F6DCC4 55%, #A8653F 80%, #E3AE8C) border-box;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.8),
    inset 0 -6px 12px rgba(214,130,150,.25),
    0 14px 30px -12px rgba(230,140,160,.55),
    0 0 26px rgba(255,190,205,.45);
}
.btn--champagne{
  border-radius:1.2rem 1.9rem 1rem 2.3rem / 1.1rem 1.4rem 1.6rem 2rem;
  background:
    linear-gradient(118deg, transparent 20%, rgba(255,255,255,.55) 30%, transparent 40%,
                            transparent 64%, rgba(255,255,255,.4) 72%, transparent 80%) padding-box,
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%) padding-box,
    linear-gradient(100deg, #F8E6DE 0%, #F1D9CD 50%, #F7E4DB 100%) padding-box,
    linear-gradient(135deg, #E9B89A, #B8734F 35%, #F6DCC4 55%, #A8653F 80%, #E3AE8C) border-box;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -6px 12px rgba(200,150,130,.18),
    0 14px 30px -12px rgba(220,160,150,.45),
    0 0 24px rgba(255,210,200,.4);
}
.btn--rose:hover, .btn--champagne:hover{ color:#5A2D2A; transform:translateY(-2px); filter:brightness(1.03); }
.btn--rose .btn-arrow, .btn--champagne .btn-arrow{ stroke:#B06A45; stroke-width:1.3; width:1.6rem; }

/* ─── Hero buttons v4: exact reference outlines, drawn as SVG ─── */
.btn--rose, .btn--champagne{
  border:0; border-radius:0; overflow:visible;
  background:center / 100% 100% no-repeat;
  box-shadow:none;
  padding:1.15rem 2.6rem 1.2rem;
}
.btn--rose{ background-image:url("assets/btn-rose.svg"); filter:drop-shadow(0 10px 18px rgba(232,140,160,.45)) drop-shadow(0 0 14px rgba(255,195,210,.5)); }
.btn--champagne{ background-image:url("assets/btn-champagne.svg"); filter:drop-shadow(0 10px 18px rgba(225,165,150,.38)) drop-shadow(0 0 14px rgba(255,215,205,.5)); }
.btn--rose:hover{ filter:drop-shadow(0 14px 22px rgba(232,140,160,.55)) drop-shadow(0 0 16px rgba(255,195,210,.6)); }
.btn--champagne:hover{ filter:drop-shadow(0 14px 22px rgba(225,165,150,.48)) drop-shadow(0 0 16px rgba(255,215,205,.6)); }

/* ─── Hero buttons v5: real glass ─────────────────────────────
   ::before is the frosted pane: it blurs whatever sits behind the button and is
   cut to the reference outline with a mask. ::after draws the translucent tint,
   highlights and rose-gold rim on top. The button itself carries no filter,
   because a filter on it would stop the backdrop blur from seeing the page. */
.btn--rose, .btn--champagne{
  background:none; filter:none; isolation:isolate; position:relative;
}
.btn--rose:hover, .btn--champagne:hover{ filter:none; }
.btn--rose::before, .btn--champagne::before,
.btn--rose::after, .btn--champagne::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.btn--rose::before, .btn--champagne::before{
  -webkit-backdrop-filter:blur(10px) saturate(1.5) brightness(1.06);
  backdrop-filter:blur(10px) saturate(1.5) brightness(1.06);
  background:rgba(255,255,255,.12);
  -webkit-mask:center / 100% 100% no-repeat; mask:center / 100% 100% no-repeat;
}
.btn--rose::before{ -webkit-mask-image:url("assets/btn-rose-mask.svg"); mask-image:url("assets/btn-rose-mask.svg"); }
.btn--champagne::before{ -webkit-mask-image:url("assets/btn-champagne-mask.svg"); mask-image:url("assets/btn-champagne-mask.svg"); }
.btn--rose::after, .btn--champagne::after{
  background:center / 100% 100% no-repeat;
  transition:filter .3s ease;
}
.btn--rose::after{ background-image:url("assets/btn-rose.svg"); filter:drop-shadow(0 10px 16px rgba(232,140,160,.35)) drop-shadow(0 0 12px rgba(255,190,205,.45)); }
.btn--champagne::after{ background-image:url("assets/btn-champagne.svg"); filter:drop-shadow(0 10px 16px rgba(225,165,150,.3)) drop-shadow(0 0 12px rgba(255,215,205,.45)); }
.btn--rose:hover::after{ filter:drop-shadow(0 14px 20px rgba(232,140,160,.5)) drop-shadow(0 0 16px rgba(255,190,205,.6)); }
.btn--champagne:hover::after{ filter:drop-shadow(0 14px 20px rgba(225,165,150,.42)) drop-shadow(0 0 16px rgba(255,215,205,.6)); }
.btn--rose, .btn--champagne{ white-space:nowrap; }
.btn--rose, .btn--champagne{ justify-content:center; text-align:center; gap:0; }

/* ─── Hero credentials: line-art butterfly bullets, to reference ─── */
.cred-list{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:1.1rem; }
.cred-list li{
  display:grid; grid-template-columns:2.1rem 1fr; gap:.85rem; align-items:start;
  font-family:var(--serif); font-size:1.08rem; line-height:1.4; color:#2E2328;
}
.cred-list .bf-line{ width:2.1rem; height:2.1rem; margin-top:-.3rem; }

/* ─── About facets: "Disabled and" / italic word, staggered ─── */
.facets-card .facets{ list-style:none; padding:0; margin:0 auto; max-width:30rem; display:grid; gap:1.35rem; }
.facets-card .facets li:not(.facets-note){
  padding:0; display:flex; flex-direction:column; line-height:1; font-weight:400;
}
.facets-card .facets li:not(.facets-note)::before{ display:none !important; content:none; }
.facets-card .facets li:nth-child(odd):not(.facets-note){ padding-left:0; }
.facets-card .facets li:nth-child(1){ margin-left:0; }
.facets-card .facets li:nth-child(2){ margin-left:1.5rem; }
.facets-card .facets li:nth-child(3){ margin-left:.8rem; }
.facets-card .facets li:nth-child(4){ margin-left:1.2rem; }
.facets-card .facets li:nth-child(5){ margin-left:1.2rem; }
.facets-card .facets li:nth-child(6){ margin-left:2.6rem; }
.fa-lead{
  font-family:var(--serif); font-weight:400; color:#1F1418;
  font-size:clamp(1.7rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing:-.01em;
}
.fa-word{
  font-family:var(--serif); font-style:italic; font-weight:400; color:#A3405C;
  font-size:clamp(2rem, 1.4rem + 1.8vw, 2.9rem); letter-spacing:-.01em;
  margin:.1rem 0 0 2.8rem;
}
.facets-card .facets li:nth-child(3) .fa-word{ margin-left:2rem; }
.facets-card .facets-note{
  position:relative; margin-top:2.6rem; padding-top:0;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.2rem, 1rem + .5vw, 1.45rem); line-height:1.55; color:#2A1E22;
  text-align:left; max-width:26rem;
}
.facets-swoosh{
  position:absolute; left:-1.5rem; top:-6.2rem; width:22rem; height:5.5rem;
  fill:none; stroke:#D6B07A; stroke-width:1; vector-effect:non-scaling-stroke; opacity:.85;
}
@media (max-width: 47.5rem){ .facets-swoosh{ width:15rem; left:-.5rem; } }
.facets-card .facets li.facets-note{
  margin-top:5rem; max-width:24rem; font-size:clamp(1.3rem, 1.05rem + .7vw, 1.6rem); line-height:1.5;
}
.facets-card .facets li.facets-note .facets-swoosh{ top:-5rem; left:-2rem; height:4.2rem; }

/* smaller quote ask and facets (client: too big on laptop) */
.creed--ribbon .creed-ask{ font-size:clamp(1.8rem, 1.2rem + 1.6vw, 3rem); }
.creed--ribbon blockquote p:not(.creed-ask){ font-size:clamp(1rem, .95rem + .25vw, 1.15rem); }
.fa-lead{ font-size:clamp(1.3rem, 1rem + .8vw, 1.65rem); }
.fa-word{ font-size:clamp(1.5rem, 1.1rem + 1vw, 2rem); margin-left:2rem; }
.facets-card .facets{ gap:.95rem; }
.facets-card .facets li.facets-note{ margin-top:3.8rem; font-size:clamp(1.1rem, .95rem + .4vw, 1.3rem); }
.facets-card .facets li.facets-note .facets-swoosh{ top:-4rem; height:3.4rem; width:18rem; }

/* ─── Hero photo v4: the full studio shot, no decorations ─── */
.hero-photo{ padding:0 !important; overflow:hidden; background:#F3DCD8; }
.hero-photo::before, .hero-photo::after{ display:none !important; }
.hero-img{
  display:block; width:100%; height:100%; min-height:100%;
  object-fit:cover; object-position:50% 45%;
  animation:none; transform:none;
}
@media (max-width: 58rem){ .hero-photo{ min-height:0; } .hero-img{ height:auto; aspect-ratio:1448/1086; } }
.email a{ overflow-wrap:anywhere; }

/* ─── Footer: hot pink ─── */
.colophon{ background:linear-gradient(135deg,#D81475 0%,#E0137A 55%,#C80E6A 100%); color:#fff; }
.colophon-line, .colophon-meta{ color:#fff; }

/* ─── Footer butterflies: glass-pink with rose-gold rims; they take off from
   the footer when it scrolls into view, then keep flapping. `translate` and
   `scale` are separate from each one's `transform` rotation, so both run. ─── */
.fly{
  opacity:0; translate:-4rem 13rem; scale:.4;
  filter:drop-shadow(0 6px 10px rgba(209,15,111,.25));
  transition:opacity .6s ease, translate 1.8s cubic-bezier(.2,.7,.2,1), scale 1.8s cubic-bezier(.2,.7,.2,1);
}
.flock.is-out .fly{ opacity:1; translate:0 0; scale:1; }
.flock.is-out .fly use{ animation:flap .38s ease-in-out infinite alternate; transform-origin:50% 50%; transform-box:fill-box; }
@keyframes flap{ from{ transform:scaleX(1) } to{ transform:scaleX(.45) } }
.fly-1 { transition-delay:0s }   .fly-2 { transition-delay:.15s } .fly-3 { transition-delay:.3s }
.fly-4 { transition-delay:.45s } .fly-5 { transition-delay:.1s }  .fly-6 { transition-delay:.55s }
.fly-7 { transition-delay:.7s }  .fly-8 { transition-delay:.35s } .fly-9 { transition-delay:.8s }
.fly-10{ transition-delay:.95s } .fly-11{ transition-delay:.25s } .fly-12{ transition-delay:.6s }
.fly-2 use,.fly-5 use,.fly-9 use{ animation-delay:-.13s !important; animation-duration:.44s !important; }
.fly-3 use,.fly-7 use,.fly-11 use{ animation-delay:-.27s !important; animation-duration:.33s !important; }
@media (prefers-reduced-motion: reduce){
  .fly{ transition:opacity .3s ease; translate:none; scale:1; }
  .flock.is-out .fly use{ animation:none; }
}

/* ─── Hero: the cut-out portrait sits exactly over the person in the studio
   shot. Both live on a stage with the photo's own aspect ratio, sized to
   cover the panel, so the overlay's % position stays locked to the photo. ─── */
.hero-photo{ position:relative; container-type:size; }
.hero-stage{
  position:absolute; left:50%; top:45%;
  width:max(100cqw, 133.33cqh); aspect-ratio:1448/1086;
  translate:-50% -45%;
}
.hero-stage .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }
.hero-overlay{
  position:absolute; left:29.8%; top:8.9%; width:41.5%; height:auto;
  -webkit-mask:url("assets/jhah-overlay-matte.png") center / 100% 100% no-repeat;
  mask:url("assets/jhah-overlay-matte.png") center / 100% 100% no-repeat;
}
@media (max-width: 58rem){
  .hero-photo{ container-type:inline-size; aspect-ratio:1448/1086; }
  .hero-stage{ width:100%; left:0; top:0; translate:none; }
}
.hero-overlay{ -webkit-mask:none; mask:none; }
/* single hero photo again (overlay stage retired) */
.hero-photo{ container-type:normal; }
.hero-photo > .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
@media (max-width: 58rem){ .hero-photo{ aspect-ratio:1333/1123; } }

/* ─── Fonts: Merienda body, Rouge Script for the pink accent words ─── */
:root{ --sans:"Merienda", "Atkinson Hyperlegible", system-ui, sans-serif; --script:"Rouge Script", "Cormorant Garamond", cursive; }
body{ font-family:var(--sans); }
.typed, h2 em, h3 em, .fa-word{
  font-family:var(--script); font-style:normal; font-weight:400; letter-spacing:0;
}
.typed{ font-size:1.25em; line-height:.9; }
h2 em, h3 em{ font-size:1.3em; line-height:.8; }
.fa-word{ font-size:clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem); }

/* ─── Client round: fonts back ─────────────────────────────
   Body back to Atkinson Hyperlegible, accent words back to Cormorant italic.
   Merienda stays only in the service bullet lists, which the client liked. */
:root{ --sans:"Atkinson Hyperlegible", system-ui, -apple-system, sans-serif; }
.typed, h2 em, h3 em{ font-family:var(--display); font-style:italic; font-weight:500; font-size:1em; line-height:inherit; }
.fa-word{ font-family:var(--serif); font-style:italic; font-size:clamp(1.5rem, 1.1rem + 1vw, 2rem); }
.svc-list li{ font-family:"Merienda", var(--sans); }

/* ─── Footer: light pink frosted glass ──────────────────── */
.colophon{
  background:
    linear-gradient(180deg, rgba(255,255,255,.75) 0, rgba(255,255,255,0) 2.5rem),
    linear-gradient(135deg, rgba(252,222,232,.72), rgba(248,208,222,.62) 55%, rgba(252,228,236,.75));
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg, rgba(201,150,110,0), #D2A27A 20%, #F3DCC4 50%, #C08A5E 80%, rgba(201,150,110,0)) 1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 -18px 40px -24px rgba(233,150,175,.45);
  color:#6B3A50;
}
.colophon-line{ color:#5A2A42; }
.colophon-meta{ color:#7A4A60; }
.fly{ filter:drop-shadow(0 4px 8px rgba(214,150,170,.3)); }

/* Hero: the feet dissolve into a soft pink floor mist */
.hero-photo{ background:linear-gradient(180deg, #EBCFCB 0%, #F4DEE0 70%, #FBEAEE 100%); }
.hero-photo > .hero-img{
  -webkit-mask-image:linear-gradient(180deg, #000 0, #000 70%, rgba(0,0,0,.35) 79%, transparent 88%);
  mask-image:linear-gradient(180deg, #000 0, #000 70%, rgba(0,0,0,.35) 79%, transparent 88%);
}
.hero-photo > .hero-img{ -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-position:0 0; mask-position:0 0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; mask-mode:alpha; }
.hero-photo > .hero-img{
  -webkit-mask-image:linear-gradient(180deg, #fff 0, #fff 70%, rgba(255,255,255,.35) 79%, rgba(255,255,255,0) 88%);
  mask-image:linear-gradient(180deg, #fff 0, #fff 70%, rgba(255,255,255,.35) 79%, rgba(255,255,255,0) 88%);
  mask-mode:match-source;
}
/* mask on the photo proved unreliable; a mist layer over the floor instead */
.hero-photo > .hero-img{ -webkit-mask:none; mask:none; }
.hero-mist{
  position:absolute; left:0; right:0; bottom:0; height:34%; pointer-events:none;
  background:linear-gradient(180deg, rgba(251,234,238,0) 0%, rgba(250,230,235,.75) 32%, #FBEAEE 62%, #FDEFF3 100%);
}
.hero-mist{ height:38%; background:linear-gradient(180deg, rgba(251,234,238,0) 0%, rgba(250,230,235,.85) 30%, #FBEAEE 50%, #FDEFF3 100%); }

/* ─── Footer glitter: fine gold dust plus twinkling four-point sparkles ─── */
.glitter{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.glitter::before, .glitter::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(1.2px 1.2px at 8% 20%, #E9C27A 50%, transparent 51%),
    radial-gradient(1px 1px at 17% 64%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 26% 38%, #D9A95C 50%, transparent 51%),
    radial-gradient(1px 1px at 34% 82%, #F3D9A4 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 43% 16%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 58%, #E2B46A 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 61% 28%, #F6E2B8 50%, transparent 51%),
    radial-gradient(1px 1px at 69% 74%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 77% 44%, #D9A95C 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 12%, #F3D9A4 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 91% 60%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 97% 86%, #E2B46A 50%, transparent 51%);
  background-size:340px 180px;
  animation:dust 4s ease-in-out infinite alternate;
}
.glitter::after{ background-size:230px 140px; background-position:60px 30px; animation-delay:-2s; opacity:.8; }
@keyframes dust{ from{ opacity:.35 } to{ opacity:1 } }
.spark{
  position:absolute; fill:#E6BA6E;
  filter:drop-shadow(0 0 4px rgba(255,236,190,.95));
  animation:spark 3s ease-in-out infinite;
}
.spark:nth-child(3n){ fill:#fff; }
.spark:nth-child(4n){ fill:#F4D9A6; }
@keyframes spark{
  0%,100%{ opacity:.15; transform:scale(.5) rotate(0deg) }
  50%{ opacity:1; transform:scale(1.1) rotate(45deg) }
}
.colophon > :not(.glitter):not(.flock){ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
  .glitter::before, .glitter::after, .spark{ animation:none; }
  .spark{ opacity:.7; }
}
.glitter::before{ background-size:200px 110px; filter:drop-shadow(0 0 2px rgba(255,225,160,.9)); }
.glitter::after{ background-size:150px 90px; }
.glitter::before, .glitter::after{ transform:scale(1.6); transform-origin:0 0; }
.spark{ fill:#D9A548; }
@keyframes spark{
  0%,100%{ opacity:.25; transform:scale(.7) rotate(0deg) }
  50%{ opacity:1; transform:scale(1.9) rotate(45deg) }
}

/* ─── Client fonts: free lookalikes for Hazelnuts (body) and Dagtton (name) ─── */
:root{ --sans:"Sofia", "Atkinson Hyperlegible", system-ui, sans-serif; }
.svc-list li{ font-family:"Merienda", "Atkinson Hyperlegible", sans-serif; }
.typed{ font-family:"Monsieur La Doulaise", "Cormorant Garamond", cursive; font-style:normal; font-weight:400; font-size:1.45em; line-height:1; letter-spacing:0; }
body{ font-size:1.06em; } p, li{ -webkit-font-smoothing:antialiased; }

/* Dagtton (licensed) for the name. Drop the licensed file at
   assets/fonts/dagtton.woff2 (or .otf/.ttf); until then the name falls back
   to Monsieur La Doulaise. */
@font-face{
  font-family:"Dagtton";
  src:url("assets/fonts/dagtton.woff2") format("woff2"),
      url("assets/fonts/dagtton.otf") format("opentype"),
      url("assets/fonts/dagtton.ttf") format("truetype");
  font-display:swap;
}
.typed{ font-family:"Dagtton", "Monsieur La Doulaise", "Cormorant Garamond", cursive; }
.typed{ font-size:1.6em; line-height:1.05; } #hero-h{ margin-bottom:.9rem; }

/* ─── Footer + butterflies from the client reference ───────────── */
.flock .fly-1{ right:9.5%; top:-22.50rem; width:3.25rem; transform:none; }
.flock .fly-2{ right:31.8%; top:-16.88rem; width:3.38rem; transform:none; }
.flock .fly-3{ right:17.5%; top:-14.88rem; width:5.38rem; transform:none; }
.flock .fly-4{ right:35.9%; top:-12.00rem; width:4.75rem; transform:none; }
.flock .fly-5{ right:48.1%; top:-9.63rem; width:3.50rem; transform:none; }
.flock .fly-6{ right:24.7%; top:-6.63rem; width:2.63rem; transform:none; }
.flock .fly-7{ right:5.5%; top:-8.75rem; width:7.38rem; transform:none; }
.colophon{
  background:url("assets/footer-silk.jpg") center / cover no-repeat, #D9A3AE;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border-top:2px solid transparent; border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,#E8C3B6,#F6E0D6 50%,#E3B7A8) 1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.colophon::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(150,70,95,.48), rgba(150,70,95,.22) 55%, rgba(150,70,95,0)); }
.colophon-line, .colophon-meta{ color:#fff; text-shadow:0 1px 8px rgba(120,50,75,.35); }
.colophon-line{ font-family:var(--serif); font-style:italic; }
.colophon-meta{ font-family:var(--serif); }
.glitter .spark{ fill:#FFF3E8; }
.flock .fly{ height:auto; filter:drop-shadow(0 6px 10px rgba(210,150,160,.28)); }
.flock.is-out .fly{ animation:hover-bob 4.5s ease-in-out infinite alternate; }
.flock.is-out .fly-2,.flock.is-out .fly-5{ animation-duration:3.6s; animation-delay:-1.2s; }
.flock.is-out .fly-3,.flock.is-out .fly-6{ animation-duration:5.2s; animation-delay:-2.4s; }
@keyframes hover-bob{ from{ transform:translateY(0) rotate(-3deg) } to{ transform:translateY(-10px) rotate(3deg) } }
.fly-trail{ position:absolute; right:0; top:-16rem; width:68%; height:15rem; opacity:0; transition:opacity 1.6s ease .6s; }
.flock.is-out .fly-trail{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .flock.is-out .fly{ animation:none; } }
/* recreated glass butterflies: wings flap gently while they hover */
.flock.is-out .fly use{ transform-box:view-box; transform-origin:100px 85px; animation:glass-flap 1.6s ease-in-out infinite alternate; }
.flock.is-out .fly-2 use, .flock.is-out .fly-5 use{ animation-duration:1.25s; animation-delay:-.4s; }
.flock.is-out .fly-3 use, .flock.is-out .fly-6 use{ animation-duration:1.9s; animation-delay:-.9s; }
@keyframes glass-flap{ from{ transform:scaleX(1) } to{ transform:scaleX(.72) } }
.flock .fly{ overflow:visible; filter:drop-shadow(0 6px 12px rgba(220,150,170,.3)); }
@media (prefers-reduced-motion: reduce){ .flock .fly use{ animation:none; } }
.flock .fly-1{ width:4.2rem } .flock .fly-2{ width:4.4rem } .flock .fly-3{ width:6.6rem }
.flock .fly-4{ width:5.8rem } .flock .fly-5{ width:4.4rem } .flock .fly-6{ width:3.4rem } .flock .fly-7{ width:8.6rem }
#hero-h .typed{ display:inline-block; line-height:.95; margin-top:-.15em; padding-bottom:.3em; } #hero-h{ margin-bottom:1.6rem; }
:root{ --sans:"Delius", "Atkinson Hyperlegible", system-ui, sans-serif; } body{ font-size:1em; }

/* Hero: drifting pink-white smoke over the floor instead of a flat gradient */
.hero-smoke{ position:absolute; left:0; right:0; bottom:0; width:100%; height:44%; pointer-events:none; }
.smoke-a{ animation:smoke-drift 38s linear infinite alternate; }
.smoke-b{ animation:smoke-drift 26s linear infinite alternate-reverse; }
@keyframes smoke-drift{ from{ transform:translateX(0) } to{ transform:translateX(-1000px) } }
@media (prefers-reduced-motion: reduce){ .smoke-a, .smoke-b{ animation:none; } }

/* ─── Mobile footer: fewer butterflies, spread out along the trail ─── */
@media (max-width: 47.5rem){
  .flock{ transform:none; }
  .flock .fly-2, .flock .fly-4, .flock .fly-6{ display:none; }
  .flock .fly-5{ right:auto; left:8%;  top:-3.4rem; width:2.6rem; }
  .flock .fly-3{ right:auto; left:38%; top:-6.2rem; width:3.4rem; }
  .flock .fly-1{ right:6%;  top:-8rem;   width:2.6rem; }
  .flock .fly-7{ right:10%; top:-4.6rem; width:4.4rem; }
  .fly-trail{ width:100%; top:-7.5rem; height:7rem; }
  .colophon{ padding-bottom:calc(6.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 47.5rem){ .glitter .spark:nth-child(even){ display:none; } }

/* credentials: emphasis */
.cred-list strong{ font-weight:600; color:#2A1A20; }
/* record note: quiet, the CV carries the detail */
.record-note{ font-size:.92rem !important; line-height:1.6; max-width:46ch; opacity:.9; }
/* CV / résumé use the hero's glass buttons, even before the PDFs are uploaded */
.btn--rose.is-missing, .btn--champagne.is-missing{ border:0; color:#5A2D2A; }
.btn--rose.is-missing{ background:none; }
.btn--champagne.is-missing{ background:none; }
.btn--rose.is-missing, .btn--champagne.is-missing{ opacity:1; }
.hero-smoke{ height:48%; }

/* social links: the same glass buttons, a touch smaller */
.elsewhere a.btn{ font-size:1.2rem; padding:.8rem 1.7rem .85rem; min-height:0; }
.elsewhere a.btn:hover{ color:#5A2D2A; }
.elsewhere a.btn, .elsewhere a.btn:hover, .elsewhere a.btn:focus-visible{ background:none; border:0; box-shadow:none; }
@media (max-width: 47.5rem){ #hero-h .typed{ margin-top:.35em; font-size:1.45em; } }
@media (max-width: 47.5rem){ #hero-h .typed{ margin-top:0; } }

/* Anabirae is a pre-rendered image of the Dagtton lettering. The font's own
   line metrics differ between Chrome and Safari, which made the name drift
   into "Dr. Jhah" on iPhones; an image sits in exactly the same place everywhere. */
#hero-h .typed, #hero-h .typed{ display:block; line-height:1; margin:0; padding:0; }
#hero-h .typed-out{ display:block; }
#hero-h .name-script{ display:block; width:2.9em; height:auto; margin:.14em 0 .06em -.02em; }
@media (max-width: 47.5rem){ #hero-h .typed{ margin-top:0; } }
/* Reduced-motion devices still get the rotating role, as a gentle fade with no sliding. */
@media (prefers-reduced-motion: reduce){
  .role-word{ transition:opacity .35s ease; }
  .role-word.is-out, .role-word.is-pre{ translate:none; }
}

/* ─── Contact page form ─────────────────────────────────── */
.contact-page{ padding-top:clamp(3rem, 6vw, 5rem); }
.cf-back{ margin:0 0 1.5rem; font-family:var(--serif); font-style:italic; }
.cf-back a{ color:#8A3A5C; text-decoration:none; }
.cf-back a:hover{ text-decoration:underline; }
.cf-lead{ max-width:40rem; margin:1.25rem 0 2rem; }
.cf{
  max-width:46rem; padding:clamp(1.5rem, 3vw, 2.5rem);
  border-radius:1.5rem; position:relative;
  background:linear-gradient(135deg, rgba(255,255,255,.82), rgba(252,232,239,.72));
  border:1px solid rgba(214,168,130,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 24px 50px -30px rgba(214,120,150,.45);
  display:grid; gap:1.25rem;
}
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.cf-field{ display:grid; gap:.45rem; }
.cf-label{ font-family:var(--serif); font-size:1.05rem; color:#4A2A38; }
.cf-req{ color:#B3285E; }
.cf-opt{ color:#8A6A78; font-style:italic; font-size:.95em; }
.cf input, .cf select, .cf textarea{
  font:inherit; font-size:1rem; color:#2A1A20;
  width:100%; padding:.8rem 1rem; border-radius:.9rem;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(200,150,120,.6);
  box-shadow:inset 0 1px 2px rgba(150,90,110,.08);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cf textarea{ resize:vertical; min-height:9rem; line-height:1.55; }
.cf select{
  appearance:none; -webkit-appearance:none; padding-right:2.6rem; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, #B06A45 50%), linear-gradient(135deg, #B06A45 50%, transparent 50%);
  background-position:calc(100% - 1.2rem) 55%, calc(100% - .85rem) 55%;
  background-size:.4rem .4rem; background-repeat:no-repeat;
}
.cf input:focus, .cf select:focus, .cf textarea:focus{
  outline:none; border-color:#D6538A; box-shadow:0 0 0 3px rgba(232,51,127,.18);
}
.cf-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cf-note{ margin:0; font-size:.9rem; color:#7A5A68; }
.cf-actions{ margin:0; }
.cf button.btn{ cursor:pointer; border:0; font:inherit; font-family:var(--display); }
.cf button[disabled]{ opacity:.7; cursor:progress; }
.cf-status{ margin:0; min-height:1.4em; font-family:var(--serif); font-size:1.05rem; }
.cf-status.is-ok{ color:#2F7A4B; }
.cf-status.is-error{ color:#B3285E; }
.cf-alt{ margin-top:1.75rem; font-family:var(--serif); color:#6B4A5B; }
.cf-alt a{ color:#B3285E; }
@media (max-width: 47.5rem){ .cf-row{ grid-template-columns:1fr; } }

/* "Dr. Jhah" in dark pink italic, to sit with the pink script name */
#hero-h .name-first{ color:#B3285E; font-style:italic; }

/* ─── Footer butterflies stay inside the space reserved above the footer ───
   The flock was taller than the gap under the social buttons, so on many
   screens a butterfly landed on Snapchat. Heights are halved to fit the
   13rem gap, and the buttons sit above the flock as a backstop. */
@media (min-width: 47.5001rem){
  .flock{ transform:none; }
  .flock .fly-1{ top:-11.2rem; }
  .flock .fly-2{ top:-8.4rem; }
  .flock .fly-3{ top:-8.6rem; }
  .flock .fly-4{ top:-6.2rem; }
  .flock .fly-5{ top:-4.8rem; }
  .flock .fly-6{ top:-3.9rem; }
  .flock .fly-7{ top:-5.6rem; }
  .fly-trail{ top:-9.5rem; height:8.5rem; }
}
.elsewhere{ position:relative; z-index:6; }