/* Poppins is loaded with a <link> in index.html, not @import.
   @import blocks rendering until the font CSS downloads, which is the single
   biggest delay on a phone connection. */

/* ==========================================================================
   Mountics stylesheet
   --------------------------------------------------------------------------
   CONTENTS
   01. Design tokens (colours, spacing) ....... edit these first
   02. Reset & base
   03. Shared layout + buttons
   04. Header / navigation
   05. Hero
   06. Logo strip
   07. Why Choose (cards grid)
   08. Real Results (tabs + stats)
   09. Services
   10. Process
   11. CTA band
   12. Integrations + logo marquee
   13. Footer
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Change a colour here and it updates everywhere on the site.
   ========================================================================== */
:root{
  /* Brand */
  --green:        #00A651;
  --green-dark:   #008F45;   /* button hover */

  /* Surfaces */
  --page-bg:      #FAFBFC;
  --card-bg:      #F3F4F5;
  --stat-bg:      #EFF0F1;
  --service-bg:   #FAFBFB;
  --tab-bg:       #F4F4F5;
  --tab-bg-hover: #EBEBED;
  --tile-bg:      #D2D3D5;   /* marquee placeholder grey */
  --border:       #ECEDEF;
  --border-strong:#E6E8EB;
  --background-grey:#F6F6F6;

  /* Text */
  --text-dark:    #111111;
  --text-strong:  #2B2F33;
  --text-body:    #3F4449;
  --text-muted:   #5C6166;
  --text-link:    #1A1A1A;

  /* Layout */
  --gap:          24px;
  --container:    1440px;    /* outer page width */
  --inner:        1278px;    /* inner content width, shared by all sections */
  --section-y:    128px;      /* vertical padding on every section */
  --section-x:    24px;
}

/* Section spacing scales down on smaller screens. Because every section uses
   --section-y, changing it here re-spaces the whole page at once. */
@media (max-width:1024px){ :root{ --section-y:96px; } }
@media (max-width:768px){  :root{ --section-y:76px; --gap:18px; } }
@media (max-width:480px){  :root{ --section-y:60px; --section-x:18px; } }


/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;      /* stops the sticky header covering anchor targets */
  -webkit-text-size-adjust:100%; /* stops iOS inflating text in landscape */
}
@media (max-width:900px){ html{ scroll-padding-top:84px; } }

body{
  font-family:"Poppins","Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--page-bg);
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;              /* stops sideways scroll without breaking sticky header */
  overflow-wrap:break-word;     /* long URLs and names wrap instead of overflowing */
}

/* Grey section background. Use class="bg-grey" on a <section>. */
.bg-grey{ background-color:var(--background-grey); }

img{ max-width:100%; }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--green);
  outline-offset:3px;
}

/* Skip link for keyboard and screen-reader users */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green); color:#fff;
  padding:12px 20px; font-size:14px; font-weight:600;
  text-decoration:none;
}
.skip-link:focus{ left:12px; top:12px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  /* Only hover/press transitions are shortened here. Looping animations are
     switched off individually in their own sections, e.g. the logo marquee. */
  a, button, .btn, .btn-green, .logo-item img{ transition-duration:.01ms !important; }
}


/* ==========================================================================
   03. SHARED LAYOUT + BUTTONS
   ========================================================================== */
.container{ max-width:var(--container); margin:0 auto; }

.section{ padding:var(--section-y) var(--section-x); }

/* Every section's inner content column */
.inner{ max-width:var(--inner); margin:0 auto; }

.section-title{
  /* Scales smoothly between phone and desktop instead of jumping at a
     breakpoint. min 24px, grows with viewport width, caps at 36px. */
  font-size:clamp(24px, 4.6vw, 36px);
  font-weight:800;
  letter-spacing:-.5px;
  line-height:1.25;
  text-align:center;
}

/* Centred intro block above a grid */
.section-header{ max-width:820px; margin:0 auto 60px; text-align:center; }
.section-header p{ margin-top:18px; font-size:16px; line-height:1.7; color:var(--text-muted); }

