/* =========================================================
   A&A TX Party Pieces — brand stylesheet
   Palette sampled from the logo:
     pink #ea006a   teal #39a8a8   orange #ea7349  (her brand kit)
   ========================================================= */

:root{
  /* Brand — her official brand-kit values, not eyedropped from an image.
     THREE colours: pink, teal and an orange that an earlier pass missed because
     it was sampling the horizontal lockup, which has no orange in it. Her real
     stacked logo has orange butterflies.

     Her pink and teal are FILL colours; neither carries small text at 4.5:1 on
     white. The -ink variants are darker, site-only derivations that exist for
     TEXT. Use tokens — do not paste new hex values into rules. */
  --pink:#ea006a;         /* brand pink. Every pink fill, and buttons (4.46:1). */
  --pink-ink:#d3006a;     /* brand deep pink — TEXT on light bg, and hovers (5.28:1) */
  --pink-deep:#a8004f;    /* darkest stop of a pink ramp */
  --pink-light:#FF5A9E;   /* pink text/links on DARK bg (5.2:1 on --ink) */
  --pink-soft:#FFE7F1;    /* tints and background washes */

  --teal:#39a8a8;         /* brand teal. FILLS ONLY — 2.86:1, carries no text. */
  --teal-light:#6cd1d3;   /* brand light teal — tints, washes, decorative shapes */
  --teal-ink:#0A7180;     /* teal TEXT on light bg (5.5:1) — derived, not brand */
  --teal-deep:#075C68;
  --teal-band:#0A5F6C;    /* dark full-width bands, lightest stop */
  --teal-band-deep:#06434D;
  --teal-soft:#E2F7FA;

  /* Brand orange. 2.98:1 on white, so it is DECORATIVE ONLY — confetti, small
     shapes, accents. Never a button, never text on a light background. It does
     work as text on --ink (5.01:1), which is where --orange-ink is for. */
  --orange:#ea7349;
  --orange-ink:#b84a20;   /* darker derivation, for orange text on light bg (4.6:1) */
  --orange-soft:#FDEBE3;

  --cream:#FFF9F6;
  --white:#FFFFFF;
  --ink:#2A2438;
  --muted:#6E6780;
  --line:#EFE6EC;

  --radius:22px;
  --radius-sm:14px;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(42,36,56,.05), 0 4px 14px rgba(42,36,56,.06);
  --shadow:0 2px 6px rgba(42,36,56,.05), 0 16px 42px rgba(42,36,56,.11);
  --shadow-lg:0 4px 12px rgba(168,0,79,.08), 0 30px 76px rgba(168,0,79,.20);
  --shadow-pop:0 6px 16px rgba(234,0,106,.16), 0 28px 60px rgba(234,0,106,.26);

  --wrap:1180px;
  --nav-h:86px;

  --font-body:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* High-contrast display serif echoing the logo's "A&A".
     SHIPS IN WEIGHT 400 ONLY -- never ask for 600/700 on this font or the
     browser synthesises a fake bold and smears the letterforms. */
  --font-display:'DM Serif Display',Georgia,serif;
  --font-script:'Sacramento',cursive;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:400;line-height:1.16;letter-spacing:-.012em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--pink-ink);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;
}
.skip-link:focus{left:0}

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

/* Visually hidden, still read by screen readers and indexed by search engines.
   Used in the hero h1 so the heading carries the location and service words —
   the same words are visible immediately below in the lede, so this describes
   the page rather than hiding anything from it. */
.vh{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- shared bits ---------- */
.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--teal-ink);margin:0 0 14px;
}
.eyebrow--light{color:rgba(255,255,255,.92)}

.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.section__head{max-width:660px;margin:0 auto clamp(40px,5vw,64px);text-align:center}
.section__title{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:18px;letter-spacing:-.025em}
.section__lede{color:var(--muted);font-size:1.05rem}

