:root{
  --chocolate:#1a120d;
  --chocolate-light:#241a13;
  --amber:#c98a3e;
  --amber-bright:#e3ab5f;
  --amber-pale:#d8c19f;
  --olive:#5f5f3c;
  --dusty-blue:#56707d;
  --cream:#f3ead9;
  --cream-dim:#b9a98e;
  --amber-saturated:#E6A54E;
  --hairline: rgba(243,234,217,0.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--chocolate);
  color:var(--cream);
  font-family:'Inter',sans-serif;
  font-weight:300;
  line-height:1.6;
}
a{color:inherit;}
.eyebrow{
  font-family:'Oswald',sans-serif;
  font-size:11px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--amber-bright); font-weight:500;
}

/* TOP BAR HEADER (all pages except home poster) */
.topbar{
  border-bottom:1px solid var(--hairline);
  background:var(--chocolate);
  position:sticky; top:0; z-index:50;
}
.topbar-inner{
  max-width:1160px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 24px; flex-wrap:wrap;
}
.wordmark{
  font-family:'Playfair Display',serif; font-style:bold; text-transform:uppercase; font-weight:800;
  font-size:19px; color:var(--amber-bright); text-decoration:none; letter-spacing:0.1em;
  cursor:pointer; background:none; border:none;
}
.topnav{display:flex; gap:clamp(12px,2.4vw,30px); flex-wrap:wrap;}
.topnav a{
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none; transition:color .2s ease; white-space:nowrap; cursor:pointer;
}
.topnav a:hover, .topnav a.active{color:var(--amber-bright);}

/* SECTIONS */
section{padding:110px 24px;}
section.tight{padding:70px 24px;}
.section-inner{max-width:1160px; margin:0 auto;}
.section-head{text-align:center; margin-bottom:64px;}
.section-title{
  font-family:'Fraunces',serif; font-weight:400; font-size:clamp(30px,4vw,46px);
  margin-top:14px; color:var(--cream);
}

/* PAGE HERO (fallback, non-photo pages) */
.page-hero{text-align:center; padding-top:130px; padding-bottom:70px;}
.page-hero h1{
  font-family:'Fraunces',serif; font-weight:400; font-style:italic;
  font-size:clamp(38px,6vw,72px); margin-top:16px; color:var(--cream);
  max-width:18ch; margin-left:auto; margin-right:auto;
}
.page-hero p.sub{max-width:56ch; margin:22px auto 0; color:var(--cream-dim); font-size:15px;}
.page-hero .note{max-width:56ch; margin:14px auto 0; color:var(--cream-dim); font-size:12.5px; font-style:italic; opacity:0.8;}

/* ============================================
   CATEGORY HERO — full-screen photo background
   One class per sub-page. Swap the filename in
   each rule for the matching image on your machine.
   Keep the image in the SAME FOLDER as this HTML file.
   ============================================ */
.category-hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  padding-top:0;
  padding-bottom:0;
  text-align:center;
}
.category-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(20,14,10,.45), rgba(20,14,10,.55));
}
.category-hero-content{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:900px;
  padding:0 30px;
}
.category-hero-content h1{
  font-family:'Fraunces',serif; font-weight:400; font-style:italic;
  font-size:clamp(38px,6vw,72px); margin-top:16px; color:var(--cream);
  max-width:18ch; margin-left:auto; margin-right:auto;
}
.category-hero-content p.sub{max-width:56ch; margin:22px auto 0; color:var(--cream-dim); font-size:15px;}

.portrait-hero{ background-image:url("../images/portrait-header-background-photo.jpg"); }
.couples-hero{ background-image:url("../images/couples-header-background-photo.jpg"); }
.editorial-hero{ background-image:url("../images/editorial-header-background-photo.jpg"); }
.about-hero{ background-image:url("../images/about-header-background-photo.jpg"); }
.prints-hero{ background-image:url("../images/prints-header-background-photo.jpg"); }
.contact-hero{ background-image:url("../images/../images/contact-header-background-photo.jpg"); }

