/* ============================================================
   WEBROLLER — DESIGN SYSTEM
   Monochrome dark system. All surfaces derive from white-opacity
   layers over a single background colour. No accent hues.
   ============================================================ */

:root{
  /* ---- Core palette (ONLY these two literal colours exist) ---- */
  --bg:        #010002;
  --text:      #ffffff;

  /* ---- White-opacity system (used for everything else) ---- */
  --w-03: rgba(255,255,255,.03);
  --w-04: rgba(255,255,255,.04);
  --w-06: rgba(255,255,255,.06);
  --w-08: rgba(255,255,255,.08);
  --w-10: rgba(255,255,255,.10);
  --w-12: rgba(255,255,255,.12);
  --w-15: rgba(255,255,255,.15);
  --w-20: rgba(255,255,255,.20);
  --w-30: rgba(255,255,255,.30);
  --w-40: rgba(255,255,255,.40);
  --w-50: rgba(255,255,255,.50);
  --w-60: rgba(255,255,255,.60);
  --w-70: rgba(255,255,255,.70);
  --w-85: rgba(255,255,255,.85);

  /* ---- Type ---- */
  --font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Fluid type scale ---- */
  --fs-hero:  clamp(2.6rem, 5.4vw, 5.4rem);
  --fs-h1:    clamp(2.2rem, 3.6vw, 3.4rem);
  --fs-h2:    clamp(1.9rem, 3vw, 2.7rem);
  --fs-h3:    clamp(1.3rem, 1.8vw, 1.6rem);
  --fs-lead:  clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body:  1rem;
  --fs-small: .875rem;
  --fs-tiny:  .75rem;

  /* ---- Layout ---- */
  --container: 1320px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-pad: clamp(64px, 9vw, 128px);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .25s;
  --dur-mid: .5s;
  --dur-slow: .9s;

  --nav-h: 88px;
}

/* ============================= RESET ============================= */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  opacity:1;
  transition:opacity .32s var(--ease);
}
/* Page-transition step: current page content fades out underneath the
   GIF overlay when an internal link is clicked (see script.js §16) */
body.page-exiting{ opacity:0; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
ul{ list-style:none; }
input, textarea, select{ font-family:inherit; color:inherit; }
h1,h2,h3,h4{ font-weight:700; line-height:1.08; letter-spacing:-.02em; }
svg{ display:block; }

::selection{ background:var(--text); color:var(--bg); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--text);
  outline-offset:3px;
  border-radius:4px;
}

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--w-15); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:var(--w-30); }

/* ============================= LAYOUT ============================= */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-pad); position:relative; }
.section-tight{ padding-block:calc(var(--section-pad)*.55); }
.section-border-t{ border-top:1px solid var(--w-08); }

main{ display:block; }

/* Eyebrow label */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:var(--fs-tiny);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--w-60);
  font-weight:600;
  margin-bottom:18px;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--w-40);
  display:inline-block;
}

.italic-accent{ font-style:italic; font-weight:600; opacity:.72; }

.lead{ font-size:var(--fs-lead); color:var(--w-70); max-width:56ch; overflow-wrap:break-word; }

/* Section head row */
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  margin-bottom:56px;
  flex-wrap:wrap;
}
.section-head h2{ font-size:var(--fs-h2); max-width:16ch; }
.section-head .lead{ margin-top:14px; }

/* ============================= BUTTONS ============================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  border-radius:var(--radius-pill);
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:.01em;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space:nowrap;
  position:relative;
  isolation:isolate;
}
.btn svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease); }

.btn-primary{
  background:var(--text);
  color:var(--bg);
  border:1px solid var(--text);
}
.btn-primary:hover{ transform:translateY(-2px); background:var(--w-85); }

.btn-outline{
  background:var(--w-04);
  color:var(--text);
  border:1px solid var(--w-20);
  backdrop-filter:blur(6px);
}
.btn-outline:hover{ background:var(--w-10); border-color:var(--w-40); transform:translateY(-2px); }

.btn-ghost{
  background:transparent;
  border:1px solid var(--w-15);
  color:var(--text);
  padding:14px 24px;
}
.btn-ghost:hover{ background:var(--w-06); border-color:var(--w-30); }

.btn:hover svg{ transform:translate(2px,-2px); }

.btn-sm{ padding:10px 18px; font-size:var(--fs-tiny); }

/* magnetic wrapper target */
.magnetic{ will-change:transform; }

/* Icon circle buttons (slider arrows etc) */
.icon-btn{
  width:52px; height:52px;
  border-radius:50%;
  border:1px solid var(--w-15);
  background:var(--w-04);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  flex-shrink:0;
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ background:var(--w-12); border-color:var(--w-30); transform:scale(1.06); }
.icon-btn:active{ transform:scale(.96); }
.icon-btn[disabled]{ opacity:.3; pointer-events:none; }

/* ============================= NAVIGATION ============================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:900;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  transition:background var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), height var(--dur-mid) var(--ease), backdrop-filter var(--dur-mid) var(--ease);
  border-bottom:1px solid transparent;
  background-color:#000000 !important;
  background-image:none;
  opacity:1;
  backdrop-filter:none;
}
.site-header.is-scrolled{
  background-color:#000000 !important;
  background-image:none;
  opacity:1;
  backdrop-filter:none;
  border-bottom-color:var(--w-08);
  height:74px;
}
.site-header.is-hidden{ transform:translateY(-100%); }

.nav-inner{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.02em;
}
/* Animated GIF logo (replaces the old spinning-mark + wordmark).
   height is fixed per breakpoint, width:auto preserves the GIF's native
   aspect ratio so it's never stretched. */
.logo-gif{
  display:block;
  height:68px;
  width:auto;
  max-width:none;
  object-fit:contain;
}
@media (max-width:860px){
  .logo-gif{ height:48px; }
}
.logo .dot{
  color:var(--w-50);
  font-weight:800;
}
.logo-mark{
  width:34px; height:34px;
  border-radius:50%;
  border:1px solid var(--w-30);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
}
.logo-mark span{
  position:absolute; inset:0;
  background:conic-gradient(from 0deg, var(--w-04), var(--w-40), var(--w-04) 40%);
  animation:spin 5s linear infinite;
}
.logo-mark::after{
  content:'';
  position:absolute; inset:4px;
  border-radius:50%;
  background:var(--bg);
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.main-nav{ display:flex; align-items:center; gap:4px; }
.main-nav > ul{ display:flex; align-items:center; gap:6px; }
.main-nav a{
  display:flex; align-items:center; gap:6px;
  padding:10px 16px;
  font-size:var(--fs-small);
  font-weight:500;
  color:var(--w-70);
  border-radius:var(--radius-pill);
  transition:color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.main-nav a:hover, .main-nav a.active{ color:var(--text); background:var(--w-06); }
.main-nav .caret{ width:9px; height:9px; transition:transform var(--dur-fast) var(--ease); }
.has-dropdown:hover .caret, .has-dropdown.open .caret{ transform:rotate(180deg); }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute;
  top:calc(100% + 14px);
  left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:270px;
  background:rgba(10,10,11,.92);
  backdrop-filter:blur(18px);
  border:1px solid var(--w-10);
  border-radius:var(--radius-md);
  padding:10px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft), visibility var(--dur-fast);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
}
.has-dropdown:hover .dropdown,
.has-dropdown.open .dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.dropdown li a{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  border-radius:var(--radius-sm);
  font-size:var(--fs-small);
  color:var(--w-80,var(--w-70));
  width:100%;
}
.dropdown li a:hover{ background:var(--w-08); color:var(--text); padding-left:18px; }
.dropdown li a.active{ background:var(--w-08); color:var(--text); }
.dropdown li a svg{ width:16px; height:16px; opacity:.6; flex-shrink:0; }
.dropdown li a .dropdown-thumb{
  width:38px; height:38px; border-radius:8px; object-fit:cover;
  flex-shrink:0; opacity:.9; transition:opacity var(--dur-fast) var(--ease);
}
.dropdown li a:hover .dropdown-thumb, .dropdown li a.active .dropdown-thumb{ opacity:1; }

/* Expanded services menu (16 items): 2 columns, scrollable if it ever
   exceeds viewport height, still the same dropdown visual language. */
.dropdown-grid{
  min-width:520px;
  max-height:min(70vh, 560px);
  overflow-y:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  align-content:start;
}
@media (max-width:640px){
  .dropdown-grid{ min-width:280px; grid-template-columns:1fr; }
}

.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-actions{ display:none; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border:1px solid var(--w-15);
  border-radius:50%;
  flex-shrink:0;
}
.nav-toggle .bars{ position:relative; width:16px; height:11px; }
.nav-toggle .bars span{
  position:absolute; left:0; width:100%; height:1.5px; background:var(--text);
  transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
}
.nav-toggle .bars span:nth-child(1){ top:0; }
.nav-toggle .bars span:nth-child(2){ top:5px; }
.nav-toggle .bars span:nth-child(3){ top:10px; }
.nav-toggle.open .bars span:nth-child(1){ top:5px; transform:rotate(45deg); }
.nav-toggle.open .bars span:nth-child(2){ opacity:0; }
.nav-toggle.open .bars span:nth-child(3){ top:5px; transform:rotate(-45deg); }

/* Mobile nav panel */
.mobile-nav{
  position:fixed; inset:0;
  background:rgba(1,0,2,.98);
  backdrop-filter:blur(20px);
  z-index:850;
  display:flex; flex-direction:column;
  padding:calc(var(--nav-h) + 20px) var(--gutter) 40px;
  transform:translateY(-100%);
  transition:transform var(--dur-mid) var(--ease-soft);
  overflow-y:auto;
}
.mobile-nav.open{ transform:translateY(0); }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav > ul > li{ border-bottom:1px solid var(--w-08); }
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 4px;
  font-size:1.4rem;
  font-weight:600;
}
.mobile-nav .mobile-sub{
  max-height:0;
  overflow:hidden;
  transition:max-height var(--dur-mid) var(--ease-soft);
}
.mobile-nav .mobile-sub.open{ max-height:600px; }
.mobile-nav .mobile-sub a{ font-size:1rem; font-weight:500; color:var(--w-70); padding:14px 4px 14px 18px; }
/* Bug fix: caret icon now visibly rotates when a mobile submenu opens (was dead CSS before) */
.mobile-nav .m-caret{ display:inline-flex; transition:transform var(--dur-fast) var(--ease); }
.mobile-nav .m-caret.rot{ transform:rotate(180deg); }
.mobile-nav-cta{ margin-top:32px; display:flex; flex-direction:column; gap:14px; }

/* ============================= HERO ============================= */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh; /* mobile-safe viewport height — ignores browser chrome jump on scroll */
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding-top:var(--nav-h);
}
.hero-media{
  /* Slightly oversized so the lightweight mouse-parallax + scroll-depth
     parallax translate (combined) never reveals an edge/gap at the
     sides of the viewport. */
  position:absolute; top:-4%; left:-4%; right:-4%; bottom:-4%;
  z-index:0;
  transition:transform .6s var(--ease-soft);
  will-change:transform;
}
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ---- Per-slide cinematic background layers ----
   Each layer crossfades (opacity) and scales in (fade + scale) when it
   becomes active; the <img> inside it runs its own slow, continuous
   Ken Burns zoom independently, so the two transforms never fight. */
.hero-bg-slide{
  position:absolute; inset:0;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 1.6s var(--ease-soft), transform 2.4s var(--ease-soft);
}
.hero-bg-slide.active{ opacity:1; transform:scale(1); }

.hero-bg-img{
  animation:kenburns 24s ease-in-out infinite alternate;
}
.hero-bg-slide:nth-of-type(2) .hero-bg-img{ animation-duration:28s; animation-direction:alternate-reverse; }
.hero-bg-slide:nth-of-type(3) .hero-bg-img{ animation-duration:26s; }

@keyframes kenburns{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.12) translate(-1%,-1%); }
}

/* Darker, layered overlay (radial + linear) for stronger text contrast —
   same near-black brand colour (--bg / rgba(1,0,2,...)) as before, just a
   deeper gradient rather than a flat wash. */
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(1,0,2,.15) 0%, rgba(1,0,2,.5) 55%, rgba(1,0,2,.82) 100%),
    linear-gradient(180deg, rgba(1,0,2,.72) 0%, rgba(1,0,2,.42) 42%, var(--bg) 100%);
}

/* ---- Floating light accents (white-opacity only, no new brand colours) ---- */
.hero-accents{
  position:absolute; inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.hero-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  background:radial-gradient(circle, var(--w-15) 0%, rgba(255,255,255,0) 70%);
  opacity:.55;
  will-change:transform;
  animation:heroOrbFloat 16s ease-in-out infinite;
}
.hero-orb-1{ width:360px; height:360px; top:6%; left:6%; animation-duration:17s; }
.hero-orb-2{ width:280px; height:280px; bottom:10%; right:8%; animation-duration:21s; animation-delay:-6s; }
@keyframes heroOrbFloat{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(26px,-20px,0) scale(1.08); }
}

.hero-grain{
  position:absolute; inset:0;
  z-index:1;
  opacity:.05;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  gap:28px;
}

.hero-index{
  flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:var(--fs-tiny);
  color:var(--w-50);
  letter-spacing:.1em;
}
.hero-index .rule{ width:1px; height:34px; background:var(--w-20); }

.hero-nav-arrow{ display:none; }

.hero-slides{ position:relative; flex:1; min-height:280px; }
.hero-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease-soft), visibility .7s;
}
.hero-slide.active{ position:relative; opacity:1; visibility:visible; }

/* Each element gets its own staggered "rise + fade" entrance, replayed
   every time its slide becomes active — a subtler, more premium reveal
   than animating the whole slide as one block. */
.hero-slide h1,
.hero-slide .lead,
.hero-slide .hero-actions{
  opacity:0;
  transform:translateY(28px);
}
.hero-slide.active h1{ animation:heroRise .9s var(--ease-soft) .15s forwards; }
.hero-slide.active .lead{ animation:heroRise .9s var(--ease-soft) .32s forwards; }
.hero-slide.active .hero-actions{ animation:heroRise .9s var(--ease-soft) .48s forwards; }
@keyframes heroRise{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero-slide h1, .hero-slide .lead, .hero-slide .hero-actions{ animation:none !important; opacity:1; transform:none; }
}

