/* =============================================================
   Dove & Lens — Ivory Sky · White & Sky-Blue theme
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
:root{
  /* Theme blues. These are the built-in defaults; Admin > Settings > Theme
     can override all of them per-request via an inline <style> block
     (see theme_palette() in includes/functions.php) that this stylesheet's
     own cascade position always loses to, so admin customization "just
     works" without editing this file. The "-rgb" companions exist so the
     dozens of translucent rgba() overlays below can stay theme-aware too. */
  --sky:          #024da0;
  --sky-rgb:      2,77,160;
  --sky-soft:     #38bdf8;
  --sky-soft-rgb: 56,189,248;
  --sky-hi:       #c3ebfc;   /* pale highlight */
  --sky-deep:     #013268;   /* dark stop for gradients / readable accent */
  --sky-deep-rgb: 1,50,104;
  --sky-text:     #013d80;   /* readable blue accent on white */
  --sky-text-rgb: 1,61,128;

  /* legacy alias — inline styles in PHP templates use var(--gold-deep) */
  --gold-deep:  var(--sky-deep);

  /* whites & dark ink */
  --paper:      #ffffff;
  --snow:       #f4faff;
  --ink:        #0f2b40;   /* primary text on white */
  --ink-soft:   #587a93;   /* secondary text */

  --glass-bg:        rgba(255,255,255,.5);
  --glass-bg-strong: rgba(255,255,255,.78);
  --glass-border:    rgba(var(--sky-soft-rgb),.38);
  --glass-shadow:    0 20px 50px -22px rgba(var(--sky-deep-rgb),.25);
  --sky-line:        rgba(var(--sky-rgb),.38);
  --sky-glow:        rgba(var(--sky-rgb),.32);

  --radius:   22px;
  --radius-lg: 32px;
  --blur:     22px;
  --maxw:     1200px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
/* overflow-x belongs on both html and body: <html> is the element that
   actually owns viewport scrolling in standards mode, so body's own
   overflow-x:hidden (below) doesn't stop the page itself from picking up
   horizontal scroll when something bleeds past the right edge (GSAP's
   .reveal.from-left/.from-right start 46-60px off-screen until revealed,
   the ribbon marquee track is 2x width by design, etc). Without this,
   mobile users could swipe the whole page sideways onto a blank strip. */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }

/* Lenis smooth-scroll host rules (Lenis toggles these classes on <html>) */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--snow);
  min-height:100vh;
  line-height:1.6;
  overflow-x:hidden;
}
/* Ambient gradient wash — painted on its own fixed, composited layer instead
   of `background-attachment:fixed` on <body>. A fixed background image forces
   the browser to repaint the whole viewport on every scroll frame (very janky
   under Lenis smooth-scroll); a fixed pseudo-element gets its own layer and is
   simply re-composited, so scrolling stays smooth. Also avoids the long-
   standing iOS Safari `background-attachment:fixed` bugs. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(var(--sky-rgb),.16) 0%, rgba(var(--sky-rgb),0) 60%),
    radial-gradient(1000px 700px at 100% 0%, rgba(var(--sky-soft-rgb),.14) 0%, rgba(var(--sky-soft-rgb),0) 55%),
    radial-gradient(900px 900px at 50% 120%, rgba(var(--sky-rgb),.11) 0%, rgba(var(--sky-rgb),0) 60%),
    linear-gradient(180deg, #fbfeff 0%, var(--snow) 100%);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ line-height:1.1; margin:0 0 .4em; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
h1{font-family: "Lobster";}
.serif{ font-family:'Cormorant Garamond',Georgia,serif; }
::selection{ background:rgba(var(--sky-soft-rgb),.35); color:#06283d; }

/* ---- Ambient background orbs (parallax layers) ---- */
.bg-wash{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.3; will-change:transform;
  background:radial-gradient(circle at 30% 30%, var(--sky), rgba(var(--sky-soft-rgb),0)); }
.orb-1{ width:520px; height:520px; top:-120px; left:-100px; animation:float 16s var(--ease) infinite; }
.orb-2{ width:420px; height:420px; bottom:-140px; right:-80px; opacity:.22; animation:float 20s var(--ease) infinite reverse; }
.orb-3{ width:300px; height:300px; top:40%; left:55%;
  background:radial-gradient(circle at 30% 30%, var(--sky-soft), rgba(125,211,252,0)); opacity:.18; animation:float 24s var(--ease) infinite; }
@keyframes float{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(30px,-40px) scale(1.08);} }

/* ---- Sky utilities (class names kept from the gold theme — templates use them) ---- */
.gold-text{
  background:linear-gradient(100deg,var(--sky-deep),var(--sky) 35%,var(--sky-soft) 50%,var(--sky-text) 65%,var(--sky-deep));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{ to{ background-position:200% center; } }

/* Hairline sky divider */
.gold-rule{ height:1px; border:0; margin:0 auto; max-width:var(--maxw);
  background:linear-gradient(90deg, transparent, var(--sky-line), transparent); }

/* =========================================================
   Liquid glass — frosted white panels with a sky-kissed rim
   .liquid-glass        = subtle  (backdrop blur 4px)
   .liquid-glass-strong = bolder  (backdrop blur 40px)
   ========================================================= */
.liquid-glass,
.liquid-glass-strong,
.glass,
.glass-strong{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background-color:rgba(255,255,255,0.55);
}

/* subtle */
.liquid-glass{
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.8);
}

/* bolder (default .glass) */
.liquid-glass-strong,
.glass,
.glass-strong{
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  box-shadow:0 24px 50px -26px rgba(var(--sky-deep-rgb),.28), inset 0 1px 1px rgba(255,255,255,0.9);
}

