/* HOMEPAGE */

body {
  font-size: 15px;
  overflow-x: hidden;
}

body.nav-menu-open {
  overflow: hidden;
}

body.nav-open {
  overflow: hidden;
}

.nav {
  width: 100%;
  min-height: 102px;
  margin-top: 0;
  padding: 18px 22px;
  border-radius: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: stretch;
  row-gap: 0;
  overflow: hidden;
  transition: padding-bottom 0.35s ease;
  position: relative;
  top: 0;
  z-index: 40;
  isolation: isolate;
}

.nav::after {
  display: none;
}

.nav-mobile-panel {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  gap: 18px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  transition: max-height 0.38s ease, opacity 0.25s ease, padding-top 0.35s ease;
}

.nav-left,
.nav-right {
  display: none;
}

.nav-mobile-primary,
.nav-mobile-secondary,
.nav-mobile-projects {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 0;
  position: relative;
  z-index: 1;
}

.nav-logo {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.nav-logo-img {
  width: 76px;
}

.nav-toggle {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  position: relative;
  z-index: 2;
}

.nav-toggle span {
  width: 34px;
  height: 5px;
  border-radius: 999px;
  background-color: #1E1E1E;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav.nav-open {
  padding-bottom: 24px;
}

.nav.nav-open .nav-mobile-panel {
  max-height: 420px;
  opacity: 1;
  padding-top: 18px;
}

.nav.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}

.nav.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

#frosty-halo-page .nav-toggle span,
#el-origen-page .nav-toggle span,
#eleanor-page .nav-toggle span {
  background-color: #FFF7DC;
}

#petguard-page .nav-toggle span {
  background-color: #FDE4D6;
}

#aqualume-page .nav-toggle span {
  background-color: #F2E8D5;
}

.nav a {
  font-size: 13px;
  letter-spacing: 0.8px;
}

.nav-mobile-primary a,
.nav-mobile-secondary a,
.nav-mobile-projects a {
  width: 100%;
  display: block;
  padding: 2px 0;
}

.nav-work-link {
  margin-bottom: 2px;
}

.nav-mobile-projects {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 0 2px 16px;
  border-left: 2px solid currentColor;
}

.nav-mobile-projects a {
  font-size: 10px;
  letter-spacing: 0.7px;
}

.nav-mobile-projects a::after {
  display: none;
}

.hero {
  width: 100%;
  height: auto;
  margin-top: 0;
  padding: 0;
}

.hero-picture {
  display: block;
}

.hero-content {
  display: none;
}

.hero-eyebrow {
  margin-bottom: 12px;
  font-size: 9px;
  padding: 4px 12px;
}

.hero h1 {
  font-size: 70px;
  letter-spacing: 1.4px;
}

.hero-banner {
  min-height: 76px;
  height: auto;
  margin-top: 0;
  padding: 16px 12px 0;
}

.hero-banner-text {
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.75px;
}

.hero-banner-track {
  min-height: 76px;
  align-items: center;
  transform: none;
}

.about {
  width: calc(100% - 32px);
  padding: 62px 0 74px;
  gap: 40px;
  grid-template-columns: 1fr;
}

.about-image {
  width: 100%;
  height: auto;
  max-width: 320px;
  margin: 0 auto;
  padding: 18px;
  aspect-ratio: 1 / 1;
}

.about-content {
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
}

.section-eyebrow {
  margin-bottom: 14px;
  padding: 5px 14px;
  font-size: 10px;
}

.about .section-eyebrow {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.55px;
}

.about h2 {
  font-size: 36px;
  margin-bottom: 14px;
}

.about-content p {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
}

.about-flower {
  width: 96px;
  top: 18px;
  right: -2px;
}

.selected-projects {
  width: calc(100% - 32px);
  padding: 0 0 32px;
}

.selected-projects-heading h2 {
  font-size: 42px;
  margin-bottom: 4px;
}

.selected-projects-heading p {
  font-size: 11px;
}

