/* ==========================================================================
   DECK DELIGHTS — Strategic Presentation Design
   Stylesheet

   Contents
   01  Design tokens (colour, type, spacing, grid, motion)
   02  Base / reset
   03  Layout primitives (container, grid, gridlines, section)
   04  Shared typography (labels, display headings, body)
   05  Buttons and links
   06  Components: Header, Hero, Idea, Services, Types, Work,
       Approach, Process, Software, AI, FAQ, CTA, Footer
   07  Motion (page-load sequence) and reduced motion

   Breakpoints (media queries cannot read custom properties,
   so these values are repeated in the queries below):
     mobile   < 768px   4-column grid
     tablet   768px     8-column grid
     desktop  1024px    12-column grid
     wide     1440px    type caps
   ========================================================================== */


/* 01  Design tokens
   ========================================================================== */

:root {
  /* Colour */
  --orange: #F26522;
  --ink: #111111;
  --paper: #F5F1E8;
  --white: #FFFFFF;

  --rule: rgb(17 17 17 / 0.16);          /* hairlines on light grounds */
  --rule-strong: var(--ink);
  --rule-on-orange: rgb(17 17 17 / 0.18);
  --rule-on-ink: rgb(245 241 232 / 0.18);

  /* Typography */
  --font: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans", "Liberation Sans", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --tracking-display: -0.045em;
  --tracking-heading: -0.035em;
  --tracking-label: 0.08em;

  --leading-display: 0.86;
  --leading-heading: 0.92;
  --leading-body: 1.5;

  --text-label: 0.75rem;      /* 12px metadata */
  --text-small: 0.875rem;     /* 14px captions */
  --text-body: 1.0625rem;     /* 17px body */
  --text-lead: clamp(1.375rem, 1.1rem + 1.3vw, 2.25rem);
  --text-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);

  /* Spacing (8px base) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-section: clamp(5rem, 3rem + 7vw, 10rem);

  /* Grid */
  --cols: 4;
  --gutter: 16px;
  --margin: 20px;
  --max-width: 1680px;
  --header-h: 60px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --dur-fast: 160ms;
  --dur-slow: 900ms;
}

@media (min-width: 768px) {
  :root {
    --cols: 8;
    --gutter: 20px;
    --margin: 40px;
    --header-h: 68px;
  }
}

@media (min-width: 1024px) {
  :root {
    --cols: 12;
    --gutter: 24px;
    --margin: clamp(40px, 4.4vw, 72px);
  }
}


/* 02  Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

:focus-visible {
  outline: 3px solid var(--focus, var(--ink));
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--margin);
  top: -100px;
  z-index: 100;
  padding: var(--space-2) var(--space-3);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  text-decoration: none;
}
.skip-link:focus { top: var(--space-1); --focus: var(--orange); }

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


/* 03  Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* Container query context: display type is sized in cqi units
   against the grid's content width, so it always fits the grid. */
.container { container-type: inline-size; }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Vertical column lines drawn on the grid (decorative) */
.gridlines {
  position: absolute;
  inset: 0 var(--margin);
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  pointer-events: none;
}
.gridlines span {
  border-left: 1px solid var(--gridline, var(--rule));
  border-right: 1px solid var(--gridline, var(--rule));
}
.gridlines span:nth-child(n + 5) { display: none; }
@media (min-width: 768px) {
  .gridlines span:nth-child(n + 5) { display: block; }
  .gridlines span:nth-child(n + 9) { display: none; }
}
@media (min-width: 1024px) {
  .gridlines span:nth-child(n + 9) { display: block; }
}

.section {
  position: relative;
  padding-block: var(--space-section);
}
.section + .section:not(.section--ink):not(.section--orange) {
  border-top: 1px solid var(--rule);
}
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: var(--paper); --focus: var(--orange); --rule: var(--rule-on-ink); }
.section--orange { background: var(--orange); color: var(--ink); --rule: var(--rule-on-orange); }


/* 04  Shared typography
   ========================================================================== */

