/* ==========================================================================
   HOME PAGE
   ========================================================================== */


/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;

  display: grid;
  grid-template-columns: var(--left-col) 1fr;
  gap: var(--g);
  align-items: end;

  padding:
    clamp(0px, 0vw, 0px)
    var(--g)
    clamp(28px, 5vw, 60px);

  min-height: 100svh;
}

.hero::before {
  content: "";

  position: absolute;

  width: calc(var(--reveal-r) * 2);
  height: calc(var(--reveal-r) * 2);

  left: var(--reveal-x);
  top: var(--reveal-y);

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: var(--masthead-ink);

  pointer-events: none;

  z-index: 0;
}

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

body:not(.project-vince):not(.project-decipal)
.masthead .hero {
  padding-top:
    calc(
      var(--header-h, 64px)
      + clamp(8px, 1vw, 16px)
    ) !important;
}

.left {
  display: grid;
}

.creative {
  font-family: "Griffiths", serif;

  font-size: clamp(54px, 10vw, 150px);

  line-height: .98;

  margin: 0;

  font-weight: 400;

  letter-spacing: .01em;

  text-indent: -.23em;

  padding-left: .06em;

  color: var(--masthead-ink);
}

.name {
  font-size: clamp(18px, 2.6vw, 30px);

  font-weight: 100;

  margin: 0;

  color: var(--masthead-ink);
}

.lead {
  color:
    color-mix(
      in srgb,
      var(--masthead-ink) 80%,
      transparent
    );

  font-size: clamp(14px, 2.4vw, 16px);

  margin: 0;

  max-width: 60ch;
}

.right {
  display: grid;

  gap: clamp(18px, 2.6vw, 32px);

  justify-items: start;
}

.flower-box {
  display: flex;

  justify-content: center;

  align-items: center;
}

.flower-reveal {
  position: relative;

  width: clamp(160px, 20vw, 320px);

  aspect-ratio: 382 / 496;
}

.flower-reveal img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
}

.flower-color.spotlight-clip {
  z-index: 2;

  -webkit-clip-path:
    circle(
      var(--reveal-r)
      at var(--local-x) var(--local-y)
    );

  clip-path:
    circle(
      var(--reveal-r)
      at var(--local-x) var(--local-y)
    );

  will-change: clip-path;
}

.designer-box {
  display: flex;

  justify-content: flex-end;
}

.designer {
  font-family: "Cormorant", serif;

  font-weight: 300;

  font-size: clamp(54px, 12vw, 200px);

  line-height: .65;

  letter-spacing: .035em;

  margin: 0;

  text-align: right;

  color: var(--masthead-ink);
}



/* ==========================================================================
   SPOTLIGHT TEXT
   ========================================================================== */

.spotlight-text {
  position: relative;
}

.spotlight-text::after {
  content: attr(data-text);

  position: absolute;

  inset: 0;

  color: var(--accent);

  font: inherit;

  line-height: inherit;

  letter-spacing: inherit;

  pointer-events: none;

  z-index: 2;

  -webkit-clip-path:
    circle(
      var(--reveal-r)
      at var(--local-x) var(--local-y)
    );

  clip-path:
    circle(
      var(--reveal-r)
      at var(--local-x) var(--local-y)
    );
}


/* ==========================================================================
   PAGE
   ========================================================================== */

.page {
  color: var(--page-ink);

  background: var(--page-bg);
}


/* ==========================================================================
   SHARED SECTION HEIGHT
   ========================================================================== */

.quote,
.philosophy,
.services-switcher,
.experience,
.projects {
  min-height: 100svh;
}


/* ==========================================================================
   QUOTE — CREAM
   ========================================================================== */

.quote {
  position: relative;

  padding-block:
    clamp(40px, 8vw, 96px);

  background: var(--page-bg);

  transition:
    background-color .35s ease;

  display: grid;

  align-content: center;
}

.quote-line {
  font-family: "Griffiths", serif;

  font-weight: 400;

  font-size:
    clamp(68px, 11.6vw, 96px);

  line-height: 1.06;

  margin: 0 0 .15em 0;

  letter-spacing: .01em;

  color: #A15D66;
}

.quote.is-light {
  background: var(--page-bg);
}

.quote .quote-line,
.quote.is-light .quote-line {
  color: #A15D66;
}


/* ==========================================================================
   GENERAL SECTION STYLES
   ========================================================================== */

.section__title {
  font-family: "Cormorant", serif;

  font-weight: 300;

  font-size:
    clamp(32px, 4.5vw, 64px);

  letter-spacing: .02em;

  margin: 0 0 20px 0;
}

.section {
  padding-block:
    clamp(16px, 3.5vw, 40px);
}


/* ==========================================================================
   PHILOSOPHY — PINK
   ========================================================================== */

.philosophy {
  display: grid;

  justify-items: center;

  gap:
    clamp(16px, 4vh, 28px);

  padding-block:
    clamp(40px, 8vh, 96px);

  text-align: center;

  background: #A15D66;

  color: #F2ECEA;

  align-content: center;
}

.philosophy-heading {
  width: min(1200px, 94vw);

  height: auto;
}

.portrait-oval {
  width:
    clamp(200px, 28vw, 320px);

  height:
    clamp(260px, 36vw, 420px);

  object-fit: cover;

  border-radius: 9999px;
}

