/* =========================================================================
   DIGIMARKZ — A two-person web design studio
   Editorial-architectural minimalism · Manrope · Indigo #2D3A8F
   ========================================================================= */

/* ───── 0. Reset / base ───── */
*,
*::before,
*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ───── 1. Tokens ───── */
:root{
  /* Brand palette */
  --c-white:#FFFFFF;
  --c-cloud:#EDEFF7;
  --c-smoke:#D3D6E0;
  --c-steel:#BCBFCC;
  --c-space:#9DA2B3;
  --c-graphite:#6E7180;
  --c-arsenic:#40424D;
  --c-phantom:#1E1E24;
  --c-black:#000000;
  --c-indigo:#2D3A8F;
  --c-indigo-vivid:#334AC4;
  --grad: linear-gradient(135deg, #334AC4 0%, #0a0c1a 60%, #000000 100%);
  --grad-flat: linear-gradient(120deg, #334AC4 0%, #2D3A8F 50%, #1a1f5e 100%);

  /* Type */
  --f-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type scale (fluid 64/48/32/24/18/16) */
  --t-h1: clamp(2.75rem, 5.6vw + 0.5rem, 6rem);     /* H1: ~64–96 */
  --t-h2: clamp(2.25rem, 3.6vw + 0.5rem, 4.25rem);  /* H2: ~48–68 */
  --t-h3: clamp(1.5rem, 1.4vw + 1rem, 2.25rem);     /* Sub1: 32 */
  --t-h4: clamp(1.125rem, 0.6vw + 1rem, 1.5rem);    /* Sub2: 24 */
  --t-p1: clamp(1rem, 0.4vw + 0.95rem, 1.125rem);   /* 18 */
  --t-p2: 1rem;                                     /* 16 */
  --t-meta: 0.75rem;                                /* 12 */

  /* Layout */
  --gut: clamp(1.25rem, 3.5vw, 3.5rem);
  --maxw: 1480px;
  --hairline: rgba(30,30,36,.12);
  --hairline-dark: rgba(255,255,255,.14);

  /* Easing */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

html, body{
  background: var(--c-white);
  color: var(--c-phantom);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection{ background: var(--c-indigo); color: var(--c-white); }

/* Layout helpers */
.section-head{
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--c-graphite);
  padding: 0 var(--gut);
  max-width: var(--maxw);
  margin: 0 auto 2.5rem;
}
.section-head::after{
  content:"";
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.section-num{ font-weight: 600; color: var(--c-indigo); }

.ital{ font-style: italic; font-weight: 300; color: var(--c-indigo); }

/* ===== utility — meta line ===== */
.meta-line{
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--c-graphite);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 500;
}
.meta-line .sep{ opacity: .4; }
.meta-line--right{ justify-self: end; }

.dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-indigo);
  box-shadow: 0 0 0 0 rgba(45,58,143,.45);
  animation: pulse 2.4s var(--ease) infinite;
  display: inline-block;
}
.dot--white{ background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(45,58,143,.5); }
  60%  { box-shadow: 0 0 0 12px rgba(45,58,143,0); }
  100% { box-shadow: 0 0 0 0 rgba(45,58,143,0); }
}

/* ───── 2. Loader ───── */
.loader{
  position: fixed; inset: 0;
  background: var(--c-black);
  z-index: 999;
  display: grid;
  place-items: center;
  transition: opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity: 0; visibility: hidden; }
