/*
  Mountain Air Web: site layer. Loaded after the theme (unlayered), so anything here wins.
  Design ported from the MawX WordPress theme: cream/ink palette, plum accent,
  Source Serif 4 display type over Manrope body text, pill buttons, topographic backgrounds.

  1. Tokens            5. Section backgrounds + topo
  2. Base type         6. Header
  3. Shared pieces     7. Footer
  4. Buttons           8. Prose (posts, case studies)
  Per-block styling lives in user/site/css/blocks/<type>.css.
*/

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  /* Palette (names as in the WP theme.json) */
  --cream: #F5F1E8;
  --cream-deep: #ECE6D8;
  --paper: #FAF8F1;
  --ink: #1F1E1B;
  --ink-soft: #514F4A;
  --ink-mute: #6b675f;          /* was #8A867E: lifted so 11–13px mono labels pass AA on cream (≈5.2:1) */
  --plum-lift: #c489ad;         /* plum for text on ink (plum itself is ≈2.4:1 on ink) */
  --rule: #D9D3C2;
  --rule-soft: #E6E0D0;
  --navy: #213650;
  --plum: #8c4572;
  --plum-deep: #6e3559;
  --gradient-navy-plum: linear-gradient(135deg, var(--navy), var(--plum));

  --maw-accent: var(--plum);
  --maw-accent-hover: var(--plum-deep);
  --maw-accent-contrast: #ffffff;
  --maw-accent-soft: var(--paper);      /* `background: soft` = paper */
  --maw-bg: var(--cream);
  --maw-bg-alt: var(--cream-deep);      /* `background: alt` = cream deep */
  --maw-bg-inverse: var(--ink);
  --maw-surface: var(--paper);
  --maw-text: var(--ink);
  --maw-text-muted: var(--ink-soft);
  --maw-text-inverse: var(--cream);
  --maw-border: var(--rule);
  --maw-link: var(--plum);
  --maw-focus: color-mix(in oklab, var(--plum) 45%, transparent);

  --maw-font-body: "Manrope", system-ui, sans-serif;
  --maw-font-heading: "Source Serif 4", Georgia, serif;
  --maw-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --maw-leading: 1.6;
  --maw-leading-tight: 1.08;
  --maw-text-base: 1rem;
  --maw-text-lg: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);   /* lede 18–22px */
  --maw-text-2xl: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); /* 26–38px */
  --maw-text-3xl: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);     /* section titles 40–72px */
  --maw-text-4xl: clamp(3rem, 1.8rem + 4.6vw, 6rem);         /* home h1 48–96px */

  --maw-container: 80rem;               /* 1280px incl. gutters, as WP */
  --maw-gutter: clamp(1.25rem, 0.25rem + 3vw, 3rem);
  --maw-header-h: 4.75rem;              /* 76px */
  --maw-section-sm: clamp(2.5rem, 1.5rem + 3vw, 3.75rem);
  --maw-section-md: clamp(3.75rem, 1.5rem + 7vw, 8.75rem); /* 60 → 140px, like WP */
  --maw-section-lg: clamp(4rem, 2rem + 7vw, 8.75rem);

  --maw-radius: 3px;                    /* frames and cards are nearly square */
  --maw-radius-sm: 2px;
  --maw-radius-lg: 4px;
  --maw-shadow: 0 8px 20px rgb(31 30 27 / 0.08);
  --maw-shadow-lg: 0 16px 40px rgb(31 30 27 / 0.10);
  --maw-ease: ease;
  --maw-duration: 220ms;
}
/* The WP container is 1280px including its 48px side padding */
.container { width: min(100% - 2 * var(--maw-gutter), var(--maw-container) - 6rem); }

