/* -----------------------------------------------------------
   HOMEPAGE
   Section-specific layout. Each section uses the shared
   .grid-12 primitive but breaks the column split differently,
   which is what keeps the page from reading as a stack of
   identical blocks.
----------------------------------------------------------- */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
  padding-bottom: var(--space-xl);
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero h1 {
  grid-column: 1 / 12;
  max-width: 18ch;
}

.hero-sub {
  grid-column: 1 / 7;
  margin-top: var(--space-lg);
}

.hero-sub .lead {
  color: var(--color-ink);
  font-weight: 400;
}

.hero-meta {
  grid-column: 8 / 13;
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-left: 1px solid var(--color-line);
  padding-left: var(--space-md);
}

.hero-meta p {
  color: var(--color-ink-55);
  max-width: 34ch;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

@media (max-width: 900px) {
  .hero h1,
  .hero-sub,
  .hero-meta {
    grid-column: 1 / -1;
  }

  .hero-meta {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--color-line);
    padding-top: var(--space-md);
  }
}

/* ---------- Hero image ----------
   Full-bleed backdrop behind the hero copy rather than a framed
   figure: absolutely positioned under the text, a translucent
   scrim keeps every line of copy legible regardless of what's
   behind it, and the prism reads as ambient light rather than a
   competing photograph. */

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 250, 242, 0.6);
}

/* ---------- Hero entrance ----------
   Plays once on initial load (pure CSS, so it isn't gated behind
   JS or IntersectionObserver like the scroll reveals below the
   fold). A calm, staggered fade/lift/unblur per element, then a
   slightly different — barely-there — reveal for the image. */

.hero .eyebrow,
.hero .hero-sub,
.hero .hero-meta > p,
.hero .hero-ctas {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  animation: heroReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero .eyebrow {
  animation-delay: 0.05s;
}

.hero .hero-sub {
  animation-delay: 0.28s;
}

.hero .hero-meta > p {
  animation-delay: 0.4s;
}

.hero .hero-ctas {
  animation-delay: 0.52s;
}

@keyframes heroReveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* The headline types itself out, one letter at a time (see
   initHeroTypewriter in animations.js, which splits the text into
   these spans). Each character just fades and lifts in slightly —
   the stagger itself is what reads as "typing", so the per-letter
   motion stays understated. A blinking caret rides along at the
   end of the line and fades out once typing settles. */
.hero-title-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(5px);
  animation: heroCharIn 0.22s ease-out forwards;
}

@keyframes heroCharIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title-caret {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -0.05em;
  opacity: 0;
  animation: heroCaretBlink 0.9s step-end infinite;
}

