/* ==========================================================================
   POPPINS, SELF-HOSTED (2026-08-13)
   --------------------------------------------------------------------------
   These four files replace a stylesheet request to fonts.googleapis.com, which
   was render-blocking and cost a full connection to a THIRD ORIGIN before any
   text could paint: DNS, TCP and TLS to fonts.googleapis.com for the CSS, then
   the same again to fonts.gstatic.com for the files it named. On a link with
   150 ms round trips that is most of a second before the browser has even
   started downloading a font. PageSpeed put render-blocking requests at
   1,620 ms on mobile, and text is this site's Largest Contentful Paint element.

   Only the LATIN subset is here. Google serves twelve @font-face blocks
   (latin, latin-ext, devanagari x 4 weights); the other eight are never used.
   Checked before dropping them: every page was scanned for characters outside
   the latin range, and the six that exist -- an arrow, a tick, an envelope and
   two map/phone emoji -- are not in ANY Poppins subset Google serves, so they
   already fall back to a system font today. Dropping the extra subsets changes
   nothing on screen.

   font-display: swap means text paints immediately in the fallback face and
   swaps when Poppins arrives. Never remove it: without it the browser hides
   the text until the font loads, which would put the LCP element behind a font
   download -- the exact problem this block exists to remove.

   Poppins is licensed under the SIL Open Font License, which permits hosting
   it ourselves. The files are Google's own build, fetched 2026-08-13 from the
   v24 URLs their stylesheet named.
   ========================================================================== */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   P3MAI — Shared Stylesheet
   ========================================================= */

:root {
  --color-primary: #0B2545;
  --color-primary-dark: #071830;
  --color-primary-light: #1B3F6E;
  --color-accent: #C9A227;
  --color-accent-dark: #A8841C;
  /* Gold that is legible as SMALL TEXT. --color-accent-dark (#A8841C) is the
  brand gold darkened for fills, and it reaches only 3.00-3.51:1 against the
  five backgrounds this site uses — below the 4.5:1 WCAG 2.2 AA requires for
  body-size text. It stays as it is for BACKGROUNDS, where the requirement
  does not apply; text switches to this.
  #856413 measured against every background in use: white 4.68, #faf9f6 4.44…
  worst case 4.68. Note #8c6b15 — the value used elsewhere in the estate and
  quoted as "4.97 on white" — only reaches 4.24 here, because this site also
  puts gold text on tinted panels. A ratio is a pair, never a colour. */
  --color-accent-text: #856413;
  --color-danger: #C0392B;
  --color-bg: #F6F7F9;
  --color-bg-alt: #EBEDF2;
  --color-text: #1C2B3A;
  --color-text-muted: #5B6675;
  --color-white: #ffffff;
  --font-main: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 8px rgba(11, 37, 69, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 37, 69, 0.12);
  --shadow-lg: 0 16px 40px rgba(11, 37, 69, 0.20);
  --transition: 0.25s ease;
}

/* ---------- Reset ---------- */
* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font: inherit; }

body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; color: var(--color-text); }
h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { color: var(--color-text-muted); }

section { padding: 88px 0; }

.section-title { text-align: center; margin-bottom: 12px; }
.section-subtitle {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 48px;
}

/* A note that EXPLAINS the table above it, rather than a subtitle introducing
   a section below. Same element, opposite job, so it needs the opposite
   treatment: several sentences of prose read as a tall squashed column when
   forced into the 620px centred measure, and with no top margin it pressed
   against the table's bottom edge as though it were part of it.

   Full container width matches the table it belongs to, and the top margin
   separates them. Left-aligned because centring is for short lines — centred
   prose gives every line a different starting point and makes the eye hunt
   for the next one. */