@media (max-width:768px){
  .section-header{ margin-bottom:40px; }
  .section-header p{ font-size:15px; margin-top:14px; }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600;
  padding:15px 28px;
  border-radius:4px;
  text-decoration:none;
  transition:background .2s, color .2s, border-color .2s;
}
.btn-solid{ background:var(--green); color:#fff; }
.btn-solid:hover{ background:var(--green-dark); }

.btn-outline{ background:transparent; border:1px solid var(--text-dark); color:var(--text-dark); }
.btn-outline:hover{ background:var(--text-dark); color:#fff; }

/* Small green pill button used in the Process section */
.btn-green{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green);
  color:#fff;
  font-size:13px; font-weight:600;
  padding:14px 26px;
  text-decoration:none;
  transition:background .2s;
}
.btn-green:hover{ background:var(--green-dark); }

/* Arrow that nudges right on hover, shared by links and buttons */
.arrow{ transition:transform .2s; }
.btn-green:hover .arrow,
.service-link:hover .arrow{ transform:translateX(4px); }

/* Row of buttons, used by the hero and the CTA band */
.actions-row{
  margin-top:48px;
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

/* Small reassurance line under a button row. Removing perceived risk at the
   point of clicking usually lifts conversions more than the button wording. */
.actions-note{
  margin-top:16px;
  font-size:13px;
  color:var(--text-muted);
}

@media (max-width:768px){
  .actions-row{ margin-top:32px; gap:12px; }
  .actions-note{ margin-top:14px; font-size:12.5px; }
}
@media (max-width:640px){
  /* Stacked full-width buttons are far easier to hit with a thumb. */
  .actions-row{ flex-direction:column; align-items:center; }
  .actions-row .btn{ width:100%; max-width:340px; }
  .btn{ padding:16px 24px; }      /* ~52px tall, comfortably above the 44px target */
}


/* ==========================================================================
   04. HEADER / NAVIGATION
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--page-bg);
  padding:26px 0;
}
.header-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 48px;
  display:grid;
  grid-template-columns:1fr auto 1fr;   /* logo | centred nav | right CTA */
  align-items:center;
}

.main-nav{ display:flex; gap:40px; }
.main-nav a{
  font-size:15px; font-weight:500;
  color:var(--text-link); text-decoration:none;
  transition:color .2s;
}
.main-nav a:hover{ color:var(--green); }

/* --------------------------------------------------------------------------
   CURRENT PAGE INDICATOR
   Driven by aria-current="page" in the markup, so the same attribute that
   tells a screen reader which page this is also draws the highlight. Nothing
   to keep in sync: set aria-current on one link per page and it just works.
   -------------------------------------------------------------------------- */
.main-nav a[aria-current="page"]{
  color:var(--green);
  font-weight:600;
}
.main-nav a[aria-current="page"]:hover{ color:var(--green-dark); }

/* Underline bar, desktop only. The mobile menu is a stacked list where an
   underline reads as a row divider, so it gets a different treatment below. */
@media (min-width:901px){
  .main-nav a[aria-current="page"]{ position:relative; }
  .main-nav a[aria-current="page"]::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-7px;
    height:2px;
    background:var(--green);
  }
}

.header-right{ justify-self:end; display:flex; align-items:center; gap:16px; }

/* Hamburger, mobile only */
.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer;
  width:44px; height:44px;        /* minimum comfortable tap target */
  margin-right:-10px;             /* pulls the visual edge back in line */
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle span{ width:22px; height:2px; background:var(--text-dark); transition:transform .25s, opacity .25s; }
.nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Desktop only: the in-menu CTA is a mobile affordance. */
.nav-cta{ display:none; }