/* 2. Base type ------------------------------------------------------------- */
body { font-feature-settings: "ss01", "cv11"; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; letter-spacing: -0.02em; color: inherit; font-optical-sizing: auto; }
.stat__value, .compare td, .project-meta dd, .filter-pill__count, .rows .feature::before { font-variant-numeric: tabular-nums; }
h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); letter-spacing: -0.01em; line-height: 1.15; }
:is(h1, h2, h3, h4) em { font-style: italic; color: var(--plum); }
.section--bg-dark :is(h1, h2, h3, h4) em, .section--bg-dark .eyebrow::before, .site-footer--maw em { color: var(--plum-lift); background-color: transparent; }
.section--bg-dark .eyebrow::before { background: var(--plum-lift); }
.section-head h2 { font-size: var(--maw-text-3xl); line-height: 1.08; }
.section-head { max-width: 60rem; margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.section-head > * + * { margin-top: 1.5rem; }
.section-head .lead { margin-top: 1.5rem; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
/* Block-level links (cards, rows, tiles): never underline the whole block on hover; the title colour or border is the cue */
a.card, a.feature, a.article-row, a.related-card, a.project-row, a.team__link, a.gallery__link, .logos__item a,
a:has(> .card__body), a:has(> .card__media), a:has(> .feature__title), a:has(> h2), a:has(> h3), a:has(> img),
a.card:hover, a.feature:hover, a:hover:has(> .card__body), a:hover:has(> .card__media), a:hover:has(> h2), a:hover:has(> h3), a:hover:has(> img) { text-decoration: none; }
a.card:hover .card__title, a:hover:has(> .card__body) .card__title { color: var(--plum); }
/* Deliberate hovers: text links draw a plum underline left→right; buttons nudge their arrow; nothing magnetic */
.prose a, .site-footer__contact a, .feature__text a, .faq__answer a, .compare__footnote a, .lead a {
  text-decoration: none; background-image: linear-gradient(var(--plum), var(--plum)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%;
  transition: background-size 180ms ease, color 180ms ease;
}
.prose a:hover, .site-footer__contact a:hover, .feature__text a:hover, .faq__answer a:hover, .compare__footnote a:hover, .lead a:hover { background-size: 100% 1px; text-decoration: none; }
.prose a { background-size: 100% 1px; background-image: linear-gradient(var(--rule), var(--rule)); }
.prose a:hover { background-image: linear-gradient(var(--plum), var(--plum)); }
.btn-primary::after, .project-row__cta span, .project-next__link a span { transition: transform 220ms ease; }
.btn-primary:hover::after { transform: translateX(4px); }

/* Eyebrow: small sans with a plum dot */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--maw-font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: none; color: var(--ink-mute);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--plum); flex: none; }
.section--bg-dark .eyebrow { color: rgb(245 241 232 / 0.55); opacity: 1; }

/* Lede: light serif */
.lead { font-family: var(--maw-font-heading); font-weight: 300; font-size: var(--maw-text-lg); line-height: 1.55; color: var(--ink-soft); }
.section--bg-dark .lead { color: rgb(245 241 232 / 0.7); }

/* Small uppercase label (meta keys, column heads) */
.label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }

/* 3. Shared pieces --------------------------------------------------------- */
/* Category filter bar (Journal + Work listings; sticks under the header) */
.filter-bar { position: sticky; top: var(--maw-header-h); z-index: 40; background: var(--cream); border-block: 1px solid var(--rule); }
.filter-bar__inner { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.filter-bar__inner::-webkit-scrollbar { display: none; }
.filter-pill { position: relative; display: inline-block; padding: 22px 24px; border-right: 1px solid var(--rule); white-space: nowrap; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); transition: color 0.2s ease; }
.filter-pill:first-child { padding-left: 0; }
.filter-pill:last-child { border-right: 0; }
.filter-pill:hover { color: var(--ink); text-decoration: none; }
.filter-pill.is-active { color: var(--ink); font-weight: 600; }
.filter-pill.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--plum); }
.filter-pill__count { margin-left: 8px; font-family: var(--maw-font-mono); font-size: 11px; color: var(--ink-mute); }
@media (max-width: 860px) { .filter-pill { padding: 16px 14px; } }
.filter-bar__sep { width: 1px; height: 24px; margin: 0 8px; background: var(--rule); flex: none; }
.filter-pill--industry { color: var(--ink-mute); }