/* CTA BUTTONS */
.cta-btn{
  display:inline-block; margin-top:32px; padding:15px 38px;
  border:1px solid var(--amber); color:var(--cream);
  font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; transition:all .25s ease; cursor:pointer; background:none;
}
.cta-btn:hover{background:var(--amber); color:var(--chocolate);}
.cta-btn.solid{background:var(--amber); color:var(--chocolate);}
.cta-btn.solid:hover{background:var(--amber-bright);}

/* GALLERY */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.gallery-tile{
  position:relative; aspect-ratio:3/4; border-radius:2px; overflow:hidden;
  background:linear-gradient(155deg,#6b4a2c,#241a13);
  display:flex; align-items:flex-end; justify-content:center;
}
.gallery-tile.g2{background:linear-gradient(155deg,#556b52,#241a13);}
.gallery-tile.g3{background:linear-gradient(155deg,#4c6673,#241a13);}
.gallery-tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.gallery-tile span{
  position:relative; z-index:2;
  font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.2em;
  color:rgba(243,234,217,0.55); text-transform:uppercase;
  background:rgba(26,18,13,0.55); padding:6px 10px; margin:12px;
}
.gallery-tile:not(:has(img)) span{ color:rgba(243,234,217,0.35); background:none; margin:0; position:static; }
.gallery-tile:not(:has(img)){align-items:center;}

/* PORTRAITS: 5-up grid + expand */
.portrait-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.portrait-grid .gallery-tile{aspect-ratio:3/4;}
.expand-row{display:none; margin-top:16px;}
.expand-row.open{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.expand-toggle-wrap{text-align:center; margin-top:26px;}
.expand-toggle{
  font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber-bright); background:none; border:1px solid var(--hairline); padding:12px 26px; cursor:pointer;
  transition:border-color .2s ease;
}
.expand-toggle:hover{border-color:var(--amber);}

/* PRICING — Plickat-style asymmetric hierarchy */
.pricing-intro{text-align:center; max-width:52ch; margin:-40px auto 44px; font-size:13.5px; color:var(--cream-dim);}
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; padding-top:14px;}
.price-card{border:1px solid var(--hairline); padding:40px 28px; display:flex; flex-direction:column; text-align:center; position:relative; transition:transform .25s ease, box-shadow .25s ease;}
.price-card.popular{
  border-color:var(--amber);
  transform:scale(1.06);
  background:linear-gradient(180deg, rgba(201,138,62,0.07), rgba(201,138,62,0.02));
  box-shadow:0 24px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(201,138,62,0.25) inset;
  z-index:2;
}
.popular-flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--amber); color:var(--chocolate);
  font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:5px 14px;
}
.price-card h3{font-family:'Fraunces',serif; font-size:32px; color:var(--amber-bright); margin:5px 0 2px;}
/*.price-amount{font-family:'Fraunces',serif; font-size:38px; color:var(--amber-bright); margin:18px 0 2px;}*/
.price-per-unit{
  font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber-bright); opacity:0.85; margin-bottom:10px;
}
.price-meta{font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--cream-dim); margin-bottom:20px;}
.price-list{list-style:none; font-size:13.5px; color:var(--cream-dim); flex-grow:1; display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
.price-list li{padding-top:10px; border-top:1px solid var(--hairline);}
.price-list li:first-child{border-top:none; padding-top:0;}
.price-anchor{
  font-family:'Inter',sans-serif; font-size:11.5px; color:var(--cream-dim);
  background:rgba(86,112,125,0.12); border:1px solid var(--hairline);
  padding:8px 10px; margin-bottom:18px; line-height:1.4;
}
.price-anchor b{color:var(--amber-bright); font-weight:500;}
.price-card .cta-btn{margin-top:0; width:100%;}
.price-scarcity{
  margin-top:14px; font-family:'Oswald',sans-serif; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dusty-blue);
}


