:root {
  --ink: #111111;
  --paper: #f5f4f0;
  --white: #ffffff;
  --muted: #6c6b67;
  --line: rgba(17,17,17,.18);
  --green: #20372c;
  --blue: #184a67;
  --max: 1480px;
  --pad: clamp(22px, 4vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
figure { margin: 0; }

.section-shell, .site-header, .site-footer {
  width: min(100%, var(--max));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}
.wordmark { font-size: .8rem; font-weight: 700; letter-spacing: .16em; white-space: nowrap; }
.nav { display: flex; gap: clamp(18px, 2.6vw, 42px); }
.nav a { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.nav a:hover, .text-link:hover, .email-link:hover { opacity: .55; }

.hero { padding-top: clamp(70px, 10vw, 160px); padding-bottom: clamp(90px, 12vw, 180px); }
.eyebrow { margin: 0 0 28px; font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.hero h1, .contact h2 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(4.6rem, 11vw, 10.5rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.055em;
}
em { font-weight: 400; }
.hero-bottom {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(40px, 8vw, 130px);
  margin-top: clamp(60px, 9vw, 130px);
  align-items: end;
}
.hero-intro { margin: 0; max-width: 830px; font-size: clamp(1.8rem, 3.7vw, 4rem); line-height: 1.08; letter-spacing: -.035em; }
.hero-copy { margin: 0; max-width: 520px; font-size: 1rem; }
.hero-actions { display: flex; gap: 34px; margin-top: 54px; }
.text-link { padding-bottom: 5px; border-bottom: 1px solid currentColor; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: opacity .2s ease; }
.text-link span { margin-left: 8px; }

.work { padding-bottom: 0; }
.section-heading {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 50px;
  padding: clamp(70px, 9vw, 130px) 0;
  border-top: 1px solid var(--line);
}
.section-heading h2, .about h2 {
  margin: 0;
  max-width: 900px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2.5rem, 5.1vw, 5.7rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.04em;
}

.project { border-top: 1px solid var(--line); padding: clamp(60px, 8vw, 120px) 0; }
.project-meta { max-width: 830px; }
.project-number, .project-role, .tags { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.project-number { margin: 0 0 35px; color: var(--muted); }
.project h3 { margin: 0 0 10px; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(3.5rem, 7vw, 7.8rem); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.project-kicker { margin: 22px 0 18px; max-width: 650px; font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1.2; letter-spacing: -.02em; }
.project-role { margin: 0 0 40px; color: var(--muted); }
.project-description { max-width: 720px; font-size: 1rem; }
.tags { max-width: 780px; margin-top: 34px; line-height: 1.8; }
.project-hero { margin-top: clamp(50px, 7vw, 100px); }
.full-bleed-project-image { overflow: hidden; }
.full-bleed-project-image img { width: 100%; height: auto; }

.project-split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(50px, 7vw, 110px);
  align-items: start;
}
.project-split .project-meta,
.project-split .project-single-image { align-self: start; }
.project-single-image { margin-top: clamp(58px, 6vw, 90px); overflow: hidden; }
.project-single-image img { width: 100%; height: auto; }
.project-reverse .project-meta { order: 2; }
.project-reverse .project-single-image { order: 1; }

.project-green { background: var(--green); color: white; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.project-green .project-number, .project-green .project-role { color: rgba(255,255,255,.65); }
.project-blue { background: var(--blue); color: white; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); }
.project-blue .project-number, .project-blue .project-role { color: rgba(255,255,255,.65); }

.project-steelcase .project-meta { max-width: 830px; }
.steelcase-transparent {
  margin-top: clamp(40px, 5vw, 75px);
  background: transparent;
  overflow: visible;
}
.steelcase-transparent img {
  width: min(100%, 1260px);
  margin-inline: auto;
  object-fit: contain;
}

.services { padding-top: clamp(90px, 11vw, 170px); padding-bottom: clamp(90px, 11vw, 170px); }
.compact-heading { padding-bottom: clamp(80px, 9vw, 130px); }
.services-heading { align-items: start; }
.services-intro { max-width: 390px; margin: 48px 0 0; font-size: .92rem; color: #383733; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-grid article { padding: 38px clamp(20px, 3vw, 45px) 46px 0; }
.service-grid article + article { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 45px); }
.service-number { margin: 0 0 70px; font-size: .7rem; font-weight: 700; }
.service-grid h3 { margin: 0 0 20px; font-size: clamp(1.4rem, 2.2vw, 2rem); }
.service-grid p:last-child { color: #383733; }
.service-statement {
  max-width: 1000px;
  margin: clamp(80px, 10vw, 145px) 0 0 auto;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(2rem, 4.7vw, 5rem);
  line-height: 1.03;
  letter-spacing: -.035em;
}

.about {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 50px;
  padding-top: clamp(80px, 10vw, 150px);
  padding-bottom: clamp(80px, 10vw, 150px);
  border-top: 1px solid var(--line);
}
.about-copy > * { max-width: 850px; }
.about-copy h2 { margin-bottom: 60px; }
.large-copy { font-size: clamp(1.45rem, 2.6vw, 2.8rem); line-height: 1.18; letter-spacing: -.025em; }
.evolution-copy { margin-top: 34px; font-weight: 500; }
.client-line { margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--line); }

.contact {
  background: var(--ink);
  color: white;
  max-width: none;
  width: 100%;
  padding: clamp(70px, 10vw, 150px) max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
}
.contact h2 { font-size: clamp(4.4rem, 10vw, 10rem); }
.contact-response { margin: 55px 0 0; font-family: "Source Serif 4", Georgia, serif; font-size: clamp(2rem, 4.5vw, 5rem); line-height: 1; }
.contact-copy { max-width: 680px; margin: 48px 0; color: rgba(255,255,255,.75); }
.email-link { display: inline-block; border-bottom: 1px solid rgba(255,255,255,.6); font-size: clamp(1.25rem, 3vw, 3rem); transition: opacity .2s ease; }
.contact-meta { display: flex; gap: 30px; margin-top: 90px; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

.site-footer { display: grid; grid-template-columns: 1fr 2fr auto; gap: 30px; padding-top: 32px; padding-bottom: 32px; font-size: .64rem; letter-spacing: .05em; text-transform: uppercase; }
.site-footer p { margin: 0; }

@media (max-width: 900px) {
  .site-header { min-height: 72px; }
  .nav { gap: 16px; }
  .nav a:nth-child(2), .nav a:nth-child(3) { display: none; }
  .hero-bottom, .section-heading, .about { grid-template-columns: 1fr; }
  .hero-copy { max-width: 650px; }
  .section-heading { gap: 18px; }
  .services-intro { margin-top: 18px; max-width: 650px; }
  .project-split { grid-template-columns: 1fr; gap: 38px; }
  .project-reverse .project-meta, .project-reverse .project-single-image { order: initial; }
  .project-single-image { margin-top: 0; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid article { padding: 34px 0; }
  .service-grid article + article { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .service-number { margin-bottom: 30px; }
  .site-footer { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hero h1 { font-size: clamp(3.8rem, 20vw, 6rem); }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 18px; }
  .project h3 { font-size: clamp(3rem, 16vw, 5rem); }
  .contact-meta { flex-direction: column; gap: 4px; }
}


/* v3 refinements — full-bleed work sections + revised hero */
.project-splunk {
  padding-bottom: 0;
}

.project-splunk .full-bleed-project-image {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(50px, 7vw, 100px);
}

.project-splunk .full-bleed-project-image img {
  display: block;
  width: 100%;
}

.project-green,
.project-blue {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
  padding-right: max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad)));
}

.project-green {
  border-top: 0;
}

.services-heading > div {
  min-height: 1px;
}

.hero h1 {
  max-width: 1320px;
  font-size: clamp(4rem, 8.7vw, 9rem);
  line-height: .86;
}

.hero-intro em {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
}

.services-heading h2 em {
  font-style: italic;
}

@media (max-width: 900px) {
  .project-splunk .full-bleed-project-image {
    margin-top: 44px;
  }
}

@media (max-width: 560px) {
  .hero h1 {
    font-size: clamp(3.25rem, 15vw, 5rem);
  }
}


/* v5 corrected refinements */
.work-heading {
  border-bottom: 0;
}

.work-heading-copy {
  max-width: 900px;
}

.work-heading-copy h2 {
  max-width: 900px;
}

.section-down-arrow {
  margin-top: clamp(30px, 4vw, 58px);
  font-family: "Montserrat", Arial, sans-serif;
  font-size: clamp(2.4rem, 4.2vw, 4.4rem);
  font-weight: 300;
  line-height: 1;
}

/* Remove the rule between the Selected Work intro and the first project. */
.work > .project:first-of-type {
  border-top: 0;
}

/* Reduce the whitespace below the Steelcase image by approximately 50%. */
.project-steelcase {
  padding-bottom: clamp(30px, 4vw, 60px);
}

.services {
  padding-top: clamp(45px, 5.5vw, 85px);
}

/* The experience sentence now lives inside the preceding About paragraph. */
.evolution-copy,
.client-line {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* v6 refinements */
.services-heading h2 {
  max-width: 1050px;
}
.services-heading h2 br {
  display: block;
}
.service-statement {
  display: none;
}


/* v7 copy/layout refinements */

/* Bring the Damon Patrick Gaumont identity line roughly halfway closer
   to the rule above it without changing the hero headline rhythm. */
.hero .eyebrow {
  margin-top: calc(clamp(24px, 3vw, 44px) * -0.5);
}

/* The right-side hero descriptive paragraph was intentionally removed. */
.hero-copy {
  display: none;
}

/* Lock the WHAT I DO headline to exactly two desktop lines.
   The explicit <br> is the only allowed line break. */
.what-i-do-heading {
  max-width: none !important;
  width: min(1180px, 100%);
  font-size: clamp(2.8rem, 5.05vw, 5.8rem);
  line-height: .96;
  letter-spacing: -0.045em;
}

.what-i-do-heading br {
  display: block;
}

.what-i-do-heading em {
  white-space: nowrap;
}

/* Remove the divider above About Damon and pull the section upward. */
.about-no-rule {
  border-top: 0 !important;
  padding-top: clamp(42px, 5vw, 76px) !important;
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .hero .eyebrow {
    margin-top: 0;
  }

  .what-i-do-heading {
    width: 100%;
    font-size: clamp(2.6rem, 8vw, 4.6rem);
  }

  .what-i-do-heading em {
    white-space: normal;
  }
}

@media (max-width: 560px) {
  .what-i-do-heading {
    font-size: clamp(2.35rem, 11vw, 3.8rem);
  }
}


/* v8 final spacing refinements */

/* Make the hero headline sit visually halfway between the identity line
   above and the italic positioning statement below. */
.hero {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.hero h1 {
  align-self: center;
  margin-top: 0;
  margin-bottom: 0;
}

.hero-intro {
  align-self: end;
}

/* Tighten the transition into ABOUT DAMON so its top spacing matches
   the visual breathing room around the WHAT I DO headline. */
.about-no-rule {
  padding-top: clamp(28px, 3.5vw, 54px) !important;
}

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

  .hero h1 {
    margin-top: revert;
    margin-bottom: revert;
  }
}


/* v9 spacing correction
   Replaces the prior grid-based hero centering and fixes the true source
   of the whitespace before ABOUT DAMON. */

/* HERO:
   There are four direct children in the hero, so the previous 3-row grid
   could not center the headline predictably. Return to normal flow and
   give the headline identical space above and below. */
.hero {
  display: block !important;
}

.hero .eyebrow {
  margin-top: calc(clamp(24px, 3vw, 44px) * -0.5);
  margin-bottom: clamp(64px, 7vw, 104px);
}

.hero h1 {
  margin: 0 0 clamp(64px, 7vw, 104px) !important;
  align-self: auto;
}

.hero-bottom {
  margin-top: 0 !important;
}

/* ABOUT:
   The large void was coming primarily from the bottom padding on WHAT I DO,
   not from ABOUT itself. Remove that extra section padding, then use the
   same vertical spacing value as the section-heading rhythm. */
.services {
  padding-bottom: 0 !important;
}

.about-no-rule {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: clamp(70px, 9vw, 130px) !important;
}

@media (max-width: 900px) {
  .hero .eyebrow {
    margin-top: 0;
    margin-bottom: clamp(42px, 7vw, 68px);
  }

  .hero h1 {
    margin-bottom: clamp(42px, 7vw, 68px) !important;
  }

  .about-no-rule {
    padding-top: clamp(54px, 8vw, 88px) !important;
  }
}


/* v10 global content lift
   Reduce the space between the nav divider and the first hero identity
   line by approximately 50%. Because this changes the top of the hero
   in normal document flow, all content that follows moves upward with it. */
.hero {
  padding-top: calc(clamp(70px, 9vw, 130px) * 0.5) !important;
}

.hero .eyebrow {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .hero {
    padding-top: calc(clamp(54px, 8vw, 88px) * 0.5) !important;
  }
}


/* v11 spacing rhythm refinements
   Use one shared vertical spacing token for the requested transitions. */
:root {
  --section-rhythm: clamp(48px, 6vw, 88px);
}

/* 1. Match the space beneath the hero CTA links to the space between
   the divider and the Selected Work statement. */
.hero {
  padding-bottom: var(--section-rhythm) !important;
}

.work-heading {
  padding-top: var(--section-rhythm) !important;
}

/* 2. Use that same space between the arrow and project 01. */
.work-heading {
  padding-bottom: 0 !important;
}

.section-down-arrow {
  margin-bottom: var(--section-rhythm) !important;
}

.project-first {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 3. Match the space after the final About paragraph to the transition
   into the Let's Work Together section. */
.about-experience {
  margin-bottom: 0 !important;
}

.about {
  padding-bottom: var(--section-rhythm) !important;
}

.contact {
  padding-top: var(--section-rhythm) !important;
}

/* Footer identity copy can be longer; keep it readable without changing
   the existing footer structure. */
.footer p,
.site-footer p {
  max-width: 100%;
}

@media (max-width: 900px) {
  :root {
    --section-rhythm: clamp(40px, 8vw, 64px);
  }
}

/* v13 service icons */
.service-grid .service-icon {
  display: block;
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  object-fit: contain;
  object-position: left center;
  margin: 18px 0 22px;
}

@media (max-width: 560px) {
  .service-grid .service-icon {
    width: 52px !important;
    height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
    margin: 16px 0 20px;
  }
}


/* v15 headshot hero refinement
   Placement and proportions follow the supplied one-page PDF reference:
   copy on the left, portrait on the right, with a tighter editorial scale. */
.hero-with-headshot {
  padding-bottom: var(--section-rhythm) !important;
}

.hero-with-headshot .eyebrow {
  margin-bottom: clamp(34px, 4.4vw, 64px) !important;
}

.hero-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  gap: clamp(34px, 5vw, 82px);
  align-items: end;
}

.hero-copy-block {
  min-width: 0;
  align-self: end;
  padding-bottom: clamp(6px, 1vw, 16px);
}

.hero-with-headshot h1 {
  max-width: 760px;
  margin: 0 0 clamp(20px, 2.4vw, 36px) !important;
  font-size: clamp(3.9rem, 6.5vw, 7.35rem);
  line-height: .88;
  letter-spacing: -.055em;
}

.hero-with-headshot .hero-bottom {
  display: block;
  margin: 0 !important;
}

.hero-with-headshot .hero-intro {
  max-width: 720px;
  font-size: clamp(1.55rem, 2.5vw, 2.8rem);
  line-height: 1.02;
}

.hero-with-headshot .hero-actions {
  margin-top: clamp(26px, 3vw, 42px);
}

.hero-headshot {
  margin: 0;
  width: 100%;
  align-self: end;
  justify-self: end;
}

.hero-headshot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  object-position: right bottom;
}

/* Keep the image and typography balanced at medium desktop widths. */
@media (max-width: 1100px) {
  .hero-feature {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr);
    gap: clamp(28px, 4vw, 52px);
  }

  .hero-with-headshot h1 {
    font-size: clamp(3.7rem, 7vw, 6rem);
  }

  .hero-with-headshot .hero-intro {
    font-size: clamp(1.45rem, 2.8vw, 2.3rem);
  }

  .hero-headshot img {
    max-height: 450px;
  }
}

@media (max-width: 780px) {
  .hero-feature {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-copy-block {
    padding-bottom: 0;
  }

  .hero-with-headshot h1 {
    max-width: 680px;
    font-size: clamp(3.4rem, 13vw, 5.5rem);
  }

  .hero-with-headshot .hero-intro {
    max-width: 650px;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
  }

  .hero-headshot {
    width: min(78%, 440px);
    justify-self: start;
  }

  .hero-headshot img {
    max-height: none;
  }
}

@media (max-width: 560px) {
  .hero-with-headshot .eyebrow {
    margin-bottom: 30px !important;
  }

  .hero-with-headshot h1 {
    font-size: clamp(3.15rem, 15vw, 4.6rem);
    margin-bottom: 24px !important;
  }

  .hero-headshot {
    width: 88%;
  }
}


/* v16 hero image/headline refinement */

/* Keep the hero headline to exactly two lines on desktop. */
.hero-with-headshot h1 .hero-line {
  display: block;
  white-space: nowrap;
}

/* Make the hero feature itself reach the hero's bottom divider. */
.hero-with-headshot {
  padding-bottom: 0 !important;
}

.hero-feature {
  align-items: stretch !important;
}

/* Left copy keeps the existing visual breathing room above the divider. */
.hero-copy-block {
  align-self: stretch !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-bottom: var(--section-rhythm);
}

/* Anchor the portrait to the bottom edge/divider of the hero and size it
   upward so its top aligns visually with the first headline line. */
.hero-headshot {
  align-self: stretch !important;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: visible;
}

.hero-headshot img {
  width: auto !important;
  height: 100% !important;
  max-height: none !important;
  max-width: 100%;
  object-fit: contain;
  object-position: right bottom;
}

/* Desktop height target: top of portrait roughly aligns with "A Creative",
   while bottom sits directly on the first divider below the hero. */
@media (min-width: 781px) {
  .hero-feature {
    min-height: clamp(430px, 42vw, 610px);
  }

  .hero-headshot {
    min-height: 100%;
  }
}

@media (max-width: 1100px) and (min-width: 781px) {
  .hero-feature {
    min-height: clamp(400px, 48vw, 540px);
  }
}

@media (max-width: 780px) {
  .hero-with-headshot {
    padding-bottom: var(--section-rhythm) !important;
  }

  .hero-with-headshot h1 .hero-line {
    white-space: normal;
  }

  .hero-copy-block {
    padding-bottom: 0;
  }

  .hero-headshot {
    display: block;
  }

  .hero-headshot img {
    width: 100% !important;
    height: auto !important;
  }
}


/* v17 — enlarge desktop headshot 30% vertically while preserving
   the bottom anchor on the hero divider. */
@media (min-width: 781px) {
  .hero-headshot {
    position: relative;
  }

  .hero-headshot img {
    height: 130% !important;
    max-height: none !important;
    width: auto !important;
    max-width: none !important;
    position: absolute;
    right: 0;
    bottom: 0;
  }
}


/* v18 — pull the enlarged desktop headshot back by 15 percentage points,
   while keeping its bottom anchored to the hero divider. */
@media (min-width: 781px) {
  .hero-headshot img {
    height: 115% !important;
  }
}


/* v19 — keep the mobile headshot attached to the hero divider
   by removing the extra bottom padding and letting the divider/page
   content rise directly beneath the image. */
@media (max-width: 780px) {
  .hero-with-headshot {
    padding-bottom: 0 !important;
  }

  .hero-feature {
    gap: 28px;
  }

  .hero-headshot {
    margin: 0;
    width: min(88%, 440px);
    align-self: end;
    justify-self: start;
    display: flex;
    align-items: flex-end;
  }

  .hero-headshot img {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0;
    vertical-align: bottom;
  }

  /* Remove any residual spacing below the portrait so the divider
     sits flush against the image bottom. */
  .hero-feature,
  .hero-headshot,
  .hero-headshot img {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Pull the following section/divider upward with the hero. */
  .work {
    margin-top: 0 !important;
  }
}


/* v23 — project carousels
   Uses the original project image footprint from v21.
   Behavior mirrors the Car Showables carousel without expanding the image column. */

.project-single-image .showcase-carousel {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
}

.project-single-image .carousel-track {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Preserve the exact visual proportions of the original single images. */
.project-single-image .carousel-once .carousel-track {
  aspect-ratio: 500 / 386;
}

.project-single-image .carousel-elite .carousel-track {
  aspect-ratio: 720 / 405;
}

.project-single-image .carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .65s ease-in-out;
}

.project-single-image .carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.project-single-image .carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Car Showables-style previous/next controls. */
.project-single-image .carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
}

.project-single-image .showcase-carousel:hover .carousel-control,
.project-single-image .showcase-carousel .carousel-control:focus-visible {
  opacity: 1;
}

.project-single-image .carousel-control:hover {
  background: rgba(0, 0, 0, .9);
}

.project-single-image .carousel-prev {
  left: 12px;
}

.project-single-image .carousel-next {
  right: 12px;
}

.project-single-image .carousel-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  z-index: 3;
}

.project-single-image .carousel-dot {
  appearance: none;
  -webkit-appearance: none;
  width: 7px;
  height: 7px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  opacity: .35;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  transition: opacity .2s ease;
}

.project-single-image .carousel-dot.is-active {
  opacity: 1;
}

@media (hover: none) {
  .project-single-image .carousel-control {
    opacity: 1;
  }
}

@media (max-width: 780px) {
  .project-single-image .carousel-control {
    width: 40px;
    height: 40px;
    font-size: 25px;
    line-height: 40px;
  }

  .project-single-image .carousel-prev {
    left: 8px;
  }

  .project-single-image .carousel-next {
    right: 8px;
  }

  .project-single-image .carousel-dots {
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-single-image .carousel-slide {
    transition: none;
  }
}


/* v24 — carousel refinement */

/* Allow the navigation dots to sit beneath the image instead of being clipped
   by the figure wrapper. */
.project-single-image {
  overflow: visible !important;
}

/* Controls now live inside the image track, so 50% is the exact vertical
   center of the image area. */
.project-single-image .carousel-track {
  position: relative;
}

.project-single-image .carousel-control {
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Put the dots below the image, in normal document flow. */
.project-single-image .carousel-dots {
  position: static !important;
  transform: none !important;
  margin-top: 12px;
  min-height: 10px;
}

.project-green .carousel-dot,
.project-blue .carousel-dot {
  background: currentColor;
  color: #fff;
}

/* Elite Pacific: align the top of the carousel with the top of its headline,
   matching the visual relationship used in the Once Again section. */
@media (min-width: 781px) {
  .project-blue.project-reverse .project-single-image {
    margin-top: calc(35px + 1.02rem) !important;
  }
}

@media (max-width: 780px) {
  .project-blue.project-reverse .project-single-image {
    margin-top: 0 !important;
  }

  .project-single-image .carousel-dots {
    margin-top: 10px;
  }
}


/* v25 — optically center carousel arrow marks
   The ‹ and › text glyphs have asymmetric font metrics, which makes them look
   vertically off-center even when the button itself is centered. Hide the text
   glyph visually and draw a true geometric chevron in the exact center instead. */

.project-single-image .carousel-control {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: block;
  font-size: 0 !important;
  line-height: 0 !important;
}

.project-single-image .carousel-control::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform-origin: center;
}

.project-single-image .carousel-prev::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}

.project-single-image .carousel-next::before {
  transform: translate(-65%, -50%) rotate(45deg);
}

@media (max-width: 780px) {
  .project-single-image .carousel-control::before {
    width: 8px;
    height: 8px;
  }
}


/* v26 — Elite Pacific carousel/headline alignment
   Move the carousel down so its top edge aligns with the visible top of the
   "E" in Elite Pacific Properties, matching the supplied pink-line reference. */
@media (min-width: 781px) {
  .project-blue.project-reverse .project-single-image {
    margin-top: calc(35px + 1.02rem + 15px) !important;
  }
}


/* v27 — Steelcase desktop side-by-side layout
   Keep project 04 copy on the left and steelcase.png on the right. */
@media (min-width: 781px) {
  .project-steelcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: center;
  }

  .project-steelcase .project-copy {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .project-steelcase .project-single-image {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin: 0 !important;
    align-self: center;
  }

  .project-steelcase .project-single-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* Preserve the existing stacked presentation on tablets/phones. */
@media (max-width: 780px) {
  .project-steelcase {
    display: block;
  }
}


/* v28 — Steelcase image alignment + scale
   Align the top of the visible tablet artwork with the top of the project
   subheadline, matching the supplied pink guide, and enlarge by 10%. */
@media (min-width: 781px) {
  .project-steelcase .project-single-image {
    width: 110% !important;
    max-width: none !important;
    align-self: start !important;
    margin-top: clamp(128px, 9.6vw, 166px) !important;
    margin-left: 0 !important;
  }

  .project-steelcase .project-single-image img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }
}


/* v29 — corrected Steelcase selectors
   v28 targeted .project-single-image, but the Steelcase figure is actually
   .project-hero.steelcase-transparent. Apply the requested alignment and
   10% enlargement to the real element. */
@media (min-width: 781px) {
  .project-steelcase .project-meta {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .project-steelcase .project-hero.steelcase-transparent {
    grid-column: 2;
    grid-row: 1;
    width: 110% !important;
    max-width: none !important;
    align-self: start !important;
    justify-self: start !important;

    /* Places the visible top of the tablet at the project-kicker line,
       matching the supplied pink reference guide. */
    margin-top: clamp(112px, 8.1vw, 120px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .project-steelcase .project-hero.steelcase-transparent img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    object-fit: contain;
  }
}


/* v30 — Steelcase alignment correction
   The previous offset was still too high. The supplied reference places the
   top of the tablet at the same horizontal line as the top of the project
   kicker ("Creating an Augmented Reality Furniture Configurator").
   Use a direct desktop offset from the project top, while keeping the image
   10% larger than the v27 baseline. */
@media (min-width: 781px) {
  .project.project-steelcase {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr) !important;
    column-gap: clamp(48px, 6vw, 96px) !important;
    align-items: start !important;
  }

  .project.project-steelcase > .project-meta {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
  }

  .project.project-steelcase > .project-hero.steelcase-transparent {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    justify-self: start !important;

    width: 110% !important;
    max-width: none !important;

    /* Reference alignment: top of visible tablet ≈ top of project kicker. */
    margin: 178px 0 0 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .project.project-steelcase > .project-hero.steelcase-transparent > img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }
}

@media (max-width: 780px) {
  .project.project-steelcase > .project-hero.steelcase-transparent {
    width: 100% !important;
    margin-top: clamp(40px, 5vw, 75px) !important;
  }
}


/* v31 — About Damon / Car Showables founder sidebar */
@media (min-width: 901px) {
  .about {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }

  .about > .about-carshowables {
    grid-column: 1;
    grid-row: 1 / span 20;
  }

  /* Keep every existing About child in the main right-hand column. */
  .about > :not(.about-carshowables) {
    grid-column: 2;
  }
}

.about-carshowables {
  min-width: 0;
  font-size: .94rem;
  line-height: 1.55;
}

.about-carshowables-logo {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto 28px;
}

.about-carshowables-logo img {
  display: block;
  width: 200px !important;
  height: 200px !important;
  object-fit: contain;
}

.about-carshowables p {
  margin: 0 0 22px;
  text-align: left;
}

.about-carshowables-links {
  margin-bottom: 0 !important;
}

.about-carshowables a:not(.about-carshowables-logo) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.about-carshowables a:not(.about-carshowables-logo):hover,
.about-carshowables a:not(.about-carshowables-logo):focus-visible {
  text-decoration-thickness: 2px;
}

@media (max-width: 900px) {
  .about-carshowables {
    margin-bottom: clamp(48px, 7vw, 72px);
  }

  .about-carshowables-logo {
    margin-left: auto;
    margin-right: auto;
  }
}


/* v32 — About Damon / Car Showables right-column alignment */
@media (min-width: 901px) {
  .about {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) !important;
    column-gap: clamp(64px, 7vw, 110px) !important;
    align-items: start !important;
  }

  .about > .about-main {
    grid-column: 1 !important;
    min-width: 0;
  }

  .about > .about-carshowables {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0;
    align-self: start;
    padding-top: clamp(166px, 13vw, 205px);
  }

  .about-carshowables-logo {
    margin: 0 auto 28px !important;
  }

  /* Pull the sidebar copy upward beneath the logo so its first line aligns
     visually with the first paragraph in the main About column. */
  .about-carshowables p:first-of-type {
    margin-top: 24px !important;
  }
}

@media (max-width: 900px) {
  .about {
    display: block !important;
  }

  .about > .about-main,
  .about > .about-carshowables {
    display: block;
  }

  .about > .about-carshowables {
    padding-top: 0 !important;
    margin-top: clamp(48px, 7vw, 72px);
  }
}


/* v33 — Raise Car Showables feature to match supplied About reference */
@media (min-width: 901px) {
  .about > .about-carshowables {
    position: relative;
    top: -56px;
  }
}

@media (max-width: 900px) {
  .about > .about-carshowables {
    top: 0;
  }
}


/* v34 — final desktop About baseline micro-alignment
   Raise the Car Showables feature 7px so its first line aligns with the
   first About body paragraph in the supplied live-site screenshot. */
@media (min-width: 901px) {
  .about > .about-carshowables {
    top: -63px !important;
  }
}


/* v35 — final copy and footer refinements */
.hero-intro {
  font-style: normal !important;
}

.site-footer {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 30px !important;
}

.site-footer .footer-powered,
.site-footer .footer-copyright {
  margin: 0 !important;
}

.site-footer .footer-powered {
  justify-self: start;
  text-transform: none;
}

.site-footer .footer-powered a {
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: lowercase;
}

.site-footer .footer-powered a:hover,
.site-footer .footer-powered a:focus-visible {
  opacity: .55;
}

.site-footer .footer-copyright {
  justify-self: end;
}

@media (max-width: 900px) {
  .site-footer {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .site-footer .footer-powered,
  .site-footer .footer-copyright {
    justify-self: start !important;
  }
}


/* v36 — Tissue footer mark */
.site-footer .footer-tissue-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

.site-footer .footer-tissue-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-transform: lowercase;
}

.site-footer .footer-tissue-link strong {
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: lowercase;
}

.site-footer .footer-tissue-link:hover,
.site-footer .footer-tissue-link:focus-visible {
  opacity: .55;
}


/* v37 — use Tissue's actual site favicon in the footer */
.site-footer .footer-tissue-mark {
  display: none !important;
}

.site-footer .footer-tissue-favicon {
  display: block;
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex: 0 0 20px;
  object-fit: contain;
}

/* v41 — About Damon vertical divider */
@media (min-width: 901px) {
  .about > .about-carshowables { position: relative; }
  .about > .about-carshowables::before {
    content: "";
    position: absolute;
    top: 263px;
    bottom: 0;
    left: calc(clamp(64px, 7vw, 110px) * -0.5);
    width: 1px;
    background: var(--line);
    pointer-events: none;
  }
}
@media (max-width: 900px) {
  .about > .about-carshowables::before { display: none; }
}


/* v42 — tighten About Damon divider to Car Showables paragraph only */
@media (min-width: 901px) {
  .about > .about-carshowables::before {
    display: none !important;
  }

  .about-carshowables p:first-of-type {
    position: relative;
  }

  .about-carshowables p:first-of-type::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(clamp(64px, 7vw, 110px) * -0.5);
    width: 1px;
    background: var(--line);
    pointer-events: none;
  }
}

@media (max-width: 900px) {
  .about-carshowables p:first-of-type::before {
    display: none;
  }
}


/* v43 — pixel-match About divider to supplied pink-line reference
   Current divider measured ~y338–640 in the live screenshot.
   Reference guide is y344–704, so move the top down 6px and extend
   the bottom by 64px. */
@media (min-width: 901px) {
  .about-carshowables p:first-of-type::before {
    top: 6px !important;
    bottom: -64px !important;
  }
}


/* v44 — soft floating shadow for both project carousels
   Approximately 20% black opacity, broad blur, and a subtle downward offset.
   Applied to the image track only so the dots remain crisp and unshadowed. */
.project-single-image .showcase-carousel .carousel-track {
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.14),
    0 6px 14px rgba(0, 0, 0, 0.06);
}

/* Keep the floating effect restrained on smaller screens. */
@media (max-width: 780px) {
  .project-single-image .showcase-carousel .carousel-track {
    box-shadow:
      0 14px 28px rgba(0, 0, 0, 0.13),
      0 5px 10px rgba(0, 0, 0, 0.05);
  }
}


/* v45 — corrected floating carousel shadow
   The previous shadow was being visually clipped by the carousel wrapper.
   Let the shadow render outside the carousel while keeping slide cropping
   contained inside the track itself. */
.project-single-image .showcase-carousel {
  overflow: visible !important;
}

.project-single-image .showcase-carousel .carousel-track {
  overflow: hidden;
  box-shadow: 0 20px 44px -8px rgba(0, 0, 0, 0.20) !important;
}

/* Keep the dots visually separate from the shadow. */
.project-single-image .carousel-dots {
  position: relative;
  z-index: 2;
}

@media (max-width: 780px) {
  .project-single-image .showcase-carousel .carousel-track {
    box-shadow: 0 16px 34px -8px rgba(0, 0, 0, 0.18) !important;
  }
}


/* v50 — looping Selected Works down-arrow motion
   Smoothly slides down, pauses, then snaps back to the top and repeats. */
.section-down-arrow {
  display: inline-block;
  will-change: transform;
  animation: selected-work-arrow-drop 2.4s cubic-bezier(.45, 0, .2, 1) infinite;
}

@keyframes selected-work-arrow-drop {
  0%,
  12% {
    transform: translateY(0);
  }

  62% {
    transform: translateY(14px);
  }

  78% {
    transform: translateY(14px);
  }

  78.01%,
  100% {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-down-arrow {
    animation: none !important;
    transform: none !important;
  }
}


/* v51 — quick image fade-in on scroll */
.scroll-fade-image {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .45s ease-out,
    transform .45s ease-out;
  will-change: opacity, transform;
}

.scroll-fade-image.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-fade-image,
  .scroll-fade-image.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* v52 — hero headshot reveal on every page load / refresh
   Uses the same quick fade-and-rise motion as scroll-revealed imagery. */
.hero-headshot img.scroll-fade-image {
  opacity: 0;
  transform: translateY(10px);
}

.hero-headshot img.scroll-fade-image.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* v54 — draw WHAT I DO divider lines outward from their centers on scroll */
@media (prefers-reduced-motion: no-preference) {
  .service-grid.line-animate-ready {
    position: relative;
    border-top-color: transparent;
    border-bottom-color: transparent;
  }

  .service-grid.line-animate-ready::before,
  .service-grid.line-animate-ready::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
  }

  .service-grid.line-animate-ready::before {
    top: 0;
  }

  .service-grid.line-animate-ready::after {
    bottom: 0;
  }

  .service-grid.line-animate-ready article + article {
    position: relative;
    border-left-color: transparent;
  }

  .service-grid.line-animate-ready article + article::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: var(--line);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1) .08s;
    pointer-events: none;
  }

  .service-grid.line-animate-ready.is-line-visible::before,
  .service-grid.line-animate-ready.is-line-visible::after {
    transform: scaleX(1);
  }

  .service-grid.line-animate-ready.is-line-visible article + article::before {
    transform: scaleY(1);
  }

  @media (max-width: 780px) {
    .service-grid.line-animate-ready article + article {
      border-left: 0;
      border-top-color: transparent;
    }

    .service-grid.line-animate-ready article + article::before {
      top: 0;
      right: 0;
      bottom: auto;
      left: 0;
      width: auto;
      height: 1px;
      transform: scaleX(0);
      transform-origin: center;
    }

    .service-grid.line-animate-ready.is-line-visible article + article::before {
      transform: scaleX(1);
    }
  }
}