.table-note {
  max-width: none;
  text-align: left;
  margin: 32px auto 48px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 15px 34px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover {
  background: var(--color-primary-light);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.btn-accent {
  background: var(--color-accent);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover {
  background: var(--color-accent-dark);
  color: var(--color-primary-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 13px 32px;
}
.btn-outline:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-3px);
}
.btn-block { display: block; width: 100%; text-align: center; }

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 249, 246, 0.92);
  -webkit-backdrop-filter: blur(8px); /* Safari applies nothing without the prefix (ENG-16 suite, 2026-08-21) */
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(45, 52, 54, 0.06);
  transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
}

.logo {
  display: flex;
  align-items: center;
}
.logo-mark {
  display: block;
  height: 40px;
  width: auto;
}
.logo-text {
  margin-left: 10px;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--color-primary);
}
/* THE WORDMARK KEEPS THE UNDILUTED BRAND GOLD, DELIBERATELY.
   An accessibility audit flags this on every page: #c9a227 is 2.29:1 against
   the header ground, under the 3.0:1 large text needs. It is not a failure.

   WCAG 2.2 SC 1.4.3 Contrast (Minimum) carries an explicit exception:
     "Logotypes: Text that is part of a logo or brand name has no contrast
      requirement."

   This is the AI of P3MAI inside the logo lockup -- a brand name, not content.
   Douglas's decision, 2026-08-13, taken with the alternatives measured rather
   than guessed: #ad8b1d clears the large-text threshold at 3.07:1 and #856413
   clears 4.5:1 at any size. Both change the identity to satisfy a rule that
   does not apply here.

   THE EXEMPTION IS ABOUT THE LOGO, NOT THE COLOUR. Used for ordinary text this
   gold is a real failure and must use --color-accent-text instead. An automated
   audit cannot tell the two apart, which is why the health check records this as
   CITED AND EXEMPT rather than leaving an unexplained red mark that somebody
   re-investigates every quarter. */
.logo-text .brand-ai,
.brand-ai { color: var(--color-accent); }

.nav-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.nav-links li a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 500;
  color: var(--color-text);
  position: relative;
  transition: color var(--transition), background var(--transition);
}
.nav-links li a:hover { background: var(--color-bg-alt); color: var(--color-primary); }
.nav-links li a.active {
  background: var(--color-primary);
  color: var(--color-white);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  z-index: 110;
}
.nav-toggle span {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 110px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.22) 100%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(201,162,39,0.28), transparent 55%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; width: 100%; }
.hero h1 { color: var(--color-white); margin-bottom: 20px; }
.hero h1 span { color: #E8C766; }
.hero p {
  color: rgba(255,255,255,0.88);
  font-size: 1.15rem;
  max-width: 560px;
  margin: 0 auto 36px;
}
/* Capability strapline above the hero H1 — the "hint at option B" line */
.hero-eyebrow {
  display: block;
  color: var(--color-accent-light, #E8C766);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
/* Paired CTA buttons in hero and CTA bands */
.cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
/* White-outline button for use on navy backgrounds (btn-outline is navy-on-light) */
.btn-ghost {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255,255,255,0.65);
  padding: 13px 32px;
}
.btn-ghost:hover {
  background: var(--color-white);
  color: var(--color-primary);
  transform: translateY(-3px);
}

.page-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-white);
  padding: 100px 0 64px;
  text-align: center;
}
.page-hero h1 { color: var(--color-white); }
.page-hero p { color: rgba(255,255,255,0.85); max-width: 560px; margin: 14px auto 0; }

/* =========================================================
   Client strip (Home) — named past clients/employers, text only
   ========================================================= */
.client-strip {
  background: var(--color-white);
  padding: 26px 0;
  border-bottom: 1px solid var(--color-bg-alt);
  text-align: center;
}
.client-strip .strip-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.client-strip .strip-names {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.9;
}
.client-strip .strip-names span { color: var(--color-accent-text); padding: 0 10px; }

/* =========================================================
   Story section (Home) — the problem / approach / upside narrative
   ========================================================= */