/* Gradient-stroke border drawn as a masked ::before ring */
.liquid-glass::before,
.liquid-glass-strong::before,
.glass::before,
.glass-strong::before,
.nav-inner::before,
.footer-inner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1.4px;
  pointer-events:none;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
}
.liquid-glass::before{
  background:linear-gradient(180deg,
    rgba(var(--sky-soft-rgb),0.45) 0%,
    rgba(var(--sky-soft-rgb),0.14) 20%,
    rgba(var(--sky-soft-rgb),0)    40%,
    rgba(var(--sky-soft-rgb),0)    60%,
    rgba(var(--sky-soft-rgb),0.14) 80%,
    rgba(var(--sky-soft-rgb),0.45) 100%);
}
.liquid-glass-strong::before,
.glass::before,
.glass-strong::before,
.nav-inner::before,
.footer-inner::before{
  background:linear-gradient(180deg,
    rgba(125,211,252,0.65) 0%,
    rgba(var(--sky-soft-rgb),0.22) 20%,
    rgba(var(--sky-soft-rgb),0)    40%,
    rgba(var(--sky-soft-rgb),0)    60%,
    rgba(var(--sky-soft-rgb),0.22) 80%,
    rgba(125,211,252,0.55) 100%);
}

/* =========================================================
   Layout helpers
   ========================================================= */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.site-main{ display:block; }
/* padding-top/bottom only (not the padding shorthand): every .section(-tight)
   element also carries .container, and the shorthand — whichever of the two
   rules happens to come second — would zero out .container's own left/right
   padding for the sides it doesn't mention, leaving content flush against
   the viewport edge below max-width. */
.section{ padding-top:96px; padding-bottom:96px; }
.section-tight{ padding-top:60px; padding-bottom:60px; }
.center{ text-align:center; }
.eyebrow{ text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; font-weight:600;
  color:var(--sky-text); margin-bottom:14px; }
.lead{ font-size:1.15rem; color:var(--ink-soft); max-width:60ch; }
.center .lead{ margin-left:auto; margin-right:auto; }

.section-head{ max-width:760px; margin:0 auto 56px; }
.section-head h2{ font-size:clamp(2rem,4vw,3.1rem); }

/* =========================================================
   Navigation
   ========================================================= */
.nav{ position:sticky; top:0; z-index:50; padding:14px 0;
  transition:padding .3s var(--ease); }
.nav-inner{
  position:relative;                 /* anchor the ::before border ring */
  width:calc(100% - 32px); max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:10px 20px; border-radius:100px;
  background-color:rgba(255,255,255,0.6);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  box-shadow:0 10px 30px -16px rgba(var(--sky-deep-rgb),.3), inset 0 1px 1px rgba(255,255,255,0.9);
  transition:box-shadow .3s var(--ease), background-color .3s var(--ease);
}
/* Do NOT add overflow:hidden here — it would clip the Categories dropdown. */
.nav.scrolled .nav-inner{ background-color:rgba(255,255,255,0.85);
  box-shadow:0 14px 34px -18px rgba(var(--sky-deep-rgb),.4), 0 1px 0 rgba(var(--sky-soft-rgb),.15), inset 0 1px 1px rgba(255,255,255,0.9); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand-mark{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  color:var(--sky-deep); background:radial-gradient(circle at 35% 30%, #e8f6ff, #cdeafd);
  box-shadow:inset 0 0 0 1px var(--sky-line), 0 0 14px rgba(var(--sky-soft-rgb),.3); }
.brand-name{ font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:700; }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links > a, .nav-drop > a{
  padding:9px 16px; border-radius:100px; font-size:.94rem; font-weight:500;
  color:var(--ink); transition:background .2s var(--ease), color .2s var(--ease);
}
.nav-links > a:not(.nav-cta):hover, .nav-drop > a:hover{ background:rgba(var(--sky-soft-rgb),.14); color:var(--sky-deep); }
.nav-links a.active{ color:var(--sky-text); }
.nav-cta{
  background:linear-gradient(135deg,var(--sky-soft),var(--sky) 45%,var(--sky-deep));
  color:#fff !important; font-weight:600;
  box-shadow:0 8px 22px -8px rgba(var(--sky-soft-rgb),.6);
}
.nav-cta:hover{ filter:brightness(1.08); }

/* dropdown */
.nav-drop{ position:relative; }
.nav-menu{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(8px);
  min-width:200px; padding:10px; display:grid; gap:2px;
  background:var(--glass-bg-strong);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border); border-radius:18px;
  box-shadow:var(--glass-shadow);
  opacity:0; visibility:hidden; transition:.25s var(--ease);
}
.nav-menu a{ padding:9px 14px; border-radius:12px; font-size:.9rem; }
.nav-menu a:hover{ background:rgba(var(--sky-soft-rgb),.14); color:var(--sky-deep); }
/* sub-categories sit indented under their parent */
.nav-menu a.is-sub{ padding-left:28px; font-size:.85rem; color:var(--ink-soft); }
.nav-menu a.is-sub::before{ content:"↳"; margin-right:7px; opacity:.55; }
.nav-drop:hover .nav-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; width:42px; height:42px;
  border:none; background:transparent; cursor:pointer; padding:10px; }
.nav-toggle span{ height:2px; width:100%; background:var(--sky-deep); border-radius:2px; transition:.3s var(--ease); }
.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); }

/* =========================================================
   Buttons
   ========================================================= */
