/* ================================================================
   GoldenKey HOME v2 — "Golden Editorial"  (GK.01.036)
   A complete structural redesign of the homepage.
   Luxury-editorial minimal: parchment canvas, Marcellus display
   serif, Emirati arch motifs, hairline gold rules, oversized
   numerals, generous whitespace. Scoped: every class = .h2x-*
   ================================================================ */
:root{
  --h2x-cream:#f7f4ec; --h2x-cream2:#efeadd; --h2x-ink:#171f2e; --h2x-ink2:#4c5568;
  --h2x-gold:#b18a1e; --h2x-gold2:#d4af37; --h2x-gold3:#f3dc8f;
  --h2x-navy:#0e2140; --h2x-navy2:#132a4e;
  --h2x-serif:'Marcellus',Georgia,serif;
  --h2x-sans:'Albert Sans','Segoe UI',system-ui,sans-serif;
  --h2x-rule:1px solid rgba(177,138,30,.35);
}
.h2x{font-family:var(--h2x-sans);color:var(--h2x-ink);background:var(--h2x-cream);overflow:hidden;position:relative}
.h2x *{box-sizing:border-box}
.h2x ::selection{background:var(--h2x-gold3)}
/* parchment grain */
.h2x::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:0;
  background-image:radial-gradient(rgba(23,31,46,.045) 1px,transparent 1px);background-size:22px 22px}
.h2x>*{position:relative;z-index:1}
.h2x-wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.h2x-serif{font-family:var(--h2x-serif);font-weight:400}
.h2x em{font-style:italic;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;color:var(--h2x-gold)}

/* ---------------- entrance animation ---------------- */
@keyframes h2xUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.h2x-a{animation:h2xUp .8s cubic-bezier(.22,.8,.28,1) both}
.h2x-a2{animation-delay:.12s}.h2x-a3{animation-delay:.24s}.h2x-a4{animation-delay:.36s}.h2x-a5{animation-delay:.48s}
@media(prefers-reduced-motion:reduce){.h2x-a{animation:none}.h2x-mq-track{animation:none!important}}

/* ================= HERO — split editorial ================= */
.h2x-hero{padding:64px 0 90px}
.h2x-hero .h2x-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.h2x-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.74rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--h2x-gold);font-weight:600;margin-bottom:26px}
.h2x-eyebrow::before{content:"";width:44px;height:1px;background:var(--h2x-gold)}
.h2x-hero h1{font-family:var(--h2x-serif);font-size:clamp(2.6rem,5.3vw,4.4rem);line-height:1.04;
  letter-spacing:-.01em;margin:0 0 24px;color:var(--h2x-ink)}
.h2x-hero h1 em{font-size:1.02em}
.h2x-hero .h2x-sub{font-size:1.06rem;line-height:1.75;color:var(--h2x-ink2);max-width:52ch;margin:0 0 14px}
.h2x-hero .h2x-sub b{color:var(--h2x-ink)}
.h2x-price-line{display:flex;align-items:baseline;gap:14px;margin:22px 0 30px;border-top:var(--h2x-rule);
  border-bottom:var(--h2x-rule);padding:16px 2px}
.h2x-price-line .from{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--h2x-ink2)}
.h2x-price-line .amt{font-family:var(--h2x-serif);font-size:2.1rem;color:var(--h2x-gold);line-height:1}
.h2x-price-line .per{font-size:.85rem;color:var(--h2x-ink2)}
.h2x-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.h2x-btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:2px;
  font-weight:600;font-size:.95rem;text-decoration:none;letter-spacing:.02em;transition:.3s ease;border:1.4px solid transparent}
.h2x-btn.gold{background:var(--h2x-navy);color:#fff;box-shadow:6px 6px 0 var(--h2x-gold2)}
.h2x-btn.gold:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--h2x-gold2)}
.h2x-btn.line{border-color:rgba(23,31,46,.25);color:var(--h2x-ink);background:transparent}
.h2x-btn.line:hover{border-color:var(--h2x-gold);color:var(--h2x-gold)}
.h2x-trust{display:flex;gap:26px;flex-wrap:wrap;font-size:.85rem;color:var(--h2x-ink2)}
.h2x-trust b{display:block;font-family:var(--h2x-serif);font-size:1.25rem;color:var(--h2x-ink)}
.h2x-trust .st{color:var(--h2x-gold2);letter-spacing:2px}

/* hero right: arched photo + overlapping form */
.h2x-hero-vis{position:relative;padding-bottom:36px}
.h2x-arch{position:relative;border-radius:999px 999px 26px 26px;overflow:hidden;
  border:1px solid rgba(177,138,30,.4);box-shadow:0 40px 80px -40px rgba(14,33,64,.5)}