.story-section { background: var(--color-white); }
.story-copy { max-width: 760px; margin: 0 auto; }
.story-copy p { margin-bottom: 18px; font-size: 1.04rem; line-height: 1.75; }
.story-copy p:last-child { margin-bottom: 0; }
.story-copy strong { color: var(--color-primary); }

/* =========================================================
   Ladder (Home + service pages) — the engagement path steps
   ========================================================= */
.ladder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.ladder-step {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.ladder-step:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-accent-light, #E8C766);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 16px;
}
.ladder-step h3 { margin-bottom: 8px; }
.ladder-step p { font-size: 0.95rem; color: var(--color-text-muted); flex-grow: 1; margin-bottom: 20px; }

/* =========================================================
   Case study (service pages) — problem / approach / upside block
   ========================================================= */
.case-study {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border-left: 5px solid var(--color-accent);
  padding: 40px 44px;
  max-width: 860px;
  margin: 0 auto;
}
.case-study h3 { margin-bottom: 22px; font-size: 1.35rem; }
.case-study .cs-row { margin-bottom: 18px; }
.case-study .cs-row:last-child { margin-bottom: 0; }
.cs-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 4px;
}
.case-study .cs-row p { margin: 0; line-height: 1.7; }
.case-study + .case-study { margin-top: 28px; }

/* =========================================================
   Trigger list (service pages) — "when you call me" bullets
   ========================================================= */
.trigger-list {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.trigger-list li {
  background: var(--color-white);
  border-radius: var(--radius-sm, 10px);
  box-shadow: var(--shadow-sm);
  padding: 16px 22px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.6;
}
.trigger-list li::before {
  content: "▸";
  color: var(--color-accent-text);
  font-weight: 700;
  flex-shrink: 0;
}

/* =========================================================
   Feature cards (Home)
   ========================================================= */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 20px;
}
.card h3 { margin-bottom: 10px; }

/* =========================================================
   Testimonials
   ========================================================= */
.testimonials { background: var(--color-bg-alt); }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.testimonial-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.testimonial-card .quote-mark {
  font-size: 2.6rem;
  /* NOT var(--color-accent). The brand gold #C9A227 measures 2.42:1 on white,
     and this glyph renders at 2.6rem, which WCAG counts as large text needing
     3:1. #A8841C is the same gold darkened to 3.51:1 -- it is the tone the
     P3MAI document house style already uses for exactly this reason, so the
     page and the manuals now agree.

     The global --color-accent is deliberately left alone: it is used across
     the whole site and most of its uses are not text on white. */
  color: #A8841C;
  line-height: 1;
  font-family: Georgia, serif;
}
.testimonial-card p.quote { color: var(--color-text); margin: 8px 0 18px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}
.author-name { font-weight: 600; color: var(--color-text); }
.author-role { font-size: 0.85rem; color: var(--color-text-muted); }

/* =========================================================
   Article pages (blog Read More case studies)
   ========================================================= */
.article-meta {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  margin-top: 14px;
  letter-spacing: 0.04em;
}
.article-meta .tag {
  display: inline-block;
  background: rgba(201,162,39,0.25);
  color: #E8C766;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-left: 8px;
}
.article-body { max-width: 740px; margin: 0 auto; }
.article-body p { margin-bottom: 18px; font-size: 1.02rem; line-height: 1.8; }
.article-body h2 {
  font-size: 1.45rem;
  color: var(--color-primary);
  margin: 40px 0 14px;
}
.article-body h2:first-child { margin-top: 0; }
.article-body ul { margin: 0 0 18px 22px; }
.article-body ul li { list-style: disc; margin-bottom: 8px; line-height: 1.7; }
.article-body strong { color: var(--color-primary); }
.takeaways {
  background: var(--color-white);
  border-radius: var(--radius-md);
  border-left: 5px solid var(--color-accent);
  box-shadow: var(--shadow-md);
  padding: 30px 34px;
  max-width: 740px;
  margin: 44px auto 0;
}
.takeaways h3 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 14px;
}
.takeaways ol { margin: 0 0 0 20px; }
.takeaways ol li { list-style: decimal; margin-bottom: 10px; line-height: 1.65; }
.takeaways ol li:last-child { margin-bottom: 0; }
.article-backlink { text-align: center; margin-top: 40px; }

