/* ==========================================================================
   GROWLAND MARKETING — base, layout and components
   Depends on brand.css for tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  font-family: var(--gl-font);
  font-size: var(--gl-fs-body);
  line-height: var(--gl-lh-body);
  letter-spacing: var(--gl-track-body);
  color: var(--gl-text);
  background: var(--gl-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(242, 107, 33, .18);
}

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

input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }

/* Headings inherit the brand's tight tracking and never orphan a word */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: var(--gl-lh-heading);
  letter-spacing: var(--gl-track-heading);
  text-wrap: balance;
}
p, li { text-wrap: pretty; }

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

/* Accessible focus, everywhere, without exception */
:focus-visible {
  outline: 2px solid var(--gl-primary);
  outline-offset: 3px;
  border-radius: var(--gl-r-sm);
}
.gl-dark :focus-visible { outline-color: var(--gl-ember-400); }

::selection { background: var(--gl-orange-500); color: #fff; }

/* Anchored headings clear the sticky header */
[id] { scroll-margin-top: calc(var(--gl-header-h) + 24px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */
.gl-container {
  width: 100%;
  max-width: var(--gl-container);
  margin-inline: auto;
  padding-inline: var(--gl-gutter);
}
.gl-container--wide { max-width: var(--gl-container-wide); }
.gl-container--narrow { max-width: 820px; }

.gl-section { padding-block: var(--gl-section-y); }
.gl-section--sm { padding-block: var(--gl-section-y-sm); }
.gl-section--flush-top { padding-top: 0; }
.gl-section--tint { background: var(--gl-bg-subtle); }
.gl-section--ink { background: var(--gl-ink-900); color: #fff; }

.gl-stack > * + * { margin-top: var(--gl-sp-4); }
.gl-grid { display: grid; gap: var(--gl-sp-6); }
.gl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gl-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--gl-z-modal);
  padding: var(--gl-sp-3) var(--gl-sp-5);
  background: var(--gl-ink-900);
  color: #fff;
  border-radius: 0 0 var(--gl-r-md) 0;
  font-weight: 600;
}
.gl-skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   3. Typography components
   -------------------------------------------------------------------------- */
.gl-display {
  font-size: var(--gl-fs-display);
  line-height: var(--gl-lh-display);
  letter-spacing: var(--gl-track-display);
  font-weight: 600;
}
.gl-h1 { font-size: var(--gl-fs-h1); letter-spacing: var(--gl-track-display); }
.gl-h2 { font-size: var(--gl-fs-h2); letter-spacing: var(--gl-track-display); }
.gl-h3 { font-size: var(--gl-fs-h3); }
.gl-h4 { font-size: var(--gl-fs-h4); }

.gl-lead {
  font-size: var(--gl-fs-lead);
  color: var(--gl-text-muted);
  line-height: 1.6;
}

/* The eyebrow/kicker — the one place the accent colour leads */
.gl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gl-sp-2);
  font-size: var(--gl-fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--gl-track-eyebrow);
  text-transform: uppercase;
  color: var(--gl-primary);
}
.gl-eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
  flex: none;
}
.gl-eyebrow--center::after {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
  flex: none;
}

.gl-section-head { max-width: 760px; margin-bottom: var(--gl-sp-12); }
.gl-section-head > * + * { margin-top: var(--gl-sp-4); }
.gl-section-head--center { margin-inline: auto; text-align: center; }
.gl-section-head--center .gl-eyebrow { justify-content: center; }

.gl-muted { color: var(--gl-text-muted); }
.gl-nums { font-variant-numeric: tabular-nums; }
.gl-balance { text-wrap: balance; }
.gl-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gl-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.gl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gl-sp-2);
  padding: .875rem 1.625rem;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--gl-r-pill);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  text-align: center;
  transition: background-color var(--gl-dur) var(--gl-ease),
              border-color var(--gl-dur) var(--gl-ease),
              color var(--gl-dur) var(--gl-ease),
              transform var(--gl-dur-fast) var(--gl-ease),
              box-shadow var(--gl-dur) var(--gl-ease);
}
.gl-btn:hover { transform: translateY(-2px); }
.gl-btn:active { transform: translateY(0); }
.gl-btn[disabled], .gl-btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; transform: none;
}

.gl-btn--primary {
  background: var(--gl-primary);
  color: #fff;
  box-shadow: var(--gl-shadow-primary);
}
.gl-btn--primary:hover { background: var(--gl-primary-hover); }
.gl-btn--primary:active { background: var(--gl-primary-press); }

.gl-btn--ink { background: var(--gl-ink-900); color: #fff; }
.gl-btn--ink:hover { background: var(--gl-ink-700); }

.gl-btn--outline {
  background: transparent;
  border-color: var(--gl-border-strong);
  color: var(--gl-text);
}
.gl-btn--outline:hover { border-color: var(--gl-ink-900); background: var(--gl-ink-50); }

.gl-btn--ghost-light {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  backdrop-filter: blur(8px);
}
.gl-btn--ghost-light:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }

/* Azaadi campaign CTA. Carries more copy than a normal button, so unlike the
   others it is allowed to wrap rather than being forced onto one line. */
.gl-btn--azaadi {
  background: var(--gl-azaadi-500);
  color: #fff;
  box-shadow: var(--gl-shadow-azaadi);
  flex-wrap: wrap;
  text-align: left;
  max-width: 100%;
}
.gl-btn--azaadi:hover { background: var(--gl-azaadi-600); }
.gl-btn--azaadi:active { background: var(--gl-azaadi-700); }

/* Slow sideways sway to draw the eye to the campaign offer. Deliberately gentle
   — it sits directly under the headline, and anything faster reads as a broken
   layout rather than an invitation. Transform only, so it composites on the GPU
   and never triggers layout. */
@keyframes gl-sway-x {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(12px); }
}
.gl-btn--azaadi {
  animation: gl-sway-x 1.5s ease-in-out infinite;
  /* The sway is decorative; without this the moving edge would drag the whole
     hero's paint area with it on some browsers. */
  will-change: transform;
}
/* Stop the moment someone goes to click it. Chasing a moving target is the
   fastest way to make a CTA annoying, and it also keeps the pointer steady for
   anyone with a motor impairment. */
.gl-btn--azaadi:hover,
.gl-btn--azaadi:focus-visible {
  animation-play-state: paused;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  /* Matches how the rest of the site treats motion — the hero film is skipped
     entirely under the same query. */
  .gl-btn--azaadi { animation: none; }
}
/* "Azaadi Offer" leads, so it is set apart from the description that follows. */
.gl-btn--azaadi .gl-btn__flag {
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* The shared .gl-btn__arrow nudges right on hover; here it is a separator
   between the label and the description, so it stays put. */
.gl-btn--azaadi .gl-btn__arrow { flex: none; }
.gl-btn--azaadi:hover .gl-btn__arrow { transform: none; }
@media (max-width: 560px) {
  /* Stack label above description rather than letting the arrow strand a
     single word on its own line. */
  .gl-btn--azaadi { flex-direction: column; align-items: flex-start; gap: var(--gl-sp-1); }
  .gl-btn--azaadi .gl-btn__arrow { display: none; }
}

.gl-btn--sm { padding: .5rem 1rem; min-height: 40px; font-size: .875rem; }
.gl-btn--lg { padding: 1.0625rem 2.125rem; min-height: 56px; font-size: 1rem; }
.gl-btn--block { display: flex; width: 100%; }

.gl-btn-row { display: flex; flex-wrap: wrap; gap: var(--gl-sp-3); }

/* Arrow that travels on hover — transform only, so it stays compositor-friendly */
.gl-btn__arrow { transition: transform var(--gl-dur) var(--gl-ease); }
.gl-btn:hover .gl-btn__arrow { transform: translateX(4px); }

/* Text link with an animated rule */
.gl-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gl-sp-2);
  font-weight: 700;
  color: var(--gl-primary);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--gl-dur) var(--gl-ease);
}
.gl-link:hover { background-size: 100% 2px; }

/* --------------------------------------------------------------------------
   5. Badges & pills
   -------------------------------------------------------------------------- */
.gl-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--gl-sp-1);
  padding: .3125rem .6875rem;
  border-radius: var(--gl-r-pill);
  font-size: var(--gl-fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Defensive: a badge is a pill, so an unexpectedly long value must truncate
     rather than push the layout past the viewport. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gl-badge--available { background: var(--gl-available-bg); color: var(--gl-available); }
.gl-badge--reserved  { background: var(--gl-reserved-bg);  color: var(--gl-reserved); }
.gl-badge--sold      { background: var(--gl-sold-bg);      color: var(--gl-sold); }
.gl-badge--info      { background: var(--gl-info-bg);      color: var(--gl-info); }
.gl-badge--primary   { background: var(--gl-orange-50);    color: var(--gl-orange-700); }
.gl-badge--ink       { background: var(--gl-ink-900);      color: #fff; }
.gl-badge--glass {
  background: rgba(10, 10, 12, .62);
  color: #fff;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16);
}

.gl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gl-sp-2);
  padding: .5rem .875rem;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-r-pill);
  background: var(--gl-bg);
  font-size: var(--gl-fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--gl-dur) var(--gl-ease),
              background-color var(--gl-dur) var(--gl-ease),
              color var(--gl-dur) var(--gl-ease);
}
.gl-chip:hover { border-color: var(--gl-primary); color: var(--gl-primary); }
.gl-chip--active, .gl-chip[aria-pressed="true"] {
  background: var(--gl-ink-900); border-color: var(--gl-ink-900); color: #fff;
}
.gl-chip--active:hover { color: #fff; }

/* --------------------------------------------------------------------------
   6. Cards
   -------------------------------------------------------------------------- */
.gl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-r-lg);
  overflow: hidden;
  transition: border-color var(--gl-dur) var(--gl-ease),
              box-shadow var(--gl-dur) var(--gl-ease),
              transform var(--gl-dur) var(--gl-ease);
}
.gl-card:hover { border-color: var(--gl-border-strong); box-shadow: var(--gl-shadow-lg); transform: translateY(-4px); }

