/* ==========================================================================
   Visuolab — services.html, blog.html and blog/*.html
   ========================================================================== */

/* ---- shared page hero ---------------------------------------------------- */
.page-hero{padding:calc(var(--nav-h) + clamp(24px,5vh,56px)) 0 clamp(24px,4vh,40px)}
.page-hero .aurora .s1{--rot:-14deg;left:-22%;top:-20%;width:88%;height:110%;
  background:radial-gradient(ellipse at 50% 50%,rgba(56,38,199,.55) 0%,rgba(40,26,150,.32) 40%,transparent 68%)}
.page-hero .h1{margin-top:18px;max-width:16ch;font-size:clamp(42px,5.8vw,86px)}
.page-hero .lead{margin-top:22px;max-width:52ch}

/* ---- services: jump links ------------------------------------------------ */

/* ---- services: one row per discipline ------------------------------------ */

/* ---- services: engagement models ---------------------------------------- */
.eng{padding:28px;border-radius:22px;background:var(--bg-2);border:1px solid var(--line-2);transition:transform .5s var(--ease-out),border-color .4s}
.eng:hover{transform:translateY(-4px);border-color:rgba(122,104,255,.4)}
.eng b{display:block;font-size:clamp(22px,1.8vw,26px);font-weight:500;letter-spacing:-.025em}
.eng span{display:block;margin-top:6px;font-size:13px;color:var(--brand-2)}
.eng p{margin-top:14px;font-size:15px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}

/* ---- blog: featured ------------------------------------------------------ */
.featured-sec{padding:clamp(16px,3vh,32px) 0 0}
.featured{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,56px);
  padding:clamp(16px,2vw,24px);border-radius:28px;background:var(--bg-2);border:1px solid var(--line-2);color:inherit;
  transition:transform .5s var(--ease-out),border-color .4s}
.featured:hover{transform:translateY(-4px);border-color:rgba(122,104,255,.4)}
.featured .img{aspect-ratio:16/11;border-radius:20px;overflow:hidden;background:#0d0d10}
.featured img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease-out)}
.featured:hover img{transform:scale(1.04)}
.featured h2{margin-top:14px;font-size:clamp(28px,2.8vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
.featured .excerpt{margin-top:14px;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:46ch;text-wrap:pretty}
.featured .arrow-link{margin-top:22px;display:inline-flex}

/* ---- blog: grid ---------------------------------------------------------- */
.posts-sec{padding:clamp(32px,5vh,64px) 0 0}
/* three up, image-led, no excerpt: picture, then CATEGORY | DATE, then the
   headline — the grid stays aligned rather than staggered */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,3.4vw,52px) clamp(18px,2vw,30px)}
.post{display:block;color:inherit;transition:opacity .4s var(--ease-out)}
.post.is-hidden{display:none}
.post-media{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#0d0d10}
.post-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease-out)}
.post:hover .post-media img{transform:scale(1.04)}
.post-body{padding:16px 2px 0}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0;
  font-size:11.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.post-meta .cat{padding:0;border:0;border-radius:0;color:var(--muted);font-weight:500}
.post-meta span+span::before{content:"";display:inline-block;width:1px;height:10px;margin:0 10px;
  vertical-align:-1px;background:rgba(255,255,255,.26)}
.post h2{margin-top:12px;font-size:clamp(18px,1.45vw,21px);font-weight:500;letter-spacing:-.02em;line-height:1.28;
  color:var(--ink);text-wrap:pretty;transition:color .3s}
.post:hover h2{color:var(--brand-2)}
@media (max-width:1100px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.posts{grid-template-columns:1fr}}

/* ---- blog: newsletter ---------------------------------------------------- */
.sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px clamp(32px,5vw,80px);
  padding:clamp(32px,4vw,56px);border-radius:28px;border:1px solid var(--line-2);
  background:radial-gradient(ellipse at 100% 0%,rgba(56,38,199,.45),transparent 60%),var(--bg-2)}
.sub .h2{margin-top:16px}
.sub .lead{margin-top:16px}
.sub form{display:flex;flex-wrap:wrap;gap:12px}
.sub input{flex:1 1 240px;height:54px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;font:inherit;font-size:15px}
.sub input::placeholder{color:var(--muted)}
.sub input:focus{outline:2px solid var(--brand-2);outline-offset:2px}

