@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=DM+Sans:wght@400;500;600&display=swap');

:root{
  --canvas: #f7f4ee;
  --canvas-alt: #efe8da;
  --ink: #1e2b2c;
  --ink-soft: #52625f;
  --line: #1e2b2c;
  --line-soft: rgba(30,43,44,0.2);
  --accent: #bf5f2c;
  --accent-soft: #f0dcc4;
  --accent-2: #3c6e64;
  --dark-bg: #142023;
  --dark-bg-alt: #1c2e31;
  --white: #fffdf9;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-tight: 0 1px 2px rgba(20,32,35,0.08);
  --shadow-wide: 0 18px 40px -18px rgba(20,32,35,0.28);
  --shadow-tight-dark: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-wide-dark: 0 20px 50px -20px rgba(0,0,0,0.55);
  --space-1: clamp(0.5rem, 0.45rem + 0.3vw, 0.75rem);
  --space-2: clamp(0.85rem, 0.75rem + 0.5vw, 1.25rem);
  --space-3: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  --space-4: clamp(2.2rem, 1.8rem + 1.6vw, 3.4rem);
  --space-5: clamp(3.2rem, 2.4rem + 3vw, 5.6rem);
  --space-6: clamp(4.5rem, 3.2rem + 5vw, 8rem);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'DM Sans', sans-serif;
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: 'Libre Baskerville', serif; font-weight:700; line-height:1.15; margin:0 0 var(--space-2); color: var(--ink); }
p{ margin:0 0 var(--space-2); color: var(--ink-soft); }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:'DM Sans', sans-serif; cursor:pointer; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }


.marquee{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  transition: background .4s ease, color .4s ease, box-shadow .4s ease;
  color: var(--ink);
}
.marquee.on-dark{ color: var(--white); }
.marquee-inner{
  max-width: 1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: var(--space-2) var(--space-3);
}
.marquee-brand{ display:flex; align-items:center; gap:0.6rem; font-family:'Libre Baskerville', serif; font-weight:700; font-size:1.15rem; }
.marquee-logo{ width:34px; height:34px; }
.marquee-links{ display:flex; gap: var(--space-3); align-items:center; }
.marquee-links a{ font-size:0.95rem; font-weight:500; position:relative; padding: 4px 0; transition: opacity .3s ease; }
.marquee-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background: currentColor; transition: width .3s ease;
}
.marquee-links a:hover::after, .marquee-links a.is-active::after{ width:100%; }
.marquee-toggle{
  display:none; background:transparent; border:1.5px solid currentColor; color:inherit;
  width:46px; height:46px; border-radius: var(--radius-s); align-items:center; justify-content:center;
  font-size:1.1rem; transition: background .3s ease, color .3s ease;
}


.btn{
  display:inline-flex; align-items:center; gap:0.5rem; justify-content:center;
  padding: 0.9rem 1.6rem; border-radius: var(--radius-s); font-weight:600; font-size:0.95rem;
  transition: background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .3s ease;
  min-height:48px; white-space:nowrap;
}
.btn i{ font-size:0.85em; transition: transform .3s ease; }
.btn:hover i{ transform: translateX(3px); }
.btn-outline-dark{ border:1.5px solid var(--ink); color: var(--ink); background:transparent; }
.btn-outline-dark:hover{ background: var(--ink); color: var(--white); box-shadow: var(--shadow-wide); transform: translateY(-2px); }
.btn-outline-light{ border:1.5px solid var(--white); color: var(--white); background:transparent; }
.btn-outline-light:hover{ background: var(--white); color: var(--ink); box-shadow: var(--shadow-wide-dark); transform: translateY(-2px); }
.btn-ghost-light{ border:1.5px solid transparent; color: var(--white); background: rgba(255,255,255,0.08); }
.btn-ghost-light:hover{ background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
.btn.full-width{ width:100%; }


.stage{ position:relative; min-height: 92vh; display:flex; align-items:flex-end; overflow:hidden; }
.stage-sub{ min-height: 62vh; align-items:flex-end; }
.stage-media{ position:absolute; inset:0; }
.stage-media img{ width:100%; height:100%; object-fit:cover; }
.stage-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(20,32,35,0.35) 0%, rgba(20,32,35,0.55) 55%, rgba(20,32,35,0.85) 100%);
}
.stage-inner{ position:relative; z-index:2; color: var(--white); max-width:1280px; margin:0 auto; width:100%; padding: var(--space-5) var(--space-3) var(--space-5); }
.stage-inner.narrow{ max-width:760px; }
.stage-eyebrow{ text-transform:uppercase; letter-spacing:0.14em; font-size:0.8rem; font-weight:600; color: var(--accent-soft); margin-bottom: var(--space-2); }
.stage-title{ font-size: clamp(2.6rem, 5vw + 1rem, 5.5rem); color: var(--white); max-width: 16ch; margin-bottom: var(--space-3); }
.stage-title em{ font-style:italic; color: var(--accent-soft); }
.stage-title.medium{ font-size: clamp(2.2rem, 3.5vw + 1rem, 3.6rem); max-width:20ch; }
.stage-title.small{ font-size: clamp(2rem, 3vw + 1rem, 3rem); max-width:22ch; color: var(--ink); }
.stage-text{ font-size: clamp(1rem, 0.4vw + 0.9rem, 1.2rem); max-width:56ch; color: rgba(255,255,255,0.88); }
.stage-actions{ display:flex; gap: var(--space-2); flex-wrap:wrap; margin-top: var(--space-3); }
.stage-cta .stage-inner{ text-align:left; }

