/* ─── The Summer House · shared.css ──────────────────────────────────────── */
:root {
  --sun:    #f9c32b;
  --gold:   #f4c755;
  --orange: #f5854a;
  --peach:  #fde3c8;
  --green:  #55b14b;
  --mint:   #d4f0d0;
  --sky:    #c3e0e2;
  --skyblue:#e8f6f7;
  --navy:   #1f2447;
  --white:  #fffef9;
  --cream:  #fef8ea;
  --dark:   #12152b;
  --green-light: #e8f5e6;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Nunito',sans-serif; background:var(--white); color:var(--navy); overflow-x:hidden; cursor:none; }

/* ── CURSOR ── */
.cursor { width:14px; height:14px; background:var(--sun); border-radius:50%; position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); box-shadow:0 0 12px rgba(249,195,43,0.6); }
.cursor-ring { width:38px; height:38px; border:2px solid var(--orange); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); opacity:0.4; }

/* ── NAV ── */
nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:1.2rem 3rem; display:flex; align-items:center; justify-content:space-between; transition:all 0.4s; }
nav.scrolled { background:rgba(255,254,249,0.95); backdrop-filter:blur(18px); padding:0.8rem 3rem; box-shadow:0 2px 24px rgba(249,195,43,0.12); }
nav.scrolled .nav-links a { color:var(--navy); opacity:0.75; }
nav.scrolled .nav-links a:hover, nav.scrolled .nav-links a.active { color:var(--orange); opacity:1; }
nav.scrolled .lang-btn { color:var(--navy); }
.nav-logo { text-decoration:none; display:flex; align-items:center; height:44px; }
.nav-logo img { height:38px; width:auto; }
.logo-white { display:block; }
.logo-color  { display:none; }
nav.scrolled .logo-white { display:none; }
nav.scrolled .logo-color  { display:block; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { color:rgba(255,255,255,0.85); text-decoration:none; font-size:0.82rem; font-weight:700; letter-spacing:0.05em; position:relative; padding-bottom:2px; transition:color 0.2s; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--gold); border-radius:2px; transform:scaleX(0); transition:transform 0.25s; }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-links a:hover, .nav-links a.active { color:var(--sun); }
.nav-right { display:flex; align-items:center; gap:1.2rem; }
.lang-switcher { display:flex; align-items:center; gap:0.35rem; }
.lang-btn { background:none; border:none; cursor:pointer; font-family:'Nunito',sans-serif; font-size:0.78rem; font-weight:800; letter-spacing:0.08em; color:rgba(255,255,255,0.6); padding:0.2rem 0.4rem; border-radius:4px; transition:all 0.2s; }
.lang-btn:hover, .lang-btn.lang-active { color:var(--sun); }
.lang-sep { color:rgba(255,255,255,0.3); font-size:0.75rem; }
nav.scrolled .lang-sep { color:rgba(31,36,71,0.3); }
.nav-cta { background:linear-gradient(135deg,var(--sun),var(--orange)); color:white; padding:0.65rem 1.6rem; border-radius:50px; font-size:0.8rem; font-weight:900; text-decoration:none; transition:all 0.3s; box-shadow:0 4px 18px rgba(245,133,74,0.45); }
.nav-cta:hover { transform:translateY(-2px) scale(1.05); box-shadow:0 8px 28px rgba(245,133,74,0.55); }

/* ── PAGE HERO (shared) ── */
.page-hero { min-height:42vh; display:flex; align-items:flex-end; padding:0 7rem 4rem; position:relative; overflow:hidden; }
.page-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(115deg,rgba(18,21,43,0.85) 0%,rgba(18,21,43,0.45) 70%); }
.page-hero-content { position:relative; z-index:2; max-width:720px; animation:fadeUp 0.9s 0.2s ease both; }
.page-eyebrow { display:inline-flex; align-items:center; gap:0.6rem; background:rgba(249,195,43,0.18); border:1.5px solid rgba(249,195,43,0.5); color:var(--sun); padding:0.4rem 1rem; border-radius:50px; font-size:0.72rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:1.2rem; }
.page-hero h1 { font-family:'Fraunces',serif; font-size:clamp(2.8rem,5vw,5rem); font-weight:300; line-height:1.05; color:white; margin-bottom:1rem; }
.page-hero h1 em { font-style:italic; color:var(--sun); }
.page-hero p { color:rgba(255,255,255,0.75); font-size:1rem; font-weight:500; max-width:520px; line-height:1.7; }

