/* /why-urbankriti/ — single-page premium experience. Page-scoped only. */

.uk-why { overflow-x: clip; }

.wk {
  --wk-cream: var(--uk-bone);
  --wk-sand: var(--uk-sandstone);
  --wk-walnut: var(--uk-umber);
  --wk-brown: var(--uk-brown);
  --wk-copper: var(--uk-ochre);
  --wk-copper-ink: var(--ochre-on-light);
  --wk-muted: color-mix(in srgb, var(--uk-umber) 72%, var(--uk-bone));
  --wk-rule: color-mix(in srgb, var(--uk-brown) 16%, transparent);
  --wk-rule-dark: rgba(239, 231, 218, .16);
  --wk-ease: cubic-bezier(.22, 1, .36, 1);
  --wk-sec: clamp(4.5rem, 8vw, 7.5rem);
  background: var(--wk-cream);
}

.wk-wrap {
  width: min(100%, var(--maxw));
  margin-inline: auto;
  padding-inline: var(--pad-page);
}

.wk .wk-no { color: var(--wk-copper-ink); font-weight: 650; }
.wk h2 { max-width: 19ch; font-size: min(var(--fs-h2), calc(3.6rem * var(--k-display))); }
.wk-sec { position: relative; padding-block: var(--wk-sec); background: var(--wk-cream); }
.wk-sec--sand { background: var(--wk-sand); }
.wk-sec--dark { background: var(--wk-walnut); color: var(--text-on-dark); }
.wk-sec--dark h2,
.wk-sec--dark h3 { color: var(--text-on-dark); }
.wk-sec--dark .wk-no { color: var(--ochre-on-dark); }
.wk section[id] { scroll-margin-top: 88px; }

.wk-head { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.wk-head > p,
.wk-head--split > p { max-width: 44ch; margin-top: 1rem; color: var(--wk-muted); }
.wk-sec--dark .wk-head--split > p { color: color-mix(in srgb, var(--text-on-dark) 76%, transparent); }

@media (min-width: 900px) {
  .wk-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
    gap: var(--gap-lg);
    align-items: end;
  }
  .wk-head--split > p { margin-top: 0; justify-self: end; }
}

/* Reveals are gated by JS; the reduced-motion fallback remains complete. */
.wk-js .wk-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--wk-ease), transform .7s var(--wk-ease);
}
.wk-js .wk-reveal.is-in { opacity: 1; transform: none; }
.wk-js .wk-rise { opacity: 0; transform: translateY(18px); animation: wk-rise .85s var(--wk-ease) forwards; }
.wk-js .wk-hero__copy > :nth-child(1) { animation-delay: .08s; }
.wk-js .wk-hero__copy > :nth-child(2) { animation-delay: .18s; }
.wk-js .wk-hero__copy > :nth-child(3) { animation-delay: .3s; }
@keyframes wk-rise { to { opacity: 1; transform: none; } }

/* 1 — Hero: bright real-asset composite (plan → site → finish).
   No colour filter or dark overlay on the photo; only a light cream zone
   behind the copy so the live text reads. */
.wk-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: calc(var(--hdr-h) + clamp(1rem, 3vh, 2rem)) 0 clamp(2.5rem, 7vh, 5rem);
  background: var(--wk-cream);
  color: var(--wk-walnut);
}
.wk-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(250,247,242,.9) 0, rgba(250,247,242,.55) calc(var(--hdr-h) * .8), rgba(250,247,242,0) calc(var(--hdr-h) * 1.3)),
    linear-gradient(90deg, rgba(250,247,242,.97) 0%, rgba(250,247,242,.95) 30%, rgba(250,247,242,.7) 40%, rgba(250,247,242,0) 52%);
  pointer-events: none;
}
.wk-hero__media,
.wk-hero__media picture { position: absolute; inset: 0; z-index: -2; display: block; overflow: hidden; }
.wk-hero__image {
  width: calc(100% + 12px);
  max-width: none;
  height: calc(100% + 12px);
  margin: -6px;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.008);
  filter: none; /* opt out of the sitewide `main img` grade: client wants the composite ungraded */
  transition: transform 1.6s var(--wk-ease);
}
/* touch / narrow screens: why-urbankriti.js drives --py from the scroll
   position instead of the pointer, so the transition is dropped there */
