:root { color-scheme:light; --bg:#4d9cc7; --bg-mid:#5ca7cf; --bg-end:#72b4d6; --surface:#b7dcf5; --surface-raised:#e7f3fb; --text:#102733; --muted:#102733; --blue:#075681; --cyan:#0077b5; --border:#144f7229; --border-active:#07568180; --section:64px; --space-section:clamp(48px,4.5vw,64px); --space-heading:clamp(28px,2.5vw,32px); --space-label:16px; --transition:200ms ease; --shadow:0 8px 24px #12394f14; --width:1320px; --font:"Segoe UI",Arial,sans-serif; --panel-fill:linear-gradient(145deg,#c5e3f6,#b7dcf5); --card-fill:linear-gradient(145deg,#eff8fd,#e7f3fb); --offer-card-background:linear-gradient(145deg,#f7fcfee8,#e8f5fccc 65%,#dff1fad4),linear-gradient(var(--bg-mid),var(--bg-mid)); --offer-card-highlight:radial-gradient(ellipse at 85% 0,#9fe9ff66,transparent 60%); --panel-edge:#144f721a; --panel-shadow:inset 0 1px 0 #ffffff70,0 12px 30px #12394f0f; --card-shadow:inset 0 1px 0 #ffffffb3,0 4px 14px #12394f0d; --card-shadow-hover:inset 0 1px 0 #ffffffcc,0 8px 22px #12394f1f; --content-motion:240ms cubic-bezier(.22,1,.36,1); --button-radius:14px 5px 14px 5px; --button-transition:240ms ease; --button-primary-background:linear-gradient(145deg,#244c64,#19364a); --button-primary-text:#e7f4fc; --button-primary-border:#8cdcf33d; --button-primary-border-hover:#8cdcf380; --button-primary-shadow:inset 0 1px 0 #c3ecff47,inset 0 -1px 0 #07131e33,0 2px 4px #1027333d,0 8px 16px #10273333,0 16px 28px #1027331f; --button-primary-shadow-hover:inset 0 1px 0 #d5f5ff66,inset 0 -1px 0 #07131e33,0 3px 6px #10273347,0 12px 22px #10273342,0 22px 34px #10273326; --button-reflection:linear-gradient(125deg,#8cddff1f,transparent 48%,#55c9ff0d); --button-focus:#a5e4ff; } @media(max-width:680px) { :root { --section:42px; } }  *,*::before,*::after { box-sizing:border-box } html { scroll-behavior:smooth; scroll-padding-top:100px } body { margin:0; background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 18%,transparent),transparent 30%,color-mix(in srgb,var(--bg-end) 10%,transparent) 50%,transparent 70%,color-mix(in srgb,var(--bg) 18%,transparent)),var(--bg) linear-gradient(180deg,var(--bg),var(--bg-mid) 45%,var(--bg-end)) no-repeat; color:var(--text); font:16px/1.7 var(--font); -webkit-font-smoothing:antialiased } h1,h2,h3,p,figure { margin:0 } h1,h2,h3 { line-height:1.14; font-weight:650; letter-spacing:-.025em } h1 { font-size:clamp(28px,3vw,38px) } h2 { font-size:clamp(26px,2.5vw,32px) } h3 { font-size:23px; letter-spacing:-.025em } p { color:var(--muted) } a { color:inherit; text-decoration:none } button,input,textarea { font:inherit } button,a,input,textarea { -webkit-tap-highlight-color:transparent } button { cursor:pointer } button:disabled { cursor:default; opacity:.65 } a,button { touch-action:manipulation } a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible { outline:3px solid var(--cyan); outline-offset:5px } ::selection { background:#4c72cb; color:#fff } img { max-width:100%; display:block } .icon { flex-shrink:0; vertical-align:middle } .container { width:min(var(--width),calc(100% - 96px)); margin-inline:auto } .accent { color:var(--blue) } .eyebrow { color:var(--blue); font:600 11px/1.5 var(--font); letter-spacing:.16em; text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:24px } .skip-link { position:fixed; top:10px; left:20px; transform:translateY(-200%); z-index:100; background:var(--blue); color:#ffffff; padding:12px 20px; border-radius:8px } .skip-link:focus { transform:none } .text-link { display:inline-flex; align-items:center; gap:13px; font-size:13px; font-weight:550; transition:color var(--transition) } .text-link .icon { width:18px; height:18px; transition:transform var(--transition) } .text-link:hover { color:var(--blue) } .text-link:hover .icon { transform:translateX(4px) } .blue-section-surface { position:relative; isolation:isolate; } .blue-section-surface::before { content:""; position:absolute; z-index:-1; inset:-35px -12px -24px; background:linear-gradient(180deg,transparent 0%,#cfdfeb14 28%,#d6e5ef33 76%,#d6e5ef1a 90%,transparent 100%),radial-gradient(ellipse at 48% 55%,#c9e3ef26,transparent 72%); pointer-events:none; } .section { margin-top:var(--section) } .section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:36px } .section-heading .eyebrow { margin-bottom:17px } .section-heading>p { max-width:340px; font-size:13px } .section-heading>.text-link { white-space:nowrap; margin-bottom:6px } .service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px } .service-card { display:flex; flex-direction:column; padding:28px; border:1px solid var(--panel-edge); border-radius:20px; background:var(--card-fill); box-shadow:var(--card-shadow); transition:border-color var(--content-motion),box-shadow var(--content-motion) } .service-card:hover,.service-card:focus-visible { border-color:#167fb64d; box-shadow:var(--card-shadow-hover) } .icon-box { display:inline-grid; place-items:center; width:45px; height:45px; background:#c2e3f5; border:1px solid #a0c4ff22; color:var(--blue); border-radius:12px; flex-shrink:0 } .icon-box .icon { width:23px; height:23px } .card-kicker { font-size:12px; color:var(--muted); letter-spacing:.025em; margin-bottom:9px } .service-card h3 { font-size:23px; max-width:240px; margin-bottom:14px } .service-card>p:not(.card-kicker) { font-size:13px; line-height:1.9 } .card-link { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); padding-top:20px; margin-top:28px; color:var(--blue); font-size:12px } .card-link .icon { width:17px; height:17px } .featured-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px } .project-preview { padding:0; overflow:hidden; background:var(--surface-raised); border:1px solid var(--border); border-radius:16px; aspect-ratio:1.7 } .project-preview img { width:100%; height:auto; object-fit:cover; object-position:top; border-radius:0; transition:transform 300ms ease; aspect-ratio:1.8 } .project-card:hover img { transform:scale(1.025) } .project-caption { display:flex; align-items:center; justify-content:space-between; padding:22px 2px } .project-caption h3 { font-size:21px } .project-caption .card-kicker { margin-bottom:5px } .about-section { display:grid; grid-template-columns:1fr 1fr; gap:42px; padding-block:50px; border-block:1px solid var(--border) } .about-section>div>p:not(.eyebrow) { font-size:14px; line-height:1.9; margin-top:22px; max-width:460px } .about-section .text-link { margin-top:22px; color:var(--blue) } .project-cta { position:relative; display:flex; align-items:center; justify-content:space-between; gap:40px; margin-block:64px; padding:48px 52px; border:1px solid var(--panel-edge); border-radius:22px; background:var(--panel-fill); box-shadow:var(--panel-shadow) } .project-cta .eyebrow { font-size:12px; margin-bottom:18px } .project-cta h2 { font-size:30px; line-height:1.2 } .project-cta p:not(.eyebrow) { font-size:12px; margin-top:16px } .project-cta .button { white-space:nowrap } .page-intro { padding:48px 0 36px } .page-intro h1 { font-size:clamp(28px,3vw,38px); line-height:1.14 } .page-intro>p:last-child { margin-top:25px; font-size:15px } .panel { padding:32px; background:var(--panel-fill); border:1px solid var(--panel-edge); border-radius:22px; box-shadow:var(--panel-shadow) } .reveal.is-visible { animation:section-in 400ms ease both } @keyframes section-in { from{ opacity:.5; transform:translateY(6px) } to{ opacity:1; transform:none } } .reveal { scroll-margin-top:110px } @media(max-width:1150px) { .container { width:calc(100% - 64px) } .service-card { padding:24px } .project-cta { padding:40px } .project-cta h2 { font-size:30px } } @media(max-width:900px) { .section-heading>p { max-width:270px; font-size:12px } .service-grid { gap:14px } .service-card { padding:22px } .service-card h3 { font-size:21px } .service-card>p:not(.card-kicker) { font-size:12px } .about-section { gap:50px } .project-cta { gap:30px } .project-cta .button { white-space:normal; max-width:220px; font-size:12px } .panel { padding:24px } } @media(max-width:680px) { .container { width:calc(100% - 40px) } h1 { font-size:32px } h2 { font-size:30px } .section-heading { display:block; margin-bottom:28px } .section-heading>p { max-width:100%; margin-top:20px; font-size:13px } .section-heading>.text-link { margin-top:20px } .eyebrow { font-size:12px; margin-bottom:17px } .service-grid { grid-template-columns:1fr; gap:16px } .service-card { padding:26px } .service-card h3 { max-width:100%; font-size:24px } .service-card>p:not(.card-kicker) { font-size:13px } .card-link { margin-top:23px; padding-top:16px } .featured-grid { grid-template-columns:1fr; gap:20px } .project-preview { padding:18px 18px 0 } .project-caption { padding-block:18px } .about-section { grid-template-columns:1fr; gap:34px; padding-block:36px } .about-section>div>p:not(.eyebrow) { font-size:13px } .project-cta { display:block; padding:30px 25px; margin-block:65px 55px; border-radius:16px } .project-cta h2 { font-size:29px } .project-cta p:not(.eyebrow) { font-size:12px } .project-cta .button { max-width:none; margin-top:27px; font-size:12px } .page-intro { padding:55px 0 42px } .page-intro h1 { font-size:32px } .page-intro>p:last-child { font-size:13px } .page-intro br:not(h1 br) { display:none } .panel { padding:26px 22px } } @media(max-width:370px) { .container { width:calc(100% - 32px) } } @media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important } } .service-card>.icon-box { margin-bottom:20px; } .page-intro .eyebrow { color:var(--text); } .text-link:hover { color:var(--text); text-decoration:underline; text-underline-offset:4px; }  @media (forced-colors:none) { html { --scrollbar-thumb:#182b39; --scrollbar-track:#708595; --scrollbar-thumb-hover:#293f50; } html::-webkit-scrollbar { width:10px; } html::-webkit-scrollbar-track { background:var(--scrollbar-track); } html::-webkit-scrollbar-thumb { background-color:var(--scrollbar-thumb); border:2px solid var(--scrollbar-track); border-radius:8px; transition:background-color 200ms ease; } html::-webkit-scrollbar-thumb:hover { background-color:var(--scrollbar-thumb-hover); } html::-webkit-scrollbar-corner { background:var(--scrollbar-track); } @supports not selector(::-webkit-scrollbar) { html { scrollbar-width:thin; scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track); } } } @media (prefers-reduced-motion:reduce) { html::-webkit-scrollbar-thumb { transition:none; } }  .button { --button-background:var(--button-primary-background); --button-background-hover:var(--button-primary-background); --button-color:var(--button-primary-text); --button-color-hover:#f4fcff; --button-border:var(--button-primary-border); --button-border-hover:var(--button-primary-border-hover); --button-shadow:var(--button-primary-shadow); --button-shadow-hover:var(--button-primary-shadow-hover); display:inline-flex; align-items:center; justify-content:center; position:relative; isolation:isolate; gap:20px; min-height:51px; padding:14px 22px; border:1px solid var(--button-border); border-radius:var(--button-radius); background:var(--button-background); box-shadow:var(--button-shadow); color:var(--button-color); font-size:13px; font-weight:650; line-height:1.5; text-decoration:none; transition:border-color var(--button-transition),box-shadow var(--button-transition),transform var(--button-transition),color var(--button-transition),background-color var(--button-transition); } .button::before { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--button-reflection); opacity:.35; pointer-events:none; transition:opacity var(--button-transition); } .button .icon { width:18px; height:18px; } .button:hover:not(:disabled):not([aria-disabled="true"]),.button:focus-visible { border-color:var(--button-border-hover); background:var(--button-background-hover); box-shadow:var(--button-shadow-hover); color:var(--button-color-hover); } .button:hover:not(:disabled):not([aria-disabled="true"]) { transform:translateY(-2px); } .button:hover:not(:disabled):not([aria-disabled="true"])::before,.button:focus-visible::before { opacity:1; } .button:active:not(:disabled):not([aria-disabled="true"]) { transform:none; } .button:focus-visible { outline:3px solid var(--button-focus); outline-offset:4px; } .button:disabled,.button[aria-disabled="true"] { opacity:.65; cursor:default; transform:none; } @media(prefers-reduced-motion:reduce) { .button:hover:not(:disabled):not([aria-disabled="true"]) { transform:none; } .button,.button::before { transition:none; } } .site-header,.site-footer { --text:#f5f7f9; --muted:#d8e3e9; --border:#ffffff24; color:var(--text); }  .site-header { position:sticky; top:0; z-index:30; background:linear-gradient(110deg,#253641f5,#182b39f5); border-bottom:1px solid #76cbea52; box-shadow:0 5px 22px #10273320; backdrop-filter:blur(18px) } .brand { display:inline-flex; gap:10px; align-items:center; white-space:nowrap; font-size:25px; font-weight:750; letter-spacing:-1.1px; line-height:1.2 } .brand-symbol { display:grid; place-items:center; background:#329ac540; border:1px solid #329ac5; color:#56c2ed; width:38px; height:38px; border-radius:11px } .brand-symbol .icon { width:24px } .brand-light { font-weight:350; color:#ffffff } .site-footer { border-top:1px solid #8ed9f626; background:radial-gradient(ellipse at 45% 0,#8ed9f60a,transparent 65%),linear-gradient(145deg,#213746,#182b39 70%); box-shadow:inset 0 1px 0 #c3ecff0d; } .footer-top { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:start; gap:32px; padding-block:32px; } .footer-top>div:first-child { min-width:0; } .footer-top .brand { font-size:23px; } .footer-top .brand-symbol { width:32px; height:32px; } .footer-top p { max-width:310px; margin-top:12px; color:var(--muted); font-size:14px; line-height:1.7; } .footer-top nav,.footer-social { display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px; color:var(--muted); font-size:14px; font-weight:550; } .footer-top nav { justify-content:center; column-gap:32px; } .footer-top nav,.footer-top .footer-social { min-height:32px; align-self:center; } .site-footer .footer-top nav a,.footer-top .footer-social a { min-height:32px; } .footer-social { justify-content:flex-end; } .footer-top nav a,.footer-social a,.footer-bottom a { display:inline-flex; align-items:center; min-height:36px; transition:color var(--content-motion); } .site-footer .brand-symbol { border:0; background:transparent; color:#9fe9ff; } .site-footer .footer-link { position:relative; gap:6px; font-weight:550; text-decoration:none; } .site-footer .footer-link::after { content:""; position:absolute; inset:auto 0 4px; height:1px; background:#9fe9ff99; transform:scaleX(0); transform-origin:left; transition:transform var(--content-motion); pointer-events:none; } .site-footer .footer-link:hover::after,.site-footer .footer-link:focus-visible::after { transform:scaleX(1); } .site-footer .footer-link-arrow { transition:transform var(--content-motion); } .footer-social .footer-link:hover .footer-link-arrow,.footer-social .footer-link:focus-visible .footer-link-arrow { transform:translate(2px,-2px); } .footer-bottom .footer-link { color:#b8d7e7; } .footer-bottom .footer-link:hover .footer-link-arrow,.footer-bottom .footer-link:focus-visible .footer-link-arrow { transform:translateY(-2px); } .site-footer a:hover,.site-footer a:focus-visible { color:#bcefff; } .site-footer a:focus-visible { outline:2px solid #a5e4ff; outline-offset:4px; border-radius:3px; } .footer-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px 24px; border-top:1px solid #8ed9f626; padding-block:16px; font-size:13px; line-height:1.7; color:var(--muted); } .footer-bottom>a { justify-self:end; } @media(max-width:1150px) { .brand { font-size:23px; } .footer-top { gap:24px; } .footer-top nav,.footer-social { gap:8px 16px; } .footer-top nav { column-gap:24px; } } @media(max-width:1000px) { .footer-top { grid-template-columns:minmax(0,1fr) auto; gap:20px 32px; } .footer-top>div:first-child { grid-column:1/-1; } .footer-top nav { justify-content:flex-start; } .footer-bottom { grid-template-columns:1fr auto; } .footer-bottom>span:nth-child(2) { grid-column:1; grid-row:2; } .footer-bottom>a { grid-column:2; grid-row:1/3; } } @media(max-width:680px) { .brand { font-size:24px; } .brand-symbol { width:34px; height:34px; } .footer-top { grid-template-columns:minmax(0,1fr); gap:16px; padding-block:28px; } .footer-top>div:first-child { grid-column:auto; } .footer-top nav,.footer-social { justify-content:flex-start; gap:8px 24px; } .footer-top nav { column-gap:28px; } .footer-top p { max-width:none; } .footer-bottom { grid-template-columns:minmax(0,1fr); gap:6px; padding-block:16px; } .footer-bottom>span:nth-child(2),.footer-bottom>a { grid-column:auto; grid-row:auto; } .footer-bottom>a { justify-self:start; } } @media(prefers-reduced-motion:reduce) { .footer-top nav a,.footer-social a,.footer-bottom a { transition:none; } .site-footer .footer-link::after,.site-footer .footer-link-arrow { transition:none; } .footer-social .footer-link:hover .footer-link-arrow,.footer-social .footer-link:focus-visible .footer-link-arrow,.footer-bottom .footer-link:hover .footer-link-arrow,.footer-bottom .footer-link:focus-visible .footer-link-arrow { transform:none; } }  :root { --separator-light:linear-gradient(90deg,transparent,#6ed6ff80 28%,#c0f0ffb3 50%,#6ed6ff80 72%,transparent); } .site-header::after { content:""; position:absolute; inset:auto 0 -1px; height:1px; background:var(--separator-light); pointer-events:none; } .site-header .navigation { min-height:90px; padding-block:12px; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:24px; } .site-header .brand { justify-self:start; gap:10px; font-size:25px; letter-spacing:-.6px; } .site-header .brand-copy { display:flex; flex-direction:column; gap:6px; } .site-header .brand-signature { color:#8ed9f6; font-size:8px; font-weight:600; line-height:1.4; letter-spacing:.12em; text-transform:none; } .site-header .brand-symbol { position:relative; width:32px; height:40px; border:0; border-radius:0; background:transparent; box-shadow:none; color:#9fe9ff; transition:color 240ms ease; } .site-header .brand:hover .brand-symbol,.site-header .brand:focus-visible .brand-symbol { color:#d5f5ff; } .site-header .brand-symbol .icon { width:32px; height:32px; transition:filter 240ms ease; } .site-header .brand:hover .brand-symbol .icon,.site-header .brand:focus-visible .brand-symbol .icon { filter:drop-shadow(0 0 5px #6ed6ff66); } .site-header .nav-links { display:flex; align-items:center; justify-content:center; gap:22px; padding:8px 0; } .site-header .nav-links a { position:relative; isolation:isolate; border:0; border-radius:0; background:transparent; box-shadow:none; color:#e7f4fc; transition:color 240ms ease,text-shadow 240ms ease; } .site-header .nav-links a { display:flex; align-items:center; justify-content:center; min-height:50px; gap:8px; min-width:0; padding:11px 14px; font-size:17px; font-weight:600; letter-spacing:.035em; line-height:1.4; white-space:nowrap; } .site-header .nav-links a:hover { color:#bcefff; } .site-header .nav-links a>.icon { width:18px; height:18px; color:#9fe9ff; transition:color 240ms ease,filter 240ms ease; } .site-header .nav-links a:hover>.icon,.site-header .nav-links a:focus-visible>.icon { color:#d5f5ff; filter:drop-shadow(0 0 3px #9fe9ff38); } .site-header .nav-links a[aria-current],.site-header .nav-links a.active { background:transparent; color:#f4fcff; text-shadow:0 0 10px #9fe9ff26; } .site-header .nav-links a[aria-current]>.icon,.site-header .nav-links a.active>.icon { color:#bcefff; filter:drop-shadow(0 0 4px #9fe9ff33); } .site-header .nav-links a::after { content:""; position:absolute; left:50%; transform:translateX(-50%) scaleX(.5); bottom:5px; width:24px; height:3px; border-radius:2px; background:#a7edff; box-shadow:0 0 6px #7ee2ff40; opacity:0; transition:opacity 240ms ease,transform 240ms ease; pointer-events:none; } .site-header .nav-links a:hover::after,.site-header .nav-links a:focus-visible::after,.site-header .nav-links a[aria-current]::after,.site-header .nav-links a.active::after { opacity:1; transform:translateX(-50%) scaleX(1); } .site-header .nav-links a[aria-current]::after,.site-header .nav-links a.active::after { box-shadow:0 0 7px #7ee2ff66,0 0 12px #7ee2ff1f; } .site-header .nav-links a:focus-visible { outline:2px solid #a5e4ff; outline-offset:2px; } .nav-edge-glint { display:none; } .nav-edge-glint { display:none; position:absolute; left:50%; bottom:5px; width:24px; height:3px; transform:translateX(-50%); border-radius:2px; overflow:hidden; pointer-events:none; z-index:1; } .site-header .nav-links a[aria-current] .nav-edge-glint,.site-header .nav-links a.active .nav-edge-glint { display:block; } .nav-edge-glint::before { content:""; position:absolute; inset:0 auto 0 0; width:32%; background:linear-gradient(90deg,transparent,#9fe9ff66 25%,#f0fdff 50%,#9fe9ff66 75%,transparent); filter:blur(.25px); transform:translateX(-110%); animation:nav-edge-pass 4.4s ease-in-out infinite; } @keyframes nav-edge-pass { 0% { transform:translateX(-110%); opacity:0; } 9% { opacity:.85; } 59% { opacity:.85; } 70%,100% { transform:translateX(330%); opacity:0; } } @media(prefers-reduced-motion:reduce) { .nav-edge-glint { display:none!important; } .nav-edge-glint::before { animation:none; } } .site-header .nav-cta { justify-self:end; display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:0; color:#e7f4fc; font-size:15px; font-weight:650; line-height:1.5; white-space:nowrap; transition:color 240ms ease,text-shadow 240ms ease; } .site-header .nav-cta:hover,.site-header .nav-cta:focus-visible { color:#bcefff; text-shadow:0 0 10px #9fe9ff33; } .site-header .nav-cta:focus-visible { outline:2px solid #a5e4ff; outline-offset:4px; } .site-header .nav-cta>.icon { width:18px; height:18px; color:#9fe9ff; transition:transform var(--button-transition),color var(--button-transition); } .site-header .nav-cta:hover>.icon,.site-header .nav-cta:focus-visible>.icon { transform:translate(2px,-2px); } .site-header .menu-toggle { display:none; } @media(min-width:1151px) and (max-width:1280px) { .site-header .nav-links { gap:10px; } .site-header .nav-links a { padding-inline:10px; gap:6px; font-size:17px; } } @media(max-width:1150px) { .site-header .brand { font-size:23px; gap:10px; } .site-header .brand-symbol { width:30px; height:38px; } .site-header .navigation { gap:16px; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); } .site-header .nav-links { gap:10px; justify-self:center; } .site-header .nav-links a { min-width:0; padding-inline:10px; gap:6px; letter-spacing:.02em; font-size:16px; } .site-header .nav-links a>.icon { width:18px; height:18px; } .site-header .nav-cta { font-size:14px; gap:12px; } } @media(max-width:1000px) { .site-header .navigation { grid-template-columns:auto 1fr; } .site-header .nav-cta { display:none; } .site-header .nav-links { justify-self:end; gap:10px; } } @media(min-width:681px) and (max-width:740px) { .site-header .nav-links { gap:7px; } .site-header .nav-links a { padding-inline:6px; gap:5px; font-size:13px; } .site-header .nav-links a>.icon { width:16px; height:16px; } } @media(max-width:680px) { .site-header .brand-signature { font-size:8px; letter-spacing:.06em; } .site-header .brand { font-size:22px; gap:8px; } .site-header .brand-symbol { width:28px; height:36px; } .site-header .brand-symbol .icon { width:28px; height:28px; } .site-header .navigation { min-height:70px; grid-template-columns:1fr auto; padding-block:10px; gap:14px; } .site-header .menu-toggle { display:flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:10px 14px; color:#e7f4fc; border:1px solid #7abed180; border-radius:12px 4px 12px 4px; background:linear-gradient(165deg,#304e60,#213746); box-shadow:inset 0 1px 0 #c3ecff21,0 4px 10px #07131e30; font-size:14px; } .site-header .nav-links { display:grid; grid-template-columns:1fr 1fr; grid-column:1/-1; width:100%; gap:12px; padding:4px 0; justify-self:stretch; } .site-header .nav-links a { min-height:48px; padding-inline:12px; font-size:17px; } .site-header .nav-links a>.icon { width:18px; height:18px; } .js-menu .site-header .nav-links { display:none; } .js-menu .site-header .nav-links.is-open { display:grid; } } @media(prefers-reduced-motion:reduce) { .site-header .nav-links a:hover { transform:none; } .site-header .nav-cta:hover>.icon,.site-header .nav-cta:focus-visible>.icon { transform:none; } } @media(max-width:370px) { .site-header .menu-toggle { width:44px; padding:10px; gap:0; font-size:0; } .site-header .menu-toggle span { font-size:18px; } }  body.is-routing { cursor:progress; } .app-content { min-height:55vh; outline:none; } body.is-routing::after { content:""; position:fixed; inset:0 0 auto; height:2px; z-index:100; background:var(--cyan); } #toast { display:none; position:fixed; right:24px; bottom:24px; z-index:110; padding:18px 24px; max-width:calc(100% - 48px); color:var(--text); background:var(--surface-raised); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); } #toast.show { display:block; } .toast-content { display:flex; gap:12px; align-items:center; font-size:14px; }  .app-content :is(.hero-actions,.portfolio-cta-copy,.contact-form) .button::before { display:block; background:linear-gradient(110deg,transparent 43%,#d5f5ff1f 49%,#9fe9ff14 52%,transparent 58%); background-size:300% 100%; background-position:100% 0; opacity:0; transition:none; } .app-content :is(.hero-actions,.portfolio-cta-copy,.contact-form) .button:hover::before { animation:hero-cta-reflection 650ms ease-out 1; } .app-content :is(.hero-actions,.portfolio-cta-copy,.contact-form) .button .icon { transition:transform 300ms ease; } .app-content :is(.hero-actions,.portfolio-cta-copy,.contact-form) .button:hover .icon { transform:translateX(3px); } @keyframes hero-cta-reflection { 0% { background-position:100% 0; opacity:0; } 20%,75% { opacity:1; } 100% { background-position:0 0; opacity:0; } } @media(prefers-reduced-motion:reduce) { .app-content :is(.hero-actions,.portfolio-cta-copy,.contact-form) .button,.app-content :is(.hero-actions,.portfolio-cta-copy,.contact-form) .button .icon { transition:none; } .app-content :is(.hero-actions,.portfolio-cta-copy,.contact-form) .button:hover::before { animation:none; } .app-content :is(.hero-actions,.portfolio-cta-copy,.contact-form) .button:hover .icon { transform:none; } } .app-content .button::before { display:none; } .app-content .button:hover,.app-content .button:focus-visible { transform:none; } .app-content .button:hover .icon { transform:translateX(2px); } .app-content .button { border-radius:8px; gap:12px; --button-transition:300ms ease; --button-background:var(--button-primary-background); --button-background-hover:var(--button-primary-background); --button-color:var(--button-primary-text); --button-color-hover:#f4fcff; --button-border:var(--button-primary-border); --button-border-hover:var(--button-primary-border-hover); --button-shadow:var(--button-primary-shadow); --button-shadow-hover:var(--button-primary-shadow-hover); --button-focus:#a5e4ff; border-top-color:#a9dff36b; } .app-content .button::after { display:none; } .app-content .button .icon { transition:transform var(--button-transition); } @media(hover:hover) { .app-content .button:hover:not(:disabled):not([aria-disabled="true"]) { transform:translateY(-2px); border-top-color:#c3ecff99; } .app-content .button:hover:not(:disabled):not([aria-disabled="true"]) .icon { transform:translateX(3px); } } .app-content .text-link { --secondary-underline:var(--cyan); --secondary-link-motion:250ms cubic-bezier(.22,1,.36,1); color:var(--text); font-weight:600; text-decoration:none; transition:color var(--secondary-link-motion); } .app-content .text-link-label { position:relative; } .app-content .text-link-label::after { content:""; position:absolute; inset:auto 0 -4px; height:1px; background:var(--secondary-underline); transform:scaleX(0); transform-origin:left; transition:transform var(--secondary-link-motion); pointer-events:none; } .app-content .text-link:hover,.app-content .text-link:focus-visible { color:var(--content-link-hover,#091d29); text-decoration:none; text-shadow:none; } .app-content .text-link:hover .text-link-label::after,.app-content .text-link:focus-visible .text-link-label::after { transform:scaleX(1); } .app-content .text-link .icon { color:currentColor; transition:transform var(--secondary-link-motion); } .app-content .text-link:hover .icon,.app-content .text-link:focus-visible .icon { transform:translateX(5px); } .app-content h2,.app-content h3 { font-weight:600; } .app-content .icon-box { background:transparent; border:0; border-radius:0; box-shadow:none; } @media(prefers-reduced-motion:reduce) { .app-content .button,.app-content .button .icon { transition:none; } .app-content .button:hover:not(:disabled):not([aria-disabled="true"]),.app-content .button:hover:not(:disabled):not([aria-disabled="true"]) .icon { transform:none; } .app-content .button:hover .icon,.app-content .text-link:hover .icon { transform:none; } .app-content .text-link,.app-content .text-link .icon,.app-content .text-link-label::after { transition:none; } .app-content .text-link:focus-visible .icon { transform:none; } }  .skill-toggle { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; margin-top:12px; padding:10px 0; border:0; border-radius:0; background:transparent; color:#9fe9ff; font-size:12px; font-weight:650; text-align:left; transition:color var(--content-motion),border-color var(--content-motion),text-shadow var(--content-motion); } .skill-toggle[hidden] { display:none; } .skill-toggle:hover,.skill-toggle:focus-visible { color:#d5f5ff; border-color:#9fe9ff80; text-shadow:0 0 10px #9fe9ff1a; } .skill-toggle .icon { width:18px; height:18px; transition:transform 300ms ease; } .skill-toggle[aria-expanded="true"] .icon { transform:rotate(180deg); } .skill-card-interactive .skill-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows 300ms cubic-bezier(.22,1,.36,1); } .skill-card-interactive .skill-panel[aria-hidden="false"] { grid-template-rows:1fr; } .skill-panel-content { min-height:0; overflow:hidden; } @media(prefers-reduced-motion:reduce) { .skill-toggle,.skill-toggle .icon,.skill-card-interactive .skill-panel { transition:none; } } .photo-hero { --photo-hero-edge:max(48px,calc((100vw - var(--width))/2)); position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:56px; min-height:580px; margin:0; padding:64px 0 48px; border:0; border-radius:0; background:none; box-shadow:none } .photo-hero-visual { position:absolute; z-index:-1; inset:0 auto 0 calc(-1 * var(--photo-hero-edge)); width:calc(64% + var(--photo-hero-edge)); margin:0; overflow:hidden; pointer-events:none; mask-image:linear-gradient(90deg,#000 22%,#000000fa 34%,#000000df 45%,#00000099 57%,#00000047 69%,#00000012 79%,transparent 86%),linear-gradient(180deg,#000 78%,transparent); mask-composite:intersect; } .photo-hero-visual img { width:calc(100% + 64px); max-width:none; height:100%; object-fit:cover; object-position:35% center; border:0; border-radius:0; box-shadow:none; } .photo-hero::after { content:""; position:absolute; z-index:-1; inset:0 0 0 calc(-1 * var(--photo-hero-edge)); background:linear-gradient(180deg,transparent 8%,#b9e5fa0a 48%,#b9e5fa14 76%,transparent),radial-gradient(ellipse at 30% 30%,#a9e6ff12,transparent 65%); pointer-events:none; } .photo-hero-copy { grid-column:2; min-width:0; } .photo-hero-copy>.eyebrow { margin-bottom:18px; } .photo-hero-copy>h1 { max-width:520px; font-size:clamp(28px,2.6vw,38px); font-weight:650; line-height:1.25; letter-spacing:-.025em; } @media(max-width:1150px) { .photo-hero { --photo-hero-edge:32px; gap:32px; } } @media(max-width:1000px) { .photo-hero { min-height:560px; padding:52px 0 40px; } } @media(max-width:760px) { .photo-hero { display:block; min-height:0; padding:0 0 24px; } .photo-hero-visual { position:relative; inset:auto; width:calc(100% + var(--photo-hero-edge)); height:280px; margin-left:calc(-1 * var(--photo-hero-edge)); mask-image:linear-gradient(90deg,#000 65%,#00000080 87%,transparent),linear-gradient(180deg,#000 68%,transparent); } .photo-hero-visual img { width:100%; object-position:35% 55%; } .photo-hero-copy>h1 { font-size:30px; } } @media(max-width:680px) { .photo-hero { --photo-hero-edge:20px; } } @media(max-width:370px) { .photo-hero { --photo-hero-edge:16px; } } .project-cta.pricing-conversation { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:56px; padding:48px 0; margin-block:var(--space-section); border:0; border-radius:0; background:none; box-shadow:none; } .pricing-conversation-art { width:100%; max-width:440px; justify-self:center; color:var(--blue); opacity:.65; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .pricing-conversation-art svg { display:block; width:100%; height:auto; } .pricing-conversation-copy { min-width:0; } .project-cta.pricing-conversation h2 { max-width:560px; font-size:clamp(28px,2.6vw,38px); font-weight:650; line-height:1.25; letter-spacing:-.025em; } .project-cta.pricing-conversation p:not(.eyebrow) { max-width:480px; margin-top:20px; font-size:16px; line-height:1.7; } .project-cta.pricing-conversation .button { margin-top:28px; } @media(max-width:760px) { .project-cta.pricing-conversation p:not(.eyebrow) { font-size:15px; } } @media(max-width:760px) { .project-cta.pricing-conversation { grid-template-columns:minmax(0,1fr); gap:20px; padding:32px 0; } .pricing-conversation-art { max-width:240px; opacity:.55; } }