/* Artrix v2 - direction A, palette 3 (warm paper, warm-grey frame, ink, deep teal).
   Type and spacing are tokens so the trend research can retune them in one place. */
:root {
  --bg: #F4F2EC; --bg2: #ECE9E1; --frame: #DCD8CC; --fg: #121212; --fg2: #57574F; --fg3: #6E6C66;
  --line: rgba(18, 18, 18, .12); --accent: #08766D; --accent-hi: #14B8A6;
  --pad: clamp(18px, 3.4vw, 52px); --radius: 22px;
  --sans: 'Inter', system-ui, sans-serif; --serif: 'Newsreader', Georgia, serif; --mono: 'Space Mono', ui-monospace, monospace;
  --h-w: 500; --h-ls: -.045em;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--fg); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--fg); color: var(--bg); padding: 10px 14px; }
.lbl, .tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* pills */
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background .2s, color .2s, transform .2s; }
.pill.dark { background: var(--fg); color: var(--bg); }
.pill.dark:hover { background: var(--accent); }
.pill.soft { background: #fff; }
.pill.soft:hover { background: var(--frame); }
.pill.line { box-shadow: inset 0 0 0 1px var(--fg); }
.pill.line:hover { background: var(--fg); color: var(--bg); }
.pill.big { min-height: 56px; padding: 0 28px; font-size: 16px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 16px var(--pad); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; font-weight: 600; letter-spacing: -.01em; min-height: 44px; }
.brand svg { width: 22px; }
.nav nav { display: flex; gap: 8px; }
@media (max-width: 640px) { .nav .pill.soft { display: none; } }

/* hero */
.hero { padding: 8px var(--pad) 0; }
.hero-top { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: end; margin-bottom: 28px; }
h1 { font-size: clamp(42px, 5.6vw, 92px); font-weight: var(--h-w); line-height: 1; letter-spacing: var(--h-ls); text-wrap: balance; }
h1 em { font-style: normal; color: var(--accent); }
.hero-side { justify-self: end; max-width: 46ch; display: grid; gap: 18px; }
.hero-side p { color: var(--fg2); font-size: 17px; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.frame { position: relative; height: min(66vh, 680px); min-height: 360px; border-radius: var(--radius); overflow: hidden; background: var(--frame); }
.frame canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
/* scroll-linked hero: the canvas covers the window behind the content, so the marks can leave
   the frame and travel down the page; the frame keeps its colour as a plain box underneath */
.gl-flow #hero-gl { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; transition: opacity .3s; }
.gl-flow .hero-top, .gl-flow main > section:not(.hero) > *, .gl-flow .foot, .gl-flow .nav { position: relative; z-index: 2; }
.gl-flow .nav { position: sticky; z-index: 50; }
.gl-flow .frame .tag { z-index: 2; }
.frame .tag { position: absolute; color: #4A4840; padding: 5px 9px; border-radius: 999px; background: rgba(220, 216, 204, .82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.frame .tl { left: 14px; top: 14px; } .frame .br { right: 14px; bottom: 14px; }
.no-js .stage .frame, .stage .frame.no-gl { background: var(--frame) url(../../../media/reel/hero-still.webp) center/cover; }
@media (max-width: 860px) { .hero-top { grid-template-columns: 1fr; } .hero-side { justify-self: start; } .frame { height: 56vh; } }
@media (hover: none) { .frame .tl { display: none; } }

/* sections */
section { padding: clamp(80px, 12vh, 150px) var(--pad) 0; }
.sec-head { display: grid; grid-template-columns: 1fr 2fr; gap: 12px 32px; align-items: baseline; margin-bottom: clamp(28px, 5vh, 56px); border-top: 1px solid var(--line); padding-top: 18px; }
.sec-head .lbl { color: var(--accent); }
.sec-head h2 { font-size: clamp(34px, 4.4vw, 72px); font-weight: var(--h-w); letter-spacing: var(--h-ls); line-height: 1; }
.sec-head p { grid-column: 2; color: var(--fg2); max-width: 52ch; }
@media (max-width: 760px) { .sec-head { grid-template-columns: 1fr; } .sec-head p { grid-column: 1; } }
.more { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 26px; }
.more a { border-bottom: 1px solid var(--fg); padding: 10px 0 2px; }
.more a:hover { color: var(--accent); border-color: var(--accent); }
.n { font-family: var(--mono); font-size: 11px; color: var(--fg3); }

/* how */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.steps li { background: #fff; border-radius: 18px; padding: 24px; display: grid; gap: 10px; align-content: start; min-height: 200px; }
.steps b { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; margin-top: auto; }
.steps span:last-child { color: var(--fg2); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .steps li { min-height: 0; } }

/* pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan { background: #fff; border-radius: 22px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.plan.hot { background: var(--fg); color: var(--bg); }
.plan.hot .lbl, .plan.hot p, .plan.hot li { color: #B9B7AF; }
.plan.hot .pill.dark { background: var(--bg); color: var(--fg); }
.plan .lbl { color: var(--fg3); }
.price { font-size: clamp(44px, 4.6vw, 72px); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.price small { font-size: .28em; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.plan p { font-size: 15px; }
.plan ul { list-style: none; display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); flex: 1; font-size: 14px; color: var(--fg2); }
.plan.hot ul { border-color: rgba(244, 242, 236, .16); }
.plan ul li::before { content: '\2192  '; color: var(--accent); }
.plan.hot ul li::before { color: var(--accent-hi); }
.plan .pill { justify-content: center; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }


/* faq */
.qs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 18px 0; cursor: pointer; font-size: 17px; font-weight: 500; }
summary::-webkit-details-marker { display: none; }
summary i { flex: none; width: 12px; height: 12px; position: relative; margin-top: 6px; }
summary i::before, summary i::after { content: ''; position: absolute; inset: 5px 0 auto; height: 2px; background: currentColor; transition: transform .25s; }
summary i::after { transform: rotate(90deg); } details[open] summary i::after { transform: none; }
details p { color: var(--fg2); padding-bottom: 20px; max-width: 62ch; }
@media (max-width: 760px) { .qs { grid-template-columns: 1fr; } }

/* close + foot */
.close { padding-bottom: clamp(80px, 12vh, 140px); }
.close h2 { font-size: clamp(64px, 13vw, 230px); font-weight: var(--h-w); letter-spacing: -.06em; line-height: .9; }
.close p { color: var(--fg2); margin: 18px 0 24px; }
.mail { font-family: var(--mono); font-size: clamp(14px, 1.5vw, 20px); border-bottom: 1px solid var(--accent); padding: 10px 0 2px; margin-left: 10px; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 24px var(--pad); border-top: 1px solid var(--line); color: var(--fg3); font-size: 14px; }
.fl { display: flex; flex-wrap: wrap; gap: 0 20px; }
.fl a { display: inline-flex; align-items: center; min-height: 44px; }
.fl a:hover { color: var(--accent); }

/* type: one serif-italic word per headline, mono labels in brackets (late-2026 agency pattern) */
h1 i, h2 i, .close h2 i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
h1 em i { color: inherit; }
.lbl.br::before { content: '[ '; } .lbl.br::after { content: ' ]'; }

/* closing frame: the logo assembles on the right, the words sit on the left */
.close .frame.end { height: auto; min-height: min(82vh, 760px); display: flex; align-items: flex-end; padding: clamp(24px, 4vw, 56px); }
.end-text { max-width: 56%; }
.close .end-text h2 { font-size: clamp(56px, 8.4vw, 150px); }
.gl-flow .close > .frame { z-index: 0; }
.gl-flow .close .end-text { position: relative; z-index: 2; }
.close .frame .tag { position: absolute; z-index: 2; right: 22px; top: 20px; bottom: auto; }
@media (max-width: 760px) { .close .frame.end { min-height: 92vh; align-items: flex-start; } .end-text { max-width: none; } }

/* ------------------------------------------------ stage: the pinned hero -> reel dive */
.stage { position: relative; padding: 0; }
.stage .pin { padding: 8px var(--pad) var(--pad); }
.stage-reel { position: relative; margin: 24px 0 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 8; background: var(--frame); }
.stage-reel video { width: 100%; height: 100%; object-fit: cover; }
.stage-reel figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 3vw, 40px); color: #F4F2EC; background: linear-gradient(transparent 45%, rgba(10, 10, 10, .7)); pointer-events: none; }
.stage-reel .big { font-size: clamp(64px, 12vw, 200px); font-weight: 500; letter-spacing: -.06em; line-height: .85; }
.stage-reel .lbl { margin-top: 10px; color: rgba(244, 242, 236, .85); }
/* one small label naming what the reel is showing right now (cues from blender/reel.py, js/site.js) */
.stage-reel figcaption[data-cues] { background: linear-gradient(transparent 70%, rgba(10, 10, 10, .45)); }
.stage-reel .kind, .reel-kind { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(15px, 1.3vw, 19px); font-weight: 500; letter-spacing: -.01em;
  color: #F4F2EC; background: rgba(12, 12, 12, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 9px 16px 9px 14px; border-radius: 999px; width: max-content; transition: opacity .35s ease, transform .35s ease; }
.stage-reel .kind::before, .reel-kind::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2DD4C4; }
.stage-reel .kind.out, .reel-kind.out { opacity: 0; transform: translateY(6px); }
/* with the dive, the label leaves the reel's box and stays on screen from the moment the reel shows on the logo's
   core until the reel lands in the work section (js/handoff.js sets its opacity) */
.reel-kind { position: fixed; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px); z-index: 6; pointer-events: none; opacity: 0; }
.reel-kind.out { transform: translateY(6px); }
.stage-bg { display: none; }

.gl-flow .stage { height: 330vh; margin-top: -72px; }
.gl-flow .stage .pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: 80px var(--pad) var(--pad); overflow: hidden; }
.gl-flow .stage-bg { display: block; position: absolute; inset: 0; background: var(--frame); opacity: clamp(0, calc((var(--p, 0) - .02) * 7), 1); pointer-events: none; }
.gl-flow .stage .hero-top { position: relative; z-index: 2; opacity: clamp(0, calc(1 - var(--p, 0) * 9), 1); transform: translateY(calc(var(--p, 0) * -260px)); }
.gl-flow .stage .frame { flex: 1; min-height: 0; height: auto; z-index: 0; }
.gl-flow .stage .frame .tag { opacity: clamp(0, calc(1 - var(--p, 0) * 14), 1); }
.gl-flow #hero-gl { z-index: 1; }
@media (max-width: 760px) { .gl-flow .stage { height: 280vh; } .stage-reel { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------ reel -> work handoff (js/handoff.js)
   The reel is lifted out of the pin into one fixed layer. Once it fills the screen, the work section has
   already slid into place underneath it and holds there (sticky, for one screen of scroll); the reel then
   shrinks, transform only, into the first piece's media slot - the sticky preview on desktop, the first card
   on phones - and cross-fades into that piece. Scrolling back reverses it. */
.gl-flow .stage-reel { position: fixed; top: 0; left: 0; right: 0; height: 100vh; margin: 0; z-index: 4; aspect-ratio: auto; pointer-events: none;
  border-radius: 0; background: transparent; transform-origin: 0 0; will-change: transform, opacity; contain: strict;
  opacity: clamp(0, calc((var(--p, 0) - .6) * 12), 1); }
.gl-flow .stage-reel video { position: absolute; width: auto; height: auto; max-width: none; object-fit: fill; transform-origin: 50% 50%; will-change: transform; transition: opacity .5s ease; }
.gl-flow .stage-reel figcaption { opacity: 0; }
.gl-flow .stage-reel.docked video { opacity: 0; }
.gl-flow .stage { --wt: calc(88px - clamp(80px, 12vh, 150px)); margin-bottom: calc(var(--wt) - 132vh); }   /* the work section arrives under the full reel at p .86 */
.gl-flow .work-hold { position: relative; }
.gl-flow .work { position: sticky; top: calc(88px - clamp(80px, 12vh, 150px)); z-index: 2; }
.gl-flow .work > * { position: relative; z-index: 2; }
.gl-flow .hold-sp { display: block; height: 100vh; }
.hold-sp { display: none; }
.gl-flow .work.rx-wait { opacity: 0; pointer-events: none; }
.gl-flow.rx-on .stage .pin, .gl-flow.rx-on .stage-bg { visibility: hidden; }
.gl-flow .rx-slot { opacity: 0; transition: opacity .5s ease; }
.gl-flow .rx-slot.rx-in { opacity: 1; }
.rx-init .rx-slot, .rx-init .stage-reel video { transition: none !important; }
@media (max-width: 760px) { .gl-flow .stage { margin-bottom: calc(var(--wt) - 125vh); } }