@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
/* ==========================================================================
   Infiniq Studios — shared stylesheet
   ========================================================================== */


:root{
  /* colors */
  --ink:#0c2b21;
  --ink-soft:#4d6058;
  --muted:#6b7a73;
  --cream:#f7f3e7;
  --cream-2:#fbf9f1;
  --paper:#fffefa;
  --white:#ffffff;
  --border:#e6e0cd;

  --green-900:#052318;
  --green-800:#08331f;
  --green-700:#0e4a2d;
  --green-600:#157a41;
  --green-500:#1ea655;
  --green-400:#2fbf67;
  --green-bright:#22c55e;

  --purple:#8b7cf6;
  --purple-light:#efecff;
  --orange:#f97316;
  --orange-light:#fdecdc;
  --mint-light:#e9f9ee;

  /* type */
  --font-display:"Plus Jakarta Sans", sans-serif;
  --font-body:"Plus Jakarta Sans", sans-serif;

  /* layout */
  --maxw:1240px;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;
  --radius-pill:999px;

  --shadow-soft:0 20px 45px -25px rgba(6,40,26,0.35);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  margin:0;
  line-height:1.12;
  letter-spacing:-0.01em;
}

p{ margin:0; }

ul{ list-style:none; margin:0; padding:0; }

button{ font-family:inherit; cursor:pointer; }

:focus-visible{
  outline:3px solid var(--green-bright);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  display:inline-block;
  font-size:0.8rem;
  font-weight:540;
  color:#71717a;
  background:transparent;
  padding:0;
  border-radius:0;
  margin-bottom:18px;
}
.eyebrow.on-dark{
  color:#bff5d3;
  background:rgba(255,255,255,0.08);
}
.eyebrow.on-purple{ color:#fff; background:rgba(255,255,255,0.18); }

.section{
  padding:96px 0;
}
.section-head{
  max-width:640px;
  margin:0 0 56px;
}
.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.section-head h2{
  font-size:clamp(1.9rem, 3.2vw, 2.6rem);
  margin-bottom:14px;
}
.section-head p{
  color:var(--muted);
  font-size:1.05rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  font-weight:540;
  font-size:0.95rem;
  border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }

.btn-primary{
  background:linear-gradient(180deg,#2fd06c,#199a49);
  color:#fff;
  box-shadow:0 12px 24px -10px rgba(20,140,70,0.55);
}
.btn-primary:hover{ box-shadow:0 16px 30px -10px rgba(20,140,70,0.65); }

.btn-outline{
  background:transparent;
  border-color:rgba(255,255,255,0.5);
  color:#fff;
}
.btn-outline:hover{ background:rgba(255,255,255,0.1); }

.btn-outline-dark{
  background:transparent;
  border-color:var(--border);
  color:var(--ink);
}
.btn-outline-dark:hover{ background:var(--cream); }

.btn-sm{ padding:10px 18px; font-size:0.85rem; }
.btn-block{ width:100%; }

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:540;
  font-size:0.92rem;
}
.link-arrow svg{ transition:transform .18s ease; }
.link-arrow:hover svg{ transform:translate(3px,-2px); }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  padding:18px 20px;
}
.nav-shell{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:rgba(247,243,231,0.9);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:var(--radius-pill);
  padding:10px 12px 10px 22px;
  box-shadow:0 10px 30px -18px rgba(5,35,24,0.35);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:630;
  font-size:1.15rem;
  color:var(--ink);
}
.brand .logo-mark{ display:flex; }
.brand small{
  display:block;
  font-size:0.5rem;
  letter-spacing:0.25em;
  font-weight:630;
  color:var(--green-600);
  margin-top:-2px;
}

.nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  margin-right: 28px;
}
.nav-links a{
  font-size:0.95rem;
  font-weight:450;
  color:var(--ink-soft);
  padding-bottom:4px;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a.active{
  color:var(--ink);
  border-color:var(--green-bright);
}

.nav-cta{ display:flex; align-items:center; gap:10px; }

.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--border);
  background:#fff;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";
  display:block;
  width:18px;
  height:2px;
  background:var(--ink);
  position:relative;
  transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }
.nav-toggle.is-open span{ background:transparent; }
.nav-toggle.is-open span::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span::after{ transform:translateY(-6px) rotate(-45deg); }

.mobile-menu{
  max-width:var(--maxw);
  margin:8px auto 0;
  background:#fff;
  border-radius:20px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  max-height:0;
  transition:max-height .3s ease;
}
.mobile-menu.is-open{ max-height:420px; }
.mobile-menu ul{ padding:10px 8px; }
.mobile-menu a{
  display:block;
  padding:13px 16px;
  font-weight:450;
  border-radius:12px;
}
.mobile-menu a:hover{ background:var(--cream); }
.mobile-menu .mobile-cta{ padding:8px 16px 16px; }

/* ==========================================================================
   Hero sections
   ========================================================================== */
