/* Responsive fixes for mobile layout issues */

@media (max-width: 480px){
  :where(.hero-name){
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  :where(.nav-container){
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* General safety: avoid 100vw overflow when scrollbars exist */
:where(#other-works .highlights-wrapper){
  box-sizing: border-box;
  max-width: 100vw;
}

/* Mobile carousel constraints */
@media (max-width: 768px){
  /* Keep the track within the viewport */
  :where(#other-works .slick-track){
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Constrain slide width so a single card fits without causing overflow */
  :where(#other-works .slick-slide){
    width: min(85vw, 420px) !important;
  }
  /* Ensure images scale properly */
  :where(#other-works .slick-slide img){
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}

/* Small phones refinement */
@media (max-width: 480px){
  :where(#other-works .highlights-wrapper){
    padding-left: 16px;
    padding-right: 16px;
  }
  :where(.hero-container){
    /* from ~120px 80px 80px → lighter mobile padding */
    padding: 100px 20px 60px !important;
  }
  :where(.press-publication){
    white-space: normal !important;
    max-width: 150px;
    text-align: center;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 768px){
  /* Prevent the fixed overlay from causing mobile viewport/layout issues */
  :where(body)::after{
    position: absolute !important;
    inset: 0;
    height: 100vh;
    width: 100%;
    pointer-events: none; /* ensure it never blocks taps */
  }
  /* Safety: ensure no stray horizontal scroll due to overlay/compositing */
  :where(html, body){ overflow-x: clip; }
}
/* === Carousel spacing & dots overlap fix === */

:where(#other-works .slick-dots){
  position: relative !important;
  bottom: 0 !important;
  margin-top: 40px !important;
  z-index: 5;
  display: flex !important;
  justify-content: center;
}

:where(#other-works .highlights-info){
  margin-top: 40px !important;
}

:where(#other-works .highlights-wrapper){
  padding-bottom: 80px !important;
}
/* === Carousel: place dots & info UNDER the slides (no overlap) === */
/* Reserve space under the slide area so dots don't sit on the image */
:where(#other-works .highlights-wrapper){
  /* Give the carousel bottom breathing room for dots + gap */
  padding-bottom: clamp(96px, 8vw, 128px) !important;
}

/* Keep dots in normal flow below the slides; add a small gap */
:where(#other-works .slick-dots){
  position: relative !important;
  bottom: auto !important;
  margin-top: 16px !important;
  display: flex !important;
  justify-content: center;
}

/* So the slides' content can extend without clipping while we reserve space below */
:where(#other-works .slick-list){
  overflow: visible !important;
}

/* Tight, consistent spacing from dots to the caption/info block */
:where(#other-works .highlights-info){
  margin-top: 32px !important;
}

/* Mobile refinement: slightly more reserved space and gap */
@media (max-width: 768px){
  :where(#other-works .highlights-wrapper){
    padding-bottom: 128px !important;
  }
  :where(#other-works .slick-dots){ margin-top: 20px !important; }
  :where(#other-works .highlights-info){ margin-top: 36px !important; }
}
/* === Carousel: force dots below the image, inside flow === */

/* Reserve real height inside the slider so dots have a home */
:where(#other-works .slick-slider){
  padding-bottom: 72px !important;    /* gives room for dots */
}

/* Cancel absolute positioning so dots participate in layout */
:where(#other-works .slick-dots){
  position: static !important;         /* was absolute */
  bottom: auto !important;
  margin-top: 16px !important;
  display: block !important;
  width: 100% !important;
  text-align: center;
}

/* Keep list visible so slides aren't clipping when we add inner padding */
:where(#other-works .slick-list){
  overflow: visible !important;
}

/* Tighten gap to the caption/info block */
:where(#other-works .highlights-info){
  margin-top: 28px !important;
}

/* Mobile: a touch more breathing room */
@media (max-width: 768px){
  :where(#other-works .slick-slider){ padding-bottom: 88px !important; }
  :where(#other-works .slick-dots){ margin-top: 18px !important; }
  :where(#other-works .highlights-info){ margin-top: 32px !important; }
}
/* === Carousel: stack slides over dots (fix dots appearing to the side) === */
:where(#other-works .slick-slider){
  display: flex !important;
  flex-direction: column !important;   /* stack children vertically */
  align-items: center !important;      /* center contents */
  gap: 0;                              
}

/* Ensure slides take full width of the stack */
:where(#other-works .slick-list){
  order: 1;
  width: 100% !important;
  overflow: visible !important;
}

/* Dots live under the slides, centered, in normal flow */
:where(#other-works .slick-dots){
  order: 2;
  position: static !important;         /* cancel absolute */
  bottom: auto !important;
  display: inline-flex !important;     /* shrink-to-content, easy centering */
  justify-content: center;
  padding: 0 !important;               /* remove default UL padding */
  margin: 16px auto 0 !important;      /* center via auto margins */
  width: auto !important;
  gap: 10px;
}

/* Keep a tidy gap to the caption/info block below */
:where(#other-works .highlights-info){
  margin-top: 28px !important;
}

/* Mobile: a touch more breathing room is usually nicer */
@media (max-width: 768px){
  :where(#other-works .slick-dots){ margin-top: 18px !important; }
  :where(#other-works .highlights-info){ margin-top: 32px !important; }
}
/* === Carousel: definitive dots placement (centered, below slides, no overlap) === */
/* Tunables */
:where(#other-works){
  --dots-reserve: 120px;   /* total space reserved inside the slider */
  --dots-bottom: 56px;     /* distance of dots from slider bottom edge */
  --dots-gap: 24px;        /* gap from dots to caption/info block */
}
@media (max-width: 768px){
  :where(#other-works){
    --dots-reserve: 110px;
    --dots-bottom: 50px;
    --dots-gap: 20px;
  }
}

/* Make the slider box reserve vertical space for the dots area */
:where(#other-works .slick-slider){
  position: relative !important;
  display: block !important;                     /* cancel prior flex tweaks */
  padding-bottom: var(--dots-reserve) !important;/* real space for dots */
}

/* Dots: absolutely center relative to the slider box */
:where(#other-works .slick-dots){
  position: absolute !important;                 /* authoritative placement */
  left: 50% !important;
  transform: translateX(-50%) !important;        /* perfect horizontal centering */
  bottom: var(--dots-bottom) !important;         /* sit within reserved area */
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 10px;
  width: auto !important;
  list-style: none !important;
  z-index: 5;
}

/* Slides should not be clipped while we reserve bottom space */
:where(#other-works .slick-list){
  overflow: visible !important;
}

/* Caption/info sits BELOW the slider with a clean, consistent gap */
:where(#other-works .highlights-info){
  margin-top: var(--dots-gap) !important;
}

/* Rollback guards: ensure any earlier column/flex overrides are neutralized */
:where(#other-works .slick-slider > .slick-list),
:where(#other-works .slick-slider > .slick-dots){
  order: initial !important;
  align-self: auto !important;
}
/* === Other Works: put dots between image and caption; trim section gap === */
/* Tunables */
:where(#other-works){
  --dots-pad: 150px;   /* space we reserve inside the slider for dots area */
  --dots-gap: 32px;    /* gap from dots to caption/info block */
  --section-gap: 88px; /* gap from this section to the next (About) */
}
@media (max-width: 768px){
  :where(#other-works){
    --dots-pad: 140px;
    --dots-gap: 28px;
    --section-gap: 72px;
  }
}

/* Reserve real space inside the slider so dots can live below the image */
:where(#other-works .slick-slider){
  position: relative !important;
  display: block !important;
  padding-bottom: var(--dots-pad) !important;
}

/* Center dots and place them inside the reserved area (no overlap on image) */
:where(#other-works .slick-dots){
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: calc(var(--dots-pad) - var(--dots-gap) - 8px) !important; /* ~150px down */
  display: flex !important;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
  z-index: 5;
}

/* Ensure nothing clips when we reserve bottom space */
:where(#other-works .slick-list){ overflow: visible !important; }

/* Caption sits just beneath the dots with a tight, consistent gap */
:where(#other-works .highlights-info){
  margin-top: var(--dots-gap) !important;
}

/* Remove any previous extra padding we added on wrappers */
:where(#other-works .highlights-wrapper){ padding-bottom: 0 !important; }

/* Trim the large gap before the next section (About) */
:where(#other-works){ margin-bottom: var(--section-gap) !important; }
/* If the next section has id="about", make sure it doesn't add huge extra top-margin */
:where(#about){ margin-top: 0 !important; }
/* === HARD FIX: force dots 150px below image, trim gaps === */
/* Tunables */
#other-works{
  --dots-shift: 150px;   /* visual downward shift of dots */
  --dots-gap:   32px;    /* space from dots -> caption */
  --sec-gap:    88px;    /* space from this section -> About */
}
@media (max-width: 768px){
  #other-works{
    --dots-shift: 140px;
    --dots-gap:   28px;
    --sec-gap:    72px;
  }
}

/* Reserve vertical space inside the actual slider box.
   We hit both .slick-slider and .slick-highlights in case your markup differs. */
#other-works .slick-slider,
#other-works .slick-highlights{
  position: relative !important;
  padding-bottom: var(--dots-shift) !important;   /* keeps dots from overlapping image */
}

/* BRUTE TARGET: the actual UL.slick-dots under this section */
#other-works ul.slick-dots{
  position: relative !important;  /* take part in normal flow of slider box */
  top: var(--dots-shift) !important;     /* visually push ~150px down */
  left: 0 !important;
  transform: none !important;            /* cancel any previous translate hacks */
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  width: max-content !important;
  z-index: 5 !important;
}

/* Slides should not clip while we reserve space */
#other-works .slick-list{ overflow: visible !important; }

/* Caption sits just beneath the dots with a tight, consistent gap */
#other-works .highlights-info{
  margin-top: var(--dots-gap) !important;
}

/* Remove any earlier extra bottom padding we might have added to the wrapper */
#other-works .highlights-wrapper{ padding-bottom: 0 !important; }

/* Tighten the large gap before the About section */
#other-works{ margin-bottom: 40px !important; }
#about{ margin-top: 0 !important; }  /* avoid double spacing */

/* Reduce gaps on mobile */
@media (max-width: 768px) {
  #other-works { 
    margin-bottom: 12px !important; 
    padding-bottom: 12px !important;
  }
  /* Override About section padding - need to target both class and ID */
  .projects-section#about,
  #about.projects-section {
    padding-top: 20px !important; 
    margin-top: 0 !important;
    padding-bottom: 24px !important;
  }
  /* Match About text width to Global Highlights info block width */
  #about,
  #about.projects-section,
  .projects-section#about {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }
  #about .about-container,
  .projects-section  #about .about-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important; /* No padding on container - section handles edge spacing */
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    transform: translateX(0) !important;
  }
  #about .about-content,
  #about.projects-section .about-content,
  .projects-section#about .about-content,
  .projects-section#about .about-container .about-content,
  #about .about-container .about-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 20px !important; /* Match contact-content padding */
    /* Match highlights info card border and styling */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.008) !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    position: relative !important;
    left: 0 !important;
    transform: translateX(0) !important;
  }
  
  /* Testimonial mobile styles - grid-based fixed height */
  .testimonial-carousel {
    margin: 24px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  
  .about-testimonial {
    grid-row: 1 !important;
    grid-column: 1 !important;
    padding: 24px 20px !important;
  }
  
  .about-testimonial p {
    font-size: 20px !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
  }
  
  .about-testimonial .cite-name {
    font-size: 16px !important;
  }
  
  .about-testimonial .cite-title {
    font-size: 13px !important;
  }
  /* Left align About text (remove justify/indent) */
  #about .about-intro,
  #about .about-paragraph,
  #about .about-content p {
    text-align: left !important;
    text-justify: none !important;
    text-indent: 0 !important; /* Remove paragraph indentation */
    white-space: normal !important; /* Collapse whitespace to remove HTML indentation */
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Reduce gap between About title and text */
  #about h2 {
    margin-bottom: 12px !important;
  }
  #about .about-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Ensure consistent spacing between all sections */
  .projects-section {
    padding-top: 32px !important;
    padding-bottom: 24px !important;
  }
  /* Override specific sections to ensure consistent spacing */
  #press.projects-section,
  #expertise.projects-section,
  #contact.projects-section {
    padding-top: 32px !important;
    padding-bottom: 24px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* ===== Scroll-snap carousel (v2) for #other-works ===== */
/* Toggle: set data-use-v2="true" on <body> to enable v2 and hide old Slick. */
body:not([data-use-v2="true"]) #other-works-v2 { display: none; }
/* v2 on: hide ANY Slick structure inside #other-works (super aggressive) */
body[data-use-v2="true"] #other-works [class*="slick"] { display: none !important; visibility: hidden !important; }
body[data-use-v2="true"] #other-works .slick-highlights,
body[data-use-v2="true"] #other-works .slick-slider,
body[data-use-v2="true"] #other-works .slick-list,
body[data-use-v2="true"] #other-works .slick-track { display: none !important; visibility: hidden !important; }
body[data-use-v2="true"] #other-works-v2 { 
  display: block !important; 
}
/* Hide old carousel wrapper and mobile gallery on mobile */
@media (max-width: 768px) {
  body[data-use-v2="true"] #other-works .highlights-wrapper,
  body[data-use-v2="true"] #other-works .mobile-gallery,
  body[data-use-v2="true"] #other-works .mobile-gallery-dots,
  body[data-use-v2="true"] #other-works .mobile-gallery-info {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ===== Scroll-snap carousel (v2) simplified ===== */
#other-works { padding-left: 0 !important; padding-right: 0 !important; }
#other-works .ow2{
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none;
  margin-top: 0; /* Spacing from title controlled by carousel-title padding-bottom */
  --gap: 16px;
  --slide-w: min(84vw, 720px); /* mobile hero width with clear side peeks */
  --ratio: 16/9;
  --dots-gap: 20px; /* Balanced spacing from carousel to dots - matches margin-bottom */
}
@media (min-width: 768px){  
  #other-works .ow2{ --gap: 18px; --slide-w: min(70vw, 960px); --dots-gap: 24px; }
  #other-works .carousel-title { padding-bottom: clamp(24px, 3vh, 48px); }
}
@media (min-width: 1280px){ 
  #other-works .ow2{ --gap: 20px; --slide-w: min(60vw, 1040px); --dots-gap: 28px; }
  #other-works .carousel-title { padding-bottom: clamp(28px, 3.5vh, 56px); }
}

#other-works .ow2-viewport{
  overflow-x: auto;
  overflow-y: visible; /* Allow center image to scale without clipping */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative; /* For absolute positioning of buttons */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
#other-works .ow2-viewport::-webkit-scrollbar{ display: none; }
#other-works .ow2-viewport:focus { outline: none !important; border: none !important; box-shadow: none !important; }
#other-works .ow2-viewport:focus-visible { outline: none !important; border: none !important; box-shadow: none !important; }

#other-works .ow2-track{
  display: flex;
  gap: var(--gap);
  /* center hero with symmetric padding; ensures visible side peeks */
  padding-inline: calc((100vw - var(--slide-w)) / 2);
  padding-bottom: 0; /* No padding - spacing controlled by dots margin-top */
  box-sizing: border-box;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Ensure clones are clickable */
#other-works .ow2-clone{
  cursor: pointer !important;
  pointer-events: auto !important;
}
#other-works .ow2-clone img{
  cursor: pointer !important;
  pointer-events: auto !important;
}

#other-works .ow2-slide{
  scroll-snap-align: center;
  flex: 0 0 var(--slide-w);
  aspect-ratio: var(--ratio);
  position: relative;
  overflow: visible; /* Allow scaling without cropping */
  border-radius: 0;
  transform-origin: center center;
  transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.25s ease-out;
  /* side images: more transparent and smaller */
  opacity: .5;
  transform: scale(0.88);
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  will-change: transform, opacity;
}
/* Active/center slide: fully opaque, scale to fit boundary (max 1.0 to prevent cropping) */
#other-works .ow2-slide.is-active,
#other-works .ow2-slide[data-active="true"]{
  opacity: 1;
  transform: scale(1.0); /* Scale to max boundary size, no cropping */
  z-index: 2;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
#other-works .ow2-slide:focus { outline: none !important; border: none !important; }

#other-works .ow2-slide img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block; border: 0; outline: none;
  pointer-events: none; /* Prevent image from interfering with slide clicks */
}
#other-works .ow2-slide img:focus { outline: none; }
#other-works .ow2-slide:focus { outline: none; }
#other-works .ow2-slide:focus-visible { outline: none; }
#other-works .ow2-slide img { outline: none !important; }
#other-works .ow2-slide { outline: none !important; }

/* Visible nav buttons - positioned relative to ow2 container, not viewport */
#other-works .ow2 {
  position: relative; /* Ensure buttons are positioned relative to this container */
}
#other-works .ow2-viewport {
  position: relative; /* Keep for other positioning */
}
#other-works .ow2-btn{
  position: absolute; 
  width: 48px; 
  height: 48px; 
  border: 0;
  background: rgba(0,0,0,.45); 
  color: #fff; 
  font-size: 28px; 
  line-height: 48px;
  display: grid; 
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
  opacity: .95;
  z-index: 10;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: auto; /* Ensure buttons are clickable */
  /* Vertically center on main image height - viewport starts at top of .ow2, so center is half the image height */
  top: calc((var(--slide-w) / var(--ratio)) / 2);
  transform: translateY(-50%);
}
#other-works .ow2-btn:hover{ 
  background: rgba(0,0,0,.6); 
  transform: translateY(-50%) scale(1.03); 
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
#other-works .ow2-btn:focus{ 
  outline: none !important; 
  border: none !important;
  box-shadow: none !important;
}
#other-works .ow2-btn:focus-visible{ 
  outline: none !important; 
  border: none !important;
  box-shadow: none !important;
}
#other-works .ow2-btn:active{ 
  transform: translateY(-50%) scale(0.97); 
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* Position buttons much more outside the main image, centered in the negative space between main and side images */
/* Main image edges: left at (100vw - var(--slide-w))/2, right at (100vw - var(--slide-w))/2 + var(--slide-w) */
/* Gap between images: var(--gap) */
/* Position buttons further outside: image edge - (gap + extra space + 5px) - button half-width */
#other-works .ow2-btn-prev{ 
  left: calc((100vw - var(--slide-w))/2 - var(--gap) - 45px); /* 5px further out (40px + 5px = 45px) */
}
#other-works .ow2-btn-next{ 
  right: calc((100vw - var(--slide-w))/2 - var(--gap) - 45px); /* 5px further out */
}
@media (max-width: 768px) {
  #other-works .ow2-btn-prev{ 
    left: calc((100vw - var(--slide-w))/2 - var(--gap) - 37px); /* 5px further out (32px + 5px) */
  }
  #other-works .ow2-btn-next{ 
    right: calc((100vw - var(--slide-w))/2 - var(--gap) - 37px); /* 5px further out */
  }
}
@media (max-width: 480px){
  #other-works .ow2-btn{ width: 40px; height: 40px; line-height: 40px; font-size: 24px; border-radius: 50%; }
  #other-works .ow2-btn-prev{ 
    left: calc((100vw - var(--slide-w))/2 - var(--gap) - 33px); /* 5px further out (28px + 5px) */
  }
  #other-works .ow2-btn-next{ 
    right: calc((100vw - var(--slide-w))/2 - var(--gap) - 33px); /* 5px further out */
  }
}

