/* ============================================================
   GLOSS + DEPTH
   Loads last, so it is the final word on surface treatment.

   Three ideas, applied consistently:
     1. Every raised surface gets a specular top edge (a 1px inset
        white line) and a two-part shadow — a tight contact shadow
        plus a wide soft one. That reads as glass, not as a border.
     2. Gold is a real gradient with a highlight band, not a flat
        fill, so buttons look lacquered.
     3. Depth comes from perspective and translateZ on hover, so
        cards lift toward the reader instead of just changing colour.

   Everything degrades cleanly: remove this file and the site is
   the flat version again.
   ============================================================ */

:root{
  /* Layered elevation. The first shadow is the contact shadow —
     short and tight; the second is the ambient one. */
  --lift-1:0 1px 2px rgba(46,8,58,.06), 0 6px 16px -8px rgba(46,8,58,.22);
  --lift-2:0 2px 4px rgba(46,8,58,.08), 0 18px 38px -16px rgba(46,8,58,.32);
  --lift-3:0 3px 6px rgba(46,8,58,.10), 0 34px 60px -22px rgba(46,8,58,.42);

  /* The specular edge that sells the glass. */
  --sheen-top:inset 0 1px 0 rgba(255,255,255,.92);
  --sheen-top-dark:inset 0 1px 0 rgba(255,255,255,.16);

  --glass-light:linear-gradient(157deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.74) 48%,rgba(250,244,236,.9) 100%);
  --glass-dark:linear-gradient(157deg,rgba(84,26,108,.62) 0%,rgba(38,7,52,.78) 52%,rgba(24,3,34,.9) 100%);

  --gold-lacquer:linear-gradient(150deg,#f6dfa4 0%,#e0b75c 26%,#c8912c 52%,#eccf87 74%,#b57f1e 100%);
}

/* ------------------------------------------------------------
   1. Raised surfaces
   ------------------------------------------------------------ */
.card,.info-card,.svc2-card,.quote-card,.pillar,.post,.pf-item,
.faq,.step2,.stat,.t-card{
  position:relative;
  background-image:var(--glass-light);
  box-shadow:var(--sheen-top),var(--lift-2);
  border-color:rgba(255,255,255,.7);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),
             box-shadow .5s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}

/* The gloss itself: a soft highlight pooled in the top-left, the
   way light falls on a curved glass surface. Kept behind content
   with a negative z-index on a pseudo-element so text stays crisp. */
.card:before,.info-card:before,.svc2-card:before,.quote-card:before,
.pillar:before,.post:before,.pf-item:before,.step2:before{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:radial-gradient(120% 80% at 12% 0%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 58%);
  pointer-events:none;
  z-index:0;
}
.card > *,.info-card > *,.svc2-card > *,.quote-card > *,
.pillar > *,.post > *,.pf-item > *,.step2 > *{position:relative;z-index:1}

/* Hover: lift toward the reader. translateZ needs a perspective on
   an ancestor, set on the grids below. */
.card:hover,.info-card:hover,.svc2-card:hover,.pillar:hover,
.post:hover,.pf-item:hover{
  transform:translateY(-6px) translateZ(22px) rotateX(1.4deg);
  box-shadow:var(--sheen-top),var(--lift-3);
}

/* Perspective lives on the container, not the card, so sibling
   cards share one vanishing point instead of each having its own. */
.grid,.cards,.svc2-grid,.pillars,.posts,.pf-grid,.rail,.rail-in{
  perspective:1400px;
  perspective-origin:50% 40%;
}

/* Dark sections invert the glass. */
.sec.dark .card,.sec.dark .info-card,.sec.dark .quote-card,
.cta .card,.footer .card,.dark .step2{
  background-image:var(--glass-dark);
  box-shadow:var(--sheen-top-dark),var(--lift-3);
  border-color:rgba(248,216,129,.18);
}
.sec.dark .card:before,.sec.dark .info-card:before,
.sec.dark .quote-card:before{
  background:radial-gradient(120% 80% at 12% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 58%);
}

/* ------------------------------------------------------------
   2. Lacquered gold buttons
   ------------------------------------------------------------ */
.btn,.rail-btn,.md-cta .btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.btn{
  background-image:var(--gold-lacquer);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -1px 0 rgba(109,81,9,.35),
             0 2px 4px rgba(109,81,9,.18),
             0 14px 28px -12px rgba(158,110,20,.55);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),
             box-shadow .4s cubic-bezier(.2,.7,.3,1);
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             inset 0 -1px 0 rgba(109,81,9,.35),
             0 4px 8px rgba(109,81,9,.2),
             0 22px 42px -14px rgba(158,110,20,.62);
}
.btn:active{transform:translateY(-1px)}

/* Specular sweep — a band of light that crosses the button once
   on hover. It is a pseudo-element so it never affects layout. */
.btn:after,.rail-btn:after,#callfab:after{
  content:"";
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  background:linear-gradient(112deg,
    transparent 28%,
    rgba(255,255,255,.55) 46%,
    rgba(255,255,255,.18) 54%,
    transparent 68%);
  transform:translateX(-130%);
  transition:transform .85s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
  z-index:2;
}
.btn:hover:after,.rail-btn:hover:after,#callfab:hover:after{transform:translateX(130%)}

/* The call bubble had a pulsing ring on :after; the sweep takes
   that slot now, so the ring moves to a wrapper-free box-shadow. */
#callfab{
  border-radius:24px;
  background-image:var(--gold-lacquer);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
             0 3px 6px rgba(109,81,9,.2),
             0 16px 32px -12px rgba(158,110,20,.6),
             0 0 0 0 rgba(216,165,58,.55);
  animation:fabRing 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes fabRing{
  0%  {box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 6px rgba(109,81,9,.2),0 16px 32px -12px rgba(158,110,20,.6),0 0 0 0 rgba(216,165,58,.5)}
  70% {box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 6px rgba(109,81,9,.2),0 16px 32px -12px rgba(158,110,20,.6),0 0 0 16px rgba(216,165,58,0)}
  100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 3px 6px rgba(109,81,9,.2),0 16px 32px -12px rgba(158,110,20,.6),0 0 0 0 rgba(216,165,58,0)}
}