/* MOCK CALENDAR */
.calendar-section{padding-top:0;}
.calendar-mock{max-width:400px; margin:0 auto; border:1px solid var(--hairline); padding:30px 26px;}
.calendar-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
.calendar-head button{
  background:none; border:1px solid var(--hairline); color:var(--cream-dim);
  width:30px; height:30px; cursor:pointer; font-family:'Oswald',sans-serif; font-size:14px;
  transition:border-color .2s ease, color .2s ease;
}
.calendar-head button:hover{border-color:var(--amber); color:var(--amber-bright);}
.calendar-month{font-family:'Fraunces',serif; font-style:italic; font-size:18px;}
.calendar-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center;}
.calendar-dow{font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:.15em; color:var(--cream-dim); text-transform:uppercase; padding-bottom:8px;}
.calendar-day{aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--cream-dim); border-radius:2px;}
.calendar-day.available{color:var(--cream); border:1px solid var(--hairline); cursor:pointer;}
.calendar-day.available:hover{border-color:var(--amber); color:var(--amber-bright);}
.calendar-day.selected{background:var(--amber); color:var(--chocolate); border-color:var(--amber);}
.calendar-day.booked{opacity:0.28; text-decoration:line-through;}
.calendar-day.empty{visibility:hidden;}
.calendar-legend{display:flex; justify-content:center; gap:22px; margin-top:16px; font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:.15em; text-transform:uppercase; color:var(--cream-dim);}
.legend-dot{width:8px; height:8px; display:inline-block; border-radius:50%; margin-right:6px; vertical-align:middle; border:1px solid var(--hairline);}
.calendar-note{margin-top:18px; text-align:center; font-size:11px; color:var(--cream-dim); font-style:italic;}

/* SERVICE AREA TAG */
.service-area{
  margin-top:14px; font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--amber-bright);
}

/* TESTIMONIAL */
.testimonial-section{background:var(--chocolate-light); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);}
.quote-mark{font-family:'Fraunces',serif; font-size:60px; color:var(--amber); line-height:1; opacity:0.6;}
.quote-text{font-family:'Fraunces',serif; font-style:italic; font-weight:300; font-size:clamp(19px,2.6vw,28px); max-width:680px; margin:0 auto; color:var(--cream);}
.quote-attr{margin-top:24px; font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--cream-dim);}

/* PROCESS STEPS */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.step .eyebrow{margin-bottom:10px; display:block;}
.step h3{font-family:'Fraunces',serif; font-weight:500; font-size:20px; margin-bottom:10px;}
.step p{font-size:13.5px; color:var(--cream-dim);}

