/* =====================================================
   ESTATE DESIGN & CONSTRUCTION — Rebuild Guides
   Scoped under .guide — nothing here leaks into other pages.
   Loads after style.css / upgrade.css.
   ===================================================== */

:root {
  --guide-accent:       #b8965a;   /* site --gold */
  --guide-accent-light: #d4b483;   /* site --gold-light */
  --guide-accent-dark:  #8a6d3b;   /* site --gold-dark */
  --guide-ink:          #111111;   /* site --dark */
  --guide-body:         #4a4a4a;   /* site --grey */
  --guide-tint:         #f5f4f2;   /* site --grey-light */
}

.guide {
  font-family: 'Jost', sans-serif;
  color: var(--guide-body);
  background: #ffffff;
}

/* Larger logo on guide pages — same sizing as the homepage */
#navbar .nav-logo img { height: 72px; }
#navbar.scrolled .nav-logo img { height: 60px; }
@media (max-width: 768px) {
  #navbar .nav-logo img { height: 58px; }
  #navbar.scrolled .nav-logo img { height: 50px; }
}

/* ---------- Dark hero band (clears the fixed transparent navbar) ---------- */
.guide .guide-hero {
  position: relative;
  background:
    radial-gradient(58% 46% at 50% 0%, rgba(212,180,131,0.14) 0%, transparent 62%),
    linear-gradient(180deg, #14110d 0%, #100d0a 60%, #15110c 100%);
  padding: 190px 0 74px;
  margin-bottom: 0;
}
.guide .guide-hero__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}
.guide .guide-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  line-height: 1.08;
  color: #F4F1EA;
  margin: 0 0 20px;
}
.guide .guide__deck {
  font-size: 1.12rem;
  line-height: 1.75;
  color: rgba(244,241,234,0.72);
  max-width: 700px;
  margin: 0 0 22px;
}
.guide .guide__meta {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.45);
  margin: 0;
}

/* Breadcrumbs (inside the hero) */
.guide .guide__crumbs {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244,241,234,0.45);
  margin-bottom: 26px;
}
.guide .guide__crumbs a { color: rgba(244,241,234,0.6); transition: color 0.3s ease; }
.guide .guide__crumbs a:hover { color: var(--guide-accent-light); }
.guide .guide__crumbs span { color: var(--guide-accent-light); }

/* ---------- Article body ---------- */
.guide .guide__body {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 24px 40px;
}
.guide .guide__body section { margin: 44px 0 56px; }

.guide .guide__body h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  line-height: 1.2;
  color: var(--guide-ink);
  margin: 0 0 10px;
  padding-top: 14px;
}
.guide .guide__body h2::after {
  content: '';
  display: block;
  width: 52px;
  height: 2px;
  margin: 16px 0 22px;
  background: linear-gradient(90deg, var(--guide-accent-light), var(--guide-accent));
  border-radius: 2px;
}
.guide .guide__body h3 {
  font-family: 'Jost', sans-serif;
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--guide-ink);
  margin: 34px 0 10px;
}
.guide .guide__body p {
  font-size: 1.02rem;
  line-height: 1.85;
  margin: 0 0 18px;
}
.guide .guide__body a {
  color: var(--guide-accent-dark);
  text-decoration: underline;
  text-decoration-color: rgba(184,150,90,0.4);
  text-underline-offset: 3px;
  transition: color 0.3s ease;
}
.guide .guide__body a:hover { color: var(--guide-accent); }
.guide .guide__body strong { color: var(--guide-ink); }
.guide .guide__body em { font-style: italic; }

.guide .guide__body ul,
.guide .guide__body ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
.guide .guide__body ul { list-style: none; }
.guide .guide__body ul > li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 14px;
  line-height: 1.8;
}
.guide .guide__body ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--guide-accent);
}
.guide .guide__body ol { list-style: decimal; }
.guide .guide__body ol > li {
  padding-left: 8px;
  margin-bottom: 14px;
  line-height: 1.8;
}
.guide .guide__body ol > li::marker {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  color: var(--guide-accent);
}

/* ---------- Callouts ---------- */
.guide .callout {
  background: var(--guide-tint);
  border-left: 3px solid var(--guide-accent);
  border-radius: 12px;
  padding: 26px 30px;
  margin: 26px 0;
}
.guide .callout p { margin: 0 0 14px; }
.guide .callout p:last-child { margin-bottom: 0; }
.guide .callout--warn {
  background: #faf5ec;
  border-left-color: var(--guide-accent-dark);
}

