/* ============================================================
   MakeFriendly — makefriendly.co.za
   Design system built on the supplied MF identity:
   blue → turquoise gradient + the artboard/annotation language
   of the original logo lockup (guides, handles, technical labels).
   ============================================================ */

@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets/fonts/inter-latin-ext-var.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --ink:#08090B;
  --ink-2:#0E1116;
  --paper:#fff;
  --off:#F3F4F6;
  --blue:#0C4BC7;
  --cyan:#26BDB8;
  --accent:#FF6B35;      /* complementary warm — selection + contact bubble only */
  --accent-ink:#2B0F03;
  --wa:#25D366;          /* WhatsApp brand green — used only on the chat button */
  --grad:linear-gradient(100deg,var(--blue) 0%,#1E8FC0 55%,var(--cyan) 100%);

  --tx:#08090B;
  --tx-mut:#5C636D;
  --tx-inv:#fff;
  --tx-inv-mut:rgba(255,255,255,.60);
  --line:rgba(8,9,11,.12);
  --line-inv:rgba(255,255,255,.14);

  --wrap:1400px;
  --gut:clamp(1.25rem,5vw,4.5rem);
  --pad-y:clamp(5rem,10vw,9.5rem);

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--tx);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .22vw,1.125rem);
  line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss03','cv05','cv11';
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--accent-ink)}
::-moz-selection{background:var(--accent);color:var(--accent-ink)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--pad-y);position:relative}
.section--paper{background:var(--paper)}
.section--off{background:var(--off)}
.section--ink{background:var(--ink);color:var(--tx-inv)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.85rem 1.25rem;font-size:.875rem}
.skip:focus{left:.5rem;top:.5rem}

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

/* ---------- reveals ---------- */
.js .reveal{opacity:0;transform:translate3d(0,20px,0);
  transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- shared bits ---------- */
.tag{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-mut);display:flex;align-items:center;gap:.75rem;margin-bottom:clamp(1.75rem,4vw,3rem)}
.tag span{display:inline-flex;align-items:center;justify-content:center;min-width:2.4em;padding:.3em .5em;
  border-radius:3px;background:var(--grad);color:#fff;font-size:.625rem;letter-spacing:.1em}
.tag--inv{color:var(--tx-inv-mut)}

.head{margin-bottom:clamp(2.5rem,6vw,5rem)}
.head__h{font-size:clamp(2rem,5.2vw,4rem);font-weight:680;letter-spacing:-.035em;line-height:1.02;max-width:16ch}
.head__h em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sr-head{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.rule{flex:1;height:1px;background:currentColor;opacity:.22;max-width:8rem}
.rule--sm{max-width:2.5rem}

.btn{display:inline-flex;align-items:center;gap:.6em;padding:1rem 1.6rem;border-radius:999px;
  font-size:.9375rem;font-weight:560;letter-spacing:-.01em;line-height:1;
  transition:transform .4s var(--ease),background-color .35s,color .35s,border-color .35s,box-shadow .4s}
.btn span{transition:transform .4s var(--ease)}
.btn--fill{background:var(--grad);color:#fff;box-shadow:0 8px 30px -10px rgba(12,75,199,.75)}
.btn--fill:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(12,75,199,.9)}
.btn--fill:hover span{transform:translateX(4px)}
.btn--ghost{border:1px solid var(--line-inv);color:var(--tx-inv)}
.btn--ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn--ghost:hover span{transform:translateY(3px)}
.btn--solid{background:#fff;color:var(--ink);font-weight:600}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(0,0,0,.5)}
.btn--solid:hover span{transform:translateX(4px)}

/* ---------- background furniture ---------- */
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.grid{position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,.055) 0 1px,transparent 1px 100px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.055) 0 1px,transparent 1px 100px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 40%,#000 30%,transparent 78%);
}
.grid--lite{background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,.09) 0 1px,transparent 1px 90px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,.09) 0 1px,transparent 1px 90px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;inset:0 0 auto;z-index:100;transition:background-color .45s,backdrop-filter .45s,border-color .45s;
  border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(8,9,11,.94);backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom-color:var(--line-inv)}