/* =========================================================
   CTA
   ========================================================= */
.cta {
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
}
.cta h2 { color: var(--color-white); margin-bottom: 14px; }
.cta p { color: rgba(255,255,255,0.85); max-width: 520px; margin: 0 auto 32px; }

/* =========================================================
   About page
   ========================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 56px;
  align-items: center;
}
.photo-placeholder {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 3.2rem;
  font-weight: 700;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--color-white);
  flex-shrink: 0;
}
.about-photo {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  border: 6px solid var(--color-white);
  flex-shrink: 0;
  background: var(--color-bg);
}
.story-text h2 { margin-bottom: 16px; }
.story-text p { margin-bottom: 14px; }

/* ---------- Timeline ---------- */
.timeline {
  position: relative;
  display: grid;
  /* 6 milestones since the ENBD and Emirates/dnata entries were added */
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 15px;
  /* half of one column width (100% / 6 / 2) so the rule spans dot-to-dot */
  left: 8.33%;
  right: 8.33%;
  height: 2px;
  background: var(--color-bg-alt);
  z-index: 0;
}
.timeline-item {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 8px;
}
.timeline-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 6px var(--color-bg);
  margin: 0 auto 18px;
}
.timeline-year {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1.1rem;
  margin-bottom: 6px;
}
.timeline-label { font-size: 0.9rem; color: var(--color-text-muted); }

.mission {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 40px;
  text-align: center;
}
.mission blockquote {
  color: var(--color-white);
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.value-card {
  text-align: center;
  padding: 32px 20px;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
  transition: transform var(--transition), background var(--transition);
}
.value-card:hover { transform: translateY(-8px); background: var(--color-white); box-shadow: var(--shadow-md); }
.value-card h3 { color: var(--color-primary); margin-bottom: 8px; }

.certifications { text-align: center; }
.cert-list {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.cert-item {
  background: var(--color-white);
  border: 1px solid rgba(11,37,69,0.15);
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cert-item:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }

/* =========================================================
   Services page
   ========================================================= */
/* Auto-fit rather than a fixed three columns: the service line-up grew to four
   with Website Design & Build, and a hard repeat(3,1fr) left the fourth card
   alone on a second row with two empty cells beside it. Auto-fit reflows to
   whatever fits — four across on a wide screen, two on a tablet, one on a
   phone — so adding or removing a service never needs this rule touched
   again. */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 28px;
  align-items: start;
}
.pricing-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transition), box-shadow var(--transition);
  border-top: 5px solid var(--color-primary);
  position: relative;
}
/* Scoped to .services-grid so this beats the `.reveal.in-view` transform (same
   specificity, later in the file) that otherwise pins the cards and cancels the
   hover scale. */
