:root {
  color-scheme:light dark;
  --ground:#000;
  --surface:#fff;
  --ink:#000;
  --ink-3:#8e8e93;
  --hair:rgba(60,60,67,.18);
  --accent:#ff4b00;
  /* Apple concentricity: nested radius = outer radius minus inset.
     Website dimensions, not a universal macOS system radius. */
  --panel:32px;
  --panel-inset:24px;
  --company-inset:24px;
  --header-height:64px;
  --header-inset:10px;
  --header-radius:calc(var(--header-height)/2);
  --control-radius:calc(var(--header-radius) - var(--header-inset));
  /* Neutral regular-glass web approximation; color comes from the backdrop. */
  --glass-fill:rgba(248,248,250,.72);
  --glass-solid:#f5f5f7;
  --glass-ink:#1d1d1f;
  --glass-edge:rgba(255,255,255,.7);
  --glass-highlight:rgba(255,255,255,.72);
  --glass-lowlight:rgba(0,0,0,.07);
  --glass-control-hover:rgba(0,0,0,.07);
  --block-gap:16px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Monaco,Consolas,monospace
}

@media(prefers-color-scheme:dark) {
  :root {
    --ground:#000;
    --surface:#1c1c1e;
    --ink:#f2f2f7;
    --ink-3:#6c6c72;
    --hair:#2c2c2e;
    --accent:#ff6030;
    --glass-fill:rgba(36,36,38,.76);
    --glass-solid:#242426;
    --glass-ink:#f5f5f7;
    --glass-edge:rgba(255,255,255,.18);
    --glass-highlight:rgba(255,255,255,.2);
    --glass-lowlight:rgba(0,0,0,.24);
    --glass-control-hover:rgba(255,255,255,.1);
  }

}

* {
  box-sizing:border-box
}

html {
  background:var(--ground);
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth
}

body {
  min-height:100vh;
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:17px/1.32 var(--font);
  font-synthesis:none
}

a {
  color:inherit
}

main {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:var(--block-gap)
}

footer {
  width:min(calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)),1120px);
  margin-inline:auto
}

.header-shadow {
  position:fixed;
  z-index:19;
  top:calc(16px + env(safe-area-inset-top));
  left:calc(20px + env(safe-area-inset-left));
  width:calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right));
  height:var(--header-height);
  border-radius:var(--header-radius);
  background:transparent;
  box-shadow:0 4px 16px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);
  pointer-events:none
}

.site-header {
  position:fixed;
  z-index:20;
  top:calc(16px + env(safe-area-inset-top));
  left:calc(20px + env(safe-area-inset-left));
  width:calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right));
  height:var(--header-height);
  margin:0;
  padding:var(--header-inset);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  border:0;
  border-radius:var(--header-radius);
  background:transparent;
  isolation:isolate;
  color:var(--glass-ink);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%)
}

.site-header-glass {
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  border:1px solid var(--glass-edge);
  border-radius:inherit;
  background:var(--glass-fill);
  box-shadow:inset 0 1px 0 var(--glass-highlight),inset 0 -1px 0 var(--glass-lowlight)
}

.brand {
  position:absolute;
  z-index:1;
  left:50%;
  right:auto;
  top:50%;
  width:124px;
  height:48px;
  display:grid;
  place-items:center;
  line-height:0;
  transform:translate(-50%,-50%)
}

.brand img {
  width:auto;
  height:48px;
  display:block
}

@supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
  .site-header {
    -webkit-mask-image:linear-gradient(#000 0 0),url("/logo.svg");
    -webkit-mask-size:100% 100%,auto 48px;
    -webkit-mask-position:0 0,center center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-composite:xor;
    mask-image:linear-gradient(#000 0 0),url("/logo.svg");
    mask-size:100% 100%,auto 48px;
    mask-position:0 0,center center;
    mask-repeat:no-repeat;
    mask-composite:exclude
  }

  .brand img {
    opacity:0
  }
}

.contact {
  height:calc(var(--header-height) - 2*var(--header-inset));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  padding:10px 14px;
  border:1px solid transparent;
  border-radius:var(--control-radius);
  background:transparent;
  font-size:14px;
  font-weight:650;
  text-decoration:none;
  transition:background-color .15s ease
}

.hero {
  --hero-card-width:min(1040px,calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  --hero-rest-height:min(72svh,680px);
  --hero-rest-radius:var(--panel);
  --hero-mask-side:max(calc(20px + (env(safe-area-inset-left) + env(safe-area-inset-right))/2),calc((100% - 1040px)/2));
  --hero-full-content-edge:calc(var(--hero-mask-side) + 24px);
  --hero-padding-top:clamp(32px,6vw,72px);
  --hero-content-gap:calc(var(--hero-padding-top) + var(--hero-copy-top-gap));
  --hero-copy-top-gap:clamp(112px,14svh,160px);
  --hero-overhang:16lvh;
  --hero-extra-height:20px;
  position:relative;
  isolation:isolate;
  width:var(--hero-active-width,var(--hero-card-width));
  min-height:var(--hero-rest-height);
  display:block;
  margin:8px auto var(--block-gap);
  padding:var(--hero-content-gap) 24px;
  overflow:clip;
  border-radius:var(--panel);
  background-color:#000;
  color:#fff
}

.hero::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background-color:#000;
  background-image:url("/hero-rddev-master-v9.jpg");
  background-size:cover;
  background-position:right bottom;
  background-repeat:no-repeat;
  pointer-events:none
}

@supports (animation-timeline:scroll()) {
  @media (prefers-reduced-motion:no-preference) {
    .hero.hero {
      --hero-active-width:100%;
      margin-inline:0;
      padding-inline:var(--hero-full-content-edge);
      animation:hero-collapse linear both;
      animation-timeline:scroll(root block);
      animation-range:0 40svh
    }

    .hero .hero-pin {
      position:sticky;
      top:var(--hero-content-gap)
    }

    .hero::before {
      inset:auto;
      top:-2px;
      left:-2px;
      width:calc(100% + 4px);
      height:calc(100lvh + var(--hero-overhang) + var(--hero-extra-height) + 4px);
      transform:none
    }
  }
}

@keyframes hero-collapse {
  from {
    min-height:calc(100lvh + var(--hero-overhang) + var(--hero-extra-height));
    margin-top:0;
    border-radius:0;
    -webkit-clip-path:inset(0 round 0);
    clip-path:inset(0 round 0)
  }
  to {
    min-height:var(--hero-rest-height);
    margin-top:0;
    border-radius:0;
    -webkit-clip-path:inset(0 var(--hero-mask-side) 0 var(--hero-mask-side) round var(--hero-rest-radius));
    clip-path:inset(0 var(--hero-mask-side) 0 var(--hero-mask-side) round var(--hero-rest-radius))
  }
}

.section-hero {
  --section-hero-side:max(calc(20px + (env(safe-area-inset-left) + env(safe-area-inset-right))/2),calc((100% - 1040px)/2));
  --section-hero-rest-height:min(72svh,680px);
  --section-hero-rest-cut:38%;
  --section-hero-content-edge:calc(var(--section-hero-side) + 24px);
  --section-hero-bottom-gap:var(--section-hero-top-gap);
  --section-hero-top-gap:clamp(112px,14svh,160px);
  --section-hero-overhang:8lvh;
  --section-hero-pin-distance:8lvh;
  --section-hero-image-overhang:16lvh;
  --section-hero-height:calc(100lvh + var(--section-hero-overhang) + var(--section-hero-pin-distance));
  /* At 45% of the view timeline the frame is fully open. */
  --section-hero-hold-top:calc(var(--section-hero-top-gap) + 55svh - var(--section-hero-height)*.45);
  width:100%;
  height:var(--section-hero-height);
  margin:0;
  position:relative;
  isolation:isolate;
  padding:0;
  overflow:clip;
  contain:layout paint;
  will-change:transform;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  background:#000;
  color:#fff;
  view-timeline-name:--section-hero-progress;
  view-timeline-axis:block
}

.section-hero-frame {
  position:absolute;
  z-index:0;
  inset:0 var(--section-hero-side) var(--section-hero-rest-cut);
  overflow:hidden;
  border-radius:var(--panel);
  background:#000;
  will-change:inset,border-radius;
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
}

.section-hero-media {
  position:absolute;
  z-index:0;
  top:50%;
  left:50%;
  display:block;
  width:calc(100vw + 4px);
  height:calc(100lvh + var(--section-hero-image-overhang) + 4px);
  background:#000 url("/hero-rddev-master-v9.jpg") right bottom/cover no-repeat;
  will-change:transform;
  -webkit-transform:translate3d(-50%,-50%,0);
  transform:translate3d(-50%,-50%,0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  pointer-events:none
}

.section-hero[aria-label="Our Stack"] .section-hero-media {
  background-image:url("/hero-stack-v3.jpg")
}

.section-hero[aria-label="Achievements"] .section-hero-media {
  background-image:url("/hero-achievements-v2.jpg")
}

.section-hero[aria-label="Impressum"] .section-hero-media {
  background-image:url("/hero-imprint-v1.jpg")
}

.section-hero-content {
  position:absolute;
  z-index:1;
  inset:0;
  padding:var(--section-hero-top-gap) var(--section-hero-content-edge) var(--section-hero-bottom-gap);
  overflow:clip;
  -webkit-clip-path:inset(0 var(--section-hero-side) var(--section-hero-rest-cut) var(--section-hero-side) round var(--panel));
  clip-path:inset(0 var(--section-hero-side) var(--section-hero-rest-cut) var(--section-hero-side) round var(--panel));
  pointer-events:none
}

.section-hero-pin {
  position:relative
}

.section-hero-copy {
  position:relative;
  z-index:1;
  max-width:900px;
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
}

.section-hero-symbol {
  position:absolute;
  z-index:1;
  right:0;
  top:0;
  bottom:auto;
  width:clamp(44px,8.1vw,92px);
  height:auto;
  filter:invert(1);
  opacity:1;
  -webkit-transform:translateZ(0);
  transform:translateZ(0)
}

.section-hero-intro {
  max-width:680px;
  margin:0 0 14px;
  color:rgba(255,255,255,.8);
  font-size:clamp(18px,2.1vw,26px);
  line-height:1.12;
  letter-spacing:-.02em
}

.section-hero-title {
  max-width:900px;
  margin:0;
  font-size:clamp(54px,10.2vw,116px);
  font-weight:750;
  line-height:.92;
  letter-spacing:-.055em
}

@supports (animation-timeline:view()) {
  @media (prefers-reduced-motion:no-preference) {
    .section-hero-frame {
      animation:section-hero-frame-resize linear both;
      animation-timeline:--section-hero-progress;
      animation-range:entry 0% exit 100%
    }

    .section-hero-content {
      animation:section-hero-content-clip linear both;
      animation-timeline:--section-hero-progress;
      animation-range:entry 0% exit 100%
    }

    .section-hero-pin {
      position:sticky;
      top:var(--section-hero-hold-top)
    }

  }
}

@keyframes section-hero-frame-resize {
  0%,18% {
    inset:0 var(--section-hero-side) var(--section-hero-rest-cut);
    border-radius:var(--panel)
  }
  45%,58% {
    inset:0;
    border-radius:0
  }
  100% {
    inset:var(--section-hero-rest-cut) var(--section-hero-side) 0;
    border-radius:var(--panel)
  }
}

@keyframes section-hero-content-clip {
  0%,18% {
    -webkit-clip-path:inset(0 var(--section-hero-side) var(--section-hero-rest-cut) var(--section-hero-side) round var(--panel));
    clip-path:inset(0 var(--section-hero-side) var(--section-hero-rest-cut) var(--section-hero-side) round var(--panel))
  }
  45%,58% {
    -webkit-clip-path:inset(0 round 0);
    clip-path:inset(0 round 0)
  }
  100% {
    -webkit-clip-path:inset(var(--section-hero-rest-cut) var(--section-hero-side) 0 var(--section-hero-side) round var(--panel));
    clip-path:inset(var(--section-hero-rest-cut) var(--section-hero-side) 0 var(--section-hero-side) round var(--panel))
  }
}

.hero-pin {
  position:relative;
  z-index:1
}

.hero-symbol {
  position:absolute;
  z-index:1;
  right:0;
  top:calc(-1*var(--hero-padding-top));
  bottom:auto;
  width:clamp(44px,8.1vw,92px);
  height:auto;
  filter:invert(1);
  opacity:1;
  mix-blend-mode:normal
}

.hero-copy {
  position:relative;
  z-index:1;
  margin-top:0;
  margin-bottom:0
}

.hero .kicker {
  margin-bottom:10px
}

.kicker {
  margin:0 0 20px;
  color:var(--accent);
  font:650 12px/1.3 var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase
}

h1,h2 {
  margin:0;
  letter-spacing:-.055em;
  line-height:.92
}

h1 {
  font-size:clamp(54px,10.2vw,116px);
  font-weight:750;
  max-width:900px
}

.intro {
  max-width:680px;
  margin:0 0 14px;
  color:rgba(255,255,255,.8);
  font-size:clamp(18px,2.1vw,26px);
  line-height:1.12;
  letter-spacing:-.02em
}

.hero-path {
  margin:0 0 12px;
  color:rgba(255,255,255,.5);
  font:600 11px/1.2 var(--mono);
  letter-spacing:.15em;
  text-transform:uppercase
}

.fde,.stack,.achievements {
  margin:0
}

.heading-block {
  position:relative;
  isolation:isolate;
  padding:18px 24px;
  border-radius:var(--panel);
  background:transparent;
  overflow:hidden
}

.heading-block::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  border-radius:inherit;
  background:var(--accent)
}

.heading-block>* {
  position:relative;
  z-index:1
}

.heading-block h2 {
  margin:0;
  color:#fff
}

.heading-symbol {
  flex:0 0 auto;
  width:52px;
  height:52px;
  object-fit:contain;
  filter:invert(1)
}

.section-banner {
  position:relative;
  width:min(100%,1040px);
  margin-inline:auto
}

.section-banner-primary {
  display:flex;
  align-items:center;
  gap:18px;
  min-height:124px
}

.section-banner-primary h2,.section-banner-secondary h2,.section-banner-achievements h2 {
  max-width:900px;
  font-size:clamp(34px,5vw,56px);
  text-transform:uppercase
}

.section-banner-secondary {
  display:flex;
  align-items:center;
  gap:18px;
  min-height:124px
}

.section-banner-achievements {
  display:flex;
  align-items:center;
  gap:18px;
  min-height:124px
}

.text-block {
  border:1px solid rgba(60,60,67,.14);
  border-radius:var(--panel);
  background:#fff;
  color:#000;
  box-shadow:0 18px 50px rgba(0,0,0,.06)
}

.fde-copy,.stack-copy,.achievement-copy {
  display:grid;
  width:min(100%,1040px);
  gap:16px;
  margin:0 auto;
  padding:24px
}

.fde-copy h3,.stack-copy h3,.achievement-copy h3 {
  max-width:880px;
  margin:0 0 4px;
  font-size:clamp(30px,4vw,48px);
  line-height:.98;
  letter-spacing:-.045em
}

.fde-copy p,.stack-copy p,.achievement-copy>p {
  max-width:880px;
  margin:0;
  font-size:18px;
  line-height:1.35
}

.achievement-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

.achievement-grid article {
  padding:20px;
  border:1px solid rgba(60,60,67,.14);
  border-radius:max(8px,calc(var(--panel) - var(--panel-inset)));
  background:#f5f5f7
}

.achievement-grid article:last-child {
  grid-column:1/-1
}

.achievement-grid h4 {
  margin:0 0 10px;
  font-size:21px;
  letter-spacing:-.025em
}

.achievement-grid p {
  margin:0;
  font-size:17px;
  line-height:1.35
}

.company {
  width:min(100%,1040px);
  margin:0 auto;
  padding:var(--company-inset)
}

.section-heading {
  margin:0 auto
}

.company-heading-panel {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:18px;
  padding:18px 24px;
  border-radius:var(--panel);
  background:transparent;
  overflow:hidden;
  min-height:124px
}

.company-heading-panel h2 {
  max-width:900px;
  color:#fff;
  font-size:clamp(34px,5vw,56px);
  text-transform:uppercase
}

h2 {
  font-size:clamp(46px,7vw,82px)
}

.fact-groups {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px
}

.fact-group {
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--hair);
  border-radius:max(8px,calc(var(--panel) - var(--company-inset)))
}

