/* ==========================================================================
   NAOU — Creative Agency
   Brand: Orange 021 C #FF6700 · 2736 C #071DD1 · Black C #221F1F · Syne
   ========================================================================== */

/* -------------------------------------------------- fonts
   Served from this site, not from Google. Loading them from Google's
   servers handed every visitor's IP address to a US company before any
   consent, which a German court ruled in 2022 to breach the GDPR; it also
   cost a connection to two more hosts before the first word was drawn.
   Latin, Latin Extended and Greek only: the browser fetches a file only
   when the page uses a character in its unicode-range, so a Greek page
   pulls the Greek and Latin files and never the others. Both families are
   under the SIL Open Font License. */
/* Manrope, greek */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Manrope, latin-ext */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Manrope, latin */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Syne, greek */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/syne-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* Syne, latin-ext */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/syne-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Syne, latin */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/syne-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------- tokens */
/* Colour tokens are theme-aware: :root holds light mode, and the
   [data-theme="dark"] block below overrides the same names. Anything that
   should flip must use a token — never a literal colour. */
:root {
  color-scheme: light;

  --orange: #ff6700;
  --orange-deep: #e25a00;
  --on-orange: #1c1818;
  --orange-text: #ff6700; /* the brand orange, in text too (the user's call, 2026-11-03) */

  /* --blue flips for legibility; --blue-brand is the fixed brand ink used
     for solid fills that always carry white text */
  --blue: #081dd1;
  --blue-brand: #081dd1;
  --blue-deep: #050f8f;

  --ink: #221f1f; /* body text */
  --ink-soft: #4a4646;
  --ink-mute: #635e5e;
  --ink-bg: #221f1f; /* dark bands: hero, page hero, footer, .bg-ink */

  --paper: #ffffff; /* page background */
  --paper-2: #f7f6fb; /* alternating section background */
  --lav: #eeebfb; /* icon wells, soft highlights */
  --surface: #ffffff; /* cards, panels, inputs */

  --line: rgba(34, 31, 31, 0.12);
  --line-soft: rgba(34, 31, 31, 0.07);
  --tint: rgba(34, 31, 31, 0.04); /* subtle hover wash */
  --tint-strong: rgba(34, 31, 31, 0.07);
  --shadow: rgba(34, 31, 31, 0.16);

  --hdr-bg: rgba(255, 255, 255, 0.92);
  --hdr-bg-solid: rgba(255, 255, 255, 0.97);

  /* "Bands" are the hero, page hero, footer and .bg-ink sections. The two
     themes re-point these: light makes them light, dark makes them dark.
     The values here only show when no theme is set at all, which means
     JavaScript is off: dark bands then keep the white header logo legible,
     because the script that swaps it for the dark one never ran.
     Descendants keep using --on-dark* names, which the band block below
     re-points at these values. */
  --band-bg: #221f1f;
  --band-fg: #ffffff;
  --band-fg-mute: rgba(255, 255, 255, 0.62);
  --band-line: rgba(255, 255, 255, 0.16);
  --band-orange: var(--orange);
  --ok: #3ddc84;

  /* constants for permanently dark surfaces */
  --on-dark: #ffffff;
  --on-dark-mute: rgba(255, 255, 255, 0.62);
  --line-dark: rgba(255, 255, 255, 0.16);

  --shell: 1630px;
  --gut: clamp(20px, 4vw, 56px);

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t: 0.5s var(--ease);

  --nav-h: 92px;
}

/* -------------------------------------------------- full light theme
   Page colours stay as :root; only the bands lighten. */
[data-theme="light"] {
  --band-bg: #edeaf4;
  --band-fg: #221f1f;
  --band-fg-mute: #565151;
  --band-line: rgba(34, 31, 31, 0.14);
  --band-orange: #ff6700;
  --ok: #0f7a3d;
}

/* -------------------------------------------------- dark theme
   Same token names, inverted values. The permanently dark bands go *deeper*
   than the page background so they still read as distinct bands. --blue
   stays the brand #081dd1 here too: it used to lighten to #9aa5ff, which
   read as another colour when the theme changed. */
[data-theme="dark"] {
  color-scheme: dark;

  --orange-text: #ff6700;

  --band-bg: #0a0909;
  --band-fg: #f4f1f1;
  --band-fg-mute: rgba(255, 255, 255, 0.62);
  --band-line: rgba(255, 255, 255, 0.16);
  --band-orange: var(--orange);
  --ok: #3ddc84;

  --blue: #081dd1; /* the brand blue in both themes (the user's call, 2026-11-03) */

  --ink: #f4f1f1;
  --ink-soft: #cbc6c6;
  --ink-mute: #9d9696;
  --ink-bg: #0a0909;

  --paper: #121011;
  --paper-2: #191617;
  --lav: #241f21;
  --surface: #1c191a;

  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --tint: rgba(255, 255, 255, 0.05);
  --tint-strong: rgba(255, 255, 255, 0.09);
  --shadow: rgba(0, 0, 0, 0.55);

  --hdr-bg: rgba(18, 16, 17, 0.9);
  --hdr-bg-solid: rgba(18, 16, 17, 0.97);
}

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

* {
  margin: 0;
}

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

body {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

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

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

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

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

/* -------------------------------------------------- layout */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.shell-tight {
  max-width: 1180px;
}

.section {
  padding-block: clamp(72px, 9vw, 150px);
}

.section-sm {
  padding-block: clamp(52px, 6vw, 96px);
}

.bg-paper-2 {
  background: var(--paper-2);
}
.bg-lav {
  background: var(--lav);
}
/* One block drives every band. Re-pointing --on-dark* here means all the
   existing descendant rules keep working in all three themes. */
.bg-ink,
.hero,
.phero,
.ftr {
  background-color: var(--band-bg);
  color: var(--band-fg);
  --on-dark: var(--band-fg);
  --on-dark-mute: var(--band-fg-mute);
  --line-dark: var(--band-line);
  --orange-text: var(--band-orange);
}

/* The header (over the hero) and image placeholders are dark backdrops that
   are not bands, so they take the full-strength orange directly. Bands get
   theirs from --band-orange above. */
.hdr,
.ph {
  --orange-text: var(--orange);
}

/* ...except the header once it turns opaque in light mode */
.hdr.is-stuck,
.hdr--light {
  --orange-text: #ff6700;
}

[data-theme="dark"] .hdr.is-stuck,
[data-theme="dark"] .hdr--light {
  --orange-text: var(--orange);
}

/* -------------------------------------------------- typography
   Syne is the display face and stays on headings only; body copy is Manrope,
   which is far easier to read in long Greek paragraphs. Heading weights are
   deliberately 700 rather than 800 so weight signals hierarchy instead of
   being applied everywhere. */
h1,
h2,
h3,
h4,
.d1,
.d2,
.h2,
.h3,
.h4,
.faq summary {
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.d1 {
  font-size: clamp(3.1rem, 10.5vw, 11rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.86;
  text-transform: uppercase;
}

.d2 {
  font-size: clamp(2.4rem, 6.4vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.94;
}

.h2 {
  font-size: clamp(1.95rem, 4vw, 3.6rem);
}

.h3 {
  font-size: clamp(1.3rem, 2.1vw, 1.95rem);
  letter-spacing: -0.025em;
  /* Greek compounds are long; never let one spill its card */
  overflow-wrap: break-word;
}

/* break-word only stops the spill: in a four-up row at 1440px the 30px
   title left 236px for "Επαγγελματικής" (275px) and "Αναλαμβάνουμε"
   (274px), which then broke in the middle. Capping the size by the card's
   own width keeps every word whole; a roomy card keeps the full size.
   "Επαγγελματικής" is 9.1 times its font size wide, the longest word in any
   card title, so it fits up to 11cqi; 10.4 leaves a little air. */
.card {
  container-type: inline-size;
}

.card .h3 {
  font-size: min(clamp(1.3rem, 2.1vw, 1.95rem), 10.4cqi);
}

.h4 {
  font-size: clamp(1.08rem, 1.4vw, 1.3rem);
  letter-spacing: -0.02em;
}

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.28rem);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 62ch;
}

.bg-ink .lead,
.bg-ink .muted,
.hero .lead,
.hero .muted,
.phero .lead,
.phero .muted,
.ftr .lead,
.ftr .muted {
  color: var(--on-dark-mute);
}

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

.o {
  color: var(--orange-text);
}
.b {
  color: var(--blue);
}

.italic-em {
  font-style: italic;
  font-weight: 700;
}

/* eyebrow: [003] LABEL ——— */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.eyebrow .num {
  color: var(--orange-text);
  font-variant-numeric: tabular-nums;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex: none;
}

.eyebrow .rule {
  height: 1px;
  background: var(--line);
  flex: 1 1 auto;
  min-width: 28px;
}

.bg-ink .eyebrow,
.hero .eyebrow,
.phero .eyebrow,
.ftr .eyebrow {
  color: var(--on-dark-mute);
}
.bg-ink .eyebrow .rule,
.hero .eyebrow .rule,
.phero .eyebrow .rule,
.ftr .eyebrow .rule {
  background: var(--line-dark);
}

/* section header block */
.sec-head {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  margin-bottom: clamp(38px, 5vw, 68px);
}

.sec-head--split {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .sec-head--split {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: end;
    gap: clamp(28px, 4vw, 64px);
  }
}

/* underlined centred heading, as on the old site */
.rule-title {
  text-align: center;
  margin-bottom: clamp(34px, 4.5vw, 60px);
}

.rule-title h2 {
  display: inline-block;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--blue);
}

/* -------------------------------------------------- buttons */
.btn {
  --bg: var(--orange);
  --fg: var(--on-orange);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink-bg);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}

.btn:hover {
  --fg: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px var(--shadow);
}

.btn:hover::before {
  transform: translateY(0);
}

.btn svg {
  width: 15px;
  height: 15px;
  transition: transform 0.4s var(--ease);
}

.btn:hover svg {
  transform: translateX(4px);
}

.btn--blue {
  --bg: var(--blue-brand);
}

.btn--ink {
  --bg: var(--ink-bg);
}

.btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  border: 1.5px solid var(--line);
}

.btn--ghost:hover {
  --fg: #fff;
}

.bg-ink .btn--ghost,
.hero .btn--ghost,
.phero .btn--ghost,
.ftr .btn--ghost {
  --fg: var(--band-fg);
  border-color: var(--line-dark);
}

