/*
 * Off The Wall Murals — Custom Styles
 * Supplements the compiled Agency/Bootstrap CSS (styles.css)
 * Load this AFTER styles.css
 */

/* ============================================================
   FONT FACES — OTW Visual Identity
   Self-hosted: Acherus Grotesque (primary sans, multiple weights)
   and Marker Aid (brush script, used sparingly for display text)
   ============================================================ */
@font-face {
    font-family: "Acherus Grotesque";
    src: url("../assets/fonts/AcherusGrotesque-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Acherus Grotesque";
    src: url("../assets/fonts/AcherusGrotesque-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Acherus Grotesque";
    src: url("../assets/fonts/AcherusGrotesque-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Acherus Grotesque";
    src: url("../assets/fonts/AcherusGrotesque-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Acherus Grotesque";
    src: url("../assets/fonts/AcherusGrotesque-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Acherus Grotesque";
    src: url("../assets/fonts/AcherusGrotesque-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Marker Aid";
    src: url("../assets/fonts/MarkerAid-Regular.woff2") format("woff2"),
         url("../assets/fonts/MarkerAid-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   VARIABLES — OTW Visual Identity
   Deep Graphite + Clean Canvas are the neutral foundation.
   Signal Orange is the primary accent (CTAs, highlights).
   Mural Gold / Pigment Pink / Studio Violet / Glaze Teal are a
   secondary accent palette — used minimally, never competing
   with the murals themselves.
   ============================================================ */
:root {
    --otw-primary: #f57e1f;       /* Signal Orange */
    --otw-primary-dark: #dd6c12;  /* hover/active shade */
    --otw-dark: #2d2d2d;          /* Deep Graphite */
    --otw-mid: #6e6e6c;
    --otw-light: #fffdf8;         /* Clean Canvas */
    --otw-border: #e6e2d8;

    /* Secondary accent palette — sparing use only */
    --otw-gold: #ffb127;          /* Mural Gold */
    --otw-pink: #ff5bae;          /* Pigment Pink */
    --otw-violet: #824bf2;        /* Studio Violet */
    --otw-teal: #00b1bd;          /* Glaze Teal */

    --font-heading: "Acherus Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-body: "Acherus Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Marker Aid", cursive;

    /* Override Bootstrap's own custom properties so anything in
       styles.css referencing var(--bs-*) picks up the new palette */
    --bs-primary: var(--otw-primary);
    --bs-warning: var(--otw-primary);
    --bs-yellow: var(--otw-primary);
    --bs-dark: var(--otw-dark);
    --bs-gray-900: var(--otw-dark);
    --bs-light: var(--otw-light);
    --bs-gray-100: var(--otw-light);
    --bs-body-color: var(--otw-dark);
    --bs-body-font-family: var(--font-body);
}

/* ============================================================
   BASE TYPOGRAPHY
   Heavy weight for headlines, light weight for body copy —
   per OTW visual identity.
   ============================================================ */
body {
    font-family: var(--font-body);
    font-weight: 300;
    background-color: var(--otw-light);
    color: var(--otw-dark);
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-heading);
    font-weight: 800;
}

.btn, .btn-xl {
    font-family: var(--font-heading);
    font-weight: 700;
}

/* Brush-script accent — use sparingly for single-word emphasis */
.font-script {
    font-family: var(--font-display);
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

/* ============================================================
   NAVIGATION — brand colours
   ============================================================ */
#mainNav {
    background-color: var(--otw-dark);
}

#mainNav .navbar-brand,
#mainNav .navbar-nav .nav-item .nav-link,
#mainNav .navbar-toggler {
    font-family: var(--font-heading);
    border: none;
}

#mainNav .navbar-brand {
    color: var(--otw-primary);
}

/* New wordmark lockup is wider/shorter than the old mark —
   constrain by height but smaller than the default agency sizing */
#mainNav .navbar-brand img {
    height: 3rem;
}

@media (min-width: 992px) {
    #mainNav .navbar-brand img {
        height: 4rem;
    }
    #mainNav.navbar-shrink .navbar-brand img {
        height: 4rem;
    }
}


/* ============================================================
   NAVIGATION — multi-page active state
   ============================================================ */
#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav .navbar-nav .nav-item .nav-link:hover {
    color: var(--otw-primary) !important;
}

/* ============================================================
   NAVIGATION — social icons
   ============================================================ */
.navbar-social {
    align-items: center;
    gap: 1rem;
    margin-left: 1.5rem;
}

.navbar-social a {
    color: var(--otw-light);
    font-size: 1.1rem;
    line-height: 1;
    transition: color 0.2s ease-in-out;
}

.navbar-social a:hover {
    color: var(--otw-primary);
}

/* ============================================================
   MASTHEAD (Home page hero)
   ============================================================ */
header.masthead {
    padding-top: 50px;
    padding-bottom: 80px;
    text-align: center;
    color: var(--otw-dark);
    background-color: var(--otw-light);
    background-image: url("../assets/img/whitewall.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


header.masthead .masthead-subheading {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.15rem;
    max-width: 32rem;
    margin-bottom: 2rem;
}

header.masthead .masthead-heading {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

header.masthead .masthead-heading .masthead-heading-accent {
    display: block;
    font-family: var(--font-display);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 1.35em;
    line-height: 1;
    color: var(--otw-dark);
    margin-top: 0.05em;
}

/* Hero viewfinder carousel */
.hero-carousel {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 892 / 924;
    overflow: hidden;
    margin: 0 auto;
}

.hero-carousel-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.6s ease-in-out;
}

.hero-carousel-slide.active {
    opacity: 1;
}

@media (min-width: 768px) {
    header.masthead {
        padding-top: 140px;
        padding-bottom: 110px;
        text-align: left;
    }

    /*header.masthead .masthead-heading {
        font-size: 3.5rem;
    }*/

    header.masthead .masthead-heading .masthead-heading-accent {
    font-size: 2.35em;
}


    header.masthead .masthead-subheading {
        font-size: 1.35rem;
    }

    .hero-carousel {
        max-width: 100%;
    }
}

/* ============================================================
   PAGE HEADER — inner page hero (replaces full masthead)
   ============================================================ */
.page-header {
    padding-top: 140px;
    padding-bottom: 80px;
    background-color: var(--otw-dark);
    background-image: url("../assets/img/whitewall.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    color: var(--otw-dark);
    position: relative;
}

/* .page-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(33, 37, 41, 0.55);
    pointer-events: none;
} */

.page-header .page-header-content {
    position: relative;
    z-index: 1;
}

.page-header h1 {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
    color: var(--otw-dark);
}

.page-header p {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 300;
    color: var(--otw-dark);
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .page-header {
        padding-top: 160px;
        padding-bottom: 100px;
    }
    .page-header h1 {
        font-size: 4.25rem;
    }
}

/* ============================================================
   SECTION UTILITIES
   ============================================================ */
.section-heading-sm {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--otw-primary);
    margin-bottom: 0.5rem;
}

/* Marker Aid variant for section titles — used where the brief calls for
   the brush-marker display font instead of the standard heading font */
.section-heading-script {
    font-family: var(--font-display);
    font-weight: normal;
    letter-spacing: 0.04em;
}

/* ============================================================
   WORK FEATURE (category banner image above each portfolio grid —
   no hover/modal, per brief — heading overlaid at 30% of the
   original height with a dark multiply overlay)
   ============================================================ */
.work-feature {
    position: relative;
    overflow: hidden;
    aspect-ratio: 70 / 9;
    background-color: var(--otw-border);
}

.work-feature img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .work-feature {
        aspect-ratio: 15 / 9;
    }
}

.work-feature-overlay {
    position: absolute;
    inset: 0;
    background-color: var(--otw-dark);
    mix-blend-mode: multiply;
    opacity: 0.6;
}

.work-feature-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem;
}

@media (min-width: 768px) {
    .work-feature-text {
        padding: 1.5rem 2.5rem;
    }
}

.work-feature-heading .section-heading-sm {
    margin-bottom: 0.4rem;
}

.work-feature-heading .section-heading {
    color: #fff;
    margin-bottom: 0;
}

/* ============================================================
   WORK GRID
   ============================================================ */
.work-item {
    position: relative;
    overflow: hidden;
    display: block;
    aspect-ratio: 4 / 3;
    background-color: var(--otw-border);
    cursor: pointer;
}

.work-item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.work-item:hover img {
    transform: scale(1.04);
}

/* Hover overlay */
.work-overlay {
    position: absolute;
    inset: 0;
    background: rgba(249, 157, 53, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.work-item:hover .work-overlay {
    opacity: 1;
}

.work-overlay span {
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
}

/* ============================================================
   PROJECT MODALS
   ============================================================ */
.portfolio-modal .modal-content {
    border: none;
    border-radius: 0;
}

.portfolio-modal .modal-header {
    border-bottom: none;
    padding: 1rem 1.5rem 0;
}

.portfolio-modal .modal-body {
    padding: 1.25rem 1.75rem 2rem;
}

.modal-hero-img {
    width: 100%;
    max-height: 60vh;
    object-fit: cover;
    display: block;
    margin-bottom: 1.5rem;
}

.modal-hero-placeholder {
    width: 100%;
    height: 300px;
    background: var(--otw-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--otw-mid);
    font-family: var(--font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
}

.modal-project-details {
    margin-bottom: 1.5rem;
}

.modal-project-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
    color: var(--otw-dark);
}

.modal-project-location {
    font-size: 0.85rem;
    color: var(--otw-mid);
    margin-bottom: 0.25rem;
}

.modal-project-date {
    font-size: 0.85rem;
    color: var(--otw-mid);
    margin-bottom: 0.75rem;
}

.modal-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Masonry-style gallery — natural image heights in CSS columns,
   used in project modals once gallery photos are selected */
.modal-gallery-masonry {
    column-count: 2;
    column-gap: 0.75rem;
    margin-top: 1.5rem;
}

.modal-gallery-masonry img {
    width: 100%;
    display: block;
    margin-bottom: 0.75rem;
    break-inside: avoid;
}

@media (min-width: 768px) {
    .modal-gallery-masonry {
        column-count: 3;
        column-gap: 1rem;
    }
    .modal-gallery-masonry img {
        margin-bottom: 1rem;
    }
}

.work-caption {
    padding: 0.9rem 0 1.5rem;
}

.work-caption h5 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.2rem;
    color: var(--otw-dark);
}

.work-caption p {
    font-size: 0.82rem;
    color: var(--otw-mid);
    margin-bottom: 0;
}

/* ============================================================
   INTRO PHOTO (Home page — full-width mural shot)
   ============================================================ */
.intro-photo-section {
    padding: 9rem 0 0 0;
}
.intro-photo {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

@media (max-width: 767px) {
    .intro-photo {
        aspect-ratio: 4 / 3;
    }
}

/* ============================================================
   FEATURED WORK (Home page — 3-up)
   ============================================================ */
.featured-work img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.featured-caption {
    padding: 0.75rem 0;
}

.featured-caption h5 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.2rem;
}

.featured-caption small {
    color: var(--otw-mid);
    font-size: 0.78rem;
}

/* ============================================================
   DARK SECTION (reusable) — Home "The Process", Work "OTW on the map"
   ============================================================ */
.section-dark {
    background-color: var(--otw-dark);
    color: var(--otw-light);
}

.section-dark .section-heading-sm {
    color: var(--otw-primary);
}

.section-dark .section-heading {
    color: var(--otw-light);
}

/* ============================================================
   THE PROCESS (Home page — 4 steps in circles)
   ============================================================ */
.process-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.process-circle {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background-color: var(--otw-light);
    color: var(--otw-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.75rem;
}

.process-circle h4 {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.5rem;
}

.process-circle p {
    font-size: 0.85rem;
    color: var(--otw-mid);
    margin-bottom: 0;
}

.process-arrow {
    color: var(--otw-primary);
    font-size: 1.5rem;
    flex: 0 0 auto;
}

@media (max-width: 991px) {
    .process-arrow {
        display: none;
    }
    .process-circle {
        width: 200px;
        height: 200px;
    }
}

/* ============================================================
   PROOF POINT
   ============================================================ */
.proof-point {
    background-color: var(--otw-primary);
    color: #fff;
    padding: 5rem 0;
    text-align: center;
}

.proof-point .proof-figure {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 6rem;
    line-height: 1;
    display: block;
    margin-bottom: 0.5rem;
}

.proof-point p {
    font-size: 1.2rem;
    opacity: 0.92;
    margin-bottom: 0;
}

.proof-map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.75rem;
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--otw-primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.map-link {
    text-align: center;
    padding: 0;
}

.proof-map-link i {
    font-size: 1.2rem;
}

.proof-map-link:hover {
    color: var(--otw-dark);
}

@media (max-width: 767px) {
    .proof-point .proof-figure { font-size: 4rem; }
    .proof-map-link {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem 0.6rem;
    }
}

/* ============================================================
   PRESS STRIP
   ============================================================ */
.press-strip {
    background-color: var(--otw-light);
    padding: 3rem 0;
    text-align: center;
}

.press-strip .press-label {
    font-family: var(--font-heading);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--otw-mid);
    margin-bottom: 1.5rem;
}

.press-strip .press-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.press-strip .press-logos img {
    height: 36px;
    opacity: 0.55;
    filter: grayscale(100%);
    transition: opacity 0.2s;
}

.press-strip .press-logos img:hover {
    opacity: 0.9;
}

/* Placeholder text for press logos not yet available */
.press-logo-text {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--otw-mid);
    opacity: 0.7;
}

/* ============================================================
   SOCIAL FEED (Home page — Curator.io placeholder)
   ============================================================ */
.social-feed {
    padding: 2rem 0 0 0;
    background-color: var(--otw-light);
}

.social-feed-handle {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--otw-dark);
    text-decoration: none;
}

