/* =====================================================================
   K-Well homepage styles: formerly scroll-reveal.css + home-anim.css
   (merged September 2026 to save a render-blocking request)
   ===================================================================== */

/* =================================================================
   Homepage scroll-reveal animations.

   JS-gated (the marker class .kw-rev-armed is added by scroll-reveal.js
   ONLY after it's confirmed the IntersectionObserver is hooked up).
   If JS fails, no class is added, base CSS leaves content visible.
   ================================================================= */

/* ── Section headlines: fade + rise ────────────────────────────── */
/* Plain opacity+translate reveal (same primitive as the Team heading
   "Hands you can trust."). The earlier clip-path wipe rendered late /
   janky on fast scroll-in; this lands in lock-step with the eyebrow
   and card stagger around it. */
.kw-rev-armed.kw-rev-h {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 520ms cubic-bezier(.2,.7,.18,1),
    transform 520ms cubic-bezier(.2,.7,.18,1);
  will-change: opacity, transform;
}
.kw-rev-armed.kw-rev-h.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* "considered." / "questions" / "trust" italic-serif words inside a revealed
   headline get a blue underline drawing after the wipe lands. */
.kw-rev-armed.kw-rev-h .italic-serif,
.kw-rev-armed.kw-rev-h .accent,
.kw-rev-armed.kw-rev-h .em,
.kw-rev-armed.kw-rev-h .accent-light {
  position: relative;
  display: inline-block;
}
.kw-rev-armed.kw-rev-h .italic-serif::after,
.kw-rev-armed.kw-rev-h .accent::after,
.kw-rev-armed.kw-rev-h .em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.04em;
  bottom: -0.04em;
  height: 0.04em;
  background: currentColor;
  border-radius: 999px;
  opacity: .8;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 600ms cubic-bezier(.2,.7,.18,1) 420ms;
}
.kw-rev-armed.kw-rev-h.is-in .italic-serif::after,
.kw-rev-armed.kw-rev-h.is-in .accent::after,
.kw-rev-armed.kw-rev-h.is-in .em::after {
  transform: scaleX(1);
}

/* ── Eyebrows: dash draws across, then text fades in ───────────── */
.kw-rev-armed.kw-rev-eye {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(.2,.7,.18,1) 80ms;
}
.kw-rev-armed.kw-rev-eye.is-in {
  opacity: 1;
}
.kw-rev-armed.kw-rev-eye::before {
  width: 0 !important;
  transition: width 700ms cubic-bezier(.6,.2,.2,1) 220ms;
}
.kw-rev-armed.kw-rev-eye.is-in::before {
  width: 28px !important;
}

/* ── Lead paragraphs / supporting copy: rise + fade ───────────── */
.kw-rev-armed.kw-rev-lead {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 800ms cubic-bezier(.2,.7,.18,1) 240ms,
    transform 800ms cubic-bezier(.2,.7,.18,1) 240ms;
}
.kw-rev-armed.kw-rev-lead.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Cards / list items: gentle stagger via per-item delay ─────── */
.kw-rev-armed.kw-rev-stagger {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms cubic-bezier(.2,.7,.18,1),
    transform 700ms cubic-bezier(.2,.7,.18,1);
  transition-delay: calc(var(--kw-rev-i, 0) * 90ms);
}
.kw-rev-armed.kw-rev-stagger.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Director's note: word-by-word "into focus" reveal ───────────────
   Each word rises and sharpens from a soft blur in a slow, breath-like
   cadence — a contemplative "clarity emerging" feel for the quote. */
.kw-rev-armed.kw-rev-quote .kw-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  filter: blur(6px);
  transition:
    opacity 620ms cubic-bezier(.2,.7,.18,1),
    transform 620ms cubic-bezier(.2,.7,.18,1),
    filter 620ms ease;
  transition-delay: calc(var(--w, 0) * 42ms);
  will-change: opacity, transform, filter;
}
.kw-rev-armed.kw-rev-quote.is-in .kw-word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* the emphasized phrase draws a soft underline once its words land */
.kw-rev-armed.kw-rev-quote em { position: relative; }
.kw-rev-armed.kw-rev-quote em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.08em;
  height: 2px;
  background: rgba(214, 225, 238, 0.5);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 800ms cubic-bezier(.6,.2,.2,1);
  transition-delay: 1000ms;
}
.kw-rev-armed.kw-rev-quote.is-in em::after { transform: scaleX(1); }

