@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-var.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/outfit-var.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107.4%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%}

/* =========================================================================
   SOMOS INSURANCE — faithful rebuild (clean / crisp / smooth)
   White · navy #183153 · blue #3578c2 · Outfit + Inter
   ========================================================================= */
:root {
  --navy:   #183153;
  --navy-2: #21426b;
  --blue:   #B4562F;   /* copper — owner's chosen accent (was #3578c2) */
  --blue-d: #9A4826;
  --ink:    #0d141a;
  --muted:  #56657a;
  --white:  #ffffff;
  --paper:  #f4f7fb;
  --paper-2:#eaf1fa;
  --line:   #e4eaf2;

  --display: 'Outfit', system-ui, sans-serif;
  --body:    'Inter', 'Inter Fallback', system-ui, sans-serif;

  --wrap: 1160px;
  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 18px;
  --radius-lg: 26px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 10px 30px -12px rgba(24,49,83,.18);
  --shadow-lg: 0 30px 70px -28px rgba(24,49,83,.35);

  --step-0: clamp(1rem, .96rem + .2vw, 1.1rem);
  --step-1: clamp(1.12rem, 1rem + .5vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.8rem + 4vw, 4.6rem);
}

*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body {
  font-family: var(--body); font-size: var(--step-0); line-height: 1.6;
  color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display:block; max-width:100%; height:auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
h1,h2,h3 { font-family: var(--display); font-weight: 600; line-height: 1.06; letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2.5px solid var(--blue); outline-offset: 3px; border-radius: 5px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:fixed; top:-60px; left:1rem; z-index:200; background:var(--navy); color:#fff; padding:.7em 1.1em; border-radius:0 0 12px 12px; font-weight:600; transition:top .25s var(--ease); }
.skip:focus { top:0; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); width: 100%; }
.eyebrow { font-family: var(--display); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }

/* ----------------------------- BUTTONS -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--display); font-weight: 600; font-size: var(--step-0); line-height: 1;
  padding: .85em 1.4em; border-radius: 12px; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s;
}
.btn--solid { background: var(--blue); color: #fff; box-shadow: 0 8px 20px -10px rgba(53,120,194,.8); }
.btn--solid:hover { background: var(--blue-d); transform: translateY(-2px); box-shadow: 0 12px 26px -10px rgba(53,120,194,.85); }
.btn--ghost { color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }

/* ----------------------------- HEADER --------------------------------- */
.hdr { position: sticky; top: 0; z-index: 100; background: color-mix(in oklab, var(--white) 86%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s; }
.hdr.is-stuck { border-color: var(--line); box-shadow: 0 6px 20px -16px rgba(24,49,83,.5); }
.hdr__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.brand { display: inline-flex; align-items: baseline; gap: .45rem; }
.brand__word { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: .12em; color: var(--navy); }
.brand__sub { font-family: var(--body); font-weight: 500; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.hdr__right { display: flex; align-items: center; gap: 1rem; }
.hdr__phone { display: inline-flex; align-items: center; gap: .4rem; color: var(--navy); font-weight: 600; font-family: var(--display); font-size: .92rem; }
.hdr__phone:hover { color: var(--blue); }
.hdr__phone svg { color: var(--blue); }
.hdr__login { display: inline-flex; align-items: center; gap: .4rem; color: var(--navy); font-family: var(--display); font-weight: 600; font-size: .9rem; padding: .5rem .2rem; transition: color .2s; }
.hdr__login svg { color: var(--blue); }
.hdr__login:hover { color: var(--blue); }

/* toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); z-index: 300;
  background: var(--navy); color: #fff; font-family: var(--display); font-weight: 500; font-size: .92rem;
  padding: .8em 1.2em; border-radius: 12px; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.lang { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--line); }
.lang__btn { font-family: var(--display); font-weight: 600; font-size: .76rem; letter-spacing: .04em; padding: .42rem .7rem; min-height: 38px; display: inline-flex; align-items: center; border-radius: 100px; color: var(--muted); transition: color .2s, background .2s; }
.lang__btn.is-active { background: var(--navy); color: #fff; }

/* ----------------------------- HERO ----------------------------------- */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); }
.hero__title { font-size: var(--step-4); font-weight: 700; }
.hero__title .accent { color: var(--blue); }
.hero__sub { font-size: var(--step-1); color: var(--muted); margin-top: 1.1rem; max-width: 30ch; }
.hero__cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.8rem; }
/* "quick-pick shelf" — one labeled, framed control instead of three floating icons */
.cover-shelf { margin-top: 1.4rem; }
.cover-shelf__lead { display: inline-block; margin-bottom: .55rem; }
.cover { list-style: none; padding: .4rem; margin: 0; display: inline-flex; gap: .35rem; flex-wrap: wrap; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.cover li { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem .45rem .45rem; border-radius: 10px; background: transparent; font-family: var(--display); font-weight: 600; color: var(--navy); font-size: .95rem; transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); }
.cover__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: transparent; color: var(--blue); box-shadow: none; }
.cover__ic svg { width: 24px; height: 22px; }

