/* =========================================
   MEDIA CROWD — Main Stylesheet v1.1
   ========================================= */

/* ─── Custom Properties ───────────────────────── */
:root {
  --lime:         #C5FF00;
  --lime-dk:      #2E8A00;
  --dark:         #0a0a0a;
  --mid:          #141414;
  --light:        #F5F4EE;
  --light-border: rgba(0,0,0,0.09);
  --dark-border:  rgba(255,255,255,0.08);
}

/* ─── Reset ───────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth }
body {
  font-family:'Montserrat',sans-serif;
  background:#0a0a0a; color:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video { display:block; max-width:100%; height:auto }
a { text-decoration:none; color:inherit }
ul { list-style:none }
button,input,textarea,select { font:inherit }
button { cursor:pointer; border:none; background:none }

/* ─── Logo ────────────────────────────────────── */
.mc-logo { display:inline-flex; flex-direction:column; line-height:0.87; gap:2px }
.mc-line { font-size:1.9rem; font-weight:900; letter-spacing:-0.03em; color:#fff; transition:color .35s ease; display:flex; align-items:center }
.mc-gem  { height:0.9em; width:auto; display:inline-block; vertical-align:-0.07em; margin:0 0.04em; flex-shrink:0 }
.nav__uploaded-logo  { height:44px; width:auto }
.footer__uploaded-logo { height:32px; width:auto; filter:brightness(0) invert(1) }

/* ─── Nav ─────────────────────────────────────── */
.site-header { position:fixed; top:0; left:0; right:0; z-index:100 }
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 44px; height:80px;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.nav.scrolled { background:#fff; border-bottom:1px solid rgba(0,0,0,0.07); box-shadow:0 2px 28px rgba(0,0,0,0.06) }
.nav.scrolled .mc-line { color:#111 }
.nav-menu { display:flex; align-items:center; gap:38px }
.nav-menu a { font-size:0.78rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.6); transition:color .25s }
.nav.scrolled .nav-menu a { color:rgba(0,0,0,0.45) }
.nav-menu a:hover { color:#fff }
.nav.scrolled .nav-menu a:hover { color:#000 }
.nav-cta {
  background:var(--lime); color:#000 !important;
  font-size:0.67rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  padding:13px 26px; border-radius:100px; transition:opacity .2s;
}
.nav-cta:hover { opacity:.85 }
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:4px }
.nav-toggle span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .3s,opacity .3s }
.nav.scrolled .nav-toggle span { background:#111 }
.nav-mobile {
  display:none; position:fixed; inset:0; top:80px; z-index:99;
  background:#0a0a0a; flex-direction:column;
  border-top:1px solid var(--dark-border);
}
.nav-mobile.open { display:flex }
.nav-mobile a { display:block; padding:20px 28px; font-size:0.82rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.7); border-bottom:1px solid var(--dark-border); transition:color .2s }
.nav-mobile a:hover { color:#fff }
.nav-mobile-cta { margin:24px 28px; padding:17px 28px; background:var(--lime); color:#000 !important; border-radius:100px; text-align:center; border:none }

/* ─── Hero ────────────────────────────────────── */
.hero {
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 44px 56px; padding-top:80px;
  border-bottom:1px solid var(--dark-border);
}
.hero-kicker { font-size:0.63rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--lime); margin-bottom:28px; display:flex; align-items:center; gap:12px }
.hero-kicker::before { content:''; width:28px; height:1px; background:var(--lime) }
.hero-h1 { font-size:clamp(3.8rem,8.5vw,9.5rem); font-weight:900; line-height:0.9; letter-spacing:-0.045em; color:#fff; margin-bottom:52px }
.hero-h1 .outline { -webkit-text-stroke:2px rgba(255,255,255,0.75); color:transparent }
.hero-h1 .lime    { color:var(--lime) }
.hero-foot { border-top:1px solid var(--dark-border); padding-top:32px; display:flex; align-items:center; justify-content:space-between; gap:48px }
.hero-foot p { font-size:0.9rem; font-weight:500; line-height:1.8; color:rgba(255,255,255,0.68); max-width:420px }
.hero-btns { display:flex; gap:14px; align-items:center; flex-shrink:0 }
.btn-lime  { background:var(--lime); color:#000; font-size:0.72rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; padding:17px 34px; border-radius:100px; display:inline-flex; align-items:center; gap:10px; transition:opacity .2s }
.btn-lime:hover { opacity:.85 }
.btn-ghost { color:rgba(255,255,255,0.85); border:1px solid rgba(255,255,255,0.22); font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:17px 30px; border-radius:100px; display:inline-flex; align-items:center; gap:8px; transition:color .2s, border-color .2s }
.btn-ghost:hover { color:#fff; border-color:rgba(255,255,255,0.5) }

/* ─── Clients Ticker ──────────────────────────── */
.clients-section { background:#fff; border-top:1px solid var(--light-border); border-bottom:1px solid var(--light-border); overflow:hidden }
.clients-header  { padding:20px 44px 0; font-size:0.55rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:rgba(0,0,0,0.28) }
.ticker-wrap  { padding:14px 0 20px; overflow:hidden; white-space:nowrap }
.ticker-track { display:inline-flex; align-items:center; animation:ticker 32s linear infinite }
.ticker-track:hover { animation-play-state:paused }
.ticker-logo  { display:inline-flex; align-items:center; padding:0 36px; border-right:1px solid rgba(0,0,0,0.08); font-size:0.9rem; font-weight:800; letter-spacing:0.04em; color:rgba(0,0,0,0.3); white-space:nowrap; transition:color .25s; cursor:default }
.ticker-logo:hover { color:rgba(0,0,0,0.7) }
.ticker-logo img { height:32px; width:auto; max-width:120px; object-fit:contain; opacity:0.45; filter:grayscale(1); transition:opacity .25s }
.ticker-logo img:hover { opacity:0.85 }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ─── Services ────────────────────────────────── */
.services { padding:80px 44px; background:var(--mid); border-bottom:1px solid var(--dark-border) }
.section-head  { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px }
.section-label { font-size:0.6rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--lime); margin-bottom:10px }
.section-title { font-size:clamp(1.8rem,3.5vw,3rem); font-weight:900; letter-spacing:-0.03em; line-height:1; color:#fff }
.svc-list { margin-top:48px }
.svc-row { display:grid; grid-template-columns:52px 1fr 2fr; align-items:baseline; gap:40px; padding:26px 0; border-top:1px solid var(--dark-border); transition:padding .3s, background .2s; cursor:default }
.svc-row:last-child { border-bottom:1px solid var(--dark-border) }
.svc-row:hover { padding-left:10px; background:rgba(255,255,255,0.02) }
.svc-num  { font-size:0.57rem; font-weight:700; letter-spacing:0.12em; color:var(--lime) }
.svc-name { font-size:1.05rem; font-weight:900; letter-spacing:-0.02em; color:#fff; line-height:1.2 }
.svc-body { font-size:0.77rem; font-weight:500; line-height:1.75; color:rgba(255,255,255,0.52) }

/* ─── Work — Visual Cards ─────────────────────── */
.work { padding:80px 0; border-bottom:1px solid var(--dark-border) }
.work-head { display:flex; align-items:flex-end; justify-content:space-between; padding:0 44px 40px }
.see-all { font-size:0.67rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.65); display:flex; align-items:center; gap:8px; transition:color .2s }
.see-all:hover { color:#fff }
.work-projects { display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,0.07) }

.project-card { display:grid; grid-template-columns:3fr 2fr; min-height:420px; background:var(--dark); overflow:hidden }
.project-card.flip .project-visual { order:2 }
.project-card.flip .project-info   { order:1; border-left:none; border-right:1px solid var(--dark-border) }
.project-visual { position:relative; overflow:hidden; transition:transform .7s cubic-bezier(.23,1,.32,1) }
.project-card:hover .project-visual { transform:scale(1.03) }
.project-info { padding:48px 44px; display:flex; flex-direction:column; justify-content:space-between; border-left:1px solid var(--dark-border) }
.project-client { font-size:clamp(1.6rem,2.6vw,2.3rem); font-weight:900; letter-spacing:-0.04em; color:#fff; line-height:1; margin:0 0 13px }
.project-scope  { font-size:0.82rem; font-weight:600; color:rgba(255,255,255,0.55); line-height:1.5; margin-bottom:14px }
.project-meta   { font-size:0.58rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.28); margin-bottom:36px }
.project-link   { display:inline-flex; align-items:center; gap:9px; font-size:0.65rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.35); transition:color .2s }
.project-card:hover .project-link { color:var(--lime) }
.project-link svg { transition:transform .2s; flex-shrink:0 }
.project-card:hover .project-link svg { transform:translate(3px,-3px) }

/* ── Visual: Blue (Tech/SaaS) */
.pv-blue { background:linear-gradient(140deg,#05102a 0%,#0d2060 55%,#071540 100%) }
.pv-blue::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle,rgba(99,162,255,0.2) 1px,transparent 1px); background-size:28px 28px }
.pv-blue::after  { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(59,130,246,0.3) 0%,transparent 65%); box-shadow:0 0 100px 30px rgba(37,99,235,0.2) }
.pv-va-line { position:absolute; top:50%; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent 0%,rgba(197,255,0,0.5) 50%,transparent 100%) }
.pv-va-label { position:absolute; bottom:-40px; left:-10px; font-size:18rem; font-weight:900; letter-spacing:-0.06em; line-height:1; color:rgba(255,255,255,0.04); pointer-events:none; user-select:none }

/* ── Visual: Navy & Gold (Legal/Professional) */
.pv-navy { background:linear-gradient(140deg,#0a0a18 0%,#16163a 55%,#0a0a18 100%) }
.pv-navy::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px); background-size:52px 52px }
.pv-navy::after  { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); width:240px; height:240px; border:1px solid rgba(200,170,80,0.18) }
.pv-ml-inner { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(45deg); width:140px; height:140px; border:1px solid rgba(200,170,80,0.1) }
.pv-ml-dot   { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:rgba(200,170,80,0.6); box-shadow:0 0 30px 8px rgba(200,170,80,0.15) }
.pv-ml-label { position:absolute; bottom:-50px; right:-20px; font-size:16rem; font-weight:900; letter-spacing:-0.06em; line-height:1; color:rgba(255,255,255,0.03); pointer-events:none; user-select:none }

/* ── Visual: Rust & Orange (E-Commerce) */
.pv-rust { background:linear-gradient(140deg,#160700 0%,#2d1000 50%,#160700 100%) }
.pv-rust::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 35% 65%,rgba(234,88,12,0.3) 0%,transparent 52%),radial-gradient(ellipse at 68% 28%,rgba(197,255,0,0.06) 0%,transparent 42%) }
.pv-ng-ring1 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:280px; height:280px; border-radius:50%; border:1px solid rgba(234,88,12,0.14) }
.pv-ng-ring2 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:170px; height:170px; border-radius:50%; border:1px solid rgba(234,88,12,0.22) }
.pv-ng-core  { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; border-radius:50%; background:radial-gradient(circle,rgba(234,88,12,0.5),transparent) }
.pv-ng-label { position:absolute; bottom:-35px; left:-5px; font-size:18rem; font-weight:900; letter-spacing:-0.06em; line-height:1; color:rgba(255,255,255,0.035); pointer-events:none; user-select:none }

/* ── Visual: Dark Teal */
.pv-teal { background:linear-gradient(140deg,#060e0b 0%,#0f2a20 55%,#060e0b 100%) }
.pv-teal::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(197,255,0,0.035) 1px,transparent 1px); background-size:100% 40px }
.pv-teal::after  { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:100%; background:linear-gradient(180deg,transparent 0%,rgba(197,255,0,0.25) 50%,transparent 100%) }
.pv-sb-cross { position:absolute; top:50%; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(197,255,0,0.12),transparent) }
.pv-sb-label { position:absolute; bottom:-35px; right:-10px; font-size:18rem; font-weight:900; letter-spacing:-0.06em; line-height:1; color:rgba(255,255,255,0.035); pointer-events:none; user-select:none }

