/* =========================================================
   Naz Rajan — nazrajan.com
   Fully custom CSS/JS — no frameworks, no web fonts, no build step.
   Design system takes cues from truus.co's visual language:
   navy/pale-blue/orange palette, huge display type with italic serif
   accents, split-word scroll reveals, CSS marquees, wiggle-on-hover
   tags, and a draggable card fan — all hand-written (no external
   cursor art, no Lenis/GSAP/Flickity).
   ========================================================= */

:root {
  --ink: #14120f;
  --navy: #101b36;
  --paper: #ffefdf;
  --paper-card: #fff8f1;
  --accent: #f5693c;
  --accent-2: #4b69f0;
  --muted: #6b6f78;
  --line: #f0dfc9;
  --max: 1160px;
  --gap: 24px;

  --ease-default: 0.8s cubic-bezier(0.625, 0.05, 0, 1);
  --ease-fast: 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  --ease-bounce: 0.7s cubic-bezier(0.35, 1.75, 0.6, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
}
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -ms-overflow-style: none;
}
body::-webkit-scrollbar { display: none; }

.container {
  /* Was w3.css's .w3-content: centred column with a max-width. Written
     out directly now that w3.css has been dropped — only two of its
     classes were ever in use (this and the button reset below), so
     keeping the whole stylesheet just for those wasn't worth the extra
     weight. */
  margin-left: auto;
  margin-right: auto;
  max-width: var(--max);
}

a { color: inherit; }

::selection { background: var(--accent); color: var(--paper); }
::-moz-selection { background: var(--accent); color: var(--paper); }

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  margin: 0 0 0.4em;
}

em {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--accent);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 14px;
}

/* ---------- Split-word reveal ---------- */
.split-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  vertical-align: bottom;
}
.split-word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--ease-default);
  transition-delay: calc(var(--i, 0) * 0.03s);
}
[data-split].in-view .split-word-inner { transform: translateY(0); }

/* ---------- Buttons ----------
   Was w3.css's .w3-btn (deliberately not .w3-button, which set a
   forced grey/black !important hover that stomped custom colours).
   Written out directly now that w3.css has been dropped, folding in
   the few base-reset properties it provided (cursor, no text
   selection/callout on tap, the soft hover shadow) alongside this
   site's own shape/colour styling. */
.btn {
  cursor: pointer;
  white-space: nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  border: 2px solid var(--ink);
  transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast), transform var(--ease-fast), box-shadow var(--ease-fast);
}
.btn:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); }
.btn-primary {
  background: var(--navy);
  color: var(--paper);
}
.btn-primary:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { background: var(--navy); color: var(--paper); transform: translateY(-2px); }

/* ---------- Nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--paper);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gap);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 19px;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.nav-logo-mark {
  height: 2.4em;
  width: auto;
  flex: 0 0 auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0 auto;
}
.nav-links > a:not(.nav-cta) {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: color var(--ease-fast);
}
.nav-links > a:not(.nav-cta):hover { color: var(--ink); }
.nav-links a.nav-cta { padding: 10px 20px; font-size: 14px; text-decoration: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--paper);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 130px var(--gap) 70px;
  text-align: center;
  overflow: hidden;
  /* Hero photo slot: drop a real image in as images/hero.jpg and it takes
     over automatically. Until then the diagonal placeholder pattern shows
     through underneath, same convention as the other photo placeholders
     on this site. */
  background:
    url("images/hero.jpg") center / cover no-repeat,
    repeating-linear-gradient(135deg, #e9e1d2, #e9e1d2 10px, #ded4bf 10px, #ded4bf 20px);
}
.hero::before {
  /* Dark scrim so light text stays readable once a real photo is in place.
     Flipped to sit heaviest on the right, since the text column now lives
     there — mirror this angle (add/subtract 180deg) if the layout flips back. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(280deg, rgba(16, 27, 54, 0.82) 0%, rgba(16, 27, 54, 0.6) 55%, rgba(16, 27, 54, 0.32) 100%);
  z-index: 0;
}
.hero > .container {
  position: relative;
  z-index: 1;
  /* Let hover fall through the (mostly empty) text column to the logo
     sitting behind it, so the logo can be hovered even though it paints
     underneath. Interactive children re-enable pointer events below. */
  pointer-events: none;
}
.hero-content .btn { pointer-events: auto; }
.hero-logo {
  /* Large top-right watermark. Sits above the scrim (z-index 0) but below
     the text column (.hero > .container is z-index 1), so any headline
     that reaches across paints over it. Scales with the viewport, and is
     hidden on small screens where the big centred headline would collide
     with it. */
  position: absolute;
  top: 40px;
  right: 32px;
  /* Scales linearly from ~320px on a wide desktop down to 100px right at
     the 560px breakpoint where it hides — so it visibly shrinks through
     the band where the headline starts to overlap it. The calc() is the
     straight line through (1280px → 307px) and (560px → 100px). */
  width: clamp(100px, calc(28.75vw - 61px), 320px);
  height: auto;
  z-index: 0;
  opacity: 0.9;
  pointer-events: auto;
}
.hero-content {
  margin: 0 auto;
  max-width: 600px;
}
.hero .eyebrow { color: rgba(234, 242, 251, 0.75); }
.hero h1 {
  font-size: clamp(40px, 7vw, 84px);
  color: var(--paper);
}
.hero-sub {
  font-size: 19px;
  color: rgba(234, 242, 251, 0.8);
  margin: 24px 0 36px;
  text-transform: none;
}
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero .btn-ghost {
  border-color: var(--paper);
  color: var(--paper);
}
.hero .btn-ghost:hover { background: var(--paper); color: var(--navy); }

