/* Signature Host — Premium Landing (Light)
   Minimal, editorial, black + gold.
*/

:root{
  --bg: #fbfbfc;
  --paper: #ffffff;
  --ink: #0b0b0c;
  --muted: rgba(11,11,12,.66);
  --faint: rgba(11,11,12,.08);
  --faint2: rgba(11,11,12,.12);

  /* modern gold accent */
  --gold: #b18a4a;
  --gold2:#e5d3b3;
  --goldGlow: rgba(177,138,74,.22);

  --radius: 20px;
  --radius2: 26px;
  --shadow: 0 20px 70px rgba(10,10,12,.09);
  --shadow2: 0 12px 32px rgba(10,10,12,.07);

  --max: 1080px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 720px at 70% -10%, rgba(177,138,74,.12), transparent 60%),
    radial-gradient(900px 620px at 10% 95%, rgba(229,211,179,.20), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, #ffffff 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: no-preference){
  *{scroll-behavior:smooth}
}

a{color:inherit;text-decoration:none}

.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.main{padding:14px 18px 96px}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  padding:12px 0;
  background: transparent;
}

/* Full-width header pill (desktop) */
.headerInner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  width: 100%;
  min-height: 68px;
  border:1px solid rgba(11,11,12,.12);
  background: rgba(255,255,255,.62);
  border-radius: 999px;
  padding:12px 20px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
}

.logo{display:flex; align-items:center; gap:12px; padding:0 8px}
.sigMark{width:12px;height:12px;border-radius:999px;background:var(--gold);box-shadow:0 0 0 6px rgba(176,141,87,.14)}
.logoText{line-height:1.08}
.logoTop{font-size:13px; letter-spacing:.16em; text-transform:uppercase; color: rgba(11,11,12,.72); line-height:1.08}
.logoSub{display:block;font-size:11px;color:rgba(11,11,12,.58);margin-top:2px}

.nav{display:flex; gap:6px; flex-wrap:nowrap; justify-content:flex-end; align-items:center}

/* Desktop-only: give it a touch more breathing room */
@media (min-width: 861px){
  .header{padding:14px 0}
  .headerInner{padding:14px 22px; min-height:74px}
  .pill{padding:12px 16px; font-size:14px}
  .btn{padding:12px 18px; font-size:14px}
}

/* Mobile menu */
.menuBtn{
  display:none;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  border-radius:999px;
  border: 1px solid rgba(11,11,12,.12);
  background: rgba(255,255,255,.56);
  backdrop-filter: blur(12px);
}
.menuBtn:hover{border-color: rgba(177,138,74,.35)}
.menuBtn:active{transform: translateY(1px)}

.mobileMenu{
  /* IMPORTANT: keep it out of desktop layout entirely */
  display:none;
  border-radius: 20px;
  border:1px solid rgba(11,11,12,.10);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow2);
  overflow:hidden;

  opacity:0;
  transform: translateY(-6px) scale(.98);
  pointer-events:none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.mobileMenuInner{display:grid; gap:8px; padding:10px}
.mobileMenu a{justify-content:space-between}

.mobileMenu.isOpen{
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}

@media (max-width: 860px){
  /* prevent wrap/distortion: collapse desktop links into hamburger */
  .nav .pill, .nav .btn{display:none}
  .menuBtn{display:inline-flex}

  /* bigger, more elegant mobile nav bar */
  .header{padding:10px 0}
  .headerInner{position:relative;min-height:64px;padding:10px 14px}
  .logoTop{font-size:12px}
  .logoSub{display:block;font-size:10px}

  /* anchor dropdown to the header pill so it doesn't stretch/distort it */
  .mobileMenu{
    display:block;
    position:absolute;
    right:10px;
    top:calc(100% + 10px);
    width:min(420px, calc(100vw - 36px));
    z-index:1200;
  }

  /* mobile ux hardening */
  html,body{overflow-x:hidden;-webkit-text-size-adjust:100%}
  a,button,.btn,.pill,.menuBtn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .btn,.pill{min-height:44px}
  details>summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
  .card,.feature,.photo,.panel{overflow-wrap:anywhere}

  /* refined mobile rhythm */
  .main{padding-bottom:110px}
  .section{margin-top:14px}
  .pad{padding:16px}
  .p{line-height:1.74}
  .featureP{line-height:1.72}
  .grid,.postlist{gap:10px}
  .photo img,.heroMedia{border-radius:14px}
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(11,11,12,.12);
  background: rgba(255,255,255,.56);
  color: rgba(11,11,12,.90);
  font-size:13px;
  line-height: 1;
  backdrop-filter: blur(12px);
}
.pill:hover{border-color: rgba(176,141,87,.35)}
.pill:active{transform: translateY(1px)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(176,141,87,.55);
  background: linear-gradient(180deg, rgba(176,141,87,.18), rgba(176,141,87,.06));
  box-shadow: 0 10px 24px rgba(176,141,87,.10);
  font-weight:600;
  font-size:14px;
  line-height: 1;
}
.btn:hover{border-color: rgba(176,141,87,.70)}

/* Accessibility / motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* mobile quality-of-life */
:target{scroll-margin-top:92px}
img{height:auto}

/* Hero */
.hero{
  margin-top:10px;
  border-radius: var(--radius2);
  border:1px solid var(--faint);
  overflow:hidden;
  box-shadow: var(--shadow);
  background:
    radial-gradient(900px 420px at 12% 8%, var(--goldGlow), transparent 62%),
    radial-gradient(700px 360px at 80% 18%, rgba(11,11,12,.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.70));
  position: relative;
}

