/* =========================================================================
   pages/home.css — homepage-only styles.
   Anything reusable belongs in components.css instead.
   ========================================================================= */

/* -------------------------------------------------------------------------
   01 · Hero
   ------------------------------------------------------------------------- */

.c-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(100vh, 60rem);
  min-height: min(100svh, 60rem);
  padding-block: calc(var(--header-h) + var(--space-lg)) var(--space-xl);
  overflow: hidden;
  isolation: isolate;
}

.c-hero__depth {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.c-hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  will-change: transform;
}

.c-hero__glow--maroon {
  right: -12%;
  top: -18%;
  width: 78vw;
  height: 78vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(161, 43, 72, 0.42), rgba(103, 31, 48, 0.12) 45%, transparent 68%);
}

.c-hero__glow--blue {
  left: -22%;
  bottom: -30%;
  width: 62vw;
  height: 62vw;
  max-width: 760px;
  max-height: 760px;
  background: radial-gradient(circle, rgba(65, 105, 225, 0.24), transparent 66%);
}

.c-hero__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(241, 236, 226, 0.16);
  stroke-width: 1;
}

.c-hero__lines path:nth-child(2) { stroke: rgba(161, 43, 72, 0.5); }

.c-hero__mark {
  position: absolute;
  right: -4%;
  top: 50%;
  width: 38vw;
  max-width: 520px;
  transform: translateY(-52%);
  opacity: 0.14;
  will-change: transform;
}

.c-hero__inner {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.c-hero__title {
  max-width: 15ch;
  margin-block: 0;
}

/* The maroon sweep under "small" — the one word carrying the argument. */
.c-hero__title .c-mark::after {
  height: 0.12em;
  bottom: 0.1em;
  background-color: var(--brand-accent-lift);
}

.c-hero__lead {
  font-size: var(--fs-lead);
  color: var(--color-text-dim);
  line-height: var(--lh-loose);
  max-width: 48ch;
}

.c-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.c-hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md) var(--space-lg);
  width: 100%;
  max-width: 52rem;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}

.c-hero__meta-item dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.c-hero__meta-item dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-dim);
  line-height: 1.45;
}

.c-hero__meta-item strong {
  color: var(--color-text);
  font-weight: var(--weight-semi);
}

/* --- Scroll cue ---------------------------------------------------------- */

.c-hero__cue-wrap {
  position: relative;
  z-index: var(--z-base);
  margin-top: var(--space-lg);
}

.c-hero__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.c-hero__cue:hover {
  color: var(--color-text);
}

.c-hero__cue-line {
  position: relative;
  width: 3.5rem;
  height: 1px;
  background-color: var(--color-line-strong);
  overflow: hidden;
}

.c-hero__cue-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--brand-accent-bright);
  transform: translateX(-100%);
  animation: cue-travel 2.8s var(--ease-in-out) infinite;
}

@keyframes cue-travel {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* -------------------------------------------------------------------------
   02 · Transformation demo
   ------------------------------------------------------------------------- */

.c-transform {
  margin: 0;
}

.c-transform__frame {
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background-color: var(--abyss-900);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.c-transform__chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-line);
  background-color: var(--abyss-700);
}

.c-transform__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--abyss-400);
  flex-shrink: 0;
}

.c-transform__url {
  flex: 1;
  margin-left: 0.6rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background-color: rgba(241, 236, 226, 0.05);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.c-transform__stage {
  --split: 50%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #fff;
  touch-action: pan-y;
}

.c-transform__panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Both mock sites size their type against the frame, not the viewport, so
     they stay in proportion at every screen width. */
  container-type: inline-size;
}

/* The dated site sits on top, clipped away from the right by the handle. */
.c-transform__panel--before {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  z-index: 2;
}

.c-transform__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 2px;
  margin-left: -1px;
  z-index: 3;
  background-color: var(--bone-200);
  box-shadow: 0 0 18px rgba(7, 17, 31, 0.5);
  pointer-events: none;
}

.c-transform__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.c-transform__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 56px;
  height: 56px;
  cursor: ew-resize;
}

.c-transform__range::-moz-range-thumb {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 0;
  cursor: ew-resize;
}

.c-transform__grip {
  position: absolute;
  top: 50%;
  left: var(--split);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background-color: var(--bone-200);
  box-shadow: 0 10px 26px -8px rgba(7, 17, 31, 0.7);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--transition-base);
}

