/* ============================================================
   UrbenWorks, cyberpunk build
   Palette: the 6 spec colours only (rgba variants of them are
   opacity, not new colours). Backgrounds cropped from TJ's art.
   Breakpoints: mobile <=767 / tablet 768-1199 / desktop 1200+
   ============================================================ */

:root{
  --obsidian:#040A11;
  --graphite:#0D1822;
  --red:#F92F31;
  --steel:#92959D;
  --cloud:#F5F5F5;
  --border:#1B3449;
  --gold:#D6AF56;
  --chamfer:polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  --chamfer-btn:polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px);

  --display:'Anton',Impact,system-ui,sans-serif;
  --body:'Space Grotesk',system-ui,sans-serif;

  --glow-sm:0 0 12px rgba(249,47,49,.45);
  --glow-md:0 0 28px rgba(249,47,49,.35);
  --edge:1px solid var(--border);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  background:var(--obsidian);color:var(--cloud);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:1320px;margin:0 auto;padding:0 28px;position:relative}
.wrap.narrow{max-width:1100px}

/* ───────── type ───────── */
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:.01em;text-transform:uppercase}
h1{font-size:clamp(44px,7vw,92px)}
h2{font-size:clamp(34px,5vw,62px)}
h3{font-size:clamp(22px,1.9vw,26px)}

.label{
  font-family:var(--body);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);font-weight:500;
}
.kicker{
  font-family:var(--body);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--steel);font-weight:500;
}

/* metallic / chrome text */
.chrome{
  background:linear-gradient(180deg,
    #F5F5F5 0%, #92959D 38%, #F5F5F5 52%, #92959D 70%, #1B3449 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 10px rgba(4,10,17,.9));
}
.in-red{
  color:var(--red);-webkit-text-fill-color:var(--red);
  background:none;filter:drop-shadow(0 0 16px rgba(249,47,49,.55));
}

section{padding:104px 0;position:relative}

/* scanline + grid atmosphere */
.scan::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(
    180deg,rgba(4,10,17,0) 0 2px,rgba(4,10,17,.55) 2px 3px);
  opacity:.35;mix-blend-mode:multiply;
}
.gridlines::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(27,52,73,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(27,52,73,.5) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 75%);
  opacity:.55;
}

/* ───────── NAV ───────── */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(4,10,17,.82);backdrop-filter:blur(14px);
  border-bottom:var(--edge);
}
nav{display:flex;align-items:center;gap:20px;height:74px}
.logo{
  font-family:var(--display);font-size:26px;letter-spacing:.02em;
  text-transform:uppercase;white-space:nowrap;
}
.logo .tm{
  font-family:var(--body);font-size:10px;vertical-align:super;
  letter-spacing:0;color:var(--steel);-webkit-text-fill-color:var(--steel);
}
.logo{display:inline-flex;align-items:center}
.logo-ship{height:30px;width:auto;display:block;margin-right:8px}
@media(max-width:767px){ .logo-ship{height:26px} }
.btn .arrow{transition:opacity .2s}
.launch{position:fixed;width:32px;height:33px;z-index:9999;pointer-events:none}
.launch img{width:100%;height:100%;display:block;position:relative}
.launch .trail{position:absolute;right:50%;top:50%;width:5px;height:70px;
  transform-origin:100% 0;transform:rotate(45deg);
  background:linear-gradient(to bottom,rgba(255,140,80,.95),rgba(249,47,49,.85) 35%,rgba(249,47,49,0));
  filter:blur(1.5px);animation:flame .12s ease-in-out infinite alternate}
@keyframes flame{from{transform:rotate(45deg) scaleY(1)}to{transform:rotate(45deg) scaleY(.7)}}
.links{display:flex;gap:8px;margin-left:auto}
.links a{
  font-family:var(--body);font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--steel);
  padding:9px 14px;border:1px solid transparent;
  transition:color .2s,border-color .2s,box-shadow .2s;
}
.links a:hover{color:var(--cloud);border-color:var(--border)}
.links a[aria-current="page"]{
  color:var(--red);border-color:var(--red);box-shadow:var(--glow-sm);
}

/* ───────── buttons ───────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-weight:500;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:16px 28px;border:1px solid transparent;
  transition:transform .2s,box-shadow .2s,border-color .2s;cursor:pointer;
}
.btn.red{background:var(--red);color:var(--cloud)}
.btn.red:hover,.btn.red:focus-visible{transform:translateY(-2px);box-shadow:var(--glow-md)}
.btn.ghost{border-color:var(--border);color:var(--cloud);background:rgba(4,10,17,.6)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--red);transform:translateY(-2px);box-shadow:var(--glow-sm)}
.nav-cta{padding:12px 20px;font-size:11px}
:focus-visible{outline:2px solid var(--cloud);outline-offset:3px}

/* hamburger */
.burger{
  width:42px;height:34px;border:1px solid var(--border);background:transparent;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  cursor:pointer;transition:border-color .2s,box-shadow .2s;
}
.burger:hover{border-color:var(--red);box-shadow:var(--glow-sm)}
.burger i{display:block;width:18px;height:1.5px;background:var(--cloud)}

/* overlay menu */
.menu{
  position:fixed;inset:0;z-index:60;background:rgba(4,10,17,.97);
  display:none;padding:28px;
}
.menu[open],.menu.show{display:block}
.menu .close{
  position:absolute;top:24px;right:28px;width:42px;height:42px;
  border:1px solid var(--border);background:transparent;color:var(--cloud);
  font-size:20px;cursor:pointer;
}
.menu nav{flex-direction:column;align-items:flex-start;height:auto;gap:0;margin-top:80px}
.menu a{
  font-family:var(--display);font-size:clamp(30px,6vw,56px);text-transform:uppercase;
  padding:14px 0;border-bottom:var(--edge);width:100%;color:var(--cloud);
  transition:color .2s,padding-left .2s;
}
.menu a:hover{color:var(--red);padding-left:14px}
.menu .foot{margin-top:40px;color:var(--steel);font-size:14px}

/* ───────── HERO ───────── */
.hero{
  min-height:92vh;display:flex;align-items:center;
  padding:120px 0 90px;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(4,10,17,.96) 0%,rgba(4,10,17,.72) 45%,rgba(4,10,17,.55) 100%),
    linear-gradient(180deg,rgba(4,10,17,.85) 0%,transparent 35%,rgba(4,10,17,.95) 100%),
    url('bg-hero.jpg') center/cover no-repeat;
}
.hero-inner{max-width:900px;position:relative;z-index:2}
.hero .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.hero .eyebrow .bar{width:46px;height:1px;background:var(--red)}
.hero h1{margin:0 0 6px}
.hero .sub{
  font-family:var(--display);font-size:clamp(22px,3.4vw,42px);
  text-transform:uppercase;margin-bottom:22px;letter-spacing:.01em;
}
.hero .lead{color:var(--steel);font-size:18px;max-width:560px;margin-bottom:38px}
.actions{display:flex;gap:14px;flex-wrap:wrap}