.stage-thanks{ min-height:70vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--accent) 0%, #9c4a20 100%); }
.thanks-inner{ text-align:center; max-width:640px; padding: var(--space-5) var(--space-3); color: var(--white); }
.stage-thanks .stage-title{ color: var(--white); margin:0 auto var(--space-3); }
.stage-thanks .stage-text{ color: rgba(255,255,255,0.92); margin: 0 auto var(--space-3); }


.gallery{ padding: var(--space-6) var(--space-3); position:relative; }
.gallery[data-bg="alt"]{ background: var(--canvas-alt); }
.gallery[data-bg="dark"]{ background: linear-gradient(160deg, var(--dark-bg) 0%, var(--dark-bg-alt) 100%); }
.gallery-inner{ max-width:1280px; margin:0 auto; }
.gallery-inner.narrow{ max-width: 780px; }
.gallery-kicker{ text-transform:uppercase; letter-spacing:0.12em; font-size:0.8rem; font-weight:600; color: var(--accent); margin-bottom: var(--space-1); }
.gallery-kicker.on-dark{ color: var(--accent-soft); }
.gallery-title{ font-size: clamp(1.8rem, 2.2vw + 1rem, 2.8rem); max-width:18ch; margin-bottom: var(--space-2); }
.gallery-title.on-dark{ color: var(--white); }
.gallery-lead{ font-size: 1.1rem; max-width:70ch; }
.gallery-lead.on-dark{ color: rgba(255,255,255,0.78); }

.gallery-grid{ display:grid; gap: var(--space-3); margin-top: var(--space-4); }
.gallery-grid.two-col{ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); max-width:1280px; margin-left:auto; margin-right:auto; }
.gallery-grid.four-col{ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width:1280px; margin-left:auto; margin-right:auto; }

.gallery-item{
  display:flex; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--line-soft);
}
.gallery-item h3{ font-size:1.15rem; margin-bottom:0.4rem; }
.gallery-item p{ margin:0; font-size:0.98rem; }

.icon-ring{
  flex-shrink:0; width:56px; height:56px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; color: var(--ink);
  transition: background .35s ease, color .35s ease, transform .3s ease;
}
.icon-ring.small{ width:44px; height:44px; font-size:1.05rem; margin-bottom: var(--space-2); }
.gallery-item:hover .icon-ring, .card-outline:hover .icon-ring{ background: var(--accent); color: var(--white); border-color: var(--accent); transform: scale(1.06); }


