/* ==========================================================================
   PBAU - VINTAGE LUXURY BARBER GUILD THEME DESIGN SYSTEM
   ========================================================================== */

/* Design Tokens & Variables */
:root {
    --old-black: #282828;
    --dark-charcoal: #333333;
    --charcoal-blue: #354550;
    --black-denim: #1A2227;
    --white: #FFFFFF;
    --light-gray: #D9DEE2;
    --mid-gray: #AAB3B9;
    --page-bg: var(--black-denim);
    --surface: var(--dark-charcoal);
    --surface-soft: var(--old-black);
    --accent: var(--charcoal-blue);
    --text-main: var(--white);
    --text-soft: var(--light-gray);
    --text-on-dark: var(--white);
    --text-on-dark-muted: var(--light-gray);
    --text-muted: var(--mid-gray);
    --line-soft: rgba(255, 255, 255, 0.14);
    --line-strong: rgba(255, 255, 255, 0.28);
    --forest-dark: var(--black-denim);
    --forest: var(--old-black);
    --forest-light: var(--dark-charcoal);
    --accent-light: var(--white);
    --charcoal: var(--text-main);
    --error: var(--mid-gray);
    --success: var(--charcoal-blue);
    --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.2s ease;
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --shadow-sm: 0 4px 10px rgba(26, 34, 39, 0.22);
    --shadow-md: 0 10px 30px rgba(26, 34, 39, 0.32);
    --shadow-lg: 0 20px 50px rgba(26, 34, 39, 0.44);
    --accent-glow: 0 0 15px rgba(255, 255, 255, 0.16);
}

/* Reset & Base Styles */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--page-bg);
    color: var(--text-main);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
}

body.no-scroll {
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
}

p {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-main);
    margin-bottom: 1.25rem;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--surface-soft);
}
::-webkit-scrollbar-thumb {
    background: var(--forest);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* ==========================================================================
   REUSABLE UI COMPONENTS
   ========================================================================== */

/* Buttons - Sharp, Accent Borders, Hover Spring physics */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 0px; /* SHARP Geometric Border per guidelines */
    cursor: pointer;
    transition: var(--transition-smooth);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--text-main);
    outline-offset: 4px;
}

.btn-accent {
    background-color: var(--forest);
    color: var(--accent-light);
    border: 1px solid var(--accent);
    box-shadow: var(--shadow-sm);
}

.btn-accent-outline {
    color: var(--accent-light);
    border-color: var(--text-soft);
    background: transparent;
}

.btn-accent-outline:hover {
    background: var(--accent);
    color: var(--text-main);
    box-shadow: var(--accent-glow);
}

.btn-accent:hover {
    background-color: var(--text-soft);
    color: var(--text-main);
    box-shadow: var(--accent-glow);
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    color: var(--text-soft);
    border: 1px solid var(--accent);
}

.btn-outline:hover {
    background-color: var(--text-soft);
    color: var(--text-main);
    transform: translateY(-2px);
    box-shadow: var(--accent-glow);
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
}

.btn:hover::after {
    transform: translateX(120%);
}

.btn-lg {
    padding: 18px 36px;
    font-size: 1rem;
}

/* Decorative Accent Line Diamond Row */
.panel-decor-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 3rem 0;
}

.decor-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    max-width: 150px;
}

.decor-diamond {
    color: var(--text-soft);
    font-size: 0.75rem;
    animation: pulse 3s infinite ease-in-out;
}

/* Section Badges */
.section-badge {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--text-soft);
    margin-bottom: 0.75rem;
    display: block;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 1rem;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: var(--text-soft);
}

.section-header-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem auto;
}

.section-header-center .section-title::after {
    left: 50%;
    transform: translateX(-50%);
}

.section-desc {
    font-size: 1.125rem;
    color: var(--text-muted);
}

/* ==========================================================================
   HEADER NAVIGATION
   ========================================================================== */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background-color: rgba(26, 34, 39, 0.95);
    border-bottom: 1px solid var(--accent);
    transition: var(--transition-smooth);
}

#main-header.scrolled {
    padding: 8px 0;
    background-color: var(--page-bg);
    box-shadow: var(--shadow-md);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo Design */
.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    color: var(--text-main);
}

/**
 * The brand mark is a white transparent PNG carrying its own circular rule.
 *
 * The white backing and border that used to live here existed for the old
 * rectangular JPEG, which had to be cropped into a circle and needed something
 * to sit on. Keeping them now would print a white logo onto a white disc and
 * make it disappear, and would draw a second ring around the emblem's own.
 */
.site-logo-img {
    width: 62px;
    height: 62px;
    display: block;
    object-fit: contain;
    object-position: center;
}

.logo-guild {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--text-soft);
}

.logo-line {
    width: 80%;
    height: 1px;
    background-color: var(--text-soft);
    margin: 2px 0;
}

/* Desktop Navigation */
#desktop-nav ul {
    display: flex;
    list-style: none;
    gap: 36px;
}

#desktop-nav a {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-soft);
    padding: 8px 0;
    position: relative;
}

#desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--text-soft);
    transition: var(--transition-fast);
}

#desktop-nav a:hover {
    color: var(--accent-light);
}

#desktop-nav a:hover::after {
    width: 100%;
}

/* Mobile Navigation Hamburger */
#mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
}

#mobile-menu-toggle .bar {
    width: 100%;
    height: 2px;
    background-color: var(--text-soft);
    transition: var(--transition-fast);
}

/* Mobile Nav Overlay Drawer */
#mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--page-bg);
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-smooth);
}

#mobile-nav.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-links {
    list-style: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mobile-nav-links a {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--text-main);
    display: block;
    padding: 8px;
}

.mobile-nav-links a:hover {
    color: var(--text-soft);
}

.mobile-nav-links .btn {
    font-family: var(--font-body);
    font-size: 0.875rem;
}

/* Toggle active burger classes */
#mobile-menu-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

#mobile-menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

#mobile-menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   LANDING PAGE SECTIONS
   ========================================================================== */

/* Wrapper */
#scroll-wrapper {
    margin-top: 80px; /* Offset fixed header */
    position: relative;
    z-index: 10;
}

/* Section Spacing */
.scroll-section {
    padding: 6rem 24px;
    max-width: 100vw;
}

/* Hero Section - Typographic Monument */
#hero-section {
    min-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4rem 24px;
    text-align: center;
    background-color: var(--page-bg);
    background-image: none;
    color: var(--text-main);
}

.hero-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(26, 34, 39, 0.9) 0%, rgba(26, 34, 39, 0.95) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.hero-tag {
    font-size: 0.875rem;
    letter-spacing: 0.35em;
    color: var(--text-soft);
    font-weight: 700;
    margin-bottom: 2rem;
}

.hero-title {
    font-size: clamp(3rem, 6vw, 5.5rem);
    text-transform: uppercase;
    line-height: 0.95;
    margin-bottom: 2rem;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    letter-spacing: -0.02em;
}

.title-light {
    font-weight: 300;
    font-family: var(--font-body);
    font-size: 0.5em;
    letter-spacing: 0.2em;
    color: var(--text-soft);
    margin-bottom: 0.2em;
}

.title-bold {
    font-family: var(--font-heading);
    font-weight: 900;
    color: var(--accent-light);
    text-shadow: 2px 2px 0px var(--forest-dark), 4px 4px 0px rgba(53, 69, 80, 0.3);
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-family: var(--font-body);
    font-weight: 300;
    max-width: 650px;
    margin: 0 auto 3rem auto;
    color: var(--text-soft);
    line-height: 1.8;
}

.hero-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Overview Section styling */
#overview-section {
    background-color: var(--page-bg);
    max-width: 1200px;
    margin: 0 auto;
}

.overview-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 64px;
    align-items: center;
    margin-top: 4rem;
}

.lead-text {
    font-size: 1.35rem;
    font-family: var(--font-heading);
    line-height: 1.5;
    color: var(--forest);
    font-weight: 500;
}

.guild-seal-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 2rem;
}

.guild-seal {
    width: 80px;
    height: 80px;
}

.seal-text {
    fill: var(--text-soft);
    font-family: var(--font-body);
    font-size: 5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-anchor: middle;
}

.seal-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    color: var(--text-soft);
}

.overview-stats {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.stat-card {
    background-color: var(--surface);
    padding: 32px;
    border-left: 3px solid var(--accent);
    border-top: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.stat-card:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--forest);
}

.stat-num {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    margin-bottom: 8px;
}

.stat-label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    font-weight: 600;
}

/* Benefits Section styling */
#benefits-section {
    background-color: var(--page-bg);
    color: var(--text-main);
}

#benefits-section h2 {
    color: var(--text-main);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Benefit Cards - Asymmetrical overlays & Sharp corners */
.benefit-card {
    background-color: var(--forest-light);
    border: 1px solid rgba(53, 69, 80, 0.2);
    padding: 40px 32px;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.card-icon {
    font-size: 2.25rem;
    color: var(--accent-light);
    margin-bottom: 24px;
    transition: var(--transition-fast);
}

.card-title {
    font-size: 1.35rem;
    color: var(--text-main);
    margin-bottom: 16px;
}

.card-desc {
    color: var(--text-soft);
    font-size: 0.9375rem;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 0;
}

.card-border-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--text-soft);
    transition: var(--transition-smooth);
}

/* Hover effects */
.benefit-card:hover {
    transform: translateY(-8px);
    border-color: var(--text-soft);
    box-shadow: var(--accent-glow);
}

.benefit-card:hover .card-icon {
    transform: scale(1.15) rotate(5deg);
    color: var(--text-soft);
}

.benefit-card:hover .card-border-decoration {
    width: 100%;
}

/* Call To Action Section */
#cta-section {
    background-color: var(--text-soft);
    padding: 8rem 24px;
}

.cta-inner {
    max-width: 1000px;
    margin: 0 auto;
    background-image: none;
    position: relative;
    padding: 80px 40px;
    border: 1px solid var(--accent);
}

.cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 34, 39, 0.9);
}

.cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    color: var(--text-main);
}

.cta-title {
    font-size: 3rem;
    color: var(--accent-light);
    margin-bottom: 1.5rem;
}

.cta-desc {
    font-size: 1.15rem;
    color: var(--text-soft);
    margin-bottom: 3rem;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Footer Section */
#main-footer {
    background-color: var(--page-bg);
    color: var(--text-soft);
    padding: 6rem 24px 2rem 24px;
    border-top: 1px solid var(--accent);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr;
    gap: 64px;
    margin-bottom: 4rem;
}

.footer-logo {
    font-size: 2rem;
    color: var(--text-soft);
    margin-bottom: 8px;
}

.footer-logo-img {
    width: 118px;
    max-width: 100%;
    height: 118px;
    display: block;
    margin-bottom: 20px;
    object-fit: contain;
    object-position: center;
}

.footer-tagline {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 1.5rem;
}

.footer-about-text {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.footer-nav h4, .footer-pledge h4 {
    color: var(--text-main);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 8px;
}

.footer-nav h4::after, .footer-pledge h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 1px;
    background-color: var(--text-soft);
}

.footer-nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-nav a {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.footer-nav a:hover {
    color: var(--text-soft);
    padding-left: 4px;
}

.oath-text {
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--accent-light);
    line-height: 1.8;
    position: relative;
    padding-left: 24px;
}

