:root{
  --black:#080808;
  --ink:#111111;
  --white:#ffffff;
  --paper:#f7f7f4;
  --red:#ef3b2d;
  --blue:#1847d6;
  --gold:#d1a54a;
  --line-dark:rgba(255,255,255,.16);
  --line-light:rgba(17,17,17,.16);
  --pad:clamp(1.1rem,4vw,4rem);
  --content:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Montserrat",Arial,sans-serif;letter-spacing:0;overflow-x:hidden}
img,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,p{margin:0}

.home-page{background:var(--black);color:var(--white)}
.portfolio-page{background:var(--white);color:var(--ink)}
.eyebrow{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0}

.site-nav{
  position:fixed;z-index:100;inset:0 0 auto;
  height:72px;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s,color .25s;
}
.site-nav.scrolled{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.site-nav-dark{color:var(--white)}
.site-nav-dark.scrolled{background:rgba(8,8,8,.86);border-color:var(--line-dark)}
.site-nav-light{color:var(--ink);background:rgba(255,255,255,.92);border-color:var(--line-light)}
.brand{font-size:1.05rem;font-weight:900}
.brand span{color:var(--red)}
.nav-links{display:flex;align-items:center;gap:2rem;font-size:.72rem;font-weight:700;text-transform:uppercase}
.nav-links a{position:relative;padding:.4rem 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .25s}
.nav-links a:hover::after{right:0}
.menu-toggle{display:block;width:42px;height:42px;border:0;background:transparent;color:inherit;padding:0;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:2px;background:currentColor;margin:6px auto;transition:transform .25s}
@media(min-width:901px){.menu-toggle{display:none}}

.home-hero{position:relative;min-height:88svh;overflow:hidden}
.home-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:rgba(0,0,0,.27)}
.hero-content{
  position:relative;z-index:2;min-height:88svh;
  padding:clamp(8rem,16vh,11rem) var(--pad) clamp(2rem,5vh,4rem);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero-content h1{font-size:clamp(3rem,12.8vw,9rem);line-height:.8;font-weight:900;text-transform:uppercase;max-width:100%}
.hero-content>.eyebrow{margin-bottom:1.2rem}
.hero-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-top:2rem}
.hero-bottom p{max-width:34rem;font-size:clamp(.9rem,1.2vw,1.1rem);line-height:1.6}
.text-link{font-size:.72rem;font-weight:700;text-transform:uppercase;white-space:nowrap}
.text-link span{display:inline-block;margin-left:.6rem}

.stroke-statement{padding:clamp(4rem,9vw,9rem) var(--pad);overflow:hidden}
.stroke-statement p{
  font-size:clamp(3.1rem,10.5vw,10rem);font-weight:900;line-height:.82;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.78);
}
.stroke-statement p:nth-child(2){color:var(--white);-webkit-text-stroke:0}
.stroke-statement p:nth-child(3){text-align:right;color:var(--red);-webkit-text-stroke:0}

.client-strip{border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:1.2rem 0 1.5rem}
.compact-intro{padding:0 var(--pad);margin-bottom:1.2rem}
.marquee{overflow:hidden}
.marquee-track{display:flex;width:max-content;align-items:center;animation:marquee 34s linear infinite}
.client-track span{font-size:clamp(1.6rem,4vw,3.8rem);font-weight:800;color:rgba(255,255,255,.36);padding:0 2.8rem}
.client-track span:nth-child(3n+1){color:rgba(239,59,45,.7)}
@keyframes marquee{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation-play-state:paused}}

