/* ===== GBR POLISH: design review fixes (2026-09-24) =====================
   Kept last in the stylesheet so it wins the cascade. Brand tokens only.
   1. Labels: nothing a guest reads is smaller than 12px.
   2. Focus: every link, button and field shows where the keyboard is.
   3. Tap targets: 44px on touch screens, with no change to the look.
   4. Phones: feature cards become compact rows (half the scrolling).
   5. Reviews: quote mark in the corner, bigger stars, upright text.
   6. Rooms grid: 12 columns so the smaller rooms fill a row.
   7. Live re-test fixes (2026-09-24): room tags, current menu item, the
      Evening label, the restaurant slider, the phone gallery, the phone
      menu's social icons, and headings that changed level.
   The "no card left on its own" balancing for every card grid lives in
   cms-apply.js, so it follows whatever the admin portal adds or removes. */

/* 1. Labels */
.eyebrow,.eyebrow.light,.eyebrow.center,.page-hero .eyebrow,.page-hero-content .eyebrow,section .eyebrow,.section-head .eyebrow{font-size:12.5px!important;letter-spacing:.16em!important}
.lbl,.slot-label,.scroll-cue,.room-card-tag,.footer-admin-link,.vt-badge,.hero-vertical,
.split-img-tag,.news-cat,.stat-label,.hero-eyebrow,.gallery-pill,.vt-sound-label,
.review-stat-label,.ag-kicker,.ag-switch-btn,.breadcrumb,.breadcrumb a,.breadcrumb span,
.book-btn,.book-btn span,.contact-form label,.contact-info-item strong,.newsletter-form button,
.intro-sign small,.intro small{font-size:12px!important}
.lbl,.slot-label,.room-card-tag,.split-img-tag,.news-cat,.stat-label,.review-stat-label,
.contact-form label{letter-spacing:.12em!important}
.scroll-cue,.hero-vertical,.hero-eyebrow{letter-spacing:.2em!important}
#agentGate label,.ag-dl-all,.ag-dl-all span,.ag-lb-dl,.ag-lb-dl span{font-size:12px!important}

/* 2. Focus */
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--lime)!important;outline-offset:2px!important;box-shadow:0 0 0 4px var(--navy)!important}
input[type="checkbox"]:focus-visible,input[type="radio"]:focus-visible{
  outline:2px solid var(--navy)!important;outline-offset:2px!important;box-shadow:0 0 0 5px rgba(204,255,0,.6)!important}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]):focus,
select:focus,textarea:focus{
  outline:none!important;border-color:var(--navy)!important;
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--navy),0 0 0 8px rgba(204,255,0,.55)!important}
input,select,textarea{transition:box-shadow .15s ease,border-color .15s ease}

/* 3. Tap targets on touch screens */
@media (max-width:1024px){
  .top-bar{padding-top:0!important;padding-bottom:0!important}
  .top-bar .lang-switch{gap:0!important}
  .top-bar .lang-switch a:not([hidden]){display:inline-flex!important;align-items:center;min-height:44px;padding:0 9px!important}
  .site-header .book-btn:not([hidden]){min-height:44px!important;display:inline-flex!important;align-items:center}
  .breadcrumb a:not([hidden]){display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin-top:-12px;margin-bottom:-12px}
  .drawer-close,.drawer-social a,.footer-social a{min-width:44px!important;min-height:44px!important}
  .gallery-pill,.vt-sound,.ag-switch-btn,.ag-link{min-height:44px!important}
  .ag-eye,.ag-tile-dl{min-width:44px!important;min-height:44px!important}
  .footer-col ul li{margin-top:0!important;margin-bottom:0!important}
  .footer-col ul a:not([hidden]),.footer-contact a:not([hidden]){display:inline-flex;align-items:center;min-height:44px}
  .footer-admin-link{position:relative}
  .footer-admin-link::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
  .contact-info-item a:not([hidden]),.ag-help a:not([hidden]){display:inline-flex;align-items:center;min-height:44px;margin-top:-12px;margin-bottom:-12px}
  .contact-form input,.contact-form select,.newsletter-form input{min-height:44px}
}

/* 4. Phones: feature cards as compact rows */
@media (max-width:640px){
  .features-grid{grid-template-columns:1fr!important;gap:12px!important}
  .features-grid .feature{display:grid!important;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:start;text-align:left!important;padding:18px!important;border-radius:18px!important}
  .features-grid .feature-icon{grid-row:1/3;width:56px!important;height:56px!important;margin:0!important}
  .features-grid .feature h3{font-size:17px!important;margin:2px 0 4px!important;text-align:left!important}
  .features-grid .feature p{font-size:14.5px!important;line-height:1.55!important;margin:0!important;text-align:left!important;font-weight:400!important}
  .review-stats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important;justify-items:center;text-align:center}
  .review-stat-num{font-size:2rem!important}
  .review-stat-label{letter-spacing:.08em!important}
}

