/* ═══════════════════════════════════════════════════════
   Impact Grid — Premium layer (homepage)
   Additive only: loaded AFTER the inline homepage <style>.
   Remove the <link> to premium.css in index.html to undo everything.

   Idea: the page is framed like a camera viewfinder.
   One orchestrated moment (hero focus-lock + shutter), then quiet polish.
═══════════════════════════════════════════════════════ */

:root {
  --pg-gold:      #d9c187;           /* on dark surfaces (hero, CTA, cards) */
  --pg-gold-ink:  #8a6a12;           /* on the cream light-mode surfaces    */
  --pg-ease:      cubic-bezier(.2, .7, .2, 1);
}
html[data-theme="dark"] { --pg-gold-ink: #d9c187; }

::selection { background: #d9c187; color: #1a160f; }

/* ───────────── HERO: viewfinder ───────────── */

/* Photo "settles" into place, then drifts with scroll (premium.js sets --pg-py). */
@property --pg-s { syntax: '<number>'; inherits: false; initial-value: 1.04; }

body.home .h-hero-photo { overflow: hidden; }
body.home .h-hero-photo img {
  --pg-s: 1.04;
  transform: translate3d(0, var(--pg-py, 0px), 0) scale(var(--pg-s));
  will-change: transform;
}
.pg-js.pg-go body.home .h-hero-photo img { animation: pg-settle 2.6s var(--pg-ease) both; }
@keyframes pg-settle { from { --pg-s: 1.14; } to { --pg-s: 1.04; } }

/* Film grain over the photo area */
body.home .h-hero::after,
body.home .h-cta::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .06; mix-blend-mode: overlay;
}
/* keep CTA content above its grain */
body.home .h-cta > .h-in { position: relative; z-index: 2; }

/* The frame itself */
.pg-frame {
  position: absolute; z-index: 2; pointer-events: none;
  top: 92px; bottom: 30px; left: 44%; right: var(--h-pad-w, 40px);
}
.pg-thirds {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent calc(33.333% - .5px), rgba(217,193,135,.16) calc(33.333% - .5px), rgba(217,193,135,.16) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(90deg, transparent calc(66.666% - .5px), rgba(217,193,135,.16) calc(66.666% - .5px), rgba(217,193,135,.16) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
    linear-gradient(0deg,  transparent calc(33.333% - .5px), rgba(217,193,135,.16) calc(33.333% - .5px), rgba(217,193,135,.16) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
    linear-gradient(0deg,  transparent calc(66.666% - .5px), rgba(217,193,135,.16) calc(66.666% - .5px), rgba(217,193,135,.16) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.pg-c { position: absolute; width: 26px; height: 26px; border: 0 solid var(--pg-gold); opacity: .9; }
.pg-c--tl { top: 0;    left: 0;  border-top-width: 1.5px;    border-left-width: 1.5px; }
.pg-c--tr { top: 0;    right: 0; border-top-width: 1.5px;    border-right-width: 1.5px; }
.pg-c--bl { bottom: 0; left: 0;  border-bottom-width: 1.5px; border-left-width: 1.5px; }
.pg-c--br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* Focus reticle — locks on once, then rests at half strength */
.pg-reticle {
  position: absolute; left: 50%; top: 50%;
  width: 68px; height: 68px; margin: -34px 0 0 -34px;
  opacity: .5;
  background:
    linear-gradient(var(--pg-gold), var(--pg-gold)) 50% 50% / 11px 1px no-repeat,
    linear-gradient(var(--pg-gold), var(--pg-gold)) 50% 50% / 1px 11px no-repeat;
}
.pg-reticle::before {            /* four corner ticks */
  content: ''; position: absolute; inset: 0;
  --t: var(--pg-gold);
  background:
    linear-gradient(var(--t),var(--t)) 0 0 / 14px 1.5px no-repeat, linear-gradient(var(--t),var(--t)) 0 0 / 1.5px 14px no-repeat,
    linear-gradient(var(--t),var(--t)) 100% 0 / 14px 1.5px no-repeat, linear-gradient(var(--t),var(--t)) 100% 0 / 1.5px 14px no-repeat,
    linear-gradient(var(--t),var(--t)) 0 100% / 14px 1.5px no-repeat, linear-gradient(var(--t),var(--t)) 0 100% / 1.5px 14px no-repeat,
    linear-gradient(var(--t),var(--t)) 100% 100% / 14px 1.5px no-repeat, linear-gradient(var(--t),var(--t)) 100% 100% / 1.5px 14px no-repeat;
}

/* Soft shutter flash — a single, low-intensity moment */
.pg-flash { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #fff; opacity: 0; }

/* Entrance choreography (only when JS is on; static and visible otherwise) */
.pg-js .pg-c, .pg-js .pg-thirds, .pg-js .pg-reticle { opacity: 0; }
.pg-js.pg-go .pg-thirds  { animation: pg-fade   1.2s ease .5s both; }
.pg-js.pg-go .pg-c       { animation: pg-corner 1s var(--pg-ease) .35s both; }
.pg-js.pg-go .pg-c--tl   { --dx: 22px;  --dy: 22px; }
.pg-js.pg-go .pg-c--tr   { --dx: -22px; --dy: 22px; }
.pg-js.pg-go .pg-c--bl   { --dx: 22px;  --dy: -22px; }
.pg-js.pg-go .pg-c--br   { --dx: -22px; --dy: -22px; }
.pg-js.pg-go .pg-reticle { animation: pg-lock 1.1s var(--pg-ease) 1.15s both; }
.pg-js.pg-go .pg-flash   { animation: pg-shutter .45s ease 1.95s both; }

@keyframes pg-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pg-corner { from { opacity: 0; transform: translate(var(--dx), var(--dy)); } to { opacity: .9; transform: none; } }
@keyframes pg-lock {
  0%   { opacity: 0;  transform: scale(2.1); }
  60%  { opacity: 1;  transform: scale(1); }
  75%  { opacity: 1;  transform: scale(.94); }
  100% { opacity: .5; transform: scale(1); }
}
@keyframes pg-shutter { 0% { opacity: 0; } 18% { opacity: .13; } 100% { opacity: 0; } }

/* Hero detail polish */
body.home .h-hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,.35); }
body.home .h-hero .h-eyebrow span + span::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 1.9em; border-radius: 50%; background: var(--pg-gold); vertical-align: middle; transform: translateY(-1px); }
body.home .h-hero .h-eyebrow { gap: 0; }

/* Hairline where the hero meets the trust strip */
body.home .h-stats { position: relative; }
body.home .h-stats::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pg-gold) 30%, var(--pg-gold) 70%, transparent);
  opacity: .7;
}
body.home .h-trust-badge { transition: transform .4s var(--pg-ease), filter .4s; }
body.home .h-stat:hover .h-trust-badge { transform: translateY(-2px) scale(1.03); }