.c-transform__range:hover ~ .c-transform__grip {
  transform: translate(-50%, -50%) scale(1.06);
}

.c-transform__range:focus-visible ~ .c-transform__grip {
  outline: 3px solid var(--brand-accent-bright);
  outline-offset: 3px;
}

/* Two chevrons pointing outward, drawn from one element. */
.c-transform__grip-arrows {
  position: relative;
  width: 1.5rem;
  height: 0.7rem;
}

.c-transform__grip-arrows::before,
.c-transform__grip-arrows::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 2px solid var(--abyss-800);
  border-right: 2px solid var(--abyss-800);
}

.c-transform__grip-arrows::before {
  left: 0.1rem;
  transform: translateY(-50%) rotate(-135deg);
}

.c-transform__grip-arrows::after {
  right: 0.1rem;
  transform: translateY(-50%) rotate(45deg);
}

.c-transform__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.c-transform__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.c-transform__tag--after {
  border-color: var(--brand-accent-line);
  background-color: var(--brand-accent-soft);
  color: var(--color-accent-text);
}

.c-transform__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* --- The dated site ------------------------------------------------------ */
/* Deliberately unstyled-looking. Every choice here is a period detail:
   centred text, a gradient banner, pipe-separated links, a hit counter. */

.c-old {
  width: 100%;
  height: 100%;
  padding: 2.2% 3%;
  background-color: #fff;
  color: #1a1a1a;
  font-family: 'Times New Roman', Times, Georgia, serif;
  font-size: clamp(0.5rem, 1.35cqw, 0.95rem);
  text-align: center;
  overflow: hidden;
}

.c-old__banner {
  padding: 3% 2%;
  margin-bottom: 2.5%;
  background: linear-gradient(180deg, #3a5a8c 0%, #1e3a63 100%);
  border: 2px outset #7d97bd;
  color: #fff;
}

.c-old__title {
  display: block;
  font-size: 2.15em;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.55);
}

.c-old__tagline {
  display: block;
  margin-top: 0.35em;
  font-size: 1.05em;
  font-style: italic;
  color: #d8e2f0;
}

.c-old__nav {
  display: flex;
  justify-content: center;
  gap: 0.55em;
  padding: 0.6em 0;
  margin-bottom: 3%;
  border-block: 1px solid #b8b8b8;
  font-size: 1.05em;
  color: #999;
}

.c-old__nav span:not(:nth-child(even)) {
  color: #0000cc;
  text-decoration: underline;
}

.c-old__body {
  padding-inline: 6%;
}

.c-old__text {
  margin-bottom: 1.1em;
  font-size: 1.1em;
  line-height: 1.5;
  color: #333;
}

.c-old__text--small {
  font-size: 0.98em;
}

.c-old__link {
  color: #0000cc;
  text-decoration: underline;
  font-weight: 700;
}

.c-old__box {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 62%;
  margin: 1.5em auto;
  padding: 1em;
  border: 1px solid #c4c4c4;
  background-color: #f2f2f2;
}

.c-old__box-line {
  height: 0.6em;
  background-color: #d9d9d9;
}

.c-old__box-line:last-child {
  width: 62%;
  align-self: center;
}

.c-old__footer {
  margin-top: 2em;
  padding-top: 0.8em;
  border-top: 1px solid #ddd;
  font-size: 0.85em;
  color: #8a8a8a;
}

/* --- The modern mock: "Cedar & Ash" --------------------------------------- */
/* IMPORTANT: this is an EXAMPLE of a client site, so it is deliberately NOT
   built in Leviathan's visual language. This site is dark, cool, sans-serif,
   left-aligned and pill-shaped; the example is light, warm, serif, centred and
   square-edged. A prospect who sees the demo and then looks at this website
   should conclude we design for the client — not that everyone gets one
   template with their name swapped in.

   The same rule applies to the concept cards further down the page. If another
   example is ever added, give it its own palette and skeleton too. */

.c-mock {
  --mock-pad: 5%;
  --mock-cream: #f7f2e9;
  --mock-ink: #23332a;
  --mock-clay: #b8541f;
  --mock-line: rgba(35, 51, 42, 0.18);
  --mock-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: var(--mock-pad);
  gap: 3.5%;
  background-color: var(--mock-cream);
  color: var(--mock-ink);
  overflow: hidden;
  container-type: inline-size;
}

/* Centred wordmark, links left, action right — a different skeleton from this
   site's logo-left / CTA-right header. */