.bg-ink .btn--ghost::before,
.hero .btn--ghost::before,
.phero .btn--ghost::before,
.ftr .btn--ghost::before {
  background: var(--orange);
}

/* text link with animated underline */
.ulink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.45s var(--ease), color 0.3s var(--ease);
}

.ulink:hover {
  color: var(--orange-text);
  background-size: 100% 2px;
}

.ulink svg {
  width: 13px;
  height: 13px;
  transition: transform 0.4s var(--ease);
}

.ulink:hover svg {
  transform: translateX(4px);
}

/* -------------------------------------------------- header */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease),
    height 0.4s var(--ease);
}

/* 1fr / auto / 1fr keeps the dock optically centred regardless of the
   logo and language-switch widths */
.hdr__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.hdr__right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

.hdr__logo img {
  height: clamp(22px, 2.4vw, 30px);
  width: auto;
  transition: opacity 0.3s var(--ease);
}

/* two logo files swap on scroll / theme */
.hdr__logo .on-dark {
  display: block;
}
.hdr__logo .on-light {
  display: none;
}

/* In dark mode the header sits on a dark surface even when stuck, so the
   white logo must stay — this overrides the light-mode swap further down. */
[data-theme="dark"] .hdr.is-stuck .hdr__logo .on-dark,
[data-theme="dark"] .hdr--light .hdr__logo .on-dark {
  display: block;
}

[data-theme="dark"] .hdr.is-stuck .hdr__logo .on-light,
[data-theme="dark"] .hdr--light .hdr__logo .on-light {
  display: none;
}

/* -------------------------------------------------- theme toggle */
.theme {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  color: var(--on-dark);
  flex: none;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
    color 0.3s var(--ease), transform 0.4s var(--ease);
}

.hdr.is-stuck .theme,
.hdr--light .theme {
  border-color: var(--line);
  color: var(--ink);
}

.theme:hover {
  background: var(--orange);
  border-color: var(--orange-text);
  color: var(--on-orange);
  transform: rotate(-18deg);
}

.theme svg {
  width: 17px;
  height: 17px;
}

/* the icon shows the mode you are currently in */
.theme svg {
  display: none;
}

[data-theme="light"] .theme .i-sun,
[data-theme="dark"] .theme .i-moon {
  display: block;
}

.hdr.is-stuck {
  background: var(--hdr-bg);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
  height: 74px;
}

.hdr.is-stuck .hdr__logo .on-dark {
  display: none;
}
.hdr.is-stuck .hdr__logo .on-light {
  display: block;
}

/* light-header pages (interior pages with pale hero) */
.hdr--light .hdr__logo .on-dark {
  display: none;
}
.hdr--light .hdr__logo .on-light {
  display: block;
}

/* -------------------------------------------------- icon dock
   Desktop: a floating glass dock centred in the header.
   Mobile:  the same dock docks to the bottom of the screen, where thumbs are. */
.dock {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-dark);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

.hdr.is-stuck .dock,
.hdr--light .dock {
  background: var(--tint);
  border-color: var(--line);
}

.dock__item {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-dark-mute);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    transform 0.35s var(--ease);
}

.hdr.is-stuck .dock__item,
.hdr--light .dock__item {
  color: var(--ink-mute);
}

.dock__item svg {
  width: 17px;
  height: 17px;
}

.dock__item:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-dark);
  transform: translateY(-3px) scale(1.04);
}

.hdr.is-stuck .dock__item:hover,
.hdr--light .dock__item:hover {
  background: var(--tint-strong);
  color: var(--ink);
}

.dock__item[aria-current="page"],
.hdr.is-stuck .dock__item[aria-current="page"],
.hdr--light .dock__item[aria-current="page"] {
  background: var(--orange);
  color: var(--on-orange);
}

/* solutions fly-out */
.dock__has {
  position: relative;
}

.dock__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  min-width: 250px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px var(--shadow);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
    visibility 0.3s;
}

.dock__has:hover .dock__panel,
.dock__has:focus-within .dock__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dock__panel a {
  display: block;
  color: var(--ink);
  padding: 11px 14px;
  border-radius: var(--r-sm);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.dock__panel a:hover {
  background: var(--lav);
  color: var(--blue);
}

/* --- mobile: dock to the bottom of the viewport --- */
@media (max-width: 860px) {
  /* The dock is fixed to the viewport, but a backdrop-filter on an ancestor
     makes that ancestor the containing block — which pinned the dock inside
     the header the moment it went sticky. The header uses a solid background
     on mobile instead; the dock keeps its own glass effect. */
  .hdr.is-stuck {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--hdr-bg-solid);
  }

  .dock {
    position: fixed;
    z-index: 95;
    left: 50%;
    translate: -50% 0;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: min(440px, calc(100% - 28px));
    /* grid, not flex: guarantees five equal tiles regardless of label length.
       It said four after Contact joined the menu, which sent Contact alone
       onto a second row on every page. */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: rgba(34, 31, 31, 0.86);
    border-color: var(--line-dark);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
  }

  .hdr.is-stuck .dock,
  .hdr--light .dock {
    background: rgba(34, 31, 31, 0.9);
    border-color: var(--line-dark);
  }

  /* With the dock fixed to the bottom, the header grid holds two items and
     the theme/language block fell into the middle "auto" column. The logo's
     1fr column then shrank to what was left (71px of its 104px at 390px)
     and, its height being fixed, the logo was squeezed sideways. Two
     columns: the logo at its own width, the controls take the rest. */
  .hdr__in {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }

  /* the Solutions tile is wrapped, so the wrapper fills its grid cell */
  .dock__has {
    display: flex;
  }

  .dock__has .dock__item {
    width: 100%;
  }

  .dock__item,
  .hdr.is-stuck .dock__item,
  .hdr--light .dock__item {
    padding: 9px 1px;
    /* The longest label, "ΕΠΙΚΟΙΝΩΝΙΑ", is 6.6 times its font size wide.
       A fifth of the dock holds it at full size down to about 360px; on a
       narrower phone the size follows the tile (15cqi) instead of spilling
       over its neighbour. */
    container-type: inline-size;
    font-size: clamp(0.54rem, 2.15vw, 0.6rem);
    letter-spacing: 0.02em;
    min-width: 0;
    color: var(--on-dark-mute);
  }

  /* on the label, not the tile: cqi measures an ancestor, never the
     element itself */
  .dock__item span {
    max-width: 100%;
    font-size: min(1em, 15cqi);
  }

  .dock__item:hover {
    transform: none;
  }

  /* the fly-out would sit off-screen; the Solutions hub page covers it */
  .dock__panel {
    display: none;
  }

  /* Keep the footer clear of the floating dock.

     With five tiles in five columns the dock is one row again: measured
     from 320px to 860px its top sits at most 87px above the bottom edge.
     112px leaves the last footer line readable above it.

     The room belongs to the footer, not to the body. Reserved on the body
     it showed the page colour under the footer: a white strip below a dark
     footer in the default theme. Inside the footer it carries the footer's
     own colour down to the last pixel. */
  .ftr {
    padding-bottom: 112px;
  }

  /* --- tap targets: 21–29px is too small for a thumb --- */
  .ftr a {
    display: inline-block;
    padding-block: 10px;
  }

  .ftr li + li {
    margin-top: 2px;
  }

  .hdr__logo {
    display: inline-block;
    padding-block: 10px;
  }

  .crumbs a,
  .ulink {
    padding-block: 8px;
  }
}

/* language switch */
.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
}

.hdr.is-stuck .lang,
.hdr--light .lang {
  border-color: var(--line);
}

/* Each language is its own URL, so the inactive side is a real link and
   the active side is a <span>. Both are styled as the pill they always
   looked like; `button` stays in the selector for the _src templates,
   which still carry the old markup. */
.lang button,
.lang a,
.lang__current {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--on-dark-mute);
  text-decoration: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.hdr.is-stuck .lang button,
.hdr.is-stuck .lang a,
.hdr.is-stuck .lang__current,
.hdr--light .lang button,
.hdr--light .lang a,
.hdr--light .lang__current {
  color: var(--ink-mute);
}

.lang a:hover,
.lang a:focus-visible {
  color: var(--orange);
}

.lang button[aria-pressed="true"],
.lang__current,
.hdr.is-stuck .lang button[aria-pressed="true"],
.hdr.is-stuck .lang__current,
.hdr--light .lang button[aria-pressed="true"],
.hdr--light .lang__current {
  background: var(--orange);
  color: var(--on-orange);
}

/* -------------------------------------------------- hero (home) */
.hero {
  position: relative;
}

/* The extra height is the scroll distance the wheel spins through.
   .hero__pin sticks for that whole stretch. */
@media (min-width: 992px) {
  .hero {
    height: calc(100vh + var(--wheel-scroll, 2000px));
  }
}

.hero__pin {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--nav-h) + clamp(24px, 3.4vw, 46px));
  padding-bottom: clamp(30px, 4vw, 56px);
  overflow: hidden;
}

@media (min-width: 992px) {
  .hero__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    padding-bottom: 0;
  }

  /* centre the copy in the space above the wheel's arc */
  .hero__pin > .shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* derived from the wheel geometry, so the copy can never sit on the arc */
    padding-bottom: var(--arc-clear);
  }

  .hero__body {
    padding-block: clamp(18px, 2.6vh, 40px);
  }
}

/* soft brand glow */
.hero__pin::before,
.hero__pin::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.hero__pin::before {
  width: 46vw;
  height: 46vw;
  left: -12vw;
  top: -10vw;
  background: radial-gradient(circle, rgba(255, 103, 0, 0.55), transparent 70%);
}

.hero__pin::after {
  width: 44vw;
  height: 44vw;
  right: -12vw;
  bottom: -6vw;
  background: radial-gradient(circle, rgba(7, 29, 209, 0.6), transparent 70%);
}

.hero__pin > .shell {
  position: relative;
  z-index: 2;
}

/* editorial index: facts rail + headline, services indexed underneath */
.hero__idx {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 3vw, 48px);
  padding-block: clamp(20px, 3vh, 44px);
}

@media (min-width: 940px) {
  .hero__idx {
    grid-template-columns: 210px 1fr;
    align-items: start;
  }
}

.hero__rail {
  display: grid;
  gap: 16px;
  align-content: start;
}