.oath-text::before {
    content: '"';
    font-size: 3rem;
    font-family: var(--font-heading);
    position: absolute;
    top: -15px;
    left: 0;
    color: var(--text-soft);
    opacity: 0.5;
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 1px solid rgba(53, 69, 80, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.footer-socials {
    display: flex;
    gap: 16px;
}

.footer-socials a {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(53, 69, 80, 0.3);
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.footer-socials a:hover {
    background-color: var(--text-soft);
    color: var(--text-main);
    box-shadow: var(--accent-glow);
}

/* ==========================================================================
   OFF-CANVAS SYSTEM (FULL-WIDTH SLIDE ROUTING)
   ========================================================================== */

#off-canvas-container {
    position: relative;
    z-index: 1000;
}

.off-canvas-panel {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100vw;
    height: 100vh;
    background-color: var(--page-bg);
    z-index: 1001;
    overflow-y: auto;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
}

/* When panel is active, translate smoothly on hardware-accelerated Z-axis */
.off-canvas-panel.panel-active {
    transform: translate3d(-100%, 0, 0);
}

/* Panel Header */
.panel-header {
    background-color: var(--page-bg);
    border-bottom: 1px solid var(--accent);
    padding: 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.btn-close-panel {
    background: transparent;
    border: none;
    color: var(--accent-light);
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: var(--transition-fast);
}

.btn-close-panel:hover {
    color: var(--text-soft);
    transform: translateX(-4px);
}

.panel-header-badge {
    color: var(--text-soft);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    border-left: 1px solid var(--accent);
    padding-left: 16px;
}

/* Panel Body & Container */
.panel-body {
    flex: 1;
    padding: 4rem 24px;
    background-color: var(--page-bg);
}

.panel-body-container {
    max-width: 900px;
    margin: 0 auto;
}

.panel-title {
    font-size: 3rem;
    margin-bottom: 3rem;
    text-align: center;
    color: var(--forest);
    position: relative;
    padding-bottom: 1.5rem;
}

.panel-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background-color: var(--text-soft);
}

.panel-rich-content h3 {
    font-size: 1.75rem;
    color: var(--forest);
    margin-bottom: 1.25rem;
}

/* About Panel leadership styling */
.committee-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    margin-top: 2rem;
}

.member-profile {
    text-align: center;
    background: var(--surface);
    padding: 32px 24px;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
}

.member-avatar {
    width: 72px;
    height: 72px;
    border: 1px solid var(--accent);
    color: var(--text-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 20px auto;
}

.member-profile h4 {
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.member-role {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: 0.1em;
}

.ethics-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ethics-list li {
    padding-left: 32px;
    position: relative;
    font-size: 1rem;
    line-height: 1.6;
}

.ethics-list li::before {
    content: '\f0e3'; /* Gavel / Scales icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--text-soft);
}

/* Events Panel Styling */
.events-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.event-item {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.event-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--text-soft);
}

.event-date {
    background-color: var(--forest);
    color: var(--accent-light);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    border-right: 1px solid var(--accent);
}

.event-date .day {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.event-date .month {
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
}

.event-details {
    padding: 30px;
    flex: 1;
}

.event-tag, .event-tag-alt, .event-tag-highlight {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
}

.event-tag {
    background-color: var(--text-soft);
    color: var(--forest);
}

.event-tag-alt {
    background-color: rgba(53, 69, 80, 0.1);
    color: var(--text-soft);
    border: 1px solid var(--accent);
}

.event-tag-highlight {
    background-color: var(--error);
    color: var(--text-main);
}

.event-details h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: var(--text-main);
}

.event-meta {
    font-size: 0.75rem;
    color: var(--text-soft);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.event-meta i {
    margin-right: 4px;
}

.event-summary {
    font-size: 0.9375rem;
    color: var(--charcoal);
    margin-bottom: 0;
}

/* Directory Search UI */
.search-controls-wrapper {
    background-color: var(--surface);
    padding: 24px;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    margin-bottom: 3rem;
}

.search-bar {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-bar input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    background-color: var(--page-bg);
    border: 1px solid var(--line-soft);
    outline: none;
    transition: var(--transition-fast);
}

.search-bar input:focus {
    border-color: var(--text-soft);
    background-color: var(--surface);
}

.filter-dropdowns {
    display: flex;
    gap: 12px;
}

.filter-dropdowns select {
    flex: 1;
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    background-color: var(--page-bg);
    border: 1px solid var(--line-soft);
    outline: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.filter-dropdowns select:focus {
    border-color: var(--text-soft);
    background-color: var(--surface);
}

/* Barber Card Listings */
#barber-directory-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
}

.barber-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    padding: 32px;
    position: relative;
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.barber-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--text-soft);
}

.barber-card-header {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.barber-avatar-sim {
    width: 60px;
    height: 60px;
    background-color: var(--forest-light);
    color: var(--accent-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: 1px solid var(--accent);
}

.barber-meta-details h3 {
    font-size: 1.25rem;
    margin-bottom: 2px;
}

.barber-shop {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
}

.barber-guild-badge {
    position: absolute;
    top: 24px;
    right: 24px;
    color: var(--text-soft);
    font-size: 1.15rem;
}

.barber-details-info {
    margin-bottom: 20px;
}

.barber-info-row {
    font-size: 0.875rem;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.barber-info-row i {
    color: var(--text-soft);
    width: 16px;
}

.barber-specialties-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}

.spec-tag {
    background-color: var(--page-bg);
    border: 1px solid var(--line-soft);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 8px;
    color: var(--forest);
    letter-spacing: 0.05em;
}

.no-results-msg {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 24px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
}

.no-results-msg i {
    font-size: 3rem;
    color: var(--text-soft);
    margin-bottom: 20px;
}

/* ==========================================================================
   FORM & WIZARD STYLING (REGISTRATION)
   ========================================================================== */

.form-steps-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    opacity: 0.4;
    transition: var(--transition-smooth);
}

.step-indicator.active {
    opacity: 1;
}

.step-indicator.completed {
    opacity: 1;
}

.step-indicator .step-num {
    width: 36px;
    height: 36px;
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.875rem;
    background-color: var(--surface);
    color: var(--text-soft);
    transition: var(--transition-smooth);
}

.step-indicator.active .step-num {
    background-color: var(--forest);
    color: var(--accent-light);
    box-shadow: var(--accent-glow);
}

.step-indicator.completed .step-num {
    background-color: var(--success);
    border-color: var(--success);
    color: var(--text-on-dark);
}

.step-indicator .step-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.step-line {
    flex: 1;
    height: 1px;
    background-color: var(--text-soft);
    margin: 0 16px;
    margin-top: -18px; /* Alignment shift */
}

.step-line.completed {
    background-color: var(--success);
}

/* Form Steps Sections switcher */
.form-step-section {
    display: none;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    padding: 40px;
}

.form-step-section.active {
    display: block;
    animation: fadeIn 0.4s ease-out forwards;
}

.step-title {
    font-size: 1.75rem;
    color: var(--forest);
    margin-bottom: 8px;
}

.step-instruction {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Form inputs & Validation */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--forest);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select {
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    background-color: var(--page-bg);
    border: 1px solid var(--line-soft);
    outline: none;
    transition: var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--text-soft);
    background-color: var(--surface);
}

/* Error States */
.form-group.has-error input,
.form-group.has-error select {
    border-color: var(--error);
    background-color: rgba(170, 179, 185, 0.02);
}

.field-error-message {
    display: none;
    font-size: 0.75rem;
    color: var(--error);
    font-weight: 600;
}

.form-group.has-error .field-error-message {
    display: block;
}

/* Checkboxes style */
.form-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    user-select: none;
}

.checkbox-container input {
    width: 18px;
    height: 18px;
    accent-color: var(--forest);
    cursor: pointer;
}

.highlight-checkbox {
    background-color: var(--page-bg);
    padding: 16px;
    border: 1px dashed var(--accent);
    margin-top: 24px;
}

/* Pledge Box */
.pledge-scroll-box {
    background-color: var(--page-bg);
    color: var(--text-soft);
    padding: 30px;
    height: 200px;
    overflow-y: scroll;
    border: 1px solid var(--accent);
    margin-bottom: 24px;
}

.pledge-scroll-box h4 {
    color: var(--accent-light);
    margin-bottom: 16px;
}

.pledge-scroll-box ol {
    padding-left: 20px;
}

.pledge-scroll-box li {
    font-size: 0.875rem;
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Form action button alignments */
.form-actions-wrapper {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    justify-content: flex-end;
}

.form-actions-wrapper.flex-between {
    justify-content: space-between;
}

/* Success Screen & Guild Badge generator */
.success-screen-wrapper {
    display: none;
    text-align: center;
    padding: 40px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    animation: scaleUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.success-screen-wrapper.active {
    display: block;
}

/* Custom Checkmark SVG Animation */
.success-animation {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px auto;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--success);
    fill: none;
    animation: strokeCheck 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke: var(--success);
    stroke-width: 3;
    stroke-linecap: round;
    animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

.success-title {
    font-size: 2.25rem;
    color: var(--forest);
    margin-bottom: 12px;
}

.success-desc {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto 2rem auto;
}

/* Guild Badge card simulation */
.guild-badge-generator {
    max-width: 380px;
    margin: 0 auto 3rem auto;
    background: var(--forest-dark);
    color: var(--text-main);
    border: 1px solid var(--accent);
    box-shadow: var(--shadow-md);
    text-align: left;
    position: relative;
    overflow: hidden;
}

.guild-badge-generator::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(53, 69, 80, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.badge-header {
    background-color: var(--forest);
    border-bottom: 1px solid var(--accent);
    padding: 12px 20px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent-light);
}

.badge-body {
    padding: 24px 20px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.badge-avatar {
    width: 56px;
    height: 56px;
    border: 1px dashed var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-light);
    font-size: 1.25rem;
}

.badge-details h4 {
    color: var(--text-main);
    font-size: 1.15rem;
    margin-bottom: 2px;
}

.badge-details p {
    margin-bottom: 0;
    font-size: 0.75rem;
}

.badge-status {
    color: var(--text-soft);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.badge-footer {
    background-color: var(--forest);
    border-top: 1px solid rgba(53, 69, 80, 0.2);
    padding: 10px 20px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-body);
    color: var(--accent-light);
    letter-spacing: 0.1em;
}

.success-instruction {
    font-size: 0.875rem;
    color: var(--text-muted);
    max-width: 500px;
    margin: 0 auto 2.5rem auto;
}

/* ==========================================================================
   ANIMATION KEYFRAMES & UTILITIES
   ========================================================================== */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes strokeCheck {
    to { stroke-dashoffset: 0; }
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Scroll Reveal Triggers */
.scroll-reveal {
    opacity: 0;
    transform: translateY(34px) scale(0.98);
    transition:
        opacity 0.9s ease-out,
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ==========================================================================
   CURRENT MARKUP REPAIR PASS
   These rules support the newer HTML structure used in index.html.
   ========================================================================== */

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

.section-container {
    width: min(1180px, calc(100vw - 48px));
    margin: 0 auto;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.noise-overlay {
    pointer-events: none;
}

.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    opacity: 0.035;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(53, 69, 80, 0.3) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 40%, rgba(26, 34, 39, 0.25) 0 1px, transparent 1px);
    background-size: 34px 34px, 47px 47px;
}

#hero-section {
    padding: 0 24px;
    text-align: left;
    background-image:
        linear-gradient(90deg, rgba(26, 34, 39, 0.98), rgba(26, 34, 39, 0.72));
}

.hero-split-container {
    width: min(1200px, 100%);
    min-height: calc(100vh - 80px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.84fr);
    align-items: center;
    gap: clamp(32px, 6vw, 84px);
    position: relative;
    z-index: 2;
}

.hero-left {
    position: relative;
    padding: clamp(32px, 5vw, 72px) 0;
}

.hero-bracket-top,
.hero-bracket-bottom {
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent), transparent);
    margin: 24px 0;
}

.hero-text-block {
    max-width: 720px;
}

.hero-title {
    display: block;
    font-size: clamp(3.2rem, 7vw, 6.8rem);
    max-width: 760px;
}

.hero-title .word {
    display: inline-block;
    margin-right: 0.16em;
    color: var(--text-main);
}

.hero-title .word:nth-child(even) {
    color: var(--accent-light);
}

.hero-subtitle {
    margin-left: 0;
    color: rgba(255, 255, 255, 0.82);
}

.hero-cta {
    justify-content: flex-start;
}

.hero-right {
    width: 100%;
}

.hero-image-frame {
    position: relative;
    min-height: 540px;
    overflow: hidden;
    border: 1px solid rgba(53, 69, 80, 0.55);
    box-shadow: 0 30px 90px rgba(26, 34, 39, 0.35);
}

.hero-image-frame img {
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
}

.hero-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(26, 34, 39, 0.05), rgba(26, 34, 39, 0.55));
}

#about-strip {
    background: var(--page-bg);
}

.about-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.about-strip-card {
    min-height: 285px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    padding: 34px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
}

.about-strip-card:hover {
    transform: translateY(-8px);
    border-color: var(--text-soft);
    box-shadow: var(--shadow-md);
}

.about-strip-card .card-title {
    color: var(--text-main);
}

.about-strip-card .card-desc {
    color: var(--text-muted);
}

.card-accent-hairline {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 0;
    height: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-smooth);
}

.about-strip-card:hover .card-accent-hairline {
    transform: scaleX(1);
}

#stats-bar {
    padding: 0 24px;
    background: var(--forest-dark);
}

.stats-container {
    width: min(1180px, calc(100vw - 48px));
    margin: 0 auto;
    min-height: 170px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 26px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--accent-light);
    line-height: 1;
}

.stat-divider {
    width: 1px;
    height: 70px;
    background: rgba(53, 69, 80, 0.35);
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 36px;
}

.carousel-nav-arrows {
    display: flex;
    gap: 12px;
}

.carousel-nav-arrows button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--accent);
    background: var(--surface);
    color: var(--forest);
    cursor: pointer;
}

.carousel-viewport {
    overflow-x: auto;
    padding-bottom: 16px;
}

.carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 310px);
    gap: 22px;
}

.spotlight-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-img-wrapper {
    height: 320px;
    position: relative;
    overflow: hidden;
}

.card-img-wrapper img,
.gallery-strip-item img,
.gallery-card img,
.registration-panel-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-dark-overlay,
.gallery-item-overlay,
.gallery-img-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card-dark-overlay {
    background: linear-gradient(180deg, transparent 35%, rgba(26, 34, 39, 0.8));
}

.badge-certified {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    color: var(--accent-light);
    background: rgba(26, 34, 39, 0.82);
    border: 1px solid rgba(53, 69, 80, 0.55);
    padding: 8px 10px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.card-info {
    padding: 22px;
}

.card-meta,
.card-specialty {
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

#gallery-strip {
    background: var(--surface-soft);
}

.gallery-offset-grid,
.gallery-masonry-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.gallery-strip-item,
.gallery-card {
    min-height: 260px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--forest-dark);
}

.gallery-strip-item:nth-child(2),
.gallery-strip-item:nth-child(5),
.gallery-card:nth-child(3n + 2) {
    transform: translateY(28px);
}

.gallery-item-overlay,
.gallery-img-overlay {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 20px;
    color: var(--text-on-dark);
    background: linear-gradient(180deg, transparent 30%, rgba(26, 34, 39, 0.82));
    opacity: 0;
    transition: var(--transition-fast);
}

.gallery-img-overlay {
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.gallery-strip-item:hover .gallery-item-overlay,
.gallery-card:hover .gallery-img-overlay {
    opacity: 1;
}

.gallery-item-caption {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--accent-light);
}

.gallery-footer-link {
    margin-top: 60px;
}

.link-accent {
    color: var(--text-soft);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.82rem;
}

#testimonials-section {
    background: var(--forest);
    color: var(--text-main);
}

.quote-icon {
    color: var(--text-soft);
    font-size: 2.4rem;
    text-align: center;
    margin-bottom: 22px;
}

.testimonials-slider-container {
    max-width: 920px;
    margin: 0 auto;
}

.testimonial-slide {
    display: none;
    text-align: center;
}

.testimonial-slide.active {
    display: block;
}

.testimonial-quote {
    font-family: var(--font-heading);
    color: var(--text-main);
    font-size: clamp(1.6rem, 4vw, 3rem);
    line-height: 1.25;
    margin-bottom: 32px;
}

.testimonial-author {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

.author-avatar {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--accent);
    color: var(--accent-light);
}

.author-name,
.author-location {
    display: block;
    text-align: left;
}

.author-name {
    color: var(--accent-light);
    font-style: normal;
    font-weight: 700;
}

.author-location {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.8rem;
}

#cta-banner {
    position: relative;
    overflow: hidden;
    background: var(--forest-dark);
}

.cta-banner-bg-grid {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image:
        linear-gradient(rgba(53, 69, 80, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(53, 69, 80, 0.35) 1px, transparent 1px);
    background-size: 42px 42px;
}

.cta-banner-content {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 auto;
}

.cta-banner-title {
    color: var(--accent-light);
    font-size: clamp(2rem, 5vw, 4.2rem);
}

.cta-banner-desc {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.1rem;
}

.footer-desc,
.contact-info,
.footer-bottom p {
    color: var(--text-muted);
}

.footer-title {
    color: var(--text-main);
    margin-bottom: 18px;
}

.footer-col ul {
    list-style: none;
}

.footer-social-icons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.footer-social-icons a {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(53, 69, 80, 0.4);
    color: var(--text-soft);
}

.panel-hero-bleed {
    height: 390px;
    position: relative;
    overflow: hidden;
    margin-bottom: 44px;
}

.panel-hero-bleed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bleed-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(26, 34, 39, 0.15), rgba(26, 34, 39, 0.85));
}

.panel-title-overlay {
    position: absolute;
    z-index: 2;
    left: 40px;
    bottom: 34px;
    color: var(--accent-light);
    font-size: clamp(2.4rem, 7vw, 5rem);
}

.panel-section {
    margin-bottom: 42px;
}

.panel-subheading {
    font-size: 2rem;
    margin-bottom: 18px;
}

.registration-panel-split {
    min-height: calc(100vh - 73px);
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
}

.registration-panel-left {
    position: sticky;
    top: 73px;
    height: calc(100vh - 73px);
    overflow: hidden;
    background: var(--forest-dark);
}

.reg-left-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(26, 34, 39, 0.22), rgba(26, 34, 39, 0.92));
}

.reg-left-content {
    position: absolute;
    z-index: 2;
    left: 42px;
    right: 42px;
    bottom: 46px;
}

.reg-left-content h2 {
    color: var(--accent-light);
    font-size: 4rem;
}

.tagline,
.oath {
    color: rgba(255, 255, 255, 0.82);
}

.registration-panel-right {
    padding: clamp(32px, 5vw, 72px);
    background: var(--page-bg);
}

.panel-title-left {
    font-size: clamp(2.4rem, 5vw, 4rem);
    margin-bottom: 24px;
}

.registration-progress-bar-wrapper {
    height: 4px;
    background: var(--surface-soft);
    margin-bottom: 16px;
}

.progress-bar-line {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--success));
    transition: width 0.35s ease;
}

.registration-step-labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 34px;
}

.step-lbl {
    border: 0;
    text-align: left;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: var(--transition-fast);
}

.step-lbl.active,
.step-lbl.completed {
    color: var(--forest);
}

.step-lbl:hover,
.step-lbl:focus-visible {
    color: var(--text-main);
    border-color: var(--line-strong);
    transform: translateY(-2px);
}

.step-lbl:focus-visible {
    outline: 2px solid var(--text-soft);
    outline-offset: 3px;
}

.reg-form-step {
    display: none;
}

.reg-form-step.active {
    display: block;
    animation: fadeIn 0.35s ease-out;
}

.step-section-title {
    font-size: 1.8rem;
    margin-bottom: 6px;
}

.step-section-desc {
    color: var(--text-muted);
    margin-bottom: 28px;
}

.form-group input[type="date"],
.form-group input[type="file"] {
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    background-color: var(--page-bg);
    border: 1px solid var(--line-soft);
    outline: none;
    transition: var(--transition-fast);
}

.custom-file-upload {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 12px;
}

.custom-file-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--forest);
    color: var(--accent-light);
    border: 1px solid var(--accent);
    padding: 12px 14px;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.upload-file-name {
    color: var(--text-muted);
    font-size: 0.86rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.toggle-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 14px;
}

.switch {
    position: relative;
    width: 54px;
    height: 30px;
}

.switch input {
    opacity: 0;
}

.slider {
    position: absolute;
    inset: 0;
    background: var(--surface-soft);
    border: 1px solid var(--accent);
    cursor: pointer;
    transition: var(--transition-fast);
}

.slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    background: var(--surface);
    transition: var(--transition-fast);
}

.switch input:checked + .slider {
    background: var(--forest);
}

.switch input:checked + .slider::before {
    transform: translateX(24px);
    background: var(--accent-light);
}

.membership-tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.tier-card-label input {
    position: absolute;
    opacity: 0;
}

.tier-card {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    cursor: pointer;
    transition: var(--transition-fast);
}

.tier-card-label input:checked + .tier-card {
    border-color: var(--text-soft);
    background: rgba(53, 69, 80, 0.08);
    box-shadow: var(--accent-glow);
}

.tier-badge {
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.tier-title {
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 800;
}

.tier-desc {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

#form-loading-overlay {
    display: none;
}

#form-loading-overlay.active {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    gap: 16px;
    padding: 24px;
    text-align: center;
    background: rgba(26, 34, 39, 0.88);
    color: var(--white);
    backdrop-filter: blur(10px);
}

#form-loading-overlay.active .loading-spinner {
    width: 46px;
    height: 46px;
    border: 3px solid var(--line-soft);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