/* Intuitive click zones - left/right sides of viewport for navigation */
#other-works .ow2-click-zone{
  position: absolute; 
  top: 0; 
  bottom: 0;
  width: 50%; /* each zone covers half the viewport */
  cursor: pointer;
  background: transparent;
  border: 0; 
  padding: 0; 
  margin: 0;
  z-index: 1; /* below clones so clone clicks work */
  /* Prevent text selection and ensure clean interaction */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* Ensure pointer events work */
  pointer-events: auto;
}
#other-works .ow2-click-zone-left{ left: 0; }
#other-works .ow2-click-zone-right{ right: 0; }
/* No hover indication - click zones should be invisible, visible buttons handle hover states */
/* Focus for accessibility - but hide outline to prevent white lines */
#other-works .ow2-click-zone:focus{ 
  outline: none !important; 
  border: none !important;
}
#other-works .ow2-click-zone:focus-visible{ 
  outline: none !important; 
  border: none !important;
}
/* Ensure clones are above click zones so their clicks work */
#other-works .ow2-clone{
  z-index: 2;
  position: relative;
}

/* Ensure buttons stay above click zones and clones */
#other-works .ow2-btn{
  z-index: 3;
}

/* Dots - Apple-style larger size (20% bigger), balanced spacing */
#other-works .ow2-dots{
  display: flex; 
  justify-content: center; 
  gap: 14px; 
  margin-top: var(--dots-gap); /* Balanced spacing from carousel - matches margin-bottom */
  margin-bottom: var(--dots-gap); /* Balanced spacing to text block - matches margin-top */
  border: none !important;
  outline: none !important;
  padding: 0;
}
#other-works .ow2-dots::before,
#other-works .ow2-dots::after {
  display: none !important;
  content: none !important;
}
#other-works .ow2-dots button{
  width: 12px; /* 20% bigger: 10px * 1.2 = 12px */
  height: 12px; 
  border-radius: 999px; 
  border: 0 !important;
  background: rgba(255,255,255,.5); 
  cursor: pointer;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  box-shadow: none !important;
  transition: all 0.2s ease;
}
#other-works .ow2-dots button:focus,
#other-works .ow2-dots button:focus-visible { 
  outline: none !important; 
  border: none !important;
  box-shadow: none !important;
}
#other-works .ow2-dots button:active { transform: scale(0.95); }
#other-works .ow2-dots button[aria-current="true"]{ 
  background: rgba(255,255,255,1); 
  width: 14px; /* 20% bigger: 12px * 1.2 = 14.4px ≈ 14px */
  height: 14px;
}