/* on narrow screens the rail reads as a single line of facts */
@media (max-width: 939px) {
  .hero__rail {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hero__rail::-webkit-scrollbar {
    display: none;
  }
}

.hero__rail > div {
  display: grid;
  gap: 4px;
}

.hero__rail span {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

/* "Available for work" is a value, like "Patras, GR" beside it. The label
   rule above also matched the <span> inside it and drew it small, grey and
   wide-spaced, so the second column read as two labels and no value. The
   green now lives in the dot alone; the words match the other value. */
.hero__rail .avail span {
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--on-dark);
}

.hero__rail .avail {
  align-items: center;
}

.hero__rail .avail i {
  margin-top: 0;
}

/* Phones get the facts as one line: "Πάτρα, Ελλάδα  ● Διαθέσιμοι για έργα".
   The two small labels above them cost a second row and told the reader
   nothing the values do not already say; they stay in the page, hidden,
   for screen readers. The line wraps rather than scrolls: on the narrowest
   phones the two values do not fit side by side, and both stay whole. */
@media (max-width: 700px) {
  /* the pulse ring spreads to twice the dot and reads as a smudge beside
     small type; a still dot says the same thing */
  .hero__rail .avail i {
    animation: none;
  }

  .hero__rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 18px;
    row-gap: 6px;
    overflow: visible;
  }

  .hero__rail > div {
    display: block;
  }

  .hero__rail > div > span:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

.hero__rail b {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.35;
  text-transform: uppercase;
  /* must wrap inside the rail — nowrap let the status run into the headline */
  overflow-wrap: break-word;
}

.avail {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ok);
}

.avail i {
  margin-top: 0.42em; /* aligns the dot with the first line of text */
}

.avail i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7);
  animation: ping 2.2s infinite;
}

@keyframes ping {
  70% {
    box-shadow: 0 0 0 7px rgba(61, 220, 132, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(61, 220, 132, 0);
  }
}

/* --------------------------------------------------------------------------
   Syne figures
   Syne draws its digits at x-height: a cap "H" rises 65 units where "0" rises
   only 51, so numbers sit visibly low next to letters in a heading. The font
   ships no lining-figure feature, so the fix is to scale the digits by
   65/51 = 1.27. They already share the baseline, so raising the top aligns
   them. Apply .fig to any run of digits inside a Syne heading.
   -------------------------------------------------------------------------- */
.fig,
.n360,
.stat__n,
.step__n {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
}

/* 0.878em = Syne cap-height ratio (0.65) / Manrope digit ratio (0.74), so a
   numeral's top lands on the cap line of the Syne letters beside it. */
.fig,
.n360 {
  font-size: 0.878em;
  letter-spacing: -0.02em;
}

/* 360° — the degree mark set as a raised orange glyph */
.n360 {
  position: relative;
  white-space: nowrap;
}

.deg {
  font-size: 0.42em;
  font-weight: 700;
  color: var(--orange-text);
  vertical-align: super;
  line-height: 0;
  margin-left: 0.04em;
}

.hero__claim h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.22em;
  font-size: clamp(2.1rem, 5.1vw, 5.3rem);
  font-weight: 700;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

/* Syne is a wide display face, so the Greek headline needs ~15% off to hold
   the same single line as the English. Without it the heading gains a line
   and the whole hero reflows on every language switch. */
html[lang="el"] .hero__claim h1 {
  font-size: clamp(1.85rem, 4.5vw, 4.7rem);
}

/* services index row */
.hero__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(10px, 1.6vw, 26px);
  padding-top: clamp(14px, 2vh, 26px);
}

.hero__cols a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 16px 2px;
  border-top: 1px solid var(--line-dark);
  transition: color 0.35s var(--ease), border-color 0.35s var(--ease),
    padding-left 0.35s var(--ease);
}

.hero__cols a:hover {
  color: var(--orange-text);
  border-color: var(--orange-text);
  padding-left: 10px;
}

.hero__cols i {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--orange-text);
}

.hero__cols h2 {
  font-size: clamp(0.95rem, 1.25vw, 1.12rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero__cols svg {
  width: 15px;
  height: 15px;
  opacity: 0;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.hero__cols a:hover svg {
  opacity: 1;
  transform: translateX(4px);
}

.hero__claim p {
  margin-top: clamp(16px, 2vw, 26px);
  max-width: 54ch;
  color: var(--on-dark-mute);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(22px, 2.6vw, 34px);
}

/* the brand glows are tuned for a dark hero; ease them off on a light one */
[data-theme="light"] .hero__pin::before,
[data-theme="light"] .hero__pin::after {
  opacity: 0.3;
}

/* -------------------------------------------------- hero image wheel
   Tiles sit on a circle of --wheel-r; the circle's centre is pushed below
   the fold so only its top arc reads across the bottom of the hero.
   JS writes the per-item transform and spins the container on scroll. */
/* Geometry is expressed relative to the viewport so the arc keeps the same
   visual relationship to the copy at any browser zoom. Previously the radius
   and tile size were fixed pixels while everything around them scaled in vh
   units, so zooming pushed the arc up into the buttons.
   --wheel-apex is the gap between the top of the arc and the bottom of the
   hero; JS derives the radius from it, and --arc-clear reserves exactly that
   much room under the copy.
   On the video hero naou.js (initHeroFit) sets both from the film's frame,
   so they hold their place at any zoom; these are the fallback. */
.hero {
  --wheel-apex: 150px;
  --wheel-size: clamp(96px, 21vh, 226px);
  --arc-clear: calc(var(--wheel-apex) + var(--wheel-size) / 2 + 30px);
}

.hero__wheel {
  position: absolute;
  /* pushes the circle's centre further below the fold, so only a shallow
     arc of tiles reads along the bottom instead of crowding the copy */
  bottom: -112%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

@media (max-width: 991px) {
  .hero__wheel {
    display: none;
  }
}

.hero__wheel-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--wheel-size);
  height: var(--wheel-size);
  margin-left: calc(var(--wheel-size) / -2);
  margin-top: calc(var(--wheel-size) / -2);
}

.hero__wheel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px var(--line-dark);
}

/* -------------------------------------------------- marquee / ticker */
.ticker {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}

.ticker__track {
  display: flex;
  gap: clamp(14px, 1.6vw, 26px);
  width: max-content;
  animation: slide 46s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker--rev .ticker__track {
  animation-direction: reverse;
}

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

.ticker__item {
  width: clamp(180px, 19vw, 290px);
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  flex: none;
  /* keeps dark tiles readable against the dark hero */
  box-shadow: inset 0 0 0 1px var(--line-dark);
  transition: transform 0.5s var(--ease);
}

.ticker__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ticker__item:hover {
  transform: scale(1.04);
}

/* word marquee (big scrolling text band) */
.wordmarq {
  padding-block: clamp(26px, 3vw, 46px);
  border-block: 1px solid var(--line);
  overflow: hidden;
}

.bg-ink .wordmarq {
  border-color: var(--line-dark);
}

.wordmarq__track {
  display: flex;
  align-items: center;
  gap: 30px;
  width: max-content;
  animation: slide 34s linear infinite;
}

.wordmarq span {
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.8rem, 4.4vw, 4.1rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmarq .hollow {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}

.bg-ink .wordmarq .hollow {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.5);
}

.wordmarq img {
  width: clamp(28px, 3vw, 46px);
  flex: none;
}

/* -------------------------------------------------- cards */
.grid {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 236px), 1fr));
}

/* Four cards carrying a full paragraph each. auto-fit would hold four columns
   down to ~1150px, where they turn into 250px-wide, 700px-tall slivers, and it
   produces an orphaned 3+1 row in between. Explicit steps go 1 -> 2 -> 4 and
   never leave a single card stranded on its own row. */
.grid-4--prose {
  grid-template-columns: 1fr;
}

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

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

.card {
  position: relative;
  padding: clamp(24px, 2.6vw, 38px);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
    border-color 0.5s var(--ease);
}

.card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}

.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 54px var(--shadow);
  border-color: transparent;
}

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

.card__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--lav);
  color: var(--blue);
  margin-bottom: 20px;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
    transform 0.45s var(--ease);
}

.card:hover .card__icon {
  background: var(--orange);
  color: #fff;
  transform: rotate(-8deg) scale(1.06);
}

.card__icon svg {
  width: 23px;
  height: 23px;
}

/* card and work-grid titles are h2 on pages where they are the
   top-level sections, and h3 where a real h2 introduces them */
.card h2,
.card h3 {
  margin-bottom: 10px;
}

.card p {
  color: var(--ink-soft);
  font-size: 0.97rem;
}

.card .ulink {
  margin-top: 18px;
}

/* numbered card variant */
.card--num .card__num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--orange-text);
  margin-bottom: 14px;
  display: block;
}

/* offset "better …" cards (home) */
.stagger {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  align-items: start;
}

@media (min-width: 1000px) {
  .stagger > :nth-child(2) {
    margin-top: clamp(40px, 5vw, 88px);
  }
}

/* -------------------------------------------------- media / placeholders */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 150px;
  background: linear-gradient(135deg, var(--ink-bg) 0%, #3a3535 100%);
  color: #fff;
  overflow: hidden;
  text-align: center;
  padding: 24px;
}

.ph--orange {
  background: linear-gradient(135deg, var(--orange) 0%, #ff9147 100%);
  color: var(--on-orange);
}

.ph--blue {
  background: linear-gradient(135deg, var(--blue-brand) 0%, #4a5bee 100%);
}

.ph--lav {
  background: linear-gradient(135deg, #eeebfb 0%, #dcd6f7 100%);
  color: #221f1f;
}

/* the arch mark, ghosted into the placeholder */
.ph::before {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -22%;
  width: 62%;
  aspect-ratio: 1;
  background: currentColor;
  opacity: 0.13;
  -webkit-mask: url("../imgs/logo/mark-white.webp") no-repeat center / contain;
  mask: url("../imgs/logo/mark-white.webp") no-repeat center / contain;
}

.ph__label {
  position: relative;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.95;
}

.ph__note {
  position: relative;
  margin-top: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* -------------------------------------------------- work / case grid */
.work {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}

.work__item {
  position: relative;
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  isolation: isolate;
}

.work__item .ph,
.work__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

.work__item:hover .ph,
.work__item:hover img {
  transform: scale(1.05);
}

.work__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(34, 31, 31, 0.86) 0%,
    rgba(34, 31, 31, 0.1) 52%,
    transparent 100%
  );
  opacity: 0.9;
  transition: opacity 0.5s var(--ease);
}

/* The caption is white and sits over whatever image is behind it, so it
   carries its own scrim — without one it was unreadable over the light
   placeholder, and would break over any bright photograph. */
.work__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(48px, 7vw, 92px) clamp(20px, 2.4vw, 32px)
    clamp(20px, 2.4vw, 32px);
  color: #fff;
  width: 100%;
  background-color: rgba(10, 9, 9, 0.62);
  background-image: linear-gradient(
    to top,
    rgba(10, 9, 9, 0.5) 0%,
    rgba(10, 9, 9, 0) 100%
  );
}

.work__cap h2,
.work__cap h3 {
  margin-bottom: 8px;
}

.work__cap .tags {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
}

.work__cap .bar {
  width: 42px;
  height: 3px;
  background: var(--orange);
  margin-bottom: 12px;
  transition: width 0.5s var(--ease);
}

.work__item:hover .work__cap .bar {
  width: 78px;
}

/* portfolio card, caption below image (old-site style) */
.pcard__media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
}

