/* ==========================================================================
   Gamuda Central Park — design system
   Ivory ground, champagne hairlines, bronze accents. Luxury is carried by
   whitespace, type and restraint, not by ornament.
   ========================================================================== */

/* ==========================================================================
   Typefaces, self-hosted.

   Served from this origin rather than fonts.googleapis.com. That removes two
   third-party connections (DNS, TLS, then a CSS round trip before the font
   files are even discovered) from the critical path — on a Vietnamese mobile
   connection that is most of a second before any text can paint.

   unicode-range splits Latin from Vietnamese so an English page never
   downloads the Vietnamese glyphs, and vice versa.
   ========================================================================== */

/* --- Cormorant Garamond: display ---------------------------------------- */

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-vietnamese-300-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-vietnamese-400-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-vietnamese-300-italic.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Inter: body -------------------------------------------------------- */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/inter-vietnamese-300-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/inter-latin-300-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-vietnamese-400-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-vietnamese-500-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Size-matched fallbacks --------------------------------------------- */
/*
   font-display: swap paints text immediately in a system font, then swaps.
   That swap moves the text and costs CLS unless the fallback occupies the same
   space. These two faces scale a system font so its x-height matches the web
   font almost exactly — the values below were measured from the actual font
   files, not estimated:

     Cormorant Garamond  x-height 0.3860 em   Times New Roman 0.448 → 86.16%
     Inter               x-height 0.5459 em   Arial           0.519 → 105.18%
*/
@font-face {
	font-family: "Cormorant Fallback";
	src: local("Times New Roman"), local("Times"), local("Liberation Serif");
	size-adjust: 86.16%;
	ascent-override: 107.24%;
	descent-override: 33.31%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 105.18%;
	ascent-override: 92.11%;
	descent-override: 22.93%;
	line-gap-override: 0%;
}



:root {
	/* Colour */
	--gcp-ivory: #f5f2ec;
	--gcp-warm-white: #fbfaf7;
	--gcp-beige: #e8e3d9;
	--gcp-champagne: #cac6ba;
	--gcp-charcoal: #16352b; /* Gamuda forest green ink */
	--gcp-charcoal-soft: #214637;
	--gcp-grey: #55605d;
	--gcp-grey-light: #7e8784;
	--gcp-green: #3d5a3a; /* park green */
	--gcp-bronze: #7f532f; /* façade copper, text-safe on ivory (5.9:1) */
	--gcp-bronze-light: #c4955f; /* copper, decorative / on green (4.9:1) */

	/* Semantic */
	--gcp-bg: var(--gcp-ivory);
	--gcp-surface: var(--gcp-warm-white);
	--gcp-ink: var(--gcp-charcoal);
	--gcp-ink-soft: var(--gcp-grey);
	--gcp-line: rgba(22, 53, 43, 0.12);
	--gcp-line-soft: rgba(22, 53, 43, 0.07);
	--gcp-accent: var(--gcp-bronze);

	/* Type */
	--gcp-display: "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", Georgia, serif;
	--gcp-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--gcp-step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
	--gcp-step-0: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
	--gcp-step-1: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
	--gcp-step-2: clamp(1.45rem, 1.25rem + 0.95vw, 2rem);
	--gcp-step-3: clamp(1.9rem, 1.5rem + 1.9vw, 3rem);
	--gcp-step-4: clamp(2.4rem, 1.7rem + 3.2vw, 4.4rem);
	--gcp-step-5: clamp(3rem, 1.8rem + 5.4vw, 6.5rem);

	/* Space */
	--gcp-gutter: clamp(1.25rem, 5vw, 3.5rem);
	--gcp-section: clamp(4.5rem, 9vw, 9.5rem);
	--gcp-max: 1560px;
	--gcp-measure: 68ch;

	/* Motion */
	--gcp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--gcp-slow: 900ms;
	--gcp-fast: 260ms;

	--gcp-header-h: 72px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--gcp-header-h) + 16px);
}

