/* =========================================================
   VISIONX WEB DEVELOPER — DIGITAL SHOWROOM
   Design tokens
   ========================================================= */
:root{
  --ink:        #0b0d10;
  --ink-2:      #14171c;
  --ink-3:      #1c2027;
  --paper:      #f6f3ec;
  --paper-2:    #efe8d9;
  --brass:      #c9a227;
  --brass-soft: #e4c766;
  --teal:       #1f3a3d;
  --teal-soft:  #345c60;
  --text-light: #f3efe6;
  --text-dark:  #14171c;
  --muted:      #9aa0a8;
  --muted-dark: #5b6069;
  --line:       #2a2e34;
  --line-light: #ddd5c0;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --container: 1280px;
  --gutter: clamp(24px, 5vw, 80px);
  --radius-s: 4px;
  --radius-m: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

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

h1,h2,h3{ font-family: var(--font-display); font-weight: 500; margin: 0; letter-spacing: -0.01em; }
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
img{ max-width: 100%; display: block; }
button{ font-family: inherit; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 18px;
}

/* film grain overlay for premium texture */
.grain{
  position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.progress-rail{ position: fixed; top:0; left:0; right:0; height:2px; z-index: 9999; background: transparent; }
.progress-fill{ height:100%; width:0%; background: linear-gradient(90deg,var(--brass),var(--brass-soft)); }

.cursor-dot{
  position: fixed; top:0; left:0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brass-soft); pointer-events: none; z-index: 9997; opacity: 0;
  transform: translate(-50%,-50%); transition: opacity .3s var(--ease), width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
  mix-blend-mode: difference;
}
.cursor-dot.show{ opacity: .9; }
.cursor-dot.big{ width: 46px; height: 46px; background: var(--brass-soft); opacity: .18; mix-blend-mode: normal; }
@media (hover:none), (max-width: 1024px){ .cursor-dot{ display:none; } }

/* =========================================================
   IMAGE / MEDIA PLACEHOLDER SYSTEM
   Drop a real photo at the src path shown in each .media-hint
   and it replaces the gradient automatically — no markup changes needed.
   ========================================================= */
.media{
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(201,162,39,.22), rgba(20,23,28,.92));
}
.media img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 1; transition: transform .8s var(--ease);
}
.media.no-image img{ display: none; }
.media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 26px);
  opacity: 0; transition: opacity .4s var(--ease);
}
.media.no-image::after{ opacity: 1; }
.media-hint{
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em;
  color: rgba(243,239,230,.55);
  background: rgba(11,13,16,.4); border: 1px solid rgba(243,239,230,.18);
  border-radius: 999px; padding: 5px 12px;
  opacity: 0; transition: opacity .3s var(--ease);
  pointer-events: none;
}
.media.no-image .media-hint{ opacity: 1; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 28px;
  font-size: 14px; font-weight: 500;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.btn-primary{ background: var(--brass); color: var(--ink); }
.btn-primary:hover{ background: var(--brass-soft); transform: translateY(-2px); }
.btn-line{ border-color: rgba(243,239,230,.35); color: var(--text-light); }
.btn-line:hover{ border-color: var(--brass); color: var(--brass-soft); transform: translateY(-2px); }
.btn-ghost{ border-color: rgba(243,239,230,.25); color: var(--text-light); padding: 10px 20px; font-size: 13px; }
.btn-ghost:hover{ border-color: var(--brass); color: var(--brass-soft); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  transition: padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  background: rgba(11,13,16,.82);
  border-color: var(--line);
}
/* Blur lives on a pseudo-element, not on .nav itself. backdrop-filter
   (like transform/filter) makes the element it's applied to a new
   containing block for any position:fixed descendants — and #navMobile
   is position:fixed; inset:0, built once with the full link set. Once
   scrolled, that would silently re-anchor the mobile menu to the
   header's own (short) box instead of the viewport, squashing it down
   to header height so only the first item or two remained visible.
   Keeping backdrop-filter off .nav removes that containing block while
   the visual result (blurred header once scrolled) stays identical. */
.nav.scrolled::before{
  content: ''; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(14px) saturate(140%);
  pointer-events: none;
}
.nav-inner{
  max-width: var(--container); margin: 0 auto;
  padding: 26px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: padding .4s var(--ease);
}
.nav.scrolled .nav-inner{ padding-top: 14px; padding-bottom: 14px; }

.nav-logo{ display: flex; flex-direction: column; line-height: 1; }
.nav-logo-main{ font-family: var(--font-display); font-size: 20px; letter-spacing: .04em; }
.nav-logo-sub{ font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; color: var(--muted); margin-top: 4px; }

.nav-links{ display: flex; gap: 36px; }
.nav-links a{ font-size: 14px; color: var(--muted); position: relative; padding: 4px 0; transition: color .3s; }
.nav-links a:hover{ color: var(--text-light); }
.nav-links a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--brass); transition: width .3s var(--ease); }
.nav-links a:hover::after{ width: 100%; }

.nav-cta{ flex-shrink: 0; }

.nav-burger{ display:none; width: 44px; height: 44px; border:none; background:none; cursor:pointer; position:relative; flex-shrink: 0; }
.nav-burger span{ position:absolute; left:10px; right:10px; height:1.5px; background: var(--text-light); }
.nav-burger span:first-child{ top: 18px; }
.nav-burger span:last-child{ top: 26px; }
/* The hamburger intentionally never animates/morphs into an X — closed
   state always shows the plain two-line glyph. It's hidden (not morphed)
   while the menu is open; the open state's own close control lives
   inside the menu itself — see .nmi-close below. */

/* =========================================================
   MOBILE MENU — "digital control panel"
   Built from the same nav data as the desktop nav (see script.js);
   this only styles the presentation. Visibility is controlled with
   visibility/pointer-events rather than display, so the closing
   slide-up transition actually plays instead of snapping away.
   ========================================================= */
.nav-mobile{
  position: fixed; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(201,162,39,.09), transparent 60%),
    var(--ink-2);
  padding: max(120px, calc(96px + env(safe-area-inset-top))) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  z-index: 400;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden; pointer-events: none;
  transform: translateY(-3%);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .4s var(--ease), visibility 0s linear .5s;
}
.nav-mobile.open{
  visibility: visible; pointer-events: auto;
  transform: translateY(0); opacity: 1;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}

/* Close row — sits above the first nav item, right-aligned so it reads
   as a header-level control rather than a list item. Uses the same
   compact circular treatment as .modal-close elsewhere on the site. */