.pcard__media .ph {
  transition: transform 0.8s var(--ease);
}

.pcard:hover .pcard__media .ph {
  transform: scale(1.05);
}

.pcard h3 {
  margin-bottom: 8px;
}

.pcard .bar {
  width: 34px;
  height: 3px;
  background: var(--blue);
  margin-bottom: 10px;
  transition: width 0.5s var(--ease);
}

.pcard:hover .bar {
  width: 68px;
}

.pcard .tags {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* -------------------------------------------------- logo strips */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4.6vw, 72px);
}

.logos li {
  font-size: clamp(0.95rem, 1.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.42;
  transition: opacity 0.4s var(--ease), color 0.4s var(--ease),
    transform 0.4s var(--ease);
}

.logos li:hover {
  opacity: 1;
  color: var(--blue);
  transform: translateY(-3px);
}

/* Editorial grid — even cells at every width, so the strip never wraps
   raggedly. Cells are ready to hold real partner badge images: drop an
   <img> in place of the <b>/<span> and the layout is unchanged. */
.partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

/* three items stay on one row at every width — 2+1 would be the ragged
   wrap this grid exists to avoid */
.partners--3 {
  grid-template-columns: repeat(3, 1fr);
}

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

@media (min-width: 1000px) {
  .partners {
    grid-template-columns: repeat(6, 1fr);
  }

  /* three-item variant (the social page lists only the relevant three) */
  .partners--3 {
    grid-template-columns: repeat(3, 1fr);
    max-width: 780px;
    margin-inline: auto;
  }
}

.partners li {
  display: grid;
  place-items: center;
  text-align: center;
  gap: 5px;
  padding: 22px 12px;
  /* 1fr tracks refuse to shrink below their content, so a long label like
     "SOLUTION PARTNER" pushed the grid past the viewport on a 320px phone */
  min-width: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease);
}

.partners li:hover {
  background: var(--tint);
}

.partners b {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.partners span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  overflow-wrap: break-word;
  max-width: 100%;
}

.partners b {
  overflow-wrap: break-word;
  max-width: 100%;
}

.partners img {
  max-height: 34px;
  width: auto;
}

/* -------------------------------------------------- team */
.team {
  display: grid;
  gap: clamp(24px, 3vw, 46px) clamp(16px, 2vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.team__item {
  text-align: center;
}

.team__photo {
  position: relative;
  width: min(230px, 78%);
  margin-inline: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--blue-brand);
  display: grid;
  place-items: center;
  transition: transform 0.55s var(--ease);
}

.team__item:hover .team__photo {
  transform: translateY(-8px);
}

.team__photo .initials {
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
}

.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team__item h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.28rem);
  margin-bottom: 5px;
}

.team__item p {
  color: var(--ink-mute);
  font-size: 0.9rem;
}

/* -------------------------------------------------- stats */
.stats {
  display: grid;
  gap: clamp(20px, 2.6vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

/* Sized so the widest figure ("100M+") fits its column at every width.
   Syne sets roughly 4.8x the font size for five glyphs, so the old
   clamp(2.6rem, 6vw, 5rem) painted up to 100px outside the column and
   collided with the next stat. Keep this in step if a longer figure is added. */
.stat__n {
  font-size: clamp(1.8rem, 3.8vw, 3.3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--orange-text);
  white-space: nowrap;
}

.stat__l {
  margin-top: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.bg-ink .stat__l {
  color: var(--on-dark-mute);
}

/* -------------------------------------------------- process steps */
.steps {
  display: grid;
  gap: clamp(2px, 0.4vw, 6px);
}

.step {
  display: grid;
  gap: 10px 30px;
  grid-template-columns: 1fr;
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--line);
  transition: padding-left 0.5s var(--ease);
}

@media (min-width: 860px) {
  .step {
    grid-template-columns: 110px 1fr 1.35fr;
    align-items: start;
  }
}

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

.step:hover {
  padding-left: 14px;
}

.step__n {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ink-mute);
  transition: color 0.5s var(--ease);
}

.step:hover .step__n {
  color: var(--orange-text);
}

.step p {
  color: var(--ink-soft);
}

.bg-ink .step p {
  color: var(--on-dark-mute);
}

/* band-aware: white here would vanish on a light band in full light mode */
.bg-ink .step__n {
  color: var(--on-dark-mute);
}

/* -------------------------------------------------- work deck (3D carousel)
   Projects stand on a cylinder the visitor rotates by dragging, the arrows or
   the arrow keys. JS sets --deck-r (the cylinder radius) from the tile width
   and the number of tiles, so it stays correct at any screen size.
   Falls back to a plain grid when the visitor prefers reduced motion. */
.deck {
  position: relative;
}

.deck__stage {
  height: clamp(300px, 46vh, 440px);
  perspective: 1500px;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
}

.deck__stage.is-drag {
  cursor: grabbing;
}

.deck__rot {
  position: relative;
  width: clamp(190px, 22vw, 280px);
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
}

.deck__item {
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.42);
  will-change: transform, opacity;
}

.deck__item .ph {
  min-height: 0;
}

/* a real project: its cover fills the tile, and the whole tile is the link */
.deck__item > a {
  display: block;
  width: 100%;
  height: 100%;
}

.deck__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the front tile shows it can be opened: a small orange plus that grows in
   once the tile settles at the front (and on every tile of the still grid
   shown for reduced motion, where any of them opens) */
.deck__item > a {
  position: relative;
}

.deck__item > a::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--orange)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")
    center / 18px no-repeat;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  transform: scale(0);
  transition: transform 0.35s var(--ease);
}

.deck__item[data-active="true"] > a::after,
.deck__item:not([data-active]) > a::after {
  transform: scale(1);
}

/* ── analytics consent (naou.js, initConsent) ───────────────────────────
   Shown only when analytics is switched on and the visitor has not
   answered yet. "Decline" is as large and as visible as "Accept": a
   refusal that is harder to find than a yes is not free consent. */
.consent {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 140;
  display: grid;
  gap: 14px;
  max-width: 420px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 1px var(--line);
  font-size: 0.9rem;
  line-height: 1.5;
}

.consent a {
  color: var(--orange-text);
  font-weight: 600;
  text-decoration: underline;
}

.consent__actions {
  display: flex;
  gap: 10px;
}

.consent__actions button {
  flex: 1;
  min-height: 44px; /* a thumb-sized target on a phone */
  padding: 12px 16px;
  border: 0;
  border-radius: 99px;
  font: 700 0.85rem/1 "Manrope", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  background: var(--ink-bg);
  color: #fff;
}

.consent__actions button[data-consent="yes"] {
  background: var(--orange);
  color: #1c1818;
}

[data-theme="dark"] .consent__actions button[data-consent="no"] {
  background: rgba(255, 255, 255, 0.14);
}

/* phones: above the floating menu, the full width of the screen */
@media (max-width: 860px) {
  .consent {
    left: 10px;
    right: 10px;
    bottom: 98px; /* the dock's top is at most 87px up (320px to 860px) */
    max-width: none;
  }
}

/* the footer's way back to the question, styled like the text beside it */
.ftr__consent {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ── project pop-up (naou.js, initPeek) ─────────────────────────────── */
/* No overflow: hidden on <html> while it is open. WebKit lets go of every
   sticky element while the root is overflow: hidden: in Safari the orbit's
   stage dropped back 3600px up the page as the pop-up opened and stayed
   there once it closed, leaving a black screen. naou.js stops the page
   behind from scrolling instead; a scroll inside the pop-up stops at its
   own ends rather than carrying on to the page. */
.peek__body,
.peek__inner {
  overscroll-behavior: contain;
}

.peek {
  /* the browser centres a modal dialog with auto margins, and the reset at
     the top of this file zeroes every margin; without this it sat in the
     top-left corner and a tap "outside" landed on it */
  margin: auto;
  width: min(980px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.peek::backdrop {
  background: rgba(10, 9, 9, 0.66);
  backdrop-filter: blur(6px);
}

/* a phone darkens the page behind instead of blurring it: a blur over the
   orbit's dust and clips is the heaviest thing a phone can be asked to draw */
@media (hover: none), (max-width: 760px) {
  .peek::backdrop {
    background: rgba(10, 9, 9, 0.8);
    backdrop-filter: none;
  }
}

/* the pop: a little overshoot on the way in, a quick fall on the way out */
.peek[open] {
  animation: peekIn 0.5s cubic-bezier(0.2, 1.35, 0.35, 1) both;
}

.peek[open]::backdrop {
  animation: peekFade 0.3s ease both;
}

.peek.is-closing {
  animation: peekOut 0.22s ease-in both;
}

.peek.is-closing::backdrop {
  animation: peekFade 0.22s ease-in reverse both;
}

@keyframes peekIn {
  from { opacity: 0; transform: translateY(20px) scale(0.88); }
  to { opacity: 1; transform: none; }
}

@keyframes peekOut {
  to { opacity: 0; transform: translateY(12px) scale(0.95); }
}

@keyframes peekFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.peek__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  max-height: calc(100dvh - 32px);
}

.peek__media {
  display: grid;
  place-items: center;
  background: #000;
}

.peek__media video {
  display: block;
  height: min(680px, calc(100dvh - 32px));
  width: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.peek__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(28px, 3.4vw, 48px);
  overflow: auto;
}

.peek__meta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-text);
}

.peek__title {
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.05;
  padding-right: 48px; /* clear of the close button */
}

.peek__lead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.peek__shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.peek__shots img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-sm);
}

.peek__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.peek__tags li {
  padding: 6px 11px;
  border-radius: 99px;
  background: var(--tint-strong);
  font-size: 0.78rem;
  font-weight: 600;
}

