/* ==========================================================================
   Unity Campus Suites — draft UI stylesheet
   Brand colours sampled from the client logo:
     navy  #10365B   green #6B9350   tan #9C876C
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --navy-900:#08203A;
  --navy-800:#0C2A45;
  --navy-700:#10365B;
  --navy-600:#1B4C7A;
  --navy-300:#7FA3C4;

  --green-700:#4E6F38;
  --green-600:#6B9350;
  --green-500:#83AD66;
  --green-100:#E6EFDD;

  --tan-600:#9C876C;
  --tan-300:#D6C8B4;
  --tan-100:#EFE7DB;

  --paper:#FBF8F3;
  --paper-2:#F4EEE4;
  --white:#FFFFFF;
  --ink:#16202B;
  --ink-70:rgba(22,32,43,.70);
  --ink-50:rgba(22,32,43,.52);
  --ink-15:rgba(22,32,43,.14);
  --ink-08:rgba(22,32,43,.075);

  --danger:#B4472F;

  --ff-display:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --shadow-sm:0 1px 2px rgba(8,32,58,.06),0 2px 6px rgba(8,32,58,.05);
  --shadow-md:0 4px 10px rgba(8,32,58,.06),0 14px 34px rgba(8,32,58,.09);
  --shadow-lg:0 10px 24px rgba(8,32,58,.09),0 30px 70px rgba(8,32,58,.16);

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:32px; --r-pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.22s; --t:.42s; --t-slow:.8s;

  --container:1240px;
  --gutter:clamp(20px,5vw,56px);
  --header-h:76px;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--ff-sans);
  font-size:16px;line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--green-600);outline-offset:3px;border-radius:4px}
::selection{background:var(--green-100);color:var(--navy-800)}

/* ---------- 3. Type ---------- */
.display{
  font-family:var(--ff-display);
  font-weight:500;
  font-variation-settings:"SOFT" 0,"WONK" 1;
  line-height:1.02;
  letter-spacing:-.022em;
}
.h1{font-size:clamp(2.6rem,6.2vw,4.9rem)}
.h2{font-size:clamp(2rem,4.1vw,3.15rem);line-height:1.06}
.h3{font-size:clamp(1.32rem,2.1vw,1.72rem);line-height:1.18}
.eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--green-700);display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.55;flex:none}
.eyebrow.is-light{color:var(--green-500)}
.lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--ink-70);max-width:60ch}
.muted{color:var(--ink-50)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- 4. Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(72px,9vw,128px);position:relative}
.section--tight{padding-block:clamp(52px,6vw,84px)}
.section--paper2{background:var(--paper-2)}
.section--navy{background:var(--navy-800);color:var(--paper)}
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(34px,4vw,56px);max-width:66ch}
.section-head--split{max-width:none;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.section-head--split .sh-copy{display:flex;flex-direction:column;gap:14px;max-width:56ch}

/* ---------- 5. Buttons ---------- */
.btn{
  --bg:var(--navy-700); --fg:#fff; --bd:transparent;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-size:.925rem;font-weight:600;letter-spacing:.005em;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),opacity var(--t-fast);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0) scale(.985)}
.btn[disabled]{opacity:.42;pointer-events:none;box-shadow:none}
.btn--green{--bg:var(--green-600)}
.btn--green:hover{--bg:var(--green-700)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--ink-15)}
.btn--ghost:hover{--bd:var(--navy-700);--fg:var(--navy-700)}
.btn--light{--bg:rgba(255,255,255,.1);--fg:#fff;--bd:rgba(255,255,255,.34);backdrop-filter:blur(8px)}
.btn--light:hover{--bg:#fff;--fg:var(--navy-800);--bd:#fff}
.btn--sm{padding:10px 18px;font-size:.85rem}
.btn--block{width:100%}
.btn .ico{width:17px;height:17px;flex:none;transition:transform var(--t-fast) var(--ease)}
.btn:hover .ico--arrow{transform:translateX(3px)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;
  color:var(--navy-700);padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--t) var(--ease-out);
}
.link-arrow:hover{background-size:100% 1.5px}
.link-arrow svg{transition:transform var(--t-fast) var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- 6. Draft banner ---------- */
.draftbar{
  position:relative;z-index:120;background:var(--navy-900);color:#D8E3EE;
  font-size:.775rem;letter-spacing:.01em;
}
.draftbar__in{display:flex;align-items:center;gap:14px;padding-block:9px;justify-content:center;text-align:center}
.draftbar b{color:var(--green-500);font-weight:600;letter-spacing:.09em;text-transform:uppercase;font-size:.7rem}
.draftbar__x{margin-left:6px;opacity:.6;font-size:1.05rem;line-height:1;transition:opacity var(--t-fast)}
.draftbar__x:hover{opacity:1}
body.draft-hidden .draftbar{display:none}

/* ---------- 7. Scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  background:linear-gradient(90deg,var(--green-600),var(--tan-600));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .1s linear;pointer-events:none;
}

/* ---------- 8. Header ---------- */
.header{
  position:sticky;top:0;z-index:110;
  transition:background var(--t) var(--ease),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease),backdrop-filter var(--t);
  border-bottom:1px solid transparent;
}
.header__in{
  height:var(--header-h);display:flex;align-items:center;gap:26px;
}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;flex:none}
.brand__mark{height:40px;width:auto;transition:transform var(--t) var(--ease)}
.brand:hover .brand__mark{transform:scale(1.05) rotate(-2deg)}
.brand__txt{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--ff-display);font-weight:600;font-size:1.06rem;letter-spacing:-.01em}
.brand__sub{font-size:.585rem;letter-spacing:.2em;text-transform:uppercase;opacity:.65;font-weight:500}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  position:relative;padding:8px 14px;border-radius:var(--r-pill);
  font-size:.895rem;font-weight:500;opacity:.86;white-space:nowrap;
  transition:opacity var(--t-fast),background var(--t-fast);
}
.nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:3px;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--t) var(--ease-out);
}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.header__cta{display:flex;align-items:center;gap:12px;flex:none}
.header__tel{font-size:.88rem;font-weight:600;opacity:.85;display:flex;align-items:center;gap:7px;white-space:nowrap}
.header__tel svg{width:16px;height:16px;flex:none}
.brand__mark{width:auto}