.label {
  display: block;
  font-size: var(--text-label);
  line-height: 1.4;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.display,
.heading {
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  font-kerning: normal;
}

/* Section H2 — sized to the grid width so longest words always fit */
.heading {
  font-size: min(11.5cqi, 5.5rem);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
@media (min-width: 768px) {
  .heading { font-size: min(8.4cqi, 6.25rem); }
}
@media (min-width: 1024px) {
  .heading { font-size: min(6.2cqi, 7rem); }
}

.heading .line { display: block; }

.lead {
  font-size: var(--text-lead);
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: var(--weight-medium);
  max-width: 24ch;
}

.body-copy p + p { margin-top: 1em; }
.body-copy { max-width: 36em; }

/* Section header: label + heading on the grid */
.section-head {
  row-gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.section-head .label { grid-column: 1 / -1; }
.section-head .heading { grid-column: 1 / -1; }

@media (min-width: 1024px) {
  .section-head { margin-bottom: var(--space-7); }
  .section-head .label { grid-column: 1 / span 3; padding-top: 0.6em; }
  .section-head .heading { grid-column: 4 / -1; }
}


/* 05  Buttons and links
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: 0 var(--space-3);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.button .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}
.button:hover { background: var(--orange); color: var(--ink); }
.button:hover .arrow { transform: translateX(4px); }

.section--orange .button:hover { background: var(--paper); color: var(--ink); }

.text-link {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) linear;
}
.text-link:hover { text-decoration-thickness: 2px; }


/* 06  Components
   ========================================================================== */

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.brand {
  font-size: 0.9375rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.brand__mark {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-right: 0.5em;
  background: var(--orange);
  vertical-align: -0.02em;
}

.site-nav__list {
  display: flex;
  gap: clamp(1.25rem, 2.6vw, 2.75rem);
}
.site-nav__list a {
  display: inline-block;
  padding-block: 0.5rem;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur-fast) var(--ease);
}
.site-nav__list a:hover { background-size: 100% 2px; }

.menu-toggle { display: none; }

/* Mobile navigation (only when JS is running; otherwise links wrap) */
@media (max-width: 767.98px) {
  .no-js .site-header__inner { height: auto; flex-wrap: wrap; padding-block: var(--space-2); gap: var(--space-1); }
  .no-js .site-nav__list { flex-wrap: wrap; gap: 0.25rem 1rem; }

  .js .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0 0 0 0.75rem;
    background: none;
    border: 0;
    font-size: var(--text-label);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
  }
  .menu-toggle__icon {
    position: relative;
    width: 18px;
    height: 10px;
  }
  .menu-toggle__icon::before,
  .menu-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    transition: transform var(--dur-fast) var(--ease), top var(--dur-fast) var(--ease);
  }
  .menu-toggle__icon::before { top: 0; }
  .menu-toggle__icon::after { top: 8px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 4px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 4px; transform: rotate(-45deg); }

  .js .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--paper);
    padding: var(--space-4) var(--margin) var(--space-5);
    display: none;
    overflow-y: auto;
    border-top: 1px solid var(--rule);
  }
  .js .site-nav.is-open { display: flex; flex-direction: column; justify-content: space-between; }

  .js .site-nav__list {
    flex-direction: column;
    gap: 0;
  }
  .js .site-nav__list li { border-bottom: 1px solid var(--rule); }
  .js .site-nav__list a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-block: 0.9rem;
    font-size: clamp(2rem, 11vw, 3rem);
    line-height: 1;
    letter-spacing: var(--tracking-heading);
    background: none;
  }
  .js .site-nav__list a::after {
    content: attr(data-index);
    content: attr(data-index) / "";
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
  }
  .site-nav__foot { margin-top: var(--space-5); }
}
@media (min-width: 768px) {
  .site-nav__foot { display: none; }
}
.no-js .site-nav__foot { display: none; }

body.menu-open { overflow: hidden; }


/* ---------- Hero ---------- */