/* ---------- Cost table ---------- */
.guide .cost-table {
  width: 100%;
  border-collapse: collapse;
  margin: 26px 0;
  font-size: 0.96rem;
  line-height: 1.6;
}
.guide .cost-table th,
.guide .cost-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(17,17,17,0.1);
  vertical-align: top;
}
.guide .cost-table thead th {
  background: var(--guide-ink);
  color: #F4F1EA;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: none;
}
.guide .cost-table thead th:first-child { border-radius: 10px 0 0 0; }
.guide .cost-table thead th:last-child { border-radius: 0 10px 0 0; }
.guide .cost-table tbody tr:nth-child(even) { background: var(--guide-tint); }
.guide .cost-table td:nth-child(2) {
  white-space: nowrap;
  font-weight: 600;
  color: var(--guide-accent-dark);
}
@media (max-width: 640px) {
  .guide .cost-table { display: block; overflow-x: auto; }
}

/* ---------- FAQ ---------- */
.guide .faq__item {
  border-bottom: 1px solid rgba(17,17,17,0.1);
}
.guide .faq__item summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--guide-ink);
  padding: 20px 44px 20px 0;
  transition: color 0.3s ease;
}
.guide .faq__item summary::-webkit-details-marker { display: none; }
.guide .faq__item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--guide-accent);
  transition: transform 0.3s ease;
}
.guide .faq__item[open] summary { color: var(--guide-accent-dark); }
.guide .faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.guide .faq__item summary:hover { color: var(--guide-accent-dark); }
.guide .faq__item > div { padding: 0 0 22px; }
.guide .faq__item > div p { margin: 0 0 12px; }

/* ---------- CTA band ---------- */
.guide .guide-cta {
  position: relative;
  background:
    radial-gradient(58% 50% at 50% 0%, rgba(212,180,131,0.13) 0%, transparent 62%),
    linear-gradient(180deg, #14110d 0%, #100d0a 100%);
  border-radius: 16px;
  padding: 54px 48px;
  margin: 60px 0 30px;
  text-align: center;
}
.guide .guide-cta h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: #F4F1EA;
  margin: 0 0 16px;
}
.guide .guide-cta p {
  color: rgba(244,241,234,0.72);
  font-size: 1.02rem;
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto 16px;
}
.guide .guide-cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px auto 26px !important;
}
.guide .guide-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 40px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s ease;
}
.guide .guide-cta .btn--primary {
  background: var(--guide-accent);
  color: #ffffff;
  border-color: var(--guide-accent);
}
.guide .guide-cta .btn--primary:hover {
  background: var(--guide-accent-dark);
  border-color: var(--guide-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(184,150,90,0.35);
}
.guide .guide-cta .btn--ghost {
  background: transparent;
  color: #F4F1EA;
  border-color: rgba(244,241,234,0.5);
}
.guide .guide-cta .btn--ghost:hover {
  background: #F4F1EA;
  color: var(--guide-ink);
  border-color: #F4F1EA;
  transform: translateY(-2px);
}
.guide .guide-cta__lic {
  font-size: 0.85rem !important;
  color: rgba(244,241,234,0.5) !important;
  max-width: 560px !important;
}
.guide .guide-cta__lic a { color: var(--guide-accent-light); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Disclaimer ---------- */
.guide .guide__disclaimer {
  background: var(--guide-tint);
  border-radius: 12px;
  padding: 26px 30px;
  margin-top: 40px !important;
}
.guide .guide__disclaimer h2 {
  font-family: 'Jost', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--guide-ink);
  padding-top: 0;
}
.guide .guide__disclaimer h2::after { display: none; }
.guide .guide__disclaimer p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--guide-body);
  margin: 12px 0 0;
}

/* ---------- Hub page (rebuild/index.html) ---------- */
.guide .hub-intro { max-width: 760px; }
.guide .hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 36px 0 10px;
}
.guide .hub-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(17,17,17,0.1);
  border-radius: 14px;
  padding: 32px 30px 28px;
  text-decoration: none !important;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.guide .hub-card:hover {
  transform: translateY(-5px);
  border-color: rgba(184,150,90,0.55);
  box-shadow: 0 18px 45px -20px rgba(17,17,17,0.25);
}
.guide .hub-card__kicker {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--guide-accent-dark);
  margin-bottom: 12px;
}
.guide .hub-card h2,
.guide .hub-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.22;
  color: var(--guide-ink);
  margin: 0 0 12px;
  padding-top: 0;
}
.guide .hub-card h2::after { display: none; }
.guide .hub-card p {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--guide-body);
  margin: 0 0 18px;
}
.guide .hub-card__more {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--guide-accent-dark);
}
.guide .hub-card:hover .hub-card__more { color: var(--guide-accent); }

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .guide .guide-hero { padding: 150px 0 54px; }
  .guide .guide__body { padding: 18px 20px 32px; }
  .guide .guide__body section { margin: 36px 0 44px; }
  .guide .guide-cta { padding: 42px 26px; border-radius: 14px; }
  .guide .hub-grid { grid-template-columns: 1fr; }
}