/* ==========================================================================
   AMG Cloud Engineering — site styles
   --------------------------------------------------------------------------
   Contents
     1. Fonts and design tokens (light theme, ink panels, dark theme)
     2. Base
     3. Layout helpers, typography helpers
     4. Buttons, icons, small components
     5. Header and navigation
     6. Hero and proof strip
     7. Sections: glossary, services, why, approach, foundations, experience, contact
     8. Footer
     9. Error page (404.html)
    10. Motion
    11. No-JavaScript fallbacks
    12. Forced colours
    13. Print
   The page follows the system colour scheme. Components take their colours
   from the theme tokens in section 1; the dark theme is one block there.
   Mobile-first: base rules are the small-screen layout; min-width queries
   add to it. Main breakpoints: 40em and 48em (tablet), 62em (desktop
   navigation, two-column hero), 68em (three- and four-column grids,
   side-by-side panels), 78em (two-column section headings), 80em (the five
   steps in one row; the track record beside the certifications).
   ========================================================================== */


/* 1. Fonts and design tokens
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-wght.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The page follows the visitor's system setting: light or dark. This line
     also gives scrollbars and the browser's own controls the matching look. */
  color-scheme: light dark;

  /* Palette -------------------------------------------------------------
     Fixed values. Components do not use these directly, with one exception:
     the brand colours, which are the same in both themes. */

  /* Brand — the logo's colours exactly as its specification gives them
     (orange, blue, red; black or white lettering), plus tints that pass
     contrast as text */
  --orange: #FF9900;
  --orange-hi: #FFB23F;
  --orange-lo: #E88B00;
  --on-orange: #0B0F14;     /* label on an orange fill, 9:1; the same in both themes */
  --blue: #0078D3;
  --blue-ink: #005FB8;      /* blue for text and links on light surfaces */
  --blue-sky: #5CB0FF;      /* blue for text and icons on dark surfaces  */
  --red: #DB4437;
  --red-soft: #FF7B6E;      /* red for text and icons on dark surfaces   */
  --black: #000000;         /* the logo's lettering on white             */
  --white: #FFFFFF;         /* the logo's lettering on dark              */
  /* All three, side by side: the mark of the Microsoft Frontier practice */
  --tri: linear-gradient(90deg, var(--orange) 0 33.34%, var(--blue) 33.34% 66.67%, var(--red) 66.67%);

  /* Ink scale — dark surfaces. ink-900 is the dark the designer set the logo
     on (and the tile of the favicon and the share image): the dark theme's
     header and hero, and the footer in both themes, are exactly this. */
  --ink-950: #06090D;
  --ink-900: #0B0F14;
  --ink-850: #10151C;
  --ink-800: #171D26;
  --rule-dark: #232B36;
  --rule-dark-mid: #2B3441;   /* hairline that still shows on ink-800 */
  --rule-dark-strong: #3A4553;
  --on-dark: #F4F6F8;
  --on-dark-2: #B6C0CC;     /* 10:1 on ink-900, 9:1 on ink-800 */
  --on-dark-3: #8E9AA9;     /* 6.7:1 on ink-900, 5.9:1 on ink-800 */

  /* Paper scale — light surfaces */
  --paper: #FFFFFF;
  --paper-tint: #F3F5F8;
  --rule: #D8DEE6;
  --rule-strong: #B4BDC9;
  --text: #0F141B;
  --text-2: #3C4754;        /* 9.3:1 on white */
  --text-3: #586473;        /* 6:1 on white, 5.5:1 on the tint */

  /* Theme tokens ----------------------------------------------------------
     What components use. The values here are the LIGHT theme; the dark theme
     re-points them in one block further down. Three kinds of surface:
       chrome    header, mobile menu, hero         light or dark with the theme
       surface   reading sections and their cards  light or dark with the theme
       panel     ink panels kept for emphasis      dark in both themes
     (the featured service, "Why identity comes first", the founder card,
     the contact band and the footer). */
  --chrome: var(--paper);
  --chrome-deep: var(--paper-tint);     /* utility bar above the masthead      */
  --logo-on-light: block;               /* which header logo is shown: black   */
  --logo-on-dark: none;                 /* lettering, or white lettering       */
  --surface: var(--paper);              /* the page                            */
  --surface-alt: var(--paper-tint);     /* alternate band, proof strip         */
  --surface-raised: var(--paper);       /* cards                               */
  --band-rule: transparent;             /* hairline between neighbouring bands */

  --panel: var(--ink-900);
  --panel-raised: var(--ink-850);       /* a card inside a panel               */
  --panel-well: var(--ink-800);         /* icon tile inside a panel; hover     */
  --panel-edge: var(--ink-900);         /* outline of a panel that is a card   */
  --panel-glow: none;                   /* light behind the featured service   */
  --footer: var(--ink-900);             /* behind the white-lettered logo: the
                                           dark of the designer's own artwork  */

  --tile: var(--ink-900);               /* square behind a card's icon         */
  --tile-edge: var(--ink-900);
  --inverse: var(--ink-900);            /* solid blocks: step numbers, counter */
  --on-inverse: var(--white);

  --hero-glow: rgba(0, 120, 211, .1);   /* haze behind the three bars          */
  --hero-line: rgba(29, 43, 60, .3);    /* construction lines around the bars  */
  --header-shadow: 0 10px 30px -14px rgba(15, 20, 27, .28);

  /* Text, lines and accents. These follow the surface an element sits on:
     set here for light surfaces, and re-pointed for dark ones just below. */
  --fg-hi: var(--black);                /* display type: the colour of the
                                           logo's lettering, black or white    */
  --fg: var(--text);
  --fg-2: var(--text-2);
  --fg-3: var(--text-3);
  --border: var(--rule);
  --border-strong: var(--rule-strong);
  --focus: var(--blue-ink);
  --link: var(--blue-ink);
  --blue-text: var(--blue-ink);         /* blue as text or line icon           */
  --accent-text: var(--blue-ink);       /* accent as text or line icon: brand
                                           orange is 2.1:1 on white, so light
                                           surfaces use the blue instead       */
  --mark: var(--blue);                  /* fill of a state marker (4.5:1)      */
  --ghost-border: #7A8594;              /* outline buttons, 3.7:1 on white     */
  --wash: rgba(15, 20, 27, .06);        /* hover tint                          */
  --wash-strong: rgba(15, 20, 27, .11);

  /* Type. The brand's typeface is Montserrat Extra Bold (weight 800): the
     title, the section headings and the titles of cards and steps are set in
     it, and so are the small labels in capitals, like the logo's second
     line. Smaller headings in mixed case stay at 700, which reads better at
     their size. */
  --font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --fs-h1: clamp(2.625rem, 1.85rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 2.1vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;

  /* Space */
  --gutter: clamp(1.25rem, .55rem + 3vw, 2.5rem);
  --container: 75rem;
  --section-y: clamp(4rem, 2.6rem + 5.6vw, 7.5rem);

  /* Shape — small radii, and the logo's slant: its three bars lean 23.7° from
     the vertical, parallel to the left stroke of the "A". Every slanted
     marker on the page is a rectangle sheared by this angle, as the bars are.
     --lean is the sideways run per unit of height (tan 23.7°): a sheared box
     reaches half of that, times its height, past each of its sides. */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --skew: -23.7deg;
  --lean: .439;
  --mark-aspect: 2.1339;                /* the three bars together: width to height */

  /* Header. The masthead and the logo in it grow together, in three steps:
     phones, tablets, wide screens. In each the logo keeps its clear space —
     about the height of its letter "A", two thirds of the logo's own height,
     free above and below it. The two larger steps also need a window tall
     enough for them: the masthead stays on screen while the page scrolls, so
     a phone on its side, or a short or zoomed-in window, keeps a smaller
     pair and leaves more of its height to the page. */
  --utility-h: 2.375rem;
  --header-h: 4.625rem;
  --logo-h: 2rem;
}

@media (min-width: 48em) and (min-height: 30em) {
  :root {
    --header-h: 5.25rem;
    --logo-h: 2.25rem;
  }
}

@media (min-width: 62em) and (min-height: 32em) {
  :root {
    --header-h: 6.375rem;
    --logo-h: 2.75rem;
  }
}

/* Ink panels are dark in both themes, so text, lines and accents inside them
   come from the dark scale. (The same list appears once more below, for the
   whole page in the dark theme: keep the two in step.) */
.section--dark,
.service--featured,
.founder,
.site-footer {
  --fg-hi: var(--white);
  --fg: var(--on-dark);
  --fg-2: var(--on-dark-2);
  --fg-3: var(--on-dark-3);
  --border: var(--rule-dark);
  --border-strong: var(--rule-dark-strong);
  --focus: var(--white);
  --link: var(--white);
  --blue-text: var(--blue-sky);
  --accent-text: var(--orange);
  --mark: var(--orange);
  --ghost-border: rgba(255, 255, 255, .38);
  --wash: rgba(255, 255, 255, .08);
  --wash-strong: rgba(255, 255, 255, .14);
  color: var(--fg);
}