.nmi-head{
  position: absolute;
  top: calc(18px + env(safe-area-inset-top));
  right: var(--gutter);
  width: 44px;
  height: 44px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.nmi-close{
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: rgba(243,239,230,.08); color: var(--text-light);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nmi-close:hover{ background: rgba(243,239,230,.14); }

.nmi-list{ display: flex; flex-direction: column; }
.nmi{
  display: flex; align-items: baseline; gap: 16px;
  padding: 17px 2px; border-bottom: 1px solid var(--line);
  min-height: 44px;
  opacity: 0; transform: translateX(-14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), background .25s var(--ease);
}
.nmi:first-child{ border-top: 1px solid var(--line); }
.nav-mobile.open .nmi{ opacity: 1; transform: translateX(0); }
.nav-mobile.open .nmi:nth-child(1){ transition-delay: .08s; }
.nav-mobile.open .nmi:nth-child(2){ transition-delay: .13s; }
.nav-mobile.open .nmi:nth-child(3){ transition-delay: .18s; }
.nav-mobile.open .nmi:nth-child(4){ transition-delay: .23s; }
.nav-mobile.open .nmi:nth-child(5){ transition-delay: .28s; }
.nav-mobile.open .nmi:nth-child(6){ transition-delay: .33s; }

.nmi-num{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--brass); flex-shrink: 0; padding-top: .2em;
}
.nmi-label{
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(17px, 4.2vw, 19px); line-height: 1.3;
  flex: 1; min-width: 0;
}
.nmi-arrow{
  font-family: var(--font-mono); font-size: 13px; color: var(--brass-soft);
  flex-shrink: 0; opacity: 0; transform: translateX(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
@media (hover:hover){
  .nmi:hover{ color: var(--brass-soft); }
  .nmi:hover .nmi-arrow{ opacity: 1; transform: translateX(0); }
}
.nmi:active{ background: rgba(201,162,39,.08); }

.nmi-foot{
  padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease) .36s, transform .5s var(--ease) .36s;
}
.nav-mobile.open .nmi-foot{ opacity: 1; transform: translateY(0); }
.nmi-cta{ width: 100%; justify-content: center; min-height: 50px; }
.nmi-tagline{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em;
  line-height: 1.7; color: var(--muted); text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce){
  .nav-mobile, .nmi, .nmi-foot{ transition: none !important; }
  .nav-mobile{ transform: none; }
  .nmi{ transform: none; }
  .nmi-foot{ transform: none; }
}

/* =========================================================
   SECTION SCAFFOLDING
   ========================================================= */
.section{ padding: 140px var(--gutter); max-width: var(--container); margin: 0 auto; }
.section-head{ max-width: 720px; margin-bottom: 72px; }
.section-head.dark{ max-width: 780px; }
.section-head h2{ font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; }
.lede{ margin-top: 20px; font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 620px; }

/* reveal-on-scroll base */
.reveal-up{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-up.in-view{ opacity: 1; transform: translateY(0); }
.reveal-group > *{ opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-group.in-view > *{ opacity: 1; transform: translateY(0); }
.reveal-group.in-view > *:nth-child(1){ transition-delay: .02s; }
.reveal-group.in-view > *:nth-child(2){ transition-delay: .09s; }
.reveal-group.in-view > *:nth-child(3){ transition-delay: .16s; }
.reveal-group.in-view > *:nth-child(4){ transition-delay: .23s; }
.reveal-group.in-view > *:nth-child(5){ transition-delay: .30s; }
.reveal-group.in-view > *:nth-child(6){ transition-delay: .37s; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 160px var(--gutter) 60px;
  text-align: center;
  overflow: hidden;
}
.hero-media{
  position: absolute; inset: -10% 0 -10% 0; z-index: 0;
  background: radial-gradient(70% 60% at 50% 20%, rgba(52,92,96,.5), transparent 70%), var(--ink);
  will-change: transform;
}
.hero-media img{ transform: scale(1.06); transition: transform 4s var(--ease); }
.hero.loaded .hero-media img{ transform: scale(1); }
.hero-scrim{
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(201,162,39,.12), transparent 70%),
    linear-gradient(180deg, rgba(11,13,16,.55) 0%, rgba(11,13,16,.72) 55%, var(--ink) 100%);
}
.hero-lines{ position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: .5; }
.hl{ fill: none; stroke: rgba(201,162,39,.28); stroke-width: 1; }
.hl-2{ stroke: rgba(52,92,96,.5); }
.hl-dot{ fill: var(--brass-soft); opacity: .6; animation: drift 7s ease-in-out infinite; }
.hl-dot:nth-child(4){ animation-delay: -2s; }
.hl-dot:nth-child(5){ animation-delay: -4.5s; }
@keyframes drift{ 0%,100%{ transform: translateY(0); opacity: .3; } 50%{ transform: translateY(-14px); opacity: .8; } }
@media (prefers-reduced-motion: reduce){ .hl-dot{ animation: none; } }

.hero-inner{ position: relative; z-index: 2; max-width: 980px; }
.hero .eyebrow{ text-align: center; }
.hero-title{ display: flex; flex-direction: column; gap: 8px; font-size: clamp(40px, 7.4vw, 96px); line-height: 1.16; }
/* padding-bottom gives descenders (e.g. the "g" in Digital) room inside
   the clipping box; the matching negative margin-bottom cancels the
   added height so the line still sits exactly where it did before —
   only the clip boundary moves, not the layout. */
.hero-title .line{ display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.reveal-word{ display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease); }
.hero.loaded .reveal-word{ transform: translateY(0); }
.accent-word{ color: var(--brass-soft); font-style: italic; }

.hero-sub{
  margin: 30px auto 0; max-width: 560px;
  font-size: 18px; color: var(--muted);
}
.hero-ctas{ display:flex; gap: 16px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }

.scroll-cue{
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.scroll-cue span{ animation: bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(5px);} }

/* transformation stage */
.transform-stage{
  position: relative; z-index: 2;
  margin-top: 72px;
  width: min(720px, 92vw);
  display: flex; align-items: center; justify-content: center;
}
.transform-card{
  position: relative; width: 100%; height: 220px;
}
.tcard{
  position: absolute; inset: 0;
  border-radius: var(--radius-m);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(201,162,39,.3);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.tcard-label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--brass); }
.tcard-text{ font-family: var(--font-display); font-size: 26px; letter-spacing: .02em; }
.tcard-a{ background: linear-gradient(160deg, rgba(52,92,96,.5), rgba(20,23,28,.7)); transform: scale(1) rotate(0deg); }
.tcard-b{ background: linear-gradient(160deg, rgba(201,162,39,.22), rgba(20,23,28,.75)); transform: scale(.94); }
.tcard-c{ background: linear-gradient(160deg, rgba(201,162,39,.35), rgba(31,58,61,.6)); transform: scale(.9); }

.transform-card.step-0 .tcard-a{ opacity: 1; transform: scale(1); }
.transform-card.step-1 .tcard-b{ opacity: 1; transform: scale(1); }
.transform-card.step-2 .tcard-c{ opacity: 0; }

.transform-preview{
  position: absolute; inset: 0;
  border-radius: var(--radius-m);
  border: 1px solid rgba(201,162,39,.35);
  background: var(--paper);
  opacity: 0; transform: translateY(14px) scale(.97);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  overflow: hidden;
}
.transform-card.step-2 ~ .transform-preview,
.step-2-active .transform-preview{ opacity: 1; transform: translateY(0) scale(1); }
.tp-bar{ height: 30px; background: var(--paper-2); display:flex; align-items:center; gap:6px; padding: 0 14px; }
.tp-dot{ width:7px; height:7px; border-radius:50%; background: rgba(20,23,28,.25); flex-shrink: 0; }
.tp-url{
  margin-left: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em;
  color: rgba(20,23,28,.4); background: rgba(20,23,28,.05); border-radius: 999px; padding: 3px 10px;
}
.tp-hero{
  height: calc(100% - 30px - 34px);
  background: linear-gradient(150deg, var(--teal), var(--teal-soft));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  text-align: center; padding: 12px;
}
.tp-hero-eyebrow{ font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; color: rgba(243,239,230,.7); }
.tp-hero-title{ font-family: var(--font-display); font-size: clamp(15px, 2.2vw, 20px); color: #fff; }
.tp-hero-btn{
  margin-top: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  border: 1px solid rgba(243,239,230,.5); color: #fff; border-radius: 999px; padding: 6px 16px;
}
.tp-nav{
  height: 34px; display:flex; align-items:center; justify-content:center; gap: 18px;
  background: var(--paper); border-top: 1px solid var(--line-light);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--muted-dark);
}

/* =========================================================
   SIGNATURE SCROLL MOMENT
   A business exists → ... → VisionX transforms that impression.
   Pinned track of short statements that swap as the section scrolls.
   ========================================================= */
.moment{
  position: relative;
  height: 340vh;
  padding: 0;
  max-width: none;
}
.moment-track{
  position: sticky; top: 0; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(50% 60% at 50% 50%, rgba(52,92,96,.22), transparent 70%),
    var(--ink);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.moment-step{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 64px;
  padding: 0 var(--gutter);
  opacity: 0; transform: translateY(26px) scale(.98);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  pointer-events: none;
}
.moment-step.is-active{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.moment-eyebrow{
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: clamp(26px, 5vw, 54px); text-align: left; max-width: 480px;
  color: var(--text-light);
}
.moment-eyebrow.accent{ color: var(--brass-soft); font-style: normal; font-weight: 500; }

/* per-step photography — the impression sharpens as the sequence advances */
.moment-visual{
  width: min(320px, 30vw); height: 220px; flex-shrink: 0; border-radius: 8px;
  border: 1px solid rgba(243,239,230,.14); box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.moment-visual img{ filter: grayscale(.85) blur(3px) brightness(.65); transition: filter 1s var(--ease); }
.moment-step[data-step="1"] .moment-visual img{ filter: grayscale(.65) blur(2px) brightness(.72); }
.moment-step[data-step="2"] .moment-visual img{ filter: grayscale(.45) blur(1px) brightness(.8); }
.moment-step[data-step="3"] .moment-visual img{ filter: grayscale(.2) blur(0) brightness(.9); }
.moment-step[data-step="4"] .moment-visual img{ filter: grayscale(0) blur(0) brightness(1) saturate(1.05); }
.moment-resolved{
  position: relative;
  width: min(320px, 30vw); flex-shrink: 0; border-radius: 8px; overflow: hidden;
  border: 1px solid rgba(201,162,39,.35); background: var(--paper); box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.mr-media.media{ position: absolute; inset: 0; z-index: 0; }
.mr-chrome{ position: relative; z-index: 1; height: 24px; display:flex; align-items:center; gap:5px; padding: 0 12px; background: var(--paper-2); }
.mr-chrome span{ width:5px; height:5px; border-radius:50%; background: rgba(20,23,28,.25); }
.mr-hero{
  position: relative; z-index: 1;
  height: 154px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap: 5px; padding: 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(20,23,28,.75) 100%), linear-gradient(150deg, var(--teal), var(--teal-soft));
  background-blend-mode: normal;
}
.mr-hero span{ font-family: var(--font-display); font-size: 14px; color: #fff; }
.mr-hero em{ font-family: var(--font-mono); font-style: normal; font-size: 8.5px; letter-spacing: .12em; color: rgba(243,239,230,.7); }
.mr-nav{ position: relative; z-index: 1; height: 24px; background: var(--paper); border-top: 1px solid var(--line-light); }
@media (max-width: 900px){
  .moment-step{ flex-direction: column; gap: 26px; }
  .moment-visual, .moment-resolved{ width: min(280px, 70vw); height: 170px; }
  .moment-eyebrow{ text-align: center; }
}
@media (prefers-reduced-motion: reduce){ .moment-visual img{ transition: none; } }
.moment-dots{
  position: sticky; top: calc(50% + 90px); left: 0; right: 0; z-index: 3;
  display: flex; gap: 10px; justify-content: center; height: 0; margin-top: -90px;
  pointer-events: none;
}
.moment-dots span{ width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .3s var(--ease), transform .3s var(--ease); }
.moment-dots span.is-active{ background: var(--brass); transform: scale(1.3); }

/* =========================================================
   CATEGORY CARDS ("Imagine your business, online")
   ========================================================= */
.categories{ background: var(--ink); }
.cat-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.cat-card{
  position: relative; background: var(--ink-2); min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer; overflow: hidden;
}
.cat-card .media{ position: absolute; inset: 0; z-index: 0; }
.cat-card .media img{ transition: transform .9s var(--ease); }
.cat-card:hover .media img, .cat-card:focus-within .media img{ transform: scale(1.07); }
.cat-scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(11,13,16,.92) 0%, rgba(11,13,16,.55) 46%, rgba(11,13,16,.15) 100%);
  transition: background .5s var(--ease);
}
.cat-card:hover .cat-scrim, .cat-card:focus-within .cat-scrim{ background: linear-gradient(0deg, rgba(11,13,16,.94) 0%, rgba(11,13,16,.72) 55%, rgba(11,13,16,.25) 100%); }
.cat-body{ position: relative; z-index: 2; padding: 32px 28px; }
.cat-index{ font-family: var(--font-mono); font-size: 11px; color: var(--brass-soft); display: block; margin-bottom: 14px; }
.cat-card h3{ font-size: 25px; margin-bottom: 10px; color: #fff; }
.cat-desc{
  color: rgba(243,239,230,.72); font-size: 14px; line-height: 1.5;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease);
}
.cat-card:hover .cat-desc, .cat-card:focus-within .cat-desc{ max-height: 80px; opacity: 1; }
.cat-explore{
  display: block; margin-top: 12px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--brass-soft);
  opacity: 0; transform: translateX(-8px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.cat-card:hover .cat-explore, .cat-card:focus-within .cat-explore{ opacity: 1; transform: translateX(0); }

/* touch devices have no hover — the description/CTA that hover would
   reveal on desktop must be visible by default instead of hidden */
@media (hover:none){
  .cat-scrim{ background: linear-gradient(0deg, rgba(11,13,16,.95) 0%, rgba(11,13,16,.62) 55%, rgba(11,13,16,.2) 100%); }
  .cat-desc{ max-height: 90px; opacity: 1; }
  .cat-explore{ opacity: 1; transform: translateX(0); }
  .cat-card:active{ background: var(--ink-3); }
}

/* =========================================================
   IMPRESSIONS ("We don't sell websites")
   Full-width photographic statement.
   ========================================================= */
.impressions{
  position: relative; max-width: none; padding: 0;
  overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.impressions-media{ position: absolute; inset: -8% 0; z-index: 0; background: linear-gradient(160deg, rgba(31,58,61,.7), rgba(11,13,16,.95)); will-change: transform; }
.impressions-media img{ transition: filter 1.6s var(--ease), transform 1.6s var(--ease); }
.impressions.transformed .impressions-media img{ filter: saturate(.55) contrast(1.05); transform: scale(1.03); }
.impressions-scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,13,16,.55) 0%, rgba(11,13,16,.86) 70%, var(--ink-2) 100%);
}
.impressions-content{
  position: relative; z-index: 2;
  max-width: 780px; margin: 0 auto; padding: 160px var(--gutter) 90px; text-align: center;
}
.impressions-content .eyebrow{ text-align: center; }
.impressions-content .lede{ margin-left: auto; margin-right: auto; }
.impressions-headline{ position: relative; min-height: 2.4em; }
.impressions-headline .ih-face{
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.impressions-headline .ih-face.ih-out{ position: absolute; inset: 0; opacity: 0; transform: translateY(-14px); pointer-events: none; }
.impressions-headline .ih-face.ih-in{ opacity: 1; transform: translateY(0); }
.section-head.dark h2{ max-width: 640px; }

/* the photograph itself becoming a website — signature transform */
.impressions-ui{
  position: relative; z-index: 2; margin: 44px auto 0;
  width: min(560px, 90vw); border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(243,239,230,.18); background: var(--paper);
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(26px) scale(.96);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.impressions.transformed .impressions-ui{ opacity: 1; transform: translateY(0) scale(1); }
.iu-chrome{ height: 30px; display:flex; align-items:center; gap:6px; padding: 0 14px; background: var(--paper-2); }
.iu-chrome span{ width:6px; height:6px; border-radius:50%; background: rgba(20,23,28,.25); }
.iu-url{ margin-left: 8px; font-family: var(--font-mono); font-size: 9.5px; color: rgba(20,23,28,.4); background: rgba(20,23,28,.05); border-radius: 999px; padding: 3px 10px; }
.iu-hero{
  padding: 34px 28px; display:flex; flex-direction:column; align-items:flex-start; gap: 8px;
  background: linear-gradient(150deg, var(--teal), var(--teal-soft));
}
.iu-eyebrow{ font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; color: rgba(243,239,230,.7); }
.iu-title{ font-family: var(--font-display); font-size: clamp(18px,2.6vw,24px); color: #fff; text-align: left; max-width: 380px; }
.iu-btn{ margin-top: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; border: 1px solid rgba(243,239,230,.5); color: #fff; border-radius: 999px; padding: 7px 18px; }
.iu-nav{ height: 34px; display:flex; align-items:center; justify-content:center; gap: 20px; background: var(--paper); border-top: 1px solid var(--line-light); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; color: var(--muted-dark); }
@media (prefers-reduced-motion: reduce){ .impressions-ui{ transition: none; } .impressions-media img{ transition: none; } }
.stage-line{
  position: relative; z-index: 2;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 140px;
  display: flex; align-items: flex-start; gap: 0;
}
.stage{ flex: 1; padding-right: 32px; }
.stage-num{ display:block; font-family: var(--font-mono); color: var(--brass); font-size: 13px; margin-bottom: 18px; }
.stage h3{ font-size: 24px; margin-bottom: 10px; }
.stage p{ color: var(--muted); font-size: 15px; line-height: 1.6; }
.stage-connector{ width: 100%; max-width: 90px; height: 1px; background: linear-gradient(90deg, var(--brass), transparent); margin-top: 8px; flex-shrink: 0; }

/* =========================================================
   TRANSLATE ("From business to website")
   Centered, balanced composition — a controlled max-width so the
   two lists read as one intentional column pair instead of
   stretching edge-to-edge on wide viewports.
   ========================================================= */
.translate-grid{
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px;
  max-width: 720px; margin: 0 auto;
}
.translate-col{ display: flex; flex-direction: column; align-items: center; text-align: center; }
.translate-heading{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--brass); margin-bottom: 24px; }
.translate-list{ width: 100%; max-width: 300px; }
.translate-list li{
  font-family: var(--font-display); font-size: 22px; padding: 16px 0; border-bottom: 1px solid var(--line);
  color: var(--muted); text-align: center;
}
#listDigital li{ color: var(--text-light); }
.translate-arrow{ color: var(--brass); align-self: center; }

/* =========================================================
   PORTFOLIO — balanced grid
   Normalized to the same spacing/grid discipline as the "What We
   Build" category cards: equal columns, equal card proportions.
   data-layout is preserved purely as a hook for each card's
   reveal-animation personality (see below) — it no longer drives
   card sizing or grid placement.
   ========================================================= */
.portfolio-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.proj-card{
  position: relative; border-radius: var(--radius-m); overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: var(--ink-2);
  display: flex; flex-direction: column;
}

.proj-visual{
  height: 360px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--line);
}
.proj-chrome{
  height: 32px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: var(--paper-2); position: relative; z-index: 3;
}
.proj-dot{ width: 6px; height: 6px; border-radius: 50%; background: rgba(20,23,28,.25); }
.proj-chrome-url{
  margin-left: 8px; font-family: var(--font-mono); font-size: 9.5px; color: rgba(20,23,28,.4);
  background: rgba(20,23,28,.05); border-radius: 999px; padding: 3px 10px;
}
.proj-media{ position: relative; flex: 1; overflow: hidden; }
.proj-media .media{ position: absolute; inset: 0; }
.proj-media .media img{ transition: transform 1s var(--ease); }
.proj-card:hover .proj-media .media img{ transform: scale(1.06); }

/* per-project entrance reveal — each layout gets its own treatment so the
   portfolio doesn't feel like five copies of one animation */
.proj-card{ opacity: 0; }
.proj-card.revealed{ opacity: 1; }
.proj-card[data-layout="hero"] .proj-media{ clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.proj-card[data-layout="hero"].revealed .proj-media{ clip-path: inset(0 0 0% 0); }
.proj-card[data-layout="hero"]{ transition: opacity .6s var(--ease); }

/* café — horizontal editorial wipe from the left */
.proj-card[data-layout="split"] .proj-media{ clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease); }
.proj-card[data-layout="split"].revealed .proj-media{ clip-path: inset(0 0% 0 0); }
.proj-card[data-layout="split"]{ transition: opacity .6s var(--ease); }

/* clinic — clean geometric reveal: a centred frame expands outward */
.proj-card[data-layout="clean"] .proj-media{ clip-path: inset(38% 38% 38% 38% round 6px); transition: clip-path 1.05s var(--ease); }
.proj-card[data-layout="clean"].revealed .proj-media{ clip-path: inset(0% 0% 0% 0% round 6px); }
.proj-card[data-layout="clean"]{ transition: opacity .6s var(--ease); }

.proj-card[data-layout="wide"] .proj-media{ opacity: 0; transform: scale(1.12); transition: opacity 1s var(--ease), transform 1.4s var(--ease); }
.proj-card[data-layout="wide"].revealed .proj-media{ opacity: 1; transform: scale(1); }
.proj-card[data-layout="wide"]{ transition: none; opacity: 1; }

/* local & co — layered dynamic reveal: image, tag and title settle in on their own beats */
.proj-card[data-layout="layered"]{ transform: translateY(34px) rotate(-.6deg); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.proj-card[data-layout="layered"].revealed{ transform: translateY(0) rotate(0deg); }
.proj-card[data-layout="layered"] .proj-media{ transform: scale(1.08); transition: transform 1.1s var(--ease) .1s; }
.proj-card[data-layout="layered"].revealed .proj-media{ transform: scale(1); }
.proj-card[data-layout="layered"] .proj-tag{ opacity: 0; transform: translateY(-8px); transition: opacity .5s var(--ease) .35s, transform .5s var(--ease) .35s; }
.proj-card[data-layout="layered"].revealed .proj-tag{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .proj-card, .proj-card .proj-media{ clip-path: none !important; transform: none !important; opacity: 1 !important; transition: none !important; }
}
.proj-media-scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(11,13,16,.75) 0%, rgba(11,13,16,.15) 55%, rgba(11,13,16,.05) 100%);
}
.proj-mini{
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px;
  padding: 28px;
}
.proj-mini-eyebrow{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,239,230,.8); }
.proj-mini-title{ font-family: var(--font-display); font-size: clamp(18px, 1.8vw, 26px); color: #fff; max-width: 100%; }
.proj-tag{
  position: absolute; top: 48px; left: 20px; z-index: 3;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(11,13,16,.55); border: 1px solid rgba(243,239,230,.25); color: var(--text-light);
  padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(6px);
}
.proj-overlay{
  position: absolute; inset: 32px 0 0 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,13,16,0);
  opacity: 0; transition: opacity .4s var(--ease), background .4s var(--ease);
}
.proj-card:hover .proj-overlay{ opacity: 1; background: rgba(11,13,16,.3); }
.proj-overlay span{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass-soft); border: 1px solid var(--brass-soft); border-radius: 999px; padding: 10px 22px;
  transform: translateY(10px); transition: transform .4s var(--ease);
  background: rgba(11,13,16,.4);
}
.proj-card:hover .proj-overlay span{ transform: translateY(0); }
.proj-body{ padding: 26px 26px 28px; }
.proj-industry{ font-family: var(--font-mono); font-size: 11px; color: var(--brass); letter-spacing: .1em; margin-bottom: 10px; }
.proj-body h3{ font-size: 24px; margin-bottom: 10px; }
.proj-body p{ color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
.proj-cta{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--brass-soft); display:inline-flex; align-items:center; gap:6px; }
.proj-cta svg{ transition: transform .3s var(--ease); }
.proj-card:hover .proj-cta svg{ transform: translateX(4px); }

/* touch devices: no hover overlay, so give the whole card a visible
   pressed state instead, and skip the hover-only overlay entirely */
@media (hover:none){
  .proj-overlay{ display: none; }
  .proj-card:active{ background: var(--ink-3); }
  .proj-card:active .proj-media .media img{ transform: scale(1.03); }
}

/* =========================================================
   SELECTOR
   ========================================================= */
.selector-wrap{ display: block; }
.selector-tabs{ display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.sel-tab{
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-size: 14px; cursor: pointer;
  transition: all .35s var(--ease);
}
.sel-tab:hover{ border-color: var(--brass); color: var(--text-light); }
.sel-tab.active{ background: var(--brass); border-color: var(--brass); color: var(--ink); }
@media (hover:none){ .sel-tab:active{ border-color: var(--brass); } }

.selector-display{
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-m);
  padding: 56px var(--gutter);
  min-height: 320px;
  display: flex; align-items: center; gap: 48px; flex-wrap: wrap;
  background: var(--ink-2);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.selector-display.switching{ opacity: 0; transform: scale(.985); }
@media (prefers-reduced-motion: reduce){ .selector-display{ transition: none; } }
.selector-display .media{ position: absolute; inset: 0; z-index: 0; }
.selector-display-scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(11,13,16,.94) 0%, rgba(11,13,16,.8) 40%, rgba(11,13,16,.3) 100%);
}
.sel-content{ position: relative; z-index: 2; flex: 1; min-width: 260px; }
.sel-content h3{ font-size: clamp(26px,3vw,38px); margin-bottom: 14px; }
.sel-content p{ color: var(--muted); font-size: 16px; max-width: 460px; line-height: 1.6; }
.sel-visual{ position: relative; z-index: 2; width: 280px; height: 200px; border-radius: 8px; flex-shrink: 0; overflow: hidden; border: 1px solid rgba(243,239,230,.18); background: var(--paper); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.sel-visual .media{ position: absolute; inset: 0; }
.sel-preview-chrome{ position: relative; z-index: 2; height: 26px; flex-shrink: 0; display:flex; align-items:center; gap:5px; padding: 0 11px; background: var(--paper-2); }
.sel-preview-chrome span{ width: 5px; height: 5px; border-radius: 50%; background: rgba(20,23,28,.25); }
.sel-preview-hero{ position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 16px; overflow: hidden; }
.sel-preview-hero .media{ position: absolute; inset: 0; z-index: 0; }
.sel-preview-scrim{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(11,13,16,.82) 0%, rgba(11,13,16,.15) 70%); }
.sel-preview-eyebrow{ position: relative; z-index: 2; font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; color: rgba(243,239,230,.75); }
.sel-preview-title{ position: relative; z-index: 2; font-family: var(--font-display); font-size: 15px; color: #fff; line-height: 1.15; }
.sel-preview-btn{ position: relative; z-index: 2; margin-top: 2px; font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; border: 1px solid rgba(243,239,230,.55); color: #fff; border-radius: 999px; padding: 4px 10px; }

/* =========================================================
   WHY GRID
   ========================================================= */
.why-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(200px, auto);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.why-card{
  position: relative; background: var(--ink); padding: 40px 32px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: background .4s var(--ease);
}
.why-card:hover{ background: var(--ink-3); }
.why-num{ position: absolute; top: 28px; left: 32px; font-family: var(--font-mono); font-size: 11px; color: var(--muted-dark); }
.why-card h3{ font-size: 19px; margin-bottom: 12px; }
.why-card p{ color: var(--muted); font-size: 14px; line-height: 1.6; }
.why-featured{
  grid-column: span 2; grid-row: span 2;
  background: linear-gradient(160deg, rgba(201,162,39,.14), rgba(20,23,28,.9));
}
.why-featured h3{ font-size: 28px; max-width: 320px; }
.why-featured p{ font-size: 15px; max-width: 320px; }
.why-featured .why-num{ color: var(--brass); }
.why-wide p{ max-width: 420px; }

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline{ position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding-top: 30px; }
.tl-track{ position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--line); }
.tl-track-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: var(--brass); transition: width 1.2s var(--ease); }
.tl-item{ padding-top: 30px; position: relative; }
.tl-item::before{ content:''; position:absolute; top:-4px; left:0; width:9px; height:9px; border-radius:50%; background: var(--ink); border: 1px solid var(--brass); z-index: 1; }
.tl-num{ display:block; font-family: var(--font-mono); font-size: 12px; color: var(--brass); margin-bottom: 14px; }
.tl-item h3{ font-size: 18px; margin-bottom: 8px; }
.tl-item p{ color: var(--muted); font-size: 13.5px; line-height: 1.55; }

/* =========================================================
   CONVERT BAND
   ========================================================= */
.convert{ max-width: none; padding: 0 var(--gutter); }
.convert-inner{
  max-width: var(--container); margin: 0 auto; padding: 100px var(--gutter);
  text-align: center; border-radius: var(--radius-m);
  background: linear-gradient(160deg, var(--teal), var(--ink-2));
  border: 1px solid var(--line);
}
.convert-inner .eyebrow{ text-align: center; }
.convert-inner h2{ font-size: clamp(30px,4vw,48px); max-width: 760px; margin: 0 auto 20px; }
.convert-inner p{ color: var(--muted); max-width: 520px; margin: 0 auto 36px; font-size: 17px; line-height: 1.6; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{ display: grid; grid-template-columns: 1.5fr 1fr; gap: 64px; }
.contact-form{ display: flex; flex-direction: column; gap: 22px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field{ display: flex; flex-direction: column; gap: 8px; }
.field label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea{
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  color: var(--text-light); font-family: var(--font-body); font-size: 16px; padding: 10px 2px;
  transition: border-color .3s var(--ease);
}
.field select{ appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa0a8' fill='none' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; }
.field select option{ background: var(--ink-2); color: var(--text-light); }
.field input:focus, .field select:focus, .field textarea:focus{ outline: none; border-color: var(--brass); }
.field textarea{ resize: vertical; }
.contact-form .btn{ align-self: flex-start; margin-top: 6px; }
.form-note{ font-size: 13px; color: var(--brass-soft); min-height: 18px; }

.contact-side{ display: flex; flex-direction: column; gap: 26px; padding-top: 4px; }
.ci-label{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ci-value{ font-family: var(--font-display); font-size: 20px; }
.ci-value.ci-editable{
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em;
  color: var(--muted); font-style: normal;
  border-bottom: 1px dashed var(--line);
  display: inline-block; padding-bottom: 2px;
}
.ci-placeholder-note{ font-size: 12px; color: var(--muted-dark); margin-top: 12px; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background: var(--ink-2); border-top: 1px solid var(--line); padding: 90px var(--gutter) 30px; }
.footer-top{ max-width: var(--container); margin: 0 auto 70px; }
.footer-top h2{ font-size: clamp(30px,5vw,58px); max-width: 780px; }
.footer-bottom{
  max-width: var(--container); margin: 0 auto; padding-bottom: 40px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px;
}
.footer-brand{ display:flex; flex-direction: column; }
.footer-links{ display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a, .footer-social a{ font-size: 14px; color: var(--muted); transition: color .3s; }
.footer-links a:hover, .footer-social a:hover{ color: var(--brass-soft); }
.footer-social{ display: flex; gap: 20px; }
.footer-copy{ max-width: var(--container); margin: 24px auto 0; font-size: 12px; color: var(--muted-dark); font-family: var(--font-mono); }

/* =========================================================
   MODAL — LIVE WEBSITE PREVIEW
   ========================================================= */
.modal{ position: fixed; inset: 0; z-index: 1000; display: none; }
.modal.open{ display: block; }
.modal-backdrop{ position: absolute; inset: 0; background: rgba(11,13,16,.86); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s var(--ease); }
.modal.open .modal-backdrop{ opacity: 1; }
.modal-panel{
  position: relative; z-index: 2; margin: 40px auto; width: min(920px, 92vw);
  max-height: 88vh; background: var(--paper); border-radius: 14px; overflow: hidden;
  transform: translateY(30px) scale(.98); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.modal.open .modal-panel{ transform: translateY(0) scale(1); opacity: 1; }
.modal-close{
  position: absolute; top: 16px; right: 16px; z-index: 5; width: 38px; height: 38px; border-radius: 50%;
  border: none; background: rgba(11,13,16,.7); color: var(--text-light); font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.modal-chrome{
  height: 34px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 16px;
  background: var(--paper-2); position: relative; z-index: 4;
}
.modal-chrome-url{
  margin-left: 8px; font-family: var(--font-mono); font-size: 10px; color: rgba(20,23,28,.45);
  background: rgba(20,23,28,.05); border-radius: 999px; padding: 3px 12px;
}
.modal-scroll{ max-height: calc(88vh - 34px); overflow-y: auto; color: var(--text-dark); }

.mp-nav{
  height: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; background: var(--paper); border-bottom: 1px solid var(--line-light);
}
.mp-nav-brand{ font-family: var(--font-display); font-size: 16px; color: var(--text-dark); }
.mp-nav-links{ display: flex; gap: 22px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-dark); }
.mp-nav-cta{ font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--teal); border-radius: 999px; padding: 7px 14px; }
.mp-footer{ padding: 30px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: var(--paper-2); }
.mp-footer-brand{ font-family: var(--font-display); font-size: 15px; color: var(--text-dark); }
.mp-footer-copy{ font-family: var(--font-mono); font-size: 10px; color: var(--muted-dark); }
.mp-hero{ min-height: 340px; position: relative; display:flex; flex-direction: column; justify-content: flex-end; padding: 40px; color: #fff; overflow: hidden; }
.mp-hero .media{ position: absolute; inset: 0; z-index: 0; }
.mp-hero-scrim{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(11,13,16,.85) 0%, rgba(11,13,16,.25) 60%, rgba(11,13,16,.15) 100%); }
.mp-tag{ position: relative; z-index: 2; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 10px; }
.mp-hero h2{ position: relative; z-index: 2; font-size: clamp(28px,4vw,44px); max-width: 520px; }
.mp-section{ padding: 44px 40px; border-bottom: 1px solid var(--line-light); }
.mp-section h4{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); margin-bottom: 20px; }
.mp-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.mp-swatch{ height: 110px; border-radius: 6px; position: relative; overflow: hidden; }
.mp-swatch .media{ position: absolute; inset: 0; }
.mp-text{ font-size: 15px; line-height: 1.7; color: #3c4048; max-width: 560px; }
.mp-contact-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 14px; color: #3c4048; }

/* =========================================================
   TO TOP
   ========================================================= */
.to-top{
  position: fixed; right: 24px; bottom: 24px; z-index: 300;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(20,23,28,.8); backdrop-filter: blur(8px); color: var(--text-light); cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.to-top.show{ opacity: 1; pointer-events: auto; transform: translateY(0); }

/* =========================================================
   RESPONSIVE — TABLET (1024px)
   Desktop composition still mostly intact, just fewer columns.
   ========================================================= */
@media (max-width: 1024px){
  .cat-grid{ grid-template-columns: repeat(2,1fr); }
  .why-grid{ grid-template-columns: repeat(2,1fr); }
  .why-featured{ grid-column: span 2; grid-row: span 1; }
  .why-featured h3, .why-featured p{ max-width: none; }
  /* 1 (featured, span 2) + 2 + 2 + 1 leaves the last card alone with an
     empty cell beside it — span it too so the grid resolves evenly. */
  .why-card:last-child{ grid-column: span 2; }
  .why-card:last-child h3, .why-card:last-child p{ max-width: none; }
  .portfolio-grid{ grid-template-columns: repeat(2,1fr); }
  .proj-card:last-child{ grid-column: span 2; }
  .stage-line{ flex-direction: column; gap: 36px; }
  .stage-connector{ display: none; }
  .translate-grid{ grid-template-columns: 1fr; row-gap: 12px; max-width: 420px; }
  /* min-height + flex centering reserve real layout space for the
     rotated icon (transform is visual-only, so without an explicit
     height here the row stays as tall as the *unrotated* SVG and the
     rotated arrow visually overlaps the list above/below it). */
  .translate-grid.reveal-group .translate-arrow{
    display: flex; align-items: center; justify-content: center;
    min-height: 64px; margin: 8px auto;
    transform: rotate(90deg);
  }
  .translate-arrow svg{ width: 56px; height: auto; display: block; }
  .timeline{ grid-template-columns: repeat(2,1fr); row-gap: 40px; }
  .tl-item:last-child{ grid-column: span 2; }
  .tl-track{ display: none; }
  /* Below 1024px the horizontal rail is hidden, so the dot no longer
     needs to sit above the number on its own line — it moves beside
     it instead, closing the gap the rail layout used to require. */
  .tl-item{ padding-top: 0; padding-left: 20px; }
  .tl-item::before{ top: 3px; left: 0; }
  .contact-grid{ grid-template-columns: 1fr; }
  .moment{ height: 260vh; }
}

/* =========================================================
   RESPONSIVE — MOBILE (768px and below)
   Mobile is treated as a first-class target from here down, not a
   squeezed desktop. Every major section gets its own vertical,
   one-focal-point composition tuned for 375–430px phones, tested
   up through ~768px for larger phones / small tablets.
   ========================================================= */
@media (max-width: 768px){

  /* ---------- global rhythm ---------- */
  :root{
    --gutter: 22px;
  }
  .nav-links, .nav-cta{ display: none; }
  .nav-burger{ display: block; }
  .nav-inner{ padding: calc(18px + env(safe-area-inset-top)) var(--gutter) 18px; }

  /* While the mobile menu is open, swap the hamburger for the X close
     control — the hamburger itself is never animated, just hidden. */
  .nav.menu-open .nav-burger{ display: none; }

  .section{ padding: 76px var(--gutter); }
  .section-head{ margin-bottom: 44px; }
  .section-head h2{ font-size: clamp(28px, 8vw, 40px); }
  .lede{ font-size: 16px; margin-top: 14px; }
  .eyebrow{ font-size: 11px; margin-bottom: 14px; }

  body{ font-size: 16px; }

  /* ---------- nav ---------- */
  .nav-logo-main{ font-size: 18px; }

  /* ---------- hero ---------- */
  .hero{ padding: 118px var(--gutter) 48px; min-height: 100svh; }
  .hero-media{ inset: 0; }
  .hero-media img{ object-position: 50% 30%; }
  .hero-scrim{
    background:
      radial-gradient(70% 45% at 50% 0%, rgba(201,162,39,.14), transparent 70%),
      linear-gradient(180deg, rgba(11,13,16,.5) 0%, rgba(11,13,16,.8) 62%, var(--ink) 100%);
  }
  .hero-title{ font-size: clamp(38px, 11vw, 54px); gap: 5px; }
  .hero-sub{ font-size: 16px; margin-top: 22px; }
  .hero-ctas{ flex-direction: column; width: 100%; margin-top: 32px; gap: 12px; }
  .hero-ctas .btn{ width: 100%; justify-content: center; min-height: 50px; }

  /* transformation card — compact vertical step + preview, not a
     shrunken copy of the desktop composition */
  .transform-stage{ margin-top: 40px; width: 100%; }
  .transform-card{ height: 108px; }
  .tcard{ gap: 5px; padding: 0 16px; text-align: center; }
  .tcard-label{ font-size: 10px; }
  .tcard-text{ font-size: 17px; line-height: 1.25; }
  .transform-preview{ height: 190px; }
  .tp-hero-title{ font-size: 15px; }
  .scroll-cue{ bottom: 18px; }

  /* ---------- signature moment ---------- */
  .moment{ height: 200vh; }
  .moment-step{ flex-direction: column; gap: 20px; padding: 0 var(--gutter); }
  .moment-visual{ width: min(300px, 78vw); height: 200px; }
  .moment-resolved{ width: min(300px, 78vw); }
  .moment-eyebrow{ font-size: clamp(20px, 6vw, 26px); text-align: center; max-width: 320px; }
  .moment-dots{ top: calc(50% + 120px); margin-top: -120px; }

  /* ---------- categories ---------- */
  .cat-grid{ grid-template-columns: 1fr; }
  .cat-card{ min-height: 78vw; max-height: 460px; }
  .cat-card .media img{ object-position: 50% 35%; }
  .cat-body{ padding: 26px 22px; }
  .cat-card h3{ font-size: 22px; }

  /* ---------- first impressions ---------- */
  .impressions-media img{ object-position: 50% 30%; }
  .impressions-content{ padding: 100px var(--gutter) 64px; }
  .impressions-headline{ min-height: 3.4em; }
  .impressions-ui{ margin-top: 32px; width: 100%; }
  .iu-hero{ padding: 24px 20px; }
  .iu-title{ font-size: 17px; max-width: none; }
  .stage-line{ padding: 0 var(--gutter) 76px; gap: 34px; }
  .stage h3{ font-size: 21px; }

  /* ---------- translate ---------- */
  .translate-grid{ gap: 8px; max-width: 320px; }
  .translate-list{ max-width: 280px; }
  .translate-heading{ margin-bottom: 16px; }
  .translate-list li{ font-size: 16px; padding: 13px 0; }
  .translate-arrow{ min-height: 56px; margin: 6px auto; }
  .translate-arrow svg{ width: 46px; }

  /* ---------- portfolio: one project per view ---------- */
  .portfolio-grid{ grid-template-columns: 1fr; gap: 30px; }
  .proj-visual{ height: auto; }
  .proj-media{ aspect-ratio: 4 / 5; }
  .proj-media .media img{ object-position: 50% 32%; }
  .proj-mini-title{ font-size: clamp(22px, 6.5vw, 30px); }
  .proj-body{ padding: 22px 20px 26px; }
  .proj-body h3{ font-size: 21px; }
  .proj-tag{ top: 42px; font-size: 9px; }

  /* ---------- business selector ---------- */
  .selector-tabs{
    flex-wrap: nowrap; overflow-x: auto; gap: 10px; margin-bottom: 28px;
    padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .selector-tabs::-webkit-scrollbar{ display: none; }
  .sel-tab{ flex-shrink: 0; padding: 11px 18px; font-size: 13px; min-height: 44px; }
  .selector-display{ flex-direction: column; align-items: stretch; padding: 28px 22px; gap: 24px; min-height: 0; }
  .sel-content h3{ font-size: 24px; }
  .sel-visual{ width: 100%; height: 200px; align-self: stretch; }
  .selector-display .media img{ object-position: 50% 35%; }

  /* ---------- why VisionX: one item at a time ---------- */
  .why-grid{ grid-template-columns: 1fr; }
  .why-featured{ grid-column: span 1; grid-row: span 1; }
  .why-card:last-child{ grid-column: span 1; }
  .why-card{ padding: 30px 22px; min-height: 0; }
  .why-featured h3{ font-size: 24px; }

  /* ---------- process: vertical timeline ---------- */
  .timeline{ grid-template-columns: 1fr; gap: 0; padding-top: 6px; }
  .tl-item{
    padding: 0 0 34px 20px; position: relative;
  }
  .tl-item:last-child{ padding-bottom: 0; }
  .tl-item::before{ top: 3px; left: 0; }
  .tl-item::after{
    content:''; position:absolute; top: 14px; left: 4px; bottom: -4px; width: 1px;
    background: var(--line);
  }
  .tl-item:last-child::after{ display: none; }
  .tl-num{ margin-bottom: 6px; }

  /* ---------- conversion band ---------- */
  .convert-inner{ padding: 56px var(--gutter); }
  .convert-inner h2{ font-size: clamp(26px, 8vw, 36px); }
  .convert-inner p{ font-size: 15.5px; }
  .convert-inner .btn{ width: 100%; justify-content: center; }

  /* ---------- contact form ---------- */
  .contact-grid{ grid-template-columns: 1fr; gap: 48px; }
  .field-row{ grid-template-columns: 1fr; gap: 20px; }
  .field input, .field select, .field textarea{ padding: 13px 2px; min-height: 24px; }
  .contact-form .btn{ width: 100%; justify-content: center; min-height: 50px; margin-top: 10px; }
  .contact-side{ gap: 22px; }

  /* ---------- footer ---------- */
  .footer{ padding: 64px var(--gutter) 26px; }
  .footer-top{ margin-bottom: 44px; }
  .footer-top h2{ font-size: clamp(26px, 8vw, 36px); }
  .footer-bottom{ flex-direction: column; align-items: flex-start; gap: 26px; padding-bottom: 28px; }
  .footer-links{ flex-direction: column; gap: 14px; }
  .footer-social{ gap: 20px; }

  /* ---------- modal preview: feels like a real mobile site ---------- */
  .modal-panel{ margin: 0; width: 100vw; max-height: 100svh; height: 100svh; border-radius: 0; }
  .modal-scroll{ max-height: calc(100svh - 34px - env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); }
  .modal-chrome{ padding-top: env(safe-area-inset-top); height: calc(34px + env(safe-area-inset-top)); }
  .modal-close{ top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; }
  .mp-nav{ height: 48px; padding: 0 18px; }
  .mp-nav-links{ display: none; }
  .mp-nav-brand{ font-size: 14px; }
  .mp-nav-cta{ padding: 6px 12px; }
  .mp-hero{ min-height: 260px; padding: 24px 20px; }
  .mp-hero .media img{ object-position: 50% 30%; }
  .mp-hero h2{ font-size: clamp(24px, 8vw, 32px); }
  .mp-section{ padding: 32px 20px; }
  .mp-grid{ grid-template-columns: repeat(2,1fr); gap: 10px; }
  .mp-swatch{ height: 84px; }
  .mp-text{ font-size: 14.5px; }
  .mp-contact-grid{ grid-template-columns: 1fr; gap: 16px; font-size: 13.5px; }
  .mp-footer{ padding: 22px 20px; flex-direction: column; align-items: flex-start; gap: 8px; }

  /* defensive: unbreakable "url pill" labels must never force horizontal
     scroll on narrow phones — they shrink and truncate instead */
  .proj-chrome-url, .tp-url, .iu-url, .modal-chrome-url, .ci-value.ci-editable{
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0; max-width: 46vw; flex-shrink: 1;
  }
  .proj-chrome, .tp-bar, .iu-chrome, .modal-chrome{ min-width: 0; }
}

/* =========================================================
   RESPONSIVE — SMALL PHONES (430px and below)
   Final tuning pass for the narrowest common devices.
   ========================================================= */
@media (max-width: 430px){
  :root{ --gutter: 20px; }
  .hero{ padding-top: 108px; }
  .hero-title{ font-size: clamp(34px, 10.5vw, 46px); }
  .btn{ width: 100%; justify-content: center; }
  .moment-eyebrow{ font-size: 22px; max-width: 280px; }
  .moment-visual{ height: 180px; }
  .cat-card{ min-height: 84vw; }
  .why-featured h3{ font-size: 21px; }
  .mp-grid{ grid-template-columns: 1fr; }
  .mp-swatch{ height: 130px; }
  .scroll-cue{ bottom: -20px; }
}

/* focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--brass); outline-offset: 3px;
}