.hero {
  padding-top: var(--space-3);
  padding-bottom: var(--space-section);
}

.hero__meta {
  row-gap: var(--space-1);
  padding-bottom: var(--space-3);
}
.hero__meta .label:first-child { grid-column: 1 / -1; }
.hero__meta .label:last-child { grid-column: 1 / -1; font-weight: var(--weight-regular); }
@media (min-width: 768px) {
  .hero__meta .label:first-child { grid-column: 1 / span 4; }
  .hero__meta .label:last-child { grid-column: 5 / -1; text-align: right; }
}
@media (min-width: 1024px) {
  .hero__meta .label:first-child { grid-column: 1 / span 6; }
  .hero__meta .label:last-child { grid-column: 7 / -1; text-align: left; }
}

/* The hero is composed as a 16:9 slide in the brand orange */
.hero__slide {
  display: flex;
  background: var(--orange);
  color: var(--ink);
  --gridline: var(--rule-on-orange);
  --focus: var(--ink);
  min-height: min(calc(100vw * 0.8), 560px);
}
@media (min-width: 768px) {
  .hero__slide { min-height: min(calc(100vw * 9 / 16), calc(100svh - var(--header-h) - 5rem)); }
}
@media (min-width: 1024px) {
  .hero__slide { min-height: max(520px, min(calc(min(100vw, var(--max-width)) * 9 / 16), calc(100svh - var(--header-h) - 5.5rem))); }
}

.hero__slide-inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4) var(--space-3);
}
@media (min-width: 768px) {
  .hero__slide-inner { padding-block: var(--space-5) var(--space-3); }
}

.hero__title {
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin-inline-start: -0.04em; /* optical alignment of the cap stems */
}
.hero__title .line {
  display: block;
  overflow: hidden;           /* mask for the load animation */
  padding-bottom: 0.04em;
  margin-bottom: -0.04em;
}
.hero__title .line > span { display: inline-block; white-space: nowrap; }

/* Mobile: each line is set to fill the column, like a justified type block */
.hero__title .line--1 { font-size: 17.3cqi; }
.hero__title .line--2 { font-size: 12.9cqi; }
.hero__title .line--3 { font-size: 25.6cqi; }

/* Tablet and up: one size, the third line offset on the grid */
@media (min-width: 768px) {
  .hero__title .line { font-size: 12.9cqi; }
  .hero__title .line--3 { padding-left: calc(50% + var(--gutter) / 2); }
}
@media (min-width: 1440px) {
  .hero__title .line { font-size: min(12.9cqi, 13.5rem); }
}

.hero__slide-foot {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--space-1);
  padding-top: var(--space-2);
  border-top: 2px solid var(--ink);
  align-items: baseline;
}
.hero__slide-foot .label:nth-child(1) { grid-column: 1 / span 2; }
.hero__slide-foot .label:nth-child(2) { grid-column: 3 / span 2; text-align: right; }
.hero__slide-foot .label:nth-child(3) { grid-column: 1 / -1; order: 3; letter-spacing: 0.03em; text-wrap: balance; }
@media (min-width: 768px) {
  .hero__slide-foot .label { grid-row: 1; }
  .hero__slide-foot .label:nth-child(1) { grid-column: 1 / span 3; }
  .hero__slide-foot .label:nth-child(3) { grid-column: 4 / span 4; order: 0; }
  .hero__slide-foot .label:nth-child(2) { grid-column: 8 / span 1; }
}
@media (min-width: 1024px) {
  .hero__slide-foot .label:nth-child(1) { grid-column: 1 / span 3; }
  .hero__slide-foot .label:nth-child(3) { grid-column: 7 / span 5; }
  .hero__slide-foot .label:nth-child(2) { grid-column: 12 / span 1; }
}