/* side rails */
.rail{
  position:absolute;top:0;bottom:0;width:1px;background:var(--border);opacity:.6;
}
.rail.l{left:14px}.rail.r{right:14px}

/* ticker */
.ticker{
  border-top:var(--edge);border-bottom:var(--edge);
  background:var(--obsidian);overflow:hidden;padding:14px 0;
}
.ticker .run{
  display:flex;gap:0;white-space:nowrap;width:max-content;
  animation:slide 34s linear infinite;
}
.ticker span{
  font-family:var(--body);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--steel);padding:0 26px;
}
.ticker span::after{content:"+";color:var(--red);margin-left:26px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ───────── section heads ───────── */
.shead{display:flex;align-items:flex-start;gap:22px;margin-bottom:52px;flex-wrap:wrap}
.badge{
  font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.1em;
  color:var(--red);border:1px solid var(--red);padding:6px 12px;
  box-shadow:var(--glow-sm);flex:none;margin-top:6px;
}
.shead .txt{flex:1;min-width:260px}
.shead h2{margin-bottom:12px}
.shead p{color:var(--steel);max-width:560px}

/* ───────── cards with corner brackets ───────── */
.brk{position:relative}
.brk::before,.brk::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:var(--red);transition:width .25s,height .25s;
}
.brk::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid}
.brk::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid}
.brk:hover::before,.brk:hover::after{width:26px;height:26px}

.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.card{
  background:var(--graphite);border:var(--edge);padding:26px 22px 28px;
  transition:transform .25s,border-color .25s,box-shadow .25s;
  min-height:220px;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-5px);border-color:var(--red);box-shadow:var(--glow-md)}
.card .n{font-family:var(--body);font-size:11px;letter-spacing:.2em;color:var(--steel);margin-bottom:auto}
.card h3{margin:36px 0 10px;line-height:1.02}
.card p{color:var(--steel);font-size:14px;line-height:1.55}
.card .arw{color:var(--red);font-size:18px;margin-top:16px}

/* ───────── work ───────── */
.work-card{
  display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--graphite);border:var(--edge);overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
.work-card:hover{border-color:var(--red);box-shadow:var(--glow-md)}
.work-card+.work-card{margin-top:22px}
.mock{
  background:var(--obsidian);padding:34px;display:flex;align-items:center;justify-content:center;
  min-height:340px;position:relative;overflow:hidden;
}
.mock::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(249,47,49,.22),transparent 62%);
}
.browser{
  width:100%;max-width:430px;border:var(--edge);background:var(--graphite);
  transition:transform .45s;position:relative;z-index:1;
}
.work-card:hover .browser{transform:scale(1.04)}
.bar{display:flex;gap:6px;padding:11px 13px;border-bottom:var(--edge)}
.bar i{width:8px;height:8px;background:var(--border)}
.bmain{padding:28px 24px}
.bmain b{display:block;font-family:var(--display);font-size:24px;line-height:1.05;text-transform:uppercase}
.bmain small{display:block;color:var(--steel);margin:10px 0 18px;font-size:11px;letter-spacing:.14em}
.bmain em{
  display:inline-block;font-style:normal;background:var(--red);color:var(--cloud);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;
}
.work-info{padding:48px}
.work-info h3{margin:14px 0 16px;font-size:clamp(26px,3vw,40px)}
.work-info p{color:var(--steel);margin-bottom:26px}
.work-link{
  display:inline-flex;align-items:center;gap:8px;color:var(--cloud);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--red);padding-bottom:4px;transition:gap .2s;
}
.work-link:hover{gap:14px}

/* ───────── process ───────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{
  background:var(--graphite);border:var(--edge);padding:26px 22px;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.step:hover{border-color:var(--red);box-shadow:var(--glow-sm);transform:translateY(-4px)}
.step .n{font-family:var(--body);font-size:11px;letter-spacing:.2em;color:var(--red)}
.step h3{margin:14px 0 10px}
.step p{color:var(--steel);font-size:14px}

/* ───────── body copy ───────── */
.body-copy{max-width:760px}
.body-copy p{color:var(--steel);margin-bottom:20px}
.body-copy p strong{color:var(--cloud);font-weight:500}
ul.list{list-style:none;max-width:760px;margin-top:8px}
ul.list li{position:relative;padding-left:30px;margin-bottom:16px;color:var(--steel)}
ul.list li::before{content:"+";position:absolute;left:0;top:0;color:var(--red);font-weight:700}
ul.list li b{color:var(--cloud);font-weight:500}

/* ───────── CTA ───────── */
.cta{
  position:relative;padding:110px 40px;text-align:center;overflow:hidden;
  border:var(--edge);
  background:
    linear-gradient(180deg,rgba(4,10,17,.9) 0%,rgba(4,10,17,.72) 50%,rgba(4,10,17,.94) 100%),
    url('bg-cta.jpg') center/cover no-repeat;
}
.cta h2{margin-bottom:18px}
.cta p{max-width:540px;margin:0 auto 34px;color:var(--steel)}
.cta .mail{margin-top:24px;font-size:13px;letter-spacing:.1em;color:var(--steel)}

footer{border-top:var(--edge);padding:40px 0;color:var(--steel);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer{position:relative;z-index:2;background:rgba(4,10,17,.84)}
footer .foot-col{display:flex;flex-direction:column;gap:8px}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--red)}

/* ───────── case study bits ───────── */
.chead{
  padding:30px 0 24px;position:relative;
}
.chead .label{display:block;margin-bottom:8px}
.chead h1{font-size:clamp(28px,3.4vw,44px);margin-bottom:12px}
.chead .lead{font-size:16px}
.lead{color:var(--steel);font-size:18px;max-width:620px}
.tag{
  display:inline-block;margin-top:28px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);border:var(--edge);padding:9px 16px;
}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px;padding-top:18px;border-top:var(--edge)}
.meta div span{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:9px}
.meta div b{font-family:var(--body);font-weight:500;font-size:16px}

.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.shot{background:var(--obsidian);border:var(--edge);overflow:hidden}
.shot .frame{
  aspect-ratio:16/10;border-bottom:1px dashed var(--border);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;text-align:center;padding:26px;
  background:radial-gradient(circle at 50% 50%,rgba(249,47,49,.12),transparent 65%);
}
.shot .frame em{font-style:normal;font-family:var(--body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.shot .frame small{color:var(--steel);font-size:13px;max-width:290px}
.shot .cap{padding:20px 22px}
.shot .cap b{display:block;font-family:var(--display);font-size:clamp(22px,1.9vw,26px);text-transform:uppercase;line-height:1.05;margin-bottom:9px}
.shot .cap p{color:var(--steel);font-size:14px}
.shot.tall .frame{aspect-ratio:9/14;max-height:440px}

.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.fcard{background:var(--graphite);border:var(--edge);padding:28px;transition:transform .25s,border-color .25s,box-shadow .25s}
.fcard:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:var(--glow-sm)}
.fcard b{display:block;font-family:var(--display);font-size:clamp(22px,1.9vw,26px);text-transform:uppercase;line-height:1.05;margin-bottom:12px}
.fcard p{color:var(--steel);font-size:14px}

.res{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:44px}
.rcard{border-left:2px solid var(--red);padding:6px 0 6px 24px}
.rcard b{display:block;font-family:var(--display);font-size:clamp(22px,1.9vw,26px);text-transform:uppercase;line-height:1.05;margin-bottom:9px}
.rcard p{color:var(--steel);font-size:14px}
.note{margin-top:40px;padding:22px 26px;border:var(--edge);color:var(--steel);font-size:14px;max-width:760px}

.addon{border:1px dashed var(--border);padding:28px;margin-top:18px;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center}
.addon b{display:block;font-family:var(--display);font-size:clamp(22px,1.9vw,26px);text-transform:uppercase;line-height:1.05;margin-bottom:10px}
.addon p{color:var(--steel);font-size:14px;max-width:620px}
.pill{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);border:var(--edge);padding:8px 14px;white-space:nowrap}

