/* ══════════════════════════════════════════════════════
   Danny Salvador — v3
   Near-black room, one acid-green light, poster type.
   Layout follows the CV-template shape: an icon rail down
   the left, a portrait orb in the banner, numbered service
   blocks, heading-left/grid-right work.
   ══════════════════════════════════════════════════════ */

:root{
  --void:#050505;
  --coal:#0E0E0E;
  --panel:#121212;
  --edge:#1E1E1E;
  --neon:#C6F624;
  --neon-dim:#9CC311;
  --ash:#9A9A9A;
  --white:#FFFFFF;

  --poster:'Anton', 'Arial Narrow', Impact, sans-serif;
  --ui:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;

  --rail:84px;
  --pad:clamp(18px,4vw,64px);
  --max:1220px;
  --snap:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--void);
  color:var(--white);
  font-family:var(--ui);
  font-size:clamp(15px,.35vw + 14px,16px);
  line-height:1.65;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--neon); color:var(--void); padding:10px 16px;
  font-weight:700; text-decoration:none;
}
.skip:focus{ left:8px; top:8px; }

:focus-visible{ outline:2px solid var(--neon); outline-offset:3px; }

/* the single light source, sitting behind everything */
.glow{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 55vh at 78% -8%, rgba(198,246,36,.13), transparent 62%),
    radial-gradient(50vw 50vh at 6% 42%, rgba(198,246,36,.055), transparent 60%);
}
/* film grain so the flat black has some tooth */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* Lift the flowing content above the two fixed backdrop layers.
   Only these two need it — the rail, bar, sheet and up-button already
   carry their own position + z-index, and a blanket `body > *` rule
   out-specifies them and destroys their positioning. */
main, .ftr{ position:relative; z-index:2; }

/* ── the icon rail ─────────────────────────────────── */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:40;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:18px 0 20px;
  background:var(--coal); border-right:1px solid var(--edge);
}
.rail__mark{
  font-family:var(--poster); font-size:20px; letter-spacing:.02em;
  color:var(--neon); text-decoration:none; margin-bottom:14px;
}
.rail ul{ list-style:none; margin:0 0 auto; padding:0; display:flex; flex-direction:column; gap:6px; }
.rail a[data-tip]{
  position:relative;
  width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center;
  color:var(--ash); text-decoration:none;
  border:1px solid transparent;
  transition:color .25s var(--snap), background-color .25s var(--snap), border-color .25s var(--snap);
}
.rail a[data-tip] svg{ width:20px; height:20px; }
.rail a[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:calc(100% + 10px); top:50%; translate:0 -50%;
  background:var(--neon); color:var(--void);
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 9px; border-radius:5px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s var(--snap);
}
.rail a[data-tip].is-here{ color:var(--neon); background:rgba(198,246,36,.08); border-color:rgba(198,246,36,.28); }
.rail__wa{ margin-top:8px; }
.rail__wa svg{ width:20px; height:20px; }

@media (hover:hover){
  .rail a[data-tip]:hover{ color:var(--void); background:var(--neon); border-color:var(--neon); }
  .rail a[data-tip]:hover::after{ opacity:1; }
}