.services-grid .pricing-card:hover { transform: scale(1.05) translateY(-8px); box-shadow: var(--shadow-lg); z-index: 3; }
.pricing-card.featured {
  border: 2px solid var(--color-accent);
  border-top: 5px solid var(--color-accent);
  position: relative;
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.pricing-card.featured:hover { transform: scale(1.05) translateY(-8px); box-shadow: var(--shadow-lg); }
.popular-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 7px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.pricing-card .package-name { font-size: 1.05rem; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.pricing-card .price { font-size: 1.4rem; font-weight: 700; color: var(--color-primary); margin-bottom: 4px; line-height: 1.3; }
.pricing-card .price span { font-size: 0.95rem; color: var(--color-text-muted); font-weight: 500; }
.pricing-card .who-for { font-size: 0.88rem; color: var(--color-text-muted); font-style: italic; margin: 6px 0 0; line-height: 1.5; }
.pricing-card .feature-list { margin: 24px 0 28px; flex-grow: 1; }
.pricing-card .feature-list li {
  padding: 9px 0;
  border-bottom: 1px solid var(--color-bg-alt);
  color: var(--color-text);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pricing-card .feature-list li:last-child { border-bottom: none; }
.pricing-card .feature-list li::before {
  content: "✓";
  color: var(--color-accent-text);
  font-weight: 700;
  flex-shrink: 0;
}
.pricing-card .btn-accent:hover { transform: translateY(-3px) scale(1.04); }
.pricing-card .btn + .btn { margin-top: 12px; }

/* ---------- Cost estimator CTA ---------- */
.estimator-cta {
  text-align: center;
  margin-top: 44px;
}

/* ---------- Comparison table ---------- */
.comparison-wrap {
  margin-top: 64px;
  overflow-x: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.comparison-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--color-white);
}
.comparison-table caption {
  text-align: left;
  padding: 20px 24px 4px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
}
.comparison-table th,
.comparison-table td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid var(--color-bg-alt);
  color: var(--color-text-muted);
}
.comparison-table th:first-child,
.comparison-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--color-text);
}
.comparison-table thead th {
  background: var(--color-bg-alt);
  color: var(--color-text);
  font-weight: 700;
  white-space: nowrap;
}
.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) { background: rgba(201,162,39,0.08); }
.comparison-table td.check { color: var(--color-accent-text); font-weight: 700; font-size: 1.1rem; }
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td { border-bottom: none; }

/* =========================================================
   Blog page
   ========================================================= */
.blog-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}
.blog-posts {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.blog-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: row;
}
.blog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.blog-thumb {
  flex: 0 0 220px;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.55);
}
.blog-thumb svg { width: 40px; height: 40px; }
.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-body { padding: 28px; display: flex; flex-direction: column; flex-grow: 1; }
.blog-date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.blog-body h3 { margin-bottom: 10px; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.blog-tags .tag {
  background: var(--color-bg-alt);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 5px 13px;
  border-radius: 999px;
}
.blog-body p { flex-grow: 1; margin-bottom: 18px; }
.read-more {
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition), color var(--transition);
}
.read-more:hover { gap: 10px; color: var(--color-accent-text); }

/* ---------- Blog sidebar ---------- */
.blog-sidebar { display: flex; flex-direction: column; gap: 24px; }
.sidebar-widget {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.sidebar-widget h4 { margin-bottom: 16px; }
.author-widget { text-align: center; }
.author-widget .avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0 auto 14px;
}
.author-widget .avatar-photo {
  object-fit: cover;
  object-position: top;
  background: var(--color-bg);
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-sm);
}
.author-widget .author-title { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 10px; }
.author-widget p { font-size: 0.9rem; margin-bottom: 14px; }
.author-widget a { color: var(--color-primary); font-weight: 600; font-size: 0.85rem; }
.author-widget a:hover { color: var(--color-accent-text); }

.categories-widget ul { display: flex; flex-direction: column; }
.categories-widget li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-bg-alt);
  font-weight: 500;
  color: var(--color-text);
}
.categories-widget li:last-child { border-bottom: none; }
.categories-widget .count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-alt);
  padding: 2px 10px;
  border-radius: 999px;
}