/* header — over hero (light text) */
.header{color:#fff}
.header.is-stuck{
  background:rgba(251,248,243,.9);backdrop-filter:blur(14px) saturate(1.5);
  border-bottom-color:var(--ink-08);color:var(--ink);
  box-shadow:0 1px 20px rgba(8,32,58,.05);
}
.header.is-stuck .btn--light{--bg:var(--navy-700);--fg:#fff;--bd:var(--navy-700)}
.header.is-stuck .btn--light:hover{--bg:var(--navy-800);--bd:var(--navy-800)}
.header .brand__mark--light{display:block}
.header .brand__mark--dark{display:none}
.header.is-stuck .brand__mark--light{display:none}
.header.is-stuck .brand__mark--dark{display:block}

.burger{display:none;width:42px;height:42px;border-radius:var(--r-pill);align-items:center;justify-content:center;flex:none}
.burger span{display:block;width:20px;height:1.6px;background:currentColor;position:relative;transition:transform var(--t) var(--ease),opacity var(--t)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:1.6px;background:currentColor;transition:transform var(--t) var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* mobile drawer */
.mobnav{
  position:fixed;inset:0;z-index:105;background:var(--navy-800);color:#fff;
  padding:calc(var(--header-h) + 40px) var(--gutter) 40px;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;visibility:hidden;transform:translateY(-14px);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
}
body.menu-open .mobnav{opacity:1;visibility:visible;transform:none}
.mobnav > a{
  font-family:var(--ff-display);font-size:clamp(1.6rem,7vw,2rem);padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  opacity:0;transform:translateY(14px);
}
body.menu-open .mobnav > a{animation:mnav .5s var(--ease-out) forwards}
body.menu-open .mobnav > a:nth-child(1){animation-delay:.06s}
body.menu-open .mobnav > a:nth-child(2){animation-delay:.11s}
body.menu-open .mobnav > a:nth-child(3){animation-delay:.16s}
body.menu-open .mobnav > a:nth-child(4){animation-delay:.21s}
body.menu-open .mobnav > a:nth-child(5){animation-delay:.26s}
@keyframes mnav{to{opacity:1;transform:none}}
.mobnav__foot{margin-top:auto;display:flex;flex-direction:column;gap:16px;padding-top:26px;align-items:stretch}
.mobnav__foot .header__tel{display:flex;font-size:1rem}
.mobnav__foot .btn{width:100%}

/* ---------- 9. Hero ---------- */
.hero{position:relative;margin-top:calc(var(--header-h) * -1);min-height:min(94svh,880px);display:flex;flex-direction:column;isolation:isolate}
.hero__media{position:absolute;inset:0;overflow:hidden;z-index:-2}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);
  animation:kenburns 22s var(--ease) infinite alternate;
}
@keyframes kenburns{from{transform:scale(1.1) translate3d(0,0,0)}to{transform:scale(1.22) translate3d(-1.5%,-1.5%,0)}}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(8,32,58,.62) 0%,rgba(8,32,58,.16) 34%,rgba(8,32,58,.38) 66%,rgba(8,32,58,.86) 100%),
    radial-gradient(120% 90% at 18% 68%,rgba(8,32,58,.5),transparent 62%);
}
.hero__in{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:calc(var(--header-h) + 60px);padding-bottom:clamp(40px,7vw,86px);
  color:#fff;
}
.hero__copy{max-width:min(800px,100%)}
.hero .eyebrow{color:#fff;opacity:.9;margin-bottom:20px}
.hero__title{margin-bottom:22px;text-shadow:0 2px 34px rgba(8,32,58,.4)}
.hero__title em{font-style:italic;color:var(--green-500);font-variation-settings:"WONK" 1}
.hero__sub{font-size:clamp(1rem,1.45vw,1.14rem);color:rgba(255,255,255,.9);max-width:min(52ch,100%);margin-bottom:30px}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);font-size:.82rem;font-weight:500;
}
.pill svg{width:15px;height:15px;opacity:.85;flex:none}
.hero__scrolls{
  position:absolute;right:var(--gutter);bottom:clamp(40px,7vw,86px);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;opacity:.75;
  writing-mode:vertical-rl;
}
.hero__scrolls i{display:block;width:1px;height:56px;background:linear-gradient(#fff,transparent);animation:sdown 2.2s var(--ease) infinite}
@keyframes sdown{0%{transform:scaleY(0);transform-origin:0 0}45%{transform:scaleY(1);transform-origin:0 0}55%{transform:scaleY(1);transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}

/* ---------- 10. Search bar ---------- */
.searchbar{
  position:relative;z-index:6;
  margin-top:-46px;margin-bottom:0;
}
.searchbar__card{
  background:var(--white);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:10px;
  display:grid;grid-template-columns:1fr 1fr auto auto;gap:8px;align-items:stretch;
}
.field{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 18px;border-radius:var(--r-md);
  transition:background var(--t-fast);cursor:pointer;position:relative;
}
.field:hover{background:var(--paper-2)}
.field__label{font-size:.655rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-50)}
.field__val{font-size:.98rem;font-weight:600;display:flex;align-items:center;gap:9px}
.field__val svg{width:16px;height:16px;color:var(--green-600);flex:none}
.field + .field::before{content:"";position:absolute;left:0;top:16%;height:68%;width:1px;background:var(--ink-08)}
.searchbar .btn{align-self:center;margin-right:6px}
.searchbar__note{
  display:flex;align-items:center;gap:9px;justify-content:center;
  margin-top:14px;font-size:.8rem;color:var(--ink-50);
}
.searchbar__note b{color:var(--green-700);font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green-600);flex:none;position:relative}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--green-600);animation:ping 2s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.65}70%,100%{transform:scale(2.6);opacity:0}}

/* ---------- 11. Marquee / trust ---------- */
.trust{border-block:1px solid var(--ink-08);background:var(--paper);overflow:hidden}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-08)}
.trust__item{
  background:var(--paper);padding:30px 26px;display:flex;flex-direction:column;gap:8px;
  transition:background var(--t) var(--ease);
}
.trust__item:hover{background:var(--white)}
.trust__item svg{width:24px;height:24px;color:var(--green-600);margin-bottom:4px}
.trust__item b{font-size:1.02rem;font-weight:600;font-family:var(--ff-display)}
.trust__item span{font-size:.83rem;color:var(--ink-50);line-height:1.5}

/* ---------- 12. Night picker ---------- */
.nights{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
}
.night{
  --b:var(--ink-15);
  position:relative;display:flex;flex-direction:column;gap:1px;
  padding:12px 20px;border-radius:var(--r-md);
  border:1.5px solid var(--b);background:var(--white);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast),transform var(--t-fast) var(--ease),box-shadow var(--t-fast);
  text-align:left;min-width:118px;
}
.night:hover{--b:var(--navy-300);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.night small{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);font-weight:600}
.night b{font-size:.98rem;font-weight:600}
.night.is-on{--b:var(--green-600);background:var(--green-100)}
.night.is-on small{color:var(--green-700)}
.night__tick{
  position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  background:var(--green-600);color:#fff;display:grid;place-items:center;
  transform:scale(0);transition:transform var(--t) var(--ease-out);
}
.night.is-on .night__tick{transform:scale(1)}
.night__tick svg{width:12px;height:12px}
.nights__sum{font-size:.85rem;color:var(--ink-50);margin-left:6px}
.nights__sum b{color:var(--ink);font-weight:600}

/* ---------- 13. Room cards ---------- */
.bldg{margin-bottom:clamp(46px,5vw,74px)}
.bldg__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:26px;border-bottom:1px solid var(--ink-15);
}
.bldg__head h3{display:flex;align-items:center;gap:12px}
.bldg__badge{
  font-family:var(--ff-sans);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-pill);background:var(--green-100);color:var(--green-700);
}
.bldg__desc{font-size:.92rem;color:var(--ink-50);max-width:62ch;margin-top:8px}

.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:clamp(18px,2vw,26px)}
.room{
  background:var(--white);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--ink-08);
  display:flex;flex-direction:column;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t);
}
.room:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:transparent}
.room.is-picked{border-color:var(--green-600);box-shadow:0 0 0 1px var(--green-600),var(--shadow-md)}

