/* ═══════════════════════════════════════════════════════════════════
   MUHAMMAD ATIF — DESIGN SYSTEM v5

   TYPOGRAPHY
   Clash Grotesk (display/UI) + Satoshi (body), both from Fontshare,
   free for personal and commercial use. These are the two families
   msrbuilds.com actually self-hosts — confirmed by reading its
   stylesheet (Clash Grotesk 90 declarations, Satoshi 27). Deliberately
   NOT Inter / Poppins / Montserrat.

   COLOUR
   Built on Atif's established brand teal #0ED39E. Charcoal, near-black
   and off-white only. No second accent hue anywhere.

   Tokens map onto Kadence global palette slots 1-15.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ── COLOUR ─────────────────────────────────────────────────────── */
  --p1:#0ED39E;          /* 1  brand accent                           */
  --p2:#0BB488;          /* 2  accent pressed / deep                  */
  --p3:#F2F5F4;          /* 3  headings — off-white                   */
  --p4:#C6CECB;          /* 4  text high                              */
  --p5:#93A09B;          /* 5  body                                   */
  --p6:#66736E;          /* 6  muted labels                           */
  --p7:#080A0A;          /* 7  background — near black                */
  --p8:#0D1110;          /* 8  surface                                */
  --p9:#131917;          /* 9  surface raised                         */
  --p10:#0ED39E;         /* 10 complement                             */
  --p15:#E8B33D;         /* 15 rating only                            */

  --line:#1C2321;
  --line-hi:#2A3330;
  --on-accent:#04221A;               /* text that sits ON the teal    */
  --a06:rgba(14,211,158,.06);
  --a12:rgba(14,211,158,.12);
  --a24:rgba(14,211,158,.24);
  --a40:rgba(14,211,158,.40);
  --wa:#25D366;

  /* ── SPACING ── single 8px scale ────────────────────────────────── */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:40px; --s8:56px; --s9:72px; --s10:96px; --s11:128px; --s12:176px;

  --gut:clamp(20px,4vw,48px);
  --sec:clamp(var(--s9),8.5vw,var(--s12));
  --sec-sm:clamp(var(--s8),6vw,var(--s10));
  --maxw:1280px;

  /* ── RADIUS ── */
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* ── TYPE ── */
  --t-display:clamp(2.6rem,1.3rem + 5.6vw,5.5rem);
  --t-h1:clamp(2.25rem,1.5rem + 3.2vw,4rem);
  --t-h2:clamp(1.75rem,1.35rem + 1.9vw,2.75rem);
  --t-h3:clamp(1.125rem,1.06rem + 0.42vw,1.375rem);
  --t-lead:clamp(1.0313rem,0.99rem + 0.42vw,1.25rem);
  --t-body:clamp(0.9688rem,0.95rem + 0.12vw,1.0313rem);
  --t-sm:0.9063rem;
  --t-xs:0.8125rem;
  --t-label:0.75rem;

  --f-head:'Clash Grotesk','Clash Display',system-ui,sans-serif;
  --f-body:'Satoshi',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ── MOTION ── */
  --e:cubic-bezier(.22,1,.36,1);
  --d-fast:.2s; --d:.4s; --d-slow:.75s;

  --shadow:0 2px 4px rgba(0,0,0,.4),0 16px 44px rgba(0,0,0,.5);
  --shadow-a:0 14px 44px rgba(14,211,158,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--s10) + var(--s2))}
body{
  margin:0;background:var(--p7);color:var(--p5);
  font-family:var(--f-body);font-size:var(--t-body);line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--p1);color:var(--on-accent)}

h1,h2,h3,h4{font-family:var(--f-head);color:var(--p3);margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.08}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.24;letter-spacing:-.018em;font-weight:500}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
strong{color:var(--p3);font-weight:600}

/* Emphasis is weight + brand colour. No second typeface. */
.it{font-weight:500;letter-spacing:-.03em}
.lime{color:var(--p1)}          /* kept as the accent-colour utility */

/* ═══════════════════ LAYOUT ═══════════════════ */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec);position:relative}
.sec--sm{padding-block:var(--sec-sm)}
.sec--surface{background:var(--p8)}
.sec--hairline{border-top:1px solid var(--line)}

.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut)}
.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}
.col-8{grid-column:span 8}.col-12{grid-column:1/-1}
.start-6{grid-column:6/-1}.start-7{grid-column:7/-1}.start-8{grid-column:8/-1}

/* ═══════════════════ ATOMS ═══════════════════ */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s3);
  font-family:var(--f-head);font-size:var(--t-label);font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;color:var(--p1);
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--p1);flex:none}

