/* ============================================================
   VANTICE — site styles
   Design language adapted from the brand design sheet:
   two colours (cream / ink), round-capped stroke, 8px rhythm.
   ============================================================ */

/* ---- Font hook: Lastica (wordmark). Falls back to Julius Sans One. ---- */
@font-face{
  font-family:'Lastica';
  src:local('Lastica'), local('Lastica Regular');
  font-weight:400; font-display:swap;
}

/* ============ TOKENS ============ */
:root{
  --cream:#FFF5DF;
  --ink:#050429;

  --bg:var(--cream);
  --fg:var(--ink);
  --fg-soft:rgba(5,4,41,.64);
  --fg-faint:rgba(5,4,41,.38);
  --line:rgba(5,4,41,.16);
  --line-strong:rgba(5,4,41,.85);
  --fill:rgba(5,4,41,.045);

  --f-brand:'Lastica','Julius Sans One',sans-serif;
  --f-display:'Playfair Display',serif;
  --f-title:'Lora',serif;
  --f-body:'Montserrat',sans-serif;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:140px;
  --max:1280px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.22s; --t-med:.45s;
}
.dark{
  --bg:var(--ink);
  --fg:var(--cream);
  --fg-soft:rgba(255,245,223,.7);
  --fg-faint:rgba(255,245,223,.42);
  --line:rgba(255,245,223,.2);
  --line-strong:rgba(255,245,223,.9);
  --fill:rgba(255,245,223,.05);
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* hidden is the fallback for older mobile browsers without `clip` support */
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--f-body);
  font-weight:400;
  font-size:16px;
  line-height:1.75;
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}
/* let grid/flex children shrink instead of forcing horizontal overflow */
.hero-split>*,.plan-top>*{min-width:0}
::selection{background:var(--ink);color:var(--cream)}
.dark ::selection{background:var(--cream);color:var(--ink)}
img,video{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}

section{background:var(--bg);color:var(--fg);padding:var(--s7) 0}
/* alternating content-section background (paired with the cream default) */
.sec-alt{background:#FFF8E9}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--s4)}
@media(max-width:620px){.wrap{padding:0 var(--s3)}}

/* ============ TYPE ROLES ============ */
.wordmark{
  font-family:var(--f-brand);
  font-weight:400;
  letter-spacing:.5em;
  margin-right:-.5em;
  text-transform:uppercase;
  display:inline-block;
}
.display{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:.1em;
  line-height:1.16;
}
h1.display{font-size:clamp(42px,6.4vw,84px)}
h2,.title{font-family:var(--f-title);font-weight:400;line-height:1.3}
h2{font-size:clamp(28px,3.4vw,40px)}
h3{font-family:var(--f-title);font-weight:500;font-size:23px;line-height:1.35}
p{max-width:62ch}
.lede{font-size:18px;color:var(--fg-soft)}
.soft{color:var(--fg-soft)}
.small{font-size:13.5px;line-height:1.65}

.eyebrow{
  font-family:var(--f-body);font-weight:600;font-size:11.5px;
  letter-spacing:.32em;text-transform:uppercase;color:var(--fg-soft);
  display:flex;align-items:center;gap:14px;
}
.eyebrow .no{color:var(--fg);letter-spacing:.18em}
.eyebrow::after{content:"";height:1px;width:40px;background:var(--line-strong)}

.sec-head{margin-bottom:var(--s6);max-width:720px}
/* let a long heading keep to one line on desktop (wraps naturally on mobile) */
.sec-head.wide{max-width:none}
.sec-head h2{margin-top:var(--s3)}
.sec-head p{margin-top:var(--s2)}

/* ============ SIGNATURE STROKE ============ */
.chev{width:.85em;height:.85em;flex:none}
.chev path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

ul.fox{list-style:none}
ul.fox li{position:relative;padding-left:28px;margin-bottom:10px}
ul.fox li::before{
  content:"";position:absolute;left:0;top:.52em;width:13px;height:13px;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M3 2l7 5-7 5" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M3 2l7 5-7 5" fill="none" stroke="black" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--cream) 72%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) var(--ease);
}
.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{
  max-width:var(--max);margin:0 auto;padding:0 var(--s4);
  height:76px;display:flex;align-items:center;gap:var(--s4);
}
.nav-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-brand img{height:30px;width:auto;display:block}
.nav-brand .wordmark{font-size:17px}
.nav-links{margin-left:auto;display:flex;gap:var(--s4);align-items:center}
.nav-links > a,.nav-links .sub-btn{
  text-decoration:none;font-family:var(--f-body);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-soft);white-space:nowrap;
  padding:6px 0;position:relative;transition:color var(--t-fast) var(--ease);
}
.nav-links > a.btn{color:var(--bg)}
.nav-links > a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--fg);transition:width var(--t-med) var(--ease);
}
.nav-links > a:not(.btn):hover{color:var(--fg)}
.nav-links > a:not(.btn):hover::after{width:100%}

