/* ==========================================================================
   SELF-HOSTED FONTS
   Google Fonts was costing 3.5s to First Contentful Paint on slow 4G — two
   extra DNS lookups and round trips (fonts.googleapis.com -> fonts.gstatic.com)
   before a single pixel could be painted.
   These are the same fonts, served from our own domain. One connection, no
   third party, and no data leaving to Google before the page renders.
   font-display:swap = text shows immediately in the fallback, then upgrades.
   ========================================================================== */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url("/assets/fonts/bricolage-grotesque.woff2") format("woff2-variations"),
      url("/assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter Tight";
  src:url("/assets/fonts/inter-tight.woff2") format("woff2-variations"),
      url("/assets/fonts/inter-tight.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/assets/fonts/plex-mono-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("/assets/fonts/plex-mono-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

/* ==========================================================================
   Think Digital Marketing — global stylesheet
   Tokens map 1:1 to brand-guidelines.html v2.0. Change a colour here, not
   in a page. No page should ever carry its own <style> block.
   ========================================================================== */

:root{
  /* Brand */
  --ink:#10201B;          /* Forest Ink */
  --marigold:#F2A20C;     /* The dot. One per surface. */
  --bone:#F4F1E8;
  --sage:#5E6B65;
  --paper:#FCFBF7;
  --line:#e2ded2;
  /* Support — service coding ONLY. Never the page accent, never the logo. */
  --clay:#C0492B;
  --slate:#2F6B8F;
  /* Dark-surface greys */
  --ink-2:#17302A;
  --ink-3:#25352F;
  --dim:#8C9A93;
  --dim-2:#7d8d86;

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Inter Tight",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --pad:clamp(20px,5vw,64px);
  --r-card:16px;
  --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:4px}
::selection{background:var(--marigold);color:var(--ink)}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--sage)}
.d{color:var(--marigold)}                       /* THE dot. Ends headlines. */
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:200;background:var(--ink);color:var(--bone);padding:11px 18px;border-radius:var(--r-pill)}

h1,h2,h3{font-family:var(--display);letter-spacing:-.035em;line-height:1.02}
h1{font-weight:800;font-size:clamp(40px,5.4vw,72px);margin:18px 0 22px}
h2{font-weight:800;font-size:clamp(30px,3.7vw,48px);margin:12px 0 16px}
h3{font-weight:600;font-size:20px;letter-spacing:-.015em;margin-bottom:9px}
.lead{color:var(--sage);max-width:40em}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-weight:600;font-size:15px;padding:12px 22px;
  border-radius:var(--r-pill);border:1.5px solid var(--ink);background:none;
  color:var(--ink);cursor:pointer;transition:.18s var(--ease);
}
.btn-solid{background:var(--ink);color:var(--bone)}
.btn-solid:hover{background:var(--marigold);border-color:var(--marigold);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--bone)}
.btn-block{width:100%;margin-top:6px}
.btn:disabled{opacity:.6;cursor:wait}

/* ── Header (global) ─────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:26px;height:70px}
.logo{display:flex;align-items:center;gap:11px;color:var(--ink);white-space:nowrap}
.logo .wm{flex:none}
.logo em{
  font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sage);border-left:1px solid var(--line);
  padding-left:11px;line-height:1.4;white-space:pre-line;
}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:500}
.nav-links a{padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover{border-color:var(--ink)}
.nav-links a.active{border-color:var(--marigold)}
.nav-links a.has-dot::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--marigold);margin-right:7px;vertical-align:1px;
}
.menu-btn{display:none;margin-left:auto;background:none;border:1.5px solid var(--line);border-radius:9px;padding:9px 13px;font:inherit;cursor:pointer}

/* ── Footer (global) ─────────────────────────────────────────────── */
.site-footer{background:var(--ink);color:var(--dim);padding:60px 0 28px;font-size:14px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:38px;border-bottom:1px solid var(--ink-3)}
.foot-brand .logo{color:var(--bone);margin-bottom:14px}
.foot-brand p{max-width:26em}
.foot-contact{display:grid;gap:7px;margin-top:18px;font-family:var(--mono);font-size:12.5px}
.foot-contact a:hover{color:var(--marigold)}
.site-footer h5{color:var(--bone);font-size:12px;font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.site-footer ul{list-style:none;display:grid;gap:8px}
.site-footer a:hover{color:var(--bone)}
.foot-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-family:var(--mono);font-size:12px}
.foot-bot nav{display:flex;gap:20px}