.pill{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s4);border:1px solid var(--line-hi);border-radius:var(--r-pill);
  font-family:var(--f-head);font-size:var(--t-xs);font-weight:500;color:var(--p4);background:var(--p8);
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--p1);flex:none;position:relative}
.pill .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--a40);animation:ping 2.6s var(--e) infinite}
@keyframes ping{0%{transform:scale(.7);opacity:1}70%,100%{transform:scale(1.5);opacity:0}}

.lead{font-size:var(--t-lead);line-height:1.58;color:var(--p4);letter-spacing:-.008em}
.measure{max-width:62ch}.measure-sm{max-width:46ch}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s5) var(--s7);flex-wrap:wrap;margin-bottom:var(--s9)}
.sec-head__main{max-width:58ch}
.sec-head .eyebrow{margin-bottom:var(--s4)}
.sec-head p{margin-top:var(--s4)}

/* ═══════════════════ BUTTONS ═══════════════════ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--f-head);font-size:var(--t-xs);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;padding:var(--s4) var(--s6);border-radius:var(--r-pill);
  border:1px solid transparent;overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:color var(--d) var(--e),border-color var(--d) var(--e),
             transform var(--d) var(--e),box-shadow var(--d) var(--e);
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;transform:translateY(102%);transition:transform var(--d) var(--e)}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--p1);outline-offset:3px}
.btn svg{width:16px;height:16px;flex:none;transition:transform var(--d) var(--e)}
.btn:hover svg{transform:translateX(3px)}

.btn--primary{background:var(--p1);color:var(--on-accent);border-color:var(--p1)}
.btn--primary::before{background:#2BEBB5}
.btn--primary:hover{box-shadow:var(--shadow-a)}
.btn--wa{background:var(--wa);color:#04200E;border-color:var(--wa)}
.btn--wa::before{background:#3CE87B}
.btn--ghost{background:transparent;color:var(--p3);border-color:var(--line-hi)}
.btn--ghost::before{background:var(--p3)}
.btn--ghost:hover{color:var(--p7);border-color:var(--p3)}
.btn--sm{padding:var(--s3) var(--s5);font-size:var(--t-label)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.btn.is-active{background:var(--p1);color:var(--on-accent);border-color:var(--p1)}

.tl{
  display:inline-flex;align-items:center;gap:var(--s2);position:relative;
  font-family:var(--f-head);font-size:var(--t-xs);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--p3);padding-bottom:var(--s1);
}
.tl::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--p1);transform:scaleX(0);transform-origin:left;transition:transform var(--d) var(--e)}
.tl:hover{color:var(--p1)}
.tl:hover::after{transform:scaleX(1)}
.tl svg{width:14px;height:14px;transition:transform var(--d) var(--e)}
.tl:hover svg{transform:translate(3px,-3px)}

/* ═══════════════════ HEADER ═══════════════════ */
.hdr{position:fixed;inset:0 0 auto;z-index:100;transition:background var(--d),border-color var(--d);border-bottom:1px solid transparent}
.hdr.stuck{background:rgba(8,10,10,.86);backdrop-filter:saturate(180%) blur(16px);border-bottom-color:var(--line)}
.hdr-in{display:flex;align-items:center;gap:var(--s5);height:var(--s10);transition:height var(--d) var(--e)}
.hdr.stuck .hdr-in{height:var(--s9)}

.brand{display:flex;align-items:center;gap:var(--s3);flex:none}
.brand-mark{
  width:42px;height:42px;border-radius:var(--r-sm);background:var(--p1);color:var(--on-accent);
  display:grid;place-items:center;font-family:var(--f-head);font-weight:700;font-size:.875rem;
  letter-spacing:-.03em;transition:transform var(--d) var(--e),box-shadow var(--d) var(--e);
}
.brand:hover .brand-mark{transform:rotate(-6deg);box-shadow:var(--shadow-a)}
.brand-name{font-family:var(--f-head);font-weight:600;font-size:1rem;color:var(--p3);letter-spacing:-.025em;display:block;line-height:1.2}
.brand-role{font-family:var(--f-head);font-size:.625rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--p6);display:block}

.nav{margin-left:auto;display:flex;align-items:center;gap:var(--s1)}
.nav a{
  position:relative;font-family:var(--f-head);font-size:var(--t-xs);font-weight:500;
  color:var(--p5);padding:var(--s2) var(--s4);border-radius:var(--r-pill);
  transition:color var(--d-fast) var(--e);
}
.nav a::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--p1);transform:translate(-50%,6px) scale(0);transition:transform var(--d) var(--e)}
.nav a:hover{color:var(--p3)}
.nav a.on{color:var(--p3)}
.nav a.on::after{transform:translate(-50%,0) scale(1)}
.hdr-cta{display:flex;align-items:center;gap:var(--s3);flex:none}

