/* Optical type scale and deliberate mobile compositions. */
:root { --pad:clamp(24px,5vw,80px); --muted:#afb2a9; }
body { font-size:16px; font-synthesis:none; }
h1,h2,h3 { font-weight:560; letter-spacing:-.048em; text-wrap:balance; }
p { text-wrap:pretty; }
.wordmark { font-weight:800; }
.wordmark-studio { font-size:13px; margin-left:12px; }
.site-header { height:100px; }
.desktop-nav { gap:38px; margin-left:50px; }
.desktop-nav a,.header-cta { font-size:14px; }
.desktop-nav a { padding:12px 0; }
.header-cta { padding:12px 22px; gap:24px; }
.eyebrow { font-size:11px; letter-spacing:.11em; line-height:1.5; }
.section { padding-top:132px; padding-bottom:132px; }
.hero { min-height:690px; }
.hero-content { padding-top:66px; padding-bottom:62px; }
.hero .eyebrow { margin-bottom:38px; }
.hero h1 { font-size:clamp(96px,11.8vw,174px); font-weight:570; letter-spacing:-.069em; line-height:1.02; }
.hero-art { width:79%; right:-13%; }
.hero-art picture { width:100%; height:100%; display:block; }
.hero-intro { margin-top:38px; gap:48px; }
.hero-intro p { font-size:16px; line-height:1.7; color:#c4c7be; }
.round-link { font-size:13px; gap:16px; }
.round-icon { width:58px; height:58px; border-color:#72776b; }
.work { padding-top:82px; padding-bottom:116px; }
.section-title { margin-bottom:58px; }
.section-title h2 { font-size:clamp(42px,4.5vw,66px); line-height:1.12; }
.section-count { font-size:12px; letter-spacing:.015em; }
.work-grid { column-gap:42px; row-gap:76px; }
.project-art { border-radius:5px; }
.project-offset,.project-last { margin-top:114px; }
.project-caption { margin-top:26px; gap:18px; }
.project-caption h3 { font-size:22px; font-weight:560; letter-spacing:-.035em; line-height:1.35; }
.project-caption p { font-size:14px; line-height:1.6; margin-top:8px; }
.project-type { font-size:11px; line-height:1.6; margin-top:7px; }
.browser-frame { width:87%; }
.browser-bar { font-size:9px; height:27px; }
.browser-frame video { top:27px; height:calc(100% - 27px); }
.manifesto { padding-top:125px; padding-bottom:120px; }
.manifesto h2 { font-size:clamp(45px,6.2vw,92px); font-weight:520; line-height:1.13; letter-spacing:-.055em; }
.manifesto .muted { color:#969c8f; }
.manifesto-bottom { margin-top:54px; }
.manifesto-bottom p { font-size:20px; max-width:510px; line-height:1.7; }
.large-asterisk { font-size:86px; font-weight:400; }
.expertise .section-title { margin-bottom:66px; }
.expertise-layout { gap:8%; grid-template-columns:5fr 6fr; }
.expertise-visual img { aspect-ratio:1.15; }
.visual-caption { font-size:12px; margin-top:20px; }
.expertise-list details { padding:25px 0; }
.expertise-list summary { min-height:54px; gap:28px; }
.expertise-list h3 { font-weight:540; font-size:clamp(30px,2.7vw,40px); line-height:1.2; }
.service-no { font-size:12px; }
.service-content { padding:24px 12px 15px 45px; }
.service-content>p:first-child { font-size:16px; line-height:1.75; }
.service-tags { font-size:12px; line-height:1.7; margin:23px 0; }
.service-content a { font-size:14px; padding:6px 0 10px; }
.process h2 { font-size:clamp(44px,5.2vw,76px); font-weight:520; line-height:1.15; }
.process-grid { gap:64px; margin-top:65px; }
.process-grid h3 { font-size:25px; font-weight:570; line-height:1.25; margin-top:25px; }
.process-grid p { font-size:16px; line-height:1.75; }
.studio { gap:8%; }
.studio h2 { font-size:clamp(40px,4.5vw,66px); font-weight:540; letter-spacing:-.055em; line-height:1.14; margin-bottom:33px; }
.studio-body { font-size:16px; line-height:1.75; margin-bottom:20px; }
.studio-image { border-radius:4px; }
.studio-copy .eyebrow { margin-bottom:30px; }
.founder-name { font-size:16px; margin:33px 0; }
.founder-name span:last-child { font-size:12px; margin-top:6px; }
.text-link { min-height:44px; font-size:14px; padding:7px 0; }
.contact-section { padding-top:110px; padding-bottom:80px; }
.contact-heading h2 { font-size:clamp(66px,8vw,120px); font-weight:520; letter-spacing:-.064em; line-height:1.09; }
.contact-arrow { font-size:clamp(84px,11vw,160px); }
.contact-bottom { margin-top:60px; }
.contact-bottom p { font-size:16px; line-height:1.7; }
.site-footer { padding-top:36px; padding-bottom:36px; gap:32px; }
.site-footer nav { font-size:12px; gap:24px; }
.site-footer nav a { min-height:44px; display:flex; align-items:center; }
.site-footer p,.copyright { font-size:11px; }
.mobile-break { display:none; }
.dialog-inner h2 { font-weight:550; }
.dialog-intro { font-size:17px; line-height:1.7; }
.dialog-bottom p { font-size:13px; }
@media(min-width:1600px) {
  .hero { min-height:760px; }
  .hero-content { padding-top:78px; }
}
@media(min-width:768px) and (max-width:1100px) {
  .hero { min-height:620px; }
  .hero h1 { font-size:12vw; }
  .hero-content { padding-top:54px; }
  .hero-intro { align-items:start; gap:22px; }
  .hero-intro p { font-size:14px; }
  .desktop-nav { gap:24px; margin-left:0; }
  .section { padding-top:100px; padding-bottom:100px; }
  .work-grid { column-gap:28px; row-gap:58px; }
  .project-caption h3 { font-size:20px; }
  .project-caption p { font-size:13px; }
  .project-type { font-size:11px; }
  .expertise-layout { grid-template-columns:4fr 6fr; gap:6%; }
  .expertise-list h3 { font-size:30px; }
  .service-content { padding-left:0; }
  .process-grid { gap:32px; }
  .process-grid h3 { font-size:21px; }
  .process-grid p { font-size:15px; }
  .studio { grid-template-columns:4fr 5fr; gap:6%; }
  .studio h2 { font-size:43px; }
  .studio-body { font-size:15px; }
}
@media(max-width:767px) {
  :root { --pad:24px; }
  html { scroll-padding-top:30px; }
  .site-header { height:80px; }
  .wordmark { font-size:35px; }
  .wordmark-studio { font-size:12px; margin-left:10px; }
  .header-cta { font-size:13px; padding:10px 0; margin-right:18px; gap:12px; }
  .menu-toggle { width:44px; min-width:44px; height:44px; padding:10px; margin-right:-10px; }
  .hero { display:grid; grid-template-columns:minmax(0,1fr); min-height:0; padding:24px var(--pad) 38px; }
  .hero-content { display:contents; }
  .hero .eyebrow { grid-row:1; max-width:none; margin:0 0 26px; font-size:10px; letter-spacing:.09em; }
  .hero h1 { grid-row:2; font-size:clamp(62px,19vw,138px); font-weight:565; letter-spacing:-.065em; line-height:1.06; }
  .hero-art { grid-row:3; position:relative; z-index:0; right:auto; top:auto; width:calc(100% + 48px); height:auto; aspect-ratio:1.52; margin:8px -24px 0; opacity:1; }
  .hero-art img { object-fit:contain; opacity:1; mask-image:linear-gradient(180deg,transparent 0%,black 12%,black 85%,transparent 100%); }
  .hero-art:after { display:none; }
  .hero-intro { grid-row:4; position:relative; margin:8px 0 0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:18px; }
  .hero-intro p { font-size:14px; line-height:1.7; color:#c5c8bf; }
  .round-link { font-size:11px; gap:9px; align-items:center; }
  .round-icon { width:50px; height:50px; font-size:27px; }
  .section { padding-top:88px; padding-bottom:88px; }
  .work { padding-top:47px; padding-bottom:80px; }
  .section-title { margin-bottom:33px; }
  .section-title h2 { font-size:clamp(34px,9.9vw,60px); font-weight:550; line-height:1.14; letter-spacing:-.055em; }
  .section-count { margin-top:15px; font-size:11px; }
  .project { margin:0 0 54px; }
  .project-art { width:calc(100% + 16px); margin-left:-8px; aspect-ratio:1.17; border-radius:4px; }
  .browser-frame { width:92%; transform:perspective(1000px) rotateY(-3deg) rotateX(2deg); border-radius:4px; }
  .northside-art .browser-frame { width:93%; transform:perspective(1000px) rotateZ(-2deg); }
  .beauty-art .browser-frame { transform:perspective(1000px) rotateY(3deg) rotateX(2deg); }
  .browser-bar { height:22px; font-size:8px; }
  .browser-frame video { top:22px; height:calc(100% - 22px); }
  .crockett-art { aspect-ratio:1; }
  .phone { width:40%; border-width:3px; border-radius:25px; }
  .phone-back { left:11%; top:8%; transform:rotate(-9deg); }
  .phone-front { left:47%; top:19%; transform:rotate(8deg); }
  .project-caption { display:block; margin-top:23px; }
  .project-caption h3 { font-size:22px; line-height:1.3; letter-spacing:-.04em; }
  .project-caption p { font-size:14px; margin-top:9px; line-height:1.65; }
  .project-type,.project-small .project-type,.project-offset .project-type { font-size:11px; margin-top:10px; line-height:1.6; }
  .manifesto .eyebrow { font-size:10px; margin-bottom:28px; }
  .manifesto h2 { font-size:clamp(38px,10.8vw,65px); font-weight:510; line-height:1.16; letter-spacing:-.055em; }
  .manifesto-bottom { margin-top:30px; gap:26px; }
  .large-asterisk { font-size:55px; }
  .manifesto-bottom p { font-size:17px; line-height:1.75; }
  .expertise .section-title { margin-bottom:36px; }
  .expertise-layout { gap:36px; }
  .expertise-visual img { aspect-ratio:1.55; }
  .visual-caption { font-size:11px; margin-top:15px; }
  .expertise-list details { padding:22px 0; }
  .expertise-list summary { gap:21px; min-height:52px; }
  .expertise-list h3 { font-size:clamp(27px,7.6vw,43px); font-weight:550; letter-spacing:-.04em; }
  .service-no { font-size:11px; }
  .service-content { padding:18px 0 12px 0; }
  .service-content>p:first-child { font-size:16px; line-height:1.75; }
  .service-tags { font-size:12px; line-height:1.7; margin:20px 0; }
  .service-content a { font-size:13px; min-height:44px; }
  .process h2 { font-size:clamp(37px,10.4vw,62px); font-weight:520; line-height:1.17; }
  .process-grid { margin-top:38px; gap:34px; }
  .process-grid article { grid-template-columns:25px minmax(0,1fr); gap:0 16px; padding-top:27px; }
  .process-grid h3 { font-size:23px; font-weight:570; line-height:1.3; margin:2px 0 15px; }
  .process-grid p { font-size:15px; line-height:1.8; }
  .studio { gap:41px; }
  .studio-image { max-height:450px; }
  .studio-image img { aspect-ratio:.94; }
  .studio-copy .eyebrow { font-size:10px; margin-bottom:25px; }
  .studio h2 { font-size:clamp(34px,10.1vw,60px); font-weight:540; line-height:1.15; margin-bottom:27px; }
  .studio-body { font-size:16px; line-height:1.75; }
  .founder-name { font-size:16px; margin:28px 0 20px; }
  .founder-name span:last-child { font-size:12px; }
  .text-link { min-height:48px; font-size:14px; gap:20px; }
  .contact-section { padding-top:76px; padding-bottom:65px; }
  .contact-heading { display:block; position:relative; }
  .contact-heading h2 { font-size:clamp(54px,17.1vw,104px); font-weight:520; line-height:1.09; letter-spacing:-.065em; }
  .mobile-break { display:block; }
  .contact-arrow { position:absolute; right:2px; bottom:3px; font-size:57px; margin:0; }
  .contact-bottom { margin-top:31px; gap:15px; }
  .contact-bottom p { font-size:15px; line-height:1.7; margin-bottom:8px; }
  .contact-bottom .text-link { font-size:15px; }
  .site-footer { padding-top:30px; padding-bottom:30px; gap:20px 12px; }
  .site-footer p { font-size:11px; line-height:1.7; }
  .site-footer nav { font-size:12px; gap:14px; }
  .copyright { font-size:11px; }
  .menu-top { height:80px; }
  .menu-close { min-height:44px; font-size:13px; }
  .mobile-menu nav { padding-top:54px; gap:27px; }
  .mobile-menu nav a { font-size:clamp(42px,12vw,74px); font-weight:540; }
  .menu-email { font-size:14px; margin-top:54px; }
  .dialog-inner { padding:83px 21px 28px; }
  .dialog-inner h2 { font-size:52px; }
  .dialog-inner>.eyebrow { font-size:10px; }
  .dialog-intro { font-size:15px; line-height:1.7; }
  .dialog-close { min-height:44px; font-size:12px; }
  .dialog-phones { margin-top:30px; padding:28px 14px; }
  .dialog-bottom p { font-size:12px; }
  .dialog-bottom .text-link { font-size:13px; margin-top:12px; }
}
@media(max-width:359px) {
  :root { --pad:20px; }
  .wordmark-studio { display:none; }
  .hero h1 { font-size:19.2vw; }
  .hero .eyebrow { font-size:9px; }
  .hero-art { width:calc(100% + 40px); margin-left:-20px; margin-right:-20px; }
  .hero-intro p { font-size:13px; }
  .round-link { font-size:10px; }
  .round-icon { width:46px; height:46px; }
  .project-caption h3 { font-size:20px; }
  .site-footer nav { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) {
  .project-art:hover .browser-frame,.phone { transform:none; }
}
/* The sculpture is lit and rendered in 3D; its still image is the loading fallback. */
.hero-art picture { transition:opacity 1s ease; }
.hero-canvas { position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1.2s ease; }
.hero-art.is-3d picture { opacity:0; }
.hero-art.is-3d .hero-canvas { opacity:1; }
.hero-art.is-3d:after { display:none; }
.hero-motion { position:absolute; bottom:23px; right:var(--pad); z-index:2; font:500 11px/1.4 Manrope,sans-serif; color:#a9afa3; border:0; background:transparent; padding:12px 0 12px 16px; min-height:44px; cursor:pointer; }
.hero-motion:hover { color:var(--ink); }
.hero-motion:focus-visible { outline:1px solid var(--accent); outline-offset:3px; }
@media(min-width:768px) { .hero-art.is-3d { width:70%; right:-8%; } }
@media(max-width:767px) { .hero-motion { bottom:0; right:24px; font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .hero-canvas,.hero-art picture { transition:none; } }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .project-art .browser-frame,.project-art .phone { translate:var(--drift-x,0px) var(--drift-y,0px); rotate:1 1 0 var(--tilt,0deg); transition:transform .7s var(--ease),translate .35s ease-out,rotate .45s ease-out; }
  .project-caption h3 a span,.project-caption h3 button span { display:inline-block; transition:transform .35s var(--ease); }
  .project-caption h3 a:hover span,.project-caption h3 button:hover span { transform:translate(3px,-3px); }
  .header-cta span,.text-link span { display:inline-block; transition:transform .35s var(--ease); }
  .header-cta:hover span,.text-link:hover span { transform:translate(3px,-3px); }
}
@media(prefers-reduced-motion:no-preference) {
  .project-dialog[open] .dialog-phones img { animation:phoneArrival .7s var(--ease) both; }
  .project-dialog[open] .dialog-phones img:nth-child(2) { animation-delay:.08s; }
  .project-dialog[open] .dialog-phones img:nth-child(3) { animation-delay:.16s; }
  @keyframes phoneArrival { from { opacity:0; translate:0 24px; } to { opacity:1; translate:0 0; } }
}