:root{
  --forest: #1F3A2E;
  --forest-deep: #15281F;
  --forest-soft: #2A4A3B;
  --cream: #F5EFE4;
  --cream-warm: #EFE7D6;
  --cream-deep: #E6DBC4;
  --gold: #C9A66B;
  --gold-soft: #D8BC8A;
  --ink: #15281F;
  --hairline: rgba(245,239,228,0.14);
  --hairline-dark: rgba(31,58,46,0.16);
  --serif: 'Fraunces', 'Cardo', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --grain-opacity: .035;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

.wrap{ max-width:1380px; margin:0 auto; padding:0 40px; }
@media (max-width:720px){ .wrap{padding:0 22px} }

/* ============ Type ============ */
.eyebrow{
  font-family:var(--sans);
  font-size:11px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.eyebrow .dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold); margin-right:10px; vertical-align:1px;
}
.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:0.96;
  letter-spacing:-0.018em;
  margin:0;
}
.display em{ font-style:italic; color:var(--gold); }
.body-lg{ font-size:19px; line-height:1.55; font-weight:300; letter-spacing:.005em; }
.body{ font-size:15.5px; line-height:1.65; font-weight:400; }
.small{ font-size:12.5px; letter-spacing:.04em; }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  padding:18px 26px 18px 28px;
  border:1px solid currentColor;
  border-radius:999px;
  font-family:var(--sans);
  font-size:13px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, border-color .3s;
  position:relative; overflow:hidden;
}
.btn .arrow{
  display:inline-block; width:18px; height:1px; background:currentColor; position:relative;
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.btn .arrow::after{
  content:""; position:absolute; right:0; top:-3px;
  width:8px; height:8px;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.btn:hover .arrow{ width:30px; }
.btn-primary{
  background:var(--gold); color:var(--forest-deep); border-color:var(--gold);
}
.btn-primary:hover{ background:var(--forest-deep); color:var(--cream); border-color:var(--forest-deep);}
.btn-ghost-light{ color:var(--cream); border-color:rgba(245,239,228,0.35); }
.btn-ghost-light:hover{ background:var(--cream); color:var(--forest-deep); border-color:var(--cream); }
.btn-ghost-dark{ color:var(--forest-deep); border-color:rgba(31,58,46,0.25); }
.btn-ghost-dark:hover{ background:var(--forest-deep); color:var(--cream); border-color:var(--forest-deep); }

/* ============ Brand mark ============ */
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--serif); font-size:22px; letter-spacing:-.01em;
}
.brand em{ font-style:italic; color:var(--gold); }
.brand-mark{
  width:26px; height:26px; border-radius:50%;
  border:1px solid currentColor;
  display:inline-grid; place-items:center;
  position:relative;
}
.brand-mark::before, .brand-mark::after{
  content:""; position:absolute; left:50%; top:50%;
  width:14px; height:1px; background:currentColor;
  transform:translate(-50%,-50%);
}
.brand-mark::after{ width:1px; height:14px; }

html,body{ background:var(--cream); color:var(--forest-deep); font-family:var(--sans);}
body{ min-height:100vh; }

.stage{
  position:relative; z-index:1;
  min-height:100vh;
  display:grid;
  grid-template-columns: 0.95fr 1.05fr;
}
@media (max-width:960px){ .stage{grid-template-columns:1fr;} }

.left{
  background:var(--forest);
  color:var(--cream);
  padding:60px 56px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
}
.left::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(ellipse at 80% 0%, rgba(201,166,107,0.22), transparent 55%),
              radial-gradient(ellipse at 10% 100%, rgba(42,74,59,0.9), transparent 55%);
  pointer-events:none;
}
.left > *{ position:relative; }

.left .brand{ color:var(--cream); }