/* ---- dropdowns ---- */
.has-sub{position:relative}
.sub-btn{
  background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
}
.sub-btn:hover{color:var(--fg)}
.sub-btn .caret{width:.7em;height:.7em;flex:none;transition:transform var(--t-fast) var(--ease)}
.sub{
  position:absolute;top:100%;left:0;z-index:60;min-width:230px;margin-top:12px;padding:8px 0;
  background:var(--cream);border:1px solid var(--line);box-shadow:0 22px 55px rgba(5,4,41,.14);
  display:none;
}
/* invisible bridge over the gap between trigger and panel so hover doesn't break */
.sub::before{content:"";position:absolute;left:-8px;right:-8px;top:-14px;height:14px}
.sub a,.sub .sub-btn{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:10px 18px;white-space:nowrap;text-decoration:none;
  font-family:var(--f-body);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-soft);transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.sub a:hover,.sub .sub-btn:hover{color:var(--fg);background:var(--fill)}
.sub .has-sub > .sub{top:-9px;left:auto;right:100%;margin:0 2px 0 0}
.sub .has-sub > .sub::before{left:auto;top:0;bottom:0;right:-8px;width:8px;height:auto}
.caret-side{width:.7em;height:.7em;flex:none}
.sub-title{
  margin:0;padding:10px 14px 4px;font-family:var(--f-body);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg-soft);opacity:.6;white-space:nowrap;
}
.sub-industries{min-width:440px;padding:8px}
.sub-grid{display:grid;grid-template-columns:1fr 1fr}
.sub-grid a{padding:9px 14px}
.sub-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
@media(min-width:821px){
  .has-sub:hover > .sub,.has-sub:focus-within > .sub{display:block}
}
.has-sub.open > .sub{display:block}

