/* Header border removed for Aesop-style transparent navbar */

/* Floating label input effect - reusable for all forms */
.floating-label-group {
  position: relative;
  margin-bottom: 1.5rem;
}
.floating-label-group input.form-control,
.floating-label-group textarea.form-control {
  padding: 1.25rem 1rem 0.5rem 1rem;
  font-size: 1.2rem;
  background: transparent;
  border: 2px solid #232323;
  border-radius: 0;
  box-shadow: none;
  color: #232323;
}
.floating-label-group label {
  position: absolute;
  top: 1.1rem;
  left: 1rem;
  color: #888;
  font-size: 1.2rem;
  font-family: 'Suisse Int\'l', Helvetica, Arial, sans-serif;
  pointer-events: none;
  background: transparent;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
  z-index: 2;
}
.floating-label-group input.form-control:focus + label,
.floating-label-group input.form-control:not(:placeholder-shown) + label,
.floating-label-group textarea.form-control:focus + label,
.floating-label-group textarea.form-control:not(:placeholder-shown) + label {
  top: 0.2rem;
  left: 1rem;
  font-size: 0.95rem;
  color: #232323;
  background: #FBF9ED;
  padding: 0 0.25rem;
}
.floating-label-group input.form-control:focus,
.floating-label-group textarea.form-control:focus {
  outline: none;
  border-color: #232323;
  background: #FBF9ED;
}
.floating-label-group select.form-control {
  padding: 1.25rem 1rem 0.5rem 1rem;
  font-size: 1.2rem;
  background: transparent;
  border: 2px solid #232323;
  border-radius: 0;
  box-shadow: none;
  color: #232323;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.floating-label-group select.form-control:focus {
  outline: none;
  border-color: #232323;
  background: #FBF9ED;
}
.floating-label-group select.form-control:focus + label,
.floating-label-group select.form-control:not([value=""]) + label,
.floating-label-group select.form-control option:not([value=""]):checked + label {
  top: 0.2rem;
  left: 1rem;
  font-size: 0.95rem;
  color: #232323;
  background: #FBF9ED;
  padding: 0 0.25rem;
}

/* --- Mobile Sidebar Navigation --- */
.sidebar-overlay {
  position: fixed;
  top: 0px; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1140;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar at top, full height */
@media (max-width: 768px) {
  .annoucement-marquee {
    position: relative;
    z-index: 1050;
  }
  header {
    z-index: 1050;
  }
  .mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 75vw;
    max-width: 320px;
    height: 100vh;
    background: #252527;
    z-index: 1150;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    padding-top: 5rem;
    padding-left: 2.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
  }
  .mobile-sidebar.open {
    transform: translateX(0);
  }
}

/* Remove old sticky positioning for .mobile-sidebar outside mobile */
@media (min-width: 769px) {
  .mobile-sidebar {
    position: static;
    top: auto;
    height: auto;
    transform: none;
    display: none !important;
  }
}
.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.sidebar-link {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-family: 'Suisse Int\'l', Helvetica, Arial, sans-serif;
  transition: color 0.2s;
  /* The tap target was the bare text line box — 21px tall, measured, which is what the
     client reported. With no padding and no height the finger has to land on the glyphs
     themselves. 44px is the accepted minimum (WCAG 2.5.5 / the iOS and Android human
     interface guidelines all land on 44-48px). display:flex rather than block so the
     label stays vertically centred in the taller box. */
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0;
}
.sidebar-link:hover {
  color: #ffffff;
}
.sidebar-close-btn {
  background: none;
  border: none;
  font-size: 2rem;
  color: #232323;
  align-self: flex-end;
  margin-bottom: 1.5rem;
  cursor: pointer;
}

/* Show hamburger only on <=768px */
.custom-hamburger {
  display: block !important;
}
@media (min-width: 769px) {
  .custom-hamburger {
    display: none !important;
  }
  .mobile-sidebar, .sidebar-overlay {
    display: none !important;
  }
}

.annoucement-marquee {
  background-color: #333333;
  padding: 8px 0;
  font-size: 14px;
  color: #fff;
}

#menu-toggle .icon-close {
  display: none;
}
#menu-toggle.open .icon-hamburger {
  display: none;
}
#menu-toggle.open .icon-close {
  display: inline;
}

.hamburger-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
}
.hamburger-toggle:focus,
.hamburger-toggle:active,
.hamburger-toggle:hover {
  outline: none;
  background-color: transparent;
  background: transparent;
  border: none;
}

.hamburger {
  display: inline-block;
  width: 24px;
  height: 20px;
  position: relative;
  vertical-align: middle;
  transition: all 0.3s;
}
.hamburger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #232323;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 9px;
}
.hamburger span:nth-child(3) {
  top: 18px;
}
#menu-toggle.open .hamburger span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}
#menu-toggle.open .hamburger span:nth-child(2) {
  opacity: 0;
}
#menu-toggle.open .hamburger span:nth-child(3) {
  top: 9px;
  transform: rotate(-45deg);
}

.form-control {
  border-radius: 0px;
  border:1px solid #333;
  color: #232323;
  background: transparent;
  transform: all ease 0.2s;
}
.form-select {
   border-radius: 0px;
  border:1px solid #333;
  color: #232323;
  padding:.375rem 2.25rem .375rem .75rem;
  background-color: transparent;
}
.form-control:focus {
  background: transparent;
  border-color: #333;
  box-shadow: 1px 2px 3px 1px rgba(0,0,0,.25);
}
.btn-primary {
  border-radius: 0px;
  border:1px solid #333;
  background: #232323;
  color: #fff;
  padding: 10px 20px;
  transition: all ease 0.3s;
}
.btn-primary:hover {
  opacity: 0.8;
  background: #232323;
}

