/* Generated by node scripts/build-css.mjs — edit assets/css/system/*.css */

/* fonts */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* tokens */
:root {
  color-scheme: dark;
  --color-bg: #09111d;
  --color-surface: #0d1728;
  --color-surface-alt: #132035;
  --color-ink: #060b12;
  --color-inverse-text: #eef4ff;
  --color-inverse-muted: #a7b5ce;
  --color-inverse-accent: #23c4ff;
  --color-text: #eef4ff;
  --color-text-muted: #a7b5ce;
  --color-accent: #23c4ff;
  --color-line: rgba(255,255,255,.12);
  --color-focus: #23c4ff;
  --nav-active-bg: var(--color-surface-alt);
  --nav-hover-bg: var(--color-surface);
  --dropdown-bg: var(--color-surface);
  --dropdown-shadow: 0 8px 24px rgb(0 0 0 / .08);
  --color-band-bg: var(--color-ink);
  --color-band-text: var(--color-inverse-text);
  --color-band-muted: var(--color-inverse-muted);
  --color-band-accent: var(--color-inverse-accent);
  --color-band-line: rgb(238 244 255 / .18);
  --color-toggle-bg: #eef4ff;
  --color-toggle-icon: #334155;
  --color-error: #ffadb5;
  --color-success: #91e2bd;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-display: "Sora", "Manrope", system-ui, sans-serif;
  --text-h1: clamp(42px, 4.6vw, 72px);
  --text-h2: clamp(32px, 3.2vw, 50px);
  --text-h3: clamp(23px, 2.3vw, 32px);
  --text-h4: 20px;
  --text-lead: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-label: 12px;
  --space-section: clamp(88px, 8vw, 132px);
  --space-block: 48px;
  --space-component: 24px;
  --space-inline: 12px;
  --gutter: 48px;
  --content-width: 1360px;
  --content-wide: 1536px;
  --article-width: 760px;
  --content-intro-width: 960px;
  --hero-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  --hero-media-width: 100%;
  --hero-media-max-width: 640px;
  --hero-media-ratio: 4 / 3;
  --hero-copy-width: 19ch;
  --hero-lead-width: 56ch;
  --media-landscape-ratio: 4 / 3;
  --media-square-ratio: 1;
  --media-wide-ratio: 16 / 9;
  --media-project-ratio: 16 / 10;
  --media-blog-featured: 16 / 10;
  --media-blog-list: 3 / 2;
  --section-xs: 24px;
  --section-sm: 48px;
  --section-md: clamp(56px, 6vw, 80px);
  --section-lg: clamp(72px, 8vw, 112px);
  --section-xl: clamp(96px, 11vw, 160px);
  --text-article-title: clamp(40px, 4vw, 64px);
  --text-display: clamp(48px, 6vw, 90px);
  --text-statement: clamp(36px, 4.6vw, 70px);
  --space-block-lg: 64px;
  --space-section-sm: 80px;
  --space-statement: clamp(100px, 12vw, 190px);
  --radius-sm: 3px;
  --radius-control: 4px;
  --transition-fast: 200ms;
  --transition-base: 280ms;
  --transition-image: 400ms;
  --ease-out: cubic-bezier(.2,.75,.25,1);
}
html.theme-light {
  color-scheme: light;
  --color-bg: #f6f5f2;
  --color-surface: #eceae5;
  --color-surface-alt: #e3e1dc;
  --color-text: #111318;
  --color-text-muted: #62666f;
  --color-accent: #554bd8;
  --color-line: rgba(17,19,24,.14);
  --color-focus: #554bd8;
  --nav-active-bg: #e9e8e5;
  --nav-hover-bg: #efede9;
  --dropdown-bg: #f1f0ec;
  --dropdown-shadow: 0 8px 24px rgb(17 19 24 / .05);
  --color-band-bg: var(--color-surface);
  --color-band-text: var(--color-text);
  --color-band-muted: var(--color-text-muted);
  --color-band-accent: var(--color-accent);
  --color-band-line: var(--color-line);
  --color-toggle-bg: var(--color-text);
  --color-toggle-icon: var(--color-bg);
  --color-error: #a72337;
  --color-success: #176343;
}
@media (max-width: 890px) { :root { --gutter: 24px; --space-block: 36px; } }
@media (max-width: 560px) { :root { --gutter: 20px; --space-section: 72px; --text-h1: 40px; --text-lead: 17px; } }
@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0s; --transition-base: 0s; --transition-image: 0s; }
}


