:root {
  color-scheme: light;
  font-size: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #f4f8fc; }
.quickesto {
  --ink: #102438;
  --secondary: #344e65;
  --blue: #194e76;
  --rule: #b7ccde;
  --gutter: clamp(1.125rem, 5.1vw, 5.25rem);
  position: relative;
  color: var(--ink);
  background: radial-gradient(ellipse at 76% 33%, #d7e9f8 0, #eef5fb 42%, #f8fafc 76%);
  font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.quickesto :is(h1, h2, p) { margin: 0; }
.quickesto :is(h1, h2) { text-wrap: balance; }
.quickesto p { text-wrap: pretty; }
.quickesto a { color: inherit; text-underline-offset: .23em; }
.quickesto a:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
.frame { width: min(100% - 2 * var(--gutter), 81rem); margin-inline: auto; }
.skip { position: absolute; top: .5rem; left: .5rem; z-index: 2; padding: .7rem; background: #fff; }
.skip:not(:focus) { clip-path: inset(50%); }
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .7rem 1.2rem;
  min-height: 4.75rem;
  padding-block: .75rem;
  border-bottom: 1px solid var(--rule);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: clamp(1.6rem, 2.45vw, 2.2rem);
  line-height: 1;
  font-weight: 790;
  letter-spacing: -.071em;
  text-decoration: none;
}
.dedication { color: var(--secondary); font-size: .83rem; font-weight: 650; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  column-gap: clamp(1.75rem, 4.6vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.6rem, 5.8vw, 5rem);
}
.eyebrow {
  color: var(--blue);
  font-size: .72rem;
  font-weight: 760;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero h1 {
  margin-block: .85rem 1.15rem;
  font-size: clamp(2.45rem, 5.25vw, 5.35rem);
  line-height: .99;
  font-weight: 640;
  letter-spacing: -.057em;
}
.hero h1 span { color: var(--blue); white-space: nowrap; }
.intro { max-width: 46ch; color: var(--secondary); font-size: clamp(.99rem, 1.4vw, 1.15rem); }
.quickesto .contact {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.95rem;
  gap: 1.2em;
  max-width: 100%;
  margin-top: 1.45rem;
  padding: .72em .95em;
  border: 1px solid #234867;
  background: #153550;
  color: #f5faff;
  font-size: .88rem;
  font-weight: 670;
  line-height: 1.3;
  text-decoration: none;
}
.quickesto .contact:hover { background: #214a6b; }
.contact span { font-size: 1.06rem; }
.artwork { min-width: 0; }
.artwork img { display: block; width: 100%; height: auto; }
.services {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1.35rem, 3.7vw, 3.6rem);
  border-block: 1px solid var(--rule);
}
.services article { padding-block: 1.14rem 1.28rem; }
.services h2 {
  margin-bottom: .38rem;
  font-size: clamp(.94rem, 1.35vw, 1.15rem);
  font-weight: 740;
  letter-spacing: -.032em;
  line-height: 1.18;
}
.services p { max-width: 32ch; color: var(--secondary); font-size: .88rem; line-height: 1.46; text-wrap: balance; }
.footer { display: flex; justify-content: flex-end; align-items: center; min-height: 3.3rem; }
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  gap: .55em;
  color: var(--secondary);
  font-size: .77rem;
  font-weight: 650;
  text-decoration: none;
}
.footer a:hover { text-decoration: underline; }
@media (max-width: 61rem) {
  .hero h1 { font-size: clamp(2.2rem, 5.3vw, 4rem); }
  .services { gap: 0 1.35rem; }
}
@media (max-width: 45rem) {
  .masthead { min-height: 3.65rem; padding-block: .34rem; }
  .hero { grid-template-columns: 1fr; gap: 1.45rem; padding-block: 1.7rem 1.45rem; }
  .hero h1 { font-size: clamp(2rem, 8.6vw, 4rem); margin-block: .62rem .75rem; }
  .quickesto .contact { margin-top: .95rem; }
  .artwork img { width: min(82%, 23rem); margin-inline: auto; }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .95rem; }
  .services article { padding-block: .82rem; }
  .services article:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 23rem) {
  .hero { gap: 1rem; padding-block: 1.35rem 1.1rem; }
  .artwork img { width: min(85%, 17rem); }
  .services h2 { font-size: .93rem; }
  .services p { font-size: .82rem; }
}