:root{
  /* Aligned to "The Cappa" template tokens: Gilda Display + Barlow, gold #aa8453 */
  --cream:#f8f5f0; --ink:#242220; --gold:#aa8453; --gold-dark:#8e6d45; --gold-light:#d8bd97;
  --dark:#2B241D; --darker:#211c16; --band:#efeae1; --paper:#F9F5EC; --paper2:#F3EDE3;
  --muted:#6b6a66; --muted2:#9a958d; --err:#b4472e; --line-dark:rgba(243,237,227,0.14);
  /* Property image height — the carousel arrows centre on it, so both
     stay in sync if it changes. */
  --venue-pic:330px;
}
/* Filmic grain — subtle grayscale noise, baked low-alpha, sits behind content */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
/* NOT html{scroll-behavior:smooth} — that animates every scroll input, including
   native mouse-wheel/trackpad ticks, not just anchor-link jumps. Chrome has to
   restart the in-flight smooth-scroll animation on every direction reversal, and
   continuous scrolling naturally reverses direction a lot — that's what was
   reading as scrolling "hanging"/stuttering when scrolling up and down. Anchor
   links get an explicit, JS-driven smooth scrollIntoView() below instead, so
   native wheel/trackpad scrolling stays instant and un-intercepted. */
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Barlow',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}

/* Skip link (keyboard a11y) */
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:12px 20px;
  border-radius:0 0 6px 0;font-size:13px;font-weight:600;letter-spacing:0.04em}
.skip:focus{left:0}

/* Visually-hidden but screen-reader-accessible label text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Global focus-visible ring */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.chip:focus-within{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

/* Scroll reveal — JS adds .reveal (hiding) so no-JS keeps everything visible.
   will-change is NOT baked in here on purpose: with 60+ .reveal elements on this
   page, that would promote all of them to their own GPU compositor layer the
   instant the class is assigned (i.e. at page load, long before they're even in
   view), which is heavy enough to make the whole page feel sluggish while
   typing/interacting elsewhere. JS applies will-change only to the handful of
   elements actively animating in at any given moment, and drops it right after. */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(22px);
    transition:opacity .8s cubic-bezier(.16,.84,.44,1),transform .8s cubic-bezier(.16,.84,.44,1)}
  .reveal.is-in{opacity:1;transform:none}
}

/* Pressed feedback on all primary controls */
.btn-gold:active,.btn-block:active,.btn-back:active,.enquire:active,.footer-btn:active,.proposal-ring:active,.chip:active{
  transform:translateY(1px) scale(.99)}
a{color:var(--gold);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--gold-dark)}
input,select,textarea,button{font-family:'Barlow',sans-serif}
::selection{background:var(--gold-light);color:var(--ink)}
h1,h2,h3{margin:0;font-weight:400}
p{text-wrap:pretty}
span{display:inline}
img{max-width:100%}
.serif{font-family:'Gilda Display',serif}
.eyebrow{font-family:'Barlow Condensed',sans-serif;font-size:14px;letter-spacing:0.34em;text-transform:uppercase;color:var(--gold);font-weight:500}
.wrap{max-width:1360px;margin:0 auto;padding:0 48px}
.hidden{display:none !important}