/* ── the mobile bar ────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:45; display:none;
  align-items:center; gap:12px;
  padding:10px var(--pad);
  background:rgba(5,5,5,.82);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge);
}
.sig{ font-family:var(--poster); font-size:20px; color:var(--neon); text-decoration:none; margin-right:auto; }
.tog{
  width:40px; height:36px; background:transparent;
  border:1px solid var(--edge); border-radius:8px;
  display:grid; place-content:center; gap:5px; cursor:pointer; padding:0;
}
.tog span{ display:block; width:17px; height:2px; background:var(--white); }

.sheet{
  position:sticky; top:57px; z-index:44;
  display:flex; flex-direction:column;
  background:var(--coal); border-bottom:1px solid var(--edge);
  padding:8px var(--pad) 16px;
}
.sheet a{
  font-family:var(--poster); font-size:20px; text-transform:uppercase;
  color:var(--white); text-decoration:none;
  padding:12px 0; border-bottom:1px solid var(--edge);
}
.sheet__cta{
  margin-top:14px; background:var(--neon); color:var(--void) !important;
  text-align:center; border:0 !important; border-radius:6px;
  padding:13px 0 !important; font-size:16px !important;
}
[hidden]{ display:none !important; }

/* ── buttons ───────────────────────────────────────── */
.cta{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--neon); color:var(--void);
  font-family:var(--ui); font-weight:700; font-size:13.5px;
  letter-spacing:.02em; text-decoration:none;
  padding:13px 20px; border-radius:6px;
  transition:transform .2s var(--snap), box-shadow .2s var(--snap), background-color .2s var(--snap);
}
.cta svg{ width:16px; height:16px; }
.cta:hover{ background:#D8FF3A; transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--edge); }
.cta--sm{ padding:9px 14px; font-size:12px; }

.ghost{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--white); text-decoration:none;
  font-family:var(--ui); font-weight:500; font-size:13.5px;
  padding:12px 20px; border:1px solid var(--edge); border-radius:6px;
  transition:border-color .25s var(--snap), color .25s var(--snap);
}
.ghost:hover{ border-color:var(--neon); color:var(--neon); }

.kicker{
  font-family:var(--ui); font-weight:700;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--neon); margin-bottom:12px;
}

/* ── shared section frame ──────────────────────────── */
.sec{
  max-width:var(--max); margin:0 auto;
  padding:clamp(56px,8vw,110px) var(--pad);
}
.sec__head h2, .split__l h2, .gallery__head h2, .proof__panel h2{
  font-family:var(--poster); font-weight:400;
  font-size:clamp(24px,3vw,42px); line-height:1.08;
  text-transform:uppercase; letter-spacing:.005em;
}
.sec__head--mid{ text-align:center; max-width:640px; margin:0 auto clamp(38px,5vw,64px); }

/* ── banner ────────────────────────────────────────── */
.banner{
  max-width:var(--max); margin:0 auto;
  padding:clamp(44px,6vw,84px) var(--pad) clamp(34px,4vw,58px);
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(26px,4vw,60px); align-items:center;
}
.hello{
  font-family:var(--ui); font-weight:500; font-size:14px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--neon);
  margin-bottom:14px;
}
.banner h1{
  font-family:var(--poster); font-weight:400;
  font-size:clamp(34px,4.6vw,62px); line-height:1.06;
  letter-spacing:-.005em; text-transform:uppercase;
  margin-bottom:20px;
}
.banner__lead{ color:var(--ash); max-width:44ch; margin-bottom:26px; }
.banner__go{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px; }

/* the portrait orb */
.banner__figure{ display:grid; justify-items:center; gap:18px; }
/* Sized against the viewport so it stays in proportion to the heading —
   72vw made it swallow the phone screen. Ring and dots are percentages of
   the orb, not fixed px, or they read as huge once the circle shrinks. */
.orb{ position:relative; width:clamp(150px,40vw,340px); aspect-ratio:1; }
.orb img{
  width:100%; height:100%; border-radius:999px;
  object-fit:cover; background:var(--panel);
  border:1px solid var(--edge);
}
.orb__ring{
  position:absolute; inset:-4.2%; border-radius:999px;
  border:1px solid rgba(198,246,36,.34);
}
.orb__dot{ position:absolute; border-radius:999px; background:var(--neon); aspect-ratio:1; height:auto; }
.orb__dot--a{ width:5.4%; top:6%;     right:-1%; }
.orb__dot--b{ width:3.4%; bottom:14%; left:-4%; }
.orb__dot--c{ width:7.6%; bottom:-2%; right:16%; opacity:.55; }

.orb__tag{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ash);
  border:1px solid var(--edge); border-radius:999px; padding:7px 15px;
  background:var(--coal);
}
.pulse{ width:7px; height:7px; border-radius:999px; background:var(--neon); animation:beat 2.4s ease-in-out infinite; }
@keyframes beat{ 0%,100%{ opacity:1 } 50%{ opacity:.28 } }