.gl-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gl-ink-100);
}
.gl-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--gl-dur-slow) var(--gl-ease);
}
.gl-card:hover .gl-card__media img { transform: scale(1.05); }
.gl-card__media-tags {
  position: absolute; inset-inline: var(--gl-sp-3); top: var(--gl-sp-3);
  display: flex; flex-wrap: wrap; gap: var(--gl-sp-2);
}
.gl-card__body { padding: var(--gl-sp-5); display: flex; flex-direction: column; flex: 1; gap: var(--gl-sp-3); }
.gl-card__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.gl-card__foot {
  margin-top: auto; padding-top: var(--gl-sp-4);
  border-top: 1px solid var(--gl-border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--gl-sp-3);
}

/* The whole card is clickable, but only the title is a real link (a11y) */
.gl-card__link::after { content: ""; position: absolute; inset: 0; }

.gl-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--gl-sp-2) var(--gl-sp-4);
  font-size: var(--gl-fs-sm); color: var(--gl-text-muted);
}
.gl-meta__item { display: inline-flex; align-items: center; gap: var(--gl-sp-2); min-width: 0; }
.gl-meta__item svg { flex: none; color: var(--gl-primary); }

.gl-price {
  font-size: 1.25rem; font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--gl-ink-900);
}
.gl-price small { font-size: .75rem; font-weight: 600; color: var(--gl-text-muted); }

/* --------------------------------------------------------------------------
   7. Specs / stats
   -------------------------------------------------------------------------- */
