/* =========================================================================
   FONTS
   Headings/UI use "Swiza Medium"; body uses "Noto Sans" (loaded from Google
   Fonts in the HTML head). Swiza files live in assets/fonts/. Paths below are
   relative to this stylesheet (which sits in /assets).
   ========================================================================= */
@font-face {
  font-family: 'Swiza';
  src: url('fonts/swiza-medium-webfont.eot');
  src: url('fonts/swiza-medium-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/swiza-medium-webfont.woff2') format('woff2'),
       url('fonts/swiza-medium-webfont.woff')  format('woff'),
       url('fonts/swiza-medium-webfont.ttf')   format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Google Sans Flex — primary typeface (headings, body & UI). */
@font-face{ font-family:'Google Sans Flex'; src:url('fonts/GoogleSansFlex-Thin.ttf') format('truetype');       font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:'Google Sans Flex'; src:url('fonts/GoogleSansFlex-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:'Google Sans Flex'; src:url('fonts/GoogleSansFlex-Light.ttf') format('truetype');      font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Google Sans Flex'; src:url('fonts/GoogleSansFlex-Regular.ttf') format('truetype');    font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Google Sans Flex'; src:url('fonts/GoogleSansFlex-Medium.ttf') format('truetype');     font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Google Sans Flex'; src:url('fonts/GoogleSansFlex-SemiBold.ttf') format('truetype');   font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Google Sans Flex'; src:url('fonts/GoogleSansFlex-Bold.ttf') format('truetype');       font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Google Sans Flex'; src:url('fonts/GoogleSansFlex-ExtraBold.ttf') format('truetype');  font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Google Sans Flex'; src:url('fonts/GoogleSansFlex-Black.ttf') format('truetype');      font-weight:900; font-style:normal; font-display:swap; }

/* Barlow — headings typeface. */
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-Thin.ttf') format('truetype');       font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-Light.ttf') format('truetype');      font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-Regular.ttf') format('truetype');    font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-Medium.ttf') format('truetype');     font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-SemiBold.ttf') format('truetype');   font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-Bold.ttf') format('truetype');       font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-ExtraBold.ttf') format('truetype');  font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-Black.ttf') format('truetype');      font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-ThinItalic.ttf') format('truetype');       font-weight:100; font-style:italic; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-ExtraLightItalic.ttf') format('truetype'); font-weight:200; font-style:italic; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-LightItalic.ttf') format('truetype');      font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-Italic.ttf') format('truetype');           font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-MediumItalic.ttf') format('truetype');     font-weight:500; font-style:italic; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-SemiBoldItalic.ttf') format('truetype');   font-weight:600; font-style:italic; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-BoldItalic.ttf') format('truetype');       font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-ExtraBoldItalic.ttf') format('truetype');  font-weight:800; font-style:italic; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('fonts/Barlow-BlackItalic.ttf') format('truetype');      font-weight:900; font-style:italic; font-display:swap; }

