/* sections.css v3 — high contrast throughout */

/* ══ WHY US ══════════════════════════════════════════ */
#why {
  padding: 8rem 0;
  background: var(--ink-2);
  border-top: 1px solid rgba(212,168,67,0.1);
}
.why-grid { display:grid; grid-template-columns:1fr 2fr; gap:6rem; align-items:start; }
.why-sticky { position:sticky; top:7rem; }
.why-cards { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(212,168,67,0.08); }

.why-card {
  background: var(--ink-2);
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition: background var(--t-med);
}
.why-card:hover { background: var(--ink-3); }

/* Gold corner accent */
.why-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width var(--t-slow) var(--ease-out);
}
.why-card:hover::before { width: 100%; }

.why-icon { width:44px; height:44px; border:1px solid rgba(212,168,67,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; transition:border-color var(--t-med),background var(--t-med); }
.why-card:hover .why-icon { border-color:var(--gold); background:rgba(212,168,67,0.08); }
.why-icon svg { width:20px; height:20px; stroke:var(--gold); fill:none; stroke-width:1.5; }

.why-card h3 { font-family:var(--font-display); font-size:1.05rem; font-weight:600; color:var(--ice); margin-bottom:0.5rem; }
.why-card p  { font-size:0.8rem; line-height:1.7; color:var(--text); }

/* ══ PROCESS ══════════════════════════════════════════ */
#process {
  padding: 8rem 0;
  background: var(--ink);
  border-top: 1px solid rgba(212,168,67,0.1);
}
.process-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(212,168,67,0.08); margin-top:1rem; }

.process-step {
  background: var(--ink);
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
  transition: background var(--t-med);
}
.process-step:hover { background: var(--ink-3); }

/* Animated fill on hover */
.process-step::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 0;
  background: rgba(212,168,67,0.03);
  transition: height var(--t-slow) var(--ease-out);
}
.process-step:hover::after { height: 100%; }

.step-num { font-family:var(--font-display); font-size:4rem; font-weight:700; color:rgba(212,168,67,0.07); line-height:1; margin-bottom:1.5rem; }
.step-icon { width:40px; height:40px; border:1px solid rgba(212,168,67,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.step-icon svg { width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:1.5; }
.process-step h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:600; color:var(--ice); margin-bottom:0.6rem; }
.process-step p  { font-size:0.78rem; line-height:1.7; color:var(--text); position:relative; z-index:1; }

/* ══ EXPERIENCE ═══════════════════════════════════════ */
#experience {
  padding: 8rem 0;
  background: var(--ink-3);
  border-top: 1px solid rgba(212,168,67,0.1);
}
.exp-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.exp-list { display:flex; flex-direction:column; gap:2px; }

.exp-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--ink-2);
  border-left: 2px solid transparent;
  transition: border-color var(--t-med), background var(--t-med);
}
.exp-item:hover { border-left-color:var(--gold); background:var(--ink-4); }
.exp-num { font-family:var(--font-mono); font-size:0.62rem; color:var(--gold); letter-spacing:0.1em; flex-shrink:0; margin-top:3px; }
.exp-item h4 { font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--ice); margin-bottom:0.3rem; }
.exp-item p  { font-size:0.78rem; line-height:1.65; color:var(--text); }

/* Stats */
.exp-stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(212,168,67,0.08); }
.exp-stat { background:var(--ink-2); padding:2.5rem 2rem; }
.exp-stat-big { font-family:var(--font-display); font-size:3.2rem; font-weight:700; color:var(--gold-lt); line-height:1; display:block; }
.exp-stat-label { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-muted); margin-top:0.5rem; display:block; }
.exp-stat-sub { font-size:0.7rem; color:var(--text-faint); margin-top:0.25rem; line-height:1.5; }

/* ══ TESTIMONIALS ═════════════════════════════════════ */
#reviews {
  padding: 8rem 0;
  background: var(--ink);
  border-top: 1px solid rgba(212,168,67,0.1);
}
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(212,168,67,0.08); margin-top:1rem; }

.review-card {
  background: var(--ink);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: background var(--t-med);
}
.review-card:hover { background: var(--ink-3); }
.review-card::before {
  content: '\201C';
  position: absolute;
  top: 1rem; right: 1.5rem;
  font-family: var(--font-display);
  font-size: 5rem;
  color: rgba(212,168,67,0.07);
  line-height: 1;
  pointer-events: none;
}

