/* ==========================================================================
   738 Studios — Global stylesheet
   Built to the 738 Studios Brand Style Guide v1.1 (October 2026)
   --------------------------------------------------------------------------
   Colour   Ink, White and Paper carry ~90% of every layout.
            One neon per piece: this site uses Cyan.
   Type     Jost Medium headings, uppercase, wide tracking.
            Jost Regular body, 16px, line height 1.5.
            IBM Plex Mono for labels, captions, numbers. Small, uppercase.
            Rock Salt for the logo numerals only.
   Dots     Always round, one colour per cluster, sparse → dense.
            Corner fields, dissolving edges, one colour cluster, small marks.
   ========================================================================== */

:root {
  /* Primary palette */
  --ink: #14161C;
  --white: #FFFFFF;
  --paper: #F1F3F2;

  /* Secondary neons — use ONE per piece. The website's neon is Cyan. */
  --cyan: #00E5FF;
  --electric-blue: #2B59FF;
  --ultraviolet: #8A4DFF;
  --volt: #C6FF3D;
  --neon: var(--cyan);
  --neon-ink: var(--ink);          /* text colour on the neon (Ink on Cyan) */

  /* Derived tones */
  --ink-2: #1C1F27;                /* raised surface on Ink */
  --ink-muted: rgba(255, 255, 255, 0.68);
  --ink-faint: rgba(255, 255, 255, 0.42);
  --ink-line: rgba(255, 255, 255, 0.14);
  --paper-muted: #5C6068;
  --paper-faint: #8A8E96;
  --paper-line: rgba(20, 22, 28, 0.12);
  --paper-line-strong: rgba(20, 22, 28, 0.28);

  --font-head: 'Jost', system-ui, sans-serif;
  --font-body: 'Jost', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-logo: 'Rock Salt', cursive;

  --max: 1400px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --track-head: 0.08em;
  --track-label: 0.14em;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-head); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-head);
  line-height: 1.15; margin: 0; text-wrap: balance;
}

::selection { background: var(--neon); color: var(--neon-ink); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--neon); color: var(--neon-ink); padding: 10px 14px; font-weight: 500;
}
.skip-link:focus { top: 16px; }

/* ---------- Studio colours ----------
   The parent site uses no neon: Ink is its accent on Paper, White on Ink.
   Each studio micro site sets --neon to its own brand neon. One neon per site. */
:root[data-site="parent"] { --neon: #14161C; --neon-ink: #FFFFFF; }
:root[data-site="parent"] .on-ink, :root[data-site="parent"] .site-header, :root[data-site="parent"] .site-footer, :root[data-site="parent"] .cta-band, :root[data-site="parent"] .panel { --neon: #FFFFFF; --neon-ink: #14161C; }
:root[data-site="parent"] .btn-primary:hover { background: #2A2D36; border-color: #2A2D36; }
:root[data-site="parent"] .on-ink .btn-primary:hover, :root[data-site="parent"] .cta-band .btn-primary:hover { background: #E6E8EA; border-color: #E6E8EA; }
:root[data-site="parent"] .eyebrow::before { background: var(--ink); }
:root[data-site="parent"] .on-ink .eyebrow { color: var(--ink-muted); }
:root[data-site="parent"] .on-ink .eyebrow::before { background: var(--white); }
:root[data-studio="ai"] { --neon: #3FBFD1; --neon-ink: #14161C; }
:root[data-studio="code"] { --neon: #4F6FD9; --neon-ink: #FFFFFF; }
:root[data-studio="web"] { --neon: #A9CF4A; --neon-ink: #14161C; }
:root[data-studio="design"] { --neon: #8E72D6; --neon-ink: #FFFFFF; }
:root[data-studio="ai"] .btn-primary:hover, :root[data-studio="ai"] .scale-tab:hover { background: #5CCBDA; border-color: #5CCBDA; }
:root[data-studio="code"] .btn-primary:hover, :root[data-studio="code"] .scale-tab:hover { background: #6683E0; border-color: #6683E0; }
:root[data-studio="web"] .btn-primary:hover { background: #B9DA62; border-color: #B9DA62; }
:root[data-studio="design"] .btn-primary:hover { background: #A08ADF; border-color: #A08ADF; }
:root[data-studio] .form-status.ok { border-color: var(--neon); }

/* ---------- Theme contexts ----------
   .on-ink  : white text on Ink (hero, header, footer, CTA)
   default  : Ink text on Paper / White
------------------------------------- */
.on-ink { background: var(--ink); color: var(--white); }
.on-ink .muted, .on-ink .lead { color: var(--ink-muted); }
.on-white { background: var(--white); }

/* ---------- Typography helpers ---------- */
.label, .eyebrow, .mono {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
}
.eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--paper-muted); }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); flex: none; }
.on-ink .eyebrow { color: var(--neon); }

.h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.08; }
.h2 { font-size: clamp(1.5rem, 3vw, 2.35rem); }
.h3 { font-size: clamp(1rem, 1.4vw, 1.15rem); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--paper-muted); max-width: 60ch; line-height: 1.55; }
.muted { color: var(--paper-muted); }

.section-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) {
  .section-head.split { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; }
}
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 24px; border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--font-head); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s, transform .3s var(--ease); white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--neon); color: var(--neon-ink); border-color: var(--neon); }
.btn-primary:hover { background: #33EBFF; border-color: #33EBFF; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--paper-line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.on-ink .btn-ghost { color: var(--white); border-color: var(--ink-line); }
.on-ink .btn-ghost:hover { border-color: var(--white); }
.btn-lg { padding: 18px 30px; }
.btn[disabled] { opacity: .6; cursor: progress; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 500; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .2s;
}
.link-arrow svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.link-arrow:hover { border-color: var(--ink); }
.link-arrow:hover svg { transform: translate(2px, -2px); }

/* ---------- Dot fields (rendered by js/main.js) ---------- */
.dotfield { position: absolute; pointer-events: none; overflow: hidden; }
.dotfield svg { width: 100%; height: 100%; display: block; }
.dotfield.corner-tr { top: 0; right: 0; width: min(52%, 640px); height: 100%; }
.dotfield.corner-tl { top: 0; left: 0; width: 40%; height: 70%; }
.dotfield.corner-br { bottom: 0; right: 0; width: 45%; height: 80%; }
.dotfield.corner-bl { bottom: 0; left: 0; width: 45%; height: 80%; }
.dotfield.edge-bottom { left: 0; right: 0; bottom: -1px; width: 100%; height: 140px; }
.dotfield.cluster { width: 220px; height: 140px; }

/* Growing dot row: dividers and progress ("small marks") */
.dot-row { display: flex; align-items: center; gap: 10px; }
.dot-row i { display: block; border-radius: 50%; background: var(--neon); }
.dot-row i:nth-child(1) { width: 4px; height: 4px; }
.dot-row i:nth-child(2) { width: 6px; height: 6px; }
.dot-row i:nth-child(3) { width: 8px; height: 8px; }
.dot-row i:nth-child(4) { width: 10px; height: 10px; }
.dot-row i:nth-child(5) { width: 12px; height: 12px; }
.dot-row i:nth-child(6) { width: 14px; height: 14px; }

/* ---------- Logo ----------
   738 in Rock Salt, STUDIOS in Jost with wide tracking.
   At small sizes the logo is used without the dot field. */
.brand { display: inline-flex; align-items: baseline; gap: 12px; color: inherit; line-height: 1; }
.logo-num { font-family: var(--font-logo); font-size: 24px; letter-spacing: -0.02em; transform: translateY(1px); }
.logo-word { font-family: var(--font-head); font-weight: 500; font-size: 12px; letter-spacing: 0.34em; text-transform: uppercase; }
.brand.lg .logo-num { font-size: 44px; }
.brand.lg .logo-word { font-size: 15px; letter-spacing: 0.4em; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink); color: var(--white);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
.site-header.scrolled { border-color: var(--ink-line); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }

.site-nav { display: flex; align-items: center; gap: 34px; }
.site-nav > a:not(.btn), .site-nav > .nav-item > a {
  position: relative; font-family: var(--font-head); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); transition: color .2s; padding: 6px 0;
}
.site-nav > a:not(.btn)::after, .site-nav > .nav-item > a::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 6px; height: 6px; border-radius: 50%; background: var(--neon);
  transform: translateX(-50%) scale(0); transition: transform .25s var(--ease);
}
.site-nav > a:not(.btn):hover, .site-nav > a:not(.btn).active, .site-nav > .nav-item > a:hover, .site-nav > .nav-item > a.active,
.has-mega:hover > a, .has-mega.open > a, .has-mega:focus-within > a { color: var(--white); }
.site-nav > a:not(.btn).active::after, .site-nav > a:not(.btn):hover::after, .site-nav > .nav-item > a.active::after, .site-nav > .nav-item > a:hover::after,
.has-mega:hover > a::after, .has-mega.open > a::after, .has-mega:focus-within > a::after { transform: translateX(-50%) scale(1); }
.nav-cta { padding: 12px 20px; }

/* ---------- Services mega menu ---------- */
.nav-item { position: static; }
.has-mega { display: flex; align-items: center; height: 76px; }
.mega-toggle { display: none; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 90;
  background: var(--ink); color: var(--white); border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line);
  box-shadow: 0 40px 60px -30px rgba(0, 0, 0, .7);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.open .mega {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.mega-inner {
  width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; padding: 36px 0 30px;
}
.mega-head {
  display: block; white-space: nowrap; font-family: var(--font-head); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ink-line);
}
.mega-head:hover { color: var(--neon); }
.mega-desc { font-size: 13px; line-height: 1.45; color: var(--ink-faint); margin-bottom: 12px; }
.mega-col ul { display: grid; gap: 2px; }
.mega-col ul a {
  position: relative; display: block; padding: 7px 0; font-size: 14px; color: var(--ink-muted); transition: color .2s, padding-left .2s var(--ease);
}
.mega-col ul a::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--neon); opacity: 0; transform: scale(.4); transition: .2s var(--ease); }
.mega-col ul a:hover { color: var(--white); padding-left: 14px; }
.mega-col ul a:hover::before { opacity: 1; transform: none; }
.mega-foot { border-top: 1px solid var(--ink-line); background: var(--ink-2); }
.mega-foot-inner {
  width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding: 14px 0;
}
.mega-foot a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.mega-foot a svg { width: 14px; height: 14px; }
.mega-foot a:hover { color: var(--neon); }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--ink-line); border-radius: var(--radius); background: transparent;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--white); transition: transform .3s var(--ease), opacity .3s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--ink-line); padding: 8px var(--gutter) 24px;
    max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .3s;
  }
  .site-nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .site-nav > a:not(.btn), .site-nav > .nav-item > a { padding: 18px 0; font-size: 14px; border-bottom: 1px solid var(--ink-line); }
  .site-nav > a:not(.btn)::after, .site-nav > .nav-item > a::after { display: none; }
  .nav-cta { margin-top: 18px; justify-content: center; }

  /* Mega menu becomes an accordion inside the mobile nav */
  .has-mega { height: auto; flex-wrap: wrap; justify-content: space-between; }
  .has-mega > a { flex: 1; }
  .mega-toggle {
    display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: 12px;
    border: 1px solid var(--ink-line); border-radius: var(--radius); background: transparent; color: var(--white);
  }
  .mega-toggle svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
  .has-mega.open .mega-toggle svg { transform: rotate(180deg); }
  .mega {
    position: static; width: 100%; display: none; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: transparent;
  }
  .has-mega.open .mega { display: block; }
  .has-mega:hover .mega, .has-mega:focus-within .mega { display: none; }
  .has-mega.open:hover .mega, .has-mega.open:focus-within .mega { display: block; }
  .mega-inner { width: auto; grid-template-columns: 1fr; gap: 18px; padding: 6px 0 18px; }
  .mega-head { font-size: 12px; }
  .mega-col ul a { padding: 8px 0; font-size: 15px; }
  .mega-foot { border-top: 0; background: transparent; }
  .mega-foot-inner { width: auto; padding: 0 0 12px; flex-direction: column; gap: 10px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(72px, 11vw, 140px) 0 clamp(150px, 16vw, 210px); }
.hero .container { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.hero .h1 { margin-top: 22px; max-width: 21ch; }
.hero .h1 em { font-style: normal; color: var(--neon); }
.hero .lead { margin-top: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-meta { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 32px; margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--ink-line); color: var(--ink-muted); font-size: 14px; }
@media (max-width: 999px) { .hero-meta { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hero-meta { grid-template-columns: 1fr; } }
.hero-meta strong { display: block; color: var(--white); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: 4px; }
.hero-visual { position: relative; align-self: stretch; min-height: 200px; }
.hero-visual .cluster { position: absolute; left: 0; bottom: 22%; }
@media (max-width: 999px) {
  .hero-visual { display: none; }
  /* Keep the field in the corner, above the text, so copy always sits on solid Ink. */
  .dotfield.corner-tr { width: 70%; height: 150px; }
  .hero, .page-hero { padding-top: 200px; }
}
@media (max-width: 640px) { .strip { display: none; } }

/* ---------- Services strip (static, mono) ---------- */
.strip { background: var(--paper); border-bottom: 1px solid var(--paper-line); padding: 18px 0; }
.strip .container { display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center; justify-content: center; }
.strip span { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper-muted); display: inline-flex; align-items: center; gap: 28px; }
.strip span + span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section.tight { padding-top: clamp(48px, 6vw, 80px); }
.section.alt { background: var(--white); border-block: 1px solid var(--paper-line); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-2x2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid-2x2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  position: relative; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 30px;
  transition: border-color .25s, transform .35s var(--ease);
}
.section.alt .card { background: var(--paper); }
.card:hover { border-color: var(--paper-line-strong); transform: translateY(-3px); }
.card .icon {
  width: 48px; height: 48px; border-radius: var(--radius); display: grid; place-items: center; margin-bottom: 24px;
  background: var(--paper); border: 1px solid var(--paper-line); color: var(--ink);
}
.section.alt .card .icon { background: var(--white); }
.card .icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 1rem; margin-bottom: 12px; }
.card p { color: var(--paper-muted); font-size: 15px; }
.card .link-arrow { margin-top: 22px; }
.card .num { position: absolute; top: 28px; right: 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--track-label); color: var(--paper-faint); }

/* ---------- Process: growing dots carry the steps ---------- */
.process { border-top: 1px solid var(--paper-line); }
.step { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 28px 0; border-bottom: 1px solid var(--paper-line); align-items: start; }
.step .step-n { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--track-label); color: var(--paper-muted); padding-top: 4px; }
.step .step-n::before { content: ""; border-radius: 50%; background: var(--neon); width: var(--dot, 6px); height: var(--dot, 6px); flex: none; }
.step:nth-child(1) { --dot: 5px; } .step:nth-child(2) { --dot: 7px; } .step:nth-child(3) { --dot: 9px; }
.step:nth-child(4) { --dot: 11px; } .step:nth-child(5) { --dot: 13px; } .step:nth-child(6) { --dot: 15px; }
.step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.step p { color: var(--paper-muted); max-width: 62ch; }
@media (min-width: 900px) {
  .step { grid-template-columns: 120px 1fr 1.4fr; }
  .step h3 { grid-column: 2; margin: 0; padding-top: 2px; }
  .step p { grid-column: 3; }
}