@keyframes heroCaretBlink {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.hero-title-caret.is-done {
  animation: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero-media {
  opacity: 0;
  transform: translateY(10px) scale(1.015);
  animation: heroImageReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

@keyframes heroImageReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow,
  .hero .hero-sub,
  .hero .hero-meta > p,
  .hero .hero-ctas,
  .hero-media {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---------- Brand statement ---------- */

.statement-text {
  grid-column: 1 / 7;
}

.statement-copy {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.statement-copy p {
  font-size: var(--text-lead);
  color: var(--color-ink-70);
}

.statement-media {
  grid-column: 8 / 13;
  max-width: 380px;
}

.statement-media--wide {
  max-width: 460px;
}

.statement-media .img-frame {
  aspect-ratio: 3 / 4;
}

@media (max-width: 900px) {
  .statement-text,
  .statement-media {
    grid-column: 1 / -1;
  }

  .statement-media {
    margin-top: var(--space-lg);
    max-width: 420px;
  }
}

/* ---------- Services ---------- */

.services-intro {
  grid-column: 1 / 8;
  margin-bottom: var(--space-lg);
}

/* ---------- Difference (inverted) ---------- */

.difference {
  background: var(--color-invert-bg);
  color: var(--color-invert-ink);
}

.difference .eyebrow {
  color: var(--color-invert-ink-60);
}

.difference-statement {
  font-size: clamp(2.25rem, 1.6rem + 3.5vw, 4.5rem);
  font-weight: 300;
  max-width: 16ch;
  margin-bottom: var(--space-lg);
}

.difference-support {
  font-size: var(--text-lead);
  color: var(--color-invert-ink-60);
  max-width: 44ch;
  margin-bottom: var(--space-2xl);
}

.difference-pillars {
  border-top: 1px solid var(--color-invert-line);
}

.difference-pillars ul {
  display: flex;
  flex-direction: column;
}

.difference-pillars li {
  border-bottom: 1px solid var(--color-invert-line);
  padding-block: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  font-size: clamp(2.75rem, 1.8rem + 5vw, 6.5rem);
  font-weight: 200;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.difference-pillars li span.num {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-invert-ink-60);
  font-variant-numeric: tabular-nums;
}

/* ---------- Difference (split, light) ----------
   Used on /services/digital-marketing/: white background,
   black ink, copy on the left and an image on the right. */

.difference--split-light {
  background: var(--color-bg);
  color: var(--color-ink);
}

.difference--split-light .eyebrow {
  color: var(--color-ink-55);
}

.difference--split-light .difference-support {
  color: var(--color-ink-70);
}

.difference-split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  align-items: center;
}

.difference-copy {
  grid-column: 1 / 7;
}

.difference-visual {
  grid-column: 7 / 13;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

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

@media (max-width: 700px) {
  .difference-split {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }

  .difference-copy,
  .difference-visual {
    grid-column: auto;
  }
}

/* ---------- The Way I Think (homepage) ----------
   Overrides the shared .difference (inverted) styling for
   this section only: light background, black ink, and the
   pillars set beside the statement instead of stacked below. */

.way-i-think {
  background: var(--color-bg);
  color: var(--color-ink);
}

.way-i-think .eyebrow {
  color: var(--color-ink-55);
}

.way-i-think-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.way-i-think-text {
  flex: 1 1 420px;
  max-width: 44ch;
}

.way-i-think-text .difference-statement,
.way-i-think-text .difference-support {
  margin-bottom: 0;
}

.way-i-think-text .difference-statement {
  margin-bottom: var(--space-sm);
}

.way-i-think .difference-pillars {
  border-top: 0;
  flex: 0 1 auto;
}

.way-i-think .difference-pillars ul {
  flex-direction: column;
  gap: clamp(0.5rem, 0.2rem + 1.2vw, 1.25rem);
}

.way-i-think .difference-pillars li {
  border-bottom: 0;
  padding-block: 0;
  justify-content: flex-start;
  gap: 0.75em;
  font-size: clamp(2.25rem, 1.6rem + 3.5vw, 4.5rem);
  font-weight: 300;
  color: var(--color-ink);
  animation: way-i-think-flicker 3.6s ease-in-out infinite;
}

.way-i-think .difference-pillars li:nth-child(2) {
  animation-delay: 0.5s;
}

.way-i-think .difference-pillars li:nth-child(3) {
  animation-delay: 1s;
}

.way-i-think .difference-pillars li span.num {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-ink-55);
}

@keyframes way-i-think-flicker {
  0%,
  38%,
  100% {
    opacity: 1;
  }
  44% {
    opacity: 0.45;
  }
  48% {
    opacity: 1;
  }
  62% {
    opacity: 1;
  }
  66% {
    opacity: 0.6;
  }
  70% {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .way-i-think-grid {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Selected work ---------- */

.work-intro {
  grid-column: 1 / 8;
  margin-bottom: var(--space-xl);
}

.work-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.work-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  align-items: end;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-lg);
}

.work-item .work-figure {
  position: relative;
  grid-column: 1 / 6;
  aspect-ratio: 4 / 5;
  background: var(--color-ink);
  color: var(--color-bg);
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
  overflow: hidden;
}

/* Temporary monogram placeholder. Swap the <span class="placeholder-mark">
   for an <img> (with a real alt) when project photography is ready — the
   rule below makes an <img> fill the same box edge-to-edge automatically,
   so no layout changes are needed at that point. */
.placeholder-mark {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(4rem, 3rem + 5vw, 8rem);
  line-height: 0.8;
}

.work-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.work-item:hover .work-figure img {
  transform: scale(1.02);
}

.work-item .work-body {
  grid-column: 7 / 13;
}

.work-item:nth-child(1) .work-figure {
  grid-column: 1 / 5;
  aspect-ratio: 5 / 4;
}

.work-item:nth-child(1) .work-body {
  grid-column: 6 / 12;
}

.work-item:nth-child(2) {
  padding-top: 0;
  border-top: 0;
}

.work-item:nth-child(2) .work-figure {
  grid-column: 9 / 13;
  grid-row: 1;
  aspect-ratio: 5 / 4;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
}

.work-item:nth-child(2) .work-body {
  grid-column: 2 / 8;
  grid-row: 1;
}

.work-item:nth-child(3) .work-figure {
  grid-column: 1 / 5;
  aspect-ratio: 5 / 4;
}

.work-item:nth-child(3) .work-body {
  grid-column: 6 / 12;
}

.work-tags {
  color: var(--color-ink-55);
  font-size: var(--text-small);
  margin-bottom: var(--space-sm);
}

.work-body h3 {
  margin-bottom: var(--space-sm);
}

.work-body .btn {
  margin-top: var(--space-md);
}

@media (max-width: 900px) {
  .work-intro {
    grid-column: 1 / -1;
  }

  .work-item,
  .work-item:nth-child(2),
  .work-item:nth-child(3) {
    grid-template-columns: 1fr;
  }

  .work-item .work-figure,
  .work-item:nth-child(2) .work-figure,
  .work-item:nth-child(3) .work-figure {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }

  .work-item .work-body,
  .work-item:nth-child(2) .work-body,
  .work-item:nth-child(3) .work-body {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: var(--space-md);
  }

  .work-item:nth-child(2) {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-line);
  }
}

/* ---------- About teaser ---------- */

.about-teaser-text {
  grid-column: 1 / 7;
}

.about-teaser-text p {
  margin-top: var(--space-sm);
  color: var(--color-ink-70);
  font-size: var(--text-lead);
  max-width: 46ch;
}

.about-teaser-media {
  grid-column: 8 / 13;
}

.about-teaser-media .img-frame {
  aspect-ratio: 3 / 4;
}

.about-teaser-media-caption {
  margin-top: var(--space-sm);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-55);
}

.about-lines {
  grid-column: 1 / -1;
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-line);
}

.about-lines li {
  border-bottom: 1px solid var(--color-line);
  padding-block: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  font-weight: 300;
}

.about-lines li:nth-child(2) {
  padding-left: clamp(1.5rem, 5vw, 5rem);
}

.about-lines li:nth-child(3) {
  padding-left: clamp(3rem, 10vw, 10rem);
}

.about-lines--compact {
  margin-top: var(--space-lg);
}

.about-lines--compact li {
  padding-block: 0.6rem;
  font-size: var(--text-lead);
  font-weight: 400;
}

.about-lines--compact li:nth-child(2),
.about-lines--compact li:nth-child(3) {
  padding-left: 0;
}

.about-teaser-cta {
  margin-top: var(--space-md);
}

.about-cta {
  grid-column: 1 / -1;
  margin-top: var(--space-lg);
}

@media (max-width: 900px) {
    .about-teaser-text,
  .about-teaser-media {
    grid-column: 1 / -1;
  }

  .about-teaser-media {
    margin-top: var(--space-lg);
    max-width: 420px;
  }

  .about-lines li:nth-child(2) {
    padding-left: clamp(1rem, 6vw, 2.5rem);
  }

  .about-lines li:nth-child(3) {
    padding-left: clamp(1.5rem, 12vw, 4rem);
  }
}

/* ---------- Brand philosophy ---------- */

.philosophy {
  text-align: center;
}

.philosophy .wrap {
  max-width: 760px;
}

.philosophy .eyebrow {
  display: block;
}

.philosophy h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  margin-bottom: var(--space-lg);
}

.philosophy p {
  margin-inline: auto;
  color: var(--color-ink-70);
  font-size: var(--text-lead);
}

.philosophy p + p {
  margin-top: var(--space-md);
}

/* ---------- Final CTA ---------- */

.final-cta {
  border-top: 1px solid var(--color-line);
}

.final-cta .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.final-cta h2 {
  max-width: 18ch;
}

.final-cta p {
  color: var(--color-ink-55);
  font-size: var(--text-lead);
}

.final-cta .btn {
  margin-top: var(--space-sm);
  font-size: 1.125rem;
}

/* -----------------------------------------------------------
   SERVICES HUB (/services/)
----------------------------------------------------------- */

.services-hub-intro {
  grid-column: 1 / 8;
}

.services-hub-intro p {
  margin-top: var(--space-sm);
}

.services-hub-intro h2 {
  margin-bottom: var(--space-md);
}

.services-hub-intro .lead {
  color: var(--color-ink);
  max-width: 56ch;
}

/* -----------------------------------------------------------
   SEO SERVICE PAGE (/services/seo/)
----------------------------------------------------------- */

/* 01 — Hero image, directly beneath the .page-hero text block */
.seo-hero-image {
  padding-top: 0;
  padding-bottom: var(--space-xl);
}

.seo-image--hero {
  aspect-ratio: 16 / 7;
  width: 100%;
}

/* 02 — My Approach: copy stacked under the heading, image alongside on the right */
.seo-approach-copy {
  grid-column: 1 / 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.seo-approach-copy h2 {
  margin: 0;
}

.seo-image--approach {
  grid-column: 6 / 13;
  aspect-ratio: 4 / 5;
}

@media (max-width: 900px) {
  .seo-approach-copy,
  .seo-image--approach {
    grid-column: 1 / -1;
  }

  .seo-image--approach {
    margin-top: var(--space-lg);
    aspect-ratio: 4 / 3;
  }
}

/* 03 — What I Do: editorial list with a tall companion image */
.what-i-do-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  align-items: start;
}

.what-i-do-layout .editorial-list {
  grid-column: 1 / 9;
}

.seo-image--list {
  grid-column: 9 / 13;
  aspect-ratio: 3 / 4;
}

@media (max-width: 900px) {
  .what-i-do-layout {
    display: block;
  }

  .seo-image--list {
    margin-top: var(--space-lg);
    aspect-ratio: 16 / 10;
  }
}

/* 04 — SEO With a Purpose: full-bleed image + arrowed progression */
.seo-image--funnel {
  aspect-ratio: 21 / 9;
  border-left: 0;
  border-right: 0;
  margin-block: var(--space-lg);
}

@media (max-width: 700px) {
  .seo-image--funnel {
    aspect-ratio: 4 / 5;
  }
}

.progression-list {
  max-width: 640px;
  margin-top: var(--space-xl);
}

.progression-list .editorial-list-item {
  border-bottom: 0;
  padding-block: var(--space-sm);
}

.progression-arrow {
  text-align: center;
  color: var(--color-ink-35);
  font-size: 1.125rem;
  line-height: 1;
}

/* 05 — Selected Work: Dusnic as a full case-study spread */
.case-study {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-lg);
}