#form-loading-overlay.active p {
    max-width: 360px;
    margin: 0;
    color: var(--text-soft);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#registration-success-state {
    display: none;
    position: relative;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    padding: clamp(28px, 5vw, 54px);
}

#registration-success-state.active {
    display: block;
    animation: scaleUp 0.4s ease-out;
}

.success-icon-wrapper {
    width: 82px;
    height: 82px;
    margin: 0 auto 22px;
}

.success-checkmark-svg {
    width: 82px;
    height: 82px;
}

.success-desc-sub {
    color: var(--text-muted);
    max-width: 620px;
    margin: 0 auto 30px;
}

.badge-avatar-frame {
    width: 66px;
    height: 66px;
    border: 1px solid var(--accent);
    overflow: hidden;
}

.badge-avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.badge-pending {
    color: var(--accent-light);
}

#lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(26, 34, 39, 0.92);
}

#lightbox-overlay.active {
    display: flex;
}

.close-lightbox {
    position: absolute;
    top: 24px;
    right: 28px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent-light);
    font-size: 2rem;
    cursor: pointer;
}

.lightbox-content-wrapper {
    max-width: min(1000px, 92vw);
    max-height: 86vh;
}

#lightbox-img {
    max-width: 100%;
    max-height: 76vh;
    object-fit: contain;
    border: 1px solid rgba(53, 69, 80, 0.45);
}

#lightbox-caption {
    margin-top: 14px;
    color: var(--text-main);
    text-align: center;
}

/* Palette readability tuning */
#benefits-section,
#stats-bar,
#testimonials-section,
#cta-banner,
#main-footer,
.panel-header,
.registration-panel-left,
.guild-badge-generator,
.pledge-scroll-box {
    color: var(--text-on-dark);
}

#benefits-section p,
#benefits-section .card-desc,
#stats-bar .stat-label,
#testimonials-section p,
#cta-banner p,
#main-footer p,
#main-footer a,
#main-footer .footer-desc,
#main-footer .contact-info,
#main-footer .footer-bottom p,
.registration-panel-left p,
.pledge-scroll-box li,
.pledge-scroll-box p,
.guild-badge-generator p {
    color: var(--text-on-dark-muted);
}

#main-footer .footer-title,
#main-footer .footer-logo,
#main-footer h4,
#benefits-section h2,
#testimonials-section h2,
#cta-banner h2 {
    color: var(--text-on-dark);
}

.panel-body,
#about-strip,
#gallery-strip,
.registration-panel-right {
    background-color: var(--text-soft);
}

.about-strip-card,
.spotlight-card,
.barber-card,
.member-profile,
.event-item,
.search-controls-wrapper,
.no-results-msg,
.form-step-section,
.tier-card,
#registration-success-state {
    background-color: var(--surface);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="file"],
.form-group select,
.search-bar input,
.filter-dropdowns select {
    background-color: var(--text-soft);
    color: var(--text-main);
    border-color: var(--line-soft);
}

.form-group input:focus,
.form-group select:focus,
.search-bar input:focus,
.filter-dropdowns select:focus {
    background-color: var(--surface);
    border-color: var(--text-soft);
}

.section-desc,
.step-section-desc,
.card-meta,
.card-specialty,
.barber-shop,
.tier-desc,
.upload-file-name,
.success-desc-sub {
    color: var(--text-muted);
}

/* Landing page restructure */
.landing-section {
    position: relative;
    overflow: hidden;
}

.split-feature-grid,
.standards-layout,
.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

.section-copy {
    max-width: 680px;
}

.section-copy .btn {
    margin-top: 18px;
}

.association-seal-card {
    display: grid;
    grid-template-columns: minmax(96px, 160px) 1fr;
    align-items: center;
    gap: 24px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    padding: clamp(20px, 4vw, 36px);
    box-shadow: var(--shadow-md);
}

.association-seal-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
}

.seal-caption {
    display: grid;
    gap: 8px;
}

.seal-caption strong {
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1.05;
    text-transform: uppercase;
}

.seal-caption span {
    color: var(--text-soft);
    line-height: 1.55;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.benefit-card {
    min-height: 250px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    padding: clamp(22px, 3vw, 34px);
    box-shadow: var(--shadow-sm);
}

.benefit-card i {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--text-main);
    background: var(--accent);
    margin-bottom: 22px;
}

.benefit-card h3,
.directory-preview-card h3,
.standard-row strong {
    color: var(--text-main);
}

.benefit-card p,
.directory-preview-card p,
.directory-preview-card small,
.standard-row p,
.faq-item p {
    color: var(--text-soft);
}

.standards-checklist {
    display: grid;
    gap: 14px;
}

.standard-row {
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 18px;
    row-gap: 6px;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
}

.standard-row span {
    grid-row: span 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--text-main);
    font-weight: 800;
}

.standard-row strong {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    text-transform: uppercase;
}

.standard-row p {
    margin: 0;
}

.directory-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.directory-preview-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    padding: 24px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
}

.member-initials {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 1.45rem;
}

.compact-gallery {
    grid-template-columns: 1.2fr 0.9fr 0.9fr;
}

.faq-list {
    display: grid;
    gap: 14px;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    padding: 0;
}

.faq-item summary {
    cursor: pointer;
    padding: 20px 22px;
    color: var(--text-main);
    font-weight: 800;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    float: right;
    color: var(--text-soft);
}

.faq-item[open] summary::after {
    content: '-';
}

.faq-item p {
    padding: 0 22px 22px;
    margin: 0;
}

/* Dark editorial cards */
#why-join-section,
#standards-section,
#directory-preview-section {
    background:
        radial-gradient(circle at 12% 8%, rgba(53, 69, 80, 0.32), transparent 32%),
        linear-gradient(180deg, var(--black-denim), var(--old-black));
}

#why-join-section .section-header-center {
    max-width: 980px;
}

#why-join-section .section-title {
    font-size: clamp(2.5rem, 5vw, 4.75rem);
}

.benefit-grid {
    gap: 24px;
}

.benefit-card {
    position: relative;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(26, 34, 39, 0.1), rgba(26, 34, 39, 0.92) 52%, rgba(51, 51, 51, 0.98)),
        var(--card-img, linear-gradient(145deg, rgba(53, 69, 80, 0.8), rgba(51, 51, 51, 0.96))),
        linear-gradient(145deg, rgba(53, 69, 80, 0.8), rgba(51, 51, 51, 0.96));
    background-size: cover;
    background-position: center;
    border: 1px solid var(--line-strong);
    box-shadow: 0 24px 60px rgba(26, 34, 39, 0.42);
}

.benefit-card::before {
    content: '';
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.benefit-card::after {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 170px;
    height: 170px;
    background: rgba(255, 255, 255, 0.05);
    transform: rotate(35deg);
}

.benefit-card i {
    position: absolute;
    top: 28px;
    left: 28px;
    width: 58px;
    height: 58px;
    background: var(--black-denim);
    border: 1px solid var(--line-soft);
}

.benefit-card h3 {
    position: relative;
    z-index: 1;
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    margin-bottom: 12px;
}

.benefit-card p {
    position: relative;
    z-index: 1;
    max-width: 34ch;
    margin: 0;
    color: var(--light-gray);
}

.benefit-card:hover {
    transform: translateY(-10px) scale(1.015);
    border-color: var(--line-strong);
    box-shadow: 0 34px 90px rgba(26, 34, 39, 0.55);
}

.standards-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
}

.standards-checklist {
    gap: 0;
    counter-reset: standard-step;
}

.standard-row {
    position: relative;
    grid-template-columns: 68px 1fr;
    padding: 28px;
    background: transparent;
    border: none;
    border-left: 1px solid var(--line-strong);
}

.standard-row + .standard-row {
    border-top: 1px solid var(--line-soft);
}

.standard-row span {
    width: 52px;
    height: 52px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
}

.standard-row strong {
    font-size: clamp(1.35rem, 2.5vw, 1.9rem);
}

.standard-row p {
    max-width: 58ch;
    font-size: 1.05rem;
}

#directory-preview-section .section-header-row {
    align-items: center;
}

.directory-preview-grid {
    gap: 24px;
}

.directory-preview-card {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    background:
        linear-gradient(180deg, rgba(26, 34, 39, 0.08), rgba(26, 34, 39, 0.94) 60%, rgba(51, 51, 51, 0.98)),
        var(--member-img, linear-gradient(180deg, rgba(53, 69, 80, 0.52), rgba(51, 51, 51, 0.98))),
        linear-gradient(180deg, rgba(53, 69, 80, 0.52), rgba(51, 51, 51, 0.98));
    background-size: cover;
    background-position: center top;
    border: 1px solid var(--line-strong);
    box-shadow: 0 22px 55px rgba(26, 34, 39, 0.34);
}

.directory-preview-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 80px rgba(26, 34, 39, 0.48);
}

.directory-preview-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 28%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 34%);
    pointer-events: none;
}

.member-initials {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    background: var(--black-denim);
    border: 1px solid var(--line-soft);
}

.directory-preview-card h3,
.directory-preview-card p,
.directory-preview-card small {
    position: relative;
    z-index: 1;
}

.directory-preview-card h3 {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.directory-preview-card p {
    color: var(--text-main);
}

.directory-preview-card small {
    display: block;
    color: var(--light-gray);
    font-size: 0.95rem;
    line-height: 1.55;
}

/* Closing sequence: gallery, FAQ, CTA, footer */
#gallery-strip.landing-section {
    background:
        linear-gradient(180deg, var(--old-black), var(--black-denim));
    border-top: 1px solid var(--line-soft);
}

#gallery-strip .section-header-center {
    max-width: 860px;
    margin-bottom: clamp(2.8rem, 6vw, 5rem);
}

#gallery-strip .section-title {
    color: var(--text-main);
    font-size: clamp(2.6rem, 5.5vw, 5rem);
}

.compact-gallery {
    grid-template-columns: 1.15fr 0.9fr 1fr;
    gap: 24px;
    align-items: end;
}

.compact-gallery .gallery-strip-item {
    min-height: clamp(280px, 32vw, 520px);
    border: 1px solid var(--line-strong);
    box-shadow: 0 28px 72px rgba(26, 34, 39, 0.48);
}

.compact-gallery .gallery-strip-item:nth-child(2) {
    min-height: clamp(240px, 27vw, 440px);
    transform: translateY(40px);
}

.compact-gallery .gallery-strip-item:nth-child(3) {
    min-height: clamp(300px, 35vw, 560px);
}

.gallery-item-overlay {
    opacity: 1;
    padding: 28px;
    background:
        linear-gradient(180deg, transparent 38%, rgba(26, 34, 39, 0.92));
}

.gallery-strip-item img,
.gallery-card img,
.hero-image-frame img,
.association-seal-card img {
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s ease;
}

.gallery-strip-item:hover img,
.gallery-card:hover img,
.hero-image-frame:hover img {
    transform: scale(1.065);
    filter: contrast(1.08);
}

.association-seal-card:hover img {
    transform: scale(1.04) rotate(-1deg);
}

.gallery-item-caption {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.gallery-item-caption::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--text-main);
}

#faq-section {
    background:
        radial-gradient(circle at 90% 0%, rgba(53, 69, 80, 0.38), transparent 34%),
        var(--black-denim);
}

.faq-layout {
    align-items: start;
}

.faq-item {
    background:
        linear-gradient(145deg, rgba(53, 69, 80, 0.42), rgba(51, 51, 51, 0.98));
    border-color: var(--line-strong);
    box-shadow: 0 18px 42px rgba(26, 34, 39, 0.26);
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.faq-item:hover,
.faq-item[open] {
    transform: translateX(6px);
    border-color: var(--line-strong);
}

.faq-item + .faq-item {
    margin-top: 4px;
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    text-transform: uppercase;
}

.faq-item summary::after {
    float: none;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: var(--black-denim);
    border: 1px solid var(--line-soft);
}

.faq-item p {
    color: var(--light-gray);
    font-size: 1rem;
    line-height: 1.7;
}

#cta-banner.landing-section {
    min-height: 480px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(26, 34, 39, 0.96), rgba(53, 69, 80, 0.82)),
        var(--cta-bg, linear-gradient(135deg, rgba(26, 34, 39, 0.96), rgba(53, 69, 80, 0.82)));
    background-size: cover;
    background-position: center;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

#cta-banner .cta-banner-bg-grid {
    opacity: 0.14;
}

.cta-banner-content {
    max-width: 940px;
    padding: clamp(28px, 5vw, 64px);
    border: 1px solid var(--line-strong);
    background: rgba(26, 34, 39, 0.72);
    backdrop-filter: blur(6px);
    box-shadow: 0 30px 90px rgba(26, 34, 39, 0.42);
    transform: translateZ(0);
}

.cta-banner-title {
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.95;
    margin-bottom: 1.25rem;
}

.cta-banner-desc {
    max-width: 690px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-soft);
}

#main-footer {
    background:
        linear-gradient(180deg, var(--black-denim), var(--old-black));
    border-top: 1px solid var(--line-strong);
}

.footer-container {
    align-items: start;
}

.brand-col {
    max-width: 420px;
}

/* No drop shadow: with a transparent mark there is no disc to cast one, so it
   would render as a stray dark smudge behind the artwork. */
.footer-logo-img {
    box-shadow: none;
}

.footer-title {
    letter-spacing: 0.08em;
}

.footer-col li + li {
    margin-top: 10px;
}

.footer-col a,
.contact-info {
    color: var(--text-soft);
}

.footer-col a:hover {
    color: var(--text-main);
}

.footer-social-icons a {
    background: var(--surface);
    border-color: var(--line-soft);
}

.footer-social-icons a:hover {
    background: var(--accent);
    color: var(--text-main);
}

.footer-bottom {
    border-top-color: var(--line-soft);
}

/* Compact hero refinement */
#hero-section {
    min-height: clamp(600px, 76vh, 760px);
    padding: 0 24px;
}

.hero-split-container {
    min-height: clamp(520px, 70vh, 680px);
    gap: clamp(26px, 4.5vw, 64px);
}

.hero-left {
    padding: clamp(24px, 4vw, 52px) 0;
}

.hero-bracket-top,
.hero-bracket-bottom {
    margin: 16px 0;
}

.hero-title {
    font-size: clamp(2.8rem, 5.8vw, 5.7rem);
    margin-bottom: 1.2rem;
}

.hero-subtitle {
    max-width: 610px;
    margin-bottom: 2rem;
}

.hero-image-frame,
.hero-image-frame img {
    min-height: clamp(360px, 46vh, 470px);
}

/* Final strict-palette contrast pass */
.section-badge,
.hero-tag,
.logo-guild,
#desktop-nav a:hover,
.mobile-nav-links a:hover,
.btn-close-panel,
.panel-header-badge,
.event-meta,
.event-tag,
.event-tag-alt,
.badge-header,
.badge-footer,
.tier-badge,
.link-accent,
.footer-social-icons a,
.footer-socials a,
.stat-number,
.quote-icon,
.author-name,
.gallery-item-caption,
.cta-banner-title,
.panel-title-overlay,
.reg-left-content h2 {
    color: var(--text-main);
}

#desktop-nav a,
.mobile-nav-links a,
.hero-subtitle,
.cta-banner-desc,
.testimonial-quote,
.card-desc,
.event-summary,
.contact-info,
.footer-desc,
.footer-bottom p,
.barber-info-row,
.form-group label,
.checkbox-container,
.toggle-label,
.step-lbl,
.tier-desc {
    color: var(--text-soft);
}

.about-strip-card,
.spotlight-card,
.barber-card,
.member-profile,
.event-item,
.search-controls-wrapper,
.no-results-msg,
.form-step-section,
.tier-card,
#registration-success-state,
.panel-body-container {
    border-color: var(--line-soft);
}

.btn-accent,
.btn-accent-outline:hover {
    background: var(--accent);
    color: var(--text-main);
    border-color: var(--line-strong);
}

.btn-outline,
.btn-accent-outline {
    color: var(--text-main);
    border-color: var(--line-strong);
}

.btn-outline:hover {
    background: var(--surface);
    color: var(--text-main);
    border-color: var(--line-strong);
}

.form-group.has-error input,
.form-group.has-error select {
    border-color: var(--mid-gray);
    background-color: var(--surface-soft);
}

/* About section polish */
#about-strip.section-about {
    background:
        linear-gradient(135deg, rgba(26, 34, 39, 0.98), rgba(40, 40, 40, 0.96)),
        radial-gradient(circle at 85% 20%, rgba(53, 69, 80, 0.58), transparent 34%);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

