/* ==========================================================================
   Ryan-Marie Design & Decor — Styles
   ========================================================================== */

/* ---------- Self-Hosted Fonts ---------- */
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-normal.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/cormorant-garamond-latin-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/montserrat-latin-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/montserrat-latin-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/montserrat-latin-normal.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/spectral-latin-normal-400.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/spectral-latin-normal-500.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/spectral-latin-normal-600.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/spectral-latin-italic-400.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: italic; font-weight: 500; font-display: swap; src: url('/assets/fonts/spectral-latin-italic-500.woff2') format('woff2'); }

/* ---------- Custom Properties ---------- */
:root {
    --blue-primary:    #3A5D8A;
    --blue-steel:      #648BB2;
    --blue-link:       #4A7196;
    --blue-cta:        #7DA4C8;
    --blue-portfolio:  #567A9D;
    --blue-footer:     #3D7DB0;
    --blue-dropdown-hover: #324F75;
    --green-sage:      #738F61;
    --green-dark:      #5E744E;
    --green-mint:      #DBEECF;
    --green-muted:     #BFD1B3;
    --green-accordion: #96AD87;
    --card-bg:         #F1F7FB;
    --off-white:       #F5F5F5;
    --body-text:       #484747;
    --blue-steel-dark: #517799;
    --green-sage-dark: #627E50;
    --green-form:      #5C7649;
    --error:           #c0392b;
    --text-muted:      #6E6E6E;
    --taupe:           #D4CEC8;

    --font-heading:  'Cormorant Garamond', serif;
    --font-body:     'Spectral', serif;
    --font-ui:       'Montserrat', sans-serif;

    --max-width:     1512px;
    --section-pad:   48px;
    --gap:           20px;
    --radius:        4px;
    --header-height: 238px;

    --transition:    0.25s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    overflow-x: hidden;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.25px;
    color: var(--body-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font: inherit; }

/* ---------- Page Load Fade ---------- */
/* Page fade removed — was adding 2s element render delay to LCP */

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1px;
}
h1, h2 { color: var(--green-sage); font-size: 44px; }
h3 { font-family: var(--font-ui); font-weight: 600; font-size: 20px; color: var(--blue-steel); text-transform: uppercase; letter-spacing: 0.25px; }
h4 { font-size: 44px; color: var(--blue-steel); }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
p a,
li a {
    color: var(--blue-link);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    font-weight: 400;
    transition: color var(--transition), text-decoration-color 0.25s ease;
}
p a:hover,
li a:hover { text-decoration-color: var(--blue-link); }

.special {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0.25px;
    color: var(--blue-primary);
    margin-top: 12px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.25px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    text-decoration: none;
    transition: background-color var(--transition);
    cursor: pointer;
}
.btn .btn-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-blue {
    background: var(--blue-steel-dark); /* --blue-steel darkened for WCAG AA 4.5:1 */
    color: #fff;
}
/* Divi .cta-button:hover: just background change, no underline */
.btn-blue:hover { background: var(--blue-primary); }

.btn-green {
    background: var(--green-sage-dark); /* --green-sage darkened for WCAG AA 4.5:1 */
    color: #fff;
}
.btn-green:hover { background: var(--green-dark); }

.btn-white {
    background: #fff;
    color: var(--green-sage-dark); /* --green-sage darkened for WCAG AA 4.5:1 */
    border-color: var(--green-sage-dark);
}
.btn-white:hover { background: var(--off-white); }

.btn-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.25px;
    color: var(--green-sage);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
    border: none;
    background: none;
    transition: color 0.2s ease;
}
.btn-link:hover { color: var(--green-dark); }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    /* Divi: green-button & white-button margin-top: 40px */
    margin-top: 40px;
}

/* ---------- Skip Nav ---------- */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 1000;
    padding: 12px 24px;
    background: var(--blue-primary);
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0 0 4px 4px;
    transition: top 0.2s ease;
}
.skip-nav:focus {
    top: 0;
}
/* ---------- Header ---------- */
#site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: url('/assets/images/stripedbg.png') repeat-x center top;
    transition: opacity 0.4s ease, box-shadow 0.4s ease;
    will-change: opacity;
}
#site-header.header-hidden { opacity: 0; pointer-events: none; }
#site-header.header-visible { opacity: 1; pointer-events: auto; }
/* Scrolled header: white + stripe only behind nav bar, logo hangs below.
   Divi row: overflow: visible, stripe bg on row, section transparent.
   The ::before covers the nav link area; logo overflows past it. */
#site-header.header-scrolled {
    background: none;
}
#site-header.header-scrolled::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Height = bottom of nav links when centered in the logo-height flex container.
       Nav link height: 51px pad-top + ~26px text + 31px pad-bottom ≈ 108px.
       Logo height: ~190px. Centering gap: (190 - 108) / 2 ≈ 41px.
       Bottom of nav links: 190 - 41 = 149px. */
    height: 149px;
    background: url('/assets/images/stripedbg.png') repeat-x center top, #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.header-inner {
    position: relative;
    z-index: 1; /* Above the ::before white bar pseudo */
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--section-pad);
}