/* Subtle highlight ring */
.hero:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius2);
  pointer-events:none;
  background: linear-gradient(135deg, rgba(177,138,74,.22), rgba(255,255,255,0) 40%, rgba(11,11,12,.08));
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  padding:1px;
  box-sizing:border-box;
}
.heroInner{display:grid; grid-template-columns: 1.15fr .85fr; gap:0}
.heroCopy{padding:34px 34px 30px}
.eyebrow{font-size:12px; letter-spacing:.20em; text-transform:uppercase; color: rgba(176,141,87,.95)}
.h1{
  /* Modern display: clean, premium, not vintage */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 12px 0 0;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.02;
}
.lede{margin-top:14px; color: var(--muted); font-size:16px; line-height:1.8; max-width: 54ch}
.heroCtas{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.fine{margin-top:14px; color: rgba(11,11,12,.58); font-size:13px; line-height:1.65}
.fine a{ text-decoration: underline; text-underline-offset: 3px; }

.heroMedia{
  position:relative;
  border-left:1px solid var(--faint);
  background:
    radial-gradient(600px 360px at 20% 10%, rgba(177,138,74,.18), transparent 60%),
    linear-gradient(180deg, rgba(11,11,12,.08), rgba(11,11,12,.00)),
    url("https://images.unsplash.com/photo-1554995207-c18c203602cb?auto=format&fit=crop&w=2000&q=70") center/cover no-repeat;
  min-height: 460px;
}

/* Softer, less bright near the image + more gradient feel */
.heroMedia::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(520px 420px at 20% 20%, rgba(11,11,12,.12), transparent 60%),
    linear-gradient(90deg, rgba(255,255,255,.92), rgba(255,255,255,.24) 55%, rgba(255,255,255,0));
}

/* subtle glass highlight line */
.heroMedia::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%);
  opacity:.55;
  pointer-events:none;
}

.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(11,11,12,.10);
  background: rgba(255,255,255,.62);
  color: rgba(11,11,12,.76);
  font-size:13px;
  backdrop-filter: blur(14px);
}
.dot{width:6px;height:6px;border-radius:999px;background: rgba(177,138,74,.85); box-shadow: 0 0 0 6px rgba(177,138,74,.12)}

/* Sections */
.section{margin-top:18px}
.card{
  border:1px solid rgba(11,11,12,.10);
  background: rgba(255,255,255,.58);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(14px);
}
.pad{padding:22px}
.k{font-size:12px; letter-spacing:.20em; text-transform:uppercase; color: rgba(176,141,87,.95)}
.h2{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin:10px 0 0;
  font-size: 26px;
}
.p{margin:10px 0 0;color: var(--muted); line-height:1.8; font-size:15px}

.grid{display:grid; grid-template-columns: repeat(12,1fr); gap:12px; margin-top:14px}

.feature{grid-column: span 4; border-radius: 18px; border:1px solid rgba(11,11,12,.10); background: rgba(255,255,255,.64); padding:16px}
.featureTitle{font-weight:600; margin-top:10px}
.featureP{margin-top:8px; color: rgba(11,11,12,.68); line-height:1.65; font-size:14px}

/* Icons */
.icon{width:20px;height:20px;flex:0 0 auto;color: rgba(177,138,74,.95)}
.iconStroke{stroke: currentColor}
.iconFill{fill: currentColor}
.featureHead{display:flex;align-items:center;gap:10px}

/* Image strip */
.gallery{margin-top:12px}
.photo{grid-column: span 4; border-radius: 18px; overflow:hidden; border:1px solid rgba(11,11,12,.10); background: rgba(255,255,255,.62)}
.photo img{width:100%;height:220px;object-fit:cover;display:block;filter:saturate(1.02) contrast(1.02)}
.photoCap{padding:12px 14px}
.photoTitle{font-weight:600}
.photoP{margin-top:6px;color: rgba(11,11,12,.66);font-size:14px;line-height:1.6}

@media (max-width: 860px){
  .photo{grid-column: span 12}
  .photo img{height:200px}
}

.rule{height:1px; background: linear-gradient(90deg, transparent, rgba(176,141,87,.42), transparent); margin:16px 0}

.split{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.panel{
  border-radius: 18px;
  border:1px solid rgba(11,11,12,.10);
  background: rgba(255,255,255,.64);
  padding:16px;
}
.list{margin:10px 0 0; padding:0 0 0 18px; color: rgba(11,11,12,.70); line-height:1.7; font-size:14px}

.footer{margin-top:18px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center; padding:18px 6px; color: rgba(11,11,12,.55); font-size:13px}
.helpFixed{bottom:calc(12px + env(safe-area-inset-bottom, 0px))}

/* FAQ */
.faq{display:grid;gap:10px}
.faqItem{
  border:1px solid rgba(11,11,12,.10);
  border-radius:18px;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(14px);
  overflow:hidden;
}
.faqItem summary{
  cursor:pointer;
  list-style:none;
  padding:14px 16px;
  font-weight:600;
}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem summary:after{
  content:"+";
  float:right;
  color: rgba(177,138,74,.90);
  font-weight:700;
}
.faqItem[open] summary:after{content:"–"}
.faqBody{padding:0 16px 14px;color: rgba(11,11,12,.68);line-height:1.7;font-size:14px}

@media (max-width: 980px){
  .heroInner{grid-template-columns: 1fr}
  .heroMedia{border-left:none; border-top:1px solid var(--faint); min-height: 280px}
}
@media (max-width: 860px){
  .feature{grid-column: span 12}
  .split{grid-template-columns: 1fr}
}