/* ---------- tokens ---------- */
:root {
  --ink:        oklch(0.176 0.010 60);
  --ink-soft:   oklch(0.215 0.010 60);
  --ink-line:   oklch(0.30  0.008 60);
  --paper:      oklch(0.945 0.012 82);
  --paper-soft: oklch(0.905 0.014 82);
  --paper-line: oklch(0.82  0.014 82);
  --fg:         var(--paper);
  --fg-dim:     oklch(0.78 0.012 80);
  --bg:         var(--ink);
  --gold:       oklch(0.80 0.14 86);
  --gold-soft:  oklch(0.72 0.12 86);
  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Work Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","ss02","kern";
}
::selection{ background:var(--gold); color:var(--ink); }

/* ---------- layout primitives ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
section{ position:relative; }

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30, "WONK" 0;
  line-height:1.02;
  letter-spacing:-0.015em;
  margin:0;
  text-wrap:balance;
}
.display{
  font-size:clamp(44px, 7.6vw, 116px);
  font-weight:300;
  letter-spacing:-0.025em;
  line-height:0.98;
}
.display em{
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 80, "WONK" 1;
  font-weight:300;
}
.h-section{
  font-size:clamp(34px, 4.6vw, 64px);
  font-weight:350;
  letter-spacing:-0.02em;
  line-height:1.0;
}
.h-section em{ font-style:italic; }
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.lede{
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(18px, 1.55vw, 22px);
  line-height:1.5;
  color:var(--fg-dim);
  max-width:54ch;
  text-wrap:pretty;
}
p{ text-wrap:pretty; }

/* ---------- links ---------- */
a{ color:inherit; text-decoration:none; }
.link-underline{ position:relative; display:inline-block; padding-bottom:2px; }
.link-underline::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:1px;
  width:100%;
  background:currentColor;
  transform-origin:left;
  transform:scaleX(.4);
  transition:transform .5s cubic-bezier(.2,.7,0,1), background-color .3s;
}
.link-underline:hover::after{ transform:scaleX(1); }

/* ---------- header ---------- */
header.site{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding:22px var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(to bottom, color-mix(in oklch, var(--ink) 88%, transparent) 0%, color-mix(in oklch, var(--ink) 0%, transparent) 100%);
  backdrop-filter:blur(0px);
  transition:background .3s ease, backdrop-filter .3s ease, color .4s ease;
  mix-blend-mode:normal;
  color:var(--paper);
}
header.site.scrolled{
  background:color-mix(in oklch, var(--ink) 78%, transparent);
  backdrop-filter:blur(10px);
}
header.site.on-paper{
  color:var(--ink);
  background:color-mix(in oklch, var(--paper) 78%, transparent);
}
.wordmark{
  display:inline-flex;
  align-items:center;
  line-height:1;
}
.wordmark-logo{
  height:28px;
  width:auto;
  display:block;
  transition:filter .4s ease;
}
header.site.on-paper .wordmark-logo{
  filter:invert(1);
}
nav.primary ul{
  display:flex;
  gap:34px;
  list-style:none;
  margin:0; padding:0;
  font-size:14px;
  font-weight:400;
  letter-spacing:0.01em;
}
nav.primary a{ opacity:.85; }
nav.primary a:hover{ opacity:1; }

/* ---------- hero ---------- */
.hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-top:120px;
  padding-bottom:64px;
}
.hero .meta-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  margin-bottom:clamp(48px, 9vh, 110px);
  color:var(--fg-dim);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.hero .meta-row .right{ text-align:right; }
.hero .display{ max-width:14ch; }
.hero .lede{ margin-top:36px; max-width:46ch; }
.hero .scroll-cue{
  margin-top:clamp(70px, 14vh, 130px);
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.hero .scroll-cue .rule{
  display:inline-block;
  width:46px; height:1px;
  background:currentColor;
  opacity:.6;
}
.hero .scroll-cue .arrow{
  display:inline-block;
  width:10px; height:10px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
}

/* ---------- apps opener ---------- */
.apps-opener{
  padding:clamp(80px,12vh,160px) 0 clamp(60px,8vh,100px);
  border-top:1px solid var(--ink-line);
}
.apps-opener .row{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:clamp(40px,8vw,120px);
  align-items:start;
}
.apps-opener .label{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fg-dim);
  padding-top:18px;
}
.apps-opener .text{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(28px,3.4vw,46px);
  line-height:1.1;
  letter-spacing:-0.015em;
  max-width:24ch;
  color:var(--paper);
}
.apps-opener .text em{ font-style:italic; }