/* ---- hamburger ---- */
.nav-toggle{
  display:none;margin-left:auto;width:44px;height:44px;padding:11px;flex-direction:column;
  justify-content:center;gap:5px;background:none;border:none;cursor:pointer;
}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--fg);transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:820px){
  /* solid nav + no backdrop-filter so the fixed menu escapes the nav box */
  .nav{background:var(--cream);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-toggle{display:flex;position:fixed;right:16px;top:16px;z-index:60;margin:0}
  .nav-links{
    position:fixed;top:76px;left:0;right:0;bottom:0;margin:0;z-index:49;
    flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;
    background:var(--cream);padding:var(--s3) var(--s4) var(--s6);
    opacity:0;visibility:hidden;transition:opacity var(--t-med) var(--ease),visibility var(--t-med) var(--ease);
  }
  .nav-links.open{opacity:1;visibility:visible}
  .nav-links > a,.nav-links .sub-btn{
    font-size:15px;letter-spacing:.06em;padding:16px 0;justify-content:space-between;
    border-bottom:1px solid var(--line);width:100%;
  }
  .nav-links > a.btn{margin-top:var(--s4);justify-content:center;border-bottom:none}
  .has-sub{position:static}
  .sub{
    position:static;display:none;min-width:0;margin:0;padding:0 0 0 var(--s3);
    background:transparent;border:none;box-shadow:none;
  }
  .sub::before{display:none}
  .sub .has-sub > .sub{position:static;left:0;margin:0}
  .sub a,.sub .sub-btn{padding:13px 0;font-size:13px}
  .sub-industries{min-width:0;padding:0 0 0 var(--s3)}
  .sub-grid{grid-template-columns:1fr}
  .sub-title{padding:13px 0 2px;font-size:11px}
  .caret-side{display:none}
  /* opening "Services" on mobile shows the whole tree, industries included */
  .has-sub.open .sub{display:block}
}

/* ============ BUTTONS ============ */
.btn{
  --pad-y:15px;--pad-x:30px;--fs:12px;
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-body);font-weight:600;font-size:var(--fs);
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  padding:var(--pad-y) var(--pad-x);border:1px solid var(--fg);
  border-radius:0;cursor:pointer;line-height:1;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.btn .chev{transition:transform var(--t-fast) var(--ease)}
.btn:hover .chev{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--fg);color:var(--bg)}
.btn-primary:hover{background:transparent;color:var(--fg)}
.btn-secondary{background:transparent;color:var(--fg)}
.btn-secondary:hover{background:var(--fg);color:var(--bg)}
.btn-sm{--pad-y:10px;--pad-x:20px;--fs:11px}
.btn-lg{--pad-y:19px;--pad-x:40px;--fs:13px}
.btn[disabled],.btn.is-disabled{opacity:.35;pointer-events:none}
.textlink{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;padding-bottom:6px;position:relative;color:var(--fg);
}
.textlink::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:26px;
  background:var(--fg);transition:width var(--t-med) var(--ease);
}
.textlink:hover::after{width:100%}
.textlink .chev{transition:transform var(--t-fast) var(--ease)}
.textlink:hover .chev{transform:translateX(4px)}

/* ============ GRID ============ */
.grid{display:grid;gap:var(--s3)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ============ FORMS ============ */
.field{margin-bottom:var(--s4)}
.field label{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-soft);margin-bottom:10px;
}
.input{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line-strong);
  border-radius:0;padding:12px 2px;font-family:var(--f-body);font-size:16px;
  color:var(--fg);transition:border-color var(--t-fast) var(--ease);
}
.input::placeholder{color:var(--fg-faint)}
.input:focus{outline:none;border-bottom:2px solid var(--fg);padding-bottom:11px}
.form-note{font-size:13px;color:var(--fg-soft);margin-top:var(--s2)}
.reassure{font-size:13px;color:var(--fg-soft);margin-top:var(--s3)}

/* ============ ACCORDION ============ */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  background:none;border:none;cursor:pointer;text-align:left;
  padding:26px 2px;color:var(--fg);
  font-family:var(--f-title);font-weight:500;font-size:19px;
}
.acc-btn .chev{width:15px;height:15px;transition:transform var(--t-med) var(--ease);color:var(--fg)}
.acc-item.open .acc-btn .chev{transform:rotate(180deg)}
.acc-panel{max-height:0;overflow:hidden;transition:max-height var(--t-med) var(--ease)}
.acc-panel p{padding:0 2px 28px;color:var(--fg-soft);max-width:68ch}

/* ============ HERO ============ */
.hero{position:relative;isolation:isolate;overflow:hidden;padding:var(--s8) 0}
@media(max-width:900px){.hero{padding:var(--s7) 0 var(--s6)}}

/* video background + darkening overlay.
   On desktop .hero-copy is static, so this absolute box resolves to .hero and
   stays full-bleed behind the whole hero. On mobile .hero-copy is positioned,
   which bounds the video to the copy area (top of hero -> top of form). */
