/* ============================================
   FONTS — self-hosted Inter (no external font CDN)
============================================ */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('assets/fonts/inter-latin-800-normal.woff2') format('woff2');
}


/* ============================================
   DESIGN TOKENS
============================================ */
:root{
  --blue: #3157D5;
  --blue-dark: #2645b0;
  --blue-soft: rgba(49,87,213,0.08);
  --blue-glow: rgba(49,87,213,0.16);
  --ink: #0B0D12;
  --ink-soft: #12141b;
  --gray-700: #4b5160;
  --gray-500: #6b7280;
  --gray-400: #94989f;
  --border: rgba(10,12,20,0.09);
  --border-soft: rgba(10,12,20,0.06);
  --bg: #ffffff;
  --bg-tint: #fbfbfe;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1280px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}
section{ position:relative; }
.accent{ color:var(--blue); }

/* lenis smoothing helper */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

/* generic reveal targets start state (JS-driven via GSAP, this is a no-js fallback) */
.reveal{ opacity:1; }

/* ============================================
   HEADER
============================================ */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  padding:28px 0;
  transition:padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(255,255,255,0.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  transition:opacity .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{ padding:16px 0; }
.site-header.scrolled::before{ opacity:1; border-bottom-color:var(--border-soft); }
.site-header .container{ max-width:1480px; }
.header-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-size:19px;
  font-weight:800;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-left:56px;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:44px;
  margin-right:40px;
}
.nav-links a{
  font-size:14px;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--gray-500);
  position:relative;
  padding:4px 0;
  transition:color .35s var(--ease);
}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:1px;
  background:var(--blue);
  transition:width .4s var(--ease);
}
.nav-links a:hover{ color:var(--blue); }
.nav-links a:hover::after{ width:100%; }

