/* =========================================================
   COSPRONOS MEDIA : Duolingo-style, Cospronos palette
   Palette (from logo): orange (PRIMARY), blue (SECONDARY), navy, white
   Swap primary ↔ secondary in :root to restyle whole site.
   ========================================================= */

:root{
  /* Brand colors */
  --orange:    #F59E0B;
  --orange-dk: #C97A00;
  --orange-bg: #FFF2D9;
  --orange-bd: #FFD98A;

  --blue:      #2C7BE5;
  --blue-dk:   #1E5CC4;
  --blue-bg:   #E8F2FF;
  --blue-bd:   #BED8F8;

  --navy:      #0B2453;

  /* Semantic roles : orange = primary, blue = secondary */
  --primary:      var(--orange);
  --primary-dk:   var(--orange-dk);
  --primary-bg:   var(--orange-bg);
  --primary-bd:   var(--orange-bd);
  --primary-rgb:  245, 158, 11;

  --secondary:     var(--blue);
  --secondary-dk:  var(--blue-dk);
  --secondary-bg:  var(--blue-bg);
  --secondary-bd:  var(--blue-bd);
  --secondary-rgb: 44, 123, 229;

  /* Neutrals */
  --ink:     #2B3440;
  --muted:   #7A838D;
  --line:    #E5E7EB;
  --line-2:  #F1F3F5;
  --slot-br: #C9D1DA;

  --bg:      #FFFFFF;
  --bg-soft: #F7F8FA;

  --radius:    16px;
  --radius-lg: 20px;
}

/* -------- reset -------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight:700;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.container{ width:min(1160px, 92%); margin:0 auto; }

/* =========================================================
   HEADINGS  (Fredoka : Duolingo "Feather Bold" feel)
========================================================= */
.h1, .h2, h1, h2, h3 {
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.h1{
  font-size:clamp(2rem, 6vw, 4.8rem);
  line-height:1.05;
  color:var(--navy);
  margin:.15em 0 .4em;
  font-weight:700;
}
.h1-accent{ color:var(--primary); }

/* Typewriter : cycles through phrases, color changes per word */
.typewriter{
  display:inline-block;
  color:var(--primary);
  transition:color .25s ease;
  min-width:8ch;
  max-width:100%;
}
.typewriter::after{
  content:"";
  display:inline-block;
  width:.08em;
  height:.85em;
  background:currentColor;
  vertical-align:-0.05em;
  margin-left:.1em;
  border-radius:2px;
  animation:tw-caret 1s steps(1) infinite;
}
@keyframes tw-caret{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .typewriter::after{ animation:none; opacity:0; }
}
.h2{
  font-size:clamp(1.8rem, 3.8vw, 2.7rem);
  line-height:1.08;
  color:var(--navy);
  margin:.2em 0 .4em;
  font-weight:700;
}
h3, h4, h5 {
  font-family: "Fredoka", "Nunito", system-ui, sans-serif;
  font-weight: 600;
}
.eyebrow{
  display:inline-block;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--primary-dk);
  background:var(--primary-bg);
  padding:.45em .9em;
  border-radius:999px;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}
.eyebrow-alt{
  color:var(--secondary-dk); background:var(--secondary-bg);
}
.lead{
  font-size:clamp(1rem, 1.55vw, 1.18rem);
  font-weight:600;
  color:#505860;
  max-width:42ch;
}
.body{ font-weight:600; color:#505860; margin:0 0 1em; }
.body-center{
  font-weight:600; color:#505860;
  max-width:60ch; margin:.4em auto 0; text-align:center;
}

/* =========================================================
   DUOLINGO-STYLE CHUNKY 3D BUTTONS
   Primary = white bg + blue text + light-grey 3D shadow (Duolingo style)
   Accent  = orange / blue filled for high-emphasis CTAs
========================================================= */
.btn{
  --b: #fff;
  --b-dk: var(--line);
  --b-bd: var(--line);
  --b-txt: var(--secondary);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:14px 22px;
  border-radius:16px;
  background:var(--b);
  color:var(--b-txt);
  font-family:"Fredoka", "Nunito", sans-serif;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.95rem;
  cursor:pointer;
  box-shadow:0 5px 0 0 var(--b-dk);
  transition:transform .06s ease, box-shadow .06s ease, border-color .15s ease, color .15s ease;
  user-select:none;
  border:2px solid var(--b-bd);
}
.btn:hover{
  border-color:var(--secondary-bd);
}
.btn:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 0 var(--b-dk);
}
/* Primary : Duolingo outlined button (white bg + blue text) */
.btn-primary{
  --b:#fff;
  --b-dk:var(--line);
  --b-bd:var(--line);
  --b-txt:var(--secondary);
}
.btn-primary:hover{
  --b-bd:var(--secondary);
  color:var(--secondary-dk);
}
/* Secondary : solid blue (high-emphasis) */
.btn-secondary{
  --b:var(--secondary);
  --b-dk:var(--secondary-dk);
  --b-bd:var(--secondary-dk);
  --b-txt:#fff;
}
.btn-secondary:hover{ --b-bd:var(--secondary-dk); filter:brightness(1.05); }
/* Gold : orange filled (featured emphasis) */
.btn-gold{
  --b:var(--primary);
  --b-dk:var(--primary-dk);
  --b-bd:var(--primary-dk);
  --b-txt:#fff;
}
.btn-gold:hover{ --b-bd:var(--primary-dk); filter:brightness(1.05); }
/* Ghost : transparent (used on hero and navy backgrounds) */
.btn-ghost{
  --b:transparent;
  --b-dk:var(--line);
  --b-bd:var(--line);
  --b-txt:var(--navy);
}
.btn-ghost:hover{ --b-bd:var(--secondary); color:var(--secondary-dk); }
.btn-lg{ padding:18px 28px; font-size:1rem; border-radius:18px; }
.btn-sm{ padding:10px 16px; font-size:.75rem; border-radius:12px; box-shadow:0 4px 0 0 var(--b-dk); }
.btn-sm:active{ box-shadow:0 1px 0 0 var(--b-dk); transform:translateY(3px); }
.btn-block{ display:flex; width:100%; }

/* "Almost ready" pill : non-clickable status badge that pairs with a
   real CTA when a destination page is still in build. Dashed border
   echoes the empty-image-slot convention so users read it as
   intentionally placeholder. */
.cmdpp-soon{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  font-family:"Fredoka","Nunito",system-ui,sans-serif;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.01em;
  color:var(--navy);
  background:var(--bg-soft);
  border:2px dashed var(--line);
  border-radius:14px;
  line-height:1;
  cursor:default;
  user-select:none;
}
.cmdpp-soon-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(243,156,18,.18);
  flex-shrink:0;
  animation:cmdppPulse 1.8s ease-in-out infinite;
}
@keyframes cmdppPulse{
  0%, 100%{ box-shadow:0 0 0 4px rgba(243,156,18,.18); }
  50%     { box-shadow:0 0 0 7px rgba(243,156,18,.06); }
}
@media (prefers-reduced-motion: reduce){
  .cmdpp-soon-dot{ animation:none; }
}

/* =========================================================
   IMAGE SLOTS : drop real images/videos in here
========================================================= */
.img-slot{
  background:
    repeating-linear-gradient(
      45deg,
      #FAFBFC 0px, #FAFBFC 10px,
      #F3F5F7 10px, #F3F5F7 20px
    );
  border:2px dashed var(--slot-br);
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#93A0AD;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.08em;
  text-align:center;
  padding:8px;
  transition:border-color .15s ease, color .15s ease;
}
.img-slot::after{
  content: attr(data-label);
  display:inline-block;
  padding:4px 8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:6px;
}
.img-slot:hover{ border-color:var(--primary); color:var(--primary); }

/* slot sizes */
.img-slot-hero    { aspect-ratio:1/1; width:100%; border-radius:24px; }

/* Studio image (landscape JPG) : golden 3D frame, natural aspect ratio */
.studio-img{
  display:block;
  width:100%;
  max-width:640px;
  height:auto;
  object-fit:contain;
  background:#FFF5CC;
  border:6px solid var(--primary);
  border-radius:24px;
  box-shadow:
    0 10px 0 var(--primary-dk),
    0 18px 40px rgba(245,158,11,.18);
  margin:0 auto;
  transition:transform .2s ease;
}
.studio-img:hover{
  transform:translateY(-2px);
}

/* Stats band intro: aspirational framing above numbers */
.stats-band-intro{
  text-align:center;
  max-width:620px;
  margin:0 auto 32px;
}
.stats-band-intro .eyebrow{
  margin-bottom:10px;
}
.stats-band-intro h3{
  margin:0;
  color:var(--navy);
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:700;
  font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  line-height:1.2;
}
.stats-band-intro p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:.94rem;
  font-weight:500;
}

/* Image stack carousel (landscape cascading tilt, click/drag to advance) */
.img-stack{
  position:relative;
  width:calc(100% - 80px);
  max-width:560px;
  aspect-ratio:16/9;
  margin:60px auto 64px;
  cursor:grab;
  perspective:1200px;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y;
}
.img-stack:active{ cursor:grabbing; }
.img-stack-card{
  position:absolute;
  inset:0;
  border-radius:18px;
  overflow:hidden;
  border:2px solid var(--stack-border, rgba(229,231,235,.8));
  background:var(--stack-bg, #fff);
  box-shadow:0 10px 30px rgba(11,36,83,.14);
  transform-origin:bottom center;
  transition:
    transform .55s cubic-bezier(.22,.8,.3,1),
    opacity .35s ease,
    box-shadow .3s ease;
  will-change:transform, opacity;
  z-index:0;
  opacity:0;
  pointer-events:none;
  transform:translate(-108px, -64px) rotate(-26deg) scale(.86);
}
.img-stack-card img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:var(--stack-bg, #F7F8FA);
  display:block;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

/* Cascading tilt: card 0 straight, each subsequent card rotates slightly more,
   shifts left and up in smaller increments (fits inside the column cleanly). */
.img-stack-card[data-pos="0"]{
  z-index:50;
  transform:translate(0, 0) rotate(0deg);
  opacity:1;
  pointer-events:auto;
}
.img-stack-card[data-pos="1"]{
  z-index:40;
  transform:translate(-7px, -5px) rotate(-3.5deg);
  opacity:1;
}
.img-stack-card[data-pos="2"]{
  z-index:30;
  transform:translate(-14px, -10px) rotate(-6deg);
  opacity:.95;
}
.img-stack-card[data-pos="3"]{
  z-index:20;
  transform:translate(-21px, -15px) rotate(-8.5deg);
  opacity:.82;
}
.img-stack-card[data-pos="4"]{
  z-index:10;
  transform:translate(-28px, -20px) rotate(-11deg);
  opacity:.55;
}
.img-stack-card[data-pos="5"]{
  z-index:4;
  transform:translate(-35px, -25px) rotate(-13deg);
  opacity:.25;
}

.img-stack:hover .img-stack-card[data-pos="0"]{
  transform:translate(0, -4px) rotate(0deg) scale(1.035);
  box-shadow:0 22px 48px rgba(11,36,83,.22);
}

/* Drag state: no transition, follows pointer */
.img-stack-card.is-dragging{
  transition:none;
  box-shadow:0 28px 55px rgba(11,36,83,.28);
  z-index:100;
}

/* Fly-off state after drag past threshold or click */
.img-stack-card.is-flying{
  transition:
    transform .45s cubic-bezier(.3,.6,.3,1),
    opacity .3s ease;
  z-index:100;
}

.img-stack-count{
  position:absolute;
  bottom:-48px;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--navy);
  color:#fff;
  padding:8px 16px;
  border-radius:999px;
  font-family:"JetBrains Mono", monospace;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.06em;
  z-index:60;
  pointer-events:none;
  white-space:nowrap;
}
.img-stack-count-sep{
  width:1px;
  height:12px;
  background:rgba(255,255,255,.28);
}
.img-stack-count-hint{
  color:rgba(255,255,255,.72);
  font-weight:600;
}
/* Legacy hint kept hidden (merged into count pill) */
.img-stack-hint{ display:none; }

/* =========================================================
   IMAGE LIGHTBOX : Microsoft-Store / Google-Play style preview
   Tap any stack card to open; arrows / swipe / Esc close.
========================================================= */
.img-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(11,36,83,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease, visibility 0s linear .28s;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.img-lightbox.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .28s ease, visibility 0s;
}
.img-lightbox-stage{
  position:relative;
  max-width:min(1400px, 92vw);
  max-height:82vh;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.img-lightbox-img{
  display:block;
  max-width:100%;
  max-height:82vh;
  object-fit:contain;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  pointer-events:auto;
  background:#000;
  animation:lightboxPop .3s cubic-bezier(.2,.8,.3,1.1);
}
@keyframes lightboxPop{
  from{ opacity:0; transform:scale(.94); }
  to  { opacity:1; transform:scale(1); }
}
.img-lightbox-close,
.img-lightbox-prev,
.img-lightbox-next{
  position:absolute;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.32);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size:26px;
  font-weight:700;
  line-height:1;
  font-family:"Fredoka","Nunito",sans-serif;
  padding:0;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
  z-index:2;
}
.img-lightbox-close:hover,
.img-lightbox-prev:hover,
.img-lightbox-next:hover{
  background:rgba(255,255,255,.26);
  border-color:rgba(255,255,255,.55);
}
.img-lightbox-close{ top:24px; right:24px; }
.img-lightbox-close:hover{ transform:scale(1.08) rotate(90deg); }
.img-lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
.img-lightbox-prev:hover{ transform:translateY(-50%) scale(1.08); }
.img-lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }
.img-lightbox-next:hover{ transform:translateY(-50%) scale(1.08); }
.img-lightbox-close:focus-visible,
.img-lightbox-prev:focus-visible,
.img-lightbox-next:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:3px;
}
.img-lightbox-counter{
  position:absolute;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,.55);
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.06em;
  z-index:2;
  pointer-events:none;
}
/* Lock body scroll while lightbox is open */
body.has-lightbox{ overflow:hidden; }

