/* ==========================================================================
   srtcontrol.com — the single stylesheet for the entire site
   ==========================================================================

   HOW THIS FILE IS ORGANISED
   Each section starts with a box like this one saying what it styles.
   Search (Ctrl+F) for the section name in capitals to jump to it:

     1. SETTINGS        colours, fonts, spacing — change the look here
     2. BASICS          plain text, links, lists, images
     3. LAYOUT          page width and the space between sections
     4. SKIP LINK       hidden "skip to content" link for keyboard users
     5. HEADER          logo, company name, tagline
     6. NAVIGATION      the menu of links under the header
     7. BUTTONS         "Get a free plant assessment" and similar
     8. HERO            the big opening block on the home page
     9. NUMBERS         the three large result figures
    10. CARDS           boxes in a grid (audiences, controllers)
    11. EVIDENCE        the Pomona and Chico panels
    12. STATEMENT       a single argument on a tinted band (independence)
   12a. PRODUCT LIST   the controllers, one per row (name, then description)
    13. CLOSING         the dark call-to-action band before the footer
    14. FOOTER          address, link columns, legal line
    15. INNER PAGES     page titles, long text, tables, publication lists
    16. PRINT           how pages look on paper (the one-page brief)
    17. VERSION 2       the redesigned home page (index-v2.html): photo hero,
                        recognition strip, large figures, case study cards

   FONTS
   The two typefaces come from Google Fonts. Every page loads them with
   this line inside <head>, before the link to this file:

   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap">

   - Source Serif 4 (headings): a serif designed for reading and reports.
     It gives the headings the weight of a published technical document.
   - Public Sans (body text): designed for the U.S. government's own
     websites. Plain, very legible, familiar to public-sector readers.
   If Google Fonts cannot be reached, the system fonts listed after them
   are used instead and the page still reads correctly.

   SCREEN SIZES
   Everything is written for a phone first (375 pixels wide). The two
   "@media (min-width: ...)" blocks further down add changes for tablets
   (640 px and wider) and desktops (1024 px and wider).
   ========================================================================== */


/* ==========================================================================
   1. SETTINGS
   Colours, fonts and spacing used across the site. Change a value here
   and it changes everywhere. All text colours below meet the WCAG AA
   contrast standard on the backgrounds they are used on.
   ========================================================================== */

:root {
  /* Colours */
  --color-ink: #15202b;          /* main text: near-black with a slight blue tint */
  --color-ink-muted: #4a5663;    /* secondary text: captions, subtitles */
  --color-brand: #0a4fa8;        /* Ekster logo blue: links, buttons, accents */
  --color-brand-dark: #083d82;   /* darker blue: link and button hover */
  --color-page: #ffffff;         /* page background */
  --color-tint: #f2f4f7;         /* light grey bands and panels */
  --color-rule: #d3d9e0;         /* thin dividing lines and card borders */
  --color-dark: #0f2438;         /* dark navy: closing band and footer */
  --color-on-dark: #ffffff;      /* text on the dark navy */
  --color-on-dark-muted: #c2ccd6;/* quieter text on the dark navy */
  --color-bright: #0068b5;       /* brighter logo blue: large figures (5.8:1 on white) */
  --color-bright-deep: #0a5aa8;  /* deeper bright blue: behind white text (6.9:1) */
  --color-cyan: #19b4e8;         /* cyan accent bars only, never behind or as text */
  --shadow-card: 0 2px 10px rgba(15, 36, 56, 0.08);
  --radius-card: 10px;
  --color-focus: #c96a00;        /* keyboard focus outline: dark amber, visible on white, grey and navy */

  /* Fonts */
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Text sizes: smallest to largest. The larger ones grow smoothly
     between phone and desktop instead of jumping. */
  --text-small: 0.875rem;                              /* 14 px */
  --text-body: 1.0625rem;                              /* 17 px */
  --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --text-h3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --text-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --text-h1: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --text-figure: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);

  /* Spacing: one scale, used for gaps, padding and margins. */
  --space-1: 0.25rem;   /*  4 px */
  --space-2: 0.5rem;    /*  8 px */
  --space-3: 0.75rem;   /* 12 px */
  --space-4: 1rem;      /* 16 px */
  --space-5: 1.5rem;    /* 24 px */
  --space-6: 2rem;      /* 32 px */
  --space-7: 3rem;      /* 48 px */
  --space-8: 4.5rem;    /* 72 px */
  --space-section: clamp(3rem, 2rem + 4vw, 6rem);  /* above and below each page section */

  /* Widths */
  --width-page: 72rem;       /* widest the content ever gets (about 1150 px) */
  --width-text: 40rem;       /* longest comfortable line of reading text */
  --gutter: 1rem;            /* space at the left and right edge on a phone */

  /* Small details */
  --radius: 3px;             /* corner rounding: minimal */
  --border: 1px solid var(--color-rule);
}


