*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --ink:#0B0B0C;
  --ink-2:#131417;
  --ink-3:#17181C;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#EDEDEF;
  --muted:#9A9AA2;
  --coral:#E2725B;
  --coral-dark:#C85A44;
  --blue:#247BA0;
  --blue-light:#8FBCD6;
  --live:#3ADF7F;
  --head:'Poppins',sans-serif;
  --body:'Sora',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --pad:40px;
  --r:18px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);background:var(--ink);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img,svg{display:block;max-width:100%}
section{position:relative}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.1;letter-spacing:-.025em}
::selection{background:var(--coral);color:#fff}

.wrap{max-width:1220px;margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--body);font-size:14.5px;font-weight:600;border-radius:12px;cursor:pointer;white-space:nowrap;border:1.5px solid transparent;transition:background .25s,box-shadow .35s,transform .25s,border-color .25s}
.btn-primary{background:var(--coral);color:#fff;padding:6px 6px 6px 24px;box-shadow:0 8px 30px rgba(226,114,91,.26)}
.btn-primary:hover{background:var(--coral-dark);box-shadow:0 14px 44px rgba(226,114,91,.44);transform:translateY(-2px)}
.btn-icon-box{width:34px;height:34px;border-radius:9px;flex-shrink:0;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.btn-icon{width:16px;height:16px;transition:transform .3s}
.btn:hover .btn-icon{transform:translateX(3px)}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border-color:var(--line-2);padding:14px 26px}
.btn-ghost:hover{border-color:var(--text);background:rgba(255,255,255,.07)}
.btn-xl{font-size:16.5px;padding:8px 8px 8px 32px;gap:18px;border-radius:14px}
.btn-xl .btn-icon-box{width:44px;height:44px;border-radius:11px}
.btn-xl .btn-icon{width:19px;height:19px}

/* ---------- nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
header.stuck{background:rgba(11,11,12,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--line)}
nav{max-width:1220px;margin:0 auto;padding:15px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:9px}
.logo-word{font-family:var(--head);font-weight:800;font-size:21px;letter-spacing:-.035em;color:#fff}
.logo-bolt{width:15px;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:16px}
.burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;background:none;border:none;cursor:pointer}
.burger span{display:block;width:100%;height:1.5px;background:var(--text);border-radius:2px;transition:transform .25s,opacity .25s}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:158px 0 96px;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-30%;right:-10%;width:min(900px,90vw);aspect-ratio:1/1;
  background:radial-gradient(circle,rgba(36,123,160,.20),transparent 62%);pointer-events:none;
}
.hero::after{
  content:"";position:absolute;top:6%;left:-14%;width:min(760px,80vw);aspect-ratio:1/1;
  background:radial-gradient(circle,rgba(226,114,91,.16),transparent 62%);pointer-events:none;
}
.hero-spot{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(560px circle at var(--cx,50%) var(--cy,38%),rgba(255,255,255,.055),transparent 68%);transition:opacity .5s}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--coral);margin-bottom:26px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--coral)}
h1.hero-h{font-size:clamp(33px,3.3vw,52px);margin-bottom:26px}
h1.hero-h em{font-style:normal;color:var(--coral)}
.hero-sub{font-size:17px;line-height:1.75;color:var(--muted);max-width:530px;margin-bottom:36px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:9px 14px;background:rgba(255,255,255,.02)}
.chip b{color:var(--text);font-weight:600}

/* ---------- automation canvas ---------- */
.canvas-shell{
  position:relative;border:1px solid var(--line-2);border-radius:22px;padding:20px;
  /* width:100% is load-bearing — this is a grid item, and .canvas below uses
     inline-size containment, so without an explicit width the shell shrink-to-fits
     to the title bar instead of filling its column */
  width:100%;max-width:1000px;margin-left:auto;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  transform:translate3d(0,calc(var(--sy,0) * -.035 * 1px),0);
  will-change:transform;
}
.canvas-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding:0 4px}
.canvas-bar .mono{color:var(--muted)}
.canvas-foot{display:flex;align-items:center;margin-top:16px;padding:0 4px}
.live-row{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:var(--live);flex-shrink:0;box-shadow:0 0 10px rgba(58,223,127,.9);animation:pulse 2.1s ease-in-out infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(58,223,127,.5),0 0 10px rgba(58,223,127,.9)}
  70%{box-shadow:0 0 0 8px rgba(58,223,127,0),0 0 10px rgba(58,223,127,.9)}
  100%{box-shadow:0 0 0 0 rgba(58,223,127,0),0 0 10px rgba(58,223,127,.9)}
}
.canvas{
  position:relative;border-radius:14px;overflow:hidden;
  container-type:inline-size;
  aspect-ratio:var(--ar,5/3);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 28px,
    var(--ink);
}
.canvas svg{position:absolute;inset:0;width:100%;height:100%}
/* direct runs, clipped to each node's measured box so they meet a side, top or
   bottom edge while still aiming at the centre */