/* Dark theme. Colour only: nothing here changes layout, spacing or type.
   "screen" keeps it away from paper — the page always prints light. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    /* Surfaces: page, alternate band and raised card are small steps apart
       and separated by hairlines rather than shadows. */
    --chrome: var(--ink-900);
    --chrome-deep: var(--ink-950);
    --logo-on-light: none;
    --logo-on-dark: block;
    --surface: var(--ink-900);
    --surface-alt: var(--ink-850);
    --surface-raised: var(--ink-800);
    --band-rule: var(--rule-dark);

    /* Panels stay the darkest surfaces on the page, one step below it, and
       gain an outline so they still read as panels. */
    --panel: var(--ink-950);
    --panel-raised: var(--ink-900);
    --panel-well: var(--ink-850);
    --panel-edge: var(--rule-dark-strong);
    --panel-glow: radial-gradient(42rem 24rem at 100% 0%, rgba(0, 120, 211, .2), transparent 70%);

    --tile: var(--ink-950);
    --tile-edge: var(--rule-dark-strong);
    --inverse: #E9EDF2;
    --on-inverse: var(--ink-900);

    --hero-glow: rgba(0, 120, 211, .14);
    --hero-line: rgba(255, 255, 255, .22);
    --header-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);

    /* Text, lines and accents: the dark scale, as on the ink panels above.
       One difference: hairlines are a step lighter, because here they also
       have to show on raised cards. */
    --fg-hi: var(--white);
    --fg: var(--on-dark);
    --fg-2: var(--on-dark-2);
    --fg-3: var(--on-dark-3);
    --border: var(--rule-dark-mid);
    --border-strong: var(--rule-dark-strong);
    --focus: var(--white);
    --link: var(--white);
    --blue-text: var(--blue-sky);
    --accent-text: var(--orange);
    --mark: var(--orange);
    --ghost-border: rgba(255, 255, 255, .38);
    --wash: rgba(255, 255, 255, .08);
    --wash-strong: rgba(255, 255, 255, .14);
  }
}


/* 2. Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor targets stop below the sticky masthead (its height plus its hairline) */
  scroll-padding-top: calc(var(--header-h) + 1px);
  /* An element that keyboard focus scrolls in from below stops clear of the
     window's bottom edge, so its focus ring is whole */
  scroll-padding-bottom: 1rem;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--fg);
  text-wrap: balance;
}

/* Section titles are display type, like the hero's: the brand's extra bold,
   in the black or white of the logo's lettering */
h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.024em;
  color: var(--fg-hi);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.012em;
}

h4 {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: 1.3;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 600;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sections and <main> take focus from script only (skip link, menu links) */
[tabindex="-1"]:focus {
  outline: none;
}

::selection {
  background: var(--orange);
  color: var(--on-orange);
}


/* 3. Layout helpers, typography helpers
   ========================================================================== */

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keeps a hyphenated word or a short name in one piece wherever it fits. It
   is an inline block rather than "nowrap": on a very narrow screen, or with a
   visitor's own text-spacing settings, the words can then still wrap instead
   of running off the screen. */
.keep {
  display: inline-block;
  max-width: 100%;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 200;
  padding: .75rem 1.125rem;
  background: var(--orange);
  color: var(--on-orange);
  font: 700 var(--fs-sm)/1.2 var(--font-display);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* A band of the page. The hairline along its top edge is drawn as a shadow,
   so it takes no space; it is only visible in the dark theme, where
   neighbouring bands are close in tone. */
.section {
  padding-block: var(--section-y);
  box-shadow: inset 0 1px 0 var(--band-rule);
}

.section--light {
  background: var(--surface);
}

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

.section--dark {
  background: var(--panel);
}

/* Section heading block: the title, with the lead paragraph below it. Wide
   screens put the title on the left and the lead on the right; that starts
   only where the title column is wide enough to hold "Microsoft Frontier" on
   one line and the longer titles on two. */
.section-head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);
}

@media (min-width: 78em) {
  .section-head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: end;
  }

  .section-head--solo,
  .section-head--minor {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-head--minor {
    gap: 1.25rem;
  }
}

/* A secondary section (the foundations): the title is a size smaller than
   the other section titles and the lead stays below it at every width. */
.section-head--minor h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.5vw, 2.25rem);
}

/* Small uppercase label with one slanted tick: a bar and extra-bold capitals,
   as in the logo. The tick is offset by its own lean, so its lower left
   corner stands on the edge of the text column. */
.eyebrow {
  position: relative;
  margin-bottom: 1.125rem;
  padding-left: 1.875rem;
  font: 800 var(--fs-xs)/1.5 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.eyebrow::before {
  content: "";
  position: absolute;
  left: calc(.6875rem * var(--lean) / 2);
  top: .34em;
  width: 1rem;
  height: .6875rem;
  background: var(--orange);
  border-radius: 1px;
  transform: skewX(var(--skew));
}

.lead {
  max-width: 40rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
}


/* 4. Buttons, icons, small components
   ========================================================================== */

.icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  min-height: 3rem;
  padding: .6875rem 1.25rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 var(--fs-sm)/1.2 var(--font-display);
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2.25;
  transition: transform .2s ease;
}

.btn:hover .icon--arrow {
  transform: translateX(3px);
}

.btn:hover .icon--down {
  transform: translateY(3px);
}

.btn:hover .icon--external {
  transform: translate(2px, -2px);
}

.btn:active {
  transform: translateY(1px);
}

/* The same in both themes: brand orange with a dark label */
.btn--primary {
  --btn-bg: var(--orange);
  --btn-fg: var(--on-orange);
  --btn-border: var(--orange);
}

.btn--primary:hover {
  --btn-bg: var(--orange-hi);
  --btn-border: var(--orange-hi);
}

.btn--primary:active {
  --btn-bg: var(--orange-lo);
  --btn-border: var(--orange-lo);
}

/* Outline button: takes its colours from the surface it sits on */
.btn--ghost {
  --btn-fg: var(--fg-hi);
  --btn-border: var(--ghost-border);
}

.btn--ghost:hover {
  --btn-bg: var(--wash);
  --btn-border: var(--fg-hi);
}

.btn--ghost:active {
  --btn-bg: var(--wash-strong);
}

.btn--sm {
  min-height: 2.75rem;
  padding: .5rem .875rem;
  font-size: var(--fs-xs);
}

.btn--lg {
  min-height: 3.5rem;
  padding: .875rem 1.625rem;
  font-size: 1rem;
}

/* Square holder for a line icon. An ink tile in both themes, so the icon
   keeps the same tint (see --accent-icon on the foundation practices). */
.icon-tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--tile-edge);
  border-radius: var(--radius);
  background: var(--tile);
  color: var(--accent-icon, var(--white));
}

.icon-tile--line {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--fg);
}

/* Inside an ink panel */
.icon-tile--dark {
  background: var(--panel-well);
  border-color: var(--border-strong);
  color: var(--orange);
}

/* List with slanted tick markers */
.ticks {
  display: grid;
  gap: .6875rem;
}

.ticks li {
  position: relative;
  padding-left: 1.625rem;
  line-height: 1.5;
  text-wrap: pretty;                        /* no single word left on the last line */
}

.ticks li::before {
  content: "";
  position: absolute;
  left: .1875rem;
  top: .5em;
  width: .625rem;
  height: .5rem;
  background: var(--accent, var(--fg));
  border-radius: 1px;
  transform: skewX(var(--skew));
}

/* Small numeric badge */
.count {
  display: inline-grid;
  place-items: center;
  min-width: 1.875rem;
  height: 1.625rem;
  padding-inline: .5rem;
  border-radius: var(--radius-sm);
  background: var(--inverse);
  color: var(--on-inverse);
  font: 700 var(--fs-xs)/1 var(--font-display);
  letter-spacing: 0;
}

.count--sm {
  min-width: 1.625rem;
  height: 1.375rem;
  padding-inline: .375rem;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg-2);
  font-size: .75rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.chips li {
  padding: .3125rem .6875rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: 600 var(--fs-xs)/1.4 var(--font-display);
  color: var(--fg);
}


/* 5. Header and navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--chrome);
  transition: box-shadow .2s ease;
}

.site-header.is-stuck {
  box-shadow: var(--header-shadow);
}

/* Utility bar (wide screens). A minimum height, not a fixed one: if a visitor's
   own text-spacing settings wrap the line, the bar grows instead of cutting it off. */
.utility {
  display: none;
  min-height: var(--utility-h);
  background: var(--chrome-deep);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.2;
  color: var(--fg-3);
}

.utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: calc(var(--utility-h) - 1px);  /* the bar's height less its hairline */
}