/* Reduced-motion: a gentle opacity cross-fade — NO movement, NO clip wipe.
   Apple's reduce-motion guidance explicitly permits replacing large motion
   with a simple cross-fade, so users who enabled the setting (e.g. on
   A18 iPhones/Macs) still get a soft fade-in rather than nothing.

   We force `transform: none` and `clip-path: none` so ONLY opacity animates,
   and we never set `width` on these layout containers — a blanket width
   would collapse the .way grid rows / headlines to a sliver (the 28px
   belongs solely to the eyebrow dash pseudo-element, handled below). */
@media (prefers-reduced-motion: reduce) {
  .kw-rev-armed.kw-rev-h,
  .kw-rev-armed.kw-rev-eye,
  .kw-rev-armed.kw-rev-lead,
  .kw-rev-armed.kw-rev-stagger {
    opacity: 0;
    transform: none !important;
    clip-path: none !important;
    transition: opacity 600ms cubic-bezier(.2,.7,.18,1);
  }
  .kw-rev-armed.kw-rev-stagger {
    transition-delay: calc(var(--kw-rev-i, 0) * 70ms);
  }
  .kw-rev-armed.kw-rev-h.is-in,
  .kw-rev-armed.kw-rev-eye.is-in,
  .kw-rev-armed.kw-rev-lead.is-in,
  .kw-rev-armed.kw-rev-stagger.is-in {
    opacity: 1;
  }
  /* Director's note: keep the word-by-word cadence but cross-fade only
     — no blur, no movement. */
  .kw-rev-armed.kw-rev-quote .kw-word {
    transform: none !important;
    filter: none !important;
    transition: opacity 520ms ease;
    transition-delay: calc(var(--w, 0) * 28ms);
  }
  .kw-rev-armed.kw-rev-quote em::after { transition: none; }
  /* Decorative headline underlines: just keep them visible, no motion. */
  .kw-rev-armed.kw-rev-h .italic-serif::after,
  .kw-rev-armed.kw-rev-h .accent::after,
  .kw-rev-armed.kw-rev-h .em::after {
    transition: none;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  /* Eyebrow dash: show at full width, no draw-in. */
  .kw-rev-armed.kw-rev-eye::before {
    transition: none;
    width: 28px !important;
  }
}

/* ====================================================================
   K-Well — homepage animation layer (home-anim)
   Loaded by index.html + ko/index.html only.
   Same safety model as sp-anim: every hidden pre-state is gated on
   `html.kw-anim` (set by an inline <head> script); no JS → fully
   visible. Reduced motion → opacity-only fades, loops off.
   Deliberately CALMER than the service pages — this is the front door.
   ==================================================================== */

/* ------------------------- hero entrance ------------------------- */

/* S70v2 (EJ): the video element is deliberately UNANIMATED — no zoom, no opacity fade —
   it simply plays. Only the scrim overlay fades in (and the text, below). */
html.kw-anim .hero__bg::after { animation: kwaScrimIn 2.4s ease-out .35s both; }
@keyframes kwaScrimIn { from { opacity: 0; } }

/* title lines (wrapped in .kwa-line by home-anim.js) */
html.kw-anim .hero__title .kwa-line {
  display: inline-block;
  animation: kwaLine 1.9s cubic-bezier(.16,.84,.26,1) both;   /* S70: slower title (was 1s) */
  animation-delay: calc(1.05s + var(--kwa-i, 0) * 280ms);      /* S70: later + wider stagger (was .25s/160ms) */
}
@keyframes kwaLine {
  from { opacity: 0; transform: translateY(.45em); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

html.kw-anim .hero__hangul { animation: kwaFadeUp .9s var(--kw-ease) 2.3s both; }  /* S70: shifted after slower title */
html.kw-anim .hero__sub    { animation: kwaFadeUp 1s var(--kw-ease) 2.55s both; }
html.kw-anim .hero__cta > :nth-child(1) { animation: kwaFadeUp .8s var(--kw-ease) 2.8s both; }
html.kw-anim .hero__cta > :nth-child(2) { animation: kwaFadeUp .8s var(--kw-ease) 2.95s both; }
html.kw-anim .hero__meta   { animation: kwaFade 1.2s ease 3.3s both; }

/* vertical rail: lines grow, text fades in */
html.kw-anim .hero__rail-line {
  transform-origin: top center;
  animation: kwaRailLine 1.1s var(--kw-ease) 2.9s both;  /* S70 */
}
html.kw-anim .hero__rail-text,
html.kw-anim .hero__rail > div:last-child {
  animation: kwaFade 1s ease 3.3s both;  /* S70 */
}
@keyframes kwaRailLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* scroll cue arrow — gentle endless bob */
html.kw-anim .hero__meta-scroll svg { animation: kwaBob 2.4s ease-in-out 3.8s infinite; }
@keyframes kwaBob {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(5px); opacity: .55; }
}

@keyframes kwaFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kwaFade   { from { opacity: 0; } to { opacity: 1; } }

/* ---------------- scroll-linked accents (ride the existing
     kw-rev reveal system — no new observers needed) ---------------- */

/* brush numerals in "Five ways" settle like ink as their row reveals */
html.kw-anim .kw-rev-armed.kw-rev-stagger .way__num {
  opacity: 0; transform: scale(.82); filter: blur(5px);
  transition: opacity .9s var(--kw-ease) .25s, transform .9s var(--kw-ease) .25s, filter .9s var(--kw-ease) .25s;
}
html.kw-anim .kw-rev-armed.kw-rev-stagger.is-in .way__num {
  opacity: 1; transform: scale(1); filter: blur(0);
}


/* ------------------------- micro-interactions ------------------------- */

.way { transition: background var(--kw-dur) var(--kw-ease); }
/* No background tint on hover — the rows stay clean; the brush numeral
   pop + the traced border are the hover affordance. */
.way:hover { background: transparent; }
.way__cta svg { transition: transform var(--kw-dur) var(--kw-ease); }
.way:hover .way__cta svg { transform: translate(3px, -3px); }

/* "Five ways" rows are whole-card links. */
.way { position: relative; color: inherit; text-decoration: none; }
.way:focus-visible { outline: 2px solid var(--kw-blue); outline-offset: 4px; background: var(--kw-paper-cream); }

/* brush-numeral "stamp-up" pop (nav/drawer service dropdowns use the same) */
.way__num-mark {
  display: inline-block;
  transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.way:hover .way__num-mark,
.way:focus-visible .way__num-mark {
  transform: scale(1.16) rotate(-3deg);
}

/* service name nudges up a touch on hover */
.way__name {
  transition: transform .35s cubic-bezier(.2, 1.2, .4, 1);
  transform-origin: left center;
}
.way:hover .way__name,
.way:focus-visible .way__name {
  transform: scale(1.05);
}

/* ---- spotlight "정성" image: cinematic reveal on scroll ---- */
html.kw-anim .spotlight__media.kwfx-armed img {
  opacity: 0;
  transform: scale(1.12);
  filter: contrast(1.02) saturate(.95) blur(14px);
  transition: opacity 1s ease, transform 1.5s cubic-bezier(.16, .84, .18, 1), filter 1.1s ease;
}
html.kw-anim .spotlight__media.kwfx-armed.is-in img {
  opacity: 1;
  transform: scale(1);
  filter: contrast(1.02) saturate(.95) blur(0);
}
/* a soft brand sheen sweeps across once as it lands */
html.kw-anim .spotlight__media.kwfx-armed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(243, 239, 231, .28) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 120% 0;
  opacity: 0;
}
html.kw-anim .spotlight__media.kwfx-armed.is-in::after {
  animation: kwfxSheen 1.5s cubic-bezier(.16, .84, .18, 1) .35s both;
}
@keyframes kwfxSheen {
  0%   { opacity: 0; background-position: 120% 0; }
  35%  { opacity: 1; }
  100% { opacity: 0; background-position: -40% 0; }
}
/* seal + caption settle in just after the image */
html.kw-anim .spotlight__media.kwfx-armed .spotlight__media-seal,
html.kw-anim .spotlight__media.kwfx-armed .spotlight__media-caption {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.16, .84, .18, 1);
}
html.kw-anim .spotlight__media.kwfx-armed.is-in .spotlight__media-seal {
  opacity: 1; transform: none; transition-delay: .55s;
}
html.kw-anim .spotlight__media.kwfx-armed.is-in .spotlight__media-caption {
  opacity: 1; transform: none; transition-delay: .7s;
}
@media (prefers-reduced-motion: reduce) {
  .way:hover .way__num-mark,
  .way:focus-visible .way__num-mark { transform: none; }
  .way:hover .way__name,
  .way:focus-visible .way__name { transform: none; }
  html.kw-anim .spotlight__media.kwfx-armed img {
    transform: none;
    filter: contrast(1.02) saturate(.95);
    transition: opacity .8s ease;
  }
  html.kw-anim .spotlight__media.kwfx-armed::after { display: none; }
  html.kw-anim .spotlight__media.kwfx-armed .spotlight__media-seal,
  html.kw-anim .spotlight__media.kwfx-armed .spotlight__media-caption { transform: none; }
}

/* count-up figures sit on the same baseline whether mid-tween or settled */
.spotlight__stat-num [data-count-to],
.team__count-n [data-count-to] { font-variant-numeric: tabular-nums; }

.member__img { transition: transform .6s var(--kw-ease); }
.member:hover .member__img { transform: scale(1.04); }
.member__img-wrap { overflow: hidden; }

.loc-card { transition: transform var(--kw-dur) var(--kw-ease), box-shadow var(--kw-dur) var(--kw-ease); }
.loc-card:hover { transform: translateY(-4px); }

.btn svg { transition: transform var(--kw-dur) var(--kw-ease); }
.btn:hover svg { transform: translate(3px, -3px); }

/* "See how direct billing & ICBC work" link in the booking section */
/* Secondary CTA — cheongsaek-blue outline pill that pairs with the dark
   "Book online" primary above it (fills blue on hover). */
.booking__seeall {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1.5px solid var(--kw-blue);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--kw-blue);
  text-decoration: none;
  transition: background .28s var(--kw-ease), color .28s var(--kw-ease), transform .28s var(--kw-ease);
}
.booking__seeall svg {
  width: 15px; height: 15px;
  transition: transform .25s var(--kw-ease);
}
.booking__seeall:hover {
  background: var(--kw-blue);
  color: var(--kw-paper);
  transform: translateY(-1px);
  text-decoration: none;
}
.booking__seeall:hover svg { transform: translate(3px, -3px); }
/* a touch of air before the call/email note so the two pills read as a group */
.booking__cta .booking__note { margin-top: 6px; }