.wire{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* pathLength="100" on every pulse normalises the dash travel, so the coral
   packet moves at the same visual speed on a short hop as on a long curve */
/* each pulse crosses its own edge inside one slice of the shared cycle, then
   parks off the end invisibly — duration and delay come from the renderer, so
   the packet arrives at a node just as the next hop lights up */
.pulse{
  fill:none;stroke:var(--coral);stroke-width:2.4;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:10 240;
  filter:drop-shadow(0 0 6px rgba(226,114,91,.95));
  animation-name:travel;animation-timing-function:linear;animation-iteration-count:infinite;
  /* backwards matters: without it, every pulse sits parked and visible at the
     start of its wire during its stagger delay instead of waiting off-path */
  animation-fill-mode:backwards;
}
/* pathLength is 100, so the dash sits at [-offset, -offset+10]. It has to run
   from just before 0 to just past 100 to cross the whole wire — anything short
   of -102 and the packet dies partway along. Off-path at both ends means it
   needs no opacity keying to disappear. */
@keyframes travel{
  0%   {stroke-dashoffset:12}
  18%  {stroke-dashoffset:-102}
  100% {stroke-dashoffset:-102}
}
/* every dimension scales with the canvas itself, so nodes can never collide
   as the shell narrows — see the container-type on .canvas above */
.node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:min(8px,2.9cqw);
  background:var(--ink-3);border:1px solid var(--line-2);border-radius:9px;
  padding:min(9px,3.3cqw) min(13px,4.8cqw);
  max-width:min(var(--nmax,40cqw),150px);line-height:1.3;
  font-size:min(11.5px,4.2cqw);font-weight:600;color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.6);
}
.node i{width:min(6px,2.2cqw);height:min(6px,2.2cqw);border-radius:2px;background:var(--blue-light);font-style:normal;flex-shrink:0}
.node.accent{border-color:rgba(226,114,91,.5)}
.node.accent i{background:var(--coral)}
.node.done{border-color:rgba(58,223,127,.45)}
.node.done i{background:var(--live);box-shadow:0 0 8px rgba(58,223,127,.8)}

/* Flow picker. Deliberately reads as the plain filename label; only when the
   visitor lingers on the diagram does it show it can be opened. The booking
   CTA stays the loudest thing on the page. */
.flow-pick{position:relative;display:inline-flex;align-items:center}
.flow-pick select{
  appearance:none;-webkit-appearance:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);background:transparent;border:1px solid transparent;border-radius:7px;
  padding:5px 20px 5px 7px;margin-left:-7px;cursor:pointer;
  transition:color .25s,background .25s,border-color .25s;
}
.flow-pick select option{background:var(--ink-2);color:var(--text);text-transform:none;letter-spacing:0}
.flow-pick::after{
  content:"";position:absolute;right:7px;top:50%;width:5px;height:5px;
  border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.canvas-shell:hover .flow-pick::after{opacity:.8}
.canvas-shell:hover .flow-pick select{color:var(--text);background:rgba(255,255,255,.05);border-color:var(--line)}
.flow-pick select:focus-visible{outline:2px solid var(--coral);outline-offset:2px}

/* ---------- sections ---------- */
.sec{padding:104px 0}
.sec-head{max-width:680px;margin:0 auto 56px;text-align:center}
.sec-tag{color:var(--coral);margin-bottom:16px}
.sec-head h2{font-size:clamp(29px,3.6vw,46px);margin-bottom:16px}
.sec-head p{font-size:16px;color:var(--muted);line-height:1.72}

/* ---------- proof bento ---------- */
.proof{padding:0 0 20px}
.proof-label{text-align:center;color:var(--muted);margin-bottom:26px}
.proof-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;border:1px solid var(--line);border-radius:var(--r);padding:10px;background:rgba(255,255,255,.014)}
.proof-cell{flex:0 0 calc((100% - 60px) / 7);display:flex;align-items:center;justify-content:center;padding:22px 8px;border-radius:11px;background:rgba(255,255,255,.025);transition:background .3s}
.proof-cell:hover{background:rgba(255,255,255,.075)}
.proof-cell svg{height:21px;width:auto;opacity:.45;transition:opacity .3s;color:var(--text)}
.proof-cell:hover svg{opacity:1}

