:root {
  --ink:#0b0d12; --graphite:#171a21; --graphite-2:#20242e; --warm:#f5f4ef; --paper:#fbfaf6; --white:#fff;
  --blue:#4c6fff; --aqua:#55e6c1; --muted:#777d8b; --line:#d8d7d1; --line-dark:#2b303a;
  --shadow:0 24px 70px rgba(11,13,18,.12); --shadow-soft:0 10px 30px rgba(11,13,18,.08);
  --radius-sm:.65rem; --radius-md:1.15rem; --container:min(1180px,calc(100vw - 40px)); --transition:220ms cubic-bezier(.2,.8,.2,1);
  --s1:.5rem;--s2:.75rem;--s3:1rem;--s4:1.5rem;--s5:2rem;--s6:3rem;--s7:4.5rem;--s8:7rem;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}

::selection{
  background:var(--aqua);
  color:var(--ink)
}

.skip-link{
  position:fixed;
  left:1rem;
  top:-4rem;
  z-index:999;
  padding:.8rem 1rem;
  background:var(--white);
  color:var(--ink);
  border:2px solid var(--blue);
  transition:top var(--transition)
}

.skip-link:focus{top:1rem}

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

.container{
  width:var(--container);
  margin-inline:auto
}

.section{
  padding:clamp(4.5rem,8vw,8rem) 0
}

.section-tight{
  padding:clamp(3rem,6vw,5.5rem) 0
}

.dark{
  background:var(--ink);
  color:var(--warm)
}

.graphite{
  background:var(--graphite);
  color:var(--warm)
}

.warm{
  background:var(--warm)
}

.eyebrow{
  font-size:.72rem;
  font-weight:760;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.65rem
}

.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
  opacity:.7
}

.display{
  font-size:clamp(3rem,7.7vw,7.3rem);
  line-height:.9;
  letter-spacing:-.06em;
  margin:.2em 0 .35em;
  font-weight:720
}

.h1{
  font-size:clamp(2.8rem,6.2vw,6rem);
  line-height:.96;
  letter-spacing:-.055em;
  margin:.25em 0 .35em
}

.h2{
  font-size:clamp(2rem,4.5vw,4.25rem);
  line-height:1;
  letter-spacing:-.045em;
  margin:.2em 0 .45em
}

.h3{
  font-size:clamp(1.25rem,2.2vw,1.75rem);
  line-height:1.15;
  letter-spacing:-.025em;
  margin:.2em 0
}

.lede{
  font-size:clamp(1.1rem,1.7vw,1.38rem);
  line-height:1.55;
  max-width:750px;
  color:#343944
}

.dark .lede,
.graphite .lede{
  color:#c5c8d0
}

.muted{color:var(--muted)}

.mono{
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:.85rem
}

.kicker{
  font-size:clamp(1.25rem,2.4vw,2rem);
  line-height:1.3;
  max-width:900px
}

/* HEADER */

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(251,250,246,.88);
  backdrop-filter:blur(15px);
  border-bottom:1px solid rgba(11,13,18,.07)
}

.nav-wrap{
  width:var(--container);
  height:76px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem
}

.brand{
  display:flex;
  align-items:center;
  width:190px;
  color:var(--ink)
}

.nav{
  display:flex;
  align-items:center;
  gap:1.65rem;
  font-size:.93rem
}

.nav a{
  position:relative
}

.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-.45rem;
  width:100%;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transition)
}

.nav a:hover::after,
.nav a[aria-current="page"]::after{
  transform:scaleX(1)
}

.nav-cta{
  padding:.75rem 1rem;
  border:1px solid var(--ink)
}

.nav-toggle{
  display:none;
  background:none;
  border:0;
  padding:.6rem
}

.nav-toggle span{
  display:block;
  width:25px;
  height:1.5px;
  background:var(--ink);
  margin:5px
}

/* BUTTONS */

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:2rem
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  min-height:48px;
  padding:.82rem 1.2rem;
  border:1px solid var(--ink);
  transition:
    transform var(--transition),
    background var(--transition),
    color var(--transition)
}

