/* =====================================================================
   Orange Sky — home page system
   Editorial, high-contrast, theme-flipping. Plain CSS, no dependencies.

   Palette: exactly three literal colours — white, black, orange. Every
   other value in this file is a transparency or mix of those three, so
   the whole page can be re-tinted from the :root block alone.

   Loaded by every page. The inner-page components (page hero, feature
   cards, FAQ, contact lines) live in the INNER PAGES block at the end.
   ===================================================================== */

/* ---- Tokens --------------------------------------------------------- */
:root {
  --white: #ffffff;
  --black: #000000;
  --orange: #ffc21e;

  /* Live theme — swapped on scroll by os.js */
  --theme-bg: var(--white);
  --theme-ink: var(--black);
  --theme-line: rgba(0, 0, 0, 0.16);
  --theme-mute: rgba(0, 0, 0, 0.58);

  /* Panels and hairlines follow whatever ink the current theme uses */
  --surface: color-mix(in srgb, var(--theme-ink) 5%, transparent);
  --surface-line: color-mix(in srgb, var(--theme-ink) 14%, transparent);

  /* Accent TEXT colour. #ffc21e sits at ~1.7:1 on white, so it is only
     allowed to carry text on dark ground; on light ground the accent
     moves to fills, rules and underlines instead and the text stays ink. */
  --accent-ink: var(--black);

  /* Type */
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --sec: clamp(6rem, 12vw, 11rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max: 1440px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow: cubic-bezier(0.65, 0, 0.35, 1);
  --theme-dur: 0.7s;
}

/* Dark leg of the journey — the only place orange may be text */
[data-theme-state="dark"] {
  --theme-bg: var(--black);
  --theme-ink: var(--white);
  --theme-line: rgba(255, 255, 255, 0.18);
  --theme-mute: rgba(255, 255, 255, 0.62);
  --accent-ink: var(--orange);
}

/* Accent leg — the CTA, where orange becomes the ground */
[data-theme-state="accent"] {
  --theme-bg: var(--orange);
  --theme-ink: var(--black);
  --theme-line: rgba(0, 0, 0, 0.26);
  --theme-mute: rgba(0, 0, 0, 0.66);
  --accent-ink: var(--black);
}

/* ---- Reset ---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 0.92rem + 0.18vw, 1.02rem);
  font-weight: 400;
  line-height: 1.7;
  background: var(--theme-bg);
  color: var(--theme-ink);
  -webkit-font-smoothing: antialiased;
  transition: background var(--theme-dur) var(--ease-slow),
    color var(--theme-dur) var(--ease-slow);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--orange);
  color: var(--black);
}

/* Ink rather than orange: a focus ring has to clear 3:1 against whatever
   it sits on, and orange only manages that on the dark leg. */
:focus-visible {
  outline: 3px solid var(--theme-ink);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Layout --------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--sec);
}

/* Continues the section above it under one theme — no seam between them. */
.section--joined {
  padding-top: 0;
}

/* A short section that hands off to a theme flip would otherwise stack its
   own bottom rhythm on top of the next section's, leaving a band of flat
   colour taller than the content itself. */
.section--tight-end {
  padding-bottom: calc(var(--sec) * 0.5);
}

.rule {
  height: 1px;
  background: var(--theme-line);
  transition: background var(--theme-dur) var(--ease-slow);
}

/* ---- Type ----------------------------------------------------------- */
/* Poppins is a geometric face with a tall x-height and long descenders, so
   it wants more leading and far less negative tracking than a grotesk. */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.d-1 {
  font-size: clamp(2.35rem, 6.5vw, 6.4rem);
}

.d-2 {
  font-size: clamp(2rem, 4.6vw, 4.1rem);
}

.d-3 {
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  letter-spacing: -0.02em;
}

/* Block-level but shrink-to-fit: inline-flex would let an inline-block
   sibling (the CTA headline) ride up onto the same line. */
.eyebrow {
  display: flex;
  width: fit-content;
  gap: 0.75em;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--theme-mute);
  transition: color var(--theme-dur) var(--ease-slow);
}

.eyebrow::before {
  width: 2.25rem;
  height: 1px;
  content: "";
  background: currentColor;
}

.lead {
  max-width: 34ch;
  font-size: clamp(1rem, 0.92rem + 0.45vw, 1.22rem);
  line-height: 1.6;
  color: var(--theme-mute);
  transition: color var(--theme-dur) var(--ease-slow);
}

.measure {
  max-width: 46ch;
  color: var(--theme-mute);
  transition: color var(--theme-dur) var(--ease-slow);
}

.accent {
  color: var(--accent-ink);
  transition: color var(--theme-dur) var(--ease-slow);
}

/* Orange underline that draws in on reveal. On light ground this rule is
   the whole accent — the word itself stays ink so it keeps its contrast. */
/* The underline is an inline background rather than a pseudo-element, so a
   phrase that wraps on a narrow screen underlines each line, not a box. */
.mark {
  color: var(--accent-ink);
  background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 92% / 0 0.09em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: color var(--theme-dur) var(--ease-slow), background-size 0.9s var(--ease) 0.5s;
}

.in .mark,
.r.in .mark {
  background-size: 100% 0.09em;
}

/* ---- Reveals -------------------------------------------------------- */
/* Masked line reveal — the mask is the parent, the span does the moving.
   Display type runs tighter than 1, so the line box is shorter than the
   glyphs. The padding grows the mask past Poppins' long descenders and the
   matching negative margin hands the space back, leaving layout untouched. */
.line {
  display: block;
  padding-block: 0.1em 0.26em;
  margin-block: -0.1em -0.26em;
  overflow: hidden;
}

.line > span {
  display: block;
  transform: translateY(120%);
  transition: transform 1.05s var(--ease);
}

.in .line > span,
.line.in > span {
  transform: translateY(0);
}

.line:nth-child(2) > span {
  transition-delay: 0.08s;
}
.line:nth-child(3) > span {
  transition-delay: 0.16s;
}
.line:nth-child(4) > span {
  transition-delay: 0.24s;
}