.hero-bg{position:absolute;inset:0;z-index:-1;background:var(--ink)}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
/* default: neutral darkening (no colour tint) */
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.44) 55%, rgba(0,0,0,.42) 100%),
    linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,.32) 100%);
}
/* ink/blue tint — used only on the automotive hero */
.hero-overlay.ink{
  background:
    linear-gradient(90deg, rgba(5,4,41,.62) 0%, rgba(5,4,41,.44) 55%, rgba(5,4,41,.42) 100%),
    linear-gradient(180deg, rgba(5,4,41,.2) 0%, rgba(5,4,41,.08) 45%, rgba(5,4,41,.32) 100%);
}
@media(max-width:900px){
  .hero-overlay{background:linear-gradient(180deg, rgba(0,0,0,.54), rgba(0,0,0,.5))}
  .hero-overlay.ink{background:linear-gradient(180deg, rgba(5,4,41,.54), rgba(5,4,41,.5))}
}

/* wrap must stay static so the nested .hero-bg resolves to .hero (full-bleed)
   on desktop; .hero isolates a stacking context so the z-index:-1 video sits
   above the section background but behind the copy */
.hero-split{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s6);align-items:center}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:var(--s5)}}

/* headline — always one line */
.hero-h1{
  white-space:nowrap;
  letter-spacing:.015em;
  font-size:clamp(34px,5vw,60px);
  margin:var(--s3) 0 var(--s4);
}
@media(max-width:400px){.hero-h1{font-size:clamp(30px,8.2vw,34px)}}

.hero-copy .lede{max-width:50ch}
.hero-trust{list-style:none;margin-top:var(--s5);display:flex;flex-direction:column;gap:10px}

/* inline review in the hero */
.hero-review{margin-top:var(--s5);padding-left:var(--s3);border-left:2px solid var(--line-strong);max-width:46ch}
.hero-review blockquote{font-family:var(--f-title);font-style:italic;font-size:16.5px;line-height:1.5;color:var(--fg)}
.hero-review figcaption{margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-soft)}

/* free-review form — no background, sits on the video like the copy (inherits dark tokens) */
.hero-form-panel{padding:0}
/* keep the form heading on a single line */
.hero-form-panel .title{font-size:clamp(20px,3.4vw,28px);white-space:nowrap}
.hero-form-panel .field{margin-bottom:var(--s3)}
.hero-form-panel .reassure{margin-top:var(--s3)}
@media(max-width:900px){
  /* subtle divider between copy and form once stacked */
  .hero-form-panel{padding-top:var(--s5);border-top:1px solid var(--line)}
}

/* phones: bound the video to the copy area so it runs from the top of the hero
   down to the top of the contact form, and anchor it bottom so the rendered
   video ends on the actual bottom of the footage. Form sits on ink below. */
@media(max-width:640px){
  .hero{padding:0 0 var(--s6)}
  .hero-copy{position:relative}
  .hero-copy-in{padding:var(--s5) 0}
  /* break the video out of the wrap padding so it's edge-to-edge, while
     top:0/bottom:0 keep it bounded to the copy area */
  .hero-bg{left:50%;right:auto;width:100vw;transform:translateX(-50%)}
  .hero-bg video{object-position:center bottom}
  .hero-split{gap:0}
  .hero-form-panel{padding-top:var(--s5)}
}

/* ============ STAT BLOCKS ============ */
.stat{border-top:1px solid var(--line-strong);padding-top:var(--s3)}
.stat .num{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,5vw,58px);line-height:1;letter-spacing:.02em}
.stat p{margin-top:var(--s2);font-size:14.5px;color:var(--fg-soft)}
.stat .src{display:block;margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}

