/* =========================================================
   SUDO MEDIA homepage
   Artwork-first structure: moving artwork hero, client band,
   edge-to-edge work carousel, services split, light about band.
   Layers on top of styles.css and keeps the SUDO identity:
   near-black base, cyan → green gradient, Impact display type,
   square/chamfered geometry.
   ========================================================= */

:root{
  --mint:#6decd0;
  --paper:#eef2ee;
  --ink:#07100b;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --beat:.69s;
  --grad-loop:linear-gradient(105deg,var(--cyan),var(--green) 50%,var(--cyan));
  --display:Impact,Anton,"Arial Narrow",sans-serif;
  --gutter:clamp(20px,5vw,72px);
  /* 45° corner cut taken from the SUDO mark */
  --chamfer:clamp(18px,2.4vw,34px);
}
.landing .hero h1,.landing .section h2,.landing .contact h2,.landing h2{font-family:var(--display)}
.no-impact .landing h1,.no-impact .landing h2{letter-spacing:.004em}
.landing ::selection{background:var(--green);color:var(--ink)}

/* ---------- Intro ---------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;align-content:center;gap:28px;
  transition:clip-path 1s var(--ease-io),visibility 0s 1s;clip-path:inset(0 0 0 0)}
.intro-done .intro{display:none}
.intro-out .intro{clip-path:inset(0 0 100% 0);visibility:hidden}
.intro-mark{width:min(150px,34vw);overflow:visible}
.intro-stroke{fill:transparent;stroke:url(#intro-grad);stroke-width:5;stroke-dasharray:1;stroke-dashoffset:1;
  animation:intro-draw 1.1s var(--ease-io) .1s forwards,intro-fill .5s ease 1.05s forwards}
.intro-dot{fill:url(#intro-grad);transform-box:fill-box;transform-origin:center;transform:scale(0);animation:intro-pop .6s var(--ease-out) .85s forwards}
.intro-bar{width:min(220px,50vw);height:1px;background:var(--line);overflow:hidden}
.intro-bar span{display:block;height:100%;background:var(--grad);transform-origin:left;transform:scaleX(0);animation:intro-load 1.35s var(--ease-io) forwards}
.intro-label{margin:0;font:11px/1 Arial,sans-serif;letter-spacing:.22em;color:var(--muted)}
.intro-label b{color:var(--green)}
@keyframes intro-draw{to{stroke-dashoffset:0}}
@keyframes intro-fill{to{fill:url(#intro-grad);stroke-width:0}}
@keyframes intro-pop{to{transform:scale(1)}}
@keyframes intro-load{to{transform:scaleX(1)}}

/* ---------- Progress + header (logo centred, nav left, CTA right) ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:12;pointer-events:none}
.scroll-progress span{display:block;height:100%;background:var(--grad);transform-origin:left;transform:scaleX(var(--progress,0))}
.landing .topbar{transition:background .4s ease,border-color .4s ease}
.landing .topbar.is-scrolled{background:rgba(10,11,11,.92);border-bottom-color:rgba(109,236,208,.14)}
@media(min-width:801px){
  .landing .topbar-centered{display:grid;grid-template-columns:1fr auto 1fr;gap:24px}
  .landing .topbar-centered .nav{grid-column:1;grid-row:1;margin:0;justify-self:start}
  .landing .topbar-centered .brand{grid-column:2;grid-row:1;justify-self:center}
  .landing .topbar-centered .mini-cta{grid-column:3;grid-row:1;justify-self:end}
}
.landing .brand .wordmark-dot{transition:fill .3s ease}
.landing .brand:hover .wordmark-dot{fill:var(--green)}
.landing .nav a{position:relative}
.landing .nav a:after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.landing .nav a:hover:after{transform:scaleX(1);transform-origin:left}
.landing .mini-cta{position:relative;overflow:hidden;transition:color .35s ease,border-color .35s ease}
.landing .mini-cta:before{content:"";position:absolute;inset:0;background:var(--grad);transform:translateY(101%);transition:transform .45s var(--ease-out)}
.landing .mini-cta span{position:relative}
.landing .mini-cta:hover{color:var(--ink);border-color:transparent}
.landing .mini-cta:hover:before{transform:translateY(0)}

/* ---------- Hero: moving artwork wall ---------- */
.hero-reel{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  padding:140px var(--gutter) clamp(56px,9vh,110px)}
.reel-wall{position:absolute;z-index:-3;top:-12%;bottom:-12%;right:-4%;width:min(78vw,1200px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);
  transform:rotate(-8deg) scale(1.08);transform-origin:center}
