/* Sydney Website Dev
 * Built by Sydney Website Dev
 * Contact: admin@sydneywebsitedev.com
 * (c) 2026 Sydney Website Dev. All rights reserved.
 *
 * Design system: dark-first editorial studio.
 * Ink + bone + electric cobalt. Fraunces (roman led) / Geist / Geist Mono.
 * The studio frame is quiet and dark so the client work glows.
 */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Dark surfaces (hero, gallery, cta, footer) */
  --ink:        #121016;
  --ink-rich:   #17151D;
  --ink-2:      #201D29;
  --ink-3:      #2A2734;
  --ink-line:   #322E3C;
  --ink-line-2: #423D4E;

  /* Light surfaces (content sections) */
  --bone:       #F3F1EA;
  --bone-2:     #FBFAF4;
  --bone-3:     #ECE8DD;
  --bone-line:  #DED9CB;
  --bone-line-2:#CFC9B8;

  /* Text on light */
  --ink-text:   #16131C;
  --ink-soft:   #514D5A;
  --ink-mute:   #6B6675;

  /* Text on dark */
  --bone-text:  #F3F1EA;
  --bone-dim:   #B7B3C0;
  --bone-mute:  #807B8B;

  /* Signature accent: electric cobalt */
  --cobalt:        #3A57F0;
  --cobalt-bright: #6276FF;
  --cobalt-deep:   #2438C9;
  --cobalt-pale:   #E6E9FE;
  --cobalt-ink:    #1A2360;

  /* Warm bloom used only as faint hero atmosphere, never as text */
  --bloom:      #FF8A4C;
  --bloom-2:    #FF5DA0;

  /* Per-piece accent (swapped at runtime by JS) */
  --piece:      var(--cobalt);
  --piece-glow: rgba(58, 87, 240, 0.45);

  /* Honesty markers: deliberately a different hue from brand, impossible to mistake for design */
  --ph:        #E5328E;
  --ph-deep:   #B01566;
  --ph-tint:   rgba(229, 50, 142, 0.09);

  /* Type */
  --display: 'Fraunces', 'Tobias', Georgia, serif;
  --sans:    'Geist', 'Sohne', -apple-system, system-ui, sans-serif;
  --mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 168px;

  --container: 1240px;
  --container-narrow: 880px;
  --container-wide: 1420px;
  --gutter: clamp(20px, 4.5vw, 60px);
  --radius: 14px;
  --radius-lg: 22px;

  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);

  --z-cursor: 200;
  --z-nav: 90;
  --z-mobilecta: 80;
  --z-progress: 95;

  --nav-h: 70px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  margin: 0;
  background: var(--bone);
  color: var(--ink-text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
a { color: inherit; text-decoration: none; transition: color 0.25s var(--ease); }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; letter-spacing: -0.02em; }
strong { font-weight: 600; }

::selection { background: var(--cobalt); color: #fff; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 3px; }

em { font-style: italic; }

/* Display serif: used UPRIGHT by default. Italic is a rare accent only. */
.serif { font-family: var(--display); font-weight: 400; }

/* Page-load wash */
@keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } }
body { animation: pageEnter 0.5s var(--ease-soft) both; }

/* ============================================================
   CUSTOM CURSOR (desktop, fine-pointer only)
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: difference;
}
.cursor-dot {
  width: 6px; height: 6px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 34px; height: 34px;
  border: 1.5px solid #fff;
  transform: translate(-50%, -50%);
  transition: width 0.28s var(--ease), height 0.28s var(--ease),
              background 0.28s var(--ease), opacity 0.3s ease, border-color 0.28s var(--ease);
}
body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring { opacity: 1; }
body.cursor-hover .cursor-ring {
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.08);
}
.cursor-ring__label {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
body.cursor-label .cursor-ring { width: 80px; height: 80px; background: var(--cobalt); border-color: var(--cobalt); mix-blend-mode: normal; }
body.cursor-label .cursor-dot { opacity: 0; }
body.cursor-label .cursor-ring__label { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--cobalt), var(--cobalt-bright));
  z-index: var(--z-progress);
  transition: width 0.1s linear;
}

/* ============================================================
   PLACEHOLDER / HONESTY MARKERS
   Elegant but unmistakable. A different hue from the brand.
   ============================================================ */
.placeholder {
  display: inline-block;
  background: var(--ph-tint);
  color: var(--ph-deep);
  border: 1.5px dashed var(--ph);
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  border-radius: 6px;
  font-weight: 500;
  vertical-align: middle;
}
.placeholder--block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--s-7) var(--s-5);
  text-align: center;
  border-radius: var(--radius);
}
/* Image slot: looks like a designed frame even while empty */
.placeholder--photo {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(58,87,240,0.05), transparent 60%),
    var(--bone-2);
  border: 1.5px dashed var(--ph);
  border-radius: var(--radius);
  overflow: hidden;
}
.placeholder--photo::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--bone-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--bone-line) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.4;
  mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 75%);
}
.placeholder__icon {
  width: 46px; height: 46px;
  border: 1.5px solid var(--ph);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 18px;
  color: var(--ph-deep);
  position: relative;
  background: var(--bone-2);
}
.placeholder__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ph-deep);
  position: relative;
}
.placeholder__hint {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 34ch;
  position: relative;
  line-height: 1.5;
}
/* dark-context placeholder */
.is-dark .placeholder--photo { background: rgba(255,255,255,0.02); }
.is-dark .placeholder__hint { color: var(--bone-dim); }
.is-dark .placeholder__icon { background: var(--ink-2); }

/* ============================================================
   SHARED UTILITIES
   ============================================================ */
.eyebrow, .section-num, .page-header__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before, .section-num::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--cobalt);
}
.is-dark .eyebrow, .is-dark .section-num { color: var(--bone-mute); }