/* ---------- app block — CH (dark) ---------- */
.app{ padding:clamp(80px,11vh,140px) 0; }
.app-ch{ background:var(--ink); color:var(--paper); }
.app-grid{
  display:grid;
  grid-template-columns:5fr 7fr;
  gap:clamp(36px,6vw,90px);
  align-items:center;
}
.app-meta .index{
  font-family:var(--serif);
  font-size:14px;
  font-style:italic;
  color:var(--fg-dim);
  margin-bottom:28px;
  display:flex;
  align-items:center;
  gap:14px;
}
.app-meta .index .swatch{
  display:inline-block;
  width:10px; height:10px;
  border-radius:50%;
}
.app-ch .app-meta .index .swatch{ background:var(--gold); }
.app-name{
  font-family:var(--serif);
  font-size:clamp(40px,5.2vw,76px);
  font-weight:350;
  letter-spacing:-0.02em;
  line-height:0.98;
  margin:0 0 6px;
}
.app-name em{ font-style:italic; font-weight:300; }
.app-ch .app-name em{ color:var(--gold); }
.app-logo-slot{ display:flex; align-items:center; gap:14px; margin:36px 0 20px; }
.app-logo-slot .logo-box{
  width:64px; height:64px;
  border:1px dashed currentColor;
  border-radius:14px;
  opacity:.45;
  position:relative;
  flex:0 0 auto;
}
.app-logo-slot .logo-box::after{
  content:"LOGO";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:"Work Sans", monospace;
  font-size:9px;
  letter-spacing:0.2em;
  opacity:.7;
}
.app-logo-slot .app-icon{
  width:64px; height:64px;
  border-radius:14px;
  display:block;
  flex:0 0 auto;
}
.app-logo-slot .logo-meta{
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
  line-height:1.3;
}
.app-logo-slot .logo-meta b{
  display:block;
  font-weight:500;
  letter-spacing:0.02em;
  text-transform:none;
  color:inherit;
  font-size:13px;
  margin-bottom:2px;
}
.app-copy{
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.55;
  max-width:34ch;
  margin:14px 0 32px;
  color:var(--fg);
  font-weight:350;
}
.app-ch .app-copy{ color:var(--paper); }
.app-ctas{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.app-cta--android{
  opacity:0.45;
}
.app-cta--android:hover{
  opacity:1;
}
.app-cta{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  font-size:15px;
  letter-spacing:0.02em;
  padding-bottom:3px;
  position:relative;
}
.app-cta .arrow{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  transform:translateY(1px);
  transition:transform .4s cubic-bezier(.2,.7,0,1);
}
.app-cta:hover .arrow{ transform:translate(4px,1px); }
.app-ch .app-cta{ color:var(--gold); }
.app-ch .app-cta::after{ background:var(--gold); }

/* landscape app-screen placeholder */
.screen{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 10;
  border-radius:14px;
  overflow:hidden;
  transform:translateY(40px);
  opacity:0;
  transition:opacity 1.2s cubic-bezier(.2,.7,0,1), transform 1.2s cubic-bezier(.2,.7,0,1);
}
.screen.in{ opacity:1; transform:translateY(0); }

/* CH screen — real app screenshot */
.screen-ch{
  aspect-ratio:unset;
  display:flex;
  flex-direction:column;
  background:#ebebeb;
  border:1px solid var(--ink-line);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.7),
    0 1px 0 0 rgba(255,255,255,.04) inset;
}
.screen-ch .ch-bar{
  height:28px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  font-family:"Work Sans", monospace;
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(245,238,224,.5);
  background:#0e0d0b;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.screen-ch .ch-bar .dot{
  display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:var(--gold);
  margin-right:8px;
  transform:translateY(-1px);
  vertical-align:middle;
}
.screen-ch .ch-footer{
  flex-shrink:0;
  display:flex;
  justify-content:flex-end;
  padding:10px 14px;
  background:#0e0d0b;
  border-top:1px solid rgba(255,255,255,.07);
}
.screen-ch .placeholder-stamp{
  font-family:"Work Sans", monospace;
  font-size:9px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(245,238,224,.35);
}