/* Generic soft reveal */
.r {
  opacity: 0;
  transform: translateY(1.75rem);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.r.in {
  opacity: 1;
  transform: none;
}

.js .r[data-delay] {
  transition-delay: var(--d, 0ms);
}

/* ---- Custom cursor -------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: var(--orange);
  border-radius: 999px;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition: width 0.45s var(--ease), height 0.45s var(--ease),
    background 0.45s var(--ease), opacity 0.3s linear;
  will-change: transform;
}

.cursor.is-visible {
  opacity: 1;
}

.cursor__label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--black);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s var(--ease), transform 0.45s var(--ease);
}

/* Pill state — expands into a labelled capsule */
.cursor.is-pill {
  width: var(--cw, 7.5rem);
  height: var(--ch, 3.125rem);
}

.cursor.is-pill .cursor__label {
  opacity: 1;
  transform: none;
}

.cursor.is-ink {
  background: var(--black);
}

.cursor.is-ink .cursor__label {
  color: var(--white);
}

/* JS owns the transform, so the press state rides in as a variable */
.cursor.is-down {
  --cs: 0.82;
}

/* Only hide the native cursor where a real pointer exists */
@media (hover: hover) and (pointer: fine) {
  .js [data-cursor] {
    cursor: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ---- Header --------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  padding-block: 1.4rem;
  color: var(--theme-ink);
  transition: padding 0.4s var(--ease), background 0.4s var(--ease),
    transform 0.5s var(--ease), color var(--theme-dur) var(--ease-slow);
}

.header.is-stuck {
  padding-block: 0.85rem;
  background: color-mix(in srgb, var(--theme-bg) 82%, transparent);
  backdrop-filter: blur(14px);
}

.header.is-hidden {
  transform: translateY(-105%);
}

.header__inner {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand__logo {
  display: block;
  width: auto;
  height: 2rem;
  transition: height 0.4s var(--ease), transform 0.5s var(--ease);
}

.header.is-stuck .brand__logo {
  height: 1.75rem;
}

/* The cloud drifts up a touch as you point at it. */
.brand:hover .brand__logo {
  transform: translateY(-2px);
}

.nav {
  display: flex;
  gap: clamp(0.85rem, 1.5vw, 1.5rem);
  align-items: center;
  font-size: 0.84rem;
  font-weight: 500;
  white-space: nowrap;
}

.nav a {
  position: relative;
  padding-block: 0.3rem;
}

/* An item with nowhere to go yet. It still reads as part of the menu, but it
   is muted and inert so nobody clicks into a dead end. */
.nav-soon {
  padding-block: 0.3rem;
  color: var(--theme-mute);
  cursor: default;
  transition: color var(--theme-dur) var(--ease-slow);
}

.drawer .nav-soon {
  padding-block: 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* Two-layer text swap on hover — the label is duplicated via data-t and the
   stack slides up by exactly one line. The incoming copy is ink with an
   orange rule under it, since orange type would drop out on white. */
.swap {
  display: block;
  height: 1.4em;
  overflow: hidden;
  line-height: 1.4;
}

.swap span {
  display: block;
  line-height: 1.4;
  transition: transform 0.45s var(--ease);
}

.swap span::after {
  display: block;
  width: fit-content;
  line-height: 1.4;
  content: attr(data-t);
  border-bottom: 2px solid var(--orange);
}

.nav a:hover .swap span {
  transform: translateY(-50%);
}

.header__right {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

/* ---- Buttons & links ------------------------------------------------ */
/* The hover fill rises from the bottom as a background-size transition —
   a pseudo-element would sit behind the button's own background. */
.btn {
  position: relative;
  display: inline-flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% 0%;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease),
    background-size 0.45s var(--ease);
}

.btn:hover {
  background-size: 100% 100%;
}

/* Orange ground with ink type; the hover fill inverts it to ink/white. */
.btn--solid {
  color: var(--black);
  background-color: var(--orange);
  background-image: linear-gradient(var(--black), var(--black));
}

.btn--solid:hover {
  color: var(--white);
}

.btn--ghost {
  background-image: linear-gradient(var(--orange), var(--orange));
  border-color: var(--theme-line);
}

.btn--ghost:hover {
  color: var(--black);
  border-color: var(--orange);
}

.btn--lg {
  padding: 1.15rem 2rem;
  font-size: 0.92rem;
}

/* Arrow that leaves and re-enters — the "→ →" move */
.arrowbox {
  display: inline-block;
  width: 1em;
  overflow: hidden;
}

.arrowbox i {
  display: flex;
  font-style: normal;
  transition: transform 0.5s var(--ease);
}

.arrowbox i span {
  flex: 0 0 100%;
}

.btn:hover .arrowbox i,
.alink:hover .arrowbox i {
  transform: translateX(-100%);
}

.alink {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  padding-block: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 1px solid var(--theme-line);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease),
    gap 0.4s var(--ease);
}

.alink:hover {
  gap: 0.9rem;
  color: var(--accent-ink);
  border-color: var(--orange);
}

/* ---- Hero ----------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: clamp(7rem, 13vh, 9rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
}

.hero__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.hero__h1 {
  margin-top: 1.4rem;
}

/* Rotating word. On light ground the orange becomes a highlight block with
   ink type inside it — the same figure/ground relationship as the marquee
   bands — because orange type on white would not hold up. */
.rotator {
  position: relative;
  display: inline-grid;
  padding-block: 0.15em 0.19em;
  padding-inline: 0.16em;
  margin-block: -0.15em -0.19em;
  margin-inline: -0.02em;
  overflow: hidden;
  background: var(--orange);
  vertical-align: bottom;
  transition: background var(--theme-dur) var(--ease-slow);
}

.rotator > span {
  grid-area: 1 / 1;
  color: var(--black);
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.8s var(--ease), opacity 0.5s var(--ease);
}

[data-theme-state="dark"] .rotator {
  padding-inline: 0;
  margin-inline: 0;
  background: transparent;
}

[data-theme-state="dark"] .rotator > span {
  color: var(--orange);
}

.rotator > span.is-out {
  opacity: 0;
  transform: translateY(-100%);
}

.rotator > span.is-in {
  opacity: 1;
  transform: translateY(0);
}

.hero__base {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: end;
  padding-top: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--theme-line);
  transition: border-color var(--theme-dur) var(--ease-slow);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.5rem;
}

/* Poppins sets wider than a grotesk, so a value like "Built to scale" wraps
   where the old face did not. Pinning the label to the bottom of a stretched
   cell keeps the three labels on one line however the values break. */
.stat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.stat span {
  display: block;
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--theme-mute);
  transition: color var(--theme-dur) var(--ease-slow);
}

.scrollcue {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--theme-mute);
}