@media (max-width:560px){
  .img-lightbox-close{ top:14px; right:14px; width:40px; height:40px; font-size:22px; }
  .img-lightbox-prev{ left:10px; width:40px; height:40px; font-size:22px; }
  .img-lightbox-next{ right:10px; width:40px; height:40px; font-size:22px; }
  .img-lightbox-counter{ bottom:14px; font-size:.68rem; padding:6px 12px; }
  .img-lightbox-img{ max-height:75vh; border-radius:12px; }
}
@media (prefers-reduced-motion: reduce){
  .img-lightbox{ transition:opacity .15s linear, visibility 0s linear .15s; }
  .img-lightbox.is-open{ transition:opacity .15s linear, visibility 0s; }
  .img-lightbox-img{ animation:none; }
}

@media (max-width: 900px){
  .img-stack{ max-width:420px; margin:72px auto 60px; }
}
@media (max-width: 560px){
  .img-stack{
    width:calc(100% - 50px);
    max-width:320px;
    margin:72px auto 56px;
  }
  .img-stack-hint{ font-size:.68rem; }
  .img-stack-card[data-pos="1"]{ transform:translate(-5px, -4px) rotate(-3deg); }
  .img-stack-card[data-pos="2"]{ transform:translate(-10px, -8px) rotate(-5deg); }
  .img-stack-card[data-pos="3"]{ transform:translate(-15px, -12px) rotate(-7deg); }
  .img-stack-card[data-pos="4"]{ transform:translate(-20px, -16px) rotate(-9deg); }
  .img-stack-card[data-pos="5"]{ transform:translate(-25px, -20px) rotate(-11deg); }
}
@media (prefers-reduced-motion: reduce){
  .img-stack-card,
  .img-stack-card.is-flying{ transition:opacity .2s linear; }
}

/* Feature-row mascot image (6:5 aspect, transparent PNG, soft radial fade) */
.feature-img{
  display:block;
  width:100%;
  max-width:560px;
  height:auto;
  aspect-ratio:6/5;
  object-fit:contain;
  background:transparent;
  margin:0 auto;
  -webkit-mask-image:radial-gradient(
    ellipse 82% 82% at center 48%,
    #000 46%,
    rgba(0,0,0,.9) 62%,
    rgba(0,0,0,.5) 82%,
    rgba(0,0,0,.15) 94%,
    transparent 100%);
          mask-image:radial-gradient(
    ellipse 82% 82% at center 48%,
    #000 46%,
    rgba(0,0,0,.9) 62%,
    rgba(0,0,0,.5) 82%,
    rgba(0,0,0,.15) 94%,
    transparent 100%);
}

/* Real hero image (transparent PNG, no dashed-slot treatment) */
.hero-img{
  display:block;
  width:138%;
  max-width:138%;
  margin-left:-19%;
  margin-right:-19%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  background:transparent;
  /* Soft radial vignette mask : fades all edges (top, sides, bottom)
     into transparent so the mascot scene melts into the white hero bg
     with no hard cutoffs on any side. Center mass stays fully opaque. */
  -webkit-mask-image:radial-gradient(
    ellipse 78% 78% at center 48%,
    #000 42%,
    rgba(0,0,0,.9) 60%,
    rgba(0,0,0,.5) 80%,
    rgba(0,0,0,.15) 92%,
    transparent 100%);
          mask-image:radial-gradient(
    ellipse 78% 78% at center 48%,
    #000 42%,
    rgba(0,0,0,.9) 60%,
    rgba(0,0,0,.5) 80%,
    rgba(0,0,0,.15) 92%,
    transparent 100%);
}
@media (max-width: 960px){
  .hero-img{
    width:100%;
    max-width:560px;
    margin:0 auto;
  }
}
@media (max-width: 560px){
  .hero-img{ max-width:420px; }
}
.img-slot-icon    { width:96px; height:96px; border-radius:18px; }
.img-slot-about   { aspect-ratio: 5/6; width:100%; border-radius:20px; }
.img-slot-pkg     { width:120px; height:120px; border-radius:18px; margin-bottom:4px; }
.img-slot-avatar  { width:72px; height:72px; border-radius:50%; flex-shrink:0; }
.img-slot-cert    { width:120px; height:120px; border-radius:18px; margin:0 auto 12px; }
.img-slot-project { aspect-ratio: 4/3; width:100%; border-radius:20px; }
.img-slot-mini    { aspect-ratio: 3/2; width:100%; border-radius:14px; }

/* =========================================================
   PILLS & TAGS
========================================================= */
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.5em 1em;
  background:var(--secondary-bg);
  color:var(--secondary-dk);
  border-radius:999px;
  font-weight:800;
  font-size:.8rem;
  border:2px solid var(--secondary-bd);
  font-family:"JetBrains Mono", monospace;
  letter-spacing:.04em;
}
.pill-dot{
  width:.55em; height:.55em; border-radius:50%;
  background:var(--secondary);
  box-shadow:0 0 0 3px rgba(var(--secondary-rgb), .28);
}
.tag{
  display:inline-block;
  background:var(--bg-soft);
  border:2px solid var(--line);
  color:#55606D;
  padding:.35em .75em;
  border-radius:10px;
  font-weight:800;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-family:"JetBrains Mono", monospace;
}

/* =========================================================
   NAV
========================================================= */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:2px solid var(--line-2);
}
.nav-inner{
  width:min(1160px, 92%); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 0;
}
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand-mark{ width:38px; height:38px; border-radius:9px; }
.brand-word{
  font-weight:900;
  font-size:1.1rem;
  color:var(--navy);
  letter-spacing:-.01em;
  display:inline-flex; gap:5px;
}
.brand-word-alt{ color:var(--primary); }
.nav-links{ display:flex; gap:4px; }
.nav-links a{
  padding:10px 14px;
  border-radius:12px;
  font-weight:800;
  font-size:.95rem;
  color:#4A5563;
  transition:background .15s ease, color .15s ease;
}
.nav-links a:hover, .nav-links a.is-active{
  background:var(--primary-bg); color:var(--primary-dk);
}
.nav-cta{ white-space:nowrap; }

/* =========================================================
   NAV DROPDOWN : Services menu with Agency + AI sub-lists
========================================================= */
.nav-item.nav-has-dropdown{ position:relative; }
.nav-trigger{
  background:transparent;
  border:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  letter-spacing:.01em;
  border-radius:10px;
  transition:background .15s ease, color .15s ease;
}
.nav-trigger:hover{ background:var(--primary-bg); color:var(--primary-dk); }
.nav-caret{ font-size:.7em; transition:transform .25s ease; line-height:1; }
.nav-has-dropdown:hover .nav-caret,
.nav-has-dropdown.is-open .nav-caret{ transform:rotate(180deg); }

.nav-dropdown{
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:#fff;
  border:2px solid var(--line);
  border-radius:14px;
  box-shadow:0 14px 36px rgba(11,36,83,.14);
  padding:10px;
  min-width:280px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
  z-index:200;
}
.nav-has-dropdown:hover .nav-dropdown,
.nav-has-dropdown.is-open .nav-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
  pointer-events:auto;
  transition:opacity .2s ease, transform .25s ease, visibility 0s;
}
.nav-dropdown a{
  display:block;
  padding:9px 14px;
  border-radius:8px;
  font-size:.92rem;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  transition:background .12s ease, color .12s ease;
}
.nav-dropdown a:hover{ background:var(--secondary-bg); color:var(--secondary-dk); }
.nav-dropdown .nav-dd-overview{
  font-weight:700;
  color:var(--primary-dk);
  background:var(--primary-bg);
  margin-bottom:4px;
}
.nav-dropdown .nav-dd-overview:hover{ background:var(--primary); color:#fff; }
.nav-dd-label{
  display:block;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  padding:14px 14px 4px;
  border-top:1px solid var(--line-2);
  margin-top:4px;
}
.nav-dd-label:first-of-type{ border-top:0; padding-top:10px; }

@media (max-width: 720px){
  /* Mobile dropdown : collapsed by default, tap the trigger to expand.
     Selectors matched to desktop's specificity so transform:translateX(-50%)
     from the desktop rules can't leak through and push the dropdown
     off-screen left. */
  .nav-has-dropdown{ width:100%; position:static; }
  .nav-trigger{
    width:100%;
    justify-content:space-between;
    padding:12px 14px;
    border-radius:10px;
  }
  .nav-trigger:hover{ background:var(--bg-soft); color:var(--ink); }
  .nav-has-dropdown .nav-caret{ display:inline-block; }

  .nav-has-dropdown .nav-dropdown{
    position:static;
    inset:auto;
    transform:none;
    pointer-events:auto;
    box-shadow:none;
    border:0;
    background:transparent;
    min-width:0;
    width:100%;
    /* collapsed default */
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    padding:0 0 0 16px;
    transition:max-height .3s ease, opacity .2s ease, padding .25s ease, visibility 0s linear .3s;
  }
  .nav-has-dropdown:hover .nav-dropdown,
  .nav-has-dropdown.is-open .nav-dropdown{
    transform:none;
    max-height:560px;
    opacity:1;
    visibility:visible;
    padding:4px 0 10px 16px;
    transition:max-height .35s ease, opacity .25s ease, padding .25s ease, visibility 0s, transform 0s;
  }
  .nav-has-dropdown .nav-dropdown a{ padding:9px 14px; font-size:.9rem; border-radius:8px; display:block; }
  .nav-has-dropdown .nav-dropdown .nav-dd-overview{
    background:var(--primary-bg);
    color:var(--primary-dk);
    margin-bottom:4px;
  }
}

.nav-burger{
  display:none; background:transparent; border:0; padding:8px; cursor:pointer;
}
.nav-burger span{
  display:block; width:22px; height:3px;
  background:var(--navy); border-radius:2px; margin:4px 0;
  transition:transform .25s ease, opacity .2s ease;
}
.nav.is-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav.is-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   HOME HERO
========================================================= */
.hero{ padding:32px 0 80px; background:#fff; }
.hero-grid{
  width:min(1160px, 92%); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1fr;
  gap:40px; align-items:start;
}
.cta-row{
  display:flex; flex-wrap:wrap; gap:12px;
  margin:28px 0 24px;
}
.trust-row{
  display:flex; gap:28px; flex-wrap:wrap;
  padding-top:18px;
  border-top:2px dashed var(--line);
  margin-top:14px;
}
.trust-stat{ display:flex; flex-direction:column; }
.trust-stat strong{
  font-size:1.6rem; color:var(--navy); font-weight:900; line-height:1;
}
.trust-stat span{ font-size:.82rem; color:var(--muted); font-weight:700; margin-top:4px; max-width:18ch; }
.hero-visual{ display:flex; justify-content:center; }

/* =========================================================
   INTERIOR PAGE HERO
========================================================= */
.page-hero{
  text-align:center;
  padding:48px 0 56px;
  background:#fff;
  border-bottom:2px solid var(--line-2);
}
.page-hero .container{ max-width:780px; }
.page-hero .eyebrow{ margin-bottom:18px; }
.page-hero .h1{
  font-size:clamp(2rem, 4.8vw, 3.6rem);
  margin:.1em 0 .5em;
}
.page-hero .lead{
  margin:0 auto;
  max-width:56ch;
  text-align:center;
  font-size:clamp(1rem, 1.4vw, 1.15rem);
}
.page-hero .cta-row{ justify-content:center; margin-top:32px; }

/* Two-column variant: text left, image placeholder right */
.page-hero-split{ text-align:left; }
.page-hero-split .container{ max-width:1100px; }
.page-hero-split .page-hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:56px;
  align-items:center;
}
.page-hero-split .page-hero-text .lead{
  margin:0;
  max-width:none;
  text-align:left;
}
.page-hero-split .page-hero-text .h1{ text-align:left; }
.page-hero-split .page-hero-text .eyebrow{ display:inline-block; }
.page-hero-split .page-hero-visual{
  display:flex; justify-content:center; align-items:center;
}
.page-hero-split .page-hero-visual .img-slot{
  width:100%;
  aspect-ratio: 4 / 3;
  min-height:280px;
}
.page-hero-split .page-hero-visual .studio-img{
  max-width:none;
  width:100%;
}
@media (max-width: 820px){
  .page-hero-split{ text-align:center; }
  .page-hero-split .page-hero-grid{
    grid-template-columns:1fr;
    gap:32px;
  }
  .page-hero-split .page-hero-text .lead,
  .page-hero-split .page-hero-text .h1{ text-align:center; }
  .page-hero-split .page-hero-text .lead{ margin:0 auto; max-width:56ch; }
  .page-hero-split .page-hero-visual .img-slot{ min-height:220px; }
}

/* =========================================================
   VALUES
========================================================= */
.values{ padding:60px 0 20px; }
.values-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.value-card{
  background:#fff;
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:0 4px 0 var(--line);
  transition:transform .2s ease, box-shadow .2s ease;
}
.value-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 0 var(--line);
}
.value-card h3{
  margin:16px 0 6px; color:var(--navy); font-weight:900; font-size:1.05rem;
}
.value-card p{
  margin:0; color:var(--muted); font-weight:600; font-size:.92rem;
}