.btn:hover{
  transform:translateY(-2px)
}

.btn-primary{
  background:var(--ink);
  color:var(--warm)
}

.btn-primary:hover{
  background:var(--blue);
  border-color:var(--blue);
  color:white
}

.btn-light{
  background:var(--warm);
  color:var(--ink);
  border-color:var(--warm)
}

.btn-outline-light{
  border-color:#6e7480;
  color:var(--warm)
}

.btn-arrow::after{
  content:"↗"
}

/* HERO */

.hero{
  min-height:calc(100vh - 76px);
  display:flex;
  align-items:center;
  overflow:hidden;
  position:relative;
  background:var(--ink);
  color:var(--warm)
}

.hero-grid{
  width:var(--container);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  gap:4rem;
  align-items:center;
  padding:5rem 0
}

.hero p{
  color:#b8bdc7
}

.hero-network{
  position:relative;
  min-height:560px;
  border-left:1px solid var(--line-dark);
  overflow:hidden
}

.network-svg{
  width:100%;
  height:100%;
  min-height:560px
}

.network-line{
  stroke:#4c6fff;
  stroke-width:1.2;
  stroke-dasharray:3 11;
  animation:flow 13s linear infinite;
  opacity:.75
}

.network-line.alt{
  stroke:#55e6c1;
  animation-duration:18s
}

.node{
  fill:#171a21;
  stroke:#6e7480;
  stroke-width:1
}

.node-core{
  fill:#f5f4ef
}

.node-label{
  font:600 10px Inter,Arial,sans-serif;
  fill:#b8bdc7;
  letter-spacing:.05em
}

.pulse{
  transform-origin:center;
  animation:pulse 4s ease-in-out infinite
}

.hero-index{
  position:absolute;
  right:4%;
  bottom:4%;
  font-family:monospace;
  color:#737986;
  font-size:.8rem
}

/* LAYOUT */

.split{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:clamp(2rem,6vw,7rem);
  align-items:start
}

.split-even{
  grid-template-columns:1fr 1fr
}

.sticky{
  position:sticky;
  top:115px
}

.rule{
  border-top:1px solid var(--line);
  padding-top:1.2rem
}

.dark .rule,
.graphite .rule{
  border-color:var(--line-dark)
}

/* PROBLEMS */

.problem-list{
  display:grid
}

.problem{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:1rem;
  padding:1.35rem 0;
  border-top:1px solid var(--line)
}

.problem:last-child{
  border-bottom:1px solid var(--line)
}

.problem-num{
  font-family:monospace;
  color:var(--muted);
  font-size:.82rem
}

.problem strong{
  font-size:clamp(1.2rem,2vw,1.7rem);
  line-height:1.2;
  display:block
}

/* SERVICES */

.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-dark);
  border-left:1px solid var(--line-dark);
  margin-top:3.4rem
}

.service{
  min-height:230px;
  padding:1.35rem;
  border-right:1px solid var(--line-dark);
  border-bottom:1px solid var(--line-dark);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:
    background var(--transition),
    color var(--transition)
}

.service:hover{
  background:var(--aqua);
  color:var(--ink)
}

.service .n{
  font:12px monospace;
  color:#777d8b
}

.service p{
  font-size:.93rem;
  color:#9ca1ac
}

.service:hover p{
  color:#333
}

.service h3{
  font-size:1.25rem
}

/* ECOSYSTEM */

.ecosystem{
  position:relative;
  min-height:680px;
  margin-top:3rem
}

.ecosystem-core{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:220px;
  aspect-ratio:1;
  border:1px solid #414753;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#10131a;
  box-shadow:
    0 0 0 45px rgba(76,111,255,.04),
    0 0 0 100px rgba(85,230,193,.025)
}

/* LOGO FIX */
.ecosystem-core img{
  width:155px;
  filter:none;
  opacity:1
}