.tag-chip {
  display: inline-flex; align-items: center; padding: 6px 12px;
  border: 1px solid var(--rule); border-radius: 100px; background: var(--paper);
  font-family: var(--maw-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft);
}
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-mute); margin-bottom: 48px; }
.breadcrumb a { color: var(--ink-mute); }
.breadcrumb a:hover { color: var(--ink); text-decoration: none; }
.breadcrumb__sep { opacity: 0.5; }
.breadcrumb__current { color: var(--plum); }

/* 4. Buttons --------------------------------------------------------------- */
.btn {
  gap: 8px; padding: 15px 30px; border-radius: 100px; border: 1px solid transparent;
  font-family: var(--maw-font-body); font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  transition: background var(--maw-duration) ease, color var(--maw-duration) ease, border-color var(--maw-duration) ease;
}
.btn:hover { transform: none; text-decoration: none; }
.btn-lg { font-size: 15px; padding: 15px 34px; }
.btn-primary { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-primary:hover { background: var(--plum); border-color: var(--plum); color: var(--cream); }
.btn-primary::after { content: "→"; display: inline-block; transition: transform var(--maw-duration) ease; }
.btn-primary:hover::after { transform: translateX(3px); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn-ghost { color: var(--plum); padding-inline: 0; }
.btn-ghost:hover { background: none; text-decoration: underline; }
.button-row { gap: 12px; margin-top: 48px; }
/* On dark: primary turns cream, secondary is a cream outline */
.section--bg-dark .btn-primary { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.section--bg-dark .btn-primary:hover { background: var(--plum); border-color: var(--plum); color: var(--cream); }
.section--bg-dark .btn-secondary { background: transparent; color: var(--cream); border-color: rgb(245 241 232 / 0.3); }
.section--bg-dark .btn-secondary:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

/* 5. Section backgrounds + topo ------------------------------------------- */
/* Ink sections and the footer carry a near-subliminal grain (feTurbulence) so they don't read as flat "AI dark mode" */
.section--bg-dark, .site-footer--maw {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.95 0 0 0 0 0.91 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.section--bg-dark:not(.topo), .site-footer--maw { background-image: var(--grain); background-size: 240px 240px; }
.section--bg-dark {
  background-color: var(--ink); color: var(--cream);
  --maw-text: var(--cream); --maw-text-muted: rgb(245 241 232 / 0.65);
  --maw-border: rgb(245 241 232 / 0.1); --maw-surface: rgb(245 241 232 / 0.03); --maw-bg-alt: #2a2925;
  --maw-link: var(--cream);
}
.section--bg-soft { background: var(--paper); }
/* `section--divided`-style hairline between stacked light sections, as in WP */
.section.rule-top { border-top: 1px solid var(--rule); }

/* Topographic map background: add `topo` to a block's class setting */
.section.topo { position: relative; overflow: hidden; isolation: isolate; }
.section.topo::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to right, var(--paper) 0%, rgb(245 241 233 / 0.29) 100%), url("../../media/topo.webp") center / cover no-repeat;
  opacity: 0.1;
}
.section--bg-dark.topo::after { background: url("../../media/topo-dark.webp") center / cover no-repeat; }
.section--bg-dark.topo::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--grain) 0 0 / 240px 240px, linear-gradient(to right, var(--ink) 50%, rgb(10 10 10 / 0) 100%);
}
.section.topo > .container { position: relative; z-index: 1; }

