/*
Theme Name: Edge Tech Digital
Theme URI: https://edgetechdigital.com.au
Author: Edge Tech Digital
Description: Custom theme for Edge Tech Digital - creative digital agency. Built from the v3 redesign.
Version: 1.0.2
Requires PHP: 8.0
License: Proprietary
Text Domain: edgetech
*/

:root{
  --paper:#F2ECE2;
  --paper-dim:#E9E0CF;
  --ink:#12100C;
  --violet:#5e22d6;
  --violet-dark:#4318a8;
  --green:#3aa63b;
  --lime:#B8F14C;
  --muted:#6E675B;
  --line:rgba(18,16,12,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;letter-spacing:-.03em}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--violet);outline-offset:3px;border-radius:4px}
.cta :focus-visible,footer .socials :focus-visible{outline-color:var(--lime)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 22px;border-radius:0 0 12px 0;font-weight:600}
.skip:focus{left:0}
.wrap{max-width:1240px;margin:0 auto;padding:0 5vw}

/* grain overlay — tactility, kills the "flat template" feel */
body::after{
  content:"";position:fixed;inset:0;z-index:999;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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .3s,border .3s}
header.scrolled{background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:18px 5vw;max-width:1320px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.1rem}
.nav ul{display:flex;gap:30px;list-style:none;font-size:.9rem;font-weight:500}
.nav ul a{position:relative;overflow:hidden;display:inline-block;height:1.45em}
.nav ul a i{font-style:normal;display:block;transition:transform .3s cubic-bezier(.7,0,.3,1)}
.nav ul a i::after{content:attr(data-t);position:absolute;left:0;top:100%;color:var(--violet)}
.nav ul a:hover i{transform:translateY(-100%)}
.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;
  font-weight:600;font-size:.95rem;padding:13px 26px;border-radius:999px;
  border:1.5px solid var(--ink);cursor:pointer;background:transparent;color:var(--ink);
  transition:background .25s,color .25s,border-color .25s;will-change:transform;
}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--violet);border-color:var(--violet)}
.btn.vio{background:var(--violet);border-color:var(--violet);color:#fff}
.btn.vio:hover{background:var(--ink);border-color:var(--ink)}
@media(max-width:860px){.nav ul{display:none}}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:70px}
.hero-inner{display:grid;grid-template-columns:1.25fr .75fr;gap:4vw;align-items:center;width:100%}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr}.scene{order:-1;margin:0 auto}}
.kicker{
  display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:26px;
  clip-path:inset(0 100% 0 0);animation:unclip .7s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
.kicker::before{content:"";width:36px;height:2px;background:var(--green)}
@keyframes unclip{to{clip-path:inset(0 0 0 0)}}
.hero h1{font-size:clamp(3rem,7.5vw,6.2rem);line-height:.98;font-weight:700}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .line span{
  display:inline-block;transform:translateY(115%) rotate(3deg);filter:blur(6px);
  animation:rise .9s cubic-bezier(.2,.7,.2,1) .3s forwards;transform-origin:left bottom;
}
.hero h1 .line:nth-child(2) span{animation-delay:.44s}
.hero h1 .line:nth-child(3) span{animation-delay:.58s}
@keyframes rise{to{transform:translateY(0) rotate(0);filter:blur(0)}}
.hero h1 .v{color:var(--violet)}
.hero h1 .g{color:var(--green)}
.hero h1 .outline{color:transparent;-webkit-text-stroke:2px var(--ink)}
/* marker sweep behind "impossible" */
.hl{position:relative;z-index:1;white-space:nowrap}
.hl::after{
  content:"";position:absolute;left:-.08em;right:-.08em;bottom:.02em;height:.42em;z-index:-1;
  background:var(--lime);transform:scaleX(0);transform-origin:left center;
  animation:sweep .55s cubic-bezier(.2,.7,.2,1) 1.35s forwards;
}
@keyframes sweep{to{transform:scaleX(1)}}
.hero p{max-width:46ch;font-size:1.12rem;color:var(--muted);margin:30px 0 38px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
/* staggered entrance for sub + CTAs + cube */
.fade-up{opacity:0;transform:translateY(26px);animation:fup .8s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.85s}.d2{animation-delay:1s}.d3{animation-delay:.6s}
@keyframes fup{to{opacity:1;transform:translateY(0)}}
/* floating cubes drifting in the hero background */
.float-cube{position:absolute;z-index:1;opacity:.9;pointer-events:none;animation:floaty 9s ease-in-out infinite}
.fc1{top:16%;right:44%;animation-delay:0s}
.fc2{bottom:22%;right:8%;animation-duration:11s;animation-delay:1.2s}
.fc3{top:12%;right:6%;animation-duration:7.5s;animation-delay:.6s;opacity:.55}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-26px) rotate(6deg)}}
@media(max-width:900px){.fc1,.fc3{display:none}}
.hero-ghost{
  position:absolute;bottom:-2vw;left:0;right:0;z-index:0;pointer-events:none;
  font-family:'Space Grotesk',sans-serif;font-weight:700;white-space:nowrap;
  font-size:clamp(6rem,16vw,15rem);line-height:1;color:transparent;
  -webkit-text-stroke:1.5px rgba(18,16,12,.10);letter-spacing:-.04em;
}
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px;z-index:3}
.scroll-hint::after{content:"";width:1.5px;height:34px;background:linear-gradient(var(--ink),transparent);animation:drip 1.6s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- hero mark: oversized logo, exploded-view on hover ---------- */
.scene{width:min(380px,62vw);position:relative;z-index:2}
.mark{
  width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 34px 44px rgba(18,16,12,.22));
  animation:markfloat 7s ease-in-out infinite;
}
@keyframes markfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.mark polygon{transition:translate .5s cubic-bezier(.2,.7,.2,1)}
.scene:hover .exp-top{translate:0 -14px}
.scene:hover .exp-left{translate:-12px 8px}
.scene:hover .exp-right{translate:12px 8px}
.mark .seam{opacity:0;transition:opacity .5s}
.scene:hover .seam{opacity:1}

