/* ============================================================
   BOEHLKE MEDIA — prototype stylesheet
   Palette sampled from the live Wix site. Nothing invented.
   ============================================================ */

:root{
  --bone:#FAF7F5;
  --paper:#FFFFFF;
  --ink:#1C1A1A;
  --ink-2:#323030;
  --ink-3:#7A7170;
  --rule:#E7DFDC;
  --pink:#CA738C;        /* SIGNATURE PINK — exact, unchanged */
  --pink-deep:#A8546C;
  --blush:#FBEEEE;
  --blush-2:#F6E2E7;
  --berry:#2C0611;
  --berry-2:#3B0817;

  --f-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --f-body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --f-mark:"Playfair Display",Georgia,"Times New Roman",serif;

  --gut:clamp(18px,5vw,72px);
  --maxw:1480px;
  --ease:cubic-bezier(.2,.8,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bone);color:var(--ink-2);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.035em;line-height:.94;font-weight:800}
p{margin:0}
:focus-visible{outline:2.5px solid var(--pink);outline-offset:3px;border-radius:2px}
::selection{background:var(--pink);color:#fff}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font-family:var(--f-body);font-weight:600;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink-deep);margin:0}
.eyebrow.light{color:#E7A9BA}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.62;max-width:62ch}
.u-center{text-align:center;margin-inline:auto}

/* ---------- scroll progress ---------- */
#prog{position:fixed;top:0;left:0;height:2.5px;background:var(--pink);width:0;z-index:200;transition:width .08s linear}

/* ---------- page wipe ---------- */
#wipe{position:fixed;inset:0;background:var(--pink);z-index:300;transform:scaleY(0);transform-origin:bottom;pointer-events:none}
#wipe.out{transform:scaleY(1);transform-origin:bottom;transition:transform .42s var(--ease)}
#wipe.in{transform:scaleY(0);transform-origin:top;transition:transform .48s var(--ease)}

/* ---------- custom cursor ---------- */
#cur{position:fixed;top:0;left:0;z-index:250;pointer-events:none;width:74px;height:74px;border-radius:50%;
  background:var(--pink);color:#fff;display:grid;place-items:center;
  font:700 10.5px/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;
  transform:translate(-50%,-50%) scale(0);transition:transform .28s var(--ease),background-color .2s}
#cur.on{transform:translate(-50%,-50%) scale(1)}
#cur.dark{background:var(--ink)}
@media (hover:none),(pointer:coarse){#cur{display:none}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;overflow:hidden;
  font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:16px 28px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease)}
.btn span.t{position:relative;z-index:2}
.btn .ar{position:relative;z-index:2;transition:transform .3s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;transform:translateY(101%);transition:transform .42s var(--ease)}
.btn:hover::before{transform:translateY(0)}
.btn:hover .ar{transform:translateX(5px)}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink::before{background:var(--pink)}
.btn-ink:hover{color:#fff}
.btn-out{border-color:var(--ink);color:var(--ink)}
.btn-out::before{background:var(--ink)}
.btn-out:hover{color:var(--bone)}
.btn-pink{background:var(--pink);color:#fff}
.btn-pink::before{background:var(--ink)}
.btn-light{border-color:rgba(255,255,255,.5);color:#fff}
.btn-light::before{background:#fff}
.btn-light:hover{color:var(--berry);border-color:#fff}
.btn-white{background:#fff;color:var(--pink-deep)}
.btn-white::before{background:var(--ink)}
.btn-white:hover{color:#fff}
.btn-sm{padding:11px 20px;font-size:11.5px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:150;transition:background-color .4s,border-color .4s,padding .3s;
  border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0px)}
.nav.solid{background:rgba(250,247,245,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--rule)}
.nav.ondark:not(.solid) .logo,.nav.ondark:not(.solid) .nav-links a{color:#fff}
.nav.ondark:not(.solid) .burger{border-color:rgba(255,255,255,.6);color:#fff}
.nav-in{display:flex;align-items:center;gap:22px;max-width:var(--maxw);margin:0 auto;padding:20px var(--gut);transition:padding .3s}
.nav.solid .nav-in{padding-block:12px}

.logo{display:inline-flex;align-items:center;gap:.28em;text-decoration:none;color:var(--ink-2);
  font-family:var(--f-mark);font-weight:400;font-size:clamp(21px,2vw,29px);line-height:1;white-space:nowrap;transition:font-size .3s,color .4s}
.logo img{width:auto;height:1.22em}
.nav.solid .logo{font-size:clamp(19px,1.7vw,24px)}

.nav-links{display:flex;gap:clamp(14px,2vw,30px);margin-left:auto;align-items:center}
.nav-links a{font-size:11.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;text-decoration:none;color:var(--ink);position:relative;padding:5px 0;transition:color .4s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--pink);transition:right .35s var(--ease)}
.nav-links a:hover::after,.nav-links a.here::after{right:0}

.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--ink);border-radius:999px;
  padding:10px 18px;font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer;transition:.3s}

/* mobile overlay menu */
#mob{position:fixed;inset:0;z-index:149;background:var(--berry);color:#fff;display:flex;flex-direction:column;
  justify-content:center;padding:96px var(--gut) 40px;transform:translateY(-100%);transition:transform .55s var(--ease);overflow-y:auto}
#mob.open{transform:none}
#mob a{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(34px,10vw,58px);color:#fff;
  text-decoration:none;letter-spacing:-.04em;line-height:1.08;padding:9px 0;opacity:0;transform:translateY(20px)}
#mob.open a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
#mob.open a:nth-child(1){transition-delay:.12s}
#mob.open a:nth-child(2){transition-delay:.18s}
#mob.open a:nth-child(3){transition-delay:.24s}
#mob.open a:nth-child(4){transition-delay:.30s}
#mob.open a:nth-child(5){transition-delay:.36s}
#mob.open a:nth-child(6){transition-delay:.42s}
#mob .mob-foot{margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.25);display:flex;flex-wrap:wrap;gap:8px 22px}
#mob .mob-foot a{font-family:var(--f-body);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#E0BCC6;padding:0}

/* ---------- cinematic hero ---------- */
.vhero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;overflow:hidden;background:var(--berry)}
.vhero-media{position:absolute;inset:0;overflow:hidden}
.vhero-media img.poster{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:opacity .9s}
.vhero-frame{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100%;min-width:177.78vh;
  transform:translate(-50%,-50%) scale(1.42);opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.vhero-frame.show{opacity:1}
.vhero-frame iframe{width:100%;height:100%;border:0}
.vhero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,26,26,.55) 0%,rgba(28,26,26,.22) 28%,rgba(28,26,26,.42) 62%,rgba(28,26,26,.88) 100%)}
.vhero-in{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(46px,7vw,86px)}
.vhero h1{color:#fff;font-size:clamp(46px,9.2vw,148px);line-height:.86;letter-spacing:-.05em;text-shadow:0 2px 30px rgba(20,3,9,.4)}
.vhero h1 .ln{display:block;overflow:hidden}
.vhero h1 .ln i{display:block;font-style:normal;transform:translateY(105%);animation:rise .95s var(--ease) forwards}
.vhero h1 .ln:nth-child(2) i{animation-delay:.1s}
.vhero h1 .ln:nth-child(3) i{animation-delay:.2s}
.vhero h1 em{font-style:normal;color:var(--pink)}
@keyframes rise{to{transform:none}}
.vhero .eyebrow{color:#F2CFD8;margin-bottom:20px;opacity:0;animation:fadein .8s .5s forwards}
.vhero-sub{color:#F0E4E6;max-width:46ch;margin-top:24px;opacity:0;animation:fadein .8s .68s forwards}
.vhero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;opacity:0;animation:fadein .8s .8s forwards}
@keyframes fadein{to{opacity:1}}
.scrollcue{position:absolute;right:var(--gut);bottom:clamp(46px,7vw,86px);z-index:3;color:#fff;
  font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:10px;opacity:0;animation:fadein .8s 1s forwards}
.scrollcue i{display:block;width:1px;height:46px;background:rgba(255,255,255,.5);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:#fff;animation:cue 2.1s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- page banner (interior pages) ---------- */
.banner{position:relative;min-height:min(62vh,580px);display:flex;align-items:flex-end;overflow:hidden;background:var(--berry)}
.banner img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,26,26,.55),rgba(28,26,26,.18) 40%,rgba(28,26,26,.72))}
.banner-in{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(38px,5vw,64px)}
.banner h1{color:#fff;font-size:clamp(42px,8vw,118px);line-height:.88;letter-spacing:-.05em;text-shadow:0 2px 30px rgba(20,3,9,.4)}
.banner .eyebrow{color:#F2CFD8;margin-bottom:16px}
.banner .lede{color:#EFE1E4;margin-top:18px}

/* ---------- marquee ---------- */
.marquee{background:var(--pink);color:#fff;overflow:hidden;padding-block:17px;user-select:none}
.marquee.ink{background:var(--ink)}
.mq{display:flex;width:max-content;animation:mq 48s linear infinite}
.mq span{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.4vw,32px);letter-spacing:-.015em;
  text-transform:uppercase;padding-inline:22px;white-space:nowrap;display:flex;align-items:center;gap:44px}
.mq span::after{content:"✳";font-size:.52em;color:var(--blush-2)}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee:hover .mq{animation-play-state:paused}

/* ---------- sections ---------- */
section{scroll-margin-top:90px}
.sec{padding-block:clamp(70px,9vw,140px)}
.sec.tight{padding-block:clamp(48px,6vw,90px)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 44px;align-items:end;margin-bottom:clamp(32px,4vw,56px)}
.sec-head h2{font-size:clamp(36px,5.8vw,84px);margin-top:14px}
.sec-head .lede{margin-top:16px}
.sec-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.dark{background:var(--berry);color:#F1E6E8}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark .lede{color:#DFCBD1}
.white{background:var(--paper);border-block:1px solid var(--rule)}

/* ---------- reveal + parallax ---------- */
.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.d1.in{transition-delay:.08s}.rv.d2.in{transition-delay:.16s}.rv.d3.in{transition-delay:.24s}

.frame{position:relative;overflow:hidden;background:var(--blush)}
.frame img{width:100%;height:100%;object-fit:cover;will-change:transform}
.frame.par img{height:118%;top:-9%;position:absolute;left:0}
.clipin img{clip-path:inset(0 0 100% 0);transform:scale(1.08)}
.clipin.in img{clip-path:inset(0 0 0 0);transform:scale(1);transition:clip-path 1.05s var(--ease),transform 1.3s var(--ease)}

/* ---------- editorial photo grid ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1vw,18px);grid-auto-flow:dense}
.tile{position:relative;overflow:hidden;margin:0;grid-column:span 4;aspect-ratio:3/2;background:var(--blush);cursor:pointer}
.tile.tall{aspect-ratio:2/3}
.tile.wide{grid-column:span 8}
.tile.half{grid-column:span 6}
.tile.full{grid-column:span 12;aspect-ratio:21/9}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .5s}
.tile:hover img{transform:scale(1.055)}
.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 14px;color:#fff;
  background:linear-gradient(transparent,rgba(28,26,26,.75));
  font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  opacity:0;transform:translateY(10px);transition:.4s var(--ease)}
.tile:hover figcaption{opacity:1;transform:none}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding:11px 18px;border-radius:999px;
  border:1.5px solid var(--rule);background:transparent;color:var(--ink-3);cursor:pointer;transition:.25s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bone)}

/* ---------- horizontal film strip ---------- */
.rail-wrap{overflow:hidden}
.rail{display:flex;gap:clamp(12px,1.6vw,26px);padding-inline:var(--gut);will-change:transform}
.rail-card{flex:0 0 clamp(250px,30vw,430px)}
.rail-card .pl{width:100%}
.rail-note{max-width:var(--maxw);margin:18px auto 0;padding-inline:var(--gut);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.dark .rail-note{color:#B9979F}

/* ---------- video player card ---------- */
.pl{position:relative;aspect-ratio:16/9;overflow:hidden;background:#140309;border:0;padding:0;display:block;width:100%;cursor:pointer}
.pl img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),opacity .4s}
.pl:hover img{transform:scale(1.04);opacity:.86}
.pl iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.play i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.94);transition:transform .35s var(--ease),background-color .3s}
.play i::before{content:"";width:0;height:0;margin-left:5px;border-left:18px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent}
.pl:hover .play i{transform:scale(1.12);background:var(--pink)}
.pl:hover .play i::before{border-left-color:#fff}
.pl.big .play i{width:88px;height:88px}
.pl.big .play i::before{border-left-width:25px;border-top-width:15px;border-bottom-width:15px}
.pl.sm .play i{width:46px;height:46px}
.pl.sm .play i::before{border-left-width:13px;border-top-width:8px;border-bottom-width:8px}
.vmeta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:13px}
.vmeta b{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.015em}
.dark .vmeta b{color:#fff}
.vmeta span{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-deep);white-space:nowrap}
.dark .vmeta span{color:#CE96A6}
.films{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px)}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:260;background:rgba(20,3,9,.96);display:none;place-items:center;padding:clamp(14px,4vw,60px)}
#lb.open{display:grid}
#lb img{max-width:100%;max-height:82vh;object-fit:contain;opacity:0;transform:scale(.97);transition:.4s var(--ease)}
#lb img.shown{opacity:1;transform:none}
#lb .lb-cap{position:absolute;left:0;right:0;bottom:clamp(14px,3vw,34px);text-align:center;color:#EBD6DB;
  font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
#lb button{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;
  width:52px;height:52px;border-radius:50%;cursor:pointer;font-size:20px;display:grid;place-items:center;transition:.25s}
#lb button:hover{background:var(--pink);border-color:var(--pink)}
#lbPrev{left:clamp(10px,2vw,34px);top:50%;transform:translateY(-50%)}
#lbNext{right:clamp(10px,2vw,34px);top:50%;transform:translateY(-50%)}
#lbClose{right:clamp(10px,2vw,34px);top:clamp(10px,2vw,28px)}

/* ---------- three worlds ---------- */
.worlds{display:grid;gap:clamp(30px,3.6vw,58px)}
.world{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(24px,3.4vw,58px);align-items:center;
  padding-top:clamp(30px,3.6vw,58px);border-top:1px solid var(--rule)}
.world:first-child{border-top:0;padding-top:0}
.world.flip .frame{order:2}
.world .frame{aspect-ratio:5/4}
.world h3{font-size:clamp(30px,4.4vw,62px);margin-top:12px}
.world .lede{margin-top:14px;font-size:17px}
.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;padding:0;list-style:none}
.pills li{font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase;padding:9px 14px;border-radius:999px;background:var(--blush);color:var(--pink-deep)}
.price-line{margin-top:20px;font-size:14.5px;color:var(--ink-3)}
.price-line b{color:var(--ink);font-weight:700}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,64px);align-items:center}
.split .frame{aspect-ratio:4/5}

