/* ==========================================================================
   The Good Management Company — site stylesheet
   Version 1.0 — August 2026
   Single source of truth for colour, type and spacing across all pages.
   Change values here, not in page templates.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Colour -------------------------------------------------------------
     Two navies, deliberately. Ink is the logo and dark panels only.
     Blue is every piece of type, every button, every link.
     Do not set headings in Ink — at display size it reads as black.        */
  --c-ink:        #16294F;   /* page background                             */
  --c-blue:       #FFFFFF;   /* headings                                    */
  --c-body:       #C7D0E0;   /* body copy                                   */
  --c-muted:      #8494B0;   /* captions, tags, secondary text              */
  --c-rule:       #2A3F69;   /* section dividers                            */
  --c-rule-light: #223558;   /* dividers inside a list                      */
  --c-tint:       #192D55;   /* panel backgrounds                           */
  --c-white:      #16294F;
  --c-accent:     #A9BFE4;

  /* --- Type ---------------------------------------------------------------
     Geometric: headings, nav, buttons, tags. Must be the SAME stack as the
     logo SVG, so mark and headings fall back together.
     Serif: anything read at length — body, intro, FAQ answers, articles.   */
  --f-geo:  Futura, 'Century Gothic', Jost, 'Avenir Next', 'Trebuchet MS', sans-serif;
  --f-serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  --t-h1: 40px;
  --t-h2: 26px;
  --t-h3: 16px;
  --t-body: 15px;
  --t-body-lg: 17px;
  --t-small: 13.5px;
  --t-micro: 12px;

  --lh-tight: 1.22;   /* headings   */
  --lh-read: 1.78;    /* body copy  */

  /* --- Spacing ------------------------------------------------------------ */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 34px;
  --s-5: 58px;
  --s-6: 70px;

  --w-page: 860px;    /* max content width  */
  --w-read: 610px;    /* max width for prose — never wider */
}

/* --- Reset ---------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--c-ink); }
body {
  background: var(--c-ink);
  color: var(--c-body);
  font-family: var(--f-serif);
  font-size: var(--t-body);
  line-height: var(--lh-read);
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s-3); }

/* --- Headings -------------------------------------------------------------
   Always geometric, always regular weight (400). Never bold — bold geometric
   fights the light-weight logo.                                            */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-geo);
  font-weight: 400;
  color: var(--c-blue);
  line-height: var(--lh-tight);
}
h1 { font-size: var(--t-h1); letter-spacing: -0.3px; margin-bottom: var(--s-2); }
h2 { font-size: var(--t-h2); margin-bottom: var(--s-4); }
h3, h4 { font-size: var(--t-h3); margin-bottom: var(--s-1); }