/* ---------- buttons ---------- */
/* Every button carries the brand pink (#ea006a, the marquee-band pink).
   White on it is 4.46:1 -- which passes AA only for LARGE text (>=18.66px bold,
   3:1). So ALL buttons are >=1.18rem / 700. Do not shrink them below that or
   the label drops under AA; switch to --pink-ink (5.28:1) for a smaller button. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 28px;min-height:52px;
  border-radius:var(--radius-pill);
  font-weight:700;font-size:1.18rem;letter-spacing:.005em;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s,background .2s,color .2s;
  will-change:transform;text-align:center;
}
.btn--sm{padding:10px 22px;min-height:48px;font-size:1.18rem}
.btn--lg{padding:17px 32px;min-height:58px;font-size:1.18rem}
.btn--block{width:100%}

.btn--pink{
  background:var(--pink);color:#fff;
  box-shadow:0 6px 16px rgba(234,0,106,.22), 0 22px 48px rgba(234,0,106,.32);
}
.btn--pink:hover{background:var(--pink-ink);transform:translateY(-3px);box-shadow:0 18px 40px rgba(234,0,106,.44)}

/* --teal is 2.86:1 with white and cannot hold a label. Buttons use --teal-ink. */
.btn--teal{background:var(--teal-ink);color:#fff;box-shadow:0 10px 26px rgba(10,113,128,.30)}
.btn--teal:hover{background:var(--teal-deep);transform:translateY(-3px)}

.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(42,36,56,.16)}
.btn--ghost:hover{background:var(--ink);color:#fff;transform:translateY(-3px);box-shadow:none}

.btn--white{background:#fff;color:var(--pink-ink);box-shadow:var(--shadow-sm)}
.btn--white:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,249,246,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s,border-color .3s,background .3s;
  padding-top:env(safe-area-inset-top);
}
/* Once scrolled, the bar goes solid.
   At 86% it let whatever was underneath bleed through, and over the dark teal
   contact band that composited to rgb(221,227,227) — a cool grey slab that read
   as a plate sitting behind the logo. The logo itself is fully transparent; the
   bar was the problem. Translucency is kept only at the very top, where it sits
   over the pale hero and looks intentional. */
.nav.is-stuck{
  background:var(--cream);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:var(--shadow-sm);border-bottom-color:var(--line);
}

.nav__inner{
  /* matches .hero__grid so the nav logo lines up with the hero logo below it */
  max-width:min(1440px, 92vw);margin-inline:auto;padding:0 24px;
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav__brand{display:flex;align-items:center;gap:12px}
.nav__logo{height:60px;width:auto}
.nav__wordmark{display:flex;flex-direction:column;line-height:1}
.nav__script{
  font-family:var(--font-script);font-size:2rem;color:var(--teal-ink);
  line-height:.85;letter-spacing:.01em;
}
.nav__sub{
  font-size:.63rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);margin-top:2px;
}
.nav__sub em{font-style:normal;color:var(--pink-ink)}

.nav__links{display:flex;align-items:center;gap:6px}
.nav__links > a:not(.btn){
  padding:10px 14px;border-radius:var(--radius-pill);
  font-size:.9rem;font-weight:500;color:var(--ink);
  transition:color .2s,background .2s;
}
.nav__links > a:not(.btn):hover{color:var(--pink-ink);background:var(--pink-soft)}
.nav__links > .btn{margin-left:8px}

.nav__toggle{
  display:none;width:48px;height:48px;border-radius:14px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--pink-soft);
}
.nav__toggle span{
  display:block;width:20px;height:2px;border-radius:2px;background:var(--pink);
  transition:transform .3s,opacity .2s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   HERO  — split layout: copy + layered photo collage
   ========================================================= */
.hero{
  position:relative;overflow:hidden;
  background:var(--cream);
}
/* layered colour wash: warmer and deeper than a single flat gradient */
.hero__wash{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* tight, bright pools of colour — NOT a full-bleed tint, or the hero goes foggy */
  background:
    radial-gradient(ellipse 30% 34% at 6% 4%,   rgba(234,0,106,.16) 0%, transparent 70%),
    radial-gradient(ellipse 30% 38% at 99% 12%, rgba(1,161,181,.18) 0%, transparent 70%),
    radial-gradient(ellipse 26% 30% at 88% 99%, rgba(234,0,106,.14) 0%, transparent 70%),
    radial-gradient(ellipse 24% 26% at 20% 97%, rgba(1,161,181,.11) 0%, transparent 72%);
}

.hero__grid{
  position:relative;z-index:3;
  /* wider than the site wrap: at 1600px+ the default 1180 left the hero
     stranded in the middle of the viewport with dead cream either side */
  max-width:min(1440px, 92vw);
  display:grid;grid-template-columns:1.12fr 1fr;
  gap:clamp(32px,4vw,72px);align-items:center;
  padding-top:clamp(56px,7vw,86px);
  padding-bottom:clamp(64px,8vw,104px);
}

.hero__title{
  font-size:clamp(2.7rem,6vw,5.4rem);
  font-weight:400;letter-spacing:-.018em;margin-bottom:20px;
  line-height:1.06;
}
.hero__title .pop{
  position:relative;display:inline-block;
  color:var(--pink);font-weight:400;transform:rotate(-3deg);   /* DM Serif has no bold */
}
/* Her logo leads the hero, with the headline directly under it, so the first
   thing anyone sees is the brand rather than a slogan. */
.hero__logo{
  /* Sized by HEIGHT, not width. The stacked logo is roughly square and the nav
     lockup is 1.84:1 landscape - fixing the height keeps both looking right and
     stops the layout jumping when the real file drops in. max-width catches the
     wide fallback before it gets out of hand. */
  height:clamp(132px,15vw,196px);
  width:auto;
  max-width:min(100%,340px);
  object-fit:contain;object-position:left center;
  margin:0 0 clamp(12px,1.4vw,20px);
}

/* hand-drawn highlighter mark behind POP */
.hero__title .pop::after{
  content:"";position:absolute;left:-4%;right:-4%;bottom:.16em;height:.16em;
  background:var(--teal);opacity:.32;border-radius:var(--radius-pill);z-index:-1;
}

.hero__lede{
  max-width:46ch;margin:0 0 30px;
  font-size:clamp(1rem,1.35vw,1.12rem);color:var(--muted);font-weight:300;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* Desktop: logo and headline as one centred lockup.
   A centred logo above a left-aligned headline put the two on different axes -
   the logo's centre landed well right of where the text began, which is what
   made the proportions look off. Sharing one axis fixes it, and the logo grows
   so it can hold its own against an 86px headline. Mobile already does this,
   because the stacked hero sets text-align:center on the whole grid. */
@media (min-width:861px){
  .hero__logo{
    display:block;
    margin-left:auto;margin-right:auto;
    object-position:center;
    height:clamp(150px,19vw,268px);
    max-width:min(100%,420px);
  }
  .hero__copy{text-align:center}
  .hero__lede,
  .hero__tagline{margin-left:auto;margin-right:auto}
  .hero__cta{justify-content:center}
  /* the highlighter under POP is rotated, so it needs the extra breathing room
     that the left-aligned layout got from the column edge */
  .hero__title{margin-bottom:24px}
}

/* --- layered photo collage --- */
.hero__collage{
  position:relative;
  aspect-ratio:1/1;
  width:100%;max-width:680px;margin-inline:auto;
}
.hc{
  position:absolute;margin:0;overflow:hidden;
  border:7px solid #fff;border-radius:20px;
  box-shadow:0 22px 50px rgba(42,36,56,.18), 0 4px 12px rgba(42,36,56,.08);
  animation:drift 9s ease-in-out infinite;
}
.hc img{width:100%;height:100%;object-fit:cover;display:block}

.hc--a{width:57%;aspect-ratio:3/4;  top:0;    left:0;    z-index:2;rotate:-5deg;animation-delay:0s}
.hc--c{width:41%;aspect-ratio:3/4;  top:7%;   right:0;   z-index:1;rotate:7deg; animation-delay:1.4s}
.hc--b{width:62%;aspect-ratio:4/3;  bottom:1%;right:3%;  z-index:3;rotate:3deg; animation-delay:.7s}

@keyframes drift{
  0%,100%{translate:0 0}
  50%    {translate:0 -13px}
}

/* spinning foil sticker */
.hc__sticker{
  position:absolute;z-index:4;
  left:-2%;bottom:12%;
  width:116px;height:116px;
  display:grid;place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, var(--pink-soft) 0%, var(--pink) 46%, var(--pink-deep) 100%);
  box-shadow:0 14px 34px rgba(234,0,106,.42), inset 0 -6px 14px rgba(0,0,0,.14);
}
.hc__sticker svg{
  position:absolute;inset:0;width:100%;height:100%;
  animation:spin 18s linear infinite;
}
.hc__sticker text{
  fill:#fff;font-family:var(--font-body);
  font-size:8.4px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.hc__star{color:#fff;font-size:1.5rem;line-height:1}
@keyframes spin{from{rotate:0deg}to{rotate:360deg}}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background:var(--pink);color:#fff;overflow:hidden;
  padding:15px 0;white-space:nowrap;
}
.marquee__track{
  display:inline-flex;align-items:center;gap:26px;
  animation:scrollx 30s linear infinite;
  will-change:transform;
}
.marquee__track span{
  font-family:var(--font-display);font-size:1.5rem;font-weight:400;letter-spacing:.01em;
}
.marquee__track i{color:rgba(255,255,255,.55);font-style:normal}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* =========================================================
   SERVICES / TILES
   ========================================================= */
.services{
  background:
    radial-gradient(ellipse 50% 40% at 4% 0%,  var(--pink-soft) 0%, transparent 58%),
    radial-gradient(ellipse 46% 42% at 98% 88%, var(--teal-soft) 0%, transparent 60%),
    var(--white);
}
.tiles{
  display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.tile{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),box-shadow .3s;
}
.tile:hover{transform:translateY(-10px) scale(1.012);box-shadow:var(--shadow-lg)}

.tile__media{
  aspect-ratio:4/3;overflow:hidden;background:
    linear-gradient(135deg,var(--pink-soft),var(--teal-soft) 70%);
}
.tile__media img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.tile:hover .tile__media img{transform:scale(1.06)}
/* graceful state before real photos are dropped in */
.tile__media img.is-missing,.shot img.is-missing,.about__media img.is-missing{opacity:0}

.tile__body{padding:26px 26px 30px;display:flex;flex-direction:column;flex:1}
.tile__body h3{font-size:1.28rem;margin-bottom:10px}
.tile__body p{color:var(--muted);font-size:.94rem;flex:1}
.tile__link{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:.85rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--pink-ink);
}
.tile__link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.tile:hover .tile__link svg{transform:translateX(5px)}

.tile--cta{
  background:linear-gradient(150deg,var(--teal-band),var(--teal-band-deep));
  color:#fff;justify-content:center;text-align:center;min-height:260px;
}
/* the body fills the row height, so centre inside it (not on the tile) */
.tile--cta .tile__body{justify-content:center;align-items:center;padding:38px 30px}
.tile--cta h3{color:#fff;font-size:1.45rem}
.tile--cta p{color:rgba(255,255,255,.93);margin-bottom:22px;flex:none;max-width:26ch}
.tile--cta .btn{align-self:center}

/* =========================================================
   PROCESS
   ========================================================= */
.process{
  background:linear-gradient(155deg,var(--pink-ink) 0%,var(--pink-deep) 100%);
  color:#fff;overflow:hidden;
}
.process .section__title{color:#fff}
.process .section__lede{color:rgba(255,255,255,.92)}

/* explicit columns, not auto-fit: 4 steps must never wrap to 3 + 1 orphan */
.steps{
  display:grid;gap:24px;
  grid-template-columns:repeat(4,1fr);
  counter-reset:step;
}
@media (max-width:1024px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){  .steps{grid-template-columns:1fr} }
.step{
  position:relative;padding:38px 26px 30px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  backdrop-filter:blur(6px);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),background .3s;
}
.step:hover{transform:translateY(-8px);background:rgba(255,255,255,.16)}

.step__num{
  position:absolute;top:-16px;right:22px;
  font-family:var(--font-display);font-size:3.4rem;font-weight:400;
  color:#fff;line-height:1;letter-spacing:-.04em;
}
.step__icon{
  width:56px;height:56px;border-radius:18px;margin-bottom:18px;
  display:grid;place-items:center;background:#fff;
}
.step__icon svg{
  width:26px;height:26px;fill:none;stroke:var(--pink);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
}
.step h3{color:#fff;font-size:1.2rem;margin-bottom:10px}
.step p{color:#fff;font-size:.92rem;font-weight:400}

.process__cta{text-align:center;margin-top:48px}

/* =========================================================
   GALLERY
   ========================================================= */
.gallery{
  background:
    radial-gradient(ellipse 44% 34% at 96% 4%, var(--pink-soft) 0%, transparent 60%),
    radial-gradient(ellipse 40% 34% at 2% 82%, var(--teal-soft) 0%, transparent 62%),
    var(--cream);
}

.filters{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-bottom:36px;
}
.filter{
  padding:10px 20px;min-height:44px;border-radius:var(--radius-pill);
  font-size:.86rem;font-weight:500;color:var(--muted);
  background:var(--white);box-shadow:inset 0 0 0 1px var(--line);
  transition:all .22s;
}
.filter:hover{color:var(--pink-ink);box-shadow:inset 0 0 0 1px var(--pink-ink)}
.filter.is-active{background:var(--pink-ink);color:#fff;box-shadow:0 8px 20px rgba(196,0,92,.30)}

.grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  grid-auto-rows:220px;
  grid-auto-flow:dense; /* let wide/tall tiles backfill gaps */
}
.shot{
  position:relative;overflow:hidden;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--pink-soft),var(--teal-soft) 70%);
  box-shadow:var(--shadow-sm);padding:0;
  transition:transform .3s,box-shadow .3s,opacity .3s;
}
.shot--tall{grid-row:span 2}
.shot--wide{grid-column:span 2}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.shot:hover{transform:scale(1.02) translateY(-4px);box-shadow:var(--shadow-lg);z-index:2}
.shot:hover img{transform:scale(1.07)}
.shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(196,0,92,.45),transparent 55%);
  opacity:0;transition:opacity .3s;
}
.shot:hover::after{opacity:1}
.shot.is-hidden{display:none}