.gal{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.gal__track{position:absolute;inset:0}
.gal__slide{
  position:absolute;inset:0;opacity:0;transform:scale(1.04);
  transition:opacity .6s var(--ease),transform .9s var(--ease);
}
.gal__slide.is-on{opacity:1;transform:scale(1)}
.gal__slide img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.room:hover .gal__slide.is-on img{transform:scale(1.06)}
.gal__nav{
  position:absolute;top:50%;translate:0 -50%;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--navy-800);display:grid;place-items:center;
  box-shadow:var(--shadow-sm);opacity:0;transition:opacity var(--t),transform var(--t-fast) var(--ease);
}
.gal__nav svg{width:15px;height:15px}
.gal__nav--prev{left:12px;transform:translateX(-6px)}
.gal__nav--next{right:12px;transform:translateX(6px)}
.room:hover .gal__nav,.gal:focus-within .gal__nav{opacity:1;transform:translateX(0)}
.gal__nav:hover{background:#fff;scale:1.08}
.gal__dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:6px}
.gal__dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);transition:all var(--t) var(--ease)}
.gal__dots i.is-on{width:18px;border-radius:var(--r-pill);background:#fff}
.gal__tag{
  position:absolute;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:var(--r-pill);font-size:.72rem;font-weight:600;
  background:rgba(8,32,58,.62);color:#fff;backdrop-filter:blur(8px);
}
.gal__tag--low{background:rgba(180,71,47,.86)}
.gal__tag--out{background:rgba(22,32,43,.8)}

.room__body{padding:22px 22px 0;display:flex;flex-direction:column;gap:12px;flex:1}
.room__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.room__name{font-family:var(--ff-display);font-size:1.24rem;font-weight:600;line-height:1.18}
.room__price{text-align:right;flex:none}
.room__price b{font-family:var(--ff-display);font-size:1.36rem;font-weight:600;display:block;line-height:1}
.room__price span{font-size:.72rem;color:var(--ink-50)}
.room__meta{display:flex;flex-wrap:wrap;gap:7px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  background:var(--paper-2);font-size:.75rem;font-weight:500;color:var(--ink-70);
  transition:background var(--t-fast),color var(--t-fast);
}
.chip svg{width:13px;height:13px;opacity:.6}
.room:hover .chip{background:var(--tan-100)}
.room__desc{font-size:.875rem;color:var(--ink-50);line-height:1.6}
.room__foot{
  margin-top:auto;padding:16px 22px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.room__avail{font-size:.78rem;font-weight:600;display:flex;align-items:center;gap:7px;color:var(--green-700)}
.room__avail.is-low{color:var(--danger)}
.room__avail .dot{background:currentColor}
.room__avail .dot::after{background:currentColor}

.stepper{display:flex;align-items:center;gap:2px;background:var(--paper-2);border-radius:var(--r-pill);padding:4px}
.stepper button{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.stepper button:hover:not([disabled]){background:var(--navy-700);color:#fff}
.stepper button:active:not([disabled]){transform:scale(.9)}
.stepper button[disabled]{opacity:.3;cursor:not-allowed}
.stepper svg{width:14px;height:14px}
.stepper output{min-width:26px;text-align:center;font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums}

/* ---------- 14. Reveal animation ---------- */
[data-rise]{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
[data-rise].is-in{opacity:1;transform:none}
[data-rise-scale]{opacity:0;transform:translateY(30px) scale(.97);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-rise-scale].is-in{opacity:1;transform:none}
.reveal-mask{overflow:hidden;display:block}
.reveal-mask > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease-out)}
.is-in .reveal-mask > span,.reveal-mask.is-in > span{transform:none}
@media (prefers-reduced-motion:reduce){
  [data-rise],[data-rise-scale],.reveal-mask > span{opacity:1!important;transform:none!important;transition:none!important}
  .hero__media img{animation:none;transform:scale(1.02)}
  .dot::after,.hero__scrolls i{animation:none}
  *{scroll-behavior:auto!important}
}

/* ---------- 15. Buildings showcase ---------- */
.show{display:flex;flex-direction:column;gap:clamp(56px,7vw,104px)}
.show__row{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center}
.show__row:nth-child(even) .show__media{order:2}
.show__media{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:5/4;box-shadow:var(--shadow-lg)}
.show__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);will-change:transform}
.show__media:hover img{transform:scale(1.05)}
.show__media--stack{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:5/4;box-shadow:none;border-radius:0;background:transparent}
.show__media--stack figure{margin:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-md)}
.show__media--stack figure:first-child{grid-row:span 2;border-radius:var(--r-lg)}
.show__media--stack img{width:100%;height:100%;object-fit:cover}
.show__copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.show__stats{display:flex;gap:30px;flex-wrap:wrap;margin-top:6px}
.show__stat b{font-family:var(--ff-display);font-size:1.85rem;display:block;line-height:1;color:var(--navy-700)}
.show__stat span{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-50);font-weight:600}
.ticks{display:flex;flex-direction:column;gap:10px}
.ticks li{display:flex;gap:11px;font-size:.93rem;color:var(--ink-70);line-height:1.55}
.ticks svg{width:17px;height:17px;color:var(--green-600);flex:none;margin-top:4px}

/* ---------- 16. Amenities ---------- */
.amen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.13);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:900px){.amen{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.amen{grid-template-columns:1fr}}
.amen__i{
  background:var(--navy-800);padding:30px 26px;display:flex;flex-direction:column;gap:9px;
  transition:background var(--t) var(--ease);position:relative;overflow:hidden;
}
.amen__i::after{
  content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(107,147,80,.22),transparent 60%);
  opacity:0;transition:opacity var(--t) var(--ease);
}
.amen__i:hover{background:var(--navy-700)}
.amen__i:hover::after{opacity:1}
.amen__i svg{width:25px;height:25px;color:var(--green-500);margin-bottom:6px;position:relative;transition:transform var(--t) var(--ease)}
.amen__i:hover svg{transform:translateY(-3px) scale(1.08)}
.amen__i b{font-size:1rem;font-weight:600;position:relative}
.amen__i span{font-size:.83rem;color:rgba(255,255,255,.62);line-height:1.55;position:relative}

/* ---------- 17. Fair block ---------- */
.fair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,66px);align-items:center}
.fair__media{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow-lg)}
.fair__media img{width:100%;height:100%;object-fit:cover}
.fair__badge{
  position:absolute;left:22px;bottom:22px;right:22px;
  background:rgba(251,248,243,.94);backdrop-filter:blur(10px);
  border-radius:var(--r-md);padding:16px 20px;display:flex;align-items:center;gap:16px;
  box-shadow:var(--shadow-md);
}
.fair__badge svg{width:26px;height:26px;color:var(--green-600);flex:none}
.fair__badge b{display:block;font-size:.98rem;font-weight:600}
.fair__badge span{font-size:.79rem;color:var(--ink-50)}
.timeline{display:flex;flex-direction:column;gap:0;margin-top:8px}
.timeline li{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--ink-08);align-items:baseline}
.timeline li:last-child{border-bottom:0}
.timeline time{font-family:var(--ff-display);font-size:1rem;font-weight:600;min-width:112px;flex:none;color:var(--navy-700)}
.timeline p{font-size:.9rem;color:var(--ink-70)}

/* ---------- 18. Accordion ---------- */
.acc{border-top:1px solid var(--ink-15)}
.acc__i{border-bottom:1px solid var(--ink-15)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;text-align:left;font-size:1.02rem;font-weight:600;font-family:var(--ff-display);
  transition:color var(--t-fast);
}
.acc__btn:hover{color:var(--navy-600)}
.acc__ico{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--ink-15);
  display:grid;place-items:center;flex:none;transition:all var(--t) var(--ease);
}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;background:currentColor;transition:transform var(--t) var(--ease),opacity var(--t)}
.acc__ico{position:relative}
.acc__ico::before{width:11px;height:1.5px}
.acc__ico::after{width:1.5px;height:11px}
.acc__i.is-open .acc__ico{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.acc__i.is-open .acc__ico::before{transform:rotate(180deg)}
.acc__i.is-open .acc__ico::after{opacity:0}
.acc__panel{overflow:hidden;height:0;transition:height var(--t) var(--ease)}
.acc__panel > div{padding-bottom:24px;color:var(--ink-70);font-size:.93rem;line-height:1.72;max-width:74ch}
.acc__panel ul{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.acc__panel li{display:flex;gap:10px}
.acc__panel li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green-600);flex:none;margin-top:10px}

/* ---------- 19. Booking bar + drawer ---------- */
.bookbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--navy-800);color:#fff;
  transform:translateY(101%);transition:transform .5s var(--ease-out);
  box-shadow:0 -8px 40px rgba(8,32,58,.28);
}
.bookbar.is-up{transform:none}
.bookbar__in{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap}
.bookbar__sum{display:flex;flex-direction:column;gap:1px;margin-right:auto}
.bookbar__sum b{font-size:1.02rem;font-weight:600}
.bookbar__sum span{font-size:.79rem;color:rgba(255,255,255,.6)}
.bookbar__tot{text-align:right}
.bookbar__tot b{font-family:var(--ff-display);font-size:1.5rem;display:block;line-height:1.1}
.bookbar__tot span{font-size:.72rem;color:rgba(255,255,255,.6)}

.drawer{
  position:fixed;inset:0;z-index:130;display:grid;place-items:end center;
  pointer-events:none;
}
.drawer__scrim{
  position:absolute;inset:0;background:rgba(8,32,58,.55);backdrop-filter:blur(4px);
  opacity:0;transition:opacity var(--t) var(--ease);
}
.drawer__card{
  position:relative;width:min(560px,100%);max-height:92svh;overflow:auto;
  background:var(--paper);border-radius:var(--r-xl) var(--r-xl) 0 0;
  transform:translateY(30px) scale(.98);opacity:0;
  transition:transform .5s var(--ease-out),opacity .35s var(--ease);
  box-shadow:var(--shadow-lg);
}
.drawer.is-open{pointer-events:auto}
.drawer.is-open .drawer__scrim{opacity:1}
.drawer.is-open .drawer__card{transform:none;opacity:1}
@media(min-width:760px){
  .drawer{place-items:center}
  .drawer__card{border-radius:var(--r-xl);max-height:88svh}
}
.drawer__head{
  position:sticky;top:0;z-index:2;background:var(--paper);
  padding:24px 26px 16px;border-bottom:1px solid var(--ink-08);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.drawer__x{width:34px;height:34px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;transition:background var(--t-fast),transform var(--t-fast)}
.drawer__x:hover{background:var(--ink-15);transform:rotate(90deg)}
.drawer__x svg{width:15px;height:15px}
.drawer__body{padding:22px 26px 26px;display:flex;flex-direction:column;gap:18px}

.steps{display:flex;gap:8px;padding:0 26px 16px}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--ink-15);transition:background var(--t) var(--ease)}
.steps i.is-on{background:var(--green-600)}

