: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;
}