/* ==========================================================================
   Legacy Creators — stylesheet
   Plain CSS. No build step, no framework. Edit this file directly.

   The colours, fonts and spacing all come from the variables in :root below.
   Change a value there and it updates everywhere on the site.
   ========================================================================== */

:root {
  /* --- Brand colours ---------------------------------------------------- */
  --bg:            #242424;  /* dark charcoal page background */
  --bg-raised:     #2e2e2e;  /* slightly lighter, used for cards */
  --bg-deep:       #1b1b1b;  /* darker, used for the footer */
  --gold:          #d2ac50;  /* brand gold accent */
  --gold-bright:   #e5c274;  /* lighter gold, used for hover states */
  --text:          #ececec;  /* main body text */
  --text-muted:    #b4b4b4;  /* secondary text, captions */
  --border:        #3d3d3d;  /* hairline borders */

  /* --- Type ------------------------------------------------------------- */
  /* System fonts: they load instantly because they are already on the
     visitor's device. No Google Fonts request, so nothing blocks rendering. */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-head: Georgia, "Times New Roman", serif;

  /* --- Layout ----------------------------------------------------------- */
  --measure: 68rem;   /* maximum width of the page content */
  --narrow:  44rem;   /* maximum width of long text, for readability */
  --gap:     clamp(3rem, 8vw, 6rem);  /* vertical space between sections */
  --radius:  10px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Stops iOS bumping up font sizes when the phone is turned sideways. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-bright); }

/* Visible keyboard focus ring — important for accessibility. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Hidden visually but still read out by screen readers. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link — appears when tabbed to, lets keyboard users jump the nav. */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--bg);
  padding: 0.75rem 1.25rem; z-index: 200; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Headings and text
   -------------------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.2;
  font-weight: 400;
  margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.1rem, 5.5vw, 3.4rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); font-family: var(--font-body); font-weight: 600; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

/* The one-sentence summary that sits under a section heading. */
.lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: var(--narrow);
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

section { padding-block: var(--gap); }

/* A hairline rule between sections. */
section + section { border-top: 1px solid var(--border); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.site-header__logo img { height: 44px; width: auto; }

/* The wordmark is an image (logo-text.svg), not text, because the script
   font it uses is not licensed for delivery on the web. This has to beat
   ".site-header__logo img" on specificity (class+element vs. class alone),
   or the 44px icon height wins and the wordmark never actually shrinks. */
.site-header__logo img.site-header__wordmark { height: 32px; width: auto; }

/* The full lockup (icon + wordmark) is wider than the text it replaced, so
   on narrow screens it needs to shrink to avoid overflowing next to the
   nav. Flex items don't shrink below their intrinsic size by default. */
@media (max-width: 30rem) {
  .site-header__logo img { height: 34px; }
  .site-header__logo img.site-header__wordmark { height: 25px; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
}
.site-nav a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--gold);
  color: #1b1b1b;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.9rem 1.8rem;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #1b1b1b; }

.btn--ghost { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: rgba(210, 172, 80, 0.12); color: var(--gold-bright); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 10vw, 7rem); }

.hero h1 { max-width: 20ch; }

.hero__statement {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  color: var(--text);
  max-width: var(--narrow);
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Cards (services)
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: 3rem;
}

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.card h3 { color: var(--gold); margin-bottom: 0.35rem; }
.card p { color: var(--text-muted); font-size: 0.98rem; }

/* The industry name for the service, kept as a small subtitle so the heading
   can say what the work actually does in plain words. */
.card__label {
  font-size: 0.8rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
  margin-bottom: 0.9rem;
}

/* --------------------------------------------------------------------------
   Founder
   -------------------------------------------------------------------------- */

