/* SALMAST homepage refinement v09
   A cleaner island, a readable editorial story and explicit process links. */

/* Header: centered typography on desktop/tablet, one seamless island. */
@media (min-width: 901px) and (max-width: 1280px) {
  .site-header[data-dynamic-island] {
    top: 12px;
    width: min(1120px, calc(100% - 28px));
    min-height: 66px;
    padding: 7px 9px 7px 18px;
    grid-template-columns: 136px minmax(0, 1fr) auto;
    column-gap: 12px;
  }

  .site-header[data-dynamic-island] .main-nav {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: clamp(13px, 1.7vw, 24px) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  .site-header[data-dynamic-island] .main-nav > a {
    min-height: 44px !important;
    padding-inline: 0 !important;
    justify-content: center !important;
    font-size: clamp(10px, 1vw, 12px) !important;
    letter-spacing: .07em;
    white-space: nowrap;
  }

  .site-header[data-dynamic-island] .header-contact,
  .site-header[data-dynamic-island] .theme-toggle { display: none !important; }
  .site-header[data-dynamic-island] .header-cta {
    display: inline-flex !important;
    min-height: 48px !important;
    padding: 10px 50px 10px 18px !important;
    font-size: 10px !important;
  }
  .site-header[data-dynamic-island] .nav-toggle { display: none !important; }
  .site-header[data-dynamic-island] .header-actions { gap: 7px; }
  .site-header[data-dynamic-island] .lang-dropdown__trigger {
    min-width: 50px;
    min-height: 48px;
    border-color: rgba(253, 244, 227, .25);
    border-radius: 999px;
  }
}

/* On phones the menu grows out of the island instead of becoming a detached panel. */
@media (max-width: 900px) {
  .site-header[data-dynamic-island] { overflow: visible; }
  .site-header[data-dynamic-island] .header-wordmark,
  .site-header[data-dynamic-island] .header-actions { position: relative; z-index: 3; }
  .site-header[data-dynamic-island] .main-nav {
    position: absolute !important;
    z-index: 2 !important;
    inset: -1px -1px auto !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100dvh - 16px);
    padding: 78px 14px 16px !important;
    justify-content: flex-start !important;
    background: rgba(46, 62, 68, .98) !important;
    border: 1px solid rgba(253, 244, 227, .2) !important;
    border-radius: 30px !important;
    box-shadow: 0 18px 58px rgba(0, 0, 0, .3) !important;
    transform: translateY(-8px) scale(.985) !important;
    transform-origin: 50% 0;
  }
  .nav-open .site-header[data-dynamic-island] .main-nav { transform: none !important; }
  .site-header[data-dynamic-island] .main-nav > a {
    min-height: 50px !important;
    border-top: 1px solid rgba(253, 244, 227, .1);
    font-size: clamp(17px, 4.8vw, 22px) !important;
  }
}

/* A fourth proof point and a calmer 4/2/1 responsive rhythm. */
.hero-fact-icon--showroom { --hero-fact-icon: url("assets/icons/lucide/map-pin.svg"); }

@media (min-width: 1101px) {
  .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .hero-facts > div { padding-inline: 20px !important; }
  .hero-facts .hero-fact__title { font-size: clamp(20px, 1.65vw, 27px) !important; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 700px) {
  .hero-facts { grid-template-columns: 1fr !important; }
  .hero-facts > div,
  .hero-facts > div:nth-child(n) { grid-column: 1 / -1 !important; }
}

/* About: one editorial canvas, followed by three clear proof cards. */
.about-preview {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.4vw, 34px) !important;
}

.about-preview > .section-heading {
  grid-column: 1 / 9 !important;
  grid-row: 1 !important;
  margin-bottom: 0 !important;
}

.about-preview .section-heading h2 {
  max-width: 13ch !important;
  font-size: clamp(46px, 5.7vw, 82px) !important;
}

.about-preview > .secondary-btn {
  grid-column: 9 / -1 !important;
  grid-row: 1 !important;
  align-self: end;
  justify-self: end;
  margin: 0 0 8px !important;
}

.about-preview__visual {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  min-height: clamp(470px, 48vw, 680px) !important;
  border-radius: 18px !important;
}

.about-preview__facts {
  position: relative;
  z-index: 3;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px !important;
  margin: clamp(-82px, -6vw, -58px) clamp(18px, 3vw, 44px) 0;
}