/* ==========================================================================
   2. BASICS
   Plain text, headings, links, lists and images anywhere on the site.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  overflow-wrap: break-word;   /* long words and addresses wrap instead of overflowing */
  font-variant-numeric: lining-nums;  /* full-height digits, like a technical report */
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-ink);
  text-wrap: balance;          /* evens out line lengths in multi-line headings */
}

h1 { font-size: var(--text-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); font-weight: 600; }
h4 { font-size: var(--text-body); font-family: var(--font-body); }

p,
ul,
ol,
dl,
table,
figure {
  margin: 0 0 var(--space-4);
}

ul,
ol {
  padding-left: 1.25rem;
}

li + li {
  margin-top: var(--space-2);
}

a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--color-brand-dark);
  text-decoration-thickness: 2px;
}

/* The outline that shows where you are when moving through the page
   with the Tab key. Never remove this. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

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

strong {
  font-weight: 700;
}

small {
  font-size: var(--text-small);
}

/* In tables and the result tiles, digits are all the same width so
   columns of numbers line up. */
td,
.numbers {
  font-variant-numeric: lining-nums tabular-nums;
}

hr {
  border: 0;
  border-top: var(--border);
  margin: var(--space-6) 0;
}


/* ==========================================================================
   3. LAYOUT
   Page width, side margins, and the vertical space between sections.
   .container   keeps content centred and no wider than --width-page
   .section     one horizontal band of the page, with space above and below
   .section-tint   the same, on a light grey background
   .section-intro  the heading and short paragraph that open a section
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--width-page) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--space-section) 0;
}

.section-tint {
  background: var(--color-tint);
}

.section + .section:not(.section-tint):not(.closing) {
  border-top: var(--border);
}

.section-intro {
  max-width: var(--width-text);
  margin-bottom: var(--space-6);
}

.section-intro p {
  font-size: var(--text-lead);
  color: var(--color-ink-muted);
}

/* Small uppercase label above a heading, e.g. "Controlled result". */
.eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
}

/* Text read aloud by screen readers but not shown on screen. */
.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;
}


/* ==========================================================================
   4. SKIP LINK
   A "Skip to main content" link. It stays hidden until someone presses
   Tab, so keyboard and screen-reader users can jump past the menu.
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -10rem;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--color-dark);
  color: var(--color-on-dark);
  font-weight: 700;
}

.skip-link:focus {
  top: var(--space-4);
}


/* ==========================================================================
   5. HEADER
   The strip across the top of every page: logo, company name and the
   "Process control since 1996" line.
   ========================================================================== */

.site-header {
  border-bottom: var(--border);
  background: var(--color-page);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--color-ink);
}

.brand img {
  width: 3.5rem;       /* logo size on a phone */
  height: auto;
  flex-shrink: 0;
}

/* The line below the logo: the largest text on the page. */
.site-tagline {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 0.55rem + 5.2vw, 4.4rem);   /* always larger than the hero headline */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-bright);
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Each half of the tagline on its own line: "Machine Learning (ML) Based" /
   "Control Systems". Where the first half is too long for one line (phones),
   it breaks into two lines of similar length. */
