/* tokens.css */
/* Design tokens: DESIGN.md §2. Components use these, never raw values.
   Colour theme from 2026-10-02, at the website team's request: light blue. White and ice-blue
   pages, a soft sky blue for surfaces and accents, deep navy for text, buttons and dark
   sections, and a deeper blue for links. The token names are the pattern-room names the site
   was built with; only the values changed. Every text token is checked at 4.5:1 or better on
   the backgrounds it is used on (scripts/check_contrast.mjs). */
:root {
  /* Colour */
  --paper: #EEF5FC;        /* page background and the alternate ice-blue sections */
  --sheet: #FFFFFF;
  --sheet-mark: #B4C3D2;   /* dashed placeholder borders */
  --white: #FFFFFF;
  --manila: #DDEAF7;       /* pale blue card: page heroes, form fields, the pattern piece fill */
  --manila-edge: #C2D7EC;  /* border of white panels placed on the pale blue */
  --chalk: #1C5D99;        /* links, marks and step numbers: 6.8:1 on white, 5.6:1 on the pale blue */
  --chalk-hover: #154A7B;  /* hover and pressed state for chalk */
  --chalk-bright: #A9D2F3; /* the light blue itself: buttons with navy text, lines, accents on navy. Never text on a light ground */
  --chalk-tint: #DDEAF7;   /* selected or highlighted background */
  --ink: #0F2238;          /* deep navy: text, focus ring, solid buttons. 16:1 on white */
  --ink-panel: #0C1C30;    /* dark sections */
  --ink-2: #4A5A6C;        /* secondary body text: 7:1 on white, 5.8:1 on the pale blue */
  --ink-3: #586778;        /* captions, labels, meta: 5.8:1 on white, 4.7:1 on the pale blue */
  --rule: #D6E2EE;
  --seam: #9CC6EC;         /* stitching lines in drawings only (never text) */
  --error: #B3261E;
  --rule-on-dark: rgba(255, 255, 255, 0.2); /* hairlines on navy */
  --whatsapp: #25D366;     /* WhatsApp's own green, for its button at the foot of the screen only */
  --footer-muted: #586778; /* secondary text on the light footer */
  --footer-rule: #D6E2EE;
  --placeholder-a: #E4EDF6;
  --placeholder-b: #D6E2EE;
  --film-a: #D6E2EE;
  --film-b: #C9D8E7;
  --field-border: #74859A; /* 3.1:1 on a field's pale-blue fill and 3.8:1 on white, so a field is found by its edge */

  /* Type families */
  --font-display: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --font-text: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type sizes, fluid from 390 px (mobile design) to 1440 px (desktop design) */
  --fs-h2: clamp(2.25rem, 1.832rem + 1.714vw, 3.375rem);          /* 36 → 54 */
  --fs-start: clamp(2.5rem, 2.128rem + 1.524vw, 3.5rem);          /* 40 → 56 */
  --fs-stage: clamp(1.625rem, 1.393rem + 0.952vw, 2.25rem);       /* 26 → 36 */
  --fs-band: clamp(1.75rem, 1.425rem + 1.333vw, 2.625rem);        /* 28 → 42 */
  --fs-path: clamp(1.625rem, 1.486rem + 0.571vw, 2rem);           /* 26 → 32 */
  --fs-card: clamp(1.5rem, 1.454rem + 0.19vw, 1.625rem);          /* 24 → 26 */
  --fs-tile: clamp(1.125rem, 0.986rem + 0.571vw, 1.5rem);         /* 18 → 24 */
  --fs-step: clamp(1.75rem, 1.518rem + 0.952vw, 2.375rem);        /* 28 → 38 */
  --fs-check: clamp(1.25rem, 1.111rem + 0.571vw, 1.625rem);       /* 20 → 26 */
  --fs-hero-lead: clamp(1rem, 0.907rem + 0.381vw, 1.25rem);       /* 16 → 20 */
  --fs-lead: clamp(1rem, 0.954rem + 0.19vw, 1.125rem);            /* 16 → 18 */
  --fs-body-lg: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem);       /* 16 → 17 */
  --fs-item: clamp(1.0625rem, 1.016rem + 0.19vw, 1.1875rem);      /* 17 → 19 */
  --fs-row-title: clamp(1.0625rem, 0.993rem + 0.286vw, 1.25rem);  /* 17 → 20 */
  --fs-sub: clamp(1.1875rem, 1.164rem + 0.095vw, 1.3125rem);      /* 19 → 21 */
  --fs-body: 1rem;        /* 16 */
  --fs-small: 0.9375rem;  /* 15 */
  --fs-caption: 0.875rem; /* 14, the minimum */

  /* Space: multiples of 4 */
  --s-4: 4px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-56: 56px;
  --s-64: 64px;
  --section-y: clamp(4.5rem, 3.386rem + 4.571vw, 7.5rem);        /* 72 → 120 */
  --section-gap: clamp(1.25rem, 0.25rem + 4.1vw, 3.5rem);        /* 20 → 56 */
  --gutter: clamp(20px, calc(7.238vw - 8.23px), 96px);           /* 20 at 390, 96 at 1440 */
  --container: 1248px;
  --grid-gap: 24px;

  /* Shape */
  --radius: 2px;
  --control-h: 52px;
  --header-h: 64px;

  /* Layers */
  --z-header: 10;
  --z-bar: 20;
  --z-menu: 40;
  --z-consent: 100;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast: 160ms;
  --medium: 220ms;
  --slow: 350ms;
}

@media (min-width: 1200px) {
  :root { --header-h: 88px; }
}

/* base.css */
/* Fonts (self-hosted, OFL; licences in assets/fonts/) */
@font-face {
  font-family: "Urbanist";
  src: url("/assets/fonts/urbanist-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-var-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* Page */
html { scroll-padding-top: calc(var(--header-h) + var(--s-16)); }
body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.5625;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
p { text-wrap: pretty; }
li::marker { color: var(--ink-3); }
strong, b { font-weight: 600; }

a { color: var(--ink); }
a:hover { color: var(--chalk-hover); }

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

.skip-link {
  position: absolute;
  left: var(--s-16);
  top: -100px;
  z-index: calc(var(--z-consent) + 1);
  padding: var(--s-12) var(--s-16);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--s-16); color: var(--white); }

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

/* Layout */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

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

/* components.css */
/* Buttons (DESIGN §6). One primary per screen view. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  min-height: var(--control-h);
  padding: 0 var(--s-24);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}
/* Solid navy on light grounds; the light blue button is for navy grounds and photographs. */
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: var(--chalk); color: var(--white); }
.btn--secondary { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn--secondary:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.btn--on-dark { border-color: var(--white); color: var(--white); }
.btn--on-dark:hover { border-color: var(--white); background: var(--white); color: var(--ink); }
.btn--sky { background: var(--chalk-bright); color: var(--ink); }
.btn--sky:hover { background: var(--white); color: var(--ink); }
.btn--small { min-height: 48px; padding: 0 var(--s-20); font-size: var(--fs-body); }
.btn--block { width: 100%; }

/* Text links: chalk, underlined, never followed by an arrow */
.text-link {
  display: inline-block;
  padding: var(--s-4) 0;
  color: var(--chalk);
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.text-link:hover { color: var(--chalk-hover); text-decoration-thickness: 2px; }
/* A link standing on its own is a target, so give it 44px. Links inside a sentence stay inline. */
.text-link--target,
.link-quiet--target,
.card > .text-link,
td > .text-link,
.stage .text-link,
.aside-note .text-link,
.section-head .text-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  padding-block: 0;
}
.text-link--ink { color: var(--ink); }
.link-quiet {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Sections */
.section {
  padding-block: var(--section-y);
  border-top: 1px solid var(--rule);
}
.section--paper { background: var(--paper); }
.section--white { background: var(--white); }
.section--manila { background: var(--manila); border-top: 0; }
.section > .container { display: flex; flex-direction: column; gap: var(--section-gap); }

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 500;
}
.h3-stage {
  font-family: var(--font-display);
  font-size: var(--fs-stage);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.h3-sub { font-size: var(--fs-sub); line-height: 1.33; font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.6; max-width: 640px; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-small); line-height: 1.47; }

/* Section header: H2 in column 1, intro across columns 2 and 3, bottom-aligned */
.section-head { display: grid; gap: var(--s-20); }
.section-head .h2 { max-width: 12em; }
@media (min-width: 1024px) {
  .section-head {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    align-items: end;
  }
  .section-head > .lead,
  .section-head > .section-head__intro { grid-column: span 2; }
}

/* Photo placeholder (DESIGN §4). Replaced by real photos after the shoot. */
.photo {
  position: relative;
  min-height: var(--photo-h, 220px);
  background: repeating-linear-gradient(135deg, var(--placeholder-a) 0 14px, var(--placeholder-b) 14px 15px);
}
.photo--film { background: repeating-linear-gradient(135deg, var(--film-a) 0 14px, var(--film-b) 14px 15px); }
.photo__label {
  position: absolute;
  left: var(--s-8);
  bottom: var(--s-8);
  max-width: calc(100% - 2 * var(--s-8));
  padding: var(--s-4) var(--s-8);
  background: var(--white);
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: 1.43;
}
@media (min-width: 768px) {
  .photo__label { left: var(--s-12); bottom: var(--s-12); padding: 6px 10px; }
}
/* A real photograph in the same box: the height rules still apply, the picture fills it */
img.photo { display: block; width: 100%; height: var(--photo-h, 220px); object-fit: cover; background: none; }

/* Lists */
.list { padding-left: var(--s-20); display: flex; flex-direction: column; gap: var(--s-8); }
.list--tight { gap: 6px; }

/* Logo placeholder boxes (client logos appear only with permission) */
.logo-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--s-12);
  border: 1px dashed var(--sheet-mark);
  color: var(--ink-3);
  font-size: var(--fs-caption);
  line-height: 1.43;
  text-align: center;
}
@media (min-width: 1024px) { .logo-slot { min-height: 64px; } }

