:root {
  --ink: #0a0a0a;
  --paper: #f3f1eb;
  --white: #fff;
  --muted: #a4a4a4;
  --cyan: #00b7d9;
  --magenta: #ed007a;
  --yellow: #ffbf00;
  --key: #111;
  --shell: min(1480px, calc(100vw - 64px));
  --radius: 2px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { color: var(--ink); background: var(--yellow); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 999; top: 8px; left: 8px; transform: translateY(-150%); background: white; padding: 12px 16px; }
.skip-link:focus { transform: none; }
.shell { width: var(--shell); margin-inline: auto; }
.section-dark { color: var(--white); background: var(--ink); }
.section-paper { color: var(--ink); background: var(--paper); }
.eyebrow { margin: 0 0 30px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: 11px; }
.display { margin: 0; font-size: clamp(46px, 6.6vw, 118px); line-height: .91; letter-spacing: -.065em; font-weight: 700; }
.display em, .contact-title em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; }
.lead { max-width: 620px; font-size: clamp(19px, 2vw, 28px); line-height: 1.35; letter-spacing: -.02em; }
.reveal { opacity: 0; transform: translateY(42px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

body.is-loading { overflow: hidden; }
.intro { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; color: var(--ink); background: var(--paper); transition: transform .95s var(--ease), visibility .95s step-end; }
.intro.is-done { transform: translateY(-105%); visibility: hidden; }
.intro-inner { display: grid; justify-items: center; gap: 14px; }
.intro-symbol { width: 126px; height: 126px; object-fit: contain; animation: introSpin 1.55s var(--ease) both; }
.intro p { margin: 0; text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 700; opacity: 0; animation: introText .55s ease .65s forwards; }
.intro-line { width: 126px; height: 4px; display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; opacity: 0; animation: introText .45s ease .8s forwards; }
.intro-line i:nth-child(1) { background: var(--cyan); }
.intro-line i:nth-child(2) { background: var(--magenta); }
.intro-line i:nth-child(3) { background: var(--yellow); }
.intro-line i:nth-child(4) { background: var(--key); }
@keyframes introSpin { 0% { opacity: 0; transform: rotate(-90deg) scale(.72); } 20% { opacity: 1; } 75% { transform: rotate(330deg) scale(1.04); } 100% { opacity: 1; transform: rotate(360deg) scale(1); } }
@keyframes introText { to { opacity: 1; } }

.site-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 92px; padding: 0 max(24px, calc((100vw - 1480px) / 2)); display: flex; align-items: center; justify-content: space-between; color: var(--ink); background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(10,10,10,.1); backdrop-filter: blur(16px); transition: height .35s ease, box-shadow .35s ease; }
.site-header.is-scrolled { height: 74px; box-shadow: 0 10px 36px rgba(0,0,0,.08); }
.brand { position: relative; z-index: 2; width: 198px; padding: 0; background: transparent; transition: width .35s ease; }
.is-scrolled .brand { width: 176px; }
.site-nav { display: flex; align-items: center; gap: 32px; color: var(--ink); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.site-nav a { position: relative; }
.site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { display: inline-flex; align-items: center; gap: 20px; border: 1px solid currentColor; padding: 12px 16px; }
.nav-cta span { font-size: 18px; }
.menu-toggle { display: none; position: relative; z-index: 3; width: 48px; height: 48px; border: 0; background: white; }
.menu-toggle span:not(.sr-only) { position: absolute; left: 13px; width: 22px; height: 1px; background: #111; transition: transform .3s ease, top .3s ease; }
.menu-toggle span:first-child { top: 19px; }
.menu-toggle span:nth-child(2) { top: 28px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 24px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { top: 24px; transform: rotate(-45deg); }

.hero { position: relative; min-height: 100svh; color: white; background: #111; overflow: hidden; }
.hero-media, .hero-overlay, .hero-grid { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 112%; object-fit: cover; object-position: center 42%; transform: scale(1.05); will-change: transform; }
.hero-overlay { background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.36) 54%, rgba(0,0,0,.18) 100%), linear-gradient(0deg, rgba(0,0,0,.65), transparent 45%); }
.hero-grid { opacity: .16; background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px); background-size: calc(100vw / 12) calc(100vw / 12); mask-image: linear-gradient(to bottom, rgba(0,0,0,.4), transparent 75%); }
.hero-content { position: relative; z-index: 2; min-height: 100svh; padding-top: 166px; padding-bottom: 68px; display: flex; flex-direction: column; justify-content: space-between; }
.hero-eyebrow { margin-bottom: 16px; }
.hero h1 { margin: 0; font-size: clamp(68px, 9.1vw, 168px); line-height: .78; letter-spacing: -.082em; font-weight: 700; text-transform: uppercase; }
.hero-line { display: block; overflow: hidden; padding-right: .12em; padding-bottom: .08em; }
.hero-line > span { display: block; transform: translateY(115%); animation: heroIn 1.3s var(--ease) forwards; animation-play-state: paused; }
body.intro-complete .hero-line > span { animation-play-state: running; }
.hero-line:nth-child(2) > span { animation-delay: .15s; }
.accent-word { width: 100%; padding-left: clamp(0px, 7.2vw, 112px); font-size: clamp(54px, 7.35vw, 136px); line-height: .94; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1.5px white; }
@keyframes heroIn { to { transform: translateY(0); } }
.hero-bottom { display: grid; grid-template-columns: minmax(280px, 580px) auto; align-items: end; gap: 40px; }
.hero-bottom p { margin: 0; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.35; }
.button { display: inline-flex; justify-content: space-between; align-items: center; min-width: 220px; padding: 18px 20px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border: 1px solid; transition: transform .25s var(--ease), background .25s ease, color .25s ease; }
.button span { font-size: 20px; }
.button-light { color: var(--ink); background: white; border-color: white; }
.button-light:hover { color: white; background: transparent; }
.button-dark { color: white; background: var(--ink); border-color: var(--ink); }
.button-dark:hover { color: var(--ink); background: transparent; }
.scroll-cue { position: absolute; z-index: 3; right: 34px; bottom: 34px; display: flex; align-items: center; gap: 10px; transform: rotate(90deg); transform-origin: right bottom; text-transform: uppercase; letter-spacing: .15em; font-size: 9px; }
.scroll-cue span { width: 55px; height: 1px; background: white; overflow: hidden; }
.scroll-cue span::after { content: ""; display: block; width: 50%; height: 100%; background: var(--yellow); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateX(-110%); } 100% { transform: translateX(220%); } }
.cmyk-rail { position: absolute; z-index: 4; left: 0; bottom: 0; width: 100%; height: 8px; display: grid; grid-template-columns: repeat(4,1fr); }
.cmyk-rail i:nth-child(1) { background: var(--cyan); }.cmyk-rail i:nth-child(2) { background: var(--magenta); }.cmyk-rail i:nth-child(3) { background: var(--yellow); }.cmyk-rail i:nth-child(4) { background: var(--key); }

.manifesto { padding: 150px 0 70px; overflow: hidden; }
.manifesto-grid { display: grid; grid-template-columns: 1.6fr .6fr; gap: 80px; align-items: end; }
.manifesto-copy { padding-bottom: 10px; color: #bcbcbc; font-size: 19px; }
.manifesto-copy p { margin: 0 0 18px; }
.marquee { margin-top: 130px; border-top: 1px solid #333; border-bottom: 1px solid #333; overflow: hidden; }
.marquee-track { width: max-content; display: flex; align-items: center; gap: 30px; padding: 22px 0; animation: marquee 26s linear infinite; white-space: nowrap; }
.marquee span { font-size: clamp(32px, 4vw, 70px); line-height: 1; font-weight: 700; letter-spacing: -.04em; }
.marquee b { color: var(--magenta); font-size: 34px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.capabilities { padding: 78px 0; border-bottom: 1px solid rgba(10,10,10,.16); }
.capabilities-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(60px, 9vw, 150px); align-items: end; }
.capabilities-statement h2 { margin: 0; font-size: clamp(50px, 6vw, 105px); line-height: .88; letter-spacing: -.065em; }
.capabilities-statement h2 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; }
.capabilities-list { border-top: 1px solid rgba(10,10,10,.22); }
.capability { display: grid; grid-template-columns: 95px 1fr; gap: 20px; align-items: center; min-height: 82px; border-bottom: 1px solid rgba(10,10,10,.22); }
.capability span { text-transform: uppercase; letter-spacing: .14em; font-size: 9px; font-weight: 700; color: #666; }
.capability strong { font-size: clamp(18px, 2vw, 30px); line-height: 1.1; letter-spacing: -.025em; }

.feature { padding: 150px 0; }
.feature-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(60px, 8vw, 140px); align-items: center; }
.feature-copy { position: sticky; top: 140px; align-self: start; }
.feature-copy .display { font-size: clamp(52px, 6vw, 104px); }
.feature-copy .lead { margin: 42px 0 30px; font-size: 20px; }
.text-link { display: inline-flex; align-items: center; gap: 40px; padding-bottom: 8px; border-bottom: 1px solid; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; }
.text-link span { font-size: 18px; }
.image-frame { margin: 0; }
.image-frame img { height: min(78vh, 920px); object-fit: cover; }
.image-frame figcaption { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(10,10,10,.22); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; font-weight: 700; }

.color-story { position: relative; background: var(--cyan); }
.color-panel { position: relative; min-height: 42vh; overflow: hidden; color: var(--ink); }
.color-panel img { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: .33; mix-blend-mode: multiply; }
.color-content { position: relative; z-index: 2; min-height: 42vh; padding-block: 45px; display: flex; flex-direction: row; align-items: end; justify-content: space-between; gap: 40px; }
.color-content h2 { margin: 0; font-size: clamp(140px, 25vw, 380px); line-height: .65; letter-spacing: -.11em; font-weight: 800; }
.color-content p { align-self: flex-end; max-width: 360px; margin: 0; font-size: 24px; line-height: 1.2; font-weight: 600; }
.color-panel-lead { min-height: 70svh; }
.color-panel-lead .color-content { min-height: 70svh; padding-top: 90px; padding-bottom: 70px; flex-direction: column; align-items: stretch; }
.color-panel-lead .color-content h2, .color-panel-image .color-content h2 { font-size: clamp(220px, 45vw, 720px); }
.color-panel-lead .eyebrow { align-self: flex-start; }
.color-panel-image { min-height: 100svh; }
.color-panel-image .color-content { min-height: 100svh; padding-top: 90px; padding-bottom: 70px; flex-direction: column; align-items: stretch; }
.color-panel.magenta { color: white; background: var(--magenta); }
.color-panel.cyan { background: var(--cyan); }
.color-panel.yellow { background: var(--yellow); }
.color-panel.key { color: white; background: var(--key); }

.precision { padding: 160px 0; }
.precision-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px, 9vw, 150px); align-items: center; }
.precision-image { margin: 0; overflow: hidden; border-radius: 50%; aspect-ratio: 1; }
.precision-image img { height: 100%; object-fit: cover; }
.precision-copy .display { font-size: clamp(54px, 6.5vw, 112px); }
.precision-copy .lead { color: #b8b8b8; margin-top: 42px; }
.micro-list { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px; }
.micro-list span { padding: 9px 12px; border: 1px solid #3b3b3b; border-radius: 100px; color: #d5d5d5; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; }

.services { padding: 150px 0 70px; }
.section-head { display: grid; grid-template-columns: 1.3fr .55fr; gap: 80px; align-items: end; margin-bottom: 100px; }
.section-intro { margin: 0; padding-bottom: 6px; font-size: 19px; color: #4e4e4e; }
.service-list { border-top: 1px solid rgba(10,10,10,.25); }
.service-row { display: grid; grid-template-columns: 70px minmax(280px,.8fr) 1fr 46px; gap: 30px; align-items: center; min-height: 150px; border-bottom: 1px solid rgba(10,10,10,.25); transition: padding .35s var(--ease), background .35s ease; }
.service-row:hover { padding-inline: 18px; background: white; }
.service-no { font-size: 11px; font-weight: 700; }
.service-row h3 { margin: 0; font-size: clamp(26px, 3vw, 48px); letter-spacing: -.045em; }
.service-row p { margin: 0; max-width: 500px; color: #555; }
.service-arrow { text-align: right; font-size: 25px; }

.gallery { padding: 80px 0 160px; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.gallery-card { position: relative; margin: 0; min-height: 520px; overflow: hidden; background: #ddd; }
.gallery-card img { height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gallery-card:hover img { transform: scale(1.035); }
.gallery-tall { grid-row: span 2; min-height: 1068px; }
.gallery-wide { grid-column: 1 / -1; min-height: 680px; }
.gallery-card figcaption { position: absolute; left: 18px; bottom: 18px; padding: 10px 12px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); text-transform: uppercase; letter-spacing: .1em; font-size: 9px; font-weight: 700; }

.process { padding: 150px 0; }
.process-head { grid-template-columns: 1fr; }
.process-list { margin: 0; padding: 0; list-style: none; counter-reset: process; border-top: 1px solid #333; }
.process-list li { display: grid; grid-template-columns: 180px 1fr; padding: 40px 0; border-bottom: 1px solid #333; }
.process-list > li > span { color: var(--yellow); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.process-list h3 { margin: 0 0 12px; font-size: clamp(34px, 5vw, 82px); line-height: 1; letter-spacing: -.055em; }
.process-list p { max-width: 560px; margin: 0; color: #aaa; font-size: 18px; }

.contact { position: relative; overflow: hidden; background: var(--yellow); color: var(--ink); }
.contact-bg { position: absolute; inset: 0; opacity: .7; background: radial-gradient(circle at 15% 15%, var(--cyan) 0 16%, transparent 17%), radial-gradient(circle at 33% 22%, var(--magenta) 0 18%, transparent 19%), radial-gradient(circle at 52% 15%, var(--yellow) 0 20%, transparent 21%); filter: blur(65px); transform: scale(1.3); }
.contact-inner { position: relative; z-index: 2; min-height: 92vh; padding: 100px 0 70px; display: flex; flex-direction: column; justify-content: space-between; }
.contact-title { margin: 0; font-size: clamp(68px, 11vw, 196px); line-height: .78; letter-spacing: -.075em; }
.contact-actions { display: flex; align-items: center; gap: 40px; }
.contact-mail { font-size: clamp(20px, 2.5vw, 34px); border-bottom: 1px solid; }

.site-footer { color: #d2d2d2; background: var(--ink); padding: 90px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, .6fr); gap: 50px; padding-bottom: 80px; }
.footer-brand img { width: 200px; background: white; padding: 12px; }
.footer-brand p { margin-top: 25px; font-size: 28px; color: white; letter-spacing: -.03em; }
.site-footer h3 { margin: 0 0 20px; color: white; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
.site-footer p { margin: 0 0 18px; color: #929292; }
.site-footer a:hover { color: white; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid #2d2d2d; color: #666; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; }

@media (max-width: 1000px) {
  :root { --shell: min(100% - 40px, 860px); }
  .site-header { height: 78px; padding-inline: 20px; }
  .brand, .is-scrolled .brand { width: 160px; }
  .menu-toggle { display: block; }
  .site-nav { position: fixed; inset: 0; padding: 120px 24px 40px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 20px; background: var(--paper); color: var(--ink); transform: translateY(-100%); transition: transform .55s var(--ease); }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav a { font-size: clamp(36px, 9vw, 70px); line-height: 1; letter-spacing: -.05em; text-transform: none; }
  .nav-cta { margin-top: 20px; font-size: 13px !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
  .hero-content { padding-top: 145px; }
  .hero h1 { font-size: clamp(63px, 14vw, 132px); line-height: .84; }
  .accent-word { padding-left: 0; font-size: clamp(50px, 11vw, 104px); }
  .hero-bottom { grid-template-columns: 1fr; }
  .hero-bottom .button { justify-self: start; }
  .scroll-cue { display: none; }
  .manifesto-grid, .feature-grid, .precision-grid, .section-head { grid-template-columns: 1fr; }
  .manifesto-copy { max-width: 620px; }
  .capabilities-grid { grid-template-columns: 1fr; gap: 55px; }
  .feature-copy { position: static; }
  .image-frame img { height: 72vh; }
  .precision-image { max-width: 620px; }
  .service-row { grid-template-columns: 45px 1fr 38px; padding: 28px 0; }
  .service-row p { grid-column: 2; }
  .service-arrow { grid-column: 3; grid-row: 1; }
  .gallery-card, .gallery-tall, .gallery-wide { min-height: 620px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --shell: calc(100vw - 30px); }
  .eyebrow { margin-bottom: 22px; }
  .display { font-size: clamp(46px, 14vw, 78px); }
  .hero-media img { object-position: 57% center; }
  .hero-content { padding-top: 130px; padding-bottom: 42px; }
  .hero h1 { font-size: 17.5vw; line-height: .9; }
  .hero .accent-word { font-size: 11.7vw; line-height: 1.08; padding-top: 4px; }
  .hero-bottom { gap: 28px; }
  .hero-bottom p { font-size: 17px; }
  .button { width: 100%; }
  .manifesto { padding-top: 100px; }
  .manifesto-grid { gap: 45px; }
  .marquee { margin-top: 80px; }
  .capabilities { padding: 72px 0; }
  .capability { grid-template-columns: 74px 1fr; min-height: 74px; }
  .feature, .precision, .services, .process { padding: 100px 0; }
  .feature-grid, .precision-grid { gap: 60px; }
  .image-frame img { height: 72vh; }
  .image-frame figcaption { gap: 16px; }
  .color-panel { min-height: 32vh; }
  .color-content { min-height: 32vh; padding-block: 34px; }
  .color-content h2 { font-size: 45vw; }
  .color-content p { font-size: 19px; }
  .color-panel-lead { min-height: 62svh; }
  .color-panel-lead .color-content { min-height: 62svh; padding-block: 70px 45px; }
  .color-panel-image { min-height: 88svh; }
  .color-panel-image .color-content { min-height: 88svh; padding-block: 70px 45px; }
  .color-panel-lead .color-content h2, .color-panel-image .color-content h2 { font-size: 67vw; }
  .precision-image { max-width: none; }
  .section-head { gap: 40px; margin-bottom: 60px; }
  .service-row { grid-template-columns: 34px 1fr 25px; gap: 10px; }
  .service-row h3 { font-size: 28px; }
  .service-row p { font-size: 14px; }
  .gallery { padding-bottom: 100px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 15px; }
  .gallery-card, .gallery-tall, .gallery-wide { grid-column: auto; grid-row: auto; min-height: 72vh; }
  .process-list li { grid-template-columns: 50px 1fr; gap: 10px; }
  .process-list h3 { font-size: 42px; }
  .contact-inner { min-height: 78vh; padding-top: 80px; }
  .contact-title { font-size: 18vw; line-height: .84; }
  .contact-actions { flex-direction: column; align-items: stretch; gap: 26px; }
  .contact-mail { align-self: flex-start; }
  .footer-grid { grid-template-columns: 1fr; padding-bottom: 50px; }
  .footer-bottom { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .intro-symbol, .intro p, .intro-line { animation: none; opacity: 1; }
}

/* Layout hardening for narrow viewports */
.manifesto-grid > *, .feature-grid > *, .precision-grid > *, .section-head > *, .footer-grid > *, .service-row > *, .process-list li > *, .capabilities-grid > * { min-width: 0; }

@media (max-width: 640px) {
  .service-row h3 { overflow-wrap: anywhere; }
  .contact-bg { transform: none; }
}


/* Version 3 refinements */
html.intro-seen .intro { display: none; }
html.intro-seen body.is-loading { overflow: auto; }

.intro { transition-duration: .72s; }
.intro-symbol { width: 116px; height: 116px; animation-duration: 1.02s; }
.intro-line { width: 116px; }
@keyframes introSpin { 0% { opacity: 0; transform: rotate(-70deg) scale(.78); } 22% { opacity: 1; } 82% { transform: rotate(345deg) scale(1.03); } 100% { opacity: 1; transform: rotate(360deg) scale(1); } }

.site-header { height: 80px; }
.site-header.is-scrolled { height: 68px; }
.brand { width: 182px; }
.is-scrolled .brand { width: 164px; }
.site-nav { gap: 28px; }
.nav-cta { gap: 10px; padding: 7px 7px 7px 14px; border-radius: 999px; }
.nav-cta i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--ink); font-style: normal; font-size: 15px; transition: transform .3s var(--ease), background .3s ease; }
.nav-cta:hover i { transform: rotate(45deg); background: var(--magenta); }

.hero-overlay { background: radial-gradient(circle at 77% 35%, transparent 0 24%, rgba(0,0,0,.16) 55%, rgba(0,0,0,.43) 100%), linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.47) 46%, rgba(0,0,0,.12) 78%), linear-gradient(0deg, rgba(0,0,0,.72), transparent 46%); }
.hero-grid { opacity: .075; mask-image: linear-gradient(to bottom, rgba(0,0,0,.28), transparent 68%); }
.hero-content { padding-top: 132px; padding-bottom: 72px; }
.hero-heading { max-width: 100%; }
.hero-eyebrow { margin-bottom: 28px; }
.hero h1 { font-size: clamp(66px, 8.65vw, 158px); line-height: .82; }
.accent-word { padding-left: clamp(0px, 6vw, 92px); font-size: clamp(52px, 6.85vw, 126px); line-height: .96; }
.hero-bottom { grid-template-columns: minmax(280px, 560px) max-content; align-items: center; }
.hero-bottom p { text-wrap: balance; }

.button { min-width: 0; width: max-content; justify-content: flex-start; gap: 14px; border-radius: 999px; padding: 7px 7px 7px 20px; }
.button-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 18px !important; transition: transform .3s var(--ease), color .3s ease, background .3s ease; }
.button:hover .button-icon { transform: rotate(45deg); }
.hero-cta { color: white; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.42); backdrop-filter: blur(16px); box-shadow: 0 16px 44px rgba(0,0,0,.16); }
.hero-cta .button-icon { color: var(--ink); background: rgba(255,255,255,.96); }
.hero-cta:hover { color: var(--ink); background: white; }
.hero-cta:hover .button-icon { color: white; background: var(--magenta); }

.color-story { overflow: clip; }
.color-panel { min-height: 34vh; margin-top: -1px; }
.color-content { min-height: 34vh; padding-block: 34px; }
.color-content h2 { transform: translateY(10%) scale(.97); opacity: .78; transition: transform .9s var(--ease), opacity .9s ease; }
.color-panel.is-active .color-content h2 { transform: translateY(0) scale(1); opacity: 1; }
.color-panel-lead { min-height: 52svh; }
.color-panel-lead .color-content { min-height: 52svh; padding-top: 76px; padding-bottom: 52px; }
.color-panel-image { min-height: 66svh; }
.color-panel-image .color-content { min-height: 66svh; padding-top: 70px; padding-bottom: 52px; }
.color-panel img { opacity: .38; transform: scale(1.04); transition: transform 1.5s var(--ease); }
.color-panel.is-active img { transform: scale(1); }
.color-content p { font-size: clamp(19px, 1.8vw, 26px); }

.project-types { padding: 145px 0 120px; border-top: 1px solid rgba(10,10,10,.14); }
.project-types-head { margin-bottom: 72px; }
.project-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.project-type { position: relative; min-height: 500px; padding: 34px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(10,10,10,.18); background: rgba(255,255,255,.42); transition: transform .45s var(--ease), background .45s ease, color .45s ease; }
.project-type::after { content: ""; position: absolute; right: -70px; bottom: -80px; width: 210px; height: 210px; border-radius: 50%; background: var(--cyan); opacity: .8; filter: blur(8px); transition: transform .5s var(--ease); }
.project-type:nth-child(2)::after { background: var(--magenta); }
.project-type:nth-child(3)::after { background: var(--yellow); }
.project-type:hover { transform: translateY(-8px); color: white; background: var(--ink); }
.project-type:hover::after { transform: scale(1.25) translate(-8px,-8px); }
.project-kicker { position: relative; z-index: 2; text-transform: uppercase; letter-spacing: .15em; font-size: 10px; font-weight: 700; }
.project-type h3 { position: relative; z-index: 2; max-width: 390px; margin: auto 0 24px; font-size: clamp(36px, 3.5vw, 58px); line-height: .95; letter-spacing: -.055em; }
.project-type p { position: relative; z-index: 2; max-width: 410px; margin: 0 0 30px; color: #555; font-size: 17px; transition: color .45s ease; }
.project-type:hover p { color: #cfcfcf; }
.project-meta { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.project-meta span { padding: 8px 10px; border: 1px solid currentColor; border-radius: 999px; text-transform: uppercase; letter-spacing: .1em; font-size: 8px; font-weight: 700; }

.gallery { padding-top: 30px; }

.contact { background: #f2b900; }
.contact-bg { opacity: .62; }
.contact-inner { min-height: auto; padding: 120px 0 100px; display: block; }
.contact-head { margin-bottom: 70px; }
.contact-title { max-width: 1300px; font-size: clamp(66px, 10vw, 174px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .45fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.project-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 30px; background: rgba(255,255,255,.82); border: 1px solid rgba(10,10,10,.14); backdrop-filter: blur(20px); box-shadow: 0 30px 80px rgba(85,42,0,.16); }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label { text-transform: uppercase; letter-spacing: .12em; font-size: 9px; font-weight: 700; }
.form-field input, .form-field select, .form-field textarea { width: 100%; border: 0; border-bottom: 1px solid rgba(10,10,10,.38); border-radius: 0; padding: 13px 0; color: var(--ink); background: transparent; font: inherit; font-size: 17px; outline: none; transition: border-color .25s ease, background .25s ease; }
.form-field textarea { resize: vertical; min-height: 112px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--magenta); }
.form-submit { margin-top: 12px; display: flex; align-items: center; gap: 24px; }
.form-submit p { max-width: 440px; margin: 0; color: #555; font-size: 12px; }
.form-button { color: white; background: var(--ink); border-color: var(--ink); }
.form-button .button-icon { color: var(--ink); background: var(--yellow); }
.form-button:hover { color: var(--ink); background: transparent; }
.form-button:hover .button-icon { color: white; background: var(--magenta); }
.contact-direct { padding-top: 12px; display: flex; flex-direction: column; align-items: flex-start; }
.contact-direct p { margin: 0 0 26px; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; font-weight: 700; }
.contact-direct a { margin-bottom: 12px; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.05; letter-spacing: -.035em; border-bottom: 1px solid; }
.contact-direct span { margin-top: 30px; font-size: 16px; }

.footer-lockup { display: inline-flex; align-items: center; gap: 13px; color: white; }
.footer-lockup img { width: 58px; height: 58px; object-fit: contain; }
.footer-lockup > span { display: flex; flex-direction: column; font-size: 36px; font-weight: 300; line-height: .72; letter-spacing: -.055em; }
.footer-lockup b { font-weight: 700; }
.footer-lockup small { margin-top: 10px; font-size: 13px; font-weight: 400; letter-spacing: .12em; }
.footer-brand p { margin-top: 30px; }

@media (max-width: 1100px) {
  .project-type-grid { grid-template-columns: 1fr; }
  .project-type { min-height: 350px; }
  .project-type h3 { margin-top: 110px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-direct { padding-top: 0; }
}

@media (max-width: 1000px) {
  .site-header { height: 72px; }
  .site-header.is-scrolled { height: 66px; }
  .hero-content { padding-top: 118px; }
  .hero h1 { font-size: clamp(62px, 13vw, 126px); }
  .accent-word { font-size: clamp(48px, 10.5vw, 98px); }
  .nav-cta { border-radius: 999px; padding: 8px 8px 8px 18px; }
  .nav-cta i { width: 42px; height: 42px; }
}

@media (max-width: 640px) {
  .intro-symbol { width: 98px; height: 98px; }
  .intro-line { width: 98px; }
  .hero-content { padding-top: 112px; padding-bottom: 38px; }
  .hero-eyebrow { margin-bottom: 18px; }
  .hero h1 { font-size: 17vw; line-height: .92; }
  .hero .accent-word { font-size: 11.5vw; line-height: 1.08; }
  .hero-bottom { gap: 24px; }
  .button { width: max-content; }
  .hero-cta { padding-left: 17px; }
  .color-panel { min-height: 29vh; }
  .color-content { min-height: 29vh; }
  .color-panel-lead { min-height: 48svh; }
  .color-panel-lead .color-content { min-height: 48svh; }
  .color-panel-image { min-height: 62svh; }
  .color-panel-image .color-content { min-height: 62svh; }
  .project-types { padding: 100px 0 85px; }
  .project-types-head { margin-bottom: 46px; }
  .project-type { min-height: 430px; padding: 26px; }
  .project-type h3 { margin-top: auto; font-size: 43px; }
  .contact-inner { padding: 90px 0 75px; }
  .contact-head { margin-bottom: 50px; }
  .contact-title { font-size: 17vw; line-height: .85; }
  .project-form { grid-template-columns: 1fr; padding: 22px; }
  .form-field, .form-field-wide { grid-column: 1; }
  .form-submit { flex-direction: column; align-items: flex-start; }
  .form-submit .button { width: 100%; justify-content: space-between; }
  .footer-lockup > span { font-size: 31px; }
}

/* Specificity corrections for the refined pill buttons and footer lockup */
.button .button-label { font-size: 13px; }
.nav-cta > span { font-size: 12px; }
.footer-lockup img { background: transparent; padding: 0; }



/* ==========================================================================\n   TANMEDIA PHASE 1 DESIGN SYSTEM - V4\n   ========================================================================== */
:root {
  --header-h: 80px;
  --header-h-small: 68px;
  --register-size: 22px;
}

/* Header lockup: height-driven sizing prevents clipping on every breakpoint. */
.site-header { height: var(--header-h); overflow: visible; }
.site-header.is-scrolled { height: var(--header-h-small); }
.brand.brand-lockup {
  width: auto !important;
  height: 100%;
  max-width: min(220px, 34vw);
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  overflow: visible;
  line-height: 0;
  opacity: 1;
  transform: none;
  transition: opacity .45s ease, transform .55s var(--ease);
}
.brand.brand-lockup .brand-logo {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 34px;
  object-fit: contain;
  object-position: left center;
  overflow: visible;
}
.site-header.is-scrolled .brand.brand-lockup .brand-logo { max-height: 30px; }
body.is-loading .brand.brand-lockup { opacity: 0; transform: translateY(-8px) scale(.96); }
body.intro-complete .brand.brand-lockup { animation: brandRegister .68s var(--ease) both; }
@keyframes brandRegister {
  0% { opacity: 0; transform: translate(-7px, 2px); filter: drop-shadow(7px 0 var(--cyan)) drop-shadow(-7px 0 var(--magenta)); }
  62% { opacity: 1; transform: translate(1px,0); filter: drop-shadow(1px 0 var(--cyan)) drop-shadow(-1px 0 var(--magenta)); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* Branded intro: rotation + registration rings + paper wipe. */
.intro { isolation: isolate; }
.intro::before, .intro::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.intro::before {
  inset: 28px;
  border: 1px solid rgba(10,10,10,.12);
  background:
    linear-gradient(var(--ink),var(--ink)) 0 0/22px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 0/1px 22px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0/22px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0/1px 22px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 100%/22px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 100%/1px 22px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 100%/22px 1px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 100%/1px 22px no-repeat;
  opacity: .38;
}
.intro-inner { position: relative; z-index: 2; }
.intro-register { position: absolute; left: 50%; top: 50%; width: 188px; height: 188px; transform: translate(-50%,-58%); }
.intro-register i { position: absolute; inset: 0; border: 1px solid currentColor; border-radius: 50%; opacity: .62; }
.intro-register .c { color: var(--cyan); animation: ringC 1.05s var(--ease) both; }
.intro-register .m { color: var(--magenta); animation: ringM 1.05s var(--ease) both; }
.intro-register .y { color: var(--yellow); animation: ringY 1.05s var(--ease) both; }
.intro-register .k { color: var(--key); animation: ringK 1.05s var(--ease) both; }
@keyframes ringC { from { transform: translate(-18px,0) scale(.8); opacity: 0; } to { transform: none; opacity: .38; } }
@keyframes ringM { from { transform: translate(18px,0) scale(.8); opacity: 0; } to { transform: none; opacity: .38; } }
@keyframes ringY { from { transform: translate(0,18px) scale(.8); opacity: 0; } to { transform: none; opacity: .38; } }
@keyframes ringK { from { transform: translate(0,-18px) scale(.8); opacity: 0; } to { transform: none; opacity: .34; } }
.intro-symbol { position: relative; z-index: 2; animation-name: introSpinV4; }
@keyframes introSpinV4 {
  0% { opacity: 0; transform: rotate(-120deg) scale(.7); }
  24% { opacity: 1; }
  76% { transform: rotate(340deg) scale(1.06); }
  100% { opacity: 1; transform: rotate(360deg) scale(1); }
}
.intro-dock-line { width: 1px; height: 52px; margin-top: 8px; background: linear-gradient(to bottom,var(--ink),transparent); transform-origin: top; animation: dockLine 1s var(--ease) .25s both; }
@keyframes dockLine { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: .4; } }

/* Thin global CMYK print-progress rail. */
.print-progress {
  position: fixed;
  z-index: 98;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: 5px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  pointer-events: none;
  transition: top .35s ease, opacity .35s ease;
}
.site-header.is-scrolled + .print-progress { top: var(--header-h-small); }
.print-progress-segment { position: relative; overflow: visible; background: rgba(255,255,255,.22); border-right: 1px solid rgba(255,255,255,.35); }
.print-progress-segment i { position: absolute; inset: 0; transform: scaleX(var(--fill,0)); transform-origin: left center; will-change: transform; }
.print-progress-segment b { position: absolute; right: 7px; top: 8px; color: #111; font-size: 8px; line-height: 1; letter-spacing: .12em; opacity: 0; transform: translateY(-3px); transition: opacity .25s ease, transform .25s ease; }
.print-progress-segment.is-active b { opacity: .55; transform: none; }
.print-progress-segment.cyan i { background: var(--cyan); }
.print-progress-segment.magenta i { background: var(--magenta); }
.print-progress-segment.yellow i { background: var(--yellow); }
.print-progress-segment.key i { background: var(--key); }

/* Hero registration details. */
.hero { isolation: isolate; }
.hero-grid { opacity: .095; }
.register-text { position: relative; isolation: isolate; }
.register-text::before, .register-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: inherit;
  -webkit-text-stroke: inherit;
  opacity: 0;
  pointer-events: none;
}
body.intro-complete .register-text::before { color: var(--cyan); -webkit-text-stroke: 0; animation: registerCyan 1.05s var(--ease) .14s both; }
body.intro-complete .register-text::after { color: var(--magenta); -webkit-text-stroke: 0; animation: registerMagenta 1.05s var(--ease) .14s both; }
.accent-word .register-text::before, .accent-word .register-text::after { color: transparent !important; -webkit-text-stroke-width: 1px; }
.accent-word .register-text::before { -webkit-text-stroke-color: var(--cyan); }
.accent-word .register-text::after { -webkit-text-stroke-color: var(--magenta); }
@keyframes registerCyan { 0%,18% { opacity: .72; transform: translate(-10px,2px); } 65% { opacity: .42; } 100% { opacity: 0; transform: none; } }
@keyframes registerMagenta { 0%,18% { opacity: .72; transform: translate(10px,-2px); } 65% { opacity: .42; } 100% { opacity: 0; transform: none; } }
.hero-register-marks { position: absolute; z-index: 3; inset: 112px 24px 26px; pointer-events: none; opacity: .45; }
.hero-register-marks .mark { position: absolute; width: 24px; height: 24px; }
.hero-register-marks .mark::before, .hero-register-marks .mark::after { content:""; position:absolute; background:white; }
.hero-register-marks .mark::before { width:24px; height:1px; top:0; left:0; }
.hero-register-marks .mark::after { width:1px; height:24px; top:0; left:0; }
.hero-register-marks .tr { right:0; transform:rotate(90deg); }
.hero-register-marks .bl { left:0; bottom:0; transform:rotate(-90deg); }
.hero-register-marks .br { right:0; bottom:0; transform:rotate(180deg); }
.register-target { position:absolute; right:0; top:50%; width:50px; height:50px; transform:translateY(-50%); }
.register-target b { position:absolute; inset:7px; border:1px solid; border-radius:50%; }
.register-target b:nth-child(1){ color:var(--cyan); transform:translateX(-4px); }
.register-target b:nth-child(2){ color:var(--magenta); transform:translateX(4px); }
.register-target b:nth-child(3){ color:white; }
.hero-cta { position:relative; overflow:hidden; }
.hero-cta::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--yellow)); opacity:0; transform:translateX(-105%); transition:transform .5s var(--ease),opacity .25s ease; }
.hero-cta:hover::before { opacity:.14; transform:none; }
.hero-cta > * { position:relative; z-index:1; }

/* Navigation is quiet by default, CMYK when active. */
.site-nav a[data-nav-link].is-active::before { content:""; position:absolute; left:-11px; top:50%; width:5px; height:5px; border-radius:50%; background:var(--magenta); transform:translateY(-50%); box-shadow: 5px 0 0 var(--cyan); }

/* Unified CMYK panels: every channel uses exactly the same type scale. */
.color-story { isolation:isolate; }
.color-panel,
.color-panel-lead,
.color-panel-image { min-height: 56svh !important; }
.color-panel .color-content,
.color-panel-lead .color-content,
.color-panel-image .color-content,
.color-content-unified {
  position:relative;
  min-height:56svh !important;
  padding-top:76px !important;
  padding-bottom:54px !important;
  flex-direction:row !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
}
.color-panel .color-content .eyebrow { position:absolute; left:0; top:58px; }
.color-panel .channel-letter,
.color-panel-lead .channel-letter,
.color-panel-image .channel-letter {
  flex:0 0 auto;
  margin:0 !important;
  font-size:clamp(230px, 38vw, 680px) !important;
  line-height:.63 !important;
  letter-spacing:-.105em !important;
  font-weight:800 !important;
  transform:translateY(10%) scale(.97);
  opacity:.78;
  transition:transform .9s var(--ease),opacity .9s ease;
}
.color-panel.is-active .channel-letter { transform:translateY(0) scale(1); opacity:1; }
.color-panel .color-content p:not(.eyebrow) { max-width:360px; margin-left:auto; padding-bottom:7px; }
.panel-register { position:absolute; z-index:3; right:32px; top:32px; width:54px; height:54px; opacity:.55; pointer-events:none; }
.panel-register i { position:absolute; inset:7px; border:1px solid currentColor; border-radius:50%; }
.panel-register i:nth-child(1){ transform:translateX(-5px); color:var(--cyan); }
.panel-register i:nth-child(2){ transform:translateX(5px); color:var(--magenta); }
.panel-register i:nth-child(3){ color:currentColor; }
.color-panel img { transform:scale(1.055); }
.color-panel.is-active img { transform:scale(1); }

/* Crop marks + paper reveal on production imagery. */
.print-frame { position:relative; isolation:isolate; }
.print-frame::before {
  content:"";
  position:absolute;
  z-index:4;
  inset:14px;
  pointer-events:none;
  opacity:.62;
  background:
    linear-gradient(currentColor,currentColor) 0 0/22px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 0/1px 22px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/22px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/1px 22px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/22px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/1px 22px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/22px 1px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/1px 22px no-repeat;
  mix-blend-mode:difference;
}
.print-frame.reveal::after {
  content:"";
  position:absolute;
  z-index:5;
  inset:0;
  background:var(--paper);
  transform-origin:right center;
  transform:scaleX(1);
  transition:transform 1.1s var(--ease) .12s;
  pointer-events:none;
}
.section-dark .print-frame.reveal::after { background:var(--ink); }
.print-frame.reveal.is-visible::after { transform:scaleX(0); }

/* Custom pass-mark cursor for imagery, desktop only. */
.register-cursor { position:fixed; z-index:999; left:0; top:0; width:58px; height:58px; border:1px solid rgba(255,255,255,.9); border-radius:50%; display:grid; place-items:center; color:white; background:rgba(10,10,10,.28); backdrop-filter:blur(7px); pointer-events:none; opacity:0; transform:translate(-50%,-50%) scale(.72); transition:opacity .2s ease,transform .25s var(--ease); mix-blend-mode:difference; }
.register-cursor::before, .register-cursor::after { content:""; position:absolute; background:currentColor; opacity:.9; }
.register-cursor::before { width:72px; height:1px; }
.register-cursor::after { width:1px; height:72px; }
.register-cursor i { width:18px; height:18px; border:1px solid; border-radius:50%; }
.register-cursor b { position:absolute; top:68px; font-size:7px; letter-spacing:.15em; font-weight:700; }
.register-cursor.is-visible { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* People + motion chapter. */
.people { position:relative; padding:160px 0 145px; overflow:hidden; }
.people::before { content:""; position:absolute; inset:0; opacity:.18; background-image:radial-gradient(circle at center,rgba(255,255,255,.7) 0 1px,transparent 1.5px); background-size:18px 18px; mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 80%,transparent); }
.people > .shell { position:relative; z-index:1; }
.people-head { display:grid; grid-template-columns:1.35fr .55fr; gap:70px; align-items:end; margin-bottom:90px; }
.people-head .display { font-size:clamp(54px,6.2vw,108px); }
.people-intro { margin:0 0 6px; color:#b9b9b9; font-size:19px; }
.people-stage { display:grid; grid-template-columns:1.25fr .75fr; gap:26px; align-items:stretch; }
.people-visual { min-height:760px; overflow:hidden; background:#222; }
.people-visual img { width:100%; height:100%; object-fit:cover; object-position:center; transition:transform 1.5s var(--ease),filter .7s ease; }
.people-visual:hover img { transform:scale(1.025); filter:contrast(1.05); }
.people-visual-copy { position:absolute; z-index:3; left:30px; right:30px; bottom:28px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; color:white; }
.people-visual-copy span { text-transform:uppercase; letter-spacing:.13em; font-size:9px; font-weight:700; }
.people-visual-copy strong { max-width:420px; font-size:clamp(26px,3vw,45px); line-height:.98; letter-spacing:-.045em; text-align:right; }
.live-dot { position:absolute; z-index:3; left:28px; top:28px; padding:8px 11px 8px 27px; border:1px solid rgba(255,255,255,.5); border-radius:999px; color:white; background:rgba(0,0,0,.28); backdrop-filter:blur(8px); text-transform:uppercase; letter-spacing:.12em; font-size:8px; font-weight:700; }
.live-dot::before { content:""; position:absolute; left:11px; top:50%; width:7px; height:7px; border-radius:50%; background:var(--magenta); transform:translateY(-50%); box-shadow:0 0 0 0 rgba(237,0,122,.65); animation:livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 70% { box-shadow:0 0 0 10px rgba(237,0,122,0); } 100% { box-shadow:0 0 0 0 rgba(237,0,122,0); } }
.people-roles { display:grid; grid-template-rows:repeat(3,1fr); border-top:1px solid #353535; }
.role-card { position:relative; padding:34px 20px 34px 72px; border-bottom:1px solid #353535; transition:background .4s ease,padding .4s var(--ease); }
.role-card:hover { padding-left:82px; background:#151515; }
.role-card > span { position:absolute; left:0; top:39px; color:var(--yellow); font-size:10px; letter-spacing:.12em; font-weight:700; }
.role-card h3 { margin:0 0 18px; font-size:clamp(27px,2.6vw,43px); line-height:1; letter-spacing:-.045em; }
.role-card p { max-width:520px; margin:0; color:#999; }
.role-card::after { content:attr(data-role); position:absolute; right:0; bottom:-16px; color:transparent; -webkit-text-stroke:1px #262626; font-size:110px; font-weight:800; line-height:1; pointer-events:none; }
.motion-strip { margin-top:88px; display:grid; grid-template-columns:1.25fr .75fr .42fr; gap:24px; align-items:stretch; }
.motion-window { min-height:430px; overflow:hidden; background:#111; }
.motion-window img { width:100%; height:100%; object-fit:cover; animation:motionDrift 13s ease-in-out infinite alternate; }
@keyframes motionDrift { from { transform:scale(1.04) translateX(-1.2%); } to { transform:scale(1.1) translateX(1.5%); } }
.motion-scan { position:absolute; z-index:3; left:0; right:0; top:-10%; height:2px; background:linear-gradient(90deg,transparent,var(--cyan),white,var(--magenta),transparent); box-shadow:0 0 18px rgba(255,255,255,.55); animation:scan 5.5s ease-in-out infinite; }
@keyframes scan { 0%,12% { top:-10%; opacity:0; } 22% { opacity:1; } 70% { top:110%; opacity:1; } 84%,100% { top:110%; opacity:0; } }
.motion-label { position:absolute; z-index:3; left:22px; right:22px; bottom:20px; display:flex; justify-content:space-between; gap:20px; padding-top:12px; border-top:1px solid rgba(255,255,255,.55); color:white; text-transform:uppercase; letter-spacing:.12em; font-size:8px; }
.motion-copy { padding:34px; color:var(--ink); background:var(--yellow); }
.motion-copy h3 { margin:0 0 28px; font-size:clamp(30px,3vw,48px); line-height:.98; letter-spacing:-.045em; }
.motion-copy p:last-child { margin:0; font-size:16px; }
.finish-slice { min-height:430px; margin:0; overflow:hidden; }
.finish-slice img { width:100%; height:100%; object-fit:cover; }
.finish-slice figcaption { position:absolute; z-index:3; left:16px; bottom:15px; padding:9px 10px; color:var(--ink); background:rgba(255,255,255,.88); text-transform:uppercase; letter-spacing:.1em; font-size:8px; font-weight:700; }

/* Process section gets a live cutting/folding line. */
.process-list { position:relative; --process-progress:0%; }
.process-list::before, .process-list::after { content:""; position:absolute; left:90px; top:0; width:1px; pointer-events:none; }
.process-list::before { bottom:0; background:repeating-linear-gradient(to bottom,#4b4b4b 0 5px,transparent 5px 11px); }
.process-list::after { height:var(--process-progress); background:linear-gradient(to bottom,var(--cyan),var(--magenta),var(--yellow)); box-shadow:0 0 14px rgba(255,255,255,.2); transition:height .08s linear; }
.process-list li { position:relative; }
.process-list li::before { content:""; position:absolute; left:84px; top:48px; width:13px; height:13px; border:1px solid #555; border-radius:50%; background:var(--ink); transition:border-color .35s ease,transform .35s var(--ease); }
.process-list li:hover::before { border-color:var(--yellow); transform:scale(1.35); }

/* Footer prototype marker stays subtle. */
.prototype-badge { margin-left:auto; color:#4f4f4f; }

@media (max-width:1000px) {
  :root { --header-h:76px; --header-h-small:68px; }
  .site-nav { width:100%; height:100svh; min-height:100vh; }
  .hero-bottom { grid-template-columns:1fr !important; align-items:end; }
  .hero-bottom .button { justify-self:start; }
  .brand.brand-lockup { max-width:180px; }
  .brand.brand-lockup .brand-logo { max-height:30px; }
  .site-header.is-scrolled .brand.brand-lockup .brand-logo { max-height:28px; }
  .people-head,.people-stage { grid-template-columns:1fr; }
  .people-visual { min-height:650px; }
  .people-roles { grid-template-rows:none; }
  .motion-strip { grid-template-columns:1fr 1fr; }
  .finish-slice { grid-column:1/-1; min-height:520px; }
  .process-list::before,.process-list::after { left:55px; }
  .process-list li::before { left:49px; }
}

@media (max-width:640px) {
  :root { --header-h:72px; --header-h-small:66px; }
  .brand.brand-lockup { max-width:154px; }
  .brand.brand-lockup .brand-logo,.site-header.is-scrolled .brand.brand-lockup .brand-logo { max-height:26px; }
  .print-progress { height:4px; }
  .print-progress-segment b { display:none; }
  .hero-register-marks { inset:96px 14px 18px; }
  .hero .accent-word { font-size:10.35vw !important; line-height:1.1 !important; letter-spacing:-.075em; white-space:nowrap; }
  .hero-bottom { grid-template-columns:minmax(0,1fr) !important; }
  .hero-bottom .button { justify-self:start; max-width:100%; }
  .register-target { display:none; }
  .color-panel,.color-panel-lead,.color-panel-image { min-height:46svh !important; }
  .color-panel .color-content,.color-panel-lead .color-content,.color-panel-image .color-content,.color-content-unified { min-height:46svh !important; padding:64px 0 38px !important; flex-direction:column !important; align-items:flex-start !important; justify-content:flex-end !important; }
  .color-panel .channel-letter,.color-panel-lead .channel-letter,.color-panel-image .channel-letter { font-size:66vw !important; line-height:.65 !important; }
  .color-panel .color-content p:not(.eyebrow) { max-width:280px; margin:18px 0 0; padding:0; font-size:18px; }
  .color-panel .color-content .eyebrow { top:32px; }
  .panel-register { right:16px; top:18px; width:42px; height:42px; }
  .people { padding:105px 0 95px; }
  .people-head { gap:38px; margin-bottom:52px; }
  .people-visual { min-height:540px; }
  .people-visual-copy { left:20px; right:20px; bottom:20px; display:block; }
  .people-visual-copy strong { display:block; margin-top:12px; text-align:left; }
  .role-card { padding:28px 8px 28px 48px; }
  .role-card > span { top:32px; }
  .motion-strip { margin-top:56px; grid-template-columns:1fr; }
  .motion-window,.finish-slice { min-height:430px; grid-column:auto; }
  .motion-copy { padding:26px; }
  .process-list::before,.process-list::after { display:none; }
  .process-list li::before { display:none; }
  .prototype-badge { width:100%; margin-top:10px; }
}

@media (pointer:coarse), (prefers-reduced-motion:reduce) {
  .register-cursor { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .intro-register i,.intro-dock-line,.register-text::before,.register-text::after,.live-dot::before,.motion-window img,.motion-scan { animation:none !important; }
}

/* ==========================================================================\n   TANMEDIA PHASE 2 ALPHA - RESPONSIVE FORMAT PASS + CONVERSION DETAILS\n   ========================================================================== */
:root {
  --section-space: clamp(106px, 10vw, 164px);
  --section-space-small: clamp(78px, 8vw, 112px);
  --edge: clamp(18px, 2.2vw, 34px);
}
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
main, section, .shell { min-width: 0; }
img, svg, video { display: block; max-width: 100%; }
::selection { color: white; background: var(--magenta); }

/* Header and logo - no crop, no accidental white tile, calmer spacing. */
.site-header {
  height: 84px;
  padding-inline: var(--edge);
  gap: 28px;
  border-bottom: 1px solid rgba(10,10,10,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.75);
}
.site-header.is-scrolled { height: 70px; box-shadow: 0 8px 32px rgba(10,10,10,.08); }
.brand.brand-lockup { max-width: min(224px, 32vw); min-width: 0; }
.brand.brand-lockup .brand-logo { max-height: 39px; width: auto !important; height: auto !important; }
.site-header.is-scrolled .brand.brand-lockup .brand-logo { max-height: 34px; }
.site-nav { margin-left: auto; gap: clamp(20px,2.2vw,34px); }
.site-nav a { position: relative; white-space: nowrap; }
.nav-cta { flex: 0 0 auto; }
.print-progress { top: 84px; }
.site-header.is-scrolled + .print-progress { top: 70px; }

/* Small print-language detail used consistently instead of random decoration. */
.eyebrow { position: relative; padding-left: 31px; }
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 22px;
  height: 5px;
  background: linear-gradient(90deg,var(--cyan) 0 25%,var(--magenta) 25% 50%,var(--yellow) 50% 75%,var(--key) 75%);
}
.section-dark .eyebrow::before { box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.display em, .contact-title em { position: relative; display: inline-block; }
.display em::after, .contact-title em::after {
  content:"";
  position:absolute;
  left:.03em; right:.02em; bottom:-.06em;
  height:.055em;
  background: linear-gradient(90deg,var(--cyan),var(--magenta),var(--yellow));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease) .18s;
}
.display.is-visible em::after, .contact-title.is-visible em::after { transform: scaleX(1); }

/* Hero - corrected type proportions at desktop, laptop and mobile. */
.hero, .hero-media { overflow: clip; }
.hero-media img { width: 100%; max-width: none; transform-origin: center center; }
.hero-content { min-height: 100svh; padding-top: 150px; padding-bottom: 64px; }
.hero-heading { width: min(100%, 1260px); }
.hero-eyebrow { margin-bottom: 25px; }
.hero h1 { font-size: clamp(76px, 8.35vw, 146px); line-height: .82; letter-spacing: -.068em; }
.hero .accent-word { padding-left: clamp(12px, 5.8vw, 88px); font-size: clamp(57px, 6.72vw, 116px); line-height: .98; letter-spacing: -.063em; }
.hero-bottom { grid-template-columns: minmax(300px, 560px) max-content; gap: clamp(26px,4vw,60px); align-items: end; }
.hero-bottom p { max-width: 560px; font-size: clamp(18px,1.55vw,23px); }
.hero-cta { min-height: 52px; }
.hero-register-marks { inset: 114px var(--edge) 26px; }

/* Consistent section rhythm. */
.manifesto { padding: var(--section-space) 0 76px; }
.capabilities { padding: var(--section-space-small) 0; }
.feature, .precision, .services, .project-types, .people, .process { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.gallery { padding-top: 34px; padding-bottom: var(--section-space); }
.section-head { margin-bottom: clamp(64px,7vw,104px); }
.manifesto-grid { grid-template-columns: minmax(0,1.45fr) minmax(270px,.55fr); gap: clamp(48px,8vw,126px); }
.manifesto-copy { max-width: 490px; justify-self: end; }
.capabilities-grid { grid-template-columns: minmax(0,.9fr) minmax(380px,1.1fr); align-items: center; }
.capability { grid-template-columns: 84px minmax(0,1fr); min-height: 76px; }
.feature-grid { grid-template-columns: minmax(300px,.78fr) minmax(0,1.22fr); }
.image-frame img { width:100%; }

/* CMYK - one shared cap-height, one shared baseline, no M/K shrink. */
.color-story { width:100%; overflow:clip; }
.color-panel, .color-panel-lead, .color-panel-image { min-height: 54svh !important; overflow: hidden; }
.color-panel .color-content, .color-panel-lead .color-content, .color-panel-image .color-content, .color-content-unified {
  min-height: 54svh !important;
  padding-top: 72px !important;
  padding-bottom: 48px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(240px,370px);
  align-items: end !important;
  gap: clamp(28px,5vw,80px);
}
.color-panel .channel-letter, .color-panel-lead .channel-letter, .color-panel-image .channel-letter {
  align-self: end;
  justify-self: start;
  width: auto;
  max-width: 100%;
  font-size: clamp(250px, 36vw, 620px) !important;
  line-height: .64 !important;
  letter-spacing: -.085em !important;
  font-kerning: none;
  transform-origin: left bottom;
}
.color-panel .color-content p:not(.eyebrow) { max-width: 360px; margin: 0 !important; padding: 0 0 8px !important; justify-self: end; }
.color-panel .color-content .eyebrow { top: 48px; }
.color-panel img { width:100%; max-width:none; }

/* Service and project cards - tighter, aligned, useful on touch devices. */
.service-row { grid-template-columns: 54px minmax(250px,.82fr) minmax(260px,1fr) 36px; gap: clamp(18px,3vw,42px); min-height: 132px; }
.project-types { border-top: 1px solid rgba(10,10,10,.14); }
.project-type-grid { gap: 20px; }
.project-type { min-height: 450px; padding: 30px; cursor: pointer; }
.project-type h3 { margin-top: auto; font-size: clamp(34px,3.3vw,54px); }
.project-card-cta { position:relative; z-index:2; display:inline-flex; width:max-content; margin-top:22px; padding-bottom:5px; border-bottom:1px solid currentColor; text-transform:uppercase; letter-spacing:.12em; font-size:9px; font-weight:700; }
.project-type:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
.project-type:active { transform: translateY(-2px) scale(.995); }
.gallery-grid { gap: 22px; }
.gallery-card { min-height: 490px; }
.gallery-tall { min-height: 1002px; }
.gallery-wide { min-height: 630px; }

/* People and process - avoid oversized blocks and awkward mobile crops. */
.people-head { grid-template-columns: minmax(0,1.28fr) minmax(280px,.52fr); }
.people-stage { grid-template-columns: minmax(0,1.18fr) minmax(340px,.82fr); }
.people-visual { min-height: 680px; }
.people-visual img { object-position: 50% 48%; }
.role-card { min-height: 0; }
.motion-strip { grid-template-columns: minmax(0,1.18fr) minmax(280px,.7fr) minmax(170px,.34fr); }
.motion-window, .finish-slice { min-height: 390px; }
.process-list li { grid-template-columns: 146px minmax(0,1fr); }
.process-list::before, .process-list::after { left: 72px; }
.process-list li::before { left: 66px; }

/* Contact and footer formatting. */
.contact-inner { padding-top: var(--section-space-small); padding-bottom: var(--section-space-small); }
.contact-head { margin-bottom: clamp(48px,6vw,82px); }
.contact-title { max-width: 1180px; font-size: clamp(68px,9.2vw,154px); line-height:.82; }
.contact-grid { grid-template-columns: minmax(0,1.22fr) minmax(280px,.46fr); }
.project-form { border-radius: 2px; }
.form-field input, .form-field select, .form-field textarea { min-width:0; }
.contact-direct a { overflow-wrap:anywhere; }
.site-footer { padding-top: 78px; }
.footer-grid { grid-template-columns: minmax(260px,1.35fr) repeat(3,minmax(130px,.55fr)); }
.footer-lockup { gap: 12px; align-items:center; }
.footer-lockup img { flex:0 0 52px; width:52px !important; height:52px !important; }
.footer-lockup > span { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:0; font-size:34px; line-height:1; letter-spacing:-.055em; }
.footer-lockup small { grid-column:1/-1; margin-top:3px; font-size:10px; line-height:1; letter-spacing:.16em; }
.footer-brand p { font-size:24px; }

/* Persistent CTA appears after the hero and stays intentionally small. */
.quick-project {
  position: fixed;
  z-index: 90;
  right: 22px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 7px 7px 7px 17px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  color: white;
  background: rgba(10,10,10,.84);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 50px rgba(0,0,0,.22);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .35s ease, transform .45s var(--ease), background .25s ease;
}
.quick-project i { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:var(--yellow); font-style:normal; font-size:15px; }
.quick-project.is-visible { opacity:1; transform:none; pointer-events:auto; }
.quick-project:hover { background: var(--magenta); }
.project-toast { position:fixed; z-index:110; left:50%; bottom:26px; padding:12px 16px; border-radius:999px; color:white; background:var(--ink); box-shadow:0 12px 40px rgba(0,0,0,.25); transform:translate(-50%,24px); opacity:0; pointer-events:none; transition:opacity .3s ease,transform .4s var(--ease); font-size:12px; font-weight:700; }
.project-toast.is-visible { opacity:1; transform:translate(-50%,0); }

/* Keyboard, focus and reduced motion. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

@media (max-width: 1180px) {
  .site-nav { gap: 18px; }
  .site-nav > a:not(.nav-cta) { font-size: 10px; }
  .hero h1 { font-size: clamp(72px,9.2vw,122px); }
  .hero .accent-word { font-size: clamp(54px,7.6vw,94px); }
  .project-type-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 1000px) {
  :root { --section-space: 116px; --section-space-small: 86px; }
  .site-header { height: 76px; }
  .site-header.is-scrolled { height: 68px; }
  .print-progress { top:76px; }
  .site-header.is-scrolled + .print-progress { top:68px; }
  .brand.brand-lockup { max-width: 184px; }
  .brand.brand-lockup .brand-logo { max-height: 32px; }
  .site-header.is-scrolled .brand.brand-lockup .brand-logo { max-height:30px; }
  .hero-content { padding-top: 126px; }
  .hero-bottom { grid-template-columns: 1fr; }
  .manifesto-grid, .capabilities-grid, .feature-grid, .precision-grid, .section-head, .people-head, .people-stage { grid-template-columns: 1fr; }
  .manifesto-copy { max-width:620px; justify-self:start; }
  .capabilities-grid { gap:50px; }
  .feature-grid, .precision-grid { gap:58px; }
  .feature-copy { position:static; }
  .project-type-grid { grid-template-columns: 1fr; }
  .project-type { min-height: 340px; }
  .project-type h3 { margin-top: 82px; }
  .people-stage { gap:28px; }
  .people-visual { min-height: 610px; }
  .motion-strip { grid-template-columns: 1fr 1fr; }
  .motion-window { grid-column:1/-1; }
  .finish-slice { grid-column:auto; }
  .contact-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --section-space: 92px; --section-space-small: 70px; --edge: 15px; }
  .site-header { height:72px; padding-inline:15px; }
  .site-header.is-scrolled { height:66px; }
  .print-progress { top:72px; }
  .site-header.is-scrolled + .print-progress { top:66px; }
  .brand.brand-lockup { max-width: 164px; }
  .brand.brand-lockup .brand-logo, .site-header.is-scrolled .brand.brand-lockup .brand-logo { max-height: 29px; }
  .menu-toggle { width:44px; height:44px; flex:0 0 44px; }
  .site-nav { padding: 104px 20px 34px; justify-content:flex-start; overflow-y:auto; }
  .site-nav a { font-size: clamp(36px,12vw,54px); }
  .nav-cta { width:100%; justify-content:space-between; }
  .hero-content { min-height:100svh; padding-top:112px; padding-bottom:36px; }
  .hero-heading { width:100%; }
  .hero-eyebrow { margin-bottom:18px; }
  .hero h1 { font-size: clamp(62px,16.4vw,72px); line-height:.9; letter-spacing:-.065em; }
  .hero .accent-word { padding-left:24px; font-size: clamp(39px,10.75vw,46px) !important; line-height:1.03 !important; letter-spacing:-.06em; white-space:nowrap; }
  .hero-bottom { gap:22px; }
  .hero-bottom p { max-width:340px; font-size:16px; line-height:1.42; }
  .hero-cta { max-width:100%; }
  .hero-register-marks { inset:94px 14px 17px; }
  .manifesto-grid { gap:38px; }
  .manifesto-copy { font-size:17px; }
  .marquee { margin-top:62px; }
  .capabilities-grid { gap:38px; }
  .capability { grid-template-columns:70px minmax(0,1fr); min-height:72px; gap:14px; }
  .capability strong { font-size:18px; }
  .feature .display, .precision .display, .people .display, .process .display { font-size:clamp(46px,13vw,62px); }
  .image-frame img { height:62svh; min-height:470px; }
  .color-panel, .color-panel-lead, .color-panel-image { min-height:44svh !important; }
  .color-panel .color-content, .color-panel-lead .color-content, .color-panel-image .color-content, .color-content-unified {
    min-height:44svh !important;
    padding:58px 0 34px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
    gap:14px;
  }
  .color-panel .channel-letter, .color-panel-lead .channel-letter, .color-panel-image .channel-letter { font-size:64vw !important; line-height:.64 !important; letter-spacing:-.08em !important; }
  .color-panel .color-content p:not(.eyebrow) { max-width:270px; margin:0 !important; font-size:17px; }
  .color-panel .color-content .eyebrow { top:27px; }
  .panel-register { top:15px; right:14px; }
  .service-row { grid-template-columns:32px minmax(0,1fr) 24px; gap:10px; min-height:0; padding:25px 0; }
  .service-row p { grid-column:2; }
  .project-type { min-height: 330px; padding:24px; }
  .project-type h3 { margin-top:58px; font-size:38px; }
  .project-type p { margin-bottom:20px; font-size:15px; }
  .gallery-grid { gap:14px; }
  .gallery-card, .gallery-tall, .gallery-wide { min-height:58svh; }
  .people-head { gap:36px; margin-bottom:48px; }
  .people-visual { min-height:500px; }
  .people-roles { gap:0; }
  .role-card { padding:26px 6px 26px 42px; }
  .role-card::after { font-size:82px; }
  .motion-strip { grid-template-columns:1fr; gap:14px; }
  .motion-window, .finish-slice { grid-column:auto; min-height:330px; }
  .motion-copy { padding:24px; }
  .process-list li { grid-template-columns:42px minmax(0,1fr); gap:8px; padding:30px 0; }
  .process-list h3 { font-size:38px; overflow-wrap:anywhere; }
  .process-list p { font-size:15px; }
  .contact-title { font-size:clamp(55px,14.5vw,66px); line-height:.86; }
  .project-form { padding:20px; }
  .contact-direct a { font-size:25px; }
  .footer-grid { grid-template-columns:1fr; gap:42px; }
  .footer-lockup > span { font-size:31px; }
  .footer-bottom { flex-wrap:wrap; }
  .quick-project { display:none; }
  .project-toast { bottom:18px; max-width:calc(100vw - 30px); white-space:nowrap; }
}

@media (max-width: 380px) {
  .hero h1 { font-size:59px; }
  .hero .accent-word { padding-left:16px; font-size:37px !important; }
  .button .button-label { font-size:11px; }
}

@media (prefers-reduced-motion: reduce) {
  .display em::after, .contact-title em::after { transform:scaleX(1); }
  .quick-project, .project-toast { transition:none; }
}

/* Final responsive safety patch */
html { scroll-padding-top: 96px; }
main > section, .site-footer { scroll-margin-top: 96px; }
.project-type h3 { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width:640px) {
  html { scroll-padding-top: 80px; }
  main > section, .site-footer { scroll-margin-top: 80px; }
  .hero .accent-word { padding-left:18px; padding-right:.32em; font-size:clamp(38px,10.2vw,43px) !important; overflow:visible; }
}



/* ========================================================================
   TANMEDIA V6 — PHASE 2: CONTENT, INTERACTION, CONVERSION
   ======================================================================== */
:root {
  --acid: #f3ff3a;
  --cream: #f3f0e8;
  --hair: rgba(13,13,13,.14);
  --header-current: 84px;
}
body.phase-2 { background: var(--paper); }
.site-header { z-index: 220; }
.site-header.is-scrolled { --header-current: 70px; }
.hero-bottom p { text-wrap: balance; }
.hero h1 .hero-main, .hero h1 .accent-word { display:block; }
.hero h1 { max-width: 14ch; }
.hero .accent-word { margin-top:.03em; }

/* Sticky chapter rail: a real phase-2 navigation layer. */
.chapter-nav { position:sticky; top:84px; z-index:150; height:0; pointer-events:none; }
.site-header.is-scrolled ~ main .chapter-nav { top:70px; }
.chapter-nav-inner { transform:translateY(14px); display:flex; justify-content:center; gap:4px; pointer-events:auto; }
.chapter-nav a { display:flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:white; background:rgba(10,10,10,.68); backdrop-filter:blur(18px); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:.3s ease; }
.chapter-nav a span { opacity:.52; font-variant-numeric:tabular-nums; }
.chapter-nav a:hover, .chapter-nav a.is-active { color:var(--ink); background:white; border-color:white; }
.chapter-nav a.is-active span { color:var(--magenta); opacity:1; }

/* Credibility without a generic logo wall. */
.proof-strip { padding:0; border-bottom:1px solid var(--hair); }
.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.proof-item { min-height:230px; padding:42px clamp(22px,4vw,62px); display:flex; flex-direction:column; justify-content:space-between; border-right:1px solid var(--hair); }
.proof-item:last-child { border-right:0; }
.proof-item strong { font-size:clamp(70px,8vw,126px); line-height:.76; letter-spacing:-.08em; font-weight:800; }
.proof-item span { max-width:250px; font-size:13px; line-height:1.45; text-transform:uppercase; letter-spacing:.08em; }
.proof-item:nth-child(1) strong { color:var(--cyan); }
.proof-item:nth-child(2) strong { color:var(--magenta); }
.proof-item:nth-child(3) strong { color:var(--ink); }

/* Production map / accordion. */
.capabilities-grid { align-items:start; }
.capabilities-statement { position:sticky; top:150px; }
.capabilities-list { border-top:1px solid var(--hair); }
.capability-accordion { display:block; min-height:0 !important; border-bottom:1px solid var(--hair); }
.capability-trigger { width:100%; padding:25px 0; display:grid; grid-template-columns:64px minmax(0,1fr) 40px; align-items:center; gap:18px; text-align:left; background:none; border:0; color:inherit; cursor:pointer; }
.capability-trigger span { font-size:10px; letter-spacing:.14em; color:var(--magenta); }
.capability-trigger strong { font-size:clamp(26px,2.9vw,46px); line-height:.96; letter-spacing:-.045em; }
.capability-trigger i { width:36px; height:36px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-style:normal; transition:transform .45s var(--ease), background .25s ease; }
.capability-trigger[aria-expanded="true"] i { transform:rotate(45deg); background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.capability-detail { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .55s var(--ease),opacity .35s ease; }
.capability-detail > * { overflow:hidden; }
.capability-detail[data-open="true"] { grid-template-rows:1fr; opacity:1; }
.capability-detail p { padding:0 58px 14px 82px; max-width:680px; font-size:17px; line-height:1.55; }
.capability-detail a { margin:0 58px 28px 82px; width:max-content; border-bottom:1px solid; padding-bottom:4px; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

/* CMYK panels: same letter scale, different emotional cadence. */
.color-panel { isolation:isolate; }
.color-panel::after { content:attr(data-channel); position:absolute; right:2vw; top:50%; transform:translateY(-50%); font-size:10px; font-weight:800; letter-spacing:.2em; writing-mode:vertical-rl; opacity:.32; }
.color-panel .channel-letter { transition:transform .9s var(--ease), filter .55s ease; }
.color-panel.is-active .channel-letter { animation:registerLock .85s var(--ease) both; }
@keyframes registerLock { 0% { transform:translate3d(-18px,10px,0); filter:drop-shadow(12px 0 var(--cyan)) drop-shadow(-10px 0 var(--magenta)); } 70% { filter:drop-shadow(3px 0 var(--cyan)) drop-shadow(-3px 0 var(--magenta)); } 100% { transform:none; filter:none; } }

/* Why section: a new major phase-2 chapter. */
.section-acid { position:relative; color:var(--ink); background:var(--acid); overflow:hidden; }
.why { padding:var(--section-space) 0 calc(var(--section-space) + 40px); }
.why::before { content:""; position:absolute; inset:0; opacity:.16; background-image:radial-gradient(circle at center,rgba(0,0,0,.5) .6px,transparent .7px); background-size:8px 8px; mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent); }
.why-grid { position:relative; display:grid; grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr); gap:clamp(58px,9vw,150px); align-items:start; }
.why-copy { position:sticky; top:150px; }
.why .display { font-size:clamp(58px,7.6vw,126px); line-height:.82; }
.why .display em { font-family:var(--serif); font-weight:400; }
.why-lead { max-width:570px; margin-top:36px; font-size:clamp(18px,1.6vw,24px); line-height:1.45; }
.why-cards { border-top:1px solid rgba(0,0,0,.28); }
.why-card { padding:34px 0 38px; display:grid; grid-template-columns:56px minmax(0,.7fr) minmax(260px,1fr); gap:24px; border-bottom:1px solid rgba(0,0,0,.28); align-items:start; }
.why-card > span { padding-top:7px; font-size:10px; letter-spacing:.14em; }
.why-card h3 { font-size:clamp(28px,3vw,48px); line-height:.95; letter-spacing:-.05em; }
.why-card p { font-size:16px; line-height:1.55; }
.paper-ruler { position:absolute; left:0; right:0; bottom:18px; padding:0 var(--edge); display:grid; grid-template-columns:auto repeat(5,1fr) auto; align-items:end; gap:0; font-size:8px; letter-spacing:.14em; }
.paper-ruler i { height:18px; border-left:1px solid rgba(0,0,0,.42); }
.paper-ruler i:nth-of-type(odd) { height:10px; }

/* Project cards become tactile specifications instead of generic tiles. */
.project-type { isolation:isolate; overflow:hidden; }
.project-type::after { content:""; position:absolute; inset:-1px; z-index:1; opacity:0; pointer-events:none; background:linear-gradient(90deg,transparent 0 48%,rgba(0,236,255,.32) 49%,rgba(255,0,124,.32) 51%,transparent 52%); transform:translateX(-100%); transition:opacity .25s ease, transform .7s var(--ease); }
.project-type:hover::after { opacity:1; transform:translateX(100%); }
.project-specs { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:6px; margin-top:24px; }
.project-specs span { padding:7px 9px; border:1px solid currentColor; border-radius:999px; font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.project-card-cta { margin-top:18px; }
.gallery-head { padding-bottom:clamp(54px,6vw,90px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(300px,.5fr); column-gap:70px; align-items:end; }
.gallery-head .eyebrow { grid-column:1/-1; }
.gallery-head .display { margin-top:18px; }
.gallery-head > p:last-child { font-size:18px; line-height:1.5; }
.gallery-card::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(transparent 68%,rgba(0,0,0,.5)); opacity:.5; }

/* People and process: more editorial and less like a long list. */
.role-card { position:relative; overflow:hidden; }
.role-card::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--yellow)); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.role-card:hover::after { transform:scaleX(1); }
.process-list li { position:relative; transition:background .3s ease, transform .3s ease; }
.process-list li:hover { background:rgba(255,255,255,.04); transform:translateX(8px); }
.process-list li h3 { font-size:clamp(34px,4vw,62px); }

/* Multi-step project form. */
.project-form { min-height:610px; display:flex; flex-direction:column; }
.form-progress { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid rgba(0,0,0,.18); margin:-2px -2px 34px; }
.form-progress-step { position:relative; padding:19px 18px 17px; display:flex; gap:9px; justify-content:center; border:0; border-right:1px solid rgba(0,0,0,.18); background:transparent; color:rgba(0,0,0,.45); text-transform:uppercase; letter-spacing:.1em; font-size:9px; font-weight:700; cursor:pointer; }
.form-progress-step:last-child { border-right:0; }
.form-progress-step span { font-variant-numeric:tabular-nums; }
.form-progress-step.is-active { color:var(--ink); background:rgba(255,255,255,.3); }
.form-progress-step.is-complete::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--ink); }
.form-step { animation:formIn .5s var(--ease) both; }
@keyframes formIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.form-step-head { display:grid; grid-template-columns:54px minmax(0,1fr); gap:18px; align-items:start; margin-bottom:30px; }
.form-step-head > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:white; font-size:10px; }
.form-step-head h3 { font-size:clamp(30px,3vw,48px); line-height:.95; letter-spacing:-.045em; }
.form-step-head p { margin-top:9px; color:rgba(0,0,0,.58); }
.project-choice-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.project-choice { position:relative; min-height:126px; display:flex; align-items:flex-end; padding:18px; border:1px solid rgba(0,0,0,.2); cursor:pointer; transition:.25s ease; }
.project-choice input { position:absolute; opacity:0; }
.project-choice span { font-size:22px; line-height:1.02; font-weight:750; letter-spacing:-.035em; }
.project-choice:has(input:checked) { color:white; background:var(--ink); border-color:var(--ink); box-shadow:inset 0 -4px var(--magenta); }
.phase2-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.file-field { position:relative; padding:20px; border:1px dashed rgba(0,0,0,.35); }
.file-field input { padding:8px 0 12px !important; border:0 !important; }
.file-field > span { display:block; font-size:11px; color:rgba(0,0,0,.55); }
.form-actions { margin-top:auto; padding-top:32px; display:flex; align-items:center; gap:12px; }
.form-back { padding:14px 8px; border:0; border-bottom:1px solid; background:transparent; text-transform:uppercase; letter-spacing:.1em; font-size:9px; font-weight:700; cursor:pointer; }
.form-next, .form-send { margin-left:auto; }
.form-note { max-width:620px; margin-top:20px; color:rgba(0,0,0,.55); font-size:11px; line-height:1.5; }
.consent { display:flex; align-items:flex-start; gap:10px; font-size:11px; line-height:1.45; }
.consent input { width:18px; height:18px; flex:0 0 auto; }
.contact-promise { margin-top:30px; padding-top:22px; display:flex; gap:11px; border-top:1px solid rgba(0,0,0,.25); }
.contact-promise span { width:10px; height:10px; margin-top:4px; flex:0 0 auto; border-radius:50%; background:#24b45a; box-shadow:0 0 0 5px rgba(36,180,90,.14); }
.contact-promise p { margin:0 !important; font-size:12px; line-height:1.45; }

/* Tiny details that belong to print rather than generic web animation. */
.section-paper, .section-dark, .section-cmyk, .section-acid { position:relative; }
.section-paper::after, .section-dark::after { content:""; position:absolute; z-index:4; left:var(--edge); right:var(--edge); bottom:0; height:8px; pointer-events:none; opacity:.34; background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 24px); mask-image:linear-gradient(90deg,transparent,black 9%,black 91%,transparent); }
.cursor-ink { position:fixed; z-index:500; width:260px; height:260px; left:0; top:0; border-radius:50%; pointer-events:none; opacity:0; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(0,236,255,.11),rgba(255,0,124,.055) 35%,transparent 70%); mix-blend-mode:multiply; transition:opacity .3s ease; }
body:hover .cursor-ink { opacity:1; }

@media (max-width:1100px) {
  .chapter-nav-inner { justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding-right:20px; }
  .chapter-nav-inner::-webkit-scrollbar { display:none; }
  .why-grid { grid-template-columns:1fr; }
  .why-copy { position:static; }
  .why-cards { margin-top:30px; }
  .gallery-head { grid-template-columns:1fr; gap:24px; }
  .proof-item { min-height:200px; }
}
@media (max-width:760px) {
  .chapter-nav { top:70px; }
  .chapter-nav-inner { transform:translateY(8px); }
  .chapter-nav a { flex:0 0 auto; padding:8px 10px; font-size:8px; }
  .proof-grid { grid-template-columns:1fr; }
  .proof-item { min-height:150px; border-right:0; border-bottom:1px solid var(--hair); padding:28px 20px; }
  .proof-item:last-child { border-bottom:0; }
  .proof-item strong { font-size:76px; }
  .capabilities-statement { position:static; }
  .capability-trigger { grid-template-columns:42px minmax(0,1fr) 34px; gap:10px; }
  .capability-trigger strong { font-size:27px; }
  .capability-detail p { padding-left:52px; padding-right:8px; font-size:15px; }
  .capability-detail a { margin-left:52px; margin-right:8px; }
  .why-card { grid-template-columns:38px 1fr; }
  .why-card p { grid-column:2; }
  .why .display { font-size:clamp(52px,16vw,78px); }
  .project-choice-grid { grid-template-columns:1fr; }
  .project-choice { min-height:92px; }
  .phase2-form-grid { grid-template-columns:1fr; }
  .form-progress-step { padding:14px 5px; font-size:7px; }
  .form-progress-step span { display:none; }
  .project-form { min-height:680px; }
  .form-step-head { grid-template-columns:42px 1fr; }
  .form-step-head > span { width:34px; height:34px; }
  .form-step-head h3 { font-size:30px; }
  .gallery-head { padding-inline:0; }
  .cursor-ink { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .color-panel.is-active .channel-letter { animation:none; }
  .project-type::after, .cursor-ink { display:none; }
}



.form-step[hidden], .form-back[hidden], .form-next[hidden], .form-send[hidden] { display:none !important; }
@media (max-width:760px) {
  .chapter-nav { display:none; }
  .quick-project { display:none !important; }
  .project-form { min-height:0; }
}



/* ========================================================================
   TANMEDIA V7 - PHASE 2.5: HOMEPAGE FINALIZATION
   ======================================================================== */
:root {
  --v7-edge: clamp(20px, 3vw, 46px);
  --v7-space: clamp(92px, 10vw, 170px);
  --v7-rule: rgba(10,10,10,.14);
}
html { scroll-padding-top: 92px; }
body { overflow-x: clip; }
main > section { scroll-margin-top: 88px; }
.display, .hero h1, .contact-title { text-wrap: balance; }
.lead, .section-intro, .people-intro, .why-lead { text-wrap: pretty; }
.section-paper::after, .section-dark::after { display:none !important; }

/* Header: more breathing room, exact logo containment, calmer navigation. */
.site-header { height:82px !important; padding-inline:clamp(20px,3vw,42px) !important; }
.site-header.is-scrolled { height:68px !important; }
.brand-lockup { max-width:208px !important; min-width:158px; }
.brand.brand-lockup .brand-logo { max-height:36px !important; width:auto !important; }
.site-header.is-scrolled .brand.brand-lockup .brand-logo { max-height:31px !important; }
.site-nav { gap:clamp(20px,2.25vw,38px); font-size:11px; }
.site-nav a:not(.nav-cta)::after { height:2px; background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--yellow)); }
.nav-cta { border-radius:999px !important; gap:12px !important; padding:9px 10px 9px 17px !important; }
.nav-cta > span:last-child { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:white; font-size:14px !important; }

/* Hero: stronger hierarchy, controlled measure, cleaner lower third. */
.hero { min-height:100svh; }
.hero-content { min-height:100svh; padding-top:clamp(132px,13vh,168px); padding-bottom:clamp(34px,5vh,64px); }
.hero-overlay { background:linear-gradient(90deg,rgba(0,0,0,.81) 0%,rgba(0,0,0,.43) 52%,rgba(0,0,0,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.76),transparent 48%); }
.hero-grid { opacity:.095; }
.hero h1 { max-width:none !important; font-size:clamp(74px,8.7vw,154px); line-height:.8; letter-spacing:-.075em; }
.hero .accent-word { padding-left:clamp(0px,5vw,78px); font-size:.78em; -webkit-text-stroke:1.25px white; }
.hero-eyebrow { max-width:560px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; margin-bottom:26px; }
.hero-meta span { padding:8px 11px; border:1px solid rgba(255,255,255,.28); border-radius:999px; background:rgba(0,0,0,.24); backdrop-filter:blur(12px); font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.hero-bottom { grid-template-columns:minmax(320px,620px) max-content; gap:38px; align-items:end; }
.hero-bottom p { max-width:620px; font-size:clamp(17px,1.45vw,22px); line-height:1.42; }
.hero-cta { min-width:0 !important; width:max-content; border-radius:999px !important; padding:8px 8px 8px 20px !important; gap:18px; background:rgba(255,255,255,.14) !important; border-color:rgba(255,255,255,.55) !important; backdrop-filter:blur(16px); }
.hero-cta .button-icon, .hero-cta > span:last-child { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:white; color:var(--ink); }
.scroll-cue { opacity:.62; }

/* Desktop chapter rail: useful, but never over the content. */
.chapter-rail { position:fixed; z-index:145; right:18px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:7px; opacity:0; pointer-events:none; transition:opacity .35s ease; }
body.v7-rail-visible .chapter-rail { opacity:1; pointer-events:auto; }
.chapter-rail a { position:relative; width:34px; min-height:34px; display:flex; align-items:center; justify-content:center; border-radius:999px; background:rgba(10,10,10,.72); color:white; backdrop-filter:blur(14px); transition:width .35s var(--ease),background .25s ease; overflow:hidden; }
.chapter-rail a span { font-size:8px; font-weight:700; letter-spacing:.08em; }
.chapter-rail a i { position:absolute; left:4px; bottom:4px; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.35); }
.chapter-rail a b { max-width:0; opacity:0; margin-left:0; white-space:nowrap; font-size:8px; letter-spacing:.1em; text-transform:uppercase; transition:max-width .35s var(--ease),opacity .2s ease,margin .35s var(--ease); }
.chapter-rail a:hover { width:128px; justify-content:flex-start; padding-left:13px; }
.chapter-rail a:hover b { max-width:90px; opacity:1; margin-left:9px; }
.chapter-rail a.is-active { background:white; color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.chapter-rail a.is-active i { background:var(--magenta); }

/* Global section rhythm. */
.manifesto, .capabilities, .feature, .precision, .services, .project-types, .people, .process { padding-top:var(--v7-space) !important; padding-bottom:var(--v7-space) !important; }
.manifesto-grid, .feature-grid, .precision-grid, .services-head, .people-head { gap:clamp(34px,6vw,96px) !important; }
.manifesto .display, .capabilities .display, .services .display, .project-types .display, .people .display, .process .display { max-width:12ch; }
.manifesto-copy { max-width:650px; }
.manifesto-copy p { font-size:clamp(17px,1.45vw,21px); line-height:1.55; }
.ticker { opacity:.82; }

/* Verified proof strip: no half-finished count animation. */
.proof-item { min-height:210px; padding:40px clamp(24px,4vw,58px); }
.proof-item strong { font-size:clamp(66px,7vw,112px); font-variant-numeric:tabular-nums; }
.proof-item span { max-width:280px; font-size:11px; line-height:1.55; }

/* Production accordion: cleaner, more editorial. */
.capabilities-grid { grid-template-columns:minmax(280px,.72fr) minmax(520px,1.28fr) !important; gap:clamp(50px,8vw,130px) !important; }
.capabilities-statement { top:120px !important; }
.capability-trigger { padding:30px 0; grid-template-columns:52px minmax(0,1fr) 42px; }
.capability-trigger strong { font-size:clamp(28px,2.5vw,43px); }
.capability-detail p { max-width:720px; padding-left:70px; padding-right:42px; }
.capability-detail a { margin-left:70px; }

/* Offset feature and image framing. */
.feature-grid { align-items:center !important; }
.feature-copy .display { max-width:10ch; }
.feature-copy .lead { max-width:600px; }
.feature-image { min-height:clamp(520px,58vw,780px) !important; }
.feature-image img { object-position:center 52%; }

/* CMYK chapter: consistent letter scale and a deliberate intro. */
.color-intro { position:relative; overflow:hidden; padding:clamp(110px,12vw,190px) 0 80px; }
.color-intro-grid { display:grid; grid-template-columns:1.2fr .65fr; gap:clamp(40px,8vw,130px); align-items:end; }
.color-intro .display { max-width:11ch; color:white; }
.color-intro-lead { max-width:560px; margin:0 0 8px; color:#bcbcbc; font-size:clamp(17px,1.6vw,23px); line-height:1.52; }
.register-demo { position:relative; display:grid; grid-template-columns:repeat(4,1fr); margin-top:90px; border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); }
.register-demo span { min-height:160px; display:grid; place-items:center; border-right:1px solid rgba(255,255,255,.2); color:white; font-size:clamp(68px,9vw,154px); font-weight:800; line-height:1; }
.register-demo span:last-child { border-right:0; }
.register-demo span:nth-child(1){ color:var(--cyan); }
.register-demo span:nth-child(2){ color:var(--magenta); }
.register-demo span:nth-child(3){ color:var(--yellow); }
.color-panel { min-height:72svh !important; }
.color-panel .color-content { min-height:72svh !important; padding-block:clamp(60px,8vw,110px) !important; display:grid !important; grid-template-columns:1fr minmax(240px,390px); grid-template-rows:auto 1fr; align-items:end !important; }
.color-panel .eyebrow { grid-column:1 / -1; align-self:start; }
.color-panel .channel-letter { grid-column:1; grid-row:2; align-self:end; font-size:clamp(180px,29vw,430px) !important; line-height:.7 !important; letter-spacing:-.11em; }
.color-panel .color-content > p:not(.eyebrow) { grid-column:2; grid-row:2; align-self:end; max-width:360px; padding-bottom:10px; font-size:clamp(20px,2vw,30px); line-height:1.14; }
.color-panel img { opacity:.30; }

/* Quality: less cramped, image and text share visual weight. */
.precision-grid { align-items:center !important; }
.precision-image { min-height:clamp(480px,48vw,700px) !important; }
.precision-copy .display { max-width:11ch; }
.precision-copy .lead { max-width:620px; }
.precision-tags { gap:8px !important; }

/* Services: calmer rows and a visible interaction cue. */
.services-head { margin-bottom:72px !important; }
.service-row { position:relative; grid-template-columns:66px minmax(260px,.9fr) minmax(300px,1fr) 34px !important; padding:30px 0 !important; }
.service-row::before { content:""; position:absolute; left:0; bottom:-1px; width:0; height:2px; background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--yellow)); transition:width .5s var(--ease); }
.service-row:hover::before { width:100%; }
.service-row h3 { font-size:clamp(24px,2.35vw,40px) !important; }
.service-row p { max-width:560px; }

/* Why: split statement and benefits with more quiet space. */
.why { padding:clamp(110px,11vw,180px) 0 100px !important; }
.why-grid { grid-template-columns:minmax(320px,.9fr) minmax(500px,1.1fr) !important; gap:clamp(70px,9vw,150px) !important; }
.why-copy { top:120px !important; }
.why .display { max-width:10ch; }
.why-card { min-height:210px; grid-template-columns:54px minmax(180px,.65fr) 1fr !important; padding:34px 0 !important; }
.why-card p { max-width:520px; }
.paper-ruler { opacity:.42; }

/* Application cards: balanced content, no giant empty middle. */
.project-types-head { display:grid; grid-template-columns:1.1fr .65fr; gap:clamp(40px,7vw,110px); align-items:end; }
.project-types-head .section-intro { margin:0; }
.content-status { grid-column:2; display:flex; align-items:flex-start; gap:10px; margin:22px 0 0; color:rgba(0,0,0,.58); font-size:11px; line-height:1.45; }
.content-status span { width:8px; height:8px; margin-top:4px; flex:0 0 auto; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(255,221,0,.18); }
.project-type-grid { gap:14px !important; }
.project-type { min-height:440px !important; padding:30px !important; }
.project-type h3 { margin-top:92px !important; margin-bottom:18px !important; font-size:clamp(32px,3vw,50px) !important; }
.project-type p { max-width:420px; }
.project-specs { margin-top:22px !important; }
.project-card-cta { margin-top:auto !important; }

/* Gallery: cleaner proportions and reveal treatment. */
.gallery { padding:40px 0 var(--v7-space) !important; }
.gallery-head { margin-bottom:58px !important; }
.gallery-grid { gap:16px !important; }
.gallery-card { min-height:460px !important; }
.gallery-tall { min-height:936px !important; }
.gallery-wide { min-height:620px !important; }
.gallery-card figcaption { left:14px; bottom:14px; border-radius:999px; }

/* People and process: better measures. */
.people-head { grid-template-columns:1.05fr .55fr !important; align-items:end; }
.people-intro { max-width:520px; font-size:18px !important; line-height:1.55; }
.people-stage { grid-template-columns:1.12fr .88fr !important; gap:18px !important; }
.people-visual { min-height:680px !important; }
.role-card { padding:32px 28px !important; }
.motion-strip { margin-top:18px !important; }
.process-head { margin-bottom:70px !important; }
.process-list li { grid-template-columns:120px minmax(260px,.85fr) minmax(300px,.65fr); gap:40px; align-items:start; }
.process-list h3 { font-size:clamp(34px,4.2vw,70px) !important; }
.process-list p { margin-top:8px; max-width:500px; }

/* Contact: headline stays inside the section; form gains hierarchy. */
.contact-inner { min-height:auto !important; padding:clamp(120px,12vw,190px) 0 90px !important; }
.contact-title { max-width:11ch; margin-bottom:64px !important; font-size:clamp(68px,9.5vw,156px) !important; line-height:.82 !important; }
.contact-layout { align-items:start !important; }
.project-form { min-height:650px !important; border-radius:2px; box-shadow:0 24px 60px rgba(70,40,0,.14); }
.form-progress { position:sticky; top:68px; z-index:5; background:rgba(255,250,235,.94); backdrop-filter:blur(12px); }
.form-step-head h3 { max-width:17ch; }
.project-choice { min-height:130px !important; }
.form-actions .button { min-width:0 !important; border-radius:999px; padding:10px 10px 10px 18px; }
.form-actions .button-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:white; color:var(--ink); }
.contact-direct { position:sticky; top:110px; }
.contact-promise { max-width:330px; }

/* Paper reveal and frame indexing. */
[data-paper-reveal] { position:relative; isolation:isolate; }
[data-paper-reveal]::after { content:""; position:absolute; z-index:8; inset:-1px; background:var(--paper); transform-origin:right center; transform:scaleX(1); transition:transform 1.05s var(--ease); pointer-events:none; }
.section-dark [data-paper-reveal]::after { background:var(--ink); }
[data-paper-reveal].is-paper-visible::after { transform:scaleX(0); }
.frame-index { position:absolute; z-index:9; top:14px; right:14px; min-width:34px; height:34px; padding:0 9px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.9); color:var(--ink); font-size:8px; font-weight:800; letter-spacing:.1em; backdrop-filter:blur(10px); opacity:0; transform:translateY(-8px); transition:opacity .35s ease .55s,transform .45s var(--ease) .55s; }
.is-paper-visible .frame-index { opacity:1; transform:none; }

/* Footer polish. */
.site-footer { padding-top:78px !important; }
.footer-brand img { width:190px !important; padding:0 !important; background:transparent !important; }
.footer-brand p { max-width:430px; font-size:clamp(22px,2vw,30px) !important; line-height:1.25; }

@media (max-width:1180px) {
  .chapter-rail { display:none; }
  .site-nav { gap:18px; }
  .site-nav > a:not(.nav-cta) { display:none; }
  .capabilities-grid, .why-grid { grid-template-columns:1fr !important; }
  .capabilities-statement, .why-copy, .contact-direct { position:static !important; }
  .project-types-head { grid-template-columns:1fr; }
  .content-status { grid-column:1; max-width:520px; }
  .color-intro-grid { grid-template-columns:1fr; }
  .color-intro-lead { max-width:680px; }
  .people-head { grid-template-columns:1fr !important; }
  .people-intro { max-width:680px; }
  .process-list li { grid-template-columns:84px 1fr; }
  .process-list p { grid-column:2; }
}

@media (max-width:760px) {
  html { scroll-padding-top:72px; }
  main > section { scroll-margin-top:72px; }
  .site-header { height:70px !important; padding-inline:14px !important; }
  .site-header.is-scrolled { height:64px !important; }
  .brand-lockup { min-width:0; max-width:155px !important; }
  .brand.brand-lockup .brand-logo { max-height:29px !important; }
  .site-header.is-scrolled .brand.brand-lockup .brand-logo { max-height:27px !important; }
  .nav-cta { display:none !important; }
  .menu-toggle { margin-left:auto; }

  .hero { min-height:100svh; }
  .hero-content { padding:110px 16px 26px !important; }
  .hero-media img { object-position:58% center !important; }
  .hero h1 { font-size:clamp(54px,17vw,78px) !important; line-height:.82 !important; letter-spacing:-.07em !important; }
  .hero .accent-word { padding-left:0 !important; font-size:.72em !important; line-height:1 !important; }
  .hero-meta { margin-bottom:18px; gap:5px; }
  .hero-meta span { padding:6px 8px; font-size:7px; }
  .hero-bottom { grid-template-columns:1fr !important; gap:20px !important; align-items:start !important; }
  .hero-bottom p { max-width:34ch; font-size:15px !important; line-height:1.45 !important; }
  .hero-cta { width:max-content !important; }
  .scroll-cue { display:none !important; }

  .manifesto, .capabilities, .feature, .precision, .services, .project-types, .people, .process { padding-top:86px !important; padding-bottom:86px !important; }
  .display { font-size:clamp(46px,14vw,68px) !important; line-height:.88 !important; }
  .manifesto .display, .capabilities .display, .services .display, .project-types .display, .people .display, .process .display { max-width:none; }
  .manifesto-grid { gap:36px !important; }
  .manifesto-copy p { font-size:16px; }
  .ticker { font-size:28px !important; }

  .proof-item { min-height:132px; padding:26px 18px; }
  .proof-item strong { font-size:68px; }
  .proof-item span { max-width:230px; font-size:9px; }

  .capability-trigger { grid-template-columns:34px minmax(0,1fr) 32px !important; gap:10px; padding:24px 0; }
  .capability-trigger strong { font-size:27px !important; }
  .capability-detail p { padding:0 2px 16px 44px !important; font-size:15px; }
  .capability-detail a { margin:0 2px 24px 44px !important; }

  .feature-grid, .precision-grid { gap:44px !important; }
  .feature-copy .display, .precision-copy .display { max-width:none; }
  .feature-image { min-height:430px !important; }
  .precision-image { width:100% !important; max-width:100% !important; min-height:0 !important; aspect-ratio:1 !important; }

  .color-intro { padding:90px 0 54px; }
  .color-intro-grid { gap:30px; }
  .color-intro-lead { font-size:16px; }
  .register-demo { margin-top:52px; }
  .register-demo span { min-height:92px; font-size:58px; }
  .color-panel { min-height:62svh !important; }
  .color-panel .color-content { min-height:62svh !important; padding:48px 16px !important; grid-template-columns:1fr !important; grid-template-rows:auto 1fr auto !important; }
  .color-panel .eyebrow { grid-column:1; }
  .color-panel .channel-letter { grid-column:1; grid-row:2; align-self:center; justify-self:end; font-size:clamp(176px,58vw,250px) !important; }
  .color-panel .color-content > p:not(.eyebrow) { grid-column:1; grid-row:3; max-width:28ch; padding:0; font-size:18px; }

  .service-row { grid-template-columns:34px 1fr 26px !important; gap:10px !important; padding:24px 0 !important; }
  .service-row h3 { font-size:25px !important; }
  .service-row p { grid-column:2; font-size:14px; }

  .why { padding:86px 0 70px !important; }
  .why-grid { gap:46px !important; }
  .why-card { min-height:0; grid-template-columns:36px 1fr !important; gap:12px; padding:26px 0 !important; }
  .why-card p { grid-column:2; }

  .project-types-head { gap:24px; margin-bottom:42px !important; }
  .content-status { font-size:10px; }
  .project-type-grid { grid-template-columns:1fr !important; }
  .project-type { min-height:390px !important; }
  .project-type h3 { margin-top:76px !important; font-size:40px !important; }

  .gallery { padding-top:10px !important; }
  .gallery-head { margin-bottom:36px !important; }
  .gallery-grid { grid-template-columns:1fr !important; gap:10px !important; }
  .gallery-card, .gallery-tall, .gallery-wide { min-height:440px !important; grid-row:auto !important; grid-column:auto !important; }

  .people-stage { grid-template-columns:1fr !important; }
  .people-visual { min-height:500px !important; }
  .role-card { padding:26px 20px !important; }
  .motion-strip { grid-template-columns:1fr !important; }

  .process-head { margin-bottom:42px !important; }
  .process-list li { grid-template-columns:34px 1fr !important; gap:10px 14px !important; padding:28px 0 !important; }
  .process-list h3 { font-size:34px !important; }
  .process-list p { grid-column:2; font-size:14px; }

  .contact-inner { padding:96px 0 62px !important; }
  .contact-title { max-width:none; margin-bottom:42px !important; font-size:clamp(54px,16vw,76px) !important; }
  .contact-layout { gap:40px !important; }
  .project-form { min-height:0 !important; padding:0 !important; }
  .form-progress { top:64px; }
  .form-step { padding:26px 18px !important; }
  .project-choice-grid { grid-template-columns:1fr !important; }
  .project-choice { min-height:88px !important; }
  .form-actions { padding:22px 18px 26px !important; flex-wrap:wrap; }
  .form-next, .form-send { width:100%; margin-left:0 !important; justify-content:space-between; }
  .form-back { order:2; }
  .form-note { padding-inline:18px; }

  .footer-grid { grid-template-columns:1fr 1fr !important; gap:46px 24px !important; }
  .footer-brand { grid-column:1 / -1; }
  .footer-brand img { width:170px !important; }
  .footer-brand p { max-width:300px; }
  .frame-index { top:10px; right:10px; }
}

@media (max-width:390px) {
  .hero h1 { font-size:52px !important; }
  .hero .accent-word { font-size:.69em !important; }
  .hero-meta span:nth-child(4) { display:none; }
  .display { font-size:44px !important; }
  .project-type h3 { font-size:36px !important; }
  .footer-grid { grid-template-columns:1fr !important; }
  .footer-brand { grid-column:1; }
}

@media (prefers-reduced-motion:reduce) {
  [data-paper-reveal]::after { display:none; }
  .frame-index { opacity:1; transform:none; transition:none; }
  .chapter-rail { transition:none; }
}



/* Tanmedia V12 hybrid: V8 visual character + V11 technical foundation */
html{overflow-x:hidden}.skip-link{position:fixed;z-index:5000;left:16px;top:12px;padding:12px 16px;background:#fff;color:#000;transform:translateY(-160%);transition:transform .2s}.skip-link:focus{transform:none}.brand.brand-lockup{display:flex;align-items:center;height:48px;width:clamp(190px,17vw,244px)}.brand.brand-lockup .brand-logo{display:block;width:100%;height:100%;max-height:48px;object-fit:contain;object-position:left center}.site-header.is-scrolled .brand.brand-lockup .brand-logo{max-height:42px}.hero-bottom{grid-template-columns:minmax(0,1fr) auto auto!important}.hero-secondary-link{align-self:center;color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.55);padding:10px 0}.hero-secondary-link:hover{border-color:var(--cyan)}
/* The CMYK story is deliberately exceptional, not compressed into cards. */
.color-story{overflow:clip;background:var(--cyan)}.color-intro{padding-top:clamp(120px,13vw,200px)!important}.color-panel{min-height:82svh!important;isolation:isolate}.color-panel .color-content{min-height:82svh!important;padding-block:clamp(70px,9vw,130px)!important}.color-panel .channel-letter{font-size:clamp(210px,31vw,470px)!important;line-height:.68!important;transform:translateY(12%) scale(.94);opacity:.68;filter:blur(1px);transition:transform 1s var(--ease),opacity .8s,filter .8s}.color-panel.is-active .channel-letter{transform:none;opacity:1;filter:none}.color-panel.is-active .channel-letter:after{opacity:.32;transform:translate(7px,-3px)}.color-panel img{opacity:.38!important;transform:scale(1.08)!important;transition:transform 1.6s var(--ease),opacity 1s}.color-panel.is-active img{transform:scale(1)!important;opacity:.46!important}.panel-register{opacity:.5}.color-panel .color-content>p:not(.eyebrow){max-width:420px!important;text-wrap:balance}
/* Keep large moments; make ordinary sections calmer and more readable. */
.manifesto-copy,.lead,.people-intro,.color-intro-lead{max-width:62ch}.process-list p{line-height:1.55}.capability-detail p{max-width:64ch}.project-type p{max-width:46ch}.contact-full-link{margin-top:34px!important;font-size:14px!important;letter-spacing:.02em!important;border-bottom:1px solid!important}.site-footer a{display:inline-block;padding:5px 0}.footer-brand img{background:transparent!important;padding:0!important;object-fit:contain}.footer-bottom{align-items:center}.hybrid-back-to-top{position:fixed;z-index:850;right:22px;bottom:22px;width:50px;height:50px;border:1px solid rgba(0,0,0,.14);border-radius:50%;background:#fff;color:#000;box-shadow:0 14px 40px rgba(0,0,0,.16);font:700 20px/1 Arial;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}.hybrid-back-to-top:not([hidden]){opacity:1;transform:none;pointer-events:auto}.hybrid-back-to-top:hover{transform:translateY(-3px) rotate(8deg)}
:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}.section-dark :focus-visible,.hero :focus-visible{outline-color:var(--yellow)}
@media(max-width:1180px){.site-header{height:74px!important;padding-inline:18px!important}.menu-toggle{display:block!important}.site-nav{position:fixed!important;inset:0!important;padding:120px 24px 44px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;gap:16px!important;background:var(--paper)!important;color:var(--ink)!important;transform:translateY(-105%)!important;transition:transform .55s var(--ease)!important}.site-nav.is-open{transform:none!important}.site-nav>a,.site-nav>a:not(.nav-cta){display:flex!important;font-size:clamp(34px,8vw,68px)!important;line-height:1!important;letter-spacing:-.05em!important;text-transform:none!important}.site-nav .nav-cta{margin-top:20px!important;font-size:12px!important;letter-spacing:.1em!important;text-transform:uppercase!important}.hero-bottom{grid-template-columns:1fr!important}.hero-secondary-link{justify-self:start}.color-panel .color-content{grid-template-columns:minmax(0,1fr) minmax(220px,340px)!important}}
@media(max-width:760px){.brand.brand-lockup{width:154px!important;height:34px!important}.brand.brand-lockup .brand-logo{max-height:31px!important}.hero-bottom{gap:18px!important}.hero-secondary-link{font-size:10px}.color-panel{min-height:68svh!important}.color-panel .color-content{min-height:68svh!important;grid-template-columns:1fr!important;grid-template-rows:auto 1fr auto!important;padding:52px 16px!important}.color-panel .channel-letter{grid-column:1!important;grid-row:2!important;justify-self:end!important;align-self:center!important;font-size:clamp(180px,60vw,270px)!important}.color-panel .color-content>p:not(.eyebrow){grid-column:1!important;grid-row:3!important;font-size:18px!important;max-width:29ch!important}.register-demo span{font-size:clamp(48px,17vw,72px)!important}.hybrid-back-to-top{right:14px;bottom:14px;width:46px;height:46px}.footer-grid{grid-template-columns:1fr!important}.footer-brand{grid-column:auto!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.color-panel .channel-letter,.color-panel img,.hybrid-back-to-top{transition:none!important;transform:none!important}.marquee-track{animation:none!important}.intro{display:none!important}.reveal{opacity:1!important;transform:none!important}}


/* ==========================================================================\n   PHASE 4A - FINAL DESIGN & CONTENT PASS\n   Keep the V8/V12 large moments. Refine everything around them.\n   ========================================================================== */
:root{--paper-warm:#f5f2eb;--ink-soft:#171717;--rule:rgba(10,10,10,.14)}
body.phase-4{background:var(--paper-warm)}

/* Cleaner rhythm: the spectacular sections stay large, ordinary sections breathe. */
body.phase-4 .manifesto{padding-top:clamp(118px,10vw,164px)}
body.phase-4 .capabilities{padding-block:clamp(86px,7vw,118px)}
body.phase-4 .feature{padding-block:clamp(120px,10vw,170px)}
body.phase-4 .services{padding-block:clamp(110px,8vw,145px) clamp(80px,7vw,112px)}
body.phase-4 .project-types{padding-block:clamp(112px,8vw,150px)}
body.phase-4 .gallery{padding-top:clamp(64px,6vw,92px)}
body.phase-4 .process{padding-block:clamp(118px,9vw,160px)}

/* Hero: one clear message, supporting information stays secondary. */
body.phase-4 .hero-bottom{max-width:1180px}
body.phase-4 .hero-bottom>p{max-width:620px;color:rgba(255,255,255,.92)}
body.phase-4 .hero-meta{gap:8px 18px}
body.phase-4 .hero-meta span{position:relative;padding-right:18px}
body.phase-4 .hero-meta span:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;width:4px;height:4px;border-radius:50%;background:var(--yellow);transform:translateY(-50%)}
.hero-production-stamp{position:absolute;z-index:4;right:30px;top:50%;display:grid;gap:7px;transform:translateY(-50%);color:rgba(255,255,255,.66);font-size:8px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;writing-mode:vertical-rl}
.hero-production-stamp b{color:#fff;font-weight:800}

/* Proof strip should read like evidence, not a dashboard. */
body.phase-4 .proof-strip{border-block:1px solid var(--rule)}
body.phase-4 .proof-item{padding-block:36px}
body.phase-4 .proof-item strong{font-variant-numeric:tabular-nums}
body.phase-4 .proof-item span{max-width:24ch}

/* Paper-like cards - subtle crop marks instead of generic UI decoration. */
body.phase-4 .project-type{background:#f8f6f0;border-color:rgba(10,10,10,.2);box-shadow:0 18px 55px rgba(27,23,15,.035)}
body.phase-4 .project-type::before{content:"";position:absolute;z-index:3;inset:14px;pointer-events:none;opacity:.4;background:
 linear-gradient(var(--ink),var(--ink)) left top/16px 1px no-repeat,
 linear-gradient(var(--ink),var(--ink)) left top/1px 16px no-repeat,
 linear-gradient(var(--ink),var(--ink)) right top/16px 1px no-repeat,
 linear-gradient(var(--ink),var(--ink)) right top/1px 16px no-repeat,
 linear-gradient(var(--ink),var(--ink)) left bottom/16px 1px no-repeat,
 linear-gradient(var(--ink),var(--ink)) left bottom/1px 16px no-repeat,
 linear-gradient(var(--ink),var(--ink)) right bottom/16px 1px no-repeat,
 linear-gradient(var(--ink),var(--ink)) right bottom/1px 16px no-repeat}
body.phase-4 .project-type:hover::before{filter:invert(1);opacity:.55}
body.phase-4 .project-card-cta{position:relative;z-index:4;margin-top:26px;align-self:flex-start;padding-bottom:4px;border-bottom:1px solid currentColor;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
body.phase-4 .project-specs{margin-top:0}

/* Gallery is editorial rather than defensive. */
.gallery-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.5fr);gap:60px;align-items:end;margin-bottom:58px}
.gallery-head>.eyebrow{grid-column:1/-1;margin-bottom:0}.gallery-head>.display{grid-column:1}.gallery-head>p:last-child{grid-column:2;margin:0 0 8px;color:#5b5750;font-size:17px;line-height:1.6}

/* The static motion area already works as a visual chapter; no placeholder wording needed. */
.motion-copy h3{max-width:620px}
.motion-copy p:last-child{max-width:58ch;color:#aaa;line-height:1.65}

/* Contact: honest prototype behavior without prototype language in the visible design. */
.form-service-note{grid-column:1/-1;margin:2px 0 0;padding:12px 14px;border-left:3px solid var(--magenta);background:rgba(255,255,255,.45);color:#4a453d;font-size:12px;line-height:1.55}
body.phase-4 .form-note{display:none}
body.phase-4 .consent span{line-height:1.55}
body.phase-4 .contact-promise{margin-top:34px}

/* CMYK remains a deliberate full-size exception. */
body.phase-4 .color-intro{padding-bottom:clamp(72px,7vw,110px)!important}
body.phase-4 .color-panel{min-height:88svh!important}
body.phase-4 .color-panel .color-content{min-height:88svh!important}
body.phase-4 .color-panel-image{min-height:100svh!important}
body.phase-4 .color-panel-image .color-content{min-height:100svh!important}
body.phase-4 .color-panel .channel-letter{font-size:clamp(220px,32vw,500px)!important}

/* Footer: more premium lockup, less boxed-logo feeling. */
body.phase-4 .site-footer{padding-top:100px}
body.phase-4 .footer-lockup img{width:52px;height:52px}
body.phase-4 .footer-brand p{max-width:360px;font-size:24px;line-height:1.18}

@media(max-width:1000px){
 .hero-production-stamp{display:none}
 .gallery-head{grid-template-columns:1fr;gap:30px}.gallery-head>.eyebrow,.gallery-head>.display,.gallery-head>p:last-child{grid-column:1}
}
@media(max-width:640px){
 body.phase-4 .hero-bottom>p{font-size:16px;line-height:1.48}
 body.phase-4 .color-panel{min-height:72svh!important}
 body.phase-4 .color-panel .color-content{min-height:72svh!important}
 body.phase-4 .color-panel-image,body.phase-4 .color-panel-image .color-content{min-height:84svh!important}
 body.phase-4 .project-type{min-height:410px}
 .gallery-head{margin-bottom:38px}
}

/* Phase 4A micro-polish */
.content-link{width:max-content;max-width:100%;padding-bottom:5px;border-bottom:1px solid rgba(10,10,10,.3);transition:border-color .25s,color .25s}
.content-link:hover{border-color:var(--magenta);color:#000}
body.phase-4 .project-specs{margin-top:20px}

/* V16 resilience */
.media-error{position:relative;background:linear-gradient(135deg,#101010,#242424)!important;min-height:220px}.media-error::after{content:"Bild wird ergänzt";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}.media-error img{visibility:hidden}


/* ========================================================================== 
   V17 - homepage polish. V12 hero + immersive CMYK remain design anchors.
   ========================================================================== */
.hero-bottom>p{max-width:690px;text-wrap:pretty}
.proof-item strong{letter-spacing:-.055em}
.proof-item strong:not(:first-letter){font-variant-numeric:tabular-nums}
.proof-item:last-child strong{font-size:clamp(28px,3.2vw,48px);letter-spacing:-.045em}
.gallery-head>p:last-child{max-width:66ch;line-height:1.65;color:#57534d}
.motion-label b{letter-spacing:.14em}
.project-kicker{letter-spacing:.13em}
.project-type{transition:transform .38s var(--ease),background .28s ease}
.project-type:hover,.project-type:focus-visible{transform:translateY(-5px)}
.project-type::after{content:"";position:absolute;inset:10px;pointer-events:none;opacity:0;background:linear-gradient(#111,#111) left top/15px 1px no-repeat,linear-gradient(#111,#111) left top/1px 15px no-repeat,linear-gradient(#111,#111) right bottom/15px 1px no-repeat,linear-gradient(#111,#111) right bottom/1px 15px no-repeat;transition:opacity .25s}
.project-type:hover::after,.project-type:focus-visible::after{opacity:.28}
.contact-full-link{display:inline-flex;margin-top:20px;font-size:10px;font-weight:850;letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:6px}
.footer-grid>div:nth-child(3) a{margin-bottom:5px}
@media(max-width:700px){.project-type:hover,.project-type:focus-visible{transform:none}.proof-item:last-child strong{font-size:30px}}
@media(prefers-reduced-motion:reduce){.project-type{transition:none}.project-type:hover,.project-type:focus-visible{transform:none}}

/* V17 QA fix: the previous min-height + aspect-ratio combination could make
   the circular quality image wider than its grid column and cover the copy. */
.precision-image{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  aspect-ratio:1 / 1 !important;
}
.precision-image img{width:100% !important;height:100% !important;object-fit:cover !important;}
.precision-copy{position:relative;z-index:2;min-width:0;}

/* V17 QA fix: never split long German product names inside the word. */
.project-type h3{
  overflow-wrap:normal !important;
  word-break:normal !important;
  hyphens:none !important;
  font-size:clamp(30px,2.55vw,43px) !important;
}
@media(max-width:640px){
  .project-type h3{font-size:clamp(30px,9.5vw,36px) !important;}
}


/* V18 - homepage is a prefill, not a second submission endpoint. */
.prefill-note{margin:4px 0 0;padding:13px 15px;border-left:3px solid var(--cyan);background:rgba(255,255,255,.48);color:#4a453d;font-size:12px;line-height:1.55}.prefill-note strong{color:#111}

/* V19 - homepage interaction cleanup */
a.project-type{display:flex;flex-direction:column;color:inherit;text-decoration:none;cursor:pointer}.project-type .project-card-cta{display:inline-flex;width:max-content;max-width:100%;margin-top:auto;padding-top:24px;border-bottom:1px solid currentColor;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.project-type:hover .project-card-cta{border-color:var(--magenta)}.footer-lockup{display:inline-flex!important;align-items:center!important}.footer-lockup img{width:min(220px,70vw)!important;height:auto!important;max-height:52px!important;object-fit:contain!important;object-position:left center!important;background:transparent!important;padding:0!important}@media(max-width:760px){.project-type .project-card-cta{font-size:9px}.footer-lockup img{width:190px!important;max-height:46px!important}}

/* V21 - same navigation model on the homepage as on every subpage */
.site-nav .nav-dropdown{position:relative}
.site-nav .nav-dropdown>summary{position:relative;display:flex;align-items:center;gap:7px;padding:12px 0;list-style:none;cursor:pointer;white-space:nowrap}
.site-nav .nav-dropdown>summary::-webkit-details-marker{display:none}
.site-nav .nav-dropdown>summary::before{content:"+";font-size:14px;font-weight:650;line-height:1;transition:transform .25s var(--ease)}
.site-nav .nav-dropdown[open]>summary::before{transform:rotate(45deg)}
.site-nav .nav-dropdown>summary::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--yellow));transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.site-nav .nav-dropdown:hover>summary::after,.site-nav .nav-dropdown[open]>summary::after,.site-nav .nav-dropdown.is-current>summary::after{transform:scaleX(1);transform-origin:left}
.site-nav .nav-dropdown-panel{position:absolute;top:calc(100% + 14px);left:50%;width:360px;padding:12px;background:#fff;border:1px solid rgba(0,0,0,.12);box-shadow:0 22px 52px rgba(0,0,0,.15);transform:translateX(-50%);color:#111;text-transform:none;letter-spacing:0}
.site-nav .nav-products .nav-dropdown-panel{width:330px}
.site-nav .nav-dropdown:not([open]) .nav-dropdown-panel{display:none}
.site-nav .nav-panel-kicker{margin:7px 12px 6px;color:#737373;font-size:8px;font-weight:850;letter-spacing:.16em;text-transform:uppercase}
.site-nav .nav-dropdown-panel a{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;min-height:44px;padding:12px;border-bottom:1px solid rgba(0,0,0,.09);font-size:14px!important;font-weight:750!important;letter-spacing:0!important;text-transform:none!important;line-height:1.2!important;transition:background .22s ease,padding .28s var(--ease)}
.site-nav .nav-dropdown-panel a:last-child{border-bottom:0}
.site-nav .nav-dropdown-panel a span{font-size:9px;color:#777;letter-spacing:.12em}
.site-nav .nav-dropdown-panel a:hover,.site-nav .nav-dropdown-panel a:focus-visible{background:#f2f0ea;padding-left:17px}
.site-nav .nav-dropdown-panel a::after{display:none!important}
@media(max-width:1180px){
  .site-nav{justify-content:flex-start!important;overflow-y:auto!important;padding-top:100px!important;padding-bottom:40px!important}
  .site-nav .nav-dropdown{width:100%;flex:none}
  .site-nav .nav-dropdown>summary{font-size:clamp(34px,8vw,68px)!important;line-height:1!important;letter-spacing:-.05em!important;text-transform:none!important;font-weight:800;padding:7px 0}
  .site-nav .nav-dropdown>summary::after{display:none}
  .site-nav .nav-dropdown-panel,.site-nav .nav-products .nav-dropdown-panel{position:static;width:100%;transform:none;padding:6px 0 14px;border:0;box-shadow:none;background:transparent}
  .site-nav .nav-panel-kicker{margin-left:0;margin-top:8px}
  .site-nav .nav-dropdown-panel a{width:100%;padding:9px 0!important;border-bottom:0;font-size:16px!important;grid-template-columns:31px 1fr}
  .site-nav .nav-dropdown-panel a span{font-size:8px}
}