/* ---------- pull quote ---------- */
.pull{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,4.6vw,68px);line-height:1.02;letter-spacing:-.04em;color:var(--ink);max-width:19ch}
.pull em{font-style:normal;color:var(--pink)}

/* ---------- packages ---------- */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.pkg{background:var(--paper);border:1px solid var(--rule);padding:clamp(24px,2.8vw,38px);display:flex;flex-direction:column;gap:14px;transition:.35s var(--ease)}
.pkg:hover{transform:translateY(-4px);border-color:var(--pink);box-shadow:0 22px 50px -30px rgba(44,6,17,.4)}
.dark .pkg{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.16)}
.pkg .nm{font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.dark .pkg .nm{color:#fff}
.pkg .pr{font-family:var(--f-display);font-weight:800;font-size:clamp(34px,4vw,52px);color:var(--pink);letter-spacing:-.04em;line-height:1}
.pkg ul{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.pkg li{font-size:14.5px;color:var(--ink-2);padding-left:17px;position:relative}
.dark .pkg li{color:#D9C6CB}
.pkg li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--pink)}
.pkg .foot{margin-top:auto;padding-top:14px}

/* ---------- testimonials ---------- */
.loves{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
.love{background:var(--paper);border:1px solid var(--rule);padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:16px;margin:0}
.love .qm{font-family:var(--f-display);font-weight:800;font-size:46px;line-height:.55;color:var(--pink);height:26px}
.love p{font-size:15.5px;line-height:1.66}
.love footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.love footer b{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink)}
.love footer a{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-deep);text-decoration:none;border-bottom:1.5px solid var(--blush-2);padding-bottom:2px;transition:.25s}
.love footer a:hover{border-bottom-color:var(--pink);color:var(--pink)}

/* ---------- contact ---------- */
.contact{background:var(--pink);color:#fff}
.contact h2{color:#fff;font-size:clamp(42px,8.6vw,132px);line-height:.85}
.contact .eyebrow{color:#FBE7EC}
.contact .lede{color:#FDEFF2;margin-top:22px}
.c-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,66px);align-items:end}
.c-facts{display:grid;gap:18px}
.c-fact{border-top:1px solid rgba(255,255,255,.34);padding-top:12px}
.c-fact span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#FBD9E1}
.c-fact a,.c-fact b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(17px,1.8vw,23px);color:#fff;text-decoration:none;margin-top:5px;letter-spacing:-.02em;word-break:break-word}
.c-fact a:hover{color:var(--berry)}

/* form */
.form{display:grid;gap:16px;max-width:620px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.fld input,.fld textarea,.fld select{width:100%;background:var(--paper);border:1.5px solid var(--rule);border-radius:2px;
  padding:14px 15px;font:inherit;font-size:16px;color:var(--ink);transition:border-color .25s}
.fld textarea{min-height:130px;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--pink)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:block;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:12px 18px;
  border-radius:999px;border:1.5px solid var(--rule);color:var(--ink-3);transition:.25s var(--ease)}
.opt input:checked + span{background:var(--pink);border-color:var(--pink);color:#fff}
.opt input:focus-visible + span{outline:2.5px solid var(--ink);outline-offset:2px}
.note{font-size:13.5px;color:var(--ink-3);border-left:2.5px solid var(--pink);padding-left:14px;max-width:56ch}

/* ---------- footer ---------- */
.foot{background:var(--bone);border-top:1px solid var(--rule);padding-block:52px 34px}
.foot-in{display:flex;flex-wrap:wrap;gap:26px 44px;align-items:center;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:9px 24px}
.foot nav a{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink-3);transition:color .25s}
.foot nav a:hover{color:var(--pink)}
.foot .fine{width:100%;border-top:1px solid var(--rule);margin-top:12px;padding-top:18px;font-size:11.5px;letter-spacing:.07em;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between}

/* ---------- prototype ribbon ---------- */
#ribbon{position:fixed;left:0;bottom:0;z-index:180;background:var(--ink);color:#fff;font-size:10.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;padding:9px 14px;border-top-right-radius:4px;
  padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
#ribbon b{color:var(--pink)}
#ribbon button{background:none;border:0;color:#9C9391;cursor:pointer;margin-left:10px;font:inherit}
#ribbon button:hover{color:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .films{grid-template-columns:repeat(2,1fr)}
  .loves,.pkgs{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav-links{display:none}
  .burger{display:block}
  .sec-head{grid-template-columns:1fr}
  .world,.split,.c-grid{grid-template-columns:1fr}
  .world.flip .frame{order:0}
  .world .frame,.split .frame{aspect-ratio:4/3}
  .tile,.tile.wide,.tile.half{grid-column:span 6}
  .tile.full{grid-column:span 12;aspect-ratio:16/9}
  .vhero{min-height:min(86vh,720px)}
  .scrollcue{display:none}
  .rail{padding-inline:var(--gut)}
}
@media (max-width:620px){
  body{font-size:16px}
  .vhero::after{background:linear-gradient(180deg,rgba(28,26,26,.58) 0%,rgba(28,26,26,.3) 30%,rgba(28,26,26,.45) 62%,rgba(28,26,26,.88) 100%)}
  .tile,.tile.wide,.tile.half{grid-column:span 12;aspect-ratio:3/2}
  .tile.tall{aspect-ratio:4/5}
  .tile figcaption{opacity:1;transform:none;padding-bottom:12px}
  .films{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .btn{padding:15px 22px;font-size:12px}
  .pkgs{grid-template-columns:1fr}
  /* touch-friendly horizontal galleries */
  .rail-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none}
  .rail-wrap::-webkit-scrollbar{display:none}
  .rail{transform:none !important}
  .rail-card{flex:0 0 78vw;scroll-snap-align:center}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .rv{opacity:1;transform:none}
  .clipin img{clip-path:none;transform:none}
  .vhero h1 .ln i{transform:none}
  .vhero .eyebrow,.vhero-sub,.vhero-cta,.scrollcue{opacity:1}
  .frame.par img{height:100%;top:0;position:relative}
}

/* ============================================================
   ENQUIRY JOURNEY
   ============================================================ */
.inq{padding-block:calc(clamp(96px,12vw,150px)) clamp(70px,9vw,130px)}
.inq-h{font-size:clamp(40px,7vw,96px);line-height:.9;letter-spacing:-.045em;margin-top:14px}
.step{animation:stepin .5s var(--ease)}
@keyframes stepin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.backlink{background:none;border:0;padding:0 0 18px;color:var(--ink-3);cursor:pointer;
  font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;transition:color .25s}
.backlink:hover{color:var(--pink)}
.opt-tag{font-weight:500;letter-spacing:.06em;text-transform:none;color:var(--ink-3);opacity:.75}

/* service picker */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(30px,4vw,52px)}
.svc-card{position:relative;display:block;text-align:left;background:none;border:0;padding:0;cursor:pointer;
  overflow:hidden;transition:transform .4s var(--ease)}
.svc-card:hover{transform:translateY(-5px)}
.svc-ph{display:block;position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--blush)}
.svc-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .4s}
.svc-card:hover .svc-ph img{transform:scale(1.06)}
.svc-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(28,26,26,.8));transition:opacity .4s}
.svc-tx{position:absolute;left:0;right:0;bottom:0;padding:18px;color:#fff;z-index:2}
.svc-tx b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(19px,1.9vw,25px);letter-spacing:-.025em;line-height:1.05}
.svc-tx em{display:block;font-style:normal;font-size:13px;color:#E9D5DA;margin-top:6px;max-width:30ch;
  opacity:0;max-height:0;transition:opacity .35s var(--ease),max-height .35s var(--ease)}
.svc-card:hover .svc-tx em,.svc-card:focus-visible .svc-tx em{opacity:1;max-height:60px}
.svc-card[aria-pressed="true"] .svc-ph{outline:3px solid var(--pink);outline-offset:-3px}

/* form */
.inq-form{margin-top:clamp(26px,3vw,40px)}
.inq-form .note{margin-top:4px}

/* confirmation */
.done{max-width:56ch}
.tick{width:64px;height:64px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;
  font-size:30px;margin-bottom:22px;animation:pop .5s var(--ease) .1s both}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

/* email preview */
.mailwrap{margin-top:clamp(52px,7vw,96px);padding-top:clamp(34px,4vw,54px);border-top:1px solid var(--rule)}
.mail{max-width:640px;margin:22px auto 0;background:var(--paper);border:1px solid var(--rule);
  box-shadow:0 30px 70px -44px rgba(44,6,17,.5);overflow:hidden}
.m-chrome{background:var(--bone);border-bottom:1px solid var(--rule);padding:14px 22px;display:grid;gap:3px}
.m-from{font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}
.m-subj{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.02em}
.m-body{padding:clamp(22px,3.4vw,38px)}
.m-logo{display:flex;align-items:center;justify-content:center;gap:.28em;font-family:var(--f-mark);
  font-size:23px;color:var(--ink-2);margin-bottom:22px}
.m-logo img{height:1.22em;width:auto}
.m-hero{margin:0 0 24px;aspect-ratio:16/9;overflow:hidden;background:var(--blush)}
.m-hero img{width:100%;height:100%;object-fit:cover}
.m-body p{font-size:15.5px;line-height:1.66;color:var(--ink-2);margin-bottom:14px}
.m-hi{font-family:var(--f-display);font-weight:700;font-size:20px;color:var(--ink);letter-spacing:-.02em}
.m-after{font-size:13.5px !important;color:var(--ink-3) !important}

.m-tiers{display:grid;gap:12px;margin:22px 0}
.m-tier{border:1px solid var(--rule);padding:16px 18px}
.m-tier-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.m-tier-h b{font-family:var(--f-display);font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-.02em}
.m-tier-h span{font-family:var(--f-display);font-weight:800;font-size:23px;color:var(--pink);letter-spacing:-.03em}
.m-tier ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.m-tier li{font-size:13.5px;color:var(--ink-2);padding-left:15px;position:relative}
.m-tier li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--pink)}

.m-steps{margin:22px 0;padding:0;list-style:none;counter-reset:st;display:grid;gap:13px}
.m-steps li{counter-increment:st;position:relative;padding-left:38px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.m-steps li::before{content:counter(st);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;
  background:var(--blush);color:var(--pink-deep);display:grid;place-items:center;font-weight:700;font-size:12px}

.m-flag{background:var(--blush);border-left:3px solid var(--pink);padding:14px 16px;margin:20px 0;
  font-size:13px;line-height:1.55;color:var(--pink-deep)}
.m-cta{margin:26px 0 22px}
.m-cta span{display:inline-block;background:var(--ink);color:var(--bone);padding:15px 26px;border-radius:999px;
  font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase}
.m-sign{font-size:15px !important;color:var(--ink-2) !important}
.m-sign em{font-style:normal;font-size:13px;color:var(--ink-3)}
.m-foot{border-top:1px solid var(--rule);margin-top:22px;padding-top:16px;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);text-align:center}

/* misc additions */
.love.solo{max-width:70ch;margin-inline:auto;border:0;background:none;text-align:center;align-items:center}
.love.solo p{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.34;
  letter-spacing:-.02em;color:var(--ink)}
.love.solo footer{border-top:0;justify-content:center}
.note.light{color:#C4A9B0;border-left-color:var(--pink)}
.pkg .nm{margin-bottom:4px}

@media (max-width:900px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc-tx em{opacity:1;max-height:60px}
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr 1fr;gap:9px}
  .svc-ph{aspect-ratio:3/4}
  .svc-tx{padding:13px}
  .svc-tx em{display:none}
  .mail{margin-inline:calc(var(--gut) * -0.5)}
  .m-tier-h{flex-direction:column;gap:2px}
}