/* FINAL CTA */
.final-cta{background:linear-gradient(135deg,#3a2c1c,#1a120d); text-align:center; border-top:1px solid var(--hairline);}
.final-cta h2{font-family:'Fraunces',serif; font-weight:500; font-style:italic; font-size:clamp(30px,4.2vw,48px); max-width:18ch; margin:0 auto;}

/* FOOTER */
footer{padding:48px 24px 60px; text-align:center;}
.footer-credits{
  font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:var(--cream-dim);
  display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin-bottom:18px;
}
.footer-credits a{color:var(--cream-dim); text-decoration:none; cursor:pointer;}
.footer-credits a:hover{color:var(--amber-bright);}
.footer-print{font-family:'Inter',sans-serif; font-size:12px; color:var(--cream-dim);}
.footer-print a{color:var(--amber-bright); text-decoration:none; border-bottom:1px solid var(--amber); cursor:pointer;}
.footer-fine{margin-top:26px; font-size:10px; color:rgba(243,234,217,0.3); letter-spacing:.05em;}

/* FORM */
.form-wrap{max-width:560px; margin:0 auto;}
.form-row{margin-bottom:22px; display:flex; flex-direction:column; gap:8px;}
.form-row label{font-family:'Oswald',sans-serif; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-dim);}
.form-row input, .form-row select, .form-row textarea{
  background:transparent; border:none; border-bottom:1px solid var(--hairline); color:var(--cream);
  font-family:'Inter',sans-serif; font-size:15px; padding:10px 2px; outline:none;
}
.form-row select{cursor:pointer;}
.form-row select option{background:var(--chocolate-light); color:var(--cream);}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{border-bottom-color:var(--amber);}
.form-row textarea{resize:vertical; min-height:100px; font-family:'Inter',sans-serif;}
.form-submit{
  width:100%; margin-top:10px; padding:16px; background:var(--amber); border:none; color:var(--chocolate);
  font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.22em; text-transform:uppercase; cursor:pointer; transition:background .2s ease;
}
.form-submit:hover{background:var(--amber-bright);}
.form-note{font-size:12px; color:var(--cream-dim); margin-bottom:26px; font-style:italic;}

/* HOME — POSTER */
#home.page{background:var(--chocolate);}
.poster{
  position:relative; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(26,18,13,0.35) 0%, rgba(26,18,13,0.15) 30%, rgba(26,18,13,0.55) 68%, rgba(26,18,13,0.96) 100%),
    radial-gradient(ellipse at 25% 15%, #56463060 0%, transparent 55%),
    linear-gradient(150deg, #3c4a34 0%, #4a3623 45%, #1a120d 100%);
}
.poster.has-photo{
  background:
    linear-gradient(180deg, rgba(26,18,13,0.35) 0%, rgba(26,18,13,0.15) 30%, rgba(26,18,13,0.55) 68%, rgba(26,18,13,0.96) 100%),
    url('../images/background.jpg') center 25%/cover no-repeat;
  background-blend-mode: hard-light;
}
.grain{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}
.photo-note{
    position:absolute;
    top:clamp(16px,2vw,28px);
    left:clamp(16px,2vw,28px);
    z-index:2;
    font-family:'Fraunces',serif;
    font-size:clamp(9px,1vw,15px);
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:rgba(243,234,217,.35);
}
.photo-note-r{position:absolute; top:26px; right:26px; z-index:2; font-family:'Fraunces',sans-serif; font-size:14px; letter-spacing:.25em; text-transform:uppercase; color:rgba(243,234,217,0.35); text-align:right;}
.title-block{text-align:center;}
.tagline{font-family:'Fraunces',cursive; font-weight:400; font-size:clamp(24px,3vw,34px); letter-spacing:0.02em; color:#e3d8c2;}
.name{margin-top:17px;
  font-family:'Playfair Display',serif;
  font-weight:200;
  position:relative;
  z-index:2;
  mix-blend-mode: soft-light;
  font-size:clamp(50px,12vw,150px);
  line-height:0.52;
  letter-spacing:-0.005em;
  color:var(--amber-pale);
  font-variant-caps: petite-caps;
  opacity: 100%;}
.billing{position:relative; z-index:2; padding:22px 24px 30px; text-align:center;}
.billing-line{font-family:'Oswald',sans-serif; mix-blend-mode: soft-light; font-size:clamp(11px, 2.6vw, 20px); letter-spacing:0.18em; text-transform:uppercase; color:var(--amber-bright); display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(8px,1.6vw,16px); opacity:60%; row-gap:8px;}
.billing-line a{color:var(--amber-bright); text-decoration:none; transition:color .2s ease; cursor:pointer;}
.billing-line a:hover{color:var(--amber-bright);}
.billing-line .sep{color:rgba(243,234,217,0.3);}
.billing-sub{margin-top:10px; font-family:'Oswald',sans-serif; font-size:9px; letter-spacing:0.28em; text-transform:uppercase; color:rgba(243,234,217,0.35);}

@media (max-width:700px){
    .photo-note{
        font-size:9px;
        letter-spacing:.12em;
        max-width:45vw;
        line-height:1.3;
    }
    .name{
        font-size:clamp(42px,16vw,90px);
    }
}

@media (max-width:900px){
  .gallery-grid, .pricing-grid, .steps{grid-template-columns:1fr;}
  .portrait-grid, .expand-row.open{grid-template-columns:repeat(2,1fr);}
}