.philosophy-copy {
  max-width: 70ch;

  color: #F2ECEA;

  font-size:
    clamp(16px, 1.2vw, 18px);

  line-height: 1.7;

  text-align: start;
}





/* ==========================================================================
   SERVICES — NORMAL ENTRANCE + STICKY SCROLL STORY
   ========================================================================== */

/*
  The heading scrolls normally.

  Once the service presentation reaches the viewport,
  the list and image stay pinned while the active
  service and its corresponding image change.

  After the fourth stage, normal scrolling continues
  into the Experience section.
*/


/* ==========================================================================
   1. MAIN SECTION
   ========================================================================== */

.page .services-switcher {
  /*
    Total additional scrolling allocated to
    the four service stages.
  */
  --services-scroll-travel: 168svh;

  /*
    UPDATED: Taller presentation.

    Both the service list and image use this
    variable, keeping them the same height.
  */
  --services-content-height:
    clamp(480px, 72svh, 680px);

  position: relative;

  display: block;

  height: auto;

  min-height: 100svh;

  padding-top: 0;
  padding-bottom: 0;

  background: var(--page-bg);

  color: var(--page-ink);
}


/* ==========================================================================
   2. NORMAL-FLOW TITLE
   ========================================================================== */

.page .services-story-title {
  position: relative;

  top: auto;
  left: auto;

  width: 100%;

  padding-top:
    clamp(64px, 9svh, 120px);

  margin:
    0
    0
    clamp(36px, 6svh, 76px);

  color: #A15D66;

  opacity: 1;

  transform: none;

  transition: none;
}


/*
  The title remains part of the normal document flow.
  It scrolls upwards naturally instead of fading out.
*/

.page
.services-switcher:not([data-service-stage="0"])
.services-story-title {
  opacity: 1;

  transform: none;
}


/* ==========================================================================
   3. SCROLL AREA
   ========================================================================== */

.page .services-scroll-area {
  position: relative;

  width: 100%;

  height:
    calc(
      100svh + var(--services-scroll-travel)
    );

  min-height: 0;

  padding: 0;

  margin: 0;
}


/* ==========================================================================
   4. STICKY PRESENTATION
   ========================================================================== */

.page .services-sticky {
  position: sticky;

  top: 0;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  align-items: center;

  width: 100%;

  height: 100svh;

  min-height: 0;

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  overflow: visible;
}


/* ==========================================================================
   5. TWO-COLUMN CONTENT
   ========================================================================== */

/*
  UPDATED: Narrower left column.

  The left column gets a content-oriented width.
  The image takes all remaining horizontal space.
*/

.page .services-cols {
  display: grid;

  grid-template-columns:
    minmax(0, clamp(240px, 23vw, 340px))
    minmax(0, 1fr);

  gap:
    clamp(28px, 3.5vw, 64px);

  align-items: center;

  width: 100%;

  min-width: 0;

  margin: 0;

  padding: 0;
}


/* ==========================================================================
   6. SERVICES LIST
   ========================================================================== */

.page .services-steps {
  display: grid;

  align-content: center;

  gap: 0;

  width: 100%;

  height: var(--services-content-height);

  min-height: 0;
  min-width: 0;

  margin: 0;

  padding: 0;

  list-style: none;
}


/* ==========================================================================
   7. INDIVIDUAL SERVICE
   ========================================================================== */

.page .service-step {
  display: grid;

  grid-template-rows:
    0fr
    auto
    0fr;

  min-width: 0;

  padding:
    clamp(12px, 1.7svh, 20px) 0;

  border-bottom:
    1px solid rgba(35, 34, 34, .35);

  transition:
    grid-template-rows .35s ease,
    padding .35s ease;
}

.page .service-step:last-child {
  border-bottom: none;
}


/* ==========================================================================
   8. SERVICE NUMBER
   ========================================================================== */

.page .service-step-number {
  display: block;

  min-height: 0;

  overflow: hidden;

  font-family: "Cormorant", serif;

  font-size:
    clamp(54px, 5vw, 84px);

  font-weight: 300;

  line-height: 1;

  opacity: 0;

  transition:
    opacity .3s ease;
}


/* ==========================================================================
   9. SERVICE HEADING
   ========================================================================== */

.page .service-step-heading {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  min-width: 0;
}

.page .service-step-heading h3 {
  margin: 0;

  font-size:
    clamp(18px, 1.5vw, 24px);

  font-weight: 400;

  line-height: 1.35;
}


/* ==========================================================================
   10. ACTIVE MARK
   ========================================================================== */

.page .service-step-heading .active-mark {
  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  object-fit: contain;

  opacity: 0;

  transition:
    opacity .3s ease;
}


/* ==========================================================================
   11. SERVICE DESCRIPTION
   ========================================================================== */

.page .service-step-desc {
  margin: 0;

  max-width: 38ch;

  min-height: 0;

  overflow: hidden;

  opacity: 0;

  font-size:
    clamp(16px, 1.15vw, 18px);

  line-height: 1.6;

  transition:
    opacity .3s ease;
}


/* ==========================================================================
   12. ACTIVE SERVICE
   ========================================================================== */

.page .service-step.is-active {
  grid-template-rows:
    1fr
    auto
    1fr;
}