.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-hi);border-radius:var(--r-sm);position:relative}
.burger i{position:absolute;left:12px;width:18px;height:1.5px;background:var(--p3);border-radius:2px;transition:transform var(--d) var(--e)}
.burger i:nth-child(1){top:17px}
.burger i:nth-child(2){top:24px}
.burger.on i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger.on i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.drawer{position:fixed;inset:var(--s10) 0 auto;z-index:99;background:var(--p7);border-bottom:1px solid var(--line);padding:var(--s4) var(--gut) var(--s7);display:none}
.drawer.on{display:block}
.drawer a{display:flex;align-items:baseline;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line);font-family:var(--f-head);font-size:1.5rem;font-weight:600;color:var(--p3);letter-spacing:-.025em}
.drawer a .n{font-family:var(--f-head);font-size:.625rem;letter-spacing:.16em;color:var(--p6)}
.drawer .btn{margin-top:var(--s6);width:100%}

/* ═══════════════════════════════════════════════════════════════════
   INTRO — the homepage hero.
   Centred cut-out portrait, concentric orbit rings, and the eight
   technologies Atif actually works with placed on the middle ring.
   Headline sits under the figure and overlaps its base.
   ═══════════════════════════════════════════════════════════════════ */
.intro{position:relative;padding-top:calc(var(--s10) + var(--s7));padding-bottom:var(--sec);overflow:hidden;text-align:center}
.intro__top{display:flex;justify-content:center;margin-bottom:var(--s7)}

/* -2% overlap only: the name should meet the base of the figure, not
   run across the suit. */
.orbit{position:relative;width:min(640px,88vw);aspect-ratio:1;margin:0 auto -2%}

.orbit__ring{position:absolute;top:50%;left:50%;translate:-50% -50%;border-radius:50%;pointer-events:none}
.orbit__ring--1{width:58%;height:58%;border:1px solid var(--a24)}
.orbit__ring--2{width:80%;height:80%;border:1px solid var(--a24)}
.orbit__ring--3{width:100%;height:100%;border:1px dashed var(--a40);animation:spin 70s linear infinite}
@keyframes spin{to{rotate:360deg}}

.orbit__glow{
  position:absolute;top:50%;left:50%;translate:-50% -50%;width:92%;height:92%;border-radius:50%;
  background:radial-gradient(circle,var(--a24) 0%,var(--a06) 45%,transparent 68%);pointer-events:none;
}
.orbit__base{                                   /* grounds the figure */
  position:absolute;left:50%;bottom:4%;translate:-50% 0;width:62%;height:2px;
  background:linear-gradient(90deg,transparent,var(--a40),transparent);
}
.orbit__figure{
  position:absolute;left:50%;bottom:4%;translate:-50% 0;width:56%;z-index:3;
  filter:drop-shadow(0 18px 42px rgba(0,0,0,.6));
  /* Two masks intersected: fades the base, and softens the left/right
     edges where the original photo cropped the shoulders at the frame. */
  mask-image:linear-gradient(180deg,#000 92%,transparent 100%),
             linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
  mask-composite:intersect;
  -webkit-mask-image:linear-gradient(180deg,#000 92%,transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 3.5%,#000 96.5%,transparent 100%);
  -webkit-mask-composite:source-in;
}

/* Technology nodes — sit on ring 2, 40% radius from centre */
.tech{
  position:absolute;z-index:4;width:clamp(44px,7.2vw,58px);height:clamp(44px,7.2vw,58px);
  translate:-50% -50%;border-radius:50%;display:grid;place-items:center;
  /* raised surface + teal-tinted edge so the nodes read against near-black */
  background:#161D1B;border:1px solid var(--a24);color:var(--p3);
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  transition:border-color var(--d) var(--e),color var(--d) var(--e),
             background var(--d) var(--e),transform var(--d) var(--e);
  animation:float 7s ease-in-out infinite;
}
.tech svg{width:52%;height:52%}
.tech:hover{background:var(--p1);color:var(--on-accent);border-color:var(--p1);transform:scale(1.12);box-shadow:var(--shadow-a)}
.tech__name{
  position:absolute;top:calc(100% + 8px);left:50%;translate:-50% 0;white-space:nowrap;
  font-family:var(--f-head);font-size:.625rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--p1);opacity:0;transition:opacity var(--d) var(--e);pointer-events:none;
}
.tech:hover .tech__name{opacity:1}
@keyframes float{0%,100%{translate:-50% -50%}50%{translate:-50% calc(-50% - 8px)}}

.tech--1{left:12.4%;top:36.3%;animation-delay:-0s}
.tech--2{left:12.4%;top:63.7%;animation-delay:-1s}
.tech--3{left:21.7%;top:21.7%;animation-delay:-2s}
.tech--4{left:21.7%;top:78.3%;animation-delay:-3s}
.tech--5{left:87.6%;top:36.3%;animation-delay:-3.5s}
.tech--6{left:87.6%;top:63.7%;animation-delay:-2.5s}
.tech--7{left:78.3%;top:21.7%;animation-delay:-1.5s}
.tech--8{left:78.3%;top:78.3%;animation-delay:-.5s}

.intro__name{
  position:relative;z-index:5;font-family:var(--f-head);font-size:var(--t-display);
  font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--p3);margin:0 0 var(--s5);
}
.intro__name .ln{display:block;overflow:hidden}
.intro__name .ln>span{display:block;transition:transform var(--d-slow) var(--e)}
.intro__role{
  font-family:var(--f-head);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(1.0625rem,.95rem + .85vw,1.75rem);color:var(--p1);margin:0 0 var(--s5);
}
.intro__role span{color:var(--p6)}
.intro .lead{max-width:56ch;margin-inline:auto;margin-bottom:var(--s7)}
.intro .btn-row{justify-content:center}

