/* Contact page (page-contact-us.html), "the calling card" (Raouf 2026-10-14: "like Armadillo", then "too messy of words, it lost
   the sense of art"). Type, whitespace and one photograph carry it (2026 luxury editorial practice): the showroom with one line on
   it, three columns (Visit, Call, Write) with a small label and the essentials in large type, a narrow two-step enquiry, one line
   of services and the questions folded. Fluent Forms prints its own stylesheet for the form controls. */

.contact { max-width: none; margin: 0; padding: 0 0 var(--sp-9, 96px); }

/* ---------- the banner: the showroom, one line on it ---------- */
.contact-top { position: relative; isolation: isolate; height: clamp(360px, 64svh, 700px); overflow: hidden; display: grid; align-items: end; }
.contact-hero, .contact-hero picture, .contact-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.contact-hero { z-index: -1; }
.contact-hero-img { object-fit: cover; object-position: 50% 22%; }
.contact-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c-photo-shade) 62%, transparent) 0, color-mix(in srgb, var(--c-photo-shade) 10%, transparent) 34%,
    color-mix(in srgb, var(--c-photo-shade) 20%, transparent) 60%, color-mix(in srgb, var(--c-photo-shade) 70%, transparent) 100%); }
.contact-title { margin: 0; padding: 0 var(--gutter, 16px) clamp(32px, 6vw, 72px); max-width: var(--page-max, 1440px); width: 100%; margin-inline: auto; box-sizing: border-box;
  color: var(--c-on-photo); font-size: clamp(2.5rem, 7vw, 6rem); line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance;
  text-shadow: 0 2px 24px color-mix(in srgb, var(--c-photo-shade) 45%, transparent); }
@media (max-width: 699px) { .contact-top { height: clamp(340px, 58svh, 480px); } .contact-hero-img { object-position: 50% 35%; } }

/* ---------- the calling card ---------- */
.visit-card.is-card { max-width: var(--page-max, 1440px); margin: 0 auto; padding: clamp(56px, 9vw, 120px) var(--gutter, 16px) 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7, 48px); background: none; box-shadow: none; border: 0; }
@media (min-width: 900px) { .visit-card.is-card { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8, 72px); } }
.cc-col { border-top: 1px solid var(--c-text); padding-top: var(--sp-4, 16px); min-width: 0; }
.cc-label { margin: 0 0 var(--sp-5, 24px); color: var(--c-muted); font: 500 0.8125rem / 1 var(--font-ui); letter-spacing: 0.16em; }
.cc-big { margin: 0; font: 400 clamp(1.5rem, 2.4vw, 2.125rem) / 1.2 var(--font-display); letter-spacing: -0.005em; }
.cc-big a { color: var(--c-text); text-decoration: none; background: linear-gradient(var(--c-accent), var(--c-accent)) 0 100% / 0 1.5px no-repeat; transition: background-size 0.45s cubic-bezier(0.6, 0, 0.2, 1); }
.cc-big a:hover, .cc-big a:focus-visible { background-size: 100% 1.5px; }
.cc-mail { font-size: clamp(1.25rem, 1.9vw, 1.625rem); overflow-wrap: anywhere; }
.cc-second { margin-top: var(--sp-4, 16px); }
.cc-note { margin: var(--sp-2, 8px) 0 0; color: var(--c-muted); font: 400 var(--fs-ui, 0.9375rem) / 1.5 var(--font-ui); }
.cc-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5, 24px); margin: var(--sp-4, 16px) 0 0; }
/* the directions link keeps class="sarabi-directions" alone (the live Google Ads conversion matches it); drawn as a quiet link here */
.visit-card.is-card a.sarabi-directions, .cc-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; background: none; border: 0;
  color: var(--c-text); font: 500 var(--fs-ui, 0.9375rem) / 1.2 var(--font-ui); text-decoration: underline; text-decoration-color: var(--c-accent);
  text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.visit-card.is-card a.sarabi-directions:hover, .cc-link:hover { text-decoration-thickness: 2.5px; background: none; color: var(--c-text); }
.visit-card.is-card .visit-map { margin: 0; }