.details{max-width:820px;margin-top:40px}
.details div{display:grid;grid-template-columns:210px 1fr;gap:22px;padding:20px 0;border-bottom:var(--edge)}
.details div span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel)}
.details div b{font-weight:500}
.num{font-family:var(--body);font-size:12px;color:var(--red);letter-spacing:.18em;margin-bottom:14px}
.back{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);transition:color .2s}
.back:hover{color:var(--cloud)}

/* ───────── contact ───────── */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.form{background:var(--graphite);border:var(--edge);padding:40px}
.field{margin-bottom:24px}
.field label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:11px}
.field input,.field select,.field textarea{
  width:100%;background:var(--obsidian);color:var(--cloud);
  border:var(--edge);padding:15px 17px;
  font-family:var(--body);font-size:16px;transition:border-color .2s,box-shadow .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);box-shadow:var(--glow-sm);outline:none}
.field textarea{min-height:140px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form-note{margin-top:20px;font-size:13px;color:var(--steel);border-left:2px solid var(--red);padding-left:16px}
.side .step{border:none;background:none;padding:0 0 22px;border-bottom:var(--edge);margin-bottom:22px}
.side .step:hover{transform:none;box-shadow:none}
.side .direct{margin-top:34px;padding-top:30px;border-top:var(--edge)}
.side .direct a{color:var(--cloud);border-bottom:1px solid var(--red);padding-bottom:3px}
.side p{color:var(--steel);font-size:14px}

/* ───────── reveal ───────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s,transform .55s}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   TABLET 768-1199
   ============================================================ */
@media(max-width:1199px){
  section{padding:80px 0}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:repeat(2,1fr)}
  .meta{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .work-info{padding:36px}
  .links{display:none}
  .hero{min-height:auto;padding:88px 0 72px}
}

/* ============================================================
   MOBILE <=767
   ============================================================ */
@media(max-width:767px){
  body{font-size:16px}
  section{padding:62px 0}
  .wrap{padding:0 18px}

  nav{flex-wrap:wrap;height:auto;padding:14px 0;row-gap:10px;gap:12px}
  .logo{order:1;font-size:22px;margin-right:auto}
  .nav-cta{order:2}
  .burger{display:none}
  .links{
    order:3;display:flex;flex-basis:100%;margin-left:0;gap:0;flex-wrap:wrap;
  }
  .links a{padding:11px 0;font-size:11px;border:none}
  .links a+a::before{content:"/";margin:0 11px;color:var(--border)}
  .links a[aria-current="page"]{border:none;box-shadow:none}
  html{scroll-padding-top:130px}

  .hero{padding:62px 0;background-position:62% center}
  .hero .lead{font-size:16px}
  .cards,.steps,.feat,.res,.shots{grid-template-columns:1fr}
  .work-card,.contact-grid{grid-template-columns:1fr}
  .mock{min-height:250px;padding:22px}
  .work-info{padding:30px}
  .meta{grid-template-columns:1fr;gap:18px}
  .details div{grid-template-columns:1fr;gap:7px}
  .addon{grid-template-columns:1fr}
  .form{padding:26px}
  .field-row{grid-template-columns:1fr;gap:0}
  .cta{padding:64px 22px}
  .chead{padding:24px 0 20px}
  .shead{gap:16px;margin-bottom:36px}
  .back{display:none}
  .rail{display:none}

  .actions{flex-direction:column}
  .actions .btn,.cta .btn,.form .btn{width:100%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .ticker .run{animation:none}
}

/* ============================================================
   Real homepage screenshots in work cards + Preview buttons
   ============================================================ */
.screen{
  width:100%;max-width:470px;border:var(--edge);background:var(--graphite);
  position:relative;z-index:1;overflow:hidden;
  box-shadow:0 18px 48px rgba(4,10,17,.75);
}
.screen .bar{display:flex;gap:6px;padding:11px 13px;border-bottom:var(--edge);background:var(--graphite)}
.screen .bar i{width:8px;height:8px;background:var(--border)}
.screen .pic{display:block;overflow:hidden;line-height:0}
.screen .pic img{width:100%;height:auto;display:block;transition:transform .5s}
.work-card:hover .screen .pic img{transform:scale(1.05)}

.work-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.btn.sm{padding:13px 20px;font-size:11px}

/* screenshots inside the case-study showcase grid */
.shot .frame.real{padding:0;border-bottom:var(--edge);background:var(--graphite);aspect-ratio:auto}
.shot .frame.real img{width:100%;height:auto;display:block}

@media(max-width:767px){
  .screen{max-width:100%}
  .work-actions{flex-direction:column}
  .work-actions .btn{width:100%}
}

/* ============================================================
   ENTER SCREEN
   Hidden by default on purpose: JS turns it on. If JS fails,
   the visitor just gets the homepage instead of a locked door.
   Swap the photo by changing --enter-img below.
   ============================================================ */
:root{ --enter-img:url('enter-space.jpg'); }

.enter{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;text-align:center;
  background:var(--obsidian);
  opacity:0;
}
.enter.on{display:flex;animation:enterIn .7s ease forwards}
@keyframes enterIn{to{opacity:1}}

.enter .photo{
  position:absolute;inset:0;
  background:var(--enter-img) center/cover no-repeat;
  transform:scale(1.06);
  transition:transform 1.1s cubic-bezier(.4,0,.2,1);
}
.enter .veil{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 58%,rgba(4,10,17,.08) 0%,rgba(4,10,17,.55) 68%,rgba(4,10,17,.88) 100%),
    linear-gradient(180deg,rgba(4,10,17,.62) 0%,rgba(4,10,17,.12) 42%,rgba(4,10,17,.72) 100%);
}
.enter .veil::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(4,10,17,0) 0 2px,rgba(4,10,17,.5) 2px 3px);
  opacity:.3;
}
.enter .inner{position:relative;z-index:2;padding:28px;max-width:760px}
.enter .mark{
  font-family:var(--display);text-transform:uppercase;line-height:.92;
  font-size:clamp(46px,10vw,124px);margin-bottom:16px;
  filter:drop-shadow(0 6px 26px rgba(4,10,17,.95));
}
.enter .inner::before{
  content:"";position:absolute;inset:-40px -60px;z-index:-1;
  background:radial-gradient(ellipse at 50% 46%,rgba(4,10,17,.72) 0%,transparent 70%);
}
.enter .tag{
  display:block;border:0;padding:0;margin:0 0 46px;
  font-family:var(--body);font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--steel);
}
.enter .go{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.44em;
  text-transform:uppercase;color:var(--cloud);
  background:transparent;border:1px solid var(--cloud);
  padding:21px 52px 21px 56px;cursor:pointer;
  transition:background .25s,color .25s,box-shadow .25s,border-color .25s;
}
.enter .go:hover,.enter .go:focus-visible{
  background:var(--red);border-color:var(--red);box-shadow:var(--glow-md);
}
.enter .hint{
  margin-top:30px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--steel);
}
.enter .corner{position:absolute;width:38px;height:38px;border-color:var(--red);opacity:.85}
.enter .corner.tl{top:26px;left:26px;border-top:2px solid;border-left:2px solid}
.enter .corner.br{bottom:26px;right:26px;border-bottom:2px solid;border-right:2px solid}

