/* ============================================================
   Meijhuis Medical Software
   Palette sampled from logo.png: #1050A8 #1868C0 #1898B8 #48C0C8
   ============================================================ */

:root{
  /* ink */
  --ink:#0B1A2B;
  --ink-2:#3E5061;
  --ink-3:#7A8B9B;

  /* brand, straight off the logo */
  --blue-deep:#0F4E9C;
  --blue:#1868C0;
  --teal:#1898B8;
  --teal-lt:#48C0C8;

  /* surfaces */
  --paper:#FFFFFF;
  --wash:#F3F8FB;
  --line:#DEE9F0;
  --line-2:#C9DCE8;
  --deep:#08213A;
  --bad:#B4402E;

  /* type */
  --f-display:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* rhythm */
  --shell:1180px;
  --pad-x:clamp(1.25rem,5vw,2.5rem);
  --sec-y:clamp(4.5rem,9vw,8rem);
  --r:14px;

  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,video{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}

html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad-x)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue-deep);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 8px 0;
  font-weight:600;font-size:.9rem;
}
.skip:focus{left:0}

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

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:1.15rem;
}

.lead{
  font-size:clamp(1.075rem,1.35vw,1.2rem);
  line-height:1.62;
  color:var(--ink-2);
  max-width:34em;
}
.sec-head{max-width:44rem;margin-bottom:clamp(2.75rem,5vw,4rem)}
.sec-head--mid{margin-inline:auto;text-align:center;max-width:52rem}
.sec-head__h{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(1.9rem,3.5vw,2.85rem);
  line-height:1.16;
  letter-spacing:-.015em;
  color:var(--ink);
  text-wrap:balance;
}
.sec-head__p{margin-top:1.15rem;font-size:1.08rem;color:var(--ink-2);max-width:36em}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.6rem;
  border-radius:999px;
  background:var(--blue-deep);
  color:#fff;
  font-weight:600;font-size:.95rem;letter-spacing:.005em;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
  box-shadow:0 1px 2px rgba(11,26,43,.14);
}
.btn:hover{background:#0d4489;transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(15,78,156,.55)}
.btn--sm{padding:.6rem 1.15rem;font-size:.875rem}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);box-shadow:none}
.btn--ghost:hover{background:var(--wash);border-color:var(--teal);color:var(--blue-deep);box-shadow:none}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none}
}

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,box-shadow .3s ease;
}
.site-head.is-stuck{border-bottom-color:var(--line);box-shadow:0 1px 14px -6px rgba(11,26,43,.16)}
.site-head__in{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.site-head__end{display:flex;align-items:center;gap:1.1rem;margin-left:auto}

/* Wordmark: the name blocky, in the sans semibold and tracked tight. The
   descriptor stays in mono like every other small label on the page, but at
   well under the usual label spacing, so the two lines stack as one block
   instead of drifting apart. Teal comes off the mark. */
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0}
.brand__mark{width:34px;height:auto}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{
  font-family:var(--f-body);font-weight:600;font-size:1.3rem;
  letter-spacing:-.03em;color:var(--ink);
}
.brand__sub{
  font-family:var(--f-mono);font-size:.57rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-top:.24rem;
}
/* Public Sans is bundled at 600 and 700 with nothing between, and 700 is a step
   too far here. Thickening the strokes by a third of a pixel lands the wordmark
   between the two. Applies to the footer as well, so both read the same weight. */
.brand__name{-webkit-text-stroke:.35px currentColor}

.nav{display:flex;gap:1.75rem;margin-left:1.25rem}
.nav a{
  text-decoration:none;font-size:.93rem;font-weight:500;color:var(--ink-2);
  padding:.3rem 0;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--teal);transition:right .3s var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{right:0}