.utility__meta span {
  margin-inline: .375rem;
  color: var(--border-strong);
}

.utility__links {
  display: flex;
  flex: none;
  gap: 1.75rem;
}

.utility__links a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding-block: .5rem;
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
}

.utility__links a:hover {
  color: var(--fg-hi);
  text-decoration: underline;
}

.utility__links .icon {
  width: .9375rem;
  height: .9375rem;
  color: var(--accent-text);
}

/* Masthead: logo, navigation, contact button */
.masthead {
  border-bottom: 1px solid var(--border);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: .625rem;
  height: var(--header-h);
}

/* The link is a full 44px-high tap target; the logo sits in its middle.
   Logo and masthead are sized together (--logo-h, --header-h): the letters
   "AMG" are two thirds of the logo's height, and about that much stays free
   above and below it, and between it and the navigation or the buttons. */
.brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 2.75rem;
  margin-right: auto;
}

.brand__logo {
  width: auto;
  height: var(--logo-h);
}

/* The logo comes twice in the markup: black lettering for a light header,
   white lettering for a dark one. Both have the same size, and the theme
   tokens pick one before the first paint, so nothing flashes or moves. */
.brand__logo--on-light {
  display: var(--logo-on-light);
}

.brand__logo--on-dark {
  display: var(--logo-on-dark);
}

.masthead__cta--wide {
  display: none;
}

.nav-toggle {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--ghost-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg-hi);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}

.nav-toggle:hover {
  background: var(--wash);
  border-color: var(--fg-hi);
}

.nav-toggle .icon {
  stroke-width: 2;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

/* Very narrow screens (320px, or a desktop window zoomed to 400%): a slightly
   smaller logo and tighter spacing keep the menu button inside the gutter,
   and the logo's clear space free of the contact button. */
@media (max-width: 21.25em) {
  .masthead__inner {
    gap: .5rem;
  }

  .brand__logo {
    height: 1.75rem;
  }

  .masthead__cta--compact {
    padding-inline: .75rem;
  }
}

/* Small screens: the navigation is a panel that drops below the masthead */
.primary-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  padding: .5rem var(--gutter) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--chrome);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.5rem);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.site-header.is-open .primary-nav {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

/* Lock page scroll behind the open panel. Only the root element is locked:
   locking <body> as well would turn it into the sticky header's scroll
   container, and header and menu would jump to the top of the document. */
.menu-open {
  overflow: hidden;
}

.primary-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.75rem;
  border-bottom: 1px solid var(--border);
  color: var(--fg-hi);
  font: 700 1.375rem/1.2 var(--font-display);
  letter-spacing: -.01em;
  text-decoration: none;
}

.primary-nav__list a::after {
  content: "";
  width: .625rem;
  height: .625rem;
  margin-right: .25rem;
  border-top: 2px solid var(--fg-3);
  border-right: 2px solid var(--fg-3);
  transform: rotate(45deg);
}

.primary-nav__list a[aria-current] {
  color: var(--accent-text);
}

/* In the panel the current section is underlined too, so that it is not
   marked by colour alone. (Wide screens draw the slanted underline instead.) */
@media (max-width: 61.99em) {
  .primary-nav__list a[aria-current] {
    text-decoration: underline;
    text-decoration-thickness: .125em;
    text-underline-offset: .3em;
  }
}

.primary-nav__contact {
  display: grid;
  gap: .25rem;
  margin-top: auto;
  padding-top: 2rem;
}

.primary-nav__contact a {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.75rem;
  color: var(--fg);
  font-size: var(--fs-body);
  text-decoration: none;
}

.primary-nav__contact .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-text);
}

/* Wide screens: inline navigation */
@media (min-width: 62em) {
  .site-header {
    top: calc(var(--utility-h) * -1);   /* the utility bar scrolls away, the masthead sticks */
  }

  .utility {
    display: block;
  }

  .masthead__inner {
    gap: 1.75rem;
  }

  .nav-toggle,
  .masthead__cta--compact,
  .primary-nav__contact {
    display: none;
  }

  .masthead__cta--wide {
    display: inline-flex;
  }

  .primary-nav {
    position: static;
    display: block;
    height: auto;
    padding: 0;
    overflow: visible;
    background: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .primary-nav__list {
    display: flex;
    gap: .25rem;
  }

  .primary-nav__list a {
    position: relative;
    display: inline-flex;
    min-height: 2.75rem;
    padding-inline: .875rem;
    border: 0;
    color: var(--fg-2);
    font: 600 var(--fs-sm)/1.2 var(--font-display);
    letter-spacing: 0;
    transition: color .16s ease;
  }

  /* Slanted underline: grows on hover, stays for the current section */
  .primary-nav__list a::after {
    position: absolute;
    left: .875rem;
    right: .875rem;
    bottom: .25rem;
    width: auto;
    height: 3px;
    margin: 0;
    border: 0;
    border-radius: 1px;
    background: var(--mark);
    transform: skewX(var(--skew)) scaleX(0);
    transform-origin: left center;
    transition: transform .2s ease;
  }

  .primary-nav__list a:hover,
  .primary-nav__list a[aria-current] {
    color: var(--fg-hi);
  }

  .primary-nav__list a:hover::after,
  .primary-nav__list a[aria-current]::after {
    transform: skewX(var(--skew)) scaleX(1);
  }
}

/* Just above the breakpoint the row is full. Tighter spacing leaves room for
   larger text or a visitor's own text-spacing settings without the contact
   button being pushed off the page. */
@media (min-width: 62em) and (max-width: 66.99em) {
  .masthead__inner {
    gap: 1rem;
  }

  .primary-nav__list {
    gap: 0;
  }

  .primary-nav__list a {
    padding-inline: .625rem;
  }

  .primary-nav__list a::after {
    left: .625rem;
    right: .625rem;
  }
}


/* 6. Hero and proof strip
   ========================================================================== */

.hero {
  background: var(--chrome);
}

.hero__stage {
  --bar-h: clamp(5.25rem, 23.5vw, 9.5rem);          /* height of the bars                          */
  --bar-gap: clamp(2rem, 1.25rem + 3vw, 3rem);       /* space between the bars and the edge below   */
  --bar-show: calc(var(--bar-h) + var(--bar-gap));  /* room the art takes at the foot of the stage */
  position: relative;
  overflow: hidden;
}

.hero__inner {
  padding-block: clamp(2.75rem, 1.6rem + 5vw, 5rem) calc(var(--bar-show) + clamp(1.75rem, 1rem + 3vw, 2.75rem));
}

/* Text sits above the art wherever the two meet */
.hero__headline,
.hero__copy,
.hero-index {
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  margin-bottom: 1.5rem;
  color: var(--fg-2);
}

/* The eyebrow has two parts. Until the screen is wide enough for both on one
   line (624px), each part takes its own line and the dot between the two is
   dropped. */
.eyebrow__part {
  white-space: nowrap;
}

@media (max-width: 38.99em) {
  .eyebrow__part {
    display: block;
    white-space: normal;
    text-wrap: balance;
  }

  .eyebrow__sep {
    display: none;
  }
}

/* Narrow phones: a little tighter, in two steps, so the second part stays on
   one line down to 320px. The tick shrinks with the capitals, so that it
   still runs from their top to the baseline, as the bars do in the logo. */
@media (max-width: 24.99em) {
  .hero__eyebrow {
    padding-left: 1.75rem;
    font-size: .75rem;
    letter-spacing: .1em;
  }

  .hero__eyebrow::before {
    left: calc(.5625rem * var(--lean) / 2);
    width: .875rem;
    height: .5625rem;
  }
}

@media (max-width: 21.99em) {
  .hero__eyebrow {
    padding-left: 1.625rem;
    font-size: .6875rem;
    letter-spacing: .06em;
  }

  .hero__eyebrow::before {
    left: calc(.5rem * var(--lean) / 2);
    width: .75rem;
    height: .5rem;
  }
}

/* The title is two sentences, one block each. Small screens: a sentence
   wraps where it has to ("Human-led, / agent-operated. / Governed / from day
   one."), sized so that "agent-operated." fits a 320px screen. */
.hero__title {
  margin-bottom: 1.5rem;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.032em;
  color: var(--fg-hi);
  text-wrap: wrap;
}

/* The size follows the width of the screen. It is set on the spans inside
   the title as well as on the title: a span that only inherits a
   viewport-based size can be left with a stale one when the viewport changes
   (seen in Chromium's full-page captures). */
.hero__title,
.hero__title span {
  font-size: clamp(2rem, 9.6vw, 3.25rem);
}

.hero__title-line {
  display: block;
  text-wrap: balance;
}

/* The full stop is the orange bar's echo: decoration, not text to be read,
   so it stays brand orange on a light header too. */
.hero__title-stop {
  color: var(--orange);
}

/* Tablet: sized so each sentence fits on one line */
@media (min-width: 48em) {
  .hero__title,
  .hero__title span {
    font-size: min(6.3vw, 3.75rem);
  }
}

.hero__sub {
  max-width: 37rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
}

.hero__actions {
  display: grid;
  gap: .75rem;
  margin-top: 2rem;
}

/* Side by side once both buttons fit on one line */
@media (min-width: 36em) {
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Phones: the two buttons are stacked and as wide as the column. A long
   label may wrap there instead of running off the screen (a visitor's own
   text-spacing settings can make it longer still). */
@media (max-width: 35.99em) {
  .hero__actions .btn {
    padding-inline: 1rem;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 21.25em) {
  .hero__actions .btn {
    font-size: .9375rem;
  }
}

/* Index of the six services of the Microsoft Frontier practice. Each row links to its card. */
.hero-index {
  margin-top: 2.5rem;
}

.hero-index__label {
  position: relative;
  margin-bottom: .75rem;
  padding-left: 1.6875rem;
  font: 800 .75rem/1.4 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Slanted tick in the practice's three colours (the same as on its cards).
   Each stripe is half as wide as it is tall, like a bar of the logo. */
.hero-index__label::before {
  content: "";
  position: absolute;
  left: calc(.625rem * var(--lean) / 2);
  top: .29em;
  width: .9375rem;
  height: .625rem;
  border-radius: 1px;
  background: var(--tri);
  transform: skewX(var(--skew));
}

.hero-index__list {
  display: grid;
  border-top: 1px solid var(--border-strong);
}

.hero-index__item a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .875rem;
  min-height: 3.25rem;
  padding-block: .625rem;
  border-bottom: 1px solid var(--border);
  color: var(--fg-hi);
  font: 600 .9375rem/1.3 var(--font-display);
  text-decoration: none;
  transition: border-color .16s ease;
}

.hero-index__num {
  margin-left: .125rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--fg-3);
}

.hero-index__item .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: .125rem;
  color: var(--fg-3);
  stroke-width: 2;
  transition: transform .2s ease, color .16s ease;
}

.hero-index__item a:hover {
  border-bottom-color: var(--fg-3);
}

.hero-index__item a:hover .icon {
  color: var(--accent-text);
  transform: translateX(3px);
}

/* Tablet: two columns of three, numbered down each column */
@media (min-width: 40em) and (max-width: 61.99em) {
  .hero-index__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 2rem;
    border-top: 0;
  }

  .hero-index__item a {
    height: 100%;
  }

  .hero-index__item:nth-child(3n + 1) a {
    border-top: 1px solid var(--border-strong);
  }
}

