:root{--motion-duration:650ms;--motion-ease:cubic-bezier(.2,.75,.25,1);--cinema-header:79px}
html.motion-ready{overflow-anchor:none}html[data-motion=off]{scroll-behavior:auto}
.motion-toggle{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;margin-left:auto;min-height:44px;padding:8px 10px;border:1px solid #454549;background:transparent;color:#eee;font:9px var(--mono);letter-spacing:.03em;text-transform:uppercase;cursor:pointer}.motion-toggle::before{content:"";width:6px;height:6px;border:1px solid var(--orange);background:var(--orange)}.motion-toggle[aria-pressed=true]::before{background:transparent}.motion-toggle[hidden]{display:none}.motion-toggle:disabled{opacity:.65;cursor:default}.motion-toggle+.menu-toggle{margin-left:0}
.header-inner{gap:23px}.primary-nav{gap:23px}.header-status{font-size:8px}.button,.primary-nav a,.text-link,.card-link,.service-card{transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s}.button:focus-visible,.button:hover{box-shadow:0 5px 0 #fa603733}.button span,.text-link span,.card-link span{transition:transform .22s var(--motion-ease)}.button:hover span,.text-link:hover span{transform:translate(2px,-2px)}.primary-nav a:focus-visible{outline-offset:3px}.menu-toggle,.motion-toggle,.venture-nav button,.story-chapter-nav button{min-height:44px}
.editorial-media{padding-top:28px;padding-bottom:30px}.media-frame{margin:0;display:grid;grid-template-columns:minmax(0,2.1fr) minmax(230px,1fr);background:#0b0b0e;color:var(--paper);overflow:hidden}.media-frame>img{display:block;width:100%;height:auto;aspect-ratio:1.8;object-fit:cover}.media-frame figcaption{align-self:end;padding:35px}.media-frame figcaption>span{font:9px/1.7 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--orange)}.media-frame figcaption p{font-size:clamp(1.25rem,2vw,1.9rem);line-height:1.25;letter-spacing:-.05em;font-weight:600;margin:22px 0 30px}.media-frame .text-link{color:#fff}.media-frame .text-link span{color:var(--orange)}
.text-line{display:block;overflow:clip;padding:0 .05em .14em 0;margin-bottom:-.14em}.text-line-inner{display:block}.reveal-ready[data-motion=on] [data-reveal]{transition:opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease)}.reveal-ready[data-motion=on] [data-reveal]:not(.is-revealed){opacity:0;transform:translateY(18px)}.reveal-ready[data-motion=on] [data-reveal="lines"]{opacity:1;transform:none}.reveal-ready[data-motion=on] [data-reveal="lines"] .text-line-inner{transition:transform var(--motion-duration) var(--motion-ease);transition-delay:80ms}.reveal-ready[data-motion=on] [data-reveal="lines"]:not(.is-revealed) .text-line-inner{transform:translateY(112%)}.reveal-ready[data-motion=on] [data-media-reveal]>img{transition:clip-path 850ms var(--motion-ease),transform 1000ms var(--motion-ease)}.reveal-ready[data-motion=on] [data-media-reveal]:not(.is-revealed)>img{clip-path:inset(7% 5%);transform:scale(.96)}
[data-reading-anchor],[id]{scroll-margin-top:calc(var(--cinema-header) + 18px)}
.contact-page .page-hero{min-height:550px}.contact-page .page-hero-bottom{align-items:flex-start}.original-form-link{display:block;font-size:12px;font-weight:700;line-height:1.5;margin-top:18px;text-decoration:underline;text-underline-offset:4px;max-width:320px}
.service-artwork{padding-block:100px}.service-artwork-header{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:35px}.service-artwork-header h2{font-size:clamp(2.4rem,5vw,4.6rem);line-height:.98;letter-spacing:-.075em;margin:15px 0 0}.service-artwork-header>p{max-width:370px;color:var(--muted);font-size:13px}.service-artwork-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.service-card{display:block;border:1px solid var(--line);background:#efefeb}.service-card:hover{border-color:var(--orange)}.service-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff}.service-card-info{padding:24px;display:grid;grid-template-columns:1fr auto;gap:15px}.service-card h3{font-size:1.4rem;line-height:1.1;letter-spacing:-.045em;margin:0}.service-card p{font-size:11px;color:var(--muted);margin:12px 0 0;grid-column:1}.service-card-info>span{color:var(--orange-dark);font-size:23px;grid-column:2;grid-row:1/3}.service-card small{display:block;padding:0 24px 20px;font:8px var(--mono);text-transform:uppercase;color:#6d6d71}
@keyframes docnil-page-enter{from{opacity:.88}to{opacity:1}}.motion-ready[data-motion=on] main{animation:docnil-page-enter 180ms ease-out}
@media(min-width:981px) and (max-width:1250px){.header-status{display:none}.header-inner{gap:20px}.primary-nav{gap:20px}}
@media(max-width:980px){.header-status{display:none}.media-frame{grid-template-columns:minmax(0,1.6fr) minmax(215px,1fr)}.media-frame figcaption{padding:25px}.media-frame>img{height:100%;aspect-ratio:auto}.service-artwork-grid{gap:12px}.service-card-info{padding:18px}.service-card h3{font-size:1.2rem}.service-card small{padding:0 18px 18px}}
@media(max-width:650px){.header-inner{gap:12px}.wordmark{font-size:15px;gap:8px}.motion-toggle{font-size:8px;gap:6px;padding:7px 8px}.menu-toggle{font-size:9px;gap:7px}.menu-glyph{width:17px}.media-frame{grid-template-columns:1fr}.media-frame>img{height:auto;aspect-ratio:1.5}.media-frame figcaption{padding:25px 23px 30px}.media-frame figcaption p{font-size:1.6rem;margin:16px 0 22px}.editorial-media{padding-block:5px 10px}.contact-page .page-hero{min-height:580px}.service-artwork{padding-block:70px}.service-artwork-header{display:block}.service-artwork-header>p{margin-top:25px}.service-artwork-grid{grid-template-columns:1fr;gap:22px}.service-card h3{font-size:1.6rem}.service-card-info{padding:23px}.service-card small{padding:0 23px 23px}}
@supports(padding:max(0px)){.site-header{padding-top:env(safe-area-inset-top)}.primary-nav{padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))}}
@media(prefers-reduced-motion:reduce){html:not([data-motion=on]) [data-reveal],html:not([data-motion=on]) [data-media-reveal]>img{opacity:1!important;transform:none!important;clip-path:none!important}html::view-transition-old(root),html::view-transition-new(root){animation:none}}
html[data-motion=off] *,html[data-motion=off] *::before,html[data-motion=off] *::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}
.section-heading h2>.text-line,.section-heading h2 .text-line-inner{color:inherit}