/* Info block (caption) under dots - width matches center image, larger text, balanced spacing */
#other-works .ow2-info{
  display: block;
  margin: 0 auto;
  margin-top: 0; /* Spacing from dots controlled by dots margin-bottom */
  width: var(--slide-w); /* Match center image width */
  max-width: var(--slide-w);
  padding: 0;
  position: relative;
  z-index: 2;
  text-align: center;
  min-height: 100px;
}
#other-works .ow2-info .info-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; 
  padding: 24px 28px; 
  text-align: center;
  margin: 0 auto;
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
#other-works .ow2-info .info-card h4 {
  font-family: 'Cormorant Garamond', 'Garamond', serif;
  font-size: clamp(20px, 2.8vw, 28px); 
  margin-bottom: 10px; 
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #ffffff;
}
#other-works .ow2-info .info-card p {
  font-size: clamp(16px, 2vw, 18px); 
  color: #cfcfcf; 
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Prevent horizontal overflow quirks on mobile */
#other-works .ow2-viewport, #other-works .ow2-track { box-sizing: border-box; }

/* Responsive adjustments for mobile spacing and info block */
@media (max-width: 768px) {
  #other-works .carousel-title { 
    padding-bottom: clamp(16px, 2.5vh, 32px); 
  }
  #other-works .ow2 { 
    --dots-gap: 18px; 
    --slide-w: 100vw; /* Full width on mobile */
    --gap: 0; /* No gap on mobile for full-width images */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    transform: none !important;
    position: relative !important;
    left: 0 !important;
  }
  /* Hide arrows on mobile */
  #other-works .ow2-btn {
    display: none !important;
  }
  /* Full width viewport on mobile */
  #other-works .ow2-viewport {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    transform: none !important;
    position: relative !important;
    left: 0 !important;
  }
  /* Full width track on mobile */
  #other-works .ow2-track {
    padding-inline: 0 !important; /* No padding on mobile */
    margin-left: 0 !important;
    transform: none !important;
    position: relative !important;
    left: 0 !important;
  }
  /* Full width slides on mobile */
  #other-works .ow2-slide {
    flex: 0 0 100vw !important;
    width: 100vw !important;
    margin-left: 0 !important;
    transform: none !important;
  }
  #other-works .ow2-dots { 
    gap: 12px;
    /* Balance dots evenly: calculate equal spacing from image bottom to info top */
    /* Total gap is ~91px, so each side should be ~45.5px, minus half dot height (7px) = ~38.5px */
    margin-top: 38px !important;
    margin-bottom: 38px !important;
  }
  #other-works .ow2-info {
    width: 100vw;
    max-width: 100vw;
    padding: 0 20px;
    box-sizing: border-box;
  }
  #other-works .ow2-info .info-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  #other-works .ow2-info .info-card h4 {
    font-size: clamp(18px, 4vw, 24px);
  }
  #other-works .ow2-info .info-card p {
    font-size: clamp(14px, 3vw, 16px);
  }
}