.peek .btn {
  align-self: flex-start;
  margin-top: auto;
}

.peek__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 18, 18, 0.78);
  color: #fff;
  cursor: pointer;
}

/* on the dark card a dark circle disappeared; the cross needs a ground */
[data-theme="dark"] .peek__close {
  background: rgba(255, 255, 255, 0.16);
}

.peek__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* phones: the reel on top, the words underneath, the whole card scrolls
   while the close button stays put */
@media (max-width: 760px) {
  .peek {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: var(--r-md);
  }

  .peek__inner {
    grid-template-columns: 1fr;
    max-height: calc(100dvh - 20px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .peek__media video,
  .peek__media img {
    height: min(52dvh, 520px);
  }

  .peek__body {
    overflow: visible;
    padding: 22px 20px 26px;
  }

  .peek__title {
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .peek[open],
  .peek[open]::backdrop,
  .peek.is-closing,
  .peek.is-closing::backdrop {
    animation: none;
  }
}

/* JS sets per-tile opacity by distance from the front */

/* --- controls + caption --- */
.deck__ui {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  max-width: 640px;
  margin: clamp(18px, 2.4vw, 30px) auto 0;
}

.deck__nav {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink);
  flex: none;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.35s var(--ease);
}

.bg-ink .deck__nav,
.hero .deck__nav,
.phero .deck__nav {
  border-color: var(--line-dark);
  color: var(--on-dark);
}

.deck__nav:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--on-orange);
  transform: scale(1.08);
}

.deck__nav svg {
  width: 16px;
  height: 16px;
}

.deck__cap {
  text-align: center;
  min-width: 0;
}

.deck__cap b {
  display: block;
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.deck__cap span {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.bg-ink .deck__cap span,
.hero .deck__cap span,
.phero .deck__cap span {
  color: var(--on-dark-mute);
}

.deck__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
}

.deck__dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  position: relative;
}

/* A 7px dot is the right size to look at and the wrong size to hit: on a
   phone these measured 12x7, against the ~44px a thumb needs. The dot
   stays 7px; an invisible box around it takes the tap. Kept off desktop,
   where a mouse has no such trouble and the boxes would overlap the gap
   between dots. */
@media (pointer: coarse), (max-width: 860px) {
  .deck__dots {
    gap: 14px;
  }

  .deck__dots button::after {
    content: "";
    position: absolute;
    inset: -19px -14px;
  }
}

.bg-ink .deck__dots button {
  background: var(--line-dark);
}

.deck__dots button[aria-current="true"] {
  background: var(--orange);
  transform: scale(1.5);
}

/* Without motion the cylinder is meaningless — show the work as a grid. */
@media (prefers-reduced-motion: reduce) {
  .deck__stage {
    height: auto;
    perspective: none;
    overflow: visible;
    cursor: default;
  }

  .deck__rot {
    width: 100%;
    aspect-ratio: auto;
    transform: none !important;
    transform-style: flat;
    display: grid;
    gap: clamp(12px, 1.6vw, 20px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }

  .deck__item {
    position: relative;
    inset: auto;
    transform: none !important;
    opacity: 1 !important;
    aspect-ratio: 4 / 5;
    box-shadow: none;
  }

  .deck__ui,
  .deck__dots {
    display: none;
  }
}

/* -------------------------------------------------- includes checklist */
.includes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}

.includes li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  font-weight: 600;
  font-size: 0.97rem;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.includes li:hover {
  border-color: var(--orange-text);
  transform: translateY(-3px);
}

.bg-paper-2 .includes li {
  background: var(--surface);
}

.includes .tick {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lav);
  color: var(--blue);
  flex: none;
  margin-top: 1px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.includes li:hover .tick {
  background: var(--orange);
  color: var(--on-orange);
}

.includes .tick svg {
  width: 12px;
  height: 12px;
}

/* -------------------------------------------------- FAQ */
.faq {
  display: grid;
  gap: 0;
  max-width: 900px;
}

.faq details {
  border-top: 1px solid var(--line);
}

.faq details:last-of-type {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 2.2vw, 26px) 2px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color 0.3s var(--ease);
}

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

.faq summary:hover {
  color: var(--orange-text);
}

.faq summary .sign {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  flex: none;
  margin-left: auto;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
    color 0.35s var(--ease), transform 0.45s var(--ease);
}

.faq summary .sign svg {
  width: 12px;
  height: 12px;
}

.faq details[open] summary .sign {
  background: var(--orange);
  border-color: var(--orange-text);
  color: var(--on-orange);
  transform: rotate(135deg);
}

/* 58ch for the same reason as .case-chapter__intro: `ch` is the width of
   the "0" glyph, so 72ch measured out at 83 Greek characters per line. */
.faq details > div {
  padding: 0 46px clamp(18px, 2.2vw, 26px) 2px;
  color: var(--ink-soft);
  max-width: 58ch;
}

/* The 46px on the right keeps the answer clear of the plus button, which
   only matters where there is width to spare. On a 375px screen it was
   spending an eighth of the viewport on empty margin and squeezing the
   answer down to 38 characters a line. */
@media (max-width: 700px) {
  .faq details > div {
    padding-right: 8px;
  }
}

/* -------------------------------------------------- split feature */
.split {
  display: grid;
  gap: clamp(28px, 4vw, 70px);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 940px) {
  .split {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .split--rev > :first-child {
    order: 2;
  }
}

.split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

/* arch-topped media, echoing the logo mark */
.split__media--arch {
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
}

/* -------------------------------------------------- page hero (interior) */
.phero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(46px, 7vw, 104px));
  padding-bottom: clamp(52px, 7vw, 108px);
  overflow: hidden;
}

.phero::before {
  content: "";
  position: absolute;
  width: 52vw;
  height: 52vw;
  right: -14vw;
  top: -18vw;
  border-radius: 50%;
  filter: blur(96px);
  opacity: 0.55;
  background: radial-gradient(circle, rgba(255, 103, 0, 0.6), transparent 70%);
  pointer-events: none;
}

.phero::after {
  content: "";
  position: absolute;
  width: 46vw;
  height: 46vw;
  left: -16vw;
  bottom: -24vw;
  border-radius: 50%;
  filter: blur(96px);
  opacity: 0.5;
  background: radial-gradient(circle, rgba(7, 29, 209, 0.66), transparent 70%);
  pointer-events: none;
}

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

.phero__in {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  align-items: end;
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .phero__in {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

.phero h1 {
  margin-block: 18px 0;
}

/* script accent word, echoing the old site's "design" / "solutions" */
.script {
  display: block;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-style: italic;
  color: var(--orange-text);
  letter-spacing: -0.045em;
}

.crumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

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

/* -------------------------------------------------- CTA band */
.cta {
  text-align: center;
}

.cta h2 {
  margin-bottom: 18px;
}

.cta p {
  margin-inline: auto;
  margin-bottom: 30px;
  text-align: center;
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* -------------------------------------------------- contact */
.contact {
  display: grid;
  gap: clamp(30px, 4vw, 64px);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 980px) {
  .contact {
    grid-template-columns: 1fr 1fr;
  }
}

.form {
  display: grid;
  gap: 14px;
  padding: clamp(24px, 3vw, 42px);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: 0 30px 70px var(--shadow);
}

.field label {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 7px;
}

.field input,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: var(--paper-2);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange-text);
  background: var(--surface);
}

.field textarea {
  min-height: 132px;
  resize: vertical;
}

.form .btn {
  justify-content: center;
  width: 100%;
}

.form__note {
  font-size: 0.8rem;
  color: var(--ink-mute);
  text-align: center;
}

/* the line that appears once the button is pressed, with the address and
   the phone for anyone whose computer had no email app to open */
.form__status {
  color: var(--orange-text);
  font-weight: 600;
}

/* answers from contact.php: shown by the script, or by :target when the
   server sends a browser without JavaScript back to #form-sent / #form-error */
.form__msg {
  display: none;
  color: var(--orange-text);
  font-weight: 600;
}

.form__msg--ok {
  color: var(--ok);
}

.form__msg:target,
.form__msg.is-on {
  display: block;
}

/* the bots-only field: off screen, never focused, never read out */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.info {
  display: grid;
  gap: 2px;
  margin-top: clamp(24px, 3vw, 40px);
}

.info__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
}

.info__row .ic {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  flex: none;
  color: var(--orange-text);
}

.info__row .ic svg {
  width: 17px;
  height: 17px;
}

.info__row .k {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}

.info__row .v {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 600;
}

.info__row a.v:hover {
  color: var(--orange-text);
}

.map {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* -------------------------------------------------- footer */
.ftr {
  position: relative;
  padding-top: clamp(56px, 7vw, 100px);
  overflow: hidden;
}

.ftr__top {
  display: grid;
  gap: clamp(28px, 3.4vw, 56px);
  grid-template-columns: 1fr;
  padding-bottom: clamp(38px, 4.4vw, 66px);
  border-bottom: 1px solid var(--line-dark);
}

@media (min-width: 880px) {
  .ftr__top {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  }
}

.ftr__brand img {
  width: 160px;
  margin-bottom: 20px;
}

.ftr__brand p {
  color: var(--on-dark-mute);
  font-size: 0.95rem;
  max-width: 34ch;
}

.ftr h4 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-text);
  margin-bottom: 18px;
}

.ftr li + li {
  margin-top: 11px;
}

.ftr a {
  color: var(--on-dark-mute);
  font-size: 0.96rem;
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}

.ftr a:hover {
  color: var(--orange-text);
  padding-left: 5px;
}

.ftr__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 26px;
  font-size: 0.85rem;
  color: var(--on-dark-mute);
}

/* The footer used to carry an oversized ghost wordmark behind its links; it
   was taken out (2026-11-03, the user's call). The footer keeps its own
   stacking so nothing inside it is covered. */
.ftr {
  position: relative;
  overflow: hidden;
}

/* the footer's content in its own layer */
.ftr > .shell {
  position: relative;
  z-index: 1;
}

/* The footer is the densest block on the page: four columns of links,
   contact details and the legal line. In the two dark themes it goes to
   the deepest black, a clear step below the dark CTA band that sits above
   it on most pages (both were #221f1f, so they ran together).

   The light theme keeps its light band. */
:root:not([data-theme="light"]) .ftr {
  background-color: #0a0909;
}

/* The white logo is invisible on the light band (1.19:1), so the footer
   carries both files and shows the one that contrasts, as the header does.
   A hidden lazy image is never fetched, so this costs no extra download. */