#about-strip .split-feature-grid {
    align-items: stretch;
}

#about-strip .section-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 420px;
}

#about-strip .section-badge {
    color: var(--text-soft);
}

#about-strip .section-title {
    color: var(--text-main);
    max-width: 760px;
    margin-bottom: 1.25rem;
}

#about-strip .section-desc {
    color: var(--text-soft);
    max-width: 710px;
    font-size: clamp(1rem, 2vw, 1.18rem);
}

#about-strip .btn-outline {
    align-self: flex-start;
    color: var(--text-main);
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.06);
}

#about-strip .btn-outline:hover {
    background: var(--accent);
    border-color: var(--line-strong);
}

.association-seal-card {
    position: relative;
    min-height: 360px;
    align-self: center;
    grid-template-columns: 150px minmax(0, 1fr);
    background:
        linear-gradient(145deg, rgba(53, 69, 80, 0.72), rgba(40, 40, 40, 0.98));
    border: 1px solid var(--line-strong);
    box-shadow: 0 26px 70px rgba(26, 34, 39, 0.48);
}

.association-seal-card::before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

.association-seal-card img {
    position: relative;
    z-index: 1;
    box-shadow: 0 18px 40px rgba(26, 34, 39, 0.42);
}

.seal-caption {
    position: relative;
    z-index: 1;
}

.seal-caption strong {
    letter-spacing: 0.02em;
}

/* ==========================================================================
   MEDIA QUERY BREAKPOINTS (RESPONSIVE GRID)
   ========================================================================== */

@media (max-width: 992px) {
    .split-feature-grid,
    .standards-layout,
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .benefit-grid,
    .directory-preview-grid,
    .compact-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .standards-layout {
        grid-template-columns: 1fr;
    }

    .hero-split-container {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 40px 0 74px;
    }

    .hero-image-frame,
    .hero-image-frame img {
        min-height: 320px;
    }

    .about-cards-grid,
    .gallery-offset-grid,
    .gallery-masonry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .registration-panel-split {
        grid-template-columns: 1fr;
    }

    .registration-panel-left {
        position: relative;
        top: auto;
        height: 360px;
    }

    .membership-tiers-grid {
        grid-template-columns: 1fr;
    }

    .overview-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-container {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 40px;
    }

    .footer-pledge {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }

    .section-title {
        font-size: 2rem;
    }

    #desktop-nav {
        display: none;
    }

    #mobile-menu-toggle {
        display: flex;
    }

    #btn-header-join {
        display: inline-flex;
        min-height: 42px;
        padding: 0 16px;
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        white-space: nowrap;
    }

    .header-actions {
        gap: 12px;
    }

    .site-logo-img {
        width: 52px;
        height: 52px;
    }

    .logo-text {
        display: none;
    }

    .section-container {
        width: min(100%, calc(100vw - 32px));
    }

    #hero-section {
        padding: 0 16px;
        min-height: auto;
    }

    .hero-title {
        font-size: clamp(2.5rem, 13vw, 4rem);
    }

    .hero-subtitle {
        margin-bottom: 1.5rem;
    }

    .hero-image-frame,
    .hero-image-frame img {
        min-height: 260px;
    }

    .hero-cta,
    .cta-buttons,
    .form-actions-wrapper.flex-between {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-cta .btn,
    .form-actions-wrapper .btn {
        width: 100%;
    }

    .about-cards-grid,
    .benefit-grid,
    .directory-preview-grid,
    .compact-gallery,
    .gallery-offset-grid,
    .gallery-masonry-grid,
    .stats-container,
    .registration-step-labels {
        grid-template-columns: 1fr;
    }

    .association-seal-card {
        grid-template-columns: 1fr;
        text-align: center;
        min-height: auto;
        padding: 24px 18px;
    }

    .association-seal-card img {
        width: min(170px, 62vw);
        justify-self: center;
    }

    #about-strip .section-copy {
        min-height: auto;
    }

    #about-strip .btn-outline {
        width: 100%;
        align-self: stretch;
    }

    .standard-row {
        grid-template-columns: 1fr;
    }

    .standard-row span {
        grid-row: auto;
    }

    .benefit-card,
    .directory-preview-card,
    .faq-item summary,
    .faq-item p {
        padding-left: 18px;
        padding-right: 18px;
    }

    .benefit-card {
        min-height: 270px;
    }

    .standard-row {
        padding: 22px 0 22px 18px;
    }

    .directory-preview-card {
        min-height: 230px;
    }

    .footer-logo-img {
        width: 96px;
        height: 96px;
    }

    .stats-container {
        padding: 34px 0;
        gap: 20px;
    }

    .stat-divider {
        width: 100%;
        height: 1px;
    }

    .gallery-strip-item:nth-child(2),
    .gallery-strip-item:nth-child(5),
    .gallery-card:nth-child(3n + 2) {
        transform: none;
    }

    .compact-gallery .gallery-strip-item,
    .compact-gallery .gallery-strip-item:nth-child(2),
    .compact-gallery .gallery-strip-item:nth-child(3) {
        min-height: 340px;
        transform: none;
    }

    .gallery-item-overlay {
        padding: 20px;
    }

    .cta-banner-content {
        padding: 28px 18px;
    }

    #cta-banner.landing-section {
        min-height: 430px;
    }

    .section-header-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .registration-panel-right {
        padding: 30px 16px;
    }

    .registration-panel-left {
        height: 280px;
    }

    .reg-left-content {
        left: 22px;
        right: 22px;
        bottom: 24px;
    }

    .custom-file-upload {
        grid-template-columns: 1fr;
    }

    #lightbox-overlay {
        padding: 18px;
    }

    .overview-stats {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }

    .stat-card {
        flex: 1 1 200px;
        padding: 20px;
    }

    .search-controls-wrapper {
        grid-template-columns: 1fr;
    }

    .form-group-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .form-steps-indicator {
        margin-bottom: 2rem;
    }

    .step-indicator .step-label {
        display: none; /* Hide text label on mobile screens to save horizontal space */
    }

    .step-line {
        margin-top: -18px;
    }

    .panel-header {
        padding: 16px 20px;
    }

    .panel-body {
        padding: 2rem 16px;
    }

    .event-item {
        flex-direction: column;
    }

    .event-date {
        flex-direction: row;
        gap: 12px;
        min-width: 100%;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid var(--accent);
    }

    .event-date .day {
        font-size: 1.5rem;
    }

    .event-details {
        padding: 20px;
    }

    .cta-inner {
        padding: 40px 20px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Support for user reduced-motion specifications */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-delay: -1ms !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        background-attachment: initial !important;
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        transition-delay: 0s !important;
    }

    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Off-canvas gallery and membership redesign */
.gallery-panel-body {
    padding: clamp(34px, 5vw, 72px) 24px 80px;
    background:
        linear-gradient(135deg, rgba(53, 69, 80, 0.2), transparent 34%),
        var(--page-bg);
}

.gallery-panel-container {
    max-width: 1240px;
}

.gallery-panel-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 16px;
}

.gallery-panel-grid .gallery-card {
    min-height: 310px;
    grid-column: span 4;
    border: 1px solid var(--line-soft);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transform: none;
    isolation: isolate;
}

.gallery-panel-grid .gallery-card-feature {
    min-height: 520px;
    grid-column: span 7;
    grid-row: span 2;
}

.gallery-panel-grid .gallery-card-wide {
    grid-column: span 5;
}

.gallery-panel-grid .gallery-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(26, 34, 39, 0.02) 10%, rgba(26, 34, 39, 0.9) 100%);
    opacity: 0.88;
    transition: opacity 0.45s ease;
}

.gallery-panel-grid .gallery-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.12) contrast(1.05);
}

.gallery-panel-grid .gallery-img-overlay {
    position: absolute;
    inset: 18px 18px auto auto;
    z-index: 3;
    width: 46px;
    height: 46px;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--text-main);
    border: 1px solid var(--line-soft);
    opacity: 0;
}

.gallery-card-caption {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    z-index: 2;
    display: grid;
    gap: 7px;
    color: var(--text-on-dark);
}

.gallery-card-caption span {
    color: var(--text-on-dark-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.gallery-card-caption strong {
    color: var(--text-on-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 3vw, 2.2rem);
    line-height: 1.02;
}

.gallery-panel-grid .gallery-card:hover {
    border-color: var(--text-soft);
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}

.gallery-panel-grid .gallery-card:hover::before {
    opacity: 1;
}

.registration-panel-split {
    background: var(--page-bg);
    grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr);
}

.registration-panel-left {
    border-right: 1px solid var(--line-soft);
}

.registration-panel-left::after {
    content: '';
    position: absolute;
    inset: auto 28px 28px 28px;
    height: 1px;
    z-index: 2;
    background: var(--line-soft);
}

.registration-panel-left > img:not(.reg-panel-logo) {
    filter: grayscale(0.18) contrast(1.08);
    transform: scale(1.02);
}

.registration-panel-left:hover > img:not(.reg-panel-logo) {
    transform: scale(1.06);
}

.reg-left-overlay {
    background:
        linear-gradient(180deg, rgba(26, 34, 39, 0.12), rgba(26, 34, 39, 0.94)),
        linear-gradient(90deg, rgba(26, 34, 39, 0.84), rgba(26, 34, 39, 0.12));
}

.reg-left-content {
    max-width: 520px;
}

#panel-register .reg-panel-logo {
    width: 76px;
    height: 76px;
    min-width: 0;
    min-height: 0;
    max-width: 76px;
    max-height: 76px;
    display: block;
    object-fit: contain;
    object-position: center;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    padding: 6px;
    margin-bottom: 26px;
    box-shadow: var(--shadow-sm);
}

.reg-left-content h2 {
    color: var(--text-on-dark);
    font-size: clamp(3rem, 8vw, 5.8rem);
    line-height: 0.92;
    margin: 10px 0 16px;
}

.reg-left-content .tagline {
    max-width: 430px;
    color: var(--text-on-dark-muted);
    font-size: 1.08rem;
    line-height: 1.7;
}

.membership-proof-list {
    display: grid;
    gap: 10px;
    margin-top: 28px;
}

.membership-proof-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-on-dark);
    font-weight: 800;
    font-size: 0.9rem;
}

.membership-proof-list i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    background: var(--charcoal-blue);
    color: var(--text-on-dark);
    font-size: 0.72rem;
}

.registration-panel-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 73px);
    background:
        linear-gradient(135deg, rgba(53, 69, 80, 0.18), transparent 34%),
        var(--surface-soft);
}

.registration-panel-intro {
    max-width: 760px;
    margin-bottom: 28px;
}

.registration-panel-intro p {
    max-width: 620px;
    color: var(--text-muted);
    font-size: 1rem;
}

.panel-title-left {
    color: var(--text-main);
    font-size: clamp(2.6rem, 6vw, 5rem);
    line-height: 0.98;
    margin: 10px 0 14px;
}

.registration-progress-bar-wrapper {
    max-width: 760px;
    height: 6px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    margin-bottom: 14px;
}

.progress-bar-line {
    background: var(--charcoal-blue);
}

.registration-step-labels {
    max-width: 760px;
    margin-bottom: 26px;
}

.step-lbl {
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    color: var(--text-muted);
}

.step-lbl.active,
.step-lbl.completed {
    background: var(--black-denim);
    color: var(--text-on-dark);
    border-color: var(--charcoal-blue);
}

#barber-registration-form {
    max-width: 840px;
    background: var(--surface);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
    padding: clamp(22px, 4vw, 40px);
}

#registration-form-notice {
    display: none;
    max-width: 840px;
    margin: 0 0 18px;
    padding: 14px 16px;
    background: var(--old-black);
    border: 1px solid var(--line-strong);
    color: var(--white);
    font-size: 0.92rem;
    font-weight: 700;
}

#registration-form-notice.active {
    display: block;
}

.step-section-title {
    color: var(--text-main);
    font-size: clamp(1.55rem, 3vw, 2.25rem);
}

.form-group {
    background: transparent;
}

.custom-file-upload {
    min-height: 52px;
    padding: 6px;
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
}

.upload-btn {
    background: var(--black-denim);
    color: var(--text-on-dark);
    border-color: var(--charcoal-blue);
}

.membership-tiers-grid {
    gap: 12px;
}

.tier-card {
    min-height: 178px;
    position: relative;
    padding: 20px;
    border-color: var(--line-soft);
    background: linear-gradient(180deg, var(--surface), var(--surface-soft));
}

.tier-card::after {
    content: '';
    position: absolute;
    top: 18px;
    right: 18px;
    width: 14px;
    height: 14px;
    border: 1px solid var(--text-muted);
    background: var(--surface);
}

.tier-card-label input:checked + .tier-card {
    border-color: var(--charcoal-blue);
    background: var(--black-denim);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}

.tier-card-label input:checked + .tier-card::after {
    background: var(--text-on-dark);
    border-color: var(--text-on-dark);
    box-shadow: inset 0 0 0 4px var(--charcoal-blue);
}

.tier-card-label input:checked + .tier-card .tier-title,
.tier-card-label input:checked + .tier-card .tier-badge {
    color: var(--text-on-dark);
}

.tier-card-label input:checked + .tier-card .tier-desc {
    color: var(--text-on-dark-muted);
}

.tier-badge {
    width: fit-content;
    padding: 6px 8px;
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    color: var(--text-main);
}

.tier-title {
    font-size: 1.7rem;
}

.highlight-checkbox {
    background: var(--surface-soft);
    border: 1px solid var(--line-soft);
    padding: 16px;
}

#registration-success-state {
    max-width: 840px;
    background: var(--surface);
}

@media (max-width: 1080px) {
    .registration-panel-split {
        grid-template-columns: 1fr;
    }

    .gallery-panel-grid .gallery-card,
    .gallery-panel-grid .gallery-card-feature,
    .gallery-panel-grid .gallery-card-wide {
        grid-column: span 6;
        grid-row: auto;
        min-height: 330px;
    }

    .registration-panel-right {
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .gallery-panel-body {
        padding: 28px 14px 58px;
    }

    .gallery-panel-grid {
        grid-template-columns: 1fr;
    }

    .gallery-panel-grid .gallery-card,
    .gallery-panel-grid .gallery-card-feature,
    .gallery-panel-grid .gallery-card-wide {
        grid-column: 1;
        min-height: 310px;
    }

    .gallery-card-caption {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .registration-panel-left {
        height: auto;
        min-height: 460px;
    }

    .reg-left-content {
        left: 22px;
        right: 22px;
        bottom: 34px;
    }

    .registration-panel-right {
        padding: 30px 14px;
    }

    #barber-registration-form {
        padding: 20px 14px;
    }

    .registration-step-labels {
        grid-template-columns: 1fr;
    }
}

/* Hero top spacing refinement */
#hero-section {
    justify-content: flex-start;
}

.hero-split-container {
    align-items: start;
    min-height: clamp(460px, 62vh, 620px);
    padding-top: clamp(20px, 4vh, 42px);
}

.hero-left {
    padding-top: 0;
}

.hero-bracket-top {
    margin-bottom: 20px;
}

@media (max-width: 980px) {
    .hero-split-container {
        padding-top: 26px;
    }
}

@media (max-width: 768px) {
    .hero-split-container {
        padding-top: 20px;
    }
}

/* Membership application form restructuring */
#panel-register .panel-header {
    background: var(--black-denim);
    border-bottom-color: var(--line-soft);
}

#panel-register .registration-panel-right {
    justify-content: flex-start;
    padding-top: clamp(28px, 5vw, 56px);
    background:
        linear-gradient(135deg, rgba(53, 69, 80, 0.16), transparent 32%),
        var(--black-denim);
}

#panel-register .registration-panel-intro {
    margin-bottom: 20px;
}

#panel-register .registration-panel-intro p,
#panel-register .step-section-desc {
    color: var(--text-soft);
}

#panel-register .registration-step-labels {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 1000px;
    gap: 8px;
}

#panel-register .step-lbl {
    min-height: 58px;
    display: flex;
    align-items: center;
    background: var(--surface);
    color: var(--text-muted);
    border-color: var(--line-soft);
    border-width: 1px;
    border-style: solid;
}

#panel-register .step-lbl.active,
#panel-register .step-lbl.completed {
    background: var(--charcoal-blue);
    color: var(--white);
    border-color: var(--line-strong);
}

#panel-register .step-lbl:hover,
#panel-register .step-lbl:focus-visible {
    background: var(--black-denim);
    color: var(--white);
}

#panel-register .registration-progress-bar-wrapper {
    max-width: 1000px;
    background: var(--surface);
    border-color: var(--line-soft);
}

