/* ============================================================
   ABDUL MOEED — B2B Business Development
   Portfolio design system
   Palette: Midnight Navy / Electric Coral / Cream

   To re-skin the whole site, change --coral, --coral-hover and
   --coral-soft below. Everything accented follows those three.
   ============================================================ */

:root {
  /* Core */
  --navy:        #0B1437;
  --navy-deep:   #070E28;
  --navy-tint:   #1C2A54;
  --coral:       #FF5A5F;
  --coral-hover: #E0484D;
  --coral-soft:  #FF8A8E;
  --cream:       #F4F1EA;
  --dim:         #C9C5BC;
  --white:       #FFFDFA;

  /* Derived */
  --line:        rgba(244, 241, 234, 0.10);
  --line-strong: rgba(244, 241, 234, 0.18);
  --card:        rgba(28, 42, 84, 0.35);
  --card-hi:     rgba(28, 42, 84, 0.60);
  --ink-1:       var(--cream);
  --ink-2:       rgba(244, 241, 234, 0.72);
  --ink-3:       rgba(244, 241, 234, 0.50);

  --shadow-sm:   0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-lg:   0 40px 80px -30px rgba(0, 0, 0, 0.75);
  --glow-coral:  0 30px 80px -24px rgba(255, 90, 95, 0.45);

  --serif: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --maxw: 1200px;
  --radius: 22px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------------------------- Reset ----------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--sans);
  background: var(--navy-deep);
  color: var(--ink-1);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

::selection { background: var(--coral); color: var(--navy-deep); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ----------------------- Ambient background ---------------------- */
/* Grain — non-blended fixed layer (cheap; no full-page recomposite on scroll) */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.035;
  transform: translateZ(0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Aurora glows — promoted to isolated layers so they don't repaint on scroll */
.aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  transform: translateZ(0); will-change: transform;
}
.aurora span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
  transform: translateZ(0);
}
.aurora .a1 { width: 60vw; height: 60vw; top: -22vw; right: -14vw;
  background: radial-gradient(circle, rgba(255,90,95,0.34), transparent 62%); }
.aurora .a2 { width: 46vw; height: 46vw; top: 42vh; left: -18vw;
  background: radial-gradient(circle, rgba(28,42,84,0.9), transparent 64%); opacity: 0.85; }
.aurora .a3 { width: 40vw; height: 40vw; bottom: -12vw; right: -8vw;
  background: radial-gradient(circle, rgba(255,90,95,0.18), transparent 66%); }

.page { position: relative; z-index: 2; }

/* ------------------------- Layout helpers ------------------------ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(72px, 11vw, 150px) 0; position: relative; }
.section--tight { padding: clamp(48px, 7vw, 90px) 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--coral);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1.5px; background: var(--coral);
  display: inline-block; opacity: 0.9;
}
.eyebrow--center { }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { display: inline-flex; }

.section-title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.04;
  letter-spacing: -0.02em; margin-top: 18px; color: var(--white);
  font-optical-sizing: auto;
}
.section-sub { margin-top: 20px; font-size: 1.08rem; color: var(--ink-2); max-width: 62ch; }
.section-head.center .section-sub { margin-left: auto; margin-right: auto; }

.coral { color: var(--coral); }
.serif { font-family: var(--serif); }

/* ----------------------------- Buttons --------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 26px; border-radius: 100px; font-weight: 600; font-size: 0.98rem;
  letter-spacing: -0.01em; transition: transform 0.35s var(--ease), background 0.3s, box-shadow 0.35s, color 0.3s, border-color 0.3s;
  white-space: nowrap; line-height: 1;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.35s var(--ease); }
.btn--primary { background: var(--coral); color: var(--navy-deep); box-shadow: 0 12px 30px -14px rgba(255,90,95,0.7); }
.btn--primary:hover { background: var(--coral-hover); transform: translateY(-3px); box-shadow: var(--glow-coral); color: var(--white); }
.btn--primary:hover svg { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--cream); border: 1.5px solid var(--line-strong); }
.btn--ghost:hover { border-color: var(--cream); background: rgba(244,241,234,0.06); transform: translateY(-3px); }
.btn--lg { padding: 18px 34px; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ----------------------- Scroll progress bar --------------------- */
.progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--coral), var(--coral-soft));
  z-index: 100; transition: width 0.1s linear;
}

/* ------------------------------- Nav ----------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s, padding 0.4s;
  border-bottom: 1px solid transparent;
  padding: 18px 0;
}
.nav.scrolled {
  background: rgba(7, 14, 40, 0.78);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
  padding: 12px 0;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.nav__links { flex: 1; justify-content: center; }
.nav__ctaBtn { flex: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; }
.brand__mark {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--coral), var(--coral-hover));
  color: var(--navy-deep); font-family: var(--serif); font-weight: 600; font-size: 1.05rem;
  box-shadow: 0 8px 22px -10px rgba(255,90,95,0.8);
}
.brand__name { font-size: 1.02rem; letter-spacing: -0.01em; color: var(--white); line-height: 1.05; }
.brand__name small { display: block; font-size: 0.66rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__links a { font-size: 0.94rem; color: var(--ink-2); position: relative; transition: color 0.25s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--coral); transition: width 0.3s var(--ease);
}
.nav__links a:hover, .nav__links a.active { color: var(--cream); }
.nav__links a:hover::after, .nav__links a.active::after { width: 100%; }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: 10px; margin-left: 4px; }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--cream); margin: 4px auto; transition: 0.3s var(--ease); }
.nav.open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav.open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------ Hero ----------------------------- */
.hero { padding-top: clamp(130px, 18vh, 210px); padding-bottom: clamp(60px, 9vw, 120px); position: relative; }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(30px, 5vw, 72px); align-items: center;
}
.hero__eyebrow { margin-bottom: 26px; }
.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(2.7rem, 6.6vw, 5.4rem); line-height: 1.0; letter-spacing: -0.025em;
  color: var(--white); font-optical-sizing: auto;
}
.hero h1 em { font-style: italic; color: var(--coral); font-weight: 500; }
.hero__sub { margin-top: 30px; font-size: 1.18rem; line-height: 1.65; color: var(--ink-2); max-width: 52ch; }
.hero__sub strong { color: var(--cream); font-weight: 600; }
.hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 16px; }
.hero__meta { margin-top: 40px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero__meta-item { display: flex; flex-direction: column; }
.hero__meta-item b { font-family: var(--serif); font-size: 1.7rem; color: var(--white); font-weight: 600; line-height: 1; }
.hero__meta-item span { font-size: 0.82rem; color: var(--ink-3); margin-top: 6px; letter-spacing: 0.02em; }
.hero__meta-div { width: 1px; height: 38px; background: var(--line-strong); }

/* Portrait */
.portrait { position: relative; justify-self: center; width: min(100%, 420px); }
.portrait__frame {
  position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 4.7;
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, var(--navy-tint), var(--navy-deep));
  box-shadow: var(--shadow-lg);
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.portrait__fallback {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, var(--navy-tint), var(--navy-deep)); padding: 24px;
}
.portrait__mono {
  font-family: var(--serif); font-size: 5.4rem; font-weight: 600; line-height: 1;
  background: linear-gradient(150deg, var(--coral), var(--coral-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portrait__nm { margin-top: 22px; font-family: var(--serif); font-size: 1.35rem; color: var(--white); }
.portrait__rl { margin-top: 6px; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.portrait::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: 26px;
  border: 1.5px solid var(--coral); opacity: 0.55; z-index: -1;
}
.portrait__badge {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: rgba(7,14,40,0.82); backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong); border-radius: 14px; padding: 12px 16px;
  box-shadow: var(--shadow-sm); font-size: 0.86rem; color: var(--cream);
}
.portrait__badge b { color: var(--white); font-weight: 600; }
.portrait__badge--tl { top: 22px; left: -26px; }
.portrait__badge--br { bottom: 30px; right: -22px; }
.portrait__badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,0.18); }
.portrait__badge .pill-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,90,95,0.16); display: grid; place-items: center; color: var(--coral); }
.portrait__badge .pill-ic svg { width: 17px; height: 17px; }

