/*
Theme Name: Hirdyesh Goyal — Numerology
Theme URI: https://hirdyeshgoyal.com
Description: Child theme of Hello Elementor carrying the Hirdyesh Goyal numerology design system. Terracotta palette, Cormorant Garamond + Inter, number-grid motif.
Author: Studio build
Template: hello-elementor
Version: 1.0.0
Text Domain: hg-child
*/

/* ============================================================
   HIRDYESH GOYAL — NUMEROLOGY
   Design System · TERRACOTTA
   Type: Cormorant Garamond (display) + Inter (UI/body)
   Motif: The Number Grid — digits 1-9 as architecture
   ============================================================ */
:root{
  /* --- Terracotta palette --- */
  --ink:#5C2A0F;
  --ink-2:#7A3B15;
  --ink-soft:#6B3312;
  --gold:#B4741F;
  --gold-lt:#F0C77A;
  --gold-pale:#F7E5C2;
  --ivory:#FDF9F3;
  --ivory-2:#F8EEE1;
  --ivory-3:#F1E2CE;
  --muted:#6E5645;
  --accent:#8E3B12;
  --line:rgba(92,42,15,.15);
  --line-2:rgba(92,42,15,.08);
  --line-gold:rgba(180,116,31,.38);

  --maxw:1240px;
  --r:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 14px 34px -24px rgba(92,42,15,.30);
  --shadow-lg:0 34px 66px -34px rgba(92,42,15,.45);
}

body{
  background:var(--ivory);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.hg button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.hg input,.hg select,.hg textarea{font-family:inherit;font-size:15px;color:var(--ink)}

/* ---------- Type ---------- */
.hg .display,
h1.display,h2.display,h3.display{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  letter-spacing:-.015em;line-height:1.08;
}
h1.display{font-size:clamp(2.6rem,5.4vw,4.6rem)}
h2.display{font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.12}
h3.display{font-size:clamp(1.4rem,2.1vw,1.9rem);line-height:1.2}
.eyebrow{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.6;flex:none}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:"";width:26px;height:1px;background:var(--gold);opacity:.6}
.lead{font-size:clamp(1.02rem,1.25vw,1.18rem);color:var(--muted);line-height:1.75;max-width:60ch}
.hg p{color:var(--muted)}
.ink{background:var(--ink);color:#fff}
.ink h1,.ink h2,.ink h3{color:#fff}
.ink p{color:rgba(255,255,255,.72)}
.tint{background:var(--ivory-2)}

/* ---------- Layout ---------- */
.hg .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.hg .sec{padding:clamp(72px,8vw,132px) 0}
.hg .sec-sm{padding:clamp(56px,6vw,88px) 0}
.hg .grid{display:grid;gap:clamp(24px,3vw,48px)}
.hg .g2{grid-template-columns:1fr 1fr}
.hg .g3{grid-template-columns:repeat(3,1fr)}
.hg .center{text-align:center}
.hg .center .lead{margin-inline:auto}

/* ---------- Buttons ---------- */
.hg .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 30px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  transition:.35s var(--ease);white-space:nowrap;
}
.hg .btn:hover{background:var(--ink-soft);border-color:var(--ink-soft);color:#fff}
.hg .btn-gold{background:var(--gold);border-color:var(--gold);color:#fff}
.hg .btn-gold:hover{background:#96601a;border-color:#96601a}
.hg .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.hg .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hg .ink .btn-ghost,.hg .hero-rich .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.hg .ink .btn-ghost:hover,.hg .hero-rich .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.hg .btn-sm{padding:12px 22px;font-size:11px}
.hg .link-arrow{
  display:inline-flex;align-items:center;gap:.55em;font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  padding-bottom:5px;border-bottom:1px solid var(--line-gold);transition:.3s var(--ease);
}
.hg .link-arrow span{transition:transform .35s var(--ease)}
.hg .link-arrow:hover{border-color:var(--gold)}
.hg .link-arrow:hover span{transform:translateX(5px)}

/* ---------- Numeral motif ---------- */
.hg .num-outline{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  -webkit-text-stroke:1px var(--gold);color:transparent;line-height:1;
}
.hg .num-ghost{
  position:absolute;font-family:'Cormorant Garamond',serif;font-weight:300;
  color:var(--ink);opacity:.045;line-height:.8;pointer-events:none;user-select:none;
}

/* ---------- Hero ---------- */
.hg .hero-rich{
  position:relative;color:#fff;overflow:hidden;
  padding:clamp(44px,5.5vw,80px) 0 clamp(92px,10vw,140px);
  background:
    radial-gradient(110% 86% at 76% 48%,rgba(255,226,172,.30),transparent 62%),
    radial-gradient(80% 100% at 4% -12%,rgba(255,255,255,.10),transparent 55%),
    linear-gradient(158deg,#BB6520 0%,#9E4E15 52%,#843D10 100%);
}
.hg .hero-rich h1{color:#fff}
.hg .hero-rich .lead{color:rgba(255,255,255,.76)}
.hg .hero2{
  position:relative;z-index:3;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(20px,3.5vw,56px);align-items:center;
}
.hg .pill{
  display:inline-flex;align-items:center;gap:.65em;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:9px 20px;font-size:11px;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.05);
}
.hg .pill i{color:var(--gold-lt);font-style:normal;font-size:13px;line-height:1}
.hg .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* hero slider */
.hg .slide{display:none}
.hg .slide.on{display:block;animation:hgslide .6s var(--ease)}
@keyframes hgslide{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hg .dots{display:flex;gap:9px;margin-top:38px}
.hg .dots button{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.28);transition:.4s var(--ease)}
.hg .dots button.on{background:var(--gold-lt);width:28px}

/* wheel + cut-out + badges */
.hg .hero-visual{position:relative;min-height:clamp(340px,42vw,540px);display:grid;place-items:center}
.hg .wheel{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(128%,720px);height:auto;color:var(--gold-lt);opacity:.45;pointer-events:none;
}
.hg .wheel .spin{transform-origin:250px 250px;animation:hgspin 90s linear infinite}
@keyframes hgspin{to{transform:rotate(360deg)}}
.hg .cutout{
  position:relative;z-index:2;width:min(78%,380px);aspect-ratio:3/4;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.03));
  border:1px dashed rgba(255,255,255,.4);border-radius:190px 190px 20px 20px;
  display:grid;place-items:center;text-align:center;padding:30px;overflow:hidden;
}
/* Transparent PNG — floats free, no frame, wheel visible behind it. */
.hg .cutout.is-cutout{
  border:0;background:none;padding:0;border-radius:0;overflow:visible;
  width:min(100%,505px);aspect-ratio:auto;align-self:end;
}
.hg .cutout.is-cutout img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 34px rgba(60,24,6,.42));
  /* The mask stops flat where the desk was — fade it out so the figure
     dissolves into the hero instead of ending on a hard line. */
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,.55) 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 78%,rgba(0,0,0,.55) 90%,transparent 100%);
}

