/* ============================================================
   Joe Chapman-Taylor · IT Consultant
   Shared styles for every page. Link this from any new page with:
   <link rel="stylesheet" href="styles.css">
   ============================================================ */

:root{
  --ink:#0F2A30;
  --ink-2:#16383F;
  --paper:#ECEFEE;
  --surface:#FFFFFF;
  --text:#0F2A30;
  --text-soft:#4A5C60;
  --text-on-dark:#E6ECEB;
  --text-on-dark-soft:#9FB2B2;
  --accent:#10B981;
  --accent-deep:#0C9A6C;
  --line:#D5DCDB;
  --line-dark:rgba(255,255,255,0.12);
  --radius:14px;
  --maxw:1080px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  overflow-wrap:break-word;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}

.mono{
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- header ---------- */
/* sticky wrapper holding the nav bar and the action bar together */
.sitehead{
  position:sticky;top:0;z-index:60;
  background:rgba(236,239,238,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 0 0 rgba(15,42,48,0);
  transition:box-shadow .25s ease, background .25s ease;
}
body.scrolled .sitehead{
  background:rgba(236,239,238,0.95);
  box-shadow:0 10px 30px -22px rgba(15,42,48,.5);
}
/* position:relative makes the nav row the anchor for the mega panel, so the
   panel opens directly beneath it instead of below the action bar. That
   removes the dead gap the mouse previously had to cross. */
header{background:transparent;position:relative;z-index:3}
.actionbar{position:relative;z-index:1}
.bar{
  display:flex;align-items:center;justify-content:space-between;
  height:82px;transition:height .25s ease;
}
body.scrolled .bar{height:58px}
.brand b{transition:font-size .25s ease}
body.scrolled .brand b{font-size:.95rem}
.brand .mono{transition:opacity .2s ease, max-height .25s ease}
body.scrolled .brand .mono{opacity:0;max-height:0;overflow:hidden}
.brand{display:flex;flex-direction:column;line-height:1.15}
.brand b{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.brand .mono{color:var(--text-soft)}
nav{display:flex;align-items:center;gap:26px}
nav a{font-size:.92rem;font-weight:500;color:var(--text-soft);transition:color .2s;white-space:nowrap}
nav a:hover{color:var(--text)}
.status{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 13px;border:1px solid var(--line);border-radius:100px;
  background:var(--surface);
  font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;color:var(--text-soft);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;cursor:pointer}
.menu-btn span{display:block;width:18px;height:2px;background:var(--text);margin:3px 0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 24px;border-radius:100px;font-weight:600;font-size:.95rem;
  font-family:'Inter',sans-serif;cursor:pointer;
  transition:transform .18s ease, background .2s ease, border-color .2s, color .2s;
}
.btn-primary{background:var(--accent);color:#04231A}
.btn-primary:hover{background:#14cf92;transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line-dark);color:var(--text-on-dark)}
.btn-ghost:hover{border-color:var(--accent);color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-line{border:1px solid var(--line);color:var(--text)}
.btn-line:hover{border-color:var(--accent-deep);color:var(--accent-deep)}
.btn-lg{padding:17px 32px;font-size:1.05rem}

/* ---------- home hero ---------- */
.hero{background:var(--ink);color:var(--text-on-dark);position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 300px at 82% 8%, rgba(16,185,129,.14), transparent 70%),
    linear-gradient(transparent 96%, var(--line-dark) 96%) 0 0/100% 34px;
  opacity:.9;
}
.hero .wrap{position:relative;z-index:1;padding:88px 24px 96px;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.eyebrow{color:var(--accent);margin-bottom:22px;display:inline-block}
h1{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.05;letter-spacing:-.02em;
  color:#fff;margin-bottom:22px;
}
h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:1.1rem;color:var(--text-on-dark-soft);max-width:46ch;margin-bottom:34px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px}

/* signature: status readout panel */
.readout{
  background:linear-gradient(180deg,var(--ink-2),#122f35);
  border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.readout .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line-dark)}
.readout .head .mono{color:var(--text-on-dark-soft)}
.readout .head b{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.06em;color:var(--accent);font-weight:500}
.mod{display:flex;align-items:center;gap:12px;padding:11px 0}
.mod .dot{flex:none}
.mod .name{font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--text-on-dark)}
.mod .val{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;color:var(--accent)}
.mod + .mod{border-top:1px solid var(--line-dark)}

/* ---------- interior page header ---------- */
.pagehero{background:var(--ink);color:var(--text-on-dark);position:relative;overflow:hidden;padding:74px 0 62px}
.pagehero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 260px at 88% 0%, rgba(16,185,129,.12), transparent 70%);
}
.pagehero .wrap{position:relative;z-index:1}
.pagehero h1{margin-bottom:16px}
.pagehero .lede{margin-bottom:0}

/* ---------- section frame ---------- */
section{padding:92px 0}
.sec-eyebrow{color:var(--accent-deep);margin-bottom:14px;display:block}
.sec-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.02em;margin-bottom:16px}
.sec-intro{color:var(--text-soft);max-width:56ch;font-size:1.05rem}

/* ---------- services ---------- */
.services-head{margin-bottom:44px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:20px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(15,42,48,.4);border-color:#bfcecb}
.card .tag{color:var(--accent-deep);margin-bottom:16px;display:inline-block}
.card h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.22rem;margin-bottom:10px;letter-spacing:-.01em}
.card p{color:var(--text-soft);font-size:.98rem}

/* ---------- about ---------- */
.about{background:var(--ink);color:var(--text-on-dark)}
.about .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
.about .sec-eyebrow{color:var(--accent)}
.about h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.02em;color:#fff;margin-bottom:20px}
.about p{color:var(--text-on-dark-soft);font-size:1.05rem;margin-bottom:18px}
.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border:1px solid var(--line-dark);border-radius:100px;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.04em;color:var(--text-on-dark);
}
.chip .dot{width:6px;height:6px;animation:none}