.h2x-arch::after{content:"";position:absolute;inset:10px;border:1px solid rgba(247,244,236,.55);
  border-radius:989px 989px 18px 18px;pointer-events:none}
.h2x-arch img{display:block;width:100%;height:520px;object-fit:cover;object-position:60% 30%}
.h2x-arch .cap{position:absolute;left:0;right:0;bottom:0;padding:60px 24px 18px;color:#f2ead2;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(180deg,transparent,rgba(10,18,34,.85));text-align:center}
.h2x-form-float{position:relative;margin:-70px 8% 0;background:#fffdf7;border:1px solid rgba(177,138,30,.45);
  border-radius:4px;box-shadow:0 30px 60px -30px rgba(14,33,64,.45),0 0 0 6px rgba(247,244,236,.8);padding:26px 26px 22px}
.h2x-form-float h3{font-family:var(--h2x-serif);font-size:1.3rem;margin:0 0 4px}
.h2x-form-float .fh{font-size:.82rem;color:var(--h2x-ink2);margin:0 0 16px}
.h2x-form-float .f-group{margin-bottom:12px}
.h2x-form-float label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--h2x-ink2);font-weight:600}
.h2x-form-float .hq-field{margin-top:5px}
.h2x-form-float input,.h2x-form-float textarea{width:100%;font:inherit;padding:11px 12px 11px 38px;
  border:1px solid rgba(23,31,46,.18)!important;border-radius:3px!important;background:#fff!important;box-shadow:none!important}
.h2x-form-float textarea{padding-left:12px}
.h2x-form-float input:focus,.h2x-form-float textarea:focus{border-color:var(--h2x-gold)!important;
  box-shadow:0 0 0 3px rgba(212,175,55,.18)!important;outline:none}
.h2x-form-float .hq-field{position:relative}
.h2x-form-float .fi{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:17px;color:var(--h2x-gold)}
.h2x-form-float .fi svg{stroke:currentColor}
.h2x-form-float .err{display:none;color:#a02020;font-size:.75rem;margin-top:3px}
.h2x-form-float .btn.btn-gold{width:100%;justify-content:center;border-radius:3px!important;
  background:var(--h2x-navy)!important;color:#fff!important;box-shadow:4px 4px 0 var(--h2x-gold2)!important;
  padding:14px!important;font-weight:600;letter-spacing:.04em}
.h2x-form-float .btn.btn-gold:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--h2x-gold2)!important}
.h2x-form-float .fnote{font-size:.72rem;color:var(--h2x-ink2);text-align:center;margin:10px 0 0}

/* ================= STATS — oversized numerals on a rule ================= */
.h2x-stats{border-top:var(--h2x-rule);border-bottom:var(--h2x-rule);background:var(--h2x-cream2)}
.h2x-stats .h2x-wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.h2x-stat{padding:34px 20px;text-align:center;border-left:var(--h2x-rule)}
.h2x-stat:first-child{border-left:none}
.h2x-stat b{display:block;font-family:var(--h2x-serif);font-size:clamp(2rem,3.4vw,3rem);color:var(--h2x-ink);line-height:1}
.h2x-stat span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--h2x-ink2)}
.h2x-stat b i{font-style:normal;color:var(--h2x-gold)}

/* ================= section headers ================= */
.h2x-sec{padding:96px 0 0}
.h2x-sechead{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:end;margin-bottom:46px}
.h2x-sechead .no{font-family:var(--h2x-serif);font-size:.95rem;color:var(--h2x-gold);letter-spacing:.2em}
.h2x-sechead h2{font-family:var(--h2x-serif);font-size:clamp(1.9rem,3.4vw,2.8rem);margin:0;line-height:1.1}
.h2x-sechead .ln{height:1px;background:rgba(177,138,30,.35);margin-bottom:12px}
.h2x-sechead a{font-size:.85rem;color:var(--h2x-gold);text-decoration:none;letter-spacing:.06em;white-space:nowrap}
.h2x-sechead a:hover{text-decoration:underline}

/* ================= SERVICES — asymmetric bento ================= */
.h2x-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px}
.h2x-tile{position:relative;background:#fffdf7;border:1px solid rgba(177,138,30,.3);border-radius:6px;
  padding:26px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:var(--h2x-ink);
  overflow:hidden;transition:.35s ease}