/* ---------- the enquiry: one narrow column ---------- */
.contact .enquire-form { max-width: 40rem; margin: clamp(80px, 11vw, 140px) auto 0; padding: 0 var(--gutter, 16px); }
.contact .enquire-form > h2 { margin: 0 0 var(--sp-6, 32px); font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; text-align: center; }

/* the two steps (contact-steps.js) */
.cs-progress { position: relative; margin: 0 0 var(--sp-7, 48px); }
.cs-progress ol { list-style: none; display: flex; justify-content: space-between; margin: 0; padding: 0 0 var(--sp-3, 12px); }
.cs-progress li { display: inline-flex; align-items: center; gap: 10px; color: var(--c-muted); font: 500 0.8125rem / 1 var(--font-ui); letter-spacing: 0.14em; transition: color 0.4s ease; }
.cs-progress li.is-on { color: var(--c-text); }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color 0.4s ease; }
.cs-progress li.is-on .cs-dot { background: currentColor; }
.cs-progress::before, .cs-thread { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--c-rule); }
.cs-thread { height: 2px; bottom: -0.5px; background: var(--c-accent); transform: scaleX(0.5); transform-origin: left; transition: transform 0.9s cubic-bezier(0.65, 0, 0.15, 1); }
.cs-progress.is-two .cs-thread { transform: scaleX(1); }
.cs-count { position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0; margin: 0; color: var(--c-muted); font: 400 var(--fs-small, 0.8125rem) / 1 var(--font-ui); white-space: nowrap; }
.cs-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.cs-step[hidden] { display: none; }
.cs-step.is-entering { animation: cs-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.contact .enquire-form { overflow-x: clip; }
@keyframes cs-in { from { opacity: 0; transform: translateX(28px); clip-path: inset(0 0 0 6%); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.cs-title { display: block; padding: 0; margin: 0 0 var(--sp-5, 24px); font: 400 clamp(1.375rem, 2.2vw, 1.75rem) / 1.2 var(--font-display); }
.cs-title:focus { outline: none; }
.cs-title:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 4px; }
.cs-more { margin-top: var(--sp-5, 24px); border-top: 1px solid var(--c-rule); }
.cs-more > summary { display: flex; align-items: center; gap: var(--sp-2, 8px); min-height: 52px; cursor: pointer; list-style: none; font: 500 var(--fs-ui, 0.9375rem) / 1 var(--font-ui); }
.cs-more > summary::-webkit-details-marker { display: none; }
.cs-more > summary span { color: var(--c-muted); font-weight: 400; }
.cs-more > summary::after { content: ""; width: 11px; height: 11px; margin-left: auto;
  background: linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat; transition: transform 0.35s ease; }
.cs-more[open] > summary::after { transform: rotate(45deg); }
.cs-more > summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.cs-more .enq-opt-head { display: none; }   /* the summary says it */
.cs-nav { margin-top: var(--sp-6, 32px); }
.cs-nav .btn { min-height: 52px; padding-inline: var(--sp-6, 32px); }
.cs-back { margin-right: var(--sp-4, 16px); min-height: 52px; padding: 0 var(--sp-4, 16px); background: none; border: 1px solid var(--c-field); color: var(--c-text);
  font: 500 var(--fs-ui, 0.9375rem) / 1 var(--font-ui); cursor: pointer; }
.cs-back:hover { border-color: var(--c-text); }
.cs-back:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.contact .ff_submit_btn_wrapper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3, 12px); }
@media (prefers-reduced-motion: reduce) { .cs-step.is-entering { animation: none; } .cs-thread { transition: none; } }
html:is([data-motion="none"], [data-motion="reduced"]) .cs-step.is-entering { animation: none; }

