/* li-page.css : ai-consulting-long-island.html only (lane
   2026-10-07-li-island-page, issue #850). Nothing here is shared; site.css
   owns every other page. Colors come from the brand board only
   (garnet, garnet-2, garnet-3, gold, gold-bright, gold-soft, cream). */

/* ---- Hero: home's composition, not a band (#850 lane
   2026-10-08-li-hero-like-home). The section carries home's own
   `assessment-hero kit-splash` classes, so site.css owns the garnet field, the
   grid wash, the copy column cap, the art's four-edge mask and the directional
   scrim. Only three things are page-local: the header has to go garnet the way
   `.home .site-header` does, the copy's own type colours, and the map frame
   that the town dots are measured against. ---- */
.li-hero .rule-label { color: var(--gold-bright); }
.li-hero h1 {
  margin: .5rem 0 1.1rem;
  font-weight: 800;
  color: var(--cream);
}
/* Narrower than home's min(46%, 680px): the westernmost town labels (New Hyde
   Park, Rockville Centre) hang to the LEFT of their dots, so the copy column
   has to end before they start or the brief's "no text over art" fails. */
@media (min-width: 1101px) {
  .li-hero .assessment-hero-copy { max-width: min(39%, 560px); }
  .li-hero .assessment-hero-copy .lede { max-width: 520px; }
}
.li-hero .assessment-hero-copy p { color: var(--gold-soft); }
.li-hero .assessment-hero-copy .lede { color: var(--cream); }
.li-hero .assessment-hero-copy a:not(.button) { color: var(--gold-bright); }
.li-hero .actions { display: flex; flex-wrap: wrap; gap: .9rem 1.25rem; align-items: center; margin-top: 1.75rem; }
/* The hero is now garnet to the top edge, so the header sits ON it: the same
   two rules site.css gives the home page (`.home .site-header`), scoped here
   because this page's body is not `.home`. */
.li-page .site-header { background: var(--garnet); border-bottom: 1px solid rgb(240 217 168 / .28); }
.li-page .site-header.is-scrolled { background: var(--garnet); backdrop-filter: none; }
/* Secondary button on the garnet hero: site.css keeps garnet-on-light as the
   default, so a dark band opts back into the gold-soft variant. li-hero is not
   in site.css's dark-container list and site.css is out of this lane's scope,
   so the opt-in lives here. Pair: gold-soft #f2d8b0-ish on garnet-3. */
.li-hero .button-line { color: var(--gold-soft); border-color: oklch(90% .07 82 / .42); }
.li-hero .button-line:hover,
.li-hero .button-line:focus-visible { color: var(--cream); border-color: var(--cream); }

/* ---- The map frame: ONE element that is exactly the rendered image box, so a
   dot at left/top % of it sits on the same pixel of the art at every width
   (#850 lane 2026-10-08-li-hero-like-home). site.css positions home's art by
   putting those rules on `picture` (site.css:875, and :1069 for phones); here
   the frame takes that job and `picture` goes back to being a plain block, so
   the dot overlay can be a sibling of the image inside the same box. Nothing
   crops the image and nothing uses object-fit, so the percentages stay true.
   The frame also owns the clip-path reveal in li-page.js -- one owner per
   element, the img owns nothing. ---- */
.li-hero .assessment-hero-image .li-map-frame {
  position: absolute;
  top: 48%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  line-height: 0;
}
/* Unlike home, this art carries twenty NAMED dots, and the westernmost of them
   sit at 25-30% of the image. At home's full-bleed placement those names land
   straight on the h1 and the lede -- "text over art", which the brief forbids.
   So on two-column widths the frame is pushed clear of the copy column
   (capped at min(46%, 680px) by site.css) and narrowed to match: the west end
   of the island starts right of the copy, the east tip still reaches the right
   edge. */
/* ZOOMED 2026-10-08 (lane `li-hero-zoom`, #850). All twenty towns live between
   x 25.4% and x 44.3% of the 1600px art -- Nassau plus western Suffolk -- so at
   the previous `left: 31%; width: 72%` they rendered as a ~300px strip and the
   names piled up (Westbury/Hicksville/Farmingdale, Rockville Centre/Freeport,
   Huntington Station/Commack). The frame is now 1.9x wider, so the same towns
   span 1.9x the pixels and the label gaps open with them; it is seated so the
   art's x≈20.6% lands just right of the copy column and the east end of the
   island runs off the right edge the way home's does.
   Arithmetic: left = 44% - 0.206 * 137% = 15.8%. */
@media (min-width: 1101px) {
  .li-hero .assessment-hero-image .li-map-frame { left: 15.8%; width: 137%; }
}
/* The hero must end clean into the dark `.li-towns` band. site.css gives every
   `.assessment-hero` a bottom ramp to `--flow-next`, declared as `--cream` for
   home (site.css:988) -- on this page that painted a white fade above a garnet-3
   band. Naming the real neighbour makes the ramp garnet-on-garnet, i.e. nothing
   to see, without touching site.css. */
