/* ============================================================================
   ScaleCraft — baseline reset.
   Port of the vendor baseline the design was authored against (Tailwind v4
   preflight subset) so the pinned design's computed metrics reproduce exactly
   in WordPress. No utility classes are used anywhere in this theme.
   ========================================================================== */
*, ::after, ::before, ::backdrop, ::file-selector-button {
  box-sizing: border-box; margin: 0; padding: 0; border: 0 solid;
}
html, :host {
  line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}
html, body { height: 100%; width: 100%; margin: 0; padding: 0; overscroll-behavior-x: none; }
body { line-height: inherit; display: flex; overflow: auto; box-sizing: border-box; }
hr { height: 0; color: inherit; border-top-width: 1px; }
abbr:where([title]) { text-decoration: underline dotted; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
b, strong { font-weight: bolder; }
code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1em; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
table { text-indent: 0; border-color: inherit; border-collapse: collapse; }
progress { vertical-align: baseline; }
summary { display: list-item; }
ol, ul, menu { list-style: none; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, select, optgroup, textarea, ::file-selector-button {
  font: inherit; font-feature-settings: inherit; font-variation-settings: inherit;
  letter-spacing: inherit; color: inherit; border-radius: 0; background-color: transparent; opacity: 1;
}
::placeholder { opacity: 1; color: color-mix(in oklab, currentColor 50%, transparent); }
textarea { resize: vertical; }
::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; }
::-webkit-datetime-edit { display: inline-flex; }
::-webkit-datetime-edit-fields-wrapper { padding: 0; }
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field { padding-block: 0; }
::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[hidden]:where(:not([hidden="until-found"])) { display: none !important; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
/* WordPress additions kept out of the design's way. */
#sc-root { display: block; }
.wp-block-image img { display: block; }
body.admin-bar .mast { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .mast { top: 46px; } }

/* ============================================================================
   ScaleCraft Studio — design system v2 (rework, references: Mobbin v2 pass)
   Editorial agency language: oversized display type, colour fields, mosaics,
   marquees, staggered grids. Tokens per BG B06-B08.
   ========================================================================== */
:root {
  --ink: #12161B; --ink-2: #1D2329; --graphite: #2A3038; --slate: #4C5663; --stone: #5F6772;
  --ember: #C2472E; --ember-ink: #B03C26; --ember-dk: #9E3520; --moss: #3F5A44; --ochre: #8A6A2F;
  --paper: #F4F1EA; --bone: #E9E4DA; --cloth: #D8D1C2; --line: rgba(18,22,27,.14);
  --disp: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --maxw: 1440px; --pad: clamp(20px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.sc-app, .wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; }
/* WordPress: core wraps the template in .wp-site-blocks; the design's #root
   rules map onto it so the shell geometry is unchanged. */
.wp-site-blocks { width: 100%; height: 100%; margin: 0; padding: 0; overscroll-behavior-x: none; }
/* WordPress scopes: core prints its own skip link as a child of <body> and
   wraps the header/footer template parts in extra divs. The design keeps the
   shell on .sc-app only, so body returns to block flow (its row-flex design
   rule would otherwise lay every landmark out side by side) and the two part
   wrappers are neutralised to flex columns. */
body.sc-body { display: block; overflow-x: clip; }
.wp-site-blocks > .wp-block-template-part { display: flex; flex-direction: column; }
.sc-main { flex: 1 0 auto; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 90; background: var(--ink); color: var(--paper); padding: 12px 18px; font-size: 14px; }
.skip:focus { left: 12px; top: 12px; }
/* WordPress core prints its own skip link (id wp-skip-link). It replaces the
   design's .skip anchor so the document has a single skip target; these rules
   give it the design's hidden-until-focused appearance. */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 90; background: var(--ink); color: var(--paper); padding: 12px 18px; font-size: 14px; }
.skip-link:focus { left: 12px; top: 12px; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }

/* type scale */
.t-mega { font-family: var(--disp); font-weight: 500; font-size: clamp(52px, 9.4vw, 148px); line-height: .94; letter-spacing: -.028em; margin: 0; }
.t-h1 { font-family: var(--disp); font-weight: 500; font-size: clamp(40px, 6.2vw, 92px); line-height: .98; letter-spacing: -.024em; margin: 0; }
.t-h2 { font-family: var(--disp); font-weight: 500; font-size: clamp(30px, 3.8vw, 56px); line-height: 1.02; letter-spacing: -.02em; margin: 0; }
.t-h3 { font-family: var(--disp); font-weight: 500; font-size: clamp(21px, 1.7vw, 28px); line-height: 1.15; letter-spacing: -.01em; margin: 0; }
.t-lead { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.55; color: var(--slate); margin: 0; }
.t-body { font-size: 16.5px; line-height: 1.68; color: var(--graphite); margin: 0 0 16px; }
.t-small { font-size: 14px; line-height: 1.6; color: var(--stone); }
.t-label { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ember-ink); }
.t-label--muted { color: var(--stone); }
.t-italic { font-style: italic; }
.t-serif { font-family: var(--disp); }
.num { font-variant-numeric: tabular-nums; }

/* bands */
.band { padding: clamp(64px, 8vw, 128px) 0; position: relative; }
.band--tight { padding: clamp(40px, 4vw, 64px) 0; }
.band--bone { background: var(--bone); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--ink .t-lead, .band--ink .t-body { color: rgba(244,241,234,.76); }
.band--ink .t-label { color: #E8A18C; }
.band--ember { background: var(--ember); color: #fff; }
.band--ember .t-lead, .band--ember .t-body { color: rgba(255,255,255,.95); }
.band--ember .t-label { color: rgba(255,255,255,.95); }
.hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.band--ink .hr { border-color: rgba(244,241,234,.22); }

/* masthead */
.mast { position: sticky; top: 0; z-index: 40; transition: background .2s ease, border-color .2s ease; border-bottom: 1px solid transparent; }
.mast.is-solid { background: rgba(244,241,234,.92); backdrop-filter: blur(10px); border-bottom-color: var(--line); }
.mast__in { display: flex; align-items: center; gap: 28px; min-height: 74px; }
.mark { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--disp); font-size: 24px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.mark i { font-style: italic; font-weight: 400; }
.mark--light { color: var(--paper); }
.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a { font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--graphite); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--ember); }
.mast__cta { display: flex; gap: 10px; align-items: center; }
.burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: var(--ink); }
.burger span::before { top: -7px; } .burger span::after { top: 7px; }

/* full-screen mobile nav (ref: Open / Savee) */
.mnav { position: fixed; inset: 0; background: var(--ink); color: var(--paper); z-index: 80; display: flex; flex-direction: column; padding: 22px var(--pad) 30px; }
.mnav__top { display: flex; justify-content: space-between; align-items: center; }
.mnav__close { background: none; border: 1px solid rgba(244,241,234,.4); color: var(--paper); border-radius: 999px; padding: 9px 18px; font-size: 14px; cursor: pointer; }
.mnav__list { margin: auto 0; display: flex; flex-direction: column; gap: 2px; }
.mnav__list a { font-family: var(--disp); font-size: clamp(38px, 12vw, 64px); line-height: 1.06; text-decoration: none; letter-spacing: -.02em; padding: 6px 0; border-bottom: 1px solid rgba(244,241,234,.18); }
.mnav__list a span { font-family: var(--body); font-size: 12px; letter-spacing: .16em; color: rgba(244,241,234,.5); text-transform: uppercase; margin-right: 12px; }
.mnav__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: rgba(244,241,234,.6); }

