/* ===== MJ Worldwide — VIP & Concierge — Website ===== */

/* ---------- Self-hosted fonts (subset: DE/EN + typographic marks) ---------- */
/* Cormorant Garamond + Jost. Same-origin, cacheable, GDPR-safe (no Google CDN). */
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/cormorant-garamond-400.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:italic; font-weight:400; font-display:swap; src:url('fonts/cormorant-garamond-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/cormorant-garamond-500.woff2') format('woff2'); }
@font-face{ font-family:'Cormorant Garamond'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/cormorant-garamond-600.woff2') format('woff2'); }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/jost-300.woff2') format('woff2'); }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/jost-400.woff2') format('woff2'); }
@font-face{ font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/jost-500.woff2') format('woff2'); }

:root{
  --ink:#0d0d12;
  --gold:#bf9a48;
  --gold-2:#d4b264;
  --gold-pale:#e7d6a8;
  --gold-line:#d9c89c;
  --gold-ink:#8a6a1f;        /* darker gold for AA-contrast text on light surfaces */
  --espresso:#241a09;        /* text on gold foil (high contrast, premium) */
  --paper:#faf7f1;
  --paper-2:#f3ecdd;
  --text:#2b2b31;
  --text-soft:#56524a;
  --hair:#e6ddc9;

  --serif:"Cormorant Garamond", "Didot", Georgia, serif;
  --sans:"Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --maxw:1180px;

  /* motion system — "expensive stillness" */
  --ease:cubic-bezier(.22,.61,.36,1);          /* UI / hover */
  --ease-settle:cubic-bezier(.16,1,.3,1);      /* expo-out — entrances */
  --ease-curtain:cubic-bezier(.62,.04,.2,.96); /* slow-in/out — mask reveals */
  --dur-rise:1000ms;
  --dur-curtain:1100ms;
  --dur-line:900ms;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-ligatures:common-ligatures;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- keyboard focus (never suppress without a visible replacement) ---------- */
:where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--gold-2);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 max(32px,env(safe-area-inset-left)) 0 max(32px,env(safe-area-inset-right)); }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:11px;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--gold-2);
  padding-left:.4em;
}
.section-tag{
  font-family:var(--sans);
  font-weight:500;
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold-ink);            /* AA on cream; dark sections override below */
  margin-bottom:18px;
  padding-left:.34em;
}
.section-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(26px, 5.2vw, 50px);
  line-height:1.12;
  letter-spacing:.005em;
  color:var(--ink);
  max-width:18em;
  text-wrap:balance;
  hyphens:auto;
  -webkit-hyphens:auto;
  overflow-wrap:break-word;
}
.section-head{ margin-bottom:clamp(46px,7vw,72px); max-width:840px; }