.page .service-step.is-active .service-step-number {
  opacity: 1;

  padding-bottom: 12px;
}

.page .service-step.is-active .service-step-heading .active-mark {
  opacity: 1;
}

.page .service-step.is-active .service-step-desc {
  opacity: 1;

  padding-top: 12px;
}


/* ==========================================================================
   13. SERVICE IMAGE FRAME
   ========================================================================== */

/*
  The image and service list have matching heights.
  All four images occupy the same frame.
*/

.page .services-visual {
  position: relative;

  align-self: center;

  width: 100%;

  height: var(--services-content-height);

  min-height: 0;
  min-width: 0;

  overflow: hidden;

  border-radius: 12px;

  background: #E6E7E9;

  box-shadow: var(--shadow-1);
}


/* ==========================================================================
   14. INDIVIDUAL IMAGES
   ========================================================================== */

.page .services-media {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  min-width: 0;
  max-width: none;

  overflow: hidden;

  border-radius: inherit;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: scale(1.015);

  transition:
    opacity .35s ease,
    transform .5s ease,
    visibility 0s linear .35s;
}


/* Active image */

.page .services-media.is-active {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: scale(1);

  transition:
    opacity .35s ease,
    transform .5s ease,
    visibility 0s;
}


/* Keep the image in place on hover */

.page .services-media:hover {
  transform: scale(1);
}


/* Image sizing */

.page .services-media img,
.page .services-media video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  border-radius: inherit;
}


/* ==========================================================================
   15. TABLET
   ========================================================================== */

@media (min-width: 701px) and (max-width: 1100px) {

  .page .services-switcher {
    --services-content-height:
      clamp(400px, 65svh, 580px);
  }

  .page .services-cols {
    grid-template-columns:
      minmax(0, clamp(220px, 28vw, 300px))
      minmax(0, 1fr);

    gap:
      clamp(20px, 3vw, 36px);
  }

  .page .service-step-heading h3 {
    font-size:
      clamp(17px, 1.7vw, 21px);
  }

  .page .service-step-desc {
    font-size:
      clamp(14px, 1.4vw, 16px);
  }
}


/* ==========================================================================
   16. MOBILE / SHORT SCREENS
   ========================================================================== */

/*
  On narrow or short screens, the sticky effect
  is disabled and all services become visible
  in normal document flow.
*/

@media (max-width: 700px), (max-height: 560px) {

  .page .services-switcher {
    height: auto;

    min-height: 100svh;

    padding-bottom:
      clamp(56px, 10svh, 90px);
  }


  /* Normal-flow heading */

  .page .services-story-title,
  .page
  .services-switcher:not([data-service-stage="0"])
  .services-story-title {
    position: static;

    padding-top:
      clamp(56px, 10svh, 90px);

    margin-bottom: 30px;

    opacity: 1 !important;

    transform: none !important;
  }


  /* Remove extra scroll distance */

  .page .services-scroll-area {
    height: auto;

    min-height: 0;
  }


  /* Disable sticky positioning */

  .page .services-sticky {
    position: static;

    display: block;

    height: auto;

    min-height: 0;

    padding: 0;

    overflow: visible;
  }


  /* Single-column layout */

  .page .services-cols {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 28px;
  }


  /* Natural list height */

  .page .services-steps {
    height: auto;

    align-content: start;
  }


  /* Show all services */

  .page .service-step,
  .page .service-step.is-active {
    grid-template-rows:
      auto
      auto
      auto;

    transition: none;
  }

  .page .service-step-number {
    opacity: 1;

    overflow: visible;

    font-size: 40px;
  }

  .page .service-step-heading h3 {
    font-size:
      clamp(18px, 4.5vw, 22px);
  }

  .page .service-step-desc {
    opacity: 1;

    overflow: visible;

    font-size: 16px;
  }

  .page .service-step-heading .active-mark {
    opacity: 0;
  }


  /* Show all images in normal document flow */

  .page .services-visual {
    display: grid;

    grid-template-columns: 1fr;

    gap: 16px;

    height: auto;

    overflow: visible;

    box-shadow: none;

    background: transparent;
  }

  .page .services-media,
  .page .services-media.is-active {
    position: relative;

    inset: auto;

    width: 100%;

    height: auto;

    aspect-ratio: 4 / 3;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: none;

    transition: none;

    background: #E6E7E9;

    border-radius: 12px;
  }

  .page .services-media img,
.page .services-media video {
    width: 100%;
    height: 100%;

    object-fit: cover;
  }
}


/* =========================================================
   SERVICES — MOBILE PAIRED SCROLL STORY
   600px and below
   ========================================================= */

