/* ==========================================================================
   Bunyaan Tech — bunyaan.tech
   Palette, type and structure derived from the 2026 company profile.
   ========================================================================== */

@font-face{
  font-family:"Archivo";
  src:url("archivo-var.woff2") format("woff2-variations"),
      url("archivo-var.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Plex Mono";
  src:url("plexmono-500.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

:root{
  /* brand */
  --ink:#050C1A;
  --navy:#0A1830;
  --navy-2:#10294D;
  --blue:#3B9BFF;
  --blue-soft:#8CC5FF;
  --blue-deep:#0B57C7;

  /* light surfaces */
  --paper:#FFFFFF;
  --paper-2:#F2F5FA;
  --title:#0A1628;
  --body:#46576E;
  --muted:#6B7C93;
  --line:#DCE3ED;

  /* dark surfaces */
  --d-title:#FFFFFF;
  --d-body:#AFC2D8;
  --d-muted:#7D93AE;
  --d-line:rgba(255,255,255,.14);

  --head-h:66px;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
em{font-style:normal}
h1,h2,h3,h4{
  color:var(--title);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.1;
  margin:0;
}
p{margin:0 0 1.1em}
a{color:var(--blue-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:#fff;color:var(--ink);padding:12px 18px;font-weight:600;
}
.skip:focus{left:12px;top:12px}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:clamp(20px,5vw,56px);
}

/* ── Header ─────────────────────────────────────────────────────── */
.head{
  position:sticky;top:0;z-index:100;
  background:rgba(5,12,26,.9);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.head-in{
  max-width:var(--maxw);margin:0 auto;
  padding-inline:clamp(20px,5vw,56px);
  height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:auto}
.brand-name{
  color:#fff;font-weight:800;font-size:17px;
  letter-spacing:.004em;
  font-variation-settings:"wdth" 96;
}
.brand-dot{color:var(--blue)}

.nav{display:flex;align-items:center;gap:30px}
.nav a{
  color:#C6D6E8;font-size:14.5px;font-weight:500;letter-spacing:-.005em;
}
.nav a:hover{color:#fff;text-decoration:none}
.nav a.is-current{color:#fff}
.nav a.is-current:not(.nav-cta){box-shadow:inset 0 -1px 0 var(--blue)}
.nav .nav-cta{
  color:#fff;border:1px solid rgba(255,255,255,.28);
  padding:9px 16px;border-radius:2px;
}
.nav .nav-cta:hover{background:#fff;color:var(--ink);border-color:#fff}

.nav-toggle{
  display:none;width:40px;height:40px;background:none;border:0;
  padding:0;cursor:pointer;position:relative;
}
.nav-toggle span{
  display:block;height:1.5px;width:22px;background:#fff;margin:5px auto;
  transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.2px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.2px) rotate(-45deg)}

/* ── Hero ───────────────────────────────────────────────────────── */
.hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 78% 8%,rgba(59,155,255,.20),transparent 58%),
    radial-gradient(90% 80% at 6% 96%,rgba(16,41,77,.85),transparent 60%),
    linear-gradient(168deg,#071227 0%,#050C1A 48%,#081C38 100%);
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-net{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;opacity:.85;
}
.hero-in{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;
  padding-inline:clamp(20px,5vw,56px);
  padding-block:clamp(72px,11vw,124px) clamp(64px,9vw,104px);
}
.hero-kicker{
  font-family:var(--mono);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-soft);
  margin:0 0 26px;
  display:inline-block;
  border:1px solid rgba(140,197,255,.34);
  border-radius:100px;
  padding:7px 16px;
}
.hero-h1{
  color:#fff;
  /* sized so the three brand lines hold without breaking, down to ~560px */
  font-size:clamp(2.05rem,6.2vw,4.55rem);
  line-height:1.0;
  letter-spacing:-.038em;
  font-weight:700;
  margin:0 0 30px;
}
.hero-h1 span{display:block}
.hero-h1 .accent{color:var(--blue)}
.hero-lede{
  color:var(--d-body);
  font-size:clamp(1.02rem,1.5vw,1.18rem);
  line-height:1.62;
  max-width:60ch;
  margin:0 0 34px;
}
.hero-acts{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:46px}

.btn{
  display:inline-block;font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:2px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
  font-family:var(--sans);
}
.btn:hover{text-decoration:none}
.btn-solid{background:#fff;color:var(--ink);border-color:#fff}
.btn-solid:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}

.chips{
  list-style:none;margin:0;padding:24px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:10px;
}
.chips li{
  color:#CBDCF0;font-size:13.5px;font-weight:500;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.035);
  padding:8px 14px;border-radius:2px;
}

/* ── Bands ──────────────────────────────────────────────────────── */
.band{
  padding-block:clamp(64px,8vw,104px);
  scroll-margin-top:var(--head-h);
  background:var(--paper);
}
.band-alt{background:var(--paper-2)}
.band-dark{
  background:linear-gradient(160deg,#081428 0%,#0A1830 60%,#0C2140 100%);
  color:var(--d-body);
}
.band-dark h2,.band-dark h3,.band-dark h4{color:#fff}
.band-dark .label{color:var(--blue-soft)}
.band-dark .label::before{background:var(--blue)}

.grid-2{
  display:grid;
  grid-template-columns:168px minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.col-side{position:sticky;top:calc(var(--head-h) + 40px)}
.col-main{min-width:0}

.label{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.1em;color:var(--muted);
  margin:6px 0 0;padding-top:14px;
  border-top:2px solid var(--title);
  display:block;
}
.band-dark .label{border-top-color:var(--blue)}

.col-main h2{
  font-size:clamp(1.85rem,3.5vw,2.9rem);
  letter-spacing:-.032em;line-height:1.03;
  margin:0 0 26px;
}
.lede{
  font-size:clamp(1.02rem,1.35vw,1.14rem);
  line-height:1.62;color:var(--title);
  max-width:62ch;margin:0 0 1.3em;
}
.band-dark .lede{color:#D6E4F4}
.col-main p{max-width:68ch}
.sub{
  font-size:1.18rem;margin:54px 0 16px;letter-spacing:-.02em;
}

/* ── Ledger (firm stats) ────────────────────────────────────────── */
.ledger{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:0 26px;margin:44px 0 0;padding:0;
}
.ledger div{border-top:1px solid var(--line);padding-top:16px}
.ledger dt{
  font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:700;
  color:var(--title);letter-spacing:-.03em;line-height:1;
  font-variation-settings:"wdth" 104;
}
.ledger dd{
  margin:10px 0 0;font-size:13.5px;line-height:1.45;color:var(--muted);
}

/* ── Vision panel ───────────────────────────────────────────────── */
.vision{
  margin:52px 0 0;padding:clamp(28px,4vw,44px);
  background:linear-gradient(140deg,var(--navy) 0%,var(--navy-2) 100%);
  border-radius:4px;position:relative;overflow:hidden;
}
.vision::after{
  content:"";position:absolute;right:-60px;top:-60px;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,155,255,.28),transparent 70%);
}
.vision blockquote{
  margin:0;position:relative;z-index:1;
  color:#fff;font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.4;letter-spacing:-.02em;font-weight:500;
  max-width:34ch;
}
.vision blockquote em{color:var(--blue-soft)}
.vision figcaption{
  margin-top:20px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--d-muted);
  position:relative;z-index:1;
}

/* ── Two-column feature blocks ──────────────────────────────────── */
.apart,.bench,.promises,.applied-grid{
  display:grid;gap:26px 34px;margin-top:8px;
}
.apart{grid-template-columns:repeat(2,1fr)}
.bench,.promises,.applied-grid{grid-template-columns:repeat(3,1fr)}
.apart>div,.bench>div,.promises>div,.applied-grid>div{
  border-top:1px solid var(--line);padding-top:16px;
}
.band-dark .applied-grid>div{border-top-color:var(--d-line)}
.apart h4,.bench h4,.promises h4,.applied-grid h4{
  font-size:1rem;margin:0 0 8px;letter-spacing:-.015em;
}
.apart p,.bench p,.promises p,.applied-grid p{
  font-size:14.5px;line-height:1.56;margin:0;color:var(--body);
}
.applied{margin-top:56px}
.applied-label{margin-bottom:22px}

/* ── Capability pillars ─────────────────────────────────────────── */
.pillars{list-style:none;margin:40px 0 0;padding:0}
.pillars li{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);
  gap:10px 40px;
  padding:26px 0;
  border-top:1px solid var(--line);
}
.pillars li:last-child{border-bottom:1px solid var(--line)}
.pillars h3{
  font-size:1.18rem;letter-spacing:-.022em;line-height:1.25;margin:0;
}
.pillars p{margin:0 0 12px;font-size:15.5px;line-height:1.58;max-width:52ch}
.pillars .tok{margin:0}

.tok{display:flex;flex-wrap:wrap;gap:7px}
.tok span{
  font-family:var(--mono);font-size:12px;letter-spacing:.005em;
  color:var(--muted);background:var(--paper);
  border:1px solid var(--line);border-radius:2px;
  padding:4px 9px;white-space:nowrap;
}
.band-alt .tok span{background:#fff}
.band-dark .tok span{
  color:#A7C2E0;background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.15);
}

/* ── Accordion ──────────────────────────────────────────────────── */
.acc{margin-top:42px;border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-item h3{margin:0;font-size:inherit;font-weight:inherit}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:24px;background:none;border:0;cursor:pointer;
  padding:22px 0;text-align:left;font-family:var(--sans);
  color:var(--title);font-size:clamp(1.02rem,1.5vw,1.14rem);
  font-weight:600;letter-spacing:-.02em;line-height:1.3;
}
.acc-head:hover{color:var(--blue-deep)}
.acc-head i{
  flex:none;width:18px;height:18px;position:relative;
}
.acc-head i::before,.acc-head i::after{
  content:"";position:absolute;background:var(--title);
  transition:transform .3s ease,opacity .3s ease;
}
.acc-head i::before{left:0;top:8.25px;width:18px;height:1.5px}
.acc-head i::after{left:8.25px;top:0;width:1.5px;height:18px}
.acc-item.is-open .acc-head i::after{transform:scaleY(0);opacity:0}
.acc-item.is-open .acc-head{color:var(--blue-deep)}
.acc-item.is-open .acc-head i::before{background:var(--blue-deep)}
.acc-panel{
  max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .38s cubic-bezier(.4,0,.2,1),visibility 0s linear .38s;
}
.acc-item.is-open .acc-panel{
  visibility:visible;
  transition:max-height .38s cubic-bezier(.4,0,.2,1);
}
.acc-body{padding:0 0 30px;max-width:66ch}
.acc-body p{font-size:15.5px;line-height:1.62;margin:0 0 16px}
.acc-body ul{margin:0;padding:0;list-style:none}
.acc-body li{
  position:relative;padding-left:20px;margin-bottom:11px;
  font-size:15px;line-height:1.58;
}
.acc-body li::before{
  content:"";position:absolute;left:0;top:9px;
  width:7px;height:1.5px;background:var(--blue);
}
.acc-body strong{color:var(--title);font-weight:600}

/* ── Technology stack ───────────────────────────────────────────── */
.stack{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:30px 34px;margin-top:40px;
}
.stack>div{border-top:1px solid var(--d-line);padding-top:18px}
.stack h3{font-size:.95rem;margin:0 0 14px;letter-spacing:-.01em}

/* ── Track record ───────────────────────────────────────────────── */
.cases{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:22px;margin-top:38px;
}
.cases article{
  background:#fff;border:1px solid var(--line);
  border-top:2px solid var(--navy);
  padding:clamp(22px,3vw,32px);border-radius:3px;
}
.case-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue-deep);margin:0 0 10px;
}
.cases h3{font-size:1.35rem;margin:0 0 12px;letter-spacing:-.025em}
.cases p{font-size:15px;line-height:1.58;margin:0 0 16px}
.cases .tok{margin:0}
.cases .tok span{background:var(--paper-2)}

.pull{
  margin:54px 0 0;padding:4px 0 4px 26px;
  border-left:2px solid var(--blue);
}
.pull blockquote{
  margin:0;font-size:clamp(1.12rem,2vw,1.42rem);
  line-height:1.38;letter-spacing:-.024em;
  color:var(--title);font-weight:500;max-width:40ch;
}
.pull figcaption{
  margin-top:16px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}

/* ── Engagement models ──────────────────────────────────────────── */
.models{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;margin-top:38px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
}
.models article{background:var(--paper);padding:clamp(24px,3vw,34px)}
.models h3{font-size:1.12rem;margin:0 0 12px;letter-spacing:-.022em}
.models p{font-size:15px;line-height:1.58;margin:0 0 16px}
.best{
  font-size:14px;line-height:1.5;color:var(--muted);
  border-top:1px solid var(--line);padding-top:14px;margin:0 !important;
}
.best span{
  display:block;font-family:var(--mono);font-size:11px;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--blue-deep);margin-bottom:6px;
}

/* ── Process ────────────────────────────────────────────────────── */
.steps{
  list-style:none;counter-reset:s;margin:40px 0 0;padding:0;
}
.steps li{
  counter-increment:s;position:relative;
  display:grid;grid-template-columns:62px minmax(0,1fr);
  gap:0 22px;padding:0 0 34px;
}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:13px;color:var(--blue-deep);
  padding-top:3px;letter-spacing:.04em;
}
.steps li::after{
  content:"";position:absolute;left:8px;top:26px;bottom:-6px;
  width:1px;background:var(--line);
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{font-size:1.08rem;margin:0 0 8px;letter-spacing:-.02em}
.steps p{font-size:15px;line-height:1.58;margin:0;max-width:56ch}
.promises{margin-top:56px}

/* ── Contact ────────────────────────────────────────────────────── */
.contact{
  background:
    radial-gradient(100% 90% at 85% 4%,rgba(59,155,255,.20),transparent 60%),
    linear-gradient(170deg,#071227 0%,#050C1A 55%,#081C38 100%);
  padding-block:clamp(66px,8vw,106px);
  scroll-margin-top:var(--head-h);
  color:var(--d-body);
}
.contact-in{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(34px,5vw,72px);align-items:start;
}
.contact h2{
  color:#fff;font-size:clamp(2rem,4vw,3.2rem);
  letter-spacing:-.035em;line-height:1.02;margin:0 0 22px;
}
.contact-copy p{color:var(--d-body);max-width:52ch;font-size:16.5px}

.howto{
  list-style:none;counter-reset:h;margin:32px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.howto li{
  counter-increment:h;
  border:1px solid rgba(255,255,255,.16);border-radius:2px;
  padding:12px 16px;display:flex;align-items:baseline;gap:10px;
  background:rgba(255,255,255,.035);
}
.howto li::before{
  content:counter(h,decimal-leading-zero);
  font-family:var(--mono);font-size:11.5px;color:var(--blue);
}
.howto span{color:#DCE9F7;font-size:14px;font-weight:500}

.details{margin:38px 0 0}
.details div{
  border-top:1px solid rgba(255,255,255,.12);
  padding:14px 0;display:grid;grid-template-columns:150px 1fr;gap:16px;
}
.details dt{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--d-muted);padding-top:3px;
}
.details dd{margin:0;color:#fff;font-size:15.5px;font-weight:500}
.details a{color:#fff}
.details a:hover{color:var(--blue-soft)}

/* ── Form ───────────────────────────────────────────────────────── */
.form{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.14);
  border-radius:4px;padding:clamp(24px,3.4vw,34px);
}
.form h3{color:#fff;font-size:1.16rem;margin:0 0 22px;letter-spacing:-.022em}
.row{margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
.row label{
  font-size:12.5px;letter-spacing:.02em;color:#9FB6D0;font-weight:500;
}
.row input,.row select,.row textarea{
  width:100%;font-family:var(--sans);font-size:15px;color:#fff;
  background-color:rgba(3,10,22,.45);
  border:1px solid rgba(255,255,255,.18);
  border-radius:2px;padding:12px 13px;
  transition:border-color .18s ease,background-color .18s ease;
}
.row textarea{resize:vertical;min-height:104px;line-height:1.5}
.row input::placeholder,.row textarea::placeholder{color:#6F869F}
.row input:focus,.row select:focus,.row textarea:focus{
  outline:none;border-color:var(--blue);background-color:rgba(3,10,22,.7);
}
.row input:focus-visible,.row select:focus-visible,.row textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:1px;
}
.row select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#9FB6D0 50%),
                   linear-gradient(135deg,#9FB6D0 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 13px) 52%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:38px;
}
.row select option{background:#0A1830;color:#fff}
.row.invalid input{border-color:#FF7A7A}
.form .btn{width:100%;text-align:center;margin-top:6px}
.form-note{
  font-size:13px;line-height:1.5;color:var(--d-muted);
  margin:16px 0 0;max-width:none;
}
.form-note a{color:var(--blue-soft);text-decoration:underline;text-underline-offset:3px}
.form-note.is-sent{color:var(--blue-soft)}

/* ── Footer ─────────────────────────────────────────────────────── */
.foot{
  background:var(--ink);color:var(--d-muted);
  padding-block:clamp(44px,5vw,64px);
  border-top:1px solid rgba(255,255,255,.1);
}
.foot-in{
  display:grid;grid-template-columns:1fr 1.1fr 1fr;
  gap:34px;align-items:start;
}
.foot-brand .brand{margin-bottom:0}
.foot-tag{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--d-muted);margin:16px 0 0;
}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:6px}
.foot-nav a{color:#B7C8DC;font-size:14px}
.foot-nav a:hover{color:#fff;text-decoration:none}
.foot-meta{text-align:right}
.foot-meta p{font-size:13.5px;line-height:1.55;margin:0 0 10px;color:#93A8C0;max-width:34ch;margin-left:auto}
.foot-copy{color:var(--d-muted);font-size:12.5px !important}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:1040px){
  .grid-2{grid-template-columns:140px minmax(0,1fr)}
  .stack{grid-template-columns:repeat(2,1fr)}
  .contact-in{grid-template-columns:1fr;gap:44px}
  .contact-copy p{max-width:62ch}
}

@media (max-width:900px){
  .nav{
    position:fixed;inset:var(--head-h) 0 auto 0;
    background:rgba(5,12,26,.985);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.12);
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px clamp(20px,5vw,56px) 26px;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .3s ease,visibility 0s linear .3s;
  }
  .nav.is-open{max-height:78vh;visibility:visible;overflow:auto;transition:max-height .3s ease}
  .nav a{
    padding:15px 0;font-size:17px;color:#E2ECF7;
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .nav .nav-cta{
    margin-top:18px;text-align:center;border-radius:2px;
    padding:14px 18px;border:1px solid rgba(255,255,255,.3);
  }
  .nav-toggle{display:block}

  .grid-2{grid-template-columns:1fr;gap:22px}
  .col-side{position:static}
  .label{padding-top:12px}
  .col-main h2{margin-bottom:20px}

  .ledger{grid-template-columns:repeat(2,1fr);gap:22px 22px}
  .apart,.bench,.promises,.applied-grid,.cases,.models,.stack{
    grid-template-columns:1fr;
  }
  .models{gap:1px}
  .pillars li{grid-template-columns:1fr;gap:12px}
  .foot-in{grid-template-columns:1fr;gap:28px}
  .foot-meta{text-align:left}
  .foot-meta p{margin-left:0}
  .details div{grid-template-columns:1fr;gap:4px}
}

@media (max-width:560px){
  body{font-size:16px}
  .hero-in{padding-block:64px 56px}
  .hero-h1{letter-spacing:-.03em}
  .hero-acts{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
  .chips li{font-size:12.5px;padding:7px 11px}
  .ledger{grid-template-columns:1fr}
  .steps li{grid-template-columns:44px minmax(0,1fr)}
  .steps li::after{left:5px}
  .howto li{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media print{
  .head,.nav,.hero-net,.form,.nav-toggle{display:none !important}
  body{color:#000;font-size:11pt}
  .hero,.contact,.band-dark,.foot{background:#fff !important;color:#000 !important}
  .hero-h1,.contact h2,.band-dark h2,.band-dark h3{color:#000 !important}
  .acc-panel{max-height:none !important;visibility:visible !important}
}