:root {
  /* Tailwind default palette (v4) — every colour on this site comes from here.
     Grounds follow kloom.app: warm yellow-white page, plain white cards. */
  --tw-black: #000000;
  --tw-white: #ffffff;
  --tw-neutral-900: #171717;
  --tw-stone-500: #78716c;
  --tw-stone-300: #d6d3d1;
  --tw-stone-200: #e7e5e4;
  --tw-amber-50: #fffbeb;
  --tw-orange-700: #c2410c;
  --tw-orange-500: #f97316;
  --tw-orange-50: #fff7ed;
  --tw-orange-200: #fed7aa;

  /* Semantic roles mapped onto the palette above */
  --color-black: var(--tw-black);
  --color-white: var(--tw-white);
  --color-orange: var(--tw-orange-700);
  --color-gray: var(--tw-stone-500);
  /* Warm yellow-white page ground; cards sit on it in plain white */
  --color-bg: var(--tw-amber-50);
  --color-dark: var(--tw-neutral-900);
  --color-light: var(--tw-amber-50);
  --color-muted: var(--tw-stone-200);
  /* Stroke around media frames */
  --color-stroke: var(--tw-stone-300);
  --frame-stroke: 5px;
  /* Same hairline on dark surfaces — white at low alpha reads over any image */
  --color-stroke-on-dark: rgba(255, 255, 255, 0.14);
  --color-tan: var(--tw-orange-200);
  --color-orange-soft: var(--tw-orange-50);
  --font-heading: "Tinos", "Times New Roman", Times, serif;
  --font-body: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Width of the page container — every section sits inside it */
  --page-max: 1100px;
  /* Length of the soft fade where one section's ground meets the next */
  --section-fade: clamp(96px, 12vw, 180px);
  --header-height: 78px;
  --main-pad-top: calc(var(--header-height) + 1.5rem);
}

@media (min-width: 768px) {
  :root {
    --main-pad-top: calc(var(--header-height) + 2rem);
  }
}

@media (min-width: 1200px) {
  :root {
    --main-pad-top: calc(var(--header-height) + 2.5rem);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  overflow-x: clip;
  background-color: var(--color-bg);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1rem, 1rem);
  font-weight: 400;
  color: var(--color-black);
  line-height: 1.5;
  min-height: 100vh;
}

.site-main {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1.5rem 1rem;
  padding-top: var(--main-pad-top);
}

@media (min-width: 768px) {
  .site-main {
    padding: 2rem 2rem;
    padding-top: var(--main-pad-top);
  }
}

@media (min-width: 1200px) {
  .site-main {
    padding: 2.5rem 0;
    padding-top: var(--main-pad-top);
  }
}

.site-header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  padding: 14px 14px 0;
}

.navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1rem 24px;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  transition: max-width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-compact .navbar {
  max-width: 550px;
}

@media (min-width: 768px) {
  .navbar {
    padding: 1.25rem 24px;
  }
}

.navbar__logo {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-black);
  text-decoration: none;
}

.navbar__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.navbar__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-black);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.navbar__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.navbar__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.navbar__menu {
  display: none;
  align-items: center;
  gap: 2rem;
}

.navbar__menu.is-open {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-white);
  padding: 1.5rem 1rem 2rem;
  border-radius: 0 0 20px 20px;
}

.navbar__links {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.navbar__links a {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-black);
  text-decoration: none;
}

.navbar__links a:hover {
  color: var(--color-orange);
}

.navbar__socials {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.navbar__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  flex-shrink: 0;
}

.navbar__social svg {
  width: 16px;
  height: 16px;
}

.navbar__social--x {
  background-color: var(--color-black);
}

.navbar__social--linkedin {
  /* LinkedIn brand blue — deliberately not a Tailwind token */
  background-color: #0a66c2;
}

@media (min-width: 768px) {
  .navbar__toggle {
    display: none;
  }

  .navbar__menu {
    display: flex;
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
    background: none;
    border: none;
    padding: 0;
  }

  .navbar__links {
    flex-direction: row;
    gap: 2rem;
  }
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--main-pad-top) + 1rem);
  margin-top: calc(-1 * var(--main-pad-top));
  isolation: isolate;
}

.site-main__flow {
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-color: var(--color-bg);
  z-index: -1;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-top: 1rem;
  padding-bottom: 3.5rem;
}

.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: 460px;
}

.hero__quote {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-gray);
}

.hero__quote strong {
  font-weight: 600;
  color: var(--color-black);
}

.hero__signature {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-black);
}

