/*
   INDEX.CSS — HOMEPAGE STYLE GUIDE
   Loaded after styles.css; this file customizes the homepage.

   FIND YOUR SECTION (search for the numbers below):
   01 Page layout and scrolling
   02 Hero: portrait, introduction, and buttons
   03 Portal panels
   04 The Process: service cards
   05 Shared links and red buttons
   06 Moving photo columns and fades
   07 Sessions: prices and descriptions
   08 Session photo carousels
   09 Booking and policy section headings
   10 Booking layout and calendar
   11 Booking form and submission message
   12 Later booking and policy layout adjustments
   13 Question form and FAQ
   14 Smaller-screen form layouts (900px / 600px)
   15 Homepage header and shared finishing rules
   16 Main mobile styles (1024px and below)
   17 Desktop session hover styles (1025px and above)

   HOW TO EDIT:
   Base rules apply at all sizes unless a later rule overrides them.
   @media (max-width: ...) applies at that width and below.
   @media (min-width: ...) applies at that width and above.
   Some selectors appear more than once: later rules can override earlier
   ones when they have equal priority. Their order is intentional here.
   Spacing and color variables such as --page-padding come from styles.css.
   JavaScript in script.js adds state classes such as .is-open and .active.
*/


/* =========================================================
   01 — PAGE LAYOUT AND SCROLLING
   Sets the page background, allows vertical scrolling, and sizes the hero.
   ========================================================= */

/* --- CORE LAYOUT --- */
body, html {
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    /* Unlock scrolling for the new services section */
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100%;
}



/* --- SCROLL DOWN UPON CLICK --- */

#services {
    scroll-margin-top: 50px;
}

.page-shell {
    display: flex;
    flex-direction: column;
}

.main-dashboard {
    --gallery-gap: clamp(3px, 0.7vw, 10px);

    position: relative;
    display: flex;
    height: 100vh; /* Fixed height for desktop to keep bars consistent */
    width: 100vw;
    gap: var(--gallery-gap);
    box-sizing: border-box;
    align-items: stretch; /* Forces
     left and right side to same height */
}

/* =========================================================
   02 — HERO: PORTRAIT AND INTRODUCTION
   Positions the portrait behind the bio and keeps the text and links above it.
   ========================================================= */

/* LEFT SIDE: Branding - ALIGNED TO BOTTOM */
.branding-side {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* This pushes everything to the bottom baseline */
    padding-bottom: 0px; /* Adjust if you want a tiny bit of breathing room from the edge */
    position: relative; /* REQUIRED: Anchors the absolute photo container */
    overflow: hidden;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    padding-bottom: var(--page-padding);
/* Ensures the image still fills the whole box regardless of padding */
box-sizing: border-box;
}

/* The Photo Layer */
.branding-photo-bg {
    position: absolute;
    inset: 0; /* Short for top:0, right:0, bottom:0, left:0 */
    z-index: 1; /* Puts photo behind content (default z-index is auto/0) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Studio Aesthetic: Grayscale + Darkness for Text Clarity */
    filter: grayscale(100%) brightness(100%); 
}

/* Push all content above the photo */
.branding-side h1,
.branding-side p,
.branding-side a {
    position: relative;
    z-index: 2; /* REQUIRED: Makes sure text stays on top */
}

.hero-bio {
    max-width: 500px;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;
    opacity: 0.6;
    margin-top: 0;
    margin-bottom: 0px;
    color: var(--text-color);
}


.services-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: rgba(255, 0, 0, 0.218);
    border: 1px solid rgba(255, 0, 0, 0.6);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.3em;
    width: fit-content;
    transition: all 0.4s ease;
    margin-top: 0px;
    margin-bottom: 0; /* Ensures the border is the baseline */
}

.services-btn:hover {
    background: #ff0000; /* Solid red fill on hover */
    color: #fff; /* White text on hover */
    border-color: #ff0000;
}


/* =========================================================
   03 — PORTAL PANELS
   Styles .portal-side and .portal-box when those elements are present.
   ========================================================= */

/* RIGHT SIDE: Interactive Portal */
.portal-side {
    flex: 1;
    display: flex;
    gap: 15px;
    height: 100%; /* Stretches bars to full dashboard height */
}

.portal-box {
    flex: 1;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: flex 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    background: #0a0a0a;
}
/* This applies ONLY to the photography blade */
.photo-portal .box-bg {
    /* Adjust this percentage to get the exact zoom you want */
    background-size: 80%; 
    
    /* Optional: shift the focus (e.g., 50% 20% zooms into the top) */
    background-position: center center; 
}

.portal-box:hover { flex: 2.5; }

.box-bg {
    position: absolute;
    inset: 0;
    /* background-size: cover; */
    background-position: center;
    background-size: cover; /* Change this to 'cover' */
    filter: grayscale(100%) brightness(13%);
    transition: transform 1s ease, filter 0.5s ease;
}

.portal-box:hover .box-bg {
    filter: grayscale(0%) brightness(40%);

}

.portal-box h2 {
    position: relative;
    z-index: 10;
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5em;
    transition: letter-spacing 0.4s ease;
}

