
:root{--royal:#1A56B4;--sky:#6BA4E8;--teal:#00A896;--teal-dark:#00796b;--ink:#2B2D42;--mist:#EEF4FC;--white:#fff;
--serif:"Cormorant Garamond",Georgia,serif;--sans:Lato,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--royal)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--serif);color:var(--royal);line-height:1.1;font-weight:700}
h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:14px}
h3{font-size:1.5rem;margin-bottom:6px}
section{padding:84px 0}
.lead{max-width:62ch;font-size:1.1rem}
.btn{display:inline-block;padding:14px 28px;border-radius:999px;font-weight:700;text-decoration:none;border:2px solid var(--teal);background:var(--teal);color:#fff;cursor:pointer;font:700 1rem var(--sans);transition:background .2s}
.btn:hover{background:var(--teal-dark);border-color:var(--teal-dark)}
.btn.ghost{background:transparent;color:var(--royal);border-color:var(--royal)}
.btn.ghost:hover{background:var(--royal);color:#fff}

header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid #dbe6f5}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.35rem var(--serif);color:var(--royal)}
.brand img{height:46px;width:46px;object-fit:cover;object-position:50% 45%;transform:scale(1.9);margin-right:10px}
nav ul{display:flex;gap:26px;list-style:none;padding:0;align-items:center}
nav a{text-decoration:none;font-weight:700;font-size:.95rem;color:var(--ink)}
nav a:hover{color:var(--royal)}
nav .btn{color:#fff;padding:9px 20px}
.menu-btn{display:none;background:none;border:0;font-size:1.6rem;color:var(--royal);cursor:pointer}

.hero{background:var(--royal);color:#fff;padding:72px 0 90px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.hero h1{color:#fff;font-size:clamp(2.6rem,6vw,4.6rem)}
.hero p{margin:22px 0 32px;font-size:1.15rem;max-width:52ch;color:#e6efff}
.hero .row{display:flex;gap:14px;flex-wrap:wrap}
.hero .btn.ghost{color:#fff;border-color:#fff}
.hero .btn.ghost:hover{background:#fff;color:var(--royal)}
.disc{background:#fff;border-radius:50%;aspect-ratio:1;display:grid;place-items:center;box-shadow:0 0 0 14px rgba(255,255,255,.12),0 0 0 32px rgba(255,255,255,.06)}
.disc img{width:86%;border-radius:50%}

.pillars{background:var(--mist)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.pillar{border-top:4px solid var(--royal);padding-top:18px}
.pillar:nth-child(2){border-color:var(--sky)}.pillar:nth-child(3){border-color:var(--teal)}

.about .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.cred{font-family:var(--serif);font-size:clamp(2.2rem,4vw,3.2rem);color:var(--royal);font-weight:700;line-height:1.1}
.cred small{display:block;font:400 1rem var(--sans);color:var(--ink);margin-top:12px}
blockquote{margin-top:22px;padding-left:18px;border-left:4px solid var(--teal);font-family:var(--serif);font-size:1.4rem;color:var(--royal);line-height:1.35}

.conds{background:var(--royal);color:#fff}
.conds h2{color:#fff}
.conds ul{list-style:none;padding:0;margin-top:32px;display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
.conds li{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.25)}
.conds strong{font:700 1.45rem var(--serif);display:block}
.conds span{color:#d5e3fa;font-size:.98rem}

.steps{list-style:none;padding:0;margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-top:58px}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;background:var(--sky);color:#fff;display:grid;place-items:center;font:700 1.4rem var(--serif)}
.steps li::after{content:"";position:absolute;top:22px;left:56px;right:-12px;height:2px;background:var(--sky);opacity:.5}
.steps li:last-child::after{display:none}
.steps b{display:block;color:var(--royal);font-size:1.05rem;margin-bottom:4px}
.steps p{font-size:.96rem}

.faq{background:var(--mist)}
.faq .wrap{max-width:820px}
.faq h3.grp{margin:38px 0 8px;font-size:1.7rem}
details{border-bottom:1px solid #c5d6ee;padding:16px 0}
summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--royal);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"\2013"}
details p,details ul{margin-top:10px;max-width:68ch}
details ul{padding-left:20px}

.contact .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px}
.facts{list-style:none;padding:0;margin:26px 0}
.facts li{padding:12px 0;border-bottom:1px solid #dbe6f5}
.facts b{display:block;color:var(--royal)}
form{background:var(--mist);padding:30px;border-radius:14px;display:grid;gap:16px}
label{font-weight:700;font-size:.92rem;display:grid;gap:6px}
input,select,textarea{font:inherit;padding:12px;border:1px solid #b7cbe8;border-radius:8px;background:#fff;color:var(--ink)}
form small{color:#555}

footer{background:var(--ink);color:#cfd3e4;padding:44px 0;font-size:.9rem}
footer a{color:#fff}
footer .row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.fine{margin-top:22px;max-width:80ch;opacity:.85}
.wa{position:fixed;right:18px;bottom:18px;z-index:30;background:#25D366;color:#fff;border-radius:999px;padding:13px 20px;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.25)}

@media(max-width:860px){
 section{padding:60px 0}
 .hero .wrap,.about .wrap,.contact .wrap{grid-template-columns:1fr}
 .disc{max-width:300px;order:-1}
 .grid3,.conds ul{grid-template-columns:1fr}
 .steps{grid-template-columns:1fr 1fr}.steps li::after{display:none}
 .menu-btn{display:block}
 nav ul{display:none;position:absolute;left:0;right:0;top:68px;background:#fff;flex-direction:column;padding:20px 24px;border-bottom:1px solid #dbe6f5;align-items:flex-start}
 nav ul.open{display:flex}
}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

nav ul{gap:20px}
nav a.on{color:var(--royal);border-bottom:2px solid var(--teal)}
.pagehead{background:var(--royal);color:#fff;padding:64px 0}
.pagehead h1{color:#fff;font-size:clamp(2.3rem,5vw,3.6rem)}
.pagehead p{margin-top:14px;max-width:60ch;color:#e6efff;font-size:1.1rem}
.cta{background:var(--mist);text-align:center}
.cta .wrap{display:grid;justify-items:center;gap:18px}
.prose p{margin-bottom:16px;max-width:68ch}
.prose h2{margin-top:36px;font-size:2rem}
.prose h2:first-child{margin-top:0}
.list{padding-left:20px;max-width:68ch;margin-bottom:16px}.list li{margin-bottom:8px}
a.pillar{display:block;text-decoration:none;color:inherit}
a.pillar:hover h3{text-decoration:underline}
.more{display:inline-block;margin-top:10px;font-weight:700}
.note{background:var(--mist);border-left:4px solid var(--teal);padding:16px 20px;max-width:68ch;margin:24px 0}
/* ---- v3: logo fix, motion, details ---- */
body{animation:pg .6s ease both}
@keyframes pg{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(34px)}}
@keyframes float{50%{transform:translateY(-10px)}}

.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--teal),var(--sky));transform:scaleX(0);transform-origin:0 50%;z-index:40}
header{transition:box-shadow .3s}
header.scrolled{box-shadow:0 6px 24px rgba(26,86,180,.12)}
.brand img{height:46px;width:auto;transform:none;margin:0;object-fit:contain;transition:transform .5s}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}

nav a:not(.btn){position:relative;padding:6px 0;border:0!important}
nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .35s}
nav a:not(.btn):hover::after,nav a.on::after{transform:scaleX(1)}

.btn{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,168,150,.3)}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg)}
.btn:hover::after{left:130%;transition:left .7s}

.hero,.pagehead{position:relative;isolation:isolate}
.hero{background:radial-gradient(circle at 85% 12%,#2f72d0 0,transparent 45%),radial-gradient(circle at 8% 95%,#123f8c 0,transparent 50%),var(--royal);padding:72px 0 130px}
.pagehead{background:radial-gradient(circle at 92% 0,#2f72d0,transparent 50%),var(--royal);padding:64px 0 100px}
.pagehead:has(+ .conds){padding-bottom:64px}
.hero::after,.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:60px;z-index:1;background:var(--wave,#fff);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C360 70 360 0 720 30S1080 70 1440 30V60H0Z'/%3E%3C/svg%3E") repeat-x 0 100%/1440px 100%;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30C360 70 360 0 720 30S1080 70 1440 30V60H0Z'/%3E%3C/svg%3E") repeat-x 0 100%/1440px 100%;
 animation:drift 22s linear infinite}
.pagehead:has(+ .conds)::after{display:none}
.pagehead:has(+ .faq){--wave:var(--mist)}
@keyframes drift{to{-webkit-mask-position:-1440px 100%;mask-position:-1440px 100%}}
.pagehead::before{content:"";position:absolute;right:-90px;top:-90px;width:360px;height:360px;border-radius:50%;border:2px solid rgba(255,255,255,.18);box-shadow:0 0 0 40px rgba(255,255,255,.04),0 0 0 90px rgba(255,255,255,.03);animation:float 10s ease-in-out infinite;z-index:-1}

.hero .wrap>div:first-child>*,.pagehead h1,.pagehead p{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero .wrap>div:first-child>*:nth-child(1),.pagehead h1{animation-delay:.1s}
.hero .wrap>div:first-child>*:nth-child(2),.pagehead p{animation-delay:.3s}
.hero .wrap>div:first-child>*:nth-child(3){animation-delay:.5s}

.disc{position:relative;box-shadow:0 24px 60px rgba(0,0,0,.28);transform:translate(var(--tx,0),var(--ty,0));transition:transform .4s ease-out;animation:pop 1.3s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes pop{from{opacity:0;scale:.7}}
.disc::before,.disc::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.55);animation:ripple 6s ease-out infinite;pointer-events:none}
.disc::after{animation-delay:3s}
@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}}
.disc img{animation:float 8s ease-in-out infinite}

.marquee{overflow:hidden;background:#fff;border-bottom:1px solid #dbe6f5;padding:16px 0;white-space:nowrap}
.marquee div{display:inline-flex;animation:slide 40s linear infinite}
.marquee:hover div{animation-play-state:paused}
.marquee span{display:inline-flex;align-items:center;gap:48px;padding-right:48px;font:600 1.5rem var(--serif);color:var(--royal)}
.marquee span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--sky)}
@keyframes slide{to{transform:translateX(-50%)}}

.pillar{background:#fff;border-radius:12px;padding:28px;box-shadow:0 10px 30px rgba(26,86,180,.08);transition:transform .35s,box-shadow .35s}
.pillar:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(26,86,180,.18)}
.more{background:linear-gradient(var(--teal),var(--teal)) 0 100%/0 2px no-repeat;transition:background-size .35s;padding-bottom:2px}
.pillar:hover .more{background-size:100% 2px}

.conds li{position:relative;transition:padding-left .35s}
.conds li::before{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--teal);transition:width .5s}
.conds li:hover{padding-left:14px}
.conds li:hover::before{width:100%}

blockquote::before{content:"\201C";display:block;font-size:4rem;line-height:.6;height:28px;color:var(--teal)}
.about .wrap{isolation:isolate}
.about .cred{position:relative}
.about .cred::before{content:"";position:absolute;left:-50px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--sky),transparent 70%);opacity:.28;z-index:-1;animation:float 9s ease-in-out infinite}

details[open]>p,details[open]>ul{animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}}
summary{transition:color .2s}
summary:hover{color:var(--royal)}

.wa{animation:pulse 3s infinite}
@keyframes pulse{0%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 0 rgba(37,211,102,.55)}70%,100%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 18px rgba(37,211,102,0)}}

.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .steps li::before{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.5,.5,1) .15s}
.js .steps li.in::before{transform:scale(1)}
.js .steps li::after{transform:scaleX(0);transform-origin:left;transition:transform 1s ease .4s}
.js .steps li.in::after{transform:scaleX(1)}

@media(max-width:860px){.hero{padding-bottom:110px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---- portrait ---- */
.portrait{position:relative;max-width:400px;width:100%;margin:0 auto;isolation:isolate}
.portrait .arch{aspect-ratio:3/4;border-radius:999px 999px 18px 18px;overflow:hidden;position:relative;
 background:radial-gradient(circle at 50% 22%,#6BA4E8 0,#2f72d0 38%,var(--royal) 100%);box-shadow:0 24px 50px rgba(26,86,180,.28)}
.portrait .arch::before{content:"";position:absolute;left:50%;top:6%;width:78%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;border:2px solid rgba(255,255,255,.35);animation:ripple 7s ease-out infinite}
.portrait img{position:absolute;inset:auto 0 0 0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.portrait::after{content:"";position:absolute;inset:0;border:2px solid var(--teal);border-radius:999px 999px 18px 18px;transform:translate(14px,14px);z-index:-1;transition:transform .5s}
.portrait:hover::after{transform:translate(8px,8px)}
.portrait figcaption{position:absolute;left:14px;right:14px;bottom:14px;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);box-shadow:0 8px 20px rgba(0,0,0,.15);line-height:1.35}
.portrait figcaption b{display:block;font:700 1.35rem var(--serif);color:var(--royal)}
.portrait figcaption span{font-size:.85rem}
.docband .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:center}
.docband .prose p{margin-bottom:22px}
@media(max-width:860px){.docband .wrap{grid-template-columns:1fr;gap:44px}.portrait{max-width:340px}}

/* ---- portrait: white arch ---- */
.portrait .arch{background:linear-gradient(180deg,#fff 0,#fff 55%,#f1f6fd 100%);border:2px solid #dbe6f5;box-shadow:0 22px 48px rgba(26,86,180,.14)}
.portrait .arch::before{border-color:rgba(107,164,232,.4)}
.portrait figcaption{background:var(--royal);color:#fff;backdrop-filter:none;box-shadow:0 10px 24px rgba(26,86,180,.3)}
.portrait figcaption b{color:#fff}
.portrait figcaption span{color:#d5e3fa}