/* =========================================================
   Contact page
   ========================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}
.contact-form {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.form-group { margin-bottom: 22px; }
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.92rem;
}
.form-group .optional { color: var(--color-text-muted); font-weight: 400; }
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid rgba(45,52,54,0.15);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(11,37,69,0.14);
}
.form-group textarea { resize: vertical; min-height: 130px; }

.field-error {
  display: none;
  color: var(--color-danger);
  font-size: 0.82rem;
  margin-top: 7px;
}
.form-group.has-error input,
.form-group.has-error textarea {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.14);
}
.form-group.has-error .field-error { display: block; }

.form-success {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  background: #e7f5ee;
  color: #1a6b45;
  font-weight: 500;
}
.hidden { display: none; }

.contact-info-card {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 40px;
  margin-bottom: 24px;
}
.contact-info-card h3 { color: var(--color-white); margin-bottom: 18px; }
.contact-info-row { display: flex; gap: 14px; margin-bottom: 16px; align-items: flex-start; }
.contact-info-row .icon { font-size: 1.2rem; }
.contact-info-row a, .contact-info-row span { color: rgba(255,255,255,0.92); }
.contact-info-row a:hover { color: var(--color-white); text-decoration: underline; }

.social-row { display: flex; gap: 12px; margin-top: 24px; }
.social-row a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  transition: background var(--transition), transform var(--transition);
}
.social-row a svg { width: 20px; height: 20px; }
.social-row a:hover { background: var(--color-accent); color: var(--color-primary-dark); transform: translateY(-3px); }

.map-embed {
  height: 280px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.hours-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.hours-card h3 { margin-bottom: 14px; font-size: 1.05rem; }
.hours-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-bg-alt); }
.hours-row:last-child { border-bottom: none; }
.hours-row span:first-child { color: var(--color-text); font-weight: 500; }
.hours-row span:last-child { color: var(--color-text-muted); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.85);
  padding: 64px 0 0;
}
.footer-social .social-row { margin-top: 4px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-brand h3 { color: var(--color-white); margin-bottom: 10px; }
.footer-brand p { color: rgba(255,255,255,0.65); }
.footer-logo-mark { display: block; height: 40px; width: auto; }
.footer-logo-lockup { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-brand .logo-text { margin-left: 0; color: var(--color-white); }
.footer-brand .logo-text .brand-ai { color: var(--color-accent); }
.site-footer h4 { color: var(--color-white); font-size: 1rem; margin-bottom: 16px; }
.site-footer p { color: rgba(255,255,255,0.75); margin-bottom: 8px; }
.site-footer a:hover { color: var(--color-accent); }
.site-footer .social-row a:hover { color: var(--color-primary-dark); }
.footer-bottom {
  padding: 22px 24px;
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}
.footer-bottom .footer-legal { margin-top: 6px; }
.footer-bottom .footer-legal a { color: rgba(255,255,255,0.55); }
.footer-bottom .footer-legal a:hover { color: var(--color-accent); }

/* =========================================================
   Scroll-reveal animation hook (see script.js)
   ========================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* =========================================================
   Page loader / transition overlay (see script.js)
   ========================================================= */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.35s ease;
}
.page-transition.hide {
  opacity: 0;
  pointer-events: none;
}
.page-transition .loader-mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 1.3rem;
  animation: loader-pulse 0.9s ease-in-out infinite;
}
@keyframes loader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
  .page-transition .loader-mark { animation: none; }
  .page-transition { transition: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; text-align: center; }
  .contact-grid { grid-template-columns: 1fr; }
  .feature-cards,
  .testimonial-grid,
  .services-grid,
  .ladder-grid,
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .timeline::before { display: none; }
}