/* ---------- divider ---------- */
.divider{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:30px 0; color:var(--gold-2);
}
.divider span{ display:inline-block; width:70px; height:1px; }
.divider span:first-child{ background:linear-gradient(90deg,transparent,var(--gold-line)); transform-origin:right; }
.divider span:last-child{ background:linear-gradient(90deg,var(--gold-line),transparent); transform-origin:left; }
.divider i{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(18px,2vw,21px); color:#e3cf9c; white-space:nowrap; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:400;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  padding:15px 30px; border:1px solid var(--gold);
  color:var(--gold); background:transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .6s var(--ease), color .6s var(--ease),
             border-color .6s var(--ease), box-shadow .6s var(--ease),
             transform .5s var(--ease);
}
.btn:hover{ background:var(--gold); color:var(--espresso); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
/* primary gold CTA — metallic foil */
.btn-gold{
  color:var(--espresso); border-color:transparent;
  background:linear-gradient(160deg, var(--gold-2) 0%, var(--gold) 55%, #a9863c 100%);
  box-shadow:inset 0 1px 0 rgba(255,245,215,.4);
  letter-spacing:.24em;
}
.btn-gold:hover{
  color:var(--espresso); transform:translateY(-1px);
  background:linear-gradient(160deg, var(--gold-pale) 0%, var(--gold-2) 60%, var(--gold) 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.55), 0 14px 30px -18px rgba(191,154,72,.7);
}
.btn-ghost{ color:var(--gold-pale); border-color:rgba(191,154,72,.4); letter-spacing:.2em; }
.btn-ghost:hover{ background:rgba(191,154,72,.12); color:#fff; border-color:var(--gold); }
.btn-sm{ padding:11px 22px; font-size:11px; }
.btn-wide{ padding:17px 48px; }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), padding .5s var(--ease);
  padding:max(22px,env(safe-area-inset-top)) 0 22px;
}
.nav.scrolled{
  background:rgba(12,12,17,.92);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:14px 0;
  box-shadow:0 1px 0 rgba(191,154,72,.18);
}
.nav-inner{
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:0 max(32px,env(safe-area-inset-right)) 0 max(32px,env(safe-area-inset-left));
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:13px; }
.brand-mono{
  width:40px; height:40px; flex:0 0 40px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold-2); border-radius:50%;
  font-family:var(--serif); font-weight:500; font-size:16px;
  color:var(--gold-pale); letter-spacing:.02em; position:relative;
}
.brand-mono::after{ content:""; position:absolute; inset:3px; border:1px solid rgba(191,154,72,.3); border-radius:50%; }
.brand-name{
  font-family:var(--serif); font-weight:500; font-size:22px;
  letter-spacing:.04em; color:var(--gold-pale); white-space:nowrap;
}
.nav-links{ display:flex; gap:34px; margin-left:auto; align-items:center; }
.nav-links a{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(231,214,168,.82); font-weight:400; position:relative; padding:4px 0;
  transition:color .3s var(--ease);
}
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold-2); transition:width .45s var(--ease-settle);
}
.nav-links a:hover{ color:#fff; }
.nav-links a:not(.nav-cta):hover::after{ width:100%; }
.nav-links .nav-cta{ display:none; }          /* drawer-only CTA, shown on mobile */
.nav-right{ display:flex; align-items:center; gap:18px; }
.lang{
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-size:12px; letter-spacing:.14em;
  color:rgba(231,214,168,.7); display:flex; align-items:center; gap:6px; padding:6px 2px;
}
.lang span{ transition:color .3s var(--ease); }
.lang .lang-sep{ color:rgba(191,154,72,.5); }
.lang.en .lang-en, .lang:not(.en) .lang-de{ color:var(--gold-2); font-weight:500; }
.burger{ display:none; background:none; border:none; cursor:pointer; width:30px; height:24px; position:relative; }
.burger span{
  position:absolute; left:0; width:100%; height:1.4px; background:var(--gold-pale);
  transition:all .4s var(--ease);
}
.burger span:nth-child(1){ top:7px; }
.burger span:nth-child(2){ bottom:7px; }
.burger.open span:nth-child(1){ top:11px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ bottom:11px; transform:rotate(-45deg); }

/* mobile drawer scrim */
.nav-scrim{
  position:fixed; inset:0; z-index:99; background:rgba(8,8,12,.5);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
body.nav-open .nav-scrim{ opacity:1; visibility:visible; }
body.nav-open{ overflow:hidden; }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(110px,18vh,140px) max(32px,env(safe-area-inset-right)) clamp(80px,14vh,120px) max(32px,env(safe-area-inset-left));
  background:radial-gradient(135% 100% at 50% -10%, #25252f 0%, #15151d 44%, #0a0a0e 100%);
  color:var(--gold-pale); overflow:hidden;
}
.hero-frame{ position:absolute; inset:26px; border:1px solid rgba(191,154,72,.34); pointer-events:none; z-index:2; }
.hero-frame::after{ content:""; position:absolute; inset:5px; border:1px solid rgba(191,154,72,.13); }
.hero-wm{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  font-family:var(--serif); font-weight:500; font-size:min(46vw,640px); line-height:1;
  letter-spacing:.04em; z-index:0; pointer-events:none; user-select:none;
  background:linear-gradient(180deg, rgba(191,154,72,.08), rgba(191,154,72,.02));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-inner{ position:relative; z-index:3; max-width:880px; }
.hero-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(58px, 12vw, 138px); line-height:.98; letter-spacing:.01em;
  color:#f4e8ca; margin-top:30px; text-wrap:balance;
}
.hero-sub{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(18px, 2.4vw, 23px); line-height:1.6;
  color:#dccca2; max-width:30em; margin:6px auto 0; text-wrap:pretty;
}
.hero-cta{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:46px; }
.scroll-hint{
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-2);
}
.scroll-hint svg{ color:var(--gold-2); animation:bob 2.4s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.6; } 50%{ transform:translateY(7px); opacity:1; } }