/* ============================================================
   REVIEW TOOL — never shown to a client
   ============================================================ */
.reviewbar{margin-top:clamp(50px,6vw,84px);border-top:2px dashed var(--rule);padding-top:26px}
.rb-head{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between;
  background:var(--ink);color:#DCD5D3;padding:20px 24px;border-radius:3px}
.rb-tag{font-weight:700;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--pink);margin:0}
.rb-line{font-size:14px;color:#B4ABA9;margin:6px 0 0;max-width:46ch}
.rb-btns{display:flex;flex-wrap:wrap;gap:10px}
.rb-btns .btn-out{border-color:rgba(255,255,255,.45);color:#fff}
.rb-btns .btn-out::before{background:#fff}
.rb-btns .btn-out:hover{color:var(--ink)}
.rb-btns .btn-ink{background:var(--pink);color:#fff}
.rb-btns .btn-ink::before{background:#fff}
.rb-btns .btn-ink:hover{color:var(--ink)}

.mailgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(22px,3vw,44px);
  align-items:start;margin-top:30px}
.mailgrid .mail{margin:14px 0 0;max-width:none}
.flags ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.flags li{font-size:13.5px;line-height:1.55;color:var(--ink-2);background:var(--paper);
  border:1px solid var(--rule);border-left:3px solid var(--ink-3);padding:13px 15px}
.flags li b{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px}
.flags li.ok{border-left-color:#5B8C6E}
.flags li.ok b{color:#4A7A5C}
.flags li.warn{border-left-color:var(--pink);background:var(--blush)}
.flags li.warn b{color:var(--pink-deep)}
.flag-foot{margin-top:14px;font-size:12px;color:var(--ink-3)}

/* wall-art credit chip inside an email tier */
.m-bonus{margin-top:11px;padding:9px 12px;background:var(--blush);color:var(--pink-deep);
  font-size:12.5px;line-height:1.4;border-radius:2px}
.m-bonus b{font-weight:700}

@media (max-width:900px){
  .mailgrid{grid-template-columns:1fr}
  .rb-head{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   v3 — BLUEE favourites, quiet index strip, duo billing
   ============================================================ */

/* hero: local muted loop */
.vhero-media .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s ease}
.vhero-media .bgvid.show{opacity:1}
.vhero{background:var(--berry) center/cover no-repeat}

/* quiet replacement for the old moving banner */
.index-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  border-block:1px solid var(--rule);background:var(--paper)}
.index-strip a{flex:1 1 auto;text-align:center;padding:20px 14px;text-decoration:none;
  font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  border-left:1px solid var(--rule);transition:color .3s var(--ease),background-color .3s var(--ease)}
.index-strip a:first-child{border-left:0}
.index-strip a:hover{color:var(--pink);background:var(--blush)}

/* two-up billing for Sabrina + Andrea */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,48px)}
.duo h3{font-size:clamp(26px,3.2vw,42px);margin-top:18px}
.duo .role{font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--pink-deep);margin-top:7px}
.duo .lede{font-size:16px;margin-top:12px}

/* three-up featured films */
.films.three{grid-template-columns:repeat(3,1fr)}
.pl iframe.prev{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;
  transform:scale(1.35);transform-origin:center}

/* mid-weight section heading for in-page category breaks */
.h-mid{font-size:clamp(30px,4.4vw,60px) !important}

/* senior photo strip inside the private email */
.m-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:20px 0 24px}
.m-strip img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:var(--blush)}

/* the "both of us" question */
.duo-ask{background:var(--blush);padding:20px 22px;border-radius:3px}
.duo-ask .opt span{background:var(--paper)}
.mini{font-size:12.5px;color:var(--pink-deep);margin-top:12px}

@media (max-width:900px){
  .films.three{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr;gap:34px}
  .index-strip a{flex:1 1 33%;border-top:1px solid var(--rule);padding:16px 10px}
}
@media (max-width:620px){
  .films.three{grid-template-columns:1fr}
  .index-strip a{flex:1 1 50%;font-size:10px;letter-spacing:.16em}
}

/* ============================================================
   v4 — collage hero, sticky services bar, curated grid, Studio
   ============================================================ */
:root{--navh:54px}

/* anchors clear both the fixed nav and the sticky services bar */
section,[id]{scroll-margin-top:calc(var(--navh) + 74px)}

/* ---------- sticky services bar ---------- */
.svcbar{position:sticky;top:var(--navh);z-index:120;display:flex;flex-wrap:nowrap;overflow-x:auto;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--rule);scrollbar-width:none}
.svcbar::-webkit-scrollbar{display:none}
.svcbar a{flex:1 0 auto;text-align:center;padding:15px 20px;text-decoration:none;white-space:nowrap;
  font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  border-left:1px solid var(--rule);transition:color .28s var(--ease),background-color .28s var(--ease)}
.svcbar a:first-child{border-left:0}
.svcbar a:hover{color:var(--pink);background:var(--blush)}
.svcbar.stuck{box-shadow:0 10px 26px -20px rgba(44,6,17,.5)}
.index-strip{display:none}

/* ---------- hero collage ---------- */
.collage{position:absolute;inset:0;display:grid;gap:4px;
  grid-template-columns:.85fr 1.55fr .85fr;grid-template-rows:1fr 1fr}
.cc{overflow:hidden;background:var(--berry-2);position:relative}
.cc-a{grid-column:1;grid-row:1/3}
.cc-b{grid-column:2;grid-row:1/3}
.cc-c{grid-column:3;grid-row:1}
.cc-d{grid-column:3;grid-row:2}
.cc video,.cc img{width:100%;height:100%;object-fit:cover;display:block}
.cc video{opacity:0;transition:opacity 1s ease}
.cc video.show{opacity:1}
.vhero::after{background:
  linear-gradient(180deg,rgba(28,26,26,.5) 0%,rgba(28,26,26,.14) 28%,rgba(28,26,26,.5) 64%,rgba(28,26,26,.93) 100%),
  linear-gradient(90deg,rgba(28,26,26,.54) 0%,rgba(28,26,26,.08) 50%,rgba(28,26,26,0) 74%)}

/* ---------- headline switcher (review control) ---------- */
.hl-switch{position:absolute;right:var(--gut);top:calc(var(--navh) + 26px);z-index:6;
  display:flex;align-items:center;gap:6px;background:rgba(28,26,26,.62);backdrop-filter:blur(8px);
  padding:7px 9px 7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2)}
.hl-tag{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#E4D2D7}
.hl-tag b{color:var(--pink)}
.hl-switch button{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:transparent;color:#fff;cursor:pointer;font-size:15px;line-height:1;transition:.22s}
.hl-switch button:hover{background:var(--pink);border-color:var(--pink)}

/* ---------- curated editorial grid ---------- */
.curated{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.1vw,18px)}
.curated .tile{grid-column:auto;aspect-ratio:auto;margin:0}
.curated .c-a{grid-column:span 8;aspect-ratio:3/2}
.curated .c-b{grid-column:span 4;grid-row:span 2}
.curated .c-c{grid-column:span 4;aspect-ratio:1/1}
.curated .c-d{grid-column:span 4;aspect-ratio:1/1}
.curated .c-e{grid-column:span 6;aspect-ratio:3/2}
.curated .c-f{grid-column:span 6;aspect-ratio:3/2}

/* ---------- homepage duo (two portraits + copy) ---------- */
.duo{grid-template-columns:repeat(3,1fr);align-items:start}
.duo .duo-copy{padding-top:4px}

/* ---------- banner video ---------- */
.banner .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
.banner .bgvid.show{opacity:.85}

/* ---------- studio ---------- */
.studio-steps{margin:0;counter-reset:st}
.studio-steps li{font-size:16px}

@media (max-width:1080px){
  .duo{grid-template-columns:1fr 1fr}
  .duo .duo-copy{grid-column:1/-1;margin-top:8px}
}
@media (max-width:900px){
  .collage{grid-template-columns:1fr;grid-template-rows:1fr;gap:0}
  .cc-a,.cc-c,.cc-d{display:none}
  .cc-b{grid-column:1;grid-row:1}
  .hl-switch{right:auto;left:var(--gut);padding:6px 8px 6px 12px}
  .hl-tag{font-size:9px;letter-spacing:.1em}
  .curated .c-a,.curated .c-b,.curated .c-c,.curated .c-d,.curated .c-e,.curated .c-f{
    grid-column:span 6;grid-row:auto;aspect-ratio:1/1}
  .curated .c-a{grid-column:span 12;aspect-ratio:3/2}
}
@media (max-width:620px){
  .svcbar a{padding:13px 16px;font-size:10px;letter-spacing:.16em}
  .curated .c-b,.curated .c-c,.curated .c-d,.curated .c-e,.curated .c-f{grid-column:span 12;aspect-ratio:3/2}
  .duo{grid-template-columns:1fr}
}

/* ============================================================
   v5 — single rotating hero, locked headline
   ============================================================ */
.hero-rot{position:absolute;inset:0;overflow:hidden;background:var(--berry-2)}
.hero-rot .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.hero-rot .slide.on{opacity:1}
.hero-rot img,.hero-rot video{width:100%;height:100%;object-fit:cover;display:block}
.hero-rot .slide.on img{animation:kenburns 11s linear both}
@keyframes kenburns{from{transform:scale(1.005)}to{transform:scale(1.075)}}

.rot-dots{position:absolute;left:var(--gut);bottom:calc(clamp(46px,7vw,86px) - 26px);z-index:6;display:flex;gap:7px}
.rot-dots button{width:22px;height:3px;border:0;padding:0;border-radius:2px;cursor:pointer;
  background:rgba(255,255,255,.34);transition:background-color .35s var(--ease),width .35s var(--ease)}
.rot-dots button[aria-current="true"]{background:var(--pink);width:34px}

/* locked headline */
.hero-lock{font-size:clamp(38px,6.6vw,104px);line-height:.94;letter-spacing:-.042em;max-width:15ch}
.hero-lock .ln.l3{font-size:.74em}
.hero-lock em{font-style:normal;color:var(--pink)}

@media (max-width:900px){
  .hero-rot .slide.on img{animation-duration:13s}
  .rot-dots{bottom:calc(clamp(46px,7vw,86px) - 30px)}
  .hero-lock{max-width:none;font-size:clamp(34px,8.6vw,60px)}
}

/* ============================================================
   v6 — refined two-line headline (imagery leads, type supports)
   ============================================================ */
.vhero h1.hero-lock{
  font-family:var(--f-display);
  font-weight:500;                       /* was 800 — far calmer at this size */
  font-size:clamp(22px,2.85vw,40px);
  line-height:1.24;
  letter-spacing:-.005em;
  max-width:22ch;
  margin-top:26px;
  text-shadow:0 2px 26px rgba(20,3,9,.42);
}
.vhero h1.hero-lock .ln.l3{font-size:1em}
.vhero h1.hero-lock em{font-style:normal;color:var(--pink)}
.vhero-in .eyebrow{margin-bottom:0}
.vhero h1.hero-lock + .vhero-cta{margin-top:34px}
/* a touch more room around the type now that it is quieter */
.vhero-in{padding-bottom:clamp(54px,8vw,104px)}

@media (max-width:900px){
  .vhero h1.hero-lock{font-size:clamp(21px,5.4vw,30px);line-height:1.26;max-width:20ch;margin-top:20px}
  .vhero h1.hero-lock + .vhero-cta{margin-top:26px}
}
@media (max-width:420px){
  .vhero h1.hero-lock{font-size:20px;max-width:18ch}
}

/* ============================================================
   PRIVATE PRICING GUIDES
   ============================================================ */
body.guide{background:var(--bone)}
.ghead{border-bottom:1px solid var(--rule);background:var(--paper)}
.ghead-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:18px;flex-wrap:wrap}
.gbadge{font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink-deep);
  background:var(--blush);padding:8px 13px;border-radius:999px;white-space:nowrap}

.gintro{padding-block:clamp(40px,6vw,86px) clamp(26px,3vw,40px)}
.gintro h1{font-family:var(--f-display);font-weight:500;font-size:clamp(34px,5.2vw,72px);
  line-height:1.06;letter-spacing:-.03em;margin-top:14px}
.gintro .lede{margin-top:18px;max-width:54ch}

.gtabs{position:sticky;top:0;z-index:120;display:flex;overflow-x:auto;scrollbar-width:none;
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--rule)}
.gtabs::-webkit-scrollbar{display:none}
.gtab{flex:1 0 auto;padding:16px 26px;background:none;border:0;border-left:1px solid var(--rule);cursor:pointer;
  font-weight:600;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap;transition:.26s var(--ease)}
.gtab:first-child{border-left:0}
.gtab:hover{color:var(--ink);background:var(--blush)}
.gtab[aria-pressed="true"]{background:var(--ink);color:var(--bone)}

