/* ============================================================
   INSPO MATCH: ported from the parallax reference build.
   Two bands get their photograph back: the CEO quote and the
   closing "A new era in oral health" statement. One flat darken
   sits on each picture so white type stays legible, and the
   photograph is pinned to the viewport so the copy travels over it.
   Loaded last so it settles above dark-story.css.
   ============================================================ */

/* --- 1. The CEO band ------------------------------------------------ */
body.dark-story .quote-band{
  position:relative;
  min-height:clamp(600px,90vh,980px);
  display:flex;
  align-items:center;
  padding:clamp(96px,10vw,160px) 0;
  overflow:hidden;
  border-top:0;
}
body.dark-story .quote-band::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(rgba(7,9,13,.82),rgba(7,9,13,.82)),
    url("https://44667010.fs1.hubspotusercontent-na1.net/hubfs/44667010/Images/01-brand/Spektra%20Website%20Card%20Images/pillar-4-patient-care-dental-chair-1792204481.jpeg")
    center center / cover fixed no-repeat;
}
body.dark-story .quote-band::after{display:none;}
body.dark-story .quote-band > .wrap{position:relative;z-index:2;width:100%;}
body.dark-story .quote-band .wm{z-index:1;}

/* the band type opens up now that the band is tall */
body.dark-story .eco-quote blockquote p{font-size:clamp(22px,2vw,28px);}

/* --- 2. The closing statement --------------------------------------- */
body.dark-story .foot-launch{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
body.dark-story .foot-launch::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(rgba(7,9,13,.83),rgba(7,9,13,.83)),
    url("https://44667010.fs1.hubspotusercontent-na1.net/hubfs/44667010/Images/01-brand/Spektra%20Website%20Card%20Images/mission-dentist-patient-mirror-1144259035.jpg")
    center center / cover fixed no-repeat;
}
body.dark-story .foot-launch::after{display:none;}
body.dark-story .foot-launch .wrap{position:relative;z-index:1;}

/* --- 3. Touch and small screens ------------------------------------- */
/* iOS and most touch browsers ignore fixed attachment, so it scrolls there */
@media (max-width:900px),(hover:none){
  body.dark-story .quote-band::before,
  body.dark-story .foot-launch::before{background-attachment:scroll,scroll;}
  body.dark-story .quote-band{
    min-height:clamp(480px,72vh,720px);
    padding:clamp(64px,12vw,96px) 0;
  }
}

/* --- 4. Print ------------------------------------------------------- */
@media print{
  body.dark-story .quote-band,
  body.dark-story .foot-launch{min-height:0;}
  body.dark-story .quote-band::before,
  body.dark-story .foot-launch::before{display:none;}
}

/* --- 5. A New Era ----------------------------------------------------- */
/* The video is the band's ground now, held to the viewport the way the quote
   band holds its photograph, under one even darken, with the copy centred
   over it. era-video.js clips the fixed video to the band. */
body.dark-story .sec.silver.era{
  position:relative;
  overflow:hidden;
  background:transparent;
  min-height:clamp(560px,84vh,900px);
  display:flex;
  align-items:center;
  padding:clamp(92px,9vw,144px) 0;
  border-top:0;
}
body.dark-story .era-media{position:absolute;inset:0;z-index:0;pointer-events:none;}
/* fixed to the viewport, never sticky, so it does not travel at the ends of
   the band either */
body.dark-story .era-media video{
  position:fixed;top:0;left:0;display:block;
  width:100vw;height:100vh;object-fit:cover;
  clip-path:inset(50% 0 50% 0);
}
body.dark-story .era-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(7,9,13,.83);
}
body.dark-story .sec.silver.era > .wrap{position:relative;z-index:2;width:100%;}
body.dark-story .era .reassure{margin:0 auto;text-align:center;}
/* the headline keeps the page's heading scale and holds one line from tablet
   up; the narrow measure that used to wrap it is gone */