.orbit{
  position:absolute;
  inset:6%;
  border:1px solid #2d333e;
  border-radius:50%
}

.eco-card{
  position:absolute;
  width:185px;
  padding:1rem;
  background:#161a22;
  border:1px solid #343a46;
  box-shadow:var(--shadow-soft)
}

.eco-card b{
  display:block;
  margin-bottom:.25rem
}

.eco-card span{
  font-size:.78rem;
  color:#9ca1ac
}

.eco-card:nth-of-type(1){
  left:1%;
  top:9%
}

.eco-card:nth-of-type(2){
  right:2%;
  top:10%
}

.eco-card:nth-of-type(3){
  left:0;
  bottom:18%
}

.eco-card:nth-of-type(4){
  right:0;
  bottom:16%
}

.eco-card:nth-of-type(5){
  left:24%;
  top:0
}

.eco-card:nth-of-type(6){
  right:24%;
  bottom:0
}

.eco-card:nth-of-type(7){
  right:6%;
  top:45%
}

.eco-card:nth-of-type(8){
  left:8%;
  top:45%
}

.eco-card:nth-of-type(9){
  left:40%;
  bottom:1%
}

/* BOOKING SHOWCASE */

.booking-showcase{
  display:grid;
  gap:5rem;
  margin-top:4rem
}

.project-feature{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:3rem;
  align-items:center
}

.project-feature:nth-child(even){
  grid-template-columns:.88fr 1.12fr
}

.project-feature:nth-child(even) .browser{
  order:2
}

.browser{
  background:#e9e8e3;
  border:1px solid #c9c8c2;
  box-shadow:var(--shadow);
  overflow:hidden
}

.browser-bar{
  height:38px;
  border-bottom:1px solid #cbc9c2;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px
}

.dot{
  width:7px;
  height:7px;
  background:#b3b1aa;
  border-radius:50%
}

.url{
  margin-left:12px;
  font:11px monospace;
  color:#696d78;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.browser-screen{
  aspect-ratio:16/9;
  position:relative;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#d6d8e7,#fbfaf6)
}

.browser-screen img{
  width:100%;
  height:100%;
  object-fit:cover
}

.browser-screen .mock-title{
  font-size:clamp(2rem,4vw,4rem);
  font-weight:700;
  letter-spacing:-.04em;
  max-width:80%;
  line-height:.95
}

.project-meta{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin:1.1rem 0
}

.tag{
  display:inline-flex;
  border:1px solid var(--line);
  padding:.35rem .6rem;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em
}

.dark .tag{
  border-color:#3b414d
}

.project-copy p{
  color:#555b66
}

.dark .project-copy p{
  color:#b8bdc7
}

/* PROCESS */

.process{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border-top:1px solid var(--line);
  margin-top:3rem
}

.step{
  padding-top:1.1rem;
  position:relative
}

.step::before{
  content:"";
  position:absolute;
  top:-4px;
  left:0;
  width:7px;
  height:7px;
  background:var(--ink);
  border-radius:50%
}

.step small{
  color:var(--muted);
  font-family:monospace
}

.step b{
  display:block;
  margin-top:.65rem;
  font-size:.95rem
}

/* CTA */

.cta-band{
  padding:clamp(5rem,10vw,10rem) 0;
  background:var(--blue);
  color:white;
  overflow:hidden
}

.cta-band .display{
  max-width:1050px
}

.cta-band .btn{
  border-color:white
}

.cta-band .btn:hover{
  background:white;
  color:var(--ink)
}

/* PAGE HERO */

.page-hero{
  padding:clamp(5rem,10vw,9rem) 0 4rem;
  border-bottom:1px solid var(--line)
}

.page-hero .h1{
  max-width:980px
}

.breadcrumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
  color:var(--muted);
  font-size:.82rem;
  margin-bottom:2.5rem
}

.breadcrumbs span::before{
  content:"/";
  margin-right:.5rem
}

.intro-grid{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:4rem
}