/* Outline buttons get a glass fill rather than a flat one. */
.btn-line,.btn.ghost{
  background-image:linear-gradient(160deg,rgba(255,255,255,.5),rgba(255,255,255,.08));
  box-shadow:var(--sheen-top),0 10px 24px -14px rgba(46,8,58,.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* ------------------------------------------------------------
   3. Header, drawer and floating controls
   ------------------------------------------------------------ */
.header{
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,
             0 1px 24px rgba(46,8,58,.09);
}
.header.scrolled{
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,
             0 6px 28px rgba(46,8,58,.16);
}

#wa,#top{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
             0 3px 6px rgba(0,0,0,.16),
             0 16px 30px -12px rgba(0,0,0,.4);
}

#mdrawer{
  background-image:linear-gradient(168deg,#2b0743 0%,#1b0328 55%,#12021b 100%);
  box-shadow:-30px 0 70px rgba(0,0,0,.6),inset 1px 0 0 rgba(248,216,129,.14);
}

/* ------------------------------------------------------------
   4. Media: glass frame around photography
   ------------------------------------------------------------ */
.svc2-card img,.pillar-art img,.post img,.pf-item img,.card img{
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.svc2-card:hover img,.pillar:hover img,.post:hover img,.pf-item:hover img{
  transform:scale(1.05);
}

/* A thin bright edge on image frames reads as bevelled glass. */
.pf-item,.pillar-art,.svc2-card{
  box-shadow:var(--sheen-top),var(--lift-2),
             inset 0 0 0 1px rgba(255,255,255,.5);
}

/* ------------------------------------------------------------
   5. Numerals, stats and chips
   ------------------------------------------------------------ */
.stat,.chip,.tick,.ab-pills > *{
  background-image:var(--glass-light);
  box-shadow:var(--sheen-top),var(--lift-1);
}

.num,.cnt{
  background:var(--gold-lacquer);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ------------------------------------------------------------
   6. Section surfaces
   Very soft vertical sheen so long pages do not read as flat
   blocks of one colour.
   ------------------------------------------------------------ */
/* (removed) A section-wide sheen here overwrote the plum gradient on
   .why, .stats and .cta — background-image replaces a gradient
   background wholesale. Sections keep their own surfaces. */

/* ------------------------------------------------------------
   7. Mobile
   The floating call button was hidden here because the sticky bar
   carries a Call action — but that bar only appears after 360px of
   scroll, so the top of every page had no way to call. The bubble
   stays on mobile now and simply moves above the bar when the bar
   is up.
   ------------------------------------------------------------ */
@media(max-width:880px){
  #callfab{
    display:flex !important;
    right:16px;
    bottom:166px;
    height:52px;
    border-radius:26px;
    transition:bottom .35s cubic-bezier(.2,.7,.3,1);
  }
  #callfab svg{width:23px;height:23px;flex:0 0 23px;margin:0 14.5px}
  /* The label never opens on touch — there is no hover — so keep
     the bubble circular and let the icon do the work. */
  #callfab span{display:none}

  body.bar-up #callfab{bottom:calc(166px + 26px)}
  body.bar-up #wa{bottom:calc(96px + 26px)}
  body.bar-up #top{bottom:calc(26px + 26px)}

  /* Cards stay flat-ish on touch: no hover to trigger the lift, and
     a big perspective on a small screen distorts. */
  .grid,.cards,.svc2-grid,.pillars,.posts,.pf-grid{perspective:none}
  .card:hover,.info-card:hover,.svc2-card:hover,.pillar:hover,
  .post:hover,.pf-item:hover{transform:none}
}

/* ------------------------------------------------------------
   8. Reduced motion
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .card,.info-card,.svc2-card,.quote-card,.pillar,.post,.pf-item,
  .btn,#callfab,.svc2-card img{transition:none !important}
  .card:hover,.info-card:hover,.svc2-card:hover,.pillar:hover,
  .post:hover,.pf-item:hover,.btn:hover{transform:none !important}
  #callfab{animation:none}
  .btn:after,.rail-btn:after,#callfab:after{display:none}
}

/* The sweep needs overflow:hidden on the call bubble too — but it
   must never inherit position:relative, or the fixed bubble drops
   into the page flow at full width. */
#callfab{overflow:hidden;isolation:isolate}

/* ------------------------------------------------------------
   9. Dark bands keep their own styling.
   The light glass was painting white boxes across the plum stats
   band and hiding the numbers. Anything inside a dark container
   opts out of the glass entirely and keeps the traditional look.
   ------------------------------------------------------------ */
.stats .stat,.stats .stat:hover,
.why .card,.why .feat,.cta .card,.footer .card,.hero .stat,.phero .stat{
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
}
.stats .stat:before,.why .card:before,.cta .card:before{display:none}
.stats .stat b{
  background:var(--grad-gold);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
}
.stats .stat span{color:#d8bfd0}

/* ------------------------------------------------------------
   10. Live chat panel (opens from the WhatsApp bubble)
   ------------------------------------------------------------ */
#vchat{
  position:fixed;right:26px;bottom:146px;z-index:160;
  width:min(92vw,340px);
  background:#fff;border-radius:18px;
  box-shadow:0 2px 6px rgba(20,4,28,.12),0 30px 60px -20px rgba(20,4,28,.45);
  overflow:hidden;
  transform:translateY(16px) scale(.96);opacity:0;visibility:hidden;
  transform-origin:100% 100%;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .3s,visibility .35s;
  font-family:var(--font-body);
}
#vchat.on{transform:none;opacity:1;visibility:visible}

#vchat .vc-head{
  display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;
  background:linear-gradient(135deg,#2b0743,#6b075c);color:#fff;
}
#vchat .vc-av{
  width:40px;height:40px;border-radius:50%;background:#25d366;color:#fff;
  display:grid;place-items:center;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
#vchat .vc-av svg{width:24px;height:24px}
#vchat .vc-who{flex:1;min-width:0;line-height:1.25}
#vchat .vc-who b{display:block;font-size:15px;font-weight:700}
#vchat .vc-who span{display:flex;align-items:center;gap:6px;font-size:12px;color:#e6d5ee;font-weight:500}
#vchat .vc-who i{width:8px;height:8px;border-radius:50%;background:#3ee07a;box-shadow:0 0 0 3px rgba(62,224,122,.25)}
#vchat .vc-x{
  width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.12);
  color:#fff;font-size:20px;line-height:1;cursor:pointer;
}
#vchat .vc-x:hover{background:rgba(255,255,255,.22)}

#vchat .vc-body{padding:16px;background:#f6f0f8;max-height:260px;overflow:auto}
#vchat .vc-msg{
  background:#fff;border-radius:14px 14px 14px 4px;padding:12px 14px;
  font-size:14px;line-height:1.55;color:#2c1226;font-weight:500;
  box-shadow:0 1px 2px rgba(20,4,28,.08);
}
#vchat .vc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#vchat .vc-chips button{
  border:1px solid rgba(107,7,92,.25);background:#fff;color:#6b075c;
  border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:.2s;
}
#vchat .vc-chips button:hover{background:#6b075c;color:#fff;border-color:#6b075c}

#vchat .vc-form{display:flex;gap:8px;padding:12px;border-top:1px solid #eee3f0;background:#fff}
#vchat .vc-form input{
  flex:1;min-width:0;border:1px solid #e2d6e6;border-radius:999px;padding:11px 16px;
  font-size:14px;font-family:inherit;font-weight:500;color:#2c1226;outline:0;
}
#vchat .vc-form input:focus{border-color:#6b075c;box-shadow:0 0 0 3px rgba(107,7,92,.12)}
#vchat .vc-form button{
  width:44px;height:44px;border-radius:50%;border:0;background:#25d366;color:#fff;
  display:grid;place-items:center;cursor:pointer;flex:none;transition:.2s;
}
#vchat .vc-form button svg{width:20px;height:20px}
#vchat .vc-form button:hover{background:#1ebe5b;transform:scale(1.05)}

