/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Open+Sans&display=swap');

/* =========================================================
   RESET & BASE
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{
  height:auto;
  min-height:100%;
  overflow-y:scroll;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  background-color:#0e1320;
}
body{
  min-height:100%;
  font-family:'Open Sans',sans-serif;
  background:#f8f4f9 url('images/Collages.jpg') center/cover fixed no-repeat;
  color:#333;line-height:1.6;
  overscroll-behavior-y:none;
}
button,input,select,textarea{font:inherit}

/* Ensure anything using [hidden] never flashes before JS runs */
[hidden]{display:none !important}

/* =========================================================
   HEADER
   ========================================================= */
header{
  background-color:rgba(102,77,112,.8);
  padding:.6rem 1.5rem;
  position:fixed;inset:0 0 auto;z-index:1000;
  transform:translateY(-100%);
  animation:slideDown 1s ease forwards;
  backdrop-filter:saturate(110%) blur(2px);
  -webkit-backdrop-filter:saturate(110%) blur(2px);
  border-bottom:1px solid rgba(255,255,255,.08)
}
@keyframes slideDown{to{transform:translateY(0)}}
.index-page header{animation:none;transform:none}

/* Primary nav (desktop/tablet default) */
.nav-links{
  list-style:none;display:flex;justify-content:center;gap:2rem;
  margin:0 auto;
}
.nav-links a{color:#fff;text-decoration:none;font-weight:bold;font-size:1rem;transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:#ffb6c1}
.nav-links i{width:20px;height:20px;stroke:#fff;transition:stroke .3s;vertical-align:middle}
.nav-links a:hover i,.nav-links a.active i{stroke:#ffb6c1}

/* ===== Phone-only header: centered + sideways scroll =====
   - Works on all PHONES (≤640px). Tablets keep normal layout.
   - When items fit: remains centered.
   - When items overflow: horizontal scroll (both sides).
*/
@media (max-width:640px){
  header{ padding:.6rem .9rem; }

  .nav-links{
    width:max-content;               /* shrink-wrap to content */
    max-width:100%;
    margin:0 auto;                   /* center when it fits */
    justify-content:center;          /* keep gaps centered */
    gap:1rem;

    /* Horizontal scroll when overflowing */
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;/* momentum scroll (iOS) */
    overscroll-behavior-x:contain;   /* avoid page bounce on swipe */
    touch-action:pan-x;
    white-space:nowrap;
    padding-bottom:.2rem;

    /* Hide scrollbars + soft edge fade */
    scrollbar-width:none;
    mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links>li{flex:0 0 auto}
  .nav-links a{display:inline-flex;align-items:center;padding:.25rem .1rem}
}

/* =========================================================
   HERO (shared)
   ========================================================= */
.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:7rem 2rem 4rem;position:relative;text-align:left
}
.hero-wrapper{display:flex;justify-content:space-between;align-items:center;width:90%;max-width:1200px;gap:3rem;flex-wrap:wrap}
.hero-left{
  flex:1;min-width:300px;display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem;
  --cta-left:0;--cta-top:0
}
.hero-right{flex:1;min-width:280px;display:flex;justify-content:center;align-items:center}
.logo-image{transition:transform .3s}
.logo-image:hover{transform:scale(1.05)}

.welcome-heading{
  font:normal 4.2rem 'Bubblegum Sans',cursive;color:#fff;
  text-shadow:0 5px 5px rgb(7,136,168);letter-spacing:2px;line-height:1.1
}
.welcome-group{position:relative;display:block}
.subheading{font-size:1.8rem;color:#fff;text-shadow:0 3px 3px rgb(0,0,96);font-weight:600}

/* === PAGE KNOBS === */
:root{
  --fixed-header-offset:4.5rem;
  --circle-sticky-top:14rem;

  /* Reusable component variables */
  --pill-radius:9999px;
  --pill-shadow:0 6px 14px rgba(0,0,0,.18);
  --pill-focus:3px solid rgba(127,63,191,.55);

  /* Cookie UI z-index layering */
  --cookie-z-banner:10000;
  --cookie-z-modal:10001;
}

/* =========================================================
   CTA BUTTONS
   ========================================================= */
.cta-buttons{
  display:flex;gap:1.6rem;flex-wrap:wrap;position:relative;
  left:var(--cta-left);top:var(--cta-top);margin-top:.25rem
}

/* Orange gradient pill (used elsewhere) */
.cta-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.95rem 2.4rem;border-radius:var(--pill-radius);
  background:linear-gradient(135deg,#FF9E3D 0%,#FF6B2D 100%);
  color:#fff;text-decoration:none;
  font-family:'Bubblegum Sans','Open Sans',system-ui,sans-serif;
  font-size:clamp(1rem,1.6vw,1.35rem);letter-spacing:.2px;
  box-shadow:var(--pill-shadow),0 0 0 0 rgba(255,153,0,.45);
  transition:box-shadow .18s,filter .18s,transform .12s;cursor:pointer
}
.cta-pill:hover,.cta-pill:focus-visible{
  filter:brightness(1.08);
  box-shadow:0 8px 20px rgba(0,0,0,.22),0 0 22px 6px rgba(255,153,0,.55);
  transform:translateY(-1px);outline:none
}
.cta-pill:active{transform:translateY(0);filter:brightness(1.02)}
.cta-pill:focus-visible{outline:var(--pill-focus);outline-offset:3px}
.cta-pill.secondary{
  background:linear-gradient(135deg,#6A5ACD 0%,#483D8B 100%);
  box-shadow:var(--pill-shadow),0 0 0 0 rgba(106,90,205,.45)
}
.cta-pill.secondary:hover,.cta-pill.secondary:focus-visible{
  filter:brightness(1.1);
  box-shadow:0 8px 20px rgba(0,0,0,.22),0 0 22px 6px rgba(106,90,205,.55)
}

/* =========================================================
   GENERIC PILL BUTTON (used by cookie UI)
   ========================================================= */
.pill{
  -webkit-appearance:none;appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:.7rem 1.2rem;border-radius:var(--pill-radius);
  font-weight:700;line-height:1;text-decoration:none;
  background:linear-gradient(135deg,#7f3fbf 0%,#6b35a7 100%);color:#fff;
  box-shadow:var(--pill-shadow);
  transition:transform .12s ease, filter .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.pill:hover,.pill:focus-visible{filter:brightness(1.06);transform:translateY(-1px);outline:none}
.pill:active{transform:translateY(0)}
.pill:focus-visible{outline:var(--pill-focus);outline-offset:3px}
.pill.secondary{
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.65)
}
.pill.primary{
  background:linear-gradient(135deg,#FF9E3D 0%,#FF6B2D 100%);color:#fff;
}

/* =========================================================
   PREORDER BUTTON (Circle)
   ========================================================= */
.preorder-btn{
  -webkit-appearance:none;appearance:none;
  display:inline-block;
  padding:.9rem 2rem;
  border-radius:9999px;
  border:2px solid #7f3fbf;
  background:#fff;
  color:#7f3fbf;
  text-decoration:none;
  cursor:pointer;
  line-height:1;
  font-family:'Bubblegum Sans','Open Sans',system-ui,sans-serif;
  font-size:clamp(1rem,1.4vw,1.15rem);
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 4px 10px rgba(0,0,0,.14);
  transition:transform .12s ease, box-shadow .18s ease,
             background-color .18s ease, color .18s ease, border-color .18s ease;
  margin:.25rem 0 .5rem;
}
.preorder-btn:hover,
.preorder-btn:focus-visible{
  background:#7f3fbf;color:#fff;border-color:#7f3fbf;
  box-shadow:0 10px 22px rgba(0,0,0,.22);
  transform:translateY(-1px);
  outline:none;
}
.preorder-btn:active{transform:translateY(0)}

/* =========================================================
   MODAL (Circle pre-order)
   ========================================================= */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:2000
}
.modal-overlay.active{display:flex}
.modal{
  width:min(680px,92vw);max-height:90vh;overflow:auto;
  background:rgba(255,255,255,.12);backdrop-filter:blur(10px);
  border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.4);
  padding:1.75rem 1.5rem 1.5rem;color:#fff;text-shadow:0 2px 4px rgb(0,132,255);
  border:1px solid rgba(255,255,255,.2)
}
.modal header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem;position:sticky;top:0
}
.modal h3{
  font-family:'Bubblegum Sans',cursive;margin:0;font-size:1.8rem;text-shadow:0 4px 5px rgb(7,136,168)
}
.modal .close-btn{
  border:none;background:rgba(0,0,0,.35);color:#fff;width:36px;height:36px;border-radius:50%;
  cursor:pointer;font-size:1.2rem;line-height:36px;text-align:center
}
.modal p.disclaimer{
  background:rgba(255,165,0,.12);border-left:4px solid #ffaf3f;border-radius:10px;
  padding:.75rem 1rem;margin:.5rem 0 1rem;color:#fff6de;font-style:italic
}
.modal form{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.2rem
}
.modal form .full{grid-column:1 / -1}
.modal label{font-weight:700;color:#fff}
.modal input{
  width:100%;padding:.8rem 1rem;border-radius:10px;border:none;outline:none;background:#fff;color:#333;font-size:1rem;
  box-shadow:0 1px 3px rgba(0,0,0,.2)
}
.modal .actions{
  display:flex;gap:.8rem;justify-content:flex-end;margin-top:.5rem;grid-column:1 / -1
}
.btn-secondary,.btn-primary{
  padding:.8rem 1.4rem;border-radius:2rem;border:2px solid #7f3fbf;background:#fff;color:#7f3fbf;font-weight:bold;cursor:pointer
}
.btn-primary{background:#7f3fbf;color:#fff}

/* =========================================================
   PAGE-SPECIFIC LOGO BASES
   ========================================================= */
.logo-cc-1{width:500px;max-width:90%;margin:0;position:relative}
.logo-cc-2{width:500px;max-width:90%;margin-right:-10rem;margin-top:-22rem}
.logo-cc-3{width:500px;max-width:90%;margin-right:-9rem;margin-top:-3.5rem}
.logo-cc-4{width:500px;max-width:90%;margin-right:-8rem;margin-top:-3rem}
.logo-cc-5{width:500px;max-width:90%;margin-right:-7rem;margin-top:-2.5rem}
.logo-cc-6{width:500px;max-width:90%;margin-right:-8rem;margin-top:-3rem}

/* =========================================================
   TEAM (legacy global; About has page CSS)
   ========================================================= */
.team-section{
  min-height:100vh;padding:6rem 2rem;background:rgba(255,255,255,.1);
  color:#fff;text-align:center;display:flex;flex-direction:column;justify-content:center
}
.team-wrapper{max-width:1200px;margin:0 auto}
.team-heading{
  font-size:4rem;font-family:'Bubblegum Sans',cursive;margin-bottom:3rem;color:#fff;
  text-shadow:0 3px 3px rgba(0,0,0,.6)
}
.team-quote{
  font-size:2rem;font-style:italic;font-weight:bolder;margin:-2.3rem 0 2rem;color:#fff;
  text-shadow:0 2px 3px rgb(13,29,112);-webkit-text-stroke:.05px rgba(0,0,0,.686)
}
.team-members{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap}
.team-card{
  background:rgba(255,255,255,.15);padding:2rem;border-radius:15px;max-width:300px;text-align:center;
  box-shadow:0 4px 10px rgba(0,0,0,.2);backdrop-filter:blur(4px)
}
.team-photo{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:1rem;border:3px solid #fff}
.team-name{font-size:1.5rem;font-weight:bold;margin-top:.5rem;color:rgb(249,255,255);text-shadow:0 2px 3px rgb(13,29,112)}
.team-role{font-style:italic;color:#ffddeec2;margin-bottom:.5rem;text-shadow:0 2px 3px rgb(13,29,112)}
.team-bio{font-size:.95rem;color:#fff;line-height:1.4;text-shadow:0 3px 3px rgb(13,29,112)}

/* =========================================================
   GOALS / COACHING
   ========================================================= */
.goals-section{
  min-height:100vh;padding:2rem 2rem 6rem;background:rgba(255,255,255,0);color:#fff;
  text-align:center;display:flex;flex-direction:column;justify-content:center
}
.coaching-section{background:rgba(255,255,255,.144)}
.goals-wrapper{max-width:1000px;margin:0 auto}
.goals-heading{
  font-size:4.2rem;font-family:'Bubblegum Sans',cursive;margin-bottom:2rem;color:#fff;
  text-shadow:0 5px 5px rgb(7,136,168)
}
.goals-intro{
  font-size:1.4rem;margin-bottom:2.5rem;font-weight:bold;line-height:1.6;color:#e6e6fa;
  text-shadow:0 3px 3px rgb(0,0,96)
}
.goals-list{list-style:none;padding:0;margin:0 auto;text-align:left;max-width:1000px}
.goals-list li{
  font-size:1.05rem;margin-bottom:1.2rem;background:rgba(255,255,255,.16);padding:1.25rem 1.75rem;border-radius:18px;color:#fff;
  backdrop-filter:blur(8px);text-shadow:0 1px 2px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.goals-list li:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 26px rgba(0,0,0,.26),0 0 22px 6px rgba(255,255,255,.18);
  filter:brightness(1.05);
}
.goals-list li strong{
  display:block;
  font-family:'Bubblegum Sans',cursive;
  font-size:1.45rem;
  margin-bottom:.4rem;
  text-shadow:0 2px 4px rgba(0,0,0,.45);
}

/* =========================================================
   FOOTER
   ========================================================= */
.main-footer{
  width:100%;
  background:rgba(102,77,112,.8);
  text-align:center;
  padding:.6rem 1rem;
  color:#fff;
  font-size:.9rem;
  z-index:999;
}
.index-page .main-footer{position:fixed;bottom:0}

/* Desktop/tablet default */
.main-footer .footer-inner{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
.main-footer .footer-policy-link{
  position:absolute;
  right:clamp(12px, 2vw, 24px);
  color:inherit;
  text-decoration:none;
}
.main-footer .footer-policy-link:hover,
.main-footer .footer-policy-link:focus{ text-decoration:underline; }

/* Mobile-specific footer (phones ≤640px): two-row layout
   Row 1: copyright (left) | cookie prefs (right)
   Row 2: Policies (centered)
*/
.footer-prefs-link-mobile{ display:none; } /* default hidden */
@media (max-width:640px){
  .main-footer{ padding:.45rem 1rem .7rem; }

  .main-footer .footer-inner{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "copy prefs"
      "policy policy";
    align-content:start;   /* pin content to top of footer */
    align-items:start;
    row-gap:.25rem;
    column-gap:.5rem;
    width:100%;
  }

  .main-footer .copyright{
    grid-area:copy;
    margin:0;
    text-align:left;
    line-height:1.4;
    white-space:normal;
  }

  .footer-prefs-link-mobile{
    grid-area:prefs;
    display:inline-block;
    justify-self:end;
    margin:0;
    line-height:1.4;
    text-align:right;
  }

  .main-footer .footer-policy-link{
    grid-area:policy;
    position:static;          /* no absolute on mobile */
    margin:.1rem 0 0;
    justify-self:center;
    text-align:center;
  }

  /* Hide desktop inline cookie link inside the copyright on mobile */
  .footer-prefs-link-desktop{ display:none !important; }
}

/* =========================================================
   CONTACT PAGE (card form)
   ========================================================= */
.contact-page .hero{min-height:70vh;padding:6rem 2rem 2.5rem}
.contact-page .hero-wrapper{align-items:flex-start;gap:2.5rem}
.contact-page .brand-mark{max-width:260px;width:60%;height:auto;display:block;margin:0 0 .75rem 0}
.contact-form-card{
  width:560px;max-width:100%;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  border-radius:18px;
  box-shadow:0 6px 14px rgba(0,0,0,.18);
  padding:1.25rem 1.5rem 1.5rem;
  color:#fff;
}
.contact-form-card h2{
  font-family:'Bubblegum Sans',cursive;
  font-size:1.6rem;margin:0 0 .75rem 0;
  text-shadow:0 3px 4px rgba(7,136,168,.75)
}
.contact-form-card label{display:block;font-size:.85rem;font-weight:700;margin:.35rem 0 .25rem;opacity:.95}
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea{
  width:100%;padding:.9rem 1rem;font-size:1rem;border-radius:12px;
  background:#ffffff;color:#333;border:none;outline:none;box-shadow:0 1px 3px rgba(0,0,0,.15)
}
.contact-form-card textarea{height:200px;resize:vertical}
.contact-form-card .actions{display:flex;justify-content:flex-end;margin-top:1rem}
.contact-form-card .submit-btn{
  padding:.9rem 1.8rem;border-radius:9999px;border:none;cursor:pointer;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#7f3fbf 0%,#6b35a7 100%);box-shadow:0 6px 14px rgba(0,0,0,.18)
}
.contact-form-card .submit-btn:hover{filter:brightness(1.06)}

/* ===== [REMOVED] Legacy “cat form” block ===== */
/* (All unused .cat-form-* and absolutely-positioned .contact-form rules deleted) */

/* =========================================================
   GALLERY (Circle of Life)
   ========================================================= */
.gallery-section{width:100%;padding:4rem 2rem;display:flex;justify-content:center;align-items:center;background:rgba(255,255,255,.08)}
.gallery-bubble{
  position:relative;width:800px;height:520px;border-radius:25px;overflow:hidden;
  background:rgba(255,255,255,.12);backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,.2)
}
.slideshow-container{width:100%;height:100%;position:relative;overflow:hidden}
.slides-wrapper{display:flex;transition:transform .6s ease-in-out;width:100%}
.slide-img{flex:0 0 100%;width:100%;height:auto;object-fit:contain;border-radius:1rem}

/* Slideshow arrows */
.arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:50px;height:50px;background:rgba(0,0,0,.4);color:#fff;border:none;font-size:2rem;
  display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;z-index:2;transition:background-color .3s;
  padding:.6rem .9rem
}
.arrow:hover{background:rgba(0,0,0,.7)}
.arrow.left{left:12px}
.arrow.right{right:12px}
.arrow.left .arrow-icon{transform:translateX(2px)}
.arrow.right .arrow-icon{transform:translateX(-2px)}

/* =========================================================
   OUR STORY
   ========================================================= */
.our-story-section{display:flex;justify-content:center;align-items:flex-start;gap:3rem;margin-top:2.5rem;flex-wrap:wrap}
.story-text{
  flex:2;font-size:1.2rem;font-weight:bold;line-height:1.8;color:#ebf1ff;background:rgba(255,255,255,.08);
  padding:1.5rem;border-radius:12px;text-shadow:0 2px 4px rgb(99,0,157)
}
.story-image{flex:1;display:flex;justify-content:center;align-items:center}
.story-image img{width:100%;max-width:350px;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.3)}
.float-image{float:right;margin:0 0 1.5rem 1.5rem;width:300px;max-width:40%;border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.3)}

/* =========================================================
   CIRCLE STORY BUBBLE
   ========================================================= */
.circle-story-section{width:100%;padding:4rem 2rem 2rem;display:flex;justify-content:center;align-items:center}
.circle-bubble{
  max-width:900px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border-radius:20px;padding:2.5rem;color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.2);text-shadow:0 2px 4px rgb(0,132,255);font-size:1.15rem;line-height:1.9
}
.circle-story-heading{
  font-family:'Bubblegum Sans',cursive;font-size:2.5rem;margin-bottom:1.5rem;text-align:center;color:#fff;
  text-shadow:0 4px 5px rgb(7,136,168)
}
.circle-bubble p{margin-bottom:1.5rem}
.disclaimer-note{
  margin-top:1rem;font-size:.95rem;color:#fff2f2;text-shadow:0 2px 4px rgba(0,0,0,.5);
  background:rgba(255,0,0,.08);padding:.75rem 1.2rem;border-left:4px solid #ff4d6d;border-radius:10px;max-width:500px
}

/* =========================================================
   CIRCLE MEANING LAYOUT
   ========================================================= */
.circle-meaning-layout{
  display:flex;justify-content:space-between;align-items:flex-start;padding:4rem 2rem;gap:3rem;flex-wrap:wrap;background:rgba(255,255,255,.05)
}
.circle-text{
  flex:1 1 60%;background:rgba(255,255,255,.144);backdrop-filter:blur(8px);border-radius:20px;padding:2.5rem 3rem;color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.2);text-shadow:0 2px 4px rgb(0,132,255);font-size:1.15rem;line-height:2.1;letter-spacing:.3px
}
.circle-text p{margin-bottom:1.6rem}
.circle-gallery{
  flex:1 1 35%;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:25px;padding:1rem;box-shadow:0 4px 12px rgba(0,0,0,.2);
  height:auto;max-height:100%
}
.circle-gallery .slideshow-container{position:relative;width:100%;overflow:hidden;border-radius:20px;height:100%}
.circle-gallery .slides-wrapper{display:flex;transition:transform .6s ease-in-out;width:400%}
.circle-gallery .slide-img{width:100%;height:auto;object-fit:cover;border-radius:1rem}

/* =========================================================
   SERVICES — SQUARE FLIP CARDS (3×3; responsive)
   ========================================================= */
.services-section{padding:6rem 2rem 5rem;background:rgba(255,255,255,.05)}
.services-wrapper{max-width:1100px;margin:0 auto}

/* GRID: 3 columns on desktop. Size controlled by --svc-size. */
.services-page .services-card-grid{
  --svc-size: 260px;
  display:grid;
  grid-template-columns:repeat(3, var(--svc-size));
  gap:1.25rem;
  justify-content:center;
  align-content:start;
  margin-top:2.25rem;
}

/* Large tablets / small laptops (2 columns) */
@media (max-width:1024px){
  .services-page .services-card-grid{ --svc-size: 250px; grid-template-columns:repeat(2, var(--svc-size)); }
}
/* Tablets */
@media (max-width:820px){
  .services-page .services-card-grid{ --svc-size: 240px; grid-template-columns:repeat(2, var(--svc-size)); }
}
/* Phones — 1 column, bigger & fluid */
@media (max-width:520px){
  .services-page .services-card-grid{
    --svc-size: min(88vw, 340px);
    grid-template-columns: var(--svc-size);
    gap: 1rem;
  }
}

/* CARD: exact square with 3D flip */
.services-page .service-card{
  width:var(--svc-size);
  height:var(--svc-size);
  position:relative;
  perspective:1000px;
  -webkit-perspective:1000px;
}
.services-page .card3d{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform 520ms cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
.services-page .card3d.is-flipped{ transform: rotateY(180deg); }

/* FACES */
.services-page .card-face{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:1rem 1.15rem;border-radius:16px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 14px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.05);
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);
  word-break:normal; overflow:hidden;
}
.services-page .card-face.front{ transform:rotateY(0) }
.services-page .card-face.back{
  transform:rotateY(180deg);
  padding:1rem 1.1rem;
  overflow:visible;
}

/* Title on front — bigger */
.services-page .service-title{
  font-family:'Bubblegum Sans',cursive;
  font-size:clamp(1.3rem, 1.9vw, 1.55rem);
  line-height:1.28;
  max-width:26ch;
  margin:0 auto;
  letter-spacing:.2px;
  text-shadow:0 3px 4px rgba(7,136,168,.85);
  hyphens:auto;
}
/* Slightly adapt title scale on very small phones */
@media (max-width:520px){
  .services-page .service-title{
    font-size:clamp(1.22rem, 6vw, 1.6rem);
    max-width:28ch;
  }
}

/* Back details — a touch larger */
.services-page .svc-points{
  width:100%;list-style:disc inside;text-align:left;margin:0;padding:0;
  font-size:.98rem; line-height:1.58;
}
.services-page .svc-points li + li{ margin-top:.35rem }
.services-page .card-face.back p{
  font-size:1.02rem; line-height:1.58; margin:.2rem 0 0 0;
}
@media (max-width:520px){
  .services-page .svc-points{font-size:.97rem;line-height:1.54}
  .services-page .card-face.back p{font-size:1rem;line-height:1.54}
}

/* ========= FLIP ARROWS — ICON-ONLY (no visible circles) =========
   Definitive reset so no bubbles appear on initial load/refresh.
   - Neutralizes any inherited button/bg/shadow
   - Removes pseudo-elements
   - Keeps accessible hit area
*/
.services-page .flip-btn,
.services-page .card-face.back .back-btn{
  -webkit-appearance:none;appearance:none;
  position:absolute; top:50%; transform:translateY(-50%);
  left:auto; right:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; /* slightly narrower, invisible target */
  padding:0; margin:0; line-height:0; cursor:pointer;
  background:transparent !important; border:none !important; border-radius:0 !important;
  box-shadow:none !important; outline:none; filter:none;
}
.services-page .flip-btn.left,
.services-page .card-face.back .back-btn.left{ left:2px }
.services-page .flip-btn.right,
.services-page .card-face.back .back-btn.right{ right:2px }
.services-page .flip-btn::before,
.services-page .flip-btn::after,
.services-page .card-face.back .back-btn::before,
.services-page .card-face.back .back-btn::after{
  content:none !important;
}
.services-page .flip-btn i,
.services-page .flip-btn svg,
.services-page .card-face.back .back-btn i,
.services-page .card-face.back .back-btn svg{
  width:20px; height:20px; stroke:#fff; stroke-width:2.5; fill:none;
}
.services-page .flip-btn:hover,
.services-page .card-face.back .back-btn:hover{
  filter:brightness(1.1);
  transform:translateY(-50%);
}
/* Phones: nudge even closer & trim hit area a touch */
@media (max-width:520px){
  .services-page .flip-btn,
  .services-page .card-face.back .back-btn{ width:2.2rem; height:2.2rem; }
  .services-page .flip-btn.left,
  .services-page .card-face.back .back-btn.left{ left:1px }
  .services-page .flip-btn.right,
  .services-page .card-face.back .back-btn.right{ right:1px }
}

/* =========================================================
   STICKY HELPERS
   ========================================================= */
.sticky-logo{position:sticky;top:var(--sticky-top,29rem);align-self:flex-start;z-index:10}
.index-page .sticky-logo{position:static!important;top:auto!important}

/* Circle sticky */
.circle-page .hero-right{
  position:-webkit-sticky;position:sticky;
  top:var(--circle-sticky-top);align-self:flex-start;height:fit-content;
}

/* =========================================================
   iOS FIXED BACKGROUND WORKAROUND
   ========================================================= */
@supports (-webkit-touch-callout:none){
  body{background-attachment:scroll!important}
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;
    background:#0e1320 url('images/Collages.jpg') center/cover no-repeat
  }
}

/* =========================================================
   PERFORMANCE & ANCHOR OFFSET
   ========================================================= */
.hero,.team-section,.goals-section,.services-section,.gallery-section,.circle-story-section,.circle-meaning-layout{
  content-visibility:auto;contain-intrinsic-size:1000px
}
html{scroll-padding-top:var(--fixed-header-offset)}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
.nav-links a:focus-visible,.cta-pill:focus-visible,.arrow:focus-visible,.preorder-btn:focus-visible,
.services-page .flip-btn:focus-visible,.pill:focus-visible{
  outline:3px solid rgba(127,63,191,.55);outline-offset:3px
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  header{transform:none!important}
}

/* Hover only on hover-capable devices */
@media (hover:none){
  .cta-pill,.cta-pill.secondary,.preorder-btn,.logo-image,.pill{
    filter:none!important;transform:none!important;box-shadow:inherit!important
  }
}

/* Utility (adds a global sr-only helper used in the nav) */
.visually-hidden,
.sr-only{
  position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;clip-path:inset(50%);border:0;padding:0;margin:-1px
}

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width:1024px){
  .welcome-heading{font-size:3.4rem}
  .subheading{font-size:1.6rem}
  .cta-buttons{gap:1.2rem}
}
@media (max-width:900px){
  .contact-page .hero{min-height:78vh;padding:6.5rem 1.25rem 2.25rem}
  .contact-page .hero-wrapper{gap:1.5rem}
  .contact-form-card{width:100%}
  .contact-page .hero-left{align-items:flex-start}
  .contact-page .brand-mark{max-width:200px}
}
@media (max-width:768px){
  .hero{padding:6.5rem 1.25rem 3rem;text-align:center}
  .hero-wrapper{gap:2rem}
  .hero-left{align-items:center;gap:1.1rem}
  .welcome-heading{font-size:2.8rem}
  .subheading{font-size:1.35rem}
  .cta-buttons{justify-content:center;left:0;top:0;gap:1rem}

  /* Circle mobile carousel */
  .slideshow-container{
    position:relative;overflow:hidden;width:100%;max-width:600px;margin-top:2rem;border-radius:1rem;
    box-shadow:0 4px 12px rgba(0,0,0,.2)
  }
  .slides-wrapper{display:flex;transition:transform .6s ease-in-out;width:400%}
  .slide-img{width:100%;object-fit:cover;flex:0 0 100%;border-radius:1rem}

  /* Keep CTAs neatly under subheading */
  .cta-buttons{flex-direction:row;align-items:center;gap:1rem}

  /* Global mobile logo safety rails */
  :root{--mobile-logo-max-w:68vw;--mobile-logo-max-h:32vh}
  .logo-cc-1,.logo-cc-2,.logo-cc-3,.logo-cc-4,.logo-cc-5,.logo-cc-6{
    max-width:min(var(--mobile-logo-max-w),340px)!important;max-height:var(--mobile-logo-max-h)!important;
    width:auto!important;height:auto!important;margin-right:0!important;margin-top:0!important;position:relative!important;left:0!important;top:0!important;display:block!important;object-fit:contain
  }

  .services-page .hero-right,.circle-page .hero-right{margin-top:.75rem}
}
@media (max-width:380px){
  :root{--mobile-logo-max-w:62vw;--mobile-logo-max-h:28vh}
}

/* ===== SERVICES PAGE: goals bubbles width match ===== */
.services-page .goals-list{
  display:block;max-width:640px;width:clamp(320px, 60vw, 640px);margin:0;
}
.services-page .goals-list li{
  background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.12);
  padding:1.25rem 1.75rem!important;border-radius:18px!important;color:#fff!important;
  backdrop-filter:blur(8px);text-shadow:0 1px 2px rgba(0,0,0,.45);
  box-shadow:0 6px 14px rgba(0,0,0,.18);transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.services-page .goals-list li + li{margin-top:1.2rem}
.services-page .goals-list li:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 12px 26px rgba(0,0,0,.26), 0 0 22px 6px rgba(255,255,255,.18);filter:brightness(1.05)}
@media (max-width:768px){
  .services-page .hero-left{min-width:100%!important;width:100%!important;flex:0 0 100%!important;align-items:stretch!important}
  .services-page .goals-list{width:100%!important;max-width:100%!important;margin:0 auto!important;padding-left:0!important}
  .services-page .goals-list li{width:100%!important;box-sizing:border-box}
}