.lang{display:inline-flex;align-items:center;gap:.4rem}
.lang__btn{
  background:none;border:0;padding:.25rem .1rem;cursor:pointer;
  font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.09em;
  color:var(--ink-3);transition:color .2s ease;
}
.lang__btn:hover{color:var(--ink)}
.lang__btn.is-on{color:var(--blue-deep)}
.lang__sep{width:1px;height:11px;background:var(--line-2)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  padding-top:clamp(3rem,6vw,5.25rem);
  padding-bottom:clamp(3.5rem,7vw,6rem);
  background:
    radial-gradient(120% 90% at 88% -10%,rgba(72,192,200,.20) 0%,rgba(72,192,200,0) 55%),
    radial-gradient(90% 80% at 4% 0%,rgba(24,104,192,.13) 0%,rgba(24,104,192,0) 60%),
    var(--paper);
}
.hero__in{
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}
.hero__h{
  font-family:var(--f-display);
  font-weight:400;
  font-size:clamp(2.35rem,5.4vw,4.15rem);
  line-height:1.07;
  letter-spacing:-.025em;
  color:var(--ink);
  margin-bottom:1.5rem;
}
.hero__h em{font-style:italic;color:var(--blue-deep)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}

.proof{margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.proof__lbl{
  font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.8rem;
}
/* flows as many per row as fit, so the block stays tidy whatever the count */
.proof__list{display:flex;flex-wrap:wrap;gap:.5rem 1.75rem}
.proof__list li{
  font-size:.875rem;font-weight:500;color:var(--ink-2);
  position:relative;padding-left:.95rem;
}
.proof__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;
  background:var(--teal);
}

.hero__demo{margin:0;display:flex;flex-direction:column;align-items:center}
.hero__demo figcaption{
  margin-top:1.4rem;max-width:23rem;text-align:center;
  font-size:.855rem;line-height:1.55;color:var(--ink-3);
}

/* phone frame with live video behind it */
.device{position:relative;width:min(330px,72vw);aspect-ratio:900/1773}
.device__screen{
  position:absolute;left:8.556%;top:4.343%;width:82.889%;height:91.314%;
  object-fit:cover;background:#fff;
}
.device__frame{position:absolute;inset:0;width:100%;height:100%;
  filter:drop-shadow(0 26px 46px rgba(8,33,58,.22))}

/* ============================================================
   DE KLOOF
   ============================================================ */
/* its own tinted band, so it reads as a chapter of its own rather than
   running into the work section below it */
.gap-sec{
  padding-block:clamp(4rem,8vw,6.5rem);
  background:var(--wash);
  border-block:1px solid var(--line);
}

/* The two sides sit as white cards on the tinted section, the same device the
   figure panel and the form use. The space between them is the gap itself, so
   no divider line is needed. Same 52rem as the heading above, so the whole
   section lines up on one column. */
.worlds{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.25rem,3vw,2rem);
  max-width:52rem;margin-inline:auto;
}
.world{
  position:relative;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.1rem);
  box-shadow:0 16px 36px -28px rgba(8,33,58,.5);
}
/* a bar along the top tells the two sides apart at a glance */
.world::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue);
}
.world:nth-child(2)::before{background:var(--teal)}
.world__lbl{
  font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue-deep);margin-bottom:.9rem;
}
.world__txt{
  font-family:var(--f-display);font-size:clamp(1.1rem,1.75vw,1.4rem);
  line-height:1.45;color:var(--ink);
}

.worlds__bridge{
  margin:clamp(2.75rem,5vw,4rem) auto 0;max-width:52rem;text-align:center;
  font-family:var(--f-display);font-size:clamp(1.35rem,2.6vw,1.95rem);
  line-height:1.32;letter-spacing:-.018em;color:var(--blue-deep);
  text-wrap:balance;
}

/* ============================================================
   WERK
   ============================================================ */
/* no bottom padding: the last case runs straight into the next section */
.work-sec{padding-top:clamp(4rem,8vw,6.5rem);padding-bottom:0;background:var(--paper)}
/* the first case supplies the space below the heading, so don't add it twice */
.work-sec .sec-head{margin-bottom:0}