.scrollcue i {
  display: block;
  width: 2px;
  height: 2.4rem;
  overflow: hidden;
  background: var(--theme-line);
}

/* A 2px bar rather than a hairline — orange needs some mass to register
   against white. */
.scrollcue i::after {
  display: block;
  width: 2px;
  height: 45%;
  content: "";
  background: var(--orange);
  animation: cue 2.2s var(--ease-slow) infinite;
}

@keyframes cue {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(240%);
  }
}

/* ---- Marquee -------------------------------------------------------- */
.marquee {
  padding-block: clamp(1.1rem, 2.2vw, 1.8rem);
  overflow: hidden;
  background: var(--orange);
  border-block: 1px solid transparent;
  transform: skewY(-0.001deg); /* promotes its own layer */
}

.marquee--invert {
  background: var(--black);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  will-change: transform;
}

.marquee__group {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-right: clamp(1.5rem, 3vw, 3rem);
  animation: slide 32s linear infinite;
}

.marquee--rev .marquee__group {
  animation-direction: reverse;
}

@keyframes slide {
  to {
    transform: translateX(-100%);
  }
}

.marquee:hover .marquee__group {
  animation-play-state: paused;
}

.marquee__item {
  display: flex;
  gap: 0.45em; /* also the space before the cloud separator, which is an ::after */
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.1vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--black);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Alternating outlined words keep the band from reading as a solid slab.
   The stroke needs an explicit colour — currentColor is transparent here. */
.marquee__item:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--black);
}

.marquee--invert .marquee__item {
  color: var(--orange);
}

.marquee--invert .marquee__item:nth-child(even) {
  color: transparent;
  -webkit-text-stroke-color: var(--white);
}

/* The outlined words set colour to transparent, so a currentColor glyph would
   disappear with them — the platform marks use the band's ink instead. */
.marquee__item .bmark {
  height: 0.78em;
  fill: var(--marquee-ink);
}

.marquee__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: currentColor;
  border-radius: 999px;
}

.marquee--invert .marquee__dot {
  background: var(--orange);
}

/* ---- Section heads -------------------------------------------------- */
.head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(3rem, 7vw, 6rem);
}

.head__title {
  margin-top: 1.2rem;
}

/* ---- Products — editorial rows -------------------------------------- */
.work {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(4.5rem, 9vw, 9rem);
}

.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.row__body {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: flex-start;
}

.row__index {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-mute);
}

.row__index b {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--accent-ink);
  transition: color var(--theme-dur) var(--ease-slow);
}

/* The USP list. Each line leads with the claim and follows with the proof,
   so it can be skimmed at speed and still say something. */
.row__list {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  max-width: 34rem;
}

.row__list li {
  position: relative;
  padding-block: 0.85rem;
  padding-left: 1.1rem;
  font-size: 0.93rem;
  border-top: 1px solid var(--theme-line);
  transition: border-color var(--theme-dur) var(--ease-slow),
    padding-left 0.4s var(--ease);
}

.row__list li:last-child {
  border-bottom: 1px solid var(--theme-line);
}

/* Orange rule that draws across the line you are pointing at. */
.row__list li::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

.row__list li::after {
  position: absolute;
  top: 1.38rem;
  left: 0;
  width: 0.36rem;
  height: 0.36rem;
  content: "";
  background: var(--orange);
  border-radius: 50%;
  transform: scale(0.55);
  transition: transform 0.4s var(--ease);
}

.row__list li:hover {
  padding-left: 1.5rem;
}

.row__list li:hover::before {
  transform: scaleX(1);
}

.row__list li:hover::after {
  transform: scale(1);
}

.row__list b {
  display: block;
  font-weight: 600;
  color: var(--theme-ink);
}

.row__list span {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.87rem;
  color: var(--theme-mute);
}

/* The product name is the primary click target, so it has to look like one. */
.row__title {
  position: relative;
  display: inline-block;
  color: inherit;
}

.row__title::after {
  position: absolute;
  bottom: 0.02em;
  left: 0;
  width: 100%;
  height: 0.07em;
  content: "";
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}

.row:hover .row__title::after,
.row__title:focus-visible::after {
  transform: scaleX(1);
}

/* Media panel — the hover target that morphs the cursor */
.row__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 4px;
  transition: border-color 0.5s var(--ease);
}

/* Pointing anywhere in the row lights the whole row, not just the panel. */
.row:hover .row__media {
  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
}

.row__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--orange) 26%, transparent),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.row__media:hover::after {
  opacity: 1;
}

.row__inner {
  position: absolute;
  inset: 0;
  display: grid;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  place-items: center;
  transition: transform 0.9s var(--ease);
}

.row__media:hover .row__inner {
  transform: scale(1.035);
}

/* Product shot fills the panel; the chip and hover wash sit above it */
.row__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inverted against the panel so it reads on either theme */
.chip {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  left: clamp(1rem, 2vw, 1.5rem);
  z-index: 2;
  padding: 0.4rem 0.85rem;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--theme-bg);
  text-transform: uppercase;
  background: var(--theme-ink);
  border-radius: 999px;
  transition: color var(--theme-dur) var(--ease-slow),
    background var(--theme-dur) var(--ease-slow);
}

/* ---- Product mocks (pure CSS/SVG) ----------------------------------- */
.mock {
  display: block;
  width: 100%;
  max-width: 30rem;
  padding: 1.35rem;
  background: var(--theme-bg);
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  transition: background var(--theme-dur) var(--ease-slow);
}

.mock__row {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--surface-line);
}

.mock__av {
  display: grid;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--black);
  place-items: center;
  background: var(--orange);
  border-radius: 999px;
}

.mock__lines {
  display: grid;
  flex: 1;
  gap: 0.4rem;
}