.ftr__brand .on-light {
  display: none;
}

[data-theme="light"] .ftr__brand .on-dark {
  display: none;
}

[data-theme="light"] .ftr__brand .on-light {
  display: inline;
}

/* The back-to-top button (50px, 22px from the corner, shown above 860px)
   lands on the credit line once the page is scrolled to the end, and at
   1440px it covered "NAOU". Past about 1780px the shell's own margin
   already clears it, so the room is only reserved where it collides. */
@media (min-width: 861px) and (max-width: 1780px) {
  .ftr__bottom {
    padding-right: 64px;
  }
}

/* -------------------------------------------------- back to top */
.totop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
    visibility 0.4s, background 0.3s var(--ease);
}

.totop.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.totop:hover {
  background: var(--ink-bg);
}

.totop svg {
  width: 17px;
  height: 17px;
}

/* -------------------------------------------------- reveal on scroll
   Scoped to html.js (set by an inline script in <head>) so that if the
   JavaScript never runs, the content stays visible instead of being
   permanently hidden at opacity 0. */
.js .rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: var(--d, 0s);
}

.js .rv.is-in {
  opacity: 1;
  transform: none;
}

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

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

  .js .rv {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------- utilities */
.stack-sm > * + * {
  margin-top: 12px;
}
.stack > * + * {
  margin-top: 20px;
}
.stack-lg > * + * {
  margin-top: 32px;
}

.center {
  text-align: center;
}

.center .lead,
.center .eyebrow {
  margin-inline: auto;
}

.center .eyebrow {
  justify-content: center;
}

.mt-cta {
  margin-top: clamp(30px, 4vw, 52px);
}

[hidden] {
  display: none !important;
}

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

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--ink-bg);
  color: #fff;
  padding: 11px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700;
  transition: top 0.3s var(--ease);
}

.skip:focus {
  top: 0;
}

/* -------------------------------------------------- mobile refinements
   These live last on purpose: `.totop` and `.lang button` are declared
   further up the file, so an earlier media block would lose on source
   order at equal specificity. */
@media (max-width: 860px) {
  /* the bottom dock already owns this corner — the back-to-top button was
     sitting on top of it, covering the Contact tile */
  .totop {
    display: none;
  }

  /* thumb-sized language switch */
  .lang button,
  .lang a,
  .lang__current {
    padding: 11px 15px;
  }

  /* phone / email on the contact page are the most-tapped links on mobile */
  .info__row a.v {
    display: inline-block;
    padding-block: 8px;
  }
}

/* -------------------------------------------------- team cards */
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(20px, 2.2vw, 32px);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px var(--shadow);
  border-color: var(--line);
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--lav);
  margin-bottom: 18px;
  display: grid;
  place-items: center;
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.team-card h3 {
  margin: 0 0 8px 0;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.team-card__role {
  margin: 0 0 12px 0;
  font-size: 0.92rem;
  color: var(--ink-mute);
  font-weight: 500;
  line-height: 1.4;
}

.team-card__social {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lav);
  color: var(--blue-brand);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    transform 0.3s var(--ease);
  flex: none;
}

.team-card__social:hover {
  background: var(--blue-brand);
  color: #fff;
  transform: scale(1.08);
}

.team-card__social svg {
  width: 18px;
  height: 18px;
}

/* Dark mode team cards */
[data-theme="dark"] .team-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .team-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .team-card h3 {
  color: #fff;
}

[data-theme="dark"] .team-card__role {
  color: rgba(255, 255, 255, 0.62);
}

[data-theme="dark"] .team-card__social {
  background: rgba(255, 255, 255, 0.1);
  color: var(--orange);
}

[data-theme="dark"] .team-card__social:hover {
  background: var(--orange);
  color: #221f1f;
}

/* Light mode for bands (hero, footer sections) */
.bg-ink .team-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.bg-ink .team-card h3 {
  color: #fff;
}

.bg-ink .team-card__role {
  color: rgba(255, 255, 255, 0.7);
}

.bg-ink .team-card__social {
  background: rgba(255, 255, 255, 0.12);
  color: var(--orange);
}

.bg-ink .team-card__social:hover {
  background: var(--orange);
  color: #221f1f;
}

/* ==========================================================================
   2027 FX — attention-grabbing motion layer
   Everything here is additive and site-wide: it lives in the shared
   stylesheet so every page picks it up with no per-page markup changes.
   The existing prefers-reduced-motion block above (forcing all animation
   and transition durations to 0.01ms) already neutralises all of this for
   users who ask for less motion — nothing further to opt out here.
   ========================================================================== */

/* -------------------------------------------------- scroll progress bar
   Injected by JS (initScrollProgress) as the first element in <body>. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--blue-brand));
  z-index: 1000;
  pointer-events: none;
}

/* -------------------------------------------------- ambient glow drift
   The hero/page-hero brand glows already exist as static blobs; giving them
   a slow drift+breathe keeps the very first thing a visitor sees alive
   without touching layout or legibility. Opacity stays under the existing
   theme rules — only transform is animated here. */
@keyframes glowDriftA {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(3vw, 2.2vw) scale(1.1);
  }
}

@keyframes glowDriftB {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-3vw, -2.2vw) scale(1.12);
  }
}

.hero__pin::before,
.phero::before {
  animation: glowDriftA 12s ease-in-out infinite;
  /* Paused by default; JS (initGlowPause) only lets it run while the
     band is actually on screen. A page like social-media-marketing.html
     is long, so leaving this running for the whole scroll would keep an
     expensive filter: blur() repainting off-screen indefinitely and drag
     the rest of the page down over a long session. */
  animation-play-state: paused;
}

.hero__pin::after,
.phero::after {
  animation: glowDriftB 14s ease-in-out infinite;
  animation-play-state: paused;
}

.hero__pin.is-glow-active::before,
.phero.is-glow-active::before,
.hero__pin.is-glow-active::after,
.phero.is-glow-active::after {
  animation-play-state: running;
}

/* -------------------------------------------------- staggered hero entrance
   Fade + rise + soft blur-in for the first screen's content. Whole blocks
   animate (never split text nodes), so the bilingual data-el swap system
   is untouched. */
@keyframes feIn {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.js .hero__rail,
.js .hero__claim h1,
.js .hero__claim p,
.js .hero__claim .hero__actions {
  opacity: 0;
  animation: feIn 0.9s var(--ease) forwards;
}
.js .hero__rail {
  animation-delay: 0.1s;
}
.js .hero__claim h1 {
  animation-delay: 0.22s;
}
.js .hero__claim p {
  animation-delay: 0.4s;
}
.js .hero__claim .hero__actions {
  animation-delay: 0.54s;
}

/* interior page heroes: covers every phero layout variant in use
   (.phero__in split layout, .center single-column, .contact two-column) */
.js .phero__in > *,
.js .phero .center > *,
.js .phero .contact > * {
  opacity: 0;
  animation: feIn 0.85s var(--ease) forwards;
}
.js .phero__in > *:nth-child(1),
.js .phero .center > *:nth-child(1),
.js .phero .contact > *:nth-child(1) {
  animation-delay: 0.05s;
}
.js .phero__in > *:nth-child(2),
.js .phero .center > *:nth-child(2),
.js .phero .contact > *:nth-child(2) {
  animation-delay: 0.2s;
}
.js .phero .center > *:nth-child(3) {
  animation-delay: 0.34s;
}
.js .phero .center > *:nth-child(4) {
  animation-delay: 0.48s;
}

/* 404: content sits directly in .shell, no wrapper div */
.js .phero > .shell > img,
.js .phero > .shell > h1,
.js .phero > .shell > p,
.js .phero > .shell > a {
  opacity: 0;
  animation: feIn 0.8s var(--ease) forwards;
}
.js .phero > .shell > img {
  animation-delay: 0.05s;
}
.js .phero > .shell > h1 {
  animation-delay: 0.2s;
}
.js .phero > .shell > p {
  animation-delay: 0.35s;
}
.js .phero > .shell > a {
  animation-delay: 0.5s;
}

/* -------------------------------------------------- card cursor spotlight
   JS (initSpotlight) writes --mx/--my as the pointer moves over a .card;
   the glow rides those custom properties. Sits above content at very low
   opacity, pointer-events:none, so text stays fully readable and clicks
   pass through untouched. */
.card {
  --mx: 50%;
  --my: 50%;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    280px circle at var(--mx) var(--my),
    rgba(255, 103, 0, 0.14),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}

.card:hover::before {
  opacity: 1;
}

[data-theme="dark"] .card::before {
  background: radial-gradient(
    280px circle at var(--mx) var(--my),
    rgba(255, 103, 0, 0.22),
    transparent 70%
  );
}

/* -------------------------------------------------- stat counter landing
   JS (initCounters) adds .is-counted once a number finishes rolling up;
   a brief glow flash marks the number "landing" on its final value. */
@keyframes statLand {
  0% {
    text-shadow: 0 0 0 rgba(255, 103, 0, 0);
  }
  30% {
    text-shadow: 0 0 22px rgba(255, 103, 0, 0.85);
  }
  100% {
    text-shadow: 0 0 0 rgba(255, 103, 0, 0);
  }
}

.stat__n.is-counted [data-count] {
  animation: statLand 0.7s ease-out;
}

/* -------------------------------------------------- magnetic buttons
   JS (initMagnetic) sets transform inline on mousemove/mouseleave; this
   just gives that inline transform a smooth spring-like transition so it
   doesn't feel like it's teleporting between mouse samples. */
.btn {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* ==========================================================================
   CASE STUDIES
   One page per client. Chapters (Branding / Website / Social / Content) are
   modular — a page only carries the ones that client actually bought.
   ========================================================================== */

/* -------------------------------------------------- case hero */
.case-hero .shell {
  max-width: 1100px;
}

/* The client name identifies the page; the result line below is what the
   visitor actually came to read. Sized so the line wins the eye, not the
   name — the previous 6.5rem name ate half the first screen. */
.case-hero__name {
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: clamp(14px, 2vw, 24px) 0 clamp(18px, 2.4vw, 30px);
}

/* the single most important sentence on the page */
.case-hero__line {
  max-width: 58ch;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--on-dark);
  padding-left: clamp(16px, 2vw, 26px);
  border-left: 3px solid var(--orange);
}

/* key facts row */
.case-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(34px, 4.5vw, 58px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line-dark);
}

.case-facts dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin-bottom: 8px;
}

.case-facts dd {
  font-size: clamp(0.95rem, 1.2vw, 1.08rem);
  font-weight: 600;
  line-height: 1.4;
}

