/* ==========================================================================
   APSHC Denver — vanilla CSS
   Palette: warm cream parchment, temple maroon, marigold gold
   Fonts:   Cinzel (sacred capitals), Cormorant (Renaissance serif),
            Lora (body), Inter (labels)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Lora:wght@400;500;600&family=Inter:wght@500;700&display=swap');

:root{
  --bg:        #faf5ec;      /* parchment cream */
  --surface:   #ffffff;
  --surface-2: #f4e8d1;      /* gold-tinted parchment */
  --ink:       #2c1810;      /* deep walnut */
  --ink-2:     #6b4d3f;      /* muted walnut */
  --ink-3:     #a08570;      /* softer ink */
  --brand:     #8a1c2d;      /* temple maroon */
  --brand-2:   #6b0f1f;      /* darker maroon */
  --gold:      #c9881e;      /* marigold */
  --gold-2:    #a76d10;
  --gold-soft: #e9c46a;
  --line:      rgba(138, 28, 45, .15);
  --line-2:    rgba(138, 28, 45, .25);
  --shadow:    0 1px 2px rgba(44,24,16,.05), 0 4px 12px rgba(44,24,16,.06);
  --shadow-2:  0 8px 32px rgba(44,24,16,.10);
  --maxw:      1180px;
  --pad:       28px;
  --font-display:  'Cinzel', serif;
  --font-headline: 'Cormorant Garamond', Georgia, serif;
  --font-body:     'Lora', Georgia, serif;
  --font-label:    'Inter', system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(201,136,30,.08), transparent 40%),
    radial-gradient(ellipse at 88% 92%, rgba(138,28,45,.06), transparent 50%);
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--brand); text-decoration:none; transition:color .2s }
a:hover{ color:var(--gold-2) }

/* ----- Typography ----- */
h1,h2,h3,h4{ font-family:var(--font-headline); font-weight:500; color:var(--ink); line-height:1.15; letter-spacing:-.005em; margin:0 }
h1{ font-size:clamp(38px, 6vw, 68px); font-weight:500 }
h2{ font-size:clamp(28px, 4vw, 44px) }
h3{ font-size:clamp(22px, 2.6vw, 30px) }
h4{ font-size:20px }
p{ margin:0 0 1em }
strong{ color:var(--ink); font-weight:600 }

.eyebrow{
  font-family:var(--font-label);
  font-size:11px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brand);
}
.eyebrow--gold{ color:var(--gold-2) }
.script-touch{ font-family:var(--font-headline); font-style:italic; font-weight:400; color:var(--gold-2) }

/* ----- Layout primitives ----- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); position:relative; z-index:2 }
.section{ padding:80px 0 }
.section--lg{ padding:120px 0 }
.section--tinted{ background:var(--surface-2) }
.section--maroon{ background:var(--brand); color:#fdf3df }
.section--maroon h1,.section--maroon h2,.section--maroon h3{ color:#fdf3df }
.section--maroon .eyebrow{ color:var(--gold-soft) }
.section--center{ text-align:center }
.grid{ display:grid; gap:32px }
.grid-2{ grid-template-columns:1fr }
.grid-3{ grid-template-columns:1fr }
@media(min-width:760px){ .grid-2{ grid-template-columns:1fr 1fr } .grid-3{ grid-template-columns:1fr 1fr 1fr } }

/* ----- Ornament dividers (SVG-as-data-uri) ----- */
.ornament{
  display:flex; align-items:center; gap:18px;
  color:var(--gold);
  margin:36px auto;
  max-width:240px;
}
.ornament::before,.ornament::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(to right, transparent, currentColor, transparent);
}
.ornament svg{ width:28px; height:28px; flex:none }

