/* ==========================================================================
   Bounce & Bloom, premium white inflatable hire
   Design system. One source of truth for both the site and the ad landers.
   ========================================================================== */

:root{
  /* Surfaces. Bone and ivory rather than pure white, so real white castles pop */
  --bone:        #F7F4EF;
  --bone-2:      #EFEAE2;
  --paper:       #FFFFFF;
  --ink:         #1C1A17;
  --ink-soft:    #46413A;
  --muted:       #7C746A;
  --line:        rgba(28,26,23,.13);
  --line-soft:   rgba(28,26,23,.07);

  /* Accent is muted sage. Restrained, reads editorial not party. */
  --accent:      #6E7A63;
  --accent-dk:   #55604C;
  --gold:        #B08D57;

  /* Pastel accents. The castles are white and the garlands are pastel, so the
     palette follows the product. RULE: pastels live on SURFACES (washes, pills,
     borders). Text uses the -ink variants, which are the same hues darkened to
     pass contrast on bone. Never set body text in the pale tints. */
  --blue-50:     #EDF3F8;   /* wash */
  --blue-100:    #D7E5F0;   /* pill / border */
  --blue-ink:    #4A6C88;   /* text on bone */
  --pink-50:     #FBEFF2;
  --pink-100:    #F4DAE1;
  --pink-ink:    #9E5C70;

  /* back-compat aliases (earlier pass used these names) */
  --soft-blue:   #4A6C88;
  --soft-pink:   #9E5C70;

  --wrap:        1180px;
  --wrap-tight:  920px;
  --radius:      2px;         /* almost square. rounded = playful = wrong */
  --shadow:      0 24px 60px -28px rgba(28,26,23,.30);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.7;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* height:auto is load-bearing. Without it the HTML height attribute (which we
   set on every img so the browser can reserve space and avoid layout shift) is
   applied literally, and a 1600x2000 photo renders 2000px tall in a 490px
   column. Symptom looks like a broken image; it is a squashed-aspect one. */
img{display:block;max-width:100%;height:auto}
picture{display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.wrap-tight{max-width:var(--wrap-tight);margin:0 auto;padding:0 32px}

/* ---------- type ---------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:'Fraunces','Iowan Old Style',Georgia,serif;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.015em;
  margin:0 0 .55em;
  font-variation-settings:'SOFT' 0,'WONK' 0;
}
h1{font-size:clamp(2.9rem,6.2vw,5.1rem)}
h2{font-size:clamp(2.1rem,3.7vw,3.2rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.35rem);letter-spacing:-.01em}
p{margin:0 0 1.15em;max-width:64ch}

.eyebrow{
  font-family:'Inter',sans-serif;
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--soft-blue);
  margin:0 0 1.4rem;
}
/* on dark bands the tint would go muddy, keep the bone treatment there.
   the .band-ink rule further down already overrides this. */
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--ink-soft);max-width:56ch}
.serif-it{font-style:italic;font-variation-settings:'SOFT' 40,'WONK' 1}
.muted{color:var(--muted)}
.center{text-align:center}
.center p,.center .lede{margin-left:auto;margin-right:auto}

/* ---------- buttons ------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:16px 32px;
  font-family:'Inter',sans-serif;
  font-size:.83rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--ink);
  border-radius:var(--radius);
  background:var(--ink);color:var(--bone);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
  cursor:pointer;white-space:nowrap;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bone)}
.btn-light{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn-light:hover{background:transparent;color:var(--bone);border-color:var(--bone)}
.btn-lg{padding:19px 40px;font-size:.87rem}

/* ---------- nav ----------------------------------------------------------- */

.nav{
  position:sticky;top:0;z-index:80;
  background:rgba(247,244,239,.88);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.brand{text-decoration:none;display:block;flex:0 0 auto}
.brand img{height:52px;width:auto}
.foot .brand img{height:60px}
.brand b{
  display:block;
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;font-weight:400;
  font-size:1.42rem;letter-spacing:-.02em;line-height:1;
  font-variation-settings:'SOFT' 40,'WONK' 1;
}
.brand span{
  display:block;font-size:.53rem;font-weight:500;
  letter-spacing:.30em;text-transform:uppercase;
  color:var(--muted);margin-top:6px;
}
.navlinks{display:flex;align-items:center;gap:34px;font-size:.83rem;letter-spacing:.09em;text-transform:uppercase}
.navlinks a{text-decoration:none;color:var(--ink-soft);transition:color .2s;font-weight:450}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.navtoggle{display:none;background:none;border:0;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;color:var(--ink);padding:10px 0}

/* ---------- photo slots ---------------------------------------------------
   Honest placeholders. Every one names the shot it is waiting for, so the
   Drive folder can be filled against this list rather than guessed at.
   -------------------------------------------------------------------------- */

.ph{
  position:relative;
  background:
    linear-gradient(140deg,#EDE8E0 0%,#F6F3EE 42%,#E4DED4 100%);
  border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ph::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 30% 15%,rgba(255,255,255,.85),transparent 60%),
    radial-gradient(80% 70% at 85% 95%,rgba(110,122,99,.10),transparent 65%);
}
.ph-label{
  position:relative;z-index:2;
  font-size:.63rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding:22px;line-height:1.9;max-width:32ch;
}
.ph-label b{display:block;color:var(--ink-soft);font-weight:600;margin-bottom:5px}
.ph-4x5{aspect-ratio:4/5}
.ph-1x1{aspect-ratio:1/1}
.ph-3x2{aspect-ratio:3/2}
.ph-16x9{aspect-ratio:16/9}
.ph-tall{aspect-ratio:3/4}

/* ---------- hero ---------------------------------------------------------- */

.hero{padding:clamp(56px,7vw,96px) 0 clamp(30px,4vw,54px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,84px);align-items:center}
.hero h1{margin-bottom:.4em}
.hero .lede{margin-bottom:2.2rem}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-note{font-size:.82rem;color:var(--muted);margin-top:1.6rem;letter-spacing:.02em}

/* thin rule used as a section divider */
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- sections ------------------------------------------------------ */

section{padding:clamp(52px,6.5vw,92px) 0}
.band{background:var(--pink-50,#FBEFF2)}
.band-stats{padding:clamp(34px,4vw,54px) 0}
.band-ink{background:var(--ink);color:var(--bone)}
/* A solid .btn is ink-on-ink inside a dark band: the LABEL passes a contrast
   check but the button body and border vanish into the background, so it reads
   as floating text. Invert the primary button on dark sections. */
.band-ink .btn:not(.btn-light):not(.btn-ghost){
  background:var(--bone); color:var(--ink); border-color:var(--bone)}
.band-ink .btn:not(.btn-light):not(.btn-ghost):hover{
  background:transparent; color:var(--bone); border-color:var(--bone)}
.band-ink h2,.band-ink h3{color:var(--bone)}
.band-ink .lede,.band-ink p{color:rgba(247,244,239,.76)}
.band-ink .eyebrow{color:rgba(247,244,239,.5)}
.band-paper{background:var(--paper)}

.sec-head{max-width:62ch;margin-bottom:clamp(34px,4vw,58px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- grids --------------------------------------------------------- */

.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,40px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,38px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,76px);align-items:center}
.split-wide{grid-template-columns:1.15fr .85fr}

/* ---------- product cards ------------------------------------------------- */

.card{background:transparent}
.card .ph{margin-bottom:20px}
.card h3{margin-bottom:.35em}
.card p{font-size:.94rem;color:var(--muted);margin-bottom:.7em;max-width:38ch}
.card .price{
  font-family:'Fraunces',Georgia,serif;font-size:1.06rem;
  display:flex;align-items:baseline;gap:.45rem;
}
.card .price small{font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:500}

/* numbered list (process) */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,4vw,52px)}
.step{position:relative;padding-top:30px;border-top:1px solid var(--line)}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;top:26px;left:0;
  font-family:'Fraunces',Georgia,serif;font-size:.8rem;color:var(--gold);letter-spacing:.1em;
}
.step h3{margin-top:26px;margin-bottom:.4em}
.step p{font-size:.94rem;color:var(--muted);margin:0}

/* feature list with hairline rules */
.list-rule{list-style:none;padding:0;margin:0}
.list-rule li{
  padding:19px 0;border-bottom:1px solid var(--line);
  display:flex;gap:18px;align-items:flex-start;font-size:.98rem;
}
.list-rule li:first-child{border-top:1px solid var(--line)}
.list-rule .k{
  flex:0 0 auto;font-family:'Fraunces',Georgia,serif;
  font-size:.78rem;color:var(--gold);padding-top:.28em;letter-spacing:.08em;
}
.band-ink .list-rule li{border-color:rgba(247,244,239,.15)}

/* quiet stat row */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;text-align:center;max-width:820px;margin:0 auto}
.stat .n{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.9rem,3vw,2.6rem);display:block;line-height:1}
.stat .l{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft-blue);margin-top:10px;display:block}

/* areas */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip-static{
  font-size:.8rem;letter-spacing:.06em;padding:9px 16px;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink-soft);
}

/* ---------- enquiry form -------------------------------------------------- */

