.agency-page { --agency-cream: #f3f2e8; --agency-green: #223020; --agency-sage: #dce3c4; background: var(--agency-cream); }
.agency-page h1 { font-size: clamp(2.9rem, 5.9vw, 5.7rem); line-height: 1.06; letter-spacing: -.05em; }
.agency-page h1 em, .agency-page h2 em { font-family: Georgia, serif; font-weight: 400; color: #607047; }
.agency-page h2 { font-size: clamp(2rem, 3.8vw, 3.65rem); line-height: 1.12; letter-spacing: -.035em; }
.agency-page h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.3; letter-spacing: -.02em; }
.agency-page p { line-height: 1.75; }
.agency-intro { padding: 42px 0 0; }
.agency-intro .breadcrumb { margin-bottom: 55px; }
.agency-intro-grid { display: grid; grid-template-columns: 1.6fr 1fr; align-items: end; gap: 60px; padding-bottom: 55px; }
.agency-page .agency-lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #4d5944; max-width: 460px; margin: 26px 0 0; }
.agency-link { display: inline-flex; align-items: center; gap: 24px; padding: 12px 0; border-bottom: 1px solid currentColor; font-weight: 650; text-decoration: none; line-height: 1.5; }
.agency-link span { transition: transform .2s ease; }
.agency-link:hover span { transform: translate(3px, -3px); }
.portfolio-index { display: flex; gap: 24px; justify-content: space-between; padding: 22px 0; border-top: 1px solid #bcc5ab; font-size: .875rem; color: #4d5944; }
.portfolio-index a { text-underline-offset: 4px; }
.portfolio-gallery { padding: 20px 0 100px; }
.portfolio-image { display: block; overflow: hidden; text-decoration: none; }
.portfolio-website { padding: clamp(20px, 5vw, 65px); background: var(--agency-sage); border-radius: 12px; }
.portfolio-website img { width: 100%; height: auto; border-radius: 0 0 5px 5px; box-shadow: 0 24px 42px #22302022; }
.browser-chrome { display: flex; gap: 5px; height: 25px; padding: 9px 12px; background: #eef0e4; border-radius: 5px 5px 0 0; }
.browser-chrome i { width: 6px; height: 6px; border-radius: 50%; background: #899478; }
.portfolio-caption { display: grid; grid-template-columns: 1.3fr 1fr; gap: 65px; padding: 36px 0 80px; }
.portfolio-caption h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.portfolio-caption > div > p:not(.eyebrow):first-child { font-weight: 700; }
.portfolio-description { color: #4d5944; max-width: 480px; }
.portfolio-secondary { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--agency-green); color: #edf0df; border-radius: 12px; overflow: hidden; }
.portfolio-secondary-copy { align-self: center; padding: clamp(28px, 4.5vw, 60px); }
.portfolio-secondary h2 { color: #f0f2e5; font-size: clamp(2rem, 3vw, 2.9rem); margin-bottom: 28px; }
.portfolio-secondary .eyebrow { color: #c4d391; }
.portfolio-secondary p { color: #d4ddc9; }
.portfolio-search { padding: clamp(22px, 4vw, 50px); background: #c3ceab; display: flex; align-items: center; }
.portfolio-search img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 15px 40px #14201122; }
.agency-end { background: #e4e7d4; padding: 65px 0; border-top: 1px solid #c2cbaf; }
.agency-end > .container { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: center; }
.agency-end p { max-width: 450px; }
.about-intro-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 70px; align-items: center; padding-bottom: 80px; }
.about-intro .agency-link { margin-top: 24px; }
.about-art { position: relative; border-radius: 180px 180px 10px 10px; overflow: hidden; background: var(--agency-green); }
.about-art img { width: 100%; height: auto; }
.about-art-caption { display: block; padding: 0 24px 28px; text-align: center; color: #d8e2c6; font-size: .8rem; }
.about-statement { padding: 85px 0; background: var(--agency-sage); }
.about-statement > .container { display: grid; grid-template-columns: .55fr 1.45fr; gap: 60px; }
.about-statement .eyebrow { padding-top: 8px; }
.about-statement-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 32px; }
.about-values { padding: 95px 0; background: var(--agency-green); color: #e8eddf; }
.about-values > .container { display: grid; grid-template-columns: 1fr 1.1fr; gap: 75px; }
.about-values h2, .about-values h3 { color: #f0f2e6; }
.about-values .eyebrow { color: #c4d391; }
.about-value-list article { display: grid; grid-template-columns: 38px 1fr; gap: 18px; border-top: 1px solid #536449; padding: 27px 0; }
.about-value-list article:first-child { padding-top: 20px; }
.about-value-list article > span { color: #bdcd97; font-size: .875rem; }
.about-value-list p { color: #cdd7c3; margin: 14px 0 0; }
.about-connections { padding: 70px 0; }
.about-connections > .container { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.about-connections-art { background: #e9eddf; border-radius: 12px; }
.about-connections h2 { margin-bottom: 25px; }
.about-connections p { max-width: 490px; }
@media (max-width: 800px) {
  .agency-intro-grid, .about-intro-grid, .portfolio-caption, .portfolio-secondary, .about-statement > .container, .about-values > .container, .about-connections > .container, .agency-end > .container { grid-template-columns: 1fr; gap: 30px; }
  .agency-intro .breadcrumb { margin-bottom: 36px; }
  .agency-intro-grid { padding-bottom: 32px; }
  .agency-page .agency-lead { margin-top: 0; max-width: 560px; }
  .about-intro .agency-lead { margin-top: 24px; }
  .portfolio-index { flex-wrap: wrap; gap: 12px 24px; }
  .portfolio-index span:nth-child(2) { display: none; }
  .portfolio-caption { padding-bottom: 50px; }
  .portfolio-secondary { gap: 0; }
  .about-art { max-width: 470px; width: 100%; justify-self: center; }
  .about-statement, .about-values, .agency-end { padding: 55px 0; }
  .portfolio-gallery { padding-bottom: 55px; }
  .about-intro-grid { padding-bottom: 50px; }
  .about-connections > .container { gap: 35px; }
}
@media (max-width: 480px) {
  .about-statement-copy { grid-template-columns: 1fr; gap: 0; }
  .agency-page h1 { font-size: clamp(2.6rem, 10.7vw, 3.3rem); }
  .agency-intro { padding-top: 28px; }
  .portfolio-index { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { .agency-link span { transition: none; } }

.agency-page h1, .agency-page h2, .agency-page h3 { overflow-wrap: anywhere; }
.agency-page .container > *, .about-value-list, .about-value-list article > * { min-width: 0; }