/* ---------- Split / feature ---------- */
.split { display: grid; gap: 40px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; } .split.rev > :first-child { order: 2; } }
.split .lead { margin-top: 18px; }

/* Round bullets, one colour */
.checklist { display: grid; gap: 14px; margin-top: 28px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; color: var(--paper-muted); }
.checklist li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); margin-top: 8px; }
.checklist li strong { color: var(--ink); font-weight: 500; }
.on-ink .checklist li { color: var(--ink-muted); }
.on-ink .checklist li strong { color: var(--white); }

.panel { position: relative; background: var(--ink); color: var(--white); border-radius: var(--radius); padding: 32px; overflow: hidden; }
.panel > * { position: relative; z-index: 1; }
.panel .mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink-muted); line-height: 1.9; white-space: pre-wrap; margin: 0; }
.panel .mono .ok { color: var(--neon); }
.panel .mono .warn { color: var(--white); }
.panel .mono .k { color: var(--ink-faint); }
.panel-title { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); letter-spacing: var(--track-label); text-transform: uppercase; }
.panel-title i { display: none; }
.panel-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); }
.panel .checklist li { color: var(--ink-muted); }
.panel .checklist li strong { color: var(--white); }
.panel .quote { color: var(--white); }
.panel .quote-by { color: var(--ink-faint); }

/* ---------- Values ---------- */
.values { display: grid; gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 700px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .values { grid-template-columns: repeat(4, 1fr); } }
.value { background: var(--white); padding: 32px 28px; }
.section.alt .value { background: var(--paper); }
.value h3 { font-size: 1rem; margin: 16px 0 8px; }
.value p { color: var(--paper-muted); font-size: 15px; }
.value .glyph { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--track-label); color: var(--paper-faint); display: flex; align-items: center; gap: 10px; }
.value .glyph::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); }

/* ---------- Facts & clients (experience) ---------- */
.facts { display: grid; gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--white); padding: 28px 26px; display: grid; gap: 10px; }
.section.alt .fact { background: var(--paper); }
.fact strong { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.fact span { color: var(--paper-muted); font-size: 14.5px; }
.clients { display: flex; flex-wrap: wrap; gap: 14px 44px; align-items: center; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--paper-line); }
.clients span, .clients img { font-family: var(--font-head); font-weight: 500; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); }
.clients img { height: 28px; width: auto; opacity: .7; filter: grayscale(1); }
.clients-note { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-faint); max-width: 70ch; }

@media (min-width: 1000px) { .facts.facts-3 { grid-template-columns: repeat(3, 1fr); } }
.fact span em { display: block; font-style: normal; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-faint); margin-top: 8px; }

/* ---------- Comparison diagrams ---------- */
.compare { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-panel { margin: 0; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: 24px; }
.section.alt .compare-panel { background: var(--paper); }
.compare-panel figcaption { display: grid; gap: 6px; margin-bottom: 18px; }
.compare-panel figcaption .label { color: var(--paper-faint); }
.compare-panel figcaption h3 { font-size: 1rem; }
.compare-panel:last-child figcaption .label { color: var(--ink); }
.compare-panel:last-child figcaption .label::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); margin-right: 8px; vertical-align: middle; }
.compare-panel { overflow-x: auto; }
.diagram { width: 100%; min-width: 480px; height: auto; display: block; } /* scrolls sideways on phones rather than shrinking the type */
.diagram .t-mono { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; fill: var(--ink); }
.diagram .t-faint { fill: var(--paper-muted); }
.diagram .t-strong { font-weight: 500; }
.diagram .t-onink { fill: #FFFFFF; }
.diagram .t-onink-faint { fill: rgba(255,255,255,.55); }
.diagram .t-ink { fill: var(--ink); }
.diagram-note { margin-top: 16px; font-size: 14px; color: var(--paper-muted); max-width: 90ch; }

/* ---------- App suite ---------- */
.app-card { display: flex; flex-direction: column; gap: 14px; }
.app-card .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-card .app-icon {
  width: 52px; height: 52px; border-radius: var(--radius); display: grid; place-items: center; flex: none;
  background: var(--ink); color: var(--white); font-family: var(--font-mono); font-weight: 500; font-size: 14px; letter-spacing: 0.04em;
}
.app-card h3 { margin: 4px 0 0; font-size: 1rem; }
.app-card .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper-faint); }
.app-card ul { display: grid; gap: 8px; margin-top: 4px; }
.app-card ul li { color: var(--paper-muted); font-size: 14.5px; padding-left: 18px; position: relative; }
.app-card ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); }
.app-card .foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--paper-line); }
.app-card .foot .muted { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

.pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--radius); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--paper-line); color: var(--paper-muted); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--paper-faint); }
.pill.on::before { background: var(--neon); }
.pill.soon::before { background: var(--paper-faint); }

.app-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.app-filters button {
  font-family: var(--font-head); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 16px; border-radius: var(--radius); color: var(--paper-muted); background: transparent; border: 1px solid var(--paper-line-strong); transition: .2s;
}
.app-filters button:hover { color: var(--ink); border-color: var(--ink); }
.app-filters button.active { color: var(--neon-ink); background: var(--neon); border-color: var(--neon); }

/* ---------- Quote ---------- */
.quote { font-family: var(--font-head); font-weight: 400; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.35; max-width: 26ch; text-transform: none; letter-spacing: 0; }
.quote-by { margin-top: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper-muted); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--paper-line); }
.faq details { border-bottom: 1px solid var(--paper-line); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; font-family: var(--font-head); font-weight: 500; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); transition: background .2s; }
.faq details[open] summary::after { background: var(--neon); border-color: var(--neon); }
.faq .answer { padding: 0 0 24px; color: var(--paper-muted); max-width: 70ch; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius); padding: clamp(44px, 7vw, 88px) clamp(24px, 5vw, 64px); background: var(--ink); color: var(--white); text-align: center; }
.cta-band > :not(.dotfield) { position: relative; z-index: 1; }
.cta-band .dotfield.corner-tr { width: 24%; } /* stays clear of the centred copy */
.cta-band .h2 { max-width: 22ch; margin-inline: auto; }
.cta-band p { max-width: 52ch; margin: 18px auto 0; color: var(--ink-muted); font-size: 17px; }
.cta-band .btn-primary { margin-top: 32px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(60px, 9vw, 110px) 0 clamp(150px, 15vw, 190px); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .h1 { margin-top: 20px; max-width: 20ch; }
.page-hero .lead { margin-top: 22px; }

/* ---------- Service groups (services page) ---------- */
.service-group { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--paper-line); scroll-margin-top: 140px; }
.service-group.alt { background: var(--white); }
.service-group .card { scroll-margin-top: 150px; }
.card.service h3 { padding-right: 56px; }
.card .subs { display: grid; gap: 8px; margin-top: 16px; }
.card .subs li { position: relative; padding-left: 18px; color: var(--paper-muted); font-size: 14.5px; }
.card .subs li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--neon); }
.card .tags { margin-top: 18px; }
.card .tags span { font-size: 10.5px; padding: 6px 10px; }
.card .tags + .link-arrow { margin-top: 20px; }
.card .subs.mono li { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper-muted); }

