/*
 Theme Name:   Astra Child
 Theme URI:    https://diceheart.gr
 Description:  Child theme for Astra
 Author:       DiceHeart
 Template:     astra
 Version:      1.0.0
*/

     /*── CSS VARIABLES — available sitewide ──────────────────────────────────── */
:root {
  --bg:          #0e0b06;
  --bg-mid:      #1a1108;
  --bg-card:     #1f1609;
  --bg-stone:    #241a0e;

  --gold:        #c9913a;
  --gold-lt:     #e8b96a;
  --gold-dark:   #8a5e1e;
  --gold-glow:   rgba(201,145,58,.18);
  --gold-dim:    rgba(201,145,58,.28);

  --crimson:     #8b1a1a;
  --crimson-lt:  #a52020;

  --parchment:   #f2e8d5;
  --ink:         #1c150d;

  --text:        #f0e8d8;
  --text-muted:  #a89070;
  --text-dim:    #9a8060;

  --border:      rgba(201,145,58,.25);
  --border-dim:  rgba(201,145,58,.11);

  --ease: cubic-bezier(.25,.46,.45,.94);
}

 /*── GLOBAL TYPOGRAPHY ───────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel Decorative', serif;
  line-height: 1.15;
  color: var(--text) !important;
  font-weight: 700;
}

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      /* index3: IM Fell English body */
      font-family: 'IM Fell English', Georgia, serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      overflow-x: hidden;
    }

    ul{
      margin: 0 !important;
    }

    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; }



    /* ─── STONE GRAIN (index3) ──────────────────────────────── */
    .grain {
      position: absolute; inset: 0; pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
      opacity: .55;
    }

    /* ─── ORNAMENTS (index3 refined) ───────────────────────── */
    .orn {
      display: flex; align-items: center; gap: 1rem;
      color: var(--gold-dim);
    }
    .orn::before, .orn::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(to right, transparent, var(--gold-dim));
    }
    .orn::before { background: linear-gradient(to left, transparent, var(--gold-dim)); }
    .orn-g { font-size: .85rem; color: var(--gold); }

    /* ─── BUTTONS ───────────────────────────────────────────── */
    .btn {
      display: inline-flex; align-items: center; gap: .5rem;
      font-family: 'Cinzel', serif; font-size: .78rem;
      font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
      padding: .8rem 2rem; cursor: pointer; border: none;
      transition: all .3s var(--ease); position: relative;
    }
    /* subtle inner shine (index3) */
    .btn-gold {
      background: var(--gold); color: var(--bg);
    }
    .btn-gold::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 55%);
      pointer-events: none;
    }
    .btn-gold:hover {
      background: #9a6a18;
      color: var(--parchment);
      box-shadow: 0 0 32px rgba(201,145,58,.28), 0 8px 22px rgba(0,0,0,.55);
      transform: translateY(-2px);
    }
    .btn-outline {
      background: transparent; color: var(--gold);
      border: 1.5px solid var(--gold);
    }
    .btn-outline:hover {
      background: rgba(201,145,58,.1);
      box-shadow: 0 0 16px var(--gold-glow);
      transform: translateY(-2px);
    }
    .btn-crimson {
      background: var(--crimson); color: var(--parchment);
    }
    .btn-crimson:hover {
      background: var(--crimson-lt);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(139,26,26,.4);
    }

    /* ─── NAV ───────────────────────────────────────────────── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      height: 70px; padding: 0 2.5rem;
      display: flex; align-items: center; justify-content: space-between;
      transition: background .4s, border-bottom .4s, box-shadow .4s;
    }
    .nav.scrolled {
      background: rgba(14,11,6,.97);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--border-dim);
      box-shadow: 0 4px 24px rgba(0,0,0,.45);
    }
    .nav.scrolled::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg,
        transparent 0%, var(--crimson) 20%, var(--gold) 50%, var(--crimson) 80%, transparent 100%);
    }
    .nav-logo {
      display: flex; align-items: center; gap: .6rem;
      text-decoration: none;
    }
    .nav-logo img {
      height: 38px;
      width: auto;
      display: block;
      filter: drop-shadow(0 0 8px rgba(201,145,58,.35));
      transition: filter .3s;
    }
    .nav-logo:hover img { filter: drop-shadow(0 0 14px rgba(201,145,58,.65)); }
    .nav-logo-text {
      font-family: 'Cinzel Decorative', serif;
      font-size: .85rem; font-weight: 700; letter-spacing: .04em;
      line-height: 1;
    }
    .nav-logo-text .dice { color: var(--text); }
    .nav-logo-text .heart { color: var(--gold); }
    .nav-links {
      position: fixed; top: 0; right: 2.5rem;
      height: 70px;
      display: flex; align-items: center; gap: 2rem; list-style: none;
      z-index: 1001;
    }
    .nav-links a {
      font-family: 'Cinzel', serif; font-size: .72rem;
      letter-spacing: .12em; text-transform: uppercase;
      color: var(--text-muted); transition: color .2s, text-shadow .2s;
    }
    .nav-links a:hover { color: var(--gold); text-shadow: 0 0 10px var(--gold-glow); }
    .nav-cta {
      color: var(--bg) !important;
      background: var(--gold); padding: .45rem 1.2rem;
    }
    .nav-cta:hover { background: #9a6a18 !important; color: var(--parchment) !important; text-shadow: none !important; }

    /* ─── HERO (index.html structure + index3 depth) ────────── */
    .hero {
      position: relative; height: 100vh; min-height: 680px;
      display: flex; align-items: center; overflow: hidden;
    }

    /* index.html photo, index3 brightness/saturation filter */
    .hero-bg {
      position: absolute; inset: 0;
      background-image: url('/wp-content/uploads/2026/01/Homepage_bg-scaled.png');
      background-size: cover; background-position: center 30%;
      transform: scale(1.06); transition: transform 10s var(--ease);
      filter: brightness(.48) saturate(.78);
    }
    .hero:hover .hero-bg { transform: scale(1); }

    /* index.html angle + index3 radial push */
    .hero-overlay {
      position: absolute; inset: 0;
      background:
        linear-gradient(108deg,
          rgba(14,11,6,.94) 0%,
          rgba(14,11,6,.68) 48%,
          rgba(14,11,6,.22) 100%),
        linear-gradient(to bottom,
          rgba(14,11,6,.55) 0%,
          transparent 22%,
          transparent 72%,
          rgba(14,11,6,.85) 100%);
    }

    /* index3: thin chrome line at top */
    .hero-chrome {
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg,
        transparent 0%, var(--crimson) 20%, var(--gold) 50%, var(--crimson) 80%, transparent 100%);
    }

    .hero-inner {
      position: relative; z-index: 2;
      width: 100%; display: flex; align-items: center; justify-content: space-between;
      padding: 0 max(2.5rem, calc((100vw - 1200px)/2 + 2.5rem));
    }
    .hero-content {
      max-width: 600px;
    }
    .hero-logo-img {
      flex-shrink: 0;
      width: clamp(180px, 18vw, 280px);
      opacity: .92;
      filter: drop-shadow(0 0 40px rgba(201,145,58,.3));
      animation: hero-logo-float 5s ease-in-out infinite;
    }
    @keyframes hero-logo-float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-10px); }
    }
    @media(max-width:768px){ .hero-logo-img { display: none; } }

    /* index3: crest eyebrow with flanking lines */
    .hero-crest {
      display: flex; align-items: center; gap: .8rem; margin-bottom: 1.5rem;
    }
    .hero-crest-line { width: 34px; height: 1px; background: var(--gold-dark); }
    .hero-crest span {
      font-family: 'Cinzel', serif; font-size: .63rem;
      letter-spacing: .35em; text-transform: uppercase; color: var(--gold); font-weight: 700 !important;
    }

    /* index4: rating pill */
    .hero-rating {
      display: inline-flex; align-items: center; gap: .55rem;
      background: rgba(201,145,58,.08); border: 1px solid var(--gold-dim);
      padding: .28rem .95rem; margin-bottom: 1.4rem;
    }
    .hero-rating .stars { color: var(--gold); font-size: .82rem; letter-spacing: .05em; }
    .hero-rating strong { font-family: 'Cinzel', serif; font-size: .75rem; color: var(--text); }
    .hero-rating span   { font-family: 'Cinzel', serif; font-size: .63rem; color: var(--text-muted); }

    /* index.html: h1 with gold span, Cinzel Decorative (index3 upgrade) */
    .hero h1 {
      font-size: clamp(3rem, 7vw, 5.8rem);
      font-weight: 900; color: var(--text);
      text-shadow: 0 4px 40px rgba(0,0,0,.75);
      margin-bottom: .45rem; letter-spacing: .02em;
    }

    /* index.html italic tagline */
    .hero-tagline {
      font-family: 'Cinzel', serif; font-style: italic;
      font-size: clamp(.95rem, 1.6vw, 1.2rem);
      color: var(--text-muted); letter-spacing: .07em; margin-bottom: .6rem;
    }

    /* index3: italic verse with left gold border */
    .hero-verse {
      font-style: italic; font-size: .92rem;
      color: rgba(240,232,216,.38); line-height: 1.75;
      padding-left: 1rem; border-left: 2px solid var(--gold-dark);
      margin-bottom: 2.5rem;
    }

    .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

    /* index3: ember particles */
    .embers {
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 190px; pointer-events: none; z-index: 2; overflow: hidden;
    }
    .ember {
      position: absolute; bottom: 0; border-radius: 50%; opacity: 0;
      animation: ember-rise var(--dur,4s) ease-in var(--delay,0s) infinite;
    }
    @keyframes ember-rise {
      0%   { opacity: 0; transform: translateY(0) translateX(0) scale(1); }
      18%  { opacity: .85; }
      82%  { opacity: .25; }
      100% { opacity: 0; transform: translateY(-185px) translateX(var(--dx,18px)) scale(.12); }
    }

    /* index.html: bouncing scroll cue */
    .hero-scroll {
      position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
      z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .5rem;
      font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .2em;
      text-transform: uppercase; color: var(--text-dim);
      animation: hero-bounce 2.2s ease-in-out infinite;
    }
    .hero-scroll svg { width: 18px; opacity: .5; }
    @keyframes hero-bounce {
      0%,100% { transform: translateX(-50%) translateY(0); }
      50%      { transform: translateX(-50%) translateY(7px); }
    }

    /* ─── PROCLAMATION (index3) ─────────────────────────────── */
    .herald {
  background: var(--crimson);
  padding: .7rem 0;
  text-align: center;
  position: relative;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(0,0,0,.3);
  display: flex;
  justify-content: center;
}