@media (max-width:900px){
  .site-header{ padding:14px 0; }          /* a tall sticky bar wastes phone screen */

  /* Padding gives the logo link a full-height tap area; the matching negative
     margin means the header itself does not get any taller. */
  .header-logo{ padding:8px 0; margin:-8px 0; }
  .header-inner{ padding:0 var(--section-x); grid-template-columns:auto 1fr auto; }

  .main-nav{
    position:absolute; top:100%; left:0; right:0;
    display:none; flex-direction:column; gap:0;
    background:var(--page-bg);
    border-top:1px solid var(--border-strong);
    box-shadow:0 12px 24px rgba(0,0,0,.06);
    padding:8px var(--section-x) 20px;

    /* If the menu ever outgrows the screen it scrolls rather than being cut off. */
    max-height:calc(100vh - 72px);
    max-height:calc(100dvh - 72px);        /* dvh accounts for mobile browser chrome */
    overflow-y:auto;
  }
  .main-nav.open{ display:flex; }

  .main-nav a{
    padding:14px 0;                        /* 46px row height */
    font-size:16px;
    border-bottom:1px solid var(--border);
  }
  .main-nav a:last-of-type{ border-bottom:none; }

  /* Green bar down the left edge marks the current page in the mobile menu.
     Drawn as a pseudo-element rather than a border, so the label stays
     aligned with the other items instead of being nudged sideways. */
  .main-nav a[aria-current="page"]{ position:relative; }
  .main-nav a[aria-current="page"]::before{
    content:"";
    position:absolute;
    left:-12px;                 /* sits in the menu's own side padding */
    top:9px; bottom:9px;
    width:3px;
    background:var(--green);
  }

  /* .main-nav a sets a dark link colour and beats .btn-solid on specificity,
     so the button's white text has to be restated here. */
  .main-nav a.nav-cta{
    display:inline-flex;
    margin-top:14px;
    width:100%;
    border-bottom:none;
    color:#fff;
  }
  .main-nav a.nav-cta:hover{ color:#fff; background:var(--green-dark); }

  .nav-toggle{ display:inline-flex; }
}

@media (max-width:520px){
  .header-cta{ display:none; }             /* replaced by .nav-cta inside the menu */
}

/* --------------------------------------------------------------------------
   HEADER CTA SIZING
   "Free Marketing Audit" is a long label. Between roughly 900px and 1150px
   the nav and the button run out of room and the button wraps onto two
   lines, so it tightens up through that range instead.
   -------------------------------------------------------------------------- */
.header-cta{ white-space:nowrap; }         /* never break across two lines */

@media (min-width:901px) and (max-width:1150px){
  .main-nav{ gap:24px; }
  .header-cta{ padding:13px 16px; font-size:13px; }
}


/* ==========================================================================
   LOGO (image file, shared by header + footer)
   Files live in img/. Swap logo.svg for your own file and the whole site
   updates. SVG is preferred because it stays sharp at any size. If you only
   have a PNG, export it at 2x the display height and use the srcset line
   shown in index.html.
   ========================================================================== */
.site-logo{ display:inline-block; line-height:0; text-decoration:none; }
.site-logo img{ display:block; width:auto; }

.header-logo{ justify-self:start; }
.header-logo img{ height:34px; }
.footer-logo img{ height:46px; }

@media (max-width:520px){
  .header-logo img{ height:28px; }
}

/* --------------------------------------------------------------------------
   OLD CSS-DRAWN WORDMARK
   Kept so you can fall back to it. To use it again, swap the <a> markup in
   index.html back to the commented-out version and delete this note.
   -------------------------------------------------------------------------- */
.wordmark{
  display:inline-flex; align-items:baseline;
  font-weight:800; line-height:1;
  color:var(--text-dark); text-decoration:none;
}
.wordmark.header-logo{ font-size:34px; letter-spacing:-1.2px; }
.wordmark.footer-logo{ font-size:46px; letter-spacing:-1.5px; }

.fi{ position:relative; display:inline-block; width:.26em; height:.72em; }
.fi .stem{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:.13em; height:.5em; background:var(--text-dark); border-radius:.02em;
}
.fi .dot{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:.13em; height:.13em; background:var(--green); border-radius:50%;
}
.fd{
  display:inline-block;
  width:.13em; height:.13em;
  background:var(--green); border-radius:50%;
  margin-left:.05em;
}


/* ==========================================================================
   05. HERO
   ========================================================================== */
.hero{
  padding:140px var(--section-x) 120px;
  text-align:center;
}
.hero-title{
  font-size:clamp(30px, 6.4vw, 52px);
  font-weight:800;
  letter-spacing:-1px;
  line-height:1.15;
  color:var(--text-dark);
  text-wrap:balance;             /* evens out the line lengths where supported */
}
.hero-title .accent{ color:var(--green); }

.hero-sub{
  max-width:980px;
  margin:24px auto 0;
  font-size:16px;
  line-height:1.7;
  color:var(--text-muted);
}

@media (max-width:900px){
  .hero{ padding:80px var(--section-x) 70px; }
}
@media (max-width:640px){
  .hero{ padding:56px var(--section-x) 56px; }
  .hero-title{ letter-spacing:-.5px; }
  .hero-sub{ font-size:15px; margin-top:18px; }
}


/* ==========================================================================
   06. LOGO STRIP
   ========================================================================== */
.logo-strip{ padding:70px var(--section-x); }

.logo-strip-title{
  text-align:center;
  font-size:15px;
  font-weight:600;
  color:var(--text-strong);
}

/* --------------------------------------------------------------------------
   HORIZONTAL LOGO MARQUEE

   Same idea as the vertical one in section 12, turned on its side. The logo
   set is written 4 times in the HTML and the track slides by exactly one set
   (25% of its own width), so the reset is invisible.

   Each logo sits in a fixed-width .logo-item rather than sizing to the image.
   That guarantees one set is always wider than the strip, which is what stops
   an empty gap appearing mid-loop, whatever shape your logo files are.

   To reverse the direction, swap the two values in @keyframes logo-scroll.
   -------------------------------------------------------------------------- */
.logo-marquee-h{
  --logo-item-w: 214px;   /* slot width per logo, including its spacing */
  --logo-h:       64px;   /* logo height */
  --logo-speed:   28s;    /* time to travel one full set. Bigger = slower. */

  max-width:1100px;
  margin:74px auto 0;
  overflow:hidden;

  /* Softens both ends so logos fade in and out instead of being cut off. */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
}

.logo-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:logo-scroll var(--logo-speed) linear infinite;
  will-change:transform;
}