.gallery__more{text-align:center;margin-top:34px;color:var(--muted);font-size:.95rem}
.gallery__more a{color:var(--pink-ink);font-weight:600;border-bottom:2px solid var(--pink-soft)}
.gallery__more a:hover{border-bottom-color:var(--pink)}

/* =========================================================
   SOCIAL BAND
   ========================================================= */
.social-band{
  background:linear-gradient(140deg,var(--teal-band),var(--teal-band-deep));
  color:#fff;padding:clamp(48px,6vw,72px) 0;
}
.social-band__inner{
  display:flex;flex-wrap:wrap;gap:32px;align-items:center;justify-content:space-between;
}
.social-band__title{font-size:clamp(1.6rem,3.2vw,2.3rem);color:#fff;margin-bottom:10px;max-width:18ch}
.social-band__lede{color:rgba(255,255,255,.92);font-size:.98rem;font-weight:400;max-width:44ch}
.social-band__links{display:flex;gap:14px;flex-wrap:wrap}
.social{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;min-height:52px;border-radius:var(--radius-pill);
  background:#fff;color:var(--teal-deep);font-weight:600;font-size:.94rem;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;
}
.social:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.social svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}
/* Fill-based glyphs (Facebook, TikTok) opt in by class. This used to be
   :last-child, which silently broke the moment a third icon was added. */
