/* ===================================================================
   Templates — structural layouts
   Unlike a purely decorative theme, these actually restructure where
   things sit on the page: nav position, hero composition, content
   flow. Colour (--pink/--pink-2/--pink-wash/--line) is left alone for
   light templates — that's the separate theme colour picker. Dark
   templates redefine --ink/--bg/--bg-panel for readability, as before.

   All structural changes are wrapped in @media (min-width:761px) so
   mobile always falls back to the site's normal, proven stacked
   layout with the standard hamburger menu — nobody's browsing a
   sidebar nav on a phone.
=================================================================== */

/* ---------- 1. Sidebar Command (dark) — nav becomes a fixed left sidebar ---------- */
body[data-template="1"]{
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --bg:#0d1117;
  --bg-panel:#161b22;
  --ink:#e6edf3;
  --ink-soft:#8b96a5;
  --paper:#161b22;
}
body[data-template="1"]{ background:var(--bg); }
body[data-template="1"] .confetti .dot-sun, body[data-template="1"] .confetti .dot-sky, body[data-template="1"] .confetti .dot-violet{ display:none; }
body[data-template="1"] .contact-highlight{ background:#000; border-color:#22272e; }
body[data-template="1"] .site-header{ background:var(--bg-panel); border-bottom:1px solid #22272e; }
@media (min-width:761px){
  body[data-template="1"]{ display:grid; grid-template-columns:230px 1fr; }
  body[data-template="1"] .site-header{
    grid-column:1; grid-row:1/999;
    position:sticky; top:0; align-self:start; height:100vh;
    border-right:1px solid #22272e; border-bottom:none;
    overflow-y:auto;
  }
  body[data-template="1"] > *:not(.site-header){ grid-column:2; min-width:0; }
  body[data-template="1"] .nav{ flex-direction:column; align-items:stretch; height:100%; padding:24px 18px; gap:28px; max-width:none; }
  body[data-template="1"] .nav-brand{ order:0; flex-direction:column; align-items:center; text-align:center; gap:10px; flex:0 0 auto; }
  body[data-template="1"] .nav-brand img{ width:100%; height:auto; max-width:190px; max-height:110px; }
  body[data-template="1"] .nav-brand-name{ text-align:center; }
  body[data-template="1"] .nav-brand-slogan{ max-width:190px; }
  body[data-template="1"] .nav-links{ flex-direction:column; align-items:flex-start; gap:16px; order:1; flex:0 0 auto; }
  body[data-template="1"] .nav-links a.active::after{ display:none; }
  body[data-template="1"] .nav-links a.active{ font-weight:700; }
  body[data-template="1"] .nav-cta{ order:2; position:static; margin-top:auto; width:100%; right:auto; top:auto; }
  body[data-template="1"] .nav-cta .btn{ width:100%; justify-content:center; }
}
body[data-template="1"] h1, body[data-template="1"] h2{ letter-spacing:-.01em; }
body[data-template="1"] .hero-eyebrow{ background:transparent; border:1px solid var(--pink); color:var(--pink); border-radius:3px; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; }
body[data-template="1"] .hero-figure .framed-photo{ background-image:none !important; }
body[data-template="1"] .hero-figure .framed-photo .photo-clip{ border:1px solid var(--pink); border-radius:3px; }
body[data-template="1"] .btn{ border-radius:3px; }
body[data-template="1"] .btn-ghost{ border-color:var(--pink); color:var(--pink); }
body[data-template="1"] .step-card, body[data-template="1"] .t-card, body[data-template="1"] .panel{
  background:var(--bg-panel); border:1px solid #22272e; border-radius:3px; box-shadow:none;
}
body[data-template="1"] .polaroid{ background:var(--bg-panel); border-radius:3px; box-shadow:none; border:1px solid #22272e; }
body[data-template="1"] .polaroid .tile{ border-radius:3px; }
body[data-template="1"] .cta-band{ border-radius:3px; background:var(--bg-panel); border:1px solid #22272e; }
body[data-template="1"] .brush-divider{ display:none; }
body[data-template="1"] .site-footer{ background:#010409; }

/* ---------- 2. Full Bleed Overlay (dark) — nav floats transparently over a full-width hero photo ---------- */
body[data-template="2"]{
  --font-display:'Playfair Display',serif;
  --font-body:'Inter',system-ui,sans-serif;
  --bg:#141212;
  --bg-panel:#1e1b1b;
  --ink:#f3efe9;
  --ink-soft:#b8afa5;
  --paper:#1e1b1b;
}
body[data-template="2"]{ background:var(--bg); }
body[data-template="2"] .confetti .dot-pink, body[data-template="2"] .confetti .dot-sun, body[data-template="2"] .confetti .dot-sky, body[data-template="2"] .confetti .dot-grass, body[data-template="2"] .confetti .dot-violet{ display:none; }
body[data-template="2"] .contact-highlight{ background:#0c0a0a; border-color:#2c2725; }
body[data-template="2"] .site-header{ background:var(--bg-panel); border-bottom:1px solid #2c2725; }
body[data-template="2"] .nav-brand, body[data-template="2"] .nav-links a{ color:var(--ink); }
@media (min-width:761px){
  body[data-template="2"]:has(> .site-header + .hero) .site-header{
    position:absolute; top:0; left:0; right:0; z-index:60;
    background:transparent; border-bottom:none; backdrop-filter:none;
  }
  body[data-template="2"]:has(> .site-header + .hero) .nav-brand,
  body[data-template="2"]:has(> .site-header + .hero) .nav-links a{ color:#fff; }
  body[data-template="2"]:has(> .site-header + .hero) .nav-links a.active::after{ background-color:#fff; }
  /* Everything below only restructures the hero into a full-bleed photo
     with overlaid text when there's actually a photo to show — if no
     image has been uploaded, the hero quietly falls back to the same
     plain, in-flow layout every other template uses, rather than
     collapsing around text with nothing to anchor it. */
  body[data-template="2"] .hero:has(> .container > .hero-figure){ padding:0; overflow:visible; }
  body[data-template="2"] .hero:has(> .container > .hero-figure) .container{
    display:block; position:relative; max-width:none; padding:0;
  }
  body[data-template="2"] .hero-figure{
    position:relative; width:100%; height:78vh; min-height:520px;
  }
  body[data-template="2"] .hero-figure .framed-photo{
    width:100%; height:100%; border-radius:0; background-image:none !important;
  }
  body[data-template="2"] .hero-figure .framed-photo .photo-clip{
    width:100%; height:100%; border-radius:0; border:none;
  }
  body[data-template="2"] .hero-figure .framed-photo .photo-clip img{ width:100%; height:100%; object-fit:cover; }
  body[data-template="2"] .hero-figure::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,8,8,.55) 0%, rgba(10,8,8,.35) 40%, rgba(10,8,8,.85) 100%);
  }
  body[data-template="2"] .hero:has(> .container > .hero-figure) > .container > div:first-child{
    position:absolute; inset:0; z-index:2;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:40px; max-width:760px; margin:0 auto;
  }
  body[data-template="2"] .hero:has(> .container > .hero-figure) .hero-eyebrow{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); }
  body[data-template="2"] .hero:has(> .container > .hero-figure) h1,
  body[data-template="2"] .hero:has(> .container > .hero-figure) p.lead{ color:#fff; }
  body[data-template="2"] .hero:has(> .container > .hero-figure) .hero-ctas{ justify-content:center; }
}
body[data-template="2"] h1, body[data-template="2"] h2{ font-weight:600; }
body[data-template="2"] .btn{ border-radius:2px; }
body[data-template="2"] .btn-ghost{ border-color:#fff; color:#fff; }
body[data-template="2"] .step-card, body[data-template="2"] .t-card, body[data-template="2"] .panel{
  background:var(--bg-panel); border:1px solid #2c2725; border-radius:2px; box-shadow:none;
}
body[data-template="2"] .polaroid{ background:var(--bg-panel); border-radius:2px; box-shadow:0 14px 30px -16px rgba(0,0,0,.7); }
body[data-template="2"] .polaroid .tile{ border-radius:2px; }
body[data-template="2"] .cta-band{ border-radius:2px; background:var(--bg-panel); border:1px solid #2c2725; }
body[data-template="2"] .brush-divider{ display:none; }
body[data-template="2"] .site-footer{ background:#0c0a0a; }

/* ---------- 3. Centered Masthead (light) — logo centred top row, nav links split into a row beneath ---------- */
body[data-template="3"]{
  --font-display:'Cormorant Garamond',serif;
  --font-body:'Inter',system-ui,sans-serif;
  --bg:#fffdf9;
}
body[data-template="3"] h1, body[data-template="3"] h2{ font-weight:600; }
body[data-template="3"] .hero-eyebrow{ letter-spacing:.08em; text-transform:uppercase; font-size:.76rem; }
body[data-template="3"] .btn{ border-radius:2px; }
body[data-template="3"] .step-card, body[data-template="3"] .t-card, body[data-template="3"] .panel{ border-radius:4px; }
body[data-template="3"] .polaroid{ border-radius:4px; }
body[data-template="3"] .cta-band{ border-radius:4px; }

/* ---------- 4. Stacked Reverse (light) — hero is centred and stacked, photo above text, not side-by-side ---------- */
body[data-template="4"]{
  --font-display:'Baloo 2',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --bg:#fff6f0;
}
@media (min-width:761px){
  body[data-template="4"] .hero .container{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; max-width:720px;
  }
  body[data-template="4"] .hero-figure{ order:-1; margin-bottom:18px; }
  body[data-template="4"] .hero-ctas{ justify-content:center; }
}
body[data-template="4"] h1, body[data-template="4"] h2{ font-weight:700; }
body[data-template="4"] .hero-eyebrow{ border-radius:999px; font-weight:700; }
body[data-template="4"] .hero-figure .framed-photo .photo-clip{ box-shadow:0 0 0 4px #fff; }
body[data-template="4"] .btn{ border-radius:999px; font-weight:700; }
body[data-template="4"] .step-card, body[data-template="4"] .t-card, body[data-template="4"] .panel{ border-radius:20px; }
body[data-template="4"] .polaroid{ border-radius:18px; }
body[data-template="4"] .polaroid .tile{ border-radius:14px; }
body[data-template="4"] .cta-band{ border-radius:26px; }

/* ---------- 5. Diagonal Split (light) — hero divided by a bold angled colour panel ---------- */
body[data-template="5"]{
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --bg:#fdfdfd;
}
@media (min-width:761px){
  body[data-template="5"] .hero{ position:relative; padding:0; overflow:hidden; }
  body[data-template="5"] .hero::before{
    content:''; position:absolute; top:0; right:0; bottom:0; width:58%;
    background:var(--pink-wash);
    clip-path:polygon(22% 0, 100% 0, 100% 100%, 0% 100%);
    z-index:0;
  }
  body[data-template="5"] .hero .container{ position:relative; z-index:1; padding:72px 24px; }
  body[data-template="5"] .hero-figure .framed-photo{ background-image:none !important; }
  body[data-template="5"] .hero-figure .framed-photo .photo-clip{ box-shadow:0 20px 46px -18px rgba(0,0,0,.35); }
}
body[data-template="5"] h1, body[data-template="5"] h2{ font-weight:600; letter-spacing:-.01em; }
body[data-template="5"] .btn{ border-radius:2px; }
body[data-template="5"] .step-card, body[data-template="5"] .t-card, body[data-template="5"] .panel{ border-radius:2px; }
body[data-template="5"] .polaroid{ border-radius:2px; }
body[data-template="5"] .cta-band{ border-radius:2px; }

/* ---------- 6. Justified Wide (light) — three-zone header: logo far left, links centred, button far right ---------- */
body[data-template="6"]{
  --font-display:'Manrope',system-ui,sans-serif;
  --font-body:'Nunito',system-ui,sans-serif;
  --bg:#f6f8f4;
}
body[data-template="6"] h1, body[data-template="6"] h2{ font-weight:800; }
body[data-template="6"] .hero-eyebrow{ border-radius:999px; font-weight:700; }
body[data-template="6"] .hero-figure .framed-photo{ background-image:none !important; }
body[data-template="6"] .hero-figure .framed-photo .photo-clip{ border-radius:16px; box-shadow:0 0 0 3px #fff; }
body[data-template="6"] .btn{ border-radius:10px; }
body[data-template="6"] .step-card, body[data-template="6"] .t-card, body[data-template="6"] .panel{ border-radius:14px; }
body[data-template="6"] .polaroid{ border-radius:10px; }
body[data-template="6"] .polaroid .tile{ border-radius:8px; }
body[data-template="6"] .cta-band{ border-radius:18px; }

/* ---------- 7. Sidebar Command Light (light) — same fixed sidebar nav as template 1, in a light palette ---------- */
body[data-template="7"]{
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --bg:#fbfbfa;
}
@media (min-width:761px){
  body[data-template="7"]{ display:grid; grid-template-columns:230px 1fr; }
  body[data-template="7"] .site-header{
    grid-column:1; grid-row:1/999;
    position:sticky; top:0; align-self:start; height:100vh;
    background:#fff; border-right:1px solid var(--line); border-bottom:none;
    overflow-y:auto;
  }
  body[data-template="7"] > *:not(.site-header){ grid-column:2; min-width:0; }
  body[data-template="7"] .nav{ flex-direction:column; align-items:stretch; height:100%; padding:24px 18px; gap:28px; max-width:none; }
  body[data-template="7"] .nav-brand{ order:0; flex-direction:column; align-items:center; text-align:center; gap:10px; flex:0 0 auto; }
  body[data-template="7"] .nav-brand img{ width:100%; height:auto; max-width:190px; max-height:110px; }
  body[data-template="7"] .nav-brand-name{ text-align:center; }
  body[data-template="7"] .nav-brand-slogan{ max-width:190px; }
  body[data-template="7"] .nav-links{ flex-direction:column; align-items:flex-start; gap:16px; order:1; flex:0 0 auto; }
  body[data-template="7"] .nav-links a.active::after{ display:none; }
  body[data-template="7"] .nav-links a.active{ font-weight:700; }
  body[data-template="7"] .nav-cta{ order:2; position:static; margin-top:auto; width:100%; right:auto; top:auto; }
  body[data-template="7"] .nav-cta .btn{ width:100%; justify-content:center; }
}
body[data-template="7"] h1, body[data-template="7"] h2{ letter-spacing:-.01em; }
body[data-template="7"] .hero-eyebrow{ border-radius:3px; letter-spacing:.06em; text-transform:uppercase; font-size:.78rem; }
body[data-template="7"] .hero-figure .framed-photo .photo-clip{ border-radius:3px; }
body[data-template="7"] .btn{ border-radius:3px; }
body[data-template="7"] .step-card, body[data-template="7"] .t-card, body[data-template="7"] .panel{ border-radius:3px; }
body[data-template="7"] .polaroid{ border-radius:3px; }
body[data-template="7"] .polaroid .tile{ border-radius:3px; }
body[data-template="7"] .cta-band{ border-radius:3px; }
body[data-template="7"] .brush-divider{ display:none; }

/* ---------- 8. Artist's Splash Glass — bright, rounded and playful ---------- */
body[data-template="8"]{
  --font-display:'Fredoka',system-ui,sans-serif;
  --font-body:'Nunito','Inter',system-ui,sans-serif;
  --bg:#fff9fd;
  --bg-panel:rgba(255,255,255,.78);
  --ink:#32104f;
  --ink-soft:#674f78;
  --paper:#fff;
  --sun:#ffb703;
  --sky:#2498ef;
  --grass:#20ca69;
  --violet:#7b2cbf;
  --radius-lg:32px;
  --radius-md:22px;
  --radius-sm:14px;
  --shadow-card:0 18px 42px -22px rgba(72,20,104,.34);
  min-height:100vh;
  background:
    linear-gradient(rgba(255,253,251,.55),rgba(255,253,251,.55)),
    url('../assets/artist-splash-bg.png');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
body[data-template="8"] h1,
body[data-template="8"] h2,
body[data-template="8"] h3{ color:var(--ink); }
body[data-template="8"] h1{ font-weight:700; letter-spacing:-.025em; }
body[data-template="8"] h2{ font-weight:700; }
body[data-template="8"] .site-header{
  top:10px;
  margin:10px auto 0;
  width:min(calc(100% - 28px),var(--maxw));
  border:1px solid rgba(123,44,191,.12);
  border-radius:24px;
  background:rgba(255,255,255,.84);
  box-shadow:0 14px 36px -24px rgba(50,16,79,.42);
  backdrop-filter:blur(14px);
}
body[data-template="8"] .nav{ padding:12px 20px 10px; }
body[data-template="8"] .nav-brand img{ height:82px; }
body[data-template="8"] .nav-brand-name{ color:var(--violet); font-size:1.1rem; }
body[data-template="8"] .nav-links a{ color:var(--ink); font-weight:700; }
body[data-template="8"] .nav-links a:hover,
body[data-template="8"] .nav-links a.active{ color:var(--pink); }
body[data-template="8"] .btn{
  border-radius:999px;
  font-weight:700;
  box-shadow:0 10px 22px -12px rgba(50,16,79,.35);
}
body[data-template="8"] .btn-primary{
  background:linear-gradient(135deg,var(--pink),var(--pink-2));
  box-shadow:0 12px 26px -12px rgba(247,37,133,.75);
}
body[data-template="8"] .btn-ghost{ border-color:var(--violet); color:var(--violet); background:rgba(255,255,255,.72); }
body[data-template="8"] .btn-ghost:hover{ background:var(--violet); color:#fff; }
body[data-template="8"] .btn-light{ border-color:rgba(255,255,255,.68); color:var(--violet); }

body[data-template="8"] .hero{ padding:54px 14px 34px; overflow:visible; }
body[data-template="8"] .hero .container{
  position:relative;
  isolation:isolate;
  padding:clamp(34px,5vw,62px);
  border:1px solid rgba(123,44,191,.12);
  border-radius:36px;
  background:rgba(255,255,255,.82);
  box-shadow:0 26px 64px -34px rgba(72,20,104,.42);
  backdrop-filter:blur(12px);
}
body[data-template="8"] .hero .container::before{
  content:'';
  position:absolute;
  z-index:-1;
  inset:-5px;
  border-radius:inherit;
  background:linear-gradient(120deg,#ff3d9a,#ffbf1c,#4fdc7a,#36a9ff,#a73df0);
  opacity:.25;
  filter:blur(16px);
}
body[data-template="8"] .hero-eyebrow{
  color:var(--violet);
  background:linear-gradient(135deg,rgba(247,37,133,.10),rgba(36,152,239,.11));
  border:1px solid rgba(123,44,191,.15);
  border-radius:999px;
  font-weight:700;
}
body[data-template="8"] .hero p.lead{ color:var(--ink-soft); }
body[data-template="8"] .hero-figure .framed-photo{ filter:drop-shadow(0 16px 20px rgba(72,20,104,.18)); }
body[data-template="8"] .brush-divider{
  height:12px;
  background:linear-gradient(90deg,#f72585,#ffb703,#20ca69,#2498ef,#9b32d4);
  border-radius:999px;
  opacity:.56;
  -webkit-mask:none;
  mask:none;
}
body[data-template="8"] .usp-strip{
  width:min(calc(100% - 28px),var(--maxw));
  margin:32px auto 0;
  border:1px solid rgba(123,44,191,.12);
  border-radius:24px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow-card);
}
body[data-template="8"] .step-card,
body[data-template="8"] .t-card,
body[data-template="8"] .panel,
body[data-template="8"] .polaroid{
  border:1px solid rgba(123,44,191,.12);
  border-radius:22px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(10px);
}
body[data-template="8"] .step-card:nth-child(3n+1){ border-top:5px solid var(--pink); }
body[data-template="8"] .step-card:nth-child(3n+2){ border-top:5px solid var(--sky); }
body[data-template="8"] .step-card:nth-child(3n){ border-top:5px solid var(--grass); }
body[data-template="8"] .step-num{ background:linear-gradient(135deg,var(--pink),var(--pink-2)); }
body[data-template="8"] .polaroid{ padding:12px 12px 17px; }
body[data-template="8"] .polaroid .tile{ border-radius:16px; }
body[data-template="8"] .stars{ color:var(--sun); }
body[data-template="8"] .cta-band{
  border-radius:30px;
  background:linear-gradient(135deg,var(--pink),var(--pink-2)) !important;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 24px 52px -28px rgba(123,44,191,.65);
}
body[data-template="8"] .cta-btn{
  background:linear-gradient(135deg,var(--pink),var(--pink-2)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.6);
}
body[data-template="8"] .contact-highlight{
  background:linear-gradient(135deg,rgba(247,37,133,.08),rgba(36,152,239,.09));
}
body[data-template="8"] .page-hero{
  width:min(calc(100% - 28px),900px);
  margin:42px auto 12px;
  padding:42px clamp(24px,5vw,52px);
  text-align:center;
  border:1px solid rgba(123,44,191,.12);
  border-radius:30px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow-card);
}
body[data-template="8"] .page-hero .container{ padding:0; }
body[data-template="8"] .site-footer{
  color:#fff;
  background:
    radial-gradient(circle at 16% 0,rgba(247,37,133,.32),transparent 30%),
    radial-gradient(circle at 88% 100%,rgba(36,152,239,.25),transparent 32%),
    #32104f;
}
body[data-template="8"] .site-footer a{ color:#f5eafd; }
body[data-template="8"] .site-footer a:hover{ color:#ffb703; }
body[data-template="8"] .trustpilot-banner{ background:#32104f; }
body[data-template="8"] .trustpilot-banner:hover{ background:#7b2cbf; }

@media (min-width:761px){
  body[data-template="8"] .nav-brand{ flex-basis:100%; }
  body[data-template="8"] .hero .container:not(:has(> .hero-figure)){ text-align:center; }
  body[data-template="8"] .hero .container:not(:has(> .hero-figure)) .hero-ctas{ justify-content:center; }
}
@media (max-width:760px){
  body[data-template="8"] .site-header{ top:6px; width:calc(100% - 16px); margin-top:6px; border-radius:18px; }
  body[data-template="8"] .nav-brand img{ height:66px; max-width:230px; }
  body[data-template="8"] .nav-links{ background:rgba(255,255,255,.97); border-radius:0 0 18px 18px; }
  body[data-template="8"] .hero{ padding:30px 8px 24px; }
  body[data-template="8"] .hero .container{ padding:30px 20px; border-radius:26px; text-align:center; }
  body[data-template="8"] .hero-ctas{ justify-content:center; }
  body[data-template="8"] .usp-strip{ width:calc(100% - 16px); }
}

/* ---------- 9. Pastel Dreams — full-bleed illustrated background, kids' party colourful ---------- */
body[data-template="9"]{
  --font-display:'Fredoka',system-ui,sans-serif;
  --font-body:'Nunito','Inter',system-ui,sans-serif;
  --bg:#fff8fb;
  --ink:#4a2a6b;
  --ink-soft:#7c5c99;
}
body[data-template="9"]{ background:var(--bg); }
body[data-template="9"] .confetti .dot-sun, body[data-template="9"] .confetti .dot-sky, body[data-template="9"] .confetti .dot-violet{ display:none; }
body[data-template="9"] .site-header{ background:#fff0f8; border-bottom:1px solid #f6d9ec; }
body[data-template="9"] .nav-brand-name{ color:var(--ink); }
body[data-template="9"] h1, body[data-template="9"] h2{ font-weight:600; }
body[data-template="9"] .hero{ padding:0; overflow:visible; }
body[data-template="9"] .hero .container{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; max-width:none; padding:30px;
  width:100%; aspect-ratio:1672/941;
  background:url('../assets/pastel-dreams-bg.png') center/cover no-repeat;
}
body[data-template="9"] .hero-figure{ display:none; }
@media (max-width:760px){
  body[data-template="9"] .hero .container{
    aspect-ratio:auto; min-height:640px;
  }
}
body[data-template="9"] .hero > .container > div:first-child{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; max-width:600px;
}
body[data-template="9"] .hero-eyebrow{ background:rgba(255,255,255,.75); color:#c2288a; border:1px solid rgba(194,40,138,.25); backdrop-filter:blur(4px); }
body[data-template="9"] .hero h1, body[data-template="9"] .hero p.lead{
  color:#4a2a6b;
  text-shadow:0 1px 14px rgba(255,255,255,.9), 0 1px 3px rgba(255,255,255,.9);
}
body[data-template="9"] .hero-ctas{ justify-content:center; }
body[data-template="9"] .btn{ border-radius:999px; font-weight:700; }
body[data-template="9"] .btn-primary{ box-shadow:0 10px 24px -8px var(--pink); }
body[data-template="9"] .btn-ghost{ background:rgba(255,255,255,.7); backdrop-filter:blur(4px); }
/* If a video (or photo) has been chosen for the hero, show it as a
   framed circle below the text, keeping the illustrated background
   and the centred layout intact — rather than replacing one with the
   other. */
body[data-template="9"] .hero-figure:has(video){
  display:block !important; order:1; margin-top:24px;
  width:330px !important; height:330px !important; flex-shrink:0;
}
body[data-template="9"] .hero-figure:has(video) .framed-photo{
  width:330px !important; height:330px !important; background-size:330px 330px !important;
}
body[data-template="9"] .hero-figure:has(video) .photo-clip{
  top:21px !important; left:21px !important; width:288px !important; height:288px !important;
}
/* A photo (rather than a video) shows below the text instead — the
   text keeps its normal reading position first, with the photo
   following underneath rather than competing for the same space.
   !important is needed here: some frame style/shape combinations
   (e.g. a solid square frame) set their own fixed pixel sizes with
   surprisingly high specificity via :has()'s own internal element
   matching, which would otherwise override these smaller dimensions. */
body[data-template="9"] .hero-figure:has(img){
  display:block !important; order:1; margin-top:24px;
  width:330px !important; height:330px !important; flex-shrink:0;
}
body[data-template="9"] .hero-figure:has(img) .framed-photo{
  width:330px !important; height:330px !important; background-size:330px 330px !important;
}
body[data-template="9"] .hero-figure:has(img) .photo-clip{
  top:21px !important; left:21px !important; width:288px !important; height:288px !important;
}
/* Desktop/laptop screens get the larger 330px size above; mobile
   keeps the smaller, already-confirmed-good 220px size, since a
   330px circle would overwhelm a phone screen. */
@media (max-width:760px){
  body[data-template="9"] .hero-figure:has(video),
  body[data-template="9"] .hero-figure:has(img){
    width:220px !important; height:220px !important;
  }
  body[data-template="9"] .hero-figure:has(video) .framed-photo,
  body[data-template="9"] .hero-figure:has(img) .framed-photo{
    width:220px !important; height:220px !important; background-size:220px 220px !important;
  }
  body[data-template="9"] .hero-figure:has(video) .photo-clip,
  body[data-template="9"] .hero-figure:has(img) .photo-clip{
    top:14px !important; left:14px !important; width:192px !important; height:192px !important;
  }
}
body[data-template="9"] .step-card, body[data-template="9"] .t-card, body[data-template="9"] .panel{
  border-radius:22px; border:1px solid #f6d9ec; box-shadow:0 14px 30px -20px rgba(150,60,150,.3);
}
body[data-template="9"] .polaroid{ border-radius:18px; }
body[data-template="9"] .polaroid .tile{ border-radius:14px; }
body[data-template="9"] .cta-band{
  border-radius:28px;
  background:linear-gradient(135deg,var(--pink),var(--pink-2)) !important;
  border:1px solid rgba(255,255,255,.35);
}
body[data-template="9"] .cta-btn{
  background:linear-gradient(135deg,var(--pink),var(--pink-2)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.6);
}
body[data-template="9"] .brush-divider{ display:none; }
@media (max-width:760px){
  body[data-template="9"] .hero > .container > div:first-child{ padding:18px; }
}

/* ---------- Logo position (shared by every template) ---------- */
body[data-logo-position="left"] .nav-brand,
body[data-logo-position="left"] .nav-brand-text{
  align-items:flex-start;
  text-align:left;
}
body[data-logo-position="center"] .nav-brand,
body[data-logo-position="center"] .nav-brand-text{
  align-items:center;
  text-align:center;
}
body[data-logo-position="right"] .nav-brand,
body[data-logo-position="right"] .nav-brand-text{
  align-items:flex-end;
  text-align:right;
}
@media (min-width:761px){
  body:not([data-template="1"]):not([data-template="7"])[data-logo-position="right"] .nav-cta{
    left:24px;
    right:auto;
  }
}

/* ---------- Logo shape (shared by every template) ---------- */
body[data-logo-shape="circle"] .nav-brand img{
  width:96px;
  height:96px;
  max-width:96px;
  max-height:96px;
  border-radius:50%;
  object-fit:contain;
}
body[data-logo-shape="rectangle"] .nav-brand img{
  width:min(400px,100%);
  height:auto;
  max-width:400px;
  max-height:120px;
  border-radius:0;
  object-fit:contain;
}
body[data-logo-shape="rectangle"] .footer-brand img{
  width:130px;
  height:auto;
  max-height:56px;
  border-radius:0;
  object-fit:contain;
}
body[data-logo-shape="circle"] .footer-brand img{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:contain;
}
@media (max-width:760px){
  body[data-logo-shape="circle"] .nav-brand img{
    width:72px;
    height:72px;
    max-width:72px;
    max-height:72px;
  }
  body[data-logo-shape="rectangle"] .nav-brand img{
    width:min(260px,60vw);
    height:auto;
    max-height:92px;
  }
}
@media (max-width:760px){
  body[data-logo-position="left"] .nav-brand img,
  body[data-logo-position="right"] .nav-brand img{ max-width:55vw; }
  body[data-logo-position="right"] .nav-cta{
    left:16px;
    right:auto;
  }
}