/* ============ 4sightsolutions — design system ============ */
@font-face { font-family:"Sora";src:url("fonts/Sora-Variable.ttf") format("truetype");font-weight:100 800;font-style:normal;font-display:swap }
:root {
  --bg:#EFF4FA;
  --bg2:#E6EDF6;
  --card:#FFFFFF;
  --ink:#12161C;
  --mute:#5B6470;
  --dim:#94A0AC;
  --line:rgba(18,22,28,.1);
  --line2:rgba(18,22,28,.16);
  --violet:#0B5FBF;
  --violet-l:#2E9BF0;
  --violet-wash:#EAF4FD;
  --gold:#5B6B80;
  --grad:linear-gradient(120deg,#0A4C93 0%,#1E88E5 60%,#63B8F5 120%);
  --font:"Sora","Segoe UI",system-ui,sans-serif;
  --radius:18px;
  --pad:max(1.4rem,calc((100% - 1180px) / 2));
  --ease:cubic-bezier(.2,.75,.15,1);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  background:var(--bg);
}
body {
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  line-height:1.6;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background: radial-gradient(1100px 620px at 8% -8%,rgba(30,136,229,.13),transparent 60%), radial-gradient(900px 520px at 108% 6%,rgba(91,107,128,.12),transparent 58%), radial-gradient(800px 500px at 50% 60%,rgba(255,255,255,.6),transparent 70%), linear-gradient(180deg,#EFF4FA 0%,#E9EFF7 45%,#F2F5FA 100%);
  background-attachment:fixed;
}
@supports not (background-attachment:fixed) {
  body {
    background-attachment:scroll;
  }
}
::selection {
  background:rgba(124,58,237,.18);
}
h1, h2, h3 {
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  color:var(--ink);
}
h1 {
  font-size:clamp(2.5rem,6vw,4.4rem);
}
h2 {
  font-size:clamp(1.7rem,3.6vw,2.5rem);
}
h3 {
  font-size:1.25rem;
}
p {
  margin:0 0 1em;
  max-width:58ch;
  color:var(--mute);
}
a {
  color:inherit;
}
:focus-visible {
  outline:2px solid var(--violet-l);
  outline-offset:3px;
}
.grad {
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  background-size:200% 100%;
  animation:shimmer 6s ease-in-out infinite;
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:0 0 1rem;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--violet);
}
.eyebrow::before {
  content:"";
  width:1.6rem;
  height:1px;
  background:var(--violet);
}
section {
  position:relative;
  padding:5.5rem var(--pad);
}
.head {
  max-width:38rem;
  margin-bottom:2.6rem;
}
.head p {
  font-size:1.02rem;
}
.tone {
  background:var(--bg2);
}
.btn {
  display:inline-flex;
  align-items:center;
  gap:.55em;
  padding:.85em 1.5em;
  border-radius:999px;
  border:1px solid transparent;
  font:700 .95rem var(--font);
  text-decoration:none;
  cursor:pointer;
  color:#fff;
  background:var(--grad);
  transition:transform .3s var(--ease),box-shadow .3s;
  box-shadow:0 10px 24px -12px rgba(76,23,158,.5);
  transform:translate(var(--tx,0px),var(--ty,0px));
}
.btn::after {
  content:"\2192";
  transition:transform .25s;
}
.btn:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(76,23,158,.6);
}
.btn:hover::after {
  transform:translateX(3px);
}
.btn.ghost {
  background:transparent;
  color:var(--ink);
  border-color:var(--line2);
  box-shadow:none;
}
.btn.ghost:hover {
  background:var(--bg2);
  box-shadow:none;
  transform:none;
}
.btn.small {
  padding:.6em 1.1em;
  font-size:.85rem;
}
.link-arrow {
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-weight:700;
  color:var(--violet);
  text-decoration:none;
  font-size:.95rem;
}
.link-arrow::after {
  content:"\2192";
  transition:transform .3s var(--ease);
}
.link-arrow:hover::after {
  transform:translateX(4px);
}
/* ============ nav ============ */
.nv {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.15rem var(--pad);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:padding .35s,border-color .35s,box-shadow .35s;
}
.nv.is-scrolled {
  padding-block:.75rem;
  border-color:var(--line);
  box-shadow:0 1px 0 var(--line);
}
.nv.menu-open {
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.nv-brand {
  display:flex;
  align-items:center;
  gap:.55rem;
  text-decoration:none;
}
.nv-brand img {
  height:34px;
  width:auto;
  display:block;
  transition:height .35s;
}
.nv.is-scrolled .nv-brand img {
  height:28px;
}
.nv-word {
  font-weight:800;
  letter-spacing:.1em;
  font-size:.86rem;
  color:var(--ink);
}
.nv-word b {
  color:var(--violet);
}
.nv-links {
  display:flex;
  align-items:center;
  gap:2.1rem;
  margin:0;
  padding:0;
  list-style:none;
}
.nv-links a {
  position:relative;
  font-size:.92rem;
  font-weight:600;
  color:var(--mute);
  text-decoration:none;
  padding:.3rem 0;
  transition:color .25s;
}
.nv-links a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-3px;
  height:2px;
  background:var(--violet);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s var(--ease);
}
.nv-links a:hover {
  color:var(--ink);
}
.nv-links a:hover::after {
  transform:scaleX(1);
}
.nv-links a.is-active {
  color:var(--ink);
}
.nv-links a.is-active::after {
  transform:scaleX(1);
}
.nv-right {
  display:flex;
  align-items:center;
  gap:1.6rem;
}
.nv-burger {
  display:none;
}
/* ============ mobile nav ============ */
@media (max-width:900px) {
  .nv-links {
    position:fixed;
    inset:0;
    z-index:59;
    background:#fff;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:1.6rem;
    padding:6rem 2rem;
    transform:translateX(101%);
    transition:transform .5s var(--ease);
  }
  .nv-links.is-open {
    transform:none;
  }
  .nv-links a {
    font-size:1.6rem;
  }
  .nv-right .btn.small {
    display:none;
  }
  .nv-right {
    gap:0;
  }
  .nv-burger {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:2.2rem;
    height:2.2rem;
    border:0;
    background:none;
    cursor:pointer;
    z-index:61;
  }
  .nv-burger span {
    display:block;
    height:2px;
    background:var(--ink);
    border-radius:2px;
    transition:transform .3s var(--ease),opacity .3s;
  }
  .nv-burger.is-open span:nth-child(1) {
    transform:translateY(7px) rotate(45deg);
  }
  .nv-burger.is-open span:nth-child(2) {
    opacity:0;
  }
  .nv-burger.is-open span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg);
  }
}
/* ============ hero ============ */
.hero {
  padding:9.5rem var(--pad) 5rem;
  display:grid;
  gap:3rem;
  align-items:center;
  background: radial-gradient(620px circle at var(--mx,82%) var(--my,10%),rgba(30,136,229,.1),transparent 62%), radial-gradient(60% 50% at 88% 0%,rgba(30,136,229,.05),transparent 65%);
}
.hero-copy {
  max-width:34rem;
}
.hero h1 .ln {
  display:block;
  overflow:hidden;
  padding-bottom:.1em;
  margin-bottom:-.1em;
}
.hero h1 .ln>span {
  display:block;
  animation:rise .9s calc(var(--i) * .1s + .1s) var(--ease) backwards;
}
.hero-copy p {
  font-size:1.15rem;
  margin-top:1.2rem;
  animation:fade .8s .6s backwards;
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:1.8rem;
  animation:fade .8s .75s backwards;
}
.hero-visual {
  position:relative;
  height:28rem;
  animation:fade 1s .5s backwards;
}
.pop {
  position:absolute;
  right:-6%;
  top:30%;
  width:48%;
  background:#fff;
  border:1px solid var(--line2);
  border-radius:14px;
  box-shadow:0 24px 50px -20px rgba(18,22,28,.3);
  padding:.9rem;
  animation:float2 6s ease-in-out infinite;
  transform:translateY(var(--py,0px));
}
@keyframes float2 { 50%{transform:translateY(calc(var(--py,0px) - 14px))} }
/* ============ services preview (home) ============ */
.svc3 {
  display:grid;
  gap:1.3rem;
}
.svc-card {
  position:relative;
  padding:2rem;
  border-radius:var(--radius);
  border:1px solid var(--line2);
  background:var(--card);
  transition:border-color .3s,box-shadow .3s,transform .3s var(--ease);
}
.svc-card:hover {
  border-color:var(--violet-l);
  box-shadow:0 20px 44px -24px rgba(76,23,158,.35);
}
.svc-ic {
  width:2.7rem;
  height:2.7rem;
  margin-bottom:1.2rem;
}
.svc-ic svg {
  width:100%;
  height:100%;
}
.svc-card h3 {
  margin-bottom:.4rem;
}
.svc-card p {
  margin-bottom:1rem;
  font-size:.95rem;
}
.explore-row {
  margin-top:2.2rem;
  text-align:center;
}
/* ============ positioning: understand / build / improve ============ */
.steps3 {
  display:grid;
  gap:2.4rem;
  margin-top:1rem;
}
.step {
  border-top:1px solid var(--line);
  padding-top:1.6rem;
}
.step b {
  display:block;
  font:700 .78rem var(--font);
  letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:.7rem;
}
.step h3 {
  margin-bottom:.4rem;
}
.step p {
  font-size:.94rem;
  margin:0;
}
/* ============ selected work ============ */
/* ============ why us ============ */
.why-grid {
  display:grid;
  gap:1.6rem 2.4rem;
}
.why-item {
  display:flex;
  gap:1.1rem;
}
.why-num {
  flex:none;
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  border:1px solid var(--line2);
  display:grid;
  place-items:center;
  font:700 .85rem var(--font);
  color:var(--violet);
}
.why-item h3 {
  margin-bottom:.3rem;
  font-size:1.1rem;
}
.why-item p {
  margin:0;
  font-size:.93rem;
}
/* ============ mini about ============ */
/* ============ final CTA ============ */
.final-cta {
  margin:0 var(--pad) 5.5rem;
  padding:2rem 2.2rem;
  border-radius:28px;
  background:var(--grad);
  text-align:center;
  color:#fff;
  min-height:330px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.final-cta h2 {
  color:#fff;
}
.final-cta p {
  color:rgba(255,255,255,.88);
  margin:0 auto 1.25rem;
  max-width:32rem;
}
.final-cta .btn {
  background:#fff;
  color:var(--violet);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.3);
}
.final-cta .btn::after {
  color:var(--violet);
}
/* ============ page hero (inner pages) ============ */
.page-hero {
  padding:9.5rem var(--pad) 4rem;
  border-bottom:1px solid var(--line);
}
.page-hero h1 {
  max-width:16ch;
}
.page-hero p {
  font-size:1.1rem;
  max-width:38rem;
}
/* ============ footer ============ */
.foot {
  padding:4rem var(--pad) 2rem;
  background:var(--ink);
  color:#EDEAF2;
}
.foot-top {
  display:grid;
  gap:2.6rem;
  padding-bottom:2.6rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.foot-brand {
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  margin-bottom:.9rem;
}
.foot-brand img {
  height:30px;
}
.foot-brand span {
  font-weight:800;
  letter-spacing:.1em;
  font-size:.86rem;
  color:#fff;
}
.foot p {
  color:#B4ACC2;
  font-size:.92rem;
  max-width:26rem;
}
.foot h4 {
  margin:0 0 .9rem;
  font:700 .7rem var(--font);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8A8098;
}
.foot nav {
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.foot nav a {
  font-size:.92rem;
  color:#D6D0E0;
  text-decoration:none;
  transition:color .25s;
}
.foot nav a:hover {
  color:#fff;
}
.foot-bottom {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  padding-top:1.6rem;
  font-size:.82rem;
  color:#8A8098;
  align-items:center;
}
/* ============ start a project modal ============ */
.modal-overlay {
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(21,18,28,.5);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s var(--ease);
}
.modal-overlay.is-open {
  opacity:1;
  pointer-events:auto;
}
.modal {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  z-index:101;
  width:min(30rem,100%);
  background:#fff;
  padding:3rem 2.2rem 2.2rem;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .45s var(--ease);
  box-shadow:-20px 0 60px -20px rgba(0,0,0,.25);
}
.modal.is-open {
  transform:none;
}
.modal-close {
  position:absolute;
  top:1.4rem;
  right:1.4rem;
  width:2.4rem;
  height:2.4rem;
  border-radius:50%;
  border:1px solid var(--line2);
  background:#fff;
  cursor:pointer;
  font-size:1.1rem;
  color:var(--mute);
  transition:background .25s,color .25s;
}
.modal-close:hover {
  background:var(--bg2);
  color:var(--ink);
}
.modal h2 {
  font-size:1.7rem;
  margin-bottom:.4rem;
}
.modal>p {
  margin-bottom:1.8rem;
}
.field {
  margin-bottom:1.15rem;
}
.field label {
  display:block;
  margin-bottom:.4rem;
  font-size:.8rem;
  font-weight:700;
  color:var(--mute);
}
.field input, .field select, .field textarea {
  width:100%;
  padding:.75em .9em;
  border-radius:10px;
  border:1px solid var(--line2);
  background:var(--bg2);
  color:var(--ink);
  font:inherit;
  transition:border-color .25s,box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none;
  border-color:var(--violet-l);
  box-shadow:0 0 0 3px rgba(124,58,237,.15);
  background:#fff;
}
.field select option {
  background:#fff;
}
.modal .btn {
  width:100%;
  justify-content:center;
  margin-top:.4rem;
}
#formMsg {
  min-height:1.4em;
  margin-top:.7rem;
  font-size:.88rem;
  color:var(--violet);
}
/* ============ shared effects ============ */
.reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,.9,.15,1.04);
}
.reveal.in {
  opacity:1;
  transform:none;
}
@keyframes rise { from{transform:translateY(105%)} }
@keyframes fade { from{opacity:0;transform:translateY(14px)} }
/* ============ responsive grid promotions ============ */
@media (min-width:56rem) {
  .hero {
    grid-template-columns:1fr .9fr;
    padding-block:10rem 6rem;
  }
  .svc3 {
    grid-template-columns:repeat(3,1fr);
  }
  .steps3 {
    grid-template-columns:repeat(3,1fr);
  }
  .why-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .mini-about {
    grid-template-columns:1fr 1fr;
  }
  .foot-top {
    grid-template-columns:1.6fr 1fr 1fr 1fr;
  }
  .svc-detail {
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:4rem;
  }
}
@media (max-width:900px) {
  .nv-links:not(.is-open) {
    display:none;
  }
}
/* ============ services page ============ */
.svc-detail {
  border-top:1px solid var(--line);
  padding:5.5rem var(--pad);
  display:grid;
  gap:2.6rem;
}
.svc-detail:first-of-type {
  border-top:0;
}
.svc-detail .tag {
  display:inline-block;
  margin-bottom:1rem;
  font:700 .7rem var(--font);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
}
.svc-detail h2 {
  max-width:16ch;
}
.svc-caps {
  list-style:none;
  margin:1.4rem 0 0;
  padding:0;
  display:grid;
  gap:.6rem;
}
.svc-caps li {
  position:relative;
  padding-left:1.5rem;
  font-size:.95rem;
  color:var(--ink);
}
.svc-caps li::before {
  content:"";
  position:absolute;
  left:0;
  top:.55rem;
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:var(--violet);
}
.svc-visual {
  border-radius:var(--radius);
  border:1px solid var(--line2);
  background:var(--bg2);
  padding:1.6rem;
  min-height:18rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.svc-visual.alt {
  background:linear-gradient(150deg,var(--violet-wash),#fff);
}
/* ============ our work page ============ */
.filters {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:0 0 2.6rem;
}
.filter-btn {
  padding:.55em 1.2em;
  border-radius:999px;
  border:1px solid var(--line2);
  background:#fff;
  color:var(--mute);
  font:600 .88rem var(--font);
  cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.filter-btn:hover {
  border-color:var(--violet-l);
  color:var(--ink);
}
.filter-btn.is-active {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}
/* ============ about page ============ */
.story {
  display:grid;
  gap:2.4rem;
  align-items:start;
}
.belief-grid {
  display:grid;
  gap:1.3rem;
}
.belief-card {
  padding:1.8rem;
  border-radius:var(--radius);
  border:1px solid var(--line2);
  background:var(--card);
}
.belief-num {
  display:block;
  margin-bottom:1rem;
  font:700 .78rem var(--font);
  letter-spacing:.18em;
  color:var(--gold);
}
.belief-card h3 {
  margin-bottom:.4rem;
  font-size:1.1rem;
}
.belief-card p {
  margin:0;
  font-size:.94rem;
}
.team-grid {
  display:grid;
  gap:1.6rem;
}
.team-card {
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line2);
  background:var(--card);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.team-card:hover {
  box-shadow:0 20px 44px -24px rgba(21,18,28,.28);
  z-index:8;
}
.team-photo {
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bg2);
}
.team-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s var(--ease);
}
.team-card:hover .team-photo img {
  transform:scale(1.04);
}
.team-body {
  padding:1.3rem 1.4rem 1.5rem;
}
.team-card h3 {
  margin-bottom:.35rem;
  font-size:1.15rem;
}
.team-card p {
  margin:0;
  font-size:.9rem;
}
@media (min-width:40rem) {
  .belief-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .team-grid {
    grid-template-columns:repeat(2,1fr);
  }
}
@media (min-width:56rem) {
  .story {
    grid-template-columns:1.1fr .9fr;
  }
  .team-grid {
    grid-template-columns:repeat(4,1fr);
  }
}
/* ============ premium animation layer ============ */
@view-transition { navigation:auto }
.progress {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:3px;
  z-index:120;
  background:var(--grad);
  transform-origin:left;
  transform:scaleX(0);
  pointer-events:none;
}
@keyframes shimmer { 0%,100%{background-position:0% 50%}50%{background-position:100% 50%} }
.svc-card, .belief-card, .team-card, .step, .filter-btn {
  position:relative;
  isolation:isolate;
}
.svc-card::before, .belief-card::before, .team-card::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(30,136,229,.14),transparent 65%);
}
.svc-card:hover::before, .belief-card:hover::before, .team-card:hover::before {
  opacity:1;
}
.svc-card, .team-card {
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty2,0px)) scale(var(--sc,1));
  transition:transform .35s var(--ease),border-color .3s,box-shadow .3s;
  will-change:transform;
}
/* ============ Services Page — Image Sizing ============ */
.svc-detail .svc-visual {
  width: 100%;
  height: 22rem;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.svc-detail .svc-visual .svc-photo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
@media (max-width: 768px) {
  .svc-detail .svc-visual {
    height: 17rem;
  }
}
/* ============ final CTA — shared across all pages ============ */
.final-cta .eyebrow {
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.65rem;
}
.final-cta .eyebrow::before {
  background: rgba(255, 255, 255, 0.75);
}
@media (max-width: 640px) {
  .final-cta {
    min-height: 0;
    padding: 3rem 1.4rem;
  }
}
/* =========================================
   HOMEPAGE HERO — CLEAN BENTO LAYOUT
   ========================================= */
/* =========================================
   MOBILE
   ========================================= */
/* =========================================
   WORK PAGE — MOVING SOCIAL MEDIA GALLERY
   ========================================= */
.social-gallery {
  display: grid;
  gap: 1.1rem;
  width: 100%;
  overflow: hidden;
  padding: 0.6rem 0 1rem;
  -webkit-mask-image: linear-gradient( to right, transparent 0%, #000 4%, #000 96%, transparent 100% );
  mask-image: linear-gradient( to right, transparent 0%, #000 4%, #000 96%, transparent 100% );
}
.social-gallery[hidden] {
  display: none !important;
}
.social-gallery-source {
  display: none !important;
}
.social-marquee-row {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.social-marquee-row[hidden] {
  display: none !important;
}
.social-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: socialMarqueeScroll var(--marquee-duration, 32s) linear infinite;
  will-change: transform;
}
.social-marquee-row-reverse .social-marquee-track {
  animation-direction: reverse;
}
.social-marquee-row:hover .social-marquee-track {
  animation-play-state: paused;
}
.social-marquee-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: none;
  width: max-content;
  padding-right: 1rem;
}
.social-marquee-group img {
  display: block;
  flex: 0 0 auto;
  height: 235px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  object-position: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  filter: drop-shadow( 0 9px 13px rgba(18, 22, 28, 0.11) );
  transition: transform 0.3s ease, filter 0.3s ease;
}
.social-marquee-group img:hover {
  transform: scale(1.035);
  filter: drop-shadow( 0 14px 20px rgba(18, 22, 28, 0.17) );
}
@keyframes socialMarqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* =========================================
   SOCIAL GALLERY — RESPONSIVE SIZING
   ========================================= */
@media (max-width: 768px) {
  .social-gallery {
    gap: 0.85rem;
  }
  .social-marquee-group {
    gap: 0.8rem;
    padding-right: 0.8rem;
  }
  .social-marquee-group img {
    height: 190px;
    max-width: 260px;
    border-radius: 9px;
  }
}
@media (max-width: 480px) {
  .social-marquee-group {
    gap: 0.65rem;
    padding-right: 0.65rem;
  }
  .social-marquee-group img {
    height: 155px;
    max-width: 210px;
    border-radius: 7px;
  }
}
/* =========================================
   WORK PAGE — OPEN COMING SOON EXPERIENCE
   No outer card or panel background
   ========================================= */
.work-empty {
  position: relative;
  width: 100%;
  margin: 2rem 0 0;
  padding: 2.5rem 0 3rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  text-align: left;
}
.work-empty[hidden] {
  display: none !important;
}
.work-empty:not([hidden]) {
  animation: openComingIn 0.65s var(--ease) both;
}
@keyframes openComingIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.coming-open {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  min-height: 300px;
  padding: 1rem 0;
}
/* =========================================
   ANIMATED VISUAL
   ========================================= */
.coming-art {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.coming-halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient( circle, rgba(46, 155, 240, 0.19) 0%, rgba(46, 155, 240, 0.07) 45%, transparent 72% );
  filter: blur(10px);
  animation: haloPulse 5s ease-in-out infinite;
}
@keyframes haloPulse { 0%, 100% { transform: scale(0.88); opacity: 0.65; } 50% { transform: scale(1.08); opacity: 1; } }
.coming-ring {
  position: absolute;
  border: 1px solid rgba(11, 95, 191, 0.2);
  border-radius: 50%;
}
.coming-ring-one {
  inset: 10%;
  border-style: dashed;
  animation: orbitRotate 28s linear infinite;
}
.coming-ring-two {
  inset: 22%;
  border-color: rgba(46, 155, 240, 0.35);
  animation: orbitRotate 20s linear infinite reverse;
}
@keyframes orbitRotate { to { transform: rotate(360deg); } }
.coming-core {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  background: var(--grad);
  box-shadow: 0 24px 55px -22px rgba(10, 76, 147, 0.6), 0 0 0 12px rgba(46, 155, 240, 0.06);
  transform: rotate(-8deg);
  animation: coreFloat 5s ease-in-out infinite;
}
.coming-core span {
  color: #fff;
  font-family: var(--font);
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.1em;
  transform: rotate(8deg);
}
@keyframes coreFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.coming-orbit-tag {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  white-space: nowrap;
  box-shadow: 0 10px 28px -18px rgba(18, 22, 28, 0.3);
}
.coming-tag-top {
  top: 19%;
  right: -2%;
  animation: tagFloatOne 4.5s ease-in-out infinite;
}
.coming-tag-bottom {
  bottom: 17%;
  left: -3%;
  animation: tagFloatTwo 5s ease-in-out infinite;
}
.coming-status-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 0 4px rgba(11, 95, 191, 0.1);
}
@keyframes tagFloatOne { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes tagFloatTwo { 0%, 100% { translate: 0 0; } 50% { translate: 0 6px; } }
/* =========================================
   COMING SOON TEXT
   ========================================= */
.coming-copy {
  max-width: 470px;
}
.work-empty .coming-soon-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1.1rem;
  color: var(--violet);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.17em;
}
.work-empty .coming-soon-label::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--grad);
}
.work-empty .coming-copy h3 {
  max-width: 15ch;
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: clamp(1.8rem, 3.5vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.045em;
}
.work-empty .coming-copy p {
  max-width: 35rem;
  margin: 0;
  color: var(--mute);
  font-size: 0.98rem;
  line-height: 1.8;
}
.coming-progress {
  position: relative;
  width: 100%;
  max-width: 250px;
  height: 3px;
  margin-top: 1.8rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bg2);
}
.coming-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: inherit;
  background: var(--grad);
  animation: progressMove 3s ease-in-out infinite;
}
@keyframes progressMove { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
.coming-caption {
  display: block;
  margin-top: 0.8rem;
  color: var(--dim);
  font-size: 0.78rem;
}
/* =========================================
   COMING SOON — RESPONSIVE LAYOUT
   ========================================= */
@media (max-width: 768px) {
  .coming-open {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .coming-art {
    width: min(78%, 260px);
  }
  .coming-copy {
    max-width: 100%;
    text-align: center;
  }
  .work-empty .coming-copy h3 {
    max-width: 100%;
  }
  .coming-progress {
    margin-right: auto;
    margin-left: auto;
  }
}
@media (max-width: 480px) {
  .work-empty {
    padding: 2rem 0 2.4rem;
  }
}
/* =========================================
   ACCESSIBILITY — REDUCED MOTION
   ========================================= */
/* =========================================
   SERVICES — MOBILE SOCIAL MEDIA ORDER
   ========================================= */
@media (max-width: 895px) {
  #social.svc-detail {
    display: flex !important;
    flex-direction: column;
  }
  #social .svc-copy {
    order: 1;
  }
  #social .svc-visual {
    order: 2;
    width: 100%;
  }
}
/* =========================================
   ABOUT PAGE — REFINED LAYOUT
   ========================================= */