/* swatch sliver */
.color-detail{
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:12px;
  font-family:"Work Sans", monospace;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.color-detail .strip{
  display:inline-flex;
  height:6px;
  border-radius:1px;
  overflow:hidden;
}
.app-ch .color-detail .strip{
  width:84px;
  background:
    linear-gradient(to right,
      oklch(0.62 0.20 25) 0 16.6%,
      oklch(0.72 0.17 60) 16.6% 33.3%,
      oklch(0.80 0.14 86) 33.3% 50%,
      oklch(0.70 0.16 150) 50% 66.6%,
      oklch(0.62 0.14 230) 66.6% 83.3%,
      oklch(0.58 0.18 310) 83.3% 100%);
}

/* ---------- app block — HS (paper / inverted) ---------- */
.app-hs{ background:var(--paper); color:var(--ink); }
.app-hs .app-meta .index{ color:oklch(0.42 0.012 60); }
.app-hs .app-meta .index .swatch{ background:var(--ink); }
.app-hs .app-name em{ color:var(--ink); font-weight:300; }
.app-hs .app-copy{ color:var(--ink); }
.app-hs .app-cta{ color:var(--ink); }
.app-hs .app-logo-slot .logo-meta{ color:oklch(0.42 0.012 60); }

/* HS screen — real app screenshot, no crop */
.screen-hs{
  aspect-ratio:unset;
  display:flex;
  flex-direction:column;
  background:#f5f4f1;
  border:1px solid var(--paper-line);
  box-shadow:
    0 40px 90px -40px rgba(20,16,8,.25),
    0 1px 0 0 rgba(0,0,0,.04) inset;
}
.screen-hs .hs-bar{
  height:28px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  font-family:"Work Sans", monospace;
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:oklch(0.42 0.012 60);
  border-bottom:1px solid var(--paper-line);
}
.screen-hs .hs-bar .dot{
  display:inline-block;
  width:6px; height:6px; border-radius:50%;
  background:var(--ink);
  margin-right:8px;
  transform:translateY(-1px);
  vertical-align:middle;
}
.screen-img{
  width:100%;
  height:auto;
  display:block;
}
.screen-hs .hs-footer{
  flex-shrink:0;
  display:flex;
  justify-content:flex-end;
  padding:10px 14px;
  border-top:1px solid var(--paper-line);
}
.screen-hs .placeholder-stamp{
  font-family:"Work Sans", monospace;
  font-size:9px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:oklch(0.45 0.012 60);
}
.app-hs .color-detail .strip{
  width:84px;
  background:
    linear-gradient(to right,
      oklch(0.65 0.16 25) 0 16.6%,
      oklch(0.74 0.14 60) 16.6% 33.3%,
      oklch(0.80 0.13 92) 33.3% 50%,
      oklch(0.68 0.14 150) 50% 66.6%,
      oklch(0.60 0.13 230) 66.6% 83.3%,
      oklch(0.55 0.15 310) 83.3% 100%);
}
.app-hs .color-detail{ color:oklch(0.42 0.012 60); }

/* ---------- who makes this ---------- */
.who{
  padding:clamp(100px,14vh,180px) 0 clamp(80px,10vh,120px);
  border-top:1px solid var(--ink-line);
}
.who-grid{
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:clamp(40px,8vw,120px);
  align-items:start;
}
.who h2{ max-width:11ch; }
.who h2 em{ font-style:italic; }
.who p{
  font-size:clamp(16px,1.2vw,19px);
  line-height:1.6;
  color:var(--fg-dim);
  max-width:48ch;
  font-weight:350;
}
.who p + p{ margin-top:1.2em; }
.who .pair{
  margin-top:32px;
  display:flex;
  gap:18px;
  font-family:"Work Sans", monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.who .pair span{
  padding:6px 12px;
  border:1px solid var(--ink-line);
  border-radius:99px;
}

/* ---------- contact ---------- */
.contact{
  padding:clamp(80px,10vh,140px) 0 clamp(100px,14vh,170px);
  border-top:1px solid var(--ink-line);
}
.contact-grid{
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:clamp(40px,8vw,120px);
  align-items:start;
}
.contact h2{ max-width:9ch; }
.contact h2 em{ font-style:italic; color:var(--gold); }
.contact .invite{
  margin-top:24px;
  font-size:clamp(16px,1.2vw,19px);
  line-height:1.6;
  color:var(--fg-dim);
  max-width:42ch;
  font-weight:350;
}
form.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--ink-line);
}
form.contact-form .field{
  position:relative;
  padding:18px 0 16px;
  border-bottom:1px solid var(--ink-line);
}
form.contact-form .field.full{ grid-column:1 / -1; }
form.contact-form .field:nth-child(1){ border-right:1px solid var(--ink-line); padding-right:24px; }
form.contact-form .field:nth-child(2){ padding-left:24px; }
form.contact-form label{
  display:block;
  font-family:"Work Sans", monospace;
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fg-dim);
  margin-bottom:8px;
}
form.contact-form input,
form.contact-form textarea{
  width:100%;
  background:transparent;
  border:0;
  outline:0;
  color:inherit;
  font:inherit;
  font-size:18px;
  padding:4px 0;
  resize:none;
}
form.contact-form textarea{ min-height:96px; line-height:1.45; }
form.contact-form input::placeholder,
form.contact-form textarea::placeholder{
  color:color-mix(in oklch, var(--fg-dim) 60%, transparent);
  font-style:italic;
  font-family:var(--serif);
  font-weight:300;
}
form.contact-form .submit-row{
  grid-column:1 / -1;
  display:flex;
  justify-content:flex-end;
  padding-top:22px;
}
button.send{
  background:transparent;
  border:0;
  color:var(--gold);
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:28px;
  cursor:pointer;
  padding:0 0 4px 0;
  position:relative;
  letter-spacing:-0.01em;
}
button.send::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:var(--gold);
  transform:scaleX(.5);
  transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,0,1);
}
button.send:hover::after{ transform:scaleX(1); }
button.send .arrow{
  font-style:normal;
  margin-left:10px;
  display:inline-block;
  transition:transform .4s cubic-bezier(.2,.7,0,1);
}
button.send:hover .arrow{ transform:translateX(6px); }
form.contact-form .form-status{
  grid-column:1 / -1;
  margin:0;
  padding-top:10px;
  font-size:13px;
  letter-spacing:.02em;
  color:var(--fg-dim);
  font-family:var(--sans);
  min-height:1.2em;
}

