/* Archify theme, shared page width and heading scale. Original grids and crops live in styles.css. */
@font-face {
  font-family: "Codec Cold";
  src: url("../assets/fonts/codec-cold.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --paper: #000;
  --bg: var(--paper);
  --bg-raise: #111;
  --card-surface: #111;
  --theme-border: #ffffff1c;
  --ink: #f3f3f5;
  --ink-dim: #b1b2bc;
  --ink-mute: #92939d;
  --line: #ffffff1c;
  --accent: #c82837;
  --red: var(--accent);
  --red-hot: #ef5363;
  --red-deep: #9e1d2a;
  --font-head: "Codec Cold", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-quick: 180ms;
  --motion-ui: 400ms;
  --motion-reveal: 750ms;
  /* Flat product-media surfaces, the same card border and shadow the homepage uses. */
  --media-fill: #1c1c1c;
  --media-shadow: 0 12px 35px #00000020;
  --media-shadow-hover: 0 28px 60px rgb(70 20 30 / 0.13);
  --media-bar: #1c1c1c;
  --media-dot: #3a3b41;
  --media-lid: #0b0b0c;
  --media-lid-edge: #3a3b41;
  --media-base: #2a2b30;
  --device-shadow: drop-shadow(0 12px 35px #00000020);
  --action-ease: var(--ease-out);
  --action-radius: 999px;
  --btn-height: clamp(40px, 0.965vw + 36.24px, 48.59px);
  --btn-icon: calc(var(--btn-height) - 0.7rem);
  --section-pad-x: clamp(1.15rem, 3.3vw, 3.5rem);
  --section-pad-y: clamp(2.5rem, 3.2vw, 3.5rem);
  --section-max: 100rem;
  --shell-pad: 0.5rem;
  --wrap: var(--section-max);
  --gutter: calc(var(--shell-pad) + var(--section-pad-x));
}
:root[data-theme="light"] {
  color-scheme: light;
  --paper: #fff;
  --bg-raise: #fff;
  --card-surface: #fbfbfb;
  --theme-border: rgb(10 10 12 / 0.06);
  --ink: #101012;
  --ink-dim: #555158;
  --ink-mute: #68636b;
  --line: rgb(16 16 18 / 0.16);
  --red-hot: #c82837;
  --media-shadow: 0 2px 20px rgb(100 100 111 / 0.2);
  --media-bar: #e8e2e4;
  --media-dot: rgb(16 16 18 / 0.18);
  --media-lid: #111113;
  --media-lid-edge: #2b2b30;
  --media-base: #d3cfd1;
  --device-shadow: drop-shadow(0 2px 20px rgb(100 100 111 / 0.2));
  --media-fill: #e4e4e8;
}
@media (min-width: 1024px) { :root { --shell-pad: 0.6rem; } }
@media (max-width: 639px) {
  :root { --section-pad-y: 2.5rem; --section-pad-x: 1.15rem; }
}
html { scrollbar-color: #555862 var(--paper); }
:root[data-theme="light"] { scrollbar-color: #b7a6aa var(--paper); }
/* In-page jumps clear the floating header. */
main > section[id] { scroll-margin-top: 5rem; }
::selection { background: var(--accent); color: #fff; }
body { background: var(--paper); color: var(--ink); }
.site-ambient-bg { background: var(--paper); }
main { position: relative; z-index: 1; }
/* Use the homepage's shared section rhythm, including on small screens. */
main > .hero, main > .showcase, main > .sec {
  margin-block: 0;
  padding-block: var(--section-pad-y);
  padding-inline: 0;
}
.hero-grid { padding-top: 0; }
/* Bring the hero devices up under the headline on desktop and laptop. */
@media (min-width: 900px) {
  main > .hero { padding-bottom: clamp(16px, 2vw, 28px); }
  main > .showcase { padding-top: 0; }
  /* Give the title room so "Case Study Of" stays on one line on laptops. */
  .hero-grid { grid-template-columns: 1.25fr 0.75fr; }
}
/* From laptop width the hero copy column is short, so the devices rise into the
   free space beside it and the whole composition clears the fold. */
@media (min-width: 1200px) {
  main > .showcase { margin-top: -3rem; position: relative; z-index: 0; }
}
.kicker { margin-bottom: 1.5rem; }
.sec h2:not(.nt-title) { margin-bottom: 1.5rem; }
.legend { margin-top: clamp(2rem, 3vw, 3rem); }
.strip { margin-top: var(--section-pad-y); }
.archify-chrome { position: relative; z-index: 2; }
.archify-header { z-index: 3; }
:root[data-theme="dark"] .architecture-map__paths { opacity: 0.8; }
:root[data-theme="dark"] #architecture-ink stop { stop-color: #b2b5c0; }
:root[data-theme="dark"] .architecture-map__nodes { fill: var(--paper); stroke: #b2b5c0; }
:root[data-theme="dark"] .architecture-map__signals { stroke: #ef5363; opacity: 0.35; }
.hero h1, .sec h2:not(.nt-title) {
  font-family: "Codec Cold", system-ui, sans-serif;
  font-size: clamp(3rem, 7.5vw, 5.45rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.045em;
}
/* Headings that share a row with media sit in a narrower column than the
   homepage's full-width section titles, so they use a smaller step of the same
   scale; this keeps long words such as "Operations" from being clipped. */
@media (min-width: 900px) {
  .split h2:not(.nt-title) { font-size: clamp(2.5rem, 4.6vw, 4.4rem); }
}
[data-split-title] { perspective: 400px; overflow: clip; overflow-clip-margin: 0.1em; }
[data-split-title] .split-word { display: inline-block; white-space: nowrap; }
[data-split-title] .char-mask { display: inline-block; overflow: visible; vertical-align: bottom; padding-bottom: 0.06em; }
[data-split-title] .char { position: relative; display: inline-block; }
[data-split-title] .char--space { width: 0.28em; }
[data-split-title].is-split .char { transform: translate3d(50px, 0, 0); opacity: 0; transition: none; }
[data-split-title].is-in .char {
  transform: translate3d(0, 0, 0); opacity: 1;
  transition: transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: calc(var(--c) * 30ms);
}
.motion-paused [data-split-title].is-split .char { transform: none; opacity: 1; }
@media (max-width: 639px) {
  .hero h1, .sec h2:not(.nt-title) { font-size: clamp(2.5rem, 11vw, 4rem); }
  :root[data-theme="dark"] .architecture-map__signals { opacity: 0.25; }
}
.archify-chrome { font-family: "Inter", system-ui, sans-serif; line-height: 1.5; font-weight: 400; }
.archify-header { background: #080808; color: #fff; padding-inline: var(--shell-pad); }
.archify-footer { padding-inline: var(--shell-pad); }
.archify-chrome .site-header { border: 0; }
.archify-chrome .menu-btn > span::before,
.archify-chrome .menu-btn > span::after { content: none; }
.archify-chrome .site-footer { font-family: "Inter", system-ui, sans-serif; }
.archify-chrome button { cursor: pointer; }
.sec p strong, .checks li b, .sec p.caption b,
.legend a b, .strip figcaption b { color: var(--ink); }
.ghost { -webkit-text-stroke-color: var(--line); }
:root[data-theme="light"] .kicker { color: #0a0a0c; }
/* "All case studies" link above the hero title, set like the section labels. */
.back-link {
  display: inline-flex; align-items: center; gap: 0.65rem; margin-bottom: 1.5rem;
  font: 500 0.7rem/1.5 "Inter", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); transition: color 300ms var(--ease-out);
}
.back-link span { display: inline-block; transition: transform var(--motion-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .back-link:hover { color: var(--ink); }
  .back-link:hover span { transform: translateX(-3px); }
}
/* Body copy follows the homepage card descriptions. */
.sec p, .hero-side p { font-size: clamp(0.92rem, 1.2vw, 1.02rem); line-height: 1.55; }
.checks li { font-size: clamp(0.875rem, 1.1vw, 0.97rem); line-height: 1.55; }
.tag, .chip, .g-btn, .legend a { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.legend a:hover { color: var(--ink); border-color: var(--accent); }
.legend a > span { color: var(--ink); }
.g-btn, .tab, .tag, .chip, .legend a {
  transition: color 300ms, border-color 300ms, background 300ms, transform 450ms var(--ease-out);
}
.reveal {
  transition: opacity 750ms var(--ease-out), transform 750ms var(--ease-out);
}
.js .reveal:not(.in) { transform: translate3d(0, 36px, 0); }
#disclaimer {
  --nt-label: #9fb3c8;
  --nt-tick: rgb(196 208 224 / 0.3);
  --nt-specs-bg: rgb(0 0 0 / 0.25);
  --nt-edge: var(--theme-border);
  --nt-hair: var(--line);
  --nt-accent: var(--accent);
  --nt-ink: var(--ink);
  --nt-body: var(--ink-dim);
}
#disclaimer .nt-panel {
  background: var(--card-surface);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 12px 35px #00000020;
}
#disclaimer .nt-panel::before { content: none; }
/* Timeline ruler along the top edge of the spec bar: fine ticks every 10px, a
   taller tick every 50px. Drawn as an SVG mask (no gradient) so the colour
   follows the theme. */
#disclaimer .nt-specs::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  pointer-events: none;
  background-color: var(--nt-tick);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='8'%3E%3Cpath d='M.5 0v8M10.5 0v4M20.5 0v4M30.5 0v4M40.5 0v4' stroke='black' fill='none'/%3E%3C/svg%3E") repeat-x 0 0 / 50px 8px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='8'%3E%3Cpath d='M.5 0v8M10.5 0v4M20.5 0v4M30.5 0v4M40.5 0v4' stroke='black' fill='none'/%3E%3C/svg%3E") repeat-x 0 0 / 50px 8px;
}
#disclaimer .nt-head { border-bottom: 1px solid var(--line); border-image: none; }
#disclaimer .nt-badge {
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 0.65rem;
  color: var(--ink);
  font: 500 0.7rem/1.5 "Inter", system-ui, sans-serif;
  letter-spacing: 0.16em;
}
#disclaimer .nt-badge-ico { display: none; }
#disclaimer .nt-badge::before {
  content: "";
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  opacity: 1;
  background: var(--accent);
}
/* Spec labels lead with a short dash, like marks on the ruler above them. */
#disclaimer .nt-k::before {
  content: "";
  flex: none;
  width: 18px;
  height: 1px;
  opacity: 0.7;
  background: currentColor;
}
#disclaimer .nt-title { font-weight: 800; font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.12; letter-spacing: -0.045em; }
#disclaimer .nt-copy p { font-weight: 400; font-size: clamp(0.92rem, 1.2vw, 1.02rem); line-height: 1.55; }
#disclaimer .nt-d { font-size: clamp(0.875rem, 1.1vw, 0.97rem); }
#disclaimer .nt-copy .nt-lead { color: var(--ink-dim); font-size: clamp(1.02rem, 1.2vw + 0.5rem, 1.28rem); line-height: 1.62; }
#disclaimer .nt-specs { background: var(--nt-specs-bg); }
#disclaimer .nt-k { color: var(--nt-label); font: 500 0.66rem/1.5 "Inter", system-ui, sans-serif; letter-spacing: 0.18em; gap: 10px; }
#disclaimer .nt-v { font-weight: 800; letter-spacing: -0.045em; }
#disclaimer .nt-ghost { font-family: var(--font-head); -webkit-text-stroke-color: var(--line); }
:root[data-theme="light"] #disclaimer .nt-panel { box-shadow: 0 2px 20px rgb(100 100 111 / 0.2); }
:root[data-theme="light"] #disclaimer .nt-badge { color: #0a0a0c; }
:root[data-theme="light"] #disclaimer {
  --nt-label: var(--ink-mute);
  --nt-tick: rgb(16 16 18 / 0.28);
  --nt-specs-bg: rgb(16 16 18 / 0.03);
}
:root[data-theme="light"] .lc-pain { background: rgb(16 16 18 / 0.02); border-color: var(--line); }
.lc-step { border-radius: var(--radius); }
.lc-step i {
  color: transparent;
  -webkit-text-stroke: 1.4px #797d89;
  font-size: 38px;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
}
:root[data-theme="light"] .lc-step { box-shadow: 0 2px 20px rgb(100 100 111 / 0.2); }
:root[data-theme="light"] .lc-step i { -webkit-text-stroke-color: rgb(10 10 12 / 0.38); }
.lc-step b { color: var(--ink); font-weight: 800; letter-spacing: -0.025em; }
.lc-step span { color: var(--ink-dim); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal:not(.in) { opacity: 1; transform: none; }
}

/* Hero copy column: wide enough for the intro to sit on two lines. The title
   keeps its width, and the tag row may run under the copy column since that
   column is shorter than the title block. */
@media (min-width: 1200px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
  .hero-side p { max-width: 34rem; text-wrap: balance; }
  .hero-tags { width: max-content; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .hero h1 { font-size: clamp(3rem, 5.6vw, 5.45rem); }
}

/* Case study video and device-mockup media (see video.js). Flat, no glow. */
.mockup { display: block; width: 100%; height: auto; }
.win video {
  display: block; width: 100%; height: auto; aspect-ratio: var(--ar);
  object-fit: cover; object-position: top; background: var(--media-fill);
}
.phone-video { position: relative; width: min(290px, 62vw); margin-inline: auto; }
.phone-video video { display: block; width: 100%; height: auto; aspect-ratio: 824 / 1708; border-radius: 1.75rem; background: #000; filter: var(--device-shadow); }
.video-sound {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem;
  border: 1px solid var(--theme-border); border-radius: 999px;
  background: var(--card-surface); color: var(--ink); box-shadow: var(--media-shadow);
  font: 500 0.72rem/1.5 "Inter", system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: border-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
.video-sound svg { width: 14px; height: 14px; flex: none; }
.video-sound[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .video-sound:hover { border-color: var(--accent); }
}
.video-sound:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

/* Light theme: the strip behind the header is light, matching the header itself. */
:root[data-theme="light"] .archify-header { background: #fff; color: #101012; }