.social svg.is-filled{fill:currentColor;stroke:none}

/* Instagram feed slot.
   :empty means the slot takes up no space at all until an embed is pasted in,
   so the band reads as a finished follow section either way and there is never
   an empty gap waiting to be filled. */
.social-band__feed{margin-top:clamp(28px,4vw,44px)}
.social-band__feed:empty{display:none}
.social-band__feed > *{max-width:100%}

/* Rendered from Behold's JSON, so it uses the site's own radii and shadows
   instead of a third-party widget's. Square tiles because Instagram grids are
   square — anything else reads as wrong to anyone who knows the app. */
.igfeed{
  display:grid;gap:clamp(8px,1.2vw,14px);
  grid-template-columns:repeat(4,1fr);
}
.igfeed__item{
  border-radius:var(--radius-sm);overflow:hidden;
  background:rgba(255,255,255,.10);
  aspect-ratio:1;
}
.igfeed__item a{display:block;width:100%;height:100%}
.igfeed__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease,opacity .25s;
}
.igfeed__item a:hover img,
.igfeed__item a:focus-visible img{transform:scale(1.07);opacity:.86}

@media (max-width:860px){ .igfeed{grid-template-columns:repeat(3,1fr)} }
@media (max-width:520px){ .igfeed{grid-template-columns:repeat(2,1fr)} }

