/* Dyotis Technologies — editorial design system */
:root{
  --ink:#16191e; --ink-soft:#3c424c; --mut:#6c727c;
  --paper:#faf8f4; --paper-2:#f1ede5; --line:#e3ddd2;
  --cyan:#0f9fd8; --indigo:#3a4fdf; --violet:#6a3fd0;
  --serif:"Source Serif 4",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --mx:clamp(20px,6vw,120px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.grad{background:linear-gradient(100deg,var(--cyan),var(--indigo) 55%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}

/* header */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:11px var(--mx)}
.nav img{height:36px;display:block}
.links{display:flex;gap:34px;align-items:center}
.links a{font-size:14.5px;color:var(--ink-soft);font-weight:500}
.links a:hover,.links a.on{color:var(--ink)}
.cta{font-family:var(--sans);font-weight:600;font-size:14.5px;padding:9px 18px;border:1.5px solid var(--ink);border-radius:100px;transition:.2s}
.links a.cta{color:var(--ink)}
.cta:hover{background:var(--ink);color:var(--paper)!important}
.menu{display:none;background:none;border:none;cursor:pointer;color:var(--ink);padding:4px 8px}
.mnav{display:none;flex-direction:column;border-top:1px solid var(--line);background:var(--paper);padding:6px var(--mx) 18px}
.mnav a{padding:13px 0;font-size:16px;font-weight:500;color:var(--ink-soft);border-bottom:1px solid var(--line)}
.mnav a:last-child{border-bottom:none}
body.nav-open .mnav{display:flex}

/* offset anchor targets below the sticky header */
[id]{scroll-margin-top:78px}

/* buttons */
.btn{display:inline-block;background:var(--ink);color:var(--paper);font-weight:600;font-size:15.5px;padding:15px 28px;border-radius:100px;transition:.2s}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15.5px;padding:15px 6px}
.btn-ghost .arr{transition:.2s}
.btn-ghost:hover .arr{transform:translateX(5px)}

/* home hero */
.hero{padding:clamp(60px,9vw,120px) var(--mx) clamp(40px,5vw,70px)}
.hero .eyebrow{margin-bottom:28px}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(44px,7.6vw,108px);line-height:.98;letter-spacing:-.02em;max-width:16ch;text-wrap:balance}
.hero p{font-size:clamp(18px,2vw,22px);color:var(--ink-soft);max-width:48ch;margin-top:34px;line-height:1.5}
.hero .row{display:flex;gap:18px;margin-top:40px;flex-wrap:wrap;align-items:center}
.hero-img{margin-top:clamp(40px,5vw,64px);height:clamp(280px,42vw,560px)}

/* split hero (text left, image right) */
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,5vw,76px);align-items:center;padding:clamp(20px,3vw,44px) var(--mx) clamp(56px,7vw,96px)}
.hero-grid .eyebrow{margin-bottom:26px}
.hero-grid h1{font-family:var(--serif);font-weight:600;font-size:clamp(40px,5.2vw,80px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.hero-grid .sub{font-size:clamp(17px,1.9vw,21px);color:var(--ink-soft);max-width:48ch;margin-top:30px;line-height:1.55}
.hero-grid .row{display:flex;gap:18px;margin-top:38px;flex-wrap:wrap;align-items:center}
.hero-grid .ph{height:100%;min-height:clamp(360px,34vw,480px);border-radius:6px}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}.hero-grid .ph{min-height:300px}}