.meta-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--bone-dim);
  text-transform: uppercase;
}
.meta-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cobalt-bright);
  margin: 0 12px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 var(--cobalt-bright);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(98,118,255,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(98,118,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(98,118,255,0); }
}

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); will-change: opacity, transform; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(36px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.word-reveal .word, .word-reveal em {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) rotate(1.5deg);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.word-reveal.visible .word, .word-reveal.visible em { opacity: 1; transform: translateY(0) rotate(0); }

/* Section frame */
.section {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 132px) var(--gutter);
}
.section--first { padding-top: clamp(48px, 6vw, 80px); }
.section--narrow { max-width: var(--container-narrow); }

.section__head { max-width: 64ch; margin-bottom: clamp(40px, 6vw, 72px); }
.section__heading {
  font-family: var(--display);
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: var(--s-5) 0 var(--s-4);
}
.section__heading em { font-style: italic; color: var(--cobalt); }
.is-dark .section__heading em { color: var(--cobalt-bright); }
.section__caption {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}
.is-dark .section__caption { color: var(--bone-dim); }
.section__cta-row { margin-top: clamp(36px, 5vw, 56px); display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* Section colour contexts */
.is-dark { background: var(--ink); color: var(--bone-text); }
.is-dark a { color: var(--bone-text); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--s-7);
  height: var(--nav-h);
  padding: 0 var(--gutter);
  background: rgba(243, 241, 234, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--bone-line); }
/* dark nav variant for the home page over the dark hero */
.nav--dark {
  background: rgba(18, 16, 22, 0.55);
  border-bottom-color: transparent;
  color: var(--bone-text);
}
.nav--dark.is-scrolled { background: rgba(18, 16, 22, 0.82); border-bottom-color: var(--ink-line); }
.nav--dark .nav__links a { color: var(--bone-dim); }
.nav--dark .nav__links a:hover, .nav--dark .nav__links a.is-active { color: var(--bone-text); }
.nav--dark .nav__brand-name { color: var(--bone-text); }
.nav--dark .nav__brand-mark { background: var(--bone-text); color: var(--ink); }
.nav--dark .nav__cta { background: #fff; color: var(--ink); border-color: #fff; }
.nav--dark .nav__cta:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.nav--dark .nav__toggle { border-color: var(--ink-line-2); }
.nav--dark .nav__toggle span, .nav--dark .nav__toggle span::before, .nav--dark .nav__toggle span::after { background: var(--bone-text); }

.nav__brand {
  display: flex; align-items: center; gap: 11px;
  margin-right: auto;
}
.nav__brand-mark {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  background: var(--ink-text);
  color: var(--bone-2);
  padding: 6px 8px;
  border-radius: 6px;
  line-height: 1;
}
.nav__brand-name {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink-text);
}
.nav__links { display: flex; gap: var(--s-6); }
.nav__links a {
  font-size: 14px;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
}
.nav__links a:hover { color: var(--ink-text); }
.nav__links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--cobalt);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--ink-text); }

.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px;
  padding: 9px 18px;
  background: var(--ink-text);
  color: var(--bone-2);
  border: 1px solid var(--ink-text);
  border-radius: 100px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.nav__cta:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px var(--piece-glow); }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--bone-line-2);
  border-radius: 8px;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block; width: 17px; height: 1.6px;
  background: var(--ink-text); position: relative;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after { top: 5px; }
.nav__toggle.is-open span { background: transparent; }
.nav__toggle.is-open span::before { transform: rotate(45deg); top: 0; }
.nav__toggle.is-open span::after { transform: rotate(-45deg); top: 0; }

@media (max-width: 900px) {
  .nav__links, .nav__brand-name { display: none; }
  .nav__toggle { display: flex; }
  .nav__cta { padding: 8px 14px; font-size: 13px; }
  .nav__links.is-open {
    display: flex;
    position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
    background: var(--ink);
    flex-direction: column; justify-content: center;
    padding: var(--s-7) var(--gutter);
    gap: var(--s-4);
    animation: navMobileIn 0.45s var(--ease);
  }
  .nav__links.is-open a { font-family: var(--display); font-size: 40px; color: var(--bone-text); }
  .nav__links.is-open a::after { display: none; }
  @keyframes navMobileIn { from { opacity: 0; } to { opacity: 1; } }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  font-size: 15px; font-weight: 500;
  border-radius: 100px;
  position: relative;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.25s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s var(--ease);
}
.btn svg { transition: transform 0.3s var(--ease); }
.btn--primary { background: var(--cobalt); color: #fff; }
.btn--primary:hover { background: var(--cobalt-deep); transform: translateY(-2px); box-shadow: 0 12px 30px var(--piece-glow); }
.btn--primary:hover svg { transform: translateX(4px); }

.btn--ink { background: var(--ink-text); color: var(--bone-2); }
.btn--ink:hover { background: var(--cobalt); transform: translateY(-2px); box-shadow: 0 12px 30px var(--piece-glow); }
.btn--ink:hover svg { transform: translateX(4px); }

.btn--ghost { border: 1px solid var(--bone-line-2); color: var(--ink-text); }
.btn--ghost:hover { border-color: var(--ink-text); background: var(--ink-text); color: var(--bone-2); }
.btn--ghost:hover svg { transform: translateX(4px); }

.is-dark .btn--ghost, .btn--ghost-light { border: 1px solid var(--ink-line-2); color: var(--bone-text); }
.is-dark .btn--ghost:hover, .btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--accent { background: var(--cobalt); color: #fff; }
.btn--accent:hover { background: var(--cobalt-deep); transform: translateY(-2px); box-shadow: 0 12px 30px var(--piece-glow); }

/* Magnetic wrap helper */
.magnetic { display: inline-flex; will-change: transform; }

/* ============================================================
   HOME HERO  (dark, atmospheric)
   ============================================================ */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--bone-text);
  overflow: hidden;
  padding: clamp(40px, 7vh, 88px) var(--gutter) clamp(56px, 9vh, 104px);
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + clamp(40px, 7vh, 88px));
}
.hero__aurora {
  position: absolute; inset: -20% -10% auto -10%;
  height: 70%;
  pointer-events: none;
  background:
    radial-gradient(45% 60% at 22% 18%, rgba(58,87,240,0.42), transparent 70%),
    radial-gradient(40% 55% at 82% 8%, rgba(255,93,160,0.18), transparent 70%),
    radial-gradient(50% 60% at 60% 0%, rgba(255,138,76,0.13), transparent 72%);
  filter: blur(20px);
  opacity: 0.9;
  animation: auroraDrift 18s var(--ease-in-out) infinite alternate;
}
@keyframes auroraDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}
.hero__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.5; 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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
.hero__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.hero__copy { position: relative; z-index: 2; }
.hero__meta {
  display: flex; align-items: center;
  margin-bottom: var(--s-6);
  opacity: 0; animation: fadeUp 0.7s var(--ease) 0.2s both;
}
.hero__headline {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 6.6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-6);
}
.hero__headline .word, .hero__headline em {
  display: inline-block;
  opacity: 0; transform: translateY(0.5em);
  animation: wordIn 0.8s var(--ease) both;
}
.hero__headline em { font-style: italic; color: var(--cobalt-bright); }
.hero__line { display: block; }
.hero__line[data-line="1"] .word:nth-child(1) { animation-delay: 0.30s; }
.hero__line[data-line="1"] .word:nth-child(2) { animation-delay: 0.37s; }
.hero__line[data-line="2"] .word, .hero__line[data-line="2"] em { animation-delay: 0.50s; }
.hero__line[data-line="3"] .word:nth-child(1) { animation-delay: 0.64s; }
.hero__line[data-line="3"] .word:nth-child(2) { animation-delay: 0.71s; }
@keyframes wordIn { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { to { opacity: 1; } }

.hero__sub {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--bone-dim);
  max-width: 46ch;
  margin: 0 0 var(--s-7);
  opacity: 0; animation: fadeUp 0.8s var(--ease) 0.95s both;
}
.hero__ctas {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  opacity: 0; animation: fadeUp 0.8s var(--ease) 1.1s both;
}
.hero__assurance {
  margin-top: var(--s-5);
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--bone-mute);
  opacity: 0; animation: fadeIn 0.8s var(--ease) 1.4s both;
}
.hero__assurance strong { color: var(--bone-dim); font-weight: 500; }