.left h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(48px, 5.5vw, 84px);
  line-height:0.98; letter-spacing:-.022em;
  margin:36px 0 28px;
  max-width:14ch;
}
.left h1 em{ font-style:italic; color:var(--gold); }
.left .lede{
  font-size:17px; line-height:1.6; font-weight:300; max-width:42ch; opacity:.9;
}
.left .meta{
  display:grid; grid-template-columns: 1fr 1fr; gap:34px 28px;
  margin-top:42px;
  border-top:1px solid rgba(245,239,228,0.14);
  padding-top:30px;
}
.meta-item{
  font-size:14px; line-height:1.5; opacity:.9;
}
.meta-item .k{
  display:block; font-family:var(--sans); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; opacity:.6; margin-bottom:8px;
}
.left .foot{
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.6;
  margin-top:60px;
}
.left .foot a{
  border-bottom:1px solid rgba(201,166,107,0.4);
  padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.left .foot a:hover{ color:var(--gold); border-color:var(--gold); }
.back-link{
  color:var(--cream); text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
}
.back-link::before{
  content:""; width:18px; height:1px; background:currentColor; position:relative;
  box-shadow: inset 6px 4px 0 -4px currentColor;
}

.right{
  background:var(--cream);
  padding:60px 56px;
  display:flex; flex-direction:column;
  position:relative;
}
@media (max-width:720px){
  .stage{ min-height:0; }
  .left{ padding:34px 24px 30px; }
  .right{ padding:44px 22px 36px; }
  .left .brand{ font-size:19px; }
  .left h1{
    font-size:clamp(40px, 11.5vw, 60px);
    margin:28px 0 22px; max-width:none;
    line-height:1; letter-spacing:-.025em;
  }
  .left .lede{ font-size:15.5px; max-width:none; line-height:1.6; }
  .left .meta{
    grid-template-columns:1fr 1fr;
    gap:24px 22px;
    margin-top:34px; padding-top:26px;
  }
  .meta-item{ font-size:13.5px; line-height:1.45; }
  .meta-item .k{ font-size:9.5px; letter-spacing:.2em; margin-bottom:6px; }
  .left .foot{
    flex-direction:column; align-items:flex-start; gap:12px;
    margin-top:44px;
    font-size:10px; letter-spacing:.14em;
  }
  .back-link{ font-size:10.5px; letter-spacing:.18em; }
  .right .num{ font-size:16px; margin-bottom:8px; }
  .right h2{ font-size:clamp(32px, 9vw, 44px); line-height:1.02; letter-spacing:-.02em; }
  .right .sub{ font-size:14.5px; max-width:none; line-height:1.6; margin-top:14px; }
  .divider{ margin:26px 0 22px; }
  .widget-frame{ min-height:auto; }
  .widget-frame iframe{ min-height:560px; }
}

@media (max-width:420px){
  .left{ padding:30px 20px 28px; }
  .right{ padding:36px 18px 32px; }
  .left .meta{ gap:22px 18px; }
  .right h2{ font-size:clamp(28px, 9.5vw, 38px); }
}

.right .num{
  font-family:var(--serif); font-style:italic; color:var(--gold); font-size:20px;
  margin-bottom:10px;
}
.right h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px, 3.6vw, 52px);
  line-height:1; letter-spacing:-.015em;
  margin:0 0 10px;
}
.right h2 em{ font-style:italic; color:var(--gold); }
.right .sub{
  font-size:15px; line-height:1.55; font-weight:300; max-width:48ch;
  opacity:.85;
}
.divider{
  height:1px; background:rgba(31,58,46,0.16);
  margin:30px 0 26px;
}
.widget-frame{
  flex:1;
  min-height:560px;
  display:flex; flex-direction:column;
}
.widget-frame iframe{ width:100%; border:0; min-height:780px; background:transparent;}

.rise{ opacity:0; transform:translateY(20px); animation: rise 1s cubic-bezier(.2,.7,.2,1) forwards; }
.rise.d1{ animation-delay:.08s; }
.rise.d2{ animation-delay:.16s; }
.rise.d3{ animation-delay:.24s; }
.rise.d4{ animation-delay:.32s; }
.rise.d5{ animation-delay:.42s; }
@keyframes rise{ to{opacity:1; transform:none;} }