/* ============================================================
   Guest palette, adopted by the owner-facing pages.
   Loaded AFTER assets/css/styles.css, which is shared by every
   owner page and is left untouched. Only pages that link this
   file change; layout, copy and components are unchanged.
   ============================================================ */

:root{
  /* neutrals: same tonal roles, warm cast removed, values from the guest system */
  --ink:#19191e; --ink-mid:#3a3a3f; --ink-soft:#757578; --ink-mute:#8c8c8e;
  --cream:#ffffff;        /* the guest ground is white, not cream */
  --cream-deep:#deded9;   /* hairline (see band overrides below for its surface uses) */
  --rule:#deded9;         /* was gold-tinted */
  --rule-hard:#deded9;    /* was gold-tinted */
  --white:#fff;
  --gold:#B8995A;         /* unchanged; the guest page reserves it for eyebrow labels */
  --gold-light:#B8995A;
  --gold-pale:#f6f6f5;
  --green:#1b1a16; --green-pale:#f6f6f5;
  --grey:#f6f6f5;
}

/* ---- ground and type: the guest pairing, Cormorant display over Inter text ---- */
body{background:var(--white);font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif}
.site-header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--rule)}
.nav{background:rgba(255,255,255,.98)}

/* ---- logo: one colour, guest wordmark spacing ---- */
.logo{font-size:17px;letter-spacing:.28em;font-weight:400;color:var(--ink)}
.logo span{color:inherit}
.nav a{color:var(--ink)}
.nav a:hover,.nav a.active{color:var(--ink-soft)}
.dropdown>a::after{color:var(--ink-mute)}
.dropdown-menu a:hover{background:var(--grey)}

/* ---- the cursive: headline italics keep the emphasis, lose the gold ---- */
.hero h1 em,.cta-band h2 em,.premium-h em,h2.section-h em,
.page-hero h1 em,.article-cta-box h2 em{color:inherit}

/* ---- buttons: the guest system, monochrome and sentence case ---- */
.cta-btn{background:transparent;color:var(--ink);border:1px solid var(--rule);border-radius:6px;
  font-family:inherit;font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;padding:12px 17px}
.cta-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.cta-btn.gold{background:var(--ink);border-color:var(--ink);color:var(--white)}
.cta-btn.gold:hover{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta-btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.cta-btn.ghost:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.cta-btn.light{background:var(--white);border-color:var(--white);color:var(--ink)}
.cta-btn.light:hover{background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.86);color:var(--ink)}
.cta-btn.lg{padding:15px 24px;font-size:15px}
/* On every dark surface the CTAs invert to white, exactly as they do on the
   guest page. Covers the bare .cta-btn too, which would otherwise be ink on ink. */
.hero .cta-btn,.cta-band .cta-btn,.section.dark .cta-btn{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.hero .cta-btn:hover,.cta-band .cta-btn:hover,.section.dark .cta-btn:hover{
  background:#fff;color:var(--ink);border-color:#fff}
.hero .cta-btn.gold,.cta-band .cta-btn.gold,.section.dark .cta-btn.gold,
.hero .cta-btn.light,.cta-band .cta-btn.light,.section.dark .cta-btn.light{
  background:#fff;border-color:#fff;color:var(--ink)}
.hero .cta-btn.gold:hover,.cta-band .cta-btn.gold:hover,.section.dark .cta-btn.gold:hover,
.hero .cta-btn.light:hover,.cta-band .cta-btn.light:hover,.section.dark .cta-btn.light:hover{
  background:rgba(255,255,255,.86);border-color:rgba(255,255,255,.86);color:var(--ink)}

/* ---- pills and tags: the guest tag treatment ---- */
.tl-pill{background:var(--grey);color:var(--ink-mute);border:1px solid var(--rule);border-radius:4px;
  font-size:10px;letter-spacing:1.2px;padding:6px 12px}
.tl-item.gold .tl-pill{background:var(--ink);border-color:var(--ink);color:var(--white)}
.tl-item.gold .tl-dot{background:var(--ink)}

/* ---- cream-deep was doing double duty; these used it as a surface, not a line ---- */
.section.deep{background:var(--grey)}
.article-card .thumb{background:var(--grey)}
.estimate-result{background:var(--grey)}
.field input,.field select,.field textarea{background:var(--white);border-color:var(--rule)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}

/* ---- the deep CTA band takes the guest dark ---- */
.cta-band{background:#0e0d0a}

/* ---- interactive accents that were gold fills ---- */
.door:hover,.door.open{background:var(--grey);border-color:var(--rule)}
.doors .door-panel.open{border-color:var(--rule)}
.panel-bullets li::before{background:var(--ink-mute)}
.footer-col h4{color:var(--ink-mute)}
.footer-col a:hover{color:var(--ink)}

/* ---- inline prose links: the guest treatment is ink text with a gold underline,
        not gold text. Also lifts these from 2.7:1 to 16.8:1. ---- */
.faq-item .faq-body a,.num-range a{color:inherit;border-bottom-color:var(--gold)}

/* ---- the ribbon: match the guest header's geometry and typography ---- */
.header-inner{height:56px}
@media screen and (min-width:768px){.header-inner{height:64px}}
@media screen and (min-width:1025px){.header-inner{height:80px}}
.logo{font-size:15px;letter-spacing:.28em;font-weight:400}
@media screen and (min-width:1025px){.logo{font-size:17px}}
.nav{gap:28px}
.nav a{font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink)}
/* header CTAs are outlined on the guest ribbon, not filled */
.site-header .cta-btn,.site-header .cta-btn.gold{background:transparent;color:var(--ink);
  border:1px solid var(--rule);padding:9px 15px;font-size:13px}
.site-header .cta-btn:hover,.site-header .cta-btn.gold:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}

/* ---- the cursive: the guest page sets no italic in display type ---- */
.hero h1 em,.cta-band h2 em,.premium-h em,h2.section-h em,
.page-hero h1 em,.article-cta-box h2 em,.section-h em,h1 em,h2 em{font-style:normal}

/* ---- ribbon layout: the guest header is logo | nav | CTAs, with the nav taking
        the middle. Here the CTAs sit inside .nav, so the whole group was bunched
        against the right edge. Let the nav claim the free space and push the
        CTAs off to their own group. ---- */
.nav{flex:1;justify-content:flex-start;margin-left:40px}
.nav .cta-btn.ghost{margin-left:auto}
.nav .cta-btn+.cta-btn{margin-left:-16px}
@media screen and (max-width:1024px){
  .nav{flex:none;margin-left:0}
  .nav .cta-btn.ghost{margin-left:0}
  .nav .cta-btn+.cta-btn{margin-left:0}
}