/* base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: var(--text-body)/1.6 var(--font-body); letter-spacing: -.004em; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 5px; }
::selection { background: var(--color-accent); color: var(--color-bg); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; letter-spacing: -.045em; text-wrap: balance; margin: 0; overflow-wrap: break-word; }
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.4em; }
figure { margin: 0; }
[hidden] { display: none; }
.site-main { min-height: calc(100vh - 78px); }
.container { width: min(calc(100% - var(--gutter) * 2), var(--content-width)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 20px; background: var(--color-text); color: var(--color-bg); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* shell */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg); border-bottom: 1px solid var(--color-line); }
.header-bar { min-height: 78px; display: flex; align-items: center; gap: var(--space-component); }
.brand, .footer-brand { display: inline-flex; gap: 14px; }
.brand-mark { position: relative; width: 44px; height: 44px; flex: 0 0 44px; }
.brand-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.logo-light, .theme-icon-sun { display: none; }
html.theme-light .logo-dark, html.theme-light .theme-icon-moon { display: none; }
html.theme-light .logo-light, html.theme-light .theme-icon-sun { display: block; }
.brand-text { display: grid; gap: 2px; }
.brand-text strong { font: 600 .96rem/1.1 var(--font-display); letter-spacing: -.02em; }
.brand-text small { font-size: .82rem; color: var(--color-text-muted); }
.brand-text p { margin: 0; }
.site-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-nav a { display: block; padding: 9px 13px; color: var(--color-text-muted); border-radius: var(--radius-control); transition: color var(--transition-fast); }
.site-nav a:hover { color: var(--color-text); background: var(--nav-hover-bg); }
.site-nav > a.is-active, .nav-dropdown-trigger.is-active { color: var(--color-text); background: var(--nav-active-bg); font-weight: 600; }
.site-nav a:focus-visible, .nav-dropdown-toggle:focus-visible { outline-offset: 2px; }
.nav-dropdown { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.nav-dropdown-menu { position: absolute; top: 100%; left: 0; width: 320px; padding: 12px; background: var(--dropdown-bg); border: 1px solid var(--color-line); box-shadow: var(--dropdown-shadow); visibility: hidden; opacity: 0; transition: opacity var(--transition-fast), visibility var(--transition-fast); }
html:not(.js) .nav-dropdown:hover .nav-dropdown-menu, html:not(.js) .nav-dropdown:focus-within .nav-dropdown-menu, .nav-dropdown.is-open .nav-dropdown-menu { visibility: visible; opacity: 1; }
.nav-dropdown-toggle { display: none; align-items: center; justify-content: center; padding: 0; width: 28px; height: 44px; border: 0; border-radius: var(--radius-control); color: var(--color-text-muted); background: transparent; }
.js .nav-dropdown-toggle { display: inline-flex; }
.nav-dropdown-toggle .icon { font-size: 11px; transition: transform var(--transition-fast); }
.nav-dropdown-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-dropdown-toggle:hover { color: var(--color-text); background: var(--nav-hover-bg); }
.nav-dropdown-menu a { position: relative; border-radius: var(--radius-sm); }
.nav-dropdown-menu a[aria-current="page"] { background: transparent; color: var(--color-text); }
.nav-dropdown-menu a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; background: var(--color-accent); }
.nav-dropdown-menu a[aria-current="page"] .dropdown-title { font-weight: 700; }
.nav-dropdown-menu a[aria-current="page"]:hover { background: var(--nav-hover-bg); }
.dropdown-title { display: block; font-size: 14px; color: var(--color-text); }
.dropdown-desc { display: block; font-size: 12px; margin-top: 4px; color: var(--color-text-muted); }
.nav-toggle { display: none; color: var(--color-text); border: 0; border-radius: var(--radius-control); width: 48px; height: 48px; background: var(--color-surface-alt); padding: 14px; }
.theme-toggle { width: 64px; height: 40px; flex: 0 0 64px; padding: 0; border: 0; background: transparent; }
.theme-toggle-track { display: block; position: relative; width: 64px; height: 36px; border-radius: 20px; border: 1px solid var(--color-line); background: var(--color-surface-alt); }
.theme-toggle-thumb { display: grid; place-items: center; position: absolute; top: 2px; left: 3px; width: 30px; height: 30px; border-radius: 50%; background: var(--color-toggle-bg); color: var(--color-toggle-icon); transition: transform var(--transition-base); }
html.theme-light .theme-toggle-thumb { transform: translateX(26px); }
.theme-toggle:hover .theme-toggle-track { border-color: var(--color-text-muted); }
.theme-toggle:focus-visible { border-radius: var(--radius-control); }
.site-footer { padding: 40px 0 26px; background: var(--color-bg); border-top: 1px solid var(--color-line); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; padding-bottom: 26px; }
.footer-col .footer-heading { margin-bottom: 12px; font-size: 16px; }
.footer-col p, .footer-col li { color: var(--color-text-muted); }
.footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-bottom { border-top: 1px solid var(--color-line); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--color-text-muted); font-size: 14px; }
.footer-bottom p { margin: 0; }
.footer-bottom-links { display: flex; gap: 12px 18px; flex-wrap: wrap; }
.footer-cookie-link { border: 0; padding: 0; background: transparent; color: inherit; }
.site-footer a:hover, .footer-cookie-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.cookie-banner { position: fixed; z-index: 80; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 36px), 420px); }
.cookie-banner__inner { padding: 22px; border: 1px solid var(--color-line); border-radius: var(--radius-control); background: var(--color-surface); }
.cookie-banner__content p { color: var(--color-text-muted); font-size: 14px; margin: 8px 0 20px; }
.cookie-banner__actions { display: flex; justify-content: flex-end; gap: var(--space-inline); }
.scroll-top-fab { display: grid; place-items: center; position: fixed; right: 24px; bottom: 24px; z-index: 40; width: 48px; height: 48px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-line); opacity: 0; visibility: hidden; transition: opacity var(--transition-fast), visibility var(--transition-fast); }
.scroll-top-fab.is-visible { opacity: 1; visibility: visible; }
.scroll-top-fab__icon { display: grid; place-items: center; width: 22px; height: 22px; line-height: 1; }
.scroll-top-fab__icon .icon { display: block; width: 18px; height: 18px; }
@media (max-width: 890px) {
  .header-bar { flex-wrap: wrap; gap: var(--space-inline); }
  .js .nav-toggle { display: block; margin-left: auto; }
  .site-nav { display: block; order: 4; width: 100%; margin: 0; padding-bottom: 20px; max-height: calc(100svh - 90px); overflow-y: auto; }
  .js .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 12px max(5vw, calc((100vw - 1360px) / 2)) max(20px, env(safe-area-inset-bottom, 0px)); max-height: calc(100svh - 79px); max-height: calc(100dvh - 79px); background: var(--color-bg); border-bottom: 1px solid var(--color-line); box-shadow: var(--dropdown-shadow); overscroll-behavior-y: contain; }
  .js .site-nav.is-open { display: block; }
  .nav-dropdown-menu { position: static; visibility: visible; opacity: 1; width: auto; border: 0; border-left: 1px solid var(--color-line); margin-left: 14px; background: none; box-shadow: none; padding: 0 0 0 8px; flex-basis: calc(100% - 14px); }
  .js .nav-dropdown-menu { display: none; }
  .js .nav-dropdown.is-open .nav-dropdown-menu { display: block; }
  .dropdown-desc { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col:first-child { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .header-bar { min-height: 74px; }
  .js .site-nav { max-height: calc(100svh - 75px); max-height: calc(100dvh - 75px); }
  .brand-mark { width: 42px; height: 42px; flex-basis: 42px; }
  .brand-text small { font-size: .76rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .cookie-banner__inner { padding: 16px; }
}


/* components */
.section { padding-block: var(--space-section); scroll-margin-top: 100px; }
.section-head { margin-bottom: var(--space-block); max-width: var(--content-intro-width); }
.section-head p { max-width: 65ch; margin: 24px 0 0; color: var(--color-text-muted); font-size: var(--text-lead); line-height: 1.8; }
.eyebrow, .project-tag { display: block; color: var(--color-text-muted); font-size: var(--text-label); font-weight: 600; text-transform: uppercase; letter-spacing: .09em; line-height: 1.8; }
.lead { color: var(--color-text-muted); font-size: var(--text-lead); line-height: 1.8; max-width: 56ch; margin: 28px 0 0; }
.lead a, .section-head p a { text-decoration: underline; text-underline-offset: 4px; }
.hero-actions, .cta-actions, .article-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 17px 24px; min-height: 50px; border: 1px solid transparent; border-radius: var(--radius-control); font-size: 14px; font-weight: 700; text-align: center; line-height: 1.5; transition: background var(--transition-fast), color var(--transition-fast); }
.btn-primary { background: var(--color-text); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent); color: var(--color-bg); }
.btn-secondary { border-color: var(--color-line); color: var(--color-text); background: transparent; }
.btn-secondary:hover { background: var(--color-surface-alt); }
.btn-sm { padding: 12px 18px; }
.btn:disabled { cursor: wait; opacity: .55; }
.arrow-link { display: inline-flex; align-items: center; gap: 20px; padding-block: 12px; font-weight: 600; font-size: 14px; }
.arrow-link-label { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--color-text-muted); }
.arrow-link > [aria-hidden] { display: inline-block; transition: transform var(--transition-base); }
.arrow-link:hover > [aria-hidden] { transform: translate(3px, -3px); }
.arrow-link:hover .arrow-link-label { text-decoration-color: currentColor; }
.grid { display: grid; gap: 40px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.feature-item { border-top: 1px solid var(--color-line); padding-top: 26px; min-width: 0; }
.feature-item h3 { margin-bottom: 18px; }
.feature-item p { color: var(--color-text-muted); line-height: 1.8; }
.feature-number { color: var(--color-accent); font-size: 13px; font-variant-numeric: tabular-nums; margin-bottom: 28px; }
.feature-media { overflow: hidden; margin-bottom: 24px; border-radius: var(--radius-sm); }
.feature-media img { width: 100%; aspect-ratio: var(--media-landscape-ratio); object-fit: cover; }
.feature-item .project-tag { margin-bottom: 20px; }
.principle-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.principle-item { border-top: 1px solid var(--color-line); padding-top: 24px; }
.principle-item p { color: var(--color-text-muted); font-size: 18px; line-height: 1.8; }
.principle-item strong { font-size: 14px; }
.final-cta { border-block: 1px solid var(--color-line); padding-block: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.final-cta h2 { max-width: 22ch; }
.final-cta p { color: var(--color-text-muted); max-width: 65ch; margin: 24px 0 0; }
.final-cta .cta-actions { flex-direction: column; align-items: stretch; margin: 0; }
.faq-list { border-top: 1px solid var(--color-line); }
.faq-list details { border-bottom: 1px solid var(--color-line); padding-block: 22px; }
.faq-list summary { cursor: pointer; font-family: var(--font-display); font-size: 20px; padding-right: 20px; }
.faq-list details > :not(summary) { margin-top: 20px; }
.media-block { margin-block: var(--space-block); }
.media-block img { width: 100%; border-radius: var(--radius-sm); }
.media-block figcaption { margin-top: 14px; color: var(--color-text-muted); font-size: 13px; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 890px) {
  .feature-list, .grid-3, .principle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .final-cta { grid-template-columns: 1fr; gap: 28px; }
  .final-cta .cta-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .feature-list, .grid-3, .grid-4, .principle-list { grid-template-columns: 1fr; }
  .hero-actions { gap: var(--space-inline); }
  .final-cta { padding-block: 40px; }
}
.proof-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 28px; }
.proof-links .eyebrow { flex-basis: 100%; }


/* hero */
/* One media system. Content purpose, never a page name, selects the variant. */
.editorial-hero { padding-block: var(--space-block-lg) 72px; border-bottom: 1px solid var(--color-line); }
.editorial-hero-grid { display: grid; grid-template-columns: var(--hero-columns); align-items: center; gap: var(--space-block-lg); }
.editorial-hero-grid > * { min-width: 0; }
.editorial-hero h1 { max-width: var(--hero-copy-width); }
.editorial-hero .lead { max-width: var(--hero-lead-width); }
.editorial-hero .eyebrow { margin-bottom: var(--space-component); }
.editorial-hero-media { width: var(--hero-media-width); max-width: var(--hero-media-max-width); min-width: 0; aspect-ratio: var(--hero-media-ratio); overflow: hidden; border-radius: var(--radius-sm); background: var(--hero-media-surface, var(--color-surface)); }
.editorial-hero-media img { display: block; width: 100%; height: 100%; object-fit: var(--hero-media-fit, cover); object-position: var(--hero-media-focus, center); }
.editorial-hero-media[data-focus="top"] { --hero-media-focus: center 25%; }
.editorial-hero-media[data-focus="bottom"] { --hero-media-focus: center 75%; }
.editorial-hero--text { --hero-columns: minmax(0, 1fr); }
.editorial-hero--display { --hero-copy-width: 18ch; --hero-lead-width: 68ch; }
.editorial-hero--display h1 { font-size: var(--text-display); }
.editorial-hero--article { --hero-columns: minmax(0, 1fr); --hero-media-max-width: 100%; --hero-media-ratio: var(--media-wide-ratio); --hero-copy-width: 24ch; --hero-lead-width: 68ch; }
.editorial-hero--article .editorial-hero-grid { max-width: var(--content-intro-width); margin-inline: auto; gap: var(--space-block); }
.editorial-hero--article h1, .editorial-hero--reading h1 { font-size: var(--text-article-title); }
.editorial-hero--article .article-meta { font-size: var(--text-small); padding-top: var(--space-component); margin-top: var(--space-component); border-top: 1px solid var(--color-line); }
.editorial-hero--reading .editorial-hero-grid { max-width: var(--article-width); margin-inline: auto; }
.editorial-hero--portfolio { --hero-columns: minmax(0, 1.5fr) minmax(0, .7fr); --hero-media-max-width: 100%; --hero-media-ratio: auto; --hero-media-fit: contain; --hero-media-surface: transparent; }
.editorial-hero--portfolio .editorial-hero-media img { height: auto; }
.editorial-hero--portfolio h1 { font-size: var(--text-display); }
@media (max-width: 1100px) { .editorial-hero-grid { gap: var(--space-block); } }
@media (max-width: 890px) {
 .editorial-hero { --hero-columns: minmax(0, 1fr); --hero-media-max-width: 100%; }
 .editorial-hero-grid { gap: var(--space-block); }
}
@media (max-width: 560px) { .editorial-hero { padding-block: 40px 56px; } }


/* forms */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 72px; margin-top: 64px; align-items: start; }
.contact-block h2, .contact-block h3 { margin-bottom: 22px; }
.contact-block p { color: var(--color-text-muted); }
.contact-block a:not(.btn) { text-decoration: underline; text-underline-offset: 4px; }
.contact-grid { border-block: 1px solid var(--color-line); padding-block: 32px; }
.contact-checklist { list-style: none; padding: 0; margin-block: 24px; display: grid; gap: var(--space-inline); color: var(--color-text-muted); }
.contact-form { display: grid; gap: var(--space-component); margin-top: 32px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-component); }
.form-field { min-width: 0; }
.form-field label { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.field-control input, .field-control select, .field-control textarea { width: 100%; min-height: 52px; border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-control); padding: 14px 16px; }
.field-control textarea { resize: vertical; min-height: 180px; }
.field-control input:focus, .field-control select:focus, .field-control textarea:focus { border-color: var(--color-focus); }
.field-control :disabled { opacity: .6; cursor: not-allowed; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-accent); width: 20px; height: 20px; vertical-align: middle; }
.form-honeypot { display: none; }
.form-field:has([aria-invalid="true"]) label, .field-error { color: var(--color-error); }
.field-control [aria-invalid="true"] { border-color: var(--color-error); }
.field-error { display: block; font-size: 13px; margin-top: 8px; }
.form-message { position: relative; padding: 20px 48px 20px 20px; border: 1px solid var(--color-line); background: var(--color-surface); }
.form-message.is-error { color: var(--color-error); }
.form-message.is-success { color: var(--color-success); }
.form-message-close { position: absolute; right: 12px; top: 12px; color: inherit; border: 0; background: transparent; padding: 6px; }
@media (max-width: 890px) { .contact-layout { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.contact-media { margin-bottom: 28px; }
.contact-media img { width: 100%; aspect-ratio: var(--media-landscape-ratio); object-fit: cover; border-radius: var(--radius-sm); }

.field-control input::placeholder, .field-control textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.field-control input:autofill { background: var(--color-surface); color: var(--color-text); box-shadow: 0 0 0 1000px var(--color-surface) inset; }
.field-control input:-webkit-autofill { -webkit-text-fill-color: var(--color-text); caret-color: var(--color-text); box-shadow: 0 0 0 1000px var(--color-surface) inset; }


/* archetypes */
/* Reading surfaces share typography, not the homepage's display scale. */
.prose { max-width: var(--article-width); margin-inline: auto; font-size: 18px; line-height: 1.85; overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(28px, 2.7vw, 38px); margin-block: var(--section-lg) var(--section-xs); letter-spacing: -.035em; }
.prose h3 { font-size: clamp(23px, 2.2vw, 28px); margin-block: 40px 20px; }
.prose p, .prose ul, .prose ol { margin-block: 0 24px; }
.prose li + li { margin-top: 10px; }
.prose p, .prose li { color: var(--color-text-muted); }
.prose strong { color: var(--color-text); font-weight: 700; }
.prose a:not(.btn):not(.arrow-link) { color: var(--color-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-text-muted); }
.prose blockquote { border-left: 2px solid var(--color-accent); padding-left: 28px; margin: 40px 0; font-size: 22px; }
.prose img { border-radius: var(--radius-sm); }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 16px; text-align: left; border: 1px solid var(--color-line); min-width: 140px; }
.prose code { font-family: ui-monospace, monospace; font-size: .88em; }
.prose pre { max-width: 100%; overflow-x: auto; padding: 24px; background: var(--color-surface); line-height: 1.65; font-size: 14px; }
.article-callout { border-left: 2px solid var(--color-accent); padding: 24px 28px; margin-block: 36px; background: var(--color-surface); }
.article-callout > :last-child { margin-bottom: 0; }
.article-lead { font-size: 20px; }
.article-checklist { padding-left: 1.2em; }
.code-card { margin-block: 36px; border: 1px solid var(--color-line); }
.code-card__head { padding: 14px 24px; background: var(--color-surface-alt); font-size: 14px; }
.code-card pre { margin: 0; }
.comparison-table { max-width: 100%; overflow-x: auto; border-top: 1px solid var(--color-line); margin-block: 36px; font-size: 15px; }
.comparison-table__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); min-width: 560px; border-bottom: 1px solid var(--color-line); }
.comparison-table__row > * { padding: 16px; margin: 0; }
.comparison-table__row--head { background: var(--color-surface); color: var(--color-text); font-weight: 700; }

