/* .contact-hero_intro has its own padding-top: 6rem, pushing the "Let's
   talk!" heading 96px below the "Contact me" chip. .about-hero_intro
   (the equivalent element on the About page) has no such padding, so
   its first line of copy sits right under the chip. Match About. */
.contact-hero_intro {
  padding-top: 0;
}

/* The 3D flip hero photos, the client-logo strip, and the hero ticker
   text all auto-play continuously via Webflow's JS interactions
   (inline transform/left, updated every frame) -- there's no
   prefers-reduced-motion handling anywhere in the exported site.
   !important here beats the inline styles the JS keeps re-applying
   (a stylesheet !important always outranks a plain inline style),
   freezing each on a static, readable frame instead of stopping
   mid-motion. Doesn't touch the short hover/focus transitions
   elsewhere -- those are user-triggered, not autoplaying, and aren't
   the kind of motion this preference is meant to suppress. */
@media (prefers-reduced-motion: reduce) {
  .rotate-inside,
  .rotate-text {
    transform: none !important;
  }

  .logo-container {
    left: 0 !important;
  }
}

/* Footer social icons were 2.4rem (38.4px), under the ~44px minimum
   recommended touch target size. Match the site's existing 2.75rem
   button height instead of picking an arbitrary new value. */
.social-icon {
  width: 2.75rem;
  height: 2.75rem;
}

/* .heading-style-h1 jumps from 6rem (<=991px, full-width single
   column) straight to a fixed 6.5rem for every width above that --
   right as the layout also switches to a 2-column split that HALVES
   the heading's available width. That combination made "Mentorships"
   the widest single word on the site break mid-word ("Mentor/ships")
   at ~1000-1100px, the range where the column is narrowest relative
   to the font size. Scale the >=992px tier with the viewport instead
   of jumping straight to the fixed 6.5rem, so there's no pinch point
   right at the breakpoint. Same 6.5rem ceiling once there's room
   (~1800px+); overflow-wrap: break-word (above) remains the fallback
   for any width this doesn't fully smooth over. */
@media screen and (min-width: 992px) {
  .heading-style-h1 {
    font-size: clamp(4rem, 0.7rem + 5.15vw, 6.5rem);
  }
}

/* Testimonial carousel prev/next controls (.quotes_arrow) are already
   accessible -- Webflow's slider gives them role="button", tabindex,
   and an aria-label -- but the arrow glyph itself is only 0.7rem
   (11px) inside a much larger click area, so it's easy to miss as
   interactive. Size it up for visibility without touching
   .icon-1x1-regular globally (used elsewhere at the smaller size). */
.quotes_arrow .icon-1x1-regular {
  width: 1.5rem;
  height: 1.5rem;
}

/* The mobile nav dropdown only sizes itself to its own link list
   (Webflow's default [data-nav-menu-open] rule has no height/overflow
   handling), so it ends as a short panel with page content visible
   directly behind/below it -- confusing paired with the "X" close
   icon, which implies a full-screen takeover. Make it actually cover
   the viewport and lock the page underneath while it's open. */
@media screen and (max-width: 991px) {
  .nav_menu[data-nav-menu-open],
  .nav_menu.w--nav-menu-open {
    height: 100vh;
    overflow-y: auto;
  }

  body:has(.nav_menu[data-nav-menu-open]) {
    overflow: hidden;
  }
}

/* .about-hero_intro (about.html, mentorships.html) is a CSS grid
   container, and grid items default to min-width: auto -- they refuse
   to shrink below their content's min-content size (the widest
   unbreakable word). At narrow-ish desktop widths the column is
   narrower than "Mentorships" needs at the 6.5rem heading size, so
   the heading (and, since it stretches to match, the paragraph under
   it) overflow the column and get hard-clipped by the section's
   overflow: hidden. Let them shrink to the column's actual width, and
   allow a single long word to break if it still doesn't fit. */
.about-hero_intro > * {
  min-width: 0;
}