/* ---------- footer ---------- */
footer.site{
  border-top:1px solid var(--ink-line);
  padding:56px var(--gutter) 0;
}

/* shared inner container */
footer.site .ft-inner{
  max-width:var(--maxw);
  margin:0 auto;
}

/* ── row 1 — brand + apps ── */
footer.site .ft-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  padding-bottom:40px;
}
footer.site .ft-wordmark{
  display:inline-flex;
  align-items:center;
  line-height:1;
}
footer.site .ft-wordmark .wordmark-logo{
  height:36px;
  width:auto;
  display:block;
  opacity:0.9;
}
footer.site .ft-apps{
  display:flex;
  gap:32px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--fg-dim);
  letter-spacing:0.01em;
}

/* ── row 2 — contact + address ── */
footer.site .ft-mid{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  border-top:1px solid var(--ink-line);
  padding:28px 0;
}
footer.site .ft-contact{
  display:flex;
  flex-direction:column;
  gap:8px;
}
footer.site .ft-contact-label{
  font-family:"Work Sans", monospace;
  font-size:9px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:oklch(0.45 0.008 60);
}
footer.site .ft-email{
  font-family:var(--serif);
  font-size:15px;
  font-weight:300;
  font-style:italic;
  color:var(--paper);
  letter-spacing:0.01em;
  position:relative;
  display:inline-block;
  padding-bottom:2px;
}
footer.site .ft-email::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:1px;
  width:100%;
  background:var(--paper);
  transform-origin:left;
  transform:scaleX(.35);
  transition:transform .5s cubic-bezier(.2,.7,0,1);
}
footer.site .ft-email:hover::after{ transform:scaleX(1); }

