/* ==========================================================================
   HALDEN — Premium studio website template (Flagship, 15 pages)
   css/style.css
   --------------------------------------------------------------------------
   Contents
     1.  Theme settings  ← start here: colours, fonts, spacing, motion
     2.  Light theme
     3.  Font files
     4.  Reset and base
     5.  Layout helpers
     6.  Shared components (buttons, links, icons, frames, glass, notes)
     7.  Header and navigation
     8.  Hero
     9.  Trust and social proof
     10. Section headings
     11. Services
     12. Work / showcase
     13. Studio / about
     14. Testimonials
     15. Pricing
     16. FAQ
     17. Contact and form
     18. Footer
     19. Simple pages (legal, 404)
     20. Motion: entrance and scroll reveal
     21. Print
     22. Inner pages: page heading, breadcrumbs, shared helpers
     23. Cards, sectors and calls to action
     24. Services page
     25. Work page: filters, project grid, tables
     26. Case studies
     27. Studio and careers: team, timeline, roles, benefits
     28. Process page: timeline chart and phases
     29. Pricing page: comparison and estimator
     30. Journal and article
     31. FAQ page
     32. Contact page
   --------------------------------------------------------------------------
   Naming: components use BEM-style classes (.block, .block__part,
   .block--variant). Change design values through the custom properties in
   section 1 rather than editing individual rules.
   ========================================================================== */


/* ==========================================================================
   1. THEME SETTINGS
   Every colour, font and spacing value used by the site lives here.
   ========================================================================== */
:root {
  /* ---- Brand colour --------------------------------------------------
     Change --color-accent to re-brand the whole site. Pick a colour that
     dark text (--color-on-accent) is readable on.
     Tried-and-tested alternatives: #7CC7FF (sky), #FF8A4C (ember),
     #F2D14C (signal yellow), #C9B8FF (lilac). */
  --color-accent: #B8FF5C;
  --color-on-accent: #0B0D10;        /* text on accent-coloured buttons */

  /* ---- Dark theme (default) ------------------------------------------ */
  --color-bg: #0B0D10;               /* page background */
  --color-surface: #12151A;          /* alternate section background */
  --color-surface-raised: #1A1E25;   /* raised elements, inputs */
  --color-text: #F5F5F2;             /* main text */
  --color-text-muted: #A4A9B2;       /* secondary text */
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.28);
  --color-accent-text: var(--color-accent); /* accent used as text on --color-bg */
  --color-focus: var(--color-accent);       /* keyboard focus ring */
  --color-invert-bg: #F5F5F2;        /* highlighted pricing plan */
  --color-invert-text: #0B0D10;
  --color-invert-muted: #4A505A;
  --color-error: #FF8A7A;
  --color-glass: rgba(18, 21, 26, 0.62);
  --color-header-bg: rgba(11, 13, 16, 0.78);

  /* ---- Typography ------------------------------------------------------
     Display: headlines, numbers, wordmark. Body: everything else.
     To use other fonts, replace the files in assets/fonts and update the
     @font-face rules in section 3 (see docs/CUSTOMIZATION.md). */
  --font-display: "Bricolage Grotesque", "Bricolage Fallback", Arial, sans-serif;
  --font-body: "Instrument Sans", "Instrument Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --weight-display: 700;
  --tracking-display: -0.032em;

  /* Fluid type scale: each step grows smoothly from 320px to 1440px screens */
  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);
  --step-2: clamp(1.3125rem, 1.18rem + 0.65vw, 1.75rem);
  --step-3: clamp(1.5rem, 1.27rem + 1.13vw, 2.25rem);
  --step-4: clamp(2rem, 1.55rem + 2.25vw, 3.5rem);
  --step-5: clamp(2.25rem, 1.5rem + 3.75vw, 4.75rem);
  --step-hero: clamp(2.375rem, 1.3rem + 5.2vw, 6.25rem); /* fallback for old browsers */
  --hero-scale: 1;    /* hero headline size: lower it (e.g. 0.85) for longer headlines */

  /* ---- Spacing ---------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 1.6rem + 2vw, 3rem);
  --space-xl: clamp(3rem, 2.2rem + 4vw, 5rem);
  --section-space: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* ---- Layout ----------------------------------------------------------- */
  --container: 86rem;                /* maximum content width */
  --container-narrow: 44rem;         /* text-only pages */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);   /* page side margin */
  --grid-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem); /* gap between columns */
  --header-h: 4.25rem;

  /* ---- Shape -------------------------------------------------------------
     Deliberately square: structural blocks have no rounding, controls
     are barely rounded, floating tool panels are softer. */
  --radius-0: 0;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* ---- Depth ------------------------------------------------------------ */
  --shadow-float: 0 28px 60px -24px rgba(0, 0, 0, 0.7);
  --glass-blur: 14px;

  /* ---- Motion ------------------------------------------------------------ */
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 720ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: dark;
}


/* ==========================================================================
   2. LIGHT THEME
   Used when <html data-theme="light">. Only colours change.
   ========================================================================== */
[data-theme="light"] {
  --color-bg: #EFF1EE;
  --color-surface: #FFFFFF;
  --color-surface-raised: #E4E7E2;
  --color-text: #0B0D10;
  --color-text-muted: #4A505A;
  --color-border: rgba(11, 13, 16, 0.14);
  --color-border-strong: rgba(11, 13, 16, 0.32);
  --color-accent-text: #3A6B00;      /* darker accent so text stays readable */
  --color-focus: #2F5A00;
  --color-invert-bg: #0B0D10;
  --color-invert-text: #F5F5F2;
  --color-invert-muted: #A4A9B2;
  --color-error: #B3261E;
  --color-glass: rgba(255, 255, 255, 0.86);
  --color-header-bg: rgba(239, 241, 238, 0.82);
  --shadow-float: 0 28px 60px -28px rgba(11, 13, 16, 0.38);

  color-scheme: light;
}


/* ==========================================================================
   3. FONT FILES
   Bricolage Grotesque and Instrument Sans, SIL Open Font License 1.1
   (licence texts in assets/fonts). Subset to Latin characters.
   The "Fallback" faces resize a system font to match each web font, so the
   page does not jump when the web fonts finish loading.
   ========================================================================== */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-grotesque-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-grotesque-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  font-weight: 700;
  size-adjust: 102.3%;
  ascent-override: 90.9%;
  descent-override: 26.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  font-weight: 400;
  size-adjust: 106.5%;
  ascent-override: 87.3%;
  descent-override: 25.4%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  font-weight: 400;
  size-adjust: 103.1%;
  ascent-override: 94.1%;
  descent-override: 24.2%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Instrument Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
  font-weight: 700;
  size-adjust: 99.4%;
  ascent-override: 97.6%;
  descent-override: 25.2%;
  line-gap-override: 0%;
}


/* ==========================================================================
   4. RESET AND BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

h1, h2, h3, h4 {
  line-height: 1.15;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

ul[role="list"],
ol[role="list"] {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

button {
  cursor: pointer;
}

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

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

[hidden] {
  display: none !important; /* keeps [hidden] reliable even on flex/grid items */
}

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

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

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


/* ==========================================================================
   5. LAYOUT HELPERS
   ========================================================================== */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

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

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

.section--divided {
  border-top: 1px solid var(--color-border);
}


/* ==========================================================================
   6. SHARED COMPONENTS
   ========================================================================== */