/* ---------- steps (used on remote support page) ---------- */
.steps{display:grid;gap:16px;margin-top:8px}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
}
.step .num{
  width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:.95rem;
}
.step h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.12rem;margin-bottom:5px;letter-spacing:-.01em}
.step p{color:var(--text-soft);font-size:.98rem}

/* download card */
.download-card{
  background:var(--ink);color:var(--text-on-dark);border-radius:var(--radius);
  padding:clamp(26px,6vw,40px) clamp(20px,5vw,32px);text-align:center;margin-bottom:40px;position:relative;overflow:hidden;
}
.download-card::after{content:"";position:absolute;inset:0;background:radial-gradient(420px 200px at 50% -10%, rgba(16,185,129,.16), transparent 70%);pointer-events:none}
.download-card > *{position:relative;z-index:1}
.download-card h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.6rem;color:#fff;margin-bottom:10px;letter-spacing:-.01em}
.download-card p{color:var(--text-on-dark-soft);max-width:52ch;margin:0 auto 26px}

/* reassurance note */
.note{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;padding:18px 22px;color:var(--text-soft);font-size:.97rem;
}
.note b{color:var(--text)}

/* ---------- contact ---------- */
.contact{text-align:center}
.contact .sec-title{margin-bottom:14px}
.contact .sec-intro{margin:0 auto 34px}
.contact-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.coverage{margin-top:28px;color:var(--text-soft)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:34px 0}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:center}
footer .mono{color:var(--text-soft)}