/* -------------------------------------------------- cover image */
.case-cover {
  margin-top: clamp(-60px, -6vw, -40px);
  position: relative;
  z-index: 3;
  padding-bottom: clamp(40px, 5vw, 70px);
}

/* The 16/9 band is the right look, but it had no ceiling: it grew with
   the window, reaching 829px on a 1600px screen and taller than the
   viewport beyond that, so the cover read as a wall rather than an image.
   Capping the width stops it there and keeps it a banner at any size.

   `object-position` sits just below centre. Eight of the nine covers are
   portrait shots of someone holding something, and in a tall frame the
   hands and the product sit lower than the middle: cropping at 42% kept
   shoulders and cut the sandwich off, 55% keeps both hands and the cup. */
.case-cover__frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
  max-width: 980px;
  max-height: 62vh;
  margin-inline: auto;
}

/* On a phone the 16/9 band collapses to a 189px strip, 23% of the screen,
   for what is supposed to be the opening image of the case study. The
   source photographs are portrait, so a narrow screen is the one place
   they can be shown closer to their real shape. 4/5 gives the cover half
   the screen and keeps far more of the frame. */
@media (max-width: 700px) {
  .case-cover__frame {
    aspect-ratio: 4 / 5;
    max-height: 62vh;
  }
}

.case-cover__frame img,
.case-cover__frame .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  min-height: 0;
}

/* -------------------------------------------------- split intro block */
.case-split {
  display: grid;
  gap: clamp(22px, 3vw, 48px);
}

@media (min-width: 900px) {
  .case-split {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }
}

/* -------------------------------------------------- chapters */
.case-chapter__head {
  margin-bottom: clamp(20px, 2.6vw, 32px);
}

/* A small counter pill inside the eyebrow. It used to be a 4rem numeral
   sitting beside the heading, which pulled the eye to the index instead
   of to what the chapter is about. */
.case-chapter__num {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--on-orange);
  flex: none;
}

/* 58ch, not 70ch. The `ch` unit is the width of the "0" glyph, which in
   Manrope is narrower than the average Greek letter, so 70ch measured out
   at 87 characters per line on a desktop screen. Comfortable reading is
   50 to 75, and Greek words run longer than English, so the drift costs
   more here than it would in the English copy. */
.case-chapter__intro {
  max-width: 58ch;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

/* One frame that demonstrates the decision, standing beside the claim
   rather than in the pile of media further down. Deliberately smaller
   than the cover: it is evidence for a sentence, not the page's hero. */
.case-decision {
  display: grid;
  gap: clamp(24px, 3vw, 46px);
}

@media (min-width: 900px) {
  .case-decision {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
  }
}

.case-decision .lead {
  max-width: 62ch;
}

.case-proof {
  border-radius: var(--r-lg);
  overflow: hidden;
  max-width: 460px;
  width: 100%;
  margin-inline: auto;
}

.case-proof img {
  display: block;
  width: 100%;
  height: auto;
}

/* deliverable pills */
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.case-tags li {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-mute);
}

.bg-ink .case-tags li,
.phero .case-tags li {
  border-color: var(--line-dark);
  color: var(--on-dark-mute);
}

/* -------------------------------------------------- image grids */
.case-grid {
  --gap: clamp(14px, 1.8vw, 24px);
  display: grid;
  gap: var(--gap);
}

.case-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.case-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.case-shot {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--lav);
}

.case-shot--tall {
  aspect-ratio: 4 / 5;
}

.case-shot img,
.case-shot .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 0;
}

/* -------------------------------------------------- browser mockup */
.case-browser {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 30px 70px var(--shadow);
}

.case-browser__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  background: var(--tint-strong);
  border-bottom: 1px solid var(--line-soft);
}

.case-browser__bar > span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--line);
  flex: none;
}

.case-browser__url {
  flex: 1;
  margin-left: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.76rem;
  color: var(--ink-mute);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.case-browser__screen {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.case-browser__screen img,
.case-browser__screen .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  min-height: 0;
}

/* -------------------------------------------------- phone mockups */
.case-phones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: clamp(16px, 2.2vw, 32px);
  max-width: 860px;
  margin-inline: auto;
}

.case-phone {
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  overflow: hidden;
  border: 6px solid var(--ink-bg);
  background: var(--ink-bg);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.36);
  transition: transform 0.5s var(--ease);
}

/* middle phone sits slightly higher on wide screens */
@media (min-width: 700px) {
  .case-phone--lift {
    transform: translateY(-26px);
  }
  .case-phone:hover {
    transform: translateY(-10px);
  }
  .case-phone--lift:hover {
    transform: translateY(-36px);
  }
}

.case-phone img,
.case-phone video,
.case-phone .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 0;
  border-radius: 20px;
}

/* -------------------------------------------------- next case link */
.case-next {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px 20px;
  padding: clamp(26px, 3.4vw, 46px) clamp(22px, 3vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease),
    transform 0.4s var(--ease);
}

.case-next:hover {
  border-color: var(--orange);
  background: var(--tint);
  transform: translateY(-3px);
}

.case-next__label {
  grid-column: 1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.case-next__name {
  grid-column: 1;
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.case-next svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 30px;
  height: 30px;
  color: var(--orange-text);
  transition: transform 0.4s var(--ease);
}

.case-next:hover svg {
  transform: translateX(8px);
}

/* ==========================================================================
   WORK INDEX — every client, filterable by what we delivered
   ========================================================================== */

/* An index page is there to show the work, not the title. This trims the
   page hero so the first project row is reachable without scrolling. */
.phero--compact {
  padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 56px));
  padding-bottom: clamp(28px, 3.6vw, 52px);
}

.phero--compact .d2 {
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
}

.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: clamp(24px, 3vw, 44px);
}

/* Below ~620px five pills wrap onto three rows and push the work far down
   the page. Switch to a single swipeable row instead: same targets, one
   line, and the row itself hints that there is more to the right. */
@media (max-width: 620px) {
  .work-filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edges so the row reads as scrollable */
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
    padding-bottom: 4px;
  }

  .work-filters::-webkit-scrollbar {
    display: none;
  }

  .work-filter {
    flex: none;
    scroll-snap-align: start;
  }
}

.work-filter {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.35s var(--ease);
}

.work-filter:hover {
  border-color: var(--orange);
  color: var(--orange-text);
}

.work-filter[aria-pressed="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--on-orange);
}

.work-filter .n {
  margin-left: 7px;
  opacity: 0.6;
  font-variant-numeric: lining-nums tabular-nums;
}

/* the grid itself */
.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(16px, 2.2vw, 30px);
}

/* One or two published projects: auto-fill would strand the cards in the
   first columns of an otherwise empty row, which reads as a page that
   failed to load rather than a short list. Centre them at a size that
   still looks deliberate. */
.work-grid[data-projects="1"],
.work-grid[data-projects="2"] {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  max-width: 760px;
  margin-inline: auto;
}

.work-card {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease),
    border-color 0.45s var(--ease);
}

.work-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 56px var(--shadow);
  border-color: transparent;
}

/* hidden by the filter: collapsed out of the grid entirely */
.work-card.is-out {
  display: none;
}

/* re-entry animation, staggered by JS via --d */
.work-card.is-in-anim {
  animation: workIn 0.5s var(--ease) both;
  animation-delay: var(--d, 0s);
}

@keyframes workIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.work-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
}

.work-card__media img,
.work-card__media .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 0;
  transition: transform 0.7s var(--ease);
}

.work-card:hover .work-card__media img,
.work-card:hover .work-card__media .ph {
  transform: scale(1.06);
}

.work-card__body {
  padding: clamp(18px, 2.2vw, 26px);
}

.work-card__name {
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.work-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
}

.work-card__tags li {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--tint-strong);
  color: var(--ink-mute);
}

/* shown when a filter matches nothing */
.work-empty {
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 0;
  color: var(--ink-mute);
}

/* ══════════════════════════════════════════════════════════════════════
   HERO VIDEO  ·  used only by the .hero--video variant

   The brand animation runs behind the headline. It is mostly black with
   the wordmark resolving through glass, so the danger is not that the
   hero goes dark but that the bright letters drift under the copy and
   drop its contrast for a second or two. The scrim is there for those
   frames, not for the average one.
   ══════════════════════════════════════════════════════════════════════ */
