:root { --ink:#18241e; --moss:#304d3a; --sage:#dce5d6; --paper:#f6f4ee; --sun:#edbf63; --line:rgba(24,36,30,.18); font-family:'DM Sans',sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); } a { color:inherit; } button,input,select { font:inherit; } .site-header { position:absolute; z-index:3; top:0; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:26px clamp(22px,5vw,80px); color:#fff; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-size:14px; font-weight:700; line-height:.93; letter-spacing:.02em; text-transform:uppercase; } .brand img { width:46px; height:46px; object-fit:cover; border-radius:50%; border:2px solid rgba(255,255,255,.7); } .brand em { font-family:'Fraunces',serif; font-size:18px; font-weight:500; text-transform:none; letter-spacing:0; }
.nav { display:flex; align-items:center; gap:30px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; } .nav a { text-decoration:none; } .nav-cta { padding:12px 17px; border:1px solid rgba(255,255,255,.55); border-radius:50px; } .nav-cta span { margin-left:8px; color:var(--sun); } .menu-toggle { display:none; color:#fff; background:none; border:0; font-size:24px; }
.hero { position:relative; min-height:760px; display:grid; grid-template-columns:46% 54%; overflow:hidden; color:#fff; background:var(--moss); } .hero:before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 14% 25%,rgba(237,191,99,.2),transparent 32%),linear-gradient(110deg,#263d2f,#365640); } .hero-copy { position:relative; z-index:1; align-self:center; padding:130px 8vw 100px; } .kicker { display:flex; align-items:center; gap:11px; margin:0 0 22px; color:var(--sun); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } .kicker span { width:28px; height:1px; background:currentColor; } h1,h2 { margin:0; font-family:'Fraunces',serif; font-weight:500; letter-spacing:-.055em; } h1 { font-size:clamp(3.7rem,6vw,6.9rem); line-height:.9; } h1 i,h2 em { color:var(--sun); font-style:italic; } .hero-text { max-width:390px; margin:30px 0; color:#d8e3d6; font-size:16px; line-height:1.7; } .button { display:inline-flex; align-items:center; justify-content:space-between; gap:35px; padding:15px 20px; border:0; border-radius:3px; cursor:pointer; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-3px); } .button span { font-size:20px; line-height:0; } .button-light { color:var(--ink); background:var(--sun); } .button-dark { width:100%; color:#fff; background:var(--moss); }
.hero-image-wrap { position:relative; min-height:760px; overflow:hidden; } .hero-image-wrap:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(33,57,42,.5),transparent 55%),linear-gradient(0deg,rgba(24,36,30,.5),transparent 30%); } .hero-image-wrap img { width:100%; height:100%; object-fit:cover; filter:saturate(.85); } .hero-stamp { position:absolute; right:7%; bottom:14%; z-index:1; display:flex; align-items:center; gap:8px; padding:13px; color:var(--ink); background:var(--sun); transform:rotate(-8deg); } .hero-stamp strong { font-family:'Fraunces',serif; font-size:50px; line-height:.8; } .hero-stamp span { font-size:10px; font-weight:700; line-height:1.1; text-transform:uppercase; } .hero-bottom { position:absolute; z-index:2; bottom:25px; left:8vw; right:8vw; display:flex; align-items:center; gap:14px; color:rgba(255,255,255,.65); font-size:11px; } .hero-bottom .line { width:70px; height:1px; background:var(--sun); } .scroll-label { margin-left:auto; text-transform:uppercase; letter-spacing:.13em; }
.section { padding:clamp(75px,9vw,140px) clamp(22px,8vw,130px); } .section-tag { margin-bottom:20px; color:#6f876d; font-size:11px; font-weight:700; letter-spacing:.16em; } .intro { background:var(--paper); } .intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:10vw; } h2 { font-size:clamp(3rem,5.2vw,6rem); line-height:.94; } h2 em { color:var(--moss); } .intro-body { max-width:515px; padding-top:12px; } .intro-body p { color:#647069; line-height:1.75; } .intro-body .large { margin-top:0; color:var(--ink); font-family:'Fraunces',serif; font-size:23px; line-height:1.4; } .text-link { display:inline-block; margin-top:23px; color:var(--moss); font-size:12px; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; } .text-link span { margin-left:15px; font-size:20px; } .timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:90px; padding-top:25px; border-top:1px solid var(--line); } .timeline-item { display:flex; flex-direction:column; gap:8px; } .timeline-item strong { color:var(--moss); font-family:'Fraunces',serif; font-size:34px; } .timeline-item span { color:#768078; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.community { background:var(--sage); } .section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:52px; } .section-heading > p { max-width:300px; margin:0 0 5px; color:#657268; font-size:14px; line-height:1.6; } .carousel { position:relative; } .carousel-track { position:relative; height:min(54vw,610px); min-height:350px; overflow:hidden; background:#283c2e; } .slide { position:absolute; inset:0; margin:0; opacity:0; transition:opacity .6s ease; } .slide.is-active { opacity:1; } .slide img { width:100%; height:100%; object-fit:cover; } .slide:after { content:''; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(17,30,22,.85)); } .slide figcaption { position:absolute; z-index:1; right:5%; bottom:8%; left:5%; display:grid; grid-template-columns:70px 1fr; align-items:end; color:#fff; } .slide figcaption span { grid-row:span 2; color:var(--sun); font-family:'Fraunces',serif; font-size:34px; } .slide figcaption strong { font-family:'Fraunces',serif; font-size:clamp(25px,3vw,42px); font-weight:500; } .slide figcaption small { grid-column:2; margin-top:5px; color:#d5ded7; font-size:11px; letter-spacing:.12em; text-transform:uppercase; } .carousel-controls { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:20px; } .carousel-arrow { width:42px; height:42px; border:1px solid var(--moss); border-radius:50%; color:var(--moss); background:transparent; cursor:pointer; font-size:18px; } .carousel-dots { display:flex; gap:7px; } .dot { width:7px; height:7px; padding:0; border:0; border-radius:50%; background:#afc1ae; cursor:pointer; } .dot.active { width:25px; border-radius:10px; background:var(--moss); }
.join { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(50px,10vw,160px); align-items:start; background:#f0ede4; } .join-copy h2 { font-size:clamp(3.5rem,6vw,6.5rem); } .join-copy h2 em { color:#bb8146; } .join-copy > p { max-width:430px; margin:30px 0; color:#68746d; line-height:1.7; } .join-note { display:flex; align-items:center; gap:14px; margin-top:45px; } .join-note > span { color:#c48a47; font-size:25px; } .join-note div { display:flex; flex-direction:column; gap:4px; } .join-note strong { font-family:'Fraunces',serif; font-size:18px; font-weight:500; } .join-note small { color:#737c75; font-size:11px; } .member-form { padding:clamp(24px,4vw,48px); background:#fff; box-shadow:14px 18px 50px rgba(53,57,44,.08); } .form-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:33px; padding-bottom:18px; border-bottom:1px solid var(--line); } .form-header span { font-family:'Fraunces',serif; font-size:23px; } .form-header small { color:#869088; font-size:10px; text-transform:uppercase; } .member-form label { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; color:#637169; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .member-form input:not([type=checkbox]),.member-form select { width:100%; padding:13px 0; border:0; border-bottom:1px solid #cfd6cc; border-radius:0; outline:0; color:var(--ink); background:transparent; font-size:15px; letter-spacing:0; text-transform:none; } .member-form input:focus,.member-form select:focus { border-color:var(--moss); } .member-form input::placeholder { color:#aab2ab; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:25px; } .check { flex-direction:row!important; align-items:flex-start; gap:9px!important; margin:7px 0 25px!important; color:#828b84!important; font-size:10px!important; font-weight:400!important; letter-spacing:0!important; text-transform:none!important; } .check input { accent-color:var(--moss); margin-top:1px; } .form-message { min-height:18px; margin:14px 0 0; color:var(--moss); font-size:13px; font-weight:600; line-height:1.4; }
.footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:36px clamp(22px,8vw,130px); color:#dbe6da; background:var(--moss); } .footer-brand { color:#fff; } .footer-brand img { width:40px; height:40px; } .footer p { margin:0; color:#bdcdbd; font-size:12px; line-height:1.6; } .footer p span { color:#839a86; } .footer > a { color:var(--sun); font-size:11px; font-weight:700; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
@media (max-width:800px) { .site-header { padding:20px 22px; } .nav { position:absolute; top:78px; right:20px; display:none; flex-direction:column; align-items:stretch; gap:18px; min-width:210px; padding:22px; color:var(--ink); background:var(--paper); box-shadow:0 15px 30px rgba(0,0,0,.18); } .nav.open { display:flex; } .nav-cta { border-color:var(--moss); } .menu-toggle { display:block; } .hero { display:block; min-height:850px; } .hero-image-wrap { position:absolute; inset:auto 0 0; height:52%; min-height:410px; } .hero-copy { padding:150px 22px 100px; } .hero-copy h1 { font-size:clamp(3.6rem,16vw,6rem); } .hero-bottom { left:22px; right:22px; } .scroll-label { display:none; } .section-heading,.intro-grid,.join { grid-template-columns:1fr; display:grid; gap:35px; } .section-heading { margin-bottom:35px; } .timeline { margin-top:55px; } .carousel-track { height:65vw; min-height:320px; } .slide figcaption { bottom:9%; } .slide figcaption strong { font-size:25px; } .join { gap:55px; } .footer { align-items:flex-start; flex-direction:column; } }
@media (max-width:480px) { .hero-copy { padding-top:125px; } .hero-stamp { right:4%; bottom:10%; } .hero-stamp strong { font-size:37px; } .section { padding:75px 22px; } .form-row { gap:15px; } .form-header { align-items:flex-start; flex-direction:column; gap:8px; } }