.work-gateway,.showreel-section,.crafts-section{padding:clamp(5rem,9vw,9rem) var(--pad)}
.section-intro{max-width:var(--content);margin:0 auto clamp(2.5rem,5vw,5rem)}
.section-intro .eyebrow{margin-bottom:1rem;color:var(--red)}
.section-intro h2,.about-copy h2,.contact-section h2{font-size:clamp(2.5rem,6vw,6.5rem);line-height:.92;font-weight:800;text-transform:uppercase}
.work-links{max-width:var(--content);margin:auto;border-top:1px solid var(--line-dark)}
.work-links a{
  display:grid;grid-template-columns:4rem 1fr auto;align-items:center;
  min-height:clamp(7rem,13vw,11rem);border-bottom:1px solid var(--line-dark);
  transition:background .25s,color .25s,padding .25s;
}
.work-links a:hover{background:var(--white);color:var(--black);padding:0 1.25rem}
.work-index{font-size:.72rem;color:var(--red);font-weight:700}
.work-name{font-size:clamp(2.2rem,6.8vw,7rem);font-weight:800;text-transform:uppercase}
.work-arrow{font-size:clamp(1.5rem,3vw,2.5rem)}

.services-marquee{padding:1.4rem 0;background:var(--red);color:var(--white);overflow:hidden}
.services-track{animation-duration:40s}
.services-track span{font-size:clamp(1rem,2vw,1.5rem);font-weight:800;text-transform:uppercase;padding:0 1.6rem}
.services-track span::after{content:"•";margin-left:3.2rem}