/* ═══════════════════ SPLIT + FIGURE PANEL ═══════════════════
   Two-column composition and the portrait treatment used on inner
   pages, where the full orbit would be too much. */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--gut);align-items:center}

.figure-panel{
  position:relative;justify-self:end;width:100%;max-width:440px;aspect-ratio:4/5;
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--p9);
  overflow:hidden;display:grid;align-content:end;justify-items:center;
}
.figure-panel::before{
  content:"";position:absolute;left:50%;top:14%;width:116%;aspect-ratio:1;translate:-50% 0;
  background:radial-gradient(circle,var(--a24),var(--a06) 44%,transparent 66%);pointer-events:none;
}
.figure-panel::after{
  content:"";position:absolute;left:50%;top:10%;width:78%;aspect-ratio:1;translate:-50% 0;
  border:1px solid var(--a24);border-radius:50%;pointer-events:none;
  mask-image:linear-gradient(180deg,#000 55%,transparent 86%);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 86%);
}
.figure-panel img{
  position:relative;z-index:2;width:96%;
  mask-image:linear-gradient(180deg,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 94%,transparent 100%);
}
.figure-tag{
  position:absolute;z-index:3;left:var(--s5);bottom:var(--s5);display:inline-flex;align-items:center;
  gap:var(--s2);background:rgba(8,10,10,.9);border:1px solid var(--line-hi);border-radius:var(--r-pill);
  padding:var(--s2) var(--s4);backdrop-filter:blur(10px);font-family:var(--f-head);
  font-size:var(--t-xs);font-weight:500;color:var(--p3);
}
.figure-tag svg{width:15px;height:15px;color:var(--p1);flex:none}

/* ═══════════════════ INNER PAGE HEAD ═══════════════════ */
.page-head{padding-top:calc(var(--s10) + var(--s8));padding-bottom:var(--s9);position:relative}
.page-head h1{margin:var(--s5) 0}
.page-head .lead{max-width:56ch}
.page-head__row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s6);flex-wrap:wrap}