.btn-primary,.btn-glass{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:14px 30px; border-radius:100px; font-weight:600; font-size:1rem;
  border:1px solid transparent; transition:transform .2s var(--ease), box-shadow .25s var(--ease), filter .2s var(--ease);
}
.btn-primary{ background:linear-gradient(135deg,var(--sky-soft),var(--sky) 55%,var(--sky-deep));
  color:#fff; box-shadow:0 14px 30px -12px rgba(var(--sky-soft-rgb),.6); position:relative; overflow:hidden; }
.btn-primary::after{ /* light sweep */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  background-size:250% 100%; background-position:150% 0; transition:background-position .8s var(--ease); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 44px -14px rgba(var(--sky-soft-rgb),.75); }
.btn-primary:hover::after{ background-position:-150% 0; }
.btn-glass{ background:var(--glass-bg-strong); color:var(--ink); border-color:var(--glass-border);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:var(--glass-shadow); }
.btn-glass:hover{ transform:translateY(-2px); color:var(--sky-deep); border-color:rgba(var(--sky-soft-rgb),.55);
  box-shadow:0 20px 50px -20px rgba(var(--sky-deep-rgb),.3), 0 0 24px -6px var(--sky-glow); }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }
.center .btn-row{ justify-content:center; }

/* =========================================================
   Hero — full-bleed video, title over it, scroll hint
   ========================================================= */
.hero-video-section{
  /* Sized to fill exactly what's left below the sticky nav (~90px tall) on
     first load, not a bare 100vh — otherwise the section runs past the
     bottom of the screen and the scroll-hint anchored to its bottom edge
     ends up below the fold, invisible without scrolling first. */
  position:relative;
  min-height:calc(100vh - 90px); min-height:calc(100svh - 90px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate; background:var(--ink);
}
.hero-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
}
.hero-video-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,20,32,.4) 0%, rgba(6,20,32,.12) 45%, rgba(6,20,32,.55) 100%);
}
.hero-video-content{ position:relative; z-index:2; text-align:center; padding:0 24px; perspective:1000px; }
.hero-video-title{
  position:relative;
  margin:0; font-weight:600; letter-spacing:-.01em;
  font-size:clamp(3rem,9vw,7.2rem);
  color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.4);
  animation:heroGlow 5s ease-in-out infinite;
  --shine-x:-40%;
  will-change:transform;
}
/* Split into one span per letter by motion.js for the staggered entrance;
   inline-block so GSAP's y/scale transforms apply per character. Plain
   text (no JS, or motion off) just renders normally — .char never appears. */
.hero-video-title .char{ display:inline-block; }
/* A one-time light sweep across the settled word, driven by motion.js
   tweening --shine-x on the title itself (pseudo-elements can't be GSAP
   targets directly, but they do inherit their parent's custom properties).
   Duplicates the text via aria-label so it lines up exactly, clipped to a
   gradient so only a soft highlight band is visible. No-JS/motion-off
   pages never set --shine-x in range, so this stays invisible. */
.hero-video-title::after{
  content:attr(aria-label);
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    transparent 40%,
    rgba(var(--sky-soft-rgb),.9) 48%,
    #fff 50%,
    rgba(var(--sky-soft-rgb),.9) 52%,
    transparent 60%);
  background-size:250% 100%;
  background-position:var(--shine-x) 0;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  mix-blend-mode:plus-lighter;
  pointer-events:none;
}
/* A slow breathing halo behind the title, tinted from the site's own theme
   color so it re-tints automatically with Admin > Settings > Theme. The
   dark contrast shadow stays constant in both stops — only the glow layer
   breathes — so legibility over the video never dips. */
@keyframes heroGlow{
  0%,100%{ text-shadow:0 4px 30px rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.4), 0 0 26px rgba(var(--sky-soft-rgb),.35); }
  50%{      text-shadow:0 4px 30px rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.4), 0 0 54px rgba(var(--sky-soft-rgb),.75); }
}
.hero-video-section .scroll-hint{
  /* Centered via left:0/right:0/margin:auto rather than the more usual
     left:50%+translateX(-50%): .reveal's own completion state (added once
     this element's fade-in finishes) sets transform:none on .reveal.in with
     higher specificity than this selector, which was silently cancelling a
     translateX-based centering the moment the hint finished fading in. */
  position:absolute; left:0; right:0; bottom:20px; width:max-content; margin:0 auto;
  z-index:2; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45);
}
@media (max-width:680px){
  .hero-video-title{ font-size:clamp(2.4rem,12vw,3.6rem); }
  .hero-video-section .scroll-hint{ bottom:14px; }
}

/* =========================================================
   Feature strip (stat/quote row)
   ========================================================= */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat{ padding:28px 22px; text-align:center; border-radius:var(--radius);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.stat .num{ font-family:'Cormorant Garamond',serif; font-size:2.6rem; font-weight:700; }
.stat .lbl{ color:var(--ink-soft); font-size:.9rem; }

/* Sky gradient border that fades in on hover (masked-stroke, like .glass::before) */
.stat::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  pointer-events:none; opacity:0; transition:opacity .35s var(--ease);
  background:linear-gradient(135deg, var(--sky-soft), var(--sky) 50%, var(--sky-deep));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
}
.stat:hover{ transform:translateY(-4px);
  box-shadow:0 18px 40px -18px rgba(var(--sky-soft-rgb),.45), inset 0 1px 1px rgba(255,255,255,0.9); }
.stat:hover::after{ opacity:1; }

/* =========================================================
   Cards / grids
   ========================================================= */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }

.card{ border-radius:var(--radius); overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover{ transform:translateY(-6px);
  box-shadow:0 30px 60px -24px rgba(var(--sky-deep-rgb),.35), 0 0 40px -10px var(--sky-glow); }
.card-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .6s var(--ease); }
.card:hover .card-media img{ transform:scale(1.06); }
.card-media .count{ position:absolute; top:14px; right:14px; z-index:2;
  padding:6px 14px; border-radius:100px; font-size:.78rem; font-weight:600; color:var(--sky-deep);
  background:rgba(255,255,255,.8); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--glass-border); }
.card-body{ padding:22px 24px 26px; }
.card-body h3{ font-family:'Cormorant Garamond',serif; font-size:1.7rem; }
.card-body p{ color:var(--ink-soft); margin:0 0 16px; font-size:.96rem; }
.card-link{ font-weight:600; color:var(--sky-text); display:inline-flex; align-items:center; gap:6px; }
.card-link svg{ transition:transform .25s var(--ease); }
.card:hover .card-link svg{ transform:translateX(4px); }

/* Split feature block */
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
.split-media{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; }
.split-media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.split h2{ font-size:clamp(1.8rem,3.5vw,2.7rem); }

/* =========================================================
   Gallery (masonry-ish)
   ========================================================= */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:44px; }
.filter-bar a{ padding:9px 20px; border-radius:100px; font-size:.9rem; font-weight:500;
  background:var(--glass-bg); border:1px solid var(--glass-border); color:var(--ink);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:.2s var(--ease); }
.filter-bar a:hover{ color:var(--sky-deep); border-color:rgba(var(--sky-soft-rgb),.55); }
.filter-bar a.active{ background:linear-gradient(135deg,var(--sky-soft),var(--sky) 55%,var(--sky-deep)); color:#fff; border-color:transparent; }

.masonry{ columns:3; column-gap:22px; }
.masonry .tile{ break-inside:avoid; margin-bottom:22px; border-radius:var(--radius); overflow:hidden;
  cursor:zoom-in; position:relative; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.masonry .tile:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -20px rgba(var(--sky-deep-rgb),.35), 0 0 30px -8px var(--sky-glow); }
.masonry .tile img{ width:100%; border-radius:var(--radius); }
.tile-cap{ position:absolute; inset:auto 0 0 0; padding:26px 18px 14px; color:#fff;
  background:linear-gradient(0deg,rgba(7,42,64,.85),transparent);
  font-family:'Cormorant Garamond',serif; font-size:1.15rem; opacity:0; transition:.3s var(--ease); }
.masonry .tile:hover .tile-cap{ opacity:1; }

/* =========================================================
   Forms (booking / admin)
   ========================================================= */
.form-card{ max-width:720px; margin:0 auto; padding:38px 40px; border-radius:var(--radius-lg); }
.field{ margin-bottom:20px; }
.field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:8px; color:var(--ink); }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; font-size:1rem; font-family:inherit; color:var(--ink);
  background:rgba(255,255,255,.75); border:1px solid var(--glass-border); border-radius:14px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); outline:none;
}
.field input::placeholder,.field textarea::placeholder{ color:rgba(88,122,147,.6); }
.field select option{ background:#fff; color:var(--ink); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--sky); box-shadow:0 0 0 4px rgba(var(--sky-soft-rgb),.2); background:#fff; }
.field input[type="date"]{ color-scheme:light; }
.field textarea{ min-height:130px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }

.form-card-wide{ max-width:860px; }
.field-note{ color:var(--ink-soft); font-size:.88rem; margin:-4px 0 12px; }
.label-note{ color:var(--ink-soft); font-weight:400; }
.step-title{ font-size:1.6rem; margin:0 0 20px; }
.step-hint{ color:#b03a3a; font-size:.9rem; font-weight:500; margin:0 0 14px; }

/* Booking add-ons (booking_options) */
.option-list{ display:grid; gap:10px; }
.option-row{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; border-radius:14px;
  background:rgba(255,255,255,.5); border:1px solid var(--glass-border); }
.option-row-info{ display:flex; flex-direction:column; gap:2px; }
.option-row-meta{ color:var(--ink-soft); font-size:.85rem; }
.option-row input[type="number"]{ width:76px; padding:9px 10px; text-align:center; flex:0 0 auto; }

/* =========================================================
   Booking — choice cards (service type / occasion / doves)
   A styled radio: the input itself is visually hidden but
   still focusable, so keyboard + screen readers keep working.
   ========================================================= */
.choice-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-bottom:8px; }
.choice-grid-sm{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.choice-card{
  position:relative; display:block; cursor:pointer; padding:18px 20px; border-radius:18px;
  background:rgba(255,255,255,.55); border:1px solid var(--glass-border);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}
.choice-card:hover{ transform:translateY(-2px); background:rgba(255,255,255,.8); border-color:var(--sky); }
.choice-card input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.choice-card:focus-within{ border-color:var(--sky); box-shadow:0 0 0 4px rgba(var(--sky-soft-rgb),.22); }
.choice-card.is-picked{
  border-color:var(--sky); background:rgba(var(--sky-soft-rgb),.12);
  box-shadow:0 0 0 1px var(--sky), 0 14px 30px -18px rgba(var(--sky-deep-rgb),.5);
}
.choice-card.is-picked::after{
  content:"✓"; position:absolute; top:14px; right:16px;
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:.8rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--sky),var(--sky-deep));
}
.choice-body{ display:flex; flex-direction:column; gap:5px; padding-right:26px; }
.choice-name{ font-weight:600; font-size:1.05rem; color:var(--ink); }
.choice-tag{ color:var(--sky-text); font-size:.86rem; font-weight:500; }
.choice-desc{ color:var(--ink-soft); font-size:.86rem; line-height:1.45; }
.choice-price{ margin-top:4px; font-weight:700; color:var(--sky-deep); }