.founder {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 48rem) {
  .founder { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
}

.founder__photo {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%;
}

.founder__name { color: var(--gold); margin-bottom: 0.25rem; }
.founder__role { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   Why this matters — the explanatory section above the services
   -------------------------------------------------------------------------- */

.reasoning {
  max-width: var(--narrow);
  margin-top: 2rem;
}

.reasoning p {
  margin-bottom: 1.3rem;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
}
.reasoning p:last-child { margin-bottom: 0; }

.reasoning strong { color: var(--text); font-weight: 600; }

/* An abbreviation with a tooltip. Dotted underline signals it can be
   hovered; the title attribute carries the expansion. */
.reasoning abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.25em;
  cursor: help;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

/* Answers are always visible — never collapsed. Hidden text is skipped by
   reader modes and is harder to reach with a screen reader, and this is the
   section most likely to be quoted by an AI assistant. */

.faq { max-width: var(--narrow); margin-top: 2.5rem; }

.faq__item {
  border-bottom: 1px solid var(--border);
  padding-block: 1.5rem;
}
.faq__item:last-child { border-bottom: none; }

.faq__item h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

/* The gold rule under each question replaces the old +/− toggle as the
   visual separator between question and answer. */
.faq__item h3::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  background: var(--gold);
  margin-top: 0.7rem;
}

.faq__item p {
  margin-top: 0.9rem;
  margin-bottom: 0;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Lead capture form
   -------------------------------------------------------------------------- */

.audit-form {
  max-width: 34rem;
  margin-top: 2.5rem;
  display: grid;
  gap: 1.1rem;
}

.field { display: grid; gap: 0.4rem; }

.field label { font-size: 0.9rem; font-weight: 600; }

.field input {
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  width: 100%;
}
.field input::placeholder { color: #7d7d7d; }
.field input:focus { border-color: var(--gold); }

.form-note { font-size: 0.85rem; color: var(--text-muted); }

/* Honeypot — a decoy field. Real people never see it, bots fill it in. */
.honeypot { position: absolute; left: -9999px; opacity: 0; }

/* --------------------------------------------------------------------------
   Calendly embed
   -------------------------------------------------------------------------- */

/* Placeholder box shown before the widget is loaded. The Calendly script is
   only fetched when the visitor clicks, so it costs nothing on page load. */
.calendly-holder {
  margin-top: 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.calendly-holder p { color: var(--text-muted); margin-bottom: 1.25rem; }

.calendly-inline-widget { min-width: 320px; height: 700px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--border);
  padding-block: 3.5rem 2.5rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.site-footer__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.site-footer__logo img { height: 130px; width: auto; }

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1rem;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  margin-bottom: 3rem;
}

.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer-links a { color: var(--text-muted); text-decoration: none; }
.footer-links a:hover { color: var(--gold); }

.acknowledgement {
  border-top: 1px solid var(--border);
  padding-top: 2rem;
  max-width: var(--narrow);
  font-style: italic;
}

.colophon {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding-top: 2rem;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Cookie consent banner
   -------------------------------------------------------------------------- */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 100;
  background: var(--bg-deep);
  border-top: 1px solid var(--gold);
  padding: 1.25rem;
}

.consent[hidden] { display: none; }

.consent__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.consent p { font-size: 0.9rem; max-width: 46rem; color: var(--text-muted); }

.consent__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.consent .btn { padding: 0.6rem 1.25rem; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal { max-width: var(--narrow); }
.legal h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-top: 2.75rem; }
.legal h3 { margin-top: 2rem; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: 0.5rem; }
.legal__updated { color: var(--text-muted); font-size: 0.9rem; }

/* Plain-English summary at the top of each legal page. It is a genuine
   summary, not a substitute — the policy itself is what applies. */
.legal__summary {
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 1.4rem 1.5rem;
  margin: 2rem 0 1rem;
  background: rgba(210, 172, 80, 0.04);
}
.legal__summary h2 {
  margin-top: 0;
  font-size: 1rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
}
.legal__summary ul { margin-bottom: 0; }
.legal__summary li { color: var(--text-muted); }

/* Contents list, so long policies stay navigable. */
.legal__toc { margin: 2rem 0; }
.legal__toc ol { padding-left: 1.3rem; color: var(--text-muted); }
.legal__toc li { margin-bottom: 0.3rem; }

/* Tables carry the detail that regulators expect to see itemised: what data,
   what it is for, which legal basis, how long it is kept. */
.legal__table-wrap { overflow-x: auto; margin: 1.5rem 0; }

.legal table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.92rem;
}
.legal th,
.legal td {
  border: 1px solid var(--border);
  padding: 0.7rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.legal th {
  background: rgba(255, 255, 255, 0.03);
  font-weight: 600;
  color: var(--text);
}
.legal td { color: var(--text-muted); }

.legal__note {
  font-size: 0.92rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  padding-top: 1.2rem;
}

/* --------------------------------------------------------------------------
   Respect the visitor's reduced-motion setting
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}