@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;0,9..144,900;1,9..144,700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root {
  --cr:   #FAF7F2;
  --cr2:  #F4EFE6;
  --cr3:  #EDE4D5;
  --cr4:  #E4D9C5;
  --ink:  #16120E;
  --i60:  rgba(22,18,14,.6);
  --i25:  rgba(22,18,14,.25);
  --i10:  rgba(22,18,14,.1);
  --i16:  rgba(22,18,14,.16);
  --tl:   #0D7A6B;
  --tl10: rgba(13,122,107,.1);
  --tl20: rgba(13,122,107,.2);
  --am:   #C85A0D;
  --am08: rgba(200,90,13,.08);
  --am20: rgba(200,90,13,.2);
  --pl:   #4B3F72;
  --pl08: rgba(75,63,114,.08);
  --card: rgba(255,254,251,.76);
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ═══════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--cr);
  color: var(--ink);
  overflow-x: hidden;
  cursor: none;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════════════ */
#cur   { position:fixed;width:10px;height:10px;background:var(--ink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .35s var(--ease),height .35s var(--ease),background .35s;mix-blend-mode:multiply; }
#cur-r { position:fixed;width:38px;height:38px;border:1.5px solid rgba(22,18,14,.28);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .4s var(--ease),height .4s var(--ease),opacity .3s; }
body.cx #cur   { width:52px;height:52px;background:var(--tl);opacity:.15; }
body.cx #cur-r { opacity:0; }

/* ═══════════════════════════════════════
   ANIMATED BG
═══════════════════════════════════════ */
.bgc  { position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--cr);pointer-events:none; }
.bgb  { position:absolute;border-radius:50%;filter:blur(90px);opacity:.7;animation:bf 18s ease-in-out infinite alternate; }
.bb1  { width:700px;height:700px;background:radial-gradient(circle,#EFE2C8,#ECCFAA 40%,transparent 72%);top:-160px;left:-200px;animation-duration:16s; }
.bb2  { width:620px;height:620px;background:radial-gradient(circle,rgba(13,122,107,.13),rgba(13,122,107,.04) 55%,transparent 75%);bottom:-140px;right:-100px;animation-duration:21s;animation-direction:alternate-reverse; }
.bb3  { width:460px;height:460px;background:radial-gradient(circle,rgba(75,63,114,.09),transparent 70%);top:42%;left:52%;animation-duration:14s; }
.bb4  { width:380px;height:380px;background:radial-gradient(circle,rgba(200,90,13,.07),transparent 70%);top:22%;right:14%;animation-duration:23s;animation-direction:alternate-reverse; }
@keyframes bf {
  0%   { transform:translate(0,0)       scale(1)    rotate(0deg); }
  33%  { transform:translate(55px,35px)  scale(1.08) rotate(3deg); }
  66%  { transform:translate(-35px,75px) scale(.96)  rotate(-2deg); }
  100% { transform:translate(28px,-38px) scale(1.05) rotate(1deg); }
}
.bg-grid  { position:absolute;inset:0;background-image:linear-gradient(rgba(22,18,14,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(22,18,14,.03) 1px,transparent 1px);background-size:56px 56px; }
.bg-noise { position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px; }

/* ═══════════════════════════════════════
   LAYOUT
═══════════════════════════════════════ */
.z1      { position:relative;z-index:1; }
.wrap    { max-width:1240px;margin:0 auto;padding:0 5%; }

/* ═══════════════════════════════════════
   TAG PILL
═══════════════════════════════════════ */
.tag  { display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border:1px solid var(--tl20);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tl);background:var(--tl10);font-weight:600;border-radius:100px; }
.tdot { width:5px;height:5px;background:var(--tl);border-radius:50%;animation:pp 2s infinite;flex-shrink:0; }
@keyframes pp { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.5)} }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn     { display:inline-flex;align-items:center;gap:9px;padding:13px 26px;font-family:'Outfit',sans-serif;font-weight:600;font-size:.87rem;letter-spacing:.02em;cursor:pointer;text-decoration:none;border:none;transition:all .35s var(--ease);border-radius:100px; }
.btn svg { width:15px;height:15px;transition:transform .3s var(--ease);flex-shrink:0; }
.btn:hover svg { transform:translate(3px,-1px); }
.btn-dk       { background:var(--ink);color:var(--cr); }
.btn-dk:hover { background:var(--tl);transform:translateY(-2px);box-shadow:0 12px 36px rgba(13,122,107,.28); }
.btn-gh       { background:transparent;color:var(--ink);border:1.5px solid var(--i16); }
.btn-gh:hover { border-color:var(--ink);transform:translateY(-2px); }
.btn-tl       { background:var(--tl);color:#fff; }
.btn-tl:hover { background:#0a5f54;transform:translateY(-2px);box-shadow:0 12px 36px rgba(13,122,107,.3); }

/* ═══════════════════════════════════════
   NAV
═══════════════════════════════════════ */
.nav-wrap { position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:14px 5%;pointer-events:none;animation:ni .7s var(--ease) both; }
@keyframes ni { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:translateY(0)} }
.nav-pill { background:rgba(250,247,242,.88);backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--i10);border-radius:100px;padding:10px 10px 10px 24px;display:flex;align-items:center;gap:4px;max-width:820px;width:100%;pointer-events:all;box-shadow:0 4px 24px rgba(22,18,14,.07); }
.logo     { display:flex;align-items:center;gap:9px;text-decoration:none;margin-right:8px; }
.gem      { width:30px;height:30px;background:var(--ink);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);display:flex;align-items:center;justify-content:center;font-family:'Fraunces',serif;font-weight:900;font-size:11px;color:var(--cr);flex-shrink:0; }
.logo-t   { font-family:'Outfit',sans-serif;font-weight:700;font-size:1rem;color:var(--ink); }
.logo-t em { font-style:normal;color:var(--tl); }
.nav-links { display:flex;gap:2px;list-style:none;flex:1;justify-content:center; }
.nav-links a       { color:var(--i60);text-decoration:none;font-size:.83rem;font-weight:500;padding:7px 15px;border-radius:100px;transition:all .22s; }
.nav-links a:hover,
.nav-links a.active { color:var(--ink);background:rgba(22,18,14,.07); }