/* 2.5D parallax illustration */
.scene { position: relative; perspective: 1100px; }
.scene__glow { position: absolute; inset: 6% 2% 10%; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(60% 60% at 55% 40%, color-mix(in oklab, var(--blue) 26%, transparent), transparent 70%);
  filter: blur(28px); transform: translate3d(var(--gx,0), var(--gy,0), 0); }
.scene__img { position: relative; z-index: 1; width: 100%;
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--sy,0px));
  transform-style: preserve-3d; transition: transform .35s var(--ease);
  filter: drop-shadow(0 24px 30px rgba(24,49,83,.16));
  /* clip a bit of empty sky/foreground and lift the scene up */
  clip-path: inset(3% 0 13% 0); margin-block: -2% -9%; }

/* ----------------------------- PROMISE / WHY -------------------------- */
.band { padding-block: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.band__photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.band__photo img { width: 100%; }
.band__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.6rem); }
.col__h { font-size: var(--step-2); margin-bottom: .7rem; }
.col__h::after { content: ""; display: block; width: 38px; height: 3px; border-radius: 3px; background: var(--blue); margin-top: .6rem; }
.col__p { color: var(--muted); font-size: var(--step-0); }

/* ----------------------------- BACK TO BASICS ------------------------- */
.basics { padding-block: clamp(2.5rem, 6vw, 5rem); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.basics__title { font-size: var(--step-4); font-weight: 700; }
.basics__story { display: grid; gap: 1rem; max-width: 60ch; }
.basics__story p { color: var(--muted); font-size: var(--step-1); line-height: 1.55; }
.basics__kick { color: var(--navy) !important; font-weight: 600; font-family: var(--display); }

/* ----------------------------- WHAT WE COVER, EXPLAINED --------------- */
.explain { padding-block: clamp(2.5rem, 6vw, 5rem); }
.explain__head { max-width: 680px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.explain__h { font-size: var(--step-3); margin: .5rem 0 .7rem; }
.explain__sub { color: var(--muted); font-size: var(--step-1); }
.ecards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.4vw, 1.6rem); max-width: 1000px; margin: 0 auto; }
.ecard { background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.6vw, 1.9rem); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.ecard__head { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.2rem; }
.ecard__ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--blue); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ecard__ic svg { width: 26px; height: 24px; }
.ecard__name { font-size: var(--step-2); color: var(--navy); line-height: 1.1; }
.ecard__tag { color: var(--muted); font-size: .92rem; margin-top: .25rem; }
.ecard__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ecard__list li { position: relative; padding-left: 1.3rem; font-size: .95rem; line-height: 1.45; color: var(--muted); }
.ecard__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.ecard__label { font-family: var(--display); font-weight: 600; color: var(--navy); }
.explain__cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: clamp(1.8rem, 3vw, 2.6rem); }

