:root { --ink:#1c1b19; --orange:#f56d24; --gold:#ffb528; --cream:#fff8ef; --line:#e9ded2; --muted:#665f58; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#fff; font-family:"DM Sans",sans-serif; line-height:1.5; } a { color:inherit; text-decoration:none; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; padding:.7rem; background:#fff; z-index:3; }
.site-header { max-width:1280px; margin:auto; min-height:85px; padding:12px 4.5vw; display:flex; align-items:center; justify-content:space-between; gap:2rem; } .brand img,.footer-brand img { width:88px; height:60px; object-fit:cover; object-position:center; border-radius:5px; } .navigation { display:flex; align-items:center; gap:1.65rem; font-size:.93rem; font-weight:600; } .navigation > a:not(.button):hover,.text-link:hover { color:var(--orange); } .button { display:inline-flex; align-items:center; justify-content:center; padding:.86rem 1.25rem; border:1px solid var(--orange); border-radius:999px; background:var(--orange); color:#fff; font-size:.92rem; font-weight:700; transition:transform .2s,background .2s; } .button:hover { background:#d95613; transform:translateY(-2px); } .button-small { padding:.67rem 1rem; } .menu-toggle { display:none; }
.hero { min-height:610px; padding:5.4rem 8vw 4.7rem; display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:4rem; overflow:hidden; background:var(--cream); } .eyebrow { margin:0 0 1rem; color:var(--orange); font-size:.74rem; font-weight:700; letter-spacing:.12em; } h1,h2 { margin:0; font-family:Fraunces,serif; line-height:1.04; letter-spacing:-.045em; } h1 { max-width:620px; font-size:clamp(3.5rem,7vw,6.3rem); } h2 { font-size:clamp(2.5rem,4.6vw,4.3rem); } h1 em,h2 em { color:var(--orange); font-style:normal; } .hero-text { max-width:520px; margin:1.7rem 0; color:var(--muted); font-size:1.1rem; } .hero-actions { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; } .text-link { color:var(--ink); font-weight:700; } .text-link span { display:inline-block; margin-left:.35rem; transition:transform .2s; } .text-link:hover span { transform:translateX(4px); } .hero-proof { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:3rem; } .hero-proof span { padding:.42rem .7rem; border:1px solid #edd9c2; border-radius:999px; color:#5c5044; font-size:.78rem; font-weight:600; }
.hero-image-wrap { position:relative; justify-self:center; width:min(100%,415px); } .sun { position:absolute; top:-2.8rem; right:-4.4rem; width:230px; height:230px; border-radius:50%; background:var(--gold); } .hero-image { position:relative; display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; border-radius:210px 210px 18px 18px; filter:saturate(.9); } .image-note { position:absolute; right:-2.4rem; bottom:1.4rem; margin:0; padding:.8rem 1rem; rotate:-6deg; border-radius:5px; background:#fff; box-shadow:0 8px 20px #40230d22; font-family:Fraunces,serif; font-size:1.1rem; }
.section { padding:7rem 8vw; } .section-heading { max-width:720px; } .section-intro { max-width:560px; margin:1.35rem 0 3rem; color:var(--muted); font-size:1.1rem; }.method { background:#fff; }.method-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.method-grid article { padding:1.8rem 2rem 0 0; border-right:1px solid var(--line); }.method-grid article:not(:first-child) { padding-left:2rem; }.method-grid article:last-child { border:0; }.number,.card-kicker,.footer-label { color:var(--orange); font-size:.73rem; letter-spacing:.1em; font-weight:700; }.method h3,.class-card h3 { margin:.8rem 0 .55rem; font-size:1.25rem; }.method p { color:var(--muted); }
.classes { background:var(--ink); color:#fff; }.classes .eyebrow { color:#ffbd81; }.class-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3rem; }.class-card { min-height:235px; padding:1.7rem; border:1px solid #4d4945; display:flex; flex-direction:column; justify-content:flex-start; border-radius:12px; }.class-card p:not(.card-kicker) { color:#d7d1ca; }.class-card a { margin-top:auto; color:#ffbd81; font-size:.9rem; font-weight:700; }.class-card a span { margin-left:.3rem; }.class-card.featured { grid-row:span 2; min-height:486px; background:var(--orange); border-color:var(--orange); }.class-card.featured .card-kicker,.class-card.featured a { color:#fff; }.class-card.featured p:not(.card-kicker) { color:#fff7ed; }.class-card.featured h3 { font-family:Fraunces,serif; font-size:2rem; line-height:1.1; }
.about { display:grid; grid-template-columns:.8fr 1fr; gap:9vw; align-items:center; }.about-image img { display:block; width:min(100%,390px); aspect-ratio:4/5; object-fit:cover; object-position:center top; border-radius:14px; }.about-copy { max-width:590px; }.about-copy p:not(.eyebrow) { color:var(--muted); font-size:1.08rem; }.about-copy .text-link { display:inline-block; margin-top:1.2rem; }
.contact { display:grid; grid-template-columns:1fr .85fr; gap:5rem; background:var(--gold); }.contact h2 { max-width:650px; }.contact > div > p:not(.eyebrow) { max-width:550px; margin:1.3rem 0 2rem; font-size:1.1rem; }.contact-buttons { display:flex; flex-wrap:wrap; gap:.8rem; }.button-dark { border-color:var(--ink); background:var(--ink); }.button-dark:hover { background:#33302d; }.button-outline { border-color:var(--ink); background:transparent; color:var(--ink); }.button-outline:hover { background:#f1a800; }.contact-form { display:grid; gap:.9rem; padding:1.6rem; border-radius:12px; background:#fff9ef; }.contact-form label { display:grid; gap:.35rem; font-size:.85rem; font-weight:700; }.contact-form input,.contact-form textarea { width:100%; padding:.72rem; border:1px solid #d6c6ae; border-radius:5px; color:var(--ink); background:#fff; font:inherit; }.contact-form textarea { resize:vertical; }.contact-form .button { justify-self:start; margin-top:.35rem; }.form-note { margin:0; color:#746551; font-size:.76rem; }
footer { padding:3.5rem 8vw 2rem; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; background:#111; color:#fff; } footer a { display:block; width:max-content; margin:.45rem 0; color:#ddd; font-size:.9rem; } footer a:hover { color:#ffbd81; }.footer-brand { display:flex; align-items:center; gap:1rem; }.footer-brand p { max-width:250px; color:#c3bdb7; font-size:.9rem; }.footer-label { margin:0 0:.75rem; color:#ffbd81; }.copyright { grid-column:1/-1; margin:2rem 0 0; padding-top:1rem; border-top:1px solid #3a3734; color:#aaa29b; font-size:.78rem; }
@media (max-width:800px) { .site-header { padding:10px 6vw; }.menu-toggle { display:flex; align-items:center; gap:.45rem; border:0; background:transparent; font:inherit; font-weight:700; }.menu-toggle span,.menu-toggle span:before,.menu-toggle span:after { display:block; width:18px; height:2px; background:var(--ink); content:""; }.menu-toggle span:before { transform:translateY(-6px); }.menu-toggle span:after { transform:translateY(4px); }.navigation { display:none; position:absolute; z-index:2; top:75px; left:4vw; right:4vw; padding:1.4rem; border-radius:10px; background:#fff; box-shadow:0 12px 30px #0002; flex-direction:column; align-items:stretch; }.navigation.open { display:flex; }.navigation .button { text-align:center; }.hero { min-height:0; grid-template-columns:1fr; gap:3.4rem; padding:4rem 7vw; }.hero-image-wrap { width:min(85%,400px); }.section { padding:5rem 7vw; }.method-grid,.class-grid { grid-template-columns:1fr; }.method-grid { gap:1.5rem; border:0; }.method-grid article,.method-grid article:not(:first-child) { padding:0; border:0; }.class-card.featured { min-height:250px; grid-row:auto; }.about,.contact { grid-template-columns:1fr; gap:3rem; }.about-image img { width:min(100%,360px); }.contact { gap:2.7rem; } footer { grid-template-columns:1fr; padding:3rem 7vw 1.5rem; }.copyright { grid-column:auto; } }