.site-tagline span {
  display: block;
  text-wrap: balance;
}

.brand-name {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}


/* ==========================================================================
   6. NAVIGATION
   The menu links. On a phone they sit in two columns under the logo; on a
   wide screen they sit in one row. No JavaScript needed.
   The link for the current page has aria-current="page" in the HTML,
   which underlines it here.
   ========================================================================== */

.site-nav {
  width: 100%;
}

.site-nav ul {
  display: grid;
  /* As many columns as fit: two on a phone, one when the reader enlarges the text. */
  grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
  gap: var(--space-1) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li + li {
  margin-top: 0;
}

.site-nav a {
  display: block;
  padding: var(--space-2) 0;   /* large enough to select on a touch screen */
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* The last menu item ("Free plant assessment") is set apart in blue. */
.site-nav .nav-action a {
  color: var(--color-brand);
}


/* ==========================================================================
   7. BUTTONS
   Links that look like buttons.
   .button            solid blue — the main action
   .button-secondary  blue outline — the second choice
   .button-on-dark    white — for use on the dark navy band
   .button-row        lines several buttons up, wrapping on a phone
   ========================================================================== */

.button {
  display: inline-block;
  max-width: 100%;            /* never wider than the screen; the text wraps instead */
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-brand);
  border-radius: var(--radius);
  background: var(--color-brand);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}

.button:hover {
  background: var(--color-brand-dark);
  border-color: var(--color-brand-dark);
  color: #ffffff;
}

.button-secondary {
  background: transparent;
  color: var(--color-brand);
}

.button-secondary:hover {
  background: var(--color-brand);
  color: #ffffff;
}

.button-on-dark {
  background: var(--color-on-dark);
  border-color: var(--color-on-dark);
  color: var(--color-dark);
}

.button-on-dark:hover {
  background: transparent;
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
}

.button-row {
  display: flex;
  flex-direction: column;       /* stacked, full width, on a phone */
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-5);
}

/* A plain text link with an arrow, e.g. "Read the measurements →" */
.more-link {
  font-weight: 700;
  text-decoration: none;
}

.more-link:hover {
  text-decoration: underline;
}


/* ==========================================================================
   8. HERO
   The opening block of the home page: main headline, supporting
   paragraph, buttons, the "Running at..." line, and the photo with its
   caption.
   ========================================================================== */

.hero {
  padding: var(--space-7) 0 var(--space-section);
}

.hero h1 {
  max-width: 20ch;              /* limits the length of each headline line */
  margin-bottom: var(--space-5);
}

.hero-subhead {
  max-width: var(--width-text);
  font-size: var(--text-lead);
  line-height: 1.55;
}

.hero-running {
  max-width: var(--width-text);
  padding-top: var(--space-4);
  border-top: var(--border);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.hero-figure {
  margin: var(--space-6) 0 0;
}

.hero-figure img {
  width: 100%;
  border: var(--border);
}

figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
  line-height: 1.45;
}


/* ==========================================================================
   9. NUMBERS
   The three result tiles: a large figure with a short explanation under
   it. Stacked on a phone, side by side on a wide screen.
   ========================================================================== */

.numbers {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.numbers li + li {
  margin-top: 0;
}

.number {
  padding-top: var(--space-4);
  border-top: 4px solid var(--color-brand);
}

.number-figure {
  display: block;
  margin-bottom: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-figure);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-ink);
}

.number p {
  margin: 0;
  color: var(--color-ink-muted);
}


/* ==========================================================================   10. CARDS
   Boxes in a grid: the audience cards ("Information by job function").
   One per row on a phone, two on a tablet, three on a desktop.
   .card-grid-4  four across on a desktop
   .card-grid-5  five cards: three across on a desktop, then two
   ========================================================================== */

.card-grid {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-grid li + li {
  margin-top: 0;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-page);
}

.card h3 {
  margin-bottom: var(--space-3);
}

.card p {
  color: var(--color-ink-muted);
}