.hero-slide h1{
  font-size:var(--fs-hero);
  max-width:15ch;
}
.hero-slide .lead{ margin-top:22px; font-size:var(--fs-lead); }
.hero-slide .hero-actions{ margin-top:34px; display:flex; gap:16px; flex-wrap:wrap; }

.hero-controls{
  position:relative; z-index:2;
  width:100%; max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:48px;
}
.hero-arrows{ display:flex; gap:12px; }
.hero-dots{ display:flex; gap:10px; }
.hero-dots button{
  width:8px; height:8px; border-radius:50%;
  background:var(--w-20);
  transition:all var(--dur-fast) var(--ease);
}
.hero-dots button.active{ background:var(--text); width:26px; border-radius:5px; }

.hero-progress{
  position:relative; z-index:2;
  width:100%; max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
  margin-top:14px;
}
.hero-progress-track{
  position:relative;
  height:2px;
  background:var(--w-10);
  border-radius:2px;
  overflow:hidden;
}
.hero-progress-fill{
  position:absolute; top:0; left:0; bottom:0;
  width:0%;
  background:var(--text);
  border-radius:2px;
}

@media (prefers-reduced-motion: reduce){
  .hero-bg-img{ animation:none !important; }
  .hero-orb{ animation:none !important; }
  .hero-media{ transition:none !important; }
}

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:var(--fs-tiny); color:var(--w-40); letter-spacing:.15em; text-transform:uppercase;
  z-index:2;
}
.scroll-cue .line{ width:1px; height:36px; background:linear-gradient(var(--w-50), transparent); animation:scrollcue 2s infinite var(--ease); }
@keyframes scrollcue{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ============================= MARQUEE ============================= */
.marquee-wrap{
  overflow:hidden;
  border-top:1px solid var(--w-08);
  border-bottom:1px solid var(--w-08);
  padding-block:22px;
  white-space:nowrap;
}
.marquee-track{
  display:inline-flex;
  align-items:center;
  gap:36px;
  animation:marquee 32s linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.marquee-track span{
  font-size:var(--fs-h3);
  font-weight:600;
  color:var(--w-30);
  display:inline-flex; align-items:center; gap:36px;
}
.marquee-track .sep{ color:var(--w-15); font-weight:400; }

.marquee-track.marquee-sm span{ font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em; color:var(--w-40); font-weight:600; }

/* Process flow strip (icons + arrows) */
.flow-strip{
  display:flex;
  align-items:flex-start;
  gap:0;
  overflow-x:auto;
  padding-bottom:8px;
  scrollbar-width:none;
}
.flow-strip::-webkit-scrollbar{ display:none; }
.flow-step{
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  gap:14px;
  min-width:150px;
  flex-shrink:0;
  padding-inline:14px;
}
.flow-icon{
  width:58px; height:58px;
  border-radius:50%;
  border:1px solid var(--w-15);
  background:var(--w-04);
  display:flex; align-items:center; justify-content:center;
}
.flow-icon svg{ width:24px; height:24px; opacity:.85; }
.flow-step h4{ font-size:.92rem; font-weight:700; }
.flow-step p{ font-size:var(--fs-tiny); color:var(--w-50); max-width:16ch; }
.flow-arrow{
  flex-shrink:0;
  width:44px; margin-top:29px;
  display:flex; align-items:center; justify-content:center;
  color:var(--w-20);
}
.flow-arrow svg{ width:26px; height:12px; }

/* ============================= CARDS ============================= */
.card{
  background:var(--w-03);
  border:1px solid var(--w-08);
  border-radius:var(--radius-lg);
  transition:transform var(--dur-mid) var(--ease-soft), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-mid) var(--ease-soft);
}
.card:hover{
  transform:translateY(-8px);
  border-color:var(--w-20);
  background:var(--w-04);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}

/* Tag chip */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-tiny);
  padding:6px 13px;
  border-radius:var(--radius-pill);
  background:var(--w-08);
  border:1px solid var(--w-10);
  color:var(--w-70);
  font-weight:600;
  letter-spacing:.02em;
}

/* ============================= REVEAL ANIMATIONS ============================= */
[data-reveal]{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft), filter .9s var(--ease-soft);
  filter:blur(6px);
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); filter:blur(0); }
[data-reveal="fade"]{ transform:none; filter:none; }
[data-reveal="fade"].in-view{ opacity:1; }
[data-reveal="scale"]{ transform:scale(.92); filter:none; }
[data-reveal="scale"].in-view{ opacity:1; transform:scale(1); }
[data-reveal="left"]{ transform:translateX(-40px); filter:none; }
[data-reveal="left"].in-view{ opacity:1; transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(40px); filter:none; }
[data-reveal="right"].in-view{ opacity:1; transform:translateX(0); }

.stagger > *{ transition-delay:calc(var(--i, 0) * 90ms); }

/* ============================= ABOUT SECTION (IBLIX-style editorial) ============================= */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,64px);
  align-items:center;
}

/* ---- Left column ---- */
.about-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
  min-width:0; /* bug fix: pairs with .about-right, keeps both grid tracks at 1fr/1fr */
}
.about-heading-big{
  font-size:clamp(2.8rem, 6vw, 5.4rem);
  line-height:.9;
  letter-spacing:-.03em;
  font-weight:800;
  max-width:11ch;
  margin-bottom:26px;
}
.about-left .lead{ margin-bottom:28px; max-width:48ch; }

.about-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.about-tag{
  display:inline-flex;
  align-items:center;
  padding:9px 18px;
  border-radius:var(--radius-pill);
  background:var(--w-05,var(--w-04));
  border:1px solid var(--w-08);
  font-size:var(--fs-tiny);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--w-70);
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.about-tag:hover{ background:var(--w-08); border-color:var(--w-20); color:var(--text); }

/* ---- Right column ---- */
.about-right{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0; /* bug fix: grid items default to min-width:auto, which let the
                  marquee's nowrap content force the whole grid (and page)
                  to overflow horizontally instead of being clipped */
}

.feature-card{
  background:var(--w-03);
  border:1px solid var(--w-08);
  border-radius:20px;
  padding:clamp(24px,3vw,36px);
  min-width:0; /* bug fix: allows the marquee's overflow:hidden to actually clip */
  transition:transform var(--dur-mid) var(--ease-soft), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.feature-card:hover{ transform:translateY(-6px); border-color:var(--w-20); background:var(--w-05,var(--w-04)); }
.feature-card .eyebrow{ margin-bottom:16px; }
.feature-card .industries-line{
  font-size:clamp(1.1rem,2vw,1.5rem);
  font-weight:700;
  line-height:1.4;
  color:var(--w-85);
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  flex-shrink:0;
  padding-right:.4em; /* even gap between the looped copy and the next one */
}
.feature-card .industries-line .slash{ color:var(--w-25,var(--w-20)); font-weight:400; margin-inline:4px; }

/* Industries marquee: continuous, GPU-accelerated (translate3d), pauses on hover,
   duplicated track (x2) so the -50% loop point is seamless with no gap/jump. */
.industries-marquee{
  overflow:hidden;
  width:100%;
  min-width:0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.industries-track{
  display:inline-flex;
  align-items:center;
  width:max-content;
  will-change:transform;
  animation:industriesMarquee 26s linear infinite;
  backface-visibility:hidden;
}
.feature-card:hover .industries-track,
.industries-marquee.is-paused .industries-track{
  animation-play-state:paused;
}
@keyframes industriesMarquee{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}
@media (max-width:640px){
  .industries-track{ animation-duration:18s; }
}

.about-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
/* Blog "By The Numbers" section uses 4 stats — dedicated class instead of an
   inline style, so the 380px responsive breakpoint below still applies */
.about-stats.about-stats-4col{ grid-template-columns:repeat(4,1fr); }
@media (max-width:480px){
  .about-stats.about-stats-4col{ grid-template-columns:repeat(2,1fr); }
}
.stat-card-mini{
  background:var(--w-03);
  border:1px solid var(--w-08);
  border-radius:20px;
  padding:22px 20px;
  transition:transform var(--dur-mid) var(--ease-soft), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.stat-card-mini:hover{ transform:translateY(-6px); border-color:var(--w-20); background:var(--w-05,var(--w-04)); }
.stat-card-mini .m-label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--w-50);
  font-weight:700;
  margin-bottom:10px;
}
.stat-card-mini .m-num{
  font-size:clamp(1.5rem,2.4vw,2.1rem);
  font-weight:800;
  letter-spacing:-.02em;
}

@media (max-width:640px){
  .about-stats{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .stat-card-mini{ padding:16px 14px; }
}
@media (max-width:380px){
  /* very narrow phones: 3 columns of stat cards no longer fit without
     overflowing the viewport, so reflow to 2 columns (3 rows) instead */
  .about-stats{ grid-template-columns:repeat(2,1fr); }
}

/* ============================= STATS ============================= */
.stats-bar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--w-08);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--w-03);
}
.stat-item{
  padding:clamp(26px,3vw,40px) clamp(20px,3vw,32px);
  border-right:1px solid var(--w-08);
}
.stat-item:last-child{ border-right:none; }
.stat-item .ico{
  width:42px; height:42px; border-radius:50%;
  background:var(--w-08); border:1px solid var(--w-10);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.stat-item .ico svg{ width:18px; height:18px; }
.stat-num{
  font-size:clamp(1.8rem,2.6vw,2.4rem);
  font-weight:800;
  letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:2px;
}
.stat-label{ font-weight:700; margin-top:4px; margin-bottom:10px; font-size:1rem; }
.stat-desc{ font-size:var(--fs-small); color:var(--w-50); max-width:26ch; }

/* ============================= PORTFOLIO ============================= */
.filter-tabs{
  display:flex; align-items:center; gap:10px;
  overflow-x:auto;
  padding-bottom:6px;
  margin-bottom:40px;
  scrollbar-width:none;
}
.filter-tabs::-webkit-scrollbar{ display:none; }
.filter-tabs button{
  flex-shrink:0;
  padding:11px 20px;
  border-radius:var(--radius-pill);
  border:1px solid var(--w-10);
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--w-60);
  transition:all var(--dur-fast) var(--ease);
}
.filter-tabs button:hover{ color:var(--text); border-color:var(--w-25,var(--w-20)); }
.filter-tabs button.active{ background:var(--text); color:var(--bg); border-color:var(--text); }
.filter-tabs .sep{ color:var(--w-15); flex-shrink:0; }

/* Portfolio carousel: responsive visible-card-count, single source of
   truth shared with script.js (which reads --portfolio-visible so the
   JS slide math always matches what's actually on screen). */
:root{
  --portfolio-visible: 4; /* Desktop */
  --portfolio-gap: 22px;
}
@media (max-width:1199px){ :root{ --portfolio-visible: 3; } } /* Laptop */
@media (max-width:899px){  :root{ --portfolio-visible: 2; } } /* Tablet */
@media (max-width:639px){  :root{ --portfolio-visible: 1; } } /* Mobile */

.portfolio-row{
  position:relative;
  overflow:hidden; /* carousel viewport — only visible cards remain on screen */
  cursor:grab;
}
.portfolio-row.is-dragging{ cursor:grabbing; }
.portfolio-track{
  display:flex;
  gap:var(--portfolio-gap);
  padding-bottom:10px;
  will-change:transform;
  transform:translate3d(0,0,0);
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
  cursor:grab;
  touch-action:pan-y; /* vertical page scroll stays native; horizontal drag is handled in JS */
}
.portfolio-track.is-dragging{ transition:none; cursor:grabbing; } /* 1:1 tracking while dragging */
.portfolio-track.no-transition{ transition:none; } /* used for the seamless loop-point jump, never visible to the user */
.portfolio-track.is-filtering{ transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .25s var(--ease); }
.portfolio-card{
  flex:0 0 calc((100% - (var(--portfolio-visible) - 1) * var(--portfolio-gap)) / var(--portfolio-visible));
  min-width:0; /* prevents the flex/grid min-width:auto overflow bug seen elsewhere on this site */
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
  background:var(--w-03);
  border:1px solid var(--w-08);
  user-select:none; /* avoid accidental text/image selection while dragging */
}
.portfolio-card img{ -webkit-user-drag:none; user-drag:none; }
.portfolio-card .thumb{
  position:relative; height:220px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--w-03);
}
/* object-fit:contain — shows the complete image with no cropping.
   The .thumb background above fills any letterboxed space so there
   is no bare/blank area beside the image. */
.portfolio-card .thumb img{ width:100%; height:100%; object-fit:contain; object-position:center; transition:transform .7s var(--ease-soft); }
.portfolio-card:hover .thumb img{ transform:scale(1.08); }
.portfolio-card .tag{
  position:absolute; top:14px; left:14px;
  z-index:2;
}
.portfolio-card .body{ padding:20px 22px 24px; }
.portfolio-card h4{ font-size:1.05rem; margin-bottom:6px; }
.portfolio-card .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.portfolio-card .row span{ font-size:var(--fs-small); color:var(--w-50); }
.portfolio-card .row svg{ width:15px; height:15px; opacity:.6; transition:transform var(--dur-fast) var(--ease); }
.portfolio-card:hover .row svg{ transform:translate(3px,-3px); opacity:1; }

