:root{
  --ink:#101114;
  --paper:#FAFAF8;
  --blue:#2F5DFF;
  --blue-soft:#EAEEFF;
  --grey:#6B6E76;
  --line:#DEDDD8;
  --badge:#101114;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Space Grotesk', sans-serif;
  letter-spacing:-0.01em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

/* ---------- Wordmark ---------- */
.mark{display:inline-flex;flex-direction:column;line-height:1;}
.mark .word{font-family:'Space Grotesk';font-weight:700;font-size:26px;color:var(--ink);}
.mark .word span{color:var(--blue);}
.mark .sub{font-size:10px;letter-spacing:0.22em;color:var(--grey);margin-top:5px;}

/* ---------- Nav ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:rgba(250,250,248,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;}
.navlinks{display:flex;gap:36px;font-size:14.5px;color:var(--ink);}
.navlinks a{position:relative;padding-bottom:4px;}
.navlinks a:after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ink);
  transition:width .25s ease;
}
.navlinks a:hover:after,.navlinks a.active:after{width:100%;}
.navlinks a.active{color:var(--blue);}
.btn{display:inline-block;padding:12px 22px;font-size:14px;font-weight:500;border-radius:3px;white-space:nowrap;}
.btn-dark{background:var(--ink);color:var(--paper);}
.btn-dark:hover{background:var(--blue);}
.btn-ghost{border:1px solid var(--ink);color:var(--ink);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
@media(max-width:900px){.navlinks{display:none;}}

/* ---------- Page header (non-home pages) ---------- */
.page-head{padding:76px 0 56px;border-bottom:1px solid var(--line);}
.page-head .eyebrow{font-size:13px;color:var(--grey);margin-bottom:16px;}
.page-head h1{font-size:clamp(32px,4.4vw,50px);font-weight:600;max-width:16ch;}
.page-head p{margin-top:18px;font-size:16px;color:var(--grey);max-width:52ch;}

/* ---------- Hero (home only) ---------- */
.hero{padding:96px 0 84px;display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
.eyebrow{font-size:13px;color:var(--grey);margin-bottom:22px;}
.eyebrow b{color:var(--ink);font-weight:600;}
h1.hero-h{font-size:clamp(38px,4.6vw,62px);font-weight:600;line-height:1.06;max-width:11.5ch;}
.hero-h .accent{color:var(--blue);}
.hero-copy{margin-top:26px;font-size:17px;color:var(--grey);max-width:46ch;}
.hero-actions{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}
@media(max-width:900px){.hero{grid-template-columns:1fr;}}

/* ---------- Badge shape ---------- */
.badge{
  position:relative;background:var(--badge);color:var(--paper);
  clip-path: polygon(9% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius:0 22px 22px 22px;
  padding:46px 40px 40px 54px;min-height:300px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.badge .stat{font-family:'Space Grotesk';font-weight:700;font-size:58px;line-height:1;}
.badge .stat span{color:var(--blue);}
.badge .stat-label{font-size:13px;letter-spacing:0.18em;color:#9EA3AE;margin-top:14px;text-transform:uppercase;}
.badge .foot{font-size:13.5px;color:#C6C9D1;margin-top:30px;border-top:1px solid #2A2C31;padding-top:20px;}
.badge.small{min-height:0;padding:34px 32px 30px 44px;}

/* ---------- Section shell ---------- */
section{padding:80px 0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:52px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(26px,3vw,36px);font-weight:600;max-width:16ch;}
.section-head p{font-size:15px;color:var(--grey);max-width:34ch;}

/* ---------- Services: flat list ---------- */
.services{border-top:1px solid var(--line);}
.service-row{display:grid;grid-template-columns:1.4fr 2fr auto;gap:32px;align-items:center;padding:34px 0;border-bottom:1px solid var(--line);}
.service-row h3{font-size:21px;font-weight:600;}
.service-row p{font-size:14.5px;color:var(--grey);max-width:46ch;}
.service-row .arrow{
  font-family:'Space Grotesk';font-size:14px;color:var(--ink);
  border:1px solid var(--line);border-radius:50%;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;flex-shrink:0;
}
.service-row:hover .arrow{background:var(--blue);border-color:var(--blue);color:#fff;}
@media(max-width:760px){.service-row{grid-template-columns:1fr;gap:10px;}}

/* ---------- Service detail blocks (services page) ---------- */
.service-detail{padding:56px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:0.9fr 1.6fr;gap:48px;}
.service-detail:first-child{padding-top:0;}
.service-detail .tag{font-size:13px;color:var(--blue);font-weight:600;margin-bottom:10px;}
.service-detail h3{font-size:26px;font-weight:600;}
.service-detail .includes{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px;}
.service-detail .includes span{
  font-size:12.5px;border:1px solid var(--line);border-radius:20px;padding:7px 14px;color:var(--grey);
}
.service-detail p.desc{font-size:15px;color:var(--grey);max-width:56ch;}
@media(max-width:760px){.service-detail{grid-template-columns:1fr;}}

/* ---------- Process (dark) ---------- */
.process-bg{background:var(--ink);color:var(--paper);}
.process-bg .section-head p{color:#9EA3AE;}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#25272C;border:1px solid #25272C;}
.step{background:var(--ink);padding:34px 26px;}
.step .num{font-family:'Space Grotesk';color:var(--blue);font-size:14px;font-weight:600;}
.step h4{font-family:'Space Grotesk';font-size:18px;font-weight:600;margin-top:16px;}
.step p{font-size:13.5px;color:#9EA3AE;margin-top:10px;}
@media(max-width:760px){.steps{grid-template-columns:1fr;}}

/* ---------- Work grid (case studies) ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.work-item{background:var(--paper);padding:44px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between;transition:background .2s ease;}
.work-item:hover{background:var(--blue-soft);}
.work-item .wtag{font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);}
.work-item h3{font-size:24px;font-weight:600;margin-top:14px;max-width:14ch;}
.work-item .wmeta{display:flex;justify-content:space-between;align-items:flex-end;margin-top:26px;}
.work-item .wmeta .result{font-family:'Space Grotesk';font-size:15px;color:var(--blue);font-weight:600;}
.work-item .wmeta .arrow{font-size:20px;}
@media(max-width:760px){.work-grid{grid-template-columns:1fr;}}

/* ---------- Team grid (about page) ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;}
.team-card .photo{
  aspect-ratio:1/1;background:linear-gradient(160deg,#101114,#2A2E38);border-radius:0 18px 0 18px;
  display:flex;align-items:flex-end;padding:16px;
}
.team-card .photo span{font-family:'Space Grotesk';color:var(--blue);font-weight:700;font-size:22px;}
.team-card h4{font-size:16px;font-weight:600;margin-top:16px;}
.team-card p{font-size:13.5px;color:var(--grey);margin-top:2px;}
@media(max-width:760px){.team-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------- Values list (about page) ---------- */
.values{border-top:1px solid var(--line);}
.value-row{display:grid;grid-template-columns:0.5fr 2.5fr;gap:32px;padding:30px 0;border-bottom:1px solid var(--line);}
.value-row .vnum{font-family:'Space Grotesk';color:var(--blue);font-size:15px;font-weight:600;}
.value-row h4{font-size:18px;font-weight:600;}
.value-row p{font-size:14.5px;color:var(--grey);margin-top:8px;max-width:52ch;}
@media(max-width:640px){.value-row{grid-template-columns:1fr;}}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;}
.contact-info .row{padding:22px 0;border-bottom:1px solid var(--line);}
.contact-info .row h5{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--grey);margin-bottom:8px;}
.contact-info .row a,.contact-info .row div{font-size:16px;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:13px;color:var(--grey);margin-bottom:8px;}
.field input,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:3px;padding:13px 14px;font-family:inherit;font-size:14.5px;
  background:transparent;color:var(--ink);
}
.field input:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue);}
.field textarea{resize:vertical;min-height:120px;}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr;}}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;}
.cta-inner{
  display:flex;justify-content:space-between;align-items:center;gap:32px;
  background:var(--blue-soft);border-radius:0 40px 0 40px;padding:56px 56px;flex-wrap:wrap;
}
.cta-inner h2{font-size:clamp(26px,3.4vw,38px);font-weight:600;max-width:14ch;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:48px 0 40px;}
.foot-row{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:28px;}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap;}
.foot-cols h5{font-size:12px;letter-spacing:0.14em;color:var(--grey);text-transform:uppercase;margin-bottom:14px;}
.foot-cols a{display:block;font-size:14px;color:var(--ink);margin-bottom:9px;}
.foot-cols a:hover{color:var(--blue);}
.foot-bottom{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:13px;color:var(--grey);flex-wrap:wrap;gap:10px;}