#panel-register #barber-registration-form,
#panel-register #registration-success-state {
    max-width: 1000px;
    background: var(--dark-charcoal);
    border-color: var(--line-soft);
}

#panel-register .reg-form-step {
    max-width: 100%;
}

#panel-register .step-section-title {
    color: var(--white);
    font-size: clamp(2rem, 4vw, 3.6rem);
    margin-bottom: 8px;
}

.form-section-card,
.requirements-panel {
    padding: clamp(18px, 3vw, 26px);
    margin: 22px 0;
    background: var(--old-black);
    border: 1px solid var(--line-soft);
}

.form-mini-heading {
    display: block;
    margin-bottom: 16px;
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#panel-register .form-group label,
#panel-register .requirements-panel label,
#panel-register .toggle-label {
    color: var(--white);
}

#panel-register .form-group input,
#panel-register .form-group select,
#panel-register .form-group textarea {
    width: 100%;
    background: var(--black-denim);
    border: 1px solid var(--line-soft);
    color: var(--white);
    font-family: var(--font-body);
}

#panel-register .form-group input,
#panel-register .form-group select {
    min-height: 56px;
}

#panel-register .form-group textarea {
    min-height: 116px;
    padding: 16px;
    resize: vertical;
}

#panel-register .form-group input::placeholder,
#panel-register .form-group textarea::placeholder {
    color: var(--mid-gray);
}

#panel-register .form-group input:focus,
#panel-register .form-group select:focus,
#panel-register .form-group textarea:focus {
    border-color: var(--light-gray);
    background: var(--old-black);
}

#panel-register .custom-file-upload,
#panel-register .highlight-checkbox {
    background: var(--black-denim);
    border-color: var(--line-soft);
}

#panel-register .upload-file-name,
#panel-register .tier-desc {
    color: var(--text-soft);
}

#panel-register .membership-tiers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#panel-register .tier-card {
    background: var(--old-black);
    border-color: var(--line-soft);
}

#panel-register .tier-card-label input:checked + .tier-card {
    background: var(--charcoal-blue);
    border-color: var(--line-strong);
}

.requirements-panel {
    display: grid;
    gap: 12px;
}

.requirements-panel .checkbox-container {
    margin: 0;
    padding: 12px 14px;
    background: var(--black-denim);
    border: 1px solid var(--line-soft);
}

#panel-register .has-error input,
#panel-register .has-error select,
#panel-register .has-error textarea,
#panel-register .has-error.custom-file-upload,
#panel-register .has-error .custom-file-upload,
#panel-register .requirements-panel.has-error {
    border-color: var(--mid-gray);
    box-shadow: 0 0 0 1px var(--mid-gray);
}

@media (max-width: 1100px) {
    #panel-register .registration-step-labels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #panel-register .membership-tiers-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    #panel-register .registration-step-labels {
        grid-template-columns: 1fr;
    }

    #panel-register #barber-registration-form {
        padding: 18px 12px;
    }

    .form-section-card,
    .requirements-panel {
        padding: 16px 12px;
    }
}

/* Final responsive polish pass */
body {
    text-wrap: pretty;
}

img {
    max-width: 100%;
}

.btn,
.step-lbl,
.upload-btn,
.link-accent,
.section-badge,
.panel-header-badge {
    overflow-wrap: anywhere;
}

.site-logo-img,
.footer-logo-img,
.association-seal-card img {
    flex: 0 0 auto;
}

.off-canvas-panel {
    scrollbar-color: var(--charcoal-blue) var(--black-denim);
}

.off-canvas-panel::-webkit-scrollbar {
    width: 10px;
}

.off-canvas-panel::-webkit-scrollbar-track {
    background: var(--black-denim);
}

.off-canvas-panel::-webkit-scrollbar-thumb {
    background: var(--charcoal-blue);
    border: 2px solid var(--black-denim);
}

#panel-directory .search-bar input,
#panel-directory .filter-dropdowns select,
#panel-register .form-group input,
#panel-register .form-group select,
#panel-register .form-group textarea {
    caret-color: var(--white);
}

#panel-register input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.72;
}

.form-actions-wrapper {
    gap: 14px;
}

.lightbox-content-wrapper {
    width: min(100%, 1040px);
}

#lightbox-caption {
    color: var(--text-soft);
}

@media (max-width: 1100px) {
    .landing-section::before,
    #gallery-strip::after,
    #main-footer::before {
        opacity: 0.72;
    }

    .hero-title {
        max-width: 11ch;
    }

    .hero-credential-strip {
        width: min(100%, 560px);
    }

    .panel-title-overlay,
    .directory-panel-title,
    .panel-title-left {
        max-width: 10ch;
    }
}

@media (max-width: 768px) {
    .scroll-section,
    .landing-section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .section-title,
    .cta-banner-title,
    .panel-title-overlay,
    .directory-panel-title,
    .panel-title-left {
        max-width: 100%;
        word-break: normal;
        overflow-wrap: anywhere;
    }

    .landing-section::before,
    #gallery-strip::after,
    #main-footer::before,
    .hero-text-block::before,
    .association-seal-card::after {
        display: none;
    }

    .hero-split-container {
        padding-top: 18px;
        padding-bottom: 44px;
    }

    /**
     * The headline is sized by its LONGEST WORD, not by the line.
     *
     * "Brotherhood." is twelve characters and cannot be broken, so it — not the
     * sentence — sets the ceiling. In Oswald it measures about 6.7em, and
     * #hero-section leaves 24px of padding each side. The old 15vw put it at
     * 431px inside 312px of usable width on a 360px handset, and because body
     * has overflow-x: hidden it was silently sliced off rather than scrolling.
     *
     * 10.5vw keeps it inside the column from 320px upward with room to spare.
     */
    .hero-title {
        max-width: 100%;
        font-size: clamp(2rem, 10.5vw, 4rem);
    }

    .hero-tag {
        letter-spacing: 0.18em;
        line-height: 1.7;
    }

    .hero-credential-strip {
        margin: 22px 0;
    }

    .hero-image-frame {
        clip-path: none;
    }

    .hero-image-frame::before {
        inset: 12px;
    }

    .section-badge {
        letter-spacing: 0.16em;
        line-height: 1.6;
    }

    .section-badge::before {
        width: 26px;
    }

    .chapter-marquee-track {
        animation-duration: 44s;
    }

    .benefit-card,
    .benefit-card:first-child,
    .directory-preview-card,
    .gallery-strip-item,
    .compact-gallery .gallery-strip-item,
    .compact-gallery .gallery-strip-item:nth-child(2),
    .compact-gallery .gallery-strip-item:nth-child(3) {
        min-height: 300px;
    }

    .standards-checklist,
    .panel-section,
    .form-section-card,
    .requirements-panel {
        clip-path: none;
    }

    .standard-row {
        padding: 22px 0;
        border-left: 0;
    }

    .standard-row span {
        margin-bottom: 8px;
    }

    .faq-item:hover,
    .faq-item[open] {
        transform: none;
    }

    .faq-item summary {
        align-items: center;
    }

    .cta-banner-content {
        border-left: 0;
        border-right: 0;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .panel-header {
        min-height: 66px;
        gap: 12px;
    }

    .panel-header::after {
        display: none;
    }

    .btn-close-panel {
        min-height: 38px;
        padding: 0 10px;
    }

    .panel-header-badge {
        max-width: 48vw;
        letter-spacing: 0.14em;
        text-align: right;
    }

    .panel-hero-copy {
        left: 20px;
        right: 20px;
        bottom: 28px;
    }

    .panel-hero-bleed::after {
        inset: 14px;
    }

    #panel-register .registration-panel-left {
        min-height: 360px;
    }

    #panel-register .reg-left-content h2 {
        font-size: clamp(3rem, 18vw, 5.2rem);
    }

    #panel-register .reg-left-content h2::after {
        max-width: 100%;
    }

    #panel-register .registration-step-labels,
    #panel-register .form-group-row,
    #panel-directory .filter-dropdowns {
        grid-template-columns: 1fr;
    }

    #panel-register .step-lbl {
        min-height: 48px;
    }

    #panel-register .membership-proof-list span {
        align-items: flex-start;
    }

    #panel-directory .search-controls-wrapper {
        padding: 12px;
    }

    #panel-directory .barber-card {
        min-height: 260px;
    }
}

@media (max-width: 420px) {
    .header-container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .site-logo-img {
        width: 46px;
        height: 46px;
    }

    /* Smallest handsets: 11vw holds "Brotherhood." inside 272px at 320px wide. */
    .hero-title {
        font-size: clamp(1.75rem, 11vw, 2.9rem);
    }

    .btn {
        padding-left: 18px;
        padding-right: 18px;
        letter-spacing: 0.1em;
    }

    .panel-header {
        padding-left: 12px;
        padding-right: 12px;
    }

    .panel-header-badge {
        font-size: 0.64rem;
    }

    .panel-title-overlay,
    .directory-panel-title,
    .panel-title-left {
        font-size: clamp(2.5rem, 16vw, 4rem);
    }

    .about-charter-strip span {
        min-height: auto;
        padding: 16px;
    }

    .form-actions-wrapper .btn {
        width: 100%;
    }
}

/* Remove visible grid-line decoration */
#hero-section::before,
.off-canvas-panel::before,
.cta-banner-bg-grid {
    display: none;
    background-image: none;
}

/* Premium off-canvas panel pass */
.off-canvas-panel {
    background:
        radial-gradient(circle at 82% 10%, rgba(53, 69, 80, 0.22), transparent 28%),
        var(--black-denim);
}

.off-canvas-panel::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 78%);
}

.off-canvas-panel > * {
    position: relative;
    z-index: 1;
}

.panel-header {
    min-height: 74px;
    background: rgba(26, 34, 39, 0.94);
    border-bottom-color: var(--line-soft);
    backdrop-filter: blur(12px);
}

.panel-header::after {
    content: 'PBAU';
    position: absolute;
    left: 50%;
    top: 50%;
    color: rgba(255, 255, 255, 0.06);
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.panel-header-badge {
    border-left-color: var(--line-soft);
}

.btn-close-panel {
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line-soft);
}

.btn-close-panel:hover {
    border-color: var(--line-strong);
    background: var(--surface);
}

.about-panel-body {
    padding: 0 24px 90px;
    background:
        linear-gradient(180deg, var(--black-denim), var(--old-black));
}

.about-panel-container {
    max-width: 1180px;
}

.panel-hero-bleed {
    height: clamp(430px, 58vh, 640px);
    margin: 0 0 40px;
    border-left: 1px solid var(--line-soft);
    border-right: 1px solid var(--line-soft);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%);
}

.panel-hero-bleed::after {
    content: '';
    position: absolute;
    inset: 22px;
    z-index: 2;
    border: 1px solid var(--line-soft);
    pointer-events: none;
}

.panel-hero-copy {
    position: absolute;
    left: clamp(24px, 5vw, 70px);
    right: clamp(24px, 5vw, 70px);
    bottom: clamp(28px, 6vw, 72px);
    z-index: 3;
    max-width: 760px;
}

.panel-title-overlay {
    position: static;
    color: var(--white);
    font-size: clamp(3.5rem, 9vw, 8rem);
    line-height: 0.9;
    margin: 8px 0 18px;
}

.panel-hero-copy p {
    max-width: 620px;
    color: var(--text-soft);
    font-size: 1.08rem;
}

.about-charter-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 42px;
    border: 1px solid var(--line-soft);
    background: var(--dark-charcoal);
}

.about-charter-strip span {
    display: grid;
    gap: 6px;
    min-height: 104px;
    padding: 22px;
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-right: 1px solid var(--line-soft);
}

.about-charter-strip span:last-child {
    border-right: 0;
}

.about-charter-strip strong {
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1;
}

.panel-section {
    position: relative;
    padding: clamp(26px, 4vw, 46px);
    margin-bottom: 24px;
    background:
        linear-gradient(145deg, rgba(53, 69, 80, 0.16), rgba(51, 51, 51, 0.94));
    border: 1px solid var(--line-soft);
}

.panel-section::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 22px;
    width: 42px;
    height: 1px;
    background: var(--text-soft);
}

.panel-subheading {
    color: var(--white);
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    line-height: 0.98;
    margin: 12px 0 22px;
}

.panel-section p {
    color: var(--text-soft);
    max-width: 74ch;
}

.three-col-grid,
.committee-grid {
    display: grid;
    /* auto-fit rather than a fixed 3 columns, so the council can grow or
       shrink without leaving an orphan card on its own row. */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}

.grid-column,
.board-member,
.partners-logos-strip span {
    background: var(--black-denim);
    border: 1px solid var(--line-soft);
}

.grid-column {
    padding: 22px;
}

.grid-column h4,
.board-member h4 {
    color: var(--white);
    font-size: 1.35rem;
}

.board-member {
    position: relative;
    min-height: 190px;
    padding: 24px 22px 26px;
    overflow: hidden;
}

.board-member::after {
    content: 'Council';
    position: absolute;
    right: 16px;
    bottom: 12px;
    color: rgba(255, 255, 255, 0.06);
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: 900;
}

/* Council portraits. Was a 54px icon tile; now holds a real photograph. */
.board-avatar {
    width: 100%;
    max-width: 168px;
    aspect-ratio: 4 / 5;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    background: var(--charcoal-blue);
    color: var(--white);
    overflow: hidden;
    border: 1px solid var(--line-soft);
}

.board-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    /* Crop toward the top so faces stay in frame on any aspect ratio. */
    object-fit: cover;
    object-position: center 18%;
    filter: grayscale(100%) contrast(1.05);
    transition: filter .35s ease, transform .35s ease;
}

.board-member:hover .board-avatar img {
    filter: grayscale(0%) contrast(1);
    transform: scale(1.03);
}

/* Fallback for the icon version, in case a member has no photo yet. */
.board-avatar > i {
    font-size: 1.6rem;
}

.partners-logos-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.partners-logos-strip span {
    min-height: 82px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    color: var(--text-soft);
    font-weight: 800;
}

#panel-directory .directory-panel-intro,
#panel-register .registration-panel-intro {
    position: relative;
    padding-left: 22px;
    border-left: 1px solid var(--line-strong);
}

#panel-directory .directory-panel-title,
#panel-register .panel-title-left {
    text-transform: uppercase;
}

#panel-directory .search-controls-wrapper,
#panel-register #barber-registration-form {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

#panel-directory .barber-card {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}

#panel-directory .barber-card::after {
    content: 'Registered';
    position: absolute;
    right: 22px;
    bottom: 20px;
    color: rgba(255, 255, 255, 0.08);
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    font-weight: 900;
    line-height: 0.8;
    pointer-events: none;
}

#panel-gallery .gallery-panel-grid .gallery-card {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

#panel-register .registration-panel-left::before {
    content: 'Application Desk';
    position: absolute;
    left: clamp(24px, 4vw, 52px);
    top: clamp(24px, 4vw, 52px);
    z-index: 2;
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

#panel-register .reg-left-content h2::after {
    content: 'Membership intake / Sacco verification / Public register';
    display: block;
    max-width: 340px;
    margin-top: 20px;
    color: var(--text-soft);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    line-height: 1.7;
    text-transform: uppercase;
}

#panel-register .form-section-card,
#panel-register .requirements-panel,
#panel-register .tier-card {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

#panel-register .reg-form-step.active {
    animation: panelStepEnter 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes panelStepEnter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 980px) {
    .about-charter-strip,
    .three-col-grid,
    .committee-grid,
    .partners-logos-strip {
        grid-template-columns: 1fr;
    }

    .about-charter-strip span {
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .about-charter-strip span:last-child {
        border-bottom: 0;
    }

}

@media (max-width: 680px) {
    .about-panel-body {
        padding-left: 14px;
        padding-right: 14px;
    }

    .panel-hero-bleed {
        height: 440px;
        clip-path: none;
    }

    .panel-section {
        padding: 24px 16px;
    }
}

/* Premium identity pass, phase two */
.chapter-marquee {
    overflow: hidden;
    background: var(--dark-charcoal);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.chapter-marquee-track {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 0;
    animation: chapterScroll 32s linear infinite;
}

.chapter-marquee span {
    display: inline-flex;
    align-items: center;
    min-height: 58px;
    padding: 0 34px;
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-right: 1px solid var(--line-soft);
}

.chapter-marquee span::before {
    content: '';
    width: 7px;
    height: 7px;
    margin-right: 16px;
    background: var(--charcoal-blue);
    transform: rotate(45deg);
}

#about-strip {
    background:
        linear-gradient(180deg, var(--black-denim), var(--old-black));
}

#about-strip .section-copy {
    position: relative;
}