/* Preview builds only: an answer the website team suggested, not yet confirmed by Dot Apparel.
   The note that explained the mark at the top of every page was taken off on 2026-09-30. */
.suggested { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* header.css */
/* Site header (DESIGN §2.3: 88 px desktop, 64 px mobile).
   It sticks to the top at every width. Scrolling down slides it away; scrolling up brings
   it back (effects.js adds and removes `is-hidden`, as the reference site's header does).
   It never hides while something inside it has focus, or while the menu is open. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  transition: transform var(--slow) var(--ease-out);
}
.site-header.is-hidden { transform: translateY(-101%); }
.site-header.is-hidden:focus-within,
body.menu-open .site-header.is-hidden { transform: none; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  height: var(--header-h);
  padding: 0 var(--s-12) 0 var(--gutter);
}
@media (min-width: 768px) {
  .site-header__inner { padding-inline: var(--gutter); }
}
.site-header__logo { display: flex; align-items: center; min-height: 44px; padding: var(--s-8) 0; flex-shrink: 0; }
.site-header__logo img { width: 130px; height: auto; }
.site-header__logo-light { display: none; }
/* On a phone the homepage header starts clear over the hero, with the white logo, and turns
   white as soon as the page moves (effects.js keeps `is-top` while the page is at the top) */
@media (max-width: 1023px) {
  .js .page-landing .lp-hero { margin-top: calc(-1 * var(--header-h)); }
  .js .page-landing .site-header { transition: transform var(--slow) var(--ease-out), background-color var(--medium) ease, border-color var(--medium) ease; }
  .js .page-landing .site-header.is-top { background: transparent; border-bottom-color: transparent; }
  .js .page-landing .site-header.is-top .site-header__logo-dark { display: none; }
  .js .page-landing .site-header.is-top .site-header__logo-light { display: block; }
  .js .page-landing .site-header.is-top .menu-button { color: var(--white); }
  /* From 768 px the header also carries "Start a project": on the dark hero it is the light-blue button */
  .js .page-landing .site-header.is-top .site-header__cta { background: var(--chalk-bright); border-color: var(--chalk-bright); color: var(--ink); }
  .js .page-landing .site-header.is-top .site-header__cta:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
}
@media (min-width: 1200px) {
  .site-header__logo img { width: 162px; }
}

.site-header__actions { display: flex; align-items: center; gap: var(--s-24); }
.site-header__cta { display: none; }
@media (min-width: 768px) { .site-header__cta { display: inline-flex; } }

/* Main navigation: four items, What we make first, from 1024 px */
.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav { display: block; }
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
  list-style: none;
  font-size: var(--fs-small);
  font-weight: 500;
}
.site-nav__link,
.site-nav__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--s-12) 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.site-nav__link:hover,
.site-nav__toggle:hover { color: var(--chalk-hover); }
/* The page you are on reads in the action colour, as on the reference site */
.site-nav__link[aria-current="page"] { color: var(--chalk); font-weight: 600; }
.site-nav__toggle svg { transition: transform var(--fast) ease; }
.site-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-nav__item--services { position: relative; }

.services-panel {
  position: absolute;
  top: calc(100% + (var(--header-h) - 44px) / 2);
  left: -24px;
  width: 560px;
  padding: var(--s-24);
  background: var(--white);
  border: 1px solid var(--rule);
}
.services-panel__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-24); }
.services-panel__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-12) 0;
  text-decoration: none;
}
.services-panel__link span:first-child { font-size: var(--fs-body); font-weight: 600; }
.services-panel__link span:last-child { color: var(--ink-3); font-size: var(--fs-small); font-weight: 400; line-height: 1.47; }
.services-panel__link:hover span:first-child { color: var(--chalk-hover); text-decoration: underline; text-underline-offset: 4px; }
.services-panel__all { margin-top: var(--s-12); padding-top: var(--s-16); border-top: 1px solid var(--rule); }

/* Menu button, below 1024 px: the two lines alone, named for screen readers */
.menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
}
@media (min-width: 1024px) { .menu-button { display: none; } }

/* Full-screen menu (opened by site.js): navy, the pages large, the contact details and the
   button at the foot of the screen. With motion on it slides in from the right. */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  background: var(--ink-panel);
  color: var(--white);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.motion .site-menu { animation: menu-in 260ms var(--ease-out); }
@keyframes menu-in { from { transform: translateX(100%); } to { transform: none; } }
.site-menu .menu-button { color: var(--white); }
.site-menu :focus-visible { outline-color: var(--white); }
.site-menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--s-12) 0 var(--gutter);
  border-bottom: 1px solid var(--rule-on-dark);
  flex-shrink: 0;
}
.site-menu__body { flex: 1; display: flex; flex-direction: column; gap: var(--s-32); padding: var(--s-16) var(--gutter) calc(var(--s-24) + env(safe-area-inset-bottom, 0px)); }
/* The pages, one under another; Services opens a sub-menu of the service pages */
.site-menu__list { list-style: none; display: flex; flex-direction: column; }
.site-menu__item { border-bottom: 1px solid var(--rule-on-dark); }
.site-menu__link {
  display: flex;
  align-items: center;
  min-height: 64px;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-menu__toggle { justify-content: space-between; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.site-menu__toggle svg { flex: none; width: 24px; height: 24px; color: var(--chalk-bright); transition: transform var(--fast) ease; }
.site-menu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.site-menu__sub { list-style: none; padding: 0 0 var(--s-16) var(--s-16); }
.site-menu__sublink { display: flex; align-items: center; min-height: 44px; color: var(--chalk-bright); font-size: var(--fs-body-lg); font-weight: 500; text-decoration: none; }
.site-menu__sublink:hover,
.site-menu__link:hover { color: var(--chalk-bright); }
.site-menu__link[aria-current="page"] { color: var(--chalk-bright); }
.site-menu__contact { display: flex; flex-direction: column; margin-top: auto; font-size: var(--fs-body); }
.site-menu__contact a { display: flex; align-items: center; min-height: 44px; color: var(--white); text-decoration: none; }
.site-menu__contact a:hover { color: var(--chalk-bright); text-decoration: underline; text-underline-offset: 4px; }
.site-menu__actions { display: flex; flex-direction: column; gap: var(--s-12); }
body.menu-open { overflow: hidden; }

/* Back to the top: a round button that appears after 150 px, with a ring that fills
   as the page is read (effects.js). */
.to-top {
  position: fixed;
  right: var(--s-16);
  bottom: var(--s-16);
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--chalk-bright);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--medium) ease, transform var(--medium) var(--ease-out), background-color var(--fast) ease, visibility 0s linear var(--medium);
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { background: var(--ink); color: var(--white); }
.to-top svg { position: absolute; }
.to-top__ring { width: 44px; height: 44px; transform: rotate(-90deg); }
.to-top__ring circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 125.7;
  stroke-dashoffset: var(--to-top-offset, 125.7);
  transition: stroke-dashoffset var(--slow) ease;
}
.to-top__arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* WhatsApp, at the foot of every page (the website team, 3 October 2026): WhatsApp's own green
   and mark, 56 px round; the back-to-top ring sits above it, centred on it */