.social-feed-handle:hover {
    color: var(--otw-primary);
}

.social-feed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.social-feed-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

@media (min-width: 768px) {
    .social-feed-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* ============================================================
   FOOTER CTA
   ============================================================ */
.footer-cta {
    background-color: var(--otw-dark);
    color: #fff;
    padding: 5rem 0;
    text-align: center;
}

.footer-cta h2 {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    margin-bottom: 1.5rem;
}

@media (max-width: 767px) {
    .footer-cta h2 { font-size: 1.6rem; }
}

/* ============================================================
   DIFFERENTIATORS (Services page)
   ============================================================ */

#differentiators {
    padding-top: 3rem;
}

.differentiator {
    border-left: 3px solid var(--otw-primary);
    padding: 0.25rem 0 0.25rem 1.75rem;
    margin-bottom: 2.75rem;
}

.differentiator h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    color: var(--otw-dark);
}

.differentiator p {
    margin-bottom: 0;
    color: #495057;
}

.differentiator-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* ============================================================
   SERVICE CIRCLES (Services page — "Beyond the wall")
   ============================================================ */
.service-circles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
}

.service-circle-item {
    width: 150px;
    text-align: center;
}

.service-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 0.9rem;
}

.service-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-circle-item p {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--otw-dark);
    margin-bottom: 0;
}