/* v56 — draw the hero/headshot divider from right to left on page load */
@media (prefers-reduced-motion: no-preference) {
  .hero.hero-divider-animate {
    position: relative;
    border-bottom-color: transparent !important;
  }

  .hero.hero-divider-animate::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .7s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
  }

  .hero.hero-divider-animate.is-divider-visible::after {
    transform: scaleX(1);
  }
}


/* v57 — correct hero/headshot divider animation
   The visible rule belongs to .work-heading (its border-top), not .hero.
   Animate that actual rule from right to left. */
@media (prefers-reduced-motion: no-preference) {
  .hero.hero-divider-animate::after {
    display: none !important;
  }

  .work-heading.work-divider-animate {
    position: relative;
    border-top-color: transparent !important;
  }

  .work-heading.work-divider-animate::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
  }

  .work-heading.work-divider-animate.is-divider-visible::before {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-heading.work-divider-animate {
    border-top-color: var(--line) !important;
  }
}


/* v58 — draw the divider below Steelcase outward from the center */
@media (prefers-reduced-motion: no-preference) {
  .services-heading.steelcase-divider-animate {
    position: relative;
    border-top-color: transparent !important;
  }

  .services-heading.steelcase-divider-animate::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
  }

  .services-heading.steelcase-divider-animate.is-divider-visible::before {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-heading.steelcase-divider-animate {
    border-top-color: var(--line) !important;
  }
}