.wa-float {
  position: fixed;
  right: var(--s-16);
  bottom: calc(var(--s-16) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-bar);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--white);
  transition: background-color var(--fast) ease;
}
.wa-float:hover { background: var(--ink); }
.wa-float svg { width: 32px; height: 32px; fill: currentColor; }
.to-top { right: calc(var(--s-16) + 6px); bottom: calc(var(--s-16) + 56px + var(--s-12) + env(safe-area-inset-bottom, 0px)); }

/* footer.css */
/* Footer: light, 4 columns on desktop (DESIGN §6). Light rather than graphite since
   2026-09-30, matching the reference site's footer. */
/* The foot of the page keeps 56 px clear under its last row for the WhatsApp button (header.css) */
.site-footer {
  padding: var(--s-56) 0 calc(var(--s-32) + 56px);
  background: var(--white);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}
@media (min-width: 1024px) {
  .site-footer { padding: 80px 0 calc(var(--s-40) + 56px); }
}
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--chalk-hover); text-decoration: underline; text-underline-offset: 4px; }
.site-footer .btn--primary { color: var(--white); }

.site-footer__grid { display: grid; gap: var(--s-32); }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
}

.site-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.site-footer__brand img.logo { width: 96px; height: auto; }
.site-footer__brand img.badge { width: 99px; height: auto; }
.site-footer__tagline { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.33; font-weight: 600; }
.site-footer__text { color: var(--footer-muted); font-size: var(--fs-small); line-height: 1.53; }
/* The address is a link to the map: underlined, so it reads as one among the muted lines */
.site-footer .site-footer__address { display: inline-block; padding-block: var(--s-4); color: inherit; text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 1024px) {
  .site-footer__brand { gap: var(--s-16); padding-right: var(--s-24); }
  .site-footer__brand img.logo { width: 110px; }
  .site-footer__brand img.badge { width: 106px; }
  .site-footer__tagline { font-size: 1.25rem; line-height: 1.3; }
}

.site-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-16); }
@media (min-width: 1024px) {
  .site-footer__cols { display: contents; }
}
.site-footer__nav { display: flex; flex-direction: column; gap: var(--s-4); font-size: var(--fs-small); }
.site-footer__nav a:not(.btn) { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; }
@media (min-width: 1024px) {
  .site-footer__nav { gap: 0; }
}
.site-footer__heading { padding-bottom: var(--s-4); font-family: var(--font-display); font-size: var(--fs-item); font-weight: 700; }
/* Contact details on every screen size, now that there is no sticky bar on a phone */
.site-footer__contact .btn { align-self: flex-start; margin-top: 10px; }

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s-32);
  padding-top: var(--s-20);
  border-top: 1px solid var(--footer-rule);
  color: var(--footer-muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
}
.site-footer__bottom a,
.site-footer__bottom button { color: var(--footer-muted); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__bottom button { padding: 0; border: 0; background: none; font-size: inherit; }
.site-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-20); }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 1024px) {
  .site-footer__bottom { flex-direction: row; justify-content: space-between; margin-top: var(--s-56); padding-top: var(--s-24); }
  .site-footer__legal { gap: var(--s-24); }
}

/* home.css */
/* ---------------------------------------------------------------------
   Hero: the headline on a kurta front pattern piece (DESIGN §1, §5, §7)
   Rotated piece from 768 px, upright piece (fold on the left edge) below.
   --------------------------------------------------------------------- */
.hero {
  container-type: inline-size;
  background: var(--paper);
  --piece-w: min(100cqi - 2 * var(--gutter), var(--container)); /* rotated piece width */
  --piece-m: min(100cqi, 480px);                                /* upright piece width */
}
.hero__stage { position: relative; min-height: calc(45px + var(--piece-m) * 2.83333); }
.hero__sheet {
  position: absolute;
  inset: 0;
  background: var(--sheet) url("/assets/img/dotcross-48.svg") 0 0 / 48px 48px;
}
.hero__inner { padding: 0 var(--gutter); }
.hero__drawing {
  position: absolute;
  top: 20px;
  left: 0;
  width: var(--piece-m);
  aspect-ratio: 300 / 850;
}
.kurta { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kurta--rotated { display: none; }
.kurta__piece { fill: var(--manila); }
.kurta__cut { fill: none; stroke: var(--chalk); stroke-width: 2; stroke-linejoin: round; }
.kurta__stitch { fill: none; stroke: var(--seam); stroke-width: 1.25; stroke-dasharray: 6 4; }
.kurta__notch { fill: none; stroke: var(--chalk); stroke-width: 2; }
.kurta__mark { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.kurta__reveal { fill: none; stroke: #fff; stroke-width: 16; }
.kurta--rotated .kurta__stitch { stroke-dasharray: 7 5; }

.kurta-ticket {
  position: absolute;
  left: 5.13%;
  top: 13.21%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: 1.43;
  white-space: nowrap;
}
.kurta-ticket b { color: var(--ink); font-weight: 700; }
.kurta-label {
  position: absolute;
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: 1.43;
  font-weight: 500;
  white-space: nowrap;
}
.kurta-label--slit { left: 72.31%; top: 79.64%; }
.kurta-label--fold { left: 7.18%; top: 83.8%; }
@media (max-width: 379px) {
  .kurta-label--slit { top: 88%; }
  .kurta-label--fold { top: 90%; }
}

.hero__title {
  position: relative;
  z-index: 1;
  padding-top: calc(20px + var(--piece-m) * 0.8359);
  font-family: var(--font-display);
  font-size: clamp(2rem, 9.7vw, 2.375rem);
  font-weight: 700;
  line-height: 1.105;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-wrap: nowrap;
}
.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
  max-width: calc(var(--piece-m) * 0.6974);
  margin-top: var(--s-20);
}
.hero__lead { font-size: var(--fs-hero-lead); line-height: 1.5625; }
.hero__actions { display: flex; flex-direction: column; gap: 10px; }
.hero__actions .btn { width: 100%; }
.hero__quote { align-self: center; padding: var(--s-8) 0; font-size: var(--fs-small); }

.hero__facts {
  display: grid;
  gap: var(--s-16);
  padding-block: var(--s-32) var(--s-40);
  list-style: none;
}
.fact-row { display: flex; flex-direction: column; gap: var(--s-4); padding-top: 18px; border-top: 2px solid var(--ink); }
.fact-row__title { font-size: var(--fs-body-lg); font-weight: 600; line-height: 1.4; }
.fact-row__text { color: var(--ink-3); font-size: var(--fs-small); line-height: 1.47; }

@media (min-width: 768px) {
  .hero__stage { min-height: 0; }
  .hero__sheet {
    inset: 0 0 auto 0;
    height: calc(128px + var(--piece-w) * 0.35341);
    background-image: url("/assets/img/dotcross-64.svg");
    background-size: 64px 64px;
    border-bottom: 1px solid var(--rule);
  }
  .hero__inner {
    position: relative;
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
    padding: 64px 0 0;
  }
  .hero__drawing { position: relative; top: auto; width: 100%; aspect-ratio: 1245 / 440; }
  .kurta--rotated { display: block; }
  .kurta--upright { display: none; }
  .kurta-ticket { left: 73.25%; top: 44.55%; gap: 2px; font-size: var(--fs-small); line-height: 1.47; }
  .kurta-label--slit { left: 3.21%; top: 9.09%; }
  .kurta-label--fold { left: 65.22%; top: 85.45%; width: 17.67%; text-align: center; }
  .hero__title {
    position: absolute;
    left: calc(var(--piece-w) * 0.0514);
    top: calc(64px + var(--piece-w) * 0.08353);
    padding: 0;
    font-size: 7vw;
    font-size: calc(var(--piece-w) * 0.08032);
    line-height: 1;
    letter-spacing: -0.025em;
  }
  .hero__copy {
    display: grid;
    gap: var(--s-24);
    max-width: none;
    margin-top: 104px;
    padding-bottom: 0;
  }
  .hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-12); }
  .hero__actions .btn { width: auto; }
  .hero__quote { align-self: auto; flex-basis: 100%; margin-top: 6px; padding: var(--s-4) 0; font-size: var(--fs-body); }
  .hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); padding-block: var(--s-48) var(--s-56); }
}
@media (min-width: 1024px) {
  .hero__copy { grid-template-columns: minmax(0, 620px) 432px; justify-content: space-between; align-items: start; }
  .hero__lead { max-width: 620px; }
}