.pricing-option { border-top: 1px solid var(--color-line); padding-top: 24px; }
.pricing-option-featured { border-top: 2px solid var(--color-accent); }
.pricing-tier { display: block; color: var(--color-text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 20px; }
.pricing-option h3 { margin-bottom: 16px; }
.pricing-price { margin-block: 24px; }
.pricing-price strong { font: 500 clamp(34px, 3.5vw, 50px)/1.2 var(--font-display); letter-spacing: -.04em; }
.pricing-price span { color: var(--color-text-muted); font-size: 14px; }
.pricing-list { padding-left: 20px; color: var(--color-text-muted); line-height: 1.8; }
.pricing-note, .pricing-disclaimer, .pricing-footnote { color: var(--color-text-muted); font-size: 14px; max-width: 75ch; }
.pricing-option p { color: var(--color-text-muted); }
.project-media { overflow: hidden; border-radius: var(--radius-sm); }
.project-media img { width: 100%; height: auto; object-fit: contain; transition: transform var(--transition-image) var(--ease-out); }
.project-body { padding-top: 24px; }
.project-body .project-tag { display: inline-block; margin: 0 12px 16px 0; }
.project-body h3 { margin-bottom: 18px; }
.project-body p { color: var(--color-text-muted); line-height: 1.8; max-width: 55ch; }
.case-next { padding-top: 32px; margin-top: 48px; border-top: 1px solid var(--color-line); }



@media (max-width: 560px) {
  .prose { font-size: 17px; }
  .prose h2 { margin-top: 48px; }
  .article-callout { padding: 20px; }
}

/* Long commercial copy reads as chapters: context on the left, detail on the right. */
.service-chapters { display: grid; gap: 64px; }


.article-meta { font-size: var(--text-small); color: var(--color-text-muted); margin: 24px 0 0; }


/* editorial */
/* Editorial compositions. Tokens and shared controls remain the foundation. */
.editorial-heading { display: grid; grid-template-columns: minmax(160px,.6fr) minmax(0,1.4fr); gap: 40px; align-items: start; margin-bottom: 56px; }
.editorial-heading h2 { max-width: 20ch; }
.editorial-statement { padding-block: var(--space-statement); }
.editorial-statement .container { display: grid; grid-template-columns: .55fr 1.45fr; gap: 48px; }
.editorial-statement h2 { font-size: var(--text-statement); max-width: 24ch; line-height: 1.12; }
.editorial-statement .eyebrow { padding-top: 10px; max-width: 22ch; }
.row-number { display: block; font-size: 13px; letter-spacing: .08em; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.editorial-rows { display: grid; }
.editorial-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; padding-block: 32px; border-top: 1px solid var(--color-line); min-width: 0; }
.editorial-row-heading { display: grid; grid-template-columns: 48px 1fr; gap: 24px; align-content: start; }
.editorial-row-heading h3 { font-size: var(--text-h3); margin: 0; max-width: 22ch; }
.editorial-row-heading .feature-number { margin: 6px 0 0; }
.editorial-row-body { min-width: 0; }
.editorial-row-body p { color: var(--color-text-muted); max-width: 62ch; }
.editorial-row-body > :last-child { margin-bottom: 0; }
.supporting-copy { font-size: 16px; color: var(--color-text-muted); margin-top: 28px; max-width: 60ch; }
.service-depth { padding-top: 24px; }
.service-depth > .container { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: 72px; align-items: start; }
.service-depth .section-head { margin: 0; }
.service-depth .section-head h2 { font-size: clamp(28px,3vw,42px); }
.service-depth .section-head p { font-size: 16px; }
.service-depth .editorial-row { grid-template-columns: 1fr; gap: 20px; padding-block: 28px; }
.service-depth .editorial-row-body { padding-left: 72px; }
.service-depth .editorial-row-heading h3 { font-size: 27px; }
.process-chapter { background: var(--color-surface); padding-block: var(--space-section-sm); }
.process-sequence { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; }
.process-sequence li { border-top: 1px solid var(--color-line); padding-top: 20px; }
.process-sequence .row-number { margin-bottom: 36px; }
.process-sequence h3 { font-size: 25px; margin-bottom: 20px; }
.process-sequence p { color: var(--color-text-muted); font-size: 16px; }
.page-service-seo .process-sequence, .page-service-maintenance .process-sequence { grid-template-columns: repeat(3,minmax(0,1fr)); }
.editorial-principles { display: grid; border-top: 1px solid var(--color-line); }
.editorial-principle { display: grid; grid-template-columns: 60px .8fr 1.2fr; gap: 32px; padding-block: 32px; border-bottom: 1px solid var(--color-line); }
.editorial-principle h3 { margin: 0; font-size: var(--text-h3); }
.editorial-principle p { color: var(--color-text-muted); margin: 0; }
.proof-exhibition { padding-block: var(--space-section); }
.proof-projects { display: grid; gap: 64px; }
.proof-project { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: center; }
.proof-project:nth-child(even) { grid-template-columns: 1fr 1.3fr; }
.proof-project:nth-child(even) .proof-preview { order: 2; }
.proof-preview { display: block; overflow: hidden; border-radius: var(--radius-sm); }
.proof-preview img { display: block; width: 100%; height: auto; }
.proof-project h3 { margin: 22px 0; font-size: clamp(32px,3.5vw,48px); }
.proof-project p { color: var(--color-text-muted); max-width: 54ch; }
.editorial-faq { padding-top: 48px; }
.editorial-faq > .container { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.editorial-faq .editorial-heading { display: block; }
.editorial-faq .eyebrow { margin-bottom: 24px; }
.editorial-faq details { border-top: 1px solid var(--color-line); padding-block: 24px; }
.editorial-faq summary { cursor: pointer; font-size: 20px; font-weight: 600; }
.editorial-faq details p { margin: 22px 0 0; color: var(--color-text-muted); }
.related-rows, .service-directory { display: grid; }
.related-rows .editorial-row, .service-directory .editorial-row { grid-template-columns: 160px minmax(0,.9fr) minmax(0,1.1fr); gap: 36px; align-items: start; padding-block: 36px; }
.related-thumb { overflow: hidden; }
.related-thumb img { aspect-ratio: var(--media-landscape-ratio); object-fit: cover; width: 100%; }
.related-rows .editorial-row-heading, .service-directory .editorial-row-heading { display: block; }
.related-rows .row-number, .service-directory .row-number { margin-bottom: 18px; }
.related-rows .editorial-row-heading h3 { font-size: 26px; }
.service-directory .editorial-row { grid-template-columns: 240px minmax(0,.9fr) minmax(0,1.1fr); padding-block: 56px; }
.service-directory .related-thumb img { aspect-ratio: var(--media-square-ratio); }
/* Long-form commercial pages have a contents rail and semantic chapter treatments. */
.landing-reading { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 80px; align-items: start; }
.chapter-nav { display: grid; align-content: start; gap: 0; position: sticky; top: 106px; max-height: calc(100vh - 130px); overflow: auto; }
.chapter-nav > .eyebrow { margin-bottom: 22px; }
.chapter-nav a { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding-block: 11px; font-size: 12px; line-height: 1.6; color: var(--color-text-muted); border-bottom: 1px solid var(--color-line); }
.chapter-nav a:hover, .chapter-nav a:focus-visible { color: var(--color-text); }
.landing-reading .service-chapters { gap: 0; min-width: 0; }
.landing-chapter { padding-block: var(--section-md); border-top: 1px solid var(--color-line); scroll-margin-top: 110px; }
.landing-chapter:first-child { border-top: 0; padding-top: 0; }
.landing-chapter header { margin-bottom: 36px; max-width: var(--article-width); }
.landing-chapter header .row-number { margin-bottom: 20px; }
.landing-chapter h2 { font-size: var(--text-h2); max-width: 28ch; }
.landing-chapter-body { margin-inline: 0; max-width: var(--article-width); }
.landing-chapter-body > :last-child { margin-bottom: 0; }
.chapter-lead { font-size: 22px; color: var(--color-text); line-height: 1.65; }
.landing-chapter-decision { padding: 48px; margin-block: 24px 48px; background: var(--color-surface); border-top: 0; }
.landing-chapter-proof { border-top: 2px solid var(--color-accent); }
.editorial-insight { font-size: clamp(23px,2.2vw,30px); line-height: 1.55; color: var(--color-text); padding-left: 28px; border-left: 2px solid var(--color-accent); margin-block: 40px; }
.landing-chapter-faq .faq-list { margin-top: 0; }
.decision-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 40px; }
.decision-pair > div { border-top: 1px solid var(--color-line); padding-top: 36px; }
.decision-pair p { margin-top: 28px; color: var(--color-text-muted); max-width: 46ch; }
.pricing-menu { margin-block: 48px; }
.pricing-menu .pricing-option { display: grid; grid-template-columns: 1fr .7fr 1.3fr; gap: 48px; padding-block: 40px; }
.pricing-menu .pricing-price { margin: 0; }
.pricing-menu .pricing-price strong { display: block; font-size: clamp(28px,3vw,42px); }
.pricing-menu .pricing-price span { display: block; margin-top: 14px; }
.pricing-menu .pricing-option-head p { max-width: 32ch; }
.pricing-menu .pricing-option-detail { min-width: 0; }
.pricing-menu .pricing-list { margin-top: 0; }
/* Studio story and calm contact. */
.studio-timeline .container { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.studio-era strong { font: 500 clamp(90px,12vw,180px)/1.2 var(--font-display); letter-spacing: -.07em; }
.studio-era p { max-width: 30ch; color: var(--color-text-muted); font-size: 21px; }
.studio-history { list-style: none; margin: 0; padding: 0; }
.studio-history li { border-top: 1px solid var(--color-line); padding: 28px 0; }
.studio-history li > span { font-size: 13px; color: var(--color-text-muted); }
.studio-history h2 { margin: 18px 0; font-size: 30px; }
.studio-history p { color: var(--color-text-muted); }
.contact-intro-note { display: grid; grid-template-columns: .7fr 1.3fr; gap: 40px; padding-block: 36px; border-top: 1px solid var(--color-line); margin-top: 28px; }
.contact-intro-note p { max-width: 60ch; color: var(--color-text-muted); }
.contact-trust { border-top: 1px solid var(--color-line); padding-top: 28px; margin-top: 64px; color: var(--color-text-muted); font-size: 14px; }
.portfolio-featured { display: grid; gap: var(--section-xl); }
.portfolio-work { display: grid; gap: 36px; }
.portfolio-work .project-body { display: grid; grid-template-columns: 50px 1fr; column-gap: 32px; padding: 0; }
.portfolio-work .project-body > :not(.portfolio-number) { grid-column: 2; }
.portfolio-work .portfolio-number { grid-row: 1 / 8; font-size: 14px; color: var(--color-text-muted); padding-top: 8px; }
.portfolio-work .project-tag { display: inline; font-size: 11px; margin: 0; }
.portfolio-work h3 { font-size: clamp(36px,4vw,58px); margin: 20px 0; }
.portfolio-work-1 { grid-template-columns: 1.65fr 1fr; align-items: center; }
.portfolio-work-2 { width: 78%; justify-self: end; }
.portfolio-work-3 { width: 62%; justify-self: start; }
.portfolio-work-2 .project-body, .portfolio-work-3 .project-body { max-width: 650px; }
.portfolio-index { margin-top: var(--section-xl); }
.portfolio-index-row { position: relative; border-top: 1px solid var(--color-line); padding-block: 32px; }
.portfolio-index-row .project-body { display: grid; grid-template-columns: 40px minmax(0,.8fr) minmax(0,1.2fr) 150px; gap: 24px; padding: 0; align-items: start; }
.portfolio-index-row .project-tag { display: none; }
.portfolio-index-row .row-number { grid-column: 1; }
.portfolio-index-row h3 { grid-column: 2; margin: 0; font-size: 30px; }
.portfolio-index-row p { grid-column: 3; margin: 0; font-size: 15px; }
.portfolio-index-row .arrow-link { grid-column: 4; padding-top: 0; }
.portfolio-index-row .project-media { position: absolute; width: min(340px,40vw); z-index: 2; right: 12%; bottom: 85%; opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base); }
.portfolio-index-row:hover .project-media, .portfolio-index-row:focus-within .project-media { opacity: 1; visibility: visible; transform: translateY(0); }
.case-facts { display: grid; gap: 20px; margin: 0; }
.case-facts > div { border-top: 1px solid var(--color-line); padding-top: 16px; }
.case-facts dt { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.case-facts dd { margin: 0; font-size: 15px; }
.case-visual { margin-top: var(--space-block); }

.case-story { display: grid; gap: var(--section-lg); }
.case-chapter { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); gap: 80px; padding-top: 32px; border-top: 1px solid var(--color-line); }
.case-chapter header .row-number { margin-bottom: 22px; }
.case-chapter header h2 { font-size: var(--text-h2); }
.case-chapter-body { width: 100%; min-width: 0; }
.case-outcome { background: var(--color-surface); padding: 48px; }
.journal-feature { padding-top: 64px; }
.journal-feature-article { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; margin-top: 32px; }
.journal-feature-article:not(:has(.project-media)), .journal-recent-entry:not(:has(.project-media)) { grid-template-columns: minmax(0, 1fr); }
.journal-feature-article:not(:has(.project-media)) .project-body, .journal-recent-entry:not(:has(.project-media)) .project-body { grid-column: 1 / -1; }
.journal-feature-article h3 { font-size: clamp(36px,4vw,56px); }

.journal-topics { width: min(calc(100% - 2 * var(--gutter)),var(--content-width)); margin: 0 auto 32px; padding-block: 36px; border-block: 1px solid var(--color-line); display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; }
.journal-topics-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-inline) 28px; align-content: start; }
.journal-topics-links a { padding-block: var(--space-inline); border-bottom: 1px solid var(--color-line); font-size: var(--text-small); }
.journal-topics h3 { margin-block: 18px; }
.journal-topics p { color: var(--color-text-muted); }
.journal-controls { scroll-margin-top: 106px; display: flex; align-items: center; gap: 24px; padding-block: 24px; border-block: 1px solid var(--color-line); margin-bottom: 48px; }
.journal-controls select { width: auto; max-width: 100%; }
.journal-controls p { margin: 0 0 0 auto; color: var(--color-text-muted); font-size: 14px; }
.journal-archive { display: grid; gap: var(--space-block-lg); }
.journal-archive .blog-group { scroll-margin-top: 110px; display: grid; grid-template-columns: .6fr 1.4fr; gap: 64px; align-items: start; }
.journal-archive .blog-group-head h3 { font-size: var(--text-h3); margin-bottom: 20px; }
.journal-archive .blog-group-head p { color: var(--color-text-muted); font-size: 15px; }
.journal-list { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.journal-entry { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-component); border-top: 1px solid var(--color-line); padding-block: var(--section-xs); }
.journal-entry .project-body { grid-column: 2; min-width: 0; padding: 0; }
.journal-entry.journal-entry--text-only { grid-template-columns: minmax(0, 1fr); }
.journal-entry--text-only .project-body { grid-column: 1 / -1; }
.journal-entry h3 { margin: 14px 0; font-size: clamp(24px,2.1vw,30px); }
.journal-entry p { font-size: var(--text-small); line-height: 1.75; max-width: 62ch; }