.fact-group-wide {
  grid-column:1/-1
}

.fact-group h3 {
  margin:0;
  padding:24px;
  border-bottom:1px solid var(--hair);
  font-size:21px;
  letter-spacing:-.02em
}

.facts {
  margin:0
}

.facts>div {
  padding:20px 24px;
  border-bottom:1px solid var(--hair)
}

.facts>div:last-child {
  border-bottom:0
}

.imprint-copy {
  display:grid;
  gap:18px;
  padding:24px
}

.imprint-copy p {
  max-width:860px;
  margin:0;
  font-size:18px;
  line-height:1.3
}

dt {
  margin:0 0 8px;
  color:var(--ink-3);
  font:600 12px/1.3 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase
}

dd {
  margin:0;
  font-size:18px;
  line-height:1.22
}

.mono {
  font-family:var(--mono);
  font-size:.94em;
  letter-spacing:.01em
}

footer {
  display:flex;
  justify-content:center;
  gap:20px;
  padding:26px 0 38px;
  border-top:1px solid var(--hair);
  color:var(--ink-3);
  font:500 12px/1.5 var(--mono);
  text-align:center
}

a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px;
  border-radius:2px
}

@media(prefers-color-scheme:dark) {
  .header-shadow {
    box-shadow:0 4px 18px rgba(0,0,0,.28),0 1px 3px rgba(0,0,0,.2)
  }

  .brand img {
    filter:invert(1)
  }
}

