/* ============================================================================
   Golden Egg Compliance

   Theme: Hyperspace by HTML5 UP (assets/css/main.css), the same template that
   draws.integrimark.co.uk runs on, with the sidebar dropped. Attribution-free
   licence purchased (see assets/LICENSE.txt and the note in index.html).

   This file does three things:
     1. re-points the template's purple palette to the Golden Egg gold and cream,
     2. reproduces the existing Golden Egg sticky header exactly as it was,
     3. adds the components the template does not ship (team grid, FAQ, prose).

   Sections alternate strictly light, dark, light, dark so each one separates
   cleanly from its neighbours. The template's magenta wrapper is never used.
   ============================================================================ */

:root {
  --gold: #c4ad66;
  --gold-soft: #d4c580;
  --gold-accessible: #8B7328;   /* gold for large text on cream (passes AA at heading sizes) */
  --gold-small: #7d6724;        /* darker gold for small text on cream, clears 4.5:1 */
  --gold-lite: #e6c66e;         /* the integriMark gold, for the wordmark only */
  --black: #0a0a0a;
  --gray-dark: #111;
  --gray: #4A4A4A;
  --gray-light: #777;
  --white: #FFF;
  --cream: #FDFCF9;
  --cream-deep: #F5F3ED;
  --sans: Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------------- base ---- */
body {
  background: var(--cream);
  font-family: var(--sans);
}

body.no-sidebar #wrapper { padding-top: 64px; }

/* nothing may push the page wider than the viewport on a phone */
html, body { max-width: 100%; overflow-x: hidden; }

/* long unbroken tokens (the contact address above all) must wrap, not overflow */
a, p, li, h1, h2, h3, h4 { overflow-wrap: anywhere; }

/* Content width is the template's own (75em), as draws.integrimark.co.uk runs
   it. Running copy is held to a reading measure separately, on .ge-prose. */
#wrapper > .wrapper > .inner {
  margin-left: auto;
  margin-right: auto;
}

/* Section rhythm. The template ships 5em/3em, 4em/2em and 3em/1em top/bottom at
   its three breakpoints, which leaves the bottom noticeably tighter than the
   top. These keep the template's horizontal padding, and its proportions, but
   give every section more room to breathe top and bottom. */
#wrapper > .wrapper > .inner { padding: 7em 5em 6em 5em; }
@media screen and (max-width: 1680px) {
  #wrapper > .wrapper > .inner { padding: 6em 4em 5em 4em; }
}
@media screen and (max-width: 736px) {
  #wrapper > .wrapper > .inner { padding: 4.5em 2em 4em 2em; }
}

.wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4 {
  font-family: var(--sans);
}

/* ================================================================ HEADER ====
   Lifted verbatim from the previous Golden Egg page: fixed bar, logo that grows
   into a seal on scroll, shimmering gold wordmark, outlined contact link.
   Unchanged apart from the z-index, which has to clear the template's layers.
   ============================================================================ */
header.ge-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  height: 64px; padding: 14px 0;
  /* the same near-black as the hero, so the bar and the hero read as one field */
  background: var(--black);
  border-bottom: 1px solid rgba(196, 173, 102, 0.1);
}
.header-inner { max-width: 90%; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.header-left { display: flex; align-items: center; gap: clamp(5px, 1vw, 8px); }
.logo-seal {
  position: relative; z-index: 102;
  width: clamp(46px, 7.5vw, 52px); height: clamp(46px, 7.5vw, 52px);
  border-radius: 50%; background: transparent; border: 2px solid transparent;
  flex-shrink: 0; transition: all .4s ease;
}
.logo-seal.scrolled {
  width: clamp(62px, 9.8vw, 72px); height: clamp(62px, 9.8vw, 72px);
  background: var(--gray-dark); border-color: rgba(196, 173, 102, 0.3); border-width: 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  margin-top: 4px; margin-bottom: -12px;
}
.logo-seal img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain; transition: all .4s ease; }
.logo-seal.scrolled img { width: 90%; height: 90%; }
.header-brand {
  font-size: clamp(10px, 2.5vw, 13px); font-weight: 600; letter-spacing: .08em;
  line-height: 1.3; text-transform: uppercase; text-decoration: none;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 40%, rgba(255,255,255,0.9) 50%, var(--gold) 60%, var(--gold) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: textShimmer 5s ease-in-out infinite;
  border: 0;
}
/* the header CTA uses the same pill as the hero's "What that means" button,
   just scaled to fit a 64px bar */