/* =========================================================
   SECTIONS
========================================================= */
.section{ padding:56px 0; }
.section-tight{ padding:40px 0; }
.section-head{ text-align:center; max-width:720px; margin:0 auto 32px; }

/* Blue section : background is transparent because the BODY bg is
   scroll-driven in JS (smoothly fades white ↔ blue as the user scrolls
   through). This gives a true scroll-tied transition instead of a static
   gradient baked into the section. */
.section-alt{
  background: transparent;
}
body{
  /* short transition catches fling-scrolls that outrun rAF */
  transition: background-color .15s linear;
}

/* =========================================================
   FEATURE ROWS (zig-zag alternating : text one side, visual the other)
========================================================= */
.feature-rows{ padding:8px 0; }
.feature-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:64px;
  align-items:center;
  padding:48px 0;
}
.feature-row + .feature-row{
  border-top:2px dashed var(--line);
}
.feature-row-reverse .feature-visual{ order:2; }
.feature-visual{ display:flex; justify-content:center; }
.feature-text{ max-width:480px; }
.feature-row .eyebrow{ margin-bottom:14px; }
.feature-text h2{
  font-size:clamp(1.7rem, 3vw, 2.2rem);
  line-height:1.1;
  margin:.1em 0 .4em;
}
.feature-text p{
  color:#505860; font-weight:600;
  font-size:clamp(1rem, 1.3vw, 1.08rem);
  margin:0 0 20px;
  max-width:42ch;
}
.feature-text .tag-row{ margin-top:16px; }
.feature-text .btn{ margin-top:8px; }

.img-slot-feature{
  aspect-ratio: 6/5;
  width:100%;
  max-width:520px;
  border-radius:24px;
}

/* =========================================================
   STATS BAND
========================================================= */
.stats-band{
  background:var(--bg-soft);
  border:2px solid var(--line);
  border-radius:28px;
  padding:48px 32px;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  box-shadow:0 4px 0 var(--line);
  max-width:1040px; margin:0 auto;
}
.stats-band .s-cell{
  text-align:center;
  padding:8px;
  border-right:2px dashed var(--line);
}
.stats-band .s-cell:last-child{ border-right:0; }
.stats-band strong{
  display:block;
  font-size:clamp(1.8rem, 3vw, 2.4rem);
  color:var(--navy); font-weight:900; line-height:1;
  letter-spacing:-.02em;
}
.stats-band span{
  display:block; margin-top:8px;
  color:var(--muted); font-weight:700; font-size:.88rem;
}

@media (max-width: 720px){
  .stats-band{ grid-template-columns:repeat(2, 1fr); gap:16px; padding:32px 24px; }
  .stats-band .s-cell{ border-right:0; padding:12px 8px; }
  .stats-band .s-cell:nth-child(odd){ border-right:2px dashed var(--line); }
}
@media (max-width: 420px){
  .stats-band{ grid-template-columns:1fr; }
  .stats-band .s-cell{ border-right:0!important; border-bottom:2px dashed var(--line); padding:16px 0; }
  .stats-band .s-cell:last-child{ border-bottom:0; }
}

/* =========================================================
   TEASERS (home)
========================================================= */
.teaser-grid-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.teaser-card{
  background:#fff;
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  box-shadow:0 4px 0 var(--line);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; gap:10px;
}
.teaser-card:hover{ transform:translateY(-4px); box-shadow:0 8px 0 var(--line); }
.teaser-card h3{
  margin:10px 0 4px;
  color:var(--navy); font-size:1.1rem; font-weight:900;
}
.teaser-card p{
  margin:0 0 8px; color:var(--muted); font-weight:600; font-size:.92rem;
}
.teaser-card .tag{ align-self:flex-start; }
.section-foot{ text-align:center; margin-top:48px; }

/* =========================================================
   ABOUT
========================================================= */
.about-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:center;
}
.check-list{
  list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px;
}
.check-list li{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--bg-soft);
  padding:12px 14px;
  border-radius:14px;
  border:2px solid var(--line-2);
  font-weight:700;
  color:#3B4654;
}
.tick{
  display:inline-grid; place-items:center;
  width:22px; height:22px; flex-shrink:0;
  border-radius:50%;
  background:var(--primary); color:#fff;
  font-weight:900; font-size:.8rem;
  box-shadow:0 2px 0 var(--primary-dk);
}

/* =========================================================
   SERVICES
========================================================= */
.services-section{ background:var(--bg-soft); }
.service-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.service-card{
  background:#fff;
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  position:relative;
  box-shadow:0 4px 0 var(--line);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; gap:8px;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 0 var(--line);
}
.service-badge{
  position:absolute; top:22px; right:22px;
  font-family:"JetBrains Mono", monospace;
  font-size:.72rem; font-weight:900;
  color:var(--muted);
  background:var(--bg-soft);
  padding:.3em .6em; border-radius:8px;
  border:2px solid var(--line);
  letter-spacing:.08em;
}
.service-card h3{
  margin:16px 0 6px; font-weight:900; font-size:1.15rem; color:var(--navy);
}
.service-card p{ margin:0 0 14px; color:#55606D; font-weight:600; font-size:.95rem; }
.tag-row{ display:flex; flex-wrap:wrap; gap:6px; }

/* =========================================================
   PROCESS (numbered steps)
========================================================= */
.process-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.process-step{
  background:#fff;
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 22px;
  box-shadow:0 4px 0 var(--line);
  text-align:center;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.process-step:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 0 var(--line), 0 14px 28px rgba(11,36,83,.08);
  border-color:var(--primary-bd);
}
.process-step:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 var(--line);
  transition:transform .04s ease, box-shadow .04s ease;
}
.process-num{
  width:56px; height:56px; margin:0 auto 20px;
  background:var(--primary);
  color:#fff;
  border-radius:50%;
  display:grid; place-items:center;
  font-family:"JetBrains Mono", monospace;
  font-size:1.3rem; font-weight:900;
  border:2px solid var(--primary-dk);
  box-shadow:0 4px 0 var(--primary-dk);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.process-step:hover .process-num{
  transform:translateY(-2px) scale(1.06);
  box-shadow:0 6px 0 var(--primary-dk);
  filter:brightness(1.08);
}
.process-step:active .process-num{
  transform:translateY(4px);
  box-shadow:0 0 0 var(--primary-dk);
  transition:transform .04s ease, box-shadow .04s ease;
}
.process-step:nth-child(2) .process-num{
  background:var(--secondary); border-color:var(--secondary-dk); box-shadow:0 4px 0 var(--secondary-dk);
}
.process-step:nth-child(2):hover .process-num{
  box-shadow:0 6px 0 var(--secondary-dk);
}
.process-step:nth-child(2):active .process-num{
  box-shadow:0 0 0 var(--secondary-dk);
}
.process-step:nth-child(3) .process-num{
  background:var(--navy); border-color:#061538; box-shadow:0 4px 0 #061538;
}
.process-step:nth-child(3):hover .process-num{
  box-shadow:0 6px 0 #061538;
}
.process-step:nth-child(3):active .process-num{
  box-shadow:0 0 0 #061538;
}
@media (prefers-reduced-motion: reduce){
  .process-step,
  .process-step:hover,
  .process-step:active,
  .process-num,
  .process-step:hover .process-num,
  .process-step:active .process-num{
    transform:none;
    transition:box-shadow .15s ease, filter .15s ease;
  }
}
.process-step h3{
  margin:0 0 6px; color:var(--navy); font-weight:900; font-size:1.02rem;
}
.process-step p{
  margin:0; color:var(--muted); font-weight:600; font-size:.9rem;
}

/* =========================================================
   PROJECTS
========================================================= */
.project-card{
  display:grid; grid-template-columns: 1fr 1.1fr; gap:32px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:28px;
  padding:32px;
  box-shadow:0 4px 0 var(--line);
  margin-bottom:48px;
  align-items:center;
}
.project-featured{
  border-color:var(--primary);
  box-shadow:0 5px 0 var(--primary-dk);
}
.project-media{ display:flex; }
.project-top{
  display:flex; gap:10px; align-items:center; margin-bottom:8px;
}
.project-flag{
  display:inline-block;
  background:var(--secondary);
  color:#fff;
  padding:.4em 1em;
  border-radius:999px;
  font-size:.68rem; font-weight:900; letter-spacing:.12em;
  text-transform:uppercase;
  border:2px solid var(--secondary-dk);
  box-shadow:0 3px 0 var(--secondary-dk);
  font-family:"JetBrains Mono", monospace;
}
.project-title{
  margin:4px 0 6px;
  color:var(--navy);
  font-size:clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight:900;
  line-height:1.15;
}
.project-tag{
  color:var(--primary-dk); font-weight:800; font-size:1rem;
  margin:0 0 10px;
}
.project-stats{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;
  margin:16px 0 16px;
  padding:18px;
  background:var(--bg-soft);
  border:2px solid var(--line-2);
  border-radius:16px;
}
.p-stat{ text-align:center; }
.p-stat strong{
  display:block;
  font-size:1.2rem; color:var(--navy); font-weight:900; line-height:1;
}
.p-stat span{
  display:block; margin-top:4px;
  font-size:.7rem; color:var(--muted); font-weight:700;
}
.project-modules{
  display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 18px;
}
.project-cta{ display:flex; flex-wrap:wrap; gap:10px; }

.project-more-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.project-mini{
  background:#fff;
  border:2px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 4px 0 var(--line);
  transition:transform .2s ease, box-shadow .2s ease;
}
.project-mini:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 0 var(--line);
}
.mini-body{ padding:22px; }
.mini-body .tag{ background:var(--secondary-bg); border-color:var(--secondary-bd); color:var(--secondary-dk); }
.mini-body h4{
  margin:10px 0 6px; color:var(--navy); font-weight:900; font-size:1.05rem;
}
.mini-body p{ margin:0; color:var(--muted); font-weight:600; font-size:.92rem; }

/* =========================================================
   SKILLS
========================================================= */
.skills-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.skill-col{
  background:#fff;
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  box-shadow:0 4px 0 var(--line);
}
.skill-col-title{
  margin:0 0 18px; color:var(--navy); font-weight:900;
  font-size:1.05rem;
  padding-bottom:12px;
  border-bottom:2px dashed var(--line);
}
.skill{ margin:14px 0 16px; }
.skill-head{
  display:flex; justify-content:space-between;
  font-size:.85rem; font-weight:800;
  color:#3B4654; margin-bottom:6px;
}
.skill-head span:last-child{
  color:var(--primary-dk);
  font-family:"JetBrains Mono", monospace;
  font-size:.8rem;
}
.bar{
  background:var(--line-2);
  border-radius:999px;
  height:14px;
  overflow:hidden;
  border:2px solid var(--line);
  padding:2px;
}
.bar i{
  display:block;
  height:100%;
  width:var(--w, 0%);
  border-radius:999px;
  background:var(--primary);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
  transition:width 1.1s cubic-bezier(.2,.8,.2,1);
}
.skill-col[data-col="2"] .bar i{ background:var(--secondary); }
.skill-col[data-col="3"] .bar i{ background:var(--navy); }
.skill-col[data-col="2"] .skill-head span:last-child{ color:var(--secondary-dk); }
.skill-col[data-col="3"] .skill-head span:last-child{ color:var(--navy); }