/* ============================================================
   PROCESS STEPS (Commission page)
   ============================================================ */
.process-step {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 2.25rem;
}

.process-circle h4 {
    color: var(--otw-primary);
}

.step-number {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--otw-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    margin-top: 0.1rem;
}

.step-content h4 {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
    color: var(--otw-dark);
}

.step-content p {
    margin-bottom: 0;
    color: #495057;
    font-size: 0.95rem;
}

/* ============================================================
   LEAD CAPTURE BOXES
   ============================================================ */

.lead-capture-text h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--otw-primary);
    margin-bottom: 0.75rem;
    text-align: center;
}

.lead-capture-text p {
    color: #495057;
    margin-bottom: 1.25rem;
    text-align: center;
}


/* Kit (ConvertKit) injects its own <style> tag at runtime, after this
   stylesheet, with `.formkit-form[data-uid="..."] { max-width: 700px; }`.
   Equal-specificity rules favour whichever loads last, so we need a more
   specific selector here (two classes + attribute beats one class +
   attribute) rather than just repeating Kit's selector. */
.lead-capture-action .formkit-form[data-uid] {
    max-width: none;
    width: 100%;
}

a.formkit-powered-by-convertkit {
    visibility: hidden;
}

/* @media (min-width: 992px) {
    .lead-capture-text {
        display: flex;
        align-items: center;
        gap: 3rem;
        padding: 3rem;
    }

    .lead-capture-text {
        flex: 1 1 55%;
    }

    .lead-capture-text p {
        margin-bottom: 0;
    }

    .lead-capture-action {
        flex: 1 1 45%;
    }
} */



