/* English / French enhancement, 23 September 2026.
   Additive layer after site.css and design-20260923.css. */

#inquiry-form { scroll-margin-top: 24px; }
.form-wrap input:not([type="checkbox"]), .form-wrap textarea, .form-wrap select { font-size: 16px; }
.form-wrap label:not(.consent) { font-size: 14px; }

.header-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}
.site-header .primary-nav { margin-right: 0; }
.site-header .language-switch {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0;
  margin: 0;
}
.site-header .language-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .07em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-header .language-switch a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.site-header .language-switch a:hover { color: var(--ink); }
.header-tools .header-cta { margin-left: 0; }
.header-cta > span { flex: 0 0 auto; }
.legal-header .header-tools { margin-left: auto; }
.legal-header .header-tools > .text-link {
  gap: 18px;
  min-height: 44px;
  margin: 0;
}

.hero-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  max-width: 390px;
  margin: 0 0 24px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}
.hero-facts > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-facts > span::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--olive);
}
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  width: 100%;
}
.hero-actions .button { gap: 18px; }
.hero-actions .button > span { flex: 0 0 auto; }
.hero-actions .text-link { gap: 16px; min-height: 44px; }
.hero-meta { padding-top: 27px; }

.configuration-card .villa-price { flex-wrap: wrap; row-gap: 15px; }
.configuration-card .villa-price > span { flex: 0 0 auto; }
.configuration-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  max-width: 100%;
  border-bottom: 1px solid var(--ink);
  padding: 10px 0;
  font-size: 12px;
  line-height: 1.6;
  text-decoration: none;
}
.configuration-cta > span { flex: 0 0 auto; font-size: 19px; }
.configuration-cta:hover { color: var(--olive); border-color: var(--olive); }
.configuration-card { display: flex; flex-direction: column; }
.configuration-card .villa-price { margin-top: auto; }
.configuration-card .villa-facts { margin-bottom: 18px; }