/* ---------- Marquee (words) ---------- */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--navy);
  padding: 16px 0;
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-x 22s linear infinite;
  white-space: nowrap;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  color: var(--paper);
  font-weight: 700;
  text-transform: lowercase;
  font-size: 18px;
  padding: 0 18px;
}
.marquee-track .dot { color: var(--accent); padding: 0 6px; }

@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Philosophy gallery ---------- */
.philosophy {
  padding: 90px var(--gap) 48px;
  overflow: hidden;
}
.philosophy-inner {
  position: relative;
  padding: 0 var(--gap);
}
.philosophy-eyebrow {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 12px;
  font-size: clamp(32px, 5vw, 56px);
}
.philosophy .need-note {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 48px;
}

.blob {
  position: absolute;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}
.blob--1 {
  width: 420px;
  height: 480px;
  top: -60px;
  left: -140px;
}

.squiggle {
  position: absolute;
  width: 70px;
  height: 32px;
  z-index: 2;
  pointer-events: none;
}
.squiggle--1 { bottom: 6%; left: 2%; transform: rotate(-6deg); }
.squiggle--2 { top: 4%; right: 6%; transform: rotate(8deg); }

.photo-card-row {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 30px 0 10px;
}

.photo-card {
  position: relative;
  width: 276px;
  margin: 34px -18px;
  padding: 0;
  border: 7px solid var(--paper-card);
  border-radius: 16px;
  background: var(--paper-card);
  box-shadow: 0 18px 34px rgba(20, 18, 15, 0.16);
  /* --push lets JS shove this card sideways, clear of a hovered neighbour,
     without disturbing its own base rotation/lift below. */
  --push: 0px;
  transform: translateX(var(--push)) rotate(var(--rot, 0deg)) translateY(var(--ty, 0px));
  transition: transform var(--ease-fast), box-shadow var(--ease-fast), z-index 0s;
  cursor: default;
}
.photo-card:hover {
  transform: rotate(0deg) translateY(-10px) scale(1.04) !important;
  box-shadow: 0 26px 44px rgba(20, 18, 15, 0.22);
  z-index: 10;
}
.photo-card.is--1 { --rot: -7deg; --ty: 6px; z-index: 4; }
.photo-card.is--2 { --rot: 4deg; --ty: -18px; z-index: 3; }
.photo-card.is--3 { --rot: -3deg; --ty: 22px; z-index: 2; }
.photo-card.is--4 { --rot: 6deg; --ty: -4px; z-index: 1; }

.photo-placeholder.small {
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  transform: none;
}