.logo-item{
  flex:0 0 auto;
  width:var(--logo-item-w);
  display:grid;
  place-items:center;
}
.logo-item img{
  height:var(--logo-h);
  width:auto;
  max-width:80%;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.75;
  transition:filter .25s, opacity .25s;
}
.logo-item img:hover{ filter:grayscale(0); opacity:1; }

/* Moves left to right. For right to left, swap -25% and 0. */
@keyframes logo-scroll{
  from{ transform:translateX(0); }
  to{   transform:translateX(-25%); }
}

.logo-marquee-h:hover .logo-track{ animation-play-state:paused; }

/* The strip keeps scrolling on phones, just smaller and a little slower. */
@media (max-width:900px){
  .logo-strip{ padding:56px var(--section-x); }
  .logo-marquee-h{
    --logo-item-w:170px;
    --logo-h:50px;
    --logo-speed:24s;
    margin-top:44px;
  }
}
@media (max-width:640px){
  .logo-marquee-h{
    --logo-item-w:140px;
    --logo-h:40px;
    --logo-speed:20s;
    /* narrower fade, so more of the small strip stays fully visible */
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image:linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  }
  .logo-strip-title{ font-size:14px; }
}
@media (max-width:380px){
  .logo-marquee-h{ --logo-item-w:120px; --logo-h:34px; }
}

/* No hover on touch, so it can never be paused. Slow it slightly to compensate. */
@media (hover:none){
  .logo-marquee-h{ --logo-speed:32s; }
}


/* ==========================================================================
   07. WHY CHOOSE (cards grid)
   ========================================================================== */