/* Pushes the card's link to the bottom so links line up across a row. */
.card .more-link {
  margin-top: auto;
}

/* Controller names (DO/Nmaster and so on) keep their exact spelling:
   no automatic capitals or letter changes. */
.product-name {
  font-family: var(--font-heading);
  text-transform: none;
}


/* ==========================================================================
   11. EVIDENCE
   The two proof panels — Pomona (controlled result) and Chico (eight
   years in service). Stacked on a phone, side by side on a desktop.
   ========================================================================== */

.evidence-grid {
  display: grid;
  gap: var(--space-5);
}

.evidence-panel {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: var(--border);
  border-top: 4px solid var(--color-brand);
  border-radius: var(--radius);
  background: var(--color-page);
}

.evidence-panel h3 {
  font-size: var(--text-h2);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.evidence-subtitle {
  color: var(--color-ink-muted);
}

/* The bullet points: bold, with a thin line between each. */
.evidence-points {
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  list-style: none;
}

.evidence-points li {
  margin: 0;
  padding: var(--space-3) 0;
  border-top: var(--border);
  font-weight: 600;
}

.evidence-points li:last-child {
  border-bottom: var(--border);
}

.evidence-panel .more-link {
  margin-top: auto;
}


/* ==========================================================================
   12. STATEMENT
   One argument given room on its own: used for "We do not sell hardware".
   Heading and text on the left, a blue rule down the side.
   ========================================================================== */

.statement {
  max-width: 48rem;
  padding-left: var(--space-5);
  border-left: 4px solid var(--color-brand);
}

.statement p {
  font-size: var(--text-lead);
}


/* ==========================================================================
   12a. PRODUCT LIST
   The controllers (DO/Nmaster, SRTmaster and so on), one per row, like a
   specification table. On a phone the name sits above its description;
   on a tablet or wider the name is in a left-hand column. Adding a
   product is just adding one more row — the layout does not change.
   ========================================================================== */

.product-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--color-ink);
}

.product-list li + li {
  margin-top: 0;
}

.product {
  padding: var(--space-5) 0;
  border-bottom: var(--border);
}

.product h3 {
  margin-bottom: var(--space-2);
}

.product h3 a {
  text-decoration: none;
}

.product h3 a:hover {
  text-decoration: underline;
}

.product p {
  margin: 0;
  max-width: var(--width-text);
  color: var(--color-ink-muted);
}


/* ==========================================================================
   13. CLOSING
   The dark navy band before the footer: "Find out what your plant would
   save", a paragraph and one button.
   ========================================================================== */

.closing {
  background: var(--color-dark);
  color: var(--color-on-dark);
}

.closing h2 {
  color: var(--color-on-dark);
}

.closing p {
  max-width: var(--width-text);
  font-size: var(--text-lead);
  color: var(--color-on-dark-muted);
}

.closing .button {
  margin-top: var(--space-4);
}


/* ==========================================================================
   14. FOOTER
   Bottom of every page: company address, four columns of links, and the
   copyright and trademark line. Dark navy, continuing the closing band.
   ========================================================================== */

.site-footer {
  padding: var(--space-7) 0 var(--space-6);
  background: var(--color-dark);
  border-top: 1px solid #27405a;
  color: var(--color-on-dark-muted);
  font-size: var(--text-small);
}

.site-footer a {
  color: var(--color-on-dark);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  /* As many columns as fit: two on a phone, fewer when the text is enlarged. */
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-6) var(--space-5);
  margin-bottom: var(--space-7);
}

.footer-address {
  grid-column: 1 / -1;              /* address spans the full width on a phone */
  font-style: normal;
  line-height: 1.6;
}

.footer-address strong {
  color: var(--color-on-dark);
}

.site-footer h2 {
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-dark);
}

.site-footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer li + li {
  margin-top: var(--space-2);
}

.footer-legal {
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid #27405a;
}