/* ── Sticky mobile action bar ────────────────────────────────────── */
.sticky-bar{display:none}
@media(max-width:767px){
  .sticky-bar{
    display:grid;grid-template-columns:repeat(3,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--ink);border-top:1px solid var(--ink-3);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -8px 26px -14px rgba(0,0,0,.5);
  }
  .sb{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    padding:11px 4px 12px;background:none;border:0;cursor:pointer;
    font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--bone);border-right:1px solid var(--ink-3);
  }
  .sb:last-child{border-right:0}
  .sb svg{width:20px;height:20px;fill:currentColor}
  .sb-wa{color:#5BD07C}
  .sb-enq{color:var(--marigold)}
  .sb:active{background:var(--ink-2)}
  /* the bar must never cover the last line of a page */
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  .site-footer{padding-bottom:20px}
}

/* ── Sections ────────────────────────────────────────────────────── */
section{padding:clamp(60px,7.5vw,104px) 0}
.sec-head{max-width:640px;margin-bottom:clamp(34px,4vw,54px)}
.sec-head p{color:var(--sage)}
.band-bone{background:var(--bone);border-block:1px solid var(--line)}
.band-ink{background:var(--ink);color:var(--bone)}
.band-ink h2{color:var(--bone)}
.band-ink .sec-head p,.band-ink .eyebrow{color:var(--dim)}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{padding:clamp(52px,7vw,92px) 0 clamp(46px,6vw,76px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,62px);align-items:center}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 26px}
.trust{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--sage)}
.trust span{display:flex;align-items:center;gap:7px}
.trust i{width:6px;height:6px;border-radius:50%;background:var(--marigold);font-style:normal}