/* Proof bar (lighthouse numbers reframed) */
.proofbar {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-line);
  display: flex; align-items: center; gap: clamp(20px, 4vw, 44px);
  flex-wrap: wrap;
  opacity: 0; animation: fadeUp 0.8s var(--ease) 1.5s both;
}
.proofbar__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-mute); }
.proofbar__pills { display: flex; gap: clamp(16px, 3vw, 36px); flex-wrap: wrap; }
.proofbar__pill { display: flex; flex-direction: column; gap: 2px; }
.proofbar__pill strong { font-family: var(--display); font-size: 26px; color: var(--bone-text); line-height: 1; }
.proofbar__pill span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone-mute); }

/* ============================================================
   INTERACTIVE DEVICE PREVIEW (hero right side, centrepiece)
   ============================================================ */
.preview {
  position: relative;
  z-index: 2;
  opacity: 0; animation: fadeUp 1s var(--ease) 0.7s both;
}
.preview__frame {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-rich));
  border: 1px solid var(--ink-line);
  padding: 12px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02) inset;
  transition: box-shadow 0.5s var(--ease);
}
.preview__frame::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 19px;
  padding: 1px;
  background: linear-gradient(140deg, var(--piece), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.55;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.preview__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 10px 12px;
}
.preview__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-line-2); }
.preview__url {
  margin-left: 10px;
  flex: 1;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--bone-mute);
  background: var(--ink); border: 1px solid var(--ink-line);
  border-radius: 100px;
  padding: 5px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.4s var(--ease);
}
.preview__screen {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3.05;
  background: #fff;
  container-type: inline-size;
}
.preview__pane {
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.02);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  pointer-events: none;
}
.preview__pane.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }

/* Tabs to switch businesses */
.preview__tabs {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin-top: var(--s-4);
}
.preview__tab {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--bone-dim);
  border: 1px solid var(--ink-line);
  background: var(--ink-rich);
  padding: 7px 12px;
  border-radius: 100px;
  transition: all 0.3s var(--ease);
  display: inline-flex; align-items: center; gap: 7px;
}
.preview__tab .preview__swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--tab-accent, var(--cobalt)); }
.preview__tab:hover { color: var(--bone-text); border-color: var(--ink-line-2); }
.preview__tab.is-active { color: var(--ink); background: var(--bone-2); border-color: var(--bone-2); }
.preview__caption {
  margin-top: var(--s-4);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.preview__caption-text { font-size: 14px; color: var(--bone-dim); }
.preview__caption-text strong { color: var(--bone-text); font-weight: 500; }
.preview__open {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--cobalt-bright);
  display: inline-flex; align-items: center; gap: 7px;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.preview__open:hover { gap: 12px; color: #fff; }

/* The mini-screens reuse a lightweight internal mock language */
.scr { width: 100%; height: 100%; font-family: var(--sans); }
.scr__nav { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; }
.scr__hero { padding: 22px 16px; }
.scr__strip { padding: 9px 16px; display: flex; gap: 8px; align-items: center; }

/* ============================================================
   MARQUEE (category band)
   ============================================================ */
.marquee {
  background: var(--ink);
  color: var(--bone-text);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  overflow: hidden;
  padding: clamp(18px, 2.4vw, 26px) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; gap: 0; width: max-content;
  animation: marqueeScroll 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--display);
  font-size: clamp(22px, 2.8vw, 34px);
  letter-spacing: -0.01em;
  color: var(--bone-dim);
  padding: 0 clamp(20px, 3vw, 40px);
  display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 40px);
  white-space: nowrap;
}
.marquee__item em { font-style: italic; color: var(--cobalt-bright); }
.marquee__item::after { content: "\2217"; color: var(--ink-line-2); font-family: var(--sans); font-size: 0.6em; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   INTRO / VALUE COLUMNS
   ============================================================ */
.intro__heading {
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.16;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.intro__heading em { font-style: italic; color: var(--cobalt); }
.is-dark .intro__heading em { color: var(--cobalt-bright); }

.intro__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.intro__col { padding-top: var(--s-5); border-top: 1.5px solid var(--ink-text); }
.is-dark .intro__col { border-top-color: var(--bone-text); }
.intro__col-title {
  font-family: var(--display);
  font-size: 23px;
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
}
.intro__col p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.6; }
.is-dark .intro__col p { color: var(--bone-dim); }
.intro__col-num { font-family: var(--mono); font-size: 11px; color: var(--cobalt); letter-spacing: 0.1em; }
.is-dark .intro__col-num { color: var(--cobalt-bright); }

/* ============================================================
   WORK GALLERY (home, dark)
   ============================================================ */
.gallery { background: var(--ink); color: var(--bone-text); position: relative; }
.gallery__inner { max-width: var(--container-wide); margin: 0 auto; padding: clamp(64px, 9vw, 132px) var(--gutter); }
.gallery__head { max-width: 60ch; margin-bottom: clamp(40px, 5vw, 64px); }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
}
.gallery__card {
  position: relative;
  grid-column: span 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-rich);
  border: 1px solid var(--ink-line);
  display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease), border-color 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.gallery__card:nth-child(1), .gallery__card:nth-child(6) { grid-column: span 3; }