.project-categories {
  margin-top: 22px;
  gap: 8px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.category-btn {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 16px;
  border-radius: 11px;
  background-color: transparent;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.project-work {
  grid-template-columns: 1fr;
  width: calc(100% - 32px);
  padding: 0 0 76px;
  gap: 20px;
}

.project-card,
.coming-soon {
  min-height: 0;
  padding: 14px 14px 16px;
  border-radius: 24px;
}

.project-img {
  height: auto;
  aspect-ratio: 2300 / 2044;
  border-radius: 18px;
}

.project-card h3 {
  margin-top: 16px;
  font-size: 31px;
}

.project-card > p {
  min-height: 0;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.42;
  font-weight: 400;
}

.project-tags {
  margin-top: auto;
  padding-top: 18px;
  padding-right: 56px;
  gap: 10px;
  min-height: 40px;
}

.project-tags p {
  padding: 6px 15px 5px;
  font-size: 12px;
  border-radius: 999px;
}

.project-arrow {
  width: 40px;
  height: 40px;
  right: 14px;
  bottom: 16px;
}

.coming-soon {
  background-size: calc(100% - 18px) auto;
}

.coming-soon-inner {
  gap: 8px;
  padding: 16px 16px;
}

.coming-soon-eyebrow {
  padding: 7px 18px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.55px;
  transform: translateY(3px);
}

.coming-soon-inner h3 {
  font-size: 32px;
  letter-spacing: 0.3px;
}

.coming-soon {
  background-size: auto calc(100% - 28px);
}

.coming-soon-inner {
  min-height: 300px;
  gap: 8px;
  padding: 18px 16px;
}

.coming-soon-inner h3 {
  font-size: 30px;
  letter-spacing: 0.25px;
  line-height: 0.9;
}

.contact {
  width: calc(100% - 32px);
  padding: 4px 0 54px;
}

.contact-content {
  width: min(100%, 340px);
}

.contact .section-eyebrow {
  margin-bottom: 12px;
  padding: 5px 14px;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.55px;
}

.contact h2 {
  font-size: 42px;
  padding: 0;
}

.contact h2::before {
  top: 50%;
  width: calc(100% + 110px);
  max-width: 300px;
  height: 52px;
  transform: translate(-50%, -50%);
}

.contact-text {
  width: 100%;
  max-width: 260px;
  margin: 12px auto 24px;
  font-size: 11px;
  font-weight: 500;
}

.contact-links {
  width: 100%;
  margin-left: 0;
  flex-direction: row;
  justify-content: center;
  gap: 16px 14px;
  flex-wrap: wrap;
}

.contact-item {
  width: 120px;
  min-height: 0;
  padding: 0;
  gap: 0;
  align-items: center;
}

.contact-links img {
  width: 46px;
  height: 46px;
  padding: 9px;
}

.contact-links h3 {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.5px;
}

.contact-links p {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
}

.footer {
  margin-top: 0;
  padding: 0;
}

.footer-logo {
  bottom: 20px;
  width: 58px;
}

.footer-logo-img {
  width: 58px;
}

.footer-text {
  bottom: 4px;
  font-size: 9px;
}

/* SHARED PROJECT PAGES */
.project-tags-top {
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#aqualume-page .project-tags-top {
  flex-direction: row;
  align-items: center;
}

.project-tags-top p {
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.55px;
}

.prev-next-nav {
  padding: 0 20px 30px;
  gap: 34px;
  align-items: center;
  justify-content: center;
}

.pagination-link {
  gap: 8px;
}

.pagination-link p {
  display: none;
}

.pagination-arrow {
  width: 26px;
  height: 26px;
}

.project-hero,
.el-origen-hero,
.eleanor-hero,
.petguard-hero,
.aqualume-hero {
  padding-left: 18px;
  padding-right: 18px;
  text-align: center;
}

.project-hero-heading {
  margin-bottom: 34px;
}

.project-hero h1,
.el-origen-hero h1,
.eleanor-hero h1,
.petguard-hero h1,
.aqualume-hero h1 {
  font-size: 62px;
  letter-spacing: 1.8px;
  margin-left: auto;
  margin-right: auto;
}

.project-hero-text,
.el-origen-hero-text,
.eleanor-hero-text,
.petguard-hero-text,
.aqualume-hero-text {
  max-width: 320px;
  margin: 0 auto 28px;
  font-size: 13px;
  line-height: 1.56;
}

.project-hero-img,
.el-origen-hero-img,
.eleanor-hero-img,
.petguard-hero-img,
.aqualume-hero-img {
  max-width: 344px;
  margin: 0 auto;
  border-radius: 20px;
}

.frosty-hero-decor,
.el-origen-hero-decor,
.eleanor-hero-decor,
.petguard-hero-decor,
.aqualume-hero-decor {
  width: 100%;
  max-width: 88%;
  left: 50%;
  transform: translateX(-50%);
}

.project-hero {
  padding-top: 30px;
}

.frosty-hero-decor {
  top: 62px;
}

.el-origen-hero-decor {
  top: 72px;
}

.eleanor-hero-decor {
  top: 60px;
}

.petguard-hero-decor {
  top: 64px;
}

.aqualume-hero-decor {
  top: 66px;
}

.project-overview,
.el-overview,
.eleanor-overview,
.petguard-overview,
.aqualume-overview {
  width: calc(100% - 36px);
  max-width: 352px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 42px;
  padding-bottom: 64px;
  gap: 24px;
  text-align: center;
  justify-items: center;
  align-items: center;
}

.project-overview,
.el-overview,
.petguard-overview {
  flex-direction: column;
  align-items: center;
}

.eleanor-overview,
.aqualume-overview {
  grid-template-columns: 1fr;
}

.eleanor-overview-img {
  object-position: right center;
}

.aqualume-overview-visual {
  max-width: 100%;
  min-height: 180px;
  padding: 16px;
  justify-self: center;
}

.aqualume-overview-img {
  max-width: 220px;
}

.aqualume-logo-img {
  transform: translateX(-8px);
}

.aqualume-website-btn {
  min-height: 44px;
  margin-top: 34px;
  padding: 0 18px;
  font-size: 10px;
}

.project-overview h2,
.el-overview h2,
.eleanor-overview h2,
.petguard-overview h2,
.aqualume-overview h2,
.packaging-designs h2,
.typography-section h2,
.character-illustrations h2,
.deliverables-section h2,
.el-brand-section h2,
.el-typography-section h2,
.el-character-section h2,
.el-deliverables-section h2,
.el-final-deliverables h2,
.aqualume-logo-section h2,
.aqualume-palette h2,
.aqualume-icons-section h2,
.petguard-attributes h2,
.petguard-palette h2,
.petguard-illustrations h2 {
  font-size: 34px;
  margin-bottom: 14px;
}

.overview-description,
.el-overview-text,
.eleanor-overview-text,
.petguard-overview-text,
.aqualume-overview-text {
  max-width: 320px;
  font-size: 13px;
  line-height: 1.56;
}

.overview-grid,
.el-overview-grid,
.eleanor-overview-grid,
.petguard-overview-grid,
.aqualume-overview-grid {
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 320px;
  padding-top: 0;
  transform: none;
  justify-items: center;
}

.overview-item h3,
.el-overview .overview-item h3,
.eleanor-overview .overview-item h3,
.petguard-overview .overview-item h3,
.aqualume-overview .overview-item h3 {
  font-size: 11px;
}

.overview-item p,
.el-overview .overview-item p,
.eleanor-overview .overview-item p,
.petguard-overview .overview-item p,
.aqualume-overview .overview-item p {
  font-size: 13px;
}

.packaging-designs,
.typography-section,
.character-illustrations,
.deliverables-section,
.el-brand-section,
.el-typography-section,
.el-character-section,
.el-deliverables-section,
.el-final-deliverables,
.eleanor-showcase,
.eleanor-palette-section,
.eleanor-bottom-section,
.eleanor-deliverables-section,
.petguard-website,
.petguard-attributes,
.petguard-palette,
.petguard-typography,
.petguard-illustrations,
.aqualume-logo-section,
.aqualume-palette,
.aqualume-typography,
.aqualume-icons-section,
.aqualume-deliverables-section {
  width: calc(100% - 32px);
  margin-left: auto;
  margin-right: auto;
  max-width: 392px;
}

.packaging-designs,
.character-illustrations,
.deliverables-section,
.el-brand-section,
.el-typography-section,
.el-character-section,
.el-deliverables-section,
.el-final-deliverables,
.eleanor-palette-section,
.eleanor-bottom-section,
.eleanor-deliverables-section,
.petguard-attributes,
.petguard-palette,
.petguard-typography,
.petguard-illustrations,
.aqualume-logo-section,
.aqualume-palette,
.aqualume-typography,
.aqualume-icons-section,
.aqualume-deliverables-section {
  padding-bottom: 72px;
}

.packaging-row {
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

.color-palette {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.color-circle {
  width: 74px;
  height: 74px;
  margin-bottom: 12px;
}

.color-item p {
  font-size: 14px;
}

.typography-section,
.el-typography-section,
.petguard-typography,
.aqualume-typography {
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.font-card,
.el-font-card,
.petguard-font-card,
.aqualume-font-card {
  width: 100%;
  max-width: 320px;
  min-height: 0;
  padding: 24px 18px 22px;
}

.font-label,
.el-font-label,
.petguard-font-label,
.aqualume-font-label {
  font-size: 20px;
  margin-bottom: 14px;
}

.font-card h2,
.el-font-card h2,
.petguard-font-card h2,
.aqualume-font-card h2 {
  font-size: 48px;
  margin-bottom: 12px;
}

.font-card h3,
.el-font-card h3,
.petguard-font-card h3,
.aqualume-font-card h3 {
  font-size: 16px;
  margin-bottom: 10px;
}

.font-example,
.el-font-example,
.petguard-font-example,
.aqualume-font-example {
  font-size: 11px;
  line-height: 1.5;
}

.character-illustrations {
  padding-top: 0;
}

.character-top-row,
.character-bottom-row {
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.character-illustrations h2 {
  margin: 0 0 16px;
  padding-left: 0;
  text-align: center;
}

.top-character-img,
.main-character,
.side-character-img {
  max-width: none;
  width: 100%;
}

.main-character {
  height: auto;
  margin-top: 0;
  aspect-ratio: 1 / 1;
}

.side-characters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

#frosty-halo-page .character-top-row,
#frosty-halo-page .character-bottom-row {
  display: contents;
}

#frosty-halo-page .character-illustrations {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#frosty-halo-page .character-illustrations h2 {
  order: 1;
}

#frosty-halo-page .main-character {
  order: 2;
  width: 100%;
}

#frosty-halo-page .top-character-img {
  order: 3;
  width: 100%;
}

#frosty-halo-page .side-characters {
  order: 4;
  width: 100%;
}

.deliverables-grid,
.el-deliverables-grid {
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 24px;
}

.deliverables-section h2,
.el-final-deliverables h2 {
  margin-bottom: 24px;
}

.deliverable-small,
.deliverable-large {
  border-radius: 20px;
}

.el-brand-grid,
.el-character-grid,
.petguard-colors,
.petguard-illustration-grid,
.aqualume-icons {
  grid-template-columns: 1fr;
  gap: 20px;
  justify-items: center;
}

.el-logo-img,
.aqualume-logo-img {
  max-width: 100%;
  margin-top: 28px;
}

.el-palette-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  justify-items: center;
}

.el-brand-section,
.el-typography-section,
.el-character-section,
.el-deliverables-section,
.el-final-deliverables,
.el-top-deliverables,
.el-poster-grid,
.el-colors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.el-brand-section {
  justify-items: center;
}

.el-logo-box,
.el-palette-box,
.el-overview-content {
  width: 100%;
  text-align: center;
}

.el-overview-video,
.el-logo-card,
.el-stickers-img,
.el-bottle-mockup,
.el-small-deliverable,
.el-large-deliverable {
  width: 100%;
  max-width: 100%;
  justify-self: center;
}

.el-color {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
}

.el-poster-img,
.el-video,
.eleanor-showcase-img,
.eleanor-poster-img,
.petguard-website-img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.el-video {
  border-radius: 20px;
  overflow: hidden;
}

.packaging-img,
.deliverable-small,
.deliverable-large,
.project-hero-img,
.el-origen-hero-img,
.eleanor-hero-img,
.petguard-hero-img,
.aqualume-hero-img,
.aqualume-logo-img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.eleanor-palette-section {
  padding-bottom: 80px;
  margin-top: -14px;
}

.eleanor-palette-grid {
  max-width: 100%;
  gap: 16px 10px;
}

.palette-color {
  max-width: 88px;
}

.palette-shape {
  margin-bottom: 10px;
}

.palette-color p {
  font-size: 14px;
}

.eleanor-bottom-section {
  grid-template-columns: 1fr;
  gap: 20px;
  padding-bottom: 80px;
}