.loader__inner{
  display: grid; gap: 2rem;
  place-items: center;
  width: min(420px, 80vw);
}
.loader__mark{
  width: 80px; height: auto;
  animation: markFloat 2s var(--ease) infinite;
}
@keyframes markFloat{
  0%,100%{ transform: translateY(0); opacity:.9; }
  50%   { transform: translateY(-6px); opacity: 1; }
}
.loader__bar{
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.loader__bar span{
  display: block; width: 0%; height: 100%;
  background: linear-gradient(90deg, #334AC4, #fff);
  transition: width .15s linear;
}
.loader__meta{
  display: flex; justify-content: space-between;
  width: 100%;
  font-size: var(--t-meta);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  font-weight: 500;
}

/* ───── 3. Cursor ───── */
.cursor{ position: fixed; top:0; left:0; pointer-events: none; z-index: 9999; mix-blend-mode: difference; }
.cursor__dot, .cursor__ring{
  position: absolute; top: 0; left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, width, height, opacity;
}
.cursor__dot{ width: 6px; height: 6px; background: #fff; }
.cursor__ring{ width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.7); transition: width .25s var(--ease), height .25s var(--ease), opacity .25s; }
body.is-hover .cursor__ring{ width: 60px; height: 60px; opacity: 1; }
body.is-hover .cursor__dot{ opacity: 0; }
@media (hover: none) { .cursor{ display: none; } }

/* ───── 4. Buttons ───── */
.btn{
  --bgc: var(--c-phantom);
  --fgc: var(--c-white);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .9rem 1.4rem;
  font-size: var(--t-p2);
  font-weight: 500;
  letter-spacing: -0.005em;
  background: var(--bgc);
  color: var(--fgc);
  border-radius: 999px;
  transition: transform .35s var(--ease-out), background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
  will-change: transform;
}
.btn svg{ transition: transform .35s var(--ease-out); }
.btn:hover svg{ transform: translate(2px,-2px); }
.btn--solid{ --bgc: var(--c-phantom); --fgc: var(--c-white); }
.btn--solid:hover{ --bgc: var(--c-indigo); }
.btn--ghost{ --bgc: transparent; --fgc: var(--c-phantom); border: 1px solid var(--hairline); }
.btn--ghost:hover{ --bgc: var(--c-cloud); }
.btn--white{ --bgc: var(--c-white); --fgc: var(--c-phantom); }
.btn--white:hover{ --bgc: var(--c-cloud); }
.btn--pill{ padding: .75rem 1.15rem; font-size: .9rem; --bgc: var(--c-phantom); --fgc: var(--c-white); }
.btn--block{ display: flex; justify-content: center; width: 100%; }
.btn--lg{ padding: 1.1rem 1.7rem; font-size: var(--t-p1); }

/* magnetic targets get a subtle inner translate via JS — the CSS just preps */
[data-magnetic]{ transition: transform .35s var(--ease-out); }

/* ───── 5. Nav ───── */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 1.1rem var(--gut);
  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0);
  transition: background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s, padding .35s var(--ease);
}
.nav.is-stuck{
  background: rgba(255,255,255,.78);
  border-bottom-color: var(--hairline);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  padding-top: .7rem; padding-bottom: .7rem;
}
.nav__brand{
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
}
.nav__logo{
  height: 28px;
  width: auto;
  transition: opacity .5s var(--ease);
}
.nav__logo--grad{
  position: absolute;
  inset: 0;
  opacity: 0;
}
.nav.is-stuck .nav__logo--dark{ opacity: 0; }
.nav.is-stuck .nav__logo--grad{ opacity: 1; }
.nav__links{
  display: flex; justify-content: center; gap: 2.4rem;
  font-size: .95rem;
  font-weight: 500;
}
.nav__links a{
  position: relative; padding: .25rem 0;
  color: var(--c-arsenic);
  transition: color .25s;
}
.nav__links a::after{
  content:""; position: absolute; left:0; bottom: -2px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav__links a:hover{ color: var(--c-phantom); }
.nav__links a:hover::after{ transform: scaleX(1); transform-origin: left; }

@media (max-width: 880px){
  .nav__links{ display: none; }
}

/* ───── 6. Hero ───── */
.hero{
  position: relative;
  min-height: 100svh;
  padding: clamp(7rem, 11vw, 9rem) var(--gut) 4rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__meta{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
  padding-top: .25rem;
}
.hero__title{
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}
.display{
  font-size: var(--t-h1);
  line-height: .96;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--c-phantom);
}
.display .line{
  display: block;
  overflow: hidden;
  padding-bottom: .22em;
  margin-bottom: -.12em;
}
.display .line > span{
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.display.is-in .line > span{ transform: translateY(0); }
.display .line:nth-child(1) > span{ --d: 60ms; }
.display .line:nth-child(2) > span{ --d: 180ms; }
.display .line:nth-child(3) > span{ --d: 320ms; }
.display .line--accent > span{
  background: var(--grad-flat);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 300;
}
.display .line--accent i{
  font-style: normal;
  color: var(--c-indigo);
}

.hero__bottom{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  max-width: var(--maxw);
  width: 100%;
  margin: 0 auto;
}
.hero__sub{ max-width: 38ch; }
.hero__sub p{
  font-size: var(--t-p1);
  color: var(--c-arsenic);
  margin-bottom: 1.75rem;
  line-height: 1.55;
}
.hero__ctas{ display: flex; gap: .75rem; flex-wrap: wrap; }

.hero__index{
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
  display: grid;
  gap: .55rem;
  font-size: var(--t-p2);
  font-weight: 500;
  color: var(--c-arsenic);
  max-width: 360px;
  justify-self: end;
  width: 100%;
}
.index-row{
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: baseline;
  border-bottom: 1px dashed var(--hairline);
  padding: .35rem 0;
  transition: padding .3s var(--ease), color .25s;
}
.index-row:hover{ padding-left: .35rem; color: var(--c-indigo); }
.index-row > span:first-child{
  font-variant-numeric: tabular-nums;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--c-graphite);
  font-weight: 600;
}

.hero__scroll{
  position: absolute;
  bottom: 1.5rem; left: var(--gut);
  display: flex; align-items: center;
  gap: .75rem;
  font-size: var(--t-meta);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-graphite);
  font-weight: 500;
}
.hero__scroll svg{ animation: bob 2.2s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(4px);} }