/* Scroll-driven reveals: below-the-fold section heads, rows and cards ease in. Hero content never starts hidden (LCP). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section:not(.block--hero):not(:first-child) :is(.section-head, .feature, .card, .stat, .project-row, .article-row, .compare, .testimonial) {
      animation: maw-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 28%;
    }
    @keyframes maw-rise { from { opacity: 0.001; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  }
}

/* Browser frame for product screenshots: add `frame` to a media-text block. A 3-dot bar, hairline, no drop shadow. */
.frame .media-text__media { border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); overflow: hidden; }
.frame .media-text__media::before {
  content: ""; display: block; height: 28px; border-bottom: 1px solid var(--rule); background: var(--cream);
  background-image: radial-gradient(circle, var(--rule) 4px, transparent 4.5px), radial-gradient(circle, var(--rule) 4px, transparent 4.5px), radial-gradient(circle, var(--rule) 4px, transparent 4.5px);
  background-size: 12px 12px; background-repeat: no-repeat; background-position: 12px 8px, 26px 8px, 40px 8px;
}
.frame .media-text__media img, .frame .media-text__media .media-placeholder { border: 0; border-radius: 0; box-shadow: none; }
.frame .media-text__media .media-placeholder { aspect-ratio: 16 / 10; }
.frame[data-url]::after { content: none; }
/* Overlap variant: the framed screenshot drops half over the dark section that follows */
.frame.overlap { padding-bottom: 0; z-index: 2; position: relative; }
.frame.overlap .media-text__media { transform: translateY(clamp(2rem, 6vw, 5rem)); box-shadow: 0 24px 60px rgb(31 30 27 / 0.12); }
.frame.overlap + .section--bg-dark { padding-top: clamp(5rem, 4rem + 8vw, 9rem); }