.gmain{padding-block:clamp(34px,5vw,72px) clamp(56px,8vw,110px)}
.gpanel{animation:stepin .45s var(--ease)}
.gsec-head{margin-bottom:clamp(22px,3vw,38px)}
.gsec-head h2{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,4vw,54px);
  letter-spacing:-.03em;margin-top:12px}
.gsec-head .lede{margin-top:14px}

.gstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:clamp(8px,1vw,14px);
  margin-bottom:clamp(28px,3.4vw,48px)}
.gstrip .tile{aspect-ratio:4/5;grid-column:auto;margin:0}

.gcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(14px,1.6vw,24px)}
.gcard{background:var(--paper);border:1px solid var(--rule);padding:clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column;gap:14px;transition:.35s var(--ease)}
.gcard:hover{border-color:var(--pink);transform:translateY(-3px);box-shadow:0 24px 52px -34px rgba(44,6,17,.42)}
.gcard-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.gcard-h b{font-family:var(--f-display);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.02em}
.gcard-h span{font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3vw,40px);
  color:var(--pink);letter-spacing:-.04em;line-height:1}
.gcard ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.gcard li{font-size:14.5px;color:var(--ink-2);padding-left:16px;position:relative}
.gcard li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--pink)}
.gcard li:only-child,.gcard li:empty{display:none}
.gcard .btn{margin-top:auto;align-self:flex-start}
.gmain .note{margin-top:clamp(22px,3vw,34px)}

.gawait{background:var(--blush);border-left:3px solid var(--pink);padding:clamp(22px,3vw,34px);max-width:70ch}
.gawait-tag{font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pink-deep);margin:0}
.gawait h3{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.4vw,28px);margin-top:10px;letter-spacing:-.02em}
.gawait p{font-size:15px;color:var(--ink-2);margin-top:12px}
.gawait ul{margin:14px 0 20px;padding:0;list-style:none;display:grid;gap:8px}
.gawait li{font-size:14.5px;color:var(--ink-2);padding-left:18px;position:relative}
.gawait li::before{content:"→";position:absolute;left:0;color:var(--pink);font-size:13px}

@media (max-width:620px){
  .gtab{padding:14px 18px;font-size:10px;letter-spacing:.16em}
  .gstrip{grid-template-columns:1fr 1fr}
  .gbadge{font-size:9px;letter-spacing:.16em}
}

/* ============================================================
   EXPANDED GALLERIES · PRINTS · BOOKING DEMO
   ============================================================ */
.gstrip .tile.gx{display:none}
.viewall{margin-top:18px}
.gstrip{margin-bottom:0}
.gcards{margin-top:clamp(26px,3vw,40px)}

/* prints */
.printsec{margin-top:clamp(48px,6vw,88px);padding-top:clamp(36px,4vw,60px);border-top:1px solid var(--rule)}
.printgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(10px,1.2vw,18px);margin:clamp(22px,3vw,34px) 0}
.printgrid .tile{aspect-ratio:3/4;margin:0;grid-column:auto;background:var(--paper)}
.printgrid .tile img{object-fit:contain;background:var(--paper)}
.pkg-note{background:var(--blush);border-left:3px solid var(--pink);padding:18px 20px;margin-top:8px}
.pkg-note p{font-size:14px;color:var(--ink-2);margin-top:8px}
.alacarte{margin-top:26px;border:1px solid var(--rule);background:var(--paper)}
.alacarte summary{cursor:pointer;padding:16px 20px;font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink)}
.alacarte[open] summary{border-bottom:1px solid var(--rule)}
.ac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;padding:22px 20px 4px}
.ac-grid h4{margin:0 0 10px;font-family:var(--f-body);font-weight:700;font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--pink-deep)}
.ac-grid ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.ac-grid li{font-size:14px;color:var(--ink-2)}
.alacarte .note{margin:0 20px 20px}

/* booking demo */
.bsteps{position:sticky;top:0;z-index:120;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-block:1px solid var(--rule)}
.bsteps ol{display:flex;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);list-style:none;overflow-x:auto;scrollbar-width:none}
.bsteps ol::-webkit-scrollbar{display:none}
.bsteps li{flex:1 0 auto;display:flex;align-items:center;gap:8px;padding:15px 22px 15px 0;white-space:nowrap;
  font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.bsteps li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--rule);
  color:var(--ink-3);font-size:11px}
.bsteps li.on{color:var(--ink)} .bsteps li.on b{background:var(--pink);color:#fff}
.bsteps li.did b{background:var(--ink);color:#fff}
/* A clickable progress bar. Steps the client can reach look and behave like
   controls; steps still gated by the contract or the model release are shown
   as unavailable rather than silently doing nothing. */
.bsteps li.nav-open{cursor:pointer}
.bsteps li.nav-open:hover{color:var(--ink)}
.bsteps li.nav-open:hover b{background:var(--pink-deep);color:#fff}
.bsteps li.nav-shut{cursor:not-allowed;opacity:.5}
.bsteps li:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}
.bwrap{padding-block:clamp(34px,5vw,64px) clamp(60px,8vw,110px)}
.bstep h2{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,4vw,52px);letter-spacing:-.03em;margin-bottom:20px}
.bnav{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;align-items:center}
.bsummary,.donecard{background:var(--paper);border:1px solid var(--rule);padding:clamp(20px,2.4vw,30px)}
.bs-row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px}
.bs-row:last-of-type{border-bottom:0}
.bs-row span{color:var(--ink-3)} .bs-row b{color:var(--ink);text-align:right}
.bs-price{font-family:var(--f-display);font-size:22px;color:var(--pink)!important}
.bs-note{margin-top:14px;font-size:13px;color:var(--ink-3)}
.legalflag{background:var(--blush);border-left:3px solid var(--pink);padding:15px 18px;margin:18px 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.legalflag b{display:block;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--pink-deep);margin-bottom:6px}
.legalflag code{background:var(--paper);padding:1px 5px;font-size:12.5px}
.doc{background:var(--paper);border:1px solid var(--rule);padding:clamp(20px,2.4vw,30px);max-height:340px;overflow-y:auto}
.doc h3{font-family:var(--f-body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin:18px 0 7px}
.doc h3:first-child{margin-top:0}
.doc p{font-size:14.5px;color:var(--ink-2)}
.doc p.ph{color:var(--pink-deep);background:var(--blush);padding:9px 12px;font-size:13.5px}
.agree{display:flex;gap:11px;align-items:flex-start;margin:20px 0;font-size:15px;cursor:pointer;max-width:60ch}
.agree input{margin-top:3px;width:18px;height:18px;accent-color:var(--pink);flex:0 0 auto}
.opts.col{flex-direction:column;align-items:stretch}
.opt.wide span{text-align:left;text-transform:none;letter-spacing:.01em;font-size:14.5px;font-weight:400;
  padding:15px 18px;line-height:1.5}
.opt.wide span b{font-weight:700;color:var(--ink)}
.opt.wide input:checked + span{background:var(--blush);border-color:var(--pink);color:var(--ink-2)}
.opt.chk span{text-transform:none;letter-spacing:.02em;font-size:13.5px}
.invoice{background:var(--paper);border:1px solid var(--rule)}
.inv-head{display:flex;justify-content:space-between;align-items:baseline;padding:16px 20px;border-bottom:1px solid var(--rule);background:var(--bone)}
.inv-head b{font-family:var(--f-display);font-size:17px;color:var(--ink)}
.inv-head span{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--pink-deep)}
.inv-row{display:flex;justify-content:space-between;gap:18px;padding:13px 20px;border-bottom:1px solid var(--rule);font-size:15px}
.inv-row.sub{color:var(--ink-3);font-size:13.5px}
.inv-row.total b{font-weight:700}
.inv-row.due{background:var(--blush)}
.inv-row.due b{font-family:var(--f-display);font-size:21px;color:var(--pink)}
.inv-row:last-child{border-bottom:0}
#b5 .tick{margin-bottom:20px}

@media (max-width:620px){
  .printgrid{grid-template-columns:1fr}
  /* Five steps across 375px came to 589px, so Deposit and Request Sent sat
     off the right edge. They wrap onto a second line instead: every step
     stays visible and the page still never scrolls sideways. */
  .bsteps ol{flex-wrap:wrap;overflow-x:visible;row-gap:2px;padding-block:4px}
  .bsteps li{flex:0 1 auto;padding:9px 14px 9px 0;font-size:9.5px;letter-spacing:.1em}
  .bsteps li b{width:19px;height:19px;font-size:10px}
}

/* ============================================================
   FOUR-UP CAROUSEL · SIMPLIFIED PRINTS
   ============================================================ */
.gcar{position:relative}
.gcar .gstrip{grid-template-columns:repeat(4,1fr)}
.gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--rule);background:rgba(255,255,255,.94);color:var(--ink);font-size:22px;line-height:1;
  cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 22px -12px rgba(44,6,17,.4);
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.gnav:hover{background:var(--pink);border-color:var(--pink);color:#fff;transform:translateY(-50%) scale(1.06)}
.gnav.prev{left:-14px} .gnav.next{right:-14px}
.gcar-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-top:16px}
.gcount{font-weight:600;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}

/* simplified print section */
.printsplit{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3.4vw,54px);align-items:center}
.printhero{aspect-ratio:3/4;margin:0;grid-column:auto;background:var(--paper)}
.printhero img{object-fit:contain;background:var(--paper)}
.printh{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,3.4vw,46px);letter-spacing:-.03em;margin-top:12px}

@media (max-width:900px){
  .gcar .gstrip{grid-template-columns:repeat(2,1fr)}
  .gnav.prev{left:-8px} .gnav.next{right:-8px}
  .printsplit{grid-template-columns:1fr}
  .printhero{max-width:420px}
}
@media (max-width:620px){
  .gnav{width:40px;height:40px;font-size:19px}
  .gnav.prev{left:-6px} .gnav.next{right:-6px}
  .gcar-foot{justify-content:flex-start}
}

/* ============================================================
   COLOUR SEPARATION BAND · REVIEW TOGGLE · HERO CROSSFADE
   ============================================================ */
:root{--sep-bg:#FBEEEE;--sep-ink:#A8546C;--sep-rule:#F0D7DE}
body.sep-yellow{--sep-bg:#FDF4DC;--sep-ink:#8A6B1C;--sep-rule:#F2E3BE}

.cband{display:flex;align-items:center;gap:clamp(12px,2vw,26px);margin:clamp(30px,4vw,52px) 0 clamp(26px,3vw,40px)}
.cb-rule{flex:1;height:8px;border-radius:4px;background:
  repeating-linear-gradient(90deg,var(--sep-rule) 0 10px,transparent 10px 20px);opacity:.9}
.cb-pill{display:inline-flex;align-items:center;gap:10px;background:var(--sep-bg);color:var(--sep-ink);
  padding:11px 20px;border-radius:999px;white-space:nowrap;
  font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase}
.cb-pill img{height:16px;width:auto;opacity:.85}

.ghead-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* A quiet way back to Collections from anywhere in the booking flow. It is
   navigation, not an action: secondary weight, so it never competes with the
   Continue button, and it touches no booking state. */
.btn-xs{padding:8px 15px;font-size:10px;letter-spacing:.16em}
.ghead-back{white-space:nowrap}
@media (max-width:620px){
  /* the badge is the thing that can go; the way out stays */
  .ghead-right .gbadge{display:none}
  .ghead-back{padding:8px 13px;font-size:9.5px;letter-spacing:.13em}
}
.septoggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);border-radius:999px;padding:4px 4px 4px 12px}
.sep-lab{font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.septoggle button{border:0;background:none;cursor:pointer;padding:6px 12px;border-radius:999px;
  font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);transition:.2s}
.septoggle button[aria-pressed="true"]{background:var(--sep-bg);color:var(--sep-ink)}

/* hero: poster underlay kills black frames between media */
.hero-rot .slide{background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-rot .slide video{opacity:0;transition:opacity .7s ease}
.hero-rot .slide.on video.ready{opacity:1}

@media (max-width:620px){
  .cb-pill{font-size:9.5px;letter-spacing:.14em;padding:10px 14px}
  .septoggle{display:none}
}

/* ============================================================
   ALIGNED EDITORIAL ROWS
   Every cell is 4 grid-units tall, so any row summing to 12
   ends on exactly the same baseline — varied sizes, clean edges.
   ============================================================ */
.rows{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1vw,16px)}
.rows .tile{margin:0;grid-column:auto;aspect-ratio:auto}
.rows .r-3{grid-column:span 3;aspect-ratio:3/4}
.rows .r-4{grid-column:span 4;aspect-ratio:1/1}
.rows .r-5{grid-column:span 5;aspect-ratio:5/4}
.rows .r-6{grid-column:span 6;aspect-ratio:3/2}
.rows .r-7{grid-column:span 7;aspect-ratio:7/4}
.rows .r-8{grid-column:span 8;aspect-ratio:2/1}
.rows .r-12{grid-column:span 12;aspect-ratio:3/1}
/* favour faces: subjects usually sit above centre */
.rows .tile img{object-position:center 38%}