/* ── kinetic band ──────────────────────────────────── */
.ticker{
  overflow:hidden; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);
  background:var(--coal); padding:14px 0;
}
.ticker__row{ display:flex; gap:26px; white-space:nowrap; will-change:transform; }
.ticker__row span{
  font-family:var(--poster); font-weight:400;
  font-size:clamp(20px,2.8vw,38px); line-height:1.06;
  text-transform:uppercase; color:var(--white);
}
.ticker__row span:nth-child(even){ color:var(--neon); }

/* ── about split ───────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:start; }
.split__l h4{
  font-family:var(--ui); font-weight:500; font-size:15px;
  color:var(--neon); margin-top:14px;
}
.split__r p{ color:var(--ash); margin-bottom:16px; }
.bul{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:10px; }
.bul li{ position:relative; padding-left:22px; font-size:14.5px; }
.bul li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:8px; height:8px; background:var(--neon); border-radius:2px;
}

/* ── counters ──────────────────────────────────────── */
.counts{
  max-width:var(--max); margin:0 auto; padding:0 var(--pad) clamp(20px,3vw,40px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.4vw,30px);
}
.count{
  position:relative; text-align:center;
  border:1px solid var(--edge); border-radius:14px; background:var(--coal);
  padding:38px 18px 26px;
}
.count__ico{
  position:absolute; top:-22px; left:50%; translate:-50% 0;
  width:44px; height:44px; border-radius:999px;
  background:var(--neon); color:var(--void);
  display:grid; place-items:center;
}
.count__ico svg{ width:21px; height:21px; }
.count b{
  display:block; font-family:var(--poster); font-weight:400;
  font-size:clamp(28px,3.6vw,46px); line-height:1; color:var(--neon);
}
.count p{ margin-top:6px; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ash); }

/* ── work gallery ──────────────────────────────────── */
.gallery{ display:grid; grid-template-columns:minmax(230px,300px) 1fr; gap:clamp(26px,4vw,56px); align-items:start; }
.gallery__head{ position:sticky; top:28px; }
.gallery__note{ color:var(--ash); font-size:14.5px; margin:14px 0 22px; }

.grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,20px); }
.grid__wide{ grid-column:1 / -1; }
.grid a{
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--edge); border-radius:12px; background:#000;
  text-decoration:none;
}
.grid img{
  width:100%; height:auto; aspect-ratio:1.95;
  object-fit:cover; object-position:center bottom;
  transition:transform .5s var(--snap), opacity .35s var(--snap);
}
.grid__over{
  position:absolute; inset:auto 0 0 0;
  display:grid; grid-template-columns:1fr auto; align-items:end;
  gap:4px 12px; padding:46px 15px 14px;
  /* The caption sits on top of a screenshot, so the scrim has to be nearly
     opaque by the time the text starts — a gradient that is still see-through
     at the title leaves it floating over whatever the shot happens to show. */
  background:linear-gradient(180deg,
    rgba(5,5,5,0) 0%, rgba(5,5,5,.62) 24%, rgba(5,5,5,.93) 44%, rgba(5,5,5,.97) 100%);
}
.grid__over b{ font-family:var(--poster); font-weight:400; font-size:17px; text-transform:uppercase; color:var(--white); }
.grid__over i{ grid-column:1; font-style:normal; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ash); }
.grid__over em{
  grid-row:1 / span 2; grid-column:2; align-self:center;
  font-style:normal; font-size:19px; color:var(--neon);
  transition:transform .3s var(--snap);
}

@media (hover:hover){
  .grid a:hover img{ transform:scale(1.05); opacity:.72; }
  .grid a:hover .grid__over{ background:linear-gradient(180deg, rgba(5,5,5,0), rgba(198,246,36,.2), rgba(5,5,5,.95)); }
  .grid a:hover .grid__over em{ transform:translate(3px,-3px); }
}
/* same reasoning as the service cards — a touch screen has no hover to
   reveal anything with, so the lit state is the resting state. The light
   comes from the corner, not from recolouring the title: white reads on a
   screenshot, neon does not. */