#about-strip .section-copy::after {
    content: 'Association Charter';
    display: inline-flex;
    width: fit-content;
    margin-top: 28px;
    padding: 10px 12px;
    border: 1px solid var(--line-soft);
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.association-seal-card {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}

.association-seal-card::after {
    content: 'PBAU';
    position: absolute;
    right: 18px;
    bottom: -8px;
    color: rgba(255, 255, 255, 0.06);
    font-family: var(--font-heading);
    font-size: clamp(5rem, 12vw, 10rem);
    font-weight: 900;
    line-height: 0.8;
    pointer-events: none;
}

#why-join-section .section-header-center {
    position: relative;
}

#why-join-section .section-header-center::before {
    content: '01 / Member Value';
    display: block;
    margin-bottom: 16px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.benefit-card::before {
    inset: 18px;
}

.benefit-card:hover::before {
    border-color: var(--line-strong);
}

.benefit-card h3::before {
    content: '';
    display: block;
    width: 42px;
    height: 2px;
    margin-bottom: 14px;
    background: var(--text-soft);
    transform-origin: left;
    transform: scaleX(0.45);
    transition: transform 0.35s ease;
}

.benefit-card:hover h3::before {
    transform: scaleX(1);
}

#standards-section {
    background:
        linear-gradient(90deg, var(--black-denim), var(--old-black));
}

#standards-section .section-copy {
    align-self: center;
}

.standards-checklist {
    position: relative;
    padding: clamp(18px, 3vw, 34px);
    background:
        linear-gradient(145deg, rgba(53, 69, 80, 0.28), rgba(51, 51, 51, 0.96));
    border: 1px solid var(--line-soft);
}

.standards-checklist::before {
    content: '';
    position: absolute;
    inset: 14px;
    border: 1px solid var(--line-soft);
    pointer-events: none;
}

.standard-row {
    z-index: 1;
}

.standard-document-stamp {
    position: relative;
    z-index: 1;
    margin-top: 22px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--line-soft);
    background: var(--black-denim);
}

.standard-document-stamp span,
.standard-document-stamp strong {
    color: var(--white);
    text-transform: uppercase;
}

.standard-document-stamp span {
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.standard-document-stamp strong {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2vw, 2rem);
}

#directory-preview-section {
    background:
        radial-gradient(circle at 82% 12%, rgba(53, 69, 80, 0.3), transparent 30%),
        var(--old-black);
}

#directory-preview-section .section-header-row {
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 26px;
}

.directory-preview-card {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

.directory-preview-card::after {
    padding: 7px 9px;
    background: rgba(26, 34, 39, 0.78);
    border: 1px solid var(--line-soft);
}

.member-initials::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1px solid var(--line-soft);
}

#gallery-strip {
    position: relative;
}

#gallery-strip::after {
    content: 'Media Archive';
    position: absolute;
    left: clamp(14px, 3vw, 42px);
    bottom: clamp(14px, 3vw, 42px);
    color: rgba(255, 255, 255, 0.06);
    font-family: var(--font-heading);
    font-size: clamp(4rem, 10vw, 12rem);
    font-weight: 900;
    line-height: 0.8;
    pointer-events: none;
}

.gallery-strip-item {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), calc(100% - 34px) 100%, 0 100%);
}

#faq-section .section-copy {
    position: sticky;
    top: 120px;
}

.faq-item summary::before {
    content: 'Q';
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: var(--black-denim);
    border: 1px solid var(--line-soft);
    color: var(--text-soft);
    font-family: var(--font-body);
    font-size: 0.78rem;
}

.cta-banner-content::before,
.cta-banner-content::after {
    content: '';
    position: absolute;
    width: 58px;
    height: 58px;
    pointer-events: none;
}

.cta-banner-content::before {
    left: 18px;
    top: 18px;
    border-left: 1px solid var(--line-strong);
    border-top: 1px solid var(--line-strong);
}

.cta-banner-content::after {
    right: 18px;
    bottom: 18px;
    border-right: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
}

#main-footer {
    position: relative;
    overflow: hidden;
}

#main-footer::before {
    content: 'Professional Barbers Association Uganda';
    position: absolute;
    left: 24px;
    bottom: -0.14em;
    color: rgba(255, 255, 255, 0.035);
    font-family: var(--font-heading);
    font-size: clamp(4rem, 10vw, 10rem);
    font-weight: 900;
    white-space: nowrap;
    pointer-events: none;
}

@keyframes chapterScroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 980px) {
    #faq-section .section-copy {
        position: static;
    }

    .standard-document-stamp {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .chapter-marquee span {
        min-height: 48px;
        padding: 0 24px;
    }

    .association-seal-card {
        clip-path: none;
    }

    .directory-preview-card,
    .gallery-strip-item {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
    }
}

/* Premium identity pass */
#hero-section {
    isolation: isolate;
    overflow: hidden;
    background-image:
        linear-gradient(90deg, rgba(26, 34, 39, 0.98), rgba(26, 34, 39, 0.6) 58%, rgba(26, 34, 39, 0.9));
}

#hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.65), transparent 76%);
}

#hero-section::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    z-index: 0;
    height: 32%;
    background: linear-gradient(180deg, transparent, var(--black-denim));
}

.hero-seal-watermark {
    position: absolute;
    right: clamp(18px, 5vw, 90px);
    top: clamp(42px, 9vh, 110px);
    z-index: 1;
    width: clamp(150px, 23vw, 330px);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.1;
    filter: grayscale(1) contrast(1.2);
    animation: sealDrift 12s ease-in-out infinite alternate;
}

.hero-seal-watermark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hero-text-block {
    position: relative;
}

.hero-text-block::before {
    content: 'PBAU';
    position: absolute;
    left: -0.08em;
    top: -0.56em;
    z-index: -1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.08);
    font-family: var(--font-heading);
    font-size: clamp(6rem, 19vw, 15rem);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
}

/**
 * Last-resort guard. The sizes above are calculated from Oswald's metrics, but
 * if the webfont fails and a wider fallback is substituted, or a future edit
 * lengthens a word, this makes the text wrap instead of being clipped by the
 * body's overflow-x: hidden. A wrapped headline looks wrong; a sliced one reads
 * as a broken site.
 */
.hero-title {
    overflow-wrap: break-word;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-title .word {
    transition: color 0.35s ease, transform 0.35s ease;
}

.hero-title:hover .word:nth-child(odd) {
    transform: translateY(-3px);
}

.hero-credential-strip {
    width: min(100%, 660px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--line-soft);
    margin: 28px 0 30px;
    background: rgba(40, 40, 40, 0.72);
    backdrop-filter: blur(10px);
}

.hero-credential-strip span {
    display: grid;
    gap: 2px;
    padding: 16px;
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-right: 1px solid var(--line-soft);
}

.hero-credential-strip span:last-child {
    border-right: 0;
}

.hero-credential-strip strong {
    color: var(--white);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    letter-spacing: 0;
}

.hero-image-frame {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%);
}

.hero-image-frame::before {
    content: '';
    position: absolute;
    inset: 18px;
    z-index: 2;
    border: 1px solid var(--line-soft);
    pointer-events: none;
}

.hero-image-frame::after {
    content: 'Certified craft';
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    padding: 10px 12px;
    background: var(--black-denim);
    border: 1px solid var(--line-soft);
    color: var(--white);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#stats-bar {
    position: relative;
    padding: 0 24px;
    background: var(--old-black);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

#stats-bar::before {
    content: 'PBAU / PUBLIC TRUST / PROFESSIONAL STANDARDS';
    position: absolute;
    inset: 14px auto auto 24px;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.18em;
}

.stats-container {
    min-height: 150px;
}

.stat-item span {
    display: block;
    margin-top: 8px;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.stat-number {
    color: var(--white);
}

.landing-section {
    position: relative;
    overflow: hidden;
}

.landing-section::before {
    content: attr(id);
    position: absolute;
    right: clamp(16px, 5vw, 76px);
    top: 24px;
    color: rgba(255, 255, 255, 0.04);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 9vw, 9rem);
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
}

.section-badge::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 1px;
    margin-right: 12px;
    vertical-align: middle;
    background: var(--text-soft);
}

.benefit-grid {
    grid-template-columns: 1.15fr 0.95fr 0.95fr;
}

.benefit-card {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-color: var(--line-soft);
    background-image:
        linear-gradient(180deg, rgba(26, 34, 39, 0.04), rgba(26, 34, 39, 0.95)),
        var(--card-img, linear-gradient(145deg, rgba(53, 69, 80, 0.8), rgba(51, 51, 51, 0.96)));
    background-size: cover;
    background-position: center;
}

.benefit-card:first-child {
    min-height: 430px;
}

.benefit-card i {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    background: var(--black-denim);
    border: 1px solid var(--line-soft);
    color: var(--white);
    margin-bottom: 22px;
}

.benefit-card h3 {
    color: var(--white);
    font-size: clamp(1.55rem, 3vw, 2.3rem);
}

.benefit-card p {
    color: var(--text-soft);
}

.standards-layout {
    align-items: stretch;
}

.standards-checklist {
    counter-reset: standard;
}

.standard-row {
    position: relative;
    overflow: hidden;
}

.standard-row::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: translateX(-110%);
    transition: transform 0.7s ease;
}

.standard-row:hover::after {
    transform: translateX(110%);
}

.directory-preview-card,
.gallery-strip-item,
.faq-item {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.directory-preview-card:hover,
.gallery-strip-item:hover,
.faq-item:hover {
    transform: translateY(-6px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
}

.directory-preview-card::after {
    content: 'Verified';
    position: absolute;
    right: 22px;
    top: 22px;
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#gallery-strip .section-container {
    position: relative;
}

.compact-gallery {
    grid-template-columns: 1.1fr 0.9fr 1.1fr;
}

.gallery-strip-item {
    min-height: 420px;
    border: 1px solid var(--line-soft);
}

.gallery-strip-item:nth-child(2) {
    min-height: 500px;
}

.gallery-item-overlay {
    opacity: 1;
    background: linear-gradient(180deg, transparent 42%, rgba(26, 34, 39, 0.9));
}

.gallery-item-caption {
    font-size: clamp(1.55rem, 3vw, 2.6rem);
    line-height: 1;
}

#cta-banner {
    background-image:
        linear-gradient(90deg, rgba(26, 34, 39, 0.92), rgba(26, 34, 39, 0.68)),
        var(--cta-bg, linear-gradient(90deg, rgba(26, 34, 39, 0.92), rgba(26, 34, 39, 0.68)));
    background-size: cover;
    background-position: center;
}

.cta-banner-bg-grid {
    opacity: 0.32;
}

@keyframes sealDrift {
    from {
        transform: translate3d(0, 0, 0) rotate(-4deg);
    }
    to {
        transform: translate3d(10px, 16px, 0) rotate(3deg);
    }
}

@media (max-width: 980px) {
    .hero-credential-strip,
    .benefit-grid,
    .compact-gallery {
        grid-template-columns: 1fr;
    }

    .hero-seal-watermark {
        opacity: 0.08;
        right: -40px;
    }
}

@media (max-width: 680px) {
    .hero-credential-strip span {
        border-right: 0;
        border-bottom: 1px solid var(--line-soft);
    }

    .hero-credential-strip span:last-child {
        border-bottom: 0;
    }

    #stats-bar::before {
        position: static;
        display: block;
        padding: 18px 0 0;
    }

    .stats-container {
        grid-template-columns: 1fr;
        padding: 24px 0 34px;
    }

    .stat-divider {
        width: 100%;
        height: 1px;
    }
}

/* Registration panel final aesthetic correction */
#panel-register .panel-body,
#panel-register .panel-body.no-padding-mobile {
    padding: 0;
    background: var(--black-denim);
}

#panel-register .registration-panel-split {
    min-height: calc(100vh - 73px);
    background: var(--black-denim);
}

#panel-register .registration-panel-left {
    display: grid;
    align-items: end;
    background: var(--black-denim);
}

#panel-register .reg-left-content {
    left: clamp(24px, 4vw, 52px);
    right: clamp(24px, 4vw, 52px);
    bottom: clamp(34px, 6vw, 70px);
}

#panel-register .reg-panel-logo {
    display: none;
}

#panel-register .reg-left-content h2 {
    font-size: clamp(3.6rem, 9vw, 7rem);
    max-width: 7ch;
}

#panel-register .reg-left-content .tagline {
    max-width: 390px;
}

@media (max-height: 760px) and (min-width: 981px) {
    #panel-register .reg-left-content h2 {
        font-size: clamp(3.2rem, 7vw, 5.5rem);
    }

    #panel-register .membership-proof-list {
        margin-top: 18px;
    }
}

@media (max-width: 980px) {
    #panel-register .registration-panel-left {
        display: none;
    }

    #panel-register .registration-panel-split {
        display: block;
        min-height: calc(100vh - 66px);
    }

    #panel-register .registration-panel-right {
        min-height: calc(100vh - 66px);
        padding: 24px 16px 70px;
    }

    #panel-register .registration-panel-intro {
        margin-bottom: 20px;
    }

    #panel-register .registration-panel-intro .section-badge {
        margin-bottom: 8px;
    }

    #panel-register .panel-title-left {
        font-size: clamp(2.35rem, 12vw, 4rem);
    }

    #panel-register .registration-step-labels {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(148px, 44vw);
        grid-template-columns: none;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
        padding: 0 0 12px;
        margin-bottom: 20px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    #panel-register .step-lbl {
        min-height: 52px;
        scroll-snap-align: start;
        white-space: normal;
    }
}

/* Directory panel dark redesign */
#panel-directory .panel-body,
#panel-directory .directory-panel-body {
    padding: clamp(34px, 5vw, 70px) 24px 86px;
    background:
        linear-gradient(135deg, rgba(53, 69, 80, 0.18), transparent 34%),
        var(--black-denim);
}

.directory-panel-container {
    max-width: 1180px;
}

.directory-panel-intro {
    max-width: 820px;
    margin-bottom: 30px;
}

.directory-panel-title {
    text-align: left;
    color: var(--white);
    padding-bottom: 0;
    margin: 10px 0 14px;
    font-size: clamp(2.7rem, 7vw, 5.8rem);
}

.directory-panel-title::after {
    display: none;
}

.directory-panel-intro p {
    max-width: 640px;
    color: var(--text-soft);
    font-size: 1.08rem;
}

#panel-directory .search-controls-wrapper {
    max-width: none;
    margin: 0 0 clamp(32px, 5vw, 52px);
    padding: 16px;
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) minmax(360px, 1fr);
    gap: 14px;
    background: var(--dark-charcoal);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-sm);
}

#panel-directory .search-bar input,
#panel-directory .filter-dropdowns select {
    min-height: 58px;
    background: var(--black-denim);
    border: 1px solid var(--line-soft);
    color: var(--white);
}

#panel-directory .search-bar input::placeholder {
    color: var(--mid-gray);
}

#panel-directory .search-icon {
    color: var(--mid-gray);
}

#panel-directory .filter-dropdowns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#panel-directory .search-bar input:focus,
#panel-directory .filter-dropdowns select:focus {
    border-color: var(--light-gray);
    background: var(--old-black);
}

#panel-directory #barber-directory-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

#panel-directory .barber-card {
    min-height: 280px;
    background:
        linear-gradient(135deg, rgba(53, 69, 80, 0.22), transparent 40%),
        var(--dark-charcoal);
    border-color: var(--line-soft);
    box-shadow: var(--shadow-sm);
}

#panel-directory .barber-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-5px);
}

#panel-directory .barber-avatar-sim {
    background: var(--black-denim);
    border-color: var(--charcoal-blue);
    color: var(--white);
}

#panel-directory .barber-meta-details h3,
#panel-directory .barber-info-row,
#panel-directory .no-results-msg h3 {
    color: var(--white);
}

#panel-directory .barber-shop,
#panel-directory .barber-info-row i,
#panel-directory .no-results-msg p {
    color: var(--text-soft);
}

#panel-directory .barber-guild-badge {
    color: var(--text-soft);
}

#panel-directory .spec-tag {
    background: var(--black-denim);
    border-color: var(--line-soft);
    color: var(--text-soft);
}

#panel-directory .directory-sticky-cta {
    margin-top: clamp(34px, 6vw, 60px);
    padding: clamp(22px, 4vw, 34px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    background: var(--old-black);
    border: 1px solid var(--line-soft);
}

#panel-directory .directory-sticky-cta p {
    color: var(--text-soft);
    margin: 0;
}

