@import url("/design-system/tokens.css");
@import url("/design-system/brand.css");

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--ou-color-terminal-300); color:var(--ou-color-ink-900); }
:focus-visible { outline:0; box-shadow:0 0 0 2px var(--ou-color-ink-900),0 0 0 5px var(--ou-color-process-100); border-radius:var(--ou-radius-1); }
.studio-page { background:var(--ou-color-ink-900); color:var(--ou-color-shell-50); font-family:var(--ou-font-sans); }
.studio-shell { width:min(1280px,calc(100% - 64px)); margin-inline:auto; }
.studio-skip-link { position:fixed; z-index:100; top:12px; left:12px; padding:12px 16px; border-radius:var(--ou-radius-1); background:var(--ou-color-shell-50); color:var(--ou-color-ink-900); transform:translateY(-150%); }
.studio-skip-link:focus { transform:translateY(0); }
.studio-header { height:96px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgb(247 243 233 / .24); }
.studio-brand { display:flex; align-items:center; gap:14px; }
.studio-brand>span { padding-left:14px; border-left:1px solid rgb(247 243 233 / .35); color:var(--ou-color-shell-100); font:10px/1.2 var(--ou-font-mono); letter-spacing:.12em; text-transform:uppercase; }
.studio-nav { display:flex; align-items:center; gap:30px; font:11px/1 var(--ou-font-mono); letter-spacing:.1em; text-transform:uppercase; }
.studio-nav a { color:var(--ou-color-shell-100); transition:color var(--ou-duration-base); }
.studio-nav a:hover { color:var(--ou-color-terminal-300); }
.studio-hero { min-height:calc(100vh - 96px); padding:72px 0 0; display:flex; flex-direction:column; }
.studio-eyebrow,.studio-label { margin:0; color:var(--ou-color-terminal-300); font:11px/1.4 var(--ou-font-mono); letter-spacing:.12em; text-transform:uppercase; }
.studio-eyebrow { display:flex; align-items:center; gap:10px; }
.studio-eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--ou-color-terminal-300); }
.studio-hero h1 { margin:auto 0 58px; max-width:1150px; font-size:clamp(5rem,11.2vw,10.4rem); line-height:.78; letter-spacing:-.075em; font-weight:720; }
.studio-hero-foot { padding-left:25%; display:grid; grid-template-columns:1.25fr 1fr; gap:64px; align-items:end; }
.studio-hero-foot>p { max-width:660px; margin:0; color:var(--ou-color-shell-100); font-size:clamp(1.25rem,2.1vw,1.85rem); line-height:1.4; letter-spacing:-.025em; }
.studio-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
.studio-button { min-height:52px; display:inline-flex; align-items:center; justify-content:space-between; gap:34px; padding:0 20px; border:1px solid rgb(247 243 233 / .65); border-radius:var(--ou-radius-1); color:var(--ou-color-shell-50); font:11px/1 var(--ou-font-mono); letter-spacing:.08em; text-transform:uppercase; transition:transform var(--ou-duration-base) var(--ou-ease-standard),background var(--ou-duration-base),color var(--ou-duration-base); }
.studio-button:hover { transform:translateY(-2px); background:var(--ou-color-shell-50); color:var(--ou-color-ink-900); }
.studio-button-light { background:var(--ou-color-shell-50); color:var(--ou-color-ink-900); }
.studio-button-light:hover { background:var(--ou-color-terminal-300); border-color:var(--ou-color-terminal-300); }
.studio-ticker { margin-top:68px; min-height:58px; padding:0 3px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid rgb(247 243 233 / .55); font:9px/1 var(--ou-font-mono); letter-spacing:.13em; }
.studio-ticker span:not(:last-child)::after { content:"/"; margin-left:clamp(20px,6vw,90px); color:var(--ou-color-terminal-300); }
.studio-work { background:var(--ou-color-shell-50); color:var(--ou-color-ink-900); padding:132px 0; }
.studio-section-head { display:grid; grid-template-columns:.4fr 1.15fr .65fr; gap:48px; align-items:start; }
.studio-section-head h2,.studio-about h2,.studio-contact h2 { margin:0; font-size:clamp(3rem,6.6vw,6rem); line-height:.92; letter-spacing:-.065em; font-weight:650; }
.studio-section-head>p:last-child { max-width:400px; margin:5px 0 0; color:var(--ou-color-text-muted); font-size:17px; line-height:1.6; }
.studio-section-head .studio-label { margin-top:6px; color:var(--ou-color-terminal-700); }
.studio-project { min-height:360px; margin-top:92px; padding:38px 0 0; display:grid; grid-template-columns:.4fr 1.15fr .65fr; gap:48px; border-top:1px solid var(--ou-color-ink-900); }
.studio-project-index { font:12px/1 var(--ou-font-mono); }
.studio-project-copy>.studio-label { color:var(--ou-color-terminal-700); }
.studio-project h3 { margin:22px 0; font-size:clamp(4rem,8vw,8rem); line-height:.86; letter-spacing:-.075em; font-weight:700; }
.studio-project-copy>p:not(.studio-label) { max-width:720px; margin:0; color:var(--ou-color-text-muted); font-size:18px; line-height:1.6; }
.studio-project-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.studio-project-tags span { padding:7px 11px; border:1px solid var(--ou-color-border); border-radius:var(--ou-radius-round); font:10px/1 var(--ou-font-mono); letter-spacing:.06em; text-transform:uppercase; }
.studio-project-link { align-self:end; justify-self:end; padding-bottom:6px; border-bottom:1px solid currentColor; font:11px/1.3 var(--ou-font-mono); letter-spacing:.08em; text-transform:uppercase; }
.studio-project-link:hover { color:var(--ou-color-terminal-700); }
.studio-capabilities { padding:128px 0; }
.studio-section-head-light>p:last-child { color:var(--ou-color-shell-100); opacity:.72; }
.studio-capability-grid { margin:86px 0 0 25%; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgb(247 243 233 / .55); }
.studio-capability-grid article { min-height:300px; padding:30px 32px 36px; border-bottom:1px solid rgb(247 243 233 / .24); border-right:1px solid rgb(247 243 233 / .24); }
.studio-capability-grid article:first-child { padding-left:0; }
.studio-capability-grid article:last-child { border-right:0; }
.studio-capability-grid article>p { margin:0; color:var(--ou-color-terminal-300); font:10px/1 var(--ou-font-mono); }
.studio-capability-grid h3 { margin:94px 0 16px; font-size:28px; letter-spacing:-.04em; }
.studio-capability-grid span { display:block; color:var(--ou-color-shell-100); opacity:.72; font-size:15px; line-height:1.6; }
.studio-about { padding:130px 0; display:grid; grid-template-columns:.4fr 1.8fr; gap:48px; border-top:1px solid rgb(247 243 233 / .24); }
.studio-about>div p { max-width:760px; margin:46px 0 0; color:var(--ou-color-shell-100); font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.55; }
.studio-about a { border-bottom:1px solid var(--ou-color-terminal-300); color:var(--ou-color-terminal-300); }
.studio-contact { padding:130px 0; background:var(--ou-color-terminal-100); color:var(--ou-color-ink-900); }
.studio-contact .studio-label { color:var(--ou-color-terminal-700); }
.studio-contact h2 { margin:30px 0 58px; }
.studio-button-dark { border-color:var(--ou-color-ink-900); background:var(--ou-color-ink-900); color:var(--ou-color-shell-50); }
.studio-button-dark:hover { border-color:var(--ou-color-terminal-700); background:var(--ou-color-terminal-700); color:var(--ou-color-shell-50); }
.studio-footer { padding:68px 0; border-top:1px solid rgb(247 243 233 / .24); }
.studio-footer-grid { display:grid; grid-template-columns:1fr 1fr auto; gap:52px; align-items:end; }
.studio-footer-grid>div:first-child>p,.studio-copyright { margin:18px 0 0; color:var(--ou-color-shell-100); opacity:.55; font:10px/1.65 var(--ou-font-mono); letter-spacing:.08em; text-transform:uppercase; }
.studio-footer-links { display:flex; flex-direction:column; gap:10px; color:var(--ou-color-shell-100); font-size:13px; }
.studio-footer-links a:hover { color:var(--ou-color-terminal-300); }
.studio-copyright { text-align:right; }