/* ----------------------------- CARRIERS ------------------------------- */
.carriers { padding-block: clamp(2rem, 4vw, 3rem); background: var(--paper); border-block: 1px solid var(--line); }
.carriers__label { text-align: center; font-family: var(--display); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.6rem; }
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee__track { display: flex; align-items: center; gap: clamp(2.4rem, 5vw, 4.5rem); width: max-content; animation: scroll var(--dur, 48s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes scroll { to { transform: translate3d(-50%, 0, 0); } }
.logo { height: 30px; width: var(--lw, 90px); flex: none; background: var(--navy);
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: .48; transition: opacity .3s var(--ease); }
.logo:hover { opacity: .9; }

/* ----------------------------- STAY PROTECTED ------------------------- */
.protect { background: linear-gradient(135deg, var(--navy), var(--navy-2)); color: #fff; }
.protect__inner { padding-block: clamp(2.6rem, 6vw, 4.5rem); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.protect .eyebrow { color: color-mix(in oklab, var(--blue) 60%, #fff); }
.protect__h { color: #fff; font-size: var(--step-3); margin: .4rem 0 .6rem; }
.protect__sub { color: color-mix(in oklab, #fff 78%, var(--blue)); max-width: 40ch; }
.protect__inner { align-items: start; }
.protect__trust { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .55rem; }
.protect__trust li { position: relative; padding-left: 1.5rem; color: color-mix(in oklab, #fff 82%, var(--blue)); font-size: .95rem; }
.protect__trust li::before { content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; border-radius: 50%; background: color-mix(in oklab, var(--blue) 50%, #fff); box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue) 30%, transparent); }

/* honeypot */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* the white quote card (bottom) */
.protect__card { background: #fff; color: var(--ink); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-lg); }
.qform__req { font-size: .85rem; color: var(--muted); margin-bottom: 1.1rem; }
.qform__cov { border: 0; padding: 0; margin: 0 0 1.1rem; }
.qform__cov legend { font-family: var(--display); font-weight: 600; color: var(--navy); font-size: .92rem; margin-bottom: .6rem; padding: 0; }

/* chips */
.qchips { display: flex; flex-wrap: wrap; gap: .5rem; }
.qchip { font-family: var(--display); font-weight: 600; font-size: .9rem; padding: .5rem .9rem; min-height: 40px; border-radius: 100px; background: var(--paper); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line); transition: all .2s var(--ease); }
.qchip:hover { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }
.qchip.is-on { background: var(--blue); color: #fff; box-shadow: none; }
.qchips--lg .qchip { padding: .6rem 1.1rem; min-height: 44px; }

/* form grid + inputs */
.qform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.qfield-wrap--full { grid-column: 1 / -1; }
.qfield-wrap label { display: block; font-family: var(--display); font-weight: 600; font-size: .8rem; color: var(--navy); margin-bottom: .35rem; }
.qfield-wrap input, .qfield-wrap textarea { width: 100%; font-family: var(--body); font-size: 1rem; padding: .8em 1em; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s; }
.qfield-wrap input::placeholder, .qfield-wrap textarea::placeholder { color: var(--muted); opacity: .8; }
.qfield-wrap input:focus, .qfield-wrap textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
.qfield-wrap input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #c8473f; }
.qform__err { color: #c8473f; font-size: .82rem; margin-top: .35rem; }
.qform__err--contact { margin-top: .6rem; }
.qform__hint { font-size: .82rem; color: var(--muted); margin-top: .7rem; }
.qform__submit { width: 100%; margin-top: 1.1rem; padding: 1em 1.4em; }
.qform__consent { font-size: .78rem; color: var(--muted); margin-top: .9rem; line-height: 1.45; }

/* success panel */
.qsuccess { text-align: center; padding: 1.5rem .5rem; }
.qsuccess__check { width: 60px; height: 60px; margin: 0 auto 1.1rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--blue); }
.qsuccess__h { font-size: var(--step-2); color: var(--navy); margin-bottom: .5rem; }
.qsuccess__sub { color: var(--muted); margin-bottom: 1.2rem; }
.qsuccess__call { display: inline-flex; }
.qsuccess__fallback { font-size: .82rem; color: var(--muted); margin-top: 1rem; }
.qsuccess__again { display: inline-block; margin-top: 1rem; font-family: var(--display); font-weight: 600; color: var(--blue); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }

/* header divider + login chip */
.hdr__div { width: 1px; height: 22px; background: var(--line); }
.hdr__login { box-shadow: inset 0 0 0 1.5px var(--line); padding: .5rem .85rem; border-radius: 10px; }
.hdr__login:hover { box-shadow: inset 0 0 0 1.5px var(--blue); }

/* clickable coverage trio */
.cover__item { cursor: pointer; }
.cover__item:hover, .cover__item:focus-visible { background: #fff; color: var(--blue); box-shadow: inset 0 0 0 1px var(--line); }
.cover__item:hover .cover__ic, .cover__item:focus-visible .cover__ic { color: var(--blue); }

/* hero quick-quote card (desktop) */
.qcard { position: relative; z-index: 3; margin-top: 1.5rem; background: #fff; border-radius: var(--radius-lg); padding: clamp(1.2rem, 2.4vw, 1.6rem); box-shadow: var(--shadow-lg); display: grid; gap: .7rem; }
.qcard__eyebrow { font-family: var(--display); font-weight: 600; font-size: .78rem; letter-spacing: .04em; color: var(--blue); }
.qcard .qchips { margin-bottom: .1rem; }
.qcard__submit { width: 100%; margin-top: .2rem; }
.qcard__reassure { font-size: .8rem; color: var(--muted); text-align: center; }
.qfield { width: 100%; font-family: var(--body); font-size: 1rem; padding: .78em 1em; border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s; }
.qfield::placeholder { color: var(--muted); opacity: .85; }
.qfield:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
.qfield[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #c8473f; }
.qcard__done { display: grid; gap: .8rem; place-items: center; text-align: center; padding: .9rem 0; }
.qcard__done .qsuccess__check { width: 48px; height: 48px; margin: 0; }
.qcard__doneh { font-family: var(--display); font-weight: 600; color: var(--navy); font-size: 1.05rem; }

/* ----------------------------- FOOTER --------------------------------- */
.foot { background: var(--navy); color: color-mix(in oklab, #fff 80%, var(--navy)); padding-block: clamp(2.6rem, 6vw, 4.5rem) 1.6rem; }
.foot__inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-bottom: 2.4rem; border-bottom: 1px solid color-mix(in oklab, #fff 14%, transparent); }
.foot__eyebrow { font-family: var(--display); font-weight: 500; color: color-mix(in oklab, var(--blue) 55%, #fff); font-size: .92rem; margin-bottom: .4rem; }
.foot__phone { display: inline-block; font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.6rem); letter-spacing: -.02em; color: #fff; line-height: 1; }
.foot__phone:hover { color: color-mix(in oklab, var(--blue) 50%, #fff); }
.foot__email { display: inline-block; margin-top: .8rem; color: color-mix(in oklab, var(--blue) 45%, #fff); font-size: var(--step-1); }
.foot__email:hover { color: #fff; }
.foot__es { margin-top: 1rem; color: color-mix(in oklab, #fff 60%, var(--navy)); font-size: .92rem; }
.foot__side { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.foot .brand__word { color: #fff; }
.foot .brand__sub { color: color-mix(in oklab, var(--blue) 55%, #fff); }
.foot__tag { color: color-mix(in oklab, #fff 65%, var(--navy)); max-width: 26ch; }
.social { display: flex; gap: .55rem; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 22%, transparent); transition: all .25s var(--ease); }
.social a:hover { background: var(--blue); transform: translateY(-2px); box-shadow: none; }
.lang--foot { box-shadow: none; padding: 0; gap: 1rem; }
.lang--foot .lang__btn { padding: .4rem .1rem; min-height: 40px; border-radius: 0; color: color-mix(in oklab, #fff 60%, var(--navy)); }
.lang--foot .lang__btn.is-active { background: transparent; color: #fff; box-shadow: 0 2px 0 var(--blue); }
.foot__base { padding-top: 1.4rem; font-size: .86rem; color: color-mix(in oklab, #fff 50%, var(--navy)); }

/* ----------------------------- REVEALS -------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee { -webkit-mask: none; mask: none; }
  .marquee__track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 1.2rem; }
  .scene__img, .scene__glow { transform: none !important; }
}

/* ----------------------------- RESPONSIVE ----------------------------- */
@media (max-width: 920px){
  .hero { grid-template-columns: 1fr; }
  .scene { order: -1; max-width: 540px; margin-inline: auto; }
  .qcard { display: none; } /* hero card is desktop-only; mobile uses the CTAs -> #quote */
  .band { grid-template-columns: 1fr; }
  .band__photo { max-width: 560px; }
  .basics { grid-template-columns: 1fr; gap: 1rem; }
  .protect__inner { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 620px){
  /* keep the primary CTA on phones; trim everything else to fit */
  .hdr__phone { display: none; }
  .hdr__div { display: none; }
  .brand__sub { display: none; }            /* just "SOMOS" on phones */
  .hdr__login { display: none; }            /* placeholder — hidden on phones to fit the full-word toggle */
  .hdr__cta { padding: .58em .85em; font-size: .86rem; }
  .hdr__right { gap: .45rem; }
  .lang { padding: .12rem; }
  .lang__btn { min-height: 34px; padding: .3rem .55rem; font-size: .7rem; }
  .band__cols { grid-template-columns: 1fr; }
  .qform__grid { grid-template-columns: 1fr; }
  .ecards { grid-template-columns: 1fr; }
  /* smaller, condensed headline on phones: each clause fits one line and fills the width naturally */
  .hero__title { font-size: clamp(1.75rem, 8vw, 2.4rem); line-height: 1.1; }
}

/* footer nav (added — links the landing to the guide pages + Ask Somos) */
.foot__nav { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; padding-top:1.5rem; margin-top:1.6rem; border-top:1px solid color-mix(in oklab,#fff 14%,transparent); }
.foot__nav a { color:color-mix(in oklab,#fff 70%,var(--navy)); font-size:.9rem; font-weight:500; }
.foot__nav a:hover { color:#fff; }


/* hero Ask Somos entry (replaces the coverage shelf) */
.ask-entry { margin-top: 1.5rem; max-width: 30rem; }
.ask-entry__lead { display:inline-flex; align-items:center; gap:.35rem; margin-bottom:.6rem; }
.ask-entry__spark { color: var(--blue); }
.ask-entry__row { display:flex; gap:.5rem; }
.ask-entry__input { flex:1; min-width:0; font-family:var(--body); font-size:1rem; padding:.75em 1em; border-radius:12px; background:var(--paper); color:var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s; }
.ask-entry__input::placeholder { color:var(--muted); opacity:.85; }
.ask-entry__input:focus { outline:none; box-shadow: inset 0 0 0 2px var(--blue); }
.ask-entry__btn { padding:.75em 1.25em; flex:none; }
.ask-entry__ex { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.65rem; }
.ask-entry__ex button { font-family:var(--body); font-size:.82rem; line-height:1.2; text-align:left; color:var(--muted); background:transparent; padding:.4rem .8rem; border-radius:100px; box-shadow: inset 0 0 0 1px var(--line); transition: color .18s, box-shadow .18s; }
.ask-entry__ex button:hover { color:var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE SCROLL CHOREOGRAPHY  (≤920px, motion-safe users only)
   Budget (hard law): max translate 28px · max duration 600ms · peak
   concurrency 4 · transform/opacity only · no added loops.
   Desktop and prefers-reduced-motion get the pre-existing page untouched.
   Dual path: IntersectionObserver classes (below) + scroll-driven
   animations in the @supports block (scrubbed by the thumb).
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 920px) and (prefers-reduced-motion: no-preference) {

  /* transform from-states must never widen the page — clip at the
     sections that contain lateral entrants (body-level clip would just
     propagate to the viewport and stay programmatically scrollable) */
  .band, .explain, .protect { overflow-x: clip; }

  /* — header: copper hairline lift, opacity only (bar itself never moves) — */
  .hdr::after { content:""; position:absolute; inset:0; pointer-events:none;
    border-bottom:1px solid rgba(180,86,47,.18);
    box-shadow:0 8px 24px rgba(24,49,83,.10);
    opacity:0; transition:opacity 250ms var(--ease); }
  .hdr.is-stuck::after { opacity:1; }

  /* — hero copy: load-time vertical cascade (no SDA variant by design) — */
  .hero__copy.reveal { opacity:1; transform:none; transition:none; }
  .hero__copy.reveal > h1, .hero__copy.reveal > .hero__sub,
  .hero__copy.reveal > .hero__cta {
    opacity:0; transform:translateY(22px);
    transition:opacity 560ms var(--ease), transform 560ms var(--ease); }
  .hero__copy.reveal > .hero__sub { transition-delay:90ms; }
  .hero__copy.reveal > .hero__cta { transition-delay:180ms; }
  .hero__copy.reveal > .ask-entry {
    opacity:0; transform:translateY(16px) scale(.97);
    transition:opacity 520ms var(--ease), transform 520ms var(--ease);
    transition-delay:270ms; }
  .hero__copy.reveal.in > h1, .hero__copy.reveal.in > .hero__sub,
  .hero__copy.reveal.in > .hero__cta, .hero__copy.reveal.in > .ask-entry {
    opacity:1; transform:none; }

  /* — THE COPPER HANDSHAKE (#promise): photo from LEFT, words from RIGHT,
       copper underlines draw themselves — */
  .band__photo.reveal { opacity:0; transform:translateX(-28px);
    transition:opacity 600ms var(--ease), transform 600ms var(--ease); }
  .band__photo.reveal img { transform:scale(1.06);
    transition:transform 600ms var(--ease) 80ms; }
  .band__photo.reveal.in { opacity:1; transform:none; }
  .band__photo.reveal.in img { transform:scale(1); }
  .band__cols .col.reveal { opacity:0; transform:translateX(28px);
    transition:opacity 560ms var(--ease), transform 560ms var(--ease); }
  .band__cols .col.reveal:nth-child(2) { transition-delay:110ms; }
  .band__cols .col.reveal.in { opacity:1; transform:none; }
  .band__cols .col .col__h::after { transform:scaleX(0); transform-origin:left;
    transition:transform 420ms var(--ease); }
  .band__cols .col:nth-child(1) .col__h::after { transition-delay:320ms; }
  .band__cols .col:nth-child(2) .col__h::after { transition-delay:430ms; }
  .band__cols .col.in .col__h::after { transform:scaleX(1); }

  /* — explain head: grouped rise — */
  .explain__head.reveal { opacity:0; transform:translateY(20px);
    transition:opacity 520ms var(--ease), transform 520ms var(--ease); }
  .explain__head.reveal.in { opacity:1; transform:none; }

  /* — coverage cards: the zigzag (odd LEFT, even RIGHT), self-paced — */
  .ecard.reveal { opacity:0;
    transition:opacity 520ms var(--ease), transform 520ms var(--ease); }
  .ecard.reveal:nth-child(odd)  { transform:translateX(-24px); }
  .ecard.reveal:nth-child(even) { transform:translateX(24px); }
  .ecard.reveal.in { opacity:1; transform:none; }

  /* — explain CTAs: quiet paired rise — */
  .explain__cta.reveal { opacity:1; transform:none; transition:none; }
  .explain__cta.reveal .btn { opacity:0; transform:translateY(16px);
    transition:opacity 480ms var(--ease), transform 480ms var(--ease); }
  .explain__cta.reveal .btn:nth-child(2) { transition-delay:90ms; }
  .explain__cta.reveal.in .btn { opacity:1; transform:none; }

  /* — basics: restrained; the punchline gets its own beat — */
  .basics__story.reveal { opacity:0; transform:translateY(14px);
    transition:opacity 560ms var(--ease) 120ms, transform 560ms var(--ease) 120ms; }
  .basics__story.reveal.in { opacity:1; transform:none; }
  .basics__kick.reveal { opacity:0; transform:translateY(12px);
    transition:opacity 480ms var(--ease), transform 480ms var(--ease); }
  .basics__kick.reveal.in { opacity:1; transform:none; }

  /* — protect: copy rises, trust items tick in from the left — */
  .protect__copy.reveal .protect__trust li { opacity:0; transform:translateX(-16px);
    transition:opacity 450ms var(--ease), transform 450ms var(--ease); }
  .protect__copy.reveal .protect__trust li:nth-child(1) { transition-delay:150ms; }
  .protect__copy.reveal .protect__trust li:nth-child(2) { transition-delay:250ms; }
  .protect__copy.reveal .protect__trust li:nth-child(3) { transition-delay:350ms; }
  .protect__copy.reveal.in .protect__trust li { opacity:1; transform:none; }

  /* — the conversion climax: quote card placed on the desk — */
  .protect__card.reveal { opacity:0; transform:translateY(16px) scale(.96);
    transform-origin:50% 60%;
    transition:opacity 560ms var(--ease), transform 560ms var(--ease); }
  .protect__card.reveal.in { opacity:1; transform:none; }

  /* — footer: early-completing staggered rise — */
  .foot__call.reveal, .foot__side.reveal, .foot__nav.reveal {
    opacity:0; transform:translateY(16px);
    transition:opacity 480ms var(--ease), transform 480ms var(--ease); }
  .foot__side.reveal { transition-delay:90ms; }
  .foot__nav.reveal  { transition-delay:180ms; }
  .foot__call.reveal.in, .foot__side.reveal.in, .foot__nav.reveal.in {
    opacity:1; transform:none; }

  /* ═══ scroll-driven layer: scrubbed by the thumb where supported.
     PROPERTY ORDER IS LOAD-BEARING: animation shorthand FIRST, then
     animation-timeline, then animation-range. .scene is hard-excluded. ═══ */
  @supports (animation-timeline: view()) {
    .band__photo.reveal, .band__photo.reveal.in {
      transition:none; opacity:1; transform:none;
      view-timeline:--photo;
      animation:sm-photo-enter 1ms linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%; }
    .band__photo.reveal img, .band__photo.reveal.in img {
      transition:none; transform:none;
      animation:sm-photo-settle 1ms linear both;
      animation-timeline:--photo;
      animation-range:entry 0% cover 40%; }
    .band__cols .col.reveal, .band__cols .col.reveal.in {
      transition:none; opacity:1; transform:none;
      view-timeline:--col;
      animation:sm-col-enter 1ms linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 35%; }
    .band__cols .col.reveal:nth-child(2) {
      animation-range:entry 8% cover 40%; }
    .band__cols .col .col__h::after, .band__cols .col.in .col__h::after {
      transition:none; transform-origin:left;
      animation:sm-bar-draw 1ms linear both;
      animation-timeline:--col;
      animation-range:entry 40% cover 60%; }
    .explain__head.reveal, .explain__head.reveal.in {
      transition:none; opacity:1; transform:none;
      animation:sm-rise-20 1ms linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%; }
    .ecard.reveal, .ecard.reveal.in { transition:none; opacity:1; transform:none; }
    .ecard.reveal:nth-child(odd) {
      animation:sm-card-l 1ms linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 25%; }
    .ecard.reveal:nth-child(even) {
      animation:sm-card-r 1ms linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 25%; }
    .explain__cta.reveal .btn, .explain__cta.reveal.in .btn {
      transition:none; opacity:1; transform:none; }
    .explain__cta.reveal {
      view-timeline:--ctarow; }
    .explain__cta.reveal .btn:nth-child(1) {
      animation:sm-rise-16 1ms linear both;
      animation-timeline:--ctarow;
      animation-range:entry 0% cover 32%; }
    .explain__cta.reveal .btn:nth-child(2) {
      animation:sm-rise-16 1ms linear both;
      animation-timeline:--ctarow;
      animation-range:entry 8% cover 40%; }
    .basics__title.reveal, .basics__title.reveal.in {
      transition:none; opacity:1; transform:none;
      animation:sm-rise-20 1ms linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 25%; }
    .basics__story.reveal, .basics__story.reveal.in {
      transition:none; opacity:1; transform:none;
      animation:sm-rise-14 1ms linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 35%; }
    .basics__kick.reveal, .basics__kick.reveal.in {
      transition:none; opacity:1; transform:none;
      animation:sm-rise-12 1ms linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 50%; }
    .protect__copy.reveal, .protect__copy.reveal.in {
      transition:none; opacity:1; transform:none;
      view-timeline:--pcopy;
      animation:sm-rise-20 1ms linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 30%; }
    .protect__copy.reveal .protect__trust li, .protect__copy.reveal.in .protect__trust li {
      transition:none; opacity:1; transform:none; }
    .protect__copy.reveal .protect__trust li:nth-child(1) {
      animation:sm-trust-in 1ms linear both;
      animation-timeline:--pcopy;
      animation-range:entry 10% cover 28%; }
    .protect__copy.reveal .protect__trust li:nth-child(2) {
      animation:sm-trust-in 1ms linear both;
      animation-timeline:--pcopy;
      animation-range:entry 18% cover 33%; }
    .protect__copy.reveal .protect__trust li:nth-child(3) {
      animation:sm-trust-in 1ms linear both;
      animation-timeline:--pcopy;
      animation-range:entry 26% cover 38%; }
    .protect__card.reveal, .protect__card.reveal.in {
      transition:none; opacity:1; transform:none; transform-origin:50% 60%;
      animation:sm-card-settle 1ms linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 35%; }
    .foot__call.reveal, .foot__call.reveal.in,
    .foot__side.reveal, .foot__side.reveal.in,
    .foot__nav.reveal, .foot__nav.reveal.in {
      transition:none; opacity:1; transform:none; }
    .foot__call.reveal {
      animation:sm-rise-16 1ms linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 18%; }
    .foot__side.reveal {
      animation:sm-rise-16 1ms linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 21%; }
    .foot__nav.reveal {
      animation:sm-rise-16 1ms linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 23%; }
  }

  @keyframes sm-photo-enter  { from { opacity:0; transform:translateX(-28px); } 50% { opacity:1; } to { opacity:1; transform:none; } }
  @keyframes sm-photo-settle { from { transform:scale(1.06); } to { transform:scale(1); } }
  @keyframes sm-col-enter    { from { opacity:0; transform:translateX(28px); }  50% { opacity:1; } to { opacity:1; transform:none; } }
  @keyframes sm-bar-draw     { from { transform:scaleX(0); } to { transform:scaleX(1); } }
  @keyframes sm-card-l       { from { opacity:0; transform:translateX(-24px); } 50% { opacity:1; } to { opacity:1; transform:none; } }
  @keyframes sm-card-r       { from { opacity:0; transform:translateX(24px); }  50% { opacity:1; } to { opacity:1; transform:none; } }
  @keyframes sm-rise-20      { from { opacity:0; transform:translateY(20px); }  50% { opacity:1; } to { opacity:1; transform:none; } }
  @keyframes sm-rise-16      { from { opacity:0; transform:translateY(16px); }  50% { opacity:1; } to { opacity:1; transform:none; } }
  @keyframes sm-rise-14      { from { opacity:0; transform:translateY(14px); }  50% { opacity:1; } to { opacity:1; transform:none; } }
  @keyframes sm-rise-12      { from { opacity:0; transform:translateY(12px); }  50% { opacity:1; } to { opacity:1; transform:none; } }
  @keyframes sm-trust-in     { from { opacity:0; transform:translateX(-16px); } 50% { opacity:1; } to { opacity:1; transform:none; } }
  @keyframes sm-card-settle  { from { opacity:0; transform:translateY(16px) scale(.96); } 50% { opacity:1; } to { opacity:1; transform:none; } }
}


/* ═══════════════════════════════════════════════════════════════════════
   ASK SOMOS · floating glass chat  (in-page jewel, grows from the button)
   Light, translucent, edges cleaned up. The landing stays visible behind.
   Entrance/exit are origin-aware (see home.js) on this silky curve.
   ═══════════════════════════════════════════════════════════════════════ */
body.askm-open { overflow: hidden; }
.askm[hidden] { display: none; }
.askm { --ease-glass: cubic-bezier(.16,1,.3,1);
  position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100dvh;
  z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; }

.askm__scrim { position: absolute; inset: 0; background: rgba(18,32,54,.17);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .34s ease; }
.askm.is-open .askm__scrim { opacity: 1; }

.askm__panel { position: relative; width: 100%; max-width: 420px;
  display: flex; flex-direction: column; height: min(78dvh, 640px); max-height: calc(100dvh - 32px);
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.66));
  -webkit-backdrop-filter: blur(30px) saturate(1.7); backdrop-filter: blur(30px) saturate(1.7);
  border: 1px solid rgba(255,255,255,.7); border-radius: 26px;
  box-shadow: 0 26px 74px -26px rgba(24,49,83,.5), 0 3px 12px -6px rgba(24,49,83,.2), inset 0 1px 0 rgba(255,255,255,.75);
  opacity: 0; overflow: hidden;
  transition: transform .44s var(--ease-glass), opacity .34s ease; }
.askm.is-open .askm__panel { opacity: 1; }

.askm__head { display: flex; align-items: center; gap: 8px; flex: none;
  padding: 15px 14px 13px 18px; border-bottom: 1px solid rgba(24,49,83,.055); }
.askm__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c39a; flex: none;
  box-shadow: 0 0 0 3px rgba(34,195,154,.16); animation: askmPulse 2.6s ease-in-out infinite; }
.askm__mark { font-family: var(--display); font-weight: 800; letter-spacing: .005em; color: var(--navy); font-size: 1rem; }
.askm__badge { font-family: var(--display); font-size: .56rem; font-weight: 700; letter-spacing: .13em;
  color: var(--blue); background: color-mix(in oklab, var(--blue) 13%, #fff); padding: .16rem .4rem; border-radius: 100px; }
.askm__x { margin-left: auto; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 100px; color: var(--muted); background: rgba(24,49,83,.05); transition: background .18s, color .18s; }
.askm__x svg { transition: transform .25s var(--ease); }
.askm__x:hover { background: rgba(24,49,83,.1); color: var(--navy); } .askm__x:hover svg { transform: rotate(90deg); }

.askm__log { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 15px 16px; display: flex; flex-direction: column; gap: 9px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 8px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 8px), transparent 100%); }
.askm__log > :first-child { margin-top: auto; }   /* pin thread to the bottom when short; scrolls cleanly when long */
.askm__msg { max-width: 87%; padding: .64rem .88rem; border-radius: 17px; font-size: .94rem; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.askm__msg--me { align-self: flex-end; background: linear-gradient(165deg, #204168, var(--navy)); color: #fff; border-bottom-right-radius: 5px;
  box-shadow: 0 6px 18px -8px rgba(24,49,83,.6); }
.askm__msg--ai { align-self: flex-start; background: rgba(255,255,255,.85); color: var(--ink);
  border: 1px solid rgba(24,49,83,.07); border-bottom-left-radius: 5px; box-shadow: 0 5px 16px -10px rgba(24,49,83,.3); }
.askm__msg--ai p { margin: 0 0 .5rem; } .askm__msg--ai p:last-child { margin: 0; }
.askm__msg--ai a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.askm__msg--enter { opacity: 0; transform: translateY(9px) scale(.985); }
.askm__msg--enter.is-in { opacity: 1; transform: none; transition: opacity .3s ease, transform .4s var(--ease-glass); }

.askm__welcome { margin: auto 0; text-align: center; color: var(--muted); display: flex;
  flex-direction: column; align-items: center; gap: .55rem; padding: 1.1rem 1rem; }
.askm__wspark { color: var(--blue); font-size: 1.7rem; line-height: 1; animation: askmFloat 3.4s ease-in-out infinite; }
.askm__welcome p { max-width: 16rem; font-size: .98rem; line-height: 1.46; color: var(--navy); }
.askm__welcome-sub { font-size: .8rem !important; color: var(--muted) !important; max-width: 15rem; margin-top: -.15rem; }

.askm__typing { display: inline-flex !important; gap: 4px; align-items: center; padding: .7rem .9rem; }
.askm__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: .55; animation: askmDot 1.1s infinite; }
.askm__typing span:nth-child(2) { animation-delay: .16s; } .askm__typing span:nth-child(3) { animation-delay: .32s; }

.askm__foot { flex: none; padding: 6px 14px max(12px, env(safe-area-inset-bottom)); }
.askm__chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 9px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%); }
.askm__chips::-webkit-scrollbar { display: none; }
.askm__chips button { flex: none; white-space: nowrap; font-family: var(--body); font-size: .78rem; color: var(--navy);
  background: rgba(255,255,255,.6); padding: .42rem .82rem; border-radius: 100px; border: 1px solid rgba(24,49,83,.1);
  transition: color .18s, border-color .18s, background .18s, transform .1s; }
.askm__chips button:hover { color: var(--blue); border-color: var(--blue); background: #fff; }
.askm__chips button:active { transform: scale(.96); }

.askm__bar { display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 6px;
  background: rgba(255,255,255,.82); border-radius: 16px; box-shadow: inset 0 0 0 1.5px rgba(24,49,83,.15); transition: box-shadow .2s; }
.askm__bar:focus-within { box-shadow: inset 0 0 0 1.5px var(--blue), 0 0 0 4px color-mix(in oklab, var(--blue) 13%, transparent); }
.askm__input { flex: 1; min-width: 0; font-family: var(--body); font-size: 1rem; padding: .58em .55em .58em .5em;
  background: transparent; color: var(--ink); border: 0; }
.askm__input::placeholder { color: var(--muted); opacity: .85; } .askm__input:focus { outline: none; }
/* idle send carries brand life (soft copper); fills solid copper the moment there's something to send */
.askm__send { flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in oklab, var(--blue) 16%, #fff); color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; transition: background .22s var(--ease), color .22s var(--ease), transform .14s var(--ease); }
.askm__send svg { transition: transform .18s var(--ease); }
.askm__bar.is-ready .askm__send { background: var(--blue); color: #fff; box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--blue) 60%, transparent); }
.askm__bar.is-ready .askm__send:hover { background: var(--blue-d); }
.askm__bar.is-ready .askm__send:hover svg { transform: translateX(2px); }
.askm__send:active { transform: scale(.9); }
.askm__disc { font-size: .71rem; color: var(--muted); text-align: center; opacity: .82; padding: 8px 6px 2px; }

@keyframes askmDot { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes askmPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(34,195,154,.16); } 50% { box-shadow: 0 0 0 5px rgba(34,195,154,.05); } }
@keyframes askmFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .askm__scrim, .askm__panel { transition: none; }
  .askm__typing span, .askm__dot, .askm__wspark { animation: none; }
  .askm__msg--enter { opacity: 1; transform: none; }
}

/* ── Get-a-quote modal: same glass shell, taller for the full form ── */
/* quote form sizes to its content and never exceeds the real (dynamic) viewport → no top/bottom clipping */
.askm--quote .askm__panel { height: auto; max-height: min(720px, calc(100dvh - 32px)); }
.askm__qsub { font-size: .72rem; color: var(--muted); font-weight: 500; margin-left: 1px; }
.qm__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 18px 18px; }
/* the form inherits the site's .qform styling; a few tweaks so it reads well on glass */
.qm__body [hidden] { display: none !important; }   /* guard: our display rules must not defeat the hidden attribute */
.qm__body .qfield-wrap input, .qm__body .qfield-wrap textarea { background: rgba(255,255,255,.9); }
.qm__body .qform__submit { width: 100%; margin-top: 4px; }

/* compact + tidy the coverage selector and tighten spacing so more of the form is visible at once (modal only) */
.qm__body { padding: 12px 16px 14px; }
.qm__body .qform__cov { margin-bottom: .75rem; }
.qm__body .qform__cov legend { font-size: .8rem; margin-bottom: .45rem; }
.qm__body .qchips { gap: .38rem; }
.qm__body .qchips--lg .qchip { padding: .36rem .8rem; min-height: 32px; font-size: .8rem; box-shadow: inset 0 0 0 1.3px var(--line); }
.qm__body .qform__grid { gap: .6rem; }
.qm__body .qfield-wrap label { font-size: .76rem; margin-bottom: .22rem; }
.qm__body .qfield-wrap input, .qm__body .qfield-wrap textarea { padding: .58em .85em; border-radius: 11px; }
.qm__body .qform__hint { margin-top: .5rem; font-size: .78rem; }
.qm__body .qform__consent { margin-top: .55rem; }
.qm__success { margin: auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 1.4rem 1rem; }
.qm__success .qsuccess__check { width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: #22c39a; box-shadow: 0 8px 22px -8px rgba(34,195,154,.7); }
.qm__successh { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--navy); }
.qm__successsub { color: var(--muted); max-width: 17rem; line-height: 1.5; }
.qm__success .btn { margin-top: .3rem; }
.qm__successfb { font-size: .8rem; color: var(--muted); max-width: 17rem; }