/* Homepage genre categories, matching the cream, green and gold reference. */
#home-genres { position: relative; isolation: isolate; overflow: hidden; padding: 48px 0 65px; background: radial-gradient(ellipse at 50% 30%,#fffdfa99,transparent 75%),url('../images/services/paper-texture.svg'),#faf7ef; }
#home-genres::before, #home-genres::after { content: ''; position: absolute; z-index: -1; pointer-events: none; background: url('../images/services/botanical.svg') center/contain no-repeat; }
#home-genres::before { width: 245px; height: 470px; left: -85px; top: 15px; opacity: .66; transform: rotate(8deg); }
#home-genres::after { width: 230px; height: 420px; right: -45px; top: -20px; opacity: .32; transform: scaleX(-1) rotate(-17deg); filter: sepia(1); }
.hp-categories-sweep { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; fill: none; stroke: #c79b53; stroke-width: 1.5; opacity: .65; pointer-events: none; }
#home-genres > .hp-container { position: relative; width: min(1440px,calc(100% - 120px)); }
.hp-categories-heading { text-align: center; margin-bottom: 32px; }
#home-genres .hp-categories-kicker { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 0 24px; color: #173c30; text-align: center; font: 400 18px/1.3 Georgia,serif; letter-spacing: .1em; }
.hp-categories-kicker::before, .hp-categories-kicker::after { content: ''; width: 120px; height: 1px; background: linear-gradient(90deg,transparent,#c49a52); }
.hp-categories-kicker::after { transform: rotate(180deg); }
.hp-categories-kicker > span { position: relative; padding: 12px 32px; border: 1px solid #d3a455; border-radius: 99px; background: linear-gradient(145deg,#fffdf7,#f1ead9); box-shadow: inset 0 0 0 3px #fffaf1,0 7px 14px #94703814; }
.hp-categories-kicker > span::before, .hp-categories-kicker > span::after { content: '✦'; position: absolute; top: 50%; transform: translateY(-50%); color: #c6a05e; font: 24px/1 Georgia,serif; }
.hp-categories-kicker > span::before { left: -32px; }
.hp-categories-kicker > span::after { right: -32px; }
#home-genres h2 { color: #102f25; font: 400 clamp(38px,4.5vw,74px)/1.13 'PP Editorial New',Georgia,serif; text-align: center; letter-spacing: -.035em; margin: 0; }
.hp-categories-ornament { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 18px 0 17px; }
.hp-categories-ornament span { width: 128px; height: 1px; background: linear-gradient(90deg,transparent,#b78b43); }
.hp-categories-ornament span:last-child { transform: rotate(180deg); }
.hp-categories-ornament svg { width: 22px; height: 22px; fill: #caa15d; }
#home-genres .hp-categories-intro { max-width: 1040px; margin: 0 auto; color: #555650; text-align: center; font: 400 21px/1.55 Georgia,serif; }
#home-genres .hp-categories-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 21px; list-style: none; padding: 0; margin: 0; }
.hp-categories-grid li { min-width: 0; margin: 0; padding: 0; }
#home-genres .hp-categories-grid a { display: flex; align-items: center; gap: 22px; height: 100%; min-height: 88px; padding: 13px 24px 13px 17px; border: 1px solid #d8b478; border-radius: 20px; background: linear-gradient(140deg,#fffdf9ed,#fcfaf5e6); box-shadow: inset 0 0 0 2px #fffaf1,0 10px 18px #9c773c19; color: #153b2d; text-decoration: none; font: 400 20px/1.2 'PP Editorial New',Georgia,serif; transition: transform .2s,box-shadow .2s,border-color .2s; }
.hp-category-icon { display: grid; place-items: center; flex: 0 0 59px; height: 59px; border: 1px solid #d0a65f; border-radius: 50%; background: linear-gradient(145deg,#fffdf2,#ede8d6); box-shadow: inset 0 0 0 2px #fffaf1,0 4px 8px #a17d3e0d; }
.hp-category-icon .fa { color: #2c5340; font-size: 29px; }
.hp-category-arrow { flex: 0 0 9px; height: 9px; margin-left: auto; border-top: 1.5px solid #c49237; border-right: 1.5px solid #c49237; transform: rotate(45deg); }
#home-genres .hp-categories-grid a:hover { transform: translateY(-3px); border-color: #b58c48; box-shadow: 0 12px 23px #9c773c29; }
#home-genres .hp-categories-grid a:focus-visible { outline: 3px solid #365642; outline-offset: 4px; }
@media (max-width: 1400px) {
  #home-genres > .hp-container { width: calc(100% - 80px); }
  #home-genres .hp-categories-grid { gap: 18px; }
  #home-genres .hp-categories-grid a { gap: 13px; padding-inline: 13px 18px; font-size: 18px; }
  .hp-category-icon { flex-basis: 49px; height: 49px; }
  .hp-category-icon .fa { font-size: 25px; }
}
@media (max-width: 1200px) {
  #home-genres > .hp-container { width: calc(100% - 64px); max-width: 850px; }
  #home-genres .hp-categories-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #home-genres .hp-categories-grid a { gap: 20px; font-size: 21px; padding-inline: 17px 25px; }
  #home-genres .hp-categories-intro { font-size: 19px; }
  #home-genres .hp-categories-intro br { display: none !important; }
}
@media (max-width: 600px) {
  #home-genres { padding: 38px 0 42px; }
  #home-genres > .hp-container { width: calc(100% - 46px); max-width: 410px; }
  #home-genres::before { width: 150px; left: -85px; opacity: .26; }
  #home-genres::after { width: 130px; right: -80px; opacity: .18; }
  #home-genres .hp-categories-kicker { gap: 15px; font-size: 15px; margin-bottom: 21px; }
  .hp-categories-kicker::before, .hp-categories-kicker::after { width: 27px; }
  .hp-categories-kicker > span { padding: 10px 23px; }
  .hp-categories-kicker > span::before { left: -25px; }
  .hp-categories-kicker > span::after { right: -25px; }
  #home-genres h2 { font-size: clamp(32px,8.8vw,46px); line-height: 1.14; }
  .hp-categories-ornament { margin: 17px 0; }
  .hp-categories-ornament span { width: 78px; }
  #home-genres .hp-categories-intro { font-size: 17px; line-height: 1.55; }
  .hp-categories-heading { margin-bottom: 27px; }
  #home-genres .hp-categories-grid { grid-template-columns: 1fr; gap: 15px; }
  #home-genres .hp-categories-grid a { gap: 16px; min-height: 78px; padding: 12px 23px 12px 15px; border-radius: 17px; font-size: 20px; }
  .hp-category-icon { flex-basis: 52px; height: 52px; }
}
@media (max-width: 359px) { #home-genres > .hp-container { width: calc(100% - 36px); } }
@media (prefers-reduced-motion: reduce) { #home-genres .hp-categories-grid a { transition: none; } }