.seo-image--case-study {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-bottom: var(--space-lg);
}

.case-study-body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
}

.case-study-body .work-tags {
  grid-column: 1 / 5;
}

.case-study-body h3 {
  grid-column: 1 / 5;
}

.case-study-body .case-study-copy {
  grid-column: 6 / 13;
}

@media (max-width: 900px) {
  .case-study-body .work-tags,
  .case-study-body h3,
  .case-study-body .case-study-copy {
    grid-column: 1 / -1;
  }

  .case-study-body .case-study-copy {
    margin-top: var(--space-sm);
  }
}

.secondary-work {
  margin-top: var(--space-2xl);
}

/* -----------------------------------------------------------
   SOCIAL MEDIA SERVICE PAGE (/services/social-media/)
----------------------------------------------------------- */

/* 01 — Hero image: offset asymmetrically (mirrors SEO's
   full-width treatment with a different rhythm) */
.social-hero-image {
  padding-top: 0;
  padding-bottom: var(--space-xl);
}

.social-hero-media {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.social-image--hero {
  grid-column: 3 / 13;
  aspect-ratio: 3 / 2;
}

@media (max-width: 900px) {
  .social-image--hero {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
  }
}

/* 02 — My Approach: copy stacked under the heading, image alongside on the right */
.social-approach-copy {
  grid-column: 1 / 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.social-approach-copy h2 {
  margin: 0;
}

.social-image--approach {
  grid-column: 6 / 13;
  aspect-ratio: 4 / 5;
}

@media (max-width: 900px) {
  .social-approach-copy,
  .social-image--approach {
    grid-column: 1 / -1;
  }

  .social-image--approach {
    margin-top: var(--space-lg);
    aspect-ratio: 4 / 3;
  }
}

/* 04 — The Content System: one contained (non-bleed) image
   above the four-category grid, which reuses .service-areas
   from the Marketing 360 page. */
.social-image--content-system {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.service-area > p {
  color: var(--color-ink-70);
  font-size: var(--text-small);
  margin-top: 0.4rem;
}

.service-area .work-tags {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* 05 — Creative Direction: portrait image + plain area list,
   image on the left this time for variety against What I Do's
   list-left/image-right pattern on the SEO page. */
.creative-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  align-items: start;
  margin-top: var(--space-xl);
}

.social-image--creative {
  grid-column: 1 / 5;
  aspect-ratio: 4 / 5;
}

.creative-layout .hairline-list {
  grid-column: 6 / 13;
}

@media (max-width: 900px) {
  .creative-layout {
    display: block;
  }

  .social-image--creative {
    aspect-ratio: 4 / 3;
  }

  .creative-layout .hairline-list {
    margin-top: var(--space-lg);
  }
}

/* 07 — Selected Work case study image */
.social-image--case-study {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--space-lg);
}

/* -----------------------------------------------------------
   PORTFOLIO HUB (/portfolio/)
----------------------------------------------------------- */

.portfolio-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.portfolio-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  align-items: end;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-lg);
}

