@charset "utf-8";
/* CSS Document */

/*
 * breaq-santorini — Overrides
 *
 * Client-specific layer, hand-built per client. Sits on top of the baked
 * components base. Brand colours, type scale, spacing tweaks, per-component
 * adjustments go here — never structural component CSS (that stays in
 * breaq-santorini-components.css).
 *
 * Mobile base first (no media query), then the breakpoints below.
 */

/* ===== mobile base ===== */

/* ------------------------------------------------------------------
   COMPONENT ADJUSTMENTS
   ------------------------------------------------------------------ */

/* Welcome image is square-cornered in the design */
.flexible_feature_highlight_component_inner_01 .flx .featureLeft .featureVisual,
.flexible_feature_highlight_component_inner_01 .flx .featureLeft .featureVisual img
{
	border-radius:0;
}

/* Full-bleed bands run edge to edge vertically as well as horizontally: the
   image fills its half, so any component padding would show as a strip of
   ground above and below it. The content column carries its own inset. */
.flexible_feature_highlight_component_01.fullBleed
{
	padding-top:0;
	padding-bottom:0;
}
/* Below 992 the base gives the content column no inset (it only gets 80px from 992), so the text hugs the hero
   above, the band before it, or the footer below (side by side at 768–991). Inset the column, not the band —
   band padding would show as ground strips around the image half. Max-width scoped so the base 992 padding wins. */
@media(max-width:991px)
{
	.flexible_feature_highlight_component_01.fullBleed .flx .featureRight { padding-top:56px; padding-bottom:56px; }
}
/* The base sizes .featureVisual with a padding-bottom:110% aspect-ratio hack,
   so it keeps its own ratio and the image scales inside it — in a 50/50 band
   that leaves ground showing above or below. Take the visual out of flow and
   pin it to .featureLeft, so it covers the half edge to edge whatever the
   content column's height turns out to be. */
.flexible_feature_highlight_component_01.fullBleed .flx .featureLeft
{
	position:relative;
	overflow:hidden;
}
.flexible_feature_highlight_component_01.fullBleed .flx .featureLeft .featureVisual
{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	padding:0;
	height:auto;
	width:auto;
}
.flexible_feature_highlight_component_01.fullBleed .flx .featureLeft .featureVisual img.vis
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center center;
}

/* Location band sits flush against the sections either side — the band's own
   scrim and inner spacing carry the rhythm, so the component padding is removed
   rather than doubled up. */
.flexible_full_image_feature_component_02
{
	padding-top:0;
	padding-bottom:0;
}
/* The band itself sits flush (outer padding 0), but its content is inset from
   the top and bottom edges of the photo. */
.flexible_full_image_feature_component_02 .flexible_full_image_feature_component_inner_02
{
	padding-top:50px;
	padding-bottom:50px;
}

/* ------------------------------------------------------------------
   SECTION GROUNDS
   The design alternates cream / cream-2 / obsidian down the page. We have no
   per-section background field, so each ground is keyed to the component that
   renders that section. The two amenities_list instances are told apart by the
   .fullBleed modifier the Rooms row carries.
   Design order: hero(dark) welcome(cream) rooms(cream-2) location(band)
                 experiences(obsidian) amenities(cream) gallery(cream-2) contact(obsidian)
   ------------------------------------------------------------------ */
body { background:var(--color-light); }

.flexible_feature_highlight_component_01.fullBleed { background:var(--color-light); }
.flexible_amenities_list_component_01.fullBleed { background:var(--color-light-2); }
.flexible_amenities_list_component_01:not(.fullBleed) { background:var(--color-light); }
.flexible_feature_cards_grid_component_01 { background:var(--color-dark); }
/* "See Experiences" sits on obsidian — linkStyle-first (obsidian pill) vanishes there, so use the
   design's on-dark button (btn--light, as the hero CTA): cream hairline + cream text, fills cream on hover */
.flexible_feature_cards_grid_component_inner_01 .cardsGridLink .linkStyle
{
	font-size:14px;
	letter-spacing:.16em;
	text-transform:capitalize;
	background:transparent;
	border:1px solid rgba(246,241,234,.6);
	color:var(--color-light);
}
.flexible_feature_cards_grid_component_inner_01 .cardsGridLink .linkStyle:hover
{
	background:var(--color-light);
	border-color:var(--color-light);
	color:var(--color-dark);
	opacity:1;
}
.flexible_gallery_grid_component_01 { background:var(--color-light-2); }
.flexible_form_component_01 { background:var(--color-dark); }
.flexible_form_component_02 { background:var(--color-dark); }

/* Contact sits on obsidian and the footer follows on obsidian — the design
   reads as one dark block, so the gap between them closes. */
.flexible_form_component_02 .contactFormCard { background:rgba(255,255,255,0.04); }
.flexible_form_component_02 .detailLabel { color:var(--color-brand-secondary); font-size:14px; letter-spacing:.14em; text-transform:uppercase; }
.flexible_form_component_02 .detailValue { color:var(--color-light); }
/* "Find us on Google" under the address — cream with a soft underline, gold on hover (matches the burger overlay) */
.flexible_form_component_inner_02 .detailValue a.mapLink
{
	color:var(--color-light);
	text-decoration-color:rgba(246,241,234,.35);
	letter-spacing:.04em;
	transition:color .18s ease, text-decoration-color .18s ease;
}
.flexible_form_component_inner_02 .detailValue a.mapLink:hover { color:var(--color-brand-secondary); text-decoration-color:currentColor; }
.flexible_form_component_02 .contactSocials .socialEnt img { filter:brightness(0) invert(1); }

