/* Loading screen, persistent header, enquiry prompt.
   Brand only: white paper, navy ink, red marker, square corners. */

/* (1. header pin removed: the floating contact button is the always-visible
   element. The header goes back to app.js hiding it on scroll-down.) */

/* ---------- 2. loading screen ----------------------------------------- */
html.gc-loading, html.gc-loading body { overflow: hidden !important; }

#gc-loader {
  position: fixed; inset: 0; z-index: 100000;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .55s ease;
}
#gc-loader.is--gone { opacity: 0; pointer-events: none; }

.gc_load_inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }

.gc_load_house { width: clamp(96px, 13vw, 140px); height: auto; overflow: visible; }
.gc_load_house .l {
  stroke: var(--_color-values---swatch--navy, #171b33);
  stroke-width: 2.5; stroke-linecap: square; fill: none;
  stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: gcDraw 1.5s cubic-bezier(.65,0,.35,1) forwards;
}
.gc_load_house .l2 { animation-delay: .22s; }
.gc_load_house .l3 { animation-delay: .46s; }
.gc_load_house .l4 { animation-delay: .62s; }
.gc_load_house .l5 { animation-delay: .70s; }
.gc_load_house .patch {
  fill: var(--_color-values---swatch--red, #ff2c2f);
  opacity: 0; animation: gcPatch .5s ease .85s forwards;
}
@keyframes gcDraw  { to { stroke-dashoffset: 0; } }
@keyframes gcPatch { to { opacity: 1; } }

.gc_load_word {
  font-family: monospace; font-size: .62rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--_color-values---swatch--navy, #171b33);
  text-align: center; line-height: 1.9;
}
.gc_load_word span { display: block; color: rgba(23,27,51,.45); letter-spacing: .22em; }

.gc_load_bar { width: 118px; height: 2px; background: rgba(23,27,51,.1); overflow: hidden; }
.gc_load_bar i {
  display: block; height: 100%; width: 40%;
  background: var(--_color-values---swatch--red, #ff2c2f);
  animation: gcBar 1.15s ease-in-out infinite;
}
@keyframes gcBar {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(310%); }
}

@media (prefers-reduced-motion: reduce) {
  .gc_load_house .l { animation: none; stroke-dashoffset: 0; }
  .gc_load_house .patch { animation: none; opacity: 1; }
  .gc_load_bar i { animation: none; width: 100%; }
}

/* ---------- 3. enquiry prompt ----------------------------------------- */
#gc-prompt {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: 9997; max-width: min(360px, calc(100vw - 2rem));
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
#gc-prompt.is--in { opacity: 1; transform: none; }

.gc_prompt_card {
  position: relative; background: #fff;
  border: 1px solid rgba(23,27,51,.12);
  padding: 1.5rem 1.5rem 1.25rem;
  box-shadow: 0 30px 60px -36px rgba(23,27,51,.45);
}
.gc_prompt_card::after {
  content: ''; position: absolute; top: -1px; right: -1px;
  width: 38px; height: 3px;
  background: var(--_color-values---swatch--red, #ff2c2f);
}
.gc_prompt_eyebrow {
  font-family: monospace; font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--_color-values---swatch--red, #ff2c2f);
  margin-bottom: .55rem;
}
.gc_prompt_card h3 {
  margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 500; line-height: 1.35;
  letter-spacing: -.01em; color: var(--_color-values---swatch--navy, #171b33);
}
.gc_prompt_card p {
  margin: 0 0 1.1rem; font-size: .8rem; line-height: 1.55;
  color: rgba(23,27,51,.58);
}
.gc_prompt_go {
  display: inline-block; text-decoration: none;
  background: var(--_color-values---swatch--red, #ff2c2f); color: #fff;
  padding: .72rem 1.15rem; border-radius: 0;
  font-family: monospace; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  transition: background .22s ease;
}
.gc_prompt_go:hover { background: var(--_color-values---swatch--navy, #171b33); }
.gc_prompt_no {
  background: none; border: 0; cursor: pointer; margin-left: .85rem; padding: .72rem 0;
  font-family: monospace; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(23,27,51,.45);
}
.gc_prompt_no:hover { color: var(--_color-values---swatch--navy, #171b33); }
.gc_prompt_x {
  position: absolute; top: .4rem; right: .5rem;
  background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 1.25rem; color: rgba(23,27,51,.35); padding: .25rem .4rem;
}
.gc_prompt_x:hover { color: var(--_color-values---swatch--red, #ff2c2f); }

@media (max-width: 600px) {
  #gc-prompt { left: 1rem; right: 1rem; max-width: none; }
}


/* ---------- 4. lighter mode for weak devices ---------------------------
   Only the blur goes. Opacity, offset, stagger and easing are untouched, so
   the choreography is identical -- it simply stops asking the GPU to blur
   every character on every scroll frame, which is the single most expensive
   thing this site does on a phone. Desktop never sees this. */
html.gc-lite [data-module="heading"] *,
html.gc-lite [data-module="paragraph"] *,
html.gc-lite [data-module="subhead"] *,
html.gc-lite [data-module="hero"] h1 *,
html.gc-lite .hero_patch,
html.gc-lite .strategy_content * {
  filter: none !important;
}


/* ---------- 5. floating contact button --------------------------------
   Always on screen, every page except contact itself. Square corners and
   brand red, so it reads as part of the site's own marker language rather
   than a bolted-on widget. */
#gc-fab {
  position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 9000;
  display: inline-flex; align-items: center; gap: 0;
  background: var(--_color-values---swatch--red, #ff2c2f);
  color: #fff; text-decoration: none; border-radius: 0;
  box-shadow: 0 16px 34px -14px rgba(255, 44, 47, .5);
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1),
              background .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
#gc-fab.is--in { opacity: 1; transform: none; }
#gc-fab:hover {
  background: var(--_color-values---swatch--navy, #171b33);
  box-shadow: 0 18px 38px -14px rgba(23, 27, 51, .55);
}
#gc-fab:focus-visible { outline: 2px solid var(--_color-values---swatch--navy, #171b33); outline-offset: 3px; }

.gc_fab_icon {
  width: 54px; height: 54px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.gc_fab_icon svg { width: 21px; height: 21px; stroke-linecap: square; stroke-linejoin: miter; }

/* the label unrolls on hover on pointer devices, and is always out on touch */
.gc_fab_label {
  font-family: monospace; font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; white-space: nowrap;
  max-width: 0; opacity: 0; padding-right: 0;
  transition: max-width .4s cubic-bezier(.16,1,.3,1), opacity .3s ease, padding-right .4s ease;
}
#gc-fab:hover .gc_fab_label, #gc-fab:focus-visible .gc_fab_label {
  max-width: 150px; opacity: 1; padding-right: 1.15rem;
}
@media (pointer: coarse) {
  .gc_fab_label { max-width: 150px; opacity: 1; padding-right: 1.15rem; }
  .gc_fab_icon { width: 48px; height: 48px; }
}

/* the enquiry prompt uses the same corner: move the button out while it is up */
html.gc-prompt-open #gc-fab {
  transform: translateY(26px) scale(.82);
  opacity: 0; pointer-events: none;
}

/* never let it sit over a full-screen overlay */
html.gc-loading #gc-fab { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  #gc-fab, .gc_fab_label { transition: none; }
}

/* ---------- 6. the Enter screen -----------------------------------------
   Until the visitor presses Enter the page behind is kept invisible (layout
   untouched, so app.js still measures correctly), which also covers the brief
   moment before the loading screen element exists. */
html.gc-gate { background: #fff; }
html.gc-gate body { visibility: hidden; }
html.gc-gate #gc-loader { visibility: visible; }

#gc-loader { cursor: default; }
#gc-loader.is--ready { cursor: pointer; }

/* the bar runs while loading, then fills and gives way to the button */
#gc-loader.is--ready .gc_load_bar i {
  animation: none; width: 100%; transform: none;
  transition: width .4s ease;
}
#gc-loader.is--ready .gc_load_bar { opacity: 0; transition: opacity .35s ease .25s; }

.gc_enter {
  margin-top: .4rem;
  display: inline-flex; align-items: center; gap: .85rem;
  background: var(--_color-values---swatch--red, #ff2c2f); color: #fff;
  border: 0; border-radius: 0; cursor: pointer;
  padding: .95rem 1.6rem;
  font-family: monospace; font-size: .7rem; letter-spacing: .28em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .5s ease .2s, transform .5s cubic-bezier(.16,1,.3,1) .2s, background .25s ease;
}
#gc-loader.is--ready .gc_enter { opacity: 1; transform: none; pointer-events: auto; }
.gc_enter:hover { background: var(--_color-values---swatch--navy, #171b33); }
.gc_enter:focus-visible { outline: 2px solid var(--_color-values---swatch--navy, #171b33); outline-offset: 4px; }

/* a small live sound-wave, so "sound on" reads without a word */
.gc_enter_wave { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.gc_enter_wave i { display: block; width: 2px; height: 100%; background: currentColor; transform-origin: center; animation: gcWave 1s ease-in-out infinite; }
.gc_enter_wave i:nth-child(2) { animation-delay: .15s; }
.gc_enter_wave i:nth-child(3) { animation-delay: .3s; }
.gc_enter_wave i:nth-child(4) { animation-delay: .45s; }
@keyframes gcWave { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

.gc_enter_quiet {
  background: none; border: 0; cursor: pointer; padding: .4rem .2rem;
  font-family: monospace; font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(23,27,51,.42);
  opacity: 0; pointer-events: none; transition: opacity .5s ease .45s, color .2s ease;
}
#gc-loader.is--ready .gc_enter_quiet { opacity: 1; pointer-events: auto; }
.gc_enter_quiet:hover { color: var(--_color-values---swatch--navy, #171b33); }

@media (prefers-reduced-motion: reduce) {
  .gc_enter_wave i { animation: none; transform: scaleY(.7); }
}