/* ---------- diagonal marquee ---------- */
.mstrip{position:relative;padding:90px 0;overflow:hidden}
.mrow{display:flex;gap:0;width:max-content;padding:14px 0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.mrow-a{transform:rotate(-2.5deg) translateX(-2%);background:var(--violet);color:#fff;position:relative;z-index:2;box-shadow:0 10px 30px rgba(18,16,12,.25)}
.mrow-b{transform:rotate(1.8deg) translateX(-2%);background:var(--ink);color:var(--paper);margin-top:-14px;position:relative;z-index:1;opacity:.92}
.mtrack{display:flex;width:max-content;animation:mar 26s linear infinite}
.mrow-b .mtrack{animation-direction:reverse;animation-duration:30s}
.mtrack span{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.4rem;white-space:nowrap;padding:0 28px;display:flex;align-items:center;gap:28px}
.mtrack .cu{width:16px;height:18px;flex:none}
@keyframes mar{to{transform:translateX(-50%)}}

/* ---------- work: sticky stacking deck ---------- */
.work-head{padding:40px 0 60px}
.work-head h2{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1;font-weight:700}
.work-head h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.work-head .sub{color:var(--muted);max-width:46ch;margin-top:18px}
.ftabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.ftab{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.88rem;
  padding:11px 22px;border-radius:999px;border:1.5px solid var(--ink);
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .25s,color .25s;
}
.ftab:hover:not(.active){background:rgba(94,34,214,.09)}
.ftab.active{background:var(--ink);color:var(--paper)}
.deck{position:relative}
.deck-card{
  position:sticky;top:90px;margin-bottom:5vh;
  border-radius:22px;overflow:hidden;border:1.5px solid var(--ink);
  min-height:72vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,4vw,56px);color:#fff;
  box-shadow:0 -14px 40px rgba(18,16,12,.18);
  will-change:transform;
}
.deck-card .idx{position:absolute;top:26px;left:clamp(24px,4vw,56px);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;opacity:.7}
.deck-card .url{position:absolute;top:22px;right:clamp(24px,4vw,56px);font-size:.75rem;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:6px 16px;border-radius:999px;backdrop-filter:blur(6px)}
.deck-card .huge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
  font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:-.04em;
  font-size:clamp(4rem,13vw,11rem);opacity:.16;white-space:nowrap;pointer-events:none;
}
.deck-card .tag{display:inline-block;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);margin-bottom:14px}
.deck-card .tag.concept{border:1.5px dashed rgba(255,255,255,.55);background:transparent}
.deck-card h3{font-size:clamp(1.8rem,4vw,3.2rem);font-weight:700;line-height:1.05}
.deck-card .meta{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.deck-card .go{width:58px;height:58px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;font-size:1.3rem;transition:background .25s,transform .25s;flex:none}
.deck-card:hover .go{background:#fff;color:var(--ink);transform:rotate(-45deg)}
.dc1{background:linear-gradient(140deg,#170f33 10%,#4318a8 55%,#5e22d6)}
.dc2{background:linear-gradient(140deg,#0d1a10 10%,#1c6b31 60%,#3aa63b)}
.dc3{background:linear-gradient(140deg,#26190b 10%,#94510f 60%,#DB7A1B)}
.dc4{background:var(--ink)}
.dc4 h3,.dc4 .idx{color:var(--lime)}
.dc5{background:linear-gradient(140deg,#0c1522 10%,#173a5e 60%,#2a6f97)}

/* ---------- big number case ---------- */
.case{background:var(--ink);color:var(--paper);clip-path:polygon(0 4vw,100% 0,100% 100%,0 100%);margin-top:-4vw;position:relative;z-index:5}
.case .wrap{padding:calc(8vw + 60px) 5vw 120px;display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;max-width:1240px}
@media(max-width:860px){.case .wrap{grid-template-columns:1fr}}
.case .metric{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(5rem,13vw,10rem);line-height:.9;color:var(--lime)}
.case .metric small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:1rem;color:rgba(242,236,226,.65);margin-top:18px;max-width:30ch;line-height:1.5}
.case blockquote{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.45;font-weight:500}
.case blockquote::before{content:"“";display:block;font-size:5rem;line-height:.6;color:var(--violet);margin-bottom:18px}
.case cite{display:block;margin-top:24px;font-style:normal;font-size:.9rem;color:rgba(242,236,226,.55)}
.sample-note{font-size:.7rem;color:rgba(242,236,226,.4);margin-top:16px;letter-spacing:.05em}

/* ---------- services: cursor-preview list ---------- */
.svc{padding:120px 0 100px;position:relative}
.svc h2{font-size:clamp(2.6rem,6vw,4.6rem);margin-bottom:60px}
.svc h2 em{font-style:normal;color:var(--violet)}
.svc-row{
  display:grid;grid-template-columns:70px 1fr auto;gap:26px;align-items:center;
  padding:36px 6px;border-top:1.5px solid var(--ink);position:relative;
  transition:padding .3s;
}
.svc-row:last-of-type{border-bottom:1.5px solid var(--ink)}
.svc-row:hover{padding-left:26px}
.svc-row .num{font-family:'Space Grotesk',sans-serif;color:var(--muted);font-size:.95rem}
.svc-row h3{font-size:clamp(1.5rem,3.4vw,2.6rem);font-weight:700;transition:color .25s}
.svc-row:hover h3{color:var(--violet)}
.svc-row .pill{font-size:.75rem;color:var(--muted);letter-spacing:.05em}
@media(max-width:700px){.svc-row{grid-template-columns:48px 1fr}.svc-row .pill{display:none}}
.preview{
  position:fixed;z-index:40;width:300px;border-radius:18px;pointer-events:none;
  padding:22px 24px;color:#fff;
  opacity:0;transform:scale(.85) rotate(-3deg);transition:opacity .25s,transform .25s;
  border:1.5px solid var(--ink);box-shadow:0 22px 55px rgba(18,16,12,.32);
}
.preview.on{opacity:1;transform:scale(1) rotate(-3deg)}
.preview b{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:-.01em;display:block;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.25)}
.preview ul{list-style:none;display:grid;gap:7px;font-size:.84rem;font-weight:500}
.preview li{display:flex;align-items:center;gap:9px}
.preview li::before{content:"✺";font-size:.62rem;opacity:.75}

/* ---------- stats: editorial number band ---------- */
.stats{padding:0 0 120px}
.stats .kicker{margin-bottom:34px}
.statband{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);display:grid;grid-template-columns:repeat(4,1fr)}
.stat{
  padding:56px 34px 48px;border-right:1.5px solid var(--ink);position:relative;overflow:hidden;
  transition:background .35s,color .35s;cursor:default;
}
.stat:last-child{border-right:0}
.stat b{
  font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:.95;display:block;
  font-size:clamp(3.2rem,6.5vw,5.6rem);letter-spacing:-.04em;
}
.stat b .sfx{color:inherit}
.stat .lbl{
  margin-top:16px;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:9px;transition:color .35s;
}
.stat .lbl::before{content:"✺";font-size:.8rem}
.stat .ghost{
  position:absolute;right:-8px;bottom:-26px;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:7rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(18,16,12,.10);
  pointer-events:none;transition:-webkit-text-stroke .35s;
}
.stat:hover{color:#fff}
.stat:hover .lbl{color:rgba(255,255,255,.85)}
.stat:hover .ghost{-webkit-text-stroke:1px rgba(255,255,255,.18)}
.stat:nth-child(1):hover{background:var(--violet)}
.stat:nth-child(2):hover{background:var(--green)}
.stat:nth-child(3):hover{background:var(--ink)}
.stat:nth-child(3):hover b{color:var(--lime)}
.stat:nth-child(4):hover{background:var(--violet-dark)}
@media(max-width:860px){
  .statband{grid-template-columns:1fr 1fr}
  .stat{padding:36px 24px 30px}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1.5px solid var(--ink)}
}

/* ---------- journal ---------- */
.journal{padding:0 0 130px}
.jhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:50px;flex-wrap:wrap}
.jhead h2{font-size:clamp(2.4rem,5.5vw,4rem);line-height:1.02;font-weight:700}
.jhead h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.jall{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.95rem;border-bottom:1.5px solid var(--ink);padding-bottom:4px;transition:color .25s,border-color .25s}
.jall:hover{color:var(--violet);border-color:var(--violet)}
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.jgrid{grid-template-columns:1fr}}
.jcard{
  border:1.5px solid var(--ink);border-radius:18px;padding:32px 30px;
  display:flex;flex-direction:column;gap:16px;background:#FBF8F1;
  transition:transform .25s,box-shadow .25s;
}
.jcard:hover{transform:translateY(-7px);box-shadow:0 18px 44px rgba(18,16,12,.15)}
.jtag{font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--violet)}
.jcard h3{font-size:1.32rem;line-height:1.3;font-weight:700}
.jcard p{color:var(--muted);font-size:.93rem;flex:1}
.jfoot{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted)}
.jgo{width:42px;height:42px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:1rem;transition:background .25s,color .25s,border-color .25s,transform .25s;flex:none}
.jcard:hover .jgo{background:var(--violet);border-color:var(--violet);color:#fff;transform:rotate(-45deg)}
.jcard.featured{background:var(--violet);border-color:var(--violet);color:#fff}
.jcard.featured .jtag{color:var(--lime)}
.jcard.featured p,.jcard.featured .jfoot{color:rgba(255,255,255,.72)}
.jcard.featured .jgo{border-color:rgba(255,255,255,.7);color:#fff}
.jcard.featured:hover .jgo{background:var(--lime);border-color:var(--lime);color:var(--ink)}

/* ---------- CTA: the call ---------- */
.cta{
  background:var(--ink);color:var(--paper);
  clip-path:polygon(0 0,100% 3vw,100% 100%,0 100%);
  padding:calc(3vw + 110px) 0 130px;position:relative;overflow:hidden;
}
.cta .glow{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(620px circle at var(--mx,72%) var(--my,35%),rgba(94,34,214,.45),transparent 65%);
}
.cta .wrap{position:relative;z-index:2}
.avail{
  display:inline-flex;align-items:center;gap:11px;
  border:1px solid rgba(242,236,226,.3);border-radius:999px;padding:10px 20px;
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,236,226,.85);
}
.avail i{width:9px;height:9px;border-radius:50%;background:var(--green);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(58,166,59,.65)}70%{box-shadow:0 0 0 13px rgba(58,166,59,0)}100%{box-shadow:0 0 0 0 rgba(58,166,59,0)}}
.cta h2{font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.08;font-weight:700;margin:38px 0 14px;max-width:22ch}
.cta h2 em{font-style:normal;color:var(--lime)}
.cta .sub2{color:rgba(242,236,226,.65);font-size:1.08rem;max-width:48ch}
.cta-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:5vw;align-items:start}
@media(max-width:960px){.cta-grid{grid-template-columns:1fr}}
.bigcall{
  display:block;width:max-content;max-width:100%;
  font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1;letter-spacing:-.03em;
  font-size:clamp(2.6rem,5.5vw,5.2rem);margin:48px 0 12px;
  color:transparent;-webkit-text-stroke:2.5px var(--paper);
  transition:color .35s,-webkit-text-stroke-color .35s,transform .35s;
}
/* callback form */
.cbform{
  background:rgba(242,236,226,.05);border:1px solid rgba(242,236,226,.22);
  border-radius:22px;padding:34px 32px;backdrop-filter:blur(6px);
}
.cbform h3{font-size:1.35rem;font-weight:700;margin-bottom:6px}
.cbform .note{font-size:.88rem;color:rgba(242,236,226,.6);margin-bottom:26px}
.cbform label{display:block;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,236,226,.55);margin:0 0 8px}
.cbform input,.cbform select{
  width:100%;background:transparent;border:0;border-bottom:1.5px solid rgba(242,236,226,.3);
  color:var(--paper);font-family:'Inter',sans-serif;font-size:1rem;padding:8px 2px 12px;
  margin-bottom:24px;outline:none;transition:border-color .25s;border-radius:0;
}
.cbform input:focus,.cbform select:focus{border-color:var(--lime)}
.cbform select{appearance:none;cursor:pointer}
.cbform select option{background:var(--ink);color:var(--paper)}
.cbform button{
  width:100%;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.02rem;
  background:var(--lime);color:var(--ink);border:0;border-radius:999px;padding:16px 28px;
  cursor:pointer;transition:background .25s,transform .2s;
}
.cbform button:hover{background:#fff;transform:translateY(-2px)}
.cbform .ok{display:none;text-align:center;padding:34px 8px}
.cbform .ok b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.3rem;color:var(--lime);margin-bottom:8px}
.cbform .ok span{font-size:.92rem;color:rgba(242,236,226,.7)}
.cbform.sent form{display:none}
.cbform.sent .ok{display:block}
.bigcall:hover{color:var(--lime);-webkit-text-stroke-color:var(--lime);transform:translateX(10px)}
.callhint{display:flex;align-items:center;gap:12px;color:rgba(242,236,226,.55);font-size:.9rem}
.callhint::before{content:"→";color:var(--lime);font-size:1.1rem}
.cta-alt{margin-top:56px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:.95rem;color:rgba(242,236,226,.7)}
.cta-alt a{border-bottom:1.5px solid rgba(242,236,226,.35);padding-bottom:3px;transition:color .25s,border-color .25s}
.cta-alt a:hover{color:var(--lime);border-color:var(--lime)}
.cta .cube-mark{position:absolute;right:-70px;bottom:-90px;opacity:.14;z-index:1;pointer-events:none}

/* ---------- footer (replicated from live site) ---------- */
footer{border-top:2px solid var(--ink);padding:70px 0 40px;background:var(--paper);color:var(--ink);font-family:'Space Grotesk',system-ui,sans-serif}
.foot-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:40px}
.foot-big{font-size:clamp(40px,6.5vw,100px);font-weight:700;letter-spacing:-.04em;line-height:.9;flex:0 1 auto}
.foot-links{display:flex;gap:clamp(28px,4vw,60px);flex-wrap:wrap;margin-left:auto;justify-content:flex-end;text-align:left}
@media(max-width:760px){.foot-links{margin-left:0;justify-content:flex-start}}
.foot-links h4{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:700}
.foot-links a{display:block;margin-bottom:9px;font-weight:600;font-size:16px}
.foot-links a:hover{color:var(--violet)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-top:60px;color:var(--muted);font-size:14px}
.socials{display:flex;gap:12px;align-items:center}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:border-color .25s,color .25s}
.socials a:hover{border-color:var(--violet);color:var(--violet)}
.socials svg{width:16px;height:16px}