/* =========================
   MEMBER DASHBOARD — AESOP STYLE
   ========================= */

/* Welcome header */
.dash-welcome {
    background-color: #FFFEF5;
    padding: 5rem 0 2rem;
}

.dash-welcome-heading {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #252525;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.dash-welcome-sub {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 0;
}

/* Quick Stats row */
.dash-stats {
    background-color: #FFFEF5;
    padding: 2rem 0 3rem;
}

.dash-stats-row {
    display: flex;
    gap: 0;
    border-top: 1px solid #e8e6df;
    border-bottom: 1px solid #e8e6df;
}

.dash-stat-item {
    flex: 1;
    text-align: center;
    padding: 2rem 1rem;
    border-right: 1px solid #e8e6df;
}

.dash-stat-item:last-child {
    border-right: none;
}

.dash-stat-num {
    display: block;
    font-family: 'Zapf Humanist 601', serif;
    font-size: 2.25rem;
    font-weight: 400;
    color: #252525;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.dash-stat-label {
    display: block;
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Dashboard body */
.dash-body {
    background-color: #FFFEF5;
    padding: 3rem 0 5rem;
}

.dash-columns {
    display: flex;
    gap: 4rem;
}

.dash-main {
    flex: 0 0 62%;
    min-width: 0;
}

.dash-sidebar {
    flex: 1;
    min-width: 0;
}

/* Dashboard sections */
.dash-section {
    margin-bottom: 3.5rem;
}

.dash-section-label {
    display: block;
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #252525;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}

/* List items */
.dash-list {
    border-top: 1px solid #e8e6df;
}

.dash-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 0;
    border-bottom: 1px solid #e8e6df;
}

.dash-list-item--compact {
    padding: 1rem 0;
}

.dash-list-title {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #252525;
    margin-bottom: 0.25rem;
}

.dash-list-meta {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.15rem;
    line-height: 1.5;
}

.dash-link {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.85rem;
    color: #252525;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.dash-link:hover {
    opacity: 0.6;
    color: #252525;
    text-decoration: none;
}

/* Section footer with CTA links */
.dash-section-footer {
    padding-top: 1.5rem;
}

/* Empty state */
.dash-empty {
    padding: 3rem 0;
    text-align: center;
}

.dash-empty p {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 1.5rem;
}

/* Pets grid */
.dash-pets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.dash-pet {
    text-align: center;
    padding: 1.5rem 1rem;
}

.dash-pet-avatar {
    width: 56px;
    height: 56px;
    border: 1px solid #e8e6df;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    font-family: 'Zapf Humanist 601', serif;
    font-size: 1.25rem;
    color: #252525;
    background-color: #FBF9ED;
}

.dash-pet-name {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #252525;
    margin-bottom: 0.15rem;
}

.dash-pet-breed {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0;
}

/* Quick Actions links */
.dash-actions {
    border-top: 1px solid #e8e6df;
}

.dash-action-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.9rem;
    color: #252525;
    text-decoration: none;
    padding: 1rem 0;
    border-bottom: 1px solid #e8e6df;
    transition: opacity 0.2s ease;
}

.dash-action-link:hover {
    opacity: 0.6;
    color: #252525;
    text-decoration: none;
}

.dash-action-link .cta-arrow {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.dash-action-link:hover .cta-arrow {
    transform: translateX(4px);
}

/* Branch info */
.dash-branch {
    padding: 1rem 0;
    border-bottom: 1px solid #e8e6df;
}

.dash-branch:first-of-type {
    border-top: 1px solid #e8e6df;
}

.dash-branch:last-of-type {
    border-bottom: none;
}

/* Button overrides for dashboard context */
.btn-primary-custom {
    background: #252525;
    border: 1px solid #252525;
    color: white;
    font-family: 'Suisse Int\'l', sans-serif;
    font-weight: 400;
    border-radius: 0;
    padding: 1rem 2rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
}

.btn-primary-custom:hover {
    background: #000;
    color: #fff;
}

.btn-outline-custom {
    background: transparent;
    border: 1px solid #252525;
    color: #252525;
    font-family: 'Suisse Int\'l', sans-serif;
    font-weight: 400;
    border-radius: 0;
    padding: 1rem 2rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
}

.btn-outline-custom:hover {
    background: #252525;
    color: white;
    border-color: #252525;
}

.btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
}

/* Responsive — Member Dashboard */
@media (max-width: 991px) {
    .dash-columns {
        flex-direction: column;
        gap: 2rem;
    }
    .dash-main {
        flex: none;
    }
    .dash-welcome-heading {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .dash-stats-row {
        flex-wrap: wrap;
    }
    .dash-stat-item {
        flex: 0 0 50%;
        border-right: none;
    }
    .dash-stat-item:nth-child(1),
    .dash-stat-item:nth-child(2) {
        border-bottom: 1px solid #e8e6df;
    }
    .dash-stat-item:nth-child(odd) {
        border-right: 1px solid #e8e6df;
    }
    .dash-pets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-welcome {
        padding: 3rem 0 1rem;
    }
    .dash-welcome-heading {
        font-size: 1.75rem;
    }
}

/* =========================
   FULL-WIDTH DROPDOWN MENU
   ========================= */

.dropdown-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Services dropdown: position relative to <header> (full width) not the narrow button */
.navbar-main-links > .dropdown-container {
    position: static;
}

.dropdown-toggle-btn {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: all 0.3s ease;
    padding: 0 !important;
    outline: none !important;
    text-decoration: none !important;
    position: relative;
}

.dropdown-toggle-btn:hover {
    text-decoration: underline !important;
    background: none !important;
}

.dropdown-toggle-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.dropdown-toggle-btn.active {
    text-decoration: underline !important;
}

/* Dropdown panel - full width, below navbar */
.fullwidth-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: #FFFEF5;
    border-bottom: 1px solid #e8e6df;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 1090;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 2.5rem 0 3rem;
}