.nav__in{max-width:var(--wrap);margin-inline:auto;padding:1.05rem var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav__brand{position:relative;display:inline-flex;align-items:center;height:40px;width:40px;color:#fff}
.nav__mark{position:absolute;left:0;width:40px;height:auto;fill:#fff;transition:transform .5s var(--ease),opacity .4s var(--ease)}
.nav__logotype{display:none;position:absolute;left:0;opacity:0}
.nav__logotype img{display:block;width:139px;height:22px;max-width:none}
.nav__brand:hover .nav__mark{transform:translateY(-1px) scale(1.04)}
.nav__links{display:none;align-items:center;gap:2rem}
.nav__links a{font-size:.875rem;font-weight:480;color:rgba(255,255,255,.78);position:relative;padding-block:.25rem;transition:color .3s}
.nav__links a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--grad);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease)}
.nav__links a:hover{color:#fff}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__links .nav__cta{padding:.55rem 1.05rem;border:1px solid var(--line-inv);border-radius:999px;color:#fff}
.nav__links .nav__cta::after{display:none}
.nav__links .nav__cta:hover{background:#fff;color:var(--ink);border-color:#fff}

.nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;
  background:none;border:0;cursor:pointer;color:#fff}
.nav__bars{display:block;width:22px}
.nav__bars i{display:block;height:1.5px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
.nav__bars i+i{margin-top:6px}
.nav.is-open .nav__bars i:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav.is-open .nav__bars i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.menu{background:var(--ink);border-top:1px solid var(--line-inv);overflow:hidden;display:flex;flex-direction:column;min-height:calc(100svh - 4.25rem)}
.menu[hidden]{display:none}
.menu__nav{display:flex;flex-direction:column;padding:.5rem var(--gut) 0}
.menu__nav a{display:flex;align-items:baseline;gap:1rem;padding:1.1rem 0;color:#fff;
  font-size:1.75rem;font-weight:600;letter-spacing:-.03em;border-bottom:1px solid var(--line-inv)}
.menu__i{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--cyan)}
.menu__foot{margin-top:auto;display:flex;justify-content:space-between;padding:1.25rem var(--gut) 1.75rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--tx-inv-mut)}

@media (min-width:900px){
  .nav__brand{transition:width .65s var(--ease)}
  .nav__logotype{display:block;transition:opacity .5s var(--ease) .12s}
  .nav.is-stuck .nav__brand{width:139px}
  .nav.is-stuck .nav__mark{opacity:0}
  .nav.is-stuck .nav__logotype{opacity:1}
  .nav__links{display:flex}
  .nav__toggle{display:none}
  .menu{display:none!important}
}

/* ============================================================
   01 HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;background:var(--ink);color:var(--tx-inv);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(8rem,18vh,11rem) clamp(4.5rem,10vh,7rem);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.blob--a{width:min(78vw,900px);aspect-ratio:1;left:-18%;top:-22%;
  background:radial-gradient(circle,rgba(12,75,199,.95),transparent 66%);animation:drift1 26s var(--ease) infinite alternate}
.blob--b{width:min(70vw,820px);aspect-ratio:1;right:-14%;bottom:-26%;
  background:radial-gradient(circle,rgba(38,189,184,.72),transparent 66%);animation:drift2 32s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(9%,12%,0) scale(1.14)}}
@keyframes drift2{to{transform:translate3d(-11%,-9%,0) scale(1.1)}}

.hero__crop{position:absolute;right:-7%;top:50%;width:min(66%,880px);height:auto;
  transform:translate3d(0,-50%,0);fill:url(#mfGradSoft);opacity:.17;
  will-change:transform}

.hero__in{position:relative}
.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx-inv-mut);margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.eyebrow__b{color:#fff}
.eyebrow sup{font-size:.7em;top:-.4em}

.hero__h{font-size:clamp(3.1rem,11.2vw,10rem);font-weight:700;letter-spacing:-.045em;line-height:.9;
  text-wrap:balance;margin-bottom:clamp(2.25rem,5vw,3.5rem)}
.hero__h .l{display:block}
.hero__h em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.hero__tail{display:grid;gap:clamp(1.75rem,4vw,2.5rem)}
.hero__sub{max-width:46ch;color:rgba(255,255,255,.72);font-size:clamp(1.0625rem,1.05vw + .8rem,1.375rem);line-height:1.5;letter-spacing:-.012em}
.hero__acts{display:flex;flex-wrap:wrap;gap:.75rem}

.hero__note{position:absolute;left:var(--gut);bottom:clamp(1.5rem,4vh,2.5rem);
  display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.625rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx-inv-mut)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--grad);animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

@media (min-width:900px){
  .hero__tail{grid-template-columns:1fr auto;align-items:end;gap:3rem}
  .hero__note{left:auto;right:var(--gut)}
}

/* ============================================================
   02 POSITIONING
   ============================================================ */
.pos__h{font-size:clamp(1.9rem,5.4vw,4.5rem);font-weight:680;letter-spacing:-.04em;line-height:1.03;
  max-width:20ch;margin-bottom:clamp(2.5rem,6vw,4.5rem);text-wrap:balance}
.pos__h em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pos__h2{display:block}
.br{display:none}
@media (min-width:760px){.br{display:block}}

.pos__body{display:grid;gap:1.4rem;max-width:58ch;margin-left:auto;
  font-size:clamp(1.0625rem,.4vw + .95rem,1.1875rem);color:var(--tx-mut);line-height:1.65}
.pos__body em{font-style:italic;color:var(--tx)}
.pos__lead{font-size:clamp(1.25rem,1.6vw + .8rem,1.6rem);font-weight:560;letter-spacing:-.025em;
  line-height:1.3;color:var(--tx)}
.pos__pull{position:relative;margin-top:clamp(1rem,2.5vw,1.75rem);padding-top:clamp(1.5rem,3vw,2.25rem);
  font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:660;letter-spacing:-.035em;line-height:1.1;color:var(--tx)}
.pos__pull::before{content:'';position:absolute;top:0;left:0;width:56px;height:3px;border-radius:2px;
  background:var(--grad)}
.pos__close{display:grid;gap:.15rem;margin-top:.5rem;padding-top:1.35rem;border-top:1px solid var(--line)}
.pos__close strong{color:var(--tx);font-weight:620;letter-spacing:-.015em}
.pos__close span{color:var(--tx-mut)}

/* ============================================================
   03 WHAT WE DO
   ============================================================ */
.wwd__grid{display:grid;border-top:1px solid var(--line)}
.wwd__i{position:relative;padding:clamp(1.75rem,3.5vw,2.75rem) 0;border-bottom:1px solid var(--line);
  display:grid;gap:.5rem 2rem;transition:padding-left .5s var(--ease)}
.wwd__n{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;color:var(--tx-mut);
  transition:color .4s}
.wwd__i h3{font-size:clamp(1.65rem,3.4vw,2.6rem);font-weight:650;letter-spacing:-.035em;line-height:1.05}
.wwd__i p{color:var(--tx-mut);max-width:52ch;font-size:clamp(1rem,.3vw + .92rem,1.125rem)}
.wwd__i::after{content:'';position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:var(--grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
@media (hover:hover){
  .wwd__i:hover{padding-left:1.25rem}
  .wwd__i:hover::after{transform:scaleX(1)}
  .wwd__i:hover .wwd__n{color:var(--blue)}
}
@media (min-width:860px){
  .wwd__i{grid-template-columns:5rem minmax(0,1fr) minmax(0,1.15fr);align-items:baseline}
  .wwd__n{padding-top:.5rem}
}

/* ============================================================
   04 PROBLEMS
   ============================================================ */
.probs__list{border-top:1px solid var(--line-inv)}
.prob{position:relative;padding:clamp(1.75rem,3.6vw,2.75rem) 0;border-bottom:1px solid var(--line-inv);
  display:grid;gap:.85rem 3rem;transition:padding-left .5s var(--ease)}
.prob__t{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem .9rem;
  font-size:clamp(1.35rem,2.7vw,2.15rem);font-weight:640;letter-spacing:-.038em;line-height:1.05}
.prob__from{color:rgba(255,255,255,.42);transition:color .45s}
.prob__to{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.prob__arrow{display:inline-flex;align-items:center;gap:.4rem;color:rgba(255,255,255,.42);
  font-size:.6em;transition:color .45s}
.prob__line{display:block;width:clamp(1.5rem,4vw,3.5rem);height:1px;background:currentColor;
  transform-origin:0 50%;transition:transform .55s var(--ease),background-color .45s}
.prob__d{color:var(--tx-inv-mut);max-width:52ch;font-size:clamp(1rem,.3vw + .92rem,1.125rem)}
@media (hover:hover){
  .prob:hover{padding-left:1.25rem}
  .prob:hover .prob__from{color:rgba(255,255,255,.7)}
  .prob:hover .prob__arrow{color:var(--cyan)}
  .prob:hover .prob__line{transform:scaleX(1.5)}
}
@media (min-width:900px){
  .prob{grid-template-columns:76px minmax(0,1.75fr) minmax(0,.9fr);align-items:center;gap:.85rem 2rem}
  .prob__d{text-align:right;margin-left:auto}
}

.prob__viz{display:block;width:76px}
.prob__viz svg{width:76px;height:52px;overflow:visible}
.prob__viz [data-draw]{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .85s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.prob__viz [data-pop]{transform:scale(0);transform-box:fill-box;transform-origin:50% 50%;
  transition:transform .5s var(--ease);transition-delay:calc(.3s + var(--i,0) * 90ms)}
.prob.is-in .prob__viz [data-draw],html:not(.js) .prob__viz [data-draw]{stroke-dashoffset:0}
.prob.is-in .prob__viz [data-pop],html:not(.js) .prob__viz [data-pop]{transform:none}

/* ============================================================
   05 CLIENTS
   ============================================================ */
.clients{overflow:hidden}
.clients__marquee{display:grid;gap:clamp(1.25rem,2.5vw,2rem);user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.clients__row{display:flex;width:max-content;animation:slide 64s linear infinite}
.clients__row--rev{animation-direction:reverse;animation-duration:78s}
.clients__t{display:flex;align-items:center;flex-shrink:0}
.clients__i{display:flex;align-items:center;justify-content:center;height:40px;
  padding-inline:clamp(1.5rem,3.2vw,3.25rem)}
.clients__i img{height:30px;width:auto;max-width:170px;object-fit:contain;
  opacity:.42;transition:opacity .45s var(--ease)}
.clients__w{white-space:nowrap;font-size:clamp(1.0625rem,1.5vw,1.375rem);font-weight:620;
  letter-spacing:-.025em;color:var(--tx);opacity:.38;transition:opacity .45s var(--ease)}
@media (hover:hover){
  .clients__marquee:hover .clients__row{animation-play-state:paused}
  .clients__i:hover img,.clients__i:hover .clients__w{opacity:1}
}

/* ============================================================
   05 HOW WE WORK
   ============================================================ */
.how__h{font-size:clamp(1.9rem,5vw,4.25rem);font-weight:680;letter-spacing:-.04em;line-height:1.04;max-width:18ch}
.how__q{display:block;color:var(--tx-mut)}
.how__to{display:block}
.how__h em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

.steps{position:relative;display:grid;gap:0;margin-bottom:clamp(2.5rem,5vw,4rem)}
.step{position:relative;padding:0 0 2rem 2.75rem}
.step:last-child{padding-bottom:0}
.step__n{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;color:var(--blue);display:block;margin-bottom:.45rem}
.step h3{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:640;letter-spacing:-.03em;line-height:1.1;margin-bottom:.2rem}
.step p{color:var(--tx-mut);font-size:1rem}
/* mobile spine */
.step::before{content:'';position:absolute;left:0;top:.15rem;width:11px;height:11px;border-radius:50%;
  background:var(--grad);z-index:1}
.step::after{content:'';position:absolute;left:5px;top:.15rem;width:1px;height:100%;background:var(--line)}
.step:last-child::after{display:none}

@media (min-width:820px){
  .steps{grid-template-columns:repeat(5,1fr);gap:1.5rem;padding-top:2.5rem}
  .steps::before{content:'';position:absolute;left:0;top:calc(2.5rem + 5px);width:100%;height:1px;background:var(--line)}
  .steps::after{content:'';position:absolute;left:0;top:calc(2.5rem + 5px);width:100%;height:1px;background:var(--grad);
    transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease) .15s}
  .steps.is-in::after{transform:scaleX(1)}
  .step{padding:2.25rem 1.5rem 0 0}
  .step::before{left:0;top:0}
  .step::after{display:none}
}

.how__note{max-width:58ch;margin-left:auto;color:var(--tx-mut);font-size:clamp(1.0625rem,.4vw + .95rem,1.25rem);
  padding-top:clamp(1.75rem,3vw,2.5rem);border-top:1px solid var(--line)}

/* ============================================================
   06 CAPABILITIES — kinetic type
   ============================================================ */
.caps{overflow:hidden;padding-bottom:calc(var(--pad-y) - 1rem)}
.marquee{display:grid;gap:clamp(.35rem,1vw,.75rem);user-select:none}
.marquee__row{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee__row--rev{animation-direction:reverse;animation-duration:56s}
.marquee__t{display:flex;align-items:center;flex-shrink:0}
.marquee__t span{display:inline-flex;align-items:center;white-space:nowrap;
  font-size:clamp(2rem,6.5vw,5.5rem);font-weight:660;letter-spacing:-.04em;line-height:1.12;
  padding-inline:clamp(1rem,2.5vw,2.25rem);color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.34)}
.marquee__t span::after{content:'';width:clamp(6px,1vw,10px);height:clamp(6px,1vw,10px);border-radius:50%;
  background:var(--grad);margin-left:clamp(1rem,2.5vw,2.25rem);flex-shrink:0}
.marquee__row:nth-child(2) .marquee__t span{-webkit-text-stroke:0;color:#fff}
@keyframes slide{to{transform:translate3d(-50%,0,0)}}
@media (hover:hover){.marquee:hover .marquee__row{animation-play-state:paused}}

/* ============================================================
   07 PHILOSOPHY
   ============================================================ */
.phil__h{font-size:clamp(2.1rem,6.4vw,5.5rem);font-weight:700;letter-spacing:-.045em;line-height:.98;
  max-width:14ch;margin-bottom:clamp(2.5rem,6vw,4.5rem);text-wrap:balance}
.phil__h em{display:block;width:fit-content;font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.phil__body{display:grid;gap:1.4rem;max-width:58ch;margin-left:auto;color:var(--tx-mut);
  font-size:clamp(1.0625rem,.4vw + .95rem,1.25rem)}

/* ============================================================
   08 EXPERIENCE
   ============================================================ */
.exp__intro{display:grid;gap:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--line);margin-bottom:clamp(2.5rem,5vw,4rem)}
.exp__portrait{margin:0;max-width:min(420px,84%)}
.exp__portrait picture{display:block;overflow:hidden;border-radius:8px;background:#DFE2E6}
.exp__portrait img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.exp__portrait figcaption{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:1rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mut)}
.exp__portrait figcaption span:first-child{color:var(--tx)}
.exp__who{display:grid;gap:clamp(2rem,4vw,3rem);align-content:center}
.exp__said{font-size:clamp(1.125rem,1.2vw + .85rem,1.5rem);font-weight:500;letter-spacing:-.02em;
  line-height:1.45;color:var(--tx);max-width:34ch}
.exp__stats{display:grid;gap:clamp(2rem,5vw,3rem)}
.stat__n{display:inline-block;font-size:clamp(4rem,13vw,10rem);font-weight:700;letter-spacing:-.055em;line-height:.85;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat__n sup{font-size:.4em;top:-.9em}
.stat__n--sm{font-size:clamp(2.5rem,7vw,5rem);letter-spacing:-.045em}
.stat__l{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-mut);margin-top:1rem;max-width:22ch}
@media (min-width:760px){.exp__stats{grid-template-columns:1fr 1fr;align-items:end}}
@media (min-width:900px){.exp__intro{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(3rem,6vw,5rem);align-items:center}}

.skills{display:grid;gap:0 clamp(1.5rem,3vw,3rem);margin-top:.25rem}
.skills li{position:relative;padding:.85rem 0 .85rem 1.25rem;border-top:1px solid var(--line);
  font-size:clamp(.9375rem,.3vw + .88rem,1.0625rem);font-weight:520;letter-spacing:-.015em;color:var(--tx)}
.skills li::before{content:'';position:absolute;left:0;top:1.45em;width:5px;height:5px;border-radius:50%;
  background:var(--grad)}
@media (min-width:640px){.skills{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.skills{grid-template-columns:repeat(3,1fr)}}
.exp__sect + .exp__sect{margin-top:clamp(2.5rem,5vw,3.5rem)}

.exp__lead{font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-mut);margin-bottom:1.5rem}
.exp__list{display:flex;flex-wrap:wrap;gap:.5rem .5rem}
.exp__list li{font-size:clamp(1rem,2vw,1.375rem);font-weight:560;letter-spacing:-.025em;
  padding:.5rem 1.05rem;border:1px solid var(--line);border-radius:999px;
  transition:border-color .4s,color .4s,transform .4s var(--ease)}
@media (hover:hover){.exp__list li:hover{border-color:var(--ink);color:#fff;background:var(--ink);transform:translateY(-2px)}}

/* ============================================================
   10 FAQ
   ============================================================ */
.faq__list{border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__i summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:2rem;
  justify-content:space-between;padding:clamp(1.25rem,2.4vw,1.75rem) 0;
  transition:color .3s}
.faq__i summary::-webkit-details-marker{display:none}
.faq__q{font-size:clamp(1.0625rem,1.5vw,1.375rem);font-weight:600;letter-spacing:-.025em;
  line-height:1.3;max-width:52ch}
.faq__ico{position:relative;flex:none;width:20px;height:20px;margin-top:.15rem}
.faq__ico::before,.faq__ico::after{content:'';position:absolute;top:50%;left:50%;
  width:14px;height:2px;border-radius:2px;background:var(--grad);
  transform:translate(-50%,-50%);transition:transform .4s var(--ease),opacity .3s}
.faq__ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__i[open] .faq__ico::after{transform:translate(-50%,-50%) rotate(0deg);opacity:0}
.faq__a{padding:0 0 clamp(1.25rem,2.4vw,1.75rem);max-width:62ch}
.faq__a p{color:var(--tx-mut);font-size:clamp(1rem,.3vw + .92rem,1.0625rem);line-height:1.62}
@media (hover:hover){.faq__i summary:hover .faq__q{color:var(--blue)}}

/* ============================================================
   09 CTA
   ============================================================ */
.cta{position:relative;background:var(--ink);color:var(--tx-inv);overflow:hidden;isolation:isolate;
  padding-block:clamp(6rem,14vw,11rem);text-align:center}
.cta__bg{position:absolute;inset:0;z-index:-1;background:var(--grad)}
.blob--c{width:min(90vw,1000px);aspect-ratio:1;left:-12%;top:-40%;
  background:radial-gradient(circle,rgba(12,75,199,.9),transparent 62%);animation:drift1 30s var(--ease) infinite alternate}
.blob--d{width:min(80vw,900px);aspect-ratio:1;right:-14%;bottom:-42%;
  background:radial-gradient(circle,rgba(38,189,184,.85),transparent 62%);animation:drift2 36s var(--ease) infinite alternate}
.cta__in{position:relative;display:grid;justify-items:center;gap:clamp(1.5rem,3vw,2.25rem)}
.cta .tag{color:rgba(255,255,255,.8)}
.cta .tag span{background:rgba(255,255,255,.18);backdrop-filter:blur(4px)}
.cta__h{font-size:clamp(2.4rem,8.5vw,7rem);font-weight:700;letter-spacing:-.045em;line-height:.95;
  max-width:13ch;text-wrap:balance}
.cta__p{font-size:clamp(1.0625rem,1vw + .85rem,1.375rem);color:rgba(255,255,255,.86);max-width:38ch;line-height:1.5}
.cta__acts{display:flex;flex-direction:column;align-items:center;gap:1.25rem;margin-top:.5rem}

/* ============================================================
   10 FOOTER
   ============================================================ */
.foot{background:var(--ink);color:var(--tx-inv);padding-block:clamp(3.5rem,7vw,5.5rem) 2.5rem}
.foot__in{display:grid;gap:clamp(2.25rem,5vw,3rem)}
.foot__base{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.75rem 1.5rem;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.25rem;
  border-top:1px solid var(--line-inv)}
.foot__legal{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.foot__sep{color:rgba(255,255,255,.3)}
.foot__wordmark{width:min(200px,64%);height:auto;margin-bottom:1.5rem}
.foot__desc{color:var(--tx-inv-mut);font-size:.9375rem;margin-top:.15rem}
.foot__est{font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tx-inv-mut)}
.foot__est{margin-top:1rem}

.foot__meta{display:grid;gap:.45rem;font-size:.9375rem;color:var(--tx-inv-mut)}
.foot__heart{margin-right:.45rem;font-size:.9em;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;line-height:1}
.foot__meta a{border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.foot__meta a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.foot__bot{display:flex;flex-wrap:wrap;gap:1.25rem;margin:0;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase}
@media (min-width:860px){
  .foot__in{grid-template-columns:1.4fr 1fr;gap:2rem}
  .foot__meta{justify-items:end;text-align:right}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .js .reveal{opacity:1!important;transform:none!important}
  .marquee__row{animation:none;transform:none}
  .steps::after{transform:scaleX(1)!important}
  .prob__viz [data-draw]{stroke-dashoffset:0!important}
  .prob__viz [data-pop]{transform:none!important}
  .blob{animation:none}
  .bubble{transition:opacity .001ms!important}
}

/* ---------- mobile refinements ---------- */
@media (max-width:759px){
  .eyebrow .rule{display:none}
  .eyebrow{gap:.5rem .9rem}
  .hero__acts{flex-direction:column;align-items:stretch}
  .hero__acts .btn{justify-content:center;padding-block:1.05rem}
  .hero__crop{opacity:.11}
  .nav__brand{min-height:44px}
  .cta__acts .btn{width:100%;justify-content:center}
}
.hero__bg::after,.cta__bg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27240%27%20height%3D%27240%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.55%27%2F%3E%3C%2Fsvg%3E");background-size:240px 240px;
  opacity:.13;mix-blend-mode:overlay}

/* ============================================================
   FLOATING CONTACT
   ============================================================ */
.bubble{position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
  display:inline-flex;align-items:center;padding:5px;border-radius:999px;
  background:var(--wa);
  box-shadow:0 10px 30px -10px rgba(37,211,102,.55);
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .4s}
.bubble.is-on{opacity:1;transform:none;pointer-events:auto}
.bubble__icon{width:52px;height:52px;flex:none;display:grid;place-items:center}
.bubble__icon svg{width:28px;height:28px;fill:var(--ink);display:block}

.bubble__label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;color:var(--ink);
  font-size:.9375rem;font-weight:560;letter-spacing:-.01em;
  transition:max-width .55s var(--ease),opacity .35s var(--ease),padding .55s var(--ease)}
@media (hover:hover){
  .bubble:hover{box-shadow:0 16px 40px -12px rgba(37,211,102,.75)}
  .bubble:hover .bubble__label{max-width:9rem;opacity:1;padding:0 1rem 0 .8rem}
}
.bubble:focus-visible .bubble__label{max-width:9rem;opacity:1;padding:0 1rem 0 .8rem}
@media (max-width:759px){.bubble__icon{width:46px;height:46px}.bubble__icon svg{width:25px;height:25px}}