/* ==========================================================================
   Griffiths & Co. — header + hero
   Tokens first: change these, everything downstream follows.
   ========================================================================== */

:root {
  /* Brand — #001B65 is sampled from the supplied logo artwork */
  --gc-brand:      #001B65;
  --gc-midnight:   #001238;   /* same hue, driven deeper — large fields */
  --gc-deep:       #000A22;   /* scrims and gradient feet */
  --gc-champagne:  #C6A96B;
  --gc-sand:       #F3EFE7;   /* matched to the template's --cream: the About
                                 section sat a shade darker than "We're real people" */
  --gc-bone:       #F3EFE6;
  --gc-text:       #C3CCE2;
  --gc-text-dim:   #99A7CE;

  --gc-display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --gc-ui:      'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --gc-nav-h:          98px;
  --gc-nav-h-scrolled: 88px;   /* +30% */
  --gc-promo-h:        36px;   /* podcast announcement bar */
  --gc-gutter:         clamp(20px, 4.4vw, 64px);
  --gc-ticker-h:       66px;

  --gc-ease: cubic-bezier(.22, .61, .36, 1);
}

/* /team and /services do not load _template.html's inline reset, so they were
   inheriting the browser's default 8px body margin — a white edge round the
   whole page. The homepage already sets this, so it changes nothing there. */
html, body { margin: 0; }

/* --- Integration note (Logun) ---------------------------------------------
   The handoff's global reset (*, html, body, ul, img, a) was removed here:
   _template.html already ships its own reset, and the globals were restyling
   the rest of the page (body font/background, every <ul>, every <img>).
   Only what the .gc-* components actually need is re-added below, scoped.
   -------------------------------------------------------------------------- */
:where(.gc-nav, .gc-menu, .gc-hero) img { display: block; max-width: 100%; }
/* :where() keeps this at zero specificity so the .gc-btn--* colours still win */
:where(.gc-nav, .gc-menu, .gc-hero) a { color: inherit; text-decoration: none; }
.gc-hero h1, .gc-hero p, .gc-menu p { margin: 0; }
.gc-hero ul, .gc-menu ul, .gc-ticker__list { margin: 0; padding: 0; list-style: none; }

.gc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.gc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gc-champagne); color: var(--gc-deep);
  padding: 14px 22px; font: 500 12px/1 var(--gc-ui); letter-spacing: .18em; text-transform: uppercase;
}
.gc-skip:focus { left: 0; }

.gc-nowrap { white-space: nowrap; }
.gc-accent { color: var(--gc-champagne); }

/* --------------------------------------------------------------- buttons */