:root{
  --purple-text:  #8342fb;  /* "Website" word + Website Design title */
  --purple-band:  #7100d3;  /* big purple sections + cards */
  --card-border:  #be6bff;  /* card outline */
  --dark:         #263238;  /* PureDigital footer band */
  --black:        #000000;
  --white:        #ffffff;

  --font-head: 'Barlow', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Google Sans Flex', 'Segoe UI', Arial, sans-serif;

  /* design canvas width from Figma */
  --canvas: 1728px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ background:#fff; }
body{
  font-family:var(--font-body);
  color:var(--black);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; }

/* ---- The page is laid out on the exact 1728px Figma canvas, then scaled
        down responsively so it stays 100% to the design at every width. ---- */
/* Clip BOTH axes. Using overflow-x:hidden alone makes overflow-y compute to
   `auto`, which — with the fixed scaled height set below — turns each wrap into
   its own vertical scroll container (the "second scrollbar"). The stage's
   layout height stays 4362px even when visually scaled, so we clip it here. */
.stage-wrap{ width:100%; overflow:hidden; background:#fff; }
.stage{
  position:relative;
  width:var(--canvas);
  height:1538px;            /* stage A now ends after the purple services band (2407) */
  margin:0 auto;
  transform-origin:top center;
  background:#fff;
}
.abs{ position:absolute; }

/* ============================= HEADER ============================= */
.logo{ position:absolute; left:41px; top:54px; width:268px; height:39px; }
.logo img{ width:100%; height:100%; }

.nav-link{
  position:absolute; top:62px;
  font-family:var(--font-head); font-weight:500;
  font-size:16px; color:var(--black); white-space:nowrap;
  text-decoration:none;
}
.nav-phone { left:1232px; color:var(--purple-text); }

/* primary nav — output by wp_nav_menu(), styled as an inline row */
.main-nav{ position:absolute; top:58px; left:600px; }
.main-menu{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:40px;
}
.main-menu li{ margin:0; }
.main-menu a{
  font-family:var(--font-head); font-weight:500; font-size:16px;
  color:var(--black); text-decoration:none; white-space:nowrap;
  transition:color .2s ease;
}
.main-menu a:hover,
.main-menu .current-menu-item > a,
.main-menu .current-menu-ancestor > a{ color:var(--purple-text); }

.btn-pill{
  position:absolute; display:flex; align-items:center; justify-content:center;
  background:var(--black); color:var(--white);
  border-radius:50px; font-family:var(--font-head); font-weight:500;
  text-decoration:none; white-space:nowrap;
}
.header-cta, .hero-cta{ transition: background .25s ease; }
.header-cta:hover, .hero-cta:hover{ background:var(--purple-band); }
.header-cta{
  left:1360px; top:45px; width:250px; height:48px; font-size:15px; letter-spacing:.5px;
}

/* ============================= HERO ============================= */
.hero-title{
  position:absolute; top:205px; left:50%; transform:translateX(-50%);
  width:1290px;
  font-family:var(--font-head); font-weight:500;
  font-size:96px; line-height:1.08; color:var(--black);
  text-align:center;
}
.hero-title .accent{ color:var(--purple-text); }

.hero-sub{
  position:absolute; top:440px; left:50%; transform:translateX(-50%);
  width:800px; font-family:var(--font-body); font-weight:400;
  font-size:19px; line-height:1.6; color:#333; text-align:center;
}

/* two hero call-to-actions */
.hero-ctas{
  position:absolute; left:50%; top:565px; transform:translateX(-50%);
  display:flex; align-items:center; gap:18px;
}
.hero-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:56px; padding:0 34px; border-radius:50px;
  font-family:var(--font-head); font-weight:500; font-size:16px; letter-spacing:.3px;
  text-decoration:none; white-space:nowrap; transition:all .25s ease;
}
.hero-btn-primary{ background:var(--purple-band); color:#fff; }
.hero-btn-primary:hover{ background:#000; color:#fff; }
.hero-btn-secondary{ background:#fff; color:var(--black); border:1.5px solid #d9d2e6; }
.hero-btn-secondary:hover{ border-color:var(--purple-band); color:var(--purple-band); }

/* reviews cluster ABOVE the h1 — client avatars + Google 5.0 + stars */
.rating{
  position:absolute; left:50%; top:150px; transform:translateX(-50%);
  display:flex; align-items:center; gap:16px;
}
.hr-avatars{ display:flex; }
.hr-avatars img{
  width:46px; height:46px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; margin-left:-13px;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.hr-avatars img:first-child{ margin-left:0; }

/* ===================== HERO LOGO MARQUEE ===================== */
.marquee{
  position:absolute; top:760px; left:50%; transform:translateX(-50%); width:1728px;
  padding-top:30px; border-top:1px solid #e6e4ee;
  overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{
  display:flex; align-items:center; width:max-content;
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}
.marquee-track img{
  height:32px; width:auto; margin:0 45px; object-fit:contain; flex:none;
  filter:grayscale(100%); opacity:.7;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }  /* track holds 2 copies; -50% = one full set */
}

/* ===================== PURPLE SERVICES BAND ===================== */
.band-purple{
  position:absolute; left:50%; transform:translateX(-50%);
  width:1728px; background:var(--purple-band);
}
.band-services{ top:0;  height:1538px; }

.band-dark{
  position:absolute; left:50%; transform:translateX(-50%);
  top:3201px; width:1728px; height:780px; background:#0a0a0c;
}

.services-heading{
  position:absolute; left:calc(50% - 797px); top:110px;
  font-family:var(--font-head); font-weight:500;
  font-size:96px; color:var(--white); white-space:nowrap;
}
.services-intro{
  position:absolute; left:calc(50% - 797px); top:249px;
  font-family:var(--font-body); font-weight:400;
  font-size:16px; color:var(--white); text-align:left; line-height:1.5;
  width:680px;
}

/* ----- service cards -----
   Each .card is a wrapper; its children are positioned relative to it.
   Default = purple background with white text. On hover the card flips to
   the white state: white bg, purple title, black feature text + number. */
.card{
  position:absolute; border:1px solid var(--card-border);
  background:var(--purple-band);
  transition: background .25s ease;
  cursor:pointer;
}

.card-title{
  position:absolute; font-family:var(--font-head); font-weight:500;
  font-size:36px; white-space:nowrap; color:var(--white);
  padding-bottom:20px;
  transition: color .25s ease;
}

/* description paragraph — visible by default, hidden on hover */
.card-desc{
  position:absolute; left:38px; right:38px; width:453px;
  font-family:var(--font-body); font-weight:400;
  font-size:16px; line-height:1.55; color:var(--white);
  opacity:.92; transition: opacity .2s ease;
}
.card:hover .card-desc{ opacity:0; pointer-events:none; }

.feat{
  position:absolute; font-family:var(--font-head); font-weight:500;
  font-size:14px; color:var(--black); white-space:nowrap; line-height:24px;
  padding-left:30px; opacity:0; transition: opacity .25s ease, color .25s ease;
  pointer-events:none;
  /* lift the feature rows up so they sit just under the heading
     (their inline top values are 252/284/316) */
  transform:translateY(-64px);
}
.card:hover .feat{ opacity:1; pointer-events:auto; }
/* circle-with-arrow marker */
.feat::before{
  content:""; position:absolute; left:0; top:2px;
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--purple-text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238342fb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}

.card-num{
  position:absolute; font-family:var(--font-head); font-weight:500;
  font-size:96px; color:var(--white); opacity:.12; white-space:nowrap;
  transition: color .25s ease;
}

.card-icon{ position:absolute; width:52px; height:52px; }

/* icon revealed only on hover of the Website Design card */
.card-icon{ opacity:0; transition: opacity .25s ease; }
.card:hover .card-icon{ opacity:1; }

/* Hover (white) state */
.card:hover{ background:var(--white); }
.card:hover .card-title{ color:var(--purple-text); }
.card:hover .card-num{ color:var(--purple-text); }

/* CTA row under the service cards (inside the purple band) */
.services-cta{
  position:absolute; left:50%; top:1456px; transform:translateX(-50%);
  display:flex; align-items:center; gap:28px; white-space:nowrap;
}
.services-cta-text{
  font-family:var(--font-head); font-weight:500; font-size:22px; color:#fff;
}
.services-cta-btn{
  position:static; display:inline-flex; height:54px; padding:0 32px;
  background:#fff; color:var(--purple-band); font-size:15px; letter-spacing:.3px;
  transition:background .25s ease, color .25s ease;
}
.services-cta-btn:hover{ background:#000; color:#fff; }

/* ===================== LET'S TALK ===================== */
/* Let's Talk is now a normal-flow section (heading + form card) */
.lets-talk-section{ background:#fff; padding:96px 24px; }
.lets-talk{
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(40px,6vw,96px); color:var(--black); text-align:center; white-space:nowrap;
  margin:0 0 40px;
}
/* ----- Proposal form card ----- */
.proposal-card{
  width:min(1400px,100%); margin:0 auto; background:#0c0c0e;
  border:1px solid #222; border-radius:32px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  padding:64px;
}
.proposal-grid{
  display:grid; grid-template-columns:1fr 1.05fr; gap:110px; align-items:start;
}

/* --- LEFT promo column --- */
.proposal-left{ display:flex; flex-direction:column; }
.proposal-title{
  font-family:var(--font-head); font-weight:500; font-size:48px; line-height:1.1;
  color:#fff; margin-bottom:22px;
}
.proposal-title .accent-light{ color:#b388ff; }
.proposal-sub{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:#9a9a9f; line-height:1.65; margin-bottom:36px; max-width:480px;
}

/* image with floating badges */
.promo-media{ position:relative; margin-top:8px; }
.promo-img{
  width:58%; aspect-ratio:3/4; object-fit:cover;
  border-radius:18px; display:block; margin:0 auto;
  background:#1a1a1d;  /* fallback tint until you add the image */
}
.promo-badge{ position:absolute; border-radius:16px; padding:20px 22px; }
.promo-stat{
  top:8%; left:-2%; max-width:200px; background:#e9defb; color:#1a1a1a;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.stat-num{ font-family:var(--font-head); font-weight:500; font-size:38px; line-height:1; color:#3a1d6e; }
.stat-label{ font-family:var(--font-body); font-size:13px; line-height:1.45; margin-top:12px; color:#4a4a4a; }
.promo-quote{
  bottom:4%; right:-4%; max-width:260px; background:#d8cef0; color:#1a1a1a;
  box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.quote-stars{ color:#5b2bd6; font-size:16px; letter-spacing:3px; margin-bottom:10px; }
.quote-text{ font-family:var(--font-body); font-size:14px; line-height:1.5; }

/* --- RIGHT form column --- */
.proposal-right{ width:100%; }
.proposal-form{ display:flex; flex-direction:column; gap:20px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field > label{
  font-family:var(--font-head); font-weight:500; font-size:15px; color:#fff;
}
.field > label .muted{ font-family:var(--font-body); font-weight:400; color:#888; font-size:13px; }
.field > label .req{ color:var(--purple-text); font-weight:500; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea{
  font-family:var(--font-body); font-size:15px; color:#fff;
  background:#161618; border:1px solid #333; border-radius:14px;
  padding:15px 18px; outline:none; width:100%; resize:vertical;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input::placeholder,
.field textarea::placeholder{ color:#666; }
.field input:focus,
.field textarea:focus{
  border-color:var(--purple-text); background:#1c1c1f;
  box-shadow:0 0 0 3px rgba(131,66,251,.18);
}

/* selectable chips for budget + services */
.chip-group{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  position:relative; cursor:pointer; user-select:none;
}
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{
  display:inline-block; font-family:var(--font-body); font-size:14px; color:#ccc;
  background:#161618; border:1px solid #333; border-radius:50px;
  padding:10px 20px; transition:all .18s ease;
}
.chip:hover span{ border-color:var(--purple-text); color:#fff; }
.chip input:checked + span{
  background:var(--purple-band); color:#fff; border-color:var(--purple-band);
}

.proposal-actions{
  display:flex; align-items:center; gap:24px; margin-top:8px;
}
.proposal-submit{
  font-family:var(--font-head); font-weight:500; font-size:17px; color:#fff;
  background:var(--purple-band); border:none; border-radius:50px;
  padding:17px 40px; cursor:pointer; transition:transform .15s ease, background .2s ease;
}
.proposal-submit:hover{ background:var(--purple-text); transform:translateY(-1px); }
.proposal-phone{
  font-family:var(--font-body); font-size:15px; color:#999; text-decoration:none;
}
.proposal-phone:hover{ color:var(--purple-text); }

/* ----- Contact Form 7 output styled to match the design ----- */
.proposal-form .wpcf7-form-control-wrap{ display:block; }
/* radio/checkbox groups rendered as chips */
.proposal-form .wpcf7-radio,
.proposal-form .wpcf7-checkbox{ display:flex; flex-wrap:wrap; gap:10px; }
.proposal-form .wpcf7-list-item{ position:relative; margin:0; }
.proposal-form .wpcf7-list-item label{ display:block; cursor:pointer; margin:0; }
.proposal-form .wpcf7-list-item input{
  position:absolute; inset:0; opacity:0; cursor:pointer;
}
.proposal-form .wpcf7-list-item-label{
  display:inline-block; font-family:var(--font-body); font-size:14px; color:#ccc;
  background:#161618; border:1px solid #333; border-radius:50px;
  padding:10px 20px; transition:all .18s ease;
}
.proposal-form .wpcf7-list-item label:hover .wpcf7-list-item-label{
  border-color:var(--purple-text); color:#fff;
}
.proposal-form .wpcf7-list-item input:checked + .wpcf7-list-item-label{
  background:var(--purple-band); color:#fff; border-color:var(--purple-band);
}
/* validation + response messages */
.proposal-form .wpcf7-not-valid-tip{
  font-family:var(--font-body); font-size:13px; color:#ff6b6b; margin-top:6px;
}
.proposal-form .wpcf7-not-valid{ border-color:#ff6b6b !important; }
.wpcf7-response-output{
  font-family:var(--font-body); font-size:14px; color:#e6e6ea;
  border:1px solid #333 !important; border-radius:12px;
  margin:18px 0 0 !important; padding:14px 18px !important;
}
/* don't reserve space for the response box until it actually has a message */
.proposal-form .wpcf7-response-output:empty{ display:none; }
.wpcf7-spinner{ background:var(--purple-band); }

/* ===================== WHO WE SERVE ===================== */
.serve-wrap{
  max-width:1548px; margin:0 auto; padding:100px 24px 20px;
}
.serve-eyebrow{
  font-family:var(--font-head); font-weight:500; font-size:14px;
  letter-spacing:2px; text-transform:uppercase; color:var(--purple-text);
  text-align:center; margin-bottom:14px;
}
.serve-heading{
  font-family:var(--font-head); font-weight:500; font-size:52px;
  color:var(--black); text-align:center; margin-bottom:18px;
}
.serve-intro{
  font-family:var(--font-body); font-weight:400; font-size:17px;
  color:var(--black); line-height:1.6; text-align:center;
  max-width:760px; margin:0 auto 56px;
}
.serve-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.serve-card{
  background:#fff;
  border:1px solid #ececf1; border-radius:18px; padding:34px 28px;
  box-shadow:0 8px 30px rgba(33,0,80,.05);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.serve-card:hover{
  border-color:var(--purple-text); transform:translateY(-6px);
  box-shadow:0 18px 44px rgba(113,0,211,.14);
}
.serve-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:14px; margin-bottom:22px;
  background:#f3ebff; color:var(--purple-band);
  transition:background .2s ease, color .2s ease;
}
.serve-icon svg{ width:28px; height:28px; }
.serve-card:hover .serve-icon{ background:var(--purple-band); color:#fff; }
.serve-card h3{
  font-family:var(--font-head); font-weight:500; font-size:21px;
  color:var(--black); margin-bottom:11px;
}
.serve-card p{
  font-family:var(--font-body); font-weight:400; font-size:15px;
  color:var(--black); line-height:1.55;
}

.serve-footer{
  display:flex; align-items:center; justify-content:center; gap:28px;
  margin-top:50px; flex-wrap:wrap;
}
.serve-footer p{
  font-family:var(--font-body); font-weight:400; font-size:16px; color:var(--black);
}
.serve-cta{
  position:static; background:var(--purple-band); color:#fff;
  height:50px; padding:0 34px; font-size:16px;
}
.serve-cta:hover{ background:var(--black); color:#fff; }

/* ===================== OUR PROCESS (scroll-stack, normal flow) ===================== */
.proc-section{
  position:relative; background:#f4f3f7; width:100%;
  padding:110px 0;
}
.proc-layout{
  max-width:1500px; margin:0 auto; padding:0 60px;
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px;
  align-items:stretch;
}
/* LEFT — sticky detail panel */
.proc-left{ position:relative; }
.proc-left-inner{
  position:sticky; top:120px;
}
.journey-eyebrow{
  font-family:var(--font-head); font-weight:500; font-size:14px;
  letter-spacing:2px; text-transform:uppercase; color:var(--purple-text);
  margin-bottom:16px;
}
.journey-heading{
  font-family:var(--font-head); font-weight:500; font-size:50px; line-height:1.06;
  color:var(--black); margin-bottom:20px;
}
.journey-sub{
  font-family:var(--font-body); font-weight:400; font-size:17px;
  color:var(--black); line-height:1.6; margin-bottom:32px; max-width:420px;
}
.proc-progress{ margin-bottom:34px; max-width:420px; }
.proc-count{
  font-family:var(--font-head); font-weight:500; font-size:16px; color:var(--text-gray);
}
.proc-count b{ color:var(--purple-text); font-size:20px; }
.proc-bar{
  margin-top:12px; height:4px; border-radius:4px; background:#e0dce9; overflow:hidden;
}
.proc-bar span{
  display:block; height:100%; width:11%; border-radius:4px;
  background:var(--purple-band); transition:width .3s ease;
}
.journey-cta{
  position:static; display:inline-flex; background:var(--purple-band); color:#fff;
  height:54px; padding:0 38px; font-size:15px; letter-spacing:.5px;
  transition:background .25s ease;
}
.journey-cta:hover{ background:var(--black); }

/* RIGHT — stacking cards */
.proc-right{ position:relative; }
.proc-stack{ position:relative; }
.proc-card{
  position:sticky; top:140px;
  background:#fff; border:1px solid #e6e4ee; border-radius:22px;
  padding:44px 52px; display:flex; align-items:center; gap:44px;
  box-shadow:0 24px 50px rgba(33,0,80,.10);
  margin-bottom:30px;
  transform-origin:center top;
  will-change:transform;
}
.proc-card:last-child{ margin-bottom:0; }
.stack-num{
  flex:none; font-family:var(--font-head); font-weight:500;
  font-size:62px; line-height:1; color:var(--purple-text); opacity:.85;
  min-width:90px;
}
.stack-body h3{
  font-family:var(--font-head); font-weight:500; font-size:26px;
  color:var(--black); margin-bottom:10px;
}
.stack-body p{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--black); line-height:1.55;
}

/* ===================== NOT ALL AGENCIES (comparison) ===================== */
.compare-band{
  position:absolute; left:50%; transform:translateX(-50%);
  top:0px; width:1728px; height:669px; background:#f4f3f7;
}
.compare-wrap{
  position:absolute; left:50%; transform:translateX(-50%); top:110px;
  width:1180px;
}
.compare-head{ text-align:center; margin-bottom:40px; }
.compare-heading{
  font-family:var(--font-head); font-weight:500; font-size:38px;
  color:var(--black); margin-bottom:12px;
}
.compare-sub{
  font-family:var(--font-body); font-weight:400; font-size:16px; color:#666;
}
.compare-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start;
}
.compare-col{
  background:#fff; border:1px solid #e6e4ee; border-radius:18px;
  padding:10px 28px;
}
.compare-with{
  border:2px solid var(--purple-band);
  box-shadow:0 14px 40px rgba(113,0,211,.12);
}
.compare-col-title{
  font-family:var(--font-head); font-weight:500; font-size:20px;
  color:var(--black); padding:18px 0 6px;
}
.compare-list{ list-style:none; }
.compare-list li{
  display:flex; gap:13px; align-items:center;
  font-family:var(--font-body); font-weight:400; font-size:15px;
  color:#333; line-height:1.45; padding:13px 0;
  border-top:1px solid #ededf2;
}
.ci{
  flex:none; width:26px; height:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.ci svg{ width:15px; height:15px; }
.ci-x{ background:#fdeaea; color:#e3534e; }
.ci-check{ background:#e3f8e8; color:#22a447; }

/* ===================== WHAT OUR CLIENTS SAY ===================== */
.reviews-band{
  position:absolute; left:50%; transform:translateX(-50%);
  top:669px; width:1728px; height:982px; background:var(--purple-band);
}
.reviews-head{
  position:absolute; left:calc(50% - 750px); top:779px; width:1500px;
}
.reviews-eyebrow{
  display:flex; align-items:center; gap:16px;
  font-family:var(--font-head); font-weight:500; font-size:14px;
  letter-spacing:2px; text-transform:uppercase; color:#e9defb;
  margin-bottom:16px;
}
.eyebrow-line{ width:46px; height:2px; background:#e9defb; display:inline-block; }
.reviews-heading{
  font-family:var(--font-head); font-weight:500; font-size:56px; color:#fff;
}
.reviews-heading .accent-light{ color:#d9c4ff; }

/* marquee rows */
.reviews-marquee{
  position:absolute; left:0; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.reviews-row1{ top:934px; }
.reviews-row2{ top:1254px; }
.reviews-track{
  display:flex; gap:28px; width:max-content; padding:6px 14px;
  will-change:transform;
}
.track-rtl{ animation:rev-scroll-rtl 60s linear infinite; }
.track-ltr{ animation:rev-scroll-ltr 60s linear infinite; }
.reviews-marquee:hover .reviews-track{ animation-play-state:paused; }
@keyframes rev-scroll-rtl{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes rev-scroll-ltr{ from{transform:translateX(-50%);} to{transform:translateX(0);} }

.review-card{
  flex:none; width:420px; box-sizing:border-box;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:18px;
  padding:30px 32px; display:flex; flex-direction:column;
}
.review-stars{ display:flex; gap:3px; margin-bottom:18px; }
.review-stars svg{ width:15px; height:15px; }
.review-text{
  font-family:var(--font-body); font-weight:400; font-size:15.5px;
  color:#f2ecfb; line-height:1.6; margin-bottom:22px; flex:1;
}
.review-author{
  display:flex; align-items:center; gap:12px;
  padding-top:20px; border-top:1px solid rgba(255,255,255,.18);
}
.ra-avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:#fff; color:var(--purple-band);
  font-family:var(--font-head); font-weight:500; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.ra-name{ font-family:var(--font-head); font-weight:500; font-size:16px; color:#fff; }

/* ===================== BIG CALL TO ACTION ===================== */
.cta-band{
  position:absolute; left:50%; transform:translateX(-50%);
  top:1651px; width:1728px; height:722px; background:var(--purple-band);
}
.cta-wrap{
  position:absolute; left:50%; transform:translateX(-50%); top:1761px;
  width:1500px;
}
.cta-grid{
  background:#0a0a0c;
  background-image:
    radial-gradient(ellipse 55% 60% at 8% 92%, rgba(150,70,210,.85) 0%, rgba(120,55,180,.45) 28%, rgba(60,25,95,.12) 55%, transparent 72%),
    radial-gradient(ellipse 50% 45% at 50% 100%, rgba(190,135,225,.55) 0%, rgba(140,80,190,.28) 35%, transparent 65%),
    radial-gradient(ellipse 60% 55% at 78% 70%, rgba(120,70,160,.3) 0%, rgba(70,40,100,.12) 40%, transparent 68%),
    linear-gradient(135deg, #0c0c0e 0%, #0a0a0c 45%, #100a16 100%);
  border:1px solid var(--purple-text);
  border-radius:28px; padding:48px 76px;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
/* LEFT */
.cta-reviews{ display:flex; align-items:center; gap:16px; margin-bottom:26px; }
.cta-avatars{ display:flex; }
.cta-av{
  width:46px; height:46px; border-radius:50%; margin-left:-12px;
  border:2px solid #0c0c0e; object-fit:cover; display:block;
  background:var(--purple-band);
}
.cta-av:first-child{ margin-left:0; }
.cta-reviews-label{
  font-family:var(--font-head); font-weight:500; font-size:18px; color:var(--purple-text);
}
.cta-heading{
  font-family:var(--font-head); font-weight:500; font-size:54px; line-height:1.05;
  color:#fff; margin-bottom:34px; max-width:460px;
}
.cta-btn{
  position:static; display:inline-flex; gap:14px;
  background:#fff; color:var(--purple-band);
  height:60px; padding:0 34px; font-size:16px;
  transition:background .25s ease, color .25s ease;
}
.cta-btn:hover{ background:var(--purple-band); color:#fff; }
.cta-arrow{ display:flex; }
.cta-arrow svg{ width:22px; height:22px; }
/* RIGHT */
.cta-right{ display:flex; flex-direction:column; gap:20px; }
.cta-feature{ display:flex; gap:18px; align-items:flex-start; }
.cta-check{
  flex:none; width:30px; height:30px; border-radius:50%;
  background:#fff; color:var(--purple-band);
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.cta-check svg{ width:18px; height:18px; }
.cta-feature-body h3{
  font-family:var(--font-head); font-weight:500; font-size:21px; color:#fff; margin-bottom:8px;
}
.cta-feature-body p{
  font-family:var(--font-body); font-weight:400; font-size:15.5px;
  color:#9a9a9f; line-height:1.55; max-width:430px;
}

/* ===================== FAQ ===================== */
.faq-band{
  position:absolute; left:50%; transform:translateX(-50%);
  top:2373px; width:1728px; height:828px; background:var(--purple-band);
}
.faq-wrap{
  position:absolute; left:50%; transform:translateX(-50%); top:2483px;
  width:1300px;
}
.faq-head{ text-align:center; margin-bottom:48px; }
.faq-heading{
  font-family:var(--font-head); font-weight:500; font-size:46px;
  color:#fff; margin-bottom:16px;
}
.faq-sub{
  font-family:var(--font-body); font-weight:400; font-size:17px; color:#e9defb;
  max-width:620px; margin:0 auto; line-height:1.5;
}
.faq-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
.faq-item{
  background:#fff; border:1px solid transparent; border-radius:16px;
  padding:0 26px; height:fit-content;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open]{ box-shadow:0 14px 40px rgba(0,0,0,.18); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:26px 0;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-q{
  font-family:var(--font-head); font-weight:500; font-size:18px; color:var(--black); line-height:1.35;
}
.faq-icon{
  flex:none; position:relative; width:38px; height:38px; border-radius:50%;
  background:var(--purple-band);
}
.faq-icon::before, .faq-icon::after{
  content:""; position:absolute; background:#fff; left:50%; top:50%;
  transition:transform .25s ease, opacity .2s ease;
}
.faq-icon::before{ width:15px; height:2px; transform:translate(-50%,-50%); }
.faq-icon::after{ width:2px; height:15px; transform:translate(-50%,-50%); }
.faq-item[open] .faq-icon::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.faq-answer{
  font-family:var(--font-body); font-weight:400; font-size:15px;
  color:#000; line-height:1.6; padding:0 0 26px;
}

/* ===================== BIG PUREDIGITAL (dark band) ===================== */
.pd-big{
  position:absolute; left:50%; transform:translateX(-50%);
  top:3263px; width:1500px;
}
.pd-big svg{ width:100%; height:auto; display:block; }

.footer-rating{
  display:inline-flex; align-items:center; gap:14px;
}
.footer-rating svg{ display:block; }
.footer-avatars{ display:inline-flex; }
.footer-avatars img{
  width:34px; height:34px; border-radius:50%; object-fit:cover;
  border:2px solid #0a0a0c; margin-left:-10px; background:#333;
}
.footer-avatars img:first-child{ margin-left:0; }

/* ===================== SITE FOOTER ===================== */
.site-footer{
  position:absolute; left:50%; transform:translateX(-50%); top:3581px;
  width:1500px; color:#cfcfd4;
}
.footer-top{
  display:grid; grid-template-columns:1.1fr 1.4fr; gap:60px;
  padding-bottom:70px;
}
.footer-tagline{
  font-family:var(--font-head); font-weight:500; font-size:36px; line-height:1.15;
  color:#fff; margin-bottom:34px;
}
.footer-cols{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px;
}
.footer-col h4{
  font-family:var(--font-head); font-weight:500; font-size:17px; color:var(--purple-text); margin-bottom:22px;
}
.footer-col a{
  display:block; font-family:var(--font-body); font-weight:400; font-size:16px;
  color:#cfcfd4; text-decoration:none; line-height:1.4; margin-bottom:16px;
  transition:color .2s ease;
}
.footer-col a:hover{ color:var(--purple-text); }
.footer-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.14);
}
.footer-bar p{
  font-family:var(--font-body); font-weight:400; font-size:14px; color:#888;
}
.footer-legal{ display:flex; gap:26px; }
.footer-legal a{
  font-family:var(--font-body); font-weight:400; font-size:14px; color:#888;
  text-decoration:none; transition:color .2s ease;
}
.footer-legal a:hover{ color:#fff; }

/* ===================== RESPONSIVE SCALING ===================== */
/* Scale the whole fixed canvas down on narrower viewports so it stays
   pixel-faithful to the Figma at any screen size. */
@media (max-width:1728px){
  .stage{ transform: scale(calc(100vw / 1728)); }
  .stage-wrap{ height: calc(1538px * (100vw / 1728)); }
}


/* ===== split-canvas heights =====
   stage-b now ends after the FAQ (top 2373 + height 828 = 3201). The dark
   footer band lives below in normal flow (.site-bottom), with the new
   pre-footer CTA and blog sections between. */
.stage-b{ height:3201px; }
@media (max-width:1728px){
  .stage-b{ transform: scale(calc(100vw / 1728)); }
  .stage-wrap-b{ height: calc(3201px * (100vw / 1728)); }
}

/* ===================== PRE-FOOTER CTA ===================== */
.endcta{
  position:relative; overflow:hidden;
  background:#fff;
  padding:120px 24px 96px; text-align:center;
}
.endcta-inner{ max-width:1400px; margin:0 auto; }
.endcta-eyebrow{
  font-family:var(--font-head); font-weight:500; font-size:14px;
  letter-spacing:2px; text-transform:uppercase; color:var(--purple-text); margin-bottom:20px;
}
.endcta-heading{
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(34px,4.4vw,62px); line-height:1.08; color:var(--black);
  max-width:920px; margin:0 auto 22px;
}
.endcta-sub{
  font-family:var(--font-body); font-weight:400; font-size:18px;
  color:#555; line-height:1.6; max-width:640px; margin:0 auto 40px;
}
.endcta-btn{
  position:static; display:inline-flex; background:var(--purple-band); color:#fff;
  height:58px; padding:0 42px; font-size:16px; letter-spacing:.5px;
}
.endcta-btn:hover{ background:#000; color:#fff; }

/* partner strip under the CTA */
.endcta-partners{ margin-top:72px; }
.endcta-partners-label{
  font-family:var(--font-head); font-weight:500; font-size:13px;
  letter-spacing:1.5px; text-transform:uppercase; color:#9a9aa5; margin-bottom:34px;
}
.partner-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:48px 72px; max-width:1240px; margin:0 auto;
}
.partner-strip img{
  height:38px; width:auto; object-fit:contain;
  filter:grayscale(100%); opacity:.55;
  transition:filter .25s ease, opacity .25s ease;
}
.partner-strip img:hover{ filter:grayscale(0); opacity:1; }

/* ===================== LATEST INSIGHTS (BLOG) ===================== */
.blog-section{ background:#fff; padding:110px 24px; }
.blog-inner{ max-width:1400px; margin:0 auto; }
.blog-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; margin-bottom:54px; flex-wrap:wrap;
}
.blog-eyebrow{
  font-family:var(--font-head); font-weight:500; font-size:14px;
  letter-spacing:2px; text-transform:uppercase; color:var(--purple-text); margin-bottom:14px;
}
.blog-heading{
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(34px,3.6vw,52px); color:var(--black); margin-bottom:14px;
}
.blog-sub{
  font-family:var(--font-body); font-weight:400; font-size:17px;
  color:#555; max-width:520px; line-height:1.55;
}
.blog-viewall{
  position:static; display:inline-flex; background:var(--purple-band); color:#fff;
  height:52px; padding:0 30px; font-size:15px; white-space:nowrap;
}
.blog-viewall:hover{ background:#000; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.blog-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid #e6e4ee; border-radius:18px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 44px rgba(113,0,211,.14); border-color:var(--purple-text);
}
.blog-thumb{
  position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#f3ebff;
}
.blog-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.blog-card:hover .blog-thumb img{ transform:scale(1.05); }
.blog-thumb-fallback{
  position:absolute; inset:0; display:block;
  background:linear-gradient(135deg,#b388ff 0%, #7100d3 100%);
}
.blog-tag{
  position:absolute; left:16px; top:16px;
  background:rgba(255,255,255,.92); color:var(--purple-band);
  font-family:var(--font-head); font-weight:500; font-size:12px; letter-spacing:.5px;
  padding:7px 14px; border-radius:50px;
}
.blog-body{ padding:26px 26px 30px; display:flex; flex-direction:column; flex:1; }
.blog-meta{ font-family:var(--font-body); font-weight:400; font-size:13px; color:#8a8a93; margin-bottom:12px; }
.blog-title{ font-family:var(--font-head); font-weight:500; font-size:21px; line-height:1.3; margin-bottom:18px; }
.blog-title a{ color:var(--black); text-decoration:none; transition:color .2s ease; }
.blog-title a:hover{ color:var(--purple-text); }
.blog-readmore{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-head); font-weight:500; font-size:14px;
  color:var(--purple-band); text-decoration:none;
}
.blog-readmore svg{ width:16px; height:16px; transition:transform .2s ease; }
.blog-readmore:hover svg{ transform:translateX(4px); }

/* ===================== LATEST CASE STUDIES ===================== */
.cases-section{ background:#f4f3f7; padding:110px 24px; }
.cases-inner{ max-width:1400px; margin:0 auto; }
.cases-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:30px; margin-bottom:54px; flex-wrap:wrap;
}
.cases-eyebrow{
  font-family:var(--font-head); font-weight:500; font-size:14px;
  letter-spacing:2px; text-transform:uppercase; color:var(--purple-text); margin-bottom:14px;
}
.cases-heading{
  font-family:var(--font-head); font-weight:500;
  font-size:clamp(34px,3.6vw,52px); color:var(--black); margin-bottom:14px;
}
.cases-sub{
  font-family:var(--font-body); font-weight:400; font-size:17px;
  color:#555; max-width:620px; line-height:1.55;
}
.cases-viewall{
  position:static; display:inline-flex; background:var(--purple-band); color:#fff;
  height:52px; padding:0 30px; font-size:15px; white-space:nowrap;
}
.cases-viewall:hover{ background:#000; }
.cases-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.case-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid #e6e4ee; border-radius:18px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.case-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 44px rgba(113,0,211,.14); border-color:var(--purple-text);
}
.case-media{
  position:relative; aspect-ratio:16/11; overflow:hidden;
  background:linear-gradient(150deg,#8f4be8 0%, #5f00b0 100%);
}
.case-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* dark wash on the lower part of the media so the big number stays legible on any video */
.case-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(10,8,18,.80) 0%, rgba(10,8,18,.32) 40%, rgba(10,8,18,0) 64%);
}
.case-play{
  position:absolute; left:50%; top:42%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; border:none; cursor:pointer; z-index:2;
  background:rgba(255,255,255,.92); color:var(--purple-band);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
  transition:transform .2s ease, background .2s ease;
}
.case-play svg{ width:30px; height:30px; margin-left:1px; }
.case-play:hover{ transform:translate(-50%,-50%) scale(1.08); background:#fff; }
.case-card.is-playing .case-play{ display:none; }

/* BIG metric overlaid bottom-left of the media (numero-style) */
.case-metric{
  position:absolute; left:28px; right:28px; bottom:26px; z-index:2; color:#fff;
  font-family:var(--font-body); font-weight:400;
  font-size:clamp(15px,1.3vw,19px); line-height:1.3;
}
.case-metric b{
  display:block; font-family:var(--font-head); font-weight:500;
  font-size:clamp(46px,4.8vw,72px); line-height:.98; letter-spacing:-1.5px;
  color:#fff; margin-bottom:6px;
}
.case-card.is-playing .case-metric{ opacity:0; }

.case-body{ padding:28px 30px 30px; display:flex; flex-direction:column; flex:1; }
.case-tag{
  align-self:flex-start; font-family:var(--font-head); font-weight:500;
  font-size:12px; letter-spacing:.5px; color:var(--purple-band);
  background:#f3ebff; padding:6px 12px; border-radius:50px; margin-bottom:16px;
}
.case-title{ font-family:var(--font-head); font-weight:500; font-size:26px; color:var(--black); margin-bottom:12px; }
.case-desc{
  font-family:var(--font-body); font-weight:400; font-size:15px; color:#555; line-height:1.6;
  margin-bottom:24px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.case-link{
  margin-top:auto; align-self:flex-start;
  font-family:var(--font-head); font-weight:500; font-size:14px;
  color:var(--purple-band); text-decoration:none;
  border:1.5px solid #d9d2e6; border-radius:50px; padding:13px 28px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.case-link:hover{ background:var(--purple-band); color:#fff; border-color:var(--purple-band); }

/* ===================== FOOTER REVEAL ===================== */
/* The page content is an opaque panel above the footer; the footer is pinned
   to the bottom of the viewport behind it. As you scroll to the end, the panel
   slides up and uncovers the footer. JS (main.js) reserves the footer's height
   as margin so there's room to reveal it. */
.reveal-content{ position:relative; z-index:1; background:#fff; }
.site-bottom{
  position:fixed; left:0; right:0; bottom:0; z-index:0;
  background:#0a0a0c; padding:80px 0 44px;
}
@media (prefers-reduced-motion: reduce){
  /* keep it static (no reveal) for reduced-motion users */
  .site-bottom{ position:static; }
  .reveal-content{ margin-bottom:0 !important; }
}
.site-bottom .pd-big{
  position:static; left:auto; top:auto; transform:none;
  width:min(1500px,90vw); margin:0 auto 56px;
}
.site-bottom .site-footer{
  position:static; left:auto; top:auto; transform:none;
  width:min(1500px,90vw); margin:0 auto;
}

/* ----- responsive tweaks for the new flow sections ----- */
@media (max-width:1000px){
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .cases-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .blog-grid{ grid-template-columns:1fr; }
  .cases-grid{ grid-template-columns:1fr; }
  .cases-section{ padding:72px 20px; }
  .endcta{ padding:80px 20px; }
  .blog-section{ padding:72px 20px; }
  .footer-top{ grid-template-columns:1fr; gap:40px; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
}

/* =========================================================================
   SERVICE PAGE (page-website-design.php and siblings) — all normal flow
   ========================================================================= */
.svc-wrap{ max-width:1240px; margin:0 auto; padding:0 24px; }
.svc-eyebrow{ font-family:var(--font-head); font-weight:500; font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--purple-text); margin-bottom:16px; }
.svc-h2{ font-family:var(--font-head); font-weight:500; font-size:clamp(30px,3.4vw,46px); line-height:1.1; color:var(--black); margin-bottom:16px; }
.svc-h3{ font-family:var(--font-head); font-weight:500; font-size:22px; color:var(--black); margin-bottom:10px; }
.svc-lead{ font-family:var(--font-body); font-weight:400; font-size:17px; line-height:1.6; color:#555; max-width:640px; }
.svc-body{ font-family:var(--font-body); font-weight:400; font-size:15.5px; line-height:1.65; color:#555; }
.svc-btn{ position:static; display:inline-flex; background:var(--purple-band); color:#fff; height:54px; padding:0 32px; font-size:15px; letter-spacing:.3px; align-items:center; }
.svc-btn:hover{ background:#000; color:#fff; }
.svc-btn-outline{ position:static; display:inline-flex; align-items:center; background:#fff; color:var(--black); border:1.5px solid #d9d2e6; height:54px; padding:0 30px; font-size:15px; white-space:nowrap; }
.svc-btn-outline:hover{ border-color:var(--purple-band); color:var(--purple-band); }
.svc-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:500; font-size:15px; color:var(--purple-band); text-decoration:none; white-space:nowrap; }
.svc-link svg{ width:16px; height:16px; transition:transform .2s ease; }
.svc-link:hover svg{ transform:translateX(4px); }
.svc-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:48px; flex-wrap:wrap; }
.svc-head-center{ justify-content:center; text-align:center; }
.svc-head-center .svc-lead{ margin-left:auto; margin-right:auto; }
.svc-center-cta{ text-align:center; margin-top:44px; }

/* hero */
.svc-hero{ background:#fff; padding:90px 24px 70px; }
.svc-hero-inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.svc-hero-title{ font-family:var(--font-head); font-weight:500; font-size:clamp(36px,4.4vw,60px); line-height:1.06; color:var(--black); margin-bottom:22px; }
.svc-hero-title .accent{ color:var(--purple-text); }
.svc-hero-sub{ font-family:var(--font-body); font-weight:400; font-size:18px; line-height:1.6; color:#444; margin-bottom:34px; max-width:560px; }
.svc-hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.svc-hero-media{ position:relative; aspect-ratio:4/3; border-radius:22px; overflow:hidden; background:linear-gradient(150deg,#8f4be8,#5f00b0); box-shadow:0 30px 70px rgba(113,0,211,.18); }
.svc-hero-badge{ position:absolute; left:22px; bottom:22px; background:rgba(10,8,18,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; padding:12px 18px; border-radius:14px; font-family:var(--font-body); font-weight:400; font-size:14px; }
.svc-hero-badge b{ font-family:var(--font-head); font-weight:500; font-size:22px; color:#d9c4ff; margin-right:6px; }

/* Website Design hero: figure wrapper + loading-speed badge + scores card */
.svc-hero-figure{ position:relative; }
.svc-hero-figure .svc-hero-media::after{ content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; background:linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.45) 100%); pointer-events:none; }
.svc-hero-figure .svc-hero-badge{ left:22px; bottom:78px; z-index:5; }
@media (max-width:560px){ .svc-hero-figure .svc-hero-badge{ left:14px; bottom:64px; font-size:13px; padding:10px 14px; } }
.svc-hero-speed{ position:absolute; right:34px; bottom:72px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:2px; color:#fff; pointer-events:none; }
.svc-speed-label{ font-family:var(--font-head); font-weight:600; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.35); }
.svc-speed-arrow{ display:block; align-self:flex-end; margin-right:6px; }
.svc-speed-arrow svg{ display:block; width:52px; height:52px; filter:drop-shadow(0 2px 5px rgba(0,0,0,.3)); }

.svc-hero-scores{ position:absolute; left:50%; transform:translateX(-50%); bottom:-26px; z-index:4; display:flex; gap:14px; align-items:flex-start; background:#fff; border-radius:16px; padding:14px 20px; box-shadow:0 20px 45px rgba(0,0,0,.22); max-width:calc(100% - 20px); }
.svc-hero-scores .score{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.score-ring{ width:44px; height:44px; border-radius:50%; border:3px solid #0cce6b; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:600; font-size:16px; color:#0a8a49; }
.score-lbl{ font-family:var(--font-body); font-size:11px; color:#555; white-space:nowrap; }
.score-pill{ height:44px; padding:0 14px; border-radius:22px; display:inline-flex; align-items:center; gap:6px; background:#eafaf0; color:#0a8a49; font-family:var(--font-head); font-weight:600; font-size:15px; }
.score-pill .dot{ width:8px; height:8px; border-radius:50%; background:#0cce6b; }

@media (max-width:900px){ .svc-hero-scores{ bottom:-22px; } }
@media (max-width:560px){
  .svc-hero-speed{ display:none; }
  .svc-hero-scores{ gap:8px; padding:10px 12px; }
  .score-ring{ width:34px; height:34px; font-size:13px; border-width:2px; }
  .score-pill{ height:34px; font-size:12px; padding:0 9px; }
  .score-lbl{ font-size:9px; }
}

/* trusted by */
.trust-section{ background:#fff; padding:20px 24px 70px; text-align:center; }
.trust-label{ font-family:var(--font-head); font-weight:500; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:#9a9aa5; margin-bottom:28px; }

/* welcome + stats */
.svc-stats{ background:#f4f3f7; padding:96px 24px; }
.svc-stats-head{ text-align:center; max-width:820px; margin:0 auto 54px; }
.svc-stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:900px; margin:0 auto; }
.svc-stat{ background:#fff; border:1px solid #e6e4ee; border-radius:18px; padding:40px 30px; text-align:center; }
.svc-stat-num{ display:block; font-family:var(--font-head); font-weight:500; font-size:clamp(40px,4vw,58px); color:var(--purple-band); line-height:1; margin-bottom:10px; }
.svc-stat-label{ font-family:var(--font-body); font-weight:400; font-size:15px; color:#555; }

/* problem */
.svc-problem{ background:#fff; padding:96px 24px; }
.svc-problem-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.svc-problem-text .svc-btn{ margin-top:24px; }
.svc-problem-text .svc-h3{ }
.svc-problem-list{ background:#faf8ff; border:1px solid #ece4fb; border-radius:20px; padding:34px 32px; }
.svc-list-title{ font-family:var(--font-head); font-weight:500; font-size:15px; letter-spacing:.5px; text-transform:uppercase; color:var(--purple-text); margin-bottom:20px; }
.svc-problem-item{ display:flex; align-items:flex-start; gap:14px; font-family:var(--font-body); font-weight:400; font-size:15.5px; color:#333; padding:12px 0; border-top:1px solid #ece4fb; }
.svc-problem-item:first-of-type{ border-top:none; }
.svc-x{ flex:none; width:24px; height:24px; border-radius:7px; background:#fdeaea; color:#e3534e; display:flex; align-items:center; justify-content:center; }
.svc-x svg{ width:13px; height:13px; }

/* our work */
.svc-work{ background:#f4f3f7; padding:96px 24px; }
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.work-card{ background:#fff; border:1px solid #e6e4ee; border-radius:18px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.work-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(113,0,211,.14); }
.work-media{ aspect-ratio:16/11; position:relative; overflow:hidden; background:linear-gradient(150deg,#8f4be8,#5f00b0); }
.work-body{ padding:24px 26px 28px; }
.work-place{ font-family:var(--font-head); font-weight:500; font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--purple-text); }
.work-title{ font-family:var(--font-head); font-weight:500; font-size:22px; color:var(--black); margin:8px 0 6px; }
.work-tag{ font-family:var(--font-body); font-weight:400; font-size:15px; color:#666; }

/* process (numbered grid) */
.svc-process{ background:#fff; padding:96px 24px; }
.proc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.proc-step{ background:#fff; border:1px solid #e6e4ee; border-radius:16px; padding:30px 28px; transition:border-color .2s ease, transform .2s ease; }
.proc-step:hover{ border-color:var(--purple-text); transform:translateY(-4px); }
.proc-step-num{ font-family:var(--font-head); font-weight:500; font-size:34px; color:var(--purple-text); opacity:.5; }
.proc-step-title{ font-family:var(--font-head); font-weight:500; font-size:20px; color:var(--black); margin:10px 0 8px; }
.proc-step-desc{ font-family:var(--font-body); font-weight:400; font-size:14.5px; line-height:1.6; color:#555; }

/* pricing */
.svc-pricing{ background:#f4f3f7; padding:96px 24px; }
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:stretch; }
.price-card{ position:relative; background:#fff; border:1px solid #e6e4ee; border-radius:20px; padding:40px 34px; display:flex; flex-direction:column; }
.price-card-popular{ border:2px solid var(--purple-band); box-shadow:0 20px 50px rgba(113,0,211,.14); }
.price-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--purple-band); color:#fff; font-family:var(--font-head); font-weight:500; font-size:12px; letter-spacing:.5px; padding:6px 16px; border-radius:50px; }
.price-name{ font-family:var(--font-head); font-weight:500; font-size:24px; color:var(--black); }
.price-note{ font-family:var(--font-body); font-weight:400; font-size:14px; color:#888; margin:4px 0 18px; }
.price-amount{ font-family:var(--font-head); font-weight:500; font-size:40px; color:var(--purple-band); margin-bottom:24px; }
.price-amount span{ font-family:var(--font-body); font-weight:400; font-size:14px; color:#888; }
.price-feats{ list-style:none; margin:0 0 28px; padding:0; flex:1; }
.price-feats li{ font-family:var(--font-body); font-weight:400; font-size:15px; color:#333; padding:10px 0; border-top:1px solid #ededf2; }
.price-btn{ position:static; display:inline-flex; align-items:center; justify-content:center; background:var(--purple-band); color:#fff; height:50px; font-size:15px; }
.price-btn:hover{ background:#000; }
.price-card:not(.price-card-popular) .price-btn{ background:#fff; color:var(--purple-band); border:1.5px solid #d9d2e6; }
.price-card:not(.price-card-popular) .price-btn:hover{ background:var(--purple-band); color:#fff; border-color:var(--purple-band); }

/* pricing philosophy */
.svc-phil{ background:#fff; padding:96px 24px; }
.phil-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.phil-card{ background:#faf8ff; border:1px solid #ece4fb; border-radius:18px; padding:34px 30px; }

/* comparison */
.svc-compare{ background:#f4f3f7; padding:96px 24px; }
.compare2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.compare2-col{ background:#fff; border:1px solid #e6e4ee; border-radius:18px; padding:14px 30px 26px; }
.compare2-with{ border:2px solid var(--purple-band); box-shadow:0 14px 40px rgba(113,0,211,.12); }
.compare2-title{ font-family:var(--font-head); font-weight:500; font-size:20px; color:var(--black); padding:20px 0 6px; }
.compare2-col ul{ list-style:none; margin:0; padding:0; }
.compare2-col li{ display:flex; gap:13px; align-items:center; font-family:var(--font-body); font-weight:400; font-size:15px; color:#333; line-height:1.45; padding:14px 0; border-top:1px solid #ededf2; }

/* Red / green solid-box comparison variant (titles sit ABOVE the boxes) */
.compare2-rg{ gap:34px; }
.compare2-rg .compare2-title{ font-family:var(--font-head); font-weight:600; font-size:24px; padding:0 0 16px; margin:0; }
.compare2-rg .compare2-title-without{ color:#c0392b; }
.compare2-rg .compare2-title-with{ color:#3f7d22; }
.compare2-rg .compare2-col{ background:#c0392b; border:none; box-shadow:none; color:#fff; border-radius:22px; }
.compare2-rg .compare2-with{ background:#3f7d22; border:none; box-shadow:none; }
.compare2-rg .compare2-col li{ color:#fff; font-size:16px; padding:17px 0; border-top:1px solid rgba(255,255,255,.18); }
.compare2-rg .compare2-col li:first-child{ border-top:none; }
.compare2-rg .compare2-col .ci-x,
.compare2-rg .compare2-col .ci-check{ color:#fff; }

/* core services */
.svc-core{ background:#fff; padding:96px 24px; }
.core-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.core-card{ background:#fff; border:1px solid #e6e4ee; border-radius:18px; padding:32px 30px; transition:border-color .2s ease, transform .2s ease; }
.core-card:hover{ border-color:var(--purple-text); transform:translateY(-4px); }
.core-check{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; background:#f3ebff; color:var(--purple-band); margin-bottom:18px; }
.core-check svg{ width:22px; height:22px; }

/* seo + aeo + geo */
.svc-seo{ background:#f4f3f7; padding:96px 24px; }
.seo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:960px; margin:0 auto; }
.seo-chip{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid #e6e4ee; border-radius:14px; padding:18px 22px; font-family:var(--font-head); font-weight:500; font-size:16px; color:var(--black); }
.seo-chip .core-check{ width:34px; height:34px; margin:0; border-radius:9px; }
.seo-chip .core-check svg{ width:17px; height:17px; }

/* industries */
.svc-industries{ background:#fff; padding:96px 24px; }
.ind-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ind-card{ background:#fff; border:1px solid #ececf1; border-radius:18px; padding:32px 26px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ind-card:hover{ border-color:var(--purple-text); transform:translateY(-6px); box-shadow:0 18px 44px rgba(113,0,211,.12); }
.ind-icon{ display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:14px; background:#f3ebff; color:var(--purple-band); margin-bottom:20px; }
.ind-icon svg{ width:26px; height:26px; }
.ind-title{ font-family:var(--font-head); font-weight:500; font-size:20px; color:var(--black); margin-bottom:9px; }
.ind-desc{ font-family:var(--font-body); font-weight:400; font-size:14.5px; line-height:1.55; color:#555; }

/* faq */
.svc-faq{ background:#f4f3f7; padding:96px 24px; }
.faq2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.faq2-item{ background:#fff; border:1px solid transparent; border-radius:16px; padding:0 26px; height:fit-content; transition:box-shadow .2s ease; }
.faq2-item[open]{ box-shadow:0 14px 40px rgba(0,0,0,.08); }
.faq2-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:24px 0; }
.faq2-item summary::-webkit-details-marker{ display:none; }
.faq2-q{ font-family:var(--font-head); font-weight:500; font-size:17px; color:var(--black); line-height:1.35; }
.faq2-icon{ flex:none; position:relative; width:34px; height:34px; border-radius:50%; background:var(--purple-band); }
.faq2-icon::before,.faq2-icon::after{ content:""; position:absolute; background:#fff; left:50%; top:50%; transition:transform .25s ease, opacity .2s ease; }
.faq2-icon::before{ width:13px; height:2px; transform:translate(-50%,-50%); }
.faq2-icon::after{ width:2px; height:13px; transform:translate(-50%,-50%); }
.faq2-item[open] .faq2-icon::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.faq2-a{ font-family:var(--font-body); font-weight:400; font-size:15px; color:#333; line-height:1.65; padding:0 0 24px; }

/* split image sections */
.svc-split{ background:#fff; padding:80px 24px; }
.svc-split-alt{ background:#f4f3f7; }
.svc-split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.svc-split-text .svc-btn{ margin-top:24px; }
.svc-split-media{ aspect-ratio:4/3; border-radius:22px; overflow:hidden; background:linear-gradient(150deg,#8f4be8,#5f00b0); box-shadow:0 24px 60px rgba(113,0,211,.16); }

/* service page responsive */
@media (max-width:1000px){
  .svc-hero-inner{ grid-template-columns:1fr; gap:40px; }
  .svc-problem-grid,.svc-split-grid,.compare2-grid,.faq2-grid{ grid-template-columns:1fr; }
  .svc-stats-grid,.work-grid,.proc-grid,.price-grid,.phil-grid,.core-grid,.seo-grid{ grid-template-columns:1fr 1fr; }
  .ind-grid{ grid-template-columns:1fr 1fr; }
  .svc-split-alt .svc-split-media{ order:-1; }
}
@media (max-width:640px){
  .svc-stats-grid,.work-grid,.proc-grid,.price-grid,.phil-grid,.core-grid,.seo-grid,.ind-grid{ grid-template-columns:1fr; }
  .svc-hero,.svc-stats,.svc-problem,.svc-work,.svc-process,.svc-pricing,.svc-phil,.svc-compare,.svc-core,.svc-seo,.svc-industries,.svc-faq{ padding-left:20px; padding-right:20px; }
}

/* ===================== SHARED SITE HEADER (non-home pages) ===================== */
.site-header{ position:sticky; top:0; z-index:50; background:var(--purple-band); }
.site-header-inner{ position:relative; max-width:1400px; margin:0 auto; padding:0 24px; height:82px; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.site-logo{ flex:none; display:block; }
.site-logo img{ height:34px; width:auto; display:block; filter:brightness(0) invert(1); } /* render dark logo white on purple */
.site-nav{ position:absolute; inset:0; margin:auto; width:max-content; height:max-content; }
.site-menu{ list-style:none; display:flex; align-items:center; justify-content:center; gap:34px; margin:0; padding:0; }
.site-menu li{ margin:0; }
.site-menu a{ font-family:var(--font-head); font-weight:500; font-size:16px; color:#fff; text-decoration:none; opacity:.9; transition:opacity .2s ease; white-space:nowrap; }
.site-menu a:hover,.site-menu .current-menu-item>a{ opacity:1; }
.site-header-right{ display:flex; align-items:center; gap:22px; flex:none; }
.site-phone{ font-family:var(--font-head); font-weight:500; font-size:15px; color:#fff; text-decoration:none; opacity:.9; }
.site-phone:hover{ opacity:1; }
.site-cta{ display:inline-flex; align-items:center; height:44px; padding:0 24px; border-radius:50px; background:#fff; color:var(--purple-band); font-family:var(--font-head); font-weight:500; font-size:14px; letter-spacing:.4px; text-decoration:none; white-space:nowrap; transition:background .2s ease, color .2s ease; }
.site-cta:hover{ background:#000; color:#fff; }
@media (max-width:860px){ .site-nav,.site-phone{ display:none; } }

/* ===================== SERVICE HERO — purple ===================== */
.svc-hero{
  background:#5f00b0;
  background-image:
    radial-gradient(ellipse 55% 75% at 12% 15%, rgba(186,107,255,.55) 0%, transparent 60%),
    radial-gradient(ellipse 55% 70% at 90% 92%, rgba(40,6,80,.55) 0%, transparent 60%),
    linear-gradient(135deg,#7d12e0 0%, #5f00b0 100%);
}
.svc-hero .svc-eyebrow{ color:#e9defb; }
.svc-hero-title{ color:#fff; }
.svc-hero-title .accent{ color:#d9c4ff; }
.svc-hero-sub{ color:#ede6fb; }
.svc-hero .hero-btn-primary{ background:#fff; color:var(--purple-band); }
.svc-hero .hero-btn-primary:hover{ background:#000; color:#fff; }
.svc-hero .hero-btn-secondary{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.svc-hero .hero-btn-secondary:hover{ background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }
.svc-hero-media{ background:linear-gradient(150deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 70px rgba(0,0,0,.28); }

/* ===================== PARALLAX SHOWCASE ===================== */
.svc-parallax{
  position:relative; height:440px;
  background-color:#2a1245;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-attachment:fixed;
}
.svc-parallax-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,8,40,.25), rgba(20,8,40,.45)); }
@media (max-width:860px){ .svc-parallax{ background-attachment:scroll; height:300px; } }

/* ===================== TRUSTED-BY MARQUEE ===================== */
.trust-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.trust-track{ display:flex; align-items:center; gap:64px; width:max-content; animation:marquee-scroll 42s linear infinite; will-change:transform; }
.trust-marquee:hover .trust-track{ animation-play-state:paused; }
.trust-track img{ height:34px; width:auto; object-fit:contain; flex:none; filter:grayscale(100%); opacity:.6; }

/* ---- v2.4.1: white nav bar, breadcrumbs, in-hero trusted bar ---- */
.site-header{ background:#fff; border-bottom:1px solid #ececf1; }
.site-logo img{ filter:none; height:32px; }
.site-menu a{ color:var(--black); opacity:1; }
.site-menu a:hover,.site-menu .current-menu-item>a{ color:var(--purple-text); }
.site-phone{ color:var(--black); opacity:1; }
.site-phone:hover{ color:var(--purple-text); }
.site-cta{ background:var(--purple-band); color:#fff; }
.site-cta:hover{ background:#000; color:#fff; }

/* breadcrumbs (on the purple hero) */
.svc-crumbs{ font-family:var(--font-head); font-weight:500; font-size:15px; margin-bottom:24px; display:flex; align-items:center; flex-wrap:wrap; }
.svc-crumbs a{ color:rgba(255,255,255,.72); text-decoration:none; }
.svc-crumbs a:hover{ color:#fff; }
.svc-crumbs .sep{ color:rgba(255,255,255,.4); margin:0 10px; }
.svc-crumbs .current{ color:#d9c4ff; }

/* trusted bar pinned to the bottom of the hero */
.svc-hero{ padding-bottom:44px; }
.svc-hero-trust{ max-width:1240px; margin:52px auto 0; padding:26px 24px 0; border-top:1px solid rgba(255,255,255,.16); display:flex; align-items:center; gap:44px; }
.svc-trust-label{ flex:none; font-family:var(--font-head); font-weight:500; font-size:14px; letter-spacing:.5px; color:rgba(255,255,255,.75); white-space:nowrap; }
.svc-trust-logos{ display:flex; align-items:center; justify-content:space-between; gap:40px; flex:1; flex-wrap:wrap; }
.svc-trust-logos img{ height:28px; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.85; }
@media (max-width:820px){ .svc-hero-trust{ flex-direction:column; align-items:flex-start; gap:18px; } .svc-trust-logos{ justify-content:flex-start; gap:30px; } }

/* ---- v2.4.3: popped "i2D Difference" box + red boxed-X icons ---- */
.svc-diff-box{ margin-top: 28px; padding: 20px 32px; border: 1px solid #ece4fb; border-radius: 18px; background: #f3ebff; }
.svc-diff-box .svc-h3{ margin-bottom:10px; }
.svc-diff-box .svc-btn{ margin-top:22px; }

/* red boxed-X cross icons (problem list + comparison "without") */
.svc-x{ background:transparent; width:26px; height:26px; color:#e3534e; }
.svc-x svg{ width:26px; height:26px; }
.compare2-without .ci-x{ background:transparent; width:26px; height:26px; color:#e3534e; }
.compare2-without .ci-x svg{ width:26px; height:26px; }

/* ---- v2.4.4: green boxed-check tick (comparison "with") ---- */
.compare2-with .ci-check{ background:transparent; width:26px; height:26px; color:#22a447; }
.compare2-with .ci-check svg{ width:26px; height:26px; }

/* ---- v2.5.0: Welcome/stats as two columns (left text, right big numbers) ---- */
.svc-stats-2col{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.svc-stats-2col .svc-stats-head{ text-align:left; max-width:none; margin:0; }
.svc-stats-list{ display:flex; flex-direction:column; gap:18px; }
.svc-stats-list .svc-stat{ display:flex; align-items:center; gap:28px; text-align:left; padding:24px 34px; }
.svc-stats-list .svc-stat-num{ display:block; margin:0; line-height:1; font-size:clamp(52px,4.6vw,76px); min-width:150px; }
.svc-stats-list .svc-stat-label{ font-size:16px; color:#555; }
@media (max-width:900px){
  .svc-stats-2col{ grid-template-columns:1fr; gap:40px; }
  .svc-stats-list .svc-stat-num{ min-width:120px; }
}

/* ---- v2.5.1: right numbers without cards; lighter, smaller "+" ---- */
.svc-stats-list .svc-stat{ background:transparent; border:none; border-radius:0; box-shadow:none; padding:16px 0; }
.svc-stats-list .svc-stat + .svc-stat{ border-top:1px solid #e3ddf0; }
.svc-plus{ font-size:.5em; font-weight:400; opacity:.5; margin-left:2px; }

/* ---- v2.6.0: 3-up website showcase with scroll parallax ---- */
.svc-showcase{ background:#0a0a0c; padding:80px 24px; }
.svc-showcase-inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.showcase-frame{ height:540px; border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.showcase-img{ width:100%; height:auto; display:block; will-change:transform; }
@media (max-width:900px){ .svc-showcase-inner{ grid-template-columns:1fr; max-width:460px; } .showcase-frame{ height:460px; } }
@media (prefers-reduced-motion: reduce){ .showcase-img{ transform:none !important; } }

/* ---- v2.7.0: rotated scrolling image wall (replaces flat showcase) ---- */
.svc-wall{ position:relative; height:640px; overflow:hidden; background:#0a0a0c; }
.svc-wall-rot{
  position:absolute; top:50%; left:50%;
  width:150%; height:180%;
  transform:translate(-50%,-50%) rotate(-8deg);
  display:flex; justify-content:center; gap:26px;
}
.wall-col{ display:flex; flex-direction:column; gap:26px; flex:1 1 0; min-width:0; max-width:340px; will-change:transform; }
.wall-col img{ width:100%; height:auto; display:block; border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,.55); }
.svc-wall-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(95,0,176,.6) 0%, rgba(95,0,176,0) 24%, rgba(95,0,176,0) 76%, rgba(95,0,176,.6) 100%),
    linear-gradient(180deg, rgba(10,8,18,.55) 0%, rgba(10,8,18,0) 22%, rgba(10,8,18,0) 78%, rgba(10,8,18,.55) 100%);
}
@media (max-width:640px){ .svc-wall{ height:460px; } }

/* ---- v2.7.2: lead-in sentence above the problem-section CTA ---- */
.svc-cta-line{ font-family:var(--font-head); font-weight:500; font-size:clamp(20px,2vw,26px); color:var(--black); margin-bottom:22px; }

/* ---- v2.8.0: process as a vertical numbered timeline (i2d "Our SEO Strategy" style) ---- */
.proc-tl{ position:relative; max-width:860px; margin:0 auto; }
.proc-tl-step{ position:relative; display:grid; grid-template-columns:66px 1fr; gap:30px; padding-bottom:32px; }
.proc-tl-step:last-child{ padding-bottom:0; }
.proc-tl-marker{ position:relative; display:flex; justify-content:center; }
.proc-tl-num{
  position:relative; z-index:1;
  width:66px; height:66px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--purple-band); color:#fff;
  font-family:var(--font-head); font-weight:500; font-size:22px;
  box-shadow:0 10px 26px rgba(113,0,211,.28);
}
.proc-tl-step:not(:last-child) .proc-tl-marker::before{
  content:""; position:absolute; top:66px; bottom:-32px; left:50%; transform:translateX(-50%);
  width:2px; background:linear-gradient(#be6bff, #e6e4ee);
}
.proc-tl-card{
  background:#fff; border:1px solid #e6e4ee; border-radius:16px; padding:24px 30px;
  box-shadow:0 10px 30px rgba(33,0,80,.05);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.proc-tl-card:hover{ transform:translateY(-3px); border-color:var(--purple-text); box-shadow:0 16px 40px rgba(113,0,211,.12); }
.proc-tl-title{ font-family:var(--font-head); font-weight:500; font-size:22px; color:var(--black); margin-bottom:8px; }
.proc-tl-desc{ font-family:var(--font-body); font-weight:400; font-size:15.5px; line-height:1.6; color:#555; }
@media (max-width:560px){
  .proc-tl-step{ grid-template-columns:52px 1fr; gap:18px; }
  .proc-tl-num{ width:52px; height:52px; font-size:18px; }
  .proc-tl-step:not(:last-child) .proc-tl-marker::before{ top:52px; }
}

/* ---- v2.9.0: process as dark horizontal card carousel (i2d "Our SEO Strategy" style) ---- */
.proc2{ background:#0a0a0c; color:#fff; padding:90px 0 78px; overflow:hidden; }
.proc2-head{ max-width:760px; margin:0 auto 50px; padding:0 24px; text-align:center; }
.proc2-eyebrow{ display:inline-block; font-family:var(--font-head); font-weight:500; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:#d9c4ff; border:1px solid rgba(255,255,255,.2); border-radius:50px; padding:8px 22px; margin-bottom:22px; }
.proc2-title{ font-family:var(--font-head); font-weight:500; font-size:clamp(34px,4vw,56px); line-height:1.05; color:#fff; margin-bottom:16px; }
.proc2-title .accent{ color:var(--purple-text); }
.proc2-sub{ font-family:var(--font-body); font-weight:400; font-size:17px; line-height:1.6; color:#a9a4b5; }
.proc2-track{ display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px max(24px, calc((100vw - 1240px)/2)) 34px; scrollbar-width:none; }
.proc2-track::-webkit-scrollbar{ display:none; }
.proc2-card{ flex:0 0 340px; scroll-snap-align:start; background:linear-gradient(160deg,#17111f 0%, #0d0a12 100%); border:1px solid #241a33; border-radius:22px; padding:36px 32px 32px; display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease; }
.proc2-card:hover{ border-color:var(--purple-text); transform:translateY(-4px); }
.proc2-num{ font-family:var(--font-head); font-weight:500; font-size:25px; line-height:1; color:#b98cff; text-shadow:2px 2px 0 rgba(90,0,168,.9)); margin-bottom:22px; }
.proc2-card-title{ font-family:var(--font-head); font-weight:500; font-size:34px; color:#fff; margin-bottom:14px; }
.proc2-card-desc{ font-family:var(--font-body); font-weight:400; font-size:15px; line-height:1.65; color:#a9a4b5; flex:1; margin-bottom:24px; }
.proc2-more{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-family:var(--font-head); font-weight:500; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--purple-text); text-decoration:none; border-bottom:1px solid rgba(131,66,251,.4); padding-bottom:6px; transition:color .2s ease, border-color .2s ease; }
.proc2-more svg{ width:16px; height:16px; transition:transform .2s ease; }
.proc2-more:hover{ color:#fff; border-color:#fff; }
.proc2-more:hover svg{ transform:translateX(3px); }
.proc2-bar{ position:relative; height:3px; border-radius:3px; background:rgba(255,255,255,.12); margin:0 max(24px, calc((100vw - 1240px)/2)); }
.proc2-bar-fill{ position:absolute; top:0; left:0; height:100%; width:25%; border-radius:3px; background:var(--purple-text); }
@media (max-width:560px){ .proc2-card{ flex-basis:280px; } }

/* ---- v2.9.1: pin the process carousel; drive it left as the page scrolls ---- */
.proc2{ padding:0; overflow:visible; }
.proc2-scroller{ position:relative; }
.proc2-sticky{ position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:64px 0; }
.proc2-head{ margin-bottom:40px; }
.proc2-viewport{ overflow:hidden; width:100%; }
.proc2-track{ overflow:visible; scroll-snap-type:none; padding:8px max(24px, calc((100vw - 1240px)/2)) 8px; will-change:transform; }
.proc2-bar{ margin:26px max(24px, calc((100vw - 1240px)/2)) 0; }
/* fallback (reduced motion, or cards already fit) -> manual horizontal scroll, no pin */
.proc2-nopin .proc2-scroller{ height:auto !important; }
.proc2-nopin .proc2-sticky{ position:static; min-height:0; padding:70px 0; }
.proc2-nopin .proc2-viewport{ overflow-x:auto; scrollbar-width:none; }
.proc2-nopin .proc2-viewport::-webkit-scrollbar{ display:none; }
.proc2-nopin .proc2-track{ transform:none !important; }

/* ---- v2.9.2: remove bottom padding on the last problem-list item ---- */
.svc-problem-item:last-child{ padding-bottom:0; }

/* ---- v2.9.3: philosophy merged into the pricing section ---- */
.svc-phil-head{ margin-top:64px; }

/* ---- v2.9.4: pricing section white so it separates from the grey comparison below ---- */
.svc-pricing{ background:#fff; }

/* ---- v2.10.0: core services as sticky-left + scrolling-right cards ---- */
.core2-grid{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:60px; align-items:start; }
.core2-left{ position:sticky; top:110px; align-self:start; }
.core2-left .svc-btn{ margin-top:26px; }
.core2-right{ display:flex; flex-direction:column; gap:24px; }
@media (max-width:900px){
  .core2-grid{ grid-template-columns:1fr; gap:40px; }
  .core2-left{ position:static; }
}

/* ---- v2.11.0: SEO+AEO+GEO fuller layout (feature grid + "why" panel + checklist) ---- */
.seo2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:960px; margin:0 auto 40px; }
.seo2-card{ display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid #e6e4ee; border-radius:16px; padding:24px 26px; text-align:left; transition:border-color .2s ease, transform .2s ease; }
.seo2-card:hover{ border-color:var(--purple-text); transform:translateY(-3px); }
.seo2-card .core-check{ flex:none; width:42px; height:42px; margin:0; }
.seo2-card .core-check svg{ width:20px; height:20px; }
.seo2-card-title{ font-family:var(--font-head); font-weight:500; font-size:18px; color:var(--black); margin-bottom:6px; }
.seo2-card-desc{ font-family:var(--font-body); font-weight:400; font-size:14.5px; line-height:1.55; color:#555; }

.seo2-why{ max-width:960px; margin:0 auto; background:#faf8ff; border:1px solid #ece4fb; border-radius:22px; padding:46px 44px; text-align:center; }
.seo2-why-title{ font-family:var(--font-head); font-weight:500; font-size:26px; color:var(--black); margin-bottom:14px; }
.seo2-why-text{ font-family:var(--font-body); font-weight:400; font-size:16px; line-height:1.6; color:#555; max-width:640px; margin:0 auto 30px; }
.seo2-questions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:32px; }
.seo2-q{ background:#fff; border:1px solid #e0d6f5; border-radius:50px; padding:11px 20px; font-family:var(--font-body); font-weight:400; font-size:14px; color:#4a3a6b; }
.seo2-checklist{ display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:center; }
.seo2-check{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:500; font-size:14px; color:var(--black); }
.seo2-check svg{ width:20px; height:20px; color:#22a447; flex:none; }
@media (max-width:760px){ .seo2-grid{ grid-template-columns:1fr; } .seo2-why{ padding:36px 24px; } }

/* ---- v2.12.0: SEO+AEO+GEO as a left/right split ---- */
.seo2-split{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:56px; align-items:start; }
.seo2-left{ text-align:left; }
.seo2-left .svc-lead{ max-width:none; }
.seo2-left .seo2-why-title{ margin-top:30px; text-align:left; }
.seo2-left .seo2-why-text{ max-width:none; margin:0 0 26px; text-align:left; }
.seo2-left .seo2-questions{ justify-content:flex-start; margin-bottom:30px; }
.seo2-left .svc-btn{ margin-top:4px; }
.seo2-right .seo2-grid{ grid-template-columns:1fr; max-width:none; margin:0 0 24px; }
.seo2-right .seo2-checklist{ justify-content:flex-start; }
@media (max-width:900px){
  .seo2-split{ grid-template-columns:1fr; gap:40px; }
}

/* ---- v2.13.0: SEO+AEO+GEO rebuilt to match i2d (intro+grid, panel, chips, CTA) ---- */
.seo3-pill{ display:inline-block; font-family:var(--font-head); font-weight:500; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--purple-band); background:#f3ebff; border:1px solid #e0d0fb; border-radius:50px; padding:9px 22px; margin-bottom:24px; }
.seo3-top{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:start; margin-bottom:56px; }
.seo3-intro .svc-lead{ max-width:none; color:#333; }
.seo3-rule{ border:none; border-top:1px solid #e6e4ee; margin:28px 0; }
.seo3-intro2{ font-family:var(--font-body); font-weight:400; font-size:15.5px; line-height:1.65; color:#777; }
.seo3-cards{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.seo3-card{ background:#fff; border:1px solid #e6e4ee; border-radius:18px; padding:28px 28px; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.seo3-card:hover{ border-color:var(--purple-text); transform:translateY(-4px); box-shadow:0 16px 40px rgba(113,0,211,.1); }
.seo3-card-icon{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:13px; background:#f3ebff; color:var(--purple-band); border:1.5px solid #d9c4ff; margin-bottom:20px; }
.seo3-card-icon svg{ width:24px; height:24px; }
.seo3-card-title{ font-family:var(--font-head); font-weight:500; font-size:18px; color:var(--black); margin-bottom:9px; }
.seo3-card-desc{ font-family:var(--font-body); font-weight:400; font-size:14.5px; line-height:1.55; color:#555; }

.seo3-panel{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; background:linear-gradient(100deg,#f1eafc 0%, #f8f4fc 55%, #f4f6ea 100%); border:1px solid #ece4fb; border-radius:26px; padding:48px 52px; margin-bottom:46px; }
.seo3-pill-alt{ background:#eef7c9; border-color:#dbe9a3; color:var(--purple-band); margin-bottom:18px; }
.seo3-panel-title{ font-family:var(--font-head); font-weight:500; font-size:clamp(24px,2.4vw,31px); line-height:1.12; color:var(--black); margin-bottom:16px; }
.seo3-panel-text{ font-family:var(--font-body); font-weight:400; font-size:16px; line-height:1.6; color:#555; max-width:440px; }
.seo3-panel-text .accent{ color:var(--purple-text); font-weight:500; }
.seo3-panel-right{ display:flex; flex-direction:column; gap:16px; }
.seo3-q{ background:#fff; border:1px solid #efe9f8; border-radius:16px; padding:18px 24px; font-family:var(--font-body); font-weight:400; font-style:italic; font-size:15px; color:#333; box-shadow:0 8px 24px rgba(33,0,80,.05); }

.seo3-chips{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:40px; }
.seo3-chip{ display:inline-flex; align-items:center; gap:11px; background:#fff; border:1px solid #e6e4ee; border-radius:50px; padding:12px 24px; font-family:var(--font-head); font-weight:500; font-size:15px; color:var(--black); }
.seo3-chip::before{ content:""; flex:none; width:11px; height:11px; border-radius:50%; border:3px solid var(--purple-band); }
.seo3-closing{ text-align:center; max-width:780px; margin:0 auto 34px; font-family:var(--font-body); font-weight:400; font-size:17px; line-height:1.6; color:#555; }
.seo3-closing .accent{ color:var(--purple-text); font-weight:500; }

@media (max-width:900px){
  .seo3-top{ grid-template-columns:1fr; gap:40px; }
  .seo3-panel{ grid-template-columns:1fr; gap:30px; padding:36px 26px; }
}
@media (max-width:560px){ .seo3-cards{ grid-template-columns:1fr; } }

/* ---- v2.14.0: industry cards use background images with a readable overlay ---- */
.ind-card{
  position:relative; overflow:hidden; min-height:230px;
  border:none; padding:0; border-radius:18px;
  background:linear-gradient(150deg,#8f4be8 0%, #5f00b0 100%);
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
  transition:transform .2s ease, box-shadow .2s ease;
}
.ind-card:hover{ transform:translateY(-6px); box-shadow:0 20px 46px rgba(20,8,40,.28); }
.ind-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,8,18,.10) 0%, rgba(10,8,18,.55) 55%, rgba(10,8,18,.88) 100%);
}
.ind-body{ position:relative; z-index:1; padding:26px 24px; }
.ind-title{ color:#fff; margin-bottom:8px; }
.ind-desc{ color:rgba(255,255,255,.85); }

/* ---- v2.15.0: hosting plan feature lists with tick / cross ---- */
.price-feats-check li{ display:flex; align-items:center; gap:11px; }
.price-feats-check .pf-icon{ flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; }
.price-feats-check .pf-icon svg{ width:22px; height:22px; }
.price-feats-check .pf-yes .pf-icon{ color:#22a447; }
.price-feats-check .pf-no{ color:#9a9aa5; }
.price-feats-check .pf-no .pf-icon{ color:#e3534e; }

/* ===================== WEBSITE REVAMP PAGE ===================== */
/* hero feature chips */
.hero-feats{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.hero-feat{ font-family:var(--font-head); font-weight:500; font-size:13px; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:50px; padding:8px 16px; }

/* platforms */
.svc-platforms{ background:#fff; padding:80px 24px 70px; }
.platform-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.platform-chip{ font-family:var(--font-head); font-weight:500; font-size:16px; color:var(--black); background:#fff; border:1px solid #e6e4ee; border-radius:50px; padding:13px 28px; transition:border-color .2s ease, color .2s ease; }
.platform-chip:hover{ border-color:var(--purple-text); color:var(--purple-text); }

/* pricing footnote */
.price-footnote{ text-align:center; font-family:var(--font-body); font-weight:400; font-size:14px; color:#888; margin-top:28px; }

/* comparison table */
.svc-compare-table{ background:#f4f3f7; padding:96px 24px; }
.cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmp-table{ min-width:820px; background:#fff; border:1px solid #e6e4ee; border-radius:20px; overflow:hidden; }
.cmp-row{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; align-items:center; border-top:1px solid #f0eef5; }
.cmp-row:first-child{ border-top:none; }
.cmp-cell{ padding:16px 20px; text-align:center; font-family:var(--font-body); font-weight:400; font-size:15px; color:#444; }
.cmp-feature{ text-align:left; font-family:var(--font-head); font-weight:500; color:var(--black); }
.cmp-head .cmp-cell{ font-family:var(--font-head); font-weight:500; font-size:17px; color:var(--black); padding:22px 20px; background:#faf8ff; }
.cmp-col-pop{ background:#f7f1ff; }
.cmp-head .cmp-col-pop{ background:#efe3ff; color:var(--purple-band); }
.cmp-cat{ font-family:var(--font-head); font-weight:500; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--purple-band); background:#faf8ff; padding:14px 20px; border-top:1px solid #ece4fb; }
.cmp-yes svg,.cmp-no svg{ width:22px; height:22px; }
.cmp-yes{ color:#22a447; display:inline-flex; }
.cmp-no{ color:#dcd7e6; display:inline-flex; }
.cmp-txt{ font-family:var(--font-head); font-weight:500; color:var(--black); }
.cmp-foot .cmp-cell{ padding:24px 16px; }
.cmp-btn{ position:static; display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 22px; font-size:14px; background:#fff; color:var(--purple-band); border:1.5px solid #d9d2e6; white-space:nowrap; }
.cmp-btn:hover{ background:var(--purple-band); color:#fff; border-color:var(--purple-band); }
.cmp-btn-pop{ background:var(--purple-band); color:#fff; border-color:var(--purple-band); }
.cmp-btn-pop:hover{ background:#000; border-color:#000; }

/* add-ons */
.svc-addons{ background:#fff; padding:96px 24px; }
.addon-grid{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.addon-chip{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:500; font-size:15px; color:var(--black); background:#fff; border:1px solid #e6e4ee; border-radius:50px; padding:13px 24px; transition:border-color .2s ease, color .2s ease; cursor:default; }
.addon-chip svg{ width:15px; height:15px; color:var(--purple-band); transition:transform .2s ease; }
.addon-chip:hover{ border-color:var(--purple-text); color:var(--purple-text); }
.addon-chip:hover svg{ transform:translateX(3px); }

/* one-off services */
.svc-oneoff{ background:#f4f3f7; padding:96px 24px; }
.oneoff-list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-content:start; }
.oneoff-item{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #e6e4ee; border-radius:14px; padding:16px 20px; font-family:var(--font-head); font-weight:500; font-size:15px; color:var(--black); }
.oneoff-check{ flex:none; display:inline-flex; color:#22a447; }
.oneoff-check svg{ width:22px; height:22px; }

/* why-choose grid */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.why-card{ background:#fff; border:1px solid #e6e4ee; border-radius:18px; padding:30px 28px; transition:border-color .2s ease, transform .2s ease; }
.why-card:hover{ border-color:var(--purple-text); transform:translateY(-4px); }

@media (max-width:900px){
  .oneoff-list{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }

/* ---- v2.17.0: platform icons + care-plan (maintenance) service block ---- */
.platform-chip{ display:inline-flex; align-items:center; gap:12px; }
.platform-icon{ width:26px; height:26px; object-fit:contain; flex:none; }
.svc-care{ background:#fff; padding:96px 24px; }
.price-year{ font-family:var(--font-body); font-weight:400; font-size:13px; color:#888; margin:-16px 0 22px; }
.cmp-head .th-price{ display:block; font-family:var(--font-body); font-weight:400; font-size:13px; color:#888; margin-top:4px; }
.cmp-head .cmp-col-pop .th-price{ color:var(--purple-band); }
.care-cmp{ margin-top:52px; }

/* ===================== WEBSITE DEVELOPMENT PAGE ===================== */
/* benefits list inside the difference box */
.benefit-list{ display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.benefit-item{ display:flex; align-items:center; gap:12px; font-family:var(--font-body); font-weight:400; font-size:15px; color:#333; }
.benefit-check{ flex:none; display:inline-flex; color:#22a447; }
.benefit-check svg{ width:22px; height:22px; }

/* 4-up process grid */
.proc-grid-4{ grid-template-columns:repeat(4,1fr); }

/* engagement models */
.svc-engage{ background:#f4f3f7; padding:96px 24px; }
.engage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.engage-card{ background:#fff; border:1px solid #e6e4ee; border-radius:20px; padding:40px 36px; display:flex; flex-direction:column; transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.engage-card:hover{ border-color:var(--purple-text); transform:translateY(-4px); box-shadow:0 18px 44px rgba(113,0,211,.12); }
.engage-title{ font-family:var(--font-head); font-weight:500; font-size:26px; color:var(--black); margin-bottom:10px; }
.engage-intro{ font-family:var(--font-body); font-weight:400; font-size:16px; color:#555; line-height:1.6; margin-bottom:24px; }
.engage-list{ list-style:none; margin:0 0 30px; padding:0; display:flex; flex-direction:column; gap:14px; flex:1; }
.engage-list li{ display:flex; align-items:flex-start; gap:12px; font-family:var(--font-body); font-weight:400; font-size:15px; color:#333; line-height:1.55; }
.engage-check{ flex:none; display:inline-flex; color:#22a447; margin-top:1px; }
.engage-check svg{ width:22px; height:22px; }
.engage-card .svc-btn{ align-self:flex-start; }

/* trusted-by logo band */
.svc-logos{ background:#fff; padding:80px 24px; }
.svc-logos .partner-strip{ max-width:1100px; gap:40px 56px; }

/* testimonials */
.svc-testi{ background:#f4f3f7; padding:96px 24px; }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.testi-card{ background:#fff; border:1px solid #e6e4ee; border-radius:20px; padding:34px 32px; display:flex; flex-direction:column; }
.testi-stars{ color:#f5b301; font-size:16px; letter-spacing:3px; margin-bottom:18px; }
.testi-quote{ font-family:var(--font-body); font-weight:400; font-size:15.5px; line-height:1.65; color:#333; flex:1; margin-bottom:24px; }
.testi-author{ display:flex; flex-direction:column; gap:3px; padding-top:20px; border-top:1px solid #f0eef5; }
.testi-name{ font-family:var(--font-head); font-weight:500; font-size:16px; color:var(--black); }
.testi-role{ font-family:var(--font-body); font-weight:400; font-size:13.5px; color:#888; }

@media (max-width:1000px){
  .proc-grid-4{ grid-template-columns:1fr 1fr; }
  .testi-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .proc-grid-4{ grid-template-columns:1fr; }
  .engage-grid{ grid-template-columns:1fr; }
}

/* ===================== SEO PAGE ===================== */
/* hero result-stat cards */
.hero-stats{ max-width:1240px; margin:48px auto 0; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.hero-stat{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:16px; padding:22px 22px; }
.hero-stat-num{ display:block; font-family:var(--font-head); font-weight:500; font-size:34px; line-height:1; color:#fff; margin-bottom:8px; }
.hero-stat-label{ display:block; font-family:var(--font-head); font-weight:500; font-size:15px; color:#fff; }
.hero-stat-sub{ display:block; font-family:var(--font-body); font-weight:400; font-size:13px; color:rgba(255,255,255,.7); margin-top:3px; }

/* 3-up why grid */
.why-grid-3{ grid-template-columns:repeat(3,1fr); }

/* 4-up case grid + metric overlay */
.work-grid-4{ grid-template-columns:repeat(4,1fr); }
.work-media{ position:relative; }
.work-metric{ position:absolute; left:16px; bottom:16px; z-index:1; background:rgba(10,8,18,.78); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font-family:var(--font-head); font-weight:500; font-size:16px; padding:8px 14px; border-radius:12px; }
.work-card .case-link{ margin-top:14px; display:inline-flex; }

/* "by the numbers" dark band */
.svc-bignums{ background:#0a0a0c; color:#fff; padding:96px 24px; }
.bignums-head{ text-align:center; margin-bottom:48px; }
.bignums-eyebrow{ color:#d9c4ff; }
.bignums-title{ color:#fff; }
.bignums-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:960px; margin:0 auto 54px; text-align:center; }
.bignum-num{ display:block; font-family:var(--font-head); font-weight:500; font-size:clamp(44px,5vw,68px); line-height:1; color:#b98cff; margin-bottom:12px; }
.bignum-label{ font-family:var(--font-body); font-weight:400; font-size:16px; color:#c2bdd0; }
.bignums-list{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:920px; margin:0 auto; }
.bignum-chip{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); border-radius:50px; padding:11px 20px; font-family:var(--font-head); font-weight:500; font-size:14px; color:#fff; }
.bignum-chip svg{ width:20px; height:20px; color:#22a447; flex:none; }
.svc-btn-light{ position:static; display:inline-flex; align-items:center; background:#fff; color:var(--purple-band); height:54px; padding:0 34px; font-size:15px; }
.svc-btn-light:hover{ background:var(--purple-band); color:#fff; }

@media (max-width:1000px){
  .hero-stats{ grid-template-columns:1fr 1fr; }
  .why-grid-3{ grid-template-columns:1fr; }
  .work-grid-4{ grid-template-columns:1fr 1fr; }
  .bignums-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:600px){
  .hero-stats{ grid-template-columns:1fr; }
  .work-grid-4{ grid-template-columns:1fr; }
}

/* ---- v2.21.0: SEO dark hero with 2x2 metric cards (purple branding) ---- */
.seohero{ background:#0a0a0c; color:#fff; padding:64px 24px 44px; }
.seohero-inner{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.seohero .svc-crumbs{ margin-bottom:16px; }
.seohero-eyebrow{ font-family:var(--font-body); font-weight:400; font-size:15px; color:#9a9aa5; margin-bottom:16px; }
.seohero-title{ font-family:var(--font-head); font-weight:500; font-size:clamp(40px,4.8vw,66px); line-height:1.04; color:#fff; margin-bottom:22px; }
.seohero-title .accent{ color:#9d6bff; }
.seohero-sub{ font-family:var(--font-body); font-weight:400; font-size:18px; line-height:1.6; color:#c2bdd0; margin-bottom:32px; max-width:540px; }
.seohero-ctas{ display:flex; gap:16px; flex-wrap:wrap; }
.seohero .hero-btn-secondary{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
.seohero .hero-btn-secondary:hover{ background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }
.seohero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.seostat{ display:flex; flex-direction:column; min-height:214px; border-radius:20px; padding:22px 24px; background:linear-gradient(160deg,#f4eefc 0%, #e7d8fb 100%); }
.seostat-icon{ width:46px; height:46px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--purple-band); box-shadow:0 6px 16px rgba(60,0,120,.12); }
.seostat-icon svg{ width:22px; height:22px; }
.seostat-label{ margin-top:auto; font-family:var(--font-head); font-weight:500; font-size:15px; color:#5a5470; }
.seostat-num{ font-family:var(--font-head); font-weight:500; font-size:clamp(26px,2.8vw,40px); line-height:1; color:var(--purple-band); margin:6px 0 14px; }
.seostat-tag{ align-self:flex-start; background:rgba(255,255,255,.78); border-radius:50px; padding:8px 14px; font-family:var(--font-body); font-weight:400; font-size:12.5px; color:#5a5470; }
@media (max-width:1000px){ .seohero-inner{ grid-template-columns:1fr; gap:40px; } }
@media (max-width:520px){ .seohero-stats{ grid-template-columns:1fr; } }

/* ---- v2.21.1: value-prop text on top, full-width image below ---- */
.svc-valueprop{ background:#fff; padding:96px 24px; }
.valueprop-head{ max-width:780px; margin:0 0 46px; }
.valueprop-body{ margin-bottom:28px; }
.valueprop-media{ width:100%; border-radius:22px; overflow:hidden; box-shadow:0 30px 70px rgba(33,0,80,.12); border:1px solid #ece4fb; }
.valueprop-media img{ width:100%; height:auto; display:block; }
.valueprop-media.is-empty{ aspect-ratio:2.4/1; border:2px dashed #c9b6ef; background:linear-gradient(150deg,#f6f1fe 0%, #efe6fb 100%); box-shadow:none; display:flex; align-items:center; justify-content:center; }
.media-ph{ display:flex; flex-direction:column; align-items:center; gap:10px; color:#7a5bb3; text-align:center; padding:24px; }
.media-ph svg{ width:52px; height:52px; opacity:.7; }
.media-ph-title{ font-family:var(--font-head); font-weight:600; font-size:18px; color:#5f00b0; }
.media-ph-hint{ font-size:13px; color:#9484ad; }

/* ---- v2.22.0: SEO case-study carousel (featured, big number) ---- */
.seocase{ background:#fff; padding:96px 24px; }
.seocase-viewport{ overflow:hidden; border:1px solid #e6d8fb; border-radius:26px; }
.seocase-track{ display:flex; transition:transform .45s ease; }
.seocase-slide{ flex:0 0 100%; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; padding:44px; }
.seocase-media{ border-radius:16px; overflow:hidden; box-shadow:0 22px 55px rgba(33,0,80,.12); }
.seocase-media img{ width:100%; height:auto; display:block; }
.seocase-media.is-empty{ aspect-ratio:4/3; background:linear-gradient(150deg,#efe6fb 0%, #e0ccfa 100%); box-shadow:none; }
.seocase-pill{ display:inline-block; font-family:var(--font-head); font-weight:500; font-size:13px; letter-spacing:.5px; color:var(--purple-band); background:#f0e7fc; border:1px solid #e0d0fb; border-radius:50px; padding:8px 18px; }
.seocase-name{ font-family:var(--font-head); font-weight:500; font-size:clamp(30px,3.4vw,44px); line-height:1.05; color:var(--purple-band); margin:18px 0 26px; }
.seocase-lbl{ font-family:var(--font-head); font-weight:500; font-size:18px; color:var(--black); margin:0 0 4px; }
.seocase-num{ font-family:var(--font-head); font-weight:500; font-size:clamp(40px,5vw,60px); line-height:1; color:var(--purple-band); margin-bottom:8px; }
.seocase-over{ font-family:var(--font-body); font-weight:400; font-size:16px; color:#555; line-height:1.55; margin:0 0 24px; }
.seocase-service{ font-family:var(--font-body); font-weight:400; font-size:17px; color:#000; margin:0 0 26px; }
.seocase-link{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:500; font-size:16px; color:var(--purple-band); text-decoration:none; }
.seocase-link svg{ width:18px; height:18px; transition:transform .2s ease; }
.seocase-link:hover svg{ transform:translateX(4px); }
.seocase-nav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:30px; }
.seocase-prev,.seocase-next{ width:48px; height:48px; border-radius:50%; border:1px solid #d9d2e6; background:#fff; color:var(--purple-band); font-size:22px; line-height:1; cursor:pointer; transition:background .2s ease, color .2s ease; }
.seocase-prev:hover,.seocase-next:hover{ background:var(--purple-band); color:#fff; border-color:var(--purple-band); }
.seocase-dots{ display:flex; align-items:center; gap:8px; }
.seocase-dot{ width:9px; height:9px; border-radius:50%; background:#d9d2e6; border:none; padding:0; cursor:pointer; transition:width .2s ease, background .2s ease; }
.seocase-dot.is-active{ background:var(--purple-band); width:26px; border-radius:50px; }
@media (max-width:820px){ .seocase-slide{ grid-template-columns:1fr; gap:30px; padding:28px; } }

/* ---- v2.23.0: SEO case studies as sticky stacking cards ---- */
.seocase-stack{ position:relative; }
.seocase-card{
  position:sticky;
  display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center;
  background:#fff; border:1px solid #e6d8fb; border-radius:26px; padding:44px;
  box-shadow:0 24px 60px rgba(33,0,80,.12);
  margin-bottom:40px;
}
.seocase-card:last-child{ margin-bottom:0; }
/* Fixed, equal height so the sticky cards stack cleanly (last card ends on top) */
.seocase-card{ min-height:560px; align-items:stretch; }
.seocase-card .seocase-media{ height:100%; }
.seocase-card .seocase-media img{ width:100%; height:100%; object-fit:cover; }
.seocase-card .seocase-info{ align-self:center; }
@media (max-width:820px){
  .seocase-card{ grid-template-columns:1fr; gap:30px; padding:28px; top:80px !important; min-height:0; align-items:start; }
  .seocase-card .seocase-media{ height:auto; }
  .seocase-card .seocase-media img{ height:auto; }
}
@media (prefers-reduced-motion: reduce){
  .seocase-card{ position:static; }
}

/* ---- v2.23.1: proposal form eyebrow ---- */
.proposal-eyebrow{ display:inline-block; align-self:flex-start; width:auto; max-width:max-content; font-family:var(--font-head); font-weight:500; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:#d9c4ff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:50px; padding:8px 18px; margin-bottom:20px; }

/* ---- v2.24.0: background utilities for alternating sections ---- */
.svc-bg-white{ background:#fff; }
.svc-bg-grey{ background:#f4f3f7; }

/* ---- v2.24.1: centre the value-prop heading/description ---- */
.valueprop-head{ max-width:820px; margin:0 auto 46px; text-align:center; }

/* ---- v2.25.0: coloured hero metric cards (waves / bars / dots) ---- */
.seostat{ position:relative; overflow:hidden; }
.seostat-icon,.seostat-label,.seostat-num,.seostat-tag{ position:relative; z-index:2; }
.seostat--green{  background:linear-gradient(160deg,#eaf6ec 0%, #d6ecda 100%); }
.seostat--blue{   background:linear-gradient(160deg,#e9f0fc 0%, #d6e3fb 100%); }
.seostat--orange{ background:linear-gradient(160deg,#fdf0e6 0%, #fbe1cd 100%); }
.seostat--purple{ background:linear-gradient(160deg,#f1e9fc 0%, #e6d6fb 100%); }
.seostat--green .seostat-icon{ color:#2f9e44; }  .seostat--green .seostat-num{ color:#2f9e44; }
.seostat--blue .seostat-icon{ color:#2f6bd6; }   .seostat--blue .seostat-num{ color:#2f6bd6; }
.seostat--orange .seostat-icon{ color:#e8730c; } .seostat--orange .seostat-num{ color:#e8730c; }
.seostat--purple .seostat-icon{ color:#7100d3; } .seostat--purple .seostat-num{ color:#7100d3; }
.seostat-wave{ position:absolute; left:0; right:0; bottom:0; width:100%; height:58px; z-index:0; }
.seostat--green .seostat-wave .w1{ fill:#c3e2c9; } .seostat--green .seostat-wave .w2{ fill:#a9d6b3; }
.seostat--blue .seostat-wave .w1{ fill:#c6d7f5; }  .seostat--blue .seostat-wave .w2{ fill:#aec6f2; }
.seostat-bars{ position:absolute; right:18px; bottom:16px; width:84px; height:52px; z-index:0; }
.seostat--orange .seostat-bars rect{ fill:#f2a24d; }
.seostat-dots{ position:absolute; right:0; bottom:0; width:130px; height:120px; z-index:0; background-image:radial-gradient(#a879ee 2px, transparent 2px); background-size:14px 14px; opacity:.5; }

/* ---- v2.25.0: dark testimonial slider ---- */
.testi2{ background:#0a0a0c; color:#fff; padding:96px 24px; }
.testi2-eyebrow{ text-align:center; font-family:var(--font-body); font-weight:400; font-size:18px; color:#9a9aa5; margin-bottom:14px; }
.testi2-title{ text-align:center; font-family:var(--font-head); font-weight:500; font-size:clamp(34px,4.4vw,58px); line-height:1.05; color:#fff; margin-bottom:30px; }
.testi2-title .accent{ color:#9d6bff; }
.testi2-proof{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:48px; }
.testi2-avatars{ display:flex; }
.testi2-avatars img{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid #0a0a0c; margin-left:-12px; }
.testi2-avatars img:first-child{ margin-left:0; }
.testi2-reviews{ font-family:var(--font-head); font-weight:500; font-size:16px; color:#c9b8f0; }
.testi2-viewport{ overflow:hidden; border-radius:26px; }
.testi2-track{ display:flex; transition:transform .45s ease; }
.testi2-slide{ flex:0 0 100%; }
.testi2-card{ background:#151318; border:1px solid #241a33; border-radius:26px; padding:48px 52px; display:grid; grid-template-columns:.85fr 1.15fr; gap:50px; align-items:start; }
.testi2-quoteicon{ display:block; font-family:var(--font-head); font-size:88px; line-height:.55; color:var(--purple-text); }
.testi2-headline{ font-family:var(--font-head); font-weight:500; font-size:clamp(23px,2.3vw,30px); line-height:1.2; color:#fff; margin:16px 0 30px; }
.testi2-author{ display:flex; align-items:center; gap:14px; }
.testi2-author img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.testi2-name{ display:block; font-family:var(--font-head); font-weight:500; font-size:17px; color:#fff; }
.testi2-role{ display:block; font-family:var(--font-body); font-weight:400; font-size:14px; color:#9a9aa5; }
.testi2-stars{ color:#f5b301; font-size:22px; letter-spacing:5px; margin-bottom:22px; }
.testi2-quote{ font-family:var(--font-body); font-weight:400; font-size:19px; line-height:1.7; color:#c2bdd0; }
.testi2-nav{ display:flex; justify-content:center; gap:16px; margin-top:34px; }
.testi2-prev,.testi2-next{ width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; font-size:22px; line-height:1; cursor:pointer; transition:background .2s ease, color .2s ease; }
.testi2-prev:hover,.testi2-next:hover{ background:#fff; color:#0a0a0c; }
@media (max-width:820px){ .testi2-card{ grid-template-columns:1fr; gap:28px; padding:34px 28px; } }

/* ---- v2.26.0: semantic header/hero wrappers on the fixed-canvas home page.
   display:contents keeps the absolutely-positioned children referencing .stage,
   so grouping the code changes nothing visually. ---- */
.stage-header, .stage-hero{ display:contents; }

/* =========================================================================
   v2.27.0 — HOME HEADER + HERO + MARQUEE as real flow sections
   (moved out of the fixed 1728px canvas; services band still uses the canvas)
   ========================================================================= */

/* HERO (flow, centred) */
.home-hero{ background:#fff; padding:64px 24px 56px; }
.home-hero-inner{ max-width:1100px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; }
.home-hero .rating{ position:static; left:auto; top:auto; transform:none; order:-1; display:flex; justify-content:center; gap:16px; margin:0 0 26px; }
.home-hero .hero-title{ position:static; left:auto; top:auto; transform:none; width:auto; max-width:1000px; margin:0 0 22px; font-size:clamp(40px,5.4vw,92px); text-align:center; }
.home-hero .hero-sub{ position:static; left:auto; top:auto; transform:none; width:auto; max-width:720px; margin:0 0 34px; text-align:center; }
.home-hero .hero-ctas{ position:static; left:auto; top:auto; transform:none; display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }

/* LOGO MARQUEE (flow) */
.home-marquee{ background:#fff; padding:0 0 48px; }
.home-marquee .marquee{ position:static; left:auto; top:auto; transform:none; width:100%; max-width:1728px; margin:0 auto; }

@media (max-width:640px){
  .home-hero{ padding:44px 20px 40px; }
}

/* ---- v2.28.0: coloured reviewer initial circles ---- */
.ra-avatar{ color:#fff; }
.ra-c1{ background:#f5a623; }  /* amber */
.ra-c2{ background:#4a90e2; }  /* blue */
.ra-c3{ background:#35b56a; }  /* green */
.ra-c4{ background:#e0517b; }  /* pink */
.ra-c5{ background:#17b0a0; }  /* teal */
.ra-c6{ background:#ff7043; }  /* orange */
.ra-c7{ background:#26bcd6; }  /* cyan */
.ra-c8{ background:#9b5de5; }  /* violet */

/* ---- v2.29.0: ACF-uploaded images fill their media containers ---- */
.svc-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.svc-split-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- v2.29.1: ACF work-card image fill ---- */
.work-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ============================================================
   BLOG POST DETAIL (single.php)
   ============================================================ */
.post-detail{ background:#fff; }
.post-hero{ max-width:900px; margin:0 auto; padding:54px 24px 0; }
.post-hero-inner .svc-crumbs{ margin-bottom:20px; }
.post-cat{ display:inline-block; background:#f0e8ff; color:var(--purple-text); font-family:var(--font-head); font-weight:600; font-size:12px; letter-spacing:1px; text-transform:uppercase; padding:6px 14px; border-radius:50px; }
.post-title{ font-family:var(--font-head); font-weight:600; font-size:clamp(30px,4.4vw,50px); line-height:1.12; color:var(--black); margin:18px 0 22px; }
.post-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--font-body); font-size:15px; color:#666; }
.post-meta .post-avatar img{ width:38px; height:38px; border-radius:50%; display:block; }
.post-by b{ color:var(--black); font-weight:600; }
.post-dot{ color:#c9c9d2; }
.post-featured{ max-width:1040px; margin:34px auto 0; padding:0 24px; }
.post-featured img{ width:100%; height:auto; border-radius:20px; display:block; box-shadow:0 30px 70px rgba(33,0,80,.10); }

.post-layout{ max-width:1100px; margin:0 auto; padding:48px 24px 70px; display:grid; grid-template-columns:270px 1fr; gap:56px; align-items:start; }

/* Sticky sidebar */
.post-aside{ position:sticky; top:104px; display:flex; flex-direction:column; gap:26px; }
.post-toc{ border-left:2px solid #ece7f6; padding-left:18px; }
.post-toc-title,.post-share-title{ font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:#9a8fb3; margin:0 0 14px; }
.post-toc-list{ display:flex; flex-direction:column; gap:11px; }
.post-toc-list a{ font-family:var(--font-body); font-size:14.5px; line-height:1.4; color:#6a6a76; text-decoration:none; transition:color .18s ease; }
.post-toc-list a.lvl-3{ padding-left:14px; font-size:13.5px; }
.post-toc-list a:hover{ color:var(--purple-text); }
.post-toc-list a.is-active{ color:var(--purple-text); font-weight:600; }

.post-share-links{ display:flex; gap:10px; flex-wrap:wrap; }
.pshare{ width:40px; height:40px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e6e2f0; background:#fff; color:#5a5566; cursor:pointer; transition:all .18s ease; position:relative; text-decoration:none; }
.pshare svg{ width:18px; height:18px; }
.pshare:hover{ background:var(--purple-band); border-color:var(--purple-band); color:#fff; transform:translateY(-2px); }
.pshare-copied{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#111; color:#fff; font-size:11px; padding:4px 8px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.pshare-copy.is-copied .pshare-copied{ opacity:1; }

/* Post body typography */
.post-main{ min-width:0; }
.post-body{ font-family:var(--font-body); font-size:17.5px; line-height:1.75; color:#2c2c33; }
.post-body > *:first-child{ margin-top:0; }
.post-body h2{ font-family:var(--font-head); font-weight:600; font-size:29px; line-height:1.25; color:var(--black); margin:44px 0 16px; scroll-margin-top:104px; }
.post-body h3{ font-family:var(--font-head); font-weight:600; font-size:22px; line-height:1.3; color:var(--black); margin:32px 0 12px; scroll-margin-top:104px; }
.post-body p{ margin:0 0 20px; }
.post-body a{ color:var(--purple-text); text-decoration:underline; }
.post-body ul,.post-body ol{ margin:0 0 22px; padding-left:22px; }
.post-body li{ margin:0 0 10px; }
.post-body img{ max-width:100%; height:auto; border-radius:16px; margin:14px 0 26px; }
.post-body blockquote{ margin:26px 0; padding:6px 0 6px 24px; border-left:4px solid var(--purple-band); font-size:20px; line-height:1.55; color:#3a3446; font-style:italic; }
.post-body strong{ color:var(--black); font-weight:600; }

/* Author signature */
.post-author{ display:flex; gap:24px; align-items:flex-start; margin:52px 0 0; padding:30px; border:1px solid #ece7f6; border-radius:20px; background:linear-gradient(180deg,#faf7ff,#fff); }
.post-author-avatar img{ width:88px; height:88px; border-radius:50%; display:block; box-shadow:0 8px 22px rgba(33,0,80,.12); }
.post-author-label{ font-family:var(--font-head); font-weight:600; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:#9a8fb3; }
.post-author-name{ font-family:var(--font-head); font-weight:600; font-size:22px; color:var(--black); margin:4px 0 2px; }
.post-author-role{ font-size:14px; color:var(--purple-text); font-weight:600; margin:0 0 12px; }
.post-author-bio{ font-size:15.5px; line-height:1.6; color:#5c5c66; margin:0 0 8px; }
.post-author-sign{ font-family:'Dancing Script', cursive; font-weight:700; font-size:34px; color:var(--black); line-height:1; display:inline-block; }

.post-cta{ margin-top:40px; }
.post-cta .svc-btn svg{ width:18px; height:18px; vertical-align:middle; margin-left:4px; }

@media (max-width:900px){
  .post-layout{ grid-template-columns:1fr; gap:30px; }
  .post-aside{ position:static; order:2; flex-direction:column-reverse; }
  .post-toc{ display:none; }
  .post-author{ flex-direction:column; gap:16px; }
}

/* ============================================================
   SERVICES MEGA MENU
   ============================================================ */
.site-menu .menu-item-mega{ position:static; }
.site-menu .menu-item-mega > a{ display:inline-flex; align-items:center; gap:6px; }
.site-menu .menu-item-mega > a::after{ content:''; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .25s ease; opacity:.8; }
.site-menu .menu-item-mega:hover > a::after{ transform:rotate(-135deg); margin-top:2px; }

.mega-menu{
  position:fixed; left:0; right:0; top:83px; z-index:49;
  background:#f5f0fe; border-top:1px solid #e6dcfb;
  box-shadow:0 26px 50px rgba(60,20,120,.14);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.admin-bar .mega-menu{ top:115px; }
.menu-item-mega:hover > .mega-menu,
.menu-item-mega:focus-within > .mega-menu{ opacity:1; visibility:visible; transform:none; }

.mega-inner{ max-width:1400px; margin:0 auto; padding:50px 24px 50px; display:grid; grid-template-columns:200px minmax(0,1fr); gap:44px; align-items:start; }
.mega-head{ padding-top:4px; }
.mega-eyebrow{ display:block; font-family:var(--font-head); font-weight:600; font-size:12px; letter-spacing:1.4px; text-transform:uppercase; color:var(--purple-text); margin-bottom:8px; }
.mega-title{ font-family:var(--font-head); font-weight:600; font-size:30px; line-height:1.1; color:var(--black); margin:0 0 16px; }
.mega-menu .mega-all{ font-family:var(--font-head); font-weight:500; font-size:14px; color:#6a6480; text-decoration:none; }
.mega-menu .mega-all:hover{ color:var(--purple-text); }

.mega-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.mega-card{ display:flex; flex-direction:column; gap:6px; min-width:0; padding:18px 18px; border-radius:14px; text-decoration:none; background:rgba(255,255,255,.55); border:1px solid #e6dcfb; transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.mega-card:hover{ background:#fff; border-color:var(--purple-band); transform:translateY(-2px); box-shadow:0 12px 26px rgba(113,0,211,.12); }
.mega-name{ display:block; min-width:0; font-family:var(--font-head); font-weight:600; font-size:16.5px; color:var(--black); white-space:normal; overflow-wrap:break-word; }
.mega-desc{ display:block; min-width:0; font-family:var(--font-body); font-size:13.5px; line-height:1.45; color:#6a6480; white-space:normal; overflow-wrap:break-word; }

@media (max-width:1040px){ .mega-inner{ grid-template-columns:1fr; gap:20px; } .mega-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:860px){ .mega-menu{ display:none; } }

/* ============================================================
   WEBSITE DESIGN — tall coloured project cards
   ============================================================ */
.work-card-tall{ position:relative; display:flex; flex-direction:column; background:#10262e; border:none; border-radius:28px; overflow:hidden; padding:44px 40px; min-height:640px; color:#fff; box-shadow:none; }
.work-card-tall:hover{ transform:translateY(-6px); box-shadow:0 24px 55px rgba(0,0,0,.22); }
.work-card-tall.cursor-live{ cursor:none; }
.work-arrow{ position:absolute; left:0; top:0; z-index:3; width:64px; height:64px; border-radius:50%; background:#fff; color:#10262e; display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transform:translate(-50%,-50%) scale(.6); transition:opacity .3s ease, transform .16s ease-out; pointer-events:none; box-shadow:0 12px 30px rgba(0,0,0,.25); will-change:transform,opacity; }
.work-arrow svg{ width:26px; height:26px; }
.work-card-tall.cursor-live .work-arrow{ opacity:1; }
.work-card-tall .work-title{ font-family:var(--font-head); font-weight:600; font-size:33px; line-height:1.08; color:#fff; margin:0 0 12px; }
.work-card-tall .work-place{ font-family:var(--font-body); font-weight:400; font-size:16px; letter-spacing:0; text-transform:none; color:rgba(255,255,255,.72); }
.work-card-tall .work-media{ flex:1; position:relative; aspect-ratio:auto; overflow:visible; background:none; display:flex; align-items:center; justify-content:center; margin:30px 0; }
.work-card-tall .work-img{ position:static; inset:auto; width:auto; height:auto; max-width:100%; max-height:360px; object-fit:contain; border-radius:12px; }
.work-card-tall .work-tag{ font-family:var(--font-head); font-weight:600; font-size:21px; line-height:1.25; letter-spacing:.4px; text-transform:uppercase; color:#fff; margin:0; }
.work-card-tall.wc-c1{ background:#10262e; }
.work-card-tall.wc-c2{ background:#e0952a; }
.work-card-tall.wc-c3{ background:#8e2a86; }
@media (max-width:1100px){ .work-card-tall{ min-height:560px; padding:36px 30px; } .work-card-tall .work-title{ font-size:28px; } }
@media (max-width:600px){ .work-card-tall{ min-height:520px; } }

/* ============================================================
   PRICING PAGE hero
   ============================================================ */
.pricing-hero{ background:linear-gradient(160deg,#7a25da 0%, #5a00ab 100%); color:#fff; padding:74px 24px 64px; text-align:center; }
.pricing-hero .svc-wrap{ max-width:900px; }
.pricing-hero .svc-crumbs{ justify-content:center; margin:0 0 18px; }
.pricing-hero .svc-crumbs a,.pricing-hero .svc-crumbs .sep{ color:rgba(255,255,255,.7); }
.pricing-hero .svc-crumbs a:hover{ color:#fff; }
.pricing-hero .svc-crumbs .current{ color:#fff; }
.pricing-hero-eyebrow{ font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:1.6px; text-transform:uppercase; color:#e0ccff; margin:0 0 14px; }
.pricing-hero-title{ font-family:var(--font-head); font-weight:600; font-size:clamp(34px,5vw,54px); line-height:1.08; margin:0 auto 18px; }
.pricing-hero-sub{ font-family:var(--font-body); font-size:18px; line-height:1.6; color:rgba(255,255,255,.85); max-width:680px; margin:0 auto 30px; }
.pricing-hero .svc-btn{ background:#fff; color:var(--purple-band); }
.pricing-hero .svc-btn:hover{ background:#000; color:#fff; }

/* ---- All headings use Barlow at 700 ---- */
h1, h2, h3, h4, h5, h6, .card-title, .svc-list-title{ font-weight:700 !important; }

/* ============================================================
   HOME second-half — normal flow (pulled out of the fixed canvas)
   ============================================================ */
.home-compare{ background:#fff; padding:80px 24px; }
.home-compare .compare-head{ text-align:center; margin:0 0 44px; }
.home-compare .compare-heading{ font-size:clamp(28px,3.6vw,40px); }
/* red/green comparison icons: no coloured box on the solid cards */
.compare2-rg .ci-x, .compare2-rg .ci-check{ background:transparent; }

.home-reviews{ background:var(--purple-band); padding:78px 0 88px; overflow:hidden; }
.home-reviews .reviews-head{ position:static; left:auto; top:auto; width:auto; max-width:1500px; margin:0 auto 34px; padding:0 24px; }
.home-reviews .reviews-heading{ font-size:clamp(30px,4.4vw,52px); }
.home-reviews .reviews-marquee{ position:relative; left:auto; top:auto; margin-top:22px; }

.home-cta{ background:var(--purple-band); padding:72px 0 80px; }
.home-cta .cta-wrap{ position:static; left:auto; top:auto; transform:none; width:auto; max-width:1500px; margin:0 auto; padding:0 24px; }
.home-cta .cta-heading{ font-size:clamp(30px,4vw,50px); }

.home-faq{ background:var(--purple-band); padding:80px 0 90px; }
.home-faq .faq-wrap{ position:static; left:auto; top:auto; transform:none; width:auto; max-width:1300px; margin:0 auto; padding:0 24px; }
.home-faq .faq-heading{ font-size:clamp(30px,3.8vw,44px); }

@media (max-width:960px){
  .home-cta .cta-grid{ grid-template-columns:1fr; gap:36px; padding:40px 32px; }
  .home-faq .faq-grid{ grid-template-columns:1fr; }
  .home-compare .compare2-grid{ grid-template-columns:1fr; }
}

/* ---- SEO case cards: solid purple background with white content ---- */
.seocase-card{ background:var(--purple-band); border:none; box-shadow:0 26px 60px rgba(60,0,140,.28); border:1px solid #9f3df4; }
.seocase-card .seocase-name{ color:#fff; }
.seocase-card .seocase-lbl{ color:#fff; }
.seocase-card .seocase-num{ color:#fff; }
.seocase-card .seocase-over{ color:rgba(255,255,255,.85); }
.seocase-card .seocase-service{ color:#fff; }
.seocase-card .seocase-link{ color:#fff; }
.seocase-card .seocase-link svg{ color:#fff; }

/* ============================================================
   MOBILE NAVIGATION (hamburger + drawer)
   ============================================================ */
.nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; margin-left:4px; border:none; background:transparent; cursor:pointer; padding:0; position:relative; z-index:2; }
.nav-toggle span{ display:block; width:24px; height:2px; margin:0 auto; background:var(--black); border-radius:2px; transition:transform .28s ease, opacity .2s ease; }
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{ position:fixed; inset:0; z-index:55; visibility:hidden; }
.mobile-nav::before{ content:''; position:absolute; inset:0; background:rgba(0,0,0,.44); opacity:0; transition:opacity .3s ease; }
.mobile-nav-inner{ position:absolute; top:0; right:0; bottom:0; width:min(340px,88vw); background:#fff;
  padding:100px 30px 34px; overflow-y:auto; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:-14px 0 44px rgba(0,0,0,.22); }
body.nav-open{ overflow:hidden; }
body.nav-open .mobile-nav{ visibility:visible; }
body.nav-open .mobile-nav::before{ opacity:1; }
body.nav-open .mobile-nav-inner{ transform:translateX(0); }
.mobile-nav-list{ display:flex; flex-direction:column; }
.mobile-nav-label{ font-family:var(--font-head); font-weight:700; font-size:11px; letter-spacing:1.3px; text-transform:uppercase; color:#9a8fb3; margin:16px 0 4px; }
.mobile-nav-label:first-child{ margin-top:0; }
.mobile-nav-list a{ font-family:var(--font-head); font-weight:600; font-size:18px; color:var(--black); text-decoration:none; padding:11px 0; border-bottom:1px solid #f1eef8; }
.mobile-nav-list a:hover{ color:var(--purple-text); }
.mobile-nav-cta{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.mobile-nav-cta .site-phone{ display:inline-block; color:var(--black); font-family:var(--font-head); font-weight:600; font-size:17px; text-decoration:none; }
.mobile-nav-cta .site-cta{ display:inline-flex; justify-content:center; height:50px; }

@media (max-width:860px){
  .site-header{ z-index:60; }
  .nav-toggle{ display:flex; }
}
@media (max-width:760px){
  .site-header-right{ display:none; }
}

/* ============================================================
   GENERAL MOBILE RESPONSIVE PASS
   ============================================================ */
.reveal-content{ overflow-x:clip; }

@media (max-width:820px){
  .svc-hero{ padding:60px 20px 46px; }
  .svc-hero-ctas{ flex-wrap:wrap; }
  .svc-hero-ctas .hero-btn{ flex:1 1 auto; justify-content:center; text-align:center; }
  .svc-hero-trust{ gap:16px; }
  .lets-talk{ white-space:normal; font-size:clamp(28px,7vw,46px); }
  .lets-talk-section{ padding:64px 16px; }
  .proposal-card{ padding:34px 22px; border-radius:22px; }
  .proposal-grid{ grid-template-columns:1fr; gap:40px; }
  .endcta{ padding:64px 18px; }
  .endcta-partners{ margin-top:44px; }
  /* remaining two-column layouts stack */
  .core2-grid,.seo3-top,.seo3-panel,.svc-split-grid,.svc-problem-grid,.svc-stats-2col,
  .valueprop-head,.svc-valueprop .svc-wrap,.svc-split .svc-wrap,.svc-oneoff .svc-wrap{ grid-template-columns:1fr !important; gap:34px; }
}

@media (max-width:640px){
  .svc-wrap{ padding:0 18px; }
  .price-grid,.work-grid,.why-grid,.why-grid-3,.phil-grid,.ind-grid,.seo3-cards,
  .faq2-grid,.testi-grid,.engage-grid,.bignums-grid,.compare2-grid,.proc-grid,
  .proc-grid-4,.platform-row,.cases-grid,.blog-grid{ grid-template-columns:1fr !important; }
  /* trim heavy section padding on phones */
  .svc-pricing,.svc-core,.svc-industries,.svc-compare,.svc-compare-table,.svc-problem,
  .svc-work,.svc-addons,.svc-faq,.svc-platforms,.svc-engage,.svc-logos,.svc-testi,
  .svc-process,.svc-bignums,.svc-care,.seocase,.svc-valueprop,.home-compare,.home-reviews,
  .home-cta,.home-faq,.blog-section,.svc-stats,.svc-split{ padding-top:52px; padding-bottom:52px; }
  .svc-section-head{ margin-bottom:30px; }
  .partner-strip{ gap:26px; }
  .partner-strip img{ height:26px; }
}

@media (max-width:520px){
  .svc-hero-title,.pricing-hero-title{ font-size:clamp(30px,8vw,40px); }
  .svc-h2{ font-size:clamp(26px,7vw,34px); }
  .proposal-card{ padding:26px 16px; }
  .btn-pill,.hero-btn,.svc-btn{ font-size:15px; }
}

/* ============================================================
   HOME "Digital Marketing Services" — responsive grid (replaces fixed canvas)
   ============================================================ */
.home-services{ background:var(--purple-band); padding:84px 24px 92px; }
.home-services .home-services-head{ max-width:1240px; margin:0 auto 46px; }
.home-services .services-heading{ position:static; left:auto; top:auto; white-space:normal; color:#fff; font-size:clamp(32px,4.4vw,56px); line-height:1.05; margin:0 0 16px; }
.home-services .services-intro{ position:static; left:auto; top:auto; width:auto; max-width:680px; color:rgba(255,255,255,.85); font-size:16px; }
.home-services-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.hsvc-card{ display:flex; flex-direction:column; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); border-radius:22px; padding:32px 30px; transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.hsvc-card:hover{ background:#fff; border-color:#fff; transform:translateY(-4px); box-shadow:0 24px 50px rgba(0,0,0,.22); }
.hsvc-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:20px; }
.hsvc-icon{ display:inline-flex; }
.hsvc-icon svg{ width:46px; height:46px; }
.hsvc-icon svg path{ fill:#fff; transition:fill .25s ease; }
.hsvc-card:hover .hsvc-icon svg path{ fill:#111; }
.hsvc-num{ font-family:var(--font-head); font-weight:700; font-size:30px; color:rgba(255,255,255,.28); line-height:1; }
.hsvc-card:hover .hsvc-num{ color:rgba(131,66,251,.4); }
.hsvc-title{ font-family:var(--font-head); font-weight:700; font-size:23px; color:#fff; margin:0 0 12px; }
.hsvc-card:hover .hsvc-title{ color:var(--purple-text); }
.hsvc-desc{ font-family:var(--font-body); font-size:15px; line-height:1.55; color:rgba(255,255,255,.88); margin:0 0 18px; }
.hsvc-card:hover .hsvc-desc{ color:#555; }
.hsvc-feats{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; margin:auto 0 0; padding:0; }
.hsvc-feats li{ position:relative; padding-left:24px; font-family:var(--font-head); font-weight:500; font-size:13px; line-height:1.3; color:rgba(255,255,255,.8); }
.hsvc-card:hover .hsvc-feats li{ color:#444; }
.hsvc-feats li::before{ content:""; position:absolute; left:0; top:1px; width:17px; height:17px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center no-repeat; }
.hsvc-card:hover .hsvc-feats li::before{ border-color:var(--purple-text); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238342fb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.home-services .services-cta{ position:static; left:auto; top:auto; transform:none; white-space:normal; max-width:1240px; margin:52px auto 0; justify-content:center; flex-wrap:wrap; text-align:center; }
.home-services .services-cta-text{ white-space:normal; }
.home-services .services-cta-btn{ flex:none; }
@media (max-width:960px){ .home-services-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .home-services{ padding:56px 18px 64px; }
  .home-services-grid{ grid-template-columns:1fr; }
  .home-services .services-cta{ flex-direction:column; text-align:center; gap:16px; }
  .hsvc-feats{ grid-template-columns:1fr; }
}

/* ---- Industries "Who We Serve" (home) responsive ---- */
@media (max-width:1000px){ .serve-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px){
  .serve-wrap{ padding:64px 18px 10px; }
  .serve-heading{ font-size:clamp(28px,6vw,40px); }
  .serve-intro{ margin-bottom:36px; }
}
@media (max-width:560px){ .serve-grid{ grid-template-columns:1fr; } .serve-footer{ flex-direction:column; gap:16px; text-align:center; } }

/* ---- "How We Work" process (home) responsive ---- */
@media (max-width:900px){
  .proc-section{ padding:60px 0; }
  .proc-layout{ grid-template-columns:1fr; gap:34px; padding:0 20px; }
  .proc-left-inner{ position:static; }
  .journey-heading{ font-size:clamp(28px,7vw,40px); }
  .proc-progress{ display:none; }
  .proc-card{ position:relative !important; top:auto !important; transform:none !important; opacity:1 !important;
    padding:26px 24px; gap:18px; flex-direction:column; align-items:flex-start; margin-bottom:18px; }
}

/* ---- Let's Talk / proposal form — mobile ---- */
@media (max-width:820px){
  .promo-img{ width:74%; }
  .promo-stat{ left:0; }
  .promo-quote{ right:0; }
}
@media (max-width:560px){
  .promo-media{ display:flex; flex-direction:column; gap:14px; }
  .promo-img{ width:100%; aspect-ratio:16/10; margin:0; }
  .promo-badge{ position:static; max-width:none; margin:0; }
  .lets-talk-section{ padding:52px 14px; }
  .proposal-card{ padding:24px 16px; }
}

/* ---- Let's Talk form + services CTA — broaden stacking for tablets ---- */
@media (max-width:980px){
  .proposal-grid{ grid-template-columns:1fr !important; gap:44px; }
  .proposal-card{ padding:40px 28px; }
}
@media (max-width:720px){
  .home-services .services-cta{ flex-direction:column; gap:16px; margin-top:40px; }
  .services-cta-btn{ width:auto; }
}
.proposal-form input,
.proposal-form textarea,
.proposal-form select{ max-width:100%; box-sizing:border-box; }

/* ---- Let's Talk form: stop fields overflowing the card on mobile ---- */
@media (max-width:980px){
  .proposal-grid{ grid-template-columns:minmax(0,1fr) !important; }
  .proposal-left,.proposal-right,.proposal-form,.field,
  .proposal-form .wpcf7-form-control-wrap{ min-width:0; max-width:100%; }
  .proposal-card{ overflow-x:hidden; }
  .field input[type="text"],.field input[type="email"],.field input[type="tel"],
  .field textarea,.proposal-form .wpcf7-form-control{ width:100%; max-width:100%; box-sizing:border-box; }
  .promo-media,.promo-badge{ max-width:100%; }
}

/* ---- Proposal form actions: phone under the submit button on mobile ---- */
@media (max-width:560px){
  .proposal-actions{ flex-direction:column; align-items:flex-start; gap:14px; }
  .proposal-submit{ width:100%; text-align:center; }
}

/* ============================================================
   CONTACT US page
   ============================================================ */
.contact-hero{ background:linear-gradient(160deg,#7a25da 0%, #5a00ab 100%); color:#fff; padding:74px 24px 66px; text-align:center; }
.contact-hero .svc-wrap{ max-width:820px; }
.contact-hero .svc-crumbs{ justify-content:center; margin:0 0 18px; }
.contact-hero .svc-crumbs a,.contact-hero .svc-crumbs .sep{ color:rgba(255,255,255,.7); }
.contact-hero .svc-crumbs a:hover,.contact-hero .svc-crumbs .current{ color:#fff; }
.contact-hero-eyebrow{ font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:1.6px; text-transform:uppercase; color:#e0ccff; margin:0 0 14px; }
.contact-hero-title{ font-family:var(--font-head); font-weight:700; font-size:clamp(32px,5vw,54px); line-height:1.08; margin:0 auto 18px; }
.contact-hero-sub{ font-family:var(--font-body); font-size:18px; line-height:1.6; color:rgba(255,255,255,.85); max-width:640px; margin:0 auto; }

.contact-methods{ background:#fff; padding:76px 24px 40px; }
.ctm-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.ctm-card{ display:flex; flex-direction:column; background:#fff; border:1px solid #ece7f6; border-radius:22px; padding:36px 32px; box-shadow:0 12px 34px rgba(33,0,80,.05); transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.ctm-card:hover{ border-color:var(--purple-text); transform:translateY(-5px); box-shadow:0 22px 48px rgba(113,0,211,.12); }
.ctm-icon{ width:56px; height:56px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center; background:#f3ebff; color:var(--purple-band); margin-bottom:22px; }
.ctm-icon svg{ width:26px; height:26px; }
.ctm-title{ font-family:var(--font-head); font-weight:700; font-size:21px; color:var(--black); margin:0 0 10px; }
.ctm-text{ font-family:var(--font-body); font-size:15.5px; line-height:1.55; color:#5c5c66; margin:0 0 18px; }
.ctm-link{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--purple-text); text-decoration:none; }
.ctm-link svg{ width:18px; height:18px; transition:transform .2s ease; }
.ctm-link:hover svg{ transform:translateX(4px); }
.ctm-emails{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ctm-emails li{ display:flex; flex-direction:column; gap:1px; }
.ctm-email-label{ font-family:var(--font-head); font-weight:600; font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:#9a8fb3; }
.ctm-emails a{ font-family:var(--font-body); font-size:15px; color:var(--purple-text); text-decoration:none; }
.ctm-emails a:hover{ text-decoration:underline; }

.contact-details{ background:#fff; padding:20px 24px 34px; }
.contact-form-section{ padding-top:26px; }
.contact-form-section .lets-talk{ margin-bottom:30px; }
.ctd-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; border-top:1px solid #ece7f6; padding-top:44px; }
.ctd-item{ display:flex; align-items:flex-start; gap:16px; }
.ctd-icon{ flex:none; width:46px; height:46px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; background:#f3ebff; color:var(--purple-band); }
.ctd-icon svg{ width:22px; height:22px; }
.ctd-item > div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ctd-label{ font-family:var(--font-head); font-weight:600; font-size:12px; letter-spacing:.6px; text-transform:uppercase; color:#9a8fb3; }
.ctd-value{ font-family:var(--font-body); font-size:16px; color:var(--black); text-decoration:none; overflow-wrap:break-word; }
a.ctd-value:hover{ color:var(--purple-text); }

@media (max-width:900px){
  .ctm-grid{ grid-template-columns:1fr; }
  .ctd-grid{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .contact-methods{ padding:56px 18px 30px; }
  .contact-details{ padding:16px 18px 60px; }
}
@media (max-width:560px){ .ctd-grid{ grid-template-columns:1fr; } }