/* =========================================================
   EASY-QUOTES — "Concierge" luxury theme
   Palette: deep navy + brass/gold, jewel-tone verticals
   Type: Fraunces (display) / Inter (body & UI)
   ========================================================= */
:root{
  /* base */
  --void:#050b16;
  --navy-deep:#0a1830;
  --navy:#122446;
  --navy-soft:#1b3054;
  --ink:#1b2233;
  --muted:#5b6474;
  --muted-dark:#94a1b8;
  --line:#e4e2d8;
  --paper:#fffdf9;
  --panel:#faf7ef;
  --cream:#f4efe1;

  /* brass / gold */
  --gold:#c9a24a;
  --gold-bright:#e8cd8a;
  --gold-dim:#8a743a;
  --gold-line:rgba(201,162,74,.38);

  /* live accent — swapped per vertical by JS */
  --accent:#8B5E3C;
  --accent-soft:#8B5E3C33;

  --radius:16px;
  --radius-sm:10px;
  --shadow-lux:0 20px 60px rgba(5,11,22,.35);
  --shadow-soft:0 10px 30px rgba(21,41,81,.10);

  --font-display:"Fraunces","Iowan Old Style","Georgia",serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  font-family:var(--font-body);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
body{
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}
img,svg{max-width:100%;height:auto;}
a{color:inherit;}
::selection{background:var(--gold-bright);color:var(--navy-deep);}

/* reveal-on-scroll utility */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.reveal.is-visible{opacity:1;transform:none;}

/* ===================== HEADER ===================== */
.site-header{
  background:linear-gradient(180deg,var(--void),var(--navy-deep));
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--gold-line);
  box-shadow:0 12px 30px rgba(5,11,22,.25);
}
.header-inner{
  max-width:1180px;
  margin:0 auto;
  padding:18px 28px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo{display:flex;align-items:center;gap:2px;}
.logo svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));}
.logo-text{display:flex;flex-direction:column;line-height:1.15;}
.logo-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:24px;
  letter-spacing:.3px;
  color:var(--cream);
}
.logo-sub{
  font-size:10.5px;
  letter-spacing:2px;
  color:var(--gold);
  font-weight:700;
  margin-top:6px;
}
.phone-btn{
  background:transparent;
  color:var(--gold-bright);
  font-weight:700;
  font-size:14px;
  padding:11px 22px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  border:1.5px solid var(--gold-line);
  transition:transform .2s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.phone-btn:hover{
  background:var(--gold);
  color:var(--navy-deep);
  border-color:var(--gold);
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(201,162,74,.35);
}

/* ---- Vertical tab nav (editorial underline style) ---- */
.quote-nav{
  max-width:1180px;
  margin:0 auto;
  padding:6px 28px 0;
  display:flex;
  gap:26px;
  position:relative;
  overflow-x:auto;
  scrollbar-width:none;
  border-top:1px solid rgba(255,255,255,.06);
}
.quote-nav::-webkit-scrollbar{display:none;}
.nav-tab{
  --tab-accent:#8B5E3C;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
  border:none;
  background:transparent;
  color:var(--muted-dark);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:16px 2px;
  cursor:pointer;
  transition:color .2s ease;
  white-space:nowrap;
  position:relative;
}
.nav-tab .tab-icon svg{width:15px;height:15px;fill:currentColor;opacity:.85;}
.nav-tab:hover{color:var(--gold-bright);}
.nav-tab.active{color:#fff;}
.nav-tab.active .tab-icon svg{fill:var(--tab-accent);opacity:1;}
.nav-indicator{
  display:block;
  position:absolute;
  bottom:0;
  height:2.5px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold-bright));
  transition:left .35s cubic-bezier(.65,0,.35,1), width .35s cubic-bezier(.65,0,.35,1);
  box-shadow:0 0 12px rgba(201,162,74,.7);
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  background:radial-gradient(120% 160% at 85% -10%, var(--navy-soft) 0%, var(--navy-deep) 45%, var(--void) 100%);
  padding:76px 28px 64px;
  overflow:hidden;
  isolation:isolate;
}
.hero::before{ /* fine gold guilloché-like texture */
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(115deg, rgba(201,162,74,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(25deg, rgba(201,162,74,.04) 0 1px, transparent 1px 34px);
  pointer-events:none;
}
.hero-inner{
  max-width:1180px;
  margin:0 auto;
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:center;
  gap:24px;
}
.hero-copy{position:relative;z-index:2;}
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  font-weight:700;
  color:var(--gold);
  margin-bottom:18px;
}
.hero-eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);display:inline-block;}
.hero h1{
  font-family:var(--font-display);
  font-size:50px;
  line-height:1.08;
  margin:0 0 12px;
  font-weight:600;
  letter-spacing:-0.3px;
  color:#fff;
}
.hero h2{
  font-family:var(--font-display);
  font-size:21px;
  font-style:italic;
  margin:0 0 26px;
  font-weight:500;
  color:var(--gold-bright);
}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;}
.hero-badges .badge{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
  border-radius:999px;
  padding:8px 16px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.3px;
  color:var(--muted-dark);
  display:flex;
  align-items:center;
  gap:7px;
}
.hero-badges .badge svg{width:13px;height:13px;stroke:var(--gold);flex:0 0 auto;}