@media (hover:none){
  .grid a{ border-color:rgba(198,246,36,.22); }
  .grid__over::before{
    content:''; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(72% 128% at 0% 112%, rgba(198,246,36,.3), transparent 62%);
  }
  /* the ::before is positioned, so it would paint over plain inline text —
     making the caption positioned too puts it back on top */
  .grid__over b, .grid__over i, .grid__over em{ position:relative; }
}

/* ── services, numbered ────────────────────────────── */
.svc{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,28px); }
.svc li{
  position:relative;
  display:grid; grid-template-columns:auto 1fr; gap:0 14px; align-items:start;
  border:1px solid var(--edge); border-radius:14px; background:var(--coal);
  padding:24px 20px 22px;
  transition:border-color .3s var(--snap), background-color .3s var(--snap), transform .3s var(--snap);
}
.svc__n{
  font-family:var(--poster); font-weight:400; font-size:34px; line-height:1;
  /* dim neon, not --edge: --edge on --coal is 1.2:1, which reads as
     invisible rather than quiet — and there is no hover on a phone to
     bring it back */
  color:rgba(198,246,36,.5); transition:color .3s var(--snap);
}
.svc__up{
  align-self:start; justify-self:end;
  font-size:16px; color:var(--neon);
  transition:transform .3s var(--snap);
}
.svc__body{ grid-column:1 / -1; margin-top:14px; }
.svc__ico{
  display:grid; place-items:center;
  width:42px; height:42px; margin-bottom:14px;
  border:1px solid rgba(198,246,36,.32); border-radius:10px;
  color:var(--neon); background:rgba(198,246,36,.06);
}
.svc__ico svg{ width:21px; height:21px; }
.svc h3{ font-family:var(--poster); font-weight:400; font-size:19px; text-transform:uppercase; margin-bottom:8px; }
.svc p{ color:var(--ash); font-size:14px; line-height:1.6; }

@media (hover:hover){
  .svc li:hover{ border-color:rgba(198,246,36,.4); background:var(--panel); transform:translateY(-4px); }
  .svc li:hover .svc__n{ color:var(--neon); }
  .svc li:hover .svc__up{ transform:translate(3px,-4px); }
}
/* nothing can be revealed by hovering on a touch screen, so show the
   lit state outright */
@media (hover:none){
  .svc li{ border-color:rgba(198,246,36,.22); }
  .svc__n{ color:var(--neon); }
}

.sec__sub{ color:var(--ash); font-size:14.5px; margin-top:12px; }

/* ── more client work ──────────────────────────────── */
.more{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px); }
/* direct child only: each card contains a nested .tags list, and an
   unscoped `.more li` turns every tag chip into a card too */
.more > li{
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  border:1px solid var(--edge); border-radius:14px; background:var(--coal);
  padding:22px 20px;
  transition:border-color .3s var(--snap), background-color .3s var(--snap);
}
/* the thumbnail sits in its own lit frame so a bright screenshot never
   touches the card edge */
.more__shot{
  display:block; width:100%; margin-bottom:14px;
  border-radius:10px; overflow:hidden;
  background:#000; border:1px solid rgba(198,246,36,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 22px -8px rgba(198,246,36,.28);
}
.more__shot img{
  width:100%; height:auto; aspect-ratio:1.6; object-fit:cover; object-position:center top;
  transition:transform .5s var(--snap);
}
.more__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.more h3{ font-family:var(--poster); font-weight:400; font-size:18px; text-transform:uppercase; }
.more__state{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--void); background:var(--neon); border-radius:99px; padding:3px 9px;
  white-space:nowrap;
}
.more__state.is-wip{ color:var(--neon); background:transparent; border:1px solid rgba(198,246,36,.45); }
.more__who{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ash); }
.more__what{ color:var(--ash); font-size:14px; line-height:1.6; }