/* Answer-engine demo */
.panel{background:var(--ink);border-radius:20px;padding:10px;box-shadow:0 30px 60px -32px rgba(16,32,27,.55)}
.panel-head{display:flex;align-items:center;gap:8px;padding:8px 10px 12px}
.panel-head i{width:9px;height:9px;border-radius:50%;background:var(--ink-3);font-style:normal}
.panel-head span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim-2);letter-spacing:.1em}
.query{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:14px;color:var(--bone);min-height:50px}
.query svg{flex:none;opacity:.5}
.caret{display:inline-block;width:8px;height:17px;background:var(--marigold);animation:blink 1s steps(1) infinite;vertical-align:-3px}
@keyframes blink{50%{opacity:0}}
.answer{background:var(--ink-2);border:1px solid var(--ink-3);border-top:0;border-radius:0 0 12px 12px;margin:-12px 0 0;padding:22px 16px 16px}
.ai-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--marigold);background:rgba(242,162,12,.14);padding:5px 10px;border-radius:6px;margin-bottom:12px}
.ai-tag i{width:6px;height:6px;border-radius:50%;background:var(--marigold);font-style:normal;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.answer p{color:#cfd6d2;font-size:15px;line-height:1.65;min-height:5.2em}
.answer b{color:#fff;font-weight:600;background:rgba(242,162,12,.2);padding:1px 4px;border-radius:3px}
.cites{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--ink-3)}
.cite{font-family:var(--mono);font-size:11px;color:var(--dim);background:#1B3730;border:1px solid #2C463E;border-radius:6px;padding:6px 10px;opacity:0;transform:translateY(6px);transition:.4s var(--ease)}
.cite.on{opacity:1;transform:none}
.cite.first{color:#fff;border-color:var(--marigold);background:rgba(242,162,12,.18)}
.panel-foot{font-family:var(--mono);font-size:11px;color:var(--dim-2);text-align:center;padding:12px 0 4px}

/* ── Marquee ─────────────────────────────────────────────────────── */
.strip{border-block:1px solid var(--line);background:var(--bone);overflow:hidden;padding:14px 0}
.track{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:slide 34s linear infinite}
.track span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── Services ────────────────────────────────────────────────────── */
.layer{border-top:1px solid var(--line);padding:38px 0;display:grid;grid-template-columns:300px 1fr;gap:40px}
.layer:last-of-type{border-bottom:1px solid var(--line)}
.layer-id{position:sticky;top:100px;align-self:start}
.layer-num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--sage)}
.layer h3{font-size:30px;font-weight:800;margin:8px 0 10px;display:flex;align-items:center;gap:10px}
.layer h3::before{content:"";width:14px;height:14px;border-radius:4px;background:var(--c)}
.layer-id p{font-size:15px;color:var(--sage)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.card{background:var(--bone);border:1px solid transparent;border-radius:14px;padding:20px;position:relative;overflow:hidden;transition:.2s var(--ease)}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--c);transform:scaleY(0);transform-origin:bottom;transition:.25s var(--ease)}
.card:hover{background:var(--paper);border-color:var(--line);transform:translateY(-3px);box-shadow:0 12px 28px -18px rgba(16,32,27,.4)}
.card:hover::before{transform:scaleY(1)}
.card h4{font-size:17px;font-weight:600;margin-bottom:6px}
.card p{font-size:14px;color:var(--sage);line-height:1.5}
.c-marigold{--c:var(--marigold)} .c-clay{--c:var(--clay)} .c-slate{--c:var(--slate)}

/* ── Process ─────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-3);border:1px solid var(--ink-3);border-radius:16px;overflow:hidden}
.step{background:var(--ink);padding:28px 22px}
.step b{font-family:var(--mono);font-size:12px;color:var(--marigold);letter-spacing:.1em}
.step h4{font-family:var(--display);font-size:21px;font-weight:600;margin:12px 0 8px;color:var(--bone)}
.step p{font-size:14px;color:var(--dim);line-height:1.55}

/* ── Stats ───────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{border-top:2px solid var(--ink);padding-top:16px}
.stat b{display:block;font-family:var(--display);font-size:clamp(34px,4vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat span{font-size:14px;color:var(--sage)}

/* ── Blog cards / list ───────────────────────────────────────────── */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{border:1px solid var(--line);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;gap:12px;background:var(--paper);transition:.2s var(--ease)}
.post:hover{transform:translateY(-4px);box-shadow:0 16px 34px -22px rgba(16,32,27,.45);border-color:var(--ink)}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}
.tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--marigold);margin-right:7px}
.post h4{font-family:var(--display);font-size:20px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.post p{font-size:14px;color:var(--sage)}
.post time{font-family:var(--mono);font-size:12px;color:var(--sage);margin-top:auto}
.blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.filters{display:flex;gap:8px;flex-wrap:wrap;padding:26px 0;border-bottom:1px solid var(--line)}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:none;cursor:pointer;color:var(--sage);transition:.18s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.row{display:grid;grid-template-columns:110px 1fr 130px;gap:28px;padding:26px 0;border-top:1px solid var(--line);transition:.18s var(--ease)}
.row:hover{background:var(--bone);padding-inline:16px;margin-inline:-16px;border-radius:12px}
.row .date{font-family:var(--mono);font-size:12px;color:var(--sage);padding-top:3px}
.row h3{font-size:22px;font-weight:600;margin:6px 0 8px}
.row h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.row p{font-size:15px;color:var(--sage);max-width:62ch}
.row .read{font-family:var(--mono);font-size:12px;color:var(--sage);text-align:right;padding-top:3px}
.hidden{display:none}

/* ── THE FORM (used on contact page and inside the modal) ────────── */
.enq-form{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field{margin-bottom:15px}
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);margin-bottom:6px}
.req{color:var(--marigold)}
.opt{color:var(--sage);opacity:.7;text-transform:none;letter-spacing:0;font-size:11px}
input,select,textarea{
  width:100%;font-family:var(--body);font-size:16px;   /* 16px stops iOS zooming on focus */
  padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--paper);color:var(--ink);transition:.15s var(--ease);
}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(242,162,12,.18)}
input.invalid,select.invalid{border-color:var(--clay);background:rgba(192,73,43,.04)}
textarea{min-height:108px;resize:vertical}
.phone-row{display:grid;grid-template-columns:118px 1fr;gap:8px}
.phone-row select{padding-inline:10px;font-family:var(--mono);font-size:14px}
.err{font-size:13px;color:var(--clay);margin-top:6px;min-height:0}
.err:empty{display:none}
.form-note{font-size:13px;color:var(--sage);margin-top:12px}
.form-note.ok{color:var(--ink);font-weight:600}
.form-note.ok::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--marigold);margin-right:8px}
.form-note.bad{color:var(--clay)}
.spinner{display:none;width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.sending .spinner{display:inline-block}
.sending .btn-label{opacity:.7}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Modal ───────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(16,32,27,.62);backdrop-filter:blur(3px)}
.modal-panel{
  position:relative;background:var(--paper);border-radius:20px;padding:clamp(24px,4vw,38px);
  width:min(520px,100%);max-height:88vh;overflow-y:auto;
  box-shadow:0 40px 80px -30px rgba(16,32,27,.5);
  animation:rise .28s var(--ease);
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.modal-x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:26px;line-height:1;color:var(--sage);cursor:pointer;padding:6px 10px;border-radius:8px}
.modal-x:hover{background:var(--bone);color:var(--ink)}
.modal-panel h2{font-size:clamp(26px,3.4vw,34px);margin:8px 0 20px}