/* 5. Reviews */
.testi-card::before{top:18px!important;left:auto!important;right:26px!important;font-size:5.5rem!important;color:rgba(204,255,0,.22)!important}
.testi-stars{font-size:1.15rem!important;letter-spacing:4px!important;margin-bottom:20px!important}
.testi-card blockquote{font-weight:400!important;font-style:normal!important;line-height:1.65!important}

/* 6. Rooms grid: 12 columns on wide screens */
@media (min-width:1025px){
  .rooms-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important}
  .rooms-grid .room-card.lg{grid-column:span 8}
  .rooms-grid .room-card.md{grid-column:span 4}
  .rooms-grid .room-card.sm{grid-column:span 3}
}

/* 7a. Room tags sit above the photo (the photo layer is z-index 1) */
.room-card-tag{z-index:4!important}

/* 7b. Current page in the main menu: navy text, the lime underline marks it */
.site-header .nav-main a.active,.site-header .nav-main > a.active{color:var(--navy)!important;-webkit-text-fill-color:var(--navy)!important}

/* 7c. Activities timetable: Evening label at 4.5:1 or better */
.slot-label.evening{color:#4F6300!important}

/* 7d. Restaurant slider: 48px arrows on touch screens, a 24px tap area round each dot */
.rest-dots{gap:14px!important}
.rest-dots button{position:relative;width:10px!important;height:10px!important}
.rest-dots button.on{width:28px!important}
.rest-dots button::after{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;transform:translate(-50%,-50%)}
@media (max-width:1024px){.rest-arrow{width:48px!important;height:48px!important}}

/* 7e. Galleries on phones: two columns, the lead photo across both */
@media (max-width:560px){
  .gallery-full-grid,.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:150px!important;gap:10px!important}
  .gallery-full-grid .gallery-tile,.gallery-grid .gallery-tile{aspect-ratio:auto!important}
  .gallery-full-grid .gallery-tile:first-child,.gallery-grid .gallery-tile:first-child,
  .gallery-full-grid .gallery-tile.gb-hero,.gallery-grid .gallery-tile.gb-hero{grid-column:span 2!important;grid-row:span 1!important}
  .gallery-full-grid .gallery-tile:not(.gb-hero):not(:first-child) .gb-gdots,
  .gallery-grid .gallery-tile:not(.gb-hero):not(:first-child) .gb-gdots{display:none!important}
}

/* 7f. Phone menu social icons: centred in their circles, white until hovered */
.drawer-social i{margin:0!important;width:auto!important;color:inherit!important}