.c-mock__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 3%;
  padding-bottom: 3.5%;
  border-bottom: 1px solid var(--mock-line);
  flex-shrink: 0;
}

.c-mock__links {
  grid-column: 1;
  display: flex;
  gap: clamp(0.25rem, 1.2cqw, 0.6rem);
}

.c-mock__links i {
  display: block;
  width: clamp(0.85rem, 2.6cqw, 1.9rem);
  height: clamp(3px, 0.55cqw, 4px);
  border-radius: 2px;
  background-color: rgba(35, 51, 42, 0.32);
}

.c-mock__logo {
  grid-column: 2;
  font-family: var(--mock-serif);
  font-size: clamp(0.72rem, 3.6cqw, 1.5rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-align: center;
}

.c-mock__cta {
  grid-column: 3;
  justify-self: end;
  padding: clamp(0.16rem, 0.75cqw, 0.42rem) clamp(0.4rem, 1.7cqw, 0.95rem);
  border: 1px solid var(--mock-clay);
  border-radius: 2px;
  color: var(--mock-clay);
  font-family: var(--mock-serif);
  font-size: clamp(0.44rem, 1.6cqw, 0.68rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.c-mock__burger {
  display: none;
  grid-column: 3;
  justify-self: end;
  flex-direction: column;
  gap: 3px;
}

.c-mock__burger i {
  display: block;
  width: clamp(0.8rem, 4cqw, 1.1rem);
  height: 1.5px;
  background-color: var(--mock-ink);
}

/* A full-bleed feature image with the headline set into it — where this site
   puts its headline on a flat field with the art behind everything. */
.c-mock__feature {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  border-radius: 2px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 12%, rgba(226, 154, 78, 0.55), transparent 58%),
    linear-gradient(155deg, #3c5142 0%, #6d3a1e 62%, #a8491b 100%);
}

.c-mock__feature::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(20, 30, 24, 0.62), transparent 62%);
}

.c-mock__headline {
  position: relative;
  z-index: 1;
  padding: clamp(0.5rem, 5%, 2.2rem);
  font-family: var(--mock-serif);
  font-size: clamp(0.92rem, 6cqw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--mock-cream);
}

.c-mock__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4%;
  flex-shrink: 0;
}

.c-mock__strip span {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1.4cqw, 9px);
  padding-top: clamp(4px, 1.6cqw, 10px);
  border-top: 1px solid var(--mock-line);
}

.c-mock__strip i {
  display: block;
  width: 62%;
  height: clamp(4px, 0.85cqw, 6px);
  border-radius: 2px;
  background-color: var(--mock-clay);
}

.c-mock__strip b {
  display: block;
  width: 100%;
  height: clamp(3px, 0.65cqw, 5px);
  border-radius: 2px;
  background-color: rgba(35, 51, 42, 0.22);
}

/* -------------------------------------------------------------------------
   03 · Problem
   ------------------------------------------------------------------------- */

.c-problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: start;
}

.c-problem__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--color-text-dim);
  padding-top: 0.6rem;
}

/* Deliberately NOT the same treatment as the concept promises further down
   the page: a left rule and a colon-like indent, so two three-up rows on one
   page don't read as the same component twice. */
.c-problem__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.c-problem__stats li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: var(--space-md);
  border-left: 2px solid var(--brand-accent-lift);
}

.c-problem__stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.c-problem__stat-value {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* -------------------------------------------------------------------------
   05 · Free concepts
   ------------------------------------------------------------------------- */

.c-concepts {
  overflow: hidden;
}

.c-concepts__head {
  margin-bottom: var(--space-xl);
}

.c-concepts__title {
  font-size: clamp(2.4rem, 8.4vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: var(--tracking-hero);
  text-transform: uppercase;
  margin-top: var(--space-md);
}

.c-concepts__title .c-line:nth-child(2) {
  color: var(--bone-100);
  opacity: 0.55;
}

.c-concepts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: center;
}

.c-concepts__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--color-text-dim);
  max-width: 50ch;
}

.c-concepts__lead {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: var(--fs-lead);
  line-height: 1.42;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.c-concepts__copy strong {
  color: var(--bone-100);
  font-weight: var(--weight-semi);
}

/* --- Concept cards ------------------------------------------------------- */

.c-concepts__visual {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

/* Two example directions — and, like the Cedar & Ash mock, deliberately not in
   Leviathan's palette. A is a deep botanical direction, B a warm editorial one.
   Neither uses this site's navy-and-maroon, because these are meant to show
   range rather than one house style. */
.c-concept-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  aspect-ratio: 3 / 4;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid rgba(251, 249, 245, 0.16);
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--transition-base);
}