.gallery__card--wide { grid-column: span 6 !important; }
.gallery__card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--card-accent) 55%, var(--ink-line));
  box-shadow: 0 30px 60px -28px rgba(0,0,0,0.75), 0 0 50px -20px var(--card-glow);
}
.gallery__visual {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--ink-line);
}
.gallery__visual > .scr, .gallery__visual > div { width: 100%; }
.gallery__glow {
  position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 50% 110%, var(--card-glow), transparent 70%);
  opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none;
}
.gallery__card:hover .gallery__glow { opacity: 0.5; }
.gallery__copy { padding: var(--s-5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gallery__type { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--card-accent); }
.gallery__name { font-family: var(--display); font-size: 26px; letter-spacing: -0.015em; }
.gallery__hint { color: var(--bone-dim); font-size: 14.5px; flex: 1; }
.gallery__links { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--ink-line); }
.gallery__open { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--bone-text); display: inline-flex; align-items: center; gap: 7px; transition: gap 0.3s var(--ease), color 0.3s var(--ease); }
.gallery__open:hover { gap: 12px; color: var(--card-accent); }
.gallery__cs { font-family: var(--mono); font-size: 11px; color: var(--bone-mute); transition: color 0.3s var(--ease); }
.gallery__cs:hover { color: var(--bone-dim); }
.gallery__corner {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone-mute);
  background: rgba(18,16,22,0.7); backdrop-filter: blur(6px);
  border: 1px solid var(--ink-line); border-radius: 100px;
  padding: 4px 9px;
}

/* ============================================================
   WORK PAGE: PIECES (re-skinned, light)
   ============================================================ */
.work-grid { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 120px); }
.piece { position: relative; }
.piece--feature { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(32px, 4vw, 72px); align-items: center; }
.piece--feature-reverse .piece__copy { order: 2; }
.piece--feature-reverse .piece__visual { order: 1; }
.piece-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); }
.piece--half { display: flex; flex-direction: column; gap: var(--s-5); }
.piece__concept-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--piece, var(--cobalt)); }
.piece__index { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); margin: var(--s-3) 0 var(--s-2); }
.piece__name { font-family: var(--display); font-size: clamp(30px, 3.6vw, 50px); line-height: 1.02; letter-spacing: -0.02em; }
.piece__type { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); margin: var(--s-2) 0 var(--s-4); }
.piece__concept { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }
.piece__concept em { font-style: italic; color: var(--ink-text); font-family: var(--display); font-size: 1.08em; }
.piece__deliverables { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s-5) 0; }
.piece__deliverables li { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft); border: 1px solid var(--bone-line); border-radius: 100px; padding: 6px 12px; background: var(--bone-2); }
.piece__footer { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-5); flex-wrap: wrap; }
.piece__demo-link { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: #fff; background: var(--piece, var(--cobalt)); padding: 11px 18px; border-radius: 100px; transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease); }
.piece__demo-link:hover { transform: translateY(-2px); box-shadow: 0 10px 26px var(--piece-glow); }
.piece__demo-icon { font-family: var(--mono); }
.piece__link { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); transition: gap 0.3s var(--ease), color 0.3s var(--ease); }
.piece__link:hover { color: var(--ink-text); gap: 11px; }