/* Desktop nav */
.nav-desktop {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-left, .nav-right {
    display: flex;
    align-items: center;
    flex: 1;
}
.nav-left { justify-content: flex-end; gap: 24px; }
.nav-right { justify-content: flex-start; gap: 24px; }

.nav-link {
    display: block;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--blue-steel);
    padding: 51px 12px 31px;
    transition: color var(--transition);
}
.nav-link:hover, .nav-link:focus-visible, .nav-link.active { color: var(--blue-primary); }
.nav-link:focus-visible {
    outline: 2px solid var(--blue-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.logo-wrap {
    display: block;
    padding: 0 24px;
    flex-shrink: 0;
}
.logo-desktop {
    width: 411px;
    height: auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
}
.logo-wrap:hover .logo-desktop {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

/* Nav dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 55%;
    left: 0;
    margin-top: 24px;
    min-width: 365px;
    background: var(--blue-primary);
    z-index: 200;
    padding: 20px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-top: 3px solid var(--green-muted);
}
/* Before JS loads: instant show/hide (no flash risk) */
body:not(.dropdown-ready) .nav-dropdown:hover .nav-dropdown-menu,
body:not(.dropdown-ready) .nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
/* After JS loads: animated dropdown */
.dropdown-ready .nav-dropdown-menu {
    display: block;
    pointer-events: none;
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    visibility: hidden;
    transition: opacity 0.3s ease, max-height 0.35s ease, padding 0.3s ease, visibility 0.35s;
}
.dropdown-ready .nav-dropdown:hover .nav-dropdown-menu,
.dropdown-ready .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    max-height: 300px;
    padding-top: 20px;
    padding-bottom: 20px;
    pointer-events: auto;
    visibility: visible;
}
/* Stagger each menu item top-to-bottom */
.dropdown-ready .nav-dropdown-menu li {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.dropdown-ready .nav-dropdown-menu li:nth-child(1) { transition-delay: 0.05s; }
.dropdown-ready .nav-dropdown-menu li:nth-child(2) { transition-delay: 0.1s; }
.dropdown-ready .nav-dropdown-menu li:nth-child(3) { transition-delay: 0.15s; }
.dropdown-ready .nav-dropdown-menu li:nth-child(4) { transition-delay: 0.2s; }
.dropdown-ready .nav-dropdown:hover .nav-dropdown-menu li,
.dropdown-ready .nav-dropdown:focus-within .nav-dropdown-menu li {
    opacity: 1;
    transform: translateY(0);
}
.nav-dropdown-menu li { padding: 0 20px; }
.nav-dropdown-menu li a {
    display: block;
    padding: 12px;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--green-muted);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.nav-dropdown-menu li a:hover,
.nav-dropdown-menu li a:focus-visible {
    background: var(--blue-dropdown-hover);
    color: #fff;
}
.nav-dropdown-menu li a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* Mobile nav bar */
.nav-mobile-bar { display: none; }
.logo-wrap-mobile { display: block; }
.logo-mobile { height: 100px; width: auto; }

.mobile-menu-btn {
    width: 42px;
    height: 42px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px;
}
.mobile-menu-btn span {
    display: block;
    height: 3px;
    background: var(--off-white);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu-btn.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.mobile-menu-btn.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Mobile nav panel */
.mobile-nav {
    display: none;
    flex-direction: column;
    background: var(--blue-primary);
    padding: 12px 0;
    border-top: 3px solid var(--off-white);
}
.mobile-nav.is-open { display: flex; }
/* Animated mobile nav — after JS adds .dropdown-ready */
.dropdown-ready .mobile-nav {
    display: flex;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease, visibility 0.35s;
}
.dropdown-ready .mobile-nav.is-open {
    max-height: 600px;
    padding-top: 12px;
    padding-bottom: 12px;
    opacity: 1;
    visibility: visible;
}
/* Stagger mobile nav items */
.dropdown-ready .mobile-nav-list > li {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.dropdown-ready .mobile-nav-list > li:nth-child(1) { transition-delay: 0.05s; }
.dropdown-ready .mobile-nav-list > li:nth-child(2) { transition-delay: 0.1s; }
.dropdown-ready .mobile-nav-list > li:nth-child(3) { transition-delay: 0.15s; }
.dropdown-ready .mobile-nav-list > li:nth-child(4) { transition-delay: 0.2s; }
.dropdown-ready .mobile-nav-list > li:nth-child(5) { transition-delay: 0.25s; }
.dropdown-ready .mobile-nav-list > li:nth-child(6) { transition-delay: 0.3s; }
.dropdown-ready .mobile-nav.is-open .mobile-nav-list > li {
    opacity: 1;
    transform: translateY(0);
}
.mobile-nav-list,
.mobile-nav-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-nav-link,
.mobile-nav-label {
    display: block;
    padding: 10px 38px;
    color: #fff;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.mobile-nav-sub { padding: 12px 18px 12px 56px; }
.mobile-nav-link:hover,
.mobile-nav-link:active,
.mobile-nav-label:hover,
.mobile-nav-label:active,
.mobile-nav-sub:hover,
.mobile-nav-sub:active {
    background-color: rgba(0, 0, 0, 0.03);
    opacity: 0.7;
    text-decoration: none;
}
.mobile-nav-link:focus-visible,
.mobile-nav-label:focus-visible,
.mobile-nav-sub:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* ---------- Main Content ---------- */
main {
    margin-top: var(--header-height);
    min-height: 60vh;
}
.page-home main,
.page-about main,
.page-portfolio main {
    margin-top: 0;
}

/* ---------- Hero Section ---------- */
.hero {
    display: flex;
    flex-direction: column;
}
.hero-photo-mobile { display: none; }
.hero-inner {
    display: flex;
    min-height: 500px;
}
.hero-photo {
    flex: 0 0 40%;
    background-size: cover;
    background-position: center;
}
.hero-content {
    flex: 1;
    padding: var(--section-pad) 64px;
    background: var(--off-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-content h2 {
    margin-bottom: 24px;
}

/* ---------- Homepage Hero (full-bleed photo) ---------- */
.homepage-hero {
    height: 663px;
    margin: var(--section-pad) var(--section-pad) 0;
    background-size: cover;
    background-position: center;
}
.homepage-hero-mobile { display: none; }

/* ---------- Tagline Bar ---------- */
.tagline-bar {
    background: var(--blue-primary);
    text-align: center;
    margin: 0 var(--section-pad);
    padding: calc(2% - 1.92px) 48px;
}
.tagline-bar .tagline-subtitle {
    font-family: var(--font-body);
    font-weight: 500;
    font-style: italic;
    font-size: 24px;
    letter-spacing: 0.25px;
    line-height: 1.3;
    color: var(--green-mint);
    margin: 0;
    padding: 0 0 10px;
}
.tagline-bar .tagline-main {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 64px;
    line-height: 1.2;
    letter-spacing: 1px;
    color: #fff;
    margin: 0;
    padding: 0;
}

/* ---------- Intro Section (2-col) ---------- */
.intro-section {
    display: flex;
    min-height: 752px;
    margin: 0 var(--section-pad);
    padding: var(--section-pad) 0;
    gap: 48px;
}
.intro-photo {
    flex: 0 0 32.42%;
    background-size: cover;
    background-position: center;
}
.intro-content {
    flex: 1;
    background: var(--off-white);
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.intro-content h2 {
    padding-bottom: 10px; /* Divi blurb default h2 padding */
}
.intro-content .btn {
    margin-top: 30px; /* Divi cta-button margin-top: 30px */
}
.intro-content > div:last-child {
    padding-bottom: 20px; /* Divi wraps button in <p> with padding-bottom: 20px */
}

/* ---------- Full-Bleed Photo ---------- */
.full-bleed {
    width: 100%;
    display: block;
}
.full-bleed img {
    width: 100%;
    display: block;
}

/* ---------- Service Cards ---------- */
.services-section {
    /* Divi: custom_margin="64px|48px|0px|48px" */
    margin: 64px var(--section-pad) 0;
    padding: 0;
}
.services-section > h2 {
    margin-bottom: 0;
    /* Divi heading: custom_padding="|48px||24px|false|false" */
    padding-left: 24px;
    padding-right: 48px;
}
.services-grid {
    display: flex;
    gap: 48px; /* Divi column margin-right: 48px */
    /* Divi cards row: default 2% padding-top (scales with viewport width) */
    margin-top: 2%;
    margin-bottom: 32px;
    /* Divi row: custom_padding="|24px|0px|24px" — 24px side padding on desktop */
    padding: 0 24px;
}
.service-card {
    flex: 1;
    background: var(--card-bg);
    /* Divi: custom_padding="64px|40px|24px|40px" */
    padding: 64px 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.service-card .card-flourish {
    width: 41px;
    height: 25px;
    /* Divi: .et_pb_main_blurb_image margin-bottom: 12px */
    margin-bottom: 12px;
}
.service-card h3 {
    /* Divi blurb h3: line-height 28px, padding-bottom 10px, no margin */
    line-height: 28px;
    padding-bottom: 10px;
    margin-bottom: 0;
}
.service-card p {
    font-size: 18px;
    flex: 1;
}
.service-card .btn-link {
    /* 56px = blurb padding-bottom (32px) + blurb margin-bottom (24px) from Divi */
    margin-top: 56px;
    /* Override global .btn-link inline-flex centering — WP button is inline-block, text at top */
    display: block;
    padding: 0;
    min-height: 50px;
    line-height: 34px; /* Divi computed button line-height (default 1.7em at 20px) */
    font-size: 20px;
    text-underline-offset: 3px;
    letter-spacing: 0.25px;
}
.services-cta {
    text-align: center;
    /* Divi: 32px above button, 20px below button to section bottom */
    padding: 32px 0 20px;
}

/* ---------- CTA Section ---------- */
.cta-section {
    display: flex;
    /* Divi row: custom_margin="48px" top, custom_padding="48px||48px" top/bottom */
    margin: 48px 0 0;
    padding: 48px 0;
    background: url('/assets/images/canvas-small.webp') center / cover;
}
.cta-content {
    flex: 1;
    background: #fff;
    /* Divi text: custom_padding="64px|48px|64px|48px", custom_margin="|||48px" */
    padding: 64px 48px;
    margin: 0 0 0 48px;
}
/* Divi: margin-bottom 0, padding-bottom 10px (theme default) */
.cta-content h2 { margin-bottom: 0; padding-bottom: 10px; color: var(--blue-steel); }
.cta-content ul {
    /* Divi: padding-left 25px, padding-bottom 20px (Divi theme default on block elements) */
    padding-left: 25px;
    margin-bottom: 0;
    padding-bottom: 20px;
}
.cta-content li {
    list-style: disc;
    line-height: 1.5;
}
.cta-content li::marker { font-size: 75%; }
/* Divi text module uses padding-bottom: 20px on all block elements (not margin).
   This prevents margin collapse, especially between the last <p> and .btn-row. */
.cta-content > p { margin-bottom: 0; padding-bottom: 20px; }
/* Divi wraps each button in a <p> with padding-bottom: 20px. Our .btn-row replaces
   those <p> wrappers, so it needs the same trailing padding for matching height. */
.cta-content .btn-row { padding-bottom: 20px; }
/* CTA buttons use 1px border (vs 2px global) and 12px arrows (vs 16px global).
   Divi source: .green-button { border: 1px solid transparent; }
   .white-button { border: 1px solid #738F61; } arrow: width/height 12px */
.cta-content .btn { border-width: 1px; }
.cta-content .btn .btn-arrow { width: 12px; height: 12px; }
.cta-photo {
    /* Divi 1/3 column: photo CTA has custom_margin="|48px" (right margin) inside the column.
       calc(33.333% - 48px) = column width minus the right margin, so photo area matches WP. */
    flex: 0 0 calc(33.333% - 48px);
    background-size: cover;
    background-position: center;
    margin-right: 48px;
}

/* ---------- Filmstrip ---------- */
.filmstrip {
    overflow: hidden;
    padding: 24px 0;
}
.filmstrip-row {
    display: flex;
    gap: var(--gap);
}
.filmstrip-img {
    flex: 1 1 16%;
    height: 360px;
    object-fit: cover;
}
.filmstrip-img.wide { flex: 1 1 30%; }
.filmstrip-img.narrow { flex: 1 1 13%; }

/* ---------- Portfolio Grid ---------- */
/* Divi: custom HTML flex grid, 3 columns (first 6) + 2 columns (last 2), gap 48px */
.portfolio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    /* Tuck behind header so logo overlaps top of grid (matches Divi 150px) */
    margin: 150px 0 0;
    padding: 0 var(--section-pad) 48px;
}
.portfolio-card {
    flex: 1 1 calc(33.333% - 32px);
    position: relative;
    overflow: hidden;
    height: 375px;
    text-decoration: none;
    opacity: 0;
}
.portfolio-card.wide { flex: 1 1 calc(50% - 24px); }
.portfolio-card img {
    width: 100%;
    height: 80%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.portfolio-card:hover img { transform: scale(1.05); }
/* Divi: caption Cormorant Garamond 37px/500, #567A9D bg, 20% height → 30% on hover */
.portfolio-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    background: var(--blue-portfolio);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 37px;
    line-height: 1.2em;
    letter-spacing: 0.5px;
    transition: height 0.3s ease, background 0.3s ease;
}
.portfolio-card:hover .portfolio-caption {
    height: 30%;
    background: var(--blue-primary);
}

/* ---------- Portfolio Gallery (lightbox sub-pages) ---------- */
/* Justified gallery: flex-grow = aspect ratio makes each row fill 100% width
   with variable row heights and zero cropping — matches Divi Modula layout.
   Container capped at 1512px (Divi's et_pb_row max-width) so row composition
   matches: 3L row, 3L+1P row, 2L+1P row at wide viewports.
   flex-basis uses clamp() to scale with container — 25%/12% gives correct
   wrapping at every width while flex-grow handles proportional sizing. */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
    /* Tuck under header so logo overlaps first row */
    margin: 150px auto 0;
    padding: 0 var(--section-pad) var(--section-pad);
    box-sizing: border-box;
    width: 100%;
    max-width: calc(1512px + 2 * var(--section-pad));
}
.gallery-grid a {
    flex: 1.5 1 clamp(280px, 25%, 380px);
    overflow: hidden;
    opacity: 0;
}
.gallery-grid a.portrait {
    flex: 0.667 1 clamp(125px, 12%, 180px);
}
.gallery-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.gallery-grid a:hover img { transform: scale(1.05); }
/* Focus styles for keyboard navigation (WCAG 2.4.7) */
p a:focus-visible,
.portfolio-card:focus-visible,
.gallery-grid a:focus-visible,
.btn:focus-visible,
#back-to-top:focus-visible,
.accordion-header:focus-visible {
    outline: 2px solid var(--blue-primary);
    outline-offset: 2px;
}
/* Gallery heading + back button */
.gallery-heading {
    text-align: center;
    /* top = header clearance (page-portfolio uses margin-top:0) */
    padding: var(--header-height) var(--section-pad) 48px;
    color: var(--green-sage);
}
.gallery-back {
    text-align: center;
    padding: 0 0 44px;
}
.gallery-nav-row {
    justify-content: center;
    margin-top: 0;
    gap: 24px;
}
.gallery-nav-row .btn { font-size: 17px; padding: 10px 20px; border-width: 1px; }
.btn-arrow-prev { transform: rotate(180deg); }
.btn:hover .btn-arrow-prev { transform: rotate(180deg) translateX(4px); }
/* Gallery sub-pages: gallery-back bottom padding handles the gap before CTA,
   so zero out CTA's own margin-top to avoid double spacing */
.page-portfolio .cta-section { margin-top: 0; }

/* ---------- Accordion (Service Pages) ---------- */
/* Source: Divi Builder module dct_faq_v32 + et_pb_accordion_0 */
.accordion {
    position: relative;
    padding: 0 var(--section-pad) var(--section-pad);
}
/* Dotted vertical line — Divi custom_css_before on accordion wrapper */
.accordion::before {
    content: '';
    position: absolute;
    left: calc(var(--section-pad) + 23px);
    top: 23px;
    bottom: 20px;
    border-left: 2px dotted var(--green-accordion);
}
/* Each toggle item — Divi: bg white, margin 0 0 12px 50px, padding 0, box-shadow preset1 */
.accordion-item {
    position: relative;
    margin: 0 0 12px 50px;
    padding: 0;
    background: #fff;
    box-shadow: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* Divi keeps 12px margin on last item — contributes to bottom green space */
/* Left green accent bar — Divi default toggle ::before, 2px wide, bg #688e26 */
.accordion-item::before {
    content: '';
    position: absolute;
    left: -2px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #688e26;
}
.accordion-dot {
    display: none; /* replaced by ::after on header */
}
/* Title — Divi: font 28px/160% Cormorant Garamond 600, color #3a5d8a, padding 15px 55px 15px 30px, letter-spacing 1px */
.accordion-header {
    display: block;
    position: relative;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 28px;
    line-height: 160%;
    letter-spacing: 1px;
    color: #3a5d8a;
    cursor: pointer;
    padding: 15px 55px 15px 30px;
    border: none;
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}
/* Green dot — Divi dct_faq_v32 ::after on title, positioned left of card */
.accordion-header::after {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50px;
    background: var(--green-accordion);
    border: 1px solid var(--green-accordion);
    position: absolute;
    top: 30px;
    left: -34px;
    transform: translateY(-50%);
}
/* Hover effect on closed items — Divi: bg #96AD87, text white (desktop ≥1216px only) */
@media (min-width: 1216px) {
    .accordion-item:not(.is-open):hover {
        background-color: #829471; /* AA-hardened from #96AD87 — white text needs 3:1, this gives 3.28:1 */
    }
    .accordion-item:not(.is-open):hover .accordion-header {
        color: #fff;
    }
}
/* Body content — Divi: padding 0 30px 15px, color #484747, font-size 20px, line-height 160%, letter-spacing 0.25px */
.accordion-body {
    display: none;
    overflow: hidden;
    padding: 0 30px 15px;
    color: var(--body-text);
    font-size: 20px;
    line-height: 160%;
    letter-spacing: 0.25px;
    border: none;
    word-wrap: break-word;
}
.accordion-item.is-open .accordion-body { display: block; }
.accordion-body ul {
    list-style: disc;
    padding-left: 1.4em;
    margin: 0.5em 0;
}
.accordion-body ul li {
    margin-bottom: 0.3em;
}

/* ---------- Contact Form ---------- */
.contact-section {
    padding: var(--section-pad);
    max-width: 800px;
    margin: 0 auto;
}
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 18px;
    cursor: pointer;
}
.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--green-sage);
}


/* ---------- Utility Classes ---------- */
.hide-tablet { }
.tablet-photo { display: none; }


/* ---------- About Page ---------- */

/* Hero (full-width kitchen photo — tablet/phone only, hidden on desktop) */
.about-hero {
    display: none;
}
.about-hero img {
    width: 100%;
    height: auto;
    display: block;
}

/* Bio section: two-col layout (photo | text) — Divi: 1_3/2_3 columns, gutter_width=1, make_equal=on */
/* Divi section: custom_margin="150px|48px||48px", row: min_height="603px", custom_padding="0px||48px" */
.about-bio {
    display: flex;
    min-height: 603px;
    margin: 150px var(--section-pad) 0;
    padding-bottom: 48px;
}
.about-bio-photo {
    flex: 0 0 auto;
    width: 25%;
    max-width: 402px;
    min-width: 402px; /* Divi: custom CSS override */
    padding-right: 48px; /* Divi: custom_padding="|48px|||false|false" */
    background-size: cover;
    background-position: center;
}
.about-bio-content {
    flex: 1 1 auto;
    margin-left: 48px; /* Divi: custom CSS col_1 margin-left: 48px */
    background: var(--off-white);
    padding: 72px 48px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Divi: h1 header_text_color="#738f61", 44px, letter-spacing 1px */
.about-bio-content h1 {
    color: var(--green-sage);
    font-size: 44px;
    letter-spacing: 1px;
    line-height: 120%;
    padding-bottom: 10px;
}
.about-bio-content .btn {
    margin-top: 30px;
    margin-bottom: 20px; /* Divi: button inside <p> has ~20px padding-bottom */
}

/* Photo break — Divi disabled_on="off|off|on" = hidden on desktop, visible tablet/phone */
.about-photo-break {
    width: 100%;
    display: none;
}
.about-photo-break img {
    width: 100%;
    height: auto;
    display: block;
}

/* Experience section: reversed two-col (text | photo) */
.about-experience {
    display: flex;
    min-height: 603px;
    margin: 0 var(--section-pad) 0 0;
    padding-left: var(--section-pad);
}
.about-experience-content {
    flex: 1 1 60%; /* Divi: 3_5 column = 3/5 */
    min-width: 0;
    background: #f1f7fb;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Divi: h2 header_text_color="#738f61", 44px, letter-spacing 1px */
.about-experience-content h2 {
    color: var(--green-sage);
    font-size: 44px;
    letter-spacing: 1px;
    line-height: 120%;
    padding-bottom: 10px;
}
.about-experience-photo {
    flex: 1 1 40%; /* Divi: 2_5 column = 2/5 */
    min-width: 0;
    margin-left: 48px; /* Divi: gutter between columns */
    background-size: cover;
    background-position: bottom center;
}

/* Credentials list — Divi: custom-svg-list with small-flourish.svg icons */
.credentials-list {
    list-style: none;
    padding: 0 0 24px 10px;
    margin: 0;
}
.credentials-list li {
    position: relative;
    padding: 16px 0 0 40px;
    margin-bottom: 16px;
    line-height: 28px;
}
.credentials-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15px;
    width: 24px;
    height: 30px;
    background: url('/assets/images/small-flourish.svg') no-repeat center / contain;
}
.credentials-list li strong {
    display: block;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    color: #4E7396; /* AA-hardened from Divi #648BB2 — 20px/600wt is normal text, needs 4.5:1 (4.6:1 on #f1f7fb, 4.6:1 on #f5f5f5) */
    letter-spacing: 0.25px;
    margin-bottom: -20px; /* Divi value — pulls description closer to title */
}
.credentials-list a {
    color: var(--blue-link);
    text-decoration: none;
    font-weight: 400;
    transition: color var(--transition);
}
.credentials-list a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* ---------- Service Pages ---------- */

/* Service hero — hidden on desktop, shown on tablet (like about-hero) */
.service-hero { display: none; }
.service-hero img { width: 100%; height: auto; display: block; }

/* Service intro — 1/3 photo + 2/3 content (like about-bio) */
.page-service main { margin-top: 0; }

/* ==============================================
   Legal pages — Privacy Policy, Terms of Use
   ============================================== */
.page-legal main { margin-top: 0; }
.legal-page {
    /* Extra top padding clears the floating centered logo on Privacy / Terms.
       Other pages don't use .legal-page so their layout is untouched. */
    padding: 168px 24px 72px;
    background: #FAF7F2;
}
@media (max-width: 767px) {
    .legal-page { padding-top: 120px; }
}
.legal-wrap {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    padding: 56px 56px 64px;
    border-radius: 4px;
    border: 1px solid #E5DFD4;
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    color: var(--body-text, #484747);
    line-height: 1.7;
    font-size: 17px;
}
.legal-wrap h1 {
    font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--blue-primary, #3a5d8a);
    margin: 0 0 4px;
    letter-spacing: 0.5px;
}
.legal-wrap .legal-effective {
    font-size: 14px;
    color: var(--text-muted, #84817E);
    margin: 0 0 28px;
}
.legal-wrap h2 {
    font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--blue-primary, #3a5d8a);
    margin: 36px 0 12px;
    letter-spacing: 0.3px;
}
.legal-wrap h3 {
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--blue-primary, #3a5d8a);
    margin: 22px 0 8px;
    letter-spacing: 0.25px;
}
.legal-wrap p { margin: 0 0 14px; }
.legal-wrap ul {
    margin: 0 0 18px;
    padding-left: 22px;
}
.legal-wrap li {
    margin-bottom: 6px;
}
.legal-wrap a {
    color: var(--blue-link, #4A7196);
    text-decoration: none;
    transition: text-decoration-color 0.2s;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}
.legal-wrap a:hover {
    text-decoration-color: currentColor;
}
@media (max-width: 700px) {
    .legal-page { padding: 56px 16px 56px; }
    .legal-wrap { padding: 32px 24px 40px; font-size: 16px; }
    .legal-wrap h1 { font-size: 2rem; }
    .legal-wrap h2 { font-size: 1.35rem; margin-top: 28px; }
}

/* ==============================================
   Client Design Questionnaire (public, token-gated)
   Reuses the .contact-hero layout — 1/3 photo + 2/3 form.
   Mirrors the contact-form input styling (which is
   scoped to #contact-form) so the look stays consistent.
   ============================================== */
.page-questionnaire .contact-form-wrap h1 {
    font-size: 38px;
}
/* Photo column — solid warm cream instead of the cover-stretched grasscloth.
   The stock /contact/ image is portrait-shaped and gets blurry when forced to
   fill a column this tall. */
.page-questionnaire .contact-photo {
    background-color: #EFE6D0;
}
/* Regular body-copy intro (replaces the bold blue .special treatment). */
.page-questionnaire .questionnaire-intro {
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-size: 17px;
    line-height: 1.7;
    color: var(--body-text, #484747);
    margin: 0 0 28px;
}
.page-questionnaire .questionnaire-error {
    background: #fdecec;
    border: 1px solid #e6b3b3;
    color: #8a3a3a;
    padding: 12px 16px;
    border-radius: 3px;
    margin-bottom: 24px;
    font-size: 15px;
}

/* Inputs + textareas — same look as #contact-form fields */
.questionnaire-form input[type="text"],
.questionnaire-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    transition: border-color 0.3s;
    box-sizing: border-box;
    line-height: 1.55;
}
.questionnaire-form input[type="text"]:focus,
.questionnaire-form textarea:focus {
    border-color: var(--blue-steel, #648BB2);
    outline: none;
}
.questionnaire-form textarea {
    resize: vertical;
}
/* Per-type minimum heights — keeps fields generous even when rows attribute is overridden */
.q-field-medium textarea { min-height: 90px; }
.q-field-long textarea   { min-height: 170px; }

.questionnaire-section {
    border: none;
    padding: 0;
    margin: 36px 0 0;
}
.questionnaire-section legend {
    font-family: var(--font-heading, 'Cormorant Garamond', Georgia, serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--green-sage, #738f61);
    padding: 0 0 6px;
    margin-bottom: 18px;
    border-bottom: 1px solid #E5DFD4;
    width: 100%;
    letter-spacing: 0.3px;
}
.q-field {
    margin-bottom: 22px;
}
.q-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.q-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    margin-bottom: 0;
    cursor: pointer;
    line-height: 1.5;
    font-family: 'Spectral', Georgia, serif;
    font-size: 16px;
    color: var(--body-text, #484747);
}
.q-option input[type="radio"],
.q-option input[type="checkbox"] {
    margin-top: 6px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--blue-primary, #3a5d8a);
}
.q-option-other {
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.q-option-other span {
    flex-shrink: 0;
    font-style: italic;
    color: var(--green-form, var(--green-sage, #738f61));
}
.q-other-input {
    flex: 1;
}
@media (max-width: 700px) {
    .page-questionnaire .contact-form-wrap h1 { font-size: 30px; }
    .questionnaire-section legend { font-size: 22px; }
}

.service-intro {
    display: flex;
    min-height: 603px;
    margin: 150px var(--section-pad) 0;
    padding-bottom: 48px;
}
.service-intro + .service-photo-break + .service-feature,
.service-intro + .service-feature,
.service-photo-wide + .two-image-row,
.two-image-row + .service-intro,
.service-photo-wide + .two-image-row + .service-intro { margin-top: 0; }
.service-intro-photo {
    flex: 0 0 auto;
    width: 25%;
    max-width: 402px;
    min-width: 402px;
    background-size: cover;
    background-position: center;
}
.service-intro-content {
    flex: 1 1 auto;
    margin-left: 48px;
    background: var(--off-white);
    padding: 72px 48px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.service-intro-content h1,
.service-intro-content h2 {
    color: var(--green-sage);
    font-size: 44px;
    letter-spacing: 1px;
    line-height: 120%;
    padding-bottom: 10px;
}
.service-intro-content .btn { margin-top: 30px; margin-bottom: 20px; }
.service-feature-content .btn { margin-top: 20px; margin-bottom: 20px; }

/* "Right for you?" variant — Divi uses 48px uniform padding (no extra top) */
.service-intro-alt .service-intro-content { padding-top: 48px; }
.service-intro-alt .service-intro-content > p:last-child { padding-bottom: 20px; } /* Divi: blurb p gets padding-bottom:20px */

/* Service photo break — hidden on desktop, shown tablet (like about-photo-break) */
.service-photo-break { display: none; }
.service-photo-break img { width: 100%; height: auto; display: block; }

/* Service feature — 3/5 content + 2/5 photo (like about-experience)
   Divi: section padding 0|48|0|0, row 100%, col1 3_5 (66.55% of row),
   col2 2_5 (30.63% of row), gutter 48px. Col1 has 48px left padding. */
.service-feature {
    display: flex;
    min-height: 603px;
    margin: 0 var(--section-pad) 0 0;
}
.service-feature-content {
    flex: 0 0 calc(66.55% - 48px);
    min-width: 0;
    margin-left: 48px;
    background: #f1f7fb;
    padding: 48px 144px 48px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.service-feature-content h2 { padding-bottom: 10px; }
.service-feature-photo {
    flex: 0 0 30.63%;
    min-width: 0;
    margin-left: 48px;
    background-size: cover;
    background-position: center;
}

/* FAQ page — .special must beat .service-intro-content h2 (specificity 0,1,1) */
.page-faq h2.special {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 20px;
    color: var(--blue-primary);
    letter-spacing: 0.25px;
    line-height: 1.2;
    margin-top: 12px;
}

/* FAQ page — section overrides */
.page-faq .service-photo-break { margin: 0; }
.faq-feature .service-feature-content {
    background: var(--off-white);
}
.faq-feature-blue .service-feature-content {
    background: var(--card-bg);
}
.faq-feature + .service-photo-wide { margin-top: 48px; }
.service-photo-wide + .service-intro-alt { margin-top: 0; }
.service-intro-alt + .service-feature { margin-top: 0; }
.faq-aesthetic,
.location-aesthetic {
    background: var(--green-mint);
    margin-top: 48px;
    padding: 48px 96px;
}
.faq-aesthetic h2,
.location-aesthetic h2 {
    color: var(--blue-primary);
    font-size: 44px;
    letter-spacing: 1px;
    line-height: 120%;
    text-align: center;
    margin-bottom: 30px;
}
.faq-aesthetic p,
.location-aesthetic p {
    margin-bottom: 16px;
}

/* Location page — service feature blocks with light blue bg */
.location-feature-blue {
    background: var(--card-bg);
}

/* Section fade-in (CSS transitions + IntersectionObserver) */
.page-service .service-intro-photo,
.page-service .service-feature-photo,
.page-service .service-photo-wide,
.page-service .service-photo-break img,
.page-service .two-image-row img,
.page-service .service-cta-photo,
.page-service .service-intro-content,
.page-service .service-feature-content,
.page-service .service-cta-content,
.page-service .process-section,
.page-service .location-aesthetic,
.page-service .faq-aesthetic,
.page-about .about-bio-photo,
.page-about .about-bio-content,
.page-about .about-photo-break img,
.page-about .about-experience-content,
.page-about .about-experience-photo,
.page-service .tablet-photo img,
.page-about .tablet-photo img,
.page-home .intro-photo,
.page-home .intro-content,
.page-home .full-bleed,
.page-home .tablet-photo img,
.page-home .tagline-bar,
.page-home .homepage-hero,
.page-home .homepage-hero-mobile,
.page-home .cta-content,
.page-home .cta-photo,
.page-about .cta-content,
.page-about .cta-photo,
.page-service .cta-content,
.page-service .cta-photo {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease, transform 1.2s ease;
}
.page-service .service-intro-content,
.page-service .service-feature-content,
.page-service .service-cta-content,
.page-about .about-bio-content,
.page-about .about-experience-content,
.page-home .intro-content {
    transition-delay: 0.2s;
}
.page-service .photo-visible,
.page-service img.photo-visible,
.page-home .photo-visible,
.page-home img.photo-visible,
.page-about .photo-visible,
.page-about img.photo-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Wide photo — desktop only (Divi uses background-size:cover + center) */
.service-photo-wide {
    width: 100%;
    margin-top: 48px;
    margin-bottom: 48px;
    overflow: hidden;
}
.service-photo-wide img {
    width: 100%;
    height: 800px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Two-image row — hidden on desktop, shown on tablet (like Divi disabled_on) */
.two-image-row {
    display: none;
    gap: 24px;
    padding: 0 24px;
}
.two-image-row img {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    display: block;
}

/* Process section — green background */
.process-section {
    background: var(--green-mint);
    padding: 48px 0 64px;
}
.process-section > h2 {
    text-align: center;
    color: var(--blue-primary);
    font-size: 44px;
    letter-spacing: 1px;
    line-height: 120%;
    padding-bottom: 48px;
}
.process-section .accordion {
    padding: 0;
    width: 80%;
    max-width: 1480px;
    margin: 0 auto;
}
.process-section .accordion::before {
    left: 23px;
}

/* Service CTA — 2/3 content + 1/3 photo */
.service-cta {
    display: flex;
    padding: 48px 0;
    background: url('/assets/images/canvas-small.webp') center / cover no-repeat;
}
.service-cta-content {
    flex: 0 0 calc(66.666% - 48px);
    background: white;
    padding: 64px 48px 84px;
    margin-left: 48px;
}
/* Divi text module uses padding-bottom (not margin) on <p> tags — prevents
   margin collapse with .btn-row margin-top, matching Divi's 60px visual gap. */
.service-cta-content > p { margin-bottom: 0; padding-bottom: 20px; }
/* Divi CTA buttons: 1px border (vs 2px global) */
.service-cta-content .btn { border-width: 1px; }
/* CTA plain bullet list — Divi uses disc bullets with compact spacing here
   (not the decorative credentials-list flourish icons) */
.service-cta-content ul {
    list-style: disc;
    padding: 0 0 20px 25px;
}
.service-cta-content ul li {
    line-height: 1.5;
}
.service-cta-content h2 {
    color: var(--blue-steel);
    font-size: 44px;
    letter-spacing: 1px;
    line-height: 120%;
    padding-bottom: 10px;
}
.service-cta-photo {
    flex: 0 0 calc(33.333% - 48px);
    background-size: cover;
    background-position: center;
    margin-right: 48px;
}

/* ---------- Contact Page ---------- */
.page-contact main { margin-top: 0; }

.contact-hero {
    display: flex;
    min-height: 603px;
    margin: 150px var(--section-pad) 24px;
}
.contact-photo {
    flex: 0 0 auto;
    width: 25%;
    max-width: 402px;
    min-width: 402px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.contact-photo img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 48px solid #fff;
}
.contact-form-wrap {
    flex: 1 1 auto;
    margin-left: 48px;
    background: var(--off-white);
    padding: 72px 48px 48px;
}
.contact-form-wrap h1 {
    color: var(--green-sage);
    font-size: 44px;
    letter-spacing: 1px;
    line-height: 120%;
    padding-bottom: 10px;
}
.contact-form-wrap .special {
    margin-top: 0;
}

/* Thank-you page */
.thankyou-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page-thankyou .contact-photo img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-bottom: none;
}

/* ---------- 404 Page ---------- */
.error-404 {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 24px;
}
.error-404-content h1 {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 400;
    color: var(--blue-primary);
    margin-bottom: 16px;
}
.error-404-content .special {
    max-width: 560px;
    margin: 0 auto 32px;
}
.error-404-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.error-404-links .green-button {
    min-width: 140px;
}

/* --- Form fields --- */
#contact-form {
    margin-top: 24px;
}
.form-field {
    margin-bottom: 16px;
}
.form-field fieldset,
fieldset.form-field {
    border: none;
    padding: 0;
    margin: 0 0 16px;
}
.form-label {
    font-size: 20px;
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-weight: 400;
    letter-spacing: 0.25px;
    color: var(--body-text);
    display: block;
    line-height: 160%;
    margin-bottom: 4px;
}
.form-required {
    font-size: 14px;
    color: var(--green-form); /* darkened from #738f61 for WCAG AA 4.65:1 on #F5F5F5 */
    font-weight: 400;
}
.form-sublabel {
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--green-form); /* darkened from #738f61 for WCAG AA 4.65:1 on #F5F5F5 */
    letter-spacing: 0.25px;
    line-height: 160%;
    display: block;
    margin-bottom: 2px;
}
.form-description {
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-size: 16px;
    font-style: italic;
    color: var(--body-text);
    margin-bottom: 8px;
    line-height: 160%;
}

/* Name row — two columns */
.form-name-row {
    display: flex;
    gap: 16px;
}
.form-name-col {
    flex: 1;
}

/* Text inputs and textarea */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form select,
#contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    transition: border-color 0.3s;
    box-sizing: border-box;
}
#contact-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23484747' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    cursor: pointer;
}
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
    border-color: var(--blue-steel);
    outline: none;
}
.form-field-error select {
    border-color: #c44;
}
#contact-form textarea {
    min-height: 160px;
    resize: vertical;
}
.form-char-count {
    font-size: 13px;
    color: var(--text-muted); /* darkened from #999 for WCAG AA 4.68:1 on #F5F5F5 */
    text-align: right;
    margin-top: 4px;
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
}

/* Checkboxes */
.form-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-size: 16px;
    color: var(--body-text);
    line-height: 160%;
}
.form-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--blue-steel);
    flex-shrink: 0;
}

/* File upload zone */
.form-upload-zone {
    border: 2px dashed #ccc;
    border-radius: 4px;
    padding: 24px;
    text-align: center;
    background: #fff;
    transition: border-color 0.3s, background-color 0.3s;
}
.form-upload-zone.drag-over {
    border-color: var(--blue-steel);
    background: #f0f6fc;
}
.form-upload-icon {
    display: block;
    margin: 0 auto 8px;
    color: var(--blue-primary);
}
.form-upload-text {
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-size: 15px;
    color: var(--body-text);
    margin-bottom: 8px;
}
.form-upload-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-family: 'Spectral', serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0.25px;
    border-radius: 4px;
    background-color: var(--green-form); /* darkened from #738F61 for WCAG AA 5.07:1 */
    color: #fff;
    border: 1px solid transparent;
    transition: background-color 0.25s ease;
    cursor: pointer;
}
.form-upload-btn:hover {
    background-color: #4A6139;
}
.form-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.form-upload-hint {
    font-size: 13px;
    color: var(--text-muted); /* darkened from #999 for WCAG AA 5.11:1 on white */
    margin-top: 8px;
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
}
.form-file-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
}
.form-file-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 4px;
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-size: 14px;
    color: var(--body-text);
}
/* Submit button */
.form-submit-btn {
    margin-top: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    font-family: 'Spectral', serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 160%;
    letter-spacing: 0.25px;
    border-radius: 4px;
    text-decoration: none;
    background-color: var(--blue-steel);
    color: #fff;
    border: 2px solid transparent;
    transition: background-color 0.25s ease;
    cursor: pointer;
}
.form-submit-btn:hover {
    background-color: var(--blue-primary);
}
.form-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Validation errors */
.form-error {
    color: var(--error);
    font-size: 14px;
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    margin-top: 4px;
}
.form-error-banner {
    background: #fdecec;
    border: 1px solid #e6b3b3;
    color: #8a3a3a;
    padding: 12px 16px;
    border-radius: 3px;
    margin: 0 0 24px;
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-size: 15px;
}
.form-field-error input,
.form-field-error textarea {
    border-color: var(--error);
}

/* Contact info block */
.contact-info {
    margin-top: 48px;
}
.contact-info-name {
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-size: 20px;
    color: var(--body-text);
    font-weight: 400;
    margin-bottom: 4px;
    line-height: 160%;
}
.contact-info-address,
.contact-info-phone {
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-size: 20px;
    color: var(--body-text);
    line-height: 160%;
}
.contact-info-phone a {
    color: var(--blue-primary);
    text-decoration: none;
}
.contact-info-phone a:hover {
    text-decoration: underline;
}
.contact-social {
    margin-top: 8px;
    font-family: 'Spectral', Georgia, "Times New Roman", serif;
    font-size: 20px;
}
.contact-social a {
    color: var(--blue-primary);
    text-decoration: none;
}
.contact-social a:hover {
    text-decoration: underline;
}
.contact-social-sep {
    margin: 0 6px;
    color: var(--text-muted); /* darkened from #999 for WCAG AA 4.68:1 on #F5F5F5 */
}

/* reCAPTCHA notice (kept for reference, badge shown instead) */
.recaptcha-notice { display: none; }

/* ---------- Footer ---------- */
#site-footer {
    margin-top: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Divi: both stripes use same image (1512×48) as full-width <img>.
   At viewport 1745px, image scales to ~55px tall.
   Top stripe: section height=48px, max-height=48px → overflow hidden clips bottom ~7px.
   Bottom stripe: no height constraint → full ~55px visible. */
.footer-stripe {
    height: 48px;
    max-height: 48px;
    overflow: hidden;
    line-height: 0;
}
.footer-stripe-img {
    width: 100%;
    height: auto;
    display: block;
}
.footer-stripe-bottom {
    height: auto;
    max-height: none;
    overflow: visible;
}
.footer-inner {
    text-align: center;
    /* Divi section default padding ~4% → 70px at 1745px viewport */
    padding: 70px var(--section-pad);
}
.footer-logo-wrap { display: block; max-width: 440px; margin: 0 auto; }
.footer-logo { width: 100%; height: auto; }

.footer-heading {
    font-family: var(--font-body);
    font-weight: 500;
    font-style: italic;
    font-size: 24px;
    color: var(--blue-steel);
    /* Divi h4: letter-spacing 0.25px, line-height 160% */
    letter-spacing: 0.25px;
    line-height: 160%;
    margin: 24px 0;
}

/* Footer locations — desktop 3-col
   Divi: row width="45%", 3×1/3 columns, module_class="custom-bullets" */
.footer-locations-desktop {
    display: flex;
    justify-content: center;
    gap: 48px;
    width: 45%;
    margin: 0 auto 32px;
}
.footer-loc-col {
    text-align: left;
    list-style: none;
    padding-left: 0;
}
.footer-loc-col li {
    position: relative;
    padding: 0 0 0 1.4em;
    line-height: 26px;
}
.footer-loc-col li::before {
    content: '•';
    font-size: 18px;
    color: var(--blue-steel);
    position: absolute;
    left: 0;
}
.footer-loc-col a {
    /* Divi: Montserrat, 20px, #648BB2, letter-spacing 0.25px */
    font-family: var(--font-ui);
    font-size: 20px;
    letter-spacing: 0.25px;
    color: var(--blue-steel-dark); /* --blue-steel darkened for WCAG AA 4.5:1 on white */
    text-decoration: none;
    transition: color var(--transition), text-decoration var(--transition);
}
.footer-loc-col a:hover {
    /* Divi custom-bullets: a:hover color stays #648BB2, underline with 4px offset */
    color: var(--blue-steel-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Footer locations — tablet inline */
.footer-locations-tablet { display: none; }
.footer-locations-tablet p {
    font-family: var(--font-ui);
    /* Divi: no custom text_font_size; global body_font_size=20px */
    font-size: 20px;
    letter-spacing: 0.25px;
    color: var(--blue-steel-dark); /* --blue-steel darkened for WCAG AA 4.5:1 */
    margin-bottom: 4px;
}
.footer-locations-tablet a {
    color: var(--blue-steel-dark);
    transition: color var(--transition);
}
.footer-locations-tablet a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Footer locations — phone stacked
   Divi: Montserrat, 18px phone, #648bb2, 0.25px letter-spacing, center, line-height 1.6em */
.footer-locations-phone { display: none; }
.footer-locations-phone a {
    display: block;
    font-family: var(--font-ui);
    font-size: 18px;
    line-height: 1.6em;
    letter-spacing: 0.25px;
    color: var(--blue-steel-dark); /* --blue-steel darkened for WCAG AA 4.5:1 */
    text-align: center;
}

/* Footer contact row */
.footer-contact-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 32px 0;
    flex-wrap: wrap;
}
.footer-contact-link {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 20px;
    color: var(--green-sage-dark); /* --green-sage darkened for WCAG AA 4.5:1 on white */
    letter-spacing: 0.25px;
    transition: color var(--transition);
}
.footer-contact-link:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
/* Divi: .inline-icon margin-left:24px, .inline-icon2 margin-right:24px, .insta-icon margin:0 24px */
.footer-flourish { width: 24px; height: 14px; margin: 0 12px; display: inline-block; }
.footer-contact-link + .footer-flourish { margin-left: 24px; }
.footer-insta + .footer-flourish { margin-right: 24px; }
.footer-insta img { width: 33px; height: 33px; }
.footer-insta { transition: opacity var(--transition); }
.footer-insta:hover { opacity: 0.7; }
.footer-phone {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 20px;
    color: var(--green-sage-dark); /* --green-sage darkened for WCAG AA 4.5:1 on white */
    letter-spacing: 0.25px;
    transition: color var(--transition);
}
.footer-phone:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }

.footer-copyright {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--blue-steel-dark);
    letter-spacing: 0.25px;
    line-height: 160%;
    margin-top: 24px;
    padding-bottom: 12px;
}
.footer-copyright a {
    color: var(--blue-steel-dark);
    transition: color var(--transition);
}
.footer-copyright a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-credit { color: var(--blue-steel-dark); }

/* ---------- Back to Top ---------- */
#back-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 44px;
    height: 44px;
    background: var(--blue-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
    z-index: 90;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
#back-to-top[hidden] { display: none; }
#back-to-top.is-visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}
#back-to-top:hover { background: var(--green-sage); }

/* ---------- Thank You ---------- */

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet landscape / small desktop */
@media (max-width: 1215px) {

    .homepage-hero { margin: 0; }

    .tagline-bar .tagline-main { font-size: 44px; }

    /* Footer: tablet — Divi section default padding ~4% ≈ 30px at 768px */
    .footer-inner { padding-top: 30px; padding-bottom: 30px; }
    .footer-locations-desktop { display: none; }
    .footer-locations-tablet { display: block; margin-bottom: 24px; }
    /* Override global p a { font-weight:600 } — Divi: Montserrat 400 */
    .footer-locations-tablet a { font-weight: 400; }

    .cta-photo { display: none; }
    .cta-content { margin: 0 24px; }
    .hide-tablet { display: none !important; }

    /* Service feature: hide photo on tablet — Divi disabled_on="on|on|off" */
    .service-feature { flex-direction: column; margin: 0; padding: 24px; min-height: auto; }
    .service-intro-alt + .service-feature { padding-top: 0; }
    .service-feature-content { margin-left: 0; padding: 48px; }
    .service-feature-photo { display: none; }

    /* Gallery grid: tighter gap on smaller viewports */
    .gallery-grid { gap: 24px; }
}

/* iPad Pro portrait — desktop header, tablet content adjustments */
@media (min-width: 981px) and (max-width: 1215px) {
    .homepage-hero { margin-left: 48px; margin-right: 48px; }
    .service-feature { padding: 0 48px; margin-bottom: 48px; }
    .service-cta-photo.hide-tablet { display: block !important; }
}

/* Tablet portrait — header switches to mobile layout here (desktop header shows at iPad Pro portrait 1024px) */
@media (max-width: 980px) {
    :root { --section-pad: 24px; --header-height: calc(136px + env(safe-area-inset-top, 0px)); }

    /* Header: switch to mobile layout — solid blue with teeth overlay.
       Gradient makes status bar area white on iOS; padding pushes content below it. */
    #site-header {
        background: linear-gradient(
            to bottom,
            #fff 0px,
            #fff env(safe-area-inset-top, 0px),
            var(--blue-steel) env(safe-area-inset-top, 0px)
        );
        top: 0;
        padding-top: env(safe-area-inset-top, 0px);
    }
    #site-header::before {
        content: '';
        position: absolute;
        top: env(safe-area-inset-top, 0px);
        left: 0;
        right: 0;
        height: 36px;
        background: url('/assets/images/mobile-background.webp') repeat-x center top;
        pointer-events: none;
        z-index: 1;
    }
    #site-header.header-scrolled {
        background: linear-gradient(
            to bottom,
            #fff 0px,
            #fff env(safe-area-inset-top, 0px),
            var(--blue-steel) env(safe-area-inset-top, 0px)
        );
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }
    #site-header.header-scrolled::before {
        content: '';
        display: block;
        height: 36px;
        background: url('/assets/images/mobile-background.webp') repeat-x center top;
        box-shadow: none;
    }
    .header-inner {
        padding: 0;
    }
    .nav-desktop { display: none; }
    .nav-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 36px 24px 0 0;
        position: relative;
        z-index: 2;
    }

    h1, h2 { font-size: 33px; }
    h4 { font-size: 33px; }
    .tagline-bar .tagline-subtitle { font-size: 23px; }
    .tagline-bar .tagline-main { font-size: 37px; }

    .homepage-hero { height: 663px; margin: var(--header-height) 0 0; }
    /* Divi default row padding switches from 2% to 30px below 981px */
    .tagline-bar { margin: 0; padding: 30px 48px; }

    /* Intro: photo hidden on tablet per Divi disabled_on="on|on|off" */
    /* Divi shortcode says 48px but renders 24px at tablet — match rendered value */
    .intro-section { min-height: auto; padding: 24px 0; }
    .intro-photo { display: none; }

    /* Service cards: stack — Divi: custom_margin_tablet="64px|0px|0px|0px" */
    .services-section { margin: 64px 0 0; }
    .services-grid { flex-direction: column; padding: 0 24px; margin-top: 48px; margin-bottom: 0; gap: 24px; }
    /* Divi: blurb custom_padding 40px + internal .et_pb_blurb_content margin-left 45px = 85px effective */
    .service-card { padding: 64px 85px 32px; }
    /* Divi: disabled_on="on|on|off" — green CTA hidden on tablet/phone */
    .services-cta { display: none; }

    /* Portfolio: 2 columns, 24px around each card */
    .portfolio-grid { margin-top: calc(var(--header-height) + 24px); gap: 24px; padding: 0 24px 24px; }
    .portfolio-card { flex: 1 1 calc(50% - 12px); }
    .portfolio-card.wide { flex: 1 1 100%; }
    .page-portfolio .tablet-photo-bottom { display: none; }
    /* Gallery grid tablet portrait: clear mobile header + 40px whitespace, 48px side padding */
    .gallery-grid { margin-top: calc(var(--header-height) + 40px); padding: 0 48px 48px; }
    .gallery-nav-row .btn { font-size: 16px; padding: 10px 18px; }

    /* CTA: stack — Divi: margin_tablet="0px", padding_tablet="24px||24px" */
    .cta-section { flex-direction: column; margin: 0; padding: 24px 0; }
    .cta-content { margin: 0 24px; padding: 64px 48px; }
    .cta-photo { flex: none; height: 300px; margin-right: 0; }
    /* Divi: .green-button margin-right: 40px, both margin-top: 40px */
    .btn-row { gap: 40px; }

    /* Filmstrip: hidden on tablet/phone (Divi disabled_on="on|on|off") */
    .filmstrip { display: none; }

    /* About page — tablet */
    .about-hero { display: block; margin: var(--header-height) 0 0; }
    .about-photo-break { display: block; }
    .about-bio { min-height: auto; margin: 0; padding: 24px; }
    .about-bio-photo { display: none; }
    .about-bio-content { margin-left: 0; padding: 48px; }
    .about-bio-content h1 { font-size: 33px; }
    .about-experience { flex-direction: column; margin: 0; padding: 24px; }
    .about-experience-content { padding: 48px; }
    .about-experience-content h2 { font-size: 33px; }
    .about-experience-photo { display: none; }

    /* Tablet-only full-bleed photos (Divi disabled_on="off|off|on" — hidden on desktop) */
    .tablet-photo { display: block; padding-top: 24px; }
    .tablet-photo img { width: 100%; height: auto; display: block; }
    /* Divi: desk photo section custom_padding_tablet="48px", custom_margin_tablet="" (default 0) */
    .tablet-photo-bottom { margin-top: 0; padding-top: 0; }

    /* Hero: show mobile photo, hide bg */
    .hero-photo-mobile { display: block; }
    .hero-photo-mobile img { width: 100%; }
    .hero-inner { flex-direction: column; }
    .hero-photo { display: none; }
    .hero-content { padding: var(--section-pad); }

    /* Service pages — tablet */
    .service-hero { display: block; margin: var(--header-height) 0 0; }
    .service-photo-break { display: block; }
    .service-intro { min-height: auto; margin: 0; padding: 24px; }
    .service-intro-photo { display: none; }
    .service-intro-content { margin-left: 0; padding: 48px; }
    .service-intro-content h1,
    .service-intro-content h2 { font-size: 33px; }
    .service-photo-wide { display: none; }
    .two-image-row { display: flex; }
    .process-section { padding: 48px 48px 64px 24px; }
    .process-section > h2 { font-size: 33px; }
    /* Divi: toggle_font_size_tablet="22px", body_font_size_tablet="18px" */
    .accordion-header { font-size: 22px; }
    .accordion-body { font-size: 18px; }
    .page-faq .service-intro-alt + .faq-feature { padding-top: 0; }
    .faq-aesthetic,
    .location-aesthetic { padding: 48px; margin-top: 24px; text-align: center; }
    .faq-aesthetic h2,
    .location-aesthetic h2 { font-size: 33px; }
    .service-cta { flex-direction: column; margin: 0; padding: 24px 0; }
    .service-cta-content { padding: 64px 48px; margin: 0 24px; }
    .service-cta-content h2 { font-size: 33px; }
    .service-cta-photo { display: none; }

    /* Contact page — tablet */
    .contact-hero { min-height: auto; margin: 0; padding: 24px; }
    .contact-photo { display: none; }
    .contact-form-wrap {
        margin-left: 0;
        padding: 48px;
        margin-top: var(--header-height);
    }
    .contact-form-wrap h1 { font-size: 33px; }
}