.big-quote{
  font-size:clamp(1.8rem,3.5vw,3.3rem);
  line-height:1.14;
  letter-spacing:-.04em;
  margin:0
}

/* CARDS */

.cards-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem
}

.cards-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem
}

.plain-card{
  padding:1.4rem;
  border-top:1px solid var(--line);
  min-height:210px
}

.plain-card.darkcard{
  background:var(--graphite);
  color:var(--warm);
  border:0
}

.plain-card p{
  color:#666c76
}

.darkcard p{
  color:#aeb3be
}

/* PRODUCTS */

.product-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem
}

.product-card{
  background:white;
  border:1px solid var(--line);
  padding:1.3rem;
  min-height:290px;
  display:flex;
  flex-direction:column
}

.product-card .product-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem
}

.product-card p{
  color:#5d626d
}

.product-card .link{
  margin-top:auto;
  padding-top:1.4rem;
  font-weight:650
}

.product-card .link::after{
  content:" ↗"
}

/* FILTER */

.filterbar{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin:2rem 0
}

.filterbar button{
  border:1px solid var(--line);
  background:transparent;
  padding:.55rem .8rem
}

.filterbar button.is-active{
  background:var(--ink);
  color:var(--warm);
  border-color:var(--ink)
}

/* PORTFOLIO */

.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem
}

.portfolio-card{
  border:1px solid var(--line);
  background:white;
  overflow:hidden
}

.portfolio-visual{
  aspect-ratio:16/9;
  display:grid;
  place-items:center;
  background:var(--graphite);
  color:var(--warm);
  padding:2rem;
  position:relative
}


.portfolio-visual picture,
.portfolio-visual img{
  width:100%;
  height:100%;
}

.portfolio-visual picture{
  position:absolute;
  inset:0;
}

.portfolio-visual img{
  display:block;
  object-fit:cover;
}

.portfolio-visual::after{
  content:attr(data-domain);
  position:absolute;
  left:1rem;
  bottom:1rem;
  font:11px monospace;
  color:#aab0bb
}

.portfolio-card .body{
  padding:1.2rem
}

.portfolio-card .body p{
  color:#626873
}

.portfolio-card:nth-child(3n+1){
  grid-column:span 2
}

.portfolio-card:nth-child(3n+1) .portfolio-visual{
  aspect-ratio:21/9
}

.portfolio-card[hidden]{
  display:none
}

/* FORM */

.form-shell{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:4rem
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem
}

.field{
  display:grid;
  gap:.4rem
}

.field.full{
  grid-column:1/-1
}

.field label{
  font-size:.86rem;
  font-weight:650
}

.field input,
.field textarea,
.field select{
  width:100%;
  border:1px solid #c8c7c1;
  background:white;
  padding:.9rem;
  border-radius:0;
  color:var(--ink)
}

.field textarea{
  min-height:170px;
  resize:vertical
}

.upload{
  border:1px dashed #a9a79f;
  padding:1rem;
  color:#666
}

.form-success,
.idea-success{
  min-height:560px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(2rem,6vw,4.5rem);
  overflow:hidden;
  position:relative;
  color:var(--warm);
  background:
    radial-gradient(circle at 90% 10%,rgba(95,141,255,.32),transparent 22rem),
    var(--graphite)
}

.idea-success::after{
  content:"";
  width:260px;
  height:260px;
  position:absolute;
  right:-110px;
  bottom:-130px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%
}

.idea-success-mark{
  width:3.25rem;
  height:3.25rem;
  display:grid;
  place-items:center;
  margin-bottom:2rem;
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  color:white;
  font-size:1.35rem
}

.idea-success .eyebrow,
.idea-success .lede{
  color:var(--warm)
}

.idea-success .h2{
  max-width:560px;
  margin:.8rem 0 1.2rem;
  font-size:clamp(2.3rem,5vw,4.5rem)
}

.idea-success .lede{
  max-width:590px;
  opacity:.82
}