/* ===== Home "Portfolios" row (index.html only) — remove the blank
   letterbox/pillarbox strip around each thumbnail =====
   Cause: the base .thumb above is a FIXED 220px-tall box and its img
   uses object-fit:contain, which never crops — so whenever a photo's
   own aspect ratio doesn't exactly match that fixed box, the browser
   is forced to leave blank space on the sides (portrait/near-square
   photos) or top/bottom (wide photos) to show the complete image.
   That's the actual, confirmed source of the gap — not stray
   margin/padding.
   Fix: for this row only, the box no longer forces a fixed height —
   it now sizes itself to each image's own natural aspect ratio
   (width stays 100%, height switches from 100% to auto), so the box
   always matches the photo exactly and there is never any leftover
   space to fill. object-fit:contain is left completely unchanged
   (it simply has nothing left to "fit" once box == image); the image
   itself is never cropped, resized, or distorted — it renders at its
   own true shape. The one accepted trade-off (per explicit sign-off)
   is that thumbnail — and therefore overall card — height now varies
   slightly card-to-card based on each photo's own shape, instead of
   forcing every card to the same fixed height. align-self:start
   keeps each card sized to its own content instead of being
   grid-stretched to match its tallest sibling (which would just move
   the blank space from above/below the image to below the card body
   instead). Scoped strictly to .portfolios-row (unique to index.html)
   so every other .portfolio-card usage on the site — Services
   sub-pages, the Case Studies listing page, the Creative Design
   portfolio, the main Portfolio page — keeps its existing fixed-height
   thumb exactly as it is today. */
.portfolios-row .portfolio-card{ align-self:start; }
.portfolios-row .portfolio-card .thumb{
  height:auto;
  display:block;
}
.portfolios-row .portfolio-card .thumb img{
  height:auto;
  display:block;
}

/* ===== Services / Sub-service Portfolio cards — sized to match News & Events =====
   Client request: Services dropdown/sub-service page portfolio cards should use
   the same card proportions as the News & Events cards (news.html). The grid
   wrapper on these pages was switched from .grid-4 to .grid-3 in the HTML
   (reusing the exact News & Events grid class/values instead of duplicating
   CSS, 3 cards per row, 24px gap — identical to news.html).
   Only the thumb height and body padding are overridden here, scoped to the
   #portfolio section so nothing on News & Events, Blogs, the main Portfolio
   page, Case Studies, or the Home page is affected. object-fit stays
   "contain" (unchanged) so service images are never cropped, per the
   client's explicit instruction — only the image-area HEIGHT now matches
   the News & Events reference. */
#portfolio .portfolio-card .thumb{ height:210px; }
#portfolio .portfolio-card .body{ padding:24px; }

/* ===== Case Studies page cards — sized to match News & Events =====
   Client request: the Case Study cards should share the same card
   dimensions as the News & Events cards (news.html): thumbnail height,
   body padding, grid columns/gap and responsive behaviour. Scoped to the
   existing [data-filter-target="case-studies-page"] grid only (the Case
   Studies listing page), so no other .portfolio-card usage elsewhere on
   the site (Home page Portfolios preview, Services sub-pages, Creative
   Design portfolio) is affected. Grid columns/gap and hover/border-radius
   already match .news-card via the shared .grid-3 / .card base classes. */
[data-filter-target="case-studies-page"] .portfolio-card .thumb{ height:210px; }
[data-filter-target="case-studies-page"] .portfolio-card .body{ padding:24px; }
/* Used only on cards whose source image should fill the thumbnail
   edge-to-edge (matching the News & Events cover treatment) instead of
   the default letterboxed "contain" fit used by the other Case Study
   thumbnails. Position kept centered so the full subject stays visible. */
[data-filter-target="case-studies-page"] .portfolio-card .thumb.thumb-cover img{ object-fit:cover; object-position:center; }

/* ===== Creative Design Portfolio (branding.html) — scoped overrides only =====
   2 cards per row, full uncropped images, equal card heights. Reuses the
   existing .grid-3 / .portfolio-card / .thumb classes without touching their
   global rules elsewhere on the site. */
#creative-design-portfolio .grid-3{
  grid-template-columns:repeat(2, minmax(0,1fr));
}
#creative-design-portfolio .portfolio-card{ display:flex; flex-direction:column; }
#creative-design-portfolio .portfolio-card .thumb{
  height:460px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--w-03);
}
#creative-design-portfolio .portfolio-card .thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
#creative-design-portfolio .portfolio-card .body{ display:flex; flex-direction:column; flex:1; }
@media (max-width:640px){
  #creative-design-portfolio .grid-3{ grid-template-columns:1fr; }
  #creative-design-portfolio .portfolio-card .thumb{ height:380px; }
}

.controls-row{ display:flex; justify-content:flex-end; gap:12px; margin-top:28px; }

/* Case study cards */
.case-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.case-card{ padding:24px; display:flex; flex-direction:column; }
.case-card .thumb{
  border-radius:var(--radius-md); overflow:hidden; height:190px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background:var(--w-03);
}
/* object-fit:contain — shows the complete image with no cropping.
   The .thumb background above fills any letterboxed space so there
   is no bare/blank area beside the image. */
.case-card .thumb img{ width:100%; height:100%; object-fit:contain; object-position:center; transition:transform .7s var(--ease-soft); }
.case-card:hover .thumb img{ transform:scale(1.06); }
.case-card .tags{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.case-card h4{ font-size:1.2rem; margin-bottom:10px; }
.case-card p{ font-size:var(--fs-small); color:var(--w-60); margin-bottom:22px; flex:1; }
.case-metrics{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--w-08);
  padding-top:18px;
  margin-bottom:18px;
}
.case-metrics div{ text-align:left; }
.case-metrics .m-label{ font-size:.65rem; text-transform:uppercase; letter-spacing:.06em; color:var(--w-40); margin-bottom:6px; }
.case-metrics .m-val{ font-size:1.15rem; font-weight:800; }
.case-card .view-link{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-small); font-weight:700; }
.case-card .view-link svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease); }
.case-card:hover .view-link svg{ transform:translate(3px,-3px); }

/* ============================= BRANDS ============================= */
.brands-head{ text-align:center; margin-bottom:44px; }
.brands-head .eyebrow{ justify-content:center; }
.brands-head .eyebrow::before{ display:none; }
.brands-head h2{ font-size:var(--fs-h1); }
.brands-head p{ color:var(--w-60); max-width:52ch; margin:16px auto 0; }

.brands-row{ display:flex; align-items:center; gap:20px; }
.brands-viewport{ flex:1; overflow:hidden; min-width:0; }

/* Brands: top row slides left, bottom row slides right, both infinite/seamless.
   Each row's chip list is duplicated x2 in the HTML so translate3d(-50%) loops cleanly. */
.brands-marquee{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0; /* bug fix: same Grid/Flex min-width:auto blowout as the industries marquee */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.brands-row-track{
  display:flex;
  gap:14px;
  width:max-content;
  will-change:transform;
  animation:brandsLeft 38s linear infinite;
  backface-visibility:hidden;
  touch-action:pan-y; /* keeps vertical page scroll/touch untouched over the marquee */
}
.brands-row-track.reverse{ animation-name:brandsRight; }
.brands-marquee:hover .brands-row-track,
.brands-marquee.is-paused .brands-row-track{ animation-play-state:paused; }
@keyframes brandsLeft{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@keyframes brandsRight{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }

.brand-chip{
  flex:0 0 auto;
  width:170px;
  height:88px;
  display:flex; align-items:center; justify-content:center;
  padding:12px 18px;
  transition:transform var(--dur-fast) var(--ease);
}
.brand-chip img{
  display:block;
  width:100%;
  height:100%;
  max-width:130px;
  max-height:48px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.55;
  transition:filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.brand-chip:hover{ transform:translateY(-3px); }
.brand-chip:hover img{ filter:grayscale(0); opacity:1; }
.brands-cta{ text-align:center; margin-top:38px; }

/* ============================= PROCESS / TEMPO ============================= */
.process-panel{
  background:var(--w-03);
  border:1px solid var(--w-08);
  border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,50px);
}
.process-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  margin-bottom:50px; flex-wrap:wrap;
}
.process-head h2{ font-size:var(--fs-h1); }
.process-head p{ max-width:38ch; color:var(--w-60); font-size:var(--fs-small); }

.process-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
}
.process-step{ position:relative; padding-right:20px; }
.process-step:not(:last-child)::after{
  content:'';
  position:absolute; top:26px; right:-14px;
  width:1px; height:calc(100% - 26px);
  background:var(--w-08);
}
.process-meta{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.process-meta .num{ font-size:var(--fs-small); font-weight:800; color:var(--w-40); }
.process-meta .week{
  font-size:.65rem; text-transform:uppercase; letter-spacing:.08em;
  padding:4px 10px; border-radius:var(--radius-pill);
  background:var(--w-08); color:var(--w-70); font-weight:700;
}
.process-step .ico{
  width:52px; height:52px; border-radius:50%;
  background:var(--w-06); border:1px solid var(--w-12);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.process-step .ico svg{ width:22px; height:22px; }
.process-step h4{ font-size:1.2rem; margin-bottom:10px; }
.process-step p{ font-size:var(--fs-small); color:var(--w-50); margin-bottom:18px; }
.process-check{ display:flex; flex-direction:column; gap:10px; }
.process-check li{ display:flex; align-items:flex-start; gap:9px; font-size:var(--fs-tiny); color:var(--w-60); }
.process-check svg{ width:14px; height:14px; margin-top:2px; flex-shrink:0; opacity:.8; }
.process-cta{ text-align:center; margin-top:48px; }

/* ============================= FAQ ============================= */
.faq-head{ text-align:center; margin-bottom:50px; }
.faq-head h2{ font-size:var(--fs-h1); }
.faq-list{ max-width:900px; margin-inline:auto; }
.faq-item{
  border-bottom:1px solid var(--w-08);
}
.faq-q{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:26px 4px;
  text-align:left;
  font-size:clamp(1rem,1.6vw,1.15rem);
  font-weight:700;
}
.faq-q .num{ color:var(--w-30); font-weight:700; margin-right:16px; }
.faq-q .plus{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--w-15);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.faq-q .plus::before, .faq-q .plus::after{
  content:''; position:absolute; background:var(--text);
  transition:transform var(--dur-mid) var(--ease-soft), opacity var(--dur-mid) var(--ease-soft);
}
.faq-q .plus::before{ width:12px; height:1.4px; }
.faq-q .plus::after{ width:1.4px; height:12px; }
.faq-item.open .faq-q .plus{ background:var(--text); }
.faq-item.open .faq-q .plus::before, .faq-item.open .faq-q .plus::after{ background:var(--bg); }
.faq-item.open .faq-q .plus::after{ transform:rotate(90deg); opacity:0; }

.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .5s var(--ease-soft);
}
.faq-a-inner{ padding:0 4px 28px 52px; font-style:italic; color:var(--w-60); max-width:70ch; font-size:var(--fs-small); }

/* ============================= FOOTER ============================= */
.site-footer{ border-top:1px solid var(--w-08); }
.footer-marquee{
  border-bottom:1px solid var(--w-08);
}
.footer-marquee .marquee-track span{ font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.06em; }
.footer-marquee .marquee-track svg{ width:12px; height:12px; opacity:.5; }

.footer-main{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px;
  padding-block:var(--section-pad);
}
.footer-brand .logo{ margin-bottom:6px; }
.footer-tagline{ font-size:var(--fs-tiny); letter-spacing:.14em; color:var(--w-40); text-transform:uppercase; margin-bottom:26px; }
.footer-brand h3{ font-size:1.7rem; max-width:11ch; margin-bottom:16px; }
.footer-brand p{ color:var(--w-55,var(--w-50)); font-size:var(--fs-small); max-width:36ch; margin-bottom:26px; }
.footer-rating{ display:flex; align-items:center; gap:10px; margin-top:22px; }
.footer-rating .stars{ display:flex; gap:2px; }
.footer-rating .stars svg{ width:14px; height:14px; }
.footer-rating span{ font-size:var(--fs-tiny); color:var(--w-50); }

.footer-col h5{ font-size:var(--fs-tiny); text-transform:uppercase; letter-spacing:.1em; color:var(--w-40); margin-bottom:22px; font-weight:700; }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{ font-size:var(--fs-small); color:var(--w-65,var(--w-60)); display:inline-flex; align-items:center; gap:8px; transition:color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.footer-col a:hover{ color:var(--text); transform:translateX(3px); }
.footer-col .contact-item{ display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; color:var(--w-60); font-size:var(--fs-small); }
.footer-col .contact-item svg{ width:16px; height:16px; margin-top:2px; flex-shrink:0; opacity:.6; }
.footer-office{ margin-top:22px; }
.footer-office h5{ margin-bottom:12px; }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--w-15);
  display:flex; align-items:center; justify-content:center;
}
.footer-social a svg{ width:16px; height:16px; }
.footer-social a:hover{ background:var(--w-10); }

.footer-bottom{
  border-top:1px solid var(--w-08);
  padding-block:26px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  font-size:var(--fs-tiny); color:var(--w-40);
}
.footer-bottom .legal-links{ display:flex; gap:22px; }
.footer-bottom a:hover{ color:var(--text); }