/* Phone */
@media (max-width: 767px) {
    body { font-size: 18px; }

    /* Divi: title_font_size_phone="29px" */
    h1, h2 { font-size: 29px; }
    h4 { font-size: 27px; }
    .special { font-size: 18px; }
    .tagline-bar .tagline-subtitle { font-size: 20px; }
    .tagline-bar .tagline-main { font-size: 35px; }

    .homepage-hero { height: 300px; margin: 0; }
    .homepage-hero { display: none; }
    .homepage-hero-mobile { display: block; }
    .homepage-hero-mobile img { width: 100%; display: block; max-height: 565px; object-fit: cover; }

    .tagline-bar { padding: 30px 24px; }
    .tagline-bar .tagline-subtitle { padding: 0 16px 10px; }
    .tagline-bar .tagline-main { padding: 0 8px; }

    /* Divi row phone: custom_padding_phone="24px|24px|24px|24px" */
    .intro-section { padding: 24px 0; }
    /* Divi: intro blurb header_font_size_phone="27px" */
    .intro-content h2 { font-size: 27px; }

    /* Divi: custom_margin_phone="48px||0px" */
    .services-section { margin: 48px 0 0; }
    /* Divi: heading custom_padding_phone="|24px||24px" */
    .services-section > h2 { padding-left: 24px; padding-right: 24px; }
    /* Divi: blurb custom_padding="64px|40px|32px|40px" — no phone override, back to 40px */
    .service-card { padding: 64px 40px 32px; }
    /* Divi: header_font_size_phone="18px" */
    .service-card h3 { font-size: 18px; }
    /* Link is inside card padding (40px sides) — less room than WP where button is outside blurb */
    .service-card .btn-link { font-size: 19px; }
    .services-grid { margin-bottom: 24px; }

    /* Divi: CTA text module custom_padding_phone="48px||48px||true|true" */
    .cta-content { padding: 48px 48px 48px 24px; }

    .btn { font-size: 16px; width: 100%; justify-content: center; }
    .btn-row { flex-direction: column; }
    .btn .btn-arrow { width: 14px; height: 14px; }

    /* Divi: wallpaper section custom_padding_phone="0px||0px" — no top padding on phone */
    .tablet-photo { padding-top: 0; }

    /* About page — phone */
    .about-bio-content { padding: 48px 48px 48px 24px; }
    .about-bio-content h1 { font-size: 27px; }
    .about-experience { padding: 24px; }
    .about-experience-content { padding: 48px 48px 48px 24px; }
    .about-experience-content h2 { font-size: 27px; }
    .credentials-list li strong { font-size: 18px; }

    /* Portfolio: 1 column, 24px around each card */
    .portfolio-grid { margin-top: calc(var(--header-height) + 24px); gap: 24px; padding: 0 24px 24px; }
    .portfolio-card { flex: 1 1 100%; }
    .portfolio-caption { font-size: 29px; }
    /* Gallery grid phone: 24px gap below header (Divi: 26.5px) */
    .gallery-grid { margin-top: calc(var(--header-height) + 24px); gap: 24px; padding: 0 24px 48px; }
    .gallery-grid a.portrait { flex-basis: 140px; }
    .gallery-back { padding: 0 24px 44px; }
    .gallery-nav-row { flex-direction: row; gap: 16px; }
    .gallery-nav-row .btn { flex: 1; font-size: 16px; }

    /* Service pages — phone */
    .service-hero { display: block; margin: var(--header-height) 0 24px; }
    .service-intro { margin-top: 0; padding: 0 24px 24px; }
    .service-intro-content { padding: 48px 48px 48px 24px; }
    .service-intro-content h1 { font-size: 27px; }
    .service-intro-content h2 { font-size: 27px; }
    .service-photo-break { margin-bottom: 24px; }
    .service-feature { padding: 0 24px; margin-bottom: 24px; }
    .service-feature-content { padding: 48px 48px 48px 24px; }
    .service-feature-content h2 { font-size: 27px; }
    .two-image-row { display: block; padding: 0 24px; margin-bottom: 24px; }
    .two-image-row img { width: 100%; height: auto; }
    .two-image-row img:last-child { display: none; }
    .process-section { padding: 48px 48px 64px 24px; }
    .process-section .accordion { width: 100%; }
    .process-section > h2 { font-size: 27px; }
    /* Divi: toggle_font_size_phone="22px", body_font_size_phone="18px" */
    .accordion-header { font-size: 22px; }
    .accordion-body { font-size: 18px; }
    .page-faq .service-photo-break { margin-bottom: 24px; }
    .faq-aesthetic,
    .location-aesthetic { padding: 48px 60px 32px; margin-top: 24px; text-align: center; }
    .faq-aesthetic h2,
    .location-aesthetic h2 { font-size: 27px; }
    .service-cta-content { padding: 48px 48px 48px 24px; margin: 0 24px; }
    .service-cta-content h2 { font-size: 27px; }

    /* Contact page — phone */
    .contact-hero { padding: 0; }
    .contact-form-wrap { padding: 48px 24px; }
    .contact-form-wrap h1 { font-size: 29px; }
    .contact-form-wrap .special { font-size: 18px; }
    .form-label { font-size: 16px; }
    .form-submit-btn { font-size: 16px; width: 100%; }
    .form-upload-btn { font-size: 16px; width: 100%; }
    .form-name-row { flex-direction: column; gap: 12px; }
    .contact-social { font-size: 16px; }

    /* Divi: footer section custom_padding_phone="0px||0px||true|false" */
    .footer-inner { padding-top: 0; padding-bottom: 0; }

    /* Footer: phone stacked */
    .footer-locations-tablet { display: none; }
    .footer-locations-phone { display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; }

    .footer-contact-row {
        flex-direction: column;
        gap: 16px;
    }
    .footer-flourish { display: none; }

    .nav-mobile-bar { padding: 12px 16px 0 0; }
    .logo-wrap-mobile { width: 80%; }
    .logo-mobile { width: 370px; height: 100px; }
    :root { --header-height: calc(112px + env(safe-area-inset-top, 0px)); }

    /* Phone teeth: WP row has -24px margin + menu module covers from 11.5px down,
       so only ~12px of teeth actually visible (0 to 11.5px viewport) */
    #site-header::before {
        top: env(safe-area-inset-top, 0px);
        height: 12px;
        background-position: center -24px;
    }
    /* Override tablet scrolled teeth (36px) — phone should stay 12px */
    #site-header.header-scrolled::before {
        height: 12px;
        background-position: center -24px;
    }
}

/* Small phone */
@media (max-width: 480px) {
    .homepage-hero { height: 220px; }
}