/* Image placeholders + real photos */
.imgslot{position:relative;width:100%;height:100%;background:
    linear-gradient(135deg,rgba(255,255,255,0.06),rgba(0,0,0,0.12)),
    linear-gradient(160deg,#5a4a38 0%,#3d332690 55%,#2b241d 100%);
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.imgslot::after{content:"";position:absolute;top:-40%;left:-20%;width:60%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);transform:rotate(18deg)}
.imgslot span{position:relative;z-index:1;font-size:11.5px;line-height:1.5;letter-spacing:0.04em;
  color:rgba(243,237,227,0.72);text-align:center;padding:14px 18px;max-width:88%}
.imgslot.circle{border-radius:50%}
/* Tiny avatar/reel placeholders read cleaner without clipped caption text */
.reel .imgslot span,.founder .imgslot span{display:none}
.photo{width:100%;height:100%;object-fit:cover;display:block}
.photo.circle{border-radius:50%}

/* Slow cinematic zoom on gallery cards */
.pic{overflow:hidden}
.pic .photo,.pic .imgslot{transition:transform .9s cubic-bezier(.16,.84,.44,1)}
.svc:hover .photo,.dest:hover .photo,.case:hover .photo,.exp:hover .photo,.venue:hover .photo,
.svc:hover .imgslot,.dest:hover .imgslot,.case:hover .imgslot,.exp:hover .imgslot,.venue:hover .imgslot{transform:scale(1.055)}
.mservice-media:hover .photo,.mservice-media:hover .imgslot{transform:scale(1.05)}

/* Hero */
#hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
#hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;
  background-image:linear-gradient(160deg,#6b5842 0%,#463a2b 45%,#241d16 100%)}
#hero .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,25,20,0.52) 0%,rgba(30,25,20,0.18) 40%,rgba(30,25,20,0.55) 100%)}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding:28px 48px;gap:20px}
.brand{display:inline-block;line-height:0}
.brand img{height:52px;width:auto;display:block}
.navlinks{display:flex;gap:34px;font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase}
.navlinks a{color:rgba(243,237,227,0.9)}
.navlinks a:hover{color:#fff}
.enquire{border:1px solid rgba(243,237,227,0.55);border-radius:999px;color:var(--paper2);
  padding:11px 26px;font-size:12px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;transition:all .2s}
.enquire:hover{background:var(--paper2);color:var(--ink)}
.hero-center{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 32px 150px;pointer-events:none}
.hero-sub{font-size:clamp(15px,1.5vw,18px);line-height:1.65;color:rgba(243,237,227,0.9);max-width:680px;margin:26px auto 0;text-wrap:pretty;pointer-events:auto}
.hero-buttons{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:38px;pointer-events:auto}
.btn-hero{display:inline-block;padding:15px 32px;border-radius:2px;font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;transition:all .2s}
.btn-hero-primary{background:var(--gold);color:#fff;border:1px solid var(--gold)}
.btn-hero-primary:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff}
.btn-hero-ghost{background:transparent;color:var(--paper2);border:1px solid rgba(243,237,227,0.55)}
.btn-hero-ghost:hover{background:var(--paper2);color:var(--ink)}
.btn-hero:active{transform:translateY(1px) scale(.99)}
.hero-center h1{font-family:'Gilda Display',serif;font-size:clamp(40px,5.6vw,76px);line-height:1.14;letter-spacing:0.01em;
  color:var(--paper);max-width:1000px;text-wrap:balance;pointer-events:auto}
/* .proposal-ring is unused in the hero now (replaced by .hero-buttons above) but
   kept defined, same as the reference build, in case another section reuses it. */
.proposal-ring{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:center;
  width:150px;height:150px;border-radius:50%;color:var(--paper2);font-size:11.5px;font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;text-align:center;line-height:1.6;
  transition:transform .3s ease,color .3s ease;backface-visibility:hidden}
.proposal-ring:hover{color:#fff;transform:scale(1.04);display: inherit;}
.proposal-ring .r1{position:absolute;inset:0;border:1px solid rgba(243,237,227,0.5);border-radius:50%}
.proposal-ring .r2{position:absolute;inset:16px;border:1px solid rgba(243,237,227,0.28);border-radius:50%}
/* Centred under the hero CTAs and stacked, so it reads as an invitation
   rather than a corner ornament. */
.reel{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:13px;color:rgba(243,237,227,0.92);
  font-size:13px;font-weight:600;letter-spacing:0.2em;text-transform:uppercase}
.reel .thumb{width:78px;height:78px;border-radius:50%;overflow:hidden;border:2px solid rgba(243,237,227,0.6);
  box-shadow:0 10px 30px rgba(20,16,12,0.35)}

/* Short-viewport desktop windows — Reel button was colliding with hero CTAs; min-width excludes phones (own breakpoint below). */
@media (max-height:800px) and (min-width:641px){
  .hero-center{padding-bottom:76px}
  .hero-center h1{font-size:clamp(34px,4.6vw,56px)}
  .hero-sub{margin-top:14px}
  .hero-buttons{margin-top:20px}
  .reel{bottom:16px;gap:8px;font-size:11px}
  .reel .thumb{width:52px;height:52px}
}

/* Sections */
.section-dark{background-color:var(--dark);background-image:var(--grain);background-blend-mode:soft-light}
.section-band{background:var(--band)}
.center-head{text-align:center;margin:0 auto}
.h2-cream{font-family:'Gilda Display',serif;font-size:clamp(32px,4vw,56px);line-height:1.2;color:var(--paper);text-wrap:balance}
.h2-ink{font-family:'Gilda Display',serif;font-size:clamp(32px,4vw,54px);line-height:1.2;color:var(--ink);text-wrap:balance}

/* Trusted By (hotel partners) — one row per brand, logo beside the
   properties it owns. Wider than the logo needs, because the brand line
   sits under it. */
#trusted{padding:96px 0}
.brand-row{display:grid;grid-template-columns:236px 1fr;gap:40px;align-items:start;
  padding:40px 0;border-top:1px solid rgba(59,50,42,0.12)}
.brand-row:first-of-type{border-top:none;padding-top:0}
.brand-mark{position:sticky;top:32px}
.client-tile{background:#fff;border:1px solid rgba(59,50,42,0.08);border-radius:6px;height:112px;
  display:flex;align-items:center;justify-content:center;padding:22px 28px;box-shadow:0 8px 22px rgba(26,19,12,0.05)}
.client-tile img{max-height:54px;max-width:100%;width:auto;object-fit:contain;display:block;filter:grayscale(0.12);transition:filter .3s}
.client-tile:hover img{filter:none}
.brand-name{font-family:'Gilda Display',serif;font-size:19px;line-height:1.3;color:var(--ink);
  padding-top:6px;border-top:2px solid var(--gold);display:inline-block}
.brand-blurb{margin:16px 0 0;font-size:13.5px;line-height:1.65;color:var(--muted);text-wrap:pretty}
/* Three properties visible per brand, the rest scrolled. grid-auto-columns is
   sized so exactly three fit the track, gaps included. */
/* min-width:0 or the carousel's min-content size blows the 1fr column past
   the viewport — the scroller is the inner element, not this one. */
.brand-venues-wrap{position:relative;min-width:0}
.brand-venues{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px) / 3);gap:22px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.brand-venues::-webkit-scrollbar{display:none}
.brand-venues .venue{scroll-snap-align:start}
/* SVG chevron, not a text glyph (‹/›) — those characters aren't
   optically centered in their own advance box in this font, so the arrow
   read as off-centre inside the circle no matter how the button itself was
   positioned. An SVG path centers exactly via flex. */
.bv-nav{position:absolute;top:calc(var(--venue-pic) / 2 - 19px);width:38px;height:38px;border-radius:50%;z-index:2;cursor:pointer;
  background:rgba(255,255,255,0.96);border:1px solid rgba(59,50,42,0.12);color:var(--ink);padding:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(26,19,12,0.16);transition:opacity .25s,transform .2s,background .2s}
.bv-nav svg{display:block}
.bv-nav:hover{background:#fff;transform:scale(1.07)}
.bv-prev{left:-17px}
.bv-next{right:-17px}
.bv-nav[disabled]{opacity:0;pointer-events:none}
@media (max-width:900px){
  .brand-venues{grid-auto-columns:calc((100% - 22px) / 2)}
  .bv-nav{display:none}   /* touch scrolling is the natural control here */
  /* With the prev/next arrows gone, a full-width-looking card at rest reads
     as the only photo for this hotel — nothing hints there's more to swipe
     to. A visible slice of the next card (the 80% column below) plus a
     fade over its edge both signal "more" without adding any new UI
     chrome. var(--band) — this only ever sits inside #trusted.section-band,
     so that's always what's actually behind it. */
  .brand-venues-wrap::after{
    content:"";position:absolute;top:0;right:0;bottom:4px;width:36px;pointer-events:none;
    background:linear-gradient(to right,transparent,var(--band) 85%);
  }
}
@media (max-width:560px){
  /* 80%, not 86% — a wider visible slice of the next card is the single
     biggest signal that there's more to swipe to. */
  .brand-venues{grid-auto-columns:80%}
}
@media (max-width:900px){
  .brand-row{grid-template-columns:1fr;gap:24px;padding:32px 0}
  /* Stacked: the logo keeps its size, the brand line runs the full width
     rather than staying trapped in a 190px column. */
  .brand-mark{position:static;max-width:none}
  .brand-mark .client-tile{max-width:190px}
  .brand-blurb{max-width:min(60ch,100%)}
}

/* Why Bout India */
#why{padding:110px 0}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:46px 40px}
.why-item{border-top:1px solid rgba(59,50,42,0.18);padding-top:24px}
.why-n{font-family:'Gilda Display',serif;font-size:19px;color:var(--gold);margin-bottom:14px}
.why-t{font-family:'Gilda Display',serif;font-size:22px;font-weight:500;color:var(--ink);margin-bottom:11px;line-height:1.25}
.why-d{font-size:14.5px;line-height:1.7;color:var(--muted)}

/* Destinations */
#destinations{padding:110px 48px 100px;max-width:1360px;margin:0 auto}
.dest-intro{text-align:center;max-width:640px;margin:0 auto 64px;font-size:15.5px;line-height:1.7;color:var(--muted)}
.dest-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:36px 24px}
.dest .pic{height:220px;border-radius:6px;overflow:hidden;margin-bottom:18px}
.dest .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px;gap:12px}
.dest .name{font-family:'Gilda Display',serif;font-size:23px;font-weight:500;color:var(--ink)}
.dest .season{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);font-weight:600;white-space:nowrap}

/* Gallery */
#gallery{padding:110px 0 100px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;max-width:1360px;margin:0 auto;padding:0 48px}
.gallery-item{position:relative;margin:0;aspect-ratio:1;border-radius:6px;overflow:hidden}
/* Feature tile: spans two columns for wide group shots that a square crop
   would cut people out of. 2/1 keeps it level with its square neighbours. */
.gallery-item.wide{grid-column:span 2;aspect-ratio:2/1}
.gallery-item.wide img{object-position:center 42%}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.16,.84,.44,1)}
.gallery-item:hover img{transform:scale(1.07)}
.dest .meta{font-size:14px;color:var(--muted)}
@media (max-width:640px){ .gallery-grid{grid-template-columns:1fr 1fr;gap:10px;padding:0 24px} }

/* Why Choose India — a grid of experience cards inside the light #why-india
   section (not the old dark "Pack Your Bags" scroller), so text needs ink
   colours rather than the cream/paper tones a dark band would use. */
#why-india{padding:110px 0}
.exp .pic{height:300px;border-radius:6px;overflow:hidden;margin-bottom:18px}
.exp .t{font-family:'Gilda Display',serif;font-size:23px;font-weight:500;color:var(--ink);margin-bottom:7px}
.exp .d{font-size:13.5px;line-height:1.6;color:var(--muted)}
/* Explicit column counts rather than auto-fill: there are exactly ten cards,
   and fixed steps keep the rows even (5x2) instead of leaving one card
   stranded on the last row. */