/* ───────────── Buttons: gold sheen sweep ───────────── */
body.home .h-btn--solid { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 10px 30px -12px rgba(217,193,135,.55); }
body.home .h-btn--solid::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(217,193,135,.55) 50%, transparent 70%);
  transform: translateX(-120%);
}
body.home .h-btn--solid:hover::after { transform: translateX(120%); transition: transform .8s var(--pg-ease); }
body.home .h-btn--line:hover { border-color: var(--pg-gold); color: var(--pg-gold); background: rgba(217,193,135,.08); }
body.home .h-btn--solid svg, body.home .h-btn--line svg { transition: transform .3s var(--pg-ease); }
body.home .h-btn:hover svg { transform: translateX(3px); }

/* Nav: gold hairline once solid */
body.home.h-scrolled #mainNav { border-bottom-color: rgba(217,193,135,.28) !important; box-shadow: 0 10px 40px -20px rgba(0,0,0,.6); }

/* ───────────── Service cards + event tiles ───────────── */
body.home .h-svc, body.home .h-tile {
  transition: transform .45s var(--pg-ease), box-shadow .45s var(--pg-ease);
  box-shadow: 0 0 0 1px rgba(217,193,135,0), 0 14px 30px -22px rgba(0,0,0,.5);
}
body.home .h-svc:hover, body.home .h-svc:focus-visible,
body.home .h-tile:hover, body.home .h-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(217,193,135,.55), 0 28px 50px -24px rgba(0,0,0,.65);
}
/* Viewfinder corners that frame the card on hover */
body.home .h-svc::before, body.home .h-tile::before {
  content: ''; position: absolute; inset: 12px; z-index: 1; pointer-events: none;
  --t: var(--pg-gold);
  background:
    linear-gradient(var(--t),var(--t)) 0 0 / 16px 1.5px no-repeat, linear-gradient(var(--t),var(--t)) 0 0 / 1.5px 16px no-repeat,
    linear-gradient(var(--t),var(--t)) 100% 0 / 16px 1.5px no-repeat, linear-gradient(var(--t),var(--t)) 100% 0 / 1.5px 16px no-repeat,
    linear-gradient(var(--t),var(--t)) 0 100% / 16px 1.5px no-repeat, linear-gradient(var(--t),var(--t)) 0 100% / 1.5px 16px no-repeat,
    linear-gradient(var(--t),var(--t)) 100% 100% / 16px 1.5px no-repeat, linear-gradient(var(--t),var(--t)) 100% 100% / 1.5px 16px no-repeat;
  opacity: 0; transform: scale(1.05);
  transition: opacity .35s ease, transform .5s var(--pg-ease);
}
body.home .h-svc:hover::before, body.home .h-svc:focus-visible::before,
body.home .h-tile:hover::before, body.home .h-tile:focus-visible::before { opacity: .95; transform: none; }
body.home .h-svc:hover .h-svc-go { background: var(--pg-gold); border-color: var(--pg-gold); color: #1a160f; }
body.home .h-tile span::after { transition: width .5s var(--pg-ease), background .3s; }
body.home .h-tile:hover span::after { width: clamp(52px, 7vw, 110px); background: var(--pg-gold); }

/* ───────────── How it works: lines draw, numbers fill ───────────── */
body.home .h-step-num { transition: background .5s ease, color .5s ease, border-color .5s ease, transform .5s var(--pg-ease); }
.pg-js body.home .h-step-top::after {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s var(--pg-ease);
  background: linear-gradient(90deg, var(--pg-gold-ink), var(--h-line-2));
}
.pg-js body.home .h-step:nth-child(1) .h-step-top::after, .pg-js body.home .h-step:nth-child(1) .h-step-num { transition-delay: .1s; }
.pg-js body.home .h-step:nth-child(2) .h-step-top::after, .pg-js body.home .h-step:nth-child(2) .h-step-num { transition-delay: .5s; }
.pg-js body.home .h-step:nth-child(3) .h-step-top::after, .pg-js body.home .h-step:nth-child(3) .h-step-num { transition-delay: .9s; }
.pg-js body.home .h-step:nth-child(4) .h-step-top::after, .pg-js body.home .h-step:nth-child(4) .h-step-num { transition-delay: 1.3s; }
.pg-in .h-step-top::after { transform: scaleX(1) !important; }
.pg-in .h-step-num { background: var(--h-ink); color: var(--h-bg); border-color: var(--h-ink); }

/* ───────────── Reviews: large gold quote mark ───────────── */
body.home .h-quote-wrap { position: relative; }
body.home .h-quote-wrap::before {
  content: '\201C';
  position: absolute; left: clamp(36px, 4.4vw, 72px); top: clamp(-96px, -6.4vw, -58px);
  font: 800 clamp(130px, 12vw, 210px)/1 var(--h-display);
  color: var(--pg-gold-ink); opacity: .16;
  pointer-events: none; z-index: 0;
}
body.home .h-quote, body.home .h-arrow { position: relative; z-index: 1; }
body.home .h-av { border-color: var(--pg-gold-ink); }
body.home .h-rate b { background: linear-gradient(180deg, var(--h-ink) 30%, var(--pg-gold-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

/* ───────────── Closing banner ───────────── */
body.home .h-cta { box-shadow: inset 0 1px 0 rgba(217,193,135,.4); }
body.home .h-cta .h-cta-sub::before, body.home .h-cta .h-cta-sub::after { background: linear-gradient(90deg, transparent, var(--pg-gold)); }
body.home .h-cta .h-cta-sub::after { transform: scaleX(-1); }
body.home .h-newsletter-input { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color .25s, background .25s; }
body.home .h-newsletter-input:focus { outline: 2px solid var(--pg-gold); border-color: var(--pg-gold); background: rgba(255,255,255,.14); }

/* ───────────── Responsive ───────────── */
@media (max-width: 1100px) { .pg-frame { left: 34%; } }
@media (max-width: 768px) {
  /* hero photo becomes a block at the top on phones — frame it there */
  /* Compact phone hero: a wide strip of the photo (top of the picture, where the
     face is), with the heading pulled up close underneath.
     Tune here: --pg-mh = strip height, --pg-pos = which part of the photo shows. */
  body.home .h-hero { --pg-mh: clamp(205px, 55vw, 250px); --pg-pos: 34% 8%; }
  body.home .h-hero-photo { height: var(--pg-mh); max-height: none; }
  body.home .h-hero-photo img { object-position: var(--pg-pos); }
  body.home .h-hero-shade { height: var(--pg-mh); }
  body.home .h-hero-inner { margin-top: -9vw; }
  .pg-frame {
    top: 62px; left: 16px; right: 16px; bottom: auto;
    height: calc(var(--pg-mh) - 64px - 40px);
  }
  .pg-c { width: 20px; height: 20px; }
  .pg-reticle { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
  body.home .h-quote-wrap::before { display: none; }
}
@media (hover: none) {
  /* no hover on touch — keep cards clean */
  body.home .h-svc::before, body.home .h-tile::before { display: none; }
}

/* ───────────── Reduced motion: everything static and visible ───────────── */
@media (prefers-reduced-motion: reduce) {
  .pg-js .pg-c, .pg-js .pg-thirds { opacity: .9; }
  .pg-js .pg-reticle { opacity: .5; }
  .pg-js.pg-go .pg-thirds, .pg-js.pg-go .pg-c, .pg-js.pg-go .pg-reticle,
  .pg-js.pg-go .pg-flash, .pg-js.pg-go body.home .h-hero-photo img { animation: none !important; }
  .pg-js body.home .h-step-top::after { transform: none; transition: none; }
  body.home .h-svc, body.home .h-tile, body.home .h-svc::before, body.home .h-tile::before,
  body.home .h-btn--solid::after, body.home .h-trust-badge, body.home .h-step-num { transition: none !important; }
  body.home .h-svc:hover, body.home .h-tile:hover { transform: none; }
}