.pill {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -16px;
  display: inline-block;
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 11px 19px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(20, 18, 15, 0.18);
}
.pill--lavender { background: #d9c9fb; }
.pill--orange { background: var(--accent); color: var(--paper); }
.pill--green { background: #e6fab9; }
.pill--pink { background: #ffd9ec; }

@media (max-width: 860px) {
  .photo-card { width: 228px; margin: 26px -10px; }
  .blob--1 { width: 300px; height: 340px; left: -160px; top: -40px; }
}

@media (max-width: 560px) {
  /* The centred mobile headline overlaps the corner watermark badly at
     this width, hurting readability — drop it rather than fight it. */
  .hero-logo { display: none; }
  .photo-card-row { flex-direction: column; }
  .photo-card { margin: 22px 0; transform: none !important; width: min(100%, 340px); }
  .pill { position: static; margin-top: 12px; max-width: 100%; box-shadow: none; }
  .blob { display: none; }
}

/* ---------- Tags (wiggle) ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 14px;
}

@keyframes wiggle {
  from { transform: rotate(4deg); }
  to { transform: rotate(-4deg); }
}
@media (hover: hover) and (pointer: fine) {
  [data-wiggle]:hover { animation: wiggle 0.28s steps(2, end) infinite; }
}

.section-head { padding: 0 var(--gap) 40px; }
.section-head h2 { font-size: clamp(30px, 4vw, 48px); }
.section-head p { color: var(--muted); margin: 0; }

/* ---------- How I help: need cards ---------- */
.how-i-help {
  padding: 48px var(--gap) 130px;
  border-top: 2px solid var(--navy);
}

.need-heading {
  text-align: center;
  margin-bottom: 60px;
}
.need-heading h2 { font-size: clamp(32px, 5vw, 56px); }
.need-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}
.need-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: currentColor;
  box-shadow: 0 6px 0 currentColor;
}
.need-note { color: var(--muted); margin: 18px 0 0; }

.need-cards {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
  padding-top: 30px;
}

.need-card {
  position: relative;
  width: 276px;
  min-height: 408px;
  margin: 20px -24px 0;
  padding: 40px 31px 34px;
  border-radius: 22px;
  box-shadow: 0 20px 38px rgba(20, 18, 15, 0.2);
  /* --push lets JS shove this card sideways, clear of a hovered neighbour,
     without disturbing its own base rotation/lift below. */
  --push: 0px;
  transform: translateX(var(--push)) rotate(var(--rot, 0deg)) translateY(var(--ty, 0px));
  transition: transform var(--ease-fast), box-shadow var(--ease-fast), z-index 0s;
}
.need-card:hover {
  transform: rotate(0deg) translateY(-10px) scale(1.03) !important;
  box-shadow: 0 28px 48px rgba(20, 18, 15, 0.28);
  z-index: 10;
}
.need-card:nth-child(1) { --rot: -6deg; --ty: 10px; z-index: 1; }
.need-card:nth-child(2) { --rot: 4deg; --ty: -6px; z-index: 2; }
.need-card:nth-child(3) { --rot: -2deg; --ty: -14px; z-index: 3; }
.need-card:nth-child(4) { --rot: 3deg; --ty: -4px; z-index: 2; }
.need-card:nth-child(5) { --rot: -5deg; --ty: 8px; z-index: 1; }

.need-card--green { background: #1f6f5a; color: var(--paper); }
.need-card--blue { background: #7e93f5; color: var(--paper); }
.need-card--orange { background: var(--accent); color: var(--paper); }
.need-card--maroon { background: #8f2e52; color: var(--paper); }
.need-card--lavender { background: #ecd4fb; color: var(--ink); }

.need-sticker {
  position: absolute;
  top: -32px;
  right: 18px;
  width: 68px;
  height: 68px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
}

.need-card h3 {
  font-size: 31px;
  margin: 0 0 14px;
}
.need-card hr {
  border: none;
  border-top: 1px solid currentColor;
  opacity: 0.5;
  margin: 0 0 18px;
}
.need-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.need-card li {
  font-size: 19px;
  padding-left: 14px;
  position: relative;
}
.need-card li::before {
  /* Small hexagon bullet — a plain shape (not a glyph) so it's crisp at any
     size and colours itself via currentColor, same trick as .need-card hr's
     border. Vertically centred against the (slightly larger) text line
     rather than pinned to the top, so it sits mid-line regardless of
     font-size. Checked against every li's text at 320/375/700/860/1280px:
     19px is the largest size that still fits "Productised services" (the
     longest item) on one line at the tightest breakpoint (240px-wide card
     at <=860px) — going larger wraps it there. */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.8;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

@media (max-width: 860px) {
  .need-cards { gap: 0; }
  .need-card { width: 240px; min-height: 360px; margin: 20px -18px 0; padding: 34px 24px 28px; }
}

@media (max-width: 560px) {
  .need-cards { flex-direction: column; align-items: center; }
  .need-card { margin: 14px 0; transform: none !important; width: min(336px, 100%); }
  /* Column stack: override the desktop fan z-indexes (…3, 2, 1) so each
     card — and its icon badge that overhangs upward — sits above the card
     before it. Otherwise the Coaching and Growth badges (cards 4 and 5,
     which carry a lower fan z-index than the card above) slip behind the
     previous card. z-index:auto lets DOM order govern, so each later card
     paints on top. */
  .need-cards .need-card { z-index: auto; }
}

/* ---------- Results: section background & decoration ---------- */
.results {
  position: relative;
  background: var(--navy);
  padding: 110px 0 48px;
  overflow: hidden;
}
.on-dark { color: var(--paper); }
.on-dark-muted { color: rgba(242, 236, 227, 0.6) !important; }

.results .spike-badge {
  position: absolute;
  width: 320px;
  height: 320px;
  top: 8%;
  right: -80px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
.results .squiggle--results {
  top: 6%;
  left: 4%;
  opacity: 0.8;
}

.results .section-head {
  position: relative;
  z-index: 2;
}

/* ---------- Results: flat grid of cards ----------
   All 5 cards laid out flat and fully visible, wrapping and centring via
   flexbox (the same pattern as .photo-card-row / .need-cards elsewhere on
   the page) rather than the site's usual scattered/rotated card look —
   deliberately plain here so the case studies read clearly at a glance. */
.results-stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
}

.result-card {
  width: 264px;
  background: var(--paper-card);
  border: 8px solid var(--paper-card);
  border-radius: 20px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: transform var(--ease-default), box-shadow var(--ease-fast);
}
.result-card:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }

.result-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.5);
}

.result-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, #2b2b2b, #2b2b2b 10px, #1e1e1e 10px, #1e1e1e 20px);
}
.result-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stack-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.stack-sticker {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: #ff4fa3;
  color: var(--paper);
  font-weight: 800;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  transform: rotate(-10deg);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.4);
}

.showcase-tag {
  position: relative;
  display: inline-block;
  margin-top: -14px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

.result-body { padding: 14px 18px 12px; }

.showcase-title {
  color: var(--ink);
  font-size: 23px;
  margin: 0 0 6px;
}

.showcase-link {
  position: relative;
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  padding-bottom: 6px;
  transition: color var(--ease-fast);
}
.showcase-link:hover { color: var(--accent); }
.showcase-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor;
}

@media (max-width: 700px) {
  /* Force a single column: at some widths in this range two 280px cards
     still fit side by side (justify-content:center just packs them in),
     so flex-direction:column guarantees one per row regardless of how
     much space is available — same pattern as .need-cards/.testimonial-
     marquee-track elsewhere on the page. Card size matches .need-card's
     own small-screen size exactly, rather than growing closer to full
     viewport width, which read as oversized/overwhelming here. .need-card
     gets its effective width from min(336px,100%) resolving inside
     .how-i-help's own 24px side padding (baked into that section, unlike
     .results) — added the same side padding here so the 100% basis
     matches and the two card sizes actually agree, not just the formula. */
  .results-stack { flex-direction: column; align-items: center; gap: 24px; padding: 0 var(--gap); }
  .result-card { width: min(336px, 100%); }
  .results .spike-badge { display: none; }
}

/* ---------- Story pages (stories/*.html) ---------- */
.story-hero {
  position: relative;
  height: 60vh;
  min-height: 380px;
  max-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.story-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-hero::after {
  /* Same idea as the main hero's scrim: dark at the bottom (where the
     title sits) fading out toward the top, so the photo still reads. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 27, 54, 0.88) 0%, rgba(16, 27, 54, 0.4) 55%, rgba(16, 27, 54, 0.05) 100%);
}
.story-hero-content {
  position: relative;
  z-index: 1;
  padding: 0 var(--gap) 48px;
  width: 100%;
}
.story-back {
  display: inline-block;
  color: var(--paper);
  opacity: 0.85;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 18px;
  transition: opacity var(--ease-fast), color var(--ease-fast);
}
.story-back:hover { opacity: 1; color: var(--accent); }
.story-hero-content .tag { margin-bottom: 18px; }
.story-hero-content h1 {
  color: var(--paper);
  font-size: clamp(32px, 5.5vw, 58px);
  max-width: 780px;
}

.story-body { padding: 80px var(--gap) 30px; }
.story-content { max-width: 720px; margin: 0 auto; }
.story-content p {
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 24px;
}
.story-stat {
  display: inline-block;
  background: #ff4fa3;
  color: var(--paper);
  font-weight: 800;
  font-size: 20px;
  padding: 12px 20px;
  border-radius: 999px;
  transform: rotate(-4deg);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
  margin: 4px 0 28px;
}
.story-cta { text-align: center; margin: 12px 0 40px; }

/* ---------- About ---------- */
.about { padding: 100px 0; border-top: 1px solid var(--line); background: var(--paper); }
.about-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  padding: 0 var(--gap);
  align-items: center;
}
.about-photo { position: relative; }
.photo-placeholder {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: repeating-linear-gradient(135deg, #e9e1d2, #e9e1d2 10px, #ded4bf 10px, #ded4bf 20px);
  border-radius: 20px;
  transform: rotate(-2deg);
}
.photo-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-tag {
  position: absolute;
  bottom: -14px;
  right: -10px;
  transform: rotate(6deg);
}
.about-copy h2 { font-size: clamp(28px, 4vw, 44px); }
.about-copy p { color: var(--navy); font-size: 17px; max-width: 560px; }
.about-copy .btn-primary { margin-top: 8px; }

/* ---------- Brag statement: mixed weight/style + doodle annotations ---------- */
.brag-statement {
  background: var(--navy);
  padding: 56px var(--gap);
  text-align: center;
}
.brag-statement .eyebrow {
  /* Extra clearance below the eyebrow line specifically here — the
     shared .eyebrow's default 14px margin sat too close to .brag-text
     below it. */
  margin-bottom: 32px;
}

.brag-text {
  color: var(--paper);
  font-weight: 800;
  font-size: clamp(26px, 4.4vw, 48px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 900px;
  margin: 18px auto 0;
}
.brag-text em {
  /* Match the reference: italic words stay the same colour as the rest of
     the line (font/weight shift only), not the sitewide accent colour. */
  color: inherit;
  font-weight: 400;
}
.brag-word--squiggle em {
  /* "truth" is the one exception — orange, matching its wavy underline. */
  color: var(--accent);
}

.brag-word {
  position: relative;
  display: inline-block;
  padding: 0 0.06em;
}
.doodle {
  position: absolute;
  pointer-events: none;
  overflow: visible;
}
.brag-word--circle {
  /* The hand-drawn circle bleeds ~0.38em past the word's own box on each
     side (see .doodle--circle below) — margin (not padding) pushes
     neighbouring words clear of it without resizing the box the circle
     is drawn relative to. */
  margin: 0 0.3em;
}
.doodle--circle {
  top: -0.32em;
  left: -0.38em;
  width: calc(100% + 0.76em);
  height: calc(100% + 0.64em);
}
.doodle--squiggle {
  left: -0.04em;
  right: -0.04em;
  bottom: -0.34em;
  width: calc(100% + 0.08em);
  height: 0.3em;
}

/* ---------- Clients: testimonial marquee ---------- */
.clients { padding: 48px 0; border-top: 1px solid var(--line); background: var(--paper); }
.clients .container { text-align: center; margin-bottom: 50px; }
.clients h2 { font-size: clamp(30px, 4.5vw, 50px); margin: 0; }

.testimonial-marquee { overflow: hidden; padding: 16px 0; }
.testimonial-marquee-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  gap: 24px;
  /* Own keyframe rather than the shared marquee-x's translateX(-50%):
     that relies on width:max-content correctly self-measuring the track
     plus its gaps, which some browsers get slightly wrong when `gap` is
     involved — the halfway point lands short of where the duplicate set
     actually starts, showing empty track before content catches up.
     main.js clones the single source set in the HTML, measures exactly
     where the clone starts, and sets --marquee-distance and the
     animation-duration from that — so this self-corrects if cards are
     added or removed later. The 2752px/62.72s fallbacks below are just
     the last measured values, in case JS hasn't run yet.
     Starts paused — main.js adds .is-playing once the section scrolls
     into view, so it doesn't run before anyone can see it. */
  animation: testimonial-marquee-x 62.72s linear infinite;
  animation-play-state: paused;
}
.testimonial-marquee-track.is-playing { animation-play-state: running; }
/* Higher specificity than .is-playing above, so hovering always pauses
   regardless of whether the section has started playing yet. */
.testimonial-marquee:hover .testimonial-marquee-track { animation-play-state: paused; }

@keyframes testimonial-marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-1 * var(--marquee-distance, 2752px))); }
}