/* ---- article page -------------------------------------------------------- */
/* ---- article: a black-to-blue band behind the head (Halo Lab), then the body
   flanked by a table of contents and a share rail -------------------------- */
/* the article body is light; the hero's blue dissolves into it on a smoothstep
   so neither end of the band creases, and the page falls back to the site's
   black before the sections that follow */
.post-page{
  padding:0 0 clamp(56px,8vh,96px);
  color:var(--light-ink);
  --muted:var(--light-muted);--ink:var(--light-ink);--ink-2:#3c3c46;--line:var(--light-line);
  background:#fff;
}
/* the light run carries on through "keep reading"; the closing CTA starts on
   its own dark ground — a clean edge, no blend */
.post-page + .more-sec{background:#fff}
.post-hero{
  padding:calc(var(--nav-h) + clamp(24px,5vh,56px)) 0 clamp(240px,30vh,320px);
  color:#fff;
  /* the reference's ramp, stop for stop: a flat near-black fifth, blue at 72%,
     white at the foot — three stops, the smoothness comes from the distance */
  background:linear-gradient(180deg,#000218 20%,#1964d1 72%,#fff 100%);
}
.post-hero .crumbs{color:rgba(255,255,255,.66)}
.post-hero .crumbs a:hover{color:#fff}
.post-hero .h1{color:#fff}
.post-head{text-align:center}
.post-head .crumbs{justify-content:center}
.post-page .h1{margin:20px auto 0;max-width:20ch;font-size:clamp(34px,4.4vw,66px);text-wrap:balance}
.byline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  margin-top:clamp(28px,4vh,40px);font-size:14px;color:rgba(255,255,255,.72)}
.byline .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover}
.byline b{display:block;font-size:15px;font-weight:500;color:#fff}
.byline .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.5)}
/* the cover rides up over the band, so the blue ends behind it rather than in a line */
.post-cover{position:relative;z-index:1;margin:clamp(-120px,-15vh,-170px) 0 0;border-radius:24px;overflow:hidden;aspect-ratio:2/1;background:#0d0d10;
  box-shadow:0 40px 80px -36px rgba(10,10,30,.45)}
.post-cover img{width:100%;height:100%;object-fit:cover;display:block}

/* body: prose centred, table of contents left, share right — both sticky */
.article-grid{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr) minmax(0,96px);
  gap:clamp(28px,4vw,72px);align-items:start;margin-top:clamp(40px,6vh,72px)}
.rail-label{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.toc,.share{position:sticky;top:calc(var(--nav-h) + 24px);align-self:start}
.toc-list{display:grid;gap:2px;margin-top:16px;border-left:1px solid var(--line)}
.toc-list a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:1px solid transparent;
  font-size:13.5px;line-height:1.4;color:var(--muted);text-wrap:pretty;transition:color .3s,border-color .3s}
.toc-list a:hover{color:var(--ink-2)}
.toc-list a.on{color:var(--light-ink);border-left-color:var(--brand)}
.share-btns{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.share-btns button,.share-btns a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;
  transition:color .3s,border-color .3s,background-color .3s}
