/* ==========================================================================
   WALEED MALIK — premium dark editorial
   Tokens first. All text pairs meet WCAG AA (checked against --bg and glass).
   ========================================================================== */
:root {
  --bg: #172040;
  --bg-2: #1d264c;
  --text: #f5f1e8;        /* 14.1:1 on --bg */
  --text-2: #cfc8bb;      /* 9.6:1 */
  --text-3: #a39c8f;      /* 5.9:1 (5.0:1 on the lightest glass) */
  --gold: #d8b46a;        /* 8.1:1 */
  --gold-2: #b8914a;
  --coral: #f08a7a;       /* 6.5:1 */
  --line: rgba(216, 180, 106, .3);
  --line-soft: rgba(245, 241, 232, .09);
  --glass: rgba(23, 32, 64, .66);
  --glass-strong: rgba(23, 32, 64, .8);
  --grad: linear-gradient(100deg, #f0d48f 0%, #d8b46a 48%, #e39a63 100%);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --gap: clamp(16px, 2vw, 28px);
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --r: 20px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; min-height: 100vh; overflow-x: clip; background: var(--bg); color: var(--text-2); font: 400 1.0625rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
@media (min-width: 1100px) { body { font-size: 1.125rem; } }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--text); font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; }
p { margin: 0 0 1em; }
::selection { background: var(--gold); color: var(--bg); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.gold { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 400; padding: .7em 1.1em; border-radius: 10px; background: var(--gold); color: var(--bg); font-weight: 700; text-decoration: none; transition: transform .2s; }
.skip-link:focus { transform: translateY(76px); }

/* glass panels: text never sits directly on the moving background */
.glass { position: relative; background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--r); padding: clamp(20px, 2.4vw, 34px); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); box-shadow: 0 30px 80px -40px rgba(6, 6, 24, .57), inset 0 1px 0 rgba(255, 255, 255, .04); }
.glass--thin { padding: 10px 12px; }
.no-blur .glass, .no-blur .nav.is-solid, .no-blur .drawer__panel, .no-blur .viewer__info { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--glass-strong); }

/* type scale + section heads (identical in every section) */
.label { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--s2); font: 700 .72rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.label::before { content: ''; width: 28px; height: 1px; background: var(--grad); }
.mini-label { margin: 0 0 var(--s2); font: 700 .72rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); line-height: 1.06; font-variation-settings: 'opsz' 144; }
.h4 { font: 400 1.3rem/1.25 var(--serif); margin-bottom: var(--s2); }
.sub { margin: var(--s2) 0 0; max-width: 640px; color: var(--text-2); }
.sec-head { max-width: 760px; margin-bottom: var(--s5); }
.section { position: relative; padding: var(--s6) 0; }
[data-split] .w { display: inline-block; white-space: nowrap; }
[data-split] .ch { display: inline-block; }

/* WebGL + fallback background */
.gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease); }
.gl.is-on { opacity: 1; }
/* painted background (reduced motion, no WebGL, no graphics card): same palettes as the 3D aurora,
   cross-fading per section via registered colour properties */
