/* Bath in a Box, design templates (preview). Template 1 "champagne" is the base in styles.css.
   Switch with <html data-template="...">. Fonts are self-hosted and load only when a template uses them. */
@font-face{font-family:"Lora";src:url("assets/fonts/lora-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("assets/fonts/lora-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Nunito Sans";src:url("assets/fonts/nunitosans-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("assets/fonts/bodonimoda-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("assets/fonts/bodonimoda-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Manrope";src:url("assets/fonts/manrope-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("assets/fonts/playfairdisplay-normal.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("assets/fonts/playfairdisplay-italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Karla";src:url("assets/fonts/karla-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Marcellus";src:url("assets/fonts/marcellus-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Mulish";src:url("assets/fonts/mulish-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("assets/fonts/fraunces-normal.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("assets/fonts/fraunces-italic.woff2") format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Outfit";src:url("assets/fonts/outfit-normal.woff2") format("woff2");font-weight:200 700;font-style:normal;font-display:swap}

/* ---------- 2. Coastal Sea Glass: full-bleed video hero, soft sea glass and white ---------- */
[data-template="coastal"]{
  --ivory:#FFFFFF; --cream:#EEF5F3; --greige:#DDEAE6; --sand:#C9DCD6; --blush:#E3EFEC; --blush-d:#CFE3DD; --champ:#DCEBE7; --champ-d:#8FB8AE;
  --ink:#1F3238; --text:#2C3E44; --muted:#51646A; --gold:#2F6B6A; --line:rgba(31,50,56,.13); --white:#F7FBFA;
  --serif:"Lora", Georgia, serif; --sans:"Nunito Sans", "Helvetica Neue", Arial, sans-serif;
  --r:18px; --r-sm:12px; --shadow:0 20px 50px -26px rgba(31,50,56,.32); --shadow-s:0 8px 22px -14px rgba(31,50,56,.3);
  --hdr-bg:rgba(255,255,255,.9); --hero-bg:var(--cream);
  --btn-r:12px; --btn-w:700; --btn-ls:.03em; --btn-tt:none; --btn-bg:#1F3238; --btn-fg:#fff; --btn-bg-h:#2F4A52; --ghost-b:rgba(31,50,56,.45);
  --h-w:500; --h1-w:500; --h-ls:-.01em; --eb-ls:.22em; --arch:var(--r); --sec-pad:120px;
}
[data-template="coastal"] body{font-weight:400}
[data-template="coastal"] .btn{font-size:.95rem}
[data-template="coastal"] .step,[data-template="coastal"] .card{border-color:transparent;box-shadow:var(--shadow)}
[data-template="coastal"] .card-feature{background:linear-gradient(160deg,#E3EFEC,#CFE3DD)}
[data-template="coastal"] .quote{background:var(--greige)}
[data-template="coastal"] .hero h1{font-size:clamp(2.8rem,7vw,4.6rem);line-height:1.04}
[data-template="coastal"] .hero{padding:0 0 56px}
[data-template="coastal"] .hero-media{order:-1;margin:0 -22px}
[data-template="coastal"] .video-shell{border-radius:0;outline:0;box-shadow:none}
[data-template="coastal"] .hero-copy{padding-top:8px}
@media (min-width:960px){
  [data-template="coastal"] .hero{position:relative;padding:0;min-height:min(calc(100vh - 110px),820px);display:flex;align-items:center}
  [data-template="coastal"] .hero-grid{position:static;grid-template-columns:minmax(0,580px) 1fr;padding:64px 0}
  [data-template="coastal"] .hero-media{position:absolute;inset:0;margin:0;z-index:0;order:0}
  [data-template="coastal"] .video-shell{position:absolute;inset:0;aspect-ratio:auto;height:100%}
  [data-template="coastal"] .video-shell::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(238,245,243,.55),rgba(238,245,243,0) 55%);pointer-events:none}
  [data-template="coastal"] .video-controls{top:24px;bottom:auto;left:auto;right:max(22px,calc((100vw - 1240px)/2));z-index:2}
  [data-template="coastal"] .hero-copy{position:relative;z-index:2;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:44px 46px 36px;border-radius:24px;box-shadow:var(--shadow)}
  [data-template="coastal"] .video-cap{position:absolute;z-index:2;right:max(22px,calc((100vw - 1240px)/2));bottom:104px;margin:0;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);padding:12px 18px;border-radius:14px;font-size:1.1rem}
  [data-template="coastal"] .badges{position:absolute;z-index:2;right:max(22px,calc((100vw - 1240px)/2));bottom:36px;margin:0}
}

/* ---------- 3. Modern Luxe Stone: centered editorial, sharp minimal, black accents ---------- */
[data-template="modern"]{
  --ivory:#F4F1EC; --cream:#EAE5DD; --greige:#DED7CC; --sand:#CFC6B8; --blush:#EAE5DD; --blush-d:#DED7CC; --champ:#E2DBD0; --champ-d:#8A7F72;
  --ink:#111111; --text:#262321; --muted:#5A534C; --gold:#5E5246; --line:rgba(17,17,17,.16); --white:#FAF8F5;
  --serif:"Bodoni Moda", Didot, "Times New Roman", serif; --sans:"Manrope", "Helvetica Neue", Arial, sans-serif;
  --r:0px; --r-sm:0px; --shadow:none; --shadow-s:none;
  --hdr-bg:rgba(244,241,236,.92); --hero-bg:var(--ivory);
  --btn-r:0; --btn-w:600; --btn-ls:.24em; --btn-tt:uppercase; --btn-bg:#111; --btn-fg:#F4F1EC; --btn-bg-h:#3A3632; --ghost-b:#111;
  --h-w:400; --h1-w:400; --h-ls:-.015em; --eb-ls:.36em; --arch:0; --sec-pad:140px;
}
[data-template="modern"] body{font-weight:400;font-size:16px}
[data-template="modern"] .btn{font-size:.72rem}
[data-template="modern"] .eyebrow{color:var(--ink)}
[data-template="modern"] .eyebrow.center::before,[data-template="modern"] .eyebrow.center::after{background:#111;width:40px}
[data-template="modern"] .video-shell{outline:0;border:1px solid #111}
[data-template="modern"] .step{background:transparent;border:0;border-top:1px solid #111;padding:28px 4px 0}
[data-template="modern"] .step-n{font-style:normal;color:var(--ink);font-size:2.2rem}
[data-template="modern"] .card{border:1px solid #111;background:var(--white)}
[data-template="modern"] .card-feature{background:var(--cream);border-width:2px}
[data-template="modern"] .ribbon{background:#111;color:#F4F1EC;border-color:#111;border-radius:0}
[data-template="modern"] .tab{border-radius:0}
[data-template="modern"] .tab[aria-selected="true"]{border-color:#111;box-shadow:none}
[data-template="modern"] .vbtn,[data-template="modern"] .view-toggle,[data-template="modern"] .vt,[data-template="modern"] .chips li,[data-template="modern"] .plus,[data-template="modern"] .field input,[data-template="modern"] .field textarea{border-radius:0}
[data-template="modern"] .list li::before,[data-template="modern"] .yes{border-radius:0}
[data-template="modern"] .list li::before{background:#111;width:6px;height:6px}
[data-template="modern"] .quote{background:var(--cream)}
[data-template="modern"] .hero h1{font-size:clamp(2.8rem,6.4vw,5.4rem);line-height:1.02}
[data-template="modern"] .hero .accent{color:var(--ink)}
@media (min-width:960px){
  [data-template="modern"] .hero{padding:72px 0 110px}
  [data-template="modern"] .hero-grid{grid-template-columns:1fr;gap:56px;text-align:center}
  [data-template="modern"] .hero-copy{max-width:1000px;margin-inline:auto}
  [data-template="modern"] .hero h1 br{display:none}
  [data-template="modern"] .lead{margin-inline:auto}
  [data-template="modern"] .hero-ctas{justify-content:center;margin:26px 0 30px}
  [data-template="modern"] .hero-facts{max-width:640px;margin-inline:auto;text-align:center}
  [data-template="modern"] .hero-facts li:first-child{padding-left:14px}
  [data-template="modern"] .hero-media{width:100%;max-width:1120px;margin-inline:auto}
  [data-template="modern"] .badges{justify-content:center}
  [data-template="modern"] .steps{gap:40px}
}

/* ---------- 4. Blush Editorial: stacked magazine hero, rosy blush, serif drama ---------- */
[data-template="blush"]{
  --ivory:#FCF4F1; --cream:#F7E6E1; --greige:#EFD9D3; --sand:#E5C6BE; --blush:#F4DCD5; --blush-d:#EAC6BD; --champ:#F1D9D2; --champ-d:#C98F86;
  --ink:#3A2328; --text:#46303A; --muted:#6E5059; --gold:#8C3F52; --line:rgba(58,35,40,.14); --white:#FFFDFC;
  --serif:"Playfair Display", Georgia, serif; --sans:"Karla", "Helvetica Neue", Arial, sans-serif;
  --r:6px; --r-sm:4px; --shadow:0 22px 50px -30px rgba(58,35,40,.35); --shadow-s:0 8px 20px -14px rgba(58,35,40,.3);
  --hdr-bg:rgba(252,244,241,.92); --hero-bg:linear-gradient(180deg,#FCF4F1 0%,#F7E6E1 100%);
  --btn-r:4px; --btn-w:700; --btn-ls:.2em; --btn-tt:uppercase; --btn-bg:#8C3F52; --btn-fg:#fff; --btn-bg-h:#73303F; --ghost-b:rgba(58,35,40,.5);
  --h-w:400; --h1-w:400; --h-ls:-.01em; --eb-ls:.28em; --arch:var(--r); --sec-pad:120px;
}
[data-template="blush"] body{font-weight:400}
[data-template="blush"] .btn{font-size:.74rem}
[data-template="blush"] .video-shell{outline:0}
[data-template="blush"] .step{background:var(--white);border:0;border-top:3px solid var(--gold)}
[data-template="blush"] .step-n{color:var(--gold);font-size:3.4rem}
[data-template="blush"] .card{border:0;border-top:3px solid var(--champ-d);background:var(--white);box-shadow:var(--shadow)}
[data-template="blush"] .card-feature{border-top-color:var(--gold);background:linear-gradient(170deg,#FFFDFC,#F4DCD5)}
[data-template="blush"] .quote{background:var(--blush-d)}
[data-template="blush"] blockquote p{font-size:clamp(1.6rem,3.6vw,2.6rem)}
[data-template="blush"] h2{font-size:clamp(2.2rem,5vw,3.4rem)}
[data-template="blush"] .hero h1{font-size:clamp(3rem,9vw,6.6rem);line-height:1}
@media (min-width:960px){
  [data-template="blush"] .hero{padding:52px 0 110px}
  [data-template="blush"] .hero-grid{grid-template-columns:1.4fr 1fr;column-gap:64px;row-gap:0;align-items:start}
  [data-template="blush"] .hero-copy{display:contents}
  [data-template="blush"] .hero-copy .eyebrow{grid-column:1/-1;margin-bottom:.8em}
  [data-template="blush"] .hero h1{grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:.28em;margin-bottom:44px}
  [data-template="blush"] .hero h1 br{display:none}
  [data-template="blush"] .hero-media{grid-column:1;grid-row:3/span 4}
  [data-template="blush"] .lead{grid-column:2;grid-row:3;font-size:1.2rem}
  [data-template="blush"] .hero-ctas{grid-column:2;grid-row:4;margin:6px 0 30px}
  [data-template="blush"] .hero-facts{grid-column:2;grid-row:5}
}

/* ---------- 5. Spa Retreat: reversed split, arched video, eucalyptus and linen ---------- */
[data-template="spa"]{
  --ivory:#F7F4EE; --cream:#EDF0E8; --greige:#E1E6DB; --sand:#CBD6C8; --blush:#E8EDE3; --blush-d:#D7E0D3; --champ:#DDE5D8; --champ-d:#9DB3A2;
  --ink:#24332C; --text:#2F3D36; --muted:#56655C; --gold:#4E6B5C; --line:rgba(36,51,44,.12); --white:#FDFCF9;
  --serif:"Marcellus", "Cormorant Garamond", Georgia, serif; --sans:"Mulish", "Helvetica Neue", Arial, sans-serif;
  --r:32px; --r-sm:20px; --shadow:0 24px 60px -32px rgba(36,51,44,.3); --shadow-s:0 10px 26px -16px rgba(36,51,44,.28);
  --hdr-bg:rgba(247,244,238,.92); --hero-bg:radial-gradient(800px 520px at 10% 20%,#E1E6DB,transparent 65%),radial-gradient(700px 480px at 100% 100%,#EDF0E8,transparent 70%),#F7F4EE;
  --btn-r:999px; --btn-w:700; --btn-ls:.06em; --btn-tt:none; --btn-bg:#3F5A4C; --btn-fg:#fff; --btn-bg-h:#2F4A3D; --ghost-b:rgba(36,51,44,.4);
  --h-w:400; --h1-w:400; --h-ls:0; --accent-style:normal; --eb-ls:.3em; --arch:999px 999px var(--r) var(--r); --sec-pad:156px;
}
[data-template="spa"] body{font-weight:400}
[data-template="spa"] .btn{font-size:.92rem}
[data-template="spa"] .hero h1{font-size:clamp(2.8rem,8vw,5rem);line-height:1.08}
[data-template="spa"] .video-shell{border-radius:180px 180px var(--r) var(--r);outline:0;box-shadow:var(--shadow)}
[data-template="spa"] .video-cap,[data-template="spa"] .badges{text-align:center;justify-content:center}
[data-template="spa"] .step{border:0;background:var(--white);box-shadow:var(--shadow-s)}
[data-template="spa"] .step-n{font-style:normal;color:var(--gold);font-size:2.4rem}
[data-template="spa"] .card{border:0;background:var(--white);box-shadow:var(--shadow-s)}
[data-template="spa"] .card-feature{background:linear-gradient(160deg,#EDF0E8,#DDE5D8)}
[data-template="spa"] .quote{background:var(--greige)}
[data-template="spa"] blockquote p{font-style:normal}
@media (min-width:960px){
  [data-template="spa"] .hero{padding:96px 0 140px}
  [data-template="spa"] .hero-grid{grid-template-columns:1.1fr 1fr;gap:88px}
  [data-template="spa"] .hero-media{order:-1}
}

/* ---------- 6. Evolution Signature: crisp white, refined Evolution teal accents ---------- */
[data-template="signature"]{
  --ivory:#FFFFFF; --cream:#F2F8F7; --greige:#E3EFED; --sand:#C7E0DC; --blush:#EAF6F4; --blush-d:#D5EEEA; --champ:#DDF1EE; --champ-d:#7FD3C8;
  --ink:#1B2A2E; --text:#2A383C; --muted:#55666A; --gold:#00756A; --line:rgba(27,42,46,.12); --white:#FFFFFF;
  --serif:"Fraunces", Georgia, serif; --sans:"Outfit", "Helvetica Neue", Arial, sans-serif;
  --r:14px; --r-sm:10px; --shadow:0 20px 50px -28px rgba(27,42,46,.3); --shadow-s:0 8px 22px -14px rgba(27,42,46,.25);
  --hdr-bg:rgba(255,255,255,.92); --hero-bg:radial-gradient(760px 520px at 92% 0%,#E4F5F2,transparent 65%),#FFFFFF;
  --btn-r:10px; --btn-w:600; --btn-ls:.14em; --btn-tt:uppercase; --btn-bg:#00C7B1; --btn-fg:#0B2E2A; --btn-bg-h:#2FD4C1; --ghost-b:rgba(27,42,46,.45);
  --h-w:400; --h1-w:350; --h-ls:-.02em; --eb-ls:.26em; --arch:var(--r); --sec-pad:120px;
}
[data-template="signature"] body{font-weight:300}
[data-template="signature"] .btn{font-size:.78rem}
[data-template="signature"] .hero h1{font-size:clamp(2.9rem,8vw,5.2rem);line-height:1.02}
[data-template="signature"] .hero .eyebrow::before{content:"";display:block;width:48px;height:2px;background:var(--teal);margin-bottom:18px}
[data-template="signature"] .video-shell{outline:0;box-shadow:18px 18px 0 0 var(--blush-d),var(--shadow)}
[data-template="signature"] .step{background:var(--white);border-top:2px solid var(--teal)}
[data-template="signature"] .step-n{font-style:normal;color:var(--gold);font-size:2.4rem}
[data-template="signature"] .card{background:var(--white);border-top:2px solid var(--teal)}
[data-template="signature"] .card-feature{background:linear-gradient(160deg,#FFFFFF,#E4F5F2);border-color:var(--teal)}
[data-template="signature"] .quote{background:var(--cream)}
[data-template="signature"] .what-img img{box-shadow:-18px 18px 0 0 var(--blush-d),var(--shadow)}
@media (min-width:960px){
  [data-template="signature"] .hero{padding:84px 0 120px}
  [data-template="signature"] .hero-grid{grid-template-columns:1fr 1.15fr;gap:80px}
}

/* ---------- Design picker (preview only) ---------- */
.tpl{position:fixed;left:16px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:70;font-family:"Jost","Helvetica Neue",Arial,sans-serif}
.tpl-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.96);color:#222;font:500 .78rem/1 "Jost","Helvetica Neue",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 10px 28px -12px rgba(0,0,0,.35)}
.tpl-btn:hover{background:#fff}
.tpl-dots{display:inline-flex}
.tpl-dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid #fff;margin-left:-5px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.tpl-dots i:first-child{margin-left:0;background:var(--ivory)}.tpl-dots i:nth-child(2){background:var(--champ-d)}.tpl-dots i:nth-child(3){background:var(--ink)}
.tpl-panel{position:absolute;left:0;bottom:56px;width:min(360px,calc(100vw - 32px));max-height:min(72vh,620px);overflow:auto;background:#fff;color:#222;border-radius:18px;border:1px solid rgba(0,0,0,.1);box-shadow:0 30px 70px -24px rgba(0,0,0,.4);padding:18px}
.tpl-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tpl-title{margin:0;font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.tpl-close{width:36px;height:36px;border-radius:50%;border:1px solid rgba(0,0,0,.14);background:#fff;color:#222;font-size:1.2rem;line-height:1;cursor:pointer}
.tpl-note{margin:6px 0 14px;font-size:.8rem;line-height:1.45;color:#555;background:#FFF8E4;border:1px solid #EAD9A6;border-radius:10px;padding:8px 10px}
.tpl-list{display:grid;gap:8px}
.tpl-opt{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;text-align:left;width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.1);background:#fff;color:#222;cursor:pointer;font:inherit}
.tpl-opt:hover{background:#FAFAF8}
.tpl-opt[aria-checked="true"]{border-color:#222;box-shadow:0 0 0 1px #222}
.tpl-sw{display:inline-flex}
.tpl-sw i{width:22px;height:22px;border-radius:50%;margin-left:-7px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.tpl-sw i:first-child{margin-left:0}
.tpl-name{display:block;font-weight:600;font-size:.92rem;line-height:1.3}
.tpl-desc{display:block;font-size:.78rem;line-height:1.4;color:#555;font-weight:400}
.tpl-copy{margin-top:12px;width:100%;min-height:44px;border-radius:10px;border:1px solid rgba(0,0,0,.14);background:#fff;color:#222;font:500 .78rem "Jost","Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.tpl :focus-visible{outline:2px solid #00756A;outline-offset:2px}
@media (min-width:960px){ .tpl{left:24px;bottom:24px} }
@media print{ .tpl{display:none} }
/* coastal desktop fit: keep the whole copy card inside the first screen */
@media (min-width:960px){
  [data-template="coastal"] .hero-grid{grid-template-columns:minmax(0,620px) 1fr;padding:48px 0}
  [data-template="coastal"] .hero h1{font-size:clamp(3rem,4.4vw,4rem);line-height:1.05}
  [data-template="coastal"] .hero-copy{padding:36px 42px 28px}
  [data-template="coastal"] .hero .lead{margin-bottom:24px}
}
/* modern desktop: one-line headline and tighter stack so the video is in view at load */
@media (min-width:960px){
  [data-template="modern"] .hero{padding:44px 0 110px}
  [data-template="modern"] .hero h1{font-size:clamp(3rem,4.6vw,4.4rem)}
  [data-template="modern"] .hero-copy{max-width:1120px}
  [data-template="modern"] .hero-grid{gap:36px}
  [data-template="modern"] .lead{max-width:40em}
  [data-template="modern"] .hero-ctas{margin:22px 0 22px}
}
@media (max-width:959px){
  [data-template="coastal"] .video-cap,[data-template="coastal"] .video-sub,[data-template="coastal"] .badges{padding-inline:22px}
}
.tpl-sub{margin:16px 0 8px;font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#222}
.logo-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.logo-opt{display:block;text-align:left;width:100%;padding:9px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.1);background:#fff;color:#222;cursor:pointer;font:inherit}
.logo-opt:hover{background:#FAFAF8}
.logo-opt[aria-checked="true"]{border-color:#222;box-shadow:0 0 0 1px #222}
.logo-opt:first-child{grid-column:1/-1}