/* v59 — draw the Car Showables vertical divider outward from center */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .about-carshowables.carshowables-divider-animate p:first-of-type::before {
    transform: scaleY(0);
    transform-origin: center center;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
  }

  .about-carshowables.carshowables-divider-animate.is-divider-visible p:first-of-type::before {
    transform: scaleY(1);
  }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
  .about-carshowables.carshowables-divider-animate p:first-of-type::before {
    transform: none !important;
  }
}


/* v60 — draw the divider beneath the navigation outward from center */
@media (prefers-reduced-motion: no-preference) {
  .site-header.nav-divider-animate {
    border-bottom-color: transparent !important;
  }

  .site-header.nav-divider-animate::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--line);
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
  }

  .site-header.nav-divider-animate.is-divider-visible::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.nav-divider-animate {
    border-bottom-color: var(--line) !important;
  }
}


/* v61 — sequential WHAT I DO icon reveal */
@media (prefers-reduced-motion: no-preference) {
  .service-icon.service-icon-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity .45s ease-out,
      transform .45s ease-out;
    will-change: opacity, transform;
  }

  .service-icon.service-icon-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-icon.service-icon-reveal,
  .service-icon.service-icon-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* v63 — type the hero headline onto the page on load / refresh */
@media (prefers-reduced-motion: no-preference) {
  .hero-type-headline .hero-line {
    min-height: .88em;
  }

  .hero-type-headline .hero-line.is-typing::after {
    content: "";
    display: inline-block;
    width: .055em;
    height: .76em;
    margin-left: .055em;
    background: currentColor;
    vertical-align: -.03em;
    animation: hero-type-caret .72s steps(1, end) infinite;
  }

  .hero-type-headline.typing-finished .hero-line::after {
    display: none;
  }

  @keyframes hero-type-caret {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-type-headline .hero-line::after {
    display: none !important;
  }
}


/* v64 — type the closing contact response as it enters the viewport */
@media (prefers-reduced-motion: no-preference) {
  .contact-type-line.contact-type-ready {
    min-height: 1em;
  }

  .contact-type-line.is-typing::after {
    content: "";
    display: inline-block;
    width: .055em;
    height: .76em;
    margin-left: .055em;
    background: currentColor;
    vertical-align: -.03em;
    animation: contact-type-caret .72s steps(1, end) infinite;
  }

  @keyframes contact-type-caret {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-type-line::after {
    display: none !important;
  }
}


/* v65 — keep the typing cursor blinking after both messages finish */
@media (prefers-reduced-motion: no-preference) {
  .hero-type-headline.typing-finished .hero-line:last-child::after,
  .contact-type-line.typing-complete::after {
    content: "";
    display: inline-block !important;
    width: .055em;
    height: .76em;
    margin-left: .055em;
    background: currentColor;
    vertical-align: -.03em;
    animation: persistent-type-caret .72s steps(1, end) infinite;
  }

  @keyframes persistent-type-caret {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-type-headline.typing-finished .hero-line:last-child::after,
  .contact-type-line.typing-complete::after {
    display: none !important;
  }
}

/* =========================================================
   Car Showables — Selected Work 05
   Initial two-column layout
   ========================================================= */

@media (min-width: 901px) {
  .project-carshowables {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr);
    column-gap: clamp(60px, 7vw, 120px);
    align-items: center;
  }

  .project-carshowables .project-meta {
    grid-column: 2;
    grid-row: 1;
    max-width: 720px;
  }

  .project-carshowables .carshowables-hero {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    width: 100%;
    max-width: 560px;
    justify-self: center;
  }

  .project-carshowables .carshowables-hero img {
    display: block;
    width: 100%;
    height: auto;
  }
}


/* =========================================================
   Car Showables — layout balance refinement
   ========================================================= */

@media (min-width: 901px) {
  .project-carshowables {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }

  .project-carshowables .project-meta {
    grid-column: 2;
    grid-row: 1;
    max-width: 760px;
  }

  .project-carshowables .carshowables-hero {
    grid-column: 1;
    grid-row: 1;
    width: 118%;
    max-width: 720px;
    margin-top: clamp(150px, 13vw, 210px);
    margin-left: -8%;
    justify-self: start;
  }

  .project-carshowables .carshowables-hero img {
    display: block;
    width: 100%;
    height: auto;
  }
}


/* =========================================================
   Car Showables — align image with project subheading
   ========================================================= */

@media (min-width: 901px) {
  .project-carshowables .carshowables-hero {
    margin-top: clamp(118px, 10.5vw, 165px);
  }
}


/* =========================================================
   Car Showables — grid-ground visual treatment
   ========================================================= */

.project-carshowables {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding-left: max(
    var(--pad),
    calc((100vw - var(--max)) / 2 + var(--pad))
  );

  padding-right: max(
    var(--pad),
    calc((100vw - var(--max)) / 2 + var(--pad))
  );

  background-color: #151517;

  background-image:
    repeating-linear-gradient(
      to right,
      rgba(255,255,255,.045) 0 1px,
      transparent 1px 48px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.045) 0 1px,
      transparent 1px 48px
    );

  color: #f5f4f0;
  border-top: 0;
}

.project-carshowables .project-number,
.project-carshowables .project-role {
  color: rgba(255,255,255,.62);
}

.project-carshowables .project-description {
  color: rgba(255,255,255,.88);
}

.project-carshowables .tags {
  color: rgba(255,255,255,.78);
}

.project-carshowables-link {
  margin-top: 18px;
}

.project-carshowables-link a {
  color: #ffffff;
  text-decoration: none;
  transition: opacity .2s ease;
}

.project-carshowables-link a:hover {
  opacity: .65;
}


/* =========================================================
   Services — remove divider and tighten top spacing
   ========================================================= */

.services {
  border-top: 0 !important;
  padding-top: clamp(36px, 4vw, 64px) !important;
}


/* =========================================================
   Services — remove obsolete divider after Car Showables
   and tighten transition into WHAT I DO
   ========================================================= */

.services {
  padding-top: 0 !important;
}

.services-heading {
  border-top: 0 !important;
  padding-top: var(--section-rhythm) !important;
}

/* Remove the animated divider that previously followed Steelcase */
.services-heading.steelcase-divider-animate::before {
  display: none !important;
}


/* Car Showables — underline website and Instagram links */
.project-carshowables-link a {
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* =========================================================
   SimpliSafe — left media / right copy
   ========================================================= */

.project-simplisafe {
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(0, 1.15fr);
  column-gap: clamp(60px, 7vw, 120px);
  align-items: center;
}

.project-simplisafe .project-meta {
  grid-column: 2;
  grid-row: 1;
  max-width: 760px;
}

.project-simplisafe .simplisafe-video {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: 590px;
  margin-top: 0;
  justify-self: start;
}

.project-simplisafe .simplisafe-video-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.project-simplisafe .simplisafe-video-trigger img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* Stack naturally on smaller screens */
@media (max-width: 900px) {
  .project-simplisafe {
    display: block;
  }

  .project-simplisafe .project-meta {
    max-width: 830px;
  }

  .project-simplisafe .simplisafe-video {
    width: 100%;
    max-width: 680px;
    margin-top: clamp(40px, 7vw, 70px);
  }
}


/* =========================================================
   SimpliSafe — align video with top of project content
   ========================================================= */

@media (min-width: 901px) {
  .project-simplisafe {
    align-items: start;
  }

  .project-simplisafe .simplisafe-video {
    margin-top: 60px;
  }
}


/* SimpliSafe — final video alignment */
@media (min-width: 901px) {
  .project-simplisafe .simplisafe-video {
    margin-top: 65px;
  }
}


/* =========================================================
   Steelcase — alternate media left / copy right
   ========================================================= */

@media (min-width: 901px) {
  .project-steelcase {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
    column-gap: clamp(60px, 7vw, 120px);
    align-items: center;
  }

  .project-steelcase .project-meta {
    grid-column: 2;
    grid-row: 1;
    max-width: 760px;
  }

  .project-steelcase .steelcase-transparent {
    grid-column: 1;
    grid-row: 1;
    width: 115%;
    max-width: 650px;
    margin-top: 0;
    margin-left: -8%;
    justify-self: start;
  }

  .project-steelcase .steelcase-transparent img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
  }
}

/* =========================================================
   Steelcase — final alternating layout override
   Media left / copy right
   ========================================================= */

@media (min-width: 901px) {

  .project.project-steelcase {
    display: grid !important;
    grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr) !important;
    column-gap: clamp(60px, 7vw, 120px) !important;
    align-items: start !important;
  }

  /* Copy → right */
  .project.project-steelcase > .project-meta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    max-width: 760px !important;
    min-width: 0;
  }

  /* Image → left */
  .project.project-steelcase > .project-hero.steelcase-transparent {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 115% !important;
    max-width: 650px !important;

    align-self: start !important;
    justify-self: start !important;

    margin-top: 178px !important;
    margin-left: -8% !important;
    margin-right: 0 !important;

    padding: 0 !important;
    transform: none !important;
  }

  .project.project-steelcase > .project-hero.steelcase-transparent > img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }
}