/* the bubble becomes a close affordance while the panel is open */
#wa.chat-open{transform:rotate(90deg) scale(.92)}
#wa.nudge:after{
  content:"Chat with us";
  position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:#fff;color:#2c1226;font-family:var(--font-body);font-size:12.5px;font-weight:700;
  padding:8px 12px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(20,4,28,.4);
  animation:vcNudge .5s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes vcNudge{from{opacity:0;transform:translate(8px,-50%)}to{opacity:1;transform:translateY(-50%)}}
#wa.chat-open:after{display:none}

@media(max-width:880px){
  #vchat{right:12px;left:12px;width:auto;bottom:156px}
  body.bar-up #vchat{bottom:182px}
  #wa.nudge:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  #vchat{transition:none}
  #wa.nudge:after{animation:none}
}

/* ------------------------------------------------------------
   11. About section, rebuilt.
   The old collage stacked a floating quote card, a "years" badge and
   a tagline card over the photos and they collided at most widths.
   This is a plain two-column layout: copy on the left, an arched
   three-photo grid on the right with one location card and one
   stats row anchored to the grid — nothing floats free.
   ------------------------------------------------------------ */
.about3{position:relative;overflow:hidden;padding:96px 0}
.about3-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;
}
.about3-copy .lead{margin:22px 0 26px;font-size:16.5px;line-height:1.75;color:#5b4258;font-weight:500}
.about3-copy .ab-list{margin:0 0 30px}

.about3-art{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:18px;
  padding-bottom:78px;
}
.about3-art figure{margin:0;overflow:hidden;position:relative;background:#eee3f0}
.about3-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.about3-art figure:hover img{transform:scale(1.05)}

.about3-main{
  grid-column:1 / span 2;aspect-ratio:16/10;
  border-radius:200px 200px 16px 16px;
  border:1px solid rgba(212,160,23,.45);
  box-shadow:var(--sheen-top),var(--lift-3);
}
.about3-main .ab-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;
  background:rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.55);color:#fff;display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.35);transition:.35s;
}
.about3-main .ab-play:hover{background:var(--grad-gold);color:#2c1226;transform:translate(-50%,-50%) scale(1.08)}
.about3-main .ab-play svg{width:26px;height:26px;margin-left:3px}

.about3-small{
  aspect-ratio:4/3;border-radius:14px;
  border:1px solid rgba(212,160,23,.3);
  box-shadow:var(--sheen-top),var(--lift-2);
}

/* Location card: anchored to the bottom-left of the grid, overlapping
   the small photos by a fixed amount, so it never drifts. */
.about3-card{
  position:absolute;left:0;bottom:0;z-index:2;
  display:flex;align-items:center;gap:14px;
  padding:16px 20px 16px 16px;border-radius:16px;
  background:linear-gradient(135deg,#2b0743,#6b075c);color:#fff;
  box-shadow:0 2px 6px rgba(20,4,28,.15),0 24px 44px -18px rgba(20,4,28,.55);
  border:1px solid rgba(248,216,129,.25);
}
.about3-pin{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--grad-gold);color:#2c1226;display:grid;place-items:center;
}
.about3-pin svg{width:22px;height:22px}
.about3-card b{display:block;font-family:var(--font-display);font-size:18px;font-weight:700;line-height:1.15}
.about3-card span{display:block;font-size:12.5px;color:#e6d5ee;font-weight:500;margin-top:3px}

/* Stats row: bottom-right, glass on the light section. */
.about3-stats{
  position:absolute;right:0;bottom:0;z-index:2;
  display:flex;gap:0;border-radius:16px;overflow:hidden;
  background-image:var(--glass-light);
  box-shadow:var(--sheen-top),var(--lift-2);
  border:1px solid rgba(255,255,255,.7);
}
.about3-stats > div{
  padding:14px 20px;text-align:center;border-right:1px solid rgba(107,7,92,.1);
}
.about3-stats > div:last-child{border-right:0}
.about3-stats b{
  display:block;font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1;
  background:var(--gold-lacquer);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.about3-stats span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6d5470;font-weight:600;margin-top:5px}

@media(max-width:1100px){
  .about3-grid{gap:44px}
  .about3-stats > div{padding:12px 14px}
  .about3-stats b{font-size:24px}
}
@media(max-width:880px){
  .about3{padding:72px 0}
  .about3-grid{grid-template-columns:1fr;gap:40px}
  .about3-art{padding-bottom:0;gap:14px}
  .about3-main{border-radius:120px 120px 14px 14px}
  .about3-card,.about3-stats{position:static;grid-column:1 / span 2}
  .about3-stats{justify-content:space-around}
}
/* tick list styling was scoped to the old .about2 block */
.about3 .ab-list{gap:13px;margin-bottom:30px}
.about3 .ab-list li{align-items:flex-start;font-size:14.5px;color:#4d3c56;font-weight:500}
.about3 .tick{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(212,160,23,.16);color:var(--gold-700);transition:.4s var(--ease);box-shadow:none;background-image:none}
.about3 .ab-list li:hover .tick{background:var(--grad-gold);color:#fff;transform:scale(1.12)}
.about3 .tick svg{width:12px;height:12px}

/* Card + stats share one bottom row; no absolute positioning, so
   they can never overlap regardless of width. */
.about3-art{padding-bottom:0}
.about3-card,.about3-stats{position:static}
.about3-foot{grid-column:1 / span 2;display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.about3-foot .about3-card{flex:1 1 240px}
.about3-foot .about3-stats{flex:1 1 300px;justify-content:space-around}
.about3-foot .about3-stats > div{flex:1}
@media(max-width:880px){
  .about3-foot{grid-column:auto}
}

/* Header CTA in plum, gold text — the gold pill was fighting the
   gold phone icon and the gold hero button beside it. */
.header .btn{
  background:linear-gradient(150deg,#6a1a8c 0%,#6b075c 45%,#2b0743 100%);
  color:#f6dfa4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.35),
             0 2px 4px rgba(72,3,62,.25),0 14px 28px -12px rgba(72,3,62,.7);
}
.header .btn:hover{
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.35),
             0 4px 8px rgba(72,3,62,.3),0 22px 42px -14px rgba(72,3,62,.8);
}
.header .btn svg{color:#f6dfa4}

/* ============================================================
   12. RICH PASS — typography and finish
   Prata is a single-weight display face that is already heavy and
   high-contrast, so the earlier "force 700" rules would only make
   the browser fake-bold it. Weight is set back to 400 for the
   display font; richness comes from size, tracking, gradient
   fills on dark sections and the reveal, not from a synthetic bold.
   ============================================================ */
h1,h2,h3,h4,.sec-title,.hero h1,.phero h1,.seo-body h2,.seo-body h3,
.faq button,.quote-card .serif,.about3-card b,.about3-stats b,
.stats .stat b,.num,.cnt{font-weight:400 !important}
.sec-title em,h1 em,h2 em,h3 em{font-weight:400 !important;font-style:italic}

/* Prata sits a touch large at the same px; pull sizes and tighten. */
.hero h1{font-size:clamp(34px,5.4vw,66px);line-height:1.06;letter-spacing:-.005em}
.phero h1{font-size:clamp(28px,4.2vw,50px);line-height:1.1}
.sec-title{font-size:clamp(26px,3.6vw,44px);line-height:1.12}
.seo-body h2{font-size:clamp(22px,2.6vw,32px);line-height:1.2}
.seo-body h3{font-size:clamp(18px,2vw,23px)}
h1,h2,h3,.sec-title{
  text-rendering:optimizeLegibility;
  font-feature-settings:"liga","kern";
}

/* Gold gradient fill for headings on dark bands — the "rich" cue. */
.why .sec-title,.cta h2,
.footer h4,.testi .sec-title,.stats-band .sec-title{
  background:linear-gradient(120deg,#fff 0%,#f6e6bf 38%,#e0b75c 70%,#f6dfa4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;
}
.why .sec-title em,.cta h2 em{
  background:linear-gradient(120deg,#f6dfa4,#c8912c 60%,#eccf87);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Eyebrows: wider tracking, thin gold rules. */
.eyebrow,.kicker{
  font-family:var(--font-caps);font-weight:600;letter-spacing:.32em;font-size:10.5px;
}
.eyebrow:before,.eyebrow:after{opacity:.75}

/* Body copy: a touch larger and airier — luxury reads slow. */
.lead,.sec-head p,.seo-body p{font-size:16.5px;line-height:1.8;font-weight:400}
body{font-weight:400}
p,li{font-weight:400}

/* Thin gold hairline under section titles. */
.sec-head .sec-title:after{
  content:"";display:block;width:56px;height:1px;margin:18px auto 0;
  background:linear-gradient(90deg,transparent,#c8912c,transparent);
}
.sec-head.left .sec-title:after,.about3-copy .sec-title:after{margin-left:0}

/* Word-by-word heading reveal on scroll (JS splits .sec-title). */
.sec-title .w{display:inline-block;opacity:0;transform:translateY(.4em) rotate(1.5deg);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.sec-title.in .w{opacity:1;transform:none}

/* Buttons: Cinzel caps for a more engraved feel. */
.btn,.rail-btn,.md-cta .btn,#callfab span{
  font-family:var(--font-caps);font-weight:600;letter-spacing:.16em;font-size:11.5px;
}

/* Cards: a hairline gold inner border on the light glass. */
.card,.info-card,.svc2-card,.pillar,.post,.pf-item,.faq,.step2,.t-card{
  box-shadow:var(--sheen-top),var(--lift-2),inset 0 0 0 1px rgba(200,145,44,.14);
}

/* Header nav: small caps tracking. */
.nav > a,.drop > a{font-family:var(--font-body);font-weight:500;letter-spacing:.06em;font-size:13.5px;text-transform:uppercase}

@media(max-width:880px){
  .hero h1{font-size:clamp(30px,8.4vw,44px)}
  .lead,.sec-head p,.seo-body p{font-size:15.5px}
}
@media(prefers-reduced-motion:reduce){
  .sec-title .w{opacity:1;transform:none;transition:none}
}
/* Hero and page-hero titles are split into transformed word spans;
   background-clip:text does not paint through those, so they stay
   solid white with gold <em> handled per word by hero.css. */
.hero h1,.phero h1{background:none;-webkit-background-clip:initial;background-clip:initial;color:#fff;-webkit-text-fill-color:#fff}
.hero h1 em,.phero h1 em{-webkit-text-fill-color:initial}

/* ---------- Our Works: video tiles ----------
   A work with a YouTube link gets a play badge over the still. */
figure.has-video{position:relative}
figure.has-video > a{display:block;position:relative;line-height:0}
.work-play{
  position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
  border-radius:50%;background:rgba(10,4,14,.55);border:2px solid rgba(255,255,255,.9);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  transition:transform .25s ease,background .25s ease;pointer-events:none
}
.work-play:after{
  content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff
}
figure.has-video:hover .work-play{transform:scale(1.08);background:rgba(107,7,92,.78)}
@media(max-width:700px){.work-play{width:46px;height:46px;margin:-23px 0 0 -23px}
  .work-play:after{border-width:9px 0 9px 14px}}

/* ================================================================
   HOME: Two Ways  —  the honest side-by-side comparison
   ================================================================ */
.twoway{background:linear-gradient(180deg,var(--ivory-2),var(--ivory));position:relative;overflow:hidden}
.tw-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:stretch;
  margin-top:46px
}
.tw-col{
  position:relative;padding:34px 32px;border-radius:22px;display:flex;flex-direction:column;gap:18px
}
.tw-col header{display:flex;flex-direction:column;gap:12px}
.tw-tag{
  align-self:flex-start;font-family:var(--font-caps);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;padding:7px 14px;border-radius:999px
}
.tw-col h3{font-family:var(--font-display);font-size:clamp(20px,2vw,26px);line-height:1.25;margin:0}
.tw-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.tw-col li{position:relative;padding-left:32px;font-size:15px;line-height:1.6}
.tw-col li:before{
  position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700
}

/* left: the common multi-vendor route */
.tw-usual{
  background:#f4eff1;border:1px solid #e4d9df;color:#6b5f66
}
.tw-usual .tw-tag{background:#e4d9df;color:#6b5f66}
.tw-usual h3{color:#4a3f46}
.tw-usual li:before{content:"\2715";background:#ded0d6;color:#8a7a82}
.tw-usual b{color:#4a3f46;font-weight:600}

/* right: ours */
.tw-vinora{
  background:linear-gradient(165deg,#48033e 0%,#6b075c 55%,#5c0550 100%);
  color:#f3e9f8;border:1px solid rgba(212,160,23,.38);
  box-shadow:0 26px 60px -24px rgba(72,3,62,.6)
}
.tw-vinora:before{
  content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:radial-gradient(120% 70% at 85% 0%,rgba(212,160,23,.16),transparent 60%)
}
.tw-vinora .tw-tag{
  background:linear-gradient(135deg,#d4a017,#f8d881);color:#48033e;font-weight:700
}
.tw-vinora h3{
  background:linear-gradient(100deg,#fff 10%,#f8d881 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
.tw-vinora li:before{content:"\2713";background:rgba(212,160,23,.22);color:#f8d881}
.tw-vinora b{color:#fff;font-weight:600}
.tw-honest{
  font-size:14px;line-height:1.65;color:#d9c6e3;border-top:1px solid rgba(248,216,129,.22);
  padding-top:16px;margin:4px 0 0
}
.tw-vinora .btn{align-self:flex-start;margin-top:4px}

.tw-vs{
  align-self:center;font-family:var(--font-display);font-size:22px;font-style:italic;
  color:#b9a0c6;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  background:#fff;box-shadow:0 8px 22px -10px rgba(72,3,62,.35);border:1px solid #ecdff1
}

@media(max-width:900px){
  .tw-grid{grid-template-columns:1fr;gap:16px}
  .tw-vs{justify-self:center;width:44px;height:44px;font-size:18px}
  .tw-col{padding:26px 22px}
}

/* ================================================================
   HOME: Pricing  —  the thing competitors will not publish
   ================================================================ */
.pricing{background:var(--ivory)}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.pr-card{
  position:relative;background:#fff;border:1px solid #efe3f3;border-radius:20px;
  padding:30px 26px 26px;display:flex;flex-direction:column;
  box-shadow:0 18px 44px -28px rgba(72,3,62,.26);transition:transform .3s ease,box-shadow .3s ease
}
.pr-card:hover{transform:translateY(-5px);box-shadow:0 26px 58px -26px rgba(72,3,62,.34)}
.pr-ic{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(140deg,#fcf1d5,#f8d881);color:#6d5109;border:1px solid #f8d881
}
.pr-ic svg{width:25px;height:25px}
.pr-card h3{font-family:var(--font-display);font-size:23px;margin:0 0 2px;color:var(--plum,#6b075c)}
.pr-unit{
  font-family:var(--font-caps);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:#9c8aa6;margin-bottom:18px;display:block
}
.pr-card dl{margin:0 0 20px;display:flex;flex-direction:column;gap:0}
.pr-card dt{font-size:14px;line-height:1.45;color:#5c4f63;padding:11px 0 3px}
.pr-card dd{
  margin:0 0 11px;font-family:var(--font-display);font-size:19px;color:#48033e;
  border-bottom:1px dashed #ece0f0;padding-bottom:11px
}
.pr-card dd:last-of-type{border-bottom:0}
.pr-card > a{
  margin-top:auto;font-family:var(--font-caps);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#6b075c;text-decoration:none;border-bottom:1px solid rgba(107,7,92,.3);
  align-self:flex-start;padding-bottom:3px;transition:border-color .25s ease,color .25s ease
}
.pr-card > a:hover{color:#6d5109;border-color:#d4a017}

.pr-note{
  margin-top:34px;padding:28px 32px;border-radius:20px;
  background:linear-gradient(135deg,#fdf8ee,#faf2f6);border:1px solid #efe3d2;
  display:flex;gap:30px;align-items:center;flex-wrap:wrap
}
.pr-note p{margin:0;flex:1 1 440px;font-size:15px;line-height:1.7;color:#5c4f63}
.pr-note strong{color:#48033e}
.pr-cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pr-call{
  display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:#6b075c;
  text-decoration:none;font-weight:600
}
.pr-call svg{width:17px;height:17px}
.pr-call:hover{color:#6d5109}

@media(max-width:980px){.pr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){
  .pr-grid{grid-template-columns:1fr}
  .pr-note{padding:24px 20px;gap:20px}
  .pr-cta{width:100%}
  .pr-cta .btn{width:100%;justify-content:center}
}

/* ================================================================
   3D + GLOSS PASS  —  home page cards
   Specular sheen, inner highlight, real depth shadow, and a tilt
   that tracks the cursor (driven by --rx/--ry from main.js).
   ================================================================ */
.tw-grid,.pr-grid,.stats .wrap{perspective:1400px}

/* shared 3D body */
.tw-col,.pr-card{
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
  transition:transform .45s cubic-bezier(.22,.8,.26,1),box-shadow .45s ease;
  will-change:transform
}
.tw-col.tilt,.pr-card.tilt{transition:transform .12s linear,box-shadow .45s ease}

/* glass sheen that sweeps across on hover */
.pr-card:after,.tw-vinora:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.14) 54%,transparent 68%);
  background-size:260% 100%;background-position:170% 0;
  opacity:0;transition:background-position .9s ease,opacity .35s ease
}
.pr-card:hover:after,.tw-vinora:hover:after{opacity:1;background-position:-40% 0}
.tw-vinora:after{
  background:linear-gradient(105deg,transparent 34%,rgba(248,216,129,.4) 47%,rgba(255,255,255,.18) 55%,transparent 70%);
  background-size:260% 100%
}

/* lacquered depth: top inner highlight + bottom inner shade */
.pr-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.82)) padding-box,
    linear-gradient(150deg,rgba(212,160,23,.55),rgba(255,255,255,.1) 40%,rgba(107,7,92,.22)) border-box;
  border:1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -14px 24px -18px rgba(107,7,92,.3),
    0 2px 4px -2px rgba(72,3,62,.18),
    0 18px 44px -28px rgba(72,3,62,.3),
    0 38px 70px -46px rgba(72,3,62,.26);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)
}
.pr-card:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -14px 26px -18px rgba(107,7,92,.34),
    0 3px 6px -2px rgba(72,3,62,.2),
    0 30px 64px -26px rgba(72,3,62,.4),
    0 58px 90px -50px rgba(72,3,62,.3)
}

/* icon tile lifts off the card in 3D */
.pr-ic{
  transform:translateZ(26px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px -10px rgba(109,81,9,.55);
  background:linear-gradient(140deg,#fbf4e3,#eddfba 55%,#e2cf9f)
}
.pr-card h3,.pr-unit{transform:translateZ(14px)}
.pr-card dl{transform:translateZ(6px)}

/* the price figures get a gold foil treatment */
.pr-card dd{
  background:linear-gradient(100deg,#48033e 20%,#6d5109 60%,#aa7f0e 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent
}

/* two-way columns: glossy plates */
.tw-usual{
  background:linear-gradient(180deg,#f7f3f5,#eee7eb);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 34px -26px rgba(72,3,62,.22)
}
.tw-vinora{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -20px 40px -26px rgba(0,0,0,.5),
    0 26px 60px -24px rgba(72,3,62,.6),
    0 60px 90px -56px rgba(72,3,62,.5)
}
.tw-vinora:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -20px 42px -26px rgba(0,0,0,.52),
    0 38px 80px -26px rgba(72,3,62,.68),
    0 80px 110px -60px rgba(72,3,62,.55)
}
.tw-col header,.tw-col ul{transform:translateZ(12px)}
.tw-vinora .btn{transform:translateZ(22px)}

/* the vs badge floats above both plates */
.tw-vs{
  transform:translateZ(50px);
  box-shadow:inset 0 1px 0 #fff,0 10px 26px -10px rgba(72,3,62,.45),0 2px 4px rgba(72,3,62,.12);
  background:linear-gradient(170deg,#fff,#f6eef9)
}

/* stats chips get the same lacquer */
.stats .stat{
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.22,.8,.26,1),box-shadow .4s ease
}
.stats .stat:hover{transform:translateY(-4px) translateZ(14px)}
.stats .stat .ic{transform:translateZ(18px)}

/* note panel: frosted glass */
.pr-note{
  background:linear-gradient(135deg,rgba(253,248,238,.9),rgba(250,243,249,.86));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 40px -30px rgba(72,3,62,.3)
}

/* Touch devices and reduced-motion users get the flat, fast version. */
@media(hover:none){
  .tw-col,.pr-card{transform:none!important}
  .pr-ic,.pr-card h3,.pr-unit,.pr-card dl,.tw-col header,.tw-col ul,.tw-vinora .btn,.tw-vs,.stats .stat .ic{transform:none}
  .pr-card:after,.tw-vinora:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .tw-col,.pr-card,.stats .stat{transform:none!important;transition:none}
  .pr-card:after,.tw-vinora:after{display:none}
}

/* ---------- "What You Get" points (replaces the price rows) ---------- */
.pr-points{
  list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:0;
  transform:translateZ(8px)
}
.pr-points li{
  position:relative;padding:12px 0 12px 30px;font-size:14.5px;line-height:1.62;color:#5c4f63;
  border-bottom:1px dashed #ece0f0
}
.pr-points li:last-child{border-bottom:0}
.pr-points li:before{
  content:"";position:absolute;left:0;top:17px;width:17px;height:17px;border-radius:50%;
  background:linear-gradient(140deg,#fcf1d5,#f8d881);border:1px solid #d4a017
}
.pr-points li:after{
  content:"";position:absolute;left:5px;top:21.5px;width:7px;height:4px;
  border-left:1.8px solid #6d5109;border-bottom:1.8px solid #6d5109;
  transform:rotate(-45deg)
}
.pr-points b{
  display:inline;color:#48033e;font-weight:600;
  font-family:var(--font-body)
}
@media(hover:none){.pr-points{transform:none}}
@media(prefers-reduced-motion:reduce){.pr-points{transform:none}}

/* ================================================================
   LOGO SIZE  —  bigger lockup, with the header bar grown to match
   so it does not sit cramped against the edges.
   gloss.css loads last, so these win over logo.css / style.css.
   ================================================================ */
.header .wrap{height:98px}
.header.scrolled .wrap{height:80px}

.logo-img{height:74px}
.header.scrolled .logo-img{height:60px}
.footer .logo-img{height:78px}

/* vector fallback lockup, scaled in step */
.logo-mark{width:74px;height:64px}
.header.scrolled .logo-mark{width:62px;height:54px}

@media(max-width:880px){
  .header .wrap{height:86px}
  .header.scrolled .wrap{height:74px}
  .logo-img{height:62px}
  .header.scrolled .logo-img{height:52px}
  .logo-mark{width:64px;height:55px}
}
@media(max-width:620px){
  .header .wrap{height:78px}
  .header.scrolled .wrap{height:68px}
  .logo-img{height:56px}
  .header.scrolled .logo-img{height:48px}
  .logo-mark{width:56px;height:48px}
  .header.scrolled .logo-mark{width:50px;height:43px}
  .footer .logo-img{height:66px}
}
@media(max-width:400px){
  .header .wrap{height:72px}
  .logo-img{height:50px}
  .header.scrolled .logo-img{height:44px}
  .logo-mark{width:48px;height:42px}
}

/* ================================================================
   HOME: Get a quote  —  short form + WhatsApp, so the enquiry can
   happen on the home page instead of one click away.
   ================================================================ */
.quote-sec{
  background:linear-gradient(170deg,#48033e 0%,#6b075c 58%,#5c0550 100%);
  color:#f3e9f8;position:relative;overflow:hidden
}
.quote-sec:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 60% at 12% 0%,rgba(212,160,23,.16),transparent 62%)
}
.q-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start;position:relative}

/* ---- left: copy ---- */
.q-copy .eyebrow{color:#f3c13f}
.q-copy .eyebrow:before,.q-copy .eyebrow:after{background:rgba(230,207,143,.5)}
.q-copy .sec-title{
  background:linear-gradient(100deg,#fff 12%,#f8d881 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  text-align:left;margin-bottom:16px
}
.q-copy > p{color:#d9c6e3;font-size:15.5px;line-height:1.75;margin:0 0 22px;max-width:48ch}
.q-points{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:11px}
.q-points li{position:relative;padding-left:30px;font-size:15px;color:#efe4f4}
.q-points li:before{
  content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;
  background:rgba(212,160,23,.22);border:1px solid rgba(248,216,129,.5)
}
.q-points li:after{
  content:"";position:absolute;left:5px;top:8px;width:7px;height:4px;
  border-left:2px solid #f8d881;border-bottom:2px solid #f8d881;transform:rotate(-45deg)
}
.q-points b{color:#fff}

.q-or{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.q-or span{
  font-family:var(--font-caps);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#bca6c9;white-space:nowrap
}
.q-or:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(248,216,129,.4),transparent)}

.q-direct{display:flex;flex-direction:column;gap:12px;max-width:380px}
.q-wa,.q-tel{
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;
  text-decoration:none;transition:transform .3s ease,background .3s ease,border-color .3s ease
}
.q-wa svg,.q-tel svg{width:24px;height:24px;flex:none}
.q-wa span,.q-tel span{display:flex;flex-direction:column;line-height:1.3}
.q-wa b,.q-tel b{font-size:15px}
.q-wa small,.q-tel small{font-size:12.5px;opacity:.78;margin-top:2px}
.q-wa{background:#25d366;color:#07351a;box-shadow:0 12px 30px -16px rgba(37,211,102,.8)}
.q-wa:hover{transform:translateY(-2px);background:#1fc25d}
.q-tel{background:rgba(255,255,255,.07);color:#f3e9f8;border:1px solid rgba(248,216,129,.28)}
.q-tel:hover{transform:translateY(-2px);background:rgba(255,255,255,.12);border-color:rgba(248,216,129,.5)}

/* ---- right: the form card ---- */
.q-form{
  position:relative;background:#fffdfa;border-radius:22px;padding:32px 30px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 70px -30px rgba(0,0,0,.6),0 60px 100px -60px rgba(0,0,0,.5)
}
.q-form h3{
  font-family:var(--font-display);font-size:26px;color:#48033e;margin:0 0 22px;
  padding-bottom:14px;border-bottom:1px solid #f0e6f4
}
.q-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.q-field label{
  font-family:var(--font-caps);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7d6c87
}
.q-field label i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}
.q-field input,.q-field select{
  width:100%;padding:13px 15px;border:1px solid #e7dcec;border-radius:11px;
  font-family:var(--font-body);font-size:15px;color:#48033e;background:#fff;
  transition:border-color .25s ease,box-shadow .25s ease
}
.q-field input:focus,.q-field select:focus{
  outline:0;border-color:#6b075c;box-shadow:0 0 0 3px rgba(107,7,92,.12)
}
.q-field input::placeholder{color:#b3a6ba}
.q-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.q-form .btn{width:100%;justify-content:center;margin-top:6px}
.q-fine{font-size:12.5px;color:#8d7f95;margin:14px 0 0;line-height:1.55;text-align:center}

/* success state covers the card */
.q-form .ok{
  display:none;position:absolute;inset:0;border-radius:22px;background:#fffdfa;z-index:2;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:36px 30px;gap:12px
}
.q-form .ok.on{display:flex}
.q-form .ok b{font-family:var(--font-display);font-size:22px;color:#48033e}
.q-form .ok span:not(.ok-ic){font-size:14.5px;color:#6b5c74;line-height:1.6;max-width:34ch}
.ok-ic{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin-bottom:4px;
  background:linear-gradient(140deg,#d4a017,#f8d881);color:#48033e
}
.ok-ic svg{width:27px;height:27px}

@media(max-width:900px){
  .q-grid{grid-template-columns:1fr;gap:34px}
  .q-copy .sec-title{text-align:left}
  .q-direct{max-width:none}
}
@media(max-width:560px){
  .q-form{padding:26px 20px}
  .q-row{grid-template-columns:1fr;gap:0}
}

/* ================================================================
   SERVICE PAGES: price table, inclusions and costed FAQs
   ================================================================ */
.svc-facts{background:var(--ivory-2)}
.sf-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;margin-top:42px;align-items:start}

.sf-table{
  background:#fff;border:1px solid #efe3f3;border-radius:20px;padding:10px 26px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 44px -30px rgba(72,3,62,.26)
}
.sf-table table{width:100%;border-collapse:collapse}
.sf-table th{
  text-align:left;font-weight:400;font-size:14.5px;line-height:1.5;color:#5c4f63;
  padding:14px 0;border-bottom:1px dashed #ece0f0
}
.sf-table td{
  text-align:right;white-space:nowrap;padding:14px 0 14px 18px;border-bottom:1px dashed #ece0f0;
  font-family:var(--font-display);font-size:17px;
  background:linear-gradient(100deg,#48033e 20%,#6d5109 70%,#aa7f0e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
.sf-table tr:last-child th,.sf-table tr:last-child td{border-bottom:0}
.sf-note{font-size:12.5px;line-height:1.6;color:#8d7f95;margin:16px 0 0;padding-top:14px;border-top:1px solid #f2e9f5}

.sf-inc{
  background:linear-gradient(165deg,#48033e,#6b075c 60%,#5c0550);color:#f3e9f8;
  border:1px solid rgba(212,160,23,.34);border-radius:20px;padding:28px 26px;
  box-shadow:0 24px 54px -26px rgba(72,3,62,.55)
}
.sf-inc h3{
  font-family:var(--font-display);font-size:21px;margin:0 0 18px;
  background:linear-gradient(100deg,#fff 10%,#f8d881 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent
}
.sf-inc ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px}
.sf-inc li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.6;color:#e2d3ea}
.sf-inc li:before{
  content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:rgba(212,160,23,.2);border:1px solid rgba(248,216,129,.5)
}
.sf-inc li:after{
  content:"";position:absolute;left:4.5px;top:10.5px;width:7px;height:4px;
  border-left:2px solid #f8d881;border-bottom:2px solid #f8d881;transform:rotate(-45deg)
}
.sf-inc .btn{width:100%;justify-content:center}

.sf-faq{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.sf-q{
  background:#fff;border:1px solid #efe3f3;border-radius:16px;padding:24px 22px;
  box-shadow:0 14px 34px -28px rgba(72,3,62,.26)
}
.sf-q h3{font-family:var(--font-display);font-size:17.5px;line-height:1.35;color:var(--plum,#6b075c);margin:0 0 10px}
.sf-q p{font-size:14.5px;line-height:1.65;color:#5c4f63;margin:0}

/* dark */
html[data-dark] .sf-table,html[data-dark] .sf-q{
  background:linear-gradient(165deg,rgba(45,20,57,.78),rgba(36,16,48,.62));
  border-color:var(--d-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
html[data-dark] .sf-table th{color:var(--d-text-soft);border-bottom-color:var(--d-line-soft)}
html[data-dark] .sf-table td{
  background:linear-gradient(100deg,#fff 10%,#fcf1d5 60%,#d4a017 100%);
  -webkit-background-clip:text;background-clip:text;border-bottom-color:var(--d-line-soft)
}
html[data-dark] .sf-note{color:var(--d-text-dim);border-top-color:var(--d-line-soft)}
html[data-dark] .sf-q h3{color:var(--d-gold-2)}
html[data-dark] .sf-q p{color:var(--d-text-soft)}
html[data-dark] .sf-inc{background:linear-gradient(165deg,#260621,#3a0c33 60%,#230620)}

@media(max-width:980px){
  .sf-grid{grid-template-columns:1fr}
  .sf-faq{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .sf-faq{grid-template-columns:1fr}
  .sf-table{padding:8px 18px 18px}
  .sf-table th{font-size:13.5px}
  .sf-table td{font-size:15.5px;padding-left:12px}
  .sf-inc{padding:24px 20px}
}

/* ================================================================
   SERVICE PAGES: "How we actually do it" — the working method
   ================================================================ */
.svc-method{background:var(--ivory)}
.sm-steps{
  list-style:none;margin:44px 0 0;padding:0;counter-reset:none;
  display:grid;grid-template-columns:1fr 1fr;gap:22px
}
.sm-step{
  position:relative;display:flex;gap:20px;align-items:flex-start;
  background:#fff;border:1px solid #efe3f3;border-radius:18px;padding:26px 24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 40px -30px rgba(72,3,62,.26);
  transition:transform .35s cubic-bezier(.22,.8,.26,1),box-shadow .35s ease
}
.sm-step:hover{transform:translateY(-4px);box-shadow:0 26px 54px -28px rgba(72,3,62,.34)}
.sm-n{
  flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:20px;
  background:linear-gradient(140deg,#fcf1d5,#f8d881);border:1px solid #d4a017;color:#6d5109;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)
}
.sm-body{min-width:0}
.sm-when{
  display:block;font-family:var(--font-caps);font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:#9c8aa6;margin-bottom:6px
}
.sm-step h3{
  font-family:var(--font-display);font-size:19px;line-height:1.3;
  color:var(--plum,#6b075c);margin:0 0 9px
}
.sm-step p{font-size:14.5px;line-height:1.68;color:#5c4f63;margin:0}

.sm-foot{
  margin:30px 0 0;text-align:center;font-size:15px;color:#5c4f63;line-height:1.7
}
.sm-foot a{color:var(--plum,#6b075c);font-weight:600}

/* dark */
html[data-dark] .sm-step{
  background:linear-gradient(165deg,rgba(45,20,57,.78),rgba(36,16,48,.62));
  border-color:var(--d-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
html[data-dark] .sm-n{
  background:linear-gradient(140deg,rgba(243,193,63,.2),rgba(212,160,23,.1));
  border-color:rgba(243,193,63,.3);color:var(--d-gold-2)
}
html[data-dark] .sm-step h3{color:var(--d-gold-2)}
html[data-dark] .sm-step p{color:var(--d-text-soft)}
html[data-dark] .sm-when{color:var(--d-text-dim)}
html[data-dark] .sm-foot{color:var(--d-text-soft)}
html[data-dark] .sm-foot a{color:var(--d-gold)}

@media(max-width:900px){
  .sm-steps{grid-template-columns:1fr;gap:16px}
}
@media(max-width:560px){
  .sm-step{padding:22px 18px;gap:15px}
  .sm-n{width:44px;height:44px;font-size:17px;border-radius:12px}
  .sm-step h3{font-size:17.5px}
}

/* ---------- brand richness ----------
   #6B075C alone is a deep, quiet colour. On large panels it needs a
   magenta bloom and a gold edge, which is what the logo itself has. */
.tw-vinora,.quote-sec,.sf-inc{position:relative}
.tw-vinora:before,.sf-inc:before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(120% 75% at 88% 0%,rgba(198,16,171,.38),transparent 58%),
    radial-gradient(90% 60% at 8% 100%,rgba(212,160,23,.18),transparent 62%)
}
.quote-sec:before{
  background:
    radial-gradient(70% 55% at 10% 0%,rgba(198,16,171,.3),transparent 60%),
    radial-gradient(60% 50% at 92% 8%,rgba(212,160,23,.2),transparent 62%)
}
.tw-vinora,.sf-inc{
  background:linear-gradient(162deg,#5c0550 0%,#6b075c 48%,#48033e 100%)
}
.quote-sec{
  background:linear-gradient(168deg,#48033e 0%,#6b075c 55%,#3a0231 100%)
}
/* gold text and rules pick up the metallic highlight */
.tw-vinora .tw-tag{background:linear-gradient(135deg,#f3c13f,#fcf1d5 55%,#d4a017)}

/* ================================================================
   SITE-WIDE GLOSS
   The glass-and-lacquer treatment was only on the home page cards.
   This carries it across every template — service pages, blog,
   gallery, contact — so the whole site reads as one object.
   ================================================================ */

/* ---- one card recipe, everywhere ---- */
.sm-step,.sf-q,.sf-table,.post-card,.faq,.svc2-card,.step2,
.stats .stat,.feat,.keyfacts,.area-grid a,.pack,.q-form,
.contact-card,.blog-grid article,.venue-card{
  position:relative;
  background:
    linear-gradient(180deg,rgba(255,255,255,.97),rgba(255,255,255,.86)) padding-box,
    linear-gradient(150deg,rgba(212,160,23,.5),rgba(255,255,255,.08) 42%,rgba(107,7,92,.2)) border-box;
  border:1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -16px 28px -22px rgba(107,7,92,.3),
    0 2px 4px -2px rgba(44,1,38,.16),
    0 20px 46px -30px rgba(44,1,38,.3);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)
}

/* ---- sheen sweep on hover, site-wide ---- */
.sm-step:after,.sf-q:after,.post-card:after,.svc2-card:after,.step2:after,.feat:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 33%,rgba(255,255,255,.5) 47%,rgba(255,255,255,.12) 55%,transparent 68%);
  background-size:260% 100%;background-position:170% 0;
  opacity:0;transition:background-position .9s ease,opacity .35s ease
}
.sm-step:hover:after,.sf-q:hover:after,.post-card:hover:after,
.svc2-card:hover:after,.step2:hover:after,.feat:hover:after{opacity:1;background-position:-40% 0}

/* ---- images get a glass frame rather than sitting flat ---- */
.masonry figure,.g-rail figure,.g-stage figure,.post-card .thumb,
.svc2-card img,.blog-grid img,.insta a{
  position:relative;border-radius:16px;overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.3),
    0 2px 6px -2px rgba(44,1,38,.2),
    0 22px 50px -32px rgba(44,1,38,.45)
}
.masonry figure:before,.g-rail figure:before,.g-stage figure:before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(170deg,rgba(255,255,255,.22) 0%,transparent 34%,transparent 72%,rgba(44,1,38,.2) 100%)
}

/* ---- lacquered buttons everywhere ---- */
.btn{
  position:relative;overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -10px 18px -14px rgba(0,0,0,.45),
    0 10px 26px -14px rgba(107,7,92,.6)
}
.btn:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 36%,rgba(255,255,255,.42) 50%,transparent 64%);
  background-size:250% 100%;background-position:160% 0;
  transition:background-position .75s ease
}
.btn:hover:before{background-position:-50% 0}

/* ---- form fields: inset glass ---- */
.q-field input,.q-field select,.field input,.field select,.field textarea,
.vc-form input,#indexnow_urls{
  box-shadow:inset 0 1px 3px rgba(44,1,38,.08),inset 0 -1px 0 rgba(255,255,255,.8)
}

/* ---- page hero: glass overlay instead of a flat scrim ---- */
.phero:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 60% at 18% 10%,rgba(198,16,171,.22),transparent 62%),
    linear-gradient(180deg,rgba(44,1,38,.1) 0%,transparent 40%,rgba(44,1,38,.35) 100%)
}

/* ---- alternating sections get a faint sheen band ---- */
.sec:nth-of-type(even):before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(212,160,23,.4) 38%,rgba(212,160,23,.4) 62%,transparent)
}

/* ---- dark mode keeps the gloss but inverts the glass ---- */
html[data-dark] .sm-step,html[data-dark] .sf-q,html[data-dark] .sf-table,
html[data-dark] .post-card,html[data-dark] .faq,html[data-dark] .svc2-card,
html[data-dark] .step2,html[data-dark] .stats .stat,html[data-dark] .feat,
html[data-dark] .keyfacts,html[data-dark] .area-grid a,html[data-dark] .q-form{
  background:
    linear-gradient(165deg,rgba(72,3,62,.8),rgba(46,10,41,.64)) padding-box,
    linear-gradient(150deg,rgba(243,193,63,.42),rgba(255,255,255,.06) 44%,rgba(198,16,171,.26)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -20px 38px -30px rgba(0,0,0,.9),
    0 22px 48px -28px rgba(0,0,0,.75);
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%)
}
html[data-dark] .sm-step:after,html[data-dark] .sf-q:after,
html[data-dark] .post-card:after,html[data-dark] .svc2-card:after,
html[data-dark] .step2:after,html[data-dark] .feat:after{
  background:linear-gradient(105deg,transparent 34%,rgba(243,193,63,.34) 47%,rgba(255,255,255,.14) 56%,transparent 70%);
  background-size:260% 100%
}

/* touch devices: keep the glass, drop the sweeps */
@media(hover:none){
  .sm-step:after,.sf-q:after,.post-card:after,.svc2-card:after,
  .step2:after,.feat:after,.btn:before{display:none}
}
@media(prefers-reduced-motion:reduce){
  .sm-step:after,.sf-q:after,.post-card:after,.svc2-card:after,
  .step2:after,.feat:after,.btn:before{display:none}
}