/* the zoom: overlay rushes toward the viewer and fades out */
.enter.leaving{animation:none;opacity:1;transition:opacity .85s ease,transform .85s cubic-bezier(.5,0,.75,0);transform:scale(2.6);opacity:0;pointer-events:none}
.enter.leaving .photo{transform:scale(1.5)}

/* the page behind settles in from slightly small */
body.pre-enter{overflow:hidden}
body.pre-enter .page{transform:scale(.94);filter:blur(7px);transform-origin:50% 42%}
.page{transition:transform .95s cubic-bezier(.2,0,.2,1),filter .8s ease}

@media(max-width:767px){
  .enter .go{padding:19px 34px;letter-spacing:.3em;font-size:11px;width:auto}
  .enter .tag{letter-spacing:.3em;margin-bottom:36px}
  .enter .corner{width:26px;height:26px;top:16px;left:16px}
  .enter .corner.br{bottom:16px;right:16px;top:auto;left:auto}
}
@media(prefers-reduced-motion:reduce){
  .enter.on{animation:none;opacity:1}
  .enter .photo{transform:none;transition:none}
  .enter.leaving{transition:opacity .3s ease;transform:none}
  .page,body.pre-enter .page{transition:none;transform:none;filter:none}
}

/* Headings focused by script (after the enter screen) should not draw a
   focus box, because the visitor did not tab there. Keyboard focus is unaffected. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}

/* ============================================================
   SERVICE CARDS WITH PHOTOS
   Four cards now, matching the real offer: build / automate /
   manage monthly / built to order. Overrides the 5-card rules.
   ============================================================ */
.cards{grid-template-columns:repeat(4,1fr);gap:18px}
.card{padding:0;overflow:hidden;min-height:0}
.card .cphoto{
  aspect-ratio:16/10;overflow:hidden;border-bottom:var(--edge);
  position:relative;background:var(--obsidian);
}
.card .cphoto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s}
.card .cphoto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,10,17,.12) 0%,rgba(4,10,17,.62) 100%);
}
.card:hover .cphoto img{transform:scale(1.08)}
.card .cbody{padding:24px 22px 26px;display:flex;flex-direction:column;flex:1}
.card .cbody .n{margin-bottom:12px}
.card .cbody h3{margin:0 0 10px;line-height:1.02}
.card .cbody p{margin-bottom:16px}
.card .cbody .arw{margin-top:auto}

/* the no-price line under the grid */
.svc-foot{
  margin-top:34px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  border-top:var(--edge);padding-top:28px;
}
.svc-foot p{color:var(--steel);font-size:15px;max-width:520px;margin:0}
.svc-foot p b{color:var(--cloud);font-weight:500}

@media(max-width:1199px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:767px){
  .cards{grid-template-columns:1fr}
  .card .cphoto{aspect-ratio:16/9}
  .svc-foot{flex-direction:column;align-items:flex-start;gap:16px}
  .svc-foot .btn{width:100%}
}

/* ============================================================
   ADD-ONS: one horizontal card that opens.
   Built on <details>/<summary>: keyboard and screen-reader
   support for free, and it still opens with JavaScript off.
   No prices anywhere (Playbook rule 12).
   ============================================================ */
.addons{
  margin-top:22px;background:var(--graphite);border:var(--edge);
  transition:border-color .25s,box-shadow .25s;
}
.addons[open]{border-color:var(--red);box-shadow:var(--glow-md)}
.addons summary{
  list-style:none;cursor:pointer;padding:28px 30px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.addons summary::-webkit-details-marker{display:none}
.addons summary:hover .ao-open{color:var(--cloud);border-color:var(--red)}
.addons .ao-l{flex:1;min-width:240px}
.addons .ao-l b{
  display:block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(22px,2.2vw,30px);line-height:1.05;margin-bottom:8px;
}
.addons .ao-l span{color:var(--steel);font-size:15px}
.addons .ao-open{
  font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel);border:1px solid var(--border);padding:11px 18px;
  display:inline-flex;align-items:center;gap:10px;transition:color .2s,border-color .2s;
  white-space:nowrap;
}
.addons .ao-open i{font-style:normal;color:var(--red);font-size:15px;line-height:1}
.addons[open] .ao-open .lbl-shut{display:none}
.addons:not([open]) .ao-open .lbl-open{display:none}

.addons .ao-body{border-top:var(--edge);padding:8px 30px 30px}
.ao-item{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid rgba(27,52,73,.6)}
.ao-item:last-child{border-bottom:0}
.ao-item b{
  display:block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(19px,1.7vw,23px);line-height:1.1;margin-bottom:8px;
}
.ao-item p{color:var(--steel);font-size:15px;max-width:660px;margin:0}
.ao-note{margin-top:22px;color:var(--steel);font-size:14px;border-left:2px solid var(--red);padding-left:16px}