/* ============ PRICING ============ */
.price-lbl{
  font-family:var(--f-body);font-weight:600;font-size:11.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--fg-faint);
}
/* pitch (headline + fee) and included list side by side */
.price-top{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
@media(max-width:820px){.price-top{grid-template-columns:1fr;gap:var(--s5)}}
.price-pitch .title{margin-top:var(--s3)}
.price-pitch .soft{margin-top:var(--s2)}
.price-fee-block{margin-top:var(--s5)}
.price-fee{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(52px,6.5vw,82px);line-height:.95;letter-spacing:.02em;
  margin-top:var(--s3);display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 14px;
}
.price-per{
  font-family:var(--f-body);font-weight:500;font-size:18px;letter-spacing:0;
  color:var(--fg-soft);
}
.price-plus{
  font-family:var(--f-body);font-weight:600;font-size:19px;color:var(--fg);
  margin-top:var(--s2);
}
.price-incl .price-lbl{display:block;margin-bottom:var(--s4)}
.price-list{display:grid;grid-template-columns:1fr;gap:14px}
.price-list li{margin-bottom:0;color:var(--fg-soft);font-size:15px;line-height:1.5}

/* terms + disclaimer beneath the divider line */
.price-bottom{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start;
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);
}
@media(max-width:820px){.price-bottom{grid-template-columns:1fr;gap:var(--s4)}}
.price-terms-h{font-size:19px;margin-bottom:10px}
.price-terms p{color:var(--fg-soft);font-size:15px;max-width:46ch}
.price-terms .btn{margin-top:var(--s4)}
.price-foot{max-width:60ch}

/* ============ REVIEWS (rotating turnstile) ============ */
/* side cards translate past the viewport edge — contain them here so they
   can't widen the page on browsers that miss the html/body clip */
.reviews{position:relative;margin-top:var(--s6);overflow-x:hidden;overflow-x:clip}
.reviews-stage{position:relative;height:300px}
@media(max-width:820px){.reviews-stage{height:340px}}
@media(max-width:520px){.reviews-stage{height:400px}}
.review{
  position:absolute;top:50%;left:50%;width:min(520px,86%);
  padding:var(--s5) var(--s5) var(--s4);text-align:center;
  background:var(--cream);border:1px solid var(--line);
  transform:translate(-50%,-50%) scale(.7);opacity:0;pointer-events:none;
  transition:transform .55s var(--ease),opacity .55s var(--ease);
  will-change:transform,opacity;
}
.review.is-prev{transform:translate(-116%,-50%) scale(.82);opacity:.32;z-index:1;cursor:pointer}
.review.is-next{transform:translate(16%,-50%) scale(.82);opacity:.32;z-index:1;cursor:pointer}
.review.is-center{
  transform:translate(-50%,-50%) scale(1);opacity:1;z-index:3;pointer-events:auto;
  border-color:var(--line-strong);box-shadow:0 24px 60px rgba(5,4,41,.10);
}
.review-quote{font-family:var(--f-title);font-style:italic;font-size:clamp(18px,2.2vw,23px);line-height:1.5;color:var(--fg)}
.review-by{margin-top:var(--s4)}
.review-name{display:block;font-family:var(--f-body);font-weight:600;font-size:13px;letter-spacing:.08em}
.review-co{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint);margin-top:5px}

.reviews-nav{display:flex;align-items:center;justify-content:center;gap:var(--s3);margin-top:var(--s5)}
.reviews-arrow{
  width:44px;height:44px;flex:none;border:1px solid var(--line-strong);background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--fg);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.reviews-arrow:hover{background:var(--fg);color:var(--bg)}
.reviews-arrow .chev{width:14px;height:14px}
.reviews-dots{display:flex;gap:10px;align-items:center}
.review-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;background:var(--line-strong);opacity:.28;cursor:pointer;transition:opacity var(--t-fast) var(--ease)}
.review-dot.is-on{opacity:1}

/* ============ FEATURE CARDS ============ */
.card{
  border:1px solid var(--line);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
  text-decoration:none;
}
.card:hover{border-color:var(--fg);transform:translateY(-4px)}
.card h3{font-size:20px}
.card p{font-size:14.5px;color:var(--fg-soft);flex:1}