/* ---------------------------- Marquee ---------------------------- */
.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 26px 0; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__label { text-align: center; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; }
.marquee__track { display: flex; gap: 56px; width: max-content; animation: scroll-x 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 500;
  color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 56px;
}
.marquee__track span::after { content: "✦"; color: var(--coral); font-size: 0.7em; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ----------------------------- Stats ----------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  padding: 34px 28px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
}
.stat b { font-family: var(--serif); font-size: clamp(2.4rem, 4.5vw, 3.4rem); font-weight: 600; color: var(--white); line-height: 1; letter-spacing: -0.02em; display: block; }
.stat b i { color: var(--coral); font-style: normal; }
.stat span { display: block; margin-top: 14px; color: var(--ink-2); font-size: 0.98rem; }

/* ----------------------------- About ----------------------------- */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.about__lead { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.35; color: var(--white); font-weight: 400; letter-spacing: -0.01em; }
.about__lead em { color: var(--coral); font-style: italic; }
.about__body p { color: var(--ink-2); margin-bottom: 18px; font-size: 1.05rem; }
.about__list { list-style: none; display: grid; gap: 14px; margin-top: 8px; }
.about__list li { display: flex; gap: 14px; align-items: flex-start; color: var(--cream); font-size: 1.02rem; }
.about__list li svg { width: 22px; height: 22px; flex: none; color: var(--coral); margin-top: 1px; }
.about__signoff { margin-top: 30px; font-family: var(--serif); font-style: italic; color: var(--ink-2); }

/* --------------------------- Services ---------------------------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc {
  position: relative; padding: 34px 30px 30px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
  transition: transform 0.4s var(--ease), border-color 0.4s, background 0.4s;
  overflow: hidden; display: flex; flex-direction: column;
}
.svc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--coral), transparent); transform: scaleX(0);
  transform-origin: left; transition: transform 0.5s var(--ease);
}
.svc:hover { transform: translateY(-6px); border-color: var(--line-strong); background: var(--card-hi); }
.svc:hover::before { transform: scaleX(1); }
.svc__ic {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(255,90,95,0.12); color: var(--coral); margin-bottom: 24px;
  border: 1px solid rgba(255,90,95,0.22);
}
.svc__ic svg { width: 26px; height: 26px; }
.svc h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--white); letter-spacing: -0.01em; }
.svc p { margin-top: 12px; color: var(--ink-2); font-size: 0.98rem; flex: 1; }
.svc__link { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; color: var(--coral); font-weight: 600; font-size: 0.92rem; }
.svc__link svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.svc:hover .svc__link svg { transform: translateX(4px); }

/* ----------------------------- Work ------------------------------ */
.work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; margin-bottom: 34px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 46px; }
.filter {
  padding: 11px 20px; border-radius: 100px; font-size: 0.9rem; font-weight: 500;
  color: var(--ink-2); border: 1px solid var(--line-strong); background: transparent;
  transition: all 0.3s var(--ease); display: inline-flex; align-items: center; gap: 8px;
}
.filter .count { font-size: 0.76rem; color: var(--ink-3); }
.filter:hover { color: var(--cream); border-color: var(--cream); }
.filter.active { background: var(--coral); color: var(--navy-deep); border-color: var(--coral); }
.filter.active .count { color: rgba(7,14,40,0.6); }

