/* ==========================================================================
   UCAR DIGITAL MEDIA - Design system
   Direction: Dutch modernist signal board.
   Concrete ground, exposed grid, one superfamily at extreme widths.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Colour. Orange is a BLOCK FILL only - it never carries body text
     (2.7:1 on paper). Ink on orange = 5.6:1, white on klein = 8.5:1. */
  --ink:        #121317;
  --ink-soft:   #3A3B42;
  --ink-mute:   #5E5F68;
  --paper:      #E9E9E3;
  --paper-deep: #DDDDD5;
  --white:      #FBFBF8;
  --klein:      #1B2ED6;
  --klein-deep: #1424A8;
  --signal:     #FF4D17;
  --mist:       #C4C4BB;
  --hair:       rgba(18, 19, 23, 0.16);
  --hair-soft:  rgba(18, 19, 23, 0.08);

  /* Type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* The floors are set by Dutch and Turkish, not English: words like
     VAZGECMEYECEGIMIZ have to fit a 320px screen without breaking out. */
  --t-hero:  clamp(2.1rem, 6vw, 6.75rem);
  --t-h1:    clamp(1.85rem, 6.2vw, 5.75rem);
  --t-h2:    clamp(1.55rem, 4.2vw, 3.6rem);
  --t-h3:    clamp(1.35rem, 2.1vw, 1.85rem);
  --t-lede:  clamp(1.05rem, 1.55vw, 1.375rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-mono:  0.6875rem;

  /* Space */
  --gutter:  clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(5rem, 11vw, 10.5rem);
  --rule:    1px;
  --maxw:    1680px;

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:    180ms;
  --d-base:    420ms;
  --d-slow:    900ms;
}

/* --- 2. Reset ----------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* topbar height + breathing room for #anchor jumps */
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--klein);
  outline-offset: 3px;
  border-radius: 1px;
}

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

/* --- 3. Layout primitives ---------------------------------------------- */

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

.plate {
  position: relative;
  padding-block: var(--section);
  border-top: var(--rule) solid var(--hair);
}

.plate--flush { padding-block: 0; }
.plate--head { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
.plate--tight { padding-block: clamp(3rem, 6vw, 6rem); }
.plate--open  { border-top: 0; }

.plate--ink {
  background: var(--ink);
  color: var(--paper);
  --hair: rgba(233, 233, 227, 0.18);
  --hair-soft: rgba(233, 233, 227, 0.09);
  --ink-mute: #9A9BA4;
  --ink-soft: #C9CAD1;
}

.grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2rem, 4vw, 3.5rem);
}

/* A grid item defaults to a min-content minimum, so one long Dutch or Turkish
   word can push its column wider than the track. This holds the line. */
.grid12 > * { min-inline-size: 0; }

/* Exposed grid: faint vertical rules behind content, the drawing left visible */
.ruled::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: var(--gutter);
  max-width: calc(var(--maxw) - var(--gutter) * 2);
  margin-inline: auto;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    var(--hair-soft) 0 1px,
    transparent 1px calc(100% / 6)
  );
  opacity: 0.9;
}

/* --- 4. Type roles ------------------------------------------------------ */

.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}

.mono--mute { color: var(--ink-mute); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-mute);
}

.eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  background: var(--signal);
  flex: none;
}

.display {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  /* hyphens uses the lang attribute, so Dutch and Turkish break at the right
     places. "anywhere" rather than "break-word" because only anywhere also
     lowers the min-content width, which is what stops a long word widening
     its grid column and bursting the layout. */
  hyphens: auto;
  overflow-wrap: anywhere;
}

.display--hero { font-size: var(--t-hero); }
.display--1    { font-size: var(--t-h1); }
.display--2    { font-size: var(--t-h2); }

/* Turkish capitals carry marks above the cap height - the dot on İ, the
   breve on Ğ, the umlauts on Ö and Ü - and Ş/Ç hang a cedilla below it. At
   0.88 those marks collided with the line above ("KAMPANYA" / "İŞİ DEĞİL").
   English and Dutch keep the tight setting; Turkish gets room to breathe. */
:lang(tr) .display { line-height: 1.04; }

.h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 700;
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

