:root{
  /* Brand colors */
  --blue:#0F76BC; --yellow:#FAB416; --grey:#4A4F55; --white:#FFFFFF;
  /* Tints and shades derived from the brand colors */
  --blue-deep:#0B5C93; --blue-tint:#E7F1F9; --yellow-tint:#FEF5E3; --grey-soft:#6B7178; --line:#E3E8EE; --ink:#2B2F33;
  --harbor:var(--blue); --harbor-2:var(--blue-deep); --seaglass:var(--blue-tint); --paper:var(--white); --muted:var(--grey-soft); --buoy:var(--yellow);
  --display:"Poppins",system-ui,sans-serif; --body:"Poppins",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--grey);font:400 1.0625rem/1.7 var(--body)}
img,svg{display:block;max-width:100%}
a{color:var(--harbor-2)}
:focus-visible{outline:3px solid var(--buoy);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.015em;margin:0;color:var(--grey)}
h1{font-size:clamp(2.3rem,5.6vw,4rem);font-weight:700}
h2{font-size:clamp(1.75rem,3.6vw,2.6rem);font-weight:700}
h3{font-size:1.2rem;font-weight:600}
p{margin:0 0 1rem;max-width:62ch}

/* top bar */
.bar{background:var(--white);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--grey)}
.brand .mark{width:36px;height:36px}
.wm{font-family:var(--display);font-size:1.3rem;font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.wm b{font-weight:700}
.bar nav a{color:var(--grey);text-decoration:none;font-size:.95rem;font-weight:600;margin-left:24px}
.bar nav a:hover{color:var(--blue)}

/* hero */
.hero{background:var(--blue);color:var(--white);padding:64px 0 0;position:relative;overflow:hidden}
.hero h1{color:var(--white)}
.sun{position:absolute;right:-90px;top:30px;width:min(520px,60vw);opacity:.12;filter:brightness(0) invert(1);pointer-events:none}
.hero .wrap{position:relative;z-index:1;padding-bottom:120px}
.hero .for{font-size:1rem;font-weight:600;color:var(--yellow);margin:0 0 18px}
.hero h1{max-width:15ch}
.hero .lede{font-size:1.25rem;line-height:1.5;color:#EAF3FA;margin:24px 0 32px;max-width:46ch}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:110px;z-index:0}
.wave path.fill{fill:var(--paper)}
.wave path.crest{fill:none;stroke:var(--yellow);stroke-width:4}
@media (prefers-reduced-motion:no-preference){
  .wave path.crest{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 1.8s .3s ease-out forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
}

.btn{display:inline-block;font:600 1rem/1 var(--body);padding:17px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent}
.btn-primary{background:var(--yellow);color:var(--ink)}
.btn-primary:hover{background:#FBC548}
.btn-ghost{color:var(--white);border-color:rgba(255,255,255,.55);margin-left:10px}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.08)}
.btn-dark{background:var(--blue);color:var(--white)}
.btn-dark:hover{background:var(--harbor-2)}

section{padding:80px 0}
.lead-in{color:var(--muted);font-size:1.125rem;margin-top:14px}

/* pains: a plain list with heavy left rule */
.pains{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px 48px}
.pains li{border-left:4px solid var(--yellow);padding:4px 0 4px 20px}
.pains strong{display:block;font-family:var(--display);font-size:1.2rem;font-weight:600;margin-bottom:4px}
.pains span{color:var(--muted)}

/* services as a two-column table-like list */
.services{background:var(--blue-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc{display:grid;grid-template-columns:minmax(180px,260px) 1fr;gap:8px 40px;padding:26px 0;border-top:1px solid #CFE0EE}
.svc:first-of-type{border-top:0}
.svc h3{color:var(--blue)}
.svc p{margin:0;color:var(--muted)}
.svc-list{margin-top:36px}

/* steps: genuine sequence */
.steps{list-style:none;counter-reset:s;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px}
.steps li{counter-increment:s;position:relative;padding-top:58px}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:42px;height:42px;border-radius:50%;background:var(--blue);color:var(--white);font:700 1.1rem/42px var(--display);text-align:center}
.steps p{color:var(--muted)}

/* offer */
.offer{background:var(--yellow-tint)}
.offer .box{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:start}
.offer ul{margin:0 0 24px;padding-left:1.2em}
.offer li{margin-bottom:8px}
.offer .note{font-size:.95rem;color:var(--grey-soft)}

/* about */
.about .box{display:grid;grid-template-columns:1fr 2fr;gap:48px;align-items:start}
.about .who{font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--blue)}
.about .who small{display:block;font-family:var(--body);font-size:1rem;font-weight:400;color:var(--muted);margin-top:6px}

/* faq */
details{border-top:1px solid var(--line);padding:18px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--grey);list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--blue);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"\2212"}
details p{margin:12px 0 0;color:var(--muted)}

/* closing */
.close{background:var(--blue);color:var(--white);text-align:left}
.close h2{color:var(--white)}
.close p{color:#EAF3FA;font-size:1.1rem}
footer{background:var(--grey);color:#C9CDD2;font-size:.9rem;padding:28px 0}
footer .wrap{align-items:center}
.foot-brand{display:flex;align-items:center;gap:16px}
.foot-brand .wm{font-size:1.05rem;color:var(--white)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:var(--white)}

/* home: two doors */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:40px}
.door{display:block;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-top:6px solid var(--blue);padding:32px 28px 28px;border-radius:8px}
.door:hover{border-top-color:var(--yellow)}
.door h3{font-size:1.6rem;margin-bottom:10px}
.door p{color:var(--muted);margin-bottom:18px}
.door .go{font-weight:600;color:var(--blue);text-decoration:underline;text-underline-offset:3px}

@media (max-width:760px){
  .sun{width:300px;right:-110px;top:auto;bottom:40px}
  .wm{font-size:1.1rem}
  .brand .mark{width:30px;height:30px}
  .bar nav a:not(.cta-link){display:none}
  .hero{padding-top:40px}
  .hero .wrap{padding-bottom:90px}
  .btn{width:100%;text-align:center}
  .btn-ghost{margin:12px 0 0}
  section{padding:60px 0}
  .svc,.offer .box,.about .box,.doors{grid-template-columns:1fr}
  .svc{gap:6px}
}