.line{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--ink-08)}
.line:last-of-type{border-bottom:0}
.line__l b{display:block;font-weight:600;font-size:.95rem}
.line__l span{font-size:.79rem;color:var(--ink-50)}
.line__r{font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.total{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:2px solid var(--ink);margin-top:4px}
.total b{font-family:var(--ff-display);font-size:1.5rem}
.notebox{
  background:var(--green-100);border-radius:var(--r-md);padding:15px 17px;
  display:flex;gap:12px;font-size:.845rem;line-height:1.6;color:var(--green-700);
}
.notebox svg{width:18px;height:18px;flex:none;margin-top:2px}
.notebox--tan{background:var(--tan-100);color:#6C5B45}

.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;font-weight:600;letter-spacing:.03em;color:var(--ink-70)}
.form .wide{grid-column:1/-1}
.form input,.form textarea,.form select{
  padding:12px 14px;border-radius:var(--r-sm);border:1.5px solid var(--ink-15);
  background:var(--white);font-size:.94rem;font-weight:400;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color:var(--green-600);box-shadow:0 0 0 3px var(--green-100);
}
.form textarea{resize:vertical;min-height:78px}
.paybox{
  border:1.5px dashed var(--ink-15);border-radius:var(--r-md);padding:22px;
  display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;
}
.paybox svg{width:28px;height:28px;color:var(--navy-300)}
.paybox b{font-size:.95rem}
.paybox span{font-size:.82rem;color:var(--ink-50);max-width:38ch}

.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:14px 0 6px}
.done__ring{
  width:74px;height:74px;border-radius:50%;background:var(--green-100);
  display:grid;place-items:center;color:var(--green-700);
  animation:pop .6s var(--ease-out) both;
}
.done__ring svg{width:32px;height:32px}
@keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* ---------- 20. Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:96px;translate:-50% 0;z-index:125;
  background:var(--navy-800);color:#fff;border-radius:var(--r-pill);
  padding:12px 22px;font-size:.88rem;font-weight:500;
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease-out);
}
.toast.is-on{opacity:1;transform:none}
.toast svg{width:16px;height:16px;color:var(--green-500)}