.case{padding-block:clamp(3rem,6vw,5.5rem)}
.case--alt{background:var(--wash);border-block:1px solid var(--line)}

.case__in{
  display:grid;grid-template-columns:1fr 1.06fr;
  gap:clamp(2.25rem,5vw,4.5rem);align-items:center;
}
/* the osteotomy mockup is landscape, so it gets a wider column */
.case--wide .case__in{grid-template-columns:1fr 1.32fr}
.case--alt .case__in{direction:rtl}
.case--alt .case__in > *{direction:ltr}

.case__eyebrow{
  font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--teal);margin-bottom:1rem;
}
.case__h{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.15;letter-spacing:-.02em;
  color:var(--ink);
}
.case__sub{
  font-family:var(--f-display);font-style:italic;
  font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.4;
  color:var(--blue-deep);margin-top:.6rem;
}
.case__p{font-size:1rem;line-height:1.68;color:var(--ink-2)}

.ba-block{margin-top:1.75rem}
.ba-block__lbl{
  font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem;
}

.facts{margin-top:2rem;display:grid;gap:.62rem}
.facts li{position:relative;padding-left:1.6rem;font-size:.93rem;color:var(--ink-2)}
.facts li::before{
  content:"";position:absolute;left:0;top:.44em;width:9px;height:9px;
  border:2px solid var(--teal);border-radius:50%;
}

/* publication credit */
.pub{
  display:block;margin-top:2rem;padding:1.4rem 1.55rem;
  background:var(--paper);text-decoration:none;
  border:1px solid var(--line-2);border-left:3px solid var(--teal);
  border-radius:0 var(--r) var(--r) 0;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s var(--ease);
}
.pub:hover{border-color:var(--teal);box-shadow:0 14px 30px -20px rgba(8,33,58,.55);transform:translateY(-2px)}
.pub__lbl{
  display:block;font-family:var(--f-mono);font-size:.63rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem;
}
.pub__journal{
  display:block;font-family:var(--f-display);font-weight:600;font-size:1.3rem;
  line-height:1.2;letter-spacing:-.012em;color:var(--ink);
}
.pub__title{display:block;margin-top:.6rem;font-size:.875rem;line-height:1.5;color:var(--ink-2)}
.pub__go{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-family:var(--f-mono);font-size:.75rem;letter-spacing:.04em;color:var(--blue-deep);
}

.case__media{margin:0}
.case__media figcaption{
  margin:1.3rem auto 0;text-align:center;max-width:34rem;
  font-size:.84rem;line-height:1.55;color:var(--ink-3);
}

/* before / after comparison: the two states dissolve into one another on a
   loop, so the correction plays out on its own instead of asking the visitor to
   drag for it. Each state holds long enough to read before it changes. Only
   opacity moves, which the compositor handles without repainting. */
.ba{position:relative;border-radius:10px;overflow:hidden}
.ba__base{width:100%;height:auto}
.ba__over{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* the tags stay inside the laptop screen glass, measured off the mockup:
   10.3%-89.6% across, roughly 11%-88% down. Both sit in the same spot so the
   label reads as one word changing rather than two words competing. */
.ba__tag{
  position:absolute;top:13.2%;left:12.5%;
  font-family:var(--f-mono);font-size:.62rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.92);padding:.3rem .6rem;border-radius:4px;
  box-shadow:0 1px 4px rgba(8,33,58,.14);pointer-events:none;
}

/* ~2.5s on each state, ~0.25s to dissolve between them */
@keyframes ba-before{0%,45.5%{opacity:1}50%,95.5%{opacity:0}100%{opacity:1}}
@keyframes ba-after {0%,45.5%{opacity:0}50%,95.5%{opacity:1}100%{opacity:0}}

.ba__over,
.ba__tag--before{animation:ba-before 5.5s ease-in-out infinite}
.ba__tag--after{animation:ba-after 5.5s ease-in-out infinite}