.lede {
  font-size: var(--t-lede);
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

.prose p { max-width: 62ch; margin-block-end: 1.1em; color: var(--ink-soft); }
.prose p:last-child { margin-block-end: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.plate--ink .prose strong { color: var(--paper); }

.ink-hi { color: var(--klein); }

/* --- 5. Brand device: four bars, one per service ------------------------ */

.bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  block-size: 1.15em;
  flex: none;
}

.bars i {
  display: block;
  inline-size: 4px;
  background: currentColor;
  transform-origin: bottom;
  animation: barPulse 1900ms var(--ease-io) infinite alternate;
}

.bars i:nth-child(1) { block-size: 45%;  animation-delay: 0ms; }
.bars i:nth-child(2) { block-size: 100%; animation-delay: 180ms; }
.bars i:nth-child(3) { block-size: 62%;  animation-delay: 360ms; }
.bars i:nth-child(4) { block-size: 84%;  animation-delay: 540ms; }

.bars--lg { block-size: 2.5rem; gap: 6px; }
.bars--lg i { inline-size: 10px; }
.bars--accent i:nth-child(2) { background: var(--signal); }

@keyframes barPulse {
  from { transform: scaleY(0.35); }
  to   { transform: scaleY(1); }
}

/* --- 6. Top bar --------------------------------------------------------- */

.skip {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1rem;
  z-index: 200;
  background: var(--klein);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  font-family: var(--f-mono);
  font-size: var(--t-small);
}

.skip:focus { inset-block-start: 1rem; }

.topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-block-end: var(--rule) solid transparent;
  transition: border-color var(--d-base) var(--ease),
              background-color var(--d-base) var(--ease);
}

.topbar.is-stuck {
  border-block-end-color: var(--hair);
  background: color-mix(in srgb, var(--paper) 95%, transparent);
}

.topbar__in {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  block-size: 4.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 118%;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-inline-end: auto;
}

/* The U mark from the logo, beside the live-text wordmark. The full logo
   lockup stacks "DIGITAL MEDIA" underneath in small caps, which drops to about
   six pixels at header height - so the mark is the image, the name stays text. */
.brand__logo { inline-size: 1.75rem; block-size: 1.75rem; flex: none; }
.brand__name b { font-weight: 800; }
.brand__name span { color: var(--ink-mute); font-weight: 500; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); }

.nav__link {
  position: relative;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-block: 0.5rem;
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--d-base) var(--ease);
}

.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--klein); }

/* Language switcher - a first-class control, not a flag dropdown */
.langs {
  display: flex;
  align-items: stretch;
  border: var(--rule) solid var(--hair);
  background: color-mix(in srgb, var(--white) 55%, transparent);
}

/* Links, not buttons: each one goes to this same page in that language. */
.langs__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.7rem;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  min-block-size: 44px;
  min-inline-size: 40px;
  transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}

.langs__btn + .langs__btn { border-inline-start: var(--rule) solid var(--hair); }
.langs__btn:hover, .langs__btn:focus-visible { color: var(--ink); background: var(--paper-deep); }

.langs__btn[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
  cursor: default;
}

.drawer .langs { border-color: rgba(233, 233, 227, 0.3); background: transparent; }
.drawer .langs__btn { color: var(--mist); }
.drawer .langs__btn + .langs__btn { border-inline-start-color: rgba(233, 233, 227, 0.3); }
.drawer .langs__btn:hover { background: rgba(233, 233, 227, 0.12); color: var(--paper); }
.drawer .langs__btn[aria-current="true"] { background: var(--paper); color: var(--ink); }

.burger {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 44px;
  min-inline-size: 44px;
  justify-content: center;
  border: var(--rule) solid var(--hair);
}

.burger__lines { display: grid; gap: 4px; }
.burger__lines span {
  display: block;
  inline-size: 18px;
  block-size: 2px;
  background: currentColor;
  transition: transform var(--d-base) var(--ease), opacity var(--d-fast) var(--ease);
}

.burger[aria-expanded="true"] .burger__lines span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__lines span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 4.5rem 0 0;
  z-index: 80;
  background: var(--ink);
  color: var(--paper);
  padding: var(--gutter);
  display: grid;
  align-content: start;
  gap: 0.25rem;
  transform: translateY(-101%);
  transition: transform var(--d-base) var(--ease);
  overflow-y: auto;
  visibility: hidden;
}

.drawer[data-open="true"] { transform: translateY(0); visibility: visible; }