/* ---- Icons --------------------------------------------------------------- */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Buttons ---------------------------------------------------------------
   .btn + one of: .btn--primary, .btn--secondary. Add .btn--lg for larger. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.btn--lg {
  min-height: 3.25rem;
  padding-inline: 1.6rem;
  font-size: 1rem;
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.btn--primary:hover {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.btn--secondary {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--secondary:hover {
  border-color: var(--color-text);
  background-color: var(--color-surface-raised);
}

/* ---- Text links ------------------------------------------------------------ */
.text-link {
  color: var(--color-text);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--color-border-strong);
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

.text-link:hover {
  color: var(--color-accent-text);
  text-decoration-color: currentColor;
}

/* ---- Frames with crop marks --------------------------------------------------
   A printer's crop mark at each corner: the template's signature detail.
   .frame--marks shows them always; .frame--hover shows them on hover. */
.frame {
  --mark-len: 0.875rem;
  --mark-gap: 0.5rem;
  --mark-offset: calc(var(--mark-len) + var(--mark-gap));
  --mark-color: var(--color-border-strong);
  position: relative;
}

.frame--marks::before,
.frame--hover::before {
  content: "";
  position: absolute;
  inset: calc(var(--mark-offset) * -1);
  pointer-events: none;
  background:
    linear-gradient(var(--mark-color), var(--mark-color)) 0 var(--mark-offset) / var(--mark-len) 1px,
    linear-gradient(var(--mark-color), var(--mark-color)) var(--mark-offset) 0 / 1px var(--mark-len),
    linear-gradient(var(--mark-color), var(--mark-color)) 100% var(--mark-offset) / var(--mark-len) 1px,
    linear-gradient(var(--mark-color), var(--mark-color)) calc(100% - var(--mark-offset)) 0 / 1px var(--mark-len),
    linear-gradient(var(--mark-color), var(--mark-color)) 0 calc(100% - var(--mark-offset)) / var(--mark-len) 1px,
    linear-gradient(var(--mark-color), var(--mark-color)) var(--mark-offset) 100% / 1px var(--mark-len),
    linear-gradient(var(--mark-color), var(--mark-color)) 100% calc(100% - var(--mark-offset)) / var(--mark-len) 1px,
    linear-gradient(var(--mark-color), var(--mark-color)) calc(100% - var(--mark-offset)) 100% / 1px var(--mark-len);
  background-repeat: no-repeat;
}

.frame--hover {
  --mark-len: 0.5rem;
  --mark-gap: 0.25rem;
}

.frame--hover::before {
  opacity: 0;
  transition: opacity var(--duration-base) ease, transform var(--duration-base) var(--ease-out);
}

/* ---- Image crop with fixed aspect ratio -------------------------------------
   Images are cropped to the frame, so any photo fits the layout. */
.media-crop {
  overflow: hidden;
  background-color: var(--color-surface-raised);
}

.media-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-16x10 { aspect-ratio: 16 / 10; }
.ratio-1x1 { aspect-ratio: 1 / 1; }

/* ---- Glass panel (used sparingly: header on scroll, hero inspector) ---- */
.glass {
  background-color: var(--color-glass);
  border: 1px solid var(--color-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background-color: var(--color-surface-raised);
  }
}

/* ---- Tags ------------------------------------------------------------------ */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.tags li {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--step--1);
  line-height: 1.5;
}

/* ---- Demo notes --------------------------------------------------------------
   Visible notices on sample content. Delete them when you add real content. */
.demo-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 46ch;
  padding: 0.45rem 0.7rem;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.demo-note .icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1rem;
}


/* ==========================================================================
   7. HEADER AND NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color var(--duration-base) ease, border-color var(--duration-base) ease;
}

/* Added by JavaScript once the page scrolls */
.site-header[data-scrolled] {
  background-color: var(--color-header-bg);
  border-bottom-color: var(--color-border);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  backdrop-filter: blur(12px) saturate(130%);
}

/* On touch devices a solid header scrolls more smoothly than a blurred one */
@media (hover: none) {
  .site-header[data-scrolled] {
    background-color: var(--color-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
}

.brand__mark {
  width: 1.75rem;
  height: 1.75rem;
}

.brand__mark-accent {
  fill: var(--color-accent);
}

.site-nav {
  margin-left: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.site-header__cta {
  display: none;
}

.theme-toggle,
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 700;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.theme-toggle {
  padding: 0;
}

.theme-toggle:hover,
.nav-toggle:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-raised);
}

.theme-toggle__moon,
[data-theme="light"] .theme-toggle__sun {
  display: none;
}

[data-theme="light"] .theme-toggle__moon {
  display: block;
}

/* Two bars that turn into a cross */
.nav-toggle__bars {
  position: relative;
  width: 1.125rem;
  height: 0.75rem;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: transform var(--duration-base) var(--ease-out), top var(--duration-base) var(--ease-out);
}

.nav-toggle__bars::before { top: 1px; }
.nav-toggle__bars::after { top: calc(100% - 3px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

.site-menu__list {
  display: grid;
}

.site-menu__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text);
  text-decoration: none;
}

/* ---- Small screens: the menu is a panel below the header ---------------- */
@media (max-width: 59.99rem) {
  .js .site-menu {
    position: fixed;
    top: var(--header-h);
    right: 0;
    left: 0;
    display: grid;
    gap: var(--space-l);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-m) var(--gutter) var(--space-l);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration-base) ease, visibility 0s linear var(--duration-base);
  }

  .js .site-menu.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--duration-base) ease, visibility 0s;
  }

  .site-menu__list li + li {
    border-top: 1px solid var(--color-border);
  }

  .site-menu__link {
    width: 100%;
    padding-block: 0.6rem;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .site-menu__link[aria-current="true"],
  .site-menu__link[aria-current="page"] {
    color: var(--color-accent-text);
  }

  .site-menu__cta {
    justify-self: start;
  }

  /* While the menu is open the header is solid and the page cannot scroll */
  .menu-open .site-header {
    background-color: var(--color-bg);
    border-bottom-color: var(--color-border);
  }

  .menu-open {
    overflow: hidden;
  }

  /* Without JavaScript the links are simply shown under the logo */
  html:not(.js) .site-header {
    position: relative;
    height: auto;
  }

  html:not(.js) .site-header__inner {
    flex-wrap: wrap;
    padding-block: var(--space-xs);
  }

  html:not(.js) .nav-toggle,
  html:not(.js) .theme-toggle {
    display: none;
  }

  html:not(.js) .site-nav {
    order: 3;
    width: 100%;
  }

  html:not(.js) .site-menu {
    display: grid;
    gap: var(--space-s);
  }
}

/* ---- Large screens: links sit inline in the header ------------------------- */
@media (min-width: 60rem) {
  .nav-toggle,
  .site-menu__cta {
    display: none;
  }

  .site-nav {
    margin-inline: auto;
  }

  .site-menu__list {
    display: flex;
    gap: clamp(1.25rem, 0.4rem + 1.4vw, 2.25rem);
  }

  .site-menu__link {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    font-weight: 700;
    transition: color var(--duration-fast) ease;
  }

  .site-menu__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.55rem;
    height: 2px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-base) var(--ease-out);
  }

  .site-menu__link:hover,
  .site-menu__link[aria-current="true"],
  .site-menu__link[aria-current="page"] {
    color: var(--color-text);
  }

  .site-menu__link:hover::after,
  .site-menu__link[aria-current="true"]::after,
  .site-menu__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .site-header__cta {
    display: inline-flex;
  }
}


/* ==========================================================================
   8. HERO
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.25rem, 1rem + 5vw, 5.5rem));
  padding-bottom: clamp(4rem, 2.5rem + 5vw, 7.5rem);
  overflow-x: clip;
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  container-type: inline-size;
}

/* The headline is sized to the width available, so each line fits exactly.
   Adjust with --hero-scale in section 1. */
.hero__title {
  font-family: var(--font-display);
  font-size: var(--step-hero);
  font-size: clamp(1.875rem, 10.3cqi * var(--hero-scale), 7rem);
  font-weight: var(--weight-display);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
}

.hero__line {
  display: block;
}

.hero__aside {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.hero__lead {
  max-width: 34rem;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

@media (max-width: 39.99rem) {
  .hero__actions .btn {
    flex: 1 1 auto;
    padding-inline: 1rem;
  }
}

.hero__note {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

/* ---- Hero visual: framed preview + floating inspector -------------------- */
.hero__visual {
  position: relative;
  padding: 1.75rem 1.75rem 0; /* room for the crop marks */
}

.hero__frame {
  container-type: inline-size;
  border: 1px solid var(--color-border);
}

/* Variant: a photo or illustration instead of the interactive preview
   (see docs/CUSTOMIZATION.md, "Hero image") */
.hero__media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}

/* The preview's colours come from the selected "direction" */
.preview {
  --p-bg: #0F1214;
  --p-surface: #1A1F23;
  --p-text: #F2F2EE;
  --p-accent: #B8FF5C;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background-color: var(--p-bg);
  color: var(--p-text);
  transition: background-color 420ms ease, color 420ms ease;
}

.preview[data-direction="harbour"] {
  --p-bg: #0E1B2C;
  --p-surface: #17293F;
  --p-text: #EAF2FA;
  --p-accent: #7CC7FF;
}

.preview[data-direction="ember"] {
  --p-bg: #1C1310;
  --p-surface: #2A1C16;
  --p-text: #F7EEE8;
  --p-accent: #FF8A4C;
}

.preview__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: calc(3cqi * var(--ps, 1)) calc(4cqi * var(--ps, 1));
  height: 100%;
  padding: calc(4cqi * var(--ps, 1)) calc(4.5cqi * var(--ps, 1));
}

.preview__top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(3cqi * var(--ps, 1));
}

.preview__logo {
  font-family: var(--font-display);
  font-size: 1rem;
  font-size: calc(3.4cqi * var(--ps, 1));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.preview__links {
  display: flex;
  gap: calc(2.2cqi * var(--ps, 1));
  margin-left: auto;
}

.preview__links i {
  width: calc(6cqi * var(--ps, 1));
  height: calc(0.8cqi * var(--ps, 1));
  background-color: currentColor;
  opacity: 0.4;
}

.preview__btn {
  padding: calc(0.9cqi * var(--ps, 1)) calc(2cqi * var(--ps, 1));
  border: 1px solid currentColor;
  font-size: 0.625rem;
  font-size: calc(1.9cqi * var(--ps, 1));
  font-weight: 700;
  line-height: 1;
}

.preview__hero {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: calc(1.8cqi * var(--ps, 1));
}

.preview__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-size: calc(6.6cqi * var(--ps, 1));
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.preview__text {
  width: 85%;
  height: calc(1cqi * var(--ps, 1));
  background-color: currentColor;
  opacity: 0.35;
}

.preview__text--short {
  width: 55%;
}

.preview__cta {
  margin-top: calc(1.4cqi * var(--ps, 1));
  padding: calc(1.5cqi * var(--ps, 1)) calc(2.6cqi * var(--ps, 1));
  background-color: var(--p-accent);
  color: var(--p-bg);
  font-size: 0.6875rem;
  font-size: calc(2cqi * var(--ps, 1));
  font-weight: 700;
  line-height: 1;
  transition: background-color 420ms ease, color 420ms ease;
}

.preview__art {
  align-self: end;
}

.preview__art svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.preview__shell {
  fill: var(--p-accent);
  transition: fill 420ms ease;
}

.preview__ribs {
  fill: none;
  stroke: var(--p-bg);
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke 420ms ease;
}

.preview__tiles {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(2cqi * var(--ps, 1));
}

.preview__tiles span {
  height: calc(9cqi * var(--ps, 1));
  background-color: var(--p-surface);
  border-top: calc(0.5cqi * var(--ps, 1)) solid var(--p-accent);
  transition: background-color 420ms ease, border-color 420ms ease;
}

/* ---- Inspector: the glass "design tool" panel ------------------------------ */
.inspector {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-s);
  width: fit-content;
  max-width: 100%;
  margin: -1.75rem 0 0 0.75rem;
  padding: 0.875rem 1rem 1rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
}

