/* ==========================================================================
   Vending Website Template: shared stylesheet
   Swap the values in :root to re-skin the whole site for a new business.
   ========================================================================== */

:root{
  /* Three oranges, chosen by contrast ratio rather than by eye:
       --orange       bright brand fill (buttons, icons, blocks). Never carries text.
       --orange-text  large headings only. 3.35:1 on white, 3.04:1 on --bg-alt (AA large).
       --orange-deep  small text on light backgrounds. 4.59:1 on white (AA normal). */
  --orange:        #f2cb30;
  --orange-hover:  #e0bc2d;
  --orange-text:   #a6870d;
  --orange-deep:   #8c7207;
  --orange-light:  #f7d54a;
  --orange-soft:   #fceeb6;
  /* Text that sits ON a brand fill. Bright hues take ink, dark ones take white.
     Every theme in build.html ships a matching pair, all >=4.5:1. */
  --on-brand:      #171614;   /* on --orange  */
  --on-light:      #171614;   /* on --orange-light (the solid header bar) */
  --ink:           #171614;
  --body:          #4a4844;
  --muted:         #706d64;   /* 5.17:1 on white, 4.70:1 on --bg-alt */
  --bg:            #ffffff;
  --bg-alt:        #f4f4f2;  /* matches the background baked into the product shots */
  --footer-bg:     #1e1c1a;
  --line:          #e2e1dc;
  --radius:        4px;
  --shadow-sm:     0 1px 2px rgba(23,22,20,.06), 0 4px 12px rgba(23,22,20,.05);
  --shadow-md:     0 2px 4px rgba(23,22,20,.06), 0 12px 32px rgba(23,22,20,.09);
  --ease:          cubic-bezier(.4,0,.2,1);
  --maxw:          1160px;
  --font-display:  'Outfit', 'Poppins', system-ui, sans-serif;
  --font-body:     'Poppins', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   COLOUR THEMES

   To change the whole site to another colour, copy one block below over the
   eight matching lines in :root above. Nothing else needs touching.

   Every family is contrast-measured, not eyeballed:
     - headings on the fill clear 3:1   (WCAG AA large text)
     - small text clears 4.5:1          (WCAG AA normal text)
     - the text sitting ON the fill clears 4.5:1

   --on-brand and --on-light are the reason this works. Bright hues carry dark
   ink; Indigo and Violet are too dark for ink and carry white instead. Swap the
   fill without swapping these two and the buttons become unreadable.
   ==========================================================================

     ORANGE
       --orange:        #f2842f;
       --orange-hover:  #e37a24;
       --orange-text:   #d97012;
       --orange-deep:   #b85c0a;
       --orange-light:  #f9a763;
       --orange-soft:   #fbb273;
       --on-brand:      #171614;
       --on-light:      #171614;

     AMBER
       --orange:        #f2b230;
       --orange-hover:  #e0a42d;
       --orange-text:   #ba810f;
       --orange-deep:   #9c6a08;
       --orange-light:  #f7be4a;
       --orange-soft:   #fce5b6;
       --on-brand:      #171614;
       --on-light:      #171614;

     GOLD
       --orange:        #f2cb30;
       --orange-hover:  #e0bc2d;
       --orange-text:   #a6870d;
       --orange-deep:   #8c7207;
       --orange-light:  #f7d54a;
       --orange-soft:   #fceeb6;
       --on-brand:      #171614;
       --on-light:      #171614;

     LIME
       --orange:        #abf230;
       --orange-hover:  #9ee02d;
       --orange-text:   #64960c;
       --orange-deep:   #558207;
       --orange-light:  #b8f74a;
       --orange-soft:   #e3fcb6;
       --on-brand:      #171614;
       --on-light:      #171614;

     GREEN
       --orange:        #30f271;
       --orange-hover:  #2de069;
       --orange-text:   #0da13e;
       --orange-deep:   #078732;
       --orange-light:  #4af784;
       --orange-soft:   #b6fccd;
       --on-brand:      #171614;
       --on-light:      #171614;

     TEAL
       --orange:        #30f2e2;
       --orange-hover:  #2de0d1;
       --orange-text:   #0c9c90;
       --orange-deep:   #078278;
       --orange-light:  #4af7e9;
       --orange-soft:   #b6fcf7;
       --on-brand:      #171614;
       --on-light:      #171614;

     SKY
       --orange:        #30b8f2;
       --orange-hover:  #2daae0;
       --orange-text:   #1092c9;
       --orange-deep:   #097aab;
       --orange-light:  #4ac3f7;
       --orange-soft:   #b6e7fc;
       --on-brand:      #171614;
       --on-light:      #171614;

     BLUE
       --orange:        #3b80f7;
       --orange-hover:  #3777e5;
       --orange-text:   #1365f2;
       --orange-deep:   #0c60f2;
       --orange-light:  #4a8af7;
       --orange-soft:   #b6d0fc;
       --on-brand:      #171614;
       --on-light:      #171614;

     INDIGO
       --orange:        #4a30f2;
       --orange-hover:  #452de0;
       --orange-text:   #3113f2;
       --orange-deep:   #2b0cf2;
       --orange-light:  #614af7;
       --orange-soft:   #bfb6fc;
       --on-brand:      #ffffff;
       --on-light:      #ffffff;

     VIOLET
       --orange:        #9830f2;
       --orange-hover:  #8c2de0;
       --orange-text:   #8a13f2;
       --orange-deep:   #870cf2;
       --orange-light:  #ad59f7;
       --orange-soft:   #dbb6fc;
       --on-brand:      #ffffff;
       --on-light:      #171614;

     MAGENTA
       --orange:        #f230b8;
       --orange-hover:  #e02daa;
       --orange-text:   #f213af;
       --orange-deep:   #d90b9b;
       --orange-light:  #f74ac3;
       --orange-soft:   #fcb6e7;
       --on-brand:      #171614;
       --on-light:      #171614;

     RED
       --orange:        #f24430;
       --orange-hover:  #e03f2d;
       --orange-text:   #f22a13;
       --orange-deep:   #e3210b;
       --orange-light:  #f75c4a;
       --orange-soft:   #fcbdb6;
       --on-brand:      #171614;
       --on-light:      #171614;
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.7;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0;font-weight:600}
h1{font-size:clamp(2.3rem,5vw,3.5rem);line-height:1.08;letter-spacing:-.022em}
h2{font-size:clamp(1.95rem,3.8vw,2.85rem);line-height:1.12;letter-spacing:-.018em}
h3{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.16;letter-spacing:-.014em}
h4{letter-spacing:-.008em}
p{margin:0 0 1.05em}
strong{font-weight:600;color:var(--ink)}
/* ...but never on a dark background, or bold text turns invisible */
.hero strong,.site-footer strong{color:inherit}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:clamp(64px,7.5vw,112px) 0}
.section--alt{background:var(--bg-alt)}
.center{text-align:center}
.orange{color:var(--orange-text)}
.lede{max-width:680px;margin:0 auto}
/* breathing room under a centred heading */
.center > h2 + .lede,
.center > h2 + p{margin-top:22px}
.eyebrow{
  display:block;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-text);margin-bottom:16px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  background:var(--orange);
  /* Ink rather than white: white on this orange is only 2.6:1 and fails AA.
     Ink is 6.99:1 and lets the fill stay bright. Darker themes (indigo, violet)
     flip --on-brand to white instead. */
  color:var(--on-brand);
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:15px 30px;
  border:1px solid var(--orange);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:background .2s var(--ease),border-color .2s var(--ease),
             transform .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease);
  cursor:pointer;
}
.btn:hover{
  background:var(--orange-hover);border-color:var(--orange-hover);color:var(--on-brand);
  transform:translateY(-2px);box-shadow:var(--shadow-md);
}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.btn--ghost{background:transparent;color:var(--orange-deep);border-color:var(--orange);box-shadow:none}
.btn--ghost:hover{background:var(--orange);color:var(--on-brand);border-color:var(--orange)}
.btn--sm{padding:10px 20px;font-size:10.5px;box-shadow:none}