@media (min-width: 900px) {
  .hero__content {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }

  .hero__intro {
    flex: 1 1 auto;
  }

  .hero__aside {
    flex: 0 0 auto;
    padding-bottom: 0.5rem;
  }
}

.hero__marquee {
  --marquee-gap: 1rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  padding: 2.5rem 0 2rem;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 14%,
    #000 86%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 14%,
    #000 86%,
    transparent
  );
}

.hero__marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: var(--marquee-gap);
  will-change: transform;
}

.hero__marquee-item {
  flex: 0 0 auto;
  width: clamp(190px, 24vw, 320px);
  aspect-ratio: 16 / 10;
  background-color: var(--color-muted);
  border: var(--frame-stroke) solid var(--color-stroke);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
}

.hero__marquee-item span {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-gray);
}

.hero__marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .hero__marquee-track {
    transform: none !important;
  }
}

.hero__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-black);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.hero__heading-accent {
  display: block;
  font-style: italic;
  color: var(--color-orange);
}

.hero__heading .word {
  display: inline-block;
  white-space: nowrap;
}

.hero__heading .char {
  display: inline-block;
  /* entrance animated by GSAP in script.js */
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Shared pill shape; the two variants below carry the weight difference. */
.hero__cta {
  --cta-chip: 2.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  /* The primary's height is set by its arrow chip, not its text. Matching the
     line box to the chip keeps the outline variant exactly as tall. */
  line-height: var(--cta-chip);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Primary: the products route, so it keeps the solid weight and the arrow. */
.hero__cta--primary {
  color: var(--color-white);
  background: linear-gradient(90deg, var(--color-black), var(--color-orange));
  border: 1px solid transparent;
  padding: 0.85rem 0.85rem 0.85rem 2rem;
}

/* Secondary: outline only, and no arrow chip, so it reads as the quieter of
   the two rather than a second equal call to action. */
.hero__cta--outline {
  color: var(--color-black);
  background-color: transparent;
  border: 1px solid var(--color-black);
  /* Matches the primary's height: same vertical padding, and the horizontal
     padding accounts for the arrow chip the primary carries. */
  padding: 0.85rem 2rem;
}

.hero__cta--outline:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.hero__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cta-chip);
  height: var(--cta-chip);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.16);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.hero__cta--primary:hover {
  opacity: 0.85;
}

.hero__cta:hover .hero__cta-icon {
  transform: translateX(3px);
}


/* Two paths — the fork between buying something ready-made and hiring me.
   Its cards use the shared .icon-card, as does the services overview. */
.paths {
  padding: 6rem 0 0;
}

.paths__head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.paths__label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 1rem;
}

.paths__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-black);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  max-width: 18ch;
  margin: 0 auto;
}

.templates__heading-accent,
.overview__heading-accent,
.testimonials__heading-accent,
.tools__heading-accent,
.gallery__heading-accent,
.faq__heading-accent,
.paths__heading-accent {
  font-style: italic;
  color: var(--color-orange);
}

.paths__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .paths__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.icon-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

a.icon-card:hover {
  border-color: var(--color-stroke);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  a.icon-card:hover {
    transform: none;
  }
}

.icon-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background-color: var(--color-orange-soft);
  color: var(--color-orange);
  margin-bottom: 1.75rem;
}

.icon-card__icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.icon-card__title {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 0.75rem;
}

.icon-card__text {
  color: var(--color-gray);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 34ch;
  margin-bottom: 1.75rem;
}

/* The gap above only exists to clear a link row; drop it when there is none. */
.icon-card__text:last-child {
  margin-bottom: 0;
}

/* Pushed to the bottom so both cards line their links up, whatever the copy. */
.icon-card__link {
  margin-top: auto;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-orange);
}

.icon-card__link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.icon-card:hover .icon-card__link span {
  transform: translateX(3px);
}

.templates {
  position: relative;
  padding: 8rem 0 4rem;
}

/* Full-bleed white pool for the templates section. It fades in from the page
   ground at the top and back out at the bottom, so the sections around it meet
   it without a hard edge. */
.templates::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(
    var(--color-bg) 0,
    var(--color-white) var(--section-fade),
    var(--color-white) calc(100% - var(--section-fade)),
    var(--color-bg) 100%
  );
  /* Paints after .site-main__flow::before (same z-index, later in tree order),
     but still behind this section's own content. */
  z-index: -1;
}

.templates__head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.templates__label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 1rem;
}

.templates__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-black);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
}

/* Shared: the single link that closes a section, pushed to the right edge. */
.section-link {
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-top: 2.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-orange);
  text-decoration: none;
}