.cards-grid{
  max-width:var(--inner);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
}
.card{
  background:var(--card-bg);
  padding:34px 30px;
  display:flex; flex-direction:column; align-items:flex-start;
}
/* --------------------------------------------------------------------------
   ICON TILES

   .icon            -> green square with the icon centred inside (Why Choose)
   .service-icon-new-> bare icon image, no square (Services)

   The square is sized from the icon plus padding, so changing --icon-size
   below resizes both together and the icon can never overflow its tile.

   Optional modifier:  class="icon invert"  turns a dark icon file white.
   -------------------------------------------------------------------------- */
:root{
  --icon-size: 50px;   /* the artwork */
  --icon-pad:  12px;   /* space around it inside the green square */
}

.icon{
  margin-bottom:26px;
}

.icon img,
.icon svg{
  width:var(--icon-size);
  height:var(--icon-size);
  object-fit:contain;
  display:block;
}

/* Services: image on its own, no tile. */
.service-icon-new{ margin-bottom:22px; line-height:0; }
.service-icon-new img{
  height:var(--icon-size);
  width:auto;
  object-fit:contain;
  display:block;
}

/* For icon files that are black or dark, so they read on the green square. */
.icon.invert img{ filter:brightness(0) invert(1); }

@media (max-width:768px){
  :root{ --icon-size:42px; --icon-pad:10px; }
  .icon{ margin-bottom:20px; }
  .service-icon-new{ margin-bottom:16px; }
}

.card h3{ font-size:19px; font-weight:700; margin-bottom:14px; }
.card p{ font-size:13.5px; line-height:1.65; color:var(--text-muted); }

.grid-image{ overflow:hidden; min-height:280px; background:#e5e7e9; }
.grid-image img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:1024px){
  .cards-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:768px){
  .card{ padding:26px 22px; }
  .card h3{ font-size:18px; margin-bottom:10px; }
  .card p{ font-size:14px; }      /* nudged up: 13.5px is small on a phone */
  .grid-image{ min-height:220px; }
}
@media (max-width:640px){
  .cards-grid{ grid-template-columns:1fr; }
  .grid-image{ min-height:200px; }
}


/* ==========================================================================
   08. TESTIMONIALS
   Replaces the old tabs + stats block. The tab CSS is gone; the tab code in
   script.js is null-guarded, so it simply does nothing now and is safe to
   leave in place for other pages.
   ========================================================================== */
.results-section .section-title{ margin-bottom:64px; }

.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
}

.testimonial{
  background:var(--card-bg);
  padding:36px 32px;
  margin:0;                       /* <figure> carries a default margin */
  display:flex;
  flex-direction:column;
}

.testimonial blockquote{
  margin:0;
  flex:1 1 auto;                  /* pushes the attribution to the bottom so
                                     all three line up regardless of length */
}

/* Decorative opening quote mark. */
.testimonial blockquote::before{
  content:"\201C";
  display:block;
  font-size:56px;
  line-height:.8;
  color:var(--green);
  margin-bottom:12px;
}

.testimonial blockquote p{
  margin:0;
  font-size:15.5px;
  line-height:1.75;
  color:var(--text-body);
}

.testimonial figcaption{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--border-strong);
}

.testimonial-logo{
  height:34px;
  width:auto;
  display:block;
  margin-bottom:14px;
  filter:grayscale(1);
  opacity:.75;
}

.testimonial-person{ display:flex; flex-direction:column; gap:3px; }
.testimonial-name{ font-size:14.5px; font-weight:700; color:var(--text-dark); }
.testimonial-role{ font-size:13px; color:var(--text-muted); }

@media (max-width:1024px){
  .testimonial-grid{ grid-template-columns:repeat(2, 1fr); }
  /* Third card would sit alone on the second row, so let it span the width. */
  .testimonial:last-child{ grid-column:1 / -1; }
}

@media (max-width:768px){
  .results-section .section-title{ margin-bottom:40px; }
  .testimonial{ padding:28px 24px; }
  .testimonial blockquote p{ font-size:15px; }
  .testimonial blockquote::before{ font-size:46px; }
}