.h2x-tile:hover{border-color:var(--h2x-gold);box-shadow:0 24px 44px -26px rgba(14,33,64,.4);transform:translateY(-4px)}
.h2x-tile .tno{position:absolute;top:18px;right:20px;font-family:var(--h2x-serif);font-size:1rem;color:rgba(177,138,30,.55)}
.h2x-tile h3{font-family:var(--h2x-serif);font-size:1.35rem;margin:0 0 6px}
.h2x-tile p{margin:0;font-size:.86rem;color:var(--h2x-ink2);line-height:1.55}
.h2x-tile .go{margin-top:12px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--h2x-gold);font-weight:600}
.h2x-tile.big{grid-column:span 2;grid-row:span 2;background:linear-gradient(160deg,var(--h2x-navy),var(--h2x-navy2));
  color:#eef2fa;border-color:rgba(212,175,55,.4)}
.h2x-tile.big h3{font-size:2rem;color:#fff}
.h2x-tile.big p{color:#b9c5da;max-width:38ch}
.h2x-tile.big .price{font-family:var(--h2x-serif);font-size:1.6rem;color:var(--h2x-gold3);margin-top:10px}
.h2x-tile.big::before{content:"";position:absolute;top:-70px;right:-70px;width:260px;height:260px;border-radius:50%;
  border:1px solid rgba(212,175,55,.35)}
.h2x-tile.big::after{content:"";position:absolute;top:-30px;right:-30px;width:180px;height:180px;border-radius:50%;
  border:1px dashed rgba(212,175,55,.3)}
.h2x-tile.gold{background:linear-gradient(150deg,#caa22a,#e3c258);border:none;color:#241c05}
.h2x-tile.gold h3{color:#241c05}.h2x-tile.gold p{color:#4d3f10}.h2x-tile.gold .go{color:#241c05}

/* ================= PROCESS — horizontal ledger ================= */
.h2x-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:var(--h2x-rule);border-radius:6px;
  overflow:hidden;background:#fffdf7}
.h2x-step{padding:34px 26px 30px;border-left:var(--h2x-rule);position:relative}
.h2x-step:first-child{border-left:none}
.h2x-step .n{font-family:var(--h2x-serif);font-size:3rem;color:rgba(177,138,30,.35);line-height:1}
.h2x-step h3{font-family:var(--h2x-serif);font-size:1.15rem;margin:14px 0 8px}
.h2x-step p{margin:0;font-size:.85rem;color:var(--h2x-ink2);line-height:1.6}
.h2x-step::after{content:"→";position:absolute;right:-11px;top:42px;z-index:2;color:var(--h2x-gold);
  background:var(--h2x-cream);border:var(--h2x-rule);border-radius:50%;width:24px;height:24px;
  display:grid;place-items:center;font-size:.8rem}
.h2x-step:last-child::after{content:none}

/* ================= PRICING — dark band ================= */
.h2x-dark{margin-top:96px;background:linear-gradient(165deg,#0c1c33,var(--h2x-navy) 55%,#10254a);color:#e8edf6;padding:90px 0}
.h2x-dark .h2x-sechead h2{color:#fff}
.h2x-dark .h2x-sechead .no{color:var(--h2x-gold3)}
.h2x-dark .h2x-sechead .ln{background:rgba(212,175,55,.3)}
.h2x-dark .h2x-sechead a{color:var(--h2x-gold3)}
.h2x-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.h2x-plan{border:1px solid rgba(212,175,55,.3);border-radius:999px 999px 8px 8px;padding:44px 28px 30px;
  text-align:center;background:rgba(255,255,255,.03);transition:.35s ease;text-decoration:none;color:#e8edf6;display:block}
.h2x-plan:hover{background:rgba(212,175,55,.08);transform:translateY(-6px);border-color:var(--h2x-gold2)}
.h2x-plan .z{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:#9fb0ca}
.h2x-plan h3{font-family:var(--h2x-serif);font-size:1.5rem;margin:8px 0 16px;color:#fff}
.h2x-plan .pr{font-family:var(--h2x-serif);font-size:2.4rem;color:var(--h2x-gold3);line-height:1}
.h2x-plan .pr small{font-size:.9rem;color:#9fb0ca}
.h2x-plan ul{list-style:none;margin:20px 0 22px;padding:0;font-size:.86rem;color:#b9c5da;line-height:2}
.h2x-plan .pb{display:inline-block;border:1px solid rgba(212,175,55,.55);color:var(--h2x-gold3);border-radius:2px;
  padding:11px 26px;font-size:.85rem;letter-spacing:.08em}
.h2x-plan.feat{background:linear-gradient(170deg,rgba(212,175,55,.16),rgba(212,175,55,.05));border-color:var(--h2x-gold2)}
.h2x-plan.feat .tag{position:relative;top:-14px;font-size:.66rem;letter-spacing:.2em;background:var(--h2x-gold2);
  color:#241c05;border-radius:100px;padding:5px 14px;font-weight:700}

/* ================= MARQUEE ================= */
.h2x-mq{border-top:var(--h2x-rule);border-bottom:var(--h2x-rule);overflow:hidden;padding:20px 0;background:var(--h2x-cream2)}
.h2x-mq-track{display:flex;gap:56px;width:max-content;animation:h2xMq 36s linear infinite;white-space:nowrap}
.h2x-mq a{font-family:var(--h2x-serif);font-size:1.15rem;color:var(--h2x-ink2);text-decoration:none;display:flex;gap:56px;align-items:center}
.h2x-mq a:hover{color:var(--h2x-gold)}
.h2x-mq i{font-style:normal;color:var(--h2x-gold);font-size:.8rem}
@keyframes h2xMq{to{transform:translateX(-50%)}}

/* ================= TESTIMONIAL — editorial pull-quote ================= */
.h2x-quote{max-width:900px;margin:0 auto;text-align:center;padding:0 20px}
.h2x-quote .mark{font-family:var(--h2x-serif);font-size:5rem;line-height:.4;color:var(--h2x-gold2);display:block;margin-bottom:26px}
.h2x-quote blockquote{font-family:var(--h2x-serif);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.45;color:var(--h2x-ink);margin:0 0 26px}
.h2x-quote .who{font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;color:var(--h2x-ink2)}
.h2x-quote .st{color:var(--h2x-gold2);letter-spacing:4px;font-size:1rem;margin-top:8px}

/* ================= FAQ — hairline ledger ================= */
.h2x-faq{max-width:860px;margin:0 auto}
.h2x-faq details{border-bottom:var(--h2x-rule)}
.h2x-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;
  padding:24px 4px;font-family:var(--h2x-serif);font-size:1.15rem}
.h2x-faq summary::-webkit-details-marker{display:none}
.h2x-faq summary::after{content:"+";font-family:var(--h2x-serif);color:var(--h2x-gold);font-size:1.4rem;transition:.3s}
.h2x-faq details[open] summary::after{transform:rotate(45deg)}
.h2x-faq p{margin:0;padding:0 4px 24px;color:var(--h2x-ink2);line-height:1.75;font-size:.94rem;max-width:64ch}

/* ================= FINAL CTA — arch gate ================= */
.h2x-final{padding:100px 0 110px;text-align:center}
.h2x-final .gate{max-width:760px;margin:0 auto;border:1px solid rgba(177,138,30,.45);
  border-radius:999px 999px 10px 10px;padding:76px 40px 56px;position:relative;background:#fffdf7}
.h2x-final .gate::before{content:"";position:absolute;inset:12px;border:1px dashed rgba(177,138,30,.35);
  border-radius:987px 987px 6px 6px;pointer-events:none}
.h2x-final .k{width:52px;margin:0 auto 22px;display:block}
.h2x-final h2{font-family:var(--h2x-serif);font-size:clamp(2rem,4vw,3rem);margin:0 0 14px}
.h2x-final p{color:var(--h2x-ink2);margin:0 0 30px;font-size:1rem}
.h2x-final .led{margin-top:30px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--h2x-ink2)}

/* ================= responsive ================= */
@media(max-width:1024px){
  .h2x-hero .h2x-wrap{grid-template-columns:1fr;gap:44px}
  .h2x-arch img{height:440px}
  .h2x-bento{grid-template-columns:1fr 1fr}
  .h2x-steps{grid-template-columns:1fr 1fr}
  .h2x-step::after{content:none}
  .h2x-plans{grid-template-columns:1fr}
}
@media(max-width:640px){
  .h2x-hero{padding:44px 0 70px}
  .h2x-stats .h2x-wrap{grid-template-columns:1fr 1fr}
  .h2x-stat{border-left:none;border-top:var(--h2x-rule)}
  .h2x-bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .h2x-tile{min-height:170px}
  .h2x-tile.big{grid-column:span 1;grid-row:span 1;min-height:260px}
  .h2x-steps{grid-template-columns:1fr}
  .h2x-step{border-left:none;border-top:var(--h2x-rule)}
  .h2x-form-float{margin:-50px 4% 0}
  .h2x-sechead{grid-template-columns:1fr;gap:8px}
  .h2x-sechead .ln{display:none}
}