/* Apple-style design system: SF font stack, quiet neutrals, soft depth */

:root{
  --ink:#1D1D1F;
  --ink-2:#2C2C2E;
  --text:#1D1D1F;
  --text-dim:#6E6E73;
  --bg:#FFFFFF;             /* clean white */
  --bg-white:#F5F5F7;       /* soft raised surface */
  --surface-2:#EDEDF0;
  --line:rgba(0,0,0,0.08);
  --accent:#0071E3;         /* Apple blue — the only accent */
  --accent-dark:#0051A2;
  --glass:rgba(255,255,255,0.66);
  --glass-strong:rgba(255,255,255,0.86);
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.08);
  --shadow-lift: 0 2px 6px rgba(0,0,0,0.05), 0 24px 60px rgba(0,0,0,0.13);
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
}

/* ambient drifting light, very subtle (Apple keeps backgrounds quiet) */
.atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.atmo-blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:0.6;will-change:transform;}
.atmo-1{width:640px;height:640px;background:radial-gradient(circle,rgba(0,113,227,0.06),transparent 70%);top:-220px;left:-160px;animation:drift1 26s ease-in-out infinite;}
.atmo-2{width:560px;height:560px;background:radial-gradient(circle,rgba(180,200,220,0.25),transparent 70%);top:30%;right:-200px;animation:drift2 30s ease-in-out infinite;}
.atmo-3{width:600px;height:600px;background:radial-gradient(circle,rgba(200,220,200,0.28),transparent 70%);bottom:-220px;left:30%;animation:drift3 34s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0);}50%{transform:translate(50px,30px);}}
@keyframes drift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-40px,50px);}}
@keyframes drift3{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-40px);}}
@media(prefers-reduced-motion:reduce){.atmo-blob{animation:none;}}

a{color:inherit;text-decoration:none;}
.serif{font-weight:700;letter-spacing:-0.022em;} /* Apple display tracking */
.mono{font-family:'SF Mono', ui-monospace, 'Menlo', monospace;letter-spacing:0.02em;}
.wrap{max-width:1480px;margin:0 auto;padding:0 56px;position:relative;z-index:2;}
section .wrap{transition:transform .25s ease-out;will-change:transform;}
@media(prefers-reduced-motion:reduce){section .wrap{transition:none;transform:none !important;}}
@media(max-width:768px){.wrap{padding:0 22px;}}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.25,.1,.25,1),transform .8s cubic-bezier(.25,.1,.25,1);}
.reveal.in{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ---------- nav (Apple-style slim translucent bar) ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
}
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 56px;max-width:1480px;margin:0 auto;}
@media(max-width:768px){nav{padding:12px 22px;}}
.logo{display:flex;align-items:center;gap:10px;}
.logo span{font-size:13px;letter-spacing:0.12em;font-weight:600;color:var(--text);}
.logo small{display:block;font-size:9px;letter-spacing:0.18em;color:var(--text-dim);}
.navlinks{display:flex;gap:30px;align-items:center;}
.navlinks a{font-size:13px;color:var(--text-dim);transition:color .25s;position:relative;}
.navlinks a:hover, .navlinks a.active{color:var(--text);}
.navlinks a:not(.nav-cta){display:none;}
@media(min-width:860px){.navlinks a:not(.nav-cta){display:inline-block;}}
.navlinks a.nav-cta, .navlinks a.nav-cta:visited{
  background:var(--accent);color:#fff;padding:8px 18px;font-size:12.5px;font-weight:500;
  border-radius:100px;transition:background .25s;
}
.navlinks a.nav-cta:hover{background:var(--accent-dark);color:#fff;}

/* ---------- kicker ---------- */
.hud-label{
  font-size:12px;letter-spacing:0.14em;color:var(--text-dim);
  display:flex;align-items:center;gap:10px;text-transform:uppercase;font-weight:600;
}
.hud-label::before{content:"";width:22px;height:1px;background:var(--text-dim);}
.hud-dot{display:none;}

.bracket{position:relative;}
.bracket::after{content:"";position:absolute;inset:0;border-radius:inherit;border:1px solid rgba(0,0,0,0.06);pointer-events:none;}

/* ---------- glass panel (Apple frosted material) ---------- */
.panel{
  background:var(--glass);border:1px solid rgba(255,255,255,0.75);border-radius:var(--radius);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--shadow);
  transition:box-shadow .3s ease;
}
.panel:hover{box-shadow:var(--shadow-lift);}
.tilt{transition:transform .15s ease-out, box-shadow .3s ease;will-change:transform;}
@media(prefers-reduced-motion:reduce){.tilt{transition:none;}}