.mock__lines i {
  display: block;
  height: 0.42rem;
  background: currentColor;
  border-radius: 999px;
  opacity: 0.22;
}

.mock__tag {
  flex: none;
  padding: 0.25rem 0.6rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.5;
}

.mock__tag.ok {
  color: var(--accent-ink);
  opacity: 1;
}

.mock__foot {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding-top: 1rem;
}

.mock__foot strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--accent-ink);
}

.mock__foot span {
  font-size: 0.8rem;
  opacity: 0.6;
}

.mock__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
}

.kpi {
  display: block;
  padding: 0.9rem 1rem;
  border: 1px solid var(--surface-line);
  border-radius: 8px;
}

.kpi span {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

.kpi strong {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.kpi.up strong {
  color: var(--accent-ink);
}

.mock__chart {
  display: block;
}

.mock__chart svg {
  width: 100%;
  height: 6rem;
}

/* The polyline carries pathLength="1", so the dash maths is resolution-free.
   Setting stroke here overrides the presentation attribute in the markup. */
.spark {
  stroke: var(--orange);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease) 0.25s;
}

.spark-area {
  fill: color-mix(in srgb, var(--orange) 16%, transparent);
}

.in .spark {
  stroke-dashoffset: 0;
}

.mock__bar {
  display: flex;
  gap: 0.35rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--surface-line);
}

.mock__bar i {
  width: 0.5rem;
  height: 0.5rem;
  background: currentColor;
  border-radius: 999px;
  opacity: 0.3;
}

.mock__hero {
  display: block;
  height: 5.5rem;
  margin-bottom: 0.6rem;
  background: linear-gradient(
    120deg,
    var(--orange),
    color-mix(in srgb, var(--orange) 45%, var(--black))
  );
  border-radius: 6px;
}

.mock__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.mock__grid span {
  height: 2.6rem;
  background: currentColor;
  border-radius: 6px;
  opacity: 0.14;
}

/* ---- Results carousel ----------------------------------------------- */
.results__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.carousel {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-bottom: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.slide {
  display: flex;
  flex: 0 0 min(22rem, 78vw);
  flex-direction: column;
  gap: 0.8rem;
  justify-content: space-between;
  min-height: 15rem;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  scroll-snap-align: start;
  transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}

.slide:hover {
  background: color-mix(in srgb, var(--orange) 14%, transparent);
  border-color: var(--orange);
}

.slide strong {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--accent-ink);
  transition: color var(--theme-dur) var(--ease-slow);
}

.slide p {
  font-size: 0.93rem;
  color: var(--theme-mute);
}

.slide__label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-mute);
}

.carousel__nav {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.cbtn {
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.cbtn:hover:not(:disabled) {
  color: var(--black);
  background: var(--orange);
  border-color: var(--orange);
}

.cbtn:disabled {
  opacity: 0.32;
}

.carousel__count {
  min-width: 4.5rem;
  text-align: center;
  color: var(--theme-mute);
}

/* ---- Process -------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--theme-line);
}

/* The hovered row takes an orange rule rather than orange type — on the
   light leg the rule is the only form the accent can hold. */
.step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  padding-block: clamp(1.8rem, 3.5vw, 2.6rem);
  border-bottom: 2px solid var(--theme-line);
  transition: border-color 0.45s var(--ease);
}

.step:hover {
  border-bottom-color: var(--orange);
}

.step__n {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--theme-mute);
}

.step__t {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  transition: transform 0.55s var(--ease), color 0.4s var(--ease);
}

.step:hover .step__t {
  color: var(--accent-ink);
  transform: translateX(0.6rem);
}

.step p {
  max-width: 42ch;
  color: var(--theme-mute);
}

/* ---- Why — asymmetric split ----------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.values {
  display: grid;
  gap: 0;
}

.value {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding-block: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--theme-line);
  transition: border-color var(--theme-dur) var(--ease-slow);
}

.value:last-child {
  border-bottom: 1px solid var(--theme-line);
}

/* Small enough that orange would fail on white, so the number sits in an
   orange chip instead and keeps ink type. */
.value__n {
  align-self: start;
  padding: 0.15rem 0.5rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--black);
  background: var(--orange);
  border-radius: 999px;
}