/* ---- The off-canvas menu must not widen the page ------------------------
   The mobile menu is a fixed panel parked off-screen to the right with
   `transform: translateX(100%)`. A parked panel still counts towards how far
   the page can be scrolled, so every page on this site scrolled sideways by
   exactly the panel's width — 281px at a 360px viewport, measured on the live
   site 2026-08-13 across all 17 pages.

   `overflow-x: clip` rather than `hidden`: `hidden` turns the element into a
   scroll container, which breaks `position: sticky` inside it and lets
   JavaScript scroll the page sideways anyway. `clip` just clips.

   ⚠️ THIS HIDES A SYMPTOM, so it must not be relied on to hide FAULTS. It is
   applied because the panel is deliberately off-screen — a real element that is
   too wide is still a bug, and the estimator's two were fixed at source on the
   same day rather than swept under this rule.

   BOTH html AND body, and the second one is not belt-and-braces.
   `overflow-x: clip` on `html` alone does NOT stop the scroll in Chromium: the
   menu is `position: fixed`, Chromium counts fixed elements towards the
   document's scrollable overflow, and the page still scrolled 271–281px
   sideways. WebKit clipped correctly with html alone, which is why a
   single-engine check called this fixed. Adding it to `body` stops it in both.
   Measured 2026-08-13 across chromium and webkit; three other candidate fixes
   (visibility:hidden, content-visibility:hidden, left:100% instead of a
   transform) were tested and ALL of them left Chromium scrolling.

   ⚠️ AND HOW THIS WAS MISSED THE FIRST TIME, which matters more than the CSS:
   when this rule went in, the responsive check was changed to measure ELEMENTS
   against the viewport instead of `scrollWidth`, reasoning that the rule would
   make scrollWidth report clean either way. That reasoning assumed the rule
   worked. It did not, and the check had by then been rebuilt so that it could
   no longer notice. It reported 0 of 17 pages affected while every page still
   scrolled. A check redesigned around a fix cannot also be the evidence that
   the fix works — so the test now asks the only question a user would:
   scroll the page right and see whether it moved. */
html { overflow-x: clip; }
body { overflow-x: clip; }

@media (max-width: 700px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(78%, 320px);
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 32px 40px;
    gap: 6px;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links li { width: 100%; }
  .nav-links li a { display: block; width: 100%; }

  section { padding: 64px 0; }
  .hero { padding: 96px 0 72px; }

  .feature-cards,
  .testimonial-grid,
  .services-grid,
  .ladder-grid,
  .values-grid { grid-template-columns: 1fr; }
  .case-study { padding: 30px 24px; }
  .blog-card { flex-direction: column; }
  .blog-thumb { flex-basis: auto; height: 160px; }
  .footer-grid { grid-template-columns: 1fr; text-align: center; }
  .contact-info-row { justify-content: center; }
  .social-row { justify-content: center; }
  .cert-list { flex-direction: column; align-items: center; }
  .timeline { grid-template-columns: 1fr; gap: 32px; }
}

/* Estate Status link — the gold pyramid at the far right of the header.
   Added 2026-08-18. It points at /status/, which sits behind HTTP Basic Auth, so
   a visitor who clicks it meets a password prompt and gets no further. The
   Product Owner's call, and a reasonable one: the page is protected, so the link
   costs nothing. It carries a title rather than a visible label because a word
   like "Status" beside Home/About/Services would read as a sixth public page. */