.enquiry-choices { padding: 0; margin: 0 0 27px; border: 0; min-width: 0; }
.enquiry-choices legend { padding: 0; margin-bottom: 12px; font-size: 12px; }
.enquiry-choices > div { display: flex; flex-wrap: wrap; gap: 8px; }
.enquiry-choices button {
  flex: 1 1 100px;
  min-width: 0;
  min-height: 46px;
  border: 1px solid #a7b09e;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
.enquiry-choices button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.enquiry-choices button:hover:not([aria-pressed="true"]) { background: #dfe2d5; }
.mobile-contact[hidden],
.mobile-contact:empty,
.menu-open .mobile-contact,
.modal-open .mobile-contact { display: none !important; }

/* The full kitchen view remains uncropped in both languages and every viewport. */
.design-interiors > .gallery-item > a { height: auto; aspect-ratio: 1672 / 941; }
.design-interiors > .gallery-item img { object-fit: contain; }
.design-interiors > .gallery-item > a:hover img { transform: none; }

@media (min-width: 1101px) and (max-width: 1300px) {
  .site-header { gap: 20px; }
  .site-header .primary-nav { gap: 20px; }
  .header-tools { gap: 12px; }
  .header-cta { gap: 14px; padding-inline: 15px; }
}

@media (max-width: 1100px) {
  .site-header {
    --header-height: 88px;
    height: var(--header-height);
    padding-block: 18px;
    gap: 20px;
  }
  .site-header .primary-nav { display: none; }
  .header-tools { margin-left: auto; gap: 18px; }
  .site-header .language-switch { display: flex; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 10px;
    gap: 6px;
    border: 0;
    background: none;
  }
  .menu-toggle span {
    display: block;
    width: 23px;
    height: 1px;
    background: var(--ink);
    transition: transform .2s;
  }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-nav:not([hidden]) {
    position: absolute;
    top: 88px;
    left: 0;
    right: 0;
    z-index: 9;
    display: grid;
    gap: 0;
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px var(--gutter) 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 25px rgb(30 40 30 / 8%);
  }
  .mobile-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 11px 0;
    font-size: 14px;
    line-height: 1.6;
    text-decoration: none;
  }
  .hero-facts { font-size: 11px; margin-bottom: 20px; }
  .hero-actions { gap: 7px 18px; }
  .hero-actions .button { padding: 12px 16px; }
  .configuration-cta { font-size: 12px; }
  .legal-header { height: auto; min-height: 88px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .hero { grid-template-columns: 47% 53%; }
  .hero h1 { font-size: clamp(40px, 5.3vw, 48px); }
  .hero-copy { padding-top: 18px; padding-right: 24px; }
  .hero-description { font-size: 14px; line-height: 1.65; margin-top: 22px; }
  .hero .eyebrow { margin-bottom: 22px; }
  .hero-visual { min-height: 600px; }
  .hero-meta { margin-top: 20px; padding-top: 16px; }
  .hero-meta > span { font-size: 10px; }
  .hero-meta small { font-size: 11px; }
  .hero-actions .button { font-size: 12px; min-height: 48px; }
  .hero-actions .text-link { font-size: 13px; }
  .configuration-card .villa-price { align-items: flex-start; flex-direction: column; }
  .configuration-card .villa-heading h3 { font-size: 27px; }
  .configuration-card .villa-description { font-size: 14px; min-height: 0; }
  .configuration-card .villa-facts > div { font-size: 12px; }
  .configuration-cta { font-size: 13px; }
  .enquiry-choices button { flex-basis: 110px; }
}

@media (max-width: 600px) {
  :root { --gutter: 22px; }
  html { scroll-padding-top: 24px; }
  body { font-size: 14px; }
  .site-header { --header-height: 76px; padding: 14px 18px; gap: 8px; }
  .site-header .wordmark > span { font-size: 25px; }
  .site-header .wordmark > small { font-size: 6.5px; margin-top: 8px; }
  .header-tools { gap: 6px; }
  .header-tools .header-cta { display: none; }
  .site-header .language-switch a { min-width: 44px; min-height: 44px; font-size: 11px; }
  .mobile-nav:not([hidden]) { top: 76px; max-height: calc(100dvh - 76px); }

  /* A short visual introduction, followed by the decision and enquiry controls. */
  .hero { display: flex; flex-direction: column; gap: 22px; padding: 16px var(--gutter) 30px; }
  .hero-visual { order: -1; width: 100%; height: auto; min-height: 0; max-height: 300px; aspect-ratio: 16 / 9; }
  .hero-visual > img { object-position: center 53%; }
  .hero-image-link { top: 10px; right: 10px; min-height: 44px; padding: 10px 12px; gap: 14px; font-size: 11px; }
  .hero-visual figcaption { left: 13px; right: 13px; bottom: 10px; gap: 8px; font-size: 11px; line-height: 1.5; }
  .hero-copy { display: flex; flex-direction: column; align-items: stretch; padding: 0; }
  .hero .eyebrow { order: 0; margin-bottom: 12px; font-size: 11px; letter-spacing: .14em; gap: 12px; }
  .hero .eyebrow .line { width: 25px; }
  .hero h1 { order: 1; font-size: clamp(36px, 10.6vw, 52px); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
  .hero h1 em { display: block; white-space: nowrap; }
  .hero h1 em::before { content: none; }
  .hero-meta {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 2px;
    border: 0;
    margin: 17px 0 16px;
    padding: 0;
  }
  .hero-meta > span { width: 100%; font-size: 10px; line-height: 1.6; letter-spacing: .12em; }
  .hero-meta strong { font-family: var(--serif); font-size: 26px; line-height: 1.5; }
  .hero-meta small { font-size: 11px; line-height: 1.6; max-width: none; text-align: left; }
  .hero-actions { order: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
  .hero-actions .button { width: 100%; min-height: 52px; padding: 12px 14px; gap: 12px; font-size: 13px; line-height: 1.45; }
  .hero-actions .button > span { font-size: 18px; }
  .hero-actions .text-link { min-height: 52px; font-size: 13px; gap: 0; padding: 10px 0; border-bottom-color: #a2ab95; }
  .hero-actions .text-link > span { display: none; }
  .hero-facts { order: 4; gap: 6px 14px; margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; max-width: none; }
  .hero-description { order: 5; max-width: none; margin: 12px 0 0; font-size: 14px; line-height: 1.7; }

  .project-strip { padding: 18px var(--gutter); gap: 14px 20px; font-size: 11px; line-height: 1.6; letter-spacing: .06em; }
  .section { padding: 58px var(--gutter); }
  .section-heading { margin-bottom: 30px; }
  .section-heading h2, .section-title h2 { font-size: clamp(34px, 10vw, 46px); line-height: 1.14; }
  .eyebrow { font-size: 11px; letter-spacing: .14em; }
  .text-link { min-height: 44px; font-size: 14px; line-height: 1.6; gap: 22px; }
  .button { font-size: 14px; min-height: 48px; }
  .introduction { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .intro-body { padding-top: 0; }
  .intro-body > p:not(.lead),
  .section-heading > p,
  .section-title > p:not(.eyebrow),
  .design-interiors .section-heading > p,
  .design-living-copy > p:not(.eyebrow),
  .configuration-card .villa-description,
  .specification-grid p,
  .dossier-list p,
  .construction-copy > p:not(.eyebrow):not(.small-note),
  .location-copy > p:not(.eyebrow):not(.small-note),
  .faq-list details > p,
  .contact-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.75; }
  .lead { font-size: 25px; line-height: 1.5; }
  .design-interiors { padding-top: 0; padding-bottom: 58px; }
  .design-living-copy .eyebrow { font-size: 11px; }
  .design-living-copy .text-link, .specification-footer > .text-link { font-size: 14px; }
  .design-dossier .section-title > p:not(.eyebrow) { font-size: 14px; line-height: 1.75; }
  .design-living-copy h3 { font-size: 31px; }
  .configuration-section { padding-bottom: 58px; }
  .configuration-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .configuration-card + .configuration-card { padding-top: 34px; border-top: 1px solid var(--line); }
  .configuration-card .villa-heading { margin-top: 23px; }
  .configuration-card .villa-heading .eyebrow { font-size: 11px; line-height: 1.6; letter-spacing: .08em; }
  .configuration-card .villa-heading h3 { font-size: clamp(27px, 7.8vw, 34px); }
  .configuration-card .villa-description { margin-top: 16px; min-height: 0; }
  .configuration-card .villa-facts > div { font-size: 14px; gap: 18px; padding: 7px 0; line-height: 1.65; }
  .configuration-card .villa-facts dt { max-width: 54%; }
  .configuration-card .villa-facts dd { max-width: 46%; }
  .configuration-card .villa-price { align-items: flex-start; gap: 15px 25px; padding-top: 18px; font-size: 12px; }
  .configuration-card .villa-price strong { font-size: 30px; white-space: nowrap; }
  .configuration-cta { font-size: 14px; gap: 18px; }
  .configuration-images { min-height: 0; height: auto; }
  .configuration-images .gallery-item > a, .outdoor-configuration-image .gallery-item > a { height: 270px; }
  .configuration-images figcaption { min-height: 0; }

  .gallery-section { padding: 58px var(--gutter); }
  .gallery-item figcaption,
  .design-interiors .gallery-item figcaption,
  .design-detail-grid .gallery-item figcaption,
  .configuration-images figcaption { font-size: 12px; line-height: 1.6; gap: 3px; }
  .gallery-item figcaption span:last-child,
  .design-interiors .gallery-item figcaption span:last-child,
  .design-detail-grid .gallery-item figcaption span:last-child,
  .configuration-images figcaption span:last-child { font-size: 11px; line-height: 1.5; max-width: none; }
  .image-plus { width: 44px; height: 44px; bottom: 10px; right: 10px; font-size: 20px; }
  .design-detail-grid .design-under-stair-bar > a { height: auto !important; aspect-ratio: 1079 / 807; }
  .design-detail-grid .design-bedroom > a { height: auto !important; aspect-ratio: 1536 / 1024; }
  .design-detail-grid .design-under-stair-bar img, .design-detail-grid .design-bedroom img { object-fit: contain; }
  .specification-grid { gap: 28px; }
  .specification-grid h3 { font-size: 28px; }
  .specification-number, .dossier-list > div > span { font-size: 11px; }
  .design-dossier { padding-top: 0; }
  .dossier-list h3 { font-size: 26px; }
  .construction-section { padding: 58px var(--gutter); }
  .construction-copy h2, .location-copy h2 { font-size: clamp(34px, 10vw, 44px); }
  .construction-copy > .text-link, .location-copy > .text-link { font-size: 14px; }
  .timeline > div { font-size: 13px; gap: 16px; line-height: 1.7; }
  .timeline dt { max-width: 52%; }
  .timeline dd { max-width: 48%; }
  .construction-images { gap: 14px; }
  .construction-images figcaption { font-size: 11px; line-height: 1.65; }
  .faq-section { padding-top: 0; }
  .faq-list summary { font-size: 15px; line-height: 1.6; padding-block: 20px; }
  .faq-list details > p { padding-right: 0; }
  .section-note,
  .configuration-section .section-note,
  .gallery-note,
  .design-detail-section .gallery-note,
  .small-note,
  .construction-copy > p.small-note,
  .location-copy > p.small-note,
  .specification-footer > p { font-size: 12px; line-height: 1.75; }
  .location-copy > .small-note { font-size: 12px !important; }

  .contact-section { padding: 58px var(--gutter); }
  .contact-copy h2 { font-size: clamp(43px, 12vw, 58px); }
  .contact-email { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 26px; overflow-wrap: anywhere; }
  .contact-copy > .text-link { min-height: 44px; font-size: 14px; line-height: 1.6; gap: 16px; }
  .contact-copy > .text-link > span { flex-shrink: 0; }
  .developer-credit { margin-top: 30px; }
  .developer-credit > span { font-size: 11px; }
  .developer-credit > p { font-size: 12px; line-height: 1.75; }
  .developer-credit > a { min-height: 44px; }
  .form-wrap { padding-top: 35px; }
  .form-intro { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 23px; line-height: 1.35; margin-bottom: 25px; }
  .form-intro > span { font-size: 12px; line-height: 1.7; }
  .enquiry-choices { margin-bottom: 26px; }
  .enquiry-choices legend { font-size: 14px; margin-bottom: 12px; }
  .enquiry-choices button { flex-basis: 90px; padding: 11px 10px; min-height: 48px; font-size: 13px; }
  .form-wrap label { font-size: 14px; margin-bottom: 22px; }
  .optional { font-size: 12px; }
  .form-wrap input:not([type="checkbox"]), .form-wrap textarea, .form-wrap select { font-size: 16px; min-height: 48px; padding-block: 12px; }
  .form-wrap textarea { min-height: 126px; }
  .form-wrap .consent { font-size: 12px; line-height: 1.75; min-height: 44px; gap: 12px; }
  .consent input { width: 20px; height: 20px; margin-top: 2px; }
  .submit-button { min-height: 54px; font-size: 14px; }
  .form-footnote { font-size: 12px; line-height: 1.75; }
  .form-status { font-size: 14px; }
  .site-footer { padding: 38px var(--gutter); }
  .site-footer > div { gap: 5px 24px; font-size: 12px; }
  .site-footer > div > a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer > div > span { font-size: 11px; }

  /* The bar occupies space only while present and visible, including safe areas. */
  .mobile-contact {
    position: fixed;
    inset: auto 0 0;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 10px;
    padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 -5px 22px rgb(30 40 30 / 6%);
  }
  .mobile-contact > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--ink);
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
  }
  .mobile-contact .mobile-dossier { background: var(--ink); color: var(--paper); }
  .mobile-contact .mobile-whatsapp { background: transparent; color: var(--ink); }
  .mobile-contact > a > span { flex: 0 0 auto; font-size: 17px; }
  body:has(.mobile-contact:not([hidden]):not(:empty)):not(.menu-open):not(.modal-open) {
    padding-bottom: calc(69px + max(0px, env(safe-area-inset-bottom) - 10px));
  }

  .legal-header { height: auto; min-height: 76px; flex-wrap: wrap; gap: 10px 18px; padding-block: 14px; }
  .legal-header .header-tools { flex: 1 1 auto; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
  .legal-header .header-tools > .text-link { font-size: 12px; gap: 12px; }
  .legal-page { padding: 45px var(--gutter); }
  .legal-page h1 { font-size: clamp(38px, 11vw, 54px); overflow-wrap: anywhere; }
  .legal-page h2 { font-size: 29px; line-height: 1.2; }
  .legal-page p, .legal-page li { font-size: 14px; line-height: 1.8; }
  .legal-page .lead { font-size: 23px; }
  .legal-page a { overflow-wrap: anywhere; }

  #gallery-dialog { padding: 14px; width: calc(100% - 20px); max-height: calc(100dvh - 20px); }
  .dialog-top { gap: 12px; margin-bottom: 12px; align-items: flex-start; }
  #gallery-caption { font-size: 12px; line-height: 1.65; padding-top: 9px; }
  .dialog-top button { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 3px; font-size: 0; }
  .dialog-top button span { font-size: 30px; margin: 0; }
  .dialog-bottom { gap: 8px; margin-top: 10px; }
  .dialog-bottom button { min-height: 44px; padding: 9px 4px; font-size: 13px; }
  .dialog-bottom span { font-size: 12px; }
  #gallery-image { max-height: calc(100dvh - 205px); touch-action: pan-y pinch-zoom; }
}

@media (max-width: 380px) {
  :root { --gutter: 18px; }
  .site-header { padding-inline: 16px; }
  .site-header .wordmark > span { font-size: 22px; }
  .site-header .wordmark > small { font-size: 6px; }
  .header-tools { gap: 3px; }
  .hero { gap: 20px; }
  .hero h1 { font-size: 36px; }
  .hero-meta strong { font-size: 25px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { padding-inline: 12px; gap: 8px; }
  .hero-actions .text-link { font-size: 12px; }
  .hero-image-link { font-size: 11px; }
  .hero-visual figcaption { font-size: 11px; flex-direction: column; gap: 0; }
  .configuration-card .villa-price { flex-direction: column; }
  .configuration-images .gallery-item > a, .outdoor-configuration-image .gallery-item > a { height: 230px; }
  .spa-configuration-images { gap: 10px; }
  .contact-email { font-size: 24px; }
  .mobile-contact { gap: 8px; padding-inline: 12px; }
  .mobile-contact > a { padding-inline: 9px; gap: 6px; font-size: 12px; }
  .mobile-contact > a > span { font-size: 16px; }
  .legal-header .header-tools { column-gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-toggle span { transition: none; }
}

@media print {
  .header-tools, .hero-actions, .enquiry-choices, .mobile-contact { display: none !important; }
  body:has(.mobile-contact:not([hidden]):not(:empty)) { padding-bottom: 0; }
}