/* ============================= POPUP FORM ============================= */
.popup-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(1,0,2,.7);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-mid) var(--ease), visibility var(--dur-mid);
}
.popup-overlay.open{ opacity:1; visibility:visible; }
.popup-card{
  width:100%; max-width:560px;
  max-height:88vh; overflow-y:auto;
  background:rgba(14,14,15,.85);
  border:1px solid var(--w-15);
  backdrop-filter:blur(30px);
  border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,44px);
  position:relative;
  transform:translateY(30px) scale(.96);
  transition:transform var(--dur-mid) var(--ease-soft);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9);
}
.popup-overlay.open .popup-card{ transform:translateY(0) scale(1); }
.popup-close{
  position:absolute; top:20px; right:20px;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--w-15);
  display:flex; align-items:center; justify-content:center;
}
.popup-close:hover{ background:var(--w-08); }
.popup-close svg{ width:14px; height:14px; }
.popup-eyebrow{ font-size:var(--fs-tiny); letter-spacing:.16em; text-transform:uppercase; color:var(--w-50); margin-bottom:10px; }
.popup-card h3{ font-size:1.7rem; margin-bottom:8px; }
.popup-card > p.sub{ color:var(--w-60); font-size:var(--fs-small); margin-bottom:8px; }
.popup-stars{ display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.popup-stars .stars{ display:flex; gap:2px; }
.popup-stars svg{ width:14px; height:14px; }
.popup-stars span{ font-size:var(--fs-tiny); color:var(--w-50); }

.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-grid .full{ grid-column:1/-1; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.field label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--w-50); font-weight:700; }
.field input, .field select, .field textarea{
  background:var(--w-04);
  border:1px solid var(--w-12);
  border-radius:var(--radius-sm);
  padding:13px 15px;
  font-size:var(--fs-small);
  color:var(--text);
  min-width:0; /* bug fix: browsers give inputs an intrinsic min-width that
                  ignores flex/grid shrinking, which overflowed .phone-row
                  and .form-grid on narrow screens */
  width:100%;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* bug fix: the dropdown's OPEN option list is rendered by the browser using
   native popup chrome that ignores `color:inherit` and defaults to a light
   background, leaving white text unreadable on white — Chrome/Firefox/Edge
   all respect explicit background/color set directly on <option>, so set
   them here rather than relying on inheritance from the closed <select>. */
.field select option{ background:#0a0a0b; color:#ffffff; }
.phone-row select option{ background:#0a0a0b; color:#ffffff; }
.field input::placeholder, .field textarea::placeholder{ color:var(--w-30); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--w-40); background:var(--w-06); }
.field.error input, .field.error select, .field.error textarea{ border-color:rgba(255,255,255,.55); }
.field .err-msg{ font-size:.7rem; color:var(--w-70); display:none; }
.field.error .err-msg{ display:block; }
.phone-row{ display:flex; gap:8px; min-width:0; }
.phone-row select{ flex:0 0 88px; }
.phone-row input{ flex:1; min-width:0; }

.notice-box{
  background:var(--w-04);
  border:1px solid var(--w-12);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  font-size:var(--fs-tiny);
  color:var(--w-60);
  margin-bottom:18px;
  line-height:1.55;
}
.notice-box strong{ color:var(--text); }

.service-pills{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:18px; }
.service-pills button{
  padding:10px 16px;
  border-radius:var(--radius-pill);
  border:1px solid var(--w-15);
  font-size:var(--fs-tiny);
  font-weight:600;
  color:var(--w-60);
  transition:all var(--dur-fast) var(--ease);
}
.service-pills button:hover{ border-color:var(--w-30); color:var(--text); }
.service-pills button.selected{ background:var(--text); color:var(--bg); border-color:var(--text); }

.popup-submit{ width:100%; justify-content:center; margin-top:6px; }
.popup-foot{ text-align:center; font-size:.68rem; color:var(--w-35,var(--w-30)); margin-top:16px; letter-spacing:.02em; }
.form-success{ display:none; text-align:center; padding:30px 10px; }
.form-success.show{ display:block; }
.form-success .ico{
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--w-20);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
}
.form-success .ico svg{ width:26px; height:26px; }
.form-success h4{ font-size:1.3rem; margin-bottom:10px; }
.form-success p{ color:var(--w-60); font-size:var(--fs-small); }

/* ============================= PAGE HEADER (inner pages) ============================= */
.page-hero{
  padding-top:calc(var(--nav-h) + 70px);
  padding-bottom:70px;
  position:relative;
  border-bottom:1px solid var(--w-08);
}
.back-to-cs{ display:inline-flex; align-items:center; gap:8px; font-size:var(--fs-tiny); font-weight:700; color:var(--w-70); text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; transition:color var(--dur-fast) var(--ease); }
.back-to-cs svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease); }
.back-to-cs:hover{ color:var(--text); }
.back-to-cs:hover svg{ transform:translateX(-3px); }
.breadcrumb{ display:flex; align-items:center; gap:10px; font-size:var(--fs-tiny); color:var(--w-40); margin-bottom:24px; text-transform:uppercase; letter-spacing:.08em; }
.breadcrumb span{ color:var(--w-70); }
.page-hero h1{ font-size:var(--fs-h1); max-width:20ch; }
.page-hero .lead{ margin-top:20px; }

/* ============================= GENERIC GRID HELPERS ============================= */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

/* ---- "What's Included" / "Services Included" card grid ----
   Dedicated utility (not shared with .grid-3 / .grid-4) so this section's
   column count can be controlled independently of any other 3- or 4-column
   layout on the site. Desktop: 4 equal-width cards in a single row.
   Card component (.value-card.card), gap, hover/animation, and stagger
   behaviour are unchanged — this only sets column count per breakpoint. */
.whats-included-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
/* Bug fix: was previously an inline style="grid-template-columns:repeat(2,1fr)"
   directly on the element, which — because inline styles beat stylesheet rules
   regardless of media query — silently defeated every responsive breakpoint
   below and caused the Services cards to overflow on narrow phones. */
.services-grid-2col{ grid-template-columns:repeat(2,1fr); }

/* Services page */
.service-card{ padding:32px; display:block; }
.service-card .num{ font-size:.75rem; color:var(--w-30); font-weight:800; margin-bottom:20px; }
.service-card .ico{
  width:54px; height:54px; border-radius:50%;
  background:var(--w-06); border:1px solid var(--w-12);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.service-card .ico svg{ width:22px; height:22px; }
.service-card h3{ font-size:1.3rem; margin-bottom:12px; }
.service-card p{ color:var(--w-55,var(--w-50)); font-size:var(--fs-small); margin-bottom:20px; }
.service-card ul{ display:flex; flex-direction:column; gap:9px; }
.service-card li{ font-size:var(--fs-tiny); color:var(--w-60); display:flex; gap:8px; align-items:flex-start; }
.service-card li svg{ width:13px; height:13px; margin-top:2px; opacity:.7; flex-shrink:0; }

/* Service list simple */
.service-list-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 4px;
  border-bottom:1px solid var(--w-08);
  gap:20px;
}
.service-list-item .l{ display:flex; align-items:center; gap:20px; }
.service-list-item .idx{ font-size:.8rem; color:var(--w-30); font-weight:800; width:32px; }
.service-list-item h4{ font-size:1.15rem; }
.service-list-item p{ font-size:var(--fs-tiny); color:var(--w-50); margin-top:4px; }
.service-list-item svg{ width:16px; height:16px; opacity:.5; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.service-list-item:hover svg{ transform:translate(3px,-3px); opacity:1; }

/* Timeline (careers/process reuse) */
.value-card{ padding:30px; text-align:left; display:block; }
.value-card .ico{ width:48px; height:48px; border-radius:50%; background:var(--w-06); border:1px solid var(--w-12); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.value-card .ico svg{ width:20px; height:20px; }
.value-card h4{ font-size:1.1rem; margin-bottom:10px; }
.value-card p{ font-size:var(--fs-small); color:var(--w-55,var(--w-50)); }

/* Job / open roles */
.role-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 26px;
  gap:20px; flex-wrap:wrap;
}
.role-item .meta{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }

/* News cards */
.news-card{ overflow:hidden; }
.news-card .thumb{ height:210px; overflow:hidden; }
.news-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft); }
.news-card:hover .thumb img{ transform:scale(1.06); }
.news-card .body{ padding:24px; }
.news-card .meta{ display:flex; gap:14px; font-size:var(--fs-tiny); color:var(--w-40); margin-bottom:12px; }
.news-card h3{ font-size:1.15rem; margin-bottom:10px; }
.news-card p{ font-size:var(--fs-small); color:var(--w-55,var(--w-50)); margin-bottom:18px; }

/* Contact page */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.contact-info-item{ display:flex; gap:18px; padding:24px 0; border-bottom:1px solid var(--w-08); }
.contact-info-item .ico{ width:46px; height:46px; border-radius:50%; background:var(--w-06); border:1px solid var(--w-12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item .ico svg{ width:19px; height:19px; }
.contact-info-item h4{ font-size:1rem; margin-bottom:6px; }
.contact-info-item p, .contact-info-item a{ font-size:var(--fs-small); color:var(--w-60); }
.map-frame{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--w-08); height:280px; margin-top:10px; position:relative; }
.map-frame img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1) brightness(.65); }
.map-pin{ position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); width:34px; height:34px; border-radius:50% 50% 50% 0; background:var(--text); rotate:-45deg; display:flex; align-items:center; justify-content:center; }
.map-pin svg{ rotate:45deg; width:14px; height:14px; color:var(--bg); }

.contact-form-card{ padding:clamp(26px,3.4vw,42px); }

/* Custom cursor (desktop only) */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot{ width:6px; height:6px; background:var(--text); }
.cursor-ring{ width:36px; height:36px; border:1px solid var(--w-40); transition:width .25s var(--ease), height .25s var(--ease), border-color .25s var(--ease); }
.cursor-ring.hovering{ width:60px; height:60px; border-color:var(--w-70); }
@media (hover:none), (pointer:coarse){ .cursor-dot, .cursor-ring{ display:none; } }

/* Custom bird cursor (uses the uploaded Webroller bird mark as the pointer,
   desktop/fine-pointer only; reuses the same rAF smoothing loop as .cursor-ring) */
@media (hover:hover) and (pointer:fine){
  html, body{ cursor:none; }
  a, button, input, textarea, select, [role="button"]{ cursor:none; }
}
.webroller-custom-cursor{
  position:fixed; top:0; left:0;
  width:28px; height:auto;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .18s var(--ease-soft);
  will-change:transform;
}
.webroller-custom-cursor img{
  display:block; width:100%; height:auto;
  user-select:none; -webkit-user-drag:none;
}
@media (max-width:1024px){ .webroller-custom-cursor{ width:26px; } }
@media (hover:none), (pointer:coarse){ .webroller-custom-cursor{ display:none !important; } }

/* ==========================================================================
   Loader / full-screen page-transition overlay.
   Reused for BOTH the initial preloader AND the click-triggered page
   transition (same element/markup on every page) — this avoids loading the
   GIF twice and keeps the two experiences visually identical, as requested.
   ========================================================================== */
.loader{
  position:fixed; inset:0; z-index:2000;
  background:var(--bg); /* #010002 — matches body, so there is no white flash */
  display:flex; align-items:center; justify-content:center;
  opacity:1; visibility:visible;
  transition:opacity .5s var(--ease), visibility .5s;
  will-change:opacity;
}
.loader.done{ opacity:0; visibility:hidden; pointer-events:none; }

/* Animated GIF mark, centered, GPU-accelerated fade/scale-in, aspect ratio preserved */
.loader-gif{
  height:clamp(44px, 8vw, 72px);
  width:auto;
  max-width:80vw;
  object-fit:contain;
  transform:translate3d(0,0,0) scale(.97);
  opacity:0;
  animation:loaderGifIn .6s var(--ease-soft) .05s forwards;
}
@keyframes loaderGifIn{
  from{ opacity:0; transform:translate3d(0,0,0) scale(.97); }
  to{ opacity:1; transform:translate3d(0,0,0) scale(1); }
}

/* Static text fallback, only shown when prefers-reduced-motion is on
   (see reduced-motion rule below, which hides .loader-gif instead) */
.loader-fallback-text{
  display:none;
  font-size:1.6rem; font-weight:800; letter-spacing:-.02em; color:var(--text);
}