.gc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  font: 500 11.5px/1 var(--gc-ui);
  letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid transparent;
  text-decoration: none;   /* only the nav/menu/hero scope cleared this before */
  transition: background-color .25s var(--gc-ease), color .25s var(--gc-ease), border-color .25s var(--gc-ease);
}
.gc-btn--primary { height: 58px; padding: 0 38px; background: var(--gc-champagne); color: #00112F; }
.gc-btn--primary:hover { background: #D6BC82; }

.gc-btn--quiet { height: 58px; padding: 0 38px; color: var(--gc-bone); border-color: rgba(233,226,212,.45); }
.gc-btn--quiet:hover { border-color: var(--gc-bone); }

/* The nav WhatsApp button. Pill-shaped — the square handoff button read as
   heavy next to the wordmark. */
.gc-btn--outline { height: 46px; padding: 0 30px; border-radius: 999px; color: var(--gc-champagne); border-color: rgba(198,169,107,.75); }
.gc-btn--outline:hover { background: var(--gc-champagne); color: #00112F; }

/* ------------------------------------------------------------------- nav */

.gc-nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  /* height comes from the promo bar plus the nav row, so the announcement can
     collapse on scroll without the bar jumping */
  height: auto;
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(0) saturate(1);
          backdrop-filter: blur(0) saturate(1);
  transition:
    height .34s var(--gc-ease),
    background-color .34s var(--gc-ease),
    box-shadow .34s var(--gc-ease),
    -webkit-backdrop-filter .34s var(--gc-ease),
    backdrop-filter .34s var(--gc-ease);
}

/* The glass state. Tint is the brand blue so it stays in key over the hero,
   the sand sections and the team portraits alike. Depth comes from three
   things working together: a vertical density gradient (lighter at the top
   edge, denser at the foot), a 1px inner highlight along the top edge, and a
   wide soft shadow underneath that lifts the bar off the page. */
.gc-nav.is-scrolled {
  height: auto;
  background: linear-gradient(180deg,
    rgba(0, 34, 122, .58) 0%,
    rgba(0, 21, 78, .80) 100%);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: blur(28px) saturate(1.8) brightness(1.05);
          backdrop-filter: blur(28px) saturate(1.8) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 20px 44px -26px rgba(0, 6, 22, .8);
}
/* no blur support: fall back to a solid brand bar rather than unreadable text */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gc-nav.is-scrolled { background: var(--gc-brand); }
}

.gc-nav__inner {
  height: var(--gc-nav-h); padding: 0 var(--gc-gutter);
  transition: height .34s var(--gc-ease);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}

.gc-nav__brand img { height: 46px; width: auto; transition: height .34s var(--gc-ease); }
.gc-nav.is-scrolled .gc-nav__inner { height: var(--gc-nav-h-scrolled); }
.gc-nav.is-scrolled .gc-nav__brand img { height: 40px; }

.gc-nav__links { display: flex; gap: clamp(24px, 3vw, 46px); }
.gc-nav__links a {
  font: 500 11.5px/1 var(--gc-ui);
  letter-spacing: .2em; text-transform: uppercase;
  color: #D2D9EA;
  padding: 14px 0;
  transition: color .2s var(--gc-ease);
}
.gc-nav__links a:hover,
.gc-nav__links a[aria-current] { color: var(--gc-bone); }

.gc-nav__actions { display: flex; align-items: center; gap: 26px; }
.gc-nav__tel { font: 400 12.5px/1 var(--gc-ui); letter-spacing: .06em; color: var(--gc-text); }
.gc-nav__tel:hover { color: var(--gc-bone); }

.gc-burger {
  display: none;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: flex-end;
  background: none; border: 0; cursor: pointer;
}
.gc-burger__box { display: flex; flex-direction: column; gap: 6px; }
.gc-burger__box i {
  display: block; width: 26px; height: 1.5px; background: var(--gc-bone);
  transition: transform .3s var(--gc-ease), opacity .2s var(--gc-ease);
}
.gc-burger[aria-expanded="true"] .gc-burger__box i:first-child { transform: translateY(3.75px) rotate(45deg); }
.gc-burger[aria-expanded="true"] .gc-burger__box i:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

/* ---------------------------------------------------------- mobile menu */

.gc-menu {
  position: fixed; inset: 0; z-index: 90;
  background: var(--gc-brand);
  padding: calc(var(--gc-nav-h-scrolled) + 24px) var(--gc-gutter) 28px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  /* the podcast entry made the panel taller than a short phone screen */
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
}
.gc-menu[hidden] { display: none; }
.gc-menu__links {
  display: flex; flex-direction: column; justify-content: space-between;
  flex: 1 1 auto; gap: 0;
}
.gc-menu__links a {
  /* sized off the viewport height so the six links plus the podcast entry fill
     the panel down to the Get in touch button on any phone */
  font: 400 clamp(30px, 6.6vh, 56px)/1.25 var(--gc-display);
  color: var(--gc-bone);
  display: flex; align-items: center; flex: 1 1 auto;
  padding: 0;
  border-bottom: 1px solid rgba(198,169,107,.22);
}
.gc-menu__foot { display: flex; flex-direction: column; gap: 20px; }
.gc-menu__foot .gc-btn { width: 100%; }
.gc-menu__tel {
  align-self: center; min-height: 44px; display: inline-flex; align-items: center;
  font: 400 14px/1 var(--gc-ui); letter-spacing: .06em; color: var(--gc-text);
}


/* Every in-page target clears the fixed header, so a jump to #podcast or
   #contact lands below the bar instead of under it. */
:root { --gc-anchor-offset: calc(var(--gc-nav-h-scrolled) + var(--gc-promo-h) + 14px); }
section[id], [id="podcast"], [id="contact"], [id="about"], [id="team"], [id="roles"] {
  scroll-margin-top: var(--gc-anchor-offset);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ------------------------------------------------------------- podcast
   Announcement bar, the nav link and the mobile menu entry. The link
   breathes with a white glow so the podcast reads as the newest thing on
   the site without a loud banner colour. */

.gc-promo {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
  height: var(--gc-promo-h);
  padding: 0 var(--gc-gutter);
  background: #00133F;
  border-bottom: 1px solid rgba(198, 169, 107, .28);
  font: 500 10.5px/1 var(--gc-ui);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gc-champagne);
  text-align: center;
  white-space: nowrap;
  /* Rolls up with the page: is-scrolled is scroll-driven on every page, so the
     bar shows at the top and gets out of the way once you move. */
  overflow: hidden;
  max-height: var(--gc-promo-h);
  transition: max-height .3s var(--gc-ease), opacity .22s var(--gc-ease);
}
.gc-nav.is-scrolled .gc-promo { max-height: 0; opacity: 0; }
.gc-promo:hover .gc-promo__cta { color: var(--gc-bone); }
.gc-promo__text, .gc-promo__cta, .gc-promo .gc-mic {
  animation: gcPodcastGlow 2.6s ease-in-out infinite;
}
.gc-promo .gc-mic { animation-name: gcPodcastMic; }
.gc-promo__text { color: var(--gc-champagne); }
.gc-promo__sep { opacity: .45; }
.gc-promo__cta {
  color: var(--gc-bone);
  text-decoration: underline; text-underline-offset: 4px;
  transition: color .2s var(--gc-ease);
}
.gc-mic { flex: none; }

/* Desktop nav link. Champagne rather than the muted blue of the others, so it
   sits apart from the six navigation items. */
.gc-nav__links .gc-nav__podcast {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--gc-champagne);
}
.gc-nav__links .gc-nav__podcast:hover {
  color: #fff;
  text-shadow: 0 0 1px #fff, 0 0 6px rgba(255, 255, 255, 1), 0 0 18px rgba(255, 255, 255, .7);
}