.portfolio-item .img-frame {
  grid-column: 1 / 7;
  aspect-ratio: 5 / 4;
}

.portfolio-item .portfolio-body {
  grid-column: 8 / 13;
}

.portfolio-body .work-tags {
  margin-bottom: var(--space-sm);
}

.portfolio-body h3 {
  margin-bottom: var(--space-sm);
}

.portfolio-body .btn {
  margin-top: var(--space-md);
}

@media (max-width: 900px) {
  .portfolio-item {
    grid-template-columns: 1fr;
  }

  .portfolio-item .img-frame {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
  }

  .portfolio-item .portfolio-body {
    grid-column: 1 / -1;
    margin-top: var(--space-md);
  }
}

/* -----------------------------------------------------------
   CONCEPTS HUB (/concepts/)
   Same asymmetric item layout as .portfolio-item — kept as its
   own class rather than shared, matching how .work-item (home)
   and .portfolio-item already duplicate the pattern independently
   so each hub's list can evolve without affecting the others.
----------------------------------------------------------- */

.concepts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.concept-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  align-items: end;
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-lg);
}

.concept-item .img-frame {
  grid-column: 1 / 7;
  aspect-ratio: 5 / 4;
}

.concept-item .concept-body {
  grid-column: 8 / 13;
}

.concept-body .concept-meta {
  color: var(--color-ink-55);
  font-size: var(--text-small);
  margin-bottom: var(--space-sm);
}