/* ==========================================================================
   15. INNER PAGES
   Styles for pages other than the home page.
   .page-header   the title block at the top of an inner page
   .prose         long-form reading text, kept to a comfortable width
   .data-table    tables of measurements
   .source-note   the small "Source: ..." line under a figure or table
   .doc-list      the list of papers on the Publications page
   ========================================================================== */

.page-header {
  padding: var(--space-7) 0 var(--space-6);
  border-bottom: var(--border);
}

.page-header p {
  max-width: var(--width-text);
  font-size: var(--text-lead);
  color: var(--color-ink-muted);
}

.prose {
  max-width: var(--width-text);
}

.prose h2 {
  margin-top: var(--space-7);
}

.prose h3 {
  margin-top: var(--space-6);
}

.prose > :first-child {
  margin-top: 0;
}

/* Tables scroll sideways inside their own box on a phone, so the page
   itself never becomes wider than the screen. Wrap each table in
   <div class="table-wrap">. */
.table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.data-table caption {
  margin-bottom: var(--space-3);
  font-weight: 700;
  text-align: left;
}

.data-table th,
.data-table td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: var(--border);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  border-bottom: 2px solid var(--color-ink);
  font-size: var(--text-small);
}

.data-table .num {
  text-align: right;
  white-space: nowrap;
}

.source-note {
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.doc-list {
  padding: 0;
  list-style: none;
}

.doc-list li {
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: var(--border);
}

.doc-list .doc-meta {
  display: block;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}


/* ==========================================================================
   TABLET — 640 px and wider
   Changes that apply once there is room for two columns.
   ========================================================================== */

@media (min-width: 40em) {
  :root {
    --gutter: 1.5rem;
  }

  .brand img {
    width: 4.25rem;
  }

  .button-row {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .numbers {
    grid-template-columns: repeat(3, 1fr);
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  }

  .statement {
    padding-left: var(--space-6);
  }

  /* Product list: name in a left column, description beside it. */
  .product {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }

  .product h3 {
    margin-bottom: 0;
  }
}


/* ==========================================================================
   DESKTOP — 1024 px and wider
   Menu in one row beside the logo; four cards across; evidence side by
   side; footer in five columns.
   ========================================================================== */

@media (min-width: 64em) {
  :root {
    --gutter: 2rem;
  }

  /* Desktop header: logo, name and tagline on one line. The menu sits beside
     them on very wide screens and moves to its own row beneath when there is
     not enough room. */
  .brand {
    flex-shrink: 0;
  }

  .site-header .container {
    row-gap: var(--space-1);
  }

  .site-nav {
    width: auto;
  }

  .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
  }  .card-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .card-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .evidence-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .evidence-panel {
    padding: var(--space-6);
  }

  .footer-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  }

  .footer-address {
    grid-column: auto;
  }

  /* Hero: text on the left, photo on the right. */
  .hero-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-7);
    align-items: start;
  }

  .hero-figure {
    margin-top: var(--space-2);
  }
}


/* ==========================================================================
   17. VERSION 2
   Styles used only by the redesigned home page, index-v2.html. They add a
   photograph behind the headline, a strip of recognition badges, large
   figures, a "How it works" section and case study cards with a photo or
   chart. The original home page (index.html) does not use any of them.
   ========================================================================== */

/* --- Hero with a photograph behind the headline -------------------------
   The photograph keeps its natural colours. A neutral dark shading on the
   left, behind the text, keeps the white text readable. */
.v2-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(82vh, 46rem);   /* tall, but never more than about 740 px */
  padding: var(--space-7) 0;
  background-color: #1b2229;
  background-image:
    linear-gradient(90deg, rgba(8, 12, 18, 0.82) 0%, rgba(8, 12, 18, 0.70) 45%, rgba(8, 12, 18, 0.15) 100%),
    url("images/pomona-aerial.jpg");
  background-size: cover;
  background-position: center center;
  color: var(--color-on-dark);
}

.v2-hero .eyebrow {
  color: #d9ecff;
}

