/*
Theme Name: MMAPS Custom
Theme URI: https://mmaps.co.nz
Author: Elijah Short Web Design
Author URI: https://elijahshort.co.nz
Description: Bespoke, hand-coded theme for Maintenance Management and Procurement Services Ltd. No page builder. Built to Hugh Garrod's Rev1c brief.
Version: 1.0
Text Domain: mmaps
*/

/* ---------- Design tokens ---------- */
:root{
  --teal: #006666;
  --teal-dark: #004d4d;
  --teal-panel: #0d5c5c;
  --cream: #fdfaf1;
  --ink: #1a1a1a;
  --paper: #ffffff;
  --line: #d8d3c4;
  --eyebrow: #4a9c9c;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --max: 1180px;
  --gap: 1.75rem;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
}
img{ max-width:100%; display:block; }
a{ color: var(--teal); text-decoration: none; }
a:hover{ text-decoration: underline; }
.container{ max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--teal);
  line-height: 1.15;
  margin: 0 0 .6em;
}
h1{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h2{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h3{ font-size: 1.15rem; }

/* ---------- Section eyebrow (Section 01-06 numbering motif) ---------- */
.eyebrow{
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin-bottom: .75rem;
}
.eyebrow .num{
  display:inline-block;
  border: 1px solid var(--eyebrow);
  padding: .15em .5em;
  color: var(--teal);
}

/* ---------- Technical-drawing corner ticks ---------- */
.ticked{
  position: relative;
}
.ticked::before,
.ticked::after{
  content:"";
  position:absolute;
  width: 14px;
  height: 14px;
  pointer-events:none;
}
.ticked::before{ /* top-left */
  top:-1px; left:-1px;
  border-top: 2px solid var(--teal);
  border-left: 2px solid var(--teal);
}
.ticked::after{ /* top-right */
  top:-1px; right:-1px;
  border-top: 2px solid var(--teal);
  border-right: 2px solid var(--teal);
}
.ticked-light::before, .ticked-light::after{
  border-color: rgba(255,255,255,.55);
}

/* ---------- Header ---------- */
.site-header{
  border-bottom: 3px solid var(--teal);
  background: var(--paper);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 1rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.brand{ display:flex; align-items:baseline; gap: .9rem; }
.brand .logo{
  font-family: Impact, "Archivo", sans-serif;
  font-weight: 400;
  font-size: 2.6rem; /* enlarged per Hugh's 11-8-2026 comments */
  letter-spacing: .03em;
  color: var(--teal);
  text-decoration:none;
}
.brand .tagline{
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;              /* bolder, Hugh 16-8-2026 */
  letter-spacing: .05em;
  color: #3a3a3a;
  text-transform: uppercase;
}
.primary-nav ul{
  list-style:none; display:flex; flex-wrap:wrap;
  gap: 1.1rem; margin:0; padding:0;
}
.primary-nav a{
  font-family: var(--font-mono);
  font-size: .86rem;
  font-weight: 500; /* bolder links per Hugh's 11-8-2026 comments */
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Slash separators between links so each stands out (Hugh 11-8-2026).
   Desktop only — switched off in the stacked mobile menu below. */
.primary-nav li + li::before{
  content:"/";
  color: var(--line);
  margin-right: 1.1rem;
  font-family: var(--font-mono);
}
.primary-nav a:hover,
.primary-nav .current-menu-item a{ color: var(--teal); text-decoration:none; border-bottom:2px solid var(--teal); }

/* ---------- Hero ---------- */
.hero{ background: var(--cream); padding: 1.6rem 0 1.7rem; border-bottom:1px solid var(--line); }
/* Home heading on a single line where the viewport allows (Hugh 17-8-2026). */
.hero h1{ text-align:center; max-width: none; margin: 0 auto .25rem; white-space:nowrap; font-size:clamp(1.3rem,2.6vw,2rem); }
@media (max-width:900px){ .hero h1{ white-space:normal; } }
.hero .sub{
  text-align:center; max-width: 60ch; margin: 0 auto 1.1rem;
  color:#3f3f3f; font-size: 1rem;
}
/* 7 photos on one level on desktop (Hugh: "all on one level if
   practicable"), wrapping to sensible grids on tablet and phone. */
.hero-photos{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .5rem;
}
.hero-photos img{ width:100%; height: 96px; object-fit: cover; border: 1px solid var(--line); }
/* Caption style standardised on the Home-page portrait caption
   (Hugh 18-8-2026). Case is deliberately left as each caption already
   reads — this one stays sentence case. */
.hero-caption{
  text-align:center; margin-top:.75rem;
  font-family: var(--font-mono); font-size:.72rem; font-weight:400;
  letter-spacing:.04em; color: var(--teal);
}
@media (max-width: 1024px){
  .hero-photos{ grid-template-columns: repeat(4, 1fr); }
  .hero-photos img{ height: 140px; }
}
/* Dots for the phone hero slider (hidden on desktop). */
.hero-dots{ display:none; }

@media (max-width: 820px){
  /* Hero photos become a swipeable, one-at-a-time slider on phones and small
     tablets. Seven stacked photos pushed page content 511px down the screen
     (13-8-2026 mobile audit); as a slider the same seven take about 283px.
     Pure CSS, so it still works with JavaScript disabled. The dots are added
     by mmaps_hero_slider_dots() as a progressive enhancement. */
  .hero-photos{
    display:flex;
    grid-template-columns:none;
    gap:0;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .hero-photos::-webkit-scrollbar{ display:none; }
  .hero-photos img{
    flex:0 0 100%;
    scroll-snap-align:center;
    height:200px;
  }
  .hero-dots{ display:flex; justify-content:center; gap:.2rem; margin-top:.4rem; }
  .hero-dots button{
    width:40px; height:32px; padding:0; border:0; background:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .hero-dots button::after{
    content:""; width:7px; height:7px; border-radius:50%;
    background:#bfb9a8; transition:background .2s, transform .2s;
  }
  .hero-dots button[aria-current="true"]::after{
    background:var(--teal); transform:scale(1.35);
  }
}
@media (max-width: 480px){
  .hero-photos img{ height: 180px; }
}

/* ---------- Overview / prose sections ---------- */
/* Compaction pass, Hugh 16-8-2026: tighter vertical rhythm throughout. */
.section{ padding: 2.2rem 0; }
.section + .section{ border-top: 1px solid var(--line); }
.prose p{ max-width: 74ch; margin: 0 0 .85em; }
.prose{ margin-bottom: 1.5rem; }
/* Home intro flows across the full page width per Hugh's 11-8-2026
   comments (1993 facts card removed so the panels sit higher). */
.prose-wide p{ max-width: none; }
/* Toolkit page: intro paragraphs spread across the page width
   (Hugh 11-8-2026) — its content wrapper carries .prose in wp-admin. */
.content-block.prose p{ max-width: none; }

/* ---------- Service summary panels (Home) ---------- */
.panels{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  /* stretch all cards to the depth of the deepest (Hugh 11-8-2026) */
  align-items:stretch;
}
/* 2 columns up to 1100px — at 4-across below that, columns get narrow
   enough that panel headings wrap to 3-4 lines and lose the alignment
   Hugh asked for (12-8-2026 mobile audit). */
@media (max-width: 1100px){ .panels{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .panels{ grid-template-columns: 1fr; } }

.panel{
  background: var(--teal-panel);
  color: #fff;
  padding: 1.1rem 1.1rem 1.2rem;   /* tighter, Hugh 17-8-2026 */
  display:flex; flex-direction:column;
  position: relative;
}
/* Reserve two lines for every panel heading and two for every kicker so
   headings and first bullets align across panels (Hugh 11-8-2026).
   Slightly smaller heading font so panel 04's long title fits 2 lines. */
.panel h2{ color:#fff; font-size: .95rem; line-height:1.2; margin-bottom:.1em; min-height: 2.3em; }
.panel .kicker{
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.03em;
  color: #bfe3e3; text-transform:none; font-style:italic; margin-bottom:.55em;
  min-height: 2.6em;
}
@media (max-width: 600px){
  .panel h2, .panel .kicker{ min-height: 0; } /* stacked cards need no alignment */
}
/* Every service is listed now (Hugh 17-8-2026), so the type and leading come
   down to keep the four panels a sensible depth. */
.panel ul{ margin:0 0 .9em; padding-left: .95em; font-size:.78rem; line-height:1.32; flex-grow:1; }
.panel li{ margin-bottom:.18em; }
.panel li.more{ list-style:none; padding-left:0; margin-top:.6em; }
.panel li.more a{ color:#bfe3e3; font-family: var(--font-mono); font-size:.78rem; letter-spacing:.03em; }
.panel .panel-link{
  align-self:flex-start;
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; border:1px solid rgba(255,255,255,.6); padding:.45em .9em;
}
.panel .panel-link:hover{ background:#fff; color: var(--teal-panel); text-decoration:none; }

/* ---------- Footer (Section 06) ---------- */
.site-footer{
  background: var(--teal-dark);
  color: #eaf3f3;
  padding: 1.7rem 0 1.4rem;   /* compaction 17-8-2026 */
}
.site-footer a{ color:#fff; }
.footer-grid{
  display:grid; grid-template-columns: 1.3fr 1fr; gap: 1.4rem;
}
/* Footer nav in two columns so it stops being a tall single stack. */
.site-footer .footer-grid ul{ columns:2; column-gap:1rem; }
@media (max-width: 700px){ .footer-grid{ grid-template-columns: 1fr; } }
.site-footer h2{ color:#fff; font-size:1rem; margin-bottom:.5em; }
.site-footer .eyebrow{ color:#8fc7c7; }
.site-footer .eyebrow .num{ border-color:#8fc7c7; color:#fff; }
.site-footer p{ margin:.12em 0; font-size:.9rem; line-height:1.45; }
.site-footer .fine{ margin-top:.9rem; font-family: var(--font-mono); font-size:.72rem; color:#9fc9c9; }

/* ---------- Generic content page (used by the 5 inner pages) ---------- */
/* Header blocks reduced and levelled. Hugh 16-8-2026: "page header blocks are
   different heights, and I wonder if some could be reduced a little". They
   ranged 165-224px because the three service pages carry an extra kicker line;
   a min-height evens them up while cutting the tallest by about a third. */
.page-hero{
  background: var(--teal);
  color:#fff;
  padding: 1.35rem 0 1.45rem;
  min-height: 148px;
  display: flex;
  align-items: center;
}
.page-hero .eyebrow{ color:#bfe3e3; margin-bottom:.25rem; }
.page-hero .eyebrow .num{ border-color:#bfe3e3; color:#fff; }
.page-hero h1{ color:#fff; margin-bottom:.12em; line-height:1.1; }
.page-hero .sub{ color:#dff2f2; font-style:italic; margin:0; }

/* .content-block always carries .container on the same element on every
   inner page. .content-block used to declare its own (narrower) max-width,
   which — same specificity, later in the file — silently overrode
   .container's 1180px instead of just adding to it. No max-width rule
   here at all now, so .container's 1180px is the only one in play,
   same as Home, the header, and the footer. */
/* Headings sit close to their own text (Hugh 11-8-2026: "close up") —
   the larger 1.6em gap stays ABOVE each heading to separate sections. */
/* Service headings are h2 for correct document outline; size kept at the
   original 1.15rem so the visual design is unchanged. */
.content-block h2{ font-size:1.15rem; margin-top:1.15em; margin-bottom:.25em; }
.content-block h2 + p{ margin-top:0; }

/* All diagram/flowchart slides render at the same width and centred
   (Hugh 11-8-2026). Small sources scale up to match — soft until
   replaced with Hugh's full PowerPoint slides. */
/* Diagrams as a compact index, FOUR across, matching Hugh's Rev1c layout
   ("see process flow chart below - 4 slides left to right"). Uses CSS grid:
   inline-block could never fit four because the whitespace between elements
   pushed the fourth onto a new row. Sources are 1700px so a ~270px thumbnail
   still opens over 6x larger. */
.diagram-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* centres a partial last row - Hugh 11-8-2026 */
  align-items:flex-start;
  gap:.9rem .8rem;
  margin:1rem 0 1.2rem;
}
.diagram-row > .diagram-figure{ flex:0 0 calc(25% - .6rem); }
.diagram-figure{ margin:0; max-width:none; text-align:center; }
@media (max-width:1000px){ .diagram-row > .diagram-figure{ flex-basis: calc(50% - .4rem); } }
@media (max-width:560px){ .diagram-row > .diagram-figure{ flex-basis: 100%; } }
.diagram-figure img{ border:1px solid var(--line); width:100%; height:auto; margin:0 auto; }
/* Standardised on the Home-page portrait caption (Hugh 18-8-2026);
   diagram captions keep their present Title Case. */
.diagram-figure figcaption{
  font-family: var(--font-mono); font-size:.72rem; font-weight:400;
  letter-spacing:.04em; color: var(--teal); margin-top:.5em;
}
/* Flowchart part numbers sit on their own line (Hugh 19-8-2026). The captions
   on pages 02 and 04 were wrapping mid-parenthetical, leaving "(2 of" on one
   line and "4)" on the next. */
.diagram-figure figcaption .fig-part{ display:block; white-space:nowrap; }

.diagram-figure img{ cursor: zoom-in; }

/* Bolder bullet symbols throughout (Hugh 11-8-2026) */
.content-block ul:not(.checklist){ list-style: square; }
.content-block ul:not(.checklist) li::marker{ color: var(--teal); }
.panel ul{ list-style: square; }

.checklist{ list-style:none; padding:0; margin:0; }
.checklist li{
  padding: .5em 0 .5em 1.6em; position:relative; border-bottom:1px dashed var(--line);
}
.checklist li::before{
  content:"▸"; position:absolute; left:0; color: var(--teal); font-family: var(--font-mono);
  font-weight:700; font-size:1.1em; line-height:1.45;
}


/* Full-width masthead banner (inner pages) */
.site-banner{ line-height:0; }
.site-banner img{ display:block; width:100%; height:auto; max-height:230px; object-fit:cover; object-position:center; }


/* ================= Responsive & mobile (added) ================= */
/* Diagram images never overflow their container */
.diagram-figure img{ max-width:100%; height:auto; }
.content-block img{ max-width:100%; height:auto; }

/* Mobile navigation (added) */
.nav-toggle{ display:none; }
@media (max-width: 820px){
	.nav-toggle{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:46px; height:40px; padding:8px 8px; cursor:pointer; margin-left:auto; }
	.nav-toggle span{ display:block; height:3px; width:100%; background:var(--teal); border-radius:2px; }
	.primary-nav{ flex-basis:100%; order:3; }
	.primary-nav ul{ display:none; flex-direction:column; gap:0; width:100%; }
	#mmaps-nav-toggle:checked ~ .primary-nav ul{ display:flex; }
	.primary-nav li{ border-top:1px solid var(--line); }
	.primary-nav li + li::before{ content:none; } /* no separators in stacked mobile menu */
	.primary-nav a{ display:block; padding:.85rem .2rem; }
}

/* Small-screen typography & spacing */
@media (max-width: 600px){
	.hero h1, .page-hero h1{ font-size: clamp(1.5rem, 7vw, 2.1rem); line-height:1.15; }
	.site-banner img{ max-height:150px; }
	.content-block{ max-width:100%; }
	.container{ padding-left:18px; padding-right:18px; }
	figure[style*="float"]{ float:none !important; max-width:100% !important; margin:1rem 0 !important; }
}


/* ================= Toolkit page (added) ================= */
/* Solid, more pronounced link button (Hugh 11-8-2026) */
.button{ display:inline-block; font-family:var(--font-mono); font-size:.88rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--teal); border:1px solid var(--teal); padding:.85em 1.4em; text-decoration:none; transition:background .15s, color .15s; }
.button:hover{ background:var(--teal-dark); border-color:var(--teal-dark); color:#fff; text-decoration:none; }
/* Equal columns, more compact, larger column headings. Hugh 16-8-2026. */
.toolkit-table{ width:100%; table-layout:fixed; border-collapse:collapse; margin:1.2rem 0; font-size:.86rem; }
/* Centred table text so sections stand out (Hugh 11-8-2026) */
.toolkit-table th{ width:50%; text-align:center; padding:.55em .7em; font-family:var(--font-mono); font-size:.92rem; letter-spacing:.03em; text-transform:uppercase; }
.toolkit-table td{ border:1px solid var(--teal); padding:.45em .6em; vertical-align:top; text-align:center; }
/* "No applicable workbook..." style notes set in italics to distinguish them
   from real entries (Hugh 16-8-2026). Class applied by mmaps_toolkit_notes(). */
.toolkit-table td.tk-note{ font-style:italic; }
@media (max-width:600px){ .toolkit-table{ font-size:.85rem; } .toolkit-table th,.toolkit-table td{ padding:.5em .55em; } }
/* Hugh's original (old-site) colour scheme, exact hex values from the
   Avada build: greens for the Excel column, orange/browns for the
   PowerPoint column. Table is 2 columns, so column selectors do it
   without any markup change. */
.toolkit-table th{ border:1px solid var(--teal); color:#090900; }
.toolkit-table th:first-child{ background:#8dd376; }
.toolkit-table th:last-child{ background:#f1a883; }
.toolkit-table td:first-child{ background:#b7e2a3; }
.toolkit-table td:last-child{ background:#f1c8aa; }

/* ================= About page (Hugh 11-8-2026) ================= */
/* Text keeps one consistent width in the left column; Hugh's photo sits
   in the right column with its top level with the first text row. */
.about-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) 240px;
  gap: 2rem;
  align-items:start;
  margin-bottom: .5rem;
}
.about-grid figure{ margin:0; }
@media (max-width: 700px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-grid figure{ max-width:240px; }
}

/* ---------- Lightbox sizing (Hugh 16-8-2026) ----------
   Previously the overlay capped images at 92vh, so a tall flowchart opened
   SMALLER than it appeared on the page. The overlay now scrolls and the image
   is shown large, guaranteeing the zoom is always bigger than the inline copy. */
.mmaps-lb{ overflow:auto; align-items:flex-start !important; }
/* Never upscale: an image opens at its natural size, capped to the viewport.
   Forcing a fixed width made lower-resolution sources render blurry, which is
   worse than them opening slightly smaller. Consistency of size is solved by
   the sources all being 1700x956, not by stretching them here. */
.mmaps-lb img{ max-width:min(1600px, 96vw) !important; max-height:none !important; width:auto; height:auto; margin:auto; }

/* ---------- Inner-page header block reduced (Hugh 16-8-2026) ----------
   The same seven photos appear on every page. Kept for continuity but made
   much shorter on inner pages, and the caption is left to the Home page. */
/* Inner-page hero overrides removed - the strip is Home-only now. */

/* Tighter first-heading spacing so pages start sooner. */
.content-block h2:first-of-type{ margin-top:.4em; }

/* ---------- Multi-column service copy (Rev1c layout, 17-8-2026) ----------
   Hugh's original is a 1191x842 landscape page: each website page was designed
   to sit on ONE screen. The thirteen service items ran in columns, not as a
   single tall list. Restored here on wide screens only. */
@media (min-width: 1000px){
  body.page-template-template-maintenance-support .content-block .svc,
  body.page-template-template-construction-support .content-block .svc{
    columns: 2; column-gap: 2.6rem;
  }
}
@media (min-width: 1500px){
  body.page-template-template-maintenance-support .content-block .svc{ columns: 3; }
}
/* Each heading travels with its paragraph as one unbreakable unit, otherwise
   the browser splits a heading across two columns mid-word. */
.content-block .svc-item{ break-inside: avoid; page-break-inside: avoid; display:inline-block; width:100%; margin:0 0 .9em; }
.content-block .svc-item h2{ margin-top:0; margin-bottom:.2em; }
.content-block .svc-item p{ margin:0; }
.content-block .svc > *:first-child{ margin-top:0; }

/* About page: the short definition blocks also sit two-up on wide screens. */
@media (min-width: 1000px){
  body.page-template-template-about .content-block .svc{ columns:2; column-gap:2.6rem; }
}

/* ---------- Hugh 17-8-2026 ---------- */

/* Site photo caption: the 17-8 "bolder" override was withdrawn by Hugh on
   18-8-2026 ("boldness reduces image focus") — captions are now standardised
   on the Home-page portrait caption. See .hero-caption above. */

/* Page 02: the delivery model sits alone and centred, then the four
   flowchart slides run on a single line ("all flowchart slides on one line
   and centralise Delivery Model"). */
.diagram-row-4 > .diagram-figure{ flex-basis: calc(25% - .6rem); }
@media (max-width:1000px){ .diagram-row-4 > .diagram-figure{ flex-basis: calc(50% - .4rem); } }
@media (max-width:560px){ .diagram-row-4 > .diagram-figure{ flex-basis:100%; } }

/* Bullets and leading matched to the Maintenance Mission list on page 03,
   so the checklists on pages 03 and 05 read the same as everything else. */
.content-block .checklist{ list-style: square; padding-left:1.15em; margin:0 0 1em; }
.content-block .checklist li{
  padding:0; border-bottom:0; position:static; margin-bottom:.28em; line-height:1.5;
}
.content-block .checklist li::before{ content:none; }
.content-block .checklist li::marker{ color: var(--teal); }

/* About: business values run two-up so the block is compact. */
.values-2col{ columns:2; column-gap:2.4rem; }
.values-2col li{ break-inside:avoid; }
@media (max-width:700px){ .values-2col{ columns:1; } }

/* ---------- Home intro with Hugh's photo (Hugh 17-8-2026, by phone) ----------
   Overview text on the left, photo on the right, service panels underneath. */
.intro-grid{
  display:grid;
  grid-template-columns: minmax(0,1fr) 260px;
  gap: 2rem;
  align-items:start;
  margin-bottom: 1.4rem;
}
.intro-grid .prose{ margin-bottom:0; }
.intro-grid .prose p:first-child{ margin-top:0; }
.intro-photo{ margin:0; }
.intro-photo img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
/* Reference caption. Hugh 18-8-2026: every other image caption on the site is
   standardised on this one for size, weight and colour, each keeping its own case. */
.intro-photo figcaption{
  font-family: var(--font-mono); font-size:.72rem; font-weight:400; letter-spacing:.04em;
  text-transform:uppercase; color: var(--teal); margin-top:.5em;
}
@media (max-width: 860px){
  .intro-grid{ grid-template-columns: 1fr; gap:1.1rem; }
  .intro-photo{ max-width:240px; }
}

/* MMAPS advert on the About page (Hugh 17-8-2026). Kept modest and, unlike the
   diagrams, deliberately not click-to-enlarge. */
.about-advert{ margin:0; }
.about-advert img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
/* Standardised on the Home-page portrait caption (Hugh 18-8-2026);
   this one already read as uppercase, so the case is kept. */
.about-advert figcaption{
  font-family: var(--font-mono); font-size:.72rem; font-weight:400;
  letter-spacing:.04em; text-transform:uppercase; color: var(--teal);
  margin-top:.5em;
}

/* ---------- Sticky footer (17-8-2026) ----------
   With the duplicate contact block removed, Page 06 is just the teal header and
   the footer. Without this the footer would end mid-screen on a tall monitor and
   leave a band of white beneath it. */
body{ display:flex; flex-direction:column; min-height:100vh; }
body > .site-footer{ margin-top:auto; }

/* ---------- Contact is an anchor to the footer, not a page (18-8-2026) ----------
   Hugh: contact details were duplicated on Page 06 and in the footer. Rev1c only
   ever had contact in the footer, so the nav item now jumps there instead. */
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
/* Stop the sticky-footer rule from hiding the top of the footer when jumped to. */
#contact{ scroll-margin-top: 0; }