.wk-hero__image.is-scroll-parallax { transition: none; will-change: transform; }
.wk-js .wk-hero__media { opacity: 0; animation: wk-hero-field-in 1.25s .08s var(--wk-ease) forwards; }
@keyframes wk-hero-field-in { from { opacity: 0; transform: scale(1.018); } to { opacity: 1; transform: none; } }

.wk-hero__grid {
  position: relative;
  z-index: 2;
  min-height: calc(100svh - var(--hdr-h) - clamp(3.5rem, 10vh, 7rem));
  display: grid;
  align-items: center;
}
.wk-hero__copy {
  position: relative;
  width: min(38vw, 560px);
  margin-left: 0;
  padding: clamp(1rem, 2vw, 1.65rem) 0;
}
.wk-hero h1 {
  max-width: calc(11ch * var(--k-measure));
  margin-bottom: clamp(1rem, 2.3vh, 1.45rem);
  color: var(--wk-walnut);
  font-size: calc(clamp(3.4rem, 5.5vw, 6rem) * var(--k-display));
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.wk-lead { max-width: 40ch; margin-bottom: clamp(1.35rem, 3vh, 2rem); color: color-mix(in srgb, var(--wk-walnut) 86%, var(--wk-cream)); font-size: clamp(.98rem, 1.15vw, 1.1rem); line-height: 1.65; }
/* the buttons that sat between the lead and this line were removed
   (client feedback, 2026-10-01): the line now follows the lead directly,
   as in the Why UrbanKriti block on About */
.wk-hero__coordination {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  color: var(--wk-copper-ink);
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0;
}
.wk-hero__sequence {
  position: absolute;
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: clamp(1.15rem, 3vh, 2rem);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(4.5rem, 7rem));
  gap: 1px;
  padding: .1rem .9rem .55rem;
  border-top: 1px solid rgba(63,36,34,.28);
  background: rgba(250,247,242,.88);
  color: var(--wk-walnut);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
}
.wk-hero__sequence::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 33.333%;
  height: 1px;
  background: var(--wk-copper);
}
.wk-hero__sequence span { display: flex; gap: .5rem; padding-top: .7rem; }
.wk-hero__sequence i { color: var(--wk-copper-ink); font-family: var(--font-display); font-style: normal; font-size: 1.1em; font-weight: 400; font-variant-numeric: tabular-nums; }

@media (max-width: 1099px) {
  .wk-hero::before {
    background:
      linear-gradient(180deg, rgba(250,247,242,.9) 0, rgba(250,247,242,.55) calc(var(--hdr-h) * .8), rgba(250,247,242,0) calc(var(--hdr-h) * 1.3)),
      linear-gradient(90deg, rgba(250,247,242,.97) 0%, rgba(250,247,242,.92) 40%, rgba(250,247,242,.5) 56%, rgba(250,247,242,0) 70%);
  }
  .wk-hero__copy { width: min(56vw, 560px); }
  .wk-hero h1 { font-size: calc(clamp(3.2rem, 7vw, 4.8rem) * var(--k-display)); }
}

/* Mobile: portrait composite, copy on a solid cream band at the top,
   the photo fully clear below it. */
