:root{
  --ease-smooth: cubic-bezier(.4,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}
html{ scroll-behavior: smooth; }
body{ background:#F7F9FC; color:#2D3748; font-feature-settings:"kern"; }
/* defensive: some display serif fonts ship contextual swash alternates ("calt"/"liga")
   that can visually collide with accented letters; keep these off for predictable diacritics. */
.font-display{ font-feature-settings: "kern" 1, "liga" 0, "calt" 0 !important; font-variant-ligatures: none !important; }

/* ---- reveal-on-scroll ---- */
[data-reveal]{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease-smooth), transform .4s var(--ease-smooth);
}
[data-reveal].is-visible{ opacity:1; transform: translateY(0); }
[data-reveal-stagger] > *{
  opacity:0; transform: translateY(8px);
  transition: opacity .35s var(--ease-smooth), transform .35s var(--ease-smooth);
}
[data-reveal-stagger].is-visible > *{ opacity:1; transform: translateY(0); }
[data-reveal-stagger].is-visible > *:nth-child(1){ transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2){ transition-delay: 60ms; }
[data-reveal-stagger].is-visible > *:nth-child(3){ transition-delay: 120ms; }
[data-reveal-stagger].is-visible > *:nth-child(4){ transition-delay: 180ms; }
[data-reveal-stagger].is-visible > *:nth-child(5){ transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(6){ transition-delay: 300ms; }

/* ---- paw float (signature decorative motif) ---- */
.paw-deco{ position:absolute; pointer-events:none; opacity:.16; animation: paw-float 9s var(--ease-smooth) infinite; }
.paw-deco.d2{ animation-duration: 11s; animation-delay: .6s; opacity:.12; }
.paw-deco.d3{ animation-duration: 7.5s; animation-delay: 1.4s; opacity:.14; }
.paw-deco.d4{ animation-duration: 12.5s; animation-delay: .3s; opacity:.1; }
@keyframes paw-float{
  0%, 100%{ transform: translateY(0) rotate(var(--r, 0deg)); }
  50%{ transform: translateY(-14px) rotate(var(--r, 0deg)); }
}

/* ---- photo placeholder (standard) — primary-soft tint + faint centered paw ---- */
.photo-ph{
  background-color:#EAF6FC;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="%230D2D6E" fill-opacity="0.12"><ellipse cx="32" cy="40" rx="15" ry="13"/><ellipse cx="14" cy="24" rx="7" ry="9"/><ellipse cx="27" cy="14" rx="7.5" ry="9.5"/><ellipse cx="41" cy="14" rx="7.5" ry="9.5"/><ellipse cx="52" cy="26" rx="7" ry="9"/></svg>');
  background-repeat:no-repeat;
  background-position:center;
  background-size:34% auto;
}

.ticked-underline{
  background-image: linear-gradient(transparent calc(100% - 0.3em), rgba(74,159,212,.35) 0);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 .08em;
}

.skip-link{ position:absolute; left:-9999px; top:0; }
.skip-link:focus{ left:1rem; top:1rem; z-index:100; }

a, button, summary, [role="button"]{ cursor:pointer; }

*:focus-visible{ outline: 2.5px solid #4A9FD4; outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal], [data-reveal-stagger] > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .paw-deco{ animation:none !important; }
  .testi-track, .trust-track{ animation:none !important; }
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---- testimonial marquee columns ---- */
.testi-mask{
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}
.testi-track{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
  animation: testi-scroll var(--testi-duration, 24s) linear infinite;
}
@keyframes testi-scroll{
  from{ transform: translateY(0); }
  to{ transform: translateY(-50%); }
}

/* ---- trust marquee (trust stats banner) — CSS-only, GPU-composited ---- */
.trust-marquee{
  overflow:hidden;
  width:100%;
  -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.trust-track{
  width: max-content;
  will-change: transform;
  animation: trust-scroll var(--trust-duration, 40s) linear infinite;
}
@keyframes trust-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.velocity-dot{ opacity:.45; }

/* ---- service cards ---- */
/* Flex direction lives in the markup (`flex` + `lg:flex-col`) so mobile can use
   icon-left rows while desktop keeps top-aligned columns: with auto-rows-fr the
   grid stretches every card to the tallest card's height, and a <button> would
   otherwise vertically-center its contents and misalign the icons/titles. */

/* ---- detail modals (services + team) ---- */
#service-modal > .absolute.inset-0,
#team-modal > .absolute.inset-0{ opacity:0; transition: opacity .25s var(--ease-smooth); }
#service-modal[data-open="true"] > .absolute.inset-0,
#team-modal[data-open="true"] > .absolute.inset-0{ opacity:1; }
#service-modal-panel,
#team-modal-panel{
  opacity:0;
  transform: scale(.96) translateY(8px);
  transition: opacity .25s var(--ease-smooth), transform .25s var(--ease-smooth);
}
#service-modal[data-open="true"] #service-modal-panel,
#team-modal[data-open="true"] #team-modal-panel{
  opacity:1;
  transform: scale(1) translateY(0);
}
@media (prefers-reduced-motion: reduce){
  #service-modal > .absolute.inset-0, #service-modal-panel,
  #team-modal > .absolute.inset-0, #team-modal-panel{ transition:none !important; }
}

/* FAQ accordion content animation via grid-template-rows trick */
.faq-panel{
  display:grid;
  grid-template-rows: minmax(0, 0fr);
  overflow:hidden;
  transition: grid-template-rows .35s var(--ease-smooth);
}
.faq-panel > div{ overflow:hidden; }
.faq-item[data-open="true"] .faq-panel{ grid-template-rows: minmax(0, 1fr); }
.faq-item[data-open="true"] .faq-chevron{ transform: rotate(45deg); }
.faq-chevron{ transition: transform .3s var(--ease-smooth); }
/* mobile row chevron flips instead of the desktop plus rotating into an × */
.faq-chev-m{ transition: transform .3s var(--ease-smooth); }
.faq-item[data-open="true"] .faq-chev-m{ transform: rotate(180deg); }

/* ---- mobile nav: burger box + dropdown card overlay (design option 2a) ---- */
/* burger: 44x44 bordered box, three bars that morph into an × when open */
.mnav-burger{
  width:44px; height:44px; border-radius:12px;
  border:1.5px solid #E2E8F0; background:#fff; color:#0D2D6E;
  display:flex; align-items:center; justify-content:center; padding:0;
  transition: background .12s var(--ease-smooth), border-color .12s var(--ease-smooth);
}
.mnav-burger:hover{ border-color:#4A9FD4; background:#E8F2FA; }
.mnav-burger:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(74,159,212,.35); }
.mnav-burger__bars{ position:relative; width:19px; height:16px; display:block; }
.mnav-burger__bars span{
  position:absolute; left:0; width:19px; height:2px; border-radius:2px; background:currentColor;
  transition: transform .24s var(--ease-smooth), opacity .18s var(--ease-smooth);
}
.mnav-burger__bars span:nth-child(1){ top:0; }
.mnav-burger__bars span:nth-child(2){ top:7px; }
.mnav-burger__bars span:nth-child(3){ top:14px; }
.mnav-burger[aria-expanded="true"] .mnav-burger__bars span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.mnav-burger[aria-expanded="true"] .mnav-burger__bars span:nth-child(2){ opacity:0; }
.mnav-burger[aria-expanded="true"] .mnav-burger__bars span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* overlay sits below the fixed 76px header so header + close stay tappable */
.mnav{ position:fixed; top:76px; left:0; right:0; bottom:0; z-index:40; }
.mnav[hidden]{ display:none; }
.mnav__scrim{
  position:absolute; inset:0; background:rgba(13,45,110,.45);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation: mnavFade .2s ease both;
}
.mnav__card{
  position:relative; margin:12px 14px 0; background:#fff; border-radius:22px;
  box-shadow:0 24px 48px rgba(13,45,110,.16); padding:8px;
  animation: mnavPanel .26s cubic-bezier(.16,1,.3,1) both;
}
@keyframes mnavFade{ from{opacity:0} to{opacity:1} }
@keyframes mnavPanel{ from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:none} }

.mnav-row{
  position:relative; display:flex; align-items:center; gap:14px; width:100%;
  padding:13px 12px; border-radius:14px; background:none;
  transition: background .12s var(--ease-smooth);
}
.mnav-row:hover{ background:#EDF1F6; }
.mnav-row:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(74,159,212,.35); }
.mnav-row[aria-current="page"]::before{
  content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:3px; background:#4A9FD4;
}
.mnav-row__icon{
  width:42px; height:42px; flex:none; border-radius:12px; background:#E8F2FA; color:#3B85B8;
  display:flex; align-items:center; justify-content:center;
}
.mnav-row__text{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mnav-row__label{ font-size:16.5px; font-weight:600; color:#0D2D6E; line-height:1.2; }
.mnav-row__sub{ font-size:12.5px; color:#718096; line-height:1.2; }
.mnav-row__chev{ margin-left:auto; color:#A0AEC0; display:flex; flex:none; }
.mnav__divider{ height:1px; background:#E2E8F0; margin:0 12px; }

.mnav__cta{ margin:8px 4px 4px; background:#E8F2FA; border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.mnav__btn{
  height:44px; border-radius:12px; background:#4A9FD4; color:#fff; font-weight:600; font-size:16px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  transition: background .12s var(--ease-smooth), transform .12s var(--ease-smooth);
}
.mnav__btn:hover{ background:#3B85B8; color:#fff; }
.mnav__btn:active{ background:#163F8C; transform:translateY(1px); }
.mnav__btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(74,159,212,.35); }
.mnav__phone{
  display:flex; align-items:center; justify-content:center; gap:9px;
  color:#0D2D6E; font-size:14.5px; font-weight:600;
}
.mnav__phone:hover{ color:#163F8C; }

@media (prefers-reduced-motion: reduce){
  .mnav__scrim, .mnav__card{ animation:none !important; }
  .mnav-burger__bars span{ transition:none !important; }
}

header.scrolled{ box-shadow: 0 1px 2px rgba(13,45,110,.04), 0 12px 24px -12px rgba(13,45,110,.14); }

.nav-link[aria-current="page"]{ color: #0D2D6E; font-weight: 700; }