.shelf{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3);
  max-width:1280px; margin: var(--space-4) auto 0;
}
.shelf-card{
  border: 1.5px solid rgba(255,255,255,0.22); border-radius: var(--radius-m);
  padding: var(--space-3); background: rgba(255,255,255,0.03);
  transition: border-color .35s ease, background .35s ease, transform .3s ease, box-shadow .35s ease;
}
.shelf-card:hover{ border-color: var(--accent-soft); background: rgba(255,255,255,0.07); transform: translateY(-6px); box-shadow: var(--shadow-wide-dark); }
.shelf-number{ display:block; font-family:'Libre Baskerville', serif; font-size:1.8rem; color: var(--accent-soft); margin-bottom: var(--space-1); }
.shelf-card h3{ color: var(--white); font-size:1.15rem; }
.shelf-card p{ color: rgba(255,255,255,0.72); font-size:0.95rem; margin:0; }


.card-outline{
  border: 1.5px solid var(--line-soft); border-radius: var(--radius-m); padding: var(--space-3);
  background: var(--canvas); transition: box-shadow .35s ease, transform .3s ease, border-color .35s ease;
}
.card-outline:hover{ box-shadow: var(--shadow-wide); transform: translateY(-6px); border-color: var(--accent); }
.card-outline h3{ font-size:1.1rem; }
.card-outline p{ font-size:0.95rem; margin:0; }


.spotlight{
  display:grid; grid-template-columns: 1fr 1fr; align-items:stretch; max-width:1280px; margin:0 auto;
  padding: var(--space-6) var(--space-3); gap: var(--space-4);
}
.spotlight.reverse{ direction: rtl; }
.spotlight.reverse > *{ direction: ltr; }
.spotlight-media{ border-radius: var(--radius-l); overflow:hidden; box-shadow: var(--shadow-wide); border:1.5px solid var(--line-soft); }
.spotlight-media img{ width:100%; height:100%; object-fit:cover; min-height:320px; }
.spotlight-body{ display:flex; flex-direction:column; justify-content:center; }
.spotlight-body h2{ font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); max-width:18ch; }
.spotlight-body .btn{ align-self:flex-start; margin-top: var(--space-2); }


.gallery-principles{ max-width:980px; margin:0 auto; }
.principle-row{ display:grid; grid-template-columns: 90px 1fr; gap: var(--space-3); padding: var(--space-4) 0; border-top:1px solid var(--line-soft); }
.principle-row:first-child{ border-top:none; }
.principle-num{ font-family:'Libre Baskerville', serif; font-size:2.6rem; color: var(--accent); line-height:1; }
.principle-body h2{ font-size:1.5rem; max-width:24ch; }


.gallery-scope{ max-width:1100px; margin:0 auto; }
.scope-block{ border: 1.5px solid var(--line-soft); border-radius: var(--radius-m); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--white); transition: box-shadow .35s ease, border-color .35s ease; }
.scope-block:hover{ box-shadow: var(--shadow-wide); border-color: var(--accent); }
.scope-head{ display:flex; align-items:center; gap: var(--space-2); margin-bottom: var(--space-2); }
.scope-head .shelf-number{ color: var(--accent); margin:0; }
.scope-head h2{ margin:0; font-size:1.35rem; }
.scope-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--space-3); }
.scope-grid h4{ font-family:'DM Sans', sans-serif; font-weight:600; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--accent-2); margin-bottom:0.4rem; }
.scope-grid p{ font-size:0.95rem; margin:0; }


.faq-list{ max-width:900px; margin: var(--space-4) auto 0; display:flex; flex-direction:column; }
.faq-item{ padding: var(--space-3) 0; border-top:1px solid var(--line-soft); }
.faq-item:first-child{ border-top:none; }
.faq-item h3{ font-size:1.1rem; display:flex; gap:0.6rem; align-items:flex-start; }
.faq-item h3 i{ color: var(--accent); margin-top:0.25rem; flex-shrink:0; }
.faq-item p{ margin:0 0 0 1.7rem; font-size:0.98rem; }


.gallery-contact{ max-width:1280px; margin:0 auto; }
.contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-4); align-items:start; }
.contact-list{ display:flex; flex-direction:column; gap: var(--space-2); margin: var(--space-3) 0; }
.contact-list li{ display:flex; gap:0.8rem; align-items:flex-start; font-size:0.98rem; }
.contact-list i{ color: var(--accent); width:20px; margin-top:3px; }
.office-note{ border:1.5px solid var(--line-soft); border-radius: var(--radius-m); padding: var(--space-3); margin-top: var(--space-3); background: var(--canvas-alt); }
.office-note h3{ font-size:1.1rem; }
.office-note p{ margin:0; }