/* gradient orb */
.hero__orb{
  position: absolute;
  z-index: -1;
  top: 30%;
  right: -10%;
  width: 70vw;
  height: 70vw;
  max-width: 1100px; max-height: 1100px;
  background:
    radial-gradient(closest-side, rgba(51,74,196,.55), rgba(51,74,196,0) 70%),
    radial-gradient(closest-side, rgba(45,58,143,.4), rgba(45,58,143,0) 75%);
  filter: blur(40px);
  border-radius: 50%;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform .6s var(--ease-out);
  pointer-events: none;
  opacity: .85;
  animation: orbDrift 22s var(--ease) infinite alternate;
}
@keyframes orbDrift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(40px,-30px,0) scale(1.06); }
}
.hero__grain{
  position: absolute; inset: 0;
  z-index: -1;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
  opacity: .35;
  mix-blend-mode: multiply;
  pointer-events: none;
}

@media (max-width: 760px){
  .hero__bottom{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero__index{ justify-self: start; max-width: none; }
}

/* ───── 7. Trusted marquee ───── */
.trusted{
  padding: 4rem 0 5rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--c-cloud);
}
.trusted__label{
  display: flex; align-items: center; gap: 1rem;
  padding: 0 var(--gut) 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: var(--t-meta);
  color: var(--c-graphite);
  font-weight: 500;
}
.trusted__label .hairline{
  flex: 1; height: 1px; background: var(--hairline);
}
.marquee{
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display: flex; gap: 3rem;
  align-items: center;
  width: max-content;
  animation: scrollX 38s linear infinite;
  font-family: var(--f-sans);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -.02em;
  color: var(--c-phantom);
}
.marquee__track i{
  color: var(--c-indigo);
  font-style: normal;
  font-size: .6em;
  opacity: .65;
}
@keyframes scrollX{ to { transform: translateX(-50%); } }

