/* ============================================================
   ULTIMATE PRINT LAB — premium 3D agency system
   Dark-grey base · magenta→violet signature gradient · halftone motif
   ============================================================ */
:root {
  /* color triplets */
  --base: 24,24,27;            /* #18181b dark grey body */
  --base-deep: 18,18,21;
  --surface: 35,35,41;         /* cards */
  --surface-2: 45,45,52;
  --line: 110,110,120;
  --white-color: 255,255,255;
  --black-color: 0,0,0;
  --silver: 178,178,188;
  --quick-silver: 150,150,160;
  --gold: 204,159,94;
  --magenta: 221,13,206;
  --violet: 84,13,206;
  --pink: 242,51,147;

  /* motion tokens */
  --transition: .25s;
  --spark: 1.8s;
  --cut: -1px;
  --active: 0;

  /* signature gradient */
  --grad: linear-gradient(213deg,#dd0dce -39.81%,#540dce 85.21%);
  --scrollbar-track-bg: var(--base-deep);
}

/* fluid em scaling — whole design zooms with root size */
html { font-size: 16px; scroll-behavior: smooth; }
@media (max-width:1680px){ html{font-size:14px} }
@media (max-width:1440px){ html{font-size:12.5px} }
@media (max-width:1280px){ html{font-size:11.5px} }
@media (max-width:992px) { html{font-size:10.5px} }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
body{
  background: rgba(var(--base),1);
  color: rgba(var(--white-color),1);
  font-family:'Inter',system-ui,sans-serif;
  font-size:1rem; line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; }

/* gradient scrollbar */
::-webkit-scrollbar{ width:.3125em; border-radius:3.125em; background-color:rgba(var(--scrollbar-track-bg),1); }
::-webkit-scrollbar-track{ box-shadow:inset 0 0 6px rgba(0,0,0,.3); border-radius:.625em; background-color:rgba(var(--scrollbar-track-bg),1); }
::-webkit-scrollbar-thumb{ background:var(--grad); border-radius:3.125em; }
::selection{ background:#dd0dce; color:#fff; }

/* ---------- typography ---------- */
h1,h2,h3,h4{ font-family:'Sora',sans-serif; line-height:1.12; font-weight:700; letter-spacing:-.02em; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:.95em; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(var(--silver),1);
}
.eyebrow::before{ content:""; width:2.2em; height:2px; background:var(--grad); border-radius:2px; }
.h-xl{ font-size:4.6em; }
.h-lg{ font-size:3.2em; }
.h-md{ font-size:1.45em; }
.lead{ color:rgba(var(--silver),1); max-width:46em; }
@media (max-width:768px){ .h-xl{font-size:3.1em} .h-lg{font-size:2.4em} }

/* animated gradient text — signature accent, one word per heading */
.text-gradient{
  background:linear-gradient(90deg,#dd0dce,#fff,#dd0dce,#fff);
  background-size:300% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:bgMove 3s linear infinite reverse;
  padding-right:2px;
}
@keyframes bgMove{ 0%{background-position:0 100%} to{background-position:100% 100%} }

/* ---------- layout ---------- */
.container{ width:min(100% - 4em, 87.5em); margin-inline:auto; }
.section{ position:relative; padding:7em 0; }
.section-head{ margin-bottom:3.5em; display:flex; flex-direction:column; gap:1em; }

/* halftone dot motif (print vernacular) */
.halftone{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:radial-gradient(rgba(var(--white-color),.13) 1.2px, transparent 1.3px);
  background-size:1.4em 1.4em;
  mask-image:radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 100%);
  -webkit-mask-image:radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 100%);
}

/* ============================================================
   REVEAL SYSTEM — .animate + data-delay (IntersectionObserver)
   ============================================================ */
.animate{ opacity:0; will-change:transform,opacity; }
.animate.fadein-Up{ transform:translate(0,100px); }
.animate.fadein-Down{ transform:translate(0,-100px); }
.animate.fadein-Left{ transform:translate(100px,0); }
.animate.fadein-Right{ transform:translate(-100px,0); }
@keyframes anim{ from{opacity:0} to{opacity:1; transform:translate(0,0)} }
@media (prefers-reduced-motion:reduce){
  .animate{ opacity:1!important; transform:none!important; animation:none!important; }
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ============================================================
   PAGE LOADER
   ============================================================ */
.loader-first{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1em;
  background:rgba(var(--base-deep),1);
  transition:opacity .6s ease-out, visibility .6s;
}
.loader-first .loader-mark{
  width:64px; height:64px; border-radius:50%;
  background:conic-gradient(from 0deg,#dd0dce,#540dce,#f23393,#dd0dce);
  mask:radial-gradient(farthest-side,transparent 58%,#000 60%);
  -webkit-mask:radial-gradient(farthest-side,transparent 58%,#000 60%);
  animation:rotate-icon 1.2s linear infinite;
}
@keyframes rotate-icon{ to{transform:rotate(360deg)} }
.loader-first .loader-txt{ color:#fff; font-size:1.1em; letter-spacing:.25em; text-transform:uppercase; }
.loader-first.hidden{ opacity:0; visibility:hidden; }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:1.4em 0;
}
.header--sticky{
  background:rgba(var(--base-deep),.72);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(var(--line),.25);
  padding:.8em 0;
}
.header__wrapper{ display:flex; align-items:center; justify-content:space-between; gap:2em; }
.header__logo{ display:flex; align-items:center; gap:.7em; font-family:'Sora'; font-weight:800; font-size:1.25em; letter-spacing:-.01em; }
.header__logo .mark{
  width:2em; height:2em; border-radius:.55em; background:var(--grad);
  display:grid; place-items:center; font-size:.9em; color:#fff;
  box-shadow:0 0 1.4em rgba(221,13,206,.45);
}
.main-menu{ display:flex; gap:2.4em; }
.main-menu a{
  position:relative; font-weight:500; color:rgba(var(--silver),1);
  transition:color .25s;
  padding:.4em 0;
}
.main-menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:center;
  transition:transform .3s ease; border-radius:2px;
}
.main-menu a:hover, .main-menu a.active{ color:#fff; }
.main-menu a:hover::after, .main-menu a.active::after{ transform:scaleX(1); }
.menuToggle{ display:none; background:none; border:0; cursor:pointer; width:2.6em; height:2.2em; position:relative; z-index:102; }
.menuToggle span{ position:absolute; left:.3em; right:.3em; height:2px; background:#fff; transition:.3s; }
.menuToggle span:nth-child(1){ top:.45em; } .menuToggle span:nth-child(2){ top:1.05em; } .menuToggle span:nth-child(3){ top:1.65em; }
.header--mobile--open .menuToggle span:nth-child(1){ top:1.05em; transform:rotate(45deg); }
.header--mobile--open .menuToggle span:nth-child(2){ opacity:0; }
.header--mobile--open .menuToggle span:nth-child(3){ top:1.05em; transform:rotate(-45deg); }
@media (max-width:992px){
  .menuToggle{ display:block; }
  .main-menu{
    position:fixed; inset:0; flex-direction:column; align-items:center; justify-content:center;
    gap:2em; font-size:1.8em; background:rgba(var(--base-deep),.96);
    backdrop-filter:blur(16px);
    opacity:0; visibility:hidden; transition:.35s; z-index:101;
  }
  .header--mobile--open .main-menu{ opacity:1; visibility:visible; }
  .header .btn-wrapper{ display:none; }
}

/* ============================================================
   SPARKLE BUTTON — conic-gradient rotating border CTA
   ============================================================ */
.btn-wrapper--sparkle-btn .primary-btn{
  position:relative; display:inline-flex; align-items:center; gap:.5em;
  padding:.8em 1.6em; border-radius:2.4375em; border:none; background:none; cursor:pointer;
}
.btn-wrapper--sparkle-btn .primary-btn::before{
  content:""; position:absolute; inset:-1px; z-index:-1;
  background:rgba(0,0,0,.1); border-radius:2.4375em;
  border:1px solid rgba(172,172,172,.3);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn-wrapper--sparkle-btn .primary-btn__bg{
  position:absolute; inset:0; border-radius:2.4375em; overflow:hidden;
  transition:all .3s ease-in-out;
}
.btn-wrapper--sparkle-btn .primary-btn__bg::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:rgba(var(--base-deep),1); border-radius:2.4375em;
  transition:all .3s ease-in-out;
}
.btn-wrapper--sparkle-btn .primary-btn:hover .primary-btn__bg::after{
  background:var(--grad); opacity:.95;
}
.btn-wrapper--sparkle-btn .primary-btn .spark{
  position:absolute; inset:var(--cut); border-radius:100px; overflow:hidden;
  mask:linear-gradient(white,transparent 50%);
  -webkit-mask:linear-gradient(white,transparent 50%);
  animation:flip calc(var(--spark) * 2) infinite steps(2,end);
}
.btn-wrapper--sparkle-btn .primary-btn .spark::before{
  content:""; position:absolute; width:200%; aspect-ratio:1; top:0; left:50%; z-index:-1;
  translate:-50% -15%; transform:rotate(-90deg);
  opacity:calc(var(--active) + .4);
  background:conic-gradient(from 0deg,transparent 0 340deg,#fff 360deg);
  transition:opacity var(--transition);
  animation:rotate var(--spark) linear infinite both;
}
.btn-wrapper--sparkle-btn .primary-btn .txt{ position:relative; z-index:2; font-size:1.05em; font-weight:600; }
@keyframes flip{ to{rotate:360deg} }
@keyframes rotate{ to{transform:rotate(90deg)} }

/* ghost / arrow buttons */
.btn-ghost{
  display:inline-flex; align-items:center; gap:.6em; padding:.8em 1.5em;
  border:1px solid rgba(var(--line),.5); border-radius:2.4375em; font-weight:600;
  transition:border-color .25s, background .25s;
}
.btn-ghost svg{ transition:transform .3s; }
.btn-ghost:hover{ border-color:#dd0dce; background:rgba(221,13,206,.08); }
.btn-ghost:hover svg{ transform:rotate(45deg); }

/* ============================================================
   HERO (full viewport, halftone+gradient ambience, scroll cue)
   ============================================================ */
.section--hero{
  position:relative; height:100vh; min-height:42em;
  display:flex; align-items:center; padding:0; z-index:1;
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; background:
  radial-gradient(42% 55% at 78% 22%, rgba(221,13,206,.22), transparent 70%),
  radial-gradient(50% 60% at 18% 80%, rgba(84,13,206,.28), transparent 70%),
  rgba(var(--base-deep),1);
}
.hero-bg .halftone{ opacity:.8; mask-image:radial-gradient(75% 75% at 60% 35%, #000, transparent); -webkit-mask-image:radial-gradient(75% 75% at 60% 35%, #000, transparent); }
/* drifting CMYK ink orbs */
.ink{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform; }
.ink--m{ width:26em; height:26em; background:#dd0dce; top:-8em; right:-6em; animation:drift 14s ease-in-out infinite alternate; }
.ink--v{ width:22em; height:22em; background:#540dce; bottom:-8em; left:-5em; animation:drift 18s ease-in-out infinite alternate-reverse; }
@keyframes drift{ from{transform:translate(0,0) scale(1)} to{transform:translate(3em,2.4em) scale(1.12)} }
.section--hero .container{ position:relative; z-index:2; display:flex; flex-direction:column; gap:1.6em; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:1em; margin-top:1.4em; }
.hero-badges li{
  display:flex; align-items:center; gap:.5em;
  font-size:.92em; color:rgba(var(--silver),1);
  padding:.55em 1.1em; border-radius:2em;
  border:1px solid rgba(var(--line),.35);
  background:rgba(var(--surface),.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.hero-badges li::before{ content:""; width:.5em; height:.5em; border-radius:50%; background:var(--grad); }
.scroll-cue{
  position:absolute; left:50%; bottom:2.2em; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4em;
  font-size:.8em; letter-spacing:.3em; text-transform:uppercase; color:rgba(var(--silver),1);
  z-index:3; cursor:pointer;
}
.scroll-cue .arr{ animation:jumpInfinite 1.6s infinite; }
@keyframes jumpInfinite{ 0%{margin-top:0} 50%{margin-top:14px} 100%{margin-top:0} }

/* ============================================================
   CURTAIN SECTION (fixed plane that GSAP slides into view)
   ============================================================ */
.section--what-we-do{
  width:100%; height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3em;
  background:rgba(var(--base-deep),1);
  text-align:center; overflow:hidden; padding:0;
}
@media (min-width:1201px){
  .section--what-we-do{ position:fixed; top:0; left:0; z-index:-1; }
  .curtain-spacer{ height:100vh; }          /* holds scroll space while curtain is fixed */
}
@media (max-width:1200px){
  .section--what-we-do{ position:relative; height:auto; padding:7em 0; }
  .curtain-spacer{ display:none; }
}
.section--what-we-do::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:38%;
  background:linear-gradient(180deg, rgba(var(--base),0) 0%, rgba(var(--base),1) 90%);
  pointer-events:none;
}
.section--what-we-do .section-bg{
  position:absolute; inset:0; opacity:.4; mix-blend-mode:lighten; transform:rotate(1.195deg);
  background:radial-gradient(35% 45% at 70% 30%, rgba(221,13,206,.3), transparent),
             radial-gradient(40% 50% at 25% 70%, rgba(84,13,206,.35), transparent);
}

/* press logo marquee inside curtain */
.marquee{ width:100%; overflow:hidden; }
.marquee .swiper-wrapper{ transition-timing-function:linear !important; align-items:center; }
.marquee .swiper-slide{ width:auto; }
.press-logo{
  font-family:'Sora'; font-weight:700; font-size:1.5em; white-space:nowrap;
  color:rgba(var(--quick-silver),.85); letter-spacing:.04em;
  display:flex; align-items:center; gap:.55em;
  transition:color .3s;
}
.press-logo i{ width:.6em; height:.6em; border-radius:50%; background:var(--grad); display:inline-block; }
.press-logo:hover{ color:#fff; }

/* ============================================================
   ZOOM-EXPLOSION LAYER + TESTIMONIALS (the pinned showstopper)
   ============================================================ */
.animate-bg-image{
  opacity:0; visibility:hidden;
  position:fixed; left:0; top:0; width:100%; height:100vh; z-index:-1;
  background:rgba(var(--base-deep),1);
  display:grid; place-items:center;
  will-change:transform,opacity;
}
.animate-bg-image .zoom-art{
  width:30em; height:30em; border-radius:50%;
  background:conic-gradient(from 90deg,#dd0dce,#540dce,#f23393,#dd0dce);
  mask:radial-gradient(farthest-side,transparent 30%,#000 32%, #000 60%, transparent 62%, transparent 78%, #000 80%);
  -webkit-mask:radial-gradient(farthest-side,transparent 30%,#000 32%, #000 60%, transparent 62%, transparent 78%, #000 80%);
  transform:scale(1); will-change:transform;
}
@media (max-width:1200px){ .animate-bg-image{ display:none; } }
.section--testimonials{ min-height:100vh; display:flex; align-items:center; }
.testimonials-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:4em; align-items:center; }
@media (max-width:992px){ .testimonials-grid{ grid-template-columns:1fr; } }
.t-card{
  background:rgba(var(--surface),.6); border:1px solid rgba(var(--line),.25);
  border-radius:1.4em; padding:2em;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.t-card + .t-card{ margin-top:1.4em; }
.t-card q{ font-size:1.08em; color:rgba(var(--white-color),.92); }
.t-card .who{ margin-top:1.1em; display:flex; align-items:center; gap:.9em; }
.t-card .who .av{
  width:3em; height:3em; border-radius:50%; background:var(--grad);
  display:grid; place-items:center; font-weight:700; font-family:'Sora';
}
.t-card .who small{ color:rgba(var(--silver),1); display:block; }

/* ============================================================
   CARDS — services / work
   ============================================================ */
.cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(18em,1fr)); gap:1.6em; }
.svc-card{
  position:relative; border-radius:1.3em; overflow:hidden;
  background:rgba(var(--surface),.55);
  border:1px solid rgba(var(--line),.22);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s;
}
.svc-card:hover{ transform:translateY(-.5em); border-color:rgba(221,13,206,.55); box-shadow:0 1.4em 3em rgba(0,0,0,.45), 0 0 2.5em rgba(221,13,206,.12); }
.svc-card .thumb{
  position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(70% 90% at var(--tx,70%) var(--ty,25%), rgba(221,13,206,.35), transparent 70%),
    radial-gradient(80% 90% at calc(100% - var(--tx,70%)) calc(100% - var(--ty,25%)), rgba(84,13,206,.4), transparent 70%),
    rgba(var(--surface-2),1);
}
.svc-card .thumb .halftone{ opacity:.65; mask-image:none; -webkit-mask-image:none; }
.svc-card .thumb .glyph{
  font-family:'Sora'; font-weight:800; font-size:3.4em; letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.35));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  transform:scale(1); transition:transform .5s cubic-bezier(.2,.7,.3,1); position:relative; z-index:1;
}
.svc-card:hover .thumb .glyph{ transform:scale(1.12) rotate(-2deg); }
.svc-card .body{ padding:1.4em 1.5em 1.6em; display:flex; flex-direction:column; gap:.5em; }
.svc-card .body h3{ font-size:1.18em; }
.svc-card .body p{ color:rgba(var(--silver),1); font-size:.95em; }
.svc-card .tagline{ font-size:.8em; letter-spacing:.14em; text-transform:uppercase; color:#e571dd; }

/* image clip-path wipe reveal */
.img__observer{ position:relative; }
.img__observer__simple .reveal-media{ clip-path:inset(0 100% 0 0); will-change:clip-path; border-radius:inherit; }
.img__observer__simple::before{
  content:""; position:absolute; width:0; height:100%; background:rgba(var(--gold),1);
  bottom:0; left:1px; z-index:2; border-radius:inherit; transition:width .5s ease;
}
.img__observer__simple.active .reveal-media{ transition:clip-path .5s; transition-delay:.5s; clip-path:inset(0 0 0 0); }
.img__observer__simple.active::before{ width:99.5%; transition:width .5s ease, opacity .3s .9s; opacity:0; }

/* ============================================================
   COUNTERS
   ============================================================ */
.counters{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11em,1fr)); gap:2em; }
.counter-num-box{ text-align:center; padding:1.6em 1em; border-radius:1.2em; border:1px solid rgba(var(--line),.2); background:rgba(var(--surface),.4); }
.counter-num-box .num{ font-family:'Sora'; font-weight:800; font-size:3em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.counter-num-box .counter-description{ color:rgba(var(--silver),1); font-size:.95em; margin-top:.3em; }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faqs-list{ max-width:50em; margin-inline:auto; display:flex; flex-direction:column; gap:1em; }
.accordion-wrapper{
  border:1px solid rgba(var(--line),.25); border-radius:1em;
  background:rgba(var(--surface),.45); overflow:hidden;
  transition:border-color .3s;
}
.accordion-wrapper--active{ border-color:rgba(221,13,206,.5); }
.accordion-wrapper .question{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:1em;
  padding:1.3em 1.5em; background:none; border:0; cursor:pointer; text-align:left;
  font-family:'Sora'; font-weight:600; font-size:1.08em;
}
.accordion-wrapper .question .icon{ flex:none; width:1.4em; height:1.4em; position:relative; transition:transform .3s; }
.accordion-wrapper .question .icon::before,
.accordion-wrapper .question .icon::after{ content:""; position:absolute; inset:0; margin:auto; background:#fff; border-radius:2px; }
.accordion-wrapper .question .icon::before{ width:100%; height:2px; }
.accordion-wrapper .question .icon::after{ width:2px; height:100%; }
.accordion-wrapper .question.opened .icon{ transform:rotate(45deg); }
.accordion-wrapper .answer{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.accordion-wrapper .answer p{ padding:0 1.5em 1.4em; color:rgba(var(--silver),1); }

/* ============================================================
   FILTER CHIPS (our work)
   ============================================================ */
.chips{ display:flex; flex-wrap:wrap; gap:.7em; }
.chip{
  padding:.55em 1.2em; border-radius:2em; cursor:pointer; border:1px solid rgba(var(--line),.35);
  background:rgba(var(--surface),.5); color:rgba(var(--silver),1); font-weight:500; font-size:.95em;
  transition:.25s;
}
.chip:hover{ color:#fff; border-color:rgba(221,13,206,.5); }
.chip.active{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 0 1.5em rgba(221,13,206,.35); }
.group-tabs{ display:flex; flex-wrap:wrap; gap:.7em; margin-bottom:1.4em; }

/* ============================================================
   CTA STRIP / FOOTER
   ============================================================ */
.cta-strip{
  border-radius:1.6em; padding:4em 3em; text-align:center; position:relative; overflow:hidden;
  background:radial-gradient(60% 120% at 50% 0%, rgba(221,13,206,.25), transparent 70%), rgba(var(--surface),.6);
  border:1px solid rgba(var(--line),.25);
  display:flex; flex-direction:column; align-items:center; gap:1.4em;
}
.footer{ border-top:1px solid rgba(var(--line),.2); padding:4.5em 0 2em; background:rgba(var(--base-deep),1); }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.4fr; gap:3em; margin-bottom:3em; }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }
.footer h4{ font-size:1.05em; margin-bottom:1em; }
.footer a{ color:rgba(var(--silver),1); display:inline-block; padding:.25em 0; transition:color .25s, transform .25s; }
.footer a:hover{ color:#fff; transform:translateX(.3em); }
.footer .fine{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1em; color:rgba(var(--quick-silver),1); font-size:.9em; border-top:1px solid rgba(var(--line),.15); padding-top:1.6em; }

/* social circle hover swap */
.social-icons{ display:flex; gap:.8em; margin-top:1.2em; }
.social-icons .icon{
  position:relative; width:2.7em; height:2.7em; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(var(--line),.4); overflow:hidden; isolation:isolate;
}
.social-icons .icon::after{
  content:""; position:absolute; inset:0; background:var(--grad); border-radius:50%;
  transform:scale(0); transition:transform .3s; z-index:-1;
}
.social-icons .icon:hover::after{ transform:scale(1); }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{ padding:11em 0 5em; position:relative; overflow:hidden; }
.page-hero .hero-bg{ opacity:.8; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:3.5em; align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.form-box{ background:rgba(var(--surface),.55); border:1px solid rgba(var(--line),.25); border-radius:1.4em; padding:2.4em; backdrop-filter:blur(12px); }
.input-container{ margin-bottom:1.3em; }
.input-container label{ display:block; font-size:.88em; letter-spacing:.08em; text-transform:uppercase; color:rgba(var(--silver),1); margin-bottom:.5em; }
.input-container .input{
  width:100%; padding:.95em 1.1em; border-radius:.8em; color:#fff;
  background:rgba(var(--base-deep),.7); border:1px solid rgba(var(--line),.35);
  transition:border-color .25s, box-shadow .25s; font:inherit;
}
.input-container .input:focus{ outline:none; border-color:#dd0dce; box-shadow:0 0 0 3px rgba(221,13,206,.18); }
textarea.input{ min-height:9em; resize:vertical; }
.info-tile{ display:flex; gap:1.1em; padding:1.4em; border-radius:1.1em; border:1px solid rgba(var(--line),.22); background:rgba(var(--surface),.45); margin-bottom:1.1em; }
.info-tile .ic{ flex:none; width:3em; height:3em; border-radius:.9em; background:var(--grad); display:grid; place-items:center; }
.info-tile small{ color:rgba(var(--silver),1); display:block; }

/* about timeline */
.flow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15em,1fr)); gap:1.6em; }
.flow .step{ padding:1.8em; border-radius:1.2em; border:1px solid rgba(var(--line),.22); background:rgba(var(--surface),.45); }
.flow .step b{ display:block; font-family:'Sora'; font-size:1.1em; margin:.8em 0 .4em; }
.flow .step .dot{ width:2.6em; height:2.6em; border-radius:.8em; background:var(--grad); display:grid; place-items:center; font-family:'Sora'; font-weight:700; }
.flow .step p{ color:rgba(var(--silver),1); font-size:.95em; }

/* work detail panel */
.work-section{ margin-bottom:3.5em; }
.work-section > h3{ font-size:1.5em; margin-bottom:1em; display:flex; align-items:center; gap:.6em; }
.work-section > h3::before{ content:""; width:.55em; height:.55em; border-radius:50%; background:var(--grad); }
.empty-note{ color:rgba(var(--silver),1); padding:3em 0; text-align:center; }

/* portrait warning */
#portrait-warning{
  display:none; position:fixed; inset:0; z-index:9998; background:rgba(var(--base-deep),.97);
  place-items:center; text-align:center; padding:2em; color:#fff;
}
#portrait-warning.show{ display:grid; }

/* ============================================================
   SCROLL-REACTIVE GRID BACKGROUND  (home page — Background2)
   Fixed #3d3d3d canvas + uploaded box-grid image in two
   parallax layers that drift / scale as the page scrolls.
   To extend to other pages: add .has-grid-bg to <body>
   and drop the .site-bg markup right after <body>.
   ============================================================ */
.page-home,
.has-grid-bg { background:#3d3d3d; }

.site-bg{
  position:fixed; inset:0; z-index:-10;
  background:#3d3d3d;               /* requested base colour */
  overflow:hidden; pointer-events:none;
}
.site-bg__layer{
  position:absolute; inset:0;
  background-image:url("../img/background-grid.jpg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  will-change:transform;
  transform:scale(1.15);            /* headroom so parallax never shows edges */
  backface-visibility:hidden;
}
/* back plate: larger, dimmer, slower — gives the boxes depth */
.site-bg__layer--back{
  transform:scale(1.32);
  opacity:.55;
  filter:brightness(.8) blur(1px);
}
/* front plate: the crisp box-grid the user uploaded */
.site-bg__layer--front{
  transform:scale(1.15);
  opacity:1;
}
/* soft vignette + #3d3d3d wash keeps text readable over the grid */
.site-bg__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(61,61,61,0) 0%, rgba(61,61,61,.14) 70%, rgba(61,61,61,.4) 100%),
    linear-gradient(180deg, rgba(61,61,61,.08) 0%, rgba(61,61,61,0) 35%, rgba(61,61,61,.24) 100%);
}

/* let the fixed grid read THROUGH the home-page sections that
   were previously fully opaque (so the boxes are visible everywhere) */
.page-home .section--hero .hero-bg{
  background:
    radial-gradient(42% 55% at 78% 22%, rgba(221,13,206,.20), transparent 70%),
    radial-gradient(50% 60% at 18% 80%, rgba(84,13,206,.24), transparent 70%),
    rgba(18,18,21,.14);
}
/* the curtain is a fixed plane GSAP slides up from yPercent:125.
   Match that start in CSS so it stays hidden until GSAP takes over —
   prevents it bleeding through the now-translucent hero at scroll top. */
@media (min-width:1201px){
  .page-home .section--what-we-do{ transform:translateY(125%); }
}
/* inner pages (services / work / about / contact) use .page-hero —
   make its backdrop translucent too so the grid reads through there */
.has-grid-bg .page-hero .hero-bg{
  opacity:1;
  background:
    radial-gradient(42% 55% at 78% 22%, rgba(221,13,206,.18), transparent 70%),
    radial-gradient(50% 60% at 18% 80%, rgba(84,13,206,.22), transparent 70%),
    rgba(18,18,21,.16);
}

@media (prefers-reduced-motion:reduce){
  .site-bg__layer--back{ animation:none; }
}
@media (max-width:768px){
  /* keep the grid, calm the depth on small screens */
  .site-bg__layer--back{ filter:brightness(.8); }
}