/* The single orchestrated moment: the cut line draws once, then the headline appears. */
@media (prefers-reduced-motion: no-preference) {
  .kurta__reveal { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kurta-draw 900ms var(--ease-out) 100ms forwards; }
  .hero__title { animation: hero-fade 200ms ease-out 850ms both; }
}
@keyframes kurta-draw { to { stroke-dashoffset: 0; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------------
   Proof strip
   --------------------------------------------------------------------- */
.proof { padding-block: var(--s-32); background: var(--paper); border-block: 1px solid var(--rule); }
.proof .container { display: flex; flex-direction: column; gap: var(--s-16); }
.proof__title { font-size: var(--fs-small); line-height: 1.47; font-weight: 600; }
.proof__logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-12); list-style: none; }
.proof__logos li { display: flex; align-items: center; justify-content: center; }
.proof__logos img { width: 100%; max-width: 200px; height: auto; }
@media (min-width: 1024px) {
  .proof { padding-block: 44px; }
  .proof .container { flex-direction: row; align-items: center; gap: var(--s-48); }
  .proof__title { flex: 0 0 180px; font-size: var(--fs-body); line-height: 1.5; }
  .proof__logos { flex-grow: 1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap); }
}

/* ---------------------------------------------------------------------
   Two ways to work with us
   --------------------------------------------------------------------- */
.paths { border-top: 0; }
.paths__grid { display: grid; gap: var(--s-20); }
.path {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  padding: var(--s-24);
  background: var(--white);
  border: 1px solid var(--rule);
}
.path__title { font-family: var(--font-display); font-size: var(--fs-path); line-height: 1.15; letter-spacing: -0.01em; }
.path__text { font-size: var(--fs-body-lg); line-height: 1.59; max-width: 460px; }
.path__get { display: flex; flex-direction: column; gap: 10px; }
.path__label { display: none; color: var(--ink-3); font-size: var(--fs-small); font-weight: 600; }
.path .list { font-size: var(--fs-body-lg); line-height: 1.53; gap: 6px; }
.path .btn { width: 100%; margin-top: auto; }
@media (min-width: 768px) {
  .paths__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
  .path .btn { width: auto; align-self: flex-start; }
  .path__label { display: block; }
}
@media (min-width: 1024px) {
  .path { gap: var(--s-24); padding: var(--s-40) var(--s-48); }
  .path .list { gap: var(--s-8); }
}

/* ---------------------------------------------------------------------
   How it works: two stages with the approval band between them
   --------------------------------------------------------------------- */
.process { padding-bottom: 0; }
.process > .container + .container,
.process .stage + .approval { margin-top: var(--s-24); }
.stage { display: grid; gap: var(--s-16); }
.stage__intro { display: flex; flex-direction: column; gap: var(--s-12); }
.stage__intro p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.53; }
.steps { list-style: none; border-bottom: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s-12);
  padding: var(--s-16) 0;
  border-top: 1px solid var(--rule);
}
.step__num { font-family: var(--font-display); font-size: var(--fs-step); font-weight: 300; line-height: 1; color: var(--chalk); }
.steps--make .step__num { color: var(--ink); }
.step__body { display: flex; flex-direction: column; gap: var(--s-4); }
.step__title { font-size: var(--fs-item); font-weight: 600; line-height: 1.37; }
.step__detail { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-small); line-height: 1.53; }
.step__get { color: var(--ink-3); font-size: var(--fs-small); line-height: 1.47; }
.stage .text-link { align-self: flex-start; }
.process__stage-2 { padding-bottom: var(--section-y); }

@media (min-width: 768px) {
  .step { grid-template-columns: 64px 220px minmax(0, 1fr); gap: var(--grid-gap); padding: 22px 0; }
  .step__body { display: contents; }
  .step__detail { font-size: var(--fs-body); line-height: 1.5625; }
  .stage__intro p { font-size: var(--fs-body); line-height: 1.5625; }
}
@media (min-width: 1024px) {
  .stage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
  .stage__intro { gap: 14px; padding-right: var(--s-40); }
  .stage__intro .text-link { margin-top: 6px; }
  .steps { grid-column: span 2; }
  .process > .container + .container,
  .process .stage + .approval { margin-top: var(--s-64); }
}

.approval { background: var(--manila); margin-block: var(--s-40); }
.approval__inner {
  display: grid;
  gap: var(--s-16);
  padding-block: var(--s-40);
}
.approval__tag { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.approval__text { display: flex; flex-direction: column; gap: var(--s-16); }
.approval__title { font-family: var(--font-display); font-size: var(--fs-band); line-height: 1.12; letter-spacing: -0.015em; max-width: 480px; }
.approval__text p { font-size: var(--fs-lead); line-height: 1.6; max-width: 640px; }
.tag-card { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.tag-string { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.tag-hole-ring { fill: none; stroke: var(--sheet-mark); stroke-width: 1; }
.tag-hole { fill: var(--manila); stroke: var(--ink); stroke-width: 1.5; }
.tag-rule { stroke: var(--rule); stroke-width: 1; }
.tag-line { stroke: var(--ink); stroke-width: 1; }
.tag-sign { fill: none; stroke: var(--chalk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tag-title { font-family: var(--font-display); font-weight: 600; font-size: 24px; fill: var(--ink); }
.tag-key { font-family: var(--font-text); font-size: 14px; fill: var(--ink-3); }
.tag-value { font-family: var(--font-text); font-size: 15px; font-weight: 600; fill: var(--ink); }
@media (min-width: 1024px) {
  .approval { margin-block: var(--s-64); }
  .approval__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; padding-block: var(--s-64); }
  .approval__tag { max-width: 380px; }
  .approval__text { grid-column: span 2; gap: 18px; }
}

/* ---------------------------------------------------------------------
   What we make
   --------------------------------------------------------------------- */
.fabrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24) var(--s-12); list-style: none; }
.fabric { display: flex; flex-direction: column; gap: var(--s-8); }
.fabric .photo { --photo-h: 150px; }
.fabric__title { font-family: var(--font-display); font-size: var(--fs-tile); line-height: 1.3; font-weight: 600; }
.fabric__list { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.47; }
.fabric__meta { color: var(--ink-3); font-size: var(--fs-caption); line-height: 1.43; }
.label-long { display: none; }
@media (min-width: 768px) {
  .fabric .photo { --photo-h: 240px; }
  .label-long { display: inline; }
  .label-short { display: none; }
}
@media (min-width: 1024px) {
  .fabrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-48) var(--grid-gap); }
  .fabric { gap: 14px; }
  .fabric .photo { --photo-h: 320px; }
  .fabric__text { display: flex; flex-direction: column; gap: var(--s-4); }
  .fabric__list { font-size: var(--fs-body); line-height: 1.5; }
  .fabric__meta { font-size: var(--fs-small); line-height: 1.47; }
}
.aside-note { font-size: var(--fs-body-lg); line-height: 1.53; }
.aside-note .text-link { padding: 0; white-space: nowrap; }