@property --pa { syntax: '<color>'; inherits: true; initial-value: #4b276c; }
@property --pb { syntax: '<color>'; inherits: true; initial-value: #173f70; }
@property --pg { syntax: '<color>'; inherits: true; initial-value: #f2c274; }
@property --pbase { syntax: '<color>'; inherits: true; initial-value: #142050; }
.bg-fallback { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none;
  --pa: #4b276c; --pb: #173f70; --pg: #f2c274; --pbase: #142050;
  background: radial-gradient(60vw 50vw at 80% 10%, rgba(88, 44, 121, .45), transparent 70%), radial-gradient(50vw 40vw at 10% 70%, rgba(34, 79, 124, .4), transparent 70%), var(--bg); /* older browsers */
  background:
    radial-gradient(48vw 40vw at 76% 30%, color-mix(in srgb, var(--pg) 30%, transparent), transparent 70%),
    radial-gradient(70vw 55vw at 85% 0%, color-mix(in srgb, var(--pa) 85%, transparent), transparent 72%),
    radial-gradient(60vw 50vw at 5% 75%, color-mix(in srgb, var(--pb) 80%, transparent), transparent 72%),
    radial-gradient(40vw 30vw at 60% 100%, color-mix(in srgb, var(--pg) 16%, transparent), transparent 70%),
    var(--pbase);
  transition: --pa 1.4s var(--ease), --pb 1.4s var(--ease), --pg 1.4s var(--ease), --pbase 1.4s var(--ease); }
[data-sec="about"] .bg-fallback, [data-sec="about"] .sp-aura { --pa: #62264f; --pb: #4c2560; --pg: #f2a874; --pbase: #2d1c46; }
[data-sec="services"] .bg-fallback, [data-sec="services"] .sp-aura { --pa: #136670; --pb: #1c467d; --pg: #eebe6e; --pbase: #0e354a; }
[data-sec="work"] .bg-fallback, [data-sec="work"] .sp-aura { --pa: #393645; --pb: #2b354b; --pg: #c4a676; --pbase: #212332; }
[data-sec="process"] .bg-fallback, [data-sec="process"] .sp-aura { --pa: #394357; --pb: #45392a; --pg: #ead7ae; --pbase: #232938; }
[data-sec="skills"] .bg-fallback, [data-sec="skills"] .sp-aura { --pa: #352874; --pb: #144a70; --pg: #e6bb70; --pbase: #142050; }
[data-sec="testimonials"] .bg-fallback, [data-sec="testimonials"] .sp-aura { --pa: #5e2a63; --pb: #233a72; --pg: #f2bc7c; --pbase: #241b44; }
[data-sec="faq"] .bg-fallback, [data-sec="faq"] .sp-aura { --pa: #2f346f; --pb: #194e70; --pg: #dcb86c; --pbase: #152248; }
[data-sec="contact"] .bg-fallback, [data-sec="contact"] .sp-aura { --pa: #57263c; --pb: #47311c; --pg: #ffc474; --pbase: #362132; }
.static-bg .bg-fallback { display: block; }
main, .footer { position: relative; z-index: 1; }
main { overflow-x: clip; }

/* progress + cursor */
.progress { position: fixed; left: 0; top: 0; z-index: 150; width: 100%; height: 2px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.cursor { position: fixed; left: 0; top: 0; z-index: 350; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor__ring { position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border: 1px solid rgba(216, 180, 106, .75); border-radius: 50%; display: grid; place-items: center; transition: transform .35s var(--ease), background-color .35s; }
.cursor__dot { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.cursor__label { font: 700 .4rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); opacity: 0; transition: opacity .25s; white-space: nowrap; }
/* the label (Open, View, Drag…) sits inside a thin translucent ring that follows the pointer — no filled disc, so it never reads as a button */
.cursor.is-label .cursor__ring { transform: scale(2.2); background: rgba(23, 32, 64, .32); border-color: rgba(216, 180, 106, .7); }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-label .cursor__dot { opacity: 0; }

/* ---------- loading screen: name, subtitle and a thin gold progress line ---------- */
.loader { position: fixed; inset: 0; z-index: 500; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 0 24px; text-align: center; background: radial-gradient(600px 400px at 50% 45%, #28214a, var(--bg) 72%); transition: opacity .5s var(--ease), visibility .5s; }
.loader.is-done { opacity: 0; visibility: hidden; }
.no-js .loader { display: none; }
.ld-name { margin: 0; font: 400 clamp(2.2rem, 7vw, 3.6rem)/1 var(--serif); letter-spacing: -.01em; color: var(--text); animation: ldIn .7s var(--ease) both; }
.ld-sub { margin: 0; font: 700 .68rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); animation: ldIn .7s .08s var(--ease) both; }
.ld-line { width: min(220px, 60vw); height: 2px; margin-top: 16px; overflow: hidden; border-radius: 2px; background: rgba(216, 180, 106, .16); }
.ld-line i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(.06); transition: transform .35s var(--ease); }
@keyframes ldIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reduce .ld-name, .reduce .ld-sub { animation: none; }
.reduce .ld-line i, .reduce .loader { transition: none; }

/* ---------- buttons ---------- */
.btn { --mx: 0px; --my: 0px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: 1em 1.6em; border-radius: 999px; border: 1px solid transparent; font: 700 .92rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; transform: translate(var(--mx), var(--my)); transition: transform .45s var(--ease), scale .55s cubic-bezier(.34, 1.56, .64, 1), background-color .3s, border-color .3s, color .3s; }
.btn--gold { background: var(--grad); color: #1c1306; box-shadow: 0 12px 30px -12px rgba(227, 154, 99, .65), inset 0 1px 0 rgba(255, 255, 255, .4); }

.btn--ghost { border-color: rgba(245, 241, 232, .25); color: var(--text); background: rgba(23, 32, 64, .4); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn--sm { padding: .72em 1.15em; font-size: .82rem; }
.btn--lg { padding: 1.15em 2.1em; font-size: 1.02rem; }
.round-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(245, 241, 232, .2); background: rgba(23, 32, 64, .6); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color .3s, color .3s; }
.round-btn:hover { border-color: var(--gold); color: var(--gold); }
.round-btn:disabled { opacity: .35; cursor: default; }
.pill-btn { border: 1px solid var(--line); background: transparent; color: var(--gold); border-radius: 999px; padding: .6em 1.1em; font: 700 .8rem/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background-color .3s, color .3s; }
.pill-btn:hover { background: var(--gold); color: var(--bg); }
.text-link { color: var(--gold); font-weight: 700; font-size: .9rem; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .4s var(--ease); }
.text-link:hover { background-size: 100% 1px; }
.dot-live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5ed39a; }
.dot-live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(94, 211, 154, .55); animation: live 2s ease-out infinite; }
@keyframes live { 0% { transform: scale(1); opacity: .8; } 80%, 100% { transform: scale(3); opacity: 0; } }
.ph-tag { display: inline-flex; align-items: center; gap: 6px; padding: .35em .7em; border-radius: 999px; border: 1px dashed rgba(240, 138, 122, .7); color: var(--coral); font: 800 .62rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.no-ph .ph-tag { display: none; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 200; padding: 14px 0; border-bottom: 1px solid transparent; transition: background-color .4s, border-color .4s, padding .4s; }
.nav.is-solid { padding: 8px 0; background: rgba(23, 32, 64, .72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-color: var(--line-soft); }
.nav__inner { width: min(100% - 2 * var(--gutter), 1360px); margin-inline: auto; display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex: none; }
.brand__mark { width: 30px; height: 30px; fill: none; stroke: var(--gold); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; border: 1px solid var(--line); border-radius: 50%; padding: 3px; }
.brand__name { font: 500 1.12rem/1 var(--serif); letter-spacing: .01em; white-space: nowrap; }
.nav__links { position: relative; display: flex; align-items: center; gap: clamp(6px, 1.2vw, 22px); margin: 0 auto; padding: 8px clamp(10px, 1.4vw, 20px); border: 1px solid var(--line-soft); border-radius: 999px; background: rgba(23, 32, 64, .55); }
.nav__links a { position: relative; padding: 6px 2px; font-size: clamp(.76rem, .9vw, .86rem); font-weight: 600; color: var(--text-2); text-decoration: none; white-space: nowrap; transition: color .3s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }
.nav__ind { position: absolute; left: 0; bottom: 6px; width: 100px; height: 2px; border-radius: 2px; background: var(--grad); transform-origin: 0 50%; transform: translateX(var(--ix, 0px)) scaleX(var(--iw, 0)); transition: transform .55s var(--ease); box-shadow: 0 0 10px rgba(227, 154, 99, .7); pointer-events: none; }
.nav__cta { flex: none; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(23, 32, 64, .6); cursor: pointer; place-content: center; gap: 6px; }
.burger span { display: block; width: 18px; height: 1.5px; background: var(--text); transition: transform .35s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 190; padding: 96px var(--gutter) 40px; background: rgba(23, 32, 64, .99); display: flex; flex-direction: column; gap: 28px; overflow-y: auto; }
.menu nav { display: grid; }
.menu nav a { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; font: 400 1.7rem/1.2 var(--serif); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-soft); }
.menu nav a i { width: 26px; font: 700 .7rem/1 var(--sans); color: var(--gold); font-style: normal; letter-spacing: .1em; }

/* ---------- 1. hero (pinned while the book opens) ---------- */
.hero { --pages: 7; position: relative; height: calc(100vh + var(--pages) * 34vh); }
.hero__sticky { position: sticky; top: 0; height: 100vh; min-height: 660px; display: flex; align-items: center; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center; padding-top: 70px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s2); font: 700 .74rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--text-2); }
.hero__name { font-size: clamp(3rem, 6.4vw, 6rem); line-height: .95; font-variation-settings: 'opsz' 144; margin-bottom: var(--s2); }
.hero__pos { font: 400 clamp(1.25rem, 1.8vw, 1.6rem)/1.3 var(--serif); color: var(--gold); margin-bottom: var(--s2); }
.hero__intro { max-width: 520px; color: var(--text-2); margin-bottom: var(--s3); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--s3); }
.facts { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 26px; margin: 0; padding-top: var(--s3); border-top: 1px solid var(--line-soft); }
.facts div { display: flex; flex-direction: column-reverse; gap: 2px; }
.facts dt { font-size: .74rem; color: var(--text-3); }
.facts dd { margin: 0; font: 400 1.55rem/1.1 var(--serif); color: var(--text); }
.book-col { display: grid; gap: 14px; justify-items: center; }
.book-stage { position: relative; width: 100%; height: min(70vh, 660px); border-radius: var(--r); outline-offset: 6px; cursor: pointer; }
.book-stage::before { content: ''; position: absolute; inset: -10% -8%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side at 50% 55%, rgba(255, 214, 160, .16), transparent 70%); }
.book-ui { display: flex; align-items: center; gap: 10px; max-width: 100%; }
.book-cap { margin: 0; min-width: 0; width: clamp(200px, 26vw, 360px); text-align: center; font: italic 400 .95rem/1.3 var(--serif); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-cap b { font: 700 .62rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-style: normal; margin-right: 8px; }
.scroll-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; display: flex; align-items: center; gap: 10px; font: 700 .64rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.scroll-hint i { width: 1px; height: 28px; background: linear-gradient(var(--gold), transparent); animation: hint 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
/* static CSS book (reduced motion / no WebGL) */
.cssbook { display: none; position: absolute; inset: 6% 4%; perspective: 1600px; }
.static-book .cssbook, .static-about #aboutBook .cssbook, .static-about #contactBook .cssbook { display: block; }
.cssbook__spread { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; background: #f1e8d6; box-shadow: 0 40px 70px -24px rgba(6, 6, 24, .7); }
.cssbook__spread img { width: 100%; height: 100%; object-fit: cover; }
.cssbook__spread::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 60px; margin-left: -30px; background: linear-gradient(90deg, transparent, rgba(40, 25, 10, .28), transparent); }
.cssbook__cover { position: absolute; left: 28%; right: 28%; top: 0; bottom: 0; z-index: 2; border-radius: 4px 14px 14px 4px; overflow: hidden; box-shadow: -10px 0 0 #5a1f17, 0 40px 70px -24px rgba(6, 6, 24, .7); transition: opacity .6s, transform .8s var(--ease); }
.cssbook__cover img { width: 100%; height: 100%; object-fit: cover; }
.cssbook__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 10, 8, .8), transparent 40%), linear-gradient(115deg, rgba(255, 255, 255, .22), transparent 35%); }
.cssbook__cover span { position: absolute; left: 0; right: 0; top: 8%; z-index: 1; text-align: center; font: 600 clamp(1rem, 1.9vw, 1.8rem)/1.05 var(--serif); letter-spacing: .08em; text-transform: uppercase; color: #ecd08f; }
.cssbook__cover small { display: block; margin-top: 10px; font: 700 .55rem/1 var(--sans); letter-spacing: .24em; color: #f5f1e8; }
.cssbook.is-open .cssbook__cover { opacity: 0; transform: translateX(-70%) rotateY(-40deg); pointer-events: none; }
.cssbook--closed .cssbook__cover { left: 22%; right: 22%; }
.static-book .hero { height: auto; }
.static-book .hero__sticky { position: relative; height: auto; min-height: 100vh; padding: 40px 0 80px; }
.static-book .scroll-hint { display: none; }

/* ---------- 2. about ---------- */
.about__visual { grid-column: 1 / span 5; align-self: start; }
.book-stage--about { height: min(78vh, 700px); cursor: default; }
.headshot { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); }
.about__body { grid-column: 6 / span 7; display: grid; gap: var(--gap); }
.about__body .sec-head { margin-bottom: 0; }
.about__bio p:first-child { font: 400 1.25rem/1.55 var(--serif); color: var(--text); }
.about__bio p:last-child { margin: 0; }
.about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.known { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.known li { padding-left: 20px; position: relative; }
.known li::before { content: ''; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 2px; background: var(--grad); transform: rotate(45deg); }
.known b { display: block; color: var(--text); font-weight: 700; font-size: .98rem; }
.known span { font-size: .92rem; }
.how { margin: 0; padding: 0; list-style: none; counter-reset: how; display: grid; gap: 10px; }
.how li { counter-increment: how; display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: .94rem; }
.how li::before { content: counter(how, decimal-leading-zero); font: italic 400 1rem/1.5 var(--serif); color: var(--gold); }
.tools-h { margin-top: var(--s3); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: .5em 1em; border-radius: 999px; border: 1px solid var(--line); background: rgba(23, 32, 64, .5); color: var(--text); font-size: .86rem; transition: border-color .3s, color .3s, transform .4s var(--ease); }
.chips li:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

/* ---------- 3. services ---------- */
.svc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.svc { position: relative; display: flex; flex-direction: column; border-radius: var(--r); background: var(--glass-strong); border: 1px solid var(--line-soft); overflow: hidden; cursor: pointer; transform: perspective(1000px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .6s var(--ease), border-color .4s; outline: none; }
.svc:hover, .svc:focus-visible { border-color: var(--line); }
.svc:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.svc::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--go, 0); transition: opacity .4s; background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 240, 210, .14), transparent 45%); }
.svc__thumb { position: relative; height: 210px; overflow: hidden; background: radial-gradient(closest-side at 50% 58%, rgba(216, 180, 106, .16), transparent 75%), #1c2550; }
.svc__thumb::after { content: ''; position: absolute; inset: auto 0 0; height: 40px; background: linear-gradient(transparent, rgba(23, 32, 64, .7)); pointer-events: none; }
.svc__num { position: absolute; left: 18px; bottom: 10px; z-index: 1; font: 700 .68rem/1 var(--sans); letter-spacing: .2em; color: var(--gold); }
.svc__body { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.svc h3 { font-size: 1.32rem; line-height: 1.2; }
.svc__value { margin: 0; color: var(--text); font-size: .95rem; }
.svc__k { margin: 0; font: 700 .64rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.svc__who { margin: 0; font-size: .86rem; color: var(--text-2); }
.svc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .86rem; }
.svc li { position: relative; padding-left: 18px; }
.svc li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-size: .78rem; }
.svc__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; font-size: .8rem; color: var(--text-3); }
.drawer { position: fixed; inset: 0; z-index: 260; display: flex; justify-content: flex-end; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(16, 23, 55, .6); }
.drawer__panel { position: relative; width: min(560px, 100%); height: 100%; overflow-y: auto; padding: 70px clamp(20px, 3vw, 40px) 40px; background: rgba(25, 34, 68, .92); border-left: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.drawer__close { position: absolute; right: 18px; top: 18px; }
.drawer h3 { font-size: 2rem; margin-bottom: 10px; }
.drawer__arts { display: grid; gap: 14px; margin: 20px 0; }
.drawer__arts button { padding: 0; border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: #f4ecdc; cursor: pointer; text-align: left; }
.drawer__arts img { width: 100%; height: auto; }
.drawer__arts span { display: block; padding: 10px 14px; background: var(--bg-2); color: var(--text); font-size: .88rem; }

/* ---------- 4. selected work ---------- */
.featured { display: grid; gap: var(--s5); margin-bottom: var(--s6); }
.feat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: center; }
.feat__media { grid-column: 1 / span 7; position: relative; padding: 0; border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; background: #f4ecdc; cursor: pointer; display: block; width: 100%; }
.feat__media img { width: 100%; height: auto; }
.feat__body { grid-column: 8 / span 5; }
.feat:nth-child(even) .feat__media { grid-column: 6 / span 7; order: 2; }
.feat:nth-child(even) .feat__body { grid-column: 1 / span 5; }
.feat__body h4 { font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.15 var(--serif); color: var(--text); margin: 10px 0 18px; }
.feat__body dl { margin: 0 0 18px; display: grid; gap: 12px; }
.feat__body dt { font: 700 .66rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.feat__body dd { margin: 0; font-size: .95rem; }
.feat__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grid-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--s3); }
.chips-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid rgba(245, 241, 232, .18); background: rgba(23, 32, 64, .6); color: var(--text-2); border-radius: 999px; padding: .55em 1em; font: 600 .82rem/1 var(--sans); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.chip small { margin-left: 6px; color: var(--text-3); font-size: .72rem; }
.chip:hover { border-color: var(--gold); color: var(--text); }
.chip.is-on { background: var(--grad); color: #1c1306; border-color: transparent; }
.chip.is-on small { color: #4a3510; }
.masonry { column-count: 3; column-gap: var(--gap); }
.tile { break-inside: avoid; margin: 0 0 var(--gap); display: block; width: 100%; padding: 0; border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; background: var(--glass-strong); text-align: left; cursor: pointer; transition: border-color .4s, transform .5s var(--ease); }
.tile:hover { border-color: var(--line); transform: translateY(-4px); }
.tile__img { position: relative; background: #f4ecdc; overflow: hidden; }
.tile__img img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.tile:hover .tile__img img { transform: scale(1.03); }
.tile__meta { display: block; padding: 14px 16px 16px; }
.tile__cat { display: block; font: 700 .62rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.tile__title { display: block; font: 400 1.12rem/1.25 var(--serif); color: var(--text); margin-bottom: 4px; }
.tile__brief { display: block; font-size: .85rem; color: var(--text-2); line-height: 1.5; }
.tile.is-hidden { display: none; }
.reveal-mask { position: absolute; inset: 0; z-index: 2; background: var(--bg-2); transform-origin: 100% 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- 5. process (pinned horizontal) ---------- */
.process { position: relative; height: 300vh; }
.process__sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 50px; }
.process .sec-head { margin-bottom: var(--s4); }
.process__rail { position: relative; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.process__line { position: absolute; top: -20px; left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); right: var(--gutter); height: 2px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.process__line i { display: block; height: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.process__track { list-style: none; margin: 0; padding: 0 var(--gutter) 0 0; display: flex; gap: var(--gap); width: max-content; }
.pstep { width: clamp(300px, 30vw, 400px); border-radius: var(--r); overflow: hidden; background: var(--glass-strong); border: 1px solid var(--line-soft); }
.pstep__img { position: relative; height: 210px; overflow: hidden; background: #f4ecdc; }
.pstep__img img { position: absolute; max-width: none; }
.pstep__img--brief img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.9); }
.pstep__img--sketch img, .pstep__img--final img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.9); }
.pstep__img--sketch img { transform-origin: 18% 40%; }   /* the construction sketches */
.pstep__img--final img { transform-origin: 90% 40%; }    /* the finished character */
.pstep__img--feedback img { width: 100%; height: auto; top: -8%; }
.pstep__img--print img { height: 86%; width: auto; left: 50%; top: 7%; transform: translateX(-50%); box-shadow: 0 0 0 10px #fff, 0 20px 40px rgba(6, 6, 24, .25); }
.pstep__img--print::after { content: ''; position: absolute; inset: 9px 30%; border: 1px dashed rgba(200, 40, 40, .7); }
.pstep__body { padding: 20px 24px 26px; }
.pstep__n { font: italic 300 2.6rem/1 var(--serif); color: var(--gold); }
.pstep h3 { font-size: 1.55rem; margin: 6px 0 8px; }
.pstep p { margin: 0; font-size: .94rem; }
.flat-process .process { height: auto; padding: var(--s6) 0; }
.flat-process .process__sticky { position: relative; height: auto; overflow: visible; padding-top: 0; }
.flat-process .process__rail { padding: 0; width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.flat-process .process__line { display: none; }
.flat-process .process__track { width: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding: 0; transform: none !important; }
.flat-process .pstep { width: auto; }

/* ---------- 6. skills ---------- */
.skill-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.skill-groups .glass h3 { font-size: 1.25rem; margin-bottom: 16px; }

/* ---------- 7. testimonials ---------- */
.t-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.t-card { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.t-card blockquote { margin: 0; font: italic 400 1.1rem/1.55 var(--serif); color: var(--text); }
.t-card blockquote::before { content: '“'; display: block; font: 400 3rem/.6 var(--serif); color: var(--gold); margin-bottom: 10px; }
.t-card figcaption { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .86rem; }
.t-card figcaption b { display: block; color: var(--text); }

/* ---------- 8. FAQ ---------- */
.faq__head { grid-column: 1 / span 4; }
.faq__list { grid-column: 6 / span 7; display: grid; gap: 10px; }
.qa { border: 1px solid var(--line-soft); border-radius: 16px; background: var(--glass-strong); overflow: hidden; transition: border-color .3s; }
.qa.is-open { border-color: var(--line); }
.qa h3 { margin: 0; font: inherit; }
.qa button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border: 0; background: transparent; cursor: pointer; text-align: left; font: 400 1.12rem/1.35 var(--serif); color: var(--text); }
.qa button i { flex: none; position: relative; width: 14px; height: 14px; }
.qa button i::before, .qa button i::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: var(--gold); transition: transform .4s var(--ease); }
.qa button i::after { transform: rotate(90deg); }
.qa.is-open button i::after { transform: rotate(0); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { margin: 0; padding: 0 22px 20px; font-size: .96rem; }

/* ---------- 9. contact ---------- */
.contact__card { text-align: center; padding: clamp(40px, 6vw, 90px) clamp(20px, 5vw, 80px); display: grid; justify-items: center; }
.contact__card .label { justify-content: center; }
.contact__title { font-size: clamp(2.4rem, 5.6vw, 5rem); line-height: 1.02; max-width: 16ch; margin-bottom: var(--s3); font-variation-settings: 'opsz' 144; }
.contact__text { max-width: 560px; margin-bottom: var(--s4); }
.contact__meta { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-size: .9rem; color: var(--text-2); }
.contact__meta li { display: flex; align-items: center; gap: 8px; }

/* ---------- 10. footer ---------- */
.footer { padding: var(--s5) 0 var(--s3); background: rgba(20, 28, 57, .92); border-top: 1px solid var(--line-soft); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: var(--s4); }
.footer__brand p { margin: 14px 0 18px; font-size: .9rem; max-width: 380px; color: var(--text-3); }
.footer__col div { display: grid; gap: 8px; }
.footer__col a { font-size: .9rem; color: var(--text-2); text-decoration: none; }
.footer__col a:hover { color: var(--gold); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line-soft); font-size: .82rem; color: var(--text-3); }
.footer__bottom a { color: var(--text-2); }

/* ---------- case viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; padding: 20px; background: rgba(18, 25, 54, .96); }
.viewer__stage { position: relative; min-height: 0; display: grid; place-items: center; touch-action: pan-y; }
.viewer__stage img { max-width: 100%; max-height: calc(100vh - 40px); object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(6, 6, 24, .49); transition: opacity .3s; }
.viewer__stage img.is-loading { opacity: .25; }
.viewer__info { align-self: center; display: flex; flex-direction: column; gap: 16px; }
.viewer__title { font-size: 1.8rem; line-height: 1.15; }
.viewer__dl { margin: 0; display: grid; gap: 12px; }
.viewer__dl dt { font: 700 .64rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.viewer__dl dd { margin: 2px 0 0; font-size: .94rem; color: var(--text); }
.viewer__nav { display: flex; align-items: center; gap: 14px; }
.viewer__count { font: 700 .74rem/1 var(--sans); letter-spacing: .14em; color: var(--text-3); }
.viewer__close { position: absolute; right: 20px; top: 20px; }

.noscript { padding: 120px 0 60px; position: relative; z-index: 2; color: var(--text); }
.noscript__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; }
.js .fade-up { opacity: 0; transform: translateY(32px); }
.reduce .fade-up { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1280px) {
  .brand__name { display: none; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) { .nav__cta { display: none; } }
@media (max-width: 920px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  .brand__name { display: inline; }
}
@media (max-width: 980px) {
  .hero { height: calc(100vh + var(--pages) * 30vh); }
  .hero__sticky { min-height: 0; align-items: flex-start; }
  .hero__grid { grid-template-columns: 1fr; padding-top: 76px; gap: 12px; }
  .hero__copy { padding: 16px 18px; }
  .eyebrow { font-size: .62rem; margin-bottom: 8px; }
  .hero__name { font-size: clamp(2.3rem, 10vw, 4rem); margin-bottom: 6px; }
  .hero__pos { font-size: 1.05rem; margin-bottom: 8px; }
  .hero__intro { font-size: .9rem; line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .static-book .hero__intro { display: block; }
  .hero__cta { gap: 8px; margin-bottom: 12px; }
  .hero__cta .btn { padding: .8em 1.1em; font-size: .8rem; }
  .facts { grid-template-columns: repeat(4, auto); gap: 6px 16px; padding-top: 12px; }
  .facts dd { font-size: 1.1rem !important; }
  .facts dt { font-size: .64rem; }
  .book-col { gap: 8px; }
  .book-stage { height: 30vh; min-height: 190px; }
  .book-cap { width: auto; flex: 1; }
  .scroll-hint { display: none; }
  .static-book .book-stage { height: 46vh; }
  .grid12 > * { grid-column: 1 / -1 !important; }
  .about__visual { position: relative; top: 0; }
  .book-stage--about { height: 44vh; }
  .about__cols { grid-template-columns: 1fr; }
  .feat__media, .feat__body, .feat:nth-child(even) .feat__media, .feat:nth-child(even) .feat__body { grid-column: 1 / -1; order: 0; }
  .masonry { column-count: 2; }
  .t-grid { grid-template-columns: 1fr; }
  .viewer { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; overflow-y: auto; }
  .viewer__stage img { max-height: 60vh; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .section { padding: 72px 0; }
  .sec-head { margin-bottom: 36px; }
  .hero__cta .btn { padding: .9em 1.2em; font-size: .86rem; }
  .facts dd { font-size: 1.25rem; }
  .svc-grid, .skill-groups { grid-template-columns: 1fr; }
  .masonry { column-count: 1; }
  .book-ui { flex-wrap: wrap; justify-content: center; }
  .book-cap { order: -1; flex-basis: 100%; }
  .footer__top { grid-template-columns: 1fr; }
}
@media (max-height: 760px) and (min-width: 981px) {
  .hero__name { font-size: clamp(2.6rem, 5vw, 4.6rem); }
  .hero__intro { font-size: .95rem; }
  .book-stage { height: 56vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Step 2: text that sits straight on the live background gets a soft, feathered dark scrim so it keeps
   WCAG AA contrast even when a bright page or the gold glow drifts behind it */
.sec-head, .mini-label { position: relative; isolation: isolate; }
.sec-head::after, .mini-label::after { content: ''; position: absolute; z-index: -1; inset: -22px -34px; pointer-events: none;
  background: rgba(19, 25, 56, .7); border-radius: 48px; filter: blur(26px); }
.mini-label::after { inset: -16px -30px; background: rgba(19, 25, 56, .85); }
/* no graphics card: a live blur is costly, so the scrim becomes a plain soft-cornered tint */
.no-blur .sec-head::after, .no-blur .mini-label::after { filter: none; background: rgba(19, 25, 56, .55); inset: -14px -22px; border-radius: 22px; }
@media (max-width: 700px) { .sec-head::after, .mini-label::after, .no-blur .sec-head::after, .no-blur .mini-label::after { inset: -12px -10px; } }
.no-blur .bg-fallback { transition: none; }   /* no graphics card: swap the painted palette instantly instead of repainting it every frame */

/* Step 3: contact section — card + a second, closed book slowly turning beside it */
.contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); align-items: center; }
.book-stage--contact { height: min(62vh, 560px); cursor: default; }
.book-stage--contact::before { background: radial-gradient(closest-side at 50% 55%, rgba(255, 196, 116, .2), transparent 70%); }
@media (max-width: 980px) { .contact__grid { grid-template-columns: 1fr; } .book-stage--contact { height: 36vh; min-height: 220px; } }

/* ---------- Step 4: services ---------- */
/* static book (phones, reduced motion, weak GPUs, no WebGL): the category cover as a hardcover with a slight 3D tilt */
.svc-book { position: absolute; left: 50%; top: 50%; width: 112px; height: 150px; margin: -78px 0 0 -56px; perspective: 700px; }   /* the scroll parallax is on its .sv wrapper */
.svc-book__cover { position: absolute; inset: 0; border-radius: 3px 8px 8px 3px; overflow: hidden; transform: rotateY(-24deg) rotateX(5deg); transform-origin: 30% 50%;
  box-shadow: -7px 0 0 #3a1a14, 8px 3px 0 -2px #efe4cb, 9px 4px 0 -2px #d9cba9, 0 22px 30px -12px rgba(6, 6, 24, .66); transition: transform .8s var(--ease); }
.svc-book__cover img { width: 100%; height: 100%; object-fit: cover; }
.svc-book__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, .22), transparent 30%), linear-gradient(transparent 62%, rgba(14, 10, 8, .85)); }
.svc-book__cover b { position: absolute; left: 6px; right: 6px; bottom: 9px; z-index: 1; text-align: center; font: 600 .7rem/1.15 var(--serif); color: #ecd08f; }
.svc:hover .svc-book__cover, .svc:focus-visible .svc-book__cover { transform: rotateY(-8deg) rotateX(2deg); }
/* 3D on: the Book Cover card's picture area becomes a window onto the shared WebGL canvas, where the real 3D book is drawn */
.svc3d .svc--book { background: transparent; }
.svc3d .svc--book .svc__body, .svc3d .svc--book .svc__strip { background: var(--glass-strong); }
.svc3d .svc--book .svc__thumb { background: transparent; box-shadow: inset 0 0 36px rgba(19, 25, 56, .35); }
.svc3d .svc--book .svc-book { display: none; }
/* living film-strip of the category's artworks (pauses on hover) */
.svc__strip { position: relative; height: 54px; padding: 4px 0; overflow: hidden; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(20, 28, 60, .6); }
/* soft fade at both ends (plain overlays: cheaper than a mask on a moving layer) */
.svc__strip::before, .svc__strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 34px; z-index: 1; pointer-events: none; }
.svc__strip::before { left: 0; background: linear-gradient(90deg, rgb(23, 32, 64), transparent); }
.svc__strip::after { right: 0; background: linear-gradient(270deg, rgb(23, 32, 64), transparent); }
.svc__track { display: flex; gap: 6px; width: max-content; animation: svcStrip 22s linear infinite; will-change: transform; }
.svc:not(.in-view) .svc__track { animation-play-state: paused; }    /* off screen: nothing moves */
.no-blur .svc__track { animation: none; }                             /* no graphics card: a still strip */
.svc__track img { height: 46px; width: auto; border-radius: 6px; object-fit: cover; background: #2c3657; }
.svc:hover .svc__track, .svc:focus-within .svc__track { animation-play-state: paused; }
@keyframes svcStrip { to { transform: translateX(-50%); } }
.text-link.magnetic { display: inline-block; transform: translate(var(--mx, 0px), var(--my, 0px)); transition: transform .45s var(--ease), background-size .4s var(--ease); }
/* drawer: swipeable carousel with dots + arrows */
.drawer__car { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; margin: 20px 0 10px; border-radius: 14px; scrollbar-width: none; outline-offset: 4px; }
.drawer__car::-webkit-scrollbar { display: none; }
.drawer__slide { flex: 0 0 100%; scroll-snap-align: start; padding: 0; border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: #f4ecdc; cursor: pointer; text-align: left; }
.drawer__slide img { width: 100%; height: 300px; object-fit: contain; display: block; background: #f4ecdc; }
.drawer__slide span { display: block; padding: 10px 14px; background: var(--bg-2); color: var(--text); font-size: .88rem; }
.drawer__nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 18px; }
.drawer__dots { display: flex; gap: 8px; }
.drawer__dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: transparent; cursor: pointer; transition: background-color .3s, transform .3s; }
.drawer__dots button.is-on { background: var(--gold); transform: scale(1.25); }
/* phones: the 8 cards become a swipeable rail with snap */
@media (max-width: 700px) {
  .svc-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding: 4px 2px 14px; margin: 0 calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scrollbar-width: none; }
  .svc-grid::-webkit-scrollbar { display: none; }
  .svc { flex: 0 0 84%; scroll-snap-align: center; }
  .drawer__slide img { height: 240px; }
}
@media (prefers-reduced-motion: reduce) { .svc__track { animation: none; } .svc-book__cover { transition: none; } }

/* the nav and page wait (invisible, but laid out) behind the loading screen until the web fonts are in, so the font swap never shifts visible layout (CLS) */
.js:not(.fonts-ready):not(.is-revealed) .nav__inner, .js:not(.fonts-ready):not(.is-revealed) main { visibility: hidden; }

/* ---------- Step 5: work, viewer, process ---------- */
/* tile hover: category, title and brief slide up over the artwork */
.tile__over { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(transparent, rgba(21, 26, 58, .9) 42%); color: var(--text); opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .5s var(--ease); pointer-events: none; }
.tile__over b { font: 400 1.05rem/1.25 var(--serif); }
.tile__over em { font-style: normal; font-size: .82rem; line-height: 1.45; color: var(--text-2); }
.tile__over i { font: 700 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.tile:hover .tile__over, .tile:focus-visible .tile__over { opacity: 1; transform: none; }
.tile__meta .tile__brief { display: none; }
@media (hover: none) { .tile__over { display: none; } .tile__meta .tile__brief { display: block; } }
.tile { will-change: auto; }
/* viewer: zoom + pan */
.viewer__stage { overflow: hidden; touch-action: none; cursor: zoom-in; user-select: none; }
.viewer__stage.is-zoomed { cursor: grab; }
.viewer__stage.is-panning { cursor: grabbing; }
.viewer__stage img { transform-origin: 50% 50%; will-change: transform; -webkit-user-drag: none; }
.viewer__zoom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(23, 32, 64, .78); border: 1px solid var(--line-soft); z-index: 2; }
.viewer__zoom button { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px; border: 0; background: transparent; color: var(--text); font: 700 .95rem/1 var(--sans); cursor: pointer; }
.viewer__zoom button:hover, .viewer__zoom button:focus-visible { background: rgba(216, 180, 106, .18); color: var(--gold); }
.viewer__zoom span { min-width: 48px; text-align: center; font: 600 .78rem/1 var(--sans); color: var(--text-2); }
.viewer__hint { position: absolute; left: 0; right: 0; top: 10px; margin: 0; text-align: center; font-size: .75rem; color: var(--text-3); pointer-events: none; }
/* process: drag-to-compare card */
.pcompare { width: clamp(320px, 32vw, 440px); }
.cmp { --p: 50%; position: relative; height: 300px; background: #fff; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; pointer-events: none; }
.cmp__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p)) 0 0); background: #fff; }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 0 0 0 1px rgba(6, 6, 24, .12); pointer-events: none; }
.cmp__handle span { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); color: var(--gold); border: 1px solid var(--gold); font-size: .9rem; transition: transform .3s var(--ease); }
.cmp.is-drag .cmp__handle span { transform: scale(1.15); }
.cmp__tag { position: absolute; top: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(23, 32, 64, .78); color: var(--text); font: 700 .62rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; pointer-events: none; }
.cmp__tag--l { left: 10px; } .cmp__tag--r { right: 10px; }
.cmp__range { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; margin: 0; opacity: 0; pointer-events: none; }
.cmp:focus-within { outline: 2px solid var(--gold); outline-offset: -2px; }
.cmp__sets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.flat-process .pcompare { width: auto; }
@media (max-width: 700px) { .cmp { height: 340px; } .viewer__hint { display: none; } }
.tile__img { display: block; }

/* ---------- Step 6: global polish ---------- */
/* cursor: small over reading text */
.cursor.is-text .cursor__ring { transform: scale(.45); border-color: rgba(216, 180, 106, .5); }
/* full-screen mobile menu: fades in, links slide in one after another */
.menu { opacity: 0; transition: opacity .4s var(--ease); }
.menu.is-open { opacity: 1; }
.menu nav a, .menu > .btn { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.menu.is-open nav a, .menu.is-open > .btn { opacity: 1; transform: none; }
.menu.is-open nav a:nth-child(2) { transition-delay: .04s; } .menu.is-open nav a:nth-child(3) { transition-delay: .08s; } .menu.is-open nav a:nth-child(4) { transition-delay: .12s; }
.menu.is-open nav a:nth-child(5) { transition-delay: .16s; } .menu.is-open nav a:nth-child(6) { transition-delay: .2s; } .menu.is-open nav a:nth-child(7) { transition-delay: .24s; }
.menu.is-open nav a:nth-child(8) { transition-delay: .28s; } .menu.is-open nav a:nth-child(9) { transition-delay: .32s; } .menu.is-open > .btn { transition-delay: .36s; }
.menu nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/* reviews slider */
.t-slider { position: relative; }
.t-track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 6px; scrollbar-width: none; outline-offset: 6px; }
.t-track::-webkit-scrollbar { display: none; }
.t-track .t-card { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); scroll-snap-align: start; min-height: 230px; }
.t-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: var(--s3); }
.t-dots { display: flex; gap: 8px; }
.t-dots button { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: transparent; cursor: pointer; transition: background-color .3s, transform .3s; }
.t-dots button.is-on { background: var(--gold); transform: scale(1.25); }
.t-count { min-width: 64px; text-align: center; font: 600 .8rem/1 var(--sans); color: var(--text-2); }
@media (max-width: 980px) { .t-track .t-card { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 700px) { .t-track .t-card { flex-basis: 86%; } }
/* FAQ: the left column now carries a short intro + quote checklist (sticks while the questions scroll) */
.faq__side { grid-column: 1 / span 4; align-self: start; position: sticky; top: 100px; display: grid; gap: var(--s3); }
.faq__side .faq__head { grid-column: auto; margin-bottom: 0; }
.faq__aside h3 { font: 400 1.35rem/1.25 var(--serif); margin: 0 0 8px; }
.faq__aside p { font-size: .94rem; color: var(--text-2); margin: 0 0 14px; }
.faq__aside .svc__k { margin-bottom: 8px; }
.faq__check { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 7px; font-size: .9rem; color: var(--text); }
.faq__check li { position: relative; padding-left: 20px; }
.faq__check li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-size: .8rem; }
@media (max-width: 980px) { .faq__side { grid-column: 1 / -1; position: static; } }
/* headshot slot (js/config.js → headshot) */
.headshot-frame { margin: 0; position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(6, 6, 24, .66); }
.headshot-frame .headshot { display: block; border: 0; border-radius: 0; width: 100%; height: auto; }
.headshot-frame figcaption { position: absolute; left: 14px; bottom: 12px; padding: 6px 12px; border-radius: 999px; background: rgba(23, 32, 64, .75); font: 700 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* Step 7: dots keep their small look but each is a 24 px touch target (WCAG 2.5.8) */
.t-dots, .drawer__dots { gap: 2px; }
.t-dots button, .drawer__dots button, .t-dots button.is-on, .drawer__dots button.is-on { position: relative; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; transform: none; }
.t-dots button::before, .drawer__dots button::before { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 1px solid var(--gold); transition: background-color .3s, transform .3s; box-sizing: border-box; }
.t-dots button.is-on::before, .drawer__dots button.is-on::before { background: var(--gold); transform: scale(1.25); }
.t-dots button:focus-visible, .drawer__dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 0; }

/* ==========================================================================
   Waleed customisation (Oct 2026)
   ========================================================================== */
/* responsive artwork wrappers (WebP + JPG fallback) */
.tile__img picture, .feat__media picture { display: block; }

/* static hero book (no WebGL / reduced motion): story text on the left page, the illustration on the right page */
.cssbook__spread { display: flex; transform-origin: 50% 50%; }
.cssbook__text { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 5% 6%; text-align: center; color: #231c13; overflow: hidden; }
.cssbook__text small { font: 700 .58rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #9b7a3e; }
.cssbook__text i { width: 40px; height: 1.5px; background: #c8a564; }
.cssbook__text b { font: 400 clamp(.95rem, 1.7vw, 1.45rem)/1.15 var(--serif); }
.cssbook__text em { font: italic 400 clamp(.72rem, 1.05vw, .95rem)/1.45 var(--serif); color: #6b5a40; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.cssbook__text span { margin-top: 4px; font: 600 .55rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #9c8a6c; }
.cssbook__pic { flex: 1 1 50%; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 4%; }
.cssbook__spread .cssbook__pic img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 0 0 6px #fbf7ee, 0 10px 18px rgba(60, 40, 15, .35); }
@media (max-width: 640px) { .cssbook__text em { -webkit-line-clamp: 4; } .cssbook__text { gap: 5px; padding: 4%; } }

/* services: no turnaround / time label any more, only the call to action */
.drawer__cta { margin-top: 18px; }

/* reviews: star rating + role */
.t-stars { margin: 0; color: var(--gold); font-size: .95rem; letter-spacing: .2em; line-height: 1; }
.t-stars span { opacity: .25; }
.t-card figcaption em { font-style: normal; font-weight: 400; color: var(--text-3); }

/* ---------- service-card visuals: one scene per discipline ---------- */
.sv { position: absolute; inset: 0; transform: translateY(var(--par, 0px)); will-change: transform; pointer-events: none; }
.sv img { display: block; max-width: none; }
.sv * { box-sizing: border-box; }

/* Children's books: an open illustrated storybook spread lying on the table */
.sv-story { position: absolute; left: 50%; top: 50%; width: 236px; height: 126px; margin: -66px 0 0 -118px; transform-style: preserve-3d; transform: perspective(720px) rotateX(36deg) rotateZ(-5deg); transition: transform .9s var(--ease); }
.sv-story__stack { position: absolute; inset: 5px -7px -9px; border-radius: 5px; background: #e9dcc0; box-shadow: 0 2px 0 #d8c8a5, 0 4px 0 #c9b690, 0 7px 0 #6a2418, 0 30px 34px -12px rgba(6, 6, 24, .7); }
.sv-story__pg { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: #f4ecdc; }
.sv-story__pg img { position: absolute; top: 0; height: 100%; width: 200%; object-fit: cover; }
.sv-story__pg--l { left: 0; border-radius: 5px 1px 1px 5px; transform-origin: 100% 50%; transform: rotateY(9deg); }
.sv-story__pg--l img { left: 0; }
.sv-story__pg--r { right: 0; border-radius: 1px 5px 5px 1px; transform-origin: 0 50%; transform: rotateY(-9deg); }
.sv-story__pg--r img { left: -100%; }
.sv-story__pg::after { content: ''; position: absolute; top: 0; bottom: 0; width: 34px; }
.sv-story__pg--l::after { right: 0; background: linear-gradient(90deg, transparent, rgba(40, 25, 10, .38)); }
.sv-story__pg--r::after { left: 0; background: linear-gradient(270deg, transparent, rgba(40, 25, 10, .38)); }
.sv-story__ribbon { position: absolute; left: 50%; top: 100%; width: 8px; height: 26px; margin-left: 6px; background: #9a1f2c; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); }
.svc:hover .sv-story, .svc:focus-visible .sv-story { transform: perspective(720px) rotateX(20deg) rotateZ(-2deg) translateY(-4px); }

/* Comics: a comic page with panels, a POW burst and a speech bubble */
.sv-comic { position: absolute; left: 50%; top: 50%; width: 150px; height: 172px; margin: -88px 0 0 -75px; perspective: 700px; }
.sv-comic__page { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.1fr 1fr; gap: 5px; padding: 7px; border-radius: 2px; background: #fffdf6; transform: rotateY(-18deg) rotateX(8deg) rotate(-4deg); box-shadow: 6px 6px 0 #e3d7bb, 0 26px 30px -10px rgba(6, 6, 24, .7); transition: transform .8s var(--ease); }
.sv-comic__p { position: relative; overflow: hidden; border: 2px solid #2a2634; background: #2e2d3b; }
.sv-comic__p img { width: 100%; height: 100%; object-fit: cover; }
.sv-comic__p--a { grid-column: 1 / -1; }
.sv-comic__p--a img { object-position: 50% 4%; }
.sv-comic__p--b img { object-position: 50% 30%; }
.sv-comic__p--c img { object-position: 40% 78%; }
.sv-comic__pow { position: absolute; right: -40px; top: -10px; width: 78px; height: 66px; display: grid; place-items: center; background: #ffd23f; color: #b5172f; font: 900 .86rem/1 var(--sans); letter-spacing: .02em; transform: rotate(12deg); transition: transform .6s var(--ease);
  clip-path: polygon(50% 0, 60% 25%, 88% 8%, 76% 37%, 100% 50%, 76% 63%, 88% 92%, 60% 75%, 50% 100%, 40% 75%, 12% 92%, 24% 63%, 0 50%, 24% 37%, 12% 8%, 40% 25%); }
.sv-comic__bubble { position: absolute; left: -36px; bottom: 26px; padding: 6px 11px; border: 2px solid #2a2634; border-radius: 50%; background: #fff; color: #2a2634; font: italic 800 .72rem/1 var(--sans); }
.sv-comic__bubble::after { content: ''; position: absolute; right: 2px; bottom: -8px; width: 10px; height: 10px; background: #fff; border-right: 2px solid #2a2634; border-bottom: 2px solid #2a2634; transform: skewX(30deg) rotate(20deg); }
.svc:hover .sv-comic__page, .svc:focus-visible .sv-comic__page { transform: rotateY(-4deg) rotateX(2deg) rotate(-1deg); }
.svc:hover .sv-comic__pow, .svc:focus-visible .sv-comic__pow { transform: rotate(-4deg) scale(1.15); }

/* Character design: a 3D turntable of character cards on a glowing pedestal (spins on hover) */
.sv-char { position: absolute; left: 50%; top: 50%; width: 220px; height: 176px; margin: -90px 0 0 -110px; perspective: 760px; }
.sv-char__glow { position: absolute; left: 50%; top: 0; width: 200px; height: 170px; margin-left: -100px; background: radial-gradient(closest-side, rgba(216, 180, 106, .32), transparent); }
.sv-char__base { position: absolute; left: 50%; bottom: 4px; width: 176px; height: 36px; margin-left: -88px; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #34407a, #1e2754 72%); box-shadow: 0 0 0 2px rgba(216, 180, 106, .6), 0 5px 0 #161e44, 0 20px 26px -6px rgba(6, 6, 24, .7); }
.sv-char__spin { position: absolute; left: 50%; bottom: 22px; width: 92px; height: 116px; margin-left: -46px; transform-style: preserve-3d; transform: rotateX(-6deg) rotateY(0deg); transition: transform 1.3s var(--ease); }
.sv-char__card { position: absolute; inset: 0; overflow: hidden; border: 2px solid #f4ecdc; border-radius: 10px; background: #f4ecdc; box-shadow: 0 16px 22px -8px rgba(6, 6, 24, .66); }
.sv-char__card img { width: 100%; height: 100%; object-fit: cover; }
.sv-char__card--c { transform: rotateY(0deg) translateZ(62px); }
.sv-char__card--l { transform: rotateY(-58deg) translateZ(62px); filter: brightness(.82); }
.sv-char__card--r { transform: rotateY(58deg) translateZ(62px); filter: brightness(.82); }
.sv-char__card--c img { object-position: 50% 25%; }
.sv-char__card--r img { object-position: 92% 40%; }
.svc:hover .sv-char__spin, .svc:focus-visible .sv-char__spin { transform: rotateX(-6deg) rotateY(-58deg); }

/* Map illustration: a folded paper map lying in 3D with a location pin */
.sv-map { position: absolute; left: 50%; top: 50%; width: 220px; height: 150px; margin: -70px 0 0 -110px; perspective: 700px; }
.sv-map__sheet { position: absolute; inset: 0; display: flex; transform: rotateX(50deg) rotateZ(-12deg); box-shadow: 0 34px 30px -12px rgba(6, 6, 24, .7); transition: transform .9s var(--ease); }
.sv-map__fold { position: relative; flex: 1; height: 100%; background: #2f5d4f url(../images/thumbs-sm/map-03.webp) no-repeat; background-size: 400% 100%; background-position: calc(var(--i) * 33.333%) 50%; }
.sv-map__fold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(6, 6, 24, .18)); }
.sv-map__fold:nth-child(even)::after { background: linear-gradient(90deg, rgba(6, 6, 24, .21), rgba(255, 255, 255, .1)); }
.sv-map__fold:nth-child(odd) { transform: translateY(-3px); }
.sv-map__pin { position: absolute; left: 50%; top: 10px; width: 26px; height: 37px; margin-left: 4px; fill: #e2564b; filter: drop-shadow(0 3px 2px rgba(6, 6, 24, .37)); transition: transform .6s var(--ease); }
.sv-map__pin circle { fill: #fff7e6; }
.sv-map__pinshadow { position: absolute; left: 50%; top: 48px; width: 18px; height: 6px; margin-left: 8px; border-radius: 50%; background: rgba(6, 6, 24, .37); filter: blur(1.5px); transition: transform .6s var(--ease), opacity .6s; }
.svc:hover .sv-map__sheet, .svc:focus-visible .sv-map__sheet { transform: rotateX(38deg) rotateZ(-6deg); }
.svc:hover .sv-map__pin, .svc:focus-visible .sv-map__pin { transform: translateY(-10px); }
.svc:hover .sv-map__pinshadow, .svc:focus-visible .sv-map__pinshadow { transform: scale(.7); opacity: .6; }

/* Line art & sketch: a spiral sketchbook with a line drawing and a pencil */
.sv-sketch { position: absolute; left: 50%; top: 50%; width: 210px; height: 176px; margin: -86px 0 0 -105px; perspective: 800px; }
.sv-sketch__book { position: absolute; left: 26px; top: 12px; width: 150px; height: 150px; transform: rotateX(14deg) rotate(-5deg); transition: transform .9s var(--ease); }
.sv-sketch__page { position: absolute; inset: 0; padding: 16px 10px 10px; border-radius: 3px; background: #fbf8f1; box-shadow: 5px 5px 0 #3c3c43, 0 24px 26px -10px rgba(6, 6, 24, .7); }
.sv-sketch__page img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.sv-sketch__rings { position: absolute; left: 8px; right: 8px; top: -7px; height: 15px; background: radial-gradient(circle at 50% 50%, transparent 3px, #8d8d99 3.5px, #e6e6ee 5px, transparent 5.6px) 0 0 / 12px 15px repeat-x; }
.sv-sketch__pencil { position: absolute; right: -14px; bottom: 26px; width: 156px; height: 18px; transform: rotate(-30deg); filter: drop-shadow(0 7px 4px rgba(6, 6, 24, .41)); transition: transform .8s var(--ease); }
.sv-sketch__pencil .pe-wood { fill: #f0c04a; } .sv-sketch__pencil .pe-band { fill: #b9b9c4; } .sv-sketch__pencil .pe-eraser { fill: #e98a8a; }
.sv-sketch__pencil .pe-tip { fill: #f2d7a8; } .sv-sketch__pencil .pe-lead { fill: #383844; } .sv-sketch__pencil .pe-line { stroke: rgba(6, 6, 24, .11); stroke-width: 1; fill: none; }
.svc:hover .sv-sketch__book, .svc:focus-visible .sv-sketch__book { transform: rotateX(6deg) rotate(-2deg); }
.svc:hover .sv-sketch__pencil, .svc:focus-visible .sv-sketch__pencil { transform: translate(-14px, -8px) rotate(-22deg); }

/* Ink & watercolor: a watercolor sheet, paint washes, a palette and a brush */
.sv-paint { position: absolute; left: 50%; top: 50%; width: 236px; height: 176px; margin: -88px 0 0 -118px; }
.sv-paint__wash { position: absolute; border-radius: 50%; filter: blur(12px); opacity: .5; }
.sv-paint__wash--a { left: 0; top: 4px; width: 120px; height: 96px; background: radial-gradient(#3f7cc2, transparent 70%); }
.sv-paint__wash--b { right: 6px; bottom: 0; width: 130px; height: 86px; background: radial-gradient(#e2564b, transparent 70%); }
.sv-paint__paper { position: absolute; left: 14px; top: 14px; width: 154px; height: 114px; padding: 7px; background: #fbf7ee; border-radius: 3px 7px 4px 8px / 7px 3px 8px 4px; transform: rotate(-4deg); box-shadow: 0 20px 24px -10px rgba(6, 6, 24, .7); transition: transform .8s var(--ease); }
.sv-paint__paper img { width: 100%; height: 100%; object-fit: cover; }
.sv-paint__palette { position: absolute; right: 2px; bottom: 4px; width: 112px; height: 75px; transform: rotate(10deg); filter: drop-shadow(0 10px 8px rgba(6, 6, 24, .49)); }
.sv-paint__palette .pa-board { fill: #e8d3ad; stroke: #b99a68; stroke-width: 1.5; }
.sv-paint__brush { position: absolute; right: 22px; bottom: 70px; width: 132px; height: 15px; transform: rotate(-22deg); transform-origin: 80% 50%; filter: drop-shadow(0 6px 4px rgba(6, 6, 24, .41)); transition: transform .8s var(--ease); }
.sv-paint__brush .br-handle { fill: #6a2418; } .sv-paint__brush .br-ferrule { fill: #c9c1b2; } .sv-paint__brush .br-tip { fill: #3f7cc2; }
.svc:hover .sv-paint__paper, .svc:focus-visible .sv-paint__paper { transform: rotate(-1deg) translateY(-3px); }
.svc:hover .sv-paint__brush, .svc:focus-visible .sv-paint__brush { transform: rotate(-8deg) translate(-12px, 4px); }

/* Vehicle wraps: the wrapped truck in a photo studio on a turntable */
.sv-van { position: absolute; left: 50%; top: 50%; width: 240px; height: 176px; margin: -88px 0 0 -120px; perspective: 800px; }
.sv-van__studio { position: absolute; left: 14px; right: 14px; top: 14px; height: 116px; border-radius: 14px 14px 4px 4px; background: radial-gradient(120% 95% at 50% 32%, #fbf7ee, #d8d1c3 78%); box-shadow: inset 0 -24px 30px -22px rgba(6, 6, 24, .25), 0 18px 28px -14px rgba(6, 6, 24, .66); }
.sv-van__floor { position: absolute; left: 50%; bottom: 6px; width: 214px; height: 42px; margin-left: -107px; border-radius: 50%; background: radial-gradient(ellipse at 50% 38%, #3a4478, #1e2754 72%); box-shadow: 0 0 0 2px rgba(216, 180, 106, .6), 0 5px 0 #161e44, 0 18px 24px -6px rgba(6, 6, 24, .7); }
.sv-van__car { position: absolute; left: 50%; bottom: 22px; width: 164px; margin-left: -82px; }   /* no transform here: the multiply blend must reach the studio backdrop */
.sv-van__car img { width: 100%; height: auto; mix-blend-mode: multiply; transform: perspective(600px) rotateY(-10deg); transition: transform .9s var(--ease); }
.svc:hover .sv-van__car img, .svc:focus-visible .sv-van__car img { transform: perspective(600px) rotateY(10deg) scale(1.05); }

/* Book Cover Design keeps the hardcover book (CSS fallback below, real 3D book when WebGL is on) */
.sv--cover .svc-book { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sv, .sv * { transition: none !important; }
}

/* credited work (pictures by other artists, shown with their credit) */
.tile__credit { display: block; margin-top: 4px; font: 600 .7rem/1.3 var(--sans); letter-spacing: .04em; color: var(--coral); }
.viewer.is-credited .viewer__dl--meta > div:nth-child(3), .viewer.is-credited .viewer__dl--meta > div:nth-child(4), .viewer.is-credited .viewer__info > .btn { display: none; }

/* first moment after load, while the 3D book is still being built: show the closed CSS cover in its place */
.wait3d #heroBook .cssbook { display: block; }
.wait3d #heroBook .cssbook__spread { display: none; }
.wait3d #heroBook .cssbook__cover { left: 22%; right: 22%; }

/* ---------- Work: one category on (#work/comic …) → only that category: "Featured stories" is hidden ---------- */
.work.is-filtered #featuredLabel, .work.is-filtered #featured { display: none; }
.grid-head { scroll-margin-top: 96px; }
.chip--link { border-style: dashed; color: var(--text-3); white-space: nowrap; }
.chip--link:hover { color: var(--gold); }
.chip--link.is-done { border-style: solid; border-color: var(--gold); color: var(--gold); }
.chip--link[hidden] { display: none; }
/* without the blur the bar needs a little more tint, so text scrolling underneath never shows through */
.no-blur .nav.is-solid, .lite-glass .nav.is-solid { background: rgb(23, 32, 64); }
/* phones / tablets (class lite-glass, set in main.js): the same tinted glass without the live blur — the blur is
   re-computed over the moving 3D background every frame and is the heaviest effect on a phone */
.lite-glass .glass, .lite-glass .drawer__panel, .lite-glass .viewer__info { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--glass-strong); }
.lite-glass .nav.is-solid { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* slow start only: the CSS cover fades out while the 3D book rises in */
.wait3d-out #heroBook .cssbook { opacity: 0; transition: opacity .6s var(--ease); }

/* ---------- Services panel in the nav (all 8 service pages) ---------- */
.nav__dd { display: inline-flex; align-items: center; gap: 2px; }
.nav__dd-btn { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
.nav__dd-btn i { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.nav__dd-btn:hover, .nav__dd.is-open .nav__dd-btn { color: var(--gold); }
.nav__dd.is-open .nav__dd-btn i { transform: translateY(1px) rotate(225deg); }
.nav__mega { position: absolute; top: calc(100% + 10px); left: 50%; width: min(620px, 92vw); padding-top: 4px; transform: translate(-50%, 8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s var(--ease), transform .35s var(--ease), visibility .25s; z-index: 5; }
.nav__dd:hover .nav__mega, .nav__dd:focus-within .nav__mega, .nav__dd.is-open .nav__mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .25s var(--ease), transform .35s var(--ease), visibility 0s; }
.nav__mega::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* hover bridge: the panel stays open while the pointer moves down to it */
.nav__mega-in { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(34, 42, 80, .97); box-shadow: 0 30px 70px -30px rgba(13, 13, 60, .8); }
.nav__links .nav__mega a { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 12px; white-space: normal; font-size: .86rem; color: var(--text-2); }
.nav__links .nav__mega a:hover, .nav__links .nav__mega a:focus-visible, .nav__links .nav__mega a[aria-current] { background: rgba(216, 180, 106, .12); color: var(--text); }
.nav__mega a i { font: 700 .62rem/1 var(--sans); letter-spacing: .12em; color: var(--gold); font-style: normal; }
.nav__mega a b { font-weight: 600; }
/* phone menu: the 8 services under "Services" */
.menu__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; padding: 6px 0 12px 42px; border-bottom: 1px solid var(--line-soft); }
.menu nav .menu__sub a { display: block; padding: 7px 0; border: 0; font: 600 .9rem/1.3 var(--sans); color: var(--text-2); }
.menu nav .menu__sub a[aria-current] { color: var(--gold); }
@media (max-width: 420px) { .menu__sub { grid-template-columns: 1fr; padding-left: 42px; } }

/* ---------- service cards: full page link, Quick look (drawer) and Upwork ---------- */
.svc__foot { flex-wrap: wrap; gap: 8px 16px; }
.svc__foot .svc__up { margin-left: auto; }
.svc__quick { padding: .35em .8em; border: 1px solid var(--line-soft); border-radius: 999px; background: transparent; color: var(--text-2); font: 700 .74rem/1.2 var(--sans); cursor: pointer; transition: border-color .3s, color .3s; }
.svc__quick:hover, .svc__quick:focus-visible { border-color: var(--gold); color: var(--gold); }
.drawer__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.drawer__ctas .drawer__cta { margin-top: 0; }

/* ---------- page transition: a short soft fade to the page colour, and a fade back in on the next page.
   Only opacity changes, which the graphics card handles on its own, so it stays smooth even while the next page loads. */
.ink-go { position: fixed; inset: 0; z-index: 900; pointer-events: none; background: radial-gradient(60vw 50vw at 50% 45%, #2a2f5c, var(--bg) 70%); opacity: 0; transition: opacity .22s ease-out; will-change: opacity; }
.ink-go.is-on { opacity: 1; }
html.ink-arrive::after { content: ''; position: fixed; inset: 0; z-index: 900; pointer-events: none; background: radial-gradient(60vw 50vw at 50% 45%, #2a2f5c, var(--bg) 70%); animation: inkFade .42s ease-out .03s both; will-change: opacity; }
@keyframes inkFade { from { opacity: 1; } to { opacity: 0; } }

/* ==========================================================================
   FX — hover system (js/shared.js → fx). Mouse / trackpad only; off with reduced motion.
   ========================================================================== */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
/* cards lean toward the pointer (rotate / translate are set by the script; they combine with any animation transform) */
.masonry, .sp-bento, .sp-cards, .sp-rel, .sp-specs, .sp-price, .skill-groups, .t-track, .sp-ptrack, .process__track { perspective: 1200px; }
[data-tilt] { position: relative; }
.fx-shine, .fx-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s cubic-bezier(.22, 1, .36, 1); }
.fx-shine { z-index: 3; background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 244, 214, .2), transparent 48%), linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .13) 48%, transparent 58%) calc(var(--gx, 50%) * 1.4 - 20%) 0 / 260% 100% no-repeat; }
.fx-edge { z-index: 4; padding: 1px; background: conic-gradient(from var(--ang), transparent 0 18%, #f0d48f 30%, #e39a63 40%, transparent 54% 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
[data-tilt].is-tilt .fx-shine, [data-tilt].is-tilt .fx-edge { opacity: 1; }
[data-tilt].is-tilt .fx-edge, [data-tilt]:focus-visible .fx-edge { opacity: 1; animation: fxSpin 3.2s linear infinite; }
@keyframes fxSpin { to { --ang: 360deg; } }
/* depth: the picture inside moves a little against the tilt, and zooms in */
.fx-on [data-tilt] .tile__img img, .fx-on [data-tilt] .pstep__img img { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -10px); transition: transform 1s cubic-bezier(.22, 1, .36, 1); }
.fx-on .tile:hover .tile__img img { transform: scale(1.06); }
/* gallery cards: the page corner peels up on hover */
.fx-peel { position: absolute; right: 0; bottom: 0; z-index: 3; width: 58px; height: 58px; background: linear-gradient(315deg, var(--bg) 0 49%, #f6ecd6 50%, #e3d4b4 72%, #fff8e8); border-radius: 0 0 0 6px; transform: scale(0); transform-origin: 100% 100%; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); filter: drop-shadow(-3px -3px 4px rgba(6, 6, 24, .35)); pointer-events: none; }
.tile:hover .fx-peel, .tile:focus-visible .fx-peel { transform: scale(1); }
/* buttons: a light sweep on hover, a squash-and-bounce press */
.btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%); transform: translateX(-130%); transition: transform .85s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.btn--ghost::after { background: linear-gradient(110deg, transparent 32%, rgba(216, 180, 106, .28) 50%, transparent 68%); }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(130%); }
.btn:active { scale: .95; transition: transform .45s var(--ease), scale .08s ease-out, background-color .3s, border-color .3s, color .3s; }
.btn span[aria-hidden] { display: inline-block; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.btn:hover span[aria-hidden] { transform: translate(2px, -2px); }
.fx-spark { position: fixed; z-index: 380; width: 12px; height: 12px; pointer-events: none; background: radial-gradient(closest-side, #fff8dd, #f0d48f 60%, rgba(240, 212, 143, 0)); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
/* nav links: a hand-drawn gold underline draws in */
.nav__links a.nav__a::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 0; height: 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C 10 1, 18 6, 28 3 S 46 1, 59 3.5' fill='none' stroke='%23d8b46a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.nav__links a.nav__a:hover::after, .nav__links a.nav__a:focus-visible::after { transform: scaleX(1); }
.nav__links a.nav__a.is-active::after { display: none; }
/* round buttons wiggle; FAQ answers open with a small bounce */
.round-btn:hover:not(:disabled) { animation: fxWiggle .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes fxWiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -10deg; } 60% { rotate: 7deg; } }
.qa.is-open { animation: fxBounce .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes fxBounce { 0% { scale: .985; } 55% { scale: 1.012; } 100% { scale: 1; } }
.qa button i::before, .qa button i::after { transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
/* gold italic words: a soft shimmer runs across the letters once, and again when you hover the heading */
.ch.gold { animation: goldShim 1.4s cubic-bezier(.22, 1, .36, 1) calc(1.3s + var(--ci, 0) * 45ms) both; }
h1:hover .ch.gold, h2:hover .ch.gold { animation-name: goldShim2; animation-delay: calc(var(--ci, 0) * 40ms); }
@keyframes goldShim { 0%, 100% { filter: brightness(1); } 40% { filter: brightness(1.45) saturate(1.1); } }
@keyframes goldShim2 { 0%, 100% { filter: brightness(1); } 40% { filter: brightness(1.45) saturate(1.1); } }
/* cursor: smoother morph; over pictures it blends instead of covering them */
.cursor__ring { transition: transform .45s cubic-bezier(.22, 1, .36, 1), background-color .3s, border-color .3s; }
.has-cursor .cursor:not(.is-label) { mix-blend-mode: difference; }
.reduce .ch.gold, .reduce .qa.is-open, .reduce .round-btn:hover { animation: none !important; }
.reduce .btn::after, .reduce .fx-peel { display: none; }


/* ---------- v8: office content round ---------- */
.how-sub { margin: -4px 0 14px; font: italic 400 .98rem/1.5 var(--serif); color: var(--text-2); }
.how li b { color: var(--text); font-weight: 700; }
.tile__case { color: var(--coral, #f2a38a); letter-spacing: .14em; }
.contact__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.contact__tag { margin: var(--s4) 0 0; font: italic 400 1rem/1.5 var(--serif); color: var(--gold); text-align: center; }
.viewer__info { max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.viewer__story { display: grid; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(236, 208, 143, .22); }
.viewer__story[hidden] { display: none; }
.viewer__story-t { margin: -6px 0 0; font: italic 400 1.08rem/1.4 var(--serif); color: var(--gold); }
.viewer.has-story .viewer__dl--meta > div:first-child { display: none; }
@media (max-width: 980px) { .viewer__info { max-height: none; overflow: visible; } }
@media (max-width: 980px) {
  .viewer { grid-template-rows: auto auto; align-content: start; }
  .viewer__stage { min-height: min(46vh, 360px); padding-top: 44px; }
}