@media(max-width:767px){
  .addons summary{padding:22px 20px;gap:16px}
  .addons .ao-body{padding:6px 20px 24px}
  .ao-item{grid-template-columns:1fr;gap:12px}
  .addons .ao-open{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){ .addons{transition:none} }

/* ============================================================
   3 service cards (Built To Order dropped, because the add-ons card
   does that job), CRM tiers, the + / − icon, guarantee band.
   ============================================================ */
.cards{grid-template-columns:repeat(3,1fr)}
@media(max-width:1199px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media(max-width:767px){ .cards{grid-template-columns:1fr} }

/* the icon has to change when the card opens */
.addons .ao-open .ic-open{display:none}
.addons[open] .ao-open .ic-shut{display:none}
.addons[open] .ao-open .ic-open{display:inline}

/* tiers inside an add-on */
.ao-tiers{margin-top:16px;display:grid;gap:10px}
.ao-tier{
  display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:baseline;
  padding:12px 0 12px 16px;border-left:1px solid var(--border);
  transition:border-color .2s;
}
.ao-tier:hover{border-left-color:var(--red)}
.ao-tier b{
  font-family:var(--body);font-weight:500;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin:0;
}
.ao-tier span{color:var(--steel);font-size:14px}
.ao-tier span em{font-style:normal;color:var(--cloud)}

/* the guarantee */
.guarantee{
  margin-top:48px;border:1px solid var(--red);box-shadow:var(--glow-md);
  background:var(--graphite);padding:36px 40px;
  display:flex;align-items:center;gap:32px;flex-wrap:wrap;
}
.guarantee .g-mark{
  font-family:var(--display);text-transform:uppercase;line-height:.9;
  font-size:clamp(46px,5.4vw,74px);color:var(--red);flex:none;
}
.guarantee .g-mark small{display:block;font-size:12px;letter-spacing:.24em;color:var(--steel);font-family:var(--body);margin-top:10px}
.guarantee .g-txt{flex:1;min-width:280px}
.guarantee .g-txt b{
  display:block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(22px,2.4vw,32px);line-height:1.05;margin-bottom:10px;
}
.guarantee .g-txt p{color:var(--steel);font-size:15px;margin:0}

@media(max-width:767px){
  .ao-tier{grid-template-columns:1fr;gap:4px;padding-left:14px}
  .guarantee{padding:28px 22px;gap:20px}
}

/* ============================================================
   "IN PLAIN WORDS": one everyday-language line under each
   service and add-on, for someone who has never bought this.
   ============================================================ */
.plain{
  margin-top:16px;padding-left:15px;border-left:1px solid var(--border);
  transition:border-color .25s;
}
.card:hover .plain,.ao-item:hover .plain{border-left-color:var(--red)}
.plain b{
  display:block;font-family:var(--body);font-size:9.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:7px;
}
.plain span{display:block;color:var(--cloud);font-size:14px;line-height:1.55}

/* inside a service card it sits above the arrow */
.card .cbody .plain{margin-bottom:4px}
.card .cbody p{margin-bottom:0}

@media(max-width:767px){
  .plain{padding-left:13px}
  .plain span{font-size:15px}
}

/* ============================================================
   Lead form: optional markers + the four-state status line
   ============================================================ */
.field label .opt{
  font-size:9px;letter-spacing:.14em;color:var(--border);
  margin-left:8px;text-transform:uppercase;
}
.field textarea.short{min-height:84px}

.form-status{
  margin-top:18px;font-size:14px;color:var(--steel);
  min-height:1.2em;line-height:1.5;
}
.form-status.is-sent{
  color:var(--cloud);border-left:2px solid var(--red);
  padding-left:14px;
}
.form-status.is-error{
  color:var(--cloud);border-left:2px solid var(--red);
  padding-left:14px;
}
.form button[type="submit"][disabled]{opacity:.6;cursor:wait}

/* ============================================================
   Real screenshots in the case-study showcase.
   The phone shots are portrait (700x1041) and were overflowing
   the 440px cap meant for the empty placeholder frames.
   ============================================================ */
.shot .frame.real{max-height:none;padding:0;overflow:hidden}
.shot .frame.real img{width:100%;height:auto;display:block}

/* portrait phone shot: fixed panel height, image centred like a device */
.shot.tall .frame.real{
  height:520px;max-height:520px;
  /* the base .shot .frame is flex-direction:column, so without resetting it
     justify-content centres vertically and align-items pins the image left */
  display:flex;flex-direction:row;align-items:center;justify-content:center;
  background:var(--obsidian);padding:18px 0;
}
.shot.tall .frame.real img{width:auto;height:100%;max-width:100%;object-fit:contain}

@media(max-width:767px){
  .shot.tall .frame.real{height:440px;max-height:440px}
}

/* ============================================================
   Grey header band, and the guarantee's small print
   ============================================================ */
header{
  background:linear-gradient(180deg, var(--graphite) 0%, rgba(13,24,34,.94) 100%);
  border-bottom:1px solid var(--red);
  box-shadow:0 1px 0 rgba(249,47,49,.25), 0 10px 34px rgba(4,10,17,.7);
}
.guarantee .g-txt .g-small{
  margin-top:12px;font-size:13px;color:var(--steel);
  padding-top:12px;border-top:1px solid var(--border);
}

/* ============================================================
   LAYERED SCROLL
   The hero pins to the top and its artwork drifts slower than
   the text, so the first screen has depth. Everything after it
   is one sheet that slides up and covers the hero.
   A section taller than the screen cannot pin without hiding
   its own bottom, which is why the sheet slides instead.
   ============================================================ */

/* hero becomes a stack of layers */
.hero{
  position:sticky;top:0;z-index:0;
  background:none;                 /* the photo moves to its own layer below */
  overflow:hidden;
}
.hero .hero-bg{
  position:absolute;inset:-12% 0 -12% 0;   /* taller than the hero so it can drift */
  background:url('bg-hero.jpg') center/cover no-repeat;
  will-change:transform;
  transform:translate3d(0,0,0);
  z-index:0;
}
.hero .hero-haze{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,10,17,.96) 0%,rgba(4,10,17,.72) 45%,rgba(4,10,17,.55) 100%),
    linear-gradient(180deg,rgba(4,10,17,.85) 0%,transparent 35%,rgba(4,10,17,.95) 100%);
}
.hero .wrap,.hero .rail{position:relative;z-index:3}
.hero .hero-inner{z-index:3}
.hero.gridlines::after{z-index:2}

/* the sheet that slides over the pinned hero */
.after-hero{
  position:relative;z-index:1;
  background:var(--obsidian);
  box-shadow:0 -34px 70px rgba(4,10,17,.95), 0 -1px 0 var(--red);
}

/* each section inside the sheet lifts slightly as it arrives */
.after-hero > section{position:relative;background:var(--obsidian)}
.after-hero > section.alt,.after-hero > section.scan{background:var(--graphite)}

@media(prefers-reduced-motion:reduce){
  .hero{position:static}
  .hero .hero-bg{inset:0;transform:none!important}
  .after-hero{box-shadow:none}
}

/* ============================================================
   SPACE SKIN
   Deep navy base with blue ambience and red used sparingly,
   matching the proportions measured off the reference art
   (about 24% cool, 7% red). Plus the HUD details: clipped
   corners, hairline frames and // eyebrows.
   ============================================================ */

/* blue ambience sitting under everything */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 72% -8%, rgba(76,201,240,.16), transparent 62%),
    radial-gradient(900px 600px at 8% 42%, rgba(37,99,160,.12), transparent 64%),
    radial-gradient(800px 520px at 55% 108%, rgba(249,47,49,.10), transparent 62%);
}

/* each page carries its own sky */
body::after{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(76,201,240,.08) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(76,201,240,.08) 0 1px, transparent 1px 56px),
    /* soft vignette so the sharp photo's edges melt into the blurred fill */
    radial-gradient(ellipse 70% 70% at 50% 50%, rgba(4,10,17,0) 55%, rgba(4,10,17,.55) 100%),
    linear-gradient(180deg,rgba(4,10,17,.08) 0%,rgba(4,10,17,.3) 100%),
    /* sharp photo, zoomed out to show the whole frame */
    var(--sky, none) var(--skypos, center) / var(--skysize, contain) no-repeat,
    /* blurred copy filling the rest of the window, baked into a tiny file */
    var(--amb, none) center / cover no-repeat;
  opacity:1;
}
body[data-page="home"]    { --sky:url('sky-home.jpg') }
body[data-page="work"]    { --sky:url('sky-work.jpg'); --amb:url('sky-work-ambient.jpg') }
body[data-page="services"]{ --sky:url('sky-services.jpg'); --amb:url('sky-services-ambient.jpg') }
body[data-page="contact"] { --sky:url('sky-contact.jpg'); --amb:url('sky-contact-ambient.jpg') }
/* The work index gets its own tag so the two case studies, which are also
   tagged work for the nav, keep their own photo. */