/* Framed photo — used when the supplied image still has its background.
   Zoom/offset tuned to put the face in the upper third of the arch. */
.hg .cutout.has-photo{border:0;background:none;padding:0}
.hg .cutout.has-photo .photo{
  position:absolute;inset:0;border-radius:inherit;
  background-image:var(--hg-portrait);
  background-repeat:no-repeat;
  background-size:174% auto;
  background-position:50% 64%;
}
.hg .cutout.has-photo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
  pointer-events:none;
}
.hg .cutout span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);line-height:2}
.hg .cutout b{display:block;font-family:'Cormorant Garamond',serif;font-size:28px;letter-spacing:0;
  text-transform:none;color:var(--gold-lt);font-weight:300;margin-bottom:8px}
.hg .badge{
  position:absolute;z-index:4;background:linear-gradient(150deg,#FFFAEF,#F7E5C2);
  border:1px solid var(--gold-lt);border-radius:12px;padding:11px 15px;
  display:flex;gap:11px;align-items:center;max-width:238px;
  box-shadow:0 18px 34px -20px rgba(0,0,0,.55);
}
.hg .badge svg{width:21px;height:21px;flex:none;color:var(--gold)}
.hg .badge b{display:block;font-family:'Cormorant Garamond',serif;font-size:16.5px;line-height:1.15;color:#5C2A0F}
.hg .badge em{font-style:normal;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#6E5645;line-height:1.4}
.hg .b1{top:9%;right:-4%}
.hg .b2{bottom:28%;left:-7%}
.hg .b3{bottom:5%;right:4%}

/* floating insight card */
.hg .float-wrap{position:relative;z-index:8;margin-top:clamp(-76px,-6.5vw,-54px);margin-bottom:clamp(46px,6vw,78px)}
.hg .insight{
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);border-radius:var(--r);
  padding:clamp(22px,2.6vw,32px);display:grid;
  grid-template-columns:1.15fr 200px auto;gap:24px;align-items:end;
}
.hg .insight h3{font-family:'Cormorant Garamond',serif;font-size:clamp(1.25rem,1.9vw,1.6rem);
  font-weight:500;line-height:1.25;margin-top:12px;max-width:26ch;color:var(--ink)}

/* ---------- Fields ---------- */
.hg .field{display:flex;flex-direction:column;gap:7px;flex:1;min-width:150px}
.hg .field label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hg .field input,.hg .field select,.hg .field textarea{
  border:0;border-bottom:1px solid var(--line);background:transparent;padding:9px 0;
  outline:none;transition:.3s;border-radius:0;
}
.hg .field input:focus,.hg .field select:focus,.hg .field textarea:focus{border-color:var(--gold)}
.hg .minicalc-out{
  width:100%;border-top:1px solid var(--line-2);padding-top:16px;display:none;
  align-items:flex-start;gap:18px;
}
.hg .minicalc-out.show{display:flex}
.hg .big-num{
  font-family:'Cormorant Garamond',serif;font-size:56px;line-height:.9;font-weight:300;
  color:var(--gold);flex:none;
}
.hg .minicalc-out p{font-size:14.5px;line-height:1.6}
.hg .minicalc-out strong{color:var(--ink);font-weight:500}

/* ---------- Trust strip ---------- */
.hg .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ivory-2)}
.hg .trust .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 30px;padding-block:20px}
.hg .trust span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.7em}
.hg .trust span::before{content:"";width:5px;height:5px;background:var(--gold);flex:none;transform:rotate(45deg)}

/* ---------- Question list ---------- */
.hg .qlist{border-top:1px solid var(--line);max-width:820px;padding:0;margin:0}
.hg .qlist li{
  list-style:none;border-bottom:1px solid var(--line);padding:20px 0 20px 52px;position:relative;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.15rem,1.9vw,1.55rem);
  color:var(--ink-2);line-height:1.4;margin:0;
}
.hg .qlist li::before{
  content:attr(data-n);position:absolute;left:0;top:24px;
  font-family:'Inter',sans-serif;font-style:normal;font-size:10.5px;letter-spacing:.16em;
  color:var(--gold);
}

/* ---------- Cards ---------- */
.hg .card{
  background:#fff;border:1px solid var(--line);padding:clamp(26px,3vw,36px);border-radius:var(--r);
  position:relative;transition:.45s var(--ease);overflow:hidden;box-shadow:var(--shadow);
}
.hg .card:hover{border-color:var(--line-gold);transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.hg .card .cnum{
  position:absolute;top:14px;right:18px;font-family:'Cormorant Garamond',serif;font-size:60px;
  font-weight:300;color:var(--ink);opacity:.055;line-height:1;
}
.hg .tint .card{background:var(--ivory)}
.hg .card-title{font-family:'Cormorant Garamond',serif;font-size:1.35rem;line-height:1.25;margin-bottom:12px;color:var(--ink)}
.hg .card p{font-size:14.6px;line-height:1.7}

/* ---------- Service cards ---------- */
.hg .svc-card{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);
  padding:30px 28px 26px;position:relative;overflow:hidden;cursor:pointer;transition:.45s var(--ease);
  display:block;
}
.hg .svc-card::before{content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--gold);transition:width .55s var(--ease)}
.hg .svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--line-gold)}
.hg .svc-card:hover::before{width:100%}
.hg .svc-ic{width:48px;height:48px;border-radius:13px;background:var(--ivory-2);display:grid;place-items:center;margin-bottom:18px}
.hg .svc-ic svg{width:23px;height:23px;color:var(--gold)}
.hg .svc-card h3{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:500;line-height:1.25;margin-bottom:10px;color:var(--ink)}
.hg .svc-card p{font-size:14.2px;line-height:1.66}
.hg .svc-card .go{margin-top:18px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:.5em}