@media (max-width: 600px) {
  /* the hero always leaves at least ~70vw of photograph under the copy,
     so on short phones it runs a little past the fold instead of the copy
     sliding onto the busy part of the picture */
  .wk-hero { align-items: start; min-height: 100svh; padding-top: calc(var(--hdr-h) + clamp(1.2rem, 4vh, 2.2rem)); padding-bottom: max(4.5rem, 72vw); }
  .wk-hero::before { background: linear-gradient(180deg, rgba(250,247,242,.9) 0, rgba(250,247,242,.55) calc(var(--hdr-h) * .8), rgba(250,247,242,0) calc(var(--hdr-h) * 1.3)); }
  .wk-hero__image { object-position: 50% 100%; }
  .wk-hero__grid { min-height: 0; align-items: start; }
  .wk-hero__copy { width: 100%; max-width: 23rem; margin: 0; padding: 0; }
  /* the cream band behind the copy, sized by the copy itself: from the top
     of the hero to a little past its last line, at any width or text wrap
     (it used to be a share of the hero height, so on short phones the
     last lines sat on the busy part of the photograph) */
  .wk-hero__copy::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--pad-page));
    width: 100vw;
    top: calc(-1 * (var(--hdr-h) + 3rem));
    bottom: -4.25rem;
    z-index: -1;
    background: linear-gradient(180deg, rgba(250,247,242,.97) 0, rgba(250,247,242,.95) calc(100% - 4.25rem), rgba(250,247,242,0) 100%);
    pointer-events: none;
  }
  .wk-hero h1 { max-width: 10ch; font-size: calc(clamp(2.8rem, 13.4vw, 3.5rem) * var(--k-display)); line-height: .94; }
  .wk-lead { max-width: 37ch; margin-bottom: 1.2rem; font-size: .9rem; line-height: 1.58; }
  .wk-hero__coordination { max-width: 22rem; font-size: 1.12rem; letter-spacing: 0; }
  /* the plan / site / finish sequence stays on phones, across the foot */
  .wk-hero__sequence {
    left: var(--pad-page);
    right: var(--pad-page);
    bottom: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: .1rem .75rem .55rem;
    font-size: .8rem;
  }
}

/* short landscape phones: the hero copy fits under the header */
@media (orientation: landscape) and (max-height: 520px) {
  .wk-hero h1 { font-size: calc(clamp(2.4rem, 12svh, 3.4rem) * var(--k-display)); margin-bottom: .8rem; }
  .wk-lead { font-size: .9rem; margin-bottom: .9rem; }
  .wk-hero__grid { min-height: 0; }
  .wk-hero__sequence { bottom: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-js .wk-hero__media { opacity: 1 !important; transform: none !important; animation: none !important; }
  .wk-hero__image { transform: none !important; transition-duration: .01ms !important; }
}

/* 2 — Problem / one direction. */
.wk-problem { display: grid; gap: clamp(2.75rem, 6vw, 5rem); align-items: center; }
.wk-problem__copy > p:not(.eyebrow):not(.wk-problem__result) { margin: 1.25rem 0 2rem; color: var(--wk-muted); }
.wk-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(250,247,242,.7);
}
.wk-switch__btn {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: .65rem 1.15rem;
  border-radius: 999px;
  color: var(--wk-brown);
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: color .35s var(--wk-ease);
}
.wk-switch__btn[aria-pressed="true"] { color: var(--text-on-dark); }
.wk-switch__thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--wk-walnut);
  transition: transform .55s var(--wk-ease), background .4s ease;
}
[data-state-host="connected"] .wk-switch__thumb { transform: translateX(100%); background: var(--uk-terracotta); }
.wk-problem__result { position: relative; min-height: 3.6em; max-width: 42ch; margin-top: 1.4rem; font-size: .98rem; }
.wk-problem__result span { position: absolute; inset: 0 auto auto 0; transition: opacity .35s ease, transform .4s var(--wk-ease); }
.wk-problem__result [data-for="connected"] { opacity: 0; transform: translateY(8px); }
[data-state-host="connected"] .wk-problem__result [data-for="scattered"] { opacity: 0; transform: translateY(-8px); }
[data-state-host="connected"] .wk-problem__result [data-for="connected"] { opacity: 1; transform: none; }

