:root { --paper:#f6f7f2; --surface:#fff; --ink:#111510; --muted:#576159; --forest:#2f574b; --forest-strong:#1e3f35; --sage:#ddeee6; --soft-blue:#dbe8ed; --soft-rose:#ece2df; --line:#d7ded8; --loop:#ffbc32; --max:1200px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.58; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:focus-visible { outline:3px solid var(--forest); outline-offset:4px; border-radius:4px; }
.skip-link { position:absolute; top:-5rem; left:1rem; z-index:10; padding:.65rem 1rem; color:#fff; background:var(--ink); }
.skip-link:focus { top:1rem; }
.site-header { display:flex; align-items:center; justify-content:space-between; max-width:var(--max); min-height:86px; margin:auto; padding:0 32px; border-bottom:1px solid var(--line); }
.wordmark { font-size:1.06rem; font-weight:800; letter-spacing:-.045em; text-decoration:none; }
.wordmark span { color:var(--muted); font-weight:500; }
nav { display:flex; gap:1.5rem; }
nav a { font-size:.86rem; font-weight:700; text-decoration:none; }
.eyebrow { margin:0 0 1.1rem; color:var(--forest); font-size:.71rem; font-weight:800; letter-spacing:.12em; line-height:1.3; text-transform:uppercase; }
.home-hero,.portfolio,.product,.story-section,.about-section,.contact-section,.meet-hero,.meet-products,.looking,.follow-up { max-width:var(--max); margin:auto; padding-right:32px; padding-left:32px; }
.home-hero { max-width:1000px; margin-left:max(0px,calc((100vw - var(--max))/2)); padding-top:clamp(5rem,11vw,10rem); padding-bottom:clamp(5rem,11vw,10rem); }
.home-hero h1,.meet-hero h1 { max-width:940px; margin:0; font-size:clamp(3.1rem,7vw,6.7rem); letter-spacing:-.075em; line-height:.94; }
.hero-copy { max-width:650px; margin:2rem 0 0; color:#354138; font-size:clamp(1.1rem,1.7vw,1.35rem); }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:2.2rem; }
.button { display:inline-flex; align-items:center; gap:.65rem; min-height:48px; padding:.72rem 1.08rem; border-radius:999px; color:#fff; background:var(--forest); font-weight:750; text-decoration:none; transition:background .18s ease,transform .18s ease; }
.button:hover { background:var(--forest-strong); transform:translateY(-1px); }
.button svg,.text-link svg { width:17px; height:17px; }
.text-link { display:inline-flex; align-items:center; gap:.5rem; font-weight:750; }
.portfolio { padding-top:1.5rem; padding-bottom:7rem; }
.section-heading { max-width:660px; }
.section-heading h2,.about-section h2,.contact-section h2,.follow-up h2 { margin:0 0 1.3rem; font-size:clamp(2.2rem,5vw,4.5rem); letter-spacing:-.067em; line-height:.98; }
.section-heading > p:last-child { color:#425047; font-size:1.15rem; }
.comparison { display:grid; grid-template-columns:1fr 1fr; margin-top:3rem; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
.comparison article { padding:2rem; }
.comparison article + article { border-left:1px solid var(--line); background:var(--sage); }
.product-name { margin:0 0 .5rem; font-size:1.45rem; font-weight:800; letter-spacing:-.045em; }
.product { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(2.5rem,7vw,8rem); padding-top:clamp(5rem,10vw,9rem); padding-bottom:clamp(5rem,10vw,9rem); }
.loopcut { max-width:none; padding-right:max(32px,calc((100vw - var(--max))/2)); padding-left:max(32px,calc((100vw - var(--max))/2)); color:#edf5f1; background:#071013; }
.loopcut .product-copy { max-width:590px; }
.loopcut .eyebrow { color:var(--loop); }
.loopcut .product-lead,.clearhour .product-lead { font-size:clamp(1.35rem,2vw,1.75rem); font-weight:730; letter-spacing:-.035em; line-height:1.16; }
.loopcut .actions { margin-top:2.5rem; }
.loop-button { color:#201a0b; background:var(--loop); }
.loop-button:hover { background:#ffd36d; }
.loopcut-shot { max-height:580px; margin:0; overflow:hidden; border-radius:28px 28px 0 0; background:#111; justify-self:center; }
.loopcut-shot img { display:block; width:min(330px,75vw); height:auto; }
.product h2 { margin:0; font-size:clamp(2.8rem,5vw,5.4rem); letter-spacing:-.075em; line-height:.9; }
.category { margin:.7rem 0 1.8rem; color:var(--forest); font-weight:750; }
.clearhour { padding-top:9rem; }
.clearhour h3 { margin:1.8rem 0 1rem; font-size:clamp(1.5rem,2.8vw,2.25rem); letter-spacing:-.045em; line-height:1.05; }
.value-quote { margin:2rem 0; padding-left:1rem; border-left:3px solid var(--forest); font-size:1.2rem; font-weight:690; }
.mechanisms { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:2rem 0; padding:0; list-style:none; }
.mechanisms li { padding:.75rem 0; border-top:1px solid currentColor; font-size:.95rem; font-weight:680; }
.hero-phone { margin:0; padding:clamp(2rem,5vw,5rem) clamp(1.2rem,4vw,4rem) 0; border-radius:36px; background:var(--soft-blue); justify-self:center; }
.hero-phone picture,.hero-phone img { display:block; width:min(455px,67vw); height:auto; }
.prototype-note { margin-top:1rem; color:var(--muted); font-size:.86rem; }
.story-section { padding-top:1rem; padding-bottom:9rem; }
.story-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:3rem; }
.story-card { display:flex; flex-direction:column; padding:1.1rem; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
.image-link { display:block; margin-bottom:1.7rem; border-radius:13px; background:var(--soft-rose); text-decoration:none; }
.story-card picture,.story-card img { display:block; width:100%; height:auto; border-radius:13px; }
.story-card h3 { margin:0 0 .7rem; font-size:1.42rem; letter-spacing:-.045em; line-height:1.05; }
.story-card p:last-child { margin:0; color:#4a554d; }
.about-section { max-width:800px; margin-left:max(0px,calc((100vw - var(--max))/2)); padding-top:8rem; padding-bottom:8rem; border-top:1px solid var(--line); }
.about-section > p:last-child { max-width:650px; color:#455148; font-size:1.2rem; }
.contact-section { max-width:none; padding-top:7rem; padding-bottom:8rem; background:var(--sage); text-align:center; }
.contact-section > * { max-width:700px; margin-right:auto; margin-left:auto; }
.email-link { font-size:clamp(1.5rem,3vw,2.8rem); font-weight:800; letter-spacing:-.055em; }
.site-footer { display:flex; justify-content:space-between; max-width:var(--max); margin:auto; padding:2.2rem 32px 3rem; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.site-footer p { margin:0; }.site-footer strong { color:var(--ink); }.site-footer div { display:flex; align-items:flex-start; gap:1.3rem; }
.meet-page .site-header { border-bottom:0; }
.meet-hero { display:grid; grid-template-columns:minmax(250px,.8fr) 1.2fr; align-items:center; gap:clamp(2.5rem,8vw,8rem); max-width:1060px; padding-top:clamp(2rem,7vw,7rem); padding-bottom:clamp(5rem,9vw,8rem); }
.meet-photo { overflow:hidden; border-radius:160px 160px 24px 24px; background:var(--soft-rose); }.meet-photo picture,.meet-photo img { display:block; width:100%; height:auto; }
.meet-hero h1 { font-size:clamp(3.5rem,6.5vw,6rem); }.meet-subtitle { margin:.85rem 0 1.8rem; font-size:1.18rem; font-weight:700; }.visible-email { display:inline-block; margin-top:1.4rem; color:var(--forest); font-weight:700; }
.meet-products { padding-top:6rem; padding-bottom:6rem; border-top:1px solid var(--line); }
.meet-product-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-top:3rem; }.meet-product { min-height:360px; padding:clamp(1.5rem,3vw,3rem); border-radius:20px; }.meet-product h3 { margin:0; font-size:clamp(2rem,3vw,3.1rem); letter-spacing:-.065em; line-height:.94; }.meet-product .text-link { margin-top:1rem; margin-right:1rem; }
.loopcut-mini { color:#edf5f1; background:#071013; }.loopcut-mini .eyebrow { color:var(--loop); }
.clearhour-mini { display:grid; grid-template-columns:1fr 150px; gap:1rem; background:var(--soft-blue); }.clearhour-mini picture,.clearhour-mini img { width:100%; height:auto; align-self:end; }
.looking { padding-top:6rem; padding-bottom:6rem; }.looking-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:3rem; border:1px solid var(--line); background:var(--line); }.looking-grid article { min-height:220px; padding:2rem; background:var(--paper); }.looking-grid article p:last-child { margin:0; color:#455148; }
.follow-up { max-width:none; padding-top:7rem; padding-bottom:8rem; color:#fff; background:var(--forest); text-align:center; }.follow-up .eyebrow { color:#d8eee3; }.follow-up > * { max-width:680px; margin-right:auto; margin-left:auto; }.follow-up .button { color:var(--forest-strong); background:#fff; }.follow-up .text-link { color:#fff; }
.product-privacy { display:inline-flex; align-items:center; gap:.45rem; margin-top:1.4rem; color:#c9d8d1; font-size:.86rem; }
.product-privacy svg { width:15px; height:15px; }
.legal-main { max-width:900px; margin:auto; padding:clamp(4rem,9vw,8rem) 32px; }
.legal-copy { max-width:700px; }
.legal-copy h1 { margin:0 0 1.2rem; font-size:clamp(3rem,6vw,5.5rem); letter-spacing:-.075em; line-height:.94; }
.legal-copy h2 { margin:2.7rem 0 .85rem; font-size:1.35rem; letter-spacing:-.04em; }
.legal-copy p { max-width:670px; }
.legal-intro { max-width:560px; color:#455148; font-size:1.15rem; }
.legal-copy section { padding-top:1px; }
@media (max-width:700px) { .site-header { min-height:72px; padding:0 20px; }.site-header nav { gap:.8rem; }.site-header nav a { font-size:.78rem; }.home-hero,.portfolio,.product,.story-section,.about-section,.contact-section,.meet-hero,.meet-products,.looking,.follow-up { padding-right:20px; padding-left:20px; }.home-hero { padding-top:4.7rem; padding-bottom:5rem; }.comparison,.meet-product-grid { grid-template-columns:1fr; }.comparison article + article { border-top:1px solid var(--line); border-left:0; }.product { grid-template-columns:1fr; gap:3rem; }.loopcut { padding-right:20px; padding-left:20px; }.loopcut-shot { max-height:460px; justify-self:start; }.clearhour { padding-top:5rem; }.hero-phone { width:100%; max-height:560px; padding-top:2.4rem; }.hero-phone picture,.hero-phone img { width:min(370px,80vw); margin:auto; }.story-section { padding-bottom:5.5rem; }.story-grid { grid-template-columns:1fr; }.image-link { height:360px; }.about-section { padding-top:5rem; padding-bottom:5rem; }.site-footer { flex-direction:column; gap:1.5rem; padding:2rem 20px; }.site-footer div { flex-direction:column; gap:.35rem; }.meet-hero { grid-template-columns:1fr; padding-top:1rem; }.meet-photo { width:min(74vw,330px); margin:auto; }.meet-products,.looking { padding-top:4.5rem; padding-bottom:4.5rem; }.clearhour-mini { grid-template-columns:1fr; }.clearhour-mini picture { width:185px; justify-self:start; }.looking-grid { grid-template-columns:1fr; }.looking-grid article { min-height:unset; padding:1.6rem; }.follow-up { padding-top:5rem; padding-bottom:5rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }
@media (max-width:700px) { .hero-phone { max-height:none; overflow:visible; } .image-link { height:auto; overflow:visible; } }
@media (max-width:700px) { .clearhour-mini picture { width:100%; max-width:300px; margin:1.5rem auto 0; justify-self:center; } }