/* =========================================================
   SKARIS v2 — exploration layer.
   Additive only: every rule here sits on top of styles.css and the
   existing tokens. Nothing here is referenced by the live site.
   ========================================================= */

/* ---------- HERO WATERMARK ----------
   One quiet signature instead of scattered decoration: the falcon mark,
   held large and faint behind the hero copy, breathing through a slow
   continuous zoom + drift. This is the only ambient motif on the page —
   "put your boldness in one place; keep everything around it quiet." */
.hero2__watermark{
  position:absolute; z-index:0; pointer-events:none;
  right:-8%; top:50%; transform:translateY(-50%) scale(1);
  width:min(62vw,780px); aspect-ratio:623/597;
  background:var(--gold);
  -webkit-mask:var(--falcon) center/contain no-repeat;
          mask:var(--falcon) center/contain no-repeat;
  opacity:.05;
  animation:watermarkBreathe 26s ease-in-out infinite;
}
@keyframes watermarkBreathe{
  0%,100%{ transform:translateY(-50%) scale(1) rotate(0deg); }
  50%{ transform:translateY(-52%) scale(1.06) rotate(1.2deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero2__watermark{ animation:none; }
}
@media (max-width:639.98px){
  .hero2__watermark{ opacity:.035; width:min(90vw,480px); right:-20%; }
}

/* On load, the whole hero settles in from a very slight zoom — a cinematic
   opening rather than a flat cut-in. Runs once; CSS only. */
@media (prefers-reduced-motion: no-preference){
  .hero2__zoomin{ animation:heroZoomIn 1.3s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes heroZoomIn{
  from{ transform:scale(1.045); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

/* ---------- ROLLING WORD ----------
   A synonym that types itself in, holds, backspaces out and types the
   next — plain italic-serif text in flow, no chip/box. Pure DOM text
   + setTimeout, so it needs no library and keeps its own natural
   baseline with the words beside it, with no alignment hack required. */
/* Fraunces italic reads noticeably smaller than Archivo bold at the same
   declared size (shorter x-height), so the rolling word is sized up
   slightly to feel like the same visual weight as the type around it. */
.roll{ display:inline-block; font-size:1.14em; }
.roll__word{
  font-family:var(--serif); font-style:italic; font-weight:500;
  color:var(--gold-lift);
}
.roll__caret{
  display:inline-block; width:.05em; height:.78em; margin-left:.03em;
  background:currentColor; vertical-align:-.05em;
  opacity:0; /* hidden until its turn in the sentence sequence — see .is-active */
}
.roll__caret.is-active{ opacity:1; animation:ghostBlink .9s step-end infinite; }
@media (prefers-reduced-motion: reduce){ .roll__caret{ display:none; } }

/* ---------- FOIL SHEEN ----------
   A slow band of light crossing the static part of the headline — the
   printed-foil read, not a cheap CSS-gradient-text cliché: it moves once
   every several seconds, not on a tight loop. Base colour is warm rose
   gold throughout; the sweep itself is the brightest moment (a light
   catching metal), never a dip into something duller than the rest. */
.sheen, .sheen-word{
  background-image:linear-gradient(100deg,
    var(--gold-lift) 35%, #FBEFE6 50%, var(--gold-lift) 65%);
  background-size:260% 100%;
  background-position:120% 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sheenSweep 7s ease-in-out infinite;
}
.sheen{ animation-delay:1.1s; }
.sheen-word{ display:inline-block; }
@keyframes sheenSweep{
  0%, 60%{ background-position:120% 0; }
  85%, 100%{ background-position:-40% 0; }
}
@media (prefers-reduced-motion: reduce){
  .sheen, .sheen-word{ animation:none; background-position:40% 0; }
}

/* ---------- HIGHLIGHT MARK ----------
   A clean highlighter sweep behind one phrase — a flat, straight-edged
   band of colour that grows in from the left, the way a marker would be
   drawn across a printed line. No hand-drawn squiggle. */
.inkmark{
  position:relative; display:inline-block; white-space:nowrap; z-index:0;
  padding:.02em .05em;
}
.inkmark::before{
  content:""; position:absolute; inset:.06em -.08em .02em -.08em;
  background:rgba(223,182,164,.4); border-radius:3px;
  transform-origin:left center; transform:scaleX(0);
  z-index:-1;
  animation:inkWash .65s cubic-bezier(.65,0,.35,1) 1.4s both;
}
.panel--light .inkmark::before{ background:rgba(147,95,74,.18); }
@keyframes inkWash{ to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  .inkmark::before{ animation:none; transform:scaleX(1); }
}

/* ---------- NAV — floating pill + mega-menu ---------- */
.nav2{
  position:fixed; top:0; left:0; width:100%; max-width:100vw; z-index:200;
  display:flex; justify-content:center;
  padding-top:clamp(.75rem,2vw,1.25rem);
  pointer-events:none;
  box-sizing:border-box;
}
.nav2__bar{
  pointer-events:auto;
  display:flex; align-items:center; gap:clamp(.5rem,1.4vw,1.25rem);
  background:rgba(250,246,240,.86);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(26,17,16,.08);
  border-radius:999px;
  padding:.5rem .6rem .5rem 1.1rem;
  box-shadow:0 1px 2px rgba(26,17,16,.04), 0 16px 40px -16px rgba(26,17,16,.22);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease), padding .4s var(--ease);
  max-width:calc(100vw - 2rem);
}
.nav2.is-stuck .nav2__bar{
  box-shadow:0 1px 2px rgba(26,17,16,.06), 0 20px 48px -18px rgba(26,17,16,.3);
}
.nav2__brand{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-weight:800; font-size:.95rem; letter-spacing:.02em;
  color:var(--ink); white-space:nowrap;
}
.nav2__brand .mark{
  width:20px; height:19px; background:var(--bordeaux);
  -webkit-mask:var(--falcon) center/contain no-repeat; mask:var(--falcon) center/contain no-repeat;
  flex:none;
}
.nav2__links{ display:none; align-items:center; gap:.15rem; }
.nav2__item{ position:relative; }
.nav2__item > button, .nav2__item > a{
  position:relative;
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--sans); font-size:.8125rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-60); background:none; border:0; cursor:pointer;
  padding:.6rem .85rem; border-radius:999px;
  transition:color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}
.nav2__item > button::after, .nav2__item > a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.32rem; height:2px;
  background:var(--gold-deep); border-radius:2px;
  transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease);
}
.nav2__item > button svg{ width:9px; height:9px; transition:transform .35s var(--ease); }
.nav2__item:hover > button, .nav2__item:hover > a, .nav2__item.is-open > button{
  color:var(--ink); background:var(--sand); transform:translateY(-1px);
}
.nav2__item:hover > button::after, .nav2__item:hover > a::after,
.nav2__item.is-open > button::after{
  transform:scaleX(1); transform-origin:left;
}
.nav2__item.is-open > button svg{ transform:rotate(180deg); }
.nav2__cta{
  display:flex; align-items:center; gap:.5rem; margin-left:.25rem;
}
.nav2__book{
  font-family:var(--sans); font-size:.75rem; font-weight:700; letter-spacing:.03em;
  background:var(--bordeaux); color:var(--dk-ink);
  padding:.65rem 1.1rem; border-radius:999px; white-space:nowrap;
  transition:background-color .3s var(--ease);
}
.nav2__book:hover{ background:var(--bordeaux-deep); }
.nav2__lang{ display:flex; align-items:center; gap:.3rem; font:600 .7rem var(--sans); letter-spacing:.06em; color:var(--ink-mute); }
.nav2__lang a{ padding:.3rem .4rem; border-radius:6px; }
.nav2__lang a[aria-current]{ color:var(--ink); }
.nav2__burger{
  display:inline-flex; width:38px; height:38px; border-radius:50%;
  align-items:center; justify-content:center; background:rgba(26,17,16,.06);
  border:0; cursor:pointer; flex:none;
}
.nav2__burger span{ display:block; width:15px; height:1.5px; background:var(--ink); position:relative; }
.nav2__burger span::before,.nav2__burger span::after{
  content:""; position:absolute; left:0; width:15px; height:1.5px; background:var(--ink);
}
.nav2__burger span::before{ top:-5px; } .nav2__burger span::after{ top:5px; }

@media (min-width:1080px){
  .nav2__links{ display:flex; }
  .nav2__burger{ display:none; }
}
@media (max-width:1079.98px){
  /* the pill bar has no wrap/shrink room, so a long translated CTA label
     (e.g. BG "Запишете разговор") can push the burger button past the
     right edge of the screen on narrower phones — the drawer already
     repeats this same CTA, so just drop the duplicate on mobile/tablet. */
  .nav2__book{ display:none; }
}

/* mega-menu panel */
.megamenu{
  position:absolute; top:calc(100% + .9rem); left:50%; transform:translateX(-50%) translateY(-8px);
  width:min(880px, calc(100vw - 2.5rem));
  background:var(--paper); border-radius:24px;
  border:1px solid var(--sand);
  box-shadow:0 30px 70px -20px rgba(26,17,16,.3);
  padding:1.6rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.3rem 1.6rem;
}
.nav2__item.is-open .megamenu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.megamenu__col{ padding-block:.9rem; }
.megamenu__col + .megamenu__col{ border-left:1px solid var(--rule-light); padding-left:1.6rem; }
.megamenu__cat{
  display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.6rem;
}
.megamenu__icon{
  flex:none; width:34px; height:34px; border-radius:10px;
  background:var(--sand); display:flex; align-items:center; justify-content:center;
}
.megamenu__icon svg{ width:17px; height:17px; stroke:var(--gold-deep); }
.megamenu__cat h4{ font:700 .9rem/1.3 var(--sans); color:var(--ink); margin:0 0 .15rem; }
.megamenu__cat p{ font:400 .78rem/1.4 var(--serif); color:var(--ink-mute); margin:0; max-width:30ch; }
.megamenu__links{ display:flex; flex-direction:column; gap:.15rem; margin:0 0 1.1rem 2.8rem; }
.megamenu__links a{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  font:600 .78rem var(--sans); color:var(--ink-60);
  padding:.5rem .65rem .5rem 1.05rem; border-radius:10px;
  transition:background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.megamenu__links a::before{
  content:""; position:absolute; left:.2rem; top:50%; width:3px; height:0%;
  background:var(--gold-deep); border-radius:2px;
  transform:translateY(-50%); transition:height .3s var(--ease);
}
.megamenu__links a:hover{ background:var(--sand); color:var(--ink); transform:translateX(3px); }
.megamenu__links a:hover::before{ height:55%; }
.megamenu__links a svg{ width:10px; height:10px; opacity:0; transform:translateX(-3px); transition:all .3s var(--ease); }
.megamenu__links a:hover svg{ opacity:1; transform:translateX(0); }
.megamenu__foot{
  grid-column:1 / -1; border-top:1px solid var(--rule-light); padding-top:1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.megamenu__foot a{ font:700 .78rem var(--sans); color:var(--gold-deep); }
@media (max-width:719.98px){
  .megamenu{ grid-template-columns:1fr; width:min(380px, calc(100vw - 2.5rem)); }
  .megamenu__col + .megamenu__col{ border-left:0; border-top:1px solid var(--rule-light); padding-left:0; padding-top:1rem; margin-top: .3rem; }
}

/* mobile drawer (reuses existing .mobilemenu look-and-feel via new class) */
.drawer2[hidden]{ display:none; }
.drawer2{
  position:fixed; inset:0; z-index:199; background:var(--bordeaux);
  padding:calc(var(--nav-h) + 2rem) var(--gut) 2rem; overflow-y:auto;
}
.drawer2__group{ margin-bottom:1.6rem; }
.drawer2__group h4{
  font:700 .7rem var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-lift);
  margin:0 0 .6rem;
}
.drawer2__group a{
  display:block; font:600 1.15rem var(--sans); color:var(--dk-ink); padding:.6rem 0;
  border-bottom:1px solid var(--rule-dark);
}
.drawer2__sub a{ font-size:.95rem; color:var(--dk-ink-60); padding-left:.5rem; }
.drawer2 > .btn{ display:flex; width:100%; }

/* ---------- HERO — carousel ---------- */
.hero2{
  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(var(--nav-h) + clamp(3rem,8vh,5.5rem));
  background:var(--bordeaux); color:var(--dk-ink);
}
.hero2__slides{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:center; }
.hero2__slide{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .7s var(--ease);
  padding-bottom:clamp(2rem,4vh,3.25rem);
}
.hero2__slide.is-active{ position:relative; opacity:1; visibility:visible; }
.hero2__slide .eyebrow{ color:var(--gold-lift); margin-bottom:clamp(1.1rem,2.2vw,1.6rem); }
.hero2__h1{
  font-family:var(--sans); font-weight:800; line-height:.98; letter-spacing:-.03em;
  text-wrap:balance;
  font-size:clamp(2.4rem,7.6vw,6.25rem);
  margin-bottom:clamp(1.5rem,3vw,2.25rem);
}
.hero2__char{ opacity:0; }
@media (prefers-reduced-motion: reduce){ .hero2__char{ opacity:1; } }
.hero2__lead{ font-family:var(--serif); font-size:clamp(1.1rem,1.7vw,1.4rem); line-height:1.5; color:var(--dk-prose); max-width:46ch; margin-bottom:clamp(1.75rem,3vw,2.25rem); }
.hero2__actions{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

/* .hero2__nav / __arrow / __tabs / __tab styles removed along with the
   markup now that the hero is a single slide — the carousel JS still
   supports more than one slide, so re-add this block if one returns. */

@media (max-width:719.98px){
  .hero2{
    padding-top:calc(var(--nav-h) + clamp(1.25rem,4vh,2rem));
    padding-bottom:clamp(1.5rem,4vh,2.25rem);
  }
  .hero2__slide{ justify-content:flex-end; padding-bottom:0; }
  .hero2__h1{ font-size:clamp(2.1rem,7.6vw,6.25rem); }
}

/* ---------- TYPED HEADLINE ----------
   Large type that types itself in, character by character, as the
   section enters the viewport — full ink throughout, no blur. */
.ghost{
  font-family:var(--sans); font-weight:800; line-height:1.0; letter-spacing:-.03em;
  text-wrap:balance; text-align:center;
  font-size:clamp(2.1rem,6.4vw,5.25rem);
  color:var(--ink);
}
.panel--dark .ghost{ color:var(--dk-ink); }
.ghost em{ font-family:var(--serif); font-style:italic; font-weight:400; color:var(--gold-deep); }
.panel--dark .ghost em{ color:var(--gold-lift); }
.ghost-wrap{ position:relative; z-index:1; padding-block:clamp(2rem,5vw,3rem); }
@media (max-width:719.98px){ .ghost-wrap{ padding-block:clamp(1.25rem,5vw,3rem); } }
.ghost__char{ opacity:0; }
.ghost__caret{
  display:inline-block; width:.05em; margin-left:.03em;
  background:currentColor; opacity:0; vertical-align:-.08em; height:.78em;
}
.ghost__caret.is-blinking{ animation:ghostBlink .9s step-end infinite; }
@keyframes ghostBlink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .ghost__char{ opacity:1; } .ghost__caret{ display:none; } }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- CAPABILITY GRID (click-to-expand) ----------
   Five tiles in the normal page flow — no scroll-jacking. Click a tile and
   a shared detail panel opens beneath it with a short gold caret pointing
   back at whichever tile is open; the other tiles recede slightly so the
   open one and its detail read as one connected unit. */
.capgrid{ margin-top:clamp(2rem,4vw,3rem); }
.capgrid__tiles{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--rule-light); border:1px solid var(--rule-light); border-radius:18px;
  overflow:hidden;
}
@media (max-width:1040px){ .capgrid__tiles{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px){
  .capgrid__tiles{ grid-template-columns:repeat(2,1fr); }
  .capgrid__tile:last-child{ grid-column:1 / -1; }
}

.capgrid__tile{
  position:relative; text-align:left; cursor:pointer;
  background:var(--paper); border:0; font:inherit; color:inherit;
  padding:clamp(1.35rem,2.2vw,1.75rem) clamp(1.1rem,2vw,1.4rem);
  display:flex; flex-direction:column; gap:.75rem; min-height:220px;
  transition:background-color .4s var(--ease), opacity .4s var(--ease);
}
.capgrid__tile:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:-2px; z-index:1; }
.capgrid.has-open .capgrid__tile:not(.is-active){ opacity:.55; }
.capgrid.has-open .capgrid__tile:not(.is-active):hover{ opacity:1; }

/* hover: a full colour-inversion to bordeaux, not just a lighter neutral —
   reads as a deliberate, pronounced pop against the other tiles. */
.capgrid__tile:not(.is-active):hover{ background:var(--bordeaux); z-index:1; }
.capgrid__tile:not(.is-active):hover .capgrid__icon{ background:var(--bordeaux-deep); color:var(--gold-lift); }
.capgrid__tile:not(.is-active):hover .capgrid__n{ color:rgba(250,246,240,.2); }
.capgrid__tile:not(.is-active):hover h3{ color:var(--dk-ink); }
.capgrid__tile:not(.is-active):hover p{ color:var(--dk-ink-60); }
.capgrid__tile:not(.is-active):hover .capgrid__more{ color:var(--gold-lift); }

.capgrid__icon{
  position:relative;
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--sand); color:var(--gold-deep);
  display:flex; align-items:center; justify-content:center;
  transition:background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.capgrid__icon svg{ width:17px; height:17px; }
.capgrid__tile.is-active .capgrid__icon{ background:var(--gold); color:var(--ink); transform:scale(1.08); }

.capgrid__n{ position:absolute; top:1.2rem; right:1.3rem; font:800 1.6rem/1 var(--serif); color:var(--sand); transition:color .4s var(--ease); }
.capgrid__tile h3{ font:800 1rem/1.25 var(--sans); color:var(--ink); margin:0; letter-spacing:-.005em; transition:color .4s var(--ease); }
.capgrid__tile p{ font:400 .85rem/1.5 var(--serif); color:var(--ink-60); margin:0; flex:1; transition:color .4s var(--ease); }
.capgrid__more{
  display:inline-flex; align-items:center; gap:.4rem;
  font:700 .68rem var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--gold-deep);
  transition:color .4s var(--ease);
}
.capgrid__more svg{ width:8px; height:8px; transition:transform .35s var(--ease); }
.capgrid__tile.is-active .capgrid__more svg{ transform:rotate(180deg); }
.capgrid__tile.is-active{ background:var(--cream); box-shadow:inset 0 2px 0 var(--gold), inset 0 -2px 0 var(--gold); }

.capgrid__caret{
  width:18px; height:18px; background:var(--cream);
  border-left:1px solid var(--rule-light); border-top:1px solid var(--rule-light);
  transform:translateY(9px) rotate(45deg); opacity:0;
  transition:opacity .3s var(--ease);
}
.capgrid.has-open .capgrid__caret{ opacity:1; }

.capgrid__panel{ height:0; overflow:hidden; }
.capgrid__panel-inner{ background:var(--cream); border-radius:18px; padding:clamp(1.75rem,3vw,2.5rem); }
.capgrid__detail{ display:flex; gap:clamp(1.25rem,3vw,2rem); align-items:flex-start; }
.capgrid__detail[hidden]{ display:none; }
.capgrid__detail-icon{
  flex:none; width:52px; height:52px; border-radius:50%;
  background:var(--gold); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.capgrid__detail-icon svg{ width:24px; height:24px; }
.capgrid__detail-text{ min-width:0; }
.capgrid__detail-text h4{ font:800 1.3rem var(--sans); color:var(--ink); margin:0 0 .6rem; letter-spacing:-.01em; }
.capgrid__detail-text p{ font:400 1rem/1.6 var(--serif); color:var(--ink-60); margin:0 0 1.1rem; max-width:62ch; }
.capgrid__detail-text ul{ display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; margin:0 0 1.5rem; padding:0; list-style:none; }
.capgrid__detail-text li{
  position:relative; padding-left:1.1rem;
  font:600 .85rem var(--sans); color:var(--ink);
}
.capgrid__detail-text li::before{ content:"+"; position:absolute; left:0; color:var(--gold-deep); font-weight:700; }
@media (max-width:620px){ .capgrid__detail{ flex-direction:column; } }

/* ---------- CONNECTED PILLAR LINE ----------
   Four pieces joined by one line, not a labelled grid in a box — the wire
   draws itself in on scroll and each icon lights up in turn as it's
   reached, ending at a fifth, larger node — the falcon mark standing for
   Skaris itself, the "one operator" the four pieces converge into.
   A slow ambient pulse keeps travelling the wire afterwards (data still
   moving through a system that's already built), and a caption beneath
   the row narrates the handoff at each stage, using the same wipe
   transition as the hero's rolling word. */
.pillarframe{
  position:relative;
  border:1px solid var(--rule-dark); border-radius:22px;
  background:linear-gradient(180deg, rgba(250,246,240,.045), rgba(250,246,240,.015));
  padding:clamp(2rem,4vw,3rem) clamp(1.5rem,4vw,3rem) clamp(2.5rem,5vw,3.5rem);
}
.pillarline{
  position:relative;
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem .75rem;
  padding-top:clamp(1.5rem,3.5vw,2rem);
}
.pillarline__wire{
  position:absolute; left:calc(10% - .95rem); top:0;
  height:4px; width:calc(80% + 1.9rem); overflow:visible;
}
.pillarline__wire-track{ fill:none; stroke:var(--rule-dark); stroke-width:1.5; }
.pillarline__wire-draw{
  fill:none; stroke:var(--gold-lift); stroke-width:1.5;
  stroke-dasharray:1; stroke-dashoffset:1;
}
.pillarline__wire-flow{
  fill:none; stroke:var(--dk-ink); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:.05 1; stroke-dashoffset:0; opacity:.9;
  animation:wireFlow 3.4s linear infinite;
}
@keyframes wireFlow{ to{ stroke-dashoffset:-1.15; } }

.pillarline__item{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:.9rem; text-align:center;
  opacity:0; transform:translateY(14px) scale(.8);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.pillarline__item.is-shown{ opacity:1; transform:translateY(0) scale(1); }
.pillarline__icon{
  width:44px; height:44px; border-radius:50%;
  background:var(--bordeaux-deep); border:1px solid var(--rule-dark);
  display:flex; align-items:center; justify-content:center; flex:none;
  color:var(--gold-lift);
  transition:background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pillarline__icon svg{ width:19px; height:19px; }
.pillarline__item.is-lit .pillarline__icon{
  background:var(--gold); border-color:var(--gold); color:var(--ink); transform:scale(1.08);
  box-shadow:0 0 0 6px rgba(223,182,164,.16);
}
.pillarline__item b{
  font:700 .85rem/1.3 var(--sans); letter-spacing:-.005em; color:var(--dk-ink);
  max-width:14ch;
}

/* the terminal node: the payoff of the whole sequence, not just a fifth
   stop — visibly bigger, holds the brand mark, and pops with an elastic
   overshoot plus a pulsing halo once the wire reaches it. */
.pillarline__item--final{ gap:1.1rem; }
.pillarline__item--final .pillarline__icon{ width:72px; height:72px; border-width:2px; }
.pillarline__icon--final{ background:var(--bordeaux-deep); position:relative; }
.pillarline__item--final.is-lit .pillarline__icon{
  animation:finalPop .6s var(--ease) both;
  box-shadow:0 0 0 10px rgba(223,182,164,.22), 0 0 36px rgba(223,182,164,.4);
}
@keyframes finalPop{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.24); }
  72%{ transform:scale(.95); }
  100%{ transform:scale(1.08); }
}
.pillarline__icon--final::after{
  content:""; position:absolute; inset:-2px; border-radius:50%;
  border:1.5px solid var(--gold-lift); opacity:0; pointer-events:none;
}
.pillarline__item--final.is-lit .pillarline__icon--final::after{
  animation:finalRing 2.2s var(--ease) infinite;
}
@keyframes finalRing{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}
.pillarline__mark{
  width:32px; height:30px; background:currentColor;
  -webkit-mask:var(--falcon) center/contain no-repeat;
          mask:var(--falcon) center/contain no-repeat;
}
.pillarline__item--final b{ color:var(--gold-lift); font-size:1.05rem; font-weight:800; letter-spacing:-.01em; }
.pillarline__item--final.is-lit b{ color:var(--dk-ink); }

/* caption, wipe-revealed in sync with the lighting sequence */
.pillarline__caption{
  position:relative; height:1.6em; margin-top:clamp(2rem,4vw,2.75rem);
  text-align:center; overflow:visible;
}
.pillarline__caption-text{
  position:absolute; left:0; right:0; top:0;
  font:400 1.05rem/1.4 var(--serif); font-style:italic; color:var(--gold-lift);
  opacity:0; clip-path:inset(0 100% 0 0);
}
.pillarline__caption-text:first-child{ opacity:1; clip-path:inset(0 0 0 0); }

@media (max-width:900px){
  .pillarline{ grid-template-columns:repeat(3,1fr); row-gap:2.5rem; }
  .pillarline__wire{ display:none; }
}
@media (max-width:560px){
  /* below the grid breakpoint there's no room for a 5-wide row, and a
     stacked list reads flat — so it switches to the shape the content
     already implies: four pillars orbiting the one system they feed. */
  .pillarline{
    display:block; position:relative;
    /* 100%, not a vw figure — vw ignores the .wrap gutter and the
       .pillarframe padding this sits inside, which overflowed the frame
       (and clipped the longer BG labels off the edge of the screen).
       aspect-ratio, not a height percentage — the parent has no defined
       height for a percentage to resolve against. */
    width:min(100%,360px); aspect-ratio:1/1;
    margin:1.5rem auto 0; padding-top:0;
  }
  .pillarline::before{
    content:""; position:absolute; inset:34px; border-radius:50%;
    border:1px dashed var(--rule-dark); pointer-events:none;
  }
  .pillarline__item{ position:absolute; width:108px; gap:.6rem; }
  .pillarline__item b{ font-size:.78rem; max-width:12ch; }
  .pillarline__item:nth-child(2){ top:0; left:50%; margin-left:-54px; }                 /* N — Marketing & growth */
  .pillarline__item:nth-child(3){ top:50%; right:0; width:96px; margin-top:-45px; }     /* E — AI audit & integration */
  .pillarline__item:nth-child(4){ bottom:0; left:50%; margin-left:-54px; }              /* S — CRM & operations */
  .pillarline__item:nth-child(5){ top:50%; left:0; width:96px; margin-top:-45px; }      /* W — Reporting & revenue */
  .pillarline__item--final{
    top:50%; left:50%; width:124px; margin-left:-62px; margin-top:-57px;
  }
}
@media (prefers-reduced-motion: reduce){
  .pillarline__item{ opacity:1; transform:none; }
  .pillarline__icon{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
  .pillarline__wire-flow{ animation:none; opacity:0; }
  .pillarline__item--final.is-lit .pillarline__icon{ animation:none; }
  .pillarline__icon--final::after{ animation:none; opacity:0; }
}

/* ---------- PROOF BAND v2 ---------- */
.proofband{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,4vw,3rem);
}
@media (min-width:780px){ .proofband{ grid-template-columns:repeat(4,1fr); } }
.proofband__item{ border-top:1px solid var(--rule-dark); padding-top:1.1rem; }
.panel--light .proofband__item{ border-top-color:var(--rule-light); }
.proofband__n{ font:800 clamp(1.9rem,4vw,2.75rem)/1 var(--sans); letter-spacing:-.01em; }
.proofband__k{ font:600 .75rem var(--sans); letter-spacing:.03em; color:var(--ink-mute); margin-top:.4rem; }
.panel--dark .proofband__k{ color:var(--dk-ink-mute); }

/* ---------- SPOT FILM (embedded player, not a modal) ----------
   Shown directly in the page flow, large and framed, with a soft gold
   ground-glow bleeding past the frame's rounded corners — the glow sits
   on an outer wrapper since the frame itself clips the video. */
.spotplayer-wrap{ position:relative; max-width:1000px; margin-inline:auto; }
.spotplayer-wrap::before{
  content:""; position:absolute; inset:-6%; z-index:-1; border-radius:32px;
  background:radial-gradient(60% 60% at 50% 50%, rgba(223,182,164,.24), transparent 72%);
  filter:blur(44px); opacity:.7; pointer-events:none;
}
.spotplayer{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:20px; overflow:hidden;
  background:var(--bordeaux-deep);
  border:1px solid rgba(223,182,164,.25);
  box-shadow:0 2.5rem 4rem -1.75rem rgba(10,6,6,.65);
}
.spotplayer__video{ width:100%; height:100%; object-fit:cover; display:block; background:var(--bordeaux-deep); }

/* a designed cover, not the video's own (often blank) first frame — sits
   over the video until play starts, then fades with the play button. */
.spotplayer__cover{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(1.5rem,3.5vw,2.5rem);
  background:
    radial-gradient(120% 140% at 85% 110%, rgba(223,182,164,.22), transparent 60%),
    linear-gradient(165deg, var(--bordeaux) 0%, var(--bordeaux-deep) 100%);
  overflow:hidden;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.spotplayer__cover.is-hidden{ opacity:0; visibility:hidden; }
.spotplayer__cover-watermark{
  position:absolute; z-index:0; pointer-events:none;
  right:-10%; bottom:-18%; width:min(60vw,560px); aspect-ratio:623/597;
  background:var(--gold);
  -webkit-mask:var(--falcon) center/contain no-repeat;
          mask:var(--falcon) center/contain no-repeat;
  opacity:.08;
}
.spotplayer__cover-mark{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:.5rem; align-self:flex-start;
  font-family:var(--sans); font-weight:800; font-size:.95rem; letter-spacing:.03em;
  color:var(--dk-ink);
}
.spotplayer__cover-mark .mark{
  width:19px; height:18px; background:var(--gold-lift); flex:none;
  -webkit-mask:var(--falcon) center/contain no-repeat; mask:var(--falcon) center/contain no-repeat;
}
.spotplayer__cover-line{
  position:relative; z-index:1; align-self:flex-start;
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1rem,2.2vw,1.35rem); color:var(--gold-lift); max-width:22ch;
}
.spotplayer__play{
  position:absolute; inset:0; z-index:2; width:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(26,17,16,.08), rgba(26,17,16,.4));
  border:0; cursor:pointer; padding:0;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.spotplayer__play.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.spotplayer__ring{
  width:clamp(64px,8vw,96px); height:clamp(64px,8vw,96px); border-radius:50%;
  background:var(--gold); display:flex; align-items:center; justify-content:center;
  box-shadow:0 .6em 1.6em -.4em rgba(10,6,6,.6), 0 0 0 10px rgba(223,182,164,.16);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.spotplayer__play:hover .spotplayer__ring{
  transform:scale(1.08);
  box-shadow:0 .7em 1.9em -.4em rgba(10,6,6,.65), 0 0 0 14px rgba(223,182,164,.22);
}
.spotplayer__ring svg{ width:clamp(18px,2.2vw,26px); height:clamp(18px,2.2vw,26px); fill:var(--ink); margin-left:4px; }

/* Belt-and-braces: nothing on this exploration page should ever force
   horizontal scroll on the body, whatever the cause. */
html, body{ overflow-x:hidden; max-width:100%; }

/* ---------- MOCK LABEL ---------- */
.mock-tag{
  position:fixed; left:16px; bottom:16px; z-index:1000;
  font:600 11px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--cream);
  padding:9px 13px; border-radius:999px; opacity:.9;
}