body[data-page="worklist"]{ --sky:url('sky-window.jpg'); --amb:url('sky-window-ambient.jpg') }
/* The page head is transparent on every page now, so each page's photo runs
   unbroken from under the nav bar down the page. */

/* The sheet carries the page photo itself and sits on solid obsidian, so it
   still covers the pinned hero (no bleed through) while the photo stays visible.
   fixed keeps the photo still as the sheet slides up over the hero. */
.after-hero > section{background:transparent}
.after-hero{
  /* Opaque so it still covers the pinned hero, and cheap to draw: no photo and
     nothing locked to the viewport. The artwork moved to .sheet-art, which the
     graphics chip can slide with a transform instead of redrawing each frame. */
  background:
    repeating-linear-gradient(0deg, rgba(76,201,240,.08) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(76,201,240,.08) 0 1px, transparent 1px 56px),
    var(--obsidian);
}
.after-hero > section.alt,
.after-hero > section.scan,
section.alt,section.scan{background:rgba(13,24,34,.72);backdrop-filter:blur(2px)}
.after-hero{box-shadow:0 -34px 70px rgba(4,10,17,.85), 0 -1px 0 var(--red)}

/* HUD: clipped corners on the primary button */
.btn.red{
  clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}

/* HUD: hairline frame with corner brackets on cards */
.card,.fcard,.step,.work-card,.shot,.addons,.form,.guarantee{
  border-color:var(--border);
  background-image:linear-gradient(180deg, rgba(76,201,240,.05), transparent 55%);
}

/* // eyebrow marks */
.label::before,.kicker::before{content:"// ";opacity:.75;letter-spacing:.1em}

/* the badge reads like a HUD readout */
.badge{background:rgba(249,47,49,.08)}

/* keep text legible over the sky */
.body-copy p,.lead,.shead p{text-shadow:0 1px 14px rgba(4,10,17,.8)}

/* laptop mockup in the work cards, floating on the sky */
.laptop{position:relative;z-index:1;width:100%;max-width:520px}
.laptop img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 44px rgba(4,10,17,.85));transition:transform .5s}
.work-card:hover .laptop img{transform:translateY(-6px) scale(1.03)}
@media(max-width:767px){ .laptop{max-width:100%} }

/* the hero's own art layer is the page sky, not the old cyberpunk crop.
   contain, not cover, so the whole station and the Earth below it stay in frame. */
.hero .hero-bg{
  background-image:url('sky-welcome-a.jpg');
  background-size:contain;
  background-position:center;
  background-color:var(--obsidian);
}
.hero .hero-haze{
  background:
    linear-gradient(90deg,rgba(4,10,17,.94) 0%,rgba(4,10,17,.62) 48%,rgba(4,10,17,.30) 100%),
    linear-gradient(180deg,rgba(4,10,17,.70) 0%,transparent 38%,rgba(4,10,17,.92) 100%);
}
/* the closing block uses the burning horizon */
.cta{
  background:linear-gradient(180deg,rgba(4,10,17,.46) 0%,rgba(4,10,17,.2) 48%,rgba(4,10,17,.5) 100%);
  border:0;
}
.cta h2,.cta p,.cta .mail{position:relative;z-index:1}

/* The homepage hero already carries the sky as its own parallax layer,
   so the page-level sky would only double it up and muddy the art. */
body[data-page="home"]::after{display:none}

/* let the station actually read: lighter veil, strongest only behind the text */
.hero .hero-haze{
  background:
    linear-gradient(90deg,rgba(4,10,17,.90) 0%,rgba(4,10,17,.55) 42%,rgba(4,10,17,.08) 100%),
    linear-gradient(180deg,rgba(4,10,17,.55) 0%,transparent 34%,rgba(4,10,17,.88) 100%);
}
.hero .hero-bg{filter:saturate(1.12) contrast(1.05)}

/* ============================================================
   NEON + CHROMATIC
   Glow sits on the buttons at rest, not only on hover, and the
   headings get a red/blue split edge. Static, no animation, so
   it costs nothing on an older machine and respects reduced motion.
   Dial it back by lowering the alpha values here. Delete this
   whole block to go back to flat.
   ============================================================ */
.btn.red{ box-shadow:var(--glow-sm) }
.btn.red:hover,.btn.red:focus-visible{ box-shadow:var(--glow-md) }

.chead h1{
  text-shadow:
    -1px 0 rgba(249,47,49,.5),
     1px 0 rgba(76,201,240,.42),
     0 0 24px rgba(76,201,240,.2),
     0 2px 18px rgba(4,10,17,.92);
}
.chead .label,.hero .eyebrow{ text-shadow:0 0 14px rgba(249,47,49,.45) }

/* ============================================================
   GLASS CARDS + SLANT + LOAD REVEAL
   Dark frosted panels, glow instead of a drawn border, and the
   same clipped corner the red button already uses so the slant
   reads as one system rather than a new idea.
   Delete this block to go back to the bordered boxes.
   ============================================================ */