/* ---------- responsive ---------- */
@media(max-width:860px){
  /* The nav row plus action bar were taking ~140px of a phone viewport —
     over a fifth of the screen, permanently. Tighter here. */
  .bar{height:62px}
  body.scrolled .bar{height:52px}
  .brand b{font-size:.95rem}
  body.scrolled .brand b{font-size:.9rem}

  .hero .wrap{grid-template-columns:1fr;gap:40px;padding:64px 24px 72px}
  .readout{max-width:420px}
  .about .wrap{grid-template-columns:1fr;gap:34px}
  nav{
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;align-items:flex-start;gap:0;
    border-bottom:1px solid var(--line);padding:8px 24px 20px;
    box-shadow:0 18px 30px -24px rgba(15,42,48,.55);
    /* Hidden by visibility rather than by moving it: a transform-only
       hide slides the panel up over the sticky banner, where nothing
       clips it. The small translate is cosmetic only. */
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    /* With the services submenu expanded the menu can exceed the screen,
       so let it scroll internally rather than run off the bottom. */
    /* dvh accounts for mobile browser chrome; vh is the fallback */
    max-height:calc(100vh - 150px);
    max-height:calc(100dvh - 150px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  nav.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
  nav a{padding:12px 0;width:100%;border-bottom:1px solid var(--line);font-size:1rem}
  /* The availability pill is desktop chrome; on a phone it costs space
     and adds nothing, so it is hidden rather than tucked into the menu. */
  nav .status{display:none}
  .menu-btn{display:block}
  section{padding:66px 0}
}

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

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

/* ============================================================
   ADDED SECTIONS: trust strip, tech tags, process, pricing,
   FAQ, areas. All reuse the existing tokens above.
   ============================================================ */

/* alt section background for rhythm */
.sec-alt{background:var(--surface)}

/* trust strip (sits under the hero) */
.trust{background:var(--surface);border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:center;padding:18px 24px}
.trust-item{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;color:var(--text-soft)}
.trust-item .tk{color:var(--accent-deep);font-weight:700}

/* tech tags (skills) */
.tech-label{margin:40px 0 14px}
.tech{display:flex;flex-wrap:wrap;gap:10px}
.tech .t{
  padding:8px 14px;border:1px solid var(--line);border-radius:100px;background:var(--surface);
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.05em;color:var(--text-soft);
}

/* how it works (a real ordered process, so numbering is meaningful) */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.flow-item{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.flow-item .n{font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.16em;color:var(--accent-deep);display:block;margin-bottom:14px}
.flow-item h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.15rem;margin-bottom:8px;letter-spacing:-.01em}
.flow-item p{color:var(--text-soft);font-size:.97rem}

/* pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;align-items:stretch}
.price-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;display:flex;flex-direction:column;position:relative;
}
.price-card.feature{border-color:var(--accent);box-shadow:0 26px 60px -34px rgba(16,185,129,.55)}
.price-card .ribbon{
  position:absolute;top:-11px;left:26px;background:var(--accent);color:#04231A;
  font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;font-weight:500;
}
.price-card .pname{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:16px}
.price-card .amount{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.1rem;color:var(--ink);line-height:1;letter-spacing:-.02em}
.price-card .amount .per{font-family:'Inter',sans-serif;font-weight:500;font-size:.9rem;color:var(--text-soft);letter-spacing:0}
.price-card .psub{color:var(--text-soft);font-size:.95rem;margin:14px 0 20px}
.price-card ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px}
.price-card li{position:relative;padding-left:26px;font-size:.95rem;color:var(--text)}
.price-card li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent-deep);font-weight:700}
.price-card .btn{margin-top:auto;justify-content:center}
.price-note{text-align:center;color:var(--text-soft);font-size:.95rem;margin-top:26px}

/* faq */
.faq{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:20px 0;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.06rem;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--accent-deep);font-size:1.5rem;line-height:1;flex:none}
.faq-item[open] summary::after{content:"\2013"}
.faq-item p{padding:0 0 22px;color:var(--text-soft);font-size:.98rem;margin:0}

/* areas */
.areas{margin-top:8px;color:var(--text-soft);font-size:1.02rem}

/* contact whatsapp uses accent; call/email as before */
.contact .contact-links{margin-bottom:8px}

@media(max-width:860px){
  .flow{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .price-card.feature{order:-1}
}

/* ============================================================
   ADDED: multi-page helpers + request support form
   ============================================================ */

/* simple two-up band used on the home landing page */
.band{padding:74px 0}
.band-cta{background:var(--ink);color:var(--text-on-dark);text-align:center}
.band-cta h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);color:#fff;letter-spacing:-.02em;margin-bottom:14px}
.band-cta p{color:var(--text-on-dark-soft);max-width:52ch;margin:0 auto 28px;font-size:1.05rem}
.band-cta .cta-row{justify-content:center}

/* pricing teaser strip on home */
.price-teaser{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:center;margin:0 auto 26px;max-width:760px}
.price-teaser span{font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.04em;color:var(--text-soft)}
.price-teaser b{color:var(--ink);font-weight:600}

/* link that reads as "see more" */
.more{display:inline-flex;align-items:center;gap:7px;margin-top:30px;font-weight:600;color:var(--accent-deep)}
.more:hover{gap:11px;transition:gap .2s}

/* ---------- request support form ---------- */
.form{max-width:620px;margin:0 auto}
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:7px;color:var(--text)}
.field .req{color:var(--accent-deep)}
.field input,.field textarea,.field select{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);font-family:'Inter',sans-serif;font-size:1rem;color:var(--text);transition:border-color .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .btn{width:100%;justify-content:center;margin-top:4px}
.hp{display:none}
.form-msg{margin-top:16px;padding:14px 16px;border-radius:10px;font-size:.95rem;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(16,185,129,.12);border:1px solid var(--accent);color:var(--accent-deep)}
.form-msg.err{background:#fdecec;border:1px solid #e0a0a0;color:#a12a2a}
.contact-detail{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}

@media(max-width:560px){
  .form-row{grid-template-columns:1fr}
}

/* ============================================================
   V3 ADDITIONS: mega menu, compliance marquee, case studies,
   testimonials, pricing band, tech tile hover, status readout
   ============================================================ */

/* --- tech tiles: match card hover --- */
.tech .t{transition:transform .18s ease, box-shadow .18s ease, border-color .18s, color .18s}
.tech .t:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px -12px rgba(15,42,48,.45);
  border-color:var(--accent);
  color:var(--text);
}

