.site.agency-page {
  --agency-spacing: clamp(62px, 9cqw, 146px);
  --agency-serif: "Instrument Serif", Georgia, serif;
  --agency-muted: #b9b9bb;
}

.site .agency-dark {
  --line: rgb(255 255 255 / .2);
  background: var(--ink);
  color: var(--paper);
}

.site .agency-header .top-line {
  min-block-size: 74px;
  border-bottom: 1px solid var(--line);
}

.site .agency-brand {
  flex-shrink: 0;
  font: 400 clamp(.84rem, 1.29cqw, 1.26rem)/1 "Archivo Black", Arial, sans-serif;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.site .agency-header .top-nav {
  margin-inline-start: auto;
}

.site .agency-header .header-contact {
  margin-inline-start: 8px;
}

.site .agency-header :is(.top-nav .pill, .menu-toggle) {
  background: rgb(255 255 255 / .12);
  color: var(--paper);
}

.site .agency-header :is(.top-nav .pill, .menu-toggle):hover {
  background: rgb(255 255 255 / .22);
}

.site .agency-header .top-nav [aria-current="page"] {
  background: var(--paper);
  color: var(--ink);
}

.site .agency-header .top-nav [aria-current="page"]:hover {
  background: var(--button);
}

.site .agency-header .top-nav [aria-current="page"]:focus-visible,
.site .agency-dark .pill-white:focus-visible {
  outline-color: var(--paper);
}

.site .agency-header .agency-mobile-contact { display: none; }

.site .agency-opening {
  padding-block: clamp(58px, 7.4cqw, 132px) clamp(58px, 7.1cqw, 125px);
  text-align: center;
}

.site .agency-opening h1 {
  font: 400 clamp(3.1rem, 8.4cqw, 9.4rem)/.97 var(--agency-serif);
  letter-spacing: -.023em;
  text-wrap: balance;
}

.site .agency-opening .agency-button {
  min-block-size: clamp(48px, 4cqw, 64px);
  margin-block-start: clamp(25px, 3.2cqw, 48px);
  padding-inline: clamp(21px, 2.25cqw, 35px);
  font-size: clamp(1rem, 1.45cqw, 1.28rem);
  letter-spacing: 0;
  text-transform: none;
}

.site .agency-overview > p {
  max-width: 55ch;
  margin-block-end: clamp(22px, 3.7cqw, 56px);
  color: #dedee0;
  font-size: clamp(1.22rem, 2.42cqw, 2.55rem);
  letter-spacing: -.025em;
  line-height: 1.34;
}

.site.agency-page figure > img {
  display: block;
  width: 100%;
  height: auto;
}

.site .agency-panorama img {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: #272725;
  object-fit: cover;
  object-position: center 54%;
}

.site.agency-page figcaption {
  margin-block-start: 9px;
  color: var(--subtle);
  font-size: .84rem;
}

.site .agency-dark figcaption { color: var(--agency-muted); }

.site .agency-facts {
  padding-block: clamp(46px, 6.7cqw, 106px);
}

.site :is(.agency-facts dl, .agency-tool-list) { margin: 0; }

.site .agency-facts dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: 16px clamp(24px, 5cqw, 76px);
  border-top: 1px solid var(--line);
  padding-block: clamp(21px, 3.05cqw, 52px);
}

.site .agency-facts dl > div:last-child { border-bottom: 1px solid var(--line); }

.site .agency-facts dt {
  font: 400 clamp(2.6rem, 6.1cqw, 7.1rem)/.99 var(--agency-serif);
  letter-spacing: -.02em;
}

.site .agency-facts dd {
  max-width: 38ch;
  margin: 0;
  color: var(--agency-muted);
  font-size: clamp(1.02rem, 1.51cqw, 1.45rem);
  line-height: 1.49;
}

.site .agency-work { padding-block-end: var(--agency-spacing); }

.site .agency-work-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(26px, 3cqw, 40px) clamp(10px, 1.05cqw, 18px);
}