/* ---------- Service detail ---------- */
.service-detail { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--paper-line); scroll-margin-top: 140px; }
.service-detail:nth-of-type(even) { background: var(--white); }
.service-detail .split { align-items: start; }
.service-detail .h2 { margin-top: 16px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.tags span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 12px; border-radius: var(--radius); border: 1px solid var(--paper-line-strong); color: var(--paper-muted); }
.deliverables { display: grid; gap: 10px; }
.deliverables li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 18px 20px; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); }
.service-detail:nth-of-type(even) .deliverables li { background: var(--paper); }
.deliverables li b { font-family: var(--font-mono); font-weight: 500; color: var(--paper-faint); font-size: 11px; letter-spacing: 0.1em; padding-top: 4px; }
.deliverables li span { color: var(--paper-muted); font-size: 15px; }
.deliverables li span strong { color: var(--ink); display: block; margin-bottom: 2px; font-weight: 500; }

.subnav { position: sticky; top: 76px; z-index: 50; background: var(--paper); border-block: 1px solid var(--paper-line); }
.subnav .container { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.subnav .container::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none; font-family: var(--font-head); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 14px; border-radius: var(--radius); color: var(--paper-muted); border: 1px solid transparent; transition: .2s;
}
.subnav a:hover, .subnav a.active { color: var(--ink); border-color: var(--paper-line-strong); background: var(--white); }

/* ---------- Team / about ---------- */
.team { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.member { background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; }
.section.alt .member { background: var(--paper); }
.member .avatar { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: var(--ink); color: var(--white); overflow: hidden; }
.member .avatar span { position: relative; z-index: 1; font-family: var(--font-logo); font-size: 40px; }
.member .info { padding: 20px; }
.member h3 { font-size: .95rem; }
.member p { color: var(--paper-muted); font-size: 14.5px; margin-top: 6px; }

.timeline { border-left: 1px solid var(--paper-line-strong); margin-left: 8px; }
.timeline li { position: relative; padding: 0 0 30px 32px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 5px var(--paper); }
.timeline h3 { font-size: 1rem; margin-bottom: 6px; }
.timeline p { color: var(--paper-muted); font-size: 15px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; gap: 40px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; } }
.contact-info { display: grid; gap: 28px; }
.contact-info .block h3 { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: var(--track-label); color: var(--paper-faint); margin-bottom: 8px; }
.contact-info .block a { font-family: var(--font-head); font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 500; border-bottom: 1px solid transparent; transition: border-color .2s; }
.contact-info .block a:hover { border-color: var(--ink); }
.contact-info .block p { color: var(--paper-muted); }

.form { display: grid; gap: 18px; background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: clamp(22px, 4vw, 36px); position: relative; }
.form-row { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper-muted); }
.field label .req { color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--paper-line-strong); border-radius: var(--radius);
  padding: 14px 16px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314161C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0, 229, 255, .35); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #C0392B; }
.field .error { font-size: 13px; color: #C0392B; display: none; }
.field.invalid .error { display: block; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.form-foot small { color: var(--paper-faint); font-size: 13px; max-width: 40ch; }
.form-foot small a { text-decoration: underline; }
.form-status { display: none; padding: 14px 16px; border-radius: var(--radius); font-size: 15px; border: 1px solid; }
.form-status.show { display: block; }
.form-status.ok { background: var(--paper); color: var(--ink); border-color: var(--neon); }
.form-status.err { background: #FBEDEB; color: #8E2A20; border-color: #E4B6B0; }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--ink); color: var(--white); padding: 72px 0 28px; margin-top: clamp(40px, 8vw, 100px); }
.site-footer .container { position: relative; z-index: 1; }
/* Footer field lives in the text-free band at the bottom right. */
.site-footer .dotfield.corner-br { width: 42%; height: 120px; }
.footer-grid { display: grid; gap: 36px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer-grid h4 { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: var(--track-label); color: var(--ink-faint); margin-bottom: 16px; }
.footer-grid ul { display: grid; gap: 10px; }
.footer-grid ul a { color: var(--ink-muted); font-size: 15px; transition: color .2s; }
.footer-grid ul a:hover { color: var(--white); }
.footer-grid .about { color: var(--ink-muted); font-size: 15px; margin-top: 20px; max-width: 36ch; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px 40px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--ink-line); color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.footer-bottom a:hover { color: var(--white); }
.footer-bottom .legal { display: flex; gap: 18px; }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a { width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--ink-line); display: grid; place-items: center; color: var(--ink-muted); transition: .2s; }
.socials a:hover { color: var(--neon-ink); background: var(--neon); border-color: var(--neon); }
.socials svg { width: 16px; height: 16px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .06s; }
.reveal[data-delay="2"] { transition-delay: .12s; }
.reveal[data-delay="3"] { transition-delay: .18s; }
.reveal[data-delay="4"] { transition-delay: .24s; }
.reveal[data-delay="5"] { transition-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- 404 ---------- */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 80px 0; }
.notfound .big { font-family: var(--font-mono); font-size: clamp(4rem, 14vw, 9rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--ink); }

/* ---------- Photography (brand image treatments, applied in CSS) ----------
   .photo          Ink mono: greyscale, black mapped to Ink, white to White.
   .photo.on-paper Ink mono on Paper: Ink detail on a Paper ground.
   .photo.dots     Dot screen: the image rebuilt from round dots.
   .hero-photo     Signature treatment: Ink mono photo that breaks up into
                   dots and dissolves towards the text, under the dot field.
   One treatment per image. Text never sits on a photo. ----------------------- */
.photo { position: relative; overflow: hidden; background: var(--ink); border-radius: var(--radius); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.6) brightness(.9); mix-blend-mode: screen; }
.photo.on-paper { background: var(--paper); }
.photo.on-paper img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.2); }
.photo.dots img {
  -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 46%); mask-image: radial-gradient(circle, #000 38%, transparent 46%);
  -webkit-mask-size: 6px 6px; mask-size: 6px 6px;
}
.photo.tile { aspect-ratio: 16 / 9; width: 100%; max-height: 240px; margin: 0 0 20px; }
.hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; pointer-events: none; }
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.8) brightness(.85); mix-blend-mode: screen; opacity: .85;
  -webkit-mask-image: radial-gradient(circle, #000 36%, transparent 44%), linear-gradient(to left, #000 35%, transparent 85%), linear-gradient(to top, transparent 0%, #000 22%, #000 80%, transparent 100%);
  mask-image: radial-gradient(circle, #000 36%, transparent 44%), linear-gradient(to left, #000 35%, transparent 85%), linear-gradient(to top, transparent 0%, #000 22%, #000 80%, transparent 100%);
  -webkit-mask-size: 9px 9px, 100% 100%, 100% 100%; mask-size: 9px 9px, 100% 100%, 100% 100%;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero .hero-photo { bottom: 270px; } /* stops above the proof-point row so text never sits on the photo */
.page-hero .hero-photo { width: 52%; }
@media (max-width: 999px) { .hero-photo { display: none; } }
/* Texture bands: full-width dividers made of generated dots (js/main.js renderTexture), one colour on Ink. */
.texture-band { position: relative; overflow: hidden; height: clamp(180px, 22vw, 300px); margin: 0; border-radius: 0; background: var(--ink); }
.texture-band svg { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; display: block; will-change: transform; }
.texture-band img { filter: none; mix-blend-mode: normal; opacity: 1; }
/* Dissolving edge: an Ink layer whose dots grow from nothing (left) to solid (right),
   so the photo breaks up into round dots and disappears into Ink, as the brand asks. */
.texture-band figcaption { z-index: 2; }
/* Parallax: the image is taller than its frame and js/main.js moves it on scroll. */
.texture-band img, .feature-media img { will-change: transform; }
.parallax img { height: 130%; top: -15%; position: absolute; left: 0; }
.texture-band figcaption { background: var(--ink); color: var(--ink-faint); }

/* ---------- Feature headers (solutions page) ----------
   A full-bleed photo with the section heading on a solid Ink panel that
   overlaps the photo's lower-left corner. Text never sits on the photo. */
.feature { position: relative; padding-top: 0; border-top: 0; }
.feature-media { position: relative; height: clamp(260px, 36vw, 520px); overflow: hidden; background: var(--ink); }
.feature-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature-media figcaption { position: absolute; right: var(--gutter); top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--white); background: rgba(20,22,28,.85); padding: 6px 10px; z-index: 2; }
.feature-media .dotfield { z-index: 1; }
.feature-media .dotfield.corner-br { width: 34%; height: 60%; }
.feature-head {
  position: relative; z-index: 2; width: min(var(--max), 100% - 2 * var(--gutter)); margin: clamp(-90px, -10vw, -150px) auto 0;
}
.feature-panel {
  background: var(--ink); color: var(--white); padding: clamp(28px, 4vw, 48px); max-width: 720px;
  display: grid; gap: 14px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.feature-panel.in { opacity: 1; transform: none; }
.feature-panel .eyebrow { color: var(--neon); }
.feature-panel .h2 { color: var(--white); }
.feature-panel .lead { color: var(--ink-muted); max-width: none; }
.feature-body { padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 8vw, 96px); }
@media (prefers-reduced-motion: reduce) { .feature-panel { opacity: 1; transform: none; transition: none; } .parallax img { height: 100%; top: 0; position: static; } }
.texture-band figcaption { position: absolute; right: var(--gutter); bottom: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper-faint); background: var(--paper); padding: 6px 10px; }