/* Running total + summary */
.running-total{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-top:18px; padding:14px 18px; border-radius:14px;
  background:rgba(var(--sky-soft-rgb),.1); border:1px solid var(--sky-line); }
.running-total span{ color:var(--ink-soft); font-size:.92rem; }
.running-total strong{ font-size:1.35rem; color:var(--sky-deep); }
.summary-card{ margin:26px 0 4px; padding:22px 24px; border-radius:18px;
  background:rgba(255,255,255,.55); border:1px solid var(--glass-border); }
.summary-card h3{ margin:0 0 14px; font-size:1.3rem; }
.summary-list{ margin:0; display:grid; gap:8px; }
.summary-row{ display:flex; justify-content:space-between; gap:18px; padding-bottom:8px;
  border-bottom:1px dashed var(--sky-line); }
.summary-row:last-child{ border-bottom:0; padding-bottom:0; }
.summary-row dt{ color:var(--ink-soft); font-size:.88rem; }
.summary-row dd{ margin:0; font-weight:500; text-align:right; }

/* =========================================================
   Booking calendar (assets/js/calendar.js)
   ========================================================= */
.cal-shell{ margin-bottom:6px; }
.cal{ padding:18px 18px 14px; border-radius:20px;
  background:rgba(255,255,255,.6); border:1px solid var(--glass-border); }
.cal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.cal-title{ font-family:'Cormorant Garamond',Georgia,serif; font-size:1.4rem; font-weight:700; color:var(--ink); }
.cal-nav{ width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1.4rem; line-height:1;
  display:grid; place-items:center; color:var(--sky-deep);
  background:rgba(255,255,255,.8); border:1px solid var(--glass-border);
  transition:.2s var(--ease); }
.cal-nav:hover:not(:disabled){ background:rgba(var(--sky-soft-rgb),.2); }
.cal-nav:disabled{ opacity:.3; cursor:not-allowed; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow{ margin-bottom:6px; }
.cal-dow div{ text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); }
.cal-cell{ display:block; }
.cal-day{
  width:100%; aspect-ratio:1; display:grid; place-items:center;
  border-radius:12px; font-size:.95rem; font-family:inherit; font-weight:500;
  border:1px solid transparent; background:transparent; color:var(--ink);
  cursor:pointer; transition:.15s var(--ease);
}
.cal-day.is-blank{ cursor:default; }
.cal-day.is-open{ background:rgba(255,255,255,.85); border-color:var(--glass-border); }
.cal-day.is-open:hover{ background:rgba(var(--sky-soft-rgb),.22); border-color:var(--sky); transform:scale(1.06); }
.cal-day.is-open:focus-visible{ outline:none; border-color:var(--sky); box-shadow:0 0 0 3px rgba(var(--sky-soft-rgb),.35); }
.cal-day.is-past{ color:rgba(88,122,147,.4); cursor:not-allowed; }
.cal-day.is-booked,
.cal-day.is-blocked{
  cursor:not-allowed; color:#b03a3a; text-decoration:line-through;
  background:rgba(200,80,80,.1); border-color:rgba(220,110,110,.35);
}
.cal-day.is-blocked{ color:var(--ink-soft); background:rgba(88,122,147,.12);
  border-color:rgba(88,122,147,.25); text-decoration:none; }
.cal-day.is-today{ font-weight:800; box-shadow:inset 0 0 0 1px var(--sky); }
/* Today still gets a marker when it is no longer bookable (notice period,
   already taken) — but a muted one, so it never looks clickable. */
.cal-day.is-today.is-past,
.cal-day.is-today.is-booked,
.cal-day.is-today.is-blocked{ box-shadow:inset 0 0 0 1px rgba(88,122,147,.4); }
.cal-day.is-selected{
  background:linear-gradient(135deg,var(--sky),var(--sky-deep)); color:#fff; border-color:transparent;
  box-shadow:0 10px 22px -12px rgba(var(--sky-deep-rgb),.8); transform:scale(1.04);
}
.cal-day.is-selected:hover{ background:linear-gradient(135deg,var(--sky),var(--sky-deep)); }
.cal-legend{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--sky-line);
  color:var(--ink-soft); font-size:.8rem; }
.cal-legend span{ display:inline-flex; align-items:center; gap:7px; }
.cal-legend .dot{ width:11px; height:11px; border-radius:4px; display:inline-block; }
.dot-open{ background:rgba(255,255,255,.9); border:1px solid var(--sky); }
.dot-taken{ background:rgba(200,80,80,.35); border:1px solid rgba(220,110,110,.6); }
.dot-off{ background:rgba(88,122,147,.3); border:1px solid rgba(88,122,147,.5); }
.cal-picked{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding:13px 18px; border-radius:14px;
  background:rgba(var(--sky-soft-rgb),.1); border:1px solid var(--sky-line); }
.cal-picked span{ color:var(--ink-soft); font-size:.9rem; }
.cal-picked strong{ color:var(--sky-deep); margin-right:auto; }
.cal-picked-empty{ background:rgba(255,255,255,.5); border-color:var(--glass-border); }
.cal-picked-empty span{ margin-right:auto; }

.alert{ padding:16px 20px; border-radius:16px; margin-bottom:24px; font-weight:500; }
.alert-success{ background:rgba(var(--sky-soft-rgb),.14); border:1px solid var(--sky-line); color:var(--sky-deep); }
.alert-error{ background:rgba(210,70,70,.1); border:1px solid rgba(220,110,110,.4); color:#b03a3a; }

/* Booking steps */
.steps{ display:flex; gap:10px; justify-content:center; margin-bottom:30px; flex-wrap:wrap; }
.steps .step{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-soft); }
.steps .step .n{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:.8rem; font-weight:700; background:rgba(var(--sky-soft-rgb),.16); color:var(--sky-deep); }

