/* ==================================================
   PAGES — all non-homepage templates
   ================================================== */


/* ==================================================
   UNICORN STUDIO CANVAS SIZING — page-specific
   Same pattern as home.css hero-banner.
   ================================================== */

.orchid-banner {
  width: 100vw;
  height: 53.68vw;
  overflow: visible;
  max-width: 2342px;
  max-height: 1257px;
  background-color: transparent !important;
}
@media (max-width: 1024px) {
  .orchid-banner { width: 75vw; height: 100vw; max-width: none; max-height: none; }
}
@media (max-width: 767px) {
  .orchid-banner { width: 46vh; height: 100vh; max-width: none; max-height: none; }
}


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

.about-hero { padding-top: var(--pad-xl); }

.about-hero-heading {
  width: clamp(55%, calc(52vw + 187px), 100%);
}

.about-hero-paragraph {
  width: min(100%, 1440px);
  text-align: center;
  margin-inline: auto;
  & p {
    font-size: var(--fs-md);
  }
}
.about-heading-section {
  padding-top: var(--pad-xl);
}

.about-manifesto h6 {
  font-family: var(--font-serif) !important;
  font-weight: 400;
  line-height: 1.40 !important;
}


/* ==================================================
   SHARED PAGE SECTIONS
   ================================================== */

.title-section {
  padding-top: var(--pad-2xl);
  padding-bottom: var(--pad-xl);
  display: flex;
  --widgets-spacing-row: var(--gap-base);
}
.title-section .elementor-widget { width: 100%; }



@media (min-width: 880px) { .title-section .elementor-widget { width: 75%; } }

.page-title {
  margin-left: clamp(-4px, -0.5vw, -1px);
}

/* Nav item at bottom of each work page */
.work-nav-title-section{
  padding-bottom: var(--pad-lg);
}
.work-nav-title{
  display: inline-flex;
  align-items: center;
  gap: var(--gap-base);
}
.work-nav-title::after{
  content: "\ed0d"; 
  font-family: "icomoon";
  opacity: 1;
  font-size: var(--fs-lg);
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  margin-top: var(--pad-sm);
}
.work-nav-title:hover::after{
  opacity: 1;
  transform: translateX(0);
}

/* Page-title view-transition morph
   view-transition-name assigned dynamically by view-transitions.js */
::view-transition-group(page-title) {
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(page-title) {
  animation: vt-title-out 0.25s ease-in forwards;
}
::view-transition-new(page-title) {
  animation: vt-title-in 0.7s ease-out forwards;
}
::view-transition-image-pair(page-title) {
  mix-blend-mode: normal;
}

.page-subtitle, .page-subtitle p { font-size: var(--fs-md); }

.text-section {
  padding-block: var(--pad-xl);
  --widgets-spacing-row: var(--gap-md);
  column-gap: var(--gap-3xl);
  --widgets-spacing-column: var(--gap-3xl);
}

.intro-section {
  padding-block: var(--pad-xl);
  --widgets-spacing-row: var(--gap-md);
  column-gap: var(--gap-3xl);
  --widgets-spacing-column: var(--gap-3xl);
}

.text-img-section {
  padding-block: var(--pad-2xl);
  column-gap: var(--gap-base);
  --widgets-spacing-row: var(--gap-base);
  --widgets-spacing-column: var(--gap-base);
  align-items: flex-start;
}

.text-img-section_text {
  padding-right: var(--gap-2xl);
  position: sticky;
  align-self: flex-start;
  top: var(--pad-xl);
  padding-top: var(--pad-xl);
}
@media (max-width: 880px) {
  .text-img-section_text {
    padding-right: 0;
    position: static;
  }
}

.media-section-2col {
  padding-block: 0;
  column-gap: var(--gap-base);
  --widgets-spacing-row: var(--gap-base);
  --widgets-spacing-column: var(--gap-base);
  height: auto;
}

.media-section-1col {
  padding-block: 0;
  --widgets-spacing-row: var(--gap-base);
  height: auto;
}

/* Video wrapper override */
.elementor-widget-video .elementor-wrapper {
  aspect-ratio: auto !important;
}


.element-section {
  --widgets-spacing-row: var(--gap-md);
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.deliverables-group {
  width: 100%;
}
.deliverables-group > .e-con-inner {
  width: fit-content;
  align-items: flex-start;
  align-self: flex-start;
}

/* Deliverables shortcode */
.project-deliverables {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.project-deliverables li {
  margin-bottom: 1rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.40;
  white-space: nowrap;
}

.project-product-link,
.project-product-link a {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.75em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-med-grey);
}

@media (max-width: 880px) {
  .element-section {
    justify-content: flex-start;
    align-items: flex-start;
    padding-block: var(--pad-xl);
  }
  .deliverables-group > .e-con-inner { width: 100%; max-width: 100%;  }
}

.in-page-work-section { 
  padding-top: var(--pad-4xl); 
  padding-bottom: 0;
}

@media (min-width: 2380px) {
  .in-page-work-section {   
    padding-bottom: var(--pad-4xl);
  }
}


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

/* Work page heading area */
.work-main-section { padding-block: var(--pad-xl); }


/* Work filter nav */
.work-filter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--n-8);
  padding-block: var(--pad-md);
}

