/* Approved static Design Lock. Shared design tokens. */
:root {
  color-scheme: dark;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--bg-primary);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-width: 0; font-size: var(--text-16); line-height: 1.6; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { color: var(--text-primary); }
h2 { font-size: 38px; font-weight: 600; line-height: 1.1; letter-spacing: -.045em; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button, a { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
img { display: block; max-width: 100%; }
ul, ol { padding: 0; margin: 0; list-style: none; }
svg { flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: var(--accent); color: var(--bg-deep); }
[id] { scroll-margin-top: 30px; }
.container { width: min(calc(100% - var(--page-padding) * 2), var(--content-width)); margin-inline: auto; }
.section { padding-block: calc(var(--section-space) / 2); }
.skip-link { position: absolute; left: var(--page-padding); top: 12px; z-index: 10; padding: 10px var(--space-20); border-radius: var(--radius); background: var(--accent); color: var(--bg-deep); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.site-header { height: 76px; background: var(--bg-deep); border-bottom: 1px solid var(--border); position: relative; z-index: 3; }
.site-header__inner { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-32); align-items: center; }
.brand { font-size: 23px; font-weight: 500; letter-spacing: -.045em; line-height: 1.2; white-space: nowrap; width: fit-content; display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
/* Fit the mark's transparent export margins into the existing brand slot. */
.brand__art { display: block; position: relative; width: 200px; height: 32px; overflow: hidden; }
.brand__image { position: absolute; width: 112%; max-width: none; height: auto; left: -6%; top: 50%; transform: translateY(-50%); }
.brand-descriptor { font-family: var(--font-mono); font-size: .625rem; font-weight: 400; line-height: 1.5; letter-spacing: .2em; text-transform: uppercase; color: rgba(241, 245, 247, .6); }
.site-header .brand { position: relative; }
.brand__descriptor { display: block; position: absolute; top: calc(100% + 3px); left: 0; width: 100%; font-size: .5625rem; letter-spacing: normal; }
.brand__descriptor svg { display: block; width: 100%; height: auto; overflow: visible; fill: currentColor; }
.header-nav { display: flex; gap: 43px; align-items: center; }
.nav-links { display: flex; flex-wrap: inherit; gap: inherit; align-items: inherit; min-width: 0; max-width: 100%; }
.header-nav .nav-links a { display: block; }
.header-nav a, .site-footer nav :is(a, [aria-disabled="true"]) { font-size: var(--text-14); }
.header-nav a:hover, .site-footer a:hover { color: var(--accent); }
.header-cta { justify-self: end; height: 42px !important; padding-inline: 17px !important; font-size: 13px !important; }
.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; }
.menu-toggle__icon path { transform-box: view-box; transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 300ms ease; }
.menu-toggle__top { transform-origin: 12px 6px; }
.menu-toggle__middle { transform-origin: 12px 12px; }
.menu-toggle__bottom { transform-origin: 12px 18px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__top { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__middle { opacity: 0; transform: scaleX(.6); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bottom { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .menu-toggle__icon path { transition: none; }
}
.button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 17px; height: 50px; padding: 0 var(--space-24); border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: var(--text-15); font-weight: 500; line-height: 1.2; white-space: nowrap; }
.button--primary { background: var(--accent); color: var(--bg-deep); border-color: var(--accent); }
.button--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button--secondary { background: transparent; color: var(--text-primary); border-color: rgba(200, 218, 228, .6); }
.button--secondary, .menu-toggle { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.button--secondary:hover { background: var(--surface-hover); border-color: var(--accent); }
.button-group { display: flex; flex-wrap: wrap; gap: var(--space-20); }
.hero { position: relative; isolation: isolate; background: var(--bg-deep); }
.hero__inner { min-height: clamp(620px, 47.5vw, 684px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
.hero__copy { grid-column: 1 / 8; position: relative; z-index: 1; padding-block: 68px; }
.eyebrow, .section-heading__label { font-family: var(--font-mono); font-size: var(--text-11); font-weight: 400; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.eyebrow { display: flex; align-items: center; gap: 15px; }
.eyebrow > span, .section-heading__square { width: 8px; height: 8px; flex-shrink: 0; background: var(--accent); }
.hero h1 { font-size: clamp(57px, 4.723vw, 68px); line-height: 1.04; font-weight: 600; letter-spacing: -.05em; margin-block: 26px 30px; }
.hero h1 span { display: block; }
.hero__lead { max-width: 625px; font-size: 19px; line-height: 1.55; color: var(--text-secondary); margin-bottom: 34px; }
.hero__annotation { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; line-height: 1.7; text-transform: uppercase; color: var(--text-secondary); margin-top: 39px; }
.hero .button--primary { background: #f8fafb; color: var(--bg-deep); border-color: #f8fafb; }
.hero .button--primary:hover { background: #e5edf2; border-color: #e5edf2; }
.hero-media { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.hero-media img.hero-media__poster, .hero-media > video, .hero-media > canvas { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.trust-metrics { border-block: 1px solid var(--border); background: var(--bg-deep); }
.trust-metrics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: var(--space-32); }
.trust-metric { position: relative; display: flex; flex-direction: column-reverse; text-align: center; gap: 2px; padding-inline: var(--space-16); }
.trust-metric + .trust-metric { border-left: 1px solid var(--border-strong); }
.trust-metric dd { font-size: 34px; font-weight: 500; line-height: 1.2; letter-spacing: -.025em; }
.trust-metric dt { font-size: var(--text-14); color: var(--text-secondary); }
.section-heading { display: flex; gap: 23px; align-items: center; margin-bottom: var(--space-28); min-width: 0; }
.section-heading__label { display: inline-flex; align-items: center; gap: 15px; flex-shrink: 0; }
.section-heading__rule { height: 1px; flex: 1; min-width: 24px; background: var(--border); }
.section-heading__supporting { font-size: var(--text-14); line-height: 1.5; color: var(--text-secondary); }
.featured-projects { background: var(--bg-primary); }
.project { display: grid; min-width: 0; }
.project--featured { grid-template-columns: minmax(0, 3.3fr) minmax(0, 8.7fr); gap: var(--space-48); align-items: center; }
.project__copy { min-width: 0; }
.project__number { font-family: var(--font-mono); font-size: var(--text-12); display: flex; align-items: center; gap: 14px; margin-bottom: 15px; color: var(--text-secondary); }
.project__number span { width: 56px; height: 1px; background: var(--border-strong); }
.project h3 { font-size: 34px; line-height: 1.1; font-weight: 500; letter-spacing: -.04em; margin-bottom: 10px; }
.project__subtitle { font-size: 19px; line-height: 1.35; color: var(--text-primary); margin-bottom: 18px; max-width: 280px; }
.project__description { font-size: var(--text-16); line-height: 1.6; color: var(--text-secondary); margin-bottom: 23px; }
.project__technologies { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: var(--space-20); }
.project__technologies li { font-size: var(--text-11); line-height: 1.4; padding: var(--space-6) 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); }
.text-link { display: inline-flex; align-items: center; gap: 13px; font-size: var(--text-14); color: var(--accent); line-height: 1.4; }
.text-link > span { border-bottom: 1px solid rgba(83, 199, 255, .45); padding-bottom: 3px; }
.text-link:is(a):hover, .text-link:is(a):focus-visible { color: var(--accent-hover); }
.text-link:is(a):hover > span, .text-link:is(a):focus-visible > span { border-color: currentColor; }
.project-image { width: 100%; height: 100%; align-self: start; border: 1px solid var(--border-strong); border-top: none; border-radius: 2px; overflow: hidden; background: var(--surface); }
.featured-projects .project-image { height: auto; }
.project-image img { width: 100%; height: auto; }
.project-image--empty { aspect-ratio: 494 / 258; display: flex; align-items: center; justify-content: center; }
.project-image figcaption { font-size: var(--text-14); color: var(--text-secondary); padding: var(--space-24); }
.projects-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); margin-top: 44px; border-top: 1px solid var(--border); }
.project--secondary { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 26px; align-items: center; }
.project--secondary .project__copy { padding-block: var(--space-28); }
.project--secondary h3 { font-size: 25px; line-height: 1.15; margin-bottom: 9px; }
.project--secondary .project__subtitle { font-size: var(--text-16); line-height: 1.4; margin-bottom: 15px; }
.project--secondary .project__description { font-size: var(--text-14); line-height: 1.55; margin-bottom: 18px; }
.project--secondary .project-image { border-radius: 0; }
.project--secondary .project-image img { width: 100%; height: auto; object-fit: contain; }
.project--secondary .project-image--empty { aspect-ratio: 1; }
.how-i-work { background: var(--bg-deep); border-top: 1px solid var(--border); }
.how-i-work .section-heading { margin-bottom: 22px; }
.process-timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-24); margin-top: 31px; }
.process-step__top { display: flex; align-items: center; gap: var(--space-16); margin-bottom: var(--space-12); }
.process-step__number { font-family: var(--font-mono); font-size: 13px; width: 42px; height: 42px; flex-shrink: 0; border: 1px solid rgba(83, 199, 255, .45); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.process-step__icon { background: #102132; width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.process-step__connector { flex: 1; height: 1px; background: rgba(83, 199, 255, .55); margin-left: var(--space-4); }
.process-step:last-child .process-step__connector { display: none; }
.process-step__copy { border-left: 1px solid var(--border); margin-left: 21px; padding-left: 38px; padding-bottom: 2px; }
.process-step h3 { font-size: var(--text-18); line-height: 1.4; font-weight: 500; }
.process-step p { font-size: var(--text-14); line-height: 1.55; color: var(--text-secondary); max-width: 180px; }
.perspective { position: relative; isolation: isolate; border-block: 1px solid var(--border); background: var(--bg-deep); }
.perspective__inner { min-height: clamp(400px, 32.36vw, 466px); display: flex; align-items: center; }
.perspective__content { width: 58%; padding-block: var(--space-48); z-index: 1; }
.perspective .section-heading { margin-bottom: 29px; }
.perspective__quote { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 18px; }
.perspective__quote-mark { font-family: var(--font-serif); font-size: 160px; line-height: .85; color: #3a536b; }
.perspective h2 { font-family: var(--font-serif); font-size: 42px; font-weight: 500; line-height: 1.06; letter-spacing: -.025em; }
.perspective p { font-size: var(--text-16); line-height: 1.6; color: var(--text-secondary); max-width: 520px; margin-block: 17px var(--space-24); }
.perspective__media { position: absolute; left: 50%; top: 0; height: 100%; width: min(100%, calc(var(--content-width) + 128px)); transform: translateX(-50%); z-index: 0; mask-image: linear-gradient(to right, transparent 25%, #fff 60%, #fff 94%, transparent); overflow: hidden; }
.perspective__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* The published lossless WebP has the original PNG's exact 2098 x 750 pixels.
   Keep the base untouched; this coordinate plane follows its existing cover crop. */
.perspective__motion { display: none; pointer-events: none; }
@supports (container-type: size) and (width: 1cqw) {
  .perspective__media { container-type: size; }
  .perspective__motion {
    --source-width: max(100cqw, calc(100cqh * 2098 / 750));
    --source-height: max(100cqh, calc(100cqw * 750 / 2098));
    --code-travel: calc(var(--source-height) * 5 / 750);
    display: block;
    position: absolute;
    left: calc(50% - var(--source-width) / 2);
    top: calc(50% - var(--source-height) / 2);
    width: var(--source-width);
    height: var(--source-height);
    aspect-ratio: 2098 / 750;
  }
  /* Source box (1581,419)-(1795,484); polygon stays inside the upper editor,
     clear of tabs, sidebar, split-pane toolbar, bezel and laptop body. */
  .perspective__code {
    position: absolute;
    left: 75.357483%;
    top: 55.866667%;
    width: 10.200191%;
    height: 8.666667%;
    overflow: hidden;
    clip-path: polygon(4.672897% 7.692308%, 100% 0, 94.859813% 100%, 0 90.769231%);
  }
  .perspective__code-content {
    width: 100%;
    height: calc(100% + var(--code-travel));
    background-image: var(--perspective-image);
    background-repeat: no-repeat;
    background-size: var(--source-width) var(--source-height);
    background-position: calc(var(--source-width) * -.75357483) calc(var(--source-height) * -.55866667);
    animation: perspective-code-scroll 5.5s ease-in-out infinite;
    will-change: transform;
  }
  @media (max-width: 760px) {
    .perspective__motion { left: auto; right: 0; }
  }
}
@keyframes perspective-code-scroll {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(0px - var(--code-travel))); }
}
@media (prefers-reduced-motion: reduce) {
  .perspective__motion { display: none; }
  .perspective__code-content { animation: none; }
  .perspective__code-content { will-change: auto; }
}
.contact { position: relative; isolation: isolate; background: var(--bg-deep); overflow: hidden; }
.contact__landscape { position: absolute; width: 100%; height: 150px; bottom: 0; object-fit: cover; opacity: .22; z-index: -1; mask-image: linear-gradient(to bottom, transparent, #fff); }
.contact__inner { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-64); padding-block: 55px; }
.contact__copy { min-width: 0; }
.contact .section-heading { margin-bottom: var(--space-20); }
.contact h2 { margin-bottom: 11px; }
.contact__copy > p { color: var(--text-secondary); font-size: var(--text-16); line-height: 1.6; margin-bottom: 23px; }
.contact .button-group { gap: 18px; }
.brand-icon { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; }
.brand-icon svg { width: 100%; height: 100%; fill: currentColor; }
.service-list { align-self: center; border-left: 1px solid var(--border); display: grid; gap: var(--space-20); padding-left: 55px; padding-block: 3px; }
.service-list li { display: flex; align-items: center; gap: var(--space-24); font-size: var(--text-14); line-height: 1.5; color: var(--text-secondary); }
.service-list svg { color: var(--text-primary); }
.site-footer { background: var(--bg-deep); border-top: 1px solid var(--border); }
.site-footer__inner { min-height: 84px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-28); }
.site-footer .brand { font-size: var(--text-18); }
.site-footer .brand__art { width: 160px; height: 26px; }
.site-footer__positioning { font-size: var(--text-11); color: var(--text-secondary); display: flex; flex-wrap: wrap; gap: 9px; }
.site-footer nav { display: flex; gap: 25px; margin-left: auto; }
.site-footer nav :is(a, [aria-disabled="true"]) { font-size: var(--text-12); }
.social-links { display: flex; align-items: center; gap: 19px; color: var(--text-secondary); }
.social-links a, .social-links > span { width: 22px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.social-links .brand-icon { width: 19px; height: 19px; }
/* Match 19px visible glyph height, including Lucide strokes. X already fills
   its viewBox; the other official glyphs have different internal margins. */
.social-links .social-icon--linkedin { transform: scale(1.17073); }
.social-links .social-icon--upwork { transform: scale(1.41044); }
.social-links .social-icon--email { transform: scale(1.37143); }
.social-link--unavailable { opacity: .5; }
@media (min-width: 761px) {
  /* Start the featured row directly below the heading's centered 1px rule. */
  .featured-projects > .container > .section-heading { margin-bottom: -7.75px; }
}
@media (min-width: 761px) and (max-width: 1250px) {
  .project--featured .project__copy { padding-top: 35.75px; }
}
@media (min-width: 1001px) {
  .site-header { background: transparent; }
  .site-header__inner, .hero__inner {
    width: min(calc(100% - clamp(96px, 12.2vw, 176px)), var(--content-width));
  }
  .site-header__inner { grid-template-columns: 1fr auto 1.5fr; }
  .site-header .brand { font-size: 26px; }
  .header-nav a { font-size: var(--text-15); }
  .header-cta { height: 46px !important; font-size: 14px !important; }
  .hero__copy { align-self: start; padding-block: 86px 0; }
  .hero h1 { font-size: clamp(57px, 4.584vw, 66px); margin-bottom: var(--space-20); }
  .hero__lead { font-size: 22px; line-height: 1.5; margin-bottom: var(--space-40); }
  .hero .button { height: 62px; padding-inline: var(--space-32); font-size: var(--text-17); }
  .hero .button-group { gap: 26px; }
  .hero__annotation { margin-top: 44px; }
  .hero-media {
    top: -76px;
    height: calc(100% + 76px);
  }
  .hero-media img.hero-media__poster {
    position: absolute;
    top: 0;
    left: calc(max(clamp(48px, 6.1vw, 88px), calc((100% - var(--content-width)) / 2)) + clamp(454px, 43.32vw, 624px));
    width: calc(min(calc(100% - clamp(96px, 12.2vw, 176px)), var(--content-width)) + 500px);
    max-width: none;
    height: auto;
    transform: translateX(-50%);
    object-fit: contain;
    mask-image: linear-gradient(to right, transparent 35%, #fff 52%, #fff 96%, transparent), linear-gradient(to bottom, #fff 85%, transparent);
    mask-composite: intersect;
  }
  .trust-metric dd { font-size: 36px; }
  .trust-metric dt { font-size: var(--text-16); }
}
@media (max-width: 1250px) {
  :root { --page-padding: 48px; --section-space: 80px; }
  .header-nav { gap: 30px; }
  .hero__inner { min-height: 620px; }
  .hero h1 { font-size: clamp(48px, 4.584vw, 57px); }
  .hero__lead { font-size: var(--text-17); }
  .project--featured { gap: 36px; grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr); }
  .project h3 { font-size: 30px; }
  .project__subtitle { font-size: var(--text-17); }
  .project__description { font-size: var(--text-14); }
  .projects-secondary { gap: var(--space-28); }
  .project--secondary { gap: 21px; }
  .project--secondary h3 { font-size: 23px; }
  .project--secondary .project__subtitle { font-size: var(--text-14); }
  .project--secondary .project__description { font-size: 13px; }
  .process-timeline { gap: 18px; }
  .process-step__top { gap: 11px; }
  .process-step__number { width: 37px; height: 37px; }
  .process-step__icon { width: 40px; height: 40px; }
  .process-step__copy { margin-left: 18px; padding-left: 30px; }
  .perspective h2 { font-size: 42px; }
  .perspective__quote { grid-template-columns: 62px minmax(0, 1fr); gap: var(--space-16); }
  .perspective__quote-mark { font-size: 135px; }
  .perspective p { font-size: var(--text-14); }
  .contact__inner { gap: 35px; }
  .contact h2 { font-size: 34px; }
  .contact .button { font-size: 13px; padding-inline: 19px; gap: 13px; }
  .service-list { padding-left: var(--space-32); }
  .service-list li { font-size: 13px; gap: 18px; }
  .site-footer__inner { gap: var(--space-20); padding-block: 26px; }
  .site-footer nav { gap: var(--space-20); }
  .social-links { gap: 14px; }
}
@media (max-width: 1000px) {
  :root { --page-padding: 36px; --section-space: 72px; }
  .site-header__inner { gap: var(--space-24); }
  .brand { font-size: 20px; }
  .brand__art { width: 180px; height: 28px; }
  .header-nav { gap: 23px; }
  .header-nav a { font-size: 13px; }
  .header-cta { font-size: 11px !important; padding-inline: var(--space-12) !important; gap: 10px; }
  .hero { display: flex; flex-direction: column; }
  .hero__inner { min-height: auto; display: block; order: 0; }
  .hero h1 { font-size: 48px; }
  .hero__copy { padding-block: 55px var(--space-24); }
  .hero__lead { max-width: 480px; font-size: var(--text-16); }
  .hero .button { padding-inline: var(--space-20); font-size: var(--text-14); }
  .hero .button-group { gap: var(--space-16); }
  .hero__annotation { max-width: 400px; font-size: 9px; }
  .hero-media { position: relative; width: min(100%, 650px); height: auto; aspect-ratio: 4 / 3; margin: 0 auto; order: 1; mask-image: linear-gradient(to bottom, transparent, #fff 8%); }
  .hero-media img.hero-media__poster { height: 100%; object-fit: cover; object-position: right center; }
  .trust-metric dd { font-size: 30px; }
  .trust-metric dt { font-size: var(--text-12); }
  .project--featured { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 30px; }
  .project__subtitle { font-size: var(--text-16); }
  .project--featured .project-image { align-self: start; margin-top: 0; }
  .projects-secondary { gap: 30px; }
  .project--secondary { grid-template-columns: 1fr; gap: 0; }
  .project--secondary .project__copy { padding-block: var(--space-28); }
  .project--secondary .project__description { font-size: var(--text-14); min-height: 88px; }
  .project--secondary .project__subtitle { font-size: var(--text-16); }
  .section-heading__supporting { font-size: var(--text-12); }
  .how-i-work h2 { font-size: 34px; }
  .process-timeline { gap: 14px; }
  .process-step__top { gap: var(--space-8); }
  .process-step__number { width: 32px; height: 32px; font-size: var(--text-11); }
  .process-step__icon { width: 36px; height: 36px; }
  .process-step__icon svg { width: 21px; }
  .process-step__connector { margin-left: 0; }
  .process-step__copy { margin-left: 15px; padding-left: 21px; }
  .process-step h3 { font-size: var(--text-16); }
  .process-step p { font-size: var(--text-14); }
  .perspective__inner { min-height: 400px; }
  .perspective__content { width: 67%; }
  .perspective h2 { font-size: 39px; }
  .perspective__quote { grid-template-columns: 43px minmax(0, 1fr); }
  .perspective__quote-mark { font-size: 108px; }
  .perspective__media { width: 100%; }
  .contact__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-28); }
  .contact h2 { font-size: 32px; }
  .service-list { padding-left: 25px; gap: 22px; }
  .service-list li { font-size: var(--text-12); gap: 14px; }
  .site-footer__positioning { flex: 1; }
  .site-footer nav { margin-left: 0; }
  .social-links { margin-left: auto; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .hero-media { width: 100%; aspect-ratio: 8 / 3; }
  .hero-media img.hero-media__poster { object-fit: contain; }
}
@media (max-width: 760px) {
  :root { --page-padding: 24px; --section-space: 64px; }
  h2 { font-size: 32px; }
  .site-header { height: 72px; }
  .site-header__inner { grid-template-columns: 1fr auto; gap: var(--space-12); }
  .brand { font-size: 21px; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .header-nav { display: grid; align-content: start; gap: 0; position: absolute; top: 100%; left: 0; right: 0; padding: 18px var(--page-padding) 24px; border-bottom: 1px solid var(--border-strong); background: var(--bg-deep); height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 360ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 420ms; }
  .header-nav.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  .header-nav .nav-links { display: grid; gap: 0; align-content: start; width: 100%; }
  @media (prefers-reduced-motion: reduce) { .header-nav { transition: none; } }
  .header-nav a { font-size: var(--text-16); padding-block: var(--space-12); }
  .hero__inner { min-height: auto; display: block; }
  .hero__copy { padding-block: 55px 0; }
  .eyebrow { font-size: 10px; }
  .hero h1 { font-size: 42px; line-height: 1.05; letter-spacing: -.055em; margin-block: var(--space-24); }
  .hero h1 span { display: inline; }
  .hero__lead { max-width: 480px; font-size: var(--text-17); line-height: 1.55; margin-bottom: var(--space-28); }
  .desktop-break { display: none; }
  .hero .button-group { gap: 14px; flex-direction: column; align-items: flex-start; }
  .hero .button { min-width: 198px; height: 50px; padding-inline: var(--space-24); font-size: var(--text-15); }
  .hero__annotation { font-size: 9px; margin-top: 29px; max-width: none; }
  .hero-media { position: relative; top: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; margin: 15px 0 0; mask-image: linear-gradient(to bottom, transparent, #fff 10%); }
  .hero-media img.hero-media__poster { width: 100%; height: 100%; }
  .hero { display: flex; flex-direction: column; }
  .hero__inner { order: 0; }
  .hero-media { order: 1; }
  .trust-metrics__grid { padding-block: 0; }
  .trust-metric { min-height: 117px; justify-content: center; gap: var(--space-4); padding-inline: var(--space-6); }
  .trust-metric dd { font-size: 32px; }
  .trust-metric dt { font-size: var(--text-12); min-height: 3.2em; }
  .section-heading { gap: 17px; margin-bottom: var(--space-28); flex-wrap: wrap; }
  .section-heading__label { font-size: 10px; gap: var(--space-12); }
  .section-heading__supporting { width: 100%; padding-left: var(--space-20); font-size: 13px; }
  .project--featured { grid-template-columns: 1fr; gap: 30px; }
  .project__number { margin-bottom: 13px; }
  .project h3 { font-size: 32px; }
  .project__subtitle { font-size: 19px; max-width: 380px; }
  .project__description { font-size: var(--text-16); max-width: 480px; }
  .project-image { border-top: 1px solid var(--border-strong); }
  .project--featured .project-image { margin-top: 0; }
  .project__technologies { margin-bottom: var(--space-20); }
  .projects-secondary { grid-template-columns: 1fr; gap: 36px; margin-top: 36px; }
  .project--secondary { gap: 26px; }
  .project--secondary .project__copy { padding-block: 30px 0; }
  .project--secondary h3 { font-size: 25px; }
  .project--secondary .project__subtitle { font-size: var(--text-17); max-width: 350px; }
  .project--secondary .project__description { min-height: 0; font-size: var(--text-15); }
  .project--secondary .project-image { aspect-ratio: auto; }
  .project--secondary + .project--secondary { border-top: 1px solid var(--border); }
  .how-i-work .section-heading { row-gap: var(--space-12); }
  .how-i-work h2 { font-size: 32px; max-width: 420px; }
  .process-timeline { grid-template-columns: 1fr; gap: 0; margin-top: var(--space-32); }
  .process-step { display: grid; grid-template-columns: 104px minmax(0, 1fr); min-height: 112px; position: relative; }
  .process-step__top { align-items: flex-start; gap: var(--space-16); padding-top: 0; margin: 0; }
  .process-step__number { width: 36px; height: 36px; font-size: var(--text-12); background: var(--bg-deep); position: relative; z-index: 1; margin-top: var(--space-4); }
  .process-step__icon { width: 44px; height: 44px; }
  .process-step__icon svg { width: 25px; }
  .process-step__connector { position: absolute; top: 40px; bottom: 0; height: auto; width: 1px; left: 18px; background: var(--border-strong); }
  .process-step__copy { border: 0; margin-left: 0; padding: 0 0 27px 14px; }
  .process-step h3 { font-size: 19px; }
  .process-step p { font-size: var(--text-15); max-width: 230px; }
  .process-step:last-child { min-height: auto; }
  .process-step:last-child .process-step__copy { padding-bottom: 0; }
  .perspective { display: flex; flex-direction: column; }
  .perspective__inner { min-height: auto; order: 0; }
  .perspective__content { width: 100%; padding-block: 55px var(--space-20); }
  .perspective__quote { grid-template-columns: 28px minmax(0, 1fr); gap: 13px; }
  .perspective__quote-mark { font-size: 80px; }
  .perspective h2 { font-size: 32px; line-height: 1.08; }
  .perspective p { font-size: var(--text-16); margin-block: 19px var(--space-24); }
  .perspective__media { position: relative; left: auto; transform: none; width: 100%; height: auto; aspect-ratio: 3 / 2; order: 1; mask-image: linear-gradient(to bottom, transparent, #fff 12%); }
  .perspective__media img { height: 100%; object-position: right center; }
  .contact__inner { grid-template-columns: 1fr; gap: var(--space-40); padding-block: 55px; }
  .contact h2 { font-size: 32px; }
  .contact__copy > p { font-size: var(--text-16); }
  .contact .button-group { flex-direction: column; align-items: flex-start; gap: 15px; }
  .contact .button { font-size: var(--text-14); padding-inline: 22px; }
  .service-list { border-left: 0; border-top: 1px solid var(--border); padding: 30px 0 0; gap: 23px; }
  .service-list li { font-size: var(--text-15); gap: 22px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-24); padding-block: var(--space-32); }
  .site-footer .brand { font-size: 21px; }
  .site-footer .brand__art { width: 180px; height: 28px; }
  .site-footer__positioning { flex: none; flex-direction: column; font-size: var(--text-14); gap: 5px; line-height: 1.6; }
  .site-footer__separator { display: none; }
  .site-footer__specialties { display: flex; flex-wrap: wrap; column-gap: var(--space-8); }
  .site-footer nav { flex-wrap: wrap; column-gap: var(--space-24); row-gap: var(--space-4); }
  .site-footer nav :is(a, [aria-disabled="true"]) { font-size: var(--text-14); padding-block: var(--space-8); }
  .social-links { margin-left: 0; gap: var(--space-8); flex-wrap: wrap; }
  .social-links a, .social-links > span { width: 44px; min-height: 44px; }
}
@media (max-width: 370px) {
  :root { --page-padding: 20px; }
  .hero h1 { font-size: 38px; }
  .hero__annotation { font-size: 8px; letter-spacing: .1em; }
  .perspective__quote { grid-template-columns: 21px minmax(0, 1fr); gap: 10px; }
  .perspective h2 { font-size: 30px; }
  .contact .button { padding-inline: 17px; font-size: 13px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Both layers share a reserved stage, so decoding cannot shift layout. */
.hero-media--motion { pointer-events: none; }
.hero > .trust-metrics { order: 2; }
.hero-media--motion img.hero-media__poster, .hero-media--motion > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
  object-fit: cover;
  object-position: right center;
  mask-image: none;
}
.hero-media--motion > video { opacity: 0; }
.hero-media--motion[data-video-ready="true"] > video { opacity: 1; }
@media (min-width: 1001px) {
  .hero-media--motion {
    --hero-film-width: min(calc(100vw - 330px), 1360px);
  }
  .hero-media--motion img.hero-media__poster, .hero-media--motion > video {
    inset: auto;
    top: 0;
    /* The approved 16:9 film retains its own right-side safe area. At wide
       widths, anchor to the centered composition rather than the screen edge. */
    right: calc(max(0px, (100vw - 1690px) / 2) + 24px - var(--hero-film-width) * .07);
    width: var(--hero-film-width);
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    mask-image: linear-gradient(to right, transparent 16%, #fff 30%, #fff 96%, transparent), linear-gradient(to bottom, #fff 85%, transparent);
    mask-composite: intersect;
  }
}
/* Keep the film beside the copy on tablets. A shared grid row gives the
   scene the copy's actual height and keeps it clear of the metrics below. */
@media (min-width: 768px) and (max-width: 1250px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero__inner { grid-area: 1 / 1; min-height: 0; }
  .hero > .trust-metrics { grid-area: 2 / 1; }
  .hero__copy { padding-bottom: var(--space-48); }
  .hero-media--motion { grid-area: 1 / 1; position: relative; height: calc(100% + 76px); }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .hero__copy { width: min(440px, 100%); }
  .hero-media--motion {
    --hero-film-width: calc(100vw - 330px);
    top: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    aspect-ratio: auto;
    mask-image: none;
  }
  .hero-media--motion img.hero-media__poster, .hero-media--motion > video {
    inset: auto;
    top: 50%;
    right: calc(24px - var(--hero-film-width) * .07);
    width: var(--hero-film-width);
    height: auto;
    aspect-ratio: 16 / 9;
    transform: translateY(-50%);
    object-fit: contain;
    mask-image: linear-gradient(to right, transparent 16%, #fff 30%, #fff 96%, transparent), linear-gradient(to bottom, transparent, #fff 12%, #fff 85%, transparent);
    mask-composite: intersect;
  }
}
@media (max-width: 767px) {
  .hero-media--motion {
    position: relative;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 15px 0 0;
    order: 1;
    mask-image: linear-gradient(to bottom, transparent, #fff 10%);
  }
}

.hero-media picture { display: contents; }
.preloader__screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-32);
  pointer-events: auto;
}

.preloader__mark {
  display: block;
  width: min(336px, 70%);
  height: auto;
  overflow: visible;
}

.preloader__accent { fill: var(--accent); }
.preloader__wordmark { opacity: 0; transform: translateY(6px); }
.preloader__descriptor { position: absolute; top: calc(50% + 40px); max-width: calc(100% - 56px); text-align: center; opacity: 0; }
.preloader__draw {
  fill: none;
  stroke: white;
  stroke-width: 72;
  stroke-dasharray: 214;
  stroke-dashoffset: 214;
}

@media (max-width: 1100px) {
  .preloader__mark { width: min(280px, 70%); }
}

@media (max-width: 767px) {
  .preloader__screen { padding: var(--space-28); }
  .preloader__mark { width: min(196px, 70%); }
  .preloader__descriptor { top: calc(50% + 28px); font-size: .5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Early, bounded boot state only. Visibility leaves GSAP's natural opacity
     endpoints intact; without JavaScript the approved content stays visible. */
  html.motion-boot #top :is(.hero__copy, .trust-metrics__grid, .section-heading,
    .project__copy, .project-image, .how-i-work > .container > h2, .process-step,
    .perspective__quote, .contact__copy) { visibility: hidden; }
}

html { background: var(--bg-primary); color-scheme: dark; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
#preloader-root { position: fixed; inset: 0; z-index: 1000; background: var(--bg-deep); }
#preloader-root[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { #preloader-root { display: none; } }
.content-page { min-height: 60vh; padding-block: var(--space-64); }
.content-page h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.1; margin-bottom: var(--space-24); }
.content-page .prose { max-width: 850px; }
.content-page .prose > * + * { margin-top: var(--space-24); }
.content-page .prose a { color: var(--accent); text-decoration: underline; }
.content-page .prose :is(ul, ol) { padding-left: var(--space-24); list-style: revert; }
.content-page .article-list { display: grid; gap: var(--space-32); }
.content-page .project-image { margin-top: var(--space-32); max-width: 1000px; }
.content-page .project__description { max-width: 850px; }

.project-inquiry { background: var(--bg-deep); padding-block: var(--section-space); }
.project-inquiry { --inquiry-error: #ffb1a7; --inquiry-success: #a0ddc2; }
.project-inquiry__inner { max-width: 640px; }
.project-inquiry h2 { max-width: 480px; margin-bottom: var(--space-28); padding-right: var(--space-32); font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.project-inquiry form p { margin-bottom: var(--space-20); }
.project-inquiry .inquiry-intro { max-width: 44ch; margin: -12px 0 var(--space-28); color: var(--text-secondary); font-size: var(--text-15); line-height: 1.6; }
.inquiry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-20); }
.inquiry-field { min-width: 0; margin-bottom: var(--space-20); }
.inquiry-field--full { grid-column: 1 / -1; }
.project-inquiry label { display: block; color: var(--text-primary); font-size: 13px; font-weight: 500; line-height: 1.5; }
.inquiry-optional { margin-left: var(--space-6); color: var(--text-secondary); font-weight: 400; font-size: var(--text-12); }
.project-inquiry .wpcf7-form-control-wrap { display: block; }
.project-inquiry :where(input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]):not([type="radio"]), textarea, select) { display: block; width: 100%; min-width: 0; margin-top: var(--space-8); padding: 13px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-primary); caret-color: var(--accent); font: inherit; font-size: var(--text-16); line-height: 1.5; box-shadow: none; transition: border-color 160ms ease, background-color 160ms ease; }
.project-inquiry :is(input, textarea)::placeholder { color: var(--text-secondary); opacity: .85; }
.project-inquiry :is(input, textarea, select):hover { border-color: rgba(167, 205, 226, .5); }
.project-inquiry :is(input:not([type="submit"]), textarea, select):focus { outline: none; border-color: rgba(83, 199, 255, .7); background: var(--bg-primary); }
.project-inquiry :is(input, textarea, select)[aria-invalid="true"] { border-color: var(--inquiry-error); }
.project-inquiry textarea { height: 124px; min-height: 124px; max-height: 300px; resize: vertical; }
.project-inquiry .wpcf7-not-valid-tip { display: block; margin-top: 7px; color: var(--inquiry-error); font-size: var(--text-12); font-weight: 400; line-height: 1.5; }
.project-inquiry .inquiry-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) 18px; margin: var(--space-4) 0 0; padding-top: var(--space-24); border-top: 1px solid var(--border); }
.project-inquiry .inquiry-actions > p { display: contents; }
.project-inquiry input[type="submit"] { min-height: 48px; padding: 13px 22px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent); color: var(--bg-deep); font: inherit; font-size: var(--text-14); font-weight: 500; line-height: 1.5; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease; }
.project-inquiry input[type="submit"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.project-inquiry input[type="submit"]:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.project-inquiry input[type="submit"]:disabled { opacity: .65; cursor: wait; }
.project-inquiry .inquiry-note { max-width: 26ch; color: var(--text-secondary); font-size: var(--text-12); line-height: 1.6; }
.project-inquiry .wpcf7-spinner { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; background: var(--surface-hover); }
.project-inquiry .wpcf7-spinner::before { background: var(--accent); }
.project-inquiry form:not(.submitting) .wpcf7-spinner { display: none; }
.project-inquiry .wpcf7 form .wpcf7-response-output { margin: var(--space-20) 0 0; padding: 14px var(--space-16); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text-secondary); font-size: var(--text-14); line-height: 1.6; overflow-wrap: anywhere; }
.project-inquiry .wpcf7 form:is(.invalid, .unaccepted, .failed, .aborted, .spam) .wpcf7-response-output { border-color: rgba(255, 177, 167, .4); color: var(--inquiry-error); }
.project-inquiry .wpcf7 form.sent .wpcf7-response-output { border-color: rgba(160, 221, 194, .4); color: var(--inquiry-success); }
.project-dialog { width: min(640px, calc(100% - 40px)); max-height: calc(100dvh - 40px); padding: var(--space-40); border: 0; border-radius: 12px; background: var(--bg-deep); color: var(--text-primary); box-shadow: 0 24px 90px rgba(0, 0, 0, .5); scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--bg-deep); }
.project-dialog::backdrop { background: rgba(4, 11, 17, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.project-dialog .project-inquiry { padding: 0; }
.project-dialog .project-inquiry__inner { width: 100%; }
.project-dialog__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text-secondary); cursor: pointer; }
.project-dialog__close:hover { background: var(--surface-hover); color: var(--text-primary); }
.project-dialog__close:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
@media (max-width: 560px) {
  .project-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); padding: var(--space-32) 22px var(--space-24); }
  .project-dialog__close { top: 8px; right: 8px; }
  .inquiry-grid { grid-template-columns: minmax(0, 1fr); }
  .project-inquiry h2 { margin-bottom: var(--space-24); }
  .project-inquiry .inquiry-intro { margin-bottom: var(--space-24); font-size: var(--text-14); }
  .project-inquiry .inquiry-actions { gap: 14px; padding-top: var(--space-20); }
  .project-inquiry .inquiry-note { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .project-inquiry :is(input, textarea, select) { transition: none; }
}