.exp-grid{display:grid;grid-template-columns:repeat(5,1fr);
  gap:36px 22px;max-width:1360px;margin:0 auto;padding:0 48px}
@media (max-width:1200px){ .exp-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:900px){  .exp-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){  .exp-grid{grid-template-columns:1fr;padding:0 24px;gap:26px} }

/* MICE & Corporate Services (alternating media + text rows) */
#mice-services{padding:110px 0 96px}
.mservice{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:70px;scroll-margin-top:90px}
.mservice:last-child{margin-bottom:0}
.mservice.reverse .mservice-media{order:2}
.mservice-media{height:400px;border-radius:8px;overflow:hidden}
.mservice-body h2{font-family:'Gilda Display',serif;font-size:clamp(25px,2.5vw,33px);color:var(--ink);line-height:1.22;margin-bottom:18px}
.mservice-body p{font-size:15.5px;line-height:1.75;color:var(--muted);margin:0 0 22px;max-width:52ch}
.mservice-body ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.mservice-body li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.mservice-body li::before{content:"";position:absolute;left:1px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
@media (max-width:820px){
  .mservice{grid-template-columns:1fr;gap:24px;margin-bottom:48px}
  .mservice.reverse .mservice-media{order:0}
  .mservice-media{height:280px}
}

/* Process */
#process{max-width:1240px;margin:0 auto;padding:110px 48px 90px}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:44px 36px}
.step{border-top:1px solid rgba(59,50,42,0.18);padding-top:26px}
.step .n{font-family:'Gilda Display',serif;font-size:19px;color:var(--gold);margin-bottom:14px}
.step .t{font-family:'Gilda Display',serif;font-size:22px;font-weight:500;color:var(--ink);margin-bottom:11px}
.step .d{font-size:14px;line-height:1.7;color:var(--muted)}

/* Venues (property cards inside each hotel-partner's carousel, see .brand-venues) */
.venue .pic{position:relative;height:var(--venue-pic);border-radius:6px;overflow:hidden;margin-bottom:15px}
.venue .name{font-family:'Gilda Display',serif;font-size:19px;font-weight:500;color:var(--ink);line-height:1.3}
.venue .loc{font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted2);margin:5px 0 8px}
.venue .cap{font-size:13px;color:var(--muted)}
.venue .cap span{color:var(--gold);font-weight:600}
/* Logo badge for properties in the mixed "More Brands" row, where the brand
   has no row/logo of its own to carry it. */
.venue-logo{position:absolute;left:14px;bottom:14px;height:auto;width:auto;
  max-height:82px;max-width:176px;object-fit:contain;
  background:#fff;border-radius:5px;padding:9px 13px;
  box-shadow:0 6px 20px rgba(26,19,12,0.22)}
.lookbook{margin-top:70px;background:var(--dark);border-radius:8px;padding:52px 56px;
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center}
.lookbook .lead{font-family:'Gilda Display',serif;font-size:29px;font-weight:400;color:var(--paper);line-height:1.3;margin-bottom:12px}
.lookbook .sub{font-size:14.5px;line-height:1.65;color:rgba(243,237,227,0.62)}
.lb-row{display:flex;gap:10px}
.lb-row input{flex:1;padding:14px 18px;border-radius:999px;border:1px solid rgba(243,237,227,0.3);
  font-size:14.5px;background:transparent;color:var(--paper2);min-width:0}
.lb-row input:focus{border-color:var(--gold);outline:none}
.lb-row input::placeholder{color:rgba(243,237,227,0.5)}
.btn-gold{background:var(--gold);color:#fff;border:none;border-radius:999px;padding:14px 24px;font-size:13px;
  font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .2s}