/* ---------------------------------------------------------------------
   Recent work (#MadeByDot)
   --------------------------------------------------------------------- */
.section-head__title { display: flex; flex-direction: column; gap: 18px; }
.section-head__title .badge { width: 120px; height: auto; }
.work-grid { display: grid; gap: var(--s-40); list-style: none; }
.case { display: flex; flex-direction: column; gap: var(--s-12); }
.case .photo { --photo-h: 220px; }
.case__who { color: var(--ink-3); font-size: var(--fs-caption); font-weight: 600; }
.case__title { font-family: var(--font-display); font-size: var(--fs-card); line-height: 1.17; }
.case__started { font-size: var(--fs-body); line-height: 1.5; }
/* The homepage shows one case study and a link onward. The Work page,
   whose whole job is the list, carries --all and shows them all. */
.work-grid:not(.work-grid--all) > li:nth-child(n + 2) { display: none; }
.work-all { width: 100%; }
.work-grid--all { gap: var(--s-40); }
@media (min-width: 768px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
  .work-grid:not(.work-grid--all) > li:nth-child(2) { display: flex; }
  .work-all { display: none; }
}
@media (min-width: 1024px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work-grid:not(.work-grid--all) > li:nth-child(3) { display: flex; }
  .case { gap: var(--s-16); }
  .case .photo { --photo-h: 300px; }
  .case__who { font-size: var(--fs-small); }
}

/* ---------------------------------------------------------------------
   Quality you can check
   --------------------------------------------------------------------- */
.checks { list-style: none; margin-left: var(--s-8); border-left: 2px solid var(--chalk); }
.check { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: 0 0 22px 28px; }
.check:last-child { padding-bottom: var(--s-4); }
.check::before { content: ""; position: absolute; left: -9px; top: 12px; width: 16px; height: 2px; background: var(--chalk); }
.check__head { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-body-lg); font-weight: 600; line-height: 1.41; }
.check__num { font-family: var(--font-display); font-size: var(--fs-check); font-weight: 600; line-height: 1; color: var(--chalk); }
.check__text { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.47; }
@media (min-width: 1024px) {
  .checks { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-left: 0; border-left: 0; }
  .check { gap: 6px; padding: var(--s-24) var(--s-24) 0 0; border-top: 2px solid var(--chalk); }
  .check:last-child { padding: var(--s-24) 0 0 0; }
  .check::before { left: 0; top: -9px; width: 2px; height: 16px; }
  .check:last-child::after { content: ""; position: absolute; right: 0; top: -9px; width: 2px; height: 16px; background: var(--chalk); }
  .check__head { flex-direction: column; align-items: flex-start; gap: 6px; font-size: 1.125rem; line-height: 1.39; }
  .check__num { line-height: 1.19; }
}

.quality__more { display: grid; gap: var(--s-32); }
.report { display: flex; flex-direction: column; gap: 14px; }
.report .photo { --photo-h: 200px; }
.certs { display: flex; flex-direction: column; gap: 14px; }
.cert-table { display: none; width: 100%; font-size: var(--fs-body); line-height: 1.5; }
.cert-table th {
  padding: 0 var(--s-16) var(--s-12) 0;
  border-bottom: 2px solid var(--ink);
  color: var(--ink-3);
  font-size: var(--fs-small);
  font-weight: 600;
  text-align: left;
}
.cert-table td { padding: var(--s-16) var(--s-16) var(--s-16) 0; border-bottom: 1px solid var(--rule); }
.cert-table td:first-child { font-weight: 600; }
.cert-table th:last-child, .cert-table td:last-child { padding-right: 0; }
.cert-list { border-bottom: 1px solid var(--rule); }
.cert-list > div { display: flex; flex-direction: column; gap: 2px; padding: var(--s-16) 0; border-top: 1px solid var(--rule); }
.cert-list dt { font-weight: 600; }
.cert-list dd { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.53; }
@media (min-width: 768px) {
  .cert-table { display: table; }
  .cert-list { display: none; }
}
@media (min-width: 1024px) {
  .quality__more { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
  .report { padding-right: var(--s-24); }
  .certs { grid-column: span 2; }
}

/* ---------------------------------------------------------------------
   Why brands choose us: each promise and how to check it
   --------------------------------------------------------------------- */
.promises { border-bottom: 1px solid var(--rule); }
.promises__head { display: none; }
.promise { display: grid; gap: var(--s-4); padding: var(--s-20) 0; border-top: 1px solid var(--rule); }
.promise dt { font-size: var(--fs-row-title); font-weight: 600; line-height: 1.4; }
.promise dd { font-size: var(--fs-body-lg); line-height: 1.59; }
@media (min-width: 768px) {
  .promises__head {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
    padding-bottom: var(--s-12);
    border-bottom: 2px solid var(--ink);
    color: var(--ink-3);
    font-size: var(--fs-small);
    font-weight: 600;
  }
  .promises__head span:last-child,
  .promise dd { grid-column: span 2; }
  .promise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); padding: 22px 0; }
  .promises > .promise:first-child { border-top: 0; }
}

/* ---------------------------------------------------------------------
   Our factory
   --------------------------------------------------------------------- */
.factory__grid {
  display: grid;
  gap: var(--s-24);
  grid-template-areas: "film" "facts" "photos" "links";
}
.factory__film { grid-area: film; --photo-h: 200px; display: flex; align-items: center; justify-content: center; }
.factory__facts { grid-area: facts; display: flex; flex-direction: column; gap: 14px; }
.factory__photos { grid-area: photos; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); }
.factory__photos .photo { --photo-h: 150px; }
.factory__links { grid-area: links; display: flex; flex-direction: column; gap: var(--s-4); }
.play-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--white);
}
.play-mark svg { fill: var(--chalk); }
/* The factory film: the play mark starts it, then the browser's own controls take over */
.film { position: relative; background: var(--ink); }
.film__video { display: block; width: 100%; height: var(--photo-h, 220px); object-fit: cover; }
.film__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; padding: 0; border: 0; cursor: pointer; }
.js .film__play { display: flex; }
.film.is-playing .film__play { display: none; }
.facts-dl { border-bottom: 1px solid var(--rule); }
.facts-dl > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--s-16); padding: var(--s-12) 0; border-top: 1px solid var(--rule); }
.facts-dl dt { color: var(--ink-3); font-size: var(--fs-small); line-height: 1.6; }
.facts-dl dd { font-size: var(--fs-body); font-weight: 600; line-height: 1.5; }
.facts-checked { color: var(--ink-3); font-size: var(--fs-caption); line-height: 1.43; }
@media (min-width: 1024px) {
  .factory__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "facts film film"
      "facts photos photos"
      "facts links links";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--grid-gap);
    align-items: start;
  }
  .factory__facts { padding-right: var(--s-24); }
  .factory__film { --photo-h: 360px; }
  .factory__photos { gap: var(--grid-gap); }
  .factory__photos .photo { --photo-h: 220px; }
  .factory__links { flex-direction: row; gap: var(--s-32); }
  .play-mark { width: 76px; height: 76px; }
  .facts-dl > div { grid-template-columns: 140px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------
   Start a project (step 1 of the form)
   --------------------------------------------------------------------- */
.start .h2 { font-size: var(--fs-start); line-height: 1.07; white-space: nowrap; }
.start__grid { display: grid; gap: var(--s-40); }
.start-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
  padding: var(--s-24) var(--s-20);
  background: var(--white);
  border: 1px solid var(--manila-edge);
}
.start__aside { display: flex; flex-direction: column; gap: var(--s-32); }
.start__aside .h3-sub { font-size: var(--fs-item); }
.contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
}
.next-steps { padding-left: 22px; display: flex; flex-direction: column; gap: var(--s-12); font-size: var(--fs-body); line-height: 1.5625; }
@media (min-width: 1024px) {
  .start__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; }
  .start-form { grid-column: span 2; gap: var(--s-32); padding: var(--s-40); }
  .start__aside { gap: var(--s-40); padding-left: var(--s-16); }
  .start__aside .h3-sub { font-size: var(--fs-sub); }
  .contact-line { font-size: var(--fs-body-lg); }
}