/* =========================================================
   PACKAGES
========================================================= */
.pkg-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  align-items:stretch;
}
.pkg-card{
  background:#fff;
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  box-shadow:0 4px 0 var(--line);
  display:flex; flex-direction:column; gap:12px;
  position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.pkg-card:hover{ transform:translateY(-4px); box-shadow:0 8px 0 var(--line); }
.pkg-featured{
  border-color:var(--secondary);
  box-shadow:0 5px 0 var(--secondary-dk);
}
.pkg-featured:hover{ box-shadow:0 10px 0 var(--secondary-dk); }
.pkg-flag{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--secondary);
  color:#fff;
  padding:.4em 1em;
  border-radius:999px;
  font-size:.7rem; font-weight:900; letter-spacing:.1em;
  text-transform:uppercase;
  border:2px solid var(--secondary-dk);
  box-shadow:0 3px 0 var(--secondary-dk);
  font-family:"JetBrains Mono", monospace;
}
.pkg-title{ margin:6px 0 2px; color:var(--navy); font-size:1.35rem; font-weight:900; }
.pkg-sub{ color:#55606D; font-weight:600; margin:0 0 8px; font-size:.95rem; }
.pkg-list{ list-style:none; padding:0; margin:8px 0 22px; display:grid; gap:8px; }
.pkg-list li{
  font-size:.92rem; font-weight:700; color:#3B4654;
  padding:12px 14px 12px 40px; border-radius:12px;
  background:var(--bg-soft);
  border:2px solid var(--line-2);
  position:relative;
}
.pkg-list li::before{
  content:"✓";
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%;
  background:var(--primary); color:#fff;
  font-size:.72rem; font-weight:900;
  display:grid; place-items:center;
  box-shadow:0 2px 0 var(--primary-dk);
}
.pkg-featured .pkg-list li::before{
  background:var(--secondary); box-shadow:0 2px 0 var(--secondary-dk);
}

/* =========================================================
   EXPERIENCE
========================================================= */
.xp-list{
  list-style:none; padding:0; margin:0;
  display:grid; gap:16px;
  max-width:820px; margin:0 auto;
}
.xp-item{
  display:grid; grid-template-columns:72px 1fr; gap:18px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:20px;
  padding:20px;
  box-shadow:0 4px 0 var(--line);
  align-items:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.xp-item:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--line); }
.xp-row{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:1.02rem;
}
.xp-row strong{ color:var(--navy); }
.xp-row span{
  color:var(--muted); font-weight:700; font-size:.8rem;
  font-family:"JetBrains Mono", monospace;
}
.xp-company{ color:var(--primary-dk); font-weight:800; margin:2px 0 4px; font-size:.92rem; }
.xp-ach{ margin:0; color:#3B4654; font-weight:600; font-size:.94rem; }

/* =========================================================
   CERTIFICATIONS
========================================================= */
.cert-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
.cert-card{
  background:#fff;
  border:2px solid var(--line);
  border-radius:var(--radius);
  padding:24px 20px;
  text-align:center;
  box-shadow:0 4px 0 var(--line);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cert-card:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--line); }
.cert-card h4{ margin:0; font-size:.95rem; color:var(--navy); font-weight:900; }

/* =========================================================
   CONTACT
========================================================= */
.contact-card{
  background:#fff;
  border:2px solid var(--line);
  border-radius:28px;
  box-shadow:0 4px 0 var(--line);
  padding:48px;
  display:grid; grid-template-columns: 1fr 1fr; gap:48px;
  max-width:1000px; margin:0 auto;
}
.contact-copy .eyebrow{ color:var(--secondary-dk); background:var(--secondary-bg); }
.contact-list{ display:grid; gap:10px; margin-top:18px; }
.contact-row{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:var(--bg-soft);
  border:2px solid var(--line-2);
  border-radius:14px;
  font-weight:800;
  color:var(--navy);
  transition:background .15s ease;
}
a.contact-row:hover{ background:var(--primary-bg); border-color:var(--primary-bd); }
.contact-ic{
  width:10px; height:10px; border-radius:3px;
  background:var(--primary);
  box-shadow:0 2px 0 var(--primary-dk);
  flex-shrink:0;
}
.contact-form{ display:grid; gap:14px; }
.field{ display:grid; gap:6px; }
.field span{
  font-size:.72rem; font-weight:900; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  font-family:"JetBrains Mono", monospace;
}
.field input, .field textarea, .field select{
  width:100%;
  font:inherit;
  font-weight:700;
  color:var(--ink);
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  border:2px solid var(--line);
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
  resize:vertical;
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230B2453'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px;
  padding-right:42px;
  cursor:pointer;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(var(--primary-rgb), .22);
}
.form-note{
  margin:0;
  font-size:.85rem; color:var(--primary-dk); font-weight:800;
  min-height:1.2em;
}

/* =========================================================
   FAQ
========================================================= */
.faq-list{
  max-width:780px; margin:0 auto;
  display:grid; gap:14px;
}
.faq-item{
  background:#fff;
  border:2px solid var(--line);
  border-radius:18px;
  padding:22px 24px;
  box-shadow:0 4px 0 var(--line);
}
.faq-item summary{
  font-weight:900; color:var(--navy);
  font-size:1.02rem;
  cursor:pointer;
  list-style:none;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  width:28px; height:28px; border-radius:8px;
  background:var(--primary-bg); color:var(--primary-dk);
  display:grid; place-items:center;
  font-size:1.2rem; font-weight:900;
  transition:transform .2s ease;
  flex-shrink:0;
}
.faq-item[open] summary::after{ content:"-"; }
.faq-item p{
  margin:14px 0 0; color:#505860; font-weight:600;
}

/* =========================================================
   ACCENT HELPERS
========================================================= */
.accent-orange{ color:var(--primary); }
.accent-blue{ color:var(--secondary); }

/* =========================================================
   EXPLORE-MORE (hero secondary link with round down-arrow)
========================================================= */
.explore-more{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:24px;
  color:var(--navy);
  font-weight:800;
  font-family:"Fredoka","Nunito",sans-serif;
  font-size:.95rem;
}
.explore-ball{
  width:34px; height:34px; border-radius:50%;
  background:#fff;
  border:2px solid var(--line);
  box-shadow:0 3px 0 var(--line);
  display:grid; place-items:center;
  color:var(--primary);
  font-weight:900; font-size:1.1rem;
  transition:transform .2s ease;
}
.explore-more:hover .explore-ball{ transform:translateY(2px); }

/* =========================================================
   BRANDBUZZ-STYLE SERVICE CARD GRID (4 cards, colored icon corners)
========================================================= */
.bb-services-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;
}
/* Centered variant : partial rows center themselves (3, 5, 6, 7-card sections).
   Use flexbox so the last row's leftover cards are visually balanced. */