/* Header CTA is sentence case, as in the source.
   It is an <a> inside .nav, so the `.nav a` rules below would otherwise win on
   specificity (0,1,1 beats .btn at 0,1,0) and hand it white text plus opacity:.9
   which both dulled the orange and dropped the label to 2.6:1. Reset all of it
   explicitly here. */
.site-header .btn{
  text-transform:none;letter-spacing:0;font-weight:600;
  font-size:12.5px;padding:9px 20px;border-radius:var(--radius);
  background:var(--orange);border:1px solid var(--orange);box-shadow:none;
  color:var(--on-brand);
  opacity:1;
}
.site-header .btn:hover{
  background:var(--orange-hover);border-color:var(--orange-hover);
  color:var(--on-brand);opacity:1;transform:none;
}

/* ---------- Header ---------- */
.site-header{
  position:absolute;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(180deg,rgba(20,18,16,.34) 0%,rgba(20,18,16,0) 100%);
  backdrop-filter:blur(3px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.site-header--solid{
  position:relative;background:var(--orange-light);border-bottom:none;
  backdrop-filter:none;
}
.site-header--solid .logo,
.site-header--solid .nav a{color:var(--on-light);opacity:1}
.site-header--solid .nav a:hover{border-bottom-color:currentColor;opacity:.75}
.site-header--solid .nav a.is-active{border-bottom-color:currentColor}
.site-header--solid .nav-toggle{color:var(--on-light)}
.site-header--solid .nav{background:var(--orange-light)}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
/* The brand slot is a TEXT wordmark holding [BUSINESS NAME INSERT], not an image.
   To use an image logo instead, replace the text inside the .logo element with
   <img src="assets/img/your-logo.svg" alt="[BUSINESS NAME INSERT]"> and add:
     .logo img{height:34px;width:auto}
   Supply a light version for the dark header and footer. */
.logo{
  font-family:var(--font-display);font-size:23px;font-weight:600;color:#fff;
  text-decoration:none;letter-spacing:-.022em;white-space:nowrap;
}
.nav{display:flex;align-items:center;gap:26px}
.nav a{
  color:#fff;text-decoration:none;font-size:13.5px;opacity:.9;
  padding-bottom:3px;border-bottom:1.5px solid transparent;
  transition:opacity .18s var(--ease),border-color .18s var(--ease);
}
.nav a:hover{opacity:1;border-bottom-color:rgba(255,255,255,.65)}
.nav a.is-active{border-bottom-color:#fff}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:24px;cursor:pointer;line-height:1}

/* ---------- Hero ---------- */
/* Tall, near-full-screen hero, matching the proportions of the source design.
   Clamped so it stays sensible on short laptop screens and very large monitors. */
.hero{
  position:relative;min-height:clamp(560px,88vh,900px);display:flex;align-items:center;
  text-align:center;color:#fff;overflow:hidden;
}
.hero--short{min-height:280px}                        /* title-only banner (0.21 x width in the source) */
.hero--medium{min-height:clamp(340px,31vw,520px)}     /* title + tagline + CTA (0.31 x width in the source) */
.hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;}
/* Scrim is DARKEST in the centre, where the copy sits, and lifts towards the
   edges so the photograph still reads bright. Getting this backwards (a normal
   vignette) lightens exactly the area the text sits on and destroys legibility.
   Contrast ratio alone will not catch that: a busy photo of packets and cans can
   pass on average luminance and still be unreadable, so check it by eye too. */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(72% 58% at 50% 50%, rgba(18,16,14,.66) 0%, rgba(18,16,14,.12) 100%),
    linear-gradient(180deg, rgba(22,19,17,.34) 0%, rgba(22,19,17,.26) 50%, rgba(22,19,17,.40) 100%);
}
.hero__inner{position:relative;z-index:2;width:100%;padding:120px 24px 70px}
.hero h1{color:#fff;max-width:760px;margin:0 auto}
.hero p{max-width:620px;margin:22px auto 0;font-size:15px;color:rgba(255,255,255,.92)}
.hero .btn{margin-top:34px}
.hero__tag{font-style:italic;font-weight:600;margin-top:18px;color:#fff}
/* Warm orange banner. Text is INK, not white: white on this orange is 1.96:1
   and fails badly, whereas ink is 9.24:1 and keeps the panel bright. */
.hero--flat{background:var(--orange-light);color:var(--on-light);min-height:220px}
.hero--flat h1{color:var(--on-light)}
.hero--flat .hero__inner{padding:90px 24px 60px}

/* ---------- Split (text + media) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split h2,.split h3{color:var(--orange-text);margin-bottom:18px}
.split--rev .split__media{order:-1}

/* About page portrait. Circular by design; build.html can replace the file with
   an uploaded photo, so it is object-fit cover to survive any aspect ratio. */
.about-portrait{
  width:100%;max-width:340px;aspect-ratio:1;object-fit:cover;
  border-radius:50%;margin:0 auto;box-shadow:var(--shadow-md);
}

/* ---------- Stats ---------- */
.stats{
  display:flex;justify-content:center;gap:clamp(48px,8vw,110px);
  margin-top:72px;padding-top:56px;border-top:1px solid var(--line);flex-wrap:wrap;
}
.stat{text-align:center}
.stat b{
  display:block;font-family:var(--font-display);font-size:clamp(2.4rem,4vw,3.1rem);
  font-weight:600;color:var(--orange-text);line-height:1;letter-spacing:-.03em;
}
.stat span{
  display:block;margin-top:10px;font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

/* ---------- Placeholder blocks ---------- */
.ph{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:#ecebe7;border:1px dashed #c4c2ba;color:var(--muted);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:20px;border-radius:8px;
}
.ph--video{aspect-ratio:16/9}
.ph--round{border-radius:50%;aspect-ratio:1}
.ph--logo{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);color:#fff;padding:10px 18px;font-size:12px}

/* ---------- Brand video ---------- */
.video{
  position:relative;margin:0;border-radius:10px;overflow:hidden;
  background:var(--ink);box-shadow:var(--shadow-md);
  aspect-ratio:16/9;
}
.video__el{width:100%;height:100%;object-fit:cover;display:block}
.video__btn{
  position:absolute;right:16px;bottom:16px;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(23,22,20,.62);color:#fff;
  backdrop-filter:blur(6px);
  transition:background .2s var(--ease),transform .2s var(--ease),opacity .25s var(--ease);
}
.video__btn:hover{background:var(--orange);color:var(--on-brand);transform:scale(1.06)}
/* while playing the control recedes, and returns on hover or keyboard focus */
.video.is-playing .video__btn{opacity:0}
.video:hover .video__btn,
.video__btn:focus-visible{opacity:1}
/* a big target over the poster before the first play */
.video:not(.is-playing) .video__btn{
  width:64px;height:64px;right:50%;bottom:50%;transform:translate(50%,50%);
  background:rgba(23,22,20,.55);
}
.video:not(.is-playing) .video__btn:hover{transform:translate(50%,50%) scale(1.06)}
.video:not(.is-playing) .video__btn svg{width:24px;height:24px}

/* ---------- Card carousel (Explore what we offer) ---------- */
.carousel{position:relative;margin-top:96px}
/* Desktop: all four cards fit, no scrolling and no arrows.
   Mobile: becomes a swipeable rail (see the media query at the foot of the file). */
.carousel__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:28px;overflow-x:visible;scroll-behavior:smooth;
  padding-bottom:8px;scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.card{scroll-snap-align:start}
.card img{
  width:100%;height:230px;object-fit:cover;border-radius:6px;
  box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.card h4{font-family:var(--font-display);font-size:1.15rem;font-weight:600;color:var(--ink);margin:20px 0 10px;letter-spacing:-.012em}
.card p{font-size:13px;margin:0;color:var(--body)}
.carousel__btn{
  display:none; /* mobile only, enabled in the media query below */
  position:absolute;top:-64px;width:44px;height:44px;border-radius:50%;
  border:0;background:var(--orange);color:var(--ink);font-size:18px;cursor:pointer;
  place-items:center;box-shadow:var(--shadow-sm);
  transition:background .2s var(--ease);
}
.carousel__btn:hover{background:var(--orange-hover)}
.carousel__btn--prev{left:0}
.carousel__btn--next{right:0}

/* ---------- Feature icons ---------- */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(36px,5vw,64px);margin-top:72px;text-align:center}
.features img{width:88px;height:88px;margin:0 auto 26px}
.features h4{font-size:16.5px;font-family:var(--font-display);font-weight:600;color:var(--ink);margin:0 0 12px}
.features p{font-size:13px;margin:0;max-width:280px;margin-inline:auto}

/* ---------- Check lists ---------- */
.checks{list-style:none;padding:0;margin:26px 0 0}
.checks li{display:flex;align-items:flex-start;gap:13px;margin-bottom:15px;font-size:14.5px}
.checks svg{flex:0 0 auto;margin-top:1px}
.plain{list-style:none;padding:0;margin:0}
.plain li{position:relative;padding-left:20px;margin-bottom:11px;font-size:14.5px}
.plain li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--orange);
}

/* ---------- Compare (traditional vs smart) ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:56px}
.compare h4{
  font-family:var(--font-display);font-size:12px;font-weight:600;color:var(--muted);
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 22px;
}
.compare__card h4{color:var(--orange-text)}
.compare__card{background:#fff;border-radius:12px;padding:36px 40px;box-shadow:var(--shadow-md)}

/* ---------- Who it's for ---------- */
.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:44px 24px;margin-top:64px;text-align:center}
.audience > div{padding:32px 16px;background:var(--bg);border-radius:8px;box-shadow:var(--shadow-sm)}
.audience img{width:58px;height:58px;margin:0 auto 18px}
.audience span{font-size:14.5px;font-weight:500;color:var(--ink)}

/* ---------- Services grid ---------- */
/* Services grid. Set to 2 columns because the template ships with 4 services,
   which lands as a balanced 2x2. Change to repeat(3,1fr) if you add more. */
.grid-3{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(32px,4vw,52px)}
.grid-3 figure{margin:0}
.grid-3 img{
  width:100%;height:clamp(260px,26vw,380px);object-fit:cover;border-radius:8px;
  box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.grid-3 figcaption{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-size:1.3rem;font-weight:600;
  color:var(--ink);margin-top:20px;letter-spacing:-.014em;
  transition:color .2s var(--ease);
}
.grid-3 figcaption::after{
  content:"\2192";font-size:.95em;color:var(--orange-text);
  transform:translateX(-4px);opacity:0;
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}
.grid-3 a{text-decoration:none;display:block}
.grid-3 a:hover img{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.grid-3 a:hover figcaption{color:var(--orange-text)}
.grid-3 a:hover figcaption::after{transform:translateX(0);opacity:1}

.card a{text-decoration:none;display:block}
.card a:hover img{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card a:hover h4{color:var(--orange-text)}

/* ---------- Contact / form ---------- */
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,80px);align-items:start}
.contact h2{color:var(--orange-text)}
.contact h3{color:var(--orange-text);font-size:1.55rem;margin:48px 0 18px}
.contact dl{margin:0}
.contact dl div{display:flex;gap:8px;margin-bottom:12px;font-size:14.5px}
.contact dl dt{margin:0}
.contact dl dd{margin:0;font-weight:600;color:var(--ink)}

.form{display:grid;gap:18px}
.field label{display:block;font-size:13.5px;font-weight:500;color:var(--ink);margin-bottom:8px}
.field label em{font-style:normal;font-size:11.5px;font-weight:400;color:var(--muted);margin-left:5px}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:14.5px;color:var(--ink);
  padding:13px 18px;border:1px solid var(--line);border-radius:26px;background:#fff;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#c9c8c2}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(242,132,47,.16);
}
.field textarea{border-radius:18px;min-height:104px;resize:vertical}
.field select{appearance:none;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 16px center}
.field input::placeholder,.field textarea::placeholder{color:#9a9a92}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .btn{justify-self:start;margin-top:8px}
.form-card{background:#fff;border-radius:14px;padding:clamp(28px,4vw,52px);box-shadow:var(--shadow-md);max-width:580px;margin:0 auto}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3.5vw,44px);margin-top:68px;text-align:left}
.step{position:relative;padding-top:26px;border-top:2px solid var(--orange)}
.step__n{
  display:block;font-family:var(--font-display);font-size:13px;font-weight:600;
  letter-spacing:.14em;color:var(--orange-text);margin-bottom:14px;
}
.step h4{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink);margin:0 0 12px}
.step p{font-size:13px;margin:0}

/* ---------- Service detail pages ---------- */
/* Product shots are cropped from the source with their orange offset blocks
   already in the image, so they sit on --bg-alt with no extra styling. */
.split--product{gap:clamp(40px,5vw,72px);margin-bottom:clamp(64px,8vw,112px)}
.split--product:last-child{margin-bottom:0}
.split--product img{width:100%;height:auto}
.split--product h3{color:var(--orange-text);margin-bottom:18px}

.steps-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:60px}
.steps-icons h4{
  font-family:var(--font-display);font-size:1.3rem;font-weight:600;
  color:var(--ink);margin:0 0 26px;letter-spacing:-.014em;
}
.steps-icons img{width:92px;height:92px;margin:0 auto 26px}
.steps-icons p{font-size:13px;margin:0;max-width:270px;margin-inline:auto}

/* prev / next between service pages */
.pager{background:var(--bg);padding:52px 0;border-top:1px solid var(--line)}
.pager .wrap{display:flex;justify-content:space-between;gap:24px}
.pager a{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.6rem);
  font-weight:600;color:var(--ink);letter-spacing:-.014em;
  transition:color .2s var(--ease);
}
.pager a:hover{color:var(--orange-text)}
.pager span{font-size:1.5em;line-height:1;color:var(--body)}
.pager__next{margin-left:auto}

