:root { --ink:#183a38; --pine:#123431; --cream:#f7f4ed; --sand:#e7ded0; --clay:#c9795d; --mist:#dce8df; --serif:"Playfair Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; } a { color:inherit; } section { scroll-margin-top:82px; } .skip-link { position:absolute; left:1rem; top:-4rem; background:white; padding:.6rem 1rem; z-index:10; } .skip-link:focus { top:1rem; }
.site-header { min-height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 6vw; background:rgba(247,244,237,.94); backdrop-filter:blur(10px); position:sticky; top:0; z-index:10; border-bottom:1px solid transparent; transition:border-color .2s; } .site-header.is-scrolled { border-color:rgba(24,58,56,.12); } .brand { display:inline-flex; align-items:center; gap:.72rem; color:var(--ink); font-size:.92rem; font-weight:600; letter-spacing:.01em; text-decoration:none; white-space:nowrap; } .brand em { color:#74847a; font-size:.72rem; font-style:normal; font-weight:500; } .brand-mark { display:grid; place-items:center; width:33px; height:33px; border:1px solid var(--ink); border-radius:50%; font-family:var(--serif); font-size:.8rem; font-weight:600; }
nav { display:flex; align-items:center; gap:clamp(.8rem,1.6vw,1.7rem); font-size:.84rem; } nav a { text-decoration:none; white-space:nowrap; } nav a:not(.nav-cta):hover, footer a:hover { text-decoration:underline; text-underline-offset:4px; }.nav-cta { border:1px solid var(--ink); padding:.55rem 1rem; } .menu-toggle { display:none; }
.hero { min-height:calc(100vh - 82px); padding:9.5vh 6vw 8vh; position:relative; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; background:var(--cream); } .eyebrow { color:#6a776e; text-transform:uppercase; letter-spacing:.16em; font-size:.69rem; font-weight:700; margin:0 0 1.35rem; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); font-weight:500; line-height:1.08; letter-spacing:-.035em; } h1 { max-width:750px; font-size:clamp(3.2rem,6.1vw,6rem); margin-bottom:1.55rem; } h1 em { color:var(--clay); font-weight:500; } h2 { font-size:clamp(2.25rem,3.8vw,4rem); margin-bottom:1.65rem; } .hero-intro { max-width:510px; font-size:1.16rem; line-height:1.6; color:#46615c; } .hero-actions { display:flex; align-items:center; gap:1.7rem; margin-top:2.25rem; } .button { display:inline-flex; align-items:center; gap:1.5rem; padding:.9rem 1.25rem; background:var(--ink); color:white; font-size:.88rem; font-weight:600; text-decoration:none; transition:transform .2s, background .2s; } .button:hover { transform:translateY(-2px); background:#28534d; } .button span { font-size:1.25rem; line-height:.8; }.text-link { display:inline-flex; gap:.7rem; align-items:center; font-weight:700; font-size:.86rem; text-decoration:none; border-bottom:1px solid #91a49b; padding-bottom:.25rem; } .text-link:hover { border-color:var(--ink); }
.hero-art { position:relative; min-height:500px; } .arch { width:min(31vw,440px); aspect-ratio:.72; position:absolute; bottom:0; left:50%; transform:translateX(-50%); border-radius:220px 220px 0 0; } .arch-back { background:var(--sand); transform:translateX(-44%) rotate(9deg); bottom:20px; }.arch-front { overflow:hidden; background:#b5cabe; }.arch-front:before { content:""; position:absolute; background:#e9dfcb; border-radius:50%; width:56%; aspect-ratio:1; top:14%; left:21%; }.sun { position:absolute; width:31%; aspect-ratio:1; border-radius:50%; background:var(--clay); top:24%; left:33%; }.leaf { position:absolute; display:block; width:16px; height:160px; background:var(--ink); border-radius:100% 0 100% 0; transform-origin:bottom; bottom:-16px; }.leaf-one { transform:rotate(-34deg); left:40%; }.leaf-two { transform:rotate(39deg); left:56%; height:135px; }.hero-art p { position:absolute; bottom:7%; left:4%; z-index:2; margin:0; padding:.55rem .7rem; background:rgba(247,244,237,.9); color:var(--ink); font-family:var(--serif); font-size:1.45rem; line-height:1.15; }.hero-note { position:absolute; bottom:2.5rem; left:6vw; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#54706a; }.hero-note span { width:8px; height:8px; display:inline-block; border-radius:50%; background:var(--clay); margin-right:.55rem; }
.section-grid { padding:9.5rem 12vw; display:grid; grid-template-columns:23% 1fr; gap:4rem; }.section-grid > .eyebrow { padding-top:.6rem; }.intro { background:white; }.intro > div { max-width:820px; }.intro .lead { color:#284b46; font-family:var(--serif); font-size:1.55rem; line-height:1.45; }.intro p:last-child { max-width:700px; color:#50635d; }
.values { max-width:1200px; padding:0 6vw; margin:-2.4rem auto 0; display:grid; grid-template-columns:repeat(3,1fr); position:relative; z-index:2; }.values article { padding:2rem 2.2rem; background:var(--pine); color:#f5f2ea; border-right:1px solid rgba(255,255,255,.18); }.values article:nth-child(2) { background:#1e4a45; }.values article:nth-child(3) { background:#285951; }.values span { display:block; color:#acc7b7; font-size:.7rem; letter-spacing:.1em; }.values h3 { font-family:var(--serif); font-size:1.6rem; font-weight:500; margin:1rem 0 .4rem; }.values p { margin:0; font-size:.87rem; color:#d1dfd6; line-height:1.5; }
.support { padding:9rem 12vw; background:var(--mist); display:grid; grid-template-columns:.9fr 1.1fr; gap:7vw; }.support-heading p:last-child { color:#43605b; max-width:380px; }.support-list { border-top:1px solid #a8c0b3; }.support-list div { display:flex; gap:1.5rem; padding:1.1rem .1rem; border-bottom:1px solid #a8c0b3; font-family:var(--serif); font-size:1.45rem; }.support-list span { color:#758f7d; font-family:var(--sans); font-size:.71rem; padding-top:.35rem; }
.method { padding:10rem 12vw; display:grid; grid-template-columns:.9fr 1fr; gap:8vw; align-items:center; background:white; }.method-art { position:relative; min-height:370px; background:#edf0e8; overflow:hidden; }.circle { position:absolute; width:270px; height:270px; border-radius:50%; background:#d9b7a2; top:16%; left:25%; }.line { position:absolute; width:180%; height:1px; background:var(--ink); left:-35%; transform-origin:left center; }.line-a { top:70%; transform:rotate(-35deg); }.line-b { top:45%; transform:rotate(52deg); }.line-c { top:80%; transform:rotate(13deg); }.method-copy p:not(.eyebrow) { color:#50635d; max-width:560px; }.method-copy .text-link { margin-top:1.2rem; }
.sessions { background:var(--cream); }.session-details { display:grid; grid-template-columns:repeat(2,1fr); gap:0 3rem; max-width:820px; }.session-details article { border-top:1px solid #bdc2b9; padding:1.25rem 0 1.5rem; }.session-details h3 { margin-bottom:.3rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; }.session-details p { color:#52645d; margin:0; font-size:.92rem; line-height:1.55; }.session-details strong { color:var(--ink); font-weight:700; }
.first-session { background:var(--clay); color:#fffaf4; padding:8rem 12vw; display:grid; grid-template-columns:1fr 1fr; gap:8vw; }.first-session .eyebrow { color:#ffe0cf; }.first-session h2 { max-width:480px; }.first-session ol { list-style:none; margin:0; padding:0; }.first-session li { display:flex; gap:1rem; padding:0 0 1.4rem; margin-bottom:1.4rem; border-bottom:1px solid rgba(255,255,255,.34); }.first-session li span { display:grid; place-items:center; flex:0 0 27px; height:27px; border:1px solid white; border-radius:50%; font-size:.7rem; font-weight:700; }.first-session li p { margin:0; font-size:.91rem; line-height:1.55; }.first-session li strong { font-size:1rem; }
.credentials { padding:8rem 12vw; background:#fff; display:grid; grid-template-columns:23% 1fr; gap:4rem; }.credentials > div { max-width:820px; }.credentials p:not(.eyebrow) { max-width:700px; color:#50635d; }.credentials h2 { font-size:clamp(2.2rem,3.4vw,3.5rem); }.affiliations { padding:7rem 12vw; background:var(--mist); }.affiliations-heading { max-width:650px; margin-bottom:3rem; }.affiliations-heading h2 { margin:0; font-size:clamp(2.2rem,3.4vw,3.5rem); }.affiliation-grid { display:grid; grid-template-columns:1.25fr repeat(3,1fr); gap:1px; background:#aac2b5; border:1px solid #aac2b5; }.affiliation-card { min-height:205px; display:flex; flex-direction:column; justify-content:space-between; padding:1.6rem; background:#f8f9f5; }.affiliation-card img { display:block; width:100%; max-width:225px; height:80px; object-fit:contain; object-position:left center; mix-blend-mode:multiply; }.affiliation-card .baatn-logo { width:100%; max-width:225px; height:88px; image-rendering:auto; }.affiliation-card h3 { margin:0; color:var(--ink); font-family:var(--serif); font-size:2.2rem; font-weight:500; letter-spacing:-.04em; }.affiliation-card p { margin:1rem 0 0; color:#4e625a; font-size:.79rem; font-weight:600; line-height:1.5; }
.contact { background:var(--pine); color:#f8f5ef; padding:9rem 12vw; display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; }.contact .eyebrow { color:#b7d1bf; }.contact h2 { max-width:640px; }.contact-copy > p:not(.eyebrow) { color:#d3e0d7; max-width:550px; }.button-light { margin-top:1.3rem; background:#f6f3eb; color:var(--pine); }.button-light:hover { background:#fff; }.contact aside { border-left:1px solid rgba(255,255,255,.3); padding-left:2rem; color:#f5f2ea; }.contact aside p { line-height:1.8; }.contact .aside-label { margin-bottom:.35rem; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#b7d1bf; font-weight:700; }.contact hr { border:0; border-top:1px solid rgba(255,255,255,.3); margin:1.5rem 0; }.back-to-top { position:fixed; right:1.4rem; bottom:1.4rem; display:flex; align-items:center; gap:.45rem; padding:.62rem .8rem; border:1px solid rgba(24,58,56,.22); background:rgba(255,255,255,.94); color:var(--ink); box-shadow:0 5px 18px rgba(18,52,49,.13); font-size:.75rem; font-weight:700; text-decoration:none; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .2s, transform .2s; z-index:8; }.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }.back-to-top:hover { background:var(--ink); color:white; }
footer { background:#0d2926; color:#c5d5ca; padding:2rem 6vw; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-size:.75rem; } footer .brand { color:#f3f2ed; } footer .brand-mark { border-color:#b9cfc0; } footer p { margin:0; } footer a { text-decoration:none; }
@media (max-width:920px) { section { scroll-margin-top:70px; }.site-header { min-height:70px; padding:0 1.5rem; } nav { display:none; position:absolute; top:70px; left:0; right:0; background:var(--cream); padding:1.25rem 1.5rem 1.5rem; box-shadow:0 12px 12px rgba(0,0,0,.05); flex-direction:column; align-items:flex-start; gap:1rem; } nav.is-open { display:flex; }.menu-toggle { display:grid; gap:5px; border:0; background:none; padding:.5rem; }.menu-toggle i { width:22px; height:1px; display:block; background:var(--ink); } }
@media (max-width:760px) { .hero { min-height:auto; padding:4.6rem 1.5rem 0; grid-template-columns:1fr; }.hero h1 { font-size:clamp(2.75rem,13vw,4.2rem); }.hero-art { min-height:350px; margin-top:3rem; }.arch { width:235px; }.hero-art p { left:10%; }.hero-note { position:static; padding:1.25rem 0; }.section-grid,.support,.method,.first-session,.credentials,.affiliations,.contact { padding:5rem 1.5rem; grid-template-columns:1fr; gap:2rem; }.section-grid > .eyebrow { padding:0; }.values { padding:0 1.5rem; margin:-1.4rem auto 0; grid-template-columns:1fr; }.values article { border-right:0; border-bottom:1px solid rgba(255,255,255,.15); padding:1.5rem; }.support-list div { font-size:1.22rem; }.method-art { min-height:290px; }.circle { width:200px; height:200px; }.session-details { grid-template-columns:1fr; }.first-session { gap:2.5rem; }.credentials { gap:1rem; }.affiliation-grid { grid-template-columns:1fr 1fr; }.affiliation-card { min-height:165px; padding:1.2rem; }.affiliation-card img { height:60px; }.affiliation-card .baatn-logo { height:60px; }.contact aside { border-left:0; border-top:1px solid rgba(255,255,255,.3); padding:1.5rem 0 0; }.back-to-top { right:1rem; bottom:1rem; } footer { padding:2rem 1.5rem; align-items:flex-start; flex-direction:column; } }