/* =========================================================
   04 — THE PROCESS
   Controls the three service cards, numbered headings, and dividers.
   ========================================================= */

/* --- SERVICES SECTION --- */
.services-section {
    min-height: auto;
    background: #050505; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--page-padding);
}
.service-buttons {
display: flex;
align-items: center;
gap: 30px;
}

.service-caret {
    display: none;
}

/* Target the title in the booking section */
.services-section .hero-title {
    margin-bottom: 20px;
}

.hero-title{
    line-height: 1;
}

/* Optional: Make the bio text below it slightly smaller too */
.services-section .hero-bio {
    font-size: clamp(12px, 1.5vw, 14px);
    opacity: 0.8;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
  
   
}

.service-item {
    padding: 20px;

    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    align-items: baseline;
}




.service-item:nth-child(1) {
    background: #1a0b0b;
}

.service-item:nth-child(2) {
    background: #351010;
}

.service-item:nth-child(3) {
    background: #7a1111;
}

/* 3. The Vertical Divider */
.service-item:not(:last-child)::after {
content: "";
position: absolute;
right: -40px; /* Exactly half of the grid gap (80/2) */
top: 10%;    /* Line starts 10% from the top */
height: 80%; /* Line is 80% tall for a cleaner look */
width: 1px;
background: rgba(255, 255, 255, 0.1); /* Subtle white line */
}

/*
.service-item:hover {
background: #161616; 
transition: background 0.4s ease;
}

*/
.service-header {
display: flex;
align-items: baseline; /* Aligns the bottom of the text perfectly */
gap: 15px;            /* Adjust this for the horizontal space between them */
margin-bottom: 20px;   /* Consistent gap to the paragraph below */
}

.service-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.service-heading .service-num {
    font-size: inherit;
    font-weight: 200;
}

.service-heading h3 {
    font-size: inherit;
    font-weight: 500;
    margin: 0;
}


.contact-link {
position: relative;
color: rgba(255, 255, 255, 0.3) !important;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.2em;
transition: color 0.3s ease;
}

/* Hover text */
.contact-link:hover {
    color: rgba(255, 255, 255, 1.0) !important;
}

/* Animated underline */
.contact-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;

    width: 100%;
    height: 1px;
    background: #fff;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Show underline on hover */
.contact-link:hover::after {
    transform: scaleX(1);
}
/* Ensure the number maintains its distinct style */
.service-num {
    font-weight: 200;
    opacity: 0.3;
}

.service-item p {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.7; /* Brighter for better readability */
    font-weight: 300;
    margin-top: 0;
    margin-bottom:10px; /* space between paragraph and the element under it */
    grid-column: 1 / -1;
}


/* SERVICE CARDS HEADERS */

.service-item h3 {

    font-family: var(--font-family);
    font-weight: 500;
    line-height: 1;
    grid-column: 2;
    margin: 0;
    font-size: inherit;
}


/* Red Overlay for the Get in Touch Card */
.service-item.red-card {
    background: rgba(255, 0, 0, 0.08); /* Subtle red tint */
        /* Gives internal space for the tint to show */
    border-radius: 0px; /* Optional: adds a slight finish to the card */
    transition: background 0.4s ease;
}

.service-item.red-card:hover {
    background: rgba(255, 0, 0, 0.12); /* Slightly deeper on hover */
}

/* =========================================================
   05 — LINKS AND RED BUTTONS
   Sets button colors, link underlines, and hover feedback.
   ========================================================= */

/* Red Styled Button */
.services-btn.red-btn {
    border: 1px solid rgba(255, 0, 0, 0.6); /* Red rectangle border */
    color: #ffffff; /* Bright red text for visibility */
    margin-top: auto; /* Pushes button to bottom of card */
}

.services-btn.red-btn:hover {
    background: #ff0000; /* Solid red fill on hover */
    color: #fff; /* White text on hover */
    border-color: #ff0000;
}

/* Ensure the caret in the red button is also handled */
.red-btn .caret {
    color: inherit;
}


/* Book a Session button in desktop nav */
.nav-links .services-btn.red-btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: rgba(255, 0, 0, 0.218);
    border: 1px solid rgba(255, 0, 0, 0.6);
    color: #fff !important;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.3em;
    width: fit-content;
    transition: all 0.4s ease;
}

/* Solid red when hovered */
.nav-links .services-btn.red-btn:hover {
    background-color: #ff0000;
    border-color: #ff0000;
    color: #fff !important;
}

/* Don't give button the normal nav underline */
.nav-links .services-btn.red-btn::after {
    display: none;
}

.contact-link {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.2em;

position: relative;
width: fit-content;

transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}

/* underline */
.contact-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;

    width: 100%;
    height: 1px;
    background: #fff;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

/* hover */
.contact-link:hover {
    color: #fff;
}

.contact-link:hover::after {
    transform: scaleX(1);
}

.mini-link {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.2em;
    font-weight: 600;
    transition: opacity 0.3s ease;
}


.mini-link:hover {
    opacity: 0.5;
}