.hero__body {
  row-gap: var(--space-4);
  padding-top: var(--space-5);
}
.hero__body .lead { grid-column: 1 / -1; }
.hero__body .hero__text { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .hero__body .lead { grid-column: 1 / span 4; grid-row: 1; }
  .hero__body .hero__text { grid-column: 5 / -1; grid-row: 1; }
  .hero__body { padding-top: var(--space-6); }
}
@media (min-width: 1024px) {
  .hero__body .lead { grid-column: 1 / span 6; }
  .hero__body .hero__text { grid-column: 8 / span 4; }
}
.hero__text .body-copy { margin-bottom: var(--space-4); }
.hero__text .button { width: 100%; }
@media (min-width: 768px) {
  .hero__text .button { width: auto; min-width: 18rem; }
}


/* ---------- Idea (introduction) ---------- */

.idea__head { row-gap: var(--space-4); }
.idea__head .label { grid-column: 1 / -1; }

.idea__title {
  grid-column: 1 / -1;
  font-size: min(12.4cqi, 5.5rem);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.idea__title .line { display: block; }

@media (min-width: 768px) {
  .idea__title { font-size: 8.6cqi; }
  .idea__title .line--2 { padding-left: calc((100% - 7 * var(--gutter)) / 8 * 1 + var(--gutter)); }
  .idea__title .line--3 { padding-left: calc((100% - 7 * var(--gutter)) / 8 * 2 + var(--gutter) * 2); }
}
@media (min-width: 1024px) {
  .idea__title { font-size: min(7.6cqi, 9rem); }
  .idea__title .line--2 { padding-left: calc((100% - 11 * var(--gutter)) / 12 * 2 + var(--gutter) * 2); }
  .idea__title .line--3 { padding-left: calc((100% - 11 * var(--gutter)) / 12 * 4 + var(--gutter) * 4); }
}

.idea__body {
  margin-top: var(--space-6);
  row-gap: var(--space-3);
}
.idea__body .lead { grid-column: 1 / -1; }
.idea__body .body-copy { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .idea__body .lead { grid-column: 3 / span 4; }
  .idea__body .body-copy { grid-column: 3 / span 5; }
}
@media (min-width: 1024px) {
  .idea__body { margin-top: var(--space-7); }
  .idea__body .lead { grid-column: 5 / span 4; }
  .idea__body .body-copy { grid-column: 9 / span 4; padding-top: 0.35rem; }
}

/* A rule that runs the width of the grid with a single orange unit */
.measure-rule {
  position: relative;
  height: 2px;
  background: var(--ink);
  margin-top: var(--space-6);
}
.measure-rule::after {
  content: "";
  position: absolute;
  left: 0;
  top: -7px;
  width: calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols));
  height: 16px;
  background: var(--orange);
}


/* ---------- Services (editorial list) ---------- */

.services__list { border-top: 2px solid var(--ink); }
.service {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule);
  row-gap: var(--space-1);
  align-items: baseline;
}
.service__num { grid-column: 1 / span 1; }
.service__title {
  grid-column: 2 / -1;
  font-size: var(--text-h3);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}
.service__text { grid-column: 2 / -1; max-width: 34em; }

@media (min-width: 768px) {
  .service__title { grid-column: 2 / span 3; }
  .service__text { grid-column: 5 / -1; }
}
@media (min-width: 1024px) {
  .service { padding-block: var(--space-4) var(--space-5); }
  .service__num { grid-column: 1 / span 3; }
  .service__title { grid-column: 4 / span 4; }
  .service__text { grid-column: 8 / span 4; }
}


/* ---------- Presentation types (staggered editorial grid) ---------- */

.types__grid { row-gap: var(--space-5); }
.type {
  grid-column: span 2;
  padding-top: var(--space-2);
  border-top: 2px solid var(--ink);
}
.type__name {
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
  overflow-wrap: anywhere;
}
.type__text { font-size: var(--text-small); line-height: 1.5; max-width: 28em; }