/* --- header: home link + mega menu --- */
.has-mega{position:static}
.mega-trigger{display:inline-flex;align-items:center;gap:6px}
.mega-trigger::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.has-mega.open .mega-trigger::after{transform:rotate(225deg) translateY(-2px)}

.mega{
  position:absolute;left:0;right:0;top:100%;
  /* small overlap so there is no 1px seam between trigger and panel */
  margin-top:-1px;padding-top:1px;
  background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:0 24px 50px -30px rgba(15,42,48,.5);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:70;
}
/* Opening is driven by JS (site.js) so it can hold a close delay; CSS
   :hover is deliberately not used here or it would reclose instantly. */
.has-mega:focus-within .mega,.has-mega.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:28px 24px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px 26px}
.mega a.m-item{display:block;padding:13px 14px;border-radius:10px;transition:background .16s}
.mega a.m-item:hover{background:var(--paper)}
.mega .m-item strong{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.98rem;color:var(--text);margin-bottom:3px}
.mega .m-item span{display:block;font-size:.85rem;color:var(--text-soft);line-height:1.45}
.mega-foot{grid-column:1/-1;border-top:1px solid var(--line);margin-top:10px;padding-top:16px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.mega-foot .note-sm{font-size:.88rem;color:var(--text-soft)}

/* --- compliance marquee --- */
.marquee{background:var(--ink);color:var(--text-on-dark);padding:26px 0;overflow:hidden;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.marquee-label{text-align:center;color:var(--text-on-dark-soft);margin-bottom:18px}
.marquee-track{display:flex;width:max-content;animation:scroll-x 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .m{
  display:inline-flex;align-items:center;gap:10px;margin:0 16px;
  padding:12px 22px;border:1px solid var(--line-dark);border-radius:100px;
  font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.06em;
  color:var(--text-on-dark);white-space:nowrap;
}
.marquee-track .m .dot{width:6px;height:6px;animation:none;flex:none}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* If the visitor has "reduce motion" enabled, the scroll is switched off and
   the badges become a tidy centred block instead. Without the max-width it
   sprawled the full viewport, out of line with the rest of the page. */
@media(prefers-reduced-motion:reduce){
  .marquee::before,.marquee::after{display:none}
  .marquee-track{
    animation:none;flex-wrap:wrap;justify-content:center;gap:10px;
    width:auto;max-width:var(--maxw);margin:0 auto;padding:0 24px;
  }
  .marquee-track .m{margin:0}
  .marquee-track .dup{display:none}
}

/* --- case studies --- */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.case{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.case:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(15,42,48,.4);border-color:#bfcecb}
.case .sector{color:var(--accent-deep);margin-bottom:14px;display:inline-block}
.case h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.18rem;margin-bottom:16px;letter-spacing:-.01em}
.case dl{margin:0;display:grid;gap:12px}
.case dt{
  font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:3px;
}
.case dd{margin:0;color:var(--text-soft);font-size:.95rem;line-height:1.55}
.case .outcome dd{color:var(--text);font-weight:500}

/* --- testimonials --- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}
.quote{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  display:flex;flex-direction:column;
}
.quote .mark{font-family:'Space Grotesk',sans-serif;font-size:2.2rem;line-height:1;color:var(--accent);margin-bottom:10px}
.quote p{color:var(--text);font-size:1rem;margin-bottom:18px;flex:1}
.quote .who{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.06em;color:var(--text-soft)}

/* --- pricing band (stands out on scroll) --- */
.pband{background:var(--ink);color:var(--text-on-dark);position:relative;overflow:hidden}
.pband::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px 260px at 50% -20%, rgba(16,185,129,.18), transparent 70%)}
.pband .wrap{position:relative;z-index:1;text-align:center}
.pband h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(1.7rem,3vw,2.3rem);color:#fff;letter-spacing:-.02em;margin-bottom:12px}
.pband .sub{color:var(--text-on-dark-soft);max-width:54ch;margin:0 auto 34px;font-size:1.05rem}
.pband-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:860px;margin:0 auto 32px}
.pband-item{
  background:rgba(255,255,255,.05);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:26px 20px;transition:transform .2s ease, border-color .2s, background .2s;
}
.pband-item:hover{transform:translateY(-3px);border-color:var(--accent);background:rgba(16,185,129,.08)}
.pband-item .lbl{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-on-dark-soft);display:block;margin-bottom:12px}
.pband-item .fig{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2rem;color:#fff;line-height:1;letter-spacing:-.02em}
.pband-item .fig .per{font-family:'Inter',sans-serif;font-weight:500;font-size:.85rem;color:var(--text-on-dark-soft);letter-spacing:0}
.pband-item .meta{color:var(--text-on-dark-soft);font-size:.9rem;margin-top:10px}

/* --- response time callout --- */
.resp{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;padding:14px 20px;color:var(--text-soft);font-size:.97rem;
}
.resp b{color:var(--text)}

@media(max-width:860px){
  .pband-grid{grid-template-columns:1fr}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent;display:none}
  .has-mega.open .mega{display:block}
  .mega-inner{grid-template-columns:1fr;padding:4px 0 10px}
  .mega a.m-item{padding:10px 0}
  .mega-foot{margin-top:4px}
}

