@font-face{font-family:"Commissioner";src:url(fonts/commissioner-var.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{
  --paper:#f3f6f7;
  --white:#fbfcfc;
  --navy:#162947;
  --navy-2:#20365c;
  --ink:#162947;
  --ink-2:#4a5a72;
  --mute:#8e9bab;
  --aqua:#4df2d3;
  --line:#d9e1e7;
  --pad:clamp(20px,4.6vw,72px);
  --ease:cubic-bezier(.22,1,.36,1);
  --hd:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:var(--hd)}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font:400 17px/1.6 "Commissioner",system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01"}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:600;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
h2{font-size:clamp(36px,5vw,72px)}
::selection{background:var(--aqua);color:var(--navy)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;font-size:16px;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),background-color .25s,color .25s}
.btn:active{transform:scale(.97)}
.btn--navy{background:var(--navy);color:var(--white)}
.btn--navy:hover{background:var(--navy-2)}
.btn--glass{background:rgba(251,252,252,.78);color:var(--navy);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(22,41,71,.14)}
.btn--glass:hover{background:var(--white)}
.btn--aqua{background:var(--aqua);color:var(--navy)}
.link{font-weight:600;color:var(--navy);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:rgba(22,41,71,.35);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--navy)}

/* header */
.hd{position:fixed;z-index:50;top:0;left:0;right:0;height:var(--hd);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--pad);transition:background-color .35s,box-shadow .35s}
.hd.is-solid{background:rgba(251,252,252,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.hd__logo img{height:52px;width:auto}
.hd__nav{display:flex;gap:34px;margin-left:auto;margin-right:12px}
.hd__nav a{font-size:15px;font-weight:500;text-decoration:none;color:var(--navy);opacity:.82;transition:opacity .2s}
.hd__nav a:hover{opacity:1}
.hd__call{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;border-radius:999px;background:var(--navy);color:var(--white);font-size:15px;font-weight:600;text-decoration:none}
.hd__call svg{width:16px;height:16px;fill:var(--aqua)}

/* 1 hero */
.hero{position:relative;height:100svh;min-height:640px;max-height:1100px;overflow:hidden;background:#cfe3f3}
.hero__pic,.hero__pic img{position:absolute;inset:0;width:100%;height:100%}
.hero__pic img{object-fit:cover;object-position:60% 50%}
.hero__veil{position:absolute;inset:0;background:linear-gradient(98deg,rgba(238,245,250,.92) 0%,rgba(238,245,250,.8) 34%,rgba(238,245,250,0) 58%)}
.hero__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hd) + 20px) var(--pad) 60px;max-width:calc(720px + 2 * var(--pad))}
.hero h1{font-size:clamp(44px,5.6vw,86px);font-weight:600;letter-spacing:-.04em;line-height:.98;color:var(--navy)}
.hero__sub{margin-top:24px;max-width:31em;font-size:clamp(17px,1.4vw,20px);font-weight:500;line-height:1.5;color:var(--navy);text-wrap:pretty}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__rate{order:-1;display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;font-size:15px;font-weight:500;color:var(--navy);text-decoration:none;align-self:flex-start}
.hero__rate b{font-weight:700}
.stars{color:#f2b33d;letter-spacing:2px;font-size:15px}

/* 2 glass (wow) */
.glass{position:relative;height:270svh;background:var(--navy)}
.glass__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.glass__pic,.glass__pic img{position:absolute;inset:0;width:100%;height:100%}
.glass__pic img{object-fit:cover;object-position:50% 40%}
.glass__fog{position:absolute;inset:0;width:100%;height:100%;display:block}
.glass__before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 var(--pad);pointer-events:none}
.glass__before p{max-width:12em;text-align:center;font-size:clamp(38px,5.4vw,80px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--navy);text-wrap:balance}
.glass__after{position:absolute;left:0;right:0;bottom:0;padding:120px var(--pad) clamp(40px,7vh,80px);background:linear-gradient(0deg,rgba(13,26,48,.82) 0%,rgba(13,26,48,.55) 50%,rgba(13,26,48,0) 100%);color:var(--white)}
.glass__after h2{max-width:11em}
@media (min-width:761px){
  .glass__after{left:auto;top:0;bottom:0;right:0;width:min(560px,44vw);display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--pad) clamp(48px,9vh,96px) clamp(56px,6vw,110px);background:linear-gradient(270deg,rgba(13,26,48,.9) 0%,rgba(13,26,48,.8) 62%,rgba(13,26,48,0) 100%)}
  .glass__after h2{font-size:clamp(36px,3.8vw,58px)}
}
.glass__after p{margin-top:16px;max-width:34em;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:#dfe8f0}
html:not(.js-fx) .glass{height:auto}
html:not(.js-fx) .glass__stage{position:relative}
html:not(.js-fx) .glass__fog,html:not(.js-fx) .glass__before{display:none}

/* 3 services */
.svc{padding:clamp(96px,12vw,170px) var(--pad) clamp(80px,10vw,150px);background:var(--paper)}
.svc__head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px 72px;align-items:end;max-width:1360px;margin:0 auto clamp(48px,6vw,88px)}
.svc__head p{max-width:30em;font-size:clamp(17px,1.35vw,20px);color:var(--ink-2)}
.svc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);max-width:1360px;margin:0 auto}
.svc__frame{position:relative}
.svc__pics{position:sticky;top:calc(var(--hd) + 28px);height:calc(100svh - var(--hd) - 56px);max-height:820px;border-radius:14px;overflow:hidden;background:#dfe7ec}
.svc__pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);opacity:0;clip-path:inset(100% 0 0 0);transition:opacity .01s linear .9s,clip-path .9s var(--ease)}
.svc__pics img.on{opacity:1;clip-path:inset(0 0 0 0);z-index:2;transition:clip-path .9s var(--ease),opacity 0s}
.svc__pics img.was{opacity:1;clip-path:inset(0 0 0 0);z-index:1;transition:none}
.svc__list{counter-reset:s}
.svc__list li{min-height:46svh;display:flex;flex-direction:column;justify-content:center;padding:32px 0;border-top:1px solid var(--line)}
.svc__list li:first-child{border-top:0;min-height:42svh;justify-content:flex-start;padding-top:0}
.svc__list li:last-child{min-height:56svh}
.svc__list h3{font-size:clamp(30px,3.4vw,52px);color:var(--mute);transition:color .5s var(--ease)}
.svc__list p{margin-top:16px;max-width:30em;font-size:clamp(16px,1.25vw,19px);color:var(--ink-2);opacity:.55;transition:opacity .5s var(--ease)}
.svc__list li.on h3{color:var(--navy)}
.svc__list li.on p{opacity:1}