@media (max-width: 420px) {
  .type { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gutter); }
  .type__name { font-size: 1.5rem; margin-bottom: 0; }
}
@media (min-width: 768px) {
  .type { grid-column: span 4; }
  .type:nth-child(even) { margin-top: var(--space-6); }
}
@media (min-width: 1024px) {
  .types__grid { row-gap: var(--space-6); }
  .type { grid-column: span 4; }
  .type:nth-child(even) { margin-top: 0; }
  .type:nth-child(3n + 2) { margin-top: var(--space-6); }
  .type:nth-child(3n + 3) { margin-top: calc(var(--space-6) * 2); }
}


/* ---------- Selected work ---------- */

.work__intro {
  grid-column: 1 / -1;
  margin-top: calc(var(--space-3) * -1);
  margin-bottom: var(--space-5);
}
@media (min-width: 1024px) {
  .work__intro { grid-column: 4 / span 5; margin-top: calc(var(--space-5) * -1); margin-bottom: var(--space-6); }
}

.work__grid { row-gap: var(--space-6); align-items: start; }
.project { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .project--feature { grid-column: 1 / -1; }
  .project--secondary { grid-column: 3 / -1; }
}
@media (min-width: 1024px) {
  .project--feature { grid-column: 1 / span 8; }
  .project--secondary { grid-column: 9 / span 4; margin-top: 40%; }
}

/*
  .project__media is the replaceable thumbnail.
  To use a real image, replace the inner .thumb markup with:
  <img src="/assets/img/work/tui-smiles.webp" alt="…" width="1600" height="900" loading="lazy" decoding="async">
*/
.project__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}
.project__media img { width: 100%; height: 100%; object-fit: cover; }

.project__caption {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: var(--gutter);
  row-gap: 0.25rem;
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px solid var(--ink);
}
.project__caption .label:first-child { grid-row: 1 / span 4; }
.project__title {
  font-size: var(--text-h3);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}
.project__meta { font-size: var(--text-small); }
.project__status { margin-top: var(--space-1); }

