/* ============================================================
 LOUIS PHOTOGRAPHY Global Stylesheet
 Replace Unsplash URLs with your own images anywhere you see:
 https://images.unsplash.com/...
 Simply swap with: images/your-filename.jpg
 ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jost:wght@200;300;400;500&display=swap');

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
 font-family: 'Jost', sans-serif;
 background: #FAF8F4;
 color: #1a1a18;
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── CSS VARIABLES ── */
:root {
 --cream: #FAF8F4;
 --cream2: #F5F2ED;
 --dark: #1a1a18;
 --darker: #111110;
 --darkest: #0d0d0c;
 --muted: #5a5550;
 --accent: #9a9182;
 --border: #e0dbd3;
 --serif: 'Cormorant Garamond', Georgia, serif;
 --sans: 'Jost', sans-serif;
}

/* ── NAV ── */
.site-nav {
 position: fixed; top: 0; left: 0; right: 0; z-index: 200;
 display: flex; align-items: center; justify-content: space-between;
 padding: 30px 56px;
 transition: background 0.4s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
.site-nav.scrolled {
 background: rgba(10,10,8,0.94);
 backdrop-filter: blur(10px);
 padding: 16px 56px;
 box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}
.nav-links {
 display: flex; gap: 40px;
 font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
 color: rgba(255,255,255,0.75);
}
.nav-links a { transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-wordmark {
 font-family: var(--serif); font-size: 23px; font-weight: 300;
 letter-spacing: 0.42em; color: #fff; text-transform: uppercase;
}
.nav-cta {
 font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
 color: #fff; border: 0.5px solid rgba(255,255,255,0.5);
 padding: 11px 24px; transition: background 0.3s;
 white-space: nowrap;
}
.nav-cta:hover { background: rgba(255,255,255,0.1); }
/* Mobile hamburger */
.nav-hamburger {
 display: none; flex-direction: column; gap: 5px;
 cursor: pointer; padding: 4px;
}
.nav-hamburger span {
 display: block; width: 24px; height: 0.5px;
 background: #fff; transition: all 0.3s;
}
/* Mobile menu overlay */
.mobile-menu {
 display: none; position: fixed; inset: 0; z-index: 199;
 background: var(--darkest); flex-direction: column;
 align-items: center; justify-content: center; gap: 36px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
 font-family: var(--serif); font-size: 40px; font-weight: 300;
 font-style: italic; color: rgba(255,255,255,0.8);
 letter-spacing: 0.04em; transition: color 0.2s;
}
.mobile-menu a:hover { color: #fff; }
.mobile-menu-close {
 position: absolute; top: 28px; right: 32px;
 font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
 color: rgba(255,255,255,0.4); cursor: pointer;
}

/* ── SHARED TYPOGRAPHY ── */
.eyebrow {
 font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
 color: var(--accent); margin-bottom: 18px;
}
.eyebrow .rule {
 display: inline-block; width: 28px; height: 0.5px;
 background: var(--accent); vertical-align: middle;
 margin-right: 12px; margin-bottom: 2px;
}
.sec-hl {
 font-family: var(--serif); font-size: clamp(36px,4vw,50px);
 font-weight: 300; line-height: 1.08; letter-spacing: -0.01em;
 color: var(--dark); margin-bottom: 26px;
}
.sec-hl em { font-style: italic; }
.sec-hl.light { color: #fff; }
.body-text {
 font-size: 15px; font-weight: 300; line-height: 1.92;
 color: var(--muted); margin-bottom: 20px;
}
.text-link {
 display: inline-block; font-size: 10px; letter-spacing: 0.22em;
 text-transform: uppercase; color: var(--dark);
 border-bottom: 0.5px solid var(--dark); padding-bottom: 2px;
 margin-top: 16px; transition: opacity 0.2s;
}
.text-link:hover { opacity: 0.5; }
.text-link.light {
 color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.4);
}
.text-link.light:hover { opacity: 0.5; }

/* ── BUTTONS ── */
.btn-dark {
 display: inline-block;
 background: var(--dark); color: var(--cream);
 font-family: var(--sans); font-size: 10px;
 letter-spacing: 0.24em; text-transform: uppercase;
 padding: 17px 52px; border: none; transition: opacity 0.2s;
}
.btn-dark:hover { opacity: 0.8; }
.btn-light {
 display: inline-block;
 background: #fff; color: var(--dark);
 font-family: var(--sans); font-size: 10px;
 letter-spacing: 0.24em; text-transform: uppercase;
 padding: 17px 44px; border: none; transition: opacity 0.2s;
}
.btn-light:hover { opacity: 0.88; }
.btn-outline {
 display: inline-block;
 background: transparent; color: var(--dark);
 font-family: var(--sans); font-size: 10px;
 letter-spacing: 0.24em; text-transform: uppercase;
 padding: 16px 34px; border: 0.5px solid var(--dark);
 transition: background 0.25s, color 0.25s;
}
.btn-outline:hover { background: var(--dark); color: var(--cream); }

/* ── PRESS BAR ── */
.press-bar {
 background: var(--darker); padding: 21px 56px;
 display: flex; align-items: center; gap: 36px;
}
.press-label {
 font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
 color: rgba(255,255,255,0.3); white-space: nowrap; flex-shrink: 0;
}
.press-rule { width: 28px; height: 0.5px; background: rgba(255,255,255,0.14); flex-shrink: 0; }
.press-logos { display: flex; align-items: center; gap: 44px; flex-wrap: wrap; }
.plogo { color: rgba(255,255,255,0.42); font-family: var(--serif); }
.plogo.serif-it { font-style: italic; font-size: 18px; font-weight: 300; }
.plogo.caps-sm { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; }
.plogo.italic-med { font-size: 15px; font-style: italic; letter-spacing: 0.08em; }

/* ── QUOTE BLOCK ── */
.quote-block {
 padding: 88px 110px; text-align: center;
 background: var(--cream2); border-top: 0.5px solid var(--border);
 border-bottom: 0.5px solid var(--border);
}
.qmark {
 font-family: var(--serif); font-size: 90px; line-height: 0.4;
 color: #d0c8bc; display: block; margin-bottom: 32px; font-weight: 300;
}
.q-text {
 font-family: var(--serif); font-size: 26px; font-weight: 300;
 font-style: italic; line-height: 1.55; color: #2a2820;
 margin: 0 auto 24px; max-width: 720px;
}
.q-attr {
 font-size: 9.5px; letter-spacing: 0.24em;
 text-transform: uppercase; color: var(--accent);
}

/* ── INLINE TESTIMONIAL ── */
.testimonial-inline {
 padding: 84px 56px; display: grid;
 grid-template-columns: 210px 1fr; gap: 64px;
 align-items: center; border-top: 0.5px solid var(--border);
}
.test-img { width: 210px; height: 260px; object-fit: cover; object-position: center 15%; }
.stars { color: #b8a898; letter-spacing: 6px; font-size: 12px; margin-bottom: 20px; }
.q-text-sm {
 font-family: var(--serif); font-size: 24px; font-weight: 300;
 font-style: italic; line-height: 1.52; color: #2a2820; margin-bottom: 20px;
}

/* ── PROCESS SECTION ── */
.process-sec {
 padding: 100px 56px; background: var(--darker);
}
.proc-hl {
 font-family: var(--serif); font-size: clamp(34px,3.5vw,46px);
 font-weight: 300; color: #fff; text-align: center;
 margin-bottom: 68px; letter-spacing: -0.01em;
}
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; }
.step-num {
 font-family: var(--serif); font-size: 56px; font-weight: 300;
 color: rgba(255,255,255,0.1); line-height: 1; margin-bottom: 16px;
}
.step-rule { width: 24px; height: 0.5px; background: rgba(255,255,255,0.15); margin-bottom: 20px; }
.step-title {
 font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
 color: rgba(255,255,255,0.7); margin-bottom: 12px;
}
.step-body {
 font-size: 13.5px; font-weight: 300; line-height: 1.88;
 color: rgba(255,255,255,0.38);
}

/* ── CTA SECTION ── */
.cta-section {
 padding: 108px 56px; text-align: center;
 background: var(--cream2); border-top: 0.5px solid var(--border);
}
.cta-hl {
 font-family: var(--serif); font-size: clamp(36px,4.5vw,56px);
 font-weight: 300; line-height: 1.1; letter-spacing: -0.01em;
 color: var(--dark); margin-bottom: 16px;
}
.cta-hl em { font-style: italic; }
.cta-sub {
 font-size: 14px; font-weight: 300; color: #7a7268;
 letter-spacing: 0.03em; line-height: 1.85; margin-bottom: 48px;
 max-width: 500px; margin-left: auto; margin-right: auto;
}
.avail {
 margin-top: 30px; font-size: 10px; letter-spacing: 0.18em;
 text-transform: uppercase; color: var(--accent);
 display: flex; align-items: center; justify-content: center; gap: 10px;
}
.dot { width: 7px; height: 7px; background: #8a9e7a; border-radius: 50%; }

/* ── INSTAGRAM STRIP ── */
.insta-strip { padding: 64px 56px; border-top: 0.5px solid var(--border); }
.insta-hdr { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.insta-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.insta-item { overflow: hidden; aspect-ratio: 1; }
.insta-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s, filter 0.4s; }
.insta-img:hover { transform: scale(1.04); filter: brightness(0.72); }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
 position: relative; height: 52vh; min-height: 380px; overflow: hidden;
 display: flex; align-items: flex-end;
}
/* page-hero-img object-position set per image inline for precise crop control */
.page-hero-img {
 position: absolute; inset: 0; width: 100%; height: 100%;
 object-fit: cover; filter: brightness(0.55) contrast(1.06);
 object-position: center 20%;
}
.page-hero-gradient {
 position: absolute; inset: 0;
 background: linear-gradient(to bottom, rgba(8,8,6,0.1) 0%, rgba(8,8,6,0.65) 100%);
}
.page-hero-content { position: relative; padding: 0 56px 56px; z-index: 1; }
.page-hero-content .eyebrow { color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.page-hl {
 font-family: var(--serif); font-size: clamp(44px,5vw,72px);
 font-weight: 300; color: #fff; line-height: 1; letter-spacing: -0.01em;
}
.page-hl em { font-style: italic; }

/* ── FOOTER ── */
.site-footer { background: var(--darkest); padding: 64px 56px 32px; }
.footer-top {
 display: flex; justify-content: space-between; align-items: flex-start;
 margin-bottom: 56px; padding-bottom: 52px;
 border-bottom: 0.5px solid rgba(255,255,255,0.08);
}
.footer-wordmark {
 font-family: var(--serif); font-size: 30px; font-weight: 300;
 letter-spacing: 0.42em; color: rgba(255,255,255,0.72);
 text-transform: uppercase; margin-bottom: 12px;
}
.footer-tagline { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.22); }
.footer-cols { display: flex; gap: 80px; }
.footer-col-title { font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.25); margin-bottom: 22px; }
.footer-links li { margin-bottom: 13px; }
.footer-links a { font-size: 13.5px; font-weight: 300; color: rgba(255,255,255,0.44); transition: color 0.2s; }
.footer-links a:hover { color: rgba(255,255,255,0.75); }
.footer-btm { display: flex; justify-content: space-between; align-items: center; }
.copyright { font-size: 10px; color: rgba(255,255,255,0.18); letter-spacing: 0.08em; }
.footer-closing { font-family: var(--serif); font-size: 14px; font-style: italic; color: rgba(255,255,255,0.22); }

/* ── SECTION PADDING ── */
.section { padding: 104px 56px; }
.section-alt { background: var(--cream2); }
.section-dark { background: var(--darker); }

/* ── DIVIDER ── */
.divider { width: 100%; height: 0.5px; background: var(--border); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
 .site-nav { padding: 22px 36px; }
 .site-nav.scrolled { padding: 14px 36px; }
 .nav-links { gap: 28px; }
 .section { padding: 80px 36px; }
 .press-bar { padding: 20px 36px; }
 .quote-block { padding: 72px 56px; }
 .testimonial-inline { padding: 72px 36px; }
 .process-sec { padding: 80px 36px; }
 .cta-section { padding: 88px 36px; }
 .insta-strip { padding: 56px 36px; }
 .site-footer { padding: 56px 36px 28px; }
 .page-hero-content { padding: 0 36px 48px; }
 .steps { grid-template-columns: repeat(2,1fr); gap: 36px; }
}
@media (max-width: 768px) {
 .nav-links { display: none; }
 .nav-hamburger { display: flex; }
 .site-nav { padding: 20px 24px; }
 .site-nav.scrolled { padding: 14px 24px; }
 .section { padding: 64px 24px; }
 .press-bar { padding: 18px 24px; gap: 20px; }
 .press-logos { gap: 24px; }
 .quote-block { padding: 60px 28px; }
 .q-text { font-size: 21px; }
 .testimonial-inline { grid-template-columns: 1fr; padding: 56px 24px; gap: 40px; }
 .test-img { width: 100%; height: 280px; }
 .process-sec { padding: 64px 24px; }
 .steps { grid-template-columns: 1fr 1fr; gap: 28px; }
 .cta-section { padding: 72px 24px; }
 .btn-dark, .btn-outline { display: block; width: 100%; text-align: center; margin: 0 0 12px; }
 .insta-strip { padding: 48px 24px; }
 .insta-grid { grid-template-columns: repeat(3,1fr); }
 .site-footer { padding: 48px 24px 24px; }
 .footer-top { flex-direction: column; gap: 40px; }
 .footer-cols { gap: 36px; }
 .footer-btm { flex-direction: column; gap: 12px; text-align: center; }
 .page-hero { height: 44vh; min-height: 300px; }
 .page-hero-content { padding: 0 24px 40px; }
}

/* ── CRITICAL MOBILE BASE (added for v11) ── */

/* Prevent horizontal scroll on all devices */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Smooth scrolling on iOS */
html {
  -webkit-overflow-scrolling: touch;
}

/* Better tap highlight */
* {
  -webkit-tap-highlight-color: rgba(0,0,0,0.08);
}

/* Images never overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Links have enough tap area */
a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* But inline text links shouldn't force block */
p a, .body-text a {
  display: inline;
  min-height: unset;
}

/* Form elements look native on iOS */
input, select, textarea, button {
  -webkit-appearance: none;
  border-radius: 0;
}

/* Portfolio masonry on mobile */
@media (max-width: 900px) {
  .portfolio-gallery {
    columns: 2 !important;
    padding: 32px 24px !important;
    column-gap: 4px !important;
  }
  .gallery-item {
    margin-bottom: 4px !important;
  }
}
@media (max-width: 480px) {
  .portfolio-gallery {
    columns: 1 !important;
    padding: 24px !important;
  }
}

/* Filter bar on mobile */
@media (max-width: 768px) {
  .filter-bar {
    padding: 24px 16px !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .filter-btn {
    font-size: 9px !important;
    padding: 8px 4px !important;
    min-height: 44px !important;
  }
}

/* Lightbox mobile */
@media (max-width: 768px) {
  .lightbox-img {
    max-width: 96vw !important;
    max-height: 80vh !important;
  }
  .lightbox-prev { left: 8px !important; }
  .lightbox-next { right: 8px !important; }
  .lightbox-close { top: 16px; right: 16px; }
}

/* ── PORTRAIT IMAGE DISPLAY ──
   Use class="portrait-img-true" on any portrait-orientation photo
   to display it without cropping, contained within its space */
.portrait-img-true {
  width: 100%;
  height: auto;
  max-height: 700px;
  object-fit: contain;
  object-position: center top;
  display: block;
  background: #F5F2ED;
}

/* Portrait in a fixed-height container — shows full image with letterbox */
.portrait-frame {
  width: 100%;
  background: #F5F2ED;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}
.portrait-frame img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
}

/* Portrait grid — for galleries showing portrait images in their true ratio */
.portrait-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.portrait-gallery-item {
  background: #F5F2ED;
  overflow: hidden;
}
.portrait-gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 768px) {
  .portrait-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
}