#panel-directory .no-results-msg {
    background: var(--dark-charcoal);
    border-color: var(--line-soft);
}

/* Normalize landing media cards after earlier editorial offsets. */
.benefit-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.benefit-card,
.benefit-card:first-child {
    min-height: clamp(330px, 31vw, 420px);
}

.compact-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.gallery-strip-item,
.compact-gallery .gallery-strip-item,
.gallery-strip-item:nth-child(2),
.gallery-strip-item:nth-child(5),
.compact-gallery .gallery-strip-item:nth-child(2),
.compact-gallery .gallery-strip-item:nth-child(3) {
    min-height: clamp(340px, 30vw, 460px);
    transform: none;
}

.directory-preview-card {
    background-position: center 34%;
}

.directory-preview-card:nth-child(2) {
    background-position: center 28%;
}

.directory-preview-card:nth-child(3) {
    background-position: center center;
}

/* Keep every off-canvas panel navigation reachable while panel content scrolls. */
.off-canvas-panel .panel-header {
    position: sticky;
    top: 0;
    z-index: 40;
    flex: 0 0 auto;
    isolation: isolate;
}

.off-canvas-panel .panel-header::after {
    z-index: -1;
}

@media (max-width: 980px) {
    #panel-directory .search-controls-wrapper,
    #panel-directory #barber-directory-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    #panel-directory .panel-body,
    #panel-directory .directory-panel-body {
        padding: 28px 14px 60px;
    }

    #panel-directory .filter-dropdowns {
        grid-template-columns: 1fr;
    }

    #panel-directory .directory-sticky-cta {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Mobile landing card repair: readable cards instead of squeezed desktop columns. */
@media (max-width: 680px) {
    #why-join-section,
    #gallery-strip {
        overflow: hidden;
    }

    #why-join-section .section-container,
    #gallery-strip .section-container {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    #why-join-section .section-header-center,
    #gallery-strip .section-header-center {
        width: min(100% - 32px, 620px);
        margin-left: auto;
        margin-right: auto;
    }

    #why-join-section .section-title,
    #gallery-strip .section-title {
        font-size: clamp(2.15rem, 10vw, 3rem);
        line-height: 1.15;
        max-width: 10.5em;
        margin-left: auto;
        margin-right: auto;
    }

    .benefit-grid,
    .compact-gallery,
    .gallery-offset-grid.compact-gallery {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(282px, 82vw);
        grid-template-columns: none;
        gap: 16px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 16px 18px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .benefit-card,
    .benefit-card:first-child,
    .gallery-strip-item,
    .compact-gallery .gallery-strip-item,
    .gallery-strip-item:nth-child(2),
    .gallery-strip-item:nth-child(5),
    .compact-gallery .gallery-strip-item:nth-child(2),
    .compact-gallery .gallery-strip-item:nth-child(3) {
        width: auto;
        min-width: 0;
        min-height: 430px;
        max-height: none;
        scroll-snap-align: center;
        transform: none;
    }

    .benefit-card {
        padding: 30px 24px;
        justify-content: flex-end;
        background-position: center;
    }

    .benefit-card::before {
        inset: 12px;
    }

    .benefit-card i {
        top: 24px;
        left: 24px;
        width: 56px;
        height: 56px;
    }

    .benefit-card h3 {
        max-width: 9.5em;
        font-size: clamp(1.7rem, 8vw, 2.35rem);
        line-height: 1.08;
    }

    .benefit-card p {
        max-width: 24ch;
        font-size: 1rem;
        line-height: 1.55;
    }

    .gallery-strip-item,
    .compact-gallery .gallery-strip-item {
        min-height: 390px;
        aspect-ratio: 4 / 5;
    }

    .gallery-item-overlay {
        opacity: 1;
        padding: 22px;
        background: linear-gradient(180deg, rgba(26, 34, 39, 0.08) 22%, rgba(26, 34, 39, 0.9));
    }

    .gallery-item-caption {
        max-width: 7.5em;
        font-size: clamp(1.75rem, 8vw, 2.35rem);
        line-height: 1.05;
    }

    .gallery-footer-link {
        width: min(100% - 32px, 620px);
        margin: 30px auto 0;
    }
}

@media (max-width: 380px) {
    .benefit-grid,
    .compact-gallery,
    .gallery-offset-grid.compact-gallery {
        grid-auto-columns: minmax(260px, 84vw);
        padding-left: 14px;
        padding-right: 14px;
    }

    .benefit-card,
    .benefit-card:first-child {
        min-height: 450px;
    }
}

/* Final mobile override: stack the benefit cards so their text is never
   squeezed into a narrow column.

   The gallery strip used to be forced into this same shape, but it was taken
   out: those cards are photographs with a two-word caption, not paragraphs, so
   the reason for stacking does not apply to them. They are now a swipeable row
   — see "Landing page: stats bar and gallery strip" at the end of this file.

   These declarations are !important, so leaving the gallery selectors here
   would have silently beaten anything written later no matter how specific. */