.header-cta.button {
  height: 2.5em; line-height: 2.5em; padding: 0 1.4em;
  font-size: clamp(0.62em, 2.2vw, 0.72em);
  white-space: nowrap;
}
@keyframes textShimmer {
  0% { background-position: 100% 0; }
  50% { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}
/* the template underlines every anchor; the header must not inherit that */
header.ge-top a { border-bottom: 0 !important; text-decoration: none !important; }

/* ============================================================ SECTIONS =====
   Strict alternation. Dark sections carry the template's line pattern.
   ============================================================================ */
.wrapper.ge-dark {
  background-color: var(--gray-dark) !important;
  color: rgba(255, 255, 255, 0.75);
}
.wrapper.ge-darkest { background-color: var(--black) !important; }
/* the platform section borrows the draws.integrimark.co.uk purple, so the
   integriMark wordmark sits on the ground it was designed for */
.wrapper.ge-purple { background-color: #5e42a6 !important; }
.wrapper.ge-light { background-color: var(--cream) !important; color: var(--gray); }
.wrapper.ge-light-deep { background-color: var(--cream-deep) !important; color: var(--gray); }

.wrapper.ge-dark h1, .wrapper.ge-dark h2, .wrapper.ge-dark h3, .wrapper.ge-dark h4,
.wrapper.ge-darkest h1, .wrapper.ge-darkest h2, .wrapper.ge-darkest h3, .wrapper.ge-darkest h4 { color: var(--white); }
.wrapper.ge-dark p, .wrapper.ge-dark li,
.wrapper.ge-darkest p, .wrapper.ge-darkest li { color: rgba(255, 255, 255, 0.78) !important; }
.wrapper.ge-dark strong, .wrapper.ge-darkest strong { color: var(--white); }
.wrapper.ge-dark em, .wrapper.ge-dark .gold,
.wrapper.ge-darkest em, .wrapper.ge-darkest .gold { color: var(--gold-soft) !important; font-style: normal; }

.wrapper.ge-light h1, .wrapper.ge-light h2, .wrapper.ge-light h3, .wrapper.ge-light h4,
.wrapper.ge-light-deep h1, .wrapper.ge-light-deep h2, .wrapper.ge-light-deep h3, .wrapper.ge-light-deep h4 { color: var(--black); }
.wrapper.ge-light p, .wrapper.ge-light li,
.wrapper.ge-light-deep p, .wrapper.ge-light-deep li { color: var(--gray) !important; }
.wrapper.ge-light strong, .wrapper.ge-light-deep strong { color: var(--black); }
.wrapper.ge-light em, .wrapper.ge-light .gold,
.wrapper.ge-light-deep em, .wrapper.ge-light-deep .gold { color: var(--gold-accessible); font-style: normal; }

/* The purple band is lighter than the black ones, so its body copy has to run
   brighter to hold the same contrast. Keyed on the id so it beats .ge-dark,
   which is declared later with the same specificity. */
#platform p, #platform li { color: rgba(255, 255, 255, 0.95) !important; }

/* the template's diagonal line pattern, as used on the draws hero */
.ge-pattern {
  background-image: url("assets/css/images/intro.svg");
  background-size: 100% 100%;
  background-position: top right;
  background-repeat: no-repeat;
}
.ge-pattern-faint {
  background-image: url("assets/css/images/intro-faint.svg");
  background-size: 100% 100%;
  background-position: top right;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 1280px) { .ge-pattern-faint { background-attachment: scroll; } }

/* --------------------------------------------------------- spotlights ----
   The template's own zig-zag image panels, used exactly as
   draws.integrimark.co.uk uses them. main.js lifts each <img> into the
   panel's background and hides the element, so the markup stays semantic.
   Two things have to be re-pointed: the template's purple reveal curtain,
   and the panel tints, which are keyed to a dark canvas upstream. */
.spotlights > section > .image:before { background: var(--black) !important; }
.wrapper.spotlights.ge-light > section:nth-child(2) { background-color: var(--cream-deep); }
.wrapper.spotlights.ge-light > section:nth-child(3) { background-color: #EFECE2; }
/* zig-zag, desktop only: below the template's 980px breakpoint the panels
   stack, and a flex-direction here would beat that */
@media (min-width: 981px) {
  .spotlights > section:nth-child(2n) { flex-direction: row-reverse; }
}
.spotlights > section > .content > .inner { max-width: 40em; }
.spotlights h2 { font-size: 1.5em; }
/* the panels carry their own rhythm; they must not inherit the tall section
   padding used by the prose sections */
.spotlights > section > .content { padding: 5em 5em 3em 5em; }
@media (max-width: 1680px) { .spotlights > section > .content { padding: 4.5em 4em 2.5em 4em; } }
@media (max-width: 736px)  { .spotlights > section > .content { padding: 3.5em 2em 2em 2em; } }
/* stacked, the template gives each panel a 50vh image, which on a phone is a
   screen and a half of photograph before any of the copy is reached */
@media (max-width: 980px) { .spotlights > section > .image { height: 38vh; min-height: 13em; } }

/* ---------------------------------------------------------------- hero ----
   The hero fills the viewport and centres its content vertically, on the
   phone as well as the desktop. The template drops min-height to 0 at 736px,
   which is what used to leave it short and top-aligned; svh is used so the
   mobile address bar cannot push the content out of view, with vh as the
   fallback for browsers without it. The 64px is the fixed header, which
   #wrapper already reserves as padding. */
#intro.wrapper.fullscreen {
  padding: 0;
  min-height: calc(100vh - 64px);
  min-height: calc(100svh - 64px);
  justify-content: center;
}
@media (max-width: 1280px) {
  #intro.wrapper.fullscreen {
    min-height: calc(100vh - 64px);
    min-height: calc(100svh - 64px);
  }
}
#wrapper > #intro.wrapper > .inner { padding-top: 3em; padding-bottom: 3em; }
#intro h1 { line-height: 1.25; margin-bottom: 0.5em; }
#intro .ge-lede { font-size: 1.05em; max-width: 32em; margin-bottom: 1.6em; }
@media (max-width: 736px) {
  #wrapper > #intro.wrapper > .inner { padding-top: 2em; padding-bottom: 2em; }
  #intro h1 { margin-bottom: 0.45em; }
  #intro .ge-lede { font-size: 1em; margin-bottom: 1.4em; }
}

/* --------------------------------------------------------------- buttons -- */
/* the template forces a transparent pill with an ::after overlay and white
   text, all with !important, so each of those has to be undone explicitly */
.button.ge-gold {
  background: var(--gold) !important;
  border: 0 !important;
  color: #1a1508 !important;
  font-weight: bold;
}
.button.ge-gold::after { content: none !important; }
.button.ge-gold:hover { background: var(--gold-soft) !important; }
.button.ge-outline {
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold-soft) !important;
}
.button.ge-outline::after { content: none !important; }
.button.ge-outline:hover { background: rgba(196, 173, 102, 0.12) !important; color: var(--white) !important; }
.wrapper.ge-light .button.ge-outline, .wrapper.ge-light-deep .button.ge-outline {
  border-color: rgba(139, 115, 40, 0.5) !important;
  color: var(--gold-accessible) !important;
}
.wrapper.ge-light .button.ge-outline:hover, .wrapper.ge-light-deep .button.ge-outline:hover {
  background: rgba(196, 173, 102, 0.1) !important; color: var(--black) !important;
}