/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq-section {
    padding: 0 0 6rem 0;
}

.faq-section-title {
    padding: 2rem 0;
}

.accordion-button {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--otw-dark);
}

.accordion-button:not(.collapsed) {
    color: var(--otw-primary);
    background-color: rgba(249, 157, 53, 0.05);
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(249, 157, 53, 0.25);
}

.faq-category-heading {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--otw-mid);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--otw-border);
}

/* ============================================================
   CONTACT FORM (Contact page)
   ============================================================ */
/* The legacy template sets section#contact to a dark background by ID,
   which beats the .bg-light utility class on our actual markup. Neutralise
   it so the section reads as light, as intended. */
section#contact {
    background-color: transparent;
    background-image: none;
}

.contact-intro-heading {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--otw-primary);
    margin-bottom: 1rem;
}

.contact-checklist {
    margin-bottom: 1rem;
    padding-left: 1.1rem;
}

.contact-checklist li {
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
    color: #495057;
}

.contact-intro-note {
    font-size: 0.85rem;
    margin-bottom: 2rem;
}

.contact-form-card {
    padding: 1.75rem 2rem;
}

.contact-details-list a {
    color: var(--otw-dark);
}

.contact-follow-label {
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--otw-dark);
    margin-bottom: 0.75rem;
}

