/* ============================================================
   ARSENIC DIGITAL — Page components (light)
   ============================================================ */

/* ---------- Hero (centered, elegant) — fills the fold ---------- */
.hero {
  position: relative;
  min-height: 100svh;            /* fit the fold exactly */
  display: flex;
  flex-direction: column;
  justify-content: center;       /* vertically center content in the viewport */
  padding: 90px 0 48px;          /* clear the 74px fixed header, keep balance */
  background:
    radial-gradient(66% 70% at 6% 4%, rgba(245,158,11,0.28), transparent 66%),
    radial-gradient(66% 70% at 94% 100%, rgba(234,179,8,0.22), transparent 68%),
    var(--bg);
  overflow: hidden;
}
.hero > .container { position: relative; z-index: 1; }  /* text above the floating icons */

/* Slowly-spinning concentric rings of social/marketing logos (decorative) */
.hero-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-rings {
  position: absolute; inset: 0;
  perspective: 1200px;
  transform: rotateX(14deg);
  transform-origin: center 60%;
}
.ring {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0;
  animation: ring-spin var(--dur, 90s) linear infinite;
}
.ring[data-dir="ccw"] { animation-name: ring-spin-rev; }
.ring-ico {
  position: absolute; top: 0; left: 0;
  width: var(--sz, 36px); height: var(--sz, 36px);
  margin-left: calc(var(--sz, 36px) / -2);
  margin-top:  calc(var(--sz, 36px) / -2);
}
.ring-ico img { width: 100%; height: 100%; display: block; opacity: .55; filter: blur(2.5px); }
.ring-1 .ring-ico img { opacity: .45; filter: blur(3.5px); }  /* back ring: softer, dimmer */
.ring-2 .ring-ico img { opacity: .62; filter: blur(2px); }    /* front ring: a touch crisper */
@keyframes ring-spin     { from { transform: rotate(0deg); }  to { transform: rotate(360deg); } }
@keyframes ring-spin-rev { from { transform: rotate(0deg); }  to { transform: rotate(-360deg); } }
/* center fade keeps the headline + buttons crisp above the faint icons */
.hero-veil {
  position: absolute; inset: 0;
  background: radial-gradient(56% 54% at 50% 47%, var(--bg) 0%, rgba(251,247,242,.66) 40%, transparent 74%);
}
@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }
@media (max-width: 960px) {
  .hero-rings { transform: rotateX(14deg) scale(.5); }
  .ring-1 .ring-ico img { opacity: .3; filter: blur(4px); }
  .ring-2 .ring-ico img { opacity: .4; filter: blur(2.5px); }
  .hero-veil { background: radial-gradient(62% 52% at 50% 44%, var(--bg) 0%, rgba(251,247,242,.74) 44%, transparent 78%); }
}
.hero-center {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}
.hero-center .eyebrow { margin-bottom: 20px; }
.hero-center h1 { margin-bottom: 22px; }
.hero-center .lead { font-size: 1.1875rem; max-width: 56ch; margin: 0 auto 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hero-trust {
  margin-top: 28px;
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--text-muted); font-size: 0.9375rem;
}
.hero-trust .avatars { display: inline-flex; }
.hero-trust .avatars span {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--bg);
  margin-left: -8px;
  background: linear-gradient(135deg, var(--g1), var(--g3));
}
.hero-trust .avatars span:first-child { margin-left: 0; }

/* ============================================================
   "Website on a screen" — a browser-window device with a LIVE,
   editable mini-site inside, plus a scroll-driven 3D tilt. The
   React refs (Aceternity ContainerScroll) are reimplemented in
   vanilla CSS/JS: JS sets --p (0..1) from scroll; CSS derives the
   rotateX + scale below. transform-origin near the bottom so the
   window pivots from its base (reclined -> upright, facing you).
   ============================================================ */
.device-wrap { max-width: 1000px; margin: 8px auto 0; position: relative; }