/* ============================================================
   V4: action bar, workstream tiles, service pages, tools page
   ============================================================ */

/* --- quick action bar (Call / Call back / WhatsApp) --- */
.actionbar{background:var(--ink-2);border-top:1px solid var(--line-dark)}
.actionbar .wrap{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;
  padding:12px 24px;transition:padding .25s ease;
}
body.scrolled .actionbar .wrap{padding:6px 24px;gap:8px}
.actionbar .ab-label{
  margin-right:auto;display:inline-flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-on-dark-soft);
  transition:opacity .2s ease, font-size .25s ease;
}
.actionbar .ab-label .dot{width:7px;height:7px;flex:none}
body.scrolled .actionbar .ab-label{font-size:.66rem;opacity:.8}
.ab{
  display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border-radius:100px;
  font-size:.95rem;font-weight:600;border:1px solid var(--line-dark);color:var(--text-on-dark);
  white-space:nowrap;
  transition:background .18s, border-color .18s, transform .18s, color .18s,
             padding .25s ease, font-size .25s ease, gap .25s ease;
}
body.scrolled .ab{padding:7px 15px;font-size:.85rem;gap:7px}
.ab:hover{transform:translateY(-1px);border-color:var(--accent);color:#fff}
.ab-strong{background:var(--accent);color:#04231A;border-color:var(--accent)}
.ab-strong:hover{background:#14cf92;color:#04231A}
.ab svg{width:17px;height:17px;flex:none;transition:width .25s ease, height .25s ease}
body.scrolled .ab svg{width:14px;height:14px}
@media(max-width:640px){
  .actionbar .ab-label{display:none}
  .actionbar .wrap{justify-content:center;padding:10px 12px;gap:7px}
  body.scrolled .actionbar .wrap{padding:6px 12px;gap:6px}
  /* Share the row evenly and let the buttons shrink rather than wrap.
     min-width:0 is what allows a flex item to go below its content width. */
  .ab{
    flex:1 1 0;min-width:0;justify-content:center;
    padding:10px 8px;font-size:.88rem;gap:6px;
  }
  body.scrolled .ab{padding:8px 6px;font-size:.82rem;gap:5px}
  .ab svg{width:15px;height:15px}
  body.scrolled .ab svg{width:13px;height:13px}
}
/* Very narrow phones: drop the icons before the labels, since the words
   carry the meaning and a wrapped label looks worse than no icon. */
@media(max-width:360px){
  .ab svg{display:none}
  .ab{padding:10px 6px;font-size:.84rem}
}

/* --- workstream tiles (image + label) --- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:20px}
.tile{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink);
  border:1px solid var(--line);display:flex;flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.tile:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(15,42,48,.6);border-color:var(--accent)}
.tile-art{display:block;width:100%;height:170px;object-fit:cover;background:var(--ink)}
.tile-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;background:var(--surface)}
.tile-body .tag{color:var(--accent-deep);margin-bottom:10px;display:inline-block}
.tile-body h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.16rem;letter-spacing:-.01em;margin-bottom:8px}
.tile-body p{color:var(--text-soft);font-size:.95rem;flex:1;margin-bottom:16px}
.tile-body .go{font-weight:600;color:var(--accent-deep);font-size:.92rem;display:inline-flex;align-items:center;gap:7px}
.tile:hover .tile-body .go{gap:11px;transition:gap .2s}

/* --- service page layout --- */
.svc-hero{background:var(--ink);color:var(--text-on-dark);position:relative;overflow:hidden;padding:0}
.svc-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 260px at 88% 0%, rgba(16,185,129,.14), transparent 70%)}
.svc-hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:66px 24px}
.svc-hero h1{margin-bottom:16px}
.svc-hero .lede{margin-bottom:26px}
.svc-hero img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line-dark);display:block}
.crumb{margin-bottom:20px;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-dark-soft)}
.crumb a{color:var(--text-on-dark-soft)}
.crumb a:hover{color:var(--accent)}
.crumb span{margin:0 8px;opacity:.5}

