/* ============================================================
   THE GRAFX — The Living Pen
   Purple identity, pen-shaped T, nine chapters.
   Three authored tiers: desktop pins, tablet snaps, phone scrolls.
   ============================================================ */

:root {
  --gx-ink: #0F1137;
  --gx-ink-2: #201B46;
  --gx-plum: #503970;
  --gx-plum-2: #724E8E;
  --gx-purple: #8F60A8;
  --gx-purple-2: #976BAE;
  --gx-lilac: #AD8BBF;
  --gx-lilac-2: #D1BEDB;
  --gx-paper: #F4F1F6;
  --gx-pad: clamp(18px, 4vw, 52px);
  --gx-max: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* scroll-behavior intentionally omitted: Lenis (desktop) and native touch
   scrolling (mobile) own scroll easing. CSS smooth-scroll on top of either
   double-smooths every wheel/keyboard/scrollbar jump and reads as lag. */
body.gx {
  margin: 0;
  background: var(--gx-ink);
  color: var(--gx-paper);
  font-family: Manrope, system-ui, -apple-system, sans-serif;
  font-size: clamp(14.5px, 1vw, 16.5px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--gx-purple); color: #fff; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
a { color: var(--gx-lilac-2); text-decoration: none; transition: color .2s ease; }
a:hover { color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gx-lilac-2); outline-offset: 3px;
}
.gx-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.gx-skip { position: absolute; left: -9999px; }
.gx-skip:focus { left: 12px; top: 12px; z-index: 9999; padding: 10px 14px; background: var(--gx-purple); color: #fff; }

.gx-display { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: 700; letter-spacing: -.028em; line-height: 1.04; text-wrap: pretty; }
.gx-mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; }
.gx-accent { color: var(--gx-lilac); }
.gx-wrap { max-width: var(--gx-max); margin: 0 auto; }
.gx-ch { position: relative; isolation: isolate; }
.gx-h2 { font-size: clamp(24px, 4vw, 62px); max-width: 22ch; }

.gx-eyebrow { display: flex; align-items: center; gap: 9px; font-size: clamp(9px, .72vw, 10px); color: #AD8BBF; }
.gx-eyebrow-dark { color: #503970; }
.gx-rule { width: 20px; height: 1px; background: var(--gx-lilac); display: block; flex: 0 0 auto; }
.gx-rule-dark { background: var(--ink-accent, #724E8E); }

/* ---------- header + menu ---------- */
.gx-header {
  position: fixed; inset: 0 0 auto; z-index: 800;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gx-pad);
  color: var(--gx-paper);
}
.gx-logo { flex: 0 0 auto; }
.gx-logo svg { width: clamp(96px, 10vw, 142px); height: auto; }
.gx-nav { display: none; align-items: center; gap: clamp(14px, 2vw, 30px); }
.gx-nav-list { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.gx-nav-list a { font-size: 10px; }
.gx-ig { display: inline-flex; align-items: center; gap: 8px; }
.gx-ig-mark { width: 15px; height: 15px; color: currentColor; }
.gx-menu-open { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-size: 10px; }
.gx-burger { display: flex; flex-direction: column; gap: 3.5px; }
.gx-burger span { height: 1.4px; background: var(--gx-paper); display: block; }
.gx-burger span:first-child { width: 18px; }
.gx-burger span:last-child { width: 11px; }

.gx-menu { position: fixed; inset: 0; z-index: 850; background: var(--gx-ink-2); clip-path: inset(0 0 100% 0); pointer-events: none; transition: clip-path .6s cubic-bezier(.7,0,.2,1); }
.gx-menu[data-open] { clip-path: inset(0 0 0 0); pointer-events: auto; }
.gx-menu-close { position: absolute; top: 16px; right: var(--gx-pad); z-index: 3; min-height: 44px; cursor: pointer; font-size: 10px; }
.gx-menu-inner { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 84px var(--gx-pad) 34px; overflow-y: auto; }
.gx-menu-list a { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: 800; font-size: clamp(30px, 7vw, 84px); letter-spacing: -.03em; line-height: 1.06; color: var(--gx-paper); }
.gx-menu-meta { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; margin-top: 32px; }

/* ---------- chapter 01 hero ---------- */
.gx-hero-pin { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.gx-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.gx-sculpt { position: absolute; left: 50%; top: 50%; width: min(40vmin, 340px); transform: translate3d(-50%,-50%,0); z-index: 2; pointer-events: none; }
.gx-sculpt svg { width: 100%; height: auto; overflow: visible; }
.gx-pen-press {
  position: absolute; left: 50%; top: 50%; width: min(30vmin, 250px); height: min(38vmin, 320px);
  transform: translate3d(-50%,-50%,0); z-index: 4; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
}
.gx-pen-hint {
  opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease;
  font-size: 8.5px; color: rgba(209,190,219,.92); padding: 5px 10px;
  border: 1px solid rgba(173,139,191,.5); background: #503970; pointer-events: none;
}
.gx-pen-press:hover .gx-pen-hint, .gx-pen-press:focus-visible .gx-pen-hint { opacity: 1; transform: translateY(0); }
.gx-ink-wipe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 30; pointer-events: none; opacity: 0; }

.gx-hero-copy {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px var(--gx-pad) 62px; pointer-events: none;
}
.gx-hero-h1 { max-width: 100%; }
.gx-hl { display: block; overflow: hidden; }
.gx-hl > span {
  display: block; font-weight: 800; color: var(--gx-paper);
  font-size: max(24px, min(104px, 6.6vw, calc((100vw - 2 * var(--gx-pad)) / 7.6)));
  line-height: 1.02; white-space: nowrap;
}
.gx-hl-soft > span { font-weight: 500; color: var(--gx-lilac-2); }
.gx-hero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: clamp(14px, 2.6vh, 34px); }
.gx-hero-sub { max-width: 48ch; font-size: clamp(13.5px, 1vw, 16px); color: #D1BEDB; }
.gx-actions { display: flex; flex-wrap: wrap; gap: 10px; pointer-events: auto; }
.gx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 22px; font-size: 10px; cursor: pointer; }
.gx-btn-solid { background: var(--gx-purple); color: #fff; }
.gx-btn-solid:hover { background: var(--gx-purple-2); color: #fff; }
.gx-btn-ghost { border: 1px solid rgba(209,190,219,.25); color: var(--gx-paper); }

.gx-frame { position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none; clip-path: url(#gxTclip); }
.gx-frame-media { position: absolute; inset: 0; background: linear-gradient(140deg, #0F1137 0%, #503970 48%, #AD8BBF 100%); }
.gx-frame-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--gx-fit, cover); object-position: var(--gx-focal-d, 50% 50%); }
.gx-frame-fallback { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; font-size: 9px; color: #D1BEDB; padding: 0 12%; }
.gx-frame-cap {
  position: absolute; inset: auto 0 0; z-index: 6; opacity: 0; pointer-events: none;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px;
  padding: 0 var(--gx-pad) clamp(22px, 5vh, 52px);
}
.gx-frame-title { font-weight: 800; font-size: clamp(20px, 3.4vw, 54px); }
.gx-frame-note { font-size: 9px; color: #D1BEDB; }
.gx-cue { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 6; font-size: 8.5px; color: #AD8BBF; white-space: nowrap; }

/* ---------- chapter 02 manifesto ---------- */
.gx-manifesto { background: var(--gx-paper); color: var(--gx-ink); padding: clamp(64px, 13vh, 150px) var(--gx-pad); }
.gx-manifesto-h { font-weight: 700; font-size: clamp(24px, 4.4vw, 74px); line-height: 1.08; max-width: 24ch; margin-top: clamp(20px, 4vh, 46px); }
.gx-manifesto-cols { margin-top: clamp(28px, 6vh, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(20px, 3.4vw, 54px); }
.gx-mf-col { display: flex; flex-direction: column; gap: 9px; }
.gx-mf-col .gx-accent { color: var(--ink-accent, #724E8E); font-size: 9.5px; }
.gx-mf-col p { font-size: 14.5px; color: #201B46; }

/* ---------- chapter 03 the work canvas ---------- */
.gx-work { background: var(--gx-ink); }
.gx-work-head { position: relative; z-index: 2; max-width: var(--gx-max); margin: 0 auto; padding: clamp(54px, 10vh, 110px) var(--gx-pad) 0; display: flex; flex-direction: column; gap: 16px; }
.gx-work-pin { position: relative; overflow: hidden; }
.gx-work-wash { position: absolute; inset: 0; z-index: 0; background: radial-gradient(64% 58% at 24% 50%, rgba(143,96,168,.16), rgba(15,17,55,0) 70%); }
.gx-work-viewport { position: relative; z-index: 1; height: 100%; }
.gx-work-track { display: flex; align-items: center; height: 100%; gap: clamp(20px, 3vw, 64px); padding: 40px clamp(28px, 7vw, 130px) 84px; }
.gx-work-track::-webkit-scrollbar { display: none; }

.gx-stage { flex: 0 0 auto; display: flex; flex-direction: column; }
.gx-stage-link { display: block; }
/* Media boxes reserve their ratio before the image loads: no layout shift,
   no image forced into unrelated dimensions. */
.gx-stage-media { position: relative; overflow: hidden; width: 100%; background: linear-gradient(140deg, #201B46, #503970 55%, #AD8BBF); }
.gx-stage-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--gx-fit, cover); object-position: var(--gx-focal-d, 50% 50%); }
.gx-stage-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #D1BEDB; }
.gx-stage-info { display: flex; flex-direction: column; gap: 7px; padding-top: 14px; }
.gx-stage-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 9px; color: #AD8BBF; }
.gx-stage-title { font-weight: 700; font-size: clamp(18px, 2vw, 32px); }
.gx-stage-copy { max-width: 44ch; font-size: 13.5px; line-height: 1.55; color: #D1BEDB; }
.gx-stage-client { font-size: 9px; color: #AD8BBF; }
.gx-stage-cta { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 9.5px; color: var(--gx-lilac-2); }

.gx-work-hud { position: absolute; inset: auto var(--gx-pad) clamp(14px, 3vh, 30px); z-index: 4; display: flex; align-items: center; gap: 14px; pointer-events: none; }
.gx-work-hud > .gx-mono { font-size: 10px; color: var(--gx-paper); flex: 0 0 auto; }
.gx-work-rail { position: relative; flex: 1; height: 1px; background: rgba(209,190,219,.25); display: block; }
.gx-work-rail > span { position: absolute; inset: 0; background: var(--gx-lilac-2); transform: scaleX(0); transform-origin: left center; display: block; }
.gx-work-nav { display: none; gap: 8px; pointer-events: auto; }
.gx-work-nav button { min-width: 46px; min-height: 46px; border: 1px solid rgba(209,190,219,.25); cursor: pointer; font-size: 12px; }
.gx-work-all { padding: 0 var(--gx-pad) clamp(40px, 8vh, 90px); max-width: var(--gx-max); margin: 0 auto; }

/* ---------- chapter 04 services ---------- */
.gx-services { background: var(--gx-ink-2); }
.gx-svc-pin { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding: clamp(64px, 12vh, 140px) 0; }
.gx-svc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .8; }
.gx-svc-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(24px, 5vw, 70px); padding: 0 var(--gx-pad); width: 100%; }
.gx-svc-stage { display: flex; flex-direction: column; gap: 12px; max-width: 44ch; }
.gx-svc-name { font-weight: 800; font-size: clamp(22px, 3.4vw, 52px); }
.gx-svc-copy { font-size: 14px; color: #D1BEDB; min-height: 4.6em; }
.gx-svc-index { display: flex; flex-wrap: wrap; gap: 8px; }
.gx-svc-index button { min-height: 44px; padding: 10px 14px; border: 1px solid rgba(209,190,219,.25); cursor: pointer; font-size: 9px; color: #AD8BBF; }
.gx-svc-index button.is-active { border-color: var(--gx-lilac-2); color: var(--gx-paper); }

/* ---------- chapter 05 capabilities ---------- */
.gx-caps { padding: clamp(64px, 12vh, 150px) var(--gx-pad); }
.gx-cap-grid { margin-top: clamp(20px, 4vh, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1px; background: rgba(209,190,219,.25); }
.gx-cap { background: var(--gx-ink); }
.gx-cap a { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 3vw, 34px); min-height: 120px; }
.gx-cap-name { font-size: clamp(17px, 1.7vw, 26px); color: var(--gx-paper); }
.gx-cap-count { font-size: 9px; color: #AD8BBF; }

/* ---------- chapter 06 process ---------- */
.gx-process { background: var(--gx-paper); color: var(--gx-ink); padding: clamp(64px, 12vh, 150px) var(--gx-pad); }
.gx-steps { margin-top: clamp(20px, 4vh, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(20px, 3vw, 46px); }
.gx-step { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(15,17,55,.18); }
.gx-step-n { font-size: 9px; color: var(--ink-accent, #724E8E); }
.gx-step-t { font-size: clamp(18px, 2vw, 28px); }
.gx-step p { font-size: 14.5px; color: #201B46; }

/* ---------- chapter 07 clients ---------- */
.gx-clients { padding: clamp(56px, 11vh, 130px) var(--gx-pad); }
.gx-logo-wall { margin-top: clamp(20px, 4vh, 46px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 1px; background: rgba(209,190,219,.25); }
.gx-logo-cell { position: relative; background: var(--gx-ink); aspect-ratio: 5 / 3; display: flex; align-items: center; justify-content: center; padding: 18px; }
.gx-logo-cell img { max-height: 100%; width: auto; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: .72; transition: filter .3s ease, opacity .3s ease; }
.gx-logo-cell:hover img { filter: none; opacity: 1; }

/* ---------- chapter 08 insights ---------- */
.gx-insights { background: var(--gx-ink-2); padding: clamp(58px, 11vh, 136px) var(--gx-pad); }
.gx-insights-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px; }
.gx-cards { margin-top: clamp(18px, 3.4vh, 40px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 2.2vw, 28px); }
.gx-card a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: clamp(16px, 2vw, 26px); background: #503970; border: 1px solid rgba(209,190,219,.25); transition: border-color .25s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.gx-card a:hover { border-color: rgba(209,190,219,.5); transform: translateY(-4px); }
.gx-card-date { font-size: 9px; color: #AD8BBF; }
.gx-card-title { font-size: clamp(17px, 1.7vw, 25px); color: var(--gx-paper); }
.gx-card-excerpt { font-size: 13.5px; color: #D1BEDB; }

/* ---------- chapter 09 contact ---------- */
.gx-contact { position: relative; overflow: hidden; padding: clamp(70px, 12vh, 130px) var(--gx-pad) clamp(50px, 8vh, 90px); }
.gx-cta-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.gx-contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 70px); }
.gx-contact-intro { display: flex; flex-direction: column; gap: 16px; }
.gx-contact-details { display: flex; flex-direction: column; gap: 10px; font-size: 11px; }
/* Renamed from the collided .gx-field (shared with the hero's absolute-positioned
   canvas layer, which was making every form field position:absolute;inset:0 —
   the source of the overlapping fields/labels/buttons). */
.gx-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; align-items: start; }
.gx-cfield { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.gx-cfield-wide { grid-column: 1 / -1; }
.gx-cfield label { font-size: 9px; color: #AD8BBF; letter-spacing: .04em; }
.gx-cfield input, .gx-cfield select, .gx-cfield textarea {
  width: 100%; min-height: 48px; padding: 13px 14px; box-sizing: border-box;
  background: rgba(32,27,70,.6); border: 1px solid rgba(209,190,219,.25);
  color: var(--gx-paper); font: inherit; font-size: 14.5px; border-radius: 0;
}
.gx-cfield textarea { min-height: 118px; resize: vertical; }
.gx-cfield input:focus, .gx-cfield select:focus, .gx-cfield textarea:focus { border-color: var(--gx-lilac-2); outline: 2px solid var(--gx-lilac-2); outline-offset: 2px; }
.gx-cfield input::placeholder, .gx-cfield textarea::placeholder { color: #AD8BBF; }
.gx-cfield select option { background: var(--gx-ink-2); color: var(--gx-paper); }
.gx-error { font-size: 11px; color: #FFB4A1; min-height: 1em; }
.gx-hp { position: absolute; left: -9999px; }

.gx-file-drop { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 48px; box-sizing: border-box; padding: 7px 8px; background: rgba(32,27,70,.6); border: 1px solid rgba(209,190,219,.25); }
.gx-file-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.gx-file-btn { flex: 0 0 auto; min-height: 36px; padding: 8px 16px; background: rgba(209,190,219,.14); border: 1px solid rgba(209,190,219,.35); color: var(--gx-paper); font: inherit; font-size: 12px; cursor: pointer; }
.gx-file-btn:hover, .gx-file-btn:focus-visible { border-color: var(--gx-lilac-2); outline: none; }
.gx-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--gx-paper); }
.gx-file-name[data-empty] { color: #AD8BBF; }
.gx-file-remove { flex: 0 0 auto; display: none; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: none; color: #FFB4A1; font: inherit; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.gx-file-remove[data-active] { display: inline-flex; }

.gx-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: var(--gx-paper); line-height: 1.5; padding: 4px 0; cursor: pointer; }
.gx-consent input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; min-width: 20px; margin: 2px 0 0; accent-color: var(--gx-lilac-2); }

.gx-form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.gx-form-status { font-size: 9.5px; color: var(--gx-lilac-2); }
.gx-form[data-sent] .gx-cfield, .gx-form[data-sent] .gx-consent, .gx-form[data-sent] .gx-form-foot button { opacity: .4; pointer-events: none; }

/* ---------- case study ---------- */
.gx-case { padding-top: clamp(70px, 12vh, 130px); }
.gx-case-hero { display: flex; flex-direction: column; gap: clamp(16px, 3vh, 32px); padding: 0 var(--gx-pad) clamp(24px, 4vh, 48px); }
.gx-case-title { font-weight: 800; font-size: clamp(30px, 6vw, 82px); max-width: 18ch; }
.gx-case-summary { max-width: 56ch; font-size: clamp(15px, 1.2vw, 18px); color: #D1BEDB; }
.gx-case-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: clamp(14px, 2vw, 30px); padding-top: 16px; border-top: 1px solid rgba(209,190,219,.25); }
.gx-case-meta dt { font-size: 9px; color: #AD8BBF; margin-bottom: 5px; }
.gx-case-meta dd { font-size: 14.5px; }
.gx-case-hero-media, .gx-case-body, .gx-case-gallery, .gx-case-video, .gx-case-related, .gx-case-cta { padding: 0 var(--gx-pad); }
.gx-case-body { max-width: 68ch; margin: clamp(36px, 7vh, 90px) auto; }
.gx-case-body > * + * { margin-top: 1.1em; }
.gx-case-body h2 { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: 700; font-size: clamp(21px, 2.6vw, 36px); margin-top: 1.8em; }
.gx-case-body h3 { font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: 700; font-size: clamp(18px, 2vw, 26px); margin-top: 1.6em; }
.gx-case-figure { position: relative; overflow: hidden; margin: 0 auto; max-width: var(--gx-max); }
.gx-case-figure img { width: 100%; height: auto; }
.gx-case-figure figcaption { padding-top: 10px; font-size: 9px; color: #AD8BBF; }
.gx-case-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 2.4vw, 28px); max-width: var(--gx-max); margin: 0 auto clamp(40px, 8vh, 100px); }
.gx-case-related { max-width: var(--gx-max); margin: 0 auto clamp(40px, 8vh, 90px); }
.gx-case-pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid rgba(209,190,219,.25); border-bottom: 1px solid rgba(209,190,219,.25); }
.gx-case-pager a { display: flex; flex-direction: column; gap: 6px; padding: clamp(22px, 4vh, 44px) var(--gx-pad); }
.gx-pager-prev { border-right: 1px solid rgba(209,190,219,.25); }
.gx-pager-next { text-align: right; }
.gx-case-pager .gx-display { font-size: clamp(18px, 2.2vw, 30px); }
.gx-case-cta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: var(--gx-max); margin: 0 auto; padding-block: clamp(46px, 10vh, 120px); }

/* ---------- archive / single / 404 ---------- */
.gx-archive, .gx-single, .gx-404 { padding: clamp(96px, 16vh, 180px) var(--gx-pad) clamp(56px, 10vh, 120px); }
.gx-cards-archive .gx-card a { background: transparent; border: 0; padding: 0; }
.gx-prose { max-width: 68ch; }
.gx-prose > * + * { margin-top: 1.1em; }
.gx-pagination { margin-top: 40px; display: flex; gap: 10px; }

/* ---------- footer ---------- */
.gx-footer { border-top: 1px solid rgba(209,190,219,.25); padding: clamp(34px, 6vh, 64px) var(--gx-pad) 26px; }
.gx-footer-grid { max-width: var(--gx-max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: clamp(24px, 4vw, 60px); }
.gx-logo-footer svg { width: clamp(120px, 14vw, 190px); }
.gx-footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 11px; }
.gx-footer-label { font-size: 9px; color: #AD8BBF; }
.gx-footer-list { display: flex; flex-direction: column; gap: 8px; }
.gx-copyright { max-width: var(--gx-max); margin: clamp(28px, 5vh, 54px) auto 0; font-size: 9px; color: #AD8BBF; }

/* ============================================================
   Tier: tablet (768–1023). Stable sequence, visible prev/next,
   no desktop pinning.
   ============================================================ */
@media (min-width: 768px) {
  .gx-work-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 22px; padding: 34px 24px 128px; }
  .gx-stage { scroll-snap-align: center; }
  .gx-work-nav { display: flex; }
  .gx-svc-layout { grid-template-columns: 1.4fr .9fr; align-items: center; }
  .gx-contact-grid { grid-template-columns: .9fr 1.1fr; }
  .gx-case-meta { padding-top: 20px; }
}

/* ============================================================
   Tier: desktop (1024+). The pen pins and drives the canvas.
   ============================================================ */
@media (min-width: 1024px) {
  .gx-nav { display: flex; }
  .gx-menu-open { display: none; }
  .gx-work-pin { height: 100vh; }
  .gx-work-track { overflow: visible; scroll-snap-type: none; gap: clamp(20px, 3vw, 64px); padding: 40px clamp(28px, 7vw, 130px) 84px; will-change: transform; }
  .gx-work-nav { display: none; }
  .gx-stage-info { opacity: 1; }
  .gx-frame-img { object-position: var(--gx-focal-d, 50% 50%); }
}

/* ============================================================
   Tier: phone (below 768). One project at a time, native swipe,
   information beneath the media, no pinned blank areas.
   ============================================================ */
@media (max-width: 767px) {
  .gx-hero-pin { height: auto; min-height: 100svh; padding-bottom: 8vh; }
  .gx-hero-copy { position: relative; inset: auto; padding: 108px var(--gx-pad) 40px; }
  .gx-hl > span { white-space: normal; font-size: clamp(30px, 11vw, 54px); }
  .gx-frame, .gx-frame-cap { display: none; }
  .gx-sculpt { position: relative; left: auto; top: auto; transform: none; margin: 0 auto 24px; width: min(52vw, 220px); }
  .gx-pen-press { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; width: min(46vw, 200px); height: min(58vw, 250px); }
  .gx-work-pin, .gx-work-viewport { height: auto; overflow: visible; }
  .gx-work-track { overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 30px 20px 124px; }
  .gx-stage { flex: 0 0 84vw; scroll-snap-align: center; }
  .gx-work-nav { display: flex; }
  .gx-svc-pin { min-height: 0; padding: clamp(56px, 10vh, 100px) 0; }
  .gx-svc-copy { min-height: 0; }
  .gx-case-figure img { width: 100%; }
  .gx-frame-img { object-position: var(--gx-focal-m, 50% 50%); }
  .gx-stage-img { object-position: var(--gx-focal-m, 50% 50%); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .gx-frame-img, .gx-stage-img { object-position: var(--gx-focal-t, 50% 50%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .gx-frame, .gx-frame-cap { opacity: 1 !important; clip-path: none !important; }
}


/* ============================================================
   Surface-based colour system.
   A section declares the ground it sits on; its typography
   inherits from that. Nothing can end up dark-on-dark or
   light-on-light when the copy is edited in WordPress.
   ============================================================ */
.theme-dark  { --ink-1: #F4F1F6; --ink-2: #D1BEDB; --ink-3: #AD8BBF; --ink-accent: #8F60A8; --ink-rule: rgba(209,190,219,.25); color: var(--ink-1); }
.theme-light { --ink-1: #0F1137; --ink-2: #201B46; --ink-3: #503970; --ink-accent: #724E8E; --ink-rule: rgba(15,17,55,.18);   color: var(--ink-1); }
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4,
.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4 { color: var(--ink-1); }
.theme-dark p, .theme-light p, .theme-dark dd, .theme-light dd, .theme-dark li, .theme-light li { color: var(--ink-2); }
.theme-dark .gx-mono, .theme-light .gx-mono { color: var(--ink-3); }
.theme-dark .gx-accent, .theme-light .gx-accent { color: var(--ink-accent); }
.theme-dark a, .theme-light a { color: var(--ink-2); }
.theme-dark a:hover, .theme-dark a:focus-visible { color: var(--ink-1); }
.theme-light a:hover, .theme-light a:focus-visible { color: var(--ink-1); }
.theme-light a:visited { color: var(--ink-3); }
.theme-dark button:disabled, .theme-light button:disabled { color: var(--ink-3); cursor: not-allowed; }
.theme-dark hr, .theme-light hr, .theme-dark .gx-rule, .theme-light .gx-rule { background: var(--ink-rule); }
/* Buttons keep their own ground, so they never inherit an unreadable pair. */
.gx-btn-solid, .theme-light .gx-btn-solid, .theme-dark .gx-btn-solid { background: #8F60A8; color: #FFFFFF; }
.gx-btn-solid:hover, .gx-btn-solid:focus-visible { background: #976BAE; color: #FFFFFF; }
.gx-btn-solid:disabled { background: #6E5680; color: rgba(255,255,255,.7); cursor: not-allowed; }
.theme-light .gx-btn-ghost { border-color: rgba(15,17,55,.28); color: #0F1137; }

/* ============================================================
   InkWarp — the project portal
   ============================================================ */
.gx-portal { position: fixed; inset: 0; z-index: 9600; pointer-events: none; opacity: 0; visibility: hidden; }
.gx-portal-tunnel { position: absolute; inset: 0; opacity: 0; background: radial-gradient(58% 58% at 50% 50%, rgba(143,96,168,.55) 0%, rgba(80,57,112,.85) 42%, #0F1137 78%); }
.gx-portal-planes { position: absolute; inset: 0; perspective: 1200px; transform-style: preserve-3d; }
.gx-portal-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gx-portal-mask { position: absolute; inset: 0; background: #0F1137; opacity: 0; clip-path: url(#gxPortalClip); }
.gx-portal-mark { position: absolute; left: 50%; top: 50%; width: 54px; height: auto; transform: translate3d(-50%,-50%,0) scale(0); opacity: 0; overflow: visible; }
.gx-portal-title {
  position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0);
  font-family: 'Bricolage Grotesque', Manrope, sans-serif; font-weight: 800;
  font-size: clamp(24px, 5vw, 70px); color: transparent; -webkit-text-stroke: 1px #D1BEDB;
  opacity: 0; white-space: nowrap;
}

/* ============================================================
   The pen cursor. Desktop, fine pointer, motion allowed only.
   ============================================================ */
.gx-pen-cursor { position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none; transform: translate3d(-200px,-200px,0); }
.gx-pen-cursor svg { width: 17px; height: 22px; overflow: visible; }
.gx-pen-cursor-label { position: absolute; left: 24px; top: 6px; white-space: nowrap; font-size: 9px; color: #F4F1F6; opacity: 0; }
.gx-pen-ink, .gx-pen-ring { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; opacity: 0; }
.gx-pen-ink { z-index: 8995; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #8F60A8; }
.gx-pen-ring { z-index: 8994; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1px solid #AD8BBF; }
html.gx-pen-active, html.gx-pen-active * { cursor: none; }
html.gx-pen-active input, html.gx-pen-active textarea, html.gx-pen-active select,
html.gx-pen-active p, html.gx-pen-active li, html.gx-pen-active dd, html.gx-pen-active [contenteditable="true"] { cursor: auto; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .gx-pen-cursor, .gx-pen-ink, .gx-pen-ring { display: none !important; }
  html.gx-pen-active, html.gx-pen-active * { cursor: auto; }
}

.gx-portal-world { position: absolute; inset: 0; overflow: hidden; }


/* ============================================================
   Responsive tiers, authored rather than scaled.
   Wide desktop → laptop → tablet landscape → tablet portrait → phone.
   ============================================================ */

/* Very wide screens: the composition stays a composition. Content is capped
   so lines never run to 200 characters and the layout cannot fall apart. */
@media (min-width: 1600px) {
  :root { --gx-max: 1480px; --gx-pad: clamp(52px, 5vw, 108px); }
  .gx-hero-sub, .gx-case-summary { max-width: 52ch; }
  .gx-h2 { max-width: 20ch; }
  .gx-case-body { max-width: 72ch; }
}
@media (min-width: 2200px) {
  :root { --gx-max: 1720px; }
  body.gx { font-size: 17.5px; }
}

/* Laptop: the full cinematic experience at a slightly tighter rhythm. */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root { --gx-pad: clamp(26px, 3.4vw, 44px); }
  .gx-hl > span { font-size: max(24px, min(84px, 6.2vw)); }
  .gx-h2 { font-size: clamp(24px, 3.6vw, 50px); }
}

/* Short laptops (1366×768 and similar): the hero must still fit one screen. */
@media (min-width: 1024px) and (max-height: 800px) {
  .gx-hero-copy { padding-top: 84px; padding-bottom: 44px; }
  .gx-hl > span { font-size: max(22px, min(62px, 5.4vw)); }
  .gx-hero-sub { font-size: 14px; }
  .gx-sculpt { width: min(30vmin, 250px); }
}

/* Tablet landscape (1024×768, 1194×834): two columns, no desktop pinning. */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .gx-hero-pin { height: auto; min-height: 0; padding: 104px 0 56px; }
  .gx-hero-copy { position: static; padding: 0 var(--gx-pad); }
  .gx-hl > span { font-size: clamp(30px, 7vw, 62px); white-space: normal; }
  .gx-sculpt { position: relative; left: auto; top: auto; transform: none; margin: 0 auto 20px; width: min(26vw, 190px); }
  .gx-svc-layout { grid-template-columns: 1.3fr 1fr; }
  .gx-contact-grid { grid-template-columns: 1fr 1fr; }
  .gx-steps { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet portrait (768×1024, 834×1194): one column, larger targets. */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  :root { --gx-pad: clamp(28px, 5vw, 52px); }
  .gx-hero-pin { height: auto; min-height: 0; padding: 116px 0 64px; }
  .gx-hero-copy { position: static; padding: 0 var(--gx-pad); }
  .gx-hl > span { font-size: clamp(34px, 8.2vw, 68px); white-space: normal; }
  .gx-sculpt { position: relative; left: auto; top: auto; transform: none; margin: 0 auto 26px; width: min(38vw, 240px); }
  .gx-svc-layout, .gx-contact-grid { grid-template-columns: 1fr; }
  .gx-steps { grid-template-columns: repeat(2, 1fr); }
  .gx-cap-grid, .gx-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet, both orientations: the desktop-only layers stand down. */
@media (min-width: 768px) and (max-width: 1023px) {
  .gx-frame, .gx-frame-cap, .gx-cue { display: none; }
  .gx-work-nav { display: flex; }
  .gx-stage { flex: 0 0 min(72vw, 620px); }
  .gx-btn { min-height: 52px; }
}

/* Phone: one column, one project at a time, information under the media. */
@media (max-width: 767px) {
  :root { --gx-pad: 20px; }
  .gx-hero-pin { padding-bottom: 10vh; }
  .gx-hl > span { font-size: clamp(30px, 10.5vw, 52px); }
  .gx-hero-foot { flex-direction: column; align-items: flex-start; }
  .gx-hero-sub { max-width: 100%; }
  .gx-actions { width: 100%; }
  .gx-btn { flex: 1 1 auto; min-height: 52px; justify-content: center; }
  .gx-h2, .gx-manifesto-h, .gx-case-title { font-size: clamp(26px, 8.4vw, 40px); max-width: 100%; }
  .gx-manifesto-cols, .gx-steps, .gx-cap-grid, .gx-cards, .gx-case-meta, .gx-case-gallery, .gx-footer-grid { grid-template-columns: 1fr; }
  .gx-stage { flex: 0 0 86vw; }
  .gx-stage-info { padding-top: 16px; }
  .gx-case-pager { grid-template-columns: 1fr; }
  .gx-pager-prev { border-right: 0; border-bottom: 1px solid rgba(209,190,219,.25); }
  .gx-pager-next { text-align: left; align-items: flex-start; }
  .gx-case-cta { flex-direction: column; align-items: flex-start; }
  .gx-logo-wall { grid-template-columns: repeat(2, 1fr); }
  .gx-menu-list a { font-size: clamp(30px, 10vw, 46px); }
  /* Nothing pinned, so no blank bands. */
  .gx-hero-pin, .gx-work-pin, .gx-svc-pin, .gx-work-viewport { height: auto !important; min-height: 0; }
}

/* Very small phones (360×640 and similar). */
@media (max-width: 380px) {
  .gx-hl > span { font-size: clamp(26px, 9.6vw, 38px); }
  .gx-stage { flex: 0 0 90vw; }
}

/* Nothing may ever scroll sideways. */
html, body.gx { max-width: 100%; overflow-x: hidden; }
.gx-ch, .gx-wrap { max-width: 100%; }
img, video, svg, table { max-width: 100%; }

/* The branded plate shown until an image is uploaded. */
.gx-stage-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #201B46 0%, #503970 55%, #AD8BBF 100%);
}
.gx-stage-fallback svg { width: 22%; max-width: 90px; height: auto; opacity: .55; }
.gx-stage-media picture { display: contents; }