/* =========================================================
   Selected Work — final alternating sequence
   04 Elite: copy left / media right
   06 Car Showables: copy left / media right
   ========================================================= */

@media (min-width: 901px) {

  /* ELITE PACIFIC PROPERTIES
     Override the existing project-reverse ordering. */

  .project-blue.project-reverse .project-meta {
    order: 1 !important;
  }

  .project-blue.project-reverse .project-single-image {
    order: 2 !important;
  }


  /* CAR SHOWABLES
     Copy left / media right. */

  .project.project-carshowables {
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 1fr) !important;
    column-gap: clamp(48px, 6vw, 96px) !important;
    align-items: start !important;
  }

  .project.project-carshowables > .project-meta {
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-width: 760px !important;
  }

  .project.project-carshowables > .carshowables-hero {
    grid-column: 2 !important;
    grid-row: 1 !important;

    width: 118% !important;
    max-width: 720px !important;

    justify-self: start !important;

    /* Preserve the vertical alignment we already tuned. */
    margin-top: clamp(118px, 10.5vw, 165px) !important;
    margin-left: 0 !important;
  }
}


/* =========================================================
   SimpliSafe — click-to-play video reveal
   ========================================================= */

.simplisafe-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.simplisafe-video-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity .45s ease;
}

.simplisafe-video-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.simplisafe-video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;

  opacity: 0;
  transition: opacity .45s ease;
}