@media (max-width:900px){
  .rows .r-3,.rows .r-4,.rows .r-5{grid-column:span 6;aspect-ratio:1/1}
  .rows .r-6,.rows .r-7,.rows .r-8,.rows .r-12{grid-column:span 12;aspect-ratio:3/2}
}
@media (max-width:560px){
  .rows .r-3,.rows .r-4,.rows .r-5{grid-column:span 6;aspect-ratio:3/4}
  .rows .r-6,.rows .r-7,.rows .r-8,.rows .r-12{grid-column:span 12;aspect-ratio:4/3}
}

/* ============================================================
   FAVORITES GALLERY · DEMO PRINT SHOP · ABOUT PORTRAITS
   ============================================================ */
.portraitframe{aspect-ratio:4/5;overflow:hidden;background:var(--blush)}
.portraitframe img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

.artgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(16px,2.2vw,34px)}
.arttile{display:block;text-decoration:none}
.art-ph{display:block;overflow:hidden;background:var(--blush);aspect-ratio:4/5}
.art-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.arttile:hover .art-ph img{transform:scale(1.04)}
.art-meta{display:block;padding-top:13px}
.art-meta b{display:block;font-family:var(--f-display);font-weight:700;font-size:16.5px;color:var(--ink);letter-spacing:-.015em}
.art-meta em{display:block;font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}

.prod{padding-block:clamp(34px,5vw,70px) clamp(70px,9vw,120px)}
.prodgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,66px);align-items:start}
.wallroom{position:relative;background:linear-gradient(175deg,#EFE9E4,#E4DCD5);padding:clamp(30px,5vw,62px);
  display:grid;place-items:center;min-height:340px;border-radius:2px}
.wall-frame{background:#6B4A2F;padding:clamp(10px,1.4vw,17px);box-shadow:0 22px 44px -22px rgba(40,24,12,.55);
  max-width:min(100%,460px)}
.wall-frame .wf-mat{background:#FBFAF8;padding:clamp(12px,1.8vw,22px)}
.wall-frame img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.wall-frame.portrait img{aspect-ratio:2/3}
.wall-frame.portrait{max-width:min(100%,320px)}
.wall-side{position:absolute;left:0;right:0;bottom:0;height:16%;background:linear-gradient(#DCD3CB,#CFC5BC)}
.prod-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.prod-thumbs .tile{aspect-ratio:4/5;margin:0;grid-column:auto;background:var(--paper)}
.prod-thumbs .tile img{object-fit:contain;background:var(--paper)}

.prod-info h1{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,3.6vw,48px);letter-spacing:-.03em;margin-top:12px}
.prod-place{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:9px}
.spec{margin-top:24px;border-top:1px solid var(--rule)}
.spec-row{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--rule);font-size:15px}
.spec-row span{color:var(--ink-3)}
.spec-row b{color:var(--ink);text-align:right}
.price-tbc{color:var(--pink)!important;font-family:var(--f-display);font-size:18px}
.qty-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.qty-row label{font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-3)}
.qty-row input{width:74px;padding:13px 12px;border:1.5px solid var(--rule);border-radius:2px;font:inherit;font-size:16px}
.needs{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.needs li{font-size:14.5px;line-height:1.55;color:var(--ink-2);padding-left:18px;position:relative}
.needs li::before{content:"→";position:absolute;left:0;color:var(--pink)}
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:140;background:var(--ink);color:#fff;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;
  padding:14px var(--gut) calc(14px + env(safe-area-inset-bottom,0px));font-size:14px}
.cartbar .tbc{color:#D79FB0}
.cartbar .btn-out{border-color:rgba(255,255,255,.45);color:#fff}
.cartbar .btn-out::before{background:#fff}
.cartbar .btn-out:hover{color:var(--ink)}

@media (max-width:900px){
  .prodgrid{grid-template-columns:1fr}
  .artgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media (max-width:560px){
  .artgrid{grid-template-columns:1fr 1fr;gap:12px}
  .art-meta b{font-size:14px}
}

/* ---------- wedding team: fixed default + one optional toggle ---------- */
.teamline{font-size:16px;color:var(--ink-2);background:var(--paper);border:1px solid var(--rule);
  padding:15px 18px;border-radius:2px}
.teamline b{color:var(--ink)}
.teamline.isduo{background:var(--blush);border-color:var(--pink)}
.teamline.isduo b{color:var(--pink-deep)}
.duotoggle{display:inline-flex;align-items:center;gap:11px;margin-top:14px;cursor:pointer;
  background:none;border:1.5px solid var(--ink);border-radius:999px;padding:13px 22px;color:var(--ink);
  font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;transition:.25s var(--ease)}
.duotoggle .dt-box{width:16px;height:16px;border:1.5px solid currentColor;border-radius:3px;display:grid;
  place-items:center;flex:0 0 auto;transition:.2s}
.duotoggle .dt-box::after{content:"✓";font-size:11px;opacity:0;transition:.2s}
.duotoggle:hover{border-color:var(--pink);color:var(--pink)}
.duotoggle.on{background:var(--pink);border-color:var(--pink);color:#fff}
.duotoggle.on .dt-box::after{opacity:1}
/* no mat in the framed mockup */
.wall-frame .wf-mat{background:transparent;padding:0}

/* ---------- supplier research panel ---------- */
.ok-tag,.warn-tag{font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin:0}
.ok-tag{color:#4A7A5C}
.warn-tag{color:var(--pink-deep)}
.margin-tbl{border:1px solid var(--rule);background:var(--paper)}
.mt-row{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr 1fr;gap:8px;padding:11px 14px;
  border-bottom:1px solid var(--rule);font-size:14px;font-variant-numeric:tabular-nums}
.mt-row:last-child{border-bottom:0}
.mt-head{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:var(--bone)}
.mt-row.hl{background:var(--blush)}
.mt-row.hl span{color:var(--pink-deep);font-weight:600}
@media (max-width:560px){.mt-row{grid-template-columns:1fr 1fr 1fr;font-size:12.5px}
  .mt-row span:nth-child(3){display:none}}

/* ---------- price on gallery tiles + product ---------- */
.art-price{display:block;font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--pink-deep);margin-top:6px}
.price-live{font-family:var(--f-display);font-weight:800;font-size:24px;color:var(--pink)!important;letter-spacing:-.03em}
.ck-h{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.025em;
  margin:clamp(34px,4vw,52px) 0 14px;padding-top:22px;border-top:1px solid var(--rule)}

/* ---- contract step: provenance tags, retainer box ---- */
.tag-prop,.tag-conf{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;padding:2px 7px;border-radius:3px;margin-right:7px;vertical-align:1px}
.tag-prop{background:var(--blush);color:var(--pink-deep);border:1px solid var(--pink)}
.tag-conf{background:#fdf0e7;color:#9a4a12;border:1px solid #e2a878}
.doc p.existing{border-left:2px solid var(--rule);padding-left:14px;color:var(--ink-2)}
.doc p.conflict{background:#fdf6f1;border:1px solid #e9cdb5;border-radius:4px;padding:11px 14px}
.doc p.note-sm{font-size:13.5px;color:var(--ink-3);font-style:italic}
.retbox{display:flex;flex-wrap:wrap;gap:0;margin:0 0 24px;border:1px solid var(--rule);border-radius:4px;
  overflow:hidden;background:var(--paper)}
.retbox>div{flex:1 1 160px;padding:14px 18px;display:flex;flex-direction:column;gap:4px;
  border-right:1px solid var(--rule)}
.retbox>div:last-child{border-right:0}
.retbox span{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.retbox b{font-family:var(--f-display);font-size:clamp(19px,2vw,25px);letter-spacing:-.02em}
.duedate{margin:-14px 0 24px;font-size:14px;color:var(--ink-2)}
.duedate.warn{color:#9a4a12;font-weight:600}
.req{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--pink-deep);margin-left:6px}

/* ---------- required-field language -------------------------------------
   One rule for the whole booking flow: a pink asterisk marks a field the
   client must fill, a soft pink border marks one still waiting, and a
   completed field returns to the ordinary neutral border. Red is reserved
   for an actual refusal after they try to continue. */
.rq{color:var(--pink);font-weight:600;margin-left:2px}
.reqnote{font-size:12px;letter-spacing:.04em;color:var(--ink);opacity:.62;margin:0 0 16px}
.opt-tag{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);opacity:.5;margin-left:6px}
.fld input.needs,.fld select.needs{border-color:var(--pink)}
.calwrap.needs{border:1.5px solid var(--pink);border-radius:2px}
/* The agreement is its own bordered box so the required state cannot bleed
   into the signature label underneath it. The two states are independent. */
.agreebox{border:1.5px solid var(--rule);border-radius:3px;padding:14px 16px;
  margin:20px 0 26px;max-width:60ch;transition:border-color .25s}
.agreebox.needs{border-color:var(--pink)}
.agreebox .agree{margin:0}

/* ---------- condensed booking step ---------------------------------------
   The form is one composition, not a stack of unrelated sections. Related
   controls sit 8-12px apart, controls 16-20px, sections 24-32px - so a client
   can see the whole of step one without scrolling through empty page. */
.bstep .fld{margin-bottom:20px}
.bstep .fld > label{margin-bottom:8px}
.bstep .row2{margin-bottom:0}
.bstep .opts{gap:8px}
.bstep h2{margin-bottom:14px}
.bstep .lede{margin-bottom:20px}
.bstep .bsummary{margin-bottom:22px}
.bstep .form{margin-top:22px !important}

/* payment: two cards side by side, not two full-width pills */
.paysec{margin-top:28px}
.paycards{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px}
.paycard{position:relative;display:block;border:1.5px solid var(--rule);border-radius:4px;
  padding:14px 16px;cursor:pointer;background:var(--paper);transition:border-color .2s,background .2s}
.paycard input{position:absolute;opacity:0;pointer-events:none}
.paycard span{display:block}
.paycard b{display:block;font-size:15px;margin-bottom:4px}
.paycard i{display:block;font-style:normal;font-size:13px;opacity:.7;line-height:1.45}
.paycard:has(input:checked){border-color:var(--pink);background:var(--blush)}
.paynote{margin:10px 0 0;max-width:560px}

/* promo: a compact row under the payment choice, not a pink slab */
.promo-inline{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);max-width:560px}
.promo-inline > label{display:block;text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;margin-bottom:8px}
.promo-row{display:flex;gap:8px;max-width:400px}
.promo-row input{flex:1}
.promo-inline .mini{margin-top:8px}
.promo-ok{margin-top:10px;padding:10px 12px;border:1px solid var(--pink);border-radius:3px;
  background:var(--blush);font-size:14px}
.promo-ok b{display:block;font-size:15px}
.promo-ok span{opacity:.75}

/* ---------- step one: three titled cards on a two-column grid -------------
   The composition, not the controls. Two short cards stack on the left and
   the calendar card stands beside them on the right, so the date picker stops
   setting the height of the whole step. Everything inside the cards is the
   markup the script already drives - this block only places it. */
/* Step one is a wider composition than the narrow single-column forms the
   other steps use, so it opts out of the shared .form measure. */
#b1 .form{max-width:1300px}
.bk-grid{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);gap:16px;
  align-items:stretch;max-width:1300px;margin-inline:auto}
.bk-col{display:grid;gap:16px}
.bk-col-l{align-content:start}

.bcard{min-width:0;background:var(--paper);border:1px solid var(--rule);border-radius:18px;
  padding:clamp(22px,2.2vw,32px);box-shadow:0 1px 2px rgba(28,26,26,.03),0 6px 18px rgba(28,26,26,.035)}
/* The calendar card matches the height of the two beside it rather than
   floating short next to them. */
.bcard-tall{height:100%}

/* Session date is the one card with a wash of colour - a tint of the existing
   blush, not a new pink, and pale enough that the white calendar sitting on
   it still reads as the thing you interact with. */
.bcard-tall{background:rgba(251,238,238,.55);border-color:var(--blush-2)}
.bcard-tall .calwrap{background:var(--paper)}
/* the unselected pills would otherwise disappear into the wash; the selected
   one keeps the stronger pink it already had */
.bcard-tall #fldTod .opt input:not(:checked) + span{background:var(--paper)}
.bcard-tall .bcard-rule{background:var(--blush-2)}

/* Section headings: small, tracked, all caps - a marker for the section, not
   a display heading competing with the page title. */
.bcard-h{display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font-family:var(--f-body);font-weight:600;font-size:18px;line-height:1.2;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.bcard-t{display:inline}
.bcard-n{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;
  border-radius:50%;background:var(--blush);color:var(--pink-deep);
  font-size:13px;font-weight:700;letter-spacing:0}
.bcard-rule{height:1px;background:var(--rule);margin:22px 0}

/* Last control in a card should not add a margin the padding already gives. */
.bcard > .fld:last-child{margin-bottom:0}
.bcard > .fld:last-child > .opts:last-child{margin-bottom:0}

/* Utah / Wisconsin side by side rather than stacked full width. */
.loc-2up{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.loc-2up .opt{display:flex}
.loc-2up .opt span{width:100%;border-radius:999px;padding:14px 18px;
  display:flex;align-items:center;gap:10px}
/* the radio dot is drawn, so the wide pill reads as a choice not a button */
.loc-2up .opt span::before{content:"";flex:0 0 auto;width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--rule);background:var(--paper);transition:border-color .2s,box-shadow .2s}
.loc-2up .opt input:checked + span::before{border-color:var(--pink);
  box-shadow:inset 0 0 0 3.5px var(--pink)}

/* Payment cards carry the same drawn radio. The real radio is invisible and
   click-through - the label wraps it - but .fld input gives it width:100%,
   and from its static position inside the card's left padding that pushed the
   page 27px wider than a 375px phone. It needs no box at all. */
.paycard input{left:0;top:0;width:1px;height:1px}
.paycard:has(input:focus-visible){outline:2.5px solid var(--ink);outline-offset:2px}
.paycard{padding-left:44px}
.paycard::before{content:"";position:absolute;left:16px;top:18px;width:15px;height:15px;
  border-radius:50%;border:1.5px solid var(--rule);background:var(--paper);
  transition:border-color .2s,box-shadow .2s}
.paycard:has(input:checked)::before{border-color:var(--pink);box-shadow:inset 0 0 0 3.5px var(--pink)}

/* The calendar fills the right card without the day cells turning enormous. */
.bcard-tall .calwrap{max-width:380px;width:100%;margin-inline:auto;border-radius:10px}
.bcard-tall .cal-picked{max-width:380px;margin-inline:auto}
.bcard-tall .cal-lead,.bcard-tall .cal-sub{max-width:46ch}
.bcard-tall .cal-flex{margin:16px 0 0 !important}

/* Four time-of-day pills on one row inside the date card: the shared .opts
   flex row wraps "Golden hour" onto a second line at this width, so here it
   is an even four-column grid with tighter pills instead. */
.bcard-tall #fldTod .opts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.bcard-tall #fldTod .opt span{padding:11px 4px;font-size:10.5px;letter-spacing:.04em;
  text-align:center;white-space:nowrap}

/* Payment and promo are inside a card now, so their old standalone widths and
   top border would fight the card's own padding and rule. */
.bcard .paysec{margin-top:0}
.bcard .paycards,.bcard .paynote,.bcard .promo-inline{max-width:none}
.bcard .promo-inline{margin-top:20px;padding-top:20px}
.bcard .promo-row{max-width:none}
.bcard .promo-row input{flex:1 1 auto}
.bcard .promo-row .btn{flex:0 0 auto}

/* Bottom navigation: its own breathing room and a rule, so the step visibly
   ends instead of the buttons hanging off the last card. */
.bnav-end{max-width:1300px;margin:34px auto 0;padding-top:26px;
  border-top:1px solid var(--rule);justify-content:space-between;gap:16px}

@media (max-width:900px){
  .bk-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .bk-col{display:contents}
  /* On one column the date belongs with the details, before the money. */
  .bcard-details{order:1}
  .bcard-tall{order:2;height:auto}
  .bcard-pay{order:3}
  .bcard-tall .calwrap,.bcard-tall .cal-picked{margin-inline:0}
}
@media (max-width:620px){
  .bk-grid{gap:14px}
  .bcard{border-radius:14px}
  .bcard-h{font-size:15px;letter-spacing:.11em;gap:10px;margin-bottom:16px}
  .bcard-n{width:25px;height:25px;font-size:12px}
  .loc-2up{grid-template-columns:1fr}
  /* four nowrap pills need 315px; on a phone they wrap instead of widening
     the page */
  .bcard-tall #fldTod .opts{display:flex;flex-wrap:wrap;gap:8px}
  .bcard-tall #fldTod .opt span{white-space:normal;padding:11px 14px;
    font-size:11px;letter-spacing:.06em}
  .bnav-end{flex-direction:column;align-items:stretch;margin-top:26px}
  .bnav-end .btn{width:100%;justify-content:center}
  /* the promo input and Apply still fit side by side on a 375px phone, so
     they keep the single row the wider layout uses */
  .bcard .promo-row{flex-wrap:nowrap}
  .bcard .promo-row input{min-width:0}
  .bcard .promo-row .btn{padding-inline:18px}
}

/* time of day on one row while it fits */
#fldTod .opts{flex-wrap:wrap;gap:8px}

/* two payment cards need real width; below that they stack rather than
   squeeze three lines of copy into half a phone */
@media (max-width:620px){
  .paycards{grid-template-columns:1fr}
  .promo-row{flex-wrap:wrap}
  .promo-row input{min-width:180px}
}

/* Pay Another Way: a confirmation, not another paragraph of instructions */
.paysent{margin-top:16px;border:1.5px solid var(--pink);border-radius:3px;
  background:var(--bone);padding:20px 22px}
.paysent-h{font-family:var(--serif,inherit);font-size:20px;margin:0 0 12px;color:var(--ink)}
.paysent-row{margin:0 0 6px;font-size:15px;color:var(--ink)}
.paysent-row b{font-weight:600}
.paysent-lab{margin:14px 0 2px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);opacity:.55}
.paysent-val{margin:0;font-size:16px;font-weight:600;word-break:break-word}
.paysent-amt{font-size:26px;letter-spacing:-.01em}
.paysent-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.paysent-body{margin:14px 0 0;font-size:14px;color:var(--ink);opacity:.82}
/* a promo that has actually been applied, stated plainly */
.promo-ok{margin-top:10px;padding:10px 12px;border:1px solid var(--pink);border-radius:3px;
  background:var(--paper);font-size:14px}
.promo-ok b{display:block;font-size:15px}
.promo-ok span{opacity:.75}
.paysent-fine{margin:10px 0 0;font-size:12px;color:var(--ink);opacity:.6}
.travelflag{margin:14px 0 0;padding:12px 15px;border:1px solid #e2a878;background:#fdf6f1;
  border-radius:4px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.travelflag b{color:var(--ink)}
.bs-row.bs-travel b{font-weight:600}

/* ---- real estate booking ---- */
.re-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.95fr);
  gap:clamp(26px,3.2vw,48px);align-items:start}
.re-aside{position:sticky;top:110px;background:var(--paper);border:1px solid var(--rule);
  border-radius:4px;padding:20px 22px}
.re-aside h3{font-family:var(--f-display);font-size:19px;letter-spacing:-.02em;margin:0 0 14px}
.re-row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--rule);font-size:14.5px}
.re-row:last-child{border-bottom:0}
.re-row span{color:var(--ink-3)}
.re-row b{text-align:right}
.re-row.tot{border-top:1.5px solid var(--ink);border-bottom:0;margin-top:6px;padding-top:11px}
.re-row.tot b{font-family:var(--f-display);font-size:21px;letter-spacing:-.02em}
.re-row.dep b{color:var(--pink-deep);font-weight:700}
.re-empty{color:var(--ink-3);font-size:14.5px;margin:0}
.re-note{margin:12px 0 0;font-size:13px;color:var(--ink-3);line-height:1.5}
.prop-tag{font-style:normal;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--pink-deep);background:var(--blush);border:1px solid var(--pink);
  border-radius:3px;padding:1px 6px;margin-left:7px}