.review-stars { display:flex; gap:3px; }
.star { width:10px; height:10px; background:var(--gold); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.review-text { font-family:var(--font-display); font-size:1rem; font-weight:400; font-style:italic; color:var(--ice); line-height:1.58; flex:1; }
.review-footer { display:flex; align-items:center; gap:0.75rem; padding-top:1.25rem; border-top:1px solid rgba(212,168,67,0.1); }
.review-avatar { width:36px; height:36px; border-radius:50%; background:var(--ink-4); border:1px solid rgba(212,168,67,0.25); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:0.85rem; font-weight:600; color:var(--gold-lt); flex-shrink:0; }
.review-name { font-size:0.82rem; font-weight:500; color:var(--ice); }
.review-origin { font-family:var(--font-mono); font-size:0.6rem; color:var(--text-faint); letter-spacing:0.1em; text-transform:uppercase; }

/* ══ LOCATION ══════════════════════════════════════════ */
#location {
  padding: 8rem 0;
  background: var(--ink-2);
  border-top: 1px solid rgba(212,168,67,0.1);
}
.location-layout { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }

.location-map {
  background: var(--ink-3);
  border: 1px solid rgba(212,168,67,0.15);
  aspect-ratio: 4/3;
  display: flex; align-items:center; justify-content:center;
  position: relative; overflow: hidden;
  transition: border-color var(--t-med);
}
.location-map:hover { border-color: rgba(212,168,67,0.35); }
.location-map::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(212,168,67,0.1) 1px, transparent 1px); background-size:28px 28px; }

.map-inner { text-align:center; position:relative; z-index:2; }
.map-pin-anim { display:inline-block; animation:mapBounce 2.2s ease-in-out infinite; }
@keyframes mapBounce { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-12px) scale(1.05);} }
.map-address { margin-top:1rem; font-family:var(--font-display); font-size:1rem; font-weight:500; color:var(--gold-lt); line-height:1.5; }
.map-city { font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--text-faint); margin-top:4px; }

/* Delivery zones */
.delivery-zones { display:flex; flex-direction:column; gap:2px; margin-bottom:2.5rem; }
.zone { display:flex; align-items:center; gap:1rem; padding:0.9rem 1.25rem; background:var(--ink-3); border-left:2px solid transparent; transition:border-color var(--t-med),background var(--t-med); }
.zone:hover { border-left-color:var(--gold); background:var(--ink-4); }
.zone-dot { width:5px; height:5px; background:var(--gold); border-radius:50%; flex-shrink:0; }
.zone-name { font-size:0.82rem; font-weight:500; color:var(--ice); }
.zone-note { font-family:var(--font-mono); font-size:0.6rem; color:var(--text-faint); margin-left:auto; letter-spacing:0.08em; }

.contact-direct { display:flex; flex-direction:column; gap:0.75rem; padding:2rem; background:rgba(212,168,67,0.05); border:1px solid rgba(212,168,67,0.18); }
.contact-direct-label { font-family:var(--font-mono); font-size:0.58rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); }
.contact-phone { font-family:var(--font-display); font-size:1.7rem; font-weight:600; color:var(--ice); transition:color var(--t-fast); }
.contact-phone:hover { color:var(--gold-lt); }
.contact-email { font-size:0.82rem; color:var(--text-muted); transition:color var(--t-fast); }
.contact-email:hover { color:var(--gold-lt); }

/* ══ FAQ ═══════════════════════════════════════════════ */
#faq {
  padding: 8rem 0;
  background: var(--ink);
  border-top: 1px solid rgba(212,168,67,0.1);
}
.faq-layout { display:grid; grid-template-columns:1fr 2fr; gap:6rem; }
.faq-list { display:flex; flex-direction:column; gap:1px; }

.faq-item { background:var(--ink-2); border-left:2px solid transparent; transition:border-color var(--t-med); overflow:hidden; }
.faq-item.open { border-left-color:var(--gold); background:var(--ink-3); }