/* ---- Signature emblem ---- */
.hero-emblem-wrap{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:280px;
}
.hero-emblem{
  position:relative;
  width:280px;
  height:280px;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));
}
.emblem-svg{width:100%;height:100%;overflow:visible;}
.emblem-ring-outer{
  fill:none;
  stroke:url(#goldRingGrad);
  stroke-width:2.5;
  transform-origin:150px 150px;
  animation:spin-slow 34s linear infinite;
}
.emblem-ring-dash{
  fill:none;
  stroke:var(--gold-dim);
  stroke-width:1.4;
  stroke-dasharray:2 8;
  opacity:.75;
  transform-origin:150px 150px;
  animation:spin-slow-rev 46s linear infinite;
}
.emblem-disc{
  fill:url(#discGrad);
  stroke:var(--gold-line);
  stroke-width:1;
}
.emblem-icon{
  color:var(--accent-live, var(--gold-bright));
  transform-origin:150px 150px;
  animation:emblem-float 5.5s ease-in-out infinite;
  transition:color .5s ease, opacity .22s ease;
}
.emblem-icon path,.emblem-icon circle{transition:d .4s ease;}
@keyframes spin-slow{to{transform:rotate(360deg);}}
@keyframes spin-slow-rev{to{transform:rotate(-360deg);}}
@keyframes emblem-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
.emblem-shine{
  position:absolute; inset:0;
  border-radius:50%;
  overflow:hidden;
  pointer-events:none;
  mix-blend-mode:screen;
}
.emblem-shine::after{
  content:"";
  position:absolute;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.16) 8deg, transparent 22deg, transparent 360deg);
  animation:emblem-shine-spin 6s linear infinite;
}
@keyframes emblem-shine-spin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion:reduce){
  .emblem-ring-outer,.emblem-ring-dash,.emblem-icon,.emblem-shine::after{animation:none !important;}
}

/* ===================== CONTENT GRID ===================== */
.content-grid{
  max-width:1180px;
  margin:0 auto;
  padding:64px 28px 90px;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:56px;
  align-items:start;
}
.info-eyebrow{
  font-size:11.5px;
  letter-spacing:2.2px;
  text-transform:uppercase;
  font-weight:700;
  color:var(--accent-live,var(--accent));
  margin:0 0 14px;
}
.info-col h3{
  font-family:var(--font-display);
  font-size:27px;
  font-weight:600;
  line-height:1.35;
  margin:0 0 20px;
  color:var(--ink);
}
.info-col p{
  color:var(--muted);
  font-size:16.5px;
  margin:0 0 18px;
}
.why-list{
  list-style:none;
  margin:28px 0 0;
  padding:22px 0 0;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.why-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14.5px;
  color:var(--ink);
  font-weight:600;
}
.why-list .check{
  flex:0 0 auto;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--navy-deep);
  color:var(--gold-bright);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
  margin-top:1px;
}