.eleanor-bottom-title {
  font-size: 34px;
  margin-bottom: 8px;
}

.eleanor-poster-section,
.eleanor-typography-section {
  width: 100%;
  height: auto;
  transform: none;
}

.eleanor-typography-section {
  gap: 20px;
  align-self: stretch;
}

.eleanor-font-card {
  max-width: 320px;
  flex: none;
}

.eleanor-showcase {
  padding-top: 0;
  width: calc(100% - 24px);
  max-width: 388px;
}

.eleanor-showcase-img {
  max-width: 100%;
}

.eleanor-poster-img {
  max-width: 330px;
  border-radius: 20px;
}

.eleanor-overview-visual {
  max-width: 100%;
  justify-self: center;
}

.eleanor-overview-img {
  border-radius: 20px;
}

.eleanor-ticket-img,
.eleanor-theater-img {
  width: 100%;
  max-width: 92%;
  display: block;
  margin: 0 auto;
}

.eleanor-ticket-img {
  margin-bottom: 20px;
}

.petguard-illustration-img {
  max-width: 180px;
}

.aqualume-colors {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.aqualume-color-item {
  max-width: 76px;
}

.aqualume-color {
  max-width: 76px;
  border-radius: 16px;
  margin-bottom: 8px;
}

.aqualume-color-item p {
  font-size: 12px;
}

.aqualume-icon-img {
  max-width: 138px;
}

.aqualume-icons-section h2 {
  margin-bottom: 18px;
}

.aqualume-icons {
  grid-template-columns: 1fr;
  gap: 22px;
}

.aqualume-deliverable-large {
  max-width: 100%;
  margin-bottom: 22px;
}

.aqualume-deliverables-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.project-footer,
.footer {
  text-align: center;
}

#frosty-halo-page .prev-next-nav,
#el-origen-page .prev-next-nav,
#eleanor-page .prev-next-nav,
#aqualume-page .prev-next-nav {
  padding: 0 20px 18px;
}

#frosty-halo-page .frosty-footer-logo-link,
#el-origen-page .el-footer-logo-link,
#eleanor-page .eleanor-footer-logo-link,
#aqualume-page .aqualume-footer-logo-link {
  width: 58px;
  bottom: 20px;
}

#frosty-halo-page .frosty-footer-year,
#el-origen-page .el-footer-year,
#eleanor-page .eleanor-footer-year,
#aqualume-page .aqualume-footer-year {
  bottom: 4px;
  font-size: 9px;
  color: #FFF3CF;
}

/* EL ORIGEN PAGE */
#el-origen-page {
  overflow-x: hidden;
}

#el-origen-page .el-origen-hero {
  padding: 26px 16px 0;
}

#el-origen-page .el-origen-hero-decor {
  max-width: 344px;
  top: 48px;
}

#el-origen-page .el-origen-hero h1 {
  font-size: 76px;
  letter-spacing: 1.6px;
  margin: 18px 0 12px;
}

#el-origen-page .el-origen-hero-text {
  max-width: 308px;
  margin: 0 auto 26px;
  font-size: 12px;
  line-height: 1.52;
}

#el-origen-page .el-overview,
#el-origen-page .el-brand-section,
#el-origen-page .el-typography-section,
#el-origen-page .el-character-section,
#el-origen-page .el-deliverables-section,
#el-origen-page .el-final-deliverables,
#el-origen-page .prev-next-nav {
  width: calc(100% - 32px);
  max-width: 344px;
  margin-left: auto;
  margin-right: auto;
}

#el-origen-page .el-overview {
  padding: 34px 0 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}

#el-origen-page .el-overview-content,
#el-origen-page .el-logo-box,
#el-origen-page .el-palette-box {
  width: 100%;
  max-width: 344px;
}

#el-origen-page .el-overview h2,
#el-origen-page .el-brand-section h2,
#el-origen-page .el-typography-section h2,
#el-origen-page .el-character-section h2,
#el-origen-page .el-final-deliverables h2 {
  font-size: 30px;
  margin-bottom: 10px;
}

#el-origen-page .el-overview-content > p,
#el-origen-page .el-overview .overview-item p {
  font-size: 11px;
  line-height: 1.45;
}

#el-origen-page .el-overview-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

#el-origen-page .el-overview .overview-item h3 {
  font-size: 10px;
  margin-bottom: 4px;
}

#el-origen-page .el-overview-video,
#el-origen-page .el-logo-img,
#el-origen-page .el-poster-img,
#el-origen-page .el-stickers-img,
#el-origen-page .el-small-deliverable,
#el-origen-page .el-large-deliverable,
#el-origen-page .el-bottle-mockup,
#el-origen-page .el-character-small,
#el-origen-page .el-character-large {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  justify-self: center;
}

#el-origen-page .el-brand-section,
#el-origen-page .el-typography-section,
#el-origen-page .el-character-section,
#el-origen-page .el-deliverables-section,
#el-origen-page .el-final-deliverables,
#el-origen-page .el-top-deliverables,
#el-origen-page .el-poster-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

#el-origen-page .el-brand-section,
#el-origen-page .el-typography-section,
#el-origen-page .el-character-section,
#el-origen-page .el-deliverables-section,
#el-origen-page .el-final-deliverables {
  padding-bottom: 42px;
}

#el-origen-page .el-logo-card {
  margin-top: 12px;
}

#el-origen-page .el-colors {
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 220px;
  margin: 0 auto;
}

#el-origen-page .el-color {
  max-width: 220px;
  min-height: 72px;
  border-radius: 18px;
}

#el-origen-page .el-font-card {
  max-width: 320px;
  padding: 18px 14px 16px;
  border-radius: 16px;
}

#el-origen-page .el-font-label {
  margin-bottom: 10px;
  font-size: 16px;
}

#el-origen-page .el-font-card h2 {
  font-size: 48px;
  margin-bottom: 8px;
}

#el-origen-page .el-font-name {
  margin-bottom: 8px;
  font-size: 14px;
}

#el-origen-page .el-font-alphabet,
#el-origen-page .canvas-font.el-font-alphabet {
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

#el-origen-page .el-character-large {
  grid-column: auto;
}

#el-origen-page .el-sticker-row {
  width: 100%;
}

#el-origen-page .prev-next-nav {
  padding: 0 0 8px;
}

#petguard-page .petguard-footer {
  margin-top: 6px;
  padding: 0 18px;
  height: 104px;
  border-radius: 18px 18px 0 0;
}

#petguard-page .petguard-footer::before,
#petguard-page .petguard-footer::after {
  width: 48px;
  height: 48px;
  top: -8px;
}

#petguard-page .petguard-footer-text {
  left: 18px;
  font-size: 9px;
}

#petguard-page .petguard-footer-logo {
  width: 58px;
}

#petguard-page .petguard-footer-year {
  font-size: 9px;
  bottom: 8px;
}

#petguard-page .petguard-footer {
  justify-content: center;
}

#petguard-page .petguard-footer-text {
  left: 12px;
}

/* PETGUARD PAGE */
#petguard-page .petguard-hero {
  padding: 26px 18px 0;
}

#petguard-page .petguard-hero-decor {
  max-width: 320px;
  top: 54px;
}

#petguard-page .petguard-hero h1 {
  font-size: 68px;
  letter-spacing: 1.5px;
  margin: 16px auto 12px;
}

#petguard-page .petguard-hero-text {
  max-width: 300px;
  margin: 0 auto 26px;
  font-size: 12px;
  line-height: 1.52;
}

#petguard-page .petguard-hero-img {
  max-width: 100%;
  border-radius: 16px;
}

#petguard-page .petguard-overview {
  width: calc(100% - 36px);
  max-width: 344px;
  margin: 0 auto;
  padding: 36px 0 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: center;
  text-align: center;
  justify-items: center;
}

#petguard-page .petguard-overview-left {
  max-width: 320px;
  justify-self: center;
}

#petguard-page .petguard-overview h2 {
  font-size: 30px;
  margin-bottom: 8px;
}

#petguard-page .petguard-overview-text {
  font-size: 13px;
  line-height: 1.56;
}

#petguard-page .petguard-overview-grid {
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 300px;
  margin-top: 14px;
}

#petguard-page .petguard-overview .overview-item h3 {
  font-size: 10px;
  margin-bottom: 6px;
}

#petguard-page .petguard-overview .overview-item p {
  font-size: 13px;
  line-height: 1.45;
}

#petguard-page .petguard-overview-visual {
  justify-content: center;
  align-self: center;
  justify-self: center;
}