.c-concept-card--a {
  transform: rotate(-2deg) translateY(0.6rem);
  background-color: #24352b;
}

.c-concept-card--b {
  transform: rotate(2deg);
  background-color: #f7f2e9;
}

.c-concepts__visual:hover .c-concept-card--a { transform: rotate(-3.5deg) translateY(0.2rem); }
.c-concepts__visual:hover .c-concept-card--b { transform: rotate(3.5deg) translateY(-0.4rem); }

.c-concept-card__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: rgba(224, 201, 163, 0.72);
  margin-bottom: 0.3rem;
}

.c-concept-card--b .c-concept-card__tag { color: rgba(35, 51, 42, 0.6); }

.c-concept-card__bar {
  display: block;
  width: var(--w, 100%);
  height: 8px;
  border-radius: 4px;
  background-color: rgba(251, 249, 245, 0.24);
}

.c-concept-card--b .c-concept-card__bar { background-color: rgba(35, 51, 42, 0.2); }

.c-concept-card__bar--head {
  height: 22px;
  border-radius: 6px;
  background-color: #e0c9a3;
}

.c-concept-card--b .c-concept-card__bar--head {
  background-color: #b8541f;
}

.c-concept-card__block {
  flex: 1;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, rgba(224, 201, 163, 0.34), rgba(224, 201, 163, 0.08));
  margin-top: 0.4rem;
}

.c-concept-card--b .c-concept-card__block {
  background: linear-gradient(150deg, #b8541f 0%, #6d3a1e 100%);
}

.c-concept-card__split {
  display: flex;
  gap: 0.6rem;
  flex: 1;
}

.c-concept-card__block--tall { flex: 0 0 42%; margin-top: 0; }

.c-concept-card__stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.c-concepts__promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

/* -------------------------------------------------------------------------
   07 · Process preview
   ------------------------------------------------------------------------- */

.c-process-preview__note {
  margin-top: var(--space-md);
  padding-left: 3.5rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   08 · Device demo
   ------------------------------------------------------------------------- */

.c-devices__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: clamp(var(--space-md), 4vw, var(--space-xl));
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(65, 105, 225, 0.12), transparent 62%),
    var(--color-surface);
}

.c-devices__controls {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background-color: rgba(7, 17, 31, 0.55);
}

.c-devices__btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  min-height: 2.5rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-dim);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.c-devices__btn:hover {
  color: var(--color-text);
}

.c-devices__btn.is-active {
  background-color: var(--bone-200);
  color: var(--color-text-on-light);
}

.c-devices__btn-w {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.06em;
  opacity: 0.6;
}

.c-devices__viewport {
  position: relative;
  width: 100%;
  max-width: 62rem;
  /* Height is fixed so switching sizes doesn't shove the page around. */
  height: clamp(20rem, 46vw, 30rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-devices__screen {
  position: relative;
  height: 100%;
  border: 2px solid var(--abyss-400);
  border-radius: var(--radius-md);
  background-color: var(--abyss-800);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  /* Deliberately NOT transitioning width. It is a layout property — animating
     it reflows the whole mock every frame, and in practice the transition
     latched at its initial value and left the frame 4px wide (borders only).
     Real breakpoints snap anyway, so snapping is also the honest behaviour. */
  transition: border-radius var(--dur-slow) var(--ease-out);
}

[data-size='phone'] .c-devices__screen { width: min(15rem, 84vw); border-radius: 26px; }
[data-size='tablet'] .c-devices__screen { width: min(30rem, 90vw); border-radius: 18px; }
[data-size='desktop'] .c-devices__screen { width: min(58rem, 96vw); border-radius: 12px; }

/* The mock reflows for real inside the frame — this is the point of the
   demonstration, so it uses the same kind of rules a real build would. */
/* The point of the demo: the same page genuinely rebuilds itself, it is not a
   scaled-down picture. The wordmark moves left, the reservation button becomes
   a menu, and the three-up strip stacks. */
[data-size='phone'] .c-mock--live { --mock-pad: 6.5%; gap: 5%; }
[data-size='phone'] .c-mock--live .c-mock__bar { grid-template-columns: 1fr auto; }
[data-size='phone'] .c-mock--live .c-mock__links,
[data-size='phone'] .c-mock--live .c-mock__cta { display: none; }
[data-size='phone'] .c-mock--live .c-mock__logo { grid-column: 1; text-align: left; }
[data-size='phone'] .c-mock--live .c-mock__burger { display: flex; grid-column: 2; }
[data-size='phone'] .c-mock--live .c-mock__strip { grid-template-columns: minmax(0, 1fr); }
[data-size='phone'] .c-mock--live .c-mock__strip span:nth-child(n + 3) { display: none; }

[data-size='tablet'] .c-mock--live .c-mock__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-size='tablet'] .c-mock--live .c-mock__strip span:nth-child(3) { display: none; }

.c-devices__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.c-devices__note {
  max-width: 52ch;
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--color-text-dim);
  text-align: center;
  line-height: var(--lh-loose);
}