/* The quiet line under the index: a label, then the three foundation
   practices, each with a tick in the colour of its card. The label hangs on
   the left; where the three links do not fit on one line they wrap beside it,
   never under it. */
.hero-index__foundations {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .75rem;
  align-items: start;
  margin-top: .25rem;
  font-size: var(--fs-xs);
  line-height: 1.3;
  color: var(--fg-3);
}

.hero-index__foundations-label {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.hero-index__foundation-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: .75rem;
}

.hero-index__foundation {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-height: 2.75rem;
  color: var(--fg-2);
  text-decoration: none;
}

.hero-index__foundation::before {
  content: "";
  flex: none;
  width: .625rem;
  height: .4375rem;
  border-radius: 1px;
  background: var(--tick);
  transform: skewX(var(--skew));
}

.hero-index__foundation--blue   { --tick: var(--blue); }
.hero-index__foundation--orange { --tick: var(--orange); }
.hero-index__foundation--red    { --tick: var(--red); }

.hero-index__foundation:hover {
  color: var(--fg-hi);
  text-decoration: underline;
}

/* Art. Small screens: the whole mark stands at the foot of the stage, in line
   with the text and clear of every edge — the three bars are never cut. Only
   the faint construction lines and ghost outlines run on past the screen.
   Wide screens: the whole mark stands beside the headline as the bars stand
   beside the lettering in the logo — from the capitals of the label down to
   the baseline of the title. */
.hero__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--bar-show) + .25rem), transparent calc(var(--bar-show) + 2.5rem));
  mask-image: linear-gradient(to top, #000 calc(var(--bar-show) + .25rem), transparent calc(var(--bar-show) + 2.5rem));
}

.hero__bars {
  position: absolute;
  left: var(--gutter);
  bottom: var(--bar-gap);
  width: calc(var(--bar-h) * var(--mark-aspect));
  max-width: none;
  height: var(--bar-h);
  overflow: visible;
}

/* Construction lines and ghost bars take the theme's line colour and
   strength: faint white on the dark hero, a slightly stronger ink on the
   light one, so they carry the same weight on both. (The grey written in the
   SVG itself is only a fallback.) The three bars keep their brand colours. */
.hero__bars stop {
  stop-color: var(--hero-line);
}

.hero__ghost {
  stroke: var(--hero-line);
}

/* Wide screens. Row one: the title, with the three bars beside it.
   Row two: paragraph and buttons on the left, the index on the right. */
@media (min-width: 62em) {
  .hero__stage {
    --title-size: clamp(2.625rem, 4.2vw, 3.375rem);   /* the title, and the measure of the mark beside it */
    background: radial-gradient(44rem 28rem at 84% 30%, var(--hero-glow), transparent 70%);
  }

  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.25rem, 3.4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
    align-items: start;
    padding-block: clamp(3.5rem, 5vw, 4.5rem);
  }

  .hero__top {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: end;
  }

  .hero__title {
    margin-bottom: 0;
  }

  /* Sized so the first sentence and the three bars share the row */
  .hero__title,
  .hero__title span {
    font-size: var(--title-size);
  }

  .hero__title-line {
    white-space: nowrap;
  }

  /* The mark takes the space beside the title. Its bars stand on the baseline
     of the title's second line (.1615 of the title's size above the foot of
     the row) and rise to the top of the label's capitals: 1.9185 of the
     title's size, plus 2.387rem for the label and the space under it. (The
     figures are Montserrat's: ascent .968, capitals .7, title line 1.04.) The
     width follows from the mark's proportions, and never exceeds the column.
     Guides and ghost bars run on past it. */
  .hero__art {
    position: relative;
    inset: auto;
    justify-self: end;
    width: min(100%, (1.9185 * var(--title-size) + 2.387rem) * var(--mark-aspect));
    margin-bottom: calc(.1615 * var(--title-size));
    aspect-ratio: var(--mark-aspect);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hero__bars {
    left: 0;
    top: 0;
    bottom: auto;
    width: 100%;
    height: 100%;
  }

  .hero__sub {
    max-width: 36rem;
  }

  .hero-index {
    margin-top: 0;
  }

  .hero-index__item a {
    min-height: 2.75rem;
    padding-block: .4375rem;
  }
}

/* With a mouse the foundations line does not need 44px touch targets, so it
   can be the quiet line it is meant to be. (Tablets in landscape keep them.) */
@media (min-width: 62em) and (hover: hover) and (pointer: fine) {
  .hero-index__foundations {
    margin-top: .5rem;
  }

  .hero-index__foundations-label,
  .hero-index__foundation {
    min-height: 1.75rem;
  }
}

/* Proof strip: an alternate band that closes the hero */
.proof {
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}

.proof__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

/* The right padding is kept small so "20+ years" fits on one line at 360px */
.proof__item {
  padding: 1.5rem .5rem 1.625rem 0;
}

.proof__item:nth-child(even) {
  padding-left: 1.25rem;
  border-left: 1px solid var(--border);
}

.proof__item:nth-child(n + 3) {
  border-top: 1px solid var(--border);
}

.proof__item dt {
  font: 800 clamp(1.625rem, 1.3rem + 1.5vw, 2.375rem)/1.1 var(--font-display);
  letter-spacing: -.025em;
  color: var(--fg-hi);
}

/* The tick above each figure has the cut of the eyebrow's tick, and stands
   with its lower left corner on the edge of the text in the same way */
.proof__item dt::before {
  content: "";
  display: block;
  width: 1rem;
  height: .6875rem;
  margin: 0 0 .6875rem calc(.6875rem * var(--lean) / 2);
  border-radius: 1px;
  background: var(--tick, var(--fg-hi));
  transform: skewX(var(--skew));
}

.proof__item--orange { --tick: var(--orange); }
.proof__item--blue   { --tick: var(--blue); }
.proof__item--red    { --tick: var(--red); }
.proof__item--plain  { --tick: var(--fg-hi); }   /* the logo's lettering: black, or white on dark */

.proof__item dd {
  max-width: 17.5rem;
  margin: .5rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}

/* Four in a row. The widths follow the length of the four texts, so none of
   them runs a line longer than its neighbours. */
