/* ============================================================================
   scrollcraft.css: the taste floor
   ----------------------------------------------------------------------------
   Two layers, and the split matters:

     TOKENS   what you override per brand. Colour roles, the type ramp, the
              spacing scale, elevation, motion. A brand is ~12 values.
     DEVICES  what the engine drives. Do not restyle these to taste; they are
              the mechanism. Style your own markup instead.

   Nothing here draws a "component". There are no card, badge, or pill classes,
   because a stylesheet that ships those is how every page built on it ends up
   with the same shapes. You get a floor and a vocabulary; the composition is
   yours.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* --- colour roles. Override these six and the page is rebranded. -------- */
  --sc-canvas:      #08090b;   /* the page ground. Drift interpolates this.   */
  --sc-surface:     #101217;   /* anything raised off the ground             */
  --sc-ink:         #f4f2ef;   /* primary text                               */
  --sc-ink-soft:    #9a9ba1;   /* secondary text. Tinted, never flat gray.   */
  --sc-accent:      #d8ff3e;   /* ONE accent. It owns a region, not confetti. */
  --sc-accent-ink:  #08090b;   /* text that sits on the accent               */

  --sc-hairline:    color-mix(in oklab, var(--sc-ink) 12%, transparent);
  --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent);

  /* --- type. Two families max. Display carries voice, text carries prose. - */
  --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem
     with 0 tracking reads loose; this is optical correction, not decoration. */
  --sc-t-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --sc-t-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --sc-t-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --sc-t-xl:   clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem);
  --sc-t-2xl:  clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem);
  --sc-t-3xl:  clamp(2.8rem, 1.9rem + 4.2vw, 5rem);
  --sc-t-4xl:  clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem);

  --sc-track-tight:  -0.035em;
  --sc-track-snug:   -0.02em;
  --sc-track-normal: -0.005em;
  --sc-track-wide:    0.08em;

  --sc-leading-none: 0.94;
  --sc-leading-tight: 1.06;
  --sc-leading-body: 1.62;

  --sc-measure: 62ch;

  /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */
  --sc-1: 0.25rem;  --sc-2: 0.5rem;   --sc-3: 0.75rem;  --sc-4: 1rem;
  --sc-5: 1.5rem;   --sc-6: 2rem;     --sc-7: 3rem;     --sc-8: 4rem;
  --sc-9: 6rem;     --sc-10: 8rem;    --sc-11: 12rem;

  /* Section rhythm is fluid so a phone doesn't inherit desktop air. */
  --sc-section: clamp(4.5rem, 9vw, 11rem);
  --sc-gutter:  clamp(1.25rem, 5vw, 5.5rem);
  --sc-maxw:    82rem;

  /* --- radius. Pick one scale for the page and hold it. ------------------- */
  --sc-r-sm: 6px;  --sc-r-md: 12px;  --sc-r-lg: 20px;  --sc-r-pill: 999px;

  /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted
         to the canvas hue. A zero-offset coloured halo is decoration, not
         depth, so there isn't one here. ---------------------------------- */
  --sc-shadow-color: 220 40% 2%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24),
           0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22),
           0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38),
           0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30);

  /* Edge light: a 1px top highlight sells a raised surface better than any
     amount of blur, because real raised things catch light on their lip. */
  --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent);

  /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */
  --sc-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --sc-d-fast: 160ms;  --sc-d-base: 240ms;  --sc-d-slow: 420ms;

  --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60;
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------- the browser surfaces --
   The parts you did not draw still carry the design. Selection, caret, focus
   ring, scrollbar and tabular numerals all ship with defaults that belong to no
   design system. Theming them is the cheapest signal that a page was built
   rather than assembled, and it is the step that gets skipped most reliably. */
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:root { caret-color: var(--sc-accent); accent-color: var(--sc-accent); }
:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: var(--sc-r-sm);
}
:where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: color-mix(in oklab, var(--sc-ink) 26%, transparent) transparent; scrollbar-width: thin; }
}
:where(table, .sc-nums, [data-sc-count]) { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- typography -- */
.sc-display {
  font-family: var(--sc-font-display);
  font-weight: 500;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
  margin: 0;
}
.sc-display--xl { font-size: var(--sc-t-4xl); }
.sc-display--lg { font-size: var(--sc-t-3xl); }
.sc-display--md { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); }
.sc-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.44;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  max-width: 46ch;
  text-wrap: pretty;
  margin: 0;
}
.sc-body { max-width: var(--sc-measure); color: var(--sc-ink-soft); text-wrap: pretty; margin: 0; }
.sc-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* ---------------------------------------------------------------- layout -- */
.sc-wrap { width: 100%; max-width: var(--sc-maxw); margin-inline: auto; padding-inline: var(--sc-gutter); }
.sc-section { padding-block: var(--sc-section); }
/* More space above a heading than below it: the gap belongs to the boundary,
   not to the pair. */
.sc-stack > * + * { margin-top: var(--sc-4); }
.sc-stack > :is(h1,h2,h3) { margin-top: var(--sc-7); }
.sc-stack > :is(h1,h2,h3):first-child { margin-top: 0; }
.sc-rule { height: 1px; border: 0; background: var(--sc-hairline); margin: 0; }

/* =============================================================== DEVICES ==
   Driven by the engine. Restyle your own markup, not these.                */

.sc-act--pinned { position: relative; }
.sc-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: clip;
  z-index: var(--sc-z-stage);
}

/* scrub / sequence media */
.sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip video[data-sc-scrub] { opacity: 1; }
/* The poster is a live frame-holder, not a placeholder: it stays up until a
   real video frame has painted, which is what stops the blank-stage flash. */
.sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); }
.sc-has-clip .sc-stage__poster { opacity: 0; }

/* A scrim only where text sits. A full-frame darkening layer flattens the
   image everywhere to fix contrast in one corner. */
.sc-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(
    var(--sc-scrim-angle, 180deg),
    color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 68%);
}
/* Point the scrim at the copy. A scrim gradient that darkens the top while the
   copy sits at the bottom fixes contrast nowhere and flattens the image
   everywhere, which is the most common way text-over-video goes wrong. */
.sc-scrim--bottom { --sc-scrim-angle: 0deg; }
.sc-scrim--left   { --sc-scrim-angle: 90deg; }
.sc-scrim--right  { --sc-scrim-angle: 270deg; }

/* Corner scrims, for copy anchored to a corner. An edge gradient has to darken
   a whole band across the frame to cover one corner; a corner gradient puts the
   density where the text is and leaves the rest of the image alone. Pair with
   .sc-copy--lead / .sc-copy--trail. */
.sc-scrim--lead {
  background: linear-gradient(to top right,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
.sc-scrim--trail {
  background: linear-gradient(to top left,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%,
    transparent 72%);
}
/* A band across the bottom, for copy that spans the full width of the frame.
   That is what both corner anchors become below 860px, and it is also the right
   shape whenever the copy block is wider than a corner. */
.sc-scrim--band {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
    color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
    transparent 58%);
}
.sc-scrim--vignette {
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%,
              color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%);
}

/* copy over a stage.
   max-width is in rem, never ch. A `ch` on this container resolves against the
   CONTAINER's font-size (body size), not the display size of the heading inside
   it, so `max-width: 20ch` here silently produces a ~180px column and wraps a
   hero headline to six lines. Set a ch measure on the text element itself. */
.sc-copy {
  position: absolute; z-index: var(--sc-z-copy);
  inset-inline: var(--sc-gutter);
  max-width: min(46rem, 76vw);
  will-change: opacity, transform;
}
.sc-copy--lead   { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); }
/* inset-inline FIRST. It is the shorthand for left+right, so declaring it after
   `left: 50%` resets left to auto and the block drifts off the left edge. */
.sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; }
.sc-copy--trail  { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; }

/* cue defaults: the engine writes opacity/transform inline, these are the
   pre-paint state so nothing flashes before the first read() */
[data-sc-cue] { opacity: 0; will-change: opacity, transform; }
.sc-ready [data-sc-cue] { transition: none; }

/* kinetic split */
.sc-split { display: inline-block; overflow: hidden; vertical-align: top; }
/* Descenders live below the baseline; a line mask clipped to the line box eats
   the tails off g, y, p, j. The padding buys them room back. */
.sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.sc-split__i { display: inline-block; will-change: transform, opacity; }
.sc-is-split { opacity: 1 !important; }

/* horizontal rail */
[data-sc-pan] { display: flex; will-change: transform; }

/* reveal + parallax */
[data-sc-reveal] { will-change: clip-path; }
[data-sc-parallax] { will-change: transform; }

/* flow reveal (fires once) */
[data-sc-in], [data-sc-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
[data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; }

/* pointer devices */
[data-sc-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-sc-magnet] { will-change: transform; }
/* isolation always; position only if nothing more specific already set it.
   Written with :where() (zero specificity) on purpose: a plain `position:
   relative` here has the same weight as `.sc-stage` and, being later in the
   file, silently wins. A stage carrying both attributes then stops being
   sticky and the whole act scrolls away instead of pinning. */
[data-sc-spotlight] { isolation: isolate; }
:where([data-sc-spotlight]) { position: relative; }
[data-sc-spotlight]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(
    28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%),
    color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
[data-sc-spotlight]:hover::after { opacity: 1; }

/* =========================================================== WORLDFLIGHT ==
   One fixed stage for the whole page. The only thing in document flow is the
   spacer, and it is empty. If you find yourself adding a section here, you want
   act mode instead: the moment a real block scrolls past the fixed stage, the
   page has a seam again and the whole point is gone.                        */

[data-sc-mode="worldflight"] { position: relative; }

.sc-world {
  position: fixed; inset: 0;
  overflow: clip;
  z-index: var(--sc-z-stage);
  background: var(--sc-canvas);
}

/* Every leg is mounted for the life of the page and stacked in the same box.
   The engine owns opacity, visibility and z-index here; do not set them. */
.sc-world__seg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: opacity;
}
.sc-world__seg > :is(video, img, canvas) {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* The poster is the frame-holder AND the first camera move: the engine pushes
   it in slowly until a real decoded frame is available to replace it. */
.sc-world__poster {
  z-index: 0;
  transform-origin: 50% 50%;
  transition: opacity 420ms var(--sc-ease-out);
}
.sc-world__seg > video { z-index: 1; }
.sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; }
/* The act stylesheet lights a clip through its ancestor act. A worldflight leg
   has no act, so match the class the engine also writes on the clip itself. */
