/* ============================================
   Глория Дент — shared editorial styles
   Playfair Display + Manrope, gold + graphite
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --gold:          #c4a261;
  --gold-deep:     #a8864a;
  --gold-soft:     #e8d9b8;
  --gold-wash:     #f7f1e4;

  --ink:           #1f1f1f;
  --graphite:      #2c2c2c;
  --footer-head:#404040;
  --muted:         #6b6b6b;
  --line:          #d9d6d0;
  --line-soft:     #e8e5df;

  --bg:            #ffffff;
  --bg-warm:       #faf8f4;
  --bg-grey:       #f0f0f0;
  --bg-grey-2:     #e6e4df;

  --danger:        #b44a3a;

  --serif: 'Playfair Display', 'Times New Roman', serif;
  --sans:  'Manrope', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0 }
html,body{ background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased }
body{ font-size:16px; line-height:1.55 }
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit }

:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition-duration:.01ms!important; animation-duration:.01ms!important }
}

.wrap{ max-width:1240px; margin:0 auto; padding:0 32px }

/* ---- Skip link ---- */
.skip-link{
  position:absolute; left:16px; top:-100px; z-index:9999;
  background:var(--ink); color:#fff; padding:12px 20px;
  font-size:14px; font-weight:600; letter-spacing:.04em;
  text-decoration:none; transition:top .2s;
}
.skip-link:focus{ top:16px }

/* ---- TOP BAR ---- */
.topbar{ border-bottom:1px solid var(--line-soft); background:#fff; position:sticky; top:0; z-index:10 }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; height:88px; gap:24px }
.logo{ height:52px; width:auto }
nav.main{ display:flex; gap:32px }
nav.main a{ font-size:14px; letter-spacing:.02em; color:var(--graphite); font-weight:500; padding:6px 0; position:relative }
nav.main a:hover{ color:var(--gold-deep) }
nav.main a.active{ color:var(--gold-deep) }
nav.main a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--gold) }

.top-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--gold-deep); color:#fff; font-weight:600; font-size:14px;
  padding:12px 22px; border-radius:2px; letter-spacing:.02em;
  transition:background .2s;
}
.top-cta:hover{ background:var(--ink) }
.top-cta svg{ width:14px; height:14px }

.burger{
  display:none; flex-direction:column; gap:5px; padding:13px 10px;
  background:none; border:none; cursor:pointer; border-radius:4px;
  min-width:44px; min-height:44px; align-items:center; justify-content:center;
}
.burger:hover{ background:var(--bg-warm) }
.burger span{ width:22px; height:2px; background:var(--graphite); display:block; border-radius:1px }

/* ---- MOBILE MENU ---- */
.mobile-menu{
  display:none; position:fixed; inset:0; background:#fff; z-index:100;
  padding:24px 28px; overflow-y:auto; flex-direction:column;
}
.mobile-menu.open{ display:flex }
.mobile-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:32px }
.mobile-menu-top .logo{ height:40px }
.mobile-menu-close{
  background:none; border:none; font-size:28px; color:var(--graphite);
  cursor:pointer; line-height:1; padding:10px;
  min-width:44px; min-height:44px;
  display:flex; align-items:center; justify-content:center;
}
.mobile-menu nav a{
  display:block; padding:16px 0; font-size:18px; color:var(--ink); font-weight:500;
  border-bottom:1px solid var(--line-soft);
}
.mobile-menu nav a.active{ color:var(--gold-deep) }

/* ---- SHARED PAGE-HERO (light) ---- */
.page-hero{
  background:var(--bg-grey);
  padding:72px 0 64px;
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 85% 20%, rgba(196,162,97,.08), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(196,162,97,.05), transparent 45%);
}
.page-hero .wrap{ position:relative; z-index:1 }

.breadcrumb{
  display:flex; gap:8px; align-items:center;
  font-size:13px; color:var(--muted); margin-bottom:24px; letter-spacing:.02em;
  flex-wrap:wrap;
}
.breadcrumb a{ color:var(--graphite) }
.breadcrumb a:hover{ color:var(--gold-deep) }
.breadcrumb .sep{ color:var(--line) }

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin-bottom:24px;
}
.eyebrow .bar{ width:32px; height:1px; background:var(--gold) }

.page-hero h1{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(40px, 5.5vw, 68px);
  line-height:1.05; letter-spacing:-.01em; color:var(--ink);
  max-width:900px; margin-bottom:20px;
}
.page-hero h1 em{ font-style:italic; color:var(--gold-deep); font-weight:500 }
.page-hero .lead{
  font-size:18px; color:var(--muted); max-width:620px; line-height:1.55;
}

/* ---- SECTION ---- */
.section{ padding:104px 0 }
.section-head{
  margin-bottom:56px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.section-head h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(30px, 3.2vw, 44px); line-height:1.1; letter-spacing:-.01em;
  color:var(--ink);
}
.section-head h2 em{ font-style:italic; color:var(--gold-deep); font-weight:500 }
.section-head .sub{ font-size:15px; color:var(--muted); max-width:380px; line-height:1.6 }

.label{
  display:inline-block;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:600; margin-bottom:14px;
}

.section-cta{ text-align:center; margin-top:48px }