.v2-hero h1 {
  max-width: 22ch;
  text-wrap: balance;
  margin-bottom: var(--space-5);
  font-size: clamp(1.5rem, 0.5rem + 4.4vw, 4rem);
  line-height: 1.05;
  color: var(--color-on-dark);
}

/* The second line of the headline, in a lighter blue. */
.v2-hero h1 .v2-h1-second {
  display: block;
  color: #d9ecff;
}

/* The small label at the top of the headline, part of the h1 for search
   engines but styled as a small uppercase line. */
.v2-hero h1 .eyebrow {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--text-small);
  line-height: 1.4;
}

.v2-lead {
  max-width: 38rem;
  font-size: var(--text-lead);
  line-height: 1.55;
  color: #e3e9f0;
}

.v2-hero .button-row {
  margin-bottom: var(--space-6);
}

/* Outline button for use on dark backgrounds. */
.button-outline-light {
  background: transparent;
  border-color: var(--color-on-dark);
  color: var(--color-on-dark);
}

.button-outline-light:hover {
  background: var(--color-on-dark);
  color: var(--color-dark);
}

.v2-photo-credit {
  margin: 0;
  font-size: var(--text-small);
  color: #b9c4d0;
}

/* --- Figure tiles in the hero ----------------------------------------------
   Three translucent boxes under the headline, each with one large figure. */
.v2-hero-stats {
  display: grid;
  /* Three across where they fit; fewer per row on very small screens or large text. */
  grid-template-columns: repeat(auto-fit, minmax(min(6rem, 100%), 1fr));
  gap: var(--space-3);
  max-width: 40rem;
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.v2-hero-stats li {
  margin: 0;
  padding: var(--space-3) var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: var(--radius-card);
  background: rgba(0, 0, 0, 0.40);
  text-align: center;
}

.v2-hero-stats strong {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.1rem);
  line-height: 1.1;
  color: #ffffff;
}

.v2-hero-stats span {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #e3eefa;
}

/* --- Section headings with a short cyan bar underneath -------------------- */
.v2-heading::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: var(--space-3);
  border-radius: 2px;
  background: var(--color-cyan);
}

/* --- The challenge: three cards with a drawn icon each --------------------- */
.v2-challenges {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-challenges li {
  margin: 0;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--color-page);
  box-shadow: var(--shadow-card);
}

.v2-challenges svg {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3);
  color: var(--color-bright);
}

.v2-challenges h3 {
  margin-bottom: var(--space-2);
  color: var(--color-bright);
}

.v2-challenges p {
  margin: 0;
  color: var(--color-ink-muted);
}