.hero--video .hero__pin {
  background: #000;
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darker on the left, where the rail and the headline sit, and lighter
   on the right so the animation is still visible doing its work. */
/* The darkening is baked into the video file, not painted over it.

   As a CSS layer this was a full-screen translucent gradient that the
   compositor had to blend over every decoded frame — around 2 million
   pixels a frame on a 1920 screen, sixty times a second, on top of the
   video decode itself. That is the work that showed up as stutter on a
   real full-size window and never here, where the preview renders small.

   ffmpeg burns the same gradient into the frames once, at encode time.
   The runtime cost is zero, the file is smaller because dark areas
   compress better, and the measured contrast is actually better than
   before: 11.0 behind the rail, 7.9 behind the service index. */
.hero__video-scrim {
  display: none;
}

/* The two blurred colour blobs are the backdrop when there is no video.
   Behind one they are simply not visible: the film covers them and the
   scrim covers that. Dimming them to 0.18 still left two `blur(90px)`
   filters animating on every frame, under a 1920x1080 video that was
   already compositing — measured at 9 dropped frames in three seconds
   of the hero sitting still, worst frame 27.7ms.

   With them gone: no dropped frames, worst 14.4ms. Nothing is lost on
   screen, because nothing of them was reaching it. */
.hero--video .hero__pin::before,
.hero--video .hero__pin::after {
  display: none;
}

/* The wheel stays. It sits above the video in the stack, so the two do
   not fight for the same pixels — the video is the backdrop, the tiles
   ride over it. The video's scrim darkens toward the bottom precisely so
   the arc of tiles reads against it. */
.hero--video .hero__wheel {
  z-index: 1;
}

/* Footage is dark in both themes, so a video hero stays a dark band even
   in full light: light text on it, and the header keeps its light-on-dark
   look over it (naou.js leaves .hdr--light off on these pages). Without
   this, light mode drew dark grey text and a dark logo over the video. */
[data-theme="light"] .hero--video {
  --band-bg: #221f1f;
  --band-fg: #ffffff;
  --band-fg-mute: rgba(255, 255, 255, 0.62);
  --band-line: rgba(255, 255, 255, 0.16);
  --band-orange: var(--orange);
  /* the light theme darkens the status green for white pages; on the
     black film it turned the availability dot into a dull blur */
  --ok: #3ddc84;
}

/* ── wheel of reels
   Every tile is a still from one of our reels, baked in NAOU orange; the
   tile at the top of the arc turns to colour, grows, names the client and
   plays its reel (naou.js, wheelReels). The orange is in the image file,
   not a filter or a blend mode: fifteen tiles that move on every scroll
   frame should cost the browser nothing it has to recompute. */
.hero__wheel--reels .wheel-tile {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.hero__wheel--reels .wheel-tile img,
.hero__wheel--reels .wheel-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  box-shadow: none;
}

/* The still was cut from the poster at 45% of its height; this lines the
   portrait reel up on the same frame, so nothing jumps when it starts. */
.hero__wheel--reels .wheel-tile video {
  object-position: 50% 39%;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.hero__wheel--reels .is-apex .wheel-tile {
  transform: scale(1.14);
  box-shadow: 0 26px 60px -18px rgba(255, 103, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.hero__wheel--reels .is-apex .wheel-tile video.is-ready {
  opacity: 1;
}

.wheel-tile__name {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: 99px;
  background: rgba(20, 18, 18, 0.72);
  color: #fff;
  font: 700 11px/1 "Manrope", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.4s var(--ease);
}

.is-apex .wheel-tile__name {
  opacity: 1;
  transform: none;
}

/* The first frame is painted on the wrapper, not given to the <video> as
   a poster, so a phone can have a portrait one: a poster attribute is
   fetched as the page parses, whatever the screen. It is also the whole
   hero for anyone with reduced motion or no JavaScript.
   --hero-y is set by naou.js (initHeroFit) on phones, where the film
   slides within its crop; the poster follows it so nothing jumps. */
.hero__video {
  background: #000 url("../imgs/hero-poster.webp") 50% var(--hero-y, 50%) / cover no-repeat;
}

.hero__video video {
  object-position: 50% var(--hero-y, 50%);
}

/* A phone or tablet held upright gets a portrait cut of the film, so it
   can fill the screen the way the 16:9 one fills a desktop. Cropped to
   cover 390x844, the 16:9 one kept 26% of its width and cut the wordmark
   in half; the portrait cut is the same film with the mark scaled to the
   screen's width and the ribbed glass carried on above and below it.
   Keep this query equal to HERO_TALL in naou.js, which picks the file. */
@media (max-width: 991px) and (orientation: portrait) {
  .hero__video {
    background-image: url("../imgs/hero-poster-tall.webp");
  }
}

/* A desktop window under 992px, or one zoomed past 200%, keeps the hero a
   full screen as it is at full size. */
@media (min-width: 701px) and (max-width: 991px) and (min-aspect-ratio: 1/1) {
  .hero--video .hero__pin {
    min-height: 100vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video video {
    display: none;
  }
}

/* ── hero video: giving the wordmark its own band ─────────────────────
   Sampling every second of the clip puts the mark at 44%–56% of the
   frame height. The first attempt moved the type out of its way, which
   worked but stacked the rail and the headline on top of each other and
   left the hero top-heavy.

   So the film moves instead. It plays as a band across the upper part of
   the hero and fades out below, which drops the mark to roughly a
   quarter of the way down — clear of the copy without the copy having to
   rearrange itself around it.

   That lets the rail go back to being a column on the left with the
   headline beside it, vertically centred, the way it reads best. */
/* The film fills the hero rather than playing in a band across the top.
   The band worked, but its lower edge was a visible seam: below it the
   blurred colour blobs showed through unveiled, so the hero had a line
   across it where the video stopped.

   Full height puts the mark back at 44%-56% of the hero, which is why
   the copy sits clear of that band — the rail above it, the service
   index below. */
@media (min-width: 701px) {
}

/* ── hero video: no headline, so the rhythm changes ───────────────────
   With the wordmark carrying the top and no headline under it, the
   facts rail and the service index were left sitting close together in
   the upper third. The index drops toward the lower part of the hero,
   which gives the film the whole middle and puts the three ways in
   where a reader's eye lands after watching it. */
@media (min-width: 701px) {
  .hero--video .hero__pin > .shell {
    justify-content: flex-start;
    /* the rail sits above the mark's band, the index below it */
    padding-top: clamp(24px, 5vh, 60px);
  }

  /* naou.js (initHeroFit) replaces this with a margin measured from the
     film's frame, so the row keeps its place under the mark at any zoom;
     this is the fallback without JavaScript */
  .hero--video .hero__cols {
    margin-top: clamp(90px, 20vh, 240px);
  }
}

/* Full screen on a phone and on a tablet held upright, as on a desktop:
   the facts rail at the top, the three services at the bottom clear of
   the dock, and the mark in the space between them (naou.js centres it
   there). Keep this query equal to PHONE in naou.js (initHeroFit). */
@media (max-width: 700px), (max-width: 991px) and (orientation: portrait) {
  .hero--video .hero__pin {
    min-height: 100vh;
    min-height: 100svh;
    /* the dock is 14px off the bottom and 71px tall */
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .hero--video .hero__pin > .shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .hero--video .hero__cols {
    margin-top: auto;
  }
}


/* ---------------------------------------------------------------------------
   Content creation strip (Social page): a row of reels running off the
   right edge, each opening the project pop-up. The first tile lines up
   with the text of the section above it.
--------------------------------------------------------------------------- */
.reels__track {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut)));
  padding: clamp(8px, 2vw, 24px) 0 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--band-line, rgba(255, 255, 255, 0.2)) transparent;
}

.reels__list {
  display: flex;
  gap: clamp(10px, 1.3vw, 18px);
  width: max-content;
  margin: 0;
  padding: 0 max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut)));
  list-style: none;
}

.reels__item {
  flex: none;
  width: clamp(148px, 16vw, 232px);
  scroll-snap-align: start;
}

.reels__card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #111;
  color: #fff;
  text-decoration: none;
}

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

.reels__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0) 55%);
  pointer-events: none;
}

.reels__play {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 0.3s var(--ease);
}

.reels__play::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 13px;
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.reels__cap {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  z-index: 1;
  display: grid;
  gap: 3px;
}

.reels__name {
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.1;
}

.reels__tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

@media (hover: hover) {
  .reels__card:hover img {
    transform: scale(1.045);
  }
  .reels__card:hover .reels__play {
    background: var(--orange);
  }
}

.reels__card:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .reels__card img {
    transition: none;
  }
}

/* a client with photographs only opens the pop-up on its first one */
.peek__media img {
  display: block;
  height: min(680px, calc(100dvh - 32px));
  width: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

@media (max-width: 760px) {
  .peek__media img {
    height: min(52dvh, 520px);
  }
}

/* a page of branding opens the pop-up in its own shape, not cut to 9:16 */
.peek__media--wide {
  padding: 0;
}

.peek__media--wide img {
  width: min(560px, 46vw);
  height: auto;
  max-height: calc(100dvh - 32px);
  aspect-ratio: auto;
  object-fit: contain;
}

/* and its other pages whole, never cut to a portrait */
.peek__media--wide + .peek__body .peek__shots img {
  aspect-ratio: 1;
  object-fit: contain;
  background: #0d0c0c;
}

@media (max-width: 760px) {
  .peek__media--wide img {
    width: 100%;
    height: auto;
  }
}

/* a work card that opens a pop-up rather than a page: the link fills it */
.work-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* a site that only scrolls opens the pop-up on its page, running down and
   back up (one long picture moved by CSS, fetched when the pop-up opens) */
.peek__scroll {
  position: relative;
  height: min(680px, calc(100dvh - 32px));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  container-type: size;
}

.peek__media .peek__scroll img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: fill;
  animation: peekSiteScroll 13s ease-in-out 1s infinite alternate;
}

@keyframes peekSiteScroll {
  to { transform: translateY(calc(-100% + 100cqh)); }
}

@media (max-width: 760px) {
  .peek__scroll {
    height: min(52dvh, 520px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .peek__media .peek__scroll img {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Work page: each client once, as its logo. A tile opens the client's whole
   page in the pop-up (.peek--client).
--------------------------------------------------------------------------- */
.work-grid--logos {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 1.6vw, 22px);
}

.logo-tile .logo-tile__mark {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f1ec;
}

.logo-tile .logo-tile__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.logo-tile:hover .logo-tile__mark img {
  transform: scale(1.05);
}

/* a client without a logo file yet: its name, set large */
.logo-tile__mark--name {
  display: grid !important;
  place-items: center;
  padding: 12%;
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  color: #1c1818;
}

.logo-tile__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 14px;
  font-family: "Syne", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}

.logo-tile__name small {
  font-family: inherit;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* the client's page: logo and name, then a section per service */
.peek.peek--client {
  width: min(1120px, calc(100vw - 32px));
}

.peek--client .peek__inner {
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
}

.peek__client {
  display: grid;
  gap: clamp(30px, 4vw, 48px);
  padding: clamp(24px, 3.4vw, 46px);
}

.pc__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding-right: 52px; /* clear of the close button */
}

.pc__logo {
  display: block;
  width: clamp(88px, 11vw, 132px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: #f4f1ec;
}

.pc__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pc__who {
  display: grid;
  gap: 10px;
}

.pc__h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-text);
}

.pc__h::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.pc__reels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.pc__reel video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: #000;
}

.pc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 12px;
}

.pc__grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-sm);
}

/* the branding pages in their own shape, never boxed or cut */
.pc__grid--brand {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  align-items: start;
}

.pc__grid--brand img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

.pc__site {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
}

.pc__site .peek__scroll {
  height: min(560px, 70dvh);
  border-radius: var(--r-sm);
}

.pc__site video {
  display: block;
  height: min(560px, 70dvh);
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: #000;
}

@media (max-width: 760px) {
  /* two logos a row on a phone */
  .work-grid--logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .logo-tile__name {
    padding: 10px 11px 12px;
    font-size: 0.82rem;
  }

  /* the logo beside the name, the services under both */
  .pc__head {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px 14px;
    padding-right: 44px;
  }

  .pc__logo {
    width: 76px;
  }

  .pc__who {
    display: contents;
  }

  .pc__head .peek__meta,
  .pc__head .peek__title {
    grid-column: 2;
    align-self: center;
  }

  .pc__head .peek__tags,
  .pc__head .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

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

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

  .pc__grid--brand {
    grid-template-columns: 1fr;
  }
}