/* Desktop spacing trim between Global Highlights and About */
@media (min-width: 1024px){
  #other-works {
    margin-bottom: -50px !important; /* Pull About section up by 50px */
    padding-bottom: 0 !important;
  }
  .projects-section#about,
  #about.projects-section {
    margin-top: 0 !important;
    padding-top: 20px !important; /* slight breathing room under title */
  }
}

/* iPhone 14 and similar (390px) - smallest supported size */
@media (max-width: 480px){
  #other-works .carousel-title { 
    padding-bottom: clamp(14px, 2vh, 28px); 
  }
  #other-works .ow2 { 
    --dots-gap: 16px; 
    --slide-w: 100vw; /* Full width on mobile */
    --gap: 0; /* No gap on mobile */
  }
  /* Hide arrows on mobile */
  #other-works .ow2-btn {
    display: none !important;
  }
  /* Full width viewport on mobile */
  #other-works .ow2-viewport {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    transform: none !important;
    position: relative !important;
    left: 0 !important;
  }
  /* Full width track on mobile */
  #other-works .ow2-track {
    padding-inline: 0 !important; /* No padding on mobile */
    margin-left: 0 !important;
    transform: none !important;
    position: relative !important;
    left: 0 !important;
  }
  /* Full width slides on mobile */
  #other-works .ow2-slide {
    flex: 0 0 100vw !important;
    width: 100vw !important;
    margin-left: 0 !important;
    transform: none !important;
  }
  #other-works .ow2-dots { 
    gap: 10px;
  }
  #other-works .ow2-track{ padding-bottom: 0 !important; }
  /* Balance dots evenly - adjust margins to center between image and info */
  #other-works .ow2-dots { 
    gap: 10px;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  #other-works .ow2-info {
    width: 100vw;
    max-width: 100vw;
    padding: 0 16px;
    box-sizing: border-box;
  }
  #other-works .ow2-info .info-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  /* Match About container and content padding to highlights info at 390px */
  #about .about-container {
    padding: 0 !important; /* No padding on container */
  }
  #about .about-content,
  #about.projects-section .about-content,
  .projects-section#about .about-content,
  .projects-section#about .about-container .about-content,
  #about .about-container .about-content {
    padding: 24px 20px !important; /* Match contact-content padding */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }
  
  /* Testimonial small phone styles */
  .about-testimonial {
    padding: 22px 18px !important;
  }
  
  .about-testimonial p {
    font-size: 19px !important;
    line-height: 1.5 !important;
  }
}