.fullwidth-dropdown.show {
    opacity: 1;
    visibility: visible;
}

/* Inner container for dropdown columns */
.dropdown-columns {
    display: flex;
    gap: 3rem;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem;
}

.dropdown-col {
    flex: 1;
    min-width: 0;
}

/* Account dropdown - small right-aligned panel, not full width */
.account-dropdown {
    width: auto;
    min-width: 200px;
    left: auto;
    right: 0;
    transform: none;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e8e6df;
    border-radius: 2px;
}

.account-dropdown .dropdown-menu-list {
    text-align: left;
}

.account-dropdown .dropdown-link {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e8e6df;
}

.account-dropdown .dropdown-link:last-child {
    border-bottom: none;
}

.dropdown-heading {
    font-family: 'Suisse Int\'l', sans-serif;
    color: #252525;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    letter-spacing: 0.02em;
}

.dropdown-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-menu-list li {
    margin-bottom: 0.15rem;
}

.dropdown-link {
    font-family: 'Suisse Int\'l', sans-serif;
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    display: block;
    padding: 0.3rem 0;
    transition: color 0.2s ease;
    line-height: 1.5;
}

.dropdown-link:hover {
    color: #252525;
    text-decoration: none;
}

/* Mobile dropdown in sidebar */
.mobile-dropdown {
    width: 100%;
}

.mobile-dropdown-toggle {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0;
    position: relative;
}

.mobile-dropdown-toggle.active {
    text-decoration: underline;
}

.mobile-dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding-left: 1rem;
    margin-top: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.mobile-dropdown-content.show {
    max-height: 300px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.mobile-dropdown-link {
    /* 33px before this — under the 44px minimum for the same reason as .sidebar-link
       above, just less badly. */
    display: flex;
    align-items: center;
    min-height: 44px;
    font-family: 'Suisse Int\'l', sans-serif;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    padding: 0.4rem 0;
    transition: color 0.2s ease;
}

.mobile-dropdown-link:hover {
    color: #ffffff;
    text-decoration: none;
}

.mobile-dropdown-link:last-child {
    border-bottom: none;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .fullwidth-dropdown {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-dropdown {
        display: none !important;
    }
}

/* Process Section Styles */
.process-step {
    padding: 2rem 1rem;
    text-align: center;
}

.process-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #D4B04A;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem auto;
    font-family: 'Zapf Humanist 601', sans-serif;
}

.process-step h5 {
    font-family: 'Zapf Humanist 601', sans-serif;
    color: #252525;
    font-weight: bold;
    margin-bottom: 1rem;
}

.process-step p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Hero Section Styles - 8:4 Split with Gradient Transition */
.hero-section-split {
    height: 400px;
    width: 100%;
    display: flex;
    align-items: center;
}

.hero-content-section {
    background-color: #252527;
    height: 400px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-content-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 2rem 3rem;
    position: relative;
    z-index: 2;
}

.hero-text-content {
    max-width: 600px;
    margin-left: auto;
    margin-right: 0;
    text-align: left;
}

.hero-gradient-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(37, 37, 39, 0.8) 30%, rgba(37, 37, 39, 0.95) 70%, #252527 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-title {
    font-family: 'Zapf Humanist 601', sans-serif;
    font-size: 3.5rem;
    font-weight: bold;
    color: #FFFFFF;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-description {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 1.1rem;
    color: #E0E0E0;
    line-height: 1.6;
    margin-bottom: 0;
}

.hero-image-section {
    height: 400px;
    position: relative;
    overflow: hidden;
}