#petguard-page .petguard-sign-img {
  max-width: 132px;
  margin: 0 auto;
  border-radius: 18px;
  display: block;
}

#petguard-page .petguard-website,
#petguard-page .petguard-attributes,
#petguard-page .petguard-palette,
#petguard-page .petguard-typography,
#petguard-page .petguard-illustrations,
#petguard-page .petguard-wireframes,
#petguard-page .petguard-deliverables {
  width: calc(100% - 32px);
  max-width: 344px;
  margin-left: auto;
  margin-right: auto;
}

#petguard-page .petguard-website {
  padding-bottom: 38px;
}

#petguard-page .petguard-attributes,
#petguard-page .petguard-palette,
#petguard-page .petguard-typography,
#petguard-page .petguard-illustrations,
#petguard-page .petguard-wireframes {
  padding-bottom: 42px;
}

#petguard-page .petguard-deliverables {
  padding-bottom: 18px;
}

#petguard-page .petguard-attributes h2,
#petguard-page .petguard-palette h2,
#petguard-page .petguard-illustrations h2,
#petguard-page .petguard-wireframes h2,
#petguard-page .petguard-deliverables h2 {
  font-size: 28px;
  margin-bottom: 26px;
}

#petguard-page .attribute-list {
  gap: 8px 6px;
}

#petguard-page .attribute-list p {
  padding: 7px 11px;
  font-size: 8px;
  letter-spacing: 0.35px;
}

#petguard-page .petguard-colors {
  max-width: 344px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#petguard-page .bone-img {
  max-width: 64px;
  margin-bottom: 8px;
}

#petguard-page .petguard-color p {
  font-size: 9px;
}

#petguard-page .petguard-typography {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#petguard-page .petguard-font-card {
  min-height: 150px;
  padding: 16px 9px 12px;
  border-radius: 14px;
}

#petguard-page .petguard-font-label {
  margin-bottom: 10px;
  font-size: 11px;
}

#petguard-page .petguard-font-card h2 {
  font-size: 42px;
  margin-bottom: 8px;
}

#petguard-page .petguard-font-card h3 {
  font-size: 9px;
  margin-bottom: 4px;
}

#petguard-page .petguard-font-example {
  font-size: 8px;
  line-height: 1.45;
  letter-spacing: 0.3px;
}

#petguard-page .petguard-illustration-grid {
  max-width: 320px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}

#petguard-page .petguard-illustration-img {
  max-width: 156px;
}

#petguard-page .petguard-link-banner {
  padding-bottom: 42px;
}

#petguard-page .petguard-link-banner-content {
  left: 60%;
  top: 59%;
  transform: translate(-50%, -50%);
  width: min(100%, 220px);
}

#petguard-page .petguard-link-banner-content h2 {
  margin-bottom: 10px;
  font-size: 24px;
}

#petguard-page .petguard-link-banner-content a {
  min-height: 36px;
  padding: 0 12px;
  font-size: 7px;
  border: 2px solid #3F1D13;
  box-shadow: none;
}

#petguard-page .petguard-wireframes-grid {
  gap: 8px;
  align-items: start;
}

#petguard-page .petguard-wireframe-img {
  width: 140px;
  flex-basis: 140px;
}

#petguard-page .petguard-deliverable-tablet {
  width: 100%;
  max-width: 320px;
  justify-self: center;
}

#petguard-page .petguard-deliverable-phone {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  justify-self: center;
}

#petguard-page .petguard-deliverables-top {
  grid-template-columns: 1fr;
  max-width: 320px;
  gap: 18px;
  margin-bottom: 18px;
  justify-items: center;
}

#petguard-page .petguard-deliverable-full {
  width: 100%;
  max-width: 300px;
  justify-self: center;
}

#petguard-page .prev-next-nav {
  width: calc(100% - 32px);
  max-width: 220px;
  padding: 0 0 8px;
}

#petguard-page .prev-next-nav .pagination-link {
  gap: 8px;
}

#petguard-page .prev-next-nav .pagination-link p {
  font-size: 9px;
}

#petguard-page .prev-next-nav .pagination-arrow {
  width: 22px;
  height: 22px;
}

#petguard-page .petguard-footer {
  margin-top: 0;
}

#petguard-page .petguard-footer-logo-link {
  width: 54px;
  bottom: 20px;
}

#petguard-page .petguard-footer-year {
  bottom: 4px;
  font-size: 8px;
}

/* MOBILE REFINEMENTS */
.nav {
  width: calc(100% - 16px);
  min-height: 82px;
  margin: 8px auto 0;
  padding: 14px 18px;
  border-radius: 28px;
  align-items: center;
  overflow: visible;
}

.nav-logo-img {
  width: 64px;
}

.nav-toggle {
  width: 44px;
  height: 44px;
}

.nav-toggle span {
  width: 28px;
  height: 4px;
}

.nav-mobile-panel {
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  border-radius: 0 0 28px 28px;
  background-color: inherit;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  max-height: none;
  transform: translateY(-14px);
  transition: opacity 0.22s ease, transform 0.28s ease, padding 0.28s ease;
}

.nav.nav-open {
  padding-bottom: 14px;
}

.nav.nav-open .nav-mobile-panel {
  padding: 12px 18px 20px;
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateY(0);
}

.nav.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-mobile-primary,
.nav-mobile-secondary,
.nav-mobile-projects {
  align-items: center;
  text-align: center;
  gap: 10px;
}

.nav-mobile-primary a,
.nav-mobile-secondary a,
.nav-mobile-projects a {
  width: auto;
  padding: 0;
}

.nav-mobile-projects {
  padding: 0;
  border-left: 0;
}

.nav-mobile-projects a {
  font-size: 11px;
}

.hero {
  margin-top: 6px;
}

.selected-projects-heading p {
  color: #1E1E1E;
}

.category-btn {
  border: 2px solid #D9C8FF;
  background-color: transparent;
  color: #A684F3;
}

.active-btn {
  border-color: #A684F3;
  background-color: #A684F3;
  color: #FFFCF0;
}

.project-card {
  background-color: #B6D460;
}

.project-tags p {
  background-color: #FFF3CF;
  color: #74922A;
}

.coming-soon {
  background-position: center;
  background-size: calc(100% - 36px) calc(100% - 36px);
}

.coming-soon-inner {
  min-height: 330px;
  justify-content: center;
  transform: translateY(-4px);
}

.coming-soon-eyebrow {
  padding: 8px 18px 7px;
  font-size: 11px;
}

.coming-soon-inner h3 {
  font-size: 34px;
}

.contact-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 10px;
  align-items: start;
}

.contact-item {
  width: 100%;
}

.footer-logo {
  width: 52px;
  bottom: 14px;
}

.footer-logo-img {
  width: 52px;
}

.footer-text {
  bottom: 2px;
}

.prev-next-nav {
  width: calc(100% - 32px);
  max-width: 340px;
  margin: 0 auto;
  padding: 0 0 18px;
  gap: 18px;
  justify-content: space-between;
}

.pagination-link {
  gap: 8px;
}

.pagination-link p {
  display: block;
  font-size: 10px;
}

.pagination-arrow {
  width: 24px;
  height: 24px;
}

.project-overview,
.el-overview,
.eleanor-overview,
.petguard-overview,
.aqualume-overview {
  width: calc(100% - 32px);
  max-width: 368px;
  padding-top: 34px;
  padding-bottom: 52px;
  text-align: left;
  justify-items: stretch;
  align-items: start;
}

.project-overview,
.el-overview,
.petguard-overview {
  align-items: stretch;
}

.project-overview h2,
.el-overview h2,
.eleanor-overview h2,
.petguard-overview h2,
.aqualume-overview h2 {
  margin-bottom: 10px;
}

.overview-description,
.el-overview-text,
.eleanor-overview-text,
.petguard-overview-text,
.aqualume-overview-text {
  max-width: 100%;
}

.overview-grid,
.el-overview-grid,
.eleanor-overview-grid,
.petguard-overview-grid,
.aqualume-overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 100%;
  justify-items: start;
  gap: 16px 18px;
}

.eleanor-overview-visual,
.aqualume-overview-visual,
#petguard-page .petguard-overview-visual {
  justify-self: center;
}

#frosty-halo-page .project-overview {
  gap: 18px;
}

#frosty-halo-page .overview-description {
  max-width: 300px;
}

#frosty-halo-page .character-illustrations {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#frosty-halo-page .character-top-row,
#frosty-halo-page .character-bottom-row {
  display: contents;
}