.aside-block { display: flex; flex-direction: column; gap: 14px; }
.aside-block__note { color: var(--ink-2); }

/* ---------------------------------------------------------------------
   From idea to bulk: three drawings, almost no words
   --------------------------------------------------------------------- */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.journey__row { --gap: clamp(16px, 4vw, 44px); display: grid; gap: var(--s-32) var(--gap); list-style: none; }
.journey__stage { display: flex; flex-direction: column; align-items: center; gap: var(--s-8); text-align: center; }
.journey__art { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; min-height: 150px; }
.journey__art > svg:not(.journey__link) { width: 100%; max-width: 132px; height: auto; overflow: visible; }
.journey__caption { font-family: var(--font-display); font-size: var(--fs-tile); font-weight: 600; line-height: 1.2; }
.journey__stage p { max-width: 24ch; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.journey__sketch use { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.journey__fill { fill: var(--manila); stroke: none; }
.journey__outline { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.journey__tag path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.journey__tag-card { fill: var(--white); }
.journey__link { position: absolute; left: calc(-0.5 * var(--gap) - 14px); top: 52%; width: 28px; height: 10px; overflow: visible; }
.journey__link path { fill: none; stroke: var(--chalk); stroke-width: 2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.journey__bulk { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; width: 100%; max-width: 190px; }
.journey__piece { width: 100%; height: auto; overflow: visible; }
.journey__piece use { fill: var(--manila); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
@media (min-width: 700px) {
  .journey__row { grid-template-columns: 1fr 1fr 1.2fr; align-items: end; }
  .journey__link { left: calc(-0.5 * var(--gap) - 14px); }
}
@media (max-width: 699px) {
  .journey__link { left: calc(50% - 14px); top: -30px; width: 28px; height: 10px; rotate: 90deg; }
  .journey__stage + .journey__stage { padding-top: var(--s-32); }
  .journey__art { min-height: 132px; }
}

/* The approved sample gets stamped */
.approval__inner { position: relative; overflow: hidden; }
.stamp {
  position: absolute;
  right: var(--s-16);
  top: var(--s-16);
  padding: 6px 14px;
  border: 3px solid var(--chalk);
  border-radius: 4px;
  color: var(--chalk);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  transform: rotate(-8deg);
  mix-blend-mode: multiply;
}
@media (min-width: 1024px) { .stamp { right: 0; top: var(--s-24); } }

/* "You get" reads as a small chip, so the step is scanned, not read */
.step__get {
  align-self: flex-start;
  padding: 3px 8px;
  background: var(--chalk-tint);
  color: var(--ink-2);
  font-size: var(--fs-caption);
  line-height: 1.43;
}

/* A drawing on every answer in step 1 of the form */
.radio-card__art { flex-shrink: 0; width: 34px; height: 40px; }
.radio-card__art svg { width: 100%; height: 100%; overflow: visible; }
.radio-card__art path, .radio-card__art rect, .radio-card__art circle { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.radio-card:has(input:checked) .radio-card__art path,
.radio-card:has(input:checked) .radio-card__art rect,
.radio-card:has(input:checked) .radio-card__art circle { stroke: var(--chalk); }

/* pages.css */
/* Inner pages: the same pattern-room language as the homepage, led by pictures. */

/* Drawn marks */
.mark { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mark rect, .mark circle, .mark path { fill: none; }

/* Page hero: plain pale blue since 2 October 2026 (the dot-and-cross paper went with the quieter look) */
.page-hero { background: var(--manila); }
.page-hero--paper { background: var(--paper); }
.page-hero--manila { background: var(--manila); border-bottom-color: var(--manila-edge); }
.page-hero__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-32); padding-block: clamp(3rem, 1.9rem + 4.6vw, 5.5rem); }
.page-hero__text { display: flex; flex-direction: column; gap: var(--s-16); max-width: 46rem; }
.page-hero__title { font-family: var(--font-display); font-size: var(--fs-start); line-height: 1.05; letter-spacing: -0.03em; font-weight: 500; }
.page-hero__intro { font-size: var(--fs-hero-lead); line-height: 1.55; max-width: 38rem; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-12); margin-top: var(--s-8); }
.page-hero__mark { display: none; }
@media (min-width: 900px) {
  .page-hero__mark { display: block; flex-shrink: 0; width: clamp(120px, 14vw, 190px); height: auto; stroke: var(--ink); stroke-width: 1.4; fill: none; }
  .page-hero__mark [fill] { fill: none; }
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); color: var(--ink-3); font-size: var(--fs-small); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--chalk-hover); text-decoration: underline; text-underline-offset: 3px; }

/* A row of cards, each led by a drawing */
.cards { display: grid; gap: var(--s-20); list-style: none; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } }
@media (min-width: 1024px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding: var(--s-24);
  background: var(--white);
  border: 1px solid var(--rule);
}
.card .mark { width: 48px; height: 48px; }
.card__title { font-family: var(--font-display); font-size: var(--fs-tile); font-weight: 600; line-height: 1.2; }
.card p { font-size: var(--fs-small); line-height: 1.53; }
.card .text-link { margin-top: auto; }
.card--plain { background: transparent; border: 0; padding: 0; }

/* A short numbered list, same marks as the homepage steps */
.mini-steps { list-style: none; display: grid; gap: var(--s-16); }
@media (min-width: 768px) { .mini-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24) var(--grid-gap); } }
.mini-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-12); padding-top: var(--s-12); border-top: 2px solid var(--ink); }
.mini-step__num { font-family: var(--font-display); font-size: var(--fs-step); font-weight: 300; line-height: 1; color: var(--chalk); }
.mini-step__body { display: flex; flex-direction: column; gap: var(--s-4); }
.mini-step__title { font-size: var(--fs-item); font-weight: 600; line-height: 1.35; }
.mini-step p { font-size: var(--fs-small); line-height: 1.53; }

/* Two-column "what you supply / what we do" table */
.split-table { border-bottom: 1px solid var(--rule); }
.split-table__head { display: none; }
.split-row { display: grid; gap: var(--s-4); padding: var(--s-16) 0; border-top: 1px solid var(--rule); }
.split-row dt { font-size: var(--fs-row-title); font-weight: 600; line-height: 1.4; }
.split-row dd { font-size: var(--fs-body-lg); line-height: 1.55; }
@media (min-width: 768px) {
  .split-table__head {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
    padding-bottom: var(--s-12);
    border-bottom: 2px solid var(--ink);
    color: var(--ink-3);
    font-size: var(--fs-small);
    font-weight: 600;
  }
  .split-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); padding: 20px 0; }
  .split-table > .split-row:first-of-type { border-top: 0; }
}