/* buttons / chips */
.btn { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; padding: 14px 24px; border-radius: 999px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--ember); }
.btn--ember { background: var(--ember); color: #fff; }
.btn--ember:hover { background: var(--ember-dk); }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--light { border-color: rgba(244,241,234,.5); color: var(--paper); background: transparent; }
.btn--light:hover { background: var(--paper); color: var(--ink); }
.btn--text { padding: 0; border-radius: 0; color: var(--ember-dk); text-decoration: underline; text-underline-offset: 4px; background: none; }
.btn[disabled] { opacity: .55; cursor: default; }
.chip { font-size: 13.5px; font-weight: 500; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; color: var(--graphite); transition: .16s ease; }
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.band--ink .chip { border-color: rgba(244,241,234,.35); color: rgba(244,241,234,.85); }
.band--ink .chip.is-on { background: var(--paper); color: var(--ink); }

/* ticker (ref: marquee rows) */
.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; }
.band--ink .ticker, .ticker--light { border-color: rgba(244,241,234,.25); }
.ticker__track { display: flex; gap: 48px; width: max-content; animation: tick 34s linear infinite; }
.ticker__track span { font-family: var(--disp); font-size: clamp(20px, 2vw, 30px); letter-spacing: -.01em; white-space: nowrap; }
.ticker__track span::after { content: '—'; color: var(--ember); margin-left: 48px; }
.band--ember .ticker__track span::after { color: rgba(255,255,255,.7); }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* hero (ref: Locomotive colour field + Readymag collage) */
.hero { background: var(--ink); color: var(--paper); padding: clamp(72px, 9vw, 132px) 0 0; position: relative; overflow: hidden; }
.hero__eyebrow { display: flex; justify-content: space-between; gap: 24px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,241,234,.6); }
.hero__title { margin: 40px 0 28px; }
.hero__title em { font-style: italic; color: var(--ember); }
.hero__row { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(24px, 4vw, 64px); align-items: end; padding-bottom: clamp(48px, 6vw, 84px); }
.hero__lead { font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; color: rgba(244,241,234,.8); max-width: 46ch; }
.hero__actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hero__collage { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; padding-bottom: clamp(40px, 5vw, 72px); }
.hero__collage figure { margin: 0; overflow: hidden; border-radius: 14px; background: #20262d; }
.hero__collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.hero__collage figure:hover img { transform: scale(1.04); }
.hero__collage figcaption { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,241,234,.55); padding: 10px 2px 0; }
.hc-1 { grid-column: span 5; aspect-ratio: 4/3; }
.hc-2 { grid-column: span 4; aspect-ratio: 3/4; }
.hc-3 { grid-column: span 3; aspect-ratio: 1/1; }
.hero .ticker { border-color: rgba(244,241,234,.22); }
.hero .ticker__track span { color: rgba(244,241,234,.85); }