/* Device mocks (laptop / phone) re-skinned darker bezels */
.piece__visual { position: relative; }
.laptop { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
.laptop--small { max-width: 100%; }
.laptop--xl { max-width: 720px; }
.laptop__screen {
  background: #fff;
  border: 8px solid #1c1a22;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.4);
}
.laptop__base {
  height: 13px;
  background: linear-gradient(180deg, #2a2733, #1c1a22);
  border-radius: 0 0 12px 12px;
  margin: 0 auto;
  width: 112%;
  margin-left: -6%;
  position: relative;
}
.laptop__base::after { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16%; height: 4px; background: #14131a; border-radius: 0 0 6px 6px; }
.mock { font-family: var(--sans); }
.mock__nav { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; }
.mock__hero { padding: 18px 12px; }
.mock__row { display: flex; gap: 8px; padding: 8px 12px; }
.mock__dish { flex: 1; display: flex; justify-content: space-between; font-size: 9px; padding: 6px 0; border-top: 1px solid rgba(0,0,0,0.08); }

.phone { position: absolute; right: -6px; bottom: -22px; width: 23%; max-width: 130px; z-index: 3; }
.phone__screen { background: #fff; border: 6px solid #1c1a22; border-radius: 22px; overflow: hidden; aspect-ratio: 9/19; box-shadow: 0 24px 44px -20px rgba(0,0,0,0.5); }
.phone-mock { width: 100%; height: 100%; }

/* ============================================================
   STATS (about + reusable, count-up)
   ============================================================ */
.about__stats, .stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(48px, 6vw, 80px);
}
.about__stats > div, .stats > div { padding-top: var(--s-5); border-top: 1.5px solid var(--ink-text); }
.is-dark .about__stats > div, .is-dark .stats > div { border-top-color: var(--bone-text); }
.about__stat-num, .stat__num {
  font-family: var(--display);
  font-size: clamp(40px, 5.5vw, 68px);
  line-height: 1; letter-spacing: -0.02em;
}
.about__stat-num em, .stat__num em { font-style: normal; color: var(--cobalt); }
.is-dark .about__stat-num em, .is-dark .stat__num em { color: var(--cobalt-bright); }
.about__stat-label, .stat__label { font-size: 14px; color: var(--ink-soft); margin-top: var(--s-3); }
.is-dark .about__stat-label, .is-dark .stat__label { color: var(--bone-dim); }

/* ============================================================
   PAGE HEADER (non-home, light)
   ============================================================ */
.page-header {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(72px, 11vh, 132px) var(--gutter) clamp(36px, 5vh, 64px);
  border-bottom: 1px solid var(--bone-line);
}
.page-header__eyebrow { margin-bottom: var(--s-5); }
.page-header__title {
  font-family: var(--display);
  font-size: clamp(46px, 8vw, 108px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-5);
  max-width: 18ch;
}
.page-header__title em { color: var(--cobalt); font-style: italic; }
.page-header__sub { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-soft); max-width: 58ch; }

/* ============================================================
   PRICING (reframed, consultative)
   ============================================================ */
.pricing__intro {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(40px, 5vw, 64px) var(--gutter) 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end;
}
.pricing__intro-lead { font-family: var(--display); font-size: clamp(22px, 2.6vw, 32px); line-height: 1.22; letter-spacing: -0.015em; }
.pricing__intro-lead em { font-style: italic; color: var(--cobalt); }
.pricing__intro-note { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; }

/* Fit helper */
.fit {
  max-width: var(--container);
  margin: clamp(40px, 5vw, 56px) auto 0;
  padding: 0 var(--gutter);
}
.fit__card {
  background: var(--ink); color: var(--bone-text);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  position: relative; overflow: hidden;
}
.fit__card::before {
  content: ""; position: absolute; inset: -40% 40% auto -10%; height: 80%;
  background: radial-gradient(50% 60% at 30% 30%, rgba(58,87,240,0.3), transparent 70%);
  filter: blur(10px); pointer-events: none;
}
.fit__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone-mute); position: relative; }
.fit__q { font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); margin: var(--s-3) 0 var(--s-5); position: relative; }
.fit__opts { display: flex; flex-wrap: wrap; gap: 10px; position: relative; }
.fit__opt {
  font-family: var(--sans); font-size: 14px; color: var(--bone-dim);
  border: 1px solid var(--ink-line-2); border-radius: 100px;
  padding: 10px 18px; transition: all 0.3s var(--ease);
}
.fit__opt:hover { color: var(--bone-text); border-color: var(--bone-dim); }
.fit__opt.is-active { background: #fff; color: var(--ink); border-color: #fff; }
.fit__result {
  margin-top: var(--s-5); position: relative;
  font-size: 15.5px; color: var(--bone-dim);
  min-height: 1.5em;
  opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.fit__result.is-shown { opacity: 1; transform: translateY(0); }
.fit__result strong { color: #fff; font-weight: 600; }

.pricing__grid {
  max-width: var(--container);
  margin: clamp(40px, 5vw, 56px) auto 0;
  padding: 0 var(--gutter);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  align-items: stretch;
}
.tier {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bone-2);
  border: 1px solid var(--bone-line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.2vw, 30px);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.tier:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -28px rgba(20,16,30,0.3); border-color: var(--bone-line-2); }
.tier.is-suggested { border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt), 0 24px 50px -28px var(--piece-glow); }
.tier--featured { background: var(--ink); color: var(--bone-text); border-color: var(--ink); }
.tier--featured:hover { box-shadow: 0 30px 60px -28px rgba(0,0,0,0.6); }
.tier__badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--cobalt); color: #fff;
  padding: 5px 12px; border-radius: 100px; white-space: nowrap;
}
.tier__head { margin-bottom: var(--s-5); }
.tier__name { font-family: var(--display); font-size: 25px; letter-spacing: -0.01em; }
.tier__sub { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; }
.tier--featured .tier__sub { color: var(--bone-dim); }
.tier__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.tier__amount { font-family: var(--display); font-size: clamp(34px, 3.4vw, 44px); letter-spacing: -0.02em; line-height: 1; }
.tier__plus { font-size: 0.6em; vertical-align: super; color: var(--cobalt); }
.tier--featured .tier__plus { color: var(--cobalt-bright); }
.tier__currency { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }
.tier--featured .tier__currency { color: var(--bone-mute); }
.tier__monthly { font-size: 13.5px; color: var(--ink-soft); padding-bottom: var(--s-5); margin-bottom: var(--s-5); border-bottom: 1px solid var(--bone-line); }
.tier--featured .tier__monthly { color: var(--bone-dim); border-bottom-color: var(--ink-line); }
.tier__list { display: flex; flex-direction: column; gap: 11px; margin-bottom: var(--s-6); flex: 1; }
.tier__list li { font-size: 14px; color: var(--ink-soft); padding-left: 24px; position: relative; line-height: 1.45; }
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 7px; border-left: 1.5px solid var(--cobalt); border-bottom: 1.5px solid var(--cobalt);
  transform: rotate(-45deg);
}
.tier--featured .tier__list li { color: var(--bone-dim); }
.tier--featured .tier__list li::before { border-color: var(--cobalt-bright); }
.tier__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14px; font-weight: 500;
  padding: 13px 20px; border-radius: 100px;
  border: 1px solid var(--ink-text); color: var(--ink-text);
  transition: all 0.3s var(--ease);
}
.tier__cta:hover { background: var(--ink-text); color: var(--bone-2); transform: translateY(-2px); }
.tier__cta--filled { background: #fff; color: var(--ink); border-color: #fff; }
.tier__cta--filled:hover { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }

.pricing__flex {
  max-width: var(--container);
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: clamp(28px, 3vw, 44px) var(--gutter);
  display: flex; gap: clamp(20px, 3vw, 36px); align-items: flex-start;
  border-top: 1px solid var(--bone-line);
}
.pricing__flex-icon { font-family: var(--display); font-size: 48px; color: var(--cobalt); line-height: 1; flex-shrink: 0; }
.pricing__flex-title { font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.015em; margin-bottom: var(--s-3); }
.pricing__flex-title em { font-style: italic; color: var(--cobalt); }
.pricing__flex-body { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); max-width: 70ch; }
.pricing__note { max-width: var(--container); margin: var(--s-7) auto 0; padding: 0 var(--gutter); font-size: 13.5px; color: var(--ink-mute); font-family: var(--mono); letter-spacing: 0.02em; }
.pricing__note-em { display: block; margin-top: 6px; }