/* =========================================================
   06 — MOVING PHOTO COLUMNS
   Controls the hero photo strips, their up/down animation, and dark fades.
   These base rules also apply outside mobile; mobile changes are in section 16.
   ========================================================= */

/* ==================================================
   HERO GALLERY BASE STYLES
   ================================================== */
   

/* DESKTOP: Hide only the right-hand header controls; the logo remains. */
@media (min-width: 1025px) {
    .header-right {
        display: none !important;
    }
}




.gallery-marquee {
    flex: 1;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gallery-gap);
}


.gallery-column {
    height: 100%;
    overflow: hidden;
    min-width: 0;
}

.gallery-column-track {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.gallery-column-set {
    display: flex;
    flex-direction: column;
    gap: var(--gallery-gap);
    padding-bottom: var(--gallery-gap);
}

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


/* JavaScript synchronizes all three reels and centers each landing row. */
.gallery-column-track {
    will-change: transform;
}

.gallery-column-set {
    flex-shrink: 0;
}

.gallery-column img {
    flex-shrink: 0;
    height: auto;
}


/*-------- Gallery bottom fade ----------*/

.gallery-marquee::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 180px;

    background: linear-gradient(
        to bottom,
        rgba(3, 3, 3, 0) 0%,
        rgba(3, 3, 3, 0.4) 40%,
        rgba(3, 3, 3, 0.5) 70%,
        rgb(3, 3, 3) 100%
    );

    z-index: 10;
    pointer-events: none;
}

/*-------- Photo bottom fade ----------*/

.branding-photo-bg::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 180px;

    background: linear-gradient(
        to bottom,
        rgba(3, 3, 3, 0) 0%,
        rgba(3, 3, 3, 0.4) 40%,
        rgba(3, 3, 3, 0.5) 70%,
        rgb(3, 3, 3) 100%
    );

    pointer-events: none;
}


/*---- Dashboard top fade -----*/

.main-dashboard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150px;

    background: linear-gradient(
        to bottom,

        rgba(3, 3, 3, 1) 0%,
        rgba(3, 3, 3, 0.8) 20%,
        rgba(3, 3, 3, 0.5) 35%,
        rgba(3, 3, 3, 0.2) 60%,
        rgba(3, 3, 3, 0) 100%
    );

    z-index: 10;
    pointer-events: none;
}



.gallery-marquee {
    position: relative;
    overflow: hidden;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}


.gallery-view-btn {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 20;
    margin: 0;

    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.3em;
    white-space: nowrap;

    transition: color 0.3s ease;
}

.gallery-view-btn:hover {
    color: #fff;
}

.gallery-view-btn::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;

    width: 100%;
    height: 1px;
    background: #fff;

    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.gallery-view-btn:hover::after {
    transform: scaleX(1);
}


/* =========================================================
   07 — SESSIONS AND PRICES
   Lays out session cards, prices, descriptions, and supporting images.
   ========================================================= */

/* ================= HOME PRICING ================= */

.pricing-detail {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 18px;
    align-items: baseline;
}

.pricing-detail-caret {
    display: none;
}

.home-pricing-main h3.pricing-detail-title {
    margin: 0;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
}

.pricing-detail p {
    margin: 0;
}

.home-pricing-row {
    display: flex;
    flex-direction: column;

    min-width: 0;
    padding: 32px;

    border: 1px solid rgba(255,255,255,.1);

    transition:
        background .35s ease,
        border-color .35s ease;
}

/* PRICING HOVER

.home-pricing-row:hover {
    background: #0d0d0d;
    border-color: rgba(255,255,255,.18);

    padding-left: 32px;
    padding-right: 32px;
}
*/

.home-pricing-row:first-child {
    border-top: 1px solid rgba(255,255,255,.1);
}


.home-pricing-section {
    display: block;
    padding: 0 var(--page-padding);
}

.home-pricing-left {
    display: flex;       /* Put children into the Flexbox layout system */
    flex-direction: row; /* Arrange them horizontally (this is the default) */
    align-items: center; /* Vertically center the children */
    gap: 30px;           /* Put 30px between them */
    margin-bottom: 40px;
}

.home-pricing-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding-top: 0;
}



/* RESPONSIVE STACKING OF PRICING OPTIONS */

@media (max-width: 950px) {
    .home-pricing-list {
        grid-template-columns: 1fr;
    }
}

.home-pricing-title h2 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: -0.05em;
    font-weight: 500;
}


.pricing-images {
    display: flex;
    gap: 8px;
    height: 260px; /* match Studio Portraits height */
    margin-top: 40px;
}

.pricing-images img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

.home-pricing-row--accent {
    background: rgba(203,19,44,.055);
}

.home-pricing-row--accent:hover {
    background: rgba(203,19,44,.09);
}