/* =========================================================
   Page header band
   ========================================================= */
/* padding-top/bottom only — see the .section comment above; .page-head
   always carries .container too. */
.page-head{ padding-top:130px; padding-bottom:40px; text-align:center; }
.page-head h1{ font-size:clamp(2.4rem,5vw,4rem); }
.page-head .lead{ margin-top:12px; margin-left:auto; margin-right:auto; }

/* =========================================================
   Footer
   ========================================================= */
.footer{ margin-top:80px; padding:60px 0 30px; }
.footer-inner{ position:relative; overflow:hidden; max-width:var(--maxw); margin:0 auto; padding:44px 40px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px;
  border-radius:var(--radius-lg);
  background-color:rgba(255,255,255,0.65);
  backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px);
  box-shadow:0 24px 50px -26px rgba(var(--sky-deep-rgb),.28), inset 0 1px 1px rgba(255,255,255,0.9); }
.footer-brand .brand-name{ font-size:1.7rem; }
.footer-tag{ color:var(--ink-soft); max-width:32ch; margin-top:8px; }
.footer-col h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.18em; color:var(--sky-text); margin-bottom:16px; }
.footer-col a,.footer-col span{ display:block; color:var(--ink-soft); margin-bottom:10px; font-size:.94rem; transition:color .2s; }
.footer-col a:hover{ color:var(--sky-deep); }
.footer-col .muted{ opacity:.8; }
.footer-base{ max-width:var(--maxw); margin:26px auto 0; padding:0 12px;
  display:flex; justify-content:space-between; align-items:center; color:var(--ink-soft); font-size:.85rem; }
.muted-link{ opacity:.6; }
.muted-link:hover{ opacity:1; color:var(--sky-deep); }

/* =========================================================
   Lightbox
   ========================================================= */
/* display is toggled by Alpine x-show; x-cloak keeps it hidden pre-init / no-JS */
.lightbox{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:40px;
  background:rgba(240,249,255,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.lightbox img{ max-width:min(1000px,92vw); max-height:82vh; border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(7,42,64,.5), 0 0 60px -12px var(--sky-glow); }
.lightbox-cap{ color:var(--sky-deep); margin-top:16px; font-family:'Cormorant Garamond',serif; font-size:1.2rem; text-align:center; }
.lightbox-close{ position:absolute; top:24px; right:30px; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--sky-line); background:rgba(var(--sky-soft-rgb),.14); color:var(--sky-deep); font-size:1.8rem;
  cursor:pointer; transition:.2s var(--ease); }
.lightbox-close:hover{ background:rgba(var(--sky-soft-rgb),.3); }

/* =========================================================
   Alpine.js helpers: x-cloak, back-to-top, booking wizard
   ========================================================= */
[x-cloak]{ display:none !important; }

.to-top{
  position:fixed; right:26px; bottom:26px; z-index:80;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--sky-deep);
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 30px -12px rgba(var(--sky-deep-rgb),.35), 0 0 20px -8px var(--sky-glow);
  transition:transform .2s var(--ease), color .2s var(--ease);
}
.to-top:hover{ transform:translateY(-3px); color:var(--sky-text); }

/* Booking wizard */
.wizard-progress{ height:6px; border-radius:100px; background:rgba(var(--sky-soft-rgb),.16); overflow:hidden; margin-bottom:26px; }
.wizard-progress span{ display:block; height:100%; border-radius:100px;
  background:linear-gradient(90deg,var(--sky-soft),var(--sky-deep));
  box-shadow:0 0 12px rgba(var(--sky-soft-rgb),.55);
  transition:width .45s var(--ease); }