/* ---------- Feature cards ---------- */
.hg .split-h h2 em{font-style:normal;color:var(--accent);display:block}
.hg .feat{display:grid;gap:16px}
.hg .feat-card{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:0 12px 32px -24px rgba(92,42,15,.34);
  padding:24px 28px;display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start;
  transition:.4s var(--ease);
}
.hg .feat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-gold)}
.hg .feat-n{font-family:'Cormorant Garamond',serif;font-size:32px;color:var(--gold-lt);line-height:1}
.hg .feat-h{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.hg .feat-h svg{width:19px;height:19px;color:var(--gold);flex:none}
.hg .feat-h h4{font-family:'Cormorant Garamond',serif;font-size:1.28rem;font-weight:500;line-height:1.2;color:var(--ink);margin:0}
.hg .feat-card p{font-size:14.4px;line-height:1.66}

/* ---------- Manifesto ---------- */
.hg .manifesto{position:relative;overflow:hidden}
.hg .manifesto .wrap{position:relative;z-index:2;max-width:1000px;text-align:center}
.hg .manifesto q{
  font-family:'Cormorant Garamond',serif;font-size:clamp(1.55rem,3.1vw,2.6rem);
  line-height:1.32;font-weight:300;quotes:none;display:block;color:#fff;
}
.hg .manifesto q b{color:var(--gold-lt);font-weight:400;font-style:italic}
.hg .sig{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.6rem;
  color:var(--gold-lt);margin-top:8px;
}

/* ---------- Steps ---------- */
.hg .steps{border-top:1px solid var(--line)}
.hg .step{
  display:grid;grid-template-columns:88px 1fr;gap:28px;border-bottom:1px solid var(--line);
  padding:32px 0;
}
.hg .step-n{
  font-family:'Cormorant Garamond',serif;font-size:clamp(2.4rem,4vw,3.4rem);font-weight:300;
  -webkit-text-stroke:1px var(--gold);color:transparent;line-height:.9;
}
.hg .step h4{font-family:'Cormorant Garamond',serif;font-size:1.45rem;font-weight:400;margin-bottom:9px;color:var(--ink)}

/* ============================================================
   HOW IT WORKS — step cards on a blush band
   ============================================================ */
.hg .hg-steps-band{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,#FDF3EE 0%,#FAEADF 60%,#F8E6DA 100%);
}
/* Concentric number-wheel motif, echoing the hero. */
.hg .hg-steps-band::before{
  content:"";position:absolute;top:50%;right:-9%;transform:translateY(-50%);
  width:min(58vw,760px);aspect-ratio:1;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23B4741F' stroke-opacity='.30'%3E%3Ccircle cx='300' cy='300' r='292'/%3E%3Ccircle cx='300' cy='300' r='232' stroke-dasharray='2 12'/%3E%3Ccircle cx='300' cy='300' r='172'/%3E%3Ccircle cx='300' cy='300' r='112' stroke-dasharray='5 9'/%3E%3Cpath d='M300 8v584M8 300h584'/%3E%3Cpath d='M208 208h184v184H208z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:contain;
}
/* Faint dot texture so the flat tint isn't dead space. */
.hg .hg-steps-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(180,116,31,.10) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 45%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 45%,transparent);
}
.hg .hg-steps-band > .elementor-container{position:relative;z-index:1}

/* NOTE: Elementor's Optimized Markup drops the .elementor-widget-container
   wrapper, so widget-level styling has to target .elementor-widget-* itself.
   This band gets a pill eyebrow instead of the usual rule-and-caps. */
.hg .hg-steps-band .elementor-widget-heading.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  border:1px solid var(--line-gold);border-radius:999px;
  padding:9px 22px;background:rgba(255,255,255,.7);
  /* Elementor sets width:100% on widget elements; the pill must shrink-wrap. */
  width:auto;margin:0 auto 24px;
}
.hg .hg-steps-band .elementor-widget-heading.eyebrow::before{
  content:"\2726";width:auto;height:auto;background:none;opacity:1;
  color:var(--gold);font-size:12px;line-height:1;
}
.hg .hg-steps-band .elementor-widget-heading.eyebrow::after{display:none}
.hg .hg-steps-band .elementor-widget-heading.eyebrow .elementor-heading-title{
  color:var(--accent);
}
.hg .display em,
.hg .elementor-widget-heading.display .elementor-heading-title em{
  font-style:italic;color:var(--accent);
}