/* Rounded corners and soft shadows for the version 2 cards. */
.v2-case,
.v2-roles a {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.v2-case-figure,
.v2-stat-figure,
.v2-roles strong {
  color: var(--color-bright);
}

@media (min-width: 40em) {
  .v2-challenges {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Short override line under the hero buttons ---------------------------- */
.v2-override {
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
  font-weight: 600;
  color: #e3eefa;
}

/* --- Testimonial: a large quotation with the name underneath -------------- */
.v2-quote-section {
  padding: var(--space-7) 0;
  background: var(--color-tint);
}

.v2-quote {
  display: flow-root;   /* keeps the floated trophy photo inside the box */
  max-width: 52rem;
  margin: 0 auto;
  text-align: left;
}

.v2-quote blockquote {
  margin: 0 0 var(--space-4);
}

.v2-quote blockquote p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
}

/* A large blue opening quotation mark above the text; the text stays dark. */
.v2-quote blockquote::before {
  content: "\201C";
  display: block;
  height: 3.5rem;
  font-family: var(--font-heading);
  font-size: 6rem;
  line-height: 1;
  color: var(--color-bright);
}

.v2-quote figcaption {
  font-size: var(--text-body);
  color: var(--color-ink-muted);
}

.v2-quote figcaption strong {
  color: var(--color-bright);
}

/* Trophy photograph on the left; the quotation text flows around it. */
.v2-trophy {
  float: left;
  width: min(7rem, 38%);
  height: auto;
  margin: 0.4rem var(--space-5) var(--space-3) 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* The principal: portrait beside the name and credentials. */
.v2-principal {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.v2-principal img {
  width: min(12rem, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-card);
}

.v2-credentials {
  font-weight: 700;
  color: var(--color-bright);
}

/* The Chico chart fills the top of its case study card. */
.v2-chart {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 48em) {
  .v2-trophy {
    width: 10rem;
    margin-right: var(--space-6);
  }

  .v2-principal {
    grid-template-columns: auto 1fr;
    gap: var(--space-7);
    max-width: 56rem;
  }
}

/* --- Questions and answers ------------------------------------------------- */
.v2-faq {
  display: grid;
  gap: var(--space-5) var(--space-6);
}

.v2-faq-item h3 {
  margin-bottom: var(--space-2);
  color: var(--color-bright);
}

.v2-faq-item p {
  margin: 0;
  color: var(--color-ink-muted);
}

@media (min-width: 64em) {
  .v2-faq {
    grid-template-columns: 1fr 1fr;
  }
}

/* Laptop screens up to 1000 px tall (for example 1366 x 768 and 1440 x 900):
   a more compact header and hero, so the tagline, headline, figures and
   buttons all fit in the first screen. */
@media (min-width: 64em) and (max-height: 1000px) {
  .site-tagline {
    font-size: clamp(2.2rem, 1rem + 2.6vw, 3.3rem);   /* still larger than the headline below */
  }

  .site-header .container {
    padding-top: var(--space-3);
    padding-bottom: var(--space-2);
  }

  .site-nav a {
    padding: var(--space-1) 0;
  }

  .v2-hero {
    min-height: 0;
    padding: var(--space-5) 0;
  }

  .v2-hero h1 {
    margin-bottom: var(--space-3);
    font-size: clamp(1.8rem, 1rem + 2vw, 2.8rem);
  }

  .v2-hero h1 .eyebrow {
    margin-bottom: var(--space-2);
  }

  .v2-lead {
    margin-bottom: var(--space-3);
    font-size: 1.0625rem;
  }

  .v2-hero-stats {
    margin-bottom: var(--space-4);
  }

  .v2-hero-stats li {
    padding: var(--space-2);
  }

  .v2-hero .button-row {
    margin: 0 0 var(--space-3);
  }

  .v2-override {
    margin: 0 0 var(--space-2);
  }
}

/* Grid and flex children may shrink below their content width, so that long
   words and enlarged text wrap instead of pushing the page sideways. */
.v2-principal > *,
.v2-how > *,
.v2-cases > *,
.v2-challenges > *,
.v2-hero-stats > *,
.v2-badges li {
  min-width: 0;
}

h1,
h2,
h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --- Recognition strip ---------------------------------------------------
   A row of short text badges directly under the hero. */
.v2-badges {
  padding: var(--space-5) 0;
  border-bottom: var(--border);
  background: var(--color-page);
}

.v2-badges ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-badges li {
  margin: 0;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  text-align: center;
}

/* --- Large figures --------------------------------------------------------
   Three numbers set very large, each with a one-line explanation. */
.v2-stats {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-stats li {
  margin: 0;
}

.v2-stat-figure {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 2rem + 4vw, 4.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-brand);
}

.v2-stat-label {
  display: block;
  max-width: 22rem;
  margin-top: var(--space-3);
  color: var(--color-ink-muted);
}

/* --- How it works ---------------------------------------------------------
   A photograph beside three numbered steps. */
.v2-how {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}

.v2-how img {
  width: 100%;
  border-radius: var(--radius);
}

.v2-steps {
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.v2-steps li {
  position: relative;
  margin: 0 0 var(--space-5);
  padding-left: 3.25rem;
  counter-increment: step;
}

/* The number in a circle in front of each step. */
.v2-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-brand);
  color: #ffffff;
  font-weight: 700;
  line-height: 2.25rem;
  text-align: center;
}

.v2-steps h3 {
  margin-bottom: var(--space-1);
}

.v2-steps p {
  margin: 0;
  color: var(--color-ink-muted);
}

/* The operator-override statement, set apart with a blue rule. */
.v2-note {
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-brand);
  background: var(--color-tint);
  font-weight: 600;
}

/* --- Role links -----------------------------------------------------------
   Five compact links, one per job function. */
.v2-roles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-roles li {
  margin: 0;
}

.v2-roles a {
  display: block;
  height: 100%;
  padding: var(--space-4) var(--space-5);
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-page);
  color: var(--color-ink);
  text-decoration: none;
}

.v2-roles a:hover {
  border-color: var(--color-brand);
}

.v2-roles strong {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  color: var(--color-brand);
}

.v2-roles span {
  display: block;
  margin-top: var(--space-1);
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
}

/* --- Case study cards -----------------------------------------------------
   A photo or chart on top, one large figure, a short text and a link. */
.v2-cases {
  display: grid;
  gap: var(--space-5);
}

.v2-case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-page);
}