.concept-body h3 {
  margin-bottom: var(--space-sm);
}

.concept-body .work-tags {
  margin-bottom: 0;
}

.concept-body .btn {
  margin-top: var(--space-md);
}

@media (max-width: 900px) {
  .concept-item {
    grid-template-columns: 1fr;
  }

  .concept-item .img-frame {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
  }

  .concept-item .concept-body {
    grid-column: 1 / -1;
    margin-top: var(--space-md);
  }
}

/* Empty state — shown while no concept has been published yet.
   Deliberately plainer than .img-frame: there's no specific
   future photograph being promised here, just an open
   placeholder for work that doesn't exist yet. */
.concepts-empty {
  margin-top: var(--space-lg);
  border: 1px dashed var(--color-line-strong);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
}

.concepts-empty p {
  margin-inline: auto;
  color: var(--color-ink-35);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------
   ABOUT PAGE (/about/)
----------------------------------------------------------- */

/* 02 — My Story: asymmetric portrait + text composition */
.story-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  align-items: start;
}

.story-portrait {
  grid-column: 1 / 6;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.story-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-text {
  grid-column: 7 / 13;
  padding-top: 0.5rem;
}

.story-text p {
  font-size: var(--text-lead);
  color: var(--color-ink-70);
  max-width: 52ch;
  margin-bottom: var(--space-md);
}

@media (max-width: 900px) {
  .story-layout {
    display: block;
  }

  .story-portrait {
    aspect-ratio: 3 / 4;
    max-width: 420px;
    margin-inline: auto;
  }

  .story-text {
    margin-top: var(--space-lg);
  }
}

/* 03 — How I Think: large-scale typographic list, deliberately
   bigger than .editorial-list elsewhere — this is meant to read
   as one of the strongest moments on the page. */
.thinking-list {
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-lg);
}