body {
	margin: 0;
	background: var(--gcp-bg);
	color: var(--gcp-ink);
	font-family: var(--gcp-body);
	font-size: var(--gcp-step-0);
	font-weight: 300;
	line-height: 1.68;
	letter-spacing: 0.005em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
iframe { border: 0; }

a { color: inherit; text-decoration: none; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
	font-family: var(--gcp-display);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.012em;
	margin: 0 0 0.5em;
	color: var(--gcp-ink);
}

h1 { font-size: var(--gcp-step-4); }
h2 { font-size: var(--gcp-step-3); }
h3 { font-size: var(--gcp-step-2); }
h4 { font-size: var(--gcp-step-1); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
li { margin-bottom: 0.35em; }

hr { border: 0; border-top: 1px solid var(--gcp-line); margin: var(--gcp-section) 0; }

blockquote {
	margin: 2.5rem 0;
	padding-left: 1.75rem;
	border-left: 1px solid var(--gcp-champagne);
	font-family: var(--gcp-display);
	font-size: var(--gcp-step-2);
	font-style: italic;
	line-height: 1.35;
	color: var(--gcp-charcoal-soft);
}

::selection { background: var(--gcp-champagne); color: var(--gcp-charcoal); }

:focus-visible {
	outline: 2px solid var(--gcp-bronze);
	outline-offset: 3px;
	border-radius: 1px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.gcp-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--gcp-charcoal); color: var(--gcp-ivory);
	padding: 12px 20px; font-size: 0.85rem;
}
.gcp-skip:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.gcp-wrap {
	width: 100%;
	max-width: var(--gcp-max);
	margin-inline: auto;
	padding-inline: var(--gcp-gutter);
}

.gcp-wrap--narrow { max-width: 900px; }
.gcp-wrap--text { max-width: 760px; }

/* The article header gets more room than the body copy. A long headline needs
   width to read as a headline rather than a stack of fragments, while the
   paragraphs below stay at a comfortable reading measure. */
.gcp-wrap--head { max-width: 940px; }

.gcp-section { padding-block: var(--gcp-section); position: relative; }
.gcp-section--tight { padding-block: calc(var(--gcp-section) * 0.6); }
.gcp-section--dark { background: var(--gcp-charcoal); color: var(--gcp-ivory); }
.gcp-section--dark h1,
.gcp-section--dark h2,
.gcp-section--dark h3 { color: var(--gcp-ivory); }
.gcp-section--dark { --gcp-line: rgba(245, 242, 236, 0.18); --gcp-ink-soft: rgba(245, 242, 236, 0.66); }
.gcp-section--surface { background: var(--gcp-surface); }
.gcp-section--beige { background: var(--gcp-beige); }

.gcp-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.gcp-grid--2 { grid-template-columns: 1fr; }
.gcp-grid--3 { grid-template-columns: 1fr; }
.gcp-grid--4 { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Section head — the signature hairline + numeral
   -------------------------------------------------------------------------- */

.gcp-rule {
	display: block;
	height: 1px;
	width: 100%;
	background: var(--gcp-line);
	position: relative;
	margin-bottom: 1.75rem;
}
.gcp-rule::before {
	content: "";
	position: absolute;
	left: 0; top: -2px;
	width: 5px; height: 5px;
	background: var(--gcp-bronze);
}

.gcp-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 62ch; }
.gcp-head--center { margin-inline: auto; text-align: center; }
.gcp-head--center .gcp-rule::before { left: 50%; transform: translateX(-50%); }

.gcp-eyebrow {
	font-size: var(--gcp-step--1);
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-weight: 400;
	color: var(--gcp-ink-soft);
	margin-bottom: 1rem;
}
.gcp-eyebrow__num {
	font-family: var(--gcp-display);
	font-style: italic;
	font-size: 1.15em;
	letter-spacing: 0;
	color: var(--gcp-bronze);
	margin-right: 0.9em;
}

.gcp-head__title {
	margin-bottom: 0.4em;
	/* Distribute the lines evenly instead of leaving one orphaned word on the
	   last line. Ignored by browsers that do not support it, which simply get
	   the ordinary greedy wrap. */
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* Long headings step down a size, very long ones step down twice. Measured
   against the 940px header: a 164-character Vietnamese title runs to seven
   lines at the display size, five at the next step and three at the one
   below — three is a headline, seven is a column. */
.gcp-head__title.is-long { font-size: var(--gcp-step-3); }
.gcp-head__title.is-xlong {
	font-size: var(--gcp-step-2);
	line-height: 1.2;
	letter-spacing: -0.005em;
	text-wrap: pretty;
}

/* An article headline is set a little tighter than a section heading: it is
   read once, at the top, rather than scanned. */
/*
   A short headline is held to a narrow measure so it reads as a statement. A
   long one is given the whole column: at this size that is roughly 65
   characters a line, so a 164-character press-release title lands in three
   lines instead of seven. Capping it at 40ch would have wasted 300px of the
   header and stacked it back up again.
*/
.gcp-head--article { max-width: none; }
.gcp-head--article .gcp-head__title { max-width: 22ch; }
.gcp-head--article .gcp-head__title.is-long { max-width: 34ch; }
.gcp-head--article .gcp-head__title.is-xlong { max-width: none; }
.gcp-head--article .gcp-head__lede { max-width: 62ch; }
.gcp-head__lede {
	font-size: var(--gcp-step-1);
	color: var(--gcp-ink-soft);
	max-width: 54ch;
	line-height: 1.6;
}
.gcp-head--center .gcp-head__lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.gcp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 48px;
	padding: 0.85em 2em;
	font-family: var(--gcp-body);
	font-size: var(--gcp-step--1);
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border: 1px solid transparent;
	background: none;
	cursor: pointer;
	transition: background var(--gcp-fast) var(--gcp-ease),
		color var(--gcp-fast) var(--gcp-ease),
		border-color var(--gcp-fast) var(--gcp-ease);
}

.gcp-btn--solid { background: var(--gcp-charcoal); color: var(--gcp-ivory); border-color: var(--gcp-charcoal); }
.gcp-btn--solid:hover { background: var(--gcp-bronze); border-color: var(--gcp-bronze); }

.gcp-btn--line { border-color: currentColor; color: inherit; }
.gcp-btn--line:hover { background: var(--gcp-charcoal); color: var(--gcp-ivory); border-color: var(--gcp-charcoal); }

.gcp-btn--quiet { padding-inline: 0.5em; color: inherit; letter-spacing: 0.1em; }
.gcp-btn--quiet:hover { color: var(--gcp-bronze); }

.gcp-section--dark .gcp-btn--solid { background: var(--gcp-ivory); color: var(--gcp-charcoal); border-color: var(--gcp-ivory); }
.gcp-section--dark .gcp-btn--solid:hover { background: var(--gcp-bronze-light); border-color: var(--gcp-bronze-light); color: var(--gcp-charcoal); }

.gcp-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-top: 2rem; }

.gcp-link {
	display: inline-flex; align-items: center; gap: 0.5em;
	font-size: var(--gcp-step--1);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--gcp-line);
	transition: border-color var(--gcp-fast) var(--gcp-ease), color var(--gcp-fast) var(--gcp-ease);
}
.gcp-link:hover { color: var(--gcp-bronze); border-color: var(--gcp-bronze); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.gcp-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	height: var(--gcp-header-h);
	display: flex;
	align-items: center;
	background: var(--gcp-ivory);
	border-bottom: 1px solid var(--gcp-line-soft);
	transition: background 400ms var(--gcp-ease), border-color 400ms var(--gcp-ease), color 400ms var(--gcp-ease);
}

.has-transparent-header .gcp-header {
	background: transparent;
	border-bottom-color: transparent;
	color: var(--gcp-ivory);
}
.has-transparent-header .gcp-header.is-stuck {
	background: var(--gcp-ivory);
	border-bottom-color: var(--gcp-line-soft);
	color: var(--gcp-charcoal);
}