.home-pricing-main {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.home-pricing-main h3 {
    margin: 0 0 12px;

    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    letter-spacing: -.025em;
}

.home-pricing-main p {
    max-width: 500px;
    margin: 0;

    font-size: 13px;
    line-height: 1.7;

    color: rgba(255,255,255,.48);
    font-weight: 300;
}

.home-pricing-meta {
    align-items: flex-start;
    text-align: left;
    margin-top: 28px;
}

.home-pricing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
    margin-bottom: 26px;
    padding-bottom: 24px; /* Reserve space for the note below the aligned price. */
    line-height: 1.05;
}

.home-pricing-header h3 {
    margin: 0;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    letter-spacing: -.025em;
}

.home-price {
    flex-shrink: 0;

    font-family: var(--font-display);
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: 1;
    text-transform: uppercase;
}


.home-price-group {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.student-price-note {
    position: absolute;
    top: 100%;
    right: 0;
    white-space: nowrap;
    margin: 6px 0 0;
    color: #ff0000;
    font-size: 12px;
    line-height: 1.5;
}

.home-price-note {
    margin: 0;           /* Remove the paragraph's default browser margin */
    display: block;
    width: 100%;
    max-width: none;
    font-size: 10px;
    color: rgba(255,255,255,.3);
}

.home-pricing-left .home-price-note {
    transform: translateY(-3px);
}


.home-pricing-label {
    display: block;
    margin-bottom: 9px;

    font-size: 9px;
    letter-spacing: .28em;
    text-transform: uppercase;

    color: rgba(203,19,44,.95);
}

/* =========================================
   PRICING IMAGE CAROUSEL
   ========================================= */

/* =========================================================
   08 — SESSION PHOTO CAROUSELS
   The window clips the image track. script.js moves and duplicates the images;
   these rules control image sizes and the left/right arrow appearance.
   ========================================================= */

.pricing-carousel {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 0px;

    width: calc(100% + 48px);
    margin-left: -24px;

    min-width: 0;
    margin-top: 28px;
}

.pricing-carousel-window {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.pricing-carousel-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.pricing-carousel-set {
    display: flex;
    gap: 10px;
    padding-right: 10px;
}

.pricing-carousel img {
    display: block;

    height: 230px;
    width: auto;

    flex-shrink: 0;
}


/* ARROWS */

.pricing-carousel-arrow {
    appearance: none;

    width: 24px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;

    background: transparent;
    color: rgba(255,255,255,.4);

    font-family: inherit;
    font-size: 30px;
    font-weight: 200;
    line-height: 1;

    cursor: pointer;

    transition: color .25s ease;
}

.pricing-carousel-arrow:hover {
    color: #fff;
}


/* =========================================================
   09 — BOOKING AND POLICY HEADINGS
   Sets initial section spacing and shared heading styles. Section 12 adjusts
   the column proportions and heading layout later in this file.
   ========================================================= */

/* =========================================================
   REQUEST A SESSION + INFO & POLICIES
   ========================================================= */

.home-booking-section {
    padding: 0 var(--page-padding);
}

.home-policies-section {
    padding: 0 var(--page-padding) clamp(60px, 8vw, 85px);
}

/* ================= INFO & POLICIES ================= */

.home-policies-section {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 0;
    align-items: center;
}

.home-policies-section .home-section-heading {
    display: block;
    margin-bottom: 0;
}

.home-policies-section .faq-list {
    width: 100%;
    margin-left: 0;
}

.home-policies-section .home-section-heading h2 {
    margin: 0;
}

.home-policies-section .home-section-heading p {
    max-width: 600px;
    margin: 18px 0 0;
}


/* ================= SHARED TITLE LAYOUT ================= */

.home-section-heading {
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
    gap: clamp(45px, 7vw, 110px);
    align-items: start;
    margin-bottom: 30px;
}

.home-section-heading h2 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: -.05em;
    font-weight: 500;
}

.home-section-heading p {
    max-width: 600px;
    margin: 0;

    font-size: 13px;
    line-height: 1.7;
    font-weight: 300;

    color: rgba(255,255,255,.48);
}


/* =========================================================
   BOOKING LAYOUT
   ========================================================= */

/* =========================================================
   10 — BOOKING LAYOUT AND CALENDAR
   Places the calendar beside the request form. Calendar button classes show
   selected, disabled, and empty dates; script.js creates the date buttons.
   ========================================================= */

.booking-layout {
    display: grid;
    grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr);
    gap: clamp(45px, 7vw, 110px);

    align-items: start;
}



.booking-left {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.home-section-heading-left h2 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: -0.05em;
    font-weight: 500;
}

.home-section-heading-left p {
    max-width: 600px;
    margin: 18px 0 0;

    font-size: 13px;
    line-height: 1.7;
    font-weight: 300;

    color: rgba(255, 255, 255, 0.48);
}



/* =========================================================
   CALENDAR
   ========================================================= */

.calendar-panel {
    position: sticky;
    top: calc(var(--header-height, 80px) + 30px);
}


.calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 25px;
}


.calendar-head > div {
    text-align: center;
}


.calendar-small {
    display: block;

    margin-bottom: 8px;

    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;

    color: rgba(255,255,255,.3);
}


.calendar-head h3 {
    margin: 0 0 12px;
    font-family: var(--font-family);
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 400;
    letter-spacing: -.025em;
    text-transform: none;
}