/* ============================================================
   PROCESS
   ============================================================ */
.process__steps { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 80px); counter-reset: step; }
.process__step { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.process__number { font-family: var(--display); font-size: clamp(48px, 7vw, 110px); line-height: 0.8; color: var(--bone-3); letter-spacing: -0.03em; -webkit-text-stroke: 1px var(--bone-line-2); }
.process__step:hover .process__number { color: var(--cobalt-pale); -webkit-text-stroke-color: var(--cobalt); transition: all 0.4s var(--ease); }
.process__content h2 { font-family: var(--display); font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.02em; margin-bottom: var(--s-3); }
.process__content > p { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 58ch; }
.process__detail { margin: var(--s-5) 0; padding: var(--s-5); background: var(--bone-2); border-left: 2px solid var(--cobalt); border-radius: 0 var(--radius) var(--radius) 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.process__detail strong { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-text); margin-bottom: var(--s-2); }
.process__time { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cobalt); display: inline-block; margin-top: var(--s-2); }
.process__step-image { margin-top: var(--s-5); aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ink-line); background: var(--ink); box-shadow: 0 26px 54px -32px rgba(18,16,22,0.55); }
.process__step-image svg { display: block; width: 100%; height: 100%; }

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.about__photo { aspect-ratio: 4/5; position: sticky; top: calc(var(--nav-h) + 20px); }
.about__copy p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.66; color: var(--ink-soft); margin: 0 0 var(--s-5); }
.about__copy p:first-child { font-family: var(--display); font-size: clamp(21px, 2vw, 27px); line-height: 1.4; color: var(--ink-text); letter-spacing: -0.01em; }
.about__signature { margin-top: var(--s-6); }
.about__signature span:first-child { font-family: var(--display); font-style: italic; font-size: 30px; color: var(--ink-text); display: block; }
.about__signature-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; display: block; }
.about__workspace { aspect-ratio: 16/9; overflow: hidden; }
.about__photo img, .about__workspace img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius: var(--radius); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact__primary, .contact__secondary { background: var(--bone-2); border: 1px solid var(--bone-line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); }
.contact__primary { grid-row: span 2; }
.contact__secondary { grid-column: 2; }
.contact__tertiary { grid-column: 2; background: var(--ink); color: var(--bone-text); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); }
.contact__label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cobalt); margin-bottom: var(--s-3); }
.contact__tertiary .contact__label { color: var(--cobalt-bright); }
.contact__option-title { font-family: var(--display); font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.015em; margin-bottom: var(--s-3); }
.contact__primary p, .contact__secondary p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin-bottom: var(--s-5); }
.contact__email-line { margin-top: var(--s-3); }
.contact__email { font-family: var(--display); font-size: clamp(20px, 2.2vw, 28px); color: var(--bone-text); border-bottom: 1px solid var(--ink-line-2); padding-bottom: 4px; transition: border-color 0.3s var(--ease); }
.contact__email:hover { border-color: var(--cobalt-bright); }
.cal-embed-wrap { min-height: 560px; border-radius: var(--radius); overflow: hidden; background: var(--ink); }

/* Form */
.contact-form { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea {
  font-family: var(--sans); font-size: 15px;
  background: var(--bone); border: 1px solid var(--bone-line);
  border-radius: 10px; padding: 12px 14px; color: var(--ink-text);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-pale); }
.field input.is-valid, .field textarea.is-valid { border-color: #2fa56a; }
.field input.is-invalid, .field textarea.is-invalid { border-color: var(--ph); }
.field__error { font-size: 12px; color: var(--ph-deep); min-height: 1em; opacity: 0; transition: opacity 0.2s ease; }
.field__error.visible { opacity: 1; }
.field__hint { font-size: 12px; color: var(--ink-mute); }
.contact-form__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--cobalt); color: #fff;
  padding: 14px 24px; border-radius: 100px; font-size: 15px; font-weight: 500;
  margin-top: var(--s-2);
  transition: background 0.3s var(--ease), transform 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.contact-form__submit:hover:not(:disabled) { background: var(--cobalt-deep); transform: translateY(-2px); box-shadow: 0 12px 28px var(--piece-glow); }