/* ═══════════════════════════════════════
   PAGE HERO HEADER (shared)
═══════════════════════════════════════ */
.page-hero { padding:160px 5% 90px;position:relative;overflow:hidden; }
.page-hero-bg-word { position:absolute;bottom:-30px;left:-10px;font-family:'Fraunces',serif;font-weight:900;font-size:clamp(80px,12vw,180px);color:rgba(22,18,14,.025);letter-spacing:-.06em;line-height:1;pointer-events:none;user-select:none;white-space:nowrap; }
.ph-tag  { margin-bottom:24px;animation:fu .9s var(--ease) .1s both; }
.ph-h1   { font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2.8rem,5vw,4.5rem);line-height:1.0;letter-spacing:-.04em;color:var(--ink);margin-bottom:20px;animation:fu .9s var(--ease) .25s both; }
.ph-h1 em { font-style:italic;color:var(--tl); }
.ph-sub  { font-size:1.05rem;font-weight:300;color:var(--i60);line-height:1.78;max-width:540px;animation:fu .9s var(--ease) .4s both; }
.ph-acts { display:flex;gap:12px;flex-wrap:wrap;margin-top:36px;animation:fu .9s var(--ease) .55s both; }

/* ═══════════════════════════════════════
   SECTION TYPOGRAPHY
═══════════════════════════════════════ */
.ey       { display:flex;align-items:center;gap:10px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tl);margin-bottom:18px;font-weight:600; }
.ey::before { content:'';width:20px;height:1.5px;background:var(--tl); }
.ey-c      { justify-content:center; }
.ey-c::before { display:none; }
.st   { font-family:'Fraunces',serif;font-weight:900;font-size:clamp(2rem,3.5vw,3rem);line-height:1.06;letter-spacing:-.04em;color:var(--ink);margin-bottom:18px; }
.sb   { font-size:1rem;color:var(--i60);line-height:1.78;font-weight:300; }

/* ═══════════════════════════════════════
   CARDS
═══════════════════════════════════════ */
.card { background:var(--card);border:1px solid var(--i10);border-radius:16px;padding:28px;backdrop-filter:blur(18px);transition:all .38s var(--ease); }
.card:hover { transform:translateY(-4px);box-shadow:0 18px 56px rgba(22,18,14,.1);border-color:var(--i16); }

/* ═══════════════════════════════════════
   SCROLL REVEAL
═══════════════════════════════════════ */
.rv    { opacity:0;transform:translateY(34px);transition:opacity .82s var(--ease),transform .82s var(--ease); }
.rv.on { opacity:1;transform:translateY(0); }
.r1 { transition-delay:.08s; }
.r2 { transition-delay:.18s; }
.r3 { transition-delay:.28s; }
.r4 { transition-delay:.38s; }
.r5 { transition-delay:.48s; }

/* ═══════════════════════════════════════
   DIVIDER
═══════════════════════════════════════ */
.divider { height:1px;background:var(--i10);margin:0 5%; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.site-footer { padding:38px 5%;border-top:1px solid var(--i10);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;background:rgba(244,239,230,.4); }
.fcp { font-size:.77rem;color:var(--i60); }
.fls { display:flex;gap:22px; }
.fls a { font-size:.77rem;color:var(--i60);text-decoration:none;transition:color .2s; }
.fls a:hover { color:var(--tl); }

/* ═══════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════ */
@keyframes fu { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fi { from{opacity:0} to{opacity:1} }
@keyframes sh { 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes fl { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ═══════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════ */
.form-group { display:flex;flex-direction:column;gap:8px; }
.form-group label { font-size:.78rem;font-weight:600;color:var(--ink);letter-spacing:.03em; }
.form-control {
  padding:13px 18px;background:rgba(255,254,251,.8);
  border:1.5px solid var(--i16);border-radius:12px;
  font-family:'Outfit',sans-serif;font-size:.9rem;color:var(--ink);
  transition:all .25s var(--ease);outline:none;
}
.form-control:focus { border-color:var(--tl);background:#fff;box-shadow:0 0 0 4px var(--tl10); }
.form-control::placeholder { color:var(--i25); }
textarea.form-control { resize:vertical;min-height:130px; }

/* ═══════════════════════════════════════
   MARQUEE
═══════════════════════════════════════ */
.mstrip { background:var(--ink);color:var(--cr);padding:12px 0;overflow:hidden;display:flex; }
.mtrack { display:flex;animation:msc 26s linear infinite;white-space:nowrap; }
.mtrack:hover { animation-play-state:paused; }
.mi   { display:flex;align-items:center;gap:20px;padding:0 20px;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;opacity:.7; }
.msep { width:4px;height:4px;background:var(--tl);border-radius:50%; }
@keyframes msc { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:840px) {
  .nav-links { display:none; }
  .page-hero-bg-word { font-size:60px; }
}
@media(max-width:600px) {
  .ph-acts { flex-direction:column; }
}