.steps .step{ cursor:pointer; transition:color .2s var(--ease); }
.steps .step.is-active{ color:var(--sky-deep); font-weight:600; }
.steps .step.is-active .n{ background:linear-gradient(135deg,var(--sky),var(--sky-deep)); color:#fff; }
.steps .step.is-done .n{ background:var(--sky-deep); color:var(--sky-hi); }
.wizard-step{ }

/* =========================================================
   Reveal on scroll
   GSAP ScrollTrigger drives these when available (html.gsap-motion);
   the CSS transition + IntersectionObserver in main.js is the fallback.
   Without JS at all, content stays visible (opacity gated behind html.js).
   ========================================================= */
html.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.js .reveal.in{ opacity:1; transform:none; }
/* Directional / scale variants (combine with .reveal) */
html.js .reveal.from-left:not(.in){ transform:translateX(-46px); }
html.js .reveal.from-right:not(.in){ transform:translateX(46px); }
html.js .reveal.zoom-in:not(.in){ transform:scale(.9); }
/* When GSAP owns the animation, hand over fully — no CSS transitions */
html.gsap-motion .reveal{ transition:none; transform:none; }

/* =========================================================
   Admin
   ========================================================= */
.admin-shell{ display:grid; grid-template-columns:250px 1fr; min-height:100vh; }
.admin-side{ padding:26px 20px; background:rgba(255,255,255,.7);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-right:1px solid var(--glass-border); }
.admin-side .brand-name{ font-size:1.5rem; }
.admin-nav{ margin-top:30px; display:grid; gap:6px; }
.admin-nav a{ padding:12px 16px; border-radius:14px; font-weight:500; color:var(--ink); transition:.2s var(--ease); }
.admin-nav a:hover,.admin-nav a.active{ background:rgba(var(--sky-soft-rgb),.14); color:var(--sky-deep); }
.admin-main{ padding:36px 40px; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.admin-card{ padding:26px 28px; border-radius:var(--radius); margin-bottom:26px; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ text-align:left; padding:13px 14px; border-bottom:1px solid var(--sky-line); font-size:.92rem; vertical-align:middle; }
.table th{ font-size:.76rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); }
.table tr:hover td{ background:rgba(var(--sky-soft-rgb),.06); }
.thumb{ width:56px; height:42px; object-fit:cover; border-radius:8px; }
.badge{ padding:4px 12px; border-radius:100px; font-size:.76rem; font-weight:600; }
.badge-pending{ background:rgba(var(--sky-soft-rgb),.16); color:var(--sky-deep); }
.badge-confirmed{ background:rgba(70,180,100,.18); color:#1a7d46; }
.badge-cancelled{ background:rgba(200,80,80,.14); color:#b03a3a; }
.btn-sm{ padding:7px 15px; font-size:.84rem; border-radius:100px; }
.btn-danger{ background:rgba(200,80,80,.12); color:#b03a3a; border:1px solid rgba(220,110,110,.35); }
.btn-danger:hover{ background:rgba(200,80,80,.22); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:30px; }
.stat-box{ padding:22px; border-radius:var(--radius); }
.stat-box .num{ font-size:2.2rem; font-family:'Cormorant Garamond',serif; font-weight:700; color:var(--sky-text); }
.stat-box .lbl{ color:var(--ink-soft); font-size:.88rem; }
.login-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }

/* Sidebar section headings (the nav grew with the booking tables) */
.admin-nav .nav-group{ margin-top:16px; padding:0 16px 4px; font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); opacity:.75; }
.admin-nav .nav-group:first-child{ margin-top:0; }

/* Indented sub-categories in the admin category table */
.tree-indent{ display:inline-block; color:var(--ink-soft); opacity:.6; }
.pill{ display:inline-block; padding:3px 10px; border-radius:100px; font-size:.74rem; font-weight:600;
  background:rgba(var(--sky-soft-rgb),.14); color:var(--sky-deep); margin:0 4px 4px 0; }
.pill-muted{ background:rgba(88,122,147,.13); color:var(--ink-soft); }

/* Dove price matrix (Admin > Dove Packages) */
.matrix input[type="number"]{ width:110px; padding:9px 11px; text-align:right;
  border:1px solid var(--glass-border); border-radius:10px; background:rgba(255,255,255,.75);
  font-family:inherit; font-size:.92rem; color:var(--ink); }
.matrix input[type="number"]:focus{ outline:none; border-color:var(--sky); box-shadow:0 0 0 3px rgba(var(--sky-soft-rgb),.2); }
.matrix td.base{ color:var(--ink-soft); font-size:.86rem; }

/* Admin month calendar — reuses the public .cal* styles, one month per card */
.admin-cal-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.cal-day.is-admin-booked{ background:rgba(var(--sky-soft-rgb),.2); border-color:var(--sky);
  color:var(--sky-deep); text-decoration:none; font-weight:700; }
.cal-day.is-admin-buffer{ background:rgba(var(--sky-soft-rgb),.08); border-color:var(--sky-line);
  color:var(--ink-soft); text-decoration:none; }
.cal-day-link{ text-decoration:none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .split.reverse{ direction:ltr; }
  .masonry{ columns:2; }
  .footer-inner{ grid-template-columns:1fr 1fr; }
  .admin-shell{ grid-template-columns:1fr; }
  .admin-side{ border-right:none; border-bottom:1px solid var(--glass-border); }
}
@media (max-width:680px){
  .section{ padding-top:64px; padding-bottom:64px; }
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:calc(100% + 12px); left:16px; right:16px;
    flex-direction:column; align-items:stretch; gap:6px; padding:16px;
    background:rgba(255,255,255,.94); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--glass-border); border-radius:22px; box-shadow:var(--glass-shadow);
    transform:translateY(-8px); opacity:0; visibility:hidden; transition:.28s var(--ease);
  }
  .nav-links.open{ transform:none; opacity:1; visibility:visible; }
  .nav-links > a,.nav-drop > a{ padding:12px 16px; }
  /* Lay the categories out as a flat static list once the panel is open —
     but only THEN: visibility:visible here would otherwise override the
     closed .nav-links' own visibility:hidden (a child's explicit visibility
     always wins over an ancestor's), leaving every category link tappable
     while merely invisible-by-opacity underneath the collapsed menu. */
  .nav-menu{ position:static; transform:none; box-shadow:none;
    background:transparent; border:none; padding:4px 0 4px 14px; }
  .nav-links.open .nav-menu{ opacity:1; visibility:visible; }
  .nav-drop:hover .nav-menu{ transform:none; }
  .grid-2,.grid-3,.stats{ grid-template-columns:1fr; }
  .masonry{ columns:1; }
  .footer-inner{ grid-template-columns:1fr; text-align:left; }
  .field-row{ grid-template-columns:1fr; }
  .form-card{ padding:28px 22px; }
  .footer-base{ flex-direction:column; gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  /* Motion is on by default, so motion.js normally adds html.force-motion and
     this whole block is bypassed. It only takes effect for visitors who both
     have the OS "reduce motion" setting AND opted out with ?motion=off — then
     animations are stripped and reveals shown statically. */
  html:not(.force-motion) *{ animation:none !important; scroll-behavior:auto; }
  html.js:not(.force-motion) .reveal,
  html.js:not(.force-motion) .reveal.from-left:not(.in),
  html.js:not(.force-motion) .reveal.from-right:not(.in),
  html.js:not(.force-motion) .reveal.zoom-in:not(.in){ opacity:1; transform:none; }
  /* .scroll-hint stays visible (as plain static text/arrow via the .reveal
     rule above) — it's the only wayfinding cue in the hero now that the
     hero has no buttons, so it can't be hidden outright like a purely
     decorative element. Only its bounce keyframe is dropped, by the
     blanket animation:none rule above. */
}

/* =========================================================
   Motion: loops + conversion cues (scroll & ambient)
   ========================================================= */

/* Scroll-progress bar (Alpine sets width) */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--sky-deep),var(--sky),var(--sky-soft));
  box-shadow:0 0 14px rgba(var(--sky-soft-rgb),.8); transition:width .1s linear; }