.work-filter-btn {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-med-grey);
  background: none;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--n-72);
  padding: var(--n-8) var(--n-24);
  cursor: pointer;
  transition: all 0.2s ease;
}
.work-filter-btn:hover {
  color: var(--color-black);
  border-color: var(--color-black);
}
.work-filter-btn--active {
  color: var(--color-white);
  background-color: var(--color-black);
  border-color: var(--color-black);
}

/* Work grid */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-4xl);
  align-items: start;
}

.work-card--small  { grid-column: span 6; }
.work-card--medium { grid-column: span 6; }
.work-card--large  { grid-column: span 8; }
.work-card--center { align-self: center; }
.work-card--bottom { align-self: end; }

.work-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter   0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-card:hover .work-card__media {
  transform: scale(1.02);
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.08));
}

.work-card--small .work-card__media { aspect-ratio: 1 / 1; }
.work-card--large .work-card__media { aspect-ratio: 16 / 9; }

.work-card__image,
.work-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Image stays visible at all times — video fades in on top, no fadeout needed */
}

.work-card__video,
.work-card__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  /* easeOutExpo: fast start, decelerates — matches Clay's --easeOutExpo */
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Video fades in on top of the image — image is never hidden */
.work-card.video-ready .work-card__video { opacity: 1; }

.work-card__text    { padding-top: var(--n-16); }
.work-card__title   { 
  margin-bottom: 0.5rem;
}
.work-card__subtitle { 
  font-size: var(--fs-sm);  
  line-height: 1.6;
}

.work-card__tags {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--n-8);
}
.work-card__tag {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-med-grey);
}

@media (max-width: 880px) {
  /* Fix: allow the Elementor section wrapping work-grid to expand on mobile.
     On desktop, a min-height set in the Elementor panel fits the multi-column grid.
     On mobile the single-column stack is taller — this prevents the footer from
     starting at the desktop min-height instead of after the actual content. */
  .e-con:has(.work-grid),
  .elementor-section:has(.work-grid) {
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .work-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-3xl);
    /* Break out of Elementor container padding for work-nav-titlebleed cards */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .work-card--small,
  .work-card--medium,
  .work-card--large { grid-column: span 1; }

  .work-card__media,
  .work-card--large .work-card__media { aspect-ratio: 4 / 5; }
  .work-card--small .work-card__media { aspect-ratio: 1 / 1; }

  /* Re-add horizontal breathing room for card text only */
  .work-card__text { padding-inline: var(--n-24); }
}

/* Work cover — legacy sunsetting styles */
.work-cover {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.work-cover .elementor-widget-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.work-cover:hover .elementor-widget-video { opacity: 1; }
.work-cover .elementor-widget-image       { transition: opacity 0.3s ease; }
.work-cover:hover .elementor-widget-image { opacity: 0; }
.work-cover .elementor-widget-image,
.work-cover .elementor-widget-image img   { width: 100%; height: 100%; object-fit: cover; }
.work-cover .elementor-widget-video .elementor-widget-container,
.work-cover .elementor-widget-video .e-hosted-video { width: 100%; height: 100%; }
.work-cover .elementor-widget-video .elementor-wrapper video,
.work-cover .elementor-widget-video .elementor-wrapper iframe {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
@media (max-width: 767px) {
  .work-cover { aspect-ratio: 1 / 1; overflow: hidden; }
}


/* ==================================================
   WORK FOOTNOTE
   ================================================== */

   .footnote-section{
    padding-top: var(--pad-base);
    padding-bottom: var(--pad-4xl);
   }
details.work-footnote {
    color: var(--color-dark-grey);
}

details.work-footnote > summary {
    list-style: none;
}
details.work-footnote > summary::-webkit-details-marker {
    display: none;
}

details.work-footnote > summary.work-footnote__toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--pad-sm);
    cursor: pointer;
    user-select: none;
}

details.work-footnote > summary.work-footnote__toggle .work-footnote__label {
    font-size: var(--fs-xs) !important;
    font-weight: 650 !important;
    line-height: 1.6;
}

.work-footnote__icon {
    font-family: "icomoon";
    font-size: var(--fs-sm);
    line-height: 1;
}

.work-footnote__icon::before {
    content: "\ea52";
}