/* ---------- 21. CTA band ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(44px,6vw,78px) clamp(28px,5vw,64px);
  background:var(--navy-800);color:#fff;isolation:isolate;
}
.cta__bg{position:absolute;inset:0;z-index:-2;opacity:.3}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--navy-800) 22%,rgba(12,42,69,.72) 62%,rgba(12,42,69,.4))}
.cta__in{max-width:56ch;display:flex;flex-direction:column;gap:18px;align-items:flex-start}

/* ---------- 22. Footer ---------- */
.footer{background:var(--navy-900);color:rgba(255,255,255,.72);padding-top:clamp(52px,6vw,80px)}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px}
.footer__logo{height:78px;width:auto;margin-bottom:16px}
.footer p{font-size:.875rem;line-height:1.7;max-width:34ch}
.footer h4{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:600}
.footer li + li{margin-top:9px}
.footer li a{font-size:.885rem;transition:color var(--t-fast),padding-left var(--t-fast) var(--ease)}
.footer li a:hover{color:#fff;padding-left:5px}
.footer__bar{
  border-top:1px solid rgba(255,255,255,.1);padding-block:20px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.79rem;opacity:.6;
}

/* ---------- 23. Responsive ---------- */
@media (max-width:1080px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .show__row{grid-template-columns:1fr;gap:30px}
  .show__row:nth-child(even) .show__media{order:0}
  .fair{grid-template-columns:1fr}
  .trust__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav,.header__tel{display:none}
  .burger{display:flex}
  .searchbar__card{grid-template-columns:1fr 1fr}
  .searchbar .btn{grid-column:1/-1;margin:6px 0 0;width:100%}
  .field + .field::before{display:none}
  .field{background:var(--paper-2)}
}
@media (max-width:640px){
  :root{--header-h:66px}
  .hero{min-height:min(88svh,760px)}
  .hero__copy{max-width:none}
  .hero__scrolls{display:none}
  .searchbar__card{grid-template-columns:1fr}
  .trust__grid{grid-template-columns:1fr}
  .rooms{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:32px}
  .bookbar__in{gap:12px}
  .bookbar__sum{width:100%;margin-right:0}
  .bookbar .btn{flex:1}
  .show__media--stack{aspect-ratio:4/3}
  .timeline li{flex-direction:column;gap:4px}
  .timeline time{min-width:0}
}
@media (max-width:400px){
  .night{min-width:calc(50% - 5px);flex:1}
}

/* ---------- 24. Small-screen refinements ---------- */
@media (max-width:640px){
  .hero .eyebrow{font-size:.6rem;letter-spacing:.13em;gap:8px}
  .hero .eyebrow::before{width:18px}
  .draftbar__in{flex-wrap:wrap;gap:4px 10px;font-size:.72rem;text-align:left;justify-content:flex-start;padding-right:26px;position:relative}
  .draftbar__x{position:absolute;right:0;top:8px;margin:0}
  .searchbar{margin-top:-28px}
  .bookbar__tot{margin-left:auto}
}
@media (max-width:640px){ .toast{bottom:176px;max-width:calc(100% - 32px)} }

/* ==========================================================================
   25. MULTI-PAGE ADDITIONS
   ========================================================================== */

/* ---------- 25.1 Inner-page hero ---------- */
.phero{
  position:relative;margin-top:calc(var(--header-h) * -1);
  min-height:min(60svh,520px);display:flex;align-items:flex-end;
  isolation:isolate;overflow:hidden;
}
.phero--short{min-height:min(44svh,400px)}
.phero__media{position:absolute;inset:0;z-index:-2}
.phero__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:kenburns 26s var(--ease) infinite alternate}
.phero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,32,58,.72) 0%,rgba(8,32,58,.3) 40%,rgba(8,32,58,.82) 100%);
}
.phero__in{
  padding-top:calc(var(--header-h) + 56px);padding-bottom:clamp(34px,5vw,62px);
  color:#fff;width:100%;
}
.phero__in .eyebrow{color:#fff;opacity:.9;margin-bottom:16px}
.phero__title{max-width:min(760px,100%);margin-bottom:16px}
.phero__sub{font-size:clamp(1rem,1.4vw,1.12rem);color:rgba(255,255,255,.86);max-width:min(58ch,100%)}
/* plain (no photo) variant */
.phero--plain{min-height:0;margin-top:0;background:var(--paper-2);border-bottom:1px solid var(--ink-08)}
.phero--plain .phero__in{padding-top:clamp(46px,6vw,78px);padding-bottom:clamp(34px,4vw,54px);color:var(--ink)}
.phero--plain .eyebrow{color:var(--green-700);opacity:1}
.phero--plain .phero__sub{color:var(--ink-70)}

/* ---------- 25.2 Breadcrumb ---------- */
.crumb{display:flex;align-items:center;gap:9px;font-size:.79rem;margin-bottom:18px;opacity:.78}
.crumb a{transition:opacity var(--t-fast)}
.crumb a:hover{opacity:.7;text-decoration:underline;text-underline-offset:3px}
.crumb svg{width:12px;height:12px;opacity:.55}
.crumb span[aria-current]{font-weight:600}

/* ---------- 25.3 House animation ---------- */
.house{width:100%;max-width:620px;height:auto;overflow:visible}
.house .h-draw{
  fill:none;stroke:var(--navy-700);stroke-width:7;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);
}
.house .h-ground{stroke:var(--tan-600);stroke-width:5;opacity:.55}
.house .h-win{fill:var(--tan-600);opacity:0;transform-origin:center;transform-box:fill-box}
.house .h-glow{fill:#F5C77E;opacity:0}
.house .h-leaf{fill:var(--green-600);opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.house .h-trunk{stroke:var(--navy-700);stroke-width:8;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}

.house.is-on .h-draw,.house.is-on .h-trunk{animation:hdraw 1.05s var(--ease-out) forwards}
.house.is-on .h-win{animation:hwin .5s var(--ease-out) forwards}
.house.is-on .h-glow{animation:hglow 3.4s var(--ease) infinite}
.house.is-on .h-leaf{animation:hleaf .62s var(--ease-out) forwards, hsway 5.2s var(--ease) infinite}

@keyframes hdraw{to{stroke-dashoffset:0}}
@keyframes hwin{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes hglow{0%,100%{opacity:.18}50%{opacity:.85}}
@keyframes hleaf{from{opacity:0;transform:scale(.2) rotate(-14deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes hsway{0%,100%{rotate:0deg}50%{rotate:3.5deg}}

/* stagger — centre house first, then the wings, then tree, then lights */
.house.is-on .h-g2 .h-draw{animation-delay:.05s}
.house.is-on .h-g1 .h-draw{animation-delay:.22s}
.house.is-on .h-g3 .h-draw{animation-delay:.36s}
.house.is-on .h-trunk{animation-delay:.62s}
.house.is-on .h-leaves > g:nth-child(1) .h-leaf{animation-delay:.98s,2.2s}
.house.is-on .h-leaves > g:nth-child(2) .h-leaf{animation-delay:1.08s,2.5s}
.house.is-on .h-leaves > g:nth-child(3) .h-leaf{animation-delay:1.18s,2.0s}
.house.is-on .h-leaves > g:nth-child(4) .h-leaf{animation-delay:1.28s,2.7s}
.house.is-on .h-leaves > g:nth-child(5) .h-leaf{animation-delay:1.38s,2.3s}
.house.is-on .h-wins > *:nth-child(1){animation-delay:1.00s}
.house.is-on .h-wins > *:nth-child(2){animation-delay:1.10s}
.house.is-on .h-wins > *:nth-child(3){animation-delay:1.20s}
.house.is-on .h-wins > *:nth-child(4){animation-delay:1.30s}
.house.is-on .h-wins > *:nth-child(5){animation-delay:1.40s}
.house.is-on .h-glows > *:nth-child(1){animation-delay:1.7s}
.house.is-on .h-glows > *:nth-child(2){animation-delay:2.3s}
.house.is-on .h-glows > *:nth-child(3){animation-delay:1.9s}
.house.is-on .h-glows > *:nth-child(4){animation-delay:2.6s}

.house--light .h-draw,.house--light .h-trunk{stroke:rgba(255,255,255,.9)}
.house--light .h-ground{stroke:rgba(255,255,255,.4)}
.house--light .h-win{fill:var(--tan-300)}

.housewrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
.housewrap__copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
@media (max-width:900px){.housewrap{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .house .h-draw,.house .h-trunk{stroke-dashoffset:0!important;animation:none!important}
  .house .h-win,.house .h-leaf{opacity:1!important;animation:none!important;transform:none!important}
  .house .h-glow{opacity:.5!important;animation:none!important}
  .phero__media img{animation:none}
}

/* ---------- 25.4 Home teaser cards ---------- */
.tease{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
@media (max-width:900px){.tease{grid-template-columns:1fr}}
.tcard{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;isolation:isolate;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.tcard:hover img{transform:scale(1.07)}
.tcard::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,32,58,.05) 30%,rgba(8,32,58,.82) 100%);
}
.tcard__in{padding:26px;display:flex;flex-direction:column;gap:9px}
.tcard__in h3{font-family:var(--ff-display);font-size:1.36rem;font-weight:600;line-height:1.2}
.tcard__in p{font-size:.86rem;color:rgba(255,255,255,.78);line-height:1.55}
.tcard__meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.tcard__meta span{
  font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);
}
.tcard__go{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.88rem;margin-top:6px;
}
.tcard__go svg{width:15px;height:15px;transition:transform var(--t-fast) var(--ease)}
.tcard:hover .tcard__go svg{transform:translateX(4px)}

/* ---------- 25.5 Room detail page ---------- */
.rdetail{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:1000px){.rdetail{grid-template-columns:1fr}}
.rgal{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rgal figure{margin:0;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3;background:var(--paper-2)}
.rgal figure:first-child{grid-column:1/-1;aspect-ratio:16/10;border-radius:var(--r-lg)}
.rgal img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.rgal figure:hover img{transform:scale(1.05)}
.rbody{display:flex;flex-direction:column;gap:22px;margin-top:clamp(26px,3vw,38px)}
.rbody h2{font-family:var(--ff-display);font-size:1.4rem;font-weight:600}
.rbook{
  position:sticky;top:calc(var(--header-h) + 22px);
  background:var(--white);border:1px solid var(--ink-08);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:16px;
}
.rbook__price{display:flex;align-items:baseline;gap:8px}
.rbook__price b{font-family:var(--ff-display);font-size:2rem;font-weight:600;line-height:1}
.rbook__price span{font-size:.85rem;color:var(--ink-50)}
.rbook hr{border:0;border-top:1px solid var(--ink-08);margin:0}
.rspecs{display:flex;flex-direction:column;gap:0}
.rspecs li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--ink-08);font-size:.89rem}
.rspecs li:last-child{border-bottom:0}
.rspecs b{font-weight:600}
.rspecs span{color:var(--ink-50);text-align:right}

/* ---------- 25.6 Checkout page ---------- */
.cowrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,4vw,54px);align-items:start}
@media (max-width:960px){.cowrap{grid-template-columns:1fr}}
.copanel{
  background:var(--white);border:1px solid var(--ink-08);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-sm);
}
.coaside{
  position:sticky;top:calc(var(--header-h) + 22px);
  background:var(--white);border:1px solid var(--ink-08);border-radius:var(--r-lg);
  padding:24px;box-shadow:var(--shadow-md);
}
@media (max-width:960px){.coaside{position:static}}
.costeps{display:flex;gap:6px;margin-bottom:26px}
.costep{flex:1;display:flex;flex-direction:column;gap:8px}
.costep i{height:3px;border-radius:2px;background:var(--ink-15);transition:background var(--t) var(--ease)}
.costep.is-on i,.costep.is-done i{background:var(--green-600)}
.costep small{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50)}
.costep.is-on small{color:var(--green-700)}
.coempty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:clamp(30px,5vw,60px) 20px}
.coempty .house{max-width:280px}

/* ---------- 25.7 Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.cinfo{display:flex;flex-direction:column;gap:0}
.cinfo li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--ink-15);align-items:flex-start}
.cinfo li:first-child{padding-top:0}
.cinfo svg{width:20px;height:20px;color:var(--green-600);flex:none;margin-top:3px}
.cinfo b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);margin-bottom:3px;font-weight:600}
.cinfo a,.cinfo p{font-size:1rem;font-weight:500}
.cinfo a:hover{color:var(--navy-600)}

/* ---------- 25.8 Misc ---------- */
.quicksearch{
  background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:10px;
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;
}
@media (max-width:640px){.quicksearch{grid-template-columns:1fr}.quicksearch .btn{width:100%}}
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-08);border-radius:var(--r-lg);overflow:hidden}
@media (max-width:760px){.statband{grid-template-columns:repeat(2,1fr)}}
.statband div{background:var(--paper);padding:26px 22px}
.statband b{font-family:var(--ff-display);font-size:2.1rem;display:block;line-height:1;color:var(--navy-700)}
.statband span{font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-50);font-weight:600}
.nav a.is-here::after{transform:scaleX(1)}