.value h3 {
  margin-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.value p {
  color: var(--theme-mute);
}

/* ---- Founders ------------------------------------------------------- */
/* Two people, side by side, on the same card language as the product rows:
   a bordered panel that lights orange when you point at it. */
.founders {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.founder {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.founder__media {
  position: relative;
  /* Wide enough to carry a face, short of filling the column — a portrait at
     full column width would tower over the text under it. */
  max-width: 27rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 4px;
  transition: border-color 0.5s var(--ease);
}

.founder__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Held just short of full colour so the portraits sit with the palette
     instead of shouting over it; pointing at one brings it back. */
  filter: saturate(0.82) contrast(1.04);
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}

.founder:hover .founder__media {
  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
}

.founder:hover .founder__media img {
  filter: none;
  transform: scale(1.03);
}

/* The orange wash that the product panels use, so the two read as siblings. */
.founder__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    200deg,
    color-mix(in srgb, var(--orange) 22%, transparent),
    transparent 58%
  );
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.founder:hover .founder__media::after {
  opacity: 1;
}

.founder__kicker {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.founder__name {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

/* Same hairline rhythm as the product USPs, one notch quieter. */
.founder__own {
  display: grid;
  gap: 0.1rem;
  margin-top: 1.6rem;
}

.founder__own li {
  position: relative;
  padding-block: 0.7rem;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--theme-mute);
  border-top: 1px solid var(--theme-line);
  transition: color var(--theme-dur) var(--ease-slow),
    border-color var(--theme-dur) var(--ease-slow);
}

.founder__own li:last-child {
  border-bottom: 1px solid var(--theme-line);
}

.founder__own li::before {
  position: absolute;
  top: 1.15rem;
  left: 0;
  width: 0.36rem;
  height: 0.36rem;
  content: "";
  background: var(--orange);
  border-radius: 50%;
  transform: scale(0.55);
  transition: transform 0.4s var(--ease);
}

.founder:hover .founder__own li {
  color: var(--theme-ink);
}

.founder:hover .founder__own li::before {
  transform: scale(1);
}

/* ---- Quote ---------------------------------------------------------- */
/* A ch unit here would resolve against the figure's body font-size, not the
   display size of the blockquote inside it — so this is sized in rem. */
.quote {
  max-width: 58rem;
  margin-inline: auto;
  text-align: center;
}

.quote blockquote {
  margin-block: 1.8rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

.quote figcaption {
  font-size: 0.88rem;
  color: var(--theme-mute);
}

.quote figcaption strong {
  font-weight: 600;
  color: var(--theme-ink);
}

/* ---- CTA ------------------------------------------------------------ */
.cta {
  padding-block: clamp(6rem, 13vw, 12rem);
  text-align: center;
}

.cta .eyebrow,
.quote .eyebrow {
  margin-inline: auto;
}

.cta__big {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9.5vw, 8.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.95;
  transition: transform 0.6s var(--ease);
}

.cta__big:hover {
  transform: scale(1.015);
}

.cta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.5rem, 4vw, 3.5rem);
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
}

.cta__meta a {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.35s var(--ease);
}

.cta__meta a:hover {
  opacity: 0.6;
}

/* ---- Footer --------------------------------------------------------- */
.footer {
  padding-block: clamp(3.5rem, 7vw, 6rem) 2rem;
  color: var(--white);
  background: var(--black);
}

/* The footer sits outside the theme flip, so the lockup cannot inherit
   --theme-ink here — on the accent leg that resolves to black on black. */
.footer .brand__logo {
  --lg-cloud-fill: var(--orange);
  --lg-word-fill: var(--white);

  height: 2.4rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.footer__col h4 {
  margin-bottom: 1.1rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
}

.footer__col li {
  margin-bottom: 0.6rem;
}

.footer__col a {
  font-size: 0.93rem;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease), color 0.3s var(--ease);
}

.footer__col a:hover {
  color: var(--orange);
  opacity: 1;
}

.footer__brand p {
  max-width: 30ch;
  margin-top: 1.1rem;
  font-size: 0.93rem;
  opacity: 0.6;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 1.8rem;
  font-size: 0.83rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0.55;
}

/* ---- Mobile nav ----------------------------------------------------- */
.burger {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
}

.burger i {
  position: relative;
  display: block;
  width: 1rem;
  height: 1px;
  background: currentColor;
  transition: background 0.3s var(--ease);
}

.burger i::before,
.burger i::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: currentColor;
  transition: transform 0.4s var(--ease);
}

.burger i::before {
  transform: translateY(-5px);
}

.burger i::after {
  transform: translateY(5px);
}

.is-open .burger i {
  background: transparent;
}

.is-open .burger i::before {
  transform: rotate(45deg);
}

.is-open .burger i::after {
  transform: rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  padding: 7rem var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  align-content: start;
  gap: 0.2rem;
  background: var(--black);
  transition: clip-path 0.7s var(--ease);
}

.is-open .drawer {
  clip-path: inset(0 0 0 0);
}

/* The open drawer puts black behind the header, which still carries the ink of
   whatever section is underneath it — on the light leg that is black on black.
   Same custom-property route as the footer, since a descendant selector cannot
   reach into the <use> shadow tree. */
.is-open .header .brand__logo {
  --lg-cloud-fill: var(--orange);
  --lg-word-fill: var(--white);
}

.is-open .burger {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.28);
}