/* Mobile menu entry: title row plus the season line underneath. */
/* Scoped to the list it lives in: .gc-menu__links a is more specific than a
   bare .gc-menu__podcast, and its align-items was shrinking this row and
   floating it into the middle while every other item sat left. */
.gc-menu__links .gc-menu__podcast {
  display: flex; flex-direction: column; justify-content: center;
  align-items: stretch;
  flex: 1 1 auto; gap: 6px;
  padding: 0;
  border-bottom: 1px solid rgba(198, 169, 107, .22);
  color: var(--gc-champagne);
}
.gc-menu__podcast-row {
  display: flex; align-items: center; justify-content: space-between;
  font: 400 clamp(30px, 6.6vh, 56px)/1.25 var(--gc-display);
}
.gc-menu__podcast-row .gc-mic { width: 18px; height: 18px; }

/* The breathing glow. Scale is kept tiny so the nav row does not shift; the
   work is done by the white halo growing and fading behind the word. */
@keyframes gcPodcastBreathe {
  0%, 100% {
    transform: scale(1);
    color: var(--gc-champagne);
    /* a tight core plus a wide halo: the core is what makes it read as sharp
       rather than a soft blur */
    text-shadow:
      0 0 1px rgba(255, 255, 255, .35),
      0 0 4px rgba(255, 255, 255, .18),
      0 0 12px rgba(255, 255, 255, .08);
  }
  50% {
    transform: scale(1.07);
    color: #fff;
    text-shadow:
      0 0 1px #fff,
      0 0 5px rgba(255, 255, 255, 1),
      0 0 14px rgba(255, 255, 255, .85),
      0 0 30px rgba(255, 255, 255, .5);
  }
}
/* Same pulse without the scale, for the mobile menu: the row is a full-width
   flex line, so scaling it pushed the word and the mic past the edges. */
@keyframes gcPodcastGlow {
  0%, 100% {
    color: var(--gc-champagne);
    text-shadow:
      0 0 1px rgba(255, 255, 255, .35),
      0 0 4px rgba(255, 255, 255, .18),
      0 0 12px rgba(255, 255, 255, .08);
  }
  50% {
    color: #fff;
    text-shadow:
      0 0 1px #fff,
      0 0 5px rgba(255, 255, 255, 1),
      0 0 14px rgba(255, 255, 255, .85),
      0 0 30px rgba(255, 255, 255, .5);
  }
}
@keyframes gcPodcastMic {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .3)); opacity: .85; }
  50%      { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .95)); opacity: 1; }
}
.gc-nav__podcast {
  transform-origin: center;
  animation: gcPodcastBreathe 2.6s ease-in-out infinite;
  will-change: transform, text-shadow;
}
.gc-menu__podcast-word {
  display: inline-block;
  animation: gcPodcastGlow 2.6s ease-in-out infinite;
  will-change: text-shadow;
}
.gc-nav__podcast .gc-mic, .gc-menu__podcast-row .gc-mic {
  animation: gcPodcastMic 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .gc-promo__text, .gc-promo__cta, .gc-promo .gc-mic,
  .gc-nav__podcast, .gc-menu__podcast-word,
  .gc-nav__podcast .gc-mic, .gc-menu__podcast-row .gc-mic { animation: none; }
}

@media (max-width: 1100px) {
  /* less room between nav items, so trade the scale for glow alone */
  .gc-nav__podcast { animation-name: gcPodcastGlow; }
}
@media (max-width: 900px) {
  /* the full sentence does not fit a phone: keep the shout and the action */
  .gc-promo { gap: 8px; font-size: 9.5px; letter-spacing: .16em; }
  :root { --gc-promo-h: 32px; }
  .gc-promo__text { max-width: 62vw; }
}

/* ------------------------------------------------------------------ hero */

.gc-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;   /* content, then ticker — never overlapping */
  background: var(--gc-brand);
}

.gc-hero__media { position: absolute; inset: 0; overflow: hidden; }
/* Rotating hero: every frame stacked in the same box, only .is-active shown.
   The slow scale gives the still a bit of drift so the cut between frames
   reads as a dissolve rather than a slideshow. */