.wk-board {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wk-brown) 24%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(rgba(113,50,51,.08) 1px, transparent 1px) 0 0 / 100% 12.5%,
    linear-gradient(90deg, rgba(113,50,51,.08) 1px, transparent 1px) 0 0 / 12.5% 100%,
    radial-gradient(circle at 42% 50%, rgba(200,129,28,.12), transparent 34%),
    var(--wk-cream);
  box-shadow: 0 30px 75px -55px rgba(63,36,34,.85);
  contain: layout paint;
}
.wk-board::before {
  content: none;
  position: absolute;
  left: 1rem;
  top: .85rem;
  color: rgba(76,46,47,.42);
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: 0;
}
.wk-board__halo {
  position: absolute;
  left: 39%;
  top: 50%;
  width: 17rem;
  aspect-ratio: 1;
  border: 1px solid rgba(200,129,28,.15);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5);
  transition: opacity .55s ease, transform .8s var(--wk-ease);
}
.wk-board__halo::before,
.wk-board__halo::after { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(200,129,28,.14); border-radius: inherit; }
.wk-board__halo::after { inset: 28%; }
.wk-board[data-state="connected"] .wk-board__halo { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: wk-hub-pulse 3.2s ease-in-out infinite; }
@keyframes wk-hub-pulse { 50% { opacity: .58; transform: translate(-50%, -50%) scale(1.045); } }
.wk-board__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk-board__lines line,
.wk-board__lines path { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: opacity .4s ease, stroke .4s ease; }
.wk-board__lines .l-c { stroke: var(--uk-terracotta); stroke-dasharray: 4 5; opacity: .58; }
.wk-board__lines .l-t { stroke: var(--uk-clay); stroke-dasharray: 2 6; opacity: .42; }
.wk-board__lines .l-u,
.wk-board__lines .l-cu { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.wk-board__lines .l-u { stroke: color-mix(in srgb, var(--wk-brown) 52%, transparent); }
.wk-board__lines .l-cu { stroke: var(--wk-copper); stroke-width: 2.2; }
.wk-board[data-state="connected"] .l-c,
.wk-board[data-state="connected"] .l-t { opacity: 0; }
.wk-board[data-state="connected"] .l-u { opacity: .65; animation: wk-line-in .8s .2s var(--wk-ease) forwards; }
.wk-board[data-state="connected"] .l-cu { opacity: 1; animation: wk-line-in .7s var(--wk-ease) forwards; }
@keyframes wk-line-in { to { stroke-dashoffset: 0; } }

.wk-node {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  z-index: 2;
  max-width: 25%;
  min-width: 4.4rem;
  padding: .48rem .6rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 22px -15px rgba(63,36,34,.65);
  color: var(--wk-walnut);
  font-size: clamp(.58rem, 1.55vw, .77rem);
  font-weight: 550;
  line-height: 1.25;
  text-align: center;
  transform: translate(-50%, -50%) rotate(var(--sr, 0deg));
  transition: left .85s var(--wk-ease), top .85s var(--wk-ease), transform .85s var(--wk-ease), opacity .4s, background .4s, color .4s, border-color .4s;
}
.wk-board[data-state="connected"] .wk-node { left: var(--cx); top: var(--cy); transform: translate(-50%, -50%); }
.wk-board[data-state="scattered"] .wk-node[data-node="p"] { animation: wk-jitter 3.8s ease-in-out infinite alternate; }
.wk-board[data-state="scattered"] .wk-node[data-node="p"]:nth-of-type(2n) { animation-duration: 4.7s; animation-delay: -1.1s; }
@keyframes wk-jitter { to { translate: 3px -4px; } }
.wk-node--client {
  z-index: 4;
  min-width: 0;
  max-width: none;
  padding: .72rem 1rem;
  border-color: var(--wk-walnut);
  border-radius: 999px;
  background: var(--wk-walnut);
  color: var(--text-on-dark);
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0;
}
.wk-node--uk {
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .65rem;
  width: min(40%, 220px);
  min-width: 0;
  max-width: none;
  padding: .55rem .75rem;
  border-color: color-mix(in srgb, var(--wk-copper) 65%, var(--wk-walnut));
  background: var(--wk-walnut);
  color: var(--text-on-dark);
  text-align: left;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
}
/* The authentic horizontal lockup (mark + wordmark), never typed text. */
.wk-node--uk { flex-direction: column; align-items: flex-start; gap: .3rem; }
.wk-node--uk .wk-node__logo { display: block; width: 100%; max-width: 9.5rem; height: auto; }
.wk-node--uk small { color: var(--clay-on-dark); font-size: 0.76rem; font-weight: 600; letter-spacing: 0; }
.wk-board[data-state="connected"] .wk-node--uk { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: 0 20px 40px -22px rgba(63,36,34,.9), 0 0 0 1px rgba(200,129,28,.25); }
.wk-board[data-state="connected"] .wk-node[data-node="p"] { border-color: color-mix(in srgb, var(--wk-copper) 30%, transparent); background: rgba(250,247,242,.95); }

@media (min-width: 768px) { .wk-board { aspect-ratio: 6 / 5; } }
/* Tablets and small laptops: the board is narrower than on a wide desktop,
   so the UrbanKriti node is held narrower too and never reaches the
   party column it connects to (it overlapped it at 1000-1279px) */
@media (min-width: 768px) and (max-width: 1279px) {
  .wk-node--uk { width: min(31%, 220px); }
}
/* Phones: a portrait board. Scattered, the decisions sit around you
   (--msx/--msy); connected, the desktop row runs across the top, you then
   UrbanKriti, and the decisions hang below it in order, two to a row, each
   on a riser from one bus (why-urbankriti.js draws the risers). */
@media (max-width: 767px) {
  .wk-board { aspect-ratio: 4 / 5; }
  .wk-node { left: var(--msx, var(--sx)); top: var(--msy, var(--sy)); }
  .wk-board[data-state="connected"] .wk-node { left: var(--mcx, var(--cx)); top: var(--mcy, var(--cy)); }
  .wk-node[data-node="p"] { min-width: 0; max-width: 46%; padding: .5rem .7rem; font-size: .72rem; white-space: nowrap; }
  .wk-node--client { padding: .65rem .95rem; }
  .wk-node--uk { width: min(58%, 14rem); padding: .55rem .7rem; }
  .wk-node--uk .wk-node__logo { max-width: 7rem; }
  .wk-node--uk small { display: block; font-size: .6rem; line-height: 1.3; }
  .wk-board__halo { left: 63%; top: 16%; width: 12rem; }
}
/* short landscape phones: the whole board stays inside one screen */
@media (orientation: landscape) and (max-height: 520px) {
  .wk-board { aspect-ratio: auto; height: max(16rem, calc(100svh - var(--hdr-safe) - 1.5rem)); }
}
@media (min-width: 1000px) {
  .wk-problem { grid-template-columns: minmax(20rem, .82fr) minmax(0, 1.18fr); }
  .wk-board { aspect-ratio: 7 / 5; }
}

/* 3 — Difference: six deliberate expanding reasons. */
.wk-reasons { display: flex; flex-direction: column; gap: .55rem; overflow-anchor: none; }
.wk-reason {
  position: relative;
  isolation: isolate;
  min-height: 76px;
  height: 76px;
  overflow: hidden;
  border: 1px solid var(--wk-rule-dark);
  border-radius: 7px;
  background: #2b1b17;
  transition: height .6s var(--wk-ease), flex-grow .65s var(--wk-ease), border-color .3s ease;
}
/* the open height is capped on short screens (landscape phones), so an
   open panel always fits under the header; why-urbankriti.js keeps the
   tapped panel in view while the others close */
.wk-reason.is-active { height: min(350px, max(15rem, calc(100svh - 8rem))); border-color: rgba(200,129,28,.62); }
.wk-reason img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.7) brightness(.45);
  transform: scale(1.07);
  transition: filter .65s ease, transform 1s var(--wk-ease);
}
.wk-reason::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(31,18,15,.15), rgba(31,18,15,.9)); }
.wk-reason.is-active img { filter: saturate(.86) brightness(.7); transform: scale(1); }
@media (hover: hover) {
  .wk-reason:not(.is-active):hover img { filter: grayscale(.25) brightness(.62); }
}
/* touch: the press itself previews the panel before it opens */
.wk-reason:not(.is-active):active img { filter: grayscale(.25) brightness(.62); transition-duration: .2s; }
.wk-reason__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.25rem;
  color: var(--text-on-dark);
  text-align: left;
}
.wk-reason__btn:focus-visible { outline-offset: -4px; }
/* round 6: the reasons are not a sequence, so no "01-06" markers */
.wk-reason__no { display: none; }
.wk-reason__title { font-family: var(--font-display); font-size: calc(clamp(1.3rem, 2.4vw, 1.75rem) * var(--k-display)); font-weight: 400; line-height: 1.08; }
.wk-reason__text {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
  max-width: 39ch;
  color: var(--text-on-dark);
  font-size: .96rem;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .35s ease, transform .5s var(--wk-ease);
}
.wk-reason.is-active .wk-reason__text { opacity: 1; transform: none; transition-delay: .18s; }
@media (min-width: 1100px) {
  .wk-reasons { flex-direction: row; height: min(540px, 66vh); }
  .wk-reason { min-width: 0; height: auto !important; flex: 1 1 0; }
  .wk-reason.is-active { flex-grow: 4; }
  .wk-reason__btn { flex-direction: column; justify-content: space-between; padding: 1.4rem 1.15rem; }
  .wk-reason:not(.is-active) .wk-reason__title { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 1.3rem; }
  .wk-reason.is-active .wk-reason__btn { justify-content: flex-start; }
  .wk-reason.is-active .wk-reason__title { max-width: 16ch; margin-top: 0; font-size: calc(clamp(2rem, 2.7vw, 2.7rem) * var(--k-display)); }
  .wk-reason__text { left: 1.4rem; bottom: 1.4rem; }
}