/* "Click any text to edit" affordance for the live playground — BOLD yellow chip (unmissable on cream) */
.ms-badge {
  position: absolute; top: -16px; right: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em;
  color: #1C1714; background: #FACC15;          /* solid brand yellow, dark text */
  border: 1px solid rgba(28,23,20,.14); border-radius: var(--r-pill);
  box-shadow: 0 8px 20px rgba(250,204,21,.42), 0 2px 6px rgba(28,23,20,.12);
  animation: ms-badge-pulse 2.4s ease-in-out infinite;
}
.ms-badge svg {                                 /* dark pencil (visible on yellow) + a little "writing" wiggle */
  width: 17px; height: 17px; color: #1C1714;
  transform-origin: 70% 70%;
  animation: ms-badge-wig 2.4s ease-in-out infinite;
}
@keyframes ms-badge-pulse {
  0%, 100% { transform: translateY(0);    box-shadow: 0 8px 20px rgba(250,204,21,.40), 0 2px 6px rgba(28,23,20,.12); }
  50%      { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(250,204,21,.55), 0 4px 10px rgba(28,23,20,.16); }
}
@keyframes ms-badge-wig {
  0%, 86%, 100% { transform: rotate(0deg); }
  91%           { transform: rotate(-13deg); }
  96%           { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) { .ms-badge, .ms-badge svg { animation: none; } }
@media (max-width: 600px) {
  .ms-badge { font-size: 0.82rem; padding: 8px 13px; top: -14px; right: 10px; }
  .ms-badge svg { width: 15px; height: 15px; }
}

/* Stage = perspective container (never transformed itself) */
.device-stage { perspective: 1100px; perspective-origin: 50% 16%; }

/* The tilting unit. --p 0 = reclined/tilted, 1 = flat & facing viewer.
   --tilt-max is applied per-element by JS from data-tilt-max. */
.device {
  position: relative;
  margin-inline: auto;
  transform-origin: 50% 82%;
  transform:
    rotateX(calc((1 - var(--p, 0)) * var(--tilt-max, 26deg)))
    scale(calc(0.92 + 0.08 * var(--p, 0))); /* <=1, never overflows non-clipped sections */
  will-change: transform;
}

/* The lid = the browser window */
.device-lid {
  position: relative; border-radius: var(--r-media); overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-card-hover);
}

/* Browser chrome bar */
.device-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.device-dots { display: flex; gap: 6px; }
.device-dots span { width: 10px; height: 10px; border-radius: 50%; background: #D9D4CD; }
.device-url {
  flex: 1; margin-left: 8px; text-align: left;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.75rem; color: var(--text-muted);
  background: var(--surface); padding: 5px 12px; border-radius: var(--r-pill); border: 1px solid var(--border);
}

/* The screen viewport — a container so the mini-site scales with it (cqw) */
.screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); container-type: inline-size; }