.drawer a {
  padding-block: 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.drawer a:hover {
  color: var(--orange);
}

/* ---- Responsive ----------------------------------------------------- */
@media (min-width: 720px) {
  .steps {
    grid-template-columns: 1fr;
  }

  .step {
    grid-template-columns: 6rem 1fr 1fr;
    gap: 2rem;
    align-items: baseline;
  }

  .hero__base {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .hero__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Eight menu items need more room than the rest of the layout does, so the
   nav switches to the drawer at its own, later breakpoint. */
@media (min-width: 1240px) {
  .nav {
    display: flex;
  }

  .burger {
    display: none;
  }
}

@media (max-width: 1239px) {
  .nav {
    display: none;
  }
}

@media (min-width: 900px) {
  .head {
    grid-template-columns: 7fr 5fr;
    gap: clamp(2rem, 5vw, 5rem);
  }

  .row {
    grid-template-columns: 5fr 7fr;
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .row--flip .row__body {
    order: 2;
  }

  .row--flip .row__media {
    order: 1;
  }

  /* The USP list makes the body column far taller than a 4:3 panel, which left
     the picture floating in a pool of empty space. A fixed ratio cannot fix
     that — the media column is the wide one on odd rows and the narrow one on
     flipped rows — so let the panel take the height of the row it sits in. */
  .row {
    align-items: stretch;
  }

  .row__media {
    aspect-ratio: auto;
    min-height: 26rem;
  }

  .split {
    grid-template-columns: 5fr 6fr;
    gap: clamp(3rem, 7vw, 7rem);
  }

  /* Side by side. The portrait stays above its own text rather than beside it:
     in a half-width column a side-by-side photo shrinks to a thumbnail, and
     these two faces are the point of the section. */
  .founders {
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: clamp(2rem, 4vw, 4rem);
  }

  .hero__top {
    grid-template-columns: 1fr;
  }
}

/* ---- Mascot --------------------------------------------------------- */
/* The studio's character — ink figure, orange offset shadow. He is
   decorative (alt="") and only ever stands on the light and accent legs of
   the theme flip: on the dark leg his black coat would vanish into the
   ground. Each pose sits on a real line — the hero rule, the top of the
   steps, a section edge — rather than floating in space. */
.mascot {
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.mascot--hero,
.mascot--cane {
  display: none;
}

/* Peeking up out of the bottom edge of the section. */
.mascot--peek {
  width: min(72%, 20rem);
  margin-bottom: calc(-1 * var(--sec));
}

.cta {
  position: relative;
  overflow: hidden;
}

/* On phones he closes the CTA, rising out of the footer. */
.mascot--cta {
  width: min(62%, 15rem);
  margin: clamp(2.5rem, 8vw, 4rem) auto calc(-1 * clamp(6rem, 13vw, 12rem));
}

@media (min-width: 900px) {
  /* Standing on the top rule of the steps, in the head's empty column. The
     negative top margin lets him borrow the section's top padding instead
     of pushing the title down. */
  .mascot--cane {
    display: block;
    align-self: end;
    justify-self: end;
    width: clamp(8.5rem, 11vw, 10.5rem);
    margin-top: calc(-0.55 * var(--sec));
    margin-right: clamp(0rem, 4vw, 4rem);
    margin-bottom: calc(-1 * clamp(3rem, 7vw, 6rem));
  }

  .split .values {
    grid-row: span 2;
    align-self: center;
  }

  /* Under the copy, glancing up at the heading. */
  .mascot--peek {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    width: clamp(15rem, 22vw, 21rem);
  }
}

@media (min-width: 1100px) {
  .hero__top {
    position: relative;
  }

  /* Cross-legged on the hero rule, the stack growing out of his head. */
  .mascot--hero {
    display: block;
    position: absolute;
    right: 0;
    bottom: calc(-1 * clamp(2.5rem, 6vw, 5rem));
    width: clamp(14rem, 19vw, 19rem);
  }

  /* Side by side from here: the copy moves left so he has a corner to
     rise into and look down at it from. */
  .cta {
    text-align: left;
  }

  .cta .eyebrow {
    margin-inline: 0;
  }

  .cta__big {
    transform-origin: left center;
  }

  .cta__meta {
    justify-content: flex-start;
    max-width: calc(100% - clamp(15rem, 20vw, 20rem) - 3rem);
  }

  .mascot--cta {
    position: absolute;
    right: max(var(--gutter), (100% - var(--max)) / 2 + var(--gutter));
    bottom: 0;
    width: clamp(15rem, 20vw, 20rem);
    margin: 0;
  }
}

/* ---- Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .r {
    opacity: 1;
    transform: none;
  }

  .line > span {
    transform: none;
  }

  .cursor {
    display: none;
  }
}

/* No-JS fallback — never hide content behind a reveal that can't run */
html:not(.js) .r {
  opacity: 1;
  transform: none;
}

html:not(.js) .line > span {
  transform: none;
}

/* Without JS the rotator never gets its first word, so pin one open */
html:not(.js) .rotator > span:first-child {
  opacity: 1;
  transform: none;
}

html:not(.js) .rotator > span:not(:first-child) {
  display: none;
}

html:not(.js) .spark {
  stroke-dashoffset: 0;
}


/* =====================================================================
   BRAND MARKS
   The Orange Sky lockup and the three product marks live in an inline
   <svg> sprite so their fills can be driven by the theme tokens rather
   than baked into a file. Nothing here uses a colour literal.
   ===================================================================== */

/* The sprite itself is markup, not artwork — keep it out of the flow. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --- The lockup ------------------------------------------------------ */
/* The cloud carries the accent and the wordmark carries the ink, so the
   logo re-colours itself on every theme flip instead of needing three
   exported files. */
/* A descendant selector cannot reach inside a <use> shadow tree, so every
   per-context override has to ride in on an inherited custom property set
   on the <svg> in the light DOM. Only the bare class selectors below match. */
.lg-cloud {
  fill: var(--lg-cloud-fill, var(--orange));
  transition: fill var(--theme-dur) var(--ease-slow);
}

.lg-word {
  fill: var(--lg-word-fill, var(--theme-ink));
  transition: fill var(--theme-dur) var(--ease-slow);
}

/* On the orange leg an orange cloud would vanish into the ground, so the
   cloud flips to white and the wordmark stays ink. */
/* Scoped to the header: the footer sets its own fills and sits outside the
   flip, and an unscoped rule here would outrank it on the cascade. */
[data-theme-state="accent"] .header .brand__logo {
  --lg-cloud-fill: var(--white);
}

/* --- Product marks --------------------------------------------------- */
/* Two-tone: mk-a is the accent, mk-b knocks back out to the ground so the
   LinkedIn plate reads as a hole rather than a white sticker. */
.mk-a {
  fill: var(--mk-a-fill, var(--orange));
  transition: fill var(--theme-dur) var(--ease-slow);
}

.mk-b {
  fill: var(--mk-b-fill, var(--theme-bg));
  transition: fill var(--theme-dur) var(--ease-slow);
}

/* The Skylitee and Sky Gallery marks are single-colour. */
.pmark,
.plock__mark {
  fill: var(--orange);
  transition: fill var(--theme-dur) var(--ease-slow);
}

[data-theme-state="accent"] .pmark,
[data-theme-state="accent"] .plock__mark {
  --mk-a-fill: var(--black);

  fill: var(--black);
}

/* --- Platform glyphs -------------------------------------------------- */
/* Shopify, LinkedIn, GA, Google Business, Reporting. Single-colour, so they
   take the ink of whatever they sit in and never fight the three-colour rule. */
.bmark {
  flex: none;
  width: auto;
  height: 1em;
  fill: currentColor;
}

/* "Connects / Runs on / Built for" — the platform row under each product. */
.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.8rem;
  align-items: center;
}

.stack__label {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-mute);
}

.tag {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--theme-ink);
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  transition: border-color 0.4s var(--ease),
    color var(--theme-dur) var(--ease-slow);
}

.tag .bmark {
  height: 1.15em;
  color: var(--accent-ink);
}

.row:hover .tag {
  border-color: color-mix(in srgb, var(--orange) 45%, transparent);
}

/* Sits in the row's index line, ahead of the number. */
.pmark {
  align-self: center;
  width: auto;
  height: 1.5rem;
}

/* =====================================================================
   THE FAMILY STRIP
   Sits between the hero and the first marquee: the three real product
   marks, so the page is unmistakably this studio's and not a template.
   ===================================================================== */
.family {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4.5rem);
  color: var(--theme-ink);
  border-top: 1px solid var(--theme-line);
  transition: color var(--theme-dur) var(--ease-slow),
    border-color var(--theme-dur) var(--ease-slow);
}

.family__label {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-mute);
}

.family__cloud {
  width: auto;
  height: 0.85rem;
  fill: var(--orange);
}

[data-theme-state="accent"] .family__cloud {
  fill: var(--black);
}