/* ---------- Legal / prose pages (terms, privacy, faqs) ---------- */
.legal{max-width:760px;margin:0 auto}
.legal .updated{font-style:italic;font-size:13px;color:var(--muted);margin-bottom:34px}
.legal h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:58px 0 18px}
.legal h2:first-of-type{margin-top:8px}
.legal p{font-size:15px}
.legal ul{padding-left:22px;margin:0 0 20px}
.legal li{font-size:15px;margin-bottom:10px}
.legal a{color:var(--orange-deep);text-decoration:underline;text-underline-offset:3px}
.legal--orange h2{color:var(--orange-text)}

.faq-list h3{
  font-family:var(--font-display);font-size:clamp(1.18rem,2vw,1.45rem);
  font-weight:600;color:var(--ink);margin:0 0 14px;letter-spacing:-.014em;
  padding-top:36px;border-top:1px solid var(--line);
}
.faq-list h3:first-of-type{padding-top:0;border-top:0}
.faq-list p{padding-bottom:36px;margin-bottom:0}
.faq-list p:last-of-type{padding-bottom:0}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--footer-bg);color:rgba(255,255,255,.72);
  padding:clamp(56px,7vw,88px) 0 32px;margin-top:0;
}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(36px,5vw,56px)}
.footer-brand .logo{font-size:30px;display:inline-block;margin-bottom:24px;color:#fff}
.footer-brand p{margin:0 0 8px;font-size:13.5px}
.site-footer h4{
  color:#fff;font-family:var(--font-display);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 22px;
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:11px}
.site-footer ul a{
  font-size:13.5px;text-decoration:none;color:rgba(255,255,255,.72);
  transition:color .18s var(--ease);
}
.site-footer ul a:hover{color:#fff}
.footer-bottom{
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:64px;padding-top:28px;font-size:12px;
  border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.55);
}
.footer-bottom a{text-decoration:none;transition:color .18s var(--ease)}
.footer-bottom a:hover{color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--orange);padding:12px 24px 20px;
  }
  .nav.is-open{display:flex}
  .nav a{padding:10px 0;width:100%}
  .split,.compare,.contact{grid-template-columns:1fr;gap:36px}
  .split--rev .split__media{order:0}
  .features,.grid-3,.footer-top{grid-template-columns:1fr;gap:40px}
  .hero{min-height:clamp(480px,68vh,620px)}
  .steps{grid-template-columns:1fr;gap:30px}
  .split--product{gap:32px;margin-bottom:56px}
  .steps-icons{grid-template-columns:1fr;gap:44px}
  .pager .wrap{flex-direction:column;gap:16px}
  .pager__next{margin-left:0}
  .field-row{grid-template-columns:1fr}
  /* carousel becomes a swipeable rail with arrows */
  .carousel__btn{display:grid}
  .carousel__track{
    grid-auto-columns:minmax(240px,1fr);
    overflow-x:auto;scroll-snap-type:x mandatory;
  }
  .audience{grid-template-columns:repeat(2,1fr)}
  .stats{gap:48px}
  .section{padding:64px 0}
  .form-card{padding:28px}
}