/* Questions and answers */
.faq { display: flex; flex-direction: column; border-bottom: 1px solid var(--rule); }
.faq__item { border-top: 1px solid var(--rule); }
.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-16);
  padding: var(--s-16) 0;
  font-size: var(--fs-item);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex-shrink: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 300; line-height: 1; color: var(--chalk); }
.faq__item[open] summary::after { content: "–"; }
.faq__answer { padding-bottom: var(--s-16); max-width: 70ch; }
.faq__answer p + p { margin-top: var(--s-8); }

/* Rows of small facts (terms, capacity) */
.term-grid { display: grid; gap: var(--s-16); list-style: none; }
@media (min-width: 700px) { .term-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-20) var(--grid-gap); } }
@media (min-width: 1024px) { .term-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.term { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-12); border-top: 2px solid var(--ink); }
.term__value { font-family: var(--font-display); font-size: var(--fs-stage); font-weight: 600; line-height: 1.1; }
/* Some answers are words ("the same day", "agreed in a meeting"): the tile starts with a capital */
.term__value::first-letter { text-transform: uppercase; }
.term__label { color: var(--ink-3); font-size: var(--fs-small); }

/* The closing band on every inner page: one line and one button, on navy */
.cta-band { padding-block: var(--section-y); background: var(--ink-panel); color: var(--white); }
.cta-band__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-20); }
.cta-band .h2 { max-width: 14em; }
.cta-band .lead { color: var(--manila); }
.cta-band .btn { margin-top: var(--s-8); }
.cta-band :focus-visible { outline-color: var(--white); }

/* The map under the address (Contact): Google's own, loaded as it comes near the screen */
.map { margin-top: var(--s-8); border: 1px solid var(--rule); background: var(--manila); }
.map__frame { display: block; width: 100%; height: clamp(320px, 42vw, 460px); border: 0; }

/* Contact page details */
.contact-grid { display: grid; gap: var(--s-24); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } }
.contact-card { display: flex; flex-direction: column; gap: var(--s-8); padding-top: var(--s-16); border-top: 2px solid var(--ink); }
.contact-card__label { color: var(--ink-3); font-size: var(--fs-small); font-weight: 600; }
.contact-card a { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-size: var(--fs-item); font-weight: 600; }

/* Legal pages: plain reading column */
.prose { display: flex; flex-direction: column; gap: var(--s-16); max-width: 68ch; }
.prose .h2 { margin-bottom: var(--s-8); }
.prose .h3-sub { margin-top: var(--s-24); }
.prose p { font-size: var(--fs-body-lg); line-height: 1.6; }
.prose .list { font-size: var(--fs-body-lg); line-height: 1.6; }

/* Guides (/insights/, 2026-10-08): jump links land below the header, the tech pack cards sit two
   across on a phone and three from 1024 px, and the figures are drawings or one real photograph */
.prose [id] { scroll-margin-top: calc(var(--header-h) + var(--s-16)); }
.prose .next-steps a { min-height: 44px; display: inline-flex; align-items: center; }
.guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12); max-width: none; }
.guide-cards .card { padding: var(--s-16); }
.guide-cards .card .mark { width: 40px; height: 40px; }
@media (min-width: 1024px) { .guide-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-20); } }
.guide-note { padding: var(--s-20); background: var(--manila); }
.guide-note p { font-size: var(--fs-body-lg); line-height: 1.53; }
.guide-figure { display: flex; flex-direction: column; gap: var(--s-8); margin-block: var(--s-8); }
.guide-figure img.photo { --photo-h: 240px; }
@media (min-width: 768px) { .guide-figure img.photo { --photo-h: 340px; } }
.guide-figure--tag { align-items: flex-start; padding: var(--s-24); background: var(--manila); }
.guide-tag { width: 100%; max-width: 300px; height: auto; overflow: visible; }

/* Thank you and page not found: a short band on the pattern paper */
.thanks { background: var(--manila); }
.thanks__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-32); padding-block: var(--section-y); }
.thanks__mark { width: 110px; height: auto; flex-shrink: 0; }
.thanks__mark use { fill: var(--manila); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.thanks__text { display: flex; flex-direction: column; gap: var(--s-16); max-width: 46rem; }
.thanks__next { padding-left: 22px; }
.thanks__ref { margin-top: var(--s-8); color: var(--ink-3); font-size: var(--fs-small); }

/* quote.css */
/* The quote form (DESIGN §6): one section, the same on the homepage and on /start-a-project/.
   A photograph banner carrying the title, then a white card overlapping it, holding the form.
   Since 1 October 2026 it is the only form on the site. */
.quote {
  --quote-veil: rgba(12, 28, 48, 0.72);     /* navy over the photo, so the white title reads */
  padding-bottom: clamp(4.5rem, 3.2rem + 5.4vw, 8rem);
  background: var(--paper);
}
.quote--page { padding-bottom: var(--s-48); }
.quote__banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(200px, 22vw, 320px);
  padding-bottom: var(--s-48);
  overflow: hidden;
  background: var(--ink-panel);
}
.quote__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote__banner::after { content: ""; position: absolute; inset: 0; background: var(--quote-veil); }
.quote__title {
  position: relative;
  z-index: 1;
  padding-inline: var(--gutter);
  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1.5rem + 5.2vw, 5.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-align: center;
}
.quote__card { position: relative; margin-top: calc(-1 * var(--s-48)); padding: var(--s-32) var(--s-20); background: var(--white); border-top: 4px solid var(--chalk-bright); }
@media (min-width: 768px) { .quote__card { padding: var(--s-48); } }
.quote__intro { margin-bottom: var(--s-24); font-size: var(--fs-lead); line-height: 1.5; }

/* The fields: three columns on a wide screen, two on a tablet, one on a phone */
.qform__grid { display: grid; gap: var(--s-20); }
@media (min-width: 640px) { .qform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24) var(--grid-gap); } }
@media (min-width: 1024px) { .qform__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qform__wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: var(--s-8); }
.field > label { font-size: var(--fs-body); font-weight: 600; line-height: 1.4; }
.field-help { color: var(--ink-3); font-size: var(--fs-small); line-height: 1.5; }
.field-error { display: flex; gap: var(--s-8); color: var(--error); font-size: var(--fs-small); font-weight: 600; line-height: 1.47; }
.qform input[type="text"],
.qform input[type="email"],
.qform input[type="tel"],
.qform input[type="number"],
.qform select,
.qform textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  background: var(--manila);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font-size: var(--fs-body);
}
.qform textarea { min-height: 120px; resize: vertical; }
.qform input:focus-visible,
.qform select:focus-visible,
.qform textarea:focus-visible { border-color: var(--chalk); }
.qform .has-error input,
.qform .has-error select,
.qform .has-error textarea { border-color: var(--error); border-width: 2px; }
.qform__send { width: 100%; margin-top: var(--s-32); }
.qform__note { margin-top: var(--s-12); color: var(--ink-3); font-size: var(--fs-small); line-height: 1.5; }

/* Never seen by people, only by robots */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile-slot:empty { display: none; }

/* What the handler sends back */
.form-problem {
  margin-bottom: var(--s-24);
  padding: var(--s-16);
  border-left: 3px solid var(--error);
  background: var(--white);
  font-size: var(--fs-body);
  line-height: 1.5;
}

/* Start a project: the two notes under the form */
.quote-more { display: grid; gap: var(--s-32); padding-bottom: var(--section-y); }
@media (min-width: 768px) { .quote-more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); } }

/* consent.css */
/* The cookie choice (RULES §6.2): a small navy card at the foot of the screen, on the left from
   600 px so the WhatsApp button stays clear; full width on a phone, where the two round buttons
   step aside until a choice is made. Accept and Reject are the same button. */