.v2-case img,
.v2-case svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.v2-case-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
}

.v2-case-figure {
  display: block;
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-brand);
}

.v2-case-body p {
  color: var(--color-ink-muted);
}

.v2-case-body .more-link {
  margin-top: auto;
}

/* --- Closing band with a photograph --------------------------------------- */
.v2-closing {
  background-color: var(--color-dark);
  background-image:
    linear-gradient(rgba(8, 12, 18, 0.78), rgba(8, 12, 18, 0.86)),
    url("images/chico-clarifier.jpg");
  background-size: cover;
  background-position: center;
}

/* --- Wider screens --------------------------------------------------------- */
@media (min-width: 40em) {
  .v2-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .v2-roles {
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  }

  .v2-cases {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .v2-how {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }

  .v2-roles {
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));   /* five across at normal text size */
  }
}


/* ==========================================================================
   16. PRINT
   What a page looks like when printed or saved as PDF — mainly for the
   one-page brief. Hides the menu, buttons and footer links; prints the
   address; shows link addresses after links in the text.
   ========================================================================== */

@media print {
  :root {
    --text-body: 11pt;
    --space-section: 1.5rem;
  }

  body {
    color: #000000;
  }

  .skip-link,
  .site-nav,
  .button-row,
  .button,
  .closing,
  .footer-grid > :not(.footer-address) {
    display: none;
  }

  .site-footer,
  .section-tint {
    background: none;
    color: #000000;
  }

  .site-footer a,
  .footer-address strong {
    color: #000000;
  }

  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }

  h2,
  h3 {
    break-after: avoid;
  }

  .card,
  .product,
  .evidence-panel,
  .number,
  figure,
  tr {
    break-inside: avoid;
  }
}


/* ==========================================================================
   18. INNER PAGES (version 2)
   Pages built from the drafts by tools/build_pages.py.
   .inner-page    the page body below the header
   .breadcrumb    "Home › Case studies › Pomona" line at the top
   .page-figure   a photograph with its caption
   .page-quote    a quotation from a named person
   .facts-table   the summary table at the top of a case study
   ========================================================================== */

.inner-page {
  padding-top: var(--space-6);
  padding-bottom: var(--space-8);
}

.inner-page h1 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.75rem);
  line-height: 1.15;
  margin-bottom: var(--space-5);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: var(--space-2);
}

.page-figure {
  margin: var(--space-5) 0 var(--space-6);
}

.page-figure img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.page-figure figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-ink-muted);
}

.page-quote {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border-left: 4px solid var(--color-bright);
  background: var(--color-tint, #f2f4f7);
}

.page-quote footer {
  margin-top: var(--space-3);
  font-size: var(--text-small);
  font-weight: 700;
}

.facts-table th[scope="row"] {
  width: 30%;
  min-width: 7rem;
  font-weight: 700;
}

.data-table th[scope="row"] {
  font-weight: 600;
}

.prose .button-row {
  margin: var(--space-5) 0;
}

.prose td,
.prose th {
  overflow-wrap: anywhere;
}