/* MAKO Global one-pager.
   Desktop (inside @media (min-width: 900px)): every size comes from the designer's artboard
   "v-desktop v1-2", 1920 px wide. v1-2 has no phone artboard: the phone rules (the base rules) keep
   the conventions of the v1-1 phone file (1179 pt = 393 CSS px at 3x) and carry the new sections over.
   The phone layout is set in rem with 1rem = 16px at 393 px, so it keeps the artboard's proportions
   from about 344 to 442 px; outside that the root size stops at 14 / 18 px and the text just wraps.
   Fonts: Oxanium Bold for every heading (ExtraBold once, for one phrase). Body text is Arial as in the
   design; Arimo has Arial's metrics and is only downloaded where Arial is missing (Android, Linux). */

@font-face { font-family: Oxanium; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/oxanium-700.woff2) format('woff2'); }
@font-face { font-family: Oxanium; font-weight: 800; font-style: normal; font-display: swap; src: url(../fonts/oxanium-800.woff2) format('woff2'); }
@font-face { font-family: Arimo; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/arimo-400.woff2) format('woff2'); }
@font-face { font-family: Arimo; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/arimo-700.woff2) format('woff2'); }

:root {
  --head: Oxanium, 'Arial Narrow', Arial, sans-serif;
  --body: Arial, Arimo, 'Liberation Sans', Helvetica, sans-serif;
  --navy: #19296b;
  --band: #e6e7e8;      /* grey bands */
  --line: #caccce;      /* rules, slashes, chevrons */
  --num: #cacccd;       /* grey section titles on white */
  --dim: #b7b7b7;       /* grey section titles on the grey bands */
  --ink: #231f20;       /* body text */
  --muted: #58595b;     /* small print in the About section */
  --soft: #939598;      /* mail address, copyright */
  --photo: #d1dff0;     /* behind the photos */
  --hairline: .0833rem; /* the phone file draws 4 pt = 1.33 px lines */
  color-scheme: light;
}

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

html {
  font-size: clamp(87.5%, 4.0712vw, 112.5%);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #fff;
  scroll-padding-top: 3.125rem;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 .875rem/1.2 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: clip;
}