.gl-stats { display: grid; gap: var(--gl-sp-6); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gl-stat__value {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gl-stat__label {
  margin-top: var(--gl-sp-2);
  font-size: var(--gl-fs-sm); color: var(--gl-text-muted);
}

.gl-spec-grid {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  background: var(--gl-border);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-r-lg);
  overflow: hidden;
}
.gl-spec { background: var(--gl-bg); padding: var(--gl-sp-5); }
.gl-spec__label { font-size: var(--gl-fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--gl-text-muted); font-weight: 700; }
.gl-spec__value { margin-top: var(--gl-sp-2); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   8. Forms
   -------------------------------------------------------------------------- */
.gl-field { display: flex; flex-direction: column; gap: var(--gl-sp-2); }
.gl-label { font-size: var(--gl-fs-sm); font-weight: 700; letter-spacing: -.01em; }
.gl-label .gl-req { color: var(--gl-sold); }

.gl-input, .gl-select, .gl-textarea {
  width: 100%;
  padding: .8125rem 1rem;
  min-height: 48px;
  background: var(--gl-bg);
  border: 1px solid var(--gl-border-strong);
  border-radius: var(--gl-r-md);
  font-size: var(--gl-fs-body);
  color: var(--gl-text);
  transition: border-color var(--gl-dur) var(--gl-ease), box-shadow var(--gl-dur) var(--gl-ease);
}
.gl-input::placeholder, .gl-textarea::placeholder { color: var(--gl-ink-400); }
.gl-input:hover, .gl-select:hover, .gl-textarea:hover { border-color: var(--gl-ink-400); }
/* The native outline is replaced by a ring + border shift, never simply removed. */
.gl-input:focus, .gl-select:focus, .gl-textarea:focus {
  outline: none;
  border-color: var(--gl-primary);
  box-shadow: var(--gl-ring);
}
/* box-shadow is dropped in forced-colors mode, so restore a real outline there. */
@media (forced-colors: active) {
  .gl-input:focus, .gl-select:focus, .gl-textarea:focus {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}
.gl-textarea { min-height: 132px; resize: vertical; line-height: 1.6; }

.gl-select {
  /* Explicit colours so Windows dark mode can't render this unreadable */
  background-color: var(--gl-bg);
  color: var(--gl-text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2355555e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
}
.gl-select option { background: var(--gl-bg); color: var(--gl-text); }

.gl-input--error, .gl-select--error, .gl-textarea--error { border-color: var(--gl-sold); }
.gl-error { color: var(--gl-sold); font-size: var(--gl-fs-sm); font-weight: 600; }
.gl-help  { color: var(--gl-text-muted); font-size: var(--gl-fs-sm); }

/* Checkbox / radio — label and control share one hit target */
.gl-check {
  display: flex; align-items: flex-start; gap: var(--gl-sp-3);
  padding: var(--gl-sp-2) 0;
  cursor: pointer;
  font-size: var(--gl-fs-sm);
}
.gl-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--gl-primary); flex: none; cursor: pointer; }

.gl-alert {
  display: flex; gap: var(--gl-sp-3);
  padding: var(--gl-sp-4) var(--gl-sp-5);
  border-radius: var(--gl-r-md);
  font-size: var(--gl-fs-sm);
  font-weight: 600;
  border: 1px solid transparent;
}
.gl-alert--success { background: var(--gl-available-bg); color: #05603a; border-color: #a6f4c5; }
.gl-alert--error   { background: var(--gl-sold-bg);      color: #912018; border-color: #fecdca; }
.gl-alert svg { flex: none; }

/* --------------------------------------------------------------------------
   9. Header & navigation
   -------------------------------------------------------------------------- */
.gl-header {
  position: sticky; top: 0;
  z-index: var(--gl-z-header);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--gl-border);
  transition: background-color var(--gl-dur) var(--gl-ease), box-shadow var(--gl-dur) var(--gl-ease);
}
.gl-header--scrolled { box-shadow: var(--gl-shadow-sm); }

/* Transparent over a hero, until scrolled */
.gl-header--overlay {
  position: fixed; inset-inline: 0; top: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.gl-header--overlay .gl-nav__link,
.gl-header--overlay .gl-header__tel { color: #fff; }
.gl-header--overlay .gl-burger span { background: #fff; }
.gl-header--overlay.gl-header--scrolled {
  background: rgba(10, 10, 12, .92);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: rgba(255, 255, 255, .1);
}

.gl-header__bar {
  display: flex; align-items: center; gap: var(--gl-sp-6);
  height: var(--gl-header-h);
}
.gl-header__brand { display: inline-flex; align-items: center; gap: var(--gl-sp-3); flex: none; min-width: 0; }
.gl-header__spacer { flex: 1; }
.gl-header__actions { display: flex; align-items: center; gap: var(--gl-sp-3); flex: none; }
.gl-header__cta-short { display: none; }
.gl-header__tel { display: inline-flex; align-items: center; gap: var(--gl-sp-2); font-weight: 700; font-size: .9375rem; white-space: nowrap; }

.gl-logo { display: inline-flex; align-items: center; gap: .625rem; }
.gl-logo__mark { width: 42px; height: 42px; flex: none; }
.gl-logo__text { display: flex; flex-direction: column; line-height: 1; }
.gl-logo__name {
  font-size: 1.0625rem; font-weight: 800; letter-spacing: .01em;
  color: var(--gl-text);
}
.gl-logo__sub {
  font-size: .5625rem; font-weight: 800; letter-spacing: .3em;
  color: var(--gl-primary); margin-top: 3px;
}
.gl-header--overlay:not(.gl-header--scrolled) .gl-logo__name { color: #fff; }
.gl-logo--inverse .gl-logo__name { color: #fff; }

.gl-nav { display: flex; align-items: center; gap: var(--gl-sp-1); }
.gl-nav__item { position: relative; }
.gl-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .625rem .75rem;
  border-radius: var(--gl-r-md);
  font-size: .9375rem; font-weight: 600;
  color: var(--gl-text);
  white-space: nowrap;
  transition: color var(--gl-dur) var(--gl-ease), background-color var(--gl-dur) var(--gl-ease);
}
.gl-nav__link:hover { color: var(--gl-primary); }
.gl-nav__link[aria-current="page"] { color: var(--gl-primary); }
.gl-nav__caret { transition: transform var(--gl-dur) var(--gl-ease); }
.gl-nav__item:hover .gl-nav__caret,
.gl-nav__item:focus-within .gl-nav__caret { transform: rotate(180deg); }

.gl-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 264px;
  padding: var(--gl-sp-2);
  background: #fff;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-r-lg);
  box-shadow: var(--gl-shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--gl-dur) var(--gl-ease),
              transform var(--gl-dur) var(--gl-ease),
              visibility var(--gl-dur);
}
.gl-nav__item:hover > .gl-dropdown,
.gl-nav__item:focus-within > .gl-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.gl-dropdown__link {
  display: block; padding: .625rem .75rem;
  border-radius: var(--gl-r-sm);
  font-size: .9375rem; font-weight: 600; color: var(--gl-ink-800);
  transition: background-color var(--gl-dur) var(--gl-ease), color var(--gl-dur) var(--gl-ease);
}
.gl-dropdown__link:hover { background: var(--gl-orange-50); color: var(--gl-orange-700); }
.gl-dropdown__link span { display: block; font-size: var(--gl-fs-xs); font-weight: 500; color: var(--gl-text-muted); margin-top: 2px; }

.gl-burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--gl-r-sm);
}
.gl-burger span {
  display: block; height: 2px; width: 100%;
  background: var(--gl-ink-900); border-radius: 2px;
  transition: transform var(--gl-dur) var(--gl-ease), opacity var(--gl-dur) var(--gl-ease);
}
.gl-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gl-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.gl-drawer {
  position: fixed; inset: 0;
  z-index: var(--gl-z-drawer);
  visibility: hidden;
}
.gl-drawer[data-open="true"] { visibility: visible; }
.gl-drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(5, 5, 6, .55);
  opacity: 0;
  transition: opacity var(--gl-dur) var(--gl-ease);
}
.gl-drawer[data-open="true"] .gl-drawer__scrim { opacity: 1; }
.gl-drawer__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(400px, 88vw);
  display: flex; flex-direction: column;
  background: #fff;
  overscroll-behavior: contain;
  overflow-y: auto;
  padding: var(--gl-sp-5);
  padding-bottom: calc(var(--gl-sp-8) + env(safe-area-inset-bottom));
  transform: translateX(100%);
  transition: transform var(--gl-dur) var(--gl-ease);
}
.gl-drawer[data-open="true"] .gl-drawer__panel { transform: translateX(0); }
.gl-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gl-sp-6); }
.gl-drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--gl-border); border-radius: var(--gl-r-pill);
  background: transparent; cursor: pointer;
}
.gl-drawer__close:hover { background: var(--gl-ink-50); }
.gl-drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--gl-sp-4) 0;
  border-bottom: 1px solid var(--gl-border);
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em;
}
.gl-drawer__sub {
  display: block; padding: var(--gl-sp-3) 0 var(--gl-sp-3) var(--gl-sp-4);
  border-bottom: 1px solid var(--gl-border);
  font-size: .9375rem; font-weight: 600; color: var(--gl-text-muted);
}
.gl-drawer__foot { margin-top: var(--gl-sp-8); display: grid; gap: var(--gl-sp-3); }

