/* ==================================================================
   Dynamatic AI — site stylesheet
   Light content on pale lavender; dark reserved for hero, contact
   and footer. Matches the proposal deck's theme.
   ================================================================== */

:root{
  /* surfaces */
  --paper:#FAF9FE;        /* page */
  --paper-2:#F3F0FB;      /* alternate band */
  --card:#FFFFFF;
  --night:#0B0A16;        /* hero, contact, footer */
  --edge:#2A2340;         /* borders on dark */
  --rule:#E9E4F6;         /* borders on light */
  --wash:#F1EBFE;         /* tinted callout */

  /* ink */
  --ink:#211B3F;          /* headings */
  --body:#3F3A52;         /* body copy */
  --muted:#6B6580;
  --dim:#8C86A0;

  /* brand */
  --purple:#7C3AED;
  --purple-d:#5B21B6;
  --violet:#8B5CF6;
  --lilac:#C4B5FD;

  --shadow:0 1px 3px rgba(33,27,63,.04), 0 8px 24px rgba(33,27,63,.06);
  --lift:0 6px 14px rgba(124,58,237,.10), 0 18px 40px rgba(124,58,237,.12);
  --max:1260px; --gut:40px; --r:12px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:var(--paper);color:var(--body);
     line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
h1,h2,h3,h4,.sora{font-family:Sora,system-ui,sans-serif;letter-spacing:-.025em;color:var(--ink)}
.kicker{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
        color:var(--purple)}
a{color:inherit}

/* ---------------- nav ---------------- */
nav{position:sticky;top:0;z-index:60;background:rgba(250,249,254,.92);
    backdrop-filter:blur(16px);border-bottom:1px solid var(--rule)}
.nav-in{max-width:var(--max);margin:0 auto;padding:14px var(--gut);display:flex;align-items:center;gap:40px}
.logo{display:flex;align-items:center;gap:11px;font-family:Sora;font-weight:800;font-size:18px;
      letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.logo img{width:34px;height:34px}
.nav-links{display:flex;gap:30px;margin-left:auto;align-items:center}
.nav-links a{color:var(--body);text-decoration:none;font-size:14.5px;font-weight:500;
             display:flex;align-items:center;gap:5px;transition:.16s}
.nav-links a:hover{color:var(--purple)}
.nav-links .chev{font-size:9px;opacity:.5}
.btn{display:inline-block;font-weight:600;font-size:14.5px;padding:11px 22px;border-radius:8px;
     text-decoration:none;transition:.18s;font-family:Inter;border:0;cursor:pointer}
.btn-p{background:var(--purple);color:#fff;box-shadow:0 4px 12px rgba(124,58,237,.24)}
.btn-p:hover{background:var(--purple-d)}
/* outline button: ink on paper by default, white on the dark bands */
.btn-o{border:1px solid var(--rule);color:var(--ink);background:var(--card)}
.btn-o:hover{border-color:var(--purple);color:var(--purple)}
.hero .btn-o,.phero .btn-o,.contact .btn-o{border-color:rgba(255,255,255,.34);
      color:#fff;background:transparent}
.hero .btn-o:hover,.phero .btn-o:hover,.contact .btn-o:hover{background:#fff;color:var(--ink)}
.btn-d{background:var(--ink);color:#fff}
.btn-d:hover{background:var(--purple)}

/* ---------------- dark heroes ---------------- */
.hero,.phero{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1000px 520px at 78% 6%,rgba(139,92,246,.30),transparent 62%),
    radial-gradient(680px 380px at 4% 96%,rgba(91,33,182,.34),transparent 64%),
    var(--night)}
.hero{padding:120px 0 100px}
.phero{padding:84px 0 70px}
.hero h1,.phero h1{color:#fff;font-weight:800;line-height:1.04}
.hero h1{font-size:clamp(42px,6vw,76px);max-width:16ch}
.phero h1{font-size:clamp(34px,4.6vw,58px);max-width:18ch}
.hero h1 span,.phero h1 span{color:var(--lilac)}
.hero .kicker,.phero .kicker{color:var(--lilac);margin-bottom:24px}
.hero p,.phero p{margin-top:24px;max-width:60ch;font-size:18.5px;line-height:1.66;color:#CFC9E0}
.hero .cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.hero .mark{position:absolute;right:-150px;top:-110px;width:660px;opacity:.10;pointer-events:none}
.phero .mark{position:absolute;right:-130px;top:-95px;width:520px;opacity:.09;pointer-events:none}
.crumb{font-size:13px;color:#9C95B4;margin-bottom:16px}
.crumb a{color:#9C95B4;text-decoration:none}
.crumb a:hover{color:var(--lilac)}

/* ---------------- credibility band ---------------- */
.trust{background:var(--paper-2);border-bottom:1px solid var(--rule);padding:30px 0}
.trust .kicker{color:var(--purple);margin-bottom:16px}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 12px}
.trust-row span{font-family:Sora;font-size:14px;font-weight:600;color:var(--ink);
                background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:8px 15px}
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:26px;
         margin-bottom:26px;border-bottom:1px solid var(--rule)}
/* when nothing follows it in the band, the separator has nothing to separate */
.statbar:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.sb{padding:20px 22px}
.sb b{font-family:Sora;display:block;font-size:40px;font-weight:800;line-height:1;
      color:var(--purple);letter-spacing:-.035em}
.sb span{display:block;margin-top:8px;color:var(--muted);font-size:13.5px;line-height:1.4}

/* ---------------- sections ---------------- */
section{padding:92px 0}
.light{background:var(--paper-2)}
.sec-head{max-width:64ch;margin-bottom:48px}
.sec-head .kicker{margin-bottom:14px}
h2{font-size:clamp(30px,3.7vw,46px);line-height:1.12;font-weight:700}
.sec-head h2{padding-bottom:16px;position:relative}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:3px;
                    background:var(--purple);border-radius:2px}
.sec-head p{margin-top:18px;font-size:17.5px;color:var(--muted);line-height:1.66}

/* every white card on the site */
.tcard,.ecard,.ai-card,.model,.member,.market,.pf,.out,.next div,.step,
.principles > div,.cw-col,.sb,.cat{background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--shadow)}

/* ---------------- triad ---------------- */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{padding:32px 28px;transition:.22s}
.tcard:hover{box-shadow:var(--lift);transform:translateY(-3px);border-color:var(--lilac)}
.tcard .n{font-family:Sora;font-size:13px;font-weight:800;color:var(--purple);letter-spacing:.06em}
.tcard h3{margin:16px 0 12px;font-size:23px;font-weight:700;line-height:1.2;color:var(--purple)}
.tcard p{color:var(--body);font-size:15.5px}
.tcard ul{margin-top:18px;list-style:none;border-top:1px solid var(--rule);padding-top:16px}
.tcard li{font-size:14px;color:var(--body);padding:5px 0 5px 18px;position:relative}
.tcard li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;
                  border-radius:50%;background:var(--purple)}

/* ---------------- deep points ---------------- */
.deep{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.deep h3{font-size:25px;font-weight:700;margin-bottom:14px;color:var(--purple)}
.deep p{color:var(--body);font-size:16px;line-height:1.7}
.deep-dark{background:var(--paper-2)}

/* ---------------- outcomes ---------------- */
.outcomes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.out{padding:32px 30px;transition:.2s}
.out:hover{box-shadow:var(--lift)}
.out .verb{font-family:Sora;font-size:12px;font-weight:800;letter-spacing:.12em;
           text-transform:uppercase;color:var(--purple)}
.out h3{font-family:Sora;font-size:25px;font-weight:700;line-height:1.16;margin:8px 0 14px}
.out .who{display:inline-block;font-size:12.5px;font-weight:600;color:var(--purple-d);
          background:var(--wash);padding:6px 12px;border-radius:20px;margin-bottom:14px}
.out p{color:var(--body);font-size:15.5px;line-height:1.65}
.out .res{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
          font-size:15px;font-weight:600;color:var(--ink)}

/* ---------------- products ---------------- */
.prod-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:52px}
.pf{padding:30px 28px;display:flex;flex-direction:column;transition:.2s}
.pf:hover{box-shadow:var(--lift);transform:translateY(-3px);border-color:var(--lilac)}
.pf .tag{font-family:Sora;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
         font-weight:800;color:var(--purple)}
.pf h3{font-family:Sora;font-size:22px;font-weight:700;margin:12px 0;line-height:1.2;color:var(--purple)}
.pf p{color:var(--body);font-size:15px;flex:1}
.pf .on{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);
        font-size:12.5px;color:var(--purple);font-weight:600}
.pf-top{display:flex;align-items:center;gap:12px}
.mono-badge{font-family:Sora;font-size:12px;font-weight:800;letter-spacing:.04em;color:#fff;
            background:var(--purple);border-radius:8px;padding:8px 10px;line-height:1}
.prod-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
             border-top:1px solid var(--rule);padding-top:36px}
.pg .kicker{margin-bottom:14px;font-size:11px}
.pg span{display:block;font-size:15.5px;color:var(--ink);padding:9px 0;
         border-bottom:1px solid var(--rule)}
.prod-note{margin-top:34px;font-size:15px;color:var(--muted)}

/* ---------------- applied AI ---------------- */
.ai-lead{max-width:60ch;margin-bottom:44px}
.ai-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ai-card{padding:28px 26px;transition:.2s}
.ai-card:hover{box-shadow:var(--lift);border-color:var(--lilac)}
.ai-card .t{font-family:Sora;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
            font-weight:800;color:var(--purple)}
.ai-card h4{font-size:19px;font-weight:700;margin:12px 0 10px;line-height:1.24}
.ai-card p{color:var(--body);font-size:14.5px}

/* ---------------- expertise ---------------- */
.exp{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ecard{padding:30px 26px;display:flex;flex-direction:column;gap:12px;transition:.2s}
.ecard:hover{box-shadow:var(--lift);transform:translateY(-4px);border-color:var(--lilac)}
.ecard h4{font-size:19px;font-weight:700;line-height:1.24;color:var(--purple)}
.ecard p{color:var(--body);font-size:14.5px;flex:1}
.ecard .more{font-size:13.5px;font-weight:600;color:var(--purple);text-decoration:none}

/* ---------------- industries ---------------- */
.inds{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:30px}
.ind .kicker{margin-bottom:14px;font-size:11px}
.ind a{display:block;text-decoration:none;color:var(--ink);font-size:16px;padding:11px 0;
       border-bottom:1px solid var(--rule);transition:.16s;font-weight:500}
.ind a:hover{color:var(--purple);padding-left:6px}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat b{font-family:Sora;display:block;font-size:52px;font-weight:800;line-height:1;
        color:var(--purple);letter-spacing:-.04em}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:15px}

/* ---------------- contact ---------------- */
.contact{background:
  radial-gradient(780px 420px at 80% 26%,rgba(139,92,246,.26),transparent 64%),var(--night);
  color:#fff;position:relative;overflow:hidden}
.contact h2,.contact h3,.contact h4,.contact h5{color:#fff}
.contact .kicker{color:var(--lilac)}
.contact p{color:#CFC9E0}
.contact .sec-head h2::after{background:var(--violet)}
.contact-grid,.cgrid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start;
                     position:relative}
.contact h2{max-width:16ch}
.contact-grid > div > p{margin-top:18px;font-size:17.5px;max-width:48ch}
/* contact blocks and the form default to LIGHT, because the contact page puts
   them on paper. The dark overrides below apply only inside .contact. */
.cmeta{margin-top:30px;border-top:1px solid var(--rule);padding-top:20px}
.cmeta div{padding:9px 0;color:var(--body);font-size:15px}
.cmeta b{color:var(--ink);font-weight:600}
.cmeta a{text-decoration:none;border-bottom:1px solid var(--lilac)}
.cmeta a:hover{color:var(--purple);border-bottom-color:var(--purple)}
.cblock{border-top:1px solid var(--rule);padding:20px 0}
.cblock h4{font-family:Sora;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--purple);margin-bottom:10px;font-weight:800}
.cblock p,.cblock a{color:var(--body);font-size:16px;text-decoration:none;display:block}
.cblock p b{color:var(--ink);font-weight:600}
.cblock a:hover{color:var(--purple)}
form{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:30px;
     box-shadow:var(--shadow)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
      color:var(--muted);margin:14px 0 6px;font-weight:700}
input,textarea,select{width:100%;background:#FBFAFE;border:1px solid var(--rule);
      border-radius:8px;padding:12px 13px;color:var(--ink);font-family:Inter;font-size:15px;
      outline:none;transition:.16s}
input::placeholder,textarea::placeholder{color:#A9A3BC}
input:focus,textarea:focus,select:focus{border-color:var(--purple);background:#fff;
      box-shadow:0 0 0 3px rgba(124,58,237,.12)}
textarea{resize:vertical;min-height:92px}
form .btn{margin-top:22px;width:100%;text-align:center}
.formstatus{margin-top:14px;font-size:14px;line-height:1.5;min-height:1px}
.formstatus.is-ok{color:var(--purple-d)}
.formstatus.is-error{color:#B45309}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- the same pieces, on the dark contact band --- */
.contact .cmeta,.contact .cblock{border-top-color:var(--edge)}
.contact .cmeta div{color:#CFC9E0}
.contact .cmeta b{color:#fff}
.contact .cmeta a{border-bottom-color:rgba(196,181,253,.45)}
.contact .cmeta a:hover{color:#fff;border-bottom-color:#fff}
.contact .cblock h4{color:var(--dim)}
.contact .cblock p,.contact .cblock a{color:#D9D4E6}
.contact .cblock p b{color:#fff}
.contact .cblock a:hover{color:#fff}
.contact form{background:rgba(255,255,255,.05);border-color:var(--edge);box-shadow:none}
.contact label{color:var(--dim)}
.contact input,.contact textarea,.contact select{background:rgba(0,0,0,.30);
      border-color:var(--edge);color:#fff}
.contact input::placeholder,.contact textarea::placeholder{color:#7C7595}
.contact input:focus,.contact textarea:focus,.contact select:focus{
      border-color:var(--violet);background:rgba(0,0,0,.40);
      box-shadow:0 0 0 3px rgba(139,92,246,.18)}
.contact .formstatus.is-ok{color:var(--lilac)}
.contact .formstatus.is-error{color:#F0B25A}
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.next div{padding:24px}
.next b{font-family:Sora;display:block;font-size:12px;color:var(--purple);margin-bottom:10px}
.next h5{font-size:16.5px;font-family:Sora;font-weight:700;margin-bottom:7px;color:var(--ink)}
.next p{font-size:14px;color:var(--body)}

/* ---------------- footer ---------------- */
footer{background:#07060E;color:#9C95B4;padding:60px 0 32px;
       border-top:1px solid var(--edge)}
footer .logo{color:#fff}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:44px;margin-bottom:42px}
.fgrid h5{font-family:Sora;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
          color:var(--dim);margin-bottom:16px;font-weight:700}
.fgrid a{display:block;color:#A8A2BC;text-decoration:none;font-size:14.5px;padding:5px 0}
.fgrid a:hover{color:#fff}
.fabout p{color:#8F89A6;font-size:14.5px;max-width:38ch;margin-top:14px}
.fbot{border-top:1px solid var(--edge);padding-top:22px;display:flex;
      justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--dim);font-size:13.5px}

/* ==================================================================
   INNER PAGES
   ================================================================== */
.srow{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;padding:64px 0;
      border-bottom:1px solid var(--rule);align-items:start}
.srow:last-child{border-bottom:0}
.srow .idx{font-family:Sora;font-size:12px;font-weight:800;color:var(--purple);
           letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.srow h2{font-size:clamp(26px,3vw,36px);margin-bottom:16px}
.srow .body p{color:var(--body);font-size:16.5px;line-height:1.7;margin-bottom:16px}
.srow .body p b{color:var(--ink)}
.srow .cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:24px}
.srow .cols h5{font-family:Sora;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
               color:var(--purple);margin-bottom:12px;font-weight:800}
.srow .cols li{list-style:none;font-size:14.5px;color:var(--body);padding:6px 0 6px 18px;
               position:relative}
.srow .cols li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;
                       border-radius:50%;background:var(--purple)}
.when{margin-top:24px;padding:16px 20px;border-left:3px solid var(--purple);
      background:var(--wash);border-radius:0 8px 8px 0;font-size:15px;color:var(--ink)}
.when b{color:var(--purple-d)}

.models{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.model{padding:30px 26px}
.model h4{font-size:20px;font-weight:700;margin-bottom:10px;color:var(--purple)}
.model p{color:var(--body);font-size:15px}
.model .best{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);
             font-size:13px;color:var(--purple);font-weight:600}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.step{padding:22px 20px;transition:.2s}
.step:hover{border-color:var(--lilac);box-shadow:var(--lift)}
.step b{font-family:Sora;display:block;font-size:13px;color:var(--purple);margin-bottom:10px}
.step h5{font-size:16.5px;font-weight:700;margin-bottom:8px;font-family:Sora;color:var(--ink)}
.step p{font-size:13.5px;color:var(--body)}

.cat{overflow:hidden}
.cat-group{border-bottom:1px solid var(--rule)}
.cat-group:last-child{border-bottom:0}
.cat-head{background:#F4EFFD;padding:14px 26px;font-family:Sora;font-size:11.5px;
          letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--purple)}
.cat-item{display:grid;grid-template-columns:78px 1fr 1.35fr;gap:24px;padding:20px 26px;
          border-top:1px solid var(--rule);align-items:center}
.cat-item:first-of-type{border-top:0}
.cat-item .code{font-family:Sora;font-size:11.5px;font-weight:800;color:#fff;
                background:var(--purple);border-radius:6px;padding:7px 0;text-align:center}
.cat-item b{font-size:16px;font-weight:600;color:var(--ink)}
.cat-item p{color:var(--body);font-size:14.5px}

.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.principles > div{padding:32px 30px}
.principles h4{font-size:21px;font-weight:700;margin-bottom:12px;color:var(--purple)}
.principles p{color:var(--body);font-size:15.5px}

.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.member{padding:26px}
.member .av{width:54px;height:54px;border-radius:50%;background:var(--purple);display:flex;
            align-items:center;justify-content:center;font-family:Sora;font-weight:800;
            color:#fff;font-size:17px;margin-bottom:16px}
.member b{display:block;font-size:17px;font-family:Sora;color:var(--ink)}
.member span{display:block;font-size:13.5px;color:var(--purple);margin:4px 0 10px;font-weight:600}
.member p{font-size:14px;color:var(--body)}

.markets{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.market{padding:22px 20px;text-align:center}
.market b{font-family:Sora;display:block;font-size:17px;margin-bottom:6px;color:var(--ink)}
.market span{font-size:13px;color:var(--muted)}

/* ---------------- industries page ---------------- */
.sector-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.sector-list span{border:1px solid var(--rule);background:var(--card);border-radius:20px;
                  padding:7px 14px;font-size:14px;color:var(--ink)}
.sector-list span a{text-decoration:none;color:inherit}
.pchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:20px;
        border-top:1px solid var(--rule)}
.pchips .lbl{font-family:Sora;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
             font-weight:800;color:var(--muted);align-self:center;margin-right:4px}
.pchips span:not(.lbl){font-family:Sora;font-size:11px;font-weight:800;letter-spacing:.05em;
        color:#fff;background:var(--purple);border-radius:6px;padding:7px 10px}
.common{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.common div{border-top:3px solid var(--purple);padding-top:20px}
.common h4{font-size:18px;font-weight:700;margin-bottom:9px;font-family:Sora;color:var(--purple)}
.common p{color:var(--body);font-size:14.5px}

/* ---------------- technology stack ---------------- */
.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stack-grp{background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
           box-shadow:var(--shadow);overflow:hidden}
.stack-grp h4{background:var(--purple);color:#fff;font-family:Sora;font-size:10.5px;
              letter-spacing:.14em;text-transform:uppercase;font-weight:800;padding:12px 18px}
.stack-grp .items{display:flex;flex-wrap:wrap;gap:7px;padding:18px}
.stack-grp .items span{border:1px solid var(--rule);background:#FBFAFE;border-radius:7px;
                       padding:7px 11px;font-size:13.5px;color:var(--ink);line-height:1.2}
.stack-note{margin-top:30px;padding-top:20px;border-top:1px solid var(--rule);
            font-size:15.5px;color:var(--muted);font-style:italic}

/* ---------------- client wall ---------------- */
.cw-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
         flex-wrap:wrap;margin-bottom:18px}
.cw-head .meta{font-size:13px;color:var(--muted)}
.cw-head .meta b{color:var(--purple);font-weight:700}
.clientwall{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cw-col{padding:22px}
.cw-col .grp{font-family:Sora;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
             font-weight:800;color:var(--purple);display:block;margin-bottom:12px}
.cw-col span.nm{display:block;font-family:Sora;font-size:14.5px;font-weight:600;color:var(--ink);
                padding:9px 0;border-top:1px solid var(--rule);transition:.16s;line-height:1.3}
.cw-col span.nm:first-of-type{border-top:0;padding-top:0}
.cw-col span.nm:hover{color:var(--purple)}

/* ---------------- responsive ---------------- */
@media(max-width:1080px){
  .exp,.inds,.prod-feat,.prod-groups,.ai-grid,.statbar,.clientwall,.stack{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .markets{grid-template-columns:repeat(3,1fr)}
  .team{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  :root{--gut:24px}
  .nav-links{display:none}
  .triad,.deep,.outcomes,.stats,.contact-grid,.cgrid,.srow,.models,.principles,.next,
  .common{grid-template-columns:1fr}
  .srow{padding:48px 0;gap:30px}
  .deep{gap:36px}
  .hero{padding:76px 0 62px}
  .phero{padding:58px 0 50px}
  section{padding:66px 0}
  .cat-item{grid-template-columns:64px 1fr;gap:16px}
  .cat-item p{grid-column:2}
}
@media(max-width:620px){
  .exp,.inds,.fgrid,.prod-feat,.prod-groups,.ai-grid,.clientwall,.steps,.markets,.team,
  .srow .cols,.frow,.stack{grid-template-columns:1fr}
  .statbar{grid-template-columns:1fr 1fr;gap:14px}
}