/* ═══════════════════ MARQUEE ═══════════════════ */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:var(--s5);background:var(--p8)}
.marquee-track{display:flex;width:max-content;animation:slide 40s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  display:inline-flex;align-items:center;gap:clamp(var(--s5),4vw,var(--s8));
  padding-right:clamp(var(--s5),4vw,var(--s8));white-space:nowrap;
  font-family:var(--f-head);font-size:clamp(1rem,.9rem + .5vw,1.375rem);font-weight:500;
  letter-spacing:-.018em;color:var(--p5);
}
.marquee-track i{width:5px;height:5px;background:var(--p1);transform:rotate(45deg);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ═══════════════════ SERVICE CARDS ═══════════════════ */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.svc{
  position:relative;display:flex;flex-direction:column;isolation:isolate;overflow:hidden;
  background:var(--p8);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);
  transition:transform var(--d) var(--e),border-color var(--d) var(--e),box-shadow var(--d) var(--e);
}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,var(--a12),transparent);transform:translateY(101%);transition:transform var(--d) var(--e)}
.svc::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--p1);transform:scaleX(0);transform-origin:left;transition:transform var(--d-slow) var(--e)}
.svc-n{position:absolute;top:var(--s5);right:var(--s6);font-family:var(--f-head);font-size:var(--t-label);font-weight:600;letter-spacing:.12em;color:var(--p6);transition:color var(--d) var(--e),transform var(--d) var(--e)}
.svc-ico{
  width:54px;height:54px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--p9);border:1px solid var(--line);color:var(--p1);margin-bottom:var(--s6);
  transition:background var(--d) var(--e),color var(--d) var(--e),border-color var(--d) var(--e),transform var(--d) var(--e);
}
.svc-ico svg{width:25px;height:25px;stroke-width:1.5}
.svc h3{margin-bottom:var(--s3);transition:transform var(--d) var(--e)}
.svc p{font-size:var(--t-sm);color:var(--p5);margin:0;transition:color var(--d) var(--e)}
.svc-go{
  display:flex;align-items:center;gap:var(--s2);margin-top:auto;padding-top:var(--s5);
  border-top:1px solid var(--line);font-family:var(--f-head);font-size:var(--t-label);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--p6);
  transition:color var(--d) var(--e),border-color var(--d) var(--e),gap var(--d) var(--e);
}
.svc-go svg{width:14px;height:14px;transition:transform var(--d) var(--e)}

.svc:hover,.svc:focus-visible,.svc.tap{transform:translateY(-6px);border-color:var(--a24);box-shadow:var(--shadow-a);outline:none}
.svc:hover::before,.svc:focus-visible::before,.svc.tap::before{transform:translateY(0)}
.svc:hover::after,.svc:focus-visible::after,.svc.tap::after{transform:scaleX(1)}
.svc:hover .svc-ico,.svc:focus-visible .svc-ico,.svc.tap .svc-ico{background:var(--p1);color:var(--on-accent);border-color:var(--p1);transform:rotate(-8deg) scale(1.06)}
.svc:hover .svc-n,.svc:focus-visible .svc-n,.svc.tap .svc-n{color:var(--p1);transform:translateX(-4px)}
.svc:hover h3,.svc:focus-visible h3,.svc.tap h3{transform:translateX(4px)}
.svc:hover p,.svc:focus-visible p,.svc.tap p{color:var(--p4)}
.svc:hover .svc-go,.svc:focus-visible .svc-go,.svc.tap .svc-go{color:var(--p1);border-top-color:var(--a24);gap:var(--s4)}
.svc:hover .svc-go svg,.svc.tap .svc-go svg{transform:translateX(3px)}

/* ═══════════════════ WORK ═══════════════════
   Rows must sit inside .work — nth-child counts all siblings. */
.work-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);align-items:center;padding-block:var(--s9);border-top:1px solid var(--line)}
.work-row:last-child{border-bottom:1px solid var(--line)}
.work-fig{grid-column:span 7;position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--p9);border:1px solid var(--line);aspect-ratio:16/10}
.work-info{grid-column:9/-1}
.work-row:nth-child(even) .work-fig{grid-column:6/13;order:2}
.work-row:nth-child(even) .work-info{grid-column:1/5;order:1}
.work-fig img{width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.03);transition:transform var(--d-slow) var(--e)}
.work-row:hover .work-fig img{transform:scale(1)}
.work-fig::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--a24);opacity:0;transition:opacity var(--d) var(--e)}
.work-row:hover .work-fig::after{opacity:1}
.work-tag{
  position:absolute;z-index:3;top:var(--s4);left:var(--s4);background:rgba(8,10,10,.86);
  backdrop-filter:blur(8px);border:1px solid var(--line-hi);border-radius:var(--r-pill);
  padding:var(--s2) var(--s4);font-family:var(--f-head);font-size:.6875rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--p1);
}
.work-n{font-family:var(--f-head);font-size:var(--t-label);font-weight:500;letter-spacing:.12em;color:var(--p6);display:block;margin-bottom:var(--s4)}
.work-info h3{font-size:clamp(1.5rem,1.25rem + 1.1vw,2.125rem);font-weight:600;margin-bottom:var(--s4)}
.work-info p{font-size:var(--t-sm);margin-bottom:var(--s5)}
.meta{border-top:1px solid var(--line);margin-bottom:var(--s6)}
.meta li{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--line);font-size:var(--t-xs)}
.meta li span:first-child{color:var(--p6);font-family:var(--f-head);letter-spacing:.06em;text-transform:uppercase;font-size:.6875rem}
.meta li span:last-child{color:var(--p3);text-align:right;font-weight:500}

