:root { --cream:#f7f1e8; --charcoal:#171717; --orange:#d95c32; --peach:#f3d4c1; --sage:#7b8062; --line:rgba(23,23,23,.16); --serif:"Instrument Serif", Georgia, serif; --sans:"DM Sans", sans-serif; --hero-sans:"Google Sans Flex", "DM Sans", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:clip; color:var(--charcoal); background:linear-gradient(150deg,#f2d7c6 0%,#f7f1e8 42%,#d9ddc6 100%); font-family:var(--sans); font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.container { width:min(100% - 80px, 1320px); margin:0 auto; }
.section-space { padding:clamp(64px, 7vw, 112px) 0 clamp(80px, 9vw, 140px); }
.site-header { position:fixed; z-index:20; top:0; width:100%; transition:background .3s, box-shadow .3s; }
.site-header.is-scrolled { background:rgba(247,241,232,.9); box-shadow:0 1px 0 rgba(23,23,23,.08); backdrop-filter:blur(16px); }
.nav { min-height:88px; display:flex; align-items:center; justify-content:space-between; }
.brand { font-size:clamp(18px,1.7vw,23px); font-weight:700; letter-spacing:-.03em; line-height:1; white-space:nowrap; }.brand span { color:var(--orange); }
.nav-links { display:flex; align-items:center; gap:32px; font-size:14px; font-weight:600; }.nav-links > a:not(.nav-cta) { position:relative; }.nav-links > a:not(.nav-cta)::after { content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--charcoal); transition:width .25s; }.nav-links > a:hover::after { width:100%; }
.nav-cta { background:var(--orange); color:#fff; padding:12px 19px; border-radius:999px; }.nav-cta span { padding-left:5px; }.menu-toggle { display:none; }
.hero { min-height:930px; min-height:100svh; padding:0; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(135deg,#f9ede0 0%,var(--cream) 42%,#f8dfc5 100%); }.hero-inner { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; }
.eyebrow { margin:0 0 20px; color:var(--orange); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }.hero-kicker { margin-bottom:26px; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.06em; }.hero-title { margin:0; max-width:1080px; font-family:var(--hero-sans); font-size:clamp(68px,8vw,128px); line-height:.88; font-weight:500; letter-spacing:.005em; text-transform:none; }.hero-title em,h2 em { font-family:var(--serif); font-weight:400; text-transform:none; letter-spacing:-.045em; }.hero-title em { color:var(--orange); letter-spacing:0; }
.hero-intro { margin:38px auto 0; max-width:680px; }.hero-intro p,.lead { font-size:clamp(17px, 1.55vw, 21px); line-height:1.55; }.hero-intro p { color:#424242; }.hero-actions { display:flex; justify-content:center; gap:25px; align-items:center; margin-top:27px; }.button { display:inline-flex; align-items:center; gap:12px; border-radius:999px; padding:16px 23px; font-size:14px; font-weight:700; transition:transform .2s, background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--orange); color:#fff; }.button-primary:hover { background:#bd4823; }.text-link { display:inline-flex; gap:10px; align-items:center; font-size:14px; font-weight:700; text-decoration:underline; text-underline-offset:5px; }.text-link span { transition:transform .2s; }.text-link:hover span { transform:translateX(4px); }
.story-panel { position:relative; z-index:1; margin-top:-44px; border:1px solid rgba(255,255,255,.64); border-radius:32px 32px 0 0; box-shadow:0 -14px 42px rgba(67,43,30,.08); backdrop-filter:blur(14px); }
.story-panel:nth-of-type(3) { z-index:2; }.story-panel:nth-of-type(4) { z-index:3; }.story-panel:nth-of-type(5) { z-index:4; }.story-panel:nth-of-type(6) { z-index:5; }
.problem { background:linear-gradient(120deg,rgba(18,18,18,.99),rgba(34,28,25,.98) 55%,rgba(30,29,24,.99)); color:var(--cream); }.split-heading { display:grid; grid-template-columns:1.1fr 1fr; align-items:end; }.section-heading h2 { margin:0; font-size:clamp(48px, 6.1vw, 92px); line-height:.97; letter-spacing:.005em; text-transform:uppercase; }.section-heading h2 em { color:var(--orange); letter-spacing:0; }.problem .split-heading { display:block; text-align:center; }.problem .section-heading h2 { font-family:var(--hero-sans); font-weight:500; text-transform:none; }.problem .lead { max-width:720px; margin:30px auto 0; color:#d9d1c9; }.problem-cards { display:grid; grid-template-columns:repeat(4,1fr); align-items:end; gap:16px; margin-top:68px; }.problem-card { min-height:270px; display:flex; flex-direction:column; padding:27px; border:1px solid rgba(255,252,247,.34); border-radius:8px; background:linear-gradient(145deg,rgba(255,252,247,.17),rgba(255,252,247,.08)); box-shadow:0 18px 34px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(18px); }.problem-card h3 { max-width:245px; margin:0 0 18px; font-size:clamp(23px,2vw,31px); line-height:1.05; letter-spacing:.005em; }.problem-card p { max-width:245px; margin:0; color:#e1dad3; font-size:15px; line-height:1.48; }.problem-card-featured { min-height:300px; margin-bottom:-10px; border:2px solid rgba(255,252,247,.88); background:linear-gradient(145deg,#fb7744,#dd4b25 66%,#c63d20); box-shadow:0 23px 42px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.3); }.problem-card-featured.reveal { transform:translateY(18px) rotate(4deg); }.problem-card-featured.reveal.is-visible { transform:rotate(4deg); }.problem-card-featured h3,.problem-card-featured p { color:#fff; }
.solution { background:rgba(247,241,232,.9); }.solution .section-heading h2,.ecosystem .section-heading h2 { font-family:var(--hero-sans); font-weight:500; }.solution .section-heading h2 { text-transform:none; }.centered { text-align:center; max-width:920px; margin:auto; }.centered .lead { max-width:670px; margin:28px auto 0; }.solution-showcase { margin-top:74px; padding:26px; border:1px solid rgba(255,255,255,.8); border-radius:28px; background:linear-gradient(135deg,rgba(243,212,193,.54),rgba(255,252,247,.46)); box-shadow:0 25px 48px rgba(103,73,47,.12),inset 0 1px 0 rgba(255,255,255,.72); backdrop-filter:blur(22px); }.solution-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.solution-card { min-height:240px; padding:27px; border:1px solid rgba(255,255,255,.82); border-radius:8px; background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,252,247,.75)); box-shadow:0 17px 30px rgba(89,64,45,.11),inset 0 1px 0 rgba(255,255,255,.92); backdrop-filter:blur(16px); }.solution-card h3 { margin:0 0 14px; font-size:27px; line-height:1.05; letter-spacing:.005em; }.solution-card p { max-width:245px; margin:0; color:#5d5752; font-size:15px; line-height:1.5; }
.ecosystem { background:rgba(238,230,220,.88); }.ecosystem .section-heading h2 { text-transform:none; }.ecosystem #ecosystem-title { max-width:1200px; margin-inline:auto; }.ecosystem #ecosystem-title > span { white-space:nowrap; }.ecosystem .lead { max-width:670px; margin:28px auto 0; }.ecosystem-visual { width:min(100%,760px); margin:62px auto 0; }.ecosystem-visual img { display:block; width:100%; height:auto; }
.about-story { border-top:1px solid rgba(23,23,23,.12); }.about-story-grid { display:grid; grid-template-columns:minmax(250px,.7fr) minmax(0,1fr); gap:clamp(50px,10vw,180px); align-items:start; }.about-story-label { padding-top:48px; }.about-story-label h2 { margin:0; font-family:var(--hero-sans); font-size:clamp(46px,5vw,76px); line-height:.92; font-weight:500; letter-spacing:.005em; text-transform:none; }.about-story-label h2 em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }.about-story-copy { max-width:650px; padding-top:48px; }.about-statement { max-width:620px; margin:0 0 28px; font-family:var(--hero-sans); font-size:clamp(30px,3.5vw,52px); line-height:1.02; font-weight:500; letter-spacing:.005em; }.about-statement em { color:var(--orange); font-family:var(--serif); font-weight:400; letter-spacing:0; }.about-story-copy > p:last-child { max-width:590px; margin:0; color:#5d5752; font-size:17px; line-height:1.65; }.about-believe { background:rgba(247,241,232,.9); }.about-work { color:var(--cream); background:linear-gradient(120deg,rgba(18,18,18,.99),rgba(34,28,25,.98) 55%,rgba(30,29,24,.99)); }.about-work .about-story-copy > p:last-child { color:#d9d1c9; }.about-building { background:rgba(238,230,220,.88); }.about-rooted { background:rgba(214,208,185,.88); }
.construction { background:rgba(214,208,185,.88); }.construction-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:75px; }.construction .lead { margin:29px 0; }.construction-flow { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px; }.construction-flow div { width:112px; height:112px; padding:13px; background:rgba(247,241,232,.68); border:1px solid rgba(23,23,23,.12); display:flex; flex-direction:column; justify-content:space-between; border-radius:4px; }.construction-flow div:nth-of-type(2),.construction-flow div:nth-of-type(5) { transform:translateY(36px); }.construction-flow span { font-size:11px; color:var(--orange); font-weight:700; }.construction-flow strong { font-size:15px; line-height:1; letter-spacing:-.04em; }.construction-flow i { width:16px; height:1px; background:var(--charcoal); opacity:.45; }
.approach { background:rgba(247,241,232,.9); }.method-list { margin-top:78px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }.method-item { min-height:250px; padding:28px 26px; border-right:1px solid var(--line); }.method-item:first-child { border-left:1px solid var(--line); }.method-item h3 { margin:60px 0 10px; font-size:27px; }.method-item p { max-width:215px; margin:0; font-size:14px; }
.contact { position:relative; overflow:hidden; padding-top:clamp(54px,5.5vw,88px); background:var(--peach); }.contact::before,.contact::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(217,92,50,.25); }.contact::before { width:620px; height:620px; right:-190px; bottom:-310px; }.contact::after { width:380px; height:380px; right:5%; bottom:-280px; }.contact-inner { position:relative; z-index:1; text-align:center; max-width:1120px; }.contact #contact-title { margin-bottom:0; font-size:clamp(50px,6vw,92px); line-height:.9; letter-spacing:.005em; }.contact #contact-title > span { font-family:var(--hero-sans); font-weight:500; white-space:nowrap; }.contact #contact-title em { color:var(--orange); }.contact .lead { max-width:640px; margin:18px auto 24px; }.button-dark { background:var(--charcoal); color:var(--cream); }.button-dark:hover { background:#303030; }.contact small { display:block; margin-top:19px; font-size:12px; }
.footer { padding:59px 0 32px; background:var(--charcoal); color:var(--cream); }.footer-grid { display:grid; grid-template-columns:1.4fr 1fr .75fr; gap:35px; }.footer p { max-width:280px; margin:21px 0 0; color:#beb8b2; font-size:13px; }.footer .footer-tagline { margin-top:21px; color:var(--cream); font-size:15px; font-weight:600; }.footer .footer-tagline + p { margin-top:7px; }.footer-links,.footer-contact { display:flex; flex-direction:column; align-items:flex-start; gap:11px; font-size:13px; }.footer-links h4,.footer-contact h4 { margin:0 0 7px; color:var(--cream); font-size:18px; letter-spacing:-.02em; }.footer-links a:hover,.footer-contact a:hover,.footer-meta a:hover { color:var(--peach); }.footer-contact { gap:10px; }.footer-contact > span { color:#bcb8b2; }.footer-meta { display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:35px; color:#bcb8b2; font-size:12px; }.footer-meta a { color:var(--cream); }
.consultation-overlay { position:fixed; inset:0; z-index:30; background:rgba(23,23,23,.45); backdrop-filter:blur(2px); opacity:0; transition:opacity .3s ease; }.consultation-overlay.is-open { opacity:1; }
.consultation-panel { position:fixed; top:0; right:0; z-index:31; width:min(480px,100%); height:100%; padding:36px 32px; overflow-y:auto; background:var(--cream); box-shadow:-24px 0 60px rgba(23,23,23,.18); transform:translateX(100%); transition:transform .35s ease; }.consultation-panel.is-open { transform:translateX(0); }
.consultation-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.consultation-panel-head h2 { font-size:clamp(28px,3vw,36px); line-height:1.05; letter-spacing:-.03em; }
.consultation-close { flex:0 0 auto; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:transparent; font-size:22px; line-height:1; cursor:pointer; transition:background .2s; }.consultation-close:hover { background:rgba(23,23,23,.06); }
.consultation-sub { margin:14px 0 28px; color:#5d5752; font-size:15px; }
.consultation-form { display:flex; flex-direction:column; gap:20px; }
.consultation-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-field { display:flex; flex-direction:column; gap:8px; }.form-field label { font-size:13px; font-weight:600; }
.form-field input,.form-field textarea { width:100%; padding:12px 14px; font:inherit; font-size:14px; color:var(--charcoal); background:#fffcf7; border:1px solid var(--line); border-radius:10px; resize:vertical; transition:border-color .2s; }.form-field input:focus,.form-field textarea:focus { outline:none; border-color:var(--orange); }
.consultation-submit { justify-content:center; width:100%; border:none; cursor:pointer; }
.consultation-contact { margin-top:32px; padding-top:28px; border-top:1px solid var(--line); }
.consultation-contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.consultation-contact-card { display:grid; grid-template-columns:18px minmax(0,1fr); align-items:center; gap:6px 9px; padding:14px; background:#fffcf7; border:1px solid var(--line); border-radius:12px; transition:border-color .2s, transform .2s; }
a.consultation-contact-card:hover { border-color:var(--orange); transform:translateY(-2px); }
.consultation-contact-card .card-icon { width:18px; height:18px; color:var(--orange); }
.consultation-contact-card .card-label { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#8a827b; }
.consultation-contact-card .card-value { grid-column:1 / -1; font-size:13px; font-weight:500; line-height:1.4; color:var(--charcoal); overflow-wrap:anywhere; }
@media (max-width:560px) { .consultation-panel { padding:28px 22px; }.consultation-form-grid { grid-template-columns:1fr; }.consultation-contact-grid { grid-template-columns:1fr; } }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease, transform .65s ease; }.reveal.is-visible { opacity:1; transform:none; }.hero .reveal { animation:enter .7s both; }.hero .hero-title { animation-delay:.1s; }.hero .hero-intro { animation-delay:.22s; }@keyframes enter { to { opacity:1; transform:none; } }
@media (max-width:640px) { .about-story-grid { grid-template-columns:1fr; gap:42px; }.about-story-label { padding-top:0; }.about-story-copy { padding-top:0; }.about-statement { font-size:clamp(31px,9vw,44px); }.about-story-copy > p:last-child { font-size:16px; } }
:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:900px) { .container { width:min(100% - 48px, 1320px); }.hero { min-height:820px; }.hero-intro { margin-left:30%; }.ecosystem-layout,.construction-layout { grid-template-columns:1fr; }.ecosystem-map { width:100%; margin:20px auto 0; }.construction-flow { justify-content:flex-start; }.split-heading { grid-template-columns:1fr; gap:30px; }.problem .lead { margin:0; }.problem-cards,.solution-cards { grid-template-columns:repeat(2,1fr); margin-top:65px; }.solution-showcase { margin-top:65px; padding:20px; }.problem-card-featured { margin-bottom:0; }.footer-grid { grid-template-columns:1fr 1fr; }.footer-meta { align-items:flex-start; gap:20px; } }
@media (max-width:640px) { .container { width:min(100% - 40px, 1320px); }.nav { min-height:72px; }.menu-toggle { display:grid; width:40px; height:40px; padding:8px; border:0; background:none; place-content:center; gap:6px; cursor:pointer; }.menu-toggle span { width:23px; height:2px; background:var(--charcoal); transition:transform .2s; }.menu-toggle.is-open span:first-child { transform:translateY(4px) rotate(45deg); }.menu-toggle.is-open span:last-child { transform:translateY(-4px) rotate(-45deg); }.nav-links { position:absolute; top:72px; left:20px; right:20px; display:none; align-items:stretch; flex-direction:column; gap:0; padding:12px; background:#fffcf7; border:1px solid rgba(23,23,23,.12); box-shadow:0 15px 30px rgba(23,23,23,.1); }.nav-links.is-open { display:flex; }.nav-links > a { padding:13px 10px; }.nav-cta { margin-top:5px; text-align:center; }.hero { min-height:840px; padding-top:0; }.hero-title { font-size:clamp(36px, 10vw, 56px); letter-spacing:.005em; }.hero-intro { margin:37px 0 0; }.hero-intro p,.lead { font-size:16px; }.hero-actions { gap:18px; flex-wrap:wrap; }.story-panel { margin-top:-24px; border-radius:22px 22px 0 0; box-shadow:0 -9px 26px rgba(67,43,30,.07); }.section-space { padding:68px 0 92px; }.section-heading h2 { font-size:clamp(46px, 13vw, 66px); }.solution .section-heading h2,.ecosystem .section-heading h2 { font-size:clamp(36px, 10vw, 48px); }.problem .section-heading h2 { font-size:min(6.5vw,28px); line-height:1; white-space:nowrap; }.problem .section-heading h2 em { display:block; white-space:normal; }.ecosystem #ecosystem-title > span { white-space:normal; }.ecosystem-visual { margin-top:42px; }.problem-cards,.solution-cards { grid-template-columns:1fr; margin-top:52px; }.solution-showcase { margin-top:52px; padding:12px; border-radius:20px; }.problem-card { min-height:220px; padding:24px; }.problem-card h3 { margin:0 0 18px; font-size:28px; }.problem-card-featured { min-height:240px; transform:none; }.problem-card-featured.reveal,.problem-card-featured.reveal.is-visible { transform:none; }.solution-card { min-height:235px; padding:24px; }.solution-card h3 { margin:0 0 14px; }.ecosystem-map { min-height:390px; transform:scale(.9); transform-origin:center; margin-top:-10px; }.construction-layout { gap:35px; }.construction-flow { gap:8px; }.construction-flow div { width:94px; height:94px; padding:13px; background:rgba(247,241,232,.68); border:1px solid rgba(23,23,23,.12); display:flex; flex-direction:column; justify-content:space-between; border-radius:4px; }.construction-flow i { width:8px; }.construction-flow div:nth-of-type(2),.construction-flow div:nth-of-type(5) { transform:none; }.method-list { margin-top:50px; grid-template-columns:1fr 1fr; }.method-item { min-height:205px; padding:22px 17px; border-right:1px solid var(--line); }.method-item:nth-child(3) { border-left:1px solid var(--line); }.method-item h3 { margin-top:41px; font-size:24px; }.footer-grid { grid-template-columns:1fr; }.footer-meta { align-items:flex-start; }.contact { padding-top:52px; padding-bottom:108px; }.contact #contact-title { font-size:clamp(36px,9vw,46px); line-height:.92; }.contact #contact-title > span { white-space:normal; } }