.hg .stepcards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:16px;
}
.hg .stepcard{
  position:relative;background:#fff;border-radius:26px;padding:34px 26px 30px;
  text-align:center;display:flex;flex-direction:column;align-items:center;
  box-shadow:0 24px 46px -30px rgba(92,42,15,.30);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.hg .stepcard:hover{transform:translateY(-8px);box-shadow:0 36px 60px -32px rgba(92,42,15,.42)}

/* Dashed connector between cards. */
.hg .stepcard:not(:last-child)::after{
  content:"";position:absolute;top:74px;right:-26px;width:26px;
  border-top:1px dashed var(--line-gold);z-index:2;
}

.hg .sc-num{
  position:absolute;top:14px;left:22px;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:62px;line-height:1;color:var(--gold);opacity:.16;
  transition:opacity .45s var(--ease);user-select:none;
}
.hg .stepcard:hover .sc-num{opacity:.30}

.hg .sc-ic{
  width:66px;height:66px;border-radius:999px;display:grid;place-items:center;
  background:linear-gradient(150deg,#FDF0E4,#F7E1CD);color:var(--gold);
  margin-bottom:22px;position:relative;z-index:1;
  transition:transform .85s var(--ease),background .45s var(--ease);
}
.hg .sc-ic svg{width:27px;height:27px}
/* The client asked for movement — the badge makes a full turn on hover. */
.hg .stepcard:hover .sc-ic{
  transform:rotate(360deg);
  background:linear-gradient(150deg,#F7E1CD,#EFCDAE);
}

.hg .stepcard h4{
  font-family:'Cormorant Garamond',serif;font-size:1.32rem;font-weight:600;
  color:var(--accent);line-height:1.25;margin:0 0 12px;
}
.hg .stepcard p{font-size:14.4px;line-height:1.65;margin:0}

/* margin-top:auto pins the divider to the bottom so it lines up
   across cards whose descriptions differ in length. */
.hg .sc-tags{
  list-style:none;margin:22px 0 0;padding:20px 0 0;width:100%;
  margin-top:auto;border-top:1px solid var(--line-2);
}
.hg .sc-tags li{
  list-style:none;font-size:10.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:#C08A5A;line-height:1.5;
  display:flex;align-items:center;justify-content:center;gap:.6em;
}
.hg .sc-tags li+li{margin-top:7px}
.hg .sc-tags li::before{
  content:"";width:4px;height:4px;border-radius:999px;background:var(--gold);flex:none;opacity:.75;
}

@media(prefers-reduced-motion:reduce){
  .hg .sc-ic,.hg .stepcard{transition:none}
  .hg .stepcard:hover .sc-ic{transform:none}
  .hg .stepcard:hover{transform:none}
}

/* ---------- Testimonials carousel ---------- */
.hg .tslider{position:relative}
.hg .tslider-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);gap:22px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;
}
.hg .tslider-track::-webkit-scrollbar{display:none}
.hg .tslider .tcard{scroll-snap-align:start;display:flex;flex-direction:column}
.hg .tslider blockquote{flex:1}

/* Long testimonials are clamped so the row keeps an even height. */
.hg .tcard blockquote[data-hg-tquote]{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden;
}
.hg .tcard blockquote.is-open{-webkit-line-clamp:unset;display:block;overflow:visible}
.hg .tcard blockquote p+p{margin-top:.7em}
.hg .tmore{
  align-self:flex-start;margin-top:14px;padding:0 0 3px;font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--line-gold);transition:.3s var(--ease);
}
.hg .tmore:hover{color:var(--ink);border-color:var(--ink)}

.hg .tnav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px}
.hg .tarrow{
  width:38px;height:38px;border:1px solid var(--line);border-radius:999px;color:var(--ink);
  display:grid;place-items:center;font-size:15px;transition:.3s var(--ease);background:transparent;
}
.hg .tarrow:hover{border-color:var(--gold);color:var(--gold)}
.hg .tdots{display:flex;gap:9px;align-items:center}
.hg .tdots button{
  width:8px;height:8px;border-radius:999px;background:var(--line-gold);
  transition:.4s var(--ease);padding:0;
}
.hg .tdots button.on{background:var(--gold);width:28px}

.hg .tcard{background:#fff;border:1px solid var(--line);padding:34px 32px;border-radius:var(--r);box-shadow:var(--shadow)}
.hg .tcard .mark{font-family:'Cormorant Garamond',serif;font-size:52px;color:var(--gold);
  line-height:.6;display:block;margin-bottom:14px;opacity:.7}
.hg .tcard blockquote{font-family:'Cormorant Garamond',serif;font-size:1.22rem;line-height:1.5;
  color:var(--ink-2);font-style:italic;margin:0;padding:0;border:0}
.hg .tmeta{margin-top:20px;padding-top:16px;border-top:1px solid var(--line-2);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hg .note{
  border:1px dashed var(--gold);background:rgba(247,229,194,.30);padding:26px 28px;border-radius:var(--r);
  font-size:13.5px;line-height:1.7;color:var(--ink-2);
}
.hg .note b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:9px}

/* ============================================================
   SERVICES PICKER + DETAIL PANEL
   ============================================================ */
.hg .svc-price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:.5em .9em;margin:0 0 12px;
}
/* Price stays in the UI face — the display serif read as too decorative
   for a number someone is meant to evaluate. */
.hg .pl-amount{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:1.12rem;color:var(--accent);font-weight:600;
  line-height:1;letter-spacing:-.005em;font-variant-numeric:tabular-nums;
}
.hg .pl-tba{font-size:1rem;font-style:italic;font-weight:400;color:var(--muted)}
.hg .pl-suffix{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hg .pl-dur{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-left:1px solid var(--line);padding-left:.9em;
}
.hg .svc-price-lg .pl-amount{font-size:1.85rem;font-weight:600}
.hg .svc-price-lg{gap:.4em 1em;margin-bottom:6px}

/* Centred call-to-action inside an otherwise left-aligned band. */
.hg .hg-btn-center{text-align:center}

.hg .svc-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hg .pick{
  background:#fff;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.hg .pick:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--line-gold)}
.hg .pick.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow-lg)}