/* Proof strip: hairline-bounded mono facts under a hero, with the CTA right after it */
.proof-strip { padding-block: 0; }
.proof-strip .stats { display: flex; flex-wrap: wrap; gap: 12px 40px; padding: 18px 0; border-block: 1px solid var(--rule); }
.proof-strip .stat { flex-direction: row; align-items: baseline; gap: 8px; }
.proof-strip .stat__value { font-family: var(--maw-font-mono); font-size: 13px; font-weight: 600; color: var(--plum); letter-spacing: 0.02em; margin: 0; }
.proof-strip .stat__label { font-family: var(--maw-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin: 0; }
.proof-strip + .section { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* Single-stat hero: one huge serif numeral in plum italic beside a one-line claim */
.stat-single { padding-top: 0; }
.stat-single .stats { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 40px; padding: clamp(2rem, 1rem + 3vw, 3.5rem) 0; border-top: 1px solid var(--rule); }
.stat-single .stat { display: contents; }
.stat-single .stat__value { font-family: var(--maw-font-heading); font-style: italic; font-weight: 300; font-size: clamp(4.5rem, 2.5rem + 6vw, 8rem); line-height: 0.82; letter-spacing: -0.04em; color: var(--plum); margin: 0; grid-row: 1 / span 2; align-self: end; }
.stat-single .stat__label { font-family: var(--maw-font-heading); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.3; color: var(--ink); max-width: 34ch; margin: 0; align-self: end; }
.stat-single .stat__text { grid-column: 2; align-self: start; font-size: 14px; color: var(--ink-mute); margin-top: 10px; }
@media (max-width: 640px) { .stat-single .stats { grid-template-columns: 1fr; } .stat-single .stat__text { grid-column: 1; } }

/* Live "operating now" line in the footer */
.site-footer__live { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-family: var(--maw-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(245 241 232 / 0.45); }
.site-footer__live b { font-weight: 500; color: rgb(245 241 232 / 0.8); }
.site-footer__live b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #3ecf8e; margin-right: 8px; vertical-align: 1px; }

/* Sticky bottom CTA on small screens (hidden while the page's own CTA buttons are on screen, and on contact pages) */
.sticky-cta { display: none; }
@media (max-width: 860px) {
  .sticky-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px; background: var(--ink); color: var(--cream); border-top: 1px solid rgb(245 241 232 / 0.12); transform: translateY(100%); transition: transform 240ms ease; }
  .js .sticky-cta.is-shown { transform: none; }
  .sticky-cta__text { font-size: 13px; color: rgb(245 241 232 / 0.75); }
  .sticky-cta .btn { padding: 10px 18px; font-size: 14px; background: var(--cream); color: var(--ink); border-color: var(--cream); }
  .sticky-cta .btn::after { content: "→"; }
  body.has-sticky-cta { padding-bottom: 64px; }
}

/* 6. Header ---------------------------------------------------------------- */
.site-header { border-bottom: 1px solid transparent; transition: border-color 0.3s ease; }
.site-header::before { background: var(--cream); backdrop-filter: none; transition: background 0.3s ease; }
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.site-header.is-scrolled::before { background: rgb(245 241 232 / 0.92); backdrop-filter: blur(8px); }
.site-logo img { height: 28px; }
.site-nav { margin-left: auto; }
.nav-list { gap: 36px; }
.nav-list a { padding: 0; border-radius: 0; font-size: 14px; font-weight: 500; color: var(--ink-soft); background: none; transition: color 0.2s ease; }
.nav-list a:hover, .nav-list a[aria-current="page"], .nav-list .is-active > a { background: none; color: var(--ink); text-decoration: none; }
/* "Contact us" is a button-styled item in the header menu (Admin2 → Menus → Header) */
.nav-list .menu-item--button > a { padding: 10px 20px; border: 1px solid var(--ink); border-radius: 100px; background: transparent; color: var(--ink); transition: background 0.2s ease, color 0.2s ease; }
.nav-list .menu-item--button > a:hover, .nav-list .menu-item--button > a[aria-current="page"] { background: var(--ink); color: var(--cream); }
.nav-toggle { color: var(--ink); }
/* Services dropdown (MAW Menus children). The theme opens `.nav-list ul` on hover / focus-within. */
.nav-list .has-children > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-list .has-children > a::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; }
.nav-list .has-children:is(:hover, :focus-within) > a::after { transform: translateY(1px) rotate(225deg); }
.nav-list ul { min-width: 17rem; padding: 10px; background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; box-shadow: 0 16px 40px rgb(31 30 27 / 0.10); left: -10px; top: calc(100% + 14px); }
.nav-list ul::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-list ul a { display: block; padding: 9px 12px; border-radius: 3px; font-size: 14px; color: var(--ink); }
.nav-list ul a:hover, .nav-list ul a[aria-current="page"] { background: var(--cream); color: var(--plum); }
@media (min-width: 861px) { .site-header__actions:not(:has(> :not(.nav-toggle))) { margin-left: 0; } }
@media (max-width: 860px) {
  .site-header__actions { margin-left: auto; }
  .site-nav { background: var(--cream); }
  .nav-list { gap: 0; }
  .nav-list a { font-family: var(--maw-font-heading); font-size: 1.75rem; color: var(--ink); padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
  .nav-list .has-children > a { display: block; }
  .nav-list .has-children > a::after { content: none; }
  .nav-list ul { min-width: 0; padding: 0 0 0.5rem 1rem; background: transparent; border: 0; box-shadow: none; }
  .nav-list ul::before { content: none; }
  .nav-list ul a { font-family: var(--maw-font-body); font-size: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft); }
  .nav-list .menu-item--button { margin-top: 1.5rem; }
  .nav-list .menu-item--button > a { display: inline-block; font-family: var(--maw-font-body); font-size: 15px; padding: 14px 28px; border-bottom: 1px solid var(--ink); }
}

/* 7. Footer ---------------------------------------------------------------- */
.site-footer--maw { background: var(--ink); color: var(--cream); padding: 80px 0 32px; border-top: 1px solid rgb(245 241 232 / 0.08); font-size: 14px; }
.site-footer--maw a { color: rgb(245 241 232 / 0.7); text-decoration: none; transition: color 0.2s ease; }
.site-footer--maw a:hover { color: var(--cream); }
.site-footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; padding-bottom: 64px; }
.site-footer__logo img { height: 60px; width: auto; }
.site-footer__tagline { font-family: var(--maw-font-heading); font-weight: 300; font-size: 20px; line-height: 1.4; color: rgb(245 241 232 / 0.85); margin-top: 28px; max-width: 30ch; }
.site-footer__contact { margin-top: 24px; line-height: 1.7; color: rgb(245 241 232 / 0.55); }
.site-footer__contact a { color: rgb(245 241 232 / 0.85); }
.site-footer__contact a:hover { color: var(--plum); }
.site-footer__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.site-footer__heading { font-family: var(--maw-font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(245 241 232 / 0.4); margin-bottom: 20px; }
.site-footer__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 32px; border-top: 1px solid rgb(245 241 232 / 0.08); }
.site-footer__copy { font-size: 12.5px; color: rgb(245 241 232 / 0.3); }
.site-footer__legal { display: flex; gap: 24px; list-style: none; padding: 0; }
.site-footer__legal a { font-size: 12.5px; color: rgb(245 241 232 / 0.4); }
@media (max-width: 1024px) { .site-footer__top { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 640px) { .site-footer__nav { grid-template-columns: 1fr 1fr; } }

/* 8. Prose ------------------------------------------------------------------ */
.prose { font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.prose :is(h2, h3, h4) { color: var(--ink); line-height: 1.2; }
.prose h2 { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }
.prose h3 { font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.625rem); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--plum); text-decoration: underline; text-underline-offset: 0.2em; }
.prose blockquote { border-left: 2px solid var(--plum); padding-left: 1.5rem; font-family: var(--maw-font-heading); font-style: italic; font-size: 1.25em; color: var(--ink); }
.prose :not(pre) > code { background: var(--paper); border-color: var(--rule); }
.prose hr { border-color: var(--rule); }
.prose table { font-size: 15px; margin-block: 1.5em; }
.prose th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); border-bottom: 2px solid var(--rule); }
.prose td { border-color: var(--rule); vertical-align: top; }
.prose--legal { max-width: 46rem; }
.prose--legal h2 { margin-top: 2.2em; font-size: 1.6rem; }
.prose .updated { font-size: 13px; color: var(--ink-mute); }
/* The default page template (legal pages): breadcrumb + title + prose */
.template-default .page-header h1 { font-size: var(--maw-text-3xl); line-height: 1.08; max-width: 24ch; }
.template-default .page-body { padding-top: 56px; }
.template-default .breadcrumbs ol { list-style: none; padding: 0; display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-mute); margin-bottom: 48px; }
.template-default .breadcrumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }
.template-default .breadcrumbs a { color: var(--ink-mute); }
/* Placeholder text that Nick replaces (quotes, bios): visible but obviously not final */
.is-placeholder { outline: 1px dashed var(--plum); outline-offset: 4px; }