.site .agency-work-image {
  overflow: hidden;
  border-radius: var(--radius);
  background: #e5e3de;
}

.site .agency-work-image img {
  aspect-ratio: 1;
  object-fit: cover;
}

.site .agency-work-contain img { object-fit: contain; }

.site .agency-work-grid h3 {
  margin-block-start: 14px;
  font-size: clamp(1.17rem, 1.83cqw, 1.75rem);
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.2;
}

.site .agency-work-grid p {
  max-width: 28ch;
  margin-block-start: 7px;
  color: var(--agency-muted);
  font-size: clamp(.95rem, 1.16cqw, 1.05rem);
}

.site .agency-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  font-size: .98rem;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.site .agency-text-link:hover { text-decoration-thickness: 2px; }

.site :is(.agency-story, .agency-process, .agency-tools) {
  padding-block: var(--agency-spacing);
}

.site .agency-story { background: #f6f5f1; }

.site .agency-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(27px, 6.15cqw, 105px);
}

.site :is(.agency-copy, .agency-tools) h2 {
  max-width: 17ch;
  font: 400 clamp(2.6rem, 5.15cqw, 5.6rem)/.99 var(--agency-serif);
  letter-spacing: -.018em;
  text-wrap: balance;
}

.site .agency-copy p {
  max-width: 50ch;
  margin-block-start: clamp(17px, 1.75cqw, 27px);
  font-size: clamp(1.02rem, 1.49cqw, 1.36rem);
  line-height: 1.57;
}

.site .agency-copy .agency-text-link { margin-block-start: 16px; }

.site .agency-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6cqw, 24px) clamp(10px, 1.05cqw, 18px);
}

.site .agency-photo-grid .agency-room { grid-column: 1 / -1; }

.site .agency-photo-grid img {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: #eceae4;
  object-fit: cover;
}

.site .agency-photo-grid .agency-room img { aspect-ratio: 16 / 9; }

.site .agency-photo-grid .agency-product img {
  background: #fff;
  padding: 11px;
  object-fit: contain;
}

.site .agency-process-image img {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius);
  background: #eeebe5;
  padding: clamp(10px, 1.4cqw, 23px);
  object-fit: contain;
}

.site .agency-tools { background: var(--accent); }

.site .agency-tools h2 { margin-block-end: clamp(24px, 3.8cqw, 58px); }

.site .agency-tool-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(16px, 3.3cqw, 51px);
}

.site .agency-tool-list > div {
  border-top: 1px solid rgb(7 7 8 / .18);
  padding-block: clamp(16px, 2.25cqw, 32px);
}

.site .agency-tool-list dt {
  font-size: clamp(1.13rem, 1.7cqw, 1.65rem);
  letter-spacing: -.018em;
  overflow-wrap: anywhere;
}

.site .agency-tool-list dd {
  margin: 7px 0 0;
  color: #292b0f;
  font-size: clamp(.95rem, 1.25cqw, 1.13rem);
}

@container (max-width: 830px) {
  .site .agency-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .agency-split { gap: 30px; }
}

@container (max-width: 745px) {
  .site .agency-header .header-contact { display: none; }
  .site .agency-header .agency-mobile-contact { display: inline-flex; }
  .site .agency-split { grid-template-columns: minmax(0, 1fr); }
  .site .agency-process-image { order: 1; }
  .site .agency-tool-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 590px) {
  .site .agency-header .top-line { min-block-size: 63px; }
  .site .agency-header .top-nav { margin-inline-start: 0; }
  .site.agency-page .agency-header .menu-toggle:not([hidden]) ~ .top-nav { background: var(--ink); }
  .site .agency-line-break { display: none; }
  .site .agency-facts dl > div { grid-template-columns: minmax(0, 1fr); }
}

@container (max-width: 460px) {
  .site .agency-work-grid { grid-template-columns: minmax(0, 1fr); }
  .site .agency-opening h1 { font-size: clamp(2.65rem, 12cqw, 3.5rem); }
}