/* ---- BUTTONS ---- */
.btn-gold{
  background:var(--gold-deep); color:#fff; padding:18px 32px;
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:12px;
  transition:background .2s; border:none; cursor:pointer; font-family:inherit;
}
.btn-gold:hover{ background:var(--ink); color:#fff }
.btn-gold svg{ width:14px; height:14px }

.btn-line{
  background:transparent; color:var(--graphite); padding:18px 32px;
  border:1px solid var(--line);
  font-size:13px; font-weight:600; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:10px;
  transition:all .2s;
}
.btn-line:hover{ border-color:var(--gold-deep); color:var(--gold-deep) }

.btn-dark{
  background:var(--graphite); color:#fff; padding:18px 32px;
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:12px;
  transition:background .2s;
}
.btn-dark:hover{ background:#000 }
.btn-dark svg{ width:14px; height:14px }

.btn-ghost{
  background:transparent; color:#fff; padding:18px 32px;
  border:1px solid rgba(255,255,255,.3);
  font-size:13px; font-weight:600; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:10px;
  transition:all .2s;
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold) }

/* ---- CTA STRIP (dark block) ---- */
.cta-strip{
  background:var(--graphite); color:#fff; padding:80px 0;
  position:relative; overflow:hidden;
}
.cta-strip::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 80% 50%, rgba(196,162,97,.16), transparent 55%);
}
.cta-inner{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:center;
  gap:32px; flex-wrap:wrap;
}
.cta-inner .t h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(28px,3vw,42px); line-height:1.1; letter-spacing:-.01em;
  margin-bottom:12px; color:#fff;
}
.cta-inner .t h2 em{ color:var(--gold); font-style:italic }
.cta-inner .t p{ color:rgba(255,255,255,.65); font-size:15px; max-width:480px; line-height:1.6 }
.cta-inner .act{ display:flex; gap:14px; flex-wrap:wrap }
.cta-inner .btn-gold{ background:var(--gold); color:#fff }
.cta-inner .btn-gold:hover{ background:var(--gold-deep) }

/* ---- FAQ (grid-template-rows accordion) ---- */
.faq-list{ max-width:860px; margin:0 auto; border-top:1px solid var(--line-soft) }
.faq-item{ border-bottom:1px solid var(--line-soft) }
.faq-q{
  width:100%; background:none; border:none; cursor:pointer;
  padding:28px 0; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--serif); font-size:20px; font-weight:500; color:var(--ink);
  letter-spacing:-.005em; line-height:1.3;
  transition:color .2s;
}
.faq-q:hover{ color:var(--gold-deep) }
.faq-toggle{
  width:32px; height:32px; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:var(--gold-deep);
  transition:transform .3s cubic-bezier(.4,0,.2,1), background .2s;
  font-family:var(--sans); font-size:16px; font-weight:400;
}
.faq-item.open .faq-toggle{ transform:rotate(45deg); background:var(--gold-wash) }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1) }
.faq-a > div{ min-height:0; overflow:hidden }
.faq-a p{
  font-family:var(--sans); font-size:15px; color:var(--muted); line-height:1.7;
  padding-bottom:0; max-width:72ch;
  transition:padding-bottom .35s cubic-bezier(.4,0,.2,1);
}
.faq-item.open .faq-a{ grid-template-rows:1fr }
.faq-item.open .faq-a p{ padding-bottom:28px }

/* ---- FOOTER ---- */
footer.site-footer{ background:var(--bg-grey); padding:80px 0 32px; border-top:1px solid var(--line-soft) }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; margin-bottom:64px }
.footer-brand img{ height:44px; margin-bottom:22px; filter:contrast(1.05); width:auto }
.footer-brand p{ font-size:14px; color:var(--muted); line-height:1.6; max-width:320px }
footer.site-footer h4{
  font-size:14px; color:var(--footer-head); font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:22px; font-family:var(--sans);
}
footer.site-footer ul{ list-style:none; display:flex; flex-direction:column; gap:12px }
footer.site-footer ul a{ font-size:14px; color:var(--graphite) }
footer.site-footer ul a:hover{ color:var(--gold-deep) }
footer.site-footer .contact-li{ font-size:14px; color:var(--graphite); display:flex; flex-direction:column; gap:4px }
footer.site-footer .contact-li strong{ color:var(--ink); font-weight:500 }
footer.site-footer .contact-li .small{ font-size:12px; color:var(--muted) }

.footer-bottom{
  border-top:1px solid var(--line); padding-top:28px;
  display:flex; justify-content:space-between; align-items:center;
  gap:24px; flex-wrap:wrap; font-size:12px; color:var(--muted); letter-spacing:.02em;
}
.footer-bottom a{ color:var(--muted) }
.footer-bottom a:hover{ color:var(--graphite) }
.socials{ display:flex; gap:12px }
.socials a{
  width:44px; height:44px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--footer-head);
  transition:all .2s;
}
.socials a:hover{ border-color:var(--gold); color:var(--gold-deep); background:#fff }
.socials svg{ width:16px; height:16px; fill:currentColor }

/* ---- RESPONSIVE (global) ---- */
@media (max-width: 980px){
  nav.main{ display:none }
  .burger{ display:flex }
  .page-hero{ padding:56px 0 48px }
  .section{ padding:72px 0 }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns:1fr }
  .wrap{ padding:0 22px }
  .top-cta span{ display:none }
  .top-cta{ padding:12px }
}