@media (max-width: 680px) {
    .benefit-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        grid-auto-flow: row !important;
        grid-auto-columns: auto !important;
        align-items: stretch !important;
        gap: 18px !important;
        width: min(100% - 32px, 520px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .benefit-card,
    .benefit-card:first-child {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        min-height: 360px !important;
        padding: 32px 26px !important;
    }

    /* The gallery's own min-height/aspect-ratio now come from the swipe-row
       rules at the end of this file. There is no !important here to beat. */

    .benefit-card h3,
    .gallery-item-caption {
        max-width: 10em !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .benefit-card p {
        max-width: 28ch !important;
    }
}

/* ==========================================================================
   PBAU CMS — events, announcements and photos (Phase 2)
   --------------------------------------------------------------------------
   Appended block. Every selector below is new and namespaced (.news-*,
   .photo-*), so nothing above this line is affected. These rules only apply
   on the sub-pages, which carry class="news-page" on <body>.

   The homepage does not use any of this.
   ========================================================================== */

.news-page {
    background: #1A2227;
    color: #F2F5F7;
}

.news-main {
    /* Clears the fixed header, which is position:fixed and so takes no space.
       Desktop header = 62px logo + 32px padding + 1px border = 95px.
       The mobile value is in the 768px block below; the logo shrinks there. */
    padding-top: 96px;
    min-height: 60vh;
}

.news-container {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
}

.news-hero {
    padding: 54px 0 30px;
    border-bottom: 1px solid rgba(242, 245, 247, 0.12);
    margin-bottom: 40px;
}

.news-eyebrow {
    margin: 0 0 10px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.78rem;
    color: #C8A96A;
}

.news-hero h1 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    line-height: 1.05;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.news-lede {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(242, 245, 247, 0.78);
    max-width: 62ch;
    margin: 0;
}

.news-body { padding-bottom: 80px; }

.news-section-title {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 1.15rem;
    margin: 46px 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(242, 245, 247, 0.12);
}
.news-section-title:first-child { margin-top: 0; }

/* ---- Event cards --------------------------------------------------------- */

.news-grid {
    display: grid;
    /* min() rather than a bare 290px: on a 320px-wide phone the container is
       only 280px, and a bare minimum wider than the container makes the grid
       overflow and the whole page scroll sideways. */
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: 24px;
}

.news-grid.is-past { opacity: 0.72; }
.news-grid.is-past:hover { opacity: 1; }

.news-card {
    display: flex;
    flex-direction: column;
    background: rgba(242, 245, 247, 0.04);
    border: 1px solid rgba(242, 245, 247, 0.1);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.news-card:hover { transform: translateY(-4px); border-color: rgba(200, 169, 106, 0.5); }

.news-card-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #232E35; }
.news-card-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s ease;
}
.news-card:hover .news-card-media img { transform: scale(1.05); }

.news-card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.news-card-date,
.news-card-where {
    margin: 0;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: #C8A96A;
}
.news-card-where { color: rgba(242, 245, 247, 0.6); }
.news-card-date i, .news-card-where i { margin-right: 6px; }

.news-card h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.22rem;
    line-height: 1.25;
    margin: 0;
    text-transform: uppercase;
}
.news-card h3 a { color: inherit; text-decoration: none; }
.news-card h3 a:hover { color: #C8A96A; }

.news-card-summary {
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: rgba(242, 245, 247, 0.72);
    flex: 1;
}

.news-card-more {
    margin-top: 4px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #C8A96A;
    text-decoration: none;
    align-self: flex-start;
}
.news-card-more i { margin-left: 6px; transition: transform 0.2s ease; }
.news-card-more:hover i { transform: translateX(4px); }

/* ---- Announcement list --------------------------------------------------- */

.news-list { display: flex; flex-direction: column; gap: 18px; }

.news-item {
    position: relative;
    padding: 26px 28px;
    background: rgba(242, 245, 247, 0.04);
    border: 1px solid rgba(242, 245, 247, 0.1);
    border-left: 3px solid rgba(242, 245, 247, 0.2);
    border-radius: 4px;
}
.news-item.is-important { border-left-color: #C8A96A; }

.news-item h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.35rem;
    line-height: 1.25;
    margin: 6px 0 10px;
    text-transform: uppercase;
}
.news-item h2 a { color: inherit; text-decoration: none; }
.news-item h2 a:hover { color: #C8A96A; }

.news-pin, .news-badge {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.news-pin { background: rgba(242, 245, 247, 0.1); color: rgba(242, 245, 247, 0.72); }
.news-badge { background: #C8A96A; color: #1A2227; }

/* ---- A single article ---------------------------------------------------- */

.news-article { padding: 40px 0 80px; }

.news-back {
    display: inline-block;
    margin-bottom: 26px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(242, 245, 247, 0.62);
    text-decoration: none;
}
.news-back:hover { color: #C8A96A; }
.news-back i { margin-right: 7px; }

.news-article h1 {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    line-height: 1.1;
    margin: 0 0 18px;
    text-transform: uppercase;
    max-width: 22ch;
}

.news-flag {
    display: inline-block;
    margin: 0 0 16px;
    padding: 8px 14px;
    background: rgba(242, 245, 247, 0.08);
    border-radius: 4px;
    font-size: 0.85rem;
    color: rgba(242, 245, 247, 0.75);
}

.news-meta {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 26px;
    font-size: 0.9rem;
    color: rgba(242, 245, 247, 0.7);
}
.news-meta i { margin-right: 8px; color: #C8A96A; }

.news-figure { margin: 0 0 34px; }
.news-figure img {
    width: 100%; height: auto; display: block;
    border-radius: 4px; border: 1px solid rgba(242, 245, 247, 0.1);
}
.news-figure figcaption {
    margin-top: 10px;
    font-size: 0.84rem;
    color: rgba(242, 245, 247, 0.55);
}

/* Everything inside .news-content was produced by cms_rich(). */
.news-content { max-width: 68ch; font-size: 1.02rem; line-height: 1.8; }
.news-content p { margin: 0 0 1.3em; color: rgba(242, 245, 247, 0.84); }
.news-content strong { color: #FFFFFF; font-weight: 700; }
.news-content ul { margin: 0 0 1.3em; padding-left: 1.3em; color: rgba(242, 245, 247, 0.84); }
.news-content li { margin-bottom: 0.55em; }
.news-content a { color: #C8A96A; text-decoration: underline; text-underline-offset: 3px; }
.news-content a:hover { color: #E0C48C; }

.news-cta {
    margin-top: 48px;
    padding: 30px;
    background: rgba(200, 169, 106, 0.08);
    border: 1px solid rgba(200, 169, 106, 0.28);
    border-radius: 4px;
}
.news-cta p { margin: 0 0 16px; color: rgba(242, 245, 247, 0.85); }

/* ---- Empty states -------------------------------------------------------- */

.news-empty {
    padding: 70px 30px;
    text-align: center;
    background: rgba(242, 245, 247, 0.04);
    border: 1px solid rgba(242, 245, 247, 0.1);
    border-radius: 4px;
}
.news-empty h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.4rem;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.news-empty p { margin: 0 auto 18px; max-width: 46ch; color: rgba(242, 245, 247, 0.7); line-height: 1.7; }
.news-empty a { color: #C8A96A; }

/* ---- Photo gallery ------------------------------------------------------- */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 18px;
}

.photo-item {
    margin: 0;
    border: 1px solid rgba(242, 245, 247, 0.1);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(242, 245, 247, 0.04);
}
.photo-item > a { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.photo-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s ease;
}
.photo-item:hover img { transform: scale(1.06); }
.photo-item figcaption {
    padding: 12px 15px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(242, 245, 247, 0.7);
}

/* ---- Current page marker in the nav -------------------------------------- */

#desktop-nav a.is-current { color: #C8A96A; }

/* A long unbroken word — a pasted URL, a hashtag — must wrap rather than push
   the page sideways. Applied to everything an admin can type into. */
.news-card h3,
.news-item h2,
.news-article h1,
.news-card-summary,
.news-content,
.news-meta li,
.photo-item figcaption,
.news-figure figcaption { overflow-wrap: break-word; }

.news-content a { word-break: break-word; }

@media (max-width: 768px) {
    /* Header here is 52px logo + 32px padding + 1px border = 85px. The
       previous value of 78px let the first heading slide under it. */
    .news-main { padding-top: 88px; }

    .news-hero { padding: 34px 0 24px; margin-bottom: 30px; }
    .news-item { padding: 20px; }
    .news-article { padding: 26px 0 60px; }
    .news-cta { padding: 22px; }
    .news-empty { padding: 48px 20px; }

    .news-grid { gap: 18px; }
    .news-section-title { margin: 34px 0 16px; }

    /* Comfortable to tap, and full width so the target is unmissable. */
    .news-cta .btn,
    .gallery-panel-footer .btn {
        display: flex;
        width: 100%;
        min-height: 48px;
        text-align: center;
    }
    .news-card-more { padding: 6px 0; }
}

@media (max-width: 480px) {
    .news-container { width: calc(100% - 28px); }
    .news-hero h1 { font-size: 1.85rem; }
    .news-article h1 { font-size: 1.65rem; max-width: none; }
    .news-content { font-size: 0.98rem; line-height: 1.75; }
    .news-meta { gap: 8px 16px; font-size: 0.85rem; }
    .news-item { padding: 18px 16px; }
    .news-empty { padding: 40px 16px; }

    /* One event per row. Below this width the cards also turn side-on — see
       the compaction block further down — so a row is a short strip, not a
       tall block. */
    .news-grid { grid-template-columns: 1fr; }

    /* Photographs stay two-up. They carry no text to squeeze, and one per row
       would double the length of the album for no gain. */
    .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ==========================================================================
   Nav and gallery links added with the CMS pages
   --------------------------------------------------------------------------
   The header nav went from five entries to seven when Events and News were
   added. At the original 36px gap that overflows on a narrow laptop: logo
   (~150px) + seven items (~630px) + the Join Us button (~130px) is wider than
   a 900px viewport, and the header wraps onto two lines.

   Two rules, doing different jobs:

   901-1100px  tighten the gap. Measured, this leaves ~100px of slack.

   up to 900px  hand over to the mobile drawer, which used to happen at 768px.
                The alternative was shrinking seven items to fit a 769px
                header, which measured at roughly four pixels of slack — close
                enough that a slightly wider font or a longer word would wrap
                the header on a real device. Seven 12px entries on a tablet is
                poor anyway; the drawer is the better experience there.
   ========================================================================== */

@media (max-width: 1100px) {
    #desktop-nav ul { gap: 22px; }
}

@media (max-width: 900px) {
    #desktop-nav { display: none; }
    #mobile-menu-toggle { display: flex; }
}

/* The second link under the homepage gallery strip, through to /photos. */
.gallery-secondary-link {
    display: inline-block;
    margin-left: 26px;
    opacity: 0.75;
}
.gallery-secondary-link:hover { opacity: 1; }

@media (max-width: 560px) {
    .gallery-secondary-link { display: block; margin: 14px 0 0; }
}

/* The way out of the gallery panel and into the photo album. */
.gallery-panel-footer {
    margin-top: 40px;
    padding: 30px;
    text-align: center;
    background: rgba(200, 169, 106, 0.08);
    border: 1px solid rgba(200, 169, 106, 0.28);
    border-radius: 4px;
}
.gallery-panel-footer p {
    margin: 0 auto 18px;
    max-width: 52ch;
    line-height: 1.7;
    color: rgba(242, 245, 247, 0.8);
}
.gallery-panel-footer .btn i { margin-left: 8px; }

@media (max-width: 768px) {
    .gallery-panel-footer { padding: 22px; margin-top: 28px; }
}

/* ==========================================================================
   Mobile navigation drawer — fitting nine entries
   --------------------------------------------------------------------------
   The drawer was built for six links. Events, News & Notices and Photo Album
   make nine, and three things then went wrong at once:

     1. No overflow-y. The drawer is a fixed 100vh box, so a list taller than
        the screen was simply cut off — with align-items:center it lost the
        top AND the bottom, hiding "Home" and "Join the Guild" together.

     2. The header is z-index 999, the drawer 998. The drawer's first entry
        therefore passed UNDERNEATH the logo bar rather than below it.

     3. Nine entries at 2rem with a 24px gap need about 678px of height. A
        phone browser typically offers 640-780px once its own chrome is
        counted, so it never comfortably fit.

   Everything below is an override of rules earlier in this file, which is why
   it repeats their selectors. Nothing here affects any layout above 900px,
   where the drawer is not shown at all.
   ========================================================================== */

#mobile-nav {
    /* Stack, start at the top, and let the list scroll if it must. Centring
       a scrollable flex child clips its top in several browsers, so the
       centring is done with auto margins on the list instead. */
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* Clears the fixed header, which paints above this. 95px between 769 and
       900px (62px logo), less below 768px where the logo shrinks. */
    padding: 104px 20px 44px;

    /* Newer phones report the height excluding the browser's collapsing
       toolbars, which 100vh does not account for. Harmless where unsupported. */
    height: 100dvh;
}

.mobile-nav-links {
    /* Vertically centred when there is room; simply top-aligned and scrollable
       when there is not. Auto margins never clip, unlike align-items:center. */
    margin: auto 0;
    padding: 0;
    width: 100%;
    max-width: 360px;
    gap: 14px;
}

.mobile-nav-links a {
    font-size: 1.6rem;
    padding: 9px 8px;
    line-height: 1.15;
}

.mobile-nav-links .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin-top: 8px;
}

/* Below 768px the header is 85px, so a little of that padding comes back as
   usable space. */
@media (max-width: 768px) {
    #mobile-nav { padding-top: 94px; }
}

/* Short screens: a phone in landscape, or a small handset. Nine entries only
   fit here if they give up some size. */
@media (max-height: 720px) {
    .mobile-nav-links { gap: 8px; }
    .mobile-nav-links a { font-size: 1.32rem; padding: 7px 8px; }
    .mobile-nav-links .btn { min-height: 46px; margin-top: 4px; }
    #mobile-nav { padding-bottom: 32px; }
}

@media (max-height: 560px) {
    .mobile-nav-links { gap: 4px; }
    .mobile-nav-links a { font-size: 1.15rem; padding: 6px 8px; }
}

/* ==========================================================================
   Article layout — desktop reading width
   --------------------------------------------------------------------------
   The event page put a full-width picture between the heading and the words.
   In a 1120px column a 3:2 photograph renders about 750px tall, so on a laptop
   the first line of the description sat below the fold: one whole screen of
   picture before any information.

   Two changes fix it:

     1. On a wide screen the picture moves into a column beside the words and
        stays there while you scroll, so nothing is pushed down at all.

     2. Text is capped at a readable measure. Lines 1120px long are roughly 160
        characters; typography puts comfortable reading at 60-80.

   Below 980px this all collapses back to one column, with the picture between
   the heading and the words — the phone order, which was already correct.
   ========================================================================== */

.article-head { margin-bottom: 26px; }
.article-head .news-meta { margin-bottom: 0; }

.article-layout { display: flex; flex-direction: column; gap: 26px; }

/* On a phone the picture belongs above the words. It is written after them in
   the markup so that a wide screen can place it on the right. */
.article-aside { order: -1; }
.article-aside .news-figure { margin-bottom: 0; }

.news-article.is-narrow .news-container { max-width: 780px; }

@media (min-width: 981px) {
    .article-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
    }

    /* min-width: 0 stops a long unbroken string from widening the column past
       its share — the standard flexbox overflow trap.

       No max-width here on purpose: the two columns should fill the container
       evenly, and the paragraphs inside are already held to 68ch by
       .news-content, so the measure stays readable regardless. */
    .article-main { flex: 1 1 auto; min-width: 0; }

    .article-aside {
        order: 0;
        flex: 0 0 390px;
        /* Clears the fixed header, then stays put while the words scroll. */
        position: sticky;
        top: 118px;
    }

    /* No picture, so there is no second column to balance against and the
       words would otherwise run the full 1120px. */
    .article-layout.has-no-picture .article-main { max-width: 74ch; }
}

/* A very wide monitor: hold the picture column steady rather than letting it
   grow into a billboard. */
@media (min-width: 1400px) {
    .article-aside { flex-basis: 420px; }
}

/* ---- Announcement list: stop the lines running the full width ------------ */

.news-item h2 { max-width: 30ch; }
.news-item .news-card-summary { max-width: 78ch; }

/* ---- Never let one picture dominate the screen --------------------------- */

.news-figure img {
    /* A portrait photograph in a 390px column is otherwise 520px tall. */
    max-height: 70vh;
    object-fit: cover;
}

/* ==========================================================================
   Mobile compaction — less scrolling
   --------------------------------------------------------------------------
   Measured on a 360px phone, the events page ran to about 1590px, two and a
   half screens for three events. Nearly all of it was the cards: a full-width
   3:2 photograph is 221px tall on its own, before any text.

   The change is to lay each card out side-on below 620px — a square thumbnail
   on the left, the words on the right — which is how a phone list normally
   looks. That alone takes a card from 433px to about 122px. With the tighter
   heading block the same page comes to roughly 610px: one screen.

   Nothing here applies above 620px, where the tall cards work well.
   ========================================================================== */

@media (max-width: 620px) {

    /* ---- Event cards turn side-on ---------------------------------------- */

    .news-grid { gap: 12px; }

    .news-card { flex-direction: row; align-items: stretch; }

    .news-card-media {
        flex: 0 0 116px;
        aspect-ratio: 1;          /* square crops less awkwardly at this size */
        align-self: stretch;
    }
    /* A card with no picture must not leave a 116px hole. */
    .news-card > .news-card-body:first-child { width: 100%; }

    .news-card-body { padding: 12px 14px; gap: 4px; }
    .news-card h3 { font-size: 1.02rem; line-height: 1.25; }
    .news-card-date { font-size: 0.74rem; }

    .news-card-summary {
        font-size: 0.85rem;
        line-height: 1.5;
        /* Two lines, then an ellipsis. The full text is one tap away. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* The picture and the title are both links, so a third one is just height. */
    .news-card-more,
    .news-card-where { display: none; }

    .news-grid.is-past { opacity: 1; }   /* dimming reads as broken on a phone */

    /* ---- Heading block --------------------------------------------------- */

    .news-hero { padding: 20px 0 16px; margin-bottom: 20px; }
    .news-hero h1 { font-size: 1.7rem; margin-bottom: 8px; }
    .news-eyebrow { margin-bottom: 5px; font-size: 0.68rem; letter-spacing: 0.2em; }
    .news-hero .news-lede { font-size: 0.94rem; line-height: 1.6; }
    .news-body { padding-bottom: 48px; }
    .news-section-title { margin: 26px 0 12px; font-size: 1rem; padding-bottom: 9px; }

    /* ---- Notices --------------------------------------------------------- */

    .news-list { gap: 10px; }
    .news-item { padding: 15px 16px; }
    .news-item h2 { font-size: 1.08rem; margin: 4px 0 6px; }
    .news-item .news-card-summary {
        font-size: 0.86rem;
        -webkit-line-clamp: 2;
    }
    .news-pin, .news-badge { font-size: 0.63rem; padding: 3px 8px; margin-bottom: 4px; }

    /* ---- Article body ---------------------------------------------------- */

    .news-content { line-height: 1.7; }
    .news-content p { margin-bottom: 1.05em; }
    .news-content ul { margin-bottom: 1.05em; }
    .news-article { padding: 20px 0 48px; }
    .article-head { margin-bottom: 18px; }
    .article-layout { gap: 18px; }
    .news-meta { margin-bottom: 0; gap: 6px 16px; }
    .news-figure img { max-height: 46vh; }
    .news-cta { margin-top: 30px; padding: 18px; }
    .news-cta p { margin-bottom: 12px; font-size: 0.92rem; }
    .news-back { margin-bottom: 16px; }

    /* ---- Photo album ----------------------------------------------------- */

    .photo-item figcaption { padding: 8px 10px; font-size: 0.76rem; line-height: 1.4; }
}

@media (max-width: 380px) {
    .news-card-media { flex-basis: 96px; }
    .news-card h3 { font-size: 0.96rem; }
    .news-card-body { padding: 10px 12px; }
}

/* ==========================================================================
   Homepage events & notices strip (#news-strip)
   --------------------------------------------------------------------------
   Two columns on a wide screen, stacked on a phone. The rows are filled in by
   the script at the bottom of index.html; everything here also styles the
   fallback markup, so the section looks finished before the fetch returns and
   stays presentable if it never does.
   ========================================================================== */

.home-news-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 34px;
    margin-top: 34px;
}

.home-news-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(242, 245, 247, 0.14);
}

.home-news-head h3 {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.home-news-head .link-accent {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.home-news-head .link-accent i { margin-left: 6px; }

.home-news-list { display: flex; flex-direction: column; gap: 10px; }

.home-news-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(242, 245, 247, 0.04);
    border: 1px solid rgba(242, 245, 247, 0.1);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.home-news-item:hover {
    border-color: rgba(200, 169, 106, 0.5);
    background: rgba(242, 245, 247, 0.06);
    transform: translateX(3px);
}

.home-news-item.is-notice { border-left: 3px solid rgba(242, 245, 247, 0.22); }
.home-news-item.is-notice.is-important { border-left-color: #C8A96A; }

.home-news-thumb {
    flex: 0 0 62px;
    height: 62px;
    border-radius: 3px;
    overflow: hidden;
    background: #232E35;
}
.home-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.home-news-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;          /* lets the text truncate instead of stretching the row */
}

.home-news-date {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #C8A96A;
}

.home-news-text strong {
    font-family: 'Oswald', sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-main);
    overflow-wrap: break-word;
}

.home-news-where,
.home-news-summary {
    font-size: 0.82rem;
    line-height: 1.45;
    color: rgba(242, 245, 247, 0.62);
    /* One line for a place, two for a summary. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-news-summary { -webkit-line-clamp: 2; }

.home-news-empty,
.home-news-note,
.home-news-fallback {
    margin: 0;
    padding: 14px 2px;
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(242, 245, 247, 0.62);
}
.home-news-note { padding: 0 2px 8px; font-size: 0.82rem; }
.home-news-fallback a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 768px) {
    .home-news-layout { gap: 26px; margin-top: 26px; }
}

@media (max-width: 620px) {
    .home-news-head { padding-bottom: 10px; margin-bottom: 10px; }
    .home-news-head h3 { font-size: 0.95rem; }
    .home-news-item { padding: 10px 12px; gap: 11px; }
    .home-news-thumb { flex-basis: 52px; height: 52px; }
    .home-news-text strong { font-size: 0.95rem; }
    .home-news-where, .home-news-summary { font-size: 0.79rem; }
    .home-news-list { gap: 8px; }
}

/* ==========================================================================
   Landing page: stats bar and gallery strip on a phone
   --------------------------------------------------------------------------
   Both sections stacked into a single column below 768px, which is where most
   of the homepage's scrolling came from:

     stats bar     4 figures + 3 dividers, one per row      ~437px
     gallery strip 3 photographs at min-height 340px       ~1068px

   Together that is over 1500px — two and a half screens — for two sections
   that are a single glance each on a desktop.

   These rules come after the 768px and 680px blocks above, so they win on
   source order at equal specificity. The selectors are matched to those rules
   deliberately rather than made stronger, so this stays easy to unpick.
   ========================================================================== */

@media (max-width: 768px) {

    /* ---- Stats: a 2x2 block instead of a column -------------------------- */

    .stats-container {
        grid-template-columns: 1fr 1fr;
        gap: 22px 14px;
        padding: 26px 0;
        min-height: 0;
    }

    /* The dividers are separate grid children. In a 2x2 they land in the
       middle of a row and read as clutter, so they are taken out of the flow
       entirely rather than hidden with visibility. */
    .stat-divider { display: none; }

    .stat-number { font-size: 2.05rem; }
    .stat-label {
        font-size: 0.65rem;
        letter-spacing: 0.1em;
        line-height: 1.35;
        display: block;
        margin-top: 4px;
    }

    /* ---- Gallery: a swipeable row instead of a tall stack ----------------

       This stylesheet ALREADY contained a horizontal carousel for the strip,
       around line 6420, built with grid-auto-flow: column. It was never seen
       because the "Final mobile override" block further down forced everything
       back into a column with !important on every declaration.

       That block has now been narrowed to the benefit cards, so the original
       carousel works again. What is below extends it from 680px up to 768px
       and tightens the sizing — deliberately reusing the same grid technique
       rather than introducing a second, competing flex version.

       The selector is .gallery-offset-grid.compact-gallery to match the
       specificity of the rule it refines. A plain .compact-gallery would lose
       on specificity no matter how far down the file it sat. */

    .gallery-offset-grid.compact-gallery {
        display: grid;
        grid-auto-flow: column;

        /* 78vw leaves the next photograph peeking, which is what tells someone
           the row can be swiped. A full-width item looks like a dead end. */
        grid-auto-columns: minmax(240px, 78vw);
        grid-template-columns: none;

        gap: 12px;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 16px 14px;

        /* Each photograph settles into place rather than stopping halfway. */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        /* A swipe past the end must not drag the whole page sideways. */
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }

    .compact-gallery .gallery-strip-item,
    .compact-gallery .gallery-strip-item:nth-child(2),
    .compact-gallery .gallery-strip-item:nth-child(3) {
        /* The grid sizes the width; this stops a 420px-tall card. */
        min-height: 0;
        aspect-ratio: 1;
        width: auto;
        scroll-snap-align: start;

        /* The desktop layout staggers items downward; in a row that just
           knocks one out of line. */
        transform: none;
    }
}

@media (max-width: 420px) {
    .stat-number { font-size: 1.85rem; }
    .stat-label { font-size: 0.61rem; letter-spacing: 0.08em; }
    .stats-container { gap: 18px 10px; padding: 22px 0; }
    .gallery-offset-grid.compact-gallery { grid-auto-columns: minmax(220px, 82vw); }
}

/* Wide enough for all four figures in a row, but still narrower than the
   desktop layout, which only starts at 769px. */
@media (min-width: 560px) and (max-width: 768px) {
    .stats-container { grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .stat-number { font-size: 2.2rem; }
    .gallery-offset-grid.compact-gallery { grid-auto-columns: minmax(240px, 44vw); }
}

/* ---------------------------------------------------------------------------
   Payment disclosure (registration step 5)

   Deliberately the loudest block on the step. Unexpected Mobile Money prompts
   are exactly what fraudsters send, so an applicant who is not warned here will
   correctly treat the genuine prompt as a scam and decline it. This block is
   what makes our prompt recognisable when it arrives weeks later.
   --------------------------------------------------------------------------- */
.payment-disclosure {
    background: var(--surface-soft);
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--text-main);
    /* Scales down on narrow handsets: fixed 22px each side costs 44px of a
       320px screen, and this block sits inside an already-padded panel. */
    padding: clamp(14px, 4vw, 20px) clamp(14px, 4.5vw, 22px);
    margin-top: 24px;
}

.payment-disclosure-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-main);
    margin: 0 0 10px;
}

.payment-disclosure p {
    color: var(--text-soft);
    margin: 0 0 12px;
    line-height: 1.6;
}

.payment-disclosure-list {
    list-style: disc;
    margin: 0 0 4px;
    padding-left: 20px;
    color: var(--text-soft);
}

.payment-disclosure-list li {
    margin-bottom: 7px;
    line-height: 1.55;
}

.payment-disclosure-list a {
    color: var(--text-main);
    text-decoration: underline;
}

.payment-disclosure .highlight-checkbox {
    margin-top: 16px;
}

/* `hidden` must win over the display value .form-group sets. */
.payment-disclosure[hidden] {
    display: none;
}

/* Tells the applicant to expect a Mobile Money prompt on their handset. Shown
   only when the server confirms one was actually sent. */
.success-payment-note {
    margin: 14px auto 0;
    max-width: 520px;
    padding: 12px 16px;
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--text-main);
    background: var(--surface-soft);
    color: var(--text-soft);
    line-height: 1.6;
    font-size: 0.95rem;
}

.success-payment-note[hidden] { display: none; }