/* Fade poster away */
.simplisafe-video.is-playing .simplisafe-video-trigger {
  opacity: 0;
  pointer-events: none;
}

/* Fade video in */
.simplisafe-video.is-playing .simplisafe-video-player {
  opacity: 1;
}

/* Keyboard focus remains visible without adding a permanent border */
.simplisafe-video-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .simplisafe-video-trigger,
  .simplisafe-video-player {
    transition: none;
  }
}


/* =========================================================
   SimpliSafe — native self-hosted video
   ========================================================= */

.simplisafe-video-player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  opacity: 0;
  transition: opacity .45s ease;
  background: transparent;
}

.simplisafe-video.is-playing .simplisafe-video-player {
  opacity: 1;
}

.simplisafe-video.is-playing .simplisafe-video-trigger {
  opacity: 0;
  pointer-events: none;
}


/* =========================================================
   SimpliSafe — final native poster/video interaction
   ========================================================= */

.simplisafe-video-native {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  outline: 0;
  cursor: pointer;
  background: transparent;
}


/* =========================================================
   SimpliSafe — minimal custom video controls
   ========================================================= */

.simplisafe-video {
  position: relative;
}

.simplisafe-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 18px 18px 14px;

  color: #fff;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.72),
      rgba(0,0,0,0)
    );

  opacity: 0;
  visibility: hidden;
  transition:
    opacity .25s ease,
    visibility .25s ease;

  z-index: 3;
}