/* inner-page hero */
.page-hero{padding:clamp(26px,3.5vw,48px) var(--mx) 0}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:26px}
.crumb a:hover{color:var(--ink)}
.page-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(38px,5.8vw,80px);line-height:1;letter-spacing:-.02em;max-width:18ch;text-wrap:balance}
.lead{font-size:clamp(17px,1.9vw,21px);color:var(--ink-soft);max-width:56ch;margin-top:28px;line-height:1.55}
.banner{margin:clamp(36px,5vw,60px) var(--mx) 0;height:clamp(240px,34vw,460px);position:relative;border:1px solid var(--line);overflow:hidden}
.banner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* image placeholder frame */
.ph{position:relative;background:repeating-linear-gradient(135deg,var(--paper-2) 0 11px,transparent 11px 22px),var(--paper-2);border:1px solid var(--line);border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* stat band */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.stats>div{padding:clamp(28px,3vw,46px) clamp(20px,3vw,40px);min-width:0;border-right:1px solid var(--line)}
.stats>div:nth-child(4n){border-right:none}
.stats>div:nth-child(n+5){border-top:1px solid var(--line)}
.stats .n{font-family:var(--serif);font-weight:600;font-size:clamp(38px,4.4vw,60px);line-height:1;letter-spacing:-.02em}
.stats .l{font-size:13.5px;color:var(--mut);margin-top:12px}
section.stats>div:first-child{padding-left:var(--mx)}
section.stats>div:last-child{padding-right:var(--mx)}

/* sections */
.sec{padding:clamp(36px,4.5vw,70px) var(--mx)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(32px,4.6vw,60px);line-height:1.02;letter-spacing:-.02em;max-width:14ch}
.sec-head p{color:var(--ink-soft);max-width:42ch;font-size:17.5px}

/* capability rows */
.cap{border-top:1px solid var(--line)}
.cap-row{display:grid;grid-template-columns:1.1fr 1.4fr auto;gap:30px;align-items:center;padding:clamp(28px,3.4vw,46px) 0;border-bottom:1px solid var(--line);transition:.3s;cursor:pointer}
.cap-row:hover{padding-left:14px}
.cap-row .num{font-family:var(--mono);font-size:13px;color:var(--mut)}
.cap-row h3{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.8vw,38px);letter-spacing:-.01em;line-height:1.04}
.cap-row .desc{color:var(--ink-soft);font-size:15.5px;line-height:1.5}
.cap-row .tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.tag{font-family:var(--mono);font-size:11px;color:var(--mut);border:1px solid var(--line);padding:4px 9px;border-radius:100px}
.cap-row .go{width:46px;height:46px;border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.25s}
.cap-row:hover .go{background:var(--ink);color:var(--paper)}
.cap-row .pri{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}

/* offer grid (service pages) */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.offers>div{background:var(--paper);padding:clamp(26px,3vw,38px)}
.offers .num{font-family:var(--mono);font-size:12px;color:var(--mut);display:block;margin-bottom:16px}
.offers h3{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.01em;margin-bottom:10px}
.offers p{color:var(--ink-soft);font-size:15px;line-height:1.55}

/* use-case / card grids */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.ucard .ph{height:150px;border-radius:4px}
.ucard h3{font-family:var(--serif);font-weight:600;font-size:20px;margin-top:16px}
.ucard p{color:var(--ink-soft);font-size:14px;margin-top:6px;line-height:1.5}
a.ucard:hover h3{color:var(--indigo)}
.ins-card .ph{height:220px;border-radius:4px}
.ins-card .eyebrow{color:var(--cyan);margin-top:18px}
.ins-card h3{font-family:var(--serif);font-weight:600;font-size:21px;margin-top:10px;line-height:1.2}
.ins-card p{color:var(--ink-soft);font-size:14.5px;margin-top:8px;line-height:1.5}
a.ins-card:hover h3{color:var(--indigo)}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split .copy{padding:clamp(50px,6vw,96px) var(--mx)}
.split .copy .eyebrow{margin-bottom:22px}
.split .copy h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,3.6vw,50px);line-height:1.04;letter-spacing:-.02em;margin-bottom:26px}
.split .copy p{color:var(--ink-soft);margin-bottom:18px;max-width:46ch}
.split .visual{border-left:1px solid var(--line);min-height:420px;position:relative;overflow:hidden}
.split .visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* steps (approach) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.steps>div{background:var(--paper);padding:clamp(24px,2.8vw,36px)}
.steps .k{font-family:var(--mono);font-size:12px;color:var(--cyan);margin-bottom:14px}
.steps h4{font-family:var(--serif);font-weight:600;font-size:21px;margin-bottom:8px}
.steps p{color:var(--ink-soft);font-size:14.5px;line-height:1.55}