.hg .pick-media{
  position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(150deg,#FBEEE2,#F3DCC6 70%,#EACFB4);
}
.hg .pick-media img{width:100%;height:100%;object-fit:cover}
.hg .pick-ic{
  position:relative;z-index:1;width:56px;height:56px;border-radius:999px;background:rgba(255,255,255,.82);
  display:grid;place-items:center;color:var(--gold);
  transition:transform .8s var(--ease);
}
.hg .pick-ic svg{width:25px;height:25px}
.hg .pick:hover .pick-ic{transform:rotate(360deg)}
.hg .pick-badge{
  position:absolute;right:12px;bottom:12px;z-index:2;background:var(--ink);color:#fff;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border-radius:999px;
}


/* Service artwork — one drawn tile per service, sharing a ground and dial so
   the set reads as a family. A real photo, when set, replaces it entirely. */

/* Photographs, when set, replace the drawn tile. The warm scrim keeps a mixed
   set feeling like one family and keeps the corner badge readable. */
.hg .pick-photo{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease)}
.hg .pick:hover .pick-photo{transform:scale(1.045)}
.hg .pick-media:has(.pick-photo)::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(92,42,15,0) 45%,rgba(92,42,15,.22) 100%);
}
@media (prefers-reduced-motion:reduce){
  .hg .pick-photo{transition:none}
  .hg .pick:hover .pick-photo{transform:none}
}
.hg .pick-art{display:block;width:100%;height:100%;object-fit:cover}
.hg .pick-art g{transform-origin:160px 88px;transition:transform .7s var(--ease)}
.hg .pick:hover .pick-art g:last-of-type{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .hg .pick-art g{transition:none}
  .hg .pick:hover .pick-art g:last-of-type{transform:none}
}
.hg .pick-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.hg .pick-body h3{
  font-family:'Cormorant Garamond',serif;font-size:1.28rem;font-weight:600;
  color:var(--ink);line-height:1.25;margin:0 0 10px;
}
.hg .pick-body p{font-size:14.2px;line-height:1.62;margin:0 0 18px}
.hg .pick-more{margin-top:auto;align-self:flex-start}
.hg .pick.on .pick-more{background:var(--ink);color:#fff;border-color:var(--ink)}

/* --- Detail panel --- */
.hg .svc-detail-wrap{scroll-margin-top:110px}
.hg .svc-detail{display:none}
.hg .svc-detail.on{display:block;animation:hgfade .45s var(--ease)}
@keyframes hgfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hg .sd-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:start;
  padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--line);
}
.hg .sd-ic{
  width:64px;height:64px;border-radius:18px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,#FBEEE2,#F3DCC6);color:var(--gold);
}
.hg .sd-ic svg{width:28px;height:28px}
.hg .sd-head h2.display{margin:0 0 8px;font-size:clamp(1.7rem,3vw,2.5rem)}
.hg .sd-sub{font-size:15px;color:var(--muted);margin:0;max-width:52ch}
.hg .sd-buy{text-align:right;min-width:210px}
.hg .sd-buy .svc-price{justify-content:flex-end}
.hg .sd-durnote{font-size:12px;line-height:1.55;color:var(--muted);margin:0 0 16px;max-width:26ch;margin-left:auto}

.hg .sd-benefits{margin:34px 0 6px}
.hg .ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hg .ben{
  display:flex;gap:12px;align-items:flex-start;background:var(--ivory-2);
  border-radius:14px;padding:18px 20px;
}
.hg .ben span{color:var(--gold);font-size:14px;line-height:1.5;flex:none}
.hg .ben p{font-size:14.2px;line-height:1.6;margin:0;color:var(--ink-2)}

/* Ticked variant for "what is included".
   Needs the extra .svc-detail to outrank the base .chk rule further down. */
.hg .svc-detail .chk-tick li{padding-left:28px}
.hg .svc-detail .chk-tick li::before{
  content:"";position:absolute;left:2px;top:5px;width:14px;height:9px;border:0;
  border-left:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
  transform:rotate(-45deg);border-radius:1px;
}

/* ---------- Accordion ---------- */
.hg .acc{border-top:1px solid var(--ink)}
.hg .acc-item{border-bottom:1px solid var(--line)}
.hg .acc-head{
  width:100%;display:grid;grid-template-columns:64px 1fr 30px;gap:22px;align-items:center;
  text-align:left;padding:26px 0;transition:.3s;
}
.hg .acc-head:hover .acc-t{color:var(--gold)}
.hg .acc-t{font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem,2.1vw,1.75rem);line-height:1.2;transition:.3s;display:block;color:var(--ink)}
.hg .acc-sub{font-size:13.5px;color:var(--muted);margin-top:5px;display:block}
.hg .svc-n{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--gold)}
.hg .acc-ic{position:relative;width:16px;height:16px;justify-self:end}
.hg .acc-ic::before,.hg .acc-ic::after{content:"";position:absolute;background:var(--gold);transition:.4s var(--ease)}
.hg .acc-ic::before{top:7.5px;left:0;width:16px;height:1px}
.hg .acc-ic::after{left:7.5px;top:0;width:1px;height:16px}
.hg .acc-item.open .acc-ic::after{transform:rotate(90deg);opacity:0}
.hg .acc-body{display:none;padding:0 0 44px}
.hg .acc-item.open .acc-body{display:block}
.hg .acc-inner{display:grid;grid-template-columns:64px 1fr;gap:22px}
.hg .svc-hook{font-family:'Cormorant Garamond',serif;font-size:clamp(1.1rem,1.7vw,1.35rem);
  font-style:italic;color:var(--ink-2);line-height:1.45;margin-bottom:18px;max-width:66ch}
.hg .two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px}
.hg .chk{list-style:none;padding:0;margin:0}
.hg .chk li{position:relative;padding-left:24px;font-size:14.5px;color:var(--muted);line-height:1.6;margin-bottom:9px;list-style:none}
.hg .chk li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;
  border:1px solid var(--gold);transform:rotate(45deg)}
.hg .col-h{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:18px}
.hg .svc-close{margin-top:32px;padding:26px 28px;background:var(--ivory-2);border-left:2px solid var(--gold);border-radius:0 var(--r) var(--r) 0}
.hg .svc-close h5{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:400;margin-bottom:8px;color:var(--ink)}

/* ---------- Calculators ---------- */
.hg .calc{background:#fff;border:1px solid var(--line);padding:clamp(28px,3vw,40px);position:relative;border-radius:var(--r);box-shadow:var(--shadow)}
.hg .calc + .calc{margin-top:34px}
.hg .calc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}
.hg .calc-head .num-outline{font-size:44px}
.hg .calc-form{display:grid;gap:18px;grid-template-columns:1fr auto;align-items:end}
.hg .calc-out{
  margin-top:26px;padding-top:24px;border-top:1px solid var(--line);display:none;
  grid-template-columns:96px 1fr;gap:26px;align-items:start;
}
.hg .calc-out.show{display:grid}
.hg .calc-out .big-num{font-size:82px}
.hg .calc-out h4{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:400;margin-bottom:8px;color:var(--ink)}
.hg .calc-out .kicker{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.hg .field-hint{
  font-size:11.5px;color:var(--muted);opacity:.85;margin-top:6px;font-style:italic;
}
.hg .err{color:#A5372B;font-size:13px;margin-top:12px;display:none}
.hg .err.show{display:block}

/* ---------- Enquiry form (Contact Form 7) ---------- */
.hg .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;margin-top:34px}
.hg .form-grid .full{grid-column:1/-1}
.hg .form-grid .field label{margin-bottom:0}
.hg .wpcf7-form-control-wrap{display:block}
.hg .form-grid input[type=text],
.hg .form-grid input[type=email],
.hg .form-grid input[type=tel],
.hg .form-grid input[type=date],
.hg .form-grid select,
.hg .form-grid textarea{
  width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;
  padding:9px 0;outline:none;border-radius:0;transition:.3s;font-size:15px;color:var(--ink);
}
.hg .form-grid textarea{border:1px solid var(--line);padding:12px;resize:vertical;border-radius:6px}
.hg .form-grid input:focus,.hg .form-grid select:focus,.hg .form-grid textarea:focus{border-color:var(--gold)}
.hg .form-grid .wpcf7-list-item{margin:0}
.hg .form-grid .wpcf7-acceptance .wpcf7-list-item-label,
.hg .form-grid .full > .wpcf7-form-control-wrap + *{color:var(--muted)}
.hg .wpcf7-acceptance label{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--muted);line-height:1.6}
.hg .wpcf7-acceptance input[type=checkbox]{margin-top:5px;accent-color:var(--gold);width:auto}

