/* Consistent directional cues, with the action itself carrying the emphasis. */
.pill{padding:12px 18px;gap:14px;min-height:44px}
.pill:hover{transform:none}
.pill .arrow-dot{width:18px;height:18px;border-radius:0;background:transparent;color:inherit}
.pill .arrow-dot svg{width:18px;height:18px;transition:transform .2s ease}
.pill:hover .arrow-dot svg{transform:translateX(3px)}
.header-cta{min-height:40px;padding:10px 16px;gap:13px}
.header-cta .arrow-dot,.inline-cta .arrow-dot{width:16px;height:16px}
.header-cta .arrow-dot svg,.inline-cta .arrow-dot svg{width:16px;height:16px}
.inline-cta{padding:9px 12px;min-height:34px;gap:8px}
.carousel-controls{gap:8px}
.carousel-controls .circle,.gallery-stage .circle{width:44px;height:44px;border-radius:12px;border:1px solid #d8e0e5;background:#fff;color:#17394b;box-shadow:0 2px 5px #12334404}
.carousel-controls .circle:hover,.gallery-stage .circle:hover{background:#eaf1f8;border-color:#b9cbd9;color:#174b6c;transform:none}
.carousel-controls .circle svg,.gallery-stage .circle svg{width:19px;height:19px}
.gallery-stage .circle:hover{transform:translateY(-50%)}
.service-caption .arrow-dot{width:34px;height:34px;border-radius:10px;background:#edf3f7;color:#17394b;border:1px solid #dce5eb}
.service-card:hover .service-caption .arrow-dot{background:#ddeaf3}
.service-caption .arrow-dot svg{width:18px;height:18px}
.image-arrow{width:36px;height:36px;border-radius:10px;color:#17394b;box-shadow:0 2px 12px #071e3515}
.image-arrow svg{width:18px;height:18px}
.footer-project>.circle{width:40px;height:40px;border-radius:12px;background:#fffffff2;color:#17394b;border:1px solid #ffffff80;box-shadow:0 3px 14px #092b4320}
.footer-project>.circle svg{width:19px;height:19px}
.footer-project:hover>.circle{background:#fff;transform:translate(-50%,-50%)}
.mobile-nav>a:last-child svg{width:20px;height:20px}
.project-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 28px}
.project-heading .eyebrow{grid-column:1/-1;margin:0}
.project-heading h2{grid-column:1;width:auto;margin:0}
.project-heading>.pill{grid-column:2;align-self:end;margin:0}

/* The simplified hero keeps only the main headline over the pool. */
.hero-bottom{display:block;bottom:clamp(42px,6.5svh,64px)}
.hero-shade{background:linear-gradient(0deg,rgba(0,32,54,.91) 0%,rgba(0,37,57,.55) 20%,transparent 48%)}
@media(max-width:800px){
 .hero-bottom{bottom:48px}
 .hero-shade{background:linear-gradient(0deg,#00324c 0%,#00324ce8 20%,#00324c65 38%,transparent 64%)}
}
@media(max-width:540px){
 .hero-bottom{bottom:45px}
 .project-heading .pill{padding:10px 12px;min-height:36px;gap:8px}
 .project-heading{gap:13px 16px;align-items:center}
 .project-heading .eyebrow{grid-column:1;grid-row:1;align-self:center}
 .project-heading>.pill{grid-column:2;grid-row:1}
 .project-heading h2{grid-column:1/-1;grid-row:2}
 .project-heading .arrow-dot,.project-heading .arrow-dot svg{width:15px;height:15px}
 .carousel-controls .circle{width:38px;height:38px;border-radius:10px}
 .reviews-aside .carousel-controls .circle{width:34px;height:34px}
 .section-heading{align-items:end}
 .section-heading .carousel-controls{gap:5px;flex:none}
}
@media(max-width:540px) and (max-height:620px){
 .hero-bottom{bottom:39px}
}
@media(min-width:801px) and (max-height:650px){
 .hero-bottom{bottom:38px}
}
@media(prefers-reduced-motion:reduce){.pill .arrow-dot svg{transition:none}.pill:hover .arrow-dot svg{transform:none}}