/* no dissolve: settle on the planned correction, which is what the case is
   about, and label it so the frozen state is not ambiguous */
@media (prefers-reduced-motion:reduce){
  .ba__over,.ba__tag--before,.ba__tag--after{animation:none}
  .ba__over,.ba__tag--before{opacity:0}
  .ba__tag--after{opacity:1}
}

/* phone trio */
.phones{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.5rem,1.6vw,1.15rem);align-items:start;
}
.phones img{
  width:100%;height:auto;
  filter:drop-shadow(0 16px 30px rgba(8,33,58,.16));
  transition:transform .45s var(--ease);
}
.phones img:nth-child(2){transform:translateY(-26px)}
.phones img:hover{transform:translateY(-8px)}
.phones img:nth-child(2):hover{transform:translateY(-34px)}
@media (prefers-reduced-motion:reduce){
  .phones img,.phones img:hover{transition:none}
}

/* scientific figure panel */
.figpanel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(1rem,2.5vw,1.85rem);
  box-shadow:0 14px 34px -22px rgba(8,33,58,.4);
}
.figpanel img{width:100%;height:auto}

/* ============================================================
   AANPAK
   ============================================================ */
.how-sec{padding-block:var(--sec-y);background:var(--paper)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,2.25rem)}
.step{position:relative;padding-top:4.15rem}
.step::before{
  content:"";position:absolute;top:1.35rem;left:0;right:0;height:1px;background:var(--line-2);
}
.step__n{
  position:absolute;top:0;left:0;
  display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;
  background:var(--paper);border:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:.8rem;font-weight:500;color:var(--blue-deep);
}
.step__h{
  font-family:var(--f-display);font-weight:500;font-size:1.22rem;line-height:1.3;
  color:var(--ink);margin-bottom:.55rem;letter-spacing:-.01em;
  min-height:2.6em; /* keeps the four paragraphs on one baseline */
}
.step__p{font-size:.945rem;line-height:1.6;color:var(--ink-2)}

/* ============================================================
   OVER MIJ
   ============================================================ */