/* CF7's submit button has to be pulled into the design system too. */
.hg .wpcf7-submit,
.hg input[type=submit].wpcf7-submit{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:16px 30px;border:1px solid var(--gold);
  background:var(--gold);color:#fff;border-radius:0;cursor:pointer;transition:.35s var(--ease);
  width:auto;
}
.hg .wpcf7-submit:hover{background:#96601a;border-color:#96601a}
.hg .wpcf7-not-valid-tip{color:#A5372B;font-size:12.5px;margin-top:6px}
.hg .wpcf7-response-output{
  border:1px solid var(--line-gold)!important;background:rgba(247,229,194,.3);
  padding:14px 18px!important;margin:22px 0 0!important;font-size:14px;border-radius:8px;
}
.hg .wpcf7-spinner{margin-left:12px}

/* ---------- Contact ---------- */
.hg .contact-line{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.hg .contact-line dt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  width:130px;flex:none}
.hg .contact-line dd{font-size:15.5px;color:var(--ink-2);margin:0}
.hg .ph{color:var(--muted);font-style:italic;font-size:14px}
/* Inside a narrow card the 130px term column starves the definition,
   so stack the term above its value instead of sitting beside it. */
.hg .card .contact-line{flex-direction:column;gap:5px;padding:14px 0}
.hg .card .contact-line dt{width:auto}

/* ---------- Rich page banners ---------- */
.hg .banner-rich{
  position:relative;overflow:hidden;color:#fff;border:0;
  padding:clamp(62px,8vw,112px) 0;
  background:
    radial-gradient(100% 92% at 88% 50%,rgba(255,226,172,.28),transparent 60%),
    linear-gradient(158deg,#BB6520,#9E4E15 55%,#843D10);
}
.hg .banner-rich h1{color:#fff}
.hg .banner-rich .lead{color:rgba(255,255,255,.76)}
.hg .banner-rich .wrap{position:relative;z-index:2}
.hg .banner-wheel{
  position:absolute;right:-7%;top:50%;transform:translateY(-50%);
  width:min(48vw,580px);color:var(--gold-lt);opacity:.3;pointer-events:none;z-index:1;
}

/* ---------- Sticky WhatsApp ----------
   Icon only, in WhatsApp's own green: that colour is the affordance people
   recognise, which matters more here than matching the palette. */
.hg-wa{
  position:fixed;right:22px;bottom:22px;z-index:70;
  width:56px;height:56px;padding:0;border-radius:999px;
  background:#25D366;color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 30px -12px rgba(16,88,44,.55),0 2px 8px rgba(0,0,0,.14);
  transition:transform .35s var(--ease),background .35s var(--ease);
}
.hg-wa svg{width:29px;height:29px;fill:currentColor;display:block}
.hg-wa:hover{background:#1DA851;color:#fff;transform:translateY(-3px) scale(1.05)}
.hg-wa:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:600px){
  .hg-wa{right:16px;bottom:16px;width:52px;height:52px}
  .hg-wa svg{width:27px;height:27px}
}
@media (prefers-reduced-motion:reduce){
  .hg-wa{transition:none}
  .hg-wa:hover{transform:none}
}

/* ============================================================
   HEADER · TOP BAR · NAV
   ============================================================ */
.hg .topbar{
  background:var(--ink);color:rgba(255,255,255,.8);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;padding:9px 0;
}
.hg .topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}
.hg .topbar a{color:inherit}
.hg .topbar a:hover{color:var(--gold-lt)}

.hg nav.site{
  position:sticky;top:0;z-index:60;background:rgba(253,249,243,.93);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line);
}
.hg nav.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;padding-block:16px;position:relative}
.hg .brand{display:flex;align-items:center;gap:13px}
.hg .brand-mark{
  width:40px;height:40px;flex:none;border:1px solid var(--gold);display:grid;
  place-items:center;font-family:'Cormorant Garamond',serif;font-size:15px;color:var(--gold);
  letter-spacing:.06em;line-height:1;position:relative;
}
.hg .brand-mark::after{content:"";position:absolute;inset:4px;border:1px solid var(--line-gold);opacity:.5}
.hg .brand-name{font-family:'Cormorant Garamond',serif;font-size:20px;letter-spacing:.05em;line-height:1.1;display:block;color:var(--ink)}
.hg .brand-sub{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);display:block}
.hg .navlinks{display:flex;gap:30px;align-items:center}
.hg .navlinks a{
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:6px 0;border-bottom:1px solid transparent;transition:.3s var(--ease);
}
.hg .navlinks a:hover{color:var(--ink)}
.hg .navlinks a.on{color:var(--ink);border-color:var(--gold)}
.hg .navtoggle{display:none;font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* ============================================================
   FOOTER
   ============================================================ */
.hg .hg-footer{background:var(--ink);color:rgba(255,255,255,.62);padding:clamp(56px,6vw,84px) 0 0}
.hg .hg-footer h5{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:20px}
.hg .hg-footer a{color:inherit}
.hg .hg-footer a:hover{color:var(--gold-lt)}
.hg .hg-footer p{color:rgba(255,255,255,.62)}
.hg .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:44px}
.hg .fgrid ul{list-style:none;font-size:14px;padding:0;margin:0}
.hg .fgrid li{margin-bottom:10px;list-style:none}
.hg .fbrand .brand-mark{border-color:var(--gold-lt);color:var(--gold-lt)}
.hg .fbrand .brand-name{color:#fff}
.hg .fbrand .brand-sub{color:rgba(255,255,255,.5)}
.hg .fbot{margin-top:56px;border-top:1px solid rgba(255,255,255,.12);padding:24px 0;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12px}
.hg .disclaimer{font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.45)!important;
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;margin-top:36px}