.btn-gold:hover{background:var(--gold-dark)}
.lb-err{font-size:13px;color:#E8A9A2;margin-top:8px;min-height:18px}
.lb-done{font-size:15px;line-height:1.6;color:var(--paper2)}
.lb-done strong{color:var(--gold-light)}

/* FAQ */
#faq{padding:110px 0}
.faq-wrap{max-width:860px;margin:0 auto;padding:0 48px}
.faq-item{border-bottom:1px solid rgba(59,50,42,0.16)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:none;border:none;
  text-align:left;padding:22px 4px;cursor:pointer;font-family:'Gilda Display',serif;font-size:19px;font-weight:500;color:var(--ink)}
.faq-q .icon{font-size:24px;color:var(--gold);flex:0 0 auto;font-weight:400}
.faq-a{overflow:hidden;max-height:0;font-size:14.5px;line-height:1.75;color:var(--muted);max-width:720px;
  transition:max-height .35s cubic-bezier(.16,.84,.44,1)}
.faq-a-inner{padding:0 4px 24px}

/* Proposal request */
#proposal{background-color:var(--dark);background-image:var(--grain);background-blend-mode:soft-light;padding:110px 0}
.proposal-grid{max-width:1200px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:1fr 1.25fr;gap:64px;align-items:start}
.proposal-left{padding-top:16px}
.proposal-left h2{font-family:'Gilda Display',serif;font-size:clamp(32px,3.6vw,48px);color:var(--paper);margin:0 0 22px;line-height:1.2}
.proposal-left p{font-size:15.5px;line-height:1.7;color:rgba(243,237,227,0.66);margin:0 0 36px}
.founder{display:flex;align-items:center;gap:16px;border:1px solid rgba(243,237,227,0.16);border-radius:8px;padding:18px 20px}
.founder .ph{flex:0 0 56px;height:56px}
.founder .fn{font-weight:600;color:var(--paper);font-size:15px}
.founder .fr{font-size:13px;color:rgba(243,237,227,0.6)}
.founder .fr a{color:var(--gold-light)}
.proposal-tel{font-size:13.5px;color:rgba(243,237,227,0.5);margin-top:22px}
.proposal-tel span,.proposal-tel a.proposal-tel-phone{color:var(--paper)}
.proposal-tel a{color:var(--gold-light)}
.proposal-card{background:var(--cream);border-radius:10px;box-shadow:0 30px 70px rgba(26,19,12,0.5);padding:40px 42px}
.proposal-progress{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.proposal-progress .stepno{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.proposal-progress .bar{flex:1;height:3px;background:#EAE3D6;border-radius:2px;overflow:hidden}
.proposal-progress .fill{height:100%;background:var(--gold);transition:width .3s}
.proposal-progress .stitle{font-size:12.5px;color:var(--muted2)}
/* minmax(0,1fr), not plain 1fr: grid tracks otherwise size off the widest
   min-content in that column across every row, so a text change inside one field
   (e.g. the time picker's label) could reflow every other field sharing its
   column — email, best-time, country all sit in the right column. */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.field.full{grid-column:1/-1}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.field label:not(.chip),.field legend{display:block;font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:capitalize;color:var(--ink);margin-bottom:7px;padding:0;width:100%}
.field input,.field select,.field textarea{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid #DDD5C8;
  border-radius:4px;font-size:14.5px;background:#fff;font-family:'Barlow',sans-serif}
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:var(--ink);transition:background-color 5000s ease-in-out 0s}
.field select{padding:13px 34px 13px 10px}
/* Safari's native <select> chrome (heavy inset border, grey fill) doesn't match
   the flatter look Chrome/Firefox default to — reset appearance everywhere and
   draw one consistent chevron so plain <select> fields (event type, budget,
   duration) look the same as the custom-built pickers next to them. */
.field select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23242220' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
/* select placeholders aren't real ::placeholder, so .has-value (mice.js) drives the color instead. */
.field select{color:var(--muted2)}
.field select.has-value{color:var(--ink)}
/* option resets color — else it'd inherit the muted select color too. */
.field select option{color:var(--ink)}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.field .fe{font-size:12.5px;color:var(--err);margin-top:5px;min-height:16px}
/* Programmatic + visual error state, driven off aria-invalid so the two never
   drift apart (color alone is not sufficient — see .field .fe above for the
   text cue every invalid field also gets). */
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"],
.phone-row input[aria-invalid="true"],
.country-picker-trigger[aria-invalid="true"],.select-picker-trigger[aria-invalid="true"]{
  border-color:var(--err)}
/* grid-template-rows 0fr->1fr trick: animates to the field's real height with no
   guessed max-height, so there's no overshoot/snap ("flick") once content is
   fully visible but the transition keeps running past it. visibility (not just
   opacity) is what actually pulls the collapsed field's input out of the tab
   order — otherwise a keyboard user can tab into an invisible, zero-height field. */
.event-type-other{display:grid;grid-template-rows:0fr;min-height:0;opacity:0}
.event-type-other.is-open{grid-template-rows:1fr;opacity:1}
.event-type-other-inner{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .3s}
.event-type-other.is-open .event-type-other-inner{visibility:visible;transition-delay:0s}
@media (prefers-reduced-motion: no-preference){
  .event-type-other{transition:grid-template-rows .6s cubic-bezier(.65,0,.35,1),opacity .5s ease}
}
/* Country code + phone number rendered as ONE merged field (single border/box),
   split by a hairline divider, same treatment as .datetime-row below — reads as
   a single "phone" control instead of two boxes side by side. */
.phone-row{
  display:flex;align-items:stretch;box-sizing:border-box;
  border:1px solid #DDD5C8;border-radius:4px;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.phone-row:focus-within,.phone-row.is-open{border-color:var(--gold);box-shadow:0 0 0 3px rgba(170,132,83,0.14)}
.phone-row input{flex:1;min-width:0;border:none;background:transparent}
.phone-row input:focus{outline:none}
.phone-row-divider{width:1px;align-self:stretch;margin:8px 0;background:#DDD5C8;flex:0 0 1px}

/* Bespoke country-code picker (flag + dial code + searchable list), replacing
   the jQuery-based intl-tel-input widget for this page — same visual language
   as the time picker below (trigger button + absolutely positioned panel). */
.country-picker{position:relative;flex:0 0 auto}
.country-picker-trigger{
  display:flex;align-items:center;gap:6px;height:100%;box-sizing:border-box;
  padding:13px 10px;border:none;background:transparent;
  font-family:'Barlow',sans-serif;font-size:14.5px;color:var(--ink);cursor:pointer;white-space:nowrap;
}
.country-picker-flag{font-size:18px;line-height:1}
.country-picker-dial{font-variant-numeric:tabular-nums}
.country-picker-trigger svg{width:14px;height:14px;flex:0 0 14px;color:var(--muted2);transition:transform .15s ease}
.country-picker.is-open .country-picker-trigger svg{transform:rotate(180deg)}
.country-picker-panel{
  position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:300px;max-width:80vw;
  background:#fff;border:1px solid #EAE3D6;border-radius:10px;
  box-shadow:0 18px 44px rgba(43,36,29,0.18);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);pointer-events:none;
  display:flex;flex-direction:column;max-height:320px;overflow:hidden;
}
.country-picker.is-open .country-picker-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:no-preference){
  .country-picker-panel{transition:opacity .18s cubic-bezier(.16,.84,.44,1),transform .18s cubic-bezier(.16,.84,.44,1)}
}
input.country-picker-search{
  margin:0;padding:12px 16px;border:none;border-bottom:1px solid #EAE3D6;font-size:14px;
  font-family:'Barlow',sans-serif;flex:0 0 auto;box-sizing:border-box;
}
input.country-picker-search:focus{outline:none}
.country-picker-list{overflow-y:auto;padding:0 6px 6px}
.country-picker-option{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;text-align:left;
  /* ~40px row height (was ~33px) — closer to the ~44px touch-target
     guideline given how densely ~195 rows pack into this list. */
  padding:11px 10px;margin:1px 0;border:none;background:none;border-radius:6px;
  font-family:'Barlow',sans-serif;font-size:14px;color:var(--ink);cursor:pointer;
}
.country-picker-option .flag{font-size:17px;flex:0 0 20px}
.country-picker-option .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.country-picker-option .dial{color:var(--muted2);font-variant-numeric:tabular-nums;flex:0 0 auto}
.country-picker-option:hover,.country-picker-option.is-focused{background:var(--cream)}
/* Same soft gold tint as the focus-ring shadow elsewhere on this page
   (rgba(170,132,83,0.14)) — the solid var(--ink) fill read as too heavy for
   "this is already selected", not "you're about to do something". */
.country-picker-option[aria-selected="true"]{background:rgba(170,132,83,0.16);color:var(--ink)}
.country-picker-empty{padding:16px;text-align:center;font-size:13.5px;color:var(--muted2)}
.country-picker-divider{height:1px;background:#EAE3D6;margin:6px 10px}
.country-picker-list::-webkit-scrollbar{width:6px}
.country-picker-list::-webkit-scrollbar-thumb{background:#DDD5C8;border-radius:3px}
.country-picker-list::-webkit-scrollbar-thumb:hover{background:var(--gold-light)}

/* Searchable "Country" field — same visual language as the country/time pickers
   above, swapped in for a plain native <select> so ~195 countries are searchable
   instead of a long native dropdown. */
.select-picker{position:relative}
.select-picker-trigger{
  width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 14px;border:1px solid #DDD5C8;border-radius:4px;background:#fff;
  font-family:'Barlow',sans-serif;font-size:14.5px;color:var(--muted2);cursor:pointer;text-align:left;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.select-picker.has-value .select-picker-trigger{color:var(--ink)}
.select-picker-trigger:hover{border-color:var(--gold)}
.select-picker.is-open .select-picker-trigger{border-color:var(--gold);box-shadow:0 0 0 3px rgba(170,132,83,0.14)}
.select-picker-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.select-picker-trigger svg{width:14px;height:14px;flex:0 0 14px;color:var(--muted2);transition:transform .15s ease}
.select-picker.is-open .select-picker-trigger svg{transform:rotate(180deg)}
.select-picker-panel{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
  background:#fff;border:1px solid #EAE3D6;border-radius:10px;
  box-shadow:0 18px 44px rgba(43,36,29,0.18);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);pointer-events:none;
  display:flex;flex-direction:column;max-height:320px;overflow:hidden;
}
.select-picker.is-open .select-picker-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:no-preference){
  .select-picker-panel{transition:opacity .18s cubic-bezier(.16,.84,.44,1),transform .18s cubic-bezier(.16,.84,.44,1)}
}
input.select-picker-search{
  margin:0;padding:12px 16px;border:none;border-bottom:1px solid #EAE3D6;font-size:14px;
  font-family:'Barlow',sans-serif;flex:0 0 auto;box-sizing:border-box;
}
input.select-picker-search:focus{outline:none}
.select-picker-list{overflow-y:auto;padding:0 6px 6px}
.select-picker-option{
  display:block;width:100%;box-sizing:border-box;text-align:left;
  padding:11px 10px;margin:1px 0;border:none;background:none;border-radius:6px;
  font-family:'Barlow',sans-serif;font-size:14px;color:var(--ink);cursor:pointer;
}
.select-picker-option:hover,.select-picker-option.is-focused{background:var(--cream)}
.select-picker-option[aria-selected="true"]{background:rgba(170,132,83,0.16);color:var(--ink)}
.select-picker-empty{padding:16px;text-align:center;font-size:13.5px;color:var(--muted2)}
.select-picker-group-label{padding:10px 10px 4px;font-family:'Barlow Condensed',sans-serif;font-size:11px;
  font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted2)}
.select-picker-divider{height:1px;background:#EAE3D6;margin:6px 10px}
.select-picker-list::-webkit-scrollbar{width:6px}
.select-picker-list::-webkit-scrollbar-thumb{background:#DDD5C8;border-radius:3px}
.select-picker-list::-webkit-scrollbar-thumb:hover{background:var(--gold-light)}

/* Wraps the bespoke calendar dropdown in the same bordered-field shape as
   every other input on this form — no native OS date UI. */
.datetime-row{
  display:flex;align-items:stretch;box-sizing:border-box;
  border:1px solid #DDD5C8;border-radius:4px;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.datetime-row:focus-within,.datetime-row.is-open{border-color:var(--gold);box-shadow:0 0 0 3px rgba(170,132,83,0.14)}

.date-picker{position:relative;flex:1;min-width:0}
.date-picker-trigger{
  width:100%;height:100%;display:flex;align-items:center;gap:8px;box-sizing:border-box;
  padding:13px 14px;border:none;background:transparent;
  font-family:'Barlow',sans-serif;font-size:14.5px;color:var(--muted2);cursor:pointer;text-align:left;
}
.date-picker-trigger svg{flex:0 0 15px;width:15px;height:15px;color:var(--gold)}
.date-picker-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.date-picker.has-value .date-picker-label{color:var(--ink)}
.date-picker-panel{
  position:absolute;top:calc(100% + 8px);left:0;z-index:20;width:288px;max-width:86vw;
  background:#fff;border:1px solid #EAE3D6;border-radius:10px;
  box-shadow:0 18px 44px rgba(43,36,29,0.18);padding:14px;
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);pointer-events:none;
}
.date-picker.is-open .date-picker-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:no-preference){
  .date-picker-panel{transition:opacity .18s cubic-bezier(.16,.84,.44,1),transform .18s cubic-bezier(.16,.84,.44,1)}
}
.date-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.date-picker-month{font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600;letter-spacing:0.04em;color:var(--ink)}
.date-picker-nav{width:28px;height:28px;flex:0 0 auto;border-radius:50%;border:1px solid #EAE3D6;background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s}
.date-picker-nav:hover{background:var(--cream);border-color:var(--gold)}
.date-picker-nav svg{width:13px;height:13px}
.date-picker-nav[disabled]{opacity:0.3;pointer-events:none}
.date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.date-picker-weekdays span{display:block;text-align:center;font-size:11px;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--muted2)}
.date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.date-picker-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:none;background:none;border-radius:6px;font-family:'Barlow',sans-serif;font-size:13.5px;
  color:var(--ink);cursor:pointer}
.date-picker-day:hover,.date-picker-day.is-focused{background:var(--cream)}
.date-picker-day[aria-selected="true"]{background:rgba(170,132,83,0.16);color:var(--ink)}
.date-picker-day.is-today:not([aria-selected="true"]){color:var(--gold);font-weight:600}
.date-picker-day[disabled]{color:var(--muted2);opacity:0.35;cursor:default;pointer-events:none}
.date-picker-day.is-outside{visibility:hidden;pointer-events:none}

/* .opens-up (mice.js's keepPanelInView) flips a panel above its trigger when there's no room below. */
.country-picker.opens-up .country-picker-panel,
.select-picker.opens-up .select-picker-panel,
.date-picker.opens-up .date-picker-panel{
  top:auto;bottom:calc(100% + 8px);transform:translateY(8px) scale(.98);
}
.country-picker.opens-up.is-open .country-picker-panel,
.select-picker.opens-up.is-open .select-picker-panel,
.date-picker.opens-up.is-open .date-picker-panel{
  transform:none;
}

.btn-block{width:100%;background:var(--gold);color:#fff;border:none;border-radius:999px;padding:16px;font-size:14px;
  font-weight:600;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:background .2s;position:relative}
.btn-block:hover{background:var(--gold-dark)}
/* Submit-in-flight state, toggled by setBtnLoading() in mice.js — text hidden
   (not removed, so the button keeps its width) and swapped for a spinner. */
.btn-block.is-loading{color:transparent;pointer-events:none}
.btn-block.is-loading::after{content:'';position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:mice-btn-spin .7s linear infinite}
@keyframes mice-btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn-block.is-loading::after{animation-duration:1.4s}
}
.btn-back{flex:0 0 auto;background:none;border:1px solid #DDD5C8;color:var(--ink);border-radius:999px;padding:16px 24px;
  font-size:13.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.btn-back:hover{border-color:var(--gold);color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;border-radius:20px;padding:9px 16px;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:all .2s;background:var(--cream);color:var(--ink);border:1px solid #DDD5C8;user-select:none}
.chip input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.chip.on,.chip:has(input:checked){background:var(--ink);color:#fff;border-color:var(--ink)}
.form-note{text-align:center;font-size:13px;color:var(--muted2);margin-top:22px;line-height:1.6}
.proposal-success{text-align:center;padding:30px 10px}
/* .proposal-card is a column flex container the whole time the modal's
   open (see #proposal.is-modal-open .proposal-card) — once it's swapped
   down to just the success message, auto margins on that single flex item
   center it in the leftover space instead of it sitting pinned to the top
   with empty space below, which is what full-height mobile sheet layout
   left it doing. */
#proposal.is-modal-open .proposal-success{margin:auto}
.proposal-success .check{width:60px;height:60px;border-radius:50%;border:1px solid var(--gold);color:var(--gold);
  font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.proposal-success .t{font-family:'Gilda Display',serif;font-size:27px;font-weight:500;color:var(--ink);margin-bottom:14px}
.proposal-success .d{font-size:15px;line-height:1.7;color:var(--muted)}

/* Proposal request — modal mode. Inert by default (the header is
   display:none and .is-modal-open is only ever added by JS when a "request
   proposal" trigger is clicked — see mice.js), so nothing here affects the
   normal inline layout for a user who scrolls down to this section on their
   own. Below 641px: full-screen sheet (original mobile design). From 641px
   up: a centered, width-capped dialog over a dimmed backdrop, matching the
   reference app's popup sizing instead of stretching edge to edge.

   Modal internals follow the same header/body/footer split as a standard
   Bootstrap modal: three flex siblings inside the form, and only the
   middle one (.proposal-modal-body) scrolls. An earlier version kept the
   header and footer inside that same scrolling area and used
   position:sticky + scroll-snap to hold them in place — worked, but every
   edge case (a row resting half-tucked under the header, the footer
   needing a manual bottom-padding reservation) was a symptom of the same
   root cause: they were never supposed to be part of the scrollable
   content in the first place. Splitting them into real siblings removes
   that whole category of bug instead of patching each symptom. */
.proposal-modal-header{display:none}
/* Neutral wrapper around the header + form pair — display:contents makes it
   invisible to layout everywhere except the min-width:641px dialog rule
   below, which needs a single element to cap the height of both together. */
.proposal-modal-dialog{display:contents}
/* Neutral outside the modal — the eyebrow + step progress bar, and the
   step fields, stay inline exactly as before in the normal (non-modal)
   layout reached by scrolling to this section directly. */
.proposal-card-head{display:contents}
.proposal-modal-body{display:contents}
/* Not display:contents like the two above — this replaces the button row
   that used to live directly inside #step1/#step2's own CSS grid, so it
   needs to stand in for the gap that grid gave it for free; margin-top
   does that for the normal (non-modal) layout too, not just the modal. */
.proposal-modal-footer{margin-top:16px}
#proposal.is-modal-open{position:fixed;inset:0;z-index:130;overflow:hidden}
/* Same chrome at every width now — no title bar, just the close button
   inset over the card (see .proposal-modal-close overrides below). */
#proposal.is-modal-open .proposal-modal-header{display:none}
.proposal-modal-close{display:none;background:none;border:0;cursor:pointer}
/* Only the form itself shows in the modal — proposal-left's pitch copy and
   founder card are the marketing case for filling it out, redundant once
   the user has already tapped a "request proposal" trigger to get here. */
#proposal.is-modal-open .proposal-left{display:none}
/* The country-code, country and date picker panels are position:absolute
   + visibility:hidden while closed, not display:none — deliberately, so
   their open/close opacity+transform transition has something to animate
   from. But visibility:hidden still leaves the (fully clipped) box in
   layout, and an overflow:auto ancestor's scrollHeight counts a
   descendant's box even while invisible, inflating .proposal-modal-body's
   scrollHeight and leaving a gap of empty scroll room past the real last
   field. display:none removes the closed panel from layout entirely, at
   the cost of the opening transition becoming an instant snap instead of a
   fade (a transition can't animate the first frame after display:none). */
#proposal.is-modal-open .country-picker-panel,
#proposal.is-modal-open .select-picker-panel,
#proposal.is-modal-open .date-picker-panel{display:none}
#proposal.is-modal-open .country-picker.is-open .country-picker-panel,
#proposal.is-modal-open .select-picker.is-open .select-picker-panel{display:flex}
#proposal.is-modal-open .date-picker.is-open .date-picker-panel{display:block}

/* The flex chain from the modal's outer boundary down to the three real
   sections — identical at every width; only padding/radius/backdrop differ
   per breakpoint below. Every link needs flex:1 1 auto + min-height:0, or
   a nested flex child can't shrink past its own content size, which would
   silently stop .proposal-modal-body's overflow-y:auto from ever kicking
   in no matter how tall the content gets. */
#proposal.is-modal-open .proposal-grid{
  display:flex;flex-direction:column;align-items:stretch;flex:1 1 auto;min-height:0;
  margin:0;padding:0;box-sizing:border-box;gap:0;max-width:none}
#proposal.is-modal-open .proposal-card{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
  border-radius:0;box-shadow:none;padding:0}
#proposal.is-modal-open .proposal-card > form{
  display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#proposal.is-modal-open .proposal-card-head{display:block;flex:0 0 auto}
#proposal.is-modal-open .proposal-modal-body{
  display:block;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
#proposal.is-modal-open .proposal-modal-footer{
  display:block;flex:0 0 auto;margin:0;background:var(--cream);border-top:1px solid #EAE3D6}

@media (max-width:640px){
  #proposal.is-modal-open{
    padding:0;display:flex;flex-direction:column;
    /* Overrides the dark #proposal background — the stacked single-column
       form always fills the screen at this width so this never shows. */
    background:var(--cream);
  }
  /* Same chrome as desktop: no title bar, just a close button inset over
     the card — the card's own "Request A Quote" heading already labels it. */
  #proposal.is-modal-open .proposal-modal-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:14px;right:14px;z-index:5;
    width:32px;height:32px;border-radius:50%;
    background:rgba(30,25,20,0.55);color:#fff;
  }
  #proposal.is-modal-open .proposal-modal-close:hover{background:rgba(30,25,20,0.8)}
  #proposal.is-modal-open .proposal-card-head{padding:24px 24px 0}
  #proposal.is-modal-open .proposal-modal-body{padding:0 24px}
  #proposal.is-modal-open .proposal-modal-footer{
    padding:14px 24px calc(14px + env(safe-area-inset-bottom))}
}

@media (min-width:641px){
  #proposal.is-modal-open{
    display:flex;align-items:center;justify-content:center;
    padding:32px;box-sizing:border-box;
    /* Darker than a typical backdrop on purpose — the modal is
       position:fixed, so it doesn't reset page scroll: opening it from a
       trigger further down the page (footer button, floating CTA) means
       the backdrop shows whatever section was behind it at that scroll
       position, not always the hero. A lighter backdrop made that section
       legible enough to read as "the page scrolled" when nothing did. */
    background:rgba(14,11,8,0.92);
  }
  /* max-height:100% (of this flex item's share of the padded overlay) is
     what lets the dialog shrink-wrap short content instead of stretching,
     while still capping out and scrolling on a short viewport. */
  #proposal.is-modal-open .proposal-modal-dialog{
    position:relative;display:flex;flex-direction:column;width:100%;max-width:620px;max-height:100%;
    box-shadow:0 30px 70px rgba(10,8,6,0.5);border-radius:10px;overflow:hidden;
  }
  #proposal.is-modal-open .proposal-modal-close{
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:16px;right:16px;z-index:3;
    width:36px;height:36px;border-radius:50%;
    background:rgba(30,25,20,0.55);color:#fff;
  }
  #proposal.is-modal-open .proposal-modal-close:hover{background:rgba(30,25,20,0.8)}
  #proposal.is-modal-open .proposal-card-head{padding:40px 42px 0}
  /* min-height, not just flex:1 auto — the dialog shrink-wraps to content
     (deliberately, so the short success state doesn't stretch to fill the
     whole overlay), which on step 1's six fields leaves the body far
     shorter than the space actually available. A field a couple of rows
     down then has too little room both above AND below it to open a
     dropdown/calendar at full height — this gives it enough room below
     that opening downward (the default) is viable instead of needlessly
     flipping upward into a space that's just as cramped. */
  #proposal.is-modal-open .proposal-modal-body{padding:0 42px;min-height:360px}
  #proposal.is-modal-open .proposal-modal-footer{padding:16px}
}