/* ═══════════════════ CAPABILITY BARS ═══════════════════ */
.cap+.cap{margin-top:var(--s6)}
.cap-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s3)}
.cap-name{font-family:var(--f-head);font-size:1.0625rem;font-weight:500;color:var(--p3);letter-spacing:-.018em}
.cap-pct{font-family:var(--f-head);font-size:var(--t-xs);font-weight:600;color:var(--p1);letter-spacing:.05em}
.cap-track{height:4px;border-radius:var(--r-pill);background:var(--p9);overflow:hidden}
.cap-fill{display:block;height:100%;width:0;border-radius:inherit;background:var(--p1);transition:width 1.5s var(--e)}

/* ═══════════════════ STAT CARDS ═══════════════════ */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
.num{background:var(--p8);border:1px solid var(--line);border-radius:var(--r);padding:var(--s6) var(--s5);transition:border-color var(--d) var(--e),transform var(--d) var(--e)}
.num:hover{border-color:var(--a24);transform:translateY(-4px)}
.num .k{display:block;font-family:var(--f-head);font-weight:600;font-size:clamp(2rem,1.6rem + 1.7vw,2.875rem);letter-spacing:-.04em;color:var(--p1);line-height:1}
.num .v{display:block;margin-top:var(--s3);font-family:var(--f-head);font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--p6);line-height:1.5}

/* ═══════════════════ PROCESS ═══════════════════ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.step{padding:var(--s7) var(--s5) var(--s7) 0;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:0}
.step::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:0;background:var(--p1);transition:width var(--d-slow) var(--e)}
.step.in::before{width:100%}
.step:nth-child(2)::before{transition-delay:.12s}
.step:nth-child(3)::before{transition-delay:.24s}
.step:nth-child(4)::before{transition-delay:.36s}
.step-n{display:block;font-family:var(--f-head);font-weight:600;font-size:2.5rem;letter-spacing:-.05em;color:var(--line-hi);line-height:1;margin-bottom:var(--s5);transition:color var(--d) var(--e)}
.step:hover .step-n{color:var(--p1)}
.step h3{margin-bottom:var(--s3);font-size:1.125rem}
.step p{font-size:var(--t-sm);margin:0}

/* ═══════════════════ QUOTES ═══════════════════ */
.quote{background:var(--p8);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);height:100%;display:flex;flex-direction:column;transition:border-color var(--d) var(--e),transform var(--d) var(--e)}
.quote:hover{border-color:var(--a24);transform:translateY(-4px)}
/* padding and border are stated rather than left to the browser default: on
   WordPress, Kadence's blockquote{padding-left:1em;border-left:4px} would
   otherwise narrow the card and re-wrap the quote. */
.quote blockquote{margin:0 0 var(--s5);padding:0;border:0;font-family:var(--f-head);font-size:1.0625rem;font-weight:400;line-height:1.52;color:var(--p3);letter-spacing:-.015em}
.quote-by{display:flex;align-items:center;gap:var(--s3);margin-top:auto;padding-top:var(--s5);border-top:1px solid var(--line)}
.av{width:40px;height:40px;border-radius:50%;background:var(--p9);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--f-head);font-size:var(--t-xs);color:var(--p6);flex:none;overflow:hidden}
.av svg{width:19px;height:19px}
.av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.quote-by .n{display:block;font-family:var(--f-head);font-size:var(--t-sm);color:var(--p3);font-weight:500;line-height:1.3}
.quote-by .r{display:block;font-size:var(--t-xs);color:var(--p6)}
.tag-todo{display:inline-flex;align-items:center;gap:var(--s2);margin-bottom:var(--s4);font-family:var(--f-head);font-size:.625rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--p15);background:rgba(232,179,61,.08);border:1px solid rgba(232,179,61,.26);padding:var(--s1) var(--s3);border-radius:var(--r-xs)}

