/* Base styles, carried over from the <helmet> block of the original v2 template. */
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:#FFFFFF;color:#1C2330;font-family:'Figtree',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty}
a{color:#1E4FA3;text-decoration:none}
a:hover{color:#13213C}
*{box-sizing:border-box}
img{max-width:100%}
input,select,textarea,button{font:inherit}
[data-desk]{display:flex}
[data-mob]{display:none}
@media (max-width:860px){
  [data-desk]{display:none}
  [data-mob]{display:flex}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* `hidden` has to beat the inline `display:flex` on the menu and the lightbox. */
[hidden]{display:none !important}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:#13213C;padding:12px 18px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}

/* Hover states, extracted from the original style-hover attributes.
   Class + :hover outranks the plain `a:hover` rule above. */
.h-nav:hover{color:#1E4FA3}
.h-green:hover{background:#1E8E4D}
.h-ghost:hover{background:rgba(255,255,255,.18)}
.h-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(19,33,60,.10)}
.h-zoom:hover{transform:scale(1.03)}
.h-outline:hover{background:#1E4FA3;color:#fff}
.h-row:hover{border-color:#1E4FA3}
.h-amber:hover{color:#F5A623}

/* Focus states, extracted from the original style-focus attributes. */
.f-slider:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px #1E4FA3}
.f-field:focus{outline:none;border-color:#1E4FA3;box-shadow:0 0 0 3px rgba(30,79,163,.15)}

/* Before/after comparison slider. The React version recomputed inline styles on
   every pointer move; here the drag only writes --split and CSS does the rest. */
#cmp{--split:50%}
#cmp .cmp-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
#cmp .cmp-handle{left:var(--split)}