@media (max-width: 600px) {

  .page .services-scroll-area,
  .page .services-sticky {
    height: auto;
    min-height: 0;
  }

  .page .services-sticky {
    position: static;
    display: block;
  }

  /*
    Turn the two-column presentation into
    one grid containing eight visual items.
  */

  .page .services-cols {
    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: 0;

    align-items: start;
  }

  /*
    Allow the list items and media elements
    to participate directly in the grid.
    Their HTML stays unchanged.
  */

  .page .services-steps,
  .page .services-visual {
    display: contents;
  }

  /*
    Text 01, visual 01,
    text 02, visual 02, etc.
  */

  .page .service-step:nth-child(1) {
    order: 1;
  }

  .page .services-media[data-service-image="0"] {
    order: 2;
  }

  .page .service-step:nth-child(2) {
    order: 3;
  }

  .page .services-media[data-service-image="1"] {
    order: 4;
  }

  .page .service-step:nth-child(3) {
    order: 5;
  }

  .page .services-media[data-service-image="2"] {
    order: 6;
  }

  .page .service-step:nth-child(4) {
    order: 7;
  }

  .page .services-media[data-service-image="3"] {
    order: 8;
  }

  /*
    All descriptions remain readable.
    The active state changes as the user scrolls.
  */

  .page .service-step,
  .page .service-step.is-active {
    grid-template-rows: auto auto auto;

    padding: 22px 0 16px;

    border-bottom: none;

    transition: none;
  }

  .page .service-step-number,
  .page .service-step.is-active .service-step-number {
    opacity: 1;

    padding-bottom: 8px;

    overflow: visible;

    font-size: clamp(42px, 11vw, 60px);
  }

  .page .service-step-desc,
  .page .service-step.is-active .service-step-desc {
    opacity: 1;

    padding-top: 12px;

    overflow: visible;

    max-width: none;

    font-size: 16px;

    line-height: 1.6;
  }

  .page .service-step-heading .active-mark {
    opacity: 0;
  }

  .page .service-step.is-active
  .service-step-heading .active-mark {
    opacity: 1;
  }

  /*
    Every media element appears directly
    after its corresponding description.
  */

  .page .services-media,
  .page .services-media.is-active {
    position: relative;

    inset: auto;

    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 4 / 3;

    margin: 0 0 clamp(36px, 9vw, 56px);

    overflow: hidden;

    border-radius: 12px;

    background: #E6E7E9;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: none;

    transition: none;

    box-shadow: var(--shadow-1);
  }

  .page .services-media img,
  .page .services-media video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
  }

}


/* ==========================================================================
   17. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .page .services-switcher {
    height: auto;

    min-height: 100svh;

    padding-bottom: 64px;
  }

  .page .services-story-title,
  .page
  .services-switcher:not([data-service-stage="0"])
  .services-story-title {
    position: static;

    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }

  .page .services-scroll-area {
    height: auto;
  }

  .page .services-sticky {
    position: static;

    display: block;

    height: auto;

    padding: 0;

    overflow: visible;
  }

  .page .services-cols {
    grid-template-columns: 1fr;
  }

  .page .services-steps {
    height: auto;
  }

  .page .service-step,
  .page .service-step.is-active {
    grid-template-rows:
      auto
      auto
      auto !important;

    transition: none !important;
  }

  .page .service-step-number,
  .page .service-step-desc {
    opacity: 1 !important;

    overflow: visible;
  }

  .page .service-step-heading .active-mark {
    opacity: 0;
  }

  .page .services-visual {
    display: grid;

    grid-template-columns: 1fr;

    gap: 16px;

    height: auto;

    overflow: visible;

    box-shadow: none;

    background: transparent;
  }

  .page .services-media,
  .page .services-media.is-active {
    position: relative;

    inset: auto;

    height: auto;

    aspect-ratio: 4 / 3;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto;

    transform: none !important;

    transition: none !important;
  }
}


/* ==========================================================================
   18. VIEWPORT HEIGHT FALLBACK
   ========================================================================== */

@supports not (height: 100svh) {

  .page .services-scroll-area {
    height: 268vh;
  }

  .page .services-sticky {
    height: 100vh;
  }
}


/* Static layouts stay natural-height in fallback browsers */