/* ---------- Work / case studies ---------- */
.work-card { display: flex; flex-direction: column; gap: 12px; }
.work-card .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.work-card .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--paper-faint); }
.work-card h3 { font-size: 1.05rem; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.work-card h3 a:hover { color: var(--paper-muted); }
.work-card .client { font-family: var(--font-head); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.work-card .tags { margin-top: 4px; }
.work-card .link-arrow { margin-top: auto; padding-top: 10px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); margin-bottom: 22px; }
.back-link svg { width: 14px; height: 14px; }
.back-link:hover { color: var(--white); }
.case-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 32px; margin: 36px 0 0; max-width: 760px; }
@media (min-width: 760px) { .case-meta { grid-template-columns: repeat(4, 1fr); } }
.case-meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.case-meta dd { margin: 0; color: var(--white); font-size: 15px; }
.case-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .case-grid { grid-template-columns: 220px 1fr; gap: 56px; align-items: start; } .case-side { position: sticky; top: 110px; } }
.case-grid .prose p { font-size: 17px; color: var(--ink); }
.case-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--paper-line); }
.case-next .label { color: var(--paper-faint); }
.case-next .link-arrow { text-transform: none; letter-spacing: 0; font-size: 15px; }

/* ---------- Service pages ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); }
.crumbs a:hover { color: var(--white); }
.deliverables-2 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .deliverables-2 { grid-template-columns: repeat(2, 1fr); } }
.related { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--paper-line); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.related .label { color: var(--paper-faint); }
.related ul { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.related .link-arrow { text-transform: none; letter-spacing: 0; font-size: 15px; }
.card.service h3 a:hover { color: var(--paper-muted); }

/* ---------- The AI scale: edge tab + slide-in panel ---------- */
.scale-tab {
  position: fixed; right: 0; top: 50%; z-index: 95; transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl; display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 12px 18px 14px; border: 0; border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--neon); color: var(--neon-ink); font-family: var(--font-head); font-weight: 500; font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: -10px 0 30px -14px rgba(0,0,0,.5); transition: padding .25s var(--ease), background .2s;
}
.scale-tab:hover { padding-left: 20px; background: #33EBFF; }
.scale-tab-dots { display: inline-flex; flex-direction: row; gap: 5px; transform: rotate(90deg); }
.scale-tab-dots i { display: block; border-radius: 50%; background: var(--neon-ink); }
.scale-tab-dots i:nth-child(1) { width: 4px; height: 4px; } .scale-tab-dots i:nth-child(2) { width: 6px; height: 6px; }
.scale-tab-dots i:nth-child(3) { width: 8px; height: 8px; } .scale-tab-dots i:nth-child(4) { width: 10px; height: 10px; }
.scale-backdrop { position: fixed; inset: 0; z-index: 96; background: rgba(20,22,28,.55); opacity: 0; transition: opacity .35s; }
.scale-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 97; width: min(880px, 100%); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--paper); color: var(--ink); box-shadow: -40px 0 80px -40px rgba(0,0,0,.6);
  transform: translateX(100%); transition: transform .4s var(--ease);
}
#ai-scale.open .scale-backdrop { opacity: 1; }
#ai-scale.open .scale-panel { transform: none; }
html.scale-lock, html.scale-lock body { overflow: hidden; }
.scale-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 4vw, 48px); background: var(--ink); color: var(--white); }
.scale-head .eyebrow { color: var(--neon); }
.scale-close { width: 42px; height: 42px; border: 1px solid var(--ink-line); border-radius: var(--radius); background: transparent; color: var(--white); display: grid; place-items: center; }
.scale-close svg { width: 18px; height: 18px; }
.scale-close:hover { background: var(--neon); color: var(--neon-ink); border-color: var(--neon); }
.scale-body { padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px) 64px; display: grid; gap: 26px; }
.scale-body .h2 { max-width: 20ch; }
.scale-body .lead { max-width: 66ch; }

.scale-panel { overflow-x: hidden; }
.scale-body > * { min-width: 0; }
.scale-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; margin: 8px 0 0; padding: 0; list-style: none; }
.scale-track li { list-style: none; min-width: 0; }
.scale-stop { min-width: 0; }
.scale-name { white-space: normal; overflow-wrap: anywhere; }
.scale-track::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 11px; height: 1px; background: var(--paper-line-strong); }
.scale-stop { position: relative; display: grid; justify-items: center; gap: 10px; width: 100%; padding: 0 6px 6px; border: 0; background: transparent; color: var(--paper-muted); text-align: center; }
.scale-dot { width: var(--d, 10px); height: var(--d, 10px); border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); box-sizing: border-box; margin-top: calc(11px - var(--d, 10px) / 2); transition: background .2s, transform .2s var(--ease); }
.scale-stop:nth-child(1) .scale-dot, .scale-track li:nth-child(1) .scale-dot { --d: 10px; }
.scale-track li:nth-child(2) .scale-dot { --d: 14px; }
.scale-track li:nth-child(3) .scale-dot { --d: 18px; }
.scale-track li:nth-child(4) .scale-dot { --d: 22px; }
.scale-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--track-label); }
.scale-name { font-family: var(--font-head); font-weight: 500; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.scale-stop:hover .scale-dot, .scale-stop.on .scale-dot { background: var(--neon); border-color: var(--neon); transform: scale(1.15); }
.scale-stop.past .scale-dot { background: var(--ink); }
.scale-stop.on .scale-name { color: var(--ink); }
.scale-stop.on::after { content: "You are here"; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neon-ink); background: var(--neon); padding: 3px 7px; }
.scale-markers { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-faint); padding: 0 4px; }
.scale-markers span:last-child { color: var(--ink); }