/* ---- "다섯" accent: grows a touch + reads bolder once the title is in view ---- */
.approach__title .accent {
  display: inline-block;
  margin-left: 0.22em;
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.2, .8, .25, 1) .1s;
}
html.kw-anim .approach__title.kwfx-armed.is-drawn .accent {
  transform: scale(1.15);
}

/* ------------------------- reduced motion ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .approach__title .accent { transition: none !important; }
  html.kw-anim .hero__bg::after,
  html.kw-anim .hero__meta-scroll svg {
    animation: none !important;
  }
  html.kw-anim .hero__title .kwa-line,
  html.kw-anim .hero__hangul,
  html.kw-anim .hero__sub,
  html.kw-anim .hero__cta > *,
  html.kw-anim .hero__meta,
  html.kw-anim .hero__rail-line,
  html.kw-anim .hero__rail-text,
  html.kw-anim .hero__rail > div:last-child {
    animation: kwaFade .8s ease both !important;
  }
  html.kw-anim .kw-rev-armed.kw-rev-stagger .way__num {
    transform: none !important;
    filter: none !important;
    transition: opacity .7s ease !important;
  }
}

/* ====================================================================
   "Our approach": the ink-wash scene (ink-scene.js, from the
   kwell-ink-wash-scroll-scene skill) and the brush-written numerals
   (brush-writing.js, from kwell-ink-brush-writing). Layout: styles.css.
   ==================================================================== */