/* quiet underlined fields */
.contact .frm-fluent-form .ff-el-form-control { border: 0; border-bottom: 1px solid var(--c-field); border-radius: 0; background: transparent; padding-inline: 0; color: var(--c-text); }
.contact .frm-fluent-form .ff-el-form-control::placeholder { color: var(--c-muted); opacity: 1; }   /* the fields are transparent: their text follows the scheme (dark mode contrast, 2026-10-14) */
.contact .frm-fluent-form .ff-el-form-control:focus { border-bottom-color: var(--c-text); box-shadow: 0 1px 0 0 var(--c-text); outline: none; }
.contact .frm-fluent-form textarea.ff-el-form-control { border: 1px solid var(--c-field); padding: 12px; min-height: 120px; }
.contact .frm-fluent-form textarea.ff-el-form-control:focus { border-color: var(--c-text); }
.contact .ff-message-success { border: 0; padding: var(--sp-6, 32px) 0; text-align: center; font: 400 clamp(1.5rem, 2.6vw, 2.125rem) / 1.3 var(--font-display); color: var(--c-text); box-shadow: none; }
.contact .sarabi-form-privacy a { color: var(--c-link); }

/* ---------- one line of services, then the questions folded ---------- */
.contact-more { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2, 8px) var(--sp-6, 32px); max-width: 46rem; margin: clamp(80px, 10vw, 120px) auto 0; padding: var(--sp-5, 24px) var(--gutter, 16px);
  border-block: 1px solid var(--c-rule); }
.contact-more a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-text); font: 400 clamp(1.125rem, 1.6vw, 1.375rem) / 1.2 var(--font-display); text-decoration: none;
  background: linear-gradient(var(--c-accent), var(--c-accent)) 0 calc(100% - 8px) / 0 1.5px no-repeat; transition: background-size 0.45s cubic-bezier(0.6, 0, 0.2, 1); }
.contact-more a:hover, .contact-more a:focus-visible { background-size: 100% 1.5px; }
.contact-faq { max-width: 46rem; margin: clamp(64px, 8vw, 96px) auto 0; padding-inline: var(--gutter, 16px); }
.contact-faq > h2 { margin: 0 0 var(--sp-5, 24px); font-size: clamp(1.5rem, 2.4vw, 2rem); text-align: center; }
.contact-faq details { border-top: 1px solid var(--c-rule); }
.contact-faq details:last-child { border-bottom: 1px solid var(--c-rule); }
.contact-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4, 16px); min-height: 60px; cursor: pointer; list-style: none; }
.contact-faq summary::-webkit-details-marker { display: none; }
.contact-faq summary h3 { margin: 0; font: 400 var(--fs-ui, 1rem) / 1.4 var(--font-ui); }
.contact-faq summary::after { content: ""; width: 11px; height: 11px; flex: none;
  background: linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat; transition: transform 0.35s ease; }
.contact-faq details[open] summary::after { transform: rotate(45deg); }
.contact-faq summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.contact-faq details > p { margin: 0 0 var(--sp-5, 24px); color: var(--c-muted); }

/* Fluent Forms' own column grid, repeated here so the form is laid out before Fluent's stylesheet arrives (that stylesheet no
   longer blocks the first paint; without these the name and phone columns moved when it loaded: slow-3G CLS 0.027). Same values
   as fluent-forms-public.css 6.2.15. */
.frm-fluent-form .ff-t-container { display: flex; gap: 15px; width: 100%; }
.frm-fluent-form .ff-t-cell { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; }
.frm-fluent-form .ff-t-cell:first-of-type { padding-left: 0; }
.frm-fluent-form .ff-t-cell:last-of-type { flex-grow: 1; padding-right: 0; }
.frm-fluent-form .ff-el-input--label { display: inline-block; margin-bottom: 5px; position: relative; }
.frm-fluent-form .ff-el-form-control { display: block; width: 100%; }
@media (max-width: 599px) {
  .frm-fluent-form .ff-t-container { flex-direction: column; gap: 0; }
}

/* the card's labels stay small spaced labels (an older .visit-card h2 rule sized them as headings); the card's links stay left on
   phones (base.css stretches the visit buttons to full width there); the folded questions draw their own rules */
.visit-card.is-card h2.cc-label { margin: 0 0 var(--sp-5, 24px); color: var(--c-muted); font: 500 0.8125rem / 1 var(--font-ui); letter-spacing: 0.16em; }
.visit-card.is-card .cc-links :is(a.sarabi-directions, .cc-link) { flex: 0 0 auto; justify-content: flex-start; }
.contact .contact-faq { border-top: 0; padding-top: 0; }
.visit-card.is-card .cc-big a { text-decoration: none; }