.thinking-list li {
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--space-lg);
}

.thinking-list .index {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink-35);
  margin-bottom: var(--space-sm);
  font-variant-numeric: tabular-nums;
}

.thinking-list h3 {
  font-size: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);
  font-weight: 300;
  margin-bottom: var(--space-sm);
}

.thinking-list p {
  font-size: var(--text-lead);
  color: var(--color-ink-70);
  max-width: 56ch;
}

/* 04 — My Approach: annotated pillars (word + supporting line),
   built on the homepage's .difference-pillars pattern. */
.difference-pillars.pillars-annotated li {
  align-items: baseline;
  gap: var(--space-lg);
}

.pillar-desc {
  font-size: var(--text-small);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-invert-ink-60);
  max-width: 32ch;
  text-align: right;
}

@media (max-width: 640px) {
  .difference-pillars.pillars-annotated li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .pillar-desc {
    text-align: left;
  }
}

.difference-closing-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lead);
  color: var(--color-invert-ink);
  margin-top: var(--space-xl);
  max-width: 44ch;
}

/* 05 — Experience: lighter-weight section, smaller type than
   How I Think, using the funnel-list stacked pattern from
   Marketing 360 (title / role / tags). */
.experience-list {
  margin-top: var(--space-lg);
}

.experience-list .editorial-list-item h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
}

.experience-links {
  margin-top: var(--space-lg);
  max-width: 62ch;
}

/* 06 — Education & Tools: intentionally quiet, compact section */
.edu-tools {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
  margin-top: var(--space-lg);
}

.edu-tools-col {
  grid-column: span 6;
}

.edu-tools-col h3 {
  margin-bottom: var(--space-sm);
}

.edu-tools-col .hairline-list li {
  font-size: 1rem;
  font-weight: 400;
  padding-block: 0.6rem;
  color: var(--color-ink-70);
}