/* ═══════════════════ FAQ ═══════════════════ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:var(--s5);padding:var(--s5) 0;font-family:var(--f-head);font-size:1.0625rem;font-weight:500;color:var(--p3);letter-spacing:-.018em;transition:color var(--d-fast) var(--e)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--p1)}
.faq summary .qn{flex:none;width:34px;font-size:var(--t-label);letter-spacing:.12em;color:var(--p6);padding-top:5px}
.faq summary .qt{flex:1}
.faq summary .qi{flex:none;width:16px;height:16px;position:relative;margin-top:6px}
.faq summary .qi::before,.faq summary .qi::after{content:"";position:absolute;background:var(--p5);transition:transform var(--d) var(--e),background var(--d-fast)}
.faq summary .qi::before{left:0;right:0;top:7.5px;height:1.5px}
.faq summary .qi::after{top:0;bottom:0;left:7.5px;width:1.5px}
.faq details[open] summary{color:var(--p1)}
.faq details[open] summary .qi::after{transform:rotate(90deg)}
.faq details[open] summary .qi::before,.faq details[open] summary .qi::after{background:var(--p1)}
.faq-a{padding:0 0 var(--s6) calc(34px + var(--s5));max-width:68ch;font-size:var(--t-sm)}

/* ═══════════════════ FORM ═══════════════════ */
.form{background:var(--p8);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(var(--s6),3.4vw,var(--s8))}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5)}
.f{margin-bottom:var(--s5)}
.f label{display:block;font-family:var(--f-head);font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--p6);margin-bottom:var(--s2)}
.f input,.f select,.f textarea{width:100%;font-family:var(--f-body);font-size:1rem;color:var(--p3);background:var(--p9);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3) var(--s4);transition:border-color var(--d-fast),box-shadow var(--d-fast)}
.f textarea{min-height:120px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:var(--p6)}
.f select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366736E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--s4) center;background-size:16px;padding-right:var(--s8)}
.f select option{background:var(--p9);color:var(--p3)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--p1);box-shadow:0 0 0 3px var(--a12)}
.f-note{font-size:var(--t-xs);color:var(--p6);text-align:center;margin-top:var(--s4)}

/* ═══════════════════ CONTACT ROWS ═══════════════════ */
.crow{display:flex;align-items:center;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line);transition:padding-left var(--d) var(--e)}
.crow:first-child{border-top:1px solid var(--line)}
.crow:hover{padding-left:var(--s3)}
.crow .cl{flex:none;width:96px;font-family:var(--f-head);font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--p6)}
.crow .cv{font-family:var(--f-head);font-size:1.0625rem;font-weight:500;color:var(--p3);letter-spacing:-.018em;transition:color var(--d-fast)}
.crow:hover .cv{color:var(--p1)}
.crow .ca{margin-left:auto;color:var(--p6);transition:transform var(--d) var(--e),color var(--d-fast)}
.crow .ca svg{width:15px;height:15px;display:block}
.crow:hover .ca{color:var(--p1);transform:translate(3px,-3px)}

/* ═══════════════════ CTA BAND ═══════════════════ */
.cta{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--p8);padding:clamp(var(--s8),6vw,var(--s11)) clamp(var(--s6),5vw,var(--s10));text-align:center}
.cta::before{content:"";position:absolute;left:50%;bottom:-40%;width:min(720px,120%);aspect-ratio:1;translate:-50% 0;background:radial-gradient(circle,var(--a12),transparent 62%);pointer-events:none}
.cta>*{position:relative}
.cta h2{margin-bottom:var(--s5)}
.cta p{max-width:48ch;margin-inline:auto;margin-bottom:var(--s7)}
.cta .btn-row{justify-content:center}

/* ═══════════════════ FOOTER ═══════════════════ */
.ftr{border-top:1px solid var(--line);background:var(--p8);padding-top:var(--s10)}
.ftr-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gut);padding-bottom:var(--s9)}
.ftr-brand{grid-column:span 5}
.ftr-cols{grid-column:7/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.ftr h4{font-family:var(--f-head);font-size:.625rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--p6);margin:0 0 var(--s5)}
.ftr-word{font-family:var(--f-head);font-size:clamp(1.875rem,1.4rem + 2.4vw,3.25rem);font-weight:600;letter-spacing:-.04em;color:var(--p3);line-height:1.04;margin-bottom:var(--s5)}
.ftr p{font-size:var(--t-sm);max-width:36ch}
.ftr-links li+li{margin-top:var(--s3)}
.ftr-links a{font-size:var(--t-sm);color:var(--p5);transition:color var(--d-fast)}
.ftr-links a:hover{color:var(--p1)}
.soc{display:flex;gap:var(--s2);margin-top:var(--s6)}
.soc a{width:42px;height:42px;border:1px solid var(--line);border-radius:var(--r-sm);display:grid;place-items:center;color:var(--p5);transition:all var(--d) var(--e)}
.soc a:hover{background:var(--p1);color:var(--on-accent);border-color:var(--p1);transform:translateY(-3px)}
.soc svg{width:17px;height:17px}
.ftr-btm{border-top:1px solid var(--line);padding-block:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;font-family:var(--f-head);font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--p6)}