@media (min-width: 56em) {
  .proof__list {
    grid-template-columns: 1.15fr 1.25fr .85fr 1.15fr;
  }

  .proof__item {
    padding: 2rem 1.5rem 2.125rem 0;
  }

  .proof__item:nth-child(n + 3) {
    border-top: 0;
  }

  .proof__item:nth-child(n + 2) {
    padding-left: 2rem;
    border-left: 1px solid var(--border);
  }
}


/* 7. Sections
   ========================================================================== */

/* --- What Microsoft means by Frontier: glossary and statement ------------ */

/* A glossary, not a row of cards: one ruled list, each term on the left with
   its label above it, the definition on the right. */
.glossary {
  margin: 0;
  border-top: 2px solid var(--fg);
}

.term {
  display: grid;
  gap: .625rem 2rem;
  padding-block: 1.375rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.term__name {
  font: 800 1.25rem/1.25 var(--font-display);
  letter-spacing: -.015em;
  color: var(--fg-hi);
}

.term__label {
  display: block;
  margin-bottom: .375rem;
  font: 800 .75rem/1.4 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.term__def {
  max-width: 42rem;
  margin: 0;
  color: var(--fg-2);
  text-wrap: pretty;
}

@media (min-width: 48em) {
  .term {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    padding-block: 1.5rem 1.75rem;
  }

  .term__name {
    font-size: 1.375rem;
  }

  /* The definition starts on the line of the term, below the label */
  .term__def {
    padding-top: 1.4375rem;
  }
}

/* The columns the section heading above takes on wide screens, so the
   definitions stand under its lead paragraph there */
@media (min-width: 62em) {
  .term {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 4rem;
  }
}

/* The statement that defines the practice name. It carries the company's
   own mark: the four terms above are Microsoft's, this one is ours. */
.statement {
  display: grid;
  gap: 1.25rem 2rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}

.statement__mark {
  width: 4.5rem;
}

.statement__text {
  max-width: 42rem;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--fg-2);
}

/* A whole sentence, not a title or a label: bold, not the extra bold of the
   display type */
.statement__text strong {
  display: block;
  margin-bottom: .75rem;
  font: 700 clamp(1.25rem, 1.08rem + .75vw, 1.625rem)/1.3 var(--font-display);
  letter-spacing: -.015em;
  color: var(--fg-hi);
  text-wrap: pretty;
}

@media (min-width: 48em) {
  .statement {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }

  .statement__mark {
    width: 6.5rem;
    margin-top: .25rem;
  }
}

/* Wide screens: the text starts on the definitions' left edge. The first
   column is the glossary's first column less this panel's own padding, and
   the mark is large enough to hold that column. */
@media (min-width: 62em) {
  .statement {
    grid-template-columns: calc((100% + .5rem) * 5 / 12 - 2.25rem) minmax(0, 1fr);
    column-gap: 4rem;
    padding: 2.25rem;
  }

  .statement__mark {
    width: 9rem;
  }
}

/* --- Microsoft Frontier: the six services -------------------------------- */

.services {
  display: grid;
  gap: 1.25rem;
}

.service {
  --accent: var(--fg);                      /* tick markers */
  position: relative;
  scroll-margin-top: 1.25rem;               /* breathing room when linked directly */
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  padding-top: calc(clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem) + 4px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-top-width: 0;                      /* the colour rule below is the top edge */
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

/* The practice builds on all three foundations, so its cards carry all three
   colours along the top edge. Colour supports the numbering and titles; it
   never carries meaning alone. */
.service::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--tri);
}

.service__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.service__num {
  font: 800 1.375rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--fg-3);
}

.service__title {
  margin-bottom: .75rem;
  font-weight: 800;
  letter-spacing: -.018em;
}

/* The one-line promise: the hook, larger and stronger than the list that
   follows */
.service__promise {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--fg);
}

.service__list {
  align-content: start;
  font-size: 1rem;
  color: var(--fg-2);
}

/* The first service: featured, on an ink panel */
.service--featured {
  border-color: var(--panel-edge);
  background: var(--panel-glow), var(--panel);
}

.service--featured .icon-tile {
  background: var(--panel-well);
  border-color: var(--border-strong);
}

.service--featured .service__title {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.service--featured .service__promise {
  font-size: var(--fs-lead);
}

.service--featured .service__list {
  font-size: var(--fs-body);
}

/* A list that can be folded away: a native disclosure. It is open in the
   markup; on small screens main.js closes it (see the note in index.html)
   and this row opens it again. From tablet width up the row is hidden and
   the list is always shown. */
.more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 3rem;
  border-top: 1px solid var(--border);
  border-radius: 2px;
  list-style: none;
  cursor: pointer;
  font: 700 var(--fs-sm)/1.2 var(--font-display);
  color: var(--fg);
}

.more > summary::-webkit-details-marker {
  display: none;
}

.more > summary:hover {
  color: var(--accent-text);
}

.more__chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--fg-2);
  transition: transform .2s ease;
}

.more > summary:hover .more__chevron {
  color: currentColor;
}

.more[open] .more__chevron {
  transform: rotate(180deg);
}

.more > .ticks {
  padding-block: .375rem 1rem;
}

.service__more,
.practice__more {
  margin-top: 1.25rem;
}

/* Small screens: the "What it covers" row closes the card */
@media (max-width: 47.99em) {
  .service {
    padding-bottom: .5rem;
  }
}

@media (min-width: 48em) {
  .more[open] > summary {
    display: none;
  }

  .more > .ticks {
    padding-block: 0;
  }

  /* Tablet and up: head and list side by side inside every card. On tablets
     the list gets the wider column, so its lines are not too short. */
  .service {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 2rem;
  }

  .service__more {
    margin-top: 0;
    padding-left: 2rem;
    border-left: 1px solid var(--border);
  }
}

@media (min-width: 68em) {
  .services {
    gap: 1.5rem;
  }

  /* The columns of the section heading, so titles, dividers and lists line
     up down the page */
  .service {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    padding-inline: 3rem;
  }

  .service__more {
    padding-left: 3.5rem;
  }

  .service--featured {
    padding-block: calc(3rem + 4px) 3rem;
  }
}

/* --- Why identity comes first (dark band) -------------------------------- */

.why__grid {
  display: grid;
  gap: 2.5rem;
}

.why__lead {
  margin-top: 1.375rem;
}

.why__list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--border);
}

.why__item {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: var(--panel-raised);
}

.why__item h3 {
  margin-bottom: .625rem;
  font-size: 1.1875rem;
  line-height: 1.25;
  color: var(--fg-hi);
}

/* The same tick as above the figures of the proof strip */
.why__item h3::before {
  content: "";
  display: block;
  width: 1rem;
  height: .6875rem;
  margin: 0 0 .9375rem calc(.6875rem * var(--lean) / 2);
  border-radius: 1px;
  background: var(--tick, var(--fg-hi));
  transform: skewX(var(--skew));
}

.why__item--blue   { --tick: var(--blue); }
.why__item--orange { --tick: var(--orange); }
.why__item--red    { --tick: var(--red); }
.why__item--plain  { --tick: var(--fg-hi); }

.why__item p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--fg-2);
}

@media (min-width: 40em) {
  .why__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68em) {
  .why__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 4rem;
    align-items: start;
  }

  .why__head {
    position: sticky;
    top: calc(var(--header-h) + 2.5rem);
  }
}

/* --- Approach: five steps ------------------------------------------------ */

.steps {
  display: grid;
  gap: 2rem;
}

.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  column-gap: 1.25rem;
}

/* Number in a slanted block, cut like a bar of the logo: a rectangle with one
   small radius on all four corners, sheared. The shear is what makes two
   corners soft (top left, bottom right) and two tight, in the logo's bars
   and here alike, so the four radii stay equal. The inner span leans back so
   the digits stay upright. The block is offset by its own lean, so its lower
   left corner stands on the edge of the text column. */
.steps__num {
  --num-h: 2.5rem;
  display: grid;
  grid-row: 1 / span 2;
  place-items: center;
  align-self: start;
  width: 3rem;
  height: var(--num-h);
  margin-left: calc(var(--num-h) * var(--lean) / 2);
  border-radius: 3px;
  background: var(--inverse);
  color: var(--on-inverse);
  font: 800 1rem/1 var(--font-display);
  transform: skewX(var(--skew));
}

.steps__num span {
  transform: skewX(calc(var(--skew) * -1));
}

/* Connector to the next step: it leaves from the middle of the block's lower edge */
.steps__item::before {
  content: "";
  position: absolute;
  top: 3.125rem;
  bottom: -1.375rem;
  left: 1.5rem;
  width: 1px;
  background: var(--border-strong);
}

.steps__item:last-child::before {
  display: none;
}

.steps__title {
  margin: .4375rem 0 .5rem;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.015em;
}

.steps__item p {
  grid-column: 2;
  color: var(--fg-2);
}