/* clients */
.clients{padding:clamp(26px,3vw,44px) var(--mx);text-align:center;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.clients .eyebrow{margin-bottom:22px}
.logo-row{display:flex;flex-wrap:wrap;gap:clamp(28px,4.5vw,60px);align-items:center;justify-content:center}
.logo-row img{height:36px;width:auto;filter:grayscale(1);opacity:.55;transition:.25s}
.logo-row img:hover{filter:none;opacity:1}

/* article */
.art-head{padding:clamp(26px,3.5vw,44px) var(--mx) 0;max-width:1000px}
.art-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5vw,64px);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
.art-head .dek{font-size:clamp(17px,1.9vw,21px);color:var(--ink-soft);margin-top:24px;max-width:56ch;line-height:1.55}
.art-meta{font-family:var(--mono);font-size:12px;color:var(--mut);letter-spacing:.06em;margin-top:26px}
.article{max-width:800px;padding:clamp(44px,5vw,64px) var(--mx) clamp(64px,7vw,100px);margin:0}
.article p{font-size:18px;line-height:1.75;color:var(--ink-soft);margin-bottom:24px;text-wrap:pretty}
.article h2{font-family:var(--serif);font-weight:600;font-size:29px;letter-spacing:-.01em;margin:44px 0 16px;color:var(--ink)}
.article ul{margin:0 0 24px 20px}
.article li{font-size:17px;line-height:1.65;color:var(--ink-soft);margin-bottom:10px}
.article strong{color:var(--ink)}
.pull{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.35;letter-spacing:-.01em;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;margin:40px 0}
@media(min-width:1100px){.article{max-width:calc(800px + var(--mx))}}

/* offices / contact */
.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px}
.office{border:1px solid var(--line);padding:clamp(28px,3vw,42px)}
.office h3{font-family:var(--serif);font-weight:600;font-size:26px;margin-bottom:6px}
.office .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);margin-bottom:20px}
.office p{color:var(--ink-soft);font-size:16px;line-height:1.6;margin-bottom:14px}
.office a.tel{display:block;font-weight:600;color:var(--ink);margin-top:4px}
.office a.tel:hover{color:var(--indigo)}

/* CTA band */
.cta-band{padding:clamp(36px,4.5vw,66px) var(--mx);text-align:center}
.cta-band h2{font-family:var(--serif);font-weight:600;font-size:clamp(36px,6vw,86px);line-height:1;letter-spacing:-.025em;max-width:16ch;margin:0 auto 36px;text-wrap:balance}

/* footer */
footer{background:var(--ink);color:var(--paper);padding:clamp(60px,7vw,96px) var(--mx) 40px}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr 1.15fr;gap:30px;padding-bottom:56px;border-bottom:1px solid #2b313a}
.foot-top img{height:30px;margin-bottom:22px}
.foot-top .tl{color:#aeb4bd;max-width:30ch;font-size:15px}
.fcol h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7f8794;margin-bottom:18px}
.fcol a{display:block;color:#cdd2da;font-size:14.5px;margin-bottom:11px}
.fcol a:hover{color:#fff}
.fcol p{font-size:14px;line-height:1.55;color:#cdd2da}
.foot-bot{display:flex;justify-content:space-between;padding-top:30px;color:#7f8794;font-size:13px;flex-wrap:wrap;gap:12px}

@media(max-width:880px){
  .links{display:none}.menu{display:block}
  .stats{grid-template-columns:1fr 1fr}.stats>div{border-right:none}.stats>div:nth-child(2n+1){border-right:1px solid var(--line)}.stats>div:nth-child(n+3){border-top:1px solid var(--line)}
  .sec-head{grid-template-columns:1fr}
  .cap-row{grid-template-columns:1fr;gap:6px}
  .cap-row .desc{grid-column:1}.cap-row .go{display:none}
  .split{grid-template-columns:1fr}.split .visual{border-left:none;border-top:1px solid var(--line);min-height:260px}
  .offers{grid-template-columns:1fr}
  .cards,.cards.c3{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .offices{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .cards,.cards.c3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
}