.share-btns button:hover,.share-btns a:hover{color:var(--brand);border-color:rgba(56,38,199,.42);background:rgba(56,38,199,.07)}
.share-btns svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.share-btns .copied{color:#1f9e4a;border-color:rgba(31,158,74,.5)}
@media (max-width:1180px){
  .article-grid{grid-template-columns:minmax(0,1fr) minmax(0,80px);gap:32px}
  .toc{grid-column:1 / -1;position:static;margin-bottom:8px}
  .toc-list{grid-auto-flow:row}
}
@media (max-width:760px){
  .article-grid{grid-template-columns:1fr}
  .share{position:static}
  .share-btns{flex-direction:row}
}
.prose{max-width:68ch;margin:clamp(40px,6vh,72px) auto 0}
.prose .post-lead{font-size:clamp(19px,1.5vw,24px);line-height:1.5;color:var(--ink);text-wrap:pretty}
.prose h2{margin:clamp(36px,5vh,56px) 0 0;font-size:clamp(23px,2vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.prose p{margin-top:14px;font-size:17px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.prose hr{margin:clamp(40px,6vh,64px) 0 0;border:0;border-top:1px solid var(--line)}
.prose .outro{color:var(--muted);font-size:16px}
.prose a{color:var(--brand-2);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--brand)}
.posts-more{grid-template-columns:repeat(2,minmax(0,1fr))}
.posts-more b{display:block;margin-top:8px;font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.2;transition:color .3s}
.posts-more .post-meta{margin-top:14px}
.posts-more a:hover b{color:var(--brand-2)}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:900px){
  .featured,.posts,.sub,.posts-more{grid-template-columns:1fr}
  .post:nth-child(even){transform:none}
  .featured .img{aspect-ratio:16/10}
  .post-cover{aspect-ratio:4/3}
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-page{padding:calc(var(--nav-h) + 100px) 0 100px}   /* 100px clear under the nav, 100px above the footer */
/* glow: the shared blue corner beam (.hero-run in base.css), same as About, Works and the service pages */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px clamp(32px,6vw,110px);align-items:start}
.contact-intro .h1{margin-top:18px;max-width:15ch;font-size:clamp(38px,4.8vw,72px)}
.contact-intro .lead{margin-top:20px;max-width:42ch}
.who-answers{display:flex;align-items:center;gap:16px;margin-top:clamp(36px,5vh,52px);padding:14px 56px 14px 14px;border-radius:999px;
  border:1px solid var(--line);width:max-content;max-width:100%}
.who-answers .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.who-answers b{display:block;font-size:15px;font-weight:500}
.who-answers span{display:block;font-size:13px;color:var(--light-muted);margin-top:2px}
/* white pill, like the form card beside it */
.who-answers{background:#fff;border-color:transparent;color:var(--light-ink);box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
.who-answers b{color:var(--light-ink)}
.contact-direct{list-style:none;margin:clamp(28px,4vh,40px) 0 0;padding:0}
.contact-direct li{padding:16px 0;border-top:1px solid var(--line)}
.contact-direct li:last-child{border-bottom:1px solid var(--line)}
.contact-direct .label{display:block;margin-bottom:6px}
.contact-direct a{display:inline-flex;align-items:center;gap:10px;font-size:clamp(17px,1.5vw,22px);font-weight:500;letter-spacing:-.02em;transition:color .3s,gap .3s}
.contact-direct a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:opacity .3s,transform .35s var(--ease-out)}
.contact-direct a:hover{color:var(--brand-2);gap:14px}
.contact-direct a:hover svg{opacity:1;transform:rotate(45deg)}
.contact-facts{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:24px 0 0;padding:0}
.contact-facts li{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:999px;border:1px solid var(--line)}
.contact-facts li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-2);box-shadow:0 0 8px var(--brand-2)}

/* form */
.contact-form-wrap{padding:clamp(24px,3vw,40px);border-radius:28px;background:var(--bg-2);border:1px solid var(--line-2);
  box-shadow:0 40px 100px -60px rgba(0,0,0,.9)}
.contact-form{display:grid;gap:20px}
.field{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-size:13px;font-weight:500;color:var(--ink-2);padding:0}
.field label span{color:var(--muted);font-weight:400}
.field input,.field textarea{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:#fff;font:inherit;font-size:15.5px;transition:border-color .3s,background-color .3s}
.field textarea{resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.3)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand-2);background:rgba(255,255,255,.06)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#ff6b6b}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);transition:background-color .25s,border-color .25s,color .25s}
.opt:hover span{border-color:var(--brand-2);color:#fff}
.opt input:checked+span{background:var(--brand);border-color:var(--brand);color:#fff}
.opt input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.contact-form .pill{justify-self:start;margin-top:4px}
.form-note{margin:0;font-size:13px;color:var(--muted)}
.form-ok{margin:0;padding:14px 16px;border-radius:14px;background:rgba(56,38,199,.18);border:1px solid rgba(122,104,255,.45);font-size:14.5px;color:#fff}

@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .who-answers{width:auto}
}

/* ==========================================================================
   Service detail pages (service/*.html)
   ========================================================================== */
/* ---- service hero (Increate): a full-bleed dark scene, copy left and the
   work right, with the glow rising behind the artwork. The call to action sits
   beside the review badge, so the ask and the proof land together. ---------- */
.svc-hero{position:relative;padding:calc(var(--nav-h) + clamp(20px,4vh,48px)) 0 clamp(40px,6vh,72px)}
/* the glow layer spans the hero AND the overview below it: held inside the hero
   it was clipped dead on the section edge, leaving a straight line across the seam */
.svc-run{position:relative}
.svc-run>section{position:relative;z-index:1}
.svc-lead-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(36px,5vw,80px);align-items:center;margin-top:clamp(20px,3vh,36px)}
.svc-copy{min-width:0}
.svc-hero .h1{margin-top:0;max-width:16ch;font-size:clamp(38px,4.6vw,72px);line-height:1.02;letter-spacing:-.035em}
.svc-hero .lead{margin-top:22px;max-width:48ch}
.svc-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(20px,2.4vw,34px);margin-top:clamp(28px,4vh,40px)}
/* the review badge: proof sitting right next to the ask */
.rev-badge{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--muted);line-height:1.3}
.rev-badge .stars{color:var(--star);font-size:14px;letter-spacing:2px}
.rev-badge b{color:var(--ink);font-weight:500}