/* ───── 8. Manifesto ───── */
.manifesto{
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem);
}
.manifesto__body{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.manifesto__lede{
  font-size: var(--t-h3);
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--c-phantom);
  max-width: 32ch;
  margin-bottom: 5rem;
}
.manifesto__lede em{
  font-style: italic; font-weight: 300; color: var(--c-indigo);
}
.manifesto__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  border-top: 1px solid var(--hairline);
  padding-top: 3rem;
}
.manifesto__cell h3{
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: .9rem;
}
.manifesto__cell p{
  font-size: var(--t-p2);
  color: var(--c-arsenic);
  max-width: 32ch;
}
.manifesto__cell em{ font-style: italic; color: var(--c-indigo); font-weight: 400; }
@media (max-width: 880px){
  .manifesto__grid{ grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ───── 9. Capabilities ───── */
.services{
  padding: clamp(4rem, 9vw, 8rem) 0;
  background: var(--c-phantom);
  color: var(--c-white);
}
.services .section-head{ color: rgba(255,255,255,.55); }
.services .section-head::after{ background: var(--hairline-dark); }
.services .section-num{ color: var(--c-cloud); }
.services__heading{
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  max-width: var(--maxw);
  margin: 0 auto 4rem;
  padding: 0 var(--gut);
  max-width: 22ch;
}
.services__heading .ital{ color: rgba(255,255,255,.55); }

.cap-list{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  border-top: 1px solid var(--hairline-dark);
}
.cap-row{
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr 2fr 40px;
  gap: 2rem;
  align-items: baseline;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--hairline-dark);
  cursor: pointer;
  transition: padding .35s var(--ease);
}
.cap-row:hover{ padding-left: 1rem; }
.cap-row__num{
  font-size: .9rem; font-weight: 600;
  letter-spacing: .14em;
  color: var(--c-space);
  font-variant-numeric: tabular-nums;
}
.cap-row__name{
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.cap-row__desc{
  font-size: var(--t-p2);
  color: var(--c-steel);
  max-width: 50ch;
}
.cap-row__cta{
  font-size: 1.25rem; color: var(--c-space);
  text-align: right;
  transition: color .25s, transform .35s var(--ease);
}
.cap-row:hover .cap-row__cta{ color: var(--c-white); transform: translate(4px,-4px); }

.cap-row__media{
  position: absolute;
  right: 18%; top: 50%;
  width: 320px; aspect-ratio: 4 / 3;
  transform: translateY(-50%) translateY(8px);
  opacity: 0;
  pointer-events: none;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  transition: opacity .35s var(--ease), transform .5s var(--ease-out);
}
.cap-row__media img{
  width: 100%; height: 100%; object-fit: cover;
}
.cap-row:hover .cap-row__media{
  opacity: 1;
  transform: translateY(-50%) translateY(0);
}
@media (max-width: 880px){
  .cap-row{ grid-template-columns: 50px 1fr 32px; gap: 1rem; padding: 1.4rem 0; }
  .cap-row__desc{ display: none; }
  .cap-row__media{ display: none; }
}

/* ───── 10. Work ───── */
.work{
  padding: clamp(5rem, 10vw, 9rem) 0;
}
.work__heading{
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: var(--maxw);
  margin: 0 auto 4rem;
  padding: 0 var(--gut);
}
.work__grid{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 3vw, 2.5rem);
}
.case--lg{ grid-column: span 12; }
.case--md{ grid-column: span 6; }
.case__link{
  display: block;
}
.case__media{
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--c-cloud);
  overflow: hidden;
  border-radius: 4px;
}
.case--md .case__media{ aspect-ratio: 4 / 3; }
.case__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter .5s;
}
.case__link:hover .case__media img{
  transform: scale(1.04);
}
.case__meta{
  display: grid;
  gap: .55rem;
  padding: 1.25rem 0 0;
}
.case__row{
  display: flex; justify-content: space-between;
  font-size: var(--t-meta);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-graphite);
  font-weight: 500;
}
.case__client{ color: var(--c-phantom); }
.case__title{
  font-size: clamp(1.4rem, 2.1vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 28ch;
}
.case__tags{
  display: flex; gap: .5rem; flex-wrap: wrap;
  font-size: var(--t-meta);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-graphite);
  font-weight: 500;
  margin-top: .35rem;
}
.case__tags li{
  padding: .35rem .7rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

.work__foot{
  display: flex; justify-content: center;
  margin-top: 4rem;
  padding: 0 var(--gut);
}
.work__placeholder{
  margin: 0 var(--gut);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 4rem);
  display: flex; justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,.015), transparent);
}
.work__placeholder-inner{
  max-width: 58ch;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1.5rem;
}
.work__placeholder-tag{
  display: inline-block;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .45rem .85rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .75;
}
.work__placeholder-body{
  font-size: var(--t-p1);
  line-height: 1.5;
  opacity: .85;
}
.testimonials .work__placeholder{ background: transparent; }
.link-arrow{
  display: inline-flex; align-items: center; gap: 1rem;
  font-size: var(--t-p1);
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: .35rem;
}
.link-arrow svg{ transition: transform .35s var(--ease); }
.link-arrow:hover svg{ transform: translateX(6px); }

@media (max-width: 760px){
  .case--md{ grid-column: span 12; }
}