.gc-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 58% center;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1);
  will-change: opacity;
}
.gc-hero__img.is-active { opacity: 1; animation: gcHeroDrift 9s linear forwards; }
@keyframes gcHeroDrift { from { transform: scale(1); } to { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .gc-hero__img { transition: none; }
  .gc-hero__img.is-active { animation: none; }
}

.gc-hero__scrim {
  position: absolute; inset: 0;
  /* Brand blue (#001B65), not the near-black navy it shipped with: the scrim
     sat several shades darker than the nav bar above it and the join showed. */
  background:
    linear-gradient(100deg, rgba(0,27,101,.86) 0%, rgba(0,27,101,.56) 38%, rgba(0,24,90,.16) 66%, rgba(0,24,90,.48) 100%),
    linear-gradient(180deg, rgba(0,24,90,.44) 0%, rgba(0,24,90,0) 24%, rgba(0,27,101,.9) 100%);
}

.gc-hero__inner {
  position: relative;
  align-self: end;
  display: flex; flex-direction: column; gap: clamp(18px, 2.4vh, 30px);
  max-width: 1100px;
  padding: calc(var(--gc-nav-h) + 32px) var(--gc-gutter) clamp(40px, 8vh, 84px);
}

/* Eyebrow. Deliberately quiet: small, light, wide-tracked, and softened off
   full champagne so it sits behind the headline instead of competing with it.
   The label stands on its own: no leading rule, so the type reads as a title
   rather than a captioned divider. */
.gc-eyebrow {
  display: flex; align-items: center; gap: 14px;
  font: 400 10px/1 var(--gc-ui);
  letter-spacing: .38em; text-transform: uppercase;
  color: color-mix(in srgb, var(--gc-champagne) 78%, var(--gc-bone));
}
.gc-hero__title {
  font-family: var(--gc-display);
  font-weight: 400;
  font-size: clamp(40px, 5.7vw, 82px);
  line-height: 1.08;
  letter-spacing: .004em;
  color: var(--gc-bone);
  text-wrap: pretty;
}
.gc-hero__title .gc-accent { display: block; }

.gc-hero__lede {
  font-size: clamp(15.5px, 1.25vw, 18px);
  line-height: 1.7;
  color: var(--gc-text);
  max-width: 600px;
  text-wrap: pretty;
}

.gc-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }

/* ---------------------------------------------------------------- ticker */

.gc-ticker {
  position: relative;
  min-height: var(--gc-ticker-h);
  display: flex; align-items: center;
  padding: 0 var(--gc-gutter);
  background: rgba(0, 17, 47, .6);
  border-top: 1px solid rgba(198, 169, 107, .28);
}
.gc-ticker__label {
  font: 500 10.5px/1 var(--gc-ui);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gc-champagne);
  white-space: nowrap;
  padding-right: 36px;
  border-right: 1px solid rgba(198,169,107,.28);
}
.gc-ticker__list {
  display: flex; align-items: center; gap: 44px;
  padding-left: 36px;
  overflow: hidden;
}
.gc-ticker__list li {
  position: relative;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gc-text); white-space: nowrap;
}
.gc-ticker__list li + li::before {
  content: ''; position: absolute; left: -24px; top: 50%;
  width: 3px; height: 3px; background: var(--gc-champagne);
}
.gc-ticker__list b { color: var(--gc-bone); font-weight: 500; }

/* ------------------------------------------------------- next section */

.gc-band {
  background: var(--gc-sand);
  padding: clamp(56px, 9vw, 130px) var(--gc-gutter);
}
.gc-band h2 {
  font: 400 clamp(28px, 3.4vw, 46px)/1.2 var(--gc-display);
  color: var(--gc-midnight);
}

/* ============================== MOBILE ===================================
   Banded layout (option 5c): the photograph keeps its own proportions and
   the type sits below on solid navy. Contrast is then guaranteed whatever
   the image is doing. Delete this block to go full-bleed instead (5a).
   ======================================================================== */