.cat { scroll-margin-top: 110px; margin-bottom: clamp(50px, 7vw, 88px); }
.cat.hide { display: none; }
.cat__head { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.cat__ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,90,95,0.12); color: var(--coral); border: 1px solid rgba(255,90,95,0.2); flex: none; }
.cat__ic svg { width: 24px; height: 24px; }
.cat__titles { flex: 1; }
.cat__titles h3 { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 500; color: var(--white); letter-spacing: -0.01em; }
.cat__titles p { color: var(--ink-2); font-size: 0.96rem; margin-top: 4px; }
.cat__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.cat__count { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-3); white-space: nowrap; }
.cat__count b { color: var(--coral); }
.cat__share {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 0.8rem; color: var(--ink-3); padding: 7px 13px; border-radius: 100px;
  border: 1px solid var(--line); background: transparent; transition: all 0.25s var(--ease);
}
.cat__share svg { width: 14px; height: 14px; }
.cat__share:hover { color: var(--coral); border-color: rgba(255,90,95,0.4); background: rgba(255,90,95,0.07); }
.cat__share.copied { color: #4ade80; border-color: rgba(74,222,128,0.45); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }

.card {
  position: relative; display: flex; flex-direction: column;
  scroll-margin-top: 100px;
  padding: 30px 28px; border-radius: var(--radius);
  background: linear-gradient(165deg, var(--card-hi), var(--card));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform 0.45s var(--ease), border-color 0.45s, box-shadow 0.45s;
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255,90,95,0.12), transparent 55%);
  opacity: 0; transition: opacity 0.45s;
}
.card:hover { transform: translateY(-7px); border-color: rgba(255,90,95,0.35); box-shadow: var(--glow-coral); }
.card:hover::after { opacity: 1; }
@keyframes cardFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255,90,95,0); }
  25%  { box-shadow: var(--glow-coral); }
  100% { box-shadow: 0 0 0 0 rgba(255,90,95,0); }
}
.card--flash { animation: cardFlash 2.3s var(--ease); border-color: rgba(255,90,95,0.6) !important; }
.card:target { border-color: rgba(255,90,95,0.6); }
.card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.card__badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); }
.card__topright { display: flex; align-items: center; gap: 12px; }
.card__num { font-family: var(--serif); font-size: 0.95rem; color: var(--ink-3); }
.card__share {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
  color: var(--ink-3); border: 1px solid var(--line); background: transparent;
  transition: color 0.25s, border-color 0.25s, background 0.25s, transform 0.25s;
}
.card__share svg { width: 15px; height: 15px; }
.card__share:hover { color: var(--coral); border-color: rgba(255,90,95,0.4); background: rgba(255,90,95,0.08); transform: translateY(-1px); }
.card__share.copied { color: #4ade80; border-color: rgba(74,222,128,0.45); background: rgba(74,222,128,0.10); }
.card__client { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; color: var(--white); line-height: 1.1; letter-spacing: -0.01em; }
.card__title { color: var(--ink-2); font-size: 0.98rem; margin-top: 6px; }
.card__hook {
  margin: 22px 0; padding: 16px 18px; border-left: 2px solid var(--coral);
  background: rgba(255,90,95,0.06); border-radius: 0 12px 12px 0;
  font-family: var(--serif); font-style: italic; font-size: 1.08rem; line-height: 1.4; color: var(--cream);
}
.card__pos { color: var(--ink-2); font-size: 0.96rem; line-height: 1.55; }
.card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.card__tags span { font-size: 0.74rem; color: var(--ink-3); padding: 5px 11px; border: 1px solid var(--line); border-radius: 100px; }
.card__excerpt {
  margin-top: 18px; font-size: 0.92rem; color: var(--ink-2); line-height: 1.6;
  border-top: 1px dashed var(--line-strong); padding-top: 16px; white-space: pre-line;
  max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; margin-top: 0; border-top-color: transparent;
  transition: max-height 0.5s var(--ease), opacity 0.4s, padding-top 0.4s, margin-top 0.4s;
}
.card.expanded .card__excerpt { max-height: 340px; opacity: 1; padding-top: 16px; margin-top: 18px; border-top-color: var(--line-strong); }
.card__foot { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.card__meta-format { font-size: 0.8rem; color: var(--ink-3); }
.card__actions { display: flex; align-items: center; gap: 16px; }
.card__sample { font-size: 0.85rem; color: var(--ink-2); border-bottom: 1px solid transparent; transition: color 0.25s, border-color 0.25s; }
.card__sample:hover { color: var(--cream); border-color: var(--line-strong); }
.card__read { display: inline-flex; align-items: center; gap: 7px; color: var(--coral); font-weight: 600; font-size: 0.9rem; }
.card__read svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.card__read:hover svg { transform: translate(3px, -3px); }
.card__proof { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--coral-soft); }
.card__proof svg { width: 15px; height: 15px; }

/* --------------------------- Process ----------------------------- */
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 32px 26px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.step__n { font-family: var(--serif); font-size: 3rem; font-weight: 600; color: rgba(255,90,95,0.25); line-height: 1; letter-spacing: -0.02em; }
.step h4 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; color: var(--white); margin-top: 12px; }
.step p { color: var(--ink-2); font-size: 0.95rem; margin-top: 12px; line-height: 1.55; }

/* --------------------------- Philosophy -------------------------- */
.philosophy { text-align: center; }
.philosophy blockquote {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.25; letter-spacing: -0.015em;
  color: var(--white); max-width: 20ch; margin: 0 auto;
}
.philosophy blockquote em { color: var(--coral); font-style: italic; }
.philosophy cite { display: block; margin-top: 32px; font-style: normal; font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }

/* ---------------------------- Contact ---------------------------- */
.contact { position: relative; }
.contact__card {
  position: relative; overflow: hidden;
  border-radius: 32px; padding: clamp(44px, 7vw, 84px);
  background: linear-gradient(155deg, var(--navy-tint), var(--navy-deep));
  border: 1px solid var(--line-strong); text-align: center;
}
.contact__card::before {
  content: ""; position: absolute; width: 60%; height: 140%; top: -40%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,90,95,0.22), transparent 60%); pointer-events: none;
}
.contact__card h2 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--white); position: relative;
}
.contact__card h2 em { color: var(--coral); font-style: italic; }
.contact__card p { margin: 22px auto 0; color: var(--ink-2); font-size: 1.12rem; max-width: 48ch; position: relative; }
.contact__actions { margin-top: 40px; display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; position: relative; }
.contact__note { margin-top: 26px; font-size: 0.85rem; color: var(--ink-3); position: relative; }

/* ---------------------------- Footer ----------------------------- */
.footer { border-top: 1px solid var(--line); padding: 54px 0 40px; margin-top: clamp(60px, 9vw, 110px); }
.footer__grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__brand { max-width: 320px; }
.footer__brand p { color: var(--ink-2); margin-top: 18px; font-size: 0.96rem; }
.footer__cols { display: flex; gap: 70px; flex-wrap: wrap; }
.footer__col h5 { font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.footer__col a, .footer__col span { display: block; color: var(--ink-2); font-size: 0.96rem; margin-bottom: 12px; transition: color 0.25s; }
.footer__col a:hover { color: var(--coral); }
.footer__bottom { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--ink-3); font-size: 0.86rem; }
.footer__bottom a { color: var(--ink-2); }
.footer__bottom a:hover { color: var(--coral); }