/* ============================================
   BUTTONS
============================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 28px;
  border-radius:var(--radius-pill);
  font-size:15px;
  font-weight:500;
  border:1px solid transparent;
  transition:transform .45s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
  white-space:nowrap;
}
.btn svg{ transition:transform .4s var(--ease); flex-shrink:0; }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:scale(0.97); }

.btn-primary{
  background:var(--blue);
  color:#fff;
  box-shadow:0 1px 2px rgba(49,87,213,0.15);
}
.btn-primary:hover{
  background:var(--blue-dark);
  box-shadow:0 8px 20px rgba(49,87,213,0.28);
  transform:translateY(-2px);
}
.btn-secondary{
  background:#fff;
  color:var(--ink);
  border-width:1.5px;
  border-color:var(--ink);
}
.btn-secondary:hover{
  border-color:var(--blue);
  background:var(--blue-soft);
  color:var(--blue);
  transform:translateY(-2px);
}
.btn-dark{
  background:var(--ink);
  color:#fff;
}
.btn-dark:hover{
  background:#000;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,0.22);
}
.btn-block{ width:100%; justify-content:center; }

/* ============================================
   HERO
============================================ */
.hero{
  padding:168px 0 124px;
  overflow:hidden;
  position:relative;
}
.hero-glow{
  position:absolute;
  top:10%; right:-6%;
  width:52%; height:60%;
  background:radial-gradient(closest-side, rgba(49,87,213,0.14), transparent 70%);
  pointer-events:none;
  filter:blur(14px);
  z-index:0;
}
.hero .container{ max-width:1480px; position:relative; z-index:1; }
.hero-inner{
  display:grid;
  grid-template-columns:1.5fr 0.85fr;
  align-items:center;
  gap:32px;
}
.hero-copy{ padding-bottom:96px; margin-left:56px; }
.hero-title{
  font-size:clamp(38px, 3.6vw, 52px);
  line-height:1.16;
  font-weight:400;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.hero-title .accent{ font-weight:600; }
.hero-title .line{
  display:block;
  overflow:hidden;
  padding-bottom:2px;
}
.hero-title .line-inner{
  display:block;
  will-change:transform;
}
.hero-sub{
  margin-top:28px;
  font-size:18px;
  line-height:1.65;
  color:var(--gray-500);
  max-width:520px;
  font-weight:400;
}
.hero-cta{
  margin-top:40px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.hero-cta .btn{ width:206px; }
.hero-visual{
  position:relative;
  height:626px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.hero-stage{
  position:relative;
  width:646px;
  height:100%;
  margin-left:-54px;
}
.hero-blob{
  position:absolute;
  top:50px;
  left:50%;
  transform:translateX(-50%);
  width:391px;
  height:391px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4d6fe6 0%, var(--blue) 55%, #2646ad 100%);
  will-change:transform;
}
.hero-portrait{
  position:absolute;
  top:-22px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  width:627px;
  will-change:transform, opacity;
}
.hero-portrait img{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 30px 40px rgba(10,12,20,0.14));
}

/* ============================================
   SECTION HEADINGS (shared)
============================================ */
.section-pad{ padding:120px 0; }
.eyebrow{
  font-size:13px;
  font-weight:500;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:20px;
  display:block;
}
.heading-xl{
  font-size:clamp(28px, 2.9vw, 42px);
  line-height:1.2;
  font-weight:400;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.center{ text-align:center; }
.sub-copy{
  margin-top:18px;
  font-size:17px;
  line-height:1.6;
  color:var(--gray-500);
  max-width:560px;
}
.center .sub-copy{ margin-left:auto; margin-right:auto; }

/* ============================================
   RESULTS
============================================ */
.results{
  background:linear-gradient(180deg, #fbfcff 0%, #ffffff 100%);
  position:relative;
}
.results-glow{
  position:absolute;
  top:-10%; left:-10%;
  width:50%; height:70%;
  background:radial-gradient(closest-side, rgba(49,87,213,0.10), transparent 70%);
  pointer-events:none;
  filter:blur(10px);
}
.results-head{ max-width:1080px; margin:0 auto; }
.results-head .heading-xl{ font-weight:600; letter-spacing:-0.02em; }
.metrics{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.metric-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:44px 24px;
  text-align:center;
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.metric-card:hover{
  border-color:rgba(49,87,213,0.28);
  box-shadow:0 20px 40px rgba(20,30,70,0.06);
}
.metric-value{
  font-size:clamp(38px, 4vw, 52px);
  font-weight:600;
  color:var(--blue);
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}
.metric-label{
  margin-top:10px;
  font-size:12.5px;
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gray-500);
}

/* ============================================
   AD CREATIVES
============================================ */
.creatives{
  padding:120px 0 130px;
  overflow:hidden;
}
.creatives-head{ margin-bottom:74px; }
.creatives-head .heading-xl{ font-weight:600; letter-spacing:-0.02em; }
.creative-viewport{
  position:relative;
  width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.creative-track{
  display:flex;
  gap:22px;
  padding:6px 20px 30px;
  cursor:grab;
  scrollbar-width:none;
}
.creative-track::-webkit-scrollbar{ display:none; }
.creative-track:active{ cursor:grabbing; }
.creative-card{
  position:relative;
  flex:0 0 auto;
  width:195px;
  aspect-ratio:9/16;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#0c0d10;
  box-shadow:0 12px 28px rgba(15,20,45,0.10);
  opacity:1;
  filter:blur(0px);
  transition:opacity .45s ease-out, filter .45s ease-out;
  cursor:pointer;
}
.creative-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#0c0d10;
  pointer-events:none;
}
.creative-card::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(6,8,16,0.24);
  transition:opacity .3s ease;
  pointer-events:none;
}
.creative-card.playing::after{ opacity:0; }
.creative-play{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:50px; height:50px;
  border-radius:50%;
  background:rgba(255,255,255,0.94);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
  box-shadow:0 10px 24px rgba(0,0,0,0.28);
  transition:opacity .25s ease, transform .25s ease;
}
.creative-play svg{ width:15px; height:15px; margin-left:2px; }
.creative-card.playing .creative-play{
  opacity:0;
  transform:translate(-50%,-50%) scale(0.7);
  pointer-events:none;
}
.creative-scrub{
  position:absolute;
  left:10px; right:10px; bottom:10px;
  z-index:3;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.creative-card.playing .creative-scrub{
  opacity:1;
  pointer-events:auto;
}
.creative-scrub-track{
  position:relative;
  height:14px;
  display:flex;
  align-items:center;
  cursor:pointer;
  touch-action:none;
}
.creative-scrub-track::before{
  content:"";
  position:absolute;
  left:0; right:0; top:50%;
  height:3px;
  transform:translateY(-50%);
  background:rgba(255,255,255,0.32);
  border-radius:3px;
}
.creative-scrub-fill{
  position:absolute;
  left:0; top:50%;
  height:3px;
  width:0%;
  transform:translateY(-50%);
  background:#fff;
  border-radius:3px;
  pointer-events:none;
}
.creative-scrub-handle{
  position:absolute;
  top:50%; left:0%;
  width:11px; height:11px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.creative-hint{
  margin-top:20px;
  text-align:center;
  font-size:13px;
  color:var(--gray-400);
  letter-spacing:0.02em;
}

/* ============================================
   WHAT WE DO
============================================ */
.whatwedo{ background:var(--bg-tint); position:relative; overflow:hidden; }
.whatwedo-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(45% 55% at 50% 0%, rgba(49,87,213,0.07), transparent 70%),
    radial-gradient(35% 45% at 4% 92%, rgba(49,87,213,0.07), transparent 70%);
  pointer-events:none;
}
.whatwedo .container{ position:relative; }
.whatwedo-head{ max-width:820px; margin:0 auto; }
.wwd-title{
  display:block;
  font-size:clamp(40px, 4.6vw, 60px);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-transform:uppercase;
}
.wwd-title .accent{ font-weight:700; }
.whatwedo-head .wwd-subtitle{
  margin-top:14px;
  font-size:clamp(20px, 1.8vw, 22px);
  line-height:1.5;
  font-weight:400;
  color:var(--gray-700);
  letter-spacing:-0.005em;
}
.whatwedo-head .wwd-subtitle .accent{ font-weight:500; }
.wwd-grid{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.wwd-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:32px 26px;
  transition:transform .45s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.wwd-card:hover{
  border-color:rgba(49,87,213,0.3);
  box-shadow:0 24px 44px rgba(20,30,70,0.07);
}
.wwd-icon{
  width:48px; height:48px;
  border-radius:12px;
  background:var(--blue-soft);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.wwd-icon svg{ width:22px; height:22px; stroke:var(--blue); }
.wwd-card h3{
  font-size:19px;
  font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:10px;
}
.wwd-card p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--gray-500);
}

/* ============================================
   WHAT WE BELIEVE
============================================ */
.believe{
  padding:210px 0;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.believe-glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(48% 65% at 0% 0%, rgba(49,87,213,0.28), transparent 74%),
    radial-gradient(48% 65% at 100% 0%, rgba(49,87,213,0.28), transparent 74%),
    radial-gradient(40% 58% at 50% 100%, rgba(49,87,213,0.12), transparent 72%);
  filter:blur(10px);
  pointer-events:none;
}
.believe-inner{ position:relative; max-width:1120px; margin:0 auto; }
.believe-inner .eyebrow{ margin-bottom:28px; font-size:15.6px; }
.believe-statement{
  font-size:clamp(26px, 3vw, 42px);
  line-height:1.26;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.believe-statement .accent{ font-weight:500; }

/* ============================================
   WHO IS THIS FOR
============================================ */
.suited{ background:var(--bg-tint); position:relative; overflow:hidden; padding-top:170px; }
.suited-glow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(42% 55% at 85% 8%, rgba(49,87,213,0.10), transparent 70%),
    radial-gradient(40% 50% at 5% 95%, rgba(49,87,213,0.08), transparent 70%);
  pointer-events:none;
}
.suited-head{ margin-bottom:64px; max-width:820px; margin-left:auto; margin-right:auto; text-align:center; position:relative; }
.suited-head .heading-xl{ font-weight:700; font-size:clamp(31px, 3.2vw, 46px); }
.suited-list{ max-width:820px; margin-left:auto; margin-right:auto; border-top:1px solid var(--border); position:relative; }
.suited-row{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:30px 0;
  border-bottom:1px solid var(--border);
}
.suited-num{
  flex:0 0 auto;
  font-size:20px;
  font-weight:700;
  color:var(--blue);
  width:22px;
  font-variant-numeric:tabular-nums;
}
.suited-text{
  font-size:19px;
  line-height:1.5;
  color:var(--gray-700);
  font-weight:400;
  max-width:760px;
}
.suited-text strong{
  color:var(--ink);
  font-weight:700;
}

/* ============================================
   PACKAGES
============================================ */
.packages{ position:relative; overflow:hidden; }
.packages-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(42% 55% at 4% 6%, rgba(49,87,213,0.09), transparent 70%),
    radial-gradient(42% 55% at 97% 98%, rgba(49,87,213,0.09), transparent 70%);
  pointer-events:none;
}
.packages .container{ position:relative; }
.packages-head{ max-width:820px; margin:0 auto; }
.packages-head .heading-xl{ font-weight:700; }
.pkg-grid{
  margin-top:64px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:stretch;
}
.pkg-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:40px 32px;
  display:flex;
  flex-direction:column;
  box-shadow:0 12px 32px rgba(37,155,140,0.07);
  transition:transform .45s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.pkg-card:hover{
  transform:translateY(-6px);
  border-color:rgba(49,87,213,0.35);
  box-shadow:0 26px 50px rgba(20,30,70,0.08);
}
.pkg-name{
  font-size:30px;
  font-weight:600;
  letter-spacing:-0.005em;
  line-height:1.22;
}
.pkg-name .accent{ font-weight:600; display:block; }
.pkg-desc{
  margin-top:14px;
  font-size:15px;
  line-height:1.6;
  color:var(--gray-500);
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.pkg-features{
  margin-top:24px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.pkg-feature{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14.5px;
  color:var(--gray-700);
  font-weight:500;
}
.pkg-check{
  flex:0 0 auto;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--blue-soft);
  display:flex; align-items:center; justify-content:center;
}
.pkg-check svg{ width:10px; height:10px; stroke:var(--blue); }
.pkg-card .btn{ margin-top:32px; }

/* ============================================
   CTA
============================================ */
/* ============================================
   CONTACT
============================================ */
.contact{
  padding:120px 0 163px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.contact-glow{
  position:absolute; inset:0;
  background:
    radial-gradient(50% 60% at 6% 10%, rgba(49,87,213,0.14), transparent 70%),
    radial-gradient(48% 58% at 96% 92%, rgba(49,87,213,0.14), transparent 70%);
  pointer-events:none;
}
.contact-inner{ position:relative; }
.contact-inner .eyebrow{ font-size:14.3px; }
.contact-title{
  font-size:clamp(32px, 4vw, 50px);
  line-height:1.14;
  font-weight:700;
  letter-spacing:-0.01em;
  margin-top:14px;
}
.contact .sub-copy{ margin-top:18px; }
.contact-grid{
  margin-top:48px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
}
.contact-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:#fff;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  transition:transform .4s var(--ease), background .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.contact-pill svg{ width:18px; height:18px; stroke:var(--blue); flex-shrink:0; }
.contact-pill:hover{
  transform:translateY(-3px);
  background:var(--blue-soft);
  border-color:rgba(49,87,213,0.3);
  box-shadow:0 14px 28px rgba(49,87,213,0.12);
}

/* ============================================
   RESPONSIVE
============================================ */
/* forced line-break used only on small phones (see the 680px block below)
   to control exactly where a headline wraps there, while leaving every
   larger breakpoint — tablet included — to wrap the same as before */
br.mobile-break{ display:none; }

@media (max-width: 1024px){
  .container{ padding:0 24px; }
  .hero{ padding-top:140px; }
  .hero-inner{ grid-template-columns:1fr; gap:0; }
  .hero-copy{ padding-bottom:0; order:2; text-align:left; margin-left:0; }
  .hero-visual{ order:1; height:454px; margin-bottom:24px; }
  .hero-stage{ width:440px; margin-left:0; }
  .hero-blob{ width:266px; height:266px; top:30px; }
  .hero-portrait{ width:426px; top:-19px; }
  .logo{ margin-left:0; }
  .nav-links{ margin-right:0; }
  .section-pad{ padding:88px 0; }
  .metrics{ grid-template-columns:1fr; gap:16px; }
  .wwd-grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .pkg-grid{ grid-template-columns:1fr; gap:20px; }
  .pkg-card.featured{ transform:none; order:-1; }
  .pkg-card.featured:hover{ transform:translateY(-6px); }
  .believe{ padding:120px 0; }
  .contact{ padding:80px 0 110px; }
  .suited-text{ font-size:17px; }
  .suited{ padding-top:133px; }
}

@media (max-width: 680px){
  .container{ padding:0 20px; }
  .nav-links{ gap:24px; }
  .site-header{ padding:24px 0; } /* was 28px — 15% less gap above the nav bar */
  .hero{ padding-top:102px; padding-bottom:48px; } /* was 120px — 15% less gap above the headline */
  .hero-title{ font-size:clamp(32px,8vw,42px); }
  .hero-sub{ font-size:16px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  .hero-visual{ height:310px; }
  .hero-stage{ width:326px; }
  .hero-blob{ width:196px; height:196px; top:18px; }
  .hero-portrait{ width:315px; top:-19px; }
  .section-pad{ padding:72px 0; }
  .wwd-grid{ grid-template-columns:1fr; }
  .suited-row{ gap:14px; padding:24px 0; }
  .suited-num{ font-size:16px; width:18px; }
  .suited-text{ font-size:15.5px; }
  .creative-card{ width:148px; }
  .contact-grid{ gap:12px; }
  .contact-pill{ padding:14px 22px; font-size:14px; }
  .believe-statement{ font-size:24px; }
  .believe-inner .eyebrow{ font-size:13px; }
  .results-head .heading-xl{ font-size:24px; }
  .metric-card{ padding:34px 20px; }
  .metrics{ margin:77px 20px 0; } /* was overlapping the heading above it — restores
                                       the gap (64px base) then pushes it ~20% further down */
  .results{ padding-top:65px; } /* heading sits ~10% higher in the section */
  .results-head, .whatwedo-head, .packages-head{ text-align:left; }
  .center.results-head, .center.whatwedo-head, .center.packages-head{ text-align:center; }
  .suited{ padding-top:101px; }
  br.mobile-break{ display:inline; }
  .pkg-card.featured{ order:0; }

  /* hero: text, then image, then sub-copy + buttons (desktop keeps its
     own 2-column order untouched — this only rewires the mobile stack) */
  .hero-inner{ gap:24px; }
  .hero-copy{ display:contents; }
  .hero-title{ order:1; }
  .hero-visual{ order:2; margin-bottom:0; }
  .hero-sub{ order:3; margin-top:0; }
  .hero-cta{ order:4; margin-top:0; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}