@media (max-width: 860px) {
  :root { --gc-nav-h: 78px; --gc-nav-h-scrolled: 80px; --gc-ticker-h: 56px; }

  .gc-nav__links,
  .gc-nav__actions { display: none; }
  .gc-burger { display: inline-flex; }

  .gc-hero { grid-template-rows: auto 1fr auto; }

  .gc-hero__media {
    position: relative;
    grid-row: 1;
    height: clamp(300px, 46vh, 430px);
  }
  .gc-hero__img { object-position: 58% center; }
  .gc-hero__scrim {
    background: linear-gradient(180deg, rgba(0,27,101,.7) 0%, rgba(0,24,90,.14) 40%, var(--gc-brand) 100%);
  }

  .gc-hero__inner {
    grid-row: 2;
    align-self: start;
    padding: clamp(24px, 5vw, 40px) var(--gc-gutter) clamp(32px, 6vw, 48px);
    gap: 20px;
  }

  .gc-hero__actions { flex-direction: column; align-items: stretch; }
  .gc-btn--primary { width: 100%; }
  .gc-btn--quiet {
    align-self: center; width: auto; height: auto; min-height: 44px;
    padding: 0; border: 0;
    border-bottom: 1px solid rgba(233,226,212,.4);
  }

  .ticker { grid-row: 3; }
  .gc-ticker__label { display: none; }
  .gc-ticker__list { padding-left: 0; gap: 0; }
  .gc-ticker__list li + li { display: none; }
  .gc-ticker__list li::after {
    content: ''; position: absolute; left: -18px; top: 50%;
    width: 5px; height: 5px; background: var(--gc-champagne);
  }
  .gc-ticker__list li { margin-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- Integration additions (Logun) ----------------------------------------
   1. The CMS emits the headline tail as <em> (src/site.js), so <em> has to
      read as .gc-accent rather than italic.
   2. .gc-btn--solid: the white/filled nav button (the handoff nav had no
      second action). Named by appearance, not by which CTA sits in it, since
      the two swap position.
   -------------------------------------------------------------------------- */
.gc-hero__title em { font-style: normal; color: var(--gc-champagne); }
.gc-hero__title .gc-hero__tail { display: block; }

.gc-btn--solid {
  height: 46px; padding: 0 26px; gap: 8px;
  background: #fff; color: #111; border-color: #fff;
}
.gc-btn--solid:hover { background: var(--gc-bone); border-color: var(--gc-bone); }

/* Hidden sections (roles marquee, roles board). [hidden] has to win over the
   components' own display values. Remove the attribute in _template.html to
   bring either back — both are still wired to site_content. */
[hidden] { display: none !important; }

/* ==========================================================================
   ABOUT — portrait left, sand panel right. Sits directly under the stats band.
   ========================================================================== */

.gc-about {
  display: grid;
  grid-template-columns: minmax(0, 41%) minmax(0, 59%);
  background: var(--gc-sand);
  align-items: stretch;
}

/* min-height:0 + an absolutely-positioned img keep the portrait out of
   intrinsic sizing: the copy column sets the section height and the photo
   crops top and bottom to fit, instead of its 800x1180 aspect forcing ~880px. */
.gc-about__media { position: relative; overflow: hidden; background: var(--gc-deep); min-height: 0; }
/* subtle navy cast so the portrait sits in the brand palette rather than
   reading as a warm-grey photograph dropped into it */
.gc-about__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 46, 92, .22) 0%, rgba(12, 28, 62, .32) 100%);
  mix-blend-mode: multiply;
}
.gc-about__media img {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  filter: saturate(.62) contrast(1.05) brightness(.97) hue-rotate(-8deg);
}

.gc-about__body {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: clamp(48px, 11vw, 158px) clamp(28px, 4.4vw, 76px);
}

/* the hero eyebrow, re-keyed for a light ground */
.gc-about .gc-eyebrow { color: #8a7a52; }

.gc-about__title {
  margin: 0;
  font-family: var(--gc-display);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 66px);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--gc-midnight);
}

.gc-about__copy { display: flex; flex-direction: column; gap: 16px; max-width: 58ch; }
.gc-about__copy p {
  margin: 0;
  font: 300 clamp(15px, 1.12vw, 17.5px)/1.72 var(--gc-ui);
  color: #3d4a68;
}

.gc-about__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 2px; padding-top: 22px;
  border-top: 1px solid rgba(0, 18, 56, .16);
}

.gc-about__who { display: flex; flex-direction: column; gap: 8px; }
.gc-about__name {
  font-family: var(--gc-display); font-size: 22px; line-height: 1;
  color: var(--gc-midnight);
}
.gc-about__role {
  font: 400 11px/1 var(--gc-ui); letter-spacing: .2em; text-transform: uppercase;
  color: #8a7a52;
}

.gc-about__more {
  text-decoration: none;
  font: 500 11.5px/1 var(--gc-ui); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gc-midnight);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 18, 56, .45);
  transition: color .25s var(--gc-ease), border-color .25s var(--gc-ease);
}
.gc-about__more:hover { color: #8a7a52; border-bottom-color: #8a7a52; }

@media (max-width: 860px) {
  .gc-about { grid-template-columns: 1fr; }
  .gc-about__media { height: clamp(280px, 52vw, 420px); }
  /* The short mobile band leaves the portrait reading small and low. Scale it
     up a touch, and slide the crop further down the file so he sits higher in
     the frame — the frame itself does not move. */
  .gc-about__media img { object-position: 50% 38%; transform: scale(1.08); }
  .gc-about__body { gap: 24px; }
  .gc-about__foot { align-items: flex-start; }
}

/* The template's legacy `section{padding:84px 0}` was landing on these two —
   neither declared padding of its own, so the element selector won. The hero
   manages its own spacing via its grid, and .gc-about's padding belongs on
   .gc-about__body so the portrait can run to the section edge. */
section.gc-hero, section.gc-about, section.gcp { padding: 0; }


/* ==========================================================================
   REVEAL ON SCROLL — opt-in per section via .gc-reveal.
   Only the transition lives here. The hidden and visible values are written
   as inline styles by griffiths.js: this section sits under the template's
   own stylesheet, and driving the state through classes was losing the
   cascade. Inline wins outright, and no-JS leaves the section untouched.
   ========================================================================== */

.gc-reveal { transition: opacity .9s var(--gc-ease), transform .9s var(--gc-ease); }

@media (prefers-reduced-motion: reduce) {
  .gc-reveal { transition: none; }
}

/* Nav social icons — replace the WhatsApp / Get in touch buttons top right.
   Circular so they read as icons rather than truncated buttons; champagne
   hairline to match the hero eyebrow and the nav's own rule. */
.gc-nav__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  color: var(--gc-bone);
  transition: color .25s var(--gc-ease), opacity .25s var(--gc-ease);
}
.gc-nav__social:hover { color: var(--gc-champagne); }
.gc-nav__social svg { display: block; width: 21px; height: 21px; }
.gc-nav__actions { gap: 16px; }