.contact-social-icons {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.contact-social-icons .btn-social {
    height: 2.25rem;
    width: 2.25rem;
}

.contact-design-note {
    font-size: 0.85rem;
}

.contact-details {
    padding-left: 60px;
}

/* ============================================================
   MAP EMBED
   ============================================================ */
.map-embed {
    width: 100%;
    height: 80vh;
    min-height: 420px;
    max-height: 720px;
}

.map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 767px) {
    .map-embed {
        height: 70vh;
        min-height: 360px;
    }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* ============================================================
   SPLIT SECTION (full-bleed image one side, padded text the other —
   e.g. About "Mel as Principal")
   ============================================================ */
.split-section {
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
}

.split-photo {
    overflow: hidden;
}

.split-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: top;
    display: block;
}

img.differentiator-img {
    aspect-ratio: 5 / 3;
}

.split-content {
    display: flex;
    align-items: center;
}

.split-content-left {

}

.split-content-right {
    
}

.split-content-inner {
    padding: 3rem 1.25rem;
    max-width: 640px;
}

@media (min-width: 768px) {
    .split-content-inner {
        padding: 4rem 3rem;
    }
}

/* Modifier: even 50/50 split instead of the default 1/3 - 2/3 */
@media (min-width: 992px) {
    .split-section.split-even {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 992px) {
    .split-section {
        grid-template-columns: 1fr 2fr;
    }
    /* .split-photo img {
        height: 100%;
        aspect-ratio: auto;
    } */
    .split-content-inner {
        padding: 5rem 4rem;
    }
}

/* Pull the text block toward the image: when text is the LEFT column
   (image on the right), push it to the right edge of its column so it
   sits next to the image instead of the page edge. When text is the
   RIGHT column (image on the left), the flex default already hugs the
   image, so flex-start keeps it there. */
@media (min-width: 992px) {
    .split-content-left {
        justify-content: flex-end;
        order: -1;
    }

    .split-content-right {
        justify-content: flex-start;
    }
}

/* ============================================================
   PLACEHOLDER IMAGE STYLING
   (visual fallback while real images are being added)
   ============================================================ */
img.img-placeholder {
    background-color: var(--otw-border);
    display: block;
}

/* ============================================================
   PAINTING PARTNERS (About page)
   ============================================================ */
.partner-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 1rem;
    background-color: var(--otw-border);
}

