:root{
  --gh-teal-500:#4C7F7A; --gh-teal-600:#3A6E69; --gh-teal-700:#2E5753;
  --gh-teal-800:#213F3C; --gh-teal-900:#172B29; --gh-teal-300:#8FBCB8;
  --gh-teal-100:#DFECEB; --gh-teal-50:#EFF5F5;
  --gh-gold:#EEAD45; --gh-gold-500:#EEAD45; --gh-gold-600:#D9962F;
  --gh-gold-script:#DFAF56; --gh-gold-300:#F4CA86; --gh-gold-100:#FBEAD0;
  --gh-gold-hairline:#E8AE4B;
  --gh-ink:#1C2028; --gh-slate:#4D5158; --gh-mist:#9CA5A6;
  --gh-cloud:#C4CED8; --gh-divider:rgba(196,206,216,.55);
  --gh-muted:#5F6C6C; --gh-paper:#F6F8F8; --gh-white:#FFFFFF;
  --gh-font-display:'El Messiri',serif; --gh-font-ui:'Jost',sans-serif;
  --gh-font-script:'Whisper',cursive;
  --gh-container:1320px; --gh-gutter:24px;
  --gh-section:clamp(72px,8vw,120px); --gh-section-footer:clamp(60px,7vw,96px);
  --gh-radius-card:12px; --gh-radius-control:6px; --gh-radius-pill:999px;
  --gh-shadow-card:0 20px 50px rgba(23,43,41,.10);
  --gh-shadow-image:0 24px 60px rgba(23,43,41,.15);
  --gh-shadow-modal:0 40px 90px rgba(23,43,41,.35);
  --gh-ease:cubic-bezier(.22,1,.36,1); --gh-reveal:.85s; --gh-stagger:80ms;
}

html { scroll-behavior: smooth; }
body { margin:0; background:#F6F8F8; color:#4D5158; font-family:'Jost',sans-serif;
       -webkit-font-smoothing:antialiased; text-wrap:pretty; overflow-x:hidden; }