/* ----- Top contact strip ----- */
.topbar{
  background:var(--brand);
  color:#fdf3df;
  font-family:var(--font-label);
  font-size:12px;
  font-weight:500;
  letter-spacing:.05em;
  position:relative; z-index:5;
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap }
.topbar .rating{ color:var(--gold-soft); letter-spacing:.15em; text-transform:uppercase; font-size:11px; font-weight:700 }
.topbar-links{ display:flex; gap:18px; align-items:center }
.topbar-links a{ color:#fdf3df; display:inline-flex; align-items:center; gap:6px }
.topbar-links a:hover{ color:var(--gold-soft) }
.topbar-links svg{ width:14px; height:14px }

/* ----- Header / Nav ----- */
.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(250,245,236,.92);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:24px }
.brand{ display:flex; flex-direction:column; line-height:1; text-decoration:none }
.brand-mark{ font-family:var(--font-display); font-weight:600; font-size:clamp(15px, 2.2vw, 20px); letter-spacing:.08em; color:var(--brand); text-transform:uppercase }
.brand-sub{ font-family:var(--font-headline); font-style:italic; font-size:12px; color:var(--gold-2); margin-top:4px; letter-spacing:.04em }
.nav-links{ display:none; gap:30px; align-items:center }
.nav-links a{ font-family:var(--font-label); font-size:13px; font-weight:500; letter-spacing:.04em; color:var(--ink-2); text-transform:uppercase; padding:6px 0; position:relative }
.nav-links a:hover{ color:var(--brand) }
.nav-links a.is-active{ color:var(--brand) }
.nav-links a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--gold) }
.nav-cta{ display:none }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:999px; font-family:var(--font-label); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; transition:transform .15s, box-shadow .2s; cursor:pointer; border:0; line-height:1 }
.btn-primary{ background:var(--brand); color:#fdf3df; box-shadow:var(--shadow-2) }
.btn-primary:hover{ background:var(--brand-2); color:#fdf3df; transform:translateY(-1px); box-shadow:0 12px 28px rgba(138,28,45,.25) }
.btn-ghost{ background:transparent; color:var(--brand); border:1.5px solid var(--brand) }
.btn-ghost:hover{ background:var(--brand); color:#fdf3df }
.btn-gold{ background:var(--gold); color:var(--ink) }
.btn-gold:hover{ background:var(--gold-2); color:#fdf3df }

.menu-toggle{ background:transparent; border:0; color:var(--brand); padding:6px; cursor:pointer; display:inline-flex }
.menu-toggle svg{ width:28px; height:28px }

#mobile-menu{ display:none; padding:18px var(--pad) 24px; border-top:1px solid var(--line); background:var(--bg) }
#mobile-menu.open{ display:block }
#mobile-menu a{ display:block; padding:12px 0; font-family:var(--font-label); font-size:14px; font-weight:500; letter-spacing:.05em; color:var(--ink); text-transform:uppercase; border-bottom:1px solid var(--line) }
#mobile-menu a:last-of-type{ border:0 }
#mobile-menu .btn{ width:100%; margin-top:16px }

@media(min-width:880px){
  .nav-links{ display:flex }
  .nav-cta{ display:inline-flex }
  .menu-toggle{ display:none }
}

/* ----- Hero ----- */
.hero{
  position:relative;
  padding:110px 0 100px;
  overflow:hidden;
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none' stroke='%23c9881e' stroke-width='.6' opacity='.18'><circle cx='300' cy='300' r='290'/><circle cx='300' cy='300' r='240'/><circle cx='300' cy='300' r='190'/><circle cx='300' cy='300' r='140'/><circle cx='300' cy='300' r='90'/><circle cx='300' cy='300' r='40'/><g><line x1='300' y1='10' x2='300' y2='590'/><line x1='10' y1='300' x2='590' y2='300'/><line x1='95' y1='95' x2='505' y2='505'/><line x1='95' y1='505' x2='505' y2='95'/></g></svg>");
  background-repeat:no-repeat;
  background-position:right -80px top -120px;
  background-size:560px 560px;
}
.hero-inner{ position:relative; z-index:1; text-align:center; max-width:820px; margin:0 auto }
.hero h1{ margin:28px 0 24px }
.hero .lede{ font-family:var(--font-headline); font-size:clamp(19px, 2.4vw, 24px); color:var(--ink-2); font-style:italic; max-width:640px; margin:0 auto 36px; line-height:1.5 }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center }

.hero--page{ padding:80px 0 60px; text-align:center }
.hero--page h1{ margin:22px 0 18px }
.hero--page .lede{ font-size:20px }

/* ----- Birth-Chart Hero (self-drawing zodiac wheel) ----- */
.hero--chart{
  position:relative;
  overflow:hidden;
  padding:90px 0 70px;
  background:
    radial-gradient(ellipse 700px 400px at 50% 0%, rgba(201,136,30,.12), transparent 70%),
    radial-gradient(ellipse 500px 400px at 80% 100%, rgba(138,28,45,.06), transparent 60%),
    linear-gradient(180deg, #faf5ec 0%, #f4e8d1 100%);
  border-bottom:1px solid var(--line);
}

.chart-hero-grid{
  display:grid; gap:48px; grid-template-columns:1fr; align-items:center;
  position:relative; z-index:2;
}
@media(min-width:880px){ .chart-hero-grid{ grid-template-columns:1.1fr 1fr; gap:60px } }

.chart-figure{
  position:relative;
  max-width:460px;
  width:100%;
  margin:0 auto;
  aspect-ratio:1/1;
}
.chart-figure::before{
  content:"";
  position:absolute; inset:8%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,100,.25) 0%, rgba(201,136,30,.08) 45%, transparent 70%);
  animation: chart-bg-pulse 12s ease-in-out infinite;
  z-index:0;
}

.chart-svg{
  position:relative; z-index:1;
  width:100%; height:100%; display:block;
  filter:drop-shadow(0 6px 28px rgba(201,136,30,.20));
}

.chart-svg .stroke{
  fill:none;
  stroke:url(#chartGoldGrad);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:0;
}
.chart-svg .stroke-thick{ stroke-width:2 }

.chart-svg .glyph{
  font-family:'Cormorant Garamond', serif;
  font-size:26px;
  font-weight:500;
  fill:var(--brand);
  text-anchor:middle;
  dominant-baseline:central;
  opacity:0;
}
.chart-svg .bindu{
  fill:#fff8d6;
  opacity:0;
  filter:drop-shadow(0 0 8px #f0c34a);
}

/* Animation timeline (12s total)
   0.0-0.8s  : outer circle draws
   0.8-1.8s  : 12 house lines draw in sequence
   1.8-2.4s  : inner circle draws
   2.4-3.6s  : 12 zodiac glyphs appear sequentially
   3.6-4.0s  : bindu lights up
   4.0-9.0s  : hold (full wheel visible, glowing)
   9.0-11.0s : fade out
   11.0-12s  : pause / restart
*/
.chart-svg .stroke-outer { animation: chart-stroke-draw 12s linear infinite; animation-delay:0s }
.chart-svg .stroke-inner { animation: chart-stroke-draw 12s linear infinite; animation-delay:1.8s }
.chart-svg .chart-lines line { animation: chart-stroke-draw 12s linear infinite }
.chart-svg .chart-lines line:nth-child(1)  { animation-delay:.80s }
.chart-svg .chart-lines line:nth-child(2)  { animation-delay:.88s }
.chart-svg .chart-lines line:nth-child(3)  { animation-delay:.96s }
.chart-svg .chart-lines line:nth-child(4)  { animation-delay:1.04s }
.chart-svg .chart-lines line:nth-child(5)  { animation-delay:1.12s }
.chart-svg .chart-lines line:nth-child(6)  { animation-delay:1.20s }
.chart-svg .chart-lines line:nth-child(7)  { animation-delay:1.28s }
.chart-svg .chart-lines line:nth-child(8)  { animation-delay:1.36s }
.chart-svg .chart-lines line:nth-child(9)  { animation-delay:1.44s }
.chart-svg .chart-lines line:nth-child(10) { animation-delay:1.52s }
.chart-svg .chart-lines line:nth-child(11) { animation-delay:1.60s }
.chart-svg .chart-lines line:nth-child(12) { animation-delay:1.68s }
.chart-svg .glyphs text { animation: chart-glyph-fade 12s linear infinite }
.chart-svg .glyphs text:nth-child(1)  { animation-delay:2.40s }
.chart-svg .glyphs text:nth-child(2)  { animation-delay:2.50s }
.chart-svg .glyphs text:nth-child(3)  { animation-delay:2.60s }
.chart-svg .glyphs text:nth-child(4)  { animation-delay:2.70s }
.chart-svg .glyphs text:nth-child(5)  { animation-delay:2.80s }
.chart-svg .glyphs text:nth-child(6)  { animation-delay:2.90s }
.chart-svg .glyphs text:nth-child(7)  { animation-delay:3.00s }
.chart-svg .glyphs text:nth-child(8)  { animation-delay:3.10s }
.chart-svg .glyphs text:nth-child(9)  { animation-delay:3.20s }
.chart-svg .glyphs text:nth-child(10) { animation-delay:3.30s }
.chart-svg .glyphs text:nth-child(11) { animation-delay:3.40s }
.chart-svg .glyphs text:nth-child(12) { animation-delay:3.50s }
.chart-svg .bindu { animation: chart-bindu-pulse 12s linear infinite; animation-delay:3.7s; transform-origin:center }

@keyframes chart-stroke-draw{
  0%   { stroke-dashoffset:1; opacity:0 }
  3%   { opacity:1 }
  8%   { stroke-dashoffset:0; opacity:1 }
  75%  { stroke-dashoffset:0; opacity:1 }
  95%  { stroke-dashoffset:0; opacity:0 }
  100% { stroke-dashoffset:1; opacity:0 }
}
@keyframes chart-glyph-fade{
  0%   { opacity:0 }
  3%   { opacity:1 }
  75%  { opacity:1 }
  92%  { opacity:0 }
  100% { opacity:0 }
}
@keyframes chart-bindu-pulse{
  0%   { opacity:0; transform:scale(.3) }
  3%   { opacity:1; transform:scale(1.4) }
  8%   { opacity:1; transform:scale(1) }
  40%  { opacity:1; transform:scale(1.15) }
  70%  { opacity:1; transform:scale(1) }
  92%  { opacity:0; transform:scale(.6) }
  100% { opacity:0; transform:scale(.3) }
}
@keyframes chart-bg-pulse{
  0%, 100% { opacity:.4; transform:scale(.92) }
  50%      { opacity:1;  transform:scale(1.06) }
}

@media (prefers-reduced-motion: reduce){
  .chart-svg .stroke, .chart-svg .glyph, .chart-svg .bindu,
  .chart-svg .chart-lines line, .chart-svg .glyphs text,
  .chart-figure::before { animation:none; opacity:1; stroke-dashoffset:0 }
}

/* Keep older lotus hero styles for reference / re-use ------------------- */
/* ----- Lotus Hero (calm breathing animation, drifting embers, word cycle) ----- */
.hero--lotus{
  position:relative;
  overflow:hidden;
  padding:100px 0 80px;
  background:
    radial-gradient(ellipse 800px 500px at 50% -10%, rgba(201,136,30,.22), transparent 70%),
    radial-gradient(ellipse 600px 400px at 100% 100%, rgba(138,28,45,.10), transparent 70%),
    linear-gradient(180deg, #faf5ec 0%, #f4e8d1 100%);
  border-bottom:1px solid var(--line);
}

.lotus-hero-inner{
  position:relative; z-index:3;
  max-width:780px; margin:0 auto;
  text-align:center;
}
.lotus-hero-inner h1{ margin:22px 0 18px; line-height:1.1 }
.lotus-hero-inner .lede{
  font-family:var(--font-headline); font-style:italic;
  font-size:clamp(19px, 2.4vw, 23px); color:var(--ink-2);
  max-width:620px; margin:0 auto 36px; line-height:1.55;
}

/* Headline word-rotator */
.word-rotate{
  display:inline-flex; align-items:baseline; overflow:hidden;
  position:relative;
  height:1.1em; line-height:1.1; vertical-align:bottom;
  color:var(--brand);
  font-style:italic;
  min-width:5.5ch;
}
.word-rotate b{
  font-weight:500; font-style:italic;
  display:block; padding-right:.1em;
  animation: word-rotate-anim 12s infinite;
  white-space:nowrap;
}
@keyframes word-rotate-anim{
  0%, 18%   { transform: translateY(0%);    opacity:1 }
  20%, 23%  { transform: translateY(-100%); opacity:0 }
  25%, 43%  { transform: translateY(-100%); opacity:1 }
  45%, 48%  { transform: translateY(-200%); opacity:0 }
  50%, 68%  { transform: translateY(-200%); opacity:1 }
  70%, 73%  { transform: translateY(-300%); opacity:0 }
  75%, 95%  { transform: translateY(-300%); opacity:1 }
  97%, 100% { transform: translateY(-400%); opacity:0 }
}

/* Lotus SVG container (decorative, behind text) */
.lotus-figure{
  position:absolute; inset:auto;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:min(640px, 90vw);
  aspect-ratio:1/1;
  z-index:1;
  pointer-events:none;
  opacity:.55;
}
.lotus-svg{
  width:100%; height:100%; display:block;
  animation: lotus-breath 8s ease-in-out infinite;
  transform-origin:center;
  filter:drop-shadow(0 0 30px rgba(201,136,30,.35));
}
@keyframes lotus-breath{
  0%, 100% { transform: scale(0.97) rotate(-1deg); opacity:.55 }
  50%      { transform: scale(1.03) rotate(1deg);  opacity:.7 }
}

/* Drifting ember particles */
.embers{ position:absolute; inset:0; z-index:2; pointer-events:none }
.ember{
  position:absolute; bottom:-10px;
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle, #fff3c4 0%, #f0c34a 40%, transparent 70%);
  opacity:0;
  animation: ember-drift 9s linear infinite;
  filter:blur(.5px);
}
.ember:nth-child(1) { left: 8%;  width:5px;  height:5px; animation-delay: 0s;  animation-duration: 11s }
.ember:nth-child(2) { left: 18%; width:7px;  height:7px; animation-delay: -2s; animation-duration: 13s }
.ember:nth-child(3) { left: 28%; width:4px;  height:4px; animation-delay: -5s; animation-duration: 10s }
.ember:nth-child(4) { left: 42%; width:8px;  height:8px; animation-delay: -1s; animation-duration: 14s }
.ember:nth-child(5) { left: 58%; width:5px;  height:5px; animation-delay: -7s; animation-duration: 12s }
.ember:nth-child(6) { left: 70%; width:6px;  height:6px; animation-delay: -3s; animation-duration: 11s }
.ember:nth-child(7) { left: 82%; width:4px;  height:4px; animation-delay: -6s; animation-duration: 15s }
.ember:nth-child(8) { left: 92%; width:7px;  height:7px; animation-delay: -8s; animation-duration: 13s }
.ember:nth-child(9) { left: 35%; width:3px;  height:3px; animation-delay: -10s;animation-duration: 16s }
.ember:nth-child(10){ left: 65%; width:3px;  height:3px; animation-delay: -4s; animation-duration: 14s }

@keyframes ember-drift{
  0%   { transform: translateY(0) translateX(0)   scale(.6); opacity:0 }
  15%  { opacity:.9 }
  50%  { transform: translateY(-50vh) translateX(20px) scale(1) }
  85%  { opacity:.6 }
  100% { transform: translateY(-110vh) translateX(-20px) scale(.3); opacity:0 }
}

/* Faint ornamental rule lines */
.lotus-rule{
  position:absolute; left:50%; transform:translateX(-50%);
  width:60%; max-width:520px;
  height:1px;
  background:linear-gradient(to right, transparent, var(--gold), transparent);
  opacity:.4;
  z-index:1;
}
.lotus-rule--top{ top:60px }
.lotus-rule--bot{ bottom:60px }

@media (prefers-reduced-motion: reduce){
  .lotus-svg, .ember, .word-rotate b { animation:none }
  .word-rotate{ height:auto }
}

/* ----- Stats strip ----- */
.stats{
  background:var(--brand);
  color:#fdf3df;
  padding:36px 0;
}
.stats .wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; text-align:center }
@media(min-width:640px){ .stats .wrap{ grid-template-columns:repeat(4,1fr) } }
.stat-num{ font-family:var(--font-display); font-size:30px; font-weight:600; color:var(--gold-soft); letter-spacing:.04em }
.stat-label{ font-family:var(--font-label); font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:#fdf3df; opacity:.85; margin-top:6px }

/* ----- Service cards ----- */
.svc-grid{ display:grid; grid-template-columns:1fr; gap:20px }
@media(min-width:680px){ .svc-grid{ grid-template-columns:1fr 1fr } }
@media(min-width:1000px){ .svc-grid{ grid-template-columns:repeat(3,1fr) } }
.svc{
  display:block; padding:36px 30px; border-radius:4px;
  background:var(--surface);
  border:1px solid var(--line);
  border-top:3px solid var(--gold);
  transition:border-color .2s, transform .2s, box-shadow .2s;
  position:relative;
}
.svc:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); border-top-color:var(--brand) }
.svc-icon{ width:42px; height:42px; color:var(--brand); margin-bottom:18px; display:block }
.svc h3{ margin:0 0 10px; color:var(--brand) }
.svc p{ color:var(--ink-2); font-size:15px; line-height:1.6; margin:0 }
.svc-link{ display:inline-block; margin-top:18px; font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); border-bottom:1px solid var(--gold-soft); padding-bottom:2px }

/* ----- Card (about-teaser, info-panel) ----- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:40px;
  border-radius:6px;
  box-shadow:var(--shadow);
  position:relative;
}
.card--gilt::before{
  content:""; position:absolute; inset:8px;
  pointer-events:none;
  border:1px solid var(--gold-soft);
  border-radius:3px; opacity:.55;
}
.card h3{ color:var(--brand); margin:0 0 18px }
.info-row{ display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line) }
.info-row:first-of-type{ border-top:0 }
.info-row svg{ width:22px; height:22px; flex:none; color:var(--gold-2); margin-top:2px }
.info-row .label{ font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px }
.info-row .value{ color:var(--ink); font-size:16px }
.info-row .value a{ color:var(--ink) }
.info-row .value a:hover{ color:var(--brand) }

/* ----- Pillars (about page values) ----- */
.pillar{
  background:var(--surface);
  border:1px solid var(--line);
  padding:36px 30px;
  border-radius:6px;
  text-align:left;
}
.pillar-icon{ width:38px; height:38px; color:var(--gold); margin-bottom:18px }
.pillar h3{ color:var(--brand); margin:0 0 10px }
.pillar p{ color:var(--ink-2); margin:0 }

/* ----- Service detail rows (services page) ----- */
.svc-detail{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  padding:50px 0;
  border-top:1px dashed var(--line-2);
}
.svc-detail:first-of-type{ border-top:0 }
@media(min-width:840px){ .svc-detail{ grid-template-columns:1fr 2fr; gap:60px } }
.svc-detail-head svg{ width:48px; height:48px; color:var(--brand); margin-bottom:14px }
.svc-detail-head h2{ color:var(--brand); margin:0 0 6px }
.svc-detail-head .meta{ font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-2) }
.svc-detail-body p{ color:var(--ink-2); margin:0 0 1em }

/* ----- Steps ----- */
.steps{ counter-reset:step }
.step{ display:flex; gap:24px; padding:22px 0; border-top:1px solid var(--line) }
.step:first-of-type{ border-top:0 }
.step-num{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--surface-2);
  color:var(--brand);
  font-family:var(--font-display); font-weight:600; font-size:18px;
  display:grid; place-items:center;
  border:1px solid var(--gold-soft);
}
.step h3{ color:var(--brand); margin:0 0 6px }
.step p{ color:var(--ink-2); margin:0 }