.testimonial-spacer {
  /* Same footprint as a card but no content/background — a deliberate
     blank beat before the first card of each loop, so it isn't already
     mid-exit when a reader arrives at it. */
  flex: 0 0 320px;
}

.testimonial-card {
  /* "Stamp" edge: four background layers paint small var(--paper)
     coloured dots in a row along each edge, over a white base — since
     the section behind is the same var(--paper), the dots read as
     scalloped perforation cut into the card rather than a pattern
     painted on top. Kept as plain background layers (not mask-image)
     deliberately: masking would need vendor-prefixed mask-composite
     values to work reliably in Safari, which isn't worth the risk here
     for a purely decorative effect. */
  --stamp-bite: 6px;
  --stamp-spacing: 18px;
  position: relative;
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  background-image:
    radial-gradient(circle var(--stamp-bite) at center top, var(--paper) 0 calc(var(--stamp-bite) - 0.5px), transparent var(--stamp-bite) 100%),
    radial-gradient(circle var(--stamp-bite) at center bottom, var(--paper) 0 calc(var(--stamp-bite) - 0.5px), transparent var(--stamp-bite) 100%),
    radial-gradient(circle var(--stamp-bite) at left center, var(--paper) 0 calc(var(--stamp-bite) - 0.5px), transparent var(--stamp-bite) 100%),
    radial-gradient(circle var(--stamp-bite) at right center, var(--paper) 0 calc(var(--stamp-bite) - 0.5px), transparent var(--stamp-bite) 100%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: var(--stamp-spacing) 100%, var(--stamp-spacing) 100%, 100% var(--stamp-spacing), 100% var(--stamp-spacing);
  background-position: top, bottom, left, right;
  border-radius: 3px;
  box-shadow: 0 12px 26px rgba(16, 27, 54, 0.2);
  padding: 46px 26px 24px;
}

.testimonial-mark {
  position: absolute;
  top: 4px;
  left: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 68px;
  line-height: 1;
  color: var(--navy);
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
}

.testimonial-text {
  position: relative;
  color: var(--navy);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.quote-highlight { color: var(--accent); }

.testimonial-name {
  margin: 16px 0 0;
  padding-top: 14px;
  text-align: right;
  color: var(--navy);
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
}

/* Mobile: drop the scrolling marquee and list the testimonials in a
   static vertical column. The seamless loop's JS-cloned duplicates and
   the lead-in spacer all carry aria-hidden, so hiding those leaves just
   the seven real cards. */
@media (max-width: 700px) {
  .testimonial-marquee { overflow: visible; padding: 8px 0; }
  .testimonial-marquee-track {
    flex-direction: column;
    align-items: center;
    width: auto;
    gap: 20px;
    animation: none;
  }
  .testimonial-marquee-track > [aria-hidden="true"] { display: none; }
  .testimonial-card { flex: 0 0 auto; width: min(360px, 88%); }
}

/* ---------- Contact ---------- */
.contact {
  background: var(--navy);
  color: var(--paper);
  padding: 64px var(--gap) 16px;
  text-align: center;
}
.contact h2 {
  font-size: clamp(30px, 5vw, 58px);
  max-width: 820px;
  margin: 0 auto 40px;
}
.contact-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.contact-email {
  display: inline-block;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  transition: transform var(--ease-bounce);
}
.contact-email:hover {
  /* "Towards the user": scales up and lifts slightly, like it's popping
     off the page. --ease-bounce (an overshoot curve) drives both the
     hover-in pop and the return, so it settles with a bounce either
     way rather than just snapping back flat. */
  transform: scale(1.1) translateY(-6px);
}

/* Red circle that "draws itself" around the email, holds, fades, pauses,
   then repeats — to pull the eye to the address. The SVG stretches to the
   email box (preserveAspectRatio="none" + non-scaling-stroke keeps the
   line an even weight at any width); pointer-events stay off so the mailto
   link is still clickable. The 24px block margin keeps the loop clear of
   the "Email us today" line above and the "YouTube" link below. */
.contact-email-wrap {
  position: relative;
  display: inline-block;
  margin: 24px 0;
}
.email-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 72px);
  height: calc(100% + 40px);
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.email-circle path {
  fill: none;
  stroke: #ec3a2f;
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: email-circle-draw 10s ease-in-out infinite;
}
@keyframes email-circle-draw {
  /* 10s cycle: draw ~1.2s, hold ~2.3s, fade ~0.8s, then a ~5.7s pause
     before the next draw (roughly double the previous pause). */
  0%   { stroke-dashoffset: 100; opacity: 1; }  /* undrawn */
  12%  { stroke-dashoffset: 0;   opacity: 1; }  /* finished drawing */
  35%  { stroke-dashoffset: 0;   opacity: 1; }  /* hold */
  43%  { stroke-dashoffset: 0;   opacity: 0; }  /* fade out */
  99%  { stroke-dashoffset: 0;   opacity: 0; }  /* long pause, hidden */
  100% { stroke-dashoffset: 100; opacity: 0; }  /* reset for next loop */
}
.contact-socials { display: flex; gap: 24px; }
.contact-socials a { text-decoration: none; font-weight: 600; opacity: 0.8; transition: opacity var(--ease-fast), color var(--ease-fast); }
.contact-socials a:hover { opacity: 1; color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--navy);
  color: var(--paper);
  padding: 48px var(--gap) 0;
  /* .footer-top's margin-bottom would otherwise collapse straight through
     this element (no bottom padding/border to stop it) and leak out as
     visible page-background gap below the navy. overflow:hidden
     establishes a new block-formatting context, which contains it. Safe
     to use here since .footer-bottom-bar is a sibling of <footer>, not a
     child, so nothing of it gets clipped by this. */
  overflow: hidden;
}

