/* MAH Construction Group — shared custom styles */

:root {
  --gold: #C5A059;
  --ink: #0D0D0D;
  --cream: #F2F0ED;
  --whatsapp: #25D366;
}
/* Chat now opens as its own page (see chat.html) rather than a
   third-party widget bubble sharing this corner, so no extra
   clearance needs to be reserved above the floating contact stack. */

/* html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } */
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
/* Web 2 typography baseline */
html, body {
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-heading {
  font-weight: 700;
  letter-spacing: -0.025em;
}

.font-mono {
  font-weight: 500;
}


body {
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.font-heading { font-family: 'Space Grotesk', sans-serif; }
.font-mono    { font-family: 'JetBrains Mono', monospace; }
.font-body    { font-family: 'Inter', sans-serif; }
.font-arabic  { font-family: 'Amiri', serif; }
.font-urdu    { font-family: 'Noto Nastaliq Urdu', serif; }


/* ============================================================
   SPLASH SCREEN TYPOGRAPHY
   Prevent iOS Safari from enlarging the splash heading.
   ============================================================ */

.splash-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  color: #fff;
  font-size: 52px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.splash-title + .splash-title {
  margin-top: 0;
}

.splash-trademark {
  color: #C5A059;
  font-size: 0.4em;
  vertical-align: super;
}

/* Smaller phones */
@media (max-width: 380px) {
  .splash-title {
    font-size: 46px;
  }
}

/* Larger phones */
@media (min-width: 430px) and (max-width: 767px) {
  .splash-title {
    font-size: 56px;
  }
}

/* Tablet / desktop */
@media (min-width: 768px) {
  .splash-title {
    font-size: 60px;
  }
}

/* Sticky navbar */
/* Web 2-style header: black branding strip + transparent nav over the hero.
   The navigation stays transparent while scrolling so the hero remains visible. */
[data-navbar] {
  background: transparent !important;
  border-bottom: 0 !important;
}
[data-navbar] > .text-center {
  background: #0d0d0d !important;
}
[data-navbar] > nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-navbar].nav-scrolled {
  background: transparent !important;
  border-bottom: 0 !important;
}
[data-navbar].nav-scrolled > .text-center,
[data-navbar].nav-scrolled > nav {
  background: transparent !important;
}
[data-navbar].nav-scrolled > .text-center {
  background: #0d0d0d !important;
}


/* Scroll progress */
[data-scroll-progress] {
  width: 0%;
  transition: width .1s linear;
}

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Marquee ticker */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Live pulsing dot */
.live-dot { position: relative; display: inline-flex; width: .5rem; height: .5rem; }
.live-dot::before, .live-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 9999px; background: #ef4444;
}
.live-dot::before { animation: ping 1.5s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .75; } 75%,100% { transform: scale(2.4); opacity: 0; } }

/* Active construction phase — Web 2-style rotating red status ring */
.phase-active-circle {
  position: relative;
  border-radius: 9999px;
  background: #0D0D0D;
  box-sizing: border-box;
}
.phase-active-circle::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 9999px;
  background: conic-gradient(from 0deg, #ef4444 0deg, #ef4444 105deg, transparent 105deg, transparent 220deg, #ef4444 220deg, #ef4444 300deg, transparent 300deg, transparent 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: phaseRingSpin 1.8s linear infinite;
}
.phase-active-circle::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(239,68,68,.28);
  border-radius: 9999px;
}
.phase-active-core {
  position: relative;
  z-index: 2;
  color: #ef4444;
  font-size: .5rem;
  line-height: 1;
  animation: phaseCorePulse 1.2s ease-in-out infinite;
}
@keyframes phaseRingSpin {
  to { transform: rotate(360deg); }
}
@keyframes phaseCorePulse {
  0%, 100% { transform: scale(.8); opacity: .7; }
  50% { transform: scale(1.25); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .phase-active-circle::before, .phase-active-core { animation: none; }
}

/* Accordion */
.accordion-panel {
  overflow-anchor: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.22,1,.36,1);
}
/* Fallback cap — JS sets the exact pixel height on open, this only
   matters if JS hasn't run yet */