/* ------------------------- Back to top --------------------------- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 110;
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--coral); color: var(--navy-deep); box-shadow: var(--glow-coral);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.9);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s, background 0.25s;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--coral-hover); transform: translateY(-3px); }

/* ---------------------------- Toast ------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px);
  z-index: 120; max-width: min(92vw, 470px);
  background: rgba(7, 14, 40, 0.94); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); border-left: 3px solid var(--coral);
  border-radius: 14px; padding: 14px 22px; color: var(--cream); font-size: 0.92rem; line-height: 1.4;
  box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ===================== ADDED: motion + sections ==================== */

/* Animated gradient text */
.grad {
  background: linear-gradient(100deg, var(--coral) 0%, var(--coral-soft) 45%, var(--coral) 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 6s ease-in-out infinite;
}
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* Float + tilt + magnetic helpers */
.float { animation: floaty 5.5s ease-in-out infinite; }
.float.d1 { animation-delay: 1.1s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.magnetic { will-change: transform; }

/* Shine sweep on primary buttons */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::before {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg); transition: left 0.7s var(--ease); pointer-events: none;
}
.btn--primary:hover::before { left: 130%; }

/* ---- Bold stats band ---- */
.stats-band .stats { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.stats-band .stat { text-align: center; padding: 44px 30px; }
.stat__ic {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 22px;
  display: grid; place-items: center; color: var(--coral);
  background: rgba(255,90,95,0.12); border: 1px solid rgba(255,90,95,0.25);
}
.stat__ic svg { width: 30px; height: 30px; }
.stats-band .stat b { font-size: clamp(2.6rem, 6vw, 4rem); }
.stats-band .stat span { font-weight: 500; color: var(--cream); }
.stats-band .stat small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 0.86rem; }

/* ---- About: bold intro ---- */
.about__name { font-size: clamp(2.6rem, 6.4vw, 4.6rem) !important; line-height: 1.0; }
.about__tag { font-family: var(--serif); font-style: italic; font-size: clamp(1.35rem, 2.6vw, 1.95rem); color: var(--white); margin-top: 12px; }
.about__p { color: var(--ink-2); margin-top: 18px; font-size: 1.06rem; line-height: 1.7; }
.about__p strong { color: var(--cream); font-weight: 600; }
.about__punch { margin-top: 28px; font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--white); letter-spacing: -0.01em; }

/* ---- Testimonials wall ---- */
.testimonials { overflow: hidden; }
.tm-note { text-align: center; font-size: 0.82rem; color: var(--ink-3); margin-top: 10px; }
.tm-marquee {
  overflow: hidden; padding: 11px 0; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tm-track { display: flex; gap: 22px; width: max-content; animation: tmScroll 55s linear infinite; }
.tm-track--rev { animation-direction: reverse; animation-duration: 70s; }
.tm-marquee:hover .tm-track { animation-play-state: paused; }
@keyframes tmScroll { to { transform: translateX(-33.333%); } }
.tm-card {
  width: 370px; flex: none; padding: 26px 28px; border-radius: 18px;
  background: linear-gradient(165deg, var(--card-hi), var(--card)); border: 1px solid var(--line);
  transition: border-color 0.3s, transform 0.3s var(--ease);
}
.tm-card:hover { border-color: rgba(255,90,95,0.35); transform: translateY(-4px); }
.tm-card__head { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; }
.tm-av { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--coral), var(--coral-hover)); color: var(--navy-deep);
  font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.tm-who { min-width: 0; }
.tm-who b { color: var(--white); display: block; font-size: 0.98rem; }
.tm-who span { color: var(--ink-3); font-size: 0.8rem; }
.tm-stars { margin-left: auto; color: var(--coral); letter-spacing: 1px; font-size: 0.9rem; flex: none; }
.tm-card p { color: var(--ink-2); font-size: 0.96rem; line-height: 1.6; }