/* Footer */
footer{background-color:var(--darker);background-image:var(--grain);background-blend-mode:soft-light;padding:100px 0 44px}
.footer-in{max-width:1240px;margin:0 auto;padding:0 48px;text-align:center}
.footer-cta{font-family:'Gilda Display',serif;font-size:clamp(30px,3.6vw,50px);font-weight:400;color:var(--paper);margin-bottom:36px;text-wrap:balance}
.footer-btn{display:inline-block;border:1px solid rgba(243,237,227,0.5);border-radius:999px;color:var(--paper2);
  padding:15px 40px;font-size:13px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;transition:all .2s}
.footer-btn:hover{background:var(--paper2);color:var(--ink)}
.footer-cols{margin-top:80px;padding-top:34px;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:20px;text-align:left;font-size:13.5px;color:rgba(243,237,227,0.5);line-height:1.8}
.footer-cols .co{font-family:'Gilda Display',serif;font-size:18px;font-weight:500;color:var(--paper2);margin-bottom:6px}
.footer-cols a{color:rgba(243,237,227,0.5)}
.footer-cols a:hover{color:var(--paper2)}
.footer-links{display:flex;gap:24px;align-items:center}
.footer-cols .em a{color:var(--gold-light)}

/* Exit popup */
.exit-overlay{position:fixed;inset:0;z-index:100;background:rgba(30,25,20,0.65);display:flex;align-items:center;justify-content:center;padding:24px}
/* max-height + its own overflow-y, not left to the overlay — the card's
   natural height (title + description + 3 fields + button) runs to ~700px,
   taller than most phones' visible viewport once browser chrome is
   accounted for. Without this it overflowed off BOTH the top and bottom
   with no way to scroll to the close button, the fields, or the submit
   button — this way the card scrolls internally instead. */