.journal-entry .project-tag { margin: 0; font-size: 11px; }
.journal-entry-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--color-text-muted); font-size: 11px; margin-bottom: 10px; }
.journal-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; border-top: 1px solid var(--color-line); padding-top: 32px; margin-top: 40px; }
.journal-pagination > a, .journal-pagination > span { padding: 14px 0; color: var(--color-text); background: none; border: 0; font: inherit; cursor: pointer; }
.journal-pagination [aria-disabled="true"] { opacity: .4; cursor: default; }
.journal-page-links { display: flex; flex-wrap: wrap; gap: 8px; }
.journal-page-links a { display: grid; place-items: center; min-width: 40px; min-height: 44px; border-bottom: 1px solid var(--color-line); }
.journal-page-links [aria-current="page"] { color: var(--color-accent); border-color: currentColor; }
.journal-services { margin-top: var(--section-lg); }

.article-body { font-size: 19px; line-height: 1.9; }
.article-body > h2 { scroll-margin-top: 112px; padding-top: 20px; border-top: 1px solid var(--color-line); margin-top: var(--section-lg); }
.article-body > p:first-of-type { font-size: 21px; color: var(--color-text); }
.article-contents { max-width: var(--article-width); margin: 0 auto 64px; padding-block: 24px; border-block: 1px solid var(--color-line); }
.article-contents summary { font-size: 17px; font-weight: 600; cursor: pointer; }
.article-contents nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 24px; }
.article-contents a { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 13px; padding-block: 12px; color: var(--color-text-muted); }
.article-pullquote { font: 500 clamp(26px,3vw,38px)/1.5 var(--font-display); }
.article-body .article-callout { padding: 32px; }
.article-table { overflow-x: auto; margin-block: 40px; }
.article-table table { display: table; width: 100%; margin: 0; }
.legal-contents { max-width: var(--article-width); margin: 0 auto 56px; display: flex; flex-wrap: wrap; gap: 12px 24px; padding-bottom: 32px; border-bottom: 1px solid var(--color-line); }
.legal-contents a { font-size: 13px; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 4px; }
.legal-body h2 { scroll-margin-top: 110px; }
@media (min-width: 1100px) {
 .article-body .article-callout, .article-body .article-table, .article-body .article-pullquote { width: calc(100% + 96px); max-width: none; margin-left: -48px; }
 .article-body .article-media-wide { width: calc(100% + 160px); max-width: none; margin-left: -80px; }
}
@media (max-width: 1100px) {
 .service-depth > .container, .landing-reading { gap: 40px; }
 .landing-reading { grid-template-columns: 190px minmax(0,1fr); }
 .proof-project, .case-chapter { gap: 40px; }
 .portfolio-index-row .project-body { grid-template-columns: 32px .9fr 1.1fr; }
 .portfolio-index-row .arrow-link { grid-column: 2 / -1; }
 .service-directory .editorial-row { grid-template-columns: 160px 1fr 1fr; }
 .process-sequence { gap: 24px; }
}
@media (max-width: 890px) {
 .editorial-heading, .editorial-statement .container, .service-depth > .container, .editorial-faq > .container, .studio-timeline .container, .journal-topics, .journal-archive .blog-group, .landing-reading { grid-template-columns: 1fr; gap: 32px; }
 .editorial-statement { padding-block: var(--space-section-sm); }
 .editorial-statement h2 { max-width: 23ch; }
 .service-depth .section-head { max-width: var(--article-width); }
 .process-sequence { grid-template-columns: 1fr 1fr; }
 .page-service-seo .process-sequence, .page-service-maintenance .process-sequence { grid-template-columns: 1fr; }
 .process-sequence li { display: grid; grid-template-columns: 40px 1fr; gap: 20px; }
 .process-sequence .row-number { margin: 0; grid-row: 1 / 3; }
 .process-sequence h3, .process-sequence p { margin: 0; }
 .editorial-principle { grid-template-columns: 32px 1fr; gap: 20px; }
 .editorial-principle p { grid-column: 2; }
 .proof-project, .proof-project:nth-child(even) { grid-template-columns: 1fr 1fr; gap: 32px; }
 .chapter-nav { position: static; max-height: 260px; padding: 20px; background: var(--color-surface); margin-bottom: 32px; }
 .landing-chapter { padding-block: 48px; }
 .landing-chapter-decision { padding: 28px; }
 .pricing-menu .pricing-option { grid-template-columns: 1.2fr .8fr; gap: 28px; }
 .pricing-option-detail { grid-column: 1 / -1; }
 .pricing-menu .pricing-list { columns: 2; column-gap: 40px; }
 .studio-timeline .container { gap: 48px; }
 .portfolio-work-1 { grid-template-columns: 1fr; }
 .portfolio-work-2 { width: 90%; }
 .portfolio-work-3 { width: 80%; }
 .case-facts { grid-template-columns: 1fr 1fr 1fr; }
 .case-visual { margin-top: 40px; }
 .case-chapter { grid-template-columns: 1fr; gap: 28px; }
 .case-chapter header { display: grid; grid-template-columns: 32px 1fr; gap: 20px; }
 .case-outcome { padding: 28px; }
 .journal-feature-article { gap: 32px; }
 .journal-archive .blog-group-head { margin-bottom: 0; }
 .journal-controls { flex-wrap: wrap; }
 .journal-controls p { flex-basis: 100%; margin: 0; }
 .contact-intro-note { grid-template-columns: 1fr; gap: 20px; }
 .article-body { font-size: 18px; }
}
@media (max-width: 560px) {
 .journal-topics-links { grid-template-columns: 1fr; }
 .editorial-heading { margin-bottom: 32px; }
 .editorial-statement { padding-block: var(--space-block-lg); }
 .editorial-statement h2 { font-size: 36px; }
 .editorial-row { grid-template-columns: 1fr; gap: 20px; }
 .editorial-row-heading { grid-template-columns: 28px 1fr; gap: 18px; }
 .service-depth .editorial-row-body { padding-left: 46px; }
 .related-rows .editorial-row, .service-directory .editorial-row { grid-template-columns: 72px 1fr; gap: 24px; padding-block: 28px; }
 .related-rows .editorial-row-body, .service-directory .editorial-row-body { grid-column: 1 / -1; }
 .related-thumb img { aspect-ratio: var(--media-square-ratio); }
 .service-directory .editorial-row-heading h3 { font-size: 28px; }
 .process-sequence { grid-template-columns: 1fr; }
 .process-chapter { padding-block: 56px; }
 .proof-project, .proof-project:nth-child(even), .decision-pair { grid-template-columns: 1fr; }
 .proof-project:nth-child(even) .proof-preview { order: 0; }
 .proof-exhibition { padding-block: var(--space-block-lg); }
 .proof-project h3 { margin-block: 16px; }
 .landing-chapter-decision { padding: 24px; }
 .chapter-lead { font-size: 20px; }
 .pricing-menu .pricing-list { columns: 1; }
 .pricing-menu .pricing-option { grid-template-columns: 1fr; }
 .pricing-menu .pricing-price { padding-top: 0; }
 .pricing-menu .pricing-option-detail { grid-column: auto; }
 .portfolio-featured { gap: 64px; }
 .portfolio-work-2, .portfolio-work-3 { width: 100%; }
 .portfolio-work .project-body { grid-template-columns: 26px 1fr; gap: 0 18px; }
 .portfolio-index { margin-top: 80px; }
 .portfolio-index-row .project-body { grid-template-columns: 24px 1fr; gap: 18px; }
 .portfolio-index-row .project-body p { grid-column: 2; }
 .portfolio-index-row .project-media { display: none; }
 .case-facts { grid-template-columns: 1fr; gap: 12px; }
 .case-facts > div { display: grid; grid-template-columns: 100px 1fr; gap: 16px; }
 .case-chapter { gap: 16px; }
 .case-outcome { padding: 24px; }
 .case-story { gap: 56px; }
 .journal-feature-article { grid-template-columns: 1fr; }
 .journal-entry { grid-template-columns: 64px 1fr; gap: 18px; }
 .journal-entry h3 { font-size: 24px; }
 .journal-pagination { gap: 10px; font-size: 13px; }
 .journal-page-links { order: 3; flex-basis: 100%; justify-content: center; }
 .article-contents nav { grid-template-columns: 1fr; }
 .article-body { font-size: 17px; line-height: 1.85; }
 .article-body > p:first-of-type { font-size: 19px; }
 .article-body .article-callout { padding: 24px; }
}
@media (hover: none) and (min-width: 561px) {
 .portfolio-index-row .project-media { display: none; }
}
@media (prefers-reduced-motion: reduce) { .portfolio-index-row .project-media { transition: none; transform: none; } }
.journal-recent { padding-top: 0; }
.journal-recent-list { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.journal-recent-entry { display: grid; grid-template-columns: 130px 1fr; gap: 28px; border-top: 1px solid var(--color-line); padding-top: 28px; }
.journal-recent-entry .project-body { grid-column: 2; min-width: 0; padding: 0; }
.journal-recent-entry h3 { font-size: 28px; margin-block: 16px; }
.journal-recent-entry p { font-size: 15px; }

@media (max-width: 890px) { .journal-recent-list { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px) { .journal-recent-entry { grid-template-columns: 72px 1fr; gap: 20px; } .journal-recent-entry h3 { font-size: 25px; } }
.landing-part-title { margin: 0 0 56px; padding-top: 26px; border-top: 2px solid var(--color-text); font-size: clamp(22px,2.4vw,32px); font-family: var(--font-display); max-width: 30ch; line-height: 1.35; }
.landing-part + .landing-part { margin-top: var(--section-lg); }
.landing-proof { margin: 24px 0 96px; padding-block: 32px; border-block: 1px solid var(--color-line); }
.landing-proof > a { display: block; margin-block: 28px; }
.landing-proof img { width: 100%; height: auto; }
.landing-proof h3 { font-size: 38px; margin-bottom: 20px; }
.landing-proof p { color: var(--color-text-muted); max-width: 65ch; }
.article-related { max-width: var(--article-width); margin: 80px auto 0; border-top: 1px solid var(--color-line); padding-top: 36px; }
.article-related h2 { font-size: 30px; margin-block: 24px 32px; }
.article-related > a { display: flex; justify-content: space-between; align-items: start; gap: 28px; padding-block: 22px; border-top: 1px solid var(--color-line); font-size: 20px; }
.article-related > a:hover { color: var(--color-accent); }
.journal-controls select { color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-control); padding: 12px 36px 12px 14px; font: inherit; font-size: 14px; }
.related-rows .editorial-row:not(:has(> .related-thumb)) { grid-template-columns: .8fr 1.2fr; }
@media (max-width: 560px) {
 .landing-part-title { font-size: 23px; margin-bottom: 36px; }
 .landing-proof { margin-bottom: 64px; }
 .related-rows .editorial-row:not(:has(> .related-thumb)) { grid-template-columns: 1fr; }
 .article-related > a { font-size: 18px; }
}


/* media */
/* Editorial industry photography: consistent landscape framing across project placements. */
.project-preview { position: relative; aspect-ratio: var(--media-project-ratio); overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface); }
.project-preview > a { display: block; width: 100%; height: 100%; }
.project-preview img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.case-visual.project-preview { max-width: var(--content-intro-width); margin-inline: auto; }
/* Blog media roles use the same crops across templates and archive pages. */
.journal-feature-article .project-media { aspect-ratio: var(--media-blog-featured); overflow: hidden; }
.journal-feature-article .project-media img { width: 100%; height: 100%; object-fit: cover; }
.journal-entry .project-media { aspect-ratio: var(--media-blog-list); overflow: hidden; }
.journal-recent-entry .project-media { aspect-ratio: 1 / 1; overflow: hidden; }
.journal-entry .project-media img, .journal-recent-entry .project-media img { width: 100%; height: 100%; object-fit: cover; }
.article-media-wide img { width: 100%; aspect-ratio: var(--media-wide-ratio); object-fit: cover; }
.article-media-inline img { width: 100%; height: auto; }
.media-caption { font-size: var(--text-small); color: var(--color-text-muted); line-height: 1.6; margin-top: var(--space-inline); }


