:root {
  --cream:#fff9eb;
  --blue:#004b9b;
  --orange:#d74f00;
  --ink:#130d0d;
  --base:#090d13;
  --accent:#ed9b65;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --font-display:"Space Grotesk",sans-serif;
  --font-body:Manrope,sans-serif;
  --weight-body:400;
  --weight-heading:500;
  --weight-emphasis:600;
  --text-secondary:#fff9ebcc;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --card-padding:26px;
  --illustration-size:203px;
  --card-title-size:clamp(18px,1.55vw,25px);
  --gutter:5vw}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:20px;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent}
body {
  margin:0;
  background:var(--base);
  color:var(--cream);
  font:400 16px/1.5 var(--font-body)}
a {
  color:inherit;
  text-decoration:none;
  touch-action:manipulation}
button,summary {
  font:inherit;
  touch-action:manipulation}
a:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px}
::selection {
  background:var(--orange);
  color:var(--cream)}
.skip {
  position:fixed;
  z-index:20;
  left:20px;
  top:20px;
  background:var(--cream);
  color:var(--ink);
  padding:12px;
  transform:translateY(-180%)}
.skip:focus {
  transform:none}
.page-atmosphere {
  position:relative;
  isolation:isolate;
  overflow:clip}
.page-atmosphere>main,.ordus-footer {
  position:relative;
  z-index:1}
.content {
  width:100%;
  padding-inline:var(--gutter);
  margin-inline:auto}
h1,h2,h3,p {
  margin:0}
h1,h2,h3,.brand {
  font-family:var(--font-display)}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:37px;
  font-weight:var(--weight-emphasis);
  line-height:1;
  letter-spacing:-.07em}
.brand-symbol {
  display:block;
  width:32.0074px;
  height:32.0017px;
  flex-shrink:0;
  mask-image:url('assets/figma-2026-10-22/imgGroup.svg');
  mask-size:32px 32px;
  mask-repeat:no-repeat}
.brand-symbol img {
  display:block}
.arrow {
  display:block;
  flex-shrink:0;
  transition:transform 180ms var(--ease-out)}
.site {
  height:936px;
  position:relative;
  isolation:isolate;
  overflow:clip}
.hero-background {
  position:absolute;
  inset:0;
  z-index:-4;
  transform-origin:50% 45%}