.wall-col{overflow:hidden;min-width:0}
.wall-track{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,18px);animation:wall-up 60s linear infinite;will-change:transform}
.wall-col[data-dir="down"] .wall-track{animation-name:wall-down;animation-duration:70s}
.wall-col:nth-child(3) .wall-track{animation-duration:54s}
.wall-col:nth-child(4) .wall-track{animation-duration:76s}
.wall-track img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.06)}
@keyframes wall-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wall-down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.hero-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,var(--bg) 0%,rgba(10,11,11,.94) 30%,rgba(10,11,11,.55) 58%,rgba(10,11,11,.15) 100%),
    linear-gradient(0deg,var(--bg) 0%,rgba(10,11,11,0) 32%),
    linear-gradient(180deg,rgba(10,11,11,.7) 0%,rgba(10,11,11,0) 22%)}
.hero-copy{position:relative;max-width:760px}
.landing .hero-title{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.88;
  font-size:clamp(56px,8.6vw,138px);margin:18px 0 22px}
.no-impact .landing .hero-title{line-height:.94}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-title .line>*{display:block}
.landing .hero-title em{font-style:normal;background:var(--grad-loop);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:grad-shift 6s linear infinite}
@keyframes grad-shift{to{background-position:-200% 0}}
.landing .lede{font-size:clamp(16px,1.5vw,20px);line-height:1.55;max-width:600px;color:#cfd5d1;margin:0}
.landing .hero-actions{margin-top:30px}
.scroll-cue{position:absolute;right:var(--gutter);bottom:28px;display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--muted);text-decoration:none;font:10px/1 Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase}
.scroll-cue i{width:1px;height:46px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i:after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--grad);animation:cue 1.8s var(--ease-io) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}

/* Hero entrance */
.js [data-intro]{opacity:0}
.js .hero-title [data-intro]{opacity:1;transform:translateY(110%)}
.ready [data-intro]{animation:rise 1s var(--ease-out) both;animation-delay:calc(var(--i,0) * .09s)}
.ready .hero-title [data-intro]{animation:line-up 1.1s var(--ease-out) both;animation-delay:calc(var(--i,0) * .09s)}
.ready .hero-title em[data-intro]{animation:line-up 1.1s var(--ease-out) both calc(var(--i,0) * .09s),grad-shift 6s linear 1.2s infinite}
[data-intro="1"]{--i:1}[data-intro="2"]{--i:2}[data-intro="4"]{--i:4}[data-intro="5"]{--i:5}[data-intro="6"]{--i:8}
.js .reel-wall{opacity:0;transition:opacity 1.4s ease .1s}
.ready .reel-wall{opacity:1}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes line-up{from{transform:translateY(110%)}to{transform:none}}

/* ---------- Ticker ---------- */
.landing .ticker{display:block;overflow:hidden;padding:24px 0;background:#0c0e0d;border-block:1px solid var(--line)}
.ticker-track{display:flex;width:max-content;animation:ticker 34s linear infinite}
.ticker-track span{display:flex;align-items:center;gap:clamp(26px,3.6vw,52px);padding-right:clamp(26px,3.6vw,52px);white-space:nowrap;
  font:400 clamp(26px,3.6vw,50px)/1 var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--text)}
