@font-face { font-family: "Cormorant PM"; src: url("assets/fonts/CormorantGaramond-Medium.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Cormorant PM"; src: url("assets/fonts/CormorantGaramond-SemiBold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Cormorant PM"; src: url("assets/fonts/CormorantGaramond-SemiBoldItalic.ttf") format("truetype"); font-style: italic; font-weight: 600; font-display: swap; }
@font-face { font-family: "Literata PM"; src: url("assets/fonts/Literata-Variable.ttf") format("truetype"); font-style: normal; font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Literata PM"; src: url("assets/fonts/Literata-Italic-Variable.ttf") format("truetype"); font-style: italic; font-weight: 200 900; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #f1eee4;
  --ink: #24241f;
  --ink-soft: #625f52;
  --rule: rgba(36,36,31,.23);
  --sheet: #faf7ee;
  --emboss-face: #eeeadd;
  --serif: "Cormorant PM", Georgia, serif;
  --body: "Literata PM", Georgia, serif;
  --book: var(--body);
  --page-edge: clamp(24px,6vw,88px);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --section-space: clamp(76px,8vw,120px);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; scrollbar-color: var(--ink) var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
::selection { color: var(--paper); background: var(--ink); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { border: 3px solid var(--paper); background: var(--ink); }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible h2 { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.3; }
figure, h1, h2, h3, p, dl, dd { margin: 0; }
h2, h3 { text-wrap: balance; }
.page-width { width: min(1200px,calc(100% - var(--page-edge) * 2)); margin-inline: auto; }
main { position: relative; isolation: isolate; overflow: clip; background: var(--paper); }
.paper-stage { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.paper-surface { position: absolute; inset: 0; opacity: .28; background: url("assets/plates/paper-texture-scroll.webp") center top / max(100%,159.879svh) auto repeat-y; }
.paper-stage.is-pinned .paper-surface { position: sticky; inset: auto; width: 100%; }
.skip-content { position: fixed; top: 12px; left: 20px; z-index: 20; padding: 14px 20px; color: var(--paper); background: var(--ink); transform: translateY(-180%); }
.skip-content:focus { transform: none; }
#about, #work, #collaboration { scroll-margin-top: 54px; }

/* The cover retains its lettering and composition. */
.hero { position: relative; min-height: 100svh; overflow: hidden; }
.site-header { width: calc(100% - clamp(48px,8vw,128px)); position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 25px; font: 600 20px/1.3 var(--serif); }
.site-header a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 9px; white-space: nowrap; text-decoration: none; }
.site-header a:hover { text-decoration: underline; }
.site-header nav { display: flex; gap: clamp(24px,2.7vw,44px); }
.hero-emboss, .hero-title { position: absolute; left: 50%; top: 49%; width: max-content; margin: 0; white-space: nowrap; transform: translate(-50%,-50%); }
.emboss-defs { position: absolute; pointer-events: none; }
.hero-emboss { color: var(--emboss-face); font: 500 clamp(158px,15.7vw,249px)/.9 var(--serif); letter-spacing: -.035em; }
.hero-title { color: var(--ink); font: italic 600 clamp(102px,9.75vw,155px)/.95 var(--serif); letter-spacing: -.04em; }

/* A portrait laid on two real torn sheets, beside a readable biography. */
.about { display: grid; grid-template-columns: .88fr 1.12fr; gap: 64px clamp(48px,7vw,106px); align-items: center; padding-block: var(--section-space); }
.about-identity { position: relative; width: 100%; max-width: 410px; }
.about-photo-print { position: relative; isolation: isolate; padding: 22px 26px 18px; transform: rotate(-2deg); }
.about-photo-print::before, .about-photo-print::after { position: absolute; content: ""; z-index: -1; background: url("assets/paper/portrait-sheet.webp") center / 100% 100% no-repeat; filter: sepia(.2) drop-shadow(2px 6px 5px rgba(59,48,25,.18)); }
.about-photo-print::before { inset: 45px -9px -3px 20px; transform: rotate(5deg); }
.about-photo-print::after { inset: 22px 0 0; }
.about-portrait-image { position: relative; display: block; width: 100%; height: auto; filter: saturate(.15) contrast(.95); }
.about-identity-caption { position: relative; width: 100%; margin: 20px 0 0; padding: 0 26px; text-align: left; }
.about-name { display: block; font: 500 28px/1.2 var(--serif); }
.about-fields { display: block; margin-top: 7px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.about h2, .section-intro h2 { font: 500 clamp(48px,4.8vw,68px)/1.08 var(--serif); letter-spacing: -.025em; }
.about h2 { margin-bottom: 28px; }
.about-lead { max-width: 27ch; margin-bottom: 28px; font: 400 clamp(23px,2vw,28px)/1.45 var(--body); letter-spacing: -.01em; text-wrap: pretty; }
.about-story { max-width: 58ch; font-size: 16px; line-height: 1.75; }
.about-story p + p { margin-top: 18px; }
.about-contact { grid-column: 1 / -1; display: grid; grid-template-columns: .8fr repeat(3,1fr); align-items: center; gap: 28px; padding-block: 20px; border-block: 1px solid var(--rule); font-style: normal; }
.about-contact h3 { font: 500 28px/1.2 var(--serif); }
.about-contact a { display: grid; grid-template-columns: 1fr 14px; gap: 5px 12px; align-content: center; min-height: 52px; padding-block: 6px; text-decoration: none; font-size: 14px; line-height: 1.5; }
.contact-service { grid-column: 1 / -1; color: var(--ink-soft); font-size: 13px; }
.about-contact a:hover > span:last-of-type { text-decoration: underline; }
.about-contact svg { width: 13px; height: 13px; align-self: center; }

/* The real project is presented as a printed website preview. */
.selected-work { padding-block: 28px var(--section-space); }
.section-intro { display: grid; grid-template-columns: 1fr .75fr; gap: 80px; align-items: end; }
.section-intro > p { max-width: 37ch; font-size: 16px; line-height: 1.7; }
.case-spread { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(36px,5vw,76px); align-items: center; }
.case-spread + .case-spread { margin-top: 100px; }
.case-art { min-width: 0; container-type: inline-size; }
.case-spread--featured { margin-top: 48px; align-items: start; }
.case-site-print { display: block; padding: 12px; background: var(--sheet); transform: rotate(-.6deg); box-shadow: 2px 7px 14px rgba(36,36,31,.1); }
.case-site-print img { display: block; width: 100%; height: auto; }
.case-description { margin-top: 23px; }
.case-visit { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; margin-top: 14px; padding-block: 10px; font-size: 14px; line-height: 1.5; text-decoration: none; }
.case-visit:hover { text-decoration: underline; }
.case-visit svg { width: 15px; height: 15px; }
.case-art figcaption { margin-top: 16px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.case-copy h3 { margin-bottom: 6px; font: 500 clamp(36px,3.2vw,48px)/1.1 var(--serif); letter-spacing: -.025em; }
.case-subtitle { font-size: 16px; line-height: 1.5; }
.case-copy > p:not(.case-subtitle) { font-size: 16px; line-height: 1.7; }
.case-facts { margin-top: 24px; font-size: 13px; line-height: 1.65; }
.case-facts > div { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding-block: 7px; }
.case-facts dt { color: var(--ink-soft); }
.case-details { margin-top: 25px; border-block: 1px solid var(--rule); font-size: 15px; line-height: 1.65; }
.case-details summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 50px; padding-block: 14px; cursor: pointer; list-style: none; }
.case-details summary::-webkit-details-marker { display: none; }
.case-details summary svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 180ms var(--ease-out); }
.case-details[open] summary svg { transform: rotate(45deg); }
.case-details > div { padding-bottom: 22px; }
.case-details p + p { margin-top: 12px; }
/* Six views, one native vertical scroll path. */
.skills { position: relative; padding-block: 30px 60px; }
.skills-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 20px; }
.skills-header h2 { font: 500 34px/1.15 var(--serif); letter-spacing: -.02em; }
.skills-skip { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; padding-block: 10px; font-size: 13px; line-height: 1.5; text-decoration: none; }
.skills-skip:hover { text-decoration: underline; }
.skills-skip svg { width: 12px; height: 16px; }
.skills-viewport { min-width: 0; }
.skill-scene { padding-block: 40px 60px; }
.skill-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px,4.5vw,76px); align-items: center; }
.skill-copy { padding-block: 12px; }
.skill-copy h3 { margin-bottom: 24px; font: 500 clamp(42px,4.2vw,62px)/1.07 var(--serif); letter-spacing: -.025em; }
.skill-summary { max-width: 41ch; font-size: 16px; line-height: 1.7; }
.skill-proof { margin: 24px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.65; }
.skill-proof li { position: relative; padding-left: 18px; }
.skill-proof li + li { margin-top: 7px; }
.skill-proof li::before { position: absolute; left: 0; top: .75em; content: ""; width: 7px; height: 1px; background: currentColor; }
.skill-art { min-width: 0; container-type: inline-size; }
.diagram-board { position: relative; isolation: isolate; width: 100%; font-size: 1cqw; }
.diagram-board b { font-weight: 500; }
.diagram-node { position: relative; z-index: 1; min-width: 0; }
.diagram-wires { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; }
.diagram-wires .wire-line { stroke-width: 1.1; opacity: .58; }
.diagram-wires .route-flow { stroke-width: 1.9; }
.routing-lane { pointer-events: none; }
.wire-port { position: absolute; z-index: 4; display: block; width: 6px; height: 6px; border: 1px solid var(--ink); border-radius: 50%; background: var(--sheet); }
.wire-port--left { left: -3px; top: calc(50% - 3px); }
.wire-port--right { right: -3px; top: calc(50% - 3px); }
.wire-port--top { top: -3px; left: calc(50% - 3px); }
.wire-port--bottom { bottom: -3px; left: calc(50% - 3px); }
.paper-note { --note-texture: url("assets/paper/writing-sheet.webp"); position: relative; isolation: isolate; }
.paper-note::before, .paper-note::after { position: absolute; z-index: -1; inset: -3%; content: ""; background: var(--note-texture) center / 100% 100% no-repeat; filter: sepia(.2) drop-shadow(1px 5px 4px rgba(59,48,25,.16)); }
.paper-note::before { transform: translate(3px,5px) rotate(1.3deg); filter: sepia(.3) brightness(.96) drop-shadow(1px 3px 3px rgba(59,48,25,.12)); }
.pin { position: absolute; z-index: 3; top: 4%; left: 49%; width: 8px; height: 8px; border: 1px solid #6b6859; border-radius: 50%; background: #aaa591; box-shadow: 1px 3px 3px rgba(36,36,31,.2); }

/* Design: a real working grid with a clearly connected second viewport. */
.design-board .diagram-wires { color: var(--paper); }
.design-board { aspect-ratio: 640 / 440; min-height: 230px; }
.cutting-mat { position: absolute; z-index: -1; inset: 3% 2% 2% 0; color: var(--paper); background-color: #292b24; background-image: linear-gradient(rgba(241,238,228,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(241,238,228,.11) 1px,transparent 1px); background-size: 4cqw 4cqw; transform: rotate(-2deg); }
.cutting-mat > span { position: absolute; left: 4%; bottom: 3%; font-size: max(9px,1.65cqw); }
.design-sheet { position: absolute; left: 5%; top: 9%; width: 64%; height: 76%; background: var(--sheet); transform: rotate(-1deg); box-shadow: 2px 7px 12px rgba(36,36,31,.14); }
.design-toolbar { display: flex; align-items: center; justify-content: space-between; height: 15%; padding-inline: 6%; border-bottom: 1px solid var(--rule); font-size: max(8px,1.9cqw); }
.design-page { padding: 5% 7%; }
.design-page-nav { display: flex; align-items: center; justify-content: space-between; }
.design-page-nav b { font: 500 4cqw/1 var(--serif); }
.design-page-nav i { width: 27%; height: 1px; background: var(--ink); }
.design-selection { position: relative; margin: 9% 0 8%; padding: 5%; border: 1px solid var(--ink); font: 500 clamp(16px,4cqw,26px)/1.15 var(--serif); }
.design-selection > i { position: absolute; width: 4px; height: 4px; border: 1px solid var(--ink); background: var(--sheet); }
.design-selection > i:nth-of-type(1) { left: -3px; top: -3px; }
.design-selection > i:nth-of-type(2) { right: -3px; top: -3px; }
.design-selection > i:nth-of-type(3) { left: -3px; bottom: -3px; }
.design-selection > i:nth-of-type(4) { right: -3px; bottom: -3px; }
.design-cursor { position: absolute; right: 10%; bottom: 10%; width: clamp(12px,3cqw,18px); color: var(--ink); fill: var(--sheet); }
.design-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; height: 6cqw; }
.design-columns i { background: #dad6c8; }
.design-columns i:last-child { background: var(--ink); }
.design-text-lines { display: grid; gap: 6px; margin-top: 12px; }
.design-text-lines i { display: block; height: 1px; background: var(--rule); }
.design-text-lines i:last-child { width: 72%; }
.design-gap { position: absolute; left: 70%; right: 23%; top: 0; bottom: 0; }
.design-mobile { position: absolute; left: 78%; top: 43%; width: 21%; height: 55%; padding: 20px 8px 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--sheet); }
.phone-speaker { position: absolute; top: 6%; left: 36%; width: 28%; height: 2px; background: var(--ink); }
.mobile-page { overflow: hidden; height: 100%; }
.mobile-page > b { font: 500 3.5cqw/1 var(--serif); }
.mobile-page > i { display: block; height: 6cqw; margin-block: 2cqw; background: var(--ink); }
.mobile-page > span { font-size: max(8px,1.7cqw); line-height: 1.45; }
.mobile-page .design-text-lines { gap: 4px; margin-top: 8px; }

/* CRM: entry and return wires each have their own empty gutter. */
.automation-board { display: grid; grid-template-columns: minmax(0,1fr) 36px minmax(0,1.1fr) 24px; grid-template-rows: auto 30px auto 24px auto; padding: 10px 4px 4px; }
.request-note { grid-column: 1; grid-row: 1; align-self: center; padding: 18px 12px 18px 0; border-block: 1px solid var(--rule); }
.request-note b { display: block; font: 500 clamp(20px,4.6cqw,31px)/1.1 var(--serif); }
.request-note span { display: block; margin-top: 10px; font-size: max(10px,2cqw); line-height: 1.6; }
.crm-entry { grid-column: 2; grid-row: 1; }
.crm-systems { grid-column: 3; grid-row: 1; display: grid; gap: 18px; }
.crm-system { display: grid; place-items: center; min-height: 52px; padding: 12px 8px; background: var(--ink); color: var(--sheet); font-size: max(14px,3cqw); line-height: 1.5; }
.crm-return { grid-column: 4; grid-row: 1 / 4; }
.task-note { grid-column: 1 / 4; grid-row: 3; padding: 22px 8% 28px; }
.task-note b { display: block; margin-bottom: 8px; font: 500 clamp(21px,4.7cqw,31px)/1.15 var(--serif); }
.task-note span { display: block; font-size: max(11px,2cqw); line-height: 1.55; }
.custom-system { grid-column: 1 / 4; grid-row: 5; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 18px; font-size: max(10px,1.9cqw); line-height: 1.6; }

/* Operations: an actual handoff table, with a separate approval and finance note. */
.operations-board { display: grid; gap: 22px; padding: 12px 14px 4px; }
.project-sheet { padding: 24px 7% 40px; }
.project-sheet-title { display: block; font: 500 clamp(19px,4.5cqw,29px)/1.15 var(--serif); }
.operation-table { margin-top: 18px; }
.operation-table > div { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 10px; padding-block: 8px; border-bottom: 1px solid var(--rule); font-size: max(10px,1.9cqw); line-height: 1.5; }
.operation-table b { font-weight: 500; }
.project-notes { display: grid; gap: 18px; }
.sheet-check { display: inline-flex; align-items: center; gap: 8px; font-size: max(10px,1.9cqw); line-height: 1.5; }
.sheet-check svg { width: 14px; height: 14px; flex-shrink: 0; }
.finance-note b { display: block; font: 500 clamp(20px,4.3cqw,28px)/1.15 var(--serif); }
.finance-note small { display: block; margin-top: 6px; font-size: max(10px,1.9cqw); line-height: 1.6; }

/* Sales: route below stage labels, then two distinct handoff branches. */
.sales-board { display: grid; grid-template-columns: minmax(0,1.75fr) 28px minmax(0,1fr); grid-template-rows: auto 34px auto; padding: 10px 8px 6px; }
.sales-stages { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.sales-stage { min-height: 44px; padding: 0 5px 20px; text-align: center; font-size: max(10px,2.1cqw); line-height: 1.5; }
.sales-bridge { grid-column: 1 / -1; grid-row: 2; }
.proposal-note { grid-column: 1; grid-row: 3; padding: 26px 11% 34px; }
.proposal-note b { display: block; font: 500 clamp(19px,4.5cqw,29px)/1.15 var(--serif); }
.proposal-lines { display: grid; gap: 10px; margin-top: 18px; font-size: max(10px,2cqw); line-height: 1.5; }
.proposal-lines span { display: flex; align-items: center; gap: 12px; }
.proposal-lines i { flex: 1; height: 1px; background: var(--rule); }
.followup-note { grid-column: 3; grid-row: 3; align-self: start; padding: 24px 6px 0; }
.followup-note b { display: block; margin-bottom: 14px; font: 500 clamp(18px,4cqw,26px)/1.15 var(--serif); }
.followup-note span { display: block; margin-top: 7px; font-size: max(10px,1.95cqw); line-height: 1.6; }

/* Marketing: creative, three channels and a real connected destination. */
.marketing-board { display: grid; grid-template-columns: minmax(0,1.1fr) 34px minmax(0,1fr) 26px; grid-template-rows: repeat(3,58px) 34px auto; padding: 10px 4px 8px; }
.creative-print { grid-column: 1; grid-row: 1 / 4; display: flex; align-items: center; padding: 20px 16px; background: var(--ink); color: var(--sheet); transform: rotate(-2deg); box-shadow: 2px 5px 9px rgba(36,36,31,.15); }
.creative-print b { display: block; font: 500 clamp(24px,5.7cqw,38px)/1.05 var(--serif); }
.creative-print em { font-weight: 600; }
.creative-print span { display: block; margin-top: 30px; font-size: max(9px,1.8cqw); line-height: 1.5; }
.channel-entry { grid-column: 2; grid-row: 1 / 4; }
.channel-node { grid-column: 3; justify-self: start; width: max-content; max-width: 100%; display: flex; align-items: center; padding: 10px 14px; font-size: max(13px,2.9cqw); line-height: 1.5; }
.channel-context { grid-row: 1; }
.channel-target { grid-row: 2; }
.channel-email { grid-row: 3; }
.channel-return { grid-column: 4; grid-row: 1 / 6; }
.landing-note { grid-column: 1 / 4; grid-row: 5; padding: 18px 24px 26px; }
.landing-note b { display: block; font: 500 clamp(22px,4.7cqw,31px)/1.1 var(--serif); }
.landing-note span { display: block; margin-top: 7px; font-size: max(11px,2cqw); line-height: 1.5; }

/* Team: measured ports, separated role columns and a single coordinating note. */
.team-board { display: grid; grid-template-columns: minmax(0,1fr) 30px minmax(0,1.05fr) 30px minmax(0,1fr); grid-template-rows: repeat(3,minmax(76px,auto)); row-gap: 20px; padding: 14px 0; }
.team-node { align-self: center; padding: 8px 10px; }
.team-node b { display: block; font-size: max(12px,2.6cqw); line-height: 1.4; }
.team-node span { display: block; margin-top: 6px; font-size: max(10px,1.8cqw); line-height: 1.55; }
.team-designers { grid-column: 1; grid-row: 1; }
.team-sellers { grid-column: 1; grid-row: 3; }
.team-left-lane { grid-column: 2; grid-row: 1 / 4; }
.team-hub { --note-texture: url("assets/paper/soft-scrap.webp"); grid-column: 3; grid-row: 1 / 4; align-self: center; padding: 26px 10px 30px; text-align: center; }
.team-hub b { display: block; font: 500 clamp(26px,5.8cqw,38px)/1.1 var(--serif); }
.team-hub span { display: block; margin-top: 8px; font-size: max(10px,1.8cqw); line-height: 1.5; }
.team-right-lane { grid-column: 4; grid-row: 1 / 4; }
.team-bitrix-node { grid-column: 5; grid-row: 1; }
.team-developers { grid-column: 5; grid-row: 2; }
.team-infrastructure { grid-column: 5; grid-row: 3; }

.skills-footer { display: flex; justify-content: flex-end; }
.skills-footer > :not(.motion-toggle) { display: none; }
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 12px; line-height: 1.5; cursor: pointer; white-space: nowrap; }
.motion-toggle:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .25em; }
.motion-toggle svg { width: 13px; height: 13px; }
.motion-play, .motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.motion-toggle[aria-pressed="true"] .motion-play { display: block; }
.is-scroll-driven { padding: 0; view-timeline-name: --skills-travel; view-timeline-axis: block; }
.is-scroll-driven .skills-pin { position: sticky; top: 0; display: flex; flex-direction: column; height: 100svh; padding-block: 26px 24px; overflow: hidden; }
.is-scroll-driven .skills-viewport { flex: 1; min-height: 0; overflow: hidden; }
.is-scroll-driven .skills-track { display: flex; height: 100%; animation: skills-travel 1s linear both; animation-timeline: --skills-travel; animation-range: contain; }
.is-scroll-driven .skill-scene { display: flex; align-items: center; flex: 0 0 100%; min-width: 0; padding-block: 10px 32px; }
.is-scroll-driven .skill-layout { width: min(1200px,calc(100% - var(--page-edge) * 2)); }
.is-scroll-driven .skills-footer { display: grid; grid-template-columns: auto auto 1fr 130px auto; align-items: center; gap: 24px; padding-top: 12px; font-size: 13px; line-height: 1.5; }
.is-scroll-driven .skills-footer > :not(.motion-toggle) { display: block; }
.is-scroll-driven .skills-footer .scroll-instruction { display: flex; }
.is-scroll-driven .skills-progress > span { animation: skills-progress 1s linear both; animation-timeline: --skills-travel; animation-range: contain; }
.scroll-instruction { display: flex; align-items: center; gap: 10px; }
.scroll-instruction svg { width: 11px; height: 15px; }
.skills-next { justify-self: end; color: var(--ink-soft); }
.skills-progress { height: 1px; background: var(--rule); overflow: hidden; }
.skills-progress > span { display: block; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.skills-counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
.skills.is-in-view .skills-track { will-change: transform; }
.skill-art path[pathLength]:not(.route-flow) { opacity: .4; }
.route-flow { stroke-width: 1.9; stroke-dasharray: .055 .945; animation: route-flow 4.8s linear infinite; animation-play-state: paused; }
.design-cursor { animation: cursor-cycle 6s var(--ease-out) infinite; animation-play-state: paused; }
.sheet-check svg { animation: check-cycle 4.8s var(--ease-out) infinite; animation-play-state: paused; transform-origin: center; }
.is-animating .route-flow, .is-animating .design-cursor, .is-animating .sheet-check svg { animation-play-state: running; }
@keyframes route-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes cursor-cycle { 0%, 12%, 100% { transform: translate(6px,4px); } 32%, 62% { transform: translate(0,0); } 76%, 88% { transform: translate(3px,-2px); } }
@keyframes check-cycle { 0%, 14%, 100% { transform: scale(.8); opacity: .35; } 30%, 84% { transform: scale(1); opacity: 1; } }
@keyframes skills-travel {
  0%, 6% { transform: translate3d(0,0,0); }
  16.6667%, 22.6667% { transform: translate3d(-100%,0,0); }
  33.3333%, 39.3333% { transform: translate3d(-200%,0,0); }
  50%, 56% { transform: translate3d(-300%,0,0); }
  66.6667%, 72.6667% { transform: translate3d(-400%,0,0); }
  83.3333%, 100% { transform: translate3d(-500%,0,0); }
}
@keyframes skills-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Observations rather than another list of process steps. */
.approach { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(56px,8vw,120px); padding-block: var(--section-space); border-top: 1px solid var(--rule); }
.approach h2 { font: 500 clamp(44px,4.4vw,62px)/1.1 var(--serif); letter-spacing: -.025em; }
.approach-intro > p { max-width: 33ch; margin-top: 28px; font-size: 16px; line-height: 1.7; }
.approach-notes article + article { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--rule); }
.approach-notes h3 { margin-bottom: 14px; font: 500 31px/1.2 var(--serif); letter-spacing: -.015em; }
.approach-notes p { max-width: 56ch; font-size: 16px; line-height: 1.75; }
.collaboration { padding-block: 32px var(--section-space); }
.collaboration .section-intro { margin-bottom: 42px; }
.collaboration-row { display: grid; grid-template-columns: .7fr 1.4fr .65fr; align-items: start; gap: 40px; padding-block: 30px; border-top: 1px solid var(--rule); }
.collaboration-row:last-child { border-bottom: 1px solid var(--rule); }
.collaboration-row h3 { font: 500 34px/1.15 var(--serif); letter-spacing: -.02em; }
.collaboration-row > p { max-width: 49ch; font-size: 16px; line-height: 1.7; }
.collaboration-row > span { padding-top: 5px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; text-align: right; }
.contact-close { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 70px 80px; padding-top: 46px; }
.contact-close h2 { font: 500 clamp(60px,6.1vw,88px)/1.05 var(--serif); letter-spacing: -.03em; }
.contact-close h2 em { font-weight: 600; }
.contact-close header > p { max-width: 35ch; margin-top: 28px; font-size: 16px; line-height: 1.7; }
.contact-close-links { padding-bottom: 7px; font-style: normal; }
.contact-primary { display: inline-flex; align-items: center; gap: 24px; min-height: 56px; padding-block: 10px; font: 500 31px/1.2 var(--serif); text-decoration: none; border-bottom: 1px solid var(--ink); }
.contact-primary svg { width: 22px; height: 22px; transition: transform 200ms var(--ease-out); }
.contact-primary:hover svg { transform: translate(2px,-2px); }
.contact-secondary { display: flex; flex-wrap: wrap; gap: 20px 42px; margin-top: 34px; }
.contact-secondary a { display: flex; flex-direction: column; gap: 8px; min-height: 48px; padding-block: 4px; font-size: 14px; line-height: 1.5; text-decoration: none; }
.contact-secondary a:hover { text-decoration: underline; }
.contact-secondary a > span { color: var(--ink-soft); font-size: 13px; }
.site-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; padding-block: 23px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.5; }
.site-footer a { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer svg { width: 12px; height: 16px; }

@media (min-width: 801px) and (max-height: 780px) {
  .is-scroll-driven .skills-pin { padding-block: 20px; }
  .skills-header { padding-bottom: 12px; }
  .skill-copy h3 { font-size: clamp(40px,4vw,54px); margin-bottom: 20px; }
  .skill-summary { font-size: 16px; }
  .skill-proof { margin-top: 20px; font-size: 14px; }
  .skill-art { width: min(100%,calc((100svh - 185px) * 1.4545)); justify-self: center; }
}
@media (max-width: 1050px) {
  .about { column-gap: 48px; }
  .about-story { font-size: 16px; }
  .about-contact { gap: 20px; }
  .about-contact a { font-size: 14px; }
  .section-intro { gap: 40px; }
  .case-spread { gap: 36px; }
  .collaboration-row { gap: 28px; }
  .contact-close { gap: 56px 40px; }
  .contact-primary { font-size: 27px; gap: 18px; }
  .is-scroll-driven .skills-footer { grid-template-columns: auto 1fr auto; gap: 8px 15px; }
  .is-scroll-driven .skills-footer .skills-next { display: none; }
  .motion-toggle { justify-self: end; }
  .skills-progress { grid-column: 1 / -1; grid-row: 2; }
  .skills-counter { grid-column: 3; grid-row: 1; }
}
@media (max-width: 800px) {
  :root { --page-edge: 28px; }
  .site-header { font-size: 18px; }
  .site-header nav { gap: 22px; }
  .hero-title { font-size: clamp(80px,12vw,110px); }
  .hero-emboss { font-size: clamp(146px,20vw,190px); }
  .about { grid-template-columns: .8fr 1.2fr; gap: 44px 30px; }
  .about-lead { font-size: 22px; }
  .about-story { font-size: 16px; }
  .about-contact { grid-template-columns: repeat(3,1fr); }
  .about-contact h3 { grid-column: 1 / -1; }
  .case-spread { grid-template-columns: 1fr; gap: 28px; }
  .case-copy { max-width: 590px; }
  .case-spread + .case-spread { margin-top: 72px; }
  .section-intro { align-items: start; grid-template-columns: 1fr .8fr; }
  .skill-copy h3 { font-size: 43px; }
  .skill-summary { font-size: 16px; }
  .skill-proof { font-size: 14px; }
  .skill-layout { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .skill-copy h3 br { display: none; }
  .skill-art { width: min(100%,390px); align-self: center; }
  .operation-table > div { gap: 8px; font-size: 11px; line-height: 1.45; }
  .approach { grid-template-columns: .9fr 1.1fr; gap: 40px; }
  .approach h2 { font-size: 46px; }
  .collaboration-row { grid-template-columns: .7fr 1.3fr; gap: 16px 30px; }
  .collaboration-row > span { grid-column: 2; text-align: left; }
  .contact-close { grid-template-columns: 1fr; align-items: start; gap: 36px; }
  .contact-close h2 { font-size: 76px; }
  .contact-primary { font-size: 31px; }
}
@media (max-width: 600px) {
  :root { --page-edge: 24px; --section-space: 76px; }
  .site-header { align-items: start; gap: 12px; padding-top: 19px; font-size: 18px; }
  .site-header nav { display: grid; grid-template-columns: repeat(2,auto); gap: 0 20px; font-size: 16px; }
  .hero-title { font-size: clamp(64px,16vw,96px); }
  .hero-emboss { font-size: clamp(112px,29vw,170px); }
  .about { display: flex; flex-direction: column; align-items: stretch; gap: 32px; }
  .about-text { display: contents; }
  .about h2 { order: 0; margin-bottom: -12px; font-size: 52px; }
  .about-lead { order: 1; max-width: 25ch; margin: 0; font-size: 23px; }
  .about-identity { order: 2; width: 92%; max-width: 350px; align-self: center; margin-block: 2px 14px; }
  .about-photo-print { padding: 18px 22px 16px; }
  .about-story { order: 3; font-size: 16px; }
  .about-identity-caption { padding-inline: 22px; }
  .about-name { font-size: 27px; }
  .about-contact { order: 4; grid-template-columns: 1fr; gap: 4px; padding-block: 18px; }
  .about-contact h3 { margin-bottom: 8px; }
  .about-contact a { grid-template-columns: .8fr 1fr 13px; align-items: center; gap: 12px; min-height: 48px; font-size: 14px; }
  .contact-service { grid-column: auto; }
  .selected-work { padding-top: 16px; }
  .section-intro { display: block; }
  .section-intro h2 { font-size: 50px; }
  .section-intro > p { max-width: 35ch; margin-top: 23px; font-size: 16px; }
  .case-copy h3 { font-size: 39px; }
  .case-subtitle { font-size: 16px; }
  .case-copy > p:not(.case-subtitle) { font-size: 16px; }
  .case-spread--featured { margin-top: 36px; }
  .case-site-print { padding: 9px; }
  .case-art figcaption { margin-top: 13px; font-size: 13px; }
  .case-facts > div { grid-template-columns: 70px 1fr; }
  .skills-header { align-items: center; padding-bottom: 12px; gap: 16px; }
  .skills-header h2 { font-size: 29px; }
  .skills-skip { gap: 7px; font-size: 12px; }
  .skill-layout { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .skill-copy { padding: 0; }
  .skill-copy h3 { font-size: 41px; margin-bottom: 18px; }
  .skill-copy h3 br { display: none; }
  .skill-summary { max-width: 40ch; font-size: 16px; line-height: 1.7; }
  .skill-proof { margin-top: 18px; font-size: 14px; line-height: 1.65; }
  .skill-proof li + li { margin-top: 5px; }
  .skill-art { width: min(100%,390px); align-self: center; margin-bottom: 18px; }
  .skill-scene { padding-block: 28px 50px; }
  .is-scroll-driven .skills-pin { padding-block: 20px 18px; }
  .is-scroll-driven .skill-scene { padding-block: 8px 20px; }
  .is-scroll-driven .skill-layout { gap: 28px; }
  .is-scroll-driven .skills-footer { grid-template-columns: auto 1fr auto; gap: 8px 15px; padding-top: 10px; font-size: 12px; }
  .is-scroll-driven .skills-footer .skills-next { display: none; }
  .motion-toggle { justify-self: end; font-size: 11px; }
  .skills-progress { grid-column: 1 / -1; grid-row: 2; }
  .skills-counter { grid-column: 3; grid-row: 1; }
  .operation-table > div { gap: 5px; padding-block: 6px; font-size: 10px; line-height: 1.45; }
  .operation-table b { font-size: 10px; }
  .sheet-check { margin-top: 0; gap: 6px; font-size: 10px; }
  .sheet-check svg { width: 11px; height: 11px; }
  .finance-note small { font-size: 10px; }
  .finance-note > span { font-size: 10px; }
  .pin { width: 6px; height: 6px; }
  .approach { grid-template-columns: 1fr; gap: 38px; }
  .approach h2 { font-size: 47px; }
  .approach-intro > p { margin-top: 22px; font-size: 16px; }
  .approach-notes h3 { font-size: 29px; }
  .approach-notes p { font-size: 16px; }
  .approach-notes article + article { margin-top: 28px; padding-top: 28px; }
  .collaboration .section-intro { margin-bottom: 32px; }
  .collaboration-row { grid-template-columns: 1fr; gap: 14px; padding-block: 28px; }
  .collaboration-row h3 { font-size: 33px; }
  .collaboration-row > p { font-size: 16px; }
  .collaboration-row > span { grid-column: 1; padding: 0; }
  .contact-close { padding-top: 18px; gap: 32px; }
  .contact-close h2 { font-size: clamp(48px,13vw,64px); }
  .contact-close header > p { font-size: 16px; margin-top: 24px; }
  .contact-primary { font-size: 29px; gap: 18px; }
  .contact-primary svg { width: 19px; height: 19px; }
  .contact-secondary { gap: 20px 28px; margin-top: 26px; }
  .site-footer { margin-top: 24px; font-size: 12px; }
}

@media (max-width: 600px) {
  .automation-board { grid-template-columns: minmax(0,1fr) 26px minmax(0,1.1fr) 18px; grid-template-rows: auto 24px auto 18px auto; }
  .crm-system { min-height: 44px; padding-block: 8px; }
  .crm-systems { gap: 14px; }
  .request-note { padding-block: 12px; }
  .task-note { padding-block: 18px 24px; }
  .operations-board { gap: 16px; padding-inline: 10px; }
  .project-sheet { padding-block: 20px 32px; }
  .operation-table { margin-top: 12px; }
  .project-notes { gap: 10px; }
  .sales-board { grid-template-columns: minmax(0,1.75fr) 24px minmax(0,1fr); grid-template-rows: auto 24px auto; }
  .proposal-note { padding: 22px 11% 28px; }
  .proposal-lines { gap: 7px; margin-top: 14px; }
  .followup-note { padding: 22px 4px 0; }
  .marketing-board { grid-template-columns: minmax(0,1.1fr) 26px minmax(0,1fr) 18px; grid-template-rows: repeat(3,48px) 26px auto; }
  .creative-print { padding-inline: 12px; }
  .creative-print span { margin-top: 22px; }
  .channel-node { padding-inline: 10px; }
  .landing-note { padding: 16px 22px 22px; }
  .team-board { grid-template-columns: minmax(0,1fr) 20px minmax(0,1.05fr) 20px minmax(0,1fr); row-gap: 8px; }
  .team-node { padding-inline: 8px; }
  .team-hub { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .route-flow, .motion-toggle { display: none; }
  .diagram-wires .wire-line { opacity: .8; }
}