:root{ /* Japandi palette — soft white / beige / natural / warm taupe / moss green / soft black / terracotta / walnut */ --ink:#201B18; --muted:#66503F; /* darkened from #80644F — was 4.77:1 on --tint, a thin margin over the 4.5 AA floor; now 6.6:1 */ --tint:#F5EFE6; --border:#DCC3A5; /* --border is intentionally soft (1.7:1) for decorative dividers and card outlines — fine, since they're not the sole means of identifying a component. Form fields ARE a component boundary (WCAG 1.4.11, needs 3:1), so they get this stronger tone instead. */ --border-strong:#9A8873; --white:#FFFFFF; --accent:#A8502C; --accent-dark:#4B2914; --accent-light:#E2825C; /* pale tint of accent-light, kept for TEXT sitting directly on the hero photo — verified >5:1 against the scrim even at its weakest point and against a bright patch of photo underneath. accent-light itself only clears ~2.3:1 there, so it's reserved for use on solid --ink backgrounds (logo mark, preloader). */ --accent-hero:#F8E0D6; --moss:#4C4026; --natural:#C29E7C; --natural-rgb:194,158,124; --moss-rgb:76,64,38; --max:1120px; } *{box-sizing:border-box;} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px;} .hero :focus-visible,.btn-ghost-light:focus-visible{outline-color:var(--white);} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:64px;} body{ margin:0; font-family:'Outfit',Helvetica,Arial,sans-serif; font-weight:400; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} h1,h2,h3{font-weight:500;margin:0 0 .5em;letter-spacing:-0.01em;} p{margin:0 0 1em;line-height:1.7;color:var(--ink);} strong{font-weight:600;} .wrap{max-width:var(--max);margin:0 auto;padding:0 20px;} .kicker{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); font-weight:500; margin:0 0 10px; } .kicker.light{color:rgba(255,255,255,.88);} .kicker strong{color:var(--accent-dark);font-weight:600;} .kicker.light strong{color:var(--accent-hero);} /* ---------- preloader ---------- */ .preloader{ position:fixed;inset:0;z-index:999; background:var(--white); display:flex;align-items:center;justify-content:center; /* matches (slightly exceeds) the .55s fly-to-logo tween in script.js, so the overlay never turns fully transparent before that tween -- and the "done" class that hides it entirely -- actually finish. */ transition:background-color .6s ease; } .preloader.fade{background-color:rgba(255,255,255,0);} .preloader.done{display:none;} .preloader-mark{width:52px;height:52px;position:relative;z-index:2;} .preloader-mark .pj{fill:var(--ink);} /* ---------- reveal (JS-driven, visible by default for no-JS/SEO) ---------- html.js pre-hides these BEFORE first paint (inline script in , runs before body renders) so there's no visible flash of "shown, then hidden, then animated back in" while script.js/GSAP are still loading. If GSAP/ScrollTrigger never load, script.js forces opacity back to 1 itself (see initScrollReveals), so nothing stays stuck invisible. */ .reveal{opacity:1;} html.js .reveal{opacity:0;} html.js .insta-cell{opacity:0;} /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:var(--white); border-bottom:1px solid var(--border); } .header-inner{ display:flex;align-items:center;gap:12px; height:64px; } .brand{display:flex;align-items:center;flex-shrink:0;min-width:0;} .brand-logo{height:16px;width:auto;max-width:100%;} .main-nav{display:none;} .nav-cta{display:none;} .nav-cta-row{display:none;} .header-call{ display:flex;align-items:center;justify-content:center; width:38px;height:38px;margin-left:auto;flex-shrink:0; border:1px solid var(--border);border-radius:50%;color:var(--ink); transition:background .12s ease, border-color .12s ease; } .header-call svg{width:17px;height:17px;} .header-call:hover{background:var(--tint);} .nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;flex-shrink:0;} .nav-toggle span{width:22px;height:1.6px;background:var(--ink);display:block;transition:transform .2s ease, opacity .2s ease;} .nav-toggle.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg);} .nav-toggle.open span:nth-child(2){opacity:0;} .nav-toggle.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);} .main-nav.open{ display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0; background:var(--white);border-bottom:1px solid var(--border);padding:16px 20px 22px;gap:15px; max-height:calc(100svh - 64px);overflow-y:auto; } .main-nav.open a{font-size:15px;} .main-nav.open .nav-cta-row{display:flex;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid var(--border);} .main-nav.open .nav-cta-row .btn{flex:1;} /* ---------- buttons ---------- .btn is used on both and