.nav-status { display: flex; align-items: center; margin-left: 6px; }
.status-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 8px;
  opacity: 0.9;
  transition: opacity var(--transition), background var(--transition);
}
.status-link:hover, .status-link:focus-visible { opacity: 1; background: var(--color-bg-alt); }
.status-pyr { width: 20px; height: 17px; display: block; }
@media (max-width: 700px) {
  /* In the drawer it needs a name, because an unlabelled icon in a list of words
     reads as a mistake. */
  .nav-status { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--color-border, #e6e3dd); width: 100%; }
  .status-link { opacity: 1; justify-content: flex-start; gap: 10px; }
  .status-link::after { content: "Estate Status"; font-size: 0.95rem; color: var(--color-text-muted, #6b6b6b); }
}

/* =========================================================
   The chain — outputs → capabilities → outcomes → benefits
   Added 2026-08-21 (MKT-12). The four-step section under the hero, plus the
   chain badges the service and ladder cards carry. Values are the ones
   approved on the localhost preview; where a token matched it is used,
   where the approved value had no token it is kept raw and said why.
   ========================================================= */
.chain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 38px 0 12px;
}
.chain-step {
  border: 1px solid #DCE1E8; /* between --color-bg-alt and white; no border token exists */
  border-radius: 14px;
  padding: 24px 24px 20px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  text-align: left;
}
/* The icon tile. Same visual language as the service-card PNGs — which were
   flattened on 2026-08-21 so that CSS owns every shadow on the page. The two
   raw colours below are the tile pair the PNGs were rebuilt to, so changing
   either means re-exporting six images: keep them in step. */
.chain-ico {
  width: 56px;
  height: 56px;
  background: #101D31;
  border-radius: 14px; /* 25% of the side — the ratio the PNG silhouettes use */
  color: #D9A93F;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 6px 12px rgba(16, 29, 49, 0.28);
}
.chain-ico svg { width: 30px; height: 30px; display: block; }
.chain-step .n {
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.chain-step h3 { margin: 0.3em 0 0.5em; font-size: 20px; color: var(--color-primary); }
.chain-step p { margin: 0 0 16px; font-size: 14.5px; color: var(--color-text); line-height: 1.65; flex-grow: 1; }
/* The question each step answers, at the card foot, so the four read down as
   a sequence of questions as well as across as a sequence of steps. */
.chain-step .q {
  font-size: 13.5px;
  font-style: italic;
  color: var(--color-text-muted);
  border-top: 1px solid #EDF0F4;
  padding-top: 12px;
  margin-top: auto;
}
/* Only the LAST step wears the accent. Colouring all four would say they
   matter equally, which is the belief the diagram exists to correct. */
.chain-step.is-benefit {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent) inset;
  background: #FFFDF6;
}
.chain-step.is-benefit h3 { color: var(--color-accent-text); }
.chain-step.is-benefit .chain-ico { background: var(--color-accent); color: #101D31; }
.chain-step.is-benefit .q { border-top-color: #EFE3BE; color: var(--color-accent-text); }
.chain-note { font-size: 15.5px; color: var(--color-text); margin: 0.4em 0 0; line-height: 1.7; }
.chain-note strong { color: var(--color-primary); }

/* The chain badge on service and ladder cards — which steps this one carries. */
.chain-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: #F0F3F7;
  border: 1px solid #DCE1E8;
  border-radius: 999px;
  padding: 5px 12px;
  margin: 0 0 12px;
  line-height: 1.35;
}
/* The two places the chain says the value actually is: the PMO service and
   the top rung of the ladder. Accented for that reason, not for emphasis. */
.chain-badge.is-key { color: var(--color-accent-text); background: #FBF6E6; border-color: #E3D095; }
.card-meta { font-size: 0.88rem; color: var(--color-text-muted); margin-top: 0.9em; }

/* Every icon on the page carries the tile shadow (Product Owner, 2026-08-21).
   The PNGs get drop-shadow rather than box-shadow: box-shadow would draw a
   rectangle around the image's transparent margins, drop-shadow follows the
   tile's real silhouette through the alpha channel. Values identical to
   .chain-ico's box-shadow. */
.card-icon img,
.author-avatar img { filter: drop-shadow(0 6px 12px rgba(16, 29, 49, 0.28)); }

/* Stacks on the site's own breakpoints: 2-up where the other card grids go
   2-up, then single column — steps 1-2 over 3-4 keeps the reading order. */
@media (max-width: 900px) {
  .chain { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .chain { grid-template-columns: 1fr; gap: 14px; }
  .chain-step { padding: 20px; }
}

/* Image-bearing icon tiles (ENG-16, 2026-08-21). These three declarations were
   inline on every instance — 22 copies across index and about — which the
   validator rightly flags: a repeated style is a class. `is-art` says the tile
   IS the artwork: the ground comes from the image, not the circle. */
.card-icon.is-art { background: none; width: 76px; height: 76px; }
.author-avatar.is-art { background: none; width: 44px; height: 44px; }
.card-icon.is-art img,
.author-avatar.is-art img { width: 100%; height: 100%; display: block; }

/* The contact form's honeypot (`website`). Off-screen, not display:none — a
   bot that checks visibility would skip a hidden field, and the handler's
   whole trick is that only a bot fills it. Moved from an inline style for the
   same validator reason as above; behaviour identical. */
.hp-trap { position: absolute; left: -9999px; height: 0; overflow: hidden; }