:root{color-scheme:dark;
  --paper:#0e1013; --paper-2:#161a1f; --card:#1a1f25;
  --ink:#f3f4f5; --ink-2:#c2c8cf; --ink-3:#8b939d; --rule:#2d343c;
  --blue:#5d8dff; --red:#ff4a57; --maroon:#d23a4c; --sky:#d6e6ea;
  --tbd:#fff07a; --on-tbd:#16191d;
  --display:'Oswald','Arial Narrow',Arial,sans-serif;
  --serif:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.02rem/1.62 var(--serif);}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
.wrap{max-width:68rem;margin:0 auto;padding-left:max(1.25rem,env(safe-area-inset-left,0px));padding-right:max(1.25rem,env(safe-area-inset-right,0px))}

/* draft banner and highlights (remove before going live) */
.draft{background:var(--tbd);color:var(--ink);font:500 .82rem/1.45 var(--display);letter-spacing:.04em;text-align:center;padding:.45rem 1rem}
.tbd{background:var(--tbd);color:var(--on-tbd);padding:0 .15em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.dnote{display:block;margin-top:.4rem;font:400 .8rem/1.45 var(--display);letter-spacing:.02em;color:var(--on-tbd);background:var(--tbd);padding:.3rem .5rem;border-left:3px solid var(--on-tbd)}

/* header */
header.top{border-bottom:2px solid var(--ink);background:var(--paper)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem}
header.top .brand img{height:4.2rem;width:auto}
nav{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
nav a{font:500 .92rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;padding:.35rem 0;border-bottom:2px solid transparent}
nav a:hover{border-bottom-color:var(--red)}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;padding-block:3rem 3.5rem}
.hero h1{font:600 clamp(2rem,4.4vw,3.2rem)/1.08 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:0 0 1rem;text-wrap:balance}
.hero h1 .b{color:var(--blue)} .hero h1 .r{color:var(--red)}
.hero p.lead{font-size:1.2rem;color:var(--ink-2);margin:0 0 1.4rem;max-width:34rem}
.result{display:flex;flex-wrap:wrap;gap:.6rem}
.result span{font:500 .95rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;border:2px solid var(--ink);padding:.55rem .8rem;background:var(--card)}
.hero figure{margin:0}
.hero figure img{border:1px solid var(--rule);box-shadow:0 .6rem 2rem rgba(0,0,0,.55)}

/* sections */
section{padding-block:3.2rem}
section.alt{background:var(--paper-2);border-block:1px solid var(--rule)}
.kicker{font:500 .85rem/1 var(--display);letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin:0 0 .6rem}
h2{font:600 clamp(1.6rem,3vw,2.2rem)/1.15 var(--display);text-transform:uppercase;margin:0 0 1rem;text-wrap:balance}
h3{font:600 1.3rem/1.2 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0 0 .5rem}
.measure{max-width:44rem}

/* research library */
.library{display:grid;grid-template-columns:auto 1fr;gap:2.5rem;align-items:start}
.bignum{font:600 clamp(3rem,7vw,5rem)/1 var(--display);color:var(--blue);letter-spacing:-.01em}
.bignum small{display:block;font:500 .9rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:.9rem}
.bignum .tbd{display:inline-block;padding:.08em .18em .02em}
.sources{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 0;padding:0;list-style:none}
.sources li{font:400 .82rem/1 var(--display);letter-spacing:.05em;border:1px solid var(--rule);background:var(--card);padding:.4rem .55rem}
.sources li:nth-child(odd){background:rgba(93,141,255,.16);border-color:rgba(93,141,255,.45);color:#c9d8ff}
.sources li:nth-child(even){background:rgba(255,74,87,.15);border-color:rgba(255,74,87,.45);color:#ffc9cd}
.result-line{color:var(--blue)}
.host{margin:2rem 0 0;max-width:20rem}
.host img{border:1px solid var(--rule)}
.host figcaption{font:500 .78rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:.55rem}
.host figcaption a{color:var(--ink);text-decoration-color:var(--blue)}

/* examples */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.4rem}
.card{background:var(--card);border:1px solid var(--rule);border-top:4px solid var(--maroon);padding:1.1rem 1.2rem;min-width:0}
.card .tag{font:600 1.3rem/1.2 var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin-bottom:.4rem}
.card h3{font:500 .75rem/1.3 var(--display);letter-spacing:.16em;color:var(--ink-3);margin-bottom:.6rem}
.card p{margin:.3rem 0 0;font-size:.98rem}
.card .pics{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.8rem}
.card .pics img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* services */
.service{display:grid;grid-template-columns:4.5rem 1fr;gap:1.4rem;padding-block:2rem;border-top:1px solid var(--rule)}
.service>div>h3{color:var(--red)}
.service:first-of-type{border-top:0}
.letter{font:600 3.2rem/1 var(--display);color:var(--paper);-webkit-text-stroke:2px var(--ink);text-align:center}
.service .cols{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;margin-top:.6rem}
.service ol{margin:.2rem 0 0;padding-left:1.2rem}
.service ol>li{margin-bottom:.6rem}
.service ul{margin:.3rem 0 0;padding-left:1.1rem}
.service li{min-width:0}
.side{min-width:0}
.price{background:var(--card);border:2px solid var(--ink);padding:.9rem 1rem;margin-bottom:1rem}
.price .lbl,.for .lbl{font:500 .78rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:.45rem}
.price .amt{font:600 1.5rem/1.1 var(--display)}
.price .amt a{color:var(--blue);text-decoration:none}
.price .amt a:hover{text-decoration:underline}
.price p{margin:.35rem 0 0;font-size:.92rem;color:var(--ink-2)}
.for ul{padding-left:1.1rem;margin:0;font-size:.95rem}

/* other services */
.others{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:1rem;margin-top:1.2rem}
.other{background:var(--card);border:1px solid var(--rule);padding:1rem 1.1rem}
.other p{margin:.2rem 0 0;font-size:.95rem}
.other .r,.service ol .r{color:var(--red)} .other .b,.service ol .b{color:var(--blue)}
.aff a{color:inherit;text-decoration:none}
.aff a:hover{text-decoration:underline}
.aff{font:500 .78rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-top:.6rem}

.hero .wrap>*,.library>*,.service>*,.service .cols>*,.cards>*{min-width:0}
.inner{max-width:44rem}

/* footer */
footer{border-top:2px solid var(--ink);padding-block:1.6rem;font:400 .85rem/1.5 var(--display);letter-spacing:.04em;color:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem}

@media (max-width:52rem){
  .hero h1{font-size:clamp(1.7rem,8vw,2.4rem)}
  .hero .wrap,.library,.service .cols{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .service{grid-template-columns:1fr;gap:.4rem}
  .letter{text-align:left}
  header.top .wrap{flex-direction:column;align-items:flex-start}
}