/* ==========================================================================
   FOOTER — shared by every page (homepage, /team, /services), so it lives here
   rather than in the homepage's inline <style>.
   ========================================================================== */

footer {
  position: relative;
  overflow: hidden;
  background: var(--gc-brand);
  color: var(--gc-bone);
  padding: clamp(56px, 6vw, 88px) var(--gc-gutter) clamp(28px, 3vw, 40px);
}
/* Palm aerial behind it, faded so the type stays the subject */
footer::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: url("/assets/hero-coast.jpg") center 62% / cover no-repeat;
  opacity: .30;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
  pointer-events: none;
}
footer::after {           /* keeps contrast where the image is brightest */
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg, rgba(0,27,101,.86) 0%, rgba(0,27,101,.55) 52%, rgba(0,24,90,.72) 100%);
  pointer-events: none;
}
.foot-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; }
/* The old footer rules carried text-decoration:none and went with them when
   they were removed, so every link came back underlined. */
footer a { text-decoration: none; }

/* ------------------------------------------------------------------ lead */
.foot-lead {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(34px, 4vw, 54px);
}
.foot-head {
  margin: 0; max-width: 18ch;
  font: 400 clamp(28px, 3.4vw, 46px)/1.14 var(--gc-display);
  color: var(--gc-bone);
}
.foot-head em { font-style: normal; color: var(--gc-champagne); }
.foot-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
/* The number was set in Marcellus, whose old-style figures make a phone number
   hard to read. Same sans the nav bar uses for the same number. */
.foot-tel { font: 400 clamp(16px, 1.4vw, 20px)/1 var(--gc-ui); letter-spacing: .045em; color: var(--gc-bone); }
.foot-tel:hover { color: var(--gc-champagne); }

/* The cream band between the Instagram panel and the podcast banner comes from
   this section's own 84px of padding. On phones it read as a dead seam between
   two navy blocks, so the two meet directly there; desktop keeps the breath. */
@media (max-width: 860px) { .people-ig { padding-bottom: 0; } }

/* ------------------------------------------------------------------ grid */
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(30px, 3.4vw, 44px) 0;
  border-top: 1px solid rgba(233, 226, 212, .22);
}
/* The real wordmark, the same file the nav bar uses, so the mark reads
   identically top and bottom of the page instead of being re-lettered in the
   display face. */
.foot-mark { display: block; height: 42px; width: auto; max-width: 100%; }
.foot-blurb {
  margin-top: 14px; max-width: 34ch;
  font: 300 .9rem/1.65 var(--gc-ui); color: var(--gc-text);
}
.foot-col h4 {
  margin: 0 0 16px;
  font: 500 10.5px/1 var(--gc-ui); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gc-champagne);
}
.foot-col a { display: block; margin-bottom: 13px; font: 300 .92rem/1.5 var(--gc-ui); color: var(--gc-text); }
.foot-col a:hover { color: var(--gc-bone); }
.foot-col--follow { justify-self: end; text-align: right; }
.foot-col--follow h4 { text-align: right; }

/* bare icons, matching the nav — no circles */
.socials { display: flex; gap: 16px; justify-content: flex-end; }
.socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; color: var(--gc-bone);
  transition: color .25s var(--gc-ease);
}
.socials a:hover { color: var(--gc-champagne); }
.socials svg { width: 20px; height: 20px; display: block; }

/* ---------------------------------------------------------------- bottom */
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(233, 226, 212, .22);
  font: 300 .78rem/1.6 var(--gc-ui); color: var(--gc-text-dim);
}
.foot-owned {
  font: 500 10.5px/1 var(--gc-ui); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gc-champagne);
}

