/* ==========================================================================
   victory-case.css — the main Victory case: Strategy and Identity lenses
   --------------------------------------------------------------------------
   Sits on victory-environment.css (the High Sun / Night Road tokens, the bar,
   the transport) and project-victory.css (Source Serif 4, Public Sans).
   Every exhibit is native SVG/HTML on the environment tokens; paper artifacts
   keep --v-paper inside a themed surround.
   ========================================================================== */
.vic .vc{--vc-serif:'Source Serif 4',Georgia,serif;--vc-sans:'Public Sans',Arial,sans-serif;
  --vc-max:1480px;--vc-wide:1760px;--vc-gut:clamp(20px,4vw,64px);
  background:var(--v-ground);color:var(--v-ink);font-family:var(--vc-sans);}
.vc-wrap{max-width:var(--vc-max);margin:0 auto;padding:0 var(--vc-gut);box-sizing:border-box}
.vc-wide{max-width:var(--vc-wide);margin:0 auto;padding:0 var(--vc-gut);box-sizing:border-box}
.vc *,.vc *::before,.vc *::after{box-sizing:border-box}
*{box-sizing:border-box}
body{margin:0}
.vic[data-vic-env] .vc em{font-family:inherit;font-style:italic;font-weight:inherit;color:var(--v-accent)}

/* ---- A00 · the hero: the film, retained; the thesis over it ------------------ */
.vc-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:#0B1B24;color:#F4F8FA;overflow:hidden}
/* NO POSTER, DELIBERATELY.
   The hero used to carry poster="journey-hero-reforging-road.jpg" — the ridge
   still, with the retired Covenant Eyes lockup burned into it. A poster paints
   the moment the element lays out and is replaced the moment the first video
   frame decodes, so every cold load opened on a flash of the old mark before
   the film appeared. Removing the attribute is the whole fix; nothing needs to
   cover it up.

   The film layer carries the hero's own ground instead, so the opening is that
   colour until the first frame paints rather than a transparent gap or a black
   box. Dimensions never move: .vc-hero is min-height:100svh and the film is an
   absolutely positioned fill, so the box is the same size before and after the
   video is ready. */