.gcp-header__inner {
	width: 100%;
	max-width: var(--gcp-max);
	margin-inline: auto;
	padding-inline: var(--gcp-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.gcp-brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.gcp-brand__mark {
	font-family: var(--gcp-display);
	font-size: 1.35rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
}
.gcp-brand__sub {
	display: none;
	font-size: 0.62rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: currentColor;
	opacity: 0.6;
}
.gcp-brand img { max-height: 34px; width: auto; }

.gcp-nav { display: none; }
.gcp-nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.gcp-nav__item { margin: 0; position: relative; }
.gcp-nav__link {
	font-size: 0.74rem;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	padding-block: 0.75rem;
	display: inline-block;
	position: relative;
}
.gcp-nav__link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0.35rem;
	width: 0; height: 1px;
	background: currentColor;
	transition: width var(--gcp-fast) var(--gcp-ease);
}
.gcp-nav__link:hover::after,
.is-current > .gcp-nav__link::after { width: 100%; }

.gcp-nav__sub {
	position: absolute; top: 100%; left: 0;
	min-width: 220px; padding: 0.75rem 0;
	background: var(--gcp-warm-white);
	border: 1px solid var(--gcp-line-soft);
	list-style: none; margin: 0;
	opacity: 0; visibility: hidden;
	transition: opacity var(--gcp-fast) var(--gcp-ease);
	color: var(--gcp-charcoal);
}
.gcp-nav__item:hover > .gcp-nav__sub,
.gcp-nav__item:focus-within > .gcp-nav__sub { opacity: 1; visibility: visible; }
.gcp-nav__sub .gcp-nav__link { padding: 0.5rem 1.25rem; display: block; }

.gcp-header__actions { display: flex; align-items: center; gap: 1rem; }
.gcp-header__phone { display: none; font-size: 0.78rem; letter-spacing: 0.1em; }
.gcp-header__cta { display: none; }

.gcp-burger {
	width: 44px; height: 44px;
	display: inline-flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 5px;
	background: none; border: 0; cursor: pointer; color: inherit;
	margin-right: -10px;
}
.gcp-burger span {
	display: block; width: 22px; height: 1px; background: currentColor;
	transition: transform var(--gcp-fast) var(--gcp-ease), opacity var(--gcp-fast) var(--gcp-ease);
}
.gcp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.gcp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gcp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.gcp-drawer {
	position: fixed; inset: 0; z-index: 99;
	background: var(--gcp-ivory);
	color: var(--gcp-charcoal);
	padding: calc(var(--gcp-header-h) + 2rem) var(--gcp-gutter) 2rem;
	overflow-y: auto;
	transform: translateY(-100%);
	visibility: hidden;
	transition: transform 480ms var(--gcp-ease), visibility 480ms;
}
.gcp-drawer.is-open { transform: translateY(0); visibility: visible; }
.gcp-drawer .gcp-nav__list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
.gcp-drawer .gcp-nav__item { width: 100%; border-bottom: 1px solid var(--gcp-line-soft); }
.gcp-drawer .gcp-nav__link {
	font-family: var(--gcp-display);
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	text-transform: none;
	padding: 0.85rem 0;
	width: 100%;
}
.gcp-drawer .gcp-nav__sub { position: static; opacity: 1; visibility: visible; border: 0; background: none; padding: 0 0 0.75rem 1rem; }
.gcp-drawer .gcp-nav__sub .gcp-nav__link { font-size: 1rem; padding: 0.35rem 0; }
.gcp-drawer__foot { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }

body.is-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero — the one bold moment
   -------------------------------------------------------------------------- */

.gcp-hero {
	position: relative;
	/* 100vh first for browsers without small-viewport units; 100svh overrides
	   it where supported, so mobile address bars do not clip the hero. */
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	color: var(--gcp-ivory);
	overflow: hidden;
	background: var(--gcp-charcoal);
}

.gcp-hero__media { position: absolute; inset: 0; }
.gcp-hero__media img,
.gcp-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.gcp-hero__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(22,53,43,0.5) 0%, rgba(22,53,43,0.08) 38%, rgba(22,53,43,0.72) 100%);
}

.gcp-hero__inner {
	position: relative;
	width: 100%;
	max-width: var(--gcp-max);
	margin-inline: auto;
	padding: 0 var(--gcp-gutter) clamp(3.5rem, 8vh, 7rem);
}

.gcp-hero__wordmark {
	font-family: var(--gcp-display);
	font-size: var(--gcp-step-5);
	font-weight: 300;
	line-height: 1;
	margin: 0 0 1.25rem;
	color: var(--gcp-ivory);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The horizon: a hairline set where the outlook sits, repeated as the
   section divider throughout the site. */
.gcp-hero__horizon {
	display: block;
	width: min(420px, 60%);
	height: 1px;
	background: linear-gradient(90deg, var(--gcp-bronze-light), rgba(202,198,186,0.1));
	margin-bottom: 1.75rem;
}

.gcp-hero__lede {
	font-family: var(--gcp-display);
	font-size: var(--gcp-step-2);
	line-height: 1.25;
	max-width: 20ch;
	margin-bottom: 1rem;
	color: var(--gcp-ivory);
}
.gcp-hero__place {
	font-size: var(--gcp-step--1);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	opacity: 0.78;
	margin-bottom: 2rem;
}
.gcp-hero .gcp-ctas { margin-top: 0; }
.gcp-hero .gcp-btn--line { border-color: rgba(245,242,236,0.55); color: var(--gcp-ivory); }
.gcp-hero .gcp-btn--line:hover { background: var(--gcp-ivory); color: var(--gcp-charcoal); border-color: var(--gcp-ivory); }
.gcp-hero .gcp-btn--solid { background: var(--gcp-ivory); color: var(--gcp-charcoal); border-color: var(--gcp-ivory); }
.gcp-hero .gcp-btn--solid:hover { background: var(--gcp-bronze-light); border-color: var(--gcp-bronze-light); }

.gcp-hero__scroll {
	position: absolute;
	right: var(--gcp-gutter);
	bottom: clamp(3.5rem, 8vh, 7rem);
	display: none;
	writing-mode: vertical-rl;
	font-size: 0.66rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   Chapter navigation
   -------------------------------------------------------------------------- */

.gcp-chapters { border-top: 1px solid var(--gcp-line); padding-top: 1.5rem; }
.gcp-chapters__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem 1.5rem;
	list-style: none; margin: 0; padding: 0;
	counter-reset: none;
}
.gcp-chapters__item { margin: 0; }
.gcp-chapters__item a { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.82rem; }
.gcp-chapters__item a:hover { color: var(--gcp-bronze); }
.gcp-chapters__num { font-family: var(--gcp-display); font-style: italic; color: var(--gcp-bronze); }
.gcp-chapters__label { letter-spacing: 0.08em; }

/* --------------------------------------------------------------------------
   Project facts — "The Essentials"
   -------------------------------------------------------------------------- */

.gcp-facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--gcp-line);
}
.gcp-fact {
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--gcp-line);
}
.gcp-fact__label {
	font-size: var(--gcp-step--1);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--gcp-ink-soft);
	margin-bottom: 0.5rem;
}
.gcp-fact__value {
	font-family: var(--gcp-display);
	font-size: var(--gcp-step-1);
	line-height: 1.3;
	margin: 0;
}
.gcp-fact--pending .gcp-fact__value {
	font-family: var(--gcp-body);
	font-size: var(--gcp-step--1);
	letter-spacing: 0.1em;
	color: var(--gcp-grey-light);
}