.ticker-track span:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(241,244,239,.55)}
.ticker-track span:after{content:"";width:.62em;height:.58em;flex:none;background:var(--grad);
  -webkit-mask:url("assets/branding/sudo-symbol.svg") center/contain no-repeat;mask:url("assets/branding/sudo-symbol.svg") center/contain no-repeat}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- Client band (light) ---------- */
.clients{background:var(--paper);color:var(--ink);padding:26px 0 30px}
.clients-label{margin:0 0 14px;text-align:center;font:700 11px/1 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#4c5a52}
.clients-viewport{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients-track{display:flex;align-items:center;gap:clamp(40px,6vw,96px);width:max-content;padding-right:clamp(40px,6vw,96px);animation:ticker 40s linear infinite}
.clients-track img{height:clamp(38px,3.6vw,54px);width:auto;max-width:clamp(120px,13vw,190px);object-fit:contain;opacity:.86;transition:opacity .3s ease}
.clients-track img:hover{opacity:1}

/* ---------- Work carousel ---------- */
.work{padding:clamp(70px,9vw,130px) 0 clamp(60px,8vw,110px)}
.work-head{padding:0 var(--gutter);margin-bottom:clamp(28px,4vw,44px)}
.work-head .eyebrow{margin:0 0 6px}
.landing .work h2,.landing .services h2,.landing .about h2,.landing .contact h2{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;margin:12px 0 0}
.landing .work h2{font-size:clamp(46px,6.4vw,96px)}
.no-impact .landing .work h2,.no-impact .landing .services h2,.no-impact .landing .about h2{line-height:.95}
.landing h2 em,.landing .services h2 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.work-tools{display:flex;align-items:center;justify-content:space-between;gap:16px 22px;flex-wrap:wrap;padding:0 var(--gutter);margin:clamp(26px,3.4vw,40px) 0 clamp(18px,2.2vw,26px)}
.work-tools .text-link{margin:0;font-size:15px}
.carousel-arrows{display:flex;gap:8px}
.carousel-btn{width:52px;height:52px;display:grid;place-items:center;border:1px solid #3d4640;background:transparent;color:var(--text);font-size:20px;cursor:pointer;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.carousel-btn:hover{background:var(--grad);color:var(--ink);border-color:transparent}
.carousel-btn:disabled{opacity:.35;cursor:default;background:transparent;color:var(--text);border-color:#3d4640}
.carousel{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
  padding:0 var(--gutter) 6px;scrollbar-width:none;cursor:grab}
.carousel::-webkit-scrollbar{display:none}
.carousel.is-dragging{cursor:grabbing;scroll-snap-type:none}
.carousel.is-dragging .slide{pointer-events:none}
.carousel:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.slide{position:relative;flex:none;height:clamp(300px,64vh,640px);aspect-ratio:var(--ar);scroll-snap-align:start;overflow:hidden;
  background:#111;border:1px solid #29302c;color:var(--text);text-decoration:none}
.slide img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease-out),filter .5s ease}
.slide:hover img,.slide:focus-visible img{transform:scale(1.035)}
.slide:hover{border-color:var(--mint)}
.slide-cap{position:absolute;left:0;right:0;bottom:0;padding:60px 18px 16px;display:flex;flex-direction:column;gap:5px;
  background:linear-gradient(transparent,rgba(5,7,6,.92));font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);
  transform:translateY(101%);transition:transform .5s var(--ease-out)}
.slide-cap b{font:400 clamp(20px,2vw,28px)/1 var(--display);letter-spacing:.01em;color:var(--text)}
.slide:hover .slide-cap,.slide:focus-visible .slide-cap{transform:none}
@media(hover:none){.slide-cap{transform:none}}
.carousel-progress{margin:26px var(--gutter) 0;height:2px;background:var(--line);overflow:hidden}
.carousel-progress span{display:block;height:100%;width:100%;background:var(--grad);transform-origin:left;transform:scaleX(var(--cp,.1))}

/* ---------- Services split ---------- */
.landing .services{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,110px);align-items:start;
  padding:clamp(70px,9vw,130px) var(--gutter);border-top:1px solid var(--line)}
.services-intro{position:sticky;top:120px}
.landing .services h2{font-size:clamp(54px,7vw,112px)}
.services-intro>p:not(.eyebrow){color:var(--muted);font-size:17px;line-height:1.6;max-width:420px;margin:22px 0 28px}
.service-links{list-style:none;margin:0;padding:0;border-top:1px solid #2b302d}
.service-links li{border-bottom:1px solid #2b302d}
.service-links a{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 34px;gap:18px;align-items:center;padding:clamp(20px,2.4vw,30px) 0;color:var(--text);text-decoration:none;isolation:isolate}
.service-links a:before{content:"";position:absolute;inset:0 calc(var(--gutter) * -1) 0 -18px;z-index:-1;background:linear-gradient(90deg,rgba(22,199,223,.08),rgba(67,238,114,.1));transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--ease-out)}
.service-links a:hover:before,.service-links a:focus-visible:before{transform:scaleY(1)}
.svc-num{font:12px/1 Arial,sans-serif;letter-spacing:.12em;color:#53ead6}
.svc-body{display:flex;flex-direction:column;gap:8px}
.svc-name{font:400 clamp(30px,3.6vw,54px)/.95 var(--display);text-transform:uppercase;letter-spacing:.005em;transition:transform .55s var(--ease-out)}
.no-impact .svc-name{letter-spacing:.02em}
.service-links a:hover .svc-name{transform:translateX(10px);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-desc{color:var(--muted);font-size:15px;line-height:1.5;max-width:520px}
.svc-arrow{justify-self:end;font-size:22px;color:var(--muted);transition:transform .55s var(--ease-out),color .3s ease}
.service-links a:hover .svc-arrow{color:var(--green);transform:rotate(45deg)}
.service-preview{position:fixed;left:0;top:0;z-index:9;width:240px;aspect-ratio:1;pointer-events:none;overflow:hidden;border:1px solid var(--mint);
  opacity:0;transform:translate3d(var(--px,0),var(--py,0),0) translate(-50%,-50%) scale(.85) rotate(-4deg);transition:opacity .3s ease,transform .35s var(--ease-out);
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(67,238,114,.12)}
.service-preview.is-on{opacity:1;transform:translate3d(var(--px,0),var(--py,0),0) translate(-50%,-50%) scale(1) rotate(-4deg)}
.service-preview img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- About (light band, chamfered edges) ---------- */
.landing .about{padding:0;background:transparent}
.about-inner{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,6vw,100px);align-items:center;
  padding:clamp(80px,10vw,150px) var(--gutter);
  clip-path:polygon(0 var(--chamfer),var(--chamfer) 0,calc(100% - var(--chamfer)) 0,100% var(--chamfer),100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,var(--chamfer) 100%,0 calc(100% - var(--chamfer)))}
.about .eyebrow{color:#0d8f86}
.landing .about h2{font-size:clamp(50px,6.6vw,104px);color:var(--ink)}
.landing .about h2 em{background:linear-gradient(105deg,#0aa6bc,#1fb954);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-copy>p:not(.eyebrow){max-width:640px;color:#33403a;font-size:clamp(16px,1.35vw,19px);line-height:1.7;margin:26px 0 30px}
.about-links{display:flex;flex-wrap:wrap;gap:12px}
.landing .button.dark{background:var(--ink);color:var(--text)}
.landing .button.dark:hover{background:#000;color:var(--green)}
.landing .button.outline{border:1px solid rgba(7,16,11,.4);color:var(--ink)}
.landing .button.outline:hover{border-color:var(--ink);background:rgba(7,16,11,.06)}
.about-visual{position:relative;justify-self:center;width:min(100%,460px)}
.about-visual img{display:block;width:100%;height:auto;
  clip-path:polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  animation:render-float 7s ease-in-out infinite}
@keyframes render-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- Contact ---------- */
.landing .contact{background:var(--grad-loop);background-size:200% 100%;animation:grad-shift 14s linear infinite;isolation:isolate;margin-top:clamp(70px,9vw,130px)}
.landing .contact>.contact-ghost{position:absolute;z-index:0;left:0;right:0;top:50%;transform:translateY(-50%);pointer-events:none;overflow:hidden}
.contact-ghost div{display:flex;width:max-content;animation:ticker 50s linear infinite}
.contact-ghost span{font:400 clamp(140px,22vw,340px)/1 var(--display);white-space:nowrap;color:rgba(7,16,11,.05);text-transform:uppercase;padding-right:.25em}
.landing .contact h2{font-size:clamp(48px,7.8vw,112px);line-height:.95;max-width:1100px;margin:18px 0 28px}
.landing .contact h2 em{color:var(--ink);background:none;-webkit-background-clip:initial;background-clip:initial}
.landing .email{position:relative;border-bottom:0;padding-bottom:8px;font-family:var(--display);font-weight:400}
.landing .email:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--ink);transform-origin:left;transition:transform .6s var(--ease-out)}
.landing .email:hover:after{transform:scaleX(.35)}

/* ---------- Reveals ---------- */
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--delay,0s)}
.js .reveal.is-in{opacity:1;transform:none}
.split .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.split .ln-in{display:block;transition:transform 1.1s var(--ease-out);transition-delay:var(--delay,0s)}
.js .split .ln-in{transform:translateY(110%)}
.js .split.is-in .ln-in{transform:none}
.service-links li:nth-child(2){--delay:.05s}.service-links li:nth-child(3){--delay:.1s}.service-links li:nth-child(4){--delay:.15s}.service-links li:nth-child(5){--delay:.2s}

/* ---------- Buttons ---------- */
.landing .button{transition:background .35s ease,color .35s ease,border-color .35s ease}
.landing .button.primary{background:var(--grad-loop);background-size:200% 100%;transition:background-position .6s ease}
.landing .button.primary:hover{background-position:100% 0}
.landing .button.ghost:hover{border-color:var(--mint);color:var(--mint)}
.landing footer a:hover{color:var(--mint)}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .reel-wall{width:96vw;right:-22vw;opacity:.85}
}
@media(max-width:800px){
  .hero-reel{padding:150px 22px 48px;min-height:100svh}
  .reel-wall{width:150vw;right:-25vw;top:-6%;grid-template-columns:repeat(4,minmax(0,1fr));transform:rotate(-8deg) scale(1.05)}
  .hero-shade{background:linear-gradient(0deg,var(--bg) 0%,rgba(10,11,11,.92) 42%,rgba(10,11,11,.45) 72%,rgba(10,11,11,.6) 100%)}
  .scroll-cue{display:none}
  .landing .hero-actions .button{flex:1 1 auto}
  .carousel-arrows{display:none}
  .slide{height:min(62vh,440px);max-width:82vw}
  .landing .services{grid-template-columns:1fr;gap:34px}
  .services-intro{position:static}
  .service-links a{grid-template-columns:38px minmax(0,1fr)}
  .svc-arrow{display:none}
  .service-links a:hover .svc-name{transform:none}
  .service-preview{display:none}
  .about-inner{grid-template-columns:1fr;gap:36px;padding:72px 22px}
  .about-visual{width:min(78%,320px);order:-1}
  .clients-track img{height:34px;max-width:120px}
}
@media(hover:none){.service-preview{display:none}}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .landing *,.landing *:before,.landing *:after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js [data-intro],.js .reveal{opacity:1!important;transform:none!important}
  .js .reel-wall{opacity:1!important}
  .js .hero-title [data-intro],.js .split .ln-in{transform:none!important}
  .ticker-track,.clients-track,.contact-ghost div,.wall-track{transform:none!important}
}