/* ---- Case study ---- */
.case__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.case__media { border-radius: 22px; overflow: hidden; border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, var(--navy-tint), var(--navy-deep)); aspect-ratio: 4 / 3; position: relative; box-shadow: var(--shadow-lg); }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 26px; color: var(--ink-3); }
.case__ph svg { width: 44px; height: 44px; color: var(--coral); opacity: 0.75; }
.case__ph b { color: var(--cream); font-size: 0.98rem; }
.case__ph span { font-size: 0.82rem; }
.case__body h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3.6vw, 2.7rem); color: var(--white); margin-top: 12px; letter-spacing: -0.01em; }
.case__row { margin-top: 22px; }
.case__row h4 { font-size: 0.76rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); margin-bottom: 6px; }
.case__row p { color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.case__metrics { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.case__metric { padding: 15px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); flex: 1; min-width: 120px; }
.case__metric b { font-family: var(--serif); color: var(--white); font-size: 1.6rem; display: block; line-height: 1; }
.case__metric b i { color: var(--coral); font-style: normal; }
.case__metric span { color: var(--ink-3); font-size: 0.8rem; display: block; margin-top: 8px; }

/* Responsive for new sections */
@media (max-width: 900px) {
  .case__grid { grid-template-columns: 1fr; }
  .case__media { order: -1; }
}
@media (max-width: 760px) {
  .stats-band .stats { grid-template-columns: 1fr; }
  .tm-card { width: 300px; }
}

/* --------------------------- Reveal anim ------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* ---------------------------- Responsive ------------------------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .portrait { order: -1; margin-bottom: 8px; width: min(78%, 340px); }
  .portrait__badge--tl { left: -10px; }
  .portrait__badge--br { right: -10px; }
  .about__grid { grid-template-columns: 1fr; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .process__grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .nav__links, .nav__ctaBtn { display: none; }
  .nav__toggle { display: block; }
  .brand { flex: 1; }
  .nav.open {
    background: rgba(7, 14, 40, 0.97);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--line);
  }
  .nav.open .nav__links {
    display: flex; order: 3; flex: 0 0 100%; width: 100%; flex-direction: column; align-items: stretch;
    gap: 0; margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line);
  }
  .nav.open .nav__links a { padding: 15px 2px; width: 100%; border-bottom: 1px solid var(--line); color: var(--cream); }
  .nav.open .nav__links a::after { display: none; }
  .nav.open .nav__ctaBtn { display: inline-flex; order: 4; width: 100%; margin: 16px 0 6px; }
  .hero__meta { gap: 16px; }
  .services { grid-template-columns: 1fr; }
  .footer__grid { flex-direction: column; }
  .portrait__badge--br { display: none; }
  .portrait__badge--tl { left: 6px; }
}
@media (max-width: 600px) {
  .cat__head { gap: 12px; }
  .cat__share span { display: none; }
  .cat__share { padding: 9px; }
  .toast { bottom: 92px; }
  .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .process__grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .container { padding: 0 18px; }
  .hero__meta-div { display: none; }
  .card__hook { font-size: 1rem; }
}

/* ===================== Display typography (modern sans) =====================
   The display font is now a geometric sans, which needs heavier weight and
   tighter tracking than the old serif to read as bold, modern, and professional. */
.hero h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.section-title { font-weight: 800; letter-spacing: -0.03em; }
.about__name { font-weight: 800; letter-spacing: -0.035em; }
.contact__card h2 { font-weight: 800; letter-spacing: -0.03em; }
.about__tag { font-weight: 600; font-style: normal; }
.about__punch { font-weight: 800; letter-spacing: -0.02em; }
.philosophy blockquote { font-weight: 600; letter-spacing: -0.02em; }

.card__client, .cat__titles h3, .svc h3, .step h4, .case__body h3, .portrait__nm {
  font-weight: 700; letter-spacing: -0.015em;
}
.card__hook { font-weight: 500; }

.hero__meta b, .stat b, .stats-band .stat b, .case__metric b, .step__n,
.brand__mark, .portrait__mono, .tm-av, .cat__count b, .card__num {
  font-weight: 800; letter-spacing: -0.02em;
}

.marquee__track span { font-weight: 700; letter-spacing: -0.01em; }

/* ==================================================================
   CINEMATIC HERO + PREMIUM MOTION  (world-class pass)
   ================================================================== */

/* Entrance primitives */
@keyframes animUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes lineIn { from { transform: translateY(115%); } to { transform: none; } }
@keyframes portraitIn { from { opacity: 0; transform: translateY(26px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.anim-up { opacity: 0; animation: animUp 0.95s var(--ease) both; animation-delay: var(--d, 0s); }
.anim-portrait { opacity: 0; animation: portraitIn 1.15s var(--ease) both; animation-delay: var(--d, 0s); }

/* Hero shell */
.hero { position: relative; overflow: hidden; padding-top: clamp(140px, 20vh, 220px); padding-bottom: clamp(70px, 10vw, 120px); }
.hero .container { position: relative; z-index: 2; }

/* Hero background */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(60px); will-change: transform; }
.hero__orb--1 { width: 40vw; height: 40vw; top: -12%; right: -6%;
  background: radial-gradient(circle, rgba(255,90,95,0.36), transparent 62%); animation: orbDrift1 17s ease-in-out infinite; }
.hero__orb--2 { width: 28vw; height: 28vw; bottom: -4%; left: 2%;
  background: radial-gradient(circle, rgba(255,90,95,0.15), transparent 65%); animation: orbDrift2 21s ease-in-out infinite; }
@keyframes orbDrift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-4%, 5%); } }
@keyframes orbDrift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(5%, -4%); } }
.hero__beam { position: absolute; top: -25%; left: 55%; width: 55%; height: 140%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 0%, rgba(255,90,95,0.10), transparent 55%); }
.hero__gridlines { position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(rgba(244,241,234,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(244,241,234,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 40% 40%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 40% 40%, #000, transparent 75%); }

/* Eyebrow live pulse */
.eyebrow__pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: none; }
.eyebrow__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--coral); animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(3.4); opacity: 0; } }
.hero__eyebrow.eyebrow::before { display: none; }

/* Headline line-mask reveal */
.hero__title { font-family: var(--serif); font-weight: 800; font-size: clamp(2.9rem, 7vw, 5.8rem);
  line-height: 0.98; letter-spacing: -0.038em; color: var(--white); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.02em; }
.hero__title .line__in { display: block; transform: translateY(115%); animation: lineIn 1s var(--ease) both; animation-delay: var(--d, 0s); }
.hero__title em { font-style: italic; color: var(--coral); font-weight: 800; }

/* Portrait glow + parallax frame */
.portrait__glow { position: absolute; inset: -34px; z-index: -2; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,90,95,0.30), transparent 62%); filter: blur(38px); animation: glowPulse 5s ease-in-out infinite; }
@keyframes glowPulse { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.06); } }
.portrait__frame { will-change: transform; }

/* Floating glass stat chips */
.portrait__chip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 17px; border-radius: 15px; background: rgba(7,14,40,0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm); }
.portrait__chip b { font-family: var(--serif); font-weight: 800; color: var(--white); font-size: 1.3rem; line-height: 1; letter-spacing: -0.02em; }
.portrait__chip span { font-size: 0.72rem; color: var(--ink-3); }
.portrait__chip--1 { top: 24%; left: -44px; }
.portrait__chip--2 { bottom: 15%; right: -30px; text-align: right; align-items: flex-end; }
.portrait__stars { color: var(--coral); letter-spacing: 1px; }