.inspector__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.inspector__legend {
  margin-bottom: 0.6rem;
  padding: 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.inspector__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.375rem 0.7rem 0.375rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.swatch:hover {
  border-color: var(--color-border-strong);
}

/* The real radio button covers the whole label: clickable and focusable */
.swatch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.swatch__chip {
  width: 1rem;
  height: 1rem;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.swatch__chip--signal { background-color: #B8FF5C; }
.swatch__chip--harbour { background-color: #7CC7FF; }
.swatch__chip--ember { background-color: #FF8A4C; }

.swatch:has(.swatch__input:checked) {
  border-color: var(--color-text);
  background-color: var(--color-surface-raised);
}

.swatch__input:checked + .swatch__chip {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.swatch:has(.swatch__input:focus-visible) {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.inspector__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.inspector__specs div {
  display: flex;
  gap: 0.4rem;
}

.inspector__specs dt {
  color: var(--color-text-muted);
}

@media (min-width: 60rem) {
  .hero__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem);
  }

  .hero__title {
    grid-column: 1 / -1;
  }

  .hero__aside {
    grid-column: 1 / span 5;
    padding-top: var(--space-s);
  }

  .hero__visual {
    grid-column: 6 / -1;
    padding: 1.75rem 1.75rem 2.75rem;
  }

  .inspector {
    position: absolute;
    left: -1.25rem;
    bottom: 0;
    margin: 0;
  }

  /* Variant: centred headline with the visual underneath */
  .hero--centered .hero__title,
  .hero--centered .hero__aside,
  .hero--centered .hero__visual {
    grid-column: 2 / span 10;
  }

  .hero--centered .hero__title {
    text-align: center;
  }

  .hero--centered .hero__aside {
    justify-items: center;
    text-align: center;
  }
}

/* Wide screens: copy sits beside the headline, the preview runs wide below */
@media (min-width: 75rem) {
  .hero__title {
    grid-column: 1 / span 8;
    font-size: min(6.85cqi * var(--hero-scale), 7rem);
  }

  .hero__aside {
    grid-column: 9 / -1;
    grid-row: 1;
    align-self: end;
    padding-top: 0;
    padding-bottom: 0.4rem;
  }

  .hero__visual {
    grid-column: 3 / -1;
    grid-row: 2;
    padding: 1.75rem 1.75rem 0;
  }

  .preview {
    --ps: 0.8;
    aspect-ratio: 16 / 8.6;
  }

  .inspector {
    left: -4.5rem;
    bottom: -2rem;
  }

  .hero--centered .hero__title,
  .hero--centered .hero__aside {
    grid-column: 2 / span 10;
    grid-row: auto;
  }

  .hero--centered .hero__visual {
    grid-column: 2 / span 10;
    grid-row: auto;
  }
}

/* Phones: smaller crop marks, and the inspector spans the preview */
@media (max-width: 39.99rem) {
  .hero__visual {
    padding: 1rem 1rem 0;
  }

  .hero__frame {
    --mark-len: 0.5rem;
    --mark-gap: 0.375rem;
  }

  .inspector {
    width: auto;
    margin-inline: 0.5rem;
    padding: 0.75rem 0.8rem 0.85rem;
  }

  .swatch {
    gap: 0.4rem;
    padding-inline: 0.45rem 0.55rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 23.99rem) {
  .inspector__specs {
    display: none;
  }
}


/* ==========================================================================
   9. TRUST AND SOCIAL PROOF
   ========================================================================== */
.trust {
  padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);
  border-block: 1px solid var(--color-border);
}

.trust__inner {
  display: grid;
  gap: var(--space-l);
}

.trust__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-l);
}

.trust__title {
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 400;
}

.logo-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--space-m);
  align-items: center;
}

.logo-strip img {
  width: auto;
  max-width: 100%;
  height: 2.125rem;
  object-fit: contain;
  object-position: left center;
  opacity: 0.72;
  transition: opacity var(--duration-base) ease;
}

.logo-strip img:hover {
  opacity: 1;
}

/* Sample logos are light; flip them for the light theme. Remove this rule
   if you use full-colour logos. */
[data-theme="light"] .logo-strip img {
  filter: invert(1);
}

.stats {
  display: grid;
  gap: var(--space-m);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-border);
}

.stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.stat__value {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.stat__label {
  max-width: 22ch;
  color: var(--color-text-muted);
  font-size: var(--step--1);
  line-height: 1.4;
}

@media (min-width: 40rem) {
  .logo-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  .stat {
    flex-direction: column;
    gap: var(--space-2xs);
  }
}

@media (min-width: 60rem) {
  .logo-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .stat {
    flex-direction: row;
  }
}


/* ==========================================================================
   10. SECTION HEADINGS
   ========================================================================== */
.section-head {
  display: grid;
  gap: var(--space-m);
  margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}

.section-head__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--weight-display);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
}

.section-head__intro {
  max-width: 46ch;
  color: var(--color-text-muted);
}

.section-head__intro > * + * {
  margin-top: var(--space-s);
}

@media (min-width: 60rem) {
  .section-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
  }

  /* Child selectors keep these placements from leaking into other grids
     that reuse the heading classes (studio, FAQ). */
  .section-head > .section-head__title {
    grid-column: 1 / span 7;
  }

  .section-head > .section-head__intro {
    grid-column: 8 / -1;
  }
}

.section-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  margin-top: var(--space-xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--color-border);
}

.section-cta p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}


/* ==========================================================================
   11. SERVICES
   Default: editorial rows. Variant: .services--cards for a card grid.
   ========================================================================== */
.services {
  border-top: 1px solid var(--color-border);
}

.service {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-s) var(--space-s);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--color-border);
}

.service__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent-text);
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease, border-color var(--duration-base) ease;
}

.service__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.service__body {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-s);
}

.service__desc {
  max-width: 48ch;
  color: var(--color-text-muted);
}

.service__link {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  color: var(--color-text);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--color-border-strong);
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

.service__link .icon {
  transition: transform var(--duration-base) var(--ease-out);
}

.service__link:hover {
  color: var(--color-accent-text);
  text-decoration-color: currentColor;
}

/* An accent rule draws along the bottom of the row on hover */
.service::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-slow) var(--ease-out);
}

@media (hover: hover) {
  .service:hover::after {
    transform: scaleX(1);
  }

  .service:hover .service__icon {
    border-color: var(--color-accent);
    background-color: var(--color-accent);
    color: var(--color-on-accent);
  }

  .service:hover .service__link .icon {
    transform: translate(2px, -2px);
  }
}

@media (min-width: 60rem) {
  .service {
    grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 5fr) auto;
    align-items: start;
    column-gap: var(--grid-gap);
  }

  .service__title {
    padding-top: 0.15rem;
  }

  .service__body {
    grid-column: auto;
  }

  .service__link {
    grid-column: auto;
    justify-self: end;
    margin-top: -0.4rem;
  }
}

/* ---- Variant: cards ------------------------------------------------------- */
.services--cards {
  display: grid;
  gap: var(--grid-gap);
  border-top: 0;
}