.contact-form__submit:disabled { opacity: 0.7; cursor: progress; }
.contact-form__submit-icon { transition: transform 0.3s var(--ease); }
.contact-form__submit:hover:not(:disabled) .contact-form__submit-icon { transform: translateX(4px); }
.contact-form__feedback { font-size: 14px; min-height: 1em; }
.contact-form__feedback.is-success { color: #2fa56a; }
.contact-form__feedback.is-error { color: var(--ph-deep); }

/* ============================================================
   FAQ
   ============================================================ */
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-bottom: 1px solid var(--bone-line); }
.faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: clamp(20px, 2.4vw, 30px) 0;
  font-family: var(--display); font-size: clamp(19px, 2vw, 25px); letter-spacing: -0.01em;
  transition: color 0.25s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; font-family: var(--sans); font-weight: 300; font-size: 28px; color: var(--cobalt);
  flex-shrink: 0; transition: transform 0.35s var(--ease);
}
.faq__item[open] summary { color: var(--cobalt); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:hover { color: var(--cobalt); }
.faq__answer { padding-bottom: clamp(20px, 2.4vw, 30px); max-width: 70ch; animation: faqOpen 0.4s var(--ease); }
.faq__answer p { font-size: 15.5px; line-height: 1.66; color: var(--ink-soft); margin: 0 0 var(--s-4); }
.faq__answer p:last-child { margin-bottom: 0; }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   CASE STUDY (re-skinned, inherits per-page --case-accent)
   ============================================================ */
.case { --case-accent: var(--cobalt); --case-bg: var(--bone-3); }
.case__hero { max-width: var(--container); margin: 0 auto; padding: clamp(64px, 9vh, 120px) var(--gutter) clamp(40px, 5vw, 64px); }
.case__hero-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: var(--s-5); }
.case__hero-meta strong { color: var(--case-accent); }
.case__hero-title { font-family: var(--display); font-size: clamp(44px, 8vw, 104px); line-height: 0.96; letter-spacing: -0.03em; max-width: 16ch; }
.case__hero-title em { font-style: italic; color: var(--case-accent); }
.case__hero-tagline { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-soft); max-width: 50ch; margin-top: var(--s-5); }
.case__hero-cta-row { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-6); flex-wrap: wrap; }
.case__hero-cta-primary { display: inline-flex; align-items: center; gap: 9px; background: var(--case-accent); color: #fff; padding: 13px 22px; border-radius: 100px; font-size: 15px; font-weight: 500; transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease); }
.case__hero-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px color-mix(in srgb, var(--case-accent) 40%, transparent); }
.case__hero-cta-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); }
.case__brief { max-width: var(--container); margin: 0 auto; padding: clamp(32px, 4vw, 56px) var(--gutter); border-top: 1px solid var(--bone-line); border-bottom: 1px solid var(--bone-line); display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 64px); }
.case__brief-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.case__brief-text { font-family: var(--display); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; letter-spacing: -0.015em; color: var(--ink-text); }
.case__mockup-section { background: var(--ink); padding: clamp(48px, 7vw, 100px) var(--gutter); }
.case__mockup-section--themed { background: var(--case-bg); }
.case__mockup-inner { max-width: var(--container); margin: 0 auto; }
.case__mockup-title { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-mute); margin-bottom: var(--s-6); }
.case__mockup-section--themed .case__mockup-title { color: var(--ink-soft); }
.case__mockup-stage { display: flex; justify-content: center; }
.case__palette { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.case__swatch { flex: 1; min-width: 130px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--bone-line); opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.case__swatch.visible { opacity: 1; transform: translateY(0); }
.case__swatch-hex { height: 96px; }
.case__swatch-name { font-family: var(--mono); font-size: 12px; padding: 10px 12px 2px; }
.case__swatch-role { font-size: 12px; color: var(--ink-soft); padding: 0 12px 12px; }
.case__type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.case__type-sample { font-size: clamp(30px, 4vw, 56px); line-height: 1.05; }
.case__type-spec { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); margin-bottom: var(--s-3); }
.case__type-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--case-accent); margin-bottom: var(--s-2); }
.case__type-rationale { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); }
.case__notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 3vw, 40px); }
.case__note { padding-top: var(--s-4); border-top: 1.5px solid var(--ink-text); }
.case__note-title { font-family: var(--display); font-size: 21px; margin-bottom: var(--s-2); }
.case__note p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.case__walkthrough { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.case__walkthrough-mockup { position: sticky; top: calc(var(--nav-h) + 24px); }
.case__walkthrough-step { padding: clamp(28px, 5vw, 64px) 0; opacity: 0.4; transition: opacity 0.4s var(--ease); border-bottom: 1px solid var(--bone-line); }
.case__walkthrough-step.is-active { opacity: 1; }
.case__walkthrough-num { font-family: var(--mono); font-size: 12px; color: var(--case-accent); letter-spacing: 0.1em; }
.case__walkthrough-title { font-family: var(--display); font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.02em; margin: var(--s-2) 0 var(--s-3); }
.case__walkthrough-desc { font-size: 15.5px; line-height: 1.62; color: var(--ink-soft); }
.case__nav { max-width: var(--container); margin: 0 auto; padding: clamp(40px, 6vw, 80px) var(--gutter); display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--bone-line); }
.case__nav-link { display: flex; flex-direction: column; gap: 6px; transition: color 0.3s var(--ease); }
.case__nav-link--next { text-align: right; align-items: flex-end; }
.case__nav-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.case__nav-name { font-family: var(--display); font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -0.015em; }
.case__nav-link:hover { color: var(--cobalt); }
.case__note-title, .case__brief-text { letter-spacing: -0.01em; }

/* ============================================================
   CTA STRIP (dark)
   ============================================================ */