/* ---------- cases bento ---------- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.case{
  border:1px solid var(--line);border-radius:var(--r);padding:30px 28px 32px;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  display:flex;flex-direction:column;
  transition:border-color .35s,transform .35s;
}
.case:hover{border-color:rgba(226,114,91,.42);transform:translateY(-5px)}
.case-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.case-top .mono{color:var(--blue-light)}
.case-id{font-family:var(--mono);font-size:10.5px;color:var(--muted);opacity:.6}
.num{font-family:var(--head);font-weight:800;font-size:clamp(34px,3.7vw,46px);line-height:1;letter-spacing:-.04em;color:var(--coral);font-variant-numeric:tabular-nums}
.num-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:12px 0 18px}
.case h3{font-size:18.5px;margin-bottom:18px;color:#fff}
.case-rows{display:flex;flex-direction:column;gap:15px}
.case-row .k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);opacity:.5;margin-bottom:6px}
.case-row p{font-size:13.5px;line-height:1.7;color:var(--muted)}

/* ---------- process rail ---------- */
.steps{max-width:800px;margin:0 auto;position:relative}
.steps::before{content:"";position:absolute;left:27px;top:20px;bottom:20px;width:1px;background:var(--line)}
.steps::after{content:"";position:absolute;left:27px;top:20px;width:1px;height:var(--fill,0%);background:linear-gradient(180deg,var(--coral),var(--blue-light));transition:height .1s linear}
.step{position:relative;display:flex;gap:30px;padding:22px 0 34px}
.step-n{
  width:55px;height:55px;border-radius:14px;flex-shrink:0;position:relative;z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--coral);
  background:var(--ink-2);border:1px solid rgba(226,114,91,.35);
}
.step h3{font-size:20px;margin-bottom:12px;color:#fff}
.step p{font-size:15px;line-height:1.75;color:var(--muted);max-width:560px}
.step .note{margin-top:12px;font-size:13.5px;color:var(--blue-light)}

/* ---------- services bento ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.svc-grid.four{grid-template-columns:repeat(2,1fr)}
.svc{
  border:1px solid var(--line);border-radius:var(--r);padding:30px 26px;
  background:rgba(255,255,255,.022);
  transition:border-color .3s,background .3s,transform .3s;
}
.svc:hover{border-color:var(--line-2);background:rgba(255,255,255,.05);transform:translateY(-4px)}
.svc .mono{color:var(--coral);margin-bottom:18px;display:block}
.svc h3{font-size:17.5px;margin-bottom:11px;color:#fff}
.svc p{font-size:14px;line-height:1.72;color:var(--muted)}
.svc-ex{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.svc-ex p{font-size:13.5px;line-height:1.7;color:var(--text);opacity:.82}
/* each example is its own item, divided from the next */
.svc-ex p + p{margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.svc-ex b{display:block;font-family:var(--head);font-weight:600;font-size:13px;color:#fff;opacity:1;margin-bottom:5px;letter-spacing:-.01em}

/* ---------- final cta ---------- */
.cta-sec{padding:16px 0 110px}
.cta-box{
  position:relative;overflow:hidden;border:1px solid var(--line-2);border-radius:26px;
  padding:clamp(46px,6.5vw,80px) var(--pad);text-align:center;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(160deg,rgba(226,114,91,.14),rgba(36,123,160,.09) 60%,transparent);
}
.cta-box::after{
  content:"";position:absolute;bottom:-70%;left:50%;transform:translateX(-50%);
  width:120%;aspect-ratio:2/1;background:radial-gradient(ellipse,rgba(226,114,91,.22),transparent 65%);pointer-events:none;
}
.cta-box > *{position:relative;z-index:2}
.cta-box h2{font-size:clamp(29px,4vw,50px);margin-bottom:18px}
.cta-box p{font-size:16.5px;color:var(--muted);max-width:560px;margin:0 auto 36px;line-height:1.7}
.cta-note{margin-top:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:40px 0}
.foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.foot-links{display:flex;gap:24px}
.foot-links a:hover{color:var(--text)}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .hero .wrap{grid-template-columns:1fr;gap:52px}
  .canvas-shell{max-width:400px;margin:0 auto;transform:none}
  .cases,.svc-grid,.svc-grid.four{grid-template-columns:1fr 1fr}
  .proof-cell{flex-basis:calc((100% - 40px) / 5)}
  .sec{padding:84px 0}
}
@media(max-width:720px){
  :root{--pad:22px}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:20px;background:rgba(11,11,12,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:24px var(--pad) 30px}
  .nav-links.open{display:flex}
  .burger{display:flex}
  .hero{padding:126px 0 72px}
  .cases,.svc-grid,.svc-grid.four{grid-template-columns:1fr}
  .proof-cell{flex-basis:calc((100% - 20px) / 3)}
  .sec{padding:68px 0}
  .steps::before,.steps::after{left:20px}
  .step{gap:18px;padding:16px 0 28px}
  .step-n{width:41px;height:41px;border-radius:11px;font-size:11px}
  .cta-sec{padding:0 0 76px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .canvas-shell{transform:none!important}
  .pulse{display:none}
}

/* =====================================================================
   INNER PAGES — dark restyles of the components in the original site
   ===================================================================== */

/* ---------- page hero (every page except index) ---------- */
.page-hero{padding:150px 0 20px;text-align:center}
.page-hero .sec-tag{color:var(--coral);margin-bottom:16px}
.page-hero h1{font-size:clamp(32px,4.4vw,54px);margin-bottom:18px}
.page-hero p{font-size:17px;line-height:1.72;color:var(--muted);max-width:640px;margin:0 auto}

/* ---------- case studies (full list) ---------- */
.case-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.case-list .case{padding:34px 30px}
.case-list .case .num{font-size:clamp(30px,3.2vw,40px)}
.visit{margin-top:auto;padding-top:18px;font-size:13px;font-weight:600;color:var(--coral);display:inline-block}
.visit:hover{color:var(--coral-dark)}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.price-card{
  border:1px solid var(--line);border-radius:var(--r);padding:34px 30px;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:border-color .3s,transform .3s;
}
.price-card:hover{border-color:rgba(226,114,91,.4);transform:translateY(-5px)}
.price-card .mono{color:var(--coral);display:block;margin-bottom:18px}
.price-card h3{font-size:19px;margin-bottom:12px;color:#fff}
.price-card p{font-size:14.5px;line-height:1.72;color:var(--muted)}
.price-note{
  margin-top:18px;border:1px solid var(--line);border-radius:var(--r);
  padding:34px 30px;text-align:center;background:rgba(255,255,255,.02);
}
.price-note h3{font-size:20px;margin-bottom:12px;color:#fff}
.price-note p{font-size:15px;line-height:1.72;color:var(--muted);max-width:620px;margin:0 auto}

/* ---------- faq ---------- */
.faq-list{max-width:900px;margin:0 auto;display:grid;gap:14px}
.faq-item{
  border:1px solid var(--line);border-radius:var(--r);padding:28px 30px;
  background:rgba(255,255,255,.022);transition:border-color .3s,background .3s;
}
.faq-item:hover{border-color:var(--line-2);background:rgba(255,255,255,.045)}
.faq-item h3{font-size:17px;margin-bottom:11px;color:#fff}
.faq-item p{font-size:14.5px;line-height:1.75;color:var(--muted)}
.faq-item a{color:var(--blue-light);font-weight:600}

/* ---------- about / bio ---------- */
.bio{padding:40px 0 96px}
.bio .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.bio-photo{border-radius:22px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.bio-photo img{width:100%;height:100%;object-fit:cover;display:block}
.bio-copy h1{font-size:clamp(28px,3.5vw,42px);margin-bottom:22px}
.bio-copy p{font-size:15.5px;line-height:1.8;color:var(--muted);margin-bottom:18px}
.bio-copy p strong{color:var(--text)}
.credential-list{margin-top:26px;display:flex;flex-direction:column;gap:11px}
.credential-list li{font-size:14.5px;color:var(--muted);display:flex;gap:12px;align-items:flex-start;line-height:1.6}
.credential-list li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--coral);flex-shrink:0;margin-top:8px}

/* ---------- testimonials ---------- */
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.t-card{
  border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  display:flex;flex-direction:column;
}
.t-quote{font-size:14.5px;line-height:1.75;color:var(--muted);margin-bottom:22px}
.t-name{font-family:var(--head);font-weight:700;font-size:14.5px;color:#fff;margin-top:auto}
.t-role{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* ---------- contact panel ---------- */
.contact-panel{
  max-width:660px;margin:0 auto;text-align:center;
  border:1px solid var(--line-2);border-radius:26px;padding:clamp(40px,6vw,64px) var(--pad);
  background:linear-gradient(165deg,rgba(226,114,91,.12),rgba(36,123,160,.08) 60%,transparent);
  position:relative;overflow:hidden;
}
.contact-panel::after{
  content:"";position:absolute;bottom:-70%;left:50%;transform:translateX(-50%);
  width:120%;aspect-ratio:2/1;background:radial-gradient(ellipse,rgba(226,114,91,.2),transparent 65%);pointer-events:none;
}
.contact-panel>*{position:relative;z-index:2}
.bolt-badge{width:44px;margin:0 auto 22px}
.contact-panel h2{font-size:clamp(26px,3.4vw,38px);margin-bottom:16px}
.contact-panel p{font-size:16px;color:var(--muted);line-height:1.72;margin-bottom:32px}

/* ---------- legal ---------- */
.legal{padding:20px 0 96px}
.legal .wrap{max-width:800px}
.legal .updated{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:36px}
.legal h2{font-size:20px;margin:38px 0 14px;color:#fff}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:15px;line-height:1.8;color:var(--muted);margin-bottom:16px}
.legal ul{margin:0 0 16px;padding-left:22px;list-style:disc}
.legal li{font-size:15px;line-height:1.8;color:var(--muted);margin-bottom:7px}
.legal a{color:var(--blue-light);font-weight:600}

/* ---------- inner-page responsive ---------- */
@media(max-width:1100px){
  .case-list,.price-grid,.t-grid{grid-template-columns:1fr 1fr}
  .bio .wrap{grid-template-columns:1fr;gap:40px}
  .bio-photo{max-width:380px;margin:0 auto}
}
@media(max-width:720px){
  .page-hero{padding:120px 0 12px}
  .case-list,.price-grid,.t-grid{grid-template-columns:1fr}
  .bio{padding:24px 0 72px}
}

/* ---------- services: align the dividers across all three cards ----------
   Each card maps its 6 blocks (number, title, intro, 3 examples) onto the same
   shared row tracks, so every separator lands on the same baseline regardless
   of how long the copy above it runs. Only applies where the three sit in one
   row; below that they stack and alignment is moot. */
@media(min-width:1101px){
  @supports (grid-template-rows: subgrid){
    .svc-grid{grid-template-rows:repeat(6,auto);row-gap:0}
    .svc{grid-row:span 6;display:grid;grid-template-rows:subgrid}
    .svc-ex{grid-row:span 3;display:grid;grid-template-rows:subgrid}
    /* margins carry the vertical rhythm now that the row gap is zero */
    .svc>h3{margin-bottom:0}
    .svc-ex p{margin:0}
    .svc-ex p + p{margin-top:15px}
    .svc-grid.four .svc{margin-bottom:14px}
  }
}