@media (max-width: 700px), (max-height: 560px) {

  .page .services-scroll-area,
  .page .services-sticky {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {

  .page .services-scroll-area,
  .page .services-sticky {
    height: auto;
  }
}


/* ==========================================================================
   EXPERIENCE — PINK
   ========================================================================== */

.page .experience {
  width: 100%;

  min-height: auto;

  padding-block:
    clamp(72px, 9vw, 130px);

  background: #A15D66;

  color: #F2ECEA;
}


/* ==========================================================================
   INNER WRAPPER
   ========================================================================== */

.page .experience__inner {
  width: 100%;
}


/* ==========================================================================
   EXPERIENCE + EDUCATION TITLES
   ========================================================================== */

.page .experience__title,
.page .education-title {
  margin: 0;

  font-family: "Cormorant", serif;

  font-style: normal;

  font-weight: 300;

  font-size:
    clamp(58px, 6vw, 92px);

  line-height: .95;

  letter-spacing: -.03em;

  color: #F2ECEA;
}


/* ==========================================================================
   EXPERIENCE ROW
   ========================================================================== */

.page .experience-row {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(280px, .75fr);

  gap:
    clamp(48px, 7vw, 120px);

  align-items: center;

  width: 100%;

  margin-top:
    clamp(46px, 5.5vw, 78px);
}


/* Rows with case studies become positioning
   contexts for the cursor-follow CTA. */

.page .experience-row--has-case {
  position: relative;

  overflow: visible;
}


/* Middle role has no case-study image */

.page .experience-row--text-only {
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(280px, .75fr);
}


.page .experience-row--text-only
.experience-copy {
  grid-column: 1;
}


/* ==========================================================================
   EXPERIENCE COPY
   ========================================================================== */

.page .experience-copy {
  max-width: 760px;

  min-width: 0;
}


/* ==========================================================================
   ROLE
   ========================================================================== */

.page .experience-role {
  margin: 0;

  color: #F2ECEA;

  font-size:
    clamp(22px, 2vw, 31px);

  font-weight: 600;

  line-height: 1.2;
}


/* ==========================================================================
   META
   ========================================================================== */

.page .experience-meta,
.page .education-meta {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 7px;

  margin:
    10px 0 0;

  color:
    rgba(242, 236, 234, .72);

  font-size:
    clamp(12px, 1vw, 14px);

  line-height: 1.5;
}


.page .experience-meta__dot {
  opacity: .7;
}


/* ==========================================================================
   EXPERIENCE BULLETS
   ========================================================================== */

.page .experience-points {
  margin:
    10px 0 0;

  padding-left: 20px;

  max-width: 64ch;

  color: #F2ECEA;

  font-size:
    clamp(14px, 1.15vw, 17px);

  line-height: 1.45;
}


.page .experience-points li {
  padding-left: 2px;
}


/* ==========================================================================
   CASE STUDY IMAGE
   ========================================================================== */

.page .experience-case {
  position: relative;

  display: block;

  width: 100%;

  max-width: 430px;

  justify-self: end;

  overflow: hidden;

  border-radius: 18px;

  text-decoration: none;

  isolation: isolate;
}


.page .experience-case img {
  display: block;

  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  object-position: center;

  border-radius: inherit;

  transform: scale(1);

  transition:
    transform .45s ease;
}


/* Small image zoom when whole row is hovered */

.page .experience-row--has-case:hover
.experience-case img,
.page .experience-row--has-case:focus-within
.experience-case img {
  transform: scale(1.025);
}


/* ==========================================================================
   PROJECT-STYLE CURSOR CTA
   ========================================================================== */

/*
  main.js creates .cursor-cta automatically.

  We give Experience rows the same visual behaviour
  as your existing Projects rows.
*/

.page .experience-row--has-case
.cursor-cta {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 30;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 42px;

  padding:
    9px 17px;

  border-radius: 999px;

  background: #F2ECEA;

  color: #A15D66;

  font-size:
    clamp(12px, 1vw, 14px);

  font-weight: 400;

  line-height: 1;

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;

  transform:
    translate(
      var(--cta-x, -50%),
      var(--cta-y, -50%)
    )
    scale(.94);

  box-shadow:
    0 6px 18px
    rgba(35, 25, 25, .12);

  transition:
    opacity .2s ease,
    transform .2s ease;

  will-change:
    left,
    top,
    transform;
}


/* Entire experience row activates the pill */

.page .experience-row--has-case:is(
  :hover,
  :focus-within
)
.cursor-cta {
  opacity: 1;

  transform:
    translate(
      var(--cta-x, -50%),
      var(--cta-y, -50%)
    )
    scale(1);
}


/* Keyboard fallback — center the CTA */

.page .experience-row--has-case:focus-within
.cursor-cta {
  left: 50%;

  top: 50%;

  --cta-x: -50%;

  --cta-y: -50%;
}


/* ==========================================================================
   MOBILE-ONLY STATIC CTA
   ========================================================================== */

.page .experience-case__mobile-button {
  display: none;
}


/* ==========================================================================
   EDUCATION
   ========================================================================== */

.page .education-block {
  margin-top:
    clamp(70px, 8vw, 120px);
}


.page .education-title {
  margin-bottom:
    clamp(38px, 4vw, 58px);
}


.page .education-entry {
  max-width: 760px;
}


.page .education-school {
  margin: 0;

  color: #F2ECEA;

  font-size:
    clamp(22px, 2vw, 30px);

  font-weight: 600;

  line-height: 1.25;
}


.page .education-program {
  position: relative;

  margin:
    18px 0 0;

  padding-left: 18px;

  color: #F2ECEA;

  font-size:
    clamp(14px, 1.15vw, 17px);

  line-height: 1.5;
}


.page .education-program::before {
  content: "•";

  position: absolute;

  left: 0;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

  .page .experience-row,
  .page .experience-row--text-only {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(220px, .65fr);

    gap: 40px;
  }


  .page .experience-case {
    max-width: 340px;
  }


  .page .experience-points {
    font-size: 14px;
  }

}


/* ==========================================================================
   MOBILE — KEEP STACKED VERSION
   ========================================================================== */

@media (max-width: 700px) {

  .page .experience {
    padding-block:
      64px 80px;
  }


  /* --------------------------------------------------
     TITLES
     -------------------------------------------------- */

  .page .experience__title,
  .page .education-title {
    font-size:
      clamp(52px, 14vw, 70px);
  }


  /* --------------------------------------------------
     STACK EACH EXPERIENCE
     -------------------------------------------------- */

  .page .experience-row,
  .page .experience-row--text-only {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr);

    gap: 28px;

    margin-top: 48px;
  }


  .page .experience-row--text-only
  .experience-copy {
    grid-column: auto;
  }


  /* --------------------------------------------------
     ROLE
     -------------------------------------------------- */

  .page .experience-role {
    font-size:
      clamp(21px, 5vw, 26px);
  }


  /* --------------------------------------------------
     META
     -------------------------------------------------- */

  .page .experience-meta,
  .page .education-meta {
    gap: 5px;

    font-size: 12px;
  }


  /* --------------------------------------------------
     BULLETS
     -------------------------------------------------- */

  .page .experience-points {
    padding-left: 18px;

    font-size: 15px;

    line-height: 1.5;
  }


  /* --------------------------------------------------
     IMAGE
     -------------------------------------------------- */

  .page .experience-case {
    justify-self: stretch;

    width: 100%;

    max-width: none;

    margin-top: 4px;

    overflow: hidden;

    border-radius: 14px;
  }


  .page .experience-case img {
    width: 100%;

    aspect-ratio: 16 / 10;

    border-radius: inherit;

    transform: none;
  }


  .page .experience-row--has-case:hover
  .experience-case img,
  .page .experience-row--has-case:focus-within
  .experience-case img {
    transform: none;
  }


  /* --------------------------------------------------
     HIDE CURSOR-FOLLOW CTA ON MOBILE
     -------------------------------------------------- */

  .page .experience-row--has-case
  .cursor-cta {
    display: none !important;
  }


  /* --------------------------------------------------
     STATIC MOBILE BUTTON
     -------------------------------------------------- */

  .page .experience-case__mobile-button {
    position: absolute;

    left: 16px;

    bottom: 16px;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 38px;

    padding:
      8px 14px;

    border-radius: 999px;

    background: #F2ECEA;

    color: #A15D66;

    font-size: 12px;

    font-weight: 400;

    line-height: 1;

    white-space: nowrap;

    pointer-events: none;

    box-shadow:
      0 5px 14px
      rgba(35, 25, 25, .10);
  }


  /* --------------------------------------------------
     EDUCATION
     -------------------------------------------------- */

  .page .education-block {
    margin-top: 72px;
  }


  .page .education-title {
    margin-bottom: 34px;
  }


  .page .education-school {
    font-size:
      clamp(21px, 5vw, 26px);
  }

}


/* ==========================================================================
   TOUCH / COARSE POINTERS
   ========================================================================== */

@media (hover: none), (pointer: coarse) {

  .page .experience-row--has-case
  .cursor-cta {
    display: none !important;
  }


  .page .experience-case__mobile-button {
    display: inline-flex;
  }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .page .experience-case img,
  .page .experience-row--has-case
  .cursor-cta {
    transition: none;
  }

}


/* ==========================================================================
   PROJECTS — CREAM
   ========================================================================== */

.projects {
  --media-radius: 20px;

  background: var(--page-bg);

  color: var(--page-ink);
}

.projects .section__title {
  color: #A15D66;
}


/* ==========================================================================
   SELECTED WORK — HEADING
   ========================================================================== */

.page .projects-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;

  gap: 24px;

  width: 100%;

  margin-bottom: clamp(28px, 4vw, 56px);
}