/* ---------- 26. Solid header (inner pages, no photo hero) ---------- */
.header--solid{
  background:rgba(251,248,243,.92);backdrop-filter:blur(14px) saturate(1.5);
  border-bottom-color:var(--ink-08);color:var(--ink);
}
.header--solid .brand__mark--light{display:none}
.header--solid .brand__mark--dark{display:block}
.header--solid .btn--light{--bg:var(--navy-700);--fg:#fff;--bd:var(--navy-700)}
.header--solid .btn--light:hover{--bg:var(--navy-800);--bd:var(--navy-800)}

/* ---------- 27. Multi-page mobile refinements ---------- */
@media (max-width:1000px){
  .rbook{position:static}
}
@media (max-width:560px){
  .rgal{grid-template-columns:1fr}
  .rgal figure,.rgal figure:first-child{aspect-ratio:4/3}
  .costeps{gap:4px}
  .costep small{font-size:.6rem;letter-spacing:.06em}
  .phero__in{padding-bottom:clamp(28px,6vw,40px)}
  .crumb{font-size:.74rem;flex-wrap:wrap}
  .cinfo li{padding:16px 0}
}

/* ==========================================================================
   28. WORDPRESS / ELEMENTOR INTEGRATION
   The design is full-bleed. Block themes and some page builders wrap page
   content in a constrained-width container; these rules let our sections
   escape it without the client having to configure anything.
   ========================================================================== */
:where(.is-layout-constrained, .entry-content, .wp-block-post-content, .site-main, .elementor-widget-html, .elementor-widget-container)
  > :is(.hero, .phero, .section, .trust, .searchbar, .cta, .bldg, .rdetail, .cowrap, .contact, .housewrap, .tease, .acc) {
  max-width: none;
  width: auto;
  margin-inline: 0;
}

/* Elementor wraps every HTML widget; never let that wrapper clip a sticky
   sidebar or a full-bleed hero. */
.elementor-widget-html > .elementor-widget-container { overflow: visible; }
.elementor-section, .elementor-container, .e-con, .e-con-inner { overflow: visible; }


/* Block-theme resets that would otherwise fight the design system. */
.ucb-rooms-app ul, .rspecs, .cinfo, .ticks, .timeline { list-style: none; padding-left: 0; }
.ucb-rooms-app figure, .rgal figure, .show__media--stack figure { margin: 0; }
.room__name a { text-decoration: none; color: inherit; }
.room__name a:hover { color: var(--navy-600); }

/* Admin bar offset for the sticky header. */
body.admin-bar .header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .header { top: 46px; } }

/* ==========================================================================
   29. HARDENING AGAINST THEME / PAGE-BUILDER RESETS
   Elementor ships `.elementor img { height:auto }` at the same specificity as
   our own image rules, so whichever stylesheet loads last wins. We also load
   after Elementor, but pin the rules that actually matter so the layout can
   never collapse if load order changes.
   ========================================================================== */
.hero .hero__media img,
.phero .phero__media img,
.cta .cta__bg img { width: 100%; height: 100%; object-fit: cover; max-width: none; }

.gal .gal__slide img,
.tcard > img,
.show__media > img,
.show__media--stack figure img,
.fair__media > img,
.rgal figure img { width: 100%; height: 100%; object-fit: cover; max-width: none; }

.header .brand .brand__mark { height: 40px; width: auto; max-width: none; }
.footer .footer__logo { height: 78px; width: auto; max-width: none; }

