/*
Theme Name: Dog Gone Cute Grooming
Theme URI: https://doggonecutegrooming.com/
Author: Jakob Merkel
Author URI: https://jakobmerkel.com/
Description: Custom one-page theme for Dog Gone Cute Grooming. Includes Customizer controls for editing homepage text and images.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: doggonecute
Tags: custom-background, custom-logo, custom-menu, featured-images, one-column
*/


      :root {
        --brand-primary: #97c92a;
        --brand-secondary: #5a9d16;
        --brand-secondary-rgb: 90, 157, 22;
        --accent-lime: #d2e66e;
        --accent-blue: #4b82aa;
        --accent-blue-rgb: 75, 130, 170;
        --accent-purple: #8e7198;
        --accent-purple-rgb: 142, 113, 152;
        --accent-pink: #c7898c;
        --accent-pink-rgb: 199, 137, 140;
      
        --neutral-900: #030408;
        --neutral-800: #292f38;
        --neutral-300: #c0c6bf;
        --neutral-100: #eae9db;
      
        --bg: var(--neutral-100);
        --bg-soft: #f0eee2;
        --bg-soft-green: #e9efdb;
        --card: #fff;
        --card-soft: #fbfbf8;
        --ink: var(--neutral-900);
        --muted: rgba(41, 47, 56, 0.84);
      
        --line: rgba(41, 47, 56, 0.18);
        --line-strong: rgba(41, 47, 56, 0.28);
        --radius-xl: 30px;
        --radius-lg: 18px;
        --radius-md: 12px;

        --space-section: clamp(68px, 7.1vw, 92px);
        --space-section-mobile: 56px;
        --space-card: clamp(20px, 2.2vw, 30px);
        --space-card-tablet: 20px;
        --space-card-mobile-y: 20px;
        --space-card-mobile-x: 14px;
      
        --shadow-lg: 0 28px 54px rgba(3, 4, 8, 0.11);
        --shadow-md: 0 16px 30px rgba(3, 4, 8, 0.09);
        --shadow-sm: 0 9px 18px rgba(3, 4, 8, 0.06);
      }
      
      * {
        box-sizing: border-box;
      }
      
      html,
      body {
        min-height: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }
      
      body {
        margin: 0;
        background: var(--bg);
        color: var(--ink);
        font-family: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
        line-height: 1.58;
        text-rendering: optimizeLegibility;
      }
      
      img {
        display: block;
        max-width: 100%;
        height: auto;
      }
      
      h1,
      h2,
      h3 {
        margin: 0;
        font-family: "Baloo 2", "Avenir Next Condensed", sans-serif;
        letter-spacing: -0.011em;
        line-height: 1.03;
      }
      
      h1 {
        font-size: clamp(2.45rem, 6.2vw, 4.35rem);
      }
      
      h2 {
        font-size: clamp(1.9rem, 4.3vw, 3rem);
      }
      
      h3 {
        font-size: clamp(1.12rem, 2.3vw, 1.42rem);
      }
      
      p {
        margin: 0;
      }
      
      a {
        color: inherit;
      }
      
      .container {
        width: min(1140px, calc(100% - 2.2rem));
        margin: 0 auto;
      }
      
      .section {
        padding: var(--space-section) 0;
        position: relative;
        scroll-margin-top: 95px;
        --section-accent: var(--brand-secondary);
        --section-accent-rgb: var(--brand-secondary-rgb);
      }

      .section-polaroid-range {
        position: relative;
        isolation: isolate;
      }

      .section-polaroid-range > .section {
        position: relative;
      }

      .side-polaroids {
        position: absolute;
        inset: 0;
        z-index: 6;
        pointer-events: none;
      }

      .side-polaroids__rail {
        position: absolute;
        width: clamp(92px, 8.2vw, 120px);
        bottom: clamp(84px, 8vw, 128px);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .side-polaroids__rail--left {
        top: clamp(780px, 62vw, 980px);
        left: calc(50% - min(570px, calc(50% - 1.1rem)) - clamp(124px, 10.5vw, 154px));
      }

      .side-polaroids__rail--right {
        top: clamp(780px, 62vw, 980px);
        right: calc(50% - min(570px, calc(50% - 1.1rem)) - clamp(124px, 10.5vw, 154px));
      }

      .side-polaroid-frame {
        width: 100%;
        margin: 0;
        background: #fff;
        border: 1px solid rgba(41, 47, 56, 0.22);
        border-radius: 9px;
        padding: 7px 7px 18px;
        box-shadow: 0 12px 22px rgba(3, 4, 8, 0.17);
        transform: rotate(var(--tilt, 0deg)) translateY(var(--rise, 0px));
      }

      .side-polaroid-frame img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid rgba(41, 47, 56, 0.14);
      }

      .lightbox {
        position: fixed;
        inset: 0;
        z-index: 140;
        display: grid;
        place-items: center;
        background: rgba(3, 4, 8, 0.84);
        padding: 18px;
      }

      .lightbox[hidden] {
        display: none;
      }

      .lightbox__inner {
        position: relative;
        width: min(92vw, 920px);
        max-height: 92vh;
        display: grid;
        gap: 10px;
        justify-items: center;
      }

      .lightbox__inner img {
        width: 100%;
        max-height: 78vh;
        object-fit: contain;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        background: rgba(255, 255, 255, 0.06);
      }

      .lightbox__caption {
        color: #fff;
        font-size: 0.92rem;
        text-align: center;
      }

      .lightbox__close {
        position: absolute;
        top: -10px;
        right: -10px;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 999px;
        background: #fff;
        color: var(--neutral-900);
        font-size: 1.35rem;
        line-height: 1;
        cursor: pointer;
      }
      
      .top-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(41, 47, 56, 0.2);
        background: rgba(234, 233, 219, 0.82);
        width: fit-content;
        max-width: 100%;
        min-height: 30px;
        padding: 4px 10px;
        margin-bottom: 11px;
        font-family: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
        font-size: 12px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: 1.44px;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--neutral-800);
      }
      
      .top-label--light {
        border-color: rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
      }
      
      .section-head {
        max-width: 700px;
        margin-bottom: clamp(22px, 2.6vw, 32px);
      }
      
      .section-head--center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }
      
      .section-head p:not(.top-label) {
        margin-top: 10px;
        color: var(--muted);
        font-size: 1rem;
        line-height: 1.64;
      }

      .section-head h2 {
        max-width: 18ch;
      }

      .section-head--center h2,
      .section-head--center p {
        margin-left: auto;
        margin-right: auto;
      }

      .section .top-label:not(.top-label--light) {
        border-color: rgba(var(--section-accent-rgb), 0.42);
        background: rgba(var(--section-accent-rgb), 0.18);
        color: var(--neutral-800);
      }
      
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        --btn-paw-filter: brightness(0) saturate(100%);
        border: 1px solid transparent;
        border-radius: 15px;
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 700;
        letter-spacing: 0.006em;
        padding: 10px 16px;
        line-height: 1.2;
        transition:
          transform 160ms ease,
          background-color 160ms ease,
          border-color 160ms ease,
          color 160ms ease,
          box-shadow 160ms ease;
        -webkit-tap-highlight-color: transparent;
      }

      .btn::after {
        content: "";
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        display: block;
        background-image: url("./images/paw-print.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 90%;
        filter: var(--btn-paw-filter);
        opacity: 0.96;
      }
      
      .btn:hover,
      .btn:focus-visible {
        transform: translateY(-1px);
      }
      
      .btn:active {
        transform: translateY(0);
      }
      
      .btn:focus-visible {
        outline: 2px solid rgba(75, 130, 170, 0.5);
        outline-offset: 2px;
      }
      
      .btn--small {
        padding: 9px 14px;
        font-size: 0.83rem;
      }

      .btn--small::after {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
      }
      
      .btn.btn--primary {
        --btn-paw-filter: brightness(0) saturate(100%) invert(100%);
        background: #5a9d16;
        border-color: #5a9d16;
        color: #fff;
        box-shadow: var(--shadow-sm);
      }
      
      .btn.btn--primary:hover,
      .btn.btn--primary:focus-visible {
        background: #4e8b12;
        border-color: #4e8b12;
      }
      
      .btn--about-cta {
        background: rgba(var(--section-accent-rgb, var(--accent-pink-rgb)), 0.24);
        border-color: rgba(var(--section-accent-rgb, var(--accent-pink-rgb)), 0.46);
        color: var(--neutral-900);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;
      }
      
      .btn--about-cta:hover,
      .btn--about-cta:focus-visible {
        background: rgba(var(--section-accent-rgb, var(--accent-pink-rgb)), 0.32);
        border-color: rgba(var(--section-accent-rgb, var(--accent-pink-rgb)), 0.54);
        color: var(--neutral-900);
      }

      a.btn--call:not(.btn) {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      a.btn--call:not(.btn)::before {
        content: "";
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        background-image: url("./images/paw-print.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        filter: brightness(0) saturate(100%);
        opacity: 0.84;
      }
      
      .btn--ghost {
        background: rgba(255, 255, 255, 0.92);
        border-color: rgba(41, 47, 56, 0.2);
        color: var(--neutral-800);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
      }
      
      .btn--ghost:hover,
      .btn--ghost:focus-visible {
        background: #fff;
        border-color: var(--line-strong);
      }
      
      .btn--flat-blue {
        background: rgba(75, 130, 170, 0.18);
        border-color: rgba(75, 130, 170, 0.35);
        color: var(--neutral-900);
      }
      
      .btn--flat-green,
      .btn--flat-yellow {
        background: rgba(90, 157, 22, 0.2);
        border-color: rgba(90, 157, 22, 0.5);
        color: var(--neutral-900);
      }

      .btn--flat-purple {
        background: rgba(142, 113, 152, 0.24);
        border-color: rgba(142, 113, 152, 0.46);
        color: var(--neutral-900);
      }
      
      .btn--flat-coral {
        background: rgba(193, 124, 129, 0.32);
        border-color: rgba(193, 124, 129, 0.5);
        color: var(--neutral-900);
      }
      
      .site-header {
        position: sticky;
        top: 0;
        z-index: 70;
        padding-top: 5px;
        padding-bottom: 5px;
        background: rgba(234, 233, 219, 0.96);
        backdrop-filter: blur(12px) saturate(112%);
        border-bottom: 1px solid rgba(41, 47, 56, 0.13);
      }
      
      .nav-shell {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 14px;
        min-height: 76px;
      }
      
      .nav-links {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .nav-links li {
        margin: 0;
        padding: 0;
      }
      
      .nav-links a {
        text-decoration: none;
        text-transform: lowercase;
        font-size: 0.79rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        color: rgba(41, 47, 56, 0.82);
        padding: 7px 10px;
        border-radius: 9px;
        border: 1px solid transparent;
        background: transparent;
        white-space: nowrap;
        transition:
          color 150ms ease,
          background-color 150ms ease,
          border-color 150ms ease;
      }
      
      .nav-links a:hover,
      .nav-links a:focus-visible {
        color: var(--neutral-900);
        background: rgba(255, 255, 255, 0.62);
        border-color: rgba(41, 47, 56, 0.16);
      }
      
      .nav-links a:focus-visible {
        outline: 2px solid rgba(75, 130, 170, 0.45);
        outline-offset: 2px;
      }
      
      .brand {
        display: inline-flex;
        align-items: center;
        gap: 0;
        text-decoration: none;
        justify-self: center;
      }
      
      .brand img {
        border-radius: 0;
        object-fit: contain;
        display: block;
      }

      .brand-logo {
        width: clamp(188px, 21vw, 272px);
        height: auto;
        max-height: 70px;
      }
      
      .brand span {
        font-family: "Baloo 2", sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
      }
      
      .nav-actions {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
      }

      .mobile-menu {
        display: none;
        position: relative;
      }

      .mobile-menu summary {
        list-style: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        user-select: none;
        font-size: 0.79rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        color: var(--neutral-800);
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(41, 47, 56, 0.2);
        border-radius: 12px;
        padding: 8px 12px;
        line-height: 1;
      }

      .mobile-menu summary::-webkit-details-marker {
        display: none;
      }

      .mobile-menu summary::marker {
        content: "";
      }

      .mobile-menu__icon {
        width: 14px;
        height: 14px;
        display: inline-grid;
        place-items: center;
        flex: 0 0 14px;
      }

      .mobile-menu__icon svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      .mobile-menu__icon .icon-close {
        display: none;
      }

      .mobile-menu[open] .mobile-menu__icon .icon-menu {
        display: none;
      }

      .mobile-menu[open] .mobile-menu__icon .icon-close {
        display: block;
      }

      .mobile-menu__label {
        line-height: 1;
      }

      .mobile-menu summary:focus-visible {
        outline: 2px solid rgba(75, 130, 170, 0.45);
        outline-offset: 2px;
      }

      .mobile-menu__panel {
        position: absolute;
        top: calc(100% + 9px);
        right: 0;
        min-width: 196px;
        display: grid;
        gap: 4px;
        padding: 8px;
        background: #eae9db;
        opacity: 1;
        border: 1px solid rgba(41, 47, 56, 0.18);
        border-radius: 14px;
        box-shadow: var(--shadow-lg);
        z-index: 95;
      }

      .mobile-menu__list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 4px;
      }

      .mobile-menu__list li {
        margin: 0;
        padding: 0;
      }

      .mobile-menu__panel a {
        text-decoration: none;
        color: var(--neutral-800);
        font-size: 0.88rem;
        font-weight: 600;
        border-radius: 10px;
        padding: 9px 10px;
      }

      .mobile-menu__panel a:hover,
      .mobile-menu__panel a:focus-visible {
        background: #e3e1d5;
        color: var(--neutral-900);
      }

      .mobile-menu__panel a:focus-visible {
        outline: 2px solid rgba(75, 130, 170, 0.45);
        outline-offset: 1px;
      }
      
      .hero {
        --section-accent: var(--accent-pink);
        --section-accent-rgb: var(--accent-pink-rgb);
        background: var(--bg);
        padding-top: 58px;
        padding-bottom: clamp(14px, 1.8vw, 24px);
        overflow: visible;
        border-bottom: 0;
        z-index: 3;
      }

      .hero .container {
        width: min(1140px, calc(100% - 4.2rem));
        overflow: visible;
      }
      
      .hero-grid {
        display: grid;
        grid-template-columns: 1.01fr 0.99fr;
        gap: clamp(20px, 3.5vw, 38px);
        align-items: end;
        overflow: visible;
      }
      
      .hero-copy {
        max-width: 540px;
        padding-bottom: 72px;
        justify-self: start;
        text-align: left;
      }

      .hero-brand-logo {
        display: block;
        width: clamp(220px, 26vw, 340px);
        height: auto;
        max-height: 148px;
        margin: 0 auto 14px 0;
        object-fit: contain;
        justify-self: start;
        align-self: start;
      }

      .hero-break-tablet {
        display: none;
      }
      
      .hero-copy > p:not(.top-label):not(.hero-helper) {
        color: var(--muted);
        margin-top: 13px;
        font-size: 1.03rem;
        line-height: 1.6;
        max-width: 48ch;
      }
      
      .hero-actions {
        margin-top: 22px;
      }

      .hero-helper {
        margin-top: 9px;
        color: rgba(41, 47, 56, 0.72);
        font-size: 0.84rem;
        font-weight: 600;
        letter-spacing: 0.01em;
      }
      
      .hero .btn.btn--primary,
      .hero .btn.btn--primary:visited,
      .hero .hero-actions .btn.btn--primary,
      .hero .hero-actions .btn.btn--primary:visited {
        background: #C7898C;
        border-color: #C7898C;
        color: #fff;
        -webkit-text-fill-color: #fff;
        box-shadow: var(--shadow-md);
      }
      
      .hero .btn.btn--primary:hover,
      .hero .btn.btn--primary:focus-visible,
      .hero .btn.btn--primary:active {
        background: #C7898C;
        border-color: #C7898C;
        color: #fff;
        -webkit-text-fill-color: #fff;
      }
      
      .hero-art {
        position: relative;
        align-self: end;
        justify-self: end;
        margin: 0;
        width: min(548px, 100%);
        padding: 12px 12px 20px;
        background: #fff;
        border: 1px solid rgba(41, 47, 56, 0.24);
        border-radius: 12px;
        box-shadow: 0 14px 24px rgba(3, 4, 8, 0.16), 0 1px 0 rgba(255, 255, 255, 0.92) inset;
        transform: rotate(-0.95deg);
      }

      .hero-art::before,
      .hero-art::after {
        content: none;
      }
      
      .hero-art img {
        position: relative;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: 100%;
        object-fit: cover;
        object-position: center 32%;
        border-radius: 4px;
        border: 1px solid rgba(41, 47, 56, 0.18);
        box-shadow: 0 6px 12px rgba(3, 4, 8, 0.1);
        display: block;
      }

      .hero-art-caption {
        margin-top: 12px;
        padding: 10px 4px 0;
        border-top: 1px dashed rgba(41, 47, 56, 0.26);
      }

      .hero-art-trust {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 5px 14px;
      }

      .hero-art-trust li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
        font-size: clamp(1.18rem, 2vw, 1.55rem);
        line-height: 1.02;
        font-weight: 700;
        color: rgba(41, 47, 56, 0.94);
        white-space: nowrap;
      }

      .hero-art-trust li::before {
        content: "✦";
        color: var(--accent-pink);
        font-size: 0.7em;
        line-height: 1;
      }

      .hero-art-trust li:nth-child(1) {
        transform: rotate(-1deg);
      }

      .hero-art-trust li:nth-child(2) {
        transform: rotate(0.7deg);
      }

      .hero-art-trust li:nth-child(3) {
        transform: rotate(-0.6deg);
      }
      
      .team {
        --section-accent: var(--accent-pink);
        --section-accent-rgb: var(--accent-pink-rgb);
        background: var(--bg);
        overflow: hidden;
        padding-top: clamp(20px, 3vw, 34px);
        padding-bottom: clamp(52px, 6vw, 72px);
        z-index: 2;
      }

      .team::before {
        content: none;
      }

      .team .container {
        position: relative;
        z-index: 1;
      }
      
      .team .section-head {
        margin-bottom: 0;
        display: grid;
        justify-items: center;
        gap: 11px;
        width: 100%;
      }
      
      .team .section-head .btn {
        margin-top: 12px;
      }
      
      .team .about-card {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
        border: 1px solid rgba(41, 47, 56, 0.14);
        border-top: 3px solid var(--section-accent);
        border-radius: 20px;
        padding: 24px 26px 22px;
        width: 100%;
        max-width: none;
        box-shadow: 0 14px 30px rgba(3, 4, 8, 0.09);
      }
      
      .team .about-card .top-label {
        margin-bottom: 0;
        background: rgba(var(--section-accent-rgb), 0.18);
        border-color: rgba(var(--section-accent-rgb), 0.42);
        color: var(--neutral-800);
      }
      
      .team .about-card h2 {
        color: var(--neutral-900);
        max-width: 24ch;
      }
      
      .team .about-card p:not(.top-label) {
        margin-top: 0;
        max-width: 60ch;
        font-size: 1.01rem;
        line-height: 1.62;
        color: var(--muted);
      }
      
      .team .about-card .about-emphasis {
        color: var(--neutral-900);
        font-weight: 900;
      }

      .team .about-card .btn--about-cta {
        margin-top: 10px;
      }
      
      .team-strip {
        overflow: hidden;
        margin-top: 24px;
        margin-left: calc((100vw - min(1140px, calc(100% - 2.2rem))) / -2);
        margin-right: calc((100vw - min(1140px, calc(100% - 2.2rem))) / -2);
        padding: 14px 12px 20px;
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 5%, black 95%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, black 5%, black 95%, transparent 100%);
      }
      
      .team-track {
        display: flex;
        gap: 14px;
        width: max-content;
        will-change: transform;
        transform: translate3d(0, 0, 0);
      }
      
      .team-card {
        margin: 0;
        width: clamp(340px, 30vw, 430px);
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(3, 4, 8, 0.18);
        background: #fff;
        box-shadow: 0 10px 20px rgba(3, 4, 8, 0.16);
      }
      
      .team-card img {
        width: 100%;
        height: 340px;
        object-fit: cover;
      }
      
      .icon-list {
        list-style: none;
        padding: 0;
        margin: 22px auto;
        max-width: 540px;
        display: grid;
        gap: 8px;
        text-align: center;
        justify-items: center;
      }
      
      .icon-list li {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding-left: 0;
        font-weight: 600;
        color: var(--neutral-900);
      }
      
      .icon-list li::before {
        content: "";
        position: static;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: var(--brand-secondary);
        transform: none;
      }

      .team .icon-list {
        margin-top: 8px;
        margin-bottom: 4px;
      }

      .team .icon-list li {
        gap: 8px;
        font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive;
        font-size: clamp(1.18rem, 2vw, 1.55rem);
        line-height: 1.02;
        font-weight: 700;
        color: rgba(41, 47, 56, 0.94);
      }

      .team .icon-list li::before {
        content: "✦";
        width: auto;
        height: auto;
        border-radius: 0;
        background: none;
        color: var(--accent-pink);
        font-size: 0.7em;
        line-height: 1;
      }

      .team-strip-wrap {
        margin-top: 20px;
        display: grid;
        justify-items: center;
        gap: 10px;
      }

      .process {
        --section-accent: var(--accent-blue);
        --section-accent-rgb: var(--accent-blue-rgb);
        background: var(--bg);
      }

      .process .container {
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid rgba(41, 47, 56, 0.14);
        border-radius: 22px;
        padding: var(--space-card);
      }

      .process-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 8px;
      }

      .process-step {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: var(--shadow-sm);
        padding: 14px;
        text-align: center;
        display: grid;
        gap: 6px;
      }

      .process-step-index {
        width: 26px;
        height: 26px;
        border-radius: 999px;
        margin: 0 auto;
        display: inline-grid;
        place-items: center;
        font-size: 0.79rem;
        font-weight: 800;
        color: #fff;
      }

      .process-step:nth-child(3n + 1) .process-step-index {
        background: var(--brand-secondary);
      }

      .process-step:nth-child(3n + 2) .process-step-index {
        background: var(--accent-blue);
      }

      .process-step:nth-child(3n + 3) .process-step-index {
        background: var(--accent-pink);
      }

      .process-step h3 {
        font-size: 1.04rem;
      }

      .process-step p {
        color: var(--muted);
        font-size: 0.92rem;
      }

      @keyframes hours-sign-sway {
        0%,
        100% {
          transform: rotate(-0.55deg);
        }

        50% {
          transform: rotate(0.55deg);
        }
      }
      
      .services {
        --section-accent: var(--brand-secondary);
        --section-accent-rgb: var(--brand-secondary-rgb);
        background: var(--bg);
      }
      
      .services-shell {
        position: relative;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.66) 100%);
        border: 1px solid rgba(41, 47, 56, 0.14);
        border-radius: 22px;
        padding: var(--space-card);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
        isolation: isolate;
      }

      .services-shell > .section-head {
        margin-bottom: clamp(16px, 2.1vw, 22px);
      }

      .services-shell > .section-head p:not(.top-label) {
        margin-top: 8px;
      }

      .services-polaroids {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
      }

      .services-polaroid-frame {
        position: absolute;
        width: clamp(72px, 6.9vw, 96px);
        margin: 0;
        background: #fff;
        border: 1px solid rgba(41, 47, 56, 0.22);
        border-radius: 10px;
        padding: 6px 6px 15px;
        box-shadow: 0 12px 18px rgba(3, 4, 8, 0.14);
        transform: rotate(var(--tilt, 0deg)) scale(0.92);
      }

      .services-polaroid-frame img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid rgba(41, 47, 56, 0.14);
      }

      .services-polaroid-frame--top-left {
        top: 22px;
        left: -82px;
      }

      .services-polaroid-frame--top-right {
        top: 22px;
        right: -82px;
      }

      .services-polaroid-frame--middle-left {
        top: 50%;
        left: -122px;
        transform: translateY(-50%) rotate(var(--tilt, 0deg)) scale(0.92);
      }

      .services-polaroid-frame--middle-right {
        top: 50%;
        right: -122px;
        transform: translateY(-50%) rotate(var(--tilt, 0deg)) scale(0.92);
      }

      .services-polaroid-frame--bottom-left {
        bottom: 24px;
        left: -82px;
      }

      .services-polaroid-frame--bottom-right {
        bottom: 24px;
        right: -82px;
      }
      
      .services-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      .services-shell > .section-head,
      .services-shell > .services-grid,
      .services-shell > .services-divider,
      .services-shell > .services-extras-card,
      .services-shell > .center-cta,
      .services-shell > .services-footnote {
        position: relative;
        z-index: 2;
      }
      
      .service-card {
        position: relative;
        z-index: 3;
        --card-accent: rgba(41, 47, 56, 0.14);
        background: var(--card-soft);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 20px;
        box-shadow: var(--shadow-sm);
        display: grid;
        gap: 9px;
        justify-items: center;
        text-align: center;
        transition:
          transform 180ms ease,
          box-shadow 180ms ease,
          border-color 180ms ease;
      }

      .service-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--card-accent);
        border-radius: 14px 14px 0 0;
      }

      .service-card--blue {
        --card-accent: rgba(var(--accent-blue-rgb), 0.92);
      }

      .service-card--green {
        --card-accent: rgba(var(--brand-secondary-rgb), 0.92);
      }

      .service-card--purple {
        --card-accent: rgba(var(--accent-purple-rgb), 0.92);
      }

      .service-card--pink {
        --card-accent: rgba(var(--accent-pink-rgb), 0.92);
      }

      .service-card--featured {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(var(--accent-blue-rgb), 0.24);
        box-shadow: 0 18px 34px rgba(3, 4, 8, 0.12);
      }

      .service-card:hover {
        z-index: 4;
        transform: translateY(-2px);
        border-color: rgba(41, 47, 56, 0.28);
        box-shadow: var(--shadow-md);
      }
      
      .service-card p {
        color: var(--muted);
        font-size: 0.95rem;
        line-height: 1.58;
      }

      .service-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        border-radius: 999px;
        padding: 4px 9px;
        font-size: 0.73rem;
        line-height: 1.12;
        font-weight: 800;
        letter-spacing: 0.045em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .service-tag--blue {
        background: rgba(75, 130, 170, 0.18);
        color: var(--accent-blue);
      }

      .service-tag--yellow {
        background: rgba(90, 157, 22, 0.2);
        color: var(--brand-secondary);
      }

      .service-tag--purple {
        background: rgba(142, 113, 152, 0.24);
        color: #5f476a;
      }

      .service-tag--coral {
        background: rgba(193, 124, 129, 0.22);
        color: #7d4f53;
      }

      .service-card ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 7px;
        width: 100%;
        color: var(--muted);
        font-size: 0.88rem;
        justify-items: center;
      }

      .service-card li {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        line-height: 1.45;
        width: 100%;
        max-width: 34ch;
        margin-inline: auto;
        text-align: left;
      }

      .service-card li span {
        flex: 1 1 auto;
        min-width: 0;
      }

      .service-card li::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 999px;
        margin-top: 0.6em;
        background: rgba(41, 47, 56, 0.26);
        flex: 0 0 6px;
      }

      .service-card .btn {
        margin-top: auto;
        justify-self: center;
      }
      
      .service-card a:not(.btn) {
        font-size: 0.86rem;
        font-weight: 700;
        color: var(--neutral-800);
        text-underline-offset: 2px;
      }

      .service-card a:not(.btn):focus-visible {
        outline: 2px solid rgba(75, 130, 170, 0.55);
        outline-offset: 2px;
        border-radius: 8px;
      }
      
      .service-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        display: inline-grid;
        place-items: center;
        padding: 8px;
      }

      .service-icon img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
      }
      
      .service-icon--blue {
        background: rgba(75, 130, 170, 0.18);
        color: var(--accent-blue);
      }
      
      .service-icon--yellow {
        background: rgba(90, 157, 22, 0.2);
        color: var(--brand-secondary);
      }
      
      .service-icon--coral {
        background: rgba(193, 124, 129, 0.22);
        color: #7d4f53;
      }

      .service-icon--purple {
        background: rgba(142, 113, 152, 0.24);
        color: #5f476a;
      }
      
      .center-cta {
        margin-top: 18px;
        text-align: center;
      }

      .services-divider {
        width: min(760px, 92%);
        height: 1px;
        margin: 18px auto 0;
        background: repeating-linear-gradient(
          90deg,
          rgba(41, 47, 56, 0.18) 0px,
          rgba(41, 47, 56, 0.18) 9px,
          transparent 9px,
          transparent 18px
        );
        position: relative;
        opacity: 0.92;
      }

      .services-divider::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(41, 47, 56, 0.32);
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.78);
      }

      .services-extras-card {
        margin-top: 12px;
        background: rgba(41, 47, 56, 0.05);
        border: 1px solid rgba(41, 47, 56, 0.14);
        border-radius: 14px;
        box-shadow: var(--shadow-sm);
        padding: 16px;
        text-align: center;
      }

      .services-extras-card .top-label {
        border-color: rgba(41, 47, 56, 0.22);
        background: rgba(41, 47, 56, 0.07);
        color: var(--neutral-800);
      }

      .services-extras-card .btn--ghost {
        background: rgba(41, 47, 56, 0.07);
        border-color: rgba(41, 47, 56, 0.22);
        box-shadow: none;
        color: var(--neutral-900);
      }

      .services-extras-card .btn--ghost:hover,
      .services-extras-card .btn--ghost:focus-visible {
        background: rgba(41, 47, 56, 0.09);
        border-color: rgba(41, 47, 56, 0.28);
      }

      .services-extras-head {
        display: grid;
        justify-items: center;
        gap: 8px;
      }

      .services-extras-head h3 {
        font-size: clamp(1.04rem, 2vw, 1.3rem);
        line-height: 1.08;
      }

      .services-extras-head p:last-child {
        color: var(--muted);
        font-size: 0.93rem;
        line-height: 1.5;
        max-width: 62ch;
      }

      .services-extras-list {
        list-style: none;
        margin: 12px 0 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
      }

      .services-extras-list li {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 7px 11px;
        border-radius: 999px;
        border: 1px solid rgba(41, 47, 56, 0.18);
        background: rgba(41, 47, 56, 0.05);
        color: var(--neutral-800);
        font-weight: 600;
        font-size: 0.87rem;
        line-height: 1.2;
      }

      .services-extras-list li::before {
        content: "";
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        background: rgba(41, 47, 56, 0.72);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
      }

      .services-extras-list li.extras-chip--tooth::before {
        -webkit-mask-image: url("./images/icon-tooth.svg");
        mask-image: url("./images/icon-tooth.svg");
      }

      .services-extras-list li.extras-chip--grind::before {
        -webkit-mask-image: url("./images/icon-grind.svg");
        mask-image: url("./images/icon-grind.svg");
      }

      .services-extras-list li.extras-chip--dye::before {
        -webkit-mask-image: url("./images/icon-dye.svg");
        mask-image: url("./images/icon-dye.svg");
      }

      .services-extras-list li.extras-chip--shampoo::before {
        -webkit-mask-image: url("./images/icon-shampoo.svg");
        mask-image: url("./images/icon-shampoo.svg");
      }

      .services-extras-list li.extras-chip--sparkle::before {
        -webkit-mask-image: url("./images/icon-sparkle.svg");
        mask-image: url("./images/icon-sparkle.svg");
      }

      .services-extras-list + .center-cta {
        margin-top: 14px;
      }

      .services-footnote {
        margin-top: 14px;
        text-align: center;
        color: var(--muted);
        font-size: 0.89rem;
        line-height: 1.5;
      }

      .services-footnote a {
        color: var(--neutral-900);
        font-weight: 700;
      }

      @media (max-width: 620px) {
        .services-extras-card {
          padding: 14px 12px;
        }

        .services-extras-list {
          gap: 6px;
        }

        .services-extras-list li {
          width: 100%;
          border-radius: 10px;
        }
      }
      
      .hours {
        --section-accent: var(--accent-pink);
        --section-accent-rgb: var(--accent-pink-rgb);
        background: var(--bg);
        padding-top: var(--space-section);
        padding-bottom: var(--space-section);
      }

      .hours .top-label:not(.top-label--light) {
        border-color: rgba(var(--accent-pink-rgb), 0.42);
        background: rgba(var(--accent-pink-rgb), 0.18);
        color: var(--neutral-800);
      }
      
      .hours-shell {
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
        align-items: start;
        width: 100%;
        margin: 0 auto;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        overflow: visible;
      }

      .hours-shell::before,
      .hours-shell::after {
        display: none;
      }

      .hours-shell .section-head,
      .hours-shell .hours-card,
      .hours-shell .address-map-grid {
        position: relative;
        z-index: 1;
      }

      .hours-shell .section-head {
        margin: 0 auto;
        max-width: 700px;
        text-align: center;
        justify-items: center;
      }

      .hours-shell .section-head h2,
      .hours-shell .section-head p:not(.top-label) {
        margin-left: auto;
        margin-right: auto;
      }

      .hours-card {
        position: relative;
        width: min(640px, 100%);
        margin: 0 auto;
        margin-top: 54px;
        background: linear-gradient(180deg, #fbfaf6 0%, #f7f5ef 100%);
        border: 1px solid rgba(41, 47, 56, 0.16);
        border-radius: 24px;
        box-shadow: 0 16px 28px rgba(41, 47, 56, 0.14), 0 1px 0 rgba(255, 255, 255, 0.88) inset;
        padding: 14px 14px 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        min-height: 0;
        text-align: center;
        transform-origin: 50% -46px;
        animation: hours-sign-sway 8.8s ease-in-out infinite;
        will-change: transform;
      }

      .hours-hanger {
        position: absolute;
        left: 0;
        top: -64px;
        width: 100%;
        height: 82px;
        pointer-events: none;
      }

      .hours-hanger-lines {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }

      .hours-hanger-lines line {
        stroke: rgba(41, 47, 56, 0.42);
        stroke-width: 2;
        stroke-linecap: round;
      }

      .hours-hanger-pin {
        position: absolute;
        width: 19px;
        height: 19px;
        border-radius: 999px;
        background: #e8dfcc;
        border: 1px solid rgba(41, 47, 56, 0.22);
        box-shadow: 0 2px 5px rgba(41, 47, 56, 0.2);
        z-index: 1;
      }

      .hours-hanger-pin--center {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }

      .hours-hanger-pin--left {
        top: 58px;
        left: 11%;
        transform: translateX(-50%);
      }

      .hours-hanger-pin--right {
        top: 58px;
        left: 89%;
        transform: translateX(-50%);
      }

      .hours-live {
        display: grid;
        gap: 8px;
        justify-items: center;
      }

      .hours-status-chip {
        display: inline-flex;
        align-items: center;
        align-self: center;
        gap: 8px;
        width: fit-content;
        white-space: nowrap;
        border-radius: 999px;
        padding: 5px 10px;
        border: 1px solid transparent;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: 0.025em;
      }

      .hours-status-chip .hours-dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: currentColor;
      }

      .hours-status-chip.is-open {
        color: #3f7c10;
        background: rgba(90, 157, 22, 0.11);
        border-color: rgba(90, 157, 22, 0.34);
      }

      .hours-status-chip.is-closed {
        color: #885861;
        background: rgba(193, 124, 129, 0.11);
        border-color: rgba(193, 124, 129, 0.33);
      }

      .hours-today-line {
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--muted);
        font-size: 0.88rem;
        font-weight: 600;
      }

      .hours-today-line strong {
        color: var(--neutral-900);
        font-weight: 800;
      }

      .hours-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 6px;
        width: fit-content;
        max-width: 100%;
        justify-items: center;
        margin-left: auto;
        margin-right: auto;
      }
      
      .hours-list li {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: center;
        align-items: center;
        column-gap: 10px;
        width: fit-content;
        max-width: 100%;
        padding: 6px 9px;
        border: 1px solid rgba(41, 47, 56, 0.14);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.38);
      }

      .hours-list li.is-open {
        background: rgba(90, 157, 22, 0.045);
        border-color: rgba(90, 157, 22, 0.32);
      }

      .hours-list li.is-closed {
        background: rgba(193, 124, 129, 0.055);
        border-color: rgba(193, 124, 129, 0.34);
      }

      .hours-list li.is-today {
        box-shadow: 0 0 0 1px rgba(90, 157, 22, 0.1) inset;
      }

      .hours-list li.is-open.is-today {
        background: rgba(90, 157, 22, 0.075);
        border-color: rgba(90, 157, 22, 0.44);
      }

      .hours-list li.is-closed.is-today {
        background: rgba(193, 124, 129, 0.085);
        border-color: rgba(193, 124, 129, 0.46);
        box-shadow: 0 0 0 1px rgba(193, 124, 129, 0.16) inset;
      }
      
      .hours-list span {
        font-weight: 700;
        font-size: 0.94rem;
        color: var(--neutral-800);
        text-align: center;
      }
      
      .hours-list strong {
        font-size: 0.84rem;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: var(--neutral-900);
        text-align: center;
      }

      .hours-list li strong::before {
        content: "";
        width: 8px;
        height: 8px;
        flex: 0 0 8px;
        border-radius: 999px;
        background: rgba(90, 157, 22, 0.82);
      }

      .hours-list li.is-closed strong::before {
        border: 0;
        background: rgba(193, 124, 129, 0.88);
      }

      .hours-list li.is-today span,
      .hours-list li.is-today strong {
        font-weight: 800;
      }
      
      .hours-cta {
        display: inline-flex;
        margin: 8px auto 0;
        align-self: auto;
        box-shadow: 0 8px 18px rgba(3, 4, 8, 0.14);
      }

      .hours-location-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "hours address"
          "map map";
        gap: clamp(14px, 2vw, 22px);
        align-items: start;
        width: min(1040px, 100%);
        margin: 0 auto;
      }

      .hours-location-layout .hours-card {
        grid-area: hours;
        margin-top: 54px;
        width: 100%;
        max-width: none;
      }

      .hours-location-layout .address-map-grid {
        grid-area: address;
        margin-top: 54px;
        width: 100%;
      }
      
      .address-map-grid {
        position: relative;
        overflow: visible;
        width: 100%;
        margin: 0 auto;
        margin-top: 54px;
        display: block;
        background: linear-gradient(180deg, #fbfaf6 0%, #f7f5ef 100%);
        border: 1px solid rgba(41, 47, 56, 0.16);
        border-radius: 24px;
        box-shadow: 0 16px 28px rgba(41, 47, 56, 0.14), 0 1px 0 rgba(255, 255, 255, 0.88) inset;
        padding: 14px 14px 12px;
        transform-origin: 50% -46px;
        animation: hours-sign-sway 9.6s ease-in-out infinite;
        will-change: transform;
      }

      .address-card {
        position: relative;
        order: 1;
        z-index: 2;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        display: grid;
        align-content: start;
        gap: 9px;
        text-align: center;
      }

      .address-card .top-label {
        margin-inline: auto;
      }

      .address-card h2 {
        max-width: 22ch;
        margin-inline: auto;
        text-wrap: balance;
      }
      
      .address-card p:not(.top-label) {
        color: var(--muted);
        max-width: 44ch;
        margin-left: auto;
        margin-right: auto;
      }
      
      .address-card address {
        font-style: normal;
        line-height: 1.62;
        font-size: 0.95rem;
        color: var(--neutral-800);
        margin-left: auto;
        margin-right: auto;
      }
      
      .address-actions {
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
      }
      
      .location-map-card {
        grid-area: map;
        position: relative;
        width: 100%;
        margin-top: 6px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.66) 100%);
        border: 1px solid rgba(41, 47, 56, 0.14);
        border-radius: 20px;
        padding: var(--space-card);
        box-shadow: 0 12px 26px rgba(3, 4, 8, 0.09);
      }

      .location-map-address {
        margin: 0 0 10px;
        text-align: center;
        color: var(--neutral-800);
        font-size: 0.93rem;
        line-height: 1.6;
      }

      .location-map-address strong {
        color: var(--neutral-900);
        font-weight: 800;
      }

      .map-wrap {
        position: relative;
        z-index: 1;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.74);
        box-shadow: 0 10px 22px rgba(3, 4, 8, 0.08);
        background: linear-gradient(140deg, rgba(230, 228, 214, 0.44) 0%, rgba(245, 244, 238, 0.88) 100%);
        min-height: 360px;
      }

      .map-wrap iframe {
        border: 0;
        width: 100%;
        height: 100%;
        min-height: 360px;
      }

      .hours-hanger--address {
        top: -64px;
      }
      
      .service-area-chips {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: center;
        gap: 10px;
        width: min(100%, 760px);
        margin-left: auto;
        margin-right: auto;
      }

      .address-card .service-area-chips {
        margin-top: 4px;
        margin-bottom: 2px;
      }
      
      .service-area-chips span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 15px;
        padding: 8px 13px;
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--neutral-800);
        text-align: center;
        white-space: normal;
        line-height: 1.2;
        text-wrap: balance;
      }
      
      .testimonials {
        --section-accent: var(--accent-purple);
        --section-accent-rgb: var(--accent-purple-rgb);
        background: var(--bg);
      }

      .testimonials .container {
        background: rgba(255, 255, 255, 0.44);
        border: 1px solid rgba(41, 47, 56, 0.14);
        border-radius: 22px;
        padding: var(--space-card);
      }

      .testimonials-head-layout {
        display: grid;
        grid-template-columns: clamp(96px, 9vw, 118px) minmax(0, 1fr) clamp(96px, 9vw, 118px);
        align-items: center;
        gap: clamp(12px, 2vw, 20px);
        margin-bottom: 8px;
      }

      .testimonials-head-layout .section-head {
        margin-bottom: 0;
      }

      .testimonial-inset-photo {
        width: 100%;
        margin: 0;
        background: #fff;
        border: 1px solid rgba(41, 47, 56, 0.22);
        border-radius: 8px;
        padding: 6px 6px 14px;
        box-shadow: 0 10px 18px rgba(3, 4, 8, 0.14);
      }

      .testimonial-inset-photo--left {
        transform: rotate(-6deg);
      }

      .testimonial-inset-photo--right {
        transform: rotate(6deg);
      }

      .testimonial-inset-photo img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 4px;
        border: 1px solid rgba(41, 47, 56, 0.14);
      }

      .testimonials-carousel {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        align-items: center;
      }

      .testimonial-nav {
        width: 36px;
        height: 36px;
        border-radius: 999px;
        border: 1px solid rgba(41, 47, 56, 0.2);
        background: rgba(255, 255, 255, 0.86);
        color: var(--neutral-800);
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1;
        display: inline-grid;
        place-items: center;
        cursor: pointer;
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
      }

      .testimonial-nav:hover,
      .testimonial-nav:focus-visible {
        background: #fff;
        border-color: rgba(41, 47, 56, 0.34);
        color: var(--neutral-900);
      }

      .testimonial-nav:disabled {
        opacity: 0.36;
        cursor: default;
      }

      .testimonials-viewport {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .testimonials-viewport::-webkit-scrollbar {
        display: none;
      }

      .testimonials-track {
        display: flex;
        gap: 14px;
        padding: 2px;
      }

      .testimonial-card {
        flex: 0 0 calc((100% - 28px) / 3);
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 15px;
        box-shadow: var(--shadow-sm);
        display: grid;
        gap: 7px;
        align-content: start;
        justify-items: center;
        text-align: center;
        scroll-snap-align: start;
      }

      .testimonial-stars {
        margin: 0;
        letter-spacing: 0.12em;
        color: #c7898c;
        font-size: 0.84rem;
        font-weight: 800;
      }

      .testimonial-card .testimonial-name {
        margin: 0;
        font-size: 1.02rem;
        line-height: 1.3;
      }

      .testimonial-quote {
        margin: 0;
        color: var(--neutral-900);
        font-size: 0.94rem;
        line-height: 1.56;
        text-align: center;
      }
      
      .photo-gallery {
        --section-accent: var(--brand-secondary);
        --section-accent-rgb: var(--brand-secondary-rgb);
        background: var(--bg);
      }

      .photo-gallery .container {
        background: rgba(255, 255, 255, 0.44);
        border: 1px solid rgba(41, 47, 56, 0.14);
        border-radius: 22px;
        padding: var(--space-card);
      }
      
      .gallery-head {
        display: grid;
        justify-items: center;
        align-items: center;
        text-align: center;
        gap: 14px;
      }

      .photo-gallery .gallery-head .section-head {
        margin-bottom: 0;
      }
      
      .photo-gallery-grid {
        margin-top: 10px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }
      
      .photo-card {
        background: var(--card-soft);
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 9px;
        box-shadow: var(--shadow-sm);
        margin: 0;
        text-align: center;
        transition:
          transform 180ms ease,
          box-shadow 180ms ease;
      }

      .photo-gallery:hover .photo-card,
      .photo-gallery:focus-within .photo-card {
        transition-duration: 320ms;
      }

      .photo-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }
      
      .photo-card img {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 10px;
        object-fit: cover;
        object-position: center 28%;
        cursor: zoom-in;
      }
      
      .photo-card figcaption {
        margin-top: 8px;
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--muted);
      }
      
      .faq {
        --section-accent: var(--accent-blue);
        --section-accent-rgb: var(--accent-blue-rgb);
        background: var(--bg);
      }

      .team .about-card,
      .services-shell,
      .process .container,
      .testimonials .container,
      .hours-card,
      .address-map-grid,
      .location-map-card,
      .photo-gallery .container,
      .faq .container {
        border-top-width: 3px;
        border-top-style: solid;
        border-top-color: var(--section-accent);
      }

      .faq .container {
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(41, 47, 56, 0.14);
        border-top: 3px solid var(--section-accent);
        border-radius: 22px;
        padding: var(--space-card);
      }
      
      .faq-grid {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        gap: 20px;
        align-items: start;
      }
      
      .faq-copy {
        max-width: 460px;
      }
      
      .faq-copy p {
        margin-top: 12px;
        color: var(--muted);
      }
      
      .faq-copy .btn {
        margin-top: 16px;
      }
      
      .faq-list {
        display: grid;
        gap: 10px;
      }
      
      .faq-list details {
        background: #fff;
        border: 1px solid rgba(41, 47, 56, 0.18);
        border-radius: 12px;
        padding: 13px 14px;
        transition: border-color 160ms ease, box-shadow 160ms ease;
      }

      .faq-list details[open] {
        box-shadow: 0 0 0 1px transparent inset;
      }

      .faq-list details:nth-child(4n + 1)[open] {
        border-color: rgba(90, 157, 22, 0.5);
        box-shadow: 0 0 0 1px rgba(90, 157, 22, 0.2) inset;
      }

      .faq-list details:nth-child(4n + 2)[open] {
        border-color: rgba(75, 130, 170, 0.5);
        box-shadow: 0 0 0 1px rgba(75, 130, 170, 0.2) inset;
      }

      .faq-list details:nth-child(4n + 3)[open] {
        border-color: rgba(199, 137, 140, 0.5);
        box-shadow: 0 0 0 1px rgba(199, 137, 140, 0.2) inset;
      }

      .faq-list details:nth-child(4n + 4)[open] {
        border-color: rgba(142, 113, 152, 0.5);
        box-shadow: 0 0 0 1px rgba(142, 113, 152, 0.2) inset;
      }
      
      .faq-list summary {
        list-style: none;
        cursor: pointer;
        position: relative;
        padding-right: 18px;
        font-size: 0.92rem;
        font-weight: 600;
      }

      .faq-list summary:focus-visible {
        outline: 2px solid rgba(75, 130, 170, 0.55);
        outline-offset: 3px;
        border-radius: 6px;
      }
      
      .faq-list summary::-webkit-details-marker {
        display: none;
      }
      
      .faq-list summary::after {
        content: "+";
        position: absolute;
        right: 0;
        top: 0;
        font-weight: 700;
        color: var(--neutral-800);
      }
      
      .faq-list details[open] summary::after {
        content: "-";
      }
      
      .faq-list p {
        margin-top: 8px;
        color: var(--muted);
        font-size: 0.89rem;
      }
      
      .site-footer {
        background: var(--bg);
        box-shadow: inset 0 0 0 1px rgba(41, 47, 56, 0.12);
        border-top: 1px solid rgba(41, 47, 56, 0.16);
        padding: 40px 0 24px;
      }
      
      .footer-top {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
        gap: 20px;
      }
      
      .footer-col {
        display: grid;
        align-content: start;
        gap: 6px;
      }
      
      .footer-col h3,
      .footer-contact h3 {
        font-size: 1rem;
        margin-bottom: 4px;
      }
      
      .footer-col a,
      .footer-col span,
      .footer-contact a,
      .footer-contact span {
        color: var(--neutral-800);
        text-decoration: none;
        font-size: 0.9rem;
      }
      
      .footer-col a:hover,
      .footer-col a:focus-visible,
      .footer-contact a:hover,
      .footer-contact a:focus-visible {
        text-decoration: underline;
        text-underline-offset: 2px;
      }
      
      .footer-contact {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: var(--shadow-sm);
        padding: 15px;
        display: grid;
        gap: 6px;
      }

      .footer-socials {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(41, 47, 56, 0.12);
        display: grid;
        gap: 6px;
      }

      .footer-social-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        font-weight: 600;
      }

      .footer-social-link svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        fill: currentColor;
      }
      
      .footer-bottom {
        margin-top: 24px;
        padding-top: 15px;
        border-top: 1px solid rgba(41, 47, 56, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .footer-legal {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      
      .footer-brand {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        font-weight: 600;
      }
      
      .footer-brand img {
        width: 20px;
        height: 20px;
        border-radius: 999px;
      }
      
      .footer-bottom p,
      .footer-bottom a {
        color: var(--neutral-800);
        font-size: 0.86rem;
      }

      .section .btn--ghost.btn--small {
        background: rgba(var(--section-accent-rgb), 0.14);
        border-color: rgba(var(--section-accent-rgb), 0.42);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
        color: var(--neutral-900);
      }

      .section .btn--ghost.btn--small:hover,
      .section .btn--ghost.btn--small:focus-visible {
        background: rgba(var(--section-accent-rgb), 0.22);
        border-color: rgba(var(--section-accent-rgb), 0.55);
      }

      .section .btn.btn--primary,
      .section .btn.btn--primary:visited {
        --btn-paw-filter: brightness(0) saturate(100%) invert(100%);
        background: var(--section-accent);
        border-color: var(--section-accent);
        color: #fff;
        -webkit-text-fill-color: #fff;
        box-shadow: 0 8px 18px rgba(var(--section-accent-rgb), 0.28);
      }

      .section .btn.btn--primary:hover,
      .section .btn.btn--primary:focus-visible,
      .section .btn.btn--primary:active {
        background: var(--section-accent);
        border-color: var(--section-accent);
        color: #fff;
        -webkit-text-fill-color: #fff;
        filter: brightness(0.94);
      }

      .services .btn--flat-blue {
        background: rgba(75, 130, 170, 0.18);
        border-color: rgba(75, 130, 170, 0.35);
        color: var(--neutral-900);
      }

      .services .btn--flat-yellow {
        background: rgba(90, 157, 22, 0.2);
        border-color: rgba(90, 157, 22, 0.5);
        color: var(--neutral-900);
      }

      .services .btn--flat-purple {
        background: rgba(142, 113, 152, 0.24);
        border-color: rgba(142, 113, 152, 0.46);
        color: var(--neutral-900);
      }

      .services .btn--flat-coral {
        background: rgba(193, 124, 129, 0.32);
        border-color: rgba(193, 124, 129, 0.5);
        color: var(--neutral-900);
      }

      .services .btn--flat-blue:hover,
      .services .btn--flat-blue:focus-visible {
        background: rgba(75, 130, 170, 0.26);
        border-color: rgba(75, 130, 170, 0.52);
      }

      .services .btn--flat-yellow:hover,
      .services .btn--flat-yellow:focus-visible {
        background: rgba(90, 157, 22, 0.28);
        border-color: rgba(90, 157, 22, 0.58);
      }

      .services .btn--flat-purple:hover,
      .services .btn--flat-purple:focus-visible {
        background: rgba(142, 113, 152, 0.32);
        border-color: rgba(142, 113, 152, 0.54);
      }

      .services .btn--flat-coral:hover,
      .services .btn--flat-coral:focus-visible {
        background: rgba(193, 124, 129, 0.4);
        border-color: rgba(193, 124, 129, 0.6);
      }

      @media (max-width: 1240px) {
        .side-polaroids {
          display: none;
        }
      }
      
      @media (max-width: 1080px) {
        .hero .container {
          width: min(1140px, calc(100% - 2.2rem));
        }

        .hero-grid,
        .faq-grid {
          grid-template-columns: 1fr;
        }
      
        .hero-copy,
        .faq-copy {
          max-width: none;
        }
      
        .hero-copy {
          text-align: center;
          justify-self: center;
          padding-bottom: 34px;
        }

        .hero-brand-logo {
          margin: 0 auto 10px;
          width: clamp(186px, 54vw, 292px);
          max-height: 201px;
          transform: none;
        }
      
        .hero-copy > p:not(.top-label):not(.hero-helper),
        .hero-helper {
          margin-inline: auto;
        }
      
        .hero-actions {
          display: flex;
          justify-content: center;
        }
      
        .hero-art {
          justify-self: center;
          width: min(560px, 100%);
          transform: rotate(-0.65deg);
          margin-right: 0;
        }
      
        .services-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .services-polaroid-frame {
          width: clamp(62px, 11vw, 82px);
          padding: 5px 5px 12px;
        }

	        .services-polaroid-frame--top-left {
	          top: 16px;
	          left: clamp(-52px, -5vw, -28px);
	        }

	        .services-polaroid-frame--top-right {
	          top: 16px;
	          right: clamp(-52px, -5vw, -28px);
	        }

        .services-polaroid-frame--middle-left,
        .services-polaroid-frame--middle-right {
          display: none;
        }

	        .services-polaroid-frame--bottom-left {
	          bottom: 16px;
	          left: clamp(-52px, -5vw, -28px);
	        }

	        .services-polaroid-frame--bottom-right {
	          bottom: 16px;
	          right: clamp(-52px, -5vw, -28px);
	        }

        .testimonials-head-layout {
          grid-template-columns: 1fr;
          gap: 0;
        }

        .testimonial-inset-photo {
          display: none;
        }

        .process-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .photo-gallery-grid,
        .footer-top {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      
        .address-map-grid,
        .location-map-card,
        .testimonials .container,
        .photo-gallery .container,
        .faq .container {
          padding: var(--space-card-tablet);
        }

        .hours-shell {
          padding: 0;
        }

        .address-map-grid {
          width: 100%;
        }
      
        .map-wrap,
        .map-wrap iframe {
          min-height: 320px;
        }

        .hours-location-layout {
          grid-template-columns: 1fr;
          grid-template-areas:
            "hours"
            "address"
            "map";
          gap: 14px;
          width: min(760px, 100%);
        }

        .hours-location-layout .hours-card {
          margin-top: 46px;
        }

        .hours-location-layout .address-map-grid {
          margin-top: 46px;
        }

        .hours-hanger--address {
          display: block;
        }
      
        .testimonial-card {
          flex-basis: calc((100% - 14px) / 2);
        }
      }

      @media (min-width: 861px) and (max-width: 1080px) {
        .hero-copy {
          text-align: center;
          justify-self: center;
        }

        .hero-brand-logo {
          margin: 0 auto 10px;
          transform: none;
        }

        .hero-copy > p:not(.top-label):not(.hero-helper),
        .hero-helper {
          margin-inline: auto;
        }

        .hero-actions {
          justify-content: center;
        }

        .hero-break-tablet {
          display: block;
        }
      }

      @media (min-width: 861px) and (max-width: 1080px) and (any-pointer: coarse) {
        .hero-copy {
          text-align: center;
          justify-self: center;
        }

        .hero-brand-logo {
          margin: 0 auto 10px;
          transform: none;
        }

        .hero-copy > p:not(.top-label):not(.hero-helper),
        .hero-helper {
          margin-inline: auto;
        }

        .hero-actions {
          justify-content: center;
        }
      }
      
      @media (max-width: 860px) {
        .site-header {
          position: sticky;
          top: 0;
          z-index: 85;
          box-shadow: 0 9px 20px rgba(3, 4, 8, 0.1);
        }
      
        .nav-shell {
          position: relative;
          grid-template-columns: 1fr auto 1fr;
          gap: 8px;
          min-height: 68px;
        }
      
        .brand {
          grid-column: 2;
          grid-row: 1;
          justify-self: center;
          gap: 0;
          z-index: 3;
        }

        .brand-logo {
          width: clamp(148px, 44vw, 220px);
          max-height: 56px;
        }
      
        .nav-links {
          display: none;
        }

        .nav-actions {
          grid-column: 1 / -1;
          grid-row: 1;
          width: 100%;
          display: grid;
          grid-template-columns: auto 1fr auto;
          align-items: center;
          gap: 8px;
          position: relative;
          z-index: 2;
        }

        .nav-actions .btn--call {
          display: inline-flex;
          grid-column: 1;
          justify-self: start;
          padding: 8px 8px;
          border-radius: 10px;
          font-size: 0.69rem;
          letter-spacing: 0.02em;
          line-height: 1;
          white-space: nowrap;
        }

        .nav-actions .btn--call::after {
          width: 16px;
          height: 16px;
          flex: 0 0 16px;
        }

        .mobile-menu {
          display: block;
          grid-column: 3;
          justify-self: end;
          position: static;
        }

        .service-area-chips {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          width: min(100%, 460px);
        }

        .mobile-menu summary {
          min-height: 36px;
          padding: 8px 10px;
          border-radius: 10px;
          font-size: 0.72rem;
          letter-spacing: 0.02em;
          background: rgba(255, 255, 255, 0.9);
        }

        .mobile-menu__icon {
          width: 13px;
          height: 13px;
          flex-basis: 13px;
        }

        .mobile-menu__panel {
          top: calc(100% + 8px);
          left: 0;
          right: 0;
          width: 100%;
          min-width: 0;
          padding: 10px;
          gap: 6px;
          border-radius: 12px;
          background: #eae9db;
          opacity: 1;
          border-color: rgba(41, 47, 56, 0.2);
          box-shadow: 0 14px 24px rgba(3, 4, 8, 0.14);
        }
      
        .section {
          padding: var(--space-section-mobile) 0;
        }

        .hero {
          padding-top: 40px;
          padding-bottom: 12px;
        }
      
        .hero-art {
          width: min(460px, 100%);
          margin-right: 0;
          padding: 10px 10px 16px;
          border-radius: 10px;
          transform: none;
        }
      
        .hero-art img {
          height: auto;
          aspect-ratio: 1 / 1;
          border-radius: 3px;
        }

        .hero-art-caption {
          margin-top: 10px;
          padding-top: 8px;
        }

        .hero-art-trust {
          gap: 4px 10px;
        }

        .hero-art-trust li {
          white-space: normal;
          text-align: center;
          font-size: clamp(1.02rem, 5vw, 1.3rem);
        }

        .hero-art-trust li:nth-child(1),
        .hero-art-trust li:nth-child(2),
        .hero-art-trust li:nth-child(3) {
          transform: none;
        }
      
        .team-strip {
          margin-left: -0.5rem;
          margin-right: -0.5rem;
        }
      
        .team .section-head {
          margin-bottom: 16px;
          gap: 9px;
        }

        .team {
          padding-top: 18px;
        }
      
        .team .about-card {
          padding: 16px 14px 14px;
          border-radius: 14px;
        }
      
        .services-grid,
        .process-grid,
        .photo-gallery-grid,
        .footer-top {
          grid-template-columns: 1fr;
        }

        .services-shell,
        .address-map-grid,
        .location-map-card,
        .testimonials .container,
        .photo-gallery .container,
        .faq .container {
          border-radius: 16px;
          padding: var(--space-card-mobile-y) var(--space-card-mobile-x);
        }

        .address-map-grid {
          width: 100%;
        }

        .address-card h2 {
          max-width: 20ch;
        }

        .hours-shell {
          padding: 0;
        }

        .hours-card {
          margin-top: 46px;
          border-radius: 24px;
          padding: 16px 12px 12px;
        }

        .address-map-grid {
          margin-top: 46px;
          border-radius: 24px;
          padding: 16px 12px 12px;
        }

        .hours-hanger {
          top: -54px;
          height: 72px;
        }

        .hours-hanger-pin {
          width: 17px;
          height: 17px;
        }

        .hours-hanger-pin--left,
        .hours-hanger-pin--right {
          top: 50px;
        }

        .hours-hanger--address {
          top: -54px;
        }
      
        .services-polaroid-frame--middle-left,
        .services-polaroid-frame--middle-right {
          display: none;
        }

        .testimonials-head-layout {
          grid-template-columns: 1fr;
          margin-bottom: 0;
        }
      
        .footer-bottom {
          align-items: flex-start;
          flex-direction: column;
        }
      }

      @media (min-width: 1081px) {
        .hero-brand-logo {
          max-height: 248px;
          transform: translateX(-59px);
        }
      }
      
      @media (max-width: 620px) {
        .address-map-grid {
          grid-template-columns: 1fr;
        }

        .service-area-chips {
          grid-template-columns: 1fr;
          width: min(100%, 320px);
        }

        .services-polaroids {
          display: none;
        }

        .hours-shell {
          padding-bottom: 0;
        }

        .hours-list {
          width: fit-content;
          max-width: 100%;
        }

        .hours-card {
          margin-top: 40px;
          border-radius: 20px;
        }

        .address-map-grid {
          margin-top: 40px;
          border-radius: 20px;
        }

        .hours-hanger {
          top: -48px;
          height: 64px;
        }

        .hours-hanger-pin {
          width: 15px;
          height: 15px;
        }

        .hours-hanger-pin--left,
        .hours-hanger-pin--right {
          top: 44px;
        }

        .hours-hanger--address {
          top: -48px;
          height: 64px;
        }

        .container {
          width: min(1140px, calc(100% - 1rem));
        }
      
        .hero-actions .btn,
        .center-cta .btn,
        .faq-copy .btn,
        .address-actions .btn {
          width: 100%;
        }
      
        .hero .hero-actions .btn {
          width: auto;
          padding: 8px 12px;
          font-size: 0.78rem;
        }
      
        .hours-list li {
          grid-template-columns: max-content max-content;
          justify-content: center;
          align-items: center;
          column-gap: 10px;
          row-gap: 0;
          padding: 8px 10px;
          width: fit-content;
          max-width: 100%;
        }

        .hours-list strong {
          justify-self: auto;
          text-align: center;
        }
      
        .hero-copy > p:not(.top-label):not(.hero-helper) {
          font-size: 0.98rem;
        }

        .hero-copy .hero-helper {
          font-size: 0.82rem;
        }

        .hero-art-trust {
          display: grid;
          gap: 3px;
        }

        .hero-art-trust li {
          justify-content: center;
          font-size: clamp(1rem, 5.8vw, 1.22rem);
        }
      
        .team-card {
          width: 300px;
        }
      
        .team-card img {
          height: 270px;
        }

        .testimonial-card {
          flex-basis: 100%;
        }

        .testimonial-nav {
          width: 32px;
          height: 32px;
          font-size: 0.96rem;
        }
      }
      
      @media (prefers-reduced-motion: reduce) {
        * {
          animation: none !important;
          transition: none !important;
          scroll-behavior: auto !important;
        }
      }

      /* WordPress fallback templates (pages/posts/archives). */
      .wp-content-card {
        width: min(920px, 100%);
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(41, 47, 56, 0.14);
        border-radius: 20px;
        box-shadow: 0 14px 30px rgba(3, 4, 8, 0.09);
        padding: clamp(18px, 3vw, 28px);
      }

      .wp-entry-header {
        margin-bottom: 14px;
      }

      .wp-entry-title {
        margin: 0;
        font-family: "Baloo 2", sans-serif;
        font-size: clamp(1.6rem, 3.4vw, 2.4rem);
        line-height: 1.1;
      }

      .wp-entry-title a {
        text-decoration: none;
        border-bottom: 1px solid transparent;
      }

      .wp-entry-title a:hover,
      .wp-entry-title a:focus-visible {
        border-bottom-color: rgba(41, 47, 56, 0.35);
      }

      .wp-entry-content,
      .wp-entry-excerpt {
        color: var(--muted);
        font-size: 1rem;
        line-height: 1.7;
      }

      .wp-entry-content > * + * {
        margin-top: 12px;
      }

      .wp-entry-content a {
        color: var(--neutral-900);
        text-underline-offset: 3px;
        font-weight: 700;
      }

      .wp-post-grid {
        display: grid;
        gap: 14px;
      }

      .wp-post-card {
        padding: 14px 16px;
        border: 1px solid rgba(41, 47, 56, 0.14);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.7);
      }

      .wp-pagination {
        margin-top: 18px;
      }