/* Legacy letter-reveal mark kept only so nothing breaks if referenced elsewhere */
.loader-mark{ font-size:1.6rem; font-weight:800; letter-spacing:-.02em; display:flex; gap:2px; overflow:hidden; }
.loader-mark span{ display:inline-block; animation:loaderRise .7s var(--ease-soft) both; }
@keyframes loaderRise{ from{ transform:translateY(120%); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* Accessibility: prefers-reduced-motion → skip the GIF animation entirely,
   use a simple, near-instant fade with a static wordmark instead. */
@media (prefers-reduced-motion: reduce){
  .loader-gif{ display:none; animation:none; }
  .loader-fallback-text{ display:block; }
  .loader{ transition-duration:.15s; }
}

/* Back to top */
.back-to-top{
  position:fixed; bottom:28px; right:28px; z-index:500;
  width:50px; height:50px; border-radius:50%;
  background:var(--w-08); border:1px solid var(--w-15);
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all var(--dur-fast) var(--ease);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--w-15); }
.back-to-top svg{ width:16px; height:16px; }

/* ============================= RESPONSIVE ============================= */
@media (max-width:1080px){
  .footer-main{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1/-1; }
  .about-grid{ grid-template-columns:1fr; }
  .case-grid, .grid-3{ grid-template-columns:repeat(2,1fr); }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .process-step:nth-child(2)::after{ display:none; }
  .stats-bar{ grid-template-columns:repeat(2,1fr); }
  .stat-item:nth-child(2){ border-right:none; }
  .stat-item:nth-child(1), .stat-item:nth-child(2){ border-bottom:1px solid var(--w-08); }
  .brand-chip{ width:150px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .whats-included-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .main-nav, .nav-actions{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-inner{ flex-direction:column; align-items:flex-start; gap:22px; }
  .hero-index{ flex-direction:row; }
  .hero-index .rule{ width:34px; height:1px; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .grid-2{ grid-template-columns:1fr; }
}

@media (max-width:640px){
  :root{ --nav-h:74px; }
  /* Bug fix: header "Let's Talk" pill + hamburger together were wider than
     the space left after the logo on narrow phones, pushing off-screen
     (measured up to ~84px overflow at 320px width). The slide-down mobile
     menu already has its own "Let's Talk" button, so hiding this copy here
     loses no functionality. */
  .nav-cta > a.btn{ display:none; }
  .case-grid, .grid-3, .grid-4, .services-grid-2col, .whats-included-grid{ grid-template-columns:1fr; }
  .footer-main{ grid-template-columns:1fr; }
  .stats-bar{ grid-template-columns:1fr; }
  .stat-item{ border-right:none !important; border-bottom:1px solid var(--w-08); }
  .stat-item:last-child{ border-bottom:none; }
  .brand-chip{ width:120px; height:68px; }
  .brand-chip img{ max-width:100px; max-height:38px; }
  .brands-row-track{ animation-duration:24s; }
  .process-grid{ grid-template-columns:1fr; }
  .process-step::after{ display:none !important; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .hero-controls{ flex-direction:column; gap:20px; align-items:flex-start; }
  .hero-orb-1{ width:220px; height:220px; }
  .hero-orb-2{ width:160px; height:160px; }
  .back-to-top{ bottom:18px; right:18px; }
}

/* ==========================================================================
   SERVICE / PORTFOLIO-DETAIL PAGE COMPONENTS
   All built from the existing tokens (--w-*, --radius-*, --ease*, --bg,
   --text) — no new colors or typography introduced.
   ========================================================================== */

/* Industries grid chip (service pages) — unlike .brand-chip (fixed px
   width, built for the marquee), this sizes naturally to its grid cell. */
.industry-chip{
  display:flex; align-items:center; gap:8px;
  min-width:0;
  padding:14px 16px;
  border:1px solid var(--w-08);
  background:var(--w-03);
  border-radius:var(--radius-md);
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--w-70);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.industry-chip:hover{ background:var(--w-06); border-color:var(--w-20); color:var(--text); }
.industry-chip svg{ width:16px; height:16px; flex-shrink:0; opacity:.8; }

/* ---- Service hero: page-hero + an image background layer, matching the
   home hero's visual language (kenburns image + dark gradient) ---- */
.service-hero{
  position:relative;
  overflow:hidden;
  padding-top:calc(var(--nav-h) + 90px);
  padding-bottom:90px;
  border-bottom:1px solid var(--w-08);
}
.service-hero-media{
  position:absolute; inset:0; z-index:0;
}
.service-hero-media img{
  width:100%; height:100%; object-fit:cover; opacity:.5;
  animation:kenburns 24s ease-in-out infinite alternate;
}
.service-hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(1,0,2,.22) 0%, rgba(1,0,2,.38) 55%, var(--bg) 100%);
}
.service-hero .container{ position:relative; z-index:1; }
.service-hero h1{ font-size:var(--fs-h1); max-width:22ch; }
.service-hero .lead{ margin-top:20px; max-width:56ch; }
.service-hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px; }

/* ---- Overview: reuses .grid-2 + standard typography, nothing new ---- */

/* ---- Vertical process timeline (7 steps) ---- */
.timeline{ position:relative; max-width:760px; margin-inline:auto; }
.timeline::before{
  content:'';
  position:absolute; left:27px; top:6px; bottom:6px; width:1px;
  background:var(--w-10);
}
.timeline-item{
  position:relative;
  padding-left:80px;
  padding-bottom:42px;
}
.timeline-item:last-child{ padding-bottom:0; }
.timeline-icon{
  position:absolute; left:0; top:0;
  width:56px; height:56px; border-radius:50%;
  background:var(--w-04); border:1px solid var(--w-15);
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
.timeline-icon svg{ width:22px; height:22px; }
.timeline-item .step-num{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--w-40); font-weight:700; margin-bottom:8px; display:block;
}
.timeline-item h4{ font-size:1.2rem; margin-bottom:8px; }
.timeline-item p{ font-size:var(--fs-small); color:var(--w-55,var(--w-50)); max-width:52ch; }

/* ---- Testimonial slider ---- */
.testimonial-slider{ position:relative; max-width:800px; margin-inline:auto; text-align:center; min-height:260px; }
.testimonial-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transform:translateY(16px);
  transition:opacity .6s var(--ease-soft), transform .6s var(--ease-soft), visibility .6s;
}
.testimonial-slide.active{ position:relative; opacity:1; visibility:visible; transform:translateY(0); }
.testimonial-stars{ display:flex; justify-content:center; gap:4px; margin-bottom:24px; }
.testimonial-stars svg{ width:16px; height:16px; }
.testimonial-quote{
  font-size:clamp(1.15rem,2.2vw,1.55rem);
  font-weight:600; line-height:1.5; letter-spacing:-.01em;
  margin-bottom:32px;
}
.testimonial-author{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.testimonial-avatar{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:1px solid var(--w-15); margin-bottom:10px;
}
.testimonial-name{ font-weight:700; }
.testimonial-role{ font-size:var(--fs-small); color:var(--w-50); }
.testimonial-dots{ display:flex; justify-content:center; gap:10px; margin-top:36px; }
.testimonial-dots button{
  width:8px; height:8px; border-radius:50%; background:var(--w-20);
  transition:all var(--dur-fast) var(--ease);
}
.testimonial-dots button.active{ background:var(--text); width:26px; border-radius:5px; }

/* ---- Testimonials carousel (home page — "What Our Clients Say") ----
   Reuses existing tokens (.card, .icon-btn, .testimonial-dots/name/role,
   data-reveal) so it inherits the site's exact hover/shadow/typography
   language rather than introducing new ones. Markup/classes are namespaced
   (testi-*) so this never collides with the single-quote [data-testimonial-
   slider] pattern used on service pages. */
.testi-carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:22px;
  max-width:880px;
  margin-inline:auto;
}
.testi-viewport{
  flex:1;
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
}
.testi-viewport:focus-visible{ outline:2px solid var(--text); outline-offset:6px; }
.testi-track{
  display:flex;
  transition:transform var(--dur-slow) var(--ease-soft);
  touch-action:pan-y;
}
.testi-slide{ flex:0 0 100%; min-width:0; padding:2px; }
.testi-card{
  background:linear-gradient(160deg, var(--w-06), var(--w-03) 60%);
  backdrop-filter:blur(16px) saturate(140%);
  padding:clamp(34px,5vw,56px) clamp(24px,4vw,58px);
  min-height:360px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.testi-card:hover{ background:linear-gradient(160deg, var(--w-08), var(--w-04) 60%); }
.testi-stars{ display:flex; justify-content:center; gap:5px; margin-bottom:26px; }
.testi-stars svg{ width:18px; height:18px; }
.testi-quote{
  font-size:clamp(1.05rem,1.8vw,1.35rem);
  font-weight:600;
  line-height:1.55;
  letter-spacing:-.01em;
  max-width:56ch;
  margin-bottom:30px;
}
.testi-author{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.testi-avatar{
  width:60px; height:60px; border-radius:50%;
  background:var(--w-08); border:1px solid var(--w-15);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem; letter-spacing:.02em;
  margin-bottom:14px;
}
.testi-arrow{ flex-shrink:0; }

@media (max-width:860px){
  .testi-carousel{ gap:12px; max-width:100%; }
  .testi-arrow{ width:42px; height:42px; }
  .testi-arrow svg{ width:16px; height:16px; }
}
@media (max-width:640px){
  .testi-carousel{ gap:8px; }
  .testi-card{ min-height:400px; padding:32px 20px; }
  .testi-quote{ font-size:1.02rem; margin-bottom:24px; }
  .testi-arrow{ width:38px; height:38px; }
}

/* ---- Gallery grid (portfolio detail pages) ----
   Static, single-column, full-image display: every image renders whole,
   uncropped, at its natural aspect ratio, with no click/zoom/lightbox
   interaction. Do not reintroduce a multi-column grid, object-fit:cover,
   fixed-height cropping, or clickable/linked wrappers here. */
.gallery-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
}
.gallery-image-item{
  display:block;
  width:100%;
  max-width:900px;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--w-08);
  position:relative;
  margin:0 auto;
}
.gallery-flag{
  position:absolute; top:12px; left:12px; z-index:2;
  display:flex; align-items:center; gap:6px;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  background:rgba(10,10,11,.75);
  backdrop-filter:blur(8px);
  border:1px solid var(--w-15);
  font-size:.68rem; font-weight:700; color:var(--text);
  letter-spacing:.01em;
}
.client-flag{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.55em; vertical-align:middle;
  margin-left:14px;
}
.gallery-grid img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  cursor:default;
}

/* ---- Case-study contextual photo (single, medium-sized, full-bleed-free) ----
   Used to drop one real photo inline between narrative blocks on a case-study
   page (e.g. Starbucks/Apple). Deliberately capped at a medium max-width and
   always object-fit:contain so the complete uncropped image is shown — never
   a full-width gallery. Additive only; does not alter .gallery-grid above. */
.case-photo{
  max-width:460px;
  margin:32px auto;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--w-08);
  background:var(--w-03);
}
.case-photo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.case-photo-cap{
  margin-top:10px;
  font-size:var(--fs-tiny);
  color:var(--w-40);
  text-align:center;
}
@media (max-width:640px){
  .case-photo{ max-width:100%; }
}

/* ---- Case-study narrative blocks (challenge/research/strategy/etc.) ---- */
.narrative-block{ padding-block:26px; border-bottom:1px solid var(--w-08); }
.narrative-block:last-child{ border-bottom:none; }
.narrative-block h3{ font-size:1.3rem; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.narrative-block .step-num{ font-size:.75rem; color:var(--w-30); font-weight:800; }
.narrative-block p{ color:var(--w-60); max-width:70ch; }

/* ---- Client feedback block (single testimonial card on case-study pages) ---- */
.feedback-card{
  max-width:720px; margin-inline:auto; text-align:center;
  padding:clamp(32px,5vw,54px);
}

/* ---- Next project band ---- */
.next-project{
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(28px,4vw,44px);
  gap:24px; flex-wrap:wrap;
}
.next-project .label{ font-size:var(--fs-tiny); text-transform:uppercase; letter-spacing:.12em; color:var(--w-40); margin-bottom:10px; }
.next-project h3{ font-size:clamp(1.4rem,3vw,2rem); }
.next-project .arrow-circle{
  width:64px; height:64px; border-radius:50%;
  border:1px solid var(--w-15); background:var(--w-04);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.next-project:hover .arrow-circle{ transform:translateX(6px); background:var(--w-10); }
.next-project .arrow-circle svg{ width:22px; height:22px; }

@media (max-width:1080px){
  .dropdown-grid{ min-width:440px; }
}
@media (max-width:640px){
  .gallery-grid{ gap:24px; }
  .timeline-item{ padding-left:66px; }
  .timeline::before{ left:23px; }
  .timeline-icon{ width:46px; height:46px; }
  .timeline-icon svg{ width:18px; height:18px; }
  .next-project{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ==========================================================================
   BLOG SYSTEM
   Built entirely from existing tokens/components — no new colors,
   typography, or animation styles introduced.
   ========================================================================== */

/* ---- Reading progress bar (article pages) ---- */
.reading-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--text); z-index:1500;
  transition:width .1s linear;
}
@media (hover:none), (pointer:coarse){ .reading-progress{ top:0; } }

/* ---- Blog listing hero ---- */
.blog-hero{ position:relative; overflow:hidden; }

/* ---- Search bar ---- */
.blog-search{
  position:relative;
  max-width:520px;
  margin-top:28px;
}
.blog-search input{
  width:100%;
  background:var(--w-04);
  border:1px solid var(--w-15);
  border-radius:var(--radius-pill);
  padding:15px 20px 15px 48px;
  font-size:var(--fs-small);
  color:var(--text);
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.blog-search input::placeholder{ color:var(--w-40); }
.blog-search input:focus{ outline:none; border-color:var(--w-40); background:var(--w-06); }
.blog-search svg{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; opacity:.5; pointer-events:none;
}
.blog-search .clear-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  border:1px solid var(--w-15);
}
.blog-search .clear-btn svg{ position:static; transform:none; width:12px; height:12px; opacity:.8; }
.blog-search.has-value .clear-btn{ display:flex; }
.blog-no-results{ text-align:center; padding:60px 20px; color:var(--w-40); display:none; }
.blog-no-results.show{ display:block; }

/* ---- Featured article ---- */
.featured-article{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
}
.featured-article .thumb{ position:relative; height:100%; min-height:320px; overflow:hidden; }
.featured-article .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-soft); }
.featured-article:hover .thumb img{ transform:scale(1.05); }
.featured-article .thumb .chip{ position:absolute; top:20px; left:20px; }
.featured-article .body{ padding:clamp(28px,4vw,48px); display:flex; flex-direction:column; justify-content:center; }
.featured-article .meta-row{ display:flex; align-items:center; gap:14px; font-size:var(--fs-tiny); color:var(--w-40); margin-bottom:16px; flex-wrap:wrap; }
.featured-article .meta-row .dot{ width:3px; height:3px; border-radius:50%; background:var(--w-30); }
.featured-article h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); margin-bottom:14px; }
.featured-article p{ color:var(--w-60); margin-bottom:22px; }
.featured-article .author-row{ display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.featured-article .author-row img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.featured-article .author-row span{ font-size:var(--fs-small); font-weight:600; }

/* ---- Blog article card (listing grid) ---- */
.blog-card{ overflow:hidden; display:flex; flex-direction:column; }
.blog-card .thumb{ position:relative; height:200px; overflow:hidden; }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-soft); }
.blog-card:hover .thumb img{ transform:scale(1.08); }
.blog-card .thumb .chip{ position:absolute; top:14px; left:14px; }
.blog-card .body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.blog-card .meta-row{ display:flex; align-items:center; gap:10px; font-size:var(--fs-tiny); color:var(--w-40); margin-bottom:12px; }
.blog-card .meta-row .dot{ width:3px; height:3px; border-radius:50%; background:var(--w-30); flex-shrink:0; }
.blog-card h3{ font-size:1.1rem; margin-bottom:10px; line-height:1.35; }
.blog-card p{ font-size:var(--fs-small); color:var(--w-55,var(--w-50)); margin-bottom:18px; flex:1; }
.blog-card .card-footer{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--w-08); }
.blog-card .author-mini{ display:flex; align-items:center; gap:8px; }
.blog-card .author-mini img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.blog-card .author-mini span{ font-size:var(--fs-tiny); color:var(--w-60); }
.blog-card .read-more{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-tiny); font-weight:700; }
.blog-card .read-more svg{ width:13px; height:13px; transition:transform var(--dur-fast) var(--ease); }
.blog-card:hover .read-more svg{ transform:translate(3px,-3px); }