.services--cards .service {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  padding: var(--space-l) var(--space-m);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.services--cards .service__body,
.services--cards .service__link {
  grid-column: auto;
  justify-self: start;
  margin-top: 0;
}

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

@media (min-width: 60rem) {
  .services--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .services--cards .service {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==========================================================================
   12. WORK / SHOWCASE
   Cards follow a repeating editorial pattern of four on large screens.
   Add or remove cards freely; the pattern continues.
   ========================================================================== */
.work-grid {
  display: grid;
  gap: var(--space-xl) var(--grid-gap);
}

.work-card {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.work-card__media {
  margin: 0;
}

.work-card__media img {
  transition: transform 900ms var(--ease-out);
}

.work-card__body {
  display: grid;
  gap: var(--space-2xs);
}

.work-card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.work-card__title a {
  text-decoration: none;
}

.work-card__desc {
  max-width: 46ch;
  color: var(--color-text-muted);
}

.work-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: var(--space-3xs);
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.work-card__meta li + li {
  padding-left: 1rem;
  border-left: 1px solid var(--color-border-strong);
}

@media (hover: hover) {
  .work-card:hover .frame--hover::before {
    opacity: 1;
  }

  .work-card:hover .work-card__media img {
    transform: scale(1.035);
  }
}

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

@media (min-width: 60rem) {
  .work-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: clamp(4rem, 2rem + 4vw, 7rem);
  }

  .work-grid > .work-card:nth-child(4n + 1) { grid-column: 1 / span 7; }
  .work-grid > .work-card:nth-child(4n + 2) { grid-column: 9 / span 4; margin-top: clamp(4rem, 2rem + 6vw, 9rem); }
  .work-grid > .work-card:nth-child(4n + 3) { grid-column: 1 / span 5; }
  .work-grid > .work-card:nth-child(4n + 4) { grid-column: 7 / span 6; align-self: end; }
}


/* ==========================================================================
   13. STUDIO / ABOUT
   ========================================================================== */
.studio {
  display: grid;
  gap: var(--space-xl);
}

.studio__intro {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.studio__intro > p:not(.studio__lead) {
  max-width: 54ch;
  color: var(--color-text-muted);
}

.studio__lead {
  max-width: 30ch;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--grid-gap);
  margin-top: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.facts__item {
  display: grid;
  gap: 0.15rem;
}

.facts dt {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.facts dd {
  font-weight: 700;
  line-height: 1.4;
}

.studio__media {
  display: grid;
  gap: var(--space-s);
  align-content: start;
  padding: 1.375rem;
}

.studio__media figcaption {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.process__title {
  margin-bottom: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.process__list {
  counter-reset: step;
  display: grid;
  gap: var(--space-l) var(--grid-gap);
}

.process__step {
  counter-increment: step;
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-border-strong);
}

/* Step number (decorative; the list order already conveys the sequence) */
.process__step::before {
  content: counter(step);
  content: counter(step) / "";
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
}

.process__name {
  font-size: var(--step-1);
  font-weight: 700;
}

.process__step p {
  color: var(--color-text-muted);
}

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

@media (min-width: 60rem) {
  .studio {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: clamp(4rem, 2rem + 4vw, 7rem);
  }

  .studio__intro {
    grid-column: 1 / span 6;
  }

  .studio__media {
    grid-column: 8 / span 5;
  }

  .process {
    grid-column: 1 / -1;
  }

  .process__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* ==========================================================================
   14. TESTIMONIALS
   ========================================================================== */
.quotes {
  display: grid;
  gap: var(--grid-gap);
}

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--color-border);
}

.quote__text {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  quotes: "\201C" "\201D";
}

.quote__text p::before {
  content: open-quote;
}

.quote__text p::after {
  content: close-quote;
}

.quote--feature {
  justify-content: space-between;
  border-color: transparent;
  background-color: var(--color-surface);
}

.quote--feature .quote__text {
  font-size: var(--step-3);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* Hang the opening quote mark outside the text block on wide screens */
@media (min-width: 40rem) {
  .quote--feature .quote__text p {
    text-indent: -0.45em;
  }
}

.quote__author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;
}

.quote__who {
  display: grid;
  line-height: 1.35;
}

.quote__name {
  font-weight: 700;
}

.quote__role {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface-raised);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  object-fit: cover;
}

.rating__stars {
  display: flex;
  gap: 0.15rem;
  color: var(--color-accent-text);
}

.rating__stars .icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  stroke: none;
}

@media (min-width: 60rem) {
  .quotes {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .quote {
    grid-column: 8 / span 5;
  }

  .quote--feature {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
  }
}


/* ==========================================================================
   15. PRICING
   ========================================================================== */
.plans {
  display: grid;
  gap: var(--space-s);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.plan__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plan__summary {
  color: var(--color-text-muted);
}

.plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  padding-block: var(--space-s);
  border-block: 1px solid var(--color-border);
}

.plan__amount {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.plan__from,
.plan__unit {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.plan__features {
  display: grid;
  gap: 0.6rem;
}

.plan__features li {
  display: flex;
  gap: 0.6rem;
  line-height: 1.45;
}

.plan__features .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  color: var(--color-accent-text);
}

.plan__cta {
  align-self: stretch;
  margin-top: auto;
}

.plan__badge {
  align-self: flex-start;
  padding: 0.3rem 0.6rem;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Highlighted plan: inverted colours */
.plan--featured {
  border-color: transparent;
  background-color: var(--color-invert-bg);
  color: var(--color-invert-text);
}

.plan--featured .plan__summary,
.plan--featured .plan__from,
.plan--featured .plan__unit {
  color: var(--color-invert-muted);
}

.plan--featured .plan__price {
  border-color: color-mix(in srgb, var(--color-invert-text) 18%, transparent);
}

.plan--featured .plan__features .icon {
  color: var(--color-invert-text);
}

.plan--featured .btn--primary {
  background-color: var(--color-invert-text);
  color: var(--color-invert-bg);
}

.plan--featured .btn--primary:hover {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.plan--featured :focus-visible {
  outline-color: var(--color-invert-text);
}

.plans__note {
  margin-top: var(--space-m);
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

@media (min-width: 60rem) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  .plan--featured {
    margin-block: calc(var(--space-m) * -1);
    padding-block: calc(clamp(1.5rem, 1rem + 1.5vw, 2.25rem) + var(--space-m));
  }
}


/* ==========================================================================
   16. FAQ (accordion)
   Answers are open by default; JavaScript closes them and adds the toggle,
   so nothing is hidden if scripts don't run.
   ========================================================================== */
.faq-layout {
  display: grid;
  gap: var(--space-l);
}

.faq-layout__head {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.faq {
  border-top: 1px solid var(--color-border);
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__heading {
  font-size: inherit;
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
  min-height: 2.75rem;
  padding: 1.35rem 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  transition: color var(--duration-fast) ease;
}

.faq__trigger:hover {
  color: var(--color-accent-text);
}

/* Plus that turns into a minus */
.faq__icon {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border-strong);
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 2px;
  margin: -1px 0 0 -0.375rem;
  background-color: currentColor;
  transition: transform var(--duration-base) var(--ease-out);
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__trigger[aria-expanded="true"] .faq__icon::after {
  transform: rotate(0deg);
}

.faq__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--duration-base) var(--ease-out), visibility 0s;
}

.faq__item.is-collapsed .faq__panel {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
}

.faq__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.faq__panel-inner p {
  max-width: 60ch;
  padding: 0 3rem 1.5rem 0;
  color: var(--color-text-muted);
}

@media (min-width: 60rem) {
  .faq-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .faq-layout__head {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }

  .faq {
    grid-column: 6 / -1;
  }
}


/* ==========================================================================
   17. CONTACT AND FORM
   ========================================================================== */
.contact {
  display: grid;
  gap: var(--space-xl);
}

.contact__intro {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.contact__title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--weight-display);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
}

.contact__lead {
  max-width: 42ch;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

.contact-list {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-s);
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
}

.contact-list .icon {
  color: var(--color-accent-text);
}

.contact-list__link {
  font-size: var(--step-1);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  text-decoration-color: var(--color-border-strong);
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

.contact-list__link:hover {
  color: var(--color-accent-text);
  text-decoration-color: currentColor;
}

.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
}

.social-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text-muted);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

.social-list a:hover {
  color: var(--color-text);
  text-decoration-color: currentColor;
}

/* ---- Form ------------------------------------------------------------------ */
.contact-form {
  position: relative;
  display: grid;
  gap: var(--space-m);
  padding: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.field-row {
  display: grid;
  gap: var(--space-m);
}

.field {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.field__label {
  font-size: 0.9375rem;
  font-weight: 700;
}

.field__optional {
  color: var(--color-text-muted);
  font-weight: 400;
}

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  line-height: 1.4;
  transition: border-color var(--duration-fast) ease;
}

.field__input:hover {
  border-color: var(--color-text-muted);
}

.field__input:focus-visible {
  border-color: var(--color-focus);
  outline-offset: 1px;
}

.field__textarea {
  min-height: 9rem;
  resize: vertical;
}

.field__select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A9099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-size: 1.1rem;
  background-repeat: no-repeat;
}

.field__hint {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

/* Invalid fields: red border, thicker edge and a message with an icon,
   so the state is never communicated by colour alone. */
.field__input[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: inset 3px 0 0 var(--color-error);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  color: var(--color-error);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.4;
}

.field__error::before {
  content: "";
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: 0.05rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.4v.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6M12 16.4v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Checkbox */
.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: start;
}

.field--check .field__error {
  grid-column: 2;
}

.check__input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  cursor: pointer;
}

.check__input::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  background-color: var(--color-on-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform var(--duration-fast) var(--ease-out);
}

.check__input:checked {
  border-color: var(--color-accent);
  background-color: var(--color-accent);
}

.check__input:checked::before {
  transform: scale(1);
}

.check__input[aria-invalid="true"] {
  border-color: var(--color-error);
  border-width: 2px;
}

.check__label {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  cursor: pointer;
}

/* Spam trap: kept off screen */
.field--trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
}

.contact-form [data-submit][aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
}

/* Status message after sending */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--color-border-strong);
  border-left-width: 4px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Stays in the page (so screen readers announce updates) but takes no space while empty */
.form-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.form-status .icon {
  margin-top: 0.1rem;
}

.form-status--success {
  border-color: var(--color-accent);
}

.form-status--success .icon {
  color: var(--color-accent-text);
}

.form-status--error {
  border-color: var(--color-error);
}

.form-status--error .icon {
  color: var(--color-error);
}

.form-status--demo .icon {
  color: var(--color-text-muted);
}

.form-status strong {
  display: block;
}

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

@media (min-width: 60rem) {
  .contact {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .contact__intro {
    grid-column: 1 / span 5;
  }

  .contact-form {
    grid-column: 7 / -1;
  }
}


/* ==========================================================================
   18. FOOTER
   ========================================================================== */
.site-footer {
  padding-block: var(--space-xl) var(--space-l);
  border-top: 1px solid var(--color-border);
}

.site-footer__top {
  display: grid;
  gap: var(--space-xl);
}

.site-footer__brand {
  display: grid;
  gap: var(--space-s);
  align-content: start;
  justify-items: start;
}

.site-footer__desc {
  max-width: 34ch;
  color: var(--color-text-muted);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--grid-gap);
}

.footer-col__title {
  margin-bottom: var(--space-xs);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
}

.site-footer a:not(.brand) {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.site-footer a:not(.brand):hover {
  text-decoration-color: currentColor;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-l);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-m);
}

.site-footer__bottom a:hover {
  color: var(--color-text);
}

@media (min-width: 40rem) {
  .site-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .site-footer__top {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .site-footer__brand {
    grid-column: 1 / span 4;
  }

  .site-footer__nav {
    grid-column: 7 / -1;
  }
}


/* ==========================================================================
   19. SIMPLE PAGES (legal.html, 404.html)
   ========================================================================== */
.site-header--simple .site-header__actions {
  margin-left: auto;
}

.site-header--simple .btn {
  display: inline-flex;
}

.page {
  padding-top: calc(var(--header-h) + var(--space-xl));
  padding-bottom: var(--section-space);
}

.page__inner {
  width: min(100% - 2 * var(--gutter), var(--container-narrow));
  margin-inline: auto;
}

.page__title {
  margin-bottom: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--weight-display);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
}

.page__lead {
  color: var(--color-text-muted);
  font-size: var(--step-1);
}

.page .site-footer__bottom,
.page + .site-footer .site-footer__bottom {
  margin-top: 0;
}

.page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-l);
}

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