.drawer__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  border-block-end: var(--rule) solid rgba(233, 233, 227, 0.16);
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 120%;
  font-size: clamp(1.5rem, 7.5vw, 2.75rem);
  text-transform: uppercase;
  line-height: 1;
  overflow-wrap: break-word;
  min-inline-size: 0;
}

.drawer__link span { font: 500 var(--t-mono)/1 var(--f-mono); letter-spacing: 0.16em; color: var(--mist); }
.drawer__foot { margin-block-start: 2rem; display: grid; gap: 1rem; justify-items: start; }

/* --- 7. Buttons --------------------------------------------------------- */

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-block-size: 48px;
  padding: 0.9rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-mono);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
  transition: transform var(--d-fast) var(--ease), color var(--d-base) var(--ease);
}

.btn > * { position: relative; z-index: 1; }

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--klein);
  transform: translateY(101%);
  transition: transform var(--d-base) var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--white); }
.btn:active { transform: translateY(1px); }

.btn--sm {
  min-block-size: 44px;
  padding: 0.6rem 1.05rem;
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
}

.btn--signal { --btn-bg: var(--signal); --btn-fg: var(--ink); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: var(--rule) solid var(--ink);
}
.plate--ink .btn--ghost, .drawer .btn--ghost { --btn-fg: var(--paper); border-color: rgba(233,233,227,0.4); }

.btn__arrow { transition: transform var(--d-base) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text link with rule */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-block: 0.35rem;
  border-block-end: 2px solid var(--hair);
  transition: border-color var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.tlink:hover, .tlink:focus-visible { border-block-end-color: var(--signal); color: var(--klein); }
.plate--ink .tlink:hover, .plate--ink .tlink:focus-visible { color: var(--signal); }

/* --- 8. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 7rem);
  border-top: 0;
}

.hero__grid { align-items: end; row-gap: clamp(2.5rem, 5vw, 4rem); }
.hero__lead { grid-column: 1 / span 7; }
.hero__media { grid-column: 9 / span 4; }
.hero__img { display: block; inline-size: 100%; block-size: auto; }
.hero__board { grid-column: 1 / span 12; }

.hero__title { margin-block: 1.5rem 0; }
.hero__title em { font-style: normal; color: var(--klein); }

.hero__lede { margin-block-start: clamp(1.5rem, 2.5vw, 2rem); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
}

/* Signal board - the signature element.
   Also the drop-in slot for a showreel later (see README). */
.board {
  position: relative;
  border: var(--rule) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  display: grid;
  /* Without an explicit column the aspect-ratio on .board__stage sizes the
     grid column by its max-content width and the panel overflows on mobile. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  overflow: hidden;
}

.board__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-block-end: var(--rule) solid rgba(233, 233, 227, 0.2);
  color: var(--mist);
}

.board__dot { display: inline-flex; align-items: center; gap: 0.45rem; }

.board__dot::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--signal);
  animation: blink 1600ms steps(1, end) infinite;
}

@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }

/* Roughly 5:1 keeps the word filling most of the matrix height at any width -
   a dot-matrix word is always far wider than it is tall. Sized with a height
   clamp rather than aspect-ratio, which would drive the element's width and
   burst the panel on narrow screens. */
.board__stage {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  min-inline-size: 0;
  block-size: clamp(92px, 19vw, 280px);
}
.board__canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

.board__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-block-start: var(--rule) solid rgba(233, 233, 227, 0.2);
  color: var(--mist);
}

.board__foot .bars { color: var(--klein); }

/* Hero chips */
/* Four promises, in numbers - the full-width row under the signal board.
   Four across on desktop, two by two on tablets, one column on phones. The
   hairlines between them are the same rule the rest of the grid uses. */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* No top margin: the hero grid's row gap already spaces it from the board.
     The old tag strip added a margin on top of that and floated off. */
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--rule) solid var(--hair);
}

.kpi {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.75rem) 0;
}
.kpi:first-child { padding-inline-start: 0; }
.kpi + .kpi { border-inline-start: var(--rule) solid var(--hair); }

.kpi__v {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--klein);
}
.kpi__u { color: var(--ink); }
.kpi__d { color: var(--ink-soft); max-inline-size: 30ch; line-height: 1.45; }

@media (max-width: 1080px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
  .kpi:nth-child(n+3) {
    border-block-start: var(--rule) solid var(--hair);
    margin-block-start: clamp(1.25rem, 2.5vw, 2rem);
  }
}