/* --- Prose ---------------------------------------------------------------- */
p { margin-bottom: var(--s-2); max-width: 72ch; }
p:last-child { margin-bottom: 0; }
.lede { font-size: var(--t-body-lg); color: #D6DEEC; }

a { color: var(--c-accent); }

/* --- Interface type -------------------------------------------------------
   Nav, buttons, tags and "read more" links. Geometric, uppercase, tracked.
   The tracking echoes the logo — it is what ties the furniture to the mark. */
.ui, nav a, .btn, .tag, .more {
  font-family: var(--f-geo);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

/* --- Header --------------------------------------------------------------- */
.site-header {
  background: var(--c-ink);
  border-bottom: 1px solid var(--c-rule);
  padding: 26px 0 18px;
  text-align: center;
}
.site-header .mark { display: block; max-width: 640px; margin: 0 auto var(--s-2); text-decoration: none; border: 0; }
.site-header .mark svg { display: block; width: 100%; height: auto; }
nav a { font-size: 12.5px; color: #AFBDD4; text-decoration: none; margin: 0 14px; }
nav a:hover { color: #FFFFFF; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-block;
  background: #FFFFFF;
  color: #16294F;
  padding: 14px 32px;
  border: none;
  border-radius: 2px;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #DDE4EF; }
.btn-quiet { background: transparent; color: var(--c-blue); border: 1px solid var(--c-blue); }

/* --- Sections ------------------------------------------------------------- */
.section { padding: var(--s-5) 0; background: var(--c-ink); }
.section-tint { background: var(--c-tint); border-top: 1px solid var(--c-rule); }
.section-centred { text-align: center; }
.section-centred p { margin-left: auto; margin-right: auto; max-width: var(--w-read); }

/* --- Q&A / list blocks ---------------------------------------------------- */
/* Constrained to the reading measure so the divider rules end where the text
   ends. A rule that runs wider than its own text reads as a stray line.     */
.qa { border-top: 1px solid var(--c-rule); max-width: 660px; margin: 0 auto; }
.qa-item { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-rule-light); }

/* --- Quotations -------------------------------------------------------------
   Used on the testimonials page. Serif, slightly larger than body, with the
   attribution in tracked geometric so it reads as a caption not a sentence. */
.quote blockquote {
  font-family: var(--f-serif);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--c-body);
  border-left: 2px solid var(--c-blue);
  padding-left: 20px;
  margin-bottom: 12px;
}
.quote .attrib {
  font-family: var(--f-geo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--c-muted);
  padding-left: 22px;
}

/* --- Cards ---------------------------------------------------------------- */
/* inline-block rather than grid: renders identically in current browsers and
   in older engines (PDF export, some email clients). font-size:0 on the
   parent removes the whitespace gap between inline-block children.        */
.card-grid { font-size: 0; }
.card {
  display: inline-block;
  vertical-align: top;
  width: 32%;
  margin: 0 2% 22px 0;
  padding: var(--s-3);
  background: transparent;
  border: 1px solid #2A3F69;
  border-radius: 4px;
  font-size: var(--t-body);
}
/* A tinted card on a tinted band disappears — give it a white face instead. */
.card:nth-child(3n) { margin-right: 0; }
.section-tint .card { background: transparent; border: 1px solid #2F4874; }
.card p { font-size: 13.5px; line-height: 1.68; color: #B2BFD4; }
.tag { font-size: 10px; letter-spacing: 1.4px; color: var(--c-muted); margin-bottom: 11px; }
.more { font-size: 11.5px; color: var(--c-accent); text-decoration: none; letter-spacing: 1.1px; }

/* Light cards (insights page): white face, all type in the page navy. */
.card-grid--light .card { background: #FFFFFF; border-color: #FFFFFF; }
.card-grid--light .card h3,
.card-grid--light .card p,
.card-grid--light .tag,
.card-grid--light .more { color: var(--c-ink); }
.card-grid--light .more:hover { text-decoration: underline; }

/* --- Forms ----------------------------------------------------------------
   Labels sit above fields, always visible. Placeholder text is not a label:
   it disappears the moment someone types, and screen readers skip it.      */
.form { max-width: 560px; margin: 0 auto; }
/* Honeypot: invisible to people, tempting to bots. A submission with this
   field filled in is discarded server-side. Cheaper and less annoying than
   a CAPTCHA for a site of this volume. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field { margin-bottom: var(--s-3); text-align: left; }
.field label {
  display: block;
  font-family: var(--f-geo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--c-muted);
  margin-bottom: 7px;
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--f-serif);
  font-size: var(--t-body);
  color: var(--c-body);
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: 2px;
  padding: 12px 14px;
  line-height: 1.6;
}
.field input:focus,
.field textarea:focus { border-color: var(--c-blue); outline: none; box-shadow: 0 0 0 2px rgba(31,58,112,0.12); }
.field textarea { resize: vertical; min-height: 150px; }
.field-actions { text-align: left; }
.field-note { display: block; margin-top: 14px; font-size: 12.5px; color: var(--c-muted); }

/* Centred single line beneath a block. A <p> is capped at 72ch for readability,
   so text-align:center inside one centres within that narrower box, not the
   page — which is why a lone link can sit visibly off-centre.              */
.view-all { text-align: center; margin-top: var(--s-4); }
.view-all a { font-family: var(--f-geo); font-size: 12px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--c-accent); text-decoration: none; }

/* --- Search and pagination --------------------------------------------------
   The search field needs a real backend: on a static site that means a small
   client-side index (Lunr, Pagefind); on a hosted platform, the built-in
   search. It is not functional as markup alone.                            */
.search { max-width: 460px; margin: 0 auto var(--s-4); position: relative; }
.search input {
  width: 100%;
  font-family: var(--f-serif);
  font-size: var(--t-body);
  color: var(--c-body);
  background: var(--c-white);
  border: 1px solid var(--c-rule);
  border-radius: 2px;
  padding: 12px 16px;
}
.search input:focus { border-color: var(--c-blue); outline: none; box-shadow: 0 0 0 2px rgba(31,58,112,0.12); }
.search input::placeholder { color: #A8B0BC; }

/* Insights: white search field, navy type. */
.search--light input { background: #FFFFFF; color: var(--c-ink); border-color: #FFFFFF; }
.search--light input::placeholder { color: #6B7A95; }
.search--light input:focus { border-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(169,191,228,0.45); }

/* Insights listing band: top padding matches the space below the search
   field (its margin + the filter row + the filter margin), so the field
   sits midway between the white banner and the first row of cards.     */
.section-listing { padding-top: 95px; }

.search-status { text-align: center; font-size: 13px; color: var(--c-muted); margin: -18px 0 22px; }
.filters { text-align: center; margin-bottom: var(--s-4); }
.filters a {
  font-family: var(--f-geo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--c-muted);
  text-decoration: none;
  margin: 0 10px;
  white-space: nowrap;
}
.filters a:hover, .filters a[aria-current="true"] { color: var(--c-blue); }

.pagination { text-align: center; padding-top: var(--s-4); border-top: 1px solid var(--c-rule); margin-top: var(--s-4); }
.pagination .count { display: block; font-size: 13px; color: var(--c-muted); margin-bottom: 16px; }

/* --- Imagery --------------------------------------------------------------
   Full-bleed, shallow band, roughly 2:1. Never a tall hero.
   One image per page maximum. Real buildings or illustration only —
   no stock photography.                                                     */
.band { border-top: 1px solid var(--c-rule); border-bottom: 1px solid var(--c-rule); background: var(--c-tint); overflow: hidden; }
.band img { display: block; width: 100%; height: auto; }

/* --- Print / PDF ------------------------------------------------------------
   Keep a heading with the block it introduces. Without this a card grid can
   be orphaned onto the next page, leaving a heading over empty space.       */
@media print {
  .card-grid, .card, .qa-item, figure.band { page-break-inside: avoid; break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; break-after: avoid; }
  .section { page-break-inside: auto; }
}

/* --- Cookie banner --------------------------------------------------------
   Accept and Reject are deliberately the same size and weight: refusing must
   be as easy as agreeing.                                                    */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: #FFFFFF; color: #16294F;
  border-top: 1px solid #DDE2EA;
  box-shadow: 0 -6px 24px rgba(10, 20, 40, 0.18);
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: var(--w-page); margin: 0 auto;
  display: flex; align-items: center; gap: 20px 28px; flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1 1 380px; margin: 0;
  font-family: var(--f-serif); font-size: 14px; line-height: 1.6; color: #16294F;
}
.cookie-banner__text a { color: #16294F; text-decoration: underline; }
.cookie-banner__actions { display: flex; gap: 12px; flex: 0 0 auto; }
.cookie-btn { background: #16294F; color: #FFFFFF; padding: 12px 26px; min-width: 120px; }
.cookie-btn:hover { background: #1D3663; }
.cookie-btn:focus-visible { outline: 2px solid #16294F; outline-offset: 3px; }
@media (max-width: 560px) {
  .cookie-banner__actions { width: 100%; }
  .cookie-btn { flex: 1; }
}
@media print { .cookie-banner { display: none !important; } }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: #101E3B; padding: var(--s-4) 0; text-align: center; }
.site-footer .mark { display: block; max-width: 520px; margin: 0 auto var(--s-2); text-decoration: none; border: 0; }
.site-footer .mark svg { display: block; width: 100%; height: auto; }
.site-footer .foot-links { margin-bottom: 18px; }
.site-footer .foot-links a {
  font-family: var(--f-geo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: #B6C2DA;
  text-decoration: none;
  margin: 0 10px;
}
.site-footer .foot-links a:hover { color: #FFFFFF; }
.site-footer .legal {
  font-family: var(--f-serif);
  font-size: 12px;
  line-height: 1.85;
  color: #8E9BB2;
  margin-bottom: 14px;
}
.site-footer .legal a { color: #B6C2DA; }
.site-footer .line { color: #6F7C93; font-size: 11.5px; }

/* --- Responsive -----------------------------------------------------------
   Single breakpoint. Below it: cards stack, headings drop, logo switches to
   the stacked SVG (swap the file, do not scale the wide one down).         */
@media (max-width: 700px) {
  :root { --t-h1: 28px; --t-h2: 23px; --s-5: 44px; --s-6: 50px; }
  .card { width: 100%; margin-right: 0; }
  nav a { margin: 0 8px; font-size: 11px; letter-spacing: 0.8px; }
  .site-header .mark { max-width: 300px; }
  .site-footer .mark { max-width: 285px; }
}

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

/* --- Accessibility --------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }


/* Emphasised phrase in body copy: regular weight, heading colour.
   Turns navy automatically inside .section-white. */
.emph { font-weight: 400; color: var(--c-blue); }

/* --- White sections ----------------------------------------------------------
   Rule: one white section per page, on whatever that page most wants read.
   Not alternated — navy and white in rhythm reads as stripes and loses the
   point of a dark site. Long stretches of reading go white; short assertive
   sections stay navy.                                                        */
.section-white {
  background: #FFFFFF;
  border-top: 1px solid #0F2246;
  border-bottom: 1px solid #0F2246;
}
.section-white h1, .section-white h2,
.section-white h3, .section-white h4 { color: #16294F; }
.section-white p { color: #4A5568; }
.section-white .lede { color: #3D4A5C; }
.section-white .tag { color: #7C8AA3; }
.section-white .qa { border-top-color: #E2E6EC; }
.section-white .qa-item { border-bottom-color: #ECEFF3; }
.section-white .emph { color: #16294F; }
.section-white .card { border-color: #DDE2EA; }
.section-white .card p { color: #56606F; }
.section-white .more, .section-white a { color: #16294F; }
.section-white .btn { background: #16294F; color: #FFFFFF; }
.section-white .btn:hover { background: #1D3663; }
.section-white .field label { color: #7C8AA3; }
.section-white .field input,
.section-white .field textarea { background: #FFFFFF; color: #16294F; border-color: #C9D1DD; }
.section-white .field-note { color: #7C8AA3; }


/* Header sits white: nav links and the mark go dark to suit. */
.site-header.section-white { background: #FFFFFF; border-bottom: 1px solid #E4E7EC; }
.site-header.section-white nav a { color: #4A5462; }
.site-header.section-white nav a:hover { color: #16294F; }