/* page head (inner pages) */
.phead { padding: clamp(56px, 7vw, 110px) 0 clamp(28px, 3vw, 48px); }
.crumbs { display: flex; gap: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone); padding-top: 26px; }
.crumbs a { color: var(--stone); text-decoration: none; }
.crumbs a:hover { color: var(--ember); }
.phead__meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 24px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }

/* section head */
.shead { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 72px); align-items: end; margin-bottom: clamp(28px, 3.5vw, 56px); }
.shead .t-label { display: block; margin-bottom: 14px; }
.shead p { max-width: 52ch; }

/* service rows (ref: Vucko numbered index) */
.srows { border-top: 1px solid var(--line); }
.srow { display: grid; grid-template-columns: 64px minmax(0,1.05fr) minmax(0,1fr) 40px; gap: clamp(16px, 3vw, 40px); align-items: center; padding: clamp(20px, 2.4vw, 34px) clamp(8px, 1.4vw, 20px); border-bottom: 1px solid var(--line); text-decoration: none; transition: background .22s ease, color .22s ease, padding .22s ease; }
.srow:hover { background: var(--ember); color: #fff; padding-left: clamp(16px, 2.4vw, 34px); }
.srow:hover .srow__desc, .srow:hover .srow__num { color: rgba(255,255,255,.85); }
.srow__num { font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--stone); }
.srow__title { font-family: var(--disp); font-size: clamp(26px, 3.2vw, 46px); line-height: 1.02; letter-spacing: -.02em; }
.srow__desc { font-size: 15.5px; line-height: 1.55; color: var(--slate); }
.srow__arrow { font-size: 22px; text-align: right; }