/* ---------- hero entrance choreography (gated behind .js; fired by .hero-in) ---------- */
.js .hero .eyebrow{ opacity:0; transform:translateY(16px); transition:opacity var(--dur-rise) var(--ease-settle) 150ms, transform var(--dur-rise) var(--ease-settle) 150ms; }
.js .hero-title{ opacity:0; clip-path:inset(0 0 108% 0); transform:translateY(20px); transition:opacity 700ms ease 300ms, clip-path var(--dur-curtain) var(--ease-curtain) 300ms, transform var(--dur-curtain) var(--ease-curtain) 300ms; }
.js .hero .divider span{ transform:scaleX(0); transition:transform var(--dur-line) var(--ease-curtain) 760ms; }
.js .hero .divider i{ opacity:0; transform:translateY(8px); transition:opacity 700ms var(--ease-settle) 840ms, transform 700ms var(--ease-settle) 840ms; }
.js .hero-sub{ opacity:0; transform:translateY(14px); transition:opacity var(--dur-rise) var(--ease-settle) 980ms, transform var(--dur-rise) var(--ease-settle) 980ms; }
.js .hero-cta .btn{
  opacity:0;
  transition:background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease),
             box-shadow .6s var(--ease), transform .5s var(--ease), opacity 900ms var(--ease-settle) 1120ms;
}
.js .hero-wm{ opacity:0; transition:opacity 1600ms var(--ease-settle) 250ms; }
.js .scroll-hint{ opacity:0; transition:opacity 800ms ease 1500ms; }

.js .hero.hero-in .eyebrow,
.js .hero.hero-in .hero-sub{ opacity:1; transform:none; }
.js .hero.hero-in .hero-title{ opacity:1; clip-path:inset(0 0 -3% 0); transform:none; }
.js .hero.hero-in .divider span{ transform:scaleX(1); }
.js .hero.hero-in .divider i{ opacity:1; transform:none; }
.js .hero.hero-in .hero-cta .btn{ opacity:1; }
.js .hero.hero-in .hero-wm{ opacity:1; }
.js .hero.hero-in .scroll-hint{ opacity:1; }

/* ============ MANIFEST ============ */
.manifest{ position:relative; background:var(--ink); color:var(--gold-pale); padding:140px 0; text-align:center; }
.manifest .section-tag{ color:var(--gold-2); margin-bottom:26px; }
.manifest .wrap{ position:relative; z-index:2; }
.manifest-lead{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px, 3.6vw, 40px); line-height:1.35; letter-spacing:.004em;
  color:#ece0c4; max-width:21em; margin:0 auto; text-wrap:balance;
}

/* ============ SECTIONS ============ */
.section{ padding:120px 0; }
.section-soft{ background:var(--paper-2); }

/* subtle film grain on dark surfaces — kills the flat-digital look */
.hero::before, .manifest::before, .circle::before, .contact::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* quiet hairline seam where a dark register meets the cream above it */
.manifest, .circle, .contact, .footer{ box-shadow:inset 0 1px 0 rgba(217,200,156,.16); }