.li-hero { --flow-next: var(--garnet-3); }
.li-hero .assessment-hero-image picture {
  position: static;
  display: block;
  width: 100%;
  transform: none;
}
.li-hero .assessment-hero-image img { display: block; width: 100%; height: auto; }
/* site.css gives home's art a 1.04 settle-scale that lands when .is-lit does.
   The dots are NOT inside the img, so a scaled img would put every dot 4% off
   its town until that transition finished. This page takes its entrance from
   the frame's clip-path reveal instead. */
.li-hero.kit-splash .assessment-hero-image img { transform: none; transition: none; }
/* ---- Twenty town dots on the island (lane 2026-10-08-li-town-dots, #850;
   re-seated on the hero art 2026-10-08-li-hero-like-home). The overlay fills
   `.li-map-frame`, which IS the image box, so a dot at left/top % of the layer
   sits on the same pixel of the art at 1440, 1728 and 1920. ---- */
.li-hero-dots {
  position: absolute;
  inset: 0;
  z-index: 2;
  line-height: normal;
  pointer-events: none;
}
.li-dot {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
}
.li-dot-mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 3px oklch(90% .07 82 / .2), 0 0 10px 2px oklch(90% .07 82 / .35);
}
.li-dot-label {
  position: absolute;
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .02em;
  color: var(--cream);
  text-shadow: 0 1px 5px oklch(18% .06 18 / .9), 0 0 2px oklch(18% .06 18 / .9);
}
.li-dot-label a {
  color: var(--cream);
  text-decoration-color: oklch(90% .07 82 / .6);
  text-underline-offset: .18em;
  pointer-events: auto;
}
.li-dot-label a:hover,
.li-dot-label a:focus-visible { color: var(--gold-bright); }
.li-dot-right .li-dot-label { left: .72rem; top: 50%; transform: translateY(-50%); }
.li-dot-left .li-dot-label { right: .72rem; top: 50%; transform: translateY(-50%); }
.li-dot-above .li-dot-label { left: 50%; bottom: .6rem; transform: translateX(-50%); }
.li-dot-below .li-dot-label { left: 50%; top: .6rem; transform: translateX(-50%); }
/* Melville is the office: the marker reads louder than the neighbours. */
.li-dot-office .li-dot-mark {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  box-shadow: 0 0 0 5px oklch(90% .07 82 / .22), 0 0 16px 4px oklch(90% .07 82 / .45);
}
.li-dot-office .li-dot-label {
  font-size: .8rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* The band is too small for twenty labels on a phone: dots stay, only the five
   town pages and the office keep a name. */
@media (max-width: 760px) {
  /* Phones 2026-10-08 (lane `li-hero-zoom`, #850): the art used to be absolute
     behind the copy, which put faint town labels under the two buttons. The
     figure is the LAST child of the hero, so taking it out of absolute flow
     drops it into its own full-width block BELOW the buttons, with no text over
     it. The directional scrim is a copy-readability device for the overlap
     layout and has nothing to darken here, so it goes. */
  .li-hero .assessment-hero-image {
    position: static;
    inset: auto;
    width: 100%;
    margin-top: 1.75rem;
  }
  .li-hero .assessment-hero-image::after { display: none; }
  /* Same zoom reasoning as desktop: at 100% width the twenty towns are a 70px
     strip on a phone and the six surviving names stack on each other. 1.85x,
     centred on the cluster's midpoint (x 34.8% of the art), spreads them;
     `.assessment-hero` is `overflow: hidden` (site.css:810), so the ends of the
     island run off both edges instead of adding a scrollbar.
     Arithmetic: left = 50% - 0.348 * 185% = -14.4%. */
  .li-hero .assessment-hero-image .li-map-frame {
    position: relative;
    top: auto;
    left: -14.4%;
    width: 185%;
    transform: none;
  }
  .li-dot-mark {
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    box-shadow: 0 0 0 2px oklch(90% .07 82 / .18), 0 0 6px 1px oklch(90% .07 82 / .3);
  }
  .li-dot-office .li-dot-mark {
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    box-shadow: 0 0 0 3px oklch(90% .07 82 / .2), 0 0 9px 2px oklch(90% .07 82 / .4);
  }
  /* The frame is zoomed 1.85x here, so the names can carry real size. */
  .li-dot-label { font-size: .62rem; letter-spacing: 0; }
  .li-dot-office .li-dot-label { font-size: .64rem; letter-spacing: .04em; }
  /* Garden City and Farmingdale would collide with the office name at this
     width, so on a phone their names sit under the dot. */
  .li-dot-mabove .li-dot-label {
    left: 50%;
    right: auto;
    bottom: .45rem;
    transform: translateX(-50%);
  }
  .li-dot-mbelow .li-dot-label {
    left: 50%;
    right: auto;
    top: .45rem;
    transform: translateX(-50%);
  }
  .li-dot:not(.li-dot-key) .li-dot-label { display: none; }
  /* The office sits mid-island: its name hangs left so it never runs off. */
  .li-dot-office .li-dot-label { left: auto; right: .45rem; }
}

/* ---- Twenty towns, two quiet lines under the hero ---- */
.li-towns {
  padding-block: clamp(1.1rem, 2vw, 1.6rem);
  background: var(--garnet-3);
  border-top: 1px solid oklch(90% .07 82 / .18);
}
.li-towns-line {
  margin: .25rem 0;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--gold-soft);
}
.li-towns-county {
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.li-towns-line a { color: var(--cream); text-underline-offset: 3px; }
.li-towns-line a:hover, .li-towns-line a:focus-visible { color: var(--gold-bright); }

/* Word mask reveal (shared motion spec 2026-10-07): JS wraps each word in
   .li-word (clipping) around .li-word-i (the mover). With no JS the markup is
   never wrapped, so the text is plain. */
.li-word { display: inline-block; overflow: hidden; vertical-align: top; }
.li-word-i { display: inline-block; will-change: transform; }

/* ---- The ladder: five big cards. Default is a vertical stack; the sideways
   row exists ONLY inside the pinned scroll on wide screens, and is never
   user-swipeable (issue #850, 2026-10-08). ---- */
.li-ladder { overflow: clip; }
.li-ladder-viewport { position: relative; }
.li-ladder-row {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow: visible;
}
.li-step {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: .9rem;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  background: var(--cream);
  border: 1px solid oklch(74% .04 70 / .5);
  border-left: 5px solid var(--gold);
  border-radius: 14px;
}
/* Card hover per the shared motion spec: 0.6s, a 6px lift, and a gold rule
   that draws left to right. Never a bounce. */
.li-step, .li-bento li {
  position: relative;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.li-step::after, .li-bento li::after {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  content: "";
}
.li-step:hover, .li-bento li:hover,
.li-step:focus-within, .li-bento li:focus-within { transform: translateY(-6px); }
.li-step:hover::after, .li-bento li:hover::after,
.li-step:focus-within::after, .li-bento li:focus-within::after { transform: scaleX(1); }

.li-step-num {
  font-size: clamp(2.8rem, 4.6vw, 4.4rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.03em;
  color: var(--gold-text);
}
.li-step-kicker {
  font-size: .76rem;
  font-weight: 750;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--garnet);
}
.li-step h3 { margin: 0; font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.2; }
.li-step p { margin: 0; color: var(--ink-soft); }
.li-step-who {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid oklch(74% .04 70 / .5);
}
.li-step-who strong {
  display: block;
  margin-bottom: .35rem;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
/* Nothing is swiped by hand any more, so the sideways hint never shows. */
.li-ladder-hint { display: none; }

/* Thin gold progress bar under the row, driven by the pin's own scrub. */
.li-ladder-progress {
  display: none;
  height: 2px;
  margin-top: 1.2rem;
  background: oklch(74% .04 70 / .45);
}
.li-ladder-progress-fill {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

/* The sideways row exists only inside the pin, and only once JS is live. */
@media (min-width: 761px) {
  .li-ladder-pinned .li-ladder-row {
    flex-direction: row;
    overflow: visible;
  }
  .li-ladder-pinned .li-step { flex: 0 0 28rem; }
  .li-ladder-pinned .li-ladder-progress { display: block; }
}

/* ---- Why local: bento of five tiles ---- */
.li-bento {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
}
.li-bento li {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  grid-column: span 3;
  padding: clamp(1.3rem, 2.1vw, 1.9rem);
  background: oklch(90% .07 82 / .06);
  border: 1px solid oklch(90% .07 82 / .2);
  border-radius: 16px;
}
.li-bento li:nth-child(1) { grid-column: span 2; }
.li-bento li:nth-child(2) { grid-column: span 4; }
.li-bento li:nth-child(3) { grid-column: span 3; }
.li-bento li:nth-child(4) { grid-column: span 3; }
.li-bento .li-tile-wide {
  grid-column: span 6;
  background: oklch(90% .07 82 / .1);
  border-color: oklch(90% .07 82 / .34);
}
.li-bento strong {
  font-size: clamp(1.25rem, 2.1vw, 1.9rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--cream);
  text-wrap: balance;
}
.li-bento .li-tile-wide strong { font-size: clamp(1.5rem, 3vw, 2.6rem); }
.li-bento span { color: var(--gold-soft); line-height: 1.65; }
@media (max-width: 900px) {
  .li-bento { grid-template-columns: minmax(0, 1fr); }
  .li-bento li, .li-bento li:nth-child(1), .li-bento li:nth-child(2),
  .li-bento li:nth-child(3), .li-bento li:nth-child(4),
  .li-bento .li-tile-wide { grid-column: span 1; }
}

/* ---- FAQ: tighter rows than the shared editorial list ---- */
.li-faq .editorial-list { gap: 1.1rem; }
.li-faq .editorial-list li { padding-block: 1rem; }