/* SonoHomeStaging styles */
:root {
  /* Sonoran palette, pulled from the staging photos.
     Terracotta + pool turquoise are complements; sage and mustard tie in the textiles. */
  --terra: #b8553b;          /* bedroom accent wall */
  --terra-dark: #933d28;     /* red rock shadow */
  --terra-soft: #f3d9cc;
  --turq: #1b95ab;           /* pool water */
  --turq-dark: #10697a;
  --turq-soft: #d5eef2;
  --sage: #718c69;           /* armchair + throw */
  --sage-dark: #4e6848;
  --sage-soft: #e1eadc;
  --mustard: #dea43a;        /* accent pillow / sunset glow */
  --mustard-soft: #f8e7c3;
  --sky: #5b8fc4;            /* desert sky */
  --linen: #f7f0e6;          /* sofa + walls */
  --paper: #fffbf6;
  --ink: #26302f;            /* deep slate */
  --body: #4b4540;
  --bs-body-font-family: 'Inter', system-ui, sans-serif;
  --bs-body-color: var(--body);
}

html { scroll-behavior: smooth; }
body { background: var(--paper); }
h1, h2, h3, .brand-font { font-family: 'Fraunces', serif; color: var(--ink); }
section { scroll-margin-top: 76px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--turq-dark); }

