:root { color-scheme: light; }
html { scroll-padding-top: 5rem; }
body { overflow-x: hidden; background-color: #f8f1ec; }
::selection { background: #4b2c2c; color: #fff; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; border-radius: 999px; background: #fff; color: #4b2c2c; padding: .75rem 1.25rem; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 1rem; }
.nav-scrolled { border-color: rgba(255,255,255,.1) !important; background: rgba(75,44,44,.94); color: #fff; box-shadow: 0 8px 30px rgba(75,44,44,.18); backdrop-filter: blur(18px); }
.menu-open { color: #fff; }
.nav-link { position: relative; padding: .5rem 0; font-size: .8rem; font-weight: 600; color: rgba(75,44,44,.72); transition: color .25s; }
.nav-link::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; content: ''; background: #efd4e5; transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.nav-link:hover { color: #4b2c2c; }
.nav-scrolled .nav-link { color: rgba(255,255,255,.72); }
.nav-scrolled .nav-link:hover { color: #fff; }
.nav-scrolled .nav-cta { background: #efd4e5; color: #4b2c2c; }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.mobile-menu { overflow-y: auto; }
.mobile-link { display: flex; align-items: baseline; gap: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.1); padding: 1.1rem 0; font-family: Montserrat, sans-serif; font-size: clamp(1.75rem, 9vw, 2.75rem); font-weight: 700; letter-spacing: -.04em; }
.mobile-link span { width: 1.5rem; font-size: .6rem; letter-spacing: .18em; color: #efd4e5; }
.paper-grain { pointer-events: none; opacity: .32; background-image: radial-gradient(rgba(75,44,44,.12) .6px, transparent .8px), radial-gradient(rgba(184,148,94,.1) .6px, transparent .8px); background-position: 0 0, 4px 4px; background-size: 8px 8px; }
.hero-organic-glow { background: radial-gradient(circle at 83% 32%, rgba(239,212,229,.75), transparent 25rem), radial-gradient(circle at 10% 85%, rgba(184,148,94,.13), transparent 24rem); }
.hero-torn-paper { position: relative; width: min(100%, 39rem); margin-left: -.75rem; padding: 2rem 2rem 2.2rem; background: #efd4e5; clip-path: polygon(0 5%, 3% 3%, 7% 4.5%, 12% 2.5%, 18% 4%, 25% 2%, 31% 3.5%, 38% 1.5%, 45% 3%, 53% 2%, 60% 4%, 68% 2%, 76% 3.5%, 84% 1.5%, 92% 4%, 100% 2%, 99% 95%, 94% 97%, 88% 95%, 82% 98%, 74% 96%, 67% 99%, 58% 96%, 50% 98%, 42% 95%, 34% 98%, 26% 96%, 18% 99%, 10% 96%, 4% 98%, 1% 95%); filter: drop-shadow(0 18px 22px rgba(75,44,44,.12)); }
.hero-torn-paper::before { position: absolute; top: -.15rem; left: 42%; height: 2.1rem; width: 7.5rem; content: ''; background: rgba(255,253,250,.68); transform: rotate(-2deg); box-shadow: 0 2px 8px rgba(75,44,44,.06); }
.hero-sparkle { position: absolute; color: #b8945e; line-height: 1; }
.hero-sparkle-one { top: 2.2rem; right: 1.9rem; font-size: 1.35rem; }
.hero-sparkle-two { right: 3.8rem; bottom: 2.1rem; font-size: 1rem; }
.botanical-sprig { position: absolute; z-index: 0; width: 15rem; height: 25rem; opacity: .14; transform: rotate(-22deg); }
.botanical-sprig-left { left: -5rem; bottom: -4rem; }
.botanical-sprig::before { position: absolute; left: 50%; top: 0; width: 2px; height: 100%; content: ''; background: #4b2c2c; transform: rotate(10deg); transform-origin: bottom; }
.botanical-sprig span { position: absolute; width: 7rem; height: 3.2rem; border: 1.5px solid #4b2c2c; border-radius: 100% 0 100% 0; }
.botanical-sprig span:nth-child(1) { left: 48%; top: 12%; transform: rotate(26deg); }
.botanical-sprig span:nth-child(2) { left: 8%; top: 32%; transform: rotate(202deg); }
.botanical-sprig span:nth-child(3) { left: 47%; top: 52%; transform: rotate(18deg); }
.botanical-sprig span:nth-child(4) { left: 9%; top: 72%; transform: rotate(196deg); }
.portrait-frame { transform: rotate(1.4deg); }
.collage-photo { position: relative; clip-path: polygon(1% 1.5%, 98% 0, 99.5% 97.5%, 2% 100%, 0 57%); box-shadow: 0 32px 65px -32px rgba(75,44,44,.42); }
.collage-photo::before { position: absolute; top: .55rem; left: 50%; z-index: 3; height: 2.25rem; width: 7.5rem; content: ''; background: rgba(248,241,236,.72); transform: translateX(-50%) rotate(-2deg); box-shadow: 0 2px 9px rgba(75,44,44,.1); }
.paper-note { background: #fffdfa; clip-path: polygon(1% 5%, 96% 0, 100% 94%, 4% 100%, 0 55%); transform: rotate(-2deg); }
.portrait-fallback { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 65% 20%, rgba(239,212,229,.3), transparent 33%), linear-gradient(150deg, #795858, #4b2c2c 60%, #352020); }
.portrait-monogram { transform: translateY(-8%); font-family: 'Playfair Display', serif; font-size: clamp(6rem, 16vw, 10rem); font-style: italic; color: rgba(255,255,255,.12); }
.manifesto-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; clip-path: polygon(1% 3%, 7% 1%, 15% 2%, 25% 0, 36% 2%, 48% 1%, 58% 3%, 69% 1%, 81% 2%, 92% 0, 100% 3%, 98% 97%, 89% 99%, 78% 97%, 67% 100%, 56% 98%, 45% 100%, 34% 97%, 22% 99%, 10% 97%, 1% 99%); box-shadow: 0 24px 55px -30px rgba(75,44,44,.38); }
.manifesto-photo::after { position: absolute; inset: 0; content: ''; background: linear-gradient(to top, rgba(75,44,44,.65), transparent 55%); }
.manifesto-photo figcaption { position: absolute; right: 1.25rem; bottom: 1.1rem; left: 1.25rem; z-index: 1; color: #fff; font-family: Lato, sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .75rem; font-size: .68rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.eyebrow span { display: block; height: 1px; width: 2.5rem; background: currentColor; opacity: .75; }
.torn-panel { position: relative; margin: -1rem; padding: 3.25rem 3rem; background: rgba(239,212,229,.72); clip-path: polygon(0 3%, 5% 1%, 11% 3%, 18% 1%, 27% 2.5%, 36% 0, 45% 2%, 54% 1%, 64% 3%, 74% 1%, 84% 2.5%, 93% 0, 100% 2%, 99% 96%, 92% 98%, 84% 96%, 76% 99%, 65% 97%, 56% 100%, 47% 97%, 38% 99%, 29% 96%, 20% 99%, 10% 97%, 1% 100%); }
.panel-sparkle { position: absolute; top: 2rem; right: 2.5rem; color: #b8945e; font-size: 1.2rem; }
.pillar-card { min-height: 26rem; border: 1px solid rgba(75,44,44,.08); border-radius: .6rem; background: #fffdfa; padding: 2rem; box-shadow: 0 24px 60px -40px rgba(75,44,44,.2); transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease; }
.pillar-card:hover { transform: translateY(-8px); border-color: rgba(75,44,44,.45); box-shadow: 0 35px 70px -35px rgba(75,44,44,.3); }
.pillar-number { display: flex; height: 3rem; width: 3rem; align-items: center; justify-content: center; border-radius: 999px; background: #efd4e5; font-size: .7rem; font-weight: 700; color: #4b2c2c; }
.audience-list { border-top: 1px solid rgba(255,255,255,.15); }
.audience-item { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.15); padding: 1.4rem 0; transition: padding .3s, color .3s; }
.audience-item span { font-size: .65rem; font-weight: 700; letter-spacing: .12em; color: #efd4e5; }
.audience-item h3 { font-family: Montserrat, sans-serif; font-size: clamp(1.2rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -.025em; }
.audience-item svg { height: 1rem; width: 1rem; color: rgba(255,255,255,.35); transition: transform .3s, color .3s; }
.audience-item:hover { padding-left: .75rem; color: #f8f1ec; }
.audience-item:hover svg { transform: rotate(45deg); color: #efd4e5; }
.service-card { position: relative; border: 1px solid rgba(75,44,44,.08); border-radius: .6rem; background: #fffdfa; padding: 1.35rem 1.35rem 2rem; box-shadow: 0 24px 60px -40px rgba(75,44,44,.2); transition: transform .4s ease, box-shadow .4s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 35px 70px -35px rgba(75,44,44,.3); }
.service-photo { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 1rem; background: #efd4e5; }
.service-photo img { transition: transform .6s ease; }
.service-card:hover .service-photo img { transform: scale(1.045); }
.service-icon { display: flex; height: 3.5rem; width: 3.5rem; align-items: center; justify-content: center; border-radius: 1rem; background: #efd4e5; color: #4b2c2c; transition: background .3s, color .3s; }
.service-icon svg { height: 1.35rem; width: 1.35rem; }
.service-card:hover .service-icon { background: #4b2c2c; color: #fff; }
.service-link { margin-top: 2rem; display: inline-flex; align-items: center; gap: .65rem; border-bottom: 1px solid rgba(21,24,20,.2); padding-bottom: .35rem; font-size: .8rem; font-weight: 700; transition: color .25s, border-color .25s; }
.service-link svg { height: 1rem; width: 1rem; transition: transform .25s; }
.service-link:hover { border-color: #4b2c2c; color: #4b2c2c; }
.service-link:hover svg { transform: translateX(.25rem); }
.about-photo { border: .85rem solid #fffdfa; border-radius: .5rem !important; box-shadow: 0 30px 70px -38px rgba(75,44,44,.45); transform: rotate(-1deg); }
.contact-glow { background: radial-gradient(circle at 12% 15%, rgba(239,212,229,.16), transparent 24rem), radial-gradient(circle at 90% 85%, rgba(248,241,236,.1), transparent 28rem); }
.social-link { display: flex; height: 2.75rem; width: 2.75rem; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: rgba(255,255,255,.7); transition: border-color .25s, background .25s, color .25s, transform .25s; }
.social-link svg { height: 1rem; width: 1rem; }
.social-link:hover { transform: translateY(-3px); border-color: #efd4e5; background: #efd4e5; color: #4b2c2c; }
.field-group label { display: block; margin-bottom: .6rem; font-size: .75rem; font-weight: 700; }
.field-group input, .field-group select, .field-group textarea { width: 100%; border: 1px solid rgba(75,44,44,.14); border-radius: .8rem; background: #f8f1ec; padding: .85rem 1rem; color: #5c5c5c; outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.field-group input::placeholder, .field-group textarea::placeholder { color: rgba(92,92,92,.55); }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus { border-color: #4b2c2c; background: #fff; box-shadow: 0 0 0 3px rgba(75,44,44,.12); }
.field-group .field-invalid { border-color: #b42318; background: #fff7f6; }
.field-error { min-height: 1.15rem; padding-top: .3rem; font-size: .7rem; color: #b42318; }
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 1023px) { .portrait-frame { transform: none; } .pillar-card { min-height: 22rem; } .hero-torn-paper { margin-left: -.25rem; } }
@media (max-width: 639px) { .hero-torn-paper { padding: 1.7rem 1.35rem 1.9rem; } .torn-panel { margin: 0; padding: 2.75rem 1.5rem; } .paper-note { left: .25rem !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; } }