.partner-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.partner-name {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--otw-dark);
    margin-bottom: 0;
}

/* ============================================================
   CONTENT PHOTOS (image/text row pattern — Commission, About)
   ============================================================ */
.content-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* ============================================================
   TESTIMONIALS (Commission page — carousel)
   ============================================================ */
.testimonial-section {
    padding: 0;
    background-color: var(--otw-dark);
}

.testimonial-section .section-heading-sm,
.testimonial-section .section-heading {
    color: #fff;
}

.testimonial-carousel {
    position: relative;
}

.testimonial-bg {
    width: 100%;
    aspect-ratio: 32 / 7;
    background-size: cover;
    background-position: center;
    background-color: var(--otw-border);
    position: relative;
}

.testimonial-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(33, 33, 33, 0.55);
}

@media (max-width: 767px) {
    .testimonial-bg {
        aspect-ratio: 8 / 5;
    }
}

.testimonial-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 0 2rem;
    z-index: 2;
}

.testimonial-quote {
    font-family: var(--font-display);
    font-weight: normal;
    font-size: 1.6rem;
    max-width: 720px;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .testimonial-quote {
        font-size: 2rem;
    }
}

.testimonial-author {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
/* Sharper corners than Bootstrap's default 0.25rem — excludes the
   circular .btn-social icon buttons, which should stay round. */
.btn:not(.btn-social) {
    border-radius: 2px;
}

.btn-primary {
    background-color: var(--otw-primary);
    border-color: var(--otw-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--otw-primary-dark);
    border-color: var(--otw-primary-dark);
}

.btn-outline-primary {
    color: var(--otw-primary);
    border-color: var(--otw-primary);
}

.btn-outline-primary:hover {
    background-color: var(--otw-primary);
    color: #fff;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer.footer {
    background-color: #fff;
}

footer.footer .designer a {
    color: var(--otw-mid);
    font-size: 0.85rem;
}

footer.footer a:hover {
    color: var(--otw-dark);
}

.footer-contacts {
    padding: 5rem 0;
}

.footer-contacts img {
    max-width: 40%;
}

.footer-contacts-details {
    padding-top: 50px;
}

.fa-envelope, .fa-phone {
    color: var(--otw-primary);
    margin-right: 1em;
}

.footer-social {
    height: 45px;
}

.footer-social .fa-instagram, .footer-social .fa-facebook, .footer-social .fa-linkedin {
    color: var(--otw-primary);
    margin-right: 1em;
    font-size: 2em;
}

.footer-copyright {
    background-color: var(--otw-dark);
    color: #fff;
    padding: 1rem 0;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-primary { color: var(--otw-primary) !important; }