.split-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.split-intro>p{max-width:30rem;line-height:1.7;color:rgba(255,255,255,.58)}
.showreel-frame{max-width:var(--content);aspect-ratio:16/9;margin:auto;background:#000}
.showreel-frame iframe{width:100%;height:100%;border:0}

.crafts-section{background:var(--paper);color:var(--ink)}
.crafts-grid{max-width:var(--content);margin:auto;display:grid;grid-template-columns:1fr 1fr}
.craft{
  position:relative;min-height:clamp(31rem,55vw,47rem);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.3rem,3vw,2.5rem);
  border:1px solid var(--line-light);
}
.craft-media{color:var(--white)}
.craft-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.craft-media::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35)}
.craft>*{position:relative;z-index:1}
.craft-label{font-size:clamp(2.5rem,5vw,5rem);line-height:.9;font-weight:800;text-transform:uppercase}
.craft-copy{max-width:23rem;margin-top:1rem;line-height:1.6}
.craft-arrow{position:absolute;top:1.5rem;right:1.5rem;font-size:2rem}
.craft-web{background:var(--blue);color:var(--white)}
.mini-browser{position:absolute;left:8%;right:8%;top:9%;height:55%;background:var(--white);color:var(--ink);border:1px solid rgba(0,0,0,.2)}
.mini-browser-bar{height:38px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--line-light)}
.mini-browser-bar i{width:8px;height:8px;border-radius:50%;background:var(--red)}
.mini-browser-bar i:nth-child(2){background:var(--gold)}
.mini-browser-bar i:nth-child(3){background:var(--blue)}
.mini-browser-body{height:calc(100% - 38px);padding:8%;display:flex;flex-direction:column;justify-content:center}
.mini-browser-body span{font-size:.65rem;text-transform:uppercase;color:#777}
.mini-browser-body strong{font-size:clamp(1.6rem,3vw,3.5rem);line-height:.9;margin-top:.6rem;text-transform:uppercase}
.mini-browser-lines{display:flex;gap:8px;margin-top:2rem}
.mini-browser-lines i{height:5px;background:var(--red);flex:1}
.mini-browser-lines i:nth-child(2){background:var(--blue)}
.mini-browser-lines i:nth-child(3){background:var(--gold)}

.about-section{padding:clamp(5rem,9vw,9rem) var(--pad);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(3rem,8vw,9rem);max-width:calc(var(--content) + 2 * var(--pad));margin:auto}
.about-copy .eyebrow{color:var(--red);margin-bottom:1rem}
.about-copy>p:not(.eyebrow){margin-top:2rem;max-width:43rem;line-height:1.8;color:rgba(255,255,255,.62)}
.about-location{margin-top:3rem;padding-top:1rem;border-top:1px solid var(--line-dark);display:flex;justify-content:space-between;gap:1rem}
.about-location span{font-size:.7rem;text-transform:uppercase;color:rgba(255,255,255,.5)}
.about-stats{display:grid;grid-template-columns:1fr 1fr;align-self:start}
.about-stats div{min-height:12rem;padding:1.5rem;border:1px solid var(--line-dark);display:flex;flex-direction:column;justify-content:space-between}
.about-stats strong{font-size:clamp(2.5rem,5vw,5rem);color:var(--red)}
.about-stats span{font-size:.72rem;text-transform:uppercase;color:rgba(255,255,255,.55)}

.contact-section{padding:clamp(5rem,9vw,9rem) var(--pad);background:var(--paper);color:var(--ink);display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,8vw,8rem)}
.contact-section .eyebrow{color:var(--red);margin-bottom:1rem}
.contact-details{display:flex;flex-direction:column}
.contact-details>div{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding:1.25rem 0;border-bottom:1px solid var(--line-light)}
.contact-details span{font-size:.68rem;text-transform:uppercase;color:#777}
.contact-details a,.contact-details p{font-size:clamp(.9rem,1.4vw,1.15rem);font-weight:600;overflow-wrap:anywhere}
.primary-action{margin-top:2rem;min-height:52px;background:var(--red);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:.72rem!important;text-transform:uppercase}

.site-footer{padding:1.5rem var(--pad);display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.72rem;text-transform:uppercase}
.dark-footer{border-top:1px solid var(--line-dark)}
.light-footer{border-top:1px solid var(--line-light)}

/* Portfolio pages */
.portfolio-hero{padding:clamp(9rem,18vh,13rem) var(--pad) clamp(4rem,8vw,8rem);border-bottom:1px solid var(--line-light);overflow:hidden}
.portfolio-hero .eyebrow{color:var(--red);margin-bottom:1rem}
.portfolio-hero h1{font-size:clamp(4rem,13vw,12rem);line-height:.78;text-transform:uppercase;font-weight:900}
.portfolio-hero>p:last-child{margin-top:2rem;max-width:42rem;line-height:1.7;color:#555}

.media-list{padding:0 var(--pad)}
.media-project{max-width:var(--content);margin:auto;padding:clamp(3rem,7vw,7rem) 0;border-bottom:1px solid var(--line-light)}
.project-heading{display:grid;grid-template-columns:4rem 1fr;align-items:start;margin-bottom:1.5rem}
.project-heading span{font-size:.72rem;color:var(--red);font-weight:700}
.project-heading h2{font-size:clamp(1.5rem,3.7vw,4rem);line-height:1;text-transform:uppercase}
.project-video{aspect-ratio:16/9;background:#000}
.project-video iframe{width:100%;height:100%;border:0}

.social-gallery{padding:var(--pad);max-width:var(--content);margin:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line-light)}
.gallery-item{margin:0;background:var(--white);min-height:34rem;position:relative;overflow:hidden}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gallery-item:hover img{transform:scale(1.02)}
.gallery-wide{grid-column:span 2;min-height:43rem}
.gallery-wide img{aspect-ratio:16/8;object-position:center 35%}
.gallery-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.3rem;background:rgba(255,255,255,.92);display:flex;justify-content:space-between;gap:1rem}
.gallery-item figcaption span{font-size:.65rem;text-transform:uppercase;color:#777}
.gallery-item figcaption strong{font-size:.85rem;text-transform:uppercase;text-align:right}
.alternate-crop{object-position:70% center}

.instagram-grid{padding:var(--pad);max-width:var(--content);margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.5rem,1vw,1rem);align-items:start}
.instagram-card{min-width:0;background:transparent}
.instagram-frame{width:100%;aspect-ratio:9/16;overflow:hidden;background:#000}
.instagram-frame iframe{width:100%;height:100%;border:0;background:#fff}
.instagram-card>a{display:none}
.instagram-card>a span{color:var(--red)}

.phone-showcase{min-height:calc(100svh - 72px);padding:clamp(4rem,8vw,8rem) var(--pad);display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:clamp(3rem,8vw,9rem);background:var(--paper)}
.phone-project-copy .eyebrow{color:var(--red);margin-bottom:1rem}
.phone-project-copy h2{font-size:clamp(2.6rem,6vw,6rem);line-height:.9;text-transform:uppercase}
.phone-project-copy>p:not(.eyebrow){margin-top:1.5rem;line-height:1.7;color:#555;max-width:34rem}
.phone-project-link{display:inline-flex;align-items:center;gap:.65rem;margin-top:1.35rem;font-size:.7rem;font-weight:800;text-transform:uppercase;color:var(--red)}
.phone-project-link span{font-size:1rem;transition:transform .2s}
.phone-project-link:hover span{transform:translateX(4px)}
.phone-project-tabs{margin-top:2.5rem;display:flex;flex-direction:column;border-top:1px solid var(--line-light)}
.phone-tab{border:0;border-bottom:1px solid var(--line-light);background:transparent;text-align:left;padding:1rem 0;font-size:.72rem;font-weight:700;text-transform:uppercase;cursor:pointer;color:#777}
.phone-tab.active{color:var(--red)}
.phone-stage{min-height:760px;display:grid;place-items:center;background:var(--blue);overflow:hidden}
.iphone{position:relative;width:min(340px,76vw);aspect-ratio:9/19.5;background:#111;border:8px solid #111;border-radius:48px;padding:7px;box-shadow:0 35px 70px rgba(0,0,0,.28)}
.iphone-island{position:absolute;z-index:5;top:16px;left:50%;transform:translateX(-50%);width:32%;height:25px;background:#080808;border-radius:20px}
.iphone-screen{position:absolute;inset:15px;border-radius:34px;overflow:hidden;display:none;padding:2rem 1.3rem 1.3rem}
.iphone-screen.active{display:block}
.iphone-screen.screen-project{padding:0;background:#fff}
.project-preview{position:absolute;inset:0;display:block;background:#fff;overflow:hidden}
.project-preview>img{width:100%;height:100%;object-fit:cover;object-position:top}
.project-preview::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(to top,rgba(0,0,0,.68),transparent);pointer-events:none}
.project-preview>span{position:absolute;z-index:2;left:1.25rem;bottom:1.15rem;color:#fff;font-size:.6rem;font-weight:800;text-transform:uppercase}
.project-preview-fallback{display:flex;flex-direction:column;justify-content:flex-end;padding:1.4rem;color:#fff;background:#153a72}
.project-preview-fallback::before{content:"";position:absolute;inset:8% 9% 44%;border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 0 0 1.2rem rgba(255,255,255,.08)}
.project-preview-fallback small{position:relative;z-index:1;margin-bottom:.55rem;font-size:.52rem;text-transform:uppercase;color:rgba(255,255,255,.7)}
.project-preview-fallback strong{position:relative;z-index:1;margin-bottom:3rem;font-size:2.35rem;line-height:.86;text-transform:uppercase}
.project-preview-cub{color:#fff;background:#050505}
.project-preview-cub>img{opacity:.62}
.project-preview-cub>strong{position:absolute;z-index:1;left:1.25rem;bottom:5.4rem;font-size:2.2rem;line-height:.84;text-transform:uppercase}
.project-preview-cub>small{position:absolute;z-index:1;left:1.25rem;bottom:3.8rem;font-size:.5rem;text-transform:uppercase}
.mock-nav{display:flex;justify-content:space-between;align-items:center;font-size:.56rem;margin-top:.7rem;position:relative;z-index:2}
.screen-vela{background:#f3f0e9}
.mock-fashion-photo{height:48%;margin-top:1rem;overflow:hidden}
.mock-fashion-photo img{width:100%;height:100%;object-fit:cover}
.screen-vela>p{font-size:.55rem;margin-top:1rem}
.screen-vela h3{font-size:2.3rem;line-height:.85;margin-top:.35rem;text-transform:uppercase}
.screen-vela button{margin-top:1rem;border:0;background:var(--red);color:#fff;padding:.75rem 1rem;text-transform:uppercase;font-size:.55rem}
.screen-nexus{background:#111;color:#fff}
.nexus-shape{height:42%;margin:3rem -1.3rem 2rem;background:var(--red);clip-path:polygon(0 25%,100% 0,76% 100%,10% 76%)}
.screen-nexus>p{font-size:.55rem;color:#aaa}
.screen-nexus h3{font-size:2rem;line-height:.9;margin-top:.5rem;text-transform:uppercase}
.nexus-stats{position:absolute;left:1.3rem;right:1.3rem;bottom:1.5rem;display:flex;justify-content:space-between;font-size:.55rem;border-top:1px solid #444;padding-top:.8rem}
.screen-cub{padding:0;background:#050505;color:#fff}
.screen-cub .mock-nav{position:absolute;z-index:2;top:1.5rem;left:1.3rem;right:1.3rem}
.screen-cub>img{width:100%;height:100%;object-fit:cover;opacity:.7}
.screen-cub h3{position:absolute;left:1.3rem;bottom:4rem;font-size:2.3rem;line-height:.82;text-transform:uppercase}
.screen-cub>p{position:absolute;left:1.3rem;bottom:1.6rem;font-size:.5rem}

.web-capabilities{display:grid;grid-template-columns:repeat(3,1fr);padding:0 var(--pad) clamp(5rem,9vw,9rem)}
.web-capabilities>div{padding:2rem;border:1px solid var(--line-light)}
.web-capabilities span{font-size:.7rem;color:var(--red);font-weight:700}
.web-capabilities h2{font-size:clamp(1.6rem,3vw,3rem);text-transform:uppercase;margin-top:2rem}
.web-capabilities p{line-height:1.7;color:#666;margin-top:1rem}

@media(max-width:900px){
  .menu-toggle{position:relative;z-index:3}
  .nav-links{
    position:fixed;inset:0;z-index:2;background:var(--black);color:var(--white);
    flex-direction:column;justify-content:center;gap:2rem;font-size:1.4rem;
    opacity:0;pointer-events:none;transition:opacity .25s;
  }
  .site-nav-light .nav-links{background:var(--white);color:var(--ink)}
  .site-nav.menu-open .nav-links{opacity:1;pointer-events:auto}
  .site-nav.menu-open .menu-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .site-nav.menu-open .menu-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .crafts-grid,.about-section,.contact-section,.phone-showcase{grid-template-columns:1fr}
  .phone-stage{min-height:680px}
  .web-capabilities{grid-template-columns:1fr}
  .instagram-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
  .site-nav{height:64px}
  .hero-content,.home-hero{min-height:84svh}
  .hero-content h1{font-size:clamp(3rem,12.8vw,4.8rem)}
  .hero-bottom{align-items:flex-start;flex-direction:column}
  .stroke-statement p{font-size:clamp(2.6rem,14vw,5rem);line-height:.9}
  .work-links a{grid-template-columns:2.5rem 1fr auto;min-height:7rem}
  .split-intro{align-items:flex-start;flex-direction:column}
  .about-stats{grid-template-columns:1fr 1fr}
  .about-stats div{min-height:9rem;padding:1rem}
  .contact-details>div{grid-template-columns:1fr;gap:.5rem}
  .site-footer{align-items:flex-start;flex-direction:column}
  .portfolio-hero{padding-top:8rem}
  .portfolio-hero h1{font-size:clamp(3.2rem,15vw,6rem)}
  .project-heading{grid-template-columns:2.5rem 1fr}
  .social-gallery{grid-template-columns:1fr}
  .instagram-grid{grid-template-columns:1fr}
  .gallery-wide{grid-column:auto;min-height:34rem}
  .gallery-wide img{aspect-ratio:auto}
  .phone-showcase{padding-top:3rem}
  .phone-stage{min-height:620px}
}