.about-hero h1 {
  max-width: 17ch;
}
.about-story-section {
  padding-top: 4rem;
  padding-bottom: 5rem;
}
.about-story-copy h2 {
  max-width: 15ch;
}
.about-story-copy p {
  font-size: 1rem;
  line-height: 1.85;
}
.about-story-copy p:last-child {
  margin-bottom: 0;
}
/* =========================================
   ABOUT PAGE — POINT OF VIEW PANEL
   ========================================= */
.about-note {
  position: relative;
  overflow: hidden;
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid rgba(30, 136, 229, 0.16);
  border-radius: 22px;
  background: radial-gradient( circle at 100% 0%, rgba(99, 184, 245, 0.20), transparent 45% ), linear-gradient( 145deg, #FFFFFF, #EAF4FD );
}
.about-note-label {
  display: block;
  margin-bottom: 1.5rem;
  color: var(--violet);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.about-note h3 {
  max-width: 13ch;
  margin-bottom: 1.6rem;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.about-note-divider {
  width: 100%;
  height: 1px;
  margin-bottom: 1rem;
  background: var(--line2);
}
.about-note-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.8rem 0;
}
.about-note-item > span {
  flex: none;
  padding-top: 0.1rem;
  color: var(--violet);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.about-note-item p {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.7;
}
/* =========================================
   ABOUT PAGE — CAPABILITIES
   ========================================= */
.about-capabilities {
  padding-top: 5.5rem;
  padding-bottom: 6rem;
}
.about-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.2rem;
}
.about-capability {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 1.8rem;
  border-top: 1px solid var(--line2);
  transition: border-color 0.3s ease, transform 0.3s var(--ease);
}
.about-capability:hover {
  border-color: var(--violet-l);
  transform: translateY(-4px);
}
.about-capability-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.6rem;
  border: 1px solid var(--line2);
  border-radius: 50%;
  color: var(--violet);
  font-size: 0.75rem;
  font-weight: 800;
}
.about-capability h3 {
  margin-bottom: 0.7rem;
  font-size: 1.35rem;
}
.about-capability p {
  flex: 1;
  margin-bottom: 1.3rem;
  font-size: 0.93rem;
  line-height: 1.8;
}
.about-capability .link-arrow {
  margin-top: auto;
}
/* =========================================
   ABOUT PAGE — TEAM
   ========================================= */
#team .head {
  max-width: 42rem;
}
#team .team-card {
  height: 100%;
}
#team .team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#team .team-body {
  padding: 1.1rem 1.2rem 1.3rem;
}
#team .team-body h3 {
  margin: 0;
  font-size: 1.05rem;
}
/* =========================================
   ABOUT PAGE — FINAL CTA
   ========================================= */