body.dark-story .era .reassure h2{max-width:none;margin:0 auto;}
body.dark-story .era .reassure p{max-width:64ch;margin-left:auto;margin-right:auto;color:var(--white);}
/* revisions.css pins this paragraph's margins with !important, so the
   centring has to match that weight; the vertical rhythm is kept. */
body.dark-story .era .customer-leadin{max-width:58ch;margin:25px auto 14px!important;color:var(--metallic)!important;}
body.dark-story .era .legacy-btns{justify-content:center;}
@media (min-width:900px){
  body.dark-story .era .reassure h2{white-space:nowrap;}
}
/* touch browsers ignore fixed attachment, so the video fills the band instead */
@media (hover:none){
  body.dark-story .era-media video{position:absolute;width:100%;height:100%;clip-path:none!important;}
}
@media (max-width:720px){
  body.dark-story .sec.silver.era{min-height:clamp(460px,70vh,640px);padding:clamp(64px,12vw,96px) 0;}
}
@media print{
  body.dark-story .sec.silver.era{min-height:0;}
  body.dark-story :is(.era-media,.era-veil){display:none;}
}

/* --- 6. The ecosystem chapter rail ------------------------------------ */
/* The active cell used to carry its own 12px radius inside the rail's 13px
   radius, so a rounded panel floated within a rounded box and the underline
   ran past the curve. The rail owns the shape now: cells are square and the
   rail clips them, which is what a segmented control should look like. */
body.dark-story .eco-chapters{overflow:hidden;}
/* below 720px the rail is a horizontal scroller with square ends, so it
   keeps its own overflow: clipping there would kill the swipe. */
@media(max-width:720px){
  body.dark-story .eco-chapters{overflow-x:auto;overflow-y:hidden;}
}
body.dark-story .eco-chapter-link{border-radius:0;}
/* a hairline sitting on the edge of the filled cell reads as a seam */
body.dark-story .eco-chapter-link[aria-current]:before,
body.dark-story .eco-chapter-link[aria-current] + .eco-chapter-link:before{content:none;}
/* the marker spans its cell instead of stopping short of the corner */
body.dark-story .eco-chapter-link:after{left:0;right:0;}

/* --- 7. The ecosystem chapter stage ----------------------------------- */
/* The slide counter now sits under the artwork, where the three-word line
   used to be, instead of in the bar above it. Its styling lived inside the
   desktop media query, so it is restated here to travel with the element. */
body.dark-story .eco-visual-foot .eco-visual-count{
  display:block;
  color:#E5E5E5;
  font-family:var(--label);
  font-size:13px;
  letter-spacing:.08em;
}
/* Hairlines out: between one chapter and the next, and between the rows of
   each chapter's benefit list. Spacing carries the separation now. */
body.dark-story .eco-scene{border-bottom:0;}
body.dark-story .eco-benefits li{border-bottom:0;}
/* The section used to end flush against the scrolling word band below it. */
body.dark-story #ecosystem.ecosystem-story{padding-bottom:56px;}

/* --- 8. The circuit lines run the whole section ------------------------ */
/* They used to live inside the left column's art stage, so they stopped at
   the artwork. They now hang off the layout: a full-width track that spans
   the section, with the drawing itself sticky inside it so it keeps pace
   with the pinned artwork instead of stretching over six chapters. */