@media (max-width:900px) {
  .studio-shell { width:min(100% - 32px,760px); }
  .studio-header { height:78px; }
  .studio-nav { gap:16px; }
  .studio-nav a:nth-child(2) { display:none; }
  .studio-hero { min-height:auto; padding-top:56px; }
  .studio-hero h1 { margin:130px 0 48px; font-size:clamp(4.5rem,17vw,8rem); }
  .studio-hero-foot,.studio-section-head,.studio-project { padding-left:0; grid-template-columns:1fr; gap:26px; }
  .studio-actions { justify-content:flex-start; }
  .studio-ticker { margin-top:58px; }
  .studio-ticker span:nth-child(2) { display:none; }
  .studio-work,.studio-capabilities,.studio-about,.studio-contact { padding-top:88px; padding-bottom:88px; }
  .studio-project { margin-top:68px; }
  .studio-project-link { justify-self:start; margin-top:20px; }
  .studio-capability-grid { margin-left:0; grid-template-columns:1fr; }
  .studio-capability-grid article,.studio-capability-grid article:first-child { min-height:auto; padding:26px 0 34px; border-right:0; }
  .studio-capability-grid h3 { margin:42px 0 14px; }
  .studio-about { grid-template-columns:1fr; }
  .studio-footer-grid { grid-template-columns:1fr; align-items:start; }
  .studio-copyright { text-align:left; }
}

@media (max-width:560px) {
  .studio-brand>span { display:none; }
  .studio-nav a:not(:last-child) { display:none; }
  .studio-hero h1 { margin-top:100px; font-size:clamp(4.1rem,19vw,6rem); }
  .studio-hero-foot>p { font-size:1.2rem; }
  .studio-button { width:100%; }
  .studio-ticker { justify-content:flex-start; }
  .studio-ticker span:not(:first-child) { display:none; }
  .studio-section-head h2,.studio-about h2,.studio-contact h2 { font-size:3.25rem; }
  .studio-project h3 { font-size:4rem; }
}

@media (forced-colors:active) { * { box-shadow:none!important; } .studio-brand img,.studio-footer img { forced-color-adjust:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; } }