/* RESET */

* {
margin:0;
padding:0;
box-sizing:border-box;
}

html, body{
height:100%;
font-family:'Sul Sans', sans-serif;
color:black;
}

/* FONTS */

@font-face{
font-family:'Sul Sans';
src:url('/fonts/SulSans-Regular.woff2') format('woff2'),
url('/fonts/SulSans-Regular.woff') format('woff');
font-weight:normal;
font-style:normal;
}

h1,h2,h3{
font-family:'Playfair Display', serif;
letter-spacing:.5px;
}

p{
line-height:1.7;
margin-bottom:18px;
max-width:620px;
}

/* LAYOUT */

.page{
display:flex;
height:100vh;
}

/* GLOBAL VERTICAL RHYTHM */

.text-section h2{
margin-top:40px;
margin-bottom:12px;
}

.text-section h3{
margin-top:28px;
margin-bottom:8px;
}

.text-section p{
margin-bottom:16px;
line-height:1.6;
}

/* tighten section spacing slightly */
.section-title{
margin-top:40px;
margin-bottom:12px;
}


/* DEFAULT = DESKTOP */
.image-section{
width:50%;
height:100vh;
position:fixed; /* already needed for overlay */
left:0;
top:0;
background-size:cover;
background-position:right center;
}

.image-section::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

/* subtle dark gradient */
background:linear-gradient(
to bottom,
rgba(0,0,0,0.35) 0%,
rgba(0,0,0,0.15) 40%,
rgba(0,0,0,0.4) 100%
);

z-index:1;
}

.image-title{
font-family:'Playfair Display', serif;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:clamp(36px, 5vw, 72px);
text-align:center;
z-index:2; /* important */
}

.text-section{
margin-left:50%;
width:50%;
height:100vh;
overflow-y:auto;
padding:70px 70px 120px 70px;
}

.option-block{
background:rgba(0,0,0,0.06);
padding:20px;
margin:30px 0;
}

.option-title{
font-family:'Playfair Display', serif;
font-size:22px;
margin-bottom:10px;
}

/* STYLING FOR MAILTO FOR EMAIL ADDRESS */

.contact-line a{
color:#76201d;
font-weight:600;
text-decoration:none;
}

/* TIGHTEN SPACING INSIDE OPTION BLOCKS */

.option-block h2,
.option-block h3{
margin-top:0;
margin-bottom:8px;
}

/* reduce space above images */
.option-block img{
margin-top:8px;
margin-bottom:10px;
}

/* reduce space above office hours (lists or paragraphs) */
.option-block ul,
.option-block p{
margin-top:8px;
}


/* MOBILE */

@media(max-width:900px){

.page{
flex-direction:column;
height:auto;
}

.image-section{
position:relative;
width:100%;
height:45svh;
background-size:cover;
background-position:center;
}

.text-section{
margin-left:0;
width:100%;
height:auto;
overflow:visible;
padding:40px 30px 60px 30px;
}

.image-title{
font-family:'Playfair Display', serif;
font-size: clamp(36px, 7vw, 72px);
z-index:2;
}

}
    

/* NAVIGATION */