/* ----------------------------------------------------------------- prose -- */
.ge-prose { max-width: 42em; }
.ge-prose p { font-size: 1em; }
.ge-rule { display: block; width: 40px; height: 1px; background: var(--gold); opacity: .6; margin-bottom: 1.6em; }

/* two-up block for "Records, and outcomes" */
.ge-two { display: grid; grid-template-columns: 1fr; gap: 2em; margin-top: 2.4em; }
@media (min-width: 800px) { .ge-two { grid-template-columns: 1fr 1fr; gap: 3em; } }
.ge-two h3 { font-size: 1.1em; margin-bottom: 0.5em; }

/* list of boundaries in "What we are not" */
.ge-points { list-style: none; padding: 0; margin: 2em 0 0; }
.ge-points li { padding: 0 0 1.3em 0; margin: 0; border-bottom: 1px solid rgba(196, 173, 102, 0.18); margin-bottom: 1.3em; }
.ge-points li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

/* ------------------------------------------------------------ pull quote -- */
.ge-quote {
  font-size: 1.5em; line-height: 1.45; font-weight: bold;
  color: var(--gold-soft) !important;
  max-width: 20em; margin: 2.2em 0 0; padding: 1.2em 0;
  border-top: 1px solid rgba(196, 173, 102, 0.25);
  border-bottom: 1px solid rgba(196, 173, 102, 0.25);
}