/* Buttons */
.btn-sono { background: var(--terra); color: #fff; border: none; border-radius: 999px; padding: .8rem 1.7rem; font-weight: 600; }
.btn-sono:hover, .btn-sono:focus { background: var(--terra-dark); color: #fff; }
.btn-ghost { border: 2px solid rgba(255,255,255,.85); color: #fff; border-radius: 999px; padding: .7rem 1.6rem; font-weight: 600; }
.btn-ghost:hover { background: #fff; color: var(--ink); }

/* Navbar */
.navbar { transition: background .3s, box-shadow .3s, padding .3s; padding: 1.1rem 0; }
.navbar .navbar-brand, .navbar .nav-link { color: #fff; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--mustard); }
.navbar.scrolled { background: rgba(255,251,246,.97); box-shadow: 0 4px 20px rgba(38,48,47,.08); padding: .6rem 0; border-bottom: 3px solid var(--terra); }
.navbar.scrolled .navbar-brand, .navbar.scrolled .nav-link { color: var(--ink); }
.navbar.scrolled .nav-link:hover, .navbar.scrolled .nav-link.active { color: var(--terra); }
.navbar-toggler { border: none; color: #fff; font-size: 1.6rem; }
.navbar.scrolled .navbar-toggler { color: var(--ink); }
.brand-mark { color: var(--mustard); }
.navbar.scrolled .brand-mark { color: var(--terra); }
@media (max-width: 991.98px) {
  .navbar-collapse { background: rgba(255,251,246,.98); border-radius: 16px; padding: 1rem 1.2rem; margin-top: .6rem; box-shadow: 0 10px 30px rgba(38,48,47,.15); }
  .navbar .navbar-collapse .nav-link { color: var(--ink); }
}

/* Hero: crossfading photo slideshow */
.hero {
  min-height: 70vh; min-height: 70svh;
  display: flex; align-items: center; position: relative; overflow: hidden;
  padding: 6.5rem 0 5rem; color: #fff; background: var(--ink);
}
/* 4 photos, 7s each, 28s loop. Photos get a little extra brightness and color. */
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: var(--focus, center); opacity: 0; animation: heroFade 28s infinite; transform: scale(1.06); filter: saturate(1.1) brightness(1.03); }
/* --focus = the part of each photo to keep when it has to be cropped */
.hero-slide:nth-child(1) { background-image: url('../images/outdoor.jpg'); animation-delay: 0s; --focus: 55% 60%; }
.hero-slide:nth-child(2) { background-image: url('../images/kitchen.jpg'); animation-delay: 7s; --focus: 55% 55%; }
.hero-slide:nth-child(3) { background-image: url('../images/indoor.jpg'); animation-delay: 14s; --focus: 45% 60%; }
.hero-slide:nth-child(4) { background-image: url('../images/bedroom.jpg'); animation-delay: 21s; --focus: 62% 55%; }
@keyframes heroFade {
  0%   { opacity: 0; transform: scale(1.06); }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  30%  { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}
/* Neutral charcoal wash: dark behind the text, clear on the right so the photos read true */
.hero-overlay { position: absolute; inset: 0; background:
  linear-gradient(95deg, rgba(28,30,32,.78) 0%, rgba(28,30,32,.58) 35%, rgba(28,30,32,.18) 65%, rgba(28,30,32,0) 100%),
  linear-gradient(0deg, rgba(28,30,32,.35), transparent 35%); }
/* Phones: photo gets its own full-width band under the menu, text sits below on solid slate */
@media (max-width: 767.98px) {
  .hero { display: block; min-height: 0; padding: 0 0 5.5rem; }
  .hero-media { position: relative; inset: auto; margin-top: 66px; aspect-ratio: 4 / 3; }
  .hero-slide { transform: none; animation-name: heroFadeFlat; }
  .hero-overlay { background: linear-gradient(180deg, transparent 70%, rgba(38,48,47,.85) 100%); }
  .hero .container { padding-top: 1.6rem; }
  .hero h1, .hero .lead { text-shadow: none; }
}
@keyframes heroFadeFlat {
  0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; }
}
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.08; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero h1 em { color: #ffe29a; font-style: italic; }
.hero .lead { color: #fff; max-width: 560px; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.hero .eyebrow { color: #fff3d6; }
.hero .btn-sono { background: var(--terra); box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.hero .btn-sono:hover, .hero .btn-sono:focus { background: var(--terra-dark); }
.coming-pill { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(6px); border-radius: 999px; padding: .4rem 1rem; font-size: .85rem; font-weight: 500; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #5fd0de; box-shadow: 0 0 0 0 rgba(95,208,222,.7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(95,208,222,0); } 100% { box-shadow: 0 0 0 0 rgba(95,208,222,0); } }
.hero-stats { border-top: 1px solid rgba(255,255,255,.25); padding-top: 1.2rem; margin-top: 1.8rem; }
.hero-stats .num { font-family: 'Fraunces', serif; font-size: 2rem; color: #ffe29a; line-height: 1; }
.hero-stats small { color: rgba(255,255,255,.85); }
.mesa { position: absolute; left: 0; bottom: -1px; width: 100%; height: 80px; z-index: 1; }
.hero .container { position: relative; z-index: 2; }

/* Palette strip under the hero */
.swatches { display: flex; height: 8px; }
.swatches span { flex: 1; }

/* Sections */
.section-pad { padding: 5.5rem 0; }
.bg-linen { background: var(--linen); }

.strategy-card { background: #fff; border-radius: 20px; padding: 2rem 1.6rem; height: 100%; border: 1px solid #efe3d4; border-top: 5px solid var(--accent); transition: transform .3s, box-shadow .3s; }
.strategy-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(38,48,47,.10); }
.icon-badge { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 1.2rem; color: var(--accent); background: var(--accent-soft); }
.a-terra   { --accent: var(--terra);   --accent-soft: var(--terra-soft); }
.a-turq    { --accent: var(--turq);    --accent-soft: var(--turq-soft); }
.a-sage    { --accent: var(--sage);    --accent-soft: var(--sage-soft); }
.a-mustard { --accent: #c48a1f;        --accent-soft: var(--mustard-soft); }

/* Room photo cards */
.room-card { border-radius: 22px; overflow: hidden; background: #fff; height: 100%; box-shadow: 0 10px 34px rgba(38,48,47,.09); display: flex; flex-direction: column; }
.room-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.room-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.room-card:hover .room-photo img { transform: scale(1.05); }
.room-tag { position: absolute; left: 1rem; bottom: 1rem; background: var(--accent); color: #fff; border-radius: 999px; padding: .35rem .9rem; font-size: .8rem; font-weight: 600; letter-spacing: .03em; }
.room-body { padding: 1.6rem 1.8rem 2rem; flex: 1; border-top: 5px solid var(--accent); }
.room-body h3 { margin-bottom: .9rem; }
.room-body li { margin-bottom: .55rem; padding-left: 1.7rem; position: relative; }
.room-body li i { position: absolute; left: 0; top: .1rem; color: var(--accent); }

/* Feature split */
.feature-img { border-radius: 26px; overflow: hidden; box-shadow: 0 24px 60px rgba(38,48,47,.18); position: relative; }
.feature-img img { width: 100%; height: auto; display: block; }
.feature-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 8px; background: linear-gradient(90deg, var(--terra), var(--mustard), var(--sage), var(--turq)); }
.chip { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; padding: .4rem .9rem .4rem .45rem; background: #fff; border: 1px solid #eadfd1; font-size: .88rem; font-weight: 500; margin: 0 .4rem .6rem 0; }
.chip i { width: 22px; height: 22px; border-radius: 50%; display: inline-block; }

/* Why band */
.why-band { background: linear-gradient(120deg, var(--turq-dark) 0%, #1f4f5a 40%, var(--terra-dark) 100%); color: #f4e6db; position: relative; overflow: hidden; }
.why-band::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -160px; top: -200px; background: radial-gradient(circle, rgba(222,164,58,.45), transparent 70%); }
.why-band .container { position: relative; }
.why-band h2 { color: #fff; }
.why-band .small { color: #f4e6db; }
.why-item .num { font-family: 'Fraunces', serif; font-size: 2.4rem; font-weight: 700; color: var(--mustard); line-height: 1; }
.why-item { border-top: 2px solid rgba(222,164,58,.45); padding-top: 1.2rem; height: 100%; }

/* Contact */
.contact-card { background: #fff; border-radius: 24px; padding: 2.4rem; box-shadow: 0 20px 50px rgba(38,48,47,.1); position: relative; overflow: hidden; }
.contact-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--terra), var(--mustard), var(--sage), var(--turq)); }
.form-control, .form-select { border-radius: 12px; padding: .75rem 1rem; border-color: #e6d8c7; }
.form-control:focus, .form-select:focus { border-color: var(--turq); box-shadow: 0 0 0 .2rem rgba(27,149,171,.2); }
.contact-line { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.2rem; }
.contact-line i { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; }
.contact-line:nth-of-type(1) i { background: var(--terra-soft); color: var(--terra); }
.contact-line:nth-of-type(2) i { background: var(--turq-soft); color: var(--turq-dark); }
.contact-line:nth-of-type(3) i { background: var(--sage-soft); color: var(--sage-dark); }
.contact-line a { color: var(--ink); text-decoration: none; font-weight: 600; }
.contact-line a:hover { color: var(--terra); }

footer { background: var(--ink); color: #d9cfc4; padding: 3rem 0 2rem; position: relative; }
footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--terra), var(--mustard), var(--sage), var(--turq)); }
footer a { color: #d9cfc4; text-decoration: none; }
footer a:hover { color: var(--mustard); }


/* ===== Two-tone SonoHomeStaging wordmark: Sono + Staging share a color, Home is the accent ===== */
.wm-sono { color: inherit; }
.wm-home { color: #f0906e; }                         /* light terracotta over dark backgrounds */
.navbar.scrolled .wm-home { color: var(--terra); }
.wm-alt { color: var(--mustard); }                    /* second word for sister brands in the strip/footer */

/* ===== Sono Suite top strip (matches SonoLivingMgmt) ===== */
.suite-bar { position: fixed; top: 0; left: 0; right: 0; height: 36px; z-index: 1031; background: var(--ink); color: #c9c2b8; font-size: .8rem;
  border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--terra), var(--mustard), var(--sage), var(--turq)) 1; }
.suite-bar a { color: #fff; text-decoration: none; font-weight: 600; }
.suite-bar a:hover, .suite-bar a:hover .wm-alt { color: var(--mustard); }
.suite-bar .sep { opacity: .35; margin: 0 .6rem; }
.suite-bar .contact a { font-weight: 500; color: #c9c2b8; }
.suite-bar .contact a:hover { color: #fff; }
@media (min-width: 768px) {
  #mainNav { top: 36px; }
  section { scroll-margin-top: 116px; }
  .hero { padding-top: calc(6.5rem + 36px); }
}

/* ===== Owners ===== */
.owners-quote { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.35rem; color: var(--ink); border-left: 4px solid var(--terra); padding-left: 1rem; }
.owner-point { display: flex; gap: .9rem; align-items: flex-start; }
.owner-point i { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--terra); font-size: 1.2rem; box-shadow: 0 6px 16px rgba(38,48,47,.08); }
.owners-stat { background: linear-gradient(140deg, var(--ink) 0%, #2f4a4e 55%, var(--turq-dark) 120%); border-radius: 24px; padding: 2.6rem 2.2rem; color: #d9e4e2; position: relative; overflow: hidden; box-shadow: 0 24px 60px rgba(38,48,47,.22); }
.owners-stat::after { content: ""; position: absolute; width: 260px; height: 260px; right: -90px; bottom: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(222,164,58,.55), transparent 70%); }
.owners-stat > * { position: relative; }
.owners-stat .big { font-family: 'Fraunces', serif; font-weight: 700; font-size: clamp(3.4rem, 8vw, 5rem); line-height: 1; color: var(--mustard); }
.owners-stat .names { font-family: 'Fraunces', serif; font-size: 1.5rem; color: #fff; }
.owner-card { background: #fff; border-radius: 22px; padding: 2rem; height: 100%; box-shadow: 0 14px 40px rgba(38,48,47,.08); border-top: 5px solid var(--turq); }
.owner-card.lori { border-top-color: var(--terra); }
.owner-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center 25%; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--turq); flex-shrink: 0; background: linear-gradient(135deg, var(--turq), var(--turq-dark)); }
.owner-card.lori .owner-photo { box-shadow: 0 0 0 3px var(--terra); background: linear-gradient(135deg, var(--terra), var(--terra-dark)); }
.owner-initials { display: flex; align-items: center; justify-content: center; color: #fff; font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 700; }
.owner-role { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--terra); }

/* ===== Footer: Sono Suite list (matches SonoLivingMgmt) ===== */
.suite-list li { margin-bottom: .9rem; }
.suite-list li > a, .suite-list li.current { display: flex; gap: .7rem; align-items: flex-start; }
.suite-list a:hover .text-white { color: var(--mustard) !important; }
.suite-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: .45rem; flex-shrink: 0; background: var(--terra); }
.suite-list li:nth-child(2) .suite-dot { background: var(--turq); }
.suite-list li:nth-child(3) .suite-dot { background: var(--mustard); }
.suite-tag { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: 20px; font-size: .68rem; background: rgba(240,144,110,.2); color: #f6d3c6; }
.footer-brand { font-family: 'Fraunces', serif; font-size: 1.4rem; font-weight: 700; color: #fff; text-decoration: none; }
.footer-brand:hover { color: #fff; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .pulse { animation: none; }
  .hero-slide { animation: none; transform: none; }
  .hero-slide:nth-child(1) { opacity: 1; }
  html { scroll-behavior: auto; }
}

#toTop { position: fixed; right: 18px; bottom: 18px; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--terra); color: #fff; display: none; z-index: 1030; box-shadow: 0 6px 18px rgba(147,61,40,.35); }
#toTop:hover { background: var(--terra-dark); }