footer.site .ft-address{
  text-align:right;
}
footer.site .ft-address-label{
  font-family:"Work Sans", monospace;
  font-size:9px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:oklch(0.45 0.008 60);
  margin-bottom:8px;
}
footer.site .ft-address-text{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:14px;
  color:var(--fg-dim);
  line-height:1.55;
}

/* ── row 3 — legal bar ── */
footer.site .ft-legal{
  border-top:1px solid var(--ink-line);
  padding:22px 0 48px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
footer.site .ft-legal-links{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  font-family:"Work Sans", monospace;
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
footer.site .ft-legal-links a{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
  opacity:.75;
  transition:opacity .3s;
}
footer.site .ft-legal-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  height:1px;
  width:100%;
  background:currentColor;
  transform-origin:left;
  transform:scaleX(0);
  transition:transform .45s cubic-bezier(.2,.7,0,1);
}
footer.site .ft-legal-links a:hover{ opacity:1; }
footer.site .ft-legal-links a:hover::after{ transform:scaleX(1); }

footer.site .ft-legal-sep{
  color:oklch(0.38 0.008 60);
  user-select:none;
}

footer.site .ft-corp{
  font-family:"Work Sans", monospace;
  font-size:9px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:oklch(0.42 0.008 60);
  text-align:right;
  line-height:1.7;
}
footer.site .ft-corp strong{
  font-weight:500;
  color:oklch(0.52 0.008 60);
  letter-spacing:0.1em;
}

/* responsive */
@media (max-width: 640px){
  footer.site .ft-top{ flex-direction:column; gap:20px; }
  footer.site .ft-mid{ flex-direction:column; gap:20px; }
  footer.site .ft-address{ text-align:left; }
  footer.site .ft-legal{ flex-direction:column; gap:16px; }
  footer.site .ft-corp{ text-align:left; }
}

/* ---------- entry choreography (hero) ---------- */
.stagger > *{
  opacity:0;
  transform:translateY(14px);
  animation:rise 1.05s cubic-bezier(.2,.7,0,1) forwards;
}
.stagger > *:nth-child(1){ animation-delay:.05s; }
.stagger > *:nth-child(2){ animation-delay:.25s; }
.stagger > *:nth-child(3){ animation-delay:.45s; }
.stagger > *:nth-child(4){ animation-delay:.85s; }
.stagger > *:nth-child(5){ animation-delay:1.05s; }

@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* in-view fade for scroll */
.fade-up{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1.1s cubic-bezier(.2,.7,0,1), transform 1.1s cubic-bezier(.2,.7,0,1);
}
.fade-up.in{ opacity:1; transform:translateY(0); }

/* ---------- responsive ---------- */
@media (max-width: 880px){
  nav.primary ul{ gap:20px; font-size:13px; }
  .hero{ padding-top:110px; }
  .hero .meta-row{ flex-direction:column; align-items:flex-start; gap:6px; }
  .hero .meta-row .right{ text-align:left; }
  .apps-opener .row{ grid-template-columns:1fr; gap:18px; }
  .app-grid{ grid-template-columns:1fr; gap:40px; }
  .who-grid{ grid-template-columns:1fr; gap:30px; }
  .contact-grid{ grid-template-columns:1fr; gap:30px; }
  form.contact-form{ grid-template-columns:1fr; }
  form.contact-form .field:nth-child(1){ border-right:0; padding-right:0; }
  form.contact-form .field:nth-child(2){ padding-left:0; }
  .screen-ch .holes{ grid-template-columns:repeat(10,1fr); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .fade-up, .screen{ opacity:1 !important; transform:none !important; }
}