/* --------------------------------------------------------------------------
   MOBILE: swipeable carousel

   Below 640px the grid becomes a horizontal scroller instead of a tall
   stack. Pure CSS, no JavaScript: scroll-snap does the "settle on a card"
   behaviour that a swipe carousel needs.

   Each card is 84% wide so a sliver of the next one is always visible. That
   peek is what tells people it scrolls; without it, a single full-width card
   looks like the whole section and nobody swipes.
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .testimonial-grid{
    display:flex;                  /* not grid, so the cards sit in one row */
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;   /* momentum scrolling on older iOS */
    scroll-padding-left:var(--section-x);
    gap:14px;

    /* Pulls the scroller out to the screen edges so cards can scroll fully
       edge to edge, then restores the reading inset with padding. */
    margin-left:calc(var(--section-x) * -1);
    margin-right:calc(var(--section-x) * -1);
    padding:4px var(--section-x) 18px;

    /* Hide the scrollbar. The peeking card already signals it scrolls. */
    scrollbar-width:none;              /* Firefox */
    -ms-overflow-style:none;           /* old Edge */
  }
  .testimonial-grid::-webkit-scrollbar{ display:none; }   /* Chrome, Safari */

  /* The container is focusable for keyboard scrolling, so it needs a
     visible focus ring like every other interactive element. */
  .testimonial-grid:focus-visible{
    outline:2px solid var(--green);
    outline-offset:2px;
  }

  .testimonial{
    flex:0 0 84%;                  /* 84% leaves the next card peeking */
    scroll-snap-align:start;
    grid-column:auto;
  }

  /* One-off hint under the carousel. Delete this rule and the <p> in the
     HTML if you would rather not show it. */
  .swipe-hint{
    margin-top:4px;
    text-align:center;
    font-size:12.5px;
    color:var(--text-muted);
  }
}

/* Only a hint on touch screens; pointless with a mouse. */
.swipe-hint{ display:none; }
@media (max-width:640px){
  .swipe-hint{ display:block; }
}


/* ==========================================================================
   09. SERVICES
   ========================================================================== */
.services-section{ padding:var(--section-y) var(--section-x); }

.services-grid{
  max-width:var(--inner);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
}

.service-card{
  background:var(--service-bg);
  border:1px solid var(--border);
  padding:30px 28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.service-card h3{ font-size:17px; font-weight:700; margin-bottom:12px; }
.service-card p{ font-size:13px; line-height:1.6; color:var(--text-muted); margin-bottom:24px; }

.service-link{
  margin-top:auto;                /* keeps every link flush with the card bottom */
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 0;
  font-size:12.5px; font-weight:600;
  color:var(--text-dark); text-decoration:none;
}

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

@media (max-width:768px){
  .service-card{ padding:24px 20px; }
  .service-card h3{ font-size:16px; }
  .service-card p{ font-size:14px; margin-bottom:18px; }
  .service-link{ font-size:13.5px; padding:6px 0; }   /* taller tap area */
}

@media (max-width:640px){ .services-grid{ grid-template-columns:1fr; } }


/* ==========================================================================
   10. PROCESS
   ========================================================================== */
.process-section{ padding:var(--section-y) var(--section-x); }
.process-section .section-title{ margin-bottom:56px; }

.process-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
}
.process-card{ background:var(--card-bg); padding:28px; }
.process-media{
  height:240px;
  display:grid; place-items:center;
  margin-bottom:24px;
}
.process-media img{ max-width:80%; max-height:80%; object-fit:contain; display:block; }
.process-card h3{ font-size:17px; font-weight:700; margin-bottom:12px; }
.process-card p{ font-size:13px; line-height:1.6; color:var(--text-muted); }

.process-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
  margin-top:64px;
  text-align:center;
}
/* The base .stat-value rule used to live in the old results section. It is
   restated here because the process stats still use the class. */