.easel{ border: 1.5px solid var(--line-soft); border-radius: var(--radius-m); padding: var(--space-4); background: var(--white); box-shadow: var(--shadow-tight); }
.easel-field{ margin-bottom: var(--space-2); }
.easel-field label{ display:block; font-weight:600; font-size:0.9rem; margin-bottom:0.4rem; }
.easel-field input, .easel-field textarea{
  width:100%; padding: 0.85rem 1rem; border-radius: var(--radius-s); border: 1.5px solid var(--line-soft);
  background: var(--canvas); font-family:'DM Sans', sans-serif; font-size:0.98rem; color: var(--ink);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.easel-field input:focus, .easel-field textarea:focus{ outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(191,95,44,0.14); }
.easel-check{ display:flex; gap:0.6rem; align-items:flex-start; margin: var(--space-2) 0 var(--space-3); font-size:0.9rem; }
.easel-check input{ width:20px; height:20px; margin-top:2px; flex-shrink:0; }
.iti, #phone{ width:100%; }

.map-frame{ border-radius: var(--radius-m); overflow:hidden; border: 1.5px solid var(--line-soft); box-shadow: var(--shadow-tight); max-width:1280px; margin:0 auto; }


.legal-page{ padding-top: calc(var(--space-6) + 3rem); }
.legal-inner{ max-width: 780px; margin:0 auto; }
.legal-lead{ font-size:1.1rem; }
.legal-page h2{ font-size:1.4rem; margin-top: var(--space-4); }
.legal-section{ margin-top: var(--space-4); padding-top: var(--space-3); border-top:1px solid var(--line-soft); }
.legal-section:first-of-type{ border-top:none; margin-top: var(--space-3); }


.backlot{ background: var(--dark-bg); color: rgba(255,255,255,0.85); }
.backlot-inner{
  max-width:1280px; margin:0 auto; padding: var(--space-6) var(--space-3) var(--space-4);
  display:grid; grid-template-columns: 1.2fr 1.6fr; gap: var(--space-5);
}
.backlot-cta h2{ color: var(--white); font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); max-width:16ch; }
.backlot-cta p{ color: rgba(255,255,255,0.65); max-width:42ch; }
.backlot-form{ display:flex; gap:0.6rem; margin-top: var(--space-3); flex-wrap:wrap; }
.backlot-form input{
  flex:1; min-width:220px; padding: 0.9rem 1.1rem; border-radius: var(--radius-s);
  border: 1.5px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.05); color: var(--white); font-size:0.95rem;
}
.backlot-form input::placeholder{ color: rgba(255,255,255,0.45); }
.backlot-form input:focus{ outline:none; border-color: var(--accent-soft); }
.backlot-links{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.backlot-col h3{ color: var(--white); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.1em; margin-bottom: var(--space-2); font-family:'DM Sans', sans-serif; font-weight:600; }
.backlot-col a{ display:block; color: rgba(255,255,255,0.68); font-size:0.95rem; margin-bottom:0.6rem; transition: color .3s ease; }
.backlot-col a:hover{ color: var(--white); }
.backlot-col p{ color: rgba(255,255,255,0.65); font-size:0.95rem; margin-bottom:0.5rem; }
.backlot-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding: var(--space-2) var(--space-3); text-align:center; }
.backlot-bottom p{ margin:0; font-size:0.85rem; color: rgba(255,255,255,0.5); }


