/* ============================================================
   S & S INTERIORS — theme layer over the staging skeleton.
   Warm, coastal-luxury tuning of the base tokens + a few
   components (brand mark, press logo band, hero polish).
   ============================================================ */
:root{
  --ivory:#F6F3ED; --paper:#FCFAF5; --ink:#26281F; --ink-soft:#3D4136;
  --stone:#6C6A5A; --hairline:#E2DCCE; --hairline-dark:#CFC8B6;
  --bronze:#8A7A4E;        /* warm olive-bronze, echoes the S&S sprig */
  --bronze-soft:#A79367;
  --midnight:#232419; --midnight-2:#2C2C20; --midnight-hairline:#3A3A2C;
  --midnight-text:#EFEBE0; --midnight-stone:#A8A492;
}
::selection{ background:var(--bronze); color:var(--paper); }

/* missing skeleton utility + no-JS safety (content must never stay hidden) */
.section--top-0{ padding-block-start:0; }
.no-js [data-reveal]{ opacity:1 !important; transform:none !important; }
.no-js .img-mask img{ transform:none !important; }
.no-js .img-mask::after{ display:none !important; }
.no-js .line-inner{ transform:none !important; }
.no-js .preloader{ display:none !important; }

/* ---------- brand mark: the S&S diamond emblem ---------- */
.brand{ gap:0.7rem; }
.brand-mark{ height:4.1rem; }
@media (max-width:48em){ .brand-mark{ height:3.4rem; } }

/* ---------- footer emblem ---------- */
.footer-about .f-logo{ width:7rem; height:auto; }

/* ---------- preloader ---------- */
.preloader .pl-mark img{ width:7.5rem; }

/* ---------- Press: real logo band (replaces text names) ---------- */
.press-logos{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.4rem 2.8rem; }
.press-logos img{ width:auto; filter:grayscale(1) brightness(.35); opacity:.8; transition:opacity var(--t-fast), filter var(--t-fast); }
.press-logos img:hover{ opacity:1; }
.section--dark .press-logos img, .on-dark .press-logos img{ filter:brightness(0) invert(1); opacity:.8; }

/* ---------- hero: refine for S & S ---------- */
.hero-media img{ object-position:50% 42%; }
.hero .brand-emblem{ width:clamp(6rem,11vw,9rem); height:auto; margin-bottom:1.6rem;
  filter:drop-shadow(0 6px 26px rgba(15,15,8,.4)); }

/* eyebrow accent stays warm */
.eyebrow::before{ background:var(--bronze); }

/* ---------- quiet quote panel used on service pages ---------- */
.quote-panel{ text-align:center; }
.quote-panel blockquote{ font-family:var(--serif); font-weight:500; font-style:italic;
  font-size:clamp(1.6rem,1.1rem + 2vw,2.8rem); line-height:1.34; letter-spacing:-.01em;
  max-width:24ch; margin-inline:auto; color:var(--ink); }
.section--dark .quote-panel blockquote{ color:var(--midnight-text); }
.quote-panel cite{ display:block; margin-top:1.6rem; font-family:var(--sans); font-style:normal;
  font-size:var(--fs-eyebrow); letter-spacing:.24em; text-transform:uppercase; color:var(--stone); }
.section--dark .quote-panel cite{ color:var(--midnight-stone); }

/* ---------- team grid (about) ---------- */
.team{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.2rem clamp(2rem,5vw,4.5rem); }
@media (min-width:64em){ .team{ grid-template-columns:repeat(4,1fr); } }
.team-card{ border-top:1px solid var(--hairline-dark); padding-top:1.4rem; }
.team-card h3{ font-family:var(--serif); font-size:var(--fs-h3); font-weight:500; }
.team-card .role{ margin-top:.5rem; font-size:var(--fs-eyebrow); letter-spacing:.2em; text-transform:uppercase; color:var(--bronze); font-weight:600; }
.team-card p.bio{ margin-top:.9rem; font-size:var(--fs-small); color:var(--ink-soft); line-height:1.6; }

/* ---------- contact detail list ---------- */
.contact-dl{ display:grid; gap:1.5rem; }
.contact-dl dt{ font-size:var(--fs-eyebrow); letter-spacing:.22em; text-transform:uppercase; color:var(--stone); margin-bottom:.35rem; }
.contact-dl dd{ margin:0; font-family:var(--serif); font-size:var(--fs-h4); color:var(--ink); }
.contact-dl dd a{ text-decoration:none; }
.form-success{ font-family:var(--serif); }
.form-success .big{ font-size:var(--fs-h3); color:var(--ink); }

/* ---------- gallery aspect helpers already in base; extra tall tile ---------- */
.g-item.g-tall{ aspect-ratio:3/4; }
@media (min-width:48em){ .g-item.g-tall{ grid-column:span 2; aspect-ratio:3/4; } }