/* ── SECTION SHARED ── */
.section-label { font-size:0.72rem; font-weight:900; letter-spacing:0.25em; text-transform:uppercase; margin-bottom:1rem; display:inline-flex; align-items:center; gap:0.6rem; color:var(--orange); }
.section-label::before { content:'✦'; font-size:0.5rem; }
.section-header { text-align:center; margin-bottom:3.5rem; }
.section-header h2 { font-family:'Fraunces',serif; font-size:clamp(2.2rem,4vw,3.5rem); font-weight:300; color:var(--navy); }
.section-header h2 em { font-style:italic; color:var(--orange); }
.section-header p { color:#888; font-size:0.95rem; margin-top:0.8rem; max-width:540px; margin-inline:auto; line-height:1.7; }

/* ── BUTTONS ── */
.btn-sun { background:linear-gradient(135deg,var(--sun),var(--orange)); color:white; padding:1rem 2.2rem; border-radius:50px; font-size:0.88rem; font-weight:900; text-decoration:none; transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 6px 24px rgba(245,133,74,0.5); display:inline-flex; align-items:center; gap:0.5rem; }
.btn-sun:hover { transform:translateY(-4px) scale(1.05); box-shadow:0 14px 35px rgba(245,133,74,0.6); }
.btn-green { background:linear-gradient(135deg,var(--green),#3a9930); color:white; padding:0.95rem 2rem; border-radius:50px; font-size:0.85rem; font-weight:900; text-decoration:none; transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1); display:inline-flex; align-items:center; gap:0.5rem; box-shadow:0 6px 20px rgba(85,177,75,0.4); }
.btn-green:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 12px 30px rgba(85,177,75,0.5); }
.btn-ghost { border:2px solid rgba(255,255,255,0.45); color:white; padding:0.98rem 2.2rem; border-radius:50px; font-size:0.88rem; font-weight:700; text-decoration:none; transition:all 0.25s; }
.btn-ghost:hover { border-color:white; background:rgba(255,255,255,0.12); }
.btn-white { background:white; color:var(--orange); padding:1.1rem 2.5rem; border-radius:50px; font-size:0.88rem; font-weight:900; text-decoration:none; white-space:nowrap; transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 6px 24px rgba(0,0,0,0.15); }
.btn-white:hover { transform:translateY(-4px) scale(1.05); box-shadow:0 14px 35px rgba(0,0,0,0.2); }
.btn-navy { background:var(--navy); color:white; padding:1rem 2.2rem; border-radius:50px; font-size:0.88rem; font-weight:900; text-decoration:none; transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 6px 20px rgba(31,36,71,0.3); display:inline-flex; align-items:center; gap:0.5rem; }
.btn-navy:hover { transform:translateY(-3px) scale(1.04); box-shadow:0 12px 30px rgba(31,36,71,0.4); }

/* ── MARQUEE BAND ── */
.band { background:linear-gradient(90deg,var(--sun),var(--orange),var(--sun),var(--orange)); background-size:200% 100%; animation:gradientShift 6s linear infinite; padding:0.85rem 0; overflow:hidden; }
@keyframes gradientShift { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
.band-inner { display:flex; white-space:nowrap; animation:marquee 22s linear infinite; }
.band-inner:hover { animation-play-state:paused; }
.band-item { display:inline-flex; align-items:center; gap:1.8rem; font-size:0.82rem; font-weight:900; letter-spacing:0.1em; text-transform:uppercase; color:white; padding:0 2rem; }
.band-sun { animation:spinSlow 4s linear infinite; font-size:1rem; }

/* ── MILESTONES TICKER ── */
.milestones { background:linear-gradient(90deg,var(--green),#3a9930); padding:0.9rem 0; overflow:hidden; }
.milestones-inner { display:flex; white-space:nowrap; animation:marqueeRev 28s linear infinite; }
.milestone-item { display:inline-flex; align-items:center; gap:1.5rem; font-size:0.8rem; font-weight:900; letter-spacing:0.08em; text-transform:uppercase; color:white; padding:0 2rem; }
.milestone-dot { width:5px; height:5px; background:rgba(255,255,255,0.5); border-radius:50%; }

/* ── CTA STRIP ── */
.cta-strip { padding:5rem 4rem; background:linear-gradient(135deg,var(--sun) 0%,var(--orange) 100%); display:flex; align-items:center; justify-content:space-between; gap:3rem; flex-wrap:wrap; position:relative; overflow:hidden; }
.cta-strip::before { content:''; position:absolute; width:400px; height:400px; border-radius:50%; background:rgba(255,255,255,0.1); right:-100px; top:-100px; }
.cta-strip::after  { content:''; position:absolute; width:250px; height:250px; border-radius:50%; background:rgba(255,255,255,0.07); left:-50px; bottom:-50px; }
.cta-strip-text h2 { font-family:'Fraunces',serif; font-size:clamp(1.8rem,3vw,2.8rem); font-weight:300; color:white; font-style:italic; }
.cta-strip-text p  { color:rgba(255,255,255,0.8); font-size:0.95rem; margin-top:0.5rem; font-weight:600; }
.cta-strip .btn-white { position:relative; z-index:1; }

/* ── FOOTER ── */
footer { background:var(--dark); color:rgba(255,255,255,0.55); padding:4rem 4rem 2rem; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-brand p { font-size:0.85rem; line-height:1.7; max-width:250px; }
.footer-col h4 { color:var(--sun); font-size:0.7rem; font-weight:900; letter-spacing:0.2em; text-transform:uppercase; margin-bottom:1.2rem; }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:0.6rem; }
.footer-col ul li a { color:rgba(255,255,255,0.45); text-decoration:none; font-size:0.85rem; font-weight:600; transition:color 0.2s; }
.footer-col ul li a:hover { color:var(--sun); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; }
.social-links { display:flex; gap:0.8rem; }
.social-links a { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.45); text-decoration:none; font-size:0.75rem; font-weight:800; transition:all 0.25s; }
.social-links a:hover { background:var(--sun); border-color:var(--sun); color:var(--navy); }

/* ── SCROLL REVEAL ── */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── ANIMATIONS ── */
@keyframes fadeUp    { from{opacity:0;transform:translateY(35px)} to{opacity:1;transform:translateY(0)} }
@keyframes slowZoom  { from{transform:scale(1.06)} to{transform:scale(1)} }
@keyframes spinSlow  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes marquee   { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marqueeRev{ from{transform:translateX(-50%)} to{transform:translateX(0)} }
@keyframes floatBob  { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-15px) rotate(5deg)} }
@keyframes wobble    { 0%,100%{transform:rotate(-3deg) scale(1)} 50%{transform:rotate(3deg) scale(1.05)} }
 to{transform:scale(1);opacity:1} }
 50%{transform:scale(1.25)} }
 30%{transform:translateY(-5px);background:var(--orange)} }
