/* ============================================================================
   SLI Cinematic Design Layer
   Shared CSS for the full-bleed cinematic hero + light/dark rhythm bands.
   Depends on miles-base tokens (--wide-width, --gutter, --space-*, --color-*).

   PER-PAGE knobs (set in the page's wp:html markup, no per-page CSS needed):
     • Accent    — inline style on .miles-home:  style="--accent:#ff5a3c;--accent-glow:#ff8a5c"
                   (omit for the default brand blue)
     • Hero photo — inline style on .sli-cine-hero__bg:  style="background-image:url('…')"
     • Band photo — inline style on .sli-band-img__bg:   style="background-image:url('…')"
   ============================================================================ */

.miles-home { --accent:#2f7bff; --accent-glow:#6aa5ff; }   /* default: brand blue */

/* ---- Cinematic hero -------------------------------------------------------- */
/* background-color is a real ancestor fallback (not just the sibling __bg
   layer below) — contrast-checking tools and forced-colors/no-image
   rendering only see ancestor backgrounds, and this guarantees the hero
   text always has a dark backing even before the photo paints. */
.sli-cine-hero{ position:relative; min-height:80vh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate; color:#f4f6fb; background-color:#0a0e17; }
.sli-cine-hero__bg{ position:absolute; inset:0; z-index:-3; background-color:#0a0e17; background-size:cover; background-position:center; }
/* Restored to the original lighter mood (2026-07-23, Will's call) — the
   .sli-cine-hero background-color above already gives axe/Lighthouse a real
   dark ANCESTOR to measure contrast against (that's what actually fixed the
   automated check, not this gradient's darkness), so this can go back to
   reading as a true left-dark/right-lighter photo reveal without risking
   the contrast score. Real-world legibility against a bright photo is now
   handled by the dedicated text-backdrop pool below, not by darkening the
   whole image. */
.sli-cine-hero__bg::before{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(5,7,13,.90) 0%, rgba(5,7,13,.52) 33%, rgba(5,7,13,.14) 60%, rgba(5,7,13,.40) 100%), linear-gradient(0deg, rgba(5,7,13,.85) 0%, rgba(5,7,13,0) 46%); }
.sli-cine-hero__grain{ position:absolute; inset:0; z-index:-1; opacity:.05; mix-blend-mode:overlay; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sli-cine-hero__vignette{ position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,.48) 100%); }
.sli-cine-hero__inner{ position:relative; width:100%; max-width:var(--wide-width); margin:0 auto; padding:var(--space-xl) var(--gutter) var(--space-md); }
/* Localized readability pool, not a full-photo darken: a soft radial shadow
   anchored under the text block (bottom-left, where content sits) so real
   contrast holds against a bright photo without dimming the rest of the
   image. Fades out well before the chips strip, which has its own panel. */
.sli-cine-hero__inner::before{ content:""; position:absolute; z-index:-1; left:calc(-1 * var(--gutter)); right:-15%; top:-15%; bottom:15%; background:radial-gradient(120% 100% at 0% 100%, rgba(5,7,13,.6) 0%, rgba(5,7,13,.32) 45%, rgba(5,7,13,0) 78%); pointer-events:none; }
.sli-cine-hero__eyebrow{ display:inline-flex; align-items:center; gap:.7rem; margin:0 0 1rem; font-size:.72rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase; color:var(--accent-glow); }
.sli-cine-hero__eyebrow svg{ width:22px; height:22px; }
.sli-cine-hero__title{ margin:0; color:#f7f9fc; font-weight:600; line-height:1; letter-spacing:-.01em; font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-size:clamp(2.6rem,6vw,5rem); text-shadow:0 2px 40px rgba(0,0,0,.55); }
.sli-cine-hero__title em{ display:block; font-style:normal; font-weight:400; color:var(--accent-glow); font-family:"Snell Roundhand","Segoe Script",cursive; font-size:clamp(2.9rem,7.2vw,6rem); line-height:1.05; margin-top:.08em; }
.sli-cine-hero__sub{ margin:1.4rem 0 0; max-width:48ch; font-size:clamp(1rem,1.4vw,1.25rem); color:#d6deea; }
.sli-cine-hero__actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.8rem; }
.sli-cine-hero__note{ margin:1rem 0 0; font-size:.82rem; color:#9aa6bd; }
.sli-cine-hero__chips{ margin-top:clamp(1.8rem,3.5vw,3rem); display:grid; grid-template-columns:repeat(4,1fr); background:rgba(10,14,23,.55); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.14); border-radius:12px 12px 0 0; overflow:hidden; }
.sli-cine-chip{ display:flex; flex-direction:column; gap:.4rem; padding:1.1rem 1.4rem; }
.sli-cine-chip + .sli-cine-chip{ border-left:1px solid rgba(255,255,255,.12); }
.sli-cine-chip svg{ width:24px; height:24px; color:var(--accent-glow); }
.sli-cine-chip b{ font-size:.95rem; font-weight:700; color:#fff; }
.sli-cine-chip span{ font-size:.8rem; color:#9aa6bd; }

/* ---- Dark impact band ------------------------------------------------------ */
.sli-band-impact{ position:relative; background:var(--color-ink-deep,#0a0e17); padding:var(--space-xl) var(--gutter); overflow:hidden; text-align:center; }
.sli-band-impact__glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(46% 62% at 50% 42%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.sli-band-impact__inner{ position:relative; max-width:58ch; margin:0 auto; }
.sli-band-impact__mark{ display:block; font-family:"Iowan Old Style",Palatino,Georgia,serif; font-size:3.4rem; line-height:.5; color:var(--accent-glow); opacity:.55; margin-bottom:.5rem; }
.sli-band-impact__quote{ margin:0; font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-weight:600; font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.25; color:#f4f6fb; text-wrap:balance; }
.sli-band-impact__attr{ margin:1.1rem 0 0; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--accent-glow); }

/* ---- Cinematic image band -------------------------------------------------- */
.sli-band-img{ position:relative; min-height:44vh; display:flex; align-items:center; overflow:hidden; background:#0a0e17; }
.sli-band-img__bg{ position:absolute; inset:0; background-size:cover; background-position:center; }
.sli-band-img__bg::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(6,7,13,.88) 0%, rgba(6,7,13,.55) 52%, rgba(6,7,13,.62) 100%); }
.sli-band-img__inner{ position:relative; width:100%; max-width:var(--wide-width); margin:0 auto; padding:var(--space-lg) var(--gutter); }
.sli-band-img__eyebrow{ margin:0 0 .8rem; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--accent-glow); }
.sli-band-img__quote{ margin:0; max-width:26ch; font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-weight:600; font-size:clamp(1.4rem,2.8vw,2.2rem); line-height:1.2; color:#fff; text-shadow:0 2px 30px rgba(0,0,0,.5); }

/* ---- Trusted-by logo train (light band, infinite marquee) ------------------ */
.sli-logos{ background:var(--color-cloud,#eef1f6); padding:var(--space-xl,3.5rem) 0; overflow:hidden; }
.sli-logos__head{ max-width:var(--wide-width); margin:0 auto var(--space-lg,2rem); padding:0 var(--gutter); text-align:center; }
.sli-logos__eyebrow{ margin:0 0 .55rem; font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--color-blue-action,#2f7bff); }
.sli-logos__title{ margin:0; font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-weight:600; font-size:clamp(1.35rem,2.6vw,2rem); line-height:1.2; color:var(--color-ink,#0d1526); text-wrap:balance; }
.sli-logos__viewport{ position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.sli-logos__track{ display:flex; align-items:center; gap:clamp(1.2rem,3vw,2.2rem); width:max-content; animation:sli-logos-scroll 48s linear infinite; }
.sli-logos__viewport:hover .sli-logos__track{ animation-play-state:paused; }
.sli-logos__track img{ box-sizing:border-box; height:clamp(72px,8.4vw,96px); width:auto; min-width:150px; max-width:240px; object-fit:contain; background:#fff; padding:1rem 1.6rem; border-radius:12px; border:1px solid rgba(13,21,38,.07); box-shadow:0 3px 16px -6px rgba(13,21,38,.22); transition:transform .3s ease,box-shadow .3s ease; }
.sli-logos__track img:hover{ transform:translateY(-3px); box-shadow:0 10px 22px -7px rgba(13,21,38,.26); }
@keyframes sli-logos-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width:720px){
  .sli-cine-hero__chips{ grid-template-columns:repeat(2,1fr); }
  .sli-cine-chip:nth-child(3){ border-left:0; }
  .sli-cine-chip:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.12); }
}
@media (prefers-reduced-motion:reduce){
  .sli-logos__track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; gap:clamp(2rem,5vw,4rem) clamp(2.5rem,6vw,5rem); }
  .sli-logos__viewport{ -webkit-mask-image:none; mask-image:none; }
}

/* ---- Fix: stray children collapsing into the 8px rail column ----------------
   .product-lines__inner is a `8px 1fr` grid (rail + content). Only .rail,
   .__header and .__grid are explicitly placed in their columns; any OTHER
   direct child (a stray footnote <p>, an extra content <div>) auto-flows into
   the 8px rail column and collapses to one-char-per-line (vertical text).
   Place every stray child in the content column, matching the header/grid
   responsive placement (col 2, or col 1 below 480px). */
.product-lines__inner > :not(.product-lines__rail):not(.product-lines__header):not(.product-lines__grid) {
  grid-column: 2;
}
@media (max-width: 480px) {
  .product-lines__inner > :not(.product-lines__rail):not(.product-lines__header):not(.product-lines__grid) {
    grid-column: 1;
  }
}

/* ---- Cinematic video band (lazy-load YouTube facade) ------------------------ */
.sli-video-band{ position:relative; background:var(--color-ink-deep,#0a0e17); padding:var(--space-xl,3.5rem) var(--gutter,1.5rem); overflow:hidden; }
.sli-video-band__glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 60% at 50% 40%, color-mix(in srgb, var(--accent,#2f7bff) 22%, transparent), transparent 70%); }
.sli-video-band__inner{ position:relative; max-width:960px; margin:0 auto; text-align:center; }
.sli-video-band__eyebrow{ margin:0 0 .55rem; font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-glow,#6aa5ff); }
.sli-video-band__title{ margin:0 0 clamp(1.4rem,3vw,2.2rem); font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-weight:600; font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.2; color:#f4f6fb; text-wrap:balance; }
.sli-video{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; cursor:pointer; background:#000; box-shadow:0 24px 60px -22px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.08); }
.sli-video:focus-visible{ outline:2px solid var(--accent-glow,#6aa5ff); outline-offset:3px; }
.sli-video__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sli-video::after{ content:""; position:absolute; inset:0; background:radial-gradient(65% 65% at 50% 50%, rgba(6,9,16,.05), rgba(6,9,16,.45)); pointer-events:none; transition:background .25s ease; }
.sli-video[data-loaded]::after, .sli-video[data-loaded] .sli-video__play{ display:none; }
.sli-video:hover::after{ background:radial-gradient(65% 65% at 50% 50%, rgba(6,9,16,0), rgba(6,9,16,.3)); }
.sli-video__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:78px; height:78px; border-radius:50%; border:0; cursor:pointer; background:var(--accent,#2f7bff); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 34px -8px rgba(0,0,0,.55); transition:transform .2s ease; }
.sli-video:hover .sli-video__play{ transform:translate(-50%,-50%) scale(1.09); }
.sli-video__play svg{ width:30px; height:30px; margin-left:4px; }
.sli-video__frame{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.sli-video-band__caption{ margin:1rem 0 0; font-size:.85rem; color:var(--color-slate-light,#9aa6bd); }

/* ---- Video gallery grid ---------------------------------------------------- */
.sli-video-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(1.2rem,2.5vw,2rem); max-width:var(--wide-width); margin:0 auto; }
.sli-video-card .sli-video{ margin-bottom:.85rem; border-radius:12px; }
.sli-video-card .sli-video__play{ width:60px; height:60px; }
.sli-video-card .sli-video__play svg{ width:24px; height:24px; }
.sli-video-card__title{ margin:0; font-size:.98rem; font-weight:600; line-height:1.35; color:var(--color-ink,#0d1526); }
.sli-video-card__meta{ margin:.2rem 0 0; font-size:.8rem; color:var(--color-slate-light,#9aa6bd); }

/* ---- Blog / archive post cards: consistent left alignment ------------------ */
.sli-post-card{ text-align:left; }
.sli-post-card :where(.wp-block-post-terms, .wp-block-post-title, .wp-block-post-excerpt){ text-align:left; }

/* ---- Sticky site header (desktop / tablet / mobile) ------------------------
   Keeps the nav and the "Request a Quote" CTA reachable everywhere. The
   scroll-padding-top offsets in-page anchor jumps so targets don't hide
   under the sticky bar. */
html { scroll-padding-top: 5.5rem; }
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white, #fff);
  box-shadow: 0 2px 16px -9px rgba(13, 21, 38, 0.28);
}

/* ---- Blog card featured images: uniform ratio, fill the frame (no gray letterbox) */
.sli-post-card .wp-block-post-featured-image {
  margin: 0 0 1.1rem; padding: 0; border: 0; background: transparent; box-shadow: none;
  border-radius: 12px; overflow: hidden; line-height: 0;
}
.sli-post-card .wp-block-post-featured-image a { display: block; }
.sli-post-card .wp-block-post-featured-image img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0;
}
/* Blog cards: even internal rhythm, "Read article" pinned to the bottom */
.sli-post-card { gap: 0; justify-content: flex-start; }
.sli-post-card .wp-block-post-title { margin: .1rem 0 .55rem; }
.sli-post-card .wp-block-post-excerpt { margin: 0; }
.sli-post-card .wp-block-post-excerpt__more-link { margin-top: .7rem; }

/* ============================================================================
   FLAT-WHITE SECTION TEXTURE — echo the d4-ground-white dot grid on the other
   flat-white section systems so no section reads as blank white.
   ============================================================================ */
.miles-home .tss-section--light{
  background-image: radial-gradient(rgba(12,27,42,0.028) 1px, transparent 1.4px) !important;
  background-size: 26px 26px;
}

/* ============================================================================
   QUICK QUOTE BAND — compact early-page capture (Gravity Form 6)
   Sits directly under the hero. Distinct form id, so no collision with the
   full form (#3) at the bottom of the page.
   ============================================================================ */
.sli-quickquote{ position:relative; background:var(--color-cloud,#eef2f7); border-top:1px solid rgba(13,21,38,.07); padding:clamp(1.1rem,2.6vw,1.8rem) var(--gutter,1.5rem) calc(clamp(1.1rem,2.6vw,1.8rem) + 5px); }
.sli-quickquote::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,#0a1a33 0%,#1a5fa8 25%,#2f7bff 50%,#1a5fa8 75%,#0a1a33 100%); background-size:200% 100%; animation:sli-qq-shift 5.5s linear infinite; }
@keyframes sli-qq-shift{ 0%{ background-position:0% 0; } 100%{ background-position:200% 0; } }
@media (prefers-reduced-motion:reduce){ .sli-quickquote::after{ animation:none; background:linear-gradient(90deg,#0a1a33 0%,#1a5fa8 50%,#2f7bff 100%); } }
.sli-quickquote__inner{ max-width:var(--wide-width,1290px); margin:0 auto; display:flex; align-items:center; gap:clamp(1.2rem,3.5vw,2.8rem); flex-wrap:wrap; }
.sli-quickquote__copy{ flex:0 1 auto; }
.sli-quickquote__eyebrow{ margin:0 0 .3rem; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--color-blue-secondary,#1a5fa8); }
.sli-quickquote__title{ margin:0; font-family:"Space Grotesk",sans-serif; font-weight:800; font-size:clamp(1.1rem,2vw,1.5rem); line-height:1.08; letter-spacing:-.02em; color:var(--color-ink,#0c1b2a); }
.sli-quickquote__form{ flex:1 1 480px; }
.sli-quickquote__form .gform_confirmation_message{ font-weight:600; color:var(--color-ink,#0c1b2a); }
/* force GF into one compact inline row: form = [fields group] [button] */
.sli-quickquote .gform_wrapper form{ display:flex; align-items:center; flex-wrap:wrap; gap:clamp(.55rem,1.4vw,.9rem); }
.sli-quickquote .gform_wrapper .gform_body{ flex:1 1 320px; }
.sli-quickquote .gform_wrapper .gform_fields{ display:flex !important; flex-wrap:wrap; gap:.55rem; align-items:center; }
.sli-quickquote .gform_wrapper .gfield{ flex:1 1 155px; margin:0 !important; padding:0 !important; }
.sli-quickquote .gform_wrapper .gfield--type-hidden,
.sli-quickquote .gform_wrapper .gfield--type-honeypot,
.sli-quickquote .gform_wrapper .gform_validation_container{ display:none !important; flex:0 0 0 !important; }
.sli-quickquote .gform_wrapper .gfield_label,
.sli-quickquote .gform_wrapper .gform_required_legend{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }
.sli-quickquote .gform_wrapper .ginput_container{ margin:0 !important; }
.sli-quickquote .gform_wrapper input:not([type="submit"]):not([type="hidden"]){ width:100% !important; padding:.78rem .95rem !important; border:1.5px solid #8895a6 !important; border-radius:9px !important; background:#fff !important; color:var(--color-ink,#0c1b2a) !important; font-size:1rem !important; font-weight:500 !important; line-height:1.2 !important; box-shadow:inset 0 1px 2px rgba(13,21,38,.06) !important; }
.sli-quickquote .gform_wrapper input::placeholder{ color:#54627a !important; opacity:1 !important; }
.sli-quickquote .gform_wrapper input:not([type="submit"]):focus{ outline:none !important; border-color:var(--color-blue-action,#1a5fa8) !important; box-shadow:0 0 0 3px rgba(26,95,168,.28) !important; }
.sli-quickquote .gform_wrapper .gform_footer{ flex:0 0 auto; margin:0 !important; padding:0 !important; }
/* Background is darkened 35% toward black so white button text clears WCAG
   4.5:1 against both the default blue and the amber page override — the raw
   --accent (#2f7bff / #f5851f) was too light at this text size/weight. */
.sli-quickquote .gform_wrapper .gform_footer input[type="submit"]{ white-space:nowrap; padding:.78rem 1.7rem; border:0; border-radius:9px; background:color-mix(in srgb, var(--accent,#2f7bff) 65%, black); color:#fff; font-weight:700; font-size:.95rem; cursor:pointer; transition:filter .2s ease, transform .2s ease; }
.sli-quickquote .gform_wrapper .gform_footer input[type="submit"]:hover{ filter:brightness(1.07); transform:translateY(-1px); }
.sli-quickquote .gform_wrapper .validation_message{ font-size:.75rem; margin-top:.2rem; }
@media (max-width:760px){
  .sli-quickquote__inner{ flex-direction:column; align-items:stretch; gap:.9rem; }
  .sli-quickquote .gform_wrapper .gfield{ flex:1 1 100%; }
  .sli-quickquote .gform_wrapper .gform_footer{ flex:1 1 100%; }
  .sli-quickquote .gform_wrapper .gform_footer input[type="submit"]{ width:100%; }
}