/* 7g. Headings that changed level keep exactly the look they had */
.footer-col h2{color:var(--lime);font-family:var(--display);font-size:.92rem;text-transform:uppercase;letter-spacing:.18em;font-weight:800;line-height:1.1;margin:0 0 24px;padding:0 0 14px;position:relative;text-wrap:wrap}
.footer-col h2::after{content:'';position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--lime)}
.room-detail-info h2[data-cms-field="name"]{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.04em;line-height:.95;font-weight:800;margin:0 0 18px;color:#00003D}
.room-detail-info h2[data-cms-field="name"] em{color:var(--lime-deep);font-style:normal}
section:not(.features):not(.testimonials):not(.newsletter):not(.stats):not(.hero):not(.allinc):not(.page-hero) .amenity h3,.amenity h3{font-size:.95rem!important;letter-spacing:-.02em!important;line-height:1.1!important;color:#00003D!important;font-weight:700!important;margin:0}
section:not(.features):not(.testimonials):not(.newsletter):not(.stats):not(.hero):not(.allinc):not(.page-hero) .ag-doc-body h3,.ag-doc-body h3{font-family:var(--display);font-size:1.12rem!important;font-weight:700!important;color:#00003D!important;letter-spacing:-.02em!important;line-height:1.3!important;margin:0 0 6px!important;overflow-wrap:anywhere}

/* 8a. "Reduce motion": when a visitor's device asks for less motion,
   everything is shown in its final state straight away (no sliding
   headline words, fade-ins, zooms or a scrolling marquee). Slideshows stay
   on the photo showing (cms-apply.js). Nobody else sees a change. */
@media (prefers-reduced-motion:reduce){
  html,body{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .reveal,.reveal-stagger>*,html.js .reveal,html.js .reveal-stagger>*,.hero h1 .word,.hero-eyebrow,.hero-sub,.hero-cta{opacity:1!important;transform:none!important}
  .marquee-track{animation:none!important;transform:none!important}
  .tilt,.magnetic,.news-card:hover,.feature:hover,.amenity:hover,.room-card:hover,.week-card:hover,.gallery-tile:hover{transform:none!important}
  .news-card:hover .news-thumb svg,.news-card:hover .news-thumb>.gb-news-photo,.room-card:hover img,.gallery-tile:hover img{transform:none!important}
  .cursor-glow{display:none!important}
}

/* 8b. Phones and tablets: in photo-and-text sections the photo comes first, so it sits
   with its own name and not above the next one's */
@media (max-width:920px){.split-grid .split-img,.split-grid.reverse .split-img{order:-1!important}}

/* 8c. Phones: feature cards with a photo show it as a banner across the top,
   with the icon, title and text in a compact row under it */
@media (max-width:640px){
  .features-grid .feature.cms-feature{display:block!important;padding:0!important;overflow:hidden;text-align:left}
  .features-grid .feature.cms-feature>.cms-feat-photo{width:100%!important;height:150px!important;display:block!important;border-radius:0!important;margin:0!important}
  .features-grid .feature.cms-feature>.cms-feat-inner{display:grid!important;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:start;padding:20px 18px!important;text-align:left}
  .features-grid .feature.cms-feature>.cms-feat-inner>.feature-icon{grid-row:1/span 3;margin:0!important;width:56px!important;height:56px!important}
  .features-grid .feature.cms-feature>.cms-feat-inner>*:not(.feature-icon){grid-column:2;margin-left:0!important;margin-right:0!important}
}

/* 8d. Home, phones: the seven rooms are a row to swipe through, with the next
   card peeking in and a line saying there are more */
.gb-rooms-hint{display:none}
@media (max-width:640px){
  .rooms-grid.gb-swipe{display:flex!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:12px!important;margin-right:-20px!important;padding-right:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rooms-grid.gb-swipe::-webkit-scrollbar{display:none}
  .rooms-grid.gb-swipe>.room-card{flex:0 0 84%!important;scroll-snap-align:start;height:300px!important;min-height:300px!important;grid-column:auto!important;grid-row:auto!important}
  .gb-rooms-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 0;font-size:.9rem;font-weight:600;color:var(--navy)}
  .gb-rooms-hint i{color:var(--lime-deep);font-size:.85rem}
}

/* 8e. Room pages: the header carries the room's facts, price and booking
   button; the tag and name repeated under it are for screen readers only */
.page-hero-content .gb-rh-facts{margin:22px 0 0!important}
.page-hero-content .gb-rh-facts .room-quickfact{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:.86rem}
.page-hero-content .gb-rh-facts .room-quickfact i{color:var(--lime)}
.page-hero-content .room-cta-row.gb-rh-cta{flex-direction:row!important;align-items:center!important;flex-wrap:wrap!important;gap:14px 26px!important;margin-top:24px}
.page-hero-content .gb-rh-cta>div{width:auto!important;flex:0 0 auto!important}
.page-hero-content .gb-rh-cta .room-price-tag>span{color:rgba(255,255,255,.8)}
.page-hero-content .gb-rh-cta .room-price-tag div{color:var(--lime)}
.page-hero-content .gb-rh-cta .room-price-tag div small{color:rgba(255,255,255,.8)}
.page-hero-content .gb-rh-cta .btn{width:auto!important;max-width:none!important;flex:0 0 auto!important}
html.gb-room-head .room-detail-info>.eyebrow,
html.gb-room-head .room-detail-info>h2[data-cms-field="name"]{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
@media (max-width:520px){.page-hero-content .room-cta-row.gb-rh-cta{gap:12px 18px!important}.page-hero-content .gb-rh-cta .btn{padding-left:22px!important;padding-right:22px!important}}

/* 8f. Room pages: "Other room types" shows three other rooms */
.gb-xr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:8px 0 40px}
.gb-xr-card{position:relative;display:block;border-radius:22px;overflow:hidden;aspect-ratio:4/3.1;color:#fff;text-decoration:none;background:var(--navy-deep);box-shadow:0 18px 40px rgba(0,0,51,.18);isolation:isolate}
.gb-xr-photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.25);font-size:2.4rem}
.gb-xr-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.gb-xr-card:hover .gb-xr-photo img{transform:scale(1.05)}
.gb-xr-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,0,51,.9) 0%,rgba(0,0,51,.5) 36%,rgba(0,0,51,0) 64%)}
.gb-xr-tag{position:absolute;top:18px;left:18px;z-index:2;background:var(--lime);color:var(--navy-deep);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:99px}
.gb-xr-body{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;display:flex;flex-direction:column;gap:6px}
.gb-xr-name{font-family:var(--display);font-weight:800;font-size:1.4rem;line-height:1.15;letter-spacing:-.02em;color:#fff}
.gb-xr-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.84rem;font-weight:500;color:rgba(255,255,255,.9)}
.gb-xr-price{font-size:.9rem;color:rgba(255,255,255,.9)}
.gb-xr-price b{font-family:var(--display);font-size:1.25rem;font-weight:800;color:var(--lime)}
.gb-xr-link{position:absolute;inset:0;z-index:2;text-indent:-9999px;overflow:hidden;border-radius:inherit}
.gb-xr-link:focus-visible{outline:3px solid var(--lime);outline-offset:-3px}
.gb-xr-body{z-index:3;pointer-events:none}.gb-xr-body .gb-occ{pointer-events:auto}.gb-xr-tag{pointer-events:none}
@media (max-width:900px){.gb-xr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gb-xr-card:nth-child(3){display:none}}
@media (max-width:560px){.gb-xr-grid{grid-template-columns:1fr;gap:14px}.gb-xr-card{aspect-ratio:16/10}.gb-xr-card:nth-child(3){display:block}}

