/* NEST History Timeline — Elementor widget styles.
   Namespaced to .nest-* ; colour/scroll tokens are set per-instance as
   inline custom properties on the .nest-history wrapper (see widget style
   controls), with sensible defaults here as a fallback. */
.nest-history{
  --nest-bg:#f3f2f2;
  --nest-text:#201e1d;
  --nest-accent:#ec3013;
  --nest-accent-700:#ae1800;
  --nest-neutral-300:#d7d3d3;
  --nest-neutral-500:#9b9797;
  --nest-neutral-700:#605d5d;
  --nest-neutral-100:#f8f4f4;
  --nest-font:"Archivo",system-ui,sans-serif;
  --nest-slide-scroll:90vh;
}
.nest-history *{box-sizing:border-box}
.nest-history{background:var(--nest-bg);color:var(--nest-text);font-family:var(--nest-font);font-weight:400}
.nest-history h2,.nest-history h3{font-family:var(--nest-font);font-weight:800;margin:0}

.nest-intro{max-width:1240px;margin:0 auto;padding:104px 48px 64px}
.nest-eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:40px}
.nest-eyebrow span:first-child{display:block;width:44px;height:2px;background:var(--nest-accent)}
.nest-eyebrow span:last-child{font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--nest-accent-700)}
.nest-intro-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:96px;align-items:end;padding-bottom:40px}
.nest-intro-grid h2{font-size:clamp(40px,4.4vw,68px);line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.nest-intro-grid p{font-size:18px;line-height:1.6;color:var(--nest-neutral-700);margin:0 0 8px;text-wrap:pretty}
.nest-rule{height:2px;background:var(--nest-text)}

/* --- pinned stage ------------------------------------------------------ */
.nest-track{position:relative}                       /* height set by JS: slides x --nest-slide-scroll */
/* top/height leave room for the site's own sticky header/footer bars, measured
   and set as custom properties by the JS (falls back to 0 if there are none). */
.nest-stage{position:sticky;top:var(--nest-header-offset,0px);height:calc(100vh - var(--nest-header-offset,0px) - var(--nest-footer-offset,0px));overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto}
/* On phones the browser's address bar shows/hides as you scroll, changing
   the visible viewport height. 100vh doesn't track that (it's fixed to the
   largest possible viewport), which makes a plain vh-based pinned stage
   jump as chrome appears/disappears. 100dvh tracks the *current* visible
   viewport instead. Older browsers that don't understand `dvh` simply
   ignore this line and keep the height:calc(100vh...) rule above. */
.nest-stage{height:calc(100dvh - var(--nest-header-offset,0px) - var(--nest-footer-offset,0px))}
.nest-slides{position:relative;min-height:0}
.nest-slide{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:88px;align-items:center;padding:88px 64px 56px;opacity:0;pointer-events:none}
.nest-slide-text{will-change:opacity,transform}
.nest-kicker{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.nest-kicker b{font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--nest-accent-700)}
.nest-kicker i{font-style:normal;font-size:12px;letter-spacing:.16em;color:var(--nest-neutral-500)}
.nest-slide h3{font-size:clamp(34px,3.4vw,52px);line-height:1.05;letter-spacing:-.02em;border-top:2px solid var(--nest-text);padding-top:24px;margin-bottom:20px}
.nest-slide p{font-size:19px;line-height:1.6;color:var(--nest-neutral-700);margin:0;max-width:46ch;text-wrap:pretty}
.nest-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.nest-tag{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:6px 10px;border:2px solid var(--nest-text)}
.nest-tag--accent{background:var(--nest-accent);border-color:var(--nest-accent);color:var(--nest-neutral-100)}
.nest-figure{position:relative;height:min(58vh,520px);will-change:transform}
.nest-figure img{width:100%;height:100%;object-fit:contain;display:block}
.nest-figure--empty{border:2px dashed var(--nest-neutral-300);display:flex;align-items:center;justify-content:center;color:var(--nest-neutral-500);font-size:13px;letter-spacing:.12em;text-transform:uppercase}

.nest-rail{padding:0 64px 48px}
.nest-rail-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.nest-rail-head b{font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.nest-rail-head i{font-style:normal;font-size:12px;letter-spacing:.16em;color:var(--nest-neutral-500)}
.nest-ticks{display:flex;gap:6px}
.nest-tick{flex:1;height:4px;padding:0;margin:0;border:0;display:block;background:var(--nest-neutral-300);transition:background 200ms linear;cursor:pointer;-webkit-appearance:none;appearance:none;font:inherit}
.nest-tick.is-done{background:var(--nest-neutral-500)}
.nest-tick.is-active{background:var(--nest-accent)}
.nest-tick:hover:not(.is-active){background:var(--nest-neutral-500)}
/* Ticks sit right up against each other with only a 4px-tall hit target —
   this invisibly extends the clickable/tappable area above and below each
   one without changing its visual height. */
.nest-tick::before{content:'';display:block;margin:-10px 0;height:24px}

/* --- closing band ------------------------------------------------------ */
.nest-close{background:var(--nest-accent);color:var(--nest-neutral-100)}
.nest-close-inner{max-width:1240px;margin:0 auto;padding:88px 48px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:96px;align-items:end}
.nest-close span.nest-close-kicker{display:block;font-weight:800;font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.8;margin-bottom:28px}
.nest-close p{font-weight:800;font-size:clamp(34px,3.6vw,54px);line-height:1.05;letter-spacing:-.02em;margin:0;text-wrap:balance}
.nest-stats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px 40px}
.nest-stat{border-top:2px solid currentColor;padding-top:16px}
.nest-stat b{display:block;font-weight:800;font-size:40px;line-height:1}
.nest-stat span{display:block;font-size:14px;letter-spacing:.06em;opacity:.85;margin-top:6px}
.nest-close a{font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--nest-neutral-100);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:4px;align-self:end}
.nest-close a:hover{opacity:.75}
.nest-history a:focus-visible,.nest-history button:focus-visible{outline:2px solid var(--nest-accent);outline-offset:2px}