.about-preview__facts article {
  min-height: 190px !important;
  padding: 58px 28px 28px !important;
  color: var(--v08-ink);
  background: rgba(253, 244, 227, .96) !important;
  border: 1px solid rgba(46, 62, 68, .14) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .13);
  backdrop-filter: blur(12px);
}

.about-preview__facts article::before { top: 28px !important; left: 28px !important; }
.about-preview__facts strong { font-size: clamp(24px, 2.1vw, 32px) !important; }

@media (max-width: 900px) {
  .about-preview { grid-template-columns: 1fr !important; }
  .about-preview > .section-heading,
  .about-preview > .secondary-btn,
  .about-preview__visual,
  .about-preview__facts {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .about-preview > .secondary-btn { justify-self: start; align-self: auto; order: 4; }
  .about-preview__visual { min-height: clamp(390px, 72vw, 560px) !important; }
  .about-preview__facts { grid-template-columns: 1fr !important; margin: -54px 16px 0 !important; }
  .about-preview__facts article { min-height: 0 !important; }
}

@media (max-width: 600px) {
  .about-preview__facts { margin: 0 !important; }
  .about-preview__facts article { padding: 54px 22px 24px !important; }
  .about-preview__facts article::before { left: 22px !important; }
}

/* Every process node is a real link to the matching expanded FAQ answer. */
.process-card__link {
  color: inherit;
  text-decoration: none;
  outline: none;
}

@media (min-width: 1281px) {
  .process-card__link { position: absolute; inset: 0; display: block; }
  .process-card__link:focus-visible .process-card__icon,
  .process-card__link:hover .process-card__icon {
    color: var(--v08-night);
    background: var(--v08-gold-light);
    border-color: var(--v08-gold-light);
    box-shadow: 0 0 0 9px rgba(181, 147, 87, .08), 0 0 30px rgba(181, 147, 87, .25);
    transform: translate(-50%, -50%) scale(1.07);
  }
}

@media (max-width: 1280px) {
  .process-route__line { display: none !important; }
  .process-journey.process-journey--eight {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    height: auto !important;
    gap: 12px !important;
    background: transparent !important;
    border: 0 !important;
  }
  .process-journey--eight .process-card,
  .process-journey--eight .process-card:nth-of-type(n) {
    display: block !important;
    height: auto !important;
    min-height: 214px !important;
    padding: 0 !important;
    overflow: hidden;
    color: var(--v08-beige) !important;
    background: rgba(46, 62, 68, .76) !important;
    border: 1px solid rgba(253, 244, 227, .15) !important;
    border-radius: 16px !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .process-card__link {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 8px 15px;
    min-height: inherit;
    padding: 26px 22px 24px;
    transition: background-color .25s ease, transform .35s var(--v08-ease), border-color .25s ease;
  }
  .process-card__link::after {
    content: "";
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 18px;
    height: 18px;
    background: var(--v08-gold-light);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .3s var(--v08-ease);
  }
  .process-card__link:hover,
  .process-card__link:focus-visible { background: rgba(181, 147, 87, .12); }
  .process-card__link:hover::after,
  .process-card__link:focus-visible::after { transform: translateX(4px); }
  .process-journey--eight .process-card__icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 52px;
    height: 52px;
    transform: none !important;
  }
  .process-journey--eight .process-card h3,
  .process-journey--eight .process-card p {
    position: static !important;
    grid-column: 2;
    width: auto !important;
    text-align: left !important;
  }
  .process-journey--eight .process-card h3 { font-size: clamp(18px, 1.7vw, 24px) !important; }
  .process-journey--eight .process-card p {
    display: block !important;
    padding-right: 16px;
    font-size: 13px !important;
  }
}

@media (max-width: 900px) {
  .process-journey.process-journey--eight { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 600px) {
  .process-journey.process-journey--eight { grid-template-columns: 1fr !important; }
  .process-journey--eight .process-card,
  .process-journey--eight .process-card:nth-of-type(n) { min-height: 150px !important; }
  .process-card__link { min-height: 150px; padding: 22px 18px; }
}

/* Remove the oversized footer wordmark and return the page to a clean ending. */
.site-footer__inner::after { content: none !important; display: none !important; }
.site-footer__inner { padding-bottom: clamp(54px, 7vw, 88px) !important; }

@media (prefers-reduced-motion: reduce) {
  .process-card__link,
  .process-card__link::after { transition: none !important; animation: none !important; }
}

/* Homepage portfolio is a visual directory: every image opens the matching
   full-project or zone filter in the unified portfolio. */
.portfolio-grid.portfolio-path-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(3, minmax(250px, 1fr)) !important;
  gap: clamp(10px, 1.15vw, 16px) !important;
}

.portfolio-path-grid .portfolio-path-item:nth-child(n) { min-width: 0; min-height: 0; }
.portfolio-path-grid .portfolio-path-item:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
.portfolio-path-grid .portfolio-path-item:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
.portfolio-path-grid .portfolio-path-item:nth-child(3) { grid-column: 8 / 13; grid-row: 2; }
.portfolio-path-grid .portfolio-path-item:nth-child(4) { grid-column: 1 / 5; grid-row: 3; }
.portfolio-path-grid .portfolio-path-item:nth-child(5) { grid-column: 5 / 9; grid-row: 3; }
.portfolio-path-grid .portfolio-path-item:nth-child(6) { grid-column: 9 / 13; grid-row: 3; }

.portfolio-grid.portfolio-path-grid .portfolio-path-item:nth-child(n) .portfolio-card.portfolio-path-card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px !important;
  overflow: hidden;
  color: var(--v08-beige);
  text-decoration: none;
  background: var(--v08-deep);
  border: 1px solid rgba(253, 244, 227, .16);
  border-radius: 10px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .18);
  isolation: isolate;
  transform: translateZ(0);
  transition: transform .5s var(--v08-ease), border-color .3s ease, box-shadow .5s var(--v08-ease);
}