.prose h2 {
  margin: var(--space-xl) 0 var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.prose h3 {
  margin: var(--space-l) 0 var(--space-2xs);
  font-size: var(--step-1);
}

.prose p,
.prose ul {
  max-width: 64ch;
  margin-bottom: var(--space-s);
  color: var(--color-text-muted);
}

.prose ul {
  padding-left: 1.25rem;
}

.prose a {
  color: var(--color-text);
  text-underline-offset: 0.2em;
}


/* ==========================================================================
   20. MOTION: ENTRANCE AND SCROLL REVEAL
   Everything here runs only for visitors who have not asked their device
   to reduce motion. Turn individual effects off in js/main.js (CONFIG).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* ---- Page load: one orchestrated sequence in the hero ------------------ */
  .hero__line {
    animation: rise 820ms var(--ease-out) both;
  }

  .hero__line:nth-child(2) { animation-delay: 80ms; }
  .hero__line:nth-child(3) { animation-delay: 160ms; }

  .hero__aside {
    animation: fade-up 700ms var(--ease-out) 260ms both;
  }

  .hero__frame {
    animation: frame-in 900ms var(--ease-out) 300ms both;
  }

  .hero__frame::before {
    animation: marks-in 700ms var(--ease-out) 520ms both;
  }

  /* The preview "assembles" piece by piece, like a layout snapping into place */
  .preview__top,
  .preview__title,
  .preview__text,
  .preview__cta,
  .preview__art,
  .preview__tiles span {
    animation: assemble 620ms var(--ease-out) both;
  }

  .preview__top { animation-delay: 520ms; }
  .preview__title { animation-delay: 600ms; }
  .preview__text { animation-delay: 680ms; }
  .preview__text--short { animation-delay: 720ms; }
  .preview__cta { animation-delay: 780ms; }
  .preview__art { animation-delay: 700ms; }
  .preview__tiles span:nth-child(1) { animation-delay: 820ms; }
  .preview__tiles span:nth-child(2) { animation-delay: 880ms; }
  .preview__tiles span:nth-child(3) { animation-delay: 940ms; }

  .preview__text {
    transform-origin: left center;
    animation-name: draw;
  }

  .inspector {
    animation: fade-up 640ms var(--ease-out) 1000ms both;
  }

  /* Gentle pointer parallax (values set by JavaScript on desktop only) */
  .hero__frame {
    translate: calc(var(--px, 0) * -6px) calc(var(--py, 0) * -6px);
  }

  .inspector {
    translate: calc(var(--px, 0) * 10px) calc(var(--py, 0) * 10px);
  }

  .hero__visual.is-tracking .hero__frame,
  .hero__visual.is-tracking .inspector {
    transition: translate 600ms var(--ease-out);
  }

  /* Hover lift for the crop marks on work cards */
  .frame--hover::before {
    transform: scale(0.97);
  }

  @media (hover: hover) {
    .work-card:hover .frame--hover::before {
      transform: scale(1);
    }

    .service__title {
      transition: transform var(--duration-base) var(--ease-out);
    }

    .service:hover .service__title {
      transform: translateX(0.35rem);
    }
  }

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

  /* Magnetic buttons (desktop): JavaScript sets --mx/--my */
  [data-magnetic] {
    translate: var(--mx, 0) var(--my, 0);
    transition:
      background-color var(--duration-fast) ease,
      border-color var(--duration-fast) ease,
      color var(--duration-fast) ease,
      translate 400ms var(--ease-out);
  }

  /* ---- Scroll reveal --------------------------------------------------------
     The hidden state only applies once js/main.js adds .reveal-on to <html>,
     so content is never hidden if JavaScript is off or fails. */
  .reveal-on [data-reveal] {
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .reveal-on [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(1.5rem);
  }

  /* Mobile menu slides down slightly as it fades in */
  @media (max-width: 59.99rem) {
    .js .site-menu {
      transform: translateY(-0.5rem);
      transition: opacity var(--duration-base) ease, transform var(--duration-base) var(--ease-out), visibility 0s linear var(--duration-base);
    }

    .js .site-menu.is-open {
      transform: none;
      transition: opacity var(--duration-base) ease, transform var(--duration-base) var(--ease-out), visibility 0s;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.4em);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(0.875rem);
  }
}

@keyframes frame-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
}

@keyframes marks-in {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
}

@keyframes assemble {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
}

@keyframes draw {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
}


/* ==========================================================================
   21. PRINT
   ========================================================================== */
@media print {
  .site-header,
  .skip-link,
  .hero__visual,
  .contact-form,
  .theme-toggle {
    display: none;
  }

  body {
    background: #FFFFFF;
    color: #000000;
  }

  .hero {
    padding-top: 0;
  }

  .reveal-on [data-reveal] {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   22. INNER PAGES: PAGE HEADING, BREADCRUMBS, SHARED HELPERS
   ========================================================================== */
.page-hero {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  border-bottom: 1px solid var(--color-border);
}

.page-hero__inner {
  display: grid;
  gap: var(--space-m) var(--grid-gap);
}

.page-hero__main {
  display: grid;
  gap: var(--space-m);
  align-content: end;
}

.page-hero__title {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--weight-display);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
}

.page-hero__aside {
  display: grid;
  gap: var(--space-m);
  align-content: end;
  justify-items: start;
}

.page-hero__lead {
  max-width: 46ch;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

@media (min-width: 60rem) {
  .page-hero__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: end;
  }

  .page-hero__main {
    grid-column: 1 / span 7;
  }

  .page-hero__aside {
    grid-column: 8 / -1;
  }
}

/* Breadcrumbs */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.crumbs li {
  display: inline-flex;
  align-items: center;
}

.crumbs li + li::before {
  content: "/";
  content: "/" / "";
  margin-inline: 0.55rem;
  color: var(--color-border-strong);
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  color: var(--color-text-muted);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

.crumbs a:hover {
  color: var(--color-text);
  text-decoration-color: currentColor;
}

.crumbs [aria-current="page"] {
  color: var(--color-text);
}

/* Small label above a heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-muted);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  background-color: var(--color-accent);
}

/* "On this page" links */
.jump-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.jump-links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.jump-links a:hover {
  border-color: var(--color-text);
  background-color: var(--color-surface-raised);
}

.jump-links--page {
  margin-top: var(--space-l);
}

/* Text link with an arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  color: var(--color-text);
  font-weight: 700;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: var(--color-border-strong);
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

.link-arrow .icon {
  transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover {
  color: var(--color-accent-text);
  text-decoration-color: currentColor;
}

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

/* Lists with a check mark or a dash */
.list-check {
  display: grid;
  gap: 0.65rem;
}

.list-check li {
  display: flex;
  gap: 0.6rem;
  line-height: 1.45;
}

.list-check .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  color: var(--color-accent-text);
}

@media (min-width: 40rem) {
  .list-check--cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
}

.list-dash {
  display: grid;
  gap: 0.45rem;
  color: var(--color-text-muted);
}

.list-dash li {
  position: relative;
  padding-left: 1.1rem;
  line-height: 1.45;
}

.list-dash li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 0.55rem;
  height: 1px;
  background-color: var(--color-accent-text);
}