/* Desktop hover */
@media (hover: hover) and (pointer: fine) {
  .simplisafe-video:hover .simplisafe-controls,
  .simplisafe-video:focus-within .simplisafe-controls {
    opacity: 1;
    visibility: visible;
  }
}

/* Touch/mobile */
.simplisafe-video.controls-visible .simplisafe-controls {
  opacity: 1;
  visibility: visible;
}

.simplisafe-play,
.simplisafe-fullscreen {
  flex: 0 0 auto;

  display: grid;
  place-items: center;

  width: 34px;
  height: 34px;

  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;

  font: inherit;
  font-size: 17px;

  cursor: pointer;
}

.simplisafe-progress {
  flex: 1 1 auto;
  min-width: 50px;
  cursor: pointer;
  accent-color: #fff;
}

.simplisafe-time {
  flex: 0 0 auto;
  color: #fff;

  font-family: Montserrat, sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;

  white-space: nowrap;
}

.simplisafe-play:focus-visible,
.simplisafe-fullscreen:focus-visible,
.simplisafe-progress:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .simplisafe-controls {
    gap: 8px;
    padding: 14px 10px 10px;
  }

  .simplisafe-play,
  .simplisafe-fullscreen {
    width: 32px;
    height: 32px;
  }

  .simplisafe-time {
    font-size: .62rem;
  }
}


/* SimpliSafe — hide 1px video edge artifact */
.simplisafe-video-native {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin: -1px;
}


/* SimpliSafe — preserve video aspect ratio in fullscreen */
.simplisafe-video:fullscreen {
  background: #000;
}

.simplisafe-video:fullscreen .simplisafe-video-native {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

/* Safari/WebKit fullscreen support */
.simplisafe-video:-webkit-full-screen {
  background: #000;
}

.simplisafe-video:-webkit-full-screen .simplisafe-video-native {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}