/* ---------- page header ---------- */
.page-head{padding:150px 0 56px;position:relative;}
.page-head .hud-label{margin-bottom:18px;}
.page-head h1{font-size:clamp(36px,5.2vw,60px);max-width:680px;line-height:1.07;font-weight:700;letter-spacing:-0.025em;color:var(--text);}
.page-head p{margin-top:16px;color:var(--text-dim);max-width:480px;font-size:16px;line-height:1.55;}

section{padding:90px 0;position:relative;}
@media(max-width:768px){section{padding:60px 0;}}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;gap:24px;flex-wrap:wrap;}
.section-title{font-size:clamp(26px,3.2vw,40px);max-width:520px;font-weight:700;letter-spacing:-0.022em;color:var(--text);}
.section-desc{max-width:320px;font-size:14.5px;color:var(--text-dim);}

/* ---------- buttons (Apple pill style) ---------- */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:100px;
  font-size:14px;font-weight:500;letter-spacing:0;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, background .25s ease, border-color .25s ease;
}
/* shine sweep that crosses the button on hover */
.btn::before{
  content:"";position:absolute;top:0;left:-120%;width:80%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);
  transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;
}
.btn:hover::before{left:130%;}
/* arrow inside a button slides right on hover */
.btn:hover .arrow, .nav-cta:hover .arrow{transform:translateX(4px);}
.arrow{display:inline-block;transition:transform .28s cubic-bezier(.34,1.56,.64,1);}
/* click feedback */
.btn:active{transform:scale(.96);transition:transform .1s ease;}

.btn-neon{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(0,113,227,0.28);}
.btn-neon:hover{background:var(--accent-dark);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,113,227,0.42);}
.btn-ghost{border:1px solid var(--line);color:var(--accent);background:transparent;}
.btn-ghost:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,0.08);}

/* nav Enquire pill: subtle pulse-ready + lift */
.navlinks a.nav-cta{position:relative;overflow:hidden;transition:background .25s ease, transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease;box-shadow:0 3px 12px rgba(0,113,227,0.25);}
.navlinks a.nav-cta::before{
  content:"";position:absolute;top:0;left:-120%;width:70%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);
  transform:skewX(-20deg);transition:left .6s ease;pointer-events:none;
}
.navlinks a.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,113,227,0.4);}
.navlinks a.nav-cta:hover::before{left:130%;}
.navlinks a.nav-cta:active{transform:scale(.95);}

/* ---------- illustrated scene helpers ---------- */
.scene{position:relative;}
.float-soft{animation:floatSoft 7s ease-in-out infinite;}
.float-soft.d1{animation-delay:1.2s;}
.float-soft.d2{animation-delay:2.6s;}
@keyframes floatSoft{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.spin-slow{animation:spinSlow 26s linear infinite;transform-origin:center;}
@keyframes spinSlow{to{transform:rotate(360deg);}}
.pulse-ring{animation:pulseRing 3.6s ease-in-out infinite;transform-origin:center;}
@keyframes pulseRing{0%,100%{opacity:0.35;}50%{opacity:0.9;}}
@media(prefers-reduced-motion:reduce){.float-soft,.spin-slow,.pulse-ring{animation:none;}}

footer{padding:32px 0;border-top:1px solid var(--line);position:relative;z-index:2;}
.foot-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-dim);flex-wrap:wrap;gap:12px;}