/* ── Visual: Purple (Creative/Agency) */
.pv-purple { background:linear-gradient(140deg,#0d0017 0%,#240040 55%,#0d0017 100%) }
.pv-purple::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%,rgba(147,51,234,0.3) 0%,transparent 60%) }
.pv-pu-glow  { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(147,51,234,0.25),transparent); box-shadow:0 0 80px 20px rgba(147,51,234,0.15) }
.pv-pu-label { position:absolute; bottom:-35px; right:-10px; font-size:18rem; font-weight:900; letter-spacing:-0.06em; line-height:1; color:rgba(255,255,255,0.03); pointer-events:none; user-select:none }

/* ── Visual: Slate (Finance/Corporate) */
.pv-slate { background:linear-gradient(140deg,#0a0d10 0%,#1a2530 55%,#0a0d10 100%) }
.pv-slate::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px); background-size:32px 32px }
.pv-sl-grid  { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:200px; height:200px; border:1px solid rgba(255,255,255,0.08); border-radius:4px }
.pv-sl-label { position:absolute; bottom:-35px; right:-10px; font-size:18rem; font-weight:900; letter-spacing:-0.06em; line-height:1; color:rgba(255,255,255,0.03); pointer-events:none; user-select:none }

/* ─── Testimonials Slider ─────────────────────── */
.tslider-section { display:grid; grid-template-columns:3fr 2fr; background:#0a0a0a; border-bottom:1px solid var(--dark-border) }
.tslider-left    { padding:80px 60px 72px 44px; border-right:1px solid var(--dark-border); display:flex; flex-direction:column; justify-content:space-between; min-height:400px }
.tslides { flex:1; display:flex; flex-direction:column; justify-content:center; padding-bottom:36px }
.tslide { display:none }
.tslide.active { display:block; animation:tfade .45s ease }
@keyframes tfade { from{opacity:0;transform:translateX(-14px)} to{opacity:1;transform:none} }
.tslide-q { font-size:clamp(1.25rem,2.1vw,1.8rem); font-weight:800; letter-spacing:-0.025em; line-height:1.4; color:#fff }
.tslide-q::before { content:'\201C'; color:var(--lime) }
.tslide-q::after  { content:'\201D'; color:var(--lime) }
.tslider-controls { display:flex; align-items:center; gap:12px; border-top:1px solid var(--dark-border); padding-top:28px }
.tslider-btn { width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.15); background:none; color:rgba(255,255,255,0.55); display:flex; align-items:center; justify-content:center; transition:border-color .2s, color .2s, background .2s; flex-shrink:0 }
.tslider-btn:hover { border-color:var(--lime); color:#000; background:var(--lime) }
.tslider-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.tslider-count { font-size:0.63rem; font-weight:700; letter-spacing:0.14em; color:rgba(255,255,255,0.5); margin-right:auto }
.tslider-dots  { display:flex; gap:7px; align-items:center }
.tdot { width:6px; height:6px; border-radius:50%; padding:0; border:none; background:rgba(255,255,255,0.18); transition:background .25s, transform .25s }
.tdot.active { background:var(--lime); transform:scale(1.4) }
.tslider-right { display:flex; align-items:center; justify-content:center; padding:60px 44px }
.tperson-card { width:100%; max-width:260px; background:rgba(255,255,255,0.04); border:1px solid var(--dark-border); border-radius:16px; padding:40px 28px; display:flex; flex-direction:column; align-items:center; text-align:center; transition:opacity .25s }
.tperson-card.fading { opacity:0 }
.tperson-initials { width:80px; height:80px; border-radius:50%; background:rgba(197,255,0,0.06); border:1px solid rgba(197,255,0,0.2); display:flex; align-items:center; justify-content:center; font-size:1.45rem; font-weight:900; color:var(--lime); letter-spacing:-0.02em; margin-bottom:20px }
.tperson-name    { font-size:0.92rem; font-weight:700; color:#fff; margin-bottom:5px }
.tperson-role    { font-size:0.7rem; font-weight:500; color:rgba(255,255,255,0.55); line-height:1.55; margin-bottom:18px }
.tperson-company { font-size:0.57rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--lime); border-top:1px solid var(--dark-border); padding-top:16px; width:100% }

/* ─── CTA Strip ───────────────────────────────── */
.cta-strip { padding:80px 44px; background:var(--lime) }
.cta-strip-inner { display:flex; align-items:center; justify-content:space-between; gap:60px }
.cta-strip-h { font-size:clamp(2.4rem,5vw,5.5rem); font-weight:900; line-height:0.9; letter-spacing:-0.045em; color:#000 }
.cta-strip-h em { font-style:normal; -webkit-text-stroke:1.5px #000; color:transparent }
.btn-black { background:#000; color:var(--lime); font-size:0.72rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; padding:18px 36px; border-radius:100px; display:inline-flex; align-items:center; gap:10px; transition:opacity .2s; white-space:nowrap }
.btn-black:hover { opacity:.82 }

/* ─── Contact ─────────────────────────────────── */
.contact { padding:100px 44px; background:var(--light); border-bottom:1px solid var(--light-border) }
.contact-grid { display:grid; grid-template-columns:2fr 3fr; gap:80px; align-items:start }
.contact-tag   { font-size:0.6rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--lime-dk); margin-bottom:20px; display:block }
.contact-h     { font-size:clamp(2.4rem,4.8vw,4.2rem); font-weight:900; letter-spacing:-0.045em; line-height:0.93; color:#0a0a0a; margin-bottom:24px }
.contact-desc  { font-size:0.84rem; font-weight:500; line-height:1.8; color:rgba(0,0,0,0.5); margin-bottom:36px }
.contact-email-link { font-size:0.82rem; font-weight:600; color:rgba(0,0,0,0.4); border-top:1px solid var(--light-border); padding-top:24px; display:block; transition:color .2s }
.contact-email-link:hover { color:#0a0a0a }
.enquiry-form  { display:flex; flex-direction:column; gap:20px }
.form-row      { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form-field    { display:flex; flex-direction:column; gap:8px }
.form-label    { font-size:0.55rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(0,0,0,0.4) }
.form-input,.form-select,.form-textarea { background:#fff; border:1px solid rgba(0,0,0,0.14); border-radius:8px; padding:13px 15px; font-size:0.87rem; font-weight:500; color:#0a0a0a; outline:none; width:100%; transition:border-color .2s, box-shadow .2s }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--lime-dk); box-shadow:0 0 0 3px rgba(46,138,0,0.1) }
.form-input::placeholder,.form-textarea::placeholder { color:rgba(0,0,0,0.28) }
.form-select   { cursor:pointer; appearance:none; color:rgba(0,0,0,0.5) }
.form-select option { background:#fff; color:#0a0a0a }
.form-textarea { resize:none; height:110px; line-height:1.65 }
.form-submit   { background:#0a0a0a; color:#fff; border:none; border-radius:100px; cursor:pointer; font-size:0.72rem; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; padding:17px 34px; display:inline-flex; align-items:center; gap:10px; transition:background .2s; align-self:flex-start }
.form-submit:hover { background:var(--lime-dk) }
.form-success  { display:none; padding:48px 36px; border:1px solid rgba(46,138,0,0.2); border-radius:12px; background:rgba(46,138,0,0.05) }
.form-success.show { display:flex; flex-direction:column; align-items:flex-start; gap:10px }
.form-success-h { font-size:1.15rem; font-weight:800; color:#0a0a0a }
.form-success-p { font-size:0.82rem; font-weight:500; color:rgba(0,0,0,0.5); line-height:1.75 }

/* ─── Footer ──────────────────────────────────── */
.site-footer { background:#000; border-top:1px solid var(--dark-border) }
.footer-top  { display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:56px; padding:60px 44px; border-bottom:1px solid var(--dark-border) }
.footer-brand .mc-logo { margin-bottom:20px }
.footer-mc-logo .mc-line { color:#fff; font-size:1.7rem }
.footer__uploaded-logo { height:40px; width:auto; filter:brightness(0) invert(1) }
.footer-tagline { font-size:0.92rem; font-weight:500; line-height:1.75; color:rgba(255,255,255,0.5); margin:16px 0 22px; max-width:340px }
.footer-socials { display:flex; gap:8px; margin-bottom:28px }
.fsoc { width:36px; height:36px; border:1px solid var(--dark-border); border-radius:8px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.35); transition:border-color .2s, color .2s }
.fsoc:hover { border-color:var(--lime); color:var(--lime) }
.fsoc svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.hs-badge-img { width:100px; height:auto; display:block; opacity:0.92; transition:opacity .2s }
.hs-badge-img:hover { opacity:1 }
.fcol h5 { font-size:0.65rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:16px }
.fcol ul { list-style:none }
.fcol li { margin-bottom:9px }
.fcol a  { font-size:0.92rem; font-weight:500; color:rgba(255,255,255,0.6); transition:color .2s }
.fcol a:hover { color:#fff }
.footer-bottom  { display:flex; align-items:center; justify-content:space-between; padding:20px 44px }
.footer-copy    { font-size:0.66rem; font-weight:500; color:rgba(255,255,255,0.2) }
.footer-legal   { display:flex; gap:18px; list-style:none }
.footer-legal li a,
.footer-legal a { font-size:0.66rem; font-weight:500; color:rgba(255,255,255,0.2); transition:color .2s }
.footer-legal a:hover { color:rgba(255,255,255,0.6) }

/* ─── Back to Top ─────────────────────────────── */
.btt { position:fixed; bottom:32px; right:32px; z-index:200; width:52px; height:52px; border-radius:50%; border:none; background:#0a0a0a; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .35s ease, transform .35s ease, background .25s ease, color .25s ease }
.btt.visible { opacity:1; pointer-events:all; transform:translateY(0) }
.btt:hover   { background:var(--lime); color:#000 }
.btt:hover .btt-progress { stroke:rgba(0,0,0,0.25) }
.btt-arrow   { position:relative; z-index:2; transition:transform .25s ease }
.btt:hover .btt-arrow { transform:translateY(-2px) }
.btt-ring    { position:absolute; inset:-3px; width:calc(100% + 6px); height:calc(100% + 6px); transform:rotate(-90deg); pointer-events:none }
.btt-track   { fill:none; stroke:rgba(255,255,255,0.08); stroke-width:2 }
.btt-progress{ fill:none; stroke:var(--lime); stroke-width:2; stroke-linecap:round; stroke-dasharray:138.2; stroke-dashoffset:138.2; transition:stroke-dashoffset .1s linear }

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

/* ─── Inner page layout ───────────────────────── */
.page-hero { padding:160px 44px 80px; border-bottom:1px solid var(--dark-border) }
.page-hero .section-label { margin-bottom:16px }
.page-hero h1 { font-size:clamp(2.8rem,6vw,6rem); font-weight:900; letter-spacing:-0.04em; line-height:0.95; color:#fff }
.page-content { padding:80px 44px; max-width:820px }
.page-content p  { font-size:0.95rem; font-weight:500; line-height:1.8; color:rgba(255,255,255,0.65); margin-bottom:24px }
.page-content h2 { font-size:clamp(1.6rem,3vw,2.4rem); font-weight:900; letter-spacing:-0.03em; color:#fff; margin:48px 0 16px }
.page-content h3 { font-size:1.2rem; font-weight:800; color:#fff; margin:32px 0 12px }
.page-content a  { color:var(--lime); text-decoration:underline; text-underline-offset:3px }
.page-content ul { list-style:disc; padding-left:1.4em; display:flex; flex-direction:column; gap:8px }
.page-content ul li { font-size:0.95rem; font-weight:500; line-height:1.7; color:rgba(255,255,255,0.65) }

/* ─── Blog ────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:rgba(255,255,255,0.06) }
.post-card { background:var(--dark); display:flex; flex-direction:column }
.post-card__image { aspect-ratio:16/10; overflow:hidden; background:var(--mid) }
.post-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.post-card:hover .post-card__image img { transform:scale(1.04) }
.post-card__body { padding:28px 32px 36px; display:flex; flex-direction:column; flex:1; border-top:1px solid var(--dark-border) }
.post-card__cat  { font-size:0.55rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--lime); margin-bottom:10px; display:block }
.post-card__title { font-size:1.05rem; font-weight:800; letter-spacing:-0.02em; color:#fff; line-height:1.35; margin-bottom:auto }
.post-card__title a:hover { color:var(--lime) }
.post-card__meta { font-size:0.65rem; font-weight:500; color:rgba(255,255,255,0.3); margin-top:20px; display:flex; gap:16px }

/* ─── Responsive ──────────────────────────────── */
@media(max-width:960px) {
  .footer-top { grid-template-columns:1fr 1fr; gap:40px }
  .work-head  { padding:0 32px 32px }
  .project-card,.project-card.flip { min-height:360px }
}

@media(max-width:768px) {
  /* Nav */
  .nav { padding:0 24px }
  .nav-menu { display:none }
  .nav-toggle { display:flex }

  /* Hero */
  .hero { padding:0 24px 48px }
  .hero-kicker { font-size:0.58rem; margin-bottom:20px }
  .hero-h1 { margin-bottom:36px }
  .hero-foot { flex-direction:column; align-items:flex-start; gap:28px; padding-top:24px }
  .hero-foot p { max-width:100% }
  .hero-btns { flex-wrap:wrap; gap:12px }

  /* Ticker */
  .clients-header { padding:16px 24px 0 }

  /* Services */
  .services { padding:56px 24px }
  .svc-row { grid-template-columns:36px 1fr; gap:20px }
  .svc-body { display:none }

  /* Work */
  .work { padding:56px 0 }
  .work-head { padding:0 24px; flex-direction:column; align-items:flex-start; gap:16px }
  .project-card,.project-card.flip { grid-template-columns:1fr; min-height:auto }
  .project-card.flip .project-visual { order:0 }
  .project-card.flip .project-info   { order:1; border-right:none; border-left:none; border-top:1px solid var(--dark-border) }
  .project-visual { min-height:280px }
  .project-info   { border-left:none; border-top:1px solid var(--dark-border); padding:36px 24px }

  /* Testimonials */
  .tslider-section { grid-template-columns:1fr }
  .tslider-left    { padding:52px 24px 44px }
  .tslider-right   { padding:0 24px 48px; justify-content:flex-start }
  .tperson-card    { max-width:100% }

  /* CTA Strip */
  .cta-strip { padding:56px 24px }
  .cta-strip-inner { flex-direction:column; align-items:flex-start; gap:32px }

  /* Contact */
  .contact { padding:60px 24px }
  .contact-grid { grid-template-columns:1fr; gap:48px }

  /* Footer */
  .footer-top    { grid-template-columns:1fr; gap:36px; padding:48px 24px }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; padding:20px 24px }

  /* Blog */
  .blog-grid { grid-template-columns:1fr }
}

@media(max-width:480px) {
  .hero-h1 { font-size:clamp(2.8rem,10vw,4rem) }
  .btn-lime,.btn-ghost { font-size:0.66rem; padding:15px 24px }
  .cta-strip-h { font-size:clamp(2rem,9vw,3rem) }
  .contact-h   { font-size:clamp(2rem,8vw,3rem) }
  .form-row    { grid-template-columns:1fr }
  .section-title { font-size:clamp(1.5rem,6vw,2.2rem) }
  .tslider-btn { width:40px; height:40px }
  .blog-grid   { grid-template-columns:1fr }
}