/* =========================================================
   SERVICE AREA
   ========================================================= */
.area{
  background:
    radial-gradient(ellipse 40% 40% at 0% 10%, var(--teal-soft) 0%, transparent 58%),
    var(--white);
}
.area__grid{
  display:grid;gap:34px;
  grid-template-columns:1.25fr .95fr;align-items:stretch;
}
.area__map{
  border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);min-height:420px;
  border:6px solid #fff;background:var(--teal-soft);
}
.area__map iframe{display:block;height:100%;min-height:408px}

.area__info{
  background:var(--cream);border-radius:var(--radius);
  padding:36px 32px;display:flex;flex-direction:column;
}
.area__info h3{font-size:1.35rem;margin-bottom:20px}
.area__list{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:26px;
}
.area__list li{
  display:flex;align-items:center;gap:9px;font-size:.93rem;color:var(--ink);
}
.area__list li::before{
  content:"";width:8px;height:10px;flex:none;border-radius:50% 50% 46% 46%;
  background:var(--teal);
}
.area__list li:nth-child(even)::before{background:var(--pink)}

.note{
  background:var(--pink-soft);border-radius:var(--radius-sm);
  padding:18px 20px;margin-bottom:24px;margin-top:auto;
}
.note strong{display:block;color:var(--pink-deep);font-size:.92rem;margin-bottom:5px}
.note p{color:var(--muted);font-size:.88rem;margin:0}
.area__info .btn{align-self:flex-start}

/* =========================================================
   ABOUT
   ========================================================= */
.about{
  background:
    radial-gradient(ellipse 46% 44% at 88% 6%,  var(--pink-soft) 0%, transparent 60%),
    radial-gradient(ellipse 40% 38% at 6% 92%, var(--teal-soft) 0%, transparent 60%),
    var(--cream);
}
.about__grid{
  display:grid;gap:clamp(32px,5vw,64px);
  grid-template-columns:.95fr 1.05fr;align-items:center;
}
.about__media{
  position:relative;border-radius:var(--radius);overflow:visible;
}
.about__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
  background:linear-gradient(150deg,var(--pink-soft),var(--teal-soft));
}
.about__badge{
  position:absolute;right:-16px;bottom:28px;
  width:118px;height:118px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  /* teal, matching the logo's second colour */
  background:var(--teal-ink);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.4;
  box-shadow:0 14px 32px rgba(10,113,128,.42);
  transform:rotate(-8deg);
}
.about__body .section__title{text-align:left;font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:20px}
.about__body p{color:var(--muted)}

.stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.stats > div{
  flex:1 1 130px;background:#fff;border-radius:var(--radius-sm);
  padding:20px 18px;box-shadow:var(--shadow-sm);
}
.stats strong{
  display:block;font-family:var(--font-display);font-size:1.85rem;
  font-weight:400;color:var(--pink-ink);line-height:1.05;margin-bottom:6px;
}
.stats span{font-size:.78rem;color:var(--muted);letter-spacing:.03em}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{
  /* Deeper than --teal on purpose: white on --teal (#39a8a8) is only 2.86:1,
     and the muted eyebrow/lede sit at 88-92% white on top of that. The
     --teal-band pair keeps the LIGHTEST stop at ~6:1 so every layer clears AA. */
  background:linear-gradient(160deg,var(--teal-band) 0%,var(--teal-band-deep) 100%);
  color:#fff;
}
.contact .section__title{color:#fff}
.contact .section__lede{color:rgba(255,255,255,.88)}

.contact__grid{
  display:grid;gap:28px;grid-template-columns:1.35fr .8fr;align-items:start;
}

.form{
  background:#fff;border-radius:var(--radius);padding:clamp(26px,3.6vw,40px);
  box-shadow:var(--shadow-lg);color:var(--ink);
}
.form__row{display:grid;gap:18px;grid-template-columns:1fr 1fr;margin-bottom:18px}
.field{display:flex;flex-direction:column;margin-bottom:18px}
.form__row .field{margin-bottom:0}
.field label{
  font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--ink);margin-bottom:7px;
}
.field label span{color:var(--pink-ink)}   /* --pink is only 3.87:1 at this size */
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.95rem;color:var(--ink);
  padding:14px 16px;min-height:50px;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--cream);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:#B0A9BC}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--pink);background:#fff;
  box-shadow:0 0 0 4px rgba(234,0,106,.12);
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{
  border-color:#D93025;box-shadow:0 0 0 4px rgba(217,48,37,.10);
}
.field .err{color:#D93025;font-size:.78rem;margin-top:6px}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

.form .btn{margin-top:8px}
.form__status{margin-top:14px;font-size:.9rem;text-align:center;min-height:1.4em}
.form__status.is-ok{color:var(--teal-deep);font-weight:600}
.form__status.is-err{color:#D93025;font-weight:600}

/* Attachments cost money on the form's free tier, so photos come by email
   instead. Sits under the button because it's a follow-up, not a field. */
.form__aside{
  margin-top:16px;padding-top:15px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--muted);text-align:center;
}
/* inline-flex + min-height so it clears the 44px tap target on a phone */
.form__aside a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  color:var(--pink-ink);font-weight:600;border-bottom:1px solid var(--pink-soft);
}
.form__aside a:hover{border-bottom-color:var(--pink-ink)}