/* Two-line title */

.page .projects-heading__title {
  display: flex;
  flex-direction: column;

  gap: 0;

  margin: 0;

  font-family: "Cormorant", serif;
  font-style: normal;
  font-weight: 300;

  font-size: clamp(52px, 6vw, 90px);
  line-height: 0.86;
  letter-spacing: -0.025em;

  color: #A15D66;
}

.page .projects-heading__title span {
  display: block;
}

/* Link on the right */

.page .projects-heading__link {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  flex: 0 0 auto;

  padding-bottom: 5px;

  color: #A15D66;

  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 400;
  line-height: 1.4;

  text-decoration: none;

  transition: opacity .2s ease;
}

.page .projects-heading__link svg {
  width: 22px;
  height: 22px;

  flex: 0 0 auto;

  transition: transform .25s ease;
}

.page .projects-heading__link:hover {
  opacity: .75;
}

.page .projects-heading__link:hover svg {
  transform: translateX(5px);
}

/* Mobile */

@media (max-width: 600px) {

  .page .projects-heading {
    align-items: end;

    gap: 12px;

    margin-bottom: 30px;
  }

  .page .projects-heading__title {
    font-size: clamp(46px, 12vw, 68px);
  }

  .page .projects-heading__link {
    gap: 5px;

    padding-bottom: 2px;

    font-size: 12px;
  }

  .page .projects-heading__link svg {
    width: 17px;
    height: 17px;
  }

}

@media (prefers-reduced-motion: reduce) {

  .page .projects-heading__link,
  .page .projects-heading__link svg {
    transition: none;
  }

}

.project-row {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 1fr);

  gap:
    clamp(18px, 4vw, 40px);

  align-items: center;

  margin-bottom:
    clamp(24px, 6vw, 56px);
}

.project-media {
  display: block;

  border-radius: 5px;

  overflow: hidden;
}

.project-media img {
  width: 100%;

  height: auto;

  display: block;

  border-radius: inherit;
}

.project-info {
  align-self: center;
}

.project-title {
  margin: 0 0 6px 0;

  font-weight: 800;

  font-size:
    clamp(22px, 2.2vw, 28px);
}

.project-title a {
  color: var(--page-ink);

  text-decoration: none;
}

.project-sub {
  margin: 0 0 10px 0;
}