body[data-scroll-locked="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
.gl-hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--gl-header-h) + var(--gl-sp-16));
  padding-bottom: var(--gl-sp-16);
  background: var(--gl-ink-900);
  color: #fff;
  overflow: hidden;
}
.gl-hero__media { position: absolute; inset: 0; }
.gl-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Background film layer. Sits above the still, below the scrim, and never
   takes pointer events — the hero's buttons must stay clickable. */
.gl-hero__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms var(--gl-ease);
}
.gl-hero__video[data-playing="true"] { opacity: 1; }
.gl-hero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Overscan. YouTube paints its own chrome INSIDE the player box: the video
     title across the top, and the branding / "More videos" strip across the
     bottom. Sized to merely cover the hero, that chrome lands in view and reads
     as text burned over the film.

     The player parameters cannot be relied on to remove it — `showinfo` was
     retired by YouTube in 2018 and `modestbranding` in 2023, and `controls=0`
     is overridden because loop=1 needs playlist=, which YouTube treats as a
     real playlist and re-adds prev/next buttons for.

     So we scale the frame up and let the parent's overflow:hidden crop it. The
     chrome sits in roughly the top and bottom 14%, so 1.45 clears both with
     room to spare. Costs a little framing on a decorative background film. */
  transform: translate(-50%, -50%) scale(1.45);
  border: 0;
  /* Cover the hero at any aspect ratio: fill by width, and if that leaves the
     height short, fill by height instead (177.78vh = 16/9 of the viewport). */
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .gl-hero__video { display: none; }
}
.gl-hero__scrim { position: absolute; inset: 0; background: var(--gl-grad-scrim); }
.gl-hero__scrim--side {
  background: linear-gradient(100deg, rgba(5,5,6,.9) 0%, rgba(5,5,6,.62) 42%, rgba(5,5,6,.15) 78%);
}
.gl-hero__inner { position: relative; width: 100%; }
.gl-hero__content { max-width: 780px; }
.gl-hero__content > * + * { margin-top: var(--gl-sp-5); }
.gl-hero .gl-eyebrow { color: var(--gl-ember-500); }
/* The hero kicker runs white instead of the accent — it introduces the project
   name rather than competing with it. Must sit after the rule above: same
   specificity, so source order decides. The ::before dash inherits via
   currentColor and turns white with it. */
.gl-hero .gl-eyebrow--presents {
  color: #fff;
  /* Sized to sit just under the project headline, which runs on
     --gl-fs-display (40→75px).
     Not one of the standard tokens: --gl-fs-h2 tops out at 48px, and at that
     size "GROWLAND MARKETING PRESENTS" is ~800px of caps against a 780px
     content column, so it wrapped to two lines and ended up taller than the
     headline it was meant to introduce. Capping at 40px keeps it on one line
     on desktop while staying clearly the larger of the two supporting lines. */
  font-size: clamp(1.25rem, .85rem + 1.9vw, 2.5rem);
  font-weight: 600;
  line-height: var(--gl-lh-heading);
  /* .14em of tracking is tuned for 13px caps. Left alone at 48px it reads as
     loose gaps between letters rather than a word, so it tightens as the type
     grows. */
  letter-spacing: .035em;
  gap: var(--gl-sp-3);
  /* The base rule centres the dash against the whole block. That is right for a
     single line, but this wraps to two on narrow screens and the dash then
     floats against the gap between them. Anchor to the top and nudge the dash
     down onto the first line instead — correct at any number of lines. */
  align-items: flex-start;
}
/* The rule is a fixed 28×2px, which next to display-scale type looks like a
   stray hyphen. Sized in em so it stays in proportion at every breakpoint;
   the offset is half a line-height (1.12) less half the dash. */