/* Keep the original scenes and their shared motion preference at every size.
   These rules only address viewports that previously forced reading mode. */
@media (max-height: 539px) {
  html .site-header .primary-nav.is-open {
    max-height: calc(100svh - var(--cinema-header, 64px));
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }


}

/* Landscape phones and shallow desktop windows retain the existing cinematic
   camera. Type and controls use separate left/right and lower screen bands. */
@media (min-width: 651px) and (max-height: 539px) {
  html.cinema-ready[data-motion="on"] body .motion-story .cinema-stage {
    height: calc(100svh - var(--cinema-header, 64px));
    min-height: 0;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .cinema-topline {
    top: 10px;
    font-size: 6px;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .cinema-scene {
    top: 38px;
    width: 54%;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .cinema-scene .eyebrow {
    margin-bottom: 11px;
    font-size: 7px;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .cinema-display,
  html.cinema-ready[data-motion="on"] body .motion-story .cinema-intro .cinema-display {
    font-size: clamp(2.2rem, 10.5svh, 3.5rem);
  }
  html.cinema-ready[data-motion="on"] body .motion-story .cinema-scene:not(.cinema-intro) .cinema-display {
    font-size: clamp(2.6rem, 13svh, 4.25rem);
  }
  html.cinema-ready[data-motion="on"] body .motion-story .cinema-scene .cinema-summary,
  html.cinema-ready[data-motion="on"] body .motion-story .cinema-scene.cinema-intro .cinema-summary {
    max-width: 320px;
    width: 100%;
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.4;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .cinema-service-line {
    margin-top: 9px;
    font-size: 6px;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .story-actions {
    left: 20px;
    right: auto;
    bottom: 17px;
    gap: 8px;
    max-width: 54%;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .story-actions .button {
    min-height: 44px;
    font-size: 8px;
    padding-inline: 12px;
    gap: 12px;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .story-actions .story-skip {
    position: static;
    font-size: 6px;
    padding: 4px;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .hero-console {
    right: 20px;
    bottom: 61px;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .premiere-selector {
    right: 20px;
    bottom: 120px;
    width: 252px;
    padding: 7px 9px;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .premiere-selector button {
    min-height: 44px;
    font-size: 7px;
    padding-block: 8px;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .story-chapter-nav {
    right: 20px;
    bottom: 5px;
    gap: 10px;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .hero-touch-surface {
    right: 0;
    top: 8%;
    width: 45%;
    height: 82%;
  }
  html.cinema-ready[data-motion="on"] body .motion-story .story-scroll-cue {
    bottom: 3px;
    font-size: 6px;
  }

  html[data-motion="on"] body #personal-brand-intro.personal-ready .personal-content {
    top: 40px;
    width: 58%;
  }
  html[data-motion="on"] body #personal-brand-intro.personal-ready .personal-content .eyebrow {
    margin-bottom: 12px;
    font-size: 7px;
  }
  html[data-motion="on"] body #personal-brand-intro.personal-ready h1.personal-title {
    font-size: clamp(2.3rem, 11svh, 3.7rem);
  }
  html[data-motion="on"] body #personal-brand-intro.personal-ready .personal-copy {
    bottom: 53px;
    gap: 10px;
    max-width: 54%;
  }
  html[data-motion="on"] body #personal-brand-intro.personal-ready .personal-copy p {
    max-width: 350px;
    font-size: 11px;
    line-height: 1.4;
  }
  html[data-motion="on"] body #personal-brand-intro.personal-ready .personal-copy .button {
    min-height: 44px;
    font-size: 10px;
  }
  html[data-motion="on"] body #personal-brand-intro.personal-ready .personal-scene-footer {
    bottom: 8px;
  }
  html[data-motion="on"] body #personal-brand-intro.personal-ready .personal-meta {
    top: 10px;
  }
}

/* In a narrow, short window the original portrait scene needs a small scroll
   allowance. Its bottom edge can pin inside the viewport; nothing is clipped
   behind the window edge or switched off to make the controls fit. */
@media (max-width: 650px) and (max-height: 539px) {
  html.cinema-ready[data-motion="on"] body .motion-story .cinema-stage {
    height: 570px;
    min-height: 570px;
    top: min(var(--cinema-header, 64px), calc(100svh - 570px));
  }
  html[data-motion="on"] body #personal-brand-intro.personal-ready .personal-stage {
    height: 570px;
    min-height: 570px;
    top: min(var(--cinema-header, 64px), calc(100svh - 570px));
  }
  html[data-motion="on"] body #personal-brand-intro.personal-ready .personal-shell {
    height: 100%;
    min-height: 0;
  }

}

/* A 320px browser keeps the same typeface, palette, scenes, and controls. */
@media (max-width: 329px) {
  html .site-header .header-inner { gap: 8px; }
  html .site-header .wordmark { font-size: 13px; gap: 6px; }
  html .site-header .motion-toggle { padding-inline: 6px; font-size: 7px; }
  html .site-header .menu-toggle { gap: 6px; }
  html.cinema-ready[data-motion="on"] body .motion-story .story-actions { gap: 6px; }
  html.cinema-ready[data-motion="on"] body .motion-story .story-actions .button {
    padding-inline: 10px;
    gap: 9px;
  }
}

/* Existing desktop venture camera, with a reachable lower control band. */
@media (min-width:900px) and (max-height:539px) {
  html.cinema-ready[data-motion="on"] body #ventures .venture-stage {
    height:450px;
    min-height:450px;
    top:min(var(--cinema-header,64px),calc(100svh - 450px));
  }
}