.vc-hero__film{position:absolute;inset:0;background:#0B1B24}
.vc-hero__video{width:100%;height:100%;object-fit:cover;display:block;background:#0B1B24}
.vc-hero__film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,22,.06) 0%,rgba(6,16,22,.04) 34%,rgba(6,16,22,.58) 70%,rgba(6,16,22,.86) 100%),linear-gradient(90deg,rgba(6,16,22,.5) 0%,rgba(6,16,22,.18) 45%,rgba(6,16,22,0) 70%);pointer-events:none}
.vc-hero__filmctl{position:absolute;right:clamp(16px,3vw,40px);top:clamp(16px,3vh,32px);z-index:2;appearance:none;cursor:pointer;padding:8px 14px;border:1px solid rgba(255,255,255,.55);border-radius:2px;background:rgba(6,16,22,.35);color:#F4F8FA;font:600 12px/1 var(--vc-sans);letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(4px)}
.vc-hero__filmctl:hover,.vc-hero__filmctl:focus-visible{background:rgba(6,16,22,.6);outline:2px solid #7CD4FD;outline-offset:2px}
.vc-hero__copy{position:relative;z-index:1;width:100%;padding-top:clamp(120px,22vh,220px);padding-bottom:clamp(40px,7vh,84px)}
.vc-crumb{margin:0 0 clamp(18px,3vh,30px);font:500 12px/1.4 var(--vc-sans);letter-spacing:.1em;text-transform:uppercase;color:rgba(244,248,250,.72)}
.vc-crumb a{color:inherit;text-decoration:none}
.vc-crumb a:hover{color:#fff}
.vc-k{margin:0 0 clamp(12px,2vh,20px);font:500 12px/1.3 var(--vc-sans);letter-spacing:.22em;text-transform:uppercase;color:#FF9A6F}
.vic[data-vic-env] .vc .vc-h1{margin:0;font-family:var(--vc-serif);font-weight:400;font-size:clamp(44px,7.4vw,128px);line-height:.98;letter-spacing:-.024em;max-width:12ch;text-wrap:balance;color:#FFFDF8}
.vic[data-vic-env] .vc .vc-deck{margin:clamp(18px,3vh,30px) 0 0;max-width:38ch;font-family:var(--vc-serif);font-size:clamp(19px,1.9vw,28px);line-height:1.35;color:#F4F8FA}
.vic[data-vic-env] .vc .vc-role{margin:clamp(14px,2.2vh,22px) 0 0;font:500 12.5px/1.5 var(--vc-sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(244,248,250,.72)}
.vic[data-vic-env] .vc .vc-crumb,.vic[data-vic-env] .vc .vc-crumb a{color:rgba(244,248,250,.72)}
.vic[data-vic-env] .vc .vc-k{color:#FF9A6F}

/* ---- the bar: environment, lens, chapters ---------------------------------- */
.vc-lens{display:inline-flex;border:1px solid var(--v-edge);border-radius:2px;overflow:hidden;background:var(--v-paper);flex:none}
.vc-lens__b{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;font:500 13px/1 var(--vc-sans);letter-spacing:.02em;color:#141414;text-decoration:none;border-right:1px solid var(--v-edge)}
.vc-lens__b:last-child{border-right:0}
.vc-lens__b[aria-pressed="true"]{background:var(--v-ink);color:var(--v-canvas-1);font-weight:600}
.vc-lens__b:focus-visible{outline:2px solid var(--v-focus);outline-offset:-3px}
.vc-bar__nav[hidden]{display:none}

/* ---- exhibits: rhythm and type --------------------------------------------- */
.vc-lensbody[hidden]{display:none}
.vc-ex{padding:clamp(56px,10vh,140px) 0;position:relative}
.vc-ex + .vc-ex{border-top:1px solid var(--v-edge-soft)}
.vc-head{margin:0 0 clamp(24px,4vh,48px);max-width:76ch}
.vc-num{margin:0 0 clamp(12px,2vh,18px);font:600 11.5px/1.3 var(--vc-sans);letter-spacing:.2em;text-transform:uppercase;color:var(--v-ink-mute)}
.vc-num span{color:var(--v-accent);margin-right:10px}
.vc-num i{font-style:normal}
.vc-h2{margin:0;font-family:var(--vc-serif);font-weight:400;font-size:clamp(34px,5.2vw,88px);line-height:1.02;letter-spacing:-.02em;max-width:18ch;text-wrap:balance;color:var(--v-ink)}
.vc-cap{margin:clamp(16px,2.4vh,26px) 0 0;max-width:48ch;font-family:var(--vc-serif);font-size:clamp(17px,1.35vw,21px);line-height:1.45;color:var(--v-ink)}
.vc-note{margin:clamp(16px,2.4vh,28px) 0 0;max-width:72ch;font:400 14px/1.55 var(--vc-sans);color:var(--v-ink-mute)}
.vc-deep{color:var(--v-ink);text-decoration:underline;text-decoration-color:var(--v-accent);text-underline-offset:3px}
.vc-deep:hover{color:var(--v-accent)}
.vc-labels{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font:600 12px/1.4 var(--vc-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--v-ink-mute)}
.vc-next{margin:clamp(24px,4vh,40px) 0 0;display:flex;flex-wrap:wrap;gap:10px}
/* THE ACTION LABEL IS THE DARK INK, NOT WHITE. The approved library settles
   this: assets/victory/design-system/{day,night}/…/components/01-primary-action-button-*.svg
   all four label the orange button #20282D, in both environments. White on the
   --v-action gradient measures 2.58 / 2.87 / 3.75 across its three stops; the
   dark ink measures 5.80 / 5.21 / 3.99. The Colour stage's own demo card was
   already drawing it this way. */
.vc-nexta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 26px 12px 22px;border-radius:3px;text-decoration:none;font:600 14px/1.2 var(--vc-sans);background:var(--v-action);color:#20282D;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%)}
.vc-nexta--s{background:transparent;color:var(--v-ink);border:1px solid var(--v-ink);clip-path:none;padding:12px 22px}
.vc-nexta:focus-visible{outline:2px solid var(--v-focus);outline-offset:3px}

/* the figures: one motif language on the environment tokens */
.vc-fig{width:100%;height:auto;display:block;overflow:visible}
.vc-fig .vc-ground{stroke:var(--v-edge);stroke-width:2}
.vc-fig .vc-road{fill:none;stroke:var(--v-ink);stroke-width:5;stroke-linejoin:miter;stroke-linecap:butt}
.vc-fig .vc-road--behind{stroke:var(--v-edge);stroke-width:5}
.vc-fig .vc-walker{fill:var(--v-accent)}
.vc-fig .vc-walker--big{fill:var(--v-ink)}
.vc-fig .vc-companion{fill:none;stroke:var(--v-accent);stroke-width:4;stroke-linejoin:miter}
.vc-fig .vc-tools rect{fill:none;stroke:var(--v-ink-mute);stroke-width:3}
.vc-fig .vc-tools polygon{fill:var(--v-ink-mute)}
.vc-fig .vc-waymark line{stroke:var(--v-blue-2);stroke-width:4}
.vc-fig .vc-waymark polygon{fill:var(--v-blue-2)}
.vc-fig .vc-waymark circle{fill:var(--v-blue-2)}
.vic[data-vic-env="night"] .vc-fig .vc-waymark line,.vic[data-vic-env="night"] .vc-fig .vc-waymark circle{stroke:#7CD4FD;fill:#7CD4FD}
.vic[data-vic-env="night"] .vc-fig .vc-waymark polygon{fill:#7CD4FD}
.vc-fig .vc-torch{fill:none;opacity:0}
.vic[data-vic-env="night"] .vc-fig .vc-torch{fill:radial-gradient(#fff,transparent);fill:rgba(255,154,111,.14);opacity:1}
.vc-fig .vc-return{fill:none;stroke:var(--v-accent);stroke-width:3;stroke-dasharray:10 8}
.vc-fig .vc-return__head{fill:var(--v-accent)}
.vc-fig .vc-loop{fill:none;stroke:var(--v-ink-mute);stroke-width:3;stroke-dasharray:10 8}
.vc-fig .vc-loop__head{fill:var(--v-ink-mute)}
.vc-fig .vc-region{fill:var(--v-accent);fill-opacity:.12;stroke:none}
.vc-fig .vc-tie{stroke:var(--v-edge);stroke-width:2}
.vc-fig .vc-box rect{fill:var(--v-panel-1);stroke:var(--v-edge);stroke-width:1.5}
.vc-fig .vc-box--tool rect{stroke-dasharray:6 5}
.vc-fig .vc-bracket{fill:none;stroke:var(--v-edge);stroke-width:2}
.vc-fig .vc-lab{font-family:var(--vc-sans);font-size:24px;font-weight:500;fill:var(--v-ink)}
.vc-fig .vc-lab--s{font-size:24px;fill:var(--v-ink-mute)}
.vc-fig--turn .vc-lab--s{font-size:28px;font-weight:600;fill:var(--v-ink)}
.vc-fig .vc-lab--k{font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;fill:var(--v-ink-mute)}
.vc-fig .vc-lab--h{font-family:var(--vc-serif);font-size:32px;font-weight:400;fill:var(--v-ink)}
.vc-fig .vc-tok__tile{fill:var(--v-paper);stroke:var(--v-edge);stroke-width:2}
.vc-fig--portrait{display:none}

/* ---- A01 · the turn ---------------------------------------------------------- */
.vc-turn{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr);gap:clamp(24px,4vw,72px);align-items:center}
.vc-turn__fig{margin:0}
.vc-turn__state[hidden]{display:none}
.vc-turn__transport{margin-top:clamp(18px,3vh,30px)}
.vc-turn .vc-h2{font-size:clamp(34px,4.4vw,72px)}

/* ---- A02 · the road ---------------------------------------------------------- */
.vc-roadfig{margin:0;background:var(--v-panel-1);border:1px solid var(--v-edge);border-radius:4px;box-shadow:var(--v-lift-1);padding:clamp(14px,2vw,32px) clamp(14px,2vw,32px) clamp(6px,1vw,16px)}

/* ---- A03 · the architecture -------------------------------------------------- */
.vc-two{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,4vw,72px);align-items:start}
.vc-archfig{margin:0}

/* ---- A04 · the artifacts ------------------------------------------------------ */
.vc-art{display:grid;grid-template-columns:minmax(0,1fr) 220px;grid-template-areas:"tabs tabs" "stage side";gap:clamp(14px,2vw,28px) clamp(20px,3vw,44px);align-items:start}
.vc-art__tabs{grid-area:tabs;display:flex;gap:0 26px;border-bottom:1px solid var(--v-edge-soft);flex-wrap:wrap}
.vc-art__tab{appearance:none;cursor:pointer;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 0 14px;text-align:left;font:500 15px/1.2 var(--vc-sans);color:var(--v-ink-mute);display:flex;flex-direction:column;gap:3px}
.vc-art__tab .k{font:600 11.5px/1.2 var(--vc-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--v-accent)}
.vc-art__tab[aria-selected="true"]{color:var(--v-ink);border-bottom-color:var(--v-accent);font-weight:600}
.vc-art__tab:focus-visible{outline:2px solid var(--v-focus);outline-offset:3px}
.vc-art__stage{grid-area:stage;min-width:0}
.vc-art__p{margin:0}
.vc-art__p[hidden]{display:none}
.vc-art__page{border:1px solid var(--v-edge);border-radius:3px;box-shadow:var(--v-lift-1);overflow:hidden;padding:0}
.vc-art__page img{display:block;width:100%;height:auto}
.vc-art__cap{margin:14px 0 0;font:400 14px/1.55 var(--vc-sans);color:var(--v-ink-mute);max-width:72ch}
.vc-art__cap b{color:var(--v-ink);font-weight:600}
.vc-art__cap span{margin-left:8px}
.vc-art__cap em{display:block;margin-top:4px;font:400 16px/1.5 var(--vc-serif);font-style:italic;color:var(--v-ink)}
.vc-art__side{grid-area:side;display:grid;gap:14px;align-content:start}
.vc-art__cover{appearance:none;cursor:pointer;padding:0;border:1px solid var(--v-edge);border-radius:3px;background:var(--v-paper);box-shadow:var(--v-lift-1);overflow:hidden;opacity:.85}
.vc-art__cover:hover{opacity:1}
.vc-art__cover img{display:block;width:100%;height:auto}

/* ---- A09 · the product --------------------------------------------------------- */
.vc-prod{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.vc-prod__screen{display:flex;justify-content:center}
.vc-prod__phone{width:min(100%,400px);border-radius:28px;overflow:hidden;background:var(--v-panel-3);box-shadow:0 24px 60px -30px rgba(0,0,0,.6),0 0 0 1px var(--v-edge)}
.vc-prod__img{display:block;width:100%;height:auto}
.vc-prod__img[hidden]{display:none}
.vc-prod__side{display:grid;gap:clamp(16px,2.6vh,26px)}
.vc-prod__comp{padding:clamp(12px,1.6vw,22px);border:1px solid var(--v-edge);border-radius:4px;box-shadow:var(--v-lift-1)}
.vc-prod__comp img{display:block;width:100%;height:auto;max-width:480px}
.vc-prod__pick{display:flex;gap:0;border:1px solid var(--v-edge);border-radius:2px;overflow:hidden;width:max-content;max-width:100%}
.vc-prod__b{appearance:none;cursor:pointer;background:var(--v-paper);color:#141414;border:0;border-right:1px solid var(--v-edge);padding:10px 16px;font:500 13.5px/1 var(--vc-sans);display:inline-flex;gap:10px;align-items:center}
.vc-prod__b:last-child{border-right:0}
.vc-prod__b .k{font:600 11px/1 var(--vc-sans);letter-spacing:.12em;color:var(--v-accent)}
.vc-prod__b[aria-pressed="true"]{background:var(--v-ink);color:var(--v-canvas-1);font-weight:600}
.vc-prod__b[aria-pressed="true"] .k{color:var(--v-canvas-1)}
.vc-prod__b:focus-visible{outline:2px solid var(--v-focus);outline-offset:-3px}
.vc-prod__note{margin:0;max-width:40ch;font-family:var(--vc-serif);font-size:clamp(17px,1.3vw,20px);line-height:1.45;color:var(--v-ink)}
.vc-prod__note[hidden]{display:none}

/* ---- I1 · the symbol ------------------------------------------------------------ */
.vc-symx{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(24px,4vw,72px);align-items:center}
.vc-symx__fig{margin:0;border:1px solid var(--v-edge);border-radius:4px;box-shadow:var(--v-lift-1);padding:clamp(24px,5vw,90px)}
.vc-sym{width:100%;height:auto;display:block}
.vc-sym__c{fill:#fff;transition:fill .35s ease}
.vc-sym__g,.vc-sym__s{transition:opacity .35s ease}
.vc-symx.is-guide .vc-sym__s,.vc-symx.is-guide .vc-sym__c{opacity:.16}
.vc-symx.is-support .vc-sym__g,.vc-symx.is-support .vc-sym__c{opacity:.16}
.vc-symx.is-customer .vc-sym__g,.vc-symx.is-customer .vc-sym__s{opacity:.16}
.vc-symx.is-customer .vc-sym__c{fill:#FFE4D6}
.vc-symx__list{list-style:none;margin:clamp(18px,3vh,30px) 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--v-edge-soft)}
.vc-symx__list li{padding:12px 0;border-bottom:1px solid var(--v-edge-soft);font:400 15px/1.4 var(--vc-sans);color:var(--v-ink-mute);display:flex;gap:14px;align-items:baseline}
.vc-symx__list b{font-weight:600;color:var(--v-ink);min-width:9ch}
.vc-symx__list li.is-sel{color:var(--v-ink)}
.vc-symx__list li.is-sel b{color:var(--v-accent)}
.vc-symx__transport{margin-top:clamp(18px,3vh,30px)}

/* ---- I2 · the specimen ------------------------------------------------------------ */
.vc-spec{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:clamp(24px,4vw,64px);align-items:start}
.vc-spec__side{min-width:0}
.vc-spec__stage{position:relative;padding:clamp(28px,4vw,64px);border:1px solid var(--v-edge);border-radius:4px;box-shadow:var(--v-lift-1);min-height:clamp(320px,36vw,520px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--v-paper)}
.vc-spec__art{position:absolute;right:-6%;top:-10%;width:58%;opacity:.95;pointer-events:none}
.vc-spec__motif{width:100%;height:auto;fill:#065986}
.vc-spec__h{margin:0;font-family:var(--vc-serif);font-weight:400;font-size:clamp(36px,4.2vw,68px);line-height:1.02;letter-spacing:-.018em;color:#141414;position:relative}
.vc-spec__s{margin:14px 0 0;font:400 clamp(15px,1.15vw,18px)/1.5 var(--vc-sans);color:#141414;max-width:34ch;position:relative}
.vc-spec__cta{margin:18px 0 0;font:600 14px/1.2 var(--vc-sans);color:#E94F19;position:relative}
.vc-spec__band{position:absolute;left:0;bottom:0;height:8px;width:100%;background:linear-gradient(90deg,#065986 0 50%,#FF692E 50% 100%)}
.vc-spec__stage[data-vc-spec-view="type"] .vc-spec__art{opacity:.12}
.vc-spec__stage[data-vc-spec-view="type"] .vc-spec__band{opacity:.25}
.vc-spec__stage[data-vc-spec-view="type"] [data-vc-spec-part="serif"]{outline:1px dashed #065986;outline-offset:6px}
.vc-spec__stage[data-vc-spec-view="type"] [data-vc-spec-part="sans"]{outline:1px dashed #E94F19;outline-offset:4px}
.vc-spec__stage[data-vc-spec-view="color"] .vc-spec__art{opacity:.12}
.vc-spec__stage[data-vc-spec-view="color"] .vc-spec__band{height:26%}
.vc-spec__stage[data-vc-spec-view="motif"] .vc-spec__art{opacity:1;right:6%;top:6%;width:52%}
.vc-spec__stage[data-vc-spec-view="motif"] .vc-spec__h,.vc-spec__stage[data-vc-spec-view="motif"] .vc-spec__s,.vc-spec__stage[data-vc-spec-view="motif"] .vc-spec__cta{opacity:.3}
.vc-spec__tabs{display:flex;gap:0 22px;border-bottom:1px solid var(--v-edge-soft)}
.vc-spec__tab{appearance:none;cursor:pointer;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 0 12px;font:500 15px/1.2 var(--vc-sans);color:var(--v-ink-mute)}
.vc-spec__tab[aria-selected="true"]{color:var(--v-ink);border-bottom-color:var(--v-accent);font-weight:600}
.vc-spec__tab:focus-visible{outline:2px solid var(--v-focus);outline-offset:3px}
.vc-spec__d{margin:16px 0 0;font-family:var(--vc-serif);font-size:clamp(17px,1.3vw,20px);line-height:1.45;color:var(--v-ink);max-width:36ch}
.vc-spec__d[hidden]{display:none}

/* ---- I3 · the imagery ------------------------------------------------------------- */
.vc-imgs{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(16px,2.4vw,36px);align-items:end}
.vc-img{margin:0}
.vc-img img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:var(--v-lift-1)}
.vc-img figcaption{margin:12px 0 0;font:400 14px/1.5 var(--vc-sans);color:var(--v-ink-mute)}
.vc-img figcaption b{display:block;font:600 11.5px/1.3 var(--vc-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--v-accent);margin-bottom:4px}

/* ---- I4 · the voice ---------------------------------------------------------------- */
.vc-voice{padding:clamp(24px,3.4vw,52px);border:1px solid var(--v-edge);border-radius:4px;box-shadow:var(--v-lift-1)}
.vc-voice__k{margin:0 0 clamp(18px,2.6vh,28px);font:600 11.5px/1.3 var(--vc-sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(20,20,20,.58)}
.vc-voice__pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(20px,3vw,48px);align-items:start}
.vc-voice__l{margin:0 0 10px;font:600 11.5px/1.3 var(--vc-sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(20,20,20,.58)}
.vc-voice__t{margin:0;font-family:var(--vc-serif)}
.vc-voice__o .vc-voice__t{font-size:clamp(17px,1.35vw,21px);line-height:1.45;color:rgba(20,20,20,.62)}
.vc-voice__v .vc-voice__l{color:#B43B12}
.vc-voice__v .vc-voice__t{font-size:clamp(26px,2.6vw,42px);line-height:1.15;letter-spacing:-.012em;color:#141414}
.vc-voice__n{margin:clamp(18px,2.6vh,30px) 0 0;padding-top:14px;border-top:1px solid rgba(20,20,20,.12);font:500 14px/1.5 var(--vc-sans);color:#141414}

/* ---- the close ----------------------------------------------------------------------- */
.vc-close{padding:clamp(36px,6vh,72px) 0;border-top:1px solid var(--v-edge-soft)}
/* ONE SENTENCE, ONE BLOCK, THE FULL CONTENT RAIL.
   This was capped at 44ch, which broke a single sentence into two short lines
   in a narrow column and made a closing statement read as a fragment. The cap
   is gone: the block spans the same rail as everything else in this section,
   and the sentence wraps where the rail runs out rather than where a measure
   was imposed. Nothing forces it onto one physical line — on a phone it wraps
   naturally, at the same size. */
.vc-close__env{
  margin:0;font-family:var(--vc-serif);
  font-size:clamp(19px,1.9vw,29px);line-height:1.35;letter-spacing:-.01em;
  max-width:none;color:var(--v-ink);text-wrap:pretty;
}
.vc-close__env b{font-weight:600;color:var(--v-accent)}
/* the record line stays on the same rail, under the statement */
.vc-close__rec{margin:var(--vs-4,22px) 0 0;font:400 14px/1.55 var(--vc-sans);color:var(--v-ink-mute);max-width:72ch}
.vc-close__rec a{color:var(--v-ink);text-decoration:underline;text-decoration-color:var(--v-accent);text-underline-offset:3px}

/* ---- responsive ---------------------------------------------------------------------- */
/* the bar holds one row up to a laptop; from a tablet down the chapter list yields to the select,
   the lens control stays; on a phone the select yields too */
@media (max-width:1180px){
  .vic .vc-bar{flex-wrap:nowrap;align-items:center;gap:10px}
  .vic .vc-bar .vc-bar__nav{display:none}
  .vic .vc-bar .vic-bar__sel{display:block;order:1;flex:1 1 auto;min-width:0;height:36px;padding:0 8px;border:1px solid var(--v-edge);border-radius:2px;background:var(--v-panel-1);color:var(--v-ink);font:500 12.5px/1 var(--v-ui);letter-spacing:.02em}
  .vic .vc-bar .vic-bar__pause{order:2;flex:0 0 auto}
  .vic .vc-bar .vic-env{order:0;flex:0 0 auto}
  .vic .vc-bar .vc-lens{order:0}
}
@media (max-width:1100px){
  .vc-turn{grid-template-columns:minmax(0,1fr)}
  .vc-two{grid-template-columns:minmax(0,1fr)}
  .vc-symx{grid-template-columns:minmax(0,1fr)}
  .vc-spec{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .vc-art{grid-template-columns:minmax(0,1fr);grid-template-areas:"tabs" "stage" "side"}
  .vc-art__side{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vc-prod{grid-template-columns:minmax(0,1fr)}
  .vc-imgs{grid-template-columns:minmax(0,1fr)}
  .vc-voice__pair{grid-template-columns:minmax(0,1fr)}
  .vc-fig--road:not(.vc-fig--portrait),.vc-fig--turn:not(.vc-fig--portrait),.vc-fig--arch:not(.vc-fig--portrait){display:none}
  .vc-fig--portrait{display:block;max-width:520px;margin:0 auto}
  .vc-fig--portrait .vc-lab{font-size:30px}
  .vc-fig--portrait .vc-lab--s{font-size:30px}
  .vc-fig--portrait .vc-lab--k{font-size:22px}
  .vc-fig--portrait .vc-lab--h{font-size:40px}
}
@media (max-width:560px){
  .vic .vc-bar .vic-bar__sel{display:none}
  .vic .vc-bar .vic-bar__pause{width:36px;padding:0;font-size:0;position:relative;flex:none}
  .vc-bar .vic-bar__pause::before{content:"";position:absolute;left:12px;top:11px;width:4px;height:14px;background:currentColor;box-shadow:7px 0 0 currentColor}
  .vc-bar .vic-bar__pause[aria-pressed="true"]::before{width:0;height:0;background:none;box-shadow:none;left:13px;top:10px;border-left:12px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
  .vc-ex{padding:clamp(40px,7vh,56px) 0}
  .vc-hero__copy{padding-top:120px}
  .vc-h1{font-size:clamp(38px,11vw,48px)}
  .vc-h2{font-size:clamp(30px,8.6vw,38px)}
  .vc-turn .vc-h2{font-size:clamp(30px,8.6vw,38px)}
  .vc-fig .vc-lab{font-size:26px}
  .vc-fig .vc-lab--s{font-size:24px}
  .vc-lens__b{padding:0 9px;font-size:12px;min-height:34px}
  .vc-voice__v .vc-voice__t{font-size:clamp(22px,6.4vw,28px)}
  .vc-spec__h{font-size:clamp(30px,8.6vw,40px)}
  .vc-prod__phone{width:min(100%,340px)}
}
@media (prefers-reduced-motion:reduce){
  .vc-sym__c,.vc-sym__g,.vc-sym__s{transition:none}
}

@media (max-width:400px){
  .vic .vc-bar{gap:5px;padding:6px 6px}
  .vc-lens__b{padding:0 6px;font-size:11px;min-height:34px}
}

/* ==========================================================================
   The September 10 rebuild — VICTORY-01 to VICTORY-07
   --------------------------------------------------------------------------
   One section title, one tightly edited explanation, one commanding exhibit.
   The shared alignment tokens come from victory-align.css; the measured cap
   lines and baselines come from victory-align.js.
   ========================================================================== */

/* --- the shared section head --------------------------------------------- */
.vic .vc-head{margin:0 0 var(--vs-6)}
.vic .vc-head .vc-num{margin:0}
.vic .vc-head .vc-num span{color:var(--v-accent);font-weight:700;margin-right:.5em}
.vic .vc-head .vc-h2{
  font-family:var(--v-editorial);
  font-weight:400;
  font-size:clamp(38px,4.6vw,68px);
  line-height:1.08;
  letter-spacing:-.03em;
  margin:0;
  max-width:20ch;
  text-wrap:balance;
}
.vic .vc-head .vc-hdeck{margin:var(--vs-3) 0 0;max-width:56ch}
/* An SVG group carrying the hidden attribute must actually go: a stylesheet on
   this page sets display on generic groups, which outranks the UA rule. */
.vic svg [data-vt-state][hidden],
.vic svg g[hidden]{display:none}
.vic .vc-ex .vc-note{margin-top:var(--vs-5);max-width:84ch}
.vic .vc-ex .vc-note a{color:inherit;border-bottom:1px solid var(--v-accent);text-decoration:none}

/* One coordinated transition for every manual state change. */
.vic .is-out{opacity:0;transform:translateY(6px);transition:opacity .17s ease,transform .17s ease}
.vic [data-vt-k],.vic [data-vt-big],.vic [data-vt-body],.vic [data-vt-say],
.vic [data-vt-state],.vic [data-vrd-con],.vic [data-vph-title],.vic [data-vph-note],
.vic [data-vvo-line],.vic [data-vvo-why],.vic [data-vpr-cap],.vic [data-vpr-con],
.vic [data-vpr-screen],.vic [data-vpr-comp]{transition:opacity .19s ease,transform .19s ease}
@media (prefers-reduced-motion:reduce){
  .vic .is-out{opacity:1;transform:none;transition:none}
  .vic [data-vt-k],.vic [data-vt-big],.vic [data-vt-body],.vic [data-vt-say],
  .vic [data-vt-state],.vic [data-vrd-con],.vic [data-vph-title],.vic [data-vph-note],
  .vic [data-vvo-line],.vic [data-vvo-why],.vic [data-vpr-cap],.vic [data-vpr-con],
  .vic [data-vpr-screen],.vic [data-vpr-comp]{transition:none}
}

/* --- VICTORY-01 · the strategic turn ------------------------------------- */
.vic .vt__stage{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:var(--vs-7) var(--va-gutter);
  align-items:center;
  padding:clamp(28px,3.4vw,56px);
  border-radius:2px;
}
.vic .vt__copy{min-width:0}
.vic .vt__big{
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(30px,3.1vw,44px);line-height:1.1;letter-spacing:-.025em;
  margin:var(--vs-3) 0 var(--vs-4);color:var(--v-ink);
}
.vic .vt__body{max-width:38ch}
.vic .vt__rule{margin-top:var(--vs-6)}
.vic .vt__choice{margin:0}
.vic .vt__mid{
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(20px,1.7vw,26px);line-height:1.24;letter-spacing:-.015em;
  margin:var(--vs-3) 0 0;color:var(--v-ink);max-width:26ch;
}
.vic .vt__fig{position:relative;margin:0;min-width:0}
.vic .vt__svg{display:block;width:100%;height:auto}
.vic .vt__loop{fill:none;stroke:var(--v-blue-1);stroke-width:3;stroke-dasharray:11 12;stroke-linejoin:round}
.vic .vt__road{fill:none;stroke:var(--v-blue-1);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.vic .vt__flow polygon,.vic .vt__chev--solid{fill:var(--v-motif)}
.vic .vt__chev--open{fill:none;stroke:var(--v-blue-1);stroke-width:3.5;stroke-linejoin:round}
.vic .vt__markplate{fill:none}
.vic .vt__lab{font-family:var(--v-ui);font-size:19px;fill:var(--v-ink);letter-spacing:0}
.vic .vt__lab--k{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;fill:var(--v-ink-label)}
/* The mark sits over the drawing at a fixed place and size.  It is an image of
   the master: nothing here filters, clips, fades or recolours it. */
.vic .vt__mark{
  position:absolute;left:50%;top:59.4%;
  width:21.5%;height:auto;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.vic .vt__say{
  position:absolute;left:6%;top:2%;max-width:19ch;margin:0;
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(19px,1.62vw,25px);line-height:1.22;letter-spacing:-.015em;color:var(--v-ink);
}
.vic .vt__transport{margin-top:var(--va-artifact-transport)}
@media (max-width:899px){
  .vic .vt__stage{grid-template-columns:minmax(0,1fr);gap:var(--vs-5)}
  .vic .vt__say{position:static;max-width:none;margin-top:var(--vs-3)}
  .vic .vt__mark{top:57%}
}

/* --- VICTORY-02 · the Reforging Road ------------------------------------- */
.vic .vrd__cards{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--vs-4);
}
/* THE CARD IS THE CONTROL, so it is a button rather than a div with a click
   listener: reachable by keyboard, announced as pressed, and operable with
   Enter or Space without a line of script. The <li> is the grid cell; the
   button fills it. */
.vic .vrd__cell{margin:0;min-width:0;display:grid}
.vic .vrd__card{
  margin:0;padding:clamp(20px,2vw,32px);border-radius:2px;cursor:pointer;
  transition:box-shadow .24s ease,transform .24s ease;
  border:0;box-shadow:0 0 0 1px var(--v-edge-soft);
  font:inherit;color:inherit;text-align:start;
  display:grid;align-content:start;width:100%;
  -webkit-appearance:none;appearance:none;
}
.vic .vrd__card:hover{box-shadow:0 0 0 1px var(--v-edge),var(--v-lift-1)}
.vic .vrd__card:focus-visible{outline:2px solid var(--v-focus);outline-offset:3px}
.vic .vrd__card.is-on{box-shadow:0 0 0 2px var(--v-accent),var(--v-lift-2)}
.vic .vrd__n{margin:0}
.vic .vrd__art{margin:var(--vs-4) 0 var(--vs-5)}
.vic .vrd__art svg{display:block;width:100%;height:auto}
.vic .vrd__line{fill:none;stroke:var(--v-blue-1);stroke-width:4;stroke-linejoin:round;stroke-linecap:round}
.vic .vrd__branch{fill:none;stroke:var(--v-blue-1);stroke-width:4;stroke-linejoin:round;stroke-linecap:round;opacity:.55}
.vic .vrd__chev{fill:var(--v-motif)}
.vic .vrd__t{
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(23px,2vw,30px);line-height:1.14;letter-spacing:-.02em;
  margin:0 0 var(--vs-2);color:var(--v-ink);
}
.vic .vrd__d{margin:0}
/* the three motions: one advance, three steady steps, one branch rejoining */
.vic .vrd__card[data-vrd-card="0"].is-on .vrd__chev{animation:vr-advance 2.6s ease-in-out infinite}
.vic .vrd__card[data-vrd-card="1"].is-on .vrd__chev--s:nth-of-type(1){animation:vr-step 2.4s ease-in-out infinite}
.vic .vrd__card[data-vrd-card="1"].is-on .vrd__chev--s:nth-of-type(2){animation:vr-step 2.4s ease-in-out .28s infinite}
.vic .vrd__card[data-vrd-card="1"].is-on .vrd__chev--s:nth-of-type(3){animation:vr-step 2.4s ease-in-out .56s infinite}
.vic .vrd__card[data-vrd-card="2"].is-on .vrd__branch{stroke-dasharray:230;stroke-dashoffset:230;animation:vr-join 3.4s ease-in-out infinite;opacity:1}
@keyframes vr-advance{0%,100%{transform:translateX(0)}50%{transform:translateX(16px)}}
@keyframes vr-step{0%,100%{opacity:.42}50%{opacity:1}}
@keyframes vr-join{0%{stroke-dashoffset:230}55%,100%{stroke-dashoffset:0}}
/* Pause means pause. These three motions are CSS animations, so they do not
   read the transport's clock on their own; the track marks its root when it is
   not running and they stop there — for the card's own Pause, for the page-wide
   Pause all, and for scrolling the diagram off screen. */
.vic [data-vrd-root][data-vp-still] .vrd__card.is-on .vrd__chev,
.vic [data-vrd-root][data-vp-still] .vrd__card.is-on .vrd__chev--s,
.vic [data-vrd-root][data-vp-still] .vrd__card.is-on .vrd__branch{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .vic .vrd__card .vrd__chev,.vic .vrd__card .vrd__branch{animation:none !important;stroke-dashoffset:0 !important;opacity:1 !important}
}
.vic .vrd__read{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:var(--vs-4) var(--va-gutter);align-items:start;
  margin-top:var(--va-artifact-transport);
}
.vic .vrd__read > *{min-width:0}
/* Measured at 1024px: the transport's intrinsic width is 866px, so the auto
   column took the whole rail and the conclusion resolved to 0px wide with its
   text spilling past the viewport. Below the width where both fit, they
   stack. */
@media (max-width:1180px){
  .vic .vrd__read{grid-template-columns:minmax(0,1fr)}
}
.vic .vrd__con{margin:0;max-width:56ch;color:var(--v-ink)}
.vic .vrd__rule{margin-top:var(--vs-7)}
.vic .vrd__foot{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--va-gutter);align-items:start;
}
.vic .vrd__sum{
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(26px,2.6vw,38px);line-height:1.12;letter-spacing:-.025em;margin:0;color:var(--v-ink);
}
.vic .vrd__sub{margin:0;max-width:46ch}
@media (max-width:899px){
  .vic .vrd__cards{grid-template-columns:minmax(0,1fr)}
  .vic .vrd__read{grid-template-columns:minmax(0,1fr)}
  .vic .vrd__foot{grid-template-columns:minmax(0,1fr);gap:var(--vs-3)}
}

/* --- The Beatitudinal Journey -------------------------------------------- */
/* THE STRATEGIC LABEL. It names which battle this section is fighting, so it
   sits between the header and the argument rather than inside either. */
.vic .vc-battle{
  margin:var(--vs-6) 0 var(--vs-5);padding-block-start:var(--vs-3);
  border-block-start:2px solid var(--v-accent);
  display:inline-block;color:var(--v-accent);
}

/* THE EXPLANATION, GIVEN ROOM.
   Four paragraphs of argument sit above the journey artwork on a deliberate
   eight-of-twelve span, so the line length is a reading measure rather than
   the full 1320px rail, and the paragraphs are spaced far enough apart to be
   read as separate moves in the argument. The artwork keeps the full width
   below them; neither is squeezed to sit beside the other. */
.vic .vbe__why{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0 var(--case-gap);margin:0 0 var(--vs-7);
}
.vic .vbe__why > p{
  grid-column:1 / span 8;margin:0;max-width:var(--m-body);
  font-size:var(--t-body);line-height:var(--t-body-lh);color:var(--v-ink);
  text-wrap:pretty;
}
.vic .vbe__why > p + p{margin-block-start:var(--vs-4)}
@media (max-width:1100px){.vic .vbe__why > p{grid-column:1 / span 10}}
@media (max-width:860px){
  .vic .vbe__why{grid-template-columns:minmax(0,1fr)}
  .vic .vbe__why > p{grid-column:1 / -1}
}
.vic .vbe__climb{margin:0 0 var(--vs-6)}
.vic .vbe__climbsvg{display:block;width:100%;height:auto;overflow:visible}
.vic .vbe__path{fill:none;stroke:var(--v-blue-1);stroke-width:3}
.vic .vbe__node rect{fill:var(--v-motif);transition:transform .24s ease}
.vic .vbe__node text{font-family:var(--v-ui);font-size:19px;font-weight:600;letter-spacing:.09em;fill:var(--v-ink-mute)}
.vic .vbe__node.is-on rect{stroke:var(--v-ink);stroke-width:3;paint-order:stroke}
.vic .vbe__node.is-on text{fill:var(--v-ink)}
@media (prefers-reduced-motion:reduce){.vic .vbe__node rect{transition:none}}

.vic .vbe__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--vs-6) var(--vs-5);
}
.vic .vbe__cell{margin:0;min-width:0}
.vic .vbe__cell .va-rule{margin-bottom:0}
.vic .vbe__topic{margin:var(--vs-2) 0 0;color:var(--v-ink)}
.vic .vbe__stage{
  display:block;margin:var(--vs-4) 0 0;padding:0;border:0;background:none;text-align:left;cursor:pointer;
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(24px,1.95vw,30px);line-height:1.1;letter-spacing:-.02em;color:var(--v-ink);
}
.vic .vbe__stage:hover,.vic .vbe__stage:focus-visible{color:var(--v-accent)}
.vic .vbe__stage[aria-expanded="true"]{color:var(--v-accent);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.vic .vbe__act{margin:var(--vs-2) 0 0}
.vic .vbe__inspect{
  margin-top:var(--vs-6);padding:var(--vs-5);
  background:var(--v-panel-1);box-shadow:0 0 0 1px var(--v-edge-soft);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--vs-2) var(--va-gutter);align-items:start;
}
.vic .vbe__inspecthead{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;gap:var(--vs-4)}
.vic .vbe__inspecthead p{margin:0}
.vic .vbe__close{
  border:0;background:none;cursor:pointer;padding:0;
  font:600 var(--va-label-size)/1.4 var(--v-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--v-ink-mute);
  display:inline-flex;gap:.5em;align-items:center;
}
.vic .vbe__close:hover{color:var(--v-accent)}
.vic .vbe__i-stage{
  grid-column:1 / -1;margin:var(--vs-3) 0 var(--vs-2);
  font-family:var(--v-editorial);font-weight:400;font-size:clamp(24px,2vw,32px);line-height:1.1;
  letter-spacing:-.02em;color:var(--v-ink);
}
.vic .vbe__i-exp,.vic .vbe__i-con{margin:0;max-width:50ch}
.vic .vbe__i-con{color:var(--v-ink)}
.vic .vbe__close-line{
  margin:var(--vs-7) 0 0;
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(26px,2.8vw,42px);line-height:1.12;letter-spacing:-.025em;color:var(--v-ink);
}
@media (max-width:1023px){
  .vic .vbe__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .vic .vbe__grid{grid-template-columns:minmax(0,1fr);gap:var(--vs-5)}
  .vic .vbe__climb{display:none}
  .vic .vbe__inspect{grid-template-columns:minmax(0,1fr)}
}

/* --- VICTORY-03 · the symbol --------------------------------------------- */
.vic .vsym{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:var(--va-gutter);align-items:start;
}
.vic .vsym__stage{
  position:relative;margin:0;border-radius:2px;
  display:grid;place-items:center;
  /* generous, equal clear space on every side of the mark */
  padding:clamp(48px,7vw,104px);
  min-height:clamp(320px,34vw,520px);
}
.vic .vsym__mark{
  display:block;width:min(58%,300px);height:auto;position:relative;z-index:2;
}
/* Emphasis is a ring drawn OUTSIDE the mark's own box. It never overlaps the
   silhouette, never clips it and never changes its colour. */
.vic .vsym__ring{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(74%,392px);aspect-ratio:472.8 / 572.9;
  border:2px solid var(--v-accent);
  opacity:0;transition:opacity .3s ease,clip-path .3s ease;
  pointer-events:none;z-index:1;
}
.vic .vsym__ring--guide{clip-path:inset(0 0 62% 0)}
.vic .vsym__ring--customer{clip-path:inset(30% 0 40% 0)}
.vic .vsym__ring--support{clip-path:inset(44% 0 0 0)}
.vic [data-vsym-at="guide"] .vsym__ring--guide,
.vic [data-vsym-at="customer"] .vsym__ring--customer,
.vic [data-vsym-at="support"] .vsym__ring--support{opacity:1}
@media (prefers-reduced-motion:reduce){.vic .vsym__ring{transition:none}}
.vic .vsym__list{list-style:none;margin:0;padding:0}
.vic .vsym__item{margin:0 0 var(--vs-5);cursor:pointer}
.vic .vsym__item .va-rule{margin-bottom:0;border-top-color:var(--v-edge-soft);transition:border-top-color .24s ease}
.vic .vsym__item.is-on .va-rule{border-top-color:var(--v-accent);border-top-width:2px}
.vic .vsym__t{
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(26px,2.2vw,34px);line-height:1.1;letter-spacing:-.02em;
  margin:var(--vs-3) 0 0;color:var(--v-ink);
}
.vic .vsym__item.is-on .vsym__t{color:var(--v-accent)}
.vic .vsym__transport{margin-top:var(--va-artifact-transport)}
@media (max-width:899px){
  .vic .vsym{grid-template-columns:minmax(0,1fr);gap:var(--vs-5)}
  .vic .vsym__mark{width:min(64%,260px)}
}

/* --- VICTORY-04 · one coordinated specimen -------------------------------- */
.vic .vsp{
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:var(--va-gutter);align-items:start;
}
.vic .vsp__stage{
  position:relative;margin:0;border-radius:2px;overflow:hidden;
  padding:clamp(28px,3.4vw,56px);
  min-height:clamp(360px,32vw,470px);
  display:flex;flex-direction:column;
}
.vic .vsp__k{margin:0}
.vic .vsp__big{
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(34px,3.5vw,56px);line-height:1.08;letter-spacing:-.03em;
  margin:auto 0 0;max-width:13ch;color:var(--v-ink);
  transition:color .3s ease;
}
.vic .vsp__sub{margin:var(--vs-5) 0 0;max-width:42ch;font:400 var(--va-support-size)/1.5 var(--v-ui);color:var(--v-ink-mute);transition:color .3s ease}
.vic .vsp__cta{margin:var(--vs-4) 0 0}
.vic .vsp__ctat{
  display:inline-block;padding:12px 46px 12px 20px;
  background:var(--v-action);color:#20282D;
  font:600 15px/1.2 var(--v-ui);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);
  transition:filter .3s ease;
}
.vic .vsp__motif{
  position:absolute;right:-4%;top:26%;width:38%;max-width:300px;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.vic .vsp__motif svg{display:block;width:100%;height:auto;overflow:visible}
.vic .vsp__chev--solid{fill:var(--v-motif)}
.vic .vsp__chev--open{fill:none;stroke:var(--v-blue-1);stroke-width:5}
/* Emphasis quiets the other decisions; it never removes them, and the
   composition stays finished in every state. */
.vic [data-vsp-emph="type"] .vsp__motif{opacity:.34}
.vic [data-vsp-emph="type"] .vsp__big{color:var(--v-ink)}
.vic [data-vsp-emph="color"] .vsp__ctat{filter:saturate(1.18)}
.vic [data-vsp-emph="color"] .vsp__big{color:var(--v-ink-mute)}
.vic [data-vsp-emph="motif"] .vsp__motif{opacity:1;transform:translateX(-3%)}
.vic [data-vsp-emph="motif"] .vsp__big{color:var(--v-ink-mute)}
@media (prefers-reduced-motion:reduce){
  .vic .vsp__big,.vic .vsp__sub,.vic .vsp__ctat,.vic .vsp__motif{transition:none}
}
.vic .vsp__tabs{display:flex;gap:var(--vs-2);margin:0 0 var(--vs-5)}
.vic .vsp__tab{
  border:0;background:none;cursor:pointer;padding:8px 14px;
  font:600 13px/1.2 var(--v-ui);letter-spacing:.04em;color:var(--v-ink-mute);
  box-shadow:inset 0 0 0 1px var(--v-edge-soft);
}
.vic .vsp__tab[aria-selected="true"]{color:var(--v-ink);box-shadow:inset 0 0 0 2px var(--v-accent)}
.vic .vsp__groups{list-style:none;margin:0;padding:0}
.vic .vsp__group{margin:0 0 var(--vs-5);opacity:.5;transition:opacity .3s ease}
.vic .vsp__group.is-on{opacity:1}
.vic .vsp__group .va-rule{margin-bottom:0}
.vic .vsp__gt{
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(22px,1.85vw,28px);line-height:1.12;letter-spacing:-.02em;
  margin:var(--vs-3) 0 var(--vs-2);color:var(--v-ink);
}
.vic .vsp__gd{margin:0}
@media (max-width:899px){
  .vic .vsp{grid-template-columns:minmax(0,1fr)}
  .vic .vsp__motif{position:static;width:52%;margin:var(--vs-5) 0 0;opacity:1 !important;transform:none !important}
  .vic .vsp__big{margin-top:var(--vs-5)}
}

/* --- the road slideshows -------------------------------------------------
   One stable landscape stage at the photographs' own ratio, so nothing is
   cropped and nothing moves between slides.  The photograph's colour is the
   same file in both environments; only the ground, the type and the controls
   around it follow High Sun or Night Road.                                */
.vic .vsl__frame{margin:0}
.vic .vsl__slides{
  position:relative;width:100%;aspect-ratio:1672 / 941;
  background:var(--v-panel-2);overflow:hidden;
}
.vic .vsl__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  opacity:0;transition:opacity .85s ease;
}
.vic .vsl__img.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.vic .vsl__img{transition:none}}
/* The caption keeps one alignment for every slide: the label and the title
   share a baseline row and the note sits on the title's own left edge. */
.vic .vsl__cap{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  column-gap:var(--va-gutter);row-gap:var(--vs-2);
  align-items:baseline;
  margin-top:var(--va-rule-copy);
}
.vic .vsl__cap .va-label{grid-column:1;grid-row:1;margin:0}
.vic .vsl__t{
  grid-column:2;grid-row:1;margin:0;
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(24px,2.1vw,32px);line-height:1.12;letter-spacing:-.02em;color:var(--v-ink);
}
.vic .vsl__d{grid-column:2;grid-row:2;margin:0;max-width:56ch}
.vic .vsl__transport{margin-top:var(--va-artifact-transport)}
/* the shorter selection beside the Road reads as support, not as the exhibit */
.vic .vsl--tight{margin-top:var(--vs-7)}
.vic .vsl--tight .vsl__t{font-size:clamp(20px,1.7vw,26px)}
@media (max-width:899px){
  /* the landscape composition is preserved on a phone; the layout around it
     recomposes instead */
  .vic .vsl__cap{grid-template-columns:minmax(0,1fr);row-gap:var(--vs-1)}
  .vic .vsl__cap .va-label,.vic .vsl__t,.vic .vsl__d{grid-column:1;grid-row:auto}
}

/* --- VICTORY-06 · the voice ---------------------------------------------- */
.vic .vvo{padding:clamp(24px,3vw,48px);border-radius:2px}
.vic .vvo__top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--vs-4);flex-wrap:wrap}
.vic .vvo__top p{margin:0}
.vic .vvo__ver{display:flex;gap:var(--vs-1)}
.vic .vvo__ver button{
  border:0;background:none;cursor:pointer;padding:7px 14px;
  font:600 13px/1.2 var(--v-ui);color:var(--v-ink-mute);
  box-shadow:inset 0 0 0 1px var(--v-edge-soft);
}
.vic .vvo__ver button[aria-pressed="true"]{color:var(--v-ink);box-shadow:inset 0 0 0 2px var(--v-accent)}
.vic .vvo__line{
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(26px,3vw,46px);line-height:1.14;letter-spacing:-.028em;
  margin:var(--vs-5) 0 0;color:var(--v-ink);max-width:24ch;
}
.vic .vvo__line[data-at="revised"]{color:var(--v-ink)}
.vic .vvo__why{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--vs-4) var(--va-gutter);
  margin-top:var(--vs-6);
}
.vic .vvo__why p{margin:0}
.vic .vvo__why p + p{margin-top:var(--vs-2)}
.vic .vvo__act{margin-top:var(--vs-5)}
.vic .vc-cta{
  display:inline-flex;align-items:baseline;gap:.6em;
  border:0;cursor:pointer;padding:14px 24px;
  background:var(--v-action);color:#20282D;
  font:600 15px/1.2 var(--v-ui);
}
.vic .vc-cta:focus-visible{outline:2px solid var(--v-focus);outline-offset:3px}
.vic .vvo__act .vc-note{margin-top:var(--vs-3)}
@media (max-width:599px){
  .vic .vvo__why{grid-template-columns:minmax(0,1fr)}
}

/* --- the Brand Voice modal ------------------------------------------------ */
.vcmodal-lock,.vcmodal-lock body{overflow:hidden}
.vcmodal-lock body{position:fixed;width:100%}
.vic .vcmodal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:clamp(8px,2vw,28px)}
.vic .vcmodal[hidden]{display:none}
.vic .vcmodal__scrim{position:absolute;inset:0;background:var(--v-scrim)}
.vic .vcmodal__dialog{
  position:relative;width:min(1180px,100%);height:min(92vh,100%);
  display:flex;flex-direction:column;background:var(--v-panel-1);
  box-shadow:var(--v-lift-3);border-radius:2px;overflow:hidden;
}
.vic .vcmodal__bar{
  display:flex;align-items:center;gap:var(--vs-4);
  padding:var(--vs-3) var(--vs-4);border-bottom:1px solid var(--v-edge-soft);flex:0 0 auto;
}
.vic .vcmodal__title{margin:0;flex:1 1 auto;min-width:0}
.vic .vcmodal__out{
  font:600 13px/1.2 var(--v-ui);color:var(--v-ink);text-decoration:none;
  border-bottom:1px solid var(--v-accent);white-space:nowrap;
}
.vic .vcmodal__close{
  border:0;background:none;cursor:pointer;padding:8px 12px;
  font:600 13px/1.2 var(--v-ui);color:var(--v-ink);
  box-shadow:inset 0 0 0 1px var(--v-edge);display:inline-flex;gap:.5em;align-items:center;
}
.vic .vcmodal__close:hover{color:var(--v-accent)}
.vic .vcmodal__body{position:relative;flex:1 1 auto;min-height:0;background:var(--v-canvas-2)}
.vic .vcmodal__frame{display:block;width:100%;height:100%;border:0}
.vic .vcmodal__load,.vic .vcmodal__fail{
  position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-50%);
  text-align:center;margin:0;padding:0 var(--vs-4);
  font:400 16px/1.5 var(--v-ui);color:var(--v-ink-mute);
}
.vic .vcmodal__fail a{color:var(--v-ink);border-bottom:1px solid var(--v-accent);text-decoration:none}
@media (max-width:599px){
  .vic .vcmodal__bar{flex-wrap:wrap;gap:var(--vs-2)}
  .vic .vcmodal__out{order:3;flex:1 0 100%}
}

/* --- VICTORY-07 · both environments --------------------------------------- */
.vic .vpr__pick{display:flex;gap:var(--vs-2);margin:0 0 var(--vs-6);flex-wrap:wrap}
.vic .vpr__b{
  border:0;background:none;cursor:pointer;padding:11px 18px;
  font:600 14px/1.2 var(--v-ui);color:var(--v-ink-mute);
  box-shadow:inset 0 0 0 1px var(--v-edge-soft);
  display:inline-flex;align-items:baseline;gap:.7em;
}
.vic .vpr__b .k{font-size:11px;letter-spacing:.09em;color:var(--v-ink-label)}
.vic .vpr__b[aria-pressed="true"]{color:var(--v-ink);box-shadow:inset 0 0 0 2px var(--v-accent)}
.vic .vpr__cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--va-gutter);
  /* the two columns share one row track per band, so the headings, the phone
     tops, the phone bottoms, the components and the captions all line up */
  grid-template-rows:auto auto auto auto;
}
.vic .vpr__col{display:grid;grid-template-rows:subgrid;grid-row:1 / span 4;gap:var(--vs-4);min-width:0}
@supports not (grid-template-rows:subgrid){
  .vic .vpr__col{display:flex;flex-direction:column;gap:var(--vs-4)}
  .vic .vpr__screen{flex:1 1 auto;display:flex;align-items:flex-start}
}
.vic .vpr__env{margin:0}
.vic .vpr__screen{display:grid;place-items:start center}
.vic .vpr__screen img{display:block;width:100%;max-width:330px;height:auto}
.vic .vpr__comp{display:grid;place-items:center}
.vic .vpr__comp img{display:block;width:100%;max-width:400px;height:auto}
.vic .vpr__cap{margin:0}
.vic .vpr__col--day{--vpr-ground:var(--v-panel-1)}
.vic .vpr__col--night{--vpr-ground:#0A202B}
.vic .vpr__screen,.vic .vpr__comp{background:var(--vpr-ground);padding:var(--vs-4);border-radius:2px}
/* The environment labels sit on the PAGE ground, not on their specimen
   plate, so they take the page's own label ink. #7CD4FD is the Night Road
   label colour and measured 1.33:1 against the High Sun canvas — the cue
   belongs to the plate below it, which already carries it. */
.vic .vpr__col--night .vpr__env{color:var(--v-ink-label)}
.vic .vpr__rule{margin-top:var(--vs-7)}
.vic .vpr__foot{margin:0}
.vic .vpr__con{
  font-family:var(--v-editorial);font-weight:400;
  font-size:clamp(22px,2.2vw,32px);line-height:1.14;letter-spacing:-.02em;margin:0;color:var(--v-ink);max-width:42ch;
}
@media (max-width:899px){
  .vic .vpr__cols{grid-template-columns:minmax(0,1fr);gap:var(--vs-6);grid-template-rows:none}
  .vic .vpr__col{grid-row:auto;display:flex;flex-direction:column}
  .vic .vpr__screen img{max-width:280px}
}