/* service detail blocks */
.dgrid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.dcard { border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2vw, 30px); background: rgba(255,255,255,.35); }
.dlist { margin: 0; padding: 0; list-style: none; }
.dlist li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.dlist li::before { content: '—'; color: var(--ember); }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.kv b { font-weight: 600; }
.kv span:last-child { color: var(--slate); text-align: right; }
.quote { font-family: var(--disp); font-style: italic; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.22; letter-spacing: -.015em; margin: clamp(24px, 3vw, 44px) 0; }
.quote--ink { color: var(--paper); }

/* work mosaic (ref: MOUTHWASH / Koto) */
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.4vw, 22px); }
.tile { position: relative; display: block; text-decoration: none; overflow: hidden; border-radius: 16px; background: var(--bone); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.tile:hover img { transform: scale(1.045); }
.tile__body { position: absolute; inset: auto 0 0 0; padding: 22px; background: linear-gradient(to top, rgba(18,22,27,.82), rgba(18,22,27,0)); color: #fff; }
.tile__body h3 { margin: 0 0 6px; font-family: var(--disp); font-weight: 500; font-size: clamp(20px, 2vw, 30px); line-height: 1.05; letter-spacing: -.015em; }
.tile__body p { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.tile--a { grid-column: span 7; aspect-ratio: 16/10; }
.tile--b { grid-column: span 5; aspect-ratio: 4/3; }
.tile--c { grid-column: span 4; aspect-ratio: 3/4; }
.tile--d { grid-column: span 4; aspect-ratio: 1/1; }
.tile--e { grid-column: span 4; aspect-ratio: 4/5; }
.tile--f { grid-column: span 6; aspect-ratio: 16/11; }

/* record / case study */
.cs-hero { position: relative; margin-top: clamp(20px, 3vw, 40px); border-radius: 18px; overflow: hidden; background: var(--ink); }
.cs-hero img { width: 100%; height: clamp(320px, 52vw, 620px); object-fit: cover; }
.cs-hero__title { position: absolute; inset: auto 0 0 0; padding: clamp(22px, 3vw, 48px); color: #fff; background: linear-gradient(to top, rgba(18,22,27,.88), rgba(18,22,27,.1)); }
.cs-hero__title h1 { margin: 10px 0 0; }
.factstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: clamp(24px, 3vw, 44px) 0; }
.factstrip > div { background: var(--paper); padding: 18px 20px; }
.factstrip b { display: block; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); margin-bottom: 6px; }
.factstrip span { font-size: 15.5px; }
.editorial { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 72px); }
.editorial__rail { position: sticky; top: 104px; align-self: start; }
.widefig { margin: clamp(24px, 3vw, 48px) 0; }
.widefig img { width: 100%; border-radius: 16px; }
.widefig figcaption { margin-top: 10px; font-size: 13px; color: var(--stone); }
.artgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.artgrid figcaption { margin-top: 8px; font-size: 12.5px; color: var(--stone); }
.steps { counter-reset: s; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 96px 1fr; gap: clamp(16px, 3vw, 40px); padding: clamp(22px, 2.6vw, 40px) 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); font-family: var(--disp); font-size: clamp(34px, 3.4vw, 54px); color: var(--ember); line-height: 1; }
.band--ink .steps li { border-color: rgba(244,241,234,.2); }