/* --------------------------------------------------------------------------
   Chapters / editorial split blocks
   -------------------------------------------------------------------------- */

.gcp-split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.gcp-split__media { position: relative; }
.gcp-split__media img { width: 100%; }
.gcp-split__body { max-width: 52ch; }
.gcp-split__caption {
	margin-top: 0.9rem;
	font-size: var(--gcp-step--1);
	color: var(--gcp-ink-soft);
	letter-spacing: 0.06em;
}

.gcp-prose { max-width: var(--gcp-measure); }
.gcp-prose p { font-size: var(--gcp-step-0); }
.gcp-prose > h2 { margin-top: 2.5em; }
.gcp-prose > h3 { margin-top: 2em; }
.gcp-prose a { border-bottom: 1px solid var(--gcp-champagne); }
.gcp-prose a:hover { border-color: var(--gcp-bronze); color: var(--gcp-bronze); }
.gcp-prose figure { margin: 2.5rem 0; }
.gcp-prose figcaption { font-size: var(--gcp-step--1); color: var(--gcp-ink-soft); margin-top: 0.6rem; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.gcp-card { display: flex; flex-direction: column; }
.gcp-card__media { overflow: hidden; margin-bottom: 1.1rem; background: var(--gcp-beige); }
.gcp-card__media img { width: 100%; transition: transform var(--gcp-slow) var(--gcp-ease); }
.gcp-card:hover .gcp-card__media img { transform: scale(1.03); }
.gcp-card__eyebrow {
	font-size: var(--gcp-step--1);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--gcp-ink-soft);
	margin-bottom: 0.5rem;
}
.gcp-card__title {
	font-size: var(--gcp-step-2);
	margin-bottom: 0.35em;
	text-wrap: balance;
	overflow-wrap: break-word;
}
.gcp-card__title.is-long { font-size: var(--gcp-step-1); }
.gcp-card__title.is-xlong { font-size: var(--gcp-step-1); line-height: 1.25; }
.gcp-card__title a:hover { color: var(--gcp-bronze); }
.gcp-card__meta { font-size: var(--gcp-step--1); color: var(--gcp-ink-soft); letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.gcp-card__text { color: var(--gcp-ink-soft); margin-bottom: 1rem; }
.gcp-card__foot { margin-top: auto; padding-top: 0.5rem; }

.gcp-badge {
	display: inline-block;
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	padding: 0.35em 0.85em;
	border: 1px solid var(--gcp-line);
	color: var(--gcp-ink-soft);
}
.gcp-badge--pending { border-style: dashed; }

/* Placeholder image block */
.gcp-img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background:
		repeating-linear-gradient(135deg, rgba(125,95,51,0.045) 0 12px, transparent 12px 24px),
		var(--gcp-beige);
	border: 1px solid var(--gcp-line-soft);
}
.gcp-img__mark {
	font-family: var(--gcp-display);
	font-size: 1.5rem;
	letter-spacing: 0.3em;
	color: rgba(22, 53, 43, 0.22);
}

/* --------------------------------------------------------------------------
   Wellness pillars
   -------------------------------------------------------------------------- */

.gcp-pillars { display: grid; gap: 0; border-top: 1px solid var(--gcp-line); }
.gcp-pillar {
	display: grid;
	gap: 0.4rem 2.5rem;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--gcp-line);
}
.gcp-pillar__name {
	font-family: var(--gcp-display);
	font-size: var(--gcp-step-2);
	margin: 0;
	color: var(--gcp-green);
}
.gcp-section--dark .gcp-pillar__name { color: var(--gcp-bronze-light); }
.gcp-pillar__text { margin: 0; color: var(--gcp-ink-soft); max-width: 58ch; }
.gcp-pillar__media { margin: 1rem 0 0; }
.gcp-pillar__media img { width: 100%; }
@media (min-width: 600px) {
	.gcp-pillar--has-image { grid-template-columns: 200px 1fr 220px; }
	.gcp-pillar--has-image .gcp-pillar__media { margin: 0; }
}
@media (min-width: 900px) {
	.gcp-pillar--has-image { grid-template-columns: 260px 1fr 280px; }
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gcp-filters {
	display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;
	list-style: none; margin: 0 0 2.5rem; padding: 0 0 1rem;
	border-bottom: 1px solid var(--gcp-line);
}
.gcp-filters li { margin: 0; }
.gcp-filters button {
	background: none; border: 0; cursor: pointer;
	font-family: var(--gcp-body);
	font-size: var(--gcp-step--1);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gcp-ink-soft);
	padding: 0.4rem 0;
	border-bottom: 1px solid transparent;
}
.gcp-filters button:hover { color: var(--gcp-ink); }
.gcp-filters button[aria-pressed="true"] { color: var(--gcp-ink); border-bottom-color: var(--gcp-bronze); }