.contact__card{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);padding:32px 28px;
}
.contact__card h3{color:#fff;font-size:1.25rem;margin-bottom:20px}
.contact__list{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.contact__list li{display:flex;align-items:center;gap:13px;font-size:.94rem}
.contact__list a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
.contact__list a:hover{border-bottom-color:var(--pink)}
/* Solid brand pink on the teal band -- the logo's two colours side by side.
   White glyphs on #ea006a are 4.46:1, clearing the 3:1 that WCAG 1.4.11
   requires for meaningful non-text graphics. */
.ci{
  width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--pink);
  box-shadow:0 4px 12px rgba(234,0,106,.32);
}
.ci svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.contact__hours{
  border-top:1px solid rgba(255,255,255,.14);padding-top:22px;margin-bottom:24px;
}
.contact__hours h4{
  font-family:var(--font-body);font-size:.74rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:10px;
}
.contact__hours p{color:rgba(255,255,255,.92);font-size:.9rem;line-height:1.85}

.contact__socials{display:flex;gap:11px}
/* same card, same treatment -- grey chips next to pink ones read as a mistake */
.contact__socials a{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--pink);transition:background .22s,transform .22s,box-shadow .22s;
  box-shadow:0 4px 12px rgba(234,0,106,.32);
}
.contact__socials a:hover{background:var(--pink-ink);transform:translateY(-2px);box-shadow:0 8px 20px rgba(234,0,106,.44)}
.contact__socials svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.7}
.contact__socials svg.is-filled{fill:#fff;stroke:none}

/* =========================================================
   FOOTER
   ========================================================= */
/* Deep brand pink. Sits under the teal contact band so the page closes on
   the logo's two colours. Text alphas are raised from the old near-black
   values -- .68 white on this pink is only 3.99:1. */
.footer{background:linear-gradient(160deg,#B00053 0%,var(--pink-deep) 55%,#8E0042 100%);color:rgba(255,255,255,.9)}
.footer__inner{
  display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start;
  padding-top:60px;padding-bottom:44px;
}
.footer__brand{max-width:340px}
/* Proper reversed logo (images/brand/logo-white.png) — a purpose-drawn white
   version, not a flattened silhouette. The balloons keep their outlines and the
   highlights stay cut out, so it reads cleanly on the pink with no plate.

   Two earlier attempts failed and are worth not repeating: flattening the
   colour logo to white merged the balloons into one blob, and the "white
   variant" in the Aug 25 variants sheet is a broken render. This file also
   arrived with a faint alpha haze over 18% of its area, which showed as a pale
   rectangle on the pink until tools/make-logo.py --clean stripped it. */
.footer__logo{
  height:104px;width:auto;display:block;margin-bottom:20px;
}
@media (max-width:860px){ .footer__logo{height:88px;margin-inline:auto} }
.footer__brand p{font-size:.88rem;color:rgba(255,255,255,.88)}

.footer__nav{display:grid;grid-template-columns:1fr 1fr;gap:11px 34px}
.footer__nav a{font-size:.9rem;transition:color .2s}
.footer__nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

.footer__social{display:flex;gap:11px}
.footer__social a{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:#fff;transition:background .22s,transform .22s,box-shadow .22s;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
}
.footer__social a:hover{background:var(--teal-soft);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22)}
.footer__social svg{width:20px;height:20px;fill:none;stroke:var(--pink-ink);stroke-width:1.8}
.footer__social svg.is-filled{fill:var(--pink-ink);stroke:none}

.footer__bar{border-top:1px solid rgba(255,255,255,.22);padding:20px 0}
.footer__bar p{font-size:.82rem;color:rgba(255,255,255,.85);text-align:center;margin:0}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:rgba(26,20,36,.94);
  padding:5vh 6vw;
  animation:fade .22s ease;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:90vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
@keyframes fade{from{opacity:0}to{opacity:1}}

.lightbox__close{
  position:absolute;top:max(18px,env(safe-area-inset-top));right:18px;
  width:52px;height:52px;border-radius:50%;
  font-size:2rem;line-height:1;color:#fff;background:rgba(255,255,255,.12);
}
.lightbox__close:hover{background:var(--pink)}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:56px;height:56px;border-radius:50%;
  font-size:2.2rem;line-height:1;color:#fff;background:rgba(255,255,255,.12);
}
.lightbox__nav:hover{background:var(--pink)}
.lightbox__nav--prev{left:14px}
.lightbox__nav--next{right:14px}

/* =========================================================
   FLOATING MOBILE CTA
   ========================================================= */
.fab{
  position:fixed;left:50%;transform:translateX(-50%) translateY(120px);
  bottom:calc(16px + env(safe-area-inset-bottom));z-index:90;
  display:none;align-items:center;justify-content:center;
  padding:15px 34px;min-height:52px;border-radius:var(--radius-pill);
  background:var(--pink);color:#fff;
  /* same 1.18rem/700 as every other button — that is what keeps white on
     --pink legal as large text (4.46:1 clears the 3:1 threshold) */
  font-weight:700;font-size:1.18rem;
  box-shadow:0 12px 32px rgba(234,0,106,.42);
  transition:transform .35s cubic-bezier(.34,1.4,.64,1);
}
.fab.is-visible{transform:translateX(-50%) translateY(0)}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
/* Uses the standalone `translate` property, NOT `transform`.
   `.reveal.is-in{transform:none}` used to win on specificity and silently wipe
   any transform an element needed for itself (the About photo's tilt, the hero
   collage's parallax). Keeping reveal off `transform` entirely prevents that
   whole class of bug. */
.reveal{opacity:0;translate:0 26px;transition:opacity .7s ease,translate .7s cubic-bezier(.22,.8,.3,1)}
.reveal.is-in{opacity:1;translate:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .area__grid{grid-template-columns:1fr}
  .area__map{min-height:340px}
  .area__map iframe{min-height:340px}
  .contact__grid{grid-template-columns:1fr}
  .about__grid{grid-template-columns:1fr}
  .about__media{max-width:460px;margin-inline:auto}
  .about__body .section__title{text-align:center}
  .about__body{text-align:center}
  .stats{justify-content:center}
}

@media (max-width:860px){
  .nav__toggle{display:flex}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:20px 24px calc(28px + env(safe-area-inset-bottom));
    background:var(--cream);border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    transform:translateY(-130%);opacity:0;visibility:hidden;
    transition:transform .34s cubic-bezier(.22,.8,.3,1),opacity .24s,visibility .24s;
    max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
  }
  .nav__links.is-open{transform:translateY(0);opacity:1;visibility:visible}
  .nav__links > a:not(.btn){padding:15px 16px;font-size:1rem;border-radius:var(--radius-sm)}
  .nav__links > .btn{margin:10px 0 0;width:100%}

  .fab{display:flex}
  /* Mobile hero order: hook -> photos -> explain -> act.
     display:contents lets .hero__collage sit between children of .hero__copy,
     so the work is visible without scrolling. */
  .hero__grid{display:flex;flex-direction:column;gap:0;text-align:center;
              padding-top:clamp(28px,6vw,46px);padding-bottom:56px}
  .hero__copy{display:contents}
  .hero__title{order:1;margin-bottom:0}
  .hero__collage{order:2;max-width:400px;margin:16px auto 6px}
  .hero__lede{order:3;margin:0 auto 10px}
  .hero__tagline{order:4;margin:0 auto 20px}
  .hero__cta{order:5;justify-content:center}
  .hc__sticker{width:86px;height:86px;left:-1%;bottom:6%}
  .hc__sticker text{font-size:8px}

  .grid{grid-auto-rows:180px;gap:12px;grid-template-columns:repeat(2,1fr)}
  .shot--wide{grid-column:span 2}
  .shot--tall{grid-row:span 2}

  .social-band__inner{flex-direction:column;text-align:center;align-items:center}
  .social-band__title{max-width:none}
  .social-band__links{justify-content:center}

  .footer__inner{flex-direction:column;align-items:center;text-align:center}
  .footer__nav{grid-template-columns:1fr 1fr;justify-items:center;gap:4px 24px}
  /* 44px tap targets for the inline links on touch devices */
  .footer__nav a{display:flex;align-items:center;min-height:44px;padding:0 10px}
  .contact__list a{display:inline-flex;align-items:center;min-height:44px}
  .gallery__more a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}

  .lightbox__nav{width:46px;height:46px;font-size:1.8rem}
}