/* Link colour: the design controls its own palette. */
.header a, .mobnav a, .footer a, .bookbar a, .tcard, .tcard a { color: inherit; }
.header .nav a:hover, .mobnav a:hover { color: inherit; }
.footer li a:hover { color: #fff; }
.room__name a, .link-arrow { color: inherit; }
.link-arrow { color: var(--navy-700); }
.btn, .btn:hover, .btn:focus { color: var(--fg); text-decoration: none; }
.header .btn--light { color: #fff; }
.header.is-stuck .btn--light, .header--solid .btn--light { color: #fff; }

/* Elementor's editor + frontend add margins to bare elements. */
.ucb-rooms-app p, .rbody p, .housewrap__copy p, .show__copy p { margin: 0; }
.elementor-widget-html h1, .elementor-widget-html h2,
.elementor-widget-html h3, .elementor-widget-html h4 { margin: 0; }

/* Hello Elementor constrains .site-main; our sections are full-bleed. */
.site-main, .page-content, .elementor-widget-html { max-width: none; }

/* ==========================================================================
   30. FULL-BLEED MEDIA LAYERS WITHOUT NEGATIVE z-index
   The draft used z-index:-2/-1 for hero media and scrims. That relies on the
   section being a direct child of <body>; nested inside a page builder's
   section/column/widget wrappers it is unreliable. Positive, explicit layers
   behave identically and survive any nesting.
   ========================================================================== */
.hero, .phero, .cta { position: relative; isolation: isolate; }

.hero .hero__media,
.phero .phero__media,
.cta .cta__bg { z-index: 0; }

.hero .hero__scrim,
.phero .phero__scrim { z-index: 1; }

.cta::after { z-index: 1; }

.hero .hero__in,
.hero .hero__scrolls,
.phero .phero__in,
.cta .cta__in { position: relative; z-index: 2; }

/* Ken Burns: without an explicitly promoted compositor layer, an infinite
   transform animation on an image nested inside a page builder's stacking
   contexts can animate without ever painting. Forcing the layer fixes it. */
.hero .hero__media img,
.phero .phero__media img {
  will-change: transform;
  backface-visibility: hidden;
}

/* Parallax images get an inline transform from JS — promote them too. */
[data-parallax] img,
.show__media img,
.tcard > img,
.fair__media > img { will-change: transform; backface-visibility: hidden; }

/* ==========================================================================
   31. COLOUR CONTROL
   Elementor's Global Kit sets a site-wide link colour that leaks into every
   HTML widget. The design owns its own palette, so links inside our sections
   inherit from their container instead.
   ========================================================================== */
.hero a, .phero a, .section a, .trust a, .searchbar a, .bldg a, .room a,
.tcard a, .cta a, .footer a, .bookbar a, .cinfo a, .crumb a, .acc a,
.rbook a, .rdetail a, .coaside a, .copanel a, .housewrap a, .timeline a,
.mobnav a, .header a { color: inherit; }

.night, .night b, .night small { color: inherit; }
.night { color: var(--ink); }
.night small { color: var(--ink-50); }
.night.is-on small { color: var(--green-700); }

.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-arrow { color: var(--navy-700); }
.section--navy a, .footer a, .bookbar a, .cta a, .tcard a { color: inherit; }
.btn--green, .btn--green:hover { color: #fff; }
.btn--ghost { color: var(--ink); }
.section--navy .btn--ghost, .cta .btn--ghost { color: #fff; }

/* Elementor kit also sets heading colours. */
.hero h1, .hero h2, .phero h1, .phero h2, .cta h2, .section--navy h2,
.tcard h3, .footer h4 { color: inherit; }
.hero__title, .phero__title { color: #fff; }
.phero--plain .phero__title { color: var(--ink); }

/* ==========================================================================
   32. BUTTON RESET INSIDE OUR COMPONENTS
   Elementor's Global Kit styles bare <button> elements (border, radius,
   colour, padding). Our components draw their own chrome, so re-assert it.
   ========================================================================== */
.acc .acc__btn {
  background: transparent; border: 0; border-radius: 0;
  color: var(--ink); padding: 22px 0; box-shadow: none; text-align: left;
}
.acc .acc__btn:hover { color: var(--navy-600); background: transparent; }

.nights .night {
  background: var(--white); color: var(--ink);
  border: 1.5px solid var(--b, var(--ink-15)); border-radius: var(--r-md);
  padding: 12px 20px; box-shadow: none;
}
.nights .night.is-on { background: var(--green-100); border-color: var(--green-600); }
.nights .night b { color: var(--ink); }

.stepper button {
  background: transparent; border: 0; border-radius: 50%;
  color: var(--ink); padding: 0; width: 32px; height: 32px; box-shadow: none;
}
.stepper button:hover:not([disabled]) { background: var(--navy-700); color: #fff; }

.gal .gal__nav {
  background: rgba(255,255,255,.9); border: 0; color: var(--navy-800);
  padding: 0; border-radius: 50%; box-shadow: var(--shadow-sm);
}
.header .burger { background: transparent; border: 0; padding: 0; color: inherit; box-shadow: none; }
.draftbar__x { background: transparent; border: 0; padding: 0; color: inherit; }

/* ==========================================================================
   33. HERO MOTION
   The image must be promoted to its own compositor layer, otherwise the
   Ken Burns transform animates without ever being painted inside Elementor's
   nested stacking contexts. `will-change` is load-bearing here, not a hint.
   ========================================================================== */
.hero .hero__media img,
.phero .phero__media img {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1.12);
  animation: kenburns 22s var(--ease) infinite alternate;
  object-position: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero__media img,
  .phero .phero__media img { animation: none; transform: translateZ(0) scale(1.04); }
}

/* Background-painted hero media (set up by ucb-app.js). Animating
   background-position is a paint-only operation, so it is immune to the
   compositor-layer problem that affects a transformed <img>. */
.hero__media.is-bg, .phero__media.is-bg, .cta__bg.is-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 46%;
  animation: ucb-drift 26s var(--ease) infinite alternate;
}
@keyframes ucb-drift {
  from { background-position: 50% 40%; background-size: 112% auto; }
  to   { background-position: 50% 60%; background-size: 122% auto; }
}
@media (max-width: 900px) {
  @keyframes ucb-drift {
    from { background-position: 50% 42%; background-size: cover; }
    to   { background-position: 50% 58%; background-size: cover; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media.is-bg, .phero__media.is-bg, .cta__bg.is-bg {
    animation: none; background-position: 50% 50%; background-size: cover;
  }
}

/* ==========================================================================
   34. NIGHT PICKER HOVER
   Elementor's Global Kit gives every <button> a hover background. The night
   chips carry their own state colours, so pin them.
   ========================================================================== */
.nights .night:hover,
.nights .night:focus-visible {
  background: var(--white);
  border-color: var(--navy-300);
  color: var(--ink);
}
.nights .night.is-on:hover,
.nights .night.is-on:focus-visible {
  background: var(--green-100);
  border-color: var(--green-600);
  color: var(--ink);
}
.nights .night:hover b, .nights .night.is-on:hover b { color: var(--ink); }
.nights .night:hover small { color: var(--ink-50); }
.nights .night.is-on:hover small { color: var(--green-700); }

/* Same for the other bare buttons the Kit likes to recolour. */
.acc .acc__btn:hover, .acc .acc__btn:focus-visible { background: transparent; }
.stepper button:focus-visible { background: var(--navy-700); color: #fff; }

/* ==========================================================================
   35. ELEMENTOR PRO FORM — design system styling
   The contact form is an Elementor Form widget so the client can edit it.
   These rules make it match the rest of the site.
   ========================================================================== */
.elementor-widget-form .elementor-form { display: grid; gap: 14px; }

.elementor-widget-form .elementor-field-group > label,
.elementor-widget-form .elementor-field-group .elementor-field-label {
  font-family: var(--ff-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--ink-70);
  margin-bottom: 6px;
}

.elementor-widget-form .elementor-field-textual,
.elementor-widget-form select.elementor-field {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--ink-15);
  background: var(--white);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-size: .94rem;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.elementor-widget-form .elementor-field-textual:focus,
.elementor-widget-form select.elementor-field:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px var(--green-100);
}
.elementor-widget-form .elementor-field-textual::placeholder { color: var(--ink-50); opacity: 1; }
.elementor-widget-form textarea.elementor-field-textual { min-height: 110px; resize: vertical; }

/* Elementor's Global Kit stylesheet (post-<kit id>.css) loads after ours, so
   these need one extra level of specificity to win. */
body .elementor-widget-form .elementor-button[type="submit"],
body .elementor-widget-form .elementor-button {
  background: var(--green-600);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  padding: 14px 26px;
  font-family: var(--ff-sans);
  font-size: .925rem;
  font-weight: 600;
  letter-spacing: .005em;
  box-shadow: none;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast);
}
body .elementor-widget-form .elementor-button:hover,
body .elementor-widget-form .elementor-button[type="submit"]:hover {
  background: var(--green-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.elementor-widget-form .elementor-message { font-family: var(--ff-sans); font-size: .9rem; }
.elementor-widget-form .elementor-message-success { color: var(--green-700); }

/* The form sits in its own card, filling its column beside the details. */
.elementor-widget-form.copanel { max-width: none; }
.elementor-widget-form.copanel .elementor-form { gap: 14px; }

/* The contact details column: no card, sits flush against the form. */
.cinfo { margin: 0; }
@media (max-width: 1024px) {
  /* Elementor stacks the columns; give the form some air above it. */
  .elementor-widget-form.copanel { margin-top: 28px; }
}

/* ==========================================================================
   36. TEASER CARDS — positive layering
   `.tcard` used z-index:-2 for its photo and -1 for the darkening scrim. Like
   the hero, that is unreliable once the card is nested inside a page builder,
   and the scrim vanished — leaving white text on a bright photo.
   ========================================================================== */
.tcard { isolation: isolate; }
.tcard > img { z-index: 0; }
.tcard::after {
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(8,32,58,.10) 0%,
    rgba(8,32,58,.42) 42%,
    rgba(8,32,58,.80) 78%,
    rgba(8,32,58,.92) 100%);
}
.tcard .tcard__in { position: relative; z-index: 2; }
.tcard .tcard__in h3,
.tcard .tcard__in p,
.tcard .tcard__go { color: #fff; text-shadow: 0 1px 12px rgba(8,32,58,.45); }
.tcard .tcard__in p { color: rgba(255,255,255,.9); }
.tcard .tcard__meta span {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.34);
  color: #fff;
}

/* ==========================================================================
   37. CHECK-IN / CHECK-OUT CALENDAR
   Replaces the "pick your Fair nights" multi-select. Days sit in one strip;
   the selected range is joined by a tinted band so it reads as a stay rather
   than a set of ticked boxes.
   ========================================================================== */
.cal { display: block; }
.cal__row {
  display: flex; flex-wrap: wrap; gap: 0;
  border: 1.5px solid var(--ink-15); border-radius: var(--r-md);
  background: var(--white); overflow: hidden;
}
.cal .cal__day {
  flex: 1 1 0; min-width: 92px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 10px 12px;
  background: var(--white); color: var(--ink);
  border: 0; border-right: 1px solid var(--ink-15); border-radius: 0;
  box-shadow: none; cursor: pointer; text-align: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.cal .cal__day:last-child { border-right: 0; }
.cal .cal__day small {
  font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-50);
}
.cal .cal__day b { font-size: 1rem; font-weight: 600; color: var(--ink); }
.cal .cal__day em {
  font-style: normal; font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: transparent;
  min-height: 1em; line-height: 1.4;
}
.cal .cal__day:hover { background: var(--tan-100, #F6F1E7); }
.cal .cal__day.is-muted { opacity: .45; }

.cal .cal__day.is-mid { background: var(--green-100); }
.cal .cal__day.is-mid small { color: var(--green-700); }

.cal .cal__day.is-in,
.cal .cal__day.is-out { background: var(--green-600); }
.cal .cal__day.is-in b,
.cal .cal__day.is-out b,
.cal .cal__day.is-in small,
.cal .cal__day.is-out small,
.cal .cal__day.is-in em,
.cal .cal__day.is-out em { color: #fff; }

@media (max-width: 620px) {
  .cal__row { flex-wrap: nowrap; overflow-x: auto; }
  .cal .cal__day { min-width: 84px; flex: 0 0 auto; }
}

/* ---------- Sold-out rooms stay on the page ---------- */
.room__avail.is-idle { color: var(--ink-50); }
.room__avail.is-out  { color: var(--ink-50); }
.room.is-soldout .gal,
.room.is-soldout .room__body { opacity: .58; filter: saturate(.6); }
.room.is-soldout .room__foot { opacity: 1; }
.room.is-soldout .stepper { opacity: .5; pointer-events: none; }

/* ---------- 38. Booking rules + agreement, on the checkout ---------- */
.rules {
  margin-top: 20px; padding: 20px 22px;
  border: 1px solid var(--ink-15); border-radius: var(--r-md);
  background: var(--paper, #FBF8F2);
}
.rules__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.rules__list li {
  font-size: .87rem; line-height: 1.55; color: var(--ink-70, var(--ink));
  padding-left: 18px; position: relative;
}
.rules__list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-600);
}
.rules__list li b { font-weight: 600; color: var(--ink); }

.agree {
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ink-15);
  cursor: pointer; font-size: .9rem; font-weight: 500; line-height: 1.5;
}
.agree input[type="checkbox"] {
  flex: none; width: 19px; height: 19px; margin-top: 1px;
  accent-color: var(--green-600); cursor: pointer;
}
.agree.is-bad { animation: ucbShake .38s ease-out; }
.agree.is-bad span { color: var(--danger); }
.agree__err { margin-top: 8px; font-size: .83rem; font-weight: 600; color: var(--danger); }

@keyframes ucbShake {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-5px); }
  75%     { transform: translateX(5px); }
}

/* ==========================================================================
   39. BUTTON HARDENING AGAINST THEME RESETS
   Hello Elementor's reset.css targets `button:not(:disabled)` — specificity
   (0,1,1), the same as `.btn`, so whichever sheet loads last wins. We enqueue
   after it, but a child theme or a caching plugin can reorder sheets. These
   `body button.btn` selectors are (0,1,2) and win on specificity regardless.
   ========================================================================== */
body button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font-size: .925rem; font-weight: 600; letter-spacing: .005em;
  white-space: nowrap; text-transform: none; line-height: 1.2;
  box-shadow: none; cursor: pointer;
}
body button.btn--green { --bg: var(--green-600); --fg: #fff; --bd: transparent; }
body button.btn--green:hover { --bg: var(--green-700); }
body button.btn--ghost { --bg: transparent; --fg: var(--ink); --bd: var(--ink-15); }
body button.btn--ghost:hover { --bd: var(--navy-700); --fg: var(--navy-700); }
body button.btn--light { --bg: rgba(255,255,255,.1); --fg: #fff; --bd: rgba(255,255,255,.34); }
body button.btn--sm { padding: 10px 18px; font-size: .85rem; }
body button.btn--block { width: 100%; display: flex; }
body button.btn[disabled] { opacity: .42; pointer-events: none; box-shadow: none; }
body button.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* The stepper, gallery arrows and accordion headers are buttons too. */
body .stepper button {
  background: transparent; border: 0; border-radius: 50%;
  color: var(--ink); padding: 0; box-shadow: none; text-transform: none;
}
body .gal .gal__nav {
  border-radius: 50%; padding: 0; text-transform: none; box-shadow: none;
}
body .acc .acc__btn {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  color: var(--ink); text-transform: none;
}
body .cal .cal__day {
  border-radius: 0; box-shadow: none; text-transform: none; padding: 14px 10px 12px;
}

/* ==========================================================================
   40. SOLA CARD FORM
   The card number and CVV are iframes served by Sola, so we can only style
   the box around them — the inputs inside are styled through setIfieldStyle().
   Heights are pinned so the iframes line up with our own inputs.
   ========================================================================== */
.cardform { display: grid; gap: 14px; }
.cardform label {
  display: block; font-size: .82rem; font-weight: 600; color: var(--ink);
}
.cardform__row {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cardform input[type="text"] {
  width: 100%; margin-top: 6px; padding: 12px 14px;
  border: 1.5px solid var(--ink-15); border-radius: var(--r-md);
  background: var(--white); color: var(--ink);
  font-size: .95rem; font-weight: 500; font-family: inherit;
  transition: border-color var(--t-fast) var(--ease);
}
.cardform input[type="text"]:focus {
  outline: none; border-color: var(--green-600);
}
.ifield {
  margin-top: 6px; height: 46px; overflow: hidden;
  border: 1.5px solid var(--ink-15); border-radius: var(--r-md);
  background: var(--white);
  transition: border-color var(--t-fast) var(--ease);
}
.ifield:focus-within { border-color: var(--green-600); }
.ifield iframe { display: block; width: 100%; height: 44px; border: 0; }

@media (max-width: 560px) {
  .cardform__row { grid-template-columns: 1fr 1fr; }
  .cardform__row label:first-child { grid-column: 1 / -1; }
}

/* ---------- Guest-count helper text ---------- */
.form .fieldnote {
  display: block; margin-top: 6px;
  font-size: .78rem; font-weight: 400; line-height: 1.45; color: var(--ink-50);
}

/* ==========================================================================
   41. GUEST SURVEY
   ========================================================================== */
/* Intro note above the survey questions. */
.survey__intro {
  margin: 0 0 26px;
  padding: 18px 20px;
  background: var(--green-50, #E6EFDD);
  border-radius: 12px;
}
.survey__intro p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: var(--ink, #16202B); }
.survey__intro p:last-child { margin-bottom: 0; }

.survey__form { display: grid; gap: 26px; }
.survey__q { border: 0; margin: 0; padding: 0; }
.survey__q legend {
  font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; padding: 0;
}
.stars { display: flex; gap: 8px; flex-wrap: wrap; }
body .stars .star {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 14px; border: 1.5px solid var(--ink-15); border-radius: var(--r-md);
  background: var(--white); cursor: pointer; min-width: 58px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast);
}
.stars .star input { position: absolute; opacity: 0; pointer-events: none; }
.stars .star svg { width: 22px; height: 22px; fill: var(--ink-15); transition: fill var(--t-fast); }
.stars .star em { font-style: normal; font-size: .7rem; font-weight: 600; color: var(--ink-50); }
.stars .star:hover { border-color: var(--green-600); }
.stars .star:hover svg { fill: var(--tan-600, #C9A227); }
.stars .star:has(input:checked) { border-color: var(--green-600); background: var(--green-100); }
.stars .star:has(input:checked) svg { fill: var(--green-700); }
.stars .star:has(input:checked) em { color: var(--green-700); }
.stars .star:has(input:focus-visible) { outline: 2px solid var(--green-600); outline-offset: 2px; }

.survey__field { display: block; }
.survey__field > span {
  display: block; font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 8px;
}
.survey__field > span em { font-style: normal; font-weight: 400; color: var(--ink-50); }
.survey__field input[type="text"],
.survey__field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .95rem;
  border: 1.5px solid var(--ink-15); border-radius: var(--r-md);
  background: var(--white); color: var(--ink); resize: vertical;
}
.survey__field input[type="text"]:focus,
.survey__field textarea:focus { outline: none; border-color: var(--green-600); }

.survey__yn { display: flex; gap: 10px; flex-wrap: wrap; }
body .survey__yn label {
  display: inline-flex; align-items: center; padding: 10px 20px;
  border: 1.5px solid var(--ink-15); border-radius: var(--r-pill);
  background: var(--white); cursor: pointer; font-size: .9rem; font-weight: 500;
}
.survey__yn input { position: absolute; opacity: 0; pointer-events: none; }
.survey__yn label:has(input:checked) {
  border-color: var(--green-600); background: var(--green-100); color: var(--green-700); font-weight: 600;
}

.survey__two { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .survey__two { grid-template-columns: 1fr; } }

.survey__err { color: var(--danger); font-size: .88rem; font-weight: 600; margin: 0; }
.survey__note { font-size: .8rem; color: var(--ink-50); text-align: center; margin: 0; }
.survey__done { display: grid; justify-items: center; gap: 12px; padding: 30px 0; }

/* ---------- Closed season (v1.9.0) ---------- */
.ucb-closed{
  padding:22px 24px;border-radius:var(--r-md);
  background:var(--green-100);color:var(--ink);text-align:left;
}
.ucb-closed__title{margin:0 0 6px;font-family:var(--ff-display);font-size:1.25rem;font-weight:600;color:var(--navy-700);line-height:1.3}
.ucb-closed__text{margin:0;font-size:.95rem;line-height:1.65;color:var(--ink-70)}
.ucb-closed__text a{color:var(--navy-700);font-weight:600;text-decoration:underline;text-underline-offset:2px}

.ucb-pop{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:16px;background:rgba(8,32,58,.55);
  opacity:0;transition:opacity var(--t-fast) var(--ease);
}
.ucb-pop[hidden]{display:none}
.ucb-pop.is-on{opacity:1}
.ucb-pop__card{
  position:relative;width:100%;max-width:480px;max-height:calc(100vh - 32px);overflow:auto;
  padding:clamp(28px,5vw,40px);border-radius:var(--r-lg);
  background:var(--paper);color:var(--ink);box-shadow:var(--shadow-lg);text-align:center;
  transform:translateY(12px) scale(.98);transition:transform var(--t) var(--ease-out);
}
.ucb-pop.is-on .ucb-pop__card{transform:none}
.ucb-pop__title{margin:0 0 14px;font-family:var(--ff-display);font-size:clamp(1.4rem,4vw,1.75rem);font-weight:600;line-height:1.2;color:var(--navy-700)}
.ucb-pop__body p{margin:0 0 12px;font-size:1rem;line-height:1.65;color:var(--ink-70)}
.ucb-pop__body{margin-bottom:22px}
body .ucb-pop__x{
  position:absolute;top:10px;right:12px;width:36px;height:36px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--ink-50);
  font-size:26px;line-height:1;cursor:pointer;
}
body .ucb-pop__x:hover,body .ucb-pop__x:focus-visible{background:var(--ink-08);color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .ucb-pop,.ucb-pop__card{transition:none}
}