.gcp-gallery { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.gcp-gallery__item { margin: 0; position: relative; }
.gcp-gallery__item.is-hidden { display: none; }
.gcp-gallery__btn {
	display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
	overflow: hidden;
}
.gcp-gallery__btn img { width: 100%; transition: transform var(--gcp-slow) var(--gcp-ease); }
.gcp-gallery__btn:hover img { transform: scale(1.035); }
.gcp-gallery__cap {
	margin-top: 0.6rem;
	font-size: var(--gcp-step--1);
	color: var(--gcp-ink-soft);
}

/* Lightbox */
.gcp-lightbox {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(1, 26, 30, 0.96);
	display: none;
	align-items: center; justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
}
.gcp-lightbox.is-open { display: flex; }
.gcp-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.gcp-lightbox__figure img { max-height: 80vh; max-height: 80svh; width: auto; margin-inline: auto; }
.gcp-lightbox__cap { color: rgba(245,242,236,0.75); font-size: var(--gcp-step--1); margin-top: 1rem; }
.gcp-lightbox__btn {
	position: absolute;
	background: none; border: 1px solid rgba(245,242,236,0.35);
	color: var(--gcp-ivory);
	width: 48px; height: 48px;
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.1rem;
}
.gcp-lightbox__btn:hover { border-color: var(--gcp-ivory); }
.gcp-lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.gcp-lightbox__prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.gcp-lightbox__next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.gcp-lightbox__count {
	position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%);
	color: rgba(245,242,236,0.6); font-size: 0.75rem; letter-spacing: 0.2em;
}

/* --------------------------------------------------------------------------
   Floor plan
   -------------------------------------------------------------------------- */

.gcp-floorplan { background: var(--gcp-warm-white); border: 1px solid var(--gcp-line-soft); padding: clamp(1rem, 3vw, 2rem); }
.gcp-floorplan__frame { overflow: hidden; background: var(--gcp-ivory); cursor: zoom-in; }
.gcp-floorplan__frame img { width: 100%; transition: transform 400ms var(--gcp-ease); transform-origin: center; }
.gcp-floorplan__frame.is-zoomed img { transform: scale(1.9); cursor: zoom-out; }
.gcp-floorplan__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

.gcp-spec { border-top: 1px solid var(--gcp-line); margin: 0; }
.gcp-spec__row { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--gcp-line-soft); }
.gcp-spec__key { color: var(--gcp-ink-soft); font-size: var(--gcp-step--1); letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
.gcp-spec__val { margin: 0; text-align: right; }

/* --------------------------------------------------------------------------
   Distance table
   -------------------------------------------------------------------------- */

/* Specification table --------------------------------------------------- */

.gcp-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.gcp-spectable {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
	min-width: 560px;
}
.gcp-spectable th,
.gcp-spectable td {
	padding: 1rem 1.25rem 1rem 0;
	border-bottom: 1px solid var(--gcp-line-soft);
	vertical-align: top;
}
.gcp-spectable thead th {
	font-weight: 400;
	font-size: var(--gcp-step--1);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--gcp-ink-soft);
	border-bottom-color: var(--gcp-line);
	white-space: nowrap;
}
.gcp-spectable tbody th {
	font-weight: 400;
	font-size: var(--gcp-step--1);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--gcp-ink-soft);
	width: 30%;
}
.gcp-spectable tbody td:first-of-type {
	font-family: var(--gcp-display);
	font-size: var(--gcp-step-1);
	line-height: 1.35;
}
.gcp-spectable td:last-child {
	font-size: var(--gcp-step--1);
	color: var(--gcp-ink-soft);
	white-space: nowrap;
}
.gcp-spectable tr.is-pending td:first-of-type {
	font-family: var(--gcp-body);
	font-size: var(--gcp-step--1);
	letter-spacing: 0.1em;
	color: var(--gcp-grey-light);
}

.gcp-towerblock,
.gcp-zoneblock { margin-bottom: clamp(3rem, 6vw, 5rem); }


/* Alignments inside editor content ---------------------------------------
   The theme declares align-wide support, so the editor offers "Wide" and
   "Full" — but nothing implemented them, which meant choosing either did
   precisely nothing. A 2,700px infographic squeezed into a 68-character
   measure is unreadable, and it is not obvious to the person who inserted it
   that the width control they used was inert.
   ------------------------------------------------------------------------ */

.gcp-prose img,
.gcp-archintro img {
	height: auto;
	max-width: 100%;
}

.gcp-prose figure,
.gcp-archintro figure { margin: 2rem 0; }

.gcp-prose figcaption,
.gcp-archintro figcaption {
	margin-top: 0.6rem;
	font-size: var(--gcp-step--1);
	color: var(--gcp-ink-soft);
	text-align: center;
}

.gcp-prose .aligncenter,
.gcp-archintro .aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* Wide and full break out of the reading measure. The negative margins are
   capped by the viewport so nothing can cause a horizontal scrollbar. */
.gcp-prose .alignwide,
.gcp-archintro .alignwide {
	max-width: min(1280px, 92vw);
	width: min(1280px, 92vw);
	margin-left: 50%;
	transform: translateX(-50%);
}