/* 4 — FAQ decision board: questions left, one answer panel right.
   The panel keeps one height for every question: the image sits absolutely
   in its frame (so a picture's own proportions can never size the row), and
   why-urbankriti.js stacks every answer, hidden, in the same grid cell as the
   visible one, so the copy row is always as tall as the longest answer.
   Same approach as the FAQ in the Why UrbanKriti block on About. */
.wk-sec--faq { background: var(--wk-cream); }
.wk-faq__board { overflow: hidden; border: 1px solid color-mix(in srgb, var(--wk-brown) 19%, transparent); border-radius: 9px; box-shadow: 0 28px 70px -56px rgba(63,36,34,.85); }
.wk-acc { background: color-mix(in srgb, var(--wk-sand) 72%, white); }
.wk-q {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr 24px;
  align-items: center;
  gap: .65rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--wk-rule);
  color: var(--wk-walnut);
  font-size: clamp(.94rem, 1.45vw, 1.08rem);
  line-height: 1.35;
  text-align: left;
  transition: background .3s ease, color .3s ease, padding .3s var(--wk-ease);
}
.wk-q:last-child { border-bottom: 0; }
@media (hover: hover) {
  .wk-q:hover { padding-left: 1.4rem; background: rgba(255,255,255,.45); }
}
.wk-q:active:not(.is-open) { background: rgba(255,255,255,.45); }
.wk-q.is-open { background: var(--wk-walnut); color: var(--text-on-dark); }
/* round 6: questions are not a sequence; no "01-06" markers */
.wk-q__no { display: none; }
.wk-q.is-open .wk-q__no { color: var(--ochre-on-dark); }
.wk-q i { position: relative; width: 24px; height: 24px; border: 1px solid currentColor; border-radius: 50%; opacity: .65; }
.wk-q i::before,
.wk-q i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s var(--wk-ease), opacity .2s ease; }
.wk-q i::after { transform: translate(-50%, -50%) rotate(90deg); }
.wk-q.is-open i::after { transform: translate(-50%, -50%) rotate(90deg) scaleX(0); opacity: 0; }
.wk-faq__answer { display: grid; grid-template-rows: minmax(min(240px, 30svh), min(42vw, 44svh)) auto; background: var(--wk-cream); }
.wk-faq__image { position: relative; min-height: 0; overflow: hidden; background: var(--wk-walnut); }
.wk-faq__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(35,21,17,.7)); }
.wk-faq__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease, transform .6s var(--wk-ease); }
.wk-faq__image img.is-changing { opacity: .25; transform: scale(1.025); }
.wk-faq__image > span { display: none; }
.wk-faq__answer-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); }
/* the visible answer and its hidden sizers share one grid cell */
.wk-faq__copy { display: grid; max-width: 45ch; }
.wk-faq__copy > * { grid-area: 1 / 1; margin: 0; max-width: none; color: var(--wk-muted); }
.wk-faq__sizer { visibility: hidden; }
.wk-faq__answer-copy.is-changing > * { animation: wk-answer-in .4s var(--wk-ease); }
@keyframes wk-answer-in { from { opacity: 0; transform: translateY(7px); } }
/* Below 950px the rail and the answer stack, and the answer box opens
   directly under the question that was tapped, the way an accordion does
   (why-urbankriti.js sets each item's flex order and holds the tapped
   question still while the box moves). One box, always the same height. */