/* ---- Newsletter section ---- */
.newsletter-box{
  text-align:center;
  padding:clamp(36px,5vw,60px);
  max-width:680px; margin-inline:auto;
}
.newsletter-form{ display:flex; gap:10px; margin-top:26px; max-width:460px; margin-inline:auto; }
.newsletter-form input{
  flex:1; min-width:0;
  background:var(--w-04); border:1px solid var(--w-15); border-radius:var(--radius-pill);
  padding:14px 20px; font-size:var(--fs-small); color:var(--text);
}
.newsletter-form input::placeholder{ color:var(--w-30); }
.newsletter-form input:focus{ outline:none; border-color:var(--w-40); }
.newsletter-success{ display:none; text-align:center; padding:10px 0; }
.newsletter-success.show{ display:block; }
.newsletter-success .ico{ width:52px; height:52px; border-radius:50%; border:1px solid var(--w-20); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.newsletter-success .ico svg{ width:22px; height:22px; }
.newsletter-form.hide, .newsletter-box > p.hide{ display:none; }

/* ---- Pagination ---- */
.pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:50px; flex-wrap:wrap; }
.pagination button{
  min-width:42px; height:42px; padding:0 14px;
  border-radius:var(--radius-pill); border:1px solid var(--w-12);
  font-size:var(--fs-small); font-weight:600; color:var(--w-60);
  transition:all var(--dur-fast) var(--ease);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.pagination button:hover:not(:disabled){ border-color:var(--w-30); color:var(--text); }
.pagination button.active{ background:var(--text); color:var(--bg); border-color:var(--text); }
.pagination button:disabled{ opacity:.3; pointer-events:none; }
.pagination button svg{ width:14px; height:14px; }

/* ---- Article layout: content + sticky TOC/sidebar ---- */
.blog-layout{ display:grid; grid-template-columns:220px 1fr 300px; gap:44px; align-items:start; }
.blog-layout > div{ min-width:0; } /* bug fix: grid tracks default to min-width:auto, which let wide inline images/code blocks force this column past its 1fr track */
.blog-toc-wrap, .blog-sidebar-wrap{ position:sticky; top:calc(var(--nav-h) + 24px); min-width:0; }

/* ---- Table of contents ---- */
.blog-toc{ border:1px solid var(--w-08); background:var(--w-03); border-radius:var(--radius-md); padding:20px; }
.blog-toc h5{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--w-40); font-weight:700; margin-bottom:14px; }
.blog-toc ul{ display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--w-10); }
.blog-toc a{
  display:block; padding:7px 0 7px 16px; margin-left:-1px;
  font-size:var(--fs-tiny); color:var(--w-50); border-left:2px solid transparent;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.blog-toc a:hover{ color:var(--w-80,var(--w-70)); }
.blog-toc a.active{ color:var(--text); border-left-color:var(--text); font-weight:600; }

/* ---- Article content typography ---- */
.blog-content{ max-width:100%; min-width:0; }
.blog-content h2{ font-size:1.7rem; margin:44px 0 18px; scroll-margin-top:calc(var(--nav-h) + 24px); }
.blog-content h2:first-child{ margin-top:0; }
.blog-content h3{ font-size:1.3rem; margin:32px 0 14px; scroll-margin-top:calc(var(--nav-h) + 24px); }
.blog-content p{ color:var(--w-70); margin-bottom:20px; max-width:72ch; }
.blog-content ul, .blog-content ol{ margin:0 0 22px 0; padding-left:0; display:flex; flex-direction:column; gap:10px; }
.blog-content ul li, .blog-content ol li{ display:flex; gap:12px; color:var(--w-70); max-width:70ch; padding-left:26px; position:relative; }
.blog-content ul li::before{ content:''; position:absolute; left:6px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--w-40); }
.blog-content ol{ counter-reset:blog-ol; }
.blog-content ol li{ counter-increment:blog-ol; }
.blog-content ol li::before{ content:counter(blog-ol); position:absolute; left:0; top:0; font-size:.7rem; font-weight:800; color:var(--w-40); width:20px; }
.blog-content figure{ margin:34px 0; }
.blog-content figure img{ width:100%; border-radius:var(--radius-lg); border:1px solid var(--w-08); cursor:zoom-in; }
.blog-content figcaption{ font-size:var(--fs-tiny); color:var(--w-40); margin-top:10px; text-align:center; }

/* ---- Pull quote ---- */
.pull-quote{
  border-left:3px solid var(--w-20);
  padding:6px 0 6px 28px;
  margin:36px 0;
}
.pull-quote p{ font-size:1.3rem; font-weight:600; line-height:1.45; color:var(--text); margin-bottom:12px; font-style:italic; }
.pull-quote cite{ font-size:var(--fs-small); color:var(--w-40); font-style:normal; }

/* ---- Highlight boxes ---- */
.highlight-box{
  display:flex; gap:16px;
  padding:22px 24px;
  border-radius:var(--radius-md);
  border:1px solid var(--w-12);
  background:var(--w-04);
  margin:30px 0;
}
.highlight-box .ico{ width:36px; height:36px; border-radius:50%; background:var(--w-08); border:1px solid var(--w-15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.highlight-box .ico svg{ width:16px; height:16px; }
.highlight-box .label{ font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--w-50); margin-bottom:6px; }
.highlight-box p{ margin-bottom:0; color:var(--w-70); font-size:var(--fs-small); }
.highlight-box.important{ border-color:var(--w-30); background:var(--w-06); }

/* ---- Code block + copy button ---- */
.code-block{ position:relative; margin:30px 0; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--w-12); background:#000; min-width:0; }
.code-block .code-label{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:var(--w-06); border-bottom:1px solid var(--w-08); font-size:var(--fs-tiny); color:var(--w-50); }
.code-block pre{ margin:0; padding:20px; overflow-x:auto; font-size:.82rem; line-height:1.6; color:var(--w-80,var(--w-70)); font-family:'SFMono-Regular',Consolas,Monaco,monospace; }
.code-block .copy-code-btn{
  display:flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--radius-pill); border:1px solid var(--w-15);
  font-size:.68rem; font-weight:600; color:var(--w-60);
  transition:all var(--dur-fast) var(--ease);
}
.code-block .copy-code-btn:hover{ background:var(--w-08); color:var(--text); }
.code-block .copy-code-btn svg{ width:12px; height:12px; }

/* ---- Lightbox ---- */
.lightbox-overlay{
  position:fixed; inset:0; z-index:1800;
  background:rgba(1,0,2,.92); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; visibility:hidden; transition:opacity var(--dur-mid) var(--ease), visibility var(--dur-mid);
}
.lightbox-overlay.open{ opacity:1; visibility:visible; }
.lightbox-overlay img{ max-width:100%; max-height:88vh; border-radius:var(--radius-md); }
.lightbox-close{ position:absolute; top:24px; right:24px; width:44px; height:44px; border-radius:50%; border:1px solid var(--w-20); display:flex; align-items:center; justify-content:center; }
.lightbox-close svg{ width:16px; height:16px; }

/* ---- Share row ---- */
.share-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:26px 0; border-top:1px solid var(--w-08); border-bottom:1px solid var(--w-08); margin:36px 0; }
.share-row .label{ font-size:var(--fs-tiny); color:var(--w-40); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-right:6px; }
.share-row a, .share-row button{
  width:40px; height:40px; border-radius:50%; border:1px solid var(--w-15);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--dur-fast) var(--ease); position:relative;
}
.share-row a:hover, .share-row button:hover{ background:var(--w-08); border-color:var(--w-30); }
.share-row svg{ width:16px; height:16px; }
.share-row .copied-tag{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--text); color:var(--bg); font-size:.65rem; font-weight:700;
  padding:5px 10px; border-radius:var(--radius-pill); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity var(--dur-fast) var(--ease);
}
.share-row .copied-tag.show{ opacity:1; }

/* ---- Author box ---- */
.author-box{ display:flex; gap:20px; padding:28px; align-items:flex-start; }
.author-box img{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author-box h4{ font-size:1.1rem; margin-bottom:2px; }
.author-box .role{ font-size:var(--fs-tiny); color:var(--w-40); margin-bottom:12px; }
.author-box p.bio{ font-size:var(--fs-small); color:var(--w-60); margin-bottom:14px; }
.author-box .social-links{ display:flex; gap:10px; }
.author-box .social-links a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--w-15); display:flex; align-items:center; justify-content:center; }
.author-box .social-links svg{ width:14px; height:14px; }

/* ---- Comments ---- */
.comments-section h3{ font-size:1.4rem; margin-bottom:26px; }
.comment-form{ padding:26px; margin-bottom:36px; }
.comment-list{ display:flex; flex-direction:column; gap:22px; }
.comment-item{ display:flex; gap:16px; }
.comment-item img{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.comment-item .bubble{ flex:1; padding:18px 20px; }
.comment-item .comment-meta{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.comment-item .comment-meta strong{ font-size:var(--fs-small); }
.comment-item .comment-meta span{ font-size:var(--fs-tiny); color:var(--w-40); }
.comment-item p{ font-size:var(--fs-small); color:var(--w-60); margin-bottom:10px; }
.comment-item .reply-btn{ font-size:var(--fs-tiny); font-weight:700; color:var(--w-50); }
.comment-item .reply-btn:hover{ color:var(--text); }
.comment-item.is-reply{ margin-left:60px; }
.comment-success{ display:none; text-align:center; padding:20px; }
.comment-success.show{ display:block; }

/* ---- Sidebar widgets ---- */
.sidebar-widget{ border:1px solid var(--w-08); background:var(--w-03); border-radius:var(--radius-md); padding:22px; margin-bottom:20px; }
.sidebar-widget h5{ font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--w-40); font-weight:700; margin-bottom:16px; }
.sidebar-widget .mini-search{ position:relative; }
.sidebar-widget .mini-search input{ width:100%; background:var(--w-04); border:1px solid var(--w-12); border-radius:var(--radius-sm); padding:10px 14px 10px 36px; font-size:var(--fs-tiny); color:var(--text); }
.sidebar-widget .mini-search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:14px; height:14px; opacity:.5; }
.sidebar-cats{ display:flex; flex-direction:column; gap:2px; }
.sidebar-cats a{ display:flex; align-items:center; justify-content:space-between; padding:9px 4px; font-size:var(--fs-small); color:var(--w-60); border-radius:var(--radius-sm); }
.sidebar-cats a:hover{ color:var(--text); background:var(--w-06); padding-left:10px; }
.sidebar-cats a span.count{ font-size:var(--fs-tiny); color:var(--w-30); }
.sidebar-post{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--w-08); }
.sidebar-post:last-child{ border-bottom:none; }
.sidebar-post img{ width:56px; height:56px; border-radius:var(--radius-sm); object-fit:cover; flex-shrink:0; }
.sidebar-post h6{ font-size:.82rem; line-height:1.35; font-weight:600; margin-bottom:4px; }
.sidebar-post span{ font-size:.68rem; color:var(--w-40); }
.sidebar-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.sidebar-tags a{ font-size:var(--fs-tiny); padding:6px 12px; border-radius:var(--radius-pill); border:1px solid var(--w-12); color:var(--w-60); }
.sidebar-tags a:hover{ color:var(--text); border-color:var(--w-30); }
.sidebar-widget .newsletter-form{ margin-top:14px; flex-direction:column; max-width:none; }
.sidebar-widget .newsletter-form input{ border-radius:var(--radius-sm); }

@media (max-width:1080px){
  .blog-layout{ grid-template-columns:1fr; }
  .blog-toc-wrap{ position:static; order:-1; }
  .blog-toc{ max-height:260px; overflow-y:auto; }
  .featured-article{ grid-template-columns:1fr; }
  .featured-article .thumb{ min-height:220px; }
}
@media (max-width:640px){
  .blog-search{ max-width:none; }
  .newsletter-form{ flex-direction:column; }
  .comment-item.is-reply{ margin-left:20px; }
  .author-box{ flex-direction:column; text-align:center; align-items:center; }
  .author-box .social-links{ justify-content:center; }
}

/* ==========================================================================
   CONTACT WIZARD (multi-step: choose service \u2192 contact details \u2192
   project details \u2192 submit). Built entirely from existing tokens/components
   \u2014 same colors, radius, easing, and .card/.field/.btn language as the rest
   of the site. No new design system introduced.
   ========================================================================== */

/* ---- Stepper / progress ---- */
.wizard-stepper{
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-bottom:8px; flex-wrap:wrap;
}
.wizard-step-pill{
  display:flex; align-items:center; gap:10px;
  padding:10px 18px 10px 10px;
  border-radius:var(--radius-pill);
  border:1px solid var(--w-10);
  background:var(--w-03);
  transition:border-color var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease);
}
.wizard-step-pill .num{
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:800;
  background:var(--w-06); border:1px solid var(--w-15); color:var(--w-40);
  transition:all var(--dur-mid) var(--ease);
}
.wizard-step-pill .label{ font-size:var(--fs-tiny); font-weight:700; color:var(--w-40); letter-spacing:.02em; }
.wizard-step-pill.active{ border-color:var(--w-30); background:var(--w-06); }
.wizard-step-pill.active .num{ background:var(--text); border-color:var(--text); color:var(--bg); }
.wizard-step-pill.active .label{ color:var(--text); }
.wizard-step-pill.done .num{ background:var(--w-15); border-color:var(--w-30); color:var(--text); }
.wizard-step-pill.done .label{ color:var(--w-60); }
.wizard-step-pill .num svg{ width:12px; height:12px; }

.wizard-progress-track{
  height:3px; border-radius:var(--radius-pill);
  background:var(--w-08);
  max-width:640px; margin:0 auto 50px;
  overflow:hidden;
}
.wizard-progress-fill{
  height:100%; width:25%; background:var(--text);
  border-radius:var(--radius-pill);
  transition:width .5s var(--ease-soft);
}