.calendar-arrow {
    width: 42px;
    height: 42px;

    border: 1px solid rgba(255,255,255,.1);

    background: transparent;
    color: rgba(255,255,255,.55);

    cursor: pointer;

    transition:
        border .25s ease,
        color .25s ease,
        background .25s ease;
}


.calendar-arrow:hover {
    border-color: rgba(255,255,255,.4);

    color: #fff;

    background: #0d0d0d;
}


.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}


.calendar-weekdays {
    margin-bottom: 8px;
}


.calendar-weekdays span {
    padding: 8px 0;

    text-align: center;

    font-size: 9px;

    color: rgba(255,255,255,.25);
}


.calendar-day {
    aspect-ratio: 1;

    border: 0;

    background: transparent;

    color: rgba(255,255,255,.72);

    font-family: var(--font-family);
    font-size: 11px;

    cursor: pointer;

    position: relative;

    transition:
        background .2s ease,
        color .2s ease;
}


.calendar-day:hover:not(:disabled) {
    background: rgba(255,255,255,.06);
    color: #fff;
}


.calendar-day.is-selected {
    background: var(--primary-color);
    color: #fff;
}


.calendar-day:disabled {
    color: rgba(255,255,255,.12);
    cursor: default;
}


.calendar-day.is-empty {
    pointer-events: none;
}


.calendar-legend {
    display: flex;
    gap: 20px;

    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid rgba(255,255,255,.07);

    font-size: 9px;

    color: rgba(255,255,255,.3);
}


.legend-dot {
    display: inline-block;

    width: 6px;
    height: 6px;

    margin-right: 6px;

    background: rgba(255,255,255,.35);
}


.legend-dot--selected {
    background: var(--primary-color);
}



/* =========================================================
   BOOKING FORM
   ========================================================= */

/* =========================================================
   11 — BOOKING FORM
   Controls labels, text fields, focus appearance, summary, and submit area.
   Mobile field sizes are overridden to 16px in section 16.
   ========================================================= */

.booking-form {
    display: flex;
    flex-direction: column;
}

.booking-fields {
    display: flex;
    flex-direction: column;
    gap: 28px;
}


.form-row {
    display: grid;
    gap: 20px;
}


.form-row--two {
    grid-template-columns: 1fr 1fr;
}
.form-status:empty {
    display: none;
}


.booking-form label {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.booking-form label > span {
    font-size: 9px;
    letter-spacing: .2em;

    text-transform: uppercase;

    color: rgba(255,255,255,.38);
}


.booking-form input,
.booking-form select,
.booking-form textarea {

    box-sizing: border-box;

    width: 100%;

    border: 0;

    border-radius: 0;

    background: rgba(255,255,255,.025);

    color: #fff;

    padding: 15px 12px;

    font-family: var(--font-family);
    font-size: 13px;

    outline: none;

    transition:
        border-color .25s ease,
        background .25s ease;

    user-select: text;
    -webkit-user-select: text;
}


.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
    border-color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.04);
}


.booking-form textarea {
    resize: vertical;
    min-height: 130px;
    overflow-x: hidden;
    overflow-wrap: break-word;
}


.booking-form select {
    appearance: none;
}


.booking-form option {
    background: #080808;
    color: #fff;
}



/* Booking summary */

.booking-summary {
    display: grid;

    grid-template-columns: 1fr 1fr;

    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
}


.booking-summary > div {
    padding: 20px 0;
}


.booking-summary > div + div {
    padding-left: 20px;

    border-left: 1px solid rgba(255,255,255,.1);
}


.summary-label {
    display: block;

    margin-bottom: 7px;

    font-size: 8px;
    letter-spacing: .2em;

    color: rgba(255,255,255,.28);
}


.booking-summary strong {
    font-size: 12px;
    font-weight: 400;
}


.booking-submit {
    align-self: flex-start;

    cursor: pointer;
}

.booking-submit-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.booking-submit-row .form-fineprint {
    margin: 0;
    max-width: 420px;
    flex: 1;
}


.form-status {
    min-height: 16px;

    margin: 0;

    font-size: 11px;

    color: rgba(255,255,255,.6);
}


.form-fineprint {
    max-width: 650px;

    margin: 0;

    font-size: 10px;

    color: rgba(255,255,255,.28);
    padding: 0;
}


/* =========================================================
   REQUEST A SESSION + INFO & POLICIES
   ========================================================= */

/* =========================================================
   12 — LATER BOOKING AND POLICY ADJUSTMENTS
   Overrides earlier column proportions and heading rules. Keep these after
   the initial booking styles so the current layout is preserved.
   ========================================================= */

/* =========================================================
   SHARED TWO-COLUMN LAYOUT
   ========================================================= */

.booking-layout,
.home-policies-section {
    display: grid;

    /* Same column proportions for both sections */
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);

    /* Same space between left and right */
    column-gap: clamp(45px, 7vw, 110px);

    align-items: start;
}


/* =========================================================
   REQUEST A SESSION
   ========================================================= */