.cta-strip { background: var(--ink); color: var(--bone-text); position: relative; overflow: hidden; }
.cta-strip::before {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 120%;
  background: radial-gradient(50% 60% at 50% 100%, rgba(58,87,240,0.28), transparent 70%);
  pointer-events: none;
}
.cta-strip__inner { max-width: var(--container-narrow); margin: 0 auto; padding: clamp(72px, 10vw, 140px) var(--gutter); text-align: center; position: relative; }
.cta-strip__heading { font-family: var(--display); font-size: clamp(34px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: var(--s-5); }
.cta-strip__heading em { font-style: italic; color: var(--cobalt-bright); }
.cta-strip__body { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--bone-dim); max-width: 50ch; margin: 0 auto var(--s-7); }
.cta-strip__btns { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }
.cta-strip__btn-primary { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); padding: 16px 28px; border-radius: 100px; font-size: 15px; font-weight: 500; transition: transform 0.25s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease); }
.cta-strip__btn-primary:hover { background: var(--cobalt); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 34px var(--piece-glow); }
.cta-strip__btn-primary svg { transition: transform 0.3s var(--ease); }
.cta-strip__btn-primary:hover svg { transform: translateX(4px); }
.cta-strip__btn-secondary { display: inline-flex; align-items: center; padding: 16px 28px; border: 1px solid var(--ink-line-2); color: var(--bone-text); border-radius: 100px; font-size: 15px; transition: all 0.3s var(--ease); }
.cta-strip__btn-secondary:hover { border-color: var(--bone-text); }

/* ============================================================
   FOOTER (dark, big wordmark)
   ============================================================ */
.footer { background: var(--ink); color: var(--bone-text); border-top: 1px solid var(--ink-line); }
.footer__inner { max-width: var(--container); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(32px, 4vw, 48px); }
.footer__wordmark {
  font-family: var(--display);
  font-size: clamp(48px, 11vw, 150px);
  line-height: 0.9; letter-spacing: -0.03em;
  color: var(--bone-text);
  margin-bottom: clamp(40px, 5vw, 64px);
  position: relative;
}
.footer__wordmark em { font-style: italic; color: var(--cobalt-bright); }
.footer__brand { display: none; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--ink-line); }
.footer__col h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-mute); margin-bottom: var(--s-4); }
.footer__col a { display: block; color: var(--bone-dim); font-size: 15px; padding: 5px 0; transition: color 0.25s var(--ease); width: fit-content; }
.footer__col a:hover { color: var(--bone-text); }
.footer__legal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: var(--s-6); font-family: var(--mono); font-size: 12px; color: var(--bone-mute); letter-spacing: 0.02em; }
.footer__sep { opacity: 0.6; }
.footer .placeholder { color: #F25CA5; background: rgba(242,92,165,0.12); border-color: var(--ph); }

/* ============================================================
   MOBILE FLOATING CTA
   ============================================================ */
.mobile-cta {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: var(--z-mobilecta);
  display: none;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(18,16,22,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--ink-line);
  gap: 10px;
}
.mobile-cta a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 100px; font-size: 15px; font-weight: 500; }
.mobile-cta__primary { background: var(--cobalt); color: #fff; }
.mobile-cta__secondary { border: 1px solid var(--ink-line-2); color: var(--bone-text); flex: 0 0 auto; padding: 14px 18px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 64px); }
  .preview { max-width: 540px; margin: 0 auto; width: 100%; }
  .pricing__grid { grid-template-columns: repeat(2, 1fr); }
  .pricing__intro { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (max-width: 960px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__card, .gallery__card--wide { grid-column: span 1 !important; }
  .piece--feature, .piece--feature-reverse { grid-template-columns: 1fr; gap: var(--s-6); }
  .piece--feature-reverse .piece__copy, .piece--feature-reverse .piece__visual { order: 0; }
  .piece-row { grid-template-columns: 1fr; gap: clamp(40px, 8vw, 64px); }
  .about__grid { grid-template-columns: 1fr; }
  .about__photo { position: static; max-width: 420px; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__primary, .contact__secondary, .contact__tertiary { grid-column: 1; grid-row: auto; }
  .case__walkthrough { grid-template-columns: 1fr; }
  .case__walkthrough-mockup { position: static; }
  .case__type-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .intro__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .about__stats, .stats { grid-template-columns: 1fr; }
  .process__step { grid-template-columns: 1fr; gap: var(--s-3); }
  .process__number { font-size: clamp(40px, 18vw, 72px); }
  .pricing__grid { grid-template-columns: 1fr; max-width: 460px; }
  .pricing__flex { flex-direction: column; gap: var(--s-4); }
  .case__brief { grid-template-columns: 1fr; gap: var(--s-3); }
  .mobile-cta { display: flex; }
  body.has-mobile-cta { padding-bottom: 84px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .preview__bar { padding: 4px 6px 10px; }
}
@media (max-width: 460px) {
  .footer__cols { grid-template-columns: 1fr; }
  .hero__ctas .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   CASE STUDY: small polish + compatibility hooks
   ============================================================ */
.case__hero-title .underline {
  text-decoration: underline;
  text-decoration-color: var(--case-accent, var(--cobalt));
  text-decoration-thickness: 2px;
  text-underline-offset: clamp(6px, 1.2vw, 12px);
}
.case__hero-cta-icon, .case__nav-arrow { display: inline-block; transition: transform 0.3s var(--ease); }
.case__hero-cta-primary:hover .case__hero-cta-icon { transform: translateX(4px); }
.case__nav-link--next:hover .case__nav-arrow { transform: translateX(4px); }
.case__nav-link--prev:hover .case__nav-arrow { transform: translateX(-4px); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left, .reveal-right, .word-reveal .word, .word-reveal em,
  .hero__headline .word, .hero__headline em, .case__swatch, .preview, .hero__sub,
  .hero__ctas, .hero__meta, .proofbar, .hero__assurance { opacity: 1 !important; transform: none !important; }
  .hero__aurora, .marquee__track { animation: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .nav, .mobile-cta, .cursor-dot, .cursor-ring, .scroll-progress, .hero__aurora, .hero__grain { display: none !important; }
  .is-dark, .hero, .gallery, .cta-strip, .footer { background: #fff !important; color: #000 !important; }
}