.exit-card{position:relative;background:var(--cream);border-radius:10px;max-width:520px;width:100%;
  max-height:100%;overflow-y:auto;padding:44px 46px;box-shadow:0 34px 90px rgba(26,19,12,0.55)}
/* width/height/flex, not just font-size — a bare 24px glyph is well under
   the ~44px minimum comfortable tap target on mobile. */
.exit-close{position:absolute;top:6px;right:10px;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;background:none;border:none;font-size:24px;color:var(--muted2);cursor:pointer}
.exit-close:hover{color:var(--ink)}
.exit-card .t{font-family:'Gilda Display',serif;font-size:27px;font-weight:500;color:var(--ink);line-height:1.3;margin:14px 0 12px}
.exit-card .d{font-size:14.5px;line-height:1.65;color:var(--muted);margin-bottom:24px}
.exit-row{display:flex;gap:10px}
.exit-row input{flex:1;min-width:0;padding:13px 16px;border:1px solid #DDD5C8;border-radius:999px;font-size:14.5px;background:#fff}
.exit-row input:focus{border-color:var(--gold);outline:none}
.exit-row .btn-gold{padding:13px 22px}
.exit-err{font-size:13px;color:var(--err);margin-top:8px;min-height:18px}
.exit-done{font-size:15px;color:var(--ink)}
.exit-done strong{color:var(--gold)}

@media (max-width:900px){
  .wrap,#destinations,#process{padding-left:24px;padding-right:24px}
  .nav{padding:20px 24px}
  .navlinks{display:none}
  .reel{bottom:34px;gap:10px;font-size:12px}
  .reel .thumb{width:64px;height:64px}
  .lookbook{grid-template-columns:1fr;gap:28px;padding:40px 28px}
  .proposal-grid{grid-template-columns:1fr;gap:40px;padding:0 24px}
  .proposal-card{padding:32px 24px}
}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr}
  .hero-center{padding-bottom:180px}
  /* At ~360px (common budget-Android width) "Get Your Free Proposal" wraps
     to two lines while "Back" stays on one, reading as a broken layout —
     tightened gap/padding/font-size gives it just enough room to stay on
     one line without the row looking cramped. */
  #step1 > .field.full:last-child,
  #step2 > .field.full:last-child{gap:8px}
  .btn-back{padding:16px 14px;font-size:12.5px}
  .btn-back ~ .btn-block{font-size:13px}
}