.pills {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}

.pill {
  font-size: 12px;

  padding: .35rem .7rem;

  border-radius: 999px;

  border: 1px solid #A15D66;

  color: #A15D66;

  background: transparent;
}

@media (max-width: 980px) {

  .project-row {
    grid-template-columns: 1fr;
  }

  .project-info {
    justify-self: start;
  }
}


/* Tilt carrier on the WHOLE row */

#projects .project-row {
  will-change: transform;

  transform-style: preserve-3d;
}


/* ==========================================================================
   RESPONSIVE NAV / HERO STACK
   ========================================================================== */

@media (max-width: 980px) {

  .hero {
    grid-template-columns: 1fr;

    grid-template-areas:
      "flower"
      "creative"
      "designer"
      "name"
      "lead";

    row-gap:
      clamp(12px, 3vw, 20px);

    align-items: start;
  }

  .hero > .left,
  .hero > .right {
    display: contents;
  }

  .right .flower-box {
    grid-area: flower;

    justify-self: center;
  }

  .left .box:nth-child(1) {
    grid-area: creative;
  }

  .right .designer-box {
    grid-area: designer;
  }

  .left .box:nth-child(2) {
    grid-area: name;
  }

  .left .box:nth-child(3) {
    grid-area: lead;
  }

  .lead {
    max-width: 70ch;
  }
}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 380px) {

  :root {
    --g: 14px;
  }

  .creative {
    font-size:
      clamp(36px, 12vw, 64px);
  }

  .designer {
    font-size:
      clamp(36px, 14vw, 72px);
  }

  .flower-reveal {
    width: 120px;
  }
}


/* ==========================================================================
   TOUCH / NO HOVER
   ========================================================================== */

@media (hover: none), (pointer: coarse) {

  .spotlight-text::after {
    display: none !important;
  }

  .hero::before {
    display: none !important;
  }

  .flower-reveal {
    width: 140px;

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    overflow: hidden;

    background: var(--masthead-ink);
  }

  .flower-base {
    display: none !important;
  }

  .flower-color {
    display: block !important;

    clip-path: none !important;
  }

  .flower-reveal img {
    position: absolute;

    left: 50%;

    top: 58%;

    width: 170%;

    height: 170%;

    transform:
      translate(-50%, -58%)
      scale(.62);

    object-fit: contain;
  }
}


/* ==========================================================================
   KEEP QUOTE STATIC
   ========================================================================== */

.quote.reveal,
.quote[data-reveal] {
  opacity: 1 !important;

  transform: none !important;

  filter: none !important;

  transition: none !important;
}


/* ==========================================================================
   MEDIUM DESKTOP
   ========================================================================== */

@media (min-width: 981px) and (max-width: 1280px) {

  .creative {
    font-size:
      clamp(60px, 11vw, 170px);
  }

  .designer {
    font-size:
      clamp(70px, 13vw, 220px);

    line-height: .72;
  }

  .flower-reveal {
    width:
      clamp(200px, 24vw, 340px);
  }
}


/* ==========================================================================
   TABLETS & PHONES
   ========================================================================== */

@media (max-width: 980px) {

  .creative {
    font-size:
      clamp(48px, 15vw, 110px);
  }

  .designer {
    font-size:
      clamp(56px, 18vw, 140px);

    line-height: .72;
  }

  .flower-reveal {
    width:
      clamp(160px, 36vw, 240px);
  }
}


/* ==========================================================================
   MOBILE HERO — 600px AND BELOW
   Larger flower and more compact typography spacing
   ========================================================================== */

@media (max-width: 600px) {

  /* --------------------------------------------------
     HERO LAYOUT
     -------------------------------------------------- */

  .masthead .hero {
    min-height: 0;

    height: auto;

    grid-template-columns: minmax(0, 1fr);

    grid-template-areas:
      "flower"
      "creative"
      "designer"
      "name"
      "lead";

    /* Prevent grid rows from stretching vertically */
    align-content: start;

    align-items: start;

    grid-auto-rows: max-content;

    row-gap: clamp(8px, 2vw, 14px);

    padding-bottom: clamp(48px, 8vh, 80px);
  }


  /* --------------------------------------------------
     FLOWER — LARGER
     -------------------------------------------------- */

  .masthead .hero .flower-box {
    justify-self: center;

    width: 100%;

    margin: 0 0 12px;
  }

  .masthead .hero .flower-reveal {
    width: clamp(220px, 66vw, 310px);

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    overflow: hidden;
  }


  /* --------------------------------------------------
     CREATIVE
     -------------------------------------------------- */

  .masthead .hero .creative {
    font-size: clamp(52px, 15vw, 86px);

    line-height: 1;

    margin: 0;

    padding: 0;

    text-indent: 0;
  }


  /* --------------------------------------------------
     DESIGNER
     -------------------------------------------------- */

  .masthead .hero .designer-box {
    justify-content: flex-start;

    width: 100%;

    margin: 0;
  }

  .masthead .hero .designer {
    font-size: clamp(48px, 17vw, 94px);

    line-height: .85;

    letter-spacing: .015em;

    text-align: left;

    margin: 0;
  }


  /* --------------------------------------------------
     NAME
     -------------------------------------------------- */

  .masthead .hero .left .box:nth-child(2) {
    margin-top: 10px;
  }

  .masthead .hero .name {
    font-size: clamp(19px, 5vw, 24px);

    line-height: 1.3;

    margin: 0;
  }


  /* --------------------------------------------------
     DESCRIPTION
     -------------------------------------------------- */

  .masthead .hero .left .box:nth-child(3) {
    margin-top: 8px;
  }

  .masthead .hero .lead {
    max-width: 100%;

    font-size: clamp(14px, 3.8vw, 16px);

    line-height: 1.55;

    margin: 0;
  }

}