.btn.is-off{opacity:.45;pointer-events:none}
.rstep textarea{width:100%;font:inherit;padding:11px 13px;border:1px solid var(--rule);
  border-radius:3px;background:var(--paper);color:var(--ink);resize:vertical}
@media (max-width:860px){.re-grid{grid-template-columns:1fr}.re-aside{position:static}}
.opt-sub{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:2px}

/* ---- rounded-bubble date picker ---- */
.calwrap{border:1px solid var(--rule);border-radius:6px;background:var(--paper);padding:10px 12px 8px;max-width:310px}
.cal-lead{margin:2px 0 4px;font-size:14px;color:var(--ink)}
.cal-sub{margin:0 0 12px;font-size:12.5px;color:var(--ink);opacity:.62;max-width:44ch}
.cal-flex{margin:14px 0 0 !important;font-size:14px}
.cal-picked{margin-top:12px}
.cal-picked .pick-lab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);opacity:.55;margin-right:8px}
.cal-picked .pick-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.cal-chip.is-pref{background:var(--pink);border-color:var(--pink);color:#fff;font-weight:600}

/* The booking form carries a calendar beside a location field, so it needs
   more than the 620px a plain contact form wants. The calendar itself stays
   its own size - the extra width goes to the columns, not the date picker. */
.bstep .form{max-width:940px}
.bstep .row2{gap:16px 48px;align-items:start}
@media (max-width:820px){
  .bstep .form{max-width:620px}
  .bstep .row2{grid-template-columns:1fr}
  .calwrap{max-width:100%}
}
.cal-chip.is-pref i{color:#fff}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-title{font-family:var(--f-display);font-size:16.5px;letter-spacing:-.01em}
.cal-nav{border:1px solid var(--rule);background:transparent;border-radius:50%;width:28px;height:28px;
  cursor:pointer;color:var(--ink-2);font-size:16px;line-height:1;transition:border-color .2s,color .2s}
.cal-nav:hover{border-color:var(--pink);color:var(--pink-deep)}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-dow span{text-align:center;font-size:11px;letter-spacing:.06em;color:var(--ink-3);padding:4px 0}
.cal-day{aspect-ratio:1;border:0;background:transparent;border-radius:50%;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--ink);transition:background .18s var(--ease),color .18s var(--ease)}
.cal-day:hover:not(:disabled){background:var(--blush)}
.cal-day.on{background:var(--pink);color:#fff;font-weight:600}
.cal-day:disabled{color:var(--ink-4,#c9c2bd);cursor:default;opacity:.45}
.cal-pad{aspect-ratio:1}
.cal-picked{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.cal-chip{display:inline-flex;align-items:center;gap:7px;background:var(--blush);border:1px solid var(--pink);
  border-radius:999px;padding:4px 12px;font-size:12.5px;color:var(--ink)}
.cal-chip i{font-style:normal;color:var(--pink-deep);font-weight:700}
.cal-hint{margin:10px 0 0;font-size:12.5px;color:var(--ink-3)}
.bs-row.bs-pref b{font-size:12.5px;color:var(--pink-deep);font-weight:600}

/* ---- real estate square-footage slider ---- */
.sqpick{margin-top:10px}
#sqSlide{width:100%;accent-color:var(--pink);height:26px;cursor:pointer}
.sqrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
#sqNum{width:120px;font:inherit;padding:9px 11px;border:1px solid var(--rule);border-radius:3px;
  background:var(--paper);color:var(--ink)}
.squnit{color:var(--ink-3);font-size:14px}
.sqout{margin-left:auto;font-family:var(--f-display);font-size:clamp(15px,1.5vw,18px);
  letter-spacing:-.01em;color:var(--pink-deep)}
.bandtab{width:100%;border-collapse:collapse;margin-top:18px;font-size:13.5px}
.bandtab th{text-align:left;font-weight:600;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);padding:0 10px 8px;border-bottom:1px solid var(--rule)}
.bandtab th em{font-style:normal;color:var(--pink-deep);font-size:10px}
.bandtab td{padding:9px 10px;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.bandtab tr.on td{background:var(--blush);color:var(--ink);font-weight:600}
.bandtab tr.on td:first-child{box-shadow:inset 3px 0 0 var(--pink)}
@media (max-width:560px){.bandtab{font-size:12.5px}.bandtab td,.bandtab th{padding:8px 6px}
  .sqout{margin-left:0;width:100%}}
.bs-row .bs-ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.02em}
.bs-row.bs-tax b{font-size:12.5px;color:var(--ink-3);font-weight:500}

/* ---- short inquiry forms (preview) ---- */
.qcard{border:1px solid var(--rule);border-radius:8px;background:var(--paper);
  padding:clamp(22px,3vw,34px);animation:qIn .45s var(--ease)}
@keyframes qIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.qkicker{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--pink-deep);margin:0 0 6px}
.qcard h2{font-family:var(--f-display);font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:0 0 8px}
.qblurb{color:var(--ink-3);font-size:15px;margin:0 0 4px}
.qservice{margin:14px 0 22px;padding:10px 14px;background:var(--blush);border:1px solid var(--pink);
  border-radius:6px;font-size:13.5px}
.qservice b{color:var(--pink-deep)}
.qf{margin-bottom:18px}
.qf label{display:block;font-size:14.5px;font-weight:500;margin-bottom:7px;color:var(--ink)}
.qf label i{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-left:7px;font-weight:400}
.qf input[type=text],.qf input[type=email],.qf input[type=number],.qf textarea{
  width:100%;font:inherit;font-size:16px;padding:13px 15px;border:1px solid var(--rule);
  border-radius:8px;background:#fff;color:var(--ink);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.qf input:focus,.qf textarea:focus{outline:0;border-color:var(--pink);box-shadow:0 0 0 3px var(--blush)}
.qf textarea{resize:vertical;line-height:1.55}
.qopts{display:flex;flex-wrap:wrap;gap:9px}
.qopt{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid var(--rule);
  border-radius:999px;cursor:pointer;font-size:14.5px;transition:border-color .2s,background .2s;min-height:44px}
.qopt:hover{border-color:var(--pink);background:var(--blush)}
.qopt input{accent-color:var(--pink-deep)}
.qopt:has(input:checked){border-color:var(--pink-deep);background:var(--blush);font-weight:600}
.qcheck{display:flex;align-items:center;gap:10px;padding:12px 0;cursor:pointer;font-size:14.5px;min-height:44px}
.qcheck input{accent-color:var(--pink-deep);width:18px;height:18px}
.qhint{margin:9px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.qsubmit{margin-top:8px;width:100%;justify-content:center}
.qsmall{margin:12px 0 0;font-size:12.5px;color:var(--ink-3);text-align:center}
.qdone{text-align:center}
.qtick{width:54px;height:54px;border-radius:50%;background:var(--blush);color:var(--pink-deep);
  display:grid;place-items:center;font-size:26px;margin:0 auto 16px}
.qnotbooked{margin:14px 0 0;padding:11px 16px;background:var(--blush);border:1px solid var(--pink);
  border-radius:6px;display:inline-block}
@media (max-width:560px){.qcard{padding:20px 17px}}
.qinert{margin-top:20px;padding:14px 16px;border:1px dashed var(--rule);border-radius:6px;
  background:var(--wash,#faf7f5);font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.qinert b{display:block;color:var(--ink);margin-bottom:4px}

/* Add-on cards: exactly three rows - name+price, then two short lines.
   The parent .opt span is uppercase with wide tracking; the note opts out so
   it reads as plain text and does not wrap into a fourth row. */
.opt .ao-note{display:block;font-style:normal;text-transform:none;
  letter-spacing:0;font-weight:400;color:var(--ink-3);font-size:13px;
  line-height:1.4;margin:4px 0 0}
@media (max-width:560px){.opt .ao-note{font-size:12px;line-height:1.35}}

/* ---- Real estate: pink slider, spacing, sections, selection states ---- */
#sqSlide{-webkit-appearance:none;appearance:none;background:transparent}
#sqSlide::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--rule)}
#sqSlide::-moz-range-track{height:6px;border-radius:3px;background:var(--rule)}
#sqSlide::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
  border-radius:50%;background:var(--pink);border:3px solid #fff;margin-top:-10px;
  box-shadow:0 1px 4px rgba(0,0,0,.22);cursor:pointer}
#sqSlide::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--pink);
  border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.22);cursor:pointer}
#sqSlide:focus-visible::-webkit-slider-thumb{outline:2px solid var(--pink-deep);outline-offset:2px}
#sqSlide.sq-zero::-webkit-slider-thumb{background:var(--ink-3)}
#sqSlide.sq-zero::-moz-range-thumb{background:var(--ink-3)}

/* brief glide-in on first view of the property step */
@keyframes sqGlide{from{transform:translateX(-14px);opacity:.35}to{transform:none;opacity:1}}
.sqpick.sq-intro{animation:sqGlide .62s cubic-bezier(.22,.8,.3,1) both}
@media (prefers-reduced-motion: reduce){.sqpick.sq-intro{animation:none}}

/* breathing room under the step nav */
#r1 > h2, .rstep > h2{margin-top:34px}
.re-grid > div > h2:first-child{margin-top:34px}

/* clickable price rows */
.bandtab tbody tr{cursor:pointer}
.bandtab tbody tr:hover td{background:var(--blush)}
.bandtab tbody tr:focus-visible td{outline:2px solid var(--pink);outline-offset:-2px}

/* section headings */
.re-sec{margin-top:30px;padding-top:4px}
.re-sec > .re-sec-h{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--pink-deep);margin:0 0 4px}
.re-sec > .re-sec-s{font-size:13px;color:var(--ink-3);margin:0 0 12px}

/* an option that cannot currently be chosen, with the reason shown */
.opt.is-locked{opacity:.5}
.opt.is-locked span{cursor:not-allowed}
.lock-why{display:block;font-style:normal;text-transform:none;letter-spacing:0;
  font-weight:400;font-size:12px;color:var(--pink-deep);margin-top:4px}
.re-alert{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--blush);
  border-left:3px solid var(--pink);font-size:13px;color:var(--ink-2)}

/* square-footage selection card, separated from the pricing table */
.sqcard{background:#fff;border:1px solid var(--rule);border-radius:14px;
  padding:20px 22px 18px;margin-top:10px}
.sqcard > .fld{margin:0}
.sqcard .mini{margin-bottom:0}
.sqcard .sqout{font-weight:600;color:var(--ink)}
.bandtab{margin-top:26px}
@media (max-width:560px){.sqcard{padding:16px 14px 14px;border-radius:12px}}

/* ---- Collections welcome screen (shown until a service tab is chosen) ---- */
.gwelcome{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3.4vw,46px);
  align-items:center;margin-top:clamp(22px,3vw,38px)}