.bb-services-grid.is-centered{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
}
.bb-services-grid.is-centered > .bb-service-card{
  flex:0 1 280px;
  max-width:320px;
}
@media (max-width: 560px){
  .bb-services-grid.is-centered > .bb-service-card{ flex:1 1 100%; max-width:none; }
}
.bb-service-card{
  background:#fff;
  border:2px solid var(--line);
  border-radius:20px;
  padding:26px 22px;
  box-shadow:0 4px 0 var(--line);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex; flex-direction:column; gap:10px;
}
.bb-service-card:hover{ transform:translateY(-4px); box-shadow:0 8px 0 var(--line); }
.bb-service-icon{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  border:2px solid;
}
.bb-service-icon .img-slot{
  width:32px; height:32px; border-radius:8px;
  padding:0;
}
.bb-service-icon .img-slot::after{ display:none; }
.bb-service-icon img{
  width:40px;
  height:40px;
  object-fit:contain;
  display:block;
  background:transparent;
}
.bb-icon-yellow{ background:#FFF5CC; border-color:#FFE791; }
.bb-icon-green { background:#E5F8D2; border-color:#B5E779; }
.bb-icon-purple{ background:#F4E8FB; border-color:#D4B3F0; }
.bb-icon-orange{ background:var(--primary-bg); border-color:var(--primary-bd); }
.bb-service-card h3{
  margin:8px 0 4px;
  color:var(--navy);
  font-size:1.08rem;
  font-weight:700;
}
.bb-service-card p{
  margin:0 0 10px;
  color:var(--muted);
  font-size:.88rem;
  font-weight:600;
  line-height:1.5;
}
.bb-readmore{
  color:var(--secondary-dk);
  font-weight:900;
  font-size:.72rem;
  font-family:"JetBrains Mono", monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  margin-top:auto;
}
.bb-readmore:hover{ color:var(--primary-dk); }

/* =========================================================
   SIMPLE SOLUTIONS : numbered-steps block
========================================================= */
.solutions-grid{
  display:grid; grid-template-columns: 1fr 1.1fr; gap:64px;
  align-items:center;
  padding:40px 0;
}
.solutions-head h2{ margin:0 0 10px; }
.solutions-head p{
  color:var(--muted); font-weight:600;
  margin:0 0 24px;
  max-width:46ch;
  font-size:1rem;
}
.solutions-steps{
  display:grid; gap:20px; margin:0 0 28px;
}
.solution-step{
  display:grid;
  grid-template-columns: 40px 1fr;
  gap:16px;
  align-items:flex-start;
}
.solution-step-num{
  width:36px; height:36px; border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:grid; place-items:center;
  font-weight:700;
  font-family:"Fredoka","Nunito",sans-serif;
  font-size:.95rem;
  border:2px solid var(--primary-dk);
  box-shadow:0 3px 0 var(--primary-dk);
}
.solution-step h4{
  margin:4px 0 2px;
  color:var(--navy);
  font-size:1rem;
  font-weight:700;
}
.solution-step p{
  margin:0;
  color:var(--muted);
  font-weight:600;
  font-size:.88rem;
  line-height:1.5;
}
.solutions-cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* =========================================================
   TESTIMONIALS (3 cards with avatar + stars)
========================================================= */
.testimonial-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.testimonial-card{
  background:#fff;
  border:2px solid var(--line);
  border-radius:18px;
  padding:26px 22px;
  box-shadow:0 4px 0 var(--line);
  transition:transform .2s ease;
}
.testimonial-card:hover{ transform:translateY(-3px); }
.testimonial-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px;
}
.testimonial-avatar{
  width:44px; height:44px; border-radius:50%;
  background:
    repeating-linear-gradient(45deg,
      #FAFBFC 0 6px, #F3F5F7 6px 12px);
  border:2px dashed var(--slot-br);
  color:#93A0AD;
  display:grid; place-items:center;
  font-size:.52rem; font-weight:700;
  font-family:"JetBrains Mono", monospace;
  flex-shrink:0;
  text-align:center;
  line-height:1;
}
.testimonial-name{
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:700;
  color:var(--navy);
  font-size:.98rem;
  line-height:1.2;
}
.testimonial-role{
  display:block; margin-top:2px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
}
.testimonial-body{
  color:#505860;
  font-size:.9rem;
  font-weight:600;
  line-height:1.55;
  margin:0 0 14px;
}
.testimonial-stars{
  color:var(--primary);
  letter-spacing:3px;
  font-size:1rem;
}

/* =========================================================
   CONTACT V2 : reference-style (form + navy info card)
========================================================= */
.contact-v2{
  padding:90px 0 100px;
  background:#fff;
  position:relative;
}
.contact-v2 .section-head{
  text-align:center;
  max-width:820px;
  margin:0 auto 56px;
  position:relative;
}
.contact-v2 .eyebrow-dashed{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--primary);
  font-family:"JetBrains Mono", monospace;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.contact-v2 .eyebrow-dashed::before{
  content:''; width:22px; height:3px;
  background:var(--primary); border-radius:2px;
}
.contact-v2 .section-head h2{
  margin:.5em 0 0;
  font-size:clamp(2rem, 4vw, 3rem);
  color:var(--navy);
  line-height:1.1;
}
.contact-v2 .section-head h2 .hi-orange{
  display:block; color:var(--primary);
}
.contact-v2 .head-img{
  position:absolute;
  top:10px; right:0;
  width:150px;
  height:auto;
  border:4px solid var(--primary);
  border-radius:16px;
  background:#FFF5CC;
  box-shadow:0 6px 0 var(--primary-dk), 0 10px 24px rgba(245,158,11,.18);
  object-fit:cover;
  display:block;
}
.contact-v2 .contact-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:28px;
  align-items:stretch;
}
.c-form{
  background:#fff;
  border:2px solid var(--line);
  border-radius:20px;
  padding:34px;
  box-shadow:0 6px 0 var(--line);
  display:flex; flex-direction:column; gap:16px;
}
.c-form .botcheck{
  position:absolute;
  left:-9999px;
  top:-9999px;
  opacity:0;
  height:0; width:0;
}
.c-form .field-row{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.c-form .field{
  display:flex; flex-direction:column; gap:6px;
}
.c-form .field > span{
  font-weight:800; color:var(--navy);
  font-size:.92rem;
  font-family:"Fredoka","Nunito",sans-serif;
}
.c-form .field > span .req{ color:var(--primary); }
.c-form input[type=text],
.c-form input[type=email],
.c-form input[type=tel],
.c-form input[type=search],
.c-form textarea{
  width:100%;
  padding:13px 18px;
  border:1.5px solid #D9DEE6;
  border-radius:999px;
  font-family:"Nunito","Fredoka",sans-serif;
  font-size:.95rem;
  color:var(--navy);
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.c-form textarea{
  border-radius:18px;
  resize:vertical;
  min-height:130px;
  line-height:1.5;
}
.c-form input:focus,
.c-form textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(245,158,11,.15);
}
.c-form .btn-send{
  align-self:flex-start;
  padding:14px 28px;
}
.c-form .form-note{
  margin:4px 0 0;
  font-size:.85rem;
  color:var(--muted);
}

.contact-info{
  background:var(--navy);
  color:#fff;
  border-radius:20px;
  padding:38px 32px;
  position:relative;
  overflow:hidden;
  display:flex; flex-direction:column; gap:22px;
}
.contact-info::before,
.contact-info::after{
  content:''; position:absolute;
  width:160px; height:80px;
  background:repeating-linear-gradient(135deg,
    rgba(255,255,255,.16) 0 2px,
    transparent 2px 8px);
  pointer-events:none;
}
.contact-info::before{ top:0; right:0; }
.contact-info::after{ bottom:0; left:0; transform:rotate(180deg); }
.contact-info .info-block{
  position:relative; z-index:1;
}
.contact-info h5{
  color:#fff;
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:700;
  font-size:1.1rem;
  margin:0 0 10px;
}
.contact-info .info-block p{
  margin:3px 0;
  color:rgba(255,255,255,.82);
  font-size:.94rem;
  line-height:1.55;
}
.contact-info .info-block a{
  color:rgba(255,255,255,.82);
  text-decoration:none;
  transition:color .15s ease;
}
.contact-info .info-block a:hover{ color:#fff; }
.info-socials{
  display:flex; gap:10px;
  margin-top:6px;
  position:relative; z-index:1;
}
.info-socials a{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--primary);
  display:grid; place-items:center;
  color:#fff;
  text-decoration:none;
  transition:transform .15s ease, filter .15s ease;
}
.info-socials a:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
.info-socials svg{
  width:15px; height:15px; fill:#fff; display:block;
}

@media (max-width: 900px){
  .contact-v2 .contact-grid{ grid-template-columns:1fr; }
  .contact-v2 .head-img{ position:static; margin:18px auto 0; display:block; width:120px; }
}
@media (max-width: 520px){
  .c-form .field-row{ grid-template-columns:1fr; gap:16px; }
  .c-form{ padding:26px 22px; }
  .contact-info{ padding:30px 24px; }
}

/* =========================================================
   FAQ V2 : reference-style (accordion list + image slot)
========================================================= */
.faq-v2{
  padding:90px 0 100px;
  background:var(--bg-soft);
}
.faq-v2 .section-head{
  text-align:center; max-width:760px; margin:0 auto 48px;
}
.faq-v2 .section-head h2{
  margin:0; color:var(--navy);
  font-size:clamp(1.8rem, 3.6vw, 2.6rem);
  line-height:1.15;
}
.faq-v2 .hi-underline{
  text-decoration:underline;
  text-decoration-color:var(--secondary);
  text-decoration-thickness:3px;
  text-underline-offset:6px;
}
.faq-v2 .section-head p{
  color:var(--muted);
  margin:16px auto 0;
  max-width:620px;
  font-size:1rem;
  line-height:1.6;
}
.faq-v2 .faq-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:48px;
  align-items:center;
}
.faq-v2 .faq-list{
  display:flex; flex-direction:column; gap:14px;
}
.faq-v2 .img-slot-support{
  max-width:480px;
  width:100%;
  height:auto;
  margin:0 auto;
  border-radius:24px;
  border:6px solid var(--primary);
  background:#FFF5CC;
  box-shadow:0 10px 0 var(--primary-dk), 0 18px 40px rgba(245,158,11,.18);
  object-fit:contain;
  display:block;
}
@media (max-width: 900px){
  .faq-v2 .faq-grid{ grid-template-columns:1fr; gap:32px; }
  .faq-v2 .img-slot-support{ max-width:360px; }
}

/* =========================================================
   NEWSLETTER : Duolingo-style chunky card, Web3Forms-wired
========================================================= */
.newsletter{
  padding:48px 0 32px;
  background:#fff;
}
.newsletter-card{
  max-width:680px;
  margin:0 auto;
  text-align:center;
  background:var(--primary-bg);
  border:2.5px solid var(--primary-bd);
  border-radius:24px;
  padding:48px 40px;
  box-shadow:0 8px 0 var(--primary-bd);
  position:relative;
  overflow:hidden;
}
.newsletter-card::before{
  content:"✨";
  position:absolute;
  top:18px; right:22px;
  font-size:1.6rem;
  opacity:.8;
}
.newsletter .eyebrow{
  color:var(--primary-dk);
}
.newsletter h2{
  color:var(--navy);
  margin:.4em 0 .3em;
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:700;
  font-size:clamp(1.6rem, 3.2vw, 2.2rem);
  line-height:1.1;
}
.newsletter > .container > .newsletter-card > p,
.newsletter-card > p{
  color:#4b5563;
  max-width:48ch;
  margin:0 auto 28px;
  font-weight:600;
}
.newsletter-form{
  display:flex;
  gap:12px;
  max-width:520px;
  margin:0 auto;
  align-items:stretch;
}
.newsletter-form input[type=email]{
  flex:1;
  padding:14px 20px;
  border:2px solid #fff;
  border-radius:999px;
  background:#fff;
  font-size:1rem;
  font-family:"Nunito","Fredoka",sans-serif;
  font-weight:600;
  color:var(--navy);
  min-width:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.newsletter-form input[type=email]::placeholder{
  color:#94a3b8;
  font-weight:500;
}
.newsletter-form input[type=email]:focus{
  outline:none;
  border-color:var(--primary-dk);
  box-shadow:0 0 0 3px rgba(245,158,11,.22);
}
.newsletter-form .btn-subscribe{
  flex-shrink:0;
  padding:14px 26px;
}
.newsletter-form .form-note{
  flex-basis:100%;
  margin-top:12px;
  text-align:center;
}
.newsletter-success{
  max-width:480px;
  margin:0 auto;
}
.newsletter-success .success-icon{
  width:72px; height:72px;
  border-radius:50%;
  background:#E8F7EC;
  color:#1DA854;
  display:grid; place-items:center;
  margin:0 auto 18px;
  font-size:2.3rem;
  font-weight:800;
  border:3px solid #C7E9D4;
  position:relative;
  animation:sc-pop 0.65s cubic-bezier(.2,1.4,.4,1) 0.05s both,
            sc-breathe 2.8s ease-in-out 1s infinite;
}
.newsletter-success .success-icon::before,
.newsletter-success .success-icon::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid rgba(29,168,84,.5);
  opacity:0;
  animation:sc-ripple 1.6s ease-out 0.6s 2;
  pointer-events:none;
}
.newsletter-success .success-icon::after{
  animation-delay:1s;
}
@keyframes sc-pop{
  0%   { transform:scale(0) rotate(-12deg); opacity:0; }
  60%  { transform:scale(1.14) rotate(4deg); opacity:1; }
  100% { transform:scale(1) rotate(0); opacity:1; }
}
@keyframes sc-breathe{
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(1.06); }
}
@keyframes sc-ripple{
  0%   { transform:scale(.9); opacity:.75; }
  100% { transform:scale(1.9); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .newsletter-success .success-icon{ animation:none; }
  .newsletter-success .success-icon::before,
  .newsletter-success .success-icon::after{ animation:none; }
}
.newsletter-success h3{
  margin:0 0 8px;
  color:var(--navy);
  font-family:"Fredoka","Nunito",sans-serif;
  font-size:1.4rem;
}
.newsletter-success p{
  color:#4b5563;
  margin:0;
}
.newsletter-form .botcheck{
  position:absolute;
  left:-9999px;
  top:-9999px;
  opacity:0;
  height:0; width:0;
}

/* Screen-reader-only utility */
.visually-hidden{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Ensure [hidden] beats flex/grid display rules site-wide */
[hidden]{ display:none !important; }

@media (max-width: 560px){
  .newsletter{ padding:60px 0 20px; }
  .newsletter-card{ padding:34px 24px; }
  .newsletter-form{ flex-direction:column; }
  .newsletter-form .btn-subscribe{ width:100%; }
}

/* =========================================================
   READY TO GET STARTED : full orange band CTA
========================================================= */
.ready-section{
  padding:40px 0 40px;
  background:linear-gradient(
    to bottom,
    transparent 0,
    #fff 45%,
    #fff 50%,
    #FDECD2 50%,
    #FDECD2 100%
  );
  position:relative;
}
.ready-band{
  max-width:1100px; margin:0 auto;
  background:var(--primary);
  border:2px solid var(--primary-dk);
  box-shadow:0 6px 0 var(--primary-dk);
  border-radius:18px;
  padding:28px 36px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  position:relative;
  z-index:2;
}
.ready-band h3{
  margin:0;
  color:#fff;
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:700;
  font-size:clamp(1.3rem, 2.4vw, 1.75rem);
}
.ready-band .btn-ready{
  background:transparent;
  color:#fff;
  border:2px solid #fff;
  box-shadow:0 5px 0 rgba(0,0,0,.2);
}
.ready-band .btn-ready:hover{
  background:#fff; color:var(--primary-dk);
}

@media (max-width: 600px){
  .ready-band{
    flex-direction:column; text-align:center; padding:28px 24px;
  }
}

/* =========================================================
   RESPONSIVE : BrandBuzz-style blocks
========================================================= */
@media (max-width: 1024px){
  .bb-services-grid{ grid-template-columns:repeat(2, 1fr); }
  .testimonial-grid{ grid-template-columns:repeat(2, 1fr); }
  .solutions-grid{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width: 520px){
  .bb-services-grid,
  .testimonial-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   STACK STRIP (tech logos / capabilities)
========================================================= */
.stack-strip{
  background:var(--bg-soft);
  border:2px solid var(--line-2);
  border-radius:20px;
  padding:28px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  max-width:960px; margin:0 auto;
}
.stack-strip .stack-tag{
  background:#fff;
  border:2px solid var(--line);
  border-radius:12px;
  padding:10px 14px;
  font-family:"JetBrains Mono", monospace;
  font-weight:800;
  font-size:.82rem;
  color:var(--navy);
  box-shadow:0 2px 0 var(--line);
}

/* =========================================================
   CAPABILITY CARDS (small, dense capability grid)
========================================================= */
.cap-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.cap-card{
  background:#fff;
  border:2px solid var(--line);
  border-radius:16px;
  padding:22px;
  box-shadow:0 4px 0 var(--line);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cap-card:hover{ transform:translateY(-3px); box-shadow:0 8px 0 var(--line); }
.cap-card h4{
  margin:12px 0 6px;
  color:var(--navy); font-weight:900; font-size:1rem;
}
.cap-card p{
  margin:0; color:var(--muted); font-weight:600; font-size:.88rem;
}

@media (max-width: 960px){ .cap-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 520px){ .cap-grid{ grid-template-columns:1fr; } }

/* =========================================================
   CTA BANNER : full-bleed dark navy (Super Duolingo pattern)
========================================================= */
.cta-banner{
  padding:64px 0;
  background:var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-banner::before{
  /* soft brand gradient glow */
  content:"";
  position:absolute; inset:auto -10% -30% -10%;
  height:60%;
  background: radial-gradient(ellipse at center, rgba(245,158,11,.15), transparent 60%);
  pointer-events:none;
}
.cta-banner-inner{
  position:relative; z-index:1;
  max-width:1100px; margin:0 auto;
  width:min(100%, 92%);
  display:grid; grid-template-columns:1fr 1fr;
  gap:64px; align-items:center;
  background:transparent; border:0; box-shadow:none; padding:0;
}
.cta-visual{ display:flex; justify-content:center; }
.cta-text{ text-align:left; }
.cta-banner .eyebrow{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.14);
  margin-bottom:14px;
}
.cta-banner h2{
  color:#fff;
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(2rem, 4.4vw, 3.2rem);
  line-height:1.05;
  letter-spacing:-.005em;
  margin:0 0 16px;
}
.cta-banner h2 .gradient-text{
  background:linear-gradient(90deg, var(--primary) 0%, #FFD779 50%, var(--secondary) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.cta-banner p{
  color:rgba(255,255,255,.82);
  font-weight:600;
  font-size:1.05rem;
  margin:0 0 30px;
  max-width:46ch;
}
.cta-banner .cta-row{ margin:0; flex-wrap:wrap; gap:12px; }
/* White "on-navy" button (primary on dark bg) */
.cta-banner .btn-primary{
  --b:#fff;
  --b-dk:rgba(0,0,0,.35);
  --b-bd:#fff;
  --b-txt:var(--navy);
}
.cta-banner .btn-primary:hover{
  --b-bd:var(--primary);
  color:var(--primary-dk);
}
.cta-banner .btn-ghost{
  --b:transparent;
  --b-dk:rgba(255,255,255,.2);
  --b-bd:rgba(255,255,255,.35);
  --b-txt:#fff;
}
.cta-banner .btn-ghost:hover{ --b-bd:#fff; color:#fff; }

.img-slot-cta{ aspect-ratio:1/1; width:100%; max-width:480px; border-radius:24px; }
/* slot visible on dark bg */
.cta-banner .img-slot{
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,.04) 0 10px,
      rgba(255,255,255,.08) 10px 20px);
  border-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.6);
}
.cta-banner .img-slot::after{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.75);
}

/* =========================================================
   PRE-FOOTER : white break strip between navy CTA and orange footer
========================================================= */
.pre-footer{
  background:#fff;
  padding:48px 0 56px;
  border-top:1px solid transparent; /* guard against body bg bleeding */
}
.pre-footer-inner{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:64px;
  align-items:center;
  max-width:1040px; margin:0 auto;
  width:min(100%, 92%);
}
.pre-footer-text .eyebrow{ margin-bottom:14px; }
.pre-footer-text h2{
  margin:.1em 0 0;
  font-size:clamp(1.7rem, 3vw, 2.2rem);
}
.contact-mini-grid{
  display:grid; gap:12px;
}
.contact-mini{
  display:flex; flex-direction:column; gap:4px;
  padding:20px 24px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:16px;
  box-shadow:0 5px 0 0 var(--line);
  text-decoration:none;
  cursor:pointer;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
a.contact-mini{ cursor:pointer; }
a.contact-mini:hover{
  border-color:var(--secondary);
  box-shadow:0 5px 0 0 var(--secondary);
  transform:translateY(-2px);
  background:#FFF8EE;
}
a.contact-mini:active{
  transform:translateY(4px);
  box-shadow:0 0 0 0 var(--secondary);
}

/* Inline pill button used wherever a single "Book a call" link appears
   (footer Resources column, 404 page, etc.) — chunky 3D animation
   matching the main .btn style, but compact and inline-friendly. */
.book-btn{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  padding:8px 16px !important;
  margin:6px 0 !important;
  background:var(--secondary, #FFC800);
  color:var(--navy, #142b4c) !important;
  font-weight:800;
  font-family:"Fredoka","Nunito",sans-serif;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.82rem !important;
  border:2px solid var(--navy, #142b4c);
  border-radius:12px;
  text-decoration:none !important;
  box-shadow:0 4px 0 0 var(--navy, #142b4c);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.book-btn:hover{
  background:#FFD43A;
  transform:translateY(-2px);
  box-shadow:0 6px 0 0 var(--navy, #142b4c);
  color:var(--navy, #142b4c) !important;
}
.book-btn:active{
  transform:translateY(3px);
  box-shadow:0 1px 0 0 var(--navy, #142b4c);
}
.mini-label{
  font-size:.72rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
  font-family:"JetBrains Mono", monospace;
}
.mini-value{
  font-size:1.08rem; font-weight:600; color:var(--navy);
  font-family:"Fredoka","Nunito",sans-serif;
}

@media (max-width: 820px){
  .pre-footer{ padding:40px 0 48px; }
  .pre-footer-inner{ grid-template-columns:1fr; gap:32px; text-align:center; }
}

/* =========================================================
   FOOTER : cream card + colored socials + orange hill + copyright
========================================================= */
.footer{
  background:#FDECD2;
  color:var(--navy);
  padding:0;
  position:relative;
  overflow:hidden;
}
.footer-grid{
  display:grid; grid-template-columns:1fr 3fr; gap:40px;
  align-items:start;
  padding:48px 0 80px;
}
.footer .brand{ color:var(--navy); text-decoration:none; }
.footer .brand-word{ color:var(--navy); }
.footer .brand-word-alt{ color:var(--primary); }
.footer-socials{
  display:flex; gap:12px;
  margin-top:20px;
}
.footer-socials .social{
  width:38px; height:38px;
  border-radius:50%;
  display:grid; place-items:center;
  color:#fff;
  text-decoration:none;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow:0 3px 0 rgba(0,0,0,.12);
}
.footer-socials .social:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 5px 0 rgba(0,0,0,.15);
}
.footer-socials .social svg{ width:18px; height:18px; fill:#fff; display:block; }
.footer-socials .social-fb{ background:#1877F2; }
.footer-socials .social-ig{
  background:
    radial-gradient(circle at 30% 107%,
      #FDCB56 0%, #F58529 20%, #DD2A7B 45%, #8134AF 70%, #515BD4 100%);
}
.footer-socials .social-x{ background:#000; }
.footer-socials .social-yt{ background:#FF0000; }
.footer-socials .social-tt{ background:#000; }

.footer-cols{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:28px;
}
.footer-cols h5{
  margin:0 0 14px;
  font-size:1rem;
  font-weight:800;
  color:var(--navy);
  font-family:"Fredoka","Nunito",sans-serif;
  letter-spacing:0;
  text-transform:none;
}
.footer-cols a, .footer-cols span{
  display:block;
  padding:5px 0;
  color:#3f4756;
  text-decoration:none;
  font-weight:500;
  font-size:.95rem;
  font-family:"Nunito","Fredoka",sans-serif;
  transition:color .15s ease;
}
.footer-cols a:hover{ color:var(--primary); }
.footer-cols .muted{ color:#6b7280; }

/* Orange hill + copyright */
.footer-orange{
  position:relative;
  height:170px;
  margin-top:0;
}
.footer-wave{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  display:block;
}
.footer-wave path{ fill:var(--primary); }
.footer-copy{
  position:absolute;
  left:0; right:0; bottom:22px;
  text-align:center;
  color:rgba(255,255,255,.94);
  font-family:"JetBrains Mono", monospace;
  font-size:.78rem;
  letter-spacing:.06em;
  z-index:2;
}
.footer-sparkle{
  position:absolute;
  right:28px; bottom:26px;
  width:18px; height:18px;
  fill:rgba(255,255,255,.6);
  z-index:2;
}

@media (max-width: 900px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:36px;
    padding:40px 0 72px;
  }
  .footer-orange{ height:130px; }
}
@media (max-width: 560px){
  .footer-cols{ grid-template-columns:1fr 1fr; gap:22px; }
  /* Deep fix : on mobile, kill the SVG wave (which leaves empty corners where
     the curve rises) and use a solid orange bar with a subtle curved top.
     The copy becomes a normal flow item with padding, so it can never bleed
     outside the orange area regardless of line-wrap. */
  .footer-orange{
    height:auto;
    min-height:96px;
    background:var(--primary);
    padding:26px 20px 18px;
    border-top-left-radius:50% 22px;
    border-top-right-radius:50% 22px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
  }
  .footer-wave{ display:none; }
  .footer-copy{
    position:static;
    font-size:.7rem;
    letter-spacing:.04em;
    line-height:1.6;
    text-align:center;
    padding:0 4px;
  }
  .footer-sparkle{
    right:14px;
    bottom:12px;
    width:12px;
    height:12px;
  }
}
@media (max-width: 380px){
  .footer-orange{ padding:24px 14px 16px; }
  .footer-copy{ font-size:.66rem; letter-spacing:.02em; }
}

/* =========================================================
   CHAT WIDGET : fixed bottom-right, collapsible, suggestions
========================================================= */
.chat-widget{
  position:fixed;
  bottom:20px; right:20px;
  z-index:90;
  font-family:"Nunito", sans-serif;
}
.chat-toggle{
  width:110px; height:110px;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  position:relative;
  transition:transform .18s ease, filter .18s ease;
}
.chat-toggle:hover{
  transform:translateY(-4px);
  filter:drop-shadow(0 10px 14px rgba(11,36,83,.28));
}
.chat-toggle:active{ transform:translateY(1px); }
.chat-toggle-clip{
  position:absolute;
  inset:0;
  display:block;
}
.chat-toggle-img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  filter:drop-shadow(0 6px 10px rgba(11,36,83,.22));
  pointer-events:none;
}
.chat-toggle-svg{
  width:30px; height:30px;
  fill:currentColor;
}
.chat-badge{
  position:absolute;
  top:18px; right:18px;
  z-index:2;
  background:var(--secondary);
  color:#fff;
  font-size:.72rem; font-weight:900;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:999px;
  display:grid; place-items:center;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(11,36,83,.3);
  font-family:"Fredoka","Nunito",sans-serif;
  animation:badgePulse 2.2s ease-in-out infinite;
}

/* Dismiss (close) button on the mascot : hides the whole widget for session */
.chat-dismiss{
  position:absolute;
  top:10px; left:0;
  z-index:3;
  width:26px; height:26px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--navy);
  color:var(--navy);
  font-size:18px;
  font-weight:700;
  line-height:1;
  font-family:"Fredoka","Nunito",sans-serif;
  display:grid; place-items:center;
  cursor:pointer;
  padding:0;
  box-shadow:0 2px 6px rgba(11,36,83,.25);
  transition:transform .12s ease, background .15s ease, color .15s ease;
}
.chat-dismiss:hover{
  background:var(--navy);
  color:#fff;
  transform:scale(1.08);
}
.chat-dismiss:active{ transform:scale(.96); }
.chat-dismiss:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
.chat-widget.is-open .chat-dismiss{ display:none; }
.chat-badge.is-hidden{ display:none; }
.chat-widget.is-open .chat-badge{ display:none; }
@keyframes badgePulse{
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(1.12); }
}
@media (prefers-reduced-motion: reduce){
  .chat-badge{ animation:none; }
}

/* =========================================================
   CHAT PEEK : popup message preview beside the robot
========================================================= */
.chat-peek{
  position:fixed;
  bottom:150px;
  right:24px;
  max-width:300px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  box-shadow:0 10px 30px rgba(11,36,83,.18), 0 4px 0 var(--line);
  font-family:"Nunito", sans-serif;
  cursor:pointer;
  z-index:89;
  opacity:0;
  transform:translateY(12px) scale(.92);
  pointer-events:none;
  transition:opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.chat-peek.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.chat-peek::after{
  content:"";
  position:absolute;
  bottom:-9px;
  right:36px;
  width:14px; height:14px;
  background:#fff;
  border-right:2px solid var(--line);
  border-bottom:2px solid var(--line);
  transform:rotate(45deg);
}
.chat-peek-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}
.chat-peek-name{
  font-family:"Fredoka", "Nunito", sans-serif;
  font-weight:700;
  font-size:.82rem;
  color:var(--navy);
}
.chat-peek-dot{
  display:inline-block;
  width:7px; height:7px;
  border-radius:50%;
  background:#58CC02;
  margin-left:4px;
}
.chat-peek-close{
  margin-left:auto;
  background:transparent;
  border:0;
  color:var(--muted);
  cursor:pointer;
  padding:0 2px;
  font-size:18px;
  line-height:1;
  font-weight:700;
}
.chat-peek-close:hover{ color:var(--ink); }
.chat-peek-text{
  margin:0;
  color:#505860;
  font-weight:600;
  font-size:.85rem;
  line-height:1.4;
}
.chat-widget.is-open ~ .chat-peek,
.chat-peek.is-dismissed{
  opacity:0 !important;
  transform:translateY(12px) scale(.92) !important;
  pointer-events:none !important;
}
@media (max-width:520px){
  .chat-peek{ bottom:120px; right:14px; max-width:calc(100vw - 86px); }
  .chat-peek::after{ right:26px; }
}
@media (prefers-reduced-motion: reduce){
  .chat-peek{ transition:opacity .15s linear; }
}
.chat-widget.is-open .chat-badge{ display:none; }

.chat-panel{
  position:fixed;
  bottom:140px;
  right:24px;
  width:340px;
  max-width:calc(100vw - 48px);
  max-height:calc(100vh - 170px);
  display:flex;
  flex-direction:column;
  background:#fff;
  border:2px solid var(--line);
  border-radius:20px;
  box-shadow:0 14px 44px rgba(11,36,83,.18), 0 4px 0 var(--line);
  overflow:hidden;
  opacity:0;
  transform:translateY(10px) scale(.96);
  pointer-events:none;
  transition:opacity .22s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.chat-panel .chat-body{ flex:1 1 auto; min-height:0; }
.chat-panel .chat-input-row{ flex:0 0 auto; }
.chat-panel .chat-header{ flex:0 0 auto; }
.chat-widget.is-open .chat-panel{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.chat-header{
  background:var(--navy);
  color:#fff;
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
}
.chat-header-info{
  display:flex; align-items:center; gap:10px;
}
.chat-avatar{
  width:38px; height:38px;
  border-radius:50%;
  background:var(--primary);
  border:2px solid var(--primary-dk);
  display:grid; place-items:center;
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:700;
  font-size:.95rem;
  color:#fff;
  flex-shrink:0;
}
.chat-header-text strong{
  display:block;
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:700;
  font-size:.95rem;
  color:#fff;
  line-height:1.15;
}
.chat-status{
  display:block;
  font-size:.72rem;
  color:rgba(255,255,255,.65);
  font-weight:700;
  margin-top:2px;
}
.chat-status::before{
  content:"";
  display:inline-block;
  width:8px; height:8px; border-radius:50%;
  background:#58CC02;
  margin-right:6px;
  box-shadow:0 0 0 2px rgba(88,204,2,.25);
  vertical-align:middle;
}
.chat-close{
  background:rgba(255,255,255,.08);
  border:0;
  width:30px; height:30px;
  border-radius:8px;
  color:rgba(255,255,255,.75);
  cursor:pointer;
  font-size:1rem; font-weight:700;
  display:grid; place-items:center;
  transition:background .15s ease, color .15s ease;
}
.chat-close:hover{ background:rgba(255,255,255,.16); color:#fff; }

.chat-body{
  padding:16px;
  max-height:420px;
  overflow-y:auto;
}
.chat-msg{
  background:var(--bg-soft);
  border:2px solid var(--line-2);
  border-radius:14px;
  padding:12px 14px;
  font-size:.9rem;
  color:var(--ink);
  font-weight:600;
  margin-bottom:14px;
  line-height:1.5;
}
.chat-msg .wave{ margin-right:4px; }
.chat-suggestions{
  display:grid; gap:8px;
}
.chat-suggest{
  background:#fff;
  border:2px solid var(--secondary-bd);
  color:var(--secondary-dk);
  padding:10px 14px;
  border-radius:999px;
  text-align:center;
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:600;
  font-size:.86rem;
  cursor:pointer;
  transition:all .15s ease;
}
.chat-suggest:hover{
  background:var(--secondary);
  color:#fff;
  border-color:var(--secondary);
}
.chat-suggest.is-primary{
  background:var(--secondary);
  color:#fff;
  border-color:var(--secondary-dk);
}
.chat-suggest.is-primary:hover{
  background:var(--secondary-dk);
}

/* Custom message input row */
.chat-input-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 14px 16px;
  border-top:2px solid var(--line-2);
}
.chat-input{
  flex:1;
  min-width:0;
  border:2px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font-family:"Nunito", sans-serif;
  font-size:.88rem;
  font-weight:600;
  color:var(--ink);
  background:#fff;
  outline:none;
  transition:border-color .15s ease;
}
.chat-input::placeholder{ color:var(--muted); font-weight:600; }
.chat-input:focus{ border-color:var(--secondary); }
.chat-send{
  width:42px; height:42px; flex-shrink:0;
  border-radius:12px;
  background:#25D366;
  border:2px solid #1DA854;
  color:#fff;
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow:0 3px 0 #1DA854;
  transition:transform .06s ease, box-shadow .06s ease, filter .15s ease;
}
.chat-send:hover{ filter:brightness(1.07); }
.chat-send:active{ transform:translateY(2px); box-shadow:0 1px 0 #1DA854; }
.chat-send svg{ width:20px; height:20px; fill:currentColor; }

@media (max-width: 520px){
  .chat-widget{ bottom:14px; right:14px; }
  .chat-toggle{ width:92px; height:92px; }
  .chat-panel{
    right:10px;
    left:10px;
    bottom:112px;
    width:auto;
    max-width:none;
    max-height:calc(100vh - 140px);
  }
}

@media (prefers-reduced-motion: reduce){
  .chat-panel{ transition:opacity .1s linear; }
}

/* =========================================================
   REVEAL
========================================================= */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1024px){
  .project-card{ grid-template-columns: 1fr; }
  .project-stats{ grid-template-columns:repeat(3, 1fr); }
  .process-grid{ grid-template-columns:repeat(2, 1fr); }
  .teaser-grid-3{ grid-template-columns:repeat(2, 1fr); }
  .feature-row{ gap:40px; padding:32px 0; }
}
@media (max-width: 820px){
  .feature-row{
    grid-template-columns:1fr;
    gap:32px;
  }
  .feature-row-reverse .feature-visual{ order:1; }
  .feature-text{ max-width:none; }
}
@media (max-width: 960px){
  .hero-grid,
  .about-grid,
  .contact-card,
  .cta-banner-inner{ grid-template-columns: 1fr; }
  .cta-text{ text-align:center; }
  .cta-text p,
  .cta-banner p{ margin-inline:auto; }
  .cta-banner .cta-row{ justify-content:center; }
  .hero-copy{ text-align:center; }
  .hero-copy .lead{ margin-inline:auto; }
  .hero-copy .cta-row{ justify-content:center; }
  .values-grid,
  .service-grid,
  .skills-grid,
  .pkg-grid{ grid-template-columns: repeat(2, 1fr); }
  .cert-grid{ grid-template-columns: repeat(2, 1fr); }
  .project-more-row{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .section{ padding:48px 0; }
  .page-hero{ padding:40px 0 40px; }
  .cta-banner{ padding:48px 0; }
  .img-slot-cta{ max-width:360px; }
}
@media (max-width: 720px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  .nav-cta{ display:none; }
  .nav.is-open .nav-links{
    display:flex;
    position:absolute;
    top:100%;
    left:0; right:0;
    flex-direction:column;
    background:#fff;
    border-bottom:2px solid var(--line);
    padding:12px 14px 18px;
    gap:2px;
    max-height:calc(100vh - 100%);
    /* Cap drawer height and let it scroll if dropdowns push past the fold */
    max-height:calc(100dvh - 64px);
    overflow-y:auto;
    overscroll-behavior:contain;
    box-shadow:0 14px 28px rgba(11,36,83,.10);
    -webkit-overflow-scrolling:touch;
  }
  .nav.is-open .nav-links > a{
    padding:12px 14px;
    border-radius:10px;
    font-weight:700;
  }
  .nav.is-open .nav-links > a:hover,
  .nav.is-open .nav-links > a.is-active{
    background:var(--bg-soft);
  }
  /* CTA stays hidden on mobile : the Contact link in the drawer plus the
     chat widget cover the conversion path without crowding the header. */
  .section{ padding:36px 0; }
  .hero{ padding:24px 0 36px; }
  .values-grid,
  .service-grid,
  .skills-grid,
  .pkg-grid,
  .cert-grid,
  .footer-cols{ grid-template-columns: 1fr 1fr; }
  .project-stats{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .contact-card{ padding:32px; }
}
@media (max-width: 460px){
  .values-grid,
  .service-grid,
  .skills-grid,
  .pkg-grid,
  .cert-grid,
  .footer-cols,
  .project-more-row,
  .teaser-grid-3,
  .process-grid{ grid-template-columns: 1fr; }
  .cta-banner-inner{ padding:44px 22px; }
  .contact-card{ padding:24px; }
  .xp-item{ grid-template-columns: 56px 1fr; gap:12px; padding:16px; }
  .img-slot-avatar{ width:56px; height:56px; }
  .btn-lg{ padding:16px 22px; }
  .project-card{ padding:22px; }
}

/* =========================================================
   FLOATING ACTION BUTTON : Scroll-to-top (bottom-left)
========================================================= */
.scroll-top-fab{
  position:fixed;
  bottom:24px;
  left:24px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--navy);
  color:var(--navy);
  display:grid; place-items:center;
  cursor:pointer;
  z-index:87;
  box-shadow:0 4px 0 var(--navy);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s,
             background-color .15s ease, color .15s ease;
  padding:0;
}
.scroll-top-fab.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .22s ease, transform .22s ease, visibility 0s,
             background-color .15s ease, color .15s ease;
}
.scroll-top-fab:hover{ background:var(--navy); color:#fff; }
.scroll-top-fab:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--navy); }
.scroll-top-fab svg{ width:20px; height:20px; fill:currentColor; display:block; }

@media (prefers-reduced-motion: reduce){
  .scroll-top-fab{ transition:opacity .2s linear, visibility 0s linear .2s; }
  .scroll-top-fab.is-visible{ transition:opacity .2s linear; }
}
@media (max-width: 560px){
  .scroll-top-fab{ width:40px; height:40px; bottom:20px; left:16px; }
}

/* =========================================================
   FAB DISMISS : small × button on chat widget
========================================================= */
.fab-dismiss{
  position:absolute;
  top:-4px;
  right:-4px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--navy);
  color:var(--navy);
  font-family:"Fredoka","Nunito",sans-serif;
  font-size:13px;
  font-weight:900;
  line-height:1;
  padding:0;
  display:grid; place-items:center;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  z-index:101;
  transition:transform .15s ease, background-color .15s ease, color .15s ease;
}
.fab-dismiss:hover{
  background:var(--navy);
  color:#fff;
  transform:scale(1.12);
}
.fab-dismiss:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}

/* Hidden state : fade + scale down */
.chat-widget.is-hidden{
  opacity:0;
  visibility:hidden;
  transform:scale(.82);
  pointer-events:none;
  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility 0s linear .3s;
}

@media (max-width: 560px){
  .fab-dismiss{ width:26px; height:26px; font-size:14px; top:-6px; right:-6px; }
}
@media (prefers-reduced-motion: reduce){
  .chat-widget.is-hidden{ transition:none; }
  .fab-dismiss{ transition:none; }
}

/* =========================================================
   MOBILE POLISH : iOS quirks, tap delay, overflow safety
========================================================= */
html, body{
  overflow-x:hidden;
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Eliminate 300ms tap delay + double-tap zoom on interactive elements */
a, button, input, textarea, select, label,
.btn, .chat-toggle, .whatsapp-fab, .scroll-top-fab, .fab-dismiss,
.nav-burger, .social, .chat-suggest, .faq-item summary{
  touch-action:manipulation;
}

/* Prevent iOS from auto-zooming when inputs have font-size < 16px */
@media (max-width: 720px){
  .c-form input[type=text],
  .c-form input[type=email],
  .c-form input[type=tel],
  .c-form input[type=search],
  .c-form textarea,
  input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
  textarea,
  select{
    font-size:16px;
  }
}

/* Safe-area inset support (iPhone notch / home indicator) */
.whatsapp-wrap{
  padding-left:env(safe-area-inset-left, 0);
  padding-bottom:env(safe-area-inset-bottom, 0);
}
.chat-widget{
  padding-right:env(safe-area-inset-right, 0);
  padding-bottom:env(safe-area-inset-bottom, 0);
}

/* =========================================================
   FOOTER COPY : inline Privacy/Terms links
========================================================= */
.footer-copy a{
  color:rgba(255,255,255,.9);
  text-decoration:none;
  transition:color .15s ease;
}
.footer-copy a:hover{
  color:#fff;
  text-decoration:underline;
}

/* =========================================================
   404 ERROR PAGE
========================================================= */
.error-hero{
  padding:80px 0 120px;
  text-align:center;
  position:relative;
}
.error-inner{
  max-width:720px;
  margin:0 auto;
}
.error-code{
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:700;
  font-size:clamp(7rem, 18vw, 12rem);
  line-height:1;
  color:var(--primary);
  letter-spacing:-.04em;
  margin-bottom:8px;
  text-shadow:0 8px 0 var(--primary-dk);
}
.error-hero .h1{
  margin:.2em 0;
}
.error-hero .lead{
  margin:14px auto 36px;
  max-width:560px;
}
.error-suggestions{
  margin-top:56px;
  padding-top:36px;
  border-top:2px dashed var(--line);
}
.error-suggestions .eyebrow{
  display:block;
  margin-bottom:20px;
  color:var(--muted);
}
.error-links{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px 28px;
}
.error-links a{
  color:var(--navy);
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  transition:color .15s ease;
  position:relative;
}
.error-links a::after{
  content:"→"; margin-left:6px;
  color:var(--primary);
  transition:transform .15s ease;
  display:inline-block;
}
.error-links a:hover{ color:var(--primary); }
.error-links a:hover::after{ transform:translateX(3px); }

/* =========================================================
   LEGAL PAGES (Privacy, Terms)
========================================================= */
.legal-meta{
  font-family:"JetBrains Mono", monospace;
  font-size:.82rem;
  color:var(--muted);
  margin-top:10px;
  letter-spacing:.04em;
}
.legal-page{
  padding:0 0 100px;
  background:#fff;
}
.legal-content{
  max-width:780px;
  margin:0 auto;
  font-family:"Nunito","Fredoka",sans-serif;
  color:var(--navy);
  line-height:1.7;
  font-size:1rem;
}
.legal-content h2{
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:700;
  color:var(--navy);
  font-size:1.5rem;
  margin:44px 0 14px;
  line-height:1.2;
}
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{
  font-family:"Fredoka","Nunito",sans-serif;
  font-weight:700;
  color:var(--navy);
  font-size:1.1rem;
  margin:24px 0 10px;
}
.legal-content p{
  margin:0 0 14px;
  color:#3b4658;
}
.legal-content ul{
  margin:6px 0 18px;
  padding-left:22px;
  color:#3b4658;
}
.legal-content li{
  margin:6px 0;
}
.legal-content a{
  color:var(--secondary);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .15s ease;
}
.legal-content a:hover{ color:var(--primary); }
.legal-content strong{
  color:var(--navy);
  font-weight:800;
}
.legal-content code{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1px 7px;
  font-family:"JetBrains Mono", monospace;
  font-size:.88em;
  color:var(--navy);
}

@media (max-width: 560px){
  .error-hero{ padding:60px 0 80px; }
  .error-code{ text-shadow:0 5px 0 var(--primary-dk); }
  .legal-content h2{ font-size:1.3rem; margin-top:36px; }
}

/* =========================================================
   SKIP LINK : keyboard-only nav assist
========================================================= */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:9999;
  padding:12px 18px;
  background:var(--navy);
  color:#fff;
  font-weight:800;
  font-family:"Fredoka","Nunito",sans-serif;
  text-decoration:none;
  border-radius:0 0 10px 0;
  box-shadow:0 4px 12px rgba(11,36,83,.25);
}
.skip-link:focus{ left:0; }

/* =========================================================
   FORM STATES : spinner, success card, inline errors
========================================================= */
/* Submit button spinner */
.btn .btn-spinner{
  display:none;
  width:18px; height:18px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin-left:2px;
}
.btn.is-loading{ pointer-events:none; opacity:.85; }
.btn.is-loading .btn-spinner{ display:inline-block; }
.btn.is-loading .btn-label{ opacity:.85; }
@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* Inline field errors (appear below each field) */
.field-error{
  display:none;
  margin-top:6px;
  font-size:.82rem;
  font-weight:700;
  color:#D93B3B;
  font-family:"Nunito","Fredoka",sans-serif;
}
.field.has-error .field-error{ display:block; }
.field.has-error input,
.field.has-error textarea{
  border-color:#D93B3B !important;
  box-shadow:0 0 0 3px rgba(217,59,59,.12) !important;
}

/* Success card replaces the form on submit */
.c-form-success{
  background:#fff;
  border:2px solid var(--line);
  border-radius:20px;
  padding:54px 34px;
  box-shadow:0 6px 0 var(--line);
  text-align:center;
}
.c-form-success .success-icon{
  width:68px; height:68px;
  border-radius:50%;
  background:#E8F7EC;
  color:#1DA854;
  display:grid; place-items:center;
  margin:0 auto 18px;
  font-size:2.2rem;
  font-weight:800;
  border:3px solid #C7E9D4;
}
.c-form-success h3{
  margin:0 0 10px;
  color:var(--navy);
  font-family:"Fredoka","Nunito",sans-serif;
  font-size:1.4rem;
}
.c-form-success p{
  color:var(--muted);
  margin:0 auto 24px;
  max-width:420px;
  line-height:1.55;
}
.c-form-success .btn{ margin-top:4px; }

/* Form-note styled as dismissable inline status bar */
.form-note{
  margin:8px 0 0;
  padding:10px 14px;
  border-radius:12px;
  font-size:.88rem;
  font-weight:700;
  font-family:"Nunito","Fredoka",sans-serif;
  display:none;
}
.form-note.is-info{
  display:block;
  background:var(--blue-bg);
  color:var(--secondary-dk);
  border:1.5px solid var(--secondary-bd);
}
.form-note.is-error{
  display:block;
  background:#FDECEC;
  color:#A62525;
  border:1.5px solid #F3C9C9;
}

/* =========================================================
   REDUCED MOTION : sweep
========================================================= */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  body{ transition:none !important; }
  .btn .btn-spinner{ animation:none; }
  .whatsapp-fab::before,
  .whatsapp-fab::after{ animation:none; }
}

/* =========================================================
   RESEARCH CONCEPT CARDS : compact preview cards for the
   Studio Research pages. Distinct from project cards so it
   reads as "research preview" not "shipping product".
========================================================= */
.research-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:18px;
  margin-top:32px;
}
.research-card{
  position:relative;
  background:#fff;
  border:2px solid var(--line);
  border-radius:14px;
  padding:22px 22px 24px;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.research-card:hover{
  border-color:var(--secondary-bd);
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(11,36,83,.08);
}
.research-num{
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:.7rem;
  font-weight:700;
  color:var(--primary-dk);
  background:var(--primary-bg);
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:.1em;
  display:inline-block;
  margin-bottom:12px;
}
.research-name{
  font-family:"Fredoka", "Nunito", system-ui, sans-serif;
  font-size:1.25rem;
  font-weight:700;
  color:var(--navy);
  margin:0 0 6px;
  letter-spacing:-.01em;
}
.research-tagline{
  font-size:.85rem;
  font-weight:600;
  color:#505860;
  line-height:1.5;
  margin:0 0 12px;
}
.research-section-mini{
  border-top:1px solid var(--line-2);
  padding-top:12px;
  margin-top:12px;
}
.research-label{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:.62rem;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.18em;
  display:block;
  margin-bottom:6px;
}
.research-body{
  font-size:.82rem;
  color:#505860;
  line-height:1.6;
  margin:0;
}
.research-catalogue{
  background:var(--bg-soft);
  border-radius:14px;
  padding:24px;
  margin-top:32px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:8px 24px;
}
.catalogue-item{
  font-size:.85rem;
  color:#505860;
  font-weight:600;
  padding:6px 0;
  border-bottom:1px dashed var(--line);
}
.catalogue-item strong{ color:var(--navy); display:block; font-family:"Fredoka", sans-serif; }
.catalogue-item small{ color:var(--muted); font-size:.78rem; font-weight:600; }

.reserved-banner{
  background:linear-gradient(135deg, var(--navy) 0%, #1A3470 100%);
  color:#fff;
  border-radius:18px;
  padding:36px 32px;
  text-align:center;
  margin-top:48px;
}
.reserved-banner h3{
  font-family:"Fredoka", "Nunito", sans-serif;
  font-size:1.6rem;
  color:#fff;
  margin:0 0 10px;
}
.reserved-banner p{
  font-size:.95rem;
  color:rgba(255,255,255,.8);
  max-width:48ch;
  margin:0 auto 22px;
  line-height:1.6;
}
@media (max-width:560px){
  .research-grid{ grid-template-columns:1fr; }
  .research-catalogue{ grid-template-columns:1fr; }
  .reserved-banner{ padding:28px 22px; }
  .reserved-banner h3{ font-size:1.35rem; }
}



/* =========================================================
   MOBILE OPTIMISATION PASS : tightens shape across phones
========================================================= */

/* Tablet (<=720) baseline */
@media (max-width: 720px){
  /* Buttons : keep large CTAs tappable but not oversized */
  .btn-lg{ padding:14px 22px; font-size:.95rem; border-radius:14px; }
  .btn{ padding:13px 20px; font-size:.92rem; border-radius:14px; }
  .btn-sm{ padding:10px 14px; font-size:.74rem; }
  .cta-row{ gap:10px; margin:20px 0 16px; }

  /* Headings + body */
  .h2{ font-size:clamp(1.6rem, 5vw, 2rem); line-height:1.12; }
  .lead{ font-size:1rem; line-height:1.55; max-width:none; }
  .body-center{ font-size:.95rem; max-width:46ch; }

  /* Section rhythm */
  .section-head{ margin:0 auto 20px; }
  .container{ width:min(1160px, 94%); }

  /* Hero specifics */
  .hero{ padding:20px 0 32px; }
  .hero-grid{ gap:24px; }
  .hero .h1{ font-size:clamp(1.7rem, 7vw, 2.6rem); }
  .hero-copy .lead{ margin-inline:auto; max-width:42ch; }
  .hero-copy .cta-row{ justify-content:center; }
  .hero-img{
    /* drop the desktop bleed-out so the mascot stays inside the column */
    width:100%;
    max-width:380px;
    margin:0 auto;
  }
  .explore-more{ font-size:.78rem; }

  /* Feature rows : stack tight, image breathes, text leads */
  .feature-row{ gap:24px; padding:24px 0; }
  .feature-row + .feature-row{ border-top-style:solid; }
  .feature-text h2{ margin:.1em 0 .3em; }
  .feature-text p{ font-size:.95rem; line-height:1.55; }
  .img-slot-feature{ aspect-ratio:4/3; max-width:100%; }

  /* Page hero (sub-pages) */
  .page-hero{ padding:32px 0 32px; }
  .page-hero .h1{ font-size:clamp(1.8rem, 6vw, 2.6rem); }
  .page-hero .lead{ font-size:.96rem; line-height:1.55; max-width:46ch; }
  .page-hero .cta-row{ margin-top:18px; }

  /* Service cards */
  .bb-services-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .bb-service-card{ padding:18px 16px; }
  .bb-service-card h3{ font-size:1rem; }
  .bb-service-card p{ font-size:.86rem; line-height:1.5; }
  .bb-service-icon img{ width:64px !important; height:64px !important; }

  /* CTA banner */
  .cta-banner-inner{ padding:32px 22px; gap:24px; }
  .cta-text h2{ font-size:1.7rem; line-height:1.15; }
  .cta-text p{ font-size:.95rem; }
  .cta-text .cta-row{ justify-content:center; }

  /* Stats band */
  .stats-band{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .s-cell strong{ font-size:1.6rem; }
  .s-cell span{ font-size:.72rem; }

  /* Solutions steps */
  .solution-step{ gap:14px; }
  .solution-step-num{ width:36px; height:36px; font-size:1rem; flex-shrink:0; }
  .solution-step h4{ font-size:1rem; }
  .solution-step p{ font-size:.9rem; }

  /* Pre-footer mini grid */
  .pre-footer-inner{ flex-direction:column; gap:20px; }
  .contact-mini-grid{ grid-template-columns:1fr; width:100%; gap:10px; }
  .contact-mini{ padding:14px 16px; }

  /* Forms : larger tap targets, sane spacing */
  .field input, .field textarea, .field select{ padding:13px 14px; }
  .field-row{ grid-template-columns:1fr; gap:12px; }
  .c-form{ gap:14px; }
}

/* Phone (<=480) tightening */
@media (max-width: 480px){
  .container{ width:min(1160px, 92%); }
  .h1{ font-size:clamp(1.8rem, 8vw, 2.4rem); }
  .h2{ font-size:1.5rem; }

  .btn-lg{ width:100%; justify-content:center; }
  .btn{ width:100%; justify-content:center; }
  .cta-row{ flex-direction:column; align-items:stretch; }
  .hero-copy .cta-row .btn{ width:auto; align-self:center; }

  .bb-services-grid{ grid-template-columns:1fr; }
  .testimonial-grid{ grid-template-columns:1fr; }

  .page-hero{ padding:24px 0 28px; }
  .section{ padding:28px 0; }
  .section-alt{ padding-top:28px; padding-bottom:28px; }

  .img-slot-feature{ aspect-ratio:16/10; }
  .feature-row{ gap:16px; padding:18px 0; }
  .feature-text h2{ font-size:1.3rem; }

  .cta-banner-inner{ padding:24px 18px; }
  .cta-text h2{ font-size:1.4rem; }

  /* Footer compact */
  .footer-grid{ padding:32px 0 56px !important; gap:24px !important; }
  .footer-cols{ grid-template-columns:1fr; gap:18px; }
  .footer-cols a, .footer-cols .muted{ font-size:.92rem; }
  .footer-cols h5{ font-size:.95rem; margin-bottom:8px; }
}

/* Eliminate horizontal overflow on every breakpoint */
html, body{ overflow-x:hidden; }
img, video, iframe{ max-width:100%; height:auto; }


/* =========================================================
   CUSTOM 2-LEVEL SELECT (.cs) for the contact form
   "Pick a service" : top-level shows 3 categories,
   each expands inline to its services. Tap final option
   to fill the hidden input and close the panel.
========================================================= */
.cs{ position:relative; }

.cs-trigger{
  width:100%;
  font:inherit;
  font-weight:700;
  color:var(--ink);
  padding:13px 16px;
  border-radius:14px;
  background:#fff;
  border:2px solid var(--line);
  outline:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  transition:border-color .15s ease, box-shadow .15s ease;
  text-align:left;
}
.cs-trigger:hover{ border-color:var(--secondary-bd); }
.cs.is-open .cs-trigger,
.cs-trigger:focus-visible{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(var(--primary-rgb), .22);
}
.cs-value{
  font-size:.95rem;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cs-value:not(.is-filled){ color:var(--muted); font-weight:600; }
.cs-caret{
  font-size:.7em;
  color:var(--navy);
  transition:transform .25s ease;
}
.cs.is-open .cs-caret{ transform:rotate(180deg); }

.cs-panel{
  position:absolute;
  top:calc(100% + 6px);
  left:0; right:0;
  z-index:50;
  background:#fff;
  border:2px solid var(--line);
  border-radius:14px;
  box-shadow:0 14px 36px rgba(11,36,83,.14);
  padding:6px;
  max-height:380px;
  overflow-y:auto;
  overscroll-behavior:contain;
  animation:csOpen .2s ease;
}
@keyframes csOpen{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:translateY(0); }
}

.cs-group + .cs-group{ margin-top:2px; }

.cs-group-trigger{
  width:100%;
  font:inherit;
  font-weight:700;
  font-size:.92rem;
  color:var(--navy);
  padding:11px 14px;
  border-radius:10px;
  background:transparent;
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  transition:background .15s ease;
}
.cs-group-trigger:hover,
.cs-group.is-open > .cs-group-trigger{
  background:var(--bg-soft);
}
.cs-group-icon{ font-size:1.05rem; line-height:1; }
.cs-group-label{ flex:1; }
.cs-group-caret{
  font-size:1rem;
  color:var(--muted);
  font-weight:700;
  transition:transform .25s ease;
}
.cs-group.is-open > .cs-group-trigger .cs-group-caret{
  transform:rotate(90deg);
  color:var(--primary-dk);
}

.cs-group-items{
  padding:2px 0 6px 8px;
  display:flex;
  flex-direction:column;
}

.cs-option{
  width:100%;
  font:inherit;
  font-weight:600;
  font-size:.9rem;
  color:var(--ink);
  padding:9px 14px 9px 30px;
  border-radius:8px;
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
  position:relative;
  transition:background .12s ease, color .12s ease;
}
.cs-option::before{
  content:"";
  position:absolute;
  left:14px; top:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--line);
  transform:translateY(-50%);
  transition:background .12s ease, transform .12s ease;
}
.cs-option:hover{
  background:var(--secondary-bg);
  color:var(--secondary-dk);
}
.cs-option:hover::before{
  background:var(--secondary);
  transform:translateY(-50%) scale(1.4);
}
.cs-option.is-selected{
  background:var(--primary-bg);
  color:var(--primary-dk);
}
.cs-option.is-selected::before{
  background:var(--primary);
}

@media (max-width:520px){
  .cs-panel{ max-height:60vh; }
  .cs-trigger{ padding:14px 16px; }
}