@media (max-width: 949px) {
  .wk-faq__board { display: flex; flex-direction: column; overflow-anchor: none; background: color-mix(in srgb, var(--wk-sand) 72%, white); }
  .wk-acc { display: contents; }
  .wk-q { background: color-mix(in srgb, var(--wk-sand) 72%, white); }
  .wk-q.is-open { background: var(--wk-walnut); border-bottom-color: transparent; }
  .wk-q:last-child { border-bottom: 1px solid var(--wk-rule); }
  .wk-faq__answer { border-bottom: 1px solid var(--wk-rule); }
  .wk-faq__answer.is-last { border-bottom: 0; }
  .wk-faq__answer.is-moved { animation: wk-faq-drop .55s var(--wk-ease); }
}
@keyframes wk-faq-drop { from { opacity: 0; transform: translateY(-10px); } }
@media (min-width: 950px) {
  .wk-faq__board { display: grid; grid-template-columns: minmax(330px, .8fr) minmax(0, 1.2fr); min-height: 560px; }
  .wk-acc { display: grid; grid-template-rows: repeat(6, 1fr); }
  .wk-q { min-height: 0; }
  .wk-faq__answer { grid-template-rows: minmax(0, 1fr) auto; }
}

@media (max-width: 767px) {
  .wk-sec { padding-top: max(var(--wk-sec), 8rem); }
  .wk-hero__atmosphere::after { background: linear-gradient(180deg, rgba(35,21,17,.9), rgba(35,21,17,.98)); }
}

@media (max-width: 480px) {
  .wk-hero__story { margin-inline: 0; width: 100%; }
  .wk-switch { width: 100%; }
  .wk-switch__btn { padding-inline: .6rem; font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wk-js .wk-reveal,
  .wk-js .wk-rise,
  .wk-js .wk-story { opacity: 1 !important; transform: none !important; translate: none !important; animation: none !important; }
  .wk-hero__bg,
  .wk-hero__bg--two,
  .wk-hero__scroll i::before,
  .wk-board__halo,
  .wk-board .wk-node,
  .wk-board__lines .l-u,
  .wk-board__lines .l-cu,
  .wk-faq__answer-copy.is-changing > * { animation: none !important; }
  .wk-hero__bg--two { opacity: 0; }
  .wk-hero__thread path { stroke-dashoffset: 0; }
  .wk-faq__answer.is-moved { animation: none !important; }
  .wk-faq__image img,
  .wk-story,
  .wk-node { transition-duration: .01ms !important; }
}