.about-hero + section {
  border-top: 0;
}
@media (max-width: 768px) {
  .about-story-section {
    padding-top: 3rem;
    padding-bottom: 3.5rem;
  }
  .about-note {
    padding: 1.6rem;
  }
  .about-capability-grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .about-capability {
    padding: 1.5rem 0;
  }
  .about-capability-number {
    margin-bottom: 1rem;
  }
  #team .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}
@media (max-width: 420px) {
  #team .team-grid {
    gap: 0.75rem;
  }
  #team .team-body {
    padding: 0.9rem;
  }
}
/* =========================================
   HOMEPAGE — MINI ABOUT WITH TEAM PHOTO
   ========================================= */
section.tone .mini-about {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 2.4rem;
  align-items: center;
}
section.tone .mini-about .mini-visual {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  background: var(--bg2);
}
section.tone .mini-about .mini-visual > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
@media (max-width: 699px) {
  section.tone .mini-about {
    grid-template-columns: 1fr;
  }
}
/* =========================================
   HOMEPAGE — FIX THE TWO HERO PHOTOGRAPHS
   ========================================= */
.hero .hero-visual {
  position: relative;
  width: 100%;
  height: 28rem;
  min-width: 0;
  overflow: visible;
}
.hero .hero-photo-card {
  position: absolute;
  overflow: hidden;
  min-width: 0;
  border: 1px solid var(--line2);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px -24px rgba(18, 22, 28, 0.25);
}
.hero .hero-photo-card-main {
  left: 0;
  top: 3%;
  width: 78%;
  height: 76%;
  z-index: 1;
}
.hero .hero-photo-card-secondary {
  right: 0;
  bottom: 3%;
  width: 46%;
  height: 52%;
  z-index: 2;
}
.hero .hero-real-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 900px) {
  .hero .hero-visual {
    height: 25rem;
  }
}
@media (max-width: 600px) {
  .hero .hero-visual {
    height: 21rem;
  }
  .hero .hero-photo-card-main {
    width: 82%;
    height: 75%;
  }
  .hero .hero-photo-card-secondary {
    width: 48%;
    height: 49%;
  }
}
/* =========================================
   HOMEPAGE — IMAGE-LED SELECTED WORK
   ========================================= */