#frosty-halo-page .character-illustrations h2 {
  order: 1;
}

#frosty-halo-page .main-character {
  order: 2;
  width: min(100%, 220px);
}

#frosty-halo-page .top-character-img {
  order: 3;
  width: min(100%, 150px);
}

#frosty-halo-page .side-characters {
  order: 4;
  width: 100%;
  max-width: 320px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#el-origen-page .el-overview {
  padding: 34px 0 46px;
  gap: 16px;
}

#el-origen-page .el-overview-video {
  max-width: 100%;
}

#el-origen-page .prev-next-nav {
  max-width: 340px;
}

#eleanor-page .eleanor-overview-left,
#petguard-page .petguard-overview-left,
#aqualume-page .aqualume-overview-left {
  max-width: 100%;
  text-align: left;
}

#eleanor-page .eleanor-overview-img {
  max-width: 220px;
  margin: 0 auto;
}

#eleanor-page .eleanor-bottom-section {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

#eleanor-page .eleanor-bottom-title {
  grid-column: 1 / -1;
  text-align: center;
}

#eleanor-page .eleanor-typography-section {
  width: 100%;
  gap: 12px;
}

#eleanor-page .eleanor-font-card {
  width: 100%;
  max-width: none;
  padding: 16px 10px 12px;
  border-radius: 16px;
}

#eleanor-page .eleanor-font-label {
  margin-bottom: 8px;
  font-size: 11px;
}

#eleanor-page .eleanor-font-card h2 {
  font-size: 34px;
  margin-bottom: 6px;
}

#eleanor-page .eleanor-font-name {
  margin-bottom: 6px;
  font-size: 10px;
}

#eleanor-page .eleanor-font-example {
  font-size: 8px;
  letter-spacing: 0.35px;
}

#eleanor-page .eleanor-poster-section {
  width: 100%;
}

#eleanor-page .eleanor-poster-img {
  max-width: 100%;
}

#petguard-page .petguard-overview {
  gap: 16px;
}

#petguard-page .petguard-overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 100%;
}

#petguard-page .petguard-sign-img {
  max-width: 200px;
}

#petguard-page .petguard-colors {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#petguard-page .prev-next-nav {
  max-width: 340px;
}

#aqualume-page .aqualume-overview {
  gap: 16px;
}

#aqualume-page .aqualume-overview-img {
  max-width: 220px;
  margin: 0 auto;
}

#aqualume-page .aqualume-colors {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#aqualume-page .aqualume-typography {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

#aqualume-page .aqualume-font-card {
  width: 100%;
  max-width: none;
  min-height: 198px;
  padding: 18px 14px 16px;
  border-radius: 18px;
}

#aqualume-page .aqualume-font-label {
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.55px;
}

#aqualume-page .aqualume-font-card h2 {
  font-size: 48px;
  margin-bottom: 8px;
}

#aqualume-page .aqualume-font-card h3 {
  font-size: 12px;
  margin-bottom: 8px;
}

#aqualume-page .aqualume-font-example {
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.35px;
}

#aqualume-page .aqualume-icons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 320px;
  align-items: end;
}

#aqualume-page .aqualume-icon-img {
  width: 100%;
  max-width: 104px;
}

#frosty-halo-page .prev-next-nav,
#el-origen-page .prev-next-nav,
#eleanor-page .prev-next-nav,
#aqualume-page .prev-next-nav {
  max-width: 340px;
  padding: 0 0 18px;
}

#frosty-halo-page .frosty-footer-logo-link,
#el-origen-page .el-footer-logo-link,
#eleanor-page .eleanor-footer-logo-link,
#aqualume-page .aqualume-footer-logo-link {
  width: 50px;
  bottom: 14px;
}

#frosty-halo-page .frosty-footer-year,
#el-origen-page .el-footer-year,
#eleanor-page .eleanor-footer-year,
#aqualume-page .aqualume-footer-year {
  bottom: 2px;
}

#petguard-page .petguard-footer-logo-link {
  width: 50px;
  bottom: 14px;
}

#petguard-page .petguard-footer-year {
  bottom: 2px;
}

/* MOBILE FINAL REFINEMENTS */
.hero {
  margin-top: 0;
}

.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 26px;
  z-index: 2;
}

.hero h1 {
  font-size: 56px;
  letter-spacing: 1.1px;
}

.hero-banner {
  margin-top: -4px;
}

.about-image {
  max-width: 344px;
  transform: translateX(-10px);
}

.coming-soon-inner {
  min-height: 330px;
  transform: translateY(-10px);
}

.coming-soon-eyebrow {
  font-size: 12px;
}

.coming-soon-inner h3 {
  font-size: 38px;
}

.prev-next-nav,
#petguard-page .prev-next-nav,
#frosty-halo-page .prev-next-nav,
#el-origen-page .prev-next-nav,
#eleanor-page .prev-next-nav,
#aqualume-page .prev-next-nav {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  padding: 0 0 16px;
  justify-content: center;
  gap: 54px;
}

#petguard-page .petguard-footer {
  margin-top: -8px;
  padding: 0;
  height: auto;
  border-radius: 0;
}

#petguard-page .petguard-footer::before,
#petguard-page .petguard-footer::after {
  display: none;
}

#petguard-page .petguard-footer-logo-link,
#frosty-halo-page .frosty-footer-logo-link,
#el-origen-page .el-footer-logo-link,
#eleanor-page .eleanor-footer-logo-link,
#aqualume-page .aqualume-footer-logo-link {
  width: 52px;
  bottom: 14px;
}

#petguard-page .petguard-footer-year,
#frosty-halo-page .frosty-footer-year,
#el-origen-page .el-footer-year,
#eleanor-page .eleanor-footer-year,
#aqualume-page .aqualume-footer-year {
  bottom: 2px;
}

#frosty-halo-page .project-overview {
  gap: 14px;
}

#frosty-halo-page .overview-grid {
  gap: 10px 10px;
}

#frosty-halo-page .overview-item p {
  max-width: 108px;
  font-size: 12px;
}

#frosty-halo-page .character-illustrations {
  width: calc(100% - 28px);
  max-width: 356px;
}

#frosty-halo-page .character-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px;
  align-items: center;
  gap: 10px;
}

#frosty-halo-page .character-bottom-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

#frosty-halo-page .main-character {
  width: 116px;
}

#frosty-halo-page .top-character-img {
  width: 116px;
}

#frosty-halo-page .side-characters {
  max-width: none;
  gap: 10px;
}

#el-origen-page .el-logo-card {
  margin-top: 0;
}

#eleanor-page .eleanor-overview {
  gap: 22px;
}

#petguard-page .petguard-overview,
#eleanor-page .eleanor-overview,
#aqualume-page .aqualume-overview {
  text-align: left;
}

#petguard-page .petguard-overview-visual,
#eleanor-page .eleanor-overview-visual,
#aqualume-page .aqualume-overview-visual {
  justify-self: end;
}

#petguard-page .petguard-sign-img,
#aqualume-page .aqualume-overview-img {
  max-width: 220px;
  margin-left: auto;
}

#eleanor-page .eleanor-bottom-section {
  grid-template-columns: 50% 50%;
  gap: 10px;
}

#eleanor-page .eleanor-poster-section {
  align-self: stretch;
}

#eleanor-page .eleanor-poster-img {
  width: 110%;
  max-width: 110%;
  transform: translateX(-10px);
}

/* MOBILE POLISH */
.hero {
  position: relative;
}

.hero-picture {
  position: relative;
  z-index: 1;
}

.hero-content {
  display: flex;
  z-index: 3;
  pointer-events: none;
}

.hero h1 {
  font-size: 60px;
  letter-spacing: 1.2px;
}

.project-card,
.coming-soon {
  padding: 16px 16px 18px;
}

.prev-next-nav,
#petguard-page .prev-next-nav,
#frosty-halo-page .prev-next-nav,
#el-origen-page .prev-next-nav,
#eleanor-page .prev-next-nav,
#aqualume-page .prev-next-nav {
  gap: 64px;
}

#frosty-halo-page .project-overview {
  width: calc(100% - 28px);
  max-width: 344px;
  gap: 12px;
}

#frosty-halo-page .project-overview-left {
  max-width: 100%;
}

#frosty-halo-page .overview-grid {
  max-width: 220px;
  gap: 10px 8px;
}

#frosty-halo-page .overview-item p {
  max-width: 102px;
  font-size: 11px;
}