/* ---------- The concrete mini-site (scales with .screen via cqw) ---------- */
.ms {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3.2cqw;
  padding: 4.2cqw 4.6cqw; text-align: left; font-family: var(--font-body); color: var(--text);
  background: radial-gradient(95% 70% at 100% 0%, rgba(var(--g2-rgb),0.10), transparent 60%), var(--surface);
}
.ms-nav { display: flex; align-items: center; justify-content: space-between; }
.ms-logo { display: inline-flex; align-items: center; gap: 1.3cqw; font-family: var(--font-display); font-weight: 700; font-size: 2.1cqw; }
.ms-logo-mark {
  width: 3.4cqw; height: 3.4cqw; border-radius: 0.8cqw; background: #1C1714; color: #FACC15;
  display: inline-grid; place-items: center; font-size: 1.6cqw; font-weight: 700; letter-spacing: -0.02em;
}
.ms-links { display: inline-flex; gap: 2.6cqw; color: var(--text-muted); font-size: 1.6cqw; font-weight: 500; }
.ms-cta { font-size: 1.5cqw; font-weight: 600; background: #FACC15; color: #1C1714; padding: 1.1cqw 2.2cqw; border-radius: 999px; }
.ms-hero { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 3.8cqw; align-items: center; flex: 1; min-height: 0; }
.ms-hero-copy { display: flex; flex-direction: column; gap: 1.7cqw; }
.ms-eyebrow { font-size: 1.35cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }
.ms-h1 { font-family: var(--font-display); font-weight: 700; font-size: 4cqw; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.ms-sub { font-size: 1.7cqw; line-height: 1.45; color: var(--text-muted); margin: 0; }
.ms-btns { display: flex; gap: 1.5cqw; margin-top: 0.6cqw; }
.ms-btn { font-size: 1.5cqw; font-weight: 600; background: #FACC15; color: #1C1714; padding: 1.4cqw 2.6cqw; border-radius: 0.9cqw; white-space: nowrap; }
.ms-btn.ghost { background: #EFE9E0; color: #1C1714; }
.ms-media {
  align-self: stretch; min-height: 0; border-radius: 1.4cqw; position: relative; overflow: hidden;
  background: linear-gradient(150deg, rgba(var(--g3-rgb),.92), rgba(var(--g1-rgb),.82)), var(--bg-2);
  box-shadow: inset 0 0 0 1px rgba(28,23,20,.05);
}
.ms-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.ms-card { display: flex; flex-direction: column; gap: 0.7cqw; padding: 2cqw; border: 1px solid var(--border); border-radius: 1.2cqw; background: #FFFDFB; min-width: 0; /* let the caption ellipsis-truncate instead of growing the card */ }
.ms-card b { font-family: var(--font-display); font-size: 1.7cqw; }
.ms-card span { font-size: 1.35cqw; color: var(--text-muted); }
.ms-ic { width: 3.4cqw; height: 3.4cqw; border-radius: 0.8cqw; background: rgba(var(--g3-rgb),.22); }
.ms-ic.ic2 { background: rgba(var(--g2-rgb),.20); }
.ms-ic.ic3 { background: rgba(var(--g1-rgb),.18); }

/* ---------- Interactive playground (.ms--play) — fields a visitor can type into ---------- */
/* Editable fields read as real text, but hint they're editable on hover/focus */
.ms-edit { outline: none; border-radius: 0.6cqw; cursor: text; transition: background-color .15s ease, box-shadow .15s ease; }
.ms-edit:hover { background: rgba(var(--g2-rgb), .14); }
.ms-edit:focus { background: rgba(var(--g2-rgb), .18); box-shadow: 0 0 0 0.4cqw rgba(var(--g2-rgb), .18); }
/* Placeholder text for empty contenteditable fields */
.ms-edit:empty::before { content: attr(data-placeholder); color: #B4A99C; pointer-events: none; }
.ms--play .ms-name { font-family: var(--font-display); font-weight: 700; }
/* Monogram: solid square w/ initials; empty state = subtle placeholder */
.ms-logo-mark.is-empty { background: #EFE9E0; color: #B4A99C; box-shadow: inset 0 0 0 1.5px #DFD6C8; }

/* Headline auto-accent: a clean yellow underline on one word (not a block) */
.ms-underline { text-decoration: underline; text-decoration-color: #EAB308; text-decoration-thickness: 0.1em; text-underline-offset: 0.14em; }

/* Service caption: ALWAYS clamp to 2 lines + ellipsis so it never stretches the card */
.ms-card .cap { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
/* Service title: single line + ellipsis */
.ms-card b { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mock buttons: a clear press cue, but they do nothing */
.ms-btn, .ms-cta { cursor: pointer; user-select: none; transition: transform .08s ease, filter .15s ease; }
.ms-btn:hover, .ms-cta:hover { filter: brightness(.97); }
.ms-btn:active, .ms-cta:active, .ms-btn.is-press, .ms-cta.is-press { transform: scale(.95); }

/* Hint line under the playground */
.ms-hint { text-align: center; margin-top: 18px; color: var(--text-muted); font-size: 0.875rem; }

/* Reduced motion: no tilt at all */
@media (prefers-reduced-motion: reduce) { .device { transform: none !important; } }

/* Phones: gentler 3D but keep it clearly visible */
@media (max-width: 768px) {
  .device-stage { perspective: 820px; }
  .device { --tilt-max: 16deg; }
}

/* Page hero (interior) — centered */
.hero-page { max-width: 720px; margin-inline: auto; text-align: center; }
.hero-page .eyebrow { margin-bottom: 18px; }
.hero-page h1 { margin-bottom: 18px; }
.hero-page .lead { max-width: 54ch; margin-inline: auto; }

/* ---------- Recent work strip ---------- */
.work-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.work-thumb {
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.work-thumb .ph { border: none; border-radius: 0; aspect-ratio: 16/11; }
.work-thumb .shot { display: block; width: 100%; aspect-ratio: 16/11; object-fit: cover; }
.work-thumb:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: rgba(var(--g3-rgb),.4); }
.work-thumb-meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(0deg, rgba(24,20,31,.86), transparent);
  opacity: 0;
  transition: opacity .18s ease;
}
.work-thumb:hover .work-thumb-meta, .work-thumb:focus-within .work-thumb-meta { opacity: 1; }
.work-thumb-meta b { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; color: #fff; }
.work-thumb-meta span { font-size: 0.75rem; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .06em; }

.diff-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  margin-top: 36px;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.diff-row span { display: inline-flex; align-items: center; }
.diff-row span:not(:last-child)::after { content: "·"; margin: 0 16px; color: var(--g2); }

/* ---------- Recent Work: horizontal thumbnail strips → scrollable modal ---------- */
.wk-layout { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 40px; align-items: center; }
.wk-intro h2 { margin: 10px 0 14px; }
.wk-intro .lead { margin-bottom: 26px; }

/* Stacked horizontal strip rows (each opens the modal) */
.wk-list { display: flex; flex-direction: column; gap: 12px; }
.wk-strip {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 16px 12px 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent, var(--border));
  border-radius: 14px; box-shadow: var(--shadow-card);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.wk-strip:hover, .wk-strip:focus-visible {
  transform: translateY(-2px); box-shadow: var(--shadow-card-hover);
  border-color: var(--accent, var(--border)); outline: none;
}
.wk-thumb { width: 132px; height: 76px; flex: 0 0 auto; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-2); }
.wk-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wk-meta > * { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-meta b { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--text); }
.wk-cat { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent, var(--text-muted)); font-weight: 600; }
.wk-dom { font: 500 0.8125rem/1.2 ui-monospace, Menlo, monospace; color: var(--text-muted); }
.wk-go { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; color: var(--accent, var(--link)); }
.wk-go svg { width: 16px; height: 16px; }

/* Modal: dim backdrop + centered browser window with the scrollable full screenshot */
.wk-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; }
.wk-modal[hidden] { display: none; }
.wk-modal-backdrop { position: absolute; inset: 0; background: rgba(28,23,20,.55); backdrop-filter: blur(2px); animation: wk-fade .2s ease; }
.wk-window {
  position: relative; width: min(960px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-media);
  box-shadow: 0 30px 80px rgba(28,23,20,.4); overflow: hidden; animation: wk-pop .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes wk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wk-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* Browser chrome bar + scroll body (reused by the modal) */
.wk-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.wk-dots { display: flex; gap: 6px; }
.wk-dots i { width: 9px; height: 9px; border-radius: 50%; background: #D9D4CD; display: block; }
.wk-url { flex: 1; font: 500 12px/1 ui-monospace, Menlo, monospace; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; text-align: left; }
.wk-close { flex: 0 0 auto; width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 9px; border: 0; background: #1C1714; color: #FACC15; cursor: pointer; box-shadow: 0 2px 6px rgba(28,23,20,.18); transition: background-color .15s ease, color .15s ease, transform .12s ease; }
.wk-close svg { width: 20px; height: 20px; display: block; }
.wk-close:hover { background: #FACC15; color: #1C1714; }
.wk-close:active { transform: scale(.93); }
.wk-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.wk-full { width: 100%; display: block; }

@media (max-width: 900px) { .wk-layout { grid-template-columns: 1fr; gap: 24px; align-items: start; } }
@media (max-width: 560px) {
  .wk-strip { gap: 12px; padding: 10px 12px 10px 10px; }
  .wk-thumb { width: 92px; height: 60px; }
  .wk-go { font-size: 0; gap: 0; }      /* collapse the "View site" text, keep the arrow */
  .wk-go svg { width: 20px; height: 20px; }
  .wk-modal { padding: 12px; }
}

/* ---------- What we do — LIGHT frosted-glass cards (icon + 3D tilt + glare) ---------- */
.wwd-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; perspective: 1200px; }
.wwd {
  position: relative; display: block; overflow: hidden;
  padding: 32px; border-radius: var(--r-card);
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.74)); /* light frosted — blends with the cream bg */
  backdrop-filter: blur(10px) saturate(1.05); -webkit-backdrop-filter: blur(10px) saturate(1.05);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  color: var(--text); text-decoration: none;
  transform-style: preserve-3d;
  transition: transform .15s ease, box-shadow .25s ease, border-color .2s ease;
}
.wwd:hover { box-shadow: var(--shadow-card-hover); border-color: rgba(var(--g3-rgb),.45); }
.wwd-glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s ease;
  background: radial-gradient(280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(250,204,21,.20), transparent 60%);
}
.wwd:hover .wwd-glare { opacity: 1; }
.wwd-ico, .wwd .step, .wwd h3, .wwd p, .wwd-go { position: relative; z-index: 1; }
.wwd-ico {
  width: 56px; height: 56px; border-radius: 50%; margin-bottom: 18px;
  background: #FACC15; color: #1C1714; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(250,204,21,.25);
}
.wwd-ico svg { width: 26px; height: 26px; }
.wwd .step {
  display: block; font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--link); margin-bottom: 10px;
}
.wwd h3 { font-size: 1.375rem; margin-bottom: 10px; color: var(--text); }
.wwd p { color: var(--text-muted); font-size: 1rem; margin-bottom: 0; }
.wwd-go {
  position: absolute; top: 24px; right: 24px; color: var(--link); font-size: 1.125rem; line-height: 1;
  opacity: .55; transform: translate(-4px, 4px); transition: opacity .2s ease, transform .2s ease;
}
.wwd:hover .wwd-go { opacity: 1; transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) { .wwd { transition: box-shadow .2s ease; } }

/* ---------- Service pillars (alternating, Services page) ---------- */
.pillar { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.pillar + .pillar { margin-top: 96px; }
.pillar.flip .pillar-media { order: -1; }
.pillar-num {
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: .1em; color: var(--link); margin-bottom: 16px;
}
.pillar h3 { margin-bottom: 14px; }
.pillar p { color: var(--text-muted); margin-bottom: 24px; font-size: 1.0625rem; }
.pillar-media .ph { aspect-ratio: 4/3; }
.pillar-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.pillar-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--text); font-size: 1rem; }
.check { flex: 0 0 auto; margin-top: 2px; width: 18px; height: 18px; display: grid; place-items: center; color: var(--link); }

/* ---------- Tabbed "What you get" ---------- */
.tabs-wrap { max-width: 960px; margin-inline: auto; }
.tabs-nav {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin: 0 auto 40px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}
.tabs-nav-outer { display: flex; justify-content: center; }
.tab-btn {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 0.9375rem; font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  transition: color .2s ease;
}
.tab-btn[aria-selected="true"] { color: var(--text); } /* no-JS fallback indicator */
/* SlideTabs — hard ORANGE marker stays on the selected tab; a subtle gray ghost follows the hover */
.tab-cursor, .tab-ghost {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  transition: left .28s cubic-bezier(.4,0,.2,1), width .28s cubic-bezier(.4,0,.2,1), opacity .2s ease;
}
.tab-cursor {            /* hard / selected marker */
  z-index: 1;
  background: #FACC15;
  box-shadow: 0 2px 10px rgba(var(--g3-rgb), .30);
}
.tab-ghost {             /* subtle gray hover preview — slides out from beneath the marker */
  z-index: 0;
  background: rgba(28,23,20,.08);
}
.tab-btn.is-selected { color: #1C1714; } /* dark, readable on the orange marker */
.tab-btn.is-hover { color: var(--text); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: tabIn .35s ease-out; }
@keyframes tabIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tab-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-media);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.tab-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0; }
.tab-info { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.tab-info h3 { font-size: 1.5rem; margin-bottom: 12px; }
.tab-info p { color: var(--text-muted); margin-bottom: 22px; }
.tab-info ul { display: flex; flex-direction: column; gap: 12px; }
.tab-info li { display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 0.9375rem; }
.tab-media { background: var(--bg-2); border-left: 1px solid var(--border); padding: 28px; display: grid; place-items: center; }
.tab-media .ph { width: 100%; aspect-ratio: 16/11; }
/* Real-photo media panels: full-bleed image meeting the card's rounded edge */
.tab-media--img { padding: 0; border-left: 0; display: block; }
.tab-shot { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- "What you get" deliverable mockups (on-brand CSS/SVG) ---- */
.tm { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 3px rgba(28,23,20,.05); overflow: hidden; font-family: var(--font-body); }

/* Website — browser mock */
.tm-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.tm-dot { width: 8px; height: 8px; border-radius: 50%; background: #D9D4CD; }
.tm-url { flex: 1; margin-left: 8px; font: 500 11px/1 ui-monospace, Menlo, monospace; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.tm-screen { padding: 16px 18px; display: flex; flex-direction: column; gap: 13px; background: radial-gradient(90% 70% at 100% 0%, rgba(var(--g2-rgb),.08), transparent 60%), var(--surface); }
.tm-nav { display: flex; align-items: center; gap: 10px; }
.tm-logo { width: 16px; height: 16px; border-radius: 5px; background: #1C1714; }
.tm-links { display: flex; gap: 8px; flex: 1; }
.tm-links i { width: 26px; height: 7px; border-radius: 999px; background: #E8E1D7; display: block; }
.tm-pill { width: 48px; height: 16px; border-radius: 999px; background: #FACC15; }
.tm-hero { display: flex; flex-direction: column; gap: 8px; }
.tm-h { height: 13px; width: 70%; border-radius: 5px; background: #D9D1C5; }
.tm-h.tm-accent { width: 42%; background: #FACC15; }
.tm-sub { height: 7px; width: 88%; border-radius: 999px; background: #ECE5DB; }
.tm-sub.w70 { width: 60%; }
.tm-btns { display: flex; gap: 8px; margin-top: 5px; }
.tm-btn { width: 74px; height: 22px; border-radius: 7px; background: #FACC15; }
.tm-btn.ghost { width: 58px; background: transparent; border: 1.5px solid var(--border); }
.tm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2px; }
.tm-card { height: 38px; border-radius: 8px; border: 1px solid var(--border); background: #FFFDFB; }

/* SEO + Ads — padded data cards */
.tm-seo, .tm-ads { padding: 16px 18px; display: flex; flex-direction: column; gap: 9px; }
.tm-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; color: var(--text); }
.tm-trend { font-family: var(--font-body); font-weight: 600; font-size: 0.6875rem; color: #16A34A; background: rgba(22,163,74,.10); padding: 3px 8px; border-radius: 999px; }
.tm-ads .tm-trend { color: var(--text-muted); background: var(--bg-2); }

/* SEO rows + sparkline */
.tm-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; background: #FFFDFB; }
.tm-kw { flex: 1; font-size: 0.75rem; color: var(--text); }
.tm-rank { font-family: var(--font-display); font-weight: 700; font-size: 0.8125rem; color: #1C1714; }
.tm-up { color: #16A34A; font-size: 0.6875rem; }
.tm-spark { margin-top: 2px; }
.tm-spark svg { display: block; width: 100%; height: 48px; }

/* Ads stats + bars */
.tm-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-stat { border: 1px solid var(--border); border-radius: 9px; background: #FFFDFB; padding: 8px 11px; }
.tm-stat b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: #1C1714; line-height: 1.15; }
.tm-stat span { font-size: 0.6875rem; color: var(--text-muted); }
.tm-bars svg { display: block; width: 100%; height: 64px; margin-top: 4px; }

.tm-cap { display: block; margin-top: 6px; font-size: 0.6875rem; color: var(--text-muted); }

/* ---------- Dashboard mock (light) ---------- */
.dash {
  border-radius: var(--r-media);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 30px 60px rgba(28,23,20,.14), 0 6px 16px rgba(28,23,20,.08);
  overflow: hidden;
  max-width: 980px;
  margin-inline: auto;
}
.dash-shot { display: block; width: 100%; height: auto; }
.dash-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.dash-top .logo { font-size: 0.9375rem; }
.dash-tabs { display: flex; gap: 6px; }
.dash-tabs span { font-size: 0.75rem; color: var(--text-muted); padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border); }
.dash-tabs span.on { color: #1C1714; background: var(--grad); border-color: transparent; }
.dash-body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.dash-stat { background: var(--surface); padding: 22px; }
.dash-stat .k { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 10px; letter-spacing: .04em; }
.dash-stat .v { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; }
.dash-stat .d { font-size: 0.75rem; color: var(--link); margin-top: 6px; }
.dash-chart { background: var(--surface); padding: 24px; grid-column: 1 / -1; }
.dash-chart .ph { aspect-ratio: 16/5; }
@media (max-width: 768px) { .dash-body { grid-template-columns: 1fr 1fr; } }

/* ---------- Why Arsenic (3-across) ---------- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.why-item { text-align: center; }
.why-item .vn {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  color: #B45309;
  display: block; margin-bottom: 12px;
}
.why-item h4 { font-size: 1.1875rem; margin-bottom: 8px; }
.why-item p { color: var(--text-muted); font-size: 0.9375rem; max-width: 32ch; margin-inline: auto; }

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.review-card { position: relative; overflow: hidden; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: rgba(var(--g3-rgb),.4); }
/* big faint serif quote mark, top-right (decorative) */
.rv-quote {
  position: absolute; top: -8px; right: 22px; z-index: 0;
  font-family: Georgia, "Times New Roman", serif; font-size: 5.5rem; line-height: 1;
  color: rgba(var(--g3-rgb), .18); pointer-events: none; user-select: none;
}
/* keep card content above the quote mark */
.review-card .stars, .review-card blockquote, .review-card .who { position: relative; z-index: 1; }
/* stars that POP — bigger, brand yellow, soft gold glow */
.stars { display: inline-flex; gap: 4px; }
.stars .star { width: 22px; height: 22px; fill: #FACC15; filter: drop-shadow(0 1px 3px rgba(245,158,11,.55)); }
.review-card blockquote { font-size: 1.0625rem; line-height: 1.6; color: var(--text); }
.review-card .who { margin-top: auto; }
.review-card .who b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; }
.review-card .who span { color: var(--text-muted); font-size: 0.875rem; }
.review-card .who .ph-note { font-style: italic; font-family: ui-monospace, Menlo, monospace; font-size: 0.8125rem; color: var(--text-muted); }

/* ---------- Pricing (colorized) ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.price-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--tier, var(--border));
}
.price-card.gold     { --tier: #B45309; background: linear-gradient(160deg, #FDEFC4, #F7D277); border-color: #ECC25A; }
.price-card.diamond  { --tier: #2563EB; background: linear-gradient(160deg, #DFEAFF, #B6D1FF); border-color: #95BEF6; box-shadow: var(--shadow-card-hover); transform: translateY(-8px); }
.price-card.platinum { --tier: #7C3AED; background: linear-gradient(160deg, #EBE2FE, #D0BAFA); border-color: #BBA2F2; }
.price-card.custom   { --tier: #FACC15; background: linear-gradient(165deg, #2A241F, #1C1714); border-color: #3A332C; }
.price-card.custom .tier-sub, .price-card.custom .price-term { color: rgba(255,255,255,.66); }
.price-card.custom .price-features li { color: rgba(255,255,255,.80); }
.price-card.custom .price-amount .num { color: #fff; }
.price-badge {
  position: absolute; top: 0; right: 16px; transform: translateY(-50%);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .03em;
  color: #fff; background: var(--tier);
  padding: 5px 12px; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(28,23,20,.18);
}
.price-card h3 { font-size: 1.5rem; margin-bottom: 6px; color: var(--tier); }
.price-card .tier-sub { color: var(--text-muted); font-size: 0.9375rem; margin-bottom: 24px; }
.price-amount { min-height: 52px; display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.price-amount .num { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; color: var(--tier); line-height: 1; }
.price-amount .per { color: var(--text-muted); font-size: 0.875rem; }
.price-term { color: var(--text-muted); font-size: 0.8125rem; margin-bottom: 24px; min-height: 20px; }
.price-card .btn { margin-bottom: 28px; }
.btn-tier { background: transparent; border: 1.5px solid var(--tier); color: var(--tier); }
.btn-tier:hover { background: var(--tier); color: #fff; }
.btn-pop { background: var(--tier); color: #fff; border: none; }
.btn-pop:hover { filter: brightness(1.06); }
.btn-quote { background: #FACC15; color: #1C1714; border: none; }
.btn-quote:hover { filter: brightness(1.04); }
.price-features { display: flex; flex-direction: column; gap: 14px; margin-top: auto; }
.price-features li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-muted); font-size: 0.9375rem; }
.price-features .check { color: var(--tier); }
/* Pricing responsive: 4-up → 2×2 → 1-col */
@media (max-width: 1080px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .price-card.diamond { transform: none; }
}
@media (max-width: 560px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ — one rounded box, dashed dividers, soft brand-yellow accent ---------- */
.faq {
  max-width: 720px; margin-inline: auto;
  background: var(--surface);
  border: 1px solid rgba(var(--g2-rgb),.32);
  border-radius: var(--r-media);
  box-shadow: 0 0 0 5px rgba(var(--g2-rgb),.12), var(--shadow-card);
  padding: 4px 32px;
}
.faq-item { border-bottom: 1px dashed rgba(28,23,20,.13); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: transparent; border: none; color: var(--text);
  font-family: var(--font-display); font-weight: 600; font-size: 1.125rem;
  text-align: left; padding: 24px 0;
}
.faq-q .ico {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; position: relative;
  background: rgba(var(--g2-rgb),.16); transition: background .25s;
}
.faq-q .ico::before, .faq-q .ico::after {
  content: ""; position: absolute; background: var(--link); border-radius: 2px;
  top: 50%; left: 50%; transform: translate(-50%,-50%); transition: background .25s;
}
.faq-q .ico::before { width: 14px; height: 2px; }
.faq-q .ico::after { width: 2px; height: 14px; transition: transform .2s ease, background .25s; }
.faq-item.open .faq-q .ico { background: #FACC15; }
.faq-item.open .faq-q .ico::before, .faq-item.open .faq-q .ico::after { background: #1C1714; }
.faq-item.open .faq-q .ico::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; color: var(--text-muted); font-size: 1rem; }
.faq-a p { padding-bottom: 24px; max-width: 64ch; }
@media (max-width: 560px) {
  .faq { padding: 2px 22px; }
  .faq-q { font-size: 1.05rem; gap: 16px; }
}

/* ---------- Process row ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.process-step { padding-top: 24px; border-top: 2px solid var(--border); }
.process-step .n { font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600; color: var(--link); letter-spacing: .1em; margin-bottom: 14px; }
.process-step h4 { font-size: 1.25rem; margin-bottom: 8px; }
.process-step p { color: var(--text-muted); font-size: 0.9375rem; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .inner { max-width: 660px; margin-inline: auto; position: relative; z-index: 1; }
.cta-band h2 { margin-bottom: 16px; }
.cta-band .lead { margin-bottom: 32px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- Work / portfolio grid ---------- */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; justify-content: center; }
.filter-tab {
  font-size: 0.875rem; font-weight: 600; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  padding: 8px 18px; border-radius: var(--r-pill);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.filter-tab.active { color: #FBF7F2; background: var(--text); border-color: transparent; }
.filter-tab:not(.active):hover { color: var(--text); border-color: var(--link); }

.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.work-card { overflow: hidden; }
.work-card .ph { border: none; border-radius: 0; aspect-ratio: 16/10; }
.work-card .shot { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.work-card.placeholder .ph { opacity: .7; }
.work-card-body { padding: 24px; }
.work-card-body .tags { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.work-card-body h3 { font-size: 1.375rem; margin-bottom: 8px; }
.work-card-body .result { color: var(--text-muted); font-size: 0.9375rem; }
.work-card-body .placeholder-note { color: var(--text-muted); font-size: 0.875rem; font-style: italic; font-family: ui-monospace, Menlo, monospace; }

/* ---------- Values (about) ---------- */
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
.value h4 { font-size: 1.25rem; margin-bottom: 10px; display: flex; align-items: baseline; gap: 12px; }
.value h4 .vn { font-family: var(--font-display); font-size: 0.875rem; color: var(--link); }
.value p { color: var(--text-muted); font-size: 0.9375rem; }

/* ---------- Team ---------- */
.team { display: flex; gap: 32px; align-items: center; max-width: 760px; margin-inline: auto; }
.team-photo { flex: 0 0 200px; }
.team-photo .ph { aspect-ratio: 1; border-radius: var(--r-media); }
.team-info h4 { font-size: 1.375rem; margin-bottom: 4px; }
.team-info .role { color: var(--link); font-size: 0.875rem; font-weight: 600; margin-bottom: 14px; }
.team-info p { color: var(--text-muted); font-size: 0.9375rem; max-width: 56ch; }

/* ---------- Story ---------- */
.story { max-width: 720px; margin-inline: auto; text-align: center; }
.story p { font-size: 1.1875rem; color: var(--text-muted); margin-bottom: 22px; }
.story p strong { color: var(--text); font-weight: 600; }

/* ---------- Contact form ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; max-width: 1040px; margin-inline: auto; }
.contact-aside h3 { font-size: 1.375rem; margin-bottom: 14px; }
.contact-aside p { color: var(--text-muted); margin-bottom: 28px; }
.contact-detail { display: grid; gap: 20px; }
.contact-detail-item h5 { font-family: var(--font-body); font-size: 0.75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 6px; }
.contact-detail-item a, .contact-detail-item p { color: var(--text); font-size: 1rem; margin: 0; }
.contact-detail-item a:hover { color: var(--link); }

.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 36px; box-shadow: var(--shadow-card); }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.field label .opt { color: var(--text-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  color: var(--text);
  font-family: inherit; font-size: 0.9375rem;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: #A39FAB; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px rgba(var(--g3-rgb),.12); }
.field.error input, .field.error select, .field.error textarea { border-color: #E0426A; }
.field-error { display: none; color: #C2305A; font-size: 0.8125rem; margin-top: 6px; }
.field.error .field-error { display: block; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); padding: 8px 16px; border-radius: var(--r-pill); transition: all .15s ease; }
.chip[aria-pressed="true"] { color: #FBF7F2; background: var(--text); border-color: transparent; }

.form-success { background: var(--surface); border: 1px solid #BBF7D0; border-radius: var(--r-card); padding: 48px 36px; text-align: center; box-shadow: var(--shadow-card); }
.form-success .ico { width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: #DCFCE7; display: grid; place-items: center; color: #16A34A; }
.form-success h3 { margin-bottom: 10px; }
.form-success p { color: var(--text-muted); }

.reassure { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 28px; color: var(--text-muted); font-size: 0.875rem; }
.reassure span { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pillar, .contact-layout, .team { grid-template-columns: 1fr; gap: 40px; }
  .pillar.flip .pillar-media { order: 0; }
  .tab-grid { grid-template-columns: 1fr; }
  .tab-media { border-left: none; border-top: 1px solid var(--border); }
  .tab-media--img { border-top: 1px solid var(--border); }
  .tab-media--img .tab-shot { height: auto; aspect-ratio: 16 / 10; }
  .process { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; gap: 32px; }
  .reviews-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; gap: 32px; }
  .team { text-align: center; }
  .team-photo { margin-inline: auto; }
}
@media (max-width: 640px) {
  .work-strip, .work-grid, .process, .wwd-row { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero { padding-top: 120px; }
  .tabs-nav { width: 100%; justify-content: space-between; }
  .tab-btn { padding: 10px 14px; }
}