/* ---- Step panels ---- */
.wizard-panel{ display:none; }
.wizard-panel.active{
  display:block;
  animation:wizardIn .5s var(--ease-soft);
}
@keyframes wizardIn{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.wizard-panel-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.wizard-panel-head h2{ font-size:clamp(1.6rem,3.4vw,2.3rem); margin-bottom:12px; }
.wizard-panel-head p{ color:var(--w-55,var(--w-50)); }

/* ---- Service selection cards (Step 1) ---- */
.service-select-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  max-width:1080px; margin-inline:auto;
}
.service-select-card{
  position:relative;
  text-align:left;
  padding:22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--w-10);
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(6px);
  cursor:pointer;
  overflow:hidden;
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-mid) var(--ease), background var(--dur-mid) var(--ease);
}
.service-select-card::before{
  content:'';
  position:absolute; inset:0; border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, var(--w-30), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity var(--dur-mid) var(--ease);
  pointer-events:none;
}
.service-select-card:hover{ transform:translateY(-4px); border-color:var(--w-20); background:var(--w-04); }
.service-select-card:hover::before{ opacity:1; }
.service-select-card .num{ font-size:.7rem; font-weight:800; color:var(--w-30); margin-bottom:14px; display:block; }
.service-select-card .ico{
  width:44px; height:44px; border-radius:50%;
  background:var(--w-06); border:1px solid var(--w-12);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  transition:all var(--dur-mid) var(--ease);
}
.service-select-card .ico svg{ width:19px; height:19px; }
.service-select-card h4{ font-size:1.02rem; margin-bottom:8px; }
.service-select-card p{ font-size:var(--fs-tiny); color:var(--w-45,var(--w-40)); line-height:1.5; margin-bottom:16px; min-height:36px; }
.service-select-card .card-arrow{
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--w-15);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--dur-fast) var(--ease);
}
.service-select-card .card-arrow svg{ width:14px; height:14px; }
.service-select-card:hover .card-arrow{ background:var(--w-10); transform:translate(2px,-2px); }
.service-select-card.selected{
  border-color:var(--text);
  background:var(--w-08);
  transform:translateY(-4px);
}
.service-select-card.selected::before{ opacity:1; background:linear-gradient(135deg, var(--text), transparent 70%); }
.service-select-card.selected .ico{ background:var(--text); border-color:var(--text); }
.service-select-card.selected .ico svg{ color:var(--bg); }
.service-select-card.selected .card-arrow{ background:var(--text); border-color:var(--text); color:var(--bg); }
.service-select-card .selected-tag{
  position:absolute; top:18px; right:18px;
  width:24px; height:24px; border-radius:50%;
  background:var(--text); color:var(--bg);
  display:none; align-items:center; justify-content:center;
  animation:popIn .35s var(--ease-soft);
}
.service-select-card .selected-tag svg{ width:12px; height:12px; }
.service-select-card.selected .selected-tag{ display:flex; }
@keyframes popIn{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* ---- Selected-service recap chip (shown on steps 2\u20134) ---- */
.selected-service-recap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 22px; margin-bottom:36px;
  max-width:640px; margin-inline:auto;
  border-radius:var(--radius-md);
}
.selected-service-recap .l{ display:flex; align-items:center; gap:14px; }
.selected-service-recap .ico{ width:38px; height:38px; border-radius:50%; background:var(--w-08); border:1px solid var(--w-15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.selected-service-recap .ico svg{ width:16px; height:16px; }
.selected-service-recap .meta{ font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--w-40); margin-bottom:2px; }
.selected-service-recap .name{ font-weight:700; font-size:var(--fs-small); }
.selected-service-recap button{ font-size:var(--fs-tiny); font-weight:700; color:var(--w-50); flex-shrink:0; }
.selected-service-recap button:hover{ color:var(--text); }

/* ---- Radio / checkbox pill groups (used for Step 2 contact-method +
   Step 3 dynamic Yes/No and multi-select questions) ---- */
.option-pills{ display:flex; flex-wrap:wrap; gap:9px; }
.option-pills .opt{
  position:relative;
}
.option-pills input{ position:absolute; opacity:0; width:1px; height:1px; }
.option-pills label{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px;
  border-radius:var(--radius-pill);
  border:1px solid var(--w-15);
  font-size:var(--fs-tiny);
  font-weight:600;
  color:var(--w-60);
  cursor:pointer;
  transition:all var(--dur-fast) var(--ease);
  text-transform:none;
  letter-spacing:0;
}
.option-pills label:hover{ border-color:var(--w-30); color:var(--text); }
.option-pills input:checked + label{ background:var(--text); color:var(--bg); border-color:var(--text); }
.option-pills input:focus-visible + label{ outline:2px solid var(--w-40); outline-offset:2px; }

/* ---- Terms checkbox ---- */
.check-row{ display:flex; align-items:flex-start; gap:12px; margin:22px 0; }
.check-row input{ position:absolute; opacity:0; width:1px; height:1px; }
.check-row label{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  font-size:var(--fs-tiny); color:var(--w-50); line-height:1.6;
}
.check-row .box{
  width:20px; height:20px; border-radius:6px; flex-shrink:0; margin-top:1px;
  border:1px solid var(--w-25); background:var(--w-04);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--dur-fast) var(--ease);
}
.check-row .box svg{ width:12px; height:12px; opacity:0; transform:scale(.5); transition:all var(--dur-fast) var(--ease); }
.check-row input:checked + label .box{ background:var(--text); border-color:var(--text); }
.check-row input:checked + label .box svg{ opacity:1; transform:scale(1); color:var(--bg); }
.check-row input:focus-visible + label .box{ outline:2px solid var(--w-40); outline-offset:2px; }
.check-row.error .box{ border-color:rgba(255,255,255,.6); }

/* ---- File upload ---- */
.file-drop{
  border:1.5px dashed var(--w-15);
  border-radius:var(--radius-md);
  padding:28px 20px;
  text-align:center;
  cursor:pointer;
  transition:all var(--dur-fast) var(--ease);
  position:relative;
}
.file-drop:hover, .file-drop.drag{ border-color:var(--w-35); background:var(--w-03); }
.file-drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.file-drop .ico{ width:40px; height:40px; border-radius:50%; background:var(--w-06); border:1px solid var(--w-12); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; }
.file-drop .ico svg{ width:17px; height:17px; }
.file-drop .txt{ font-size:var(--fs-small); font-weight:600; margin-bottom:4px; }
.file-drop .sub{ font-size:var(--fs-tiny); color:var(--w-40); }
.file-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.file-list .file-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--w-10); background:var(--w-03);
  font-size:var(--fs-tiny);
}
.file-list .file-item .name{ display:flex; align-items:center; gap:10px; color:var(--w-70); }
.file-list .file-item .name svg{ width:14px; height:14px; opacity:.6; flex-shrink:0; }
.file-list .file-item button{ opacity:.5; }
.file-list .file-item button:hover{ opacity:1; }
.file-list .file-item button svg{ width:13px; height:13px; }

/* ---- Char counter ---- */
.char-counter{ font-size:.65rem; color:var(--w-30); text-align:right; margin-top:-6px; margin-bottom:8px; }
.char-counter.limit{ color:var(--w-60); }

/* ---- Step nav buttons ---- */
.wizard-nav{ display:flex; align-items:center; justify-content:space-between; margin-top:36px; max-width:640px; margin-inline:auto; gap:14px; }
.wizard-nav .spacer{ flex:1; }

/* ---- Step 3 dynamic form container ---- */
.dynamic-fields .field{ margin-bottom:20px; }

/* ---- Review (Step 4) ---- */
.review-summary{ display:flex; flex-direction:column; gap:10px; margin-bottom:30px; }
.review-row{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--w-08); }
.review-row .k{ font-size:var(--fs-tiny); color:var(--w-40); flex-shrink:0; }
.review-row .v{ font-size:var(--fs-small); color:var(--text); font-weight:600; text-align:right; }

/* ---- Loading state ---- */
.wizard-loading{ display:none; text-align:center; padding:40px 10px; }
.wizard-loading.show{ display:block; }
.wizard-spinner{
  width:40px; height:40px; border-radius:50%;
  border:2px solid var(--w-12); border-top-color:var(--text);
  margin:0 auto 20px;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---- Help section ---- */
.help-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.help-card{ padding:26px; text-align:center; }
.help-card .ico{ width:46px; height:46px; border-radius:50%; background:var(--w-06); border:1px solid var(--w-12); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.help-card .ico svg{ width:19px; height:19px; }
.help-card h4{ font-size:.98rem; margin-bottom:6px; }
.help-card p{ font-size:var(--fs-tiny); color:var(--w-40); margin-bottom:16px; }

@media (max-width:1080px){
  .service-select-grid{ grid-template-columns:repeat(2,1fr); }
  .help-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .service-select-grid{ grid-template-columns:1fr; }
  .help-grid{ grid-template-columns:1fr; }
  .wizard-step-pill .label{ display:none; }
  .wizard-step-pill{ padding:8px; }
  .review-row{ flex-direction:column; gap:4px; }
  .review-row .v{ text-align:left; }
  .selected-service-recap{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   NEW PORTFOLIO CONTENT ADD-ON
   (Brand PDF imports, animated storytelling, creatives) —
   additive only, reuses existing tokens, does not touch anything above.
   ============================================================ */

/* ---- Reusable Lightbox (images + video) ---- */
.wr-lightbox{
  position:fixed; inset:0; z-index:1950; /* above header/mobile-nav (900/1800) so the modal and its close button are never hidden behind them */
  background:rgba(1,0,2,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-mid) var(--ease-soft);
  padding:clamp(16px,4vw,48px);
}
.wr-lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }
.wr-lightbox-stage{ position:relative; max-width:1200px; width:100%; max-height:88vh; display:flex; align-items:center; justify-content:center; }
.wr-lightbox-stage img,
.wr-lightbox-stage video{
  max-width:100%; max-height:88vh; border-radius:var(--radius-md);
  object-fit:contain; background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  cursor:zoom-in;
  transition:transform .35s var(--ease-soft);
}
.wr-lightbox-stage video{ cursor:default; max-height:88vh; }
.wr-lightbox-stage img.wr-zoomed{ transform:scale(1.6); cursor:zoom-out; }
.wr-lightbox-caption{
  position:absolute; left:0; right:0; bottom:-38px; text-align:center;
  font-size:var(--fs-small); color:var(--w-60);
}
.wr-lightbox-prev, .wr-lightbox-next{
  position:absolute; z-index:2;
  width:48px; height:48px; border-radius:50%;
  background:var(--w-08); border:1px solid var(--w-15); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--dur-fast);
}
.wr-lightbox-prev:hover, .wr-lightbox-next:hover{ background:var(--w-15); }
.wr-lightbox-prev{ left:-64px; top:50%; transform:translateY(-50%); }
.wr-lightbox-next{ right:-64px; top:50%; transform:translateY(-50%); }
.wr-lightbox-prev svg, .wr-lightbox-next svg{ width:20px; height:20px; }
/* ---- Close button: fixed to the viewport corner (not the stage), so it is
   always visible above the media regardless of aspect ratio, and is never
   pushed off-screen. Higher-contrast solid backing so it reads over bright
   video/embeds; generous hit area for touch. ---- */
.wr-lightbox-close{
  position:fixed; z-index:3;
  top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px);
  width:48px; height:48px; border-radius:50%;
  background:rgba(1,0,2,.72); border:1px solid var(--w-20); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
  backdrop-filter:blur(6px);
}
.wr-lightbox-close:hover{ background:rgba(1,0,2,.9); border-color:var(--w-40); transform:scale(1.08); }
.wr-lightbox-close svg{ width:20px; height:20px; }
@media (max-width:900px){
  .wr-lightbox-prev{ left:0; transform:translate(0,-50%); }
  .wr-lightbox-next{ right:0; transform:translate(0,-50%); }
  .wr-lightbox-close{ width:44px; height:44px; }
}

/* ---- Clickable gallery items that open the lightbox (new content only) ---- */
[data-lightbox-group] a, [data-lightbox-group] button.lb-item{ cursor:zoom-in; }

/* ---- Vertical video grid (animated storytelling) ---- */
.video-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.video-tile{
  position:relative; aspect-ratio:9/16; border-radius:var(--radius-md);
  overflow:hidden; background:var(--w-06); border:1px solid var(--w-10);
  cursor:pointer;
}
.video-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease-soft); }
.video-tile:hover img{ transform:scale(1.06); }
/* ---- Hover/tap preview layer: sits on top of the poster <img>, muted +
   looping, hidden until JS starts playback (see script.js reelSection()).
   The poster stays underneath as the graceful default/fallback state. ---- */
.video-tile .tile-video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-soft);
}
.video-tile.is-playing .tile-video{ opacity:1; }
.video-tile .play-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.video-tile .play-badge span{
  width:52px; height:52px; border-radius:50%; background:rgba(1,0,2,.55);
  border:1px solid var(--w-30); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:transform var(--dur-fast), background var(--dur-fast);
}
.video-tile:hover .play-badge span{ transform:scale(1.1); background:rgba(1,0,2,.75); }
.video-tile .play-badge svg{ width:18px; height:18px; margin-left:3px; }
.video-tile .v-label{
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px;
  background:linear-gradient(to top, rgba(1,0,2,.85), transparent);
  font-size:var(--fs-tiny); color:var(--w-85); font-weight:600;
}
@media (max-width:1080px){ .video-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .video-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* ---- Reel video modal: click/tap lightbox for the Reels section ----
   Same open/close visual language as .popup-overlay (opacity+visibility,
   fade/scale card) so it feels native to the rest of the site. */
.reel-modal{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(1,0,2,.92);
  backdrop-filter:blur(10px);
  padding:30px;
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-mid) var(--ease), visibility var(--dur-mid);
}
.reel-modal.active{ opacity:1; visibility:visible; }
.reel-modal-content{
  position:relative;
  max-width:90vw; max-height:90vh;
  transform:scale(.96);
  transition:transform var(--dur-mid) var(--ease-soft);
}
.reel-modal.active .reel-modal-content{ transform:scale(1); }
.reel-modal-content video{
  display:block;
  max-width:90vw; max-height:90vh;
  width:auto; height:auto;
  border-radius:var(--radius-md);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9);
  background:#000;
}
.reel-modal-close{
  position:absolute; top:20px; right:25px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--w-15);
  background:rgba(255,255,255,.12);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2001;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.reel-modal-close svg{ width:18px; height:18px; }
.reel-modal-close:hover{ background:rgba(255,255,255,.22); transform:scale(1.08); }
@media (max-width:640px){
  .reel-modal{ padding:16px; }
  .reel-modal-close{ top:14px; right:14px; width:40px; height:40px; }
}
@media (prefers-reduced-motion: reduce){
  .reel-modal, .reel-modal-content, .reel-modal-close, .video-tile .tile-video{ transition:none !important; }
}