.card,.fcard,.step,.work-card,.shot,.addons,.form,.guarantee{
  border:0;
  background-color:rgba(13,24,34,.42);
  background-image:linear-gradient(180deg, rgba(245,245,245,.05), transparent 62%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow:inset 0 0 44px rgba(249,47,49,.09);
  transition:box-shadow .3s, transform .3s;
}
.card:hover,.fcard:hover,.step:hover,.work-card:hover{
  box-shadow:inset 0 0 64px rgba(249,47,49,.2);
  transform:translateY(-5px);
}

/* images bleed to the edge: the line under each card photo goes */
.card .cphoto{border-bottom:0}

/* standalone images get the same notch */
.shot img,.laptop img{
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

/* the page introduces itself instead of just appearing */
@keyframes uwRise{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
.hero .eyebrow,.hero h1,.hero .sub,.hero .lead,.hero .actions,
.chead .label,.chead h1,.chead .lead,.chead .tag{
  animation:uwRise .75s cubic-bezier(.2,.7,.3,1) both;
}
.hero h1,.chead h1{ animation-delay:.10s }
.hero .sub{ animation-delay:.18s }
.hero .lead,.chead .lead{ animation-delay:.26s }
.hero .actions,.chead .tag{ animation-delay:.34s }

@media(prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1,.hero .sub,.hero .lead,.hero .actions,
  .chead .label,.chead h1,.chead .lead,.chead .tag{ animation:none }
}

/* ============================================================
   BRAND GLOW + WORK CARD NEON
   .chrome is gradient-filled text, so it glows with drop-shadow;
   text-shadow would paint a solid blob behind the letters.
   ============================================================ */
.hero h1.chrome,.hero .sub .chrome{
  filter:
    drop-shadow(0 0 14px rgba(245,245,245,.5))
    drop-shadow(0 0 42px rgba(245,245,245,.24))
    drop-shadow(0 2px 10px rgba(4,10,17,.9));
}
.hero .sub .in-red{
  text-shadow:
    0 0 14px rgba(249,47,49,.9),
    0 0 38px rgba(255,94,40,.55),
    0 0 78px rgba(249,47,49,.32);
}

/* the two work cards drop the frosted glass for a neon line instead:
   TABORCO red, URBXNX blue. The line follows the slanted corners. */
.work-card{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background-color:rgba(4,10,17,.62);
  box-shadow:inset 0 0 0 1px rgba(249,47,49,.5);
}
.work-card:hover{
  box-shadow:inset 0 0 0 1px rgba(249,47,49,.95), inset 0 0 56px rgba(249,47,49,.14);
  transform:translateY(-5px);
}
.work-card + .work-card{ box-shadow:inset 0 0 0 1px rgba(76,201,240,.5) }
.work-card + .work-card:hover{
  box-shadow:inset 0 0 0 1px rgba(76,201,240,.95), inset 0 0 56px rgba(76,201,240,.14);
}

/* the screenshot reaches the card edge */
.mock{padding:0}

/* glass pushed further on everything that kept it */
.card,.fcard,.step,.shot,.addons,.form,.guarantee{
  background-color:rgba(13,24,34,.3);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  backdrop-filter:blur(22px) saturate(150%);
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

/* ============================================================
   GOLD ACCENTS + SERVICE CARDS MATCHED TO THE WORK CARDS
   Gold is a deliberate third accent, used only as a thin line:
   service card edges, the See All Services button, the footer.
   Red and blue stay the colours of the artwork.
   ============================================================ */
.card{
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background-color:rgba(4,10,17,.62);
  box-shadow:inset 0 0 0 1px rgba(214,175,86,.5);
}
.card:hover{
  box-shadow:inset 0 0 0 1px rgba(214,175,86,.95), inset 0 0 56px rgba(214,175,86,.12);
  transform:translateY(-5px);
}
.svc-foot .btn.red{ box-shadow:inset 0 0 0 1px rgba(214,175,86,.9), var(--glow-sm) }
footer{ border-top:1px solid rgba(214,175,86,.45) }

/* the client previews fill their panel corner to corner and brighten on hover */
.mock{ display:block; padding:0; overflow:hidden }
.laptop{ max-width:none; width:100%; height:100%; display:block }
.laptop img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:filter .35s, transform .35s;
}
.work-card:hover .laptop img{ transform:none; filter:brightness(1.14) saturate(1.06) }
@media(max-width:767px){ .laptop{ max-width:none } }

/* ============================================================
   HUD PANELS — shaped from TJ's concept mockup
   Chamfered corners on every card, a hairline in the card's own
   accent, corner brackets pulled inside the cut so they survive
   it, and outlined buttons that glow instead of filling.
   The glow uses drop-shadow, which follows the chamfer; a
   box-shadow would be clipped square by it.
   ============================================================ */
.card,.fcard,.step,.work-card,.shot,.addons,.form,.guarantee{
  --line:rgba(27,52,73,.95);
  --accent:rgba(249,47,49,.3);
  position:relative; border:0;
  clip-path:var(--chamfer);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  background-color:rgba(4,10,17,.74);
  box-shadow:inset 0 0 0 1px var(--line);
  filter:drop-shadow(0 0 10px rgba(4,10,17,.92));
  transition:box-shadow .3s, transform .3s, filter .3s;
}
.card{ --line:rgba(214,175,86,.6);  --accent:rgba(214,175,86,.45) }
.work-card{ --line:rgba(249,47,49,.65); --accent:rgba(249,47,49,.45) }
.work-card + .work-card{ --line:rgba(76,201,240,.65); --accent:rgba(76,201,240,.45) }

.card:hover,.fcard:hover,.step:hover,.work-card:hover{
  transform:translateY(-5px);
  box-shadow:inset 0 0 0 1px var(--line), inset 0 0 60px var(--accent);
  filter:drop-shadow(0 0 16px var(--accent));
}

/* brackets moved inside the cut corners so the chamfer cannot eat them */
.brk::before{ top:12px; left:12px; z-index:2 }
.brk::after{ bottom:20px; right:20px; z-index:2 }

/* the concept's card heading: small red label, second word in red */
.card .ceyebrow{
  display:block;font-family:var(--body);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin-bottom:8px;
}
.card h3 .hl{ color:var(--red) }
.card h3{ margin-top:10px }

/* buttons: outlined and glowing, not filled */
.btn.red{
  background:transparent;
  color:var(--red);
  clip-path:var(--chamfer-btn);
  box-shadow:inset 0 0 0 1px rgba(249,47,49,.9);
  filter:drop-shadow(0 0 5px rgba(249,47,49,.55)) drop-shadow(0 0 15px rgba(249,47,49,.3));
}
.btn.red:hover,.btn.red:focus-visible{
  background:rgba(249,47,49,.14);
  box-shadow:inset 0 0 0 1px var(--red);
  filter:drop-shadow(0 0 8px rgba(249,47,49,.85)) drop-shadow(0 0 24px rgba(249,47,49,.45));
  transform:translateY(-2px);
}
.svc-foot .btn.red{
  color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(214,175,86,.9);
  filter:drop-shadow(0 0 5px rgba(214,175,86,.5)) drop-shadow(0 0 15px rgba(214,175,86,.25));
}

/* ============================================================
   PROJECT PICKER + ADD-ON PANELS
   The tick boxes let a visitor say what they want before the
   first call, so an enquiry arrives quotable. Gold throughout,
   matching the add-ons it is drawn from.
   ============================================================ */
.picks{border:0;padding:0;margin:0}
.picks legend{
  padding:0;font-family:var(--body);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel);
}
.pick-group{
  display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin:20px 0 10px;
}
.pick-note{color:var(--steel);font-size:13px;margin:0 0 12px;max-width:560px}
.pick-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.field .pick{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:13px 16px;font-size:14px;line-height:1.3;
  /* .field label is more specific than .pick alone, so these are reset here */
  text-transform:none;letter-spacing:0;margin-bottom:0;color:var(--steel);
  background:rgba(4,10,17,.6);
  clip-path:var(--chamfer-btn);
  box-shadow:inset 0 0 0 1px rgba(214,175,86,.4);
  transition:box-shadow .25s, filter .25s, transform .25s;
}
.field .pick:hover{
  box-shadow:inset 0 0 0 1px rgba(214,175,86,.9);
  filter:drop-shadow(0 0 12px rgba(214,175,86,.35));
  transform:translateY(-2px);
}
.field .pick input{width:16px;height:16px;flex:none;accent-color:#D6AF56;cursor:pointer}
.field .pick input:checked + span{color:var(--cloud)}
.field .pick:has(input:checked){
  box-shadow:inset 0 0 0 1px var(--gold), inset 0 0 40px rgba(214,175,86,.18);
  filter:drop-shadow(0 0 14px rgba(214,175,86,.45));
}
.field .pick:focus-within{box-shadow:inset 0 0 0 2px var(--gold)}

/* the add-ons block and each add-on inside it get the gold card treatment */
.addons{ --line:rgba(214,175,86,.6); --accent:rgba(214,175,86,.45) }
.addons[open]{
  border:0;
  box-shadow:inset 0 0 0 1px rgba(214,175,86,.8), inset 0 0 70px rgba(214,175,86,.08);
}
.ao-item{
  position:relative;border-bottom:0;
  padding:22px 20px;margin-bottom:14px;
  background-color:rgba(4,10,17,.55);
  clip-path:var(--chamfer);
  box-shadow:inset 0 0 0 1px rgba(214,175,86,.42);
  transition:box-shadow .3s, filter .3s, transform .3s;
}
.ao-item:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(214,175,86,.95), inset 0 0 60px rgba(214,175,86,.14);
  filter:drop-shadow(0 0 16px rgba(214,175,86,.42));
}
.ao-item:last-child{margin-bottom:0}

/* ============================================================
   THE TRAVELLING STATION
   The sheet's artwork is its own sticky layer, moved by transform
   so the graphics chip slides it instead of the browser redrawing
   it. A viewport-locked background cannot move at all and forces a
   full repaint every frame, which is what made this page both
   motionless and laggy.
   margin-bottom:-100vh so the layer takes up no space in the flow.
   ============================================================ */
.sheet-art{
  position:sticky; top:0; height:100vh; margin-bottom:-100vh;
  z-index:0; pointer-events:none; overflow:hidden;
  /* ambient fill: a tiny pre-blurred copy of the artwork stretched across the
     window, so the sides glow in the station's own colours instead of black.
     Blurred in the file, not with CSS blur(), so scrolling costs nothing. */
  background:url('enter-gold-ambient.jpg') center / cover no-repeat;
}
/* the artwork is taller than the window, so there is somewhere to travel to */
.sheet-art-img{
  /* natural shape at full width: nothing is cropped left or right, and the
     layer is as tall as the artwork really is, so scrolling travels all of it.
     1920x3426 shown 1212 wide is a 0.63 downscale, which stays sharp. */
  position:absolute; top:0; left:30%; right:auto; width:40%;
  aspect-ratio:1920 / 3426;
  /* feather the sides so the sharp station melts into the ambient fill */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  background:url('enter-gold.jpg') top center / 100% auto no-repeat;
  will-change:transform;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
}
/* darkening and vignette stay still, sized to the window, so they never stretch
   with the moving artwork underneath them */
.sheet-art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 74% 66% at 50% 50%,
      rgba(4,10,17,0) 0%, rgba(4,10,17,.03) 56%, rgba(4,10,17,.4) 85%, rgba(4,10,17,.88) 100%),
    linear-gradient(180deg, rgba(4,10,17,.1) 0%, rgba(4,10,17,.22) 100%);
}