.form{background:var(--paper);border:1px solid var(--line);padding:clamp(28px,4vw,44px)}
.field{margin-bottom:22px}
.field label{
  display:block;font-size:.7rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;padding:14px 15px;font:inherit;font-size:.96rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bone);color:var(--ink);
  transition:border-color .2s,background .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--paper);
}
.field textarea{min-height:110px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.chipset{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-size:.85rem;padding:10px 17px;border:1px solid var(--line);
  border-radius:var(--radius);cursor:pointer;user-select:none;
  background:var(--bone);transition:all .18s ease;
}
.chip:hover{border-color:var(--muted)}
.chip.on{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.formnote{font-size:.8rem;color:var(--muted);margin-top:16px}

/* ---------- testimonial --------------------------------------------------- */

.quote{max-width:44ch}
.quote p{
  font-family:'Fraunces',Georgia,serif;font-size:clamp(1.3rem,2.1vw,1.72rem);
  line-height:1.42;font-style:italic;margin-bottom:1.1em;
  font-variation-settings:'SOFT' 40,'WONK' 1;
}
.quote cite{font-style:normal;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* pending-content marker, deliberately visible while the site is unbuilt */
.pending{
  border:1px dashed rgba(176,141,87,.55);
  background:rgba(176,141,87,.06);
  padding:20px 22px;border-radius:var(--radius);
}
.pending p{margin:0;font-size:.88rem;color:var(--ink-soft);max-width:none}
.pending b{letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;color:var(--gold);
  display:block;margin-bottom:6px;font-weight:600}

/* inline version, for a single unconfirmed answer inside running content.
   Deliberately loud: an unverified claim must never be mistaken for a real one. */
.pending-inline{
  display:block;
  border-left:2px solid var(--gold);
  background:rgba(176,141,87,.07);
  padding:12px 16px;margin:0 0 22px;
  font-size:.86rem;color:var(--ink-soft);
}
.pending-inline::before{
  content:'To confirm';
  display:block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:5px;
}
.foot .pending-inline{
  border-left-color:rgba(247,244,239,.3);background:none;padding:0;margin:0;
  color:rgba(247,244,239,.42);font-size:.9rem;
}
.foot .pending-inline::before{display:none}

/* ---------- faq ----------------------------------------------------------- */

.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 0;
  font-family:'Fraunces',Georgia,serif;font-size:1.1rem;
  display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold);font-size:1.3rem;flex:0 0 auto;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;margin:0;color:var(--ink-soft);font-size:.98rem;max-width:70ch}

/* ---------- footer -------------------------------------------------------- */

.foot{background:var(--ink);color:rgba(247,244,239,.66);padding:clamp(56px,6vw,84px) 0 40px;font-size:.9rem}
.foot a{color:rgba(247,244,239,.66);text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--bone)}
.foot .brand b,.foot .brand span{color:var(--bone)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;margin-bottom:52px}
.foot h4{font-family:'Inter',sans-serif;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,244,239,.42);margin-bottom:18px;font-weight:500}
.foot ul{list-style:none;padding:0;margin:0}
.foot ul li{margin-bottom:11px}
.foot-base{border-top:1px solid rgba(247,244,239,.14);padding-top:26px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.79rem;
  color:rgba(247,244,239,.45)}

/* ---------- lander-specific ----------------------------------------------- */

.lander-bar{background:var(--ink);color:var(--bone);text-align:center;padding:12px 20px;
  font-size:.79rem;letter-spacing:.13em;text-transform:uppercase}
.trust-row{display:flex;flex-wrap:wrap;gap:28px;align-items:center;
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.trust-row span{display:flex;align-items:center;gap:9px}
.trust-row span::before{content:'';width:5px;height:5px;background:var(--gold);border-radius:50%}

/* ---------- budget slider -------------------------------------------------
   Native range input, restyled. No library. The value is a band rather than a
   dollar figure, because an exact number reads as a quote and scares people
   off a premium price point before they have spoken to anyone.
   -------------------------------------------------------------------------- */

.slider{padding-top:4px}

.slider input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:2px;padding:0;margin:16px 0 0;
  background:var(--line);
  border:0;border-radius:2px;
  cursor:pointer;
}
.slider input[type=range]:focus{outline:none}
.slider input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

/* thumb, webkit */
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--ink);border:3px solid var(--bone);
  box-shadow:0 0 0 1px var(--ink);
  cursor:grab;transition:transform .15s ease;
}
.slider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12)}

/* thumb, firefox */
.slider input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--ink);border:3px solid var(--bone);
  box-shadow:0 0 0 1px var(--ink);
  cursor:grab;
}
.slider input[type=range]::-moz-range-track{
  height:2px;background:var(--line);border-radius:2px;
}

.slider-out{
  display:block;margin-top:20px;
  font-family:'Fraunces',Georgia,serif;
  font-size:1.5rem;line-height:1;letter-spacing:-.01em;
  color:var(--ink);
}
.slider-ends{
  display:flex;justify-content:space-between;gap:16px;
  margin-top:12px;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width:940px){
  .hero-grid,.split,.split-wide{grid-template-columns:1fr}
  .g3,.steps{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr;gap:34px}
  .hero-grid .ph{max-height:64vh}
}

@media (max-width:680px){
  body{font-size:16px}
  .wrap,.wrap-tight{padding:0 22px}
  .nav .wrap{height:70px}
  .navlinks{display:none}
  .navlinks.open{
    display:flex;position:absolute;top:70px;left:0;right:0;
    flex-direction:column;gap:0;background:var(--bone);
    border-bottom:1px solid var(--line);padding:8px 22px 22px;
  }
  .navlinks.open a{padding:15px 0;border-bottom:1px solid var(--line-soft);width:100%}
  .navtoggle{display:block}
  .nav-cta .btn{display:none}
  .g2,.g3,.g4,.steps,.f2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  .stats{grid-template-columns:1fr 1fr}
  .hero{padding:48px 0 56px}
  section{padding:56px 0}
  .btn{padding:15px 26px}
}

/* short-viewport phones: stop the hero eating the whole screen */
@media (max-height:720px) and (max-width:680px){
  .hero{padding:34px 0 44px}
  .hero-grid .ph{aspect-ratio:4/3}
}

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

/* ============================== UGC VIDEO SCROLLER ============================== */
.ugc-scroller{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding:4px 0 18px;
  scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.25) transparent;
}
.ugc-scroller::-webkit-scrollbar{height:6px}
.ugc-scroller::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22); border-radius:99px}
.ugc-item{
  flex:0 0 auto; width:clamp(200px,44vw,268px); scroll-snap-align:start;
  border-radius:14px; overflow:hidden; background:#000; position:relative;
  aspect-ratio:9/16; cursor:pointer;
}
.ugc-item video{width:100%; height:100%; object-fit:cover; display:block}
.ugc-item .ugc-play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35));
  transition:opacity .2s ease; pointer-events:none;
}
.ugc-item.playing .ugc-play{opacity:0}
.ugc-item .ugc-play span{
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92);
  display:grid; place-items:center; font-size:17px; color:#111; padding-left:3px;
}
.ugc-rail{position:relative}
.ugc-nav{
  position:absolute; top:50%; transform:translateY(-60%); z-index:2;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.94); box-shadow:0 2px 10px rgba(0,0,0,.16);
  font-size:16px; color:#111; display:grid; place-items:center;
}
.ugc-nav[data-dir="prev"]{left:-8px}
.ugc-nav[data-dir="next"]{right:-8px}
@media (max-width:720px){ .ugc-nav{display:none} }

/* Weather / plain fact list */
ul.plain{list-style:none; padding:0; margin:0; display:grid; gap:14px}
ul.plain li{
  padding:16px 18px; border-radius:12px; background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.07); line-height:1.55;
}
ul.plain li b{display:block; margin-bottom:3px}

/* ===================== INTERACTIVE SIZE / FIT CHECKER ===================== */
.fit{display:grid; grid-template-columns:1.1fr .9fr; gap:38px; align-items:center}
@media (max-width:900px){ .fit{grid-template-columns:1fr; gap:26px} }