.work-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}
.work-preview-item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-preview-item img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: contain;
  object-position: center;
  border-radius: var(--radius);
  transition: transform 0.4s var(--ease);
}
.work-preview-item:hover img {
  transform: scale(1.025);
}
#selected-work .explore-row {
  margin-top: 2.2rem;
  text-align: center;
}
@media (max-width: 900px) {
  .work-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
  .work-preview-item:last-child {
    grid-column: 1 / -1;
  }
  .work-preview-item:last-child img {
    width: 100%;
    max-width: 320px;
  }
}
@media (max-width: 520px) {
  .work-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
  }
  .work-preview-item img {
    height: 220px;
    border-radius: 12px;
  }
  .work-preview-item:last-child {
    grid-column: auto;
  }
}
.hp {
  position:absolute;
  left:-10000px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-success {
  text-align:center;
  padding:1.2rem .5rem;
  animation:fsIn .6s var(--ease) both;
}
.fs-visual {
  position:relative;
  width:110px;
  height:110px;
  margin:0 auto 1.2rem;
  display:grid;
  place-items:center;
}
.fs-ring {
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--violet-l);
  opacity:0;
  animation:fsRing 2.2s ease-out infinite;
}
.fs-ring-2 {
  animation-delay:1.1s;
}
.fs-logo {
  position:relative;
  z-index:1;
  width:64px;
  height:auto;
  animation:fsPop .6s var(--ease) both;
}
.fs-tick {
  position:absolute;
  right:4px;
  bottom:4px;
  z-index:2;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--grad);
  display:grid;
  place-items:center;
  box-shadow:0 8px 18px -8px rgba(11,95,191,.6);
  animation:fsPop .5s .3s var(--ease) both;
}
.fs-tick svg {
  width:18px;
  height:18px;
}
.form-success h3 {
  margin-bottom:.4rem;
}
.form-success p {
  margin:0 auto;
  max-width:32ch;
}
@keyframes fsRing { 0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0} }
@keyframes fsPop { 0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1} }
@keyframes fsIn { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none} }
.modal.is-success > h2, .modal.is-success > p {
  display:none;
}
.legal {
  max-width:46rem;
}
.legal h2 {
  font-size:1.35rem;
  margin-top:2.2rem;
}
.legal p {
  max-width:none;
}
.legal a {
  color:var(--violet);
  font-weight:600;
}
/* Reduced motion (single block, kept last so it wins) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation:none!important;
    transition:none!important;
  }
  .reveal {
    opacity:1;
    transform:none;
  }
  .grad {
    animation:none;
  }
  .wd {
    transform:none;
    opacity:1;
    transition:none;
  }
  .svc-card, .team-card {
    transform:none!important;
  }
  .social-marquee-row {
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .social-marquee-track {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
  .social-marquee-group img {
    transition: none;
  }
  .work-empty:not([hidden]), .coming-halo, .coming-ring, .coming-core, .coming-orbit-tag, .coming-progress span {
    animation: none !important;
  }
  .work-preview-item img {
    transition: none;
  }
  .work-preview-item:hover img {
    transform: none;
  }
  .fs-ring {
    display:none;
  }
  .form-success, .fs-logo, .fs-tick {
    animation:none;
  }
}

/* ============ Additions: accessibility, forms and layout helpers ============ */
[hidden]{display:none!important}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:200;padding:.6rem 1.1rem;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none;transition:top .2s}
.skip-link:focus{top:1rem}
.eyebrow--center{justify-content:center}
.explore-row--start{text-align:left;margin-top:1.6rem}
.link-btn{background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer}
.hero h1 .ln:nth-child(1)>span{--i:0}
.hero h1 .ln:nth-child(2)>span{--i:1}
.field-check label{display:flex;align-items:flex-start;gap:.65rem;margin:0;font-size:.9rem;font-weight:500;color:var(--mute);cursor:pointer}
.field-check input{width:auto;margin:.28rem 0 0;padding:0;flex:none;accent-color:var(--violet);box-shadow:none}
.field-check a{color:var(--violet);font-weight:600}
.form-status{min-height:1.4em;margin:.8rem 0 0;font-size:.9rem;color:var(--mute)}
.form-status.is-error{color:#B42318}

/* Revealed cards keep their tilt effect */
.svc-card.reveal.in,.team-card.reveal.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty2,0px)) scale(var(--sc,1))}

/* Enquiry panel: hidden from view and from the keyboard when closed.
   Its shadow otherwise shows at the screen edge, and its fields stay tabbable. */
.modal:not(.is-open){visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s}
.modal.is-open{visibility:visible;transition:transform .45s var(--ease)}

/* Keep the enquiry title clear of the close button */
.modal h2{padding-right:2.8rem}

/* Footer social icons */
.social-links{display:flex;gap:.7rem}
.social-links a{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--line2);background:#fff;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.social-links a:hover{transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(18,22,28,.35);border-color:transparent}
.social-links svg{width:1.15rem;height:1.15rem}
.social-links .si-linkedin{color:#0A66C2}

/* Phones: show the words first, then the team photo (desktop is unchanged) */
@media (max-width: 699px) {
  section.tone .mini-about .mini-visual { order: 2; }
}