:root{--grn-ci-ink:var(--ink,#131313);--grn-ci-paper:var(--paper,#fbfaf6);--grn-ci-line:var(--line,#dad7cc);--grn-ci-muted:var(--mut,#6b6759);--grn-ci-blue:var(--cobalt,#005bff);--grn-ci-acid:var(--acid,#b6ff00)}
.grn-ci-page,.grn-ci-account,.grn-ci-live-booking{box-sizing:border-box;color:var(--grn-ci-ink);font-family:var(--sans,"Neue Haas Grotesk Text",Arial,sans-serif)}
.grn-ci-page *,.grn-ci-account *,.grn-ci-live-booking *{box-sizing:border-box}
.grn-ci-page{width:100vw;max-width:100vw;position:relative;left:calc(50% - 50vw);overflow-x:clip;background:var(--grn-ci-paper)}
.grn-ci-wrap{width:min(1440px,100%);margin:0 auto;padding-inline:clamp(18px,4vw,64px)}
.grn-ci-hero{min-height:66vh;background:var(--grn-ci-ink);color:#fff;display:flex;align-items:flex-end;padding:clamp(130px,18vw,240px) 0 clamp(56px,8vw,110px)}
.grn-ci-hero h1{font-family:var(--grot,"Arial Black",sans-serif);font-size:clamp(72px,15vw,220px);font-weight:900;letter-spacing:-.075em;line-height:.78;text-transform:uppercase;margin:.15em 0 .22em}
.grn-ci-kicker{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px;color:inherit}
.grn-ci-lead{font-size:clamp(19px,2vw,30px);max-width:720px;margin:0 0 28px}
.grn-ci-button,.grn-ci-link,.grn-ci-secondary{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;text-decoration:none!important}
.grn-ci-button{min-height:50px;padding:0 18px;background:var(--grn-ci-blue);border:1px solid var(--grn-ci-blue);color:#fff!important;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.grn-ci-button:hover{background:#004bd5;border-color:#004bd5}
.grn-ci-button-muted{background:transparent;color:var(--grn-ci-ink)!important;border-color:var(--grn-ci-ink)}
.grn-ci-section{padding:clamp(64px,9vw,130px) 0}
.grn-ci-section h2,.grn-ci-live-head h3{font-family:var(--grot,"Arial Black",sans-serif);font-weight:900;text-transform:uppercase;letter-spacing:-.035em}
.grn-ci-section-dark{background:var(--grn-ci-ink);color:#fff}
.grn-ci-section-dark>.grn-ci-wrap>h2{font-size:clamp(42px,7vw,100px);line-height:.9;margin:.2em 0 .65em}
.grn-ci-destinations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--grn-ci-ink);border-left:1px solid var(--grn-ci-ink)}
.grn-ci-destinations>a{min-height:300px;padding:clamp(22px,3vw,42px);border-right:1px solid var(--grn-ci-ink);border-bottom:1px solid var(--grn-ci-ink);color:inherit;text-decoration:none;display:flex;flex-direction:column}
.grn-ci-destinations>a:hover{background:var(--grn-ci-blue);color:#fff}
.grn-ci-destinations span{font:700 10px/1 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.12em}
.grn-ci-destinations h2{font-size:clamp(30px,4vw,60px);line-height:.92;margin:auto 0 16px}
.grn-ci-destinations p{max-width:460px;margin:0}
.grn-ci-access-grid{border-top:1px solid currentColor}
.grn-ci-access-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:26px 0;border-bottom:1px solid currentColor}
.grn-ci-access-row h3{font-size:clamp(24px,3vw,42px);margin:0 0 6px;text-transform:uppercase}
.grn-ci-access-row p{margin:0;max-width:650px}
.grn-ci-link{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:inherit!important;white-space:nowrap}
.grn-ci-refresher{margin:24px 0 0;text-align:right}.grn-ci-refresher a,.grn-ci-secondary{color:inherit!important;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.grn-ci-steps{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--grn-ci-ink);margin:30px 0 60px}
.grn-ci-steps p{padding:26px;margin:0;border-right:1px solid var(--grn-ci-ink)}.grn-ci-steps p:last-child{border-right:0}
.grn-ci-course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grn-ci-course{border:1px solid var(--grn-ci-ink);padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;align-items:flex-start}
.grn-ci-course:last-child{grid-column:1/-1;background:#eeece3}
.grn-ci-course h2{font-size:clamp(30px,4.3vw,64px);line-height:.92;margin:.1em 0 .35em}
.grn-ci-course h3{font-size:18px;text-transform:uppercase;margin:24px 0 4px}
.grn-ci-course dl,.grn-ci-equipment-card dl{width:100%;margin:24px 0;border-top:1px solid var(--grn-ci-line)}
.grn-ci-course dl>div,.grn-ci-equipment-card dl>div{display:grid;grid-template-columns:130px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--grn-ci-line)}
.grn-ci-course dt,.grn-ci-equipment-card dt{font:700 10px/1.4 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--grn-ci-muted)}
.grn-ci-course dd,.grn-ci-equipment-card dd{margin:0}
.grn-ci-warning{border-left:5px solid var(--grn-ci-blue);padding:16px 18px;background:#f0eee6;margin:22px 0}
.grn-ci-course-note,.grn-ci-policy,.grn-ci-authority{font-size:13px;color:var(--grn-ci-muted)}
.grn-ci-course .grn-ci-button{margin-top:auto}.grn-ci-course .grn-ci-secondary{margin-top:14px}
.grn-ci-policy{margin:42px 0 0;border-top:1px solid var(--grn-ci-line);padding-top:24px}
.grn-ci-policy h2{font-family:var(--grot,"Arial Black",sans-serif);font-size:clamp(30px,4vw,54px);line-height:.95;text-transform:uppercase;color:var(--grn-ci-ink);margin:0 0 22px}
.grn-ci-policy h3{font-family:var(--grot,"Arial Black",sans-serif);font-size:17px;line-height:1.05;text-transform:uppercase;color:var(--grn-ci-ink);margin:0 0 8px}
.grn-ci-policy p{line-height:1.55}.grn-ci-policy a{color:var(--grn-ci-ink);text-decoration:underline;text-underline-offset:3px}
.grn-ci-policy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--grn-ci-line);border:1px solid var(--grn-ci-line);margin:0 0 18px}
.grn-ci-policy-grid>div{background:var(--grn-ci-paper);padding:20px}
.grn-ci-live-booking{border:1px solid var(--grn-ci-ink);background:var(--grn-ci-paper);margin-top:clamp(22px,3vw,34px);padding:clamp(20px,3vw,38px)}
.grn-ci-live-head{max-width:820px;margin-bottom:28px}.grn-ci-live-head h3{font-size:clamp(30px,5vw,66px);line-height:.9;margin:0 0 16px}.grn-ci-live-head p{margin:0}
.grn-ci-gates{display:grid;gap:12px;margin-bottom:20px}
.grn-ci-gate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;border:1px solid var(--grn-ci-line);padding:18px}
.grn-ci-gate h3{margin:0 0 4px;text-transform:uppercase}.grn-ci-gate p{margin:0}
.grn-ci-equipment-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.grn-ci-equipment-card{border:1px solid var(--grn-ci-line);padding:22px;display:flex;flex-direction:column;align-items:flex-start}
.grn-ci-equipment-card h3{font-family:var(--grot,"Arial Black",sans-serif);font-size:clamp(24px,3vw,42px);line-height:.94;text-transform:uppercase;margin:0}
.grn-ci-capability{font-size:13px;color:var(--grn-ci-muted);margin:14px 0 0}
.grn-ci-equipment-card .grn-ci-button{margin-top:auto}
.grn-ci-authority{border-top:1px solid var(--grn-ci-line);padding-top:14px;margin:24px 0 0}
.grn-ci-account{margin:28px 0 42px}.grn-ci-account>h2{text-transform:uppercase;font-weight:900}.grn-ci-account .grn-ci-access-row{color:var(--grn-ci-ink)}
@media(max-width:820px){.grn-ci-destinations,.grn-ci-course-grid,.grn-ci-equipment-grid,.grn-ci-policy-grid{grid-template-columns:1fr}.grn-ci-course:last-child{grid-column:auto}.grn-ci-steps{grid-template-columns:1fr}.grn-ci-steps p{border-right:0;border-bottom:1px solid var(--grn-ci-ink)}.grn-ci-steps p:last-child{border-bottom:0}}
/* Upcoming course dates */
.grn-ci-dates{width:100%;margin:22px 0 6px}
.grn-ci-dates>.grn-ci-kicker{margin-bottom:12px}
.grn-ci-datelist{list-style:none;margin:0;padding:0;border-top:1px solid var(--grn-ci-line)}
.grn-ci-datelist>li{margin:0}
.grn-ci-date{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 12px 14px 4px;border-bottom:1px solid var(--grn-ci-line);cursor:pointer;position:relative;transition:background .12s ease,border-color .12s ease}
.grn-ci-date:hover:not(.is-soldout){background:#f0eee6}
.grn-ci-date input{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;border:1.5px solid var(--grn-ci-muted);border-radius:50%;position:relative;flex:none;cursor:pointer}
.grn-ci-date input:checked{border-color:var(--grn-ci-blue)}
.grn-ci-date input:checked::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--grn-ci-blue)}
.grn-ci-date input:focus-visible{outline:2px solid var(--grn-ci-blue);outline-offset:2px}
.grn-ci-date-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.grn-ci-date-day{font:700 10px/1.2 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--grn-ci-muted)}
.grn-ci-date-full{font-weight:700;font-size:16px;line-height:1.15}
.grn-ci-date-time{font-size:13px;color:var(--grn-ci-muted)}
.grn-ci-date-seats{font:700 10px/1.3 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.08em;text-transform:uppercase;text-align:right;white-space:nowrap;color:var(--grn-ci-ink)}
.grn-ci-date-seats.is-soldout{color:var(--grn-ci-muted)}
.grn-ci-datelist>li>.grn-ci-date:has(input:checked),.grn-ci-date.is-selected{background:#eef3ff;box-shadow:inset 3px 0 0 var(--grn-ci-blue)}
.grn-ci-date.is-soldout{cursor:not-allowed;opacity:.55}
.grn-ci-date.is-soldout .grn-ci-date-full{text-decoration:line-through}
.grn-ci-empty{font-size:14px;color:var(--grn-ci-muted);margin:6px 0 4px;padding:14px 12px;border:1px dashed var(--grn-ci-line)}
.grn-ci-dates .grn-ci-secondary{margin-top:12px}
.grn-ci-locked{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:auto;width:100%}
.grn-ci-locked .grn-ci-button{margin-top:0}
.grn-ci-link-contact{margin-top:2px}
.grn-ci-access-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.grn-ci-course[data-course] .grn-ci-button[data-course-cta]{margin-top:14px}
@media(max-width:820px){.grn-ci-destinations,.grn-ci-course-grid,.grn-ci-equipment-grid,.grn-ci-policy-grid{grid-template-columns:1fr}.grn-ci-course:last-child{grid-column:auto}.grn-ci-steps{grid-template-columns:1fr}.grn-ci-steps p{border-right:0;border-bottom:1px solid var(--grn-ci-ink)}.grn-ci-steps p:last-child{border-bottom:0}}
@media(max-width:600px){.grn-ci-hero{min-height:560px}.grn-ci-access-row,.grn-ci-gate{grid-template-columns:1fr}.grn-ci-link{white-space:normal}.grn-ci-destinations>a{min-height:230px}.grn-ci-course dl>div,.grn-ci-equipment-card dl>div{grid-template-columns:1fr;gap:3px}.grn-ci-access-actions{align-items:flex-start}.grn-ci-date{grid-template-columns:18px minmax(0,1fr);gap:10px}.grn-ci-date-seats{grid-column:2;text-align:left;margin-top:2px}}
/* --- v0.1.9 Centre overview density/contrast prototype (staging). Overview-scoped, additive; no shared/token/Kit/gn2-base edits. --- */
/* Contrast fix: explicit white H1 (specificity 0,2,1) beats Elementor Kit `.elementor-kit-2537 h1` (0,1,1); corrects the dark-on-dark hero on both Centre pages. No global !important. */
.grn-ci-page .grn-ci-hero h1{color:#fff}
/* v0.1.11 — FH Lecturis one-word Centre hero (accent font; family "FH Lecturis" verified loading on staging via glyph-width). Design-system: uppercase, 700 normal, -0.045em, line-height .82, one-word scale clamp(78px,17vw,260px). Overview-scoped so the Orientation "ACCESS." hero is unchanged. Fallback per system: Space Mono -> IBM Plex Mono -> monospace. */
.grn-ci-overview .grn-ci-hero h1{font-family:"FH Lecturis","Space Mono","IBM Plex Mono",monospace;font-weight:700;font-style:normal;text-transform:uppercase;font-size:clamp(78px,17vw,260px);line-height:.82;letter-spacing:-.045em;margin:0 0 .14em;max-width:100%}
/* Colour only the period cobalt; the CENTRE letters stay white (accessible H1 text reads "CENTRE."). */
.grn-ci-overview .grn-ci-hero .grn-ci-hero-dot{color:var(--grn-ci-blue)}
/* Atmospheric line — Neue Haas Grotesk Display 900 (NOT FH Lecturis); clear separation from the FH word. */
.grn-ci-overview .grn-ci-hero .grn-ci-hero-atmo{font-family:var(--grot,"Neue Haas Grotesk Display","Helvetica Neue",Arial,sans-serif);font-weight:900;font-size:clamp(22px,3vw,40px);line-height:1.05;letter-spacing:-.02em;max-width:520px;margin:0 0 20px}
/* Support line + CTA breathing room (outer section padding unchanged). */
.grn-ci-overview .grn-ci-hero .grn-ci-lead{max-width:520px;margin:0 0 30px}
.grn-ci-overview .grn-ci-section-dark .grn-ci-lead{max-width:640px;margin-bottom:36px}
.grn-ci-overview .grn-ci-destinations p{margin-top:8px}
/* One softer 1px hairline idiom for the destination grid (ink-black -> --line): warmer, less aggressive. */
.grn-ci-overview .grn-ci-destinations,.grn-ci-overview .grn-ci-destinations>a{border-color:var(--grn-ci-line)}
/* Same contrast bug in the dark onboarding band: the Kit forces headings dark; make the dark-band H2 and the in-band access-row H3s white (scoped to .grn-ci-section-dark, so My Account (light) access rows and the Orientation page are unaffected). Specificity beats `.elementor-kit-2537 h2/h3`; no !important. */
.grn-ci-page .grn-ci-section-dark h2,.grn-ci-page .grn-ci-section-dark .grn-ci-access-row h3{color:#fff}
/* Anti-clip for sub-standard narrow screens (<=340px): the one-word FH hero at the design-system 78px minimum needs ~291px, but a 320px viewport at the default gutter leaves only 284px. Preserve the exact 78px minimum (no font-size change) and instead release the overview horizontal gutter so the full glyph fits with no page overflow. */
@media(max-width:340px){.grn-ci-overview .grn-ci-wrap{padding-inline:12px}}
/* v0.1.15 — Design System rule: a cobalt fill takes white foreground in every state. The destination cards turn cobalt on hover/focus, but the Elementor Kit forces their heading dark (3.69:1 on cobalt). Force card headings white on the cobalt states, and give keyboard focus the same accessible cobalt+white treatment as hover. Overview-scoped; specificity beats `.elementor-kit-2537 h2`; no !important, no shared/Kit/global edits. The .grn-ci-button CTA is already white-on-cobalt in all states and is untouched. */
.grn-ci-overview .grn-ci-destinations>a:focus-visible{background:var(--grn-ci-blue);color:#fff;outline:2px solid #fff;outline-offset:-8px}
.grn-ci-overview .grn-ci-destinations>a:hover :where(h1,h2,h3,h4,h5,h6),
.grn-ci-overview .grn-ci-destinations>a:focus-visible :where(h1,h2,h3,h4,h5,h6){color:#fff}

/* ============================================================================
   v0.1.16 — The Centre editorial/cinematic rebuild (WO-022, staging).
   Overview-scoped (.grn-ci-editorial / .grn-ci-overview) and additive only: no
   shared token, Kit, gn2-base, Orientation-page or My-Account rules are changed.
   Four type roles: Display (FH Lecturis, H1 only) · Statement (NHG Display 700,
   sentence case) · Read (NHG Text 400) · Furniture (mono 500). Three weights in
   view: 700 / 500 / 400. Blue surfaces keep white foregrounds.
   ============================================================================ */

/* --- Font-role enforcement (kill the Elementor Kit `Inter` element-rule leak) ---
   The Kit sets font-family directly on p/a/button/etc. (specificity 0,1,1), which
   beats the plugin container's inherited family. Re-assert the four Centre faces
   with a two-class prefix (0,2,x) so Read renders NHG Text, Furniture renders mono
   and Statement renders NHG Display. Overview-scoped; no Kit/global/token edits. */
.grn-ci-overview.grn-ci-editorial :is(p,li,dd,figcaption,blockquote,a,.grn-ci-read,.grn-ci-lead){font-family:var(--sans,"Neue Haas Grotesk Text","Helvetica Neue",Arial,sans-serif)}
.grn-ci-overview.grn-ci-editorial :is(.grn-ci-kicker,.grn-ci-button,.grn-ci-link,.grn-ci-secondary,.grn-ci-refresher a,.grn-ci-destinations span,dt){font-family:var(--mono,"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace)}
.grn-ci-overview.grn-ci-editorial :is(h2,h3,.grn-ci-ov-statement,.grn-ci-hero-atmo){font-family:var(--grot,"Neue Haas Grotesk Display","Helvetica Neue",Arial,sans-serif)}

/* --- Type roles ---------------------------------------------------------- */
/* Display: cap the one-word hero to the design-system clamp (was 260px). FH only. */
.grn-ci-overview .grn-ci-hero h1{font-size:clamp(70px,17vw,168px);line-height:.82;letter-spacing:-.045em;margin:0 0 .12em}
/* Statement: hero atmo line becomes NHG Display 700, sentence case (no Display 900). */
.grn-ci-editorial .grn-ci-hero .grn-ci-hero-atmo{font-family:var(--grot,"Neue Haas Grotesk Display","Helvetica Neue",Arial,sans-serif);font-weight:700;text-transform:none;font-size:clamp(28px,4.7vw,60px);line-height:.98;letter-spacing:-.02em;max-width:16ch;margin:.12em 0 .34em}
/* Statement headings across movements. */
.grn-ci-editorial .grn-ci-ov-statement{font-family:var(--grot,"Neue Haas Grotesk Display","Helvetica Neue",Arial,sans-serif);font-weight:700;text-transform:none;letter-spacing:-.02em;font-size:clamp(28px,4.7vw,68px);line-height:.98;color:var(--grn-ci-ink);margin:.08em 0 .5em;max-width:20ch}
/* Read: body prose. */
.grn-ci-editorial .grn-ci-read{font-family:var(--sans,"Neue Haas Grotesk Text",Arial,sans-serif);font-weight:400;font-size:clamp(15px,1.25vw,18px);line-height:1.6;max-width:54ch;color:inherit}
.grn-ci-overview .grn-ci-hero .grn-ci-lead{font-family:var(--sans,"Neue Haas Grotesk Text",Arial,sans-serif);font-weight:400;font-size:clamp(16px,1.4vw,19px);line-height:1.55;max-width:44ch;margin:0 0 26px}
/* Furniture: scarce mono, weight 500 (keeps the page to three weights). */
.grn-ci-editorial .grn-ci-kicker{font-weight:500;font-size:11px;letter-spacing:.12em}
/* Links/buttons: weight 500 (Read-link / furniture). Buttons stay white-on-cobalt. */
.grn-ci-editorial .grn-ci-button,.grn-ci-editorial .grn-ci-link,.grn-ci-editorial .grn-ci-secondary,.grn-ci-editorial .grn-ci-refresher a{font-weight:500}

/* --- Movement 1: hero layout (text left / media right; stacks on mobile) --- */
.grn-ci-overview .grn-ci-ov-hero{padding:clamp(112px,15vw,210px) 0 clamp(52px,7vw,104px)}
.grn-ci-ov-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,64px);align-items:end}
.grn-ci-ov-hero-text{min-width:0}
.grn-ci-ov-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:6px}
.grn-ci-ov-secondary{color:#fff!important}
.grn-ci-ov-hero .grn-ci-ov-secondary .grn-ci-hero-dot,.grn-ci-ov-secondary [aria-hidden]{color:var(--grn-ci-blue)}
.grn-ci-ov-media-hero{align-self:stretch;min-height:clamp(260px,34vw,460px);aspect-ratio:4/5;max-height:520px;justify-self:end;width:100%}

/* --- Neutral fallback (designed, decorative). Warm greyscale contact-sheet motif;
       no text, no stock, no AI. One shared frame renderer, aspect set per slot. --- */
.grn-ci-ov-media{position:relative;overflow:hidden}
.grn-ci-ov-frame{position:absolute;inset:0;display:block;background-color:#e9e6dc;background-image:linear-gradient(135deg,rgba(19,19,19,.06),rgba(19,19,19,0) 46%,rgba(19,19,19,.10)),repeating-linear-gradient(90deg,rgba(19,19,19,.05) 0 2px,rgba(19,19,19,0) 2px 26px),radial-gradient(circle at 14px 14px,rgba(19,19,19,.16) 0 3px,rgba(19,19,19,0) 3.5px);background-size:100% 100%,100% 100%,28px 100%;background-position:0 0,0 0,0 0;border:1px solid var(--grn-ci-line);box-shadow:inset 0 0 0 10px #efece3,inset 0 0 60px rgba(19,19,19,.06)}
.grn-ci-ov-frame::after{content:"";position:absolute;left:10px;right:10px;top:10px;bottom:10px;background:repeating-linear-gradient(90deg,transparent 0 20px,rgba(19,19,19,.05) 20px 21px);pointer-events:none}
/* Sprocket rows top & bottom for the film-frame read. */
.grn-ci-ov-frame::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background-image:radial-gradient(circle at 12px 7px,rgba(19,19,19,.22) 0 2.4px,transparent 3px),radial-gradient(circle at 12px calc(100% - 7px),rgba(19,19,19,.22) 0 2.4px,transparent 3px);background-size:24px 100%;background-repeat:repeat-x;pointer-events:none}

/* --- Movement 2 (wide breath band) removed in 0.1.18 — hero flows into routes. --- */

/* --- Movement 3: routes 2x2 down to 390 (collapse only below 520px) --- */
.grn-ci-overview .grn-ci-destinations{grid-template-columns:repeat(2,minmax(0,1fr))}
.grn-ci-overview .grn-ci-destinations h3{font-family:var(--grot,"Neue Haas Grotesk Display","Helvetica Neue",Arial,sans-serif);font-weight:700;text-transform:none;letter-spacing:-.015em;font-size:clamp(20px,2.2vw,26px);line-height:1.04;margin:auto 0 12px}
.grn-ci-overview .grn-ci-destinations span{font-weight:500}

/* --- Movement 4: living room (text + neutral media) --- */
.grn-ci-ov-living-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center}
.grn-ci-ov-media-living{aspect-ratio:3/2;min-height:240px;width:100%}

/* --- Movement 5: work strip (three neutral fallbacks) --- */
.grn-ci-ov-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin:6px 0 20px}
.grn-ci-ov-media-strip{aspect-ratio:16/10;width:100%}
.grn-ci-ov-work-note{color:var(--grn-ci-muted);max-width:60ch}

/* --- Movement 6: access rows adopt the sentence-case Statement role here (the
       preserved grn_ci_access_rows() component keeps its uppercase h3 everywhere
       else, e.g. My Account — this override is scoped to the overview only). --- */
.grn-ci-overview.grn-ci-editorial .grn-ci-access-row h3{text-transform:none;letter-spacing:-.015em;font-size:clamp(22px,2.6vw,34px);line-height:1.05}

/* --- Movement 7: closing --- */
.grn-ci-ov-closing .grn-ci-ov-actions{margin-top:10px}
.grn-ci-ov-closing .grn-ci-ov-secondary{color:var(--grn-ci-ink)!important}

/* --- Responsive: 768 keeps 2x2 routes; stack side-by-sides; 390 single column --- */
@media(max-width:900px){
  .grn-ci-ov-hero-grid,.grn-ci-ov-living-grid{grid-template-columns:1fr}
  .grn-ci-ov-media-hero{display:none}
  .grn-ci-ov-media-living{aspect-ratio:16/9;order:-1;max-height:320px}
}
@media(max-width:520px){
  .grn-ci-overview .grn-ci-destinations{grid-template-columns:1fr}
  .grn-ci-ov-strip{grid-template-columns:1fr}
  .grn-ci-ov-media-strip{aspect-ratio:16/9}
}

/* --- Restrained reveals. Transform/opacity only; scoped; NOT a blanket
       [data-reveal]{opacity:1}. Hidden state applies ONLY when JS has added
       html.grn-ci-anim AND the visitor has not requested reduced motion, so no-JS
       and reduced-motion always show all content. Child cards stagger 60-90ms. --- */
@media(prefers-reduced-motion:no-preference){
  html.grn-ci-anim .grn-ci-editorial [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
  html.grn-ci-anim .grn-ci-editorial [data-reveal].is-in{opacity:1;transform:none}
  html.grn-ci-anim .grn-ci-editorial [data-reveal] [data-reveal-child]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
  html.grn-ci-anim .grn-ci-editorial [data-reveal].is-in [data-reveal-child]{opacity:1;transform:none}
  html.grn-ci-anim .grn-ci-editorial [data-reveal].is-in [data-reveal-child]:nth-child(2){transition-delay:.07s}
  html.grn-ci-anim .grn-ci-editorial [data-reveal].is-in [data-reveal-child]:nth-child(3){transition-delay:.14s}
  html.grn-ci-anim .grn-ci-editorial [data-reveal].is-in [data-reveal-child]:nth-child(4){transition-delay:.21s}
}

/* ============================================================================
   v0.1.17 — The Centre full-bleed cinematic hero (WO-023, staging).
   Replaces the 0.1.16 left-text/right-media split with ONE image-scale plate.
   Overview-scoped, additive; movements 2-7, access rows, tokens, Kit untouched.
   ============================================================================ */
/* Full-bleed cinematic opening. min-height:max(px, svh) so it is always at least a
   cinematic viewport height AND grows if overlay content is taller (no clipping). */
.grn-ci-overview .grn-ci-ov-hero-full{position:relative;overflow:clip;display:flex;align-items:flex-end;background:var(--grn-ci-ink);color:#fff;padding:0;min-height:560px;min-height:max(560px,88svh)}
/* Single edge-to-edge media layer behind everything. */
.grn-ci-ov-hero-full .grn-ci-ov-hero-media{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:hidden}
/* Focal-point mechanism — a future real 21:9 original drops in as this <img>,
   cropping safely to any container shape (desktop wide, tablet ~3:2, mobile ~4:5). */
.grn-ci-ov-hero-full .grn-ci-ov-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focal-x,50%) var(--focal-y,50%)}
/* Honest neutral film-frame fallback, DARK tonality (no stock/AI/photo claim). */
.grn-ci-ov-hero-full .grn-ci-ov-frame-hero{position:absolute;inset:0;border:0;box-shadow:inset 0 0 240px rgba(0,0,0,.55);background-color:#141414;background-image:radial-gradient(120% 82% at 50% 20%,rgba(255,255,255,.045),rgba(255,255,255,0) 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 2px,rgba(255,255,255,0) 2px 34px),radial-gradient(circle at 16px 14px,rgba(255,255,255,.05) 0 2px,rgba(255,255,255,0) 2.6px),radial-gradient(circle at 16px calc(100% - 14px),rgba(255,255,255,.05) 0 2px,rgba(255,255,255,0) 2.6px);background-size:100% 100%,100% 100%,32px 100%,32px 100%;background-repeat:no-repeat,repeat,repeat-x,repeat-x;background-position:0 0,0 0,0 0,0 100%}
/* Restrained bottom-weighted scrim → white overlay stays legible over the plate. */
.grn-ci-ov-hero-full .grn-ci-ov-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,8,8,.34) 0%,rgba(8,8,8,.06) 32%,rgba(8,8,8,.16) 56%,rgba(8,8,8,.52) 82%,rgba(8,8,8,.74) 100%)}
/* Overlay content above media+scrim, bottom-anchored; gutter padding lives here now. */
.grn-ci-ov-hero-full .grn-ci-ov-hero-inner{position:relative;z-index:2;width:min(1440px,100%);margin:0 auto;padding:clamp(48px,7vh,104px) clamp(18px,4vw,64px)}
.grn-ci-ov-hero-full .grn-ci-ov-hero-text{max-width:none}
.grn-ci-ov-hero-full .grn-ci-hero-atmo,.grn-ci-ov-hero-full .grn-ci-lead{text-shadow:0 1px 22px rgba(0,0,0,.34)}
/* Cinematic crop on smaller screens — never a tiny banner. */
@media(max-width:900px){.grn-ci-overview .grn-ci-ov-hero-full{min-height:520px;min-height:max(520px,84svh)}}
@media(max-width:520px){.grn-ci-overview .grn-ci-ov-hero-full{min-height:496px;min-height:max(496px,82svh)}}
/* Hero reveal = fade only (no translate → no edge gap on a full-bleed section). */
@media(prefers-reduced-motion:no-preference){
  html.grn-ci-anim .grn-ci-editorial .grn-ci-ov-hero-full[data-reveal]{transform:none}
}

/* ============================================================================
   v0.1.22 — Centre consolidation + quieter Orientation (WO-033, staging).
   ============================================================================ */
@media(min-width:901px){
  .grn-ci-overview .grn-ci-destinations{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grn-ci-overview .grn-ci-destinations>a{min-height:280px}
}

/* FH Lecturis is the Centre hero voice on both overview and Orientation. */
.grn-ci-orientation .grn-ci-hero h1{
  font-family:"FH Lecturis","Space Mono","IBM Plex Mono",monospace;
  font-weight:700;font-style:normal;text-transform:uppercase;
  font-size:clamp(72px,16vw,184px);line-height:.82;letter-spacing:-.045em;
  margin:.08em 0 .18em;color:#fff;
}
.grn-ci-orientation .grn-ci-hero{min-height:max(560px,78svh)}
.grn-ci-orientation .grn-ci-hero .grn-ci-lead{font-family:var(--sans,"Neue Haas Grotesk Text",Arial,sans-serif);font-size:clamp(18px,2vw,25px);line-height:1.45;max-width:32ch}
.grn-ci-orientation .grn-ci-section{padding-block:clamp(54px,8vw,108px)}

/* Compact three-step sentence: semantic steps without three dense panels. */
.grn-ci-orientation .grn-ci-steps{grid-template-columns:repeat(3,minmax(0,1fr));margin:18px 0 clamp(34px,5vw,64px);border:0;border-top:1px solid var(--grn-ci-line);border-bottom:1px solid var(--grn-ci-line)}
.grn-ci-orientation .grn-ci-steps p{display:flex;flex-direction:column;gap:7px;padding:18px 20px 18px 0;border:0!important;margin:0}
.grn-ci-orientation .grn-ci-steps strong{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.grn-ci-orientation .grn-ci-steps span{font-size:14px;color:var(--grn-ci-muted)}

.grn-ci-orientation .grn-ci-course-grid{gap:16px}
.grn-ci-orientation .grn-ci-course{min-height:0;border-color:var(--grn-ci-line);padding:clamp(22px,3vw,34px)}
.grn-ci-orientation .grn-ci-course h2{font-family:var(--grot,"Neue Haas Grotesk Display",Arial,sans-serif);font-weight:700;text-transform:none;letter-spacing:-.025em;font-size:clamp(30px,3.8vw,52px);line-height:.98;margin:.12em 0 .34em}
.grn-ci-orientation .grn-ci-course>p:not(.grn-ci-kicker):not(.grn-ci-course-note):not(.grn-ci-course-facts){font-family:var(--sans,"Neue Haas Grotesk Text",Arial,sans-serif);font-size:15px;line-height:1.55;max-width:52ch}
.grn-ci-course-facts{display:flex;flex-wrap:wrap;gap:8px 16px;width:100%;padding:15px 0;margin:12px 0 0;border-top:1px solid var(--grn-ci-line);border-bottom:1px solid var(--grn-ci-line);font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.grn-ci-course-facts span+span{position:relative}
.grn-ci-course-details{width:100%;padding:12px 0;border-bottom:1px solid var(--grn-ci-line);font-size:13px;color:var(--grn-ci-muted)}
.grn-ci-course-details summary{cursor:pointer;font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grn-ci-ink)}
.grn-ci-course-details p{margin:10px 0 2px;line-height:1.55}
.grn-ci-orientation .grn-ci-warning{width:100%;margin:14px 0 2px;padding:12px 14px;border-left-width:3px;font-size:13px;line-height:1.5}
.grn-ci-orientation .grn-ci-course:last-child{background:var(--grn-ci-acid);border-color:var(--grn-ci-ink)}
.grn-ci-orientation .grn-ci-course:last-child .grn-ci-course-note{color:var(--grn-ci-ink)}

/* One blue policy band instead of four legal-looking cards. Cobalt always uses white type. */
.grn-ci-orientation .grn-ci-policy{margin-top:16px;padding:clamp(24px,4vw,48px);border:0;background:var(--grn-ci-blue);color:#fff;display:grid;grid-template-columns:minmax(180px,.6fr) minmax(0,1.4fr);gap:10px clamp(24px,5vw,72px);align-items:start}
.grn-ci-orientation .grn-ci-policy .grn-ci-kicker,.grn-ci-orientation .grn-ci-policy h2,.grn-ci-orientation .grn-ci-policy p,.grn-ci-orientation .grn-ci-policy a{color:#fff}
.grn-ci-orientation .grn-ci-policy h2{font-family:"FH Lecturis","Space Mono","IBM Plex Mono",monospace;font-size:clamp(42px,6vw,82px);line-height:.88;letter-spacing:-.04em;text-transform:uppercase;margin:0;grid-row:2/5}
.grn-ci-orientation .grn-ci-policy>p:not(.grn-ci-kicker){font-size:14px;line-height:1.58;margin:0 0 6px;grid-column:2}
.grn-ci-orientation .grn-ci-policy-links{font-family:var(--mono,"IBM Plex Mono",monospace);font-size:10px!important;letter-spacing:.06em;text-transform:uppercase}

/* WO-034 — qualification is a visible system state, not a promotional colour
   block. Acid marks the current step/status only; every action is black. */
.grn-ci-button-dark{background:var(--grn-ci-ink);border-color:var(--grn-ci-ink);color:#fff!important}
.grn-ci-button-dark:hover,.grn-ci-button-dark:focus-visible{background:var(--grn-ci-acid);border-color:var(--grn-ci-ink);color:var(--grn-ci-ink)!important}
.grn-ci-live-booking.is-entry-gate,.grn-ci-live-booking.is-status-gate{max-width:none;padding:0;background:#fff;border-color:var(--grn-ci-ink)}
.grn-ci-booking-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;border-bottom:1px solid var(--grn-ci-ink)}
.grn-ci-booking-path li{display:flex;align-items:center;gap:9px;min-height:54px;padding:0 16px;border-right:1px solid var(--grn-ci-ink);font:700 10px/1.2 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--grn-ci-muted)}
.grn-ci-booking-path li:last-child{border-right:0}
.grn-ci-booking-path li span{font-size:9px}
.grn-ci-booking-path li[data-state="complete"]{background:var(--grn-ci-ink);color:#fff}
.grn-ci-booking-path li[data-state="active"]{background:var(--grn-ci-acid);color:var(--grn-ci-ink)}
.grn-ci-entry-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr)}
.grn-ci-entry-message,.grn-ci-first-visit{padding:clamp(28px,4vw,58px)}
.grn-ci-first-visit{border-left:1px solid var(--grn-ci-ink);background:var(--grn-ci-paper)}
.grn-ci-state-label{display:inline-flex;margin:0 0 20px;padding:7px 9px;background:var(--grn-ci-acid);color:var(--grn-ci-ink);font:700 9px/1.2 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.1em;text-transform:uppercase}
.grn-ci-entry-message h3,.grn-ci-live-booking.is-status-gate .grn-ci-live-head h3{max-width:12ch;margin:0 0 16px;color:var(--grn-ci-ink);font-family:"FH Lecturis","Space Mono","IBM Plex Mono",monospace;font-size:clamp(42px,5.5vw,78px);font-weight:700;line-height:.86;letter-spacing:-.04em;text-transform:uppercase}
.grn-ci-entry-message>p:not(.grn-ci-state-label),.grn-ci-first-visit>p:not(.grn-ci-kicker){max-width:48ch;margin:0;color:var(--grn-ci-muted);font-size:15px;line-height:1.55}
.grn-ci-live-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:26px}
.grn-ci-first-visit h4,.grn-ci-room-head h4{margin:0 0 12px;color:var(--grn-ci-ink);font-family:var(--grot,"Neue Haas Grotesk Display",Arial,sans-serif);font-size:clamp(28px,3.2vw,46px);font-weight:700;line-height:.96;letter-spacing:-.025em}
.grn-ci-room-routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:28px;border-top:1px solid var(--grn-ci-ink);border-left:1px solid var(--grn-ci-ink)}
.grn-ci-room-route{position:relative;display:flex;flex-direction:column;min-height:150px;padding:18px;border-right:1px solid var(--grn-ci-ink);border-bottom:1px solid var(--grn-ci-ink);color:var(--grn-ci-ink)!important;text-decoration:none!important}
.grn-ci-room-route span{max-width:8ch;font-family:var(--grot,"Neue Haas Grotesk Display",Arial,sans-serif);font-size:22px;font-weight:700;line-height:.95;letter-spacing:-.02em}
.grn-ci-room-route small{margin-top:auto;font:700 8px/1.3 var(--mono,"IBM Plex Mono",monospace);letter-spacing:.07em;text-transform:uppercase}
.grn-ci-room-route b{position:absolute;right:16px;top:16px;font:700 14px/1 var(--mono,"IBM Plex Mono",monospace)}
.grn-ci-room-route:hover,.grn-ci-room-route:focus-visible{background:var(--grn-ci-ink);color:#fff!important;outline:0}
.grn-ci-room-route.is-coming-soon{background:rgba(17,17,17,.055);color:var(--grn-ci-muted)!important;cursor:default}
.grn-ci-room-route.is-coming-soon:hover{background:rgba(17,17,17,.055);color:var(--grn-ci-muted)!important}
.grn-ci-live-booking.is-status-gate>.grn-ci-live-head{max-width:none;margin:0;padding:clamp(28px,4vw,58px);border-bottom:1px solid var(--grn-ci-line)}
.grn-ci-live-booking.is-status-gate>.grn-ci-gates{margin:0;padding:clamp(22px,3vw,38px)}
.grn-ci-equipment-room{margin-top:34px;padding-top:28px;border-top:1px solid var(--grn-ci-ink)}
.grn-ci-room-head{display:grid;grid-template-columns:minmax(180px,.55fr) minmax(0,1.45fr);gap:12px clamp(24px,5vw,70px);align-items:start;margin-bottom:24px}
.grn-ci-room-head .grn-ci-state-label{grid-row:1/3;justify-self:start}
.grn-ci-room-head h4{margin:0}
.grn-ci-room-head>p:last-child{max-width:48ch;margin:0;color:var(--grn-ci-muted);font-size:14px;line-height:1.5}
.grn-ci-equipment-room .grn-ci-equipment-card{background:#fff;border-color:var(--grn-ci-ink)}
.grn-ci-equipment-card .grn-ci-capability{display:none}

@media(max-width:700px){
  .grn-ci-orientation .grn-ci-hero{min-height:max(500px,72svh)}
  .grn-ci-orientation .grn-ci-steps{grid-template-columns:1fr}
  .grn-ci-orientation .grn-ci-steps p{border-bottom:1px solid var(--grn-ci-line)!important;padding:14px 0}
  .grn-ci-orientation .grn-ci-steps p:last-child{border-bottom:0!important}
  .grn-ci-orientation .grn-ci-policy{grid-template-columns:1fr}
  .grn-ci-orientation .grn-ci-policy h2{grid-row:auto}
  .grn-ci-orientation .grn-ci-policy>p:not(.grn-ci-kicker){grid-column:1}
  .grn-ci-booking-path{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grn-ci-booking-path li:nth-child(2){border-right:0}
  .grn-ci-booking-path li:nth-child(-n+2){border-bottom:1px solid var(--grn-ci-ink)}
  .grn-ci-entry-grid{grid-template-columns:1fr}
  .grn-ci-first-visit{border-left:0;border-top:1px solid var(--grn-ci-ink)}
  .grn-ci-room-head{grid-template-columns:1fr}
  .grn-ci-room-head .grn-ci-state-label{grid-row:auto}
}