/* Tablet and small laptops: the same path down the page, with each title
   beside its text */
@media (min-width: 48em) {
  .steps {
    gap: 2.25rem;
  }

  .steps__item {
    grid-template-columns: 3.75rem minmax(0, 4fr) minmax(0, 7fr);
    column-gap: 1.5rem;
  }

  .steps__num {
    grid-row: auto;
  }

  .steps__item::before {
    bottom: -1.625rem;
  }

  .steps__title {
    margin-bottom: 0;
  }

  .steps__item p {
    grid-column: 3;
    max-width: 40rem;
    padding-top: .3125rem;                  /* first line level with the title */
  }
}

/* Wide screens: five columns, the path running left to right */
@media (min-width: 80em) {
  .steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 2rem;
  }

  .steps__item {
    display: block;
  }

  .steps__num {
    margin-bottom: 1.5rem;
  }

  /* The same distance from the block it leaves and the block it reaches */
  .steps__item::before {
    top: 1.25rem;
    bottom: auto;
    left: 4.5625rem;
    right: -1.5625rem;
    width: auto;
    height: 1px;
  }

  .steps__title {
    margin: 0 0 .625rem;
    font-size: 1.25rem;
    line-height: 1.2;
  }

  .steps__item p {
    padding-top: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
  }

  /* Number, title and text sit on shared row tracks, so a two-line title in
     one column does not push its text out of line with its neighbours. */
  @supports (grid-template-rows: subgrid) {
    .steps__item {
      display: grid;
      grid-row: span 3;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: subgrid;
    }

    .steps__item p {
      grid-column: 1;
    }
  }
}

/* --- Foundations: three practices and the engineering strip -------------- */

.practices {
  display: grid;
  gap: 1.25rem;
}

/* Compact cards: deliberately smaller and quieter than the service cards */
.practice {
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 1.25rem;               /* breathing room when linked directly */
  padding: 1.5rem;
  padding-top: calc(1.5rem + 3px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-top-width: 0;                      /* the colour rule below is the top edge */
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

/* Colour rule along the top edge. Colour supports the titles; it never
   carries meaning alone. */
.practice::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
}

.practice--blue {
  --accent: var(--blue);
  --accent-icon: var(--blue-sky);
}

.practice--orange {
  --accent: var(--orange);
  --accent-icon: var(--orange);
}

.practice--red {
  --accent: var(--red);
  --accent-icon: var(--red-soft);
}

.practice__head {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1rem;
}

.practice .icon-tile {
  width: 2.75rem;
  height: 2.75rem;
}

.practice__title {
  font-size: 1.25rem;
}

/* The one-line role of the practice */
.practice__role {
  margin-bottom: .5rem;
  font: 700 var(--fs-sm)/1.4 var(--font-display);
  color: var(--fg);
}

.practice__lead {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--fg-2);
}

.practice__list {
  align-content: start;
  gap: .5625rem;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

/* Small screens: the "What it covers" row closes the card, as in the services */
@media (max-width: 47.99em) {
  .practice {
    padding-bottom: .5rem;
  }
}

/* Tablet: head and list side by side, as in the service cards */
@media (min-width: 48em) and (max-width: 67.99em) {
  .practice {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr;
    column-gap: 2.5rem;
    padding: 1.75rem 2rem;
    padding-top: calc(1.75rem + 3px);
  }

  .practice__head,
  .practice__intro {
    grid-column: 1;
  }

  .practice__more {
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: 0;
    padding-left: 2.5rem;
    border-left: 1px solid var(--border);
  }
}

/* Wide screens: three cards in a row */
@media (min-width: 68em) {
  .practices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.5rem;
  }

  .practice {
    padding: 1.75rem;
    padding-top: calc(1.75rem + 3px);
  }

  .practice__more {
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
  }

  /* Head, text and list sit on shared row tracks, so the three lists start
     on one line whatever the length of the text above them. */
  @supports (grid-template-rows: subgrid) {
    .practice {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

/* Engineering strip: a heading, one line, and four compact items */
.eng-strip {
  scroll-margin-top: 1.25rem;
  margin-top: clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
}

.eng-strip__head {
  display: grid;
  gap: .5rem 2rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.125rem;
  border-bottom: 2px solid var(--fg);
}

.eng-strip__title {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.015em;
}

.eng-strip__lead {
  max-width: 40rem;
  color: var(--fg-2);
}

@media (min-width: 62em) {
  .eng-strip__head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 4rem;
    align-items: baseline;
  }
}

/* Small screens: the four items fold away, like the lists of the practices
   (see .more above). The "What it covers" row sits directly under the
   strip's rule and is closed by a hairline of its own. */
@media (max-width: 47.99em) {
  .eng-strip__head {
    margin-bottom: 0;
  }

  .eng-strip__more > summary {
    border-top: 0;
    border-bottom: 1px solid var(--border);
  }

  .eng-strip__more > .eng {
    margin-top: 1rem;
  }
}

/* One bordered sheet, split by hairlines: the 1px grid gap shows the
   container's background colour. */
.eng {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--border);
}

.eng__item {
  padding: 1.25rem 1.375rem 1.375rem;
  background: var(--surface-raised);
}

/* Icon and title share a line */
.eng__head {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: .75rem;
}

.eng__item .icon-tile {
  width: 2.5rem;
  height: 2.5rem;
}

.eng__item .icon-tile .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.eng__title {
  font-size: 1.0625rem;
  line-height: 1.25;
}

.eng__item p {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--fg-2);
}

@media (min-width: 40em) {
  .eng {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Title and text sit on shared row tracks, so a two-line title in one
     column does not push its paragraph out of line with its neighbours. */
  @supports (grid-template-rows: subgrid) {
    .eng__item {
      display: grid;
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

@media (min-width: 68em) {
  .eng {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- Experience ---------------------------------------------------------- */

.founder {
  --founder-gap: 1.5rem;                    /* space between the rows of the card */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "photo  id"
    "bio    bio"
    "facts  facts"
    "skills skills";
  gap: var(--founder-gap) 1.125rem;
  align-items: center;
  padding: clamp(1.5rem, .9rem + 2.6vw, 3rem);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--panel-edge);   /* an outline that takes no space */
}

.founder__photo {
  grid-area: photo;
  width: 4.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 .375rem rgba(255, 255, 255, .05);
}

.founder__id {
  grid-area: id;
}

.founder__name {
  font-size: clamp(1.25rem, .9rem + 1.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--fg-hi);
}

.founder__role {
  margin-top: .375rem;
  font: 600 var(--fs-sm)/1.4 var(--font-display);
  color: var(--accent-text);
}

.founder__bio {
  grid-area: bio;
}

.founder__bio p {
  max-width: 38rem;
  color: var(--fg-2);
}

.founder__bio p + p {
  margin-top: .875rem;
}

.founder__bio .btn {
  margin-top: 1.5rem;
}

/* The facts and the skills each sit in a foldable list (see .more): two rows
   at the foot of the card on small screens, always shown from tablet width up. */
.founder__more--facts {
  grid-area: facts;
  align-self: start;
}

.founder__more--skills {
  grid-area: skills;
}

.founder__facts {
  margin: 0;
  border-top: 1px solid var(--border);
}

.fact {
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--border);
}

.fact dt,
.skillset__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .625rem;
  font: 800 .75rem/1.4 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.fact dt .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--accent-text);
}

.fact dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-2);
}

.fact dd + dd {
  margin-top: .5rem;
}

.fact dd strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-hi);
}

.founder__skills {
  display: grid;
  gap: 1.5rem 3rem;
}

.skillset__title {
  margin-bottom: .875rem;
}

/* Small screens: the two toggle rows sit directly under one another and close
   the card, as the "What it covers" row closes a service card. */
@media (max-width: 47.99em) {
  .founder {
    padding-bottom: .5rem;
  }

  .founder__more--skills {
    margin-top: calc(-1 * var(--founder-gap));
  }

  /* The row of the skills follows: no second hairline above it */
  .founder__more .fact:last-child {
    border-bottom: 0;
  }

  .founder__more > .founder__facts {
    margin-top: 0;
  }

  .founder__more > .founder__skills {
    margin-top: 0;
    padding-block: .5rem 1.25rem;
  }
}

/* Tablet: the portrait takes its own column beside name and biography */
@media (min-width: 40em) {
  .founder {
    --founder-gap: 1.25rem;
    grid-template-areas:
      "photo  id"
      "photo  bio"
      "facts  facts"
      "skills skills";
    column-gap: 2.25rem;
    align-items: start;
  }

  .founder__photo {
    width: clamp(6.5rem, 5.2rem + 5.6vw, 9rem);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 0 0 .5rem rgba(255, 255, 255, .05);
  }

  .founder__id {
    padding-top: .375rem;
  }

  .founder__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.25rem;
    margin-top: .75rem;
  }

  /* Third fact: a full row under the first two */
  .fact--award {
    grid-column: 1 / -1;
  }

  .founder__skills {
    margin-top: .5rem;
  }
}