.stat-value{ font-weight:800; letter-spacing:-1px; line-height:1.1; }
.process-stat .stat-value{ font-size:clamp(28px, 5.4vw, 40px); }
.process-stat p{
  max-width:220px;
  margin:4px auto 0;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:var(--text-strong);
}

.process-cta{ text-align:center; margin-top:24px; }

@media (max-width:1024px){
  .process-grid, .process-stats{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:768px){
  .process-section .section-title{ margin-bottom:36px; }
  .process-card{ padding:22px; }
  .process-media{margin-bottom:18px; }
  .process-card h3{ font-size:16px; }
  .process-card p{ font-size:14px; }
  .process-stats{ margin-top:40px; }
  .process-cta{ margin-top:32px; }
  .btn-green{ padding:15px 24px; font-size:14px; }
}

@media (max-width:640px){
  .process-grid{ grid-template-columns:1fr; }
  /* Stats stay two-up so they still read as a set rather than a list. */
  .process-stats{ grid-template-columns:repeat(2, 1fr); gap:28px 12px; }
  .process-stat p{ font-size:12.5px; }
  .btn-green{ width:100%; max-width:340px; justify-content:center; }
}

@media (max-width:400px){
  .process-stats{ grid-template-columns:1fr; }
}


/* ==========================================================================
   11. CTA BAND
   ========================================================================== */
.cta-section{
  padding:var(--section-y) var(--section-x);
  text-align:center;
}


/* ==========================================================================
   12. INTEGRATIONS + LOGO MARQUEE
   ========================================================================== */
.integrations-section{ padding:var(--section-y) var(--section-x); }

.integrations-inner{
  max-width:var(--inner);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:96px;
  align-items:center;
}
.integrations-copy h2{
  font-size:clamp(24px, 4.6vw, 36px);
  font-weight:800;
  letter-spacing:-.5px;
  line-height:1.25;
}
.integrations-copy p{
  margin-top:24px;
  max-width:540px;
  font-size:15px;
  line-height:1.7;
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   HOW THE MARQUEE WORKS
   Each column holds ONE list of logo tiles, written twice in the HTML.
   The track scrolls exactly -50% of its own height, so at the moment the
   first copy has fully passed, the second copy is sitting in precisely the
   same spot the first one started in. The jump back to 0 is invisible.

   If you add or remove a tile, add or remove it from BOTH copies in the HTML,
   otherwise the two halves stop matching and the loop will visibly jump.
   -------------------------------------------------------------------------- */
.logo-marquee{
  display:grid;
  grid-template-columns:repeat(3, 104px);
  gap:32px;
}

.marquee-col{
  height:400px;
  overflow:hidden;

  /* Fades the top and bottom edges so tiles appear and disappear softly. */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
}

.marquee-track{
  display:flex;
  flex-direction:column;
  will-change:transform;       /* keeps the scroll smooth on lower-end devices */
}

.logo-tile{
  height:100px;
  margin-bottom:24px;          /* margin, not gap, so the two halves stay identical */
  display:grid; place-items:center;
}
.logo-tile img{ max-width:90%; max-height:90%; filter:grayscale(1); opacity:.8; }

/* Direction. Column 1 up, column 2 down, column 3 up. */
.marquee-col.up   .marquee-track{ animation:marquee-up   var(--speed) linear infinite; }
.marquee-col.down .marquee-track{ animation:marquee-down var(--speed) linear infinite; }

/* Speed per column. Slightly different values stop the three columns from
   marching in lockstep. Bigger number = slower. */
.marquee-col:nth-child(1){ --speed:26s; }
.marquee-col:nth-child(2){ --speed:32s; }
.marquee-col:nth-child(3){ --speed:29s; }

/* Pause the whole set when the visitor hovers any column. */
.logo-marquee:hover .marquee-track{ animation-play-state:paused; }

@keyframes marquee-up{
  from{ transform:translateY(0); }
  to{   transform:translateY(-50%); }
}
@keyframes marquee-down{
  from{ transform:translateY(-50%); }
  to{   transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}

@media (max-width:900px){
  .integrations-inner{ grid-template-columns:1fr; gap:48px; }
  .integrations-inner > *{ min-width:0; }        /* lets grid children shrink instead of overflowing */

  .integrations-copy{ text-align:center; }
  .integrations-copy p{ margin-left:auto; margin-right:auto; }
  .integrations-copy br{ display:none; }         /* the forced break lands badly when narrow */

  .logo-marquee{
    width:100%;
    grid-template-columns:repeat(3, 1fr);        /* fluid columns instead of fixed 104px */
    gap:16px;
  }
  .marquee-col{ height:340px; }
  .logo-tile{ height:92px; margin-bottom:16px; }
}

@media (max-width:640px){
  .marquee-col{ height:280px; }
  .logo-tile{ height:74px; margin-bottom:14px; }
  .logo-marquee{ gap:12px; }
}

/* Touch devices have no hover, so the pause-on-hover rule never fires and the
   tiles would scroll past before they can be read. Slowing them down helps. */
@media (hover:none){
  .marquee-col:nth-child(1){ --speed:34s; }
  .marquee-col:nth-child(2){ --speed:40s; }
  .marquee-col:nth-child(3){ --speed:37s; }
}


/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer{ padding:100px var(--section-x) 40px; }

.footer-grid{
  max-width:var(--inner);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr .9fr .6fr;
  gap:48px;
  align-items:start;
}

.footer-brand p{
  margin-top:28px;
  max-width:560px;
  font-size:15px;
  line-height:1.65;
  color:var(--text-body);
}

.footer-col h4{ font-size:16px; font-weight:700; margin-bottom:20px; }
.footer-col ul{ list-style:disc; padding-left:18px; }
.footer-col li{ margin-bottom:12px; font-size:14.5px; }
.footer-col li::marker{ color:var(--text-dark); }
.footer-col a{ display:inline-block; color:var(--text-link); text-decoration:none; }
.footer-col a:hover{ text-decoration:underline; }

.footer-bottom{
  max-width:var(--inner);
  margin:90px auto 0;
  text-align:center;
  font-size:13px;
  color:var(--text-strong);
}
.footer-bottom a{ color:inherit; text-decoration:none; }
.footer-bottom a:hover{ text-decoration:underline; }

@media (max-width:900px){
  .site-footer{ padding:72px var(--section-x) 32px; }

  /* Brand across the top, then the two link columns side by side. Stacking
     all three wastes a lot of vertical space on a phone. */
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px 24px; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-brand p{ font-size:14.5px; margin-top:20px; }
  .footer-logo img{ height:40px; }

  .footer-col li{ margin-bottom:10px; font-size:14px; }

  .footer-bottom{ margin-top:48px; line-height:1.9; }
}

@media (max-width:420px){
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
}


/* --------------------------------------------------------------------------
   TOUCH TARGETS
   Keyed off (hover:none) rather than a width, so a large tablet gets the
   bigger targets too. Roughly 44px is the size a fingertip reliably hits.
   -------------------------------------------------------------------------- */
@media (hover:none){
  .main-nav a,
  .footer-col a,
  .footer-bottom a,
  .service-link{ padding-top:9px; padding-bottom:9px; }

  .footer-col li{ margin-bottom:4px; }
  .footer-bottom{ line-height:2.2; }
} 

/* --- Path to Peak Growth: stacked horizontal step rows --- */
.path-grid{
  display:grid;
  gap:var(--gap);
}
.path-card{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:32px;
  align-items:center;
}
.path-card img{
  width:110px;
  height:auto;
  display:block;
}
@media (max-width:640px){
  .path-card{ grid-template-columns:72px 1fr; gap:18px; }
  .path-card img{ width:72px; }
}

@media (max-width: 768px) {
  figure.grid-image {
    display: none;
  }
}

@media (max-width: 640px) {
  .section-why{
    text-align: left;
  }

  .why-p{
    text-align: left;
  }

  .personalized-title{
    text-align: left;
  }

    .personalized-p{
    text-align: left;
  }
}