.svc-body{max-width:760px}
.svc-body h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.02em;margin:0 0 16px}
.svc-body h2:not(:first-child){margin-top:44px}
.svc-body p{color:var(--text-soft);font-size:1.02rem;margin-bottom:16px}
.ticks{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;color:var(--text);font-size:1rem}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--accent-deep);font-weight:700;font-size:1.05rem}

/* --- other services strip --- */
.other{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px}
.other a{
  display:block;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.other a:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 16px 30px -22px rgba(15,42,48,.45)}
.other strong{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1rem;margin-bottom:4px}
.other span{display:block;color:var(--text-soft);font-size:.88rem;line-height:1.45}

/* --- tools page --- */
.toolset{margin-bottom:52px}
.toolset > h2{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.45rem;letter-spacing:-.02em;
  margin-bottom:8px;display:flex;align-items:center;gap:12px;
}
.toolset > h2 .dot{width:9px;height:9px;animation:none;flex:none}
.toolset > p{color:var(--text-soft);margin-bottom:22px;max-width:62ch}
.toolgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:14px}
.tool{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px 22px;
  transition:transform .18s, border-color .18s, box-shadow .18s;
}
.tool:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 16px 30px -22px rgba(15,42,48,.45)}
.tool h3{font-family:'JetBrains Mono',monospace;font-size:.86rem;letter-spacing:.02em;font-weight:500;color:var(--text);margin-bottom:7px}
.tool p{color:var(--text-soft);font-size:.9rem;line-height:1.5;margin:0}