/* Scroll cue */
.hero__scroll { display: inline-flex; align-items: center; gap: 9px; margin: 46px auto 0; width: -moz-fit-content; width: fit-content;
  color: var(--ink-3); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.hero__scroll svg { width: 15px; height: 15px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Premium reveal: add a soft blur-in to the standard reveal */
.reveal { filter: blur(7px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease), filter 0.85s var(--ease); }
.reveal.in { filter: blur(0); }
/* but never blur the big work-category wrappers (too heavy to blur their whole subtree) */
.cat.reveal { filter: none; transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }

/* A touch more breathing room + tighter display type site-wide */
.section-head { margin-bottom: clamp(46px, 6.5vw, 80px); }
.section-title { line-height: 1.03; }

/* Mobile hero tweaks */
@media (max-width: 980px) {
  .portrait__chip--1 { left: -10px; }
  .portrait__chip--2 { right: -6px; }
}
@media (max-width: 560px) {
  .hero__scroll { display: none; }
  .portrait__chip b { font-size: 1.1rem; }
  .portrait__chip--1 { top: 16%; }
}


/* ============ Card readability pass: lighter, bigger, scannable ============ */
.card__hook { font-size: 1.18rem; line-height: 1.5; padding: 17px 19px; margin: 24px 0 18px; }
.card__pos { font-size: 1.02rem; line-height: 1.65; color: var(--ink-2); }
.card__title { font-size: 1rem; margin-top: 7px; }
.card__tags { margin-top: 18px; }
.card__tags span { font-size: 0.78rem; padding: 6px 13px; }
/* proof now sits inside the expandable sample area */
.card__excerpt .card__proof { margin-top: 14px; display: flex; align-items: flex-start; gap: 8px; }
.card__excerpt .card__proof svg { flex: none; margin-top: 3px; }
.card.expanded .card__excerpt { max-height: 520px; }

/* ============ Standalone per-category portfolio pages ============ */
.col-hero { padding-top: clamp(140px, 18vh, 200px); padding-bottom: 10px; }
.col-title {
  font-family: var(--serif); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
  font-size: clamp(2.5rem, 6.2vw, 4.6rem); color: var(--white); margin-top: 18px;
}
.col-count { margin-top: 18px; font-size: 0.95rem; color: var(--ink-3); }
.col-count b { color: var(--coral); font-weight: 800; }
/* slim nav: keep the CTA visible on mobile (no hamburger on these pages) */
.nav--slim .nav__ctaBtn { display: inline-flex !important; }
.nav--slim .brand { flex: 1; }

/* ============ Spotlight: real-piece breakdown ============ */
.spot-doc { aspect-ratio: auto; min-height: 400px; display: flex; align-items: center; padding: clamp(28px, 4.5vw, 54px); }
.spot-doc__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--coral); }
.spot-doc__headline {
  font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--white); margin-top: 18px;
}
.spot-doc__sub { margin-top: 18px; color: var(--ink-2); line-height: 1.65; font-size: 1.02rem; }
.spot-doc__meta { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
.spot-doc__meta span { font-size: 0.76rem; color: var(--ink-3); border: 1px solid var(--line); padding: 6px 13px; border-radius: 100px; }
.case__cta { margin-top: 30px; }

/* ============ Portrait: crafted into the page, not pasted on ============ */
.portrait { width: min(100%, 460px); }
.portrait::before { display: none; }               /* kill the old offset-frame look */
.portrait__scene { position: relative; padding: 34px 30px 0; }

/* Arch window */
.portrait__arch {
  position: relative; z-index: 1; overflow: hidden; margin: 0 auto;
  width: min(100%, 350px); aspect-ratio: 4 / 4.9;
  border-radius: 999px 999px 30px 30px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(160deg, var(--navy-tint), var(--navy-deep));
  box-shadow: var(--shadow-lg);
}
.portrait__arch img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 20%;
  filter: saturate(0.9) contrast(1.05) brightness(0.97);
}
/* grade the photo into the brand: navy floor + coral rim light */
.portrait__arch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(7,14,40,0) 52%, rgba(7,14,40,0.62) 100%),
    radial-gradient(90% 60% at 85% 8%, rgba(255,90,95,0.16), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, rgba(11,20,55,0.35), transparent 55%);
}

