/* Studio Display study. Geometry is in a 1000-unit coordinate system; only the fit
   wrapper scales it. Preserve-3d ancestors must NOT have opacity, filters or overflow. */
body.wk-architecture { display: block; background: #fff; overflow-x: clip; }
.wk-architecture .site-head { height: 68px; margin-bottom: -68px; padding-inline: 40px; }
.wk-architecture .site-head::after { display: none; }
.wk-architecture .site-head .nav-trigger { color: #000; font-weight: 500; }
.wk-architecture .site-actions .wk-btn-secondary { background: #fff; border-color: var(--wk-border); color: #000; }
.wk-architecture .site-actions .wk-btn-secondary:hover { background: #f4f2ef; border-color: var(--wk-border); }
/* Scrolled: the same full-width strip as the content pages, not the floating glass bar. */
.wk-architecture .site-head.is-floating {
  top: 0; margin: 0 0 -68px; padding-inline: 40px; border-radius: 0;
  border-color: transparent transparent var(--wk-hairline, #ebeae9);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
.wk-architecture .site-menu { top: 64px; }
.wk-architecture-skip {
  position: fixed; z-index: 100; top: 12px; left: 12px; padding: 12px 16px;
  border-radius: 4px; background: var(--wk-ink); color: #fff; transform: translateY(-160%);
}
.wk-architecture-skip:focus { transform: none; }
.wk-architecture-hero {
  position: relative;
  display: block; height: auto; min-height: 0; margin: 0; padding: 0;
  overflow: visible; background: #fff; color: var(--wk-ink);
}
.wk-architecture-copy {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch; column-gap: clamp(18px, 1.05vw, 20px);
  width: min(100%, 1728px); margin: 0 auto; min-height: 0;
  /* The top space also shrinks with the window's height, so a shorter window keeps more
     of the display in view; full-screen windows keep the width-based size. */
  padding: min(clamp(172px, 11vw, 192px), max(128px, 17svh)) clamp(32px, 2.1vw, 40px) 0; text-align: center;
}
.wk-architecture-intro { grid-column: 2 / span 10; }
.wk-architecture-hero h1 {
  margin: 0; max-width: none; font-size: clamp(44px, 4.6vw, 56px);
  line-height: 1.05; letter-spacing: -0.0125em; text-wrap: balance; color: #000;
  font-weight: 500;
}
.wk-architecture-hero h1 span { color: inherit; }
.wk-headline-line { white-space: normal; }
/* The story strip sits 24px above the display, exactly as wide as its frame (the
   display is min(82%, 1200px) of the sequence, centred). Open stories grow up into the
   space between it and the buttons, which the sequence's top margin provides. */
.wk-architecture-message {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 24px); z-index: 3;
  width: min(82%, 1200px); margin: 0 auto; padding: 0;
}
/* The tagline under the headline: the text face, grey, one step down, two balanced lines
   on desktop and tablet (narrow phones need more). */
.wk-hero-tagline {
  max-width: 44em; margin: 20px auto 0; color: var(--wk-text-muted);
  font-family: var(--wk-sans); font-size: 18px; line-height: 1.7; letter-spacing: -0.01em;
  text-wrap: balance;
}
/* The three audiences sit in small tags: white, one soft hairline, a slight shadow, the
   house 4px radius, a line icon in grey and the word in ink. */
.wk-audience {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: 1px;
  padding: 0 7px 0 6px; border: 1px solid var(--wk-hairline); border-radius: 4px;
  background: var(--wk-surface); color: var(--wk-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: .875em; font-weight: 500; line-height: 22px; white-space: nowrap;
  text-decoration: none;
  transition: box-shadow var(--wk-ease), border-color var(--wk-ease);
}
/* On hover a tag lifts and its icon lights up in cobalt; it never greys. */
.wk-audience:focus-visible { outline: 2px solid var(--wk-cobalt); outline-offset: 2px; }
.wk-audience:hover { border-color: var(--wk-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.wk-audience-icon { transition: color var(--wk-ease); }
.wk-audience:hover .wk-audience-icon { color: var(--wk-cobalt); }
/* The three tags always share one line. */
.wk-audiences { white-space: nowrap; }
.wk-audience-icon { flex: none; width: 13px; height: 13px; color: var(--wk-text-muted); }
@media (max-width: 1024px) { .wk-hero-tagline { font-size: 16px; } }
@media (max-width: 759px) { .wk-hero-tagline { margin-top: 16px; } }
.wk-architecture .hero-actions { justify-content: center; gap: 12px; margin-top: 32px; }

/* Four feature stories in a row: plain headlines, no card and no rules, all closed.
   Hovering or focusing one (home.js; a tap toggles) fades its sentence in below it. The
   sentence floats over the space above the display, so nothing on the page moves. */
/* Spread edge to edge: the first label starts where the headline does and the last ends
   on the mirrored column, with equal gaps between. */
.wk-stories-list {
  position: relative; display: flex; justify-content: space-between; gap: 24px; padding: 14px 24px;
}
/* The frosted strip behind the row: translucent light grey over a blur of the ribbon. It is a
   layer of its own, not the row's background, because an element with a backdrop filter
   hides what is behind it from the backdrop filters inside it: the panels below would
   frost only the strip, not the ribbon. */
.wk-stories-list::before, .wk-story-detail::before {
  content: ""; position: absolute; inset: 0; border-radius: 4px;
  /* Light grey rather than white, so the glass still reads over plain white. */
  background: rgba(228, 228, 228, 0.55);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wk-stories-list::before, .wk-story-detail::before { background: rgba(236, 236, 236, 0.92); }
}
.wk-story { position: relative; color: #000; font-size: 16px; line-height: 1.45; letter-spacing: -0.01em; }
.wk-story h2 { margin: 0; font: inherit; }
.wk-story-toggle {
  display: inline-block; padding: 0; border: 0; background: none; color: #000;
  font: inherit; font-family: var(--wk-sans); font-weight: 500; letter-spacing: inherit;
  text-align: inherit; cursor: pointer;
}
.wk-story-toggle:focus-visible { outline: 2px solid var(--wk-cobalt); outline-offset: 2px; }
.wk-story-detail {
  /* A glass panel that grows up out of the strip, with the sentence rising in just
     behind it. The clip-path reveal is on the glass layer itself: on the panel it would
     cut the glass off from the ribbon behind, like a backdrop filter does. */
  position: absolute; bottom: calc(100% + 14px); left: -24px; z-index: 1; display: block;
  width: 328px; padding: 16px 24px 12px; font-size: 15px;
  visibility: hidden; transition: visibility 0s linear .4s;
}
.wk-story-detail::before {
  border-radius: 4px 4px 0 0; clip-path: inset(100% 0 0 0);
  transition: clip-path .4s cubic-bezier(.22, .8, .24, 1);
}
.is-active > .wk-story-detail::before { clip-path: inset(0); }
.wk-story-copy {
  position: relative; display: block; opacity: 0; transform: translateY(10px);
  transition: opacity .2s ease, transform .3s cubic-bezier(.22, .8, .24, 1);
}
.is-active > .wk-story-detail { visibility: visible; transition-delay: 0s; }
.is-active > .wk-story-detail .wk-story-copy {
  opacity: 1; transform: none;
  transition: opacity .35s ease .08s, transform .5s cubic-bezier(.22, .8, .24, 1) .05s;
}
/* Panels start at the strip's own edge (its 24px padding), the last one from the right
   edge, so the outer ones are flush with the strip's ends. */
.wk-story:last-child > .wk-story-detail { left: auto; right: -24px; }
/* Where an outer panel meets the strip, square that corner of the strip so they join. */
.wk-stories-list:has(> .wk-story:first-child.is-active)::before { border-top-left-radius: 0; }
.wk-stories-list:has(> .wk-story:last-child.is-active)::before { border-top-right-radius: 0; }
.wk-story-link {
  display: inline-block; margin-top: 6px; color: #000; font-weight: 500; white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.wk-story-link:focus-visible { outline: 2px solid var(--wk-cobalt); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .wk-story-detail, .wk-story-detail::before, .wk-story-copy, .is-active > .wk-story-detail .wk-story-copy { transform: none; transition: none; }
}
.wk-architecture .hero-actions .wk-btn { min-width: 0; }
.wk-architecture .hero-actions .wk-btn-primary { background: #000; border-color: #000; color: #fff; }
.wk-architecture .hero-actions .wk-btn-primary:hover { background: #1c1c1c; border-color: #1c1c1c; }
.wk-architecture .hero-actions .wk-btn-primary:focus-visible { outline-color: #000; }
.wk-architecture .hero-actions .wk-btn-secondary { background: #fff; border-color: var(--wk-border); color: #000; }
.wk-architecture .hero-actions .wk-btn-secondary:hover { background: #f4f2ef; border-color: var(--wk-border); }

/* The gap above the display holds the story strip and the panels that open above it; it
   too tightens on shorter windows, never below the room an open panel needs. */
.wk-studio-sequence {
  position: relative; margin-top: 48px; padding-bottom: 72px;
}
.wk-screen-stage { position: relative; isolation: isolate; width: min(82%, 1200px); margin: 0 auto; }
.wk-screen {
  position: relative; z-index: 1; width: 100%; margin: 0; padding: clamp(10px, 1.8vw, 26px);
  background: #000; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08), 0 18px 48px rgba(15, 23, 42, .14);
}
.wk-screen img { display: block; width: 100%; height: auto; border-radius: 2px; }
/* The artwork scrolls with the hero, without a pinned background. */
.wk-hero-backdrop {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.wk-hero-backdrop-frame {
  position: relative; height: 100svh; overflow: visible;
  background: #fff;
}
/* Short radial chains of points form a hollow halo behind the Mac frame. */
.wk-hero-orbit { position: absolute; inset: 0; pointer-events: none; }
.wk-hero-orbit-poster,
.wk-hero-orbit-canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 100%);
}
.wk-hero-orbit-poster { object-fit: cover; opacity: .84; }
.wk-hero-orbit-canvas { opacity: 0; }
.wk-hero-orbit.is-ready .wk-hero-orbit-canvas { opacity: .92; }
.wk-hero-orbit.is-ready .wk-hero-orbit-poster { opacity: 0; }

@media (min-width: 1445px) {
  .wk-architecture-hero h1 { font-size: 64px; }
}
@media (min-width: 1730px) {
  .wk-architecture-hero h1 { font-size: 76px; }
}
@media (max-width: 1024px) {
  .wk-architecture-copy { display: block; text-align: center; }
  .wk-architecture-hero h1 { max-width: none; font-size: clamp(40px, 5.5vw, 56px); }
  .wk-architecture .hero-actions { justify-content: center; margin-top: 28px; }
  .wk-stories-list { gap: 20px; }
  .wk-story-detail { width: 268px; }
}

/* The opening is width-led, not height-capped. The stand continues below the fold. */
@media (max-width: 759px) {
  .wk-architecture .site-head { height: 64px; margin-bottom: -64px; padding-inline: 24px; }
  .wk-architecture .site-head.is-floating { margin-bottom: -64px; padding-inline: 24px; }
  .wk-architecture-copy {
    display: block; min-height: 0; padding: 164px 20px 48px; text-align: center;
  }
  .wk-architecture-hero h1 { font-size: clamp(38px, 10vw, 52px); }
  .wk-architecture-message { position: static; width: auto; margin: 0 20px 24px; }
  /* One column on phones, opened by a tap: the sentence sits in the flow and the row
     glides open (grid rows 0fr to 1fr animate the real height) while the text fades
     and settles; closing folds it back the same way. */
  .wk-stories-list { flex-direction: column; gap: 12px; padding: 16px 20px; }
  .wk-story-detail {
    position: static; display: grid; grid-template-rows: 0fr; width: auto; padding: 0;
    transition: grid-template-rows .45s cubic-bezier(.22, .8, .24, 1), visibility 0s linear .45s;
  }
  .wk-story-detail::before { display: none; }
  .is-active > .wk-story-detail {
    grid-template-rows: 1fr;
    transition: grid-template-rows .45s cubic-bezier(.22, .8, .24, 1), visibility 0s;
  }
  .wk-story-copy {
    min-height: 0; overflow: hidden; padding-top: 0; transform: translateY(-6px);
    transition: opacity .2s ease, transform .3s cubic-bezier(.22, .8, .24, 1), padding-top .45s cubic-bezier(.22, .8, .24, 1);
  }
  .is-active > .wk-story-detail .wk-story-copy {
    padding-top: 6px;
    transition: opacity .35s ease .08s, transform .5s cubic-bezier(.22, .8, .24, 1) .05s, padding-top .45s cubic-bezier(.22, .8, .24, 1);
  }
  .wk-architecture .hero-actions { justify-content: center; margin-top: 28px; }
  .wk-architecture .hero-actions .wk-btn { font-size: 14px; padding-inline: 14px; }
  .wk-studio-sequence { margin-top: 0; }
  .wk-screen-stage { width: 90%; }
}

/* Full-height halo fades to white at the hero's lower grid boundary. */
.wk-hero-orbit.is-ready::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: var(--hero-height, 100%); pointer-events: none;
  background: linear-gradient(110deg, #2860e8 0%, #4c74df 24%, #8b68d5 42%, #35bca0 63%, #20b877 83%, #66c995 100%);
  opacity: .12;
  --halo-mask: radial-gradient(circle at var(--orbit-x) var(--orbit-y), rgba(0,0,0,.18) 0, rgba(0,0,0,.35) calc(var(--orbit-radius) - 240px), #000 var(--orbit-radius), rgba(0,0,0,.18) calc(var(--orbit-radius) + 240px), transparent calc(var(--orbit-radius) + 440px));
  --halo-fade: linear-gradient(to bottom, #000 0%, #000 65%, rgba(0,0,0,.7) 82%, rgba(0,0,0,.22) 94%, transparent 100%);
  -webkit-mask-image: var(--halo-mask), var(--halo-fade);
  mask-image: var(--halo-mask), var(--halo-fade);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}