.booking-left {
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-width: 0;
}

.home-section-heading-left h2 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: -0.05em;
    font-weight: 500;
}

.home-section-heading-left p {
    max-width: 600px;
    margin: 18px 0 0;

    font-size: 13px;
    line-height: 1.7;
    font-weight: 300;

    color: rgba(255,255,255,.48);
}


/* =========================================================
   INFO & POLICIES
   ========================================================= */

.policies-left {
    min-width: 0;
    align-self: start;
}

.home-policies-section .home-section-heading {
    display: block;
    margin: 0;
}

.home-policies-section .home-section-heading h2 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 40px);
    line-height: .9;

    text-transform: uppercase;
    letter-spacing: -0.05em;
    font-weight: 500;
}


/* =========================================================
   13 — QUESTION FORM AND FAQ
   Styles the question box, email field, and send button. The following FAQ
   rules style native details/summary elements and their expanded state.
   ========================================================= */

.policy-question-box {
    margin-top: 32px;
    width: 100%;
}

.policy-question-box > label {
    display: block;
    margin-bottom: 9px;

    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;

    color: rgba(255,255,255,.38);
}

.policy-combined-field {
    width: 100%;
    box-sizing: border-box;

    background: rgba(255,255,255,.025);

    border: 1px solid rgba(255,255,255,.1);

    transition:
        background .25s ease,
        border-color .25s ease;
}

.policy-combined-field:focus-within {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.2);
}

.policy-combined-field textarea {
    width: 100%;
    min-height: 125px;
    box-sizing: border-box;

    padding: 16px 14px 12px;

    border: 0;
    outline: 0;

    background: transparent;
    color: #fff;

    font-family: var(--font-family);
    font-size: 13px;
    line-height: 1.5;

    resize: vertical;
}

.policy-combined-bottom {
    display: flex;
    align-items: center;

    border-top: 1px solid rgba(255,255,255,.08);
}

.policy-combined-bottom input {
    flex: 1;
    min-width: 0;

    padding: 14px;

    border: 0;
    outline: 0;

    background: transparent;
    color: #fff;

    font-family: var(--font-family);
    font-size: 12px;
}

.policy-combined-bottom input::placeholder,
.policy-combined-field textarea::placeholder {
    color: rgba(255,255,255,.28);
}

.policy-send-btn {
    align-self: stretch;
    padding: 0 18px;

    border: 0;
    border-left: 1px solid rgba(255,255,255,.08);

    background: transparent;
    color: rgba(255,255,255,.6);

    font-family: var(--font-family);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.policy-send-btn:hover {
    background: #ff0000;
    color: #fff;

    /* keep divider white */
    border-left-color: rgba(255,255,255,.08);
}

/* =========================================================
   FAQ LIST
   ========================================================= */

.faq-list {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.faq-list details {
    border-top: 1px solid rgba(255,255,255,.1);
}

.faq-list details:last-child {
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.faq-list summary {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    padding: 24px 0;

    list-style: none;
    cursor: pointer;

    font-size: 14px;
    font-weight: 400;

    color: rgba(255,255,255,.7);

    transition: color .25s ease;
}

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

.faq-list summary:hover {
    color: #fff;
}

.faq-list summary span {
    font-size: 18px;
    font-weight: 200;

    color: rgba(255,255,255,.3);

    transition: transform .25s ease;
}

.faq-list details[open] summary span {
    transform: rotate(45deg);
}

.faq-list details p {
    max-width: 700px;

    margin: -4px 0 28px;

    font-size: 12px;
    line-height: 1.75;

    color: rgba(255,255,255,.43);
}


/* =========================================================
   MOBILE
   ========================================================= */

/* =========================================================
   14 — SMALLER-SCREEN FORM LAYOUTS
   At 900px and below, booking and policies stack into one column.
   The following 600px block also stacks paired fields and summary cells.
   ========================================================= */

@media (max-width: 900px) {


    .booking-layout,
    .home-policies-section {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 40px;
    }

 

    .policy-question-box {
        max-width: 100%;
    }


    .home-section-heading {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 40px;
    }


    .booking-layout {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .calendar-panel {
        position: relative;

        top: 0;
    }


    .faq-list {
        width: 100%;

        margin-left: 0;
    }

    .booking-submit-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }

    .booking-submit-row .form-fineprint {
        width: 100%;
        max-width: none;
        flex: none;
        margin: 0;
    }
}


@media (max-width: 600px) {

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


    .booking-summary {
        grid-template-columns: 1fr;
    }


    .booking-summary > div + div {
        padding-left: 0;

        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.1);
    }


    .calendar-legend {
        flex-direction: column;

        gap: 8px;
    }
}



/* =========================================================
   15 — HOMEPAGE HEADER AND FINISHING RULES
   Makes the header transparent and positions it at the top of the page.
   Also sets question-field interaction, default hidden controls, and dividers.
   ========================================================= */

/* HOMEPAGE — FLOATING LOGO ONLY */

header,
.nav-wrapper,
.header-container {
    background: transparent !important;
    border: none !important;
}

.nav-wrapper {
    position: absolute;
    top: 0;
    left: 0;
}


.header-inner {
    padding: 25px 0;
}



#policyQuestion {
    display: block;
    position: relative;
    z-index: 5;

    width: 100%;
    min-height: 125px;

    pointer-events: auto !important;

    user-select: text !important;
    -webkit-user-select: text !important;

    cursor: text;

    color: #fff !important;
    caret-color: #fff;

    background: transparent;

    border: 0;
    outline: none;

    resize: vertical;
}



/* Mobile hamburger menu hidden by default */
#mobile-menu,
#nav-overlay {
    display: none;
}