@media (max-width: 900px) {
  /* the 2560px Palm aerial is 600KB; phones get the 1280px cut instead */
  footer::before { background-image: url("/assets/hero-coast-1280.jpg"); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-col--follow { justify-self: start; text-align: left; }
  .foot-col--follow h4 { text-align: left; }
  .socials { justify-content: flex-start; }
  .foot-cta { align-items: flex-start; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-lead { flex-direction: column; align-items: flex-start; }
}
/* The contact block was written against the homepage's own token names, which
   live in _template.html's :root. Pages that don't load that inline style had
   none of them, so its type fell back to a browser serif and colours to nothing.
   Same values, redeclared here; the homepage's own :root still wins there. */
:root {
  --navy: #001B65;
  --navy-deep: #001B65;
  --cream: #F3EFE7;
  --cream-card: #FAF8F3;
  --ink: #1a1a1a;
  --muted: #6c6c6c;
  --line: #dcd6ca;
  --gold: #B8A06A;
  --white: #ffffff;
  --wa: #25d366;
  --display: 'Marcellus', Georgia, 'Times New Roman', serif;
  --body: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --figure: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body { font-family: var(--gc-ui); color: var(--ink); }

/* The template's global reset. Without box-sizing the shared .wrap picked up
   its 24px padding OUTSIDE the 1120px max-width, so the contact columns came
   out 538px against the homepage's 514px. */
*, *::before, *::after { box-sizing: border-box; }

/* .btn is the homepage's button class, used by the contact form's submit and
   the pane CTAs. It only existed in the inline <style>, so on other pages the
   Send enquiry button rendered as a bare browser button. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; padding: 16px 30px; border-radius: 2px;
  font-size: .82rem; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 500;
  cursor: pointer; border: 1px solid transparent; transition: all .15s;
}
.btn-gold { background: var(--gold); color: var(--navy-deep); }
.btn-gold:hover { background: #c9b27c; }
.btn-outline { background: transparent; color: var(--cream); border-color: rgba(255,255,255,.35); }
.btn-outline:hover { border-color: var(--cream); }


/* ==========================================================================
   CONTACT SECTION — form, contact details and brokerage logos.
   Shared: the homepage and /work-with-us both render this block, so it
   cannot live in _template.html's inline <style> the way it used to.
   ========================================================================== */

/* The section's own frame and .wrap were also only defined in the homepage's
   inline <style>, so on /work-with-us the block had no width limit, no padding
   and no background — it rendered 3336px tall and full-bleed. */
.contact { background: var(--gc-sand); padding: clamp(56px, 6vw, 88px) 0; }
.contact .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* contact */
.contact .grid{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:860px){.contact .grid{grid-template-columns:1fr 1fr;align-items:start}}
.contact .info h2{font-family:var(--display);font-size:2.4rem;color:var(--navy);font-weight:500;line-height:1.1;margin-bottom:18px}
.contact .info p{color:var(--muted);margin-bottom:30px;max-width:40ch}
.placed{margin-top:38px}
.placed-label{font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:18px}
.placed-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%;max-width:460px}
.placed-row{display:flex;gap:13px}
.placed-row.bot{justify-content:center}
.logo-cap{width:100%;aspect-ratio:300/190;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 8px 20px -8px rgba(20,30,60,.3);border:1px solid rgba(20,30,60,.05);transition:transform .15s,box-shadow .15s}
.logo-cap:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(20,30,60,.38)}
/* cover, as the original Allsopp cap did: each logo file carries its own
   background, so the capsule takes that colour edge to edge. */
.logo-cap img{width:100%;height:100%;object-fit:cover;display:block}
/* transparent-background logos have no colour of their own and are far
   wider than the cap, so they sit on white and scale to fit instead. */
.logo-cap--plain{background:#fff}
.logo-cap--plain img{object-fit:contain;padding:7px 9px}
/* Three columns leave the last two of the eight logos stranded on the left of
   row three. Flex-wrap with justify-content centres that short row under the
   six above it; the basis reproduces the 3-up grid track. */
@media(max-width:430px){
  .placed-logos{display:flex;flex-wrap:wrap;justify-content:center}
  .placed-logos .logo-cap{flex:0 0 calc((100% - 24px) / 3)}
  .logo-cap{height:52px}
}
.contact .person{display:flex;flex-direction:column;gap:6px;padding:20px 0;border-top:1px solid var(--line)}
.contact .person .nm{font-family:var(--display);font-size:1.3rem;color:var(--navy);font-weight:600}
.contact .person .ro{font-size:.76rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.contact .person a{color:#444;text-decoration:none;font-size:.92rem}
.contact .person a:hover{color:var(--navy)}
form{background:var(--cream-card);border:1px solid var(--line);border-radius:6px;padding:34px}
form label{display:block;font-size:.74rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;margin-top:18px}
form label:first-child{margin-top:0}
form input,form select,form textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:3px;background:var(--white);font-family:var(--body);font-size:.95rem;color:var(--ink)}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--navy)}
form .btn{width:100%;margin-top:26px;background:var(--navy);color:var(--cream)}
form .btn:hover{background:var(--navy-deep)}


/* Build credit, under the British owned & run line. Sits with the copyright
   rather than competing with it. */
.foot-credit { display: flex; justify-content: flex-end; padding-top: 12px; }
.foot-credit a {
  display: inline-flex; align-items: center; gap: 7px;
  opacity: .55; transition: opacity .25s var(--gc-ease);
}
.foot-credit a:hover { opacity: 1; }
.foot-credit span {
  font: 300 .64rem/1 var(--gc-ui);
  letter-spacing: .04em;
  color: var(--gc-text-dim);
}
.foot-credit img { height: 9px; width: auto; display: block; }

@media (max-width: 900px) {
  .foot-credit { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   CONTACT FORM — CV attachment (candidates only)
   The real file input is laid over a styled row at zero opacity, since a
   native file input cannot be styled and its button text cannot be changed.
   -------------------------------------------------------------------------- */
.cv-field[hidden] { display: none; }
.cv-drop {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; border: 1px dashed var(--line); border-radius: 3px; background: var(--white);
  transition: border-color .15s;
}
.cv-drop:hover, .cv-drop:focus-within { border-color: var(--navy); }
/* Covers the row so a click anywhere opens the picker, but stops short of the
   Remove button so that stays clickable. */
.cv-drop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; border: 0;
}
.cv-drop__btn {
  position: relative; flex: none; padding: 8px 16px;
  border: 1px solid var(--navy); border-radius: 999px;
  font-size: .7rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: var(--navy);
}
.cv-drop__name {
  flex: 1 1 auto; min-width: 0; font-size: .88rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-drop__name.is-set { color: var(--ink); }
.cv-drop__clear {
  position: relative; z-index: 1; flex: none;
  background: none; border: 0; padding: 6px 4px; cursor: pointer;
  font-family: inherit; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.cv-drop__clear:hover { color: #b3261e; }
.cv-drop__clear[hidden] { display: none; }

/* Upload progress. Hidden until an upload starts. */
.cv-bar { margin-top: 10px; height: 3px; border-radius: 999px; background: rgba(0, 18, 56, .1); overflow: hidden; }
.cv-bar[hidden] { display: none; }
.cv-bar__fill { display: block; width: 0; height: 100%; background: var(--gold); transition: width .2s linear; }

.cv-field__hint { margin-top: 8px; font-size: .76rem; color: var(--muted); }
.cv-field__err, .enq-status { margin-top: 8px; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.cv-field__err { color: #b3261e; }
.cv-field__err[hidden], .enq-status[hidden] { display: none; }
.enq-status.is-err { color: #b3261e; }
.enq [type="submit"][disabled] { opacity: .6; cursor: progress; }

/* Success state. The confirmation takes over the card: a line of grey text
   under the button was too easy to miss after a click. */
.enq--done > *:not(.enq-done) { display: none; }
.enq-done[hidden] { display: none; }
.enq-done {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 6px; padding: 26px 8px 12px; outline: none;
}
.enq-done__tick { width: 58px; height: 58px; color: var(--gold); }
.enq-done__tick svg { width: 100%; height: 100%; display: block; }
/* The circle draws first, then the tick, so the panel lands rather than blinks. */
.enq-done__tick circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: enqRing .45s ease-out forwards; }
.enq-done__tick path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: enqTick .3s ease-out .35s forwards; }
@keyframes enqRing { to { stroke-dashoffset: 0; } }
@keyframes enqTick { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .enq-done__tick circle, .enq-done__tick path { animation: none; stroke-dashoffset: 0; }
}
.enq-done h3 {
  margin: 10px 0 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.1rem); line-height: 1.15; color: var(--navy);
}
.enq-done__line { max-width: 34ch; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.enq-done__again {
  margin-top: 14px; background: none; border: 0; padding: 8px 4px; cursor: pointer;
  font-family: inherit; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; color: var(--navy); text-decoration: underline; text-underline-offset: 4px;
}
.enq-done__again:hover { color: var(--gold); }

/* Required fields and their errors. The message sits under the field it
   belongs to, so on a phone it is next to what needs fixing. */
form .req { color: var(--gold); font-weight: 600; }
form .fld-err { margin-top: 6px; font-size: .8rem; line-height: 1.45; color: #b3261e; }
form .fld-err[hidden] { display: none; }
form input.is-invalid, form textarea.is-invalid { border-color: #b3261e; background: #fdf7f7; }
form input.is-invalid:focus { border-color: #b3261e; }

/* Short screens: tighten the frame only. The list sizes itself from the
   viewport height, so the type does not need shrinking as well. */
@media (max-height: 820px) {
  .gc-menu {
    padding-top: calc(var(--gc-nav-h-scrolled) + 10px);
    padding-bottom: 14px;
    gap: 10px;
  }
  .gc-menu__foot { gap: 10px; }
  .gc-menu__foot .gc-btn { height: 48px; }
}

/* Registered address in the footer. <address> so it is machine readable as the
   firm's contact, italic reset because browsers italicise it by default. */
.foot-address {
  margin-top: 14px;
  font: 300 13px/1.7 var(--gc-ui);
  font-style: normal;
  color: var(--gc-text-dim, #9FB0D8);
  max-width: 30ch;
}