.gcp-prose .alignfull,
.gcp-archintro .alignfull {
	max-width: 100vw;
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.gcp-prose .alignleft { float: left; margin: 0.4rem 1.75rem 1.25rem 0; max-width: 45%; }
.gcp-prose .alignright { float: right; margin: 0.4rem 0 1.25rem 1.75rem; max-width: 45%; }

@media (max-width: 700px) {
	.gcp-prose .alignleft,
	.gcp-prose .alignright { float: none; margin: 1.5rem 0; max-width: 100%; }
}

/* A dense diagram is worth opening at full size. The cursor says so. */
.gcp-prose img.gcp-zoomable,
.gcp-archintro img.gcp-zoomable { cursor: zoom-in; }

.gcp-archintro {
	/* The element carries both gcp-prose and gcp-archintro, and gcp-prose caps
	   the width at the reading measure. Leaving that in place made the
	   container a narrow, left-aligned column — so an image centred inside it
	   sat well left of the page centre. The container spans the full wrapper;
	   the text inside it keeps the measure. */
	max-width: none;
	margin: -1rem 0 3rem;
}

/* Text keeps a readable measure even though its container no longer does.
   A paragraph running the full 1440px would be unreadable — the eye loses
   the start of the next line. */
.gcp-archintro > p,
.gcp-archintro > ul,
.gcp-archintro > ol,
.gcp-archintro > h2,
.gcp-archintro > h3,
.gcp-archintro > blockquote {
	max-width: var(--gcp-measure);
}

/* Images in a listing introduction are shown large and centred by default.
   ------------------------------------------------------------------------
   The field uses the classic editor, which has no wide or full-width control
   at all — so telling an editor to "set the alignment" was advice they could
   not act on. The image simply breaks out of the reading column on its own.

   width:auto with a max-width ceiling matters: a 2,700px diagram fills the
   space, while a 600px logo stays 600px rather than being stretched to fit
   and going soft. Nothing is ever scaled beyond its own resolution.

   The breakout is measured from the viewport, not the wrapper, so the image
   can exceed the content column that contains it. gcp-mediablock is added
   server-side, so this does not depend on :has() support. */

.gcp-archintro .gcp-mediablock {
	max-width: none;
	width: min(1800px, 94vw);
	margin-left: 50%;
	margin-right: 0;
	transform: translateX(-50%);
	text-align: center;
}

.gcp-archintro .gcp-mediablock img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.gcp-archintro figcaption {
	margin-top: 0.75rem;
	text-align: center;
	font-size: var(--gcp-step--1);
	color: var(--gcp-ink-soft);
}

.gcp-editnote {
	margin: -0.5rem 0 2.5rem;
	padding: 0.9rem 1.1rem;
	background: var(--gcp-beige);
	border-left: 2px solid var(--gcp-bronze);
	font-size: var(--gcp-step--1);
	color: var(--gcp-ink-soft);
	max-width: 78ch;
}
.gcp-editnote a { border-bottom: 1px solid var(--gcp-champagne); }
.gcp-editnote a:hover { color: var(--gcp-bronze); border-color: var(--gcp-bronze); }

.gcp-schemeblock { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.gcp-schemeblock__head { margin-bottom: 1.25rem; }
.gcp-schemeblock__name {
	font-size: var(--gcp-step-1);
	margin: 0 0 0.4rem;
}
.gcp-schemeblock__note {
	margin: 0;
	font-size: var(--gcp-step--1);
	color: var(--gcp-ink-soft);
	max-width: 68ch;
}

.gcp-towerblock__head,
.gcp-zoneblock__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.25rem;
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid var(--gcp-line);
}
.gcp-towerblock__name,
.gcp-zoneblock__name {
	font-size: var(--gcp-step-2);
	margin: 0;
}
.gcp-towerblock__count,
.gcp-zoneblock__level {
	margin: 0;
	font-size: var(--gcp-step--1);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--gcp-ink-soft);
}
.gcp-towerblock__note {
	flex-basis: 100%;
	margin: 0.35rem 0 0;
	font-size: var(--gcp-step--1);
	color: var(--gcp-ink-soft);
	max-width: 62ch;
}

.gcp-factmeta {
	font-size: var(--gcp-step--1);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gcp-ink-soft);
	margin-top: 1.5rem;
}
.gcp-factgroup { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.gcp-factgroup__name {
	font-size: var(--gcp-step-1);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-family: var(--gcp-body);
	font-weight: 400;
	color: var(--gcp-ink-soft);
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--gcp-line);
}

.gcp-updated {
	margin-top: 1.5rem;
	font-size: var(--gcp-step--1);
	color: var(--gcp-ink-soft);
	font-style: italic;
}

/* FAQ -------------------------------------------------------------------- */

.gcp-faq { border-top: 1px solid var(--gcp-line); }
.gcp-faq__item { border-bottom: 1px solid var(--gcp-line); }
.gcp-faq__q {
	list-style: none;
	cursor: pointer;
	padding: 1.4rem 2.5rem 1.4rem 0;
	position: relative;
}
.gcp-faq__q::-webkit-details-marker { display: none; }
.gcp-faq__q h3 {
	margin: 0;
	font-size: var(--gcp-step-1);
	line-height: 1.35;
	text-wrap: balance;
}
.gcp-faq__q::after {
	content: "+";
	position: absolute;
	right: 0; top: 1.3rem;
	font-family: var(--gcp-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--gcp-bronze);
	transition: transform var(--gcp-fast) var(--gcp-ease);
}
.gcp-faq__item[open] .gcp-faq__q::after { content: "–"; }
.gcp-faq__q:hover h3 { color: var(--gcp-bronze); }
.gcp-faq__a { padding: 0 2.5rem 1.6rem 0; color: var(--gcp-ink-soft); }
.gcp-faq__a p:last-child { margin-bottom: 0; }

.gcp-distances { width: 100%; border-collapse: collapse; }
.gcp-distances th,
.gcp-distances td { text-align: left; padding: 1rem 0.75rem 1rem 0; border-bottom: 1px solid var(--gcp-line-soft); }
.gcp-distances th {
	font-weight: 400; font-size: var(--gcp-step--1);
	text-transform: uppercase; letter-spacing: 0.18em; color: var(--gcp-ink-soft);
	border-bottom-color: var(--gcp-line);
}
.gcp-distances td:last-child, .gcp-distances th:last-child { text-align: right; padding-right: 0; }
.gcp-distances .is-pending { color: var(--gcp-grey-light); font-size: var(--gcp-step--1); letter-spacing: 0.08em; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.gcp-form { max-width: 640px; }
.gcp-form--compact { max-width: 460px; }
.gcp-form__title { font-size: var(--gcp-step-2); margin-bottom: 0.4em; }
.gcp-form__intro { color: var(--gcp-ink-soft); margin-bottom: 1.75rem; }
.gcp-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gcp-form__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }

.gcp-field { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.gcp-field--full { grid-column: 1 / -1; }
.gcp-field label {
	font-size: var(--gcp-step--1);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gcp-ink-soft);
}
.gcp-req { color: var(--gcp-bronze); }

.gcp-field input[type="text"],
.gcp-field input[type="tel"],
.gcp-field input[type="email"],
.gcp-field select,
.gcp-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.75rem 0;
	font-family: var(--gcp-body);
	font-size: 1rem;
	color: var(--gcp-ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--gcp-line);
	border-radius: 0;
	transition: border-color var(--gcp-fast) var(--gcp-ease);
	appearance: none;
}
.gcp-field textarea { min-height: 96px; resize: vertical; padding-top: 0.5rem; }
.gcp-field select {
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 8px center, right 3px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 22px;
}
.gcp-field input:focus,
.gcp-field select:focus,
.gcp-field textarea:focus { outline: none; border-bottom-color: var(--gcp-bronze); }
.gcp-field.has-error input,
.gcp-field.has-error select,
.gcp-field.has-error textarea { border-bottom-color: #b3261e; }
.gcp-field__error { color: #b3261e; font-size: var(--gcp-step--1); text-transform: none; letter-spacing: 0; }

.gcp-field--consent { flex-direction: row; margin-top: 1.75rem; }
.gcp-field--consent label {
	display: flex; gap: 0.75rem; align-items: flex-start;
	text-transform: none; letter-spacing: 0; font-size: 0.86rem;
	line-height: 1.55; color: var(--gcp-ink-soft); cursor: pointer;
}
.gcp-field--consent input { margin-top: 0.3rem; accent-color: var(--gcp-bronze); width: 18px; height: 18px; flex-shrink: 0; }
.gcp-field--consent a { border-bottom: 1px solid var(--gcp-champagne); }

.gcp-form__actions { margin-top: 2rem; }
.gcp-form__status { margin-top: 1rem; font-size: 0.9rem; min-height: 1.2em; }
.gcp-form__status.is-ok { color: var(--gcp-green); }
.gcp-form__status.is-error { color: #b3261e; }
.gcp-form.is-sending .gcp-btn--solid { opacity: 0.6; pointer-events: none; }

.gcp-section--dark .gcp-field input,
.gcp-section--dark .gcp-field select,
.gcp-section--dark .gcp-field textarea { color: var(--gcp-ivory); border-bottom-color: rgba(245,242,236,0.28); }
.gcp-section--dark .gcp-field input:focus,
.gcp-section--dark .gcp-field textarea:focus { border-bottom-color: var(--gcp-bronze-light); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.gcp-footer { background: var(--gcp-charcoal); color: rgba(245,242,236,0.78); padding-block: clamp(3.5rem, 7vw, 6rem) 2rem; }
.gcp-footer a:hover { color: var(--gcp-bronze-light); }
.gcp-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
.gcp-footer__brand .gcp-brand__mark { color: var(--gcp-ivory); font-size: 1.5rem; }
.gcp-footer__tag { margin-top: 1rem; max-width: 34ch; font-size: 0.9rem; }
.gcp-footer h3 {
	font-family: var(--gcp-body);
	font-size: var(--gcp-step--1);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: rgba(245,242,236,0.5);
	margin-bottom: 1.1rem;
	font-weight: 400;
}
.gcp-footer ul { list-style: none; margin: 0; padding: 0; }
.gcp-footer li { margin-bottom: 0.55rem; font-size: 0.92rem; }
.gcp-footer__bottom {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: 1.5rem;
	border-top: 1px solid rgba(245,242,236,0.14);
	display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
	font-size: 0.78rem; color: rgba(245,242,236,0.5);
}
.gcp-footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.gcp-footer__note { max-width: 70ch; font-size: 0.78rem; line-height: 1.6; color: rgba(245,242,236,0.45); margin-top: 1rem; }
.gcp-social { display: flex; gap: 1.25rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.gcp-social a { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Floating contact + mobile action bar
   -------------------------------------------------------------------------- */

.gcp-floating { display: none; }

.gcp-mobilebar {
	position: fixed; inset: auto 0 0 0; z-index: 95;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: var(--gcp-charcoal);
	border-top: 1px solid rgba(245,242,236,0.14);
	padding-bottom: env(safe-area-inset-bottom);
}
.gcp-mobilebar a {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 3px; min-height: 56px; padding: 0.5rem 0.25rem;
	color: rgba(245,242,236,0.85);
	font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.gcp-mobilebar a:last-child { background: var(--gcp-bronze); color: var(--gcp-charcoal); }
.gcp-mobilebar svg { width: 17px; height: 17px; }

body { padding-bottom: 0; }
@media (max-width: 899px) {
	body.has-mobilebar { padding-bottom: 64px; }
}

/* --------------------------------------------------------------------------
   Breadcrumbs, pagination, misc
   -------------------------------------------------------------------------- */

.gcp-breadcrumbs { font-size: var(--gcp-step--1); color: var(--gcp-ink-soft); letter-spacing: 0.06em; margin-bottom: 1.5rem; }
.gcp-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.gcp-breadcrumbs li { margin: 0; }
.gcp-breadcrumbs li + li::before { content: "—"; margin-right: 0.5rem; opacity: 0.5; }
.gcp-breadcrumbs a:hover { color: var(--gcp-bronze); }

.gcp-pagination ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 3rem 0 0; padding: 0; justify-content: center; }
.gcp-pagination li { margin: 0; }
.gcp-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding: 0 0.75rem;
	border: 1px solid var(--gcp-line); font-size: 0.85rem;
}
.gcp-pagination .current { background: var(--gcp-charcoal); color: var(--gcp-ivory); border-color: var(--gcp-charcoal); }

.gcp-postnav {
	display: grid;
	gap: 1.5rem;
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--gcp-line);
}
.gcp-postnav__item { display: block; }
.gcp-postnav__item .gcp-eyebrow { margin-bottom: 0.4rem; }
.gcp-postnav__title {
	font-family: var(--gcp-display);
	font-size: var(--gcp-step-1);
	line-height: 1.25;
}
.gcp-postnav__item:hover .gcp-postnav__title { color: var(--gcp-bronze); }
@media (min-width: 600px) {
	.gcp-postnav { grid-template-columns: 1fr 1fr; }
	.gcp-postnav__item--next { text-align: right; }
}

.gcp-note {
	font-size: var(--gcp-step--1);
	color: var(--gcp-ink-soft);
	border-left: 1px solid var(--gcp-champagne);
	padding-left: 1rem;
	line-height: 1.6;
}

.gcp-404 { min-height: 70vh; min-height: 70svh; display: flex; align-items: center; }
.gcp-404__code { font-family: var(--gcp-display); font-size: var(--gcp-step-5); line-height: 1; color: var(--gcp-champagne); margin-bottom: 1rem; }

.gcp-search-form { display: flex; gap: 0.75rem; align-items: flex-end; max-width: 480px; }
.gcp-search-form input[type="search"] {
	flex: 1; min-height: 48px; padding: 0.6rem 0; border: 0;
	border-bottom: 1px solid var(--gcp-line); background: transparent;
	font-family: var(--gcp-body); font-size: 1rem; color: inherit;
}
.gcp-search-form input[type="search"]:focus { outline: none; border-bottom-color: var(--gcp-bronze); }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity var(--gcp-slow) var(--gcp-ease), transform var(--gcp-slow) var(--gcp-ease);
	will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }

/* The hero curtain: the plate rises into view once, on load. */
.gcp-hero__media { clip-path: inset(0 0 0 0); }
.gcp-hero.is-ready .gcp-hero__wordmark { animation: gcp-letter 1400ms var(--gcp-ease) both; }
.gcp-hero.is-ready .gcp-hero__horizon { animation: gcp-horizon 1200ms var(--gcp-ease) 500ms both; }

@keyframes gcp-letter {
	from { opacity: 0; letter-spacing: 0.3em; }
	to { opacity: 1; letter-spacing: 0.06em; }
}
@keyframes gcp-horizon {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
.gcp-hero__horizon { transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal] { opacity: 1; transform: none; }
	.gcp-card:hover .gcp-card__media img,
	.gcp-gallery__btn:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   Breakpoints — each one exists because the layout needs it, not because
   a device is that wide.
   -------------------------------------------------------------------------- */

/* Two columns become possible for cards and form fields. */
@media (min-width: 600px) {
	.gcp-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.gcp-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.gcp-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.gcp-form__grid { grid-template-columns: repeat(2, 1fr); }
	.gcp-gallery { grid-template-columns: repeat(2, 1fr); }
	.gcp-facts { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; }
	.gcp-chapters__list { grid-template-columns: repeat(3, 1fr); }
	.gcp-pillar { grid-template-columns: 200px 1fr; align-items: baseline; }
}

/* Tablet and small laptop: two-column layouts; navigation stays in the drawer. */
@media (min-width: 900px) {
	:root { --gcp-header-h: 84px; }
	.gcp-mobilebar { display: none; }
	.gcp-hero__scroll { display: block; }
	.gcp-split { grid-template-columns: 1fr 1fr; }
	.gcp-split--wide-media { grid-template-columns: 1.25fr 1fr; }
	.gcp-split--reverse .gcp-split__media { order: 2; }
	.gcp-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.gcp-gallery { grid-template-columns: repeat(3, 1fr); }
	.gcp-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
	.gcp-facts { grid-template-columns: repeat(3, 1fr); }
	.gcp-chapters__list { grid-template-columns: repeat(5, 1fr); }
	.gcp-pillar { grid-template-columns: 260px 1fr; }

	/* Desktop floating channels */
	.gcp-floating {
		display: flex; flex-direction: column; gap: 0.5rem;
		position: fixed; right: 20px; bottom: 24px; z-index: 90;
	}
	.gcp-floating a {
		display: flex; align-items: center; justify-content: center;
		width: 46px; height: 46px;
		background: var(--gcp-charcoal); color: var(--gcp-ivory);
		border: 1px solid rgba(245,242,236,0.2);
		transition: background var(--gcp-fast) var(--gcp-ease);
	}
	.gcp-floating a:hover { background: var(--gcp-bronze); color: var(--gcp-charcoal); }
	.gcp-floating svg { width: 19px; height: 19px; }
}

/* Four-up card grids and a wider editorial measure. */
@media (min-width: 1200px) {
	.gcp-grid--4 { grid-template-columns: repeat(4, 1fr); }
	.gcp-gallery { grid-template-columns: repeat(3, 1fr); }
	.gcp-facts { grid-template-columns: repeat(3, 1fr); }
}

/* Very large screens: stop the measure from stretching, add air instead. */
@media (min-width: 1800px) {
	:root { --gcp-max: 1680px; --gcp-gutter: 5rem; }
	.gcp-gallery { grid-template-columns: repeat(4, 1fr); }
}

@media print {
	.gcp-header, .gcp-mobilebar, .gcp-floating, .gcp-form, .gcp-drawer { display: none !important; }
	body { background: #fff; color: #000; }
}

/* Nine menu items plus the call to action only fit on one line from 1440px.
   Below it the drawer keeps every label legible instead of wrapping words. */
.gcp-nav__link, .gcp-header__cta { white-space: nowrap; }
@media (min-width: 1440px) {
	.gcp-nav { display: block; }
	.gcp-nav__list { gap: clamp(0.9rem, 1.4vw, 1.6rem); }
	.gcp-nav__link { letter-spacing: 0.12em; }
	.gcp-burger { display: none; }
	.gcp-drawer { display: none; }
	.gcp-header__cta { display: inline-flex; }
}
@media (min-width: 1680px) {
	.gcp-brand__sub { display: block; }
	.gcp-header__phone { display: inline-flex; }
}