/* 8g. Room pages, phones: the facilities list shows six and opens on request */
.gb-fl-more{display:none}
@media (max-width:640px){
  .room-facilities-list.gb-fl-collapsed>li:nth-child(n+7){display:none!important}
  .gb-fl-more{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:14px;border:1.5px solid rgba(0,0,102,.22);border-radius:99px;background:#fff;font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);cursor:pointer}
  .gb-fl-more i{transition:transform .25s}
  .gb-fl-more[aria-expanded="true"] i{transform:rotate(180deg)}
  .gb-fl-more:focus-visible{outline:3px solid var(--lime-deep);outline-offset:2px}
}

/* 8h. News: one or two stories are laid out wide, picture beside the text;
   the home page's cards lead to the News page */
.news-grid.gb-news-feature{grid-template-columns:1fr!important;max-width:1040px;margin-left:auto!important;margin-right:auto!important}
.news-grid.gb-news-feature>.news-card{display:grid;grid-template-columns:1.15fr 1fr;border-radius:22px}
.news-grid.gb-news-feature>.news-card .news-thumb{height:auto!important;min-height:320px}
.news-grid.gb-news-feature>.news-card .news-body{padding:44px!important;display:flex;flex-direction:column;justify-content:center}
.news-grid.gb-news-feature>.news-card .news-body h3{font-size:1.6rem!important}
.gb-news-more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:10px 0;font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)!important}
.gb-news-more i{font-size:.8rem;transition:transform .25s}
.gb-news-more:hover i{transform:translateX(4px)}
.news-card .news-body p:has(+ .gb-news-more){margin-bottom:12px!important}
.gb-news-empty{text-align:center;margin:48px auto 0;max-width:52ch;color:var(--navy-deep);font-size:1.05rem}
@media (max-width:760px){
  .news-grid.gb-news-feature>.news-card{grid-template-columns:1fr}
  .news-grid.gb-news-feature>.news-card .news-thumb{min-height:240px}
  .news-grid.gb-news-feature>.news-card .news-body{padding:28px!important}
  .news-grid.gb-news-feature>.news-card .news-body h3{font-size:1.3rem!important}
}

/* 8i. Activities: today's card in the weekly timetable, first on phones */
.week-card.gb-today{border-color:var(--lime)!important;box-shadow:0 0 0 3px var(--lime),0 18px 40px rgba(0,0,102,.16)}
.week-card.gb-today .week-day{background:var(--lime)!important;color:var(--navy-deep)!important;display:flex;align-items:center;justify-content:space-between;gap:10px}
.gb-today-badge{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--navy-deep);color:var(--lime);padding:4px 10px;border-radius:99px;line-height:1.2}
@media (max-width:580px){.week-cards.gb-has-today>.week-card{order:var(--gb-o,0)}}

/* 8j. Outlets: a bar to jump between the restaurants and the bars */
.gb-jump{position:relative;z-index:60;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,102,.1);box-shadow:0 6px 18px rgba(0,0,51,.05)}
.gb-jump-in{max-width:var(--container,1400px);margin:0 auto;padding:10px 32px;display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none}
.gb-jump-in::-webkit-scrollbar{display:none}
.gb-jump-lbl{flex:0 0 auto;font-family:var(--display);font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-deep);margin-right:4px}
.gb-jump a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;border:1.5px solid rgba(0,0,102,.2);border-radius:99px;padding:0 18px;font-weight:600;font-size:.88rem;color:var(--navy-deep)!important;text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.gb-jump a:hover{border-color:var(--navy)}
.gb-jump a.on{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff!important}
.gb-jump a:focus-visible{outline:3px solid var(--lime-deep);outline-offset:2px}
.gb-jump.is-pinned{position:fixed;left:0;right:0;top:0}
.split-section h2[tabindex="-1"]:focus{outline:none!important;box-shadow:none!important}
@media (max-width:768px){.gb-jump-in{padding:8px 20px}.gb-jump-lbl{display:none}}

/* 8k. Phones: the footer's Explore and Resort columns sit side by side */
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr 1fr!important;column-gap:20px!important;row-gap:32px!important}
  .footer-grid>.footer-brand,.footer-grid>.footer-col:last-child{grid-column:1/-1}
}

/* 8l. Activities: the Morning and Afternoon labels, 8.1:1 on white */
.slot-label:not(.evening){color:rgba(0,0,102,.72)}

/* 8m. Home, phones: the headline wraps in balanced lines, no word on its own */
@media (max-width:640px){.hero h1 br{display:none}.hero h1{text-wrap:balance;max-width:14ch}}

/* 8n. Small text on navy at regular weight: the light weight broke up */
.hero-sub,.feature p,.cms-feat-inner p,.room-card-price,.testi-card blockquote,.newsletter p,.site-footer,.footer-brand p{font-weight:400!important}

/* 8o. Highlighted words in headings (em.lime and the home headline's accent):
   the lime underline is drawn under the words themselves, line by line, so a
   highlight that wraps onto two lines is underlined on each line, never
   across the whole column. It sits where the old bar did, behind the letters. */
