:root {
  --pad: 28px;
  --pad-row: 28px;
  --pad-menu-row: 28px;
  --fit-size: 10vw;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background: #fff;
  color: #2b2b2b;
  height: 100%;
}

body {
  font-family: "Helvetica Neue LT Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-x: hidden;
  letter-spacing: -0.2em;
  cursor: none;
}

#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 210px;
  height: 210px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
}

.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.accordion {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.row {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
}

.title-row {
  border-top: none;
  background: #2e7d5a;
  color: #fff;
  flex: 1;
}

.fit {
  white-space: nowrap;
  display: inline-block;
  font-weight: 500;
  line-height: 1;
}

.menu-toggle .fit {
  font-size: calc(var(--fit-size) * 0.92);
}

.row-toggle.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--pad-menu-row);
  padding-bottom: var(--pad-menu-row);
}

.row-swatch {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  margin-right: calc((var(--fit-size) * 0.92 - 64px) / 2);
  background: #7ee8ba;
  border-radius: 0;
  transition: border-radius 0.2s ease;
}

.contact-row .row-swatch {
  background: #ff5c72;
}

.row[data-open="true"] .row-swatch {
  border-radius: 50%;
}

.title-toggle .fit {
  font-size: var(--fit-size);
  margin-top: calc(var(--fit-size) * -0.12);
  margin-bottom: calc(var(--fit-size) * -0.12);
}

.row-toggle {
  display: block;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  background: none;
  border: none;
  text-align: left;
  cursor: none;
  color: inherit;
  font-family: inherit;
  padding: var(--pad-row) var(--pad);
}

.row-content {
  height: 0;
  overflow: hidden;
  contain: layout paint;
  will-change: height;
  transition: height 0.4s ease;
}

.row-content-inner {
  display: flex;
  align-items: center;
  max-width: 1150px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: #444;
  letter-spacing: normal;
  padding: 1.25rem var(--pad) 2.5rem;
  padding-left: 3%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.row[data-open="true"] .row-content-inner {
  opacity: 1;
}

.contact-row {
  background: #ffafc2;
}

.contact-row .row-content-inner {
  padding-top: 0;
  padding-bottom: calc(var(--pad-menu-row) * 2);
}

.title-row .row-content-inner {
  color: #fff;
}

.contact-details {
  display: flex;
  width: 100%;
  gap: 66px;
}

.contact-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.4em;
}

.contact-col-location {
  flex: 1 1 50%;
  font-size: 21px;
  font-weight: 666;
  gap: 33px;
  line-height: 1.4;
}

.about-row .contact-col-location {
  font-weight: 420;
}

.contact-col-location p {
  max-width: 666px;
}

.contact-row .contact-col-location {
  color: #ff5c72;
  gap: 0.4em;
  line-height: 1;
  font-weight: 420;
}

.contact-col-group {
  display: flex;
  flex: 1 1 50%;
  gap: 33px;
}

.contact-col-links {
  flex: 1 1 50%;
  font-size: 16px;
}

.services-note {
  font-style: italic;
  margin-bottom: 1em;
}

.title-row .contact-col-links:last-child p {
  max-width: 333px;
  line-height: 1.22;
}

.contact-details a,
.contact-details .copy-email {
  position: relative;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.contact-details a::after,
.contact-details .copy-email::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.05em;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.contact-details a:hover::after,
.contact-details .copy-email:hover::after {
  opacity: 1;
}

.contact-details .copy-email {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  cursor: none;
}

.accordion .row:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

@media (max-width: 640px) {
  :root {
    --pad: 10px;
    --pad-row: 10px;
    --pad-menu-row: 10px;
  }

  .row-swatch {
    width: 32px;
    height: 32px;
    margin-right: calc((var(--fit-size) * 0.92 - 32px) / 2);
  }

  /* Body copy shrinks on mobile; the row headings (title + Projects/Products/
     etc, which use --fit-size) are left alone since they already resize
     responsively via the auto-fit script. */
  .row-content-inner {
    font-size: 0.95rem;
    padding: 10px;
  }

  .contact-col-location {
    font-size: 18px;
    gap: 1.25rem;
  }

  .contact-col-links {
    font-size: 15px;
  }

  .contact-details {
    flex-direction: column;
    gap: 1.25rem;
  }

  .contact-col-group {
    flex-direction: column;
    gap: 1.25rem;
  }

  .contact-col {
    flex: none;
    width: 100%;
  }

  .title-row {
    display: flex;
    flex-direction: column;
  }

  .title-row .row-content {
    margin-top: auto;
  }

  .title-row .contact-details .contact-col-links:last-child {
    flex: none;
    width: 67%;
    font-weight: 500;
  }
}

/* Touch devices: no real mouse, so the custom cursor graphic has nothing to
   track and can get stuck on-screen after the first tap (mobile browsers
   fire one synthetic mousemove on tap). Disable it and restore the native
   (invisible, on touch) cursor behavior. */
@media (hover: none), (pointer: coarse) {
  #custom-cursor {
    display: none;
  }

  body,
  .row-toggle,
  .contact-details a,
  .contact-details .copy-email {
    cursor: auto;
  }
}