:root{
    --gold:#C8102E; --gold-dk:#9E0B22; --gold-hover:#DE1F3B; --ink:#0d0d0d; --ink-2:#1a1a1a;
    --muted:#5c5c5c; --line:#e6e6e6; --bg:#ffffff; --bg-2:#f5f5f5; --card:#ffffff;
    --text:#0d0d0d; --shadow:0 6px 24px rgba(0,0,0,.08); --shadow-lg:0 20px 50px rgba(0,0,0,.16);
  }
  @media (prefers-color-scheme: dark){
    :root{ --ink:#000000; --ink-2:#141414; --bg:#0a0a0a; --bg-2:#141414; --card:#141414;
      --text:#f2f2f2; --muted:#a3a3a3; --line:#26262600; --shadow:0 6px 24px rgba(0,0,0,.5); --shadow-lg:0 20px 50px rgba(0,0,0,.6); }
  }
  :root[data-theme="dark"]{ --ink:#000000; --ink-2:#141414; --bg:#0a0a0a; --bg-2:#141414; --card:#141414; --text:#f2f2f2; --muted:#a3a3a3; --shadow:0 6px 24px rgba(0,0,0,.5); --shadow-lg:0 20px 50px rgba(0,0,0,.6); }
  :root[data-theme="light"]{ --bg:#ffffff; --bg-2:#f5f5f5; --card:#ffffff; --text:#0d0d0d; --muted:#5c5c5c; }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; background:var(--bg); color:var(--text);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.6; }
  h1, h2, .serif{ font-family:'Playfair Display', Georgia, serif; }
  a{ color:inherit; }
  .wrap{ max-width:1120px; margin:0 auto; padding:0 20px; }
  .icn{ display:inline-flex; align-items:center; justify-content:center; flex:none; vertical-align:middle; }
  .icn svg{ display:block; }
  img,svg{ max-width:100%; }

  /* ---------- header ---------- */
  header.site{ position:sticky; top:0; z-index:50; background:#ffffff; color:var(--ink);
    border-bottom:3px solid var(--gold); box-shadow:0 2px 12px rgba(0,0,0,.06); }
  .navbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; max-width:1120px; margin:0 auto; }
  .brand{ font-size:22px; font-weight:800; letter-spacing:.5px; color:var(--ink); text-decoration:none; white-space:nowrap; }
  .brand span{ color:var(--gold); }
  .brand-logo{ display:block; height:44px; width:auto; }
  @media (max-width:480px){ .brand-logo{ height:38px; } }
  .nav-links{ display:flex; gap:20px; align-items:center; font-size:14px; font-weight:600; }
  .nav-links a{ color:var(--ink); text-decoration:none; opacity:.85; }
  .nav-links a:hover{ opacity:1; color:var(--gold); }
  .nav-links a.active{ opacity:1; color:var(--gold); }
  .nav-cta{ background:var(--gold); color:#ffffff !important; padding:9px 16px; border-radius:8px; font-weight:700; }
  .nav-links a.nav-cta:hover{ background:var(--gold-hover); color:#ffffff; }
  .burger{ display:none; background:none; border:0; color:var(--ink); font-size:26px; cursor:pointer; }
  @media (max-width:860px){
    .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; background:#ffffff;
      flex-direction:column; gap:0; padding:8px 0 14px; border-top:1px solid var(--line); border-bottom:3px solid var(--gold); }
    .nav-links.open{ display:flex; }
    .nav-links a{ padding:12px 22px; width:100%; }
    .nav-links a.nav-cta{ margin:8px 22px 0; text-align:center; }
    .burger{ display:block; }
  }

  /* ---------- hero (photo-led, two column) ---------- */
  .hero{ position:relative; color:#fff; overflow:hidden; min-height:600px; display:flex; align-items:center; }
  .hero .hero-bg{ position:absolute; inset:0; z-index:0; }
  .hero .hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
  .hero .hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(100deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.68) 42%, rgba(0,0,0,.32) 72%, rgba(0,0,0,.18) 100%); }
  .hero .wrap{ position:relative; z-index:2; padding:100px 20px; }
  @media (max-width:860px){ .hero .wrap{ padding:64px 20px; } }
  @media (max-width:480px){ .hero .wrap{ padding:48px 16px; } }
  .hero-content{ max-width:640px; }
  .hero .eyebrow{ color:#fff; font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:14px; }
  .hero h1{ font-size:clamp(32px,4.6vw,52px); line-height:1.18; margin:16px 0 8px; font-weight:700; }
  .hero h1 em{ color:var(--gold); font-style:italic; font-weight:400; }
  .hero .divider{ width:60px; height:3px; background:var(--gold); margin:18px 0 20px; border-radius:2px; }
  .hero p.lead{ font-size:clamp(16px,2.2vw,19px); color:#e2e2e2; max-width:560px; margin:0 0 10px; }
  .hero p.hero-sub{ font-size:15px; font-weight:700; letter-spacing:.3px; color:#fff; max-width:560px; margin:0 0 28px; }
  .hero p.hero-sub::before{ content:'•'; color:var(--gold); margin-right:8px; }
  @media (max-width:860px){ .hero{ min-height:auto; text-align:center; } .hero-content{ max-width:100%; } .hero .divider{ margin:18px auto 20px; } .hero p.lead{ margin:0 auto 10px; } .hero p.hero-sub{ margin:0 auto 28px; } }
  .btns{ display:flex; gap:14px; flex-wrap:wrap; }
  @media (max-width:860px){ .btns{ justify-content:center; } }
  .btn{ display:inline-block; padding:14px 26px; border-radius:10px; font-weight:700; font-size:16px; text-decoration:none; cursor:pointer; border:2px solid transparent; transition:transform .06s ease, background .15s ease; }
  .btn:active{ transform:translateY(1px); }
  .btn-gold{ background:var(--gold); color:#ffffff; }
  .btn-gold:hover{ background:var(--gold-hover); }
  .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
  .hero .rating{ margin-top:42px; display:flex; align-items:center; gap:10px; }
  @media (max-width:860px){ .hero .rating{ justify-content:center; } }
  .hero .rating .stars{ display:inline-flex; gap:3px; color:#FFC107; }
  .hero .rating .stars .icn{ width:20px; height:20px; }
  .hero .rating .txt{ font-size:15px; font-weight:700; color:#fff; }
  .hero .badges{ margin-top:22px; display:flex; gap:14px 26px; flex-wrap:wrap; font-size:17px; font-weight:600; color:#f0f0f0; }
  @media (max-width:860px){ .hero .badges{ justify-content:center; } }
  .hero .badges span{ display:inline-flex; align-items:center; gap:9px; }
  .hero .badges .icn{ width:22px; height:22px; color:var(--gold); flex:none; }

  .hero-art{ position:relative; display:flex; justify-content:center; }
  .hero-art .photo-card{ border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); width:100%; max-width:380px; transform:rotate(-1.5deg); border:6px solid #fff; }
  .hero-art .photo-card img{ display:block; width:100%; height:320px; object-fit:cover; }
  .hero-art .seal{ position:absolute; bottom:-14px; right:6%; width:96px; height:96px; border-radius:50%; background:var(--gold);
    display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); transform:rotate(8deg); }
  @media (max-width:860px){ .hero-art{ margin-top:8px; } .hero-art .seal{ right:14%; } }
  .seal svg{ width:52px; height:52px; }

  /* ---------- stat block (3 stacked cards, left accent) ---------- */
  .stats-wrap{ background:var(--ink); padding:56px 0; }
  .stats{ display:flex; flex-direction:column; gap:16px; max-width:760px; margin:0 auto; }
  .stat{ background:var(--ink-2); border-left:4px solid var(--gold); border-radius:10px; padding:22px 28px;
    display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
  .stat .num{ font-size:clamp(30px,4vw,40px); font-weight:800; color:var(--gold); white-space:nowrap; }
  .stat .lbl{ font-size:17px; font-weight:600; color:#f2f2f2; }

  /* ---------- photo sections ---------- */
  .split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
  @media (max-width:820px){ .split{ grid-template-columns:1fr; } }
  .img-card{ border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); }
  .img-card img{ display:block; width:100%; height:100%; min-height:280px; object-fit:cover; }
  .banner-photo{ border-radius:18px; overflow:hidden; box-shadow:var(--shadow-lg); margin-bottom:40px; }
  .banner-photo img{ display:block; width:100%; max-height:320px; object-fit:cover; }
  .spotlight{ display:grid; grid-template-columns:1fr 1.1fr; gap:0; align-items:stretch; background:var(--card); border:1px solid var(--line);
    border-radius:18px; box-shadow:var(--shadow); overflow:hidden; margin-bottom:32px; }
  @media (max-width:820px){ .spotlight{ grid-template-columns:1fr; } }
  .spotlight .ph{ min-height:220px; }
  .spotlight .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
  .spotlight .cp{ padding:30px 32px; }
  .spotlight .cp h3{ margin:0 0 10px; font-size:22px; }
  .spotlight .cp p{ margin:0 0 16px; color:var(--muted); font-size:15px; }

  /* ---------- sections ---------- */
  section{ padding:64px 0; }
  section.alt{ background:var(--bg-2); }
  .sec-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
  .sec-head .eyebrow{ color:var(--gold-dk); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-size:13px; }
  .sec-head h2{ font-size:clamp(24px,3.4vw,34px); margin:10px 0 12px; font-weight:800; }
  .sec-head p{ color:var(--muted); font-size:17px; margin:0; }

  /* ---------- three steps ---------- */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  @media (max-width:760px){ .steps{ grid-template-columns:1fr; } }
  .step{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px 24px; box-shadow:var(--shadow); position:relative; }
  .step .num{ width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--gold); font-weight:800; font-size:17px;
    display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
  .step h3{ margin:0 0 8px; font-size:18px; }
  .step p{ margin:0; color:var(--muted); font-size:15px; }

  .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
  .card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 24px; box-shadow:none; }
  .card h3{ margin:0 0 8px; font-size:18px; display:flex; align-items:center; gap:9px; font-weight:700; }
  .card .ic{ width:22px; height:22px; flex:none; color:var(--gold-dk); display:inline-flex; }
  .card .ic svg{ display:block; }
  .card p{ margin:0; color:var(--muted); font-size:15px; }

  .feature-list{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px 28px; list-style:none; padding:0; margin:0; }
  .feature-list li{ display:flex; gap:10px; align-items:flex-start; font-size:16px; }

  .id-wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; }
  @media (max-width:820px){ .id-wrap{ grid-template-columns:1fr; } }
  .id-list{ list-style:none; padding:0; margin:0; columns:2; }
  @media (max-width:480px){ .id-list{ columns:1; } }
  .id-list li{ padding:7px 0; font-size:15px; break-inside:avoid; }
  .id-list li::before{ content:"★"; color:var(--gold); margin-right:9px; }
  .note-soft{ font-size:13px; color:var(--muted); margin-top:16px; font-style:italic; }

  /* ---------- dark callout (esign / gift cards) ---------- */
  .callout{ background:linear-gradient(160deg,var(--ink) 0%,var(--ink-2) 100%); color:#fff; border-radius:18px; padding:44px; text-align:center; }
  .callout h2{ font-size:clamp(24px,3.4vw,32px); margin:0 0 10px; }
  .callout p{ color:#d4d4d4; max-width:640px; margin:0 auto 26px; font-size:17px; }

  /* ---------- FAQ ---------- */
  .faq-item{ border-bottom:1px solid var(--line); padding:22px 0; }
  .faq-item:last-child{ border-bottom:none; }
  .faq-item h3{ margin:0 0 8px; font-size:18px; }
  .faq-item p{ margin:0; color:var(--muted); font-size:15px; }

  /* ---------- contact ---------- */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
  @media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-info p{ margin:0 0 16px; font-size:16px; }
  .contact-info .big{ font-size:26px; font-weight:800; }
  .contact-info a{ color:var(--gold-dk); text-decoration:none; font-weight:700; }
  form.contact label{ display:block; font-size:13px; font-weight:700; margin:14px 0 5px; }
  form.contact input, form.contact textarea{ width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:9px; font-size:15px; background:var(--card); color:var(--text); font-family:inherit; }
  form.contact textarea{ min-height:120px; resize:vertical; }
  form.contact button{ margin-top:18px; }

  /* ---------- footer ---------- */
  footer.site{ background:var(--ink); color:#d4d4d4; padding:40px 0 30px; font-size:14px; }
  footer.site .cols{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
  footer.site .brand{ font-size:20px; }
  footer.site a{ color:#d4d4d4; text-decoration:none; }
  footer.site a:hover{ color:var(--gold); }
  .socials{ display:flex; gap:16px; margin-top:12px; font-size:14px; font-weight:600; }
  .legal{ border-top:1px solid rgba(255,255,255,.1); margin-top:28px; padding-top:18px; font-size:12px; color:#a3a3a3; text-align:center; }

  /* ---------- cookie consent ---------- */
  .cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:200; background:var(--ink); border-top:3px solid var(--gold); box-shadow:0 -6px 24px rgba(0,0,0,.3); padding:16px 20px; display:none; }
  .cookie-banner.show{ display:block; }
  .cookie-banner .cc-wrap{ max-width:1120px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .cookie-banner p{ margin:0; font-size:14px; max-width:640px; color:#d4d4d4; }
  .cookie-banner .cc-btns{ display:flex; gap:10px; flex:none; }
  .cookie-banner button{ border:none; border-radius:8px; padding:10px 18px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit; }
  .cookie-banner .cc-accept{ background:var(--gold); color:#fff; }
  .cookie-banner .cc-accept:hover{ background:var(--gold-hover); }
  .cookie-banner .cc-decline{ background:transparent; color:#d4d4d4; border:1px solid rgba(255,255,255,.25); }
  .cookie-banner .cc-decline:hover{ border-color:rgba(255,255,255,.5); color:#fff; }