/* Shared design system for the dark ink/brass/ivory redesign.
   Single source of truth for base styles, nav, mobile menu, footer, and
   buttons used across every page — avoids re-duplicating ~350 lines of CSS
   per page the way the old copy-pasted markup did. */

:root{
  /* Without this, browsers assume light UI for native form-control chrome
     (date input's mm/dd/yyyy hint, native pickers, scrollbars) regardless
     of the page's own dark styling -- author `color` CSS doesn't reliably
     override that hint text, so it rendered invisible against the dark
     contact/corporate forms. */
  color-scheme:dark;
  --ink:#181614;
  --ink-soft:#25211d;
  --ink-soft2:#2e2823;
  --ivory:#F6F1E7;
  --ivory-dim:#cfc6b4;
  --ivory-faint:#a89d88;
  --brass:#B4915A;
  --brass-bright:#D9B87C;
  --burgundy:#5C2430;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Work Sans', -apple-system, sans-serif;
}
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--ink); color:var(--ivory); font-family:var(--sans); overflow-x:hidden;}
img{display:block; max-width:100%;}
section{position:relative;}
a{color:inherit;}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline-offset: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav-toggle span { transition: none; }
  .thank-you { animation: none; }
}

/* Section headers */
.section-pad{padding:7rem 5vw;}
.section-head{max-width:640px; margin:0 auto 4rem; text-align:center;}
.section-head.left{margin:0 0 3.5rem; text-align:left;}
.eyebrow{
  font-size:0.76rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--brass-bright);
  margin-bottom:1.2rem; display:flex; align-items:center; gap:12px; justify-content:center;
}
.section-head.left .eyebrow{justify-content:flex-start;}
.eyebrow::before{content:''; width:36px; height:1px; background:var(--brass-bright); display:inline-block;}
h2.section-title{
  font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(2rem, 3.6vw, 3.1rem); line-height:1.15; color:var(--ivory);
}
h2.section-title em{font-style:normal; color:var(--brass-bright);}
.section-sub{font-size:1rem; line-height:1.7; color:var(--ivory-dim); font-weight:300; margin-top:1.2rem;}

/* NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 5vw;
  transition:background .4s ease, padding .4s ease;
}
.nav.scrolled{
  background:rgba(24,22,20,0.92); backdrop-filter:blur(10px);
  padding:16px 5vw; border-bottom:1px solid rgba(180,145,90,0.18);
}
.brand{font-family:var(--serif); font-weight:400; font-size:1.3rem; letter-spacing:0.14em; color:var(--ivory); text-decoration:none;}
.brand span{color:var(--brass-bright);}
/* At 1.3rem, "LUMINA STRING ENSEMBLE" needs ~353px to fit on one line but
   only has viewport-width minus padding minus the hamburger button
   available -- which is under that for every phone up to ~430px wide, not
   just small ones. It wraps to two lines, and on the homepage that second
   line collides with the hero's flex-centered .eyebrow (independent
   elements, same root pattern as the .scroll-cue fix below). Shrinking the
   brand text keeps it on one line through that whole width range. */
@media (max-width:480px){.brand{font-size:1rem;}}
.nav-links{display:flex; gap:2.4rem; align-items:center; list-style:none;}
.nav-links a{color:var(--ivory-dim); text-decoration:none; font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; transition:color .25s ease;}
.nav-links a:hover{color:var(--brass-bright);}
.nav-cta{border:1px solid var(--brass); color:var(--ivory) !important; padding:9px 20px; border-radius:2px;}
.nav-cta:hover{background:var(--brass); color:var(--ink) !important;}
@media (max-width:900px){.nav-links{display:none;}}

/* Mobile nav toggle */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0;
}
.nav-toggle span{display:block; width:100%; height:2px; background:var(--ivory); transition:transform .25s ease, opacity .25s ease;}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:900px){.nav-toggle{display:flex;}}

.mobile-menu{
  position:fixed; top:0; left:0; right:0; z-index:49;
  background:rgba(24,22,20,0.98); backdrop-filter:blur(10px);
  padding:100px 6vw 40px; border-bottom:1px solid rgba(180,145,90,0.18);
}
.mobile-menu-links{list-style:none; display:flex; flex-direction:column; gap:1.6rem;}
.mobile-menu-links a{color:var(--ivory-dim); text-decoration:none; font-size:1.1rem; letter-spacing:0.04em; text-transform:uppercase; display:block;}
.mobile-menu-links a:hover{color:var(--brass-bright);}
.mobile-menu-links .nav-cta{display:inline-block; border:1px solid var(--brass); color:var(--ivory); padding:10px 20px; border-radius:2px; margin-top:0.4rem;}
@media (min-width:901px){.mobile-menu{display:none;}}

/* Sticky mobile CTA -- injected site-wide by shared.js except on /corporate
   (its own separate inquiry form) and /thank-you. Mirrors .btn-primary and
   uses the same /#contact-form target as the nav's "Check Availability". */