/* 9. Interior page header (portfolio, case study, blog) -------------------- */
.interior-hero { padding: 56px 0 96px; border-bottom: 1px solid var(--rule); }
.interior-hero .breadcrumb { margin-bottom: 64px; }
.interior-hero .eyebrow { margin-bottom: 28px; }
.interior-hero__title { font-size: var(--maw-text-3xl); line-height: 1.08; max-width: 22ch; margin-bottom: 24px; }
.interior-hero__lede { max-width: 56ch; }
.interior-hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.interior-hero--listing { padding-bottom: 64px; }
.interior-hero--project { padding-bottom: 56px; border-bottom: 0; }
.interior-hero--project .interior-hero__title { max-width: 24ch; }
.interior-hero--project .interior-hero__lede { max-width: 60ch; margin-bottom: 48px; }

/* Key/value meta: mono keys, serif values */
.project-meta dt { font-family: var(--maw-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.project-meta dd { margin: 0; font-family: var(--maw-font-body); font-size: 15px; color: var(--ink); line-height: 1.35; }
.project-meta--hero { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 32px; border-top: 1px solid var(--rule); }
.project-meta--hero > div { padding-inline: 24px; border-left: 1px solid var(--rule); }
.project-meta--hero > div:first-child { padding-left: 0; border-left: 0; }
.project-meta--hero dt { margin-bottom: 8px; }
.project-meta--hero dd { font-size: 17px; }
@media (max-width: 1024px) {
  .project-meta--hero { grid-template-columns: 1fr 1fr; gap: 24px; }
  .project-meta--hero > div { border-left: 0; padding-left: 0; }
}

/* 10. Portfolio listing ---------------------------------------------------- */
.projects-list { padding-bottom: var(--maw-section-md); }
.project-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; padding: 72px 0; border-top: 1px solid var(--rule); color: inherit; }
.project-row:first-child { border-top: 0; }
.project-row:last-child { border-bottom: 1px solid var(--rule); }
.project-row:hover { text-decoration: none; }
.project-row:nth-child(even) .project-row__media { order: 2; }
.project-row__media { position: relative; aspect-ratio: 4 / 3; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.project-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s ease; }
.project-row:hover .project-row__media img { transform: scale(1.03); }
.project-row__media-tag { position: absolute; top: 16px; left: 16px; z-index: 2; padding: 5px 12px; border: 1px solid var(--rule); border-radius: 100px; background: var(--cream); font-family: var(--maw-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.project-row__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.project-row__title { font-family: var(--maw-font-body); font-weight: 400; font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.625rem); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 18px; }
.project-row__desc { font-size: 16px; line-height: 1.7; color: var(--ink-soft); max-width: 48ch; margin-bottom: 28px; }
.project-row__meta { display: flex; flex-wrap: wrap; gap: 28px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.project-row__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--plum); transition: gap 0.22s ease; }
.project-row:hover .project-row__cta { gap: 12px; }
@media (max-width: 1024px) {
  .project-row { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .project-row:nth-child(even) .project-row__media { order: 0; }
}

/* 11. Case study ----------------------------------------------------------- */
.project-frame { display: block; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.project-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.project-feature { padding-bottom: var(--maw-section-md); }
.project-frame--feature { aspect-ratio: 16 / 10; }
.project-overview { padding-bottom: var(--maw-section-md); }
.project-overview__inner { display: grid; grid-template-columns: 260px 1fr; gap: 96px; align-items: start; }
.project-overview__head .eyebrow { margin-bottom: 24px; }
.project-overview__head h2 { font-family: var(--maw-font-body); font-size: clamp(1.625rem, 1.3rem + 0.8vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; max-width: 18ch; }
.project-overview__body { max-width: 58ch; font-size: 16px; line-height: 1.7; }
.project-overview__body em { font-family: var(--maw-font-heading); color: var(--ink); }
.project-gallery { padding-block: var(--maw-section-md); background: var(--cream-deep); border-block: 1px solid var(--rule); }
.project-gallery .section-head { margin-bottom: 56px; }
.project-gallery .section-head h2 { font-size: var(--maw-text-2xl); }
.project-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.project-gallery__item { display: flex; flex-direction: column; gap: 14px; }
.project-gallery__item .project-frame { aspect-ratio: 4 / 3; }
.project-gallery__cap { font-family: var(--maw-font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.project-testimonial { padding-block: var(--maw-section-md); background: var(--paper); }
.project-testimonial__inner { max-width: 780px; text-align: center; }
.project-testimonial__mark { font-family: var(--maw-font-heading); font-style: italic; font-size: 56px; line-height: 1; color: var(--plum); margin-bottom: 16px; }
.project-testimonial__quote { border: 0; padding: 0; font-family: var(--maw-font-heading); font-weight: 300; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 28px; }
.project-testimonial__author { font-size: 14px; font-weight: 600; }
.project-testimonial__role { font-size: 13px; color: var(--ink-mute); margin-top: 4px; }
.project-next { padding-block: var(--maw-section-md); }
.project-next__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 32px; padding-top: 48px; border-top: 1px solid var(--rule); }
.project-next .button-row { margin-top: 0; }
.project-next__link { display: flex; flex-direction: column; gap: 6px; }
.project-next__link .label { font-family: var(--maw-font-mono); font-weight: 400; font-size: 10px; letter-spacing: 0.1em; }
.project-next__link a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--maw-font-heading); font-size: 22px; color: var(--ink); transition: gap 0.22s ease; }
.project-next__link a:hover { gap: 14px; color: var(--plum); text-decoration: none; }
@media (max-width: 1024px) {
  .project-overview__inner { grid-template-columns: 1fr; gap: 32px; }
  .project-gallery__grid { grid-template-columns: 1fr; }
  .project-next__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) { .project-frame--feature { aspect-ratio: 4 / 3; } }

/* No image yet: collapse the empty slot instead of showing the theme's grey placeholder box */
.media-placeholder { display: none; }
.split:has(> .media-text__media > .media-placeholder) { grid-template-columns: 1fr; }
.split:has(> .media-text__media > .media-placeholder) > .media-text__media { display: none; }
.team__photo:has(.media-placeholder) { display: none; }
.split:has(> .media-text__media .media-placeholder) { grid-template-columns: 1fr; }
.split:has(> .media-text__media .media-placeholder) > .media-text__media { display: none; }