.scale-stages { display: grid; gap: 14px; }
.scale-stage { background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); display: grid; gap: 20px; transition: border-color .25s, box-shadow .25s; }
.scale-stage header { display: grid; gap: 8px; }
.scale-stage h3 { font-size: 1.15rem; }
.scale-stage header p { color: var(--paper-muted); max-width: 70ch; }
.scale-stage .label { color: var(--paper-faint); }
.scale-cols { display: grid; gap: 22px; }
@media (min-width: 720px) { .scale-cols { grid-template-columns: 1fr 1fr; gap: 32px; } }
.scale-cols .checklist { margin-top: 10px; gap: 10px; }
.scale-cols .checklist li { font-size: 14.5px; }
.scale-next { display: grid; gap: 8px; align-content: start; padding: 18px; background: var(--paper); border-radius: var(--radius); }
.scale-next p { font-size: 14.5px; color: var(--paper-muted); }
.scale-next p strong { color: var(--ink); font-weight: 500; }
.scale-next .label + p { margin-bottom: 8px; }
.scale-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; }
.scale-links .link-arrow { font-size: 12px; }
/* Before a pick, all four stages show in summary; after a pick, the chosen one expands and the rest shrink. */
.scale-stages:not(.picked) .scale-cols { display: none; }
.scale-stages.picked .scale-stage:not(.show) { opacity: .55; }
.scale-stages.picked .scale-stage:not(.show) .scale-cols { display: none; }
.scale-stages.picked .scale-stage.show { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(0,229,255,.25); }
.scale-stage:nth-child(4) { background: var(--ink); color: var(--white); border-color: var(--ink); }
.scale-stage:nth-child(4) header p, .scale-stage:nth-child(4) .checklist li { color: var(--ink-muted); }
.scale-stage:nth-child(4) .label { color: var(--ink-faint); }
.scale-stage:nth-child(4) .scale-next { background: var(--ink-2); }
.scale-stage:nth-child(4) .scale-next p strong, .scale-stage:nth-child(4) .link-arrow { color: var(--white); }
.scale-stage:nth-child(4) .link-arrow:hover { border-color: var(--white); }

.scale-cta { display: grid; gap: 18px; padding-top: 10px; border-top: 1px solid var(--paper-line); justify-items: start; }
.scale-cta .quote { font-size: clamp(1.15rem, 2vw, 1.5rem); max-width: 34ch; }
.scale-cta .muted { max-width: 66ch; }
@media (max-width: 640px) {
  .scale-tab { font-size: 11px; padding: 14px 10px 14px 12px; gap: 10px; }
  .scale-track::before { left: 12.5%; right: 12.5%; }
  .scale-name { font-size: 10.5px; letter-spacing: 0.06em; }
  .scale-stop.on::after { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { .scale-panel, .scale-backdrop, .scale-tab, .scale-dot { transition: none; } }
@media print { #ai-scale { display: none; } }

/* ---------- Studios: tiles on the parent site, chrome on the micro sites ---------- */
.studio-tiles { display: grid; gap: 16px; }
@media (min-width: 700px) { .studio-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .studio-tiles { grid-template-columns: repeat(4, 1fr); } }
.studio-tile {
  --c: var(--neon); --ci: var(--neon-ink);
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; min-height: 380px; padding: 28px; border-radius: var(--radius); overflow: hidden;
  background: var(--ink); color: var(--white); border: 1px solid var(--ink); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.studio-tile:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(0,0,0,.5); }
.studio-tile .dotfield { position: absolute; right: 0; top: 0; width: 70%; height: 55%; opacity: .9; }
.studio-tile > * { position: relative; z-index: 1; }
.studio-tile .tile-head { display: grid; gap: 6px; }
.studio-tile .tile-name { font-family: var(--font-head); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); display: inline-flex; align-items: center; gap: 10px; }
.studio-tile .tile-name::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.studio-tile .tile-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.studio-tile h3 { font-size: 1.25rem; color: var(--white); }
.studio-tile p { color: var(--ink-muted); font-size: 15px; }
.studio-tile ul { display: grid; gap: 6px; margin-top: 4px; }
.studio-tile ul li { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding-left: 16px; position: relative; }
.studio-tile ul li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.studio-tile .tile-go { display: inline-flex; align-items: center; gap: 10px; align-self: end; justify-self: start; padding: 12px 18px; border-radius: var(--radius); background: var(--c); color: var(--ci); font-family: var(--font-head); font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.studio-tile .tile-go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.studio-tile:hover .tile-go svg { transform: translateX(3px); }
.studio-tile.ai { --c: #3FBFD1; --ci: #14161C; }
.studio-tile.code { --c: #4F6FD9; --ci: #FFFFFF; }
.studio-tile.web { --c: #A9CF4A; --ci: #14161C; }
.studio-tile.design { --c: #8E72D6; --ci: #FFFFFF; }
.studio-link { display: inline-flex; align-items: center; gap: 10px; }
.studio-link i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
/* Studio logo lockup: the studio word handwritten in the studio colour, STUDIO set in the wordmark face beneath. */
.studio-logo { --c: var(--neon); display: inline-grid; justify-items: start; gap: 2px; line-height: 1; color: inherit; }
.studio-logo .hand { font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c); white-space: nowrap; padding-left: 1px; }
.studio-logo .word { font-family: var(--font-head); font-weight: 500; font-size: 19px; letter-spacing: 0.18em; text-transform: uppercase; color: currentColor; }
.studio-logo .hand { line-height: 1; }
.studio-logo.lg .hand { font-size: 12px; }
.studio-logo.lg .word { font-size: 26px; }
.studio-logo.ai { --c: #3FBFD1; } .studio-logo.code { --c: #4F6FD9; } .studio-logo.web { --c: #A9CF4A; } .studio-logo.design { --c: #8E72D6; }
/* Studio site header: studio logo first, small 738 Studios wordmark beside it linking to the parent. */
.nav-wrap .studio-logo { margin-right: auto; }
.brand.parent-mark { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--ink-line); opacity: .75; transition: opacity .2s; }
.brand.parent-mark:hover { opacity: 1; }
.brand.parent-mark .logo-num { font-size: 18px; }
.brand.parent-mark .logo-word { font-size: 10px; letter-spacing: 0.3em; }
.nav-wrap .brand.parent-mark { margin-right: auto; }
@media (max-width: 860px) { .brand.parent-mark { margin-left: 12px; padding-left: 12px; } }
@media (max-width: 420px) { .brand.parent-mark { display: none; } }
.footer-grid .studio-logo { margin-bottom: 10px; }
.footer-grid .studio-logo + .brand { display: inline-flex; margin-top: 2px; opacity: .75; }
/* Tiles use the lockup instead of a plain name. */
.studio-tile .studio-logo .word { color: var(--white); }
.studio-hero .dotfield.corner-tr { width: min(50%, 620px); height: 85%; }
.mega-col .mega-head.studio-head { display: inline-grid; white-space: normal; min-height: 0; color: var(--white); }
.mega-col .mega-head.studio-head .word { font-size: 16px; }
.mega-col .mega-head.studio-head:hover .word { color: var(--c); }
.mega-inner.studios-mega { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.related small { font-size: 12px; color: var(--paper-faint); margin-left: 4px; }

/* ---------- Process journey (service pages) ----------
   A vertical timeline. Phone: spine on the left, icon on the spine, card to the right.
   Desktop: spine down the middle, cards alternate sides, icons sit on the spine.   */
.journey { position: relative; overflow: hidden; background: var(--paper); }
.journey .dotfield.corner-tr { width: 32%; height: 40%; opacity: .12; }
.journey .container { position: relative; z-index: 1; }
.journey-track { position: relative; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; --spine: 28px; }
.journey-track::before {
  content: ""; position: absolute; top: 28px; bottom: 28px; left: calc(var(--spine) - 1px); width: 2px;
  background: repeating-linear-gradient(to bottom, var(--ink) 0 3px, transparent 3px 9px); opacity: .35;
}
.journey-step { position: relative; display: grid; grid-template-columns: calc(var(--spine) * 2) 1fr; gap: 18px; align-items: start; list-style: none; }
.journey-icon {
  position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center;
  box-shadow: 0 0 0 6px var(--paper); transition: transform .35s var(--ease), background .25s, color .25s;
}
.journey-icon svg { width: 24px; height: 24px; }
.journey-num { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--neon); color: var(--neon-ink); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .04em; display: grid; place-items: center; }
.journey-step:hover .journey-icon { transform: scale(1.08); background: var(--neon); color: var(--neon-ink); }
.journey-card { background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: clamp(20px, 3vw, 28px); display: grid; gap: 10px; transition: border-color .25s, transform .35s var(--ease); }
.journey-step:hover .journey-card { border-color: var(--paper-line-strong); transform: translateY(-2px); }
.journey-card .label { color: var(--paper-faint); }
.journey-card h3 { font-size: 1.05rem; }
.journey-card p { color: var(--paper-muted); font-size: 15px; }
.journey-get { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--paper-line); color: var(--ink) !important; font-weight: 500; }
.journey-get span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--track-label); text-transform: uppercase; background: var(--neon); color: var(--neon-ink); padding: 4px 8px; font-weight: 500; }
.journey-step:last-child .journey-icon { background: var(--neon); color: var(--neon-ink); }
.journey-step:last-child .journey-num { background: var(--ink); color: var(--white); }
@media (min-width: 900px) {
  .journey-track { gap: 8px; }
  .journey-track::before { left: 50%; margin-left: -1px; }
  .journey-step { grid-template-columns: 1fr 56px 1fr; gap: 0 36px; }
  .journey-step .journey-icon { grid-column: 2; grid-row: 1; margin-top: 8px; }
  .journey-step:nth-child(odd) .journey-card { grid-column: 1; grid-row: 1; }
  .journey-step:nth-child(even) .journey-card { grid-column: 3; grid-row: 1; }
  .journey-step:nth-child(odd) .journey-card::after, .journey-step:nth-child(even) .journey-card::after {
    content: ""; position: absolute; top: 34px; width: 36px; height: 1px; background: var(--paper-line-strong);
  }
  .journey-step:nth-child(odd) .journey-card::after { right: calc(50% + 28px); }
  .journey-step:nth-child(even) .journey-card::after { left: calc(50% + 28px); }
  .journey-card { position: static; }
  .journey-step { position: relative; }
}
.checklist-2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .checklist-2 { grid-template-columns: 1fr 1fr; gap: 14px 40px; } }
@media (prefers-reduced-motion: reduce) { .journey-icon, .journey-card { transition: none; } }

/* ---------- Policies page ---------- */
.policy-index { display: grid; gap: 1px; background: var(--paper-line); border: 1px solid var(--paper-line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 640px) { .policy-index { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .policy-index { grid-template-columns: repeat(3, 1fr); } }
.policy-index a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--white); font-family: var(--font-head); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; transition: background .2s; }
.policy-index a:hover { background: var(--paper); }
.policy-index .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--paper-faint); flex: none; }
.policy-index::after { content: ""; background: var(--white); } /* fills the spare cell in the last row */
.policy-note { margin-top: 20px; font-size: 14px; color: var(--paper-muted); }
.policy-note a { text-decoration: underline; }
.policy { padding: clamp(48px, 7vw, 80px) 0; border-top: 1px solid var(--paper-line); scroll-margin-top: 110px; }
.policy:nth-of-type(even) { background: var(--white); }
.policy-grid { display: grid; gap: 28px; }
@media (min-width: 960px) { .policy-grid { grid-template-columns: 1fr 1.8fr; gap: 64px; align-items: start; } .policy-head { position: sticky; top: 110px; } }
.policy-head .h2 { margin-top: 14px; font-size: clamp(1.25rem, 2.2vw, 1.7rem); }
.policy-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 22px 0 0; font-size: 13px; }
.policy-meta dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-faint); padding-top: 2px; }
.policy-meta dd { margin: 0; color: var(--paper-muted); }
.policy .prose p:first-child { color: var(--ink); font-size: 17px; }
.policy .prose li strong { color: var(--ink); font-weight: 500; }