#frosty-halo-page .tools-item p {
  max-width: 118px;
}

#frosty-halo-page .character-illustrations h2 {
  text-align: left;
}

#frosty-halo-page .character-top-row {
  grid-template-columns: minmax(0, 1fr) 124px;
  gap: 8px;
}

#frosty-halo-page .character-bottom-row {
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 8px;
}

#frosty-halo-page .main-character,
#frosty-halo-page .top-character-img {
  width: 124px;
}

#frosty-halo-page .side-characters {
  gap: 8px;
}

#eleanor-page .eleanor-overview {
  width: calc(100% - 28px);
  max-width: 348px;
  gap: 30px;
}

#eleanor-page .eleanor-overview-left {
  max-width: 150px;
}

#eleanor-page .eleanor-overview-visual {
  max-width: 170px;
}

#eleanor-page .eleanor-overview-img {
  max-width: 170px;
  margin-left: auto;
}

#eleanor-page .eleanor-bottom-section {
  grid-template-columns: 46% 54%;
  gap: 12px;
}

#eleanor-page .eleanor-poster-img {
  width: 100%;
  max-width: 240px;
  margin-left: auto;
  transform: none;
}

#aqualume-page .aqualume-overview {
  width: calc(100% - 28px);
  max-width: 348px;
  gap: 30px;
}

#aqualume-page .aqualume-overview-left {
  max-width: 150px;
}

#aqualume-page .aqualume-overview-visual {
  max-width: 170px;
}

#aqualume-page .aqualume-overview-img {
  max-width: 170px;
  margin-left: auto;
}

/* MOBILE FINAL TUNE */
.hero-content {
  padding-top: 0;
  transform: translateY(-8px);
}

.hero h1 {
  font-size: 72px;
}

.project-card,
.coming-soon {
  padding: 18px 18px 20px;
}

.project-img {
  width: calc(100% + 12px);
  max-width: none;
  margin-left: -6px;
}

.prev-next-nav,
#petguard-page .prev-next-nav,
#frosty-halo-page .prev-next-nav,
#el-origen-page .prev-next-nav,
#eleanor-page .prev-next-nav,
#aqualume-page .prev-next-nav {
  width: calc(100% - 20px);
  max-width: 372px;
  justify-content: space-between;
  gap: 0;
}

/* LATE MOBILE OVERRIDE LAYER */

/* NAVIGATION */
.nav {
  width: 100%;
  margin: 0;
  padding: 14px 18px;
  border-radius: 0;
  overflow: visible;
}

.nav::before {
  display: none;
}

.nav-logo,
.nav-toggle {
  position: relative;
  z-index: 52;
}

.nav.nav-open .nav-logo-img {
  filter: brightness(0) saturate(100%) invert(93%) sepia(20%) saturate(400%) hue-rotate(317deg) brightness(104%) contrast(96%);
}

.nav-toggle {
  gap: 5px;
}

.nav-toggle span {
  width: 30px;
  height: 3px;
  border-radius: 999px;
  transform-origin: center;
  background-color: #74922A;
}

#frosty-halo-page .nav-toggle span,
#el-origen-page .nav-toggle span,
#eleanor-page .nav-toggle span {
  background-color: #FFF7DC;
}

#petguard-page .nav-toggle span {
  background-color: #FDE4D6;
}

#aqualume-page .nav-toggle span {
  background-color: #F2E8D5;
}

.nav.nav-open {
  padding-bottom: 14px;
}

.nav.nav-open .nav-toggle span {
  background-color: #fff3cf;
}

.nav.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-mobile-panel {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 112px 24px 44px;
  background-color: #74922A;
  border-radius: 0;
  box-shadow: none;
  max-height: none;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform 0.34s ease, opacity 0.24s ease, visibility 0.24s ease;
  pointer-events: none;
  z-index: 50;
}

.nav.nav-open .nav-mobile-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.nav-mobile-primary,
.nav-mobile-secondary,
.nav-mobile-projects {
  width: min(100%, 320px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: 0;
  border: 0;
}

.nav-mobile-primary::before,
.nav-mobile-projects::before,
.nav-mobile-secondary::before {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255, 243, 207, 0.7);
}

.nav-mobile-primary::before {
  content: "Navigate";
}

.nav-mobile-projects::before {
  content: "Projects";
}

.nav-mobile-secondary::before {
  display: none;
}

.nav-mobile-primary a,
.nav-mobile-secondary a,
.nav-mobile-projects a {
  width: 100%;
  display: block;
  padding: 0;
  color: #fff3cf;
}

.nav-mobile-primary a,
.nav-mobile-secondary a {
  font-family: 'SN Pro', sans-serif;
  font-weight: 800;
  width: min(100%, 208px);
  margin: 0 auto;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.45px;
}

.nav-mobile-primary {
  order: 1;
  gap: 10px;
  margin-bottom: -12px;
}

.nav-mobile-secondary {
  order: 2;
  gap: 0;
  margin-top: 0;
}

.nav-work-link {
  margin-bottom: 0;
}

.nav-mobile-projects {
  order: 3;
  gap: 12px;
  padding: 20px 18px;
  background-color: #6c8725;
  border: 1px solid #fff3cf;
  border-radius: 24px;
  backdrop-filter: none;
}

.nav-mobile-projects a {
  font-family: 'SN Pro', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.55px;
  opacity: 0.94;
}

.project-hero,
.el-origen-hero,
.eleanor-hero,
.petguard-hero,
.aqualume-hero {
  padding: 26px 14px 0;
  text-align: center;
}

.project-hero-img,
.el-origen-hero-img,
.eleanor-hero-img,
.petguard-hero-img,
.aqualume-hero-img,
.petguard-website-img,
.aqualume-deliverable-large,
.aqualume-deliverable-small,
.eleanor-showcase-img,
.eleanor-ticket-img,
.eleanor-theater-img,
.el-overview-video,
.el-logo-img,
.el-poster-img,
.el-stickers-img,
.el-small-deliverable,
.el-large-deliverable,
.el-bottle-mockup {
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

.project-overview,
.el-overview,
.eleanor-overview,
.petguard-overview,
.aqualume-overview {
  width: 92%;
  max-width: 340px;
  margin: 0 auto;
  padding: 36px 0 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  text-align: center;
  transform: none;
}

.project-overview-left,
.el-overview-content,
.eleanor-overview-left,
.petguard-overview-left,
.aqualume-overview-left,
.el-logo-box,
.el-palette-box {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
  justify-self: center;
}

.overview-description,
.el-overview-text,
.eleanor-overview-text,
.petguard-overview-text,
.aqualume-overview-text {
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  font-size: 12px;
  line-height: 1.5;
}

.overview-grid,
.el-overview-grid,
.eleanor-overview-grid,
.petguard-overview-grid,
.aqualume-overview-grid {
  width: 100%;
  max-width: 280px;
  margin: 12px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 14px;
  justify-items: center;
}

.overview-item p,
.el-overview .overview-item p,
.eleanor-overview .overview-item p,
.petguard-overview .overview-item p,
.aqualume-overview .overview-item p {
  font-size: 12px;
}

.packaging-designs,
.typography-section,
.character-illustrations,
.deliverables-section,
.el-brand-section,
.el-typography-section,
.el-character-section,
.el-deliverables-section,
.el-final-deliverables,
.eleanor-showcase,
.eleanor-palette-section,
.eleanor-bottom-section,
.eleanor-deliverables-section,
.petguard-website,
.petguard-attributes,
.petguard-palette,
.petguard-typography,
.petguard-illustrations,
.petguard-wireframes,
.petguard-deliverables,
.aqualume-logo-section,
.aqualume-palette,
.aqualume-typography,
.aqualume-icons-section,
.aqualume-deliverables-section {
  width: 92%;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.packaging-row,
.color-palette,
.typography-section,
.el-typography-section,
.petguard-typography,
.aqualume-typography,
.eleanor-bottom-section,
.deliverables-grid,
.el-deliverables-grid,
.aqualume-deliverables-grid,
.el-brand-section,
.el-character-grid,
.petguard-illustration-grid,
.petguard-deliverables-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  justify-items: center;
}

.font-card,
.el-font-card,
.petguard-font-card,
.aqualume-font-card,
.eleanor-font-card {
  width: 100%;
  max-width: 320px;
}

.aqualume-overview-visual {
  width: 100%;
  max-width: 320px;
  min-height: 0;
  padding: 0;
  background: transparent;
  justify-self: center;
}

.aqualume-overview-img,
.eleanor-overview-img,
.petguard-sign-img {
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

#el-origen-page .el-colors {
  width: 100%;
  max-width: 286px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 86px);
  justify-content: center;
  gap: 10px;
}