.herald-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  max-width: 85%;
  margin: 0 auto;
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(240,232,216,.88);
  
}

.herald-content span{
    font-weight: 700 !important;
}

.herald-item {
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.sep {
  opacity: 0.5;
}

/* Swords Positioning */
.herald::before, .herald::after {
  content: '⚔';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.22);
  font-size: .8rem;
}
.herald::before { left: 2rem; }
.herald::after { right: 2rem; }

/* TABLET & MOBILE ADJUSTMENTS */
@media (max-width: 768px) {
  .herald {
    padding: 1rem 0;
  }

  .herald-content {
    max-width: 80%;
    gap: 0.4rem;
    letter-spacing: .1em;
  }

  .sep {
    display: none;
  }

  .herald::before { left: 0.8rem; }
  .herald::after { right: 0.8rem; }
}

/* Emoji sizing */
.herald .emoji {
  height: 1.1em;
  width: 1.1em;
  margin: 0 0.4rem;
  vertical-align: middle;
}

    /* ─── SERVICES ──────────────────────────────────────────── */
    .services {
      padding: 7rem 0 9rem; position: relative;
      background: linear-gradient(180deg, #160f08 0%, #120c07 60%, var(--bg) 100%);
    }
    /* bottom fade blending services into about */
    .services::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 160px;
      background: linear-gradient(to bottom, transparent, var(--bg));
      pointer-events: none; z-index: 1;
    }

    .sec-head {
      text-align: center; margin-bottom: 4rem; position: relative; z-index: 2;
    }
    .sec-head .over {
      font-family: 'Cinzel', serif; font-size: .64rem; letter-spacing: .34em;
      text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .8rem;
    }
    .sec-head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }

    /* THREE TALL CARDS — index.html aspect ratio + index3 double border */
    .services-grid {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem;
      position: relative; z-index: 2;
    }
    @media(max-width:900px){ .services-grid { grid-template-columns:1fr; } }

    .svc-card {
      position: relative; overflow: hidden;
      /* lock card height — image fills it, never drives it */
      aspect-ratio: 3/4;
      /* index3: outer border */
      border: 1px solid var(--border);
      cursor: pointer;
      transition: transform .4s var(--ease), box-shadow .4s;
    }
    /* index3: inner inset border */
    .svc-card::before {
      content: ''; position: absolute; inset: 5px;
      border: 1px solid var(--border-dim);
      pointer-events: none; z-index: 3; transition: border-color .3s;
    }
    .svc-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 55px rgba(0,0,0,.65), 0 0 50px var(--gold-glow);
    }
    .svc-card:hover::before { border-color: var(--border); }

    /* index.html: full tall photo */
    .svc-card img {
      display: block; width: 100%; height: 100%;
      object-fit: cover;
      transition: transform .7s var(--ease), filter .4s;
      filter: brightness(.62) saturate(.82);
    }
    .svc-card:hover img { transform: scale(1.09); filter: brightness(.82) saturate(1); }

    /* index3: crimson label top-left */
    .svc-label {
      position: absolute; top: 1rem; right: .9rem; z-index: 4;
      font-family: 'Cinzel', serif; font-size: .58rem; letter-spacing: .2em;
      text-transform: uppercase; background: var(--crimson); color: var(--parchment);
      padding: .28rem .8rem;
    }

    /* index.html: gradient overlay from bottom, text + CTA at base */
    .svc-overlay {
      position: absolute; inset: 0; z-index: 2;
      background: linear-gradient(to top,
        rgba(14,11,6,.97) 0%,
        rgba(14,11,6,.55) 45%,
        transparent 100%);
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 2rem 1.9rem;
    }

    /* index3: ornament rule above title */
    .svc-orn {
      display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
    }
    .svc-orn::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(to right, var(--gold-dark), transparent);
    }
    .svc-orn span { font-size: .7rem; color: var(--gold-dark); }

    .svc-card h3 {
      font-size: 1.4rem; color: var(--text); margin-bottom: .45rem;
    }
    .svc-card p {
      font-size: .87rem; color: var(--text-muted);
      margin-bottom: 1.25rem; line-height: 1.55;
    }

    /* index.html: CTA slides up on hover — the hero feature */
    .svc-cta {
      align-self: flex-start;
      font-family: 'Cinzel', serif; font-size: .72rem;
      font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
      background: var(--gold); color: var(--bg);
      padding: .6rem 1.3rem; border: none; cursor: pointer;
      /* hidden by default */
      opacity: 0; transform: translateY(8px);
      transition: opacity .3s var(--ease), transform .3s var(--ease), background .25s;
    }
    .svc-card:hover .svc-cta { opacity: 1; transform: translateY(0); }
    .svc-cta:hover { background: #9a6a18 !important; color: var(--parchment) !important; }

    /* ─── ABOUT ─────────────────────────────────────────────── */
    .about {
      padding: 7rem 0; background: var(--bg); position: relative;
    }
    /* top fade + thin gold line at the services→about seam */
    .about::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px;
      background: linear-gradient(to bottom,
        rgba(22,15,8,.55) 0%,
        transparent 100%);
      pointer-events: none; z-index: 1;
    }
    .about::after {
      content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
      background: linear-gradient(90deg,
        transparent 0%, rgba(201,145,58,.18) 20%,
        rgba(201,145,58,.45) 50%,
        rgba(201,145,58,.18) 80%, transparent 100%);
      pointer-events: none; z-index: 2;
    }
    .about-inner {
      display: grid; grid-template-columns: 1fr 1fr; gap: 5.5rem; align-items: center;
    }
    @media(max-width:768px){ .about-inner { grid-template-columns:1fr; gap:3rem; } }

    /* index.html layout + index3 finishing */
    .about-images {
      position: relative; padding: 0 3.5rem 3.5rem 0;
    }

    /* Layered gold portrait frame on main image */
    .about-img-main {
      width: 100%; aspect-ratio: 3/4; object-fit: cover;
      display: block;
      filter: sepia(.18) brightness(.85);
      transform: rotate(-1.2deg);
      transform-origin: center center;
      box-shadow:
        0 0 0 2px rgba(201,145,58,.8),
        0 0 0 11px rgba(10,8,3,.95),
        0 0 0 13px rgba(201,145,58,.55),
        0 0 0 14px rgba(201,145,58,.15),
        0 32px 80px rgba(0,0,0,.85),
        0 0 60px rgba(201,145,58,.08);
      transition: transform .4s ease, filter .4s ease;
    }
    .about-img-main:hover {
      transform: rotate(0deg) scale(1.01);
      filter: sepia(.08) brightness(.92);
    }

    /* Layered gold portrait frame on accent image */
    .about-img-accent {
      position: absolute; bottom: 0; right: 0;
      width: 56%; aspect-ratio: 1; object-fit: cover;
      display: block;
      filter: sepia(.15) brightness(.82);
      transform: rotate(1.8deg);
      transform-origin: center center;
      box-shadow:
        0 0 0 3px rgba(10,8,3,1),
        0 0 0 5px rgba(201,145,58,.75),
        0 0 0 13px rgba(10,8,3,.95),
        0 0 0 15px rgba(201,145,58,.45),
        0 20px 55px rgba(0,0,0,.8);
      transition: transform .4s ease;
    }
    .about-img-accent:hover { transform: rotate(0deg) scale(1.02); }

    /* index3: wax seal */
    .wax {
      position: absolute; top: -1.5rem; right: -.6rem;
      width: 74px; height: 74px; border-radius: 50%; z-index: 3;
      background: radial-gradient(circle at 38% 38%, #aa2424, var(--crimson) 58%, #5a0808);
      border: 3px solid rgba(201,145,58,.38);
      box-shadow: 0 4px 18px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,255,255,.1);
      display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    }
    /* soft glow behind images */
    .about-glow {
      position: absolute; bottom: 1rem; right: 1rem;
      width: 260px; height: 260px; border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle, rgba(201,145,58,.18), transparent 68%);
    }

    .about-text .over {
      font-family: 'Cinzel', serif; font-size: .63rem; letter-spacing: .3em;
      text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .8rem;
    }
    .about-text h2 { font-size: clamp(1.6rem, 2.5vw, 2.3rem); margin-bottom: .85rem; }
    .about-text p  { font-style: italic; font-size: .94rem; color: var(--text-muted); margin-bottom: 1rem; }
    .about-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }

    /* ─── STATS (index.html gold band + index3 numbers) ──────── */
    .stats {
      padding: 4rem 0;
      background: var(--gold);
      border-top: 1px solid rgba(0,0,0,.15);
      border-bottom: 1px solid rgba(0,0,0,.15);
    }
    .stats-grid {
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 1rem; text-align: center;
    }
    @media(max-width:768px){ .stats-grid { grid-template-columns:repeat(2,1fr); } }

    .stat-item { padding: .5rem 1rem; position: relative; }
    .stat-item::before {
      content: '◆'; position: absolute; top: -.2rem; left: 50%; transform: translateX(-50%);
      font-size: .45rem; color: rgba(14,11,6,.3);
    }
    .stat-num {
      display: block; font-family: 'Cinzel Decorative', serif;
      font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 900;
      color: var(--bg); line-height: 1; margin-bottom: .35rem;
    }
    .stat-lbl {
      font-family: 'Cinzel', serif; font-size: .7rem;
      font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
      color: rgba(14,11,6,.65);
    }

    /* ─── PRICING ────────────────────────────────────────────── */
    .pricing {
      padding: 7rem 0; background: var(--bg-mid); position: relative;
    }
    .pricing-grid {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
      position: relative; z-index: 2;
    }
    @media(max-width:860px){ .pricing-grid { grid-template-columns:1fr; } }

    /* index3 double-border card */
    .price-card {
      background: var(--bg-card); border: 1px solid var(--border);
      padding: 2.25rem; position: relative;
      transition: transform .35s var(--ease), box-shadow .35s;
      display: flex; flex-direction: column;
    }
    .price-card::before {
      content: ''; position: absolute; inset: 5px;
      border: 1px solid var(--border-dim); pointer-events: none;
      transition: border-color .3s;
    }
    .price-card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 0 40px var(--gold-glow); }
    .price-card:hover::before { border-color: var(--border); }
    .price-card.featured { box-shadow: 0 0 60px rgba(201,145,58,.08); }

    .price-best {
      position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
      font-family: 'Cinzel', serif; font-size: .6rem; font-weight: 600;
      letter-spacing: .14em; text-transform: uppercase;
      background: var(--gold); color: var(--bg); padding: .28rem 1.1rem;
      white-space: nowrap;
    }
    .price-icon { font-size: 1.75rem; margin-bottom: .9rem; }
    .price-name {
      font-family: 'Cinzel', serif; font-size: .66rem; letter-spacing: .2em;
      text-transform: uppercase; color: var(--text-muted); margin-bottom: .5rem;
    }
    .price-amt {
      font-family: 'Cinzel Decorative', serif; font-size: 3rem;
      font-weight: 900; color: var(--gold); line-height: 1; margin-bottom: .2rem;
    }
    .price-amt sup { font-size: 1.35rem; vertical-align: super; }
    .price-per { font-style: italic; font-size: .78rem; color: var(--text-dim); margin-bottom: 1.3rem; }
    .price-sep { height: 1px; background: var(--border-dim); margin-bottom: 1.3rem; }
    .price-feats { list-style: none; display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.6rem; flex: 1; }
    .price-feats li {
      display: flex; align-items: flex-start; gap: .6rem;
      font-style: italic; font-size: .86rem; color: var(--text-muted);
    }
    .price-feats li::before {
      content: '✦'; color: var(--gold); font-size: .55rem;
      margin-top: .38rem; flex-shrink: 0; font-style: normal;
    }

    /* ─── FINDER — parchment scroll (index3) ───────────────── */
    .finder {
      padding: 7rem 0; background: var(--bg); position: relative; overflow: hidden;
    }
    .finder-bg {
      position: absolute; inset: 0;
      background-image: url('/wp-content/uploads/2025/12/IMG_2020-2-scaled.png');
      background-size: cover; background-position: center; opacity: .05; pointer-events: none;
    }

    /* index3: parchment scroll */
    .scroll {
      background:
        linear-gradient(to right, rgba(0,0,0,.09) 0%, transparent 5%, transparent 95%, rgba(0,0,0,.09) 100%),
        linear-gradient(160deg, #faf4e4 0%, #f4e9cc 35%, #efe3bc 65%, #ece0b8 100%);
      color: var(--ink);
      max-width: 880px; margin: 0 auto; padding: 3.8rem 3.2rem 4.2rem;
      position: relative; z-index: 2;
      border: none;
      box-shadow:
        0 0 0 1px rgba(160,125,60,.28),
        -10px 0 28px -6px rgba(0,0,0,.25),
        10px 0 28px -6px rgba(0,0,0,.25),
        0 40px 90px rgba(0,0,0,.7);
    }

    /* Cylindrical wooden/golden rod ends */
    .scroll::before, .scroll::after {
      content: '';
      position: absolute;
      left: -22px; right: -22px;
      height: 32px;
      border-radius: 5px;
      background: linear-gradient(to bottom,
        rgba(255,248,210,.55) 0%,
        #e8c860 8%,
        #c89828 28%,
        #7a4c08 52%,
        #a87030 72%,
        #cca840 88%,
        rgba(255,248,210,.25) 100%
      );
      box-shadow:
        0 6px 22px rgba(0,0,0,.65),
        inset 0 2px 3px rgba(255,255,255,.55),
        inset 0 -2px 5px rgba(0,0,0,.45);
    }
    .scroll::before { top: -16px; }
    .scroll::after  { bottom: -16px; }

    /* Thin ink border lines just inside the rod ends */
    .scroll-body {
      border-top: 1px solid rgba(120,90,40,.2);
      border-bottom: 1px solid rgba(120,90,40,.2);
      padding-top: 1.2rem; padding-bottom: 1.2rem;
    }

    /* Wax-seal ornaments at top & bottom of scroll */
    .scroll-seal {
      text-align: center; font-size: 1.1rem; color: #a07030;
      line-height: 1; padding: .5rem 0;
      letter-spacing: .5em;
      opacity: .7;
    }
    .scroll-seal-bot { padding-top: .6rem; padding-bottom: 0; }

    .scroll-head { text-align: center; margin-bottom: 2.25rem; }
    .scroll-head h2 {
      font-family: 'Cinzel Decorative', serif;
      font-size: clamp(1.2rem,2.5vw,1.75rem); color: var(--ink) !important; margin-bottom: .5rem;
    }
    .scroll-head p { font-style: italic; font-size: .9rem; color: #7a6040; }

    .scroll-rule {
      display: flex; align-items: center; gap: 1rem; margin: 1rem 0;
    }
    .scroll-rule::before, .scroll-rule::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(to right, transparent, #c4a060, transparent);
    }
    .scroll-rule span { font-size: .75rem; color: #a08050; }

    .scroll-fields {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.2rem 1.6rem; margin-bottom: 1.8rem;
    }
    /* 5th field spans to keep symmetry */
    .scroll-fields .sf:nth-child(5) { grid-column: 2 / 3; }
    @media(max-width:700px){
      .scroll-fields { grid-template-columns: 1fr 1fr; }
      .scroll-fields .sf:nth-child(5) { grid-column: auto; }
    }
    @media(max-width:480px){
      .scroll-fields { grid-template-columns: 1fr; }
    }

    .sf label {
      display: block; font-family: 'Cinzel', serif; font-size: .6rem;
      letter-spacing: .18em; text-transform: uppercase; color: #7a6040; margin-bottom: .4rem;
    }
    .sf select {
      width: 100%; padding: 1rem .9rem;
      background: rgba(255,255,255,.45); border: 1px solid #bca878;
      border-bottom: 2px solid #b09050;
      color: var(--ink); font-family: 'IM Fell English', serif;
      font-style: italic; font-size: .9rem; cursor: pointer; appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a6030' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.25rem;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
      transition: border-color .2s, box-shadow .2s;
    }
    .sf select:focus { outline: none; border-color: #9a7840; box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 0 2px rgba(160,120,60,.18); }

    .scroll-submit { text-align: center; }
    .scroll-btn {
      background: var(--ink); color: var(--parchment);
      font-family: 'Cinzel', serif; font-size: .72rem;
      letter-spacing: .16em; text-transform: uppercase;
      padding: .88rem 2.75rem; border: none; cursor: pointer;
      display: inline-flex; align-items: center; gap: .6rem;
      position: relative; transition: background .3s, box-shadow .3s;
    }
    .scroll-btn::before {
      content: ''; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.07);
    }
    .scroll-btn:hover { background: var(--crimson); box-shadow: 0 8px 28px rgba(139,26,26,.35); }

    /* ─── D&D BANNER (index3 framed) ────────────────────────── */
    .dnd {
      position: relative; padding: 9rem 0; text-align: center; overflow: hidden;
    }
    .dnd-bg {
      position: absolute; inset: 0;
      background-image: url('/wp-content/uploads/2025/12/IMG_2242-1-scaled.jpeg');
      background-size: cover; background-position: center;
      filter: brightness(.18) saturate(.5);
    }
    .dnd-vignette {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 50%,
        rgba(139,26,26,.2) 0%, rgba(14,11,6,.65) 100%);
    }
    .dnd-line {
      position: absolute; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg,
        transparent 0%, var(--crimson) 22%, var(--gold) 50%, var(--crimson) 78%, transparent 100%);
    }
    .dnd-line-top { top:0; } .dnd-line-bot { bottom:0; }

    .dnd-content { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; padding: 0 2rem; }

    /* index3: ornate framed box with corner glyphs */
    .dnd-frame {
      border: 1px solid var(--border); padding: 3.5rem 3rem; position: relative;
    }
    .dnd-frame::before {
      content: ''; position: absolute; inset: 6px;
      border: 1px solid var(--border-dim); pointer-events: none;
    }
    .c { position: absolute; font-size: .78rem; color: var(--gold); line-height: 1; }
    .c-tl{top:.6rem;left:.7rem} .c-tr{top:.6rem;right:.7rem}
    .c-bl{bottom:.6rem;left:.7rem} .c-br{bottom:.6rem;right:.7rem}

    .dnd-content .over {
      font-family: 'Cinzel', serif; font-size: .63rem; letter-spacing: .3em;
      text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .9rem;
    }
    .dnd-content h2 { font-size: clamp(1.5rem,3vw,2.5rem); margin-bottom: .85rem; }
    .dnd-content p  { font-style: italic; color: var(--text-muted); margin-bottom: 2rem; }

    /* ─── REVIEWS ────────────────────────────────────────────── */
    .reviews { padding: 7rem 0; background: var(--bg-mid); position: relative; overflow: hidden; }
    .reviews::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(201,145,58,.04), transparent);
      pointer-events: none;
    }

    .reviews-score {
      display: flex; align-items: center; justify-content: center; gap: 1rem;
      margin-bottom: 3.5rem; flex-wrap: wrap;
    }
    .reviews-stars { color: var(--gold); font-size: 1.3rem; letter-spacing: .1em; }
    .reviews-num {
      font-family: 'Cinzel Decorative', serif; font-size: 2.6rem;
      font-weight: 900; color: var(--gold); line-height: 1;
    }
    .reviews-meta {
      font-family: 'Cinzel', serif; font-size: .62rem;
      letter-spacing: .18em; text-transform: uppercase;
      color: var(--text-muted); line-height: 1.6;
    }
    .reviews-divider { width: 1px; height: 2.5rem; background: var(--border-dim); }

    .reviews-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
      position: relative; z-index: 2;
    }
    @media(max-width:860px){ .reviews-grid { grid-template-columns: 1fr; } }

    .review-card {
      background: var(--bg-card); border: 1px solid var(--border);
      padding: 2rem; position: relative;
      display: flex; flex-direction: column; gap: 1.2rem;
      transition: transform .35s var(--ease), box-shadow .35s;
    }
    .review-card::before {
      content: ''; position: absolute; inset: 5px;
      border: 1px solid var(--border-dim); pointer-events: none; transition: border-color .3s;
    }
    .review-card:hover { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 40px var(--gold-glow); }
    .review-card:hover::before { border-color: var(--border); }

    .review-qs {
      font-family: 'Cinzel Decorative', serif; font-size: 3.5rem;
      color: var(--gold); opacity: .25; line-height: .8; user-select: none;
    }
    .review-text {
      font-style: italic; font-size: .92rem; color: var(--text-muted);
      line-height: 1.75; flex: 1;
    }
    .review-stars { color: var(--gold); font-size: .85rem; letter-spacing: .08em; }
    .review-author {
      display: flex; align-items: center; gap: .75rem;
      padding-top: 1rem; border-top: 1px solid var(--border-dim);
    }
    .review-avatar {
      width: 38px; height: 38px; border-radius: 50%;
      background: var(--gold-glow); border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Cinzel', serif; font-size: .75rem; color: var(--gold);
      flex-shrink: 0;
    }
    .review-name { font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: .1em; color: var(--text); }
    .review-date { font-style: italic; font-size: .72rem; color: var(--text-dim); margin-top: .15rem; }

    .reviews-cta {
      text-align: center; margin-top: 3rem;
      display: flex; align-items: center; justify-content: center; gap: .6rem;
      font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .16em;
      text-transform: uppercase; color: var(--text-dim);
    }
    .reviews-cta a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

    /* ─── FOOTER (index3 centered crest) ───────────────────── */
    .footer {
      background: var(--bg); border-top: 1px solid var(--border-dim);
      padding: 4rem 0 2rem;
    }
    .footer-crest { text-align: center; margin-bottom: 3rem; }
    .footer-logo img {
      height: 72px;
      width: auto;
      margin: 0 auto;
      filter: drop-shadow(0 0 18px rgba(201,145,58,.4));
    }
    .footer-tagline { font-style: italic; font-size: .9rem; color: var(--text-dim); margin-top: .35rem; }

    .footer-grid {
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem;
      padding: 2.5rem 0;
      border-top: 1px solid var(--border-dim);
      border-bottom: 1px solid var(--border-dim);
      margin-bottom: 2rem;
    }
    @media(max-width:768px){
      .footer-grid { grid-template-columns:1fr 1fr; }
      .footer-brand { grid-column:1/-1; }
    }

    .footer-brand p { font-style: italic; color: var(--text-dim); font-size: .86rem; margin-bottom: 1.25rem; }
    .footer-social { display: flex; gap: .6rem; }
    .soc {
      width: 34px; height: 34px; border: 1px solid var(--border-dim);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-dim); transition: all .2s;
    }
    .soc:hover { border-color: var(--gold-dim); color: var(--gold); background: var(--gold-glow); }

    .footer-col-heading {
      font-family: 'Cinzel', serif; font-size: .62rem;
      letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem;
    }
    .footer-col ul { list-style: none; }
    .footer-col li { margin-bottom: .55rem; }
    .footer-col a { font-style: italic; font-size: .88rem; color: var(--text-dim); transition: color .2s; }
    .footer-col a:hover { color: var(--text); }

    .footer-bottom {
      display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    }
    .footer-bottom p { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: .1em; color: var(--text-dim); }

    /* ─── SCROLL REVEAL ──────────────────────────────────────── */
    .rise { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
    .rise.on { opacity:1; transform:none; }
    .d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}

    /* ═══════════════════════════════════════════════════════════
       MOBILE — HAMBURGER NAV
    ═══════════════════════════════════════════════════════════ */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      cursor: pointer;
      width: 44px; height: 44px;
      background: rgba(201,145,58,.08);
      border: 1px solid var(--border-dim);
      border-radius: 3px;
      z-index: 1001;
      transition: background .2s, border-color .2s;
      flex-shrink: 0;
    }
    .nav-hamburger:hover,
    .nav-hamburger:active { background: rgba(201,145,58,.18); border-color: var(--gold-dim); }
    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--gold);
      border-radius: 1px;
      transition: transform .32s var(--ease), opacity .22s, width .22s;
      transform-origin: center;
    }
    .nav-hamburger.open { background: rgba(201,145,58,.14); border-color: var(--gold-dim); }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav-close {
      display: none;
    }

    /* ═══════════════════════════════════════════════════════════
       RESPONSIVE — TABLET/MOBILE  (≤ 768px)
    ═══════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      .container { padding: 0 1.25rem; }

      /* ── NAV ── */
      .nav { padding: 0 1.25rem; }
      .nav-hamburger { display: flex; }

      .nav-links {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        height: auto;
        background: rgba(8,6,2,.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2.2rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s var(--ease), transform .3s var(--ease);
        transform: translateY(-8px);
        z-index: 9999;
      }
      .nav-links.open {
        display: flex;
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
      }
      .nav-close {
        display: flex;
        position: absolute; top: 1.2rem; right: 1.2rem;
        width: 44px; height: 44px;
        align-items: center; justify-content: center;
        background: rgba(255,255,255,.08);
        border: 1.5px solid rgba(255,255,255,.25);
        border-radius: 50%;
        color: #fff;
        font-size: 1.1rem;
        cursor: pointer;
        transition: background .2s, border-color .2s;
        z-index: 10000;
      }
      .nav-close:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); }

      .nav-links li { list-style: none; text-align: center; }
      .nav-links a {
        font-size: 1rem !important;
        letter-spacing: .22em;
        color: var(--text-muted) !important;
        padding: .5rem 1rem;
        display: block;
        transition: color .2s, text-shadow .2s;
      }
      .nav-links a:hover,
      .nav-links a:active { color: var(--gold) !important; text-shadow: 0 0 12px var(--gold-glow); }
      .nav-cta {
        font-size: .8rem !important;
        padding: .75rem 2.2rem !important;
        margin-top: .5rem;
        color: #fff !important;
        background: var(--crimson) !important;
        border: none !important;
      }
      .nav-cta:hover { background: var(--crimson-lt) !important; }

      /* ── HERO ── */
      .hero-content {
        padding: 0 1.5rem !important;
        max-width: 100%;
      }
      .hero-actions {
        flex-direction: column;
        align-items: flex-start;
      }
      .hero-actions .btn { width: 100%; justify-content: center; }

      /* ── HERALD ── */
      .herald p {
        font-size: .62rem;
        letter-spacing: .12em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 1rem;
      }
      .herald::before, .herald::after { display: none; }

      /* ── SERVICES ── */
      .services { padding: 4rem 0; }
      .svc-cta {
        opacity: 1 !important;
        transform: none !important;
      }
      .svc-card img { aspect-ratio: 16/9; }

      /* ── ABOUT ── */
      .about { padding: 4rem 0; }
      .about-images {
        padding: 0 0 50% 0 !important;
      }
      .about-img-accent { display: none; }
      .about-images { padding: 0 !important; }

      /* ── STATS ── */
      .stats { padding: 2.5rem 0; }

      /* ── PRICING ── */
      .pricing { padding: 4rem 0; }

      /* ── FINDER / PARCHMENT SCROLL ── */
      .finder { padding: 4rem 0; }
      .scroll {
        padding: 2.5rem 1.5rem 2.75rem !important;
        margin: 0 .25rem;
      }
      .scroll::before, .scroll::after {
        left: -6px; right: -6px;
      }

      /* ── D&D BANNER ── */
      .dnd { padding: 5rem 0; }
      .dnd-frame {
        padding: 2.5rem 1.5rem;
      }

      /* ── REVIEWS ── */
      .reviews { padding: 4rem 0; }
      .reviews-score { gap: .6rem; }
      .reviews-divider { display: none;

        grid-template-rows: auto auto;
        gap: .75rem 1rem;
        padding: 1.2rem 1rem;
      }
      .event-img {
        width: 60px; height: 60px;
        grid-row: 1 / 3;
        border-radius: 2px;
      }
      .e-date {
        display: flex;
        align-items: baseline;
        gap: .4rem;
        text-align: left;
      }
      .e-day { font-size: 1.25rem; }
      .e-badge {
        grid-column: 2;
        justify-self: end;
        align-self: end;
        margin-top: .25rem;
      }

      /* ── FOOTER ── */
      .footer { padding: 3rem 0 1.5rem; }
      .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: .4rem;
      }

      /* ── SECTIONS GENERAL ── */
      .sec-head { margin-bottom: 2.5rem; }
      .sec-head h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); }
    }

    /* ═══════════════════════════════════════════════════════════
       RESPONSIVE — SMALL MOBILE  (≤ 480px)
    ═══════════════════════════════════════════════════════════ */
    @media (max-width: 480px) {

      .hero h1 { font-size: clamp(2.6rem, 12vw, 3.5rem); }

      .scroll-fields { grid-template-columns: 1fr !important; }

      .event-row {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
      }
      .event-img { display: none; }
      .e-date { flex-direction: row; align-items: baseline; gap: .4rem; }
      .e-badge { grid-column: 1; justify-self: start; margin-top: .5rem; }

      .dnd-frame { padding: 2rem 1.25rem; }
      .c { display: none; }
    }