/* ==========================================================================
   Homepage page template
   ========================================================================== */

/* HERO — cream sanctuary with soft glows */
.tpl-homepage .hero{background:var(--cream);padding:90px 0 120px;position:relative;overflow:hidden;text-align:center}
.tpl-homepage .hero::before,
.tpl-homepage .hero::after{content:'';position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none}
.tpl-homepage .hero::before{width:380px;height:380px;background:#EAD9B2;top:-120px;left:-80px}
.tpl-homepage .hero::after{width:440px;height:440px;background:#E6D0AC;bottom:-160px;right:-100px}
.tpl-homepage .hero .inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
.tpl-homepage .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;display:block;text-align:center}
.tpl-homepage .hero h1{font-family:var(--ff-d);font-weight:300;font-size:clamp(42px,7vw,84px);line-height:1.03;letter-spacing:-.025em;color:var(--ink)}
.tpl-homepage .hero h1 em{font-style:italic;font-weight:400;color:var(--purple)}
.tpl-homepage .hero p.sub{font-size:19px;color:var(--body);margin:28px auto 38px;max-width:560px}

/* SERVICES — framed white box that overlaps the hero */
.tpl-homepage .services{margin-top:-70px;padding-bottom:100px;position:relative;z-index:3}
.tpl-homepage .svc-frame{background:#fff;border:1px solid var(--rule);border-radius:20px;padding:var(--pad-frame-top) var(--pad-frame) var(--pad-frame);box-shadow:0 30px 80px -40px rgba(14,35,64,.2)}
.tpl-homepage .svc-frame h2{font-family:var(--ff-d);font-weight:400;font-size:38px;text-align:center;color:var(--ink);margin-bottom:6px;letter-spacing:-.015em}
.tpl-homepage .svc-frame .sub{text-align:center;color:var(--muted);font-size:15px;margin-bottom:38px}
.tpl-homepage .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.tpl-homepage .svc{padding:28px 26px 30px;border-radius:14px;position:relative;cursor:default;transition:background-color .35s ease,transform .25s ease;overflow:hidden;isolation:isolate}
.tpl-homepage .svc.is-linked{cursor:pointer}
/* Stretched-link — whole card is the click target via ::after overlay on the inner arrow link */
.tpl-homepage .svc.is-linked .arrow::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:auto}

/* Eye watermark — opt-in via the Services block "show_eye" toggle.
   The Services renderer wraps cards in .vfh-cards with data-eye="1" when enabled. */
.vfh-cards[data-eye="1"] .svc::before{content:'';position:absolute;inset:0;background:url('eye-watermark.png') no-repeat 55% 45%;background-size:130% auto;opacity:.9;pointer-events:none;z-index:-1;transition:opacity .35s ease,transform .6s ease}
.vfh-cards[data-eye="1"] .svc:hover::before{opacity:1}
.vfh-cards[data-eye="1"] .svc > *{position:relative}
.vfh-cards[data-eye="1"] .svc.gold{background:#F8E9C1}
.vfh-cards[data-eye="1"] .svc.cyan{background:#D5E8EE}
.vfh-cards[data-eye="1"] .svc.teal{background:#D6E5DF}
.tpl-homepage .svc .dot{width:8px;height:8px;border-radius:50%;margin-bottom:14px}
.tpl-homepage .svc h3{font-family:var(--ff-d);font-weight:400;font-size:26px;color:var(--ink);margin-bottom:12px;letter-spacing:-.01em}
.tpl-homepage .svc p{font-size:14px;color:var(--body);margin-bottom:20px}
.tpl-homepage .svc .arrow{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.tpl-homepage .svc .bar{position:absolute;left:26px;right:26px;bottom:14px;height:2px;border-radius:2px}
.tpl-homepage .svc.gold .dot{background:var(--gold)}  .tpl-homepage .svc.gold .bar{background:var(--gold)}
.tpl-homepage .svc.cyan .dot{background:var(--cyan)}  .tpl-homepage .svc.cyan .bar{background:var(--cyan)}
.tpl-homepage .svc.teal .dot{background:var(--teal)}  .tpl-homepage .svc.teal .bar{background:var(--teal)}
.tpl-homepage .svc.gold:hover{background:var(--gold-soft)}
.tpl-homepage .svc.cyan:hover{background:var(--cyan-soft)}
.tpl-homepage .svc.teal:hover{background:var(--teal-soft)}

/* BLOG */
/* Homepage blog block uses the shared .blog / .blog-grid / .post styles
   defined in blocks.css so the archive (/resources/) and category pages
   render with the same look. */

/* Mobile */
@media(max-width:880px){
  .tpl-homepage .svc-grid{grid-template-columns:1fr}
  .tpl-homepage .svc-grid > .svc + .svc{border-top:1px solid var(--rule)}
  .tpl-homepage .blog-grid{grid-template-columns:1fr}
}