.consent {
  position: fixed;
  left: var(--s-16);
  right: var(--s-16);
  bottom: calc(var(--s-16) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-consent);
  padding: var(--s-20);
  border: 1px solid var(--rule-on-dark);
  border-radius: var(--radius);
  background: var(--ink-panel);
  color: var(--white);
}
.consent__text { font-size: var(--fs-small); line-height: 1.5; }
.consent .consent__link { color: var(--white); }
.consent__actions { display: flex; gap: var(--s-12); margin-top: var(--s-16); }
.consent__actions .btn { flex: 1 1 0; }
.consent :focus-visible { outline-color: var(--white); }
@media (max-width: 599px) {
  .consent-open .wa-float,
  .consent-open .to-top { display: none; }
}
@media (min-width: 600px) {
  .consent { right: auto; width: min(100% - 2 * var(--s-16), 28rem); }
}

/* motion.css */
/* Motion (DESIGN §8). Everything here plays only when `html` has the `motion` class,
   which the head script sets from the device's "reduce motion" setting.
   Each animation shows something real from the making of a garment. */

/* --- Shared: a delay token (--d) and two building blocks --- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes grow-x { to { transform: none; } }
@keyframes pop { to { opacity: 1; transform: none; } }

.motion .rise { opacity: 0; animation: rise 500ms var(--ease-out) forwards; animation-delay: var(--d, 0ms); }

/* --- Headings written in letter by letter (effects.js splits a heading marked data-split when
   motion is on, and adds `is-in` as it comes into view). Each letter arrives from the left,
   20 ms after the last, as on the reference site. --- */
.split__word { display: inline-block; white-space: nowrap; }
.motion .split__char {
  display: inline-block;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-back);
  transition-delay: calc(var(--i, 0) * 20ms);
}
.motion .split.is-in .split__char { opacity: 1; transform: none; }

/* --- Hero: the pattern piece is drawn, then the headline is written on it --- */
.hero__line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero__line > span { display: inline-block; }
.kurta__reveal, .kurta__stitch-reveal, .kurta__mark-reveal { fill: none; stroke: #fff; stroke-width: 16; }
.kurta--rotated .kurta__stitch { --march-to: -12; }
.kurta--upright .kurta__stitch { --march-to: -10; }

.motion .kurta__reveal { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1000ms var(--ease-out) 200ms forwards; }
.motion .kurta__piece { opacity: 0; animation: fade-in 600ms ease-out 900ms forwards; }
.motion .kurta__stitch-reveal { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1300ms var(--ease-out) 700ms forwards; }
.motion .kurta__notch { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: notch-tick 300ms cubic-bezier(.2, 1.5, .4, 1) forwards; animation-delay: var(--d); }
/* A mark draws through its mask, as the cut line does. Dashing the visible path fails in Chrome
   once the drawing is scaled up: pathLength and a non-scaling stroke disagree, and the line stops short. */
.motion .kurta__mark-reveal { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 700ms var(--ease-out) forwards; animation-delay: var(--d); }
.motion .kurta-ticket > *,
.motion .kurta-label { opacity: 0; animation: rise 500ms var(--ease-out) forwards; animation-delay: var(--d, 2000ms); }
.motion .hero__line > span { transform: translateY(112%); animation: write-on 650ms cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: var(--d); }
/* Touch the piece and the stitching line runs, the way a machine feeds cloth. */
.motion .hero__drawing:hover .kurta__stitch { animation: stitch-march 1000ms linear infinite; }
@keyframes notch-tick { to { transform: scale(1); } }
@keyframes write-on { to { transform: none; } }
@keyframes stitch-march { to { stroke-dashoffset: var(--march-to, -12); } }

/* --- Idea, sample, bulk: one garment is sketched, made and tagged, then made again and again --- */
.motion .journey__stage .journey__caption,
.motion .journey__stage p { opacity: 0; }
.motion .journey.in-view .journey__caption { animation: rise 450ms var(--ease-out) forwards; animation-delay: var(--d); }
.motion .journey.in-view .journey__stage p { animation: rise 450ms var(--ease-out) forwards; animation-delay: calc(var(--d) + 150ms); }
.motion .journey__sketch use { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .journey.in-view .journey__sketch use { animation: draw 1200ms var(--ease-out) 200ms forwards; }
.motion .journey__link { transform: scaleX(0); transform-origin: left; }
.motion .journey.in-view .journey__link { animation: grow-x 400ms var(--ease-out) forwards; animation-delay: var(--d); }
.motion .journey__outline { opacity: 0; }
.motion .journey.in-view .journey__outline { animation: fade-in 300ms ease-out 1700ms forwards; }
.motion .journey__fill-rect { transform: translateY(100%); transform-box: fill-box; }
.motion .journey.in-view .journey__fill-rect { animation: grow-x 700ms var(--ease-out) 1800ms forwards; }
.motion .journey__tag { opacity: 0; transform: translateY(-14px) rotate(-10deg); transform-box: fill-box; transform-origin: top center; }
.motion .journey.in-view .journey__tag { animation: tag-drop 550ms cubic-bezier(.3, 1.4, .4, 1) 2400ms forwards; }
.motion .journey__piece { opacity: 0; transform: scale(.4); }
.motion .journey.in-view .journey__piece { animation: pop 350ms cubic-bezier(.2, 1.3, .4, 1) forwards; animation-delay: calc(2900ms + var(--i) * 45ms); }
@keyframes tag-drop { to { opacity: 1; transform: none; } }

/* --- How it works: a stitching line follows you down the steps, numbers are stamped in --- */
.steps { position: relative; }
.steps::before {
  content: "";
  position: absolute;
  left: 46px;
  top: 0;
  bottom: 0;
  border-left: 2px dashed var(--seam);
  transform: scaleY(var(--p, 1));
  transform-origin: top;
}
@media (min-width: 768px) { .steps::before { left: 76px; } }
.motion .steps::before { transform: scaleY(var(--p, 0)); }
.motion .step .step__num { opacity: 0; transform: scale(1.35); }
.motion .step.in-view .step__num { animation: stamp-in 450ms cubic-bezier(.2, 1.2, .3, 1) forwards; }
@keyframes stamp-in { to { opacity: 1; transform: none; } }

/* --- The approval tag swings in on its string, and the sample is stamped --- */
.approval__tag { transform-origin: 19.8% 44.6%; }
.motion .approval__tag { opacity: 0; }
.motion .approval__tag.in-view { animation: tag-swing 1500ms cubic-bezier(.3, 1.3, .5, 1) forwards; }
.motion .stamp { opacity: 0; transform: rotate(-8deg) scale(1.9); }
.motion .approval.in-view .stamp { animation: stamp-down 450ms cubic-bezier(.2, 1.3, .3, 1) 700ms forwards; }
@keyframes tag-swing {
  0% { opacity: 0; transform: rotate(-12deg); }
  25% { opacity: 1; }
  60% { transform: rotate(3deg); }
  80% { transform: rotate(-1.5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes stamp-down { to { opacity: 1; transform: rotate(-8deg) scale(1); } }

/* --- Quality checks arrive one after another, like garments coming off the line --- */
.motion .checks .check { opacity: 0; transform: translateY(8px); }
.motion .checks.in-view .check { animation: rise 500ms var(--ease-out) forwards; animation-delay: calc(var(--n, 0) * 120ms); }
.check:nth-child(2) { --n: 1; }
.check:nth-child(3) { --n: 2; }
.check:nth-child(4) { --n: 3; }
.check:nth-child(5) { --n: 4; }
.check:nth-child(6) { --n: 5; }

/* --- Fabric swatches: the corner folds back when you touch one --- */
.fabric .photo { overflow: hidden; }
.fabric .photo::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0;
  border-color: var(--paper) var(--paper) var(--manila-edge) var(--manila-edge);
  transition: border-width var(--medium) var(--ease-out);
}
.fabric:hover .photo::after,
.fabric:focus-within .photo::after { border-width: 0 34px 34px 0; }