.hero-background>img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.8)}
.hero-shade {
  position:absolute;
  inset:0;
  z-index:-3;
  background:linear-gradient(90deg,#07101980 0%,#07101930 32%,transparent 58%),linear-gradient(0deg,#080a11f5 0%,#080a1180 12%,transparent 36%),linear-gradient(180deg,#080a1199,transparent 18%)}
.hero-fade {
  position:absolute;
  inset:auto 0 0;
  height:40%;
  z-index:-2;
  background:linear-gradient(180deg,#090d1300,#090d1333 28%,#090d13b3 65%,#090d13)}
.editorial-grid {
  position:absolute;
  inset:0;
  z-index:-1;
  display:flex;
  justify-content:space-evenly;
  pointer-events:none;
  mask-image:linear-gradient(#000 60%,transparent)}
.editorial-grid i {
  width:1px;
  background:#fff9eb0c}
.header {
  height:90px;
  position:relative;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px}
.nav {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:16px;
  font-size:14px}
.nav>a {
  padding:10px 7px;
  min-height:38px;
  display:block;
  line-height:19.5px;
  cursor:pointer}
.diagnostic {
  display:inline-flex;
  align-items:center;
  gap:16px;
  min-height:43px;
  padding:12px 16px;
  background:var(--cream);
  color:var(--ink);
  border-radius:12px;
  font-size:14px;
  font-weight:var(--weight-emphasis);
  line-height:19px;
  white-space:nowrap}
.hero {
  height:846px;
  position:relative;
  padding-top:148px}
.hero-copy {
  max-width:936px;
  position:relative}
.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:28px;
  font-size:14px;
  line-height:18px}
.eyebrow>img {
  flex-shrink:0}
.eyebrow>span {
  border-left:1px solid #fff9eb60;
  padding-left:12px}
h1 {
  font-size:clamp(50px,5.4vw,96px);
  font-weight:var(--weight-heading);
  line-height:.99;
  letter-spacing:-.07em;
  max-width:785px;
  width:60vw}
.hero-description {
  font-size:16px;
  line-height:26.4px;
  max-width:467px;
  margin-top:25px}
.action-row {
  display:flex;
  align-items:center;
  gap:23px;
  margin-top:max(24px,calc(78px - var(--headline-extra,0px)))}
 .primary-cta {
  display:inline-flex;
  white-space:nowrap;
  flex-shrink:0;
  max-width:100%;
  color:var(--ink);
  align-items:center;
  gap:25px;
  background:var(--orange);
  border-radius:40px;
  min-height:56px;
  padding:6px 6px 6px 22px;
  font-size:14px;
  font-weight:var(--weight-emphasis);
  transition:transform 140ms var(--ease-out)}
.primary-cta>span {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  background:var(--cream);
  border-radius:50%;
  flex-shrink:0}
.action-note {
  font-size:12px;
  line-height:18px}
.hero-aside {
  position:absolute;
  right:var(--gutter);
  top:782px;
  width:155px;
  opacity:1;
  font-size:14px;
  line-height:19.2px}
.hero-aside>span {
  letter-spacing:.72px}
.hero-aside p {
  margin:0}
.word-watermark {
  position:absolute;
  left:calc(var(--gutter) - 8px);
  bottom:0;
  font:400 170px/.8 var(--font-display);
  letter-spacing:-.08em;
  color:#fff9eb26;
  pointer-events:none}
.statement {
  height:584px;
  position:relative}
.statement-inner {
  height:584px;
  position:relative;
  isolation:isolate;
  padding-top:105px}
.statement-inner:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(#9eacc033 1px,transparent 1px),linear-gradient(90deg,#9eacc033 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at center,#000 10%,transparent 72%)}
.statement-meta {
  display:block;
  text-align:center;
  font-size:12px;
  line-height:18px}
.statement h2 {
  font-size:clamp(35px,4.0972vw,72px);
  font-weight:var(--weight-heading);
  line-height:1.32;
  letter-spacing:-.045em;
  text-transform:uppercase;
  text-align:center;
  max-width:1265px;
  margin:95px auto 0;
  text-wrap:balance}
.statement-word {
  display:inline-block;
  opacity:1}
.motion-ready .statement {
  height:calc(584px + 65svh)}
.motion-ready .statement-inner {
  position:sticky;
  top:max(0px,calc((100svh - 584px)/2))}
.solution-showcase {
  position:relative;
  isolation:isolate;
  padding-block:90px;
  overflow:clip}
.solution-showcase:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  background:url('assets/figma-2026-10-22/imgText.png') center/cover;
  opacity:.18;
  mask-image:linear-gradient(transparent,#000 25%,#000 70%,transparent)}
.showcase-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:48px}
.showcase-kicker {
  display:block;
  font-size:12px;
  line-height:18px;
  letter-spacing:.08em;
  margin-bottom:20px}
.showcase-heading h2 {
  font-size:clamp(36px,4.4vw,78px);
  font-weight:var(--weight-heading);
  line-height:1.02;
  letter-spacing:-.055em}
.showcase-heading>p {
  font-size:14px;
  line-height:23.1px;
  padding-bottom:5px}
.solution-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px}
.solution-card {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-rows:minmax(52px,auto) minmax(93px,auto) minmax(var(--illustration-size),1fr) 1px;
  gap:var(--space-2);
  min-width:0;
  padding:var(--card-padding);
  border-radius:16px;
  border:1px solid #c2d5e51a;
  background:linear-gradient(143.885deg,#25303c60 7.735%,#151e2997 22.528%,#0e1620cf 37.321%,#080d14ed 79.585%);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 #fff9eb0b,0 18px 50px #0003;
  transition:transform 250ms var(--ease-out)}
.solution-card:before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:40% -20% -30%;
  opacity:.24;
  background:radial-gradient(ellipse at 60% 60%,#277fc84a,transparent 60%);
  pointer-events:none;
  transition:opacity 250ms ease}
.solution-card:nth-child(2):before,.solution-card:nth-child(4):before {
  background:radial-gradient(ellipse at 60% 60%,#d7743242,transparent 60%)}
.solution-card:nth-child(5):before {
  background:radial-gradient(ellipse at 60% 60%,#b65f2b36,transparent 60%)}
.solution-card:after {
  content:'';
  position:absolute;
  inset:0;
  border:1px solid #dce9ef4a;
  opacity:.5;
  border-radius:inherit;
  pointer-events:none;
  transition:opacity 250ms ease;
  box-shadow:inset 0 0 40px #004b9b26}
.solution-card-top {
  display:flex;
  align-items:flex-start;
  gap:13px;
  min-height:52px}
.solution-card-icon {
  display:grid;
  place-items:center;
  width:28px;
  height:32px;
  flex-shrink:0;
  opacity:.75}
.solution-card-icon img {
  display:block}
.solution-card h3 {
  font-size:var(--card-title-size);
  line-height:1.2;
  font-weight:var(--weight-emphasis);
  letter-spacing:-.035em;
  color:var(--cream)}
.solution-card>p {
  font-size:14px;
  line-height:23.1px;
  color:var(--text-secondary);
  margin:0}
.solution-diagram {
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
  min-height:var(--illustration-size)}
.solution-diagram img {
  display:block;
  width:var(--illustration-size);
  height:var(--illustration-size);
  object-fit:contain;
  transition:transform 250ms var(--ease-out)}
.card-baseline {
  display:block;
  border-top:1px solid #c5dae710}
.ordus-spotlight {
  height:782px;
  position:relative;
  overflow:clip}
.spotlight-copy {
  position:relative;
  z-index:1;
  padding-top:178px;
  max-width:524px}
.spotlight-copy h2 {
  font-size:clamp(37px,4.25vw,75px);
  font-weight:var(--weight-heading);
  line-height:1.04;
  letter-spacing:-.055em;
  text-wrap:wrap}
.spotlight-copy h2 span,.footer-invitation h2 span {
  color:var(--accent)}
.spotlight-copy>p {
  font-size:16px;
  line-height:26.25px;
  max-width:440px;
  margin:27px 0 30px}
.spotlight-art {
  position:absolute;
  left:38.2056%;
  top:80px;
  width:64.795%;
  height:622px;
  pointer-events:none}
.spotlight-art>img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block}
.spotlight-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#090d13,transparent 14%,transparent 90%,#090d13),linear-gradient(180deg,#090d13,transparent 12%,transparent 78%,#090d13),radial-gradient(ellipse at 55% 48%,transparent 30%,#090d131a 48%,#090d13 73%)}
.ordus-footer {
  z-index:3;
  padding-top:75px;
  background:var(--base)}
.ordus-footer::before {
  content:"";
  position:absolute;
  inset:auto 0 100%;
  height:180px;
  background:linear-gradient(to bottom,transparent 0%,#090d1333 25%,#090d1399 60%,var(--base) 100%);
  pointer-events:none}
.footer-top {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:48px;
  padding-bottom:60px;
  min-height:263px}
.footer-eyebrow {
  display:block;
  font-size:12px;
  line-height:19.2px;
  letter-spacing:.04em;
  margin-bottom:27px}
.footer-invitation h2 {
  font-size:clamp(40px,5.3vw,92px);
  line-height:1.02;
  font-weight:var(--weight-heading);
  letter-spacing:-.06em}
.footer-contact {
  width:287px;
  flex-shrink:0;
  align-self:flex-end;
  margin-bottom:8px}
.footer-contact>span {
  font-size:12px;
  line-height:18px;
  letter-spacing:.06em;
  display:block;
  margin-bottom:10px}
.footer-contact>a {
  display:flex;
  align-items:center;
  gap:22px;
  font:400 clamp(18px,1.7vw,26px)/1.5 var(--font-display);
  letter-spacing:-.025em;
  min-height:40px;
  white-space:nowrap}
.footer-contact p {
  font-size:13px;
  line-height:22.1px;
  color:var(--text-secondary);
  margin-top:13px;
  white-space:nowrap}
.footer-base {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:32px;
  min-height:183px;
  padding-block:50.6px 49px}
.footer-description p {
  margin-top:23px;
  font-size:14px;
  line-height:23.8px;
  color:var(--text-secondary)}
.footer-copyright,.footer-base>a {
  font-size:12px;
  line-height:19.2px;
  color:var(--text-secondary)}
.footer-base>a {
  justify-self:end;
  display:flex;
  align-items:center;
  gap:20px;
  min-height:32px}
.ordus-footer .brand {
  font-size:37px;
  gap:10px}
.ordus-footer .brand-symbol {
  width:32.0074px;
  height:32.0017px;
  transform:none}
.ambient-lights {
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none}
.ambient-lights i {
  position:absolute;
  width:85vw;
  height:440px;
  border-radius:50%;
  filter:blur(40px);
  opacity:.95;
  background:radial-gradient(ellipse,#0753a84d,#004b9b26 30%,#004b9b0c 50%,transparent 72%);
  transform:rotate(-32deg)}
.ambient-lights i:nth-child(1) {
  top:-2%;
  left:-48%;
  transform:rotate(-40deg)}
.ambient-lights i:nth-child(2) {
  top:11%;
  right:-45%;
  height:600px;
  background:radial-gradient(ellipse,#d74f0040,#d74f001c 38%,transparent 70%);
  transform:rotate(28deg)}
.ambient-lights i:nth-child(3) {
  top:26%;
  left:-46%;
  height:680px;
  transform:rotate(-25deg)}
.ambient-lights i:nth-child(4) {
  top:38%;
  right:-47%;
  transform:rotate(35deg)}
.ambient-lights i:nth-child(5) {
  top:47%;
  left:-39%;
  background:radial-gradient(ellipse,#d74f0044,#d74f0018 36%,transparent 70%);
  transform:rotate(-36deg)}
.ambient-lights i:nth-child(6) {
  top:59%;
  right:-40%;
  height:730px;
  transform:rotate(26deg)}
.ambient-lights i:nth-child(7) {
  top:72%;
  left:-38%;
  height:620px;
  transform:rotate(-30deg)}
.ambient-lights i:nth-child(8) {
  top:82%;
  right:-44%;
  height:640px;
  background:radial-gradient(ellipse,#d74f003d,#d74f0016 40%,transparent 70%);
  transform:rotate(32deg)}
.ambient-lights i:nth-child(9) {
  top:93%;
  left:-28%;
  transform:rotate(-20deg)}

@media(hover:hover) and (pointer:fine) {
  .primary-cta:hover .arrow,.diagnostic:hover .arrow {
  transform:translate(2px,-2px)}
.solution-card:hover {
  transform:translateY(-5px)}
.solution-card:hover:before,.solution-card:focus-visible:before {
  opacity:1}
.solution-card:hover:after,.solution-card:focus-visible:after {
  opacity:1}
.solution-card:hover .solution-diagram img {
  transform:translateY(-7px) scale(1.025)}
.nav a:hover,.footer-nav a:hover {
  color:var(--accent)}
.footer-contact a:hover .arrow,.footer-base>a:hover .arrow {
  transform:translate(2px,-2px)}
}
.primary-cta:active,.diagnostic:active {
  transform:scale(.98)}

@media(min-width:1600px) {
  .site {
  height:65vw}
.hero {
  height:calc(65vw - 90px)}
h1 {
  max-width:55vw}
.hero-copy {
  padding-top:2vw}
.hero-aside {
  top:65%}
.statement h2 {
  max-width:88vw}
:root {
  --illustration-size:224px}
.spotlight-copy {
  max-width:37vw}
.spotlight-art {
  height:auto;
  aspect-ratio:1.5}
.ordus-spotlight {
  height:57vw}
}

@media(max-width:1100px) {
  .nav {
  left:48%}
.diagnostic {
  font-size:12px;
  gap:10px}
.hero-copy {
  max-width:85%}
.hero-aside {
  right:4vw;
  width:125px;
  font-size:12px}
:root {
  --card-padding:21px;
  --card-title-size:18px}
.spotlight-copy {
  max-width:40vw}
.spotlight-copy h2 {
  font-size:44px}
.spotlight-copy>p {
  font-size:14px;
  max-width:35vw}
.footer-contact>a {
  gap:10px}
}

@media(max-width:900px) {
  .solution-cards {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.hero {
  padding-top:125px}
.hero-aside {
  display:none}
h1 {
  width:76vw;
  font-size:clamp(52px,7vw,70px);
  max-width:720px}
.hero-description {
  max-width:430px}
.solution-showcase {
  padding-block:65px}
.showcase-heading h2 {
  font-size:47px}
.spotlight-copy h2 {
  font-size:40px}
.spotlight-copy>p {
  max-width:36vw}
}

@media(max-width:650px) {
  :root {
  --gutter:20px}
.header {
  height:80px;
  align-items:center}
.brand {
  font-size:31px;
  gap:7px}
.brand-symbol {
  transform:scale(.85);
  transform-origin:left center;
  width:29px}
.header>.diagnostic {
  font-size:12px;
  gap:8px;
  padding:10px;
  min-height:42px}
.nav {
  top:82px;
  left:20px;
  transform:none;
  gap:14px;
  font-size:13px}
.nav>a {
  padding-inline:2px}
.site {
  height:auto;
  min-height:970px}
.hero {
  height:auto;
  min-height:890px;
  padding-top:70px;
  padding-bottom:80px}
.hero-copy {
  max-width:none}
.eyebrow {
  font-size:12px;
  gap:10px;
  margin-bottom:26px}
.eyebrow>span {
  padding-left:10px}
.eyebrow>img {
  width:24px;
  height:24px}
h1 {
  width:100%;
  font-size:clamp(43px,10.8vw,66px);
  line-height:1.02;
  max-width:600px;
  letter-spacing:-.065em}
.hero-background {
  top:250px;
  bottom:170px;
  mask-image:linear-gradient(transparent,#000 18%,#000 78%,transparent)}
.hero-background>img {
  object-position:63% center}
.hero-shade {
  background:linear-gradient(0deg,#090d13,transparent 45%,#090d1340 70%,#090d13 94%)}
.hero-fade {
  height:160px}
.hero-description {
  margin-top:clamp(150px,48vw,260px);
  font-size:15px;
  line-height:25px;
  max-width:360px}
.action-row {
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-2);
  margin-top:var(--space-3)}
.primary-cta {
  font-size:13px;
  gap:18px;
  padding-left:18px;
  min-height:54px}
.primary-cta>span {
  width:42px;
  height:42px}
.action-note {
  display:none}
.word-watermark {
  display:none}
.statement,.statement-inner {
  height:530px}
.statement-inner {
  padding-top:65px}
.statement h2 {
  text-align:left;
  font-size:clamp(30px,7.9vw,43px);
  line-height:1.24;
  margin-top:65px;
  letter-spacing:-.045em}
.motion-ready .statement {
  height:calc(530px + 45svh)}
.motion-ready .statement-inner {
  top:max(0px,calc((100svh - 530px)/2))}
.solution-showcase {
  padding-block:50px}
.showcase-heading {
  display:block;
  margin-bottom:32px}
.showcase-heading h2 {
  font-size:clamp(36px,9vw,52px)}
.showcase-heading>p {
  margin-top:22px}
.showcase-kicker {
  font-size:12px;
  margin-bottom:18px}
.solution-cards {
  grid-template-columns:minmax(0,1fr);
  gap:20px}
:root {
  --card-padding:24px;
  --card-title-size:21px;
  --illustration-size:189px}
.ordus-spotlight {
  height:auto;
  min-height:800px;
  padding-top:55px;
  padding-bottom:350px}
.spotlight-copy {
  max-width:none;
  padding-top:0}
.spotlight-copy h2 {
  font-size:clamp(39px,10vw,59px);
  max-width:500px}
.spotlight-copy>p {
  font-size:15px;
  max-width:440px;
  line-height:25px;
  margin-top:24px}
.spotlight-art {
  top:auto;
  bottom:0;
  left:-8%;
  width:124%;
  height:auto;
  aspect-ratio:1.5}
.spotlight-copy .diagnostic {
  font-size:13px}
.ordus-footer {
  padding-top:50px}
.footer-top {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:36px;
  padding-bottom:0;
  min-height:0}
.footer-eyebrow {
  max-width:310px;
  line-height:20px;
  margin-bottom:25px}
.footer-invitation h2 {
  font-size:clamp(32px,8.6vw,55px)}
.footer-contact {
  align-self:start;
  width:auto;
  max-width:100%;
  margin-bottom:0}
.footer-contact>a {
  font-size:20px;
  gap:16px}
.footer-contact p {
  white-space:normal}
.footer-base {
  grid-template-columns:1fr auto;
  gap:30px 16px;
  padding-block:48px calc(26px + env(safe-area-inset-bottom));
  min-height:0}
.footer-description {
  grid-column:1/-1}
.footer-description p {
  margin-top:23px}
.footer-copyright {
  max-width:180px}
.ambient-lights i {
  width:760px;
  height:520px;
  filter:blur(32px);
  opacity:.65}
.ambient-lights i:nth-child(odd) {
  left:-550px}
.ambient-lights i:nth-child(even) {
  right:-540px}
}

@media(max-width:380px) {
  :root {
  --gutter:16px}
.nav {
  left:16px}
.header>.diagnostic {
  font-size:12px;
  padding:8px 10px;
  white-space:normal;
  max-width:170px;
  line-height:15px;
  gap:6px}
.brand {
  font-size:28px;
  gap:3px}
.site {
  min-height:940px}
.hero {
  min-height:860px}
.action-row {
  gap:12px}
.primary-cta {
  font-size:12px;
  gap:14px;
  padding-left:15px}
:root {
  --card-padding:20px;
  --card-title-size:19px;
  --illustration-size:175px}
.solution-card-top {
  gap:10px}
}

.menu-toggle {
  display:none}

@media(max-width:650px) {
.header>.diagnostic {
  display:none}

.menu-toggle {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:10px;
  background:transparent;
  color:var(--cream);
  border:1px solid #fff9eb30;
  border-radius:10px;
  cursor:pointer}

.menu-toggle>span {
  display:block;
  height:1px;
  width:22px;
  background:currentColor;
  transition:transform 180ms var(--ease-out),opacity 180ms var(--ease-out)}

.menu-toggle[aria-expanded="true"]>span:nth-child(1) {
  transform:translateY(6px) rotate(45deg)}

.menu-toggle[aria-expanded="true"]>span:nth-child(2) {
  opacity:0}

.menu-toggle[aria-expanded="true"]>span:nth-child(3) {
  transform:translateY(-6px) rotate(-45deg)}

.nav {
  display:none;
  position:absolute;
  top:72px;
  left:var(--gutter);
  right:var(--gutter);
  transform:none;
  padding:12px;
  background:#090d13f5;
  border:1px solid #fff9eb26;
  border-radius:12px;
  box-shadow:0 16px 40px #0006;
  font-size:14px}

.header.menu-open .nav {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0}

.nav>a {
  padding:12px;
  min-height:44px}

}

.menu-toggle:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px}


@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
.motion-ready .statement {
  height:584px}
.motion-ready .statement-inner {
  position:relative;
  top:0}
.statement-word {
  opacity:1!important}
.arrow,.solution-card,.solution-diagram img,.primary-cta,.menu-toggle>span {
  transition:none}
.solution-card:hover,.solution-card:hover .solution-diagram img,.primary-cta:active,.diagnostic:active {
  transform:none}
.hero-background {
  transform:none!important}
}

@media(prefers-reduced-motion:reduce) and (max-width:650px) {
  .motion-ready .statement {
  height:530px}
}


.headline-phrase {
  position:relative;
  color:var(--accent)}
.headline-measure {
  position:absolute!important;
  visibility:hidden;
  pointer-events:none;
  inset:0 auto auto 0;
  min-height:0!important}


.footer-contact>.footer-instagram {
  margin-top:4px}


@media(min-width:651px) and (max-width:1100px) {
.footer-top {gap:32px}
.footer-invitation h2 {font-size:5vw}
.footer-contact {width:250px}
.footer-contact p {white-space:normal}
.footer-base {gap:24px}
}