/* ============================================== integriMark wordmark =======
   Exactly as it renders on the demo: "integri" white, "Mark" gold, with the
   slow shimmer. It needs a dark ground, so it is only used in dark sections.
   ============================================================================ */
.im-wordmark {
  display: inline-block; font-family: var(--sans); font-weight: bold;
  letter-spacing: 0.02em; text-transform: none; text-decoration: none;
  border-bottom: none !important; font-size: 2em;
}
.im-tm { font-size: 0.42em; vertical-align: super; color: rgba(255, 255, 255, 0.68); font-weight: normal; margin-left: 2px; letter-spacing: 0; }
.im-wordmark .im-integri, .im-wordmark .im-mark {
  background-repeat: no-repeat;
  background-size: 260% 100%, 100% 100%;
  background-position: -160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: imshine 9s ease-in-out infinite;
}
.im-wordmark .im-integri {
  background-image:
    linear-gradient(110deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(#ffffff, #ffffff);
}
.im-wordmark .im-mark {
  background-image:
    linear-gradient(110deg, rgba(255,255,255,0) 42%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 58%),
    linear-gradient(var(--gold-lite), var(--gold-lite));
}
@keyframes imshine {
  0%, 62% { background-position: -160% 0, 0 0; }
  92%, 100% { background-position: 260% 0, 0 0; }
}
/* inline in running copy: same two tones, no shimmer */
.im-name .im-integri { color: #ffffff; }
.im-name .im-mark { color: var(--gold-lite); }
.ge-platform-mark { margin: 1.8em 0 1.2em; }

/* ================================================================= TEAM ==== */
.ge-team { display: grid; grid-template-columns: 1fr; gap: 2.2em; margin-top: 2.6em; }
@media (min-width: 700px) { .ge-team { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .ge-team { grid-template-columns: repeat(3, 1fr); } }
.ge-member { display: flex; flex-direction: column; }
.ge-photo { width: 110px; height: 110px; overflow: hidden; margin-bottom: 1.1em; border: 1px solid rgba(196, 173, 102, 0.35); }
.ge-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%) contrast(1.02) brightness(.96); transition: filter .5s ease; display: block; }
.ge-member:hover .ge-photo img { filter: none; }
.ge-name { font-size: 1.1em; font-weight: bold; color: var(--black); margin-bottom: 0.15em; }
.ge-role { font-size: 0.72em; font-weight: bold; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-small); margin-bottom: 0.9em; }
.ge-bio { font-size: 0.92em; line-height: 1.7; margin-bottom: 0.8em !important; }
.ge-linkedin { font-size: 0.78em; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-small) !important; }