/* ============================================================
   IN-SITE EMBED MODAL — Instagram Reels & YouTube
   Added so every Instagram Reel and YouTube video on the site opens
   in this shared modal instead of navigating to instagram.com /
   youtube.com. Visual language is intentionally identical to the
   existing .wr-lightbox / .reel-modal components above (same dark
   overlay treatment, same fixed corner close button) — a separate,
   self-contained component so neither of those existing modals or
   their markup/behaviour is touched. Built and injected entirely by
   script.js (see WRPlayEmbed) — no static markup needed on any page,
   so reel-card / fv-player thumbnails, hover effects and animations
   are completely unchanged; only what happens after a click differs.
   ============================================================ */
.wr-embed-modal{
  position:fixed; inset:0; z-index:1960;
  background:rgba(1,0,2,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-mid) var(--ease-soft);
  padding:clamp(16px,4vw,48px);
}
.wr-embed-modal.open{ opacity:1; visibility:visible; pointer-events:auto; }
.wr-embed-modal-box{
  position:relative;
  width:100%;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
/* Vertical box for Instagram Reels — mirrors the 9:16 .reel-video-card shape. */
.wr-embed-modal-box.is-instagram{ max-width:400px; aspect-ratio:9/16; max-height:88vh; }
/* Widescreen box for YouTube — mirrors the 16:9 .fv-player shape. */
.wr-embed-modal-box.is-youtube{ max-width:960px; aspect-ratio:16/9; }
.wr-embed-modal-box iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; display:block;
}
.wr-embed-modal-close{
  position:fixed; z-index:3;
  top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px);
  width:48px; height:48px; border-radius:50%;
  background:rgba(1,0,2,.72); border:1px solid var(--w-20); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
  backdrop-filter:blur(6px);
}
.wr-embed-modal-close:hover{ background:rgba(1,0,2,.9); border-color:var(--w-40); transform:scale(1.08); }
.wr-embed-modal-close svg{ width:20px; height:20px; }
@media (max-width:900px){
  .wr-embed-modal-close{ width:44px; height:44px; }
}
@media (max-width:640px){
  .wr-embed-modal{ padding:20px 14px; }
  .wr-embed-modal-box.is-instagram{ max-width:92vw; }
}
@media (prefers-reduced-motion: reduce){
  .wr-embed-modal{ transition:none !important; }
}

/* ---- Instagram Reel cards — custom thumbnail + play button + inline
   video. No Instagram iframe/embed/widget anywhere: the "before" state is
   our own original Reel thumbnail image, the "after" state (once clicked)
   is a plain native <video> element loaded into the exact same box. No
   profile/likes/comments/share/captions/footer — the card is only ever
   the media itself. See wireReelVideoCards() in js/script.js. ---- */
.reel-video-card{
  position:relative;
  aspect-ratio:9/16;
  width:100%;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#000;
  border:1px solid var(--w-10);
}
.reel-thumbnail{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.reel-thumbnail img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s var(--ease-soft);
}
.reel-video-card:hover .reel-thumbnail img{ transform:scale(1.05); }
.reel-play-button{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:56px; height:56px;
  border-radius:50%;
  background:rgba(1,0,2,.55);
  border:1px solid var(--w-30);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  color:var(--w-85);
  cursor:pointer;
  padding:0;
  opacity:1;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.reel-play-button svg{ width:20px; height:20px; margin-left:3px; }
.reel-video-card:hover .reel-play-button{ transform:translate(-50%,-50%) scale(1.1); background:rgba(1,0,2,.75); }
/* Centralized video hover controller (js/script.js) adds this class to the
   card while its managed video is playing — smoothly hide the play icon
   rather than have it hard-cut, and bring it back the same way once the
   video pauses/resets on mouse-leave. */
.is-hover-playing .reel-play-button,
.is-hover-playing .play-badge,
.is-hover-playing .yt-play-btn{ opacity:0; pointer-events:none; }
.reel-video-card video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  background:#000;
}
@media (prefers-reduced-motion: reduce){
  .reel-thumbnail img, .reel-play-button{ transition:none !important; }
}

/* ---- Reel grid wrapper (Home / About / Production) — plain responsive
   grid, no extra chrome, so the reel cards sit edge-to-edge with equal
   sizing wherever they appear. ---- */
.reel-cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:1080px){ .reel-cards-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .reel-cards-grid{ grid-template-columns:repeat(1,1fr); max-width:360px; margin-left:auto; margin-right:auto; } }
.reel-cards-grid.reel-cards-grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:640px){ .reel-cards-grid.reel-cards-grid-2{ grid-template-columns:repeat(1,1fr); max-width:360px; margin-left:auto; margin-right:auto; } }

/* ---- New-content gallery grid (square masonry-ish, image lightbox) ---- */
.creative-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.creative-grid a{
  display:block; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--w-10); background:var(--w-04); aspect-ratio:1/1;
}
.creative-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-soft); }
.creative-grid a:hover img{ transform:scale(1.08); }
@media (max-width:1080px){ .creative-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .creative-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }

/* ---- Small industry chip row on brand cards ---- */
.industry-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-tiny); color:var(--w-60);
  border:1px solid var(--w-12); border-radius:var(--radius-pill);
  padding:4px 12px; margin-bottom:14px;
}

/* ---- Asset-source note (small, honest footnote on collective showcase pages) ---- */
.source-note{ font-size:var(--fs-tiny); color:var(--w-40); margin-top:10px; }

/* ---- Colour swatch row (brand palettes on new case-study pages) ---- */
.color-swatch-row{ display:flex; flex-wrap:wrap; gap:14px; margin:22px 0 6px; }
.color-swatch{ width:150px; }
.color-swatch .sw{ height:64px; border-radius:var(--radius-sm); border:1px solid var(--w-15); margin-bottom:8px; }
.color-swatch .name{ font-size:var(--fs-tiny); font-weight:700; color:var(--text); }
.color-swatch .hex{ font-size:var(--fs-tiny); color:var(--w-40); }

/* ---- Featured Video Showcase (Wide Screen Portfolio) ---- */
.featured-video-card{
  border-radius:var(--radius-lg);
  border:1px solid var(--w-10);
  background:var(--w-03);
  overflow:hidden;
  margin-bottom:28px;
  transition:transform var(--dur-mid) var(--ease-soft), border-color var(--dur-mid), box-shadow var(--dur-mid);
}
.featured-video-card:hover{
  transform:translateY(-6px);
  border-color:var(--w-20);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
}
.featured-video-card:last-child{ margin-bottom:0; }
.featured-video-card .fv-player{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
}
.featured-video-card video{ width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.featured-video-card .fv-body{ padding:clamp(20px,3vw,34px) clamp(20px,3vw,34px) clamp(24px,3.4vw,38px); }
.featured-video-card .fv-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--fs-tiny); font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--w-50); margin-bottom:10px;
}
.featured-video-card h3{ font-size:var(--fs-h3); margin-bottom:10px; }
.featured-video-card p{ color:var(--w-60); font-size:var(--fs-small); max-width:70ch; }
@media (max-width:640px){
  .featured-video-card .fv-body{ padding:18px 18px 22px; }
}

/* ---- Placeholder / "coming soon" cards (portfolio structure update) ---- */
.placeholder-card{
  border:1px dashed var(--w-15);
  border-radius:var(--radius-lg);
  background:var(--w-03);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px 24px; min-height:220px;
  transition:border-color var(--dur-mid), background var(--dur-mid);
}
.placeholder-card:hover{ border-color:var(--w-30); background:var(--w-04); }
.placeholder-card .ico{
  width:44px; height:44px; border-radius:50%; background:var(--w-06); border:1px solid var(--w-12);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.placeholder-card .ico svg{ width:18px; height:18px; opacity:.6; }
.placeholder-card h4{ font-size:1rem; color:var(--w-70); margin-bottom:6px; }
.placeholder-card p{ font-size:var(--fs-tiny); color:var(--w-40); }
.placeholder-card .soon-chip{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:var(--fs-tiny); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--w-40); border:1px solid var(--w-12); border-radius:var(--radius-pill); padding:5px 12px;
}

/* Placeholder variant of the featured-video-card (Wide Screen Portfolio) */
.featured-video-card.is-placeholder .fv-player{
  display:flex; align-items:center; justify-content:center;
  background:var(--w-04);
}
.featured-video-card.is-placeholder .fv-player .ico{
  width:64px; height:64px; border-radius:50%; background:var(--w-06); border:1px solid var(--w-12);
  display:flex; align-items:center; justify-content:center;
}
.featured-video-card.is-placeholder .fv-player .ico svg{ width:24px; height:24px; opacity:.5; }

/* YouTube click-to-play thumbnail (reuses the same play-badge visual
   language as .video-tile .play-badge — same colors/blur/hover). */
.fv-player .yt-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.fv-player .yt-play-btn{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(1,0,2,.15); border:0; padding:0; cursor:pointer;
}
.fv-player .yt-play-btn span{
  width:64px; height:64px; border-radius:50%; background:rgba(1,0,2,.55);
  border:1px solid var(--w-30); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:transform var(--dur-fast), background var(--dur-fast);
}
.fv-player .yt-play-btn:hover span{ transform:scale(1.1); background:rgba(1,0,2,.75); }
.fv-player .yt-play-btn svg{ width:26px; height:26px; margin-left:3px; color:#fff; }
.fv-player iframe.yt-embed{ width:100%; height:100%; border:0; display:block; }

/* Sub-section label used inside a category page (e.g. "Horizontal Productions") */
.subsection-label{
  font-size:var(--fs-small); font-weight:700; color:var(--w-70);
  text-transform:uppercase; letter-spacing:.06em;
  margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.subsection-label::after{ content:""; flex:1; height:1px; background:var(--w-10); }

/* Industry / sub-filter pill row (Branding Portfolio: Manufacturing / Food / Services) */
.sub-filter-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 30px; }
.sub-filter-tabs button{
  font-family:var(--font); font-size:var(--fs-small); font-weight:600; color:var(--w-60);
  background:var(--w-04); border:1px solid var(--w-10); border-radius:var(--radius-pill);
  padding:9px 18px; cursor:pointer; transition:all var(--dur-fast) var(--ease);
}
.sub-filter-tabs button:hover{ color:var(--text); border-color:var(--w-30); }
.sub-filter-tabs button.active{ background:var(--text); color:var(--bg); border-color:var(--text); }

/* ---- News & Events: video-preview thumbnail (additive only — does not
   alter .news-card .thumb behaviour for any photo-only card). Used on
   the main News & Events listing card that has video coverage, so the
   card visibly shows a playing preview + play button instead of a
   static photo. Clicking opens the same site-wide video lightbox
   (see the "WR LIGHTBOX" component above) so the actual local MP4
   plays with full controls, without navigating away. ---- */
.news-card .thumb.news-video-thumb{ position:relative; }
.news-card .thumb.news-video-thumb video.news-video-preview{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease-soft);
}
.news-card:hover .thumb.news-video-thumb video.news-video-preview{ transform:scale(1.06); }
.news-video-thumb .play-badge{
  position:absolute; top:0; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; z-index:2;
}
.news-video-thumb .play-badge span{
  width:52px; height:52px; border-radius:50%; background:rgba(1,0,2,.55);
  border:1px solid var(--w-30); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:transform var(--dur-fast), background var(--dur-fast);
}
.news-card:hover .news-video-thumb .play-badge span{ transform:scale(1.1); background:rgba(1,0,2,.75); }
.news-video-thumb .play-badge svg{ width:18px; height:18px; margin-left:3px; }
.news-video-thumb .video-badge-label{
  position:absolute; top:12px; left:12px; z-index:2;
  display:flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius:var(--radius-pill);
  background:rgba(10,10,11,.75); backdrop-filter:blur(8px);
  border:1px solid var(--w-15); font-size:.62rem; font-weight:700; color:var(--text);
  letter-spacing:.03em; text-transform:uppercase;
}
.news-video-thumb .video-badge-label svg{ width:12px; height:12px; }
/* Defensively suppress any browser-native video chrome on the preview
   element itself (it intentionally has no "controls" attribute — the
   custom play-badge above is the only visible control until clicked,
   at which point the real lightbox <video> gets full native controls). */
.news-video-preview{ pointer-events:none; }
.news-video-preview::-webkit-media-controls,
.news-video-preview::-webkit-media-controls-panel,
.news-video-preview::-webkit-media-controls-play-button,
.news-video-preview::-webkit-media-controls-start-playback-button{
  display:none !important; -webkit-appearance:none;
}

/* ============================= SOCIAL MEDIA — CAMPAIGN RESULTS (added) =============================
   New categorized results section on the Social Media page, inserted above
   "What's Included". Reuses the site's existing .card component (background,
   border, radius, hover lift) and .section-head/.eyebrow heading pattern —
   only the grid/thumb rules below are new. */
.campaign-category{ margin-top:52px; }
.campaign-category:first-of-type{ margin-top:0; }
.campaign-category-title{
  font-size:1.25rem;
  font-weight:800;
  letter-spacing:-.01em;
  margin-bottom:20px;
}
.campaign-result-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.campaign-result-card{ overflow:hidden; }
.campaign-result-card .thumb{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--w-03);
  border-radius:var(--radius-lg);
}
.campaign-result-card .thumb img{
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:transform .7s var(--ease-soft);
  display:block;
}
.campaign-result-card:hover .thumb img{ transform:scale(1.06); }

@media (max-width:1080px){
  .campaign-result-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px){
  .campaign-result-grid{ grid-template-columns:1fr; }
  .campaign-category{ margin-top:40px; }
}

/* ===== Hospital Project gallery — match every image to the first one's
   dimensions =====
   The shared .gallery-grid rule above (used by 58+ galleries site-wide, so
   deliberately left untouched) sizes each image to its OWN natural aspect
   ratio, which is why this specific gallery's three screenshots — genuinely
   different native proportions (the main dashboard shot is wider than the
   other two module screenshots) — end up displaying at different heights.
   Scoped only to this gallery via its unique data-lightbox-group value: force
   every image in it to the first image's real aspect ratio (1486x622) and
   crop-to-fill (object-fit:cover) rather than letterbox, so all three render
   at the same size without stretching or distorting any of them. Equal
   selector specificity to .gallery-grid img, so source order (this rule is
   later in the file) is what makes it win — no !important needed. */
[data-lightbox-group="hospital-project"] img{
  aspect-ratio: 1486 / 622;
  object-fit: cover;
}