body.dark-story .eco-circuit-field{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
body.dark-story .eco-circuit-field .eco-circuit{
  position:sticky;
  top:calc(var(--eco-head) + var(--eco-nav) + 20px);
  inset-inline:auto;
  display:block;
  width:100%;
  height:calc(100svh - var(--eco-head) - var(--eco-nav) - 80px);
  min-height:350px;
  max-height:820px;
}
/* The artwork and the copy both sit above the lines. The visual column must
   keep `position:sticky` here: giving it `relative` unpins it and the artwork
   stops tracking the chapters, so it only takes a z-index (sticky is already
   a positioned element). */
body.dark-story .eco-story-layout > .eco-visual{
  z-index:1;
}
body.dark-story .eco-story-layout > .eco-scenes{
  position:relative;
  z-index:1;
}
/* below the two-column layout the lines have nothing to span, so they go */
@media(max-width:1000px),(max-height:639px){
  body.dark-story .eco-circuit-field{display:none;}
}

/* --- 9. No hairlines between the main sections ------------------------ */
/* dark-story.css draws these with an ID selector, so the earlier
   `border-top:0` on the era band never actually won. Matching the weight
   here retires all of them in one place. */
body.dark-story #main :is(#pillars,#transition,#origin,#contact),
body.dark-story #main #ecosystem.ecosystem-story{
  border-top:0;
}
/* the scrolling word band keeps the hairline above it and loses the one below */
body.dark-story .new-era-surface > .word-band,
body.dark-story .word-band{
  border-bottom-width:0;
}

/* --- 10. Chapter copy sits level with the artwork --------------------- */
/* The copy is centred inside the scene box. That box starts just under the
   chapter rail and is at least 740px tall, while the pinned artwork starts
   20px lower and gives up its last 163px to the counter, arrows and progress
   bar. Centring in the taller box therefore pushed the text well below the
   picture. Padding the bottom of the scene by exactly that difference pulls
   the centred copy back onto the artwork's centre line, at any height. */
@media(min-width:1001px) and (min-height:640px){
  body.dark-story .eco-enhanced .eco-scene{
    --eco-band:max(740px, calc(100svh - var(--eco-head) - var(--eco-nav)));
    /* On a screen short enough that the 740px floor binds, padding plus copy
       exceeds the box and the copy pins to the top padding instead, so that
       value is what sets the alignment there: 48px lands the copy on the
       artwork's centre line for a typical chapter. */
    padding-top:48px;
    padding-bottom:calc(var(--eco-band) - 100svh + var(--eco-head) + var(--eco-nav) + 179px);
  }
}

/* --- 11. Tighter benefit lists ---------------------------------------- */
/* Each row carried 12px above and below, so adjacent rows sat 24px apart.
   At 9px that gap is 18px, a quarter less. The first row keeps its flush
   top so the list still aligns with the subtitle above it. */
body.dark-story .eco-benefits li{padding-top:9px;padding-bottom:9px;}
body.dark-story .eco-benefits li:first-child{padding-top:0;}

/* --- 12. Tighter headings on the Our Evolution cards ------------------ */
/* Each heading reserved two lines (min-height 57.6px) while all three titles
   run to one, so 28px of empty line sat under the text before the 12px
   margin: a 40px gap. One line of reservation plus 20px of margin halves it
   and still leaves the three headings the same height as each other. */
body.dark-story .legacy-card h3{
  min-height:1.2em;
  margin-bottom:20px;
}

/* --- 13. Shorter logo panels on the Our Evolution cards --------------- */
/* The panel's height comes from its 1200/630 aspect ratio, so trimming the
   ratio to 1200/504 takes exactly a fifth off at any card width. The logo
   art is object-fit:cover, so it crops rather than squashes. */
body.dark-story .legacy-card .lc-media{aspect-ratio:1200 / 504;}


/* --- 15. The header bar sits on Ink, not navy ------------------------- */
/* dark-story.css gave the scrolled header rgba(6,16,30,.92), a blue that is
   not in the palette. Ink at the same opacity keeps the glass effect and the
   contrast behind the nav chips, with the brand's own black. */
body.dark-story .site-head.scrolled{background:rgba(10,10,10,.92);}

/* --- 16. A simpler contact column ------------------------------------- */
/* The three groups under the heading were each fenced by a hairline. The
   headings and their 22px of space carry the separation on their own. */
body.dark-story #contact .contact-aux{border-top:0;}

/* Now that the column is short, starting it at the top of the grid left a
   long gap beside the form. Centring it keeps the two balanced whatever the
   form's height, and is a no-op once the grid stacks on narrow screens. */
body.dark-story #contact .contact-copy{align-self:center;}