/* ───── 11. Stats ───── */
.stats{
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--c-cloud);
  border-block: 1px solid var(--hairline);
}
.stats__grid{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
.stat__num{
  font-size: clamp(3rem, 7vw, 6.5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--c-phantom);
  margin-bottom: .75rem;
  display: flex; align-items: baseline; gap: .15rem;
}
.stat__label{
  font-size: var(--t-p2);
  color: var(--c-arsenic);
  border-top: 1px solid var(--hairline);
  padding-top: .75rem;
  max-width: 22ch;
}
@media (max-width: 760px){
  .stats__grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ───── 12. Process ───── */
.process{
  padding: clamp(5rem, 10vw, 9rem) 0;
}
.process__heading{
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: var(--maxw);
  margin: 0 auto 4rem;
  padding: 0 var(--gut);
}
.process__list{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  border-top: 1px solid var(--hairline);
}
.step{
  display: grid;
  grid-template-columns: 110px 1.3fr 130px 2fr;
  gap: 2rem;
  align-items: start;
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.step__num{
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-indigo);
  font-variant-numeric: tabular-nums;
}
.step__name{
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.step__week{
  font-size: var(--t-meta);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-graphite);
  font-weight: 500;
  padding-top: .8rem;
}
.step__desc{
  font-size: var(--t-p1);
  color: var(--c-arsenic);
  max-width: 42ch;
}
@media (max-width: 880px){
  .step{ grid-template-columns: 60px 1fr; gap: .75rem 1.5rem; padding: 1.75rem 0; }
  .step__num{ grid-row: span 3; font-size: 2.25rem; }
  .step__week{ padding-top: 0; }
}

/* ───── 13. Testimonials ───── */
.testimonials{
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--c-phantom);
  color: var(--c-white);
  overflow: hidden;
}
.testimonials .section-head{ color: rgba(255,255,255,.55); }
.testimonials .section-head::after{ background: var(--hairline-dark); }
.testimonials .section-num{ color: var(--c-cloud); }

.t-marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.t-marquee__track{
  display: flex; gap: 1.5rem;
  width: max-content;
  animation: scrollX 50s linear infinite;
  padding: 0 1rem;
}
.t-marquee:hover .t-marquee__track{ animation-play-state: paused; }
.t-card{
  flex: 0 0 clamp(280px, 40vw, 460px);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 2rem;
  display: grid; gap: 2rem;
  align-content: space-between;
  min-height: 320px;
}
.t-card blockquote p{
  font-size: var(--t-h4);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.t-card figcaption{
  display: flex; align-items: center; gap: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1rem;
}
.t-card__avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-arsenic);
  flex: 0 0 auto;
}
.t-card__avatar img{ width: 100%; height: 100%; object-fit: cover; }
.t-card figcaption strong{
  display: block; font-weight: 600; font-size: 1rem;
}
.t-card figcaption span{
  font-size: var(--t-meta); color: var(--c-steel);
  letter-spacing: .14em; text-transform: uppercase;
}

/* ───── 14. Tiers ───── */
.tiers{
  padding: clamp(5rem, 10vw, 9rem) 0;
}
.tiers__heading{
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: var(--maxw);
  margin: 0 auto 4rem;
  padding: 0 var(--gut);
}
.tiers__grid{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.tier{
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 2rem 1.75rem;
  display: grid;
  gap: 2rem;
  align-content: start;
  background: var(--c-white);
  transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s;
}
.tier:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px rgba(45,58,143,.25);
  border-color: var(--c-indigo);
}
.tier--feature{
  background: var(--c-phantom);
  color: var(--c-white);
  border-color: var(--c-phantom);
}
.tier--feature .tier__num{ color: var(--c-cloud); }
.tier--feature .tier__sub,
.tier--feature .tier__from,
.tier--feature .tier__time{ color: var(--c-steel); }
.tier--feature .tier__feat li{ border-color: rgba(255,255,255,.1); color: var(--c-cloud); }
.tier--feature .tier__feat li::before{ background: var(--c-white); }
.tier--feature:hover{ box-shadow: 0 30px 60px -25px rgba(0,0,0,.6); }