/* ============ STEPS ============ */
.step{border-top:1px solid var(--line-strong);padding-top:var(--s3)}
.step .no{font-family:var(--f-body);font-weight:600;font-size:12px;letter-spacing:.28em;color:var(--fg-faint)}
.step h3{margin:var(--s2) 0 10px}
.step p{font-size:14.5px;color:var(--fg-soft)}

/* ============ BIG QUOTE / STRAPLINE ============ */
.strapline{
  font-family:var(--f-display);font-weight:700;letter-spacing:.04em;
  font-size:clamp(24px,3.2vw,38px);line-height:1.4;max-width:20ch;
}

/* ============ FOOTER ============ */
footer{background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 30%,#000 100%);color:var(--cream);padding:var(--s7) 0 var(--s4)}
footer{--bg:var(--ink);--fg:var(--cream);--fg-soft:rgba(255,245,223,.7);--fg-faint:rgba(255,245,223,.42);--line:rgba(255,245,223,.2);--line-strong:rgba(255,245,223,.9)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s5)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.foot-grid{grid-template-columns:1fr}}
.foot-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:var(--s3)}
.foot-logo img{height:32px;width:auto;display:block}
.foot-brand .wordmark{font-size:15px}
.foot-col h4{font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:var(--s3)}
.foot-col a{display:block;text-decoration:none;font-size:14px;color:var(--fg-soft);padding:5px 0;transition:color var(--t-fast) var(--ease)}
.foot-col a:hover{color:var(--fg)}
.foot-legal{
  margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  font-size:12px;color:var(--fg-faint);
}

/* ============ HOME / ABOUT / FAQ / CONTACT EXTRAS ============ */
/* centred hero (home) */
.hero-center{position:relative;max-width:840px;margin:0 auto;text-align:center}
.hero-center .eyebrow{display:inline-flex}
.hero-center .lede{max-width:56ch;margin:var(--s4) auto 0}
.hero-actions{margin-top:var(--s5);display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
.hero-trust-row{list-style:none;margin-top:var(--s5);display:flex;justify-content:center;gap:10px var(--s4);flex-wrap:wrap}
.hero-trust-row li{margin-bottom:0}

/* industries index (home) */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--s5);border-top:1px solid var(--line)}
.ind-grid a{
  display:block;padding:15px 2px;border-bottom:1px solid var(--line);text-decoration:none;
  font-family:var(--f-body);font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-soft);
  transition:color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease);
}
.ind-grid a:hover{color:var(--fg);padding-left:10px}

/* grouped FAQ page */
.faq-group{display:grid;grid-template-columns:230px 1fr;gap:var(--s4) var(--s6);padding:var(--s6) 0}
.faq-group:first-child{padding-top:0}

/* full-width quote band (about) */
.quote-band{font-family:var(--f-title);font-style:italic;font-size:clamp(22px,3.2vw,34px);line-height:1.45;max-width:28ch;margin:0 auto}
.quote-band-by{margin-top:var(--s4);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-soft)}

/* what-happens-next list (contact) */
.next-steps{display:flex;flex-direction:column;gap:var(--s4)}
.next-step{display:flex;gap:var(--s3);align-items:baseline}
.next-step .no{font-family:var(--f-body);font-weight:600;font-size:11px;letter-spacing:.18em;color:var(--fg-faint);flex:none}
.next-step p{color:var(--fg-soft);font-size:15px;max-width:52ch}
.next-step strong{color:var(--fg);font-weight:600}

@media(max-width:900px){.ind-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.faq-group{grid-template-columns:1fr;gap:var(--s3)}}
@media(max-width:640px){
  .hero-center{padding:var(--s6) 0}
  .ind-grid{grid-template-columns:1fr}
}

/* ============ REVEAL ============ */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none}}