@media (min-width: 56em) {
  /* Room for the three facts side by side */
  .founder__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fact--award {
    grid-column: auto;
  }

  .founder__skills {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
}

@media (min-width: 68em) {
  .founder {
    grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr);
    /* The facts column is the taller one: the biography row takes the spare
       height, so the biography stays directly under the name */
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "photo  id     facts"
      "photo  bio    facts"
      "skills skills skills";
    column-gap: 3rem;
  }

  .founder__facts {
    display: block;
    margin-top: 0;
  }

  /* The last fact ends the column: no rule under it, the skills divider follows */
  .fact:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .founder__skills {
    margin-top: 1rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--border);
  }
}

/* Track record, then certifications */
.record {
  display: grid;
  gap: 3rem;
  margin-top: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}

.record__title {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--fg);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.015em;
}

/* One quiet line under the "Track record" title */
.record__note {
  padding-block: .875rem;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg-3);
}

/* Wide screens: the track record on the left, the certifications beside it.
   The certifications column is just wide enough for the longest name on one
   line; the track record takes the rest. */
@media (min-width: 80em) {
  .record {
    grid-template-columns: minmax(0, 1fr) 25.5rem;
    align-items: start;
  }
}

/* Track record: four blocks of work. Each has a small label (its number and
   the years), a title, one paragraph and a list. */
.track__item {
  --accent: var(--fg-3);                    /* tick markers: quieter than the text */
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.track__label {
  display: flex;
  align-items: baseline;
  margin-bottom: .375rem;
  font: 700 var(--fs-xs)/1.4 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--fg-3);
}

.track__num {
  font-weight: 800;
}

/* The years follow the number, with a hairline between the two */
.track__years {
  margin-left: .625rem;
  padding-left: .625rem;
  border-left: 1px solid var(--border-strong);
  white-space: nowrap;
}

.track__title {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -.012em;
}

.track__summary {
  max-width: 36rem;
  margin-top: .375rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg-2);
}

.track__list {
  align-content: start;
  gap: .5625rem;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

/* Who the work was for: the hook of each line */
.track__list strong {
  color: var(--fg);
}

.track__more {
  margin-top: .875rem;
}

/* Small screens: the row that opens the list closes the block */
@media (max-width: 47.99em) {
  .track__item {
    padding-bottom: 0;
  }
}

/* Tablet and up: two blocks to a row, in the order of the years. The first
   and third blocks carry the long lists of projects, so the left column is
   the wider one. There is no gap between the columns; the blocks are inset
   instead, so the hairline under a row runs unbroken. The right-hand blocks
   are shorter than their neighbours: a hairline down their left edge makes
   them a ruled side column, so the room under them reads as part of the cell. */
@media (min-width: 48em) {
  .track {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .track__item {
    padding-block: 1.75rem;
  }

  .track__item:nth-child(odd) {
    padding-right: 1.25rem;
  }

  .track__item:nth-child(even) {
    padding-left: 1.25rem;
    border-left: 1px solid var(--border);
  }
}

/* Small laptops and tablets on their side: the certifications still sit
   below, so the section is at its tallest here. A wider left column keeps
   the long lists shorter, and the section clearly below the catalogue. */
@media (min-width: 62em) and (max-width: 67.99em) {
  .track {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* Certifications */
.certs {
  margin-top: 1.375rem;
  padding: .25rem clamp(1.125rem, .9rem + 1vw, 1.75rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.certs__group + .certs__group {
  border-top: 1px solid var(--border-strong);
}

/* Every group is a native disclosure: its heading is the row that opens it */
.certs__group > summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-block: 1rem;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.certs__group > summary::-webkit-details-marker {
  display: none;
}

.certs__heading {
  flex: 1;
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.certs__group > summary:hover .certs__heading {
  color: var(--accent-text);
}

.certs__period {
  display: block;
  margin-top: .125rem;
  font: 600 .75rem/1.4 var(--font-display);
  letter-spacing: .03em;
  color: var(--fg-3);
}

.certs__chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--fg-2);
  transition: transform .2s ease;
}

.certs__group[open] .certs__chevron {
  transform: rotate(180deg);
}

.certs__list {
  padding-bottom: .5rem;
}

.certs__list li {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: .75rem;
  padding-block: .5625rem;
  border-top: 1px solid var(--border);
}

.certs__list .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .1875rem;
  color: var(--blue-text);
  stroke-width: 2.5;
}

.certs__issuer {
  display: block;
  font: 600 .75rem/1.4 var(--font-display);
  letter-spacing: .03em;
  color: var(--fg-3);
}

.certs__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
}

/* Between tablet width and the side-by-side layout the card is as wide as
   the page, so each list runs in two columns */
@media (min-width: 48em) and (max-width: 79.99em) {
  .certs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}

/* Side by side with the track record: a slimmer card */
@media (min-width: 80em) {
  .certs {
    padding-inline: 1.25rem;
  }
}

/* --- Contact ------------------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: 2.5rem;
}

.contact__intro h2 {
  font-size: clamp(2rem, 1.45rem + 2.5vw, 3.25rem);
}

.contact__intro .lead {
  margin-top: 1.375rem;
}

.contact__channels {
  container-type: inline-size;
}

/* A channel: icon, label, the address itself as one large link, and a copy button */
.channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon  label copy"
    "value value value";
  gap: .5rem .875rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--panel-raised);
  transition: border-color .16s ease, background-color .16s ease;
}

.channel:hover,
.channel:focus-within {
  border-color: var(--fg-3);
  background: var(--panel-well);
}

.channel + .channel {
  margin-top: .875rem;
}

.channel__icon {
  grid-area: icon;
  width: 2.75rem;
  height: 2.75rem;
}

.channel__label {
  grid-area: label;
  font: 800 .75rem/1.4 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.channel__value {
  grid-area: value;
  display: inline-flex;                     /* the link is a full 44px-high tap target */
  align-items: center;
  justify-self: start;
  min-height: 2.75rem;
  font: 700 clamp(.8125rem, 4.3vw, 1.75rem)/1.2 var(--font-display);
  font-size: clamp(.8125rem, 4.75cqi, 1.75rem);  /* sized so the e-mail address stays on one line */
  letter-spacing: -.012em;
  color: var(--fg-hi);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.channel__value:hover {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
}

.copy {
  grid-area: copy;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .5rem .875rem;
  border: 1px solid var(--ghost-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--fg);
  font: 700 var(--fs-xs)/1 var(--font-display);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.copy[hidden] {
  display: none;
}

.copy:hover {
  border-color: var(--fg-hi);
  background: var(--wash);
}

.copy .icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 2;
}

.copy__icon--done,
.copy.is-copied .copy__icon {
  display: none;
}

.copy.is-copied {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

.copy.is-copied .copy__icon--done {
  display: block;
}

.copy__text {
  min-width: 3.875em;                       /* "Copied" fits without the button changing width */
  text-align: left;
}

/* "Add to contacts": downloads the vCard */
.contact__save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: 1.25rem;
}

.contact__save .btn {
  flex: 1 1 100%;                           /* full width on small screens, like the channels above */
}

@media (min-width: 30em) {
  .contact__save .btn {
    flex: none;
  }
}

.contact__save .btn .icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 1.75;
}

.contact__save-hint {
  flex: 1 1 14rem;
  max-width: 22rem;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--fg-3);
}

.contact__meta {
  display: grid;
  gap: 1rem 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg);
}

.contact__meta li {
  display: flex;
  gap: .75rem;
}

.contact__meta .icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .125rem;
  color: var(--accent-text);
}