.tags{ list-style:none; margin:4px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.tags li{
  font-size:11px; letter-spacing:.06em; color:var(--white);
  border:1px solid var(--edge); border-radius:6px; padding:4px 8px;
}
.more__demo{ margin-top:14px; }

@media (hover:hover){
  .more > li:hover{ border-color:rgba(198,246,36,.34); background:var(--panel); }
  .more > li:hover .more__shot{ border-color:rgba(198,246,36,.4); }
  .more > li:hover .more__shot img{ transform:scale(1.04); }
}

/* ── proof ─────────────────────────────────────────── */
.proof{ display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:clamp(24px,3.5vw,52px); align-items:center; }
.proof__note{ color:var(--ash); font-size:14.5px; margin:14px 0 24px; }

.reel{ min-width:0; }
.reel ul{
  list-style:none; margin:0; padding:0 0 16px;
  display:flex; gap:16px; overflow-x:auto;
  scroll-snap-type:x mandatory; cursor:grab;
  scrollbar-width:thin; scrollbar-color:var(--edge) transparent;
}
.reel ul.dragging{ cursor:grabbing; scroll-snap-type:none; }
.reel ul::-webkit-scrollbar{ height:6px; }
.reel ul::-webkit-scrollbar-thumb{ background:var(--edge); border-radius:99px; }
.reel li{
  flex:0 0 min(330px,74vw); scroll-snap-align:start;
  border:1px solid var(--edge); border-radius:12px; overflow:hidden; background:var(--coal);
}
/* every shot is 870x580 — reserving the ratio stops the lazy
   images collapsing the reel to a thin strip before they land */
.reel img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; pointer-events:none; }

/* ── brand marks ───────────────────────────────────── */
.brands{ max-width:var(--max); margin:0 auto; padding:0 var(--pad) clamp(40px,6vw,80px); }
.marks{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.marks li{
  width:150px; height:88px;
  background:#fff; border-radius:10px;
  overflow:hidden;
}
/* The img itself fills the tile and object-fit does the letterboxing, with
   padding as the inset. These logos mix 16:9 and square, and any approach
   that sizes the element from the picture lets a square one grow taller than
   the tile — max-height:100% cannot save it either, because the percentage
   has no definite row height to resolve against. */
.marks img{ width:100%; height:100%; padding:14px; object-fit:contain; }

/* ── close ─────────────────────────────────────────── */
.end{
  max-width:var(--max); margin:0 auto;
  padding:clamp(50px,7vw,96px) var(--pad);
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(26px,4vw,60px); align-items:center;
  border-top:1px solid var(--edge);
}
.end__big{
  font-family:var(--poster); font-weight:400;
  font-size:clamp(28px,4.4vw,60px); line-height:1.06; text-transform:uppercase;
}
.end__line{ color:var(--ash); max-width:46ch; margin:20px 0 26px; }
.end__r{ margin:0; justify-self:center; }

.hire{
  position:relative; display:block; overflow:hidden;
  width:min(360px,78vw); border-radius:14px;
  border:1px solid var(--edge); text-decoration:none;
}
.hire img{ width:100%; height:auto; background:#EBEBEB; transition:transform .5s var(--snap); }
.hire__wash{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,5,5,0) 45%, rgba(5,5,5,.9));
  opacity:0; transition:opacity .35s var(--snap);
}
.hire__tag{
  position:absolute; left:50%; bottom:22px; translate:-50% 0;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--neon); color:var(--void);
  font-family:var(--poster); font-size:20px; letter-spacing:.03em;
  padding:9px 18px; border-radius:6px;
  opacity:0; transform:translateY(10px);
  transition:opacity .3s var(--snap), transform .3s var(--snap);
}
.hire__tag i{ font-style:normal; }

@media (hover:hover){
  .hire:hover img, .hire:focus-visible img{ transform:scale(1.04); }
  .hire:hover .hire__wash, .hire:focus-visible .hire__wash{ opacity:1; }
  .hire:hover .hire__tag, .hire:focus-visible .hire__tag{ opacity:1; transform:none; }
}
@media (hover:none){
  .hire__wash{ opacity:1; }
  .hire__tag{ opacity:1; transform:none; }
}

