@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/CormorantGaramond-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/CormorantGaramond-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/CormorantGaramond-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('fonts/CormorantGaramond-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('fonts/Figtree-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('fonts/Figtree-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('fonts/Figtree-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto Mono'; src: url('fonts/RobotoMono-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #F5F1E8; }
body { font-family: 'Figtree', sans-serif; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { display: none; }
::selection { background: #4A9B8E; color: #F5F1E8; }
input:focus::placeholder { color: transparent; }
input::placeholder { color: #9a9a90; transition: color 300ms ease; }
a { color: #4A9B8E; }
a:hover { color: #2D5F3F; }

@keyframes relSettle { from { transform: scale(1.06); } to { transform: scale(1); } }

@media (pointer: fine) { body.rel-cursor, body.rel-cursor * { cursor: none !important; } }

.rel-grid { min-height: 100vh; display: grid; grid-template-columns: 1fr 1.05fr; align-items: stretch; }
.rel-left { padding: clamp(48px,7vh,96px) clamp(28px,5vw,80px); display: flex; flex-direction: column; justify-content: center; }
.rel-left-inner { max-width: 480px; }
.rel-logo { height: 44px; width: auto; object-fit: contain; display: block; margin-bottom: 44px; }
.rel-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #4A9B8E; border-top: 1.5px solid #4A9B8E; padding-top: 8px; }
.rel-h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(44px,4.6vw,68px); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; color: #1A1A18; margin: 26px 0 0; text-wrap: balance; }
.rel-h1 em { font-style: italic; color: #4A9B8E; background: linear-gradient(currentColor, currentColor) no-repeat left 94% / 0% 1px; transition: background-size 700ms cubic-bezier(0.22,1,0.36,1); }
.rel-h1:hover em { background-size: 100% 1px; }
.rel-lede { font-size: 16px; line-height: 1.85; color: #4A4A44; max-width: 420px; margin-top: 26px; }

.rel-form { display: flex; gap: 10px; align-items: stretch; max-width: 440px; }
.rel-form input { flex: 1; min-width: 0; font-family: 'Figtree', sans-serif; font-size: 14px; color: #1A1A18; background: #FDFAF4; border: 1px solid #E4E0D6; border-radius: 4px; padding: 14px 16px; outline: none; transition: border-color 400ms ease, box-shadow 400ms ease, background 400ms ease; }
.rel-form input:hover { border-color: #4A9B8E; background: #FFFFFF; box-shadow: 0 2px 12px rgba(74,155,142,0.14); }
.rel-form input:focus { border-color: #4A9B8E; box-shadow: 0 0 0 3px rgba(74,155,142,0.12); background: #FFFFFF; }
.rel-form button { flex-shrink: 0; font-family: 'Figtree', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: #FFFFFF; background: #4A9B8E; border: none; border-radius: 100px; padding: 0 28px; cursor: pointer; transition: background 450ms ease, transform 450ms cubic-bezier(0.22,1,0.36,1), box-shadow 450ms ease; }
.rel-form button:hover { background: #2D5F3F; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(45,95,63,0.25); }
.rel-form button:active { transform: translateY(0) scale(0.97); box-shadow: none; }
.rel-form .rel-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; padding: 0; border: 0; }
.rel-form button[disabled] { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.rel-form-error { font-size: 12px; color: #B4462F; margin-top: 10px; }
.rel-fineprint { font-size: 12px; font-style: italic; color: #787870; margin-top: 12px; }

.rel-thanks-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 300; color: #1A1A18; line-height: 1.1; }
.rel-thanks-body { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 18px; color: #4A4A44; line-height: 1.6; margin-top: 8px; }

.rel-photo { position: relative; overflow: hidden; border-left: 1px solid #E4E0D6; background: #EDE8DC; min-height: 340px; }
.rel-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; animation: relSettle 2600ms cubic-bezier(0.22,1,0.36,1) backwards; transition: transform 1400ms cubic-bezier(0.22,1,0.36,1); }
.rel-photo:hover .rel-hero-img { transform: scale(1.035); }
.rel-photo-veil { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(247,243,234,0.20) 0%, rgba(247,243,234,0) 42%); }

.rel-session-stack { position: absolute; bottom: clamp(24px,5vw,44px); right: clamp(24px,5vw,44px); display: flex; flex-direction: column; align-items: flex-end; }
.rel-polaroid { position: relative; z-index: 1; background: #FDFAF4; padding: 10px 10px 14px; border-radius: 2px; box-shadow: 0 12px 40px rgba(0,0,0,0.22); transform: rotate(-4deg); width: 176px; margin-right: 96px; will-change: transform; }
.rel-polaroid-frame { position: relative; width: 100%; height: 116px; background: #E2DDD0; overflow: hidden; }
.rel-polaroid-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.rel-polaroid-frame img.is-active { display: block; }
.rel-polaroid-caption { font-family: 'Roboto Mono', monospace; font-size: 9px; letter-spacing: 0.12em; color: #787870; margin-top: 9px; text-transform: uppercase; }

.rel-pill { position: relative; z-index: 2; margin-top: -52px; background: #1B4332; border-radius: 10px; padding: 18px 22px 20px; width: 252px; box-shadow: 0 16px 44px rgba(27,67,50,0.35); transition: transform 600ms cubic-bezier(0.22,1,0.36,1); }
.rel-pill:hover { transform: translateY(-4px); }
.rel-pill-counter { display: flex; justify-content: flex-end; margin-bottom: 10px; font-family: 'Roboto Mono', monospace; font-size: 9px; letter-spacing: 0.1em; color: rgba(247,243,234,0.4); }
.rel-pill-msg { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 17px; line-height: 1.6; color: rgba(247,243,234,0.92); min-height: 82px; }
.rel-pill-by { font-family: 'Figtree', sans-serif; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,243,234,0.45); margin-top: 12px; }

.rel-cursor-dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #1B4332; pointer-events: none; z-index: 9999; opacity: 0; will-change: transform; }
.rel-cursor-ring { position: fixed; top: 0; left: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(74,155,142,0.55); pointer-events: none; z-index: 9998; opacity: 0; will-change: transform; }

[data-reveal] { opacity: 1; }

@media (max-width: 820px) {
  .rel-grid { grid-template-columns: 1fr; }
  .rel-photo { min-height: 62vh; order: -1; border-left: none; border-bottom: 1px solid #E4E0D6; }
  .rel-left { padding: 44px 24px 52px; justify-content: flex-start; }
  .rel-h1 { font-size: 42px; }
}
@media (max-width: 460px) {
  .rel-h1 { font-size: 36px; }
  .rel-form { flex-direction: column; }
  .rel-form button { padding: 13px 0; border-radius: 4px; }
  .rel-polaroid { width: 150px; margin-right: 68px; }
  .rel-pill { width: 216px; margin-top: -44px; }
  .rel-logo { height: 36px; margin-bottom: 32px; }
}