em.lime{position:static;text-decoration-line:underline;text-decoration-color:var(--lime);text-decoration-color:color-mix(in srgb,var(--lime) 90%,transparent);text-decoration-thickness:6px;text-underline-offset:calc(.16em - 6px);text-decoration-skip-ink:none;-webkit-text-decoration-skip:none}
em.lime::after{content:none!important}
.page-hero-content h1 em.lime{text-decoration-line:none}
.hero h1 .accent{position:static;text-decoration-line:underline;text-decoration-color:rgba(204,255,0,.3);text-decoration-thickness:6px;text-underline-offset:calc(.16em - 6px);text-decoration-skip-ink:none;-webkit-text-decoration-skip:none}
.hero h1 .accent::after{content:none!important}

/* ===== /GBR POLISH ===== */
/* ===== GBR REFRESH: UI polish pack (2026-09-30) ===========================
   Same navy, lime, fonts, logo, photos and wording. Chosen from the before
   and after review: 1 hero, 2 header and buttons, 4 feature cards, 5 room
   cards, 6 reviews and stats, 7 phone booking bar, 8 motion, 9 phone
   details. Proposal 3 (section labels) was left out, so .eyebrow is not
   touched here. Kept after the GBR POLISH block so it wins the cascade.
   Round 2 (numbered 4 to 13) and round 3 (2026-10-01) follow below. */

/* 8. One easing curve for the whole site (a strong ease-out, no overshoot) */
:root{--ease:cubic-bezier(.23,1,.32,1);--ease-spring:cubic-bezier(.23,1,.32,1);--ease-out:cubic-bezier(.23,1,.32,1)}
/* 9. No grey flash on tap: the press scale below is the feedback */
html{-webkit-tap-highlight-color:transparent}