a { color:#2E5753; text-decoration:none; }
a:hover { color:#EEAD45; }
input, textarea, button, select { font-family:'Jost',sans-serif; }
::selection { background:#EEAD45; color:#1C2028; }

/* carried from artboard helmets */
@keyframes ghKb { from { transform:scale(1.02); } to { transform:scale(1.12); } }
@keyframes ghMarq { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
@keyframes ghPulse { 0% { transform:scale(1); opacity:.55; } 70% { transform:scale(2.4); opacity:0; } 100% { transform:scale(2.4); opacity:0; } }
@keyframes ghDash { to { stroke-dashoffset:0; } }
@keyframes ghScroll { 0% { transform:scaleY(0); transform-origin:top; } 45% { transform:scaleY(1); transform-origin:top; } 55% { transform:scaleY(1); transform-origin:bottom; } 100% { transform:scaleY(0); transform-origin:bottom; } }
@keyframes ghFloat { from { transform:translateY(0); } to { transform:translateY(-10px); } }
@keyframes ghKb { from { transform:scale(1.02); } to { transform:scale(1.1); } }
input, textarea, button { font-family:'Jost',sans-serif; }
input[type=range] { -webkit-appearance:none; appearance:none; height:4px; border-radius:999px; background:#C4CED8; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:999px; background:#EEAD45; border:3px solid #fff; box-shadow:0 3px 12px rgba(23,43,41,.3); cursor:pointer; }
input[type=range]::-moz-range-thumb { width:22px; height:22px; border-radius:999px; background:#EEAD45; border:3px solid #fff; cursor:pointer; }
@keyframes gh-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes gh-pulse { 0% { transform:scale(1); opacity:.55; } 70% { transform:scale(2.4); opacity:0; } 100% { transform:scale(2.4); opacity:0; } }


/* generated from style-hover / style-focus / style-before / style-after */
.ghx1::before { content:'';position:absolute;left:-1px;top:0;width:34px;height:1px;background:rgba(238,173,69,.45); }
.ghx1::after { content:'';position:absolute;right:-1px;top:0;width:34px;height:1px;background:rgba(238,173,69,.45); }
.ghx2:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.4) !important; }
.ghx3:hover { background:#fff !important; color:#213F3C !important; border-color:#fff !important; }
.ghx4::before { content:'';position:absolute;left:-1px;top:0;width:34px;height:1px;background:rgba(238,173,69,.45); }
.ghx4::after { content:'';position:absolute;right:-1px;top:0;width:34px;height:1px;background:rgba(238,173,69,.45); }
.ghx5:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.4) !important; }
.ghx6:hover { background:#fff !important; color:#213F3C !important; }
.ghx7::before { content:'';position:absolute;left:-1px;top:0;width:34px;height:1px;background:rgba(238,173,69,.45); }
.ghx7::after { content:'';position:absolute;right:-1px;top:0;width:34px;height:1px;background:rgba(238,173,69,.45); }
.ghx8:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.4) !important; }
.ghx9:hover { background:#fff !important; color:#213F3C !important; }
.ghx10:hover { background:var(--gh-gold,#EEAD45) !important; border-color:var(--gh-gold,#EEAD45) !important; color:#1C2028 !important; }
.ghx11:hover { background:var(--gh-gold,#EEAD45) !important; border-color:var(--gh-gold,#EEAD45) !important; color:#1C2028 !important; }
.ghx12:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 30px rgba(238,173,69,.4) !important; }
.ghx13:hover { background:#4C7F7A !important; color:#fff !important; }
.ghx14:hover { transform:translateY(-4px) !important; }
.ghx15:hover { transform:translateY(-4px) !important; }
.ghx16:hover { transform:translateY(-4px) !important; }
.ghx17:hover { transform:translateY(-4px) !important; }
.ghx18:hover { transform:translateY(-4px) !important; }
.ghx19:hover { transform:translateY(-4px) !important; }
.ghx20:hover { background:#4C7F7A !important; color:#fff !important; }
.ghx21:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx22:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx23:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx24:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx25:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx26:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 30px rgba(238,173,69,.4) !important; }
.ghx27:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.34) !important; }
.ghx28:hover { transform:translateY(-2px) !important; }
.ghx29:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx30:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx31:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx32:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx33:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx34:hover { background:#D9962F !important; }
.ghx35:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx36:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx37:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx38:hover { background:#D9962F !important; }
.ghx39:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx40:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx41:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx42:hover { background:#D9962F !important; }
.ghx43:hover { background:#D9962F !important; }
.ghx44:hover { background:#fff !important; color:#213F3C !important; }
.ghx45:hover { color:var(--gh-gold,#EEAD45) !important; }
.ghx46::before { content:'';position:absolute;left:-1px;top:0;width:32px;height:1px;background:rgba(238,173,69,.45); }
.ghx46::after { content:'';position:absolute;right:-1px;top:0;width:32px;height:1px;background:rgba(238,173,69,.45); }
.ghx47:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 30px rgba(238,173,69,.4) !important; }
.ghx48:hover { background:#4C7F7A !important; color:#fff !important; }
.ghx49:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(23,43,41,.28) !important; }
.ghx50:hover { transform:translateY(-2px) !important; }
.ghx51:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx52:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx53:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx54:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx55:hover { background:#D9962F !important; }
.ghx56:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx57:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx58:hover { background:#D9962F !important; }
.ghx59:hover { background:#D9962F !important; }
.ghx60:hover { background:#fff !important; color:#213F3C !important; }
.ghx61:hover { color:var(--gh-gold,#EEAD45) !important; }
.ghx62::before { content:'';position:absolute;left:-1px;top:0;width:32px;height:1px;background:rgba(238,173,69,.45); }
.ghx62::after { content:'';position:absolute;right:-1px;top:0;width:32px;height:1px;background:rgba(238,173,69,.45); }
.ghx63:hover { background:#4C7F7A !important; color:#fff !important; }
.ghx64:hover { background:#4C7F7A !important; color:#fff !important; }
.ghx65:hover { background:#4C7F7A !important; color:#fff !important; }
.ghx66:hover { border-color:var(--gh-gold,#EEAD45) !important; color:var(--gh-gold,#EEAD45) !important; }
.ghx67:hover { border-color:var(--gh-gold,#EEAD45) !important; color:var(--gh-gold,#EEAD45) !important; }
.ghx68:hover { border-color:var(--gh-gold,#EEAD45) !important; color:var(--gh-gold,#EEAD45) !important; }
.ghx69:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx70:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx71:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx72:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx73:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx74:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx75:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx76:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx77:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx78:hover { transform:translateY(-2px) !important; }
.ghx79:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx80:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx81:hover { background:#D9962F !important; }
.ghx82:hover { background:#D9962F !important; }
.ghx83:hover { background:#fff !important; color:#213F3C !important; }
.ghx84:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx85:hover { background:#2E5753 !important; color:#fff !important; }
.ghx86:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx87:hover { background:#2E5753 !important; color:#fff !important; }
.ghx88:hover { background:#2E5753 !important; color:#fff !important; }
.ghx89:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.34) !important; }
.ghx90:hover { background:#D9962F !important; }
.ghx91:hover { background:#fff !important; color:#213F3C !important; }
.ghx92:hover { color:var(--gh-gold,#EEAD45) !important; }
.ghx93::before { content:'';position:absolute;left:-1px;top:0;width:34px;height:1px;background:rgba(238,173,69,.45); }
.ghx93::after { content:'';position:absolute;right:-1px;top:0;width:34px;height:1px;background:rgba(238,173,69,.45); }
.ghx94:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.4) !important; }
.ghx95:hover { background:#fff !important; color:#213F3C !important; }
.ghx96:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 30px rgba(238,173,69,.4) !important; }
.ghx97:hover { background:#4C7F7A !important; color:#fff !important; }
.ghx98:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx99:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx100:hover { transform:translateY(-4px) !important; }
.ghx101:hover { transform:translateY(-4px) !important; }
.ghx102:hover { transform:translateY(-4px) !important; }
.ghx103:hover { transform:translateY(-4px) !important; }
.ghx104:hover { transform:translateY(-4px) !important; }
.ghx105:hover { transform:translateY(-4px) !important; }
.ghx106:hover { transform:translateY(-4px) !important; }
.ghx107:hover { transform:translateY(-4px) !important; }
.ghx108:hover { transform:translateY(-4px) !important; }
.ghx109:hover { transform:translateY(-4px) !important; }
.ghx110:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx111:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx112:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx113:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx114:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx115:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 30px rgba(238,173,69,.4) !important; }
.ghx116:hover { transform:translateY(-2px) !important; }
.ghx117:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx118:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx119:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx120:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx121:hover { background:#D9962F !important; }
.ghx122:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx123:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx124:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx125:hover { background:#D9962F !important; }
.ghx126:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx127:focus { border-color:var(--gh-gold,#EEAD45) !important; }
.ghx128:hover { background:#D9962F !important; }
.ghx129:hover { background:#D9962F !important; }
.ghx130:hover { background:#fff !important; color:#213F3C !important; }
.ghx131:hover { border-bottom-color:var(--gh-gold,#EEAD45) !important; }
.ghx132:hover { background:#D9962F !important; }
.ghx133:hover { background:#2E5753 !important; color:#fff !important; }
.ghx134:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.34) !important; }
.ghx135:hover { background:#D9962F !important; }
.ghx136:hover { background:#fff !important; color:#213F3C !important; }
.ghx137:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx138:hover { border-bottom-color:var(--gh-gold,#EEAD45) !important; }
.ghx139:hover { border-bottom-color:var(--gh-gold,#EEAD45) !important; }
.ghx140:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.34) !important; }
.ghx141:hover { background:#D9962F !important; }
.ghx142:hover { background:#fff !important; color:#213F3C !important; }
.ghx143:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.34) !important; }
.ghx144:hover { background:#D9962F !important; }
.ghx145:hover { background:#fff !important; color:#213F3C !important; }
.ghx146:hover { border-bottom-color:var(--gh-gold,#EEAD45) !important; }
.ghx147:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.34) !important; }
.ghx148:hover { background:#D9962F !important; }
.ghx149:hover { background:#fff !important; color:#213F3C !important; }
.ghx150:hover { background:var(--gh-gold,#EEAD45) !important; transform:translate(-50%,-50%) scale(1.06) !important; }
.ghx151:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.34) !important; }
.ghx152:hover { background:#D9962F !important; }
.ghx153:hover { background:#fff !important; color:#213F3C !important; }
.ghx154:hover { background:#2E5753 !important; color:#fff !important; }
.ghx155:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx156:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx157:hover { border-bottom-color:var(--gh-gold,#EEAD45) !important; }
.ghx158:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx159:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx160:hover { background:#D9962F !important; }
.ghx161:hover { background:#2E5753 !important; color:#fff !important; }
.ghx162:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx163:hover { background:#2E5753 !important; color:#fff !important; }
.ghx164:hover { background:#D9962F !important; }
.ghx165:hover { background:#fff !important; color:#213F3C !important; }
.ghx166:hover { background:#D9962F !important; transform:translateY(-2px) !important; }
.ghx167:hover { background:#fff !important; color:#213F3C !important; }
.ghx168:hover { background:#fff !important; color:#213F3C !important; }
.ghx169:hover { background:#fff !important; color:#213F3C !important; }
.ghx170:hover { background:#fff !important; color:#213F3C !important; }
.ghx171:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.45) !important; }
.ghx172:hover { background:#4C7F7A !important; color:#fff !important; }
.ghx173:hover { background:#fff !important; color:#213F3C !important; }
.ghx174::before { content:'';position:absolute;left:-1px;top:0;width:20px;height:1px;background:rgba(238,173,69,.45); }
.ghx174::after { content:'';position:absolute;right:-1px;top:0;width:20px;height:1px;background:rgba(238,173,69,.45); }

/* gh-nav.js retires the page's own "Register Your Interest" button once it has
   appended its own CTA into the nav, by setting display:none inline. Every
   page's resize handler then unconditionally re-shows that same button
   (`cta.style.display = w < 1080 ? 'none' : 'inline-block'`), so whichever ran
   last won — leaving a duplicate CTA that starved the nav of width and pushed
   it left over the logo. This settles it regardless of order. */
[data-gh-retired] { display: none !important; }

/* Form validation. The palette had no error colour; this is a desaturated
   warm red chosen to sit against teal/gold rather than a stock #f00. */
:root { --gh-error:#B4462F; }

/* poster hero controls */
.ghhero1:hover { background:#D9962F !important; transform:translateY(-2px) !important; box-shadow:0 14px 34px rgba(244,202,134,.34) !important; }
.ghhero2:hover { border-color:var(--gh-gold,#EEAD45) !important; background:rgba(255,255,255,.08) !important; }

/* ---------------------------------------------------------------- hero building
   The client render is shown COMPLETE on every slide: contain + auto width/height
   means it is never cropped and never distorted. It sits inside the wedge that is
   clear of the diagonal panel (the panel spans 60% at the top, tapering to ~38%
   at the bottom), so `left` starts past the panel's widest point. No Ken Burns
   here — scaling up would clip the very edges we are trying to keep visible. */
.gh-hero-media {
  position: absolute;
  /* clear the fixed 96px header above and the stat strip below */
  top: clamp(104px, 13vh, 138px);
  bottom: clamp(96px, 13vh, 140px);
  left: max(60%, 672px);
  right: clamp(6px, 1.6vw, 30px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
/* Sized in vh, not %: a percentage max-height on a flex item does not resolve
   reliably against the container here, and vh is what actually matters — the
   whole building has to fit the screen, not just the hero box. */
.gh-hero-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(71vh, 780px);
  object-fit: contain;
  /* a cut-out, so no border-radius: there is no box, just the building */
  filter: drop-shadow(0 30px 64px rgba(0, 0, 0, .45));
}

/* Below the diagonal-panel breakpoint the panel gives way to a full-width scrim
   (geometry rule 2), so the building re-parents to the lower half of the hero
   instead of being nudged sideways into the copy (rule 5). */
@media (max-width: 900px) {
  /* The panel has given way to a full-width scrim by here, so the building can
     no longer sit "beside" the copy — at 390px it landed straight on top of the
     CTA buttons. Anchor it to the bottom-right corner, below the buttons, and
     keep the copy clear of it (geometry rule 5: re-parent, never nudge). */
  .gh-hero-media {
    left: auto;
    right: clamp(6px, 2vw, 14px);
    top: auto;
    bottom: clamp(40px, 6vh, 72px);
    height: auto;
    width: auto;
    align-items: flex-end;
    justify-content: flex-end;
  }
  .gh-hero-media img {
    /* The CTA stack ends at x=268 on every phone width, so sizing the render
       to the free strip to its right guarantees it can never cover a button. */
    max-height: min(30vh, 300px);
    max-width: calc(100vw - 292px);
  }
}

/* Small phones: the CTA buttons stack to full width, so there is no room beside
   them — drop the building below the button stack and shrink it to suit. */
@media (max-width: 400px) {
  .gh-hero-media { bottom: clamp(46px, 6vh, 62px); }
  .gh-hero-media img { max-height: min(22vh, 200px); max-width: calc(100vw - 286px); }
}

/* Below ~340px (iPhone SE 1st-gen class) the hero has to carry the full copy
   block plus two stacked CTAs in 700px of height. Anything left for the render
   is ~64px wide — unrecognisable, and it still lands on a button. Hide it there
   rather than ship an overlap; the building appears again in the sections below. */
@media (max-width: 340px) {
  .gh-hero-media { display: none; }
}

/* "Four Ways In" cards. The motion spec calls for image cards to zoom to 1.06
   over 0.7s on hover; the card itself already lifts, so only the photo scales.
   overflow:hidden on the card keeps the zoom inside the 12px radius. */
.gh-card-img {
  transform: scale(1.005);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
a:hover > picture > .gh-card-img,
a:focus-visible > picture > .gh-card-img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .gh-card-img, a:hover > picture > .gh-card-img { transition: none; transform: none; }
}

/* Below 560px the page JS turns each "Four Ways In" card into a horizontal row:
   a 104px thumbnail column plus the caption. The photo is absolutely positioned
   for the desktop layout, so on mobile it has to become a real grid item or the
   thumbnail column renders empty. */
@media (max-width: 559px) {
  a[data-feat] > picture {
    grid-column: 1;
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px 0 0 12px;
  }
  a[data-feat] > picture > .gh-card-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* ---- Gul Skyline teaser -------------------------------------------------
   The canvas style-hover / style-before attributes are no longer compiled,
   so the page's hover and pseudo-element states are declared here. */
.ghx-notch::before,
.ghx-notch::after {
  content: '';
  position: absolute;
  top: 0;
  width: 34px;
  height: 1px;
  background: rgba(238, 173, 69, .45);
}
.ghx-notch::before { left: -1px; }
.ghx-notch::after  { right: -1px; }

.ghx-gold:hover {
  background: #D9962F;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(244, 202, 134, .34);
}
.ghx-ghost:hover {
  border-color: var(--gh-gold, #EEAD45);
  background: rgba(255, 255, 255, .08);
}
.ghx-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 56px rgba(23, 43, 41, .15);
}
@media (prefers-reduced-motion: reduce) {
  .ghx-gold:hover, .ghx-lift:hover { transform: none; }
}
.ghx-ghost-ink:hover { background: #2E5753; color: #ffffff; }

/* ---------------------------------------------------------------------------
   S7b Film — the vertical player on Home.
   Layout and hover live here rather than inline: DNA section 4 says new content
   writes real CSS, and the frame needs pseudo-elements (the corner marks) that
   an inline style cannot carry. Radii stay 999/6/12, easing stays the house
   curve, and the gold only ever sits on teal-700 or darker.
--------------------------------------------------------------------------- */
.ghfilm-grid {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 84px);
  align-items: center;
}
.ghfilm-stage { position: relative; justify-self: center; }

/* The offset gold hairline behind the picture — depth without a second border. */
.ghfilm-stage::before {
  content: '';
  position: absolute;
  left: 18px; top: 18px; right: -18px; bottom: -18px;
  border: 1px solid rgba(238, 173, 69, .42);
  border-radius: 12px;
  pointer-events: none;
}
.ghfilm-box {
  position: relative;
  width: clamp(258px, 30vw, 376px);
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: #0F1F1E;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .46);
  isolation: isolate;
}
.ghfilm-box video, .ghfilm-box img.ghfilm-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Four framing marks, the way a viewfinder crops a shot. */
.ghfilm-mark {
  position: absolute;
  width: 26px; height: 26px;
  border: 1px solid var(--gh-gold, #EEAD45);
  opacity: .85;
  pointer-events: none;
}
.ghfilm-mark.tl { left: -13px; top: -13px; border-right: 0; border-bottom: 0; }
.ghfilm-mark.tr { right: -13px; top: -13px; border-left: 0; border-bottom: 0; }
.ghfilm-mark.bl { left: -13px; bottom: -13px; border-right: 0; border-top: 0; }
.ghfilm-mark.br { right: -13px; bottom: -13px; border-left: 0; border-top: 0; }

.ghfilm-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 31, 30, .10) 0%, rgba(15, 31, 30, 0) 34%, rgba(15, 31, 30, .58) 100%);
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.ghfilm-box[data-playing="1"] .ghfilm-scrim { opacity: .35; }

/* Centre play control */
.ghfilm-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border: 0; border-radius: 999px;
  background: var(--gh-gold, #EEAD45);
  color: #1C2028;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 40px rgba(23, 43, 41, .44);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, opacity .35s ease;
}
.ghfilm-play:hover { background: var(--gh-gold-600, #D9962F); transform: translate(-50%, -50%) scale(1.06); }
.ghfilm-play::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 2px solid var(--gh-gold, #EEAD45);
  animation: ghPulse 2.8s ease-out infinite;
  pointer-events: none;
}
.ghfilm-box[data-playing="1"] .ghfilm-play { opacity: 0; pointer-events: none; }
.ghfilm-box[data-playing="1"] .ghfilm-play::after { animation: none; }

/* Bottom control bar — visible while playing, and on hover or keyboard focus. */
.ghfilm-bar {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(15, 31, 30, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .14);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.ghfilm-box[data-playing="1"] .ghfilm-bar,
.ghfilm-box:hover .ghfilm-bar,
.ghfilm-box:focus-within .ghfilm-bar { opacity: 1; transform: translateY(0); }
.ghfilm-btn {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .3s ease, background-color .3s ease;
}
.ghfilm-btn:hover { color: var(--gh-gold, #EEAD45); background: rgba(255, 255, 255, .10); }
.ghfilm-track {
  flex: 1 1 auto;
  height: 22px;
  border: 0; padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center;
}
.ghfilm-rail {
  width: 100%; height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .26);
  overflow: hidden;
}
.ghfilm-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: var(--gh-gold, #EEAD45);
}
.ghfilm-time {
  flex: 0 0 auto;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .82);
  font-variant-numeric: tabular-nums;
}

/* Right column */
.ghfilm-meta { display: flex; flex-direction: column; gap: 14px; margin: 0 0 clamp(26px, 3vw, 36px); }
.ghfilm-meta li { display: flex; align-items: center; gap: 13px; list-style: none; }
.ghfilm-meta svg { flex: 0 0 auto; color: var(--gh-gold, #EEAD45); }

@media (max-width: 980px) {
  .ghfilm-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 6vw, 52px); justify-items: center; }
  .ghfilm-copy { text-align: center; max-width: 620px; }
  .ghfilm-meta li { justify-content: center; }
  .ghfilm-actions { justify-content: center; }
}
@media (max-width: 559px) {
  .ghfilm-box { width: min(78vw, 300px); }
  .ghfilm-stage::before { left: 12px; top: 12px; right: -12px; bottom: -12px; }
  .ghfilm-play { width: 66px; height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .ghfilm-play, .ghfilm-play:hover { transition: none; transform: translate(-50%, -50%); }
  .ghfilm-play::after { animation: none; }
  .ghfilm-bar, .ghfilm-scrim { transition: none; }
}

/* ---------------------------------------------------------------------------
   T2 Leadership — the team cards on /our-team.
   Three fixed people, so the grid pins its track count (geometry rule 4) and
   drops straight from 3 to 1: two columns would leave a permanent orphan.
   The photograph is never scaled on hover — every source is 3:4 shown full
   frame, and a zoom would start cropping the person out of it.
--------------------------------------------------------------------------- */
.ghteam-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
/* The reveal animation owns the cell's transform; the card owns the hover's.
   They must not be the same element — an inline transform from the reveal
   beats any :hover rule in this file. */
.ghteam-cell { display: flex; min-width: 0; }
.ghteam-cell > .ghteam-card { width: 100%; }

.ghteam-card {
  background: #fff;
  border: 1px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(23, 43, 41, .08);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1),
              box-shadow .5s cubic-bezier(.22, 1, .36, 1),
              border-color .4s ease;
}
.ghteam-media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #DFECEB;
  overflow: hidden;
}
.ghteam-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.88) contrast(1.02);
  transition: filter .55s cubic-bezier(.22, 1, .36, 1);
}
/* Teal wash that lifts on hover, so the portrait comes up in colour. */
.ghteam-tone {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33, 63, 60, .10) 0%, rgba(33, 63, 60, .16) 55%, rgba(23, 43, 41, .42) 100%);
  transition: opacity .5s ease;
  pointer-events: none;
}
/* Gold hairline that insets itself as the card is entered. */
.ghteam-frame {
  position: absolute; inset: 14px;
  border: 1px solid rgba(238, 173, 69, .8);
  border-radius: 6px;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.ghteam-body { padding: 22px; }
.ghteam-name {
  font-family: 'El Messiri', serif;
  font-weight: 600; font-size: 21px; line-height: 1.2;
  color: #1C2028; margin: 0 0 6px;
  transition: color .35s ease;
}
.ghteam-role {
  font-family: 'Jost', sans-serif;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: #2E5753; margin-bottom: 12px;
}
.ghteam-line {
  font-family: 'Jost', sans-serif;
  font-size: 15px; line-height: 1.6;
  color: #4D5158; margin: 0 0 16px;
}
.ghteam-act {
  position: relative; display: inline-block;
  cursor: pointer; background: transparent; border: 0;
  padding: 0 0 8px; text-decoration: none;
  font-family: 'Jost', sans-serif; font-weight: 500;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: #2E5753;
}
.ghteam-sweep {
  position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--gh-gold, #EEAD45);
  transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .ghteam-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 34px 70px rgba(23, 43, 41, .18);
    border-color: rgba(238, 173, 69, .45);
  }
  .ghteam-card:hover .ghteam-media img { filter: saturate(1.04) contrast(1.04); }
  .ghteam-card:hover .ghteam-frame { opacity: 1; transform: scale(1); }
  .ghteam-card:hover .ghteam-name { color: #2E5753; }
}
/* Keyboard users get the same treatment. */
.ghteam-card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 34px 70px rgba(23, 43, 41, .18);
  border-color: rgba(238, 173, 69, .45);
}
.ghteam-card:focus-within .ghteam-frame { opacity: 1; transform: scale(1); }

@media (max-width: 860px) {
  .ghteam-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; justify-items: center; }
  .ghteam-cell { width: 100%; max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .ghteam-card, .ghteam-card:hover, .ghteam-card:focus-within { transform: none; transition: none; }
  .ghteam-media img, .ghteam-tone, .ghteam-frame, .ghteam-sweep { transition: none; }
}

/* ---------------------------------------------------------------------------
   S2c Facebook film — the wide 16:9 stage under the overview block.
   Its language is deliberately NOT S7b's: that frame is a vertical viewfinder
   with corner marks, this one is a lit stage — a glow behind the panel and two
   long gold rules running past opposite corners. Same palette, different idea.
--------------------------------------------------------------------------- */
.ghfb-head { max-width: 700px; margin: 0 auto clamp(34px, 4vw, 52px); text-align: center; }
.ghfb-stage { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; }

/* Light behind the panel. Sits under everything and never takes a click. */
.ghfb-glow {
  position: absolute; left: -6%; right: -6%; top: -10%; bottom: -14%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(238, 173, 69, .20) 0%, rgba(238, 173, 69, 0) 62%),
    radial-gradient(ellipse at 50% 60%, rgba(143, 188, 184, .16) 0%, rgba(143, 188, 184, 0) 70%);
  filter: blur(6px);
  pointer-events: none;
}
/* Two long rules running past opposite corners. */
.ghfb-rule { position: absolute; background: rgba(238, 173, 69, .55); pointer-events: none; }
.ghfb-rule.t { left: -26px; top: -16px; width: 46%; height: 1px; }
.ghfb-rule.tv { left: -26px; top: -16px; width: 1px; height: 84px; }
.ghfb-rule.b { right: -26px; bottom: -16px; width: 46%; height: 1px; }
.ghfb-rule.bv { right: -26px; bottom: -16px; width: 1px; height: 84px; }

.ghfb-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #0F1F1E;
  border: 1px solid rgba(238, 173, 69, .38);
  box-shadow: 0 46px 100px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}
/* The plugin builds its own iframe; make whatever it produces fill the panel. */
.ghfb-frame .fb-video,
.ghfb-frame .fb-video > span,
.ghfb-frame iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
.ghfb-note {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px; text-align: center;
  font-family: 'Jost', sans-serif; font-size: 15px; line-height: 1.6;
  color: #B9D4D1;
}
.ghfb-frame[data-ready="1"] .ghfb-note { display: none; }

.ghfb-chip {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 18px; padding: 8px 16px;
  border: 1px solid rgba(238, 173, 69, .45);
  border-radius: 999px;
  font-family: 'Jost', sans-serif; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gh-gold-script, #DFAF56);
}
.ghfb-chip svg { flex: 0 0 auto; }

.ghfb-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; margin-top: clamp(22px, 2.6vw, 30px);
}
.ghfb-sound {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 12px 24px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--gh-gold, #EEAD45); color: #1C2028;
  font-family: 'El Messiri', serif; font-weight: 600; font-size: 16px;
  transition: background-color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.ghfb-sound:hover { background: var(--gh-gold-600, #D9962F); transform: translateY(-2px); }
/* Once sound is on the button steps back — it is no longer the thing to do. */
.ghfb-sound[data-on="1"] {
  background: transparent; color: #B9D4D1;
  border: 1px solid rgba(255, 255, 255, .3);
}
.ghfb-sound[data-on="1"]:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ghfb-open {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  color: #fff; text-decoration: none;
  font-family: 'El Messiri', serif; font-weight: 600; font-size: 16px;
  transition: border-color .3s ease, background-color .3s ease;
}
.ghfb-open:hover { border-color: var(--gh-gold, #EEAD45); background: rgba(255, 255, 255, .08); }

@media (max-width: 700px) {
  .ghfb-rule.t, .ghfb-rule.b { width: 38%; }
  .ghfb-rule.t, .ghfb-rule.tv { left: -14px; top: -10px; }
  .ghfb-rule.b, .ghfb-rule.bv { right: -14px; bottom: -10px; }
  .ghfb-rule.tv, .ghfb-rule.bv { height: 56px; }
  .ghfb-bar > * { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ghfb-sound, .ghfb-sound:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------------------------------
   S11 Approval — the CDA building-plan letter.
   The only section on the site built entirely from verified facts, so it is
   designed to look like evidence rather than marketing: the document is shown
   whole in a plain frame, and the figures sit beside it as a plain register.
--------------------------------------------------------------------------- */
.ghapp-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
.ghapp-doc { position: relative; }
/* Offset gold hairline behind the sheet, so it reads as a document on a desk. */
.ghapp-doc::before {
  content: '';
  position: absolute;
  left: 16px; top: 16px; right: -16px; bottom: -16px;
  border: 1px solid rgba(238, 173, 69, .5);
  border-radius: 12px;
  pointer-events: none;
}
.ghapp-sheet {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #2E5753;
  box-shadow: 0 30px 70px rgba(23, 43, 41, .22);
}
.ghapp-sheet img {
  width: 100%; height: 100%;
  object-fit: contain;      /* the client's creative, shown whole */
  display: block;
}
/* A stamp sitting on the corner of the sheet. */
.ghapp-stamp {
  position: absolute;
  right: -10px; bottom: -10px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--gh-gold, #EEAD45);
  color: #1C2028;
  font-family: 'El Messiri', serif; font-weight: 600; font-size: 15px;
  box-shadow: 0 16px 40px rgba(23, 43, 41, .26);
}

.ghapp-facts { list-style: none; margin: clamp(24px, 3vw, 34px) 0 0; padding: 0; }
.ghapp-facts li {
  display: grid;
  grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: 8px 18px;
  padding: 13px 0;
  border-top: 1px solid rgba(46, 87, 83, .18);
}
.ghapp-facts li:last-child { border-bottom: 1px solid rgba(46, 87, 83, .18); }
.ghapp-k {
  font-family: 'Jost', sans-serif; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; color: #2E5753;
  padding-top: 3px;
}
.ghapp-v {
  font-family: 'Jost', sans-serif; font-size: 16px; line-height: 1.55; color: #1C2028;
  min-width: 0; overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .ghapp-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 7vw, 56px); }
  .ghapp-doc { max-width: 460px; margin: 0 auto; width: 100%; }
  .ghapp-facts li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 420px) {
  .ghapp-stamp { right: 0; bottom: -8px; font-size: 14px; padding: 10px 15px; }
}

/* ---------------------------------------------------------------------------
   Mobile hit areas (WCAG 2.5.8 — 44px comfortable target).
   Measured across all 19 routes at 320/360/390/414: the drawer navigation and
   the footer link columns were 23px tall, breadcrumbs 19px, the standalone
   "→" calls to action 18-27px, the hero slide bars 2px and the review dots 9px.

   !important throughout because nearly every element here carries an inline
   style from the artboard slice, and an inline padding beats a stylesheet rule.

   Links sitting INSIDE a sentence are deliberately left alone — "privacy
   policy", "amenities page", "layouts side by side", the footer credit. WCAG
   2.5.8 exempts inline links, and growing them would wreck the line height.
--------------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Primary navigation: the drawer, and the footer link columns. */
  [data-gh="drawer"] a,
  footer [data-flist] a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Breadcrumbs above every page hero. */
  [data-gh="header"] a,
  [data-gh="herocopy"] a,
  [data-gh="hero"] > div a[href$=".php"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Standalone calls to action — the "→" links and the record-card actions.
     .ghx-tap is applied in the markup to links whose entire text IS the call to
     action, which is what makes growing them safe. */
  .ghx-tap,
  [data-msg],
  .ghteam-act,
  [data-gh="approvals"] a,
  [data-gh="approv"] a,
  [data-gh="fbnote"] a,
  [data-goto],
  .ghx45, .ghx61, .ghx92, .ghx146 {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  /* the gold underline on .ghteam-act is drawn at the element's bottom edge,
     so the extra padding must not push it away from the text */
  .ghteam-act { padding-bottom: 10px !important; }

  /* Floating controls: 42px measured, two short of comfortable. */
  .ghx10, .ghx11, .ghx66, .ghx67,
  [data-gh="totop"], [data-gh="whatsapp"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Consent checkbox. Its wrapping <label> is the real target, so the box only
     needs to be visible enough to aim at. */
  [data-gh="form"] input[type="checkbox"],
  [data-gh="subform"] input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
  }
  [data-gh="form"] label:has(input[type="checkbox"]),
  [data-gh="subform"] label:has(input[type="checkbox"]) { min-height: 44px; }

  /* The film scrubber: a 22px rail is hard to hit while a video is playing. */
  .ghfilm-track { min-height: 40px !important; }

  /* Standalone tel:/mailto: links that are not inside a sentence. */
  .ghx-tap[href^="tel:"], .ghx-tap[href^="mailto:"] { min-height: 44px !important; }
}

/* Two controls are deliberately tiny as VISUALS — a 2px progress bar and a 9px
   dot. Growing them would wreck the design, so the hit area is expanded with a
   transparent overlay instead and the visual is left exactly as drawn. */
[data-slide-to],
[data-gh="reviewdots"] button {
  position: relative;
}
[data-slide-to]::after,
[data-gh="reviewdots"] button::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
[data-gh="reviewdots"] button::after { left: -8px; right: -8px; }

/* ---------------------------------------------------------------------------
   Before / after compare, and the Gul Heights II creative on Home.
   The creative is finished artwork: it is shown WHOLE on both pages — the frame
   takes its own 1600/1473 ratio so `contain` has nothing to letterbox, and no
   hover effect is allowed to scale or crop it.
--------------------------------------------------------------------------- */
.ghba-layer img { width: 100%; height: 100%; display: block; }
.ghba-layer:not(.ghba-after) img { object-fit: cover; }
.ghba-after img { object-fit: contain; }          /* the artwork, never trimmed */

.ghba-tag {
  position: absolute; bottom: 14px; z-index: 2;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(23, 43, 41, .72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: 'Jost', sans-serif; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: #fff;
  pointer-events: none;
}
.ghba-tag-l { left: 14px; }
.ghba-tag-r { right: 14px; color: var(--gh-gold, #EEAD45); }
@media (max-width: 560px) {
  .ghba-tag { font-size: 10px; padding: 6px 10px; letter-spacing: .12em; bottom: 10px; }
  .ghba-tag-l { left: 10px; } .ghba-tag-r { right: 10px; }
}

/* ---- S3b on Home: copy left, the creative right ------------------------- */
.ghres-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
.ghres-art {
  position: relative;
  border-radius: 12px;
  /* the artwork's own ratio, so contain fills it exactly */
  aspect-ratio: 1600 / 1473;
  background: #2E5753;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(23, 43, 41, .22);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1),
              box-shadow .55s cubic-bezier(.22, 1, .36, 1);
}
.ghres-art img {
  width: 100%; height: 100%;
  object-fit: contain;        /* complete — never cropped, never stretched */
  display: block;
  transition: filter .55s cubic-bezier(.22, 1, .36, 1);
}
/* A gold hairline that draws itself in from the corners on hover, and a soft
   lift. The picture itself is deliberately not scaled — zooming would crop the
   very artwork this section exists to show whole. */
.ghres-frame {
  position: absolute; inset: 14px;
  border: 1px solid rgba(238, 173, 69, .85);
  border-radius: 6px;
  opacity: 0; transform: scale(1.03);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.ghres-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 46%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .ghres-art:hover { transform: translateY(-8px); box-shadow: 0 44px 90px rgba(23, 43, 41, .3); }
  .ghres-art:hover img { filter: saturate(1.06) contrast(1.03); }
  .ghres-art:hover .ghres-frame { opacity: 1; transform: scale(1); }
  .ghres-art:hover .ghres-sheen { transform: translateX(120%); }
}
.ghres-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(22px,2.6vw,30px) 0 0; padding: 0; list-style: none; }
.ghres-badges li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(46, 87, 83, .28);
  font-family: 'Jost', sans-serif; font-size: 14px; color: #2E5753;
}
.ghres-badges svg { color: var(--gh-gold, #EEAD45); flex: 0 0 auto; }

@media (max-width: 900px) {
  .ghres-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 6vw, 44px); }
  .ghres-art { max-width: 460px; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ghres-art, .ghres-art:hover { transform: none; transition: none; }
  .ghres-sheen { display: none; }
}

/* ---------------------------------------------------------------------------
   Mobile navigation — the header bar, the burger and the drawer.
   Built as classes so the design lives here rather than in JS string soup, and
   so a rule can be changed without touching the chrome script.
--------------------------------------------------------------------------- */

/* ---- the burger: three rules that fold into a cross ---- */
[data-gh="burger"] { position: relative; }
[data-gh="burger"] [data-gh="burger-line"] {
  transition: transform .38s cubic-bezier(.22,1,.36,1),
              opacity .22s ease, width .38s cubic-bezier(.22,1,.36,1);
  transform-origin: center;
}
[data-gh="burger"][data-open="1"] [data-gh="burger-line"]:nth-child(1) { transform: translateY(6px) rotate(45deg); width: 20px; }
[data-gh="burger"][data-open="1"] [data-gh="burger-line"]:nth-child(2) { opacity: 0; transform: scaleX(.2); }
[data-gh="burger"][data-open="1"] [data-gh="burger-line"]:nth-child(3) { transform: translateY(-6px) rotate(-45deg); width: 20px; }

/* ---- the drawer ---- */
.ghnav-drawer {
  background: linear-gradient(165deg, #23423F 0%, #1A312F 46%, #142523 100%) !important;
}
.ghnav-head { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.ghnav-logo { width: 132px; height: 50px; object-fit: contain; object-position: left center; }
.ghnav-close {
  width: 46px; height: 46px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26); background: rgba(255,255,255,.05);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.ghnav-close:hover { background: rgba(255,255,255,.12); border-color: var(--gh-gold,#EEAD45); transform: rotate(90deg); }

.ghnav-here { display: flex; align-items: center; gap: 10px; margin: 26px 0 6px; }
.ghnav-here-k { font-family: 'Jost',sans-serif; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ghnav-here-v {
  font-family: 'Jost',sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #1C2028;
  background: var(--gh-gold,#EEAD45); border-radius: 999px; padding: 6px 13px;
}

.ghnav-list { position: relative; z-index: 2; display: flex; flex-direction: column; }

/* every row slides up in turn once the drawer opens */
.ghnav-row { opacity: 0; transform: translateY(14px); }
[data-drawer="open"] .ghnav-row,
.ghnav-drawer[data-open="1"] .ghnav-row {
  animation: ghNavIn .5s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes ghNavIn { to { opacity: 1; transform: none; } }

.ghnav-item {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 15px 0; min-height: 60px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: 'El Messiri', serif; font-weight: 400; font-size: 26px; line-height: 1.1;
  color: #fff; text-decoration: none;
  position: relative;
  transition: color .3s ease, padding-left .35s cubic-bezier(.22,1,.36,1);
}
/* a gold rule that grows from the left as the row is touched or opened */
.ghnav-item::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 2px;
  background: var(--gh-gold,#EEAD45); transform: translateY(-50%);
  transition: width .35s cubic-bezier(.22,1,.36,1);
}
.ghnav-item:hover, .ghnav-item:focus-visible,
.ghnav-item[aria-expanded="true"] { color: var(--gh-gold,#EEAD45); padding-left: 26px; }
.ghnav-item:hover::before, .ghnav-item:focus-visible::before,
.ghnav-item[aria-expanded="true"]::before { width: 16px; }
.ghnav-item[data-active="1"] { color: var(--gh-gold,#EEAD45); padding-left: 26px; }
.ghnav-item[data-active="1"]::before { width: 16px; }

.ghnav-chev { flex: 0 0 auto; color: var(--gh-gold,#EEAD45); transition: transform .38s cubic-bezier(.22,1,.36,1); }
.ghnav-item[aria-expanded="true"] .ghnav-chev { transform: rotate(180deg); }

.ghnav-panel { overflow: hidden; max-height: 0; transition: max-height .42s cubic-bezier(.22,1,.36,1); }
.ghnav-panel-in { display: flex; flex-direction: column; padding: 4px 0 14px; }
.ghnav-sub {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 10px 0 10px 26px;
  border-left: 2px solid rgba(255,255,255,.14);
  font-family: 'Jost', sans-serif; font-size: 17px; color: rgba(255,255,255,.8);
  text-decoration: none;
  transition: color .3s ease, border-color .3s ease, padding-left .3s cubic-bezier(.22,1,.36,1);
}
.ghnav-sub:hover, .ghnav-sub:focus-visible { color: #fff; border-color: var(--gh-gold,#EEAD45); padding-left: 32px; }
.ghnav-sub[data-active="1"] { color: var(--gh-gold,#EEAD45); border-color: var(--gh-gold,#EEAD45); }

/* ---- the tail: one clear action, then how to reach a person ---- */
.ghnav-foot { position: relative; z-index: 2; margin-top: 30px; }
.ghnav-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--gh-gold,#EEAD45); color: #1C2028;
  font-family: 'El Messiri', serif; font-weight: 600; font-size: 18px;
  text-decoration: none;
  box-shadow: 0 14px 34px rgba(238,173,69,.26);
  transition: background-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.ghnav-cta:hover { background: var(--gh-gold-600,#D9962F); transform: translateY(-2px); }
.ghnav-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.ghnav-contact a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22); color: #fff; text-decoration: none;
  font-family: 'Jost', sans-serif; font-size: 15px;
  transition: border-color .3s ease, background-color .3s ease;
}
.ghnav-contact a:hover { border-color: var(--gh-gold,#EEAD45); background: rgba(255,255,255,.06); }
.ghnav-contact svg { color: var(--gh-gold,#EEAD45); flex: 0 0 auto; }
.ghnav-social {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px;
  font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
}
.ghnav-social a { color: rgba(255,255,255,.55); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; transition: color .3s ease; }
.ghnav-social a:hover { color: var(--gh-gold,#EEAD45); }

/* The Whisper watermark shipped at .13 alpha and 150px, which reads straight
   through the link text. Pushed back and down so it stays a texture. */
.ghnav-drawer > div:first-child {
  color: rgba(238, 173, 69, .055) !important;
  font-size: 108px !important;
  right: -14% !important;
  bottom: 2% !important;
}
.ghnav-social { gap: 6px 14px; font-size: 11px; letter-spacing: .14em; }

@media (max-width: 360px) {
  .ghnav-item { font-size: 23px; min-height: 54px; }
  .ghnav-contact { grid-template-columns: 1fr; }
  .ghnav-social { font-size: 10px; letter-spacing: .1em; gap: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ghnav-row { opacity: 1; transform: none; animation: none !important; }
  .ghnav-item, .ghnav-sub, .ghnav-close, .ghnav-cta { transition: none; }
}

/* ---- the mobile header bar ---------------------------------------------
   The burger shipped as a thin grey outline that disappeared against both the
   dark hero and the white scrolled state. It becomes a gold-ringed control with
   gold rules — the one thing on the bar besides the logo, so it should look
   like the way in.
------------------------------------------------------------------------- */
@media (max-width: 1179px) {
  [data-gh="burger"] {
    width: 48px !important; height: 48px !important;
    border: 1.5px solid rgba(238, 173, 69, .75) !important;
    border-radius: 10px !important;
    background: rgba(238, 173, 69, .10) !important;
    gap: 5px !important;
    transition: background-color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
  }
  [data-gh="burger"]:hover,
  [data-gh="burger"]:focus-visible { background: rgba(238, 173, 69, .2) !important; transform: translateY(-1px); }
  [data-gh="burger"][data-open="1"] { background: var(--gh-gold, #EEAD45) !important; border-color: var(--gh-gold, #EEAD45) !important; }
  [data-gh="burger"] [data-gh="burger-line"] {
    background: var(--gh-gold, #EEAD45) !important;
    height: 2px !important; border-radius: 2px;
  }
  [data-gh="burger"][data-open="1"] [data-gh="burger-line"] { background: #1C2028 !important; }

  /* the logo is the other half of the bar; give it room to read */
  [data-gh="header"] img[src*="gh-logo"],
  [data-gh="header"] img[src*="gh-mark"] { min-width: 104px; }
}


/* ---------------------------------------------------------------------------
   Floating controls — split to opposite corners.
   Back-to-top and WhatsApp were stacked in the same right-hand column, close
   enough to hit the wrong one, and on a phone they sat on top of the sticky
   Call / Register bar. Back-to-top moves to the left, WhatsApp stays right.
--------------------------------------------------------------------------- */
[data-gh="floaters"] {
  right: auto !important; left: 0 !important;
  width: 100% !important;
  display: flex !important; flex-direction: row !important;
  justify-content: space-between !important; align-items: flex-end !important;
  padding: 0 18px !important;
  box-sizing: border-box !important;
  pointer-events: none !important;   /* only the buttons themselves take a tap */
}
[data-gh="floaters"] > * { pointer-events: auto; }
/* back to top first in the DOM, so it lands on the left */
[data-gh="floaters"] [data-gh="totop"] { order: 0; }
[data-gh="floaters"] [data-gh="whatsapp"] { order: 1; }

/* The chrome script nudges each button's own `bottom` to clear the sticky bar.
   Inside the row that would lift one above the other, so the offset moves to
   the wrapper and the buttons sit level. --gh-bar-reserve is set by gh-nav.js
   and is 0 when the sticky bar is not showing. */
[data-gh="floaters"] { bottom: calc(22px + var(--gh-bar-reserve, 0px)) !important; }
[data-gh="floaters"] > * { bottom: auto !important; top: auto !important; position: relative !important; }

/* The chrome script also injects a pair on pages without the markup above. */
body > [data-gh="totop"] { left: 18px !important; right: auto !important; }
body > [data-gh="whatsapp"] { right: 18px !important; left: auto !important; }

/* ---- the burger must survive whatever else sits in the header ------------
   The header row is logo | nav | [phone pill · Register · burger], and the
   actions cluster is flex:0 0 auto, so it never shrinks: it simply overflows
   to the right and takes the burger — the last child — off the screen with it.
   Four pages hid the pill below 1240px from their own page script; gul-skyline
   never had that script, so there the pill stayed at every width and pushed the
   burger 45px past the right edge of a 375px phone.

   Making that a stylesheet rule rather than page JS is the point: the burger
   can no longer depend on each page remembering to clear a path for it. The
   declarations are !important because the page scripts write display straight
   onto the element, and an inline style beats a plain rule.
------------------------------------------------------------------------- */
@media (max-width: 1239px) {
  [data-gh="phone-pill"] { display: none !important; }
}
@media (max-width: 1179px) {
  /* Below the burger breakpoint the burger IS the navigation; nothing else
     belongs in the cluster, so nothing else can crowd it out. */
  [data-gh="header-actions"] > *:not([data-gh="burger"]) { display: none !important; }
  [data-gh="header-actions"] {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    gap: 0 !important;
  }
  /* Last line of defence: the row may not overflow, whatever it holds. */
  [data-gh="header"] > div { overflow: visible; min-width: 0; }
  [data-gh="header"] [data-gh="nav"] { flex: 0 1 auto !important; min-width: 0 !important; }
}