@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi, .kpi + .kpi { border-inline-start: 0; padding-inline: 0; }
  .kpi + .kpi { border-block-start: var(--rule) solid var(--hair); margin-block-start: 1.25rem; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 44px;
  padding: 0.45rem 0.9rem;
  border: var(--rule) solid var(--hair);
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}

.chip:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --- 9. Statement ------------------------------------------------------- */

.statement__body { grid-column: 1 / span 8; }

.statement__text {
  font-family: var(--f-display);
  font-weight: 500;
  font-stretch: 105%;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.statement__body .statement__text { margin-block-start: clamp(1.25rem, 2vw, 1.75rem); }
.statement__text b { font-weight: 800; }
.statement__meta { grid-column: 10 / span 3; align-self: end; display: grid; gap: 0.75rem; }

/* --- 10. Services ------------------------------------------------------- */

.svc { border-block-start: var(--rule) solid var(--hair); }
.svc:last-of-type { border-block-end: var(--rule) solid var(--hair); }

.svc__row {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr) 3rem;
  align-items: start;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.75rem, 3.2vw, 2.75rem);
  inline-size: 100%;
  text-align: start;
  position: relative;
  transition: padding-inline var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.svc__row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--d-base) var(--ease);
  z-index: 0;
}

.svc:hover .svc__row::before,
.svc:focus-within .svc__row::before { transform: scaleY(1); transform-origin: top; }

.svc__row > * { position: relative; z-index: 1; }

.svc:hover .svc__row,
.svc:focus-within .svc__row { color: var(--paper); padding-inline: clamp(0.75rem, 1.5vw, 1.5rem); }

.svc__idx { color: var(--ink-mute); padding-block-start: 0.45rem; }
.svc:hover .svc__idx, .svc:focus-within .svc__idx { color: var(--signal); }

.svc__name { display: grid; gap: 0.5rem; }
.svc__outcome { color: var(--ink-soft); font-size: var(--t-small); transition: color var(--d-base) var(--ease); }
.svc:hover .svc__outcome, .svc:focus-within .svc__outcome { color: var(--mist); }

.svc__desc { color: var(--ink-soft); font-size: 0.9375rem; max-width: 42ch; padding-block-start: 0.25rem; transition: color var(--d-base) var(--ease); }
.svc:hover .svc__desc, .svc:focus-within .svc__desc { color: var(--mist); }

.svc__go {
  justify-self: end;
  align-self: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  border: var(--rule) solid var(--hair);
  border-radius: 50%;
  transition: transform var(--d-base) var(--ease), background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease), color var(--d-base) var(--ease);
}

.svc:hover .svc__go, .svc:focus-within .svc__go {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink);
  transform: rotate(-45deg);
}

/* --- 11. Method (a real sequence, so it gets numbers) ------------------- */

.steps { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

.step {
  padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1rem, 1.8vw, 1.75rem);
  border-inline-start: var(--rule) solid var(--hair);
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.step:last-child { border-inline-end: var(--rule) solid var(--hair); }

.step__n {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 0.8;
  color: var(--klein);
}

.plate--ink .step__n { color: var(--signal); }
.step__t { font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: 1.0625rem; text-transform: uppercase; letter-spacing: -0.005em; }
.step__d { font-size: 0.9375rem; color: var(--ink-soft); }

/* --- 12. Media slots (reserved for photos / animation) ------------------ */

.slot {
  position: relative;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(-45deg, var(--paper-deep) 0 10px, var(--paper) 10px 20px);
  border: var(--rule) dashed var(--mist);
  overflow: hidden;
  /* Prevents CLS: the box is reserved before any asset lands. */
}

.plate--ink .slot {
  background: repeating-linear-gradient(-45deg, #1A1B21 0 10px, #141519 10px 20px);
  border-color: rgba(233, 233, 227, 0.25);
}

.slot__tag {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  text-align: center;
  padding: 1rem;
  color: var(--ink-mute);
  overflow-wrap: anywhere;   /* file paths have no natural break point */
}

.slot__tag b { font-weight: 600; color: var(--ink-soft); letter-spacing: 0.14em; }
.slot > img, .slot > video { inline-size: 100%; block-size: 100%; object-fit: cover; }
.slot--16x9 { aspect-ratio: 16 / 9; }
.slot--4x3  { aspect-ratio: 4 / 3; }
.slot--1x1  { aspect-ratio: 1 / 1; }
.slot--3x4  { aspect-ratio: 3 / 4; }
.slot--9x16 { aspect-ratio: 9 / 16; }
.slot--21x9 { aspect-ratio: 21 / 9; }
.slot--narrow { max-inline-size: 18rem; }

/* --- 13. Work / cases --------------------------------------------------- */

.cases { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }

.case { display: grid; gap: 1rem; }
.case__media { transition: transform var(--d-slow) var(--ease); }
.case:hover .case__media { transform: translateY(-6px); }
.case__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-block-start: var(--rule) solid var(--hair); padding-block-start: 0.75rem; }

/* --- 14. Section headers ------------------------------------------------ */

.shead { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); row-gap: 1.25rem; }
.shead__kicker { grid-column: 1 / span 12; }
.shead__title { grid-column: 1 / span 7; }
.shead__aside { grid-column: 9 / span 4; align-self: end; }