/* ================================================================== FAQ ==== */
.ge-faq { max-width: 44em; margin-top: 2.4em; }
.ge-faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.ge-faq-item:first-of-type { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ge-faq-item summary {
  list-style: none; cursor: pointer; padding: 1.1em 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5em;
  font-size: 1.05em; font-weight: bold; color: var(--white);
  transition: color .2s ease;
}
.ge-faq-item summary::-webkit-details-marker { display: none; }
.ge-faq-item summary:hover, .ge-faq-item[open] summary { color: var(--gold-soft); }
.ge-faq-item summary::after { content: "+"; font-size: 1.3em; font-weight: normal; color: var(--gold); flex-shrink: 0; line-height: 1; }
.ge-faq-item[open] summary::after { content: "\2212"; }
.ge-faq-item p { padding-bottom: 1.4em; font-size: 0.95em; line-height: 1.75; max-width: 40em; }

/* =============================================================== FOOTER ==== */
#ge-footer {
  background: var(--gray-dark);
  color: rgba(255, 255, 255, 0.82);
  padding: 4em 0 2em;
  border-top: 1px solid rgba(196, 173, 102, 0.12);
}
/* footer type runs smaller than body copy, and the contact address is sized to
   sit on one line on a phone rather than break across two */
#ge-footer p { font-size: 0.85em; }
#ge-footer p.ge-foot-email { font-size: 0.8em; }
@media (max-width: 736px) { #ge-footer p.ge-foot-email { font-size: 0.72em; } }
#ge-footer .inner { max-width: 75em; margin: 0 auto; padding: 0 4em; }
@media (max-width: 736px) { #ge-footer .inner { padding: 0 2em; } }
.ge-foot-top { display: flex; flex-wrap: wrap; gap: 2.5em; margin-bottom: 3em; }
.ge-foot-col { flex: 1 1 240px; min-width: 0; }
.ge-foot-col-narrow { flex: 0 1 260px; }
/* below the template's breakpoint the columns simply stack, so a long address
   can never be pushed sideways */
@media screen and (max-width: 736px) {
  .ge-foot-top { display: block; }
  .ge-foot-col { width: 100%; }
  .ge-foot-col + .ge-foot-col { margin-top: 2.2em; }
}
#ge-footer a, .ge-foot-desc, .ge-foot-legal, .ge-foot-legal p { overflow-wrap: anywhere; word-break: break-word; }
.ge-foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 1.2em; }
.ge-foot-brand img { width: 40px; height: 40px; object-fit: contain; opacity: .85; }
.ge-foot-brand span { color: var(--gold); font-size: 0.8em; font-weight: bold; letter-spacing: .07em; text-transform: uppercase; }
.ge-foot-tag { color: var(--gold-soft) !important; font-size: 1em; margin-bottom: 1em !important; }
.ge-foot-desc { font-size: 0.85em !important; line-height: 1.75; color: rgba(255, 255, 255, 0.80) !important; max-width: 26em; }
.ge-foot-title { color: var(--gold); font-size: 0.85em; font-weight: bold; margin-bottom: 0.7em; }
#ge-footer a { color: var(--gold) !important; border-bottom: 0 !important; }
#ge-footer a:hover { color: var(--white) !important; }
.ge-foot-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: 1.6em; font-size: 0.75em !important; line-height: 1.85;
  color: rgba(255, 255, 255, 0.66) !important;
}
.ge-foot-legal p { margin-bottom: 0.2em !important; font-size: 1em !important; color: inherit !important; }

@media (prefers-reduced-motion: reduce) {
  .header-brand, .header-contact a, .im-wordmark .im-integri, .im-wordmark .im-mark { animation: none; }
  .logo-seal, .logo-seal img { transition: none; }
}