/* ==========================================================================
   VIEWPORT HEIGHT FALLBACK
   ========================================================================== */

@supports not (height: 100svh) {

  .hero,
  .quote,
  .philosophy,
  .experience,
  .projects {
    min-height: 100vh;
  }

  .page .services-switcher {
    height: 268vh;
  }

  .page .services-sticky {
    height: 100vh;
  }
}


/* ==========================================================================
   FALLBACK — NATURAL MOBILE HEIGHT
   ========================================================================== */

@media (max-width: 700px), (max-height: 560px) {

  .page .services-switcher,
  .page .services-sticky {
    height: auto;
  }
}


/* ==========================================================================
   FALLBACK — REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .page .services-switcher,
  .page .services-sticky {
    height: auto;
  }
}


/* ==========================================================================
   TESTIMONIALS — WHAT OTHERS SAY
   ========================================================================== */

.page .testimonials {
  width: 100%;

  min-height: auto;

  padding-block:
    clamp(64px, 8vw, 110px);

  background: #A15D66;

  color: #F2ECEA;
}


/* ==========================================================================
   INNER CONTAINER
   ========================================================================== */

.page .testimonials__inner {
  width: 100%;

  margin-inline: auto;
}


/* ==========================================================================
   SECTION TITLE
   ========================================================================== */

.page .testimonials__title {
  margin:
    0 0 clamp(36px, 5vw, 64px);

  font-family: "Cormorant", serif;
  font-style: normal;
  font-weight: 300;

  font-size: clamp(48px, 5vw, 76px);
  line-height: 1;

  letter-spacing: -0.025em;

  color: #F2ECEA;
}


/* ==========================================================================
   TESTIMONIAL GRID
   ========================================================================== */

.page .testimonials__grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: clamp(28px, 4vw, 64px);

  align-items: start;
}


/* ==========================================================================
   INDIVIDUAL TESTIMONIAL
   ========================================================================== */

.page .testimonial {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  min-width: 0;

  margin: 0;

  padding:
    clamp(22px, 2vw, 32px)
    clamp(12px, 2vw, 26px)
    0;

  border-top:
    1px solid rgba(242, 236, 234, 0.55);
}


/* ==========================================================================
   QUOTE
   ========================================================================== */

.page .testimonial__quote {
  margin: 0;

  padding: 0;
}

.page .testimonial__quote p {
  margin: 0;

  max-width: 39ch;

  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 400;

  line-height: 1.4;

  color: #F2ECEA;
}


/* ==========================================================================
   AUTHOR
   ========================================================================== */

.page .testimonial__author {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: clamp(24px, 2.5vw, 36px);
}


/* ==========================================================================
   AUTHOR PORTRAIT
   ========================================================================== */

.page .testimonial__portrait {
  display: block;

  flex: 0 0 auto;

  width: clamp(54px, 5vw, 68px);
  height: clamp(54px, 5vw, 68px);

  border-radius: 50%;

  border: 1px solid rgba(242, 236, 234, 0.8);

  object-fit: cover;

  object-position: center;

  background: #F2ECEA;
}


/* ==========================================================================
   AUTHOR INFORMATION
   ========================================================================== */

.page .testimonial__author-info {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 2px;

  min-width: 0;
}

.page .testimonial__name {
  display: block;

  font-family: "Cormorant", serif;
  font-style: normal;
  font-weight: 300;

  font-size: clamp(24px, 2.3vw, 34px);
  line-height: 1;

  letter-spacing: -0.02em;

  color: #F2ECEA;
}

.page .testimonial__role {
  display: block;

  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.4;

  color: rgba(242, 236, 234, 0.75);
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 900px) {

  .page .testimonials__grid {
    gap: 28px;
  }

  .page .testimonial {
    padding-inline: 0;
  }

  .page .testimonial__quote p {
    font-size: 16px;
  }

  .page .testimonial__name {
    font-size: 25px;
  }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

  .page .testimonials {
    padding-block: 64px 76px;
  }

  .page .testimonials__title {
    margin-bottom: 36px;

    font-size: clamp(46px, 11vw, 62px);
  }

  .page .testimonials__grid {
    grid-template-columns: minmax(0, 1fr);

    gap: 44px;
  }

  .page .testimonial {
    padding-top: 22px;

    padding-inline: 0;
  }

  .page .testimonial__quote p {
    max-width: none;

    font-size: 17px;
    line-height: 1.5;
  }

  .page .testimonial__author {
    margin-top: 26px;

    gap: 12px;
  }

  .page .testimonial__portrait {
    width: 56px;
    height: 56px;
  }

  .page .testimonial__name {
    font-size: 27px;
  }

  .page .testimonial__role {
    font-size: 12px;
  }

}