.hero-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .hero-section-split {
        height: 350px;
    }

    .hero-content-section,
    .hero-image-section {
        height: 350px;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-content-inner {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-section-split {
        height: auto;
    }

    .hero-content-section,
    .hero-image-section {
        height: 300px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .hero-text-content {
        margin-left: 0;
        text-align: center;
    }

    .hero-content-inner {
        padding: 1.5rem;
        justify-content: center;
    }

    .hero-gradient-overlay {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-content-section,
    .hero-image-section {
        height: 250px;
    }

    .hero-title {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .hero-description {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .hero-content-inner {
        padding: 1rem;
    }
}

/* Contact Page Specific Styles */

/* Store Location Cards */
.store-location-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.store-location-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.store-location-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.store-location-content {
    padding: 1.5rem;
    text-align: center;
}

.store-location-content h5 {
    font-family: 'Zapf Humanist 601', sans-serif;
    color: #252525;
    margin-bottom: 1rem;
}

.store-location-content p {
    color: #666;
    line-height: 1.5;
}

/* Map Section */
.map-section {
    margin: 3rem 0;
}

.map-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Contact Form Styling */
.contact-form-wrapper {
    background: #f8f9fa;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.contact-form .form-control {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form .form-control:focus {
    border-color: #D4B04A;
    box-shadow: 0 0 0 0.2rem rgba(212, 176, 74, 0.25);
}

.contact-form textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.contact-form .form-label {
    color: #252525;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.contact-form .form-check {
    padding: 1rem;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.contact-form .form-check-input:checked {
    background-color: #D4B04A;
    border-color: #D4B04A;
}

/* Support Icons */
.support-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: #f8f9fa;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.support-icon:hover {
    background: #D4B04A;
}

.support-icon:hover img {
    filter: brightness(0) invert(1);
}

/* Store Hours Styling */
.store-hours {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid #D4B04A;
}

.hours-list {
    font-size: 0.95rem;
}

/* FAQ Accordion Styling */
.ef-section .accordion-item {
    border: 1px solid #e9ecef;
    border-radius: 10px !important;
    overflow: hidden;
}

.ef-section .accordion-button {
    background: #fff;
    border: none;
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    color: #252525;
    font-size: 1rem;
}

.ef-section .accordion-button:not(.collapsed) {
    background: #D4B04A;
    color: #fff;
    box-shadow: none;
}

.ef-section .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23252525'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.ef-section .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.ef-section .accordion-body {
    padding: 1.5rem;
    background: #f8f9fa;
    color: #666;
    line-height: 1.6;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .contact-form-wrapper {
        padding: 1.5rem;
    }

    .store-location-img {
        height: 150px;
    }

    .store-location-content {
        padding: 1rem;
    }

    .support-icon {
        width: 60px;
        height: 60px;
    }

    .support-icon img {
        width: 40px;
    }

    .store-hours {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .contact-form-wrapper {
        padding: 1rem;
    }

    .ef-section .accordion-button {
        padding: 1rem;
        font-size: 0.9rem;
    }

    .ef-section .accordion-body {
        padding: 1rem;
    }
}

/* Contact Page - New Design */
.support-wrapper {
    background: #f8f9fa;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.support-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.contact-details {
    text-align: center;
}

.contact-details p {
    font-size: 0.95rem;
}

.contact-details i {
    font-size: 1rem;
}

.map-container h5 {
    font-family: 'Zapf Humanist 601', sans-serif;
    color: #252525;
}

.contact-form-wrapper-new {
    background: #fff;
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 6px 30px rgba(0,0,0,0.08);
}

.contact-form-wrapper-new .form-control {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-wrapper-new .form-control:focus {
    border-color: #D4B04A;
    box-shadow: 0 0 0 0.2rem rgba(212, 176, 74, 0.25);
    background-color: #fff;
}

.contact-form-wrapper-new textarea.form-control {
    min-height: 140px;
    resize: vertical;
}

.faq-category-title {
    font-family: 'Zapf Humanist 601', sans-serif;
    color: #252525;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

/* CLEAN HERO BANNER - Matching Design */
.hero-banner-clean {
    min-height: 60vh;
    position: relative;
    display: flex;
}

.hero-background-dark {
    background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
    width: 100%;
    height: 100%;
    padding: 4rem 0;
}

/* Text Content */
.hero-text-content-clean {
    padding-right: 3rem;
}

.hero-title-clean {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-description-clean {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Hero Image */
.hero-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
}

.hero-main-image {
    max-width: 100%;
    max-height: 400px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Responsive Design */
@media (max-width: 1200px) {
    .hero-title-clean {
        font-size: 3rem;
    }

    .hero-description-clean {
        font-size: 1rem;
    }

    .hero-text-content-clean {
        padding-right: 2rem;
    }
}

@media (max-width: 992px) {
    .hero-banner-clean {
        min-height: 50vh;
        text-align: center;
    }

    .hero-title-clean {
        font-size: 2.5rem;
    }

    .hero-text-content-clean {
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .hero-image-container {
        padding: 1rem;
    }
}

@media (max-width: 768px) {
    .hero-background-dark {
        padding: 3rem 0;
    }

    .hero-title-clean {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    .hero-description-clean {
        font-size: 0.95rem;
    }

    .hero-main-image {
        max-height: 300px;
    }
}

@media (max-width: 576px) {
    .hero-banner-clean {
        min-height: 45vh;
    }

    .hero-title-clean {
        font-size: 1.8rem;
    }

    .hero-description-clean {
        font-size: 0.9rem;
    }

    .hero-main-image {
        max-height: 250px;
    }

    .hero-image-container {
        padding: 1rem;
    }
}

/* Customer Support Contact Buttons */
.customer-support-buttons {
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.support-button-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.support-contact-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-decoration: none;
    color: #333;
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.support-contact-btn:hover {
    border-color: #232323;
    background: #f8f9fa;
    color: #232323;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.support-contact-btn i {
    font-size: 1.1rem;
    color: #666;
    min-width: 20px;
}

.support-contact-btn:hover i {
    color: #232323;
}

/* Character Counter */
.character-counter {
    font-size: 0.85rem;
}

#message-count {
    font-weight: 500;
    color: #333;
}

/* Responsive Design */
@media (max-width: 768px) {
    .support-contact-btn {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }

    .support-contact-btn i {
        font-size: 1rem;
    }
}

/* Contact Form Message Textarea Max Length */
.floating-label-group textarea {
    max-height: 200px;
    min-height: 120px;
    resize: vertical;
}


/* ========================================
   FORUM STYLES
   ======================================== */

.forum-notice {
    background: #FBF9ED;
    border: 1px solid #e8e6df;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}
.forum-notice-text {
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.forum-actions {
    margin-bottom: 2rem;
}

/* Forum List */
.forum-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #e8e6df;
    border: 1px solid #e8e6df;
}
.forum-card {
    background: #fff;
    padding: 1.5rem 2rem;
}
.forum-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.forum-pin {
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    background: #252525;
    padding: 0.15rem 0.5rem;
}
.forum-date {
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 0.8rem;
    color: #999;
}
.forum-card-title {
    font-family: 'Zapf Humanist 601', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #252525;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}
.forum-card-title a {
    color: #252525;
    text-decoration: none;
}
.forum-card-title a:hover {
    text-decoration: underline;
}
.forum-card-preview {
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
}
.forum-card-preview--blur {
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
}
.forum-card-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.forum-author,
.forum-replies {
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 0.8rem;
    color: #999;
}

/* Forum Detail */
.forum-back {
    margin-bottom: 2rem;
}
.forum-post {
    background: #fff;
    border: 1px solid #e8e6df;
    padding: 2rem;
    margin-bottom: 2rem;
}
.forum-post-content {
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    color: #252525;
    line-height: 1.8;
}

/* Forum Replies */
.forum-replies-section {
    margin-bottom: 2rem;
}
.forum-reply {
    background: #FBF9ED;
    border: 1px solid #e8e6df;
    padding: 1.25rem 1.5rem;
    margin-top: 1px;
}
.forum-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.forum-reply-author {
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #252525;
}
.forum-reply-content {
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 0.95rem;
    color: #252525;
    line-height: 1.7;
}

/* Forum Form */
.forum-form-card {
    background: #fff;
    border: 1px solid #e8e6df;
    padding: 2rem;
}
.forum-field {
    margin-bottom: 1.5rem;
}
.forum-label {
    display: block;
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #252525;
    margin-bottom: 0.5rem;
}
.forum-input {
    width: 100%;
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e8e6df;
    background: #FFFEF5;
    color: #252525;
    outline: none;
}
.forum-input:focus,
.forum-textarea:focus {
    border-color: #252525;
}
.forum-textarea {
    width: 100%;
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e8e6df;
    background: #FFFEF5;
    color: #252525;
    outline: none;
    resize: vertical;
    min-height: 120px;
}
.forum-error {
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 0.8rem;
    color: #c0392b;
    margin-top: 0.25rem;
}
.forum-reply-form {
    margin-top: 2rem;
}

/* Home Page Forum Preview */
/* Forum Community Preview — Aesop Split Layout */
.forum-preview-section {
    background: #252525;
    padding: 0;
}

.forum-preview-inner {
    display: flex;
    align-items: stretch;
    min-height: 520px;
}

.forum-preview-left {
    flex: 0 0 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4rem 4rem 4rem 6rem;
}

.forum-preview-left .philosophy-label {
    color: rgba(255, 255, 255, 0.5);
}

.forum-preview-left .philosophy-heading {
    color: #ffffff;
}

.forum-preview-left .philosophy-desc {
    color: rgba(255, 255, 255, 0.65);
}

.forum-preview-left .philosophy-cta {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
}

.forum-preview-left .philosophy-cta:hover {
    background-color: #ffffff;
    color: #252525;
    border-color: #ffffff;
}

.forum-preview-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.forum-preview-card {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex: 1;
    transition: background-color 0.3s ease;
}

.forum-preview-card:last-child {
    border-bottom: none;
}

.forum-preview-card:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.forum-preview-card--blur {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
}

.forum-preview-card-num {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    width: 2rem;
    line-height: 1.3;
}

.forum-preview-card-content {
    flex: 1;
}

.forum-preview-card-title {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

.forum-preview-card-text {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
    margin: 0;
}

.forum-preview-cta {
    margin-top: 2.5rem;
}

/* Forum on dashboard */
.forum-dash-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #e8e6df;
    border: 1px solid #e8e6df;
}
.forum-dash-item {
    background: #fff;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.forum-dash-title {
    font-family: 'Zapf Humanist 601', 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-size: 1rem;
    font-weight: 400;
    color: #252525;
    margin: 0 0 0.25rem 0;
}
.forum-dash-meta {
    font-family: 'Suisse Int\'l', 'Helvetica Neue', sans-serif;
    font-size: 0.8rem;
    color: #999;
}

@media (max-width: 768px) {
    .forum-card {
        padding: 1.25rem;
    }
    .forum-post {
        padding: 1.25rem;
    }
    .forum-form-card {
        padding: 1.25rem;
    }
    .forum-preview-inner {
        flex-direction: column;
        min-height: auto;
    }
    .forum-preview-left {
        flex: none;
        padding: 3rem 1.5rem;
        text-align: center;
    }
    .forum-preview-left .philosophy-cta {
        align-self: center;
    }
    .forum-preview-right {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .forum-preview-card {
        padding: 1.5rem;
    }
    .forum-reply-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* ================================================
   FOOTER — Aesop Style
   ================================================ */

.site-footer {
    background-color: #FFFEF5;
}

/* Newsletter section */
.footer-newsletter {
    padding: 3.5rem 0;
    border-top: 1px solid #e8e6df;
}

.footer-newsletter-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

.footer-newsletter-left {
    flex: 1;
    max-width: 560px;
}

.footer-newsletter-right {
    flex: 0 0 auto;
}



.footer-heading {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #252525;
    margin-bottom: 0.4rem;
}

.footer-desc {
    font-family: 'Suisse Int\'l', Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.footer-signup {
    display: flex;
    gap: 0;
}

.footer-email-input {
    flex: 1;
    border: 1px solid #252525;
    border-right: none;
    padding: 0.75rem 1rem;
    font-family: 'Suisse Int\'l', Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    color: #252525;
    background: transparent;
    outline: none;
}

.footer-email-input::placeholder {
    color: #999;
}

.footer-signup-btn {
    background: #252525;
    color: #FFFEF5;
    border: 1px solid #252525;
    padding: 0.75rem 1.75rem;
    font-family: 'Suisse Int\'l', Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.footer-signup-btn:hover {
    background: transparent;
    color: #252525;
}

.footer-social {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.footer-social-link img {
    width: 32px;
    height: 32px;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.footer-social-link:hover img {
    opacity: 1;
}

/* Footer links section */
.footer-links {
    background-color: #FBF9ED;
    padding: 3rem 0;
    border-top: 1px solid #e8e6df;
}

.footer-links-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-col-title {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 1.05rem;
    font-weight: 400;
    color: #252525;
    margin-bottom: 1rem;
}

.footer-link {
    font-family: 'Suisse Int\'l', Helvetica, Arial, sans-serif;
    font-size: 0.88rem;
    color: #555;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #252525;
    text-decoration: underline;
}

.footer-hours {
    font-family: 'Suisse Int\'l', Helvetica, Arial, sans-serif;
    font-size: 0.88rem;
    color: #555;
    display: block;
    padding: 0.2rem 0;
}

.footer-hours-label {
    font-weight: 600;
    color: #252525;
    margin-top: 0.5rem;
}

.footer-col-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo {
    width: 110px;
}

/* Copyright bar */
.footer-copyright {
    border-top: 1px solid #e8e6df;
    padding: 1.25rem 0;
    text-align: center;
    font-family: 'Suisse Int\'l', Helvetica, Arial, sans-serif;
    font-size: 0.78rem;
    color: #888;
    background-color: #FBF9ED;
}

.footer-copyright-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.footer-legal-links {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
}

.footer-legal-link {
    color: #6f6a5a;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
}

.footer-legal-link:hover {
    color: #252525;
    border-bottom-color: #D4B04A;
}

.footer-legal-sep {
    color: #c5c0b0;
}

@media (max-width: 576px) {
    .footer-copyright-inner {
        flex-direction: column;
        gap: 0.65rem;
    }
}

/* Footer responsive */
@media (max-width: 768px) {
    .footer-newsletter-inner {
        flex-direction: column;
        gap: 2.5rem;
    }
    .footer-newsletter-left {
        max-width: 100%;
    }
    .footer-links-inner {
        flex-wrap: wrap;
        gap: 2rem 3rem;
    }
    .footer-col {
        flex: 0 0 calc(50% - 1.5rem);
    }
    .footer-col-logo {
        flex: 0 0 100%;
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    .footer-signup {
        flex-direction: column;
    }
    .footer-email-input {
        border-right: 1px solid #252525;
        border-bottom: none;
    }
    .footer-col {
        flex: 0 0 100%;
    }
}

/* ================================================
   SERVICES PAGE — Aesop Style (Split Layouts)
   ================================================ */

/* Services Overview */
.svc-overview {
    padding: 5rem 0 4rem;
    text-align: center;
    background-color: #FBF9ED;
}

.svc-overview-heading {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 2.25rem;
    font-weight: 400;
    color: #252525;
    margin-bottom: 2.5rem;
}

.svc-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.svc-overview-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.svc-overview-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.svc-overview-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.svc-overview-label {
    font-family: 'Suisse Int\'l', Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #252525;
    font-weight: 500;
}

.svc-overview-desc {
    font-family: 'Suisse Int\'l', Helvetica, Arial, sans-serif;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

/* Alternating background for split sections */
.svc-section-alt {
    background-color: #FBF9ED !important;
}

/* Price styling within split layout */
.svc-split-price {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 1.5rem;
    color: #252525;
    margin-bottom: 2rem;
}

/* Process Section */
.svc-process-section {
    padding: 5rem 0;
    background-color: #FBF9ED;
}

.svc-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.svc-process-step {
    text-align: center;
    padding: 2rem 1.5rem;
    position: relative;
}

.svc-process-step::after {
    content: '';
    position: absolute;
    top: 35px;
    right: -1rem;
    width: 2rem;
    height: 1px;
    background: #ccc;
}

.svc-process-step:last-child::after {
    display: none;
}

.svc-process-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 1px solid #252525;
    border-radius: 50%;
    font-family: 'Zapf Humanist 601', serif;
    font-size: 1.15rem;
    color: #252525;
    margin-bottom: 1.5rem;
}

.svc-process-title {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #252525;
    margin-bottom: 0.75rem;
}

.svc-process-desc {
    font-family: 'Suisse Int\'l', Helvetica, Arial, sans-serif;
    font-size: 0.88rem;
    color: #666;
    line-height: 1.6;
}

/* CTA Banner */
.svc-cta-banner {
    padding: 5rem 0;
    background-color: #252525;
}

.svc-cta-banner-label {
    color: rgba(255, 255, 255, 0.6) !important;
}

.svc-cta-banner-heading {
    color: #ffffff !important;
}

.svc-cta-banner-desc {
    color: rgba(255, 255, 255, 0.7) !important;
}

.svc-cta-banner .philosophy-cta {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.4);
}

.svc-cta-banner .philosophy-cta:hover {
    background-color: #ffffff;
    color: #252525;
    border-color: #ffffff;
}

.svc-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* Services page responsive */
@media (max-width: 991px) {
    .svc-overview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    .svc-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .svc-process-step::after {
        display: none;
    }
}

@media (max-width: 576px) {
    .svc-overview {
        padding: 3rem 0 2.5rem;
    }
    .svc-overview-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .svc-process-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .svc-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .svc-overview-heading {
        font-size: 1.8rem;
    }
    .svc-split-price {
        font-size: 1.25rem;
    }
}


/* ==============================================
   GALLERY PAGE — Aesop Aesthetic
   ============================================== */

/* Section */
.gallery-section {
    padding: 5rem 0;
    background-color: #FFFEF5;
}

.gallery-section--alt {
    background-color: #FBF9ED;
}

.gallery-section-inner {
    max-width: 700px;
    margin: 0 auto 3rem;
    text-align: center;
    padding: 0 2rem;
}

.gallery-section-label {
    display: block;
    font-family: 'Zapf Humanist 601', serif;
    font-size: 2.25rem;
    font-weight: 400;
    color: #252525;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.gallery-section-desc {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* Grid */
.gallery-grid-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

/* Card */
.gallery-card {
    cursor: pointer;
    overflow: hidden;
}

.gallery-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.gallery-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-card:hover .gallery-card-img img {
    transform: scale(1.04);
}

.gallery-card-caption {
    padding: 0.75rem 0.25rem;
}

.gallery-card-title {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 0.95rem;
    font-weight: 400;
    color: #252525;
    margin: 0 0 0.2rem;
}

.gallery-card-sub {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.8rem;
    color: #999;
    margin: 0;
}

/* Lightbox Modal */
.gallery-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.gallery-modal.is-open {
    display: flex;
}

.gallery-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    z-index: 10000;
    line-height: 1;
}

.gallery-modal-close:hover {
    opacity: 1;
}

.gallery-modal-body {
    max-width: 850px;
    width: 90%;
    cursor: default;
    text-align: center;
}

.gallery-modal-img {
    width: 100%;
    max-height: 75vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.gallery-modal-caption {
    padding: 1.25rem 0 0;
}

.gallery-modal-caption h4 {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 0.35rem;
}

.gallery-modal-caption p {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.85rem;
    color: #999;
    margin: 0;
}

/* Gallery responsive */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-section-label {
        font-size: 1.85rem;
    }
}

@media (max-width: 767px) {
    .gallery-section {
        padding: 3.5rem 0;
    }

    .gallery-section-inner {
        margin-bottom: 2rem;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .gallery-section-label {
        font-size: 1.6rem;
    }

    .gallery-grid-wrap {
        padding: 0 1.25rem;
    }

    .gallery-modal-close {
        top: 1rem;
        right: 1.25rem;
    }
}

@media (max-width: 480px) {
    .gallery-section {
        padding: 2.5rem 0;
    }

    .gallery-section-label {
        font-size: 1.4rem;
    }

    .gallery-grid-wrap {
        padding: 0 1rem;
    }
}


/* ==============================================
   NEWS PAGES — Aesop Aesthetic
   ============================================== */

/* ---- News List Section ---- */
.news-list-section {
    padding: 5rem 0;
    background-color: #FFFEF5;
}

.news-list-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Filter Bar */
.news-filter-bar {
    display: flex;
    /* row column: wrapped rows need vertical breathing room of their own. A single
       `gap` value here gave wrapped rows the same 2rem apart as the words within a
       row, which read as one dense block on a phone. */
    gap: 1rem 2rem;
    border-bottom: 1px solid #ece9df;
    padding-bottom: 1.25rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.news-filter-link {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.72rem;
    font-weight: 400;
    color: #8a8578;
    text-decoration: none;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* The underline hugs its own label.
       This used to be `padding-bottom: 1.25rem; margin-bottom: -1.25rem`, a trick to
       drop the active link's underline onto the bar's own rule so the two lines met.
       It works only while the bar is a single row. The subcategory bar carries six
       long names and wraps to three rows on a phone, and the negative margin makes
       every link's border sit 1.25rem BELOW its own text — inside the row beneath. A
       client hit exactly that: selecting "Beh & Yo Edition" struck a line through
       "Rabbit Body Structure" on the next line. Reproduced before changing this. */
    padding-bottom: 0.4rem;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: color 0.25s ease, border-color 0.25s ease;
}

.news-filter-link:hover {
    color: #252525;
    text-decoration: none;
}

.news-filter-link.is-active {
    color: #252525;
    border-bottom-color: #252525;
}

/* News Grid (shared by list + detail related) */
/* Masonry, but built on Grid rather than CSS columns.
   These cards used to force every image into a 4:3 box and crop to fill it. The
   Beh & Yo Sharing articles are tall infographics, so that sliced the headline off
   the top and the diet panel off the bottom — the thumbnail showed the middle of a
   poster and nothing that identified it. Each image now keeps its own proportions.

   `column-count` was the obvious way to tile ragged heights and it is the wrong
   one here: columns flow top-to-bottom, so article 2 lands *under* article 1 and
   article 3 starts the next column. Staff arrange these by hand and expect to read
   them across, so that quietly undoes the ordering. Grid keeps source order going
   left-to-right; `.js-masonry` then closes the vertical gaps (see news.html).

   Without JavaScript this stays a plain grid: correct order, whole images, just
   more whitespace under the shorter cards. */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 2.5rem;
    align-items: start;
}

/* Rows become a fine ruler the script measures each card against. */
.news-grid.js-masonry {
    grid-auto-rows: 1px;
    row-gap: 0;
}

/* News Card */
.news-card {
    display: block;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

/* The gap between stacked cards is a margin only in masonry mode, because the
   grid's own row-gap is switched off there. */
.news-grid.js-masonry .news-card { margin-bottom: 2.5rem; }

.news-card:hover {
    text-decoration: none;
    color: inherit;
}

.news-card-img {
    overflow: hidden;
    background-color: #f5f4ee;
    border-radius: 2px;
}

.news-card-img img {
    width: 100%;
    /* `height: auto` is the whole fix: the image keeps its own proportions instead
       of being stretched to a fixed box and cropped. */
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.news-card:hover .news-card-img img {
    transform: scale(1.04);
}

.news-card-body {
    padding: 1.25rem 0 0.25rem;
}

.news-card-tag {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.7rem;
    font-weight: 400;
    color: #8a8578;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    display: inline-block;
    border: none;
    padding: 0;
    margin-bottom: 0.75rem;
}

.news-card-title {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #252525;
    line-height: 1.35;
    letter-spacing: -0.005em;
    margin: 0 0 0.6rem;
    transition: color 0.25s ease;
}

.news-card:hover .news-card-title {
    color: #4a4a4a;
}

.news-card-date {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.75rem;
    color: #9a948a;
    letter-spacing: 0.04em;
}

.news-empty {
    text-align: center;
    padding: 5rem 2rem;
    border: 1px solid #ece9df;
    border-radius: 2px;
}

.news-empty p {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.92rem;
    color: #8a8578;
    line-height: 1.7;
    max-width: 420px;
    margin: 0 auto;
}

/* ---- News Detail Page ---- */

/* Article Header */
.news-detail-header {
    padding: 4rem 0 3rem;
    background-color: #FBF9ED;
}

.news-detail-header-inner {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.news-detail-back {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.85rem;
    color: #666;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 2rem;
    transition: color 0.2s ease;
}

.news-detail-back:hover {
    color: #252525;
}

.news-detail-tag {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #252525;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-block;
    border: 1px solid #252525;
    padding: 0.25rem 0.6rem;
    margin-bottom: 1.25rem;
}

.news-detail-title {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #252525;
    line-height: 1.2;
    margin: 0 0 1rem;
}

.news-detail-meta {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.85rem;
    color: #999;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

/* Featured Image */
.news-detail-hero-img {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

.news-detail-hero-img img {
    width: 100%;
    /* Required, not cosmetic. The <img> now carries real width and height
       attributes so the browser can reserve the right space before the file
       arrives (no layout shift). Without `height: auto` the CSS stretches the
       width to 100% while that height attribute still fixes the height, and the
       picture is squashed to whatever ratio the two happen to make. */
    height: auto;
    display: block;
}

/* Article Content */
.news-detail-content {
    padding: 3rem 0 5rem;
    background-color: #FFFEF5;
}

.news-detail-content-inner {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 2rem;
}

.news-detail-body {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 1.125rem;
    color: #333;
    line-height: 1.8;
}

.news-detail-body p {
    margin-bottom: 1.5rem;
}

.news-detail-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem 0;
}

/* Split content (content_2 + image) */
.news-detail-split {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid #e8e6df;
}

.news-detail-split-img {
    flex: 0 0 40%;
}

.news-detail-split-img img {
    width: 100%;
    display: block;
}

.news-detail-split-text {
    flex: 1;
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
}

/* Content image (between body and gallery) */
.news-detail-content-image {
    margin-top: 2.5rem;
}

.news-detail-content-image img {
    width: 100%;
    /* Same reason as the hero above: width/height attributes without this
       distort the picture rather than scaling it. */
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Gallery */
.news-detail-gallery {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid #e8e6df;
}

.news-detail-gallery-heading {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: #1a1a1a;
}

.news-detail-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.news-detail-gallery-item {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 4 / 3;
    background: #f5f4ef;
    transition: transform .25s ease;
}

.news-detail-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.news-detail-gallery-item:hover img {
    transform: scale(1.04);
}

/* Social Share */
.news-detail-share {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e8e6df;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.news-detail-share-label {
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
}

.news-detail-share-btns {
    display: flex;
    gap: 0.6rem;
}

.news-share-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #e8e6df;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #252525;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.news-share-btn:hover {
    background-color: #252525;
    color: #fff;
    border-color: #252525;
}

/* The X logo is inline SVG rather than a Font Awesome glyph (the icon needs FA
   6.4.2 and the site loads 6.4.0). `currentColor` keeps it in step with the
   hover state the other buttons get for free. */
.news-share-icon {
    width: 0.95rem;
    height: 0.95rem;
    display: block;
}

@media screen and (max-width: 576px) {
    .news-detail-share {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .news-share-btn {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
}

/* Related Articles Section */
.news-related-section {
    padding: 5rem 0;
    background-color: #FBF9ED;
}

.news-related-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.news-related-label {
    display: block;
    font-family: 'Suisse Int\'l', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #252525;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

.news-related-heading {
    font-family: 'Zapf Humanist 601', serif;
    font-size: 2rem;
    font-weight: 400;
    color: #252525;
    margin: 0 0 2.5rem;
}

/* News responsive */
@media (max-width: 992px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1.5rem;
        row-gap: 1.5rem;
    }
    .news-grid.js-masonry .news-card { margin-bottom: 1.5rem; }

    .news-detail-title {
        font-size: 2rem;
    }
}

@media (max-width: 767px) {
    .news-list-section {
        padding: 3.5rem 0;
    }

    .news-filter-bar {
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .news-grid {
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }
    .news-grid.js-masonry .news-card { margin-bottom: 2rem; }

    .news-detail-header {
        padding: 3rem 0 2rem;
    }

    .news-detail-title {
        font-size: 1.75rem;
    }

    .news-detail-split {
        flex-direction: column;
    }

    .news-detail-split-img {
        flex: none;
    }

    .news-related-section {
        padding: 3.5rem 0;
    }

    .news-related-heading {
        font-size: 1.6rem;
    }

    .news-list-inner,
    .news-detail-header-inner,
    .news-detail-content-inner,
    .news-detail-hero-img,
    .news-related-inner {
        padding: 0 1.25rem;
    }
}

@media (max-width: 480px) {
    .news-list-section {
        padding: 2.5rem 0;
    }

    .news-detail-title {
        font-size: 1.5rem;
    }

    .news-detail-content {
        padding: 2rem 0 3rem;
    }
}