/* Rotating rings */
.portrait__ring { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.portrait__ring--1 {
  width: 112%; aspect-ratio: 1; left: 50%; top: 3%;
  border: 1.5px dashed rgba(255,90,95,0.38);
  animation: ringSpin 36s linear infinite;
}
.portrait__ring--2 {
  width: 128%; aspect-ratio: 1; left: 50%; top: -3%;
  border: 1px solid rgba(244,241,234,0.10);
  animation: ringSpin 60s linear infinite reverse;
}
@keyframes ringSpin {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

/* Coral dot grid peeking from behind */
.portrait__dots {
  position: absolute; width: 132px; height: 172px; left: -10px; bottom: 6px; z-index: 0;
  background-image: radial-gradient(rgba(255,90,95,0.45) 1.3px, transparent 1.3px);
  background-size: 15px 15px; opacity: 0.85;
  -webkit-mask-image: linear-gradient(135deg, #000 55%, transparent);
          mask-image: linear-gradient(135deg, #000 55%, transparent);
}

/* Outline typography woven behind and in front */
.portrait__word {
  position: absolute; font-family: var(--serif); font-weight: 800; letter-spacing: 0.05em;
  color: transparent; -webkit-text-stroke: 1.2px rgba(244,241,234,0.16);
  pointer-events: none; user-select: none; line-height: 1; white-space: nowrap;
}
.portrait__word--back  { font-size: clamp(3rem, 5.6vw, 4.4rem); top: 2px; left: -30px; z-index: 0; }
.portrait__word--front {
  font-size: clamp(2.5rem, 4.6vw, 3.7rem); bottom: 10px; right: -18px; z-index: 3;
  -webkit-text-stroke-color: rgba(255,90,95,0.55);
}

/* Chips hug the arch edge */
.portrait__badge--tl { top: 16px; left: 2px; z-index: 4; }
.portrait__chip--1 { top: 32%; left: -8px; z-index: 4; }
.portrait__chip--2 { bottom: 26%; right: -6px; z-index: 4; }

@media (max-width: 980px) {
  .portrait__word--back { left: -8px; }
  .portrait__word--front { right: -4px; }
  .portrait__chip--1 { left: -4px; }
  .portrait__chip--2 { right: -2px; }
}

/* ============ Portrait v3: background removed, true breakout ============ */
.portrait__stage { position: relative; width: min(100%, 350px); aspect-ratio: 4 / 4.9; margin: 0 auto; z-index: 1; }
/* the arch is now a designed backdrop she stands in front of */
.portrait__archbg {
  position: absolute; left: 0; right: 0; bottom: 0; height: 80%;
  border-radius: 999px 999px 30px 30px;
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(130% 110% at 50% 0%, rgba(255,90,95,0.22), transparent 58%),
    linear-gradient(160deg, var(--navy-tint), var(--navy-deep));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.portrait__archbg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(244,241,234,0.07) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 75%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000, transparent 75%);
}
/* the cutout: head breaks above the arch, feet of the image melt into it */
.portrait__cut {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center; z-index: 2;
  filter: saturate(0.97) contrast(1.03)
          drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 34px rgba(255, 90, 95, 0.26));
  -webkit-mask-image: linear-gradient(180deg, #000 88%, rgba(0,0,0,0.4) 97%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 88%, rgba(0,0,0,0.4) 97%, transparent 100%);
}
/* fallback keeps the arch shape if the cutout file is ever missing */
.portrait__stage .portrait__fallback {
  border-radius: 999px 999px 30px 30px; overflow: hidden;
  top: 20%; height: 80%; inset-inline: 0; position: absolute;
}

/* ============ Portrait size boost: more presence, more wow ============ */
@media (min-width: 981px) {
  .hero__grid { grid-template-columns: 1.02fr 0.98fr; }
}
.portrait { width: min(100%, 540px); }
.portrait__scene { padding: 38px 22px 0; }
.portrait__stage { width: min(100%, 452px); }
.portrait__word--back  { font-size: clamp(3.4rem, 6.6vw, 5.4rem); top: -6px; left: -34px; }
.portrait__word--front { font-size: clamp(2.8rem, 5.4vw, 4.4rem); bottom: 6px; right: -22px; }
.portrait__chip b { font-size: 1.45rem; }
.portrait__badge, .portrait__chip { transform: scale(1.04); }
@media (max-width: 980px) {
  .portrait { width: min(92%, 430px); }
}

/* pull the hero up so the enlarged portrait is fully in the first view */
.hero { padding-top: clamp(104px, 13vh, 150px); padding-bottom: clamp(50px, 7vw, 90px); }
.hero__scroll { margin-top: 30px; }

/* make the woven name clearly visible */
.portrait__word--back {
  -webkit-text-stroke: 1.6px rgba(244, 241, 234, 0.42);
  opacity: 1; top: -14px;
}
.portrait__word--front { -webkit-text-stroke: 1.6px rgba(255, 90, 95, 0.75); }
/* drop the availability badge below the name so they don't fight */
.portrait__badge--tl { top: 74px; left: -6px; }

/* ============ Brand: clean typographic wordmark ============ */
.brand__word {
  font-family: var(--serif); font-weight: 800; font-size: 1.34rem;
  letter-spacing: -0.025em; color: var(--white); line-height: 1; white-space: nowrap;
}
.brand__word i {
  font-style: normal; color: var(--coral); display: inline-block;
  transition: transform 0.3s var(--ease);
}
.brand:hover .brand__word i { transform: scale(1.6) translateY(-1px); }

/* ==================================================================
   CARD v2: editorial, wow (giant quote, watermark number, pill CTA)
   ================================================================== */
.card { padding: 34px 30px 26px; border-radius: 26px; }

/* watermark number, outline style like the hero names */
.card__wm {
  position: absolute; top: 12px; right: 22px; z-index: 0; pointer-events: none;
  font-family: var(--serif); font-weight: 800; font-size: 3.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.2px rgba(244, 241, 234, 0.10);
  transition: -webkit-text-stroke-color 0.4s;
}
.card:hover .card__wm { -webkit-text-stroke-color: rgba(255, 90, 95, 0.4); }
.card__num { display: none; }

/* badge becomes a coral pill */
.card__badge {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 100px;
  background: rgba(255, 90, 95, 0.10); border: 1px solid rgba(255, 90, 95, 0.25);
  font-size: 0.68rem;
}
.card__top { margin-bottom: 24px; position: relative; z-index: 1; }
.card__share { background: rgba(7, 14, 40, 0.5); }

.card__client { font-size: 1.72rem; line-height: 1.08; }

/* the hook is now the typographic hero: giant coral quote mark, no box */
.card__hook {
  background: none; border-left: none; border-radius: 0; padding: 0;
  margin: 24px 0 16px; position: relative;
  font-size: 1.24rem; line-height: 1.5; color: var(--white);
  font-weight: 600; font-style: italic; letter-spacing: -0.01em;
}
.card__hook::before {
  content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif;
  font-style: normal; font-size: 3.6rem; line-height: 0.55; color: var(--coral);
  margin-bottom: 12px;
}

/* tags: minimal coral-hash style, no pill borders */
.card__tags { gap: 6px 16px; margin-top: 16px; }
.card__tags span { border: none; padding: 0; font-size: 0.84rem; color: var(--ink-3); }
.card__tags span::before { content: "#"; color: var(--coral); margin-right: 2px; font-weight: 600; }

/* footer: divider + uppercase caption + pill CTA */
.card__foot { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 26px; }
.card__meta-format { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.card__read {
  padding: 10px 18px; border-radius: 100px; font-weight: 700; font-size: 0.88rem;
  background: rgba(255, 90, 95, 0.12); border: 1px solid rgba(255, 90, 95, 0.3); color: var(--coral);
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.card__read:hover { background: var(--coral); color: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(255,90,95,0.65); }
.card__read:hover svg { transform: none; }

/* keep the footer CTA on one line */
.card__read { white-space: nowrap; flex: none; }
.card__actions { flex: none; gap: 14px; }
.card__foot { gap: 12px 14px; flex-wrap: wrap; }
.card__meta-format { max-width: 46%; }

/* ============ Attachment bar: the real file, visibly attached ============ */
.card__attach {
  margin-top: 14px; display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: 16px; position: relative; z-index: 1;
  border: 1.5px dashed rgba(255, 90, 95, 0.4);
  background: rgba(255, 90, 95, 0.05);
  transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}
.card__attach:hover {
  border-style: solid; border-color: var(--coral);
  background: rgba(255, 90, 95, 0.12); transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(255, 90, 95, 0.5);
}
.card__attach-ic {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: var(--navy-deep);
  background: linear-gradient(150deg, var(--coral), var(--coral-hover));
  box-shadow: 0 8px 18px -8px rgba(255, 90, 95, 0.7);
}
.card__attach-ic svg { width: 21px; height: 21px; }
.card__attach-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card__attach-tx b { color: var(--white); font-size: 0.93rem; font-weight: 700; line-height: 1.25; }
.card__attach-tx span { color: var(--ink-3); font-size: 0.78rem; line-height: 1.35; }
.card__attach-go { flex: none; width: 18px; height: 18px; color: var(--coral); transition: transform 0.3s var(--ease); }
.card__attach:hover .card__attach-go { transform: translate(3px, -3px); }
/* footer now only carries the caption + sample toggle */
.card__foot { border-top: none; padding-top: 14px; margin-top: auto; }

/* ============ Collection page hero (mini landing page) ============ */
.col-hero { padding-bottom: clamp(24px, 4vw, 44px) !important; }
.col-hero .col-title {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem) !important; line-height: 1.02;
  letter-spacing: -0.035em; margin-top: 16px; color: var(--white); font-weight: 800;
  font-family: var(--serif);
}
.col-hero .hero__sub { max-width: 46ch; }
.col-hero .hero__sub strong { color: var(--white); }
.col-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-3);
  transition: color 0.25s, gap 0.25s;
}
.col-back:hover { color: var(--coral); gap: 10px; }
/* slim nav still needs its brand + CTA visible; no hamburger on these pages */
.nav--slim .nav__inner { flex-wrap: nowrap; }

/* ============ Collection page: obvious "scroll for the work" cue ============ */
.col-scroll {
  display: inline-flex !important; align-items: center; gap: 10px;
  margin: 34px auto 2px; padding: 11px 22px; border-radius: 100px;
  border: 1px solid rgba(255, 90, 95, 0.32); background: rgba(255, 90, 95, 0.07);
  color: var(--coral); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.06em; text-transform: none;
  transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease);
}
.col-scroll:hover { background: rgba(255, 90, 95, 0.14); border-color: var(--coral); transform: translateY(2px); }
.col-scroll svg { width: 16px; height: 16px; animation: bob 1.5s ease-in-out infinite; }

/* ==================================================================
   ABDUL MOEED — additions on top of the shared design system
   ================================================================== */

/* ---- Playbook cards: the expandable now holds a real step list ---- */
.card__excerpt { white-space: normal; }
.card.expanded .card__excerpt { max-height: 680px; }

.card__steps { list-style: none; display: grid; gap: 11px; margin: 0; padding: 0; }
.card__steps li {
  display: flex; gap: 11px; align-items: flex-start;
  color: var(--ink-2); font-size: 0.94rem; line-height: 1.5;
}
.card__steps li svg {
  width: 16px; height: 16px; flex: none; color: var(--coral); margin-top: 3px;
}
.card__excerpt .card__proof {
  margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line);
  color: var(--coral-soft); font-size: 0.88rem; line-height: 1.55; align-items: flex-start;
}