/* ── Contact page ────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.direct{margin-top:28px;display:grid;gap:14px}
.direct a,.direct span{display:block;font-family:var(--display);font-size:22px;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:12px}
.direct a:hover{color:var(--sage)}
.form-card{background:var(--bone);border-radius:20px;padding:clamp(22px,3vw,32px)}

/* ── Utility ─────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.center{text-align:center}
.mt-l{margin-top:40px}

/* ── Responsive ──────────────────────────────────────────────────── */
@media(max-width:980px){
  .hero-grid,.contact-grid{grid-template-columns:1fr}
  .layer{grid-template-columns:1fr;gap:22px}
  .layer-id{position:static}
  .steps,.stats{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .row{grid-template-columns:1fr;gap:6px}
  .row .read{text-align:left}
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--line);padding:18px var(--pad);gap:16px}
  .menu-btn{display:block}
  .site-header .btn-solid{display:none}
  .logo em{display:none}
}
@media(max-width:560px){
  .steps,.stats,.foot-grid{grid-template-columns:1fr}
  .phone-row{grid-template-columns:104px 1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ── Article page ────────────────────────────────────────────────── */
.article{max-width:760px;padding-block:clamp(40px,5vw,64px)}
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--sage);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.article h1{font-size:clamp(32px,4.4vw,54px);margin:14px 0 18px}
.article-meta{font-family:var(--mono);font-size:12px;color:var(--sage);display:flex;gap:10px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line)}
.prose{padding-top:30px;font-size:18px;line-height:1.72}
.prose h2{font-size:clamp(23px,2.6vw,30px);margin:38px 0 14px}
.prose p{margin-bottom:20px;color:var(--ink)}
.prose strong{font-weight:600}
.prose em{font-style:italic;color:var(--sage)}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--bone);padding:2px 6px;border-radius:5px}
.prose a{text-decoration:underline;text-underline-offset:3px}
.article-cta{margin-top:48px;background:var(--bone);border-radius:20px;padding:clamp(24px,3vw,34px);border-left:4px solid var(--marigold)}
.article-cta h3{font-size:24px;font-weight:800;letter-spacing:-.02em}
.article-cta p{color:var(--sage);margin:8px 0 18px;font-size:15px}
a.post{color:inherit}
a.post h4{transition:.18s var(--ease)}
a.post:hover h4{text-decoration:underline;text-underline-offset:4px}