/* ═══════════════════ MOBILE DOCK ═══════════════════ */
.dock{display:none;position:fixed;inset:auto 0 0;z-index:95;background:rgba(8,10,10,.95);backdrop-filter:blur(16px);border-top:1px solid var(--line);padding:var(--s3) var(--gut) calc(var(--s3) + env(safe-area-inset-bottom));gap:var(--s2)}
.dock .btn{flex:1}

/* ═══════════════════ REVEAL ═══════════════════ */
.rv{transition:opacity var(--d-slow) var(--e),transform var(--d-slow) var(--e)}
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none}
.js .intro__name .ln>span{transform:translateY(103%)}
.js .intro.in .intro__name .ln>span{transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* ═══════════════════ RESPONSIVE ═══════════════════ */
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .nums{grid-template-columns:repeat(2,1fr)}
  .work-fig,.work-row:nth-child(even) .work-fig{grid-column:span 6;order:0}
  .work-info,.work-row:nth-child(even) .work-info{grid-column:8/-1;order:0}
}
@media (max-width:980px){
  .nav,.hdr-cta{display:none}
  .burger{display:block}
  .hdr.stuck .hdr-in{height:var(--s10)}
  .dock{display:flex}
  body{padding-bottom:76px}
  .col-5,.col-6,.col-7,.col-8,.start-6,.start-7,.start-8{grid-column:1/-1}
  .split{grid-template-columns:1fr;gap:var(--s9)}
  .figure-panel{justify-self:center;max-width:360px;order:-1}
  .work-row{grid-template-columns:1fr;gap:var(--s6);padding-block:var(--s8)}
  .work-fig,.work-info,.work-row:nth-child(even) .work-fig,.work-row:nth-child(even) .work-info{grid-column:1/-1}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2){border-right:0}
  .step:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .ftr-grid{grid-template-columns:1fr;gap:var(--s8)}
  .ftr-brand,.ftr-cols{grid-column:1/-1}
}
@media (max-width:680px){
  .svc-grid{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr}
  .ftr-cols{grid-template-columns:1fr;gap:var(--s7)}
  .faq summary{gap:var(--s4)}
  .faq summary .qn{width:26px}
  .faq-a{padding-left:calc(26px + var(--s4))}
  .crow{flex-wrap:wrap;gap:var(--s1) var(--s4)}
  .crow .cl{width:auto}
  .btn{width:100%}
  .dock .btn{width:auto}
  /* orbit tightens so the nodes stay clear of the figure */
  .orbit{width:min(420px,90vw)}
  .orbit__figure{width:60%}
  .tech{width:40px;height:40px}
  .orbit__ring--1{width:62%;height:62%}
}
@media (max-width:460px){
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .step:last-child{border-bottom:0}
  .nums{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .rv{opacity:1;transform:none}
  .js .intro__name .ln>span{transform:none}
}


/* ── utilities generated from the mockup's inline styles ── */
.u1{margin:0}
.u2{align-items:center}
.u3{margin:var(--s5) 0}
.u4{margin-top:var(--s6)}
.u5{margin-top:var(--s10)}
.u6{margin-top:var(--s5)}
.u7{margin-bottom:var(--s5)}
.u8{padding-top:0}
.u9{align-items:start}
.u10{margin-bottom:var(--s6)}
.u11{margin-bottom:0}
.u12{display:flex;gap:var(--s3)}
.u13{padding-block:0}
.u14{padding-block:var(--s9);border-bottom:1px solid var(--line);align-items:start}
.u15{margin-bottom:var(--s4)}
.u16{font-size:var(--t-h2);margin-bottom:var(--s3)}
.u17{padding-block:var(--s9);align-items:start}
.u18{color:var(--p6);margin-top:var(--s4)}
.u19{margin-top:var(--s8);display:inline-flex}
.u20{margin-top:var(--s8)}
.u21{margin-bottom:var(--s6);display:inline-flex}
.u22{width:100%}
.u23{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line)}

/* ══ Kadence chrome off — the mockup supplies its own header and footer ══ */
#masthead, .site-header, #colophon, .site-footer,
.entry-hero, .page-hero-section, .entry-header.page-title { display: none !important; }

/* The off-canvas drawers live outside #masthead, so hiding the header misses
   them. #mobile-drawer was rendering 151px tall below the footer. */
#mobile-drawer, #search-drawer, .popup-drawer,
#mobile-site-navigation, .mobile-navigation { display: none !important; }

#wrapper, #inner-wrap, #primary, .content-area, .content-container,
.site-main, .content-wrap, article.entry, .entry-content-wrap, .entry-content {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body, #wrapper { background: var(--p7) !important; }
.entry-content > * { max-width: none; }