@media(max-width:860px){
  .svc-hero .wrap{grid-template-columns:1fr;gap:28px;padding:44px 24px}
  /* Heading and buttons first; decorative artwork below. Previously the
     graphic sat above the h1 and pushed the actual content off-screen. */
  .svc-hero .art{order:2}
  .svc-hero img{max-height:210px;object-fit:cover}
}


/* header shrink respects reduced-motion */
@media(prefers-reduced-motion:reduce){
  .bar, .ab, .actionbar .wrap, .ab svg, .brand b, .brand .mono, .sitehead{transition:none!important}
}

/* ============================================================
   V5: interactive rate table, VAT badge, pricing extras
   ============================================================ */

/* --- interactive rate list --- */
.rates{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}

/* group label sits above its own card, rather than as a band inside the
   table — keeps the table clean and matches the rest of the page */
.rate-set{margin-bottom:34px}
.rate-set:last-of-type{margin-bottom:0}
.rate-set > h3{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.12rem;
  letter-spacing:-.01em;margin:0 0 4px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
}
.rate-set > h3 .qual{
  font-family:'Inter',sans-serif;font-weight:400;font-size:.9rem;color:var(--text-soft);letter-spacing:0;
}
.rate-set > h3::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;
  transform:translateY(-2px);
}
.rate-head{
  display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;
  padding:14px 24px;background:var(--ink);color:var(--text-on-dark-soft);
  font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
}
.rate{
  display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;
  padding:18px 24px;border-top:1px solid var(--line);
  transition:background .16s ease, padding-left .16s ease;
}
.rate:first-of-type{border-top:0}
a.rate:hover{background:var(--paper);padding-left:30px}
a.rate:hover .r-name strong{color:var(--accent-deep)}
.r-name strong{
  display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.04rem;
  letter-spacing:-.01em;margin-bottom:3px;transition:color .16s;
}
.r-name span{display:block;color:var(--text-soft);font-size:.88rem;line-height:1.45}
.r-price{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.12rem;
  color:var(--ink);white-space:nowrap;text-align:right;letter-spacing:-.01em;
}
.r-price small{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.78rem;color:var(--text-soft);letter-spacing:0;margin-top:2px}
.r-go{color:var(--accent-deep);font-weight:700;font-size:1.1rem;opacity:.45;transition:opacity .16s, transform .16s}
a.rate:hover .r-go{opacity:1;transform:translateX(3px)}
.rate.norate .r-go{display:none}