/* Enquiry form (Gravity Forms, Orbital theme) — the design's hairline field style,
   drawn as a full border rather than an underline (Paul, 2026-10-15). */
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform_fields { column-gap:18px; row-gap:22px; }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield_label,
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield_label .gform-field-label__text
{
	font-family:var(--font-body);
	font-size:10px;
	font-weight:400;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:rgba(246,241,234,.45);
	margin-bottom:9px;
}
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield_required { color:var(--color-brand-secondary); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield textarea,
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield select
{
	font-family:var(--font-body);
	font-size:15px;
	font-weight:300;
	color:var(--color-light);
	background:transparent;
	border:1px solid rgba(246,241,234,.28);
	border-radius:0;
	box-shadow:none;
	height:44px;
	padding:8px 14px;
	transition:border-color .18s cubic-bezier(.22,.61,.36,1);
}
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield textarea { height:144px; min-block-size:144px; min-height:144px; resize:vertical; }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield input:focus,
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield textarea:focus,
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield select:focus
{
	border-color:var(--color-brand-secondary);
	outline:none;
	box-shadow:none;
}
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield select option { color:var(--color-text); }
/* number spinner — GF draws it from --gf-icon-ctrl-number (dark fill); same glyph, cream at .45 */
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield input[type=number] { --gf-icon-ctrl-number:url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z' fill='rgba(246,241,234,0.45)'/%3E%3C/svg%3E"); }
/* datepicker — icon is a gform-icons glyph on ::before; toggle sits inside the input instead of taking row width */
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .ginput_container_date { position:relative; }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .ginput_container_date input.datepicker { flex:1 1 auto; inline-size:100%; padding-inline-end:44px; }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield--input-type-datepicker .ginput_container_date button.gform-datepicker-toggle.gform-theme-button { position:absolute; inset-inline-end:14px; inset-block:0; margin-block:auto; margin-inline:0; transform:none; }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield--input-type-datepicker .ginput_container_date .gform-datepicker-toggle-icon--default,
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield--input-type-datepicker .ginput_container_date .gform-datepicker-toggle-icon--default::before { color:rgba(246,241,234,.45); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield--input-type-datepicker .ginput_container_date .gform-datepicker-toggle:hover .gform-datepicker-toggle-icon--default,
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gfield--input-type-datepicker .ginput_container_date .gform-datepicker-toggle:hover .gform-datepicker-toggle-icon--default::before { color:var(--color-light); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .iti__selected-flag:hover,
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .iti__selected-flag:focus { background:rgba(246,241,234,.06); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework input::placeholder,
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework textarea::placeholder { color:rgba(246,241,234,.28); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .iti__selected-flag,
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .iti__selected-dial-code { color:var(--color-light); background:transparent; }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .iti__arrow { border-top-color:rgba(246,241,234,.45); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .iti__arrow--up { border-top-color:transparent; border-bottom-color:rgba(246,241,234,.45); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .iti__dropdown-content { color:var(--color-text); }
/* Datepicker popup — renders inside the dark form card, so reset it to a light panel in Breaq colours */
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform-datepicker-calendar { background:var(--color-light); color:var(--color-text); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform-datepicker-calendar select.nav.current
{
	color:var(--color-text);
	background:transparent;
	border:0;
	height:auto;
	padding:4px 8px;
	font-size:15px;
	font-weight:400;
	text-align:center;
}
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform-datepicker-calendar .nav.btn,
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform-datepicker-calendar th.week { color:var(--color-text); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform-datepicker-calendar .nav.btn:hover { color:var(--color-brand); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform-datepicker-calendar td.day span { color:var(--color-text); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform-datepicker-calendar td.day:where(:not(.selected):not(.dayMarked):not(.disabled)) span:hover { background-color:var(--color-light-2); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform-datepicker-calendar td.selected span { border-color:var(--color-brand); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform-datepicker-calendar td.dayMarked span { background-color:var(--color-brand); border-color:var(--color-brand); color:var(--color-light); }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform-datepicker-calendar .monthMessage p { color:var(--color-text); opacity:.55; }
/* Send Enquiry — the design's gold pill (.btn--gold) — selector outranks GF framework button reset */
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform_footer { margin-top:34px; padding:0; }
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform_footer button[type=submit]
{
	font-family:var(--font-body);
	font-size:16.5px;
	font-weight:400;
	letter-spacing:.16em;
	text-transform:capitalize;
	line-height:1;
	padding:15px 24px;
	height:auto;
	border:1px solid transparent;
	border-radius:30px;
	background:var(--color-brand);
	color:var(--color-light);
	box-shadow:none;
	transition:background-color .18s cubic-bezier(.22,.61,.36,1);
}
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform_footer button[type=submit]:hover,
.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .gform_footer button[type=submit]:focus-visible { background:var(--color-brand-secondary); }

/* Footer — obsidian ground with a hairline above it, as in the design */
.global_footer_component_02
{
	margin-top:0;
	border-top:1px solid rgba(246,241,234,.14);
	background:var(--color-dark);
}
.global_footer_component_02 .footerBrand img { height:44px; }
.global_footer_component_02 .footerCopyright,
.global_footer_component_02 .footerLegal,
.global_footer_component_02 .footerCreators
{
	font-family:var(--font-body);
	font-size:14px;
	letter-spacing:.14em;
	color:rgba(246,241,234,.45);
}
.global_footer_component_02 .footerLegal a { color:inherit; }
.global_footer_component_02 .footerLegal a:hover { color:var(--color-light); }

/* ------------------------------------------------------------------
   TEXT COLOUR
   The base ships no applied text colour (deliberate — see overrides-workflow).
   Light grounds take --color-text; dark grounds take --color-light, including
   anything sitting over a photo.
   ------------------------------------------------------------------ */
.flexible_feature_highlight_component_01,
.flexible_amenities_list_component_01,
.flexible_gallery_grid_component_01 { color:var(--color-text); }

.flexible_feature_cards_grid_component_01,
.flexible_form_component_01,
.flexible_form_component_02,
.hero_global_component_02 .heroMessage,
.hero_global_component_02 .heroFacts,
.hero_global_component_01 .heroMessage,
.flexible_full_image_feature_component_inner_02 .fullImageContent,
.flexible_full_image_feature_component_inner_02 .fullImageFacts,
.flexible_full_image_feature_component_inner_01 .fullImageContent { color:var(--color-light); }

/* headings inherit the ground's colour rather than a global heading colour */
.flexible_feature_cards_grid_component_01 h2,
.flexible_feature_cards_grid_component_01 h3,
.flexible_form_component_01 h2,
.hero_global_component_02 h1,
.hero_global_component_01 h1,
.flexible_full_image_feature_component_inner_01 h2,
.flexible_full_image_feature_component_inner_02 h2 { color:inherit; }

/* muted text = --color-text at reduced opacity (house rule, no extra token) */
.flexible_amenities_list_component_01 .amenityMeta,
.flexible_amenities_list_component_01 .amenitiesNote,
.flexible_feature_highlight_component_01 .featureContent p { opacity:.85; }

/* hairlines on the room list follow the brand gold, as in the design */
.flexible_amenities_list_component_01.fullBleed .amenityList { border-top:1px solid var(--color-brand); }
.flexible_amenities_list_component_01.fullBleed .amenityList li { border-bottom-color:rgba(151,125,78,.28); }
.flexible_amenities_list_component_01.fullBleed .amenityList .amenityRow:hover { color:var(--color-brand); }

/* Content well. The design puts band__inner in .wrap (max 1200, centred), so the
   band photo stays full-bleed while its content stops at the well. The base
   component has no well — the width is a per-client design value, so it lives here. */
.flexible_full_image_feature_component_inner_02 .flx
{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}

/* Hero is exactly one viewport, never more. The base sets height:100vh with a
   650px floor, and min-height beats max-height — so on a short window (landscape
   phone, small laptop) the hero ran past the fold. min() keeps the 650 intent
   while never exceeding the viewport. */
.hero_global_component_02,
.hero_global_component_01
{
	min-height:min(650px, 100vh);
	max-height:100vh;
}




/* ==================================================================
   TYPOGRAPHY
   Mobile-first translation of the design's desktop-first scale
   (main.css tokens). Design breakpoints were max-width 767.98 / 1200,
   so they land on our 768 and 1200 steps.

        token           <768    768-1200   1200+
        --size-h1        36        54        66
        --size-h2        29        38        42
        --size-h2-feature 40       58        72
        --size-h3        19        21        21
        --size-lead      16        19        19
        --size-body      14      16.5      16.5
        --size-small     15        15        15
        --size-eyebrow   14        14        14
        --section-pad    56    72(<992)     104

   Colour comes from the tokens: eyebrow = gold (--color-brand),
   headings and body inherit their ground (set in the grounds block above).
   ================================================================== */

body
{
	font-size:14px;
	line-height:1.85;
}

/* --- eyebrow / mini titles ------------------------------------- */
.miniTitle span,
.factsTitle span
{
	display:inline-block;
	font-family:var(--font-body);
	font-size:14px;
	font-weight:400;
	letter-spacing:.24em;
	text-transform:uppercase;
	line-height:1.4;
	color:var(--color-brand);
}
/* on the dark bands the gold is too low-contrast — the design uses gold-light */
.flexible_feature_cards_grid_component_01 .miniTitle span,
.flexible_form_component_01 .miniTitle span,
.flexible_full_image_feature_component_inner_02 .miniTitle span,
.flexible_full_image_feature_component_inner_02 .factsTitle span
{
	color:var(--color-brand-secondary);
}

/* The hero puts eyebrow, title and subline inside ONE <h1> as spans, so they
   all inherit the 66px display size unless sized individually.
   Design: eyebrow 14 uppercase cream-80, title 66 cream, subline lead cream-90. */
.hero_global_component_02 .heroMessage h1 span,
.hero_global_component_01 .heroMessage h1 span
{
	display:block;
}
.hero_global_component_02 .heroMessage h1 span:first-child,
.hero_global_component_01 .heroMessage h1 span:first-child
{
	font-family:var(--font-body);
	font-size:14px;
	letter-spacing:.24em;
	text-transform:uppercase;
	line-height:1.4;
	color:rgba(246,241,234,.8);
	margin-bottom:26px;
}
.hero_global_component_02 .heroMessage h1 span:last-child:not(:first-child),
.hero_global_component_01 .heroMessage h1 span:last-child:not(:first-child)
{
	font-family:var(--font-body);
	font-size:16px;
	line-height:1.7;
	letter-spacing:normal;
	max-width:680px;
	margin:26px auto 0;
	color:rgba(246,241,234,.9);
}
.hero_global_component_02 .heroMessage h1,
.hero_global_component_01 .heroMessage h1
{
	max-width:950px;
	margin-left:auto;
	margin-right:auto;
}
.hero_global_component_02 .heroFacts li
{
	font-size:13px;
	color:rgba(246,241,234,.7);
}

/* --- headings --------------------------------------------------- */
h1, h2, h3
{
	font-family:var(--font-heading);
	font-weight:400;
}
.hero_global_component_02 .heroMessage h1,
.hero_global_component_01 .heroMessage h1
{
	font-size:36px;
	line-height:1.08;
	letter-spacing:.004em;
}
h2,
.flexible_amenities_list_component_01 h2,
.flexible_feature_cards_grid_component_01 h2,
.flexible_gallery_grid_component_inner_01 h2,
.flexible_feature_highlight_component_01 h2
{
	font-size:29px;
	line-height:1.16;
	margin-bottom:20px; /* breathing room before the body copy */
}
/* the page's single loud heading — Location. Cormorant opens up at display
   sizes, so the design tightens leading and tracking here. */
.flexible_full_image_feature_component_inner_02 .fullImageTextual h2,
.flexible_full_image_feature_component_inner_01 .fullImageTextual h2
{
	font-size:40px;
	line-height:1.02;
	letter-spacing:-.005em;
}
h3,
.flexible_feature_cards_grid_component_01 .cardData h3
{
	font-size:19px;
	line-height:1.3;
}

/* --- body copy --------------------------------------------------- */
.flexible_feature_highlight_component_01 .featureContent,
.flexible_amenities_list_component_01 .amenitiesNote,
.flexible_feature_cards_grid_component_01 .cardsGridIntro,
.flexible_gallery_grid_component_inner_01 .galleryIntro,
.flexible_full_image_feature_component_inner_02 .fullImageTextualDesc
{
	font-size:14px;
	line-height:1.85;
}

/* --- room list (amenities in full-bleed mode) --------------------- */
.flexible_amenities_list_component_01.fullBleed .amenityLabel
{
	font-family:var(--font-heading);
	font-weight:400;
	font-size:19px;
	line-height:1.3;
}
.flexible_amenities_list_component_01.fullBleed .amenityMeta
{
	font-family:var(--font-body);
	font-size:14px;
	letter-spacing:.2em;
	text-transform:uppercase;
	white-space:nowrap;
	opacity:.7;
}

/* --- facts card rows --------------------------------------------- */
.flexible_full_image_feature_component_inner_02 .factLabel
{
	font-size:14px;
	line-height:1.5;
}
.flexible_full_image_feature_component_inner_02 .factValue
{
	font-size:14px;
	letter-spacing:.14em;
	text-transform:uppercase;
	white-space:nowrap;
	opacity:.8;
}

/* --- hero fact strip ---------------------------------------------- */
.hero_global_component_02 .heroFacts li
{
	font-family:var(--font-body);
	font-size:14px;
	letter-spacing:.2em;
	text-transform:uppercase;
}

/* --- buttons ------------------------------------------------------ */
.linkStyle
{
	font-family:var(--font-body);
	font-size:14px;
	letter-spacing:.14em;
	text-transform:uppercase;
}

/* --- section rhythm (--section-pad) -------------------------------- */
.flexible_feature_highlight_component_01,
.flexible_amenities_list_component_01,
.flexible_feature_cards_grid_component_01,
.flexible_gallery_grid_component_01
{
	padding:56px 0;
}


/* ==================================================================
   HEADER — scroll state
   Design (.site-header): transparent over the hero, cream text, tall with a
   large logo. Once scrolled past the hero it goes solid obsidian, shrinks,
   and the logo minifies. The theme's JS adds `scrolling` to <body> at that
   point, so everything hangs off body.scrolling.

   Reserve inverts with the header: obsidian-on-transparent over the hero,
   cream-on-obsidian once the header is solid.
   ================================================================== */

.header_global_component_02
{
	transition:background-color .25s ease, height .25s ease;
}
body.scrolling .header_global_component_02
{
	background-color:var(--color-dark);
	min-height:80px;
}

/* Telephone and Reserve sit on the same line as inline items. The base hides
   the telephone below 768 and sets display:block above it, so the override has
   to land inside that breakpoint too (further down) — this is the shared part. */
.header_global_component_inner_02 .bookButton
{
	display:inline-block;
	vertical-align:middle;
}

/* logo minifies on scroll (design: 100px -> 40px, 66px at mid widths) */
.header_global_component_inner_02 .brand img
{
	max-width:none;
	height:66px;
	width:auto;
	transition:height .25s ease;
}
body.scrolling .header_global_component_inner_02 .brand img
{
	height:40px;
}
/* design steps (static build --logo-h): stuck 54 from 768; over the hero 100 from 992 */
@media(min-width:768px)
{
	body.scrolling .header_global_component_inner_02 .brand img { height:54px; }
}
@media(min-width:992px)
{
	.header_global_component_inner_02 .brand img { height:100px; }
}

/* telephone — cream at 80% over the hero and on the solid ground alike */
.header_global_component_inner_02 .headerTel a,
.header_global_component_inner_02 .telephone a
{
	font-size:14px;
	letter-spacing:.14em;
	color:rgba(246,241,234,.8);
	text-decoration:none;
	white-space:nowrap;
}
body.scrolling .header_global_component_inner_02 .headerTel a,
body.scrolling .header_global_component_inner_02 .telephone a
{
	color:rgba(246,241,234,.8);
}

/* Reserve button */
.header_global_component_inner_02 .bookButton a
{
	display:inline-block;
	font-size:14px;
	letter-spacing:.16em;
	text-transform:uppercase;
	line-height:1;
	padding:12px 28px;
	border:1px solid var(--color-dark);
	border-radius:999px;
	background:var(--color-dark);
	color:var(--color-light);
	text-decoration:none;
	transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.header_global_component_inner_02 .bookButton a:hover
{
	opacity:1; /* master's .linkStyle hover fades to .85; Breaq's Reserve changes fill instead */
	background:var(--color-text);
	border-color:var(--color-text);
}
/* inverted once the header is solid — cream fill, dark text */
body.scrolling .header_global_component_inner_02 .bookButton a
{
	background:var(--color-light);
	border-color:var(--color-light);
	color:var(--color-dark);
}
body.scrolling .header_global_component_inner_02 .bookButton a:hover
{
	background:var(--color-white);
	border-color:var(--color-white);
}

/* base is inline-block at every width since the 2026-10-08 master header sync */
.header_global_component_02 .menuBurger { vertical-align:middle; }

/* Burger strokes: the base draws them as a 2px --color-light border-top; Breaq's are 1px white. */
/* the base sets min-height:30px, which beats height — both have to come down */
.header_global_component_inner_02 .menuBurger a
{
	height:25px;
	min-height:25px;
}
.header_global_component_inner_02 .menuBurger a span.top,
.header_global_component_inner_02 .menuBurger a span.middle,
.header_global_component_inner_02 .menuBurger a span.bottom
{
	width:30px;
	border-top:1px solid var(--color-white);
}

/* ==================================================================
   MENU OVERLAY (header_global_component_02 .navOverlay)
   Obsidian full-screen ground. Menu left in Cormorant; logo, address,
   telephone, email and social right. Reserve + map link are dropped here —
   the header already carries Reserve. (Paul, 2026-10-15)
   ================================================================== */
.header_global_component_02 .navOverlay { padding:90px 24px 48px; } /* ground + text colour come from the base */
.header_global_component_02 .navOverlay .navCloser
{
	position:fixed;
	top:22px;
	right:24px;
}
.header_global_component_02 .navOverlay .navCloser a { width:30px; height:30px; }
.header_global_component_02 .navOverlay .navCloser a::before,
.header_global_component_02 .navOverlay .navCloser a::after { height:1px; background:var(--color-light); transition:background-color .18s ease; }
.header_global_component_02 .navOverlay .navCloser a:hover::before,
.header_global_component_02 .navOverlay .navCloser a:hover::after { background:var(--color-brand-secondary); }

.header_global_component_02 .navOverlayInner { width:100%; }

/* menu */
.header_global_component_02 .navOverlay .menuLeft { padding-bottom:48px; }
.header_global_component_02 .navOverlay .nav li { margin:0; }
.header_global_component_02 .navOverlay .nav li a
{
	font-weight:300;
	font-size:34px;
	line-height:1.15;
	padding:2px 0; /* base is 6px 0 */
	color:var(--color-light);
	text-decoration:none;
	transition:color .18s ease;
}
.header_global_component_02 .navOverlay .nav li a:hover,
.header_global_component_02 .navOverlay .nav li.active > a { color:var(--color-brand-secondary); }.header_global_component_02 .navOverlay .nav .dropdown-menu { display:none; }

/* details column */
.header_global_component_02 .navOverlay .menuRight
{
	font-family:var(--font-body);
	font-size:15px;
	font-weight:300;
	line-height:1.7;
}
.header_global_component_02 .navOverlay .menuRight > div { margin-bottom:28px; }
.header_global_component_02 .navOverlay .mHeader
{
	font-size:10px;
	font-weight:400;
	letter-spacing:.2em;
	color:var(--color-brand-secondary);
	opacity:1;
}
.header_global_component_02 .navOverlay .address,
.header_global_component_02 .navOverlay .address p { color:rgba(246,241,234,.7); margin:0; }
.header_global_component_02 .navOverlay .comms { margin-top:-14px; }
.header_global_component_02 .navOverlay .commsEntry a
{
	color:var(--color-light);
	text-decoration:none;
	letter-spacing:.04em;
	transition:color .18s ease;
}
.header_global_component_02 .navOverlay .commsEntry a:hover { color:var(--color-brand-secondary); }
.header_global_component_02 .navOverlay .bookButtonInMenu { display:none; }
/* "Find us on Google" (Global Options google_map_location_url) — tucked under the comms, styled like them */
.header_global_component_02 .navOverlay .mapLink { margin-top:-14px; }
.header_global_component_02 .navOverlay .mapLink a
{
	color:var(--color-light);
	text-decoration:underline;
	text-decoration-color:rgba(246,241,234,.35);
	text-underline-offset:4px;
	letter-spacing:.04em;
	transition:color .18s ease, text-decoration-color .18s ease;
}
.header_global_component_02 .navOverlay .mapLink a:hover { color:var(--color-brand-secondary); text-decoration-color:currentColor; }
.header_global_component_02 .navOverlay .social .inner { gap:18px; }
.header_global_component_02 .navOverlay .socialChan { width:24px; height:24px; }
.header_global_component_02 .navOverlay .socialChan .icon { width:24px; }
.header_global_component_02 .navOverlay .socialChan img { filter:brightness(0) invert(1); transition:opacity .18s ease; }
.header_global_component_02 .navOverlay .socialChan a:hover img { opacity:.6; }

/* ==================================================================
   BUTTONS
   Design .btn: pill, 1px border, .16em tracking, capitalised.
   --light  : cream 60% border, cream text, fills cream on hover (hero)
   --solid  : obsidian fill, cream text
   --outline: obsidian border, obsidian text, fills on hover
   ================================================================== */

.linkStyle
{
	display:inline-block;
	padding:15px 24px;
	border:1px solid transparent;
	border-radius:999px;
	line-height:1;
	text-decoration:none;
	transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}

/* hero CTA = btn--light: bordered, transparent, cream.
   Also the full-image feature link — it sits on the same dark photo overlay. */
.hero_global_component_02 .heroLinks .discoverLink a,
.flexible_full_image_feature_component_inner_02 .fullImageLink a,
.flexible_full_image_feature_component_inner_01 .fullImageLink a
{
	display:inline-block;
	font-family:var(--font-body);
	font-size:14px;
	letter-spacing:.16em;
	text-transform:capitalize;
	line-height:1;
	padding:15px 24px;
	border:1px solid rgba(246,241,234,.6);
	border-radius:999px;
	color:var(--color-light);
	text-decoration:none;
	transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.hero_global_component_02 .heroLinks .discoverLink a:hover,
.flexible_full_image_feature_component_inner_02 .fullImageLink a:hover,
.flexible_full_image_feature_component_inner_01 .fullImageLink a:hover
{
	background:var(--color-light);
	border-color:var(--color-light);
	color:var(--color-dark);
}

/* solid (dark grounds) and outline (light grounds) */
.linkStyle-first
{
	background:var(--color-dark);
	border-color:var(--color-dark);
	color:var(--color-light);
}
.linkStyle-first:hover
{
	background:var(--color-text);
	border-color:var(--color-text);
}
.flexible_amenities_list_component_01 .amenitiesLink .linkStyle,
.flexible_gallery_grid_component_inner_01 .galleryLink .linkStyle
{
	background:transparent;
	border-color:var(--color-dark);
	color:var(--color-dark);
}
.flexible_amenities_list_component_01 .amenitiesLink .linkStyle:hover,
.flexible_gallery_grid_component_inner_01 .galleryLink .linkStyle:hover
{
	background:var(--color-dark);
	color:var(--color-light);
}


/* ==================================================================
   INTERIOR PAGES — hero breadcrumb, room feature, room display grid
   No interior comp exists, so these follow the homepage design's own
   language: square images, cream / cream-2 grounds, gold hairlines,
   uppercase tracked meta, pill buttons, Cormorant headings.
   ================================================================== */

/* --- interior hero: breadcrumb sits above the eyebrow, quieter than it --- */
.hero_global_component_01 .heroBreadcrumb
{
	font-family:var(--font-body);
	font-size:13px;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:rgba(246,241,234,.6);
	margin-bottom:30px;
}
.hero_global_component_01 .heroBreadcrumb a
{
	color:inherit;
	text-decoration:none;
}
.hero_global_component_01 .heroBreadcrumb a:hover { color:var(--color-light); }
.hero_global_component_01 .heroBreadcrumb .sep { margin:0 6px; }

/* --- grounds: room feature on cream; the room grid alternates to cream-2
       on a room page. On the rooms index the grid is the whole page, so it stays cream. --- */
.flexible_room_element_component_01 { background:var(--color-light); color:var(--color-text); }
.flexible_room_display_grid_component_01 { background:var(--color-light); color:var(--color-text); }
.page-template-template-room .flexible_room_display_grid_component_01 { background:var(--color-light-2); }
/* rooms listing (/rooms/) runs wider than the base 1200; "Other Rooms" on room pages keeps 1200 */
body:not(.page-template-template-room) .flexible_room_display_grid_component_01 .flexible_room_display_grid_component_inner_01 { max-width:1400px; }

/* --- room feature: square images, as the homepage --- */
.flexible_room_element_component_inner_01 .mainRoomVisual .inner,
.flexible_room_element_component_inner_01 .roomImageSlider .swiper-slide .inner a,
.roomAmenityGridElement .gridInner
{
	border-radius:0;
}

/* title + copy */
.flexible_room_element_component_inner_01 .roomData .textual .roomTitle h2
{
	font-size:29px;
	line-height:1.16;
	margin:0;
}
.flexible_room_element_component_inner_01 .roomDescription
{
	font-size:14px;
	line-height:1.85;
}
.flexible_room_element_component_inner_01 .roomDescription p { opacity:.85; }

/* specs row — the homepage room-list meta treatment, between gold hairlines */
.flexible_room_element_component_inner_01 .roomSimpleParams
{
	margin:30px 20px 0;
	padding:18px 0;
	border-top:1px solid var(--color-brand);
	border-bottom:1px solid rgba(151,125,78,.28);
}
.flexible_room_element_component_inner_01 .roomSimpleParams .param .label
{
	font-family:var(--font-body);
	font-size:13px;
	letter-spacing:.2em;
	text-transform:uppercase;
	margin:4px 14px;
	opacity:.75;
}

/* Reserve — the design's solid pill (btn--solid) */
.flexible_room_element_component_inner_01 .roomBook { padding:30px 0 0; }
.flexible_room_element_component_inner_01 .roomBook a
{
	display:inline-block;
	font-family:var(--font-body);
	font-size:14px;
	letter-spacing:.16em;
	text-transform:uppercase;
	line-height:1;
	padding:15px 28px;
	border:1px solid var(--color-dark);
	border-radius:999px;
	background:var(--color-dark);
	color:var(--color-light);
	text-decoration:none;
	transition:background-color .18s ease, border-color .18s ease;
}
.flexible_room_element_component_inner_01 .roomBook a:hover
{
	background:var(--color-text);
	border-color:var(--color-text);
}

/* amenities panel — cream-2 box, gold hairlines, a drawn +/- toggle */
.roomAmenityGridElement .gridInner::before
{
	background-color:var(--color-light-2);
	opacity:1;
}
.roomAmenityGridElement .gridHeader h2
{
	font-size:19px;
	line-height:1.3;
}
.roomAmenityGridElement .gridController::before,
.roomAmenityGridElement .gridController::after
{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:16px;
	height:1px;
	margin-left:-8px;
	background:var(--color-brand);
	transition:transform .3s ease;
}
.roomAmenityGridElement .gridController::after { transform:rotate(90deg); }
.roomAmenityGridElement.open .gridController::after { transform:rotate(0deg); }
.roomAmenityGridElement .amenityItem
{
	border-bottom:1px solid rgba(151,125,78,.28);
	font-size:14px;
}

/* gallery slider — square frames, a drawn + on hover */
.flexible_room_element_component_inner_01 .roomImageSlider .zoomIcon
{
	position:absolute;
	right:14px;
	bottom:14px;
	z-index:2;
	width:36px;
	height:36px;
	border-radius:50%;
	background:rgba(40,39,36,.55);
	opacity:0;
	transition:opacity .2s ease;
}
.flexible_room_element_component_inner_01 .roomImageSlider .zoomIcon::before,
.flexible_room_element_component_inner_01 .roomImageSlider .zoomIcon::after
{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:14px;
	height:1px;
	margin-left:-7px;
	background:var(--color-light);
}
.flexible_room_element_component_inner_01 .roomImageSlider .zoomIcon::after { transform:rotate(90deg); }
.flexible_room_element_component_inner_01 .roomImageSlider a:hover .zoomIcon { opacity:1; }

/* --- room display grid --- */
.flexible_room_display_grid_component_01 { padding:56px 0; }
.flexible_room_display_grid_component_inner_01 .roomGridHead h2
{
	font-size:29px;
	line-height:1.16;
}
.flexible_room_display_grid_component_inner_01 .roomGridIntro
{
	font-size:14px;
	line-height:1.85;
	opacity:.85;
}
.flexible_room_display_grid_component_inner_01 .roomCardData h3
{
	font-size:19px;
	line-height:1.3;
	transition:color .18s ease;
}
.flexible_room_display_grid_component_inner_01 .roomCardSpecs
{
	font-family:var(--font-body);
	font-size:13px;
	letter-spacing:.2em;
	text-transform:uppercase;
	opacity:.7;
}
.flexible_room_display_grid_component_inner_01 .roomCardExcerpt
{
	font-size:14px;
	line-height:1.85;
	opacity:.85;
}
.flexible_room_display_grid_component_inner_01 .roomCardPrice
{
	font-family:var(--font-heading);
	font-size:19px;
}
/* "View Room" — the homepage outline pill (light grounds), filling obsidian when the
   card is hovered, since the whole card is the link. The optional book link is the solid pill. */
.flexible_room_display_grid_component_inner_01 .roomCardMore,
.flexible_room_display_grid_component_inner_01 .roomCardBook
{
	display:inline-block;
	font-family:var(--font-body);
	font-size:14px;
	letter-spacing:.16em;
	text-transform:uppercase;
	line-height:1;
	padding:15px 24px;
	border:1px solid var(--color-dark);
	border-radius:999px;
	background:transparent;
	color:var(--color-dark);
	text-decoration:none;
	transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.flexible_room_display_grid_component_inner_01 .roomCardInner:hover .roomCardMore
{
	background:var(--color-dark);
	color:var(--color-light);
}
.flexible_room_display_grid_component_inner_01 .roomCardBook
{
	background:var(--color-dark);
	color:var(--color-light);
}
.flexible_room_display_grid_component_inner_01 .roomCardBook:hover
{
	background:var(--color-text);
	border-color:var(--color-text);
}
.flexible_room_display_grid_component_inner_01 .roomCardInner:hover h3
{
	color:var(--color-brand);
}
.flexible_room_display_grid_component_inner_01 .roomGridLink .linkStyle
{
	background:transparent;
	border-color:var(--color-dark);
	color:var(--color-dark);
}
.flexible_room_display_grid_component_inner_01 .roomGridLink .linkStyle:hover
{
	background:var(--color-dark);
	color:var(--color-light);
}


/* --- room page rhythm: intro (cream) → amenities (cream-2) → gallery (cream)
       → other rooms (cream-2). The homepage puts gallery_grid on cream-2, so on a
       room page it is pulled back to cream to keep the alternation. --- */
.flexible_room_intro_component_01 { background:var(--color-light); color:var(--color-text); }
.flexible_amenities_grid_component_01 { background:var(--color-light-2); color:var(--color-text); }
.page-template-template-room .flexible_gallery_grid_component_01 { background:var(--color-light); }

/* --- room intro: square image, homepage heading + body scale --- */
.flexible_room_intro_component_inner_01 .roomIntroContent h2
{
	font-size:29px;
	line-height:1.16;
}
.flexible_room_intro_component_inner_01 .roomIntroText
{
	font-size:14px;
	line-height:1.85;
}
.flexible_room_intro_component_inner_01 .roomIntroText p { opacity:.85; }
/* stats — the homepage room-list meta treatment, between gold hairlines */
.flexible_room_intro_component_inner_01 .roomIntroStats
{
	border-top:1px solid var(--color-brand);
	border-bottom:1px solid rgba(151,125,78,.28);
}
.flexible_room_intro_component_inner_01 .roomIntroStats li
{
	font-family:var(--font-body);
	font-size:13px;
	letter-spacing:.2em;
	text-transform:uppercase;
	opacity:.75;
}

/* --- amenities grid: gold hairlines, gold detail, icons tinted to the label --- */
.flexible_amenities_grid_component_inner_01 .amenitiesGridHead h2
{
	font-size:29px;
	line-height:1.16;
}
.flexible_amenities_grid_component_inner_01 .amenitiesGridIntro
{
	font-size:14px;
	line-height:1.85;
	opacity:.85;
}
.flexible_amenities_grid_component_inner_01 .amenityEntry
{
	border-bottom-color:rgba(151,125,78,.28);
	font-size:14px;
	line-height:1.5;
}
.flexible_amenities_grid_component_inner_01 .amenityMeta
{
	color:var(--color-brand);
	font-size:13px;
	letter-spacing:.08em;
}
.flexible_amenities_grid_component_inner_01 .amenityIcon img { opacity:.8; }

.flexible_room_intro_component_01 { padding:56px 0; }
/* amenities sit tighter than a full section — they read as part of the room, not a new chapter */
.flexible_amenities_grid_component_01 { padding:40px 0; }
.flexible_amenities_grid_component_inner_01 .amenitiesGridHead { margin-bottom:28px; }


/* gallery tile hover — ::before fades an obsidian wash in to 15%, ::after draws a 50×50 "+" in 1px white.
   The "+N" tile keeps its own ::after scrim and count, so it gets the wash but no plus. */
.flexible_gallery_grid_component_inner_01 .galleryGrid .galleryItem { position:relative; }
.flexible_gallery_grid_component_inner_01 .galleryGrid .galleryItem::before
{
	content:"";
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	z-index:1;
	background-color:var(--color-dark);
	opacity:0;
	transition:opacity .3s ease;
	pointer-events:none;
}
.flexible_gallery_grid_component_inner_01 .galleryGrid .galleryItem:not(.hasMore)::after
{
	content:"";
	position:absolute;
	top:50%; left:50%;
	z-index:2;
	width:50px;
	height:50px;
	margin:-25px 0 0 -25px;
	background:
		linear-gradient(var(--color-white),var(--color-white)) center / 100% 1px no-repeat,
		linear-gradient(var(--color-white),var(--color-white)) center / 1px 100% no-repeat;
	opacity:0;
	transition:opacity .3s ease;
	pointer-events:none;
}
.flexible_gallery_grid_component_inner_01 .galleryGrid .galleryItem:hover::before { opacity:.15; }
.flexible_gallery_grid_component_inner_01 .galleryGrid .galleryItem:not(.hasMore):hover::after { opacity:1; }
.flexible_gallery_grid_component_inner_01 .galleryGrid .galleryItem:focus-visible::before { opacity:.15; }
.flexible_gallery_grid_component_inner_01 .galleryGrid .galleryItem:not(.hasMore):focus-visible::after { opacity:1; }

/* gallery "+N" tile — obsidian at 30% (token + opacity, no literal), white count in the display face */
.flexible_gallery_grid_component_inner_01 .galleryGrid .galleryItem.hasMore::after
{
	background-color:var(--color-dark);
	opacity:.3;
}
.flexible_gallery_grid_component_inner_01 .galleryGrid .galleryMore
{
	font-family:var(--font-heading);
	font-weight:400;
	font-size:36px;
	line-height:1;
	color:var(--color-white);
}

/* ==================================================================
   404 — obsidian band filling the screen, message centred. The header is
   fixed and transparent with cream text, so the dark ground lets it read
   the same as it does over the hero.
   ================================================================== */
.errorPage
{
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
	min-height:100svh;
	padding:120px 24px 80px;
	background:var(--color-dark);
	color:var(--color-light);
	text-align:center;
}
.errorPage .errorPageInner { max-width:560px; }
.errorPage h1
{
	margin:0;
	font-family:var(--font-heading);
	font-weight:300;
	font-size:48px;
	line-height:1.1;
	color:inherit;
}
/* gold hairline between title and message, as under the design's eyebrows */
.errorPage h1::after
{
	content:"";
	display:block;
	width:48px;
	height:1px;
	margin:28px auto;
	background:var(--color-brand-secondary);
}
.errorPage p
{
	margin:0;
	font-family:var(--font-body);
	font-weight:300;
	font-size:16px;
	line-height:1.8;
	color:rgba(246,241,234,.75);
}
/* footer is obsidian too — a hairline keeps the two from merging */
.error404 .footerWrap { border-top:1px solid rgba(246,241,234,.12); }

@media(min-width:768px)
{
	.errorPage h1 { font-size:66px; }
	.errorPage p { font-size:17px; }

	/* menu overlay: two columns, hairline between, closer level with the burger */
	.header_global_component_02 .navOverlay { padding:100px 40px 60px; align-items:center; }
	.header_global_component_02 .navOverlay .navCloser { top:28px; right:40px; }
	.header_global_component_02 .navOverlay .menuLeft { flex:0 0 58%; padding-bottom:0; padding-right:60px; }
	.header_global_component_02 .navOverlay .menuRight { flex:0 0 42%; padding-left:60px; border-left:1px solid rgba(246,241,234,.18); }
	.header_global_component_02 .navOverlay .nav li a { font-size:46px; }

	/* datepicker popup: top-right corner on the date field's right edge, so it can't run off-screen */
	.flexible_form_component_inner_02 .contactFormCard .gform_wrapper.gform-theme--framework .ginput_container_date .gform-datepicker-calendar { left:auto; right:0; }

	.flexible_gallery_grid_component_inner_01 .galleryGrid .galleryMore { font-size:42px; }

	/* --- room intro + amenities grid: 768 step --- */
	.flexible_room_intro_component_inner_01 .roomIntroContent h2,
	.flexible_amenities_grid_component_inner_01 .amenitiesGridHead h2 { font-size:38px; }
	.flexible_room_intro_component_inner_01 .roomIntroText,
	.flexible_amenities_grid_component_inner_01 .amenitiesGridIntro,
	.flexible_amenities_grid_component_inner_01 .amenityEntry { font-size:16.5px; }
	.flexible_room_intro_component_01 { padding:72px 0; }
	.flexible_amenities_grid_component_01 { padding:48px 0; }

	/* --- interior pages: 768 step --- */
	.flexible_room_element_component_inner_01 .roomData .textual .roomTitle h2,
	.flexible_room_display_grid_component_inner_01 .roomGridHead h2 { font-size:38px; }
	.flexible_room_element_component_inner_01 .roomDescription,
	.flexible_room_display_grid_component_inner_01 .roomGridIntro,
	.flexible_room_display_grid_component_inner_01 .roomCardExcerpt,
	.roomAmenityGridElement .amenityItem { font-size:16.5px; }
	.flexible_room_display_grid_component_inner_01 .roomCardData h3,
	.roomAmenityGridElement .gridHeader h2 { font-size:21px; }
	.flexible_room_display_grid_component_01 { padding:72px 0; }

	/* The base reveals the telephone here with display:block, which would push
	   Reserve onto its own line — it sits beside it, so inline-block. */
	.header_global_component_02 .headerTel
	{
		display:inline-block;
		vertical-align:middle;
		margin-right:15px;
	}

	/* --- type scale step: 768 --- */
	body { font-size:16.5px; }
	.hero_global_component_02 .heroMessage h1,
	.hero_global_component_01 .heroMessage h1 { font-size:54px; }
	h2,
	.flexible_amenities_list_component_01 h2,
	.flexible_feature_cards_grid_component_01 h2,
	.flexible_gallery_grid_component_inner_01 h2,
	.flexible_feature_highlight_component_01 h2 { font-size:38px; }
	.flexible_full_image_feature_component_inner_02 .fullImageTextual h2,
	.flexible_full_image_feature_component_inner_01 .fullImageTextual h2 { font-size:58px; }
	h3,
	.flexible_feature_cards_grid_component_01 .cardData h3 { font-size:21px; }
	.flexible_feature_highlight_component_01 .featureContent,
	.flexible_amenities_list_component_01 .amenitiesNote,
	.flexible_feature_cards_grid_component_01 .cardsGridIntro,
	.flexible_gallery_grid_component_inner_01 .galleryIntro,
	.flexible_full_image_feature_component_inner_02 .fullImageTextualDesc { font-size:16.5px; }
	.flexible_amenities_list_component_01.fullBleed .amenityLabel { font-size:21px; }
	.hero_global_component_02 .heroMessage h1 span:last-child:not(:first-child),
	.hero_global_component_01 .heroMessage h1 span:last-child:not(:first-child) { font-size:19px; }

	.flexible_feature_highlight_component_01,
	.flexible_amenities_list_component_01,
	.flexible_feature_cards_grid_component_01,
	.flexible_gallery_grid_component_01 { padding:72px 0; }

}

@media(min-width:992px)
{

	.flexible_room_intro_component_01 { padding:104px 0; }
	.flexible_amenities_grid_component_01 { padding:64px 0; }
	.flexible_amenities_grid_component_inner_01 .amenitiesGridHead { margin-bottom:36px; }

	.flexible_room_display_grid_component_01 { padding:104px 0; }

	/* --- section rhythm steps up at 992 (design --section-pad 104) --- */
	.flexible_feature_highlight_component_01,
	.flexible_amenities_list_component_01,
	.flexible_feature_cards_grid_component_01,
	.flexible_gallery_grid_component_01 { padding:104px 0; }

}

@media(min-width:1200px)
{

	.header_global_component_02 .navOverlay .nav li a { font-size:48px; }


	/* --- type scale step: 1200 (the design's full desktop scale) --- */
	.hero_global_component_02 .heroMessage h1,
	.hero_global_component_01 .heroMessage h1 { font-size:66px; }
	.flexible_room_element_component_inner_01 .roomData .textual .roomTitle h2,
	.flexible_room_display_grid_component_inner_01 .roomGridHead h2 { font-size:42px; }
	.flexible_room_intro_component_inner_01 .roomIntroContent h2,
	.flexible_amenities_grid_component_inner_01 .amenitiesGridHead h2 { font-size:42px; }
	h2,
	.flexible_amenities_list_component_01 h2,
	.flexible_feature_cards_grid_component_01 h2,
	.flexible_gallery_grid_component_inner_01 h2,
	.flexible_feature_highlight_component_01 h2 { font-size:42px; }
	.flexible_full_image_feature_component_inner_02 .fullImageTextual h2,
	.flexible_full_image_feature_component_inner_01 .fullImageTextual h2 { font-size:72px; }

}

@media(min-width:1400px)
{

}