/* --- 15. Facts ---------------------------------------------------------- */

.facts { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.fact { padding: clamp(1.5rem,2.5vw,2.25rem) clamp(1rem,2vw,1.75rem); border-inline-start: var(--rule) solid var(--hair); display: grid; gap: 0.5rem; align-content: start; }
.fact:last-child { border-inline-end: var(--rule) solid var(--hair); }
.fact__v { font-family: var(--f-display); font-weight: 800; font-stretch: 125%; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 0.9; }
.fact__l { color: var(--ink-soft); font-size: 0.9375rem; max-width: 34ch; }

/* --- 16. Accordion ------------------------------------------------------ */

.acc { border-block-start: var(--rule) solid var(--hair); }
.acc:last-of-type { border-block-end: var(--rule) solid var(--hair); }

.acc__btn {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  text-align: start;
  min-block-size: 48px;
  transition: color var(--d-fast) var(--ease);
}

.acc__btn:hover { color: var(--klein); }
.acc__q { font-family: var(--f-display); font-weight: 700; font-stretch: 110%; font-size: clamp(1rem, 1.6vw, 1.25rem); }

.acc__sign { position: relative; inline-size: 16px; block-size: 16px; flex: none; }
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform var(--d-base) var(--ease);
}
.acc__sign::before { inset-block-start: 7px; inset-inline: 0; block-size: 2px; }
.acc__sign::after  { inset-inline-start: 7px; inset-block: 0; inline-size: 2px; }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: scaleY(0); }

.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-base) var(--ease); }
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > div { padding-block-end: 1.75rem; max-width: 66ch; color: var(--ink-soft); }

/* --- 17. Service detail blocks (services page) -------------------------- */

.detail { border-block-start: var(--rule) solid var(--hair); padding-block: var(--section); scroll-margin-block-start: 6rem; position: relative; }
.detail__head { grid-column: 1 / span 5; align-self: start; position: sticky; inset-block-start: 7rem; display: grid; gap: 1.25rem; }
.detail__body { grid-column: 7 / span 6; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

/* Square-cornered like everything else here. The hairline keeps the pale
   branding flatlay from dissolving into the paper behind it. */
/* About header portrait. Stacked below 1080px it is capped, so a tablet does
   not end up with a 900px face above the fold. */
.about__img { display: block; inline-size: 100%; block-size: auto; }
@media (max-width: 1080px) { .about__img { max-inline-size: 28rem; } }

.detail__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  outline: var(--rule) solid var(--hair);
  outline-offset: -1px;
  background: var(--paper-deep);
}

/* A set, not a sequence - so the markers are marks, not numbers. */
.speclist { display: grid; gap: 0; border-block-start: var(--rule) solid var(--hair); }
.speclist li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.75rem;
  padding-block: 0.9rem;
  border-block-end: var(--rule) solid var(--hair);
}
.speclist li::before {
  content: "";
  inline-size: 9px;
  block-size: 9px;
  background: var(--klein);
  margin-block-start: 0.55rem;
}
.plate--ink .speclist li::before { background: var(--signal); }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything that is hidden outright. Nothing here is reachable by keyboard. */
.trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Legal statements: numbered sections, so a clause can be pointed at over
   the phone. The number is decorative - screen readers get the heading. */