.gwelcome-pic{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3}
.gwelcome-pic img{width:100%;height:100%;object-fit:cover;display:block}
.gwelcome-copy h2{font-family:var(--f-display);font-size:clamp(26px,3.4vw,44px);line-height:1.08;
  letter-spacing:-.02em;margin:0 0 .45em}
.gwelcome-copy .lede{margin:0 0 .9em}
@media(max-width:760px){
  .gwelcome{grid-template-columns:1fr;gap:18px}
  .gwelcome-pic{aspect-ratio:3/2}
}

/* ---- Collections: brand-pink collection tabs ---- */
.gtabs-pink{gap:10px;padding:14px clamp(16px,4vw,40px);justify-content:flex-start;align-items:center}
.gtabs-pink .gtab{flex:0 0 auto;border:1.5px solid var(--pink);border-radius:999px;background:#fff;
  color:var(--pink-deep);padding:11px 20px}
.gtabs-pink .gtab:first-child{border-left:1.5px solid var(--pink)}
.gtabs-pink .gtab:hover{background:var(--blush);color:var(--pink-deep)}
.gtabs-pink .gtab[aria-pressed="true"]{background:var(--pink);color:#fff;border-color:var(--pink)}
.gtabs-pink .gtab:focus-visible{outline:2px solid var(--pink-deep);outline-offset:2px}
.gwelcome-sec{padding-block:clamp(26px,4vw,52px) 0}
@media(max-width:760px){
  .gtabs-pink{gap:8px;padding:11px 14px}
  .gtabs-pink .gtab{padding:10px 15px;font-size:10px;letter-spacing:.14em}
}

/* Welcome portrait frame + the "All collections" pill */
.gwelcome-pic{aspect-ratio:4/5}
.gwelcome-pic img{object-position:50% 28%}
.gtabs-pink .gtab-home{background:var(--blush);border-color:var(--pink-deep);color:var(--pink-deep)}
.gtabs-pink .gtab-home[aria-pressed="true"]{background:var(--pink-deep);color:#fff;border-color:var(--pink-deep)}
@media(max-width:760px){.gwelcome-pic{aspect-ratio:4/5}}

/* Provisional-figure tag on the seniors example */
.tag-prov{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;background:var(--blush);color:var(--pink-deep);
  vertical-align:middle;font-weight:600}
.senopt.on .opt-b{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink) inset}

/* ---- Seniors booking preview: two clean pages ---- */
.sen-head{margin-bottom:clamp(18px,2.6vw,30px)}
.sen-head h2{font-family:var(--f-display);font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin:.1em 0 .3em}
.sen-cards .gcard{position:relative;cursor:pointer;transition:.2s var(--ease)}
.sen-cards .gcard:hover{border-color:var(--pink)}
.senradio{position:absolute;opacity:0;pointer-events:none}
.senpick{display:block;margin-top:14px;padding:10px 16px;border:1.5px solid var(--pink);border-radius:999px;
  text-align:center;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--pink-deep)}
.senopt.on{border-color:var(--pink);box-shadow:0 0 0 1.5px var(--pink) inset}
.senopt.on .senpick{background:var(--pink);color:#fff}
.sen-sum,.sen-recap{margin-top:clamp(22px,3vw,34px);padding:18px 20px;border:1px solid var(--rule);border-radius:14px}
.sen-row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;align-items:baseline}
.sen-row+.sen-row{border-top:1px solid var(--rule)}
.sen-total b{font-size:1.15em}
.sen-tbc{color:var(--pink-deep);font-weight:600}
.sen-plus{font-weight:400;color:var(--ink-3);font-size:.8em}
.sen-cta{margin-top:22px;width:100%;max-width:340px}
.sen-cta[disabled]{opacity:.45;pointer-events:none}
.sen-fields{margin-top:clamp(20px,3vw,30px)}
.sen-pay{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:24px}
@media(max-width:760px){.sen-cta{max-width:none}.sen-pay .btn{width:100%}}

/* ---- Review your booking: condensed summary lines ---- */
.bsx-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:7px 0;border-bottom:1px solid var(--rule);line-height:1.5}
.bsx-line:last-of-type{border-bottom:0}
.bsx-i{display:inline-block}
.bsx-s{color:var(--rule);user-select:none}
.bsx-k{color:var(--ink-3);font-size:.92em}
.bsx-line em{font-style:normal;color:var(--ink-3);font-size:.9em}
.bsx-pref{margin:10px 0 0;font-size:.9em;color:var(--pink-deep)}
.bsx-h{margin:22px 0 4px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3)}
@media(max-width:560px){
  .bsx-line{flex-direction:column;gap:2px;padding:9px 0}
  .bsx-s{display:none}
}

/* Pending confirmation mark - deliberately NOT the pink success tick, so a
   client who has not paid never sees a success signal. */
.tick-pend{background:var(--blush-2);color:var(--ink-3);font-size:26px;letter-spacing:1px}

/* ==========================================================================
   Photography Collections - centred hero, pill collection buttons, pink wave
   Presentation only: no category, price, link or filtering behaviour changes.
   ========================================================================== */

/* --- centred hero, serif heading, pink flourish -------------------------- */
.gintro-mid{text-align:center;position:relative;
  padding-block:clamp(52px,7vw,104px) clamp(22px,2.6vw,36px);
  background:linear-gradient(180deg,var(--blush) 0%,rgba(251,238,238,0) 78%)}
.gintro-mid h1{font-family:var(--f-mark);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(40px,6.4vw,86px);line-height:1.02;margin-top:16px}
.gintro-mid h1 em{font-style:italic;color:var(--pink-deep)}
.gintro-mid .lede{margin-inline:auto;max-width:46ch;margin-top:20px;font-size:clamp(15px,1.3vw,17.5px)}
.gintro-mid .eyebrow{justify-content:center}
/* short pink rule under the heading */
.gintro-mid h1::after{content:"";display:block;width:64px;height:2px;margin:22px auto 0;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
  transform:scaleX(0);transform-origin:center;
  animation:ruleIn .6s var(--ease) .15s forwards}
@keyframes ruleIn{to{transform:scaleX(1)}}

/* --- the pill row: its own blush band, wraps and centres ----------------- */
.gtabs-pink{flex-wrap:wrap;justify-content:center;overflow:visible;
  position:relative;isolation:isolate;gap:12px;
  padding:clamp(20px,2.8vw,32px) clamp(16px,4vw,40px);
  background:linear-gradient(180deg,#fff 0%,var(--blush) 100%);
  border-block:1px solid var(--rule)}

/* --- decorative pink wave behind the pills ------------------------------- */
.gwave{position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  pointer-events:none;overflow:visible}
.gwave path{fill:none;stroke:var(--pink);stroke-width:1.75;opacity:.42;
  stroke-linecap:round;
  stroke-dasharray:1800;stroke-dashoffset:1800;
  animation:gwaveDraw 1.6s var(--ease) .1s forwards}
.gwave path:nth-child(2){stroke-width:1.1;animation-delay:.32s}
.gwave circle{fill:var(--pink);opacity:0;animation:gwaveDot .5s var(--ease) 1.15s forwards}
.gwave circle:nth-of-type(2){animation-delay:1.3s}
.gwave circle:nth-of-type(3){animation-delay:1.45s}
@keyframes gwaveDraw{to{stroke-dashoffset:0}}
@keyframes gwaveDot{to{opacity:.6}}

/* --- pills: bigger, icon + label, lift and fill on hover ----------------- */
.gtabs-pink .gtab{display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;line-height:1;font-size:11.5px;letter-spacing:.16em;
  background:#fff;border:1.5px solid var(--pink);border-radius:999px;
  color:var(--pink-deep);box-shadow:0 1px 3px rgba(28,26,26,.05);
  transition:transform .28s var(--ease),background .28s var(--ease),
             color .28s var(--ease),border-color .28s var(--ease),
             box-shadow .28s var(--ease)}
.gtabs-pink .gtab svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .28s var(--ease)}

.gtabs-pink .gtab:hover{transform:translateY(-3px);
  background:var(--blush);border-color:var(--pink-deep);color:var(--pink-deep);
  box-shadow:0 8px 20px rgba(202,115,140,.28)}
.gtabs-pink .gtab:hover svg{transform:scale(1.14) rotate(-4deg)}

.gtabs-pink .gtab[aria-pressed="true"]{background:var(--pink);color:#fff;
  border-color:var(--pink);transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(202,115,140,.4)}