.portfolio-path-card__media {
  position: absolute !important;
  inset: 0;
  display: block;
}

.portfolio-grid.portfolio-path-grid .portfolio-path-card__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  filter: none !important;
  transition: transform 1.1s var(--v08-ease), filter .45s ease;
}

.portfolio-path-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .05) 20%, rgba(0, 0, 0, .26) 58%, rgba(0, 0, 0, .92) 100%),
    linear-gradient(100deg, rgba(0, 0, 0, .25), transparent 52%);
  transition: background-color .35s ease;
}

.portfolio-grid.portfolio-path-grid .portfolio-path-card__body {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: clamp(22px, 2.5vw, 38px) !important;
  pointer-events: none;
}

.portfolio-path-card__body::before,
.portfolio-path-card__body::after { display: none !important; }

.portfolio-path-card__body h3 {
  max-width: 18ch;
  color: var(--v08-beige);
  font-family: var(--font-display, "Source Sans 3", sans-serif);
  font-size: clamp(25px, 2.2vw, 38px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.025em;
}

.portfolio-path-item--projects .portfolio-path-card__body h3 {
  max-width: 12ch;
  font-size: clamp(38px, 4.1vw, 68px);
}

.portfolio-grid.portfolio-path-grid .portfolio-path-card__body > p {
  max-width: 34ch;
  margin: 0;
  color: rgba(253, 244, 227, .75);
  font-size: clamp(11px, .9vw, 13px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.portfolio-path-card__action {
  display: flex;
  width: fit-content;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--v08-gold-light);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.portfolio-path-card__action svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--v08-ease);
}

.portfolio-path-card--wardrobes .portfolio-path-card__media img { object-position: center 38%; }

.portfolio-grid.portfolio-path-grid .portfolio-path-card:hover,
.portfolio-grid.portfolio-path-grid .portfolio-path-card:focus-visible {
  border-color: rgba(181, 147, 87, .75);
  box-shadow: 0 30px 76px rgba(0, 0, 0, .28);
  transform: translateY(-4px);
}

.portfolio-grid.portfolio-path-grid .portfolio-path-card:hover .portfolio-path-card__media img,
.portfolio-grid.portfolio-path-grid .portfolio-path-card:focus-visible .portfolio-path-card__media img {
  filter: none !important;
  transform: scale(1.045);
}

.portfolio-path-card:hover .portfolio-path-card__action svg,
.portfolio-path-card:focus-visible .portfolio-path-card__action svg { transform: translateX(5px); }

.portfolio-grid.portfolio-path-grid .portfolio-path-card:focus-visible {
  outline: 3px solid var(--v08-gold-light);
  outline-offset: 4px;
}

/* Preferred contact method stays visible and directly selectable. */
.contact-preference {
  min-width: 0;
  margin: 0;
  padding: 2px 0 0;
  border: 0;
}

.contact-preference > legend {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: rgba(253, 244, 227, .86);
}

.contact-preference__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.calculator-form .contact-preference__option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.calculator-form .contact-preference__option input[type="radio"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-preference__card {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 12px;
  color: rgba(253, 244, 227, .82);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  background: rgba(253, 244, 227, .055);
  border: 1px solid rgba(253, 244, 227, .18);
  border-radius: 12px;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .3s var(--v08-ease);
}

.contact-preference__icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.contact-preference__icon--whatsapp {
  -webkit-mask-image: url("assets/icons/whatsapp.svg");
  mask-image: url("assets/icons/whatsapp.svg");
}

.contact-preference__icon--telegram {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m21.4 3.4-3 16.3c-.2 1.1-.8 1.4-1.7.9l-4.6-3.4-2.2 2.1c-.2.3-.5.5-.9.5l.3-4.7 8.6-7.8c.4-.3-.1-.5-.6-.2L6.7 13.8l-4.6-1.4c-1-.3-1-1 .2-1.5L20.1 4c.8-.3 1.5.2 1.3-.6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m21.4 3.4-3 16.3c-.2 1.1-.8 1.4-1.7.9l-4.6-3.4-2.2 2.1c-.2.3-.5.5-.9.5l.3-4.7 8.6-7.8c.4-.3-.1-.5-.6-.2L6.7 13.8l-4.6-1.4c-1-.3-1-1 .2-1.5L20.1 4c.8-.3 1.5.2 1.3-.6Z'/%3E%3C/svg%3E");
}

.contact-preference__icon--call {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2h3l1.5 5-2 1.6a15.6 15.6 0 0 0 6.3 6.3l1.6-2 5 1.5v3A4.6 4.6 0 0 1 17.4 22C8.9 22 2 15.1 2 6.6A4.6 4.6 0 0 1 6.6 2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 2h3l1.5 5-2 1.6a15.6 15.6 0 0 0 6.3 6.3l1.6-2 5 1.5v3A4.6 4.6 0 0 1 17.4 22C8.9 22 2 15.1 2 6.6A4.6 4.6 0 0 1 6.6 2Z'/%3E%3C/svg%3E");
}

.contact-preference__option:hover .contact-preference__card { border-color: rgba(181, 147, 87, .58); transform: translateY(-2px); }
.contact-preference__option input:checked + .contact-preference__card {
  color: var(--v08-night);
  background: var(--v08-gold-light);
  border-color: var(--v08-gold-light);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}
.contact-preference__option input:focus-visible + .contact-preference__card {
  outline: 3px solid var(--v08-gold-light);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .portfolio-grid.portfolio-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }
  .portfolio-path-grid .portfolio-path-item:nth-child(n) { grid-column: auto !important; grid-row: auto !important; }
  .portfolio-path-grid .portfolio-path-item:first-child { grid-column: 1 / -1 !important; }
  .portfolio-path-grid .portfolio-path-item:last-child { grid-column: 1 / -1 !important; }
  .portfolio-grid.portfolio-path-grid .portfolio-path-item:first-child .portfolio-card.portfolio-path-card { min-height: 500px !important; }
  .portfolio-grid.portfolio-path-grid .portfolio-path-item:not(:first-child) .portfolio-card.portfolio-path-card { min-height: 330px !important; }
}

@media (max-width: 700px) {
  .portfolio-grid.portfolio-path-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .portfolio-path-grid .portfolio-path-item:first-child,
  .portfolio-path-grid .portfolio-path-item:last-child { grid-column: auto !important; }
  .portfolio-grid.portfolio-path-grid .portfolio-path-item:nth-child(n) .portfolio-card.portfolio-path-card { min-height: 330px !important; }
  .portfolio-path-item--projects .portfolio-path-card__body h3 { font-size: clamp(34px, 10vw, 50px); }
  .portfolio-path-card__action { min-height: 44px; }
  .contact-preference__card { min-height: 56px; gap: 7px; padding-inline: 8px; font-size: 12px; }
  .contact-preference__icon { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-path-card,
  .portfolio-path-card__media img,
  .portfolio-path-card__action svg,
  .contact-preference__card { transition: none !important; }
}