.idea-success blockquote{
  max-width:560px;
  margin:2.5rem 0;
  padding-left:1.25rem;
  border-left:2px solid var(--blue);
  color:white;
  font-size:clamp(1.1rem,2vw,1.35rem);
  line-height:1.5
}
.form-error{
  grid-column:1/-1;
  margin-bottom:1rem;
  padding:1rem;
  border:1px solid
}

.form-success{
  color:#245c3d;
  background:#edf8f1;
  border-color:#8dc7a3
}

.idea-success{
  min-height:560px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(2rem,6vw,4.5rem);
  overflow:hidden;
  position:relative;
  color:var(--warm);
  background:
    radial-gradient(circle at 90% 10%,rgba(95,141,255,.32),transparent 22rem),
    var(--graphite)
}

.idea-success::after{
  content:"";
  width:260px;
  height:260px;
  position:absolute;
  right:-110px;
  bottom:-130px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%
}

.idea-success-mark{
  width:3.25rem;
  height:3.25rem;
  display:grid;
  place-items:center;
  margin-bottom:2rem;
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  color:white;
  font-size:1.35rem
}

.idea-success .eyebrow,
.idea-success .lede{
  color:var(--warm)
}

.idea-success .h2{
  max-width:560px;
  margin:.8rem 0 1.2rem;
  font-size:clamp(2.3rem,5vw,4.5rem)
}

.idea-success .lede{
  max-width:590px;
  opacity:.82
}

.idea-success blockquote{
  max-width:560px;
  margin:2.5rem 0;
  padding-left:1.25rem;
  border-left:2px solid var(--blue);
  color:white;
  font-size:clamp(1.1rem,2vw,1.35rem);
  line-height:1.5
}
.form-error{
  color:#8a2730;
  background:#fff3f4;
  border-color:#dca0a5
}

.form-error:empty{
  display:none
}

.field-validation-error{
  color:#a12631;
  font-size:.8rem
}

.input-validation-error{
  border-color:#a12631!important
}

.form-honeypot{
  position:absolute!important;
  left:-10000px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important
}
.form-note{
  font-size:.82rem;
  color:#757b86
}

.idea-aside{
  padding:1.2rem 0;
  border-top:1px solid var(--line)
}

/* ARTICLE */

.article-shell{
  display:grid;
  grid-template-columns:minmax(0,760px) 220px;
  gap:5rem;
  align-items:start
}

.article-body{
  font-size:1.08rem
}

.article-body h2{
  font-size:2rem;
  line-height:1.15;
  margin:2.6rem 0 .8rem;
  letter-spacing:-.03em
}

.article-body h3{
  font-size:1.35rem;
  margin:2rem 0 .6rem
}

.article-body p{
  margin:0 0 1.2rem
}

.article-body blockquote{
  margin:2rem 0;
  padding:1.2rem 1.5rem;
  border-left:3px solid var(--blue);
  background:var(--warm);
  font-size:1.25rem
}

.toc{
  position:sticky;
  top:115px;
  border-top:1px solid var(--line);
  padding-top:1rem;
  font-size:.88rem
}

.toc a{
  display:block;
  padding:.4rem 0;
  color:#626873
}

/* BRAND GUIDE */

.guide-swatch{
  height:140px;
  padding:1rem;
  display:flex;
  align-items:flex-end;
  font-family:monospace
}

.motion-demo{
  height:90px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line)
}

.motion-demo::before{
  content:"";
  position:absolute;
  width:55px;
  height:2px;
  background:var(--blue);
  top:50%;
  left:10%;
  animation:move 3s ease-in-out infinite alternate
}

/* FOOTER */

.site-footer{
  background:#090b0f;
  color:#d5d7dd;
  padding:5rem 0 2rem
}

.footer-grid{
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:3rem
}

/* LOGO FIX */
.footer-brand img{
  width:180px;
  filter:none
}

.footer-col h3{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7f8591
}

.footer-col a{
  display:block;
  padding:.25rem 0;
  color:#c1c4cb;
  font-size:.92rem
}

.footer-col a:hover{
  color:white
}