.gtabs-pink .gtab[aria-pressed="true"]:hover{background:var(--pink-deep);
  border-color:var(--pink-deep);color:#fff;transform:translateY(-4px)}
.gtabs-pink .gtab:focus-visible{outline:2px solid var(--pink-deep);outline-offset:3px}

.gtabs-pink .gtab-home{background:var(--blush);border-color:var(--pink-deep);color:var(--pink-deep)}
.gtabs-pink .gtab-home[aria-pressed="true"]{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff}

/* --- entry sequence ------------------------------------------------------
   Each pill fades up over ~400ms, staggered 100ms apart, then a pink glow
   ring pulses out over 350ms. Seven pills, so ~1.7s end to end. Once only. */
.gtabs-pink .gtab{
  animation:pillIn .4s var(--ease) both, pillGlow .35s var(--ease) both;
  animation-delay:calc(var(--i,0) * .1s), calc(var(--i,0) * .1s + .4s)}
.gtabs-pink .gtab:nth-child(1){--i:0}
.gtabs-pink .gtab:nth-child(2){--i:1}
.gtabs-pink .gtab:nth-child(3){--i:2}
.gtabs-pink .gtab:nth-child(4){--i:3}
.gtabs-pink .gtab:nth-child(5){--i:4}
.gtabs-pink .gtab:nth-child(6){--i:5}
.gtabs-pink .gtab:nth-child(7){--i:6}
.gtabs-pink .gtab:nth-child(8){--i:7}
@keyframes pillIn{from{opacity:0;transform:translateY(14px) scale(.94)}
                  to{opacity:1;transform:none}}
@keyframes pillGlow{
  0%  {box-shadow:0 0 0 0 rgba(202,115,140,.55)}
  55% {box-shadow:0 0 0 9px rgba(202,115,140,.18)}
  100%{box-shadow:0 1px 3px rgba(28,26,26,.05)}}

@media(max-width:760px){
  .gintro-mid{padding-block:clamp(34px,9vw,56px) 18px}
  .gtabs-pink{gap:8px;padding:16px 12px}
  .gtabs-pink .gtab{padding:11px 17px;font-size:10.5px;letter-spacing:.12em;gap:8px}
  .gtabs-pink .gtab svg{width:14px;height:14px}
}

/* Reduced motion: everything arrives in place, hover stays colour-only. */
@media(prefers-reduced-motion:reduce){
  .gtabs-pink .gtab{animation:none}
  .gtabs-pink .gtab:hover,
  .gtabs-pink .gtab[aria-pressed="true"],
  .gtabs-pink .gtab[aria-pressed="true"]:hover{transform:none}
  .gtabs-pink .gtab:hover svg{transform:none}
  .gwave path{animation:none;stroke-dashoffset:0}
  .gwave circle{animation:none;opacity:.6}
  .gintro-mid h1::after{animation:none;transform:scaleX(1)}
}

/* ==========================================================================
   Review Your Booking - two columns on desktop, stacked on mobile.
   Presentation only; no pricing, validation or payment behaviour here.
   ========================================================================== */
/* The review content is its own measure inside the wide card: at 1000px
   with a narrow right column the payment summary stopped well short of the
   card edge and left a dead band after it. 1120px at 55/45 fills the space
   and keeps both halves to the left, where the eye starts. */
.rvw{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);
  gap:clamp(22px,3.2vw,52px);align-items:start;max-width:1150px}

/* --- left column -------------------------------------------------------- */
.rvw-head{padding-bottom:16px;border-bottom:1px solid var(--rule)}
.rvw-svc{font-family:var(--f-display);font-weight:500;font-size:clamp(21px,2.2vw,27px);
  line-height:1.15;letter-spacing:-.02em;margin:0}
.rvw-pkgline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:11px}
.rvw-badge{display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--blush);color:var(--pink-deep);
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.2}
.rvw-price{font-family:var(--f-display);font-weight:600;font-size:clamp(19px,1.9vw,23px);
  color:var(--pink);letter-spacing:-.01em}

.rvw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px clamp(16px,2vw,28px);margin:18px 0 0}
.rvw-cell dt{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 4px}
.rvw-cell dd{margin:0;font-size:14.5px;line-height:1.4;color:var(--ink)}

.rvw-note{margin:18px 0 0;padding:12px 15px;border-radius:12px;
  background:var(--blush);color:var(--pink-deep);
  font-size:13px;line-height:1.45}

/* --- right column: payment ---------------------------------------------- */
.rvw-pay{background:#fff;border:1px solid var(--rule);border-radius:16px;
  padding:clamp(16px,1.8vw,22px)}
.rvw-h{margin:0 0 12px;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.rvw-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:6px 0;font-size:13.5px;color:var(--ink-3)}
.rvw-row b{color:var(--ink);font-weight:600;text-align:right}
.rvw-total{margin-top:6px;padding-top:11px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--ink)}
.rvw-total b{font-family:var(--f-display);font-size:clamp(20px,2vw,25px);
  font-weight:600;color:var(--pink);letter-spacing:-.01em}

.rvw-due{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--bone);
  border:1px solid var(--rule)}
.rvw-due .rvw-row{padding:4px 0}
.rvw-when{margin:7px 0 0;font-size:11.5px;line-height:1.4;color:var(--ink-3)}

.rvw-ref{margin:14px 0 0;font-size:11px;letter-spacing:.06em;color:var(--ink-3)}

@media(max-width:860px){
  .rvw{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media(max-width:480px){
  .rvw-grid{grid-template-columns:minmax(0,1fr);gap:12px}
}

/* --- Collections: balance the pink and close the dead space -------------
   Two blush bands stacked read as heavy, so the hero wash is lightened and
   the pill band carries most of the colour - the buttons stay the focus. */
.gintro-mid{background:linear-gradient(180deg,rgba(251,238,238,.55) 0%,rgba(251,238,238,0) 72%)}
.gtabs-pink{background:linear-gradient(180deg,#fff 0%,rgba(251,238,238,.85) 100%)}
.gwave path{opacity:.3}
.gwave path:nth-child(2){opacity:.18}

/* Welcome panel: narrower photo column, capped height, centred, with room
   underneath so it does not float above the footer. */
.gwelcome{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  max-width:960px;margin-inline:auto}
.gwelcome-pic{max-height:440px}
.gwelcome-copy{max-width:44ch}
.gwelcome-sec{padding-block:clamp(30px,4vw,58px) clamp(34px,5vw,72px)}
@media(max-width:760px){
  .gwelcome{grid-template-columns:1fr;max-width:none}
  .gwelcome-pic{max-height:360px}
  .gwelcome-copy{max-width:none}
}

/* ==========================================================================
   Real estate gallery - one larger featured frame over three smaller ones.
   Sabrina's own listing photography; presentation only, no pricing changes.
   ========================================================================== */
.regal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.1vw,16px);margin-top:clamp(18px,2.2vw,28px)}
.regal figure{margin:0;position:relative;overflow:hidden;border-radius:14px;
  background:var(--blush-2)}
.regal img{display:block;width:100%;height:100%;object-fit:cover}
.regal-feat{grid-column:1 / -1;aspect-ratio:21/9}
.regal-i{aspect-ratio:3/2}

/* caption sits in a soft wash so it reads over any part of the frame */
.regal figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:26px 14px 10px;
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:linear-gradient(180deg,rgba(28,26,26,0),rgba(28,26,26,.55));
  opacity:0;transform:translateY(6px);transition:.3s var(--ease)}
.regal figure:hover figcaption,
.regal figure:focus-within figcaption{opacity:1;transform:none}

/* a thin pink edge on hover, matching the collection pills */
.regal figure::after{content:"";position:absolute;inset:0;border-radius:14px;
  box-shadow:inset 0 0 0 0 var(--pink);transition:box-shadow .3s var(--ease);
  pointer-events:none}
.regal figure:hover::after{box-shadow:inset 0 0 0 2px var(--pink)}

@media(max-width:760px){
  .regal{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .regal-feat{aspect-ratio:16/9}
  .regal-i:last-child{grid-column:1 / -1;aspect-ratio:21/9}
  .regal figcaption{opacity:1;transform:none;font-size:9px;padding:20px 10px 8px}
}
@media(prefers-reduced-motion:reduce){
  .regal figcaption,.regal figure::after{transition:none}
}

/* Contract retainer box: the TOTAL row is the number that matters, so it gets
   a soft blush panel and a pink rule. Presentation only. */
/* The TOTAL row used to carry its own padding and a negative margin, which
   pulled it out of line with the four rows around it. It keeps the blush
   panel and the pink rule, and now sits on the same grid as its siblings. */
.retbox .rt-total{background:var(--blush);border:1px solid var(--pink);
  border-radius:8px;margin:0;padding:14px 18px}
.retbox .rt-total span{font-weight:600;color:var(--ink)}
.retbox .rt-total b{color:var(--pink-deep);font-size:1.12em;letter-spacing:-.01em}

@media (max-width:620px){
  /* One amount per line, separated by a rule rather than by a column edge,
     so the spacing is identical down the whole box. */
  .retbox{flex-direction:column}
  .retbox>div{flex:1 1 auto;border-right:0;border-bottom:1px solid var(--rule);
    flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px}
  .retbox>div:last-child{border-bottom:0}
  .retbox b{font-size:19px}
  .retbox .rt-total{border-bottom:1px solid var(--pink)}
}

/* Shown when a package is not in the trusted price table. */
.rvw-unpriced{padding:clamp(16px,2vw,24px);border:1px solid var(--rule);
  border-radius:16px;background:var(--blush);max-width:56ch}
.rvw-unpriced h3{margin:0 0 8px;font-family:var(--f-display);font-weight:500;
  font-size:clamp(18px,1.9vw,22px);color:var(--pink-deep)}
.rvw-unpriced p{margin:0 0 10px;font-size:14.5px;line-height:1.5}
.rvw-unpriced p:last-child{margin:14px 0 0}

/* Deposit step: the real payment controls. */
.payblock{margin:18px 0 0;padding:16px 18px;border-radius:14px;
  background:var(--blush);border:1px solid var(--pink)}
.payblock b{display:block;margin-bottom:6px;color:var(--pink-deep);
  font-family:var(--f-display);font-weight:600;font-size:16px}
.payblock p{margin:0 0 10px;font-size:14px;line-height:1.5}
.payblock p:last-child{margin-bottom:0}
.payerr{margin:16px 0 0;padding:12px 15px;border-radius:12px;
  background:#fdf0f0;border:1px solid #e9b9b9;color:#8a2b2b;font-size:14px;line-height:1.45}
#payNow[disabled]{opacity:.45;cursor:not-allowed}

/* Contract / release version line. */
.agver{margin:-6px 0 18px;font-size:11px;letter-spacing:.06em;color:var(--ink-3)}

/* A refused Continue says what is missing, next to the button that refused,
   and sends the cursor to the field. A greyed-out button explains nothing. */
.steperr{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:11px 13px;
  border:1px solid var(--pink);border-radius:8px;background:var(--blush);
  color:var(--ink);font-size:14px;line-height:1.45}
.steperr::before{content:"!";flex:0 0 18px;height:18px;border-radius:50%;
  background:var(--pink-deep);color:#fff;font-size:12px;font-weight:700;
  display:grid;place-items:center;margin-top:1px}
.steperr[hidden]{display:none}
.fld.is-bad input,.fld.is-bad select,.is-bad>input{border-color:var(--pink-deep)}
/* The calendar is a div, so the refusal has to move its own border rather
   than look for an input inside it. */
.calwrap.is-bad{border:1.5px solid var(--pink-deep)}
.agreebox.is-bad{border-color:var(--pink-deep)}
/* Said next to the control it is about, in the same pink as the asterisk,
   and small enough that three of them do not read as an error page. */
.fielderr{margin:7px 0 0;font-size:12.5px;line-height:1.4;color:var(--pink-deep)}
.loc-2up + .fielderr,.opts + .fielderr{margin-top:9px}

/* The promo result on Review. A valid code is confirmed in full, because the
   Wix page will not ask for it again and a client should not wonder why. */
.promo-ok{color:var(--pink-deep)}
.promo-bad{color:var(--pink-deep);font-weight:600}

/* The quote / pay-another-way confirmation. A client needs to see at a glance
   that an email is on its way and that nothing else is expected of them, so
   it is a panel rather than a line of small print - and it says something
   different when the email did NOT go. */
.sentbox{display:block;margin-top:14px;padding:16px 18px;border-radius:10px;
  border:1px solid var(--rule);background:var(--paper);font-size:14.5px;line-height:1.55}
.sentbox b{display:block;font-family:var(--f-display);font-size:16.5px;
  letter-spacing:-.01em;margin-bottom:6px}
.sentbox p{margin:0 0 8px}
.sentbox p:last-child{margin-bottom:0;color:var(--ink-3);font-size:13.5px}
.sentbox.is-sent{border-color:var(--pink);background:var(--blush)}
.sentbox.is-sent b{color:var(--pink-deep)}
.sentbox.is-pending{border-color:var(--ink-3)}
.sentbox.is-pending b{color:var(--ink)}

/* Deposit step: what to do about the promo box Wix insists on showing on the
   next screen. Either the code is already in the total above, or there is a
   way back to the step where codes are entered. */
.inv-note{margin:14px 0 0;padding:10px 14px;border-radius:10px;
  background:var(--blush,#FBEEEE);color:var(--ink-3,#7A7170);
  font-size:.86rem;line-height:1.45}
.inv-note .linkish{background:none;border:0;padding:0;font:inherit;
  color:var(--pink-deep,#A8546C);text-decoration:underline;cursor:pointer}
.inv-note .linkish:hover{color:var(--pink,#CA738C)}