/* ---------- reveal ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- full-bleed work deck ---------- */
.wrap.deck{max-width:none;padding:0 clamp(8px,1.2vw,18px)}
.deck-card{border-radius:16px;min-height:86vh;padding:clamp(28px,4vw,64px) clamp(24px,5vw,80px)}
.deck-card .idx{left:clamp(24px,5vw,80px)}
.deck-card .meta h3{font-size:clamp(1.9rem,3.2vw,3rem)}

/* ---------- framed screenshot inside deck cards ---------- */
.deck-card .screen{
  position:absolute;right:clamp(14px,4vw,56px);top:44%;
  transform:translateY(-50%) rotate(1.5deg);
  width:min(56%,620px);border-radius:12px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.16);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:2;
}
.deck-card:hover .screen{transform:translateY(-52%) rotate(0) scale(1.015)}
.screen .bar{display:flex;gap:6px;align-items:center;background:#1d1a16;padding:10px 14px}
.screen .bar i{width:9px;height:9px;border-radius:50%}
.screen .bar i:nth-child(1){background:#e0655a}
.screen .bar i:nth-child(2){background:#e0a23f}
.screen .bar i:nth-child(3){background:#58b463}
.screen .bar em{font-style:normal;font-size:.68rem;color:#9c948a;margin-left:10px;font-family:'Inter',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.screen img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#26221c}
.deck-card .meta{position:relative;z-index:3;max-width:44%}
@media(max-width:820px){
  .deck-card{min-height:auto;padding-top:72px}
  .deck-card .screen{position:relative;width:100%;right:auto;top:auto;transform:none;margin:0 0 22px}
  .deck-card .meta{max-width:100%}
}

/* ---------- see all work button ---------- */
.work-more{display:flex;justify-content:center;margin-top:56px}
.work-more .btn{font-size:1.05rem;padding:16px 36px}

/* ---------- work page head ---------- */
.workpage-head{padding:160px 0 20px}
.workpage-head h1{font-size:clamp(2.8rem,7vw,5.4rem);line-height:1;font-weight:700}
.workpage-head h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.workpage-head p{color:var(--muted);max-width:52ch;margin-top:20px}

@media(prefers-reduced-motion:reduce){
  .mtrack{animation:none}
  .hero h1 .line span{animation:none;transform:none;filter:none}
  .kicker{animation:none;clip-path:none}
  .fade-up{animation:none;opacity:1;transform:none}
  .hl::after{animation:none;transform:scaleX(1)}
  .float-cube{animation:none}
  .mark{animation:none}
  .scroll-hint::after{animation:none}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
}