.heading-style-h1 {
  overflow-wrap: break-word;
}

/* Kill Webflow's live text-flip interaction: webflow.js sets an inline
   transform on .hover-text on real pointer hover. Buttons get icon-nudge,
   links get underline-wipe -- nothing should flip anymore. */
.hover-text,
.button-shade,
.outline-shade,
.hover-arrow {
  transform: none !important;
}

/* Form field focus: black, not Webflow's default blue */
.w-input:focus,
.w-select:focus,
.form_text-field:focus,
.form_input:focus {
  border-color: #000 !important;
  outline: none;
}

/* On desktop the 3 stacked photos are taller than the text column next
   to them, so the grid overflows top/bottom into neighboring sections.
   Shrink the photos and gap so they fit within the matched height.
   The column is capped at 100vh (see .home-service_wrapper), so on
   short windows a fixed width still overflows vertically and gets
   silently clipped (.home-service_left has overflow: clip). Cap the
   width by available viewport height too -- three images at their
   12:11 aspect ratio plus two 2rem gaps must fit within
   100vh minus the wrapper's 3.75rem top padding -- so the images
   shrink instead of being cut off. */
@media screen and (min-width: 992px) {
  .home-service_image {
    width: min(34%, 25rem, calc((100vh - 8rem) / 2.75));
  }

  .home-service_left {
    grid-row-gap: 2rem;
  }
}

/* The text column next to these photos is wrapped in
   .padding-horizontal.padding-medium, giving it the same left padding
   as every other section. The photo column has no such wrapper, so
   the images run flush to the edge of the screen. Give it the same
   padding-left, at the same breakpoints, using the same design
   tokens. Applied to .home-service_left itself (not .home-service_wrapper)
   because that's the element with overflow: clip -- the .left-side
   photos are nudged further left via a relative offset for a stagger
   effect, and need that offset to land inside the clip boundary
   instead of past it.
   That same stagger offset also eats into the padding visually --
   the .left-side photos sit closer to the edge than the padding value
   alone suggests -- so add a flat buffer on top of the matched value
   to keep the visible gap at least as wide as the text column's. */
@media screen and (min-width: 992px) {
  .home-service_left {
    padding-left: calc(var(--padding--medium) + 1.25rem);
  }
}

@media screen and (max-width: 991px) {
  .home-service_left {
    padding-left: calc(var(--padding--small) + 1.25rem);
  }
}

@media screen and (max-width: 767px) {
  .home-service_left {
    padding-left: calc(var(--padding--tiny) + 1.25rem);
  }
}

/* Inline text links: black, not brand blue -- matches the rich-text
   body links, which already use the secondary (black) link color. */
.text-style-link {
  color: #000;
}

/* Contact page's hero had noticeably less top padding than every
   other hero (About: .about-hero_left 5rem + .about-hero_top 5rem;
   Contact: .contact-hero_left 0 + .contact-hero_top 3.75rem), leaving
   only ~7px between the nav and the "Contact me" chip instead of
   About's ~107px. Match About's values exactly. */
.contact-hero_left {
  padding-top: 5rem;
}

.contact-hero_top {
  padding-top: 5rem;
}