/* ----- Map ----- */
.map-frame{ border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:var(--shadow) }
.map-frame iframe{ display:block; width:100%; border:0 }

/* ----- Forms ----- */
.form{ display:grid; gap:18px }
.form-row{ display:grid; grid-template-columns:1fr; gap:18px }
@media(min-width:680px){ .form-row.cols-2{ grid-template-columns:1fr 1fr } }
.form-field{ display:flex; flex-direction:column; gap:8px }
.form-field label{ font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2) }
.form-field input,.form-field select,.form-field textarea{
  font-family:var(--font-body); font-size:16px; color:var(--ink);
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:4px;
  transition:border-color .2s, box-shadow .2s;
  width:100%;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:0;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,136,30,.18);
}
.form-field textarea{ min-height:140px; resize:vertical }
.form-button{ display:flex; align-items:center; justify-content:center; gap:10px; padding:18px; background:var(--brand); color:#fdf3df; border:0; border-radius:4px; font-family:var(--font-label); font-size:13px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; box-shadow:var(--shadow-2); transition:background .2s, transform .15s }
.form-button:hover{ background:var(--brand-2); transform:translateY(-1px) }
.form-button svg{ width:18px; height:18px }
.form-note{ font-family:var(--font-label); font-size:12px; letter-spacing:.05em; color:var(--ink-3); text-align:center; margin:6px 0 0 }
.form-note strong{ color:var(--gold-2) }

/* ----- FAQ ----- */
.faq{ display:grid; gap:14px }
.faq details{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:6px;
  padding:22px 26px;
}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary h3{ margin:0; font-family:var(--font-headline); font-weight:500; font-size:22px; color:var(--ink) }
.faq summary::after{ content:"+"; font-family:var(--font-display); font-size:24px; color:var(--gold); flex:none; transition:transform .2s }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq details p{ color:var(--ink-2); margin:16px 0 0 }

/* ----- Footer ----- */
.site-footer{
  background:#1f0a0e;
  color:#dec7a8;
  padding:64px 0 28px;
  position:relative; z-index:2;
}
.site-footer .ornament{ color:var(--gold) }
.site-footer-grid{ display:grid; gap:40px; grid-template-columns:1fr }
@media(min-width:780px){ .site-footer-grid{ grid-template-columns:2fr 1fr 1fr } }
.site-footer h4{ font-family:var(--font-label); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 18px }
.site-footer .brand-mark{ color:var(--gold-soft); font-size:22px }
.site-footer .brand-sub{ color:#a78f6e; font-size:13px }
.site-footer p{ color:#c9b497; margin:0 0 14px; font-size:15px }
.site-footer a{ color:#dec7a8 }
.site-footer a:hover{ color:var(--gold-soft) }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:12px }
.site-footer ul a{ font-family:var(--font-label); font-size:13px; letter-spacing:.05em }
.site-footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(222,199,168,.12); font-family:var(--font-label); font-size:12px; color:#8d7857; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px }

/* ----- Floating WhatsApp ----- */
.fab-wa{
  position:fixed; bottom:22px; right:22px; z-index:60;
  width:60px; height:60px; border-radius:50%;
  background:#25D366;
  display:grid; place-items:center;
  color:#fff;
  box-shadow:0 12px 28px rgba(37,211,102,.4), 0 2px 6px rgba(0,0,0,.18);
  transition:transform .2s;
}
.fab-wa:hover{ transform:scale(1.07); color:#fff }
.fab-wa svg{ width:32px; height:32px }
.fab-wa::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(37,211,102,.4);
  animation:pulse 2.4s infinite ease-out;
}
@keyframes pulse{ 0%{ transform:scale(.9); opacity:.6 } 100%{ transform:scale(1.35); opacity:0 } }

/* ----- Reveal-on-scroll ----- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease }
.reveal.in{ opacity:1; transform:translateY(0) }

/* ----- Misc ----- */
.text-center{ text-align:center }
.mb-md{ margin-bottom:24px }
.mb-lg{ margin-bottom:36px }
.mt-xl{ margin-top:48px }
.muted{ color:var(--ink-2) }
.divider-rule{ height:1px; background:var(--line); margin:60px 0 }