.gl-hero .gl-eyebrow--presents::before {
  width: .85em;
  height: .06em;
  margin-top: .53em;
}
/* Azaadi green highlight behind the wording. box-decoration-break: clone is
   what keeps the block painted on every line once it wraps on mobile —
   without it the second line loses its padding and the shape breaks. */
.gl-hero .gl-eyebrow--presents .gl-eyebrow__mark {
  background: var(--gl-azaadi-500);
  padding: .1em .34em;
  border-radius: .1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.gl-hero__title {
  font-size: var(--gl-fs-display);
  line-height: var(--gl-lh-display);
  letter-spacing: var(--gl-track-display);
  font-weight: 600;
}
.gl-hero__lead { font-size: var(--gl-fs-lead); color: rgba(255,255,255,.78); max-width: 60ch; }

.gl-hero__strip {
  position: relative;
  margin-top: var(--gl-sp-12);
  padding-top: var(--gl-sp-8);
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid; gap: var(--gl-sp-6);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gl-hero__strip .gl-stat__label { color: rgba(255,255,255,.6); }

/* Page banner for inner pages */
.gl-banner {
  position: relative;
  padding-top: calc(var(--gl-header-h) + var(--gl-sp-12));
  padding-bottom: var(--gl-sp-12);
  background: var(--gl-ink-900);
  color: #fff;
  overflow: hidden;
}
.gl-banner__media { position: absolute; inset: 0; opacity: .38; }
.gl-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.gl-banner__inner { position: relative; }
.gl-banner__title { font-size: var(--gl-fs-h1); letter-spacing: var(--gl-track-display); font-weight: 600; margin-top: var(--gl-sp-3); }
.gl-banner__lead { margin-top: var(--gl-sp-4); color: rgba(255,255,255,.72); max-width: 68ch; font-size: var(--gl-fs-lead); }

.gl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gl-sp-2); font-size: var(--gl-fs-sm); }
.gl-crumbs a { color: rgba(255,255,255,.68); }
.gl-crumbs a:hover { color: #fff; }
.gl-crumbs [aria-current="page"] { color: var(--gl-ember-500); font-weight: 600; }
.gl-crumbs__sep { color: rgba(255,255,255,.35); }

/* --------------------------------------------------------------------------
   11. Misc components
   -------------------------------------------------------------------------- */
.gl-feature { display: flex; gap: var(--gl-sp-4); }
.gl-feature__icon {
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--gl-r-md);
  background: var(--gl-orange-50);
  color: var(--gl-primary);
}
.gl-section--ink .gl-feature__icon { background: rgba(242,107,33,.16); }
.gl-feature__title { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; }
.gl-feature__text { margin-top: var(--gl-sp-2); color: var(--gl-text-muted); font-size: var(--gl-fs-sm); }
.gl-section--ink .gl-feature__text { color: rgba(255,255,255,.64); }

.gl-amenity {
  display: flex; flex-direction: column; align-items: center; gap: var(--gl-sp-3);
  padding: var(--gl-sp-6) var(--gl-sp-4);
  text-align: center;
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-r-lg);
  background: var(--gl-bg);
  transition: border-color var(--gl-dur) var(--gl-ease), transform var(--gl-dur) var(--gl-ease), box-shadow var(--gl-dur) var(--gl-ease);
}
.gl-amenity:hover { border-color: var(--gl-primary); transform: translateY(-3px); box-shadow: var(--gl-shadow-md); }
.gl-amenity__icon { color: var(--gl-primary); }
.gl-amenity__name { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }

.gl-quote {
  display: flex; flex-direction: column; gap: var(--gl-sp-4);
  padding: var(--gl-sp-8);
  background: var(--gl-bg);
  border: 1px solid var(--gl-border);
  border-radius: var(--gl-r-lg);
  height: 100%;
}
.gl-quote__stars { display: flex; gap: 2px; color: var(--gl-ember-500); }
.gl-quote__text { font-size: 1.0625rem; line-height: 1.6; letter-spacing: -.015em; flex: 1; }
.gl-quote__who { display: flex; align-items: center; gap: var(--gl-sp-3); padding-top: var(--gl-sp-4); border-top: 1px solid var(--gl-border); }
.gl-quote__avatar {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--gl-r-pill);
  background: var(--gl-ink-900); color: #fff;
  font-weight: 800; font-size: .9375rem;
}

.gl-accordion { border-top: 1px solid var(--gl-border); }
.gl-accordion__item { border-bottom: 1px solid var(--gl-border); }
.gl-accordion__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gl-sp-4);
  width: 100%; padding: var(--gl-sp-5) 0;
  background: none; border: 0; cursor: pointer;
  text-align: left;
  font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em;
  transition: color var(--gl-dur) var(--gl-ease);
}
.gl-accordion__btn:hover { color: var(--gl-primary); }
.gl-accordion__icon { flex: none; color: var(--gl-primary); transition: transform var(--gl-dur) var(--gl-ease); }
.gl-accordion__btn[aria-expanded="true"] .gl-accordion__icon { transform: rotate(45deg); }
.gl-accordion__panel { display: none; padding-bottom: var(--gl-sp-5); color: var(--gl-text-muted); max-width: 78ch; }
.gl-accordion__panel[data-open="true"] { display: block; }