/* -------------------------------------------------------------------------
   10 · Philosophy
   ------------------------------------------------------------------------- */

.c-philosophy {
  text-align: center;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(161, 43, 72, 0.16), transparent 60%),
    var(--color-bg);
}

.c-philosophy__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.c-philosophy__title {
  font-size: clamp(2rem, 6.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: var(--tracking-hero);
  text-transform: uppercase;
  margin-top: var(--space-sm);
}

.c-philosophy__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 54ch;
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--color-text-dim);
}

.c-philosophy__punch {
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  letter-spacing: -0.015em;
  color: var(--color-text);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-line);
}

/* =========================================================================
   Homepage responsive
   ========================================================================= */

@media (max-width: 1080px) {
  .c-problem__grid,
  .c-concepts__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-concepts__visual {
    max-width: 34rem;
  }
}

@media (max-width: 900px) {
  .c-hero {
    min-height: auto;
    padding-block: calc(var(--header-h) + var(--space-lg)) var(--space-xl);
  }

  .c-hero__mark {
    right: -14%;
    top: 8%;
    width: 62vw;
    transform: none;
    opacity: 0.1;
  }

  .c-hero__meta {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    margin-top: var(--space-lg);
  }

  .c-hero__meta-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    justify-content: space-between;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-line);
  }

  .c-hero__meta-item dt {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .c-hero__meta-item dd {
    text-align: right;
  }

  .c-problem__stats,
  .c-concepts__promises {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }

  .c-process-preview__note {
    padding-left: 0;
  }
}

@media (max-width: 620px) {
  .c-hero__title {
    max-width: none;
  }

  .c-hero__actions {
    width: 100%;
    flex-direction: column;
  }

  .c-hero__actions .c-btn {
    width: 100%;
  }

  .c-hero__cue-wrap {
    margin-top: var(--space-lg);
  }

  /* A 16:10 frame is unreadably short on a phone. Taller frame, and the
     handle gets a bigger target. */
  .c-transform__stage {
    aspect-ratio: 4 / 5;
  }

  .c-transform__grip {
    width: 3.75rem;
    height: 3.75rem;
  }

  .c-transform__caption {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: var(--space-2xs);
  }

  .c-transform__hint {
    order: 3;
    margin-top: var(--space-2xs);
  }

  .c-transform__tag {
    align-self: center;
  }

  .c-transform__panel--after .c-mock {
    --mock-pad: 6.5%;
    gap: 5%;
  }

  .c-transform__panel--after .c-mock__bar {
    grid-template-columns: 1fr auto;
  }

  .c-transform__panel--after .c-mock__links,
  .c-transform__panel--after .c-mock__cta {
    display: none;
  }

  .c-transform__panel--after .c-mock__logo {
    grid-column: 1;
    text-align: left;
  }

  .c-transform__panel--after .c-mock__burger {
    display: flex;
    grid-column: 2;
  }

  .c-transform__panel--after .c-mock__strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-transform__panel--after .c-mock__strip span:nth-child(n + 3) {
    display: none;
  }

  .c-old {
    font-size: clamp(0.5rem, 2.4cqw, 0.8rem);
  }

  .c-old__body {
    padding-inline: 2%;
  }

  .c-concepts__visual {
    gap: var(--space-sm);
  }

  .c-devices__controls {
    width: 100%;
    justify-content: space-between;
  }

  .c-devices__btn {
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.7rem;
    flex: 1;
    font-size: var(--fs-xs);
  }

  .c-devices__viewport {
    height: 24rem;
  }

  [data-size='desktop'] .c-devices__screen,
  [data-size='tablet'] .c-devices__screen {
    width: 100%;
  }
}