#lumina-sticky-cta{display:none;}
@media (max-width:768px){
  #lumina-sticky-cta{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:var(--ink); border-top:1px solid rgba(180,145,90,0.18);
    box-shadow:0 -2px 12px rgba(0,0,0,0.35);
    padding:12px 16px; padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }
  #lumina-sticky-cta a{
    flex:1; display:block; text-align:center; text-decoration:none;
    font-family:var(--sans); font-size:0.85rem; font-weight:500;
    letter-spacing:0.1em; text-transform:uppercase;
    background:var(--brass); color:var(--ink); border:1px solid var(--brass);
    padding:14px 0; border-radius:2px; transition:all .3s ease;
  }
  #lumina-sticky-cta a:hover{background:transparent; color:var(--brass-bright);}
  /* Bar is ~71px tall; this clears it plus the home-bar inset so the footer's
     phone/email never sit under the bar at full scroll. Class is set by
     shared.js only on pages that actually get the bar. */
  body.has-sticky-cta{padding-bottom:calc(88px + env(safe-area-inset-bottom));}
}

/* Buttons */
.btn-primary{
  font-family:var(--sans); font-size:0.85rem; letter-spacing:0.1em; text-transform:uppercase;
  background:var(--brass); color:var(--ink); border:1px solid var(--brass);
  padding:15px 32px; text-decoration:none; border-radius:2px; transition:all .3s ease; font-weight:500;
  display:inline-block; cursor:pointer;
}
.btn-primary:hover{background:transparent; color:var(--brass-bright);}
.btn-ghost{
  font-size:0.85rem; letter-spacing:0.06em; color:var(--ivory-dim); text-decoration:none;
  display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,0.25);
  padding-bottom:2px; transition:color .25s ease, border-color .25s ease; background:none; border-left:0; border-right:0; border-top:0; cursor:pointer; font-family:var(--sans);
}
.btn-ghost:hover{color:var(--ivory); border-color:var(--brass-bright);}
.btn-outline{
  font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase; text-align:center;
  color:var(--ivory); border:1px solid rgba(255,255,255,0.25); padding:13px; text-decoration:none;
  border-radius:2px; transition:all .25s ease; font-weight:500; background:none; cursor:pointer; font-family:var(--sans); width:100%;
}
.btn-outline:hover{border-color:var(--brass-bright); color:var(--brass-bright);}

/* FOOTER */
footer{background:var(--ink); padding:3rem 5vw 2.2rem; border-top:1px solid rgba(180,145,90,0.15);}
.footer-inner{max-width:1160px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1.2rem;}
.footer-inner p{font-size:0.8rem; color:var(--ivory-faint); font-weight:300;}
.footer-links{display:flex; gap:1.6rem; list-style:none;}
.footer-links a{color:var(--ivory-faint); text-decoration:none; font-size:0.8rem;}
.footer-links a:hover{color:var(--brass-bright);}

/* Forms (contact, inquiry) */
form{display:grid; gap:1.1rem;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
input, select, textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.38);
  color:var(--ivory); font-family:var(--sans); font-size:0.94rem; padding:0.8rem 0.1rem;
  transition:border-color .25s ease;
}
input::placeholder, textarea::placeholder{color:var(--ivory-faint);}
input:focus, select:focus, textarea:focus{border-color:var(--brass-bright);}
select option{background:var(--ink);}
textarea{resize:vertical; min-height:90px;}
/* Strip the native OS select chrome so it matches the underline text inputs,
   with one consistent brass caret. Without this, iOS/Android render selects
   with their own box, font weight, and arrow. */
select{
  appearance:none; -webkit-appearance:none; padding-right:1.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%23B4915A' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 0.15rem center;
}
/* Empty placeholder option reads faint, like the text inputs' placeholders. */
select:required:invalid{color:var(--ivory-faint);}
form .btn-primary{border:1px solid var(--brass); margin-top:0.6rem; justify-self:start;}
.package-display-row{font-size:0.85rem; color:var(--brass-bright); border:1px solid rgba(180,145,90,0.3); border-radius:2px; padding:0.7rem 0.9rem;}
.thank-you{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  gap:0.9rem; padding:3rem 1.5rem; border:1px solid rgba(180,145,90,0.25); border-radius:3px;
  animation:thankYouFadeUp .5s ease forwards;
}
@keyframes thankYouFadeUp{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.thank-you h3{font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.6rem; color:var(--ivory);}
.thank-you h3 em{font-style:normal; color:var(--brass-bright);}
.thank-you p{color:var(--ivory-dim); font-weight:300; line-height:1.65; max-width:44ch;}
.thank-you .thank-you-note{font-family:var(--serif); font-style:italic; color:var(--brass-bright); font-size:0.98rem;}
.thank-you-actions{display:flex; gap:0.9rem; justify-content:center; flex-wrap:wrap; margin-top:0.3rem;}
.thank-you-actions .btn-outline{width:auto;}
@media (max-width:600px){
  .thank-you-actions{flex-direction:column; align-items:stretch; width:100%;}
  .thank-you-actions .btn-outline, .thank-you-actions .btn-primary{width:100%;}
}
@media (max-width:900px){.form-row{grid-template-columns:1fr;}}