.legal { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
.legal__sec { display: grid; gap: 0.85rem; scroll-margin-block-start: 6rem; }
.legal p { margin-block-end: 0; }

.legal__h {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
}

.legal__n { color: var(--ink-mute); font-size: 0.75rem; }

@media (max-width: 34em) {
  .legal__h { grid-template-columns: 1fr; gap: 0.3rem; }
}

.timeline { display: grid; gap: 0.35rem; }

.acc h2, .acc h3 { font: inherit; margin: 0; }

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

/* Anchor index at the top of the services page */
.index { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.index a { border-color: var(--hair); }

/* --- 18. Team ----------------------------------------------------------- */

.people { grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.person { display: grid; gap: 0.9rem; }
.person__meta { display: grid; gap: 0.15rem; border-block-start: var(--rule) solid var(--hair); padding-block-start: 0.7rem; }

/* --- 19. Forms ---------------------------------------------------------- */

.form { display: grid; gap: 1.5rem; }
.form--spaced { margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }
.field { display: grid; gap: 0.5rem; }
.field--set { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.field--set > legend { padding: 0; }
.check { inline-size: 22px; block-size: 22px; flex: none; margin: 0; accent-color: var(--klein); }

.field__label { display: flex; align-items: baseline; gap: 0.5rem; }
.field__req { color: var(--klein); }

.input {
  inline-size: 100%;
  min-block-size: 52px;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: var(--rule) solid var(--hair);
  border-radius: 0;
  font-size: 1rem;
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
  appearance: none;
}

textarea.input { min-block-size: 9rem; resize: vertical; line-height: 1.5; }

/* appearance:none removes the native arrow, so draw one back in. */
select.input {
  padding-inline-end: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23121317' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.input::placeholder { color: var(--ink-mute); opacity: 0.8; }
.input:hover { border-color: var(--ink-mute); }
.input:focus { border-color: var(--klein); box-shadow: inset 0 0 0 1px var(--klein); }
.input[aria-invalid="true"] { border-color: #A81C0B; box-shadow: inset 0 0 0 1px #A81C0B; }

.field__help { font-size: var(--t-small); color: var(--ink-mute); }
.field__error { font-size: var(--t-small); color: #8E1A0C; font-weight: 500; display: none; }
.field__error[data-show="true"] { display: block; }

.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; inline-size: 100%; block-size: 100%; cursor: pointer; }
.choice span {
  display: flex; align-items: center; min-block-size: 44px; padding: 0.6rem 1rem;
  border: var(--rule) solid var(--hair); background: var(--white);
  font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.12em; text-transform: uppercase;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.choice input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.choice input:focus-visible + span { outline: 3px solid var(--klein); outline-offset: 3px; }

.form__note { display: flex; gap: 0.75rem; align-items: start; color: var(--ink-mute); font-size: var(--t-small); max-width: 52ch; }

.formstate { display: none; padding: 1.25rem; border: var(--rule) solid var(--klein); background: color-mix(in srgb, var(--klein) 8%, var(--white)); }
.formstate[data-show="true"] { display: grid; gap: 0.4rem; }
.formstate--bad { border-color: #A81C0B; background: color-mix(in srgb, #A81C0B 8%, var(--white)); }
.formstate--note { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, var(--white)); }

.btn[data-busy="true"] { pointer-events: none; opacity: 0.65; }

/* --- 20. Contact rail --------------------------------------------------- */

.rail { display: grid; gap: 0; border-block-start: var(--rule) solid var(--hair); }
.rail__row { display: grid; grid-template-columns: minmax(0, 8rem) 1fr; gap: 1rem; padding-block: 1.1rem; border-block-end: var(--rule) solid var(--hair); align-items: baseline; }
.rail--wide .rail__row { grid-template-columns: minmax(0, 18rem) 1fr; gap: clamp(1rem, 3vw, 3rem); padding-block: 1.35rem; }
.rail__v { font-family: var(--f-display); font-weight: 600; font-stretch: 108%; font-size: 1.0625rem; }
.rail__v a { transition: color var(--d-fast) var(--ease); }
.rail__v a:hover { color: var(--klein); }

/* --- 21. CTA ------------------------------------------------------------ */

.cta__grid { align-items: center; }
.cta__text { grid-column: 1 / span 7; }
.cta__side { grid-column: 9 / span 4; display: grid; gap: 1rem; justify-items: start; }

/* --- 22. Footer --------------------------------------------------------- */

.foot { border-block-start: var(--rule) solid var(--hair); padding-block: clamp(3rem, 5vw, 4.5rem) 1.5rem; }
.foot__top { grid-column: 1 / span 4; display: grid; gap: 1rem; align-content: start; }
.foot__col { grid-column: span 2; display: grid; gap: 0.15rem; align-content: start; justify-items: start; }
.foot__col h2 { margin-block-end: 0.5rem; }
/* Padding keeps every footer link comfortably over the 24px target minimum. */
.foot__link { font-size: 0.9375rem; color: var(--ink-soft); padding-block: 0.3rem; transition: color var(--d-fast) var(--ease); }
.foot__link:hover { color: var(--klein); }
.foot__bar { grid-column: 1 / span 12; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; border-block-start: var(--rule) solid var(--hair); padding-block-start: 1.25rem; margin-block-start: clamp(2rem, 4vw, 3rem); }

/* --- 23. Scroll reveal -------------------------------------------------- */

/* Only hide what JavaScript is actually there to reveal. The .js class is set
   by one line in the <head> before first paint; without it - script blocked,
   failed, or still arriving on a slow connection - everything simply shows.
   Hiding unconditionally meant a single JS failure blanked most of a page. */
.js [data-rise] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
  transition-delay: var(--rise-delay, 0ms);
}

.js [data-rise].is-in { opacity: 1; transform: none; }

/* --- 24. Utility -------------------------------------------------------- */

.vh {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.stack-sm { display: grid; gap: 0.75rem; }
.stack-md { display: grid; gap: 1.5rem; }
.stack-lg { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.col-full { grid-column: 1 / span 12; }
.col-half { grid-column: span 6; }
.col-7 { grid-column: 1 / span 7; }
.col-5r { grid-column: 8 / span 5; }

/* --- 25. Responsive ----------------------------------------------------- */

@media (max-width: 1080px) {
  .hero__lead  { grid-column: 1 / span 12; }
  .hero__media { grid-column: 1 / span 12; max-inline-size: 26rem; }
  .shead__title, .shead__aside { grid-column: 1 / span 12; }
  .statement__body, .statement__meta { grid-column: 1 / span 12; }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail__head { grid-column: 1 / span 12; position: static; }
  .detail__body { grid-column: 1 / span 12; }
  .cta__text, .cta__side { grid-column: 1 / span 12; }
  .foot__top { grid-column: 1 / span 12; }
  .foot__col { grid-column: span 4; }
  .col-7, .col-5r, .col-half { grid-column: 1 / span 12; }
}

@media (max-width: 860px) {
  .nav, .langs--desk { display: none; }
  .burger { display: inline-flex; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2n) { border-inline-end: var(--rule) solid var(--hair); }
  .step:nth-child(-n+2) { border-block-end: var(--rule) solid var(--hair); }
  .steps--3 { grid-template-columns: 1fr; }
  .steps--3 .step { border-inline: var(--rule) solid var(--hair); border-block-end: var(--rule) solid var(--hair); }
  .facts { grid-template-columns: 1fr; }
  .fact { border-inline: var(--rule) solid var(--hair); }
  .fact + .fact { border-block-start: 0; }
  .svc__row { grid-template-columns: 3.5rem 1fr; row-gap: 0.75rem; }
  .svc__desc { grid-column: 2; }
  .svc__go { display: none; }
  .ruled::before { display: none; }
}

@media (max-width: 620px) {
  .cases, .people { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step { border-inline: var(--rule) solid var(--hair); border-block-end: var(--rule) solid var(--hair); }
  .brand { font-size: 0.8rem; gap: 0.55rem; }
  .brand__name { white-space: nowrap; }
  .foot__col { grid-column: span 6; }
  .rail__row { grid-template-columns: 1fr; gap: 0.25rem; }
  .rail--wide .rail__row { grid-template-columns: 1fr; gap: 0.35rem; }
  .board__bar, .board__foot { flex-wrap: wrap; }
}

/* --- 26. Motion & print ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  [data-rise] { opacity: 1; transform: none; }
  .bars i { transform: none; }
}

@media print {
  .topbar, .drawer, .board, .slot, .btn { display: none; }
  /* Paper has no scroll position - reveal everything, or the unscrolled
     half of the terms prints as white space */
  [data-rise] { opacity: 1 !important; transform: none !important; }
  body { background: #fff; color: #000; }
  .plate { padding-block: 1.5rem; }
}