.section-link span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.section-link:hover span {
  transform: translateX(3px);
}

/* The standalone listing page opens on this section, so it needs far less
   room above it than the homepage does. */
.templates--index {
  padding-top: 2rem;
}

/* Services overview — the three headline services, with a quote CTA */
.overview {
  position: relative;
  padding: 5rem 0 4rem;
}

/* Services sit on white too. The templates pool above stays white at its
   bottom edge so the two sections read as one white stretch, which then
   fades back to the page ground below the services. */
.templates:has(+ .overview)::before {
  background: linear-gradient(var(--color-bg) 0, var(--color-white) var(--section-fade));
}

.overview::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(
    var(--color-white) calc(100% - var(--section-fade)),
    var(--color-bg) 100%
  );
  z-index: -1;
}

/* On white, the service cards flip to the warm ground colour, and their
   icon tiles go white so they still stand off the card. */
.overview .icon-card {
  background-color: var(--color-bg);
  border-color: rgba(194, 65, 12, 0.1);
}

.overview .icon-card__icon {
  background-color: var(--color-white);
}

.overview__head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.overview__label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 1rem;
}

.overview__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-black);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
}

.overview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Four services, so 2x2 rather than a row of three with an orphan below. */
@media (min-width: 640px) {
  .overview__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.templates__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 640px) {
  .templates__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .templates__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.template-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.template-card__thumb {
  aspect-ratio: 4 / 3;
  background-color: var(--color-muted);
  border: var(--frame-stroke) solid var(--color-stroke);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.template-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-card__thumb--carousel {
  position: relative;
}

.template-card__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* crossfade animated by GSAP in script.js */
}

.template-card__slide.is-active {
  opacity: 1;
}

.template-card__thumb-placeholder {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-gray);
}

.template-card__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.template-card__title {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-black);
}

.template-card__subtitle {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-gray);
  margin-top: 0.15rem;
}

.template-card__badge {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-black);
  white-space: nowrap;
}

/* Simple Process */
.process {
  padding: 4rem 0 2rem;
}

.process__head {
  text-align: center;
  margin-bottom: 3rem;
}

.process__label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 1rem;
}

.process__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-black);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  max-width: 18ch;
  margin: 0 auto;
}

.process__heading-accent {
  font-style: italic;
  color: var(--color-orange);
}

.process__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.process-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5rem;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
}

.process-card__dots {
  display: flex;
  gap: 0.4rem;
}

.process-card__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--color-orange);
}

.process-card__dot.is-dim {
  opacity: 0.25;
}

/* Oversized step number, ghosted into the top-right corner. */
.process-card__number {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-family: var(--font-body);
  font-size: clamp(6rem, 12vw, 9rem);
  font-weight: 700;
  line-height: 1;
  /* Same accent and same fade as the dimmed dots above, so the card's two
     decorative elements read as one family. */
  color: var(--color-orange);
  opacity: 0.25;
  pointer-events: none;
}

.process-card__title {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-black);
  margin-top: clamp(6rem, 11vw, 8.5rem);
  margin-bottom: 0.75rem;
}

.process-card__text {
  color: var(--color-gray);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 34ch;
}

@media (min-width: 900px) {
  .process__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* About me */
.about {
  padding: 4rem 0 2rem;
}

.about__head {
  text-align: center;
  margin-bottom: 3rem;
}

.about__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
}

.about__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-black);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  max-width: 20ch;
  margin: 0 auto;
}

.about__heading-accent {
  font-style: italic;
  color: var(--color-orange);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

.about__image {
  position: relative;
  overflow: hidden;
  /* Without an explicit width, stretching to the card's height makes the
     4:5 ratio push the image wider than its column and under the card. */
  width: 100%;
  aspect-ratio: 4 / 5;
  background-color: var(--color-muted);
  border: var(--frame-stroke) solid var(--color-stroke);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about__image-placeholder {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-gray);
}

.about__card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 1.5rem;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
}

.about__label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 1rem;
}

.about__text {
  color: var(--color-gray);
  font-size: 1rem;
  line-height: 1.7;
}

.about__signature {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-black);
  margin-top: auto;
  padding-top: 1.5rem;
}

@media (min-width: 900px) {
  .about__grid {
    grid-template-columns: 1fr 1.15fr;
  }

  .about__card {
    padding: 2.5rem;
  }
}

/* Testimonials */
.testimonials {
  /* Extra room at the foot: the dark gallery starts straight after this. */
  padding: 4rem 0 5rem;
}

.testimonials__head {
  text-align: center;
  margin-bottom: 3rem;
}