.contact:hover,.contact:active {
  background:var(--glass-control-hover)
}

.site-header a:focus-visible {
  outline:2px solid var(--glass-ink);
  outline-offset:2px;
  border-radius:var(--control-radius)
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .site-header-glass {
    background:var(--glass-solid)
  }
}

@media(prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .site-header {
    -webkit-backdrop-filter:none;
    backdrop-filter:none
  }

  .site-header-glass {
    background:var(--glass-solid);
    border-color:var(--glass-ink)
  }
}

@media(max-width:680px) {
  :root {
    --panel:28px;
    --company-inset:16px
  }

  footer {
    width:calc(100% - 48px - env(safe-area-inset-left) - env(safe-area-inset-right))
  }

  .header-shadow,.site-header {
    top:calc(12px + env(safe-area-inset-top));
    left:calc(12px + env(safe-area-inset-left));
    width:calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
    height:var(--header-height);
    border-radius:var(--header-radius)
  }

  .site-header {
    margin:0;
    padding:var(--header-inset)
  }

  .brand {
    left:50%;
    width:124px;
    height:48px
  }

  .brand img {
    width:auto;
    height:48px
  }

  .contact {
    padding:9px 12px
  }

  .hero {
    --hero-card-width:calc(100% - 64px - env(safe-area-inset-left) - env(safe-area-inset-right));
    --hero-rest-height:max(680px,82svh);
    --hero-rest-radius:var(--panel);
    --hero-mask-side:calc(32px + (env(safe-area-inset-left) + env(safe-area-inset-right))/2);
    --hero-full-content-edge:calc(var(--hero-mask-side) + 24px);
    margin:6px auto var(--block-gap);
    --hero-padding-top:28px;
    padding:var(--hero-content-gap) 24px;
    border-radius:var(--panel)
  }

  .hero-symbol {
    width:clamp(42px,12.8vw,66px)
  }

  .section-hero {
    --section-hero-side:calc(32px + (env(safe-area-inset-left) + env(safe-area-inset-right))/2);
    --section-hero-content-edge:calc(var(--section-hero-side) + 24px)
  }

  .section-hero-title {
    font-size:clamp(52px,16vw,82px)
  }

  .section-hero-symbol {
    width:clamp(42px,12.8vw,66px)
  }

  .section-hero-intro {
    font-size:18px
  }

  .section-banner {
    width:calc(100% - 64px - env(safe-area-inset-left) - env(safe-area-inset-right))
  }

  h1 {
    font-size:clamp(52px,16vw,82px)
  }

  .intro {
    margin:0 0 14px
  }

  .hero-path {
    font-size:9px;
    line-height:1.3
  }

  .fde,.stack,.achievements {
    margin:0
  }

  .section-banner-primary {
    width:calc(100% - 64px - env(safe-area-inset-left) - env(safe-area-inset-right));
    min-height:104px;
    padding:16px 20px;
    border-radius:var(--panel)
  }

  .section-banner-primary h2,.section-banner-secondary h2,.section-banner-achievements h2 {
    font-size:clamp(30px,10vw,42px)
  }

  .section-banner-secondary {
    width:calc(100% - 64px - env(safe-area-inset-left) - env(safe-area-inset-right));
    min-height:104px;
    padding:16px 20px;
    border-radius:var(--panel)
  }

  .section-banner-achievements {
    width:calc(100% - 64px - env(safe-area-inset-left) - env(safe-area-inset-right));
    min-height:104px;
    padding:16px 20px;
    border-radius:var(--panel)
  }

  .fde-copy,.stack-copy,.achievement-copy {
    width:calc(100% - 64px - env(safe-area-inset-left) - env(safe-area-inset-right));
    gap:14px;
    margin:0 auto;
    padding:24px;
    border-radius:var(--panel)
  }

  .fde-copy p,.stack-copy p,.achievement-copy>p {
    font-size:17px;
    line-height:1.32
  }

  .achievement-grid {
    grid-template-columns:1fr;
    gap:14px
  }

  .achievement-grid article:last-child {
    grid-column:auto
  }

  .company {
    width:calc(100% - 64px - env(safe-area-inset-left) - env(safe-area-inset-right));
    margin:0 auto;
    padding:var(--company-inset);
    border-radius:var(--panel)
  }

  .section-heading {
    margin:0 auto
  }

  .company-heading-panel {
    min-height:104px;
    padding:16px 20px;
    border-radius:var(--panel)
  }

  .company-heading-panel h2 {
    font-size:clamp(30px,10vw,42px)
  }

  .heading-symbol {
    width:38px;
    height:38px
  }

  .fact-groups {
    grid-template-columns:1fr;
    gap:var(--block-gap)
  }

  .fact-group,.fact-group-wide {
    grid-column:auto;
    border-radius:max(8px,calc(var(--panel) - var(--company-inset)))
  }

  .fact-group h3 {
    padding:20px
  }

  .facts>div {
    padding:18px 20px
  }

  footer {
    display:grid;
    padding-bottom:28px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  .contact {
    transition:none
  }

}

@media(orientation:landscape) and (max-width:932px) {
  .header-shadow,.site-header {
    left:calc(env(safe-area-inset-left) + 12px);
    right:calc(env(safe-area-inset-right) + 12px);
    width:auto
  }

  .section-banner,.fde-copy,.stack-copy,.achievement-copy,.company {
    width:min(1040px,calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)))
  }

}

/* Keep all header links reachable without overlapping the logo on narrow screens. */
.header-links {
  display:flex;
  align-items:center;
  position:relative;
  z-index:1
}

@media(max-width:680px) {
  .site-header .brand {
    left:20px;
    width:82px;
    height:32px;
    transform:translateY(-50%)
  }
  .site-header .brand img {height:32px}
  .header-links .contact {font-size:12px;padding:9px 6px}
  @supports ((-webkit-mask-composite:xor) or (mask-composite:exclude)) {
    .site-header {
      -webkit-mask-size:100% 100%,auto 32px;
      -webkit-mask-position:0 0,20px center;
      mask-size:100% 100%,auto 32px;
      mask-position:0 0,20px center
    }
  }
}