.hamburger{
position:fixed;
top:30px;
right:30px;
width:36px;
height:24px;
cursor:pointer;
z-index:1000;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.hamburger span{
display:block;
height:4px;
background:black;
border-radius:4px;
}

/* NAV PANEL */

.nav-panel{
position:fixed;
top:0;
right:0;
height:100vh;
background:#cfdfe8;
color:white;
padding:80px 60px;
transform:translateX(100%);
transition:transform .35s ease;
z-index:900;
}

.nav-panel.open{
transform:translateX(0);
}

.nav-panel a{
display:block;
color:#8a2621;
text-decoration:none;
font-size:24px;
margin-bottom:28px;
font-family:'Playfair Display', serif;
}

@media(max-width:900px){

.nav-panel{
width:90vw;
}

}

@media(min-width:901px){

.nav-panel{
width:auto;
min-width:320px;
}

}

/* MOBILE: HEADSHOT IMAGE POSITIONING */
@media(max-width:900px){

.headshot-page .image-section{
background-position:center 40%;
}

}


/* INDEX LOGO */

.logo{
max-width:130px;
display:block;
margin:0 auto 0px auto;
}

.section-title{
margin-top:40px; /* initially 50 */
margin-bottom:15px; /* initially 50 */
font-size:30px;
}

.office-image{
width:100%;
margin:35px 0;
}

/* GLOBAL LINK STYLE */

a{
color:#8a2621;
font-weight:bold;
text-decoration:none;
position:relative;
}

a:visited{
color:#63100c;
}

a:hover{
color:#bf1b13;
text-decoration:none;
}

a:active{
color:#bf1b13;
}

/* animated underline */
a::after{
content:"";
position:absolute;
left:0;
bottom:-2px;
width:0;
height:2px;
background:#bf1b13;
transition:width .25s ease;
}

a:hover::after{
width:100%;
}

/* CONTENT BULLETED LIST */

.content-list{
margin-top:20px;
margin-bottom:30px;
padding-left:22px;
max-width:620px;
}

.content-list li{
margin-bottom:18px;
line-height:1.7;
}

.content-list li strong{
font-weight:600;
}

/* TIGHT CONTENT BULLETED LIST */

.tight-content-list{
margin-top:20px;
margin-bottom:30px;
padding-left:22px;
max-width:620px;
}

.tight-content-list li{
margin-bottom:12px;
line-height:1.3;
}

.tight-content-list li strong{
font-weight:600;
}

/* EDUCATION SECTION */

.education{
margin-top:10px;
margin-bottom:30px;
max-width:620px;
}

.education-item{
margin-bottom:18px;
}

.education-school{
font-family:'Playfair Display', serif;
font-size:20px;
margin-bottom:4px;
}

.education-degree{
line-height:1.6;
}

/* SERVICES SECTION */

.services{
max-width:620px;
margin-bottom:30px;
}

.services-intro{
margin-bottom:25px;
}

/* SERVICE LIST */

.services-list{
margin:25px 0 35px 0;
}

.service-item{
display:flex;
justify-content:space-between;
align-items:baseline;
padding:10px 0;
border-bottom:1px solid rgba(0,0,0,0.08);
}

.service-name{
font-weight:600;
}

.service-details{
opacity:0.8;
}

/* SUBSECTION TITLES */

.subsection-title{
font-family:'Playfair Display', serif;
font-size:22px;
margin-top:30px;
margin-bottom:10px;
}

/* CONTENT STRUCTURE */
.content-block p{
margin-bottom:14px;
}

/* FLOW SECTION */
.flow{
margin:20px 0;
}

.flow-step{
margin-bottom:18px;
line-height:1.6;
}

/* MINI TITLES */
.mini-title{
font-family:'Playfair Display', serif;
font-size:18px;
margin-top:20px;
margin-bottom:6px;
}

/* CLEAN LISTS */
.styled-list{
padding-left:18px;
margin-bottom:18px;
}

.styled-list li{
margin-bottom:6px;
line-height:1.6;
}

/* EXAMPLE BOX */
.example-box{
background:rgba(0,0,0,0.04);
padding:16px;
margin:16px 0;
}

/* CLOSING NOTE */
.closing-note{
font-family:'Playfair Display', serif;
font-size:14px;
text-align:center;
font-style:italic;
opacity:0.6;
margin-top:28px;
margin-bottom:0px;
max-width:520px;
margin-left:auto;
margin-right:auto;
line-height:1.6;
}

/* SLIDING SCALE INTRO */

.sliding-scale-intro{
max-width:620px;
margin-bottom:20px;
}

/* Tier summary (horizontal, clean) */

.tiers-summary{
margin:20px 0 25px 0;
}

.tier-item{
display:flex;
justify-content:space-between;
padding:6px 0;
max-width:300px;
}

.tier-name{
font-weight:600;
}

.tier-price{
opacity:0.85;
}

/* TIER COLUMN COLORS (DESKTOP ONLY) */
/*
@media(min-width:701px){

/* Tier 1 (lightest) 
.pricing-table th:nth-child(2),
.pricing-table td:nth-child(2){
background:rgba(255, 217, 246, 0.25);
}

/* Tier 2 (medium) 
.pricing-table th:nth-child(3),
.pricing-table td:nth-child(3){
background:rgba(255, 217, 246, 0.45);
}

/* Tier 3 (strongest) 
.pricing-table th:nth-child(4),
.pricing-table td:nth-child(4){
background:rgba(255, 217, 246, 0.65);
}

/* keep first column neutral 
.pricing-table th:first-child,
.pricing-table td:first-child{
background:transparent;
}

}
*/

/* Conditions */

.conditions{
margin-top:10px;
}

.condition{
margin-bottom:18px;
}

.condition p{
margin-top:6px;
}

.condition ul{
margin-top:8px;
padding-left:18px;
}

.condition li{
margin-bottom:6px;
line-height:1.6;
}


/* SLIDING SCALE TABLE */

.pricing-table{
width:100%;
max-width:720px;
border-collapse:collapse;
margin:30px 0 10px 0;  /*formerly 30px 0 50px 0 */
font-size:15px;
display:block;
overflow-x:auto;
}


.pricing-table th{
text-align:left;
font-weight:600;
padding:12px 14px;
font-family:'Playfair Display', serif;
}

.pricing-table td{
padding:12px 14px;
vertical-align:top;
}

/* alternating rows */
.pricing-table tbody tr:nth-child(even){
background:rgba(255, 217, 246, 0.4);
}

/* first column (labels like "No kids") */
.pricing-table td:first-child{
font-weight:600;
}

/* RIGHT-ALIGN NUMERIC VALUES */
.pricing-table td:not(:first-child){
text-align:right;
}

/* subtle spacing above section titles inside table */
.table-title{
margin-top:40px;
margin-bottom:10px;
font-size:22px;
}

/* Tier subtext (session price) */
.tier-sub{
font-size:14px;
font-weight:400;
opacity:0.7;
}

/* Tier explanatory row */
.tier-note{
font-size:13px;
font-weight:400;
opacity:0.7;
line-height:1.4;
}

/* Footnote */
.table-footnote{
font-size:13px;
opacity:0.7;
margin-top:0px;
margin-bottom:20px;
max-width:620px;
}

/* DESKTOP TIER DIVIDERS */

/* Removing Wrapper which enabled conditional table handling for desktop only */
/* @media(min-width:701px){ */ 

/* Add vertical divider after each Tier's Rate column */
.pricing-table th:nth-child(3),
.pricing-table td:nth-child(3),
.pricing-table th:nth-child(5),
.pricing-table td:nth-child(5){
border-right:1px solid rgba(0,0,0,0.3);
}

/* Add a little spacing after the divider for breathing room */
.pricing-table th:nth-child(3),
.pricing-table td:nth-child(3),
.pricing-table th:nth-child(5),
.pricing-table td:nth-child(5){
padding-right:18px;
}

.pricing-table th:nth-child(4),
.pricing-table td:nth-child(4),
.pricing-table th:nth-child(6),
.pricing-table td:nth-child(6){
padding-left:18px;
}

/* 1. Center tier headers (first row) */
.pricing-table thead tr:first-child th{
text-align:center;
}

/* keep first column left-aligned */
.pricing-table thead tr:first-child th:first-child{
text-align:left;
}

/* 2. Right-align the explanatory row */
.pricing-table thead tr:nth-child(2) th{
text-align:right;
}

/* keep first column left-aligned */
.pricing-table thead tr:nth-child(2) th:first-child{
text-align:left;
}

/* 3. Vertical dividers between ALL columns */
.pricing-table th,
.pricing-table td{
border-right:1px solid rgba(0,0,0,0.2);
}

/* remove divider on last column */
/*
.pricing-table th:last-child,
.pricing-table td:last-child{
border-right:none;
}
*/

/* 4. Make first column slightly wider */
.pricing-table th:first-child,
.pricing-table td:first-child{
width:25%;
}

/* remaining columns share space evenly */
.pricing-table th:not(:first-child),
.pricing-table td:not(:first-child){
width:25%;
}

/* Removing Wrapper which enabled conditional table handling for desktop only */
/*
}
*/

/* MOBILE TABLE STACK */
/*

@media(max-width:700px){

.pricing-table thead{
display:none;
}

.pricing-table,
.pricing-table tbody,
.pricing-table tr,
.pricing-table td{
display:block;
width:100%;
}

.pricing-table tr{
margin-bottom:25px;
padding:18px;
background:rgba(255, 217, 246, 0.5);
}

.pricing-table td{
text-align:left;
padding:6px 0;
}

/* label each data cell 
.pricing-table td::before{
content:attr(data-label);
font-weight:600;
display:block;
margin-bottom:2px;
}
}

*/