video[data-sc-scrub].sc-has-clip { opacity: 1; }

/* The copy layer is fixed too, and inert by default: the engine hands
   pointer-events back to a block only while it is actually legible. */
.sc-world__copy {
  position: fixed; inset: 0;
  z-index: var(--sc-z-copy);
  pointer-events: none;
}
.sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-sc-copy] {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sc-ready [data-sc-copy] { transition: none; }

/* The track. Empty on purpose. */
.sc-world__spacer { pointer-events: none; }

/* scroll progress */
[data-sc-progress] {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome);
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0);
  will-change: transform;
}

/* ----------------------------------------------------------- atmosphere --
   Depth is not only shadow. Grain keeps a flat dark ground from banding, and
   it is the difference between "a dark page" and "a lit room". */
.sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; }
.sc-grain::before {
  content: ""; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

/* -------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not zero. Opacity still carries the reveal so the page
     is comprehensible; every position change is dropped. */
  [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; }
  [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; }
  /* A wipe is a position change too. Show reveal content settled. */
  [data-sc-reveal] { clip-path: none !important; }
  /* A rail's transform IS its navigation, not decoration. Zeroing it the way
     parallax and kinetic type are zeroed parks the act on its first screenful
     and makes everything past the fold unreachable: a device degrading into
     missing content. Hand the travel back to the reader as an ordinary scroll
     region instead, so the same items are all still gettable without motion.
     A build that would rather re-lay the rail out as a grid can still do that;
     this is the floor, not the ceiling. */
  [data-sc-act="pan"] .sc-stage,
  [data-sc-act="pan"] [data-sc-stage] {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }
  [data-sc-pan] > * { scroll-snap-align: center; }
  [data-sc-spotlight]::after { display: none; }
  /* A worldflight keeps its whole story here. No clip is ever fetched, so the
     posters are the film, and they cross-dissolve through exactly the same
     seams at exactly the same scroll positions. The push-in and the copy drift
     are the only things that go. */
  .sc-world__poster, [data-sc-copy] { transform: none !important; }
}

/* --------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  .sc-copy { inset-inline: var(--sc-gutter); max-width: none; }
  .sc-copy--trail { text-align: left; }
  .sc-stage { height: 100svh; }
  /* .sc-copy--trail re-anchors to the left and spans the full width here, so a
     bottom-RIGHT corner gradient darkens the one corner the copy just left and
     guarantees a contrast failure over any bright clip. Point the density at
     the copy: the same band .sc-scrim--band paints. */
  .sc-scrim--trail {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%,
      transparent 58%);
  }
}