/* =========================================================
   COOKIE CONSENT UI (Banner + Preferences Modal)
   ========================================================= */

/* Banner */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;
  z-index:var(--cookie-z-banner);
  box-sizing:border-box;
  padding:14px 16px;
  background:rgba(0,0,0,.85);
  color:#fff;
  backdrop-filter:saturate(110%) blur(3px);
  -webkit-backdrop-filter:saturate(110%) blur(3px);
  border-top:1px solid rgba(255,255,255,.12);
}
.cookie-banner p{
  margin:0;line-height:1.5;
}
.cookie-banner a{
  color:#fff;text-decoration:underline;
}
.cookie-banner .cookie-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;
}

/* Modal overlay */
.cookie-modal{
  position:fixed;inset:0;
  z-index:var(--cookie-z-modal);
  display:grid;place-items:center;
  padding:16px;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  box-sizing:border-box;
}

/* Modal sheet */
.cookie-modal-content{
  width:min(720px,92vw);
  background:#fff;
  color:#111;
  border-radius:16px;
  padding:18px 16px 16px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.06);
}
.cookie-modal-content h2{
  margin:0 0 .5rem 0;
  font-family:'Bubblegum Sans',cursive;
  font-size:1.6rem;
  color:#4b2d64;
  text-shadow:0 1px 0 rgba(0,0,0,.02);
}
.cookie-modal-content form label{
  display:block;margin:8px 0;font-weight:700;
}
.cookie-modal-content input[type="checkbox"]{
  transform:translateY(1px);
  margin-right:.45rem;
}
.cookie-modal-content .cookie-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;justify-content:flex-end;
}