.faq-q { display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; cursor:pointer !important; gap:1rem; user-select:none; }
.faq-q span { font-size:0.88rem; font-weight:500; color:var(--ice); }
.faq-toggle { width:22px; height:22px; border:1px solid rgba(212,168,67,0.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background var(--t-fast),border-color var(--t-fast); }
.faq-toggle svg { width:10px; height:10px; stroke:var(--gold); fill:none; stroke-width:2; transition:transform var(--t-med); }
.faq-item.open .faq-toggle { background:var(--gold); border-color:var(--gold); }
.faq-item.open .faq-toggle svg { stroke:var(--ink); transform:rotate(45deg); }

.faq-a { max-height:0; overflow:hidden; transition:max-height var(--t-slow) var(--ease-out); padding:0 1.5rem; }
.faq-item.open .faq-a { max-height:300px; padding:0 1.5rem 1.25rem; }
.faq-a p { font-size:0.8rem; line-height:1.72; color:var(--text); }

/* ══ CTA BAND ══════════════════════════════════════════ */
#cta-band {
  padding: 7rem 0;
  background: linear-gradient(135deg, var(--gold-dk) 0%, var(--gold) 50%, var(--gold-lt) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}
#cta-band::before {
  content: 'RESERVE';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-family: var(--font-display);
  font-size: 14rem; font-weight: 900;
  color: rgba(0,0,0,0.06);
  white-space: nowrap;
  letter-spacing: 0.08em;
  pointer-events: none;
}
#cta-band .label { color:rgba(8,8,10,0.55); margin-bottom:1rem; }
#cta-band .display-lg { color:var(--ink); margin:0.6rem auto 2.5rem; max-width:560px; }
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--gold-lt);
  padding: 1rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  position: relative; overflow: hidden;
  transition: background var(--t-med), box-shadow var(--t-med);
}
.btn-dark:hover { background: var(--ink-3); box-shadow: 0 8px 32px rgba(0,0,0,0.35); }

.btn-dark-outline {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--ink);
  padding: 1rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid rgba(8,8,10,0.4);
  transition: background var(--t-med);
}
.btn-dark-outline:hover { background: rgba(8,8,10,0.1); }

/* ══ FOOTER ════════════════════════════════════════════ */
footer {
  background: var(--ink-2);
  border-top: 1px solid rgba(212,168,67,0.15);
  padding: 5rem var(--pad-x) 2rem;
}
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(212,168,67,0.08); margin-bottom:2rem; }
.footer-brand-name { font-family:var(--font-display); font-size:1.05rem; font-weight:700; color:var(--gold-lt); display:block; margin-bottom:0.25rem; }
.footer-brand-tag { font-family:var(--font-mono); font-size:0.5rem; letter-spacing:0.32em; text-transform:uppercase; color:var(--text-faint); display:block; margin-bottom:1rem; }
.footer-desc { font-size:0.78rem; line-height:1.72; color:var(--text-muted); max-width:240px; }
.footer-col h5 { font-family:var(--font-mono); font-size:0.56rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-bottom:1.25rem; }
.footer-col ul { display:flex; flex-direction:column; gap:0.6rem; }
.footer-col li { font-size:0.76rem; color:var(--text-muted); line-height:1.5; }
.footer-col li a { transition:color var(--t-fast); }
.footer-col li a:hover { color:var(--gold-lt); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.75rem; }
.footer-bottom p { font-family:var(--font-mono); font-size:0.6rem; color:var(--text-faint); letter-spacing:0.08em; }

/* ══ RESPONSIVE ════════════════════════════════════════ */
@media (max-width:1024px) {
  .why-grid { grid-template-columns:1fr; gap:3rem; }
  .why-sticky { position:static; }
  .process-steps { grid-template-columns:1fr 1fr; }
  .exp-layout { grid-template-columns:1fr; gap:3rem; }
  .reviews-grid { grid-template-columns:1fr 1fr; }
  .faq-layout { grid-template-columns:1fr; gap:2rem; }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  #why,#process,#experience,#reviews,#location,#faq,#cta-band { padding:5rem 0; }
  .why-cards { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:1fr; }
  .reviews-grid { grid-template-columns:1fr; }
  .location-layout { grid-template-columns:1fr; gap:3rem; }
  .footer-top { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .exp-stats { grid-template-columns:1fr 1fr; }
  #cta-band::before { font-size:5rem; }
}