.family__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* --- One product lockup ---------------------------------------------- */
.plock {
  position: relative;
  display: grid;
  grid-template-areas: "mark name" "mark note";
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-items: center;
  padding-block: 0.9rem;
  border-top: 1px solid var(--theme-line);
  transition: border-color 0.45s var(--ease);
}

/* The rule under the row is the only place the accent can appear on the
   light leg — orange type this small would not clear 4.5:1 on white. */
.plock::after {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}

.plock:hover::after,
.plock:focus-visible::after {
  transform: scaleX(1);
}

.plock__mark {
  grid-area: mark;
  width: auto;
  height: 2.1rem;
  transition: transform 0.5s var(--ease), fill var(--theme-dur) var(--ease-slow);
}

.plock:hover .plock__mark {
  transform: translateY(-3px);
}

.plock__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* The live product ships as skylinked.in, so the TLD is part of the name. */
.plock__name em {
  font-style: normal;
  color: var(--theme-mute);
}

.plock__note {
  grid-area: note;
  font-size: 0.85rem;
  color: var(--theme-mute);
}

/* =====================================================================
   The cloud as a marquee separator — one mask, tinted by the band it is
   in, so the same glyph works on the orange and the inverted band.
   ===================================================================== */
.marquee {
  --marquee-ink: var(--black);
}

.marquee--invert {
  --marquee-ink: var(--orange);
}

.marquee__item::after {
  display: inline-block;
  width: 1.05em;
  height: 0.63em;
  margin-left: clamp(1.5rem, 3vw, 3rem);
  vertical-align: 0.04em;
  content: "";
  background: var(--marquee-ink);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 601'><path fill='black' d='M408.7 9.1L360.6 28.3L302.9 66.2L263.9 105.8L228.9 158.7L204.9 221.2L195.8 278.8L115.4 286.4L62.5 311.3L18.3 360.6L-1.2 418.3L3.1 480.8L22.5 524.0L72.1 572.8L125.0 593.5L841.3 596.3L889.4 588.4L942.3 558.3L977.9 514.4L996.2 456.7L992.1 399.0L967.0 346.2L932.7 311.7L894.2 291.1L860.6 282.5L794.4 278.8L785.3 221.2L770.5 177.9L718.1 96.2L668.3 51.5L629.8 28.6L581.7 9.2L533.7 -1.1L461.5 -1.8Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 601'><path fill='black' d='M408.7 9.1L360.6 28.3L302.9 66.2L263.9 105.8L228.9 158.7L204.9 221.2L195.8 278.8L115.4 286.4L62.5 311.3L18.3 360.6L-1.2 418.3L3.1 480.8L22.5 524.0L72.1 572.8L125.0 593.5L841.3 596.3L889.4 588.4L942.3 558.3L977.9 514.4L996.2 456.7L992.1 399.0L967.0 346.2L932.7 311.7L894.2 291.1L860.6 282.5L794.4 278.8L785.3 221.2L770.5 177.9L718.1 96.2L668.3 51.5L629.8 28.6L581.7 9.2L533.7 -1.1L461.5 -1.8Z'/></svg>") center / contain no-repeat;
}

@media (min-width: 720px) {
  .family__row {
    grid-template-columns: repeat(2, 1fr);
  }

  .plock {
    padding-block: 1.1rem;
  }
}

@media (min-width: 1100px) {
  .family__row {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =====================================================================
   INNER PAGES
   Product, studio, solutions and contact pages. Same tokens, same theme
   flip, same rhythm as the home page — these are the extra pieces those
   pages need and nothing more.
   ===================================================================== */

/* Anchored sections clear the fixed header. */
[id] {
  scroll-margin-top: 6rem;
}

/* ---- Page hero ------------------------------------------------------ */
.phero {
  padding-top: clamp(8rem, 18vh, 11.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.phero__top {
  position: relative;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 1.8rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--theme-mute);
}

.crumbs a {
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.crumbs a:hover {
  color: var(--theme-ink);
  border-color: var(--orange);
}

.crumbs [aria-hidden] {
  opacity: 0.45;
}

/* One notch under the home display size: inner headlines run longer. */
.d-h {
  font-size: clamp(2.3rem, 5.4vw, 5.2rem);
}

.phero__h1 {
  margin-top: 1.4rem;
}

.phero__base {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: end;
  padding-top: clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--theme-line);
  transition: border-color var(--theme-dur) var(--ease-slow);
}

.phero .lead {
  max-width: 40ch;
}

.phero .lead + .lead {
  margin-top: 1rem;
}

.lead a,
.measure a,
.note a {
  color: var(--theme-ink);
  border-bottom: 1px solid var(--orange);
}

.note {
  max-width: 46ch;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--theme-mute);
}

/* Text highlights in the hero-stat slot — phrases, not numbers. */
.hero__stats--text strong {
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
}

/* Text highlights are sentences, not figures: let each follow its own title. */
.hero__stats--text .stat span {
  margin-top: 0;
}

.phero__art {
  display: none;
}

/* On-page jump links, drawn as the same pills as the platform tags. */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.75rem;
}

.jump .tag {
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.jump .tag:hover {
  background: color-mix(in srgb, var(--orange) 16%, transparent);
  border-color: var(--orange);
}

/* ---- Editorial statement ------------------------------------------- */
.statement {
  max-width: 34ch;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.28;
  text-wrap: pretty;
}

.statement + .split {
  margin-top: clamp(3rem, 6vw, 5rem);
}

/* ---- Panel with ticks ---------------------------------------------- */
.panel {
  align-self: start;
  padding: clamp(1.6rem, 3vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  transition: border-color 0.5s var(--ease);
}

.panel:hover {
  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
}

.panel .eyebrow {
  margin-bottom: 1.4rem;
}

.ticks li {
  position: relative;
  padding-block: 0.85rem;
  padding-left: 2rem;
  border-top: 1px solid var(--theme-line);
  transition: border-color var(--theme-dur) var(--ease-slow);
}

.ticks li:last-child {
  border-bottom: 1px solid var(--theme-line);
}

/* Orange disc with an ink tick — the tick is a rotated corner, no glyph. */
.ticks li::before {
  position: absolute;
  top: 1.12rem;
  left: 0;
  width: 1.15rem;
  height: 1.15rem;
  content: "";
  background: var(--orange);
  border-radius: 50%;
}

.ticks li::after {
  position: absolute;
  top: 1.3rem;
  left: 0.42rem;
  width: 0.32rem;
  height: 0.56rem;
  content: "";
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(45deg);
}

/* ---- Feature cards -------------------------------------------------- */
.fgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.fcard {
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border: 1px solid var(--theme-line);
  border-radius: 6px;
  transition: border-color 0.5s var(--ease), background 0.5s var(--ease);
}

.fcard:hover {
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  border-color: var(--orange);
}

.fcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fcard__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  color: var(--black);
  place-items: center;
  background: var(--orange);
  border-radius: 999px;
  transition: transform 0.55s var(--ease);
}

.fcard__icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.fcard:hover .fcard__icon {
  transform: rotate(-10deg) scale(1.06);
}

.fcard__n {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--theme-mute);
}

.fcard h3 {
  padding-top: clamp(2rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.fcard p {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--theme-mute);
}

/* Feature group bar: title and count, with an orange lead-in rule. */
.fgroup {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
  align-items: center;
  padding-top: 1.4rem;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  border-top: 1px solid var(--theme-line);
}

.head + .fgroup {
  margin-top: 0;
}

.fgroup::before {
  position: absolute;
  top: -1px;
  left: 0;
  width: 4rem;
  height: 2px;
  content: "";
  background: var(--orange);
}

.fgroup__t {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.3vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.fgroup__c {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-mute);
}

/* ---- FAQ ------------------------------------------------------------ */
.faq {
  border-top: 1px solid var(--theme-line);
}

.faq details {
  border-bottom: 1px solid var(--theme-line);
  transition: border-color var(--theme-dur) var(--ease-slow);
}

.faq summary {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(1.2rem, 2.4vw, 1.7rem);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color 0.35s var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--accent-ink);
}

.faq__plus {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--theme-ink);
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  transition: transform 0.5s var(--ease), background 0.4s var(--ease),
    border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.faq__plus::before,
.faq__plus::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8rem;
  height: 1.5px;
  content: "";
  background: currentColor;
  transform: translate(-50%, -50%);
}