.tools-line {
  color: var(--color-ink-70);
  line-height: 1.7;
}

@media (max-width: 700px) {
  .edu-tools {
    display: block;
  }

  .edu-tools-col + .edu-tools-col {
    margin-top: var(--space-lg);
  }
}

/* -----------------------------------------------------------
   SERVICE DETAIL PAGES (/services/[slug]/)
   Shared by Marketing 360 and, later, the other three service
   pages — kept generic rather than named after one service.
----------------------------------------------------------- */

/* The Difference section closing statement: on these pages the
   large statement lands after the supporting copy rather than
   before it (as on the homepage), so it needs top spacing
   instead of the bottom spacing already defined on
   .difference-statement. */
.difference-statement--closing {
  margin-top: var(--space-xl);
  margin-bottom: 0;
}

.difference-support + .difference-support {
  margin-top: var(--space-md);
}

/* Marketing 360 — four editorial areas. Plain typographic
   columns, not cards: an eyebrow-style label per area and a
   hairline-divided list beneath it, in the same visual language
   as .editorial-list elsewhere on the site. */
.service-areas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.service-area h3 {
  margin-bottom: var(--space-sm);
}

.service-area ul {
  border-top: 1px solid var(--color-line);
}

.service-area li {
  border-bottom: 1px solid var(--color-line);
  padding-block: 0.65rem;
  color: var(--color-ink-70);
}

@media (max-width: 900px) {
  .service-areas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .service-areas {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* The Funnel — reuses .editorial-list-item's index/border
   pattern, but each stage stacks title, description and channel
   tags vertically instead of the inline wrap used for the
   short one-line homepage services. */
.funnel-list .title-wrap {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.funnel-list .work-tags {
  margin-bottom: 0;
  margin-top: 0.15rem;
}

.funnel-list .editorial-list-item {
  grid-template-columns: auto 1fr;
}

.funnel-visual {
  margin-top: var(--space-xl);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

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

/* Shared closing-line treatment for the funnel and how-it-works
   sections: a single editorial pull-line under a numbered list. */
.section-closing-line {
  margin-top: var(--space-lg);
}

@media (max-width: 900px) {
  .services-hub-intro {
    grid-column: 1 / -1;
  }
}

/* -----------------------------------------------------------
   CONTACT PAGE (/contact/)
   The whole page is two elements: a form and a sidebar. Field
   styling deliberately avoids boxes — a hairline underneath
   each input, in the same restrained language as the rest of
   the site, is enough.
----------------------------------------------------------- */

.contact-form-col {
  grid-column: 1 / 7;
  margin-top: var(--space-lg);
}

.contact-meta {
  grid-column: 8 / 13;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field label {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-55);
}

.form-required {
  color: var(--color-ink-35);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  padding-block: 0.6rem;
  transition: border-color var(--dur-fast) var(--ease);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-ink-35);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-bottom-color: var(--color-line-strong);
}

.form-field textarea {
  resize: vertical;
  min-height: 7rem;
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-ink-55) 50%),
    linear-gradient(135deg, var(--color-ink-55) 50%, transparent 50%);
  background-position: right 0.4rem top 55%, right 0.15rem top 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 1.25rem;
}

.form-submit-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.form-submit-row .btn {
  font-size: 1.125rem;
}

.form-submit-row .btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.form-required-note {
  color: var(--color-ink-35);
  font-size: var(--text-small);
  margin: 0;
}

.form-status {
  max-width: 46ch;
  font-size: var(--text-small);
}

.form-status--success {
  color: var(--color-ink);
}

.form-status--error {
  color: var(--color-ink);
  font-weight: 600;
}

.contact-closing {
  text-align: center;
  border-top: 1px solid var(--color-line);
}

.contact-closing p {
  margin-inline: auto;
  color: var(--color-ink);
}

@media (max-width: 900px) {
  .contact-form-col,
  .contact-meta {
    grid-column: 1 / -1;
  }

  .contact-meta {
    margin-top: var(--space-lg);
  }
}

/* -----------------------------------------------------------
   BLOG PAGE (/blog/)
   A flat, non-decorative image placeholder — unlike .img-frame,
   this has no corner marks or caption, per the blog's image
   direction. Everything else on the page reuses existing
   components as-is.
----------------------------------------------------------- */

.media-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

.media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame-placeholder {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.045);
}