/* Primary button (Save) — orange on LIGHT modal */
.cookie-modal-content .pill.primary{
  background:linear-gradient(135deg,#FF9E3D 0%,#FF6B2D 100%);
  color:#fff;
  box-shadow:var(--pill-shadow),0 0 0 0 rgba(255,153,0,.45);
}
.cookie-modal-content .pill.primary:hover,
.cookie-modal-content .pill.primary:focus-visible{
  filter:brightness(1.08);
  outline:var(--pill-focus);
  outline-offset:3px;
}

/* Secondary button (Cancel) — purple outline on LIGHT modal */
.cookie-modal-content .pill.secondary{
  background:transparent;
  color:#4b2d64;
  border:2px solid #7f3fbf;
  box-shadow:var(--pill-shadow);
}
.cookie-modal-content .pill.secondary:hover,
.cookie-modal-content .pill.secondary:focus-visible{
  background:rgba(127,63,191,.08);
  filter:none;
  outline:var(--pill-focus);
  outline-offset:3px;
}
.cookie-modal-content .pill.secondary:active{transform:translateY(0)}

/* Small devices: make banner content stack neatly */
@media (max-width:560px){
  .cookie-banner{padding:12px}
  .cookie-banner .cookie-actions{margin-top:8px}
}

/* Reduced motion: no fancy transitions on cookie UI either */
@media (prefers-reduced-motion:reduce){
  .cookie-banner,.cookie-modal,.cookie-modal-content{transition:none!important}
}