/* cards / lists */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px, 1.6vw, 24px); }
.card { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2vw, 30px); background: rgba(255,255,255,.35); text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.card:hover { border-color: var(--ink); transform: translateY(-2px); }
.card__meta { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.card__body { font-size: 15.5px; line-height: 1.6; color: var(--slate); margin: 0; }
.card__link { margin-top: auto; font-size: 14.5px; font-weight: 600; color: var(--ember-dk); }
.band--ink .card { background: rgba(244,241,234,.06); border-color: rgba(244,241,234,.2); }
.band--ink .card__link { color: #E8A18C; }
.feature { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(20px, 3vw, 48px); align-items: center; text-decoration: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(24px, 3vw, 48px) 0; }
.feature img { border-radius: 16px; }
.rlist { list-style: none; margin: 0; padding: 0; }
.rlist a { display: grid; grid-template-columns: 210px minmax(0,1fr) 110px; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; align-items: baseline; }
.rlist a:hover .rlist__title { color: var(--ember-dk); }
.rlist__title { font-family: var(--disp); font-size: clamp(20px, 2vw, 28px); line-height: 1.1; letter-spacing: -.015em; }
.rlist__meta { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.rlist__read { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); text-align: right; }

/* article */
.article { max-width: 780px; margin: 0 auto; }
.article .dropcap::first-letter { font-family: var(--disp); font-size: 4.2em; line-height: .78; float: left; padding: 6px 12px 0 0; color: var(--ember); }
.takeaways { border: 1px solid var(--line); border-radius: 16px; padding: clamp(20px, 2vw, 30px); margin: clamp(24px, 3vw, 40px) 0; background: rgba(255,255,255,.35); }
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.checklist li::before { content: '✓'; color: var(--ember); }

/* about */
.statement { font-family: var(--disp); font-size: clamp(30px, 4.6vw, 68px); line-height: 1.06; letter-spacing: -.02em; margin: 0; }
.statement img { display: inline-block; height: .82em; width: auto; border-radius: .18em; margin: 0 .08em; vertical-align: -.06em; }
.monotiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.monotile { border-radius: 16px; padding: clamp(22px, 2.4vw, 36px); min-height: clamp(240px, 26vw, 360px); display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; }
.monotile--ember { background: var(--ember); color: #fff; }
.monotile--ink { background: var(--ink); color: var(--paper); }
.monotile--bone { background: var(--bone); color: var(--ink); }
.monotile__initials { font-family: var(--disp); font-size: clamp(56px, 7vw, 104px); line-height: 1; letter-spacing: -.02em; }
.monotile__role { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.studio-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.studio-figs figcaption { margin-top: 8px; font-size: 12.5px; color: var(--stone); }

/* process */
.pgrid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(24px, 5vw, 96px); align-items: start; }
.pgrid__sticky { position: sticky; top: 108px; }
.pnum { font-family: var(--disp); font-size: clamp(48px, 6vw, 96px); line-height: 1; color: var(--ember); letter-spacing: -.03em; }

/* contact */
.cgrid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(24px, 5vw, 88px); align-items: start; }
.form { border: 1px solid rgba(244,241,234,.22); border-radius: 18px; padding: clamp(22px, 2.6vw, 40px); background: rgba(244,241,234,.05); }
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field > label, .field legend { font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,241,234,.66); }
.field input, .field select, .field textarea { font: inherit; font-size: 15.5px; color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid rgba(244,241,234,.34); padding: 10px 2px; transition: border-color .18s ease; }
.field select option { color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--ember); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-bottom-color: #FF8A6B; }
.field.has-error legend, .field.has-error > label { color: #FF8A6B; }
.err { font-size: 13px; color: #FF9B7E; margin: 0; }
.hint { font-size: 12.5px; color: rgba(244,241,234,.5); }
.stepdots { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.stepdots span { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,241,234,.55); }
.stepbar { display: flex; gap: 6px; }
.stepbar i { width: 34px; height: 3px; background: rgba(244,241,234,.24); border-radius: 2px; }
.stepbar i.on { background: var(--ember); }
.formctl { display: flex; gap: 12px; justify-content: flex-end; margin-top: 20px; }
.receipt { border: 1px solid rgba(244,241,234,.3); border-radius: 18px; padding: clamp(24px, 3vw, 40px); background: rgba(244,241,234,.07); }
.receipt h3 { margin: 8px 0 12px; }

/* footer (ref: KODE / Melius giant wordmark) */
/* Tail sections sit flush against the footer on every route: the last CTA/band
   touches the ink footer with zero gap (user feedback, 21 Sep 2026). */
.footer { background: var(--ink); color: var(--paper); padding: clamp(56px, 6vw, 96px) 0 28px; margin-top: 0; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: clamp(20px, 3vw, 48px); }
.footer h4 { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(244,241,234,.55); margin: 0 0 14px; font-weight: 600; }
/* Column links only - never the footer CTA button or the wordmark mark. */
.footer a:not(.btn):not(.mark) { display: block; padding: 6px 0; color: rgba(244,241,234,.88); text-decoration: none; font-size: 15px; }
.footer a:not(.btn):not(.mark):hover { color: #fff; text-decoration: underline; }
.footer .mark { display: inline-flex; padding: 0; font-size: 24px; color: var(--paper); }
.footer .btn { display: inline-flex; width: fit-content; margin-top: 2px; padding: 14px 24px; font-size: 15px; }
.footer .btn.btn--ember { color: #fff; }
.footer__wordmark { font-family: var(--disp); font-weight: 500; font-size: clamp(64px, 16vw, 240px); line-height: .82; letter-spacing: -.04em; margin: clamp(40px, 5vw, 72px) 0 0; color: rgba(244,241,234,.14); white-space: nowrap; }
.footer__bottom { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(244,241,234,.18); margin-top: 28px; padding-top: 20px; font-size: 12.5px; color: rgba(244,241,234,.6); }

/* 404 + utility */
.nf { padding: clamp(80px, 12vw, 180px) 0; }
.state { border: 1px dashed var(--line); border-radius: 16px; padding: clamp(24px, 3vw, 44px); }
.skel { border-radius: 16px; background: linear-gradient(90deg, var(--bone), #F2EEE6, var(--bone)); background-size: 200% 100%; animation: sk 1.5s linear infinite; }
@keyframes sk { from { background-position: 200% 0 } to { background-position: 0 0 } }
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* focus + motion */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ticker__track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* responsive */
@media (max-width: 1100px) {
  .hero__row { grid-template-columns: 1fr; }
  .cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .editorial { grid-template-columns: 1fr; }
  .editorial__rail { position: static; }
  .pgrid, .cgrid { grid-template-columns: 1fr; }
  .pgrid__sticky { position: static; }
}
@media (max-width: 760px) {
  .nav, .mast__cta .btn { display: none; }
  .burger { display: block; }
  .shead { grid-template-columns: 1fr; }
  .srow { grid-template-columns: 40px 1fr 24px; gap: 14px; }
  .srow__desc { grid-column: 2 / -1; }
  .tile--a, .tile--b, .tile--c, .tile--d, .tile--e, .tile--f { grid-column: span 12; aspect-ratio: 4/3; }
  .monotiles, .cards, .artgrid, .studio-figs { grid-template-columns: 1fr; }
  .formrow { grid-template-columns: 1fr; }
  .rlist a { grid-template-columns: 1fr; gap: 6px; }
  .rlist__read { text-align: left; }
  .features, .feature { grid-template-columns: 1fr; }
  .hc-1, .hc-2, .hc-3 { grid-column: span 12; aspect-ratio: 4/3; }
  .footer__grid { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 56px 1fr; }
}


/* ============================================================================
   AA contrast corrections — text ink only, hue preserved.
   Each pair below is inherited verbatim from the pinned MagicPath design and
   fails WCAG 2.2 AA 1.4.3 at its rendered size. Band/field backgrounds are
   untouched; only the foreground ink moves by the minimum needed to reach
   4.5:1 (measured values recorded in 03-wordpress/STATUS.md).
   ========================================================================== */
.band--ember .btn--light { color: #FFFFFF; }              /* 4.40 -> 4.96 on #C2472E */
.band--ember .t-small, .band--ember figcaption { color: rgba(255,255,255,.95); }
.monotile--ember .monotile__role { opacity: .95; }        /* 3.22 -> 4.64 on #C2472E */
.band--ink .card__meta, .band--ink .t-small, .band--ink figcaption { color: #9AA1AB; } /* 3.44 -> 6.06 on #202327 */
.band--ink .card__body { color: #A6ADB7; }                /* 2.12 -> 6.97 on #202327 */