/* Mentorship offer cards: grey-outlined card with a 3-column info row */
.mentorship_card {
  border: 1px solid var(--border-color--border-primary);
  border-radius: 0.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mentorship_info-grid {
  display: grid;
  /* minmax(0, 1fr), not plain 1fr: grid tracks default to a
     content-based minimum (min-width: auto), so a 1fr column won't
     shrink below its longest unbreakable word. At narrower card
     widths (particularly the 2nd, longer-text card at desktop 2-col
     widths just above 991px) that forces wildly unequal columns
     instead of even thirds, crushing the last column's text up
     against the card's edge. minmax(0, ...) removes that floor so
     the three columns stay equal and text wraps normally instead. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.mentorship_divider {
  border-top: 1px solid var(--border-color--border-primary);
}

.section-3 {
  border-bottom-color: var(--border-color--border-primary) !important;
}

.mentorship_info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

@media screen and (max-width: 479px) {
  .mentorship_info-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}



.project_gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.project_gallery img.image-cover {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
}

.is-zoomable {
  cursor: zoom-in;
}

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.lightbox.is-open {
  display: flex;
}

.lightbox_backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
}

.lightbox_content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 90vh;
}

.lightbox_content img {
  display: block;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 0.25rem;
  cursor: default;
}

.lightbox_close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

body.lightbox-open {
  overflow: hidden;
}

/* Standardized CTA button scale: one height/padding for every button */
.button,
.button-long {
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  margin: 1.5rem 0;
  gap: 0.5rem;
  border-color: #000 !important;
  transition: transform 0.2s ease;
}

.button-long {
  display: inline-flex;
  width: auto;
  background-color: #fff;
  color: #000;
}

.button {
  display: inline-flex;
  width: auto;
  gap: 0.5rem;
}

.button.is-full,
.button-long.is-full {
  display: flex;
  width: 100%;
}

.button-shade {
  background-color: transparent !important;
}

.work-button,
.outline-shade {
  border-color: #000 !important;
}

.work-button {
  height: 2.75rem;
  padding: 0 1.1rem;
  gap: 0.5rem;
  transition: transform 0.2s ease;
}

.submit-button {
  height: 2.75rem;
  width: auto;
  padding: 0 1.1rem;
  gap: 0.5rem;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* Secondary CTAs: solid black, white content (Book now, Download my resume) */
.button.is-dark,
.button-long.is-dark {
  background-color: #000;
  color: #fff;
  border-color: #000;
}

.button.is-dark .btn-icon,
.button-long.is-dark .btn-icon {
  filter: invert(1);
}

.btn-icon {
  width: 0.85rem;
  height: 0.85rem;
  object-fit: contain;
  flex: none;
  position: relative;
  z-index: 1;
  transition: transform 0.25s ease;
}

/* Icon-nudge hover: icon-only controls still nudge (no label to underline) */
.social-icon {
  border-color: #000 !important;
}

.social-icon:hover img {
  transform: translateX(3px);
}

.social-icon img {
  transition: transform 0.25s ease;
}

.quotes_arrow {
  border-color: #000 !important;
  transition: transform 0.2s ease;
}

.quotes_arrow.left-side:hover .hover-arrow img {
  transform: translateX(-3px);
}

.quotes_arrow.right-side:hover .hover-arrow img {
  transform: translateX(3px);
}

.quotes_arrow .hover-arrow img {
  transition: transform 0.25s ease;
}

/* Underline hover: button label underlines, on top of the icon nudge */
.button .clip::after,
.work-button .clip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.button-long .btn-label,
.submit-button .btn-label {
  position: relative;
  overflow: visible;
}

.button-long .btn-label::after,
.submit-button .btn-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.button:hover .clip::after,
.work-button:hover .clip::after,
.button-long:hover .btn-label::after,
.submit-button:hover .btn-label::after {
  transform: scaleX(1);
}

/* Lightbox close button: gentle scale on hover/focus */
.lightbox_close {
  transition: transform 0.2s ease;
}

.lightbox_close:hover,
.lightbox_close:focus-visible {
  transform: scale(1.15);
}

/* Underline-wipe hover: text links */
a.label-wrapper {
  color: #000;
}

a.label-wrapper .text-size-regular {
  position: relative;
}

a.label-wrapper .text-size-regular::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

a.label-wrapper:hover .text-size-regular::after {
  transform: scaleX(1);
}

.nav_menu-link,
.footer_link,
.hyperlink,
.text-rich-text a {
  position: relative;
}

.nav_menu-link::after,
.footer_link::after,
.hyperlink::after,
.text-rich-text a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav_menu-link:hover::after,
.footer_link:hover::after,
.hyperlink:hover::after,
.text-rich-text a:hover::after {
  transform: scaleX(1);
}