/* ============================================================
   SHARED MOBILE CHROME (≤820px) — nav, footer, back-to-top.
   Used by Our Story / Gallery / Contact so every phone page
   carries the same header + footer as the homepage.
   Desktop is untouched: everything lives inside the query.
   ============================================================ */
@media (max-width:820px){
/* ---------- NAV: invisible overlay bar, white logo + bars over the image ---------- */
.g-nav{position:fixed!important;top:0;left:0;right:0;background:transparent!important;backdrop-filter:none!important;border-bottom:0!important;box-shadow:none!important;z-index:70}
.g-nav::after{content:"";position:absolute;left:0;right:0;top:0;height:150%;z-index:-1;background:linear-gradient(180deg,rgba(6,40,54,.62),rgba(6,40,54,.34) 55%,rgba(6,40,54,0));pointer-events:none}
/* pages that open on cream keep the teal mark — white would vanish */
body:not(:has(.g-nav + .os-hero)):not(:has(.g-nav + .pe-hero)) .g-nav::after{display:none}
body:not(:has(.g-nav + .os-hero)):not(:has(.g-nav + .pe-hero)) .g-nav-inner .g-logo img{filter:none!important}
body:not(:has(.g-nav + .os-hero)):not(:has(.g-nav + .pe-hero)) .ee-mc-burger i{background:#114C5F;box-shadow:none}
/* pages that open on copy rather than a photo need room for the overlay bar */
.g-nav + *:not(.os-hero):not(.pe-hero){padding-top:92px!important}
.g-nav-inner{grid-template-columns:1fr auto 1fr!important;grid-template-rows:auto!important;padding:11px 20px!important;gap:8px!important;position:relative}
.g-nav-inner .g-logo{grid-column:2;grid-row:1;justify-self:center;gap:0!important}
.g-nav-inner .g-logo span{display:none!important}
.g-nav-inner .g-logo img{width:62px!important;height:62px!important;filter:brightness(0) invert(1)!important}
/* the bar slides away as you scroll and comes back at the top */
.g-nav{transition:transform .28s ease}
.g-nav.ee-mc-hide{transform:translateY(-120px)}
.g-nav-inner .g-cta{display:none!important}
.g-nav-inner .g-links{display:none!important}
.ee-mc-burger{grid-column:1;grid-row:1;justify-self:start;display:flex;flex-direction:column;justify-content:center;gap:6px;width:46px;height:46px;padding:0;border:0;background:none}
.ee-mc-burger i{display:block;width:31px;height:2.2px;border-radius:2px;background:#fffdf6;box-shadow:0 1px 6px rgba(6,40,54,.45);transition:transform .22s,opacity .22s}
.g-nav-inner.ee-mc-open .ee-mc-burger i:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.g-nav-inner.ee-mc-open .ee-mc-burger i:nth-child(2){opacity:0}
.g-nav-inner.ee-mc-open .ee-mc-burger i:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
.ee-mc-panel{display:none;position:absolute;top:calc(100% + 8px);left:20px;right:20px;z-index:5;flex-direction:column;padding:10px 0;border-radius:26px;background:rgba(251,246,232,.62);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 30px 60px -26px rgba(6,40,54,.5);overflow:hidden}
/* drifting pink and lime glows inside the glass, as on the homepage menu */
.ee-mc-panel::before,.ee-mc-panel::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(22px);pointer-events:none}
.ee-mc-panel::before{width:200px;height:200px;top:-60px;right:-46px;background:radial-gradient(circle,rgba(255,143,174,.62),rgba(255,143,174,0) 70%);animation:eeMcDriftA 9s ease-in-out infinite alternate}
.ee-mc-panel::after{width:230px;height:230px;bottom:-84px;left:-64px;background:radial-gradient(circle,rgba(200,225,80,.55),rgba(200,225,80,0) 70%);animation:eeMcDriftB 12s .4s ease-in-out infinite alternate}
@keyframes eeMcDriftA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,54px) scale(1.28)}100%{transform:translate(24px,86px) scale(1.06)}}
@keyframes eeMcDriftB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(88px,-46px) scale(1.24)}100%{transform:translate(150px,18px) scale(1.05)}}
/* the page behind the open menu blurs back */
.ee-mc-scrim{position:fixed;inset:0;z-index:60;opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s ease;background:rgba(6,40,54,.18)}
body.ee-mc-menu .ee-mc-scrim{opacity:1;pointer-events:auto;visibility:visible;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.g-nav-inner.ee-mc-open .ee-mc-panel{display:flex}
.ee-mc-panel a{display:block;padding:13px 22px;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:19px;letter-spacing:-.02em;color:#fffdf6;text-shadow:0 1px 10px rgba(6,34,46,.35)}
.ee-mc-panel a.on{color:#114C5F;text-shadow:none;text-decoration:underline;text-decoration-color:rgba(17,76,95,.35);text-underline-offset:5px}
.ee-mc-panel a:active{background:rgba(255,253,246,.14)}
/* ---------- FOOTER: centred stack — logo, tagline, blurb, cities, socials ---------- */
.g-footer-grid{text-align:center}
.g-footer-brand{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:2px!important;width:100%!important}
.g-footer-brand .g-logo{justify-content:center!important;margin:0 auto 6px!important}
.g-footer-brand .g-logo img{width:78px!important;height:78px!important}
.g-footer-brand .g-logo span{display:none!important}
.g-footer-brand p.g-footer-tag{order:1;font-size:20.5px!important;line-height:1.15!important;color:#C8E150!important;white-space:nowrap!important;margin:0 0 6px!important}
.g-footer-brand p{order:2;font-size:13px!important;line-height:1.45!important;white-space:nowrap!important;margin:0!important;align-self:stretch!important;width:100%!important;max-width:none!important;text-align:center!important}
.g-footer-brand p + p{order:3;margin-top:2px!important}
.g-social{order:4;display:flex!important;justify-content:center!important;gap:20px!important;margin:14px 0 26px!important}
.g-social a{display:grid!important;place-items:center;width:31px!important;height:31px!important;padding:0!important;border:0!important;background:none!important;color:#fffdf6!important}
.g-social a svg{display:block;width:29px;height:29px}
.g-footer-col{text-align:left!important}
.g-footer-col h5{font-size:11.5px!important;margin-bottom:7px!important}
.g-footer-col a{font-size:13px!important}
/* ---------- BACK TO TOP ---------- */
.ee-mc-top{position:fixed;right:12px;bottom:20px;z-index:120;width:66px;height:66px;border-radius:50%;border:1px solid rgba(17,76,95,.14);background:rgba(255,253,246,.72);backdrop-filter:blur(6px);color:rgba(17,76,95,.78);font:600 26px/1 "Inter",sans-serif;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s;box-shadow:0 8px 20px rgba(8,40,54,.18)}
.ee-mc-top.show{opacity:1;pointer-events:auto}

/* ---------- TYPE: one scale across the whole phone site ---------- */
.os-body{font-size:13px!important;line-height:1.6!important}
.os-hero-sub{font-size:13.5px!important}
.os-chapter{font-size:12px!important;letter-spacing:.13em!important;padding:9px 18px!important}
/* chapter labels write themselves in as you scroll, like the pink note */
.os-reveal .os-chapter{clip-path:inset(0 100% -22% 0);transition:clip-path .95s cubic-bezier(.45,.1,.6,1) .3s}
.os-reveal.in .os-chapter{clip-path:inset(0 -8% -22% 0)}
.os-card-tail,.os-loc-list p{font-size:13px!important}
.os-card-body h3{font-size:19px!important}
/* ---------- OUR STORY on the phone ---------- */
/* ch05 cards — keep faces in frame */
/* the photo fills the card head exactly — no untinted strip at the bottom */
.cdv-2 .os-card-top{min-height:320px!important}
.cdv-2 .os-card-shot{position:absolute!important;inset:0!important;aspect-ratio:auto!important}
.os-card-shot img{object-position:50% 24%!important}
/* card labels: display font, sentence case, 50% larger */
.cdv-2 .os-card .os-tag{font-family:"Bricolage Grotesque",sans-serif!important;font-weight:900!important;font-size:30px!important;letter-spacing:-.02em!important;text-transform:none!important;line-height:1.05!important}
/* one plain white arrow, drawn not typed, lying flat under the label */
.os-card-more i{display:block!important;width:42px!important;height:17px!important;font-size:0!important;box-shadow:none!important;border-radius:0!important;background:#fffdf6!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M2 8h33M28 2l7 6-7 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M2 8h33M28 2l7 6-7 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s ease}
.os-card-more i svg{display:none}
.os-card.open .os-card-more i{transform:rotate(180deg)}
.cdv-2 .os-card-top > .os-card-more{margin-bottom:20px!important}
/* ch06 — chapter copy first, portrait underneath */
.os-founder{display:flex!important;flex-direction:column!important}
.os-founder-copy{order:0}
.os-founder-shot{order:1;margin-top:20px!important;max-width:none!important;aspect-ratio:4/5!important}
.os-hero{min-height:100vh!important}
.os-pull{display:none!important}
.os-ch1-shot{border-width:2px!important;aspect-ratio:3/4.15!important}
.os-shot,.os-founder-shot,.os-card-shot{border-width:2px!important}
.os-mem{border-width:5px!important}
/* roomier margins — nudge with the pad control, saved per device */
:root{--pad:32px!important}
/* footer sits closer to the content above it */
.g-footer{padding-top:26px!important}
@media (prefers-reduced-motion:reduce){
  .os-reveal .os-chapter,.os-reveal.in .os-chapter{clip-path:none!important;transition:none!important}
  .g-nav{transition:none!important}
}
/* keep wide panels inside the screen */
html{overflow-x:clip!important}
body{overflow-x:clip!important}
.c-form-card{max-width:100%!important;box-sizing:border-box!important}
/* ---------- PRIVATE EVENTS on the phone ---------- */
/* a hero photo chosen for portrait screens — shorter than the full window so
   the copy sits below the guest's face rather than across it */
.pe-hero{min-height:82vh!important}
/* hero copy sits centred, at Our Story's type sizes */
.pe-hero .pe-hero-in{align-self:center;transform:translateY(9vh)}
.pe-hero-h1{font-size:clamp(24px,6.6vw,34px)!important;max-width:none!important}
.pe-hero-sub{font-size:13.5px!important;max-width:50ch}
.pe-hero-desktop{display:none!important}
.pe-hero-mobile{display:block!important}
.pe-hero:not(.ue-hero) .pe-hero-mobile{object-position:50% 72%;transform:scale(1.3);transform-origin:50% 72%}
/* the review carousel shows its neighbours peeking, like the event cards */
.pe-car-stage{overflow:visible}
.pe-revc{width:min(258px,66vw)!important}
.pe-revc[data-pos="-1"]{transform:translateX(calc(-50% - 37vw)) scale(.82)!important;opacity:.42!important;pointer-events:auto!important}
.pe-revc[data-pos="1"]{transform:translateX(calc(-50% + 37vw)) scale(.82)!important;opacity:.42!important;pointer-events:auto!important}
.pe-revc[data-pos="-2"],.pe-revc[data-pos="2"]{opacity:0!important;pointer-events:none!important}
/* no soft white fade over the photo rails */
.pe-reel{-webkit-mask-image:none!important;mask-image:none!important}
/* occasion-card copy matches the site's body size */
.pe-card-txt h3{font-size:26px!important;line-height:1.06!important}
.pe-card.wide .pe-card-txt h3{font-size:28px!important}
.pe-card-txt p{font-size:13px!important;line-height:1.45!important}
.pe-reel-card b{font-size:14px!important}
.pe-reel-card span{font-size:12px!important}
/* the logo marquee moves at a readable clip on a small screen */
.pe-partners-track{animation-duration:24s!important}
/* tighter vertical rhythm: reviews → numbers → occasions */
.pe-sec:has(.pe-carousel){padding-bottom:10px!important}
.pe-numbers{padding-top:18px!important;padding-bottom:14px!important}
.pe-numbers + .pe-sec{padding-top:20px!important}
/* the no-follow-the-leader list reads at body size */
.pe-ticks li{font-size:13px!important;line-height:1.5!important;padding-left:30px!important}
.pe-ticks{gap:12px!important}
/* trusted-by sits close under what's included */
.pe-sec:has(+ .pe-partners){padding-bottom:calc(var(--sec) * .5)!important}
.pe-partners{padding-top:14px!important}
/* the date field: our own calendar mark, native chrome hidden, value left-aligned */
.pe-field input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;width:100%;text-align:left;padding-right:42px!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23114C5F' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='3.2' y='4.8' width='17.6' height='16' rx='3.4'/%3E%3Cpath d='M3.2 9.6h17.6M8 3.2v3.2M16 3.2v3.2'/%3E%3C/svg%3E") no-repeat right 13px center;background-size:18px 18px}
.pe-field input[type=date]::-webkit-date-and-time-value{text-align:left}
.pe-field input[type=date]::-webkit-calendar-picker-indicator{opacity:0;width:26px;margin:0;padding:0}
.pe-field input[type=date]::-webkit-inner-spin-button,.pe-field input[type=date]::-webkit-clear-button{display:none}
/* the footer sits close under the enquiry card */
.pe-cta{padding-bottom:26px!important}
.g-footer{padding-top:26px!important}
/* any leftover authoring chrome never shows on phones */
.os-swap-toggle,.os-picker,.os-frame-toggle,.fr-bar,.fr-hint,.ee-lp-toggle,.ee-lp-sheet,.cu-fab,.cu-panel{display:none!important}
}
@media (min-width:821px){.ee-mc-burger,.ee-mc-panel,.ee-mc-top{display:none!important}}

/* ============================================================
   DESKTOP (≥821px) — invisible header over photo-hero pages,
   dropping back to the cream bar once you scroll past the hero.
   Matches the homepage. Cream-topped pages keep the cream bar.
   ============================================================ */
@media (min-width:821px){
  body:has(.g-nav + .os-hero) .g-nav,body:has(.g-nav + .pe-hero) .g-nav{position:fixed;top:0;left:0;right:0;background:transparent;backdrop-filter:none;border-bottom:0;transition:background .3s ease,border-color .3s ease}
  body:has(.g-nav + .os-hero) .g-nav::after,body:has(.g-nav + .pe-hero) .g-nav::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,40,54,.5),rgba(6,40,54,.14) 70%,rgba(6,40,54,0));pointer-events:none}
  body:has(.g-nav + .os-hero) .g-nav .g-logo img,body:has(.g-nav + .pe-hero) .g-nav .g-logo img{filter:brightness(0) invert(1)}
  body:has(.g-nav + .os-hero) .g-nav .g-logo span,body:has(.g-nav + .pe-hero) .g-nav .g-logo span{color:#fffdf6}
  body:has(.g-nav + .os-hero) .g-nav .g-links a,body:has(.g-nav + .pe-hero) .g-nav .g-links a{color:rgba(255,253,246,.92)}
  body:has(.g-nav + .os-hero) .g-nav .g-links a.on,body:has(.g-nav + .pe-hero) .g-nav .g-links a.on{color:var(--lime)}
  body:has(.g-nav + .os-hero) .g-nav .g-cta,body:has(.g-nav + .pe-hero) .g-nav .g-cta{background:rgba(255,253,246,.14);border:1px solid rgba(255,253,246,.55);color:#fffdf6;box-shadow:none}
  body:has(.g-nav + .os-hero) .g-nav .g-cta:hover,body:has(.g-nav + .pe-hero) .g-nav .g-cta:hover{background:rgba(255,253,246,.24)}
  /* the hero fills the window behind it */
  body:has(.g-nav + .os-hero) .os-hero,body:has(.g-nav + .pe-hero) .pe-hero{min-height:100vh}
  /* scrolled state — cream bar, teal marks */
  .g-nav.scrolled{background:rgba(251,246,232,.94)!important;backdrop-filter:blur(14px)!important;border-bottom:1px solid var(--rule)!important}
  .g-nav.scrolled::after{display:none}
  .g-nav.scrolled .g-logo img{filter:none!important}
  .g-nav.scrolled .g-logo span{color:var(--teal)!important}
  .g-nav.scrolled .g-links a{color:var(--teal-deep)!important}
  .g-nav.scrolled .g-links a.on{color:var(--pink)!important}
  .g-nav.scrolled .g-cta{background:var(--teal)!important;border-color:transparent!important;color:var(--paper)!important}
}

/* Menu CTA — the desktop quote button, carried into the phone menu */
.ee-mc-panel .ee-mc-quote{margin:8px 16px 4px;padding:13px 18px!important;border-radius:999px;background:#C8E150;color:#0A3645!important;text-align:center;justify-content:center;font-weight:800!important}
.ee-mc-panel .ee-mc-quote:active{background:#b9d647}