.contact__meta-label {
  display: block;
  font: 800 .6875rem/1.5 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* The LinkedIn entry is one link, label and address together, so its focus
   ring encloses both. Only the address is underlined. */
.contact__meta a {
  display: block;
  padding-block: .375rem;
  margin-block: -.375rem;
  text-decoration: none;
}

.contact__meta-url {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.contact__meta a:hover .contact__meta-url {
  text-decoration-thickness: 2px;
}

/* One row that wraps: where the three entries do not fit side by side, the
   last one moves to a second line instead of squeezing the others. */
@media (min-width: 36em) {
  .contact__meta {
    display: flex;
    flex-wrap: wrap;
  }

  .contact__meta-label {
    white-space: nowrap;
  }
}

/* Roomier channel once its column is wide enough: the icon stands beside
   the label and the address. */
@container (min-width: 30em) {
  .channel {
    grid-template-areas:
      "icon label copy"
      "icon value value";
    /* The first row keeps the copy button's height even while the button is
       hidden (before main.js runs, or without JavaScript), so nothing moves. */
    grid-template-rows: minmax(2.75rem, auto) auto;
    gap: .5rem 1.25rem;
    padding: 1.125rem 1.25rem 1.375rem 1.5rem;
  }

  .channel__icon {
    align-self: start;
    width: 3.25rem;
    height: 3.25rem;
    margin-top: .375rem;
  }

  .channel__label {
    align-self: end;                        /* sits just above the address */
  }

  .channel__value {
    font-size: clamp(1.125rem, 4cqi, 1.75rem);
  }
}

@media (min-width: 68em) {
  .contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: start;
  }
}


/* 8. Footer
   ========================================================================== */

.site-footer {
  padding-block: clamp(3rem, 2.2rem + 3vw, 4.5rem) 2rem;
  border-top: 1px solid var(--border);
  background: var(--footer);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.site-footer__top {
  display: grid;
  gap: 2.5rem;
}

.site-footer__logo {
  width: auto;
  height: 3.4375rem;
}

/* Only for forced colours on a light background; see section 12 */
.site-footer__logo--on-light {
  display: none;
}

/* The line under the logo starts one "A" of the logo below it: the logo's
   clear space (the letters "AMG" are two thirds of its height) */
.site-footer__brand p {
  max-width: 26rem;
  margin-top: 2.25rem;
}

.site-footer__heading {
  margin-bottom: .75rem;
  font: 800 .75rem/1.4 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.site-footer__nav a,
.site-footer__contact a {
  display: inline-block;
  padding-block: .6875rem;
  margin-block: -.3125rem;
  color: var(--fg);
  text-decoration: none;
}

.site-footer__nav li,
.site-footer__contact li {
  padding-block: .3125rem;
}

/* Small screens: the page links sit in two columns */
@media (max-width: 47.99em) {
  .site-footer__nav ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
}

.site-footer__nav a:hover,
.site-footer__contact a:hover {
  color: var(--fg-hi);
  text-decoration: underline;
}

.site-footer__legal {
  display: grid;
  gap: .5rem 2rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--fg-3);
}

/* Registered details of the company. Each part stays in one piece, so the
   line breaks only after a separator dot — never inside the address or a number. */
.site-footer__entity {
  color: var(--fg-2);
}

.site-footer__entity span {
  display: inline-block;
  max-width: 100%;
}

@media (min-width: 48em) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr) auto auto;   /* link columns take the width of their longest entry */
    gap: 3rem clamp(2.5rem, 7vw, 6rem);
  }

  .site-footer__legal {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  /* The cookie statement closes the copyright row on the right */
  .site-footer__notice {
    justify-self: end;
  }

  .site-footer__entity,
  .site-footer__trademarks,
  .site-footer__reviewed {
    grid-column: 1 / -1;
  }
}


/* 9. Error page (404.html)
   ==========================================================================
   Same header, type and bars as the home page. The page fills the window so
   the footer line sits at the bottom. */

.page-error {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--chrome);
}

.page-error .site-header {
  position: static;
}

.notfound {
  --bar-h: clamp(5.25rem, 20vw, 10rem);
  --bar-gap: clamp(2rem, 1.25rem + 3vw, 3.5rem);
  --bar-show: calc(var(--bar-h) + var(--bar-gap));
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  overflow: hidden;
  background: var(--chrome);
}

/* The whole mark stands at the foot of the page, as in the home page hero on small screens */
.notfound::after {
  content: "";
  position: absolute;
  right: max(var(--gutter), calc((100% - var(--container)) / 2));
  bottom: var(--bar-gap);
  height: var(--bar-h);
  aspect-ratio: var(--mark-aspect);
  background: url("../img/mark.svg?v=20261006") center / contain no-repeat;
  pointer-events: none;
}

.notfound__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 2rem + 5vw, 5.5rem) calc(var(--bar-show) + clamp(2.5rem, 1.5rem + 4vw, 4.5rem));
}

.notfound__title {
  margin-bottom: 1.25rem;
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.032em;
  color: var(--fg-hi);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

.notfound__contact {
  margin-top: 2rem;
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

.notfound__contact a {
  display: inline-block;
  padding-block: .625rem;
  margin-block: -.625rem;
  font-weight: 600;
}

.site-footer--slim {
  padding-block: 1.5rem;
}

.site-footer--slim .site-footer__legal {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}


/* 10. Motion — only for people who have not asked for less of it
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* The bars slide in along their own slant when the page loads */
  .hero__bar {
    animation: bar-in .9s cubic-bezier(.2, .7, .2, 1) both;
  }

  .hero__bar--2 { animation-delay: .09s; }
  .hero__bar--3 { animation-delay: .18s; }

  .hero__ghost,
  .hero__guides {
    animation: fade-in 1.2s ease .35s both;
  }

  /* In the drawing's own units: down by a little over a quarter of a bar's
     height (2769), and left by .439 of that — the slant */
  @keyframes bar-in {
    from {
      opacity: 0;
      transform: translate(-333.6px, 760px);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}


/* 11. No-JavaScript fallbacks
   ==========================================================================
   The menu button needs script. Where scripting is off, small screens get the
   navigation as plain wrapped links instead and the header stops being sticky. */

@media (scripting: none) and (max-width: 61.99em) {
  .site-header {
    position: static;
  }

  .masthead__inner {
    flex-wrap: wrap;
    height: auto;
    padding-block: .875rem;
  }

  .nav-toggle,
  .primary-nav__contact {
    display: none;
  }

  .primary-nav {
    position: static;
    flex-basis: 100%;
    height: auto;
    padding: 0;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .primary-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
  }

  .primary-nav__list a {
    min-height: 2.75rem;
    border: 0;
    font-size: var(--fs-sm);
  }

  .primary-nav__list a::after {
    display: none;
  }
}


/* 12. Forced colours (Windows contrast themes)
   ==========================================================================
   In this mode the browser replaces backgrounds and shadows with the
   visitor's own colours. Shapes that are drawn with a background get a
   system colour, and panels that rely on their fill get an outline. */

@media (forced-colors: active) {
  .eyebrow::before,
  .ticks li::before,
  .service::before,
  .practice::before,
  .hero-index__label::before,
  .hero-index__foundation::before,
  .proof__item dt::before,
  .why__item h3::before,
  .steps__item::before,
  .eng,
  .why__list {
    background: CanvasText;
  }

  @media (min-width: 62em) {
    .primary-nav__list a::after {
      background: LinkText;
    }
  }

  .founder,
  .steps__num,
  .count {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }

  /* Line icons take the text colour of whatever they sit in */
  .icon {
    color: inherit !important;
  }
}

/* A light contrast theme turns the footer light as well: black-lettered logo */
@media (forced-colors: active) and (prefers-color-scheme: light) {
  .site-footer__logo--on-dark {
    display: none;
  }

  .site-footer__logo--on-light {
    display: block;
  }
}


/* 13. Print
   ========================================================================== */

/* Paper is always light, whatever the system theme: the dark theme's block
   applies to screens only, and the header shows the black-lettered logo. */
@media print {
  :root {
    color-scheme: light;
    --logo-on-light: block;
    --logo-on-dark: none;
    --fg: #000;
    --fg-2: #222;
    --fg-3: #444;
    --border: #999;
    --section-y: 1.5rem;
  }

  *,
  *::before,
  *::after {
    background: transparent !important;
    box-shadow: none !important;
    color: #000 !important;
  }

  html {
    font-size: 11pt;
  }

  .site-header {
    position: static;
  }

  .utility,
  .primary-nav,
  .nav-toggle,
  .masthead__cta,
  .skip-link,
  .hero__art,
  .hero__actions,
  .hero-index,
  .contact__save,
  .copy,
  .site-footer__nav,
  .site-footer__logo,
  .service__num,
  .more > summary,
  .certs__chevron {
    display: none !important;
  }

  /* Folded lists reach the paper too. main.js opens every <details> before
     printing; this covers browsers that print without telling the script. */
  details:not([open])::details-content {
    display: block;
    content-visibility: visible;
  }

  .hero__inner {
    padding-block: 1.5rem;
  }

  .service,
  .practice,
  .term,
  .statement,
  .eng__item,
  .why__item,
  .founder,
  .channel,
  .certs,
  .track__item,
  .steps__item {
    border-color: #999 !important;
    break-inside: avoid;
  }

  /* The colour rule along the top does not print, so the top border returns */
  .service,
  .practice {
    padding-bottom: 1rem;
    border-top-width: 1px;
  }

  .eng,
  .why__list {
    gap: 0;
    border-color: #999 !important;
  }

  .eng__item,
  .why__item {
    border: 1px solid #999;
  }

  .steps__num {
    border: 1px solid #000;
  }

  h2,
  h3,
  h4 {
    break-after: avoid;
  }

  a {
    text-decoration: none;
  }

  /* Spell out where external links go */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-weight: 400;
    font-size: 9pt;
  }
}