.blog-featured-media {
  aspect-ratio: 21 / 9;
  margin-bottom: var(--space-lg);
}

@media (max-width: 700px) {
  .blog-featured-media {
    aspect-ratio: 4 / 5;
  }
}

/* -----------------------------------------------------------
   MAQASA CASE STUDY (/portfolio/maqasa-real-estate/)
   "The Thinking" section overrides the shared .difference
   pattern with a white background and the client's sand
   accent, and adds a two-column layout with an auto-advancing
   photo carousel filling the space beside the copy.
----------------------------------------------------------- */

/* The Challenge statement sits the heading and the supporting
   copy side by side across the full row instead of stacking
   them, so the block reads as one wide line instead of two
   separate paragraphs on top of each other. */
.challenge-heading-col {
  grid-column: 1 / 6;
  align-self: start;
}

.challenge-copy-col {
  grid-column: 6 / 13;
  margin-top: 0;
}

@media (max-width: 900px) {
  .challenge-heading-col,
  .challenge-copy-col {
    grid-column: 1 / -1;
  }

  .challenge-copy-col {
    margin-top: var(--space-md);
  }
}

/* Concepts intro — same side-by-side pattern as the Challenge
   statement: heading on the left, supporting copy on the right,
   filling the rest of the row. */
.concepts-heading-col {
  grid-column: 1 / 6;
  align-self: start;
}

.concepts-copy-col {
  grid-column: 6 / 13;
  margin-top: 0;
}

@media (max-width: 900px) {
  .concepts-heading-col,
  .concepts-copy-col {
    grid-column: 1 / -1;
  }

  .concepts-copy-col {
    margin-top: var(--space-md);
  }
}

.thinking-section.difference {
  background: #ffffff;
  color: #d8c7b0;
}

.thinking-section.difference .eyebrow {
  color: #d8c7b0;
}

.thinking-section .difference-support {
  color: #d8c7b0;
}

.thinking-copy {
  grid-column: 1 / 7;
  align-self: center;
}

.thinking-visual {
  grid-column: 7 / 13;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.thinking-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}

.thinking-visual img.is-active {
  opacity: 1;
}

@media (max-width: 900px) {
  .thinking-copy,
  .thinking-visual {
    grid-column: 1 / -1;
  }

  .thinking-visual {
    margin-top: var(--space-lg);
    aspect-ratio: 16 / 10;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thinking-visual img {
    transition: none;
  }
}

/* ---------- Result heading (split, text-only) ----------
   Used on the Dusnic case study: heading on the left,
   supporting lead paragraph on the right. */

.result-heading {
  grid-column: 1 / 7;
}

.result-lead {
  grid-column: 7 / 13;
  align-self: center;
}

@media (max-width: 900px) {
  .result-heading,
  .result-lead {
    grid-column: 1 / -1;
  }

  .result-lead {
    margin-top: var(--space-md);
  }
}

/* ---------- Difference (reversed columns) ----------
   Flips .thinking-copy / .thinking-visual so the image sits
   on the left and the text on the right. */

.difference--reverse .thinking-copy {
  grid-column: 7 / 13;
}

.difference--reverse .thinking-visual {
  grid-column: 1 / 7;
}

@media (max-width: 900px) {
  .difference--reverse .thinking-visual {
    margin-top: 0;
  }

  .difference--reverse .thinking-copy {
    margin-top: var(--space-lg);
  }
}