/* ---------- 3 cards ---------- */
.cards-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:30px; }
.card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--hair); padding:44px 36px;
  box-shadow:0 1px 2px rgba(20,20,26,.04), 0 8px 24px -18px rgba(20,20,26,.10);
  transition:transform .7s var(--ease-settle), box-shadow .7s var(--ease-settle), border-color .7s var(--ease-settle);
}
.card::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:64px;
  background:linear-gradient(90deg,var(--gold-2),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-curtain);
}
.card.in::after{ transform:scaleX(.36); }      /* drawn stub on reveal */
.section-soft .card{ background:var(--paper); }
.card:hover{ transform:translateY(-4px); box-shadow:0 2px 4px rgba(20,20,26,.06), 0 30px 60px -30px rgba(20,20,26,.30); border-color:var(--gold-line); }
.card:hover::after{ transform:scaleX(1); }
.card h3{
  font-family:var(--serif); font-weight:600; font-size:25px; line-height:1.2;
  color:var(--ink); margin-bottom:12px; letter-spacing:.005em; text-wrap:balance;
}
.card p{ color:var(--text-soft); font-size:16px; text-wrap:pretty; }
.card-line{ text-align:left; }
.std-ic{ width:42px; height:42px; color:var(--gold); margin-bottom:22px; transition:color .6s var(--ease-settle); }
.card-line:hover .std-ic{ color:var(--gold-2); }