.site-footer .squiggle--footer {
  top: 14px;
  left: 6%;
  opacity: 0.9;
}

.footer-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 32px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(242, 236, 227, 0.16);
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--paper);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.footer-logo-mark {
  height: 3.6em;
  width: auto;
  flex: 0 0 auto;
  display: block;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin: 0 auto;
}
.footer-links a {
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  opacity: 0.8;
  transition: opacity var(--ease-fast), color var(--ease-fast);
}
.footer-links a:hover { opacity: 1; color: var(--accent); }
.footer-social.contact-socials { gap: 18px; }

.footer-bottom-bar {
  /* Sits as a sibling of <footer> in the HTML (not nested inside it), so
     it's a direct child of <body> — which has no horizontal padding —
     and is naturally full-width with no vw/breakout math needed. An
     earlier version tried to break this out of the padded <footer> using
     100vw + negative margins, which is a well-known source of Safari
     layout bugs (100vw includes the scrollbar gutter, and combined with
     this site's hidden-scrollbar styling it was leaving phantom extra
     height below the bar). Moving it out of the padded container in the
     markup sidesteps the whole problem. */
  background: var(--accent);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--gap);
  color: var(--paper);
  font-size: 13px;
}

@media (max-width: 560px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-links { margin: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .split-word-inner { transition: none; transform: translateY(0); }
  .marquee-track, .testimonial-marquee-track { animation: none; }
  [data-wiggle]:hover { animation: none; }
  .email-circle path { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  /* .about-photo is the positioning anchor for .about-tag (the "hi, I'm
     Naz" pill) — it needs the same width cap as .photo-placeholder,
     otherwise it stays full-width as a grid item and the tag's absolute
     right/bottom offsets anchor to that full width instead of the
     visually narrower photo. */
  .about-photo { max-width: 320px; }
  .photo-placeholder { max-width: 320px; }
}

@media (max-width: 700px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .site-nav.open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--accent);
    padding: 20px var(--gap) 28px;
    gap: 18px;
    margin: 0;
  }
  .nav-links a.nav-cta { margin-top: 4px; }
  .hero { padding: 110px var(--gap) 60px; }
}