/* ---- form card ---- */
.form-col{position:relative;}
.form-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--accent-live,var(--accent));
  border-radius:var(--radius);
  padding:32px 28px 32px;
  box-shadow:var(--shadow-lux);
  position:relative;
}
.form-card::before{
  content:"Get My Free Quote";
  position:absolute;
  top:-13px; left:28px;
  background:var(--navy-deep);
  color:var(--gold-bright);
  font-family:var(--font-display);
  font-style:italic;
  font-size:13.5px;
  padding:4px 14px;
  border-radius:999px;
  letter-spacing:.3px;
  box-shadow:0 6px 16px rgba(5,11,22,.25);
}
.quote-form{display:none;flex-direction:column;gap:16px;margin-top:6px;}
.quote-form.active{display:flex;animation:form-in .45s ease both;}
@keyframes form-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.field label{
  display:block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.2px;
  margin-bottom:6px;
  color:var(--ink);
}
.field input,.field select{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  font-size:14.5px;
  background:var(--panel);
  color:var(--ink);
  font-family:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input:focus,.field select:focus{
  outline:none;
  border-color:var(--accent-live,var(--accent));
  background:#fff;
  box-shadow:0 0 0 4px var(--accent-soft, rgba(139,94,60,.15));
}
.field input::placeholder{color:#a7adb8;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

.cta-btn{
  margin-top:6px;
  background:linear-gradient(180deg,var(--navy-soft),var(--navy-deep));
  color:#fff;
  border:1px solid var(--gold-line);
  font-size:15.5px;
  font-weight:700;
  letter-spacing:.3px;
  padding:15px 20px;
  border-radius:999px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
  position:relative;
}
.cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(10,24,48,.35), 0 0 0 3px var(--accent-soft, transparent);
  background:linear-gradient(180deg,var(--navy),var(--navy-deep));
}
.cta-btn:active{transform:translateY(0);}

.consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:11.5px;
  color:var(--muted);
  line-height:1.5;
  cursor:pointer;
}
.consent input{margin-top:3px;flex:0 0 auto;accent-color:var(--accent-live,var(--accent));}

/* ---- result card ---- */
.result-card{
  background:linear-gradient(180deg,var(--navy-deep),var(--void));
  border:1px solid var(--gold-line);
  border-radius:var(--radius);
  padding:44px 32px;
  text-align:center;
  box-shadow:var(--shadow-lux);
  position:relative;
  animation:result-in .5s cubic-bezier(.2,.8,.2,1) both;
  color:var(--cream);
}
@keyframes result-in{
  from{opacity:0;transform:scale(.96) translateY(8px);}
  to{opacity:1;transform:none;}
}
.result-card::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px dashed var(--gold-line);
  border-radius:calc(var(--radius) - 4px);
  pointer-events:none;
}
.result-badge{
  width:60px;height:60px;
  margin:0 auto 16px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 60%, var(--gold-dim));
  color:var(--navy-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  font-weight:800;
  box-shadow:0 10px 26px rgba(201,162,74,.4);
}
.result-card h3{margin:0 0 10px;font-size:24px;font-family:var(--font-display);font-weight:600;}
.result-card p{color:var(--muted-dark);margin:0 0 22px;font-size:14.5px;}
.result-quote{
  display:inline-flex;
  flex-direction:column;
  gap:4px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--gold-line);
  border-radius:12px;
  padding:18px 30px;
  margin-bottom:26px;
}
.result-quote .label{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted-dark);font-weight:700;}
.result-quote .value{font-family:var(--font-display);font-size:30px;font-weight:600;color:var(--gold-bright);}
.ghost-btn{
  background:transparent;
  border:1.5px solid var(--gold);
  color:var(--gold-bright);
  font-weight:700;
  font-size:14px;
  padding:12px 24px;
  border-radius:999px;
  cursor:pointer;
  transition:all .25s ease;
}
.ghost-btn:hover{background:var(--gold);color:var(--navy-deep);transform:translateY(-1px);}

