@font-face{font-family:Lausanne;src:url('assets/fonts/TWKLausanne-350.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Lausanne;src:url('assets/fonts/TWKLausanne-550.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--bg:#171717;--fg:#f1f0ec;--muted:#a3a29e;--line:#555450;--gutter:clamp(18px,3vw,48px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:Lausanne,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}img,video{display:block;max-width:100%}h1,h2,h3,p{margin:0}::selection{background:#f1f0ec;color:#171717}
.site-header{position:absolute;z-index:50;top:0;left:0;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:20px;padding:21px var(--gutter);color:#fff}.wordmark{font-family:Arial,Helvetica,sans-serif;font-size:clamp(23px,3.65vw,62px);font-weight:800;letter-spacing:-.055em;white-space:nowrap;line-height:1}.wordmark span,.footer-wordmark span{font-size:.23em;vertical-align:top;letter-spacing:0;margin-left:.15em}.primary-nav{display:flex;gap:clamp(16px,2.2vw,34px);padding-top:10px;font-size:14px}.primary-nav a,.header-contact,.site-footer a{transition:opacity .2s}.primary-nav a:hover,.header-contact:hover,.site-footer a:hover{opacity:.55}.header-contact{justify-self:end;padding-top:10px;font-size:14px}.header-contact span{margin-left:17px}.menu-toggle{display:none}
.hero{height:100svh;min-height:550px;position:relative;overflow:hidden;background:#d8550e}.hero-video,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 35%,rgba(0,0,0,.28))}.hero-bottom{position:absolute;bottom:var(--gutter);left:var(--gutter);right:var(--gutter);display:flex;align-items:end;justify-content:space-between;gap:24px}.hero h1{font-size:clamp(36px,5.3vw,88px);line-height:.98;letter-spacing:-.055em;font-weight:600;max-width:1000px;color:#fff}.scroll-cue{font-size:13px;white-space:nowrap;color:#fff}
.stack-gallery{position:relative;padding:12vh 0 19vh;background:var(--bg)}.stack-card{position:sticky;top:calc(20px + var(--i)*26px);display:block;margin:0 calc(var(--i)*2.1vw) 13vh;height:calc(100svh - 55px - var(--i)*28px);min-height:470px;overflow:hidden;border-radius:4px;background:#343434;isolation:isolate}.stack-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.stack-card:hover img{transform:scale(1.035)}.stack-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent 38%,rgba(0,0,0,.45))}.stack-number,.stack-label{position:absolute;z-index:1;color:#fff;font-size:clamp(17px,2.5vw,38px);font-weight:600;letter-spacing:-.04em;bottom:var(--gutter)}.stack-number{left:var(--gutter)}.stack-label{right:var(--gutter);text-align:right}.stack-label span{font-size:.6em;vertical-align:top}
.section-pad{padding:clamp(90px,13vw,200px) var(--gutter)}.eyebrow{font-size:14px;color:var(--muted)}.intro p{font-size:clamp(45px,7.2vw,116px);line-height:1.02;letter-spacing:-.065em;margin:80px 0 90px;max-width:1350px}.intro em,.cta-section em{font-family:Georgia,serif;font-weight:400}.intro-bottom{display:flex;justify-content:space-between;align-items:end}.intro-bottom>span{font-size:clamp(18px,2vw,29px);line-height:1.35;max-width:480px}.round-arrow{display:grid;place-items:center;width:80px;height:80px;border:1px solid var(--fg);border-radius:50%;font-size:32px;transition:background .25s,color .25s}.round-arrow:hover{background:var(--fg);color:var(--bg)}.section-heading{display:flex;justify-content:space-between;align-items:start;gap:25px;margin-bottom:70px}.section-heading h2,.page-title{font-size:clamp(54px,8vw,126px);line-height:.94;letter-spacing:-.075em;font-weight:600}.section-heading sup,.page-title sup{font-size:.2em;vertical-align:top;letter-spacing:0;margin-left:10px}.section-heading p{font-size:clamp(15px,1.4vw,20px);line-height:1.35;max-width:300px;color:var(--muted)}
.work-section{padding-top:60px}.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter);row-gap:clamp(65px,9vw,140px)}.work-card:nth-child(even){transform:translateY(12vw)}.work-image{overflow:hidden;background:#292929}.work-image img{width:100%;height:clamp(380px,49vw,750px);object-fit:cover;transition:transform .7s}.work-card:hover img{transform:scale(1.04)}.work-meta{display:flex;justify-content:space-between;gap:16px;margin-top:16px;font-size:15px}.work-meta h3{font-size:clamp(20px,2.1vw,32px);font-weight:400;letter-spacing:-.04em}.work-meta span{color:var(--muted);white-space:nowrap}.text-link{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;font-size:clamp(24px,3vw,46px);letter-spacing:-.04em;margin-top:calc(16vw + 40px);transition:padding .3s}.text-link:hover{padding-left:15px;padding-right:15px}
.index-section{padding-top:75px}.index-list{border-top:1px solid var(--line)}.index-list a{display:grid;grid-template-columns:8% 1fr 24% 5%;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding:25px 0;transition:padding .3s,background .3s}.index-list a:hover{padding-left:14px;background:#252525}.index-list span{font-size:14px;color:var(--muted)}.index-list strong{font-size:clamp(24px,3.4vw,55px);font-weight:400;letter-spacing:-.055em}.index-list b{justify-self:end;font-size:24px;font-weight:400}.notes-section{padding-top:75px}.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}.notes-grid a{min-height:400px;background:#2a2a29;padding:22px;display:flex;flex-direction:column;justify-content:space-between;transition:background .25s}.notes-grid a:nth-child(2){background:#35332f}.notes-grid a:nth-child(3){background:#292b2b}.notes-grid a:hover{background:#49443c}.notes-grid span{font-size:13px}.notes-grid h3{font-size:clamp(32px,3.6vw,60px);line-height:1.02;letter-spacing:-.055em;font-weight:400}
.cta-section{min-height:720px;height:100svh;position:relative;display:flex;align-items:center;padding:var(--gutter);overflow:hidden;background:#39312c}.cta-section>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.47)}.cta-section>div{position:relative;width:100%}.cta-section>div>span{font-size:14px}.cta-section h2{font-size:clamp(75px,13vw,220px);letter-spacing:-.075em;line-height:.84;margin:50px 0 60px;font-weight:600}.cta-section a{display:inline-flex;gap:80px;border-bottom:1px solid #fff;padding-bottom:14px;font-size:22px}.cta-section a:hover{gap:110px}
.site-footer{padding:60px var(--gutter) 24px;background:var(--bg);overflow:hidden}.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px;font-size:16px}.footer-top nav{display:flex;flex-direction:column;gap:7px;justify-self:center}.footer-top>a{justify-self:end}.footer-wordmark{font-family:Arial,Helvetica,sans-serif;display:block;font-size:clamp(42px,9.4vw,180px);font-weight:800;letter-spacing:-.065em;line-height:1;margin:170px 0 35px;white-space:nowrap}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:18px;font-size:12px;color:var(--muted)}
.page-main{padding-top:160px}.page-intro{padding:0 var(--gutter) 100px}.page-intro .page-title{margin-bottom:60px}.page-intro p{font-size:clamp(20px,2.3vw,34px);line-height:1.3;max-width:750px}.page-main .work-grid{padding:0 var(--gutter) 180px}.page-main .work-card:nth-child(even){transform:none}.page-main .work-grid{row-gap:90px}.about-columns{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);padding:0 var(--gutter) 120px}.about-columns p{font-size:clamp(24px,3.5vw,55px);line-height:1.12;letter-spacing:-.045em}.about-columns p+p{font-size:clamp(17px,1.8vw,26px);letter-spacing:0;line-height:1.4;color:var(--muted)}.about-image{width:100%;height:80vh;object-fit:cover}.principles{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:130px var(--gutter)}.principles article{border-top:1px solid var(--line);padding:25px 0 75px}.principles article span{font-size:13px;color:var(--muted)}.principles article h2{font-size:clamp(29px,4vw,65px);letter-spacing:-.055em;margin:45px 0 20px;font-weight:400}.principles article p{font-size:18px;line-height:1.4;max-width:500px;color:var(--muted)}.contact-lead{font-size:clamp(58px,9vw,150px)!important;line-height:.99!important;letter-spacing:-.065em;max-width:1200px!important;margin:80px 0 120px}.contact-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);padding:0 var(--gutter) 180px}.contact-options a{border-top:1px solid var(--line);padding:20px 0 100px;font-size:clamp(22px,3vw,48px);display:flex;justify-content:space-between}.contact-options a:hover{opacity:.55}.contact-note{font-size:14px!important;color:var(--muted);margin-top:20px}.blog-list{padding:0 var(--gutter) 150px}.blog-list article{border-top:1px solid var(--line);display:grid;grid-template-columns:22% 1fr;gap:30px;padding:45px 0 95px;scroll-margin-top:30px}.blog-list article h2{font-size:clamp(34px,5vw,80px);font-weight:400;letter-spacing:-.055em;margin-bottom:30px}.blog-list article p{font-size:clamp(19px,2vw,28px);line-height:1.4;max-width:800px;color:var(--muted)}
.project-hero{height:100svh;min-height:550px;position:relative}.project-hero img{width:100%;height:100%;object-fit:cover}.project-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 40%)}.project-info{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);padding:100px var(--gutter) 160px}.project-info h1{font-size:clamp(60px,8vw,130px);letter-spacing:-.07em;line-height:.94;font-weight:600}.project-info-right{max-width:650px}.project-info dl{margin:0 0 100px}.project-info dl div{display:grid;grid-template-columns:150px 1fr;border-top:1px solid var(--line);padding:18px 0;font-size:15px}.project-info dt{color:var(--muted)}.project-info dd{margin:0}.project-info p{font-size:clamp(22px,2.5vw,38px);line-height:1.25;letter-spacing:-.03em}.project-gallery{display:grid;gap:var(--gutter);padding:0 var(--gutter) 160px}.project-gallery img,.project-gallery video{width:100%;max-height:95vh;object-fit:cover}.project-next{border-top:1px solid var(--line);margin:0 var(--gutter);padding:24px 0 100px;display:flex;justify-content:space-between;align-items:center;font-size:clamp(30px,5vw,80px);letter-spacing:-.05em}.project-next small{font-size:14px;letter-spacing:0;color:var(--muted)}.toast{position:fixed;z-index:200;bottom:22px;left:50%;transform:translate(-50%,30px);padding:13px 20px;background:#eee;color:#171717;font-size:14px;opacity:0;pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:850px){.site-header{grid-template-columns:1fr auto;align-items:center;padding-top:20px}.wordmark{font-size:clamp(22px,5vw,40px)}.header-contact{display:none}.menu-toggle{display:block;border:0;background:none;color:#fff;z-index:2;padding:4px 0;font-size:14px}.menu-toggle span{display:inline-block;font-size:20px;margin-left:8px;transition:transform .25s}.menu-toggle[aria-expanded=true] span{transform:rotate(45deg)}.primary-nav{display:none;position:absolute;top:0;left:0;right:0;background:#171717;padding:100px var(--gutter) 40px;flex-direction:column;gap:15px;font-size:clamp(32px,7vw,55px)}.primary-nav.open{display:flex}.hero-bottom{align-items:start;flex-direction:column}.hero h1{font-size:clamp(38px,7vw,70px)}.stack-card{min-height:460px;height:75svh;top:calc(20px + var(--i)*17px);margin-bottom:10vh}.section-heading{flex-direction:column;gap:25px}.notes-grid a{min-height:330px}.footer-wordmark{margin-top:110px}.page-main{padding-top:145px}}
@media(max-width:650px){.hero{min-height:500px}.hero h1{font-size:clamp(38px,10vw,64px)}.scroll-cue{font-size:12px}.stack-gallery{padding-top:60px}.stack-card{height:72svh;min-height:400px;top:calc(12px + var(--i)*12px);margin:0 calc(var(--i)*1.5vw) 70px}.stack-number,.stack-label{font-size:17px}.intro p{margin:70px 0;font-size:clamp(43px,10vw,72px)}.intro-bottom>span{max-width:250px;font-size:17px}.round-arrow{width:55px;height:55px;font-size:25px}.work-grid,.notes-grid,.principles,.contact-options,.about-columns,.project-info{grid-template-columns:1fr}.work-card:nth-child(even){transform:none}.work-grid{row-gap:55px}.work-image img{height:110vw;max-height:610px}.work-meta{font-size:12px}.work-meta h3{font-size:21px}.text-link{margin-top:75px}.index-list a{grid-template-columns:30px 1fr 25px;padding:18px 0}.index-list a span:nth-of-type(2){display:none}.index-list strong{font-size:26px}.notes-grid{gap:12px}.notes-grid a{min-height:260px}.notes-grid h3{font-size:40px}.cta-section{min-height:570px;height:78svh}.cta-section h2{font-size:clamp(70px,15vw,110px)}.cta-section a{font-size:17px;gap:35px}.footer-top{grid-template-columns:1fr 1fr;font-size:14px}.footer-top nav{justify-self:end}.footer-top>a{grid-column:2;justify-self:end}.footer-wordmark{font-size:11vw;margin:100px 0 25px}.footer-bottom{font-size:10px;gap:20px}.page-intro{padding-bottom:70px}.page-intro .page-title{margin-bottom:40px}.page-main .work-grid{padding-bottom:100px;row-gap:55px}.about-columns{padding-bottom:75px}.about-columns p{font-size:37px}.about-image{height:55vh}.principles{padding-top:90px;padding-bottom:90px}.principles article{padding-bottom:45px}.contact-lead{margin:60px 0 75px}.contact-options{gap:10px;padding-bottom:100px}.contact-options a{padding-bottom:55px}.blog-list article{grid-template-columns:1fr;gap:25px;padding:30px 0 75px}.project-info{padding:70px var(--gutter) 100px}.project-info dl{margin-bottom:65px}.project-gallery{padding-bottom:90px}.project-next{padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
.primary-nav .nav-contact{display:none}@media(max-width:850px){.primary-nav .nav-contact{display:block}}
.stack-copy{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:var(--gutter);display:flex;justify-content:space-between;align-items:end;gap:24px;color:#fff}.stack-copy strong{font-weight:400;font-size:48px;line-height:1.15;letter-spacing:0}.stack-copy small{font-size:32px;line-height:1.2;letter-spacing:0;text-align:right;font-weight:400}.stack-card:has(.stack-copy) .stack-number{bottom:auto;top:var(--gutter);font-size:20px;font-weight:400}.intro p{font-weight:400;font-size:clamp(42px,4.7vw,72px);line-height:1.12;letter-spacing:-.04em}.cta-section h2{font-weight:400;font-size:clamp(70px,8vw,130px);line-height:1;letter-spacing:-.045em}.footer-top,.footer-bottom{font-size:20px}.footer-top nav{line-height:1.5}.footer-bottom{line-height:1.5}.project-brand-marks{display:flex;align-items:center;justify-content:space-around;gap:8vw;background:#f4f4f0;margin:0 var(--gutter) var(--gutter);padding:clamp(45px,9vw,130px)}.project-brand-marks img:first-child{width:min(50%,520px)}.project-brand-marks img:last-child{width:min(22%,180px)}@media(max-width:850px){.stack-copy{display:block}.stack-copy strong{display:block;font-size:clamp(30px,6vw,48px)}.stack-copy small{display:block;text-align:left;font-size:clamp(18px,4vw,28px);margin-top:7px}.intro p{font-size:clamp(38px,6vw,56px)}.footer-top,.footer-bottom{font-size:14px}}@media(max-width:650px){.stack-copy strong{font-size:30px}.stack-copy small{font-size:18px}.intro p{font-size:clamp(35px,8vw,48px)}.cta-section h2{font-size:clamp(66px,12vw,90px)}.project-brand-marks{padding:45px 20px;gap:20px}.project-brand-marks img:first-child{width:65%}.project-brand-marks img:last-child{width:25%}}
.cta-section h2{font-size:70px}@media(max-width:650px){.cta-section h2{font-size:clamp(54px,11vw,70px)}}

/* Motion and navigation inspired by the reference's fixed header and layered panels. */
.site-header{position:fixed;z-index:100;transition:padding .35s ease,background .35s ease;isolation:isolate}
.site-header .wordmark{position:relative;z-index:3;transition:font-size .45s cubic-bezier(.22,1,.36,1),letter-spacing .45s ease}
.site-header.is-scrolled{padding-top:12px;padding-bottom:12px}
.site-header.is-scrolled .wordmark{font-size:clamp(23px,2.8vw,43px)}
.site-header .primary-nav,.site-header .header-contact{position:relative;z-index:3}
.hero-bottom{bottom:clamp(24px,3vw,48px)}
.hero h1{font-size:clamp(38px,4.1vw,64px);max-width:820px;line-height:1.02}
.stack-gallery{padding:0 0 10vh;background:var(--bg)}
.stack-card{height:100svh;min-height:550px;top:calc(var(--i)*20px);margin:0 calc(var(--i)*4vw);border-radius:0;z-index:calc(10 + var(--i));transition:filter .6s ease}
.stack-card img{transition:transform .18s linear;transform:scale(var(--card-zoom,1.09))}
.stack-card:hover img{transform:scale(1.04)}
.stack-card .stack-copy,.stack-card .stack-label{opacity:0;translate:0 30px;transition:opacity .7s ease,translate .7s cubic-bezier(.22,1,.36,1)}
.stack-card.is-visible .stack-copy,.stack-card.is-visible .stack-label{opacity:1;translate:0 0}
.stack-card.is-covered .stack-copy,.stack-card.is-covered .stack-label{opacity:0;pointer-events:none;transition-duration:.4s}
.stack-card:after{background:linear-gradient(180deg,rgba(0,0,0,.13),transparent 28%,rgba(0,0,0,.28))}
.intro{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.intro p .reveal-word{color:#666;transition:color .45s ease}
.intro p .reveal-word.is-lit{color:var(--fg)}
.motion-reveal{opacity:0;translate:0 42px;transition:opacity .85s cubic-bezier(.22,1,.36,1),translate .85s cubic-bezier(.22,1,.36,1)}
.motion-reveal.is-visible{opacity:1;translate:0 0}
.work-card.motion-reveal:nth-child(even){transition-delay:.11s}
.index-list a.motion-reveal{transition-delay:.04s}
.page-main{animation:page-enter .65s cubic-bezier(.22,1,.36,1) both}
.hero h1{animation:page-enter .85s .18s cubic-bezier(.22,1,.36,1) both}
@keyframes page-enter{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}
.page-curtain{position:fixed;z-index:300;inset:0;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .35s ease}
.page-curtain.is-active{opacity:1;pointer-events:auto}
@media(max-width:850px){
  body.menu-open{overflow:hidden}
  .site-header{padding:12px 16px!important;align-items:start}
  .site-header .wordmark,.site-header.is-scrolled .wordmark{font-size:21px;line-height:1.1}
  .site-header .menu-toggle{position:relative;z-index:3;font-size:18px;line-height:1.1;padding:0;color:#fff}
  .site-header .menu-toggle span{display:none}
  .site-header .primary-nav{display:flex;position:fixed;z-index:2;inset:0;width:100vw;height:100dvh;padding:clamp(138px,18vh,180px) 16px 50px;background:#171717;flex-direction:column;align-items:start;gap:0;font-size:clamp(37px,10vw,48px);line-height:1.07;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-2%);transition:opacity .38s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility .38s}
  .site-header .primary-nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
  .site-header .primary-nav a{opacity:0;transform:translateY(15px);transition:opacity .45s ease,transform .55s cubic-bezier(.22,1,.36,1)}
  .site-header .primary-nav.open a{opacity:1;transform:translateY(0)}
  .site-header .primary-nav.open a:nth-child(1){transition-delay:.08s}.site-header .primary-nav.open a:nth-child(2){transition-delay:.12s}.site-header .primary-nav.open a:nth-child(3){transition-delay:.16s}.site-header .primary-nav.open a:nth-child(4){transition-delay:.2s}.site-header .primary-nav.open a:nth-child(5){transition-delay:.24s}
  .stack-card{height:100svh;min-height:500px;top:calc(var(--i)*13px);margin:0 calc(var(--i)*2.8vw)}
  .hero h1{font-size:clamp(28px,6.4vw,48px);max-width:560px}
}
@media(max-width:650px){
  .hero h1{font-size:clamp(28px,7vw,40px);line-height:1.04}
  .hero-bottom{bottom:24px}
  .stack-card{height:100svh;min-height:0;top:calc(var(--i)*10px);margin:0 calc(var(--i)*2.5vw)}
  .stack-gallery{padding-bottom:6vh}
  .stack-copy{bottom:24px;left:16px;right:16px}
  .stack-card:has(.stack-copy) .stack-number{top:64px;left:16px}
  .intro{min-height:85svh}
  .page-main{padding-top:95px}
  .page-main .page-title{font-size:clamp(42px,10vw,65px)}
  .page-main .work-grid{row-gap:55px}
}
@media(prefers-reduced-motion:reduce){.page-main{animation:none}.intro p .reveal-word{color:var(--fg)}.motion-reveal{opacity:1;translate:0 0}.stack-card .stack-copy,.stack-card .stack-label{opacity:1;translate:0 0}.page-curtain{transition:none}}

/* Desktop typography and placement from the client's 1440px Figma artboard. */
@media(min-width:851px){
  .site-header{padding-left:27px;padding-right:27px}
  .site-header .wordmark{font-family:Lausanne,Arial,sans-serif;font-size:50px;font-weight:600;letter-spacing:-.025em}
  .site-header.is-scrolled .wordmark{font-size:40px}
  .stack-copy{left:27px;right:27px;bottom:19px;align-items:baseline}
  .stack-copy small{order:1;text-align:left;font-size:32px;line-height:1.15;letter-spacing:0}
  .stack-copy strong{order:2;text-align:right;font-size:48px;line-height:1.15;letter-spacing:0}
  .intro p{font-size:64px;line-height:1.05;letter-spacing:0;max-width:1384px}
  .intro p .reveal-word:first-child{font-size:70px}
  .cta-section h2{font-size:70px;letter-spacing:0;line-height:1.5}
  .footer-top,.footer-bottom{font-size:20px;line-height:1.5}
}

/* Marks are overlays on the Brand Campaign card, not gallery cover images. */
.stack-card img.reddot-mark,.stack-card img.brand-mark{position:absolute;z-index:2;height:auto;object-fit:contain;pointer-events:none;transition:none}
.stack-card img.reddot-mark{top:21px;left:27px;width:min(11.25vw,162px);transform:none}
.stack-card img.brand-mark{top:50%;left:50%;width:min(29vw,415px);transform:translate(-50%,-50%)}
.stack-card:hover img.reddot-mark{transform:none}
.stack-card:hover img.brand-mark{transform:translate(-50%,-50%)}
@media(max-width:650px){
  .stack-card img.reddot-mark{top:18px;left:16px;width:clamp(80px,19vw,115px)}
  .stack-card img.brand-mark{width:min(55vw,310px)}
}

/* The original Figma homepage; the existing layered-scroll motion stays intact. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html:has(.figma-home){scroll-snap-type:y mandatory}
.figma-home .hero,.figma-home .stack-card,.figma-home .intro,.figma-home .figma-outro{scroll-snap-align:start;scroll-snap-stop:always}
.figma-home{background:#000;color:#fff}
.figma-home .site-header{display:flex;align-items:flex-start;justify-content:space-between;padding:21px 27px}
.figma-home .site-header{transition:opacity .3s ease}
.figma-home .site-header.is-scrolled{padding:12px 27px;opacity:0;pointer-events:none}
.figma-home .wordmark,.figma-home .site-header.is-scrolled .wordmark{font-family:Lausanne,Arial,sans-serif;font-size:40px;font-weight:600;letter-spacing:-.025em}
.figma-home .header-contact{font-size:18px;font-weight:400;padding-top:9px}
.figma-home .hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 35%,rgba(0,0,0,.12))}
.hero-shade{pointer-events:none}
/* Shown only when the browser refuses or fails to start the hero film. */
.hero-play{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px 12px 18px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:16px;line-height:1;letter-spacing:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;animation:hero-play-in .4s ease both;transition:background-color .2s ease,border-color .2s ease,opacity .2s ease}
.hero-play[hidden]{display:none}
.hero-play svg{width:14px;height:14px;fill:currentColor}
.hero-play:hover{background:rgba(0,0,0,.55);border-color:#fff}
.hero-play:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero-play[aria-disabled="true"]{opacity:.6;cursor:progress}
@keyframes hero-play-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-play{animation:none;transition:none}}
.figma-home .stack-gallery{padding:0;background:#000}
.figma-home .stack-card{background:#000}
.figma-home .stack-card:after{background:linear-gradient(180deg,transparent 75%,rgba(0,0,0,.2))}
/* Lift each card's copy by how far below the viewport its bottom rests when snapped, so all three share one viewport baseline.
   Cards stick var(--i) steps lower, except the last: the gallery ends with it, so it rests at top 0. */
.figma-home .stack-card{--rest-i:var(--i)}
.figma-home .stack-card:last-child{--rest-i:0}
@media(min-width:851px){.figma-home .stack-copy{bottom:calc(19px + var(--rest-i)*20px + max(0px,550px - 100svh))}}
.figma-home .intro{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;gap:32px;padding:27px 28px max(28px,calc(env(safe-area-inset-bottom) + 20px));background:#000}
.figma-home .intro p{margin:0;max-width:1384px;font-size:64px;font-weight:400;line-height:1.08;letter-spacing:0}
.figma-home .intro p .reveal-word:first-child{font-size:70px}
.figma-outro{position:relative;height:100svh;min-height:650px;background:#000;color:#8c8c8c;overflow:clip}
.figma-footer{position:absolute;inset:0;font-size:20px;font-weight:400;line-height:1.5}
/* Columns keep the Figma 48/44/8 split where it fits, but never shrink below their text, so the long company name and email cannot overlap. */
.figma-footer nav{position:absolute;top:30%;left:21px;right:21px;border-top:1px solid #8c8c8c;padding-top:12px;display:grid;grid-template-columns:minmax(max-content,48%) minmax(max-content,1fr) minmax(8%,max-content)}
.figma-footer nav>*{padding-right:16px}
.figma-footer nav>:last-child{padding-right:0}
.figma-footer nav span{display:flex;flex-direction:column;align-items:flex-start}
.figma-footer nav a{transition:color .2s}
.figma-footer nav a:hover{color:#fff}
.figma-footer .footer-symbol{position:absolute;left:-39px;bottom:21px;width:55%;pointer-events:none}
.figma-footer .footer-symbol img{display:block;width:100%;max-width:none;height:auto;transform:translateY(31.12%)}
.figma-footer small{position:absolute;right:21px;bottom:17px;font-size:10px;line-height:1.5;text-align:right}
@media(max-width:850px){
  .figma-home .site-header,.figma-home .site-header.is-scrolled{padding:16px!important}
  .figma-home .wordmark,.figma-home .site-header.is-scrolled .wordmark{font-size:clamp(18.4px,4vw,32px)}
  .figma-home .header-contact{display:block;font-size:14.4px;padding-top:3px}
  /* Title first then tagline at matching insets; bottom offset cancels each card's resting offset so all three copy blocks sit at one viewport level. */
  .figma-home .stack-copy{display:flex;flex-direction:column;align-items:flex-start;gap:7px;left:16px;right:16px;bottom:calc(24px + var(--rest-i)*13px)}
  .figma-home .stack-copy small,.figma-home .stack-copy strong{margin:0;text-align:left;white-space:normal;overflow-wrap:break-word;max-width:100%}
  .figma-home .intro{padding:24px 16px max(28px,calc(env(safe-area-inset-bottom) + 20px))}
  .figma-home .intro p{font-size:clamp(38px,6vw,58px)}
  .figma-home .intro p .reveal-word:first-child{font-size:1.08em}
}
@media(max-width:650px){
  .figma-home .wordmark,.figma-home .site-header.is-scrolled .wordmark{font-size:clamp(15.2px,4vw,21.6px)}
  .figma-home .stack-copy{bottom:calc(24px + var(--rest-i)*10px)}
  .figma-home .stack-copy small{font-size:min(18px,4.1vw)}
  .figma-home .intro p{font-size:clamp(29px,7.5vw,43px)}
  .figma-footer{font-size:14px}
  .figma-footer nav{top:34%;left:16px;right:16px;grid-template-columns:minmax(max-content,30%) minmax(max-content,1fr) minmax(max-content,35%);padding-top:12px}
  .figma-footer .footer-symbol{left:-20px;bottom:14.5px;width:82%}
  .figma-footer small{right:16px;bottom:12px;font-size:6px}
}
/* Phones: the company name takes its own row so the email and social columns keep their full width. */
@media(max-width:440px){
  .figma-footer nav{grid-template-columns:minmax(0,1fr) max-content;row-gap:12px}
  .figma-footer nav>:first-child{grid-column:1/-1}
  .figma-footer nav a{overflow-wrap:anywhere}
}
/* Contact line in the About panel: a fixed prefix plus an entry that wraps and grows. Submits to contact-submit.php. */
.vision{width:100%;margin-top:auto}
.vision-line{position:relative;display:flex;align-items:flex-start;gap:.32em;padding-bottom:12px;border-bottom:1px solid #333;font-size:36px;line-height:1.25}
.vision-prefix{flex:none;color:#fff;cursor:text}
.vision-entry{position:relative;flex:1;min-width:0;width:100%}
.vision-input{display:block;width:100%;height:1.25em;margin:0;padding:0;border:0;border-radius:0;background:none;color:#fff;caret-color:#fff;font:inherit;line-height:inherit;letter-spacing:0;outline:0;resize:none;overflow:hidden;overflow-wrap:anywhere;-webkit-appearance:none;appearance:none}
.vision-input.is-overflowing{overflow:hidden}
.vision-input::placeholder{color:transparent;opacity:1}
.vision-invite{position:absolute;top:0;left:0;color:#6b6b6b;white-space:nowrap;pointer-events:none;transition:opacity .2s ease,color .3s ease}
.vision-input:not(:placeholder-shown)~.vision-invite{opacity:0}
.vision-input:focus~.vision-invite{color:#4d4d4d}
/* Invitation: a slow light pass travels across "Tell us more", in the same grey-to-white language as the About word reveal. */
.vision-invite .vision-char{animation:vision-sweep 4.8s ease-in-out calc(var(--n)*65ms) infinite paused}
.vision.is-inviting .vision-input:placeholder-shown:not(:focus)~.vision-invite .vision-char{animation-play-state:running}
.vision-input:focus~.vision-invite .vision-char{animation:none}
@keyframes vision-sweep{0%,26%,100%{color:#6b6b6b}10%{color:#e6e6e6}}
/* Live feedback: the rule lights up beneath the prefix on focus, then extends under the text as it is typed. */
.vision-ink{position:absolute;left:0;bottom:-1px;width:var(--ink,0px);height:1px;background:#8c8c8c;transition:width .35s cubic-bezier(.22,1,.36,1),height .2s ease,background-color .2s ease}
.vision-line:focus-within .vision-ink{height:2px;background:#fff}
.vision-line.is-invalid{border-bottom-color:#c5ad94}
.vision-line.is-invalid .vision-ink{background:#c5ad94}
.vision-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.vision-meta{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:12px;color:#8c8c8c;font-size:16px;line-height:1.4}
/* Visitor reply email: the label and entry sit on one line; the entry fills the space before Submit. */
.vision-email{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .32em;flex:1 1 14em;min-width:0;color:#fff;font-size:36px;line-height:1.25}
.vision-email label{flex:none;cursor:text;transition:color .3s ease}
.vision-email:focus-within label{color:#c5ad94}
.vision-reply{flex:1 1 8em;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;color:#fff;caret-color:#fff;font:inherit;line-height:inherit;letter-spacing:0;outline:0;text-overflow:ellipsis;-webkit-appearance:none;appearance:none;transition:color .3s ease}
.vision-reply::placeholder{color:#6b6b6b;opacity:1;transition:color .3s ease}
.vision-reply:focus::placeholder{color:#4d4d4d}
.vision-reply:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;box-shadow:0 0 0 100px #000 inset;transition:background-color 9999s}
.vision-email.is-invalid .vision-reply{color:#c5ad94}
.vision-email.is-invalid .vision-reply:-webkit-autofill{-webkit-text-fill-color:#c5ad94}
.vision-submit{margin-left:auto;padding:0;border:0;background:none;color:#fff;font-size:20px;line-height:1.4;cursor:pointer;transition:opacity .2s}
.vision-submit:hover{opacity:.65}
.vision-submit:disabled{opacity:.4;cursor:progress}
.vision[aria-busy=true] .vision-input,.vision[aria-busy=true] .vision-reply{color:#8c8c8c}
.vision-count{flex:none;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .25s ease}
.vision:focus-within .vision-count,.vision.is-filled .vision-count{opacity:1}
/* Field errors and the send status are divs with their own type, so they never inherit the 64px About copy.
   They open with a short height-and-fade reveal; no popups or shaking. */
.vision-error,.vision-status{display:grid;grid-template-rows:0fr;opacity:0;font-size:14px;font-weight:400;line-height:1.45;letter-spacing:.01em;transition:grid-template-rows .35s cubic-bezier(.22,1,.36,1),opacity .35s ease,margin .35s ease}
.vision-error>span,.vision-status>span{min-height:0;overflow:hidden;overflow-wrap:anywhere}
.vision-error{flex-basis:100%;color:#c5ad94}
.vision-error.is-shown{grid-template-rows:1fr;opacity:1;margin-top:8px}
.vision-status{max-width:44em;color:#bfbfbf;font-size:16px}
.vision-status.is-shown{grid-template-rows:1fr;opacity:1;margin-top:16px}
.vision[data-state=sending] .vision-status{color:#8c8c8c}
.vision[data-state=error] .vision-status{color:#c5ad94}
html.is-typing{scroll-snap-type:none}
/* Stuck sticky cards report their stuck position as their snap point, so on the last card all three collapse onto the current scroll and mandatory snapping swallows the scroll up. JS sets this while it drives the page to an exact panel top. */
html.is-panel-scrolling{scroll-snap-type:none}
/* With script, one JS scroller drives every panel move; CSS snapping and smooth scroll-behavior stay as the no-JS fallback only. */
html.has-panel-scroller{scroll-snap-type:none;scroll-behavior:auto}
@media(max-width:850px){
  .vision-line,.vision-email{font-size:clamp(22px,3.6vw,30px)}
  .vision-submit{font-size:16px}
}
@media(max-width:650px){
  .figma-home .intro{gap:24px}
  .vision-line{flex-direction:column;gap:4px;font-size:clamp(18px,5.2vw,22px);padding-bottom:10px}
  .vision-email{font-size:clamp(18px,5.2vw,22px);width:100%}
  .vision-meta,.vision-status{font-size:13px}
  .vision-error{font-size:12px}
  .vision-submit{margin-left:0;font-size:15px}
}
/* Short desktop windows: keep the line inside the panel beneath the 64px About copy. */
@media(min-width:851px) and (max-height:640px){.figma-home .intro{gap:20px}.vision-line,.vision-email{font-size:28px}.vision-line{padding-bottom:10px}.vision-meta{font-size:14px;margin-top:8px}}
/* Short viewports (landscape phones, small windows): keep min-height 100svh and height:auto so long text expands naturally. */
@media(max-height:640px){.figma-home .intro{height:auto;min-height:100svh;gap:16px;padding-top:max(20px,calc(env(safe-area-inset-top) + 12px))}.figma-home .intro p{font-size:min(64px,7.5vw,6.4svh)}.figma-home .intro p .reveal-word:first-child{font-size:1.08em}.vision-meta{margin-top:6px}}
@media(max-height:460px){.vision-line,.vision-email{font-size:min(22px,5svh)}.vision-meta{font-size:12px}.vision-submit{font-size:14px}}
@media(prefers-reduced-motion:reduce){.vision-invite .vision-char{animation:none!important}.vision-ink{transition:none}.vision-error,.vision-status{transition:none}}