/* ============================================== 
   FINAL MOBILE OVERRIDE - iPhone 16 Pro Max
   Using #nav ID for logo to beat styles.css
   ============================================== */

@media (max-width: 768px) {
  /* NAV - LOGO using ID selector to override styles.css 64px !important */
  #nav {
    padding: 12px 16px !important;
  }
  
  #nav .nav-logo .logo,
  #nav .nav-logo .logo img,
  #nav .logo,
  #nav .logo img {
    height: 40px !important;
    max-height: 40px !important;
    min-height: 40px !important;
  }
  
  /* PORTRAIT - big and prominent - lifted 15px */
  #home .photo-container {
    margin: -25px auto 8px auto !important;
  }
  
  /* HERO CONTENT */
  #home .hero-content {
    gap: 8px !important;
    padding: 0 10px !important;
  }
  
  /* NAME - big and visible */
  #home .hero-name {
    margin-bottom: -16px !important;
    margin-top: 0 !important;
    font-size: 44px !important;
  }
  
  /* TITLE BLOCK - tight to name */
  #home .hero-titles {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  
  /* TITLE - fits width nicely on 2 lines */
  #home .hero-title,
  #home .hero-titles .hero-title {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    line-height: 1.35 !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
  }
  
  /* COMPANY LINE - very tight, white */
  #home .hero-subtitle,
  #home .hero-titles .hero-subtitle {
    margin-top: -4px !important;
    margin-bottom: -4px !important;
    padding: 0 !important;
    font-size: 15px !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
  }
  
  #home .hero-subtitle .immersive-link,
  #home .hero-subtitle a {
    color: #ffffff !important;
  }
  
  /* DESCRIPTION */
  #home .hero-description {
    margin-top: 4px !important;
    margin-bottom: 20px !important;
    line-height: 1.45 !important;
    font-size: 14px !important;
  }
  
  /* PILLS */
  #home .hero-specialties {
    gap: 6px !important;
    margin-top: 8px !important;
  }
  
  #home .hero-specialty-pill {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  
  /* STATS SECTION - match About/Contact block styling */
  /* Must use html body to override styles.css */
  html body .stats-container,
  body .stats-container,
  .stats-container {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    padding: 24px 20px !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 24px !important;
  }
  
  html body .stats-container .stats-grid,
  .stats-container .stats-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