/* the plain "See how it runs" toggle needs to read as a control, not body text */
.card__sample {
  padding: 9px 16px; border-radius: 100px; font-weight: 600; font-size: 0.85rem;
  color: var(--coral); background: rgba(255, 90, 95, 0.10);
  border: 1px solid rgba(255, 90, 95, 0.28); white-space: nowrap;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease), border-color 0.3s;
}
.card__sample:hover {
  background: var(--coral); color: var(--navy-deep);
  border-color: var(--coral); transform: translateY(-2px);
}
.card__foot { align-items: center; }

/* ---- Results: the verifiable proof band (replaces borrowed logos) ---- */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.proof__item {
  padding: 30px 26px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
  transition: border-color 0.4s, background 0.4s, transform 0.4s var(--ease);
}
.proof__item:hover {
  border-color: rgba(255, 90, 95, 0.3); background: var(--card-hi); transform: translateY(-4px);
}
.proof__item b {
  display: block; font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1; color: var(--white);
}
.proof__item span {
  display: block; margin-top: 14px; color: var(--ink-2);
  font-size: 0.95rem; line-height: 1.6;
}
/* when there is no testimonial wall underneath, the band is the section */
.testimonials.results--bare { padding-bottom: clamp(72px, 11vw, 150px); }

@media (max-width: 980px) { .proof { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .proof { grid-template-columns: 1fr; } }

/* ---- Stats band: word-length values ("Build-first", "Forge") need to
        sit at a smaller size than the numeric ones or they wrap badly ---- */
.stats-band .stat b { overflow-wrap: break-word; hyphens: none; }
.stats-band .stat b:not(.count) { font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
.hero__meta-item b:not(.count) { font-size: 1.55rem; }

/* ---- Portrait: this photo is a half-body crop, so it sits lower in the
        arch than a head-and-shoulders shot would ---- */
.portrait__cut { object-position: bottom center; }
.portrait__archbg { height: 76%; }

/* ---- Collection pages: the CTA row under the hero ---- */
.col-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---- Hero: this headline is shorter than the template's, and the photo is
        a half-body crop with almost no headroom, so the display size and the
        woven wordmark both need retuning ---- */
@media (min-width: 981px) {
  .hero__grid { grid-template-columns: 1.12fr 0.88fr; }
}
.hero__title { font-size: clamp(2.5rem, 5vw, 4.15rem); }

/* the head sits at the very top of the frame, so the back wordmark has to
   clear it upward instead of sitting across it */
.portrait__word--back {
  font-size: clamp(2.8rem, 5.2vw, 4.1rem);
  top: -44px; left: -38px;
}
.portrait__word--front { font-size: clamp(2.4rem, 4.4vw, 3.6rem); bottom: 14px; right: -16px; }

@media (max-width: 980px) {
  .portrait__word--back { top: -34px; left: -10px; }
  .portrait__word--front { right: -4px; }
}

/* ---- Collection pages: the back link needs its own line, and an eyebrow that
        already carries a live pulse should not also draw the leading rule ---- */
.col-back { display: flex; width: -moz-fit-content; width: fit-content; }
.eyebrow:has(.eyebrow__pulse)::before { display: none; }

/* ---- Mobile portrait: the floating chips sat across his face once the
        column collapsed. Drop the stat chip (the same number is in the meta
        row directly below) and move the badge onto the dark jacket. ---- */
@media (max-width: 760px) {
  .portrait__chip--1 { display: none; }
  .portrait__badge--tl { top: auto; bottom: 62px; left: -2px; }
  .portrait__chip--2 { top: auto; bottom: 30%; right: -4px; }
  .portrait__word--back { font-size: clamp(2.1rem, 11vw, 3rem); top: -18px; left: -6px; }
  .portrait__word--front { font-size: clamp(1.8rem, 9vw, 2.6rem); bottom: 6px; right: -4px; }
}

/* ---- Category headers stack on small screens; three columns of text in a
        375px row was unreadable ---- */
@media (max-width: 600px) {
  .cat__head {
    display: grid; align-items: start; row-gap: 16px; column-gap: 14px;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ic titles" "meta meta";
  }
  .cat__ic     { grid-area: ic; width: 42px; height: 42px; }
  .cat__titles { grid-area: titles; }
  .cat__meta   { grid-area: meta; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}