/* ---------- services ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.svc{
  position:relative; background:var(--paper); padding:46px 24px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:20px;
  transition:background .5s var(--ease), box-shadow .5s var(--ease-settle);
}
.svc:hover{ background:#fff; box-shadow:inset 0 0 0 1px rgba(191,154,72,.35); }
.svc-ic{ width:46px; height:46px; color:var(--gold); transition:color .5s var(--ease-settle), transform .6s var(--ease-settle); }
.svc:hover .svc-ic{ color:var(--gold-2); transform:translateY(-3px); }
.svc h4{ font-family:var(--serif); font-weight:500; font-size:21px; color:var(--ink); letter-spacing:.01em; transition:color .5s var(--ease-settle); }
.svc:hover h4{ color:var(--gold-ink); }
.pull{
  margin-top:60px; max-width:46em; margin-left:auto; margin-right:auto; text-align:center;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(20px,2.6vw,27px); line-height:1.5; color:var(--text-soft);
  padding:0 24px; position:relative; text-wrap:balance;
}
.pull::before{ content:"\201C"; font-family:var(--serif); font-weight:400; font-size:64px; color:var(--gold-line); display:block; line-height:.6; margin-bottom:10px; }

/* ============ MEMBERSHIP (dark, formerly the circle) ============ */
.circle{
  position:relative; padding:130px 0;
  background:radial-gradient(130% 110% at 50% 0%, #23232e 0%, #14141b 48%, #0a0a0e 100%);
  color:var(--gold-pale); text-align:center; overflow:hidden;
}
.circle-frame{ position:absolute; inset:24px; border:1px solid rgba(191,154,72,.28); pointer-events:none; z-index:2; }
.circle .wrap{ position:relative; z-index:2; }
.circle .eyebrow{ color:var(--gold-2); }
.circle-title{
  font-family:var(--serif); font-weight:500; font-size:clamp(44px,8vw,86px);
  line-height:1; color:#f4e8ca; margin:22px 0 0; letter-spacing:.02em; text-wrap:balance;
}
.circle-lead{
  font-family:var(--serif); font-size:clamp(19px,2.4vw,24px); line-height:1.6;
  color:#dccca2; max-width:28em; margin:26px auto 0; font-weight:400; text-wrap:pretty;
}
.circle-quote{
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(26px,4vw,42px);
  color:#f1e6c9; margin:64px auto; max-width:18em; line-height:1.3; text-wrap:balance;
}
.circle-cols{ display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:820px; margin:0 auto; text-align:left; }
.circle-col h4{
  font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid rgba(191,154,72,.25);
}
.circle-col ul{ list-style:none; }
.circle-col li{ position:relative; padding-left:24px; margin-bottom:16px; color:#d8c9a6; font-size:16.5px; line-height:1.55; }
.circle-col li::before{ content:""; position:absolute; left:2px; top:11px; width:6px; height:6px; background:var(--gold); transform:rotate(45deg); }
.circle-foot{
  font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(19px,2.6vw,26px);
  color:var(--gold-pale); margin-top:80px; padding-top:40px;
  border-top:1px solid rgba(191,154,72,.2); max-width:24em; margin-left:auto; margin-right:auto; text-wrap:balance;
}

/* ============ CONTACT ============ */
.contact{
  position:relative; padding:130px 0;
  background:radial-gradient(130% 120% at 50% 0%, #21212b, #0c0c11);
  color:var(--gold-pale); text-align:center; overflow:hidden;
}
.contact-frame{ position:absolute; inset:24px; border:1px solid rgba(191,154,72,.26); pointer-events:none; z-index:2; }
.contact .wrap{ position:relative; z-index:2; max-width:680px; }
.contact .eyebrow{ color:var(--gold-2); }
.contact-title{
  font-family:var(--serif); font-weight:500; font-size:clamp(32px,5vw,54px);
  line-height:1.12; color:#f4e8ca; margin:22px 0 18px; text-wrap:balance;
}
.contact-sub{ font-family:var(--serif); font-weight:400; font-size:19px; color:#cdbe9c; max-width:30em; margin:0 auto 46px; line-height:1.6; text-wrap:pretty; }
.form{ display:grid; grid-template-columns:1fr 1fr; gap:24px; text-align:left; }
.field{ position:relative; }
.field-full{ grid-column:1 / -1; }
.field input, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(191,154,72,.35);
  color:#f1e6c9; font-family:var(--sans); font-weight:300; font-size:16px;
  padding:14px 2px 12px; resize:none; transition:border-color .4s var(--ease);
}
.field textarea{ line-height:1.6; }
.field::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold-2); transform:scaleX(0); transform-origin:center;
  transition:transform .5s var(--ease-settle);
}
.field:focus-within::after{ transform:scaleX(1); }
.field input:focus, .field textarea:focus{ outline:none; }
.field label{
  position:absolute; left:2px; top:14px; color:rgba(231,214,168,.6);
  font-size:16px; pointer-events:none; transition:all .35s var(--ease);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{
  top:-14px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-2);
}
.form .btn{ grid-column:1 / -1; justify-self:center; margin-top:14px; }
.form-result{ grid-column:1 / -1; margin-top:6px; font-family:var(--serif); font-size:18px; line-height:1.5; letter-spacing:.01em; text-transform:none; }
.form-result-ok{ color:var(--gold-pale); text-align:center; }
.form-result-err{ color:#e3b7a6; font-size:14.5px; font-family:var(--sans, inherit); }

/* ============ Kontakt-Bestätigung (Modal) ============ */
.cmodal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; }
.cmodal.open{ display:flex; }
.cmodal-scrim{ position:absolute; inset:0; background:rgba(6,6,10,.74); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:cmodalFade .25s ease both; }
.cmodal-card{ position:relative; z-index:1; width:min(440px,100%); background:linear-gradient(180deg,#16161d,#0e0e13); border:1px solid var(--gold-line); border-radius:6px; padding:46px 36px 38px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.55); animation:cmodalIn .34s cubic-bezier(.2,.7,.3,1) both; }
.cmodal-x{ position:absolute; top:12px; right:16px; background:none; border:none; color:var(--gold-pale); font-size:26px; line-height:1; cursor:pointer; opacity:.55; transition:opacity .2s; }
.cmodal-x:hover{ opacity:1; }
.cmodal-mark{ width:64px; height:64px; margin:0 auto 22px; border-radius:50%; border:1px solid var(--gold-2); color:var(--gold-2); display:flex; align-items:center; justify-content:center; }
.cmodal-card h3{ font-family:var(--serif); font-size:30px; font-weight:500; color:var(--gold-pale); margin:0 0 14px; letter-spacing:.01em; }
.cmodal-card p{ font-family:var(--serif); font-size:17px; line-height:1.6; color:#c9bb97; margin:0 0 28px; }
@keyframes cmodalFade{ from{opacity:0} to{opacity:1} }
@keyframes cmodalIn{ from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .cmodal-scrim,.cmodal-card{ animation:none; } }
.contact-note{ margin-top:42px; font-family:var(--serif); font-style:italic; font-size:16px; letter-spacing:.02em; text-transform:none; color:#bdae8c; }

/* ============ FOOTER ============ */
.footer{ background:#08080c; color:var(--gold-pale); padding:56px 0 max(56px,env(safe-area-inset-bottom)); }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-tag{ font-family:var(--serif); font-style:italic; font-weight:400; font-size:17px; color:#bdae8c; }
.footer-copy{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:rgba(231,214,168,.45); }

/* ============ SCROLL REVEAL ============ */
/* Hidden states gated behind html.js so content is visible if JS never runs. */
/* Tier 2 — bodies / cards / list items: refined fade + small rise */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity var(--dur-rise) var(--ease-settle), transform var(--dur-rise) var(--ease-settle); }
.js .reveal.in{ opacity:1; transform:none; }
/* Tier 1 — headings: the signature masked "curtain rise" */
.js .reveal-mask{ opacity:0; clip-path:inset(0 0 110% 0); transform:translateY(22px); transition:opacity 700ms ease, clip-path var(--dur-curtain) var(--ease-curtain), transform var(--dur-curtain) var(--ease-curtain); }
.js .reveal-mask.in{ opacity:1; clip-path:inset(0 0 -3% 0); transform:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:760px){
  body{ font-size:16px; }
  .section{ padding:84px 0; }
  .manifest{ padding:90px 0; }
  .circle, .contact{ padding:90px 0; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .circle-cols{ grid-template-columns:1fr; gap:40px; }
  .form{ grid-template-columns:1fr; }
  .hero-frame, .circle-frame, .contact-frame{ inset:16px; }
}

/* ---------- nav: switch to off-canvas drawer before the inline bar gets cramped ---------- */
@media (max-width:960px){
  /* No backdrop-filter on the bar here: it would turn .nav into the containing block
     for the fixed drawer (clipping it to header height), and it is costly on mobile
     GPUs. The solid bar reads just as premium. */
  .nav.scrolled{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(12,12,17,.96); }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(80vw,360px);
    background:rgba(10,10,14,.97);
    flex-direction:column; justify-content:center; gap:24px;
    padding:0 40px calc(40px + env(safe-area-inset-bottom));
    transform:translateX(100%); transition:transform .5s var(--ease);
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:15px; padding:12px 0; }    /* ≥44px tap target */
  .nav-links .nav-cta{
    display:inline-flex; margin-top:14px;
    padding:15px 30px; color:var(--espresso);
    letter-spacing:.24em; font-size:12px;
  }
  .burger{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; }
  .burger span{ left:7px; width:30px; }
  .lang{ min-height:44px; min-width:44px; justify-content:center; }
  .nav-right .btn-sm{ display:none; }
}
/* coarse-pointer / mobile: drop costly backdrop blur for a solid premium bar */
@media (hover:none){
  .nav.scrolled{ backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(12,12,17,.96); }
}
/* landscape phones: let the hero size to content instead of forcing a tall box */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding:96px 32px 64px; }
  .scroll-hint{ display:none; }
  .hero-title{ font-size:clamp(40px,9vw,72px); margin-top:18px; }
}
@media (max-width:440px){
  .brand-name{ font-size:19px; }
  .btn{ padding:14px 24px; }
  .eyebrow, .section-tag{ letter-spacing:.28em; }
  .services-grid{ grid-template-columns:1fr; }
  .svc{ padding:38px 18px; }
}

/* ============ REDUCED MOTION — arrive fully composed, stay still ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .scroll-hint svg{ animation:none; }
  /* scroll reveals + headings: show instantly */
  .js .reveal, .js .reveal-mask{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
  /* hero entrance: final state, no motion (watermark keeps its centering transform) */
  .js .hero .eyebrow, .js .hero-title, .js .hero .divider i, .js .hero-sub, .js .hero-cta .btn, .js .scroll-hint{
    opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;
  }
  .js .hero .divider span{ transform:scaleX(1) !important; transition:none !important; }
  .js .hero-wm{ opacity:1 !important; transition:none !important; }
  /* hover micro-motion off */
  .btn:hover, .card:hover, .svc:hover .svc-ic{ transform:none; }
  .card.in::after, .field:focus-within::after{ transition:none; }
  /* drawer fades rather than slides */
  .nav-links{ transition:opacity .3s ease, visibility .3s ease !important; }
}