#el-origen-page .el-color {
  width: 86px;
  max-width: 86px;
  min-height: 86px;
  border-radius: 16px;
  font-size: 11px;
  line-height: 1.2;
  padding: 8px;
}

#aqualume-page .aqualume-colors,
#petguard-page .petguard-colors {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  justify-items: center;
}

#aqualume-page .aqualume-color-item,
#petguard-page .petguard-color {
  width: 100%;
  max-width: 68px;
}

#aqualume-page .aqualume-color {
  max-width: 68px;
}

#petguard-page .bone-img {
  max-width: 60px;
}

/* SHARED FOOTERS */
.project-footer {
  margin-top: 0;
  position: relative;
}

.project-footer-img {
  width: 100%;
  display: block;
}

#petguard-page .petguard-footer,
#frosty-halo-page .frosty-footer,
#el-origen-page .el-footer,
#eleanor-page .eleanor-footer,
#aqualume-page .aqualume-footer {
  margin-top: 0;
  padding: 0;
  height: auto;
  border-radius: 0;
}

#petguard-page .petguard-footer::before,
#petguard-page .petguard-footer::after {
  display: none;
}

#petguard-page .petguard-footer-logo-link,
#frosty-halo-page .frosty-footer-logo-link,
#el-origen-page .el-footer-logo-link,
#eleanor-page .eleanor-footer-logo-link,
#aqualume-page .aqualume-footer-logo-link {
  width: 42px;
  bottom: 10px;
}

#petguard-page .petguard-footer-logo-img,
#frosty-halo-page .frosty-footer-logo-img,
#el-origen-page .el-footer-logo-img,
#eleanor-page .eleanor-footer-logo-img,
#aqualume-page .aqualume-footer-logo-img {
  width: 42px;
}

#petguard-page .petguard-footer-year,
#frosty-halo-page .frosty-footer-year,
#el-origen-page .el-footer-year,
#eleanor-page .eleanor-footer-year,
#aqualume-page .aqualume-footer-year {
  bottom: 1px;
  font-size: 8px;
  letter-spacing: 0.3px;
}

#eleanor-page .eleanor-overview {
  max-width: 352px;
  grid-template-columns: 132px 176px;
  justify-content: space-between;
  gap: 34px;
}

#eleanor-page .eleanor-overview-left {
  max-width: 132px;
}

#eleanor-page .eleanor-overview-visual {
  max-width: 176px;
}

#eleanor-page .eleanor-overview-img {
  max-width: 176px;
}

#aqualume-page .aqualume-overview {
  max-width: 352px;
  grid-template-columns: 132px 176px;
  justify-content: space-between;
  gap: 34px;
}

#aqualume-page .aqualume-overview-left {
  max-width: 132px;
}

#aqualume-page .aqualume-overview-visual {
  max-width: 176px;
}

#aqualume-page .aqualume-overview-img {
  max-width: 176px;
}

/* SHARED TYPOGRAPHY + PETGUARD CLEANUP */
.typography-section,
.el-typography-section,
.petguard-typography,
.aqualume-typography,
.eleanor-typography-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.typography-section > :last-child:nth-child(odd),
.el-typography-section > :last-child:nth-child(odd),
.petguard-typography > :last-child:nth-child(odd),
.aqualume-typography > :last-child:nth-child(odd),
.eleanor-typography-section > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: min(100%, 210px);
  justify-self: center;
}

.font-card,
.el-font-card,
.petguard-font-card,
.aqualume-font-card,
.eleanor-font-card {
  width: 100%;
  max-width: none;
  min-height: 210px;
  padding: 18px 14px 16px;
  border-radius: 18px;
}

#petguard-page .petguard-font-card,
#aqualume-page .aqualume-font-card {
  min-height: 198px;
}

#petguard-page .petguard-typography {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  justify-items: center;
}

#petguard-page .petguard-typography > :last-child:nth-child(odd) {
  grid-column: auto;
  width: 214px;
  justify-self: center;
}

#petguard-page .petguard-font-card {
  width: 214px;
  max-width: 214px;
  min-height: 174px;
  padding: 18px 14px 16px;
  border-radius: 22px;
}

#petguard-page .petguard-font-label {
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.55px;
}

#petguard-page .petguard-font-card h2 {
  font-size: 48px;
  margin-bottom: 8px;
}

#petguard-page .petguard-font-card h3 {
  font-size: 12px;
  margin-bottom: 8px;
}

#petguard-page .petguard-font-example {
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.4px;
}

#petguard-page .attribute-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  justify-content: center;
  gap: 10px 8px;
}

#petguard-page .attribute-list p {
  min-width: 96px;
  padding: 9px 10px;
  font-size: 9px;
  text-align: center;
}

#petguard-page .petguard-deliverables-top {
  width: 100%;
  max-width: 320px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  justify-items: stretch;
}

#petguard-page .petguard-deliverable-phone,
#petguard-page .petguard-deliverable-tablet,
#petguard-page .petguard-deliverable-full {
  width: 100%;
  max-width: none;
  margin: 0;
  justify-self: stretch;
}

#petguard-page .petguard-deliverable-phone {
  grid-column: 1;
  grid-row: 1;
}

#petguard-page .petguard-deliverable-tablet {
  grid-column: 2;
  grid-row: 1;
}

#petguard-page .petguard-deliverable-full {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* HOMEPAGE + GLOBAL FOOTER POLISH */
.hero {
  margin-top: -40px;
}

.about-image {
  max-width: 292px;
  margin: 0 auto;
  transform: none;
}

.about-image img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.project-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 304px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  gap: 10px;
}

.selected-projects-heading h2 {
  max-width: 8ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.category-btn {
  width: 100%;
  max-width: none;
  padding: 0 10px;
  font-size: 9px;
  letter-spacing: 0.35px;
  white-space: nowrap;
}

.coming-soon-inner {
  min-height: 330px;
  justify-content: center;
  transform: translateY(48px);
}

.coming-soon-eyebrow {
  transform: translateY(0);
}

.contact-links {
  width: min(100%, 292px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  gap: 16px 8px;
  transform: translateX(-6px);
}

.contact-item {
  width: 100%;
  max-width: 92px;
}

.footer-logo {
  width: 34px;
  bottom: 18px;
}

.footer-logo-img {
  width: 34px;
}

.footer-text {
  bottom: 0;
  font-size: 6px;
  letter-spacing: 0.2px;
}

#petguard-page .petguard-footer-logo-link,
#frosty-halo-page .frosty-footer-logo-link,
#el-origen-page .el-footer-logo-link,
#eleanor-page .eleanor-footer-logo-link,
#aqualume-page .aqualume-footer-logo-link {
  width: 30px;
  bottom: 16px;
}

#petguard-page .petguard-footer-logo-img,
#frosty-halo-page .frosty-footer-logo-img,
#el-origen-page .el-footer-logo-img,
#eleanor-page .eleanor-footer-logo-img,
#aqualume-page .aqualume-footer-logo-img {
  width: 30px;
}

#petguard-page .petguard-footer-year,
#frosty-halo-page .frosty-footer-year,
#el-origen-page .el-footer-year,
#eleanor-page .eleanor-footer-year,
#aqualume-page .aqualume-footer-year {
  bottom: 5px;
  font-size: 5px;
  letter-spacing: 0.15px;
}

/* FROSTY HALO REFINEMENTS */
#frosty-halo-page .project-hero {
  padding-top: 42px;
}

#frosty-halo-page .project-hero-heading {
  position: relative;
  z-index: 2;
  padding-top: 20px;
  margin-bottom: 28px;
}

#frosty-halo-page .frosty-hero-decor {
  top: 44px;
}

#frosty-halo-page .project-overview {
  width: calc(100% - 32px);
  max-width: 340px;
  padding: 36px 0 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

#frosty-halo-page .project-overview-left {
  width: 100%;
  max-width: 320px;
  text-align: center;
}

#frosty-halo-page .overview-description {
  max-width: 310px;
  margin: 0 auto;
}

#frosty-halo-page .overview-grid {
  width: 100%;
  max-width: 280px;
  margin: 6px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  justify-items: center;
}

#frosty-halo-page .overview-item,
#frosty-halo-page .tools-item {
  width: 100%;
  text-align: center;
}