/* Placeholder slide compositions (pure CSS, no imagery) */
.thumb {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  --pad: 5.5cqi;
}
.thumb .gridlines { inset: 0 var(--pad); column-gap: 2cqi; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.thumb .gridlines span:nth-child(n) { display: block; }
.thumb--orange { background: var(--orange); color: var(--ink); --gridline: rgb(17 17 17 / 0.14); }
.thumb--ink { background: var(--ink); color: var(--paper); --gridline: rgb(245 241 232 / 0.14); }

.thumb__label {
  position: absolute;
  top: var(--pad);
  left: var(--pad);
  font-size: max(9px, 1.6cqi);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.thumb__word {
  position: absolute;
  left: var(--pad);
  bottom: calc(var(--pad) + 5cqi);
  font-size: 9.6cqi;
  line-height: 0.86;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.thumb__block {
  position: absolute;
  right: var(--pad);
  top: var(--pad);
  width: 33%;
  height: 56%;
  background: var(--ink);
}
.thumb--ink .thumb__block { background: var(--orange); width: 8%; height: auto; aspect-ratio: 1; }
.thumb__rule {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: var(--pad);
  height: max(1px, 0.25cqi);
  background: currentColor;
}
.thumb__num {
  position: absolute;
  right: var(--pad);
  bottom: calc(var(--pad) + 1.2cqi);
  font-size: max(9px, 1.6cqi);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
}
.thumb__bars {
  position: absolute;
  right: var(--pad);
  top: calc(var(--pad) + 56% + 3cqi);
  width: 33%;
  display: grid;
  gap: 1.2cqi;
}
.thumb__bars span { height: 1.2cqi; background: var(--ink); }
.thumb__bars span:nth-child(1) { width: 100%; }
.thumb__bars span:nth-child(2) { width: 72%; }
.thumb__bars span:nth-child(3) { width: 44%; }


/* ---------- Approach ---------- */

.approach__statement {
  grid-column: 1 / -1;
  font-size: clamp(1.625rem, 1.1rem + 2.6vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: var(--weight-medium);
  max-width: 22ch;
}
.approach__body {
  grid-column: 1 / -1;
  margin-top: var(--space-5);
  row-gap: var(--space-3);
}
.approach__body .body-copy { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .approach__body .body-copy { grid-column: 3 / -1; }
}
@media (min-width: 1024px) {
  .approach__statement { grid-column: 4 / -1; }
  .approach__body .body-copy { grid-column: 7 / span 5; }
}


/* ---------- Process (editorial diagram) ---------- */

.process__track {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}
.stage {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: var(--space-2);
  padding-bottom: var(--space-4);
}
/* vertical rule on mobile/tablet */
.stage::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 0;
  width: 2px;
  background: var(--ink);
}
.stage:last-child::before { display: none; }
.stage__marker {
  position: absolute;
  left: 0;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--ink);
}
.stage:last-child .stage__marker { background: var(--orange); outline: 2px solid var(--ink); outline-offset: 0; }
.stage__num {
  grid-column: 1;
  padding-left: 1.5rem;
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  line-height: 1.9;
}
.stage__body { grid-column: 2; }
.stage__title {
  font-size: var(--text-h3);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.stage__text { font-size: var(--text-small); max-width: 26em; }

@media (min-width: 768px) and (max-width: 1023.98px) {
  .process__track { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .process__track { grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
  .stage { padding-bottom: var(--space-5); }
  .stage:nth-child(3)::before { display: none; }
}

@media (min-width: 1024px) {
  .process__track {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding-top: 0;
  }
  /* one continuous horizontal rule across the stages */
  .process__track::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 5.5rem;
    height: 2px;
    background: var(--ink);
  }
  .stage {
    display: block;
    padding-bottom: 0;
  }
  .stage::before { display: none; }
  .stage__num {
    display: block;
    padding-left: 0;
    font-size: clamp(3rem, 4.4vw, 4.5rem);
    line-height: 1;
    letter-spacing: var(--tracking-display);
    height: 5.5rem;
  }
  .stage__marker {
    position: relative;
    top: -7px;
    display: block;
    width: 16px;
    height: 16px;
    margin-bottom: var(--space-3);
  }
  .stage__title { margin-bottom: var(--space-1); }
}


/* ---------- Software ---------- */

.software__list { border-top: 2px solid var(--ink); }
.tool {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.tool__name {
  font-size: min(12.4cqi, 10rem);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  white-space: nowrap;
}
.tool__format { flex: none; text-align: right; }
@media (max-width: 767.98px) {
  .tool { flex-direction: column-reverse; align-items: flex-start; gap: 0.5rem; padding-block: var(--space-2); }
  .tool__name { font-size: 11.5cqi; }
  .tool__format { text-align: left; }
}
@media (min-width: 768px) {
  .tool__name { font-size: min(9.6cqi, 10rem); }
}
@media (min-width: 1024px) {
  .tool__name { font-size: min(8.6cqi, 10rem); }
}

.software__foot { margin-top: var(--space-4); row-gap: var(--space-2); }
.software__foot .body-copy { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .software__foot .body-copy { grid-column: 5 / -1; }
}
@media (min-width: 1024px) {
  .software__foot .body-copy { grid-column: 8 / span 4; }
}


/* ---------- AI ---------- */

.ai .heading { color: var(--paper); }
.ai__rule {
  grid-column: 1 / -1;
  height: 2px;
  background: var(--orange);
  margin-bottom: var(--space-4);
}
.ai__lead {
  grid-column: 1 / -1;
  color: var(--orange);
}
.ai__body {
  grid-column: 1 / -1;
  margin-top: var(--space-3);
}
@media (min-width: 768px) {
  .ai__rule { grid-column: 3 / -1; }
  .ai__lead { grid-column: 3 / span 4; }
  .ai__body { grid-column: 3 / span 5; }
}
@media (min-width: 1024px) {
  .ai__rule { grid-column: 4 / -1; }
  .ai__lead { grid-column: 4 / span 4; }
  .ai__body { grid-column: 9 / span 4; margin-top: 0; }
}


/* ---------- FAQ ---------- */

.faq__list {
  grid-column: 1 / -1;
  border-top: 2px solid var(--ink);
}
@media (min-width: 1024px) {
  .faq__list { grid-column: 4 / -1; }
}
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-3);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover .faq__q { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.faq__q {
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: var(--weight-bold);
}
.faq__icon {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 0.2em;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 11px;
  height: 2px;
  background: var(--ink);
  transition: transform var(--dur-fast) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__item[open] .faq__icon { background: var(--orange); }
.faq__a {
  padding-bottom: var(--space-4);
  max-width: 40em;
}
@media (min-width: 1024px) {
  .faq__a { padding-left: 0; }
}


/* ---------- Final CTA ---------- */

.cta { overflow: hidden; }
.cta .gridlines { --gridline: var(--rule-on-orange); top: calc(var(--space-section) * -1); bottom: calc(var(--space-section) * -1); }
.cta__inner { position: relative; }
.cta .label { margin-bottom: var(--space-4); }
.cta__title {
  font-size: min(11.8cqi, 5.5rem);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
@media (min-width: 768px) {
  .cta__title { font-size: 8.9cqi; }
}
@media (min-width: 1024px) {
  .cta__title { font-size: min(7.6cqi, 9.5rem); }
}
.cta__title .line { display: block; }

.cta__body {
  margin-top: var(--space-6);
  row-gap: var(--space-4);
  align-items: end;
}
.cta__text { grid-column: 1 / -1; }
.cta__actions { grid-column: 1 / -1; display: grid; gap: var(--space-3); justify-items: start; }
.cta__actions .button { width: 100%; }
.cta__email {
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
.cta__email:hover { text-decoration-thickness: 4px; }
@media (min-width: 768px) {
  .cta__text { grid-column: 1 / span 5; }
  .cta__actions { grid-column: 1 / -1; }
  .cta__actions .button { width: auto; min-width: 18rem; }
}
@media (min-width: 1024px) {
  .cta__text { grid-column: 1 / span 5; }
  .cta__actions { grid-column: 8 / span 5; }
}


/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--space-6) var(--space-4);
  --focus: var(--orange);
}
.site-footer__grid { row-gap: var(--space-4); }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__brand p:first-child {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.site-footer__platforms { grid-column: 1 / -1; font-weight: var(--weight-regular); }
.site-footer__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.site-footer__links a {
  display: inline-block;
  padding-block: 0.5rem;
}
.site-footer__legal {
  grid-column: 1 / -1;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-on-ink);
  font-weight: var(--weight-regular);
}
@media (min-width: 768px) {
  .site-footer__brand { grid-column: 1 / span 5; }
  .site-footer__links { grid-column: 6 / -1; justify-content: flex-end; align-self: end; }
  .site-footer__platforms { grid-column: 1 / span 5; }
}
@media (min-width: 1024px) {
  .site-footer__brand { grid-column: 1 / span 6; }
  .site-footer__platforms { grid-column: 7 / span 4; align-self: end; }
  .site-footer__links { grid-column: 11 / span 2; flex-direction: column; align-items: flex-end; gap: 0; }
}


/* 07  Motion — one page-load sequence in the hero
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .hero__slide .gridlines span {
    transform-origin: top;
    animation: draw-line var(--dur-slow) var(--ease) both;
  }
  .hero__slide .gridlines span:nth-child(odd) { animation-delay: 60ms; }
  .hero__slide .gridlines span:nth-child(3n) { animation-delay: 140ms; }

  .hero__title .line > span {
    animation: rise var(--dur-slow) var(--ease) both;
  }
  .hero__title .line--1 > span { animation-delay: 150ms; }
  .hero__title .line--2 > span { animation-delay: 260ms; }
  .hero__title .line--3 > span { animation-delay: 370ms; }

  .hero__slide-foot {
    animation: fade 600ms linear 700ms both;
  }
}

@keyframes draw-line {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes rise {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .skip-link, .gridlines { display: none; }
  .section--ink, .site-footer { background: none; color: var(--ink); }
}