/* 2. Header: slimmer top bar, frosted header */
@media (min-width:1025px){.top-bar{padding:7px 0}}
.site-header{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
.site-header.scrolled{background:rgba(255,255,255,.84)}

/* 2. Buttons: wording as written (no forced capitals), no glow, no lift,
   a small press on every tap */
.btn{font-size:.9375rem;line-height:22px;font-weight:600;letter-spacing:.01em;text-transform:none;padding:15px 28px;box-shadow:none;
  transition:transform 140ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease!important}
.btn-lime{box-shadow:none}
.book-btn{font-size:.875rem!important;font-weight:600;letter-spacing:.01em!important;text-transform:none;padding:12px 22px;box-shadow:none;
  transition:transform 140ms var(--ease-out),color 200ms ease}
.book-btn span{font-size:inherit!important}
@media (max-width:520px){.book-btn{font-size:.8125rem!important;padding:10px 16px}}
.btn:hover,.btn-lime:hover,.btn-navy:hover,.book-btn:hover{transform:none!important;box-shadow:none!important}
@media (hover:hover) and (pointer:fine){.btn-lime:hover{background:#D8FF3D}}
.btn:active,.book-btn:active,.hero-link:active{transform:scale(.97)!important}

/* 1. Hero: the photo shows through, the words arrive together, clear actions */
.hero-overlay{background:linear-gradient(90deg,rgba(0,0,60,.62) 0%,rgba(0,0,60,.3) 42%,rgba(0,0,60,0) 70%),
  linear-gradient(180deg,rgba(0,0,60,0) 55%,rgba(0,0,50,.55) 100%)}
@media (max-width:760px){.hero-overlay{background:linear-gradient(180deg,rgba(0,0,60,.35) 0%,rgba(0,0,60,.45) 45%,rgba(0,0,50,.72) 100%)}}
.hero-eyebrow{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important;
  padding:0!important;border-radius:0!important;box-shadow:none!important;font-weight:600!important;margin-bottom:22px!important;
  animation:gbRise 520ms var(--ease-out) both!important}
.hero-eyebrow .pulse{animation:none!important;width:6px!important;height:6px!important}
.hero h1 .word{transform:translateY(8px);animation:gbRise 520ms var(--ease-out) forwards}
.hero-sub{margin-bottom:30px;animation:gbRise 520ms var(--ease-out) .2s both}
.hero-cta{display:flex;gap:14px 26px;align-items:center;flex-wrap:wrap;animation:gbRise 520ms var(--ease-out) .28s both}
.hero-cta .btn{justify-content:center}
.hero-link{display:inline-flex;align-items:center;gap:8px;color:#fff;font-family:var(--sans);font-weight:600;font-size:.9375rem;line-height:1;
  text-decoration:none;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.5);transition:border-color 200ms ease,transform 140ms var(--ease-out)}
.hero-link i{font-size:.8em;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.hero-link:hover{border-color:#fff}.hero-link:hover i{transform:translateX(3px)}}
@keyframes gbRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* the entrance waits until the loading screen has lifted */
.loader:not(.gone)~.hero .word,.loader:not(.gone)~.hero .hero-eyebrow,.loader:not(.gone)~.hero .hero-sub,
.loader:not(.gone)~.hero .hero-cta{animation-play-state:paused!important}

/* 4. Feature cards on navy: hairline edge, bare lime icon, no glow or lift */
.features .feature,#bars .feature{border:1px solid rgba(255,255,255,.1)!important;background:rgba(255,255,255,.035)!important}
.feature::before{content:none!important}
.feature:hover,#bars .feature:hover{transform:none!important;box-shadow:none!important}
.features .feature:hover,#bars .feature:hover{border-color:rgba(204,255,0,.35)!important;background:rgba(255,255,255,.05)!important}
.features .feature-icon,#bars .feature-icon{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--lime)!important}
.features .feature-icon svg,#bars .feature-icon svg{width:36px!important;height:36px!important}
.features .feature-icon i,#bars .feature-icon i{font-size:30px!important}
.feature:hover .feature-icon,.feature:hover .feature-icon svg{transform:none!important;box-shadow:none!important}
.features .feature:hover .feature-icon,#bars .feature:hover .feature-icon{background:none!important;color:var(--lime)!important}
.features .feature p,#bars .feature p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.78)}

/* 5. Room cards: white names, the photo clear down to the words, a slow
   photo zoom on mouse only (no 3D tilt) */
.room-card::after{background:linear-gradient(180deg,rgba(0,0,40,0) 45%,rgba(0,0,40,.35) 70%,rgba(0,0,30,.78) 100%)}
.room-card h3{text-shadow:0 1px 12px rgba(0,0,0,.35)}
.room-card-meta,.room-card-price{text-shadow:0 1px 8px rgba(0,0,0,.45)}
.room-card-scene{transition:transform 700ms var(--ease-out)}
.room-card:hover .room-card-scene{transform:none;filter:none}
.room-card:hover h3{transform:none}
@media (hover:hover) and (pointer:fine){.room-card:hover .room-card-scene{transform:scale(1.03)}}
.room-card-tag{text-transform:none;letter-spacing:.02em!important;font-weight:600;box-shadow:none}

/* 6. Reviews and stats: no glow, hairline cards */
.review-stat-num{text-shadow:none}
.testi-card{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}
.testi-card:hover{transform:none;border-color:rgba(204,255,0,.35);background:rgba(255,255,255,.05)}
.testi-card blockquote{font-size:16px;line-height:1.7}

/* 8. Motion: sections settle in half a second, 40ms apart */
html.js .reveal{transform:translateY(24px);transition:transform 500ms var(--ease-out)}
html.js .reveal-stagger > *{transform:translateY(16px);transition:transform 500ms var(--ease-out)}
html.js .reveal.in,html.js .reveal-stagger.in > *{transform:none}
.reveal-stagger.in > *:nth-child(1){transition-delay:0ms}
.reveal-stagger.in > *:nth-child(2){transition-delay:40ms}
.reveal-stagger.in > *:nth-child(3){transition-delay:80ms}
.reveal-stagger.in > *:nth-child(4){transition-delay:120ms}
.reveal-stagger.in > *:nth-child(5){transition-delay:160ms}
.reveal-stagger.in > *:nth-child(6){transition-delay:200ms}
.reveal-stagger.in > *:nth-child(7){transition-delay:240ms}

/* 7. Phones: Check availability and a call button within thumb reach.
   Hidden on the first screen, while scrolling down and over the footer;
   back as soon as the guest scrolls up (cms-apply.js). */
.gb-bookbar{display:none}
@media (max-width:760px){
  .gb-bookbar{display:flex;position:fixed;z-index:150;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));gap:8px;
    transition:transform 300ms var(--ease-out),opacity 200ms ease}
  .gb-bookbar.is-away{transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom,0px)));opacity:0;pointer-events:none}
  .gb-bookbar a{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:14px;text-decoration:none;
    font-family:var(--sans);font-weight:600;font-size:.9375rem;line-height:1.2;box-shadow:0 12px 30px -10px rgba(0,0,40,.45);
    transition:transform 140ms var(--ease-out)}
  .gb-bookbar a:active{transform:scale(.97)}
  .gb-bookbar-book{flex:1;background:var(--lime);color:var(--navy-deep)}
  .gb-bookbar-call{flex:0 0 58px;background:var(--navy-deep);color:#fff}
  .gb-bookbar-call i{font-size:18px}
  .gb-bookbar ~ #gbToTop{bottom:calc(76px + env(safe-area-inset-bottom,0px))!important}
  /* 9. iPhone zooms into any field under 16px */
  input,select,textarea,.contact-form input,.contact-form select,.contact-form textarea,.newsletter-form input{font-size:16px!important}
  /* the contact fields keep the exact height they had at 15.2px */
  .contact-form input,.contact-form select,.contact-form textarea{line-height:1.33!important}
}
.gb-vh{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
@media (prefers-reduced-motion:reduce){
  .gb-bookbar{transition:none}
  .hero h1 .word,.hero-eyebrow,.hero-sub,.hero-cta{animation:none!important;opacity:1!important;transform:none!important}
}

/* ---- Round 2 (2026-10-01), from the second audit: 4, 6, 8, 10, 11, 12, 13 ----
   4 (pills without the glow) is done where the glow was written
   (build/refresh.py), so the pills keep every other part of their look. */

/* 6. Feature cards: the icon takes its own size, so photo, icon and words
   read as one unit (phones keep their icon column) */
@media (min-width:641px){
  .features .feature-icon,#bars .feature-icon{width:auto!important;height:auto!important;margin:0 auto 14px!important}
  .features .feature .cms-feat-inner,#bars .feature .cms-feat-inner{padding:28px 24px 30px!important}
}

/* 8. Header: once it has scrolled away it waits above the screen, comes
   back (compact and frosted) as soon as the guest scrolls up, and leaves
   again while they read on. cms-apply.js sets the classes. */
.site-header.gb-hdr-fixed{position:fixed!important;top:0!important;left:0;right:0;z-index:90!important;
  transform:translateY(-100%);transition:transform 180ms cubic-bezier(.4,0,1,1),box-shadow 200ms ease!important;
  background:rgba(255,255,255,.8)!important;box-shadow:none!important}
.site-header.gb-hdr-fixed.gb-hdr-show{transform:none;transition:transform 240ms var(--ease-out),box-shadow 200ms ease!important;
  box-shadow:0 1px 0 rgba(0,0,77,.06),0 12px 30px -18px rgba(0,0,40,.35)!important}
.site-header.gb-hdr-fixed .header-inner{transition:padding 200ms var(--ease-out)}
.site-header.gb-hdr-fixed .logo-photo img,.site-header.gb-hdr-fixed .logo img{transition:height 200ms var(--ease-out)}
.site-header.gb-hdr-compact .header-inner{padding-top:6px!important;padding-bottom:6px!important}
.site-header.gb-hdr-compact .logo-photo img,.site-header.gb-hdr-compact .logo img{height:46px!important}
@media (max-width:520px){.site-header.gb-hdr-compact .logo-photo img,.site-header.gb-hdr-compact .logo img{height:40px!important}}
.site-header.gb-hdr-instant,.site-header.gb-hdr-instant .header-inner,.site-header.gb-hdr-instant img{transition:none!important}
.gb-hdr-spacer{height:0}
.scroll-progress{height:2px!important}

/* 10. Arriving at a section, once: the heading rises out of its own bottom
   edge, then photos open from the bottom like a curtain */
html.js h2.gb-rise{clip-path:inset(0 0 100% 0);transform:translateY(100%)}
html.js h2.gb-rise.gb-in{clip-path:inset(-.25em -.3em -.45em -.3em);transform:none;
  transition:clip-path 700ms var(--ease-out),transform 700ms var(--ease-out)!important}
html.js .gb-curtain{clip-path:inset(100% 0 0 0)}
html.js .gb-curtain.gb-in{clip-path:inset(0 0 0 0);transition:clip-path 760ms cubic-bezier(.77,0,.175,1)!important}

/* 11. Home hero: the film settles back and dims slightly as the page moves on */
.gb-hero-dim{position:absolute;inset:0;z-index:3;background:#00003A;opacity:0;pointer-events:none}

/* 12. Phone menu: a sheet on the iOS curve (in 420ms, out 260ms), links
   follow 30ms apart, and it can be pushed closed with the thumb */
.drawer{right:0!important;transform:translateX(105%);visibility:hidden;touch-action:pan-y;
  transition:transform 260ms cubic-bezier(.4,0,1,1),visibility 0s linear 260ms!important}
.drawer.open{transform:none;visibility:visible;transition:transform 420ms cubic-bezier(.32,.72,0,1),visibility 0s!important}
.drawer-overlay{transition:opacity 260ms ease,visibility 0s linear 260ms!important}
.drawer-overlay.open{transition:opacity 420ms ease,visibility 0s!important}
.drawer.gb-dragging,.drawer-overlay.gb-dragging{transition:none!important}
.drawer-nav a{opacity:0;transform:translateX(14px);
  transition:opacity 150ms ease,transform 150ms ease,color 200ms ease,padding 300ms var(--ease-out)!important}
.drawer.open .drawer-nav a{opacity:1;transform:none;
  transition:opacity 300ms ease,transform 420ms var(--ease-out),color 200ms ease,padding 300ms var(--ease-out)!important}
.drawer.open .drawer-nav a:nth-child(2){transition-delay:30ms,30ms,0s,0s!important}
.drawer.open .drawer-nav a:nth-child(3){transition-delay:60ms,60ms,0s,0s!important}
.drawer.open .drawer-nav a:nth-child(4){transition-delay:90ms,90ms,0s,0s!important}
.drawer.open .drawer-nav a:nth-child(5){transition-delay:120ms,120ms,0s,0s!important}
.drawer.open .drawer-nav a:nth-child(6){transition-delay:150ms,150ms,0s,0s!important}
.drawer.open .drawer-nav a:nth-child(7){transition-delay:180ms,180ms,0s,0s!important}
.drawer.open .drawer-nav a:nth-child(8){transition-delay:210ms,210ms,0s,0s!important}
.drawer.open .drawer-nav a:nth-child(n+9){transition-delay:240ms,240ms,0s,0s!important}
.drawer-nav a.gb-sub{font-size:1.05rem!important;padding-left:18px!important;color:rgba(255,255,255,.82)!important;border-left:2px solid rgba(204,255,0,.5)}
#bars{scroll-margin-top:64px}

/* 13. Gallery photo viewer: the photo grows out of the tile (cms-apply.js) */
.gb-lb-ghost{position:fixed;z-index:301;background-size:cover;background-position:center;border-radius:14px;pointer-events:none;transform-origin:0 0;will-change:transform,clip-path}
#lbContent.gb-lb-hold{opacity:0!important}

/* ---- Round 3 pack (2026-10-01): 1, 2, 4, 6, 7, 8 ------------------------
   (3, 5 and 9 live in cms-apply.js, next to the slideshows they change) */

/* 1. Headings share their words out over the lines, so none ends on a lone
   word; running text avoids a single word on its last line */
h1,h2,h3{text-wrap:balance}
p,blockquote,li{text-wrap:pretty}

/* 2. Page headers on phones: the words fill the width, so the navy follows
   them down the page instead (wider screens: in the page's own rule) */
@media (max-width:760px){
  .page-hero-overlay{background:linear-gradient(180deg,rgba(0,0,46,.62) 0%,rgba(0,0,46,.22) 24%,rgba(0,0,46,.28) 46%,rgba(0,0,46,.72) 72%,rgba(0,0,46,.9) 100%)}
}

/* 4. Room pages: the header shows the size, guests, view and price, so the
   details below start with the description (the Book button stays) */
html.gb-room-head .room-detail-info>.room-quickfacts,
html.gb-room-head .room-detail-info .room-cta-row>.room-price-tag{display:none!important}

/* 6. Outlets menu: grows from under its button in 160ms, leaves in 100ms,
   a bridge over the gap keeps it open on the way down, and the links no
   longer shift sideways under the pointer (cms-apply.js adds .gb-open) */
.nav-dropdown-menu{top:calc(100% + 2px);transform:scale(.97);transform-origin:var(--gb-dd-ox,44px) 0;
  transition:opacity 100ms ease,transform 100ms ease,visibility 0s linear 100ms!important}
.nav-dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown.gb-open .nav-dropdown-menu{opacity:1;visibility:visible;transform:none;
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out),visibility 0s!important}
.nav-dropdown.gb-open>a::before{transform:scaleX(1);transform-origin:left}
.nav-dropdown>a::after{transition:transform 160ms var(--ease-out)!important}
.nav-dropdown.gb-open>a::after{transform:rotate(180deg)}
.nav-dropdown-menu a{transition:background-color 120ms ease,color 120ms ease!important}
.nav-dropdown-menu a:hover{padding-left:18px!important}
.nav-dropdown-menu a:focus-visible{outline:3px solid var(--lime-deep);outline-offset:-3px}

/* 7. Gallery filters: one navy pill slides to the chosen filter
   (cms-apply.js adds the pill and moves it) */
.gb-pills-ind{position:relative}
.gb-pills-ind>.gallery-pill{position:relative;z-index:1}
.gb-pills-ind>.gallery-pill.active{background:transparent!important;border-color:transparent!important}
.gb-pill-ind{position:absolute;left:0;top:0;z-index:0;border-radius:100px;background:var(--navy-deep);pointer-events:none;
  transition:transform 280ms cubic-bezier(.32,.72,0,1),width 280ms cubic-bezier(.32,.72,0,1),height 280ms cubic-bezier(.32,.72,0,1)}
.gb-pill-ind.gb-still{transition:none}

/* 8. Home, phones: the highlight cards and the reviews are rows to swipe,
   like the rooms, with a line saying there are more */
.gb-row-hint{display:none}
@media (max-width:640px){
  .features-grid.gb-swipe:not(.gb-cs),.testi-grid.gb-swipe{display:flex!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    gap:12px!important;margin-right:-20px!important;padding-right:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:stretch}
  .features-grid.gb-swipe:not(.gb-cs)::-webkit-scrollbar,.testi-grid.gb-swipe::-webkit-scrollbar{display:none}
  .features-grid.gb-swipe:not(.gb-cs)>*,.testi-grid.gb-swipe>*{flex:0 0 84%!important;min-width:0;scroll-snap-align:start;margin:0!important}
  .gb-row-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 0;font-size:.9rem;font-weight:600;color:var(--navy)}
  .gb-row-hint.gb-on-dark{color:#fff}
  .gb-row-hint i{color:var(--lime-deep);font-size:.85rem}
  .gb-row-hint.gb-on-dark i{color:var(--lime)}
}

@media (prefers-reduced-motion:reduce){
  html.js h2.gb-rise,html.js .gb-curtain{clip-path:none!important;transform:none!important}
  .drawer-nav a{opacity:1!important;transform:none!important}
  .nav-dropdown-menu{transform:none!important}
  .gb-pill-ind{transition:none}
}
/* ===== /GBR REFRESH ===== */