/* ============================================================
   "The Cappa" alignment — condensed labels, rectangular buttons
   ============================================================ */
.navlinks,.reel,.proposal-ring,.enquire,
.btn-gold,.btn-block,.btn-back,.footer-btn,.chip,.badges,.exp-hint,
.metric .l,.dest .season,.case .m,.case .tag,.case .attr,.venue .loc,
.proposal-progress .stepno,.proposal-progress .stitle{
  font-family:'Barlow Condensed',sans-serif;
}
.field label:not(.chip),.field legend{font-family:'Barlow',sans-serif}
/* Slightly larger, wider tracking so condensed labels read like Cappa's */
.navlinks{font-size:14px;letter-spacing:0.2em}
.enquire{font-size:14px;letter-spacing:0.2em}
.metric .l,.dest .season,.case .m,.case .attr,.venue .loc,.field label:not(.chip),.field legend{font-size:12.5px}

/* Rectangular, hospitality-style buttons (Cappa uses square corners) */
.enquire,.btn-gold,.btn-block,.btn-back,.footer-btn{border-radius:2px;font-weight:500;letter-spacing:0.16em}
.btn-gold,.btn-block{font-size:14px}
/* Square the inputs/chips to match */
.lb-row input,.exit-row input,.field input,.field select,.field textarea{border-radius:2px}
.chip{border-radius:2px;font-family:'Barlow Condensed',sans-serif;letter-spacing:0.06em}

/* ===== Our Story (lead section) ===== */
#story{max-width:1360px;margin:0 auto;padding:120px 48px 100px}
.story-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center}
.story-copy p{font-size:15.5px;line-height:1.8;color:var(--muted);margin:0 0 18px;max-width:54ch}
.story-stats{display:flex;gap:44px;margin-top:36px;flex-wrap:wrap}
.story-stat .v{font-family:'Gilda Display',serif;font-size:42px;line-height:1;color:var(--gold)}
.story-stat .l{font-family:'Barlow Condensed',sans-serif;font-size:12.5px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--muted2);margin-top:8px}
/* Natural 16:9 rather than a fixed height: the team photo is a wide group
   lineup, and a near-square slot cropped ~18% off each end of it.
   min-width:0 is required — grid items default to min-width:auto, which lets
   an aspect-ratio box outgrow its column and scroll the page sideways. */
.story-img{aspect-ratio:16/9;width:100%;min-width:0;border-radius:6px;overflow:hidden}
.story-img .photo,.story-img .imgslot{transition:transform .9s cubic-bezier(.16,.84,.44,1)}
.story-img:hover .photo,.story-img:hover .imgslot{transform:scale(1.05)}
@media (max-width:900px){
  #story{padding:80px 24px 70px}
  .story-grid{grid-template-columns:1fr;gap:36px}
  .story-img{order:-1}
  .story-stats{gap:32px}
  .story-stat .v{font-size:36px}
}

/* ===== Showreel: button + lightbox ===== */
.reel{background:transparent;border:0;padding:0;cursor:pointer}
.reel .thumb{position:relative}
.reel .thumb::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.reel:hover .thumb{border-color:#fff;box-shadow:0 12px 36px rgba(20,16,12,0.5)}
.reel-modal{position:fixed;inset:0;z-index:120;background:rgba(20,16,12,0.92);
  display:flex;align-items:center;justify-content:center;padding:24px}
.reel-frame{position:relative;width:min(1100px,92vw);aspect-ratio:16/9;background:#000;
  border-radius:6px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,0.6)}
.reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel-close{position:absolute;top:20px;right:28px;background:none;border:none;color:#F3EDE3;
  font-size:36px;line-height:1;cursor:pointer;transition:color .2s;z-index:1}