.fit-stage{
  position:relative; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#eef2f4,#e3e9ec);
  border:1px solid rgba(0,0,0,.08); aspect-ratio:4/3;
}
.fit-yard{position:absolute; inset:0; display:grid; place-items:center}
.fit-plot{
  position:relative; background:#cfe3c6; border:2px dashed #8fae83;
  border-radius:6px; transition:width .45s cubic-bezier(.2,.7,.2,1), height .45s cubic-bezier(.2,.7,.2,1);
}
.fit-castle{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center;
  filter:drop-shadow(0 7px 16px rgba(0,0,0,.18));
  transition:width .45s cubic-bezier(.2,.7,.2,1), height .45s cubic-bezier(.2,.7,.2,1);
}
.fit-castle svg{width:100%; height:100%; display:block; overflow:visible}
.fit-castle .body{fill:#ffffff; stroke:#b3c2ca; stroke-width:2.5; transition:fill .3s, stroke .3s}
.fit-castle .trim{fill:#eef3f6; stroke:#b3c2ca; stroke-width:2; transition:fill .3s, stroke .3s}
.fit-castle .water{fill:#d6ecf5; stroke:#a8cfe0; stroke-width:2; transition:fill .3s, stroke .3s}
.fit-castle .dim{fill:#5d6d76; font:600 13px/1 system-ui,-apple-system,sans-serif}
.fit-castle.too-big .body{fill:#ffe4e4; stroke:#d98b8b}
.fit-castle.too-big .trim{fill:#fbd5d5; stroke:#d98b8b}
.fit-castle.too-big .water{fill:#f6dede; stroke:#d98b8b}
.fit-castle.too-big .dim{fill:#7d2f2f}

.fit-label{
  position:absolute; font:600 11px/1 var(--sans,system-ui); color:#5d6d76;
  background:rgba(255,255,255,.85); padding:3px 7px; border-radius:99px;
}
.fit-label.w{bottom:6px; left:50%; transform:translateX(-50%)}
.fit-label.h{top:50%; right:6px; transform:translateY(-50%)}

.fit-verdict{
  margin-top:14px; padding:13px 16px; border-radius:11px; font-weight:500;
  background:#e8f3e4; border:1px solid #bcd6b2; color:#33502a;
}
.fit-verdict.no{background:#fdeaea; border-color:#e3b4b4; color:#7d2f2f}

.fit-controls label{display:block; font-weight:600; margin:16px 0 6px}
.fit-controls input[type=range]{width:100%}
.fit-out{font-variant-numeric:tabular-nums; font-weight:600}
.spec-row{display:flex; justify-content:space-between; gap:16px; padding:11px 0;
  border-bottom:1px solid rgba(0,0,0,.08)}
.spec-row:last-child{border-bottom:0}
.spec-row dt{color:var(--muted,#5d6d76)}
.spec-row dd{margin:0; font-weight:600}

/* ===================== BUILD YOUR SETUP (interactive) ===================== */
.builder{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
@media (max-width:900px){ .builder{grid-template-columns:1fr; gap:28px} }

.build-stage{
  position:relative; border-radius:18px; overflow:hidden; aspect-ratio:1/1;
  background:#e9e4dd; box-shadow:0 18px 44px rgba(0,0,0,.13);
}
.build-stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity .55s ease, transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.build-stage img.on{opacity:1; transform:scale(1)}

.build-badge{
  position:absolute; left:16px; bottom:16px; z-index:3; display:flex; gap:8px; flex-wrap:wrap;
}
.build-badge span{
  background:rgba(255,255,255,.94); border-radius:99px; padding:6px 13px;
  font:600 12px/1 var(--sans,system-ui); letter-spacing:.02em;
  animation:popIn .34s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes popIn{from{opacity:0; transform:translateY(9px) scale(.9)}to{opacity:1; transform:none}}

.opt{
  display:flex; align-items:center; gap:15px; width:100%; text-align:left;
  padding:17px 19px; margin-bottom:12px; cursor:pointer;
  background:rgba(255,255,255,.6); border:1.5px solid rgba(0,0,0,.09);
  border-radius:13px; transition:border-color .2s, background .2s, transform .12s;
}
.opt:hover{border-color:rgba(0,0,0,.26); transform:translateY(-1px)}
.opt.on{border-color:#1e1e1e; background:#fff}
.opt-tick{
  width:23px; height:23px; flex:0 0 auto; border-radius:7px;
  border:1.5px solid rgba(0,0,0,.28); display:grid; place-items:center;
  font-size:13px; color:#fff; background:transparent; transition:all .2s;
}
.opt.on .opt-tick{background:#1e1e1e; border-color:#1e1e1e}
.opt-body{flex:1}
.opt-body b{display:block; margin-bottom:2px}
.opt-body small{color:var(--muted,#5d6d76)}
.opt-price{font-weight:600; white-space:nowrap}

.build-total{
  margin-top:22px; padding:19px 22px; border-radius:14px; background:#1e1e1e; color:#fff;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
}
.build-total .n{font:600 27px/1 var(--serif,Georgia,serif)}
.build-total small{opacity:.72; display:block; margin-top:5px; font-size:12px}

/* scroll reveal */
[data-reveal]{opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].seen{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1; transform:none; transition:none}
  .build-stage img{transition:opacity .2s}
}

/* unit picker inside the fit checker */
.unit-pick{display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap}
.unit-btn{
  flex:1 1 auto; min-width:150px; cursor:pointer; text-align:left;
  padding:14px 16px; border-radius:12px; font:inherit;
  background:rgba(255,255,255,.6); border:1.5px solid rgba(0,0,0,.1);
  transition:border-color .2s, background .2s, transform .12s;
}
.unit-btn:hover{border-color:rgba(0,0,0,.28); transform:translateY(-1px)}
.unit-btn.on{border-color:#1e1e1e; background:#fff}
.unit-btn b{display:block; margin-bottom:2px}
.unit-btn small{color:var(--muted,#5d6d76)}

/* ===================== OCCASION TILES (image + hover caption) ============= */
.occ-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:900px){ .occ-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .occ-grid{grid-template-columns:1fr} }

.occ{
  position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5;
  display:block; background:#111;
}
.occ img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 1.4s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}
.occ:hover img{transform:scale(1.07)}
.occ::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.68) 100%);
}
.occ-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 20px 22px; color:#fff;
}
.occ-cap b{display:block; font:500 1.12rem/1.2 var(--serif,Georgia,serif); margin-bottom:5px}
.occ-cap small{
  display:block; font-size:.83rem; line-height:1.45; opacity:0;
  transform:translateY(8px); transition:opacity .35s ease, transform .35s ease;
}
.occ:hover .occ-cap small, .occ:focus-within .occ-cap small{opacity:.9; transform:none}
@media (hover:none){ .occ-cap small{opacity:.88; transform:none} }

/* ===================== SERVICE CARDS ===================== */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .svc-grid{grid-template-columns:1fr} }
.svc{background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.08);
     border-radius:15px; overflow:hidden; transition:transform .18s, box-shadow .25s}
.svc:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.11)}
.svc img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block}
.svc-body{padding:19px 21px 23px}
.svc-body h3{margin:0 0 7px}
.svc-body p{margin:0; font-size:.93rem; line-height:1.55}
.svc-tag{display:inline-block; margin-bottom:11px; font:600 11px/1 var(--sans,system-ui);
  letter-spacing:.07em; text-transform:uppercase; color:var(--muted,#5d6d76)}

/* ===================== CASTLE + THEME CONFIGURATOR ===================== */
.cfg{display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:start}
@media (max-width:940px){ .cfg{grid-template-columns:1fr; gap:26px} }

.cfg-stage{
  position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3;
  background:#e9e4dd; box-shadow:0 20px 48px rgba(0,0,0,.15);
}
.cfg-stage > img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.05);
  transition:opacity .5s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.cfg-stage > img.on{opacity:1; transform:scale(1)}
.cfg-overlay{position:absolute; inset:0; z-index:2; pointer-events:none}
.cfg-overlay svg{width:100%; height:100%; display:block}
.cfg-overlay circle{transition:fill .45s ease}

.cfg-caption{
  position:absolute; left:18px; bottom:18px; z-index:3;
  background:rgba(255,255,255,.94); border-radius:12px; padding:12px 16px;
  max-width:72%; box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.cfg-caption b{display:block; font:500 1rem/1.25 var(--serif,Georgia,serif)}
.cfg-caption small{color:var(--muted,#5d6d76); font-size:.8rem}

.cfg-step{font:600 11px/1 var(--sans,system-ui); letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted,#5d6d76); margin:0 0 11px}
.cfg-group{margin-bottom:26px}

.cfg-opt{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:13px 15px; margin-bottom:9px; cursor:pointer; font:inherit;
  background:rgba(255,255,255,.6); border:1.5px solid rgba(0,0,0,.09);
  border-radius:12px; transition:border-color .18s, background .18s, transform .12s;
}
.cfg-opt:hover{border-color:rgba(0,0,0,.3); transform:translateY(-1px)}
.cfg-opt.on{border-color:#1e1e1e; background:#fff}
.cfg-opt b{display:block; font-weight:600}
.cfg-opt small{color:var(--muted,#5d6d76)}
.cfg-price{margin-left:auto; font-weight:600; white-space:nowrap}

.sw{display:flex; gap:4px; flex:0 0 auto}
.sw i{width:15px; height:15px; border-radius:50%; display:block;
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}

.cfg-total{
  margin-top:8px; padding:18px 20px; border-radius:14px; background:#1e1e1e; color:#fff;
}
.cfg-total .row{display:flex; justify-content:space-between; align-items:baseline; gap:14px}
.cfg-total .n{font:500 26px/1 var(--serif,Georgia,serif)}
.cfg-total small{display:block; opacity:.7; font-size:11.5px; margin-top:7px; line-height:1.5}
.cfg-total .btn{margin-top:15px; width:100%; text-align:center}

/* ===================== THEME PICKER ===================== */
.themes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:900px){ .themes{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .themes{grid-template-columns:1fr} }

.theme{
  cursor:pointer; text-align:left; font:inherit; padding:0; overflow:hidden;
  background:#fff; border:1.5px solid rgba(0,0,0,.09); border-radius:15px;
  transition:border-color .18s, transform .14s, box-shadow .25s;
}
.theme:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.1)}
.theme.on{border-color:#1e1e1e; box-shadow:0 14px 32px rgba(0,0,0,.12)}

/* the garland strip: overlapping balloons, drawn not photographed */
.theme-strip{height:104px; position:relative; overflow:hidden; background:#f4f1ec}
.theme-strip i{
  position:absolute; border-radius:50%; display:block;
  box-shadow:inset -3px -4px 7px rgba(0,0,0,.13), inset 3px 3px 6px rgba(255,255,255,.5);
}
.theme-body{padding:15px 17px 18px}
.theme-body b{display:block; margin-bottom:3px; font-size:1.02rem}
.theme-body small{color:var(--muted,#5d6d76); line-height:1.45; display:block}

.theme-picked{
  margin-top:26px; padding:20px 22px; border-radius:14px;
  background:#1e1e1e; color:#fff; display:grid; gap:12px;
}
.theme-picked .lbl{font:600 11px/1 var(--sans,system-ui); letter-spacing:.09em;
  text-transform:uppercase; opacity:.6}
.theme-picked .say{
  background:rgba(255,255,255,.1); border-radius:10px; padding:13px 15px;
  font-size:.94rem; line-height:1.55;
}
.theme-picked .btn{justify-self:start}

/* ===================== COLOUR PICKER (build your own) ===================== */
.mix{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start; margin-top:34px}
@media (max-width:900px){ .mix{grid-template-columns:1fr; gap:24px} }

.mix-preview{
  border-radius:15px; overflow:hidden; background:#f4f1ec;
  border:1px solid rgba(0,0,0,.08); height:150px; position:relative;
}
.mix-preview i{position:absolute; border-radius:50%; display:block;
  box-shadow:inset -3px -4px 7px rgba(0,0,0,.13), inset 3px 3px 6px rgba(255,255,255,.5)}

.mix-chosen{display:flex; gap:9px; flex-wrap:wrap; margin-top:15px; min-height:34px}
.mix-chosen button{
  width:34px; height:34px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(0,0,0,.14); position:relative; transition:transform .14s;
}
.mix-chosen button:hover{transform:scale(1.08)}
.mix-chosen button::after{
  content:"\\00d7"; position:absolute; inset:0; display:grid; place-items:center;
  font-size:15px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); opacity:0;
  transition:opacity .16s;
}
.mix-chosen button:hover::after{opacity:1}
.mix-empty{color:var(--muted,#5d6d76); font-size:.88rem; align-self:center}

.pal{margin-bottom:20px}
.pal-name{font:600 11px/1 var(--sans,system-ui); letter-spacing:.08em;
  text-transform:uppercase; color:var(--soft-pink,#B08290); margin:0 0 9px}
.pal-row{display:flex; gap:8px; flex-wrap:wrap}
.pal-row button{
  width:38px; height:38px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(0,0,0,.1); transition:transform .14s, border-color .16s;
}
.pal-row button:hover{transform:scale(1.1); border-color:rgba(0,0,0,.4)}
.pal-row button.on{border-color:#1e1e1e; border-width:3px}

/* ===================== BUILD FLOW (guided configurator) ===================== */
.bld{display:grid; grid-template-columns:1.15fr .85fr; gap:38px; align-items:start}
@media (max-width:940px){ .bld{grid-template-columns:1fr; gap:24px} }

/* progress */
.bld-steps{display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap}
.bld-steps span{
  flex:1 1 0; min-width:88px; font:600 11px/1 var(--sans,system-ui); letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted,#5d6d76); padding-bottom:9px;
  border-bottom:2.5px solid rgba(0,0,0,.1); transition:color .25s, border-color .25s;
}
.bld-steps span.on{color:#1e1e1e; border-color:#1e1e1e}

/* preview */
.bld-view{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/3;
  background:#e9e4dd; box-shadow:0 16px 40px rgba(0,0,0,.13)}
.bld-view img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04); transition:opacity .45s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.bld-view img.on{opacity:1; transform:scale(1)}
.bld-tags{position:absolute; left:14px; bottom:14px; z-index:2; display:flex; gap:7px; flex-wrap:wrap}
.bld-tags span{background:rgba(255,255,255,.95); border-radius:99px; padding:6px 12px;
  font:600 11.5px/1 var(--sans,system-ui); animation:popIn .3s cubic-bezier(.2,1.5,.4,1) both}

/* spec strip under the photo */
.bld-spec{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:2px;
  background:rgba(0,0,0,.08); border-radius:0 0 14px 14px; overflow:hidden}
@media (max-width:560px){ .bld-spec{grid-template-columns:repeat(2,1fr)} }
.bld-spec div{background:var(--bone,#faf7f2); padding:13px 14px}
.bld-spec dt{font:600 10.5px/1 var(--sans,system-ui); letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted,#5d6d76); margin-bottom:5px}
.bld-spec dd{margin:0; font-weight:600; font-size:.95rem}

/* option rows */
.bld-opt{display:flex; align-items:flex-start; gap:14px; width:100%; text-align:left;
  padding:15px 17px; margin-bottom:10px; cursor:pointer; font:inherit;
  background:rgba(255,255,255,.6); border:1.5px solid rgba(0,0,0,.09);
  border-radius:13px; transition:border-color .18s, background .18s, transform .12s}
.bld-opt:hover{border-color:rgba(0,0,0,.3); transform:translateY(-1px)}
.bld-opt.on{border-color:#1e1e1e; background:#fff}
.bld-mark{width:22px; height:22px; flex:0 0 auto; margin-top:2px; border-radius:50%;
  border:1.5px solid rgba(0,0,0,.28); display:grid; place-items:center;
  font-size:12px; color:#fff; transition:all .2s}
.bld-opt.on .bld-mark{background:#1e1e1e; border-color:#1e1e1e}
.bld-mark.sq{border-radius:6px}
.bld-txt{flex:1}
.bld-txt b{display:block; margin-bottom:2px}
.bld-txt small{color:var(--muted,#5d6d76); line-height:1.45; display:block}
.bld-amt{font-weight:600; white-space:nowrap; margin-left:auto; padding-left:10px}

/* running total */
.bld-sum{margin-top:22px; padding:20px 22px; border-radius:15px; background:#1e1e1e; color:#fff}
.bld-line{display:flex; justify-content:space-between; gap:14px; font-size:.9rem;
  padding:5px 0; opacity:.82}
.bld-line.tot{opacity:1; font-size:1rem; margin-top:9px; padding-top:13px;
  border-top:1px solid rgba(255,255,255,.22)}
.bld-line.tot b{font:500 25px/1 var(--serif,Georgia,serif)}
.bld-sum .note{display:block; font-size:11.5px; opacity:.65; margin-top:9px; line-height:1.5}
.bld-sum .btn{margin-top:15px; width:100%; text-align:center}

/* ---------- mobile hero: get the photo above the fold ---------- */
@media (max-width:700px){
  .hero{padding:26px 0 30px}
  .hero h1{font-size:clamp(2.2rem,8.4vw,2.9rem); line-height:1.08; margin-bottom:.32em}
  .hero .lede{font-size:1rem; margin-bottom:1.4rem}
  .hero-actions{gap:10px}
  .hero-actions .btn{width:100%; text-align:center}
  .hero-note{margin-top:1.1rem; font-size:.76rem}
  /* photo first, so she sees a castle before she reads anything */
  .hero-grid{display:flex; flex-direction:column}
  .hero-grid picture{order:-1; margin-bottom:22px}
  .hero-grid picture img{border-radius:14px; max-height:46vh; object-fit:cover; width:100%}
}
@media (max-width:700px){
  .hero-grid picture{width:100%}
  .hero-grid picture img{width:100%; display:block}
}

/* ===================== OWNERS / BRAND BAND ===================== */
.owners{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
@media (max-width:900px){ .owners{grid-template-columns:1fr; gap:26px} }
.owners picture img{width:100%; height:auto; border-radius:16px; display:block;
  box-shadow:0 18px 44px rgba(0,0,0,.14)}
.owners .who h2{margin-top:0}
.owners .sig{margin-top:20px; font:600 12px/1 var(--sans,system-ui); letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted,#5d6d76)}

.brandband{position:relative; overflow:hidden; border-radius:0}
.brandband img{width:100%; height:clamp(220px,32vw,380px); object-fit:cover; display:block}
.brandband .cap{position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.42))}
.brandband .cap p{color:#fff; margin:0; padding:0 22px;
  font:500 clamp(1.2rem,2.6vw,2rem)/1.35 var(--serif,Georgia,serif);
  text-shadow:0 2px 18px rgba(0,0,0,.45); max-width:20ch}

/* ===================== BUILD FLOW v2 (sticky preview) ===================== */
.bld2{display:grid; grid-template-columns:1.08fr .92fr; gap:46px; align-items:start}
@media (max-width:960px){ .bld2{grid-template-columns:1fr; gap:20px} }

/* left: preview stays put while the options scroll */
.bld2-stage{position:sticky; top:88px}
@media (max-width:960px){ .bld2-stage{position:static} }
.bld2-view{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3;
  background:#e9e4dd; box-shadow:0 20px 50px rgba(0,0,0,.15)}
.bld2-view img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.05); transition:opacity .5s ease, transform 1s cubic-bezier(.2,.7,.2,1)}
.bld2-view img.on{opacity:1; transform:scale(1)}
.bld2-chips{position:absolute; left:16px; bottom:16px; display:flex; gap:7px; flex-wrap:wrap; z-index:2}
.bld2-chips span{background:rgba(255,255,255,.96); border-radius:99px; padding:7px 13px;
  font:600 11.5px/1 var(--sans,system-ui); animation:popIn .32s cubic-bezier(.2,1.5,.4,1) both}

/* spec row sits directly under the photo */
.bld2-spec{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:14px;
  border:1px solid rgba(0,0,0,.09); border-radius:12px; overflow:hidden}
@media (max-width:600px){ .bld2-spec{grid-template-columns:repeat(2,1fr)} }
.bld2-spec div{padding:13px 15px; border-right:1px solid rgba(0,0,0,.07)}
.bld2-spec div:last-child{border-right:none}
.bld2-spec dt{font:600 10px/1 var(--sans,system-ui); letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted,#5d6d76); margin-bottom:6px}
.bld2-spec dd{margin:0; font-weight:600; font-size:.94rem}

/* right: option groups */
.bld2-grp{margin-bottom:30px}
.bld2-lab{display:flex; align-items:baseline; gap:10px; margin-bottom:13px}
.bld2-lab b{font:600 11px/1 var(--sans,system-ui); letter-spacing:.13em;
  text-transform:uppercase}
.bld2-lab small{color:var(--muted,#5d6d76); font-size:12px}

.opt{display:flex; align-items:center; gap:15px; width:100%; text-align:left; cursor:pointer;
  padding:14px 16px; margin-bottom:9px; font:inherit; border-radius:13px;
  background:#fff; border:1.5px solid rgba(0,0,0,.1);
  transition:border-color .18s, box-shadow .22s, transform .12s}
.opt:hover{border-color:rgba(0,0,0,.32); transform:translateY(-1px)}
.opt.on{border-color:#1e1e1e; box-shadow:0 0 0 3px rgba(30,30,30,.07)}
.opt-tick{width:21px; height:21px; flex:0 0 auto; border-radius:50%; display:grid;
  place-items:center; border:1.5px solid rgba(0,0,0,.26); font-size:11px; color:transparent;
  transition:.2s}
.opt.on .opt-tick{background:#1e1e1e; border-color:#1e1e1e; color:#fff}
.opt-tick.sq{border-radius:6px}
.opt-txt{flex:1; min-width:0}
.opt-txt b{display:block; font-size:.97rem; margin-bottom:1px}
.opt-txt small{display:block; color:var(--muted,#5d6d76); font-size:12.5px; line-height:1.45}
.opt-amt{font-weight:600; font-size:.95rem; white-space:nowrap}
.opt-amt .plus{color:var(--muted,#5d6d76); font-weight:500}

/* sticky total bar */
.bld2-bar{position:sticky; bottom:0; margin-top:8px; padding:18px 20px; border-radius:15px;
  background:#1e1e1e; color:#fff; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  box-shadow:0 -6px 30px rgba(0,0,0,.16)}
.bld2-bar .lbl{font:600 10px/1 var(--sans,system-ui); letter-spacing:.13em;
  text-transform:uppercase; opacity:.6; display:block; margin-bottom:5px}
.bld2-bar .amt{font:500 30px/1 var(--serif,Georgia,serif)}
.bld2-bar .inc{font-size:11.5px; opacity:.66; line-height:1.5; flex:1 1 190px}
.bld2-bar .btn{margin-left:auto}
@media (max-width:600px){ .bld2-bar .btn{margin-left:0; width:100%; text-align:center} }

/* ===================== INTERACTIVE ENQUIRY (end of journey) ===================== */
.enq{max-width:760px; margin:0 auto}
.enq-card{background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:18px;
  padding:clamp(24px,3.4vw,38px); box-shadow:0 20px 50px rgba(0,0,0,.09)}

/* the running summary of what they already picked */
.enq-sum{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px}
.enq-sum span{background:var(--bone,#f6f2ec); border:1px solid rgba(0,0,0,.07);
  border-radius:99px; padding:8px 14px; font:600 12px/1 var(--sans,system-ui);
  animation:popIn .3s cubic-bezier(.2,1.5,.4,1) both}
.enq-sum span.price{background:#1e1e1e; color:#fff; border-color:#1e1e1e}
.enq-sum .none{background:none; border:none; padding:8px 0; font-weight:400;
  color:var(--muted,#5d6d76)}

.enq-lead{margin:14px 0 26px; color:var(--muted,#5d6d76); font-size:.95rem; line-height:1.6}

/* conversational rows rather than a stacked form */
.enq-row{margin-bottom:22px}
.enq-q{display:block; font:600 11px/1 var(--sans,system-ui); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted,#5d6d76); margin-bottom:9px}
.enq-row input, .enq-row textarea{
  width:100%; padding:14px 16px; border-radius:12px; font:inherit;
  background:var(--bone,#faf7f2); border:1.5px solid rgba(0,0,0,.1);
  transition:border-color .18s, background .18s}
.enq-row input:focus, .enq-row textarea:focus{outline:none; border-color:#1e1e1e;
  background:#fff}
.enq-row textarea{min-height:88px; resize:vertical}
.enq-two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){ .enq-two{grid-template-columns:1fr} }

/* quick-pick chips so common answers are one tap */
.enq-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.enq-chips button{padding:9px 15px; border-radius:99px; cursor:pointer; font:inherit;
  font-size:13px; background:#fff; border:1.5px solid rgba(0,0,0,.12);
  transition:.16s}
.enq-chips button:hover{border-color:rgba(0,0,0,.4)}
.enq-chips button.on{background:#1e1e1e; color:#fff; border-color:#1e1e1e}

.enq-send{margin-top:28px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.enq-send .btn{flex:0 0 auto}
.enq-note{font-size:12.5px; color:var(--muted,#5d6d76); line-height:1.5; flex:1 1 200px}

.enq-done{display:none; text-align:center; padding:14px 0}
.enq-done h3{margin:0 0 8px}
.enq-done p{color:var(--muted,#5d6d76); margin:0 auto; max-width:44ch}

/* ============ COMBINED BUILDER: one panel, three steps ============ */
.bx{display:grid; grid-template-columns:1.02fr .98fr; gap:40px; align-items:start}
@media (max-width:960px){ .bx{grid-template-columns:1fr; gap:22px} }
.bx-stage{position:sticky; top:86px}
@media (max-width:960px){ .bx-stage{position:static} }

/* step tabs */
.bx-tabs{display:flex; gap:6px; margin-bottom:20px}
.bx-tab{flex:1; padding:11px 16px; cursor:pointer; font:inherit; border-radius:10px;
  background:transparent; border:1px solid rgba(0,0,0,.1); color:var(--muted,#5d6d76);
  font:600 11px/1.3 var(--sans,system-ui); letter-spacing:.07em; text-transform:uppercase;
  transition:.18s}
.bx-tab:hover{border-color:rgba(0,0,0,.3); color:var(--ink,#1e1e1e)}
.bx-tab.on{background:#1e1e1e; border-color:#1e1e1e; color:#fff}
.bx-tab .n{display:block; font-size:15px; margin-bottom:3px; font-family:var(--serif,Georgia,serif)}

/* panes */
.bx-pane{display:none}
.bx-pane.on{display:block; animation:paneIn .32s cubic-bezier(.2,.9,.3,1) both}
@keyframes paneIn{from{opacity:0; transform:translateY(8px)}to{opacity:1;transform:none}}

/* compact option rows */
.bx-opt{display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  cursor:pointer; padding:12px 14px; margin-bottom:7px; font:inherit; border-radius:11px;
  background:#fff; border:1.5px solid rgba(0,0,0,.1);
  transition:border-color .16s, box-shadow .2s, transform .12s}
.bx-opt:hover{border-color:rgba(0,0,0,.32); transform:translateY(-1px)}
.bx-opt.on{border-color:#1e1e1e; box-shadow:0 0 0 3px rgba(30,30,30,.07)}
.bx-tick{width:19px; height:19px; flex:0 0 auto; border-radius:50%; display:grid;
  place-items:center; border:1.5px solid rgba(0,0,0,.26); font-size:10px;
  color:transparent; transition:.18s}
.bx-opt.on .bx-tick{background:#1e1e1e; border-color:#1e1e1e; color:#fff}
.bx-tick.sq{border-radius:5px}
.bx-txt{flex:1; min-width:0}
.bx-txt b{display:block; font-size:.94rem}
.bx-txt small{display:block; color:var(--muted,#5d6d76); font-size:12px; line-height:1.4}
.bx-amt{font-weight:600; font-size:.92rem; white-space:nowrap}
.bx-amt .p{color:var(--muted,#5d6d76); font-weight:500}

.bx-sub{font:600 10px/1 var(--sans,system-ui); letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted,#5d6d76); margin:22px 0 10px}
.bx-sub:first-child{margin-top:0}

/* colour swatches, tighter than before */
.bx-pal{margin-bottom:15px}
.bx-pal p{font:600 10px/1 var(--sans,system-ui); letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted,#5d6d76); margin:0 0 7px}
.bx-row{display:flex; gap:7px; flex-wrap:wrap}
.bx-row button{width:34px; height:34px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(0,0,0,.1); transition:transform .14s, border-color .16s}
.bx-row button:hover{transform:scale(1.12); border-color:rgba(0,0,0,.4)}
.bx-row button.on{border-color:#1e1e1e; border-width:3px}
.bx-picked{display:flex; gap:7px; flex-wrap:wrap; min-height:32px; margin-bottom:4px}
.bx-picked button{width:30px; height:30px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid rgba(0,0,0,.14)}
.bx-picked .empty{color:var(--muted,#5d6d76); font-size:12.5px; align-self:center}

/* details step */
.bx-f{margin-bottom:15px}
.bx-f label{display:block; font:600 10px/1 var(--sans,system-ui); letter-spacing:.11em;
  text-transform:uppercase; color:var(--soft-blue,#6E7F94); margin-bottom:7px}
.bx-f input, .bx-f textarea{width:100%; padding:12px 14px; border-radius:10px; font:inherit;
  background:var(--bone,#faf7f2); border:1.5px solid rgba(0,0,0,.1); transition:.16s}
.bx-f input:focus, .bx-f textarea:focus{outline:none; border-color:#1e1e1e; background:#fff}
.bx-f textarea{min-height:74px; resize:vertical}
.bx-2{display:grid; grid-template-columns:1fr 1fr; gap:11px}
@media (max-width:560px){ .bx-2{grid-template-columns:1fr} }
.bx-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:8px}
.bx-chips button{padding:8px 13px; border-radius:99px; cursor:pointer; font:inherit;
  font-size:12.5px; background:#fff; border:1.5px solid rgba(0,0,0,.12); transition:.16s}
.bx-chips button:hover{border-color:rgba(0,0,0,.4)}
.bx-chips button.on{background:#1e1e1e; color:#fff; border-color:#1e1e1e}

/* summary chips over the photo */
.bx-chipbar{position:absolute; left:14px; bottom:14px; z-index:2; display:flex; gap:6px;
  flex-wrap:wrap; max-width:calc(100% - 28px)}
.bx-chipbar span{background:rgba(255,255,255,.96); border-radius:99px; padding:6px 12px;
  font:600 11px/1 var(--sans,system-ui); animation:popIn .3s cubic-bezier(.2,1.5,.4,1) both}

/* sticky action bar */
.bx-bar{position:sticky; bottom:0; margin-top:14px; padding:16px 18px; border-radius:14px;
  background:#1e1e1e; color:#fff; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  box-shadow:0 -6px 26px rgba(0,0,0,.15)}
.bx-bar .lbl{font:600 9.5px/1 var(--sans,system-ui); letter-spacing:.13em;
  text-transform:uppercase; opacity:.6; display:block; margin-bottom:4px}
.bx-bar .amt{font:500 27px/1 var(--serif,Georgia,serif)}
.bx-bar .inc{font-size:11px; opacity:.66; line-height:1.5; flex:1 1 150px}
.bx-bar .btn{margin-left:auto}
@media (max-width:600px){ .bx-bar .btn{margin-left:0; width:100%; text-align:center} }
.bx-done{display:none; padding:22px; border-radius:14px; background:#1e1e1e; color:#fff;
  text-align:center; margin-top:14px}
.bx-done b{display:block; font:500 20px/1.3 var(--serif,Georgia,serif); margin-bottom:6px}
.bx-done span{font-size:13px; opacity:.72}

/* ============ VERIFIED GOOGLE REVIEW (compact) ============ */
.band{padding-top:clamp(34px,4vw,52px); padding-bottom:clamp(34px,4vw,52px)}
.rev{max-width:660px; margin:0 auto; background:#fff; border-radius:16px;
  border:1px solid rgba(0,0,0,.09); padding:clamp(22px,2.6vw,30px);
  box-shadow:0 14px 36px rgba(0,0,0,.07)}
.rev-top{display:flex; align-items:center; gap:11px; margin-bottom:14px; flex-wrap:wrap}
.rev-g{width:22px; height:22px; flex:0 0 auto}
.rev-stars{color:#f5a623; font-size:15px; letter-spacing:1.5px; line-height:1}
.rev-src{font:600 11px/1 var(--sans,system-ui); letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted,#5d6d76)}
.rev-badge{margin-left:auto; display:inline-flex; align-items:center; gap:5px;
  background:#eef6ee; color:#2f7a3f; border:1px solid #cfe6d3; border-radius:99px;
  padding:5px 11px; font:600 10.5px/1 var(--sans,system-ui); letter-spacing:.05em}
.rev-badge svg{width:11px; height:11px}
.rev p{font-family:var(--serif,'Fraunces',Georgia,serif); font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.6; margin:0 0 16px; color:var(--ink,#1e1e1e)}
.rev-by{display:flex; align-items:center; gap:11px}
.rev-av{width:36px; height:36px; border-radius:50%; background:#1e1e1e; color:#fff;
  display:grid; place-items:center; font:600 14px/1 var(--sans,system-ui); flex:0 0 auto}
.rev-who b{display:block; font-size:13.5px}
.rev-who span{font-size:11.5px; color:var(--muted,#5d6d76)}
@media (max-width:560px){ .rev-badge{margin-left:0} }

/* ============ SERVICE AREA MAP ============ */
.area{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
@media (max-width:900px){ .area{grid-template-columns:1fr; gap:26px} }
.area-map{position:relative; border-radius:16px; overflow:hidden; background:#eae4dc;
  aspect-ratio:4/3; border:1px solid rgba(0,0,0,.08)}
.area-map svg{width:100%; height:100%; display:block}
.ring{fill:none; stroke:#1e1e1e; opacity:.16}
.ring.core{fill:rgba(30,30,30,.05); opacity:.32}
.pin{fill:#1e1e1e}
.pin-lab{font:600 9.5px var(--sans,system-ui); fill:#5d6d76; letter-spacing:.04em}
.hub{fill:#c9a227; stroke:#fff; stroke-width:2}
.hub-lab{font:700 11px var(--sans,system-ui); fill:#1e1e1e; letter-spacing:.04em}
.area-key{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px;
  font:12px var(--sans,system-ui); color:var(--muted,#5d6d76)}
.area-key i{display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:6px; vertical-align:middle}
.suburbs{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0}
.suburbs span{background:var(--bone,#f6f2ec); border:1px solid rgba(0,0,0,.07);
  border-radius:99px; padding:8px 14px; font-size:13px}
.suburbs span.free{background:#1e1e1e; color:#fff; border-color:#1e1e1e}

/* ============ CONTACT STRIP ============ */
.ctc{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px}
@media (max-width:760px){ .ctc{grid-template-columns:1fr} }
.ctc a{display:flex; align-items:center; gap:13px; padding:17px 19px; border-radius:14px;
  background:#fff; border:1px solid rgba(0,0,0,.09); text-decoration:none; color:inherit;
  transition:border-color .16s, transform .14s, box-shadow .2s}
.ctc a:hover{border-color:rgba(0,0,0,.35); transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.08)}
.ctc .ico{width:38px; height:38px; border-radius:11px; background:var(--bone,#f6f2ec);
  display:grid; place-items:center; flex:0 0 auto; font-size:17px}
.ctc b{display:block; font-size:14.5px}
.ctc small{display:block; color:var(--muted,#5d6d76); font-size:12px}

/* ============ COLLECTION: scan row + detail list ============ */
.pick{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:14px}
@media (max-width:820px){ .pick{grid-template-columns:repeat(2,1fr)} }
.pick a{display:block; text-decoration:none; color:inherit; border-radius:14px;
  overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,.09);
  transition:transform .16s, box-shadow .22s, border-color .16s}
.pick a:hover{transform:translateY(-3px); border-color:var(--blue-100,#D7E5F0);
  box-shadow:0 16px 34px rgba(0,0,0,.1)}
.pick img{width:100%; aspect-ratio:1; object-fit:cover; display:block}
.pick .lab{padding:13px 14px}
.pick .lab b{display:block; font-size:14px; margin-bottom:3px}
.pick .lab span{font-size:12.5px; color:var(--muted,#5d6d76)}
.pick .lab i{display:block; font-style:normal; font-weight:600; font-size:13.5px; margin-top:6px}

/* detail rows */
.item{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
  padding:clamp(38px,5vw,64px) 0; border-top:1px solid rgba(0,0,0,.09)}
@media (max-width:860px){ .item{grid-template-columns:1fr; gap:24px} }
.item:nth-child(even) .item-pic{order:2}
@media (max-width:860px){ .item:nth-child(even) .item-pic{order:0} }
.item-pic img{width:100%; height:auto; border-radius:16px; display:block;
  box-shadow:0 18px 44px rgba(0,0,0,.13)}
.item h3{font-family:var(--serif,Georgia,serif); font-size:clamp(1.5rem,2.6vw,2rem);
  margin:0 0 6px; font-weight:500}
.item .from{font-size:1.15rem; font-weight:600; margin-bottom:14px}
.item .from small{font-weight:400; color:var(--muted,#5d6d76); font-size:.8rem;
  letter-spacing:.04em}
.item > div > p{color:var(--muted,#5d6d76); line-height:1.65; margin:0 0 18px}
.facts{list-style:none; padding:0; margin:0 0 22px}
.facts li{display:flex; gap:11px; padding:9px 0; border-bottom:1px dashed rgba(0,0,0,.1);
  font-size:14px}
.facts li:last-child{border-bottom:none}
.facts b{flex:0 0 108px; font-weight:600; color:var(--muted,#5d6d76);
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; padding-top:2px}
.suits{display:inline-block; background:var(--pink-50,#FBEFF2); color:var(--pink-ink,#9E5C70); border-radius:99px;
  padding:7px 14px; font-size:12.5px; margin-bottom:16px}

/* ============ MOBILE FIXES ============ */
@media (max-width:700px){
  /* nav toggle was 35px, below the 44px tap minimum */
  .navtoggle{min-height:44px; min-width:44px; display:inline-flex; align-items:center;
    justify-content:flex-end}

  /* headings were eating whole screens */
  section h2{font-size:clamp(1.5rem,7vw,1.95rem); line-height:1.18}
  .sec-head .lede{font-size:.95rem; line-height:1.55}
  .sec-head{margin-bottom:20px}
  section{padding-top:38px; padding-bottom:38px}

  /* BUILDER: the sticky bar was covering the step tabs */
  .bx-stage{position:static}
  .bx-tabs{position:sticky; top:56px; z-index:6; background:var(--bone-2,#efe9e1);
    padding:8px 0; margin:0 -4px 14px; gap:5px}
  .bx-tab{padding:10px 10px; font-size:9.5px; letter-spacing:.04em}
  .bx-tab .n{font-size:13px; margin-bottom:2px}

  /* bar sits in flow at the bottom of the panel, not floating over content */
  .bx-bar{position:sticky; bottom:8px; padding:13px 15px; gap:10px; border-radius:13px}
  .bx-bar .amt{font-size:23px}
  .bx-bar .inc{display:none}          /* the detail repeats below, drop it on small screens */
  .bx-bar .btn{margin-left:auto; padding:11px 20px; font-size:13px}

  /* option rows: give the tap target room */
  .bx-opt{padding:13px 13px; min-height:56px}
  .bx-txt b{font-size:.92rem}
  .bx-txt small{font-size:11.5px}
  .bx-amt{font-size:.9rem}

  /* spec strip reads better as 2x2 with tighter type */
  .bld2-spec dt{font-size:9px}
  .bld2-spec dd{font-size:.85rem}
  .bld2-spec div{padding:10px 12px}

  /* colour swatches: bigger targets, fewer per row */
  .bx-row button{width:38px; height:38px}
  .bx-picked button{width:34px; height:34px}

  /* chips over the photo were wrapping badly */
  .bx-chipbar{left:10px; bottom:10px}
  .bx-chipbar span{font-size:10px; padding:5px 10px}

  /* contact tiles + collection cards full width and tappable */
  .ctc a{min-height:60px}
  .pick{grid-template-columns:1fr 1fr; gap:10px}
  .pick .lab{padding:10px 11px}
  .pick .lab b{font-size:13px}
  .pick .lab span{font-size:11.5px}

  /* video scroller was overflowing the viewport */
  .ugc-item{max-width:78vw}
  .ugc-rail{padding-left:4vw; padding-right:4vw}

  /* buttons: consistent, thumb-sized */
  .btn{min-height:46px; display:inline-flex; align-items:center; justify-content:center}
  .btn-lg{width:100%; text-align:center}
}

/* two sticky elements in one short column collide: pin only the total bar */
@media (max-width:700px){
  .bx-tabs{position:static; background:transparent; padding:0; margin:0 0 14px}
  .bx-bar{position:sticky; bottom:10px; z-index:7;
    box-shadow:0 8px 30px rgba(0,0,0,.28)}
  /* the video rail scrolls sideways on purpose, stop it reporting as page overflow */
  .ugc-rail{scrollbar-width:none}
  .ugc-rail::-webkit-scrollbar{display:none}
}

/* ============ GALLERY: filters + masonry + lightbox ============ */
.gfilter{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:30px}
.gfilter button{padding:10px 18px; border-radius:99px; cursor:pointer; font:inherit;
  font-size:13px; background:#fff; border:1.5px solid rgba(0,0,0,.12);
  transition:.16s; min-height:44px}
.gfilter button:hover{border-color:rgba(0,0,0,.4)}
.gfilter button.on{background:#1e1e1e; color:#fff; border-color:#1e1e1e}
.gfilter button .c{opacity:.5; margin-left:6px; font-size:11.5px}

.masonry{columns:4; column-gap:14px}
@media (max-width:1100px){ .masonry{columns:3} }
@media (max-width:760px){ .masonry{columns:2; column-gap:10px} }
.mitem{break-inside:avoid; margin-bottom:14px; border-radius:13px; overflow:hidden;
  cursor:zoom-in; position:relative; background:#e9e4dd; display:block; width:100%;
  padding:0; border:none; opacity:0; transform:translateY(14px);
  animation:gIn .45s cubic-bezier(.2,.8,.3,1) forwards}
@media (max-width:760px){ .mitem{margin-bottom:10px} }
@keyframes gIn{to{opacity:1; transform:none}}
.mitem img{width:100%; height:auto; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mitem:hover img{transform:scale(1.06)}
.mitem::after{content:''; position:absolute; inset:0; background:rgba(0,0,0,0);
  transition:background .3s}
.mitem:hover::after{background:rgba(0,0,0,.12)}
.mitem.hide{display:none}

/* lightbox */
.lb{position:fixed; inset:0; z-index:200; background:rgba(18,16,14,.94);
  display:none; place-items:center; padding:20px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.lb.on{display:grid; animation:lbIn .28s ease both}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb img{max-width:min(1100px,92vw); max-height:84vh; border-radius:12px; display:block;
  box-shadow:0 30px 80px rgba(0,0,0,.5); animation:lbPop .34s cubic-bezier(.2,1.1,.3,1) both}
@keyframes lbPop{from{opacity:0; transform:scale(.96)}to{opacity:1; transform:none}}
.lb-cap{position:absolute; left:0; right:0; bottom:22px; text-align:center; color:#fff;
  font-size:13.5px; opacity:.8; padding:0 20px}
.lb-x, .lb-prev, .lb-next{position:absolute; background:rgba(255,255,255,.12); color:#fff;
  border:none; cursor:pointer; border-radius:50%; width:48px; height:48px; font-size:20px;
  display:grid; place-items:center; transition:.18s}
.lb-x:hover, .lb-prev:hover, .lb-next:hover{background:rgba(255,255,255,.26)}
.lb-x{top:20px; right:20px}
.lb-prev{left:20px; top:50%; transform:translateY(-50%)}
.lb-next{right:20px; top:50%; transform:translateY(-50%)}
@media (max-width:700px){
  .lb-prev{left:10px} .lb-next{right:10px}
  .lb-x{top:12px; right:12px}
}
.gcount{text-align:center; color:var(--muted,#5d6d76); font-size:13px; margin-top:22px}

/* ============ FAQ: search + category accordion ============ */
.faq-search{position:relative; max-width:520px; margin:0 auto 26px}
.faq-search input{width:100%; padding:15px 18px 15px 46px; border-radius:99px; font:inherit;
  background:#fff; border:1.5px solid rgba(0,0,0,.12); transition:.18s}
.faq-search input:focus{outline:none; border-color:#1e1e1e;
  box-shadow:0 0 0 4px rgba(30,30,30,.06)}
.faq-search .mag{position:absolute; left:18px; top:50%; transform:translateY(-50%);
  opacity:.4; font-size:15px; pointer-events:none}

.faq-cats{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:26px}
.faq-cats button{padding:9px 16px; border-radius:99px; cursor:pointer; font:inherit;
  font-size:12.5px; background:#fff; border:1.5px solid rgba(0,0,0,.12); min-height:44px;
  transition:.16s}
.faq-cats button:hover{border-color:rgba(0,0,0,.4)}
.faq-cats button.on{background:#1e1e1e; color:#fff; border-color:#1e1e1e}

.qa{max-width:760px; margin:0 auto}
.qa details{background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:13px;
  margin-bottom:9px; overflow:hidden; transition:border-color .18s, box-shadow .22s}
.qa details[open]{border-color:rgba(0,0,0,.24); box-shadow:0 10px 28px rgba(0,0,0,.07)}
.qa details.hide{display:none}
.qa summary{padding:17px 52px 17px 20px; cursor:pointer; font-weight:600; font-size:15px;
  position:relative; list-style:none; min-height:44px; display:flex; align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+'; position:absolute; right:20px; top:50%;
  transform:translateY(-50%); font-size:20px; font-weight:300; opacity:.45;
  transition:transform .25s, opacity .2s}
.qa details[open] summary::after{transform:translateY(-50%) rotate(45deg); opacity:.8}
.qa summary:hover{background:rgba(0,0,0,.015)}
.qa .ans{padding:0 20px 19px; color:var(--muted,#5d6d76); line-height:1.68; font-size:14.5px;
  animation:ansIn .3s ease both}
@keyframes ansIn{from{opacity:0; transform:translateY(-5px)}to{opacity:1;transform:none}}
.qa mark{background:#fdf0b8; padding:1px 2px; border-radius:2px}
.faq-none{text-align:center; color:var(--muted,#5d6d76); padding:40px 0; display:none}
.faq-none.on{display:block}
.faq-tag{display:inline-block; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted,#5d6d76); background:var(--bone,#f6f2ec); border-radius:99px;
  padding:4px 10px; margin-left:10px; font-weight:600; vertical-align:middle}

/* ============ CONTACT: live date checker ============ */
.ck{max-width:820px; margin:0 auto}
.ck-card{background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:18px;
  padding:clamp(24px,3.4vw,38px); box-shadow:0 20px 50px rgba(0,0,0,.08)}

/* the answer strip that reacts to the chosen date */
.ck-verdict{display:flex; align-items:flex-start; gap:14px; padding:16px 18px;
  border-radius:13px; margin-bottom:24px; background:var(--bone,#f6f2ec);
  border:1px solid rgba(0,0,0,.07); transition:background .3s, border-color .3s}
.ck-verdict.good{background:#eef6ee; border-color:#cfe6d3}
.ck-verdict.warn{background:#fdf6e6; border-color:#f0e0b8}
.ck-verdict .dot{width:10px; height:10px; border-radius:50%; flex:0 0 auto; margin-top:6px;
  background:#9aa5ab; transition:background .3s}
.ck-verdict.good .dot{background:#3f9155}
.ck-verdict.warn .dot{background:#d19a2a}
.ck-verdict b{display:block; font-size:15px; margin-bottom:3px}
.ck-verdict span{font-size:13.5px; color:var(--muted,#5d6d76); line-height:1.55}

.ck-days{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:18px 0 6px}
.ck-day{padding:11px 4px; border-radius:10px; cursor:pointer; font:inherit; text-align:center;
  background:#fff; border:1.5px solid rgba(0,0,0,.1); transition:.15s; min-height:56px}
.ck-day:hover{border-color:rgba(0,0,0,.4)}
.ck-day.on{background:#1e1e1e; color:#fff; border-color:#1e1e1e}
.ck-day .dow{display:block; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  opacity:.6; margin-bottom:3px}
.ck-day .num{display:block; font-weight:600; font-size:15px}
.ck-day.busy{opacity:.55}
@media (max-width:600px){ .ck-days{grid-template-columns:repeat(4,1fr)} }

.ck-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px}
.ck-nav b{font-size:14px}
.ck-nav button{background:none; border:1px solid rgba(0,0,0,.12); border-radius:9px;
  width:36px; height:36px; cursor:pointer; font-size:15px; transition:.15s}
.ck-nav button:hover{border-color:rgba(0,0,0,.4)}

/* ============ OCCASIONS: pick-your-day explorer ============ */
.occ-pick{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:34px}
@media (max-width:820px){ .occ-pick{grid-template-columns:repeat(2,1fr)} }
.occ-pick button{padding:18px 16px; border-radius:14px; cursor:pointer; font:inherit;
  text-align:left; background:#fff; border:1.5px solid rgba(0,0,0,.1); min-height:76px;
  transition:transform .15s, border-color .16s, box-shadow .2s}
.occ-pick button:hover{transform:translateY(-2px); border-color:rgba(0,0,0,.35);
  box-shadow:0 12px 28px rgba(0,0,0,.08)}
.occ-pick button.on{background:#1e1e1e; color:#fff; border-color:#1e1e1e}
.occ-pick b{display:block; font-size:15px; margin-bottom:3px}
.occ-pick small{display:block; font-size:12px; opacity:.65; line-height:1.4}

.occ-panel{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:18px;
  padding:clamp(22px,3vw,34px); box-shadow:0 18px 44px rgba(0,0,0,.08)}
@media (max-width:860px){ .occ-panel{grid-template-columns:1fr; gap:22px} }
.occ-panel img{width:100%; height:auto; border-radius:14px; display:block;
  aspect-ratio:4/3; object-fit:cover}
/* The gallery shots are 1200x1600 portrait. Left raw they made the panel taller
   than the viewport on desktop, so the visible area was mostly empty card with
   the photo pushed below the fold. Cropping to 4/3 keeps the panel compact and
   the text beside it in view. */
@media (max-width:860px){ .occ-panel img{aspect-ratio:3/2} }
/* The fade animates transform ONLY. Opacity is deliberately not animated: an
   animation clock that stalls (backgrounded tab, throttled mobile, reduced
   motion) would leave the element stuck on the 0% keyframe and the photo
   invisible. Scale is safe to stall on because 1.02 still shows the image. */
.occ-panel img.swapping{animation:fadeSwap .45s ease forwards}
@keyframes fadeSwap{from{transform:scale(1.02)}to{transform:none}}
@media (prefers-reduced-motion:reduce){ .occ-panel img.swapping{animation:none} }
.occ-panel h3{font-family:var(--serif,Georgia,serif); font-size:clamp(1.4rem,2.4vw,1.9rem);
  margin:0 0 10px; font-weight:500}
.occ-panel .pts{list-style:none; padding:0; margin:16px 0 20px}
.occ-panel .pts li{padding:9px 0 9px 26px; position:relative; font-size:14.5px;
  color:var(--muted,#5d6d76); line-height:1.55; border-bottom:1px dashed rgba(0,0,0,.09)}
.occ-panel .pts li:last-child{border-bottom:none}
.occ-panel .pts li::before{content:'✓'; position:absolute; left:0; top:9px;
  font-weight:700; color:var(--pink-ink,#9E5C70)}
.occ-rec{display:inline-block; background:var(--blue-50,#EDF3F8); color:var(--blue-ink,#4A6C88); border-radius:99px;
  padding:8px 15px; font-size:12.5px; margin-bottom:14px; font-weight:600}

/* week nav arrows were below the tap minimum on mobile */
@media (max-width:700px){
  .ck-nav button{width:44px; height:44px}
  .ck-day{min-height:60px}
}

/* ---- collection: tighter, even rhythm ---- */
.pick{margin-bottom:8px}
.item{padding:clamp(30px,3.6vw,44px) 0; gap:clamp(28px,3.6vw,44px)}
.item:first-of-type{padding-top:clamp(26px,3vw,36px); border-top:none;
  margin-top:clamp(20px,2.4vw,30px); border-top:1px solid rgba(0,0,0,.09)}
.item:last-of-type{padding-bottom:clamp(20px,2.4vw,28px)}
.item-pic img{margin:0; display:block}
.item .from{margin-bottom:12px}
.item > div > p{margin:0 0 14px}
.facts{margin:12px 0 18px}
.facts li{padding:7px 0}
.suits{margin-bottom:11px}
@media (max-width:860px){
  .item{padding:26px 0; gap:20px}
  .item:first-of-type{margin-top:16px; padding-top:24px}
}


/* ============ INSTAGRAM CAROUSEL (hardtuned pattern) ============ */
.ig{padding:clamp(52px,6vw,80px) 0; background:#fff}

.ig-wrap{position:relative}
.ig-rail{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 0 10px; -webkit-overflow-scrolling:touch}
.ig-rail::-webkit-scrollbar{display:none}
.ig-rail{scrollbar-width:none}
.ig-card{flex:0 0 auto; width:clamp(190px,20vw,236px); scroll-snap-align:start;
  position:relative; border-radius:10px; overflow:hidden; display:block;
  background:#eee; aspect-ratio:1; text-decoration:none}
.ig-card img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.ig-card:hover img{transform:scale(1.07)}
.ig-card .ov{position:absolute; inset:0; background:rgba(0,0,0,0);
  display:grid; place-items:center; transition:background .25s}
.ig-card:hover .ov{background:rgba(0,0,0,.34)}
.ig-card .ov span{color:#fff; font:600 14px/1 var(--sans,system-ui);
  opacity:0; transform:translateY(6px); transition:.25s; display:flex; align-items:center; gap:7px}
.ig-card:hover .ov span{opacity:1; transform:none}

.ig-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(0,0,0,.12);
  background:#fff; cursor:pointer; font-size:19px; display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.12); transition:.16s}
.ig-arrow:hover{border-color:rgba(0,0,0,.4); transform:translateY(-50%) scale(1.06)}
.ig-arrow.l{left:-10px} .ig-arrow.r{right:-10px}
@media (max-width:760px){ .ig-arrow{display:none} .ig-card{width:63vw} }

/* ---- headline system: one rule, no inline overrides ---- */
.sec-head{margin-bottom:clamp(22px,2.6vw,32px)}
.sec-head .eyebrow{margin:0 0 10px}
.sec-head h1, .sec-head h2{margin:0 0 12px; line-height:1.14;
  text-wrap:balance}
.sec-head .lede{margin:0; max-width:62ch}
/* a page's own opening block centres; every section below it reads left */
.sec-head.intro{text-align:center; margin-bottom:clamp(26px,3vw,38px)}
.sec-head.intro .lede{margin-left:auto; margin-right:auto}

/* ---- month picker on the date checker ---- */
.ck-months{display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; margin-bottom:6px;
  scrollbar-width:none}
.ck-months::-webkit-scrollbar{display:none}
.ck-months button{flex:0 0 auto; padding:10px 16px; border-radius:99px; cursor:pointer;
  font:inherit; font-size:13px; background:#fff; border:1.5px solid rgba(0,0,0,.12);
  min-height:44px; transition:.15s; white-space:nowrap}
.ck-months button:hover{border-color:rgba(0,0,0,.4)}
.ck-months button.on{background:#1e1e1e; color:#fff; border-color:#1e1e1e}
.ck-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin:12px 0 4px}
.ck-dow{text-align:center; font:600 9.5px/1 var(--sans,system-ui); letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted,#5d6d76); padding:6px 0}
.ck-cell{aspect-ratio:1; border-radius:9px; cursor:pointer; font:inherit; font-size:13.5px;
  background:#fff; border:1.5px solid rgba(0,0,0,.09); transition:.14s; min-height:40px;
  display:grid; place-items:center; font-weight:500}
.ck-cell:hover:not(:disabled){border-color:rgba(0,0,0,.45); transform:translateY(-1px)}
.ck-cell.on{background:#1e1e1e; color:#fff; border-color:#1e1e1e}
.ck-cell.we{background:var(--bone,#faf7f2)}
.ck-cell:disabled{opacity:.26; cursor:default; background:transparent; border-color:transparent}
.ck-cell.blank{border:none; background:none; cursor:default}
@media (max-width:600px){ .ck-cell{min-height:38px; font-size:12.5px} }

/* ---- instagram header: pfp, label, follower count (hardtuned stack) ---- */
.ig-top{text-align:center; margin-bottom:26px}
.ig-pfp{display:inline-block; width:100px; height:100px; border-radius:50%;
  overflow:hidden; margin-bottom:14px; border:1px solid rgba(0,0,0,.08);
  transition:transform .18s, box-shadow .2s}
.ig-pfp:hover{transform:scale(1.05); box-shadow:0 10px 26px rgba(0,0,0,.16)}
.ig-pfp img{width:100%; height:100%; object-fit:cover; display:block}
.ig-h{font:700 25px/1.1 var(--sans,system-ui); letter-spacing:-.5px; margin:0 0 6px;
  text-transform:uppercase}
.ig-followers{font:700 16px/1 var(--sans,system-ui); margin:0;
  color:var(--muted,#5d6d76); letter-spacing:.02em}

/* followers line must centre on the section, not inherit a lede width */
.ig-followers{max-width:none; margin-left:auto; margin-right:auto; text-align:center}

/* ============ GOOGLE REVIEWS: three across ============ */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch}
@media (max-width:900px){ .revs{grid-template-columns:1fr; gap:12px} }
.revs .rev{max-width:none; margin:0; padding:22px; display:flex; flex-direction:column}
.revs .rev p{font-size:.95rem; line-height:1.58; margin:0 0 auto; padding-bottom:16px}
.revs .rev .rev-by{margin-top:16px}
.rev-score{display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom:22px; flex-wrap:wrap}
.rev-score b{font:500 30px/1 var(--serif,Georgia,serif)}
.rev-score .st{color:#f5a623; font-size:16px; letter-spacing:2px}
.rev-score span{font-size:13px; color:var(--muted,#5d6d76)}

/* ---- real map: gold coast to brisbane ---- */
.area-map{aspect-ratio:4/3; border-radius:16px; overflow:hidden; position:relative;
  border:1px solid rgba(0,0,0,.1); background:#e8e2d9; z-index:0}
.area-map .leaflet-container{width:100%; height:100%; background:#e8e2d9;
  font-family:var(--sans,system-ui)}
/* soften the OSM tiles so the map reads as brand, not as a raw screenshot */
.area-map .leaflet-tile-pane{filter:grayscale(.55) contrast(1.06) brightness(.99) sepia(.10)}
.area-map .leaflet-control-attribution{font-size:9px; background:rgba(255,255,255,.72)}
.area-map .leaflet-control-zoom a{border-radius:6px; color:#1e1e1e}
.hub-pin{display:grid; place-items:center}
.hub-pin span{display:block; width:16px; height:16px; border-radius:50%;
  background:#c9a227; border:3px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.4)}
.hub-pin::after{content:''; position:absolute; width:38px; height:38px; border-radius:50%;
  border:2px solid rgba(201,162,39,.55); animation:pulseRing 2.6s ease-out infinite}
@keyframes pulseRing{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.city-lab{background:rgba(255,255,255,.94); border-radius:99px; padding:4px 10px;
  font:600 11px/1 var(--sans,system-ui); white-space:nowrap; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 2px 8px rgba(0,0,0,.1)}

/* map legend + hub ring read stronger against the tiles */
.hub-pin span{width:18px; height:18px; box-shadow:0 2px 12px rgba(0,0,0,.5)}
.city-lab{font-size:11.5px; padding:5px 11px; box-shadow:0 2px 10px rgba(0,0,0,.16)}

/* ============ BOOKING PAGE: tighter rhythm ============ */
.ck{max-width:760px}
.ck-card{padding:clamp(18px,2vw,26px); margin-top:0}
/* the intro block was leaving a dead band above the card */
.ck-page-head{margin-bottom:clamp(18px,2vw,26px)}
.ck-page-head .lede{margin-bottom:0}

/* month tabs were running past the card edge with no visual cue */
.ck-months{padding:2px 2px 8px; margin:0 0 4px; position:relative;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.ck-months button{padding:9px 14px; font-size:12.5px}

.ck-grid{gap:4px; margin:10px 0 2px}
.ck-cell{min-height:38px; font-size:13px; border-radius:8px}
.ck-dow{padding:4px 0; font-size:9px}
.ck-verdict{padding:14px 16px; margin-bottom:14px}
.ck-verdict b{font-size:14.5px}
.ck-verdict span{font-size:13px}

/* form: pull the fields together */
form .field{margin-bottom:0}
form .field + .field{margin-top:15px}
form label{margin-bottom:6px; font-size:13px}
form input, form select, form textarea{padding:11px 13px}
form textarea{min-height:96px}
.formnote{margin-top:16px; font-size:12.5px}

/* section padding across the booking page */
.ck-sec{padding-top:clamp(30px,3.4vw,44px); padding-bottom:clamp(30px,3.4vw,44px)}

/* calendar cells were forced square by aspect-ratio, making the grid huge */
.ck-cell{aspect-ratio:auto; min-height:34px; height:34px}
.ck-grid{gap:3px}
.ck{max-width:640px}
.ck-card{padding:clamp(16px,1.8vw,22px)}
/* kill the dead band between the intro and the card */
.ck-sec + .ck-sec{padding-top:0}

/* tight cells are fine with a mouse; a thumb needs 44px */
@media (max-width:700px){
  .ck-cell{height:44px; min-height:44px; font-size:14px}
  .ck-grid{gap:4px}
  .ck-months button{min-height:44px}
}

/* three stats in a two-column grid leaves the last one stranded left */
@media (max-width:700px){
  .stats > *:last-child:nth-child(odd){grid-column:1 / -1}
}

/* ============ PRELOADER: balloons rise, then clear ============ */
#pre{position:fixed; inset:0; z-index:9999; background:var(--bone,#faf7f2);
  display:grid; place-items:center; transition:opacity .5s ease, visibility .5s}
#pre.gone{opacity:0; visibility:hidden; pointer-events:none}
#pre canvas{position:absolute; inset:0; width:100%; height:100%}
#pre .pl-mark{position:relative; text-align:center; z-index:2;
  animation:plIn .7s cubic-bezier(.2,.8,.2,1) both}
#pre .pl-mark img{width:96px; height:auto; display:block; margin:0 auto 14px}
#pre .pl-mark span{display:block; font:600 10.5px/1 var(--sans,system-ui);
  letter-spacing:.3em; text-transform:uppercase; color:var(--muted,#5d6d76)}
@keyframes plIn{from{opacity:0; transform:translateY(14px) scale(.94)}
  to{opacity:1; transform:none}}
/* someone who prefers reduced motion should not get a bouncing screen */
@media (prefers-reduced-motion:reduce){
  #pre{transition:none} #pre canvas{display:none}
}

/* ===================== BLOG ===================== */
.bgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:900px){ .bgrid{grid-template-columns:1fr; gap:16px} }
.bcard{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:14px;
  overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s}
.bcard:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.11);
  border-color:rgba(0,0,0,.18)}
.bcard img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.bcard-t{padding:20px 20px 22px; display:flex; flex-direction:column; gap:9px; flex:1}
.bcard-t b{font-family:var(--serif,Georgia,serif); font-size:1.24rem; font-weight:500;
  line-height:1.25}
.bcard-t small{color:var(--muted,#5d6d76); font-size:13.5px; line-height:1.55;
  margin-bottom:auto}
.bcard-go{font:600 12px/1 var(--sans,system-ui); letter-spacing:.08em;
  text-transform:uppercase; color:var(--soft-pink,#B08290); margin-top:12px}
.bcard:hover .bcard-go{text-decoration:underline; text-underline-offset:3px}
.rel-k{font:600 10.5px/1 var(--sans,system-ui); letter-spacing:.16em;
  text-transform:uppercase; color:var(--soft-blue,#6E7F94)}

/* post page */
.post{padding:clamp(30px,3.6vw,48px) 0 0}
.crumbs{font-size:12.5px; color:var(--muted,#5d6d76); margin-bottom:18px}
.crumbs a{color:inherit; text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 6px; opacity:.5}
.post h1{font-size:clamp(2.1rem,4.4vw,3.3rem); line-height:1.12; margin:0 0 14px;
  text-wrap:balance}
.post-meta{font-size:12.5px; color:var(--muted,#5d6d76); margin:14px 0 0}
.post-hero{width:100%; height:auto; border-radius:14px; margin:clamp(24px,3vw,36px) 0 0;
  display:block}
.post-body{padding-top:clamp(26px,3vw,38px); padding-bottom:clamp(30px,3.6vw,48px)}
.post-body p{font-size:1.045rem; line-height:1.78; margin:0 0 1.15em;
  max-width:68ch}
.post-body h2{font-size:clamp(1.42rem,2.5vw,1.92rem); line-height:1.22;
  margin:2em 0 .7em; text-wrap:balance}
/* :not(.btn) is load-bearing. Plain "post-body a" is specificity 0,0,1,1 and
   beat .btn (0,0,1,0), so every solid button inside a post body inherited ink
   text on its ink background and rendered black on black. */
.post-body a:not(.btn){color:inherit; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px}
.post-cta{background:var(--blue-50,#EDF3F8); border:1px solid var(--blue-100,#D7E5F0);
  border-radius:16px; padding:clamp(24px,3vw,36px); margin:clamp(30px,3.4vw,44px) 0 0}
.post-cta h2{margin:.2em 0 .5em}
.post-cta p{max-width:60ch}

.rel{padding:clamp(26px,3vw,40px) 0 clamp(40px,4.4vw,60px)}
.rel-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px}
@media (max-width:760px){ .rel-grid{grid-template-columns:1fr} }
.rel-card{display:flex; flex-direction:column; gap:7px; padding:20px;
  background:#fff; border:1px solid rgba(0,0,0,.09); border-radius:13px;
  text-decoration:none; color:inherit; transition:.18s}
.rel-card:hover{border-color:var(--blue-100,#D7E5F0); transform:translateY(-2px)}
.rel-card b{font-family:var(--serif,Georgia,serif); font-size:1.09rem; font-weight:500;
  line-height:1.3}
.rel-card small{color:var(--muted,#5d6d76); font-size:13px; line-height:1.55}