/* the artwork: two case shots overlapping, tilted just enough to read as a set */
.svc-shot{position:relative;min-width:0;aspect-ratio:5/4}
.svc-shot figure{position:absolute;margin:0;border-radius:18px;overflow:hidden;background:#0d0d10;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 40px 80px -36px rgba(0,0,0,.95)}
.svc-shot img{width:100%;height:100%;object-fit:cover;display:block}
.svc-shot .a{left:12%;top:0;width:88%;aspect-ratio:4/3;transform:rotate(2.2deg);z-index:1}
.svc-shot .b{left:0;bottom:2%;width:52%;aspect-ratio:4/3;transform:rotate(-3.4deg);z-index:2}
.svc-shot figure{transition:transform .8s var(--ease-out)}
.svc-shot:hover .a{transform:rotate(1.2deg) translateY(-6px)}
.svc-shot:hover .b{transform:rotate(-2.2deg) translateY(6px)}

/* stats become the strip under the scene, where Increate runs its tool logos */
.svc-hero .stats{position:relative;z-index:1;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  margin-top:clamp(40px,6vh,72px);padding-top:30px;padding-bottom:30px;border-bottom:1px solid var(--line)}   /* ruled above and below */
/* first stat on the left edge, second on the centre line, last on the right edge */
@media (min-width:761px){.svc-hero .stat:nth-child(2){justify-self:center}.svc-hero .stat:last-child{justify-self:end}}
@media (max-width:980px){
  .svc-lead-grid{grid-template-columns:1fr;gap:40px}
  .svc-shot{max-width:560px;aspect-ratio:16/11}
  .svc-hero .h1{max-width:20ch}
}
@media (max-width:760px){
  .svc-hero .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .svc-hero .stat b{font-size:24px}
  .svc-shot{aspect-ratio:4/3}
}

/* what's included */
.incls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(32px,5vh,48px)}
.incl-sec .sec-grid{justify-items:center;text-align:center}   /* label + title on the centre line */
/* white cards, same surface as the "What we fix" row */
.incl{position:relative;padding:clamp(30px,2.6vw,40px) clamp(28px,2.4vw,36px) clamp(34px,2.8vw,42px);
  border-radius:24px;background:var(--light-panel);border:1px solid rgba(10,10,14,.08);color:var(--light-ink);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.incl:hover{transform:translateY(-5px);box-shadow:0 26px 54px -22px rgba(0,0,0,.85)}
/* a large icon well leading each card, the way the reference opens its steps */
.incl .ico{display:grid;place-items:center;width:clamp(68px,5.4vw,84px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,rgba(56,38,199,.13),rgba(56,38,199,.04) 62%);
  border:1px solid rgba(56,38,199,.14);
  transition:border-color .45s,background .45s}
.incl .ico svg{width:clamp(28px,2.2vw,34px);height:clamp(28px,2.2vw,34px);
  stroke:var(--brand);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .45s}
.incl:hover .ico{border-color:rgba(56,38,199,.3);background:radial-gradient(circle at 38% 32%,rgba(56,38,199,.22),rgba(56,38,199,.06) 62%)}
.incl b{display:block;margin-top:clamp(26px,2.4vw,34px);font-size:clamp(20px,1.7vw,23px);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.incl p{margin-top:12px;font-size:15.5px;line-height:1.6;color:#54545f;text-wrap:pretty}

/* featured case inside the deliverables row */
.svc-case{display:block;color:inherit;margin-top:20px}
.svc-case .img{aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#0d0d10}
.svc-case img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease-out)}
.svc-case:hover img{transform:scale(1.04)}
.svc-case b{display:block;margin-top:16px;font-size:clamp(19px,1.6vw,23px);font-weight:500;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.svc-case .go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;color:var(--muted);transition:color .3s,gap .3s}
.svc-case .go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-case:hover .go{color:var(--brand-2);gap:12px}

/* other services */

@media (max-width:1100px){.incls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.incls,.svc-hero .stats{grid-template-columns:1fr}}

/* inline CTA band: the reference breaks its long service page with a filled
   strip that asks for the call, rather than saving it all for the footer */
.svc-band{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px clamp(24px,3vw,56px);
  margin-top:clamp(48px,7vh,80px);padding:clamp(28px,3vw,42px) clamp(26px,3vw,48px);
  border-radius:clamp(20px,2vw,28px);
  background:linear-gradient(118deg,#3b28cf 0%,#2a1aa2 52%,#171055 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 70px -44px rgba(56,38,199,.9);
}
.svc-band p{margin:0;max-width:30ch;font-size:clamp(21px,2vw,30px);font-weight:500;letter-spacing:-.025em;line-height:1.2;color:#fff;text-wrap:balance}
.svc-band p em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.06em;color:#d8cfff}
.svc-band .pill{flex:none;background:#fff;color:#0b0b0e}
.svc-band .pill .badge{background:var(--brand);color:#fff}

/* ---- service detail: problems, outcomes, scopes, business outcomes -------
   One card surface for the whole page: a soft vertical fall rather than a flat
   panel, a hairline top highlight so the edge catches light, and a lift on hover. */
:root{
  --svc-card:linear-gradient(168deg,#17171c 0%,#111114 48%,#0c0c0f 100%);
  --svc-card-edge:inset 0 1px 0 rgba(255,255,255,.05);
  --svc-card-lift:inset 0 1px 0 rgba(255,255,255,.07),0 24px 50px -20px rgba(0,0,0,.9),0 0 0 1px rgba(122,104,255,.1);
}

.prob-sec .sec-grid{justify-items:center;text-align:center}   /* label + title on the centre line */
.probs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(32px,5vh,48px)}
/* white cards against the dark section — the contrast does the separating, so
   the cards need no internal rules */
.prob{position:relative;display:flex;flex-direction:column;
  padding:28px 24px;border-radius:20px;
  background:var(--light-panel);border:1px solid rgba(10,10,14,.08);color:var(--light-ink);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.prob:hover{transform:translateY(-5px);box-shadow:0 26px 54px -22px rgba(0,0,0,.85)}
.prob b{display:block;font-size:17.5px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.prob p{margin-top:10px;font-size:14.5px;line-height:1.55;color:#54545f;text-wrap:pretty}
/* every stated problem carries a number against it — the reference's strongest
   move, and the thing that turns a list of complaints into an argument */
.prob .proof{display:block;margin-top:auto;padding-top:26px;font-size:13px;line-height:1.45;color:var(--light-muted)}
.prob .proof b{display:block;margin-top:0;margin-bottom:5px;font-size:27px;font-weight:500;letter-spacing:-.03em;line-height:1;color:var(--brand)}
.prob .proof b em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.66em}

.out-head{display:flex;justify-content:center}
.out-head .sec-grid{justify-items:center;text-align:center}   /* label + title on the centre line */
.outs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(28px,4vh,40px)}
/* display/margin reset: the homepage's .out pill row (sections.css) shares the name and was
   flexing these cards, so some sat inline and some stacked depending on width */
.out{display:block;margin:0;position:relative;overflow:hidden;padding:36px 30px 32px;border-radius:24px;border:0;
  background:linear-gradient(118deg,#3b28cf 0%,#2a1aa2 52%,#171055 100%);   /* the "Start a project" band's colour */
  box-shadow:0 30px 70px -44px rgba(56,38,199,.9);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.out:hover{transform:translateY(-5px);box-shadow:0 36px 80px -40px rgba(56,38,199,1)}
/* the figure is the point of the card, so it gets the light */
.out b{display:block;font-size:clamp(48px,5.2vw,76px);font-weight:500;letter-spacing:-.045em;line-height:.94;
  background:linear-gradient(176deg,#fff 22%,#d8cfff 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.out b em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.58em;letter-spacing:0}
.out p{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);
  font-size:15px;line-height:1.55;color:rgba(255,255,255,.82);text-wrap:pretty}
.scope{display:flex;flex-direction:column;padding:28px 26px 30px;border-radius:22px;
  background:var(--svc-card);border:1px solid rgba(255,255,255,.075);box-shadow:var(--svc-card-edge);
  transition:transform .5s var(--ease-out),border-color .4s,box-shadow .5s var(--ease-out)}
.scope:hover{transform:translateY(-5px);border-color:rgba(122,104,255,.42);box-shadow:var(--svc-card-lift)}
.scope b{order:2;display:block;margin-top:14px;font-size:20px;font-weight:500;letter-spacing:-.025em}
/* the stage leads, as a pill — it is what people scan the row for */
.scope .stage{order:1;align-self:flex-start;font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;color:#c9c0ff;background:rgba(56,38,199,.22);border:1px solid rgba(122,104,255,.32)}
.scope .tags{order:3;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);gap:7px}
.scope .tags li{font-size:12px;padding:6px 11px;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.035)}
.gets{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px}
.gets li{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-size:16px;color:var(--ink-2)}
.gets li:last-child{border-bottom:1px solid var(--line)}
.gets svg{flex:none;width:18px;height:18px;margin-top:2px;stroke:var(--brand-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:1100px){.probs,.outs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.probs,.outs{grid-template-columns:1fr}}

/* ---- testimonials on service pages: the homepage carousel, kept dark ---- */
.svc-reviews .reviews-head .rating{color:var(--muted)}
.svc-reviews .reviews-head .rating b{color:#fff}
.svc-reviews .round-btn{background:#fff;color:#0b0b0e}
.svc-reviews .round-btn:hover{background:var(--brand);color:#fff}
/* white cards on the dark section, like the homepage carousel */
.svc-reviews .review-card{background:#fff;border:0;box-shadow:0 24px 50px -30px rgba(0,0,0,.6);color:var(--light-ink)}
.svc-reviews .review-card .logo{border-color:var(--light-line);color:var(--light-ink)}
.svc-reviews .review-card .mark{color:var(--brand)}
.svc-reviews .review-card .who{border-left-color:var(--light-line)}
.svc-reviews .review-card .who span{color:var(--light-muted)}

/* ---- service pages: one spacing rhythm — at least 150px of clear space at
   every section boundary. Sections carry the gap as bottom padding only. ---- */
.svc-page{--sec-gap:150px}
.svc-page .sec{padding-top:0;padding-bottom:var(--sec-gap)}
.svc-page .svc-hero{padding-bottom:var(--sec-gap)}
.svc-page .svc-band{margin-top:0}

/* ---- case stack on service pages: same cards as the homepage. Cases without a
   client quote on file show two of their real results in the quote's place. ---- */
.case-results ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.case-results li b{display:block;font-size:clamp(30px,2.6vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1}
.case-results li b em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.62em;letter-spacing:0}
.case-results li span{display:block;margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--muted)}

/* overview copy column: half the page wide less 150px, flush to the right edge */
@media (min-width:901px){
  .svc-intro .overview{grid-template-columns:minmax(0,1fr) minmax(0,calc(50vw - 150px))}
  .svc-intro .overview>div{width:100%}
}
/* the testimonial glow is held in the upper part of its section so it fades out
   before the CTA, whose solid background would otherwise cut it off in a line */
.svc-reviews.glow-left .aurora .s1{top:-10%;height:92%}
.svc-reviews.glow-left .aurora .s2{top:14%;height:44%}
/* the review line sits on the brightest part of the hero beam */
.svc-hero .rev-badge{color:rgba(255,255,255,.8)}
/* hero: the homepage "Trusted by" marquee in place of the stats, ruled above and below */
.svc-hero .logos{position:relative;z-index:1;margin-top:clamp(100px,calc(6vh + 60px),132px);   /* ~100px clear under the image stack */
  padding-bottom:clamp(28px,4vh,44px);border-bottom:1px solid var(--line)}
/* hero: optical centring. The tilted back card pokes above its box and the
   headline's line box has air above the capitals, so the stack is nudged down
   until the images' visual centre meets the text's (cap top → button bottom). */
@media (min-width:981px){.svc-shot{translate:0 2.2%}}

/* ---- contact form on a white card ------------------------------------- */
.contact-form-wrap{background:#fff;border-color:transparent;color:var(--light-ink);box-shadow:0 40px 100px -50px rgba(0,0,0,.85)}
.contact-form-wrap .field label,.contact-form-wrap .field legend{color:var(--light-ink)}
.contact-form-wrap .field label span{color:var(--light-muted)}
.contact-form-wrap .field input,.contact-form-wrap .field textarea{background:#f4f4f7;border-color:rgba(10,10,14,.08);color:var(--light-ink)}
.contact-form-wrap .field input::placeholder,.contact-form-wrap .field textarea::placeholder{color:#9b9ba6}
.contact-form-wrap .field input:focus,.contact-form-wrap .field textarea:focus{background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px rgba(56,38,199,.14)}
.contact-form-wrap .field input:user-invalid,.contact-form-wrap .field textarea:user-invalid{border-color:#e5484d}
.contact-form-wrap .opt span{border-color:rgba(10,10,14,.12);color:#3c3c46}
.contact-form-wrap .opt:hover span{border-color:var(--brand);color:var(--light-ink)}
.contact-form-wrap .opt input:checked+span{background:var(--brand);border-color:var(--brand);color:#fff}
.contact-form-wrap .opt input:focus-visible+span{outline-color:var(--brand)}
.contact-form-wrap .pill{--pill-bg:#0b0b0e;--pill-ink:#fff;--badge-bg:#fff;--badge-ink:#0b0b0e}   /* the white pill would vanish on the card */
.contact-form-wrap .form-note{color:var(--light-muted)}
.contact-form-wrap .form-ok{background:rgba(56,38,199,.07);border-color:rgba(56,38,199,.24);color:var(--light-ink)}

/* blog covers: the Webflow artwork is weighted right, so crops keep its logo in frame */
img[src*="covers/webflow-or-next-js"]{object-position:74% 50%}

/* blog header: centred, like the Works header */
.blog-hero .wrap{display:grid;justify-items:center;text-align:center}
.blog-hero .lead{margin-inline:auto}
.blog-hero .filters{justify-content:center}
.rhythm .blog-hero{padding-bottom:80px}   /* filters sit closer to the posts they filter */
.rhythm .featured-sec{padding-bottom:80px}   /* featured post and the grid read as one list */

/* ---- CMS additions (not in the original static site) -------------------------------------------------------------
   Article blocks the editor can add beyond headings and paragraphs. The six original articles contain none of these elements,
   so nothing above changes for them; every selector below only matches the new elements. */
.prose h3{margin:clamp(26px,4vh,40px) 0 0;font-size:clamp(18px,1.5vw,22px);font-weight:500;letter-spacing:-.02em;line-height:1.3}
.prose ul,.prose ol{margin:14px 0 0;padding-left:1.4em}
.prose li{margin-top:8px;font-size:17px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.prose li::marker{color:var(--muted)}
.prose blockquote{margin:clamp(24px,4vh,36px) 0 0;padding:2px 0 2px 20px;border-left:2px solid var(--line)}
.prose blockquote p{margin-top:0;font-size:clamp(19px,1.5vw,22px);line-height:1.5;color:var(--ink)}
.prose blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:var(--muted)}
.prose .post-figure{margin:clamp(28px,4vh,40px) 0 0}
.prose .post-figure img{display:block;width:100%;height:auto;border-radius:var(--r-md,14px)}
.prose .post-figure figcaption{margin-top:10px;font-size:14px;color:var(--muted)}
.prose code{padding:1px 6px;border-radius:6px;background:rgba(127,127,127,.14);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}