.reel-close:hover{color:#fff}

/* ===== Recognition / trust =====
   One visual grammar for every proof point in this cluster: a container
   radius of 14px on the outer shapes, 6px on anything nested inside them;
   one shadow (on the dark panel only — nothing nested gets its own, to
   avoid the card-in-a-card look); every mark sits directly on its
   background with no decorative box unless contrast requires one. */
#recognition{padding:100px 0}
.award-panel{max-width:920px;margin:0 auto 32px;background-color:var(--dark);background-image:var(--grain);
  background-blend-mode:soft-light;border-radius:14px;box-shadow:0 24px 60px rgba(26,19,12,0.28);
  padding:44px 54px}
.award-top{display:flex;flex-direction:column;align-items:center;gap:16px}
.award-logos{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:32px;margin-bottom:8px}
.award-divider{width:1px;align-self:stretch;background:rgba(243,237,227,0.16)}
.platform-plate{display:inline-flex;align-items:center;background:var(--paper);border-radius:7px;padding:10px 18px}
.platform-plate img{height:24px;width:auto;display:block}
.platform-plate-tripadvisor .platform-mark{filter:brightness(0)}
/* Taller — the badge stacks 2 lines, needs more height than a wordmark. */
.platform-plate-google{padding:10px 20px}
.platform-plate-google img{height:44px}
/* Gold stops short of 100% — the score right below reads 4.9/5, so a sliver
   of the last star stays unfilled to match rather than rounding up to 5
   full. 92%, not the arithmetic 98% (4.9/5) — letter-spacing adds trailing
   space after the last star, so 98% of the element's full width lands past
   the glyph itself with nothing there to clip; tuned empirically instead so
   the notch actually falls on the star shape. */
.stars{font-size:28px;letter-spacing:6px;text-align:center;
  background:linear-gradient(90deg, var(--gold-light) 92%, rgba(243,237,227,0.25) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.score{font-family:'Gilda Display',serif;font-size:72px;line-height:1;color:var(--paper);text-align:center}
.score span{font-size:26px;color:rgba(243,237,227,0.55)}
.review-counts{font-family:'Barlow Condensed',sans-serif;font-size:15.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(243,237,227,0.68);text-align:center}
.award-medals{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:40px;padding-top:40px;border-top:1px solid rgba(243,237,227,0.12)}
.medal-slot{width:140px;height:140px;border-radius:50%;border:1px solid rgba(243,237,227,0.1);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.medal-slot img{max-height:106px;max-width:106px;width:auto;display:block}
.accredited{margin-top:36px;text-align:center}
.accredited-label{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:0.28em;
  text-transform:uppercase;color:var(--muted2);margin-bottom:20px}
.logo-wall{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;max-width:920px;margin:0 auto}
.logo-tile{background:#fff;border:1px solid rgba(59,50,42,0.08);border-radius:6px;height:88px;min-width:150px;
  padding:16px 28px;display:flex;align-items:center;justify-content:center}
.logo-tile img{max-height:48px;max-width:150px;width:auto;object-fit:contain;display:block}
@media (max-width:640px){
  .award-panel{padding:32px 22px}
  .award-logos{gap:18px}
  .award-divider{display:none}
  .score{font-size:56px}
  .medal-slot{width:108px;height:108px}
  .medal-slot img{max-height:80px;max-width:80px}
  .logo-tile{height:74px;min-width:130px;padding:14px 20px}
}

/* ===== Lead-gen popup form ===== */
.exit-card .field{margin-bottom:14px;text-align:left}
.exit-card form{margin-top:20px}
.exit-card .d{margin-bottom:4px}

/* Vision / Mission / Values */
#vmv{padding:110px 0}
.vmv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 44px;max-width:1240px;margin:0 auto}
.vmv-item{border-top:1px solid var(--line-dark);padding-top:26px}
.vmv-t{font-family:'Gilda Display',serif;font-size:24px;font-weight:500;color:var(--gold-light);margin-bottom:14px}
.vmv-d{font-size:14.5px;line-height:1.8;color:rgba(243,237,227,0.66)}
@media (max-width:900px){ .vmv-grid{grid-template-columns:1fr;gap:34px} }

/* Floating CTA — z-index sits under the exit popup (100) and reel modal (120)
   so neither is ever obstructed. Hidden state uses visibility so the link is
   not focusable while off-screen. */
/* Left-of-viewport, vertical text — same placement/orientation as the
   homepage's "Plan Your Trip" button (.inquiry-now-btn), so this doesn't
   collide with the bottom-right chat widget the way the old bottom-right
   pill did. */
.float-cta{position:fixed;top:50%;left:15px;z-index:90;display:inline-flex;align-items:center;gap:10px;
  transform-origin:0 50%;transform:rotate(-90deg) translate(-50%,50%);
  background:var(--gold);color:#fff;border:1px solid var(--gold);border-radius:2px;text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;font-size:14px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;
  padding:15px 26px;box-shadow:0 12px 34px rgba(30,25,20,0.3);
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s,background .25s,border-color .25s}
.float-cta.is-visible{opacity:1;visibility:visible;animation:floatCtaShake 5s linear infinite}
.float-cta:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff}
.float-cta:active{transform:rotate(-90deg) translate(-50%,50%) scale(.99)}
.float-cta:focus-visible{outline:2px solid var(--paper2);outline-offset:3px}
.float-cta svg{flex:0 0 auto;margin-top:-1px}
/* Same little side-to-side wiggle as the homepage's "Plan Your Trip" button
   (.shk_this / @keyframes shakeMe) — kept under its own name since this file
   and layout-assets/style.css both define @keyframes shakeMe and can end up
   loaded on the same page. */
@keyframes floatCtaShake{
  2%,18%{transform:rotate(-90deg) translate(-50%,50%)}
  4%,16%{transform:rotate(-90deg) translate(-40%,50%)}
  6%,10%,14%{transform:rotate(-90deg) translate(-50%,50%)}
  8%,12%{transform:rotate(-90deg) translate(-40%,50%)}
  18.1%{transform:rotate(-90deg) translate(-50%,50%)}
}
@media (max-width:640px){
  /* Rotated left-edge placement doesn't work at this width — drop to
     bottom-center, unrotated, matching .inquiry-now-btn's own mobile override. */
  .float-cta{top:auto;left:50%;bottom:0;transform:translate(-50%,-50%);
    padding:13px 18px;font-size:13px;letter-spacing:0.13em;gap:7px}
  .float-cta.is-visible{transform:translate(-50%,-50%)}
  .float-cta:active{transform:translate(-50%,-50%) scale(.99)}
  @keyframes floatCtaShake{
    2%,18%{transform:translate(-50%,-50%)}
    4%,16%{transform:translate(-40%,-50%)}
    6%,10%,14%{transform:translate(-50%,-50%)}
    8%,12%{transform:translate(-40%,-50%)}
    18.1%{transform:translate(-50%,-50%)}
  }
}
@media (prefers-reduced-motion:reduce){
  .float-cta{transition:opacity .2s ease,visibility .2s,background .2s}
  .float-cta.is-visible{animation:none}
}
/* Google's reCAPTCHA v3 badge (injected by their own script, not our
   markup) — hidden to match custom.min.css's sitewide .grecaptcha-badge
   rule, which the rest of the site relies on instead of showing the badge. */
.grecaptcha-badge{display:none !important}

/* ===== Cookie consent banner =====
   Ported from public/webtheme/layout-assets/css/style.css since mice-layout.blade.php
   (this page's own lean layout, see mice-tourism.blade.php) doesn't load that
   shared stylesheet. Selectors match web/partials/consent-banner.blade.php exactly. */
.consent-banner{display:none;background-color:rgba(0,0,0,0.5);position:fixed;top:0;bottom:0;left:0;right:0;z-index:9999;
  align-items:center;justify-content:center}
/* text-align:center, not the partial's own .text-center — that's a
   Bootstrap utility class and this page doesn't load Bootstrap. */
.consent-banner-content{background-color:var(--gold);padding:20px;width:700px;max-width:90vw;box-shadow:0 0 12px rgba(0,0,0,0.3);text-align:center}
.consent-banner-content p{color:#fff;font-size:16px;line-height:1.6;margin:0 0 16px}
.reject_consent_btn,.accept_consent_btn{outline:none;border:1px solid #fff;padding:10px 20px;font-family:'Barlow',sans-serif;
  font-size:14px;cursor:pointer;border-radius:2px}
.reject_consent_btn{background:transparent;color:#fff;margin-right:10px}
.accept_consent_btn{background:#fff;color:#000}