/* Pulsing glow ring — draws the eye to booking CTAs */
@keyframes ctaGlow{
  0%,100%{ box-shadow:0 14px 30px -12px rgba(var(--sky-soft-rgb),.6), 0 0 0 0 rgba(var(--sky-soft-rgb),.5); }
  50%    { box-shadow:0 16px 34px -12px rgba(var(--sky-soft-rgb),.75), 0 0 0 14px rgba(var(--sky-soft-rgb),0); }
}
.cta-pulse{ animation:ctaGlow 2.6s var(--ease) infinite; }

/* Gentle vertical bob (hero frame) */
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.bob{ animation:bob 5.5s ease-in-out infinite; }

/* Shine sweep across a surface */
.shine{ position:relative; }
.shine::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  background-size:250% 100%; background-position:150% 0; animation:sweep 5s ease-in-out infinite; }
@keyframes sweep{ 0%{ background-position:150% 0; } 55%,100%{ background-position:-150% 0; } }

/* Scroll-down hint in the hero */
.scroll-hint{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:40px;
  color:var(--sky-text); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; }
.scroll-hint svg{ animation:hintBounce 1.8s var(--ease) infinite; }
@keyframes hintBounce{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(7px); opacity:1; } }

/* Looping category ribbon */
.ribbon{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.ribbon-track{ display:flex; width:max-content; gap:10px; align-items:center; animation:ribbon 26s linear infinite; }
.ribbon:hover .ribbon-track{ animation-play-state:paused; }
.ribbon-track a{ display:inline-flex; align-items:center; gap:10px; padding:12px 26px; white-space:nowrap;
  font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--ink-soft); transition:color .2s var(--ease); }
.ribbon-track a:hover{ color:var(--sky-deep); }
.ribbon-track .sep{ width:7px; height:7px; border-radius:50%; background:var(--sky); opacity:.7;
  box-shadow:0 0 8px rgba(var(--sky-soft-rgb),.7); }
@keyframes ribbon{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Floating "Book a session" pill — the persistent nudge */
.book-fab{ position:fixed; left:24px; bottom:24px; z-index:80;
  display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:100px;
  font-weight:600; color:#fff; background:linear-gradient(135deg,var(--sky-soft),var(--sky) 55%,var(--sky-deep));
  box-shadow:0 14px 30px -10px rgba(var(--sky-soft-rgb),.6); transition:transform .2s var(--ease), filter .2s var(--ease); }
.book-fab:hover{ transform:translateY(-3px) scale(1.03); filter:brightness(1.08); }
.book-fab svg{ animation:bob 3.5s ease-in-out infinite; }

@media (max-width:680px){
  .book-fab{ left:16px; right:16px; bottom:16px; justify-content:center; }
}

/* =========================================================
   Maintenance / coming-soon page
   ========================================================= */
.maint{ min-height:100vh; display:grid; place-items:center; padding:32px; text-align:center; }
.maint-card{ max-width:620px; width:100%; padding:54px 44px; border-radius:var(--radius-lg); }
.maint-mark{ width:64px; height:64px; margin:0 auto; }
.maint-title{ font-size:clamp(2.4rem,6vw,3.6rem); margin:.2em 0 .3em; }
.maint-card .lead{ margin:0 auto 30px; }
.maint-meta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.maint-foot{ margin-top:26px; color:var(--ink-soft); font-size:.85rem; }
.maint-foot a{ color:var(--sky-text); }

/* =========================================================
   Admin: site-status / maintenance toggle card
   ========================================================= */
.status-card{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-left:5px solid var(--sky);
}
.status-card.is-down{ border-left-color:#c98a2a; background:rgba(208,138,30,.08); }
.status-info{ display:flex; align-items:center; gap:16px; }
.status-dot{ width:14px; height:14px; border-radius:50%; flex:0 0 auto;
  background:#2f9e57; box-shadow:0 0 0 5px rgba(47,158,87,.18); }
.status-card.is-down .status-dot{ background:#d08a1e; box-shadow:0 0 0 5px rgba(208,138,30,.2); }

/* =========================================================
   Parallax helpers (driven by motion.js / GSAP ScrollTrigger)
   ========================================================= */
[data-parallax]{ will-change:transform; }
.parallax-img{ overflow:hidden; }
.parallax-img img{ will-change:transform; }

/* =========================================================
   Image loading — photos fade in from a soft blur once the
   file has actually arrived (see main.js). Opacity/filter only:
   transform is owned by the GSAP parallax on some of these.
   ========================================================= */
html.js .img-load{ opacity:0; filter:blur(14px) saturate(.8);
  transition:opacity .9s var(--ease), filter .9s var(--ease); }
html.js .img-load.loaded{ opacity:1; filter:none; }
@media (prefers-reduced-motion:reduce){
  html.js:not(.force-motion) .img-load{ opacity:1; filter:none; transition:none; }
}