/* 4 away */
.away{background:var(--navy);color:var(--white);padding:clamp(96px,12vw,170px) var(--pad)}
.away__in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr);gap:clamp(48px,7vw,120px);align-items:start;max-width:1360px;margin:0 auto}
.away h2{max-width:13em}
.away__lead{margin-top:26px;max-width:32em;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:#c9d5e3}
.away__list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:clamp(40px,5vw,64px);max-width:720px}
.away__list li{position:relative;padding:17px 0 17px 30px;border-top:1px solid rgba(251,252,252,.14);font-size:clamp(17px,1.3vw,19px);font-weight:500}
.away__list li::before{content:"";position:absolute;left:0;top:50%;width:14px;height:8px;margin-top:-6px;border-left:2px solid var(--aqua);border-bottom:2px solid var(--aqua);transform:rotate(-45deg)}
.away__person{padding-top:8px}
.away__photo{aspect-ratio:4/4.4;border-radius:14px;overflow:hidden;background:#c7ccd3}
.away__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.away__person figcaption{display:flex;flex-direction:column;margin-top:18px}
.away__person figcaption b{font-size:20px;font-weight:600}
.away__person figcaption span{font-size:15px;color:#9fb0c6}
.away__person blockquote{margin-top:30px;padding-top:26px;border-top:1px solid rgba(251,252,252,.14)}
.away__person blockquote p{font-size:clamp(18px,1.45vw,21px);line-height:1.5;color:var(--white)}
.away__person cite{display:block;margin-top:12px;font-style:normal;font-size:14.5px;color:var(--aqua)}

/* 5 trust */
.trust{padding:clamp(96px,12vw,170px) var(--pad) clamp(80px,10vw,140px);background:var(--white)}
.trust__head{max-width:1360px;margin:0 auto}
.trust__stars{color:#f2b33d;font-size:22px;letter-spacing:4px}
.trust__head h2{margin-top:14px;max-width:14em}
.trust__head h2 span{color:var(--mute)}
.trust__head .link{display:inline-block;margin-top:26px;font-size:16px}
.trust__quotes{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto auto;gap:0 clamp(40px,6vw,96px);max-width:1360px;margin:clamp(56px,7vw,96px) auto 0}
.q{padding:30px 0;border-top:1px solid var(--line)}
.q p{font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--ink)}
.q cite{display:block;margin-top:14px;font-style:normal;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.q--big{grid-row:span 2}
.q--big p{font-size:clamp(24px,2.5vw,36px);line-height:1.32;letter-spacing:-.02em;font-weight:500}
.trust__clients{max-width:1360px;margin:clamp(64px,8vw,112px) auto 0;padding-top:34px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:24px 72px}
.trust__clients h3{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.02em;line-height:1.25;max-width:11em}
.trust__clients ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 32px}
.trust__clients li{font-size:clamp(16px,1.25vw,18px);font-weight:500;color:var(--ink-2)}

/* demo */
.demo{position:relative;overflow:hidden;height:min(110svh,1000px);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);pointer-events:none;background:var(--white)}
.demo__blur{filter:blur(10px);padding:40px var(--pad) 0;opacity:.9}
.d-gal{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px}
.d-gal img{aspect-ratio:4/3.2;object-fit:cover;width:100%;border-radius:14px}
.d-contact{margin-top:72px}
.d-contact h2{font-size:clamp(34px,4vw,60px)}
.d-contact p{padding:16px 0;border-top:1px solid var(--line);font-size:22px}
.demo__card{position:relative;z-index:5;width:min(540px,calc(100% - 2*var(--pad)));margin:calc(-1 * min(78svh,720px)) auto clamp(80px,12vw,160px);padding:clamp(28px,3vw,40px);border-radius:16px;background:var(--white);box-shadow:0 30px 60px -30px rgba(22,41,71,.45);text-align:center}
.demo__k{font-size:14px;font-weight:600;color:#0f8f7c}
.demo__t{margin-top:10px;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.15;color:var(--navy)}
.demo__d{margin:12px auto 24px;color:var(--ink-2);max-width:38ch}

/* reveal */
.js-fx .rv{opacity:0;transform:translateY(26px)}

/* tablet */
@media (max-width:1100px){
  .hd__nav{display:none}
  .trust__clients ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* mobile */
@media (max-width:760px){
  :root{--hd:64px}
  body{font-size:16px}
  .hd__logo img{height:38px}
  .hd__call{height:42px;padding:0 15px;font-size:14.5px}
  .hero{height:100svh;min-height:600px;max-height:none}
  .hero__pic img{object-position:50% 100%}
  .hero__veil{background:linear-gradient(180deg,rgba(238,245,250,.42) 0%,rgba(238,245,250,.3) 40%,rgba(238,245,250,0) 56%)}
  .hero__in{justify-content:flex-start;padding:calc(var(--hd) + 2.5svh) var(--pad) 40px}
  .hero__sub{margin-top:16px;font-size:16.5px}
  .hero__cta{margin-top:24px;gap:10px}
  .hero__cta .btn{flex:1 1 0;padding:0 14px;height:52px;font-size:15.5px}
  .hero__rate{order:-1;margin:0 0 14px;font-size:14px}
  .hero h1{font-size:clamp(36px,10.2vw,46px)}
  .hero__sub{font-size:16px;line-height:1.48}
  .glass{height:250svh}
  .glass__before p{font-size:clamp(34px,10vw,44px)}
  .glass__after{padding-top:140px}
  .svc{padding-top:96px}
  .svc__head{grid-template-columns:1fr;gap:18px}
  .svc__grid{grid-template-columns:1fr;gap:0}
  .svc__frame{position:sticky;top:var(--hd);z-index:3;padding:8px 0 14px;background:var(--paper)}
  .svc__pics{position:relative;top:0;height:40svh;max-height:none}
  .svc__frame::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(180deg,var(--paper),rgba(243,246,247,0));pointer-events:none}
  .svc__list li{min-height:44svh;padding:26px 0}
  .svc__list li:first-child{min-height:30svh;padding-top:22px}
  .svc__list li:last-child{min-height:40svh}
  .svc__list h3{font-size:30px}
  .away__in{grid-template-columns:1fr}
  .away__list{grid-template-columns:1fr}
  .away__person{max-width:440px}
  .trust__quotes{grid-template-columns:1fr}
  .q--big{grid-row:auto}
  .trust__clients{grid-template-columns:1fr}
  .trust__clients ul{grid-template-columns:1fr 1fr;gap:12px 20px}
  .d-gal{grid-template-columns:1fr 1fr}
  .d-gal img:first-child{grid-column:span 2}
}
@media (max-width:370px){
  .hd__call span{display:none}
  .hero__cta .btn{flex-basis:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}