/* --- fallback: no JS, or narrow / short viewports ----------------------- */
.nest-history.is-static .nest-track{height:auto!important}
.nest-history.is-static .nest-stage{position:static;height:auto;display:block}
.nest-history.is-static .nest-slides{position:static}
.nest-history.is-static .nest-slide{position:static;opacity:1;pointer-events:auto;padding:64px;border-top:2px solid var(--nest-neutral-300)}
.nest-history.is-static .nest-slide-text,.nest-history.is-static .nest-figure{transform:none!important}
.nest-history.is-static .nest-rail{display:none}
@media (max-width:900px){
  .nest-intro-grid,.nest-close-inner{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .nest-slide{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .nest-figure{height:280px}
}
/* Pinned (animated) mode specifically: the whole slide has to fit inside a
   fixed-height sticky stage on a phone screen, so it needs a noticeably
   tighter footprint than the .is-static fallback (which just flows down
   the page and can be any height). Scoped with :not(.is-static) so the
   plain stacked fallback — still used for very short/landscape viewports —
   keeps its own more generous spacing. */
@media (max-width:900px){
  .nest-history:not(.is-static) .nest-slide{padding:36px 24px 20px;row-gap:16px}
  .nest-history:not(.is-static) .nest-figure{height:34vh;min-height:160px;max-height:240px}
  .nest-history:not(.is-static) .nest-kicker{margin-bottom:12px}
  .nest-history:not(.is-static) .nest-slide h3{font-size:26px;padding-top:16px;margin-bottom:12px}
  .nest-history:not(.is-static) .nest-slide p{font-size:15px;line-height:1.5}
  .nest-history:not(.is-static) .nest-tags{margin-top:14px}
  .nest-history:not(.is-static) .nest-rail{padding:0 24px 20px}
  /* The progress-bar ticks are real <button> elements (for tab/click
     support), and a site accessibility-widget plugin enforces a minimum
     touch-target width on them that CSS overrides can't shrink. Twelve of
     those at once are wider than a phone screen, and because .nest-rail
     shares an implicit CSS grid column with .nest-slides, that overflow
     drags the whole pinned stage (heading/image included) off-screen.
     Hiding the tick row on mobile avoids the blow-out entirely. */
  .nest-history:not(.is-static) .nest-ticks{display:none}
}

/* Elementor editor panel is usually narrow: fall back to the stacked
   layout inside the editor iframe so authors aren't stuck scrolling
   against a broken pinned stage while editing. */
.elementor-editor-active .nest-history .nest-track{height:auto!important}
.elementor-editor-active .nest-history .nest-stage{position:static;height:auto;display:block}
.elementor-editor-active .nest-history .nest-slides{position:static}
.elementor-editor-active .nest-history .nest-slide{position:static;opacity:1;pointer-events:auto;padding:64px;border-top:2px solid var(--nest-neutral-300)}
.elementor-editor-active .nest-history .nest-rail{display:none}