@media(prefers-reduced-motion:reduce){
  .sheet-art-img{ transform:none !important }
}

/* privacy page: a dark panel so long text stays readable over the photo */
.policy{background:rgba(5,6,10,.82);border:var(--edge);padding:32px;line-height:1.7}
.policy h2{font-size:20px;margin:28px 0 8px}
.policy ul{padding-left:20px}
.policy a{color:var(--red)}
@media(max-width:767px){ .policy{padding:20px} }

/* spam trap: off-screen, not display:none, so simple bots still fill it in */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   Contact form: two tiers (quick -> choice -> full -> thanks)
   ============================================================ */
.stage[hidden]{display:none}
.stage:focus{outline:none}
.stage-tag{margin-top:0;margin-bottom:22px}
.stage-title{font-family:var(--display);font-weight:400;font-size:clamp(24px,4vw,32px);line-height:1.15;color:var(--cloud);margin:0 0 14px;letter-spacing:.01em}
.stage .picks legend{margin-bottom:12px}
.stage .pick-note + .pick-list{margin-top:4px}
.stage-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
@media(max-width:767px){ .stage-actions .btn,.stage .btn{width:100%} }

/* Contact "What happens next": the chamfer cut into these because
   .side .step had no padding, so "01" read as "J1" and line ends were
   chopped. Keep the slanted corners and the card glow; the padding
   keeps the text clear of the cuts (16px top-left, 26px bottom-right). */
.side .step{
  padding:22px 26px 28px 24px; margin-bottom:14px;
  border:0; background-color:rgba(4,10,17,.74);
  /* same gold edge as the service cards; drop-shadow follows the chamfer */
  --line:rgba(214,175,86,.6); --accent:rgba(214,175,86,.45);
  box-shadow:inset 0 0 0 1px var(--line);
  filter:drop-shadow(0 0 8px rgba(214,175,86,.3));
}
.side .step:hover{transform:none; box-shadow:inset 0 0 0 1px rgba(214,175,86,.95), inset 0 0 56px rgba(214,175,86,.12); filter:drop-shadow(0 0 16px var(--accent))}
.side > h3{margin-bottom:20px}

/* contact choice screen: the "full questionnaire" button in gold,
   same outline and glow as the See All Services button */
.btn.red.gold{
  color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(214,175,86,.9);
  filter:drop-shadow(0 0 5px rgba(214,175,86,.5)) drop-shadow(0 0 15px rgba(214,175,86,.25));
}
.btn.red.gold:hover,.btn.red.gold:focus-visible{
  background:rgba(214,175,86,.12);
  box-shadow:inset 0 0 0 1px var(--gold);
  filter:drop-shadow(0 0 8px rgba(214,175,86,.8)) drop-shadow(0 0 24px rgba(214,175,86,.4));
}

/* contact thank-you ("Sent. One last step."): a chamfered box whose
   OUTLINE glows gold. The glow is a filter on the wrapper, and the
   chamfer lives on the two layers inside it, so the cut does not clip
   the glow away: ::before is the gold edge, ::after is the dark fill
   1px inside it. */
.stage[data-stage="thanks"]{
  position:relative;isolation:isolate;
  padding:30px 30px 34px;
  filter:drop-shadow(0 0 6px rgba(214,175,86,.55)) drop-shadow(0 0 16px rgba(214,175,86,.25));
}
.stage[data-stage="thanks"]::before,
.stage[data-stage="thanks"]::after{
  content:"";position:absolute;z-index:-1;clip-path:var(--chamfer);
}
.stage[data-stage="thanks"]::before{inset:0;background:rgba(214,175,86,.9)}
.stage[data-stage="thanks"]::after{inset:1px;background:#070e16}
@media(max-width:767px){ .stage[data-stage="thanks"]{padding:24px 20px 28px} }

/* thank-you screen: the call/text line under the booking button */
.thanks-call{margin:18px 0 0}
.thanks-call a{color:var(--cloud);border-bottom:1px solid var(--red);padding-bottom:2px}