.hero{
  position:relative;
  padding:80px 24px 70px;
  color:#fff;
  overflow:hidden;
}
.hero-green{
  background:
    radial-gradient(120% 140% at 15% -10%, rgba(45,190,110,0.55), transparent 55%),
    linear-gradient(160deg, var(--green-900) 0%, var(--green-800) 45%, var(--green-600) 100%);
}
.hero-purple{
  background:linear-gradient(165deg, #1b1240 0%, #5b3fc4 45%, #8b7cf6 100%);
}
.hero-sunset{
  background:linear-gradient(to top, #663718 50%, to bottom,#FF8A3B 100%);
}
.hero-mint{
  background:linear-gradient(160deg, var(--green-800) 0%, var(--green-600) 60%, var(--green-400) 100%);
}
.hero-grey{
  background:linear-gradient(160deg, #f7f3e7 0%, #f2ede0 60%, #e6dfcb 100%);
  color:var(--ink);
}


.hero-inner{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:2;
  top: -100px;
}
.hero h1{
  color:#fff;
  font-size:clamp(2.1rem, 5.4vw, 3.6rem);
  font-weight:630;
  margin-bottom:22px;
}
.hero h1 .accent{ color:var(--green-bright); }
.hero-sunset h1 .accent, .hero-purple h1 .accent{ color:#fff; }
.hero p.lede{
  font-size:clamp(1rem,1.6vw,1.15rem);
  color:rgba(255,255,255,0.82);
  max-width:640px;
  margin:0 auto 34px;
}
.hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:44px;
}

.hero-tag-label{
  font-size:0.8rem;
  letter-spacing:0.08em;
  color:rgba(255,255,255,0.6);
  margin-bottom:14px;
}
.hero-pills{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-pill{
  background:rgba(255,255,255,0.95);
  color:var(--ink);
  font-size:0.85rem;
  font-weight:540;
  padding:9px 18px;
  border-radius:var(--radius-pill);
}

.hero-filters{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.hero-filter{
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.35);
  color:#fff;
  font-size:0.85rem;
  font-weight:540;
  padding:9px 18px;
  border-radius:var(--radius-pill);
  transition:background .2s ease;
}
.hero-filter:hover, .hero-filter.active{ background:rgba(255,255,255,0.32); }

/* stat strip under home hero */
.stat-strip{
  max-width:var(--maxw);
  margin:0 auto;
  transform:translateY(56px);
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.stat-card{
  background:#fff;
  border-radius:20px;
  padding:30px 20px;
  text-align:center;
  box-shadow:var(--shadow-soft);
}
.stat-card .num{
  font-family:var(--font-display);
  font-size:2.1rem;
  font-weight:630;
  color:var(--green-bright);
  margin-bottom:6px;
}
.stat-card .label{ color:var(--muted); font-size:0.92rem; }
.hero-spacer{ height:56px; }

/* ==========================================================================
   Grid cards — "What we do"
   ========================================================================== */
.card-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.service-card{
  background:var(--cream);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:28px 24px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 40px -26px rgba(5,35,24,0.4);
}
.service-card .icon{
  width: 64px;
  height: 64px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
}
.service-card h3{ font-size:1.08rem; margin-bottom:8px; }
.service-card p{ color:var(--muted); font-size:0.93rem; }

.tone-a{ background:#f2ede0; } .tone-a .icon{ background:#e6dfcb; color:#7a6a3d; }
.tone-b{ background:var(--orange-light); } .tone-b .icon{ background:#fbd7b8; color:var(--orange); }
.tone-c{ background:var(--purple-light); } .tone-c .icon{ background:#ded5fd; color:var(--purple); }
.tone-d{ background:var(--mint-light); } .tone-d .icon{ background:#c9f0d6; color:var(--green-600); }
.tone-e{ background:#eef1ef; } .tone-e .icon{ background:#dfe6e2; color:#3d5a4c; }
.tone-f{ background:#f2ede0; } .tone-f .icon{ background:#e6dfcb; color:#7a6a3d; }

.center-btn{ display:flex; justify-content:center; margin-top:40px; border-radius:var(--radius-lg); }

/* ==========================================================================
   Feature cards — "Trusted Partner"
   ========================================================================== */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.feature-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:30px 26px;
}
.feature-card .icon{
  width:44px; height:44px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  background:var(--cream);
}
.feature-card h3{ font-size:1.05rem; margin-bottom:8px; }
.feature-card p{ color:var(--muted); font-size:0.92rem; }
.section-cream{ background:var(--cream-2); }

/* ==========================================================================
   Process steps
   ========================================================================== */
.section-dark{
  background:linear-gradient(180deg, var(--green-900), var(--green-700));
  color:#fff;
}
.section-dark .section-head h2, .section-dark .section-head p{ color:#fff; }
.section-dark .section-head p{ color:rgba(255,255,255,0.72); }

.process-row{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  align-items:stretch;
  justify-content:center;
}
.process-step{
  background:#fff;
  color:var(--ink);
  border-radius:16px;
  padding:24px 20px;
  width:220px;
  box-shadow:0 20px 40px -28px rgba(0,0,0,0.5);
}
.process-step .icon{
  width:38px; height:38px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  background:var(--cream);
}
.process-step .stage-num{
  display:block;
  font-size:0.72rem;
  font-weight:630;
  letter-spacing:0.05em;
  color:var(--orange);
  margin-bottom:6px;
}
.process-step h3{ font-size:1.05rem; margin-bottom:10px; }
.process-step p{
  font-size:0.85rem;
  color:var(--muted);
  background:var(--cream);
  border-radius:10px;
  padding:12px;
  margin:0;
}
.process-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  color:var(--green-bright);
  flex-shrink:0;
}
.process-wrap-item{ display:flex; align-items:stretch; }
/* ==========================================================================
   FEATURED SERVICES — HORIZONTAL CARD CAROUSEL
   ========================================================================== */

.carousel-shell {
  display: grid;
  grid-template-columns: 0.85fr 1.55fr;
  gap: 48px;
  align-items: center;

  width: 100%;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   LEFT CONTENT
   -------------------------------------------------------------------------- */

.carousel-copy {
  min-width: 0;
}

.carousel-copy .eyebrow {
  display: block;
  margin-bottom: 20px;
}

.carousel-copy h2 {
  max-width: 390px;

  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
  line-height: 1.08;

  margin-bottom: 18px;
}

.carousel-copy > p {
  max-width: 430px;

  line-height: 1.55;
}


/* --------------------------------------------------------------------------
   ARROW CONTROLS
   -------------------------------------------------------------------------- */

.carousel-copy .controls {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: 105px;
}

.carousel-arrow {
  width: 46px;
  height: 46px;

  flex: 0 0 46px;

  border-radius: 50%;

  background: #fff;
  border: 1px solid var(--border);

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--green-700);

  box-shadow:
    0 8px 22px rgba(0, 55, 58, 0.08);

  transition:
    background .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.carousel-arrow:hover {
  background: var(--cream);
  transform: translateY(-2px);

  box-shadow:
    0 10px 26px rgba(0, 55, 58, 0.12);
}


/* --------------------------------------------------------------------------
   CAROUSEL VIEWPORT
   -------------------------------------------------------------------------- */

.carousel-track {

  position: relative;

  display: flex;
  align-items: stretch;

  gap: 24px;

  min-height: 445px;

  width: calc(100% + 160px);

  overflow: hidden;

  padding: 0;

  margin: 0;
}


/* --------------------------------------------------------------------------
   FEATURE CARDS
   -------------------------------------------------------------------------- */

.feature-slide {

  position: relative;

  flex: 0 0 368px;

  width: 368px;
  height: 445px;

  box-sizing: border-box;

  border-radius: 22px;

  padding: 32px 32px 30px;

  display: flex;
  flex-direction: column;

  opacity: 1;

  transform: none;

  pointer-events: auto;

  overflow: hidden;

  transition:
    opacity .35s ease,
    transform .35s ease;
}


/* --------------------------------------------------------------------------
   CARD ICON
   -------------------------------------------------------------------------- */

.feature-slide .icon {

  width: 64px;
  height: 64px;

  flex: 0 0 64px;

  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 34px;

  background: rgba(255, 255, 255, 0.16);
}


/* --------------------------------------------------------------------------
   CARD TITLE
   -------------------------------------------------------------------------- */

.feature-slide h3 {

  font-size: 1.55rem;
  line-height: 1.2;

  margin-bottom: 10px;
}


/* --------------------------------------------------------------------------
   CARD DESCRIPTION
   -------------------------------------------------------------------------- */

.feature-slide p {

  font-size: 1rem;
  line-height: 1.5;

  margin: 0;

  opacity: .88;

  max-width: 310px;
}


/* --------------------------------------------------------------------------
   CARD LINK
   -------------------------------------------------------------------------- */

.feature-slide .link-arrow {

  margin-top: auto;

  padding-top: 20px;

  border-top:
    1px solid rgba(255, 255, 255, 0.2);

  display: flex;
  align-items: center;
  gap: 8px;

  font-weight:540;

  text-decoration: none;
}


/* --------------------------------------------------------------------------
   DARK CARD
   -------------------------------------------------------------------------- */

.slide-dark {

  background:
    linear-gradient(
      160deg,
      var(--green-900) 0%,
      var(--green-700) 45%,
      var(--green-600) 100%
    );

  color: #fff;
}


/* --------------------------------------------------------------------------
   LIGHT CARD
   -------------------------------------------------------------------------- */

.slide-light {

  background: var(--cream);

  color: var(--ink);
}

.slide-light .icon {

  background: rgba(255, 255, 255, 0.55);

  color: var(--green-700);
}

.slide-light .link-arrow {

  color: var(--green-600);

  border-top-color: var(--border);
}


/* --------------------------------------------------------------------------
   DO NOT USE THE OLD ABSOLUTE SLIDE BEHAVIOUR
   -------------------------------------------------------------------------- */

.carousel-track .feature-slide {

  position: relative;

  inset: auto;

  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}


/* ==========================================================================
   LAPTOP
   ========================================================================== */

@media (max-width: 1200px) {

  .carousel-shell {

    grid-template-columns:
      0.8fr 1.4fr;

    gap: 32px;
  }

  .carousel-track {

    width: calc(100% + 100px);

    gap: 20px;

    min-height: 420px;
  }

  .feature-slide {

    flex-basis: 330px;

    width: 330px;
    height: 420px;

    padding: 28px;
  }
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1024px) {

  .carousel-shell {

    grid-template-columns: 1fr;

    gap: 42px;

    overflow: hidden;
  }

  .carousel-copy h2 {

    max-width: 600px;
  }

  .carousel-copy > p {

    max-width: 650px;
  }

  .carousel-copy .controls {

    margin-top: 30px;
  }

  .carousel-track {

    width: 100%;

    min-height: 420px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scrollbar-width: none;
  }

  .carousel-track::-webkit-scrollbar {
    display: none;
  }

  .feature-slide {

    flex: 0 0 340px;

    width: 340px;
    height: 420px;
  }
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 720px) {

  .carousel-shell {

    grid-template-columns: 1fr;

    gap: 30px;
  }

  .carousel-copy h2 {

    font-size: 2rem;

    max-width: 100%;
  }

  .carousel-copy > p {

    font-size: .95rem;

    max-width: 100%;
  }

  .carousel-copy .controls {

    margin-top: 24px;
  }

  .carousel-track {

    width: 100%;

    min-height: 400px;

    gap: 16px;

    overflow-x: auto;
    overflow-y: hidden;

    padding-bottom: 4px;
  }

  .feature-slide {

    flex: 0 0 calc(100vw - 56px);

    width: calc(100vw - 56px);

    max-width: 368px;

    height: 400px;

    padding: 28px 24px;
  }

  .feature-slide .icon {

    width: 56px;
    height: 56px;

    flex-basis: 56px;

    margin-bottom: 28px;
  }

  .feature-slide h3 {

    font-size: 1.35rem;
  }

  .feature-slide p {

    font-size: .92rem;
  }
}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

  .feature-slide {

    flex-basis: calc(100vw - 40px);

    width: calc(100vw - 40px);

    height: 380px;

    padding: 24px 20px;
  }

  .carousel-track {

    min-height: 380px;
  }
}
/* ==========================================================================
   Testimonials
   ========================================================================== */
.section-pattern{
  position:relative;
  background:var(--cream-2);
}

/* Perspective vectors — a soft, distant ceiling/floor effect rather than a flat grid. */
.section-pattern::before,
.section-pattern::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:170px;
  pointer-events:none;
  z-index:-1;
  opacity:.70;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}

.section-pattern::before{
  top:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 170' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23e6e0cd' stroke-width='1.2'%3E%3Cpath d='M0 18 Q700 58 1400 18'/%3E%3Cpath d='M0 55 Q700 100 1400 55'/%3E%3Cpath d='M0 96 Q700 135 1400 96'/%3E%3Cpath d='M0 140 Q700 165 1400 140'/%3E%3Cpath d='M120 0 Q410 65 700 170'/%3E%3Cpath d='M270 0 Q485 68 700 170'/%3E%3Cpath d='M430 0 Q590 70 700 170'/%3E%3Cpath d='M570 0 Q645 70 700 170'/%3E%3Cpath d='M700 0 L700 170'/%3E%3Cpath d='M830 0 Q755 70 700 170'/%3E%3Cpath d='M970 0 Q810 68 700 170'/%3E%3Cpath d='M1130 0 Q915 65 700 170'/%3E%3Cpath d='M1280 0 Q990 58 700 170'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);
}

.section-pattern::after{
  bottom:0;
  transform:scaleY(-1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 170' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23e6e0cd' stroke-width='1.2'%3E%3Cpath d='M0 18 Q700 58 1400 18'/%3E%3Cpath d='M0 55 Q700 100 1400 55'/%3E%3Cpath d='M0 96 Q700 135 1400 96'/%3E%3Cpath d='M0 140 Q700 165 1400 140'/%3E%3Cpath d='M120 0 Q410 65 700 170'/%3E%3Cpath d='M270 0 Q485 68 700 170'/%3E%3Cpath d='M430 0 Q590 70 700 170'/%3E%3Cpath d='M570 0 Q645 70 700 170'/%3E%3Cpath d='M700 0 L700 170'/%3E%3Cpath d='M830 0 Q755 70 700 170'/%3E%3Cpath d='M970 0 Q810 68 700 170'/%3E%3Cpath d='M1130 0 Q915 65 700 170'/%3E%3Cpath d='M1280 0 Q990 58 700 170'/%3E%3C/g%3E%3C/svg%3E");
  mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent);
  -webkit-mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent);
}

.section-pattern > .container{
  position:relative;
  z-index:1;
}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}
.testimonial-card{
  background:#fff;
  border-radius:20px;
  padding:34px 30px;
  box-shadow:var(--shadow-soft);
}
.testimonial-card .quote-mark{ color:var(--green-700); margin-bottom:18px; }
.testimonial-card p.quote{ font-size:1.02rem; margin-bottom:26px; }
.avatar-row{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:42px; height:42px;
  border-radius:50%;
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem;
  font-weight:630;
  color:var(--green-700);
}
.avatar-row .who strong{ display:block; font-size:0.95rem; }
.avatar-row .who span{ font-size:0.82rem; color:var(--muted); }

/* ==========================================================================
   Contact section
   ========================================================================== */
.contact-shell{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.contact-copy .eyebrow{ background:transparent; padding:0; color:var(--green-600); }
.contact-copy h2{ font-size:clamp(1.9rem,3.4vw,2.5rem); margin:10px 0 18px; }
.contact-copy p{ color:var(--muted); font-size:1.02rem; max-width:420px; }

.contact-form{
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  padding:36px;
  box-shadow:var(--shadow-soft);
  
}
.contact-form h3{ font-size:1.2rem; margin-bottom:24px; }
.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-size:0.9rem;
  font-weight:540;
  margin-bottom:8px;
}
.field label .req{ color:var(--orange); }
.field input, .field select, .field textarea{
  width:100%;
  padding:13px 16px;
  border-radius:12px;
  border:1.4px solid var(--border);
  font-family:inherit;
  font-size:0.95rem;
  background:#fff;
  color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--green-500);
  box-shadow:0 0 0 4px rgba(34,197,94,0.15);
  outline:none;
}
.field textarea{ resize:vertical; min-height:110px; }
.phone-field{ display:flex; gap:10px; }
.phone-field select{ width:110px; flex-shrink:0; }
.field-error{
  color:#c0392b;
  font-size:0.82rem;
  margin-top:6px;
  display:none;
}
.field.has-error input, .field.has-error select, .field.has-error textarea{
  border-color:#c0392b;
}
.field.has-error .field-error{ display:block; }
.form-note{
  text-align:center;
  font-size:0.88rem;
  color:var(--green-700);
  margin-top:14px;
  display:none;
}
.form-note.show{ display:block; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  background:linear-gradient(180deg, var(--green-800), var(--green-500));
  color:#fff;
  padding:70px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.footer-brand .brand{ color:#fff; margin-bottom:14px; }
.footer-brand p{ color:rgba(255,255,255,0.75); font-size:0.92rem; max-width:280px; margin-bottom:20px; }
.footer-contact{ font-size:0.92rem; color:rgba(255,255,255,0.85); margin-bottom:6px; }
.footer-divider{
  width:100%;
  max-width:280px;
  height:1px;
  background:rgba(255,255,255,0.15);
  margin:18px 0;
}
.footer-brand .btn{ margin:16px 0 20px; }
.social-row{ display:flex; gap:10px; }
.social-row a{
  width:36px; height:36px;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.social-row a:hover{ background:rgba(255,255,255,0.25); }

.footer-col h4{
  font-size:0.78rem;
  letter-spacing:0.06em;
  color:rgba(255,255,255,0.55);
  margin-bottom:18px;
  text-transform:uppercase;
  font-weight:630;
}
.footer-col ul li{ margin-bottom:13px; }
.footer-col a{ font-size:0.93rem; color:rgba(255,255,255,0.9); }
.footer-col a:hover{ text-decoration:underline; }

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  padding-top:22px;
  font-size:0.85rem;
  color:rgba(255,255,255,0.7);
}
.footer-bottom .legal-links{ display:flex; gap:20px; flex-wrap:wrap; }

/* ==========================================================================
   Services page — alternating detail blocks
   ========================================================================== */
.services-nav-strip{
  padding:16px 0;
  background:var(--cream-2);
  border-bottom:1px solid var(--border);
}
.services-nav-strip .container{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scrollbar-width:none;
}
.services-nav-strip a{
  font-size:0.85rem;
  font-weight:540;
  color:var(--muted);
  white-space:nowrap;
  padding:8px 4px;
}
.services-nav-strip a:hover{ color:var(--ink); }

.detail-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding:64px 0;
  border-bottom:1px solid var(--border);
}
.detail-block:last-child{ border-bottom:none; }
.detail-copy .icon-box{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.detail-copy h3{ font-size:1.7rem; margin-bottom:14px; }
.detail-copy > p{ color:var(--muted); margin-bottom:20px; max-width:440px; }
.check-list{ margin-bottom:24px; }
.check-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.93rem;
  padding:7px 0;
  border-bottom:1px dashed var(--border);
}
.check-list li:last-child{ border-bottom:none; }
.check-list svg{ flex-shrink:0; }

.detail-visual{
  border-radius:26px;
  padding:36px;
  min-height:280px;
  position:relative;
}
.floating-chip{
  background:#fff;
  border-radius:12px;
  padding:12px 18px;
  font-size:0.85rem;
  font-weight:540;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 14px 30px -18px rgba(0,0,0,0.35);
  position:absolute;
  width:max-content;
  max-width:78%;
}
.chip-dot{ width:8px; height:8px; border-radius:3px; flex-shrink:0; }
.chip-1{ top:14%; left:6%; }
.chip-2{ top:34%; left:0; }
.chip-3{ top:56%; left:30%; }
.chip-4{ top:76%; left:14%; }

.visual-purple{ background:linear-gradient(160deg,#c8bdfb,#a793f8); }
.visual-orange{ background:linear-gradient(160deg,#fbd8b3,#f6b878); }
.visual-mint{ background:linear-gradient(160deg,#bdeccb,#8fdca8); }
.visual-cream{ background:linear-gradient(160deg,#f1ecdc,#e4dcc2); }
.visual-lav{ background:linear-gradient(160deg,#d9d3fb,#b8adf6); }

.coming-soon-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.coming-card{
  border-radius:22px;
  padding:34px 30px;
  border:1px solid var(--border);
}
.coming-card .icon{
  width:48px; height:48px;
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.coming-card h3{ font-size:1.2rem; margin-bottom:10px; }
.coming-card > p{ color:var(--muted); font-size:0.9rem; margin-bottom:20px; }
.dot-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.92rem;
  padding:6px 0;
}
.dot-list .dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.coming-card .link-arrow{ margin-top:22px; }

.tone-purple-soft{ background:#f4f2ff; } .tone-purple-soft .icon{ background:#e4defd; color:var(--purple); }
.tone-orange-soft{ background:var(--orange-light); } .tone-orange-soft .icon{ background:#fbd7b8; color:var(--orange); }
.tone-mint-soft{ background:var(--mint-light); } .tone-mint-soft .icon{ background:#c9f0d6; color:var(--green-600); }

/* ==========================================================================
   Blog page
   ========================================================================== */
.blog-toolbar{ margin-top:-40px; position:relative; z-index:3;top: 80px; }
.search-box{
  background:#fff;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
}
.search-box input{
  border:none;
  outline:none;
  width:100%;
  font-size:0.95rem;
  font-family:inherit;
}
.category-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.category-pill{
  padding:9px 18px;
  border-radius:var(--radius-pill);
  border:1.4px solid var(--border);
  font-size:0.85rem;
  font-weight:540;
  color:var(--ink-soft);
  background:#fff;
  transition:all .15s ease;
}
.category-pill:hover{ border-color:var(--green-500); }
.category-pill.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

.featured-article{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:36px;
  align-items:center;
  background:var(--cream);
  border-radius:24px;
  padding:20px;
  margin-top:40px;
}
.featured-article .thumb{
  border-radius:18px;
  aspect-ratio:4/3;
  background:linear-gradient(150deg,#fbd8b3,#f6c48a);
}
.article-tag{
  display:inline-block;
  background:#fff;
  border-radius:var(--radius-pill);
  font-size:0.78rem;
  font-weight:630;
  padding:5px 14px;
  margin-bottom:14px;
}
.article-date{ float:right; font-size:0.82rem; color:var(--muted); }
.featured-article h3{ font-size:1.5rem; margin-bottom:12px; }
.featured-article p{ color:var(--muted); margin-bottom:20px; }

.article-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:44px;
}
.article-card{
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}
.article-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.article-card .thumb{ aspect-ratio:16/10; }
.article-card .body{ padding:22px; }
.article-card h3{ font-size:1.08rem; margin:10px 0; }
.article-card p{ color:var(--muted); font-size:0.9rem; margin-bottom:16px; }
.thumb-1{ background:linear-gradient(150deg,#fbd8b3,#f6b878); }
.thumb-2{ background:linear-gradient(150deg,#a6f2c3,#5fdd8e); }
.thumb-3{ background:linear-gradient(150deg,#dcd2fb,#b6a3f7); }
.thumb-4{ background:linear-gradient(150deg,#efe9d8,#ddd2b3); }
.thumb-5{ background:linear-gradient(150deg,#c3d3d3,#93aeae); }
.thumb-6{ background:linear-gradient(150deg,#e5defc,#c1b1f5); }

.no-results{
  text-align:center;
  padding:60px 20px;
  color:var(--muted);
  display:none;
}
.no-results.show{ display:block; }

.newsletter-box{
  margin-top:70px;
  background:var(--cream);
  border-radius:24px;
  padding:50px 30px;
  text-align:center;
}
.newsletter-box .icon-circle{
  width:52px; height:52px;
  border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  box-shadow:0 10px 20px -10px rgba(0,0,0,0.2);
}
.newsletter-box h3{ font-size:1.5rem; margin-bottom:8px; }
.newsletter-box p{ color:var(--muted); margin-bottom:26px; }
.newsletter-form{
  display:flex;
  gap:10px;
  max-width:420px;
  margin:0 auto;
  flex-wrap:wrap;
  justify-content:center;
}
.newsletter-form input{
  flex:1;
  min-width:200px;
  padding:13px 18px;
  border-radius:var(--radius-pill);
  border:1.4px solid var(--border);
  font-family:inherit;
}

/* ==========================================================================
   Case studies page
   ========================================================================== */
.cs-empty{
  background:linear-gradient(150deg,var(--mint-light),#d3f3de);
  border-radius:26px;
  padding:70px 30px;
  text-align:center;
}
.cs-empty .icon-circle{
  width:60px; height:60px;
  border-radius:16px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 26px;
}
.cs-empty h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:14px; }
.cs-empty p{ color:var(--ink-soft); max-width:480px; margin:0 auto 30px; }

.future-preview{
  background:linear-gradient(150deg,var(--mint-light),#c9f0d6);
  border-radius:22px;
  padding:60px 20px 30px;
  margin-bottom:30px;
}
.future-preview .icon-circle{
  width:44px; height:44px;
  border-radius:12px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 40px;
}
.skeleton-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.skeleton-card{
  background:#fff;
  border-radius:14px;
  padding:20px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.skeleton-card .dot{
  width:22px; height:22px;
  border-radius:6px;
  background:var(--mint-light);
  flex-shrink:0;
}
.skeleton-lines{ flex:1; }
.skeleton-lines span{
  display:block;
  height:8px;
  border-radius:4px;
  background:var(--border);
  margin-bottom:8px;
}
.skeleton-lines span:nth-child(2){ width:70%; }

/* ==========================================================================
   About page
   ========================================================================== */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.about-grid p{ color:var(--muted); margin-bottom:16px; }
.value-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:20px;
}
.value-card{
  background:var(--cream);
  border-radius:16px;
  padding:22px;
}
.value-card h4{ font-size:1rem; margin-bottom:6px; }
.value-card p{ font-size:0.88rem; color:var(--muted); margin:0; }
.about-visual{
  border-radius:24px;
  min-height:340px;
  background:linear-gradient(150deg,var(--green-700),var(--green-400));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:var(--font-display);
  font-size:1.1rem;
  text-align:center;
  padding:30px;
}

/* ==========================================================================
   Utility / animation
   ========================================================================== */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   Responsive — tablet
   ========================================================================== */
@media (max-width: 1024px){
  .card-grid, .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .carousel-shell{ grid-template-columns:1fr; }
  .carousel-track{ min-height:300px; }
  .detail-block{ grid-template-columns:1fr; gap:34px; }
  .detail-block .detail-visual{ order:-1; min-height:220px; }
  .coming-soon-grid{ grid-template-columns:repeat(2,1fr); }
  .article-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-shell{ grid-template-columns:1fr; gap:34px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .about-visual{ order:-1; min-height:240px; }
  .skeleton-grid{ grid-template-columns:repeat(2,1fr); }
  .testimonial-grid{ grid-template-columns:1fr; }
  .featured-article{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Responsive — mobile
   ========================================================================== */
@media (max-width: 720px){
  .nav-links, .nav-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .section{ padding:64px 0; }
  .hero{ padding:56px 16px 60px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .card-grid, .feature-grid, .coming-soon-grid, .article-grid{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:1fr 1fr; transform:translateY(30px); gap:12px; }
  .stat-card{ padding:20px 12px; }
  .stat-card .num{ font-size:1.6rem; }
  .process-row{ flex-direction:column; }
  .process-wrap-item{ flex-direction:column; }
  .process-step{ width:100%; }
  .process-arrow{ transform:rotate(90deg); width:100%; height:30px; margin:0 auto; }
  .footer-grid{ grid-template-columns:1fr; gap:34px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .value-grid{ grid-template-columns:1fr; }
  .skeleton-grid{ grid-template-columns:1fr; }
  .detail-copy h3{ font-size:1.4rem; }
  .services-nav-strip .container{ gap:16px; }
  .floating-chip{ font-size:0.75rem; padding:9px 13px; }
}
/* ============================================================
   INFiniQ — FIX NAVBAR TO MATCH PICTURE 1
   Paste this at the VERY END of styles.css
   ============================================================ */

/* ---------- PAGE / HERO BACKGROUND ---------- */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--paper);
}

/* ---------- NAVBAR FLOATS OVER THE HERO ---------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;

  /* IMPORTANT: no separate white/cream strip */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  padding: 32px 0 0;
}

/* Floating navbar itself */
.nav-shell {
  width: 80%;
  max-width: 1152px;
  min-height: 66px;

  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  /* navbar stays visible, but does NOT create a page strip */
  background: rgba(247, 243, 231, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;

  padding: 10px 24px;

  box-shadow:
    0 10px 30px -18px rgba(5, 35, 24, 0.35);
}

/* ---------- HERO STARTS FROM THE TOP OF THE PAGE ---------- */

.hero {
  position: relative;
  width: 100%;
  min-height: 760px;

  /* navbar is overlaying this section */
  padding: 245px 24px 90px;

  color: #fff;
  overflow: hidden;
}

/* HOME + ABOUT */
.hero-green {
  background:
    radial-gradient(
      120% 140% at 15% -10%,
      rgba(45, 190, 110, 0.55),
      transparent 55%
    ),
    linear-gradient(
      160deg,
      #052318 0%,
      #08331f 45%,
      #0e4a2d 100%
    );
}

/* SERVICES */
.hero-purple {
  background:
    linear-gradient(
      165deg,
      #1b1240 0%,
      #5b3fc4 45%,
      #8b7cf6 100%
    );
}

/* BLOG */
.hero-sunset {
  background: linear-gradient(
    180deg,
    #663718 0%,
    #8f481e 35%,
    #c96527 65%,
    #ff8a3b 100%
  );
}

/* CASE STUDIES */
.hero-mint {
  background: linear-gradient(180deg, #026922 0%, #00b43c 100%);
}

/* ---------- HERO CONTENT ---------- */

.hero-inner {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;

  text-align: center;
  position: relative;
  z-index: 2;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  font-weight:630;
  line-height: 1.08;
  margin: 0 0 22px;
}

.hero h1 .accent {
  color: #00dc46;
}

.hero p.lede {
  max-width: 680px;
  margin: 0 auto 34px;

  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;

  color: rgba(255, 255, 255, 0.88);
}

/* ---------- HERO BUTTONS ---------- */

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;

  flex-wrap: wrap;
  margin-bottom: 44px;
}

.hero-actions .btn {
  min-width: 180px;
}

/* ---------- HERO PILLS ---------- */

.hero-pills {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-pill {
  background: rgba(255, 255, 255, 0.95);
  color: #0c2b21;

  font-size: 0.85rem;
  font-weight:450;

  padding: 7px 11px;
  border-radius: 8px;
}

/* ---------- HOME STAT CARDS ---------- */

.stat-strip {
  width: 80%;
  max-width: 1200px;

  margin: 120px auto 0;

  transform: none;

  position: relative;
  z-index: 3;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.stat-card {
  background: #fff;
  border-radius: 16px;

  padding: 42px 20px;

  text-align: center;

  box-shadow:
    0 20px 45px -25px rgba(6, 40, 26, 0.35);
}

.stat-card .num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight:630;
  color: #00b947;

  margin-bottom: 6px;
}

.stat-card .label {
  color: #6b7a73;
  font-size: 0.92rem;
}

.hero-spacer {
  display: none;
}


/* ============================================================
   DESKTOP LARGE
   ============================================================ */

@media (min-width: 1400px) {

  .nav-shell {
    width: 80%;
    max-width: 1152px;
  }

  .hero {
    min-height: 900px;
    padding-top: 275px;
  }

  .hero h1 {
    font-size: clamp(3.2rem, 5vw, 4.1rem);
  }

  .stat-strip {
    margin-top: 120px;
  }
}


/* ============================================================
   LAPTOP / SMALL DESKTOP
   ============================================================ */

@media (max-width: 1200px) {

  .nav-shell {
    width: calc(100% - 80px);
  }

  .hero {
    min-height: 720px;
    padding-top: 220px;
  }

  .stat-strip {
    width: calc(100% - 80px);
  }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1024px) {

  .site-header {
    padding-top: 22px;
  }

  .nav-shell {
    width: calc(100% - 48px);
    padding: 9px 18px;
  }

  .nav-links {
    gap: 18px;
  }

  .nav-links a {
    font-size: 0.88rem;
  }

  .hero {
    min-height: auto;
    padding: 190px 24px 80px;
  }

  .hero h1 {
    font-size: clamp(2.4rem, 6vw, 3.5rem);
  }

  .stat-strip {
    width: calc(100% - 48px);
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 90px;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {

  .site-header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;

    padding: 14px 0 0;

    background: transparent !important;
  }

  .nav-shell {
    width: calc(100% - 28px);
    min-height: 58px;

    padding: 7px 9px 7px 16px;

    border-radius: 999px;
  }

  .brand {
    font-size: 1rem;
  }

  .brand .logo-mark svg {
    width: 27px;
    height: 27px;
  }

  .nav-links,
  .nav-cta .btn {
    display: none;
  }

  .nav-toggle {
    display: flex;

    width: 40px;
    height: 40px;

    border-radius: 50%;
  }

  /* Mobile menu remains attached below floating navbar */
  .mobile-menu {
    width: calc(100% - 28px);
    max-width: none;

    margin: 8px auto 0;

    background: rgba(255, 255, 255, 0.97);

    border-radius: 18px;
  }

  .hero {
    min-height: auto;

    padding:
      145px
      18px
      65px;
  }

  .hero h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
    line-height: 1.08;

    margin-bottom: 18px;
  }

  .hero p.lede {
    font-size: 0.98rem;
    line-height: 1.55;

    margin-bottom: 28px;
  }

  .hero-actions {
    width: 100%;

    flex-direction: column;
    align-items: stretch;

    gap: 12px;

    margin-bottom: 34px;
  }

  .hero-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .hero-pills {
    gap: 7px;
  }

  .hero-pill {
    font-size: 0.75rem;
    padding: 7px 9px;
  }

  /* HOME STAT CARDS */
  .stat-strip {
    width: 100%;

    margin-top: 70px;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
  }

  .stat-card {
    padding: 25px 10px;
    border-radius: 15px;
  }

  .stat-card .num {
    font-size: 1.7rem;
  }

  .stat-card .label {
    font-size: 0.78rem;
  }
}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 420px) {

  .nav-shell {
    width: calc(100% - 20px);
  }

  .hero {
    padding:
      135px
      14px
      55px;
  }

  .hero h1 {
    font-size: 1.9rem;
  }

  .hero p.lede {
    font-size: 0.9rem;
  }

  .hero-pill {
    font-size: 0.7rem;
    padding: 6px 8px;
  }

  .stat-strip {
    gap: 10px;
  }

  .stat-card {
    padding: 22px 7px;
  }

  .stat-card .num {
    font-size: 1.45rem;
  }

  .stat-card .label {
    font-size: 0.7rem;
  }
}


/* ============================================================
   IMPORTANT:
   Prevent any page-level top white strip from appearing
   ============================================================ */

body > .site-header + .hero {
  margin-top: 0 !important;
}

.site-header + .hero {
  border-top: 0 !important;
}

.site-header + .hero::before {
  display: none !important;
}
/* ============================================================
   HOME PAGE — 9 SERVICE CARDS HOVER OUTLINE
   ============================================================ */

.service-card {
  border: 2px solid transparent;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Remove the old movement on hover */
.service-card:hover {
  transform: none;
  box-shadow: none;
}

/* Website Development */
.service-card.tone-a:hover {
  border-color: #7a6a3d;
}

/* E-commerce Development */
.service-card.tone-b:hover {
  border-color: var(--orange);
}

/* Web Application Development */
.service-card.tone-c:hover {
  border-color: var(--purple);
}

/* Mobile App Development */
.service-card.tone-d:hover {
  border-color: var(--green-600);
}

/* Digital Marketing */
.service-card.tone-e:hover {
  border-color: #3d5a4c;
}

/* SEO */
.service-card.tone-f:hover {
  border-color: #7a6a3d;
}

/* The repeated cards */
.service-card.tone-b:hover {
  border-color: var(--orange);
}

.service-card.tone-c:hover {
  border-color: var(--purple);
}

.service-card.tone-d:hover {
  border-color: var(--green-600);
}


/* ============================================================
   KEEP CARD SIZE COMPLETELY STABLE
   ============================================================ */

.service-card,
.service-card:hover {
  box-sizing: border-box;
}


/* ============================================================
   MOBILE — SAME HOVER STYLE, NO MOVEMENT
   ============================================================ */

@media (max-width: 720px) {
  .service-card:hover {
    transform: none;
    box-shadow: none;
  }
}
/* ============================================================
   SEVEN STAGES — EXACT TARGET LAYOUT
   ============================================================ */

/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 1025px) {

  /* BOTH ROWS USE THE SAME 5-COLUMN GRID */
  .section-dark .process-row {
    display: grid !important;

    grid-template-columns:
      208px 40px
      208px 40px
      208px 40px
      208px 40px
      208px;

    width: 1200px;
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;

    padding: 0;

    gap: 0 !important;

    align-items: stretch;
    justify-content: center;
  }


  /* ----------------------------------------------------------
     EVERY CARD — EXACT SAME SIZE
     ---------------------------------------------------------- */

  .section-dark .process-step {

    width: 208px !important;
    min-width: 208px !important;

    height: 235px !important;
    min-height: 235px !important;
    max-height: 235px !important;

    box-sizing: border-box;

    padding: 18px 16px !important;

    border-radius: 16px;

    overflow: hidden;
  }


  /* ----------------------------------------------------------
     WRAPPERS
     ---------------------------------------------------------- */

  .section-dark .process-wrap-item {

    width: 208px !important;
    min-width: 208px !important;

    height: 235px !important;

    display: flex !important;
    align-items: stretch !important;
  }


  /* ----------------------------------------------------------
     ICON
     ---------------------------------------------------------- */

  .section-dark .process-step .icon {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    margin-bottom: 14px;
  }


  /* ----------------------------------------------------------
     STAGE NUMBER
     ---------------------------------------------------------- */

  .section-dark .process-step .stage-num {

    margin-bottom: 5px;

    flex-shrink: 0;
  }


  /* ----------------------------------------------------------
     TITLE
     ---------------------------------------------------------- */

  .section-dark .process-step h3 {

    margin-top: 0;
    margin-bottom: 10px;

    line-height: 1.2;

    flex-shrink: 0;
  }


  /* ----------------------------------------------------------
     DESCRIPTION BOX
     ---------------------------------------------------------- */

  .section-dark .process-step p {

    box-sizing: border-box;

    width: 100%;

    height: 99px !important;
    min-height: 99px !important;
    max-height: 99px !important;

    margin: 0;

    padding: 12px;

    overflow: hidden;

    line-height: 1.4;
  }


  /* ----------------------------------------------------------
     ARROWS
     ---------------------------------------------------------- */

  .section-dark .process-arrow {

    width: 40px !important;
    min-width: 40px !important;

    height: 235px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    flex-shrink: 0;
  }


  .section-dark .process-arrow svg {

    width: 18px;
    height: 18px;
  }


  /* ----------------------------------------------------------
     SECOND ROW
     
     Stage 6 + arrow + Stage 7 occupy the FIRST THREE
     columns, so they align exactly under Stage 1 + Stage 2.
     ---------------------------------------------------------- */

  .section-dark .process-row:nth-of-type(2) {

    margin-top: 24px !important;
  }
}


/* ============================================================
   LAPTOP
   ============================================================ */

@media (min-width: 1025px) and (max-width: 1250px) {

  .section-dark .process-row {

    grid-template-columns:
      190px 30px
      190px 30px
      190px 30px
      190px 30px
      190px;

    width: 1090px;
  }


  .section-dark .process-step {

    width: 190px !important;
    min-width: 190px !important;

    height: 225px !important;
    min-height: 225px !important;
    max-height: 225px !important;

    padding: 17px 14px !important;
  }


  .section-dark .process-wrap-item {

    width: 190px !important;
    min-width: 190px !important;

    height: 225px !important;
  }


  .section-dark .process-arrow {

    width: 30px !important;
    min-width: 30px !important;

    height: 225px !important;
  }


  .section-dark .process-step p {

    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
  }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 721px) and (max-width: 1024px) {

  .section-dark .process-row {

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    width: 100%;
    max-width: 700px;

    margin-left: auto;
    margin-right: auto;

    gap: 20px !important;
  }


  .section-dark .process-wrap-item {

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
  }


  .section-dark .process-step {

    width: 100% !important;
    min-width: 0 !important;

    height: 235px !important;
    min-height: 235px !important;
    max-height: 235px !important;

    box-sizing: border-box;
  }


  .section-dark .process-arrow {

    display: none !important;
  }


  .section-dark .process-step p {

    height: 99px !important;
    min-height: 99px !important;
    max-height: 99px !important;
  }


  .section-dark .process-row:nth-of-type(2) {

    margin-top: 20px !important;
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 720px) {

  .section-dark .process-row {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    gap: 0 !important;

    align-items: stretch !important;
  }


  .section-dark .process-wrap-item {

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;

    display: block !important;
  }


  .section-dark .process-step {

    width: 100% !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 20px 16px !important;

    overflow: visible;
  }


  .section-dark .process-step p {

    width: 100%;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible;
  }


  .section-dark .process-arrow {

    display: flex !important;

    width: 100% !important;
    min-width: 0 !important;

    height: 32px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    transform: rotate(90deg) !important;
  }


  .section-dark .process-row:nth-of-type(2) {

    margin-top: 0 !important;
  }
}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width: 420px) {

  .section-dark .process-step {

    padding: 18px 14px !important;
  }

  .section-dark .process-step h3 {

    font-size: 1rem;
  }

  .section-dark .process-step p {

    font-size: 0.82rem;
    line-height: 1.4;
  }
}
/* ==========================================================
   FINAL NAVBAR FIX
   REMOVE ONLY THE HORIZONTAL LINE BELOW NAVBAR
   ========================================================== */

/* Header itself must have absolutely no border/line */
.site-header {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;

    background: transparent !important;
    background-image: none !important;
}

/* Remove pseudo-elements which may be creating the line */
.site-header::before,
.site-header::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
}

/* The wide line must NOT come from nav-shell */
.nav-shell {
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;
}

/* Remove pseudo-elements from navbar */
.nav-shell::before,
.nav-shell::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
}

/* Make sure no direct child creates a full-width separator */
.site-header > * {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* Mobile menu keeps its own border */
.mobile-menu {
    border-bottom: 1px solid var(--border);
}
/* =========================================================
   SHORTER COLORED HEADER / HERO — NON HOME PAGES
   ========================================================= */

/* Purple header */
body:has(.hero-purple) .hero-purple {
    min-height: 620px !important;
    height: 620px !important;
}

/* Orange header */
body:has(.hero-sunset) .hero-sunset {
    min-height: 520px !important;
    height: 520px !important;
}

/* Green header on inner pages */
body:has(.hero-mint) .hero-mint {
    min-height: 520px !important;
    height: 520px !important;
}
/* Green header on inner pages */
body:not(:has(.hero-actions)) .hero-green {
    min-height: 320px !important;
    height: 320px !important;
}
/* Gray header on inner pages*/
body:not(:has(.hero-actions)) .hero-grey {
   
    min-height: 620px !important;
    height: 620px !important;
}
/* ================================================================
   CASE STUDIES — SCREENSHOT MATCH
   ================================================================ */

.case-study-page {
    margin: 0;
    padding: 0;
    background: #ffffff;
    color: #00373a;
}


/* ================================================================
   TOP WHITE AREA
   ================================================================ */

.future-case-study {
    width: 100%;
    background: #ffffff;
    min-height: 498px;
    padding: 46px 0 60px;
    box-sizing: border-box;
}

.future-heading {
    width: 100%;
    text-align: center;
}

.future-label {
    font-size: 7px;
    line-height: 1;
    font-weight:400;
    color: #555f5c;
    margin-bottom: 14px;
}

.future-heading h1 {
    margin: 0;
    padding: 0 20px;
    color: #00373a;
    font-size: 24px;
    line-height: 1.15;
    font-weight:630;
    letter-spacing: -0.6px;
}


/* ================================================================
   MAIN PREVIEW BOX
   ================================================================ */

.future-preview {
    width: 600px;
    max-width: calc(100% - 40px);
    margin: 31px auto 0;
    background: #ffffff;
    border: 1px solid #e9eee9;
    border-radius: 13px;
    overflow: hidden;
    box-sizing: border-box;
}


/* ================================================================
   GREEN TOP AREA
   ================================================================ */

.future-preview-hero {
    width: 100%;
    height: 128px;

    background:
        linear-gradient(
            145deg,
            #dffbe9 0%,
            #b3f4c7 43%,
            #80eaa1 100%
        );

    display: flex;
    align-items: center;
    justify-content: center;
}


/* center green icon */

.future-preview-icon {
    width: 32px;
    height: 32px;

    border-radius: 7px;

    background: rgba(0, 220, 70, 0.23);

    color: #00bc52;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ================================================================
   SIX CARD AREA
   ================================================================ */

.future-card-grid {
    width: 100%;
    padding: 24px 23px 24px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;

    box-sizing: border-box;
}


/* individual placeholder */

.future-card {
    height: 64px;

    background: #ffffff;

    border: 1px solid #eeeadd;

    border-radius: 9px;

    box-sizing: border-box;

    padding: 15px 16px;
}


.future-card-content {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}


/* tiny green icon */

.future-mini-icon {
    width: 10px;
    height: 10px;

    flex: 0 0 10px;

    border-radius: 2px;

    background: #d9f8e0;

    position: relative;
}


.future-mini-icon::before {
    content: "";

    position: absolute;

    width: 4px;
    height: 4px;

    left: 3px;
    top: 3px;

    border-radius: 1px;

    background: #00c853;
}


/* skeleton text */

.future-lines {
    width: 100%;
    padding-top: 1px;
}


.future-line {
    display: block;

    height: 4px;

    border-radius: 10px;

    background: #f0f1f0;
}


.future-line.large {
    width: 72%;
}


.future-line.small {
    width: 50%;
    margin-top: 6px;
}


/* ================================================================
   FOOTER
   ================================================================ */

.future-footer {
    width: 100%;

    background:
        linear-gradient(
            180deg,
            #00383b 0%,
            #004947 48%,
            #008b45 100%
        );

    color: #ffffff;

    padding: 60px 40px 0;

    box-sizing: border-box;
}


.future-footer-inner {
    width: 100%;
    max-width: 646px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.45fr
        0.82fr
        1.02fr
        0.95fr;

    column-gap: 38px;

    box-sizing: border-box;
}


/* ================================================================
   FOOTER BRAND
   ================================================================ */

.future-footer-brand {
    min-width: 0;
}


.future-brand {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #ffffff;

    font-size: 15px;
    font-weight:450;

    margin-bottom: 10px;
}


.future-brand-logo {
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.future-footer-description {
    max-width: 145px;

    margin: 0 0 15px;

    color: rgba(255,255,255,0.76);

    font-size: 7px;
    line-height: 1.55;
}


.future-footer-divider {
    width: 126px;

    height: 1px;

    background: rgba(255,255,255,0.12);

    margin-bottom: 18px;
}


.future-footer-contact-title {
    font-size: 6px;
    line-height: 1;

    color: rgba(255,255,255,0.42);

    margin-bottom: 9px;
}


.future-footer-contact {
    font-size: 7px;
    line-height: 1.4;

    color: rgba(255,255,255,0.88);

    margin-bottom: 6px;
}


/* ================================================================
   GET IN TOUCH BUTTON
   ================================================================ */

.future-contact-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    height: 20px;

    padding: 0 9px;

    margin-top: 6px;

    border-radius: 4px;

    background: #00d946;

    color: #ffffff;

    font-size: 6px;
    font-weight:540;

    text-decoration: none;

    box-sizing: border-box;
}


.future-contact-button:hover {
    background: #00c83f;
    color: #ffffff;
}


/* ================================================================
   SOCIAL ICONS
   ================================================================ */

.future-socials {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 12px;
}


.future-socials a {
    width: 14px;
    height: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;

    text-decoration: none;
}


.future-socials a:hover {
    color: #ffffff;
    transform: none;
}


/* ================================================================
   FOOTER COLUMNS
   ================================================================ */

.future-footer-column {
    min-width: 0;
}


.future-footer-column h4 {
    margin: 2px 0 14px;

    padding: 0;

    color: rgba(255,255,255,0.43);

    font-size: 6px;
    font-weight:540;

    line-height: 1;

    letter-spacing: 0.03em;
}


.future-footer-column a {
    display: block;

    margin: 0 0 10px;

    color: rgba(255,255,255,0.92);

    font-size: 7px;
    line-height: 1.25;

    text-decoration: none;

    white-space: nowrap;
}


.future-footer-column a:hover {
    color: #ffffff;
    text-decoration: none;
}


/* ================================================================
   FOOTER BOTTOM
   ================================================================ */

.future-footer-bottom {
    width: 100%;
    max-width: 646px;

    margin: 24px auto 0;

    padding: 17px 0 20px;

    border-top: 1px solid rgba(255,255,255,0.12);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    box-sizing: border-box;
}


.future-footer-bottom > span {
    color: rgba(255,255,255,0.43);

    font-size: 6px;

    line-height: 1.3;
}


.future-legal-links {
    display: flex;

    align-items: center;

    gap: 18px;
}


.future-legal-links a {
    color: rgba(255,255,255,0.43);

    font-size: 6px;

    text-decoration: none;

    white-space: nowrap;
}


.future-legal-links a:hover {
    color: rgba(255,255,255,0.75);
}


/* ================================================================
   TABLET
   ================================================================ */

@media (max-width: 900px) {

    .future-case-study {
        min-height: auto;
        padding-bottom: 55px;
    }

    .future-footer {
        padding-left: 30px;
        padding-right: 30px;
    }

    .future-footer-inner {
        max-width: 650px;

        grid-template-columns: 1.3fr 1fr 1fr;
        row-gap: 35px;
    }

    .future-footer-brand {
        grid-row: span 2;
    }

    .future-footer-bottom {
        max-width: 650px;
    }
}


/* ================================================================
   MOBILE
   ================================================================ */

@media (max-width: 600px) {

    .future-case-study {
        padding: 42px 0 50px;
    }


    .future-label {
        font-size: 7px;
        margin-bottom: 12px;
    }


    .future-heading h1 {
        font-size: 23px;
        letter-spacing: -0.4px;
    }


    .future-preview {
        width: calc(100% - 28px);
        max-width: none;

        margin-top: 27px;

        border-radius: 12px;
    }


    .future-preview-hero {
        height: 115px;
    }


    .future-card-grid {
        padding: 16px;

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }


    .future-card {
        height: 62px;

        padding: 14px 12px;
    }


    .future-footer {
        padding: 46px 20px 0;
    }


    .future-footer-inner {
        max-width: none;

        grid-template-columns: 1fr 1fr;

        column-gap: 28px;
        row-gap: 32px;
    }


    .future-footer-brand {
        grid-column: 1 / -1;
        grid-row: auto;
    }


    .future-footer-description {
        max-width: 220px;
    }


    .future-footer-column a {
        white-space: normal;
    }


    .future-footer-bottom {
        max-width: none;

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

        padding-bottom: 18px;
    }


    .future-legal-links {
        flex-wrap: wrap;
        gap: 10px 16px;
    }
}


/* ================================================================
   SMALL PHONES
   ================================================================ */

@media (max-width: 380px) {

    .future-heading h1 {
        font-size: 21px;
    }


    .future-card-grid {
        padding: 13px;
        gap: 8px;
    }


    .future-card {
        padding: 12px 10px;
    }


    .future-footer-inner {
        grid-template-columns: 1fr;
    }


    .future-footer-column {
        grid-column: auto;
    }
}/* ============================================================
   CONTACT PAGE
   Paste this at the END of styles.css
   ============================================================ */

.contact-page-hero{
  min-height:190px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:30px 20px 38px;
  border-bottom:2px solid #168cff;
}

.contact-page-hero-inner{
  max-width:600px;
  width:100%;
  margin:0 auto;
}

.contact-page-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:25px;
  padding:0 9px;
  border:1px solid #cfd8d4;
  border-radius:5px;
  color:#0c2b21;
  background:#fff;
  font-size:8px;
  font-weight:540;
  margin-bottom:9px;
}

.contact-page-hero h1{
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,2.5rem);
  line-height:1.05;
  color:#063a3d;
  margin-bottom:8px;
  font-weight:630;
}

.contact-page-hero p{
  max-width:430px;
  margin:0 auto;
  color:#707b78;
  font-size:10px;
  line-height:1.5;
}


/* ================= CONTACT MAIN ================= */

.contact-page-section{
  background:#f7f4e8;
  min-height:487px;
  padding:60px 0;
}

.contact-page-container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 60px;
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(360px,430px);
  gap:70px;
  align-items:start;
}


/* LEFT SIDE */

.contact-page-left{
  padding-top:2px;
}

.contact-page-left h2{
  color:#063a3d;
  font-size:clamp(1.7rem,3vw,2rem);
  margin:0 0 18px;
  font-weight:630;
}

.contact-info-card{
  width:100%;
  max-width:430px;
  min-height:62px;
  background:#fff;
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 8px 20px -18px rgba(0,0,0,.4);
}

.contact-info-icon{
  width:34px;
  height:34px;
  min-width:34px;
  border-radius:7px;
  background:#f7f5ed;
  border:1px solid #e8e4d9;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8d9690;
}

.contact-info-card strong{
  display:block;
  color:#064044;
  font-size:9px;
  line-height:1.3;
  margin-bottom:3px;
}

.contact-info-card span{
  display:block;
  color:#8b9290;
  font-size:7px;
  line-height:1.3;
}

.contact-response-card{
  min-height:62px;
  padding-left:14px;
}

.contact-response-card strong{
  margin-bottom:4px;
}


/* ================= FORM ================= */

.contact-page-form{
  width:100%;
  max-width:430px;
  background:#fff;
  border:0;
  border-radius:8px;
  padding:17px 13px 13px;
  box-shadow:0 8px 20px -15px rgba(0,0,0,.25);
}

.contact-page-form h3{
  font-family:var(--font-body);
  font-size:9px;
  font-weight:450;
  color:#69716e;
  margin:0 0 13px;
}

.contact-page-form .field{
  margin-bottom:8px;
}

.contact-page-form .field label{
  font-size:7px;
  font-weight:540;
  color:#064044;
  margin-bottom:4px;
}

.contact-page-form .field label .req{
  color:#e25545;
}

.contact-page-form .field input,
.contact-page-form .field select,
.contact-page-form .field textarea{
  height:25px;
  padding:5px 8px;
  border-radius:5px;
  border:1px solid #d9ddda;
  font-family:var(--font-body);
  font-size:7px;
  color:#56615d;
  background:#fff;
}

.contact-page-form .field input::placeholder,
.contact-page-form .field textarea::placeholder{
  color:#b4b9b6;
}

.contact-page-form .field select{
  cursor:pointer;
}

.contact-page-form .field textarea{
  height:49px;
  min-height:49px;
  resize:none;
}

.contact-page-form .phone-field{
  display:flex;
  gap:5px;
}

.contact-page-form .phone-field select{
  width:74px;
  min-width:74px;
  flex-shrink:0;
}

.contact-page-form .phone-field input{
  flex:1;
  min-width:0;
}

.contact-page-form .btn{
  min-height:23px;
  height:23px;
  padding:4px 10px;
  border-radius:5px;
  font-size:7px;
  margin-top:1px;
}

.contact-page-form .field-error{
  font-size:7px;
  margin-top:3px;
}

.contact-page-form .form-note{
  font-size:7px;
  margin-top:7px;
}


/* ================= FOCUS ================= */

.contact-page-form .field input:focus,
.contact-page-form .field select:focus,
.contact-page-form .field textarea:focus{
  border-color:#22b85a;
  box-shadow:0 0 0 2px rgba(34,197,94,.10);
}


/* ================= RESPONSIVE ================= */

@media (max-width:1024px){

  .contact-page-container{
    grid-template-columns:1fr 430px;
    gap:40px;
    padding:0 35px;
  }

  .contact-info-card{
    max-width:100%;
  }

}


@media (max-width:720px){

  .contact-page-hero{
    min-height:180px;
    padding:35px 20px;
  }

  .contact-page-section{
    min-height:auto;
    padding:45px 0;
  }

  .contact-page-container{
    grid-template-columns:1fr;
    gap:30px;
    padding:0 20px;
  }

  .contact-page-left{
    width:100%;
  }

  .contact-info-card{
    max-width:100%;
  }

  .contact-page-form{
    max-width:100%;
  }

}
/* =========================================================
   CONTACT PAGE — MATCH EXISTING PROJECT FONT SIZES
   ========================================================= */

.contact-page-hero{
  min-height:190px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:50px 20px;
  border-bottom:2px solid #168cff;
}

.contact-page-hero-inner{
  max-width:700px;
  width:100%;
  margin:0 auto;
}

.contact-page-eyebrow{
  display:inline-block;
  font-size:0.8rem !important;
  font-weight:540 !important;
  color:var(--green-600);
  background:var(--mint-light);
  padding:6px 16px;
  border-radius:var(--radius-pill);
  margin-bottom:18px;
}

.contact-page-hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.1rem,5.4vw,3.6rem) !important;
  font-weight:630 !important;
  line-height:1.12;
  color:var(--ink);
  margin-bottom:14px;
}

.contact-page-hero p{
  max-width:640px;
  margin:0 auto;
  color:var(--muted);
  font-size:1.05rem !important;
  line-height:1.55;
}


/* =========================================================
   CONTACT MAIN
   ========================================================= */

.contact-page-section{
  background:var(--cream);
  padding:96px 0;
  min-height:auto;
}

.contact-page-container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.contact-page-left{
  padding-top:0;
}

.contact-page-left h2{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,3.4vw,2.5rem) !important;
  font-weight:630 !important;
  line-height:1.12;
  color:var(--ink);
  margin:10px 0 18px;
}

.contact-info-card{
  width:100%;
  max-width:430px;
  min-height:70px;

  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;

  padding:16px 18px;
  margin-bottom:14px;

  display:flex;
  align-items:center;
  gap:14px;

  box-shadow:var(--shadow-soft);
}

.contact-info-icon{
  width:40px;
  height:40px;
  min-width:40px;

  border-radius:10px;
  background:var(--cream-2);
  border:1px solid var(--border);

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--muted);
}

.contact-info-card strong{
  display:block;
  font-size:0.95rem !important;
  font-weight:540 !important;
  color:var(--ink);
  line-height:1.3;
  margin-bottom:4px;
}

.contact-info-card span{
  display:block;
  font-size:0.82rem !important;
  font-weight:400 !important;
  color:var(--muted);
  line-height:1.4;
}

.contact-response-card{
  min-height:70px;
}


/* =========================================================
   FORM
   ========================================================= */

.contact-page-form{
  width:100%;
  max-width:100%;

  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;

  padding:36px;

  box-shadow:var(--shadow-soft);
}

.contact-page-form h3{
  font-family:var(--font-display);
  font-size:1.2rem !important;
  font-weight:540 !important;
  color:var(--ink);
  margin:0 0 24px;
}

.contact-page-form .field{
  margin-bottom:18px;
}

.contact-page-form .field label{
  display:block;
  font-size:0.9rem !important;
  font-weight:540 !important;
  color:var(--ink);
  margin-bottom:8px;
}

.contact-page-form .field label .req{
  color:var(--orange);
}

.contact-page-form .field input,
.contact-page-form .field select,
.contact-page-form .field textarea{
  width:100%;
  padding:13px 16px;

  min-height:48px;

  border-radius:12px;
  border:1.4px solid var(--border);

  font-family:var(--font-body);
  font-size:0.95rem !important;
  font-weight:400 !important;

  background:#fff;
  color:var(--ink);

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}

.contact-page-form .field input::placeholder,
.contact-page-form .field textarea::placeholder{
  font-size:0.95rem !important;
  color:#9aa39f;
}

.contact-page-form .field textarea{
  resize:vertical;
  min-height:110px;
}

.contact-page-form .phone-field{
  display:flex;
  gap:10px;
}

.contact-page-form .phone-field select{
  width:110px;
  min-width:110px;
  flex-shrink:0;
}

.contact-page-form .field input:focus,
.contact-page-form .field select:focus,
.contact-page-form .field textarea:focus{
  border-color:var(--green-500);
  box-shadow:0 0 0 4px rgba(34,197,94,0.15);
  outline:none;
}

.contact-page-form .field-error{
  color:#c0392b;
  font-size:0.82rem !important;
  margin-top:6px;
}

.contact-page-form .btn{
  min-height:auto;
  height:auto;
  padding:14px 28px;

  font-size:0.95rem !important;
  font-weight:540 !important;

  border-radius:var(--radius-pill);
}

.contact-page-form .form-note{
  text-align:center;
  font-size:0.88rem !important;
  color:var(--green-700);
  margin-top:14px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

  .contact-page-container{
    grid-template-columns:1fr;
    gap:34px;
  }

  .contact-page-form{
    max-width:100%;
  }

  .contact-info-card{
    max-width:100%;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:720px){

  .contact-page-hero{
    min-height:220px;
    padding:56px 20px 60px;
  }

  .contact-page-hero h1{
    font-size:clamp(2rem,9vw,2.7rem) !important;
  }

  .contact-page-hero p{
    font-size:1rem !important;
  }

  .contact-page-section{
    padding:64px 0;
  }

  .contact-page-container{
    grid-template-columns:1fr;
    gap:34px;
    padding:0 24px;
  }

  .contact-page-left h2{
    font-size:clamp(1.9rem,8vw,2.3rem) !important;
  }

  .contact-page-form{
    padding:26px 20px;
    border-radius:18px;
  }

  .contact-page-form .field input,
  .contact-page-form .field select,
  .contact-page-form .field textarea{
    font-size:0.95rem !important;
  }

  .contact-page-form .phone-field select{
    width:100px;
    min-width:100px;
  }

}
/* =========================================================
   CONTACT PAGE - HEADER / HERO OVERLAP FIX
   ========================================================= */

.contact-page-hero{
  position:relative;
  z-index:1;

  /* Header-ku enough space */
  padding-top:110px !important;
  padding-bottom:70px !important;

  min-height:300px !important;

  display:flex;
  align-items:center;
  justify-content:center;
}

.contact-page-hero-inner{
  position:relative;
  z-index:2;
}


/* Contact heading */
.contact-page-hero h1{
  margin-top:0 !important;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width:721px){

  .contact-page-hero{
    min-height:300px !important;
  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1024px){

  .contact-page-hero{
    padding-top:100px !important;
    padding-bottom:60px !important;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:720px){

  .contact-page-hero{
    min-height:240px !important;
    padding-top:90px !important;
    padding-bottom:55px !important;
  }

}
/* =========================================================
   CONTACT PAGE - BIGGER WHITE HEADER / HERO
   ========================================================= */

.contact-page-hero{
  min-height:420px !important;

  background:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  /* navbar + extra white space */
  padding:120px 20px 100px !important;

  border-bottom:2px solid #168cff;

  position:relative;
  z-index:1;
}

.contact-page-hero-inner{
  width:100%;
  max-width:700px;
  margin:0 auto;
  position:relative;
  z-index:2;
}

.contact-page-hero h1{
  margin:0 0 18px !important;
}

.contact-page-hero p{
  margin:0 auto;
}


/* Desktop */
@media (min-width:1025px){

  .contact-page-hero{
    min-height:420px !important;
    padding-top:120px !important;
    padding-bottom:100px !important;
  }

}


/* Tablet */
@media (max-width:1024px) and (min-width:721px){

  .contact-page-hero{
    min-height:380px !important;
    padding-top:110px !important;
    padding-bottom:80px !important;
  }

}


/* Mobile */
@media (max-width:720px){

  .contact-page-hero{
    min-height:330px !important;
    padding-top:100px !important;
    padding-bottom:70px !important;
  }

}
/* ============================================================
   SERVICES DETAIL BLOCK — FIGMA STYLE
   ============================================================ */

/* Main large light rectangle */
.detail-block{
  position:relative;
  display:grid;
  grid-template-columns:0.92fr 1.08fr;
  gap:58px;
  align-items:center;

  padding:48px 58px;
  margin-bottom:32px;

  border:none !important;
  border-radius:28px;

  background:#f5f3fb;

  overflow:hidden;
}


/* Remove unnecessary separator from every service */
.detail-block,
.detail-block:last-child{
  border-bottom:none !important;
}


/* ============================================================
   LEFT CONTENT
   ============================================================ */

.detail-copy{
  position:relative;
  z-index:2;
}

.detail-copy .icon-box{
  width:58px;
  height:58px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:28px;
}

.detail-copy h3{
  font-size:1.7rem;
  font-weight:630;
  margin-bottom:14px;
  line-height:1.15;
}

.detail-copy > p{
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.7;
  max-width:470px;
  margin-bottom:22px;
}


/* ============================================================
   CHECK LIST — CIRCLE TICK
   ============================================================ */

.check-list{
  margin:0 0 24px;
}

.check-list li{
  display:flex;
  align-items:center;
  gap:10px;

  font-size:0.92rem;
  font-weight:450;

  padding:7px 0;

  /* REMOVE DOTTED LINES */
  border-bottom:none !important;
}


/* Tick SVG becomes circular */
.check-list li svg{
  width:20px !important;
  height:20px !important;

  min-width:20px;
  flex-shrink:0;

  padding:4px;

  border-radius:50%;

  /* Current SVG stroke is used as border/tick colour */
  background:var(--purple-light);
}


/* Purple service */
.detail-block:nth-of-type(1) .check-list li svg{
  background:#ddd7ff;
  stroke:var(--purple) !important;
}


/* Orange service */
.detail-block:nth-of-type(2) .check-list li svg{
  background:#fde2c7;
  stroke:var(--orange) !important;
}


/* Green service */
.detail-block:nth-of-type(3) .check-list li svg{
  background:#ccefd8;
  stroke:var(--green-600) !important;
}


/* Cream / brown service */
.detail-block:nth-of-type(4) .check-list li svg{
  background:#eee6cf;
  stroke:#7a6a3d !important;
}


/* ============================================================
   GET STARTED
   ============================================================ */

.detail-copy .link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-size:0.95rem;
  font-weight:630;

  padding-top:2px;

  border:none !important;
}


/* Arrow circle */
.detail-copy .link-arrow svg{
  width:26px !important;
  height:26px !important;

  padding:7px;

  border-radius:50%;

  background:currentColor;

  stroke:#fff !important;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


/* Hover */
.detail-copy .link-arrow:hover svg{
  transform:translateX(3px);
  box-shadow:0 6px 15px rgba(0,0,0,.18);
}
/* ============================================================
   DIVIDER ABOVE "GET STARTED"
   ============================================================ */
.detail-copy .get-started-divider{
  width:100%;
  max-width:420px;
  height:1px;
  margin:20px 0 22px;
  background:rgba(0,0,0,0.08); /* fallback color */
}

/* Purple service */
.detail-block:nth-of-type(1) .get-started-divider{ background:#ddd7ff; }

/* Orange service */
.detail-block:nth-of-type(2) .get-started-divider{ background:#fde2c7; }

/* Green service */
.detail-block:nth-of-type(3) .get-started-divider{ background:#ccefd8; }

/* Cream / brown service */
.detail-block:nth-of-type(4) .get-started-divider{ background:#eee6cf; }


/* ============================================================
   RIGHT VISUAL
   ============================================================ */

.detail-visual{
  position:relative;

  width:100%;
  height:354px;
  min-height:354px;

  padding:0;

  border-radius:22px;

  overflow:hidden;
}


/* Keep service colours */
.visual-purple{
  background:linear-gradient(
    145deg,
    #c9bef9,
    #ad9af1
  );
}

.visual-orange{
  background:linear-gradient(
    145deg,
    #fbd8b4,
    #f3b875
  );
}

.visual-mint{
  background:linear-gradient(
    145deg,
    #c4ecd1,
    #91d9a8
  );
}

.visual-cream{
  background:linear-gradient(
    145deg,
    #f1ecdc,
    #e2d9bb
  );
}

.visual-lav{
  background:linear-gradient(
    145deg,
    #d9d3fb,
    #b8adf6
  );
}


/* ============================================================
   ZIG-ZAG FLOATING CONTENT
   ============================================================ */

.floating-chip{
  position:absolute;

  display:flex;
  align-items:center;
  gap:12px;

  width:max-content;
  max-width:70%;

  min-height:58px;

  padding:12px 18px;

  background:#fff;

  border-radius:13px;

  font-size:0.85rem;
  font-weight:540;

  color:var(--ink);

  box-shadow:
    0 14px 30px -15px rgba(0,0,0,.25);

  white-space:nowrap;

  z-index:3;

  transform:none;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


/* Small square colour indicator */
.chip-dot{
  width:22px !important;
  height:22px !important;

  min-width:22px;

  border-radius:5px !important;

  position:relative;
}


/* Inner soft background around chip icon */
.chip-dot::after{
  content:"";

  position:absolute;

  inset:5px;

  border-radius:2px;

  background:rgba(255,255,255,.35);
}


/* ============================================================
   PROPER ZIG-ZAG POSITIONING
   ============================================================ */

.chip-1{
  top:12%;
  left:22%;
}

.chip-2{
  top:34%;
  left:44%;
}

.chip-3{
  top:56%;
  right: -0%;
  left:0%;
}

.chip-4{
  bottom:10%;
  left:18%;
  top:auto;
}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width:1024px){

  .detail-block{
    grid-template-columns:1fr;
    gap:34px;

    padding:42px;
  }

  .detail-block .detail-visual{
    order:2;

    width:100%;
    min-height:330px;
    height:330px;
  }

  .detail-copy > p{
    max-width:700px;
  }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width:720px){

  .detail-block{
    grid-template-columns:1fr;

    padding:30px 22px;

    margin-bottom:24px;

    border-radius:22px;

    gap:30px;
  }

  .detail-copy .icon-box{
    width:52px;
    height:52px;
    margin-bottom:20px;
  }

  .detail-copy h3{
    font-size:1.4rem;
  }

  .detail-copy > p{
    font-size:0.9rem;
    line-height:1.65;
  }

  .check-list li{
    font-size:0.88rem;
  }

  .detail-copy .link-arrow{
    font-size:0.9rem;
  }

  .detail-copy .link-arrow svg{
    width:24px !important;
    height:24px !important;
  }

  .detail-block .detail-visual{
    height:290px;
    min-height:290px;

    border-radius:20px;
  }

  .floating-chip{
    min-height:48px;

    padding:9px 13px;

    font-size:0.72rem;

    gap:8px;

    max-width:82%;
  }

  .chip-dot{
    width:18px !important;
    height:18px !important;
    min-width:18px;
  }

  .chip-1{
    top:10%;
    left:15%;
  }

  .chip-2{
    top:33%;
    left:0;
  }

  .chip-3{
    top:56%;
    right:0;
  }

  .chip-4{
    bottom:9%;
    left:13%;
  }

}


/* ============================================================
   EXTRA SMALL PHONES
   ============================================================ */

@media (max-width:420px){

  .detail-block{
    padding:26px 18px;
  }

  .detail-block .detail-visual{
    height:270px;
    min-height:270px;
  }

  .floating-chip{
    font-size:0.67rem;
    padding:8px 10px;
  }

}
/* ============================================================
   SERVICE DETAIL BOX — MATCH EACH SERVICE COLOR
   ============================================================ */

/* Base */
.detail-block{
  position:relative;
  display:grid;
  grid-template-columns:0.92fr 1.08fr;
  gap:58px;
  align-items:center;

  padding:48px 58px;
  margin-bottom:32px;

  border:none !important;
  border-radius:28px;

  /* IMPORTANT:
     NO FIXED PURPLE BACKGROUND HERE
  */

  overflow:hidden;
}


/* ============================================================
   OUTER BOX COLORS
   ============================================================ */

/* Purple service */
.detail-block:has(.visual-purple){
  background:#f4f1ff !important;
}


/* Orange service */
.detail-block:has(.visual-orange){
  background:#fff5ea !important;
}


/* Green service */
.detail-block:has(.visual-mint){
  background:#effaf2 !important;
}


/* Cream service */
.detail-block:has(.visual-cream){
  background:#faf7ed !important;
}


/* Lavender service */
.detail-block:has(.visual-lav){
  background:#f5f3ff !important;
}


/* ============================================================
   RIGHT SIDE SERVICE COLOR
   ============================================================ */

.visual-purple{
  background:linear-gradient(
    160deg,
    #c8bdfb,
    #a793f8
  ) !important;
}

.visual-orange{
  background:linear-gradient(
    160deg,
    #fbd8b3,
    #f6b878
  ) !important;
}

.visual-mint{
  background:linear-gradient(
    160deg,
    #bdeccb,
    #8fdca8
  ) !important;
}

.visual-cream{
  background:linear-gradient(
    160deg,
    #f1ecdc,
    #e4dcc2
  ) !important;
}

.visual-lav{
  background:linear-gradient(
    160deg,
    #d9d3fb,
    #b8adf6
  ) !important;
}


/* ============================================================
   REMOVE ALL DOTTED LINES
   ============================================================ */

.check-list li{
  border-bottom:none !important;
}

.check-list li:last-child{
  border-bottom:none !important;
}


/* ============================================================
   COLOURED TICK CIRCLES
   ============================================================ */

.check-list li svg{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;

  padding:4px;

  border-radius:50%;

  flex-shrink:0;
}


/* Purple */
.detail-block:has(.visual-purple) .check-list li svg{
  background:#ddd6ff !important;
  stroke:#6731f5 !important;
}


/* Orange */
.detail-block:has(.visual-orange) .check-list li svg{
  background:#ffe1c2 !important;
  stroke:#e88927 !important;
}


/* Green */
.detail-block:has(.visual-mint) .check-list li svg{
  background:#ccefd8 !important;
  stroke:#27a957 !important;
}


/* Cream */
.detail-block:has(.visual-cream) .check-list li svg{
  background:#eee5ca !important;
  stroke:#806d3d !important;
}


/* Lavender */
.detail-block:has(.visual-lav) .check-list li svg{
  background:#ded8ff !important;
  stroke:#7657e8 !important;
}


/* ============================================================
   GET STARTED + ARROW
   ============================================================ */

.detail-copy .link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-size:0.95rem;
  font-weight:630;

  border:none !important;
}


/* Arrow circle */
.detail-copy .link-arrow svg{
  width:26px !important;
  height:26px !important;

  padding:7px;

  border-radius:50%;

  stroke:#fff !important;

  background:currentColor;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


/* Hover */
.detail-copy .link-arrow:hover svg{
  transform:translateX(3px);
}


/* ============================================================
   ZIG-ZAG CHIPS
   ============================================================ */

.floating-chip{
  position:absolute;

  display:flex;
  align-items:center;
  gap:12px;

  min-height:58px;

  padding:12px 18px;

  background:#fff;

  border-radius:13px;

  font-size:0.85rem;
  font-weight:540;

  color:var(--ink);

  box-shadow:
    0 14px 30px -15px rgba(0,0,0,.25);

  white-space:nowrap;

  z-index:3;
}


/* Proper zig-zag */
.chip-1{
  top:12%;
  left:22%;
}

.chip-2{
  top:34%;
  left:-5%;
}

.chip-3{
  top:56%;
  right:0;
  left:auto;
}

.chip-4{
  bottom:10%;
  left:18%;
  top:auto;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:1024px){

  .detail-block{
    grid-template-columns:1fr;
    gap:34px;
    padding:42px;
  }

}


@media(max-width:720px){

  .detail-block{
    grid-template-columns:1fr;
    gap:30px;

    padding:30px 22px;

    border-radius:22px;
  }

  .floating-chip{
    min-height:48px;
    padding:9px 13px;
    font-size:0.72rem;
    gap:8px;
  }

  .chip-1{
    top:10%;
    left:15%;
  }

  .chip-2{
    top:33%;
    left:0;
  }

  .chip-3{
    top:56%;
    right:0;
  }

  .chip-4{
    bottom:9%;
    left:13%;
  }

}

/* ============================================================
   notify + ARROW
   ============================================================ */

 .link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;

  font-size:0.95rem;
  font-weight:630;

  border:none !important;
}


/* Arrow circle */
 .link-arrow svg{
  width:26px !important;
  height:26px !important;

  padding:7px;

  border-radius:50%;

  stroke:#fff !important;

  background:currentColor;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


/* Hover */
.link-arrow:hover svg{
  transform:translateX(3px);
}
/* ============================================================
   COMING SOON GRID HOVER
   ============================================================ */
.coming-card.tone-purple-soft.reveal:hover {
  border-color: var(--purple) !important;
  box-shadow: 0 8px 20px -15px rgba(0,0,0,0.25) !important;

}
.coming-card.tone-orange-soft.reveal:hover {
  border-color: var(--orange) !important;
  box-shadow: 0 8px 20px -15px rgba(0,0,0,0.25) !important;
}
.coming-card.tone-mint-soft.reveal:hover {
  border-color: var(--green-600) !important;
  box-shadow: 0 8px 20px -15px rgba(0,0,0,0.25) !important;
}
/* ================================
   SERVICES - ZIG ZAG LAYOUT
================================ */

/* 1st, 3rd, 5th... */
#development .detail-block:nth-of-type(odd),
#marketing .detail-block:nth-of-type(odd) {
  grid-template-columns: 1fr 1fr;
}

/* 2nd, 4th, 6th... */
#development .detail-block:nth-of-type(even),
#marketing .detail-block:nth-of-type(even) {
  grid-template-columns: 1fr 1fr;
}

#development .detail-block:nth-of-type(even) .detail-copy,
#marketing .detail-block:nth-of-type(even) .detail-copy {
  order: 2;
}

#development .detail-block:nth-of-type(even) .detail-visual,
#marketing .detail-block:nth-of-type(even) .detail-visual {
  order: 1;
}


/* ================================
   TABLET + MOBILE
   Keep normal vertical layout
================================ */

@media (max-width: 1024px) {
  #development .detail-block,
  #marketing .detail-block {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  #development .detail-block .detail-copy,
  #development .detail-block .detail-visual,
  #marketing .detail-block .detail-copy,
  #marketing .detail-block .detail-visual {
    order: initial;
  }

  #development .detail-block .detail-visual,
  #marketing .detail-block .detail-visual {
    min-height: 220px;
  }
}
/* =================================
   SERVICES - LONGER FLOATING CHIPS
================================= */

.detail-visual .floating-chip {
  padding: 14px 28px;
  min-height: 54px;
}

/* Individual chip lengths */
.detail-visual .chip-1 {
  min-width: 235px;
}

.detail-visual .chip-2 {
  min-width: 285px;
}

.detail-visual .chip-3 {
  min-width: 345px;
}

.detail-visual .chip-4 {
  min-width: 210px;
}


/* Keep chips responsive */
@media (max-width: 1024px) {
  .detail-visual .floating-chip {
    min-width: unset;
    padding: 12px 22px;
  }
}
/* =========================================
   BLOG - FIX FEATURED ARTICLE OVERLAP
========================================= */

.blog-toolbar + .section {
  padding-top: 120px !important;
}

.blog-toolbar .category-row {
  margin-bottom: 0;
}
/* Remove the dark circle from Latest Articles Read Article */
.article-grid .link-arrow svg {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Keep only the arrow */
.article-grid .link-arrow svg path {
  stroke: lightgreen !important;
}
/* =========================================
   BLOG ARTICLE CARDS - ALIGN READ ARTICLE
========================================= */

.article-card {
  display: flex;
  flex-direction: column;
}

.article-card .link-arrow {
  margin-top: auto !important;
}

 /* =========================================
   BLOG ARTICLE CARDS - FIXED ALIGNMENT
========================================= */

.article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.article-card .body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Keep category tag only its own width */
.article-card .article-tag {
  align-self: flex-start;
  width: auto;
}

/* Keep date on the same row as category */
.article-card .article-date {
  position: absolute;
  top: 22px;
  right: 22px;
  float: none;
}

/* Keep title spacing correct */
.article-card h3 {
  margin: 10px 0;
}

/* Push Read Article to the bottom */
.article-card .link-arrow {
  margin-top: auto !important;
}
/* =========================================
   NEWSLETTER - FULL WIDTH STYLE
========================================= */

.newsletter-box {
  margin-top: 70px !important;

  /* Remove small container look */
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  min-height: 485px;
  padding: 95px 30px 90px !important;

  border-radius: 0 !important;
  background: var(--cream) !important;

  position: relative;
  overflow: hidden;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  isolation: isolate;
}


/* =========================================
   PERSPECTIVE GRID - TOP + BOTTOM
========================================= */

.newsletter-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(20,55,45,.065) 1px,
      transparent 1px
    ),
    linear-gradient(
      0deg,
      transparent 0%,
      rgba(20,55,45,.065) 1px,
      transparent 1px
    );

  background-size: 58px 58px;

  opacity: .88;

  mask-image: linear-gradient(
    to bottom,
    black 0%,
    transparent 38%,
    transparent 62%,
    black 100%
  );
}


/* TOP perspective */
.newsletter-box::after {
  content: "";
  position: absolute;

  left: -10%;
  right: -10%;
  top: -30px;

  height: 210px;

  z-index: -1;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 58px,
      rgba(20,55,45,.075) 59px,
      transparent 60px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 35px,
      rgba(20,55,45,.06) 36px,
      transparent 37px
    );

  transform:
    perspective(500px)
    rotateX(40deg);

  transform-origin: bottom center;

  opacity: .82;
}


/* =========================================
   ICON
========================================= */

.newsletter-box .icon-circle {
  width: 52px !important;
  height: 52px !important;

  border-radius: 50% !important;

  background: #fff !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  margin: 0 auto 24px !important;

  box-shadow:
    0 8px 20px -8px rgba(0,0,0,.18) !important;

  position: relative;
  z-index: 2;
}


/* =========================================
   HEADING
========================================= */

.newsletter-box h3 {
  font-size: clamp(2rem, 4vw, 2.8rem) !important;

  font-weight:720 !important;

  color: var(--green-900) !important;

  margin: 0 0 10px !important;

  line-height: 1.15;
}


/* =========================================
   SUBTITLE
========================================= */

.newsletter-box p {
  color: var(--muted) !important;

  font-size: 1rem !important;

  margin: 0 0 28px !important;
}


/* =========================================
   FORM
========================================= */

.newsletter-form {
  display: flex !important;

  align-items: center;
  justify-content: center;

  gap: 10px !important;

  width: 100%;

  max-width: 515px !important;

  margin: 0 auto !important;

  flex-wrap: nowrap !important;
}


/* Input */
.newsletter-form input {
  flex: 1;

  min-width: 0 !important;

  height: 48px;

  padding: 13px 20px !important;

  border-radius: 999px !important;

  border: 1px solid var(--border) !important;

  background: #fff !important;

  font-family: inherit;

  font-size: .9rem;

  outline: none;
}


/* Subscribe */
.newsletter-form .btn-primary {
  height: 48px;

  padding: 13px 30px !important;

  border-radius: 999px !important;

  font-weight:630 !important;

  white-space: nowrap;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

  .newsletter-box {
    min-height: 430px;

    padding: 70px 20px !important;
  }

  .newsletter-box h3 {
    font-size: 2rem !important;
  }

  .newsletter-form {
    flex-direction: column !important;

    max-width: 360px !important;
  }

  .newsletter-form input,
  .newsletter-form .btn-primary {
    width: 100%;
  }
}
/* =========================================
   NEWSLETTER INPUT + BUTTON - RECTANGLE
========================================= */

.newsletter-form input {
  height: 48px !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
}


/* Subscribe button */
.newsletter-form .btn-primary {
  height: 48px !important;
  border-radius: 6px !important;
  padding: 12px 28px !important;
}


/* Remove any pill/circle styling */
.newsletter-form input,
.newsletter-form .btn-primary {
  border-radius: 6px !important;
}
 /* Remove white gap between newsletter and footer */

section:has(.newsletter-box) {
  padding-bottom: 0 !important;
}

.newsletter-box {
  margin-bottom: 0 !important;
}
/* =====================================================
   FUTURE CASE STUDIES - EXACT CENTERED LAYOUT
===================================================== */

.future-preview {
    width: 100% !important;
    max-width: 1200px !important;

    margin: 60px auto 30px auto !important;

    padding: 0 !important;

    background: #ffffff !important;

    border: 1px solid #e8e3d5 !important;
    border-radius: 22px !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* =====================================================
   TOP GREEN PREVIEW
===================================================== */

.future-preview > .icon-circle {
    width: 100% !important;
    height: 255px !important;

    margin: 0 !important;

    border-radius: 0 !important;

    background: linear-gradient(
        150deg,
        #e2faea 0%,
        #88e8aa 100%
    ) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Center icon */
.future-preview > .icon-circle svg {
    width: 30px !important;
    height: 30px !important;
}


/* =====================================================
   CARDS AREA
===================================================== */

.future-preview .skeleton-grid {
    width: 100% !important;

    display: grid !important;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 26px !important;

    padding: 48px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;
}


/* =====================================================
   SKELETON CARDS
===================================================== */

.future-preview .skeleton-card {
    width: 100% !important;
    height: 126px !important;

    box-sizing: border-box !important;

    padding: 32px !important;

    border: 1px solid #e8e3d5 !important;

    border-radius: 16px !important;

    background: #ffffff !important;

    display: flex !important;
    align-items: flex-start !important;

    gap: 12px !important;
}


/* Small icon */
.future-preview .skeleton-card .dot {
    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;

    border-radius: 5px !important;

    background: #e1faea !important;
}


/* Skeleton text */
.future-preview .skeleton-lines {
    flex: 1 !important;
    padding-top: 2px !important;
}

.future-preview .skeleton-lines span {
    display: block !important;

    width: 82% !important;
    height: 8px !important;

    margin-bottom: 9px !important;

    border-radius: 5px !important;

    background: #f1f2f1 !important;
}

.future-preview .skeleton-lines span:nth-child(2) {
    width: 58% !important;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1250px) {
    .future-preview {
        width: calc(100% - 64px) !important;
    }
}

@media (max-width: 800px) {
    .future-preview .skeleton-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 30px !important;
    }
}

@media (max-width: 600px) {
    .future-preview {
        width: calc(100% - 32px) !important;
        border-radius: 18px !important;
    }

    .future-preview > .icon-circle {
        height: 190px !important;
    }

    .future-preview .skeleton-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 20px !important;
    }
}
/* ============================================================
   ABOUT PAGE — VISION / MISSION / VALUES / WHY / CTA
   Typography matched with the existing Infiniq website
============================================================ */


/* =========================================================
   OUR VISION + OUR MISSION
   EXACT LAYOUT
========================================================= */

.about-vision-mission {
  width: 100%;
  min-height: 525px;

  background: linear-gradient(
    180deg,
    #004a3f 0%,
    #008f3d 100%
  );

  padding: 119px 0 114px;

  box-sizing: border-box;
}


.about-vm-container {
  width: calc(100% - 204px);
  max-width: 1260px;

  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 24px;

  box-sizing: border-box;
}


.about-vm-card {
  min-width: 0;
  min-height: 292px;

  padding: 84px 32px 32px;

  box-sizing: border-box;

  border: 1px solid rgba(40, 230, 105, 0.55);
  border-radius: 10px;

  background: rgba(0, 111, 55, 0.42);

  color: #fff;
}


.about-vm-card h3 {
  margin: 0 0 18px;

  font-family: var(--font-display);

  font-size: 1.45rem;
  line-height: 1.2;
  font-weight:540;

  color: #fff;
}


.about-vm-card p {
  margin: 0;

  max-width: 100%;

  font-family: var(--font-body);

  font-size: 0.91rem;
  line-height: 1.55;

  color: rgba(255,255,255,0.9);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .about-vision-mission {
    min-height: auto;

    padding: 80px 0;
  }

  .about-vm-container {
    width: calc(100% - 80px);

    gap: 18px;
  }

  .about-vm-card {
    min-height: 260px;

    padding: 55px 26px 30px;
  }

  .about-vm-card h3 {
    font-size: 1.3rem;
  }

  .about-vm-card p {
    font-size: 0.88rem;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .about-vision-mission {
    min-height: auto;

    padding: 55px 0 60px;
  }

  .about-vm-container {
    width: calc(100% - 32px);

    grid-template-columns: 1fr;

    gap: 14px;
  }

  .about-vm-card {
    min-height: auto;

    padding: 32px 20px 28px;
  }

  .about-vm-card h3 {
    font-size: 1.2rem;

    margin-bottom: 12px;
  }

  .about-vm-card p {
    font-size: 0.88rem;

    line-height: 1.55;
  }
}

/* ============================================================
   2. CORE VALUES
============================================================ */

.about-core-values {
  background: var(--cream);
  padding: 72px 0 84px;
}

.about-values-container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.about-values-heading {
  text-align: center;
  margin-bottom: 28px;
}

.about-values-heading span {
  display: block;

  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight:540;

  color: var(--muted);

  margin-bottom: 14px;
}

.about-values-heading h2 {
  font-family: var(--font-display);

  color: var(--ink);

  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  font-weight:540;

  margin: 0;
}


/* ---------- Cards ---------- */

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.about-value-card {
  min-width: 0;
  min-height: 152px;

  padding: 16px;

  background: rgba(255,255,255,.5);
  border: 1px solid var(--border);
  border-radius: 10px;

  display: flex;
  flex-direction: column;
}


/* ---------- Icon ---------- */

.about-value-icon {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ebe9e1;
  border-radius: 6px;

  margin-bottom: 28px;
}

.about-value-icon svg {
  width: 18px;
  height: 18px;

  stroke: #85857a;
  stroke-width: 1.4;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ---------- Text ---------- */

.about-value-content {
  min-width: 0;
}

.about-value-content h3 {
  font-family: var(--font-display);

  color: var(--ink);

  font-size: 1rem;
  line-height: 1.2;
  font-weight:540;

  margin: 0 0 6px;
}

.about-value-content p {
  font-family: var(--font-body);

  color: var(--muted);

  font-size: 0.88rem;
  line-height: 1.55;

  margin: 0;
}


/* ============================================================
   3. WHY CHOOSE INFINIQ STUDIOS
============================================================ */

.about-why-choose {
  background: var(--white);

  padding: 88px 0;
}

.about-why-container {
  width: 100%;
  max-width: var(--maxw);

  margin: 0 auto;
  padding: 0 24px;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;

  gap: 80px;

  align-items: start;
}

.about-why-title {
  padding-top: 16px;
}

.about-why-title h2 {
  font-family: var(--font-display);

  color: var(--ink);

  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  font-weight:540;

  margin: 0;
}


/* ---------- Right Box ---------- */

.about-why-box {
  width: 100%;

  background: #fff;

  border-radius: 10px;

  box-shadow:
    0 12px 25px rgba(0,0,0,.14),
    0 2px 5px rgba(0,0,0,.08);

  overflow: hidden;
}


/* ---------- Items ---------- */

.about-why-item {
  min-height: 59px;

  padding: 10px 16px;

  display: flex;
  align-items: center;

  gap: 12px;

  background: #fff;

  border-bottom: 1px solid #e7e3dc;
}

.about-why-item h3 {
  font-family: var(--font-display);

  color: var(--ink);

  font-size: 0.92rem;
  font-weight:540;
  line-height: 1.3;

  margin: 0;
}


/* ---------- Small Icons ---------- */

.about-why-icon {
  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;
}

.about-why-icon svg {
  width: 17px;
  height: 17px;

  fill: none;

  stroke-width: 1.3;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* Icon backgrounds */

.about-why-icon.orange {
  background: #ffd4b8;
}

.about-why-icon.orange svg {
  stroke: #f28c52;
}

.about-why-icon.purple {
  background: #f0ebff;
}

.about-why-icon.purple svg {
  stroke: #866ee9;
}

.about-why-icon.beige {
  background: #f1f0e9;
}

.about-why-icon.beige svg {
  stroke: #aaa99e;
}

.about-why-icon.green {
  background: #e7f9ec;
}

.about-why-icon.green svg {
  stroke: #3bc96b;
}

.about-why-icon.blue {
  background: #edf5f6;
}

.about-why-icon.blue svg {
  stroke: #70999b;
}


/* ---------- Description ---------- */

.about-why-description {
  padding: 22px 16px 18px;

  color: var(--muted);

  font-family: var(--font-body);

  font-size: 0.88rem;
  line-height: 1.55;
}


/* ============================================================
   4. FINAL CTA
============================================================ */

.about-final-cta {
  position: relative;

  min-height: 244px;

  overflow: hidden;

  background: var(--cream);

  padding: 54px 24px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.about-cta-grid {
  position: absolute;
  inset: 0;

  opacity: .34;

  background-image:
    linear-gradient(
      rgba(12,43,33,.10) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(12,43,33,.10) 1px,
      transparent 1px
    );

  background-size: 55px 55px;

  transform:
    perspective(450px)
    rotateX(55deg)
    scale(1.7);

  transform-origin: center bottom;

  mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 45%,
      transparent 100%
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      black 45%,
      transparent 100%
    );
}

.about-cta-content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 650px;

  text-align: center;
}

.about-cta-content > span {
  display: block;

  font-family: var(--font-body);

  color: var(--muted);

  font-size: 0.8rem;
  font-weight:540;

  margin-bottom: 12px;
}

.about-cta-content h2 {
  font-family: var(--font-display);

  color: var(--ink);

  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  font-weight:540;

  margin: 0 0 12px;
}

.about-cta-content p {
  max-width: 520px;

  margin: 0 auto 24px;

  color: var(--muted);

  font-family: var(--font-body);

  font-size: 0.95rem;
  line-height: 1.55;
}


/* ---------- Buttons ---------- */

.about-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;
}

.about-cta-btn {
  min-width: 150px;
  min-height: 40px;

  padding: 10px 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  border-radius: var(--radius-pill);

  background: linear-gradient(
    180deg,
    #2fd06c,
    #199a49
  );

  color: #fff;

  font-family: var(--font-body);

  font-size: 0.85rem;
  font-weight:540;

  transition:
    transform .15s ease,
    box-shadow .2s ease;
}

.about-cta-btn:hover {
  transform: translateY(-2px);

  box-shadow:
    0 8px 18px rgba(0,150,60,.25);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1024px) {

  .about-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-why-container {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 45px;
  }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 720px) {

  /* Vision + Mission */

  .about-vision-mission {
    padding: 18px 0 48px;
  }

  .about-vm-container {
    padding: 0 16px;

    grid-template-columns: 1fr;

    gap: 12px;
  }

  .about-vm-card {
    min-height: auto;

    padding: 26px 18px 22px;
  }

  .about-vm-card h3 {
    font-size: 1.05rem;
  }

  .about-vm-card p {
    font-size: 0.88rem;
  }


  /* Core Values */

  .about-core-values {
    padding: 64px 0;
  }

  .about-values-container {
    padding: 0 16px;
  }

  .about-values-heading {
    margin-bottom: 30px;
  }

  .about-values-heading h2 {
    font-size: 1.9rem;
  }

  .about-values-heading h2 br {
    display: none;
  }

  .about-values-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .about-value-card {
    min-height: 150px;

    padding: 18px;
  }

  .about-value-icon {
    margin-bottom: 25px;
  }

  .about-value-content h3 {
    font-size: 1rem;
  }

  .about-value-content p {
    font-size: 0.88rem;
  }


  /* Why Choose */

  .about-why-choose {
    padding: 64px 0;
  }

  .about-why-container {
    padding: 0 16px;

    grid-template-columns: 1fr;

    gap: 32px;
  }

  .about-why-title {
    padding-top: 0;
  }

  .about-why-title h2 {
    font-size: 1.9rem;
  }

  .about-why-box {
    width: 100%;
  }

  .about-why-item {
    min-height: 62px;

    padding: 11px 15px;
  }

  .about-why-item h3 {
    font-size: 0.92rem;
  }

  .about-why-description {
    font-size: 0.88rem;

    padding: 22px 15px;
  }


  /* Final CTA */

  .about-final-cta {
    min-height: 280px;

    padding: 58px 16px;
  }

  .about-cta-content h2 {
    font-size: 1.9rem;
  }

  .about-cta-content h2 br {
    display: none;
  }

  .about-cta-content p {
    font-size: 0.9rem;

    margin-bottom: 24px;
  }

  .about-cta-buttons {
    flex-direction: column;

    width: 100%;

    gap: 10px;
  }

  .about-cta-btn {
    width: 210px;

    min-height: 42px;

    font-size: 0.85rem;
  }
}
/* =========================================================
   FINAL NAVBAR RESPONSIVE FIX
   Fixes phone + tablet alignment on ALL PAGES
========================================================= */


/* =========================================================
   TABLET — 601px to 1024px
========================================================= */

@media screen and (min-width: 601px) and (max-width: 1024px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* Outer navbar */
  .navigation.gs-nav {
    position: absolute !important;

    top: 16px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;
    translate: none !important;

    width: calc(100% - 40px) !important;
    max-width: 760px !important;

    height: 72px !important;

    margin: 0 !important;

    z-index: 1000 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


  /* Navbar pill */

  .navigation.gs-nav > .container6 {
    width: 100% !important;
    max-width: 100% !important;
    height: 62px !important;

    padding: 0 20px !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  /* Inner navbar row */

  .navigation.gs-nav .container7 {
    width: 100% !important;
    max-width: 100% !important;

    height: 60px !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 0 !important;
  }


  /* Logo */

  .navigation.gs-nav .frame-1 {
    width: 39px !important;
    height: auto !important;

    max-width: 39px !important;

    flex: 0 0 auto !important;
  }


  /* Desktop links */

  .navigation.gs-nav .gs-nav-links-desktop {
    display: flex !important;

    width: auto !important;
    max-width: 100% !important;

    flex: 1 1 auto !important;

    align-items: center !important;
    justify-content: flex-end !important;

    gap: 18px !important;

    margin-left: 20px !important;
  }


  .navigation.gs-nav .gs-nav-links-desktop .link {
    white-space: nowrap !important;
  }


  .navigation.gs-nav .gs-nav-links-desktop .button {
    flex-shrink: 0 !important;
  }


  /* Mobile menu hidden on tablet */

  .navigation.gs-nav .gs-mobile-panel {
    display: none !important;
  }
}


/* =========================================================
   SMALL TABLET — 601px to 760px
   Switch to hamburger before links become crowded
========================================================= */

@media screen and (min-width: 601px) and (max-width: 760px) {

  .navigation.gs-nav {
    width: calc(100% - 32px) !important;
    max-width: 700px !important;
  }


  .navigation.gs-nav > .container6 {
    padding: 0 18px !important;
  }


  /* Hide desktop links */

  .navigation.gs-nav .gs-nav-links-desktop {
    display: none !important;
  }


  /* Show hamburger */

  .navigation.gs-nav .gs-nav-toggle {
    display: flex !important;

    width: 42px !important;
    height: 42px !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    flex-shrink: 0 !important;

    cursor: pointer !important;
  }


  .navigation.gs-nav .gs-nav-toggle span {
    display: block !important;

    width: 21px !important;
    height: 2px !important;

    border-radius: 10px !important;

    background: #00373a !important;
  }
}


/* =========================================================
   PHONE — 600px and below
========================================================= */

@media screen and (max-width: 600px) {

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: hidden !important;
  }


  /* -----------------------------------------
     OUTER NAVBAR
  ----------------------------------------- */

  .navigation.gs-nav {
    position: absolute !important;

    top: 12px !important;
    left: 50% !important;

    transform: translateX(-50%) !important;
    translate: none !important;

    width: calc(100% - 24px) !important;
    max-width: 500px !important;

    height: 62px !important;

    margin: 0 !important;

    padding: 0 !important;

    z-index: 1000 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


  /* -----------------------------------------
     NAVBAR PILL
  ----------------------------------------- */

  .navigation.gs-nav > .container6 {
    width: 100% !important;
    max-width: 100% !important;

    height: 58px !important;

    padding: 0 14px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    border-radius: 999px !important;

    overflow: visible !important;
  }


  /* -----------------------------------------
     INNER ROW
  ----------------------------------------- */

  .navigation.gs-nav .container7 {
    width: 100% !important;
    max-width: 100% !important;

    height: 56px !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 0 !important;

    margin: 0 !important;
  }


  /* -----------------------------------------
     LOGO
  ----------------------------------------- */

  .navigation.gs-nav .frame-1 {
    width: 35px !important;
    height: auto !important;

    max-width: 35px !important;

    flex: 0 0 35px !important;

    object-fit: contain !important;
  }


  /* -----------------------------------------
     HIDE DESKTOP NAV LINKS
  ----------------------------------------- */

  .navigation.gs-nav .gs-nav-links-desktop {
    display: none !important;
  }


  /* -----------------------------------------
     HAMBURGER
  ----------------------------------------- */

  .navigation.gs-nav .gs-nav-toggle {
    display: flex !important;

    width: 42px !important;
    height: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 5px !important;

    flex-shrink: 0 !important;

    cursor: pointer !important;
  }


  .navigation.gs-nav .gs-nav-toggle span {
    display: block !important;

    width: 21px !important;
    height: 2px !important;

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 10px !important;

    background: #00373a !important;
  }


  /* -----------------------------------------
     MOBILE DROPDOWN PANEL
  ----------------------------------------- */

  .gs-mobile-panel {
    position: absolute !important;

    top: calc(100% + 10px) !important;
    left: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 14px !important;

    box-sizing: border-box !important;

    background: rgba(249,247,232,.98) !important;

    border: 1px solid rgba(0,0,0,.10) !important;

    border-radius: 18px !important;

    box-shadow: 0 12px 30px rgba(0,0,0,.15) !important;

    z-index: 2000 !important;

    overflow: hidden !important;
  }


  .gs-mobile-panel .gs-a {
    display: block !important;

    width: 100% !important;

    max-width: 100% !important;
  }


  .gs-mobile-panel .link {
    width: 100% !important;

    min-height: 44px !important;

    display: flex !important;

    align-items: center !important;

    padding: 10px 12px !important;

    box-sizing: border-box !important;
  }


  .gs-mobile-panel .button {
    width: 100% !important;

    min-height: 44px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin-top: 8px !important;
  }
}


/* ============================================================
   HOTFIX — paste at the very end of styles.css
   Fixes: hero content misalignment, clipped hero content,
   squeezed stat cards. Does NOT touch anything else.
   ============================================================ */

/* Bug #1: this -100px shift was pulling every hero's heading/
   text/buttons out of view or under the floating navbar. */
.hero-inner{
  top: 0;
}

/* Bug #2 + #3: forcing a fixed `height` (not just min-height) while
   overflow:hidden clips real content once it wraps to more lines
   or once the stat cards need room. Switch these to min-height only
   so the box can grow to fit its content instead of cutting it off. */
body:has(.hero-purple) .hero-purple{
  height:auto !important;
  min-height:620px !important;
  padding-bottom:70px;
}
body:has(.hero-sunset) .hero-sunset{
  height:auto !important;
  min-height:520px !important;
  padding-bottom:70px;
}
body:has(.hero-mint) .hero-mint{
  height:auto !important;
  min-height:520px !important;
  padding-bottom:70px;
}
body:not(:has(.hero-actions)) .hero-green{
  height:auto !important;
  min-height:320px !important;
  padding-bottom:70px;
}
body:not(:has(.hero-actions)) .hero-grey{
  height:auto !important;
  min-height:620px !important;
  padding-bottom:70px;
}
.hero{
  overflow:visible; /* let real content define the box instead of getting sliced */
}

/* Bug #3: with .hero-spacer hidden, the home hero needs enough
   bottom room to actually contain the stat cards instead of
   squeezing them against the fixed height. */
body:has(#services) .hero{
  padding-bottom:140px;
}

/* Responsive versions of the same fix */
@media (max-width: 1024px){
  body:has(.hero-purple) .hero-purple,
  body:has(.hero-sunset) .hero-sunset,
  body:has(.hero-mint) .hero-mint,
  body:not(:has(.hero-actions)) .hero-green,
  body:not(:has(.hero-actions)) .hero-grey{
    min-height:0 !important;
    padding-top:190px !important;
    padding-bottom:60px !important;
  }
}

@media (max-width: 720px){
  body:has(.hero-purple) .hero-purple,
  body:has(.hero-sunset) .hero-sunset,
  body:has(.hero-mint) .hero-mint,
  body:not(:has(.hero-actions)) .hero-green,
  body:not(:has(.hero-actions)) .hero-grey{
    padding-top:145px !important;
    padding-bottom:55px !important;
  }
  body:has(#services) .hero{
    padding-bottom:110px;
  }
}

@media (max-width: 420px){
  body:has(.hero-purple) .hero-purple,
  body:has(.hero-sunset) .hero-sunset,
  body:has(.hero-mint) .hero-mint,
  body:not(:has(.hero-actions)) .hero-green,
  body:not(:has(.hero-actions)) .hero-grey{
    padding-top:135px !important;
    padding-bottom:50px !important;
  }
}
/* ============================================================
   FIX v3 — paste at the very end of styles.css
   (this supersedes the stage/chip block from the previous fix)
   ============================================================ */

/* ------------------------------------------------------------
   Stage 5 & 6 "connecting" — restore the gap between the two
   process rows (it was accidentally zeroed out last time).
   ------------------------------------------------------------ */
.section-dark .process-row:nth-of-type(2){
  margin-top:24px !important;
}
@media (max-width:720px){
  .section-dark .process-row:nth-of-type(2){
    margin-top:0 !important; /* fine here: cards already stack in
      a single column with their own 24px gap between every card */
  }
}


/* ------------------------------------------------------------
   Services page — force single column below 1024px no matter
   which selector is currently winning (some of your rules like
   "#development .detail-block:nth-of-type(odd)" force 2 columns
   with higher specificity than a plain .detail-block rule, so
   this targets those exact selectors directly).
   ------------------------------------------------------------ */
@media (max-width:1024px){
  .detail-block,
  #development .detail-block,
  #marketing .detail-block,
  #development .detail-block:nth-of-type(odd),
  #development .detail-block:nth-of-type(even),
  #marketing .detail-block:nth-of-type(odd),
  #marketing .detail-block:nth-of-type(even){
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
  }

  .detail-copy,
  #development .detail-copy,
  #marketing .detail-copy,
  .detail-visual,
  #development .detail-visual,
  #marketing .detail-visual{
    width:100% !important;
    order:0 !important;
  }

  .detail-visual{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:stretch !important;
    gap:12px !important;
    height:auto !important;
    min-height:0 !important;
    padding:26px 20px !important;
  }

  .floating-chip{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
  }
}

/* ============================================================
   FIX v6 — kill any negative margin/position offset on the
   stage cards that's pulling them back together despite the
   gap. Paste at the very end of styles.css.
   ============================================================ */

.section-dark .process-wrap-item,
.section-dark .process-step{
  margin:0 !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
}

@media (max-width:900px){
  .section-dark .process-row{
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
    row-gap:20px !important;
  }
  .section-dark .process-wrap-item,
  .section-dark .process-step{
    margin:0 !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100% !important;
  }
  .section-dark .process-row:nth-of-type(2){
    margin-top:20px !important;
  }
}
/* ============================================================
   PROCESS STEPS — FINAL FIX (stage 5/6 gap + overlap bug)
   Paste this at the very END of styles.css, after everything else
   ============================================================ */

@media (max-width: 1024px) {

  .section-dark .process-row {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    gap: 20px !important;
    align-items: stretch !important;
  }

  /* consistent gap between the two row groups (stages 1-5 and 6-7) */
  .section-dark .process-row + .process-row {
    margin-top: 20px !important;
  }

  .section-dark .process-wrap-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }

  .section-dark .process-step {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 22px 20px !important;
    box-sizing: border-box !important;
  }

  .section-dark .process-step p {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* no arrows needed in a single-column stack */
  .section-dark .process-arrow {
    display: none !important;
  }
}
/* ============================================================
   NAVBAR — ENSURE VISIBLE OUTLINE ON LIGHT / CREAM HEROES
   ============================================================ */

.nav-shell {
  border: 1.5px solid rgba(12, 43, 33, 0.12) !important;
  box-shadow:
    0 10px 30px -18px rgba(5, 35, 24, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset !important;
}
/* Light Explore Service button arrow */
.slide-light .link-arrow svg {
  width: 28px !important;
  height: 28px !important;
  padding: 6px !important;
  box-sizing: border-box;

  display: inline-block;
  flex-shrink: 0;

  background: var(--green-700);
  border-radius: 50%;

  stroke: #fff !important;
  color: #0a5828 !important;
  fill: none !important;

  transition: transform .18s ease;
}

.slide-light .link-arrow:hover svg {
  transform: translate(3px, -2px);
}


.feature-slide.slide-dark .link-arrow:hover svg {
  transform: translate(3px, -2px);
}
/* =========================================================
   DROPDOWN ARROW — CENTER ALIGN
   Home + Services + Contact
========================================================= */

.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 42px;

  background-color: #fff;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b2d2a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}


/* Phone country-code dropdown */
.phone-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: 32px;

  background-color: #fff;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b2d2a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 13px 13px;
}
/* CONTACT FORM DROPDOWNS */

#cf-category,
#cf-specific {
  width: 100%;
  height: 50px;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 0 42px 0 16px;

  background-color: #fff;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b2d2a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 14px 14px;

  cursor: pointer;
}
.detail-block {
  scroll-margin-top: 110px;
}
/* =========================================================
   PROCESS STAGE INNER BOX COLORS — EXACT HTML STRUCTURE
   ========================================================= */

.section-dark .process-row > .process-wrap-item:nth-child(1) .process-step p {
  background: #F3F7F7 !important;
  border: 1px solid #B8CBCD !important;
}

.section-dark .process-row > .process-wrap-item:nth-child(3) .process-step p {
  background: #ECFFF3 !important;
  border: 1px solid #A8EFC5 !important;
}

.section-dark .process-row > .process-wrap-item:nth-child(5) .process-step p {
  background: #F5F1FF !important;
  border: 1px solid #D0C1F5 !important;
}

.section-dark .process-row > .process-wrap-item:nth-child(7) .process-step p {
  background: #FFF5EE !important;
  border: 1px solid #FFC9A8 !important;
}

.section-dark .process-row > .process-wrap-item:nth-child(9) .process-step p {
  background: #FBF9EF !important;
  border: 1px solid #E8E2C8 !important;
}

/* STAGE 6 */
.section-dark .process-row + .process-row > .process-wrap-item:nth-child(1) .process-step p {
  background: #F0F6F7 !important;
  border: 1px solid #B9CCCF !important;
}

/* STAGE 7 */
.section-dark .process-row + .process-row > .process-wrap-item:nth-child(3) .process-step p {
  background: #ECFFF3 !important;
  border: 1px solid #A8EFC5 !important;
}
/* =========================================================
   WHERE MOST PROJECTS BEGIN
   EXPLORE SERVICE — PLAIN GREEN ARROW
   ========================================================= */

.feature-slide .link-arrow {
  color: #00B73A !important;
}

.feature-slide .link-arrow svg {
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  stroke: #00B73A !important;
  color: #00B73A !important;
  fill: none !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

.feature-slide .link-arrow:hover svg {
  transform: translate(3px, -2px) !important;
}
/* Explore service divider — match each card background */

.feature-slide.slide-dark .link-arrow {
  border-top: 1px solid rgba(0, 183, 58, 0.35) !important;
  color: #00B73A !important;
}

.feature-slide.slide-light .link-arrow {
  border-top: 1px solid #D9D9CC !important;
  color: #00B73A !important;
}

/* Plain arrow — no circle/background */
.feature-slide .link-arrow svg {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  stroke: currentColor !important;
  fill: none !important;
}
/* FOOTER LINK HOVER — GREEN */
.footer-col a:hover,
.legal-links a:hover {
    color: #00DC46 !important;
    text-decoration: none !important;
}
/* FOOTER CONTACT HOVER */
.footer-contact:hover {
    color: #00DC46 !important;
    cursor: pointer;
}
/* =========================================================
   BLOG SEARCH RESULTS STATE
   ========================================================= */

.blog-results-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 56px 0 4px;
}

.blog-results-heading h2 {
  font-size: 1.3rem;
  margin: 0;
}

#blog-results-count {
  color: var(--muted);
  font-size: 0.82rem;
}

/* No results box */
.no-results {
  display: none;
  width: 100%;
  min-height: 412px;
  margin-top: 32px;
  padding: 70px 30px;
  border: 1px solid #DDDCD0;
  border-radius: 30px;
  background: #FBFAF1;
  text-align: center;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.no-results.show {
  display: flex;
}

.no-results-icon {
  width: 64px;
  height: 64px;
  border-radius: 9px;
  background: #E4F8E8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.no-results h3 {
  margin: 0 0 12px;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--ink);
}

.no-results p {
  max-width: 520px;
  margin: 0 auto 22px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

#clear-blog-filters {
  border: 1px solid #CCD4CE;
  background: transparent;
  color: var(--ink);
  border-radius: 30px;
  padding: 11px 25px;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 540;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

#clear-blog-filters:hover {
  border-color: #12B94B;
  background: #F2FFF5;
}

/* Search focus */
#blog-search:focus {
  outline: none;
}

.search-box:focus-within {
  border-color: #20C967;
  box-shadow: 0 0 0 2px rgba(32, 201, 103, .16);
}

/* Mobile */
@media (max-width: 720px) {
  .blog-results-heading {
    margin-top: 40px;
  }

  .no-results {
    min-height: 360px;
    padding: 55px 20px;
    border-radius: 22px;
  }

  .no-results h3 {
    font-size: 1.4rem;
  }

  .no-results p {
    font-size: 0.88rem;
  }
}
/* Trusted Partner - individual icon box colors */

.feature-card:nth-child(1) .icon {
    background: #f1f0ee;
}

.feature-card:nth-child(2) .icon {
    background: #fff0e9;
}

.feature-card:nth-child(3) .icon {
    background: #f3f0fa;
}

.feature-card:nth-child(4) .icon {
    background: #dffae7;
}

.feature-card:nth-child(5) .icon {
    background: #e9eeee;
}

.feature-card:nth-child(6) .icon {
    background: #f1f0ee;
}
/* Seven Stages - remove only icon box */
.section-dark .process-step .icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* Featured Services - Green arrow icons */
.carousel-arrow {
    color: #00c853 !important;
    background: #f9f7e8 !important;
    
}
/* Service card — very thin divider line */

.coming-card > p {
    border-bottom: 1px solid !important;
    padding-bottom: 16px !important;
    margin-bottom: 4px !important;
}

/* Purple card */
.tone-purple-soft > p {
    border-bottom-color: rgba(126, 99, 235, 0.18) !important;
}

/* Orange card */
.tone-orange-soft > p {
    border-bottom-color: rgba(255, 126, 45, 0.18) !important;
}

/* Green card */
.tone-mint-soft > p {
    border-bottom-color: rgba(0, 190, 75, 0.18) !important;
}
/* HOME MOBILE LOGO — MATCH OTHER PAGES POSITION */
@media (max-width: 720px) {

  .brand .logo-mark {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 60px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
  }

  .brand .logo-mark svg {
    width: 90px !important;
    height: 40px !important;
    display: block !important;
    margin: 0 !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
}
/* HOME PAGE MOBILE — MATCH OTHER PAGE LOGO POSITION */
@media (max-width: 720px) {
  .brand .logo-mark {
    transform: translateX(-8px) !important;
  }
}
/* =========================================================
   TABLET NAVBAR = SAME AS PHONE NAVBAR
   721px - 1024px
   ========================================================= */

@media (min-width: 721px) and (max-width: 1024px) {

  .site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;

    padding: 14px 0 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .nav-shell {
    width: calc(100% - 28px) !important;
    max-width: none !important;

    min-height: 58px !important;

    padding: 7px 9px 7px 16px !important;

    border-radius: 999px !important;

    margin: 0 auto !important;
  }

  /* Same logo sizing as phone */
  .brand {
    font-size: 1rem !important;
  }

  .brand .logo-mark svg {
    width: 27px !important;
    height: 27px !important;
  }

  /* Hide desktop navigation */
  .nav-links,
  .nav-cta .btn {
    display: none !important;
  }

  /* Show hamburger */
  .nav-toggle {
    display: flex !important;

    width: 40px !important;
    height: 40px !important;

    border-radius: 50% !important;

    align-items: center !important;
    justify-content: center !important;
  }

  /* Same mobile dropdown menu */
  .mobile-menu {
    width: calc(100% - 28px) !important;
    max-width: none !important;

    margin: 8px auto 0 !important;

    background: rgba(255, 255, 255, 0.97) !important;

    border-radius: 18px !important;
  }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .brand .logo-mark svg,
  .brand > svg {
    width: 38px !important;
    height: 38px !important;
  }

  .brand {
    font-size: 1.1rem !important;
  }
}
@media (min-width: 721px) and (max-width: 1024px) {
  .site-footer .footer-brand svg,
  .site-footer .brand svg,
  .site-footer .logo-mark svg {
    width: 56px !important;
    height: 56px !important;
  }
}

/* ============================================================
   TABLET FOOTER — LOGO SIZE FIX
   ============================================================ */
@media (min-width: 721px) and (max-width: 1024px) {

  .site-footer .footer-brand .brand {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 18px !important;
  }

  .site-footer .footer-brand .brand > svg {
    width: 120px !important;
    height: auto !important;
    max-width: none !important;
    min-width: 120px !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
}