/* ── footer ────────────────────────────────────────── */
.ftr{ border-top:1px solid var(--edge); background:var(--coal); }
.ftr__grid{
  max-width:var(--max); margin:0 auto;
  padding:clamp(38px,5vw,64px) var(--pad) clamp(26px,3vw,40px);
  display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:clamp(22px,3vw,48px);
}
.ftr__mark{ font-family:var(--poster); font-size:26px; color:var(--neon); text-decoration:none; display:inline-block; margin-bottom:12px; }
.ftr__grid p{ color:var(--ash); font-size:14px; max-width:36ch; }
.ftr h4{
  font-family:var(--ui); font-weight:700; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--white); margin-bottom:14px;
}
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ftr a{ color:var(--ash); text-decoration:none; font-size:14px; transition:color .25s var(--snap); }
.ftr a:hover{ color:var(--neon); }
.ftr__where{ margin-top:14px; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; }

.ftr__base{
  max-width:var(--max); margin:0 auto;
  padding:16px var(--pad) 26px;
  border-top:1px solid var(--edge);
  display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; justify-content:space-between;
}
.ftr__base p{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ash); }
.ftr__base nav{ display:flex; gap:18px; }
.ftr__base a{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; }

/* ── back to top, with the scroll ring ─────────────── */
.up{
  position:fixed; right:20px; bottom:20px; z-index:40;
  width:48px; height:48px; border-radius:999px;
  background:var(--coal); border:1px solid var(--edge);
  color:var(--neon); cursor:pointer; padding:0;
  display:grid; place-items:center;
  opacity:0; pointer-events:none; translate:0 10px;
  transition:opacity .3s var(--snap), translate .3s var(--snap);
}
.up.on{ opacity:1; pointer-events:auto; translate:0; }
.up i{ font-style:normal; font-size:17px; line-height:1; }
.up__ring{ position:absolute; inset:-1px; width:calc(100% + 2px); height:calc(100% + 2px); transform:rotate(-90deg); }
.up__ring circle{ fill:none; stroke-width:3; }
.up__track{ stroke:var(--edge); }
.up__bar{
  stroke:var(--neon); stroke-linecap:round;
  stroke-dasharray:289; stroke-dashoffset:289;
}

/* ── reveals ───────────────────────────────────────── */
.rise{ opacity:0; transform:translateY(16px); animation:rise .7s var(--snap) forwards; animation-delay:var(--d,0ms); }
@keyframes rise{ to{ opacity:1; transform:none } }

[data-in]{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--snap), transform .7s var(--snap); }
[data-in].on{ opacity:1; transform:none; }

/* ══ responsive ══════════════════════════════════════ */

@media (min-width:1081px){
  body{ padding-left:var(--rail); }
  .up{ right:26px; bottom:26px; }
}

@media (max-width:1080px){
  .rail{ display:none; }
  .bar{ display:flex; }
  .gallery__head{ position:static; }
}

@media (max-width:980px){
  .banner{ grid-template-columns:1fr; text-align:left; }
  .banner__figure{ order:-1; justify-items:start; }
  .split, .gallery, .proof, .end{ grid-template-columns:1fr; }
  .svc, .more{ grid-template-columns:repeat(2,1fr); }
  .ftr__grid{ grid-template-columns:1fr 1fr; }
  .end__r{ justify-self:start; }
}

@media (max-width:400px){
  /* clamp() bottoms out at 34px here, which pushes "BASED IN THE PHILIPPINES"
     onto a third line below ~350px. Tying it to the viewport instead keeps
     the headline at two lines all the way down. */
  .banner h1{ font-size:9.1vw; }
}

@media (max-width:640px){
  .counts{ grid-template-columns:1fr; gap:34px; }
  .grid{ grid-template-columns:1fr; }
  .svc, .more{ grid-template-columns:1fr; }
  .ftr__grid{ grid-template-columns:1fr; }
  .marks li{ width:112px; height:64px; }
  .banner__go{ flex-direction:column; align-items:stretch; }
  .banner__go .cta, .banner__go .ghost{ justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; animation:none; }
  [data-in]{ opacity:1; transform:none; transition:none; }
  .pulse{ animation:none; }
  *{ transition-duration:.01ms !important; }
}