/* The original supplied emblem is unchanged. Its alpha silhouette takes the
   website ink through CSS; the accompanying name is live Bodoni lettering. */
.gg-mark {
  display: inline-block;
  background: currentColor;
  -webkit-mask: url('assets/brand/gg-mark.png') center / contain no-repeat;
  mask: url('assets/brand/gg-mark.png') center / contain no-repeat;
  aspect-ratio: 2944 / 2660;
  flex-shrink: 0;
}
.brand { gap: 14px; }
.brand > .gg-mark { width: 66px; height: auto; }
.brand > .brand-name {
  font-family: var(--display-font);
  font-size: 28px;
  letter-spacing: .035em;
  line-height: .99;
  text-transform: uppercase;
}
.brand-name > span { display: block; margin-top: 4px; }
.brand .gg-mark { transition: transform .65s var(--ease); }
.brand:hover .gg-mark { transform: translateY(-3px); }
.brand-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 28px 48px; }
.hero-mark { width: 86%; max-width: 380px; transition: transform 1s var(--ease); }
.hero-art:hover .hero-mark { transform: translateY(-7px); }
.hero-wordmark { font: 400 clamp(30px, 3.1vw, 45px)/1.2 var(--display-font); text-align: center; margin-top: 24px; text-transform: uppercase; letter-spacing: .03em; }
.brand-rule { width: 58px; border-top: 2px solid var(--ochre); margin: 22px 0 17px; }
.brand-panel-caption { font-size: 11px; letter-spacing: .22em; text-align: center; }
.hero h1 { font-size: clamp(48px, 4.8vw, 68px); }
.hero-description { font-size: 24px; }
.brand-study { min-height: 510px; border: 3px double var(--gold); border-radius: 46% 46% 0 0; padding: 68px 35px 30px; display: flex; align-items: center; flex-direction: column; justify-content: center; }
.brand-study > .study-caption { position: static; background: none; color: var(--gold); font-family: var(--text-font); padding: 0; font-size: 10px; letter-spacing: .17em; margin-bottom: 25px; }
.study-mark { width: 82%; max-width: 275px; }
.study-wordmark { font: 400 33px/1.2 var(--display-font); text-transform: uppercase; margin-top: 20px; text-align: center; }
.study-note { font-size: 20px; font-style: italic; text-align: center; margin-top: 12px; }
.next-brand { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 50px 28px; gap: 18px; }
.next-brand .gg-mark { width: 84%; max-width: 300px; }
.next-brand > p { font: 400 31px/1.2 var(--display-font); text-transform: uppercase; text-align: center; }
.footer-brand { font-family: var(--display-font); text-transform: uppercase; font-size: 22px; gap: 13px; }
.footer-brand .gg-mark { width: 47px; }
.contact-mark { width: 90px; margin: 0 auto 15px; }
.services summary > span:nth-child(2) { flex: 1; }
.services summary small { white-space: normal; }
.site-footer > p { font-size: 16px; }
.brand-panel, .brand-study { position: relative; }
/* Keep the botanical accents upright and their strokes joined at every size. */
.botanical-icon { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
svg.tiny-flower.botanical-icon { width: 18px; height: 24px; vertical-align: -6px; stroke-width: 2; transform-origin: 50% 90%; }
.hero-copy:hover .tiny-flower.botanical-icon,
.page-intro:hover .tiny-flower.botanical-icon { transform: rotate(-6deg); }
@media (max-width: 1150px) {
  .hero h1 { font-size: 51px; }
  .brand-panel { padding: 42px 20px 32px; }
  .hero-wordmark { font-size: 32px; }
  .main-nav { gap: 20px; font-size: 16px; }
}
@media (max-width: 900px) {
  .hero h1 { font-size: 44px; }
  .hero-wordmark { font-size: 27px; }
  .hero-description { font-size: 22px; }
  .brand-panel-caption { font-size: 8px; }
  .brand-rule { margin-block: 15px 12px; }
  .brand-study { min-height: 475px; padding-inline: 20px; }
  .study-wordmark { font-size: 27px; }
}
@media (max-width: 700px) {
  .brand { gap: 9px; }
  .brand > .gg-mark { width: 48px; }
  .brand > .brand-name { font-size: 24px; }
  .header-contact { font-size: 15px; padding: 10px 13px; gap: 9px; }
  .main-nav { font-size: 14px; gap: 0; }
  .hero h1 { font-size: clamp(32px, 10.2vw, 65px); }
  .hero-description { font-size: 23px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: .11em; }
  .brand-panel { padding: 45px 25px 30px; aspect-ratio: .9; }
  .hero-mark { max-width: 330px; }
  .hero-wordmark { font-size: clamp(25px, 7.5vw, 40px); margin-top: 18px; }
  .brand-panel-caption { font-size: 9px; }
  .art-caption { font-size: 8px; letter-spacing: .11em; }
  .brand-study { min-height: 420px; padding: 48px 30px 28px; }
  .study-mark { max-width: 225px; }
  .study-wordmark { font-size: 30px; }
  .study-note { font-size: 19px; }
  .next-brand { padding: 35px 28px 20px; }
  .next-brand .gg-mark { max-width: 205px; }
  .next-brand > p { font-size: 29px; }
  .footer-brand { font-size: 19px; gap: 9px; }
  .footer-brand .gg-mark { width: 35px; }
  .footer-bottom { font-size: 12px; }
  .page-intro h1 { font-size: clamp(28px, 8vw, 50px); }
}
@media (max-width: 370px) {
  .brand > .gg-mark { width: 41px; }
  .brand > .brand-name { font-size: 21px; }
  .header-contact { font-size: 14px; padding: 9px 10px; }
  .main-nav { display: flex; font-size: 12px; gap: 0; }
  .hero h1 { font-size: 32px; }
  .hero-wordmark { font-size: 24px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .07em; }
  .small-note { font-size: 12px; }
  .hero .button { font-size: 15px; }
  .footer-brand { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand:hover .gg-mark, .hero-art:hover .hero-mark { transform: none; }
  .hero-copy:hover .tiny-flower.botanical-icon, .page-intro:hover .tiny-flower.botanical-icon { transform: none; }
}