.tier__flag{
  position: absolute; top: 1rem; right: 1rem;
  font-size: var(--t-meta);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-cloud);
  background: var(--c-indigo);
  padding: .35rem .65rem;
  border-radius: 999px;
  font-weight: 600;
}
.tier__head{ display: grid; gap: .35rem; }
.tier__num{
  font-size: var(--t-meta); letter-spacing: .22em;
  color: var(--c-graphite); font-weight: 600;
}
.tier__name{
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tier__sub{
  font-size: var(--t-p2);
  color: var(--c-arsenic);
}
.tier__price{
  display: grid;
  gap: .25rem;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 1rem 0;
}
.tier--feature .tier__price{ border-color: rgba(255,255,255,.1); }
.tier__from{ font-size: var(--t-meta); letter-spacing: .22em; text-transform: uppercase; color: var(--c-graphite); font-weight: 600; }
.tier__amt{ font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; }
.tier__time{ font-size: var(--t-meta); letter-spacing: .22em; text-transform: uppercase; color: var(--c-graphite); font-weight: 500; }
.tier__feat{
  display: grid;
  gap: 0;
}
.tier__feat li{
  position: relative;
  padding: .75rem 0 .75rem 1.5rem;
  font-size: var(--t-p2);
  color: var(--c-arsenic);
  border-top: 1px solid var(--hairline);
}
.tier__feat li:last-child{ border-bottom: 1px solid var(--hairline); }
.tier--feature .tier__feat li:last-child{ border-bottom-color: rgba(255,255,255,.1); }
.tier__feat li::before{
  content: ""; position: absolute;
  left: 0; top: 1.15rem;
  width: 8px; height: 1px;
  background: var(--c-indigo);
}
@media (max-width: 880px){
  .tiers__grid{ grid-template-columns: 1fr; }
}

/* ───── 15. FAQ ───── */
.faq{
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.faq__heading{
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: var(--maxw);
  margin: 0 auto 3rem;
  padding: 0 var(--gut);
}
.faq__list{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gut);
  border-top: 1px solid var(--hairline);
}
.qa{ border-bottom: 1px solid var(--hairline); }
.qa__q{
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.5rem 0;
  text-align: left;
  font-size: var(--t-h4);
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: padding .3s var(--ease);
}
.qa__q:hover{ padding-left: .5rem; color: var(--c-indigo); }
.qa__icon{
  position: relative;
  width: 22px; height: 22px;
  border: 1px solid var(--c-arsenic);
  border-radius: 50%;
  flex: 0 0 22px;
}
.qa__icon::before, .qa__icon::after{
  content:""; position: absolute;
  background: var(--c-arsenic);
  left: 50%; top: 50%;
  width: 9px; height: 1px;
  transform: translate(-50%,-50%);
  transition: transform .35s var(--ease);
}
.qa__icon::after{ transform: translate(-50%,-50%) rotate(90deg); }
.qa[aria-open="true"] .qa__icon::after{ transform: translate(-50%,-50%) rotate(0); }

.qa__a{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.qa__a > p{
  overflow: hidden;
  font-size: var(--t-p1);
  color: var(--c-arsenic);
  max-width: 65ch;
  padding-bottom: 0;
}
.qa[aria-open="true"] .qa__a{ grid-template-rows: 1fr; }
.qa[aria-open="true"] .qa__a > p{ padding-bottom: 1.5rem; }

/* ───── 16. CTA  ───── */
.cta{
  position: relative;
  margin: 0 var(--gut);
  border-radius: 16px;
  background: var(--grad);
  color: var(--c-white);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(4rem, 9vw, 8rem) clamp(2rem, 5vw, 4rem);
}
.cta::before{
  content:""; position: absolute; inset: 0; z-index: -1;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/></svg>");
  opacity: .25;
  mix-blend-mode: overlay;
}
.cta__inner{
  max-width: 850px;
  display: grid; gap: 1.75rem;
}
.cta__eyebrow{
  font-size: var(--t-meta); letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  font-weight: 500;
  display: flex; align-items: center; gap: .6rem;
}
.cta__h{
  font-size: clamp(2.25rem, 5.5vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}
.cta__h i{ font-style: italic; font-weight: 300; opacity: .85; }
.cta__sub{
  font-size: var(--t-p1);
  color: rgba(255,255,255,.78);
  max-width: 45ch;
}
.cta a.btn--white{ width: fit-content; }
.cta__emblem{
  position: absolute;
  right: -2rem; bottom: -3rem;
  width: clamp(180px, 28vw, 360px);
  opacity: .12;
  pointer-events: none;
}
.cta__emblem img{ width: 100%; }

/* ───── 17. Contact ───── */
.contact{
  padding: clamp(5rem, 10vw, 9rem) 0;
}
.contact__grid{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.contact__h{
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  max-width: 14ch;
  margin-bottom: 1.5rem;
}
.contact__lede{
  font-size: var(--t-p1);
  color: var(--c-arsenic);
  max-width: 36ch;
  margin-bottom: 3rem;
}
.contact__chan{
  border-top: 1px solid var(--hairline);
}
.contact__chan li{
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--t-p2);
}
.contact__chan li > span:first-child{
  font-size: var(--t-meta); letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-graphite); font-weight: 600;
}
.contact__chan a{
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.contact__chan a:hover{ border-bottom-color: currentColor; }

.contact__form{
  display: grid;
  gap: 1.75rem;
}
.field label{
  display: block;
  font-size: var(--t-meta); letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-graphite);
  font-weight: 600;
  margin-bottom: .75rem;
}
.field input,
.field textarea{
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  padding: .65rem 0;
  font-size: var(--t-h4);
  font-weight: 400;
  color: var(--c-phantom);
  letter-spacing: -0.015em;
  transition: border-color .3s;
  outline: none;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder{
  color: var(--c-steel);
}
.field input:focus,
.field textarea:focus{
  border-bottom-color: var(--c-indigo);
}
.field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}
.chips{
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.chips input{
  position: absolute; opacity: 0; pointer-events: none;
}
.chips label{
  margin: 0; padding: .55rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--t-p2);
  font-weight: 500;
  color: var(--c-arsenic);
  text-transform: none; letter-spacing: 0;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.chips label:hover{ border-color: var(--c-arsenic); }
.chips input:checked + label{
  background: var(--c-phantom);
  color: var(--c-white);
  border-color: var(--c-phantom);
}
.contact__submit{
  display: grid; gap: 1rem;
  margin-top: 1rem;
}
.contact__fine{
  font-size: var(--t-meta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-graphite);
  font-weight: 500;
}
.contact__form .btn .btn__sent{ display: none; }
.contact__form.sent .btn{ background: var(--c-indigo); pointer-events: none; }
.contact__form.sent .btn .btn__label,
.contact__form.sent .btn svg{ display: none; }
.contact__form.sent .btn .btn__sent{ display: inline; }

@media (max-width: 880px){
  .contact__grid{ grid-template-columns: 1fr; }
  .field-row{ grid-template-columns: 1fr; }
}

/* ───── 18. Footer ───── */
.foot{
  background: var(--c-black);
  color: var(--c-cloud);
  padding: clamp(3rem, 6vw, 5rem) 0 1.5rem;
  position: relative;
  overflow: hidden;
}
.foot__top{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: 3rem;
}
.foot__brand img{ height: 26px; margin-bottom: 1.25rem; }
.foot__brand p{
  font-size: var(--t-p2);
  color: var(--c-steel);
  max-width: 36ch;
}
.foot__col h4{
  font-size: var(--t-meta);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-space);
  font-weight: 600;
  margin-bottom: 1.25rem;
}
.foot__col a, .foot__col span{
  display: block;
  font-size: var(--t-p2);
  color: var(--c-cloud);
  padding: .35rem 0;
  transition: color .25s;
}
.foot__col a:hover{ color: var(--c-white); }

.foot__giant{
  font-size: clamp(4rem, 22vw, 22rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: .85;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 3rem;
  user-select: none;
  pointer-events: none;
}

.foot__bottom{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.5rem var(--gut) 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--t-meta);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-graphite);
  font-weight: 500;
}
.foot__top-link:hover{ color: var(--c-white); }

@media (max-width: 880px){
  .foot__top{ grid-template-columns: 1fr 1fr; gap: 2rem; }
  .foot__brand{ grid-column: 1 / -1; }
}

/* ───── 19. Reveal animations ───── */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s var(--ease-out) var(--rd, 0ms),
    transform .9s var(--ease-out) var(--rd, 0ms);
  will-change: opacity, transform;
}
.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* image placeholder labels */
img[data-label]{
  position: relative;
}
/* (The label is purely informational — it lives in IMAGE_BRIEF.md.
   Visually we just show the gradient placeholder.svg.) */

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal{ opacity: 1; transform: none; }
  .display .line > span{ transform: none; }
}