/* icons */
/* Font Awesome Free 7.1.0 subset. SVG icons: CC BY 4.0; assets/icons/fontawesome/LICENSE.txt. Generated by scripts/build-icons.mjs. */
.icon { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; vertical-align: -.125em; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-arrow-right { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M502.6%20278.6c12.5-12.5%2012.5-32.8%200-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L402.7%20224%2032%20224c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032l370.7%200-105.4%20105.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l160-160z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-arrow-left { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9.4%20233.4c-12.5%2012.5-12.5%2032.8%200%2045.3l160%20160c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L109.3%20288%20480%20288c17.7%200%2032-14.3%2032-32s-14.3-32-32-32l-370.7%200%20105.4-105.4c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200l-160%20160z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-arrow-up { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M214.6%2017.4c-12.5-12.5-32.8-12.5-45.3%200l-160%20160c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L160%20117.3%20160%20488c0%2017.7%2014.3%2032%2032%2032s32-14.3%2032-32l0-370.7%20105.4%20105.4c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3l-160-160z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-arrow-down { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M169.4%20502.6c12.5%2012.5%2032.8%2012.5%2045.3%200l160-160c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L224%20402.7%20224%2032c0-17.7-14.3-32-32-32s-32%2014.3-32%2032l0%20370.7-105.4-105.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3l160%20160z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-bars { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M0%2096C0%2078.3%2014.3%2064%2032%2064l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20128C14.3%20128%200%20113.7%200%2096zM0%20256c0-17.7%2014.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032L32%20288c-17.7%200-32-14.3-32-32zM448%20416c0%2017.7-14.3%2032-32%2032L32%20448c-17.7%200-32-14.3-32-32s14.3-32%2032-32l384%200c17.7%200%2032%2014.3%2032%2032z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-xmark { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20384%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M55.1%2073.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L147.2%20256%209.9%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200L192.5%20301.3%20329.9%20438.6c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.8%20256%20375.1%20118.6c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192.5%20210.7%2055.1%2073.4z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-sun { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M178.2-10.1c7.4-3.1%2015.8-2.2%2022.5%202.2l87.8%2058.2%2087.8-58.2c6.7-4.4%2015.1-5.2%2022.5-2.2S411.4-.5%20413%207.3l20.9%20103.2%20103.2%2020.9c7.8%201.6%2014.4%207%2017.4%2014.3s2.2%2015.8-2.2%2022.5l-58.2%2087.8%2058.2%2087.8c4.4%206.7%205.2%2015.1%202.2%2022.5s-9.6%2012.8-17.4%2014.3L433.8%20401.4%20413%20504.7c-1.6%207.8-7%2014.4-14.3%2017.4s-15.8%202.2-22.5-2.2l-87.8-58.2-87.8%2058.2c-6.7%204.4-15.1%205.2-22.5%202.2s-12.8-9.6-14.3-17.4L143%20401.4%2039.7%20380.5c-7.8-1.6-14.4-7-17.4-14.3s-2.2-15.8%202.2-22.5L82.7%20256%2024.5%20168.2c-4.4-6.7-5.2-15.1-2.2-22.5s9.6-12.8%2017.4-14.3L143%20110.6%20163.9%207.3c1.6-7.8%207-14.4%2014.3-17.4zM207.6%20256a80.4%2080.4%200%201%201%20160.8%200%2080.4%2080.4%200%201%201%20-160.8%200zm208.8%200a128.4%20128.4%200%201%200%20-256.8%200%20128.4%20128.4%200%201%200%20256.8%200z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-moon { --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256%200C114.6%200%200%20114.6%200%20256S114.6%20512%20256%20512c68.8%200%20131.3-27.2%20177.3-71.4%207.3-7%209.4-17.9%205.3-27.1s-13.7-14.9-23.8-14.1c-4.9%20.4-9.8%20.6-14.8%20.6-101.6%200-184-82.4-184-184%200-72.1%2041.5-134.6%20102.1-164.8%209.1-4.5%2014.3-14.3%2013.1-24.4S322.6%208.5%20312.7%206.3C294.4%202.2%20275.4%200%20256%200z%22%2F%3E%3C%2Fsvg%3E"); }
.icon-arrow-up-right { rotate: -45deg; }
.nav-toggle .icon { display: block; width: 20px; height: 20px; margin: 0; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }


/* portfolio */
/* Editorial portfolio components. Used by the Reference listing only. */
.work-intro { padding-block: var(--section-md) var(--section-sm); }
.work-intro h1 { max-width: 22ch; margin-top: var(--space-component); }
.work-intro .lead { max-width: 65ch; }
.work-showcase { display: grid; gap: var(--section-lg); }
.work-heading { display: grid; gap: var(--space-inline); margin-bottom: var(--space-component); }
.work-flagship h2 { font-size: var(--text-display); line-height: 1.1; }
.work-scope { display: block; color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.7; }
.work-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-surface); }
.work-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-media--flagship { aspect-ratio: 16 / 9; }
.work-summary { display: flex; justify-content: space-between; align-items: start; gap: var(--space-block); margin-top: var(--space-component); }
.work-summary p { max-width: 65ch; color: var(--color-text-muted); }
.work-summary .arrow-link { flex-shrink: 0; }
.work-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--section-sm); align-items: center; }
.work-split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.work-split--reverse .work-media { grid-column: 2; grid-row: 1; }
.work-split--reverse .work-copy { grid-column: 1; grid-row: 1; }
.work-copy { display: grid; gap: var(--space-component); }
.work-copy h2 { font-size: var(--text-h2); }
.work-copy > p:not(.work-scope) { color: var(--color-text-muted); }
.work-copy .arrow-link { justify-self: start; }
.work-archive { margin-top: var(--section-lg); }
.work-archive > h2 { margin-bottom: var(--section-sm); }
.work-row { display: grid; grid-template-columns: 32px 160px minmax(0, 1fr) 24px; align-items: center; gap: var(--space-component); padding-block: var(--space-component); border-top: 1px solid var(--color-line); }
.work-row:last-child { border-bottom: 1px solid var(--color-line); }
.work-number { font-size: var(--text-label); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.work-row-copy { min-width: 0; }
.work-row-title { display: block; font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.3; margin-bottom: var(--space-inline); }
.work-row .icon { transition: transform var(--transition-fast); }
.work-row:hover .icon, .work-row:focus-visible .icon { transform: translate(3px, -3px); }
.work-row:hover .work-row-title { color: var(--color-accent); }
.work-row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
@media (max-width: 768px) {
 .work-split, .work-split--reverse { grid-template-columns: 1fr; gap: var(--space-component); }
 .work-split--reverse .work-media, .work-split--reverse .work-copy { grid-column: auto; grid-row: auto; }
 .work-summary { flex-direction: column; gap: var(--space-inline); }
}
@media (max-width: 560px) {
 .work-row { grid-template-columns: 96px minmax(0, 1fr) 16px; gap: var(--space-inline); }
 .work-number { grid-column: 1; }
 .work-row .work-media { grid-column: 1; grid-row: 2; }
 .work-row-copy { grid-column: 2; grid-row: 1 / 3; }
 .work-row > .icon { grid-column: 3; grid-row: 1 / 3; }
 .work-row-title { font-size: var(--text-h4); overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .work-row .icon { transition: none; } }