.testimonials__label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 1rem;
}

.testimonials__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-black);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  max-width: 22ch;
  margin: 0 auto;
}

/* Full-bleed so the row of quotes runs off both edges. */
.testimonials__marquee {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.testimonials__track {
  display: flex;
  align-items: stretch;
  width: max-content;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  width: 21rem;
  flex-shrink: 0;
  /* 8px each side = 16px between cards */
  margin: 0 8px;
  padding: 2rem;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
}

.testimonial-card__mark {
  /* Heavy sans double-quote, filled with an orange gradient. */
  font-family: var(--font-body);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 0.7;
  background-image: linear-gradient(
    160deg,
    var(--tw-orange-700) 10%,
    var(--tw-orange-500) 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 2.5rem;
}

.testimonial-card__quote {
  margin: 0;
  color: var(--color-black);
  font-size: 1.05rem;
  line-height: 1.75;
}

.testimonial-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 3rem;
}

.testimonial-card__name {
  font-family: var(--font-body);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-black);
}

.testimonial-card__role {
  font-size: 0.95rem;
  color: var(--color-gray);
}

@media (min-width: 768px) {
  .testimonial-card {
    width: 26rem;
    padding: 2.5rem;
  }
}

/* AI Toolkit */
.tools {
  padding: 4rem 0 5rem;
}

.tools__head {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  margin-bottom: 2.5rem;
}

.tools__label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 0.75rem;
}

.tools__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-black);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
}

.tools__text {
  color: var(--color-gray);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 42ch;
}

.tools__marquee {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}

.tools__track {
  display: flex;
  align-items: center;
  width: max-content;
  /* scroll animated by GSAP in script.js */
}

.tools__item {
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  padding-right: clamp(2rem, 5vw, 3.5rem);
  transition: color 0.2s ease;
}

.tools__item:hover {
  color: var(--color-black);
}

/* Creative playground gallery */
.gallery {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 5rem 0;
  background-color: var(--color-dark);
  overflow: hidden;
}

.gallery__head {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 1rem;
}

.gallery__label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 1rem;
}

.gallery__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-light);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
}

.gallery__rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gallery__row {
  overflow: hidden;
}

.gallery__track {
  display: flex;
  align-items: stretch;
  width: max-content;
}

.gallery__item {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: 24rem;
  aspect-ratio: 16 / 10;
  /* 8px each side = 16px between items */
  margin: 0 8px;
  background-color: rgba(255, 255, 255, 0.06);
  border: var(--frame-stroke) solid var(--color-stroke-on-dark);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__placeholder {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 768px) {
  .gallery__item {
    width: 32rem;
  }
}

/* FAQ */
.faq {
  padding: 6rem 0 5rem;
}

.faq__head {
  text-align: center;
  margin-bottom: 3.5rem;
}

.faq__label {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 1rem;
}

.faq__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-black);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}

.faq__text {
  color: var(--color-gray);
}

.faq__text a {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}

.faq__text a:hover {
  color: var(--color-orange);
}

.faq__list {
  display: flex;
  flex-direction: column;
  max-width: 820px;
  margin: 0 auto;
}

.faq__item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.faq__item:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
  color: var(--color-black);
  cursor: pointer;
  list-style: none;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-gray);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}

.faq__icon::before {
  width: 16px;
  height: 1.5px;
}

.faq__icon::after {
  width: 1.5px;
  height: 16px;
}

/* Rotating both strokes turns the plus into a close cross. */
.faq__item[open] .faq__icon::before,
.faq__item[open] .faq__icon::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.faq__answer {
  padding: 0 0 1.75rem;
  max-width: 60ch;
  color: var(--color-gray);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .faq__icon::before,
  .faq__icon::after {
    transition: none;
  }
}

.site-footer {
  /* Sits straight on the page ground, so the light page runs to the bottom
     without a seam. The rule above the copyright does the separating. */
  margin-top: 6rem;
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 3rem 1rem 3.5rem;
}

.site-footer__wordmark {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-orange);
  text-decoration: none;
}

.site-footer__mark {
  /* The circled C rides on the wordmark's shoulder, as in the reference. */
  font-size: 0.32em;
  vertical-align: super;
  margin-left: 0.1em;
}

.site-footer__tagline {
  max-width: 38ch;
  margin-top: 1.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-gray);
}

.site-footer__label {
  display: block;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-black);
  margin-bottom: 1.5rem;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer__links a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-black);
  text-decoration: none;
  /* Long addresses should wrap rather than push the column wide. */
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

