:root{--paper:#fff8f2;--cream:#f4e0bb;--green:#324d32;--lime:#cbebc6;--gold:#ffdf99}*{box-sizing:border-box}html{scrollbar-width:thin;scrollbar-color:#765a0b var(--paper)}body{margin:0;background:var(--green);font-family:Inter,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ffdf99;outline-offset:7px}.skip{position:fixed;left:20px;top:-90px;z-index:30;background:var(--cream);padding:16px}.skip:focus{top:20px}#journey{height:760vh}.stage{position:sticky;top:0;height:100svh;overflow:hidden}.panel{position:absolute;inset:0;overflow:hidden;will-change:transform}.hero{background:var(--paper);z-index:1}.hero-art{width:100%;height:100%;position:relative;color:#765a0b;font-family:Federo,sans-serif}.name{position:absolute;top:6.37%;left:3.2%;font-size:clamp(16px,1.875vw,28px)}h1,p,h2{margin:0}h1{font-weight:400}.creative{position:absolute;top:17.43%;left:24.77%;font-size:7.5vw;white-space:nowrap}.designer{position:absolute;top:30.4%;left:40.23%;font-size:10vw}.subtitle{position:absolute;top:47.36%;left:43.83%;font-size:1.875vw;color:#6b5d3f;white-space:nowrap}.portrait{position:absolute;width:58.59%;height:100%;left:0;top:0;object-fit:contain;object-position:left bottom;pointer-events:none}.intro{z-index:3;background:var(--cream);border-radius:13.6vw 13.6vw 0 0;transform:translateY(101%)}.intro-content{position:absolute;top:26.44%;width:100%;text-align:center;color:var(--lime);will-change:transform}.eyebrow{font-size:clamp(14px,1.5625vw,24px);letter-spacing:-.06em;color:var(--cream);margin-bottom:4px}.intro h2{font-weight:500;font-size:clamp(25px,2.8125vw,48px);line-height:1.22;letter-spacing:-.06em}.reel{display:block;margin:3.7vw auto 0;width:50.16vw;height:22.11vw;max-height:34svh;background:rgba(217,217,217,.2);border:1px solid rgba(255,255,255,.14);color:var(--lime);border-radius:8.594vw;font-size:5vw;font-weight:600;letter-spacing:-.06em;transition:border-radius .3s ease-in-out}.reel:hover,.reel:focus-visible{border-radius:3.125vw}.statement{font:400 5vw/1.15 Arial,sans-serif;max-width:90%;margin:22vw auto 0}.works{z-index:4;background:var(--cream);border-radius:13.6vw;transform:translateY(101%);color:#111}.works h2{position:absolute;top:44.7%;width:100%;text-align:center;font-size:5.625vw;font-weight:400;letter-spacing:-.06em}.track{position:absolute;left:0;top:33.3%;display:flex;gap:6.5625vw;align-items:flex-start;will-change:transform}.card{width:17.34375vw;height:21.640625vw;background:#d9d9d9;flex:none}.card.short{height:12.265625vw}.card.tiny{height:7.89vw}.card.wide{width:27.5vw}.contact{z-index:2;background:var(--green);color:white}.contact-inner{position:absolute;inset:0;display:flex;align-items:center;flex-direction:column;padding-top:23.55svh}.contact h2{position:relative;font-size:10vw;font-weight:500;letter-spacing:-.06em;line-height:.98}.contact h2>span{display:block;position:relative;z-index:1}.contact .together{color:var(--gold);margin-top:2.3vw}.contact-circle{position:absolute;left:26.6%;top:6.95vw;width:13.125vw;height:13.125vw}.email-block{text-align:center;margin-top:9vw}.email-block p{font-size:1.5625vw;color:#cfcfcf;letter-spacing:-.06em}.email-row{display:flex;align-items:center;justify-content:center;gap:8px}.email-row>a{text-decoration:none;font-size:3.125vw;letter-spacing:-.06em}.email-row>a:hover{text-decoration:underline}.copy{display:grid;place-items:center;width:26px;height:30px;border:0;border-radius:7px;background:var(--gold);color:var(--green)}#copy-status{display:block;min-height:24px;margin-top:10px;font-size:14px}dialog{border:0;border-radius:24px;background:var(--cream);color:var(--green);padding:56px 40px;width:min(480px,90vw)}dialog::backdrop{background:#172517b8;backdrop-filter:blur(8px)}dialog h2{font-size:36px;letter-spacing:-.05em;margin:22px 0 12px}dialog p{line-height:1.5}dialog a{display:inline-block;margin-top:28px}.dialog-label{font-family:Federo}.close{position:absolute;right:16px;top:10px;background:none;border:0;font-size:32px;color:var(--green)}
@media(max-width:600px){#journey{height:700svh}.name{top:5%;left:6%;font-size:18px}.creative{top:19%;left:8%;font-size:11vw}.designer{top:27%;left:28%;font-size:14vw}.subtitle{top:38%;left:29%;width:65%;font-size:3.15vw;white-space:normal;line-height:1.35}.portrait{width:100%;height:88%;top:24%;left:-16%;object-fit:cover}.intro,.works{border-radius:16vw}.intro-content{top:25%}.eyebrow{font-size:14px;margin-bottom:12px}.intro h2{font-size:7vw}.reel{width:78vw;height:36vw;max-height:none;margin-top:40px;border-radius:15vw;font-size:8vw}.reel:hover,.reel:focus-visible{border-radius:6vw}.statement{font-size:8vw;max-width:86%;margin-top:39vh}.desktop-break{display:none}.works h2{font-size:11vw;top:46%}.track{top:35%;gap:12vw}.card{width:42vw;height:54vw}.card.short{height:32vw}.card.tiny{height:24vw}.card.wide{width:66vw}.contact-inner{padding-top:29svh}.contact h2{font-size:16vw}.contact .together{margin-top:5vw}.contact-circle{width:23vw;height:23vw;top:12vw}.email-block{margin-top:22vw}.email-block p{font-size:14px;margin-bottom:8px}.email-row>a{font-size:6.5vw}}
@media(prefers-reduced-motion:reduce){#journey{height:auto}.stage{position:relative;height:auto;overflow:visible}.panel{position:relative;transform:none!important;min-height:100svh;will-change:auto}.hero{height:100svh}.intro{background:var(--green)!important;border-radius:0}.intro-content{position:relative;top:auto;padding:90px 20px;transform:none!important}.statement{margin-top:100px}.works{padding:100px 0;min-height:75svh;border-radius:0}.works h2{position:relative;top:auto;filter:none!important}.track{position:relative;top:auto;padding:60px 24px 0;transform:none!important;overflow-x:auto}.contact{height:100svh}.contact-inner{position:relative}.reel{transition:none}}
/* Prototype motion layers: backgrounds, headings and cards move independently. */
@media(prefers-reduced-motion:no-preference){
 #journey{height:1000svh}
 .panel{transform:none;border-radius:0;overflow:visible}
 .stage{isolation:isolate}
 .hero{overflow:hidden}
 .intro,.works{background:transparent;pointer-events:none}
 .intro-surface,.works-surface{position:absolute;left:0;top:0;width:100%;border-radius:13.59375vw;will-change:transform,height}
 .intro-surface{background:var(--cream)}.works-surface{background:var(--cream)}
 .intro-content{position:absolute;inset:0;transform:none;pointer-events:none}
 .intro-content>.eyebrow,.intro-content>h2,.intro-content>.reel,.intro-content>.statement{position:absolute;top:0;margin:0;will-change:transform}
 .intro-content>.eyebrow{left:0;width:100%;font-size:1.5625vw;line-height:1.2}
 .intro-content>h2{left:30%;width:40%;font-size:2.8125vw;line-height:1.22}
 .intro-content>.reel{left:25%;width:50.15625%;height:22.109375vw;max-height:none;pointer-events:auto;backdrop-filter:blur(5px);box-shadow:inset 0 1px 0 #ffffff26,inset 0 -1px 0 #ffffff12;background:linear-gradient(145deg,#d9d9d925,#d9d9d936)}
 .intro-content>.statement{left:11.71875%;width:76.5625%;max-width:none;font-size:5vw;line-height:1.15;transform-origin:center top;color:var(--lime)}
 .works>h2{top:0;left:0;width:100%;font-size:7.5vw;line-height:1.21;transform-origin:center top;will-change:transform,filter}
 .track{top:0;left:0}
 .glass{position:absolute;inset:-10%;z-index:2;pointer-events:none;background:#d9d9d925;backdrop-filter:blur(5px);opacity:0}
 .contact{pointer-events:none}.contact a,.contact button{pointer-events:auto}
 .contact-inner{will-change:transform}
 .contact .email-block{margin-top:9vw}
 @media(max-width:600px){
  #journey{height:1050svh}
  .intro-surface,.works-surface{border-radius:16vw}
  .intro-content>.eyebrow{font-size:14px}
  .intro-content>h2{left:5%;width:90%;font-size:7vw}
  .intro-content>.reel{left:11%;width:78%;height:36vw}
  .intro-content>.statement{left:4%;width:92%;font-size:8.5vw}
  .works>h2{font-size:14vw}
  .contact .email-block{margin-top:22vw}
 }
}
@media(prefers-reduced-motion:reduce){.intro-surface,.works-surface,.glass{display:none}.works{background:var(--cream)}.intro{background:var(--green)}}
/* Keep the 1280px reference canvas free of scrollbar-induced width changes. */
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.designer::before{content:' ';white-space:pre}
@media(prefers-reduced-motion:no-preference) and (min-width:601px){
 .intro-content>.eyebrow{left:40.78125%;width:20.9375%;text-align:left}
 .intro-content>.reel{background:linear-gradient(145deg,rgba(217,217,217,.17),rgba(217,217,217,.23));border:1px solid transparent;box-shadow:inset .6px .5px 0 #ffffff88,inset -.6px -.5px 0 #ffffff33}
}
@media(min-width:601px){
 .contact-inner{display:block;padding:0}
 .contact h2{position:absolute;left:28.359375%;top:23.557692%;width:43.203125%;height:37.139423%}
 .contact h2>span:first-child{transform:translateY(1.09375vw)}
 .contact h2>.together{position:absolute;left:.46875vw;top:12.109375vw;margin:0;transform:translateY(1.09375vw)}
 .contact-circle{left:11.484375vw;top:6.953125vw}
 .contact .email-block{position:absolute;top:71.274038%;left:0;width:100%;margin:0}
 .email-block>p{line-height:1.875vw}
 .email-row{position:relative;top:auto;left:auto;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:.390625vw;text-align:left}
 .email-row>a{display:block;line-height:3.75vw;white-space:nowrap}
 .email-row .copy{position:static;flex:none;width:32px;height:36px;padding:6px}
 #copy-status{margin-top:10px}
}