.faq__plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq details[open] .faq__plus {
  color: var(--black);
  background: var(--orange);
  border-color: var(--orange);
  transform: rotate(45deg);
}

.faq__body {
  max-width: 60ch;
  padding: 0 3.5rem clamp(1.3rem, 2.4vw, 1.8rem) 0;
  color: var(--theme-mute);
}

/* Where the browser can animate to auto height, the answer slides open. */
@supports (interpolate-size: allow-keywords) {
  .faq {
    interpolate-size: allow-keywords;
  }

  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.5s var(--ease),
      content-visibility 0.5s allow-discrete;
  }

  .faq details[open]::details-content {
    block-size: auto;
  }
}

/* ---- Product cards (solutions) ------------------------------------- */
.pgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem clamp(1.25rem, 2.5vw, 2rem);
}

.pcard {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: flex-start;
}

.pcard__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 4px;
  transition: border-color 0.5s var(--ease);
}

.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.pcard:hover .pcard__media {
  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
}

.pcard:hover .pcard__media img {
  transform: scale(1.04);
}

.pcard__name {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.pcard__name .pmark {
  height: 1.35rem;
}

.pcard p {
  font-size: 0.92rem;
  color: var(--theme-mute);
}

.pcard .alink {
  margin-top: auto;
}

/* ---- Contact lines -------------------------------------------------- */
.clines {
  border-top: 1px solid var(--theme-line);
}

.cline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1.5rem;
  align-items: center;
  padding-block: clamp(1.2rem, 2.5vw, 1.8rem);
  border-bottom: 1px solid var(--theme-line);
}

.cline::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}

.cline:hover::after {
  transform: scaleX(1);
}

.cline__k {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--theme-mute);
}

.cline__v {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.8vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  transition: color 0.4s var(--ease), transform 0.55s var(--ease);
}

.cline:hover .cline__v {
  color: var(--accent-ink);
  transform: translateX(0.5rem);
}

.cline__go {
  display: grid;
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 3rem;
  height: 3rem;
  font-size: 1.05rem;
  place-items: center;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.cline:hover .cline__go {
  color: var(--black);
  background: var(--orange);
  border-color: var(--orange);
}

.cline:hover .arrowbox i {
  transform: translateX(-100%);
}

/* ---- CTA extras ----------------------------------------------------- */
/* Inner-page CTAs carry a sentence, not a two-word line. */
.cta__big--sm {
  max-width: 18ch;
  font-size: clamp(2.2rem, 6vw, 5.4rem);
  line-height: 1.02;
}

.cta__note {
  max-width: 46ch;
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  font-size: 1.02rem;
  color: var(--theme-mute);
}

.cta__note strong {
  display: block;
  margin-top: 0.6rem;
  font-weight: 600;
  color: var(--theme-ink);
}

/* ---- Inner page responsive ----------------------------------------- */
@media (min-width: 720px) {
  .phero__base {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 6rem);
  }

  .fgrid,
  .pgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .fgrid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .fgrid--4,
  .pgrid {
    grid-template-columns: repeat(4, 1fr);
  }

  .family__row--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .cta__note {
    margin-inline: 0;
  }

  .cta__big--sm {
    max-width: min(18ch, calc(100% - clamp(15rem, 20vw, 20rem) - 3rem));
  }

  /* The hero art stands on the hero rule, like the home page mascot. */
  .phero__top--art {
    padding-right: clamp(13rem, 18vw, 18rem);
  }

  .phero__art {
    position: absolute;
    right: 0;
    bottom: calc(-1 * clamp(2.5rem, 6vw, 4.5rem));
    display: block;
    width: clamp(12rem, 15vw, 15.5rem);
    height: auto;
    pointer-events: none;
  }

  .phero__art--tall {
    width: clamp(8.5rem, 10.5vw, 10.5rem);
  }

  /* A product mark floats above the rule instead of standing on it. */
  .phero__art--mark {
    bottom: 0.4rem;
    width: clamp(8rem, 11vw, 11rem);
    fill: var(--orange);
  }
}