.site-footer__links a:hover {
  color: var(--color-orange);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 2rem 1rem 2.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
}

.site-footer__bottom p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-gray);
}

.site-footer__legal {
  display: flex;
  gap: 1.5rem;
}

.site-footer__legal a {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.site-footer__legal a:hover {
  color: var(--color-black);
}

@media (min-width: 768px) {
  .site-footer__top {
    /* The contact column carries the full email address, so it gets the room. */
    grid-template-columns: 2fr 1fr 1fr 1.6fr;
    gap: 3rem;
  }
}

.template-detail__back {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-gray);
  text-decoration: none;
  margin-top: 0.5rem;
}

.template-detail__back:hover {
  color: var(--color-black);
}

.template-detail {
  padding: 1.5rem 0 5rem;
}

.template-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}

.template-detail__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  min-width: 0;
}

.template-detail__title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.template-detail__title {
  font-family: var(--font-body);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-black);
}

.template-detail__badge {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-orange);
  border: 1px solid var(--color-orange);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}

.template-detail__lead {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-gray);
}

.template-detail__block {
  width: 100%;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.template-detail__block-title {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-black);
}

.template-detail__description {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-gray);
}

.template-detail__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem 1.5rem;
  list-style: none;
}

.template-detail__list li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-gray);
  padding-left: 1rem;
  position: relative;
}

.template-detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-orange);
}

.template-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.template-detail__tag {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-black);
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}

.template-detail__checklist {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  list-style: none;
}

.template-detail__checklist li {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-gray);
  padding-left: 1.6rem;
  position: relative;
}

.template-detail__checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background-color: var(--color-orange);
  color: var(--color-white);
  font-size: 0.7rem;
  line-height: 1.1rem;
  text-align: center;
}

.template-detail__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: var(--color-muted);
  border: var(--frame-stroke) solid var(--color-stroke);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-detail__image-placeholder {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-gray);
}

.template-detail__gallery {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
}

.template-detail__thumb {
  aspect-ratio: 4 / 3;
  background-color: var(--color-muted);
  border: var(--frame-stroke) solid var(--color-stroke);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-detail__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-detail__right {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.template-detail__actions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.template-detail__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.9rem 1.75rem;
  transition: opacity 0.2s ease;
}

.template-detail__btn--primary {
  color: var(--color-white);
  background: linear-gradient(90deg, var(--color-black), var(--color-orange));
}

.template-detail__btn--secondary {
  color: var(--color-white);
  background-color: var(--color-black);
}

.template-detail__btn:hover {
  opacity: 0.85;
}

@media (min-width: 640px) {
  .template-detail__actions {
    flex-direction: row;
  }

  .template-detail__btn {
    width: auto;
  }
}

@media (min-width: 900px) {
  .template-detail__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 3.5rem;
  }

  .template-detail__right {
    position: sticky;
    top: 110px;
  }

  .template-detail__actions {
    flex-direction: column;
  }

  .template-detail__btn {
    width: 100%;
  }
}

/* ---------- Motion (driven by GSAP in script.js) ---------- */

/* Held back until the intro timeline takes over; a timeout in <head> clears
   this if scripts never load, so content can't stay hidden. */
html.is-loading .site-header,
html.is-loading .hero__content,
html.is-loading .hero__marquee {
  opacity: 0;
}

/* Lenis smooth scrolling */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Headings split into words; each word slides up from behind its own mask.
   The padding keeps italic overhangs and descenders from being clipped. */
.split-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.06em 0.12em;
  margin: 0 -0.06em -0.12em;
}

.split-line__inner {
  display: inline-block;
  will-change: transform;
}

.footer-char {
  display: inline-block;
}

/* Section eyebrow labels sit a fixed 12px above their heading. The heading's
   negative top margin cancels the half-leading above its first line, so the
   12px is measured to the text itself whatever the heading's line-height. */
.paths__label,
.templates__label,
.overview__label,
.process__label,
.about__eyebrow,
.testimonials__label,
.tools__label,
.gallery__label,
.faq__label {
  margin-bottom: 12px;
}

.paths__heading,
.templates__heading,
.overview__heading,
.process__heading,
.about__heading,
.testimonials__heading,
.tools__heading,
.gallery__heading,
.faq__heading,
.hero__heading {
  margin-top: calc((1em - 1lh) / 2);
}

/* The hero stacks its intro with a 1.5rem flex gap; pull the eyebrow in so
   it too sits 12px above the heading, leaving the gap below the heading. */
.hero__eyebrow {
  margin-bottom: calc(12px - 1.5rem);
}