.drawer{
  position:fixed; left:0; right:0; bottom:0; z-index:600;
  display:none; justify-content:space-around; align-items:center;
  background: var(--white); border-top: 1.5px solid var(--line-soft);
  padding: 0.5rem 0.4rem calc(0.5rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px -12px rgba(20,32,35,0.25);
  transform: translateY(100%); transition: transform .4s ease;
}
.drawer.is-open{ transform: translateY(0); }
.drawer-tab{
  display:flex; flex-direction:column; align-items:center; gap:2px; color: var(--ink-soft);
  font-size:0.68rem; font-weight:600; padding:6px 8px; border-radius: var(--radius-s); min-width:52px;
  transition: color .3s ease, background .3s ease;
}
.drawer-tab i{ font-size:1.15rem; }
.drawer-tab.is-active{ color: var(--accent); background: var(--accent-soft); }


.stage-curtain{
  position:fixed; bottom: 24px; left:50%; transform: translateX(-50%);
  z-index: 900; background: var(--white); border:1.5px solid var(--line);
  border-radius: 999px; padding: 0.7rem 0.6rem 0.7rem 1.3rem;
  display:flex; align-items:center; gap:1rem; box-shadow: var(--shadow-wide);
  max-width: 92vw; opacity:0; visibility:hidden; transition: opacity .4s ease, transform .4s ease;
}
.stage-curtain.is-visible{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.stage-curtain p{ margin:0; font-size:0.85rem; color: var(--ink-soft); white-space:nowrap; }
.stage-curtain p a{ color: var(--accent); text-decoration:underline; }
.stage-curtain-actions{ display:flex; gap:0.5rem; flex-shrink:0; }
.btn-tiny{
  border:1.5px solid var(--line); background:transparent; color: var(--ink);
  padding: 0.55rem 1rem; border-radius: 999px; font-size:0.82rem; font-weight:600;
  transition: background .3s ease, color .3s ease;
}
.btn-tiny.filled{ background: var(--ink); color: var(--white); }
.btn-tiny:hover{ background: var(--ink); color: var(--white); }

.spotlight-modal{
  position:fixed; inset:0; z-index:950; background: rgba(20,32,35,0.55);
  display:flex; align-items:center; justify-content:center; padding: var(--space-3);
  opacity:0; visibility:hidden; transition: opacity .35s ease;
}
.spotlight-modal.is-open{ opacity:1; visibility:visible; }
.spotlight-modal-panel{
  background: var(--white); border-radius: var(--radius-l); padding: var(--space-4);
  max-width: 520px; width:100%; box-shadow: var(--shadow-wide); max-height:86vh; overflow:auto;
}
.spotlight-modal-panel h3{ font-size:1.4rem; }
.cookie-row{ display:flex; justify-content:space-between; align-items:center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--line-soft); }
.cookie-row:first-of-type{ border-top:none; }
.cookie-row strong{ display:block; font-size:0.95rem; }
.cookie-row span{ font-size:0.82rem; color: var(--ink-soft); }
.switch{ position:relative; width:46px; height:26px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background: var(--line-soft); border-radius:999px; cursor:pointer; transition: background .3s ease; }
.slider::before{ content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background: var(--white); border-radius:50%; transition: transform .3s ease; box-shadow: var(--shadow-tight); }
.switch input:checked + .slider{ background: var(--accent); }
.switch input:checked + .slider::before{ transform: translateX(20px); }
.switch input:disabled + .slider{ opacity:0.6; cursor:default; }
.modal-actions{ margin-top: var(--space-3); justify-content:flex-end; }


@media (max-width: 900px){
  .marquee-links{ display:none; }
  .marquee-toggle{ display:flex; }
  .spotlight, .spotlight.reverse{ grid-template-columns: 1fr; direction: ltr; }
  .spotlight-media img{ min-height:240px; }
  .contact-grid{ grid-template-columns: 1fr; }
  .backlot-inner{ grid-template-columns: 1fr; }
  .backlot-links{ grid-template-columns: repeat(3, 1fr); }
  .principle-row{ grid-template-columns: 60px 1fr; }
  .drawer{ display:flex; }
  body{ padding-bottom: 78px; }
}

@media (max-width: 620px){
  .backlot-links{ grid-template-columns: repeat(2, 1fr); }
  .stage-inner{ padding: var(--space-4) var(--space-2) var(--space-4); }
  .stage-actions{ flex-direction:column; align-items:stretch; }
  .stage-actions .btn{ width:100%; }
  .stage-curtain{ flex-direction:column; align-items:stretch; text-align:center; border-radius: var(--radius-m); padding: var(--space-2); gap:0.6rem; }
  .stage-curtain p{ white-space:normal; }
  .backlot-form{ flex-direction:column; }
}