/* ---------- Legal pages ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1rem; margin: 40px 0 12px; }
.prose p, .prose li { color: var(--paper-muted); margin-bottom: 14px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); }
.prose a { text-decoration: underline; }


/* ==========================================================================
   v2 notes: colour, studio header, overview panel, contact page, edge tabs
   ========================================================================== */

/* ---------- The blend: the four studio colours together ---------- */
:root { --blend: linear-gradient(90deg, #A9CF4A 0%, #3FBFD1 34%, #4F6FD9 67%, #8E72D6 100%); }
/* "Studios" in the wordmark carries the four studio colours. */
.brand .logo-word { background: var(--blend); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
/* Parent site: small, deliberate touches of colour on an otherwise Ink and Paper page. */
:root[data-site="parent"] .hero .h1 em, :root[data-site="parent"] .page-hero .h1 em { background: var(--blend); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
:root[data-site="parent"] .eyebrow::before, :root[data-site="parent"] .on-ink .eyebrow::before {
  width: 5px; height: 5px; background: #A9CF4A; box-shadow: 9px 0 0 #3FBFD1, 18px 0 0 #4F6FD9, 27px 0 0 #8E72D6; margin-right: 27px;
}
:root[data-site="parent"] .checklist li:nth-child(4n+1)::before, :root[data-site="parent"] .value:nth-child(4n+1) .glyph::before, :root[data-site="parent"] .timeline li:nth-child(4n+1)::before, :root[data-site="parent"] .hero-meta > div:nth-child(4n+1) strong::before { background: #4F6FD9; }
:root[data-site="parent"] .checklist li:nth-child(4n+2)::before, :root[data-site="parent"] .value:nth-child(4n+2) .glyph::before, :root[data-site="parent"] .timeline li:nth-child(4n+2)::before, :root[data-site="parent"] .hero-meta > div:nth-child(4n+2) strong::before { background: #3FBFD1; }
:root[data-site="parent"] .checklist li:nth-child(4n+3)::before, :root[data-site="parent"] .value:nth-child(4n+3) .glyph::before, :root[data-site="parent"] .timeline li:nth-child(4n+3)::before, :root[data-site="parent"] .hero-meta > div:nth-child(4n+3) strong::before { background: #A9CF4A; }
:root[data-site="parent"] .checklist li:nth-child(4n+4)::before, :root[data-site="parent"] .value:nth-child(4n+4) .glyph::before, :root[data-site="parent"] .timeline li:nth-child(4n+4)::before, :root[data-site="parent"] .hero-meta > div:nth-child(4n+4) strong::before { background: #8E72D6; }
.hero-meta strong { display: flex; align-items: center; gap: 8px; }
:root[data-site="parent"] .hero-meta strong::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
:root[data-site="parent"] .pill.soon::before { background: #3FBFD1; }

/* ---------- Studio header: logo and parent wordmark side by side, no divider ---------- */
.brand-group { display: flex; align-items: center; gap: 22px; margin-right: auto; }
.nav-wrap .studio-logo, .nav-wrap .brand.parent-mark { margin-right: 0; }
.brand.parent-mark { margin-left: 0; padding-left: 0; border-left: 0; }
.footer-grid .brand.parent-mark { display: flex; margin-top: 14px; }
@media (max-width: 860px) { .brand.parent-mark { margin-left: 0; padding-left: 0; } .brand-group { gap: 14px; } }

/* ---------- Service overview: lead statement + "at a glance" panel ---------- */
.overview-grid { display: grid; gap: 32px; align-items: start; }
@media (min-width: 960px) { .overview-grid { grid-template-columns: 1.5fr 1fr; gap: 64px; } }
.overview-lead { margin-top: 18px; font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.45; color: var(--ink); max-width: 34em; }
.overview-copy p + p { margin-top: 18px; color: var(--paper-muted); max-width: 62ch; }
.glance { position: relative; overflow: hidden; background: var(--ink); color: var(--white); border-radius: var(--radius); padding: 28px; display: grid; gap: 16px; }
.glance > * { position: relative; z-index: 1; }
.glance .dotfield { position: absolute; z-index: 0; top: 0; right: 0; width: 46%; height: 34%; }
.glance .label { color: var(--neon); }
.glance dl { margin: 0; display: grid; }
.glance dl div { padding: 14px 0; border-top: 1px solid var(--ink-line); }
.glance dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.glance dd { margin: 0; font-size: 16px; line-height: 1.4; color: var(--white); }
.glance .btn { justify-self: start; margin-top: 4px; }

/* ---------- Edge tab as a link (Code, Web and Design studios) ---------- */
a.scale-tab.edge-link { text-decoration: none; }

/* ---------- Contact page ---------- */
.contact-panel { position: relative; overflow: hidden; background: var(--ink); color: var(--white); border-radius: var(--radius); padding: clamp(24px, 4vw, 40px); display: grid; gap: 26px; align-content: start; }
.contact-panel > * { position: relative; z-index: 1; }
.contact-panel .dotfield { position: absolute; z-index: 0; right: 0; bottom: 0; width: 75%; height: 40%; }
.contact-panel .eyebrow { color: var(--ink-muted); }
.contact-email { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.15rem, 2.1vw, 1.55rem); color: var(--white); overflow-wrap: anywhere; border-bottom: 1px solid transparent; justify-self: start; }
.contact-email:hover { border-color: var(--white); }
.contact-panel p { color: var(--ink-muted); }
.contact-panel h2 { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: var(--track-label); color: var(--ink-faint); margin-bottom: 14px; }
.next-steps { counter-reset: n; display: grid; gap: 16px; margin: 0; padding: 0 0 clamp(60px, 10vw, 110px); list-style: none; }
.next-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; color: var(--white); }
.next-steps li::before { counter-increment: n; content: counter(n); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink); background: #A9CF4A; }
.next-steps li:nth-child(2)::before { background: #3FBFD1; }
.next-steps li:nth-child(3)::before { background: #4F6FD9; color: var(--white); }
.next-steps li:nth-child(4)::before { background: #8E72D6; color: var(--white); }
.studio-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.studio-chip { --c: var(--ink); --ci: #FFFFFF; display: inline-flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid var(--paper-line-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-family: var(--font-head); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; transition: background .2s, color .2s, border-color .2s; }
.studio-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.studio-chip:hover { border-color: var(--c); }
.studio-chip.active { background: var(--c); border-color: var(--c); color: var(--ci); }
.studio-chip.active::before { background: currentColor; }
.studio-chip.code { --c: #4F6FD9; } .studio-chip.ai { --c: #3FBFD1; --ci: #14161C; } .studio-chip.web { --c: #A9CF4A; --ci: #14161C; } .studio-chip.design { --c: #8E72D6; }
.field .hint { font-size: 13px; color: var(--paper-faint); }

/* ---------- Tidy-ups ---------- */
:root[data-site="parent"] .page-hero .h1 em { font-style: normal; }
.studio-tile .dotfield { width: 58%; height: 30%; }
.studio-tile h3 + p { margin-top: 10px; }
:root[data-studio="web"] .scale-tab:hover { background: #B9DA62; }
:root[data-studio="design"] .scale-tab:hover { background: #A08ADF; }

/* ---------- Studio Services mega menu ---------- */
.mega-inner.services-mega { grid-template-columns: 1.1fr repeat(var(--n, 3), minmax(0, 1fr)); gap: 28px; }
.services-mega .mega-intro .label { color: var(--neon); }
.services-mega .mega-intro p { margin-top: 10px; font-family: var(--font-head); font-size: 1.1rem; line-height: 1.3; color: var(--white); max-width: 16em; }
.services-mega .mega-head { white-space: normal; line-height: 1.4; }
.services-mega .mega-desc { margin-bottom: 0; }
@media (max-width: 860px) {
  .mega-inner.services-mega { grid-template-columns: 1fr; gap: 14px; }
  .services-mega .mega-intro { display: none; }
}
@media (min-width: 861px) and (max-width: 1120px) { .site-nav { gap: 22px; } }

/* ---------- Section dividers: a quiet ribbon of fine dots in the page's own colour ---------- */
.texture-band { height: clamp(84px, 10vw, 132px); background: var(--paper); }
.texture-band svg { top: 0; height: 100%; }
.texture-band figcaption { display: none; }

/* ---------- Space above the footer ----------
   The closing section used to stack its own bottom padding on top of a footer margin.
   Now the space below the last block matches the space above it. */
.site-footer { margin-top: 0; }
main > .section.tight:last-child { padding-bottom: clamp(48px, 6vw, 80px); }

/* ---------- Home headline: two sentences, one line each ----------
   From tablet width up each sentence stays on its own single line. On desktop the type is sized so the
   longer line stops short of the corner dot field, which is narrowed to make room. */
.hero .h1.h1-lines { max-width: none; }
.h1-lines > span, .h1-lines > em { display: block; }
@media (min-width: 720px) { .h1-lines > span, .h1-lines > em { white-space: nowrap; width: max-content; } }
@media (min-width: 1000px) {
  .hero .h1.h1-lines { font-size: clamp(2rem, 3.4vw, 3rem); }
  .hero-home > .dotfield.corner-tr { width: min(32%, 540px); }
}

/* ---------- Client logos (About page) ----------
   Shown in grey so nineteen different brand colours sit quietly together; each returns to colour on hover.
   Rows are centred, so an incomplete last row still looks deliberate. */
.client-logos { display: flex; flex-wrap: wrap; justify-content: center; margin: 40px 0 0; padding: 24px 0 0; list-style: none; border-top: 1px solid var(--paper-line); }
.client-logos li { flex: 0 0 20%; display: grid; place-items: center; min-height: 108px; padding: 18px 24px; }
.client-logos img { width: auto; height: auto; max-width: min(100%, 150px); max-height: 54px; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1); opacity: .7; transition: filter .25s, opacity .25s; }
.client-logos img.tall { max-width: min(100%, 112px); max-height: 72px; }
.client-logos li:hover img { filter: none; opacity: 1; }
@media (max-width: 999px) { .client-logos li { flex-basis: 25%; } }
@media (max-width: 640px) {
  .client-logos li { flex-basis: 33.333%; min-height: 84px; padding: 12px 10px; }
  .client-logos img { max-height: 40px; }
  .client-logos img.tall { max-height: 54px; }
}
/* The attribution line under the logo wall: small, set to the right edge, clear of the logos. */
.client-logos + .clients-note { margin: 44px 0 0 auto; max-width: none; text-align: right; font-size: 9.5px; letter-spacing: 0.1em; }
@media (max-width: 640px) { .client-logos + .clients-note { margin-top: 28px; } }