/* ===================== FOOTER ===================== */
.site-footer{
  background:linear-gradient(180deg,var(--void),#020509);
  border-top:1px solid var(--gold-line);
  padding:44px 28px 0;
  color:var(--muted-dark);
}
.footer-top{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-bottom:30px;
}
.footer-top .logo-title{color:var(--cream);}
.footer-links{display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;font-weight:600;color:var(--muted-dark);}
.footer-links a{text-decoration:none;transition:color .2s ease;}
.footer-links a:hover{color:var(--gold-bright);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  font-size:12px;
  color:var(--muted-dark);
  padding:18px 0;
  max-width:1180px;
  margin:0 auto;
}
.footer-phone-btn{display:none;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1024px){
  .header-inner{padding:16px 20px 12px;}
  .quote-nav{padding:6px 20px 0;gap:20px;}
  .hero{padding:56px 20px 48px;}
  .hero h1{font-size:40px;}
  .hero-inner{grid-template-columns:1fr;}
  .hero-emblem-wrap{min-height:0;order:-1;margin-bottom:8px;}
  .hero-emblem{width:190px;height:190px;}
  .content-grid{padding:52px 20px 70px;gap:40px;}
  .site-footer{padding:36px 20px 0;}
}

@media (max-width:900px){
  .content-grid{grid-template-columns:1fr;gap:34px;padding-top:44px;}
  .field-row{grid-template-columns:1fr;}
  .header-inner{flex-wrap:wrap;}
  .form-col{order:1;}
  .info-col{order:2;}
}

@media (max-width:600px){
  .header-inner{padding:14px 16px 8px;gap:10px;}
  .logo svg{width:48px;height:48px;}
  .logo-title{font-size:19px;}
  .logo-sub{font-size:9.5px;margin-top:4px;letter-spacing:1.4px;}
  .phone-btn{padding:10px 16px;font-size:12.5px;}
  .quote-nav{padding:4px 16px 0;gap:14px;}
  .hero{padding:40px 16px 36px;}
  .hero h1{font-size:29px;letter-spacing:-0.2px;}
  .hero h2{font-size:16px;}
  .hero-emblem{width:140px;height:140px;}
  .content-grid{padding:36px 16px 56px;gap:26px;}
  .info-col h3{font-size:21px;}
  .info-col p{font-size:15.5px;}
  .form-card{padding:26px 18px 26px;}
  .form-card::before{left:18px;}
  .result-card{padding:34px 20px;}
  .result-quote{padding:16px 20px;}
  .result-quote .value{font-size:24px;}
  .site-footer{padding:32px 16px 0;}
  .footer-top{padding-bottom:22px;flex-direction:column;align-items:flex-start;}
  .footer-links{font-size:13px;gap:10px 16px;}
  .footer-logo svg{width:48px;height:48px;}
  .header-inner .phone-btn{display:none;}
  .footer-phone-btn{display:inline-flex;margin-bottom:16px;}
}

@media (max-width:520px){
  .quote-nav{gap:10px;}
  .nav-tab{font-size:11px;padding:14px 0;}
  .form-card,.result-card{padding:24px 16px 26px;}
}

@media (max-width:400px){
  .header-inner{flex-direction:column;align-items:flex-start;gap:12px;}
  .phone-btn{align-self:stretch;text-align:center;}
  .hero h1{font-size:25px;}
  .hero h2{font-size:14.5px;}
  .cta-btn{font-size:14px;padding:14px 18px;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
  .reveal{opacity:1;transform:none;}
}