.section-indicator {
    display: none;
}


.section-divider {
    width: auto;
    margin-left: var(--page-padding);
    margin-right: var(--page-padding);
    box-sizing: border-box;
}


.section-divider {
    margin-top: clamp(35px, 7vw, 75px);
    margin-bottom: clamp(35px, 7vw, 75px);
}




/* =========================================================
   16 — MAIN MOBILE STYLES
   Everything inside this block applies only at 1024px and below.
   It ends at the comment "End mobile: max-width 1024px".
   Includes form text sizes, full-screen hero, expandable descriptions,
   the right-side indicator, and the hamburger menu.
   ========================================================= */

@media (max-width: 1024px) {



    /* MOBILE: Hide the webpage scrollbar while keeping scrolling enabled. */

    html,
    body {
        scrollbar-width: none;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
        width: 0;
    }


    /* MOBILE: Keep actual field text at 16px to avoid iPhone focus zoom. */

    .booking-form input,
    .booking-form textarea,
    .booking-form select,
    .policy-combined-field textarea,
    .policy-combined-bottom input {
        font-size: 16px;
    }


    #services,
    #pricing,
    #booking,
    #policies {
        scroll-margin-top: 0;
    }

    /* MOBILE: Scale section headings for narrow screens. */

    


    .main-dashboard .hero-title,
    .services-section h2,
    .home-pricing-section h2,
    .home-booking-section h2,
    .policies-section h2 {
        font-size: clamp(22px, 6vw, 28px);
        line-height: 0.95;
    }


    /* MOBILE: Fill the screen with photos and place the introduction over them. */
    .main-dashboard {
        display: block;
        height: auto;
        padding: 0;
    }

    .main-dashboard {
        position: relative;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
        background: #030303;
    }

    .main-dashboard .gallery-marquee {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--gallery-gap);

        z-index: 1;

        filter: brightness(0.7);
    }

    .gallery-column-set {
        gap: var(--gallery-gap);
        padding-bottom: var(--gallery-gap);
    }

    .gallery-marquee::after {
        display: none;
    }

    .main-dashboard::after {
        content: "";
        position: absolute;
        inset: 0;

        background:
            linear-gradient(
                to bottom,
                rgba(3,3,3,.95) 0%,
                rgba(3,3,3,.38) 18%,
                rgba(3,3,3,.38) 65%,
                rgba(3,3,3,.96) 100%
            );

        pointer-events: none;
        z-index: 2;
    }

    .main-dashboard .branding-side {
        position: absolute;

        left: var(--page-padding);
        right: var(--page-padding);
        bottom: 0px;

        z-index: 3;

        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: column;
        align-items: flex-start;

        background: none;
    }

    .branding-photo-bg {
        display: none;
    }

    .main-dashboard .hero-title {
        margin: 0 0 5px;
    }

    .main-dashboard .hero-buttons {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: clamp(6px, 2vw, 10px);

        width: 100%;
        margin-top: 18px !important;

        pointer-events: auto;
        position: relative;
        z-index: 3;
    }

    .main-dashboard .hero-buttons .services-btn {
        margin: 0;

        padding:
            clamp(9px, 2.5vw, 12px)
            clamp(10px, 3.5vw, 24px);

        font-size: clamp(7px, 2.2vw, 10px);
        letter-spacing: clamp(0.12em, 0.6vw, 0.3em);

        white-space: nowrap;
        flex: 1;

        text-align: center;
    }


    /* MOBILE: Keep expandable service cards inside the page padding. */
    .service-item {
        min-width: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .service-heading {
        width: 100%;
        cursor: pointer;
        align-items: center;
        font-size: 16px;
    }

    .service-heading h3 {
        flex: 1;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .service-heading .service-num,
    .service-heading .service-caret {
        flex-shrink: 0;
    }

    .service-caret {
        display: flex;
        align-items: center;
        justify-content: center;

        margin-left: auto;

        font-size: 18px;
        font-weight: 200;
        line-height: 1;

        transform: translateY(6px);
        transition: transform 0.25s ease;
    }

    .service-item:not(.is-open) .service-heading {
        margin-bottom: 0;
    }

    .service-item.is-open .service-heading {
        margin-bottom: 10px;
    }

    .service-item > p {
        display: none;
    }

    .service-item.is-open > p {
        display: block;
    }

    .service-item.is-open .service-caret {
        transform: translateY(-2px) rotate(180deg);
    }


    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
        min-width: 0;
        gap: 20px;
    }

    /* MOBILE: Collapsed bio preview. script.js toggles .is-open to expand it. */

    .hero-bio-wrap {
        position: relative;
        width: 100%;
        max-width: none;
    }

    .main-dashboard .hero-bio {
        margin: 0;
        width: 100%;
        max-width: none;

        max-height: 62px;
        overflow: hidden;

        -webkit-mask-image:
            linear-gradient(
                to bottom,
                #000 0%,
                #000 55%,
                transparent 100%
            );

        mask-image:
            linear-gradient(
                to bottom,
                #000 0%,
                #000 55%,
                transparent 100%
            );

        transition: max-height .5s cubic-bezier(.16,1,.3,1);
    }


    .hero-bio-toggle {
        position: absolute;
        left: 50%;
        bottom: -14px;

        transform: translateX(-50%);

        width: 28px;
        height: 28px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0;

        background: transparent;
        border: 0;

        color: rgba(255,255,255,.75);

        font-size: 14px;

        cursor: pointer;

        z-index: 4;

        transition:
            transform .3s ease,
            color .3s ease;
    }


    /* MOBILE: Expanded bio state; removes the fade and reveals more text. */

    .hero-bio-wrap.is-open .hero-bio {
        max-height: 240px;

        -webkit-mask-image: none;
        mask-image: none;
    }

    .hero-bio-wrap.is-open .hero-bio-toggle {
        transform:
            translateX(-50%)
            rotate(180deg);

        color: #fff;
    }


    /* MOBILE: Fixed right-side section dots and temporary text labels.
       touch-action allows script.js to handle dragging on this toolbar. */


    .section-indicator {
        position: fixed;
        right: 6px;
        top: 50%;
        transform: translateY(-50%);

        display: flex;
        flex-direction: column;

        z-index: 900;
        
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
    }

    .section-indicator button {
        position: relative;

        display: flex;
        align-items: center;

        height: 38px;
        padding: 0;

        background: none;
        border: 0;

        color: #fff;
        font-family: var(--font-family);

        cursor: pointer;
    }

    .section-indicator button:not(:last-child)::after {
        content: "";
        position: absolute;

        left: 4px;
        top: 23px;

        width: 1px;
        height: 30px;

        background: rgba(255,255,255,.25);
    }
    .indicator-dot {
        width: 9px;
        height: 9px;

        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;

        background: transparent;

        transition:
            background .25s ease,
            border-color .25s ease,
            transform .25s ease;
    }

    .section-indicator button.active .indicator-dot {
        background: #fff;
        border-color: #fff;
        transform: scale(1.15);
    }
    .section-indicator button.active .indicator-label {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    .section-indicator.labels-hidden button.active .indicator-label {
        opacity: 0;
        visibility: hidden;
        transform: translateX(6px);
    }

    .indicator-label {
        position: absolute;
        right: 20px;

        white-space: nowrap;

        font-size: 9px;
        letter-spacing: .14em;
        text-transform: uppercase;

        color: #fff;

        opacity: 0;
        visibility: hidden;
        transform: translateX(6px);

        transition:
            opacity .25s ease,
            transform .25s ease,
            visibility .25s;
    }

    .section-indicator button.active .indicator-label {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* MOBILE: Stack pricing headings and shrink the carousel images. */
    .home-pricing-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;

        width: 100%;
        margin-bottom: 30px;
    }

    .home-pricing-left .home-price-note {
        width: 100%;
        max-width: none;

        margin: 0;
        transform: none;

        text-align: left;
        line-height: 1.5;
    }

    .home-pricing-header {
        align-items: center;
    }

    /* Put descriptions of each session under the title on mobile */

    .pricing-detail {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .pricing-carousel img {
        height: clamp(110px, 28vw, 190px);
    }



    .pricing-detail {
        display: block;
    }

    .pricing-detail-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        cursor: pointer;
    }

    .pricing-detail-caret {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-size: 18px;
        font-weight: 200;
        height: 18px;
        transition: transform 0.25s ease;
        transform: translateY(-5px);
    }

    .pricing-detail.is-open .pricing-detail-caret {
        transform: translateY(-5px) rotate(180deg);
    }

    .pricing-detail-content {
        display: none;
        padding-top: 8px;
    }

    .pricing-detail.is-open .pricing-detail-content {
        display: block;
    }

    .pricing-detail.is-open .pricing-detail-caret {
        transform: rotate(180deg);
    }


    /* MOBILE: Show the hamburger and use flex to center overlay links. */
    #mobile-menu {
        display: flex;
    }

    #nav-overlay {
        display: flex;
    }

} /* End mobile: max-width 1024px */


/* =========================================================
   17 — DESKTOP SESSION HOVER
   Adds a pointer cursor and hover highlight to selectable session cards.
   ========================================================= */

@media (min-width: 1025px) {
    .home-pricing-row.pricing-select {
        cursor: pointer;
    }

    .home-pricing-row.pricing-select:hover {
        background: #0d0d0d;
        border-color: rgba(255,255,255,.18);
    }
}