.accordion-panel.open { max-height: 3000px; }
/* Pictures + details glide out downward from the header, same for every panel */
.accordion-panel > * {
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.accordion-panel.open > * {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .08s;
}

/* Accordion "+" icon rotates into a "×" when its panel is open */
[data-accordion-trigger] [data-accordion-icon] {
  display: inline-block;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
[data-accordion-trigger].is-active [data-accordion-icon] {
  transform: rotate(45deg);
}

/* Service tile — full-width horizontal row block */
.service-tile { transition: border-color .3s ease; }
.service-tile:hover,
.service-tile:focus-within,
.service-tile.is-active { border-color: rgba(197,160,89,.5); }

/* Portfolio grid / tile system — translated from the supplied React PortfolioGrid + PortfolioTile */
.portfolio-masonry {
  columns: 1;
  column-gap: 1.25rem;
}
.portfolio-tile {
  display: block;
  width: 100%;
  margin-bottom: 1.25rem;
  break-inside: avoid;
  height: auto;
}
.portfolio-standard { aspect-ratio: 4 / 3; }
.portfolio-tall { aspect-ratio: 3 / 4; }

.portfolio-img {
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.portfolio-card:hover .portfolio-img,
.portfolio-card:focus-visible .portfolio-img {
  transform: scale(1.05);
}

.portfolio-default-state {
  opacity: 1;
  transition: opacity .3s ease;
}
.portfolio-hover-state {
  opacity: 0;
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.portfolio-card:hover .portfolio-default-state,
.portfolio-card:focus-visible .portfolio-default-state {
  opacity: 0;
}
.portfolio-card:hover .portfolio-hover-state,
.portfolio-card:focus-visible .portfolio-hover-state {
  opacity: 1;
  transform: translateY(0);
}
.portfolio-card:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .portfolio-masonry { columns: 2; }
}
@media (min-width: 1280px) {
  .portfolio-masonry { columns: 3; }
}
@media (hover: none) {
  /* Match Base44 mobile behavior: projects start fully visible.
     A touch activates the detail layer instead of forcing every card
     into the hover state on page load. */
  .portfolio-card .portfolio-hover-state {
    opacity: 0;
    transform: translateY(100%);
    background: linear-gradient(to top, rgba(13,13,13,.90), rgba(13,13,13,.18));
    backdrop-filter: none;
  }
  .portfolio-card .portfolio-default-state { opacity: 1; }
  .portfolio-card.is-touch-active .portfolio-hover-state {
    opacity: 1;
    transform: translateY(0);
  }
  .portfolio-card.is-touch-active .portfolio-default-state { opacity: 0; }
}

/* Defensive: process accordion image must never be visible while
   its panel is collapsed, even before the exact max-height is set by JS */
.accordion-panel:not(.open) { max-height: 0 !important; padding-top: 0; padding-bottom: 0; }
.accordion-panel:not(.open) img { visibility: hidden; }

/* Floating contact — Chat / Profile stay visible; + reveals Call / WhatsApp / Instagram */
.floating-contact {
  position: fixed; right: max(1.1rem, env(safe-area-inset-right));
  bottom: calc(max(1.3rem, env(safe-area-inset-bottom)) + .2rem);
  z-index: 50;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
  --fc-size: 48px; --fc-gap: 8px;
}
.floating-btn {
  width: var(--fc-size, 48px); height: var(--fc-size, 48px); border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25); transition: transform .35s cubic-bezier(.22,1,.36,1);
  flex-shrink: 0;
}
.floating-btn:hover { transform: scale(1.08); }
@media (hover: none) { .floating-btn:hover { transform: none; } }

.floating-contact .fc-options {
  position: absolute;
  right: 0;
  bottom: calc(var(--fc-size, 48px) + var(--fc-gap, 8px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
  pointer-events: none;
}
.floating-contact .fc-item {
  opacity: 0;
  transform: translateY(10px) scale(.72);
  pointer-events: none;
  transition: opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.floating-contact.is-open .fc-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.floating-contact.is-open .fc-options { pointer-events: auto; }
.floating-contact .fc-item:nth-child(1) { transition-delay: .04s; }
.floating-contact .fc-item:nth-child(2) { transition-delay: .1s; }
.floating-contact .fc-item:nth-child(3) { transition-delay: .16s; }
/* When the + menu opens, Chat / Profile glide up so the 3 option icons never overlap them */
.floating-contact .fc-chat,
.floating-contact .fc-profile {
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.floating-contact.is-open .fc-chat,
.floating-contact.is-open .fc-profile {
  transform: translateY(calc(-3 * (var(--fc-size, 48px) + var(--fc-gap, 8px))));
}
.floating-contact.is-open .fc-chat:hover,
.floating-contact.is-open .fc-profile:hover {
  transform: translateY(calc(-3 * (var(--fc-size, 48px) + var(--fc-gap, 8px)))) scale(1.08);
}
.floating-contact .fc-toggle { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.floating-contact.is-open .fc-toggle svg { transform: rotate(45deg); }
.floating-contact .fc-toggle svg { transition: transform .4s cubic-bezier(.22,1,.36,1); }

/* Quick-link card — rectangular link box (icon + title/URL + external-link glyph) */
.quicklink-card {
  display: flex; align-items: center; gap: 1rem;
  width: 100%; max-width: 640px;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(197,160,89,.16), rgba(13,13,13,.55));
  border: 1px solid rgba(197,160,89,.35);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.quicklink-card:hover {
  transform: translateY(-2px);
  border-color: rgba(197,160,89,.7);
  background: linear-gradient(135deg, rgba(197,160,89,.24), rgba(13,13,13,.6));
}
.quicklink-card .quicklink-icon {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(197,160,89,.18);
  color: var(--gold);
}
.quicklink-card .quicklink-text { flex: 1 1 auto; min-width: 0; }
.quicklink-card .quicklink-title {
  font-weight: 700; color: var(--cream);
  font-size: 1rem; line-height: 1.25;
}
.quicklink-card .quicklink-url {
  color: rgba(242,240,237,.6);
  font-size: .85rem; margin-top: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quicklink-card .quicklink-external {
  flex-shrink: 0; color: rgba(242,240,237,.5);
}

/* Glowing shimmer divider with clickable website link in the middle */
.glow-divider {
  display: flex; align-items: center; gap: 1.1rem;
  width: 100%; max-width: 900px; margin: 0 auto;
  padding: 2rem 1.25rem;
}
.glow-divider .glow-line {
  flex: 1 1 auto; height: 2px; min-width: 24px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold) 45%, var(--gold) 55%, transparent);
  background-size: 220% 100%;
  animation: glow-sweep 3.2s linear infinite, glow-bloom 2.6s ease-in-out infinite;
}
.glow-divider .glow-line.right { animation-delay: 0s, 1.3s; }
.glow-divider .glow-link {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(197,160,89,.4);
  border-radius: 999px;
  animation: glow-bloom-box 2.6s ease-in-out infinite;
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.glow-divider .glow-link:hover {
  background: rgba(197,160,89,.15);
  border-color: var(--gold);
  transform: translateY(-1px);
}
@keyframes glow-sweep {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}
@keyframes glow-bloom {
  0%, 100% { box-shadow: 0 0 4px rgba(197,160,89,.25); opacity: .65; }
  50% { box-shadow: 0 0 14px rgba(197,160,89,.85); opacity: 1; }
}
@keyframes glow-bloom-box {
  0%, 100% { box-shadow: 0 0 6px rgba(197,160,89,.2); }
  50% { box-shadow: 0 0 18px rgba(197,160,89,.6); }
}
@media (max-width: 640px) {
  .glow-divider { gap: .7rem; padding: 1.5rem 1rem; }
  .glow-divider .glow-link { font-size: .68rem; padding: .45rem .8rem; }
}

/* Calculator plot-size unit toggle */
[data-plot-unit] { background: transparent; color: var(--ink); }
[data-plot-unit].is-active { background: var(--gold); color: #fff; border-color: var(--gold); }

/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* Vertical rotated label (hero scroll progress caption) */
.vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: .3em;
}

/* Splash curtain — lifts away as a solid panel (no opacity cross-fade,
   so the hero text underneath never ghosts/overlaps with splash text) */
.splash-curtain {
  transform: translateY(0);
  transition: transform .65s cubic-bezier(.76,0,.24,1);
  will-change: transform;
}
.splash-curtain-hide {
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
  .splash-curtain { transition: none; }
  .marquee-track, .live-dot::before { animation: none; }
}

/* Keep fixed header labels and controls usable on compact phone screens. */
@media (max-width: 374px) {
  [data-navbar] nav { padding-left: 1rem; padding-right: 1rem; }
  [data-mobile-nav] { padding-left: 1rem; padding-right: 1rem; }
  .floating-contact { --fc-size: 46px; }
}


/* Expired Independence Month offer cards — Base44-style red X. */
.offer-expired-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.offer-expired-card .offer-expired-status {
  align-self: flex-end;
  margin-top: auto;
  padding-top: 1rem;
  color: #ef4444;
  font-weight: 500;
  text-transform: uppercase;
}
.offer-expired-card .offer-expired-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 9999px;
  background: #ef4444;
  vertical-align: 1px;
  box-shadow: 0 0 5px rgba(239, 68, 68, .35);
}

/* Base44 exact expired-card X overlay: true corner-to-corner diagonals. */
.offer-expired-card .offer-expired-x {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.offer-expired-card .offer-expired-x line {
  stroke: #ef4444;
  stroke-width: 0.32;
  vector-effect: non-scaling-stroke;
  opacity: 0.78;
}
.offer-expired-card .offer-expired-x line {
  filter: drop-shadow(0 0 1px rgba(239,68,68,.18));
}
.offer-expired-card > *:not(.offer-expired-x) {
  position: relative;
  z-index: 2;
}


/* Floating contact polish */
.floating-contact { padding-bottom: env(safe-area-inset-bottom); }
.floating-contact .fc-item { will-change: transform, opacity; }
@media (max-width: 640px) {
  .floating-contact { right: 14px; bottom: calc(20px + env(safe-area-inset-bottom)); gap: 8px; --fc-size: 46px; }
}
/* ============================================================
   MOBILE MENU — FULL-SCREEN BLUR + SMOOTH OPEN ANIMATION
   ============================================================ */

@media (max-width: 1023px) {

  [data-mobile-nav] {
    position: fixed;
    inset: 0;
    z-index: 1;

    /* Keep menu content below the fixed header controls */
    padding-top: 150px;
    padding-bottom: 40px;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* Full-screen translucent background */
    background: rgba(26, 26, 26, 0.68);

    /* Blur everything behind the menu, all the way to the top */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    border-top: 0;
  }

  /* Keep the logo/header/menu button above the full-screen blur */
  [data-navbar] > nav,
  [data-navbar] > .text-center {
    position: relative;
    z-index: 3;
  }

  /* Slight opening animation */
  [data-mobile-nav]:not(.hidden) {
    animation: mobileMenuReveal 0.45s cubic-bezier(.22, 1, .36, 1) both;
  }

  @keyframes mobileMenuReveal {
    from {
      opacity: 0;
      transform: translateY(-14px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Slight stagger for the menu items */
  [data-mobile-nav]:not(.hidden) > div > a,
  [data-mobile-nav]:not(.hidden) > div > div {
    animation: mobileMenuItemReveal 0.4s cubic-bezier(.22, 1, .36, 1) both;
  }

  [data-mobile-nav]:not(.hidden) > div > a:nth-child(1) {
    animation-delay: .04s;
  }

  [data-mobile-nav]:not(.hidden) > div > a:nth-child(2) {
    animation-delay: .07s;
  }

  [data-mobile-nav]:not(.hidden) > div > a:nth-child(3) {
    animation-delay: .10s;
  }

  [data-mobile-nav]:not(.hidden) > div > a:nth-child(4) {
    animation-delay: .13s;
  }

  [data-mobile-nav]:not(.hidden) > div > a:nth-child(5) {
    animation-delay: .16s;
  }

  @keyframes mobileMenuItemReveal {
    from {
      opacity: 0;
      transform: translateY(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-mobile-nav]:not(.hidden),
    [data-mobile-nav]:not(.hidden) > div > a,
    [data-mobile-nav]:not(.hidden) > div > div {
      animation: none;
    }
  }
}
/* ============================================================
   DATE / TIME / HIJRI RESPONSIVE LAYOUT
   Mobile  = 3 centered rows
   Desktop = date left / time center / Hijri right
   ============================================================ */

.clock-display {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  text-align: center;
  row-gap: 0.55rem;
  width: 100%;
}

@media (min-width: 768px) {
  .clock-display {
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: stretch;
    text-align: center;
  }

  .clock-date {
    justify-self: start;
    text-align: left;
  }

  .clock-time {
    justify-self: center;
    text-align: center;
  }

  .clock-hijri {
    justify-self: end;
    text-align: right;
  }
}
/* ----------------------- Project detail gallery / Base44-style ----------------------- */
.project-modal { padding: 22px; }
.project-modal-shell { max-height:94vh; overflow-y:auto; overflow-x:hidden; border:1px solid rgba(255,255,255,.12); scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent; }
.project-modal-close { width:42px; height:42px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.22); background:rgba(8,8,8,.52); color:#fff; backdrop-filter:blur(10px); transition:.25s ease; }
.project-modal-close:hover { background:var(--gold); color:#0d0d0d; border-color:var(--gold); transform:scale(1.04); }
.project-detail-gallery { position:relative; width:100%; background:#090909; }
.project-gallery-stage { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#080808; touch-action:pan-y; cursor:pointer; }
.project-gallery-slide { position:absolute; inset:0; opacity:0; transform:scale(1.055); transition:opacity .8s cubic-bezier(.22,1,.36,1),transform 2.2s cubic-bezier(.22,1,.36,1); pointer-events:none; }
.project-gallery-slide.is-active { opacity:1; transform:scale(1); pointer-events:auto; }
.project-gallery-slide.no-transition { transition:none !important; }
.project-gallery-slide img { display:block; width:100%; height:100%; object-fit:cover; }
.project-gallery-stage::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.06) 100%); }
.project-gallery-title { position:absolute; left:32px; right:32px; bottom:58px; z-index:7; color:#fff; font-family:'Inter',sans-serif; font-size:clamp(28px,4vw,58px); line-height:.95; font-weight:900; letter-spacing:-.04em; text-transform:uppercase; text-shadow:0 3px 20px rgba(0,0,0,.45); pointer-events:none; }
.project-gallery-meta { position:absolute; left:32px; bottom:25px; z-index:7; color:rgba(255,255,255,.7); font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.25em; text-transform:uppercase; pointer-events:none; }
.project-gallery-dots { position:absolute; left:50%; bottom:26px; z-index:8; transform:translateX(-50%); display:flex; align-items:center; gap:7px; }
.project-gallery-dot { width:7px; height:7px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.46); transition:width .3s ease,background .3s ease; }
.project-gallery-dot.is-active { width:28px; background:var(--gold); }
.project-gallery-counter { position:absolute; right:28px; bottom:25px; z-index:8; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.22em; color:rgba(255,255,255,.65); }
.project-gallery-arrow { position:absolute; top:50%; z-index:9; width:44px; height:44px; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.35); color:#fff; font-size:30px; line-height:1; backdrop-filter:blur(8px); opacity:0; transition:opacity .25s ease,background .25s ease,color .25s ease,border-color .25s ease; }
.project-gallery-arrow { display:none; }
.project-gallery-arrow:hover { background:var(--gold); border-color:var(--gold); color:#0d0d0d; }
.project-gallery-prev { left:18px; } .project-gallery-next { right:18px; }
.project-detail-info { padding:34px 34px 38px; background:#111; }
.project-detail-kicker { color:var(--gold); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.3em; text-transform:uppercase; }
.project-detail-description { margin-top:16px; max-width:850px; color:rgba(255,255,255,.68); font-size:14px; line-height:1.8; }
.project-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:28px; border-top:1px solid rgba(255,255,255,.12); }
.project-detail-cell { padding:19px 0 17px; border-bottom:1px solid rgba(255,255,255,.12); } .project-detail-cell:nth-child(odd){margin-right:28px;}
.project-detail-label { color:rgba(255,255,255,.35); font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.22em; text-transform:uppercase; }
.project-detail-value { margin-top:7px; color:rgba(255,255,255,.85); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.project-detail-features { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; } .project-detail-feature { padding:8px 10px; border:1px solid rgba(255,255,255,.11); color:rgba(255,255,255,.55); font-family:'IBM Plex Mono',monospace; font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
@media(max-width:767px){
 .project-modal{padding:14px;align-items:flex-start}.project-modal-shell{max-height:calc(100vh - 28px);margin-top:8px}.project-modal-close{width:38px;height:38px;top:10px;right:10px}.project-gallery-stage{aspect-ratio:4/5}.project-gallery-title{left:20px;right:20px;bottom:55px;font-size:clamp(27px,8vw,42px)}.project-gallery-meta{left:20px;bottom:22px;font-size:8px}.project-gallery-counter{right:17px;bottom:21px;font-size:8px}.project-gallery-dots{bottom:20px}.project-gallery-arrow{width:38px;height:38px;font-size:25px;opacity:1}.project-gallery-prev{left:9px}.project-gallery-next{right:9px}.project-detail-info{padding:26px 20px 28px}.project-detail-grid{grid-template-columns:1fr}.project-detail-cell:nth-child(odd){margin-right:0}.project-detail-description{font-size:13px;line-height:1.7}
}

/* ============================================================
   MOBILE MENU — RIGHT-SIDE SOLID DRAWER
   Replaces the old full-screen blurred overlay.
   ============================================================ */
@media (max-width: 1023px) {
  [data-mobile-nav] {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(78vw, 430px) !important;
    height: 100dvh !important;
    box-sizing: border-box;
    z-index: 1000 !important;

    display: block !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    padding: 118px 28px 42px !important;
    background: #111111 !important;
    background-image: none !important;
    opacity: 1 !important;
    border: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.28);

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(.22, 1, .36, 1),
                visibility 0s linear 0.35s;
    animation: none !important;
  }

  [data-mobile-nav]:not(.hidden) {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.35s cubic-bezier(.22, 1, .36, 1),
                visibility 0s linear 0s;
  }

  /* Keep the actual page visible on the left. No backdrop blur or dim layer. */
  [data-mobile-nav]::before,
  [data-mobile-nav]::after {
    display: none !important;
  }

  [data-mobile-nav] > div {
    min-height: 100%;
  }

  [data-mobile-nav] > div > a,
  [data-mobile-nav] > div > div {
    animation: none !important;
  }

  [data-mobile-nav] .border-t {
    border-top-color: rgba(255, 255, 255, 0.12) !important;
    padding-top: 28px !important;
    margin-top: 4px;
  }

  [data-mobile-nav] a {
    text-decoration: none;
  }

  [data-mobile-nav] .text-gold {
    color: #c8a45b !important;
  }

  [data-mobile-nav] .fc-menu-spacer {
    display: none;
  }
}

@media (max-width: 420px) {
  [data-mobile-nav] {
    width: 78vw !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}

@media (max-width: 1023px) {
  body.mobile-menu-open {
    overflow: hidden;
  }
}

/* Wide (landscape) project photos on phones: show the whole picture instead of cropping the sides.
   Card uses a landscape frame; the gallery shows the full image over a soft blurred backdrop. */
@media (max-width: 767px) {
  .portfolio-card.portfolio-wide-img { aspect-ratio: 16 / 10; }
  .project-gallery-stage.fit-wide .project-gallery-slide { background: #080808; overflow: hidden; }
  .project-gallery-stage.fit-wide .project-gallery-slide::before {
    content: ''; position: absolute; inset: -24px; z-index: 0;
    background: var(--slide-bg) center / cover no-repeat;
    filter: blur(22px) brightness(.55); transform: scale(1.1);
  }
  .project-gallery-stage.fit-wide .project-gallery-slide img {
    position: relative; z-index: 1; object-fit: contain; object-position: center 42%;
  }
}