img, svg { display: block; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, address { margin: 0; padding: 0; font-style: normal; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; color: var(--navy); line-height: 1.2; }
strong { font-weight: 700; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
br.d, br.w { display: none; }
.nw { white-space: nowrap; }

/* ------------------------------------------------------------ header (phone)
   Over the hero: the logo centred, the burger top right. Once the hero has scrolled away
   (js adds html.stuck) it becomes the 50 px navy bar of the "Meniu" layer. */

.top { position: absolute; inset: 0 0 auto; z-index: 20; height: 0; color: #fff; }
.brand { position: absolute; top: 3.1125rem; left: 50%; width: 5.1625rem; transform: translateX(-50%); }
.brand img { width: 100%; }
.burger, .close {
  position: absolute; top: .1875rem; right: .1875rem;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: #fff;
}
.burger svg, .close svg { width: 1.0375rem; height: 1.0375rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.4; }

.stuck .top { position: fixed; height: 3.125rem; background: var(--navy); animation: drop .25s ease-out; }
.stuck .brand { top: .73rem; left: 1.04rem; width: 3.44rem; transform: none; }
@keyframes drop { from { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .stuck .top { animation: none; } }

/* The menu is a popover: it opens and closes (Esc, tap outside) without any script. */
#menu:popover-open {
  position: fixed; inset: 0 0 auto; width: 100%; max-width: none; height: auto; max-height: 100dvh; overflow: auto;
  margin: 0; border: 0; padding: 0 0 .5rem; background: var(--navy); color: #fff;
  font: 700 .875rem/2.05rem var(--body);
}
#menu::backdrop { background: rgba(25, 41, 107, .25); }
.menu-head { position: relative; height: 3.125rem; }
.menu-head img { position: absolute; top: .73rem; left: 1.04rem; width: 3.44rem; }
#menu .services { width: fit-content; margin: .625rem auto 0; padding-left: 1.2rem; }
#menu .services a, .top .services a { position: relative; display: inline-block; }
.services a::before {
  content: ''; position: absolute; left: -.825rem; top: 50%; width: .52rem; height: .52rem; margin-top: -.21rem;
  background: linear-gradient(to bottom right, transparent calc(50% - .07rem), var(--line) calc(50% - .07rem), var(--line) calc(50% + .07rem), transparent calc(50% + .07rem));
}
#menu .more { display: flex; justify-content: center; gap: 3.625rem; margin-top: .55rem; }
.more a { color: var(--line); }
#menu a:hover { color: var(--line); }
#menu .more a:hover { color: #fff; }

/* ------------------------------------------------------------ hero (phone)
   The picture is the designer's whole composition (photo, navy multiply, gradients) rendered
   without the text, so it only has to cover. */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100vw, 40rem);   /* not aspect-ratio + max-height: that shrinks the width too */
  background: #0c1746; color: #fff; text-align: center;
  padding: 7.39rem 1rem 1rem;
}
.hero-img { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; }
.sentinel { position: absolute; top: 9rem; left: 0; width: 1px; height: 1px; }
.hero h1 { color: #fff; font-size: 1.3542rem; line-height: 1.625rem; text-transform: uppercase; text-wrap: balance; }
.down { display: block; width: fit-content; margin: .6rem auto 0; padding: .25rem .5rem; color: #fff; }
.down svg { width: 2.5rem; height: auto; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ------------------------------------------------------------ services */

.title { padding: 1.5rem 1.5rem 1.4rem; color: var(--num); font-size: 1.4167rem; text-align: center; text-wrap: balance; }

.pic { background: var(--photo); overflow: hidden; }
.pic img, .quad img, .trio img { width: 100%; height: 100%; object-fit: cover; }
.service .band .pic { aspect-ratio: 648 / 500; }

.service .text {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1.7rem 1.5rem 1.9rem; background: var(--band); text-align: center;
}
.service .icon { width: 9.375rem; }
.service h2 { margin-top: 1.0625rem; font-size: 1.3542rem; line-height: 1.625rem; text-transform: uppercase; }
.service .text p { max-width: 21.4rem; font-size: .875rem; line-height: 1.05rem; text-wrap: balance; }
.service h2 + p { margin-top: .95rem; }
.service p + p { margin-top: 1.05rem; }
.service .text .sub { margin-top: .3rem; color: var(--navy); font: 700 .9375rem/1.2rem var(--head); }

/* under a band: a note on the left, pictures on the right */
.note { padding: 1.7rem 1.5rem; text-align: center; }
.note p { max-width: 21.4rem; margin-inline: auto; text-wrap: balance; }
.note p + p { margin-top: 1.05rem; }
.note a, .card .mail a:hover { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: .06em; }
.note a:hover { color: var(--navy); }
.note .plans { color: var(--navy); font: 700 1.0625rem/1.5rem var(--head); }
.plans b { font-weight: 800; }
.split .pic { aspect-ratio: 648 / 365; }
.pic.wide { margin-top: .3125rem; aspect-ratio: 1296 / 729; }
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: .3125rem; }
.quad li { aspect-ratio: 319 / 243; background: var(--photo); }

.tenants-h { margin-top: 1.9rem; padding: 0 1rem; color: var(--num); font-size: 1.0625rem; text-align: center; }
/* the logos scale with the screen (vw), like an artboard, not with the text */
.tenants { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4.2vw 6.5vw; margin-top: 1.1rem; padding: 0 1rem; }
.tenants img { width: calc(var(--w) * .46 / 393 * 100vw); }
/* widths on the artboard (no style attributes: the CSP forbids them) */
.t-first { --w: 93; } .t-aerial { --w: 163; } .t-ns { --w: 186; } .t-frassi { --w: 144; } .t-hans { --w: 118; } .t-helivibe { --w: 165; } .t-alphaflight { --w: 182; } .t-dragonflight { --w: 202; } .t-evtol { --w: 119; }

.slash {
  width: 1.25rem; height: 1.25rem; margin: 1.7rem auto;
  background: linear-gradient(to bottom right, transparent calc(50% - var(--hairline) / 2), var(--line) calc(50% - var(--hairline) / 2), var(--line) calc(50% + var(--hairline) / 2), transparent calc(50% + var(--hairline) / 2));
}

.outreach { max-width: 24rem; margin: 0 auto; padding: 1.7rem 1.5rem 0; text-align: center; text-wrap: balance; }
.outreach::after { content: ''; display: block; width: 8.3333rem; height: var(--hairline); margin: 1.5rem auto 0; background: var(--line); }
.trio { display: grid; grid-template-columns: 248fr 582fr; gap: .3125rem; margin-top: 1.7rem; }
.trio li { background: var(--photo); }
.trio li:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 446 / 335; }
.trio li:nth-child(2) { aspect-ratio: 248 / 335; }
.trio li:nth-child(3) { aspect-ratio: 582 / 335; }

/* ------------------------------------------------------------ About: leadership and team */

.rule {
  display: flex; align-items: center; gap: .875rem;
  color: var(--num); font-size: 1.4167rem; line-height: 1; text-align: center;
}
.rule::before, .rule::after { content: ''; flex: 1; height: var(--hairline); margin-bottom: .1em; background: var(--line); }
.about .rule { margin-top: 2.4rem; }
.lead-h { margin-top: .9rem; font-size: 1.3542rem; text-align: center; }

.people { display: grid; gap: 2.4rem; max-width: 30rem; margin: 1.5rem auto 0; padding: 0 1.25rem; }
.people li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.people img { width: 5rem; height: 5rem; border-radius: 50%; }
.people h4 { font-size: 1.0625rem; line-height: 1.25rem; padding-bottom: .38rem; background: linear-gradient(var(--line), var(--line)) left bottom / 4.1667rem var(--hairline) no-repeat; }
.people p { color: #000; font-size: .8125rem; line-height: 1rem; }
.who p { margin-top: .4rem; }
.bio { grid-column: 1 / -1; margin-top: .9rem; }
.bio p + p { margin-top: 1rem; }
.about .team-h { margin-top: 2.6rem; }

/* ------------------------------------------------------------ projects */

.projects { margin: 2.8rem 1rem 0; }
.projects h2 { padding: 1.15rem .5rem 1.05rem; background: var(--band); color: var(--dim); font-size: 1.4167rem; line-height: 1.2; text-align: center; }
.proj { display: grid; gap: var(--hairline); margin-top: 1.7rem; background: var(--line); border: var(--hairline) solid var(--line); scroll-margin-top: 1rem; }
.projects h2 + .proj { margin-top: 0; }
.cell { background: #fff; }
.cell.pic { aspect-ratio: 543 / 300; }
.cell.text { order: -1; padding: 1.1rem 1.25rem 1.25rem 2.856rem; }
.cell h3 { position: relative; font-size: 1.3542rem; line-height: 1.625rem; }
.cell h3::before {
  content: ''; position: absolute; left: -.775rem; top: .45rem; width: .4rem; height: .75rem;
  background: url(../img/chevron-right.svg) center / contain no-repeat;
}
/* as drawn: the text under a title starts under its chevron, not under the title */
.cell .sub, .cell .small, .cell hr { margin-left: -.79rem; }
.cell .sub { margin-top: .45rem; color: var(--navy); font: 700 .9375rem/1.2rem var(--head); }
.cell .small { margin-top: .75rem; font-size: .875rem; line-height: 1.05rem; }
.cell hr { width: 70%; height: var(--hairline); margin-block: 1rem; border: 0; background: var(--line); }

/* ------------------------------------------------------------ contact form + footer */

.contact { padding: 1.5rem 1.25rem 2rem; background: var(--band); }
.contact .rule { margin-inline: -1.25rem; color: var(--dim); }
.contact form { display: grid; gap: .8rem; max-width: 34.375rem; margin: 1.4rem auto 0; }
.contact label { display: block; }
.contact label span, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact input, .contact textarea {
  display: block; width: 100%; margin: 0; border: 0; border-radius: 0; padding: .55rem .7rem; background: #fff; color: var(--ink);
  font: 400 max(16px, 1rem)/1.3 var(--body);   /* 16 px or more, or iOS zooms into the field */
  appearance: none;
}
.contact textarea { min-height: 5rem; resize: vertical; }
.contact ::placeholder { color: var(--muted); opacity: 1; }
.contact input:focus-visible, .contact textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 0; }
.contact button { height: 3.125rem; background: var(--navy); color: #fff; font: 700 1.25rem/1 var(--head); }
.contact button:hover { background: #22368c; }
.contact button:focus-visible { outline-color: var(--navy); }

footer { position: relative; padding-bottom: 2.5rem; overflow: hidden; }
footer::before, footer::after { content: ''; position: absolute; bottom: 0; height: 4.375rem; }
footer::before { left: 0; width: 6.52rem; background: var(--navy); clip-path: polygon(0 100%, 67.1% 0, 100% 0, 32.9% 100%); }
footer::after { right: 0; width: 3.625rem; background: var(--band); clip-path: polygon(0 100%, 100% 17.1%, 100% 67.5%, 59.2% 100%); }
.card { position: relative; z-index: 1; display: grid; grid-template-columns: 6.03rem 1fr; column-gap: 2.2rem; align-items: start; margin-top: 2.2rem; padding: 0 1rem 0 1.4rem; }
.card .logo { width: 6.03rem; margin-top: .14rem; }
.card .pin { display: none; }
.card address, .card .mail { color: var(--navy); font: 700 .875rem/1.05rem var(--head); }
.card .mail { margin-top: .25rem; color: var(--soft); }
.card a:hover { text-decoration: underline; text-underline-offset: .15em; }
.card .copy { margin-top: 1.28rem; color: var(--soft); font-size: .5833rem; line-height: 1.2; }

/* ============================================================ desktop artboard (1920 wide) */

@media (min-width: 900px) {
  html { font-size: 100%; scroll-padding-top: 7rem; }
  body { font-size: 1.25rem; line-height: 1.5rem; }
  br.d { display: inline; }
  br.m { display: none; }
  :root { --hairline: 2px; --wrap: 81rem; --gut: 2rem; --txt: clamp(1rem, 1.46vw, 1.25rem); }

  /* header: absolute 17 px down over the hero; the fixed bar is 100 px */
  .top { top: 1.0625rem; height: 6.25rem; }
  .bar { display: flex; align-items: center; height: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
  .brand, .stuck .brand { position: static; width: 6.4375rem; transform: none; }
  .burger { top: 50%; right: max(1rem, calc(50% - var(--wrap) / 2 - .5rem)); margin-top: -1.375rem; }
  .stuck .top { top: 0; height: 6.25rem; }

  /* hero: 750 px at 1920 */
  .hero { min-height: 0; height: clamp(35rem, 39.0625vw, 46.875rem); padding: 9.96rem 2rem 0; }
  .hero-img { object-position: 50% 50%; }
  .hero h1 { font-size: 2.5rem; line-height: 3rem; text-wrap: wrap; }
  .down { margin-top: 1.8rem; }
  .down svg { width: 4.5rem; stroke-width: 2; }
  .sentinel { top: 7.5rem; }

  .title { display: grid; place-items: center; min-height: 9.375rem; padding: 1rem var(--gut) 1.2rem; font-size: clamp(1.75rem, 3vw, 2.5rem); }

  .band {
    display: grid; background: var(--band);
    grid-template-columns: minmax(var(--gut), 1fr) minmax(0, calc(var(--wrap) / 2)) minmax(0, calc(var(--wrap) / 2)) minmax(var(--gut), 1fr);
  }
  .service .band .pic { grid-column: 2; }
  .service .text { grid-column: 3; align-items: flex-start; padding: 2rem 0 2rem min(3.125rem, 3.4vw); background: none; text-align: left; }
  .service .icon { width: clamp(10rem, 17.5vw, 15.125rem); }
  .service h2 { margin-top: 1.53rem; font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.2; }
  .service .text p { max-width: 35rem; font-size: var(--txt); line-height: 1.2; text-wrap: wrap; }
  .service h2 + p { margin-top: 1.6rem; }
  .service p + p { margin-top: 1.5rem; }
  .service .text .sub { max-width: none; margin-top: .25rem; font-size: clamp(1.1rem, 1.85vw, 1.5625rem); line-height: 1.2; }
  .service .sub + p { margin-top: 2.2rem; }
  /* two of the four bands are not centred on the artboard: their text sits a little higher */
  #infrastructure .text { padding-bottom: 5rem; }
  #consulting .text { padding-bottom: 3rem; }

  .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 3.125rem auto 0; padding: 0 var(--gut); }
  .note { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 1.5rem 1.5rem min(3.72rem, 3.5vw); text-align: left; }
  .note::before, .note::after { content: ''; position: absolute; left: 0; width: min(25rem, 100%); height: 2px; background: var(--line); }
  .note::before { top: 0; }
  .note::after { bottom: 0; }
  .note p { max-width: 30rem; margin-inline: 0; font-size: var(--txt); line-height: 1.2; text-wrap: wrap; }
  .note p + p { margin-top: 1.5rem; }
  .note .plans { max-width: 32rem; font-size: clamp(1.15rem, 1.85vw, 1.5625rem); line-height: 1.4; }
  .pic.wide { width: calc(100% - 2 * var(--gut)); max-width: var(--wrap); margin: 3.125rem auto 0; }
  .quad { gap: .625rem; }

  .tenants-h { margin-top: 3.5rem; font-size: 1.75rem; line-height: 1.2; }
  .tenants { gap: 1.5rem 3.2rem; max-width: 62.5rem; margin: 2.45rem auto 0; padding: 0 var(--gut); box-sizing: content-box; }
  .tenants img { width: calc(var(--w) / 16 * 1rem); }

  .slash { width: 2.1875rem; height: 2.1875rem; margin: 3.125rem auto; }

  .outreach { max-width: 54rem; margin-top: 4.2rem; padding: 0 var(--gut); box-sizing: content-box; font-size: var(--txt); line-height: 1.2; text-wrap: wrap; }
  .outreach::after { width: 25rem; margin-top: 2.5rem; }
  .trio { grid-template-columns: 446fr 248fr 582fr; gap: .625rem; width: calc(100% - 2 * var(--gut)); max-width: var(--wrap); margin: 3.7rem auto 0; }
  .trio li:nth-child(1) { grid-column: auto; }

  .rule { gap: 2.15rem; font-size: 2.5rem; }
  .about .rule { margin-top: 7.25rem; }
  .lead-h { margin-top: 1.95rem; font-size: 2.5rem; }
  .people {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: min(6.06rem, 4.5vw); row-gap: 3rem;
    max-width: calc(75.5rem + 2 * var(--gut)); margin-top: 3.6rem; padding: 0 var(--gut);
  }
  .people li { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: min(1.9rem, 2.2vw); align-content: start; }
  .people img { width: 7.5rem; height: 7.5rem; }
  .people h4 { margin-top: -.2rem; font-size: 1.5625rem; line-height: 1.875rem; padding-bottom: .28rem; background-size: 6.25rem 2px; }
  .people p { font-size: 1.125rem; line-height: 1.35rem; }
  .who p { max-width: 25.3rem; margin-top: .35rem; }
  .bio { margin-top: 1.05rem; }
  .bio p + p { margin-top: 1.35rem; }
  .about .team-h { width: calc(100% - 2 * var(--gut)); max-width: var(--wrap); margin: 3.4rem auto 0; }
  .team-h + .people { margin-top: 4.1rem; }

  .projects { width: calc(100% - 2 * var(--gut)); max-width: 67.875rem; margin: 4.4rem auto 0; }
  .projects h2 { display: grid; place-items: center; min-height: 6.25rem; padding: .5rem 1rem; font-size: 2.5rem; }
  .proj { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 3.125rem; scroll-margin-top: 8rem; }
  .cell.text { order: 0; display: flex; flex-direction: column; justify-content: center; padding: 1rem 1rem 1rem min(4.42rem, 5vw); }
  .sw .text { grid-row: span 2; }
  .cell h3 { font-size: clamp(1.7rem, 3.3vw, 2.5rem); line-height: 1.2; }
  .cell h3::before { left: -1.3rem; top: .34em; width: .75rem; height: 1.375rem; }
  .cell .sub, .cell .small, .cell hr { margin-left: -1.29rem; }
  .cell .sub { margin-top: .45rem; font-size: clamp(1.15rem, 2vw, 1.5625rem); line-height: 1.2; }
  .cell .small { margin-top: 1.3rem; color: var(--muted); font-size: 1.125rem; line-height: 1.35rem; }
  .cell h3 + .small { margin-top: 1.15rem; }
  .cell .small + .small { margin-top: 1.35rem; }
  .cell hr { width: min(26.25rem, 100%); margin-block: 2.6rem 3.5rem; }

  .contact { padding: 1.85rem var(--gut) 3.2rem; }
  .contact .rule { margin-inline: calc(-1 * var(--gut)); gap: 2.4rem; }
  .contact form { gap: 1.25rem; margin-top: 3.05rem; }
  .contact input, .contact textarea { padding: 0 .7rem; font-size: 1.125rem; }
  .contact input { height: 2.5rem; }
  .contact textarea { padding-block: .5rem; }
  .contact button { font-size: 1.5625rem; }

  footer { box-sizing: border-box; min-height: 16.925rem; padding: 3.8rem 0 1.6rem; }   /* 61 px of white, then the 210 px stripes */
  footer::before, footer::after { height: 13.125rem; width: 19.56rem; }
  footer::before { left: calc(50% - 45.53rem); clip-path: polygon(0 100%, 67.1% 0, 100% 0, 32.9% 100%); }
  footer::after { right: calc(50% - 45.53rem); clip-path: polygon(0 100%, 67.1% 0, 100% 0, 32.9% 100%); }
  .card { grid-template-columns: 1fr auto 1fr; column-gap: 0; margin-top: 0; padding: 0; }
  .card .logo { justify-self: end; width: 15.5rem; margin: 0 5rem 0 0; }
  .card .pin { display: block; width: 3.06rem; margin-top: .7rem; }
  .card .addr { margin-left: 4.35rem; }
  .card address, .card .mail { font-size: 1.5625rem; line-height: 1.875rem; }
  .card .mail { margin-top: .7rem; }
  .card .copy { margin-top: 2.44rem; font-size: .75rem; }
}

/* the designer's own line breaks, where the columns are as wide as on the artboard */
@media (min-width: 1500px) { br.w { display: inline; } .service .text p, .note p, .note .plans, .outreach { max-width: none; } }

/* ------------------------------------------------------------ 900-1099: desktop layout, menu behind the burger */

@media (min-width: 900px) and (max-width: 1099.98px) {
  .burger svg, .close svg { width: 1.375rem; height: 1.375rem; stroke-width: 1.6; }
  #menu:popover-open { padding-bottom: 1.75rem; font-size: 1.0625rem; line-height: 2.6rem; }
  .menu-head { display: flex; align-items: center; height: 6.25rem; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
  .menu-head img { position: static; width: 6.4375rem; }
  .close { top: 50%; right: max(1rem, calc(50% - var(--wrap) / 2 - .5rem)); margin-top: -1.375rem; }
  #menu .services { margin-top: .25rem; }
  .services a::before { left: -.975rem; width: .625rem; height: .625rem; margin-top: -.35rem; }
  #menu .more { margin-top: .75rem; }
}

/* ------------------------------------------------------------ full navigation from 1100 px */

@media (min-width: 1100px) {
  .bar { max-width: calc(62.5rem + 2 * var(--gut)); }
  .burger, .menu-head { display: none; }
  /* the popover is an ordinary inline nav here */
  #menu, #menu:popover-open {
    display: flex; align-items: center; position: static; inset: auto; width: auto; height: auto; max-height: none;
    overflow: visible; margin: 0 0 0 4.1rem; padding: 0; border: 0; background: none; color: #fff;
    font: 700 1.0625rem/2.075rem var(--body);
  }
  #menu .services { display: grid; grid-template-columns: auto auto; column-gap: 3.82rem; justify-items: start; width: auto; margin: 0; padding: 0; }
  .services a::before { left: -.975rem; width: .625rem; height: .625rem; margin-top: -.35rem; }
  #menu .more { gap: 2.05rem; margin: 0 0 .25rem 6.3rem; }
  #menu .more a { display: inline-block; padding-block: .5rem; margin-block: -.5rem; }
  #menu .services li { padding-left: .95rem; }
}

/* very old browsers without popover: no burger, the links simply sit in the page */
@supports not selector(:popover-open) {
  .burger, .menu-head { display: none; }
}

/* ------------------------------------------------------------ 404 */
.nf main { display: grid; justify-items: center; gap: 1.5rem; min-height: 100vh; min-height: 100dvh; align-content: center; padding: 2rem; text-align: center; }
.nf main > a img { width: 10rem; }
.nf h1 { font-size: 1.5rem; }
.nf main p { max-width: 34rem; }
.nf ul { display: grid; gap: .4rem; text-align: left; list-style: disc; padding-left: 1.2rem; }
.nf p a { color: var(--navy); text-decoration: underline; text-underline-offset: .15em; }