details.work-footnote[open] .work-footnote__icon::before {
    content: "\eac8";
}

details.work-footnote > .work-footnote__body {
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
    overflow: hidden;
}

details.work-footnote > .work-footnote__body > * {
    min-height: 0;
}

details.work-footnote[open] > .work-footnote__body {
    grid-template-rows: 1fr;
}

@media (min-width: 1025px) {
    details.work-footnote > summary.work-footnote__toggle {
        cursor: default;
        pointer-events: none;
    }
    .work-footnote__icon {
        display: none;
    }
    details.work-footnote > .work-footnote__body {
        grid-template-rows: 1fr !important;
    }
}

.work-footnote__content {
    display: flex;
    flex-direction: column;
}

.work-footnote__line {
    font-size: var(--fs-xs) !important;
    line-height: 1.6;
}

.work-footnote__line-label {
    font-size: var(--fs-xs) !important;
    font-weight: 600;
}

.work-footnote__line-value {
    font-size: var(--fs-xs) !important;
    line-height: 1.6;
}

.work-footnote__line-value ul,
.work-footnote__line-value ol {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}

.work-footnote__line-value li {
    display: inline;
    font-size: var(--fs-xs) !important;
    padding: 0;
}

.work-footnote__line-value li:not(:last-child)::after {
    content: ", ";
}

.work-footnote__line-value p {
    display: inline;
    margin: 0;
}



/* ==================================================
   BLOG
   ================================================== */

.blog-content {
  padding-top: var(--pad-xl);
  padding-bottom: var(--pad-3xl);
  --widgets-spacing-row: var(--gap-3xl);
  column-gap: var(--gap-3xl);
  --widgets-spacing-column: var(--gap-3xl);
  align-items: flex-start;
}
.blog-content .e-con-inner { column-gap: var(--gap-2xl); }

.blog-nav_container {
  padding-top: var(--pad-lg);
  padding-bottom: var(--pad-base);
}

.blog-content_toc {
  padding-right: var(--gap-lg);
  position: sticky;
  align-self: flex-start;
  top: var(--pad-2xl);
}
@media (max-width: 880px) {
  .blog-content_toc { padding-right: 0; position: static; display: none; }
}
.blog-content_toc .elementor-toc__list-item-text {
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.60;
  margin-bottom: var(--n-8);
}
.blog-content_toc .elementor-item-active { font-weight: 600; }

.blog-content_share {
  position: sticky;
  align-self: flex-start;
  top: var(--pad-2xl);
  --widgets-spacing-row: var(--gap-base);
  --widgets-spacing-column: var(--gap-base);
  row-gap: var(--gap-base);
}
.blog-content_share p { font-size: var(--fs-sm); font-weight: 600; line-height: 1.60; }
@media (max-width: 880px) { .blog-content_share { position: static; } }

.blog-content_pl_container {
  background-color: var(--color-pale-grey);
  border-radius: var(--n-16);
  --widgets-spacing-row: var(--gap-base);
  --widgets-spacing-column: var(--gap-base);
  padding: var(--pad-base);
}
.blog-content_pl_container img { border-radius: var(--n-16) var(--n-16) 0 0; }
.blog-content_pl_container p,
.blog-content_pl_container .elementor-icon-list-items p,
.blog-content_pl_container .elementor-icon-list-items {
  font-size: var(--fs-sm);
  color: var(--color-dark-grey);
}

.post-share .elementor-share-btn {
  background-color: var(--color-white) !important;
  border: 1px solid var(--color-med-grey) !important;
  border-radius: var(--n-160) !important;
  height: 60px !important;
  width: 60px !important;
}
.post-share .elementor-share-btn__icon {
  background-color: var(--color-white) !important;
  color: var(--color-med-grey) !important;
  font-size: 20px !important;
}
.post-share .elementor-share-btn__icon:hover { color: var(--color-black) !important; }


/* Contact page overwrite for google meet */
/* Contact page overwrite for Google Calendar button */
.qxCTlb,
.Xfsokf {
/* 	width:100%; */
  font-size: var(--fs-base) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background-color: var(--color-black) !important;
  border: 1px solid var(--color-black) !important;
  color: var(--color-white) !important;
  padding: 19px 80px !important;
  border-radius: var(--n-72) !important;
  box-sizing: border-box !important;
  transform: none !important;
  box-shadow: none !important;
  line-height: 1 !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* Lock all inner elements */
.qxCTlb *,
.Xfsokf * {
  line-height: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

/* Hover */
.qxCTlb:hover,
.Xfsokf:hover {
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
  border-color: var(--color-black) !important;
  padding: 19px 80px !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Hover inner text */
.qxCTlb:hover *,
.Xfsokf:hover * {
  color: var(--color-black) !important;
  transform: none !important;
}