/* ============================================================
   VINORA EVENTS — traditional.css   (loaded LAST)

   Direction: rich traditional — an Indian wedding-invite feel.
   Warm aubergine + gold + marigold + vermillion on ivory,
   mehrab (temple-arch) image frames, mandala watermarks,
   paisley section dividers, ornate double-gold borders,
   and calmer, more reliable motion.
   ============================================================ */

/* ============================================================
   1. PALETTE — warmed up, with marigold and vermillion added
   ============================================================ */
:root{
  /* brand palette: Royal Purple #6B075C and Metallic Gold #D4A017 from the logo */
  --plum-900:#2c0126;
  --plum-800:#48033e;
  --plum-700:#5c0550;
  --plum-600:#6b075c;
  --plum-500:#990a84;
  --plum-400:#c610ab;
  --plum-300:#ea3ed0;
  --plum-100:#fbe9f9;

  /* gold */
  --gold-900:#6d5109;
  --gold-700:#aa7f0e;
  --gold-500:#d4a017;
  --gold-400:#f3c13f;
  --gold-300:#f8d881;
  --gold-100:#fcf1d5;

  /* new traditional accents */
  --marigold:#e8952f;
  --marigold-2:#f6c05a;
  --vermillion:#a51e33;
  --henna:#8c4a1f;

  /* warmer paper */
  --ivory:#fdf7ec;
  --ivory-2:#f8efdf;
  --ink:#2c1226;
  --muted:#7d6570;
  --line:#ead9c4;

  --grad-gold:linear-gradient(135deg,#fcf1d5 0%,#f8d881 17%,#d4a017 46%,#aa7f0e 68%,#f3c13f 100%);
  --grad-plum:linear-gradient(135deg,#990a84 0%,#2c0126 100%);
  --grad-marigold:linear-gradient(135deg,#f6c05a 0%,#e8952f 55%,#c9701c 100%);
  --shadow:0 22px 52px rgba(72,16,74,.20);
}

/* a faint handmade-paper wash under the whole site */
body{
  background-color:var(--ivory);
  background-image:
    radial-gradient(circle at 12% 8%,rgba(212,160,23,.05),transparent 42%),
    radial-gradient(circle at 88% 30%,rgba(115,32,117,.05),transparent 40%),
    radial-gradient(circle at 50% 96%,rgba(212,160,23,.06),transparent 45%);
  /* background-attachment:fixed removed - it causes blank repaints while scrolling */
}

/* ============================================================
   2. ORNAMENTS
   ============================================================ */

/* --- mandala watermark, used behind section heads --- */
.sec{position:relative}
.sec.orn:before{
  content:"";position:absolute;left:50%;top:-70px;width:380px;height:380px;
  transform:translateX(-50%);pointer-events:none;z-index:0;opacity:.16;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23d4a017' stroke-width='1.1'%3E%3Ccircle cx='100' cy='100' r='94'/%3E%3Ccircle cx='100' cy='100' r='74'/%3E%3Ccircle cx='100' cy='100' r='40'/%3E%3Ccircle cx='100' cy='100' r='22'/%3E%3Cg%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3Cg transform='rotate(30 100 100)'%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3Cg transform='rotate(60 100 100)'%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3Cg transform='rotate(90 100 100)'%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3Cg transform='rotate(120 100 100)'%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3Cg transform='rotate(150 100 100)'%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3Cg transform='rotate(180 100 100)'%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3Cg transform='rotate(210 100 100)'%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3Cg transform='rotate(240 100 100)'%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3Cg transform='rotate(270 100 100)'%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3Cg transform='rotate(300 100 100)'%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3Cg transform='rotate(330 100 100)'%3E%3Cellipse cx='100' cy='57' rx='13' ry='31'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  /* static: an infinite rotate here kept a large layer compositing forever */
}
@keyframes mandalaSpin{to{transform:translateX(-50%) rotate(360deg)}}

/* --- paisley + rule divider, dropped between sections --- */
.divider{
  display:flex;align-items:center;justify-content:center;gap:18px;
  padding:0;margin:0 auto;max-width:1260px;
}
.divider:before,.divider:after{
  content:"";flex:1;max-width:190px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-500));
}
.divider:after{background:linear-gradient(270deg,transparent,var(--gold-500))}
.divider i{
  width:44px;height:44px;flex:none;display:block;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23d4a017' stroke-width='1.4'%3E%3Cpath d='M30 6c9 7 13 14 13 21 0 8-6 13-13 13s-13-5-13-13c0-7 4-14 13-21z'/%3E%3Cpath d='M30 16c4 4 6 8 6 12 0 4-3 7-6 7s-6-3-6-7c0-4 2-8 6-12z'/%3E%3C/g%3E%3Ccircle cx='30' cy='50' r='3.4' fill='%23d4a017'/%3E%3C/svg%3E");
}
.divider.on-dark:before{background:linear-gradient(90deg,transparent,rgba(242,214,147,.6))}
.divider.on-dark:after{background:linear-gradient(270deg,transparent,rgba(242,214,147,.6))}

/* --- ornate double-gold frame, for cards that deserve it --- */
.orn-frame{position:relative}
.orn-frame:before{
  content:"";position:absolute;inset:7px;border:1px solid rgba(212,160,23,.42);
  border-radius:inherit;pointer-events:none;z-index:3;
}

/* --- corner flourishes --- */
.orn-corners:before,.orn-corners:after{
  content:"";position:absolute;width:26px;height:26px;pointer-events:none;z-index:4;
  border-color:var(--gold-500);border-style:solid;border-width:0;opacity:.75;
}
.orn-corners:before{top:10px;left:10px;border-top-width:1.5px;border-left-width:1.5px;border-top-left-radius:6px}
.orn-corners:after{bottom:10px;right:10px;border-bottom-width:1.5px;border-right-width:1.5px;border-bottom-right-radius:6px}

/* ============================================================
   3. SECTION HEADS — kalash rule instead of a plain eyebrow
   ============================================================ */
.eyebrow{color:transparent;background:var(--grad-marigold);
  -webkit-background-clip:text;background-clip:text}
.eyebrow:before,.eyebrow:after{background:var(--marigold);opacity:.65;height:1px}
.sec-title em,h1 em,h2 em{background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent}

.sec-head{position:relative;z-index:1}
.sec-head:after{
  content:"";display:block;width:64px;height:12px;margin:18px auto 0;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 12'%3E%3Cg stroke='%23d4a017' stroke-width='1.2' fill='none'%3E%3Cpath d='M0 6h22M42 6h22'/%3E%3C/g%3E%3Cpath d='M32 1l3.4 5L32 11l-3.4-5z' fill='%23d4a017'/%3E%3C/svg%3E");
}

/* ============================================================
   4. LAYOUTS — mehrab arches replace the plain rounded cards
   ============================================================ */

/* --- Services: arch-topped cards, ornate frame, 3 across --- */
.svc2{grid-template-columns:repeat(3,1fr);gap:26px;perspective:none}
.svc2-card{
  border-radius:180px 180px 16px 16px;
  box-shadow:0 14px 34px rgba(72,16,74,.14);
  border:1px solid rgba(212,160,23,.35);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s;
  transform-style:flat;
}
.svc2-card:before{
  content:"";position:absolute;inset:8px;z-index:5;pointer-events:none;
  border:1px solid rgba(242,214,147,.4);border-radius:172px 172px 10px 10px;
}
.svc2-card > a{height:430px;border-radius:inherit;overflow:hidden}
.svc2-card:hover{transform:translateY(-10px);box-shadow:0 28px 56px rgba(72,16,74,.26);
  border-color:var(--gold-500)}
.svc2-card:hover img{transform:scale(1.07)}
.svc2-card .num{
  top:auto;bottom:auto;top:26px;right:50%;transform:translateX(50%);
  font-size:22px;letter-spacing:.1em;
}
.svc2-card:hover .num{transform:translateX(50%)}
.svc2-card .ic{margin:0 auto 14px;border-color:rgba(242,214,147,.6)}
.svc2-card:hover .ic{transform:none;background:var(--grad-marigold);color:#2c1226;border-color:transparent}
.svc2-card .body{text-align:center;padding:26px 26px 30px}
.svc2-card .kicker{color:var(--marigold-2)}
.svc2-card .go{margin:16px auto 0}

/* --- Stats: an ornate gold band --- */
.stats{
  background:var(--grad-plum);border-block:1px solid rgba(212,160,23,.4);
  position:relative;
}
.stats:before,.stats:after{
  content:"";position:absolute;left:0;right:0;height:1px;background:rgba(242,214,147,.35)
}
.stats:before{top:6px}.stats:after{bottom:6px}
.stats .stat{border-right:1px solid rgba(242,214,147,.22)}
.stats .stat:last-child{border-right:0}
.stats .stat .ic{background:rgba(242,214,147,.12);border-color:rgba(242,214,147,.4);color:var(--gold-300)}
.stats .stat:hover .ic{background:var(--grad-marigold);color:#2c1226;transform:none}
.stats .stat b{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats .stat span{color:#d8bfd0}
.stat:hover{transform:translateY(-5px)}

/* --- About: arch-framed collage --- */
.ab-grid figure,.ab-grid .tall{transform:none;border-radius:0}
.ab-grid .tall{border-radius:140px 140px 8px 8px;border:1px solid rgba(212,160,23,.4)}
.ab-grid figure:not(.tall){border-radius:8px;border:1px solid rgba(212,160,23,.28)}
.ab-3d{transform:none !important}
.about-art{perspective:none}
.quote-card{transform:none;border-radius:8px 90px 90px 8px;
  border:1px solid rgba(242,214,147,.35)}
.exp{transform:none;background:var(--grad-marigold);color:#2c1226}
.badge{transform:none;animation:none;border-color:rgba(212,160,23,.4)}
.badge .leaf{animation:none;color:var(--marigold)}
.ab-pills div:hover{transform:translateY(-5px)}
.about2 .tick{background:rgba(212,160,23,.16);color:var(--henna)}
.about2 .ab-list li:hover .tick{background:var(--grad-marigold);color:#2c1226;transform:none}

/* --- Process: mandala medallions, flat --- */
.steps{perspective:none}
.step2{transform-style:flat;border-radius:120px 120px 16px 16px;padding:0 26px 32px;
  border:1px solid rgba(212,160,23,.32)}
.step2:hover{transform:translateY(-8px);border-color:var(--gold-500)}
.step2 .ring{transform:none;background:var(--grad-plum);
  box-shadow:0 10px 24px rgba(72,16,74,.3)}
.step2 .ring:before{border-color:var(--gold-500);animation:spin2 40s linear infinite}
.step2:hover .ring{transform:none;background:var(--grad-marigold);color:#2c1226}
.step2 .ic{transform:none;background:rgba(212,160,23,.14);color:var(--henna);border-radius:50%}
.step2:hover .ic{transform:none;background:var(--grad-gold);color:#fff}
.step2 .chip{background:rgba(212,160,23,.14);color:var(--henna)}
.step2:hover .chip{background:rgba(212,160,23,.24);color:var(--gold-900)}
.steps-line{background:repeating-linear-gradient(90deg,var(--gold-500) 0 6px,transparent 6px 14px)}

/* --- Gallery coverflow: arch tops, gentler rotation --- */
.g-stage{perspective:2600px}
.cf{border-radius:150px 150px 14px 14px;border:1px solid rgba(212,160,23,.3)}
.cf.act{box-shadow:0 30px 66px rgba(72,16,74,.4)}
.cf:not(.act){filter:brightness(.68) saturate(.9)}

/* --- Themes: arch cards --- */
.themes{perspective:none}
.theme{border-radius:150px 150px 14px 14px;border:1px solid rgba(212,160,23,.3);
  transform-style:flat}
.theme:hover{transform:translateY(-9px)}
.theme .cap span{color:var(--marigold-2)}

/* --- Why / dark band: mandala + marigold icons --- */
.why{background:var(--grad-plum)}
.feat{border-color:rgba(242,214,147,.2);border-radius:100px 100px 14px 14px;transform-style:flat}
.feat:hover{transform:translateY(-8px);border-color:rgba(242,214,147,.45)}
.feat i{border-color:rgba(242,214,147,.4);color:var(--gold-300)}
.feat:hover i{transform:none;background:var(--grad-marigold);color:#2c1226;border-color:transparent}

/* --- Testimonials --- */
.testi{background:var(--ivory-2)}
.t-ph:before{border-color:var(--gold-500);animation:spin2 44s linear infinite}
.t-body{transform-style:flat}
.t-body.out{transform:translateY(10px)}
.t-arw:hover{background:var(--grad-marigold);color:#2c1226}
.t-dots i.on{background:var(--grad-marigold)}

/* --- FAQ, areas, press, addons, packages: flatten + warm --- */
.faq-list,.keyfacts,.addons,.press,.ab-pills,.pack-grid{perspective:none}
.faq{border-radius:14px}
.faq.on{transform:none;border-color:var(--gold-500)}
.faq button:after{border-color:var(--marigold)}
.area-grid{perspective:none}
.area-grid a:hover{transform:translateY(-3px);background:var(--grad-plum);color:var(--gold-300)}
.area-grid a svg{color:var(--marigold)}
.press div:hover,.addon:hover,.keyfacts div:hover,.post:hover,.info-card:hover{transform:translateY(-6px)}
.post{border-radius:90px 90px 16px 16px;transform-style:flat}
.post .ph{border-radius:88px 88px 0 0}
.post .cat{background:var(--grad-marigold);color:#2c1226}
.pack:hover{transform:translateY(-8px)}
.pack.hot{transform:none}
.pack.hot:hover{transform:translateY(-8px)}
.pack-ic{border-radius:50%}
.pack:hover .pack-ic{transform:none;background:var(--grad-marigold);color:#2c1226}
.tag{background:var(--grad-marigold);color:#2c1226}

/* --- buttons: gold stays, marigold on the hover fill --- */
.btn:before{background:var(--grad-plum)}
.btn.line{border-color:var(--gold-500);color:var(--plum-700)}
.insta a:hover{transform:scale(1.03)}
.insta{perspective:none}

/* --- marquees warm up --- */
.marq{background:var(--grad-plum)}
.marq-t span:after{color:var(--marigold)}
.ven-t span:after{color:var(--marigold)}

/* ============================================================
   5. CALMER MOTION
   Big 3D rotations were the least reliable part of the site and
   the first thing to break in a slow or non-compositing renderer.
   Everything now lifts and fades instead of rotating in space.
   ============================================================ */
.rv{transform:translateY(26px)}
.rv-l{transform:translateX(-30px)}
.rv-r{transform:translateX(30px)}
.rv-s{transform:translateY(22px) scale(.985)}
.rv,.rv-l,.rv-r,.rv-s{transition:opacity .7s var(--ease),transform .7s var(--ease)}

.blob{opacity:.1}
.petals .petal{opacity:.35 !important}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .svc2{grid-template-columns:repeat(2,1fr)}
  .svc2-card > a{height:400px}
  .sec.orn:before{width:280px;height:280px;top:-46px}
}
@media(max-width:880px){
  .stats .stat{border-right:0}
}
@media(max-width:620px){
  .svc2{grid-template-columns:1fr}
  .svc2-card{border-radius:150px 150px 14px 14px}
  .svc2-card:before{border-radius:142px 142px 8px 8px}
  .svc2-card > a{height:360px}
  .sec.orn:before{width:210px;height:210px;top:-30px;opacity:.13}
  .divider:before,.divider:after{max-width:70px}
  .divider i{width:34px;height:34px}
  .theme,.cf,.post{border-radius:110px 110px 12px 12px}
  .post .ph{border-radius:108px 108px 0 0}
  .step2{border-radius:90px 90px 14px 14px}
  .feat{border-radius:80px 80px 12px 12px}
  .ab-grid .tall{border-radius:100px 100px 8px 8px}
}

/* ============================================================
   7. TYPEFACES — warm and traditional
   Bodoni was a didone: cold, spindly hairlines, fashion-magazine.
   Wrong voice for a wedding brand. Cormorant Garamond is the
   classic invitation face — warm, calligraphic, with a genuinely
   beautiful italic for the gold accent words. Body moves from
   the geometric Manrope to Mulish, which is friendlier.
   These override the variables and the Bodoni block in type.css.
   ============================================================ */
:root{
  --font-display:'Bodoni Moda','Prata',Georgia,'Times New Roman',serif;
  --font-body:'Jost','Mulish',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-caps:'Marcellus','Cinzel',Georgia,serif;
  --font-script:'Great Vibes',cursive;
}

/* Cormorant runs small and light — everything scales up and gains weight,
   and the didone tracking/optical-size hacks are cleared. */
h1,h2,h3,h4,.sec-title,.faq button,.svc2-card .num,.step2 .n,
.stat b,.keyfacts b,.ab-pills b,.pack .price,.logo-txt b,
.hero h1,.phero h1{font-variation-settings:normal;font-optical-sizing:auto}

h1,h2,h3,h4{font-weight:500;letter-spacing:-.012em;line-height:1.1}
h1{font-weight:400;line-height:1.04}
h2{font-weight:400;line-height:1.1}

.hero h1{font-size:clamp(40px,6.1vw,74px);font-weight:600;line-height:1.05;letter-spacing:.004em}
.phero h1{font-size:clamp(33px,5vw,58px);font-weight:600;line-height:1.08;letter-spacing:.006em}
.sec-title{font-size:clamp(34px,4.7vw,62px);font-weight:400;line-height:1.08;letter-spacing:-.02em}

/* the italic is the point of this face — let the gold accents sing */
.sec-title em,h1 em,h2 em{font-style:italic;font-weight:600;letter-spacing:.014em}

/* small headings need real weight or Cormorant goes wispy */
.svc2-card h3,.step2 h3,.feat h3,.post h3,.pack h3,.t-card h3,
.info-card h4,.addon h4,.face.back h4,.press b,.footer h4,
.seo-body h2{font-weight:400;letter-spacing:-.016em}
.seo-body h3,.theme .cap h3{font-weight:500;letter-spacing:-.008em}

.svc2-card h3{font-size:27px}
.step2 h3{font-size:24px}
.feat h3{font-size:22px}
.t-card h3{font-size:36px;font-weight:600}
.footer h4{font-size:21px}
.faq button{font-family:var(--font-display);font-size:22px;font-weight:500;letter-spacing:-.008em}

/* numerals stay solid */
.stat b,.keyfacts b,.ab-pills b,.pack .price,.svc2-card .num,.step2 .n,.exp b{
  font-weight:700;letter-spacing:.012em}
.stat b{font-size:38px}
.step2 .n{font-size:30px}

/* body copy: Mulish is a touch smaller on the eye than Manrope */
body{font-size:16px;line-height:1.75;letter-spacing:0}
.sec-head p{font-size:16px}
.hero p{font-size:16.5px;line-height:1.72}
.seo-body p,.seo-body li{font-size:16px;line-height:1.8}
.t-card blockquote{font-size:16.5px;font-weight:300}
.btn{font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:.12em}
.nav > a,.drop > a{font-weight:600;font-size:15px}

.logo-txt b{font-weight:700;letter-spacing:.16em}
.quote-card .serif{font-size:24px;font-weight:600}

@media(max-width:880px){
  .hero h1{font-size:clamp(34px,7vw,50px)}
  .sec-title{font-size:clamp(32px,6.4vw,46px)}
  .t-card h3{font-size:30px}
}
@media(max-width:620px){
  body{font-size:15.5px}
  .hero h1{font-size:36px;line-height:1.08}
  .phero h1{font-size:31px}
  .sec-title{font-size:31px}
  .svc2-card h3{font-size:24px}
  .step2 h3{font-size:22px}
  .faq button{font-size:18px}
  .stat b{font-size:31px}
}

/* ============================================================
   8. SCROLL REVEALS NEVER HIDE CONTENT
   Every section was opacity:0 until an IntersectionObserver
   added .in and a transition faded it up. If the transition does
   not run — frozen tab, slow device, reduced motion, a renderer
   that skips it — whole sections stay blank. That is what made
   the page look empty below the hero.

   The reveal is now a slide only. Content is visible at all
   times; .in just settles it into place.
   ============================================================ */
.rv,.rv-l,.rv-r,.rv-s{opacity:1 !important}
.rv{transform:translateY(24px)}
.rv-l{transform:translateX(-26px)}
.rv-r{transform:translateX(26px)}
.rv-s{transform:translateY(20px)}
.rv.in,.rv-l.in,.rv-r.in,.rv-s.in{transform:none}
.rv,.rv-l,.rv-r,.rv-s{transition:transform .7s var(--ease)}

/* the same guarantee for the counters: show the final number if
   the count-up never runs */
.cnt:empty:after{content:attr(data-to) attr(data-suf)}

/* ============================================================
   9. TESTIMONIALS — image-free ornate quote cards
   The rotating single card leaned on a stock "client" headshot,
   which read as filler. All five quotes are now on screen at
   once in arched, gold-framed cards. No photos, no rotation, no
   JS dependency — nothing to fail.
   ============================================================ */
.testi{background:var(--ivory-2);overflow:hidden}
.t-row,.t-card,.t-arw,.t-ph,.t-photo,.t-dots,.t-quote{display:none !important}

.tgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;position:relative;z-index:1}

.tq{
  flex:1 1 320px;max-width:390px;position:relative;
  background:#fff;border:1px solid rgba(212,160,23,.38);
  border-radius:110px 110px 16px 16px;
  padding:58px 30px 30px;text-align:center;
  box-shadow:0 14px 34px rgba(72,16,74,.10);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s;
}
.tq:before{
  content:"";position:absolute;inset:8px;pointer-events:none;
  border:1px solid rgba(242,214,147,.55);border-radius:102px 102px 10px 10px;
}
.tq:hover{transform:translateY(-8px);border-color:var(--gold-500);
  box-shadow:0 28px 56px rgba(72,16,74,.2)}

.tq .qm{
  position:absolute;top:22px;left:50%;transform:translateX(-50%);
  font-family:var(--font-display);font-size:64px;line-height:.8;font-weight:700;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;
  color:transparent;opacity:.85;
}
.tq blockquote{
  font-family:var(--font-body);font-size:15px;line-height:1.78;font-style:italic;
  font-weight:300;color:#5b4258;margin:0 0 18px;
}
.tq .stars{display:block;color:var(--gold-500);letter-spacing:4px;font-size:15px;margin-bottom:12px}
.tq .who{
  display:block;font-family:var(--font-display);font-size:19px;font-weight:700;
  color:var(--plum-700);letter-spacing:.01em;
}
.tq .where{
  display:block;font-family:var(--font-caps);font-size:9.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--marigold);margin-top:5px;
}
.tq .rule{
  display:block;width:44px;height:10px;margin:16px auto 0;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 10'%3E%3Cg stroke='%23d4a017' stroke-width='1' fill='none'%3E%3Cpath d='M0 5h14M30 5h14'/%3E%3C/g%3E%3Ccircle cx='22' cy='5' r='2.6' fill='%23d4a017'/%3E%3C/svg%3E");
}

/* the trust line above the grid */
.t-trust{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin:0 auto 38px;font-family:var(--font-caps);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.t-trust b{
  font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:0;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.t-trust .sep{width:1px;height:18px;background:var(--gold-500);opacity:.5}

@media(max-width:1080px){.tq{flex:1 1 300px}}
@media(max-width:620px){
  .tq{flex:1 1 100%;max-width:none;border-radius:90px 90px 14px 14px;padding:50px 24px 26px}
  .tq:before{border-radius:84px 84px 10px 10px}
  .tq .qm{font-size:52px;top:18px}
  .tq blockquote{font-size:14.5px}
  .t-trust{gap:10px;font-size:10px;margin-bottom:28px}
  .t-trust b{font-size:22px}
}

/* ============================================================
   10. FOUR-PILLAR MEGA MENU
   ============================================================ */
.drop-menu.mega.four{grid-template-columns:repeat(4,1fr);min-width:min(940px,94vw)}
.mega .more-link{
  margin-top:6px;font-family:var(--font-caps);font-size:9.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--marigold);
}
.mega .more-link:hover{background:transparent;color:var(--gold-700);transform:translateX(4px)}

/* ============================================================
   11. SERVICES HUB — four pillars
   ============================================================ */
.pillar{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;margin-bottom:64px}
.pillar:last-child{margin-bottom:0}
.pillar:nth-child(even) .pillar-art{order:-1}
.pillar-art{position:relative;border-radius:170px 170px 16px 16px;overflow:hidden;
  border:1px solid rgba(212,160,23,.4);box-shadow:0 16px 40px rgba(72,16,74,.14)}
.pillar-art:before{content:"";position:absolute;inset:8px;z-index:3;pointer-events:none;
  border:1px solid rgba(242,214,147,.45);border-radius:162px 162px 10px 10px}
.pillar-art img{width:100%;height:420px;object-fit:cover;transition:1s var(--ease)}
.pillar:hover .pillar-art img{transform:scale(1.05)}
.pillar-art .n{position:absolute;top:24px;left:50%;transform:translateX(-50%);z-index:4;
  font-family:var(--font-display);font-size:26px;font-weight:700;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}

.pillar h3{font-size:clamp(26px,3.1vw,36px);font-weight:700;margin:12px 0 12px}
.pillar h3 em{font-style:italic;background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pillar > div > p{color:var(--muted);margin-bottom:20px;max-width:520px}
.pillar ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin:0 0 24px}
.pillar li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:#54425c;line-height:1.5}
.pillar li:before{content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;
  background:var(--grad-marigold)}
.pillar li a{border-bottom:1px solid rgba(212,160,23,.5);transition:.3s}
.pillar li a:hover{color:var(--gold-700);border-bottom-color:var(--gold-700)}

@media(max-width:980px){
  .drop-menu.mega.four{grid-template-columns:repeat(2,1fr)}
  .pillar{grid-template-columns:1fr;gap:26px;margin-bottom:48px}
  .pillar:nth-child(even) .pillar-art{order:0}
  .pillar-art img{height:320px}
}
@media(max-width:620px){
  .pillar ul{grid-template-columns:1fr}
  .pillar-art{border-radius:120px 120px 14px 14px}
  .pillar-art:before{border-radius:114px 114px 10px 10px}
  .pillar-art img{height:250px}
}

/* ============================================================
   12. HORIZONTAL SCROLL RAILS  (services + gallery)
   Native scroll-snap, no 3D, no transform maths — it works with
   a mouse wheel, a trackpad, a drag or the arrows, and it cannot
   break the way the coverflow did.
   ============================================================ */
.rail-wrap{position:relative}
.rail{
  display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:8px 4px 20px;margin:0 -4px;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.rail > *{scroll-snap-align:center;flex:0 0 auto}

.rail-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:20;
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid rgba(212,160,23,.5);color:var(--plum-700);
  box-shadow:0 10px 26px rgba(72,16,74,.18);transition:.4s var(--ease);
}
.rail-btn:hover{background:var(--grad-marigold);color:#2c1226;border-color:transparent;
  transform:translateY(-50%) scale(1.08)}
.rail-btn svg{width:17px;height:17px}
.rail-btn.prev{left:-14px}
.rail-btn.next{right:-14px}
.rail-btn[disabled]{opacity:.3;pointer-events:none}

/* progress bar under the rail */
.rail-bar{height:2px;background:rgba(212,160,23,.22);border-radius:2px;margin:6px auto 0;max-width:280px;position:relative}
.rail-bar i{position:absolute;left:0;top:-1px;height:4px;border-radius:4px;width:30%;
  background:var(--grad-gold);transition:left .25s linear,width .25s linear}
.rail-hint{text-align:center;margin-top:14px;font-family:var(--font-caps);font-size:9.5px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* --- services rail: cards get a fixed width --- */
.svc-rail > .svc2-card{width:min(360px,82vw)}
.svc-rail > .svc2-card > a{height:440px}

/* --- gallery rail --- */
.g-rail > figure{
  width:min(400px,84vw);height:440px;position:relative;overflow:hidden;cursor:pointer;
  border-radius:150px 150px 14px 14px;border:1px solid rgba(212,160,23,.4);
  box-shadow:0 14px 34px rgba(72,16,74,.14);transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.g-rail > figure:before{content:"";position:absolute;inset:8px;z-index:3;pointer-events:none;
  border:1px solid rgba(242,214,147,.45);border-radius:142px 142px 10px 10px}
.g-rail > figure:hover{transform:translateY(-8px);box-shadow:0 28px 56px rgba(72,16,74,.26)}
.g-rail img{width:100%;height:100%;object-fit:cover;transition:1s var(--ease)}
.g-rail > figure:hover img{transform:scale(1.06)}
.g-rail figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:4;padding:34px 22px 26px;text-align:center;
  font-family:var(--font-display);font-size:23px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(20,3,26,.9));
}
/* retire the old coverflow */
.g-stage,.g-arw{display:none !important}

@media(max-width:620px){
  .rail{gap:16px}
  .rail-btn{width:42px;height:42px}
  .rail-btn.prev{left:-6px}
  .rail-btn.next{right:-6px}
  .svc-rail > .svc2-card > a{height:380px}
  .g-rail > figure{height:360px;border-radius:120px 120px 12px 12px}
  .g-rail > figure:before{border-radius:114px 114px 8px 8px}
  .g-rail figcaption{font-size:20px}
}

/* ============================================================
   BOLD TYPE PASS
   Loaded last in the cascade, so this is the final word on
   weight. Cormorant Garamond ships 400-700 and Mulish 300-800,
   so every value below is a real weight — nothing is faux-
   bolded by the browser.
   ============================================================ */
body{font-weight:500}
p,li,dd,dt,td,th,label,input,textarea,select,button,a{font-weight:500}

h1,h2,h3,h4,h5,h6,
.sec-title,.hero h1,.phero h1,.seo-body h2,.seo-body h3,
.faq button,.quote-card .serif,.stat b,.md-brand{font-weight:700}

/* Italic display text one step down so it still reads as italic
   rather than as a heavier slab. */
.sec-title em,h1 em,h2 em,h3 em{font-weight:600}

/* Navigation, buttons and eyebrow caps carry the most weight —
   they are short and need to hold their own against the display
   serif around them. */
.nav > a,.drop > a,.drop-menu a,.topbar,.topbar a,
.btn,.btn-line,.field label,.eyebrow,.kicker,.logo-tag,
.crumbs,.crumbs a,.tag,.pill,.badge{font-weight:700}

.drop-menu h6,.md-head{font-weight:700}

/* Body copy inside cards and quotes: 500 keeps it readable at
   small sizes where 300 was going grey on mobile. */
.t-card blockquote,.lead,.sec-sub,.card p,.svc-card p,footer p{font-weight:500}

/* Mobile drawer */
#mdrawer a{font-weight:700}
#mdrawer .md-toggle{font-weight:700}
#mdrawer a.sub{font-weight:600}

/* ============================================================
   FLOATING CALL BUTTON
   Sits above the WhatsApp bubble on desktop. On mobile the
   sticky #mbar already carries a Call action, so this one is
   hidden there rather than stacking two call targets.
   ============================================================ */
#callfab{
  position:fixed;right:26px;bottom:146px;z-index:150;
  display:flex;align-items:center;gap:0;
  height:48px;padding:0;border-radius:24px;
  background:var(--grad-gold);color:var(--plum-800);
  box-shadow:0 12px 28px rgba(170,127,14,.42);
  overflow:hidden;white-space:nowrap;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
}
/* No padding here: box-sizing is border-box globally, so padding was
   eating the whole 22px box and the icon rendered at zero size.
   Margin gives the same 48px circle and keeps the glyph visible. */
#callfab svg{width:22px;height:22px;flex:0 0 22px;margin:0 13px}
#callfab span{
  max-width:0;opacity:0;
  font-family:var(--font-body);font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  transition:max-width .35s var(--ease),opacity .25s var(--ease);
}
#callfab:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(170,127,14,.5)}
#callfab:hover span{max-width:120px;opacity:1;padding-right:20px}

/* A ring that matches the WhatsApp bubble's pulse. */
#callfab:after{
  content:"";position:absolute;left:0;top:0;width:48px;height:48px;
  border-radius:50%;border:2px solid var(--gold-500,#d8a53a);
  animation:pulse 2.4s infinite;pointer-events:none;
}

@media(max-width:880px){
  #callfab{display:none}
}
@media(prefers-reduced-motion:reduce){
  #callfab,#callfab span{transition:none}
  #callfab:after{animation:none}
}

/* ------------------------------------------------------------
   Bold pass, part two: copy that a more specific rule had kept
   at 300 and so escaped the block above.
   ------------------------------------------------------------ */
.hero p,.phero p,.cta p,.t-card blockquote{font-weight:500}
.nav > a,.drop > a{font-weight:700}
/* .nav > a.active is (0,2,1) and was still winning at 500. */
.nav > a.active,.drop.active > a{font-weight:700}