/* ============================================================
   ELEMENTOR BRIDGE
   Elementor puts _css_classes on the widget WRAPPER, so the
   design-system styles have to reach through to the inner tag.
   ============================================================ */
.hg .elementor-section.ink,
.hg .elementor-section.ink .elementor-heading-title,
.hg .elementor-section.ink p{color:#fff}
.hg .elementor-section.ink p{color:rgba(255,255,255,.72)}
.hg .hg-center{text-align:center}
.hg .hg-center .elementor-widget-container{text-align:center}
.hg .hg-center .eyebrow{justify-content:center}
.hg .hg-center .eyebrow::after{content:"";width:26px;height:1px;background:var(--gold);opacity:.6}

/* Headings */
.hg .elementor-widget-heading.display .elementor-heading-title{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:-.015em;
  line-height:1.12;font-size:clamp(2rem,3.6vw,3.1rem);color:var(--ink);
}
.hg .elementor-section.ink .elementor-widget-heading.display .elementor-heading-title{color:#fff}

/* Eyebrow — the wrapper carries the rule, the inner tag the text */
.hg .elementor-widget-heading.eyebrow .elementor-widget-container{
  display:flex;align-items:center;gap:.7em;
}
.hg .elementor-widget-heading.eyebrow .elementor-widget-container::before{
  content:"";width:26px;height:1px;background:var(--gold);opacity:.6;flex:none;
}
.hg .elementor-widget-heading.eyebrow .elementor-heading-title{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);font-family:'Inter',sans-serif;
}
.hg .hg-center .elementor-widget-heading.eyebrow .elementor-widget-container{justify-content:center}
.hg .hg-center .elementor-widget-heading.eyebrow .elementor-widget-container::after{
  content:"";width:26px;height:1px;background:var(--gold);opacity:.6;flex:none;
}

/* Body copy inside text-editor widgets */
.hg .elementor-widget-text-editor{color:var(--muted);font-size:16px;line-height:1.7}
.hg .elementor-widget-text-editor p+p{margin-top:1.05em}
.hg .elementor-section.ink .elementor-widget-text-editor{color:rgba(255,255,255,.72)}

/* Buttons — override Elementor's defaults with the design system */
.hg .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:'Inter',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 30px;border:1px solid var(--gold);background:var(--gold);color:#fff;
  border-radius:0;transition:.35s var(--ease);fill:#fff;
}
.hg .elementor-button:hover,.hg .elementor-button:focus{background:#96601a;border-color:#96601a;color:#fff}
.hg .hg-btn-plain .elementor-button{background:transparent;color:var(--ink);border-color:var(--line)}
.hg .hg-btn-plain .elementor-button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hg .elementor-section.ink .hg-btn-plain .elementor-button{color:#fff;border-color:rgba(255,255,255,.34)}
.hg .elementor-section.ink .hg-btn-plain .elementor-button:hover{background:#fff;color:var(--ink)}

/* Vertical rhythm between stacked widgets */
.hg .elementor-widget-heading.eyebrow{margin-bottom:18px}
.hg .elementor-widget-heading.display{margin-bottom:20px}
.hg .elementor-widget-text-editor{margin-bottom:26px}
.hg .elementor-widget-shortcode{margin-bottom:0}
.hg .elementor-widget-button{margin-top:8px}

/* Elementor's default 10px column padding fights the design grid */
.hg .elementor-column-gap-default > .elementor-column > .elementor-element-populated{padding:0 14px}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .hg .svc-picker{grid-template-columns:1fr 1fr}
  .hg .sd-head{grid-template-columns:auto 1fr;gap:20px}
  .hg .sd-buy{grid-column:1/-1;text-align:left;min-width:0}
  .hg .sd-buy .svc-price{justify-content:flex-start}
  .hg .sd-durnote{margin-left:0}
  .hg .ben-grid{grid-template-columns:1fr}
  .hg .stepcards{grid-template-columns:1fr 1fr;gap:22px}
  .hg .stepcard:nth-child(2n)::after{display:none}
  .hg .stepcard:not(:last-child)::after{right:-22px;width:22px}
  .hg .tslider-track{grid-auto-columns:calc((100% - 22px)/2)}
  .hg .fgrid{grid-template-columns:1fr 1fr}
  .hg .insight{grid-template-columns:1fr 1fr;align-items:end}
  .hg .insight>div:first-child{grid-column:1/-1}
  .hg .b2{left:-2%}
}
@media(max-width:860px){
  .hg .wrap{padding:0 26px}
  .hg .hero2{grid-template-columns:1fr}
  /* Hero on phones: the portrait becomes a normal stacked item and the trust
     badges sit beneath it. Previously they were absolutely positioned over the
     subject, covering his face, and `.cutout.is-cutout` (three classes) out-
     specified the mobile width rule, so the portrait rendered full-width and
     bottom-aligned — cropping his head off the top. */
  .hg .hero-visual{
    order:-1;min-height:0;margin-bottom:12px;
    display:flex;flex-direction:column;align-items:center;gap:14px;
  }
  .hg .cutout,
  .hg .cutout.is-cutout{width:min(74%,290px);align-self:center}
  .hg .badge{
    position:static;transform:none;inset:auto;
    width:100%;max-width:320px;padding:10px 14px;
  }
  .hg .b3{display:none}

  /* Long CTA labels must be allowed to wrap. `white-space:nowrap` on .btn was
     forcing "Book Your Personal Numerology Reading" to 409px, which pushed the
     services page 58px wider than a 390px phone and made it scroll sideways. */
  .hg .btn{
    white-space:normal;max-width:100%;
    text-align:center;line-height:1.35;letter-spacing:.1em;padding:14px 22px;
  }
  .hg .btn-sm{padding:11px 18px}

  /* Contact form: collapse to one column. `min-width:0` matters as much as the
     column count — grid items default to min-width:auto, so the date picker and
     email input refused to shrink and pushed the right column off-screen. */
  .hg .form-grid{grid-template-columns:1fr;gap:22px}
  .hg .form-grid > *,
  .hg .form-grid .field{min-width:0}
  .hg .form-grid input,
  .hg .form-grid select,
  .hg .form-grid textarea{max-width:100%}
  .hg .wheel{width:132%;opacity:.4}
  .hg .insight{grid-template-columns:1fr}
  .hg .float-wrap{margin-top:-42px}
  .hg .banner-wheel{width:110vw;right:-40%;opacity:.16}
  .hg .feat-card{grid-template-columns:40px 1fr;gap:14px;padding:22px 20px}
  .hg .dots{justify-content:center}
  .hg .g2,.hg .g3,.hg .two-col{grid-template-columns:1fr}
  .hg .acc-inner,.hg .step{grid-template-columns:1fr}
  .hg .acc-head{grid-template-columns:44px 1fr 20px;gap:14px}
  .hg .calc-form{grid-template-columns:1fr}
  .hg .calc-out{grid-template-columns:1fr;gap:10px}
  .hg .calc-out .big-num{font-size:64px}
  .hg .tslider-track{grid-auto-columns:100%}
  .hg .svc-picker{grid-template-columns:1fr}
  .hg .sd-head{grid-template-columns:1fr;gap:16px}
  .hg .stepcards{grid-template-columns:1fr}
  .hg .stepcard:not(:last-child)::after{display:none}
  .hg .hg-steps-band::before{opacity:.28;right:-32%}

  /* Mobile navigation */
  .hg .navlinks{display:none}
  .hg .navlinks.open{
    display:flex;flex-direction:column;align-items:flex-start;gap:16px;position:absolute;
    top:100%;left:0;right:0;background:var(--ivory);border-bottom:1px solid var(--line);
    padding:24px 26px;z-index:70;
  }
  .hg .navtoggle{display:block}
  /* Tap targets: 33px links are below the 44px minimum for reliable touch. */
  .hg .navlinks.open a{padding:7px 0;min-height:44px;display:flex;align-items:center}
  .hg .hg-nav-cta{display:none}
  .hg .topbar .wrap span:last-child{display:none}
  .hg .fgrid{grid-template-columns:1fr}
}

/* ============================================================
   LEGAL / POLICY PAGES
   Plain prose pages (Privacy, Terms, Refunds, Delivery). No Elementor —
   the content is authored as HTML so it stays easy to amend, and these are
   pages a payment-gateway reviewer will actually read.
   ============================================================ */
.hg .hg-legal{padding:78px 0 96px}
.hg .hg-legal .wrap{max-width:860px}
.hg .hg-legal .updated{
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  padding-bottom:22px;margin-bottom:34px;border-bottom:1px solid var(--line-2);
}
.hg .hg-legal h2{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.25;color:var(--ink);
  margin:44px 0 14px;
}
.hg .hg-legal h2:first-of-type{margin-top:0}
.hg .hg-legal h3{
  font-family:'Inter',sans-serif;font-weight:600;font-size:15px;
  color:var(--ink);margin:26px 0 8px;
}
.hg .hg-legal p{font-size:15.4px;line-height:1.78;margin:0 0 15px;color:var(--muted)}
.hg .hg-legal strong{color:var(--ink);font-weight:600}
.hg .hg-legal a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.hg .hg-legal ul{margin:0 0 18px;padding:0;list-style:none}
.hg .hg-legal ul li{
  position:relative;padding-left:26px;margin-bottom:11px;
  font-size:15.4px;line-height:1.7;color:var(--muted);
}
.hg .hg-legal ul li::before{
  content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;
  border-radius:999px;border:1px solid var(--gold);
}
.hg .hg-legal .callout{
  margin:30px 0;padding:24px 26px;background:var(--ivory-2);
  border-left:2px solid var(--gold);border-radius:0 var(--r) var(--r) 0;
}
.hg .hg-legal .callout p:last-child{margin-bottom:0}
.hg .hg-legal .contact-block{
  margin-top:44px;padding:26px 28px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;
}
.hg .hg-legal .contact-block p{margin-bottom:6px}
@media(max-width:860px){
  .hg .hg-legal{padding:52px 0 68px}
  .hg .hg-legal .callout,.hg .hg-legal .contact-block{padding:20px}
}

/* Footer legal links — four labels need to wrap gracefully on a phone. */
.hg .fbot .flegal{display:flex;flex-wrap:wrap;gap:6px 10px;justify-content:flex-end}
.hg .fbot .flegal a{text-decoration:none;border-bottom:1px solid transparent}
.hg .fbot .flegal a:hover{border-bottom-color:currentColor}
@media(max-width:860px){
  .hg .fbot .flegal{justify-content:flex-start}
}

/* ============================================================
   MOBILE STACKING SPACE
   Elementor stacks columns below 768px, but gives them no vertical gap —
   so a stacked column sits flush against the one above it. On the home page
   that put the "About" eyebrow rule directly on the portrait's bottom edge,
   and on Contact it made the dark "Direct Contact" card butt into the submit
   button. Both looked like overlaps; both were simply zero spacing.
   ============================================================ */
@media(max-width:767px){
  .hg .elementor-container > .elementor-column + .elementor-column{margin-top:38px}

  /* Inner sections nest columns too, but need a lighter gap. */
  .hg .elementor-inner-section .elementor-container > .elementor-column + .elementor-column{
    margin-top:24px;
  }
}

/* A little more air under the eyebrow rule before the heading it introduces. */
@media(max-width:860px){
  .hg .elementor-widget-heading.eyebrow{margin-bottom:24px}
  .hg .eyebrow{margin-bottom:16px}
}

/* Reassurance line under a service's payment button. */
.hg .sd-secure{
  margin-top:10px;font-size:11.5px;letter-spacing:.04em;color:var(--muted);
  display:flex;align-items:center;gap:.5em;
}
.hg .sd-buy .sd-secure{justify-content:flex-end}
@media(max-width:1000px){
  .hg .sd-buy .sd-secure{justify-content:flex-start}
}