@media (max-width:560px){
  .form__row{grid-template-columns:1fr;gap:0}
  .form__row .field{margin-bottom:18px}
  .area__list{grid-template-columns:1fr}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .stats > div{flex:1 1 100%}
  .about__badge{width:96px;height:96px;font-size:.62rem;right:-6px}
  /* single column: taller rows so portrait installs aren't cropped to a band */
  .grid{grid-template-columns:1fr;grid-auto-rows:320px}
  .shot--wide,.shot--tall{grid-column:auto;grid-row:auto}
  .marquee__track span{font-size:1rem}
}

@media print{
  .nav,.fab,.lightbox,.hero__wash,.hero__confetti,.hero__drift,.burst,.hc__sticker,.marquee,.filters{display:none!important}
  body{background:#fff;color:#000}
  .reveal{opacity:1;translate:none}
}

/* POP lands with a little bounce, and the highlighter draws itself */
.hero__title .pop{
  animation:popIn .75s cubic-bezier(.2,1.5,.4,1) .35s both;
}
.hero__title .pop::after{
  transform-origin:left center;
  animation:swipe .55s cubic-bezier(.22,.8,.3,1) 1s both;
}
@keyframes popIn{
  0%  {opacity:0;scale:.55;rotate:-14deg}
  70% {scale:1.07;rotate:1deg}
  100%{opacity:1;scale:1;rotate:-3deg}
}
@keyframes swipe{ from{scaleX:0} to{scaleX:1} }

/* collage leans toward the cursor — subtle, never more than a few degrees */
.hero__collage{
  transform:perspective(1100px)
            rotateY(calc(var(--px,0) * 4deg))
            rotateX(calc(var(--py,0) * -4deg));
  transition:transform .5s cubic-bezier(.22,.8,.3,1);
  transform-style:preserve-3d;
}
/* parallax rides `transform` so it can't fight the drift animation (`translate`)
   or the static tilt (`rotate`) */
.hc--a{transform:translate(calc(var(--px,0) * 16px), calc(var(--py,0) * 12px))}
.hc--b{transform:translate(calc(var(--px,0) * -20px), calc(var(--py,0) * -14px))}
.hc--c{transform:translate(calc(var(--px,0) * 11px), calc(var(--py,0) * -9px))}
.hc{transition:transform .6s cubic-bezier(.22,.8,.3,1), box-shadow .3s}

/* slow drifting confetti fills the empty cream without shouting */
.hero__drift{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hero__drift i{
  position:absolute;left:var(--x);top:-6%;
  width:var(--s);height:calc(var(--s) * .62);
  background:var(--pink);border-radius:2px;opacity:0;
  animation:drop 15s linear var(--d) infinite;
}
.hero__drift i:nth-child(3n){background:var(--teal)}
.hero__drift i:nth-child(3n+1){background:var(--pink-soft)}
.hero__drift i:nth-child(4n){border-radius:50%}
@keyframes drop{
  0%  {opacity:0;transform:translateY(0) rotate(0)}
  8%  {opacity:.85}
  85% {opacity:.6}
  100%{opacity:0;transform:translateY(112vh) rotate(calc(var(--r) * 14))}
}

@media (prefers-reduced-motion:reduce){
  .hero__drift{display:none}
  .hero__collage{transform:none!important}
  .hc{translate:none!important;transform:none!important}
}


/* =========================================================
   LOAD BURST — one-shot confetti over the hero on arrival
   Pieces are generated in JS so each reload differs. The container is
   pointer-events:none and removes itself, so it can never block a click.
   ========================================================= */
.burst{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.burst i{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--w);height:var(--h);
  background:var(--c);
  border-radius:var(--br,2px);
  opacity:0;
  animation:confetti var(--dur) cubic-bezier(.12,.62,.32,1) var(--delay) forwards;
}
@keyframes confetti{
  0%   {opacity:0; translate:0 0;                 rotate:0deg;       scale:.5}
  7%   {opacity:1;                                                    scale:1}
  72%  {opacity:1}
  100% {opacity:0; translate:var(--tx) var(--ty); rotate:var(--rot); scale:.92}
}

@media (prefers-reduced-motion:reduce){
  .burst{display:none}
}

/* hero tagline — same script voice as the About sign-off */
.hero__tagline{
  font-family:var(--font-script);
  font-size:clamp(1.55rem,2.3vw,2.05rem);
  line-height:1.2;
  color:var(--teal-ink);
  margin:0 0 26px;
}

/* =========================================================
   SCROLL CUE + short-viewport hero
   On a 1440x760 laptop the hero used to run 115px past the fold, so nothing
   below it was visible and there was no hint the page continued. Two fixes:
   the cue below, and capping the collage by viewport HEIGHT so the next
   section always peeks.
   ========================================================= */
.hero__scroll{
  position:absolute;left:50%;translate:-50% 0;
  bottom:14px;z-index:5;
  display:inline-flex;flex-direction:column;align-items:center;gap:5px;
  padding:8px 14px;border-radius:var(--radius-pill);
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-ink);
  animation:nudge 2.2s ease-in-out infinite;
}
.hero__scroll:hover{color:var(--pink-ink)}
.hero__scroll-chev{
  width:11px;height:11px;
  border-right:2.5px solid currentColor;
  border-bottom:2.5px solid currentColor;
  rotate:45deg;
  border-radius:0 0 3px 0;
}
@keyframes nudge{
  0%,100%{translate:-50% 0}
  50%    {translate:-50% 7px}
}

/* short laptops: pull the hero in so the marquee always shows below it */
@media (min-width:861px) and (max-height:900px){
  .hero__grid{padding-top:30px;padding-bottom:60px}
  .hero__collage{max-width:min(680px, 66vh)}
}
@media (min-width:861px) and (max-height:740px){
  .hero__grid{padding-top:22px;padding-bottom:56px}
  .hero__collage{max-width:min(680px, 60vh)}
  .hero__scroll{display:none}   /* no room for it; the marquee itself is the cue */
}
/* the cue is desktop-only: on mobile the collage already sits mid-scroll */
@media (max-width:860px){ .hero__scroll{display:none} }
@media (prefers-reduced-motion:reduce){ .hero__scroll{animation:none} }