/* Two columns: text and an image */
.split {
  display: grid;
  gap: var(--space-xl) var(--grid-gap);
  align-items: center;
}

.split__text {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.split__text > p:not(.case-lead) {
  max-width: 58ch;
  color: var(--color-text-muted);
}

.split__media {
  display: grid;
  gap: var(--space-s);
  padding: 1.375rem;
}

.split__media figcaption,
.case-cover figcaption,
.case-gallery figcaption {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

@media (min-width: 60rem) {
  .split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .split__media {
    grid-column: 1 / span 6;
  }

  .split__text {
    grid-column: 8 / -1;
  }

  .split--media-right .split__text {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .split--media-right .split__media {
    grid-column: 7 / -1;
    grid-row: 1;
  }
}

/* "Scroll sideways" hint under wide tables and charts: phones only */
.scroll-hint {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.scroll-hint .icon {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 39.99rem) {
  .scroll-hint {
    display: flex;
  }
}

.section--tight {
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.ratio-3x2 { aspect-ratio: 3 / 2; }

/* Keep one side of a cropped image in view, e.g. a wordmark on the left */
.media-crop .crop-left { object-position: left center; }
.media-crop .crop-right { object-position: right center; }
.media-crop .crop-top { object-position: center top; }

.section-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.process__more {
  margin-top: var(--space-m);
}

.site-footer__address {
  color: var(--color-text-muted);
  line-height: 1.5;
}

.site-footer__address a {
  color: var(--color-text);
}


/* ==========================================================================
   23. CARDS, SECTORS AND CALLS TO ACTION
   ========================================================================== */
.card-grid {
  display: grid;
  gap: var(--grid-gap);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.card__num,
.card__icon {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--color-border-strong);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.card__title a {
  text-decoration: none;
}

.card__title a:hover {
  color: var(--color-accent-text);
}

.card__text {
  color: var(--color-text-muted);
}

.card__price {
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-border);
  font-weight: 700;
}

.card__link {
  align-self: flex-start;
  margin-top: auto;
}

/* A card whose title link covers the whole card */
.card--media {
  position: relative;
  padding: 0 0 var(--space-m);
  border: 0;
  background: none;
}

.card--media .card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card--media .media-crop img {
  transition: transform 900ms var(--ease-out);
}

@media (hover: hover) {
  .card--media:hover .media-crop img {
    transform: scale(1.035);
  }
}

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

@media (min-width: 60rem) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .card-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Sectors: a ruled list */
.sectors {
  display: grid;
  border-top: 1px solid var(--color-border);
}

.sector {
  display: grid;
  gap: 0.35rem;
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--color-border);
}

.sector__title {
  font-size: var(--step-1);
  font-weight: 700;
}

.sector p {
  color: var(--color-text-muted);
}

@media (min-width: 40rem) {
  .sectors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
}

@media (min-width: 60rem) {
  .sectors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Closing call to action on inner pages */
.cta-band {
  padding-block: var(--section-space);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-l) var(--grid-gap);
  align-items: end;
}

.cta-band__title {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--weight-display);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
}

.cta-band__side {
  display: grid;
  gap: var(--space-m);
  justify-items: start;
}

.cta-band__text {
  max-width: 42ch;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

@media (min-width: 60rem) {
  .cta-band__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .cta-band__title {
    grid-column: 1 / span 7;
  }

  .cta-band__side {
    grid-column: 8 / -1;
  }
}


/* ==========================================================================
   24. SERVICES PAGE
   ========================================================================== */
.practice {
  padding-block: var(--section-space);
}

.practice + .practice {
  border-top: 1px solid var(--color-border);
}

.practice__inner {
  display: grid;
  gap: var(--space-xl) var(--grid-gap);
}

.practice__head {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.practice__num {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
}

.practice__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--weight-display);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
}

.practice__summary {
  max-width: 40ch;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

.practice__facts {
  display: grid;
  gap: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.practice__facts div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-s);
}

.practice__facts dt {
  color: var(--color-text-muted);
  font-size: var(--step--1);
  line-height: 1.6;
}

.practice__facts dd {
  font-weight: 700;
  line-height: 1.4;
}

.practice__body {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.practice__subtitle {
  font-size: var(--step-1);
  font-weight: 700;
}

.practice__subtitle:not(:first-child) {
  margin-top: var(--space-s);
}

.practice__fit {
  max-width: 58ch;
  color: var(--color-text-muted);
}

.practice__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  margin-top: var(--space-s);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 60rem) {
  .practice__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .practice__head {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
    align-self: start;
  }

  .practice__body {
    grid-column: 7 / -1;
  }
}


/* ==========================================================================
   25. WORK PAGE: FILTERS, PROJECT GRID, TABLES
   ========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

.filter-bar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-btn {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 700;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.filter-btn:hover {
  border-color: var(--color-text);
  background-color: var(--color-surface-raised);
}

.filter-btn[aria-pressed="true"] {
  border-color: var(--color-text);
  background-color: var(--color-text);
  color: var(--color-bg);
}

.filter-bar__count {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

/* Filters need JavaScript; without it every item stays listed */
html:not(.js) .filter-bar {
  display: none;
}

.project-grid {
  display: grid;
  gap: var(--space-xl) var(--grid-gap);
}

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

.work-card__badge {
  justify-self: start;
  margin-bottom: var(--space-3xs);
  padding: 0.2rem 0.55rem;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}

.work-card__title a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

.work-card__title a:hover {
  color: var(--color-accent-text);
  text-decoration-color: currentColor;
}

/* Scrollable table wrapper: the table scrolls sideways on small screens */
.table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.table-wrap:focus-visible {
  outline-offset: 2px;
}

.data-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.data-table th,
.data-table td {
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.data-table thead th {
  color: var(--color-text-muted);
  font-size: var(--step--1);
  font-weight: 700;
}

.data-table tbody th {
  font-weight: 700;
}

.data-table tbody tr:last-child > * {
  border-bottom: 0;
}

.data-table--index td {
  color: var(--color-text-muted);
}

.data-table--index tbody tr {
  transition: background-color var(--duration-fast) ease;
}

.data-table--index tbody tr:hover {
  background-color: var(--color-surface-raised);
}


/* ==========================================================================
   26. CASE STUDIES
   ========================================================================== */
.page-hero--case .page-hero__main {
  gap: var(--space-s);
}

.case-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m) var(--grid-gap);
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.case-meta div {
  display: grid;
  gap: 0.2rem;
  align-content: start;
}

.case-meta dt {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.case-meta dd {
  font-weight: 700;
  line-height: 1.4;
}

@media (min-width: 60rem) {
  .case-meta {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.case-cover {
  padding-top: var(--space-xl);
}

.case-cover__figure {
  display: grid;
  gap: var(--space-s);
  padding: 1.375rem;
}

.case-section {
  display: grid;
  gap: var(--space-m) var(--grid-gap);
}

.case-section__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.case-section__body {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

.case-section__body > p {
  max-width: 62ch;
  color: var(--color-text-muted);
}

.case-section__body > .case-lead,
.case-lead {
  max-width: 44ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.case-subtitle {
  margin-top: var(--space-s);
  font-size: var(--step-1);
  font-weight: 700;
}

@media (min-width: 60rem) {
  .case-section {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  /* Child selectors: the title class is also used inside other layouts */
  .case-section > .case-section__title {
    grid-column: 1 / span 4;
  }

  .case-section > .case-section__body,
  .case-section > .timeline {
    grid-column: 6 / -1;
  }
}

/* Colour swatches */
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
  gap: 0.75rem;
}

.swatch-card {
  display: grid;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.swatch-card__chip {
  aspect-ratio: 4 / 3;
  background-color: var(--chip, #888888);
}

.swatch-card__info {
  display: grid;
  padding: 0.6rem 0.75rem 0.7rem;
  line-height: 1.35;
}

.swatch-card__name {
  font-weight: 700;
}

.swatch-card__hex {
  color: var(--color-text-muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--step--1);
}

/* Type specimen */
.specimen {
  display: grid;
  gap: 0.75rem;
}

.specimen__item {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.specimen__item p {
  color: var(--color-text-muted);
}

.specimen__item strong {
  color: var(--color-text);
}

.specimen__glyph {
  font-family: var(--font-body);
  font-size: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
}

.specimen__glyph--serif {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
}

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

/* Gallery of two images with different shapes */
.case-gallery {
  display: grid;
  gap: var(--space-xl) var(--grid-gap);
  align-items: end;
}

.case-gallery figure {
  display: grid;
  gap: var(--space-s);
  padding: 1.375rem;
}

@media (min-width: 40rem) {
  .case-gallery {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Results */
.metrics {
  display: grid;
  gap: var(--space-l) var(--grid-gap);
}

.metric {
  display: grid;
  gap: 0.35rem;
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-border-strong);
}

.metric__value {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.metric__label {
  max-width: 24ch;
  color: var(--color-text-muted);
}

@media (min-width: 40rem) {
  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Research findings */
.findings {
  display: grid;
  gap: var(--space-m);
}

.finding {
  display: grid;
  gap: 0.35rem;
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.finding__value {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.finding__title {
  font-size: var(--step-1);
  font-weight: 700;
}

.finding p {
  max-width: 56ch;
  color: var(--color-text-muted);
}

/* Before / after */
.compare-cols {
  display: grid;
  gap: var(--space-s);
}

.compare-col {
  display: grid;
  gap: var(--space-s);
  align-content: start;
  padding: var(--space-m);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.compare-col--after {
  border-color: var(--color-accent-text);
}

.compare-col__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
}

.compare-col__list {
  display: grid;
  gap: 0.65rem;
}

.compare-col__list li {
  display: flex;
  gap: 0.6rem;
  line-height: 1.45;
}

.compare-col__list .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
}

.compare-col--after .icon {
  color: var(--color-accent-text);
}

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

/* Small inline figures */
.mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  color: var(--color-text-muted);
}

.mini-stats li {
  display: grid;
}

.mini-stats__value {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.1;
}

/* Client quote on a case study: the feature quote, full width */
.quote--case {
  max-width: 60rem;
}

/* Link to the next case study */
.next-project {
  border-top: 1px solid var(--color-border);
}

.next-project__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.5rem var(--space-m);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
  text-decoration: none;
}

.next-project__label {
  grid-column: 1 / -1;
  color: var(--color-text-muted);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.next-project__title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--weight-display);
  line-height: 0.95;
  letter-spacing: var(--tracking-display);
  transition: color var(--duration-fast) ease;
}

.next-project__icon {
  width: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  height: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  stroke-width: 1.25;
  transition: transform var(--duration-base) var(--ease-out), color var(--duration-fast) ease;
}

.next-project__link:hover .next-project__title,
.next-project__link:hover .next-project__icon {
  color: var(--color-accent-text);
}

.next-project__link:hover .next-project__icon {
  transform: translateX(0.4rem);
}


/* ==========================================================================
   27. STUDIO AND CAREERS: TEAM, TIMELINE, ROLES, BENEFITS
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--grid-gap);
}

.person {
  display: grid;
  gap: 0.2rem;
  align-content: start;
}

.person__portrait,
.person__photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  width: 100%;
  margin-bottom: var(--space-xs);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.03em;
  object-fit: cover;
}

/* Initials tiles get a faint layout grid, a nod to the studio's craft */
.person__portrait {
  background-image:
    linear-gradient(var(--color-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
  background-size: 25% 20%;
  background-position: -1px -1px;
}

.person__portrait::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 30%;
  height: 4px;
  background-color: var(--color-accent);
}

.person__name {
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.3;
}

.person__role {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

@media (min-width: 40rem) {
  .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Milestones */
.timeline {
  display: grid;
  border-top: 1px solid var(--color-border);
}

.timeline__item {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-s) var(--grid-gap);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--color-border);
}

.timeline__year {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  line-height: 1.1;
}

.timeline__title {
  margin-bottom: 0.25rem;
  font-size: var(--step-1);
  font-weight: 700;
}

.timeline__item p {
  max-width: 56ch;
  color: var(--color-text-muted);
}

@media (min-width: 40rem) {
  .timeline__item {
    grid-template-columns: 8rem minmax(0, 1fr);
  }
}

/* Roles use the accordion component */
.role__heading {
  display: grid;
  gap: 0.15rem;
}

.role__meta-short {
  color: var(--color-text-muted);
  font-size: var(--step--1);
  font-weight: 400;
}

.role__body {
  display: grid;
  gap: var(--space-m);
  justify-items: start;
  padding-bottom: var(--space-l);
}

.role__body > p {
  max-width: 60ch;
  padding: 0;
  color: var(--color-text-muted);
}

.role__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.role__meta li {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.role__cols {
  display: grid;
  gap: var(--space-m) var(--grid-gap);
  width: 100%;
}

.role__subtitle {
  margin-bottom: 0.5rem;
  font-size: var(--step-0);
  font-weight: 700;
}

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

/* Benefits */
.perks {
  display: grid;
  gap: 0 var(--grid-gap);
  border-top: 1px solid var(--color-border);
}

.perk {
  display: grid;
  gap: 0.35rem;
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--color-border);
}

.perk__title {
  font-size: var(--step-1);
  font-weight: 700;
}

.perk p {
  color: var(--color-text-muted);
}

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

@media (min-width: 60rem) {
  .perks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ==========================================================================
   28. PROCESS PAGE: TIMELINE CHART AND PHASES
   Each bar sets --from (first week) and --span (number of weeks) in its
   style attribute; the chart has 12 week columns after the label column.
   ========================================================================== */
.gantt {
  min-width: 40rem;
  padding: var(--space-m);
}

.gantt__scale,
.gantt__row {
  display: grid;
  grid-template-columns: 10rem repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: 0;
}

.gantt__scale {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--step--1);
  text-align: center;
}

.gantt__scale .gantt__label {
  text-align: left;
}

.gantt__rows {
  display: grid;
}

.gantt__row {
  min-height: 3rem;
  border-bottom: 1px solid var(--color-border);
  /* faint week lines behind the bars */
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(100% / 12 - 1px), var(--color-border) calc(100% / 12 - 1px) calc(100% / 12));
  background-position: 10rem 0;
  background-size: calc(100% - 10rem) 100%;
  background-repeat: no-repeat;
}

.gantt__row:last-child {
  border-bottom: 0;
}

.gantt__label {
  grid-column: 1;
  padding-right: var(--space-s);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.gantt__bar {
  grid-column: calc(var(--from, 1) + 1) / span var(--span, 1);
  grid-row: 1;
  height: 1.75rem;
  margin-inline: 2px;
  background-color: var(--color-accent-text); /* the darker accent in the light theme keeps 3:1 contrast */
}

.gantt__bar--soft {
  border: 1px dashed var(--color-accent-text);
  background-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.phases {
  display: grid;
  border-top: 1px solid var(--color-border);
}

.phase {
  display: grid;
  gap: var(--space-l) var(--grid-gap);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
}

.phase__head {
  display: grid;
  gap: var(--space-s);
  align-content: start;
  justify-items: start;
}

.phase__num {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
}

.phase__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--weight-display);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
}

.phase__time {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 700;
}

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

.phase__summary {
  max-width: 44ch;
  color: var(--color-text-muted);
}

.phase__cols {
  display: grid;
  gap: var(--space-l) var(--grid-gap);
}

.phase__col-title {
  margin-bottom: var(--space-s);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--step-0);
  font-weight: 700;
}

@media (min-width: 40rem) {
  .phase__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .phase {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .phase__head {
    grid-column: 1 / span 4;
  }

  .phase__cols {
    grid-column: 6 / -1;
  }
}


/* ==========================================================================
   29. PRICING PAGE: COMPARISON AND ESTIMATOR
   ========================================================================== */
.data-table--compare {
  min-width: 42rem;
}

.data-table--compare thead th {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--step-1);
}

.data-table__sub {
  display: block;
  margin-top: 0.15rem;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
}

.data-table--compare tbody th {
  width: 28%;
}

.data-table--compare td {
  color: var(--color-text-muted);
}

.data-table--compare .icon {
  display: inline-block;
  vertical-align: -0.25em;
  color: var(--color-accent-text);
}

.data-table--compare .icon--muted {
  color: var(--color-text-muted);
}

.data-table .col-featured {
  background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
  color: var(--color-text);
}

/* Estimator */
.estimator {
  display: grid;
  gap: var(--space-xl) var(--grid-gap);
  align-items: start;
}

.estimator__form {
  display: grid;
  gap: var(--space-l);
}

.estimator__step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.estimator__legend {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: var(--space-s);
  padding: 0;
  font-size: var(--step-1);
  font-weight: 700;
}

.estimator__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: 1rem;
}

.estimator__optional {
  color: var(--color-text-muted);
  font-size: var(--step--1);
  font-weight: 400;
}

.option-grid {
  display: grid;
  gap: 0.5rem;
}

.option {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.15rem;
  min-height: 3.25rem;
  padding: 0.85rem 1rem 0.85rem 2.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.option:hover {
  border-color: var(--color-text-muted);
}

.option input {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--color-accent-text);
  cursor: pointer;
}

.option:has(input:checked) {
  border-color: var(--color-accent-text);
  box-shadow: inset 0 0 0 1px var(--color-accent-text);
}

.option__name {
  font-weight: 700;
  line-height: 1.3;
}

.option__desc {
  color: var(--color-text-muted);
  font-size: var(--step--1);
  line-height: 1.4;
}

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

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

/* Phones: a compact price bar that sticks to the bottom while choosing */
.estimate-mini {
  position: sticky;
  bottom: 0.75rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem var(--space-s);
  padding: 0.8rem 1rem;
  background-color: var(--color-invert-bg);
  box-shadow: var(--shadow-float);
  color: var(--color-invert-text);
  font-weight: 700;
}

.estimate-mini__hint {
  color: var(--color-invert-muted);
  font-size: var(--step--1);
  font-weight: 400;
}

@media (min-width: 60rem) {
  .estimate-mini {
    display: none;
  }
}

/* Result panel: inverted, like the featured plan */
.estimate {
  display: grid;
  gap: var(--space-m);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  background-color: var(--color-invert-bg);
  color: var(--color-invert-text);
}

.estimate__label {
  color: var(--color-invert-muted);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.estimate__live {
  display: grid;
  gap: var(--space-xs);
}

.estimate__value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1;
}

.estimate__weeks {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
}

.estimate__list {
  display: grid;
  gap: 0.35rem;
  padding-block: var(--space-s);
  border-block: 1px solid color-mix(in srgb, var(--color-invert-text) 18%, transparent);
  color: var(--color-invert-muted);
  font-size: 0.9375rem;
}

.estimate .btn--primary {
  background-color: var(--color-invert-text);
  color: var(--color-invert-bg);
  white-space: normal;
}

.estimate .btn--primary:hover {
  background-color: var(--color-accent);
  color: var(--color-on-accent);
}

.estimate :focus-visible {
  outline-color: var(--color-invert-text);
}

.estimate__note {
  color: var(--color-invert-muted);
  font-size: var(--step--1);
}

@media (min-width: 60rem) {
  .estimator {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .estimator__form {
    grid-column: 1 / span 8;
  }

  .estimate {
    grid-column: 9 / -1;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}


/* ==========================================================================
   30. JOURNAL AND ARTICLE
   ========================================================================== */
.post-tag {
  justify-self: start;
  align-self: start;
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.post-meta li + li {
  padding-left: 1rem;
  border-left: 1px solid var(--color-border-strong);
}

/* Featured article */
.post-feature {
  display: grid;
  gap: var(--space-l) var(--grid-gap);
  align-items: center;
}

.post-feature__media {
  margin: 0;
}

.post-feature__media img {
  transition: transform 900ms var(--ease-out);
}

.post-feature__body {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
}

.post-feature__title {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: var(--weight-display);
  line-height: 1;
  letter-spacing: var(--tracking-display);
}

.post-feature__title a {
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.post-feature__title a:hover {
  color: var(--color-accent-text);
}

.post-feature__excerpt {
  max-width: 48ch;
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

@media (hover: hover) {
  .post-feature:hover .frame--hover::before {
    opacity: 1;
  }

  .post-feature:hover .post-feature__media img {
    transform: scale(1.03);
  }
}

@media (min-width: 60rem) {
  .post-feature {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .post-feature__media {
    grid-column: 1 / span 7;
  }

  .post-feature__body {
    grid-column: 8 / -1;
  }
}

/* Article cards */
.post-grid {
  display: grid;
  gap: var(--space-xl) var(--grid-gap);
}

.post-card {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}

.post-card .media-crop {
  margin-bottom: var(--space-2xs);
  border: 1px solid var(--color-border);
}

.post-card__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.post-card__title a {
  text-decoration: none;
}

.post-card__title a:hover {
  color: var(--color-accent-text);
}

.post-card__excerpt {
  color: var(--color-text-muted);
}

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

@media (min-width: 60rem) {
  .post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Newsletter sign-up */
.newsletter {
  display: grid;
  gap: var(--space-l) var(--grid-gap);
  align-items: start;
}

.newsletter__text {
  display: grid;
  gap: var(--space-m);
}

.newsletter__form {
  position: relative;
  display: grid;
  gap: var(--space-m);
}

.newsletter__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.newsletter__row .field__input {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
}

@media (min-width: 60rem) {
  .newsletter {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .newsletter__text {
    grid-column: 1 / span 5;
  }

  .newsletter__form {
    grid-column: 7 / -1;
  }
}

/* Article page */
.article {
  padding-bottom: var(--section-space);
}

.article__head {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 4vw, 5rem));
}

.article__wrap {
  width: min(100% - 2 * var(--gutter), 46rem);
  margin-inline: auto;
}

.article__head .article__wrap {
  display: grid;
  gap: var(--space-m);
}

.article__title {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: var(--weight-display);
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
}

.article__lead {
  color: var(--color-text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

.article__byline {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.article__byline p {
  display: grid;
  line-height: 1.35;
}

.article__author {
  font-weight: 700;
}

.article__meta {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.article__cover {
  display: grid;
  gap: var(--space-s);
  width: min(100% - 2 * var(--gutter), 66rem);
  margin: var(--space-xl) auto;
  padding: 1.375rem;
}

.article__cover figcaption,
.article-body figcaption {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.article-body {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.7;
}

.article-body > * + * {
  margin-top: 1.35rem;
}

.article-body h2 {
  margin-top: var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.article-body h2 + * {
  margin-top: var(--space-s);
}

.article-body ul {
  display: grid;
  gap: 0.6rem;
  padding-left: 1.25rem;
}

.article-body li::marker {
  color: var(--color-accent-text);
}

.article-body a:not(.btn) {
  text-underline-offset: 0.2em;
}

.article-body figure {
  display: grid;
  gap: var(--space-s);
  margin-block: var(--space-l);
  padding: 1.375rem;
}

.pullquote {
  margin-block: var(--space-l);
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.author-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  padding: var(--space-m);
  border: 1px solid var(--color-border);
  font-size: var(--step-0);
  line-height: 1.6;
}

.author-box p {
  color: var(--color-text-muted);
}

.author-box__name {
  margin-bottom: 0.2rem;
  color: var(--color-text);
  font-weight: 700;
}

.avatar--lg {
  width: 3.75rem;
  height: 3.75rem;
  font-size: 1.05rem;
}


/* ==========================================================================
   31. FAQ PAGE
   ========================================================================== */
.faq-tools {
  display: grid;
  gap: 0.6rem;
}

.search-field {
  position: relative;
}

.search-field .icon {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  color: var(--color-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.search-field .field__input {
  padding-left: 2.85rem;
}

.faq-count {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

/* Search needs JavaScript; without it every question is listed */
html:not(.js) .faq-tools {
  display: none;
}

.faq-nav ul {
  display: grid;
  border-top: 1px solid var(--color-border);
}

.faq-nav li {
  border-bottom: 1px solid var(--color-border);
}

.faq-nav a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--color-text-muted);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.faq-nav a:hover {
  color: var(--color-text);
}

.faq-layout--page .faq-layout__head {
  gap: var(--space-l);
}

.faq-group + .faq-group {
  margin-top: var(--space-xl);
}

.faq-group__title {
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.faq-empty {
  padding: var(--space-m);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
}

.faq-empty strong {
  color: var(--color-text);
}

@media (min-width: 60rem) {
  .faq-layout > .faq-groups {
    grid-column: 6 / -1;
  }
}


/* ==========================================================================
   32. CONTACT PAGE
   ========================================================================== */
.contact-page {
  display: grid;
  gap: var(--space-xl) var(--grid-gap);
  align-items: start;
}

.contact-page__aside {
  display: grid;
}

.info-block {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-m);
  border-top: 1px solid var(--color-border);
}

.info-block:first-child {
  padding-top: 0;
  border-top: 0;
}

.info-block__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.info-block .contact-list {
  margin-top: 0;
}

.info-block__note {
  color: var(--color-text-muted);
  font-size: var(--step--1);
}

.hours {
  display: grid;
  gap: 0.35rem;
}

.hours div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-s);
}

.hours dt {
  color: var(--color-text-muted);
}

.hours dd {
  font-weight: 700;
}

.steps {
  counter-reset: step;
  display: grid;
  gap: var(--space-s);
  color: var(--color-text-muted);
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-xs);
  line-height: 1.5;
}

.steps li > span {
  padding-top: 0.2rem;
}

.steps li::before {
  content: counter(step);
  content: counter(step) / "";
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-border-strong);
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-weight: 700;
}

.steps strong {
  color: var(--color-text);
}

.plain-links {
  display: grid;
  gap: 0.35rem;
  color: var(--color-text-muted);
}

.plain-links a {
  display: inline-block;
  padding-block: 0.4rem;
}

.contact-form__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.choice-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-group legend {
  margin-bottom: 0.6rem;
  padding: 0;
}

.choice-grid {
  display: grid;
  gap: 0.25rem var(--space-m);
}

.check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
}

.check-item .check__label {
  color: var(--color-text);
}

/* On phones and tablets the form comes first; contact details follow */
@media (max-width: 59.99rem) {
  .contact-page > .contact-form {
    order: -1;
  }

  .contact-page__aside .info-block:first-child {
    padding-top: var(--space-m);
    border-top: 1px solid var(--color-border);
  }
}

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

@media (min-width: 60rem) {
  .field-row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .contact-page {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .contact-page__aside {
    grid-column: 1 / span 4;
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }

  .contact-page > .contact-form {
    grid-column: 6 / -1;
  }
}

/* Error page links (ul. beats the list reset in section 4) */
ul.error-links {
  display: grid;
  margin-top: var(--space-l);
  border-top: 1px solid var(--color-border);
}

.error-links li {
  border-bottom: 1px solid var(--color-border);
}

.error-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 3.5rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.error-links a:hover {
  color: var(--color-accent-text);
}

.page--error .eyebrow {
  margin-bottom: var(--space-m);
}

.page--legal .crumbs {
  margin-bottom: var(--space-m);
}

/* Print additions for inner pages */
@media print {
  .filter-bar,
  .faq-tools,
  .estimator__form,
  .newsletter,
  .cta-band__actions {
    display: none;
  }

  .practice__head,
  .estimate,
  .faq-layout__head,
  .contact-page__aside {
    position: static;
  }
}

/* Without JavaScript the estimator can't recalculate: show only the default result */
html:not(.js) .estimator__form {
  display: none;
}