.footer-end{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  margin-top:4rem;
  padding-top:1.2rem;
  border-top:1px solid #242933;
  color:#787f8a;
  font-size:.8rem
}

.footer-statement{
  font-size:clamp(2rem,4vw,4rem);
  line-height:1;
  letter-spacing:-.045em;
  color:white;
  margin:0 0 3rem;
  max-width:840px
}

/* REVEAL */

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .7s ease,
    transform .7s ease
}

.reveal.is-visible{
  opacity:1;
  transform:none
}

/* ANIMATIONS */

@keyframes flow{
  to{
    stroke-dashoffset:-180
  }
}

@keyframes pulse{
  50%{
    opacity:.35
  }
}

@keyframes move{
  to{
    left:80%
  }
}

/* TABLET */

@media (max-width:1000px){

  .nav{
    position:fixed;
    inset:76px 0 auto 0;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    background:var(--paper);
    padding:2rem 20px 2.5rem;
    border-bottom:1px solid var(--line);
    font-size:1.25rem
  }

  .nav.is-open{
    display:flex
  }

  .nav-toggle{
    display:block
  }

  .hero-grid{
    grid-template-columns:1fr
  }

  .hero-network{
    min-height:420px;
    border-left:0;
    border-top:1px solid var(--line-dark)
  }

  .network-svg{
    min-height:420px
  }

  .service-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .project-feature,
  .project-feature:nth-child(even){
    grid-template-columns:1fr
  }

  .project-feature:nth-child(even) .browser{
    order:0
  }

  .ecosystem{
    min-height:800px
  }

  .ecosystem-core{
    width:180px
  }

  .eco-card{
    width:165px
  }

  .process{
    grid-template-columns:repeat(4,1fr);
    row-gap:2.3rem
  }

  .cards-3,
  .product-list{
    grid-template-columns:repeat(2,1fr)
  }

  .form-shell{
    grid-template-columns:1fr
  }

  .article-shell{
    grid-template-columns:1fr
  }

  .toc{
    position:relative;
    top:0
  }

  .footer-grid{
    grid-template-columns:repeat(2,1fr)
  }

  .split,
  .split-even,
  .intro-grid{
    grid-template-columns:1fr
  }

  .sticky{
    position:relative;
    top:0
  }
}

/* MOBILE */

@media (max-width:680px){

  .portfolio-card:nth-child(3n+1){
    grid-column:auto
  }

  .portfolio-card:nth-child(3n+1) .portfolio-visual{
    aspect-ratio:16/9
  }

  :root{
    --container:min(100% - 28px,1180px)
  }

  .nav-wrap{
    height:68px
  }

  .nav{
    top:68px
  }

  .brand{
    width:165px
  }

  .hero{
    min-height:auto
  }

  .hero-grid{
    padding:4rem 0 2rem;
    gap:2rem
  }

  .hero-network{
    min-height:330px
  }

  .network-svg{
    min-height:330px
  }

  .service-grid,
  .cards-3,
  .cards-2,
  .product-list,
  .portfolio-grid,
  .form-grid{
    grid-template-columns:1fr
  }

  .service{
    min-height:190px
  }

  .process{
    grid-template-columns:repeat(2,1fr)
  }

  .ecosystem{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.6rem;
    min-height:auto
  }

  .orbit,
  .ecosystem-core{
    display:none
  }

  .eco-card{
    position:static!important;
    width:auto
  }

  .footer-grid{
    grid-template-columns:1fr
  }

  .footer-end{
    flex-direction:column
  }

  .page-hero{
    padding-top:4rem
  }

  .display{
    font-size:clamp(3rem,15vw,5rem)
  }

  .h1{
    font-size:clamp(2.7rem,13vw,4.6rem)
  }

  .section{
    padding:4.5rem 0
  }

  .browser-screen{
    aspect-ratio:4/3
  }

  .btn{
    width:100%
  }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto
  }

  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important
  }

  .reveal{
    opacity:1;
    transform:none
  }
}