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

  html { overflow-x: clip; background: #fff; }
  body { overflow-x: clip; }
  body {
    background: #fff;
    max-width: 34em;
    margin: 2em auto;
    padding: 0 1.25em 6em;
    font-size: 18px;
    line-height: 1.5;
  }

  h2 { font-size: 26px; }
  h3 { font-size: 21px; }
  header { position: relative; }
  h1 { font-size: 34px; margin-bottom: .25em; }
  h1 a { color: inherit; text-decoration: none; }

  /* two-line hamburger */
  #menu-button {
    position: absolute;
    top: .5em;
    right: 0;
    width: 2em;
    height: 2em;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }
  #menu-button span {
    display: block;
    width: 1.5em;
    height: 1px;
    margin: .35em auto;
    background: currentColor;
    transition: transform .2s, opacity .2s;
  }
  #menu-button[aria-expanded="true"] span:first-child { transform: translateY(.18em) rotate(45deg); }
  #menu-button[aria-expanded="true"] span:last-child { transform: translateY(-.18em) rotate(-45deg); }

  #menu { margin: 1.5em 0 0; }
  #menu[hidden] { display: none; }
  #menu ul { list-style: none; margin: 0; padding: 0; }
  #menu li { margin-bottom: .35em; }

  main { margin-top: 2.5em; }

  hr { margin: 3em 0; border: 0; border-top: 1px solid; }
  footer { margin-top: 4em; }

  .portrait { margin: 1.5em 0 2em; }
  .portrait img { display: block; width: 100%; max-width: 22em; height: auto; background: #f2f2f2; }

  .closer { margin-top: 75px; }

  /* ---- offers ---- */
  .lead { font-size: 24px; line-height: 1.25; margin: .6em 0 .8em; }

  .package { margin-bottom: 20px; }
  p + .package { padding-top: 25px; }
  .package + .package { margin-top: 40px; padding-top: 40px; border-top: 1px solid #ddd; }

  .eyebrow { margin: 0 0 .5em; color: #555; letter-spacing: .06em; font-size: 15px; }
  .package h3 { margin: 0 0 .15em; }
  .price { margin: 0 0 .15em; }
  .descriptor { margin: 0 0 .8em; color: #555; }
  .package p { margin-top: 0; }

  .includes { list-style: none; margin: 1em 0 1.2em; padding: 0; }
  .includes li { position: relative; padding-left: 1.6em; margin-bottom: .35em; }
  .includes li::before { content: "\2713"; position: absolute; left: 0; top: 0; }

  .tiers-intro { margin: 1.4em 0 .4em; color: #555; }
  .tiers { list-style: none; margin: 0 0 1.4em; padding: 0; }
  .tiers li {
    display: flex; justify-content: space-between; gap: 1em;
    padding: .5em 0; border-top: 1px solid #ddd;
  }
  .tiers li:last-child { border-bottom: 1px solid #ddd; }

  #calendar { margin: 1.5em 0 2.5em; }
  #calendar iframe { width: 100%; max-width: 100%; height: 620px; border: 0; }

  input, textarea {
    box-sizing: border-box;
    font: inherit; display: block;
    width: 100%; max-width: 24em;
    padding: .5em .6em;
    border: 1px solid #999;
    margin-bottom: 1em;
  }
  textarea { resize: vertical; }
  button[type="button"], button[type="submit"] { padding: .55em 1.2em; cursor: pointer; }
  #book-status:empty { display: none; }
  label { display: block; margin-bottom: .25em; }
  button { font: inherit; }

  /* load-in effect */
  main.fade > *:not(h2) { opacity: 0; }
  main.fade.revealed > *:not(h2) { opacity: 1; transition: opacity .5s ease; }
  @media (prefers-reduced-motion: reduce) {
    main.fade > *:not(h2) { opacity: 1; }
    #menu-button span { transition: none; }
  }

  /* ---- work list ---- */
  .work-list { list-style: none; margin: 2em 0 0; padding: 0; }
  .work-list li { border-top: 1px solid #ddd; }
  .work-list li:last-child { border-bottom: 1px solid #ddd; }
  .work-list button {
    display: block; width: 100%; text-align: left;
    font: inherit; color: inherit; background: none; border: 0;
    padding: 18px 0; cursor: pointer;
  }
  .work-list button:hover .work-name { text-decoration: underline; }
  .work-list button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
  .work-name { display: block; }
  .work-note { display: block; color: #555; margin-top: .2em; }

  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .gallery__halo { transition: none; }
  }

  /* ---- case study drawer ---- */
  .drawer {
    position: fixed; inset: 0; z-index: 100;
    background: #fff; overflow-y: auto; overscroll-behavior: contain;
  }
  .drawer[hidden] { display: none; }
  body.-locked { overflow: hidden; }

  .drawer__bar {
    position: sticky; top: 0; z-index: 2;
    display: flex; justify-content: flex-end;
    padding: 14px 20px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);
  }
  .drawer__close {
    font: inherit; color: inherit; background: none; border: 0;
    padding: 6px 2px; cursor: pointer; text-decoration: underline;
  }

  .drawer__body { max-width: 56em; margin: 0 auto; padding: 0 20px 96px; }
  .drawer__name { margin: 1em 0 .2em; font-size: 21px; }
  .drawer__services { margin: 0 0 1.6em; color: #555; }
  .drawer__tagline {
    margin: 0 0 1.4em; font-weight: 400; line-height: 1.15;
    font-size: clamp(27px, 4.3vw, 44px);
  }
  .drawer figure { margin: 0 0 20px; }
  .drawer img { display: block; width: 100%; height: auto; background: #f2f2f2; }

  .drawer__label { margin: 2.6em 0 .4em; color: #555; }
  .drawer__overview { margin: 0 0 1em; font-weight: 400; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.2; }

  .drawer__meta { margin: 2em 0 3em; padding: 0; }
  .drawer__meta div { display: flex; gap: 1em; padding: .5em 0; border-top: 1px solid #ddd; }
  .drawer__meta dt { width: 6em; color: #555; margin: 0; }
  .drawer__meta dd { margin: 0; }

  .drawer__next { margin-top: 3em; padding-top: 2em; border-top: 1px solid #ddd; }

  nav a[aria-current="page"] { text-decoration: none; color: inherit; }