.gl-table-wrap { overflow-x: auto; border: 1px solid var(--gl-border); border-radius: var(--gl-r-lg); }
.gl-table { width: 100%; border-collapse: collapse; font-size: var(--gl-fs-sm); min-width: 560px; }
.gl-table th, .gl-table td { padding: var(--gl-sp-4) var(--gl-sp-5); text-align: left; }
.gl-table thead th {
  background: var(--gl-ink-900); color: #fff;
  font-size: var(--gl-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  white-space: nowrap;
}
.gl-table tbody tr + tr { border-top: 1px solid var(--gl-border); }
.gl-table tbody tr:hover { background: var(--gl-orange-50); }
.gl-table td { font-variant-numeric: tabular-nums; }
.gl-table td:first-child { font-weight: 700; }

.gl-empty {
  padding: var(--gl-sp-16) var(--gl-sp-6);
  text-align: center;
  border: 1px dashed var(--gl-border-strong);
  border-radius: var(--gl-r-lg);
  background: var(--gl-bg-subtle);
}
.gl-empty__icon { color: var(--gl-ink-300); margin: 0 auto var(--gl-sp-4); }
.gl-empty__title { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
.gl-empty__text { margin-top: var(--gl-sp-2); color: var(--gl-text-muted); max-width: 46ch; margin-inline: auto; }

/* Gallery */
.gl-gallery { display: grid; gap: var(--gl-sp-3); grid-template-columns: repeat(4, 1fr); }
.gl-gallery__item {
  position: relative; overflow: hidden;
  border-radius: var(--gl-r-md);
  aspect-ratio: 4 / 3;
  border: 0; padding: 0; background: var(--gl-ink-100); cursor: zoom-in;
}
.gl-gallery__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: 1 / 1; }
.gl-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--gl-dur-slow) var(--gl-ease); }
.gl-gallery__item:hover img { transform: scale(1.06); }

.gl-lightbox {
  position: fixed; inset: 0; z-index: var(--gl-z-modal);
  display: none; place-items: center;
  background: rgba(5,5,6,.94);
  padding: var(--gl-sp-6);
}
.gl-lightbox[data-open="true"] { display: grid; }
.gl-lightbox img { max-width: min(1200px, 94vw); max-height: 86vh; object-fit: contain; border-radius: var(--gl-r-md); }
.gl-lightbox__close, .gl-lightbox__nav {
  position: absolute;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--gl-r-pill);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff; cursor: pointer;
}
.gl-lightbox__close:hover, .gl-lightbox__nav:hover { background: rgba(255,255,255,.24); }
.gl-lightbox__close { top: var(--gl-sp-6); right: var(--gl-sp-6); }
.gl-lightbox__nav--prev { left: var(--gl-sp-6); top: 50%; transform: translateY(-50%); }
.gl-lightbox__nav--next { right: var(--gl-sp-6); top: 50%; transform: translateY(-50%); }
.gl-lightbox__count { position: absolute; bottom: var(--gl-sp-6); left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: var(--gl-fs-sm); font-variant-numeric: tabular-nums; }

/* Sticky inquiry rail on detail pages */
.gl-rail { position: sticky; top: calc(var(--gl-header-h) + var(--gl-sp-6)); }

.gl-split { display: grid; gap: var(--gl-sp-12); grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }

/* Floating contact actions */
.gl-fab {
  position: fixed; right: var(--gl-sp-5);
  bottom: calc(var(--gl-sp-5) + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex; flex-direction: column; gap: var(--gl-sp-3);
}
.gl-fab__btn {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: var(--gl-r-pill);
  color: #fff;
  box-shadow: var(--gl-shadow-lg);
  border: 0; cursor: pointer;
  transition: transform var(--gl-dur) var(--gl-ease);
}
.gl-fab__btn:hover { transform: scale(1.08); }
.gl-fab__btn--wa { background: #25d366; }
.gl-fab__btn--tel { background: var(--gl-primary); }

/* Mobile-only sticky action bar on detail pages */
.gl-actionbar {
  display: none;
  position: fixed; inset-inline: 0; bottom: 0;
  z-index: 95;
  gap: var(--gl-sp-3);
  padding: var(--gl-sp-3) var(--gl-sp-4);
  padding-bottom: calc(var(--gl-sp-3) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--gl-border);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.gl-footer { background: var(--gl-ink-900); color: #fff; }
.gl-footer__top { padding-block: var(--gl-section-y-sm); border-bottom: 1px solid rgba(255,255,255,.1); }
.gl-footer__grid { display: grid; gap: var(--gl-sp-10); grid-template-columns: 1.6fr repeat(3, 1fr); }
.gl-footer__title {
  font-size: var(--gl-fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--gl-ember-500);
  margin-bottom: var(--gl-sp-5);
}
.gl-footer__links { display: grid; gap: var(--gl-sp-3); }
.gl-footer__links a { color: rgba(255,255,255,.66); font-size: .9375rem; transition: color var(--gl-dur) var(--gl-ease); }
.gl-footer__links a:hover { color: #fff; }
.gl-footer__about { color: rgba(255,255,255,.62); font-size: .9375rem; max-width: 42ch; }
.gl-footer__bottom {
  padding-block: var(--gl-sp-6);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gl-sp-4);
  font-size: var(--gl-fs-sm); color: rgba(255,255,255,.5);
}
.gl-footer__legal { display: flex; flex-wrap: wrap; gap: var(--gl-sp-5); }
.gl-social { display: flex; gap: var(--gl-sp-3); }
.gl-social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--gl-r-pill);
  color: rgba(255,255,255,.72);
  transition: background-color var(--gl-dur) var(--gl-ease), color var(--gl-dur) var(--gl-ease), border-color var(--gl-dur) var(--gl-ease);
}
.gl-social a:hover { background: var(--gl-primary); border-color: var(--gl-primary); color: #fff; }

/* --------------------------------------------------------------------------
   13. Reveal-on-scroll (opacity + transform only)
   -------------------------------------------------------------------------- */
.gl-reveal { opacity: 0; transform: translateY(18px); }
.gl-reveal--in {
  opacity: 1; transform: none;
  transition: opacity var(--gl-dur-slow) var(--gl-ease), transform var(--gl-dur-slow) var(--gl-ease);
}
@media (prefers-reduced-motion: reduce) {
  .gl-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. Responsive — laptop → tablet → mobile
   -------------------------------------------------------------------------- */

/* Laptop (≤1280px) */
@media (max-width: 1280px) {
  .gl-split { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gl-sp-8); }
  .gl-header__bar { gap: var(--gl-sp-4); }
  .gl-nav__link { padding-inline: .5rem; font-size: .9rem; }
}

/* Small laptop / large tablet (≤1024px) */
@media (max-width: 1024px) {
  .gl-nav, .gl-header__tel { display: none; }
  .gl-burger { display: flex; }
  .gl-split { grid-template-columns: minmax(0, 1fr); }
  .gl-rail { position: static; }
  .gl-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-hero__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gl-sp-5); }
  .gl-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gl-sp-8); }
}

/* Tablet (≤820px) */
@media (max-width: 820px) {
  :root { --gl-header-h: 68px; }
  .gl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-gallery { grid-template-columns: repeat(3, 1fr); }
  .gl-gallery__item:first-child { grid-column: span 3; grid-row: auto; aspect-ratio: 16 / 9; }
  .gl-hero { min-height: auto; padding-top: calc(var(--gl-header-h) + var(--gl-sp-12)); }
  .gl-section-head { margin-bottom: var(--gl-sp-8); }
}

/* Mobile (≤640px) */
@media (max-width: 640px) {
  /* Full CTA wording overflows the bar and pushes the burger off-screen. */
  .gl-header__cta-long { display: none; }
  .gl-header__cta-short { display: inline; }
  .gl-header__cta { padding-inline: var(--gl-sp-4); }

  .gl-grid--2, .gl-grid--3, .gl-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .gl-gallery { grid-template-columns: repeat(2, 1fr); }
  .gl-gallery__item:first-child { grid-column: span 2; }
  .gl-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--gl-sp-8); }
  .gl-footer__bottom { flex-direction: column; align-items: flex-start; }
  .gl-btn-row .gl-btn { flex: 1 1 100%; }
  .gl-quote { padding: var(--gl-sp-5); }
  .gl-hero__strip { margin-top: var(--gl-sp-8); padding-top: var(--gl-sp-6); }
  .gl-card__body { padding: var(--gl-sp-4); }
  .gl-fab { right: var(--gl-sp-4); }
  /* Sticky action bar takes over from the FAB stack on detail pages */
  .gl-actionbar--on { display: flex; }
  .gl-actionbar--on ~ .gl-fab { display: none; }
  body:has(.gl-actionbar--on) { padding-bottom: 76px; }
  .gl-lightbox__nav--prev { left: var(--gl-sp-3); }
  .gl-lightbox__nav--next { right: var(--gl-sp-3); }
  .gl-lightbox__close { top: var(--gl-sp-3); right: var(--gl-sp-3); }
}

/* Very small (≤380px) — keep the logo lockup and header bar from overflowing */
@media (max-width: 380px) {
  .gl-logo__mark { width: 36px; height: 36px; }
  .gl-logo__name { font-size: .9375rem; }
  .gl-logo__sub { letter-spacing: .22em; }
  .gl-header__actions { gap: var(--gl-sp-2); }
  .gl-header__cta { padding-inline: var(--gl-sp-3); font-size: .8125rem; }
  .gl-burger { width: 40px; padding-inline: 8px; }
}

@media print {
  .gl-header, .gl-footer, .gl-fab, .gl-actionbar, .gl-drawer { display: none !important; }
}