/* ============================================== 
   UNIFORM WIDTH FIX - Press/Expertise/Contact ONLY
   Make these sections match the About section width
   DO NOT TOUCH ABOUT SECTION - it's already correct
   Added: 2025-11-29
   ============================================== */

@media (max-width: 768px) {
  /* Press section - match About's width pattern */
  /* About has: section padding 0, container 100vw with 20px padding */
  /* So Press needs: section padding 0, grid with 20px padding */
  html body #press.projects-section,
  html body .projects-section#press {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  html body #press .press-grid {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 !important;
    margin-top: 40px !important;
    box-sizing: border-box !important;
  }
  
  html body #press .press-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Fix text wrapping in press items - override pre-wrap from mobile-refactor-final.css */
  html body #press .press-title {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    text-indent: 0 !important;
    text-align: left !important;
  }
  
  html body #press .press-excerpt {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-indent: 0 !important;
    text-align: left !important;
  }
  
  html body #press .press-publication {
    white-space: normal !important;
    text-indent: 0 !important;
    text-align: left !important;
  }
  
  /* Expertise section - match About's width pattern */
  html body #expertise.projects-section,
  html body .projects-section#expertise {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  html body #expertise .expertise-grid {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  html body #expertise .expertise-item {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Contact section - match About's width pattern */
  html body #contact.projects-section,
  html body .projects-section#contact {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  html body #contact .contact-container {
    width: 100vw !important;
    max-width: 100vw !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  html body #contact .contact-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  
  html body #contact .contact-grid {
    width: 100% !important;
    margin: 0 !important;
  }
  
  html body #contact .contact-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  html body #contact .contact-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  /* FOOTER - smaller text to prevent truncation */
  html body .footer {
    padding: 20px 16px !important;
  }
  
  html body .footer-content {
    font-size: 11px !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
  }
  
  /* MODAL - hide logo on mobile */
  html body .modal-logo {
    display: none !important;
  }
}