/* ============================================================
   MOBILE RESPONSIVE — comprehensive
   ============================================================ */
@media(max-width:860px){
  /* grids collapse */
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
  .services-grid{grid-template-columns:1fr !important;}
  /* panel padding shrink */
  .panel{padding:24px !important;}
}

@media(max-width:560px){
  .grid-4, .grid-3{grid-template-columns:1fr !important;}
  /* hero text scale */
  .hero-grid{gap:24px !important;}
  section{padding:48px 0 !important;}
  /* section head stacks */
  .section-head{flex-direction:column;align-items:flex-start !important;gap:16px;}
  .section-head .btn{align-self:flex-start;}
  /* stats / footer wrap nicely */
  .foot-row{flex-direction:column;text-align:center;}
}

/* keep the fixed 3D canvas subtle on small screens (perf + legibility) */
@media(max-width:860px){
  #studio3d{opacity:0.55;}
}

/* section wrap 3D tilt off on touch (feels janky on mobile) */
@media(hover:none){
  section .wrap{transform:none !important;}
  .tilt{transform:none !important;}
}

/* make hero illustration not eat vertical space on phones */
@media(max-width:560px){
  .scene{min-height:260px !important;}
  #hero3d{height:280px !important;}
}

/* respect reduced-motion for buttons */
@media(prefers-reduced-motion:reduce){
  .btn::before, .navlinks a.nav-cta::before{display:none;}
  .btn:hover, .btn-neon:hover, .btn-ghost:hover, .navlinks a.nav-cta:hover{transform:none;}
  .btn:active, .navlinks a.nav-cta:active{transform:none;}
  .arrow{transition:none;}
}

/* ============================================================
   INTERACTIVE HOVER ANIMATIONS — logo, nav links, grid cards
   ============================================================ */

/* 1) LOGO — clickable, gentle lift + mark rotate on hover */
.logo{text-decoration:none;transition:transform .3s cubic-bezier(.34,1.56,.64,1);cursor:pointer;}
.logo svg{transition:transform .5s cubic-bezier(.34,1.56,.64,1);}
.logo:hover{transform:translateY(-1px);}
.logo:hover svg{transform:rotate(-8deg) scale(1.12);}
.logo span{transition:color .25s ease;}
.logo:hover span{color:var(--accent);}

/* 2) NAV LINKS — animated underline sweep from left */
.navlinks a:not(.nav-cta){padding-bottom:3px;}
.navlinks a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:var(--accent);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.65,0,.35,1);
}
.navlinks a:not(.nav-cta):hover::after{transform:scaleX(1);}
.navlinks a:not(.nav-cta).active::after{transform:scaleX(1);}
.navlinks a:not(.nav-cta):hover{color:var(--accent);}

/* 3) GRID CARDS — lift, shadow, accent ring on hover */
.frame{transition:transform .38s cubic-bezier(.34,1.4,.5,1), box-shadow .38s ease;}
.frame:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.18);}

.panel{transition:transform .38s cubic-bezier(.34,1.4,.5,1), box-shadow .38s ease, border-color .3s ease;}
.panel:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow-lift);}

/* bracket cards (home preview + service tiles): lift + zoom their bg image */
.bracket{transition:transform .4s cubic-bezier(.34,1.4,.5,1), box-shadow .4s ease;overflow:hidden;}
.bracket:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 18px 42px rgba(0,0,0,0.2);}
.bracket::after{transition:border-color .3s ease;}
.bracket:hover::after{border-color:var(--accent);}

@media(prefers-reduced-motion:reduce){
  .logo, .logo svg, .frame, .panel, .bracket{transition:none;}
  .logo:hover, .logo:hover svg, .frame:hover, .panel:hover, .bracket:hover{transform:none;}
  .navlinks a:not(.nav-cta)::after{transition:none;}
}