.kw-scene {
  --kw-scene-paper: #f4efe4;
  --kw-scene-ink: #14110d;
  position: relative;
  margin: 0;
  container-type: inline-size;
  /* no JS: a still of the finished, framed scene */
  background: var(--kw-scene-paper) url("assets/images/ink-scene-still.webp") 50% 50% / cover no-repeat;
}
html.kw-anim .kw-scene { background-image: none; }
html.kw-anim .kw-scene.kw-scene--still,
html.kw-anim .approach--still .kw-scene { background-image: url("assets/images/ink-scene-still.webp"); }
.kw-scene--band { overflow: visible; transition: border-color .4s ease; }
.kw-scene.kw-scene--out { border-color: transparent; background-color: transparent; }
.kw-scene__band { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
.kw-scene__canvas,
.kw-scene__layers { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.kw-scene__layers { transform-origin: 0 0; }
.kw-scene__layer { position: absolute; left: 0; top: 0; }
/* the runway: the scroll the story plays over (JS and motion only) */
.kw-scene-runway { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.kw-anim .kw-scene-runway { display: block; height: min(var(--kw-scene-runway, 150vh), 1300px); }
}
@media (max-width: 1100px) and (prefers-reduced-motion: no-preference) {
  html.kw-anim .kw-scene-runway { height: min(var(--kw-scene-runway-sm, 140vh), 1100px); }
}
@media (max-width: 1100px) and (max-height: 560px) {
  html.kw-anim .kw-scene-runway { display: none; }
  .approach__pin { position: static; }
}
/* brush-writing stage (the numeral) */
.kw-brush { position: relative; margin: 0; overflow: hidden; container-type: inline-size; --brush-ink: #14110d; --brush-fit: .62; }
.kw-brush__still {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--kw-font-brush), "PT Serif", serif; font-weight: 700; font-size: 30cqw; line-height: 1;
  color: var(--brush-ink); white-space: nowrap; user-select: none; pointer-events: none;
}
.kw-brush--hanja .kw-brush__still { font-family: var(--kw-font-hanja); font-weight: 400; font-size: 46cqw; }
.kw-brush__paper,
.kw-brush__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kw-brush-js .kw-brush__still,
.kw-brush--live .kw-brush__still { visibility: hidden; }
.kw-brush-js .kw-brush--fallback .kw-brush__still { visibility: visible; }
/* with JS the numeral is written, never typed; the type returns only if the
   writing engine cannot load */
html.kw-anim .approach__numeral .kw-brush__still { visibility: hidden; }
html.kw-anim .approach--numstill .approach__numeral .kw-brush__still,
html.kw-anim .approach--still .approach__numeral .kw-brush__still { visibility: visible; }

/* ====================================================================
   The director's note (approach.js, ink-bloom.js): when the band comes
   into view a drop of white ink falls into the dark water above the
   scroll, blooms, and condenses into the proverb as vertical brush
   calligraphy (the ink-in-water engine, drawn in sumi and inverted, so it
   is paper-white on the band). The seal is pressed on once the ink has
   dried and the gloss follows. The quote keeps the site's word-by-word
   "into focus" reveal (scroll-reveal.js), held back until the ink has
   formed; its underline becomes a dry white brush swipe. The typed
   proverb stays in the page and returns if the ink cannot run.
   ==================================================================== */
.philosophy__ink .kw-bloom__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: auto; touch-action: pan-y pinch-zoom;
  /* feathered edges: the water's box never shows as a line */
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
.philosophy--ink .philosophy__side { color: transparent; }
html.kw-anim .philosophy--armed .philosophy__seal { opacity: 0; transform: scale(1.25) rotate(-3deg); transition: opacity .5s ease 3.3s, transform .5s cubic-bezier(.2, .8, .3, 1) 3.3s; }
html.kw-anim .philosophy--armed .philosophy__gloss { opacity: 0; transition: opacity 1.2s ease 3.7s; }
html.kw-anim .philosophy--armed .philosophy__note .eyebrow { opacity: 0; transition: opacity 1s ease .9s; }
html.kw-anim .philosophy--armed .philosophy__attr { opacity: 0; transform: translateY(6px); transition: opacity 1s ease 3.2s, transform 1s ease 3.2s; }
html.kw-anim .philosophy--play .philosophy__seal { opacity: 1; transform: rotate(-3deg); }
html.kw-anim .philosophy--play .philosophy__gloss,
html.kw-anim .philosophy--play .philosophy__note .eyebrow { opacity: 1; }
html.kw-anim .philosophy--play .philosophy__attr { opacity: 1; transform: none; }
html.kw-anim .philosophy--armed .kw-rev-armed.kw-rev-quote .kw-word { transition-delay: calc(1.3s + var(--w, 0) * 38ms); }
/* stacked (1100 px and below): the ink has already formed above, so the quote does not wait for it */
@media (max-width: 1100px) {
  html.kw-anim .philosophy--armed .kw-rev-armed.kw-rev-quote .kw-word { transition-delay: calc(.2s + var(--w, 0) * 24ms); }
}
html.kw-anim .philosophy--armed:not(.philosophy--play) .kw-rev-armed.kw-rev-quote.is-in .kw-word { opacity: 0; transform: translateY(0.5em); filter: blur(6px); }
.philosophy .kw-rev-armed.kw-rev-quote em::after {
  left: -.08em;
  right: -.1em;
  bottom: -.16em;
  height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath fill='%23f3efe7' d='M4 14c30-6 70-8 118-7 60 1 120 3 176 1 36-1 70-4 98-6 2 0 4 2 2 4-40 5-90 9-150 10-70 1-140-2-200 0-18 1-34 3-44 4-3 0-4-4 0-6z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  opacity: .55;
}
html.kw-anim .philosophy--armed .kw-rev-armed.kw-rev-quote em::after { transition-delay: 2.9s; }
html.kw-anim .philosophy--armed:not(.philosophy--play) .kw-rev-armed.kw-rev-quote.is-in em::after { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  html.kw-anim .philosophy--armed .philosophy__seal,
  html.kw-anim .philosophy--armed .philosophy__gloss,
  html.kw-anim .philosophy--armed .philosophy__attr,
  html.kw-anim .philosophy--armed .philosophy__note .eyebrow { opacity: 1; transform: none; transition: none; }
}