.about-sec{padding-block:var(--sec-y);background:var(--wash);border-top:1px solid var(--line)}
.about{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.about__pic{margin:0}
.about__pic img{
  width:100%;height:auto;border-radius:var(--r);
  box-shadow:0 24px 50px -28px rgba(8,33,58,.5);
}
.about__h{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:1.25rem;
}
.about__p{font-size:1.03rem;line-height:1.7;color:var(--ink-2)}
.about__p + .about__p{margin-top:1.1rem}

.creds{
  margin-top:2rem;padding-top:1.35rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;
}
.creds li{
  font-family:var(--f-mono);font-size:.735rem;letter-spacing:.05em;color:var(--ink-3);
  position:relative;padding-left:.9rem;
}
.creds li::before{
  content:"";position:absolute;left:0;top:.58em;width:4px;height:4px;border-radius:50%;
  background:var(--line-2);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-sec{
  padding-block:clamp(4rem,8vw,7rem);
  background:
    radial-gradient(100% 120% at 82% 8%,rgba(24,152,184,.42) 0%,rgba(24,152,184,0) 58%),
    radial-gradient(80% 100% at 8% 100%,rgba(24,104,192,.34) 0%,rgba(24,104,192,0) 60%),
    var(--deep);
  color:#fff;
}
.contact-sec :focus-visible{outline-color:var(--teal-lt)}
.contact{max-width:46rem;text-align:center;margin-inline:auto}
.contact__h{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(1.95rem,4vw,3rem);line-height:1.14;letter-spacing:-.022em;
  color:#fff;margin-bottom:1.15rem;text-wrap:balance;
}
.contact__p{
  font-size:clamp(1rem,1.4vw,1.13rem);line-height:1.65;
  color:rgba(255,255,255,.78);max-width:37em;margin-inline:auto;
}

/* form, sitting on a white card so the fields stay legible */
.form{
  margin-top:clamp(2rem,4vw,2.75rem);text-align:left;
  background:var(--paper);border-radius:var(--r);
  padding:clamp(1.5rem,3.5vw,2.35rem);
  box-shadow:0 34px 64px -32px rgba(0,0,0,.62);
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{margin-bottom:1.05rem}
.field__lbl{display:block;font-size:.8rem;font-weight:600;color:var(--ink);margin-bottom:.42rem}
.field__in{
  width:100%;font-size:.95rem;color:var(--ink);
  padding:.72rem .9rem;border:1px solid var(--line-2);border-radius:8px;
  background:var(--wash);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.field__in::placeholder{color:var(--ink-3)}
.field__in:focus{
  outline:none;border-color:var(--blue);background:var(--paper);
  box-shadow:0 0 0 3px rgba(24,104,192,.16);
}
.field__in--area{resize:vertical;min-height:7.5rem;line-height:1.55}
.field__in.is-bad{border-color:var(--bad);background:#FDF4F2}
.field__in.is-bad:focus{box-shadow:0 0 0 3px rgba(180,64,46,.16)}

/* honeypot: hidden from people, filled in by bots, dropped by Formspree */
.trap{display:none}

.form__end{margin-top:1.4rem;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.form__note{font-size:.775rem;line-height:1.5;color:var(--ink-3);max-width:38em}
.form__status{margin-top:1.1rem;font-size:.9rem;line-height:1.5;font-weight:500;color:var(--blue-deep)}
.form__status:empty{display:none}
.form__status.is-bad{color:var(--bad)}

.contact__or{margin-top:1.7rem;font-size:.875rem;color:rgba(255,255,255,.62)}
.contact__or a{
  font-family:var(--f-mono);font-size:.845rem;color:#fff;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:.15rem;margin-left:.4rem;
  transition:border-color .25s ease;
}
.contact__or a:hover{border-bottom-color:#fff}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{padding-block:2.25rem;background:var(--paper);border-top:1px solid var(--line)}
.site-foot__in{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.brand--foot .brand__mark{width:28px}
.brand--foot .brand__name{font-size:1.14rem}
.brand--foot .brand__sub{font-size:.54rem}
.site-foot__note{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(2,1fr);row-gap:2.5rem}
}

@media (max-width:940px){
  .hero__in{grid-template-columns:1fr;gap:3rem}
  .hero__copy{max-width:38rem}
  .case__in,
  .case--wide .case__in{grid-template-columns:1fr;gap:2.5rem}
  .case--alt .case__in{direction:ltr}
  .case__media{order:2}
  .about{grid-template-columns:1fr;gap:2.25rem}
  .about__pic{max-width:260px}
  .nav{display:none}
}

@media (max-width:760px){
  html{scroll-padding-top:76px}
  .proof__list{flex-direction:column}
  .worlds{grid-template-columns:1fr;gap:1rem}
  .ba__tag{font-size:.56rem;padding:.24rem .45rem}
}

@media (max-width:620px){
  .steps{grid-template-columns:1fr;row-gap:2rem}
  .step{padding-top:3.9rem}
  .step__h{min-height:0}
  .form__row{grid-template-columns:1fr;gap:0}
  .site-head__in{min-height:66px;gap:.75rem}
  .btn--sm{padding:.55rem .95rem;font-size:.82rem}
  .brand__mark{width:32px}
  .brand__name{font-size:1.14rem}
  .brand__sub{font-size:.52rem;letter-spacing:.09em}
  .phones{gap:.4rem}
  .phones img:nth-child(2){transform:translateY(-14px)}
  .phones img:nth-child(2):hover{transform:translateY(-14px)}
  .phones img:hover{transform:none}
  .site-foot__in{justify-content:center;text-align:center}
  /* the address is too wide to sit beside the question at this size */
  .contact__or a{display:block;width:max-content;max-width:100%;margin:.6rem auto 0}
}

@media (max-width:400px){
  .site-head__end .btn--sm{display:none}
}