:root{ --bg:#ffffff; --ink:#1d1d1f; --muted:#6e6e73; --hairline:rgba(0,0,0,.08); --card:#ffffff; --gold:#e6d9a3; } *{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; } /* Scroll-snap lives on this inner container rather than html/body directly: Chromium has a bug where mandatory scroll-snap on the root scroller breaks position:fixed for body-level elements (confirmed against the Lucy chat widget). Keeping snap scoped here leaves position:fixed elements appended to genuinely viewport-relative. */ .scroll-container{ height:100vh; height:100svh; overflow-y:scroll; scroll-snap-type:y mandatory; display:flex; flex-direction:column; } @media (prefers-reduced-motion:reduce){ .scroll-container{scroll-snap-type:none} } main{flex:1} img{display:block;max-width:100%} a{color:inherit} /* Top bar */ .topbar{ position:relative; display:flex; justify-content:center; padding:20px 24px; border-bottom:1px solid var(--hairline); scroll-snap-align:start; } .lang-switch{ position:fixed; top:20px; right:24px; top:max(20px,env(safe-area-inset-top) + 12px); z-index:1000; display:flex; gap:8px; } .lang-switch a{ display:block; line-height:0; opacity:.55; transition:opacity .2s ease; } .lang-switch a img{ display:block; width:22px; height:auto; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.15); } .lang-switch a:hover{opacity:.85} .lang-switch a[aria-current="true"]{opacity:1} @media (max-width:600px){ .lang-switch{right:16px;gap:6px} .lang-switch a img{width:19px} } .topbar img{width:148px;height:auto} /* Shared eyebrow / heading styles */ .eyebrow{ text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:600; color:var(--muted); margin:0 0 18px; } .eyebrow--light{color:var(--gold)} h1{ font-size:clamp(2rem,4.2vw,3.1rem); font-weight:600; letter-spacing:-.02em; line-height:1.15; margin:0 auto 22px; max-width:760px; } .lede{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--muted); max-width:660px; margin:0 auto 40px; } .lede--light{color:rgba(255,255,255,.84)} /* Hero */ .hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; background-image:url("images/pexels-lucas-chalhoub-2162943425-38585845r.jpg"); background-size:cover; background-position:58% 22%; background-repeat:no-repeat; padding:110px 24px; text-align:center; isolation:isolate; scroll-snap-align:start; scroll-snap-stop:always; } .hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,7,10,.38) 0%,rgba(6,7,10,.66) 100%); z-index:-1; } .hero__inner{max-width:720px;color:#fff} .hero h1{color:#fff} /* Statement band */ .statement{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center; background-image:url("images/pexels-snapsbyclark-15897200r.jpg"); background-size:cover; background-position:center; padding:90px 24px; text-align:center; isolation:isolate; scroll-snap-align:start; scroll-snap-stop:always; } .statement::before{ content:""; position:absolute; inset:0; background:rgba(6,7,10,.6); z-index:-1; } .statement__inner{max-width:660px;color:#fff} .statement__text{ font-size:clamp(1.5rem,3.2vw,2.3rem); font-weight:600; letter-spacing:-.01em; line-height:1.35; margin:0 0 20px; } /* Projects */ .projects{ position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:110px 24px; background-image:url("images/pexels-tara-winstead-8386357r.jpg"); background-size:cover; background-position:center; background-repeat:no-repeat; scroll-snap-align:start; scroll-snap-stop:always; isolation:isolate; } .projects::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.6); z-index:-1; } .projects__inner{max-width:1040px;margin:0 auto;width:100%} .clients{ position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:90px 24px; background-image:url("images/pexels-emmali-6010226r.jpg"); background-size:cover; background-position:center; background-repeat:no-repeat; scroll-snap-align:start; scroll-snap-stop:always; isolation:isolate; } .clients::before{ content:""; position:absolute; inset:0; background:rgba(4,6,10,.62); z-index:-1; } .clients__inner{max-width:1040px;margin:0 auto;width:100%} .clients .section-head h2{color:#fff} .clients .client-grid span{color:rgba(255,255,255,.88)} .client-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:6px; column-gap:40px; max-width:640px; margin:0 auto; text-align:center; } .client-grid span{ display:block; font-size:1rem; font-weight:400; line-height:1.4; color:var(--ink); } @media (max-width:600px){ .client-grid{grid-template-columns:1fr;max-width:280px} } .section-head{text-align:center;margin-bottom:44px} .section-head h2{ font-size:clamp(1.4rem,2.4vw,1.8rem); font-weight:600; letter-spacing:-.01em; margin:0; } .worklist{ max-width:640px; margin:0 auto; text-align:center; } .work-item{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:16px 4px; } .work-item__name{ display:inline-block; padding:10px 14px; margin:-10px -14px; font-size:1.1rem; font-weight:600; letter-spacing:-.01em; color:#5b7fa6; text-decoration:none; transition:opacity .2s ease; } .work-item__name:hover{opacity:.6} .work-item__desc{ color:#4d4d51; font-size:.96rem; } /* Footer */ footer{ border-top:1px solid var(--hairline); padding:40px 24px 48px; text-align:center; } footer p{ margin:0 0 8px; color:var(--muted); font-size:.88rem; max-width:520px; margin-left:auto; margin-right:auto; } footer .disclaimer{text-align:left} footer .fine{ font-size:.8rem; color:#a1a1a6; margin-bottom:0; } /* Lucy chat widget */ .lucy-chat{ position:fixed; right:24px; bottom:24px; bottom:max(24px,env(safe-area-inset-bottom) + 16px); z-index:1000; } .lucy-chat__toggle{ display:flex; align-items:center; gap:8px; padding:14px 22px; border:none; border-radius:980px; background:var(--ink); color:#fff; font-family:inherit; font-size:.95rem; font-weight:500; cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.25); transition:opacity .2s ease; } .lucy-chat__toggle-icon{ width:18px; height:18px; flex-shrink:0; } .lucy-chat__toggle:hover{opacity:.85} .lucy-chat__panel{ position:absolute; right:0; bottom:calc(100% + 12px); width:min(360px,calc(100vw - 48px)); max-height:min(520px,calc(100vh - 140px)); display:flex; flex-direction:column; background:#fff; border:1px solid var(--hairline); border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,.18); overflow:hidden; } .lucy-chat__panel[hidden]{display:none} .lucy-chat__header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--hairline); font-size:.9rem; font-weight:600; color:var(--ink); } .lucy-chat__title{display:flex;align-items:center;gap:8px} .lucy-chat__status{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--gold); } .lucy-chat__status--busy{animation:lucy-pulse 1.1s ease-in-out infinite} @keyframes lucy-pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.3)} } @media (prefers-reduced-motion:reduce){ .lucy-chat__status--busy{animation:none} } .lucy-chat__close{ border:0; background:transparent; color:var(--muted); font-size:20px; line-height:1; padding:0 2px; cursor:pointer; } .lucy-chat__close:hover{color:var(--ink)} .lucy-chat__messages{ flex:1; min-height:200px; max-height:340px; overflow-y:auto; padding:16px 18px; display:flex; flex-direction:column; gap:10px; } .lucy-chat__message{ max-width:88%; margin:0; padding:10px 14px; border-radius:14px; background:#f5f5f7; color:var(--ink); font-size:.92rem; line-height:1.45; align-self:flex-start; } .lucy-chat__message--user{ align-self:flex-end; background:var(--ink); color:#fff; } .lucy-chat__message--loading{color:var(--muted);font-style:italic} .lucy-chat__message--error{color:#b3261e;background:#fdecea} .lucy-chat__form{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--hairline); } .lucy-chat__input{ flex:1; min-width:0; padding:10px 14px; border:1px solid var(--hairline); border-radius:980px; background:#fff; color:var(--ink); font-family:inherit; /* 16px minimum stops iOS Safari force-zooming the page on focus */ font-size:16px; } .lucy-chat__input:focus{outline:2px solid var(--ink);outline-offset:1px} .lucy-chat__input::placeholder{color:var(--muted)} .lucy-chat__send{ border:none; border-radius:980px; padding:10px 18px; background:var(--ink); color:#fff; font-family:inherit; font-size:.9rem; font-weight:500; cursor:pointer; transition:opacity .2s ease; } .lucy-chat__send:hover:not(:disabled){opacity:.85} .lucy-chat__send:disabled, .lucy-chat__input:disabled{cursor:wait;opacity:.55} @media (max-width:600px){ .lucy-chat{ right:16px; bottom:74px; bottom:max(74px,env(safe-area-inset-bottom) + 66px); } .lucy-chat__panel{width:calc(100vw - 32px)} } @media (max-width:680px){ .hero{padding:90px 20px;background-position:66% 18%} .statement{padding:70px 20px} .projects{padding:80px 20px} .clients{padding:70px 20px} .grid{grid-template-columns:1fr} }