/* ===========================================================
   Insurance page (WP page slug "insurance") — scoped add-ons.
   Loaded ONLY on this page. Built to the sample layout but in the
   site palette (navy + blue, no red). Reuses global .btn etc.
   =========================================================== */

.page-ins .container{ max-width:1160px; }

/* Shared eyebrow */
.page-ins .ins-eyebrow{ margin:0 0 8px; text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; font-weight:700; color:var(--blue); }
.page-ins .ins-eyebrow--center{ text-align:center; }

/* ---- HERO (text LEFT, image RIGHT) ---- */
.ins-hero{ background:linear-gradient(135deg,var(--navy),#1d2f4f); color:#fff; padding:64px 0; }
.ins-hero--media .container{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center;
  padding-left:0; padding-right:0; }
.ins-hero__text{ min-width:0; text-align:left; }
.ins-hero__eyebrow{ margin:0 0 10px; text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; font-weight:700; color:#6ea8ff; }
.ins-hero h1{ color:#fff; margin:0 0 12px; font-size:clamp(1.9rem,3.4vw,2.8rem); }
.ins-hero__intro{ max-width:54ch; margin:0; color:#cdd9ec; font-size:1.02rem; line-height:1.7; }
.ins-hero__media img{ width:100%; height:340px; object-fit:cover; border-radius:var(--radius); box-shadow:0 18px 40px rgba(0,0,0,.28); display:block; }
@media(max-width:860px){
  .ins-hero--media .container{ grid-template-columns:1fr; gap:26px; text-align:center; }
  .ins-hero__text{ text-align:center; }
  .ins-hero__intro{ margin:0 auto; }
  .ins-hero__media{ order:-1; }
  .ins-hero__media img{ height:230px; }
}

/* ---- MARQUEE ---- */
.ins-marquee{ background:var(--cyan-50); overflow:hidden; }
.ins-marquee__title{ text-align:center; margin:0 0 30px; color:var(--ink); font-size:clamp(1.4rem,2.4vw,1.9rem); }
.ins-marquee__wrap{ position:relative; overflow:hidden; }
.ins-marquee__wrap + .ins-marquee__wrap{ margin-top:16px; }
.ins-marquee__wrap::before,.ins-marquee__wrap::after{ content:""; position:absolute; top:0; width:90px; height:100%; z-index:2; pointer-events:none; }
.ins-marquee__wrap::before{ left:0; background:linear-gradient(to right,var(--cyan-50),transparent); }
.ins-marquee__wrap::after{ right:0; background:linear-gradient(to left,var(--cyan-50),transparent); }
.ins-track{ display:flex; gap:14px; width:max-content; padding:4px 0; }
.ins-track--l{ animation:insMarqL 48s linear infinite; }
.ins-track--r{ animation:insMarqR 54s linear infinite; }
.ins-marquee:hover .ins-track{ animation-play-state:paused; }
@keyframes insMarqL{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes insMarqR{ 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
@media(prefers-reduced-motion:reduce){ .ins-track{ animation:none; } .ins-marquee__wrap{ overflow-x:auto; } }

/* No box — logos/names sit directly on the section background (like the ref). */
.ins-card{ display:flex; align-items:center; justify-content:center; white-space:nowrap;
  background:transparent; border:0; box-shadow:none; padding:14px 30px;
  min-height:calc(var(--ins-logo-h,70px) + 20px); transition:opacity .2s ease; }
.ins-card:hover{ opacity:.75; }
/* Logo cards: just the logo, sized by the editable "Logo height" field. */
.ins-card--logo{ min-width:120px; }
.ins-card__logo{ height:var(--ins-logo-h,70px); width:auto; max-width:240px; object-fit:contain; display:block; }
/* Name cards (fallback when no logo uploaded): the plan name. */
.ins-card--name{ min-width:140px; }
.ins-card--name .ins-card__name{ font-size:1rem; font-weight:700; color:var(--ink); }

/* ---- "100+" BANNER (light-cyan panel) ---- */
.ins-more{ background:#C9F7FE; color:var(--ink); padding:56px 0; }
.ins-more__grid{ display:grid; grid-template-columns:1fr 300px; gap:44px; align-items:center; }
.ins-more__text h2{ color:var(--ink); margin:0 0 12px; font-size:clamp(1.5rem,2.6vw,2rem); }
.ins-more__text p{ color:var(--body); line-height:1.7; margin:0; max-width:560px; }
.ins-more__badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.ins-badge{ background:#fff; color:var(--blue); font-size:.78rem; font-weight:700; padding:6px 14px; border-radius:999px; border:1px solid var(--cyan-200); }
.ins-more__cta{ text-align:center; }
.ins-more__num{ font-family:var(--serif); font-size:4.2rem; font-weight:700; line-height:1; color:var(--blue); }
.ins-more__numlabel{ color:var(--body); font-size:.82rem; font-weight:600; margin:4px 0 18px; }
.ins-more__btn{ display:block; width:100%; margin-bottom:10px; }
/* Primary (Verify): solid blue. Secondary (Call): outlined blue. */
.ins-more .btn--light{ background:var(--blue); color:#fff; }
.ins-more .btn--light:hover{ background:var(--blue-dark); color:#fff; }
.ins-more__btn--ghost{ background:transparent; color:var(--blue); border:2px solid var(--blue); }
.ins-more__btn--ghost:hover{ background:var(--blue); color:#fff; border-color:var(--blue); }

/* ---- VERIFY + FORM ---- */
/* White panel (overrides the section--cyan-soft tint on this page only). */
.page-ins .ins-verify{ background:#fff; }
.ins-verify__grid{ display:grid; grid-template-columns:1fr 460px; gap:44px; align-items:center; }
/* Form fields two-per-row; location + submit span the full width. */
.ins-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.ins-form__grid .ins-form__row{ margin-bottom:0; }
.ins-form__row--full{ grid-column:1 / -1; }
@media(max-width:520px){ .ins-form__grid{ grid-template-columns:1fr; } }
.ins-verify__text h2{ margin:0 0 12px; color:var(--ink); font-size:clamp(1.4rem,2.4vw,1.9rem); }
.ins-verify__body p{ color:var(--body); line-height:1.7; margin:0 0 12px; max-width:560px; }
.ins-verify__contact{ display:flex; flex-wrap:wrap; gap:22px; margin-top:16px; }
.ins-contact{ display:inline-flex; align-items:center; gap:8px; font-size:.92rem; font-weight:700; color:var(--blue); text-decoration:none; }
.ins-contact--muted{ color:var(--body); font-weight:600; }
.ins-form{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
.ins-form h3{ margin:0 0 16px; color:var(--ink); font-size:1.2rem; }
.ins-form__row{ margin-bottom:12px; }
.ins-form__row label{ display:block; margin-bottom:5px; font-size:.8rem; font-weight:700; color:var(--body); }
.ins-form__row input,.ins-form__row select{ width:100%; padding:10px 12px; font-size:.8rem; color:var(--ink);
  border:1px solid var(--cyan-200); border-radius:8px; background:#fff; outline:none; }
.ins-form__row input::placeholder{ font-size:.8rem; }
/* Select: swap the native arrow for a chevron we can position (nudged in from the edge). */
.ins-form__row select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2351607a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:11px auto;
  padding-right:38px;
}
.ins-form__row input:focus,.ins-form__row select:focus{ border-color:var(--blue); }
.ins-form__submit{ width:100%; margin-top:6px; justify-content:center; }
.ins-form__note{ font-size:.85rem; border-radius:8px; padding:10px 12px; margin-bottom:14px; }
.ins-form__note--ok{ background:#e6f6ec; color:#1c7a3e; }
.ins-form__note--err{ background:#fdeaea; color:#b23; }

/* ---- CTA (boxed blue, centered — matches the site's boxed CTA) ---- */
.ins-cta-wrap{ background:var(--cyan-50); }
.ins-cta{ background:#0059A6; color:#fff; border-radius:24px; padding:64px 40px; text-align:center; box-shadow:0 26px 60px -24px rgba(0,89,166,.55); }
.ins-cta h2{ color:#fff; margin:0 0 14px; font-size:clamp(1.7rem,3vw,2.4rem); }
.ins-cta__lead{ color:rgba(255,255,255,.85); margin:0 auto 26px; max-width:60ch; line-height:1.7; }
.ins-cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.ins-cta .btn--light{ background:#fff; color:#0059A6; }
.ins-cta .btn--light:hover{ background:#e9f2fb; }
.ins-cta__ghost{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); }
.ins-cta__ghost:hover{ background:#fff; color:#0059A6; border-color:#fff; }

/* ---- 1280px tier ONLY — match Home/About side gutters ----
   This page uses a narrower centred container (1160px), which at 1280px reads as
   too much side padding next to Home and About. Home/About opt into the site's
   full-width gutter system (--fs-*): at 1280px that's 170px section padding and
   120px banner padding. Replicate that here for 1280px only — the 1920 / 1536 /
   1440 / mobile layouts are frozen and deliberately left as-is. */
@media(min-width:1025px) and (max-width:1280px){
  .page-ins .container{ max-width:none; margin-left:0; margin-right:0;
    padding-left:var(--fs-section-pl,170px); padding-right:var(--fs-section-pr,170px); }
  /* Hero (banner) uses the banner gutter, like the About hero. */
  .page-ins .ins-hero--media .container{ padding-left:var(--fs-banner-pl,120px); padding-right:var(--fs-banner-pr,100px); }
}

/* ---- Responsive ---- */
@media(max-width:900px){
  .ins-more__grid{ grid-template-columns:1fr; gap:30px; }
  .ins-more__cta{ max-width:320px; }
  .ins-verify__grid{ grid-template-columns:1fr; gap:28px; }
  .ins-form{ max-width:420px; }
}
@media(max-width:640px){
  .ins-hero{ padding:48px 0; }
  .ins-cta{ padding:40px 22px; }
  .ins-cta__btns{ width:100%; }
  .ins-cta__btns .btn{ flex:1 1 auto; text-align:center; justify-content:center; }
  .ins-card{ min-width:170px; padding:10px 14px; }
  /* "100+" block: stretch to the container so the buttons get equal side space.
     (No auto margins — on a grid item those disable stretch and shrink it to content.) */
  .ins-more__cta{ max-width:none; }
  .ins-more__btn{ justify-content:center; text-align:center; }
}