#frosty-halo-page .overview-item p,
#frosty-halo-page .tools-item p {
  max-width: none;
  font-size: 11px;
  line-height: 1.35;
}

#frosty-halo-page .tools-item p {
  white-space: normal;
}

#frosty-halo-page .tools-item .tools-line {
  display: block;
}

#frosty-halo-page .packaging-row {
  gap: 18px;
  margin-bottom: 36px;
}

#frosty-halo-page .color-palette {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
}

#frosty-halo-page .color-item {
  width: 82px;
}

#frosty-halo-page .color-circle {
  width: 66px;
  height: 66px;
  margin-bottom: 8px;
}

#frosty-halo-page .color-item p {
  font-size: 12px;
}

#frosty-halo-page .typography-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  justify-items: center;
}

#frosty-halo-page .typography-section > :last-child:nth-child(odd) {
  width: 196px;
  justify-self: center;
}

#frosty-halo-page .font-card {
  width: 196px;
  max-width: 196px;
  min-height: 168px;
  padding: 16px 12px 14px;
  border-radius: 24px;
}

#frosty-halo-page .font-label {
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.55px;
}

#frosty-halo-page .font-card h2 {
  font-size: 48px;
  margin-bottom: 8px;
}

#frosty-halo-page .font-card h3 {
  font-size: 13px;
  margin-bottom: 8px;
}

#frosty-halo-page .font-example {
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.35px;
}

#frosty-halo-page .character-illustrations {
  width: calc(100% - 32px);
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

#frosty-halo-page .character-top-row,
#frosty-halo-page .character-bottom-row {
  display: contents;
}

#frosty-halo-page .character-illustrations h2 {
  order: 1;
  margin: 0 0 4px;
  text-align: center;
}

#frosty-halo-page .main-character {
  order: 2;
  width: 220px;
  height: auto;
  margin-top: 0;
}

#frosty-halo-page .character-img {
  display: block;
  width: 100%;
  height: auto;
}

#frosty-halo-page .top-character-img {
  order: 3;
  width: 220px;
}

#frosty-halo-page .side-characters {
  order: 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 220px;
}

#frosty-halo-page .side-character-img {
  width: 220px;
}

#frosty-halo-page .prev-next-nav {
  width: calc(100% - 32px);
  max-width: 220px;
  padding: 0 0 8px;
}

#frosty-halo-page .prev-next-nav .pagination-link {
  gap: 8px;
}

#frosty-halo-page .prev-next-nav .pagination-link p {
  font-size: 9px;
}

#frosty-halo-page .prev-next-nav .pagination-arrow {
  width: 22px;
  height: 22px;
}

.hero-banner {
  min-height: 60px;
  padding: 10px 12px 0;
}

.hero-banner-text {
  font-size: 14px;
  letter-spacing: 0.9px;
}

.hero-banner-track {
  min-height: 60px;
}

/* EL ORIGEN / ELEANOR / AQUALUME SHARED PROJECT REFINEMENTS */
#el-origen-page .el-overview,
#eleanor-page .eleanor-overview,
#aqualume-page .aqualume-overview {
  text-align: center;
  align-items: center;
}

#el-origen-page .el-overview-content,
#el-origen-page .el-logo-box,
#el-origen-page .el-palette-box,
#eleanor-page .eleanor-overview-left,
#aqualume-page .aqualume-overview-left {
  max-width: 320px;
  margin: 0 auto;
  text-align: center;
}

#eleanor-page .eleanor-overview-visual,
#aqualume-page .aqualume-overview-visual {
  justify-self: center;
}

#eleanor-page .eleanor-overview-img,
#aqualume-page .aqualume-overview-img {
  margin-left: auto;
  margin-right: auto;
}

#el-origen-page .el-brand-section,
#el-origen-page .el-typography-section,
#el-origen-page .el-character-section,
#el-origen-page .el-deliverables-section,
#el-origen-page .el-final-deliverables,
#aqualume-page .aqualume-logo-section,
#aqualume-page .aqualume-palette,
#aqualume-page .aqualume-typography,
#aqualume-page .aqualume-icons-section,
#aqualume-page .aqualume-deliverables-section,
#eleanor-page .eleanor-bottom-section,
#eleanor-page .eleanor-typography-section {
  text-align: center;
  justify-items: center;
}

#el-origen-page .el-font-card,
#aqualume-page .aqualume-font-card,
#eleanor-page .eleanor-font-card {
  text-align: center;
  align-items: center;
}

#el-origen-page .el-font-label,
#aqualume-page .aqualume-font-label,
#eleanor-page .eleanor-font-label {
  margin-bottom: 12px;
  font-size: 13px;
  letter-spacing: 0.55px;
}

#el-origen-page .el-font-card h2,
#aqualume-page .aqualume-font-card h2,
#eleanor-page .eleanor-font-card h2 {
  margin-bottom: 8px;
  font-size: 48px;
}

#el-origen-page .el-font-name,
#aqualume-page .aqualume-font-card h3,
#eleanor-page .eleanor-font-name {
  margin-bottom: 8px;
  font-size: 12px;
}

#el-origen-page .el-font-alphabet,
#el-origen-page .canvas-font.el-font-alphabet,
#aqualume-page .aqualume-font-example,
#eleanor-page .eleanor-font-example {
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: 0.35px;
}

#aqualume-page .aqualume-icons {
  width: 100%;
  max-width: 320px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  justify-items: center;
  align-items: end;
}

#aqualume-page .aqualume-icon-img {
  width: 100%;
  max-width: 104px;
}
/* ELEANOR REFINEMENTS */
#eleanor-page .eleanor-bottom-section {
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}

#eleanor-page .eleanor-bottom-title {
  grid-column: auto;
}

#eleanor-page .eleanor-typography-section,
#eleanor-page .eleanor-poster-section {
  width: 100%;
  justify-self: center;
}

#eleanor-page .eleanor-poster-img {
  width: 100%;
  max-width: 240px;
  margin: 0 auto;
  transform: none;
}

/* FROSTY HALO / EL ORIGEN / PETGUARD / AQUALUME TYPOGRAPHY STACK */
#frosty-halo-page .typography-section,
#el-origen-page .el-typography-section,
#petguard-page .petguard-typography,
#aqualume-page .aqualume-typography {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  justify-items: center;
  align-items: stretch;
}

#frosty-halo-page .typography-section > :last-child:nth-child(odd),
#el-origen-page .el-typography-section > :last-child:nth-child(odd),
#petguard-page .petguard-typography > :last-child:nth-child(odd),
#aqualume-page .aqualume-typography > :last-child:nth-child(odd) {
  grid-column: auto;
  width: min(100%, 260px);
  justify-self: center;
}

#frosty-halo-page .font-card,
#el-origen-page .el-font-card,
#petguard-page .petguard-font-card,
#aqualume-page .aqualume-font-card {
  width: min(100%, 260px);
  max-width: 260px;
  min-height: 220px;
  padding: 22px 18px 20px;
  border-radius: 24px;
}

#frosty-halo-page .font-label,
#el-origen-page .el-font-label,
#petguard-page .petguard-font-label,
#aqualume-page .aqualume-font-label {
  margin-bottom: 12px;
  font-size: 15px;
  letter-spacing: 0.55px;
}

#frosty-halo-page .font-card h2,
#el-origen-page .el-font-card h2,
#petguard-page .petguard-font-card h2,
#aqualume-page .aqualume-font-card h2 {
  font-size: 56px;
  margin-bottom: 10px;
}

#frosty-halo-page .font-card h3,
#petguard-page .petguard-font-card h3,
#aqualume-page .aqualume-font-card h3,
#el-origen-page .el-font-name {
  font-size: 14px;
  margin-bottom: 8px;
}

#frosty-halo-page .font-example,
#petguard-page .petguard-font-example,
#aqualume-page .aqualume-font-example,
#el-origen-page .el-font-alphabet,
#el-origen-page .canvas-font.el-font-alphabet {
  font-size: 10px;
  line-height: 1.55;
  letter-spacing: 0.4px;
}

/* AQUALUME PALETTE REFINEMENT */
#aqualume-page .aqualume-colors {
  width: 100%;
  max-width: 320px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
  justify-items: center;
}

#aqualume-page .aqualume-color-item {
  max-width: 140px;
}

#aqualume-page .aqualume-color {
  max-width: 132px;
  border-radius: 24px;
  margin-bottom: 10px;
}

#aqualume-page .aqualume-color-item p {
  font-size: 12px;
}