/* --- VAT badge --- */
.vat{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  background:var(--ink);color:var(--text-on-dark);border-radius:var(--radius);
  padding:24px 28px;position:relative;overflow:hidden;
}
.vat::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px 180px at 8% 0%, rgba(16,185,129,.20), transparent 70%)}
.vat > *{position:relative;z-index:1}
.vat .vat-mark{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.5rem;color:var(--accent);
  border:2px solid var(--accent);border-radius:12px;padding:8px 14px;line-height:1;flex:none;
}
.vat p{margin:0;color:var(--text-on-dark-soft);font-size:1rem;flex:1;min-width:240px}
@media(max-width:640px){
  .vat{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 20px}
  .vat p{min-width:0}
  .vat .btn{width:100%;justify-content:center}
}
.vat p b{color:#fff}

/* --- small print list --- */
.smallprint{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.smallprint li{position:relative;padding-left:22px;color:var(--text-soft);font-size:.95rem}
.smallprint li::before{content:"—";position:absolute;left:0;color:var(--accent-deep)}

@media(max-width:720px){
  .rate-head{display:none}
  .rate{grid-template-columns:1fr auto;gap:12px;padding:16px 18px}
  a.rate:hover{padding-left:22px}
  .r-go{display:none}
  .r-price{font-size:1.05rem}
}
/* On narrow phones a nowrap price like "£3,000 – £10,000" squeezes the
   service name into two or three words per line. Stack instead. */
@media(max-width:480px){
  .rate{grid-template-columns:1fr;gap:8px;padding:16px 18px}
  a.rate:hover{padding-left:18px}
  .r-price{text-align:left;font-size:1.15rem}
  .r-price small{display:inline;margin-left:8px}
  .rate-set > h3{font-size:1.05rem}
}


/* ============================================================
   V6: rich footer, portrait, services/pricing separation
   ============================================================ */

footer{border-top:1px solid var(--line);padding:0;background:var(--surface)}
.foot{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;
  padding:56px 24px 44px;align-items:start;
}
.foot-col{display:flex;flex-direction:column;gap:11px;min-width:0}
.foot-col h4{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:500;margin-bottom:4px;
}
.foot-col a{color:var(--text-soft);font-size:.94rem;transition:color .18s, padding-left .18s}
.foot-col a:hover{color:var(--accent-deep);padding-left:4px}
.foot-col a.btn{color:#04231A;padding-left:24px}
.foot-col a.btn:hover{color:#04231A;padding-left:24px}
.foot-note{color:var(--text-soft);font-size:.84rem;opacity:.8;margin-top:2px}
.foot-brand b{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;letter-spacing:-.01em;display:block}
.foot-brand .mono{color:var(--text-soft);display:block;margin-top:-4px}
.foot-brand p{color:var(--text-soft);font-size:.94rem;margin:6px 0 4px;max-width:34ch}
.foot-brand .btn{align-self:flex-start;margin-top:6px}
.foot-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  padding:18px 24px;border-top:1px solid var(--line);
}
.foot-base .mono{color:var(--text-soft)}

/* --- portrait --- */
.portrait{
  display:grid;grid-template-columns:240px 1fr;gap:38px;align-items:center;
}
.portrait img{
  width:100%;
  /* height:auto releases the HTML height attribute, which otherwise keeps the
     image at its full 520px while CSS shrinks the width — that is what
     squashed the portrait. aspect-ratio + object-fit guarantee it stays
     square whatever the column width. */
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);display:block;
  border:1px solid var(--line);box-shadow:0 20px 40px -28px rgba(15,42,48,.55);
}
.portrait h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.4rem;letter-spacing:-.02em;margin-bottom:10px}
.portrait p{color:var(--text-soft);font-size:1.02rem;margin-bottom:14px}
.portrait .sig{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep)}

/* --- price chip on service cards --- */
.card .from{
  display:inline-block;margin-top:14px;padding:6px 13px;border-radius:100px;
  background:var(--paper);border:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.04em;color:var(--text);
}
.card .from b{color:var(--accent-deep)}

@media(max-width:960px){
  .foot{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:860px){
  .portrait{grid-template-columns:1fr;gap:22px;text-align:center}
  .portrait img{max-width:220px;margin:0 auto}
}
@media(max-width:560px){
  .foot{grid-template-columns:1fr;gap:30px;padding:44px 24px 34px}
}