@keyframes scrollFade{ 0%,100%{opacity:0.4} 50%{opacity:1} }
@keyframes underlineGrow{ to{transform:scaleX(1)} }
@keyframes rayFloat  { 0%,100%{opacity:0.4} 50%{opacity:0.9} }
@keyframes cardShimmer{ 0%,100%{left:-60%} 50%{left:120%} }

/* ── RESPONSIVE ── */
@media(max-width:960px){
  nav { padding:1rem 1.5rem; }
  .nav-links { display:none; }
  .page-hero { padding:0 2rem 3rem; min-height:36vh; }
  .footer-top { grid-template-columns:1fr 1fr; }
  body { cursor:auto; }
  .cursor, .cursor-ring { display:none; }
    }
@media(max-width:600px){
  .footer-top { grid-template-columns:1fr; }
  .cta-strip { flex-direction:column; text-align:center; }
}

/* ── PULL QUOTE (replaces animated marquee quotes) ── */
.pull-quote {
  padding: 5rem 4rem;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.pull-quote::before {
  content: '"';
  font-family: 'Fraunces', serif;
  font-size: 28rem;
  color: rgba(249,195,43,0.05);
  position: absolute;
  top: -5rem; left: -1rem;
  line-height: 1;
  pointer-events: none;
  font-style: italic;
}
.pull-quote-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 4px 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.pull-quote-bar {
  height: 100%;
  min-height: 80px;
  background: linear-gradient(to bottom, var(--sun), var(--orange));
  border-radius: 4px;
  flex-shrink: 0;
}
.pull-quote-text {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 300;
  font-style: italic;
  color: white;
  line-height: 1.35;
  margin-bottom: 1.2rem;
}
.pull-quote-text em {
  font-style: normal;
  font-weight: 700;
  color: var(--sun);
}
.pull-quote-attr {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
.pull-quote-attr::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255,255,255,0.25);
}

@media(max-width:600px){
  .pull-quote-inner { grid-template-columns: 3px 1fr; gap: 1.5rem; }
}