@font-face {
  font-family: Manrope;
  src: url('/marketing/fonts/Manrope.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
.enhancement-error {
  background: #17251f;
  color: white;
  padding: 12px 24px;
  font-size: 12px;
  max-width: none;
}
.motion-toggle {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  min-height: 32px;
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}
html.motion-reduced {
  scroll-behavior: auto;
}
.motion-reduced *,
.motion-reduced *::before,
.motion-reduced *::after {
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}
:root {
  --sc-canvas: #f7f7f2;
  --sc-surface: #eeeee7;
  --sc-ink: #17251f;
  --sc-ink-soft: #58615c;
  --sc-accent: #294cff;
  --sc-accent-ink: #fff;
  --sc-font-display: Manrope, Arial, sans-serif;
  --sc-font-text: Manrope, Arial, sans-serif;
  --sc-font-mono: Manrope, Arial, sans-serif;
  --gutter: clamp(24px, 5vw, 80px);
  --rule: #d4d9d1;
  --radius: 8px;
}
html {
  scroll-padding-top: 32px;
}
body {
  font-size: 16px;
  line-height: 1.65;
}
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  font-weight: 500;
  letter-spacing: -0.052em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 {
  font-size: clamp(54px, 6.3vw, 94px);
  font-weight: 500;
}
h2 {
  font-size: clamp(34px, 4vw, 58px);
}
h3 {
  font-size: clamp(27px, 2.4vw, 38px);
}
h4 {
  font-size: 30px;
}
p {
  max-width: 64ch;
}
a {
  text-decoration: none;
}
button,
summary,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
a,
summary {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline-offset: 6px;
}
button:disabled {
  cursor: default;
}
img {
  height: auto;
}
ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}
input,
select,
textarea {
  min-width: 0;
}
textarea {
  resize: vertical;
}
.wrap {
  width: calc(100% - var(--gutter) * 2);
  max-width: 1380px;
  margin-inline: auto;
}
.section {
  padding-block: 112px;
}
.section-heading {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 60px;
}
.section-heading > p,
.section-heading > div > p {
  font-size: 18px;
  color: var(--sc-ink-soft);
  max-width: 43ch;
}
.section-heading .text-link {
  margin-top: 22px;
}
.eyebrow {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.03em;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc-accent);
  display: inline-block;
  flex-shrink: 0;
}
.hero-lede {
  font-size: 19px;
  line-height: 1.6;
  letter-spacing: -0.02em;
  max-width: 39ch;
  margin-top: 26px;
  color: var(--sc-ink-soft);
}
.hero-actions {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 32px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 54px;
  padding: 14px 23px;
  background: var(--sc-accent);
  color: white;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.4;
  transition:
    background-color 0.18s,
    transform 0.18s;
}
.button:hover {
  background: #193bd7;
}
.button:active {
  transform: translateY(1px);
}
.button:disabled {
  opacity: 0.55;
}
.button-small {
  min-height: 44px;
  padding: 10px 19px;
  gap: 25px;
}
.button-light {
  background: white;
  color: var(--sc-ink);
}
.button-light:hover {
  background: var(--sc-surface);
}
.text-link {
  display: inline-flex;
  gap: 24px;
  align-items: center;
  font-size: 14px;
  font-weight: 650;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 5px;
  line-height: 1.5;
  min-height: 38px;
}
.text-link:hover {
  color: var(--sc-accent);
  border-color: currentColor;
}
.arrow {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s;
}
a:hover .arrow,
button:hover .arrow {
  transform: translate(2px, -2px);
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 12px 20px;
  color: white;
  background: var(--sc-ink);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: none;
}
.site-header {
  position: relative;
  z-index: 80;
  border-bottom: 1px solid var(--rule);
  background: var(--sc-canvas);
}
.header-inner {
  height: 90px;
  display: flex;
  gap: 32px;
  align-items: center;
  width: calc(100% - var(--gutter) * 2);
  max-width: 1380px;
  margin: auto;
}
.wordmark {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.07em;
  white-space: nowrap;
}
.wordmark > span {
  color: var(--sc-accent);
}
.desktop-nav {
  display: flex;
  gap: 32px;
  align-items: center;
  margin-left: auto;
  margin-right: 32px;
  font-size: 13px;
  font-weight: 600;
}
.desktop-nav > a {
  padding-block: 18px;
}
.desktop-nav > a:hover,
.desktop-nav [aria-current='page'] {
  color: var(--sc-accent);
}
summary {
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}
.services-menu > summary {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-block: 18px;
}
.services-menu[open] > summary > span {
  rotate: 45deg;
}
.services-dropdown {
  position: absolute;
  top: 89px;
  left: 0;
  width: 100%;
  background: var(--sc-canvas);
  border-bottom: 1px solid var(--rule);
  padding: 25px var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  box-shadow: 0 20px 30px #17251f0a;
}
.services-dropdown a {
  display: grid;
  grid-template-columns: 1fr 24px;
  gap: 9px 20px;
  padding: 12px 0;
  align-content: start;
}
.services-dropdown a strong {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.services-dropdown a > span:not(.arrow) {
  grid-row: 2;
  max-width: 22ch;
  color: var(--sc-ink-soft);
  font-size: 13px;
}
.services-dropdown .arrow {
  grid-row: 1;
  grid-column: 2;
}
.services-dropdown a:hover {
  color: var(--sc-accent);
}
.mobile-menu {
  display: none;
}
/* The opening gives each real project one quiet, upright stage. */
.home-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  position: relative;
  padding-top: 64px;
  min-height: 720px;
  align-items: center;
  column-gap: 5%;
}
.hero-copy {
  position: relative;
  padding-bottom: 24px;
}
.home-hero h1 {
  font-size: clamp(56px, 6.05vw, 94px);
  letter-spacing: -0.063em;
  line-height: 1.05;
}
.home-hero h1 > span {
  color: var(--sc-accent);
  white-space: nowrap;
}
.home-hero .hero-lede {
  max-width: 35ch;
}
.featured-work {
  min-width: 0;
  align-self: center;
}
.featured-controls {
  min-height: 66px;
}
.featured-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.featured-tabs[hidden],
.featured-panel[hidden] {
  display: none;
}
.featured-tabs button {
  position: relative;
  border: 0;
  background: none;
  color: var(--sc-ink-soft);
  padding: 10px 0 14px;
  min-height: 44px;
  min-width: 44px;
  font-size: 13px;
  font-weight: 600;
}
.featured-tabs button[aria-selected="true"] {
  color: var(--sc-ink);
}
.featured-tabs button[aria-selected="true"]::after {
  content: '';
  position: absolute;
  height: 2px;
  background: var(--sc-accent);
  bottom: -1px;
  left: 0;
  right: 0;
}
.featured-tabs button:hover {
  color: var(--sc-accent);
}
.featured-link {
  display: block;
}
.featured-media {
  aspect-ratio: 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  overflow: hidden;
}
.featured-media-schoolops {
  background: #e6eadf;
}
.featured-media-markly {
  background: #e3e9e5;
}
.featured-media-bene {
  background: #e1e9ef;
}
.featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px #17251f0d);
}
.featured-caption {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px;
  padding-top: 20px;
  min-height: 84px;
}
.featured-caption h2 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.featured-caption p {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sc-ink-soft);
}
.featured-caption .arrow {
  font-size: 25px;
  line-height: 1;
}
.featured-link:hover .featured-caption h2,
.featured-link:hover .featured-caption .arrow {
  color: var(--sc-accent);
}
.featured-status {
  font-size: 10px;
  line-height: 1.5;
  color: var(--sc-ink-soft);
  margin-top: 5px;
}
.hero-bottom {
  grid-column: 1/-1;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding: 24px 0;
  margin-top: 30px;
  align-self: end;
}
.hero-bottom > a {
  display: flex;
  gap: 30px;
  align-items: center;
}
.hero-bottom .arrow {
  font-size: 17px;
}
.arms-section {
  padding-block: 115px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 9vw;
}
.arms-intro p {
  color: var(--sc-ink-soft);
  margin-top: 27px;
  font-size: 16px;
}
.arm-list > a {
  padding: 30px 0;
  border-top: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.arm-list > a:last-child {
  border-bottom: 1px solid var(--rule);
}
.arm-category {
  display: block;
  font-size: 11px;
  color: var(--sc-ink-soft);
  margin-bottom: 10px;
}
.arm-list h3 {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.035em;
}
.arm-list p {
  font-size: 14px;
  color: var(--sc-ink-soft);
  margin-top: 8px;
}
.arm-list .arrow {
  font-size: 29px;
}
.arm-list > a:hover h3 {
  color: var(--sc-accent);
}
.quiet-statement {
  border-top: 1px solid var(--rule);
  padding-block: 70px 110px;
}
.quiet-statement > p {
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.18;
  letter-spacing: -0.055em;
  max-width: 900px;
  margin-left: 24%;
}
.quiet-statement > p > span:last-child {
  color: var(--sc-ink-soft);
}
.explorer-section {
  padding: 100px 0 110px;
  background: var(--sc-ink);
  color: white;
}
.explorer-section .section-heading > p {
  color: #c1c9c4;
}
.explorer {
  border: 1px solid #617068;
  border-radius: 8px;
  overflow: hidden;
}
.explorer-tabs {
  display: flex;
  border-bottom: 1px solid #617068;
  padding-inline: 28px;
  gap: 34px;
}
.explorer-tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #bac5be;
  padding: 22px 0 18px;
  font-size: 14px;
  font-weight: 600;
}
.explorer-tabs button[aria-selected='true'] {
  color: white;
  border-color: #fff;
}
.explorer-tabs button:hover {
  color: #fff;
}
.explorer-meta {
  display: flex;
  justify-content: space-between;
  padding: 22px 35px;
  color: #b6c1ba;
  font-size: 11px;
}
.explorer-meta > span:first-child {
  display: flex;
  gap: 9px;
  align-items: center;
}
.explorer-meta i {
  height: 6px;
  width: 6px;
  background: #fff;
  border-radius: 50%;
}
.explorer-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  padding: 30px 6% 50px;
  min-height: 405px;
}
.explorer-panel[hidden] {
  display: none;
}
.explorer h3 {
  font-size: 39px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  margin: 14px 0 25px;
}
.demo-input > p:not(.demo-label) {
  color: #c1c9c4;
  font-size: 14px;
  margin-top: 17px;
  max-width: 39ch;
}
.demo-label {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
}
.demo-input > .demo-label {
  color: #c1c9c4;
}
.demo-input fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.demo-input legend {
  font-size: 12px;
  color: #c1c9c4;
  margin-bottom: 10px;
}
.radio-choice {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 40px;
  cursor: pointer;
  font-size: 14px;
}
.radio-choice input {
  appearance: none;
  width: 17px;
  height: 17px;
  border: 1px solid #a5b2aa;
  border-radius: 50%;
  margin: 0;
}
.radio-choice input:checked {
  border: 5px solid white;
}
.demo-output {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  border-radius: 6px;
  padding: 30px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.demo-output > .demo-label {
  color: var(--sc-ink-soft);
  margin-bottom: 22px;
}
.demo-output h4 {
  max-width: 17ch;
  font-size: 30px;
  margin-bottom: 24px;
}
.demo-output > p:not(.demo-label) {
  font-size: 12px;
  color: var(--sc-ink-soft);
  margin-top: 20px;
  line-height: 1.55;
}
.plan-list {
  counter-reset: plan;
}
.plan-list li {
  font-size: 13px;
  padding-block: 10px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 18px;
  align-items: center;
  counter-increment: plan;
}
.plan-list li::before {
  content: counter(plan, decimal-leading-zero);
  font-size: 10px;
  color: var(--sc-accent);
}
.explorer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #617068;
  padding: 24px 35px;
}
.explorer-bottom .text-link {
  color: white;
  border-color: #617068;
}
.quantity-list {
  margin-top: 16px;
}
.quantity-list label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #617068;
  padding: 9px 0;
  font-size: 13px;
}
.quantity-list input {
  width: 54px;
  border: 1px solid #617068;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  padding: 5px;
  margin-right: 7px;
}
.quantity-list label > span {
  font-size: 11px;
  color: #c1c9c4;
  white-space: nowrap;
}
.order-summary li {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
}
.demo-output .button {
  margin-top: 20px;
  font-size: 12px;
  gap: 15px;
  align-self: start;
}
.demo-input blockquote {
  border-left: 2px solid #b6c1ba;
  padding: 6px 0 6px 20px;
  font-size: 19px;
  line-height: 1.6;
  max-width: 30ch;
}
.demo-output textarea {
  background: white;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px;
  font-size: 14px;
  line-height: 1.6;
  width: 100%;
  min-height: 128px;
}
.demo-buttons {
  display: flex;
  align-items: center;
  gap: 25px;
}
.text-button {
  border: 0;
  background: none;
  text-decoration: underline;
  font-size: 12px;
  padding: 12px 0;
  margin-top: 20px;
}
.demo-input select {
  width: 100%;
  border: 1px solid #617068;
  background: var(--sc-ink);
  color: white;
  padding: 12px;
  border-radius: 4px;
  margin-top: 12px;
  font-size: 14px;
}
.demo-input > label {
  font-size: 12px;
}
.stage-track {
  display: flex;
  gap: 10px;
  margin-top: 35px;
}
.stage-track span {
  font-size: 10px;
  padding-top: 10px;
  border-top: 3px solid var(--rule);
  flex: 1;
}
.stage-track span.active {
  border-color: var(--sc-accent);
  color: var(--sc-accent);
}
.no-script {
  padding: 18px 30px;
}
.selected-work {
  padding-block: 112px;
}
.work-pair {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
}
.work-school {
  margin-top: 90px;
}
.work-image {
  position: relative;
  height: 380px;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sc-surface);
  padding: 40px 28px;
  overflow: hidden;
  border-radius: 5px;
}
.work-bene .work-image {
  background: #e4e9e1;
}
.work-school .work-image {
  background: #e6e9f1;
}
.work-image img {
  border-radius: 3px;
  box-shadow: 0 15px 35px #17251f14;
  width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.work-school .work-image img {
  width: auto;
  object-fit: contain;
}
.work-label {
  display: grid;
  grid-template-columns: 1fr 25px;
  gap: 8px;
  padding-top: 25px;
}
.work-label h3 {
  font-size: 27px;
}
.work-label p {
  grid-column: 1;
  font-size: 12px;
  color: var(--sc-ink-soft);
}
.work-label .arrow {
  grid-column: 2;
  grid-row: 1;
}
.image-note {
  position: absolute;
  bottom: 15px;
  right: 18px;
  font-size: 10px;
  color: var(--sc-ink-soft);
  background: var(--sc-canvas);
  padding: 4px 8px;
  border-radius: 3px;
}
.closing {
  background: var(--sc-accent);
  color: white;
  padding: 95px 0;
}
.closing-inner {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 8%;
  align-items: end;
}
.closing h2 {
  font-size: clamp(44px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.055em;
}
.closing p {
  font-size: 17px;
  line-height: 1.6;
  max-width: 34ch;
  margin-bottom: 28px;
  color: #edf0ff;
}
.closing .button {
  background: #fff;
  color: var(--sc-ink);
}
.closing .button:hover {
  background: var(--sc-surface);
}
.closing :focus-visible,
.ink-section :focus-visible,
.explorer :focus-visible {
  outline-color: currentColor;
}
.site-footer {
  background: var(--sc-ink);
  color: #f7f7f2;
  padding: 64px 0 28px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
  padding-bottom: 58px;
  align-items: center;
}
.footer-top .wordmark {
  font-size: 52px;
}
.footer-top .wordmark > span {
  color: #fff;
}
.footer-top > p {
  font-size: 15px;
  line-height: 1.55;
  color: #c1c9c4;
}
.footer-top > .text-link {
  justify-self: end;
  border-color: #617068;
  font-size: 16px;
}
.footer-top > .text-link:hover {
  color: white;
}
.footer-directory {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 60px;
}
.footer-directory h2 {
  font-size: 11px;
  line-height: 1.5;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: #a5b2aa;
  margin-bottom: 18px;
}
.footer-directory a {
  display: block;
  font-size: 12px;
  padding: 5px 0;
  color: #edf0eb;
  width: fit-content;
}
.footer-directory a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.footer-directory p {
  font-size: 12px;
  color: #a5b2aa;
  margin-top: 14px;
}
.footer-directory .arrow {
  font-size: 13px;
}
.footer-bottom {
  border-top: 1px solid #47574d;
  padding-top: 24px;
  display: flex;
  gap: 30px;
  justify-content: space-between;
  color: #a5b2aa;
  font-size: 10px;
}
.footer-bottom p > span {
  margin-left: 15px;
}
.site-footer :focus-visible {
  outline-color: #fff;
}
.service-hero {
  padding-top: 64px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 8%;
  min-height: 650px;
}
.breadcrumb {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--sc-ink-soft);
  margin-bottom: 36px;
}
.breadcrumb a:hover {
  color: var(--sc-accent);
}
.availability {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  color: var(--sc-ink-soft);
}
.service-art {
  min-width: 0;
  position: relative;
}
.bene-exhibit {
  background: var(--sc-surface);
  padding: 40px 24px 24px;
  box-shadow: 16px 16px 0 var(--sc-accent);
  rotate: -3deg;
  border-radius: 5px;
}
.bene-exhibit > img {
  box-shadow: 0 12px 24px #17251f20;
  border-radius: 3px;
}
.bene-exhibit figcaption {
  font-size: 10px;
  margin-top: 16px;
}
.workflow-figure {
  padding: 35px 32px;
  background: var(--sc-surface);
  border: 1px solid var(--rule);
  box-shadow: 14px 14px 0 #e0e5dc;
  border-radius: 5px;
}
.workflow-figure figcaption {
  font-size: 12px;
  color: var(--sc-ink-soft);
  margin-bottom: 32px;
}
.workflow-figure ol {
  position: relative;
}
.workflow-figure ol:before {
  content: '';
  position: absolute;
  top: 15px;
  bottom: 18px;
  left: 17px;
  width: 1px;
  background: #bec7bd;
}
.workflow-figure li {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 16px;
  line-height: 1.4;
  position: relative;
  padding: 14px 0;
}
.workflow-dot {
  height: 36px;
  width: 36px;
  flex: 0 0 36px;
  display: grid;
  place-content: center;
  background: var(--sc-canvas);
  border: 1px solid #bec7bd;
  color: var(--sc-accent);
  border-radius: 50%;
  font-size: 20px;
  z-index: 1;
}
.workflow-figure li:last-child .workflow-dot {
  background: var(--sc-accent);
  color: white;
  border-color: var(--sc-accent);
}
.workflow-figure > p {
  font-size: 11px;
  color: var(--sc-ink-soft);
  margin-top: 27px;
  max-width: 40ch;
}
.offering-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  border-top: 1px solid var(--rule);
}
.offering {
  padding: 42px 0 25px;
}
.outline-icon {
  display: block;
  font-size: 48px;
  color: var(--sc-accent);
  line-height: 1;
  margin-bottom: 28px;
}
.offering p {
  color: var(--sc-ink-soft);
  font-size: 17px;
  margin: 22px 0;
  max-width: 35ch;
}
.inline-list {
  border-top: 1px solid var(--rule);
  padding: 20px 0;
  font-size: 13px;
}
.inline-list li {
  padding: 6px 0;
}
.offering .text-link {
  margin-top: 15px;
}
.split-story {
  padding-block: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12%;
  align-items: start;
}
.split-story .prose {
  max-width: 58ch;
}
.prose p {
  font-size: 17px;
  color: var(--sc-ink-soft);
  margin-bottom: 24px;
}
.prose .text-link {
  margin-top: 14px;
  margin-right: 20px;
}
.large-copy {
  font-size: 25px;
  letter-spacing: -0.03em;
  line-height: 1.45;
  max-width: 25ch;
  margin-top: 25px;
}
.proof-strip {
  border-top: 1px solid var(--rule);
  padding-block: 60px 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 12%;
  align-items: start;
}
.proof-strip > span {
  font-size: 11px;
  color: var(--sc-ink-soft);
}
.proof-strip > h2 {
  grid-column: 1;
  grid-row: 2;
}
.proof-strip > p {
  grid-column: 2;
  grid-row: 1/3;
  font-size: 17px;
  color: var(--sc-ink-soft);
  max-width: 50ch;
}
.proof-strip > .text-link {
  grid-column: 2;
  width: fit-content;
}
.service-rows > a {
  display: grid;
  grid-template-columns: 1.1fr 1fr 30px;
  gap: 6%;
  align-items: center;
  border-top: 1px solid var(--rule);
  padding: 34px 0;
}
.service-rows > a:last-child {
  border-bottom: 1px solid var(--rule);
}
.service-rows h3 {
  font-size: 29px;
  line-height: 1.2;
}
.service-rows p {
  font-size: 15px;
  color: var(--sc-ink-soft);
  max-width: 36ch;
}
.service-rows a:hover h3 {
  color: var(--sc-accent);
}
.ink-section {
  background: var(--sc-ink);
  color: #fff;
  padding: 30px 0;
}
.ink-section p {
  color: #c1c9c4;
}
.ink-section .text-link {
  border-color: #617068;
}
.ink-section .text-link:hover {
  color: white;
}
.project-links {
  display: flex;
  gap: 55px;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
}
.project-link {
  display: flex;
  gap: 40px;
  font-size: 18px;
  font-weight: 500;
}
.project-link:hover {
  color: var(--sc-accent);
}
.product-spread {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 7%;
  align-items: center;
  padding: 60px 0;
  border-top: 1px solid var(--rule);
}
.product-spread.reverse {
  grid-template-columns: 1.2fr 0.8fr;
}
.product-spread.reverse > div {
  grid-column: 2;
  grid-row: 1;
}
.product-spread.reverse > figure {
  grid-column: 1;
  grid-row: 1;
}
.product-spread h3 {
  font-size: 45px;
  margin: 15px 0 24px;
}
.product-spread p {
  font-size: 16px;
  color: var(--sc-ink-soft);
  margin: 20px 0;
  max-width: 40ch;
}
.product-spread .small-copy {
  font-size: 12px;
  margin-bottom: 25px;
}
.product-status {
  font-size: 11px;
  color: var(--sc-ink-soft);
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
}
.product-figure {
  margin: 0;
  background: #e9ede6;
  border-radius: 6px;
  padding: 28px 28px 15px;
  min-width: 0;
}
.product-figure img {
  width: 100%;
  box-shadow: 0 12px 30px #17251f14;
  border-radius: 4px;
}
.product-figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 10px;
  color: var(--sc-ink-soft);
  margin-top: 17px;
  align-items: center;
}
.product-figure .arrow {
  font-size: 13px;
}
.education-stack {
  position: relative;
  height: 410px;
}
.education-plane {
  position: absolute;
  background: var(--sc-accent);
  color: white;
  inset: 0 0 70px 50px;
  rotate: 7deg;
  padding: 25px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.055em;
  border-radius: 6px;
}
.education-stack img {
  position: absolute;
  left: 0;
  top: 110px;
  width: 85%;
  max-height: 270px;
  object-fit: cover;
  object-position: top;
  border: 6px solid white;
  border-radius: 5px;
  box-shadow: 0 16px 36px #17251f26;
  rotate: -6deg;
}
.education-stack > span {
  position: absolute;
  bottom: 0;
  font-size: 10px;
  right: 0;
}
.mini-product {
  rotate: 3deg;
  box-shadow: 14px 14px 0 var(--sc-accent);
  border-radius: 6px;
}
.mini-product .product-figure {
  padding: 15px 15px 10px;
}
.mini-product figcaption span:last-child {
  display: none;
}
.paper-section {
  background: var(--sc-surface);
}
.capability-list {
  margin-top: 55px;
}
.capability-list > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  padding: 28px 0;
  border-top: 1px solid #cbd2c7;
}
.capability-list dt {
  font-size: 23px;
  letter-spacing: -0.04em;
  line-height: 1.35;
}
.capability-list dd {
  font-size: 16px;
  color: var(--sc-ink-soft);
  max-width: 53ch;
}
.wide-exhibit {
  background: #e4e9e1;
  padding: 50px;
  border-radius: 5px;
}
.wide-exhibit img {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 18px 40px #17251f20;
}
.wide-exhibit figcaption {
  margin-top: 22px;
  font-size: 11px;
  color: var(--sc-ink-soft);
}
.mobile-concept {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.mobile-concept:before {
  content: '';
  position: absolute;
  inset: 40px 20px 90px;
  background: var(--sc-surface);
  border-radius: 50%;
  z-index: -1;
}
.phone-outline {
  width: 235px;
  border: 2px solid var(--sc-ink);
  border-radius: 32px;
  padding: 18px 22px 14px;
  background: var(--sc-canvas);
  box-shadow: 20px 20px 0 #e0e5dc;
  rotate: 7deg;
}
.phone-speaker {
  display: block;
  margin: 0 auto 32px;
  width: 65px;
  height: 5px;
  background: var(--sc-ink);
  border-radius: 8px;
}
.phone-outline > p {
  font-size: 12px;
  margin-bottom: 20px;
  color: var(--sc-ink-soft);
}
.phone-outline li {
  font-size: 21px;
  letter-spacing: -0.05em;
  line-height: 1.2;
  border-top: 1px solid var(--rule);
  padding: 16px 0;
}
.phone-outline li > span {
  display: block;
  font-size: 10px;
  color: var(--sc-accent);
  letter-spacing: 0;
  margin-bottom: 6px;
}
.phone-home {
  display: block;
  margin: 24px auto 0;
  width: 65px;
  height: 3px;
  background: var(--sc-ink);
  border-radius: 8px;
}
.mobile-concept figcaption {
  font-size: 10px;
  margin-top: 35px;
  color: var(--sc-ink-soft);
}
.brief-list {
  margin-top: 45px;
  border-top: 1px solid var(--rule);
  max-width: 850px;
}
.brief-list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 20px;
  letter-spacing: -0.03em;
  display: flex;
  gap: 20px;
  align-items: center;
}
.brief-list li:before {
  content: '+';
  font-size: 20px;
  color: var(--sc-accent);
}
.small-copy {
  font-size: 12px;
  color: var(--sc-ink-soft);
  margin-top: 24px;
  max-width: 65ch;
}
.system-matrix {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  border-block: 1px solid var(--rule);
  padding-block: 40px;
}
.system-matrix h3 {
  margin-bottom: 30px;
}
.system-matrix li {
  font-size: 16px;
  color: var(--sc-ink-soft);
  padding: 10px 0;
}
.process-list {
  counter-reset: process;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.process-list > li {
  counter-increment: process;
  border-top: 1px solid #c7cec4;
  padding-top: 20px;
}
.process-list > li:before {
  content: counter(process, decimal-leading-zero);
  color: var(--sc-accent);
  font-size: 12px;
  display: block;
  margin-bottom: 35px;
}
.process-list h3 {
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}
.process-list p {
  font-size: 14px;
  color: var(--sc-ink-soft);
}
.title-page {
  padding-top: 70px;
  padding-bottom: 70px;
}
.title-page h1 {
  max-width: 1000px;
}
.title-page .hero-lede {
  max-width: 48ch;
}
.work-index {
  padding-bottom: 100px;
}
.featured-project {
  display: block;
  margin-bottom: 70px;
}
.work-index-media {
  padding: 45px 70px;
  position: relative;
  overflow: hidden;
  border-radius: 5px;
}
.bene-ground {
  background: #e4e9e1;
}
.school-ground {
  background: #e6e9f1;
}
.work-index-media img {
  width: 100%;
  box-shadow: 0 16px 40px #17251f24;
  border-radius: 4px;
}
.school-ground img {
  max-height: 480px;
  width: auto;
  margin: auto;
}
.work-index-caption {
  display: grid;
  grid-template-columns: 1fr 1fr 30px;
  gap: 40px;
  align-items: start;
  padding-top: 30px;
}
.work-index-caption h2 {
  font-size: 35px;
}
.work-index-caption p {
  font-size: 15px;
  color: var(--sc-ink-soft);
  margin-top: 9px;
}
.work-index-caption > span:not(.arrow) {
  font-size: 12px;
  color: var(--sc-ink-soft);
  justify-self: end;
  padding-top: 9px;
}
.leads-project-art {
  background: var(--sc-accent);
  color: white;
  min-height: 365px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 50px 40px;
  gap: 45px;
}
.leads-art-name {
  font-size: clamp(38px, 7vw, 92px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.075em;
}
.leads-art-name > span {
  color: #cbd4ff;
}
.leads-art-flow {
  display: flex;
  gap: 20px;
  align-items: center;
}
.leads-art-flow > span {
  border: 1px solid #a5b5ff;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 14px;
}
.leads-art-flow i {
  font-style: normal;
}
.leads-project-art > p {
  font-size: 11px;
  color: #e3e8ff;
}
.case-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  border-top: 1px solid var(--rule);
  padding: 25px 0 45px;
}
.case-meta dt {
  font-size: 10px;
  color: var(--sc-ink-soft);
  margin-bottom: 10px;
}
.case-meta dd {
  font-size: 14px;
  line-height: 1.5;
}
.case-image .product-figure {
  padding: 40px 80px 20px;
}
.case-image img {
  max-height: 650px;
  width: auto;
  margin: auto;
}
.case-image .product-figure > a {
  display: block;
}
.method > ol > li {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 10%;
  padding: 55px 0 65px;
  border-top: 1px solid var(--rule);
}
.step-number {
  font-size: 60px;
  letter-spacing: -0.07em;
  color: var(--sc-accent);
  line-height: 1.1;
}
.method h2 {
  font-size: 42px;
  margin-bottom: 25px;
}
.method li p {
  font-size: 17px;
  color: var(--sc-ink-soft);
  max-width: 55ch;
}
.method dl {
  margin-top: 30px;
  border-left: 2px solid var(--sc-accent);
  padding-left: 20px;
}
.method dt {
  font-size: 10px;
  color: var(--sc-ink-soft);
  margin-bottom: 6px;
}
.method dd {
  font-size: 14px;
  max-width: 60ch;
}
.studio-plate {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
  padding: 60px;
  background: var(--sc-surface);
  border-radius: 5px;
}
.studio-plate > p {
  font-size: clamp(42px, 6.5vw, 90px);
  line-height: 1.05;
  letter-spacing: -0.06em;
}
.studio-plate > p > span {
  color: var(--sc-accent);
}
.studio-plate > div {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 35px;
}
.studio-plate > div > p {
  font-size: 12px;
}
.giant-plus {
  font-size: 150px;
  color: var(--sc-accent);
  font-weight: 400;
  line-height: 0.7;
}
.company-details {
  padding: 90px 0;
}
.company-details h2 {
  font-size: 30px;
  margin-bottom: 40px;
}
.company-details dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}
.company-details dt {
  font-size: 11px;
  color: var(--sc-ink-soft);
  margin-bottom: 15px;
}
.company-details dd {
  font-size: 16px;
}
.faq-page {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 12%;
  padding-bottom: 90px;
  align-items: start;
}
.faq-index {
  position: sticky;
  top: 30px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.faq-index a {
  padding: 9px 0;
  font-size: 13px;
  color: var(--sc-ink-soft);
  width: fit-content;
}
.faq-index a:hover {
  color: var(--sc-accent);
}
.faq-group {
  margin-bottom: 45px;
  scroll-margin-top: 30px;
}
.faq-group h2 {
  font-size: 25px;
  margin-bottom: 25px;
}
.faq-list details {
  border-top: 1px solid var(--rule);
  padding: 20px 0;
}
.faq-list details:last-child {
  border-bottom: 1px solid var(--rule);
}
.faq-list summary {
  font-size: 17px;
  line-height: 1.5;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 25px;
  font-weight: 500;
}
.faq-list summary:after {
  content: '+';
  color: var(--sc-accent);
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.faq-list details[open] > summary:after {
  content: '−';
}
.faq-list details p {
  font-size: 15px;
  color: var(--sc-ink-soft);
  line-height: 1.8;
  margin: 20px 35px 0 0;
  max-width: 56ch;
}
.faq-list p > a {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.legal-prose {
  max-width: 780px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.85;
}
.legal-prose section {
  margin-top: 42px;
}
.legal-prose h2 {
  font-size: 25px;
  line-height: 1.35;
  margin-bottom: 18px;
}
.legal-prose ul {
  list-style: disc;
  padding-left: 25px;
  margin-block: 15px;
}
.legal-prose li {
  margin-block: 8px;
}
.legal-after {
  margin-top: 18px;
}
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
  padding-block: 75px 110px;
  align-items: start;
}
.contact-intro h1 {
  font-size: clamp(56px, 6vw, 88px);
}
.contact-direct {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 9px;
}
.contact-direct > p {
  font-size: 12px;
  color: var(--sc-ink-soft);
  margin-bottom: 9px;
}
.contact-direct > a:first-of-type {
  font-size: 22px;
  letter-spacing: -0.03em;
}
.contact-direct > a:last-of-type {
  font-size: 15px;
  color: var(--sc-ink-soft);
}
.contact-expectation {
  font-size: 13px;
  color: var(--sc-ink-soft);
  margin-top: 40px;
  max-width: 41ch;
}
.enquiry-form {
  background: #fff;
  padding: 35px;
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.enquiry-form h2 {
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.035em;
  margin-bottom: 30px;
}
.enquiry-form label:not(.consent) {
  display: block;
  font-size: 12px;
  font-weight: 550;
  margin-bottom: 22px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.enquiry-form input:not([type='checkbox']),
.enquiry-form select,
.enquiry-form textarea {
  display: block;
  width: 100%;
  background: #fafbf8;
  border: 1px solid #c9d0c5;
  border-radius: 3px;
  padding: 11px 12px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  min-height: 45px;
}
.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
}
.enquiry-form [aria-invalid='true'] {
  border-color: #8e3428 !important;
}
.optional {
  color: var(--sc-ink-soft);
  font-weight: 400;
}
.consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 11px;
  color: var(--sc-ink-soft);
  line-height: 1.65;
  margin-top: 3px;
}
.consent input {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin: 1px 0 0;
}
.consent a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-submit {
  margin-top: 28px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.form-submit > p {
  font-size: 10px;
  color: var(--sc-ink-soft);
  max-width: 18ch;
}
.form-status {
  font-size: 13px;
  margin-top: 20px;
  line-height: 1.6;
  max-width: 50ch;
}
.form-status:empty {
  display: none;
}
.form-status[data-state='error'] {
  color: #843127;
}
.form-status[data-state='success'] {
  color: #254e36;
}
.form-context {
  font-size: 12px;
  background: #edf0ff;
  color: #243caa;
  padding: 12px 15px;
  border-radius: 3px;
  margin-bottom: 25px;
}
.form-context[hidden] {
  display: none;
}
html:not(.sc-ready) [data-sc-in],
html:not(.sc-ready) [data-sc-stagger] > * {
  opacity: 1;
  transform: none;
}
.motion-reduced [data-sc-in],
.motion-reduced [data-sc-cue],
.motion-reduced .sc-split__i {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
.motion-reduced [data-sc-reveal] {
  clip-path: none !important;
}
.motion-reduced [data-sc-parallax] {
  transform: none !important;
}
@media (min-width: 1600px) {
  .home-hero {
    min-height: 760px;
  }
}
@media (max-width: 1100px) {
  .desktop-nav {
    gap: 22px;
    margin-right: 0;
  }
  .header-inner {
    gap: 24px;
  }
  .home-hero {
    min-height: 620px;
    padding-top: 48px;
  }
  .home-hero h1 {
    font-size: 6vw;
  }
  .featured-media {
    padding: 18px;
  }
  .featured-tabs {
    gap: 22px;
  }
  .featured-caption {
    min-height: 92px;
  }
  .hero-lede {
    font-size: 17px;
  }
  .arms-section {
    gap: 7vw;
  }
  .arm-list h3 {
    font-size: 25px;
  }
  .section-heading {
    gap: 50px;
  }
  .explorer-panel {
    gap: 7%;
    padding: 25px 5% 40px;
  }
  .explorer h3 {
    font-size: 34px;
  }
  .demo-output {
    padding: 25px;
  }
  .work-image {
    height: 320px;
    padding: 30px 20px;
    min-height: 270px;
  }
  .service-hero {
    gap: 7%;
    min-height: 580px;
  }
  .service-hero h1 {
    font-size: 6.2vw;
  }
  .workflow-figure {
    padding: 25px;
  }
  .workflow-figure li {
    font-size: 14px;
    gap: 15px;
  }
  .service-rows h3 {
    font-size: 24px;
  }
  .process-list {
    gap: 25px;
  }
  .product-spread h3 {
    font-size: 38px;
  }
  .product-spread {
    gap: 5%;
  }
  .product-figure {
    padding: 20px 20px 12px;
  }
  .contact-layout {
    gap: 6%;
  }
  .enquiry-form {
    padding: 27px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-directory {
    gap: 25px;
  }
}
@media (max-width: 800px) {
  .desktop-nav {
    display: none;
  }
  .header-inner {
    height: 74px;
    gap: 20px;
  }
  .header-cta {
    margin-left: auto;
  }
  .mobile-menu {
    display: block;
  }
  .mobile-menu > summary {
    display: flex;
    gap: 12px;
    font-size: 12px;
    align-items: center;
    padding: 15px 0 15px 10px;
  }
  .menu-symbol {
    font-size: 25px;
    line-height: 1;
  }
  .mobile-menu[open] .menu-symbol {
    rotate: 45deg;
  }
  .mobile-menu > nav {
    position: absolute;
    left: 0;
    top: 73px;
    width: 100%;
    background: var(--sc-canvas);
    padding: 25px var(--gutter) 30px;
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 20px 40px #17251f14;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 30px;
    max-height: calc(100dvh - 74px);
    overflow: auto;
  }
  .mobile-menu > nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--rule);
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
  }
  .wordmark {
    font-size: 36px;
  }
  .home-hero {
    padding-top: 50px;
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .home-hero h1 {
    font-size: 10.2vw;
    max-width: 700px;
  }
  .hero-copy {
    padding-bottom: 0;
  }
  .featured-work {
    width: 100%;
    margin-top: 45px;
  }
  .featured-media {
    aspect-ratio: 1.6;
    padding: 28px;
  }
  .featured-caption {
    min-height: 80px;
  }
  .hero-bottom {
    margin-top: 45px;
  }
  .arms-section {
    padding-block: 80px;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .arms-intro {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    align-items: end;
  }
  .arms-intro h2 {
    font-size: 40px;
  }
  .desktop-only {
    display: none;
  }
  .arms-intro p {
    font-size: 14px;
    margin-top: 0;
  }
  .arm-list h3 {
    font-size: 29px;
  }
  .quiet-statement {
    padding-block: 65px 85px;
  }
  .quiet-statement > p {
    margin-left: 0;
  }
  .section {
    padding-block: 80px;
  }
  .section-heading {
    gap: 35px;
    margin-bottom: 42px;
    grid-template-columns: 1.1fr 0.9fr;
  }
  .section-heading > p,
  .section-heading > div > p {
    font-size: 15px;
  }
  .explorer-section {
    padding-block: 75px;
  }
  .explorer-tabs {
    gap: 26px;
    padding: 0 25px;
  }
  .explorer-tabs button {
    font-size: 12px;
  }
  .explorer-panel {
    gap: 28px;
    padding: 25px;
    min-height: 400px;
  }
  .explorer h3 {
    font-size: 30px;
  }
  .demo-output {
    padding: 22px;
  }
  .demo-output h4 {
    font-size: 25px;
  }
  .demo-input > p:not(.demo-label) {
    font-size: 12px;
  }
  .explorer-meta {
    padding: 20px 25px;
    font-size: 10px;
  }
  .explorer-bottom {
    padding: 22px 25px;
  }
  .explorer-bottom .button {
    font-size: 12px;
    gap: 18px;
  }
  .explorer-bottom .text-link {
    font-size: 12px;
    gap: 15px;
  }
  .selected-work {
    padding-block: 80px;
  }
  .work-pair {
    gap: 25px;
  }
  .work-school {
    margin-top: 60px;
  }
  .work-image {
    height: 260px;
    min-height: 225px;
    padding: 25px 18px;
  }
  .work-label h3 {
    font-size: 24px;
  }
  .work-label p {
    font-size: 10px;
  }
  .closing {
    padding-block: 75px;
  }
  .closing-inner {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 7%;
  }
  .closing h2 {
    font-size: 47px;
  }
  .closing p {
    font-size: 14px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
  .footer-top > .text-link {
    justify-self: start;
    grid-column: 1/-1;
    font-size: 15px;
  }
  .footer-directory {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }
  .footer-bottom {
    flex-wrap: wrap;
    gap: 15px;
    font-size: 10px;
  }
  .footer-bottom > span {
    display: none;
  }
  .service-hero {
    padding-top: 50px;
    padding-bottom: 65px;
    gap: 40px;
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .service-hero h1 {
    font-size: 10vw;
  }
  .service-art {
    width: 85%;
    max-width: 540px;
    margin: 15px auto 0;
  }
  .bene-exhibit {
    padding: 30px 20px 18px;
    box-shadow: 10px 10px 0 var(--sc-accent);
  }
  .service-hero .hero-lede {
    max-width: 45ch;
  }
  .availability {
    margin-top: 25px;
  }
  .split-story {
    gap: 8%;
    padding-block: 65px;
  }
  .prose p {
    font-size: 15px;
  }
  .offering-pair {
    gap: 8%;
  }
  .offering p {
    font-size: 15px;
  }
  .proof-strip {
    gap: 20px 8%;
    padding-block: 50px 70px;
  }
  .proof-strip p {
    font-size: 15px;
  }
  .service-rows > a {
    grid-template-columns: 1fr 1fr 24px;
    gap: 5%;
  }
  .service-rows p {
    font-size: 13px;
  }
  .service-rows h3 {
    font-size: 23px;
  }
  .product-spread {
    padding-block: 45px;
    grid-template-columns: 1fr 1fr;
  }
  .product-spread.reverse {
    grid-template-columns: 1fr 1fr;
  }
  .product-spread h3 {
    font-size: 32px;
  }
  .product-spread p {
    font-size: 14px;
  }
  .product-figure {
    padding: 15px 15px 10px;
  }
  .product-figure figcaption {
    font-size: 8px;
    gap: 10px;
  }
  .education-stack {
    height: 385px;
  }
  .process-list {
    grid-template-columns: 1fr 1fr;
    gap: 45px 30px;
  }
  .process-list > li:before {
    margin-bottom: 22px;
  }
  .process-list p {
    font-size: 14px;
  }
  .capability-list {
    margin-top: 35px;
  }
  .capability-list > div {
    gap: 8%;
  }
  .capability-list dd {
    font-size: 14px;
  }
  .capability-list dt {
    font-size: 21px;
  }
  .wide-exhibit {
    padding: 30px;
  }
  .brief-list li {
    font-size: 18px;
  }
  .system-matrix {
    gap: 10%;
  }
  .system-matrix li {
    font-size: 14px;
  }
  .title-page {
    padding-top: 55px;
    padding-bottom: 50px;
  }
  .title-page h1 {
    font-size: 10vw;
  }
  .work-index-media {
    padding: 35px;
  }
  .work-index-caption {
    grid-template-columns: 1fr 25px;
    gap: 12px;
  }
  .work-index-caption > span:not(.arrow) {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
    padding: 0;
  }
  .work-index-caption > .arrow {
    grid-column: 2;
    grid-row: 1;
  }
  .work-index-caption h2 {
    font-size: 30px;
  }
  .work-index-caption p {
    font-size: 14px;
  }
  .leads-project-art {
    min-height: 300px;
    padding: 40px 25px;
    gap: 35px;
  }
  .leads-art-flow {
    gap: 12px;
  }
  .leads-art-flow > span {
    font-size: 11px;
    padding: 10px 15px;
  }
  .case-meta {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    padding-bottom: 35px;
  }
  .case-image .product-figure {
    padding: 25px 35px 15px;
  }
  .method > ol > li {
    grid-template-columns: 0.3fr 1.7fr;
    gap: 8%;
  }
  .method h2 {
    font-size: 35px;
  }
  .method p {
    font-size: 15px;
  }
  .step-number {
    font-size: 44px;
  }
  .studio-plate {
    padding: 40px;
  }
  .studio-plate > p {
    font-size: 7vw;
  }
  .giant-plus {
    font-size: 90px;
  }
  .company-details dl {
    gap: 30px;
  }
  .company-details dd {
    font-size: 13px;
  }
  .faq-page {
    gap: 7%;
    grid-template-columns: 0.6fr 1.4fr;
  }
  .faq-index a {
    font-size: 11px;
  }
  .faq-list summary {
    font-size: 15px;
  }
  .faq-list details p {
    font-size: 14px;
  }
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 45px;
    padding-top: 55px;
  }
  .contact-intro h1 {
    font-size: 10vw;
  }
  .contact-direct {
    margin-top: 32px;
  }
  .contact-expectation {
    margin-top: 20px;
    max-width: 55ch;
  }
  .enquiry-form {
    padding: 35px;
  }
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}
@media (max-width: 540px) {
  :root {
    --gutter: 24px;
  }
  body {
    font-size: 15px;
  }
  h2 {
    font-size: 36px;
    line-height: 1.12;
    letter-spacing: -0.047em;
  }
  h3 {
    font-size: 27px;
  }
  .header-inner {
    height: 68px;
    gap: 15px;
  }
  .wordmark {
    font-size: 32px;
  }
  .header-cta {
    min-height: 38px;
    font-size: 11px;
    padding: 9px 12px;
    gap: 13px;
  }
  .header-cta .arrow {
    font-size: 16px;
  }
  .mobile-menu > summary {
    font-size: 11px;
    gap: 7px;
  }
  .mobile-menu > nav {
    top: 67px;
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 68px);
  }
  .mobile-menu > nav a {
    padding: 12px 0;
    font-size: 15px;
  }
  .home-hero {
    padding-top: 39px;
  }
  .eyebrow {
    font-size: 9px;
    gap: 6px;
    margin-bottom: 24px;
  }
  .home-hero h1 {
    font-size: clamp(39px, 11.6vw, 60px);
    line-height: 1.07;
    letter-spacing: -0.059em;
  }
  .hero-lede {
    font-size: 15px;
    line-height: 1.65;
    margin-top: 21px;
  }
  .home-hero .hero-lede {
    max-width: 35ch;
  }
  .hero-actions {
    gap: 20px;
    margin-top: 25px;
  }
  .button {
    min-height: 49px;
    padding: 13px 18px;
    font-size: 12px;
    gap: 23px;
  }
  .hero-actions .text-link {
    font-size: 12px;
    gap: 10px;
  }
  .hero-actions .arrow {
    font-size: 18px;
  }
  .featured-work {
    margin-top: 34px;
  }
  .featured-tabs {
    gap: 24px;
    margin-bottom: 14px;
  }
  .featured-controls {
    min-height: 60px;
  }
  .featured-tabs button {
    font-size: 12px;
    padding-bottom: 12px;
  }
  .featured-media {
    aspect-ratio: 1.3;
    padding: 15px;
  }
  .featured-caption {
    padding-top: 16px;
    min-height: 83px;
  }
  .featured-caption h2 {
    font-size: 21px;
  }
  .featured-caption p {
    font-size: 12px;
  }
  .featured-status {
    font-size: 10px;
  }
  .hero-bottom {
    margin-top: 28px;
    font-size: 9px;
    padding-block: 20px;
    gap: 20px;
  }
  .hero-bottom > a {
    gap: 12px;
  }
  .hero-bottom .arrow {
    font-size: 14px;
  }
  .arms-section {
    padding-block: 64px;
    gap: 30px;
  }
  .arms-intro {
    display: block;
  }
  .arms-intro h2 {
    font-size: 36px;
  }
  .arms-intro p {
    margin-top: 20px;
    line-height: 1.65;
  }
  .arms-intro p br {
    display: none;
  }
  .arm-list > a {
    padding-block: 24px;
  }
  .arm-category {
    font-size: 9px;
    margin-bottom: 8px;
  }
  .arm-list h3 {
    font-size: 24px;
    letter-spacing: -0.045em;
  }
  .arm-list p {
    font-size: 12px;
    max-width: 30ch;
    line-height: 1.6;
  }
  .arm-list .arrow {
    font-size: 24px;
  }
  .quiet-statement {
    padding-block: 48px 65px;
  }
  .quiet-statement > p {
    font-size: 31px;
    letter-spacing: -0.05em;
    line-height: 1.18;
  }
  .section {
    padding-block: 65px;
  }
  .section-heading {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-bottom: 32px;
  }
  .section-heading > p,
  .section-heading > div > p {
    font-size: 15px;
    max-width: 39ch;
  }
  .section-heading .text-link {
    margin-top: 18px;
  }
  .explorer-section {
    padding-block: 60px;
  }
  .explorer-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0 17px;
  }
  .explorer-tabs button {
    font-size: 11px;
    text-align: left;
    padding: 15px 0 13px;
    min-height: 45px;
    margin-right: 16px;
  }
  .explorer-meta {
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    font-size: 9px;
  }
  .explorer-panel {
    grid-template-columns: 1fr;
    padding: 5px 20px 25px;
    gap: 26px;
    min-height: 0;
  }
  .explorer h3 {
    font-size: 29px;
    margin-top: 12px;
    margin-bottom: 20px;
  }
  .demo-input > p:not(.demo-label) {
    font-size: 12px;
  }
  .demo-label {
    font-size: 9px;
  }
  .demo-input legend {
    font-size: 11px;
    margin-bottom: 7px;
  }
  .radio-choice {
    font-size: 13px;
    min-height: 41px;
  }
  .demo-output {
    padding: 24px 20px;
    min-height: 260px;
  }
  .demo-output h4 {
    font-size: 27px;
    max-width: 20ch;
    margin-bottom: 20px;
  }
  .demo-output > .demo-label {
    margin-bottom: 17px;
  }
  .demo-output > p:not(.demo-label) {
    font-size: 11px;
    margin-top: 18px;
  }
  .plan-list li {
    font-size: 12px;
    padding: 12px 0;
  }
  .explorer-bottom {
    align-items: stretch;
    flex-direction: column;
    gap: 19px;
    padding: 22px 20px;
  }
  .explorer-bottom .text-link {
    width: fit-content;
    font-size: 11px;
    min-height: 30px;
  }
  .explorer-bottom .button {
    justify-content: space-between;
    font-size: 12px;
  }
  .demo-input blockquote {
    font-size: 17px;
  }
  .demo-output textarea {
    font-size: 13px;
  }
  .demo-buttons {
    gap: 20px;
  }
  .demo-output .button {
    font-size: 11px;
    gap: 14px;
  }
  .quantity-list label {
    padding-block: 12px;
  }
  .quantity-list input {
    font-size: 16px;
  }
  .selected-work {
    padding-block: 65px;
  }
  .work-pair {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .work-school {
    margin-top: 0;
  }
  .work-image {
    height: 300px;
    min-height: 240px;
    padding: 30px 22px;
  }
  .work-school .work-image img {
    height: 240px;
  }
  .work-label {
    padding-top: 20px;
  }
  .work-label h3 {
    font-size: 25px;
  }
  .work-label p {
    font-size: 11px;
  }
  .closing {
    padding-block: 62px;
  }
  .closing-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .closing h2 {
    font-size: 44px;
    line-height: 1.08;
  }
  .closing p {
    font-size: 15px;
    max-width: 34ch;
    margin-bottom: 23px;
  }
  .closing .button {
    width: fit-content;
  }
  .site-footer {
    padding-top: 45px;
  }
  .footer-top {
    gap: 25px;
    padding-bottom: 38px;
  }
  .footer-top .wordmark {
    font-size: 44px;
  }
  .footer-top > p {
    font-size: 12px;
  }
  .footer-top > .text-link {
    font-size: 16px;
  }
  .footer-directory {
    gap: 30px 25px;
    padding-bottom: 35px;
  }
  .footer-directory h2 {
    font-size: 10px;
    margin-bottom: 15px;
  }
  .footer-directory a,
  .footer-directory p {
    font-size: 11px;
  }
  .footer-directory a {
    min-height: 32px;
  }
  .footer-bottom {
    font-size: 9px;
    gap: 12px;
  }
  .footer-bottom p > span {
    display: block;
    margin: 4px 0 0;
  }
  .footer-bottom > a {
    padding-top: 0;
    align-self: start;
  }
  .service-hero {
    padding-top: 35px;
    padding-bottom: 55px;
    gap: 35px;
  }
  .breadcrumb {
    font-size: 9px;
    margin-bottom: 27px;
    gap: 9px;
  }
  .service-hero h1,
  .title-page h1,
  .contact-intro h1 {
    font-size: clamp(38px, 11vw, 57px);
    line-height: 1.08;
    letter-spacing: -0.055em;
  }
  .service-hero .hero-lede {
    font-size: 15px;
    max-width: 36ch;
  }
  .availability {
    font-size: 9px;
    gap: 7px;
  }
  .service-art {
    width: 94%;
    margin-top: 10px;
  }
  .bene-exhibit {
    padding: 23px 14px 15px;
    rotate: -2deg;
    box-shadow: 8px 8px 0 var(--sc-accent);
  }
  .bene-exhibit figcaption {
    font-size: 8px;
    margin-top: 13px;
  }
  .workflow-figure {
    padding: 25px 22px;
    box-shadow: 8px 8px 0 #e0e5dc;
  }
  .workflow-figure figcaption {
    font-size: 10px;
    margin-bottom: 17px;
  }
  .workflow-figure li {
    font-size: 13px;
    gap: 15px;
    padding-block: 13px;
  }
  .workflow-figure p {
    font-size: 9px;
    margin-top: 20px;
  }
  .workflow-dot {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: 17px;
  }
  .workflow-figure ol:before {
    left: 15px;
  }
  .offering-pair {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .offering {
    padding-block: 32px;
  }
  .offering + article {
    border-top: 1px solid var(--rule);
  }
  .outline-icon {
    font-size: 35px;
    margin-bottom: 23px;
  }
  .offering p {
    max-width: 37ch;
    font-size: 15px;
    margin-block: 18px;
  }
  .inline-list {
    font-size: 12px;
  }
  .split-story {
    padding-block: 55px;
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .split-story .prose {
    max-width: none;
  }
  .prose p {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
  }
  .prose .text-link {
    margin-top: 8px;
  }
  .proof-strip {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-block: 38px 55px;
  }
  .proof-strip > span {
    font-size: 10px;
  }
  .proof-strip > h2,
  .proof-strip > p,
  .proof-strip > .text-link {
    grid-column: auto;
    grid-row: auto;
  }
  .proof-strip > h2 {
    font-size: 32px;
  }
  .proof-strip p {
    font-size: 15px;
  }
  .service-rows > a {
    grid-template-columns: 1fr 24px;
    gap: 15px 20px;
    padding-block: 26px;
  }
  .service-rows h3 {
    font-size: 25px;
  }
  .service-rows p {
    grid-row: 2;
    grid-column: 1;
    max-width: 35ch;
    font-size: 13px;
  }
  .service-rows .arrow {
    grid-column: 2;
    grid-row: 1;
  }
  .ink-section {
    padding-block: 10px;
  }
  .project-links {
    flex-direction: column;
    gap: 22px;
  }
  .project-link {
    font-size: 16px;
    justify-content: space-between;
  }
  .product-spread,
  .product-spread.reverse {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 35px;
  }
  .product-spread.reverse > div,
  .product-spread.reverse > figure {
    grid-column: auto;
    grid-row: auto;
  }
  .product-spread h3 {
    font-size: 33px;
  }
  .product-spread p {
    font-size: 15px;
    max-width: 36ch;
  }
  .product-status {
    font-size: 10px;
  }
  .product-figure {
    padding: 14px 14px 11px;
  }
  .product-figure figcaption {
    font-size: 8px;
    margin-top: 12px;
  }
  .product-figure figcaption > span:last-child {
    font-size: 7px;
    white-space: nowrap;
  }
  .education-stack {
    height: 315px;
  }
  .education-plane {
    inset: 0 0 60px 35px;
    font-size: 35px;
    padding: 20px;
  }
  .education-stack img {
    top: 100px;
    width: 90%;
    height: 200px;
    border-width: 4px;
  }
  .education-stack > span {
    font-size: 8px;
    bottom: -10px;
  }
  .mini-product {
    box-shadow: 9px 9px 0 var(--sc-accent);
  }
  .capability-list > div {
    grid-template-columns: 1fr;
    gap: 13px;
    padding-block: 24px;
  }
  .capability-list dt {
    font-size: 23px;
  }
  .capability-list dd {
    font-size: 14px;
  }
  .wide-exhibit {
    padding: 22px;
  }
  .wide-exhibit figcaption {
    font-size: 9px;
    line-height: 1.5;
    margin-top: 16px;
  }
  .mobile-concept {
    padding-block: 7px;
  }
  .phone-outline {
    width: 207px;
    padding: 18px 20px;
  }
  .phone-outline li {
    font-size: 20px;
  }
  .mobile-concept figcaption {
    font-size: 9px;
  }
  .brief-list {
    margin-top: 30px;
  }
  .brief-list li {
    font-size: 17px;
    line-height: 1.5;
    gap: 15px;
    padding-block: 16px;
  }
  .small-copy {
    font-size: 11px;
    margin-top: 21px;
  }
  .system-matrix {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-block: 30px;
  }
  .system-matrix h3 {
    margin-bottom: 13px;
  }
  .system-matrix li {
    padding-block: 7px;
  }
  .process-list {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .process-list > li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px 17px;
    padding-top: 24px;
  }
  .process-list > li:before {
    grid-row: 1;
    grid-column: 1;
    margin: 5px 0 0;
    font-size: 10px;
  }
  .process-list h3 {
    grid-row: 1;
    grid-column: 2;
    font-size: 25px;
    margin: 0;
  }
  .process-list p {
    grid-row: 2;
    grid-column: 2;
    font-size: 14px;
  }
  .title-page {
    padding-top: 38px;
    padding-bottom: 43px;
  }
  .title-page .hero-lede {
    font-size: 15px;
  }
  .work-index {
    padding-bottom: 35px;
  }
  .featured-project {
    margin-bottom: 40px;
  }
  .work-index-media {
    padding: 25px 20px;
  }
  .work-index-caption {
    padding-top: 22px;
    gap: 13px;
  }
  .work-index-caption h2 {
    font-size: 28px;
  }
  .work-index-caption p {
    font-size: 13px;
  }
  .work-index-caption > span:not(.arrow) {
    font-size: 10px;
  }
  .leads-project-art {
    min-height: 245px;
    padding: 35px 15px;
    gap: 27px;
  }
  .leads-art-name {
    font-size: 43px;
  }
  .leads-art-flow {
    gap: 8px;
  }
  .leads-art-flow > span {
    font-size: 8px;
    padding: 8px 9px;
  }
  .leads-art-flow i {
    font-size: 12px;
  }
  .leads-project-art > p {
    font-size: 8px;
  }
  .case-meta {
    gap: 22px 20px;
    padding-top: 22px;
  }
  .case-meta dt {
    font-size: 9px;
  }
  .case-meta dd {
    font-size: 12px;
  }
  .case-image .product-figure {
    padding: 18px 18px 12px;
  }
  .method > ol > li {
    grid-template-columns: 32px 1fr;
    gap: 20px;
    padding-block: 35px;
  }
  .step-number {
    font-size: 28px;
    line-height: 1.2;
  }
  .method h2 {
    font-size: 29px;
    line-height: 1.15;
    margin-bottom: 20px;
  }
  .method li p {
    font-size: 14px;
  }
  .method dt {
    font-size: 9px;
  }
  .method dd {
    font-size: 12px;
  }
  .method dl {
    padding-left: 15px;
  }
  .studio-plate {
    padding: 28px;
    display: block;
  }
  .studio-plate > p {
    font-size: 41px;
  }
  .studio-plate > div {
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    margin-top: 40px;
    gap: 20px;
  }
  .giant-plus {
    font-size: 75px;
  }
  .studio-plate > div > p {
    font-size: 10px;
  }
  .company-details {
    padding-block: 60px;
  }
  .company-details h2 {
    font-size: 26px;
    margin-bottom: 30px;
  }
  .company-details dl {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .company-details dt {
    font-size: 10px;
    margin-bottom: 8px;
  }
  .company-details dd {
    font-size: 15px;
  }
  .faq-page {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-bottom: 45px;
  }
  .faq-index {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
  }
  .faq-index a {
    font-size: 11px;
    padding: 6px 0;
  }
  .faq-group {
    margin-bottom: 32px;
  }
  .faq-group h2 {
    font-size: 23px;
    margin-bottom: 20px;
  }
  .faq-list summary {
    font-size: 15px;
    gap: 20px;
  }
  .faq-list details p {
    font-size: 14px;
    margin-right: 0;
    margin-top: 18px;
  }
  .legal-prose {
    font-size: 14px;
    line-height: 1.85;
  }
  .legal-prose h2 {
    font-size: 23px;
  }
  .contact-layout {
    padding-block: 39px 65px;
    gap: 34px;
  }
  .contact-direct {
    margin-top: 30px;
  }
  .contact-direct > a:first-of-type {
    font-size: 21px;
  }
  .contact-direct > p {
    font-size: 11px;
  }
  .contact-expectation {
    font-size: 12px;
  }
  .enquiry-form {
    padding: 24px 20px;
  }
  .enquiry-form h2 {
    font-size: 23px;
    margin-bottom: 26px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .enquiry-form label:not(.consent) {
    font-size: 11px;
    margin-bottom: 20px;
  }
  .enquiry-form input:not([type='checkbox']),
  .enquiry-form select,
  .enquiry-form textarea {
    font-size: 16px;
    padding: 11px 10px;
    min-height: 46px;
  }
  .consent {
    font-size: 10px;
    gap: 10px;
  }
  .form-submit {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }
  .form-submit .button {
    width: 100%;
  }
  .form-submit > p {
    max-width: none;
    font-size: 10px;
  }
  .form-status {
    font-size: 12px;
  }
  .form-context {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
  [data-sc-in],
  [data-sc-cue],
  .sc-split__i {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-sc-reveal] {
    clip-path: none !important;
  }
  [data-sc-parallax] {
    transform: none !important;
  }
}