:root { --surface:#f4fafd; --raised:#fff; --surface-aqua:#e1f6f4; --surface-lavender:#e8e7fa; --surface-apricot:#ffe8c2; --surface-sun:#fff8ed; --line:#b8d3db; --ink:#17232b; --muted:#4e5e67; --deep:#0e5368; --teal:#087f82; --aqua:#0fa7a5; --coral:#ff6f61; --sun:#f6c453; --apricot:#ffd9ad; --pale-aqua:#e2f7f6; --sky:#e4efff; --sand:#ffedcf; --shadow:0 20px 55px rgba(14,83,104,.14); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--surface); } body { margin:0; color:var(--ink); background:var(--surface); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.55; } a { color:inherit; text-underline-offset:.18em; } a:focus-visible,button:focus-visible { outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 5px var(--teal); } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .skip-link { position:absolute; top:-4rem; left:1rem; z-index:20; padding:.65rem 1rem; border-radius:.5rem; background:var(--ink); color:#fff; } .skip-link:focus { top:1rem; }
.site-header { width:min(1200px,calc(100% - 2rem)); min-height:5.5rem; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand { display:inline-flex; align-items:center; gap:.55rem; font-size:1.05rem; font-weight:750; letter-spacing:-.04em; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:50% 50% 50% .4rem; background:linear-gradient(145deg,var(--deep),var(--teal)); color:#fff; font-family:Georgia,serif; font-size:1.1rem; } .brand-next { color:var(--teal); font-weight:500; } nav { display:flex; align-items:center; gap:1.1rem; color:var(--muted); font-size:.9rem; } nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; } nav a:hover { color:var(--teal); } .nav-cta { padding:.55rem .9rem; border:1px solid rgba(8,127,130,.28); border-radius:999px; background:var(--pale-aqua); color:var(--deep); } .menu-toggle { display:none; min-width:44px; min-height:44px; padding:.5rem; border:0; background:none; }
h1,h2,h3,p { margin-top:0; } h1 { max-width:760px; margin:.65rem 0 1.35rem; color:#123f4d; font-size:clamp(3.15rem,7vw,6.4rem); font-weight:650; line-height:.97; letter-spacing:-.073em; } h1 em { color:var(--teal); font-family:Georgia,"Times New Roman",serif; font-weight:400; } h2 { margin:.55rem 0 1.2rem; font-size:clamp(2.1rem,4.2vw,3.8rem); font-weight:620; line-height:1.04; letter-spacing:-.058em; } h3 { font-size:1.06rem; letter-spacing:-.025em; } .eyebrow { display:inline-block; color:var(--teal); font-size:.73rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hero { position:relative; z-index:0; width:min(1200px,calc(100% - 2rem)); min-height:min(720px,calc(100vh - 5.5rem)); margin:0 auto; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:3rem; padding:4rem 0 5.5rem; } .hero::before { position:absolute; z-index:-2; inset:0 calc(50% - 50vw); border-top:1px solid rgba(14,83,104,.08); border-bottom:1px solid rgba(14,83,104,.12); background:radial-gradient(circle at 82% 17%,rgba(255,218,124,.9) 0 3.5rem,rgba(255,232,166,.38) 3.6rem 9rem,transparent 15rem),linear-gradient(180deg,transparent 0 46%,rgba(255,255,255,.42) 46.2%,transparent 46.6%),linear-gradient(180deg,#d7efff 0%,#edf8fb 42%,#cdebea 50%,#b9ddda 66%,#f6e7ca 73%,var(--surface) 100%); content:""; } .hero-copy { position:relative; z-index:2; } .hero-copy>.eyebrow { padding:.38rem .62rem; border:1px solid rgba(160,112,0,.16); border-radius:999px; background:#fff0b8; color:#725300; } .hero-lede { max-width:35rem; color:var(--muted); font-size:1.12rem; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:2rem; } .button { display:inline-flex; align-items:center; justify-content:center; gap:.7rem; padding:.85rem 1.15rem; border:1px solid transparent; border-radius:999px; font-weight:700; text-decoration:none; } .button-primary { background:linear-gradient(135deg,var(--deep),var(--teal)); color:#fff; box-shadow:0 12px 26px rgba(14,83,104,.28); } .button-primary:hover { background:linear-gradient(135deg,#083e50,#066f72); transform:translateY(-1px); } .button-primary:active { background:#052f3c; transform:translateY(0); } .coming-soon { padding:.5rem .75rem; border:1px solid rgba(8,127,130,.22); border-radius:999px; background:#c9f1ed; color:var(--deep); box-shadow:0 6px 16px rgba(8,127,130,.1); font-size:.83rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.hero-art { position:relative; min-height:480px; overflow:hidden; border:1px solid rgba(14,83,104,.2); border-radius:2rem; background:radial-gradient(circle at 77% 18%,rgba(255,246,204,.7) 0,rgba(255,226,139,.26) 16%,transparent 34%),linear-gradient(180deg,transparent 0 42%,rgba(255,255,255,.34) 42.3%,transparent 42.8%),linear-gradient(180deg,#a9d9f3 0%,#dceff0 40%,#79bac0 48%,#88c6c3 62%,#f2d8ac 67%,#d9b879 71%,#4b8673 76%,#285d5b 100%); box-shadow:0 26px 64px rgba(14,83,104,.2); } .hero-art::before { position:absolute; z-index:0; inset:0; background:radial-gradient(82% 64% at 3% 108%,rgba(24,91,88,.9) 0 49%,transparent 50%),radial-gradient(76% 56% at 64% 111%,rgba(49,116,97,.7) 0 52%,transparent 53%),linear-gradient(170deg,transparent 0 60%,rgba(255,255,255,.18) 60.5% 62%,transparent 62.5%); content:""; pointer-events:none; } .hero-art::after { position:absolute; z-index:0; inset:0; background:radial-gradient(ellipse at 20% 18%,rgba(255,255,255,.58) 0 7%,transparent 19%),radial-gradient(ellipse at 52% 29%,rgba(255,255,255,.34) 0 6%,transparent 18%); content:""; pointer-events:none; } .orbit,.route,.pin,.place-card { z-index:2; } .orbit { position:absolute; border:1px solid rgba(255,255,255,.36); border-radius:50%; } .orbit-one { width:38rem; height:38rem; bottom:-18rem; left:-8rem; } .orbit-two { width:26rem; height:26rem; top:-11rem; right:-10rem; } .route { position:absolute; width:42%; height:27%; border:3px solid; border-color:rgba(255,255,255,.9) transparent transparent rgba(255,255,255,.9); border-radius:75% 0 0 0; filter:drop-shadow(0 2px 3px rgba(14,83,104,.22)); opacity:.92; transform:rotate(26deg); } .route-a { top:28%; left:22%; border-color:rgba(7,112,119,.88) transparent transparent rgba(7,112,119,.88); } .route-b { right:8%; bottom:18%; transform:rotate(205deg); } .pin { position:absolute; width:1.05rem; height:1.05rem; border:4px solid #fff; border-radius:50%; background:var(--deep); box-shadow:0 3px 12px rgba(14,83,104,.34); } .pin-one { top:34%; left:33%; background:var(--coral); } .pin-two { right:28%; bottom:30%; } .place-card { position:absolute; width:10.5rem; padding:1rem; border:1px solid rgba(255,255,255,.96); border-radius:1rem; background:rgba(255,255,255,.96); box-shadow:0 14px 30px rgba(14,83,104,.2); backdrop-filter:blur(12px); } .place-card span { display:block; margin-bottom:.3rem; color:var(--teal); font-size:.63rem; font-weight:800; letter-spacing:.12em; } .place-card strong { font-size:.92rem; line-height:1.25; } .card-one { bottom:13%; left:8%; border-top:3px solid var(--coral); } .card-two { top:15%; right:6%; border-top:3px solid var(--aqua); }
.section { width:min(1200px,calc(100% - 2rem)); margin:0 auto; padding:7rem 0; } .intro { display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; border-top:1px solid var(--line); } .intro h2 { max-width:610px; } .intro p { max-width:29rem; align-self:end; margin:0; color:var(--muted); font-size:1.12rem; } .section-heading { max-width:740px; } .section-heading>p { max-width:39rem; color:var(--muted); font-size:1.05rem; } .experience { position:relative; z-index:0; padding-top:5rem; } .experience::before { position:absolute; z-index:-1; inset:0 calc(50% - 50vw); border-top:1px solid rgba(14,83,104,.1); border-bottom:1px solid rgba(14,83,104,.12); background:linear-gradient(180deg,var(--surface-aqua) 0%,var(--surface-lavender) 100%); content:""; } .experience .eyebrow { color:var(--deep); } .capability-grid { display:grid; grid-template-columns:repeat(3,1fr); margin-top:3rem; border-top:1px solid var(--line); border-left:1px solid var(--line); background:var(--raised); box-shadow:0 16px 38px rgba(14,83,104,.07); } .capability-grid article { min-height:16rem; padding:1.6rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .feature-icon { display:grid; place-items:center; width:2.6rem; height:2.6rem; margin-bottom:2.6rem; border:1px solid rgba(14,83,104,.09); border-radius:50%; background:#c9f1ed; color:var(--deep); box-shadow:0 7px 16px rgba(14,83,104,.1); font-size:1.15rem; } .capability-grid article:nth-child(2) .feature-icon { background:#d5e6ff; color:#315f9e; } .capability-grid article:nth-child(3) .feature-icon { background:#ffe0db; color:#d95045; } .capability-grid article:nth-child(4) .feature-icon { background:#fff0bd; color:#8a6100; } .capability-grid article:nth-child(5) .feature-icon { background:#bfe8e5; color:var(--teal); } .capability-grid article:nth-child(6) .feature-icon { background:#ffe2c2; color:#b54d3d; } .capability-grid h3 { margin-bottom:.45rem; } .capability-grid p { margin:0; color:var(--muted); font-size:.94rem; }
.promise { display:grid; grid-template-columns:.88fr 1.12fr; gap:6rem; padding:5.5rem clamp(1.5rem,5vw,5rem); border-radius:2rem; background:radial-gradient(circle at 86% 0%,rgba(246,196,83,.24),transparent 30%),linear-gradient(135deg,var(--deep) 0%,#087579 58%,#0d7c79 100%); box-shadow:0 22px 50px rgba(14,83,104,.16); color:#f7fbfc; } .promise .eyebrow { color:#f2fbfa; } .promise h2 { max-width:460px; } .promise p { color:#f2fbfa; font-size:1.04rem; } .promise p:last-child { margin-bottom:0; } .about { position:relative; z-index:0; display:grid; grid-template-columns:.55fr 1fr; gap:4rem; max-width:960px; } .about::before { position:absolute; z-index:-1; inset:0 calc(50% - 50vw); border-top:1px solid rgba(14,83,104,.1); background:var(--surface-sun); content:""; } .about-mark { color:var(--aqua); font-family:Georgia,serif; font-size:12rem; line-height:.7; text-shadow:0 12px 30px rgba(15,167,165,.14); } .about p { max-width:37rem; color:var(--muted); font-size:1.04rem; } .text-link { border-bottom:1px solid var(--teal); color:var(--teal); font-weight:650; text-decoration:none; }
.site-footer { width:min(1200px,calc(100% - 2rem)); margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; padding:3.5rem 0 2.2rem; border-top:1px solid var(--line); color:var(--muted); font-size:.87rem; } .footer-brand { margin-bottom:.8rem; color:var(--ink); } .site-footer p { max-width:23rem; margin-bottom:0; } .footer-links { display:flex; flex-wrap:wrap; align-content:start; justify-content:flex-end; gap:.2rem 1.1rem; } .footer-links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; } .footer-links a:hover { color:var(--teal); text-decoration:underline; } .copyright { grid-column:1/-1; margin-top:1rem; padding-top:1.8rem; border-top:1px solid var(--line); font-size:.78rem; }
.legal-hero { position:relative; z-index:0; width:min(860px,calc(100% - 2rem)); margin:0 auto; padding:6rem 0 3.5rem; } .legal-hero::before { position:absolute; z-index:-1; inset:0 calc(50% - 50vw); border-top:1px solid rgba(14,83,104,.08); border-bottom:1px solid rgba(14,83,104,.1); background:linear-gradient(115deg,var(--surface-aqua),var(--surface-lavender)); content:""; } .legal-hero .eyebrow { color:var(--deep); } .legal-hero h1 { font-size:clamp(3rem,6vw,5.25rem); } .legal-hero p { max-width:41rem; color:var(--muted); font-size:1.08rem; } .legal-updated { margin-top:1.1rem; color:var(--deep) !important; font-size:.84rem !important; font-weight:700; letter-spacing:.02em; } .legal-copy { width:min(760px,calc(100% - 2rem)); margin:0 auto; padding:0 0 6rem; } .legal-copy section { padding:1.7rem 0; border-top:1px solid var(--line); } .legal-copy h2 { margin:0 0 .65rem; font-size:1.2rem; letter-spacing:-.03em; } .legal-copy p { color:var(--muted); } .legal-copy a { color:var(--teal); font-weight:650; } .not-found { display:grid; width:min(860px,calc(100% - 2rem)); min-height:55vh; margin:0 auto; padding:5rem 0; place-items:center; } .not-found>div { max-width:620px; } .not-found p { margin-bottom:2rem; color:var(--muted); font-size:1.1rem; }
@media (max-width:760px) { .site-header { min-height:4.8rem; } .menu-toggle { display:grid; gap:4px; } .menu-toggle span:not(.sr-only) { display:block; width:1.5rem; height:1px; background:var(--ink); } .site-header nav { position:absolute; z-index:5; top:4.5rem; right:1rem; left:1rem; display:none; padding:1rem; border:1px solid var(--line); border-radius:1rem; background:var(--raised); box-shadow:var(--shadow); } .site-header nav[data-open] { display:grid; gap:.9rem; } .nav-cta { text-align:center; } .hero { grid-template-columns:1fr; min-height:0; gap:2.75rem; padding:3rem 0 4rem; } .hero-art { min-height:360px; } .card-one { bottom:11%; left:7%; } .card-two { top:10%; right:5%; } .intro,.promise { grid-template-columns:1fr; gap:2rem; } .section { padding:4.5rem 0; } .experience { padding-top:2rem; } .capability-grid { grid-template-columns:1fr 1fr; } .capability-grid article { min-height:13.5rem; } .feature-icon { margin-bottom:1.8rem; } .promise { width:calc(100% - 1rem); padding:3.5rem 1.5rem; border-radius:1.25rem; } .about { grid-template-columns:1fr; gap:1.5rem; } .about-mark { font-size:7rem; } .site-footer { grid-template-columns:1fr; gap:1.5rem; } .footer-links { justify-content:flex-start; } .legal-hero { padding:4.2rem 0 2.4rem; } .legal-copy { padding-bottom:4.5rem; } }
@media (max-width:430px) { .hero-art { min-height:320px; } .place-card { width:9rem; padding:.8rem; } .card-two { top:7%; } .capability-grid { grid-template-columns:1fr; } .hero-actions { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }