/* ============================================================
   Divano - Contact Us (2026 redesign)
   Identity kept: #001416 / #3e5252 gradient · accent #E4D3C0
   Fonts: Dosis (display) · Open Sans (body).
   ============================================================ */

.ct { --acc: #E4D3C0; --ink: #eef3f1; --mut: #b9c7c3; }
.ct section { position: relative; }
.ct .wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.ct .ey { display: inline-block; font-family: 'Dosis', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--acc); margin-bottom: 16px; }
.ct h2 { font-family: 'Dosis', sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.7rem); line-height: 1.12; margin: 0 0 16px; }
.ct p { color: var(--mut); line-height: 1.85; font-size: 17px; }

/* reveal variants */
.ct [data-up], .ct [data-left], .ct [data-right], .ct [data-fade] {
  opacity: 0; transition: opacity 0.8s cubic-bezier(.22,1,.36,1), transform 0.8s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0ms); will-change: opacity, transform;
}
.ct [data-up] { transform: translateY(28px); }
.ct [data-left] { transform: translateX(-36px); }
.ct [data-right] { transform: translateX(36px); }
.ct [data-fade] { transform: none; }
.ct .in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ct [data-up], .ct [data-left], .ct [data-right], .ct [data-fade] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 1 · HERO ---------- */
.ct-hero { min-height: 76vh; display: flex; align-items: center; overflow: hidden; }
.ct-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ct-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.ct-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(0,20,22,0.85) 10%, rgba(0,20,22,0.55) 55%, rgba(0,20,22,0.35)); }
.ct-hero .wrap { position: relative; z-index: 2; }
.ct-hero h1 { font-family: 'Dosis', sans-serif; font-weight: 300; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.2rem); line-height: 1.1; margin: 0; max-width: 18ch; text-align: left !important; /* theme centers h1 - keep it stacked with the copy */ }
.ct-hero p { margin-top: 20px; max-width: 46ch; font-size: 18px; line-height: 1.8; color: #dfe8e4; text-align: left; }
.ct-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 30px;
  padding: 16px 38px; border: 1px solid var(--acc); color: var(--acc);
  font-family: 'Dosis', sans-serif; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 14px;
  position: relative; overflow: hidden; isolation: isolate; cursor: pointer; background: none;
  transition: color 0.4s, transform 0.4s;
}
.ct-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--acc); transform: scaleX(0); transform-origin: right; transition: transform 0.45s cubic-bezier(.22,1,.36,1); }
.ct-btn:hover { color: #001416; transform: translateY(-2px); }
.ct-btn:hover::before { transform: scaleX(1); transform-origin: left; }
.ct-btn--solid { background: var(--acc); color: #001416; }
.ct-btn--solid::before { background: #fff; }

/* ---------- 2 · CONTACT CARD (form + info) ---------- */
.ct-main { padding: clamp(70px, 9vw, 120px) 0; }
.ct-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(228,211,192,0.2);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,20,22,0.45);
  display: grid; grid-template-columns: 1.45fr 1fr;
}
@media (max-width: 900px) { .ct-card { grid-template-columns: 1fr; } }

.ct-form { padding: clamp(28px, 4.5vw, 54px); }
.ct-form h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
.ct-form__sub { font-size: 15px; margin-bottom: 30px; }

/* floating-label fields */
.ct-field { position: relative; margin-bottom: 26px; }
.ct-field input, .ct-field textarea, .ct-field select {
  width: 100%; background: none; border: 0; border-bottom: 1px solid rgba(228,211,192,0.3);
  color: #fff; font-family: inherit; font-size: 16px; padding: 14px 34px 10px 0;
  border-radius: 0; transition: border-color 0.35s;
}
.ct-field input:focus, .ct-field textarea:focus, .ct-field select:focus { outline: none; border-bottom-color: var(--acc); }
.ct-field textarea { min-height: 110px; resize: vertical; }
.ct-field label {
  position: absolute; left: 0; top: 14px; color: var(--mut); font-size: 15px;
  pointer-events: none; transition: all 0.3s cubic-bezier(.22,1,.36,1);
}
.ct-field input:focus + label, .ct-field input:not(:placeholder-shown) + label,
.ct-field textarea:focus + label, .ct-field textarea:not(:placeholder-shown) + label,
.ct-field.is-select label {
  top: -12px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acc);
}
/* A <select> has no placeholder to hide a resting label behind, so these two were the
   only labels permanently floated - small, tracked and beige while every other field
   read large and light. Both selects open on an empty option, so let the label rest
   inside exactly like the text fields and float it only once a choice is made. */
.ct-field.is-select label {
  top: 14px;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mut);
}
.ct-field.is-select:focus-within label,
.ct-field.is-select:has(select option:checked:not([value=""])) label {
  top: -12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acc);
}
.ct-field .ico {
  position: absolute; right: 0; top: 14px; color: var(--acc); opacity: 0.75;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), opacity 0.3s;
}
.ct-field .ico svg { width: 18px; height: 18px; display: block; }
.ct-field:focus-within .ico { transform: scale(1.2); opacity: 1; }
.ct-field select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-top: 18px;
}
.ct-field select option { background: #0a1f21; color: #eef3f1; }
.ct-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 560px) { .ct-field--row { grid-template-columns: 1fr; gap: 0; } }

.ct-submit {
  width: 100%; justify-content: center; margin-top: 6px;
}
.ct-form__alt { margin-top: 16px; font-size: 13.5px; color: var(--mut); text-align: center; }
.ct-form__alt a { color: var(--acc); }
.ct-form__ok { display: none; margin-top: 16px; text-align: center; color: var(--acc); font-size: 14.5px; }
.ct-form__ok.show { display: block; }

/* info side */
.ct-info {
  background: rgba(0,20,22,0.45); border-left: 1px solid rgba(228,211,192,0.16);
  padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 18px; justify-content: center;
}
@media (max-width: 900px) { .ct-info { border-left: 0; border-top: 1px solid rgba(228,211,192,0.16); } }
.ct-info__item {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 18px; border: 1px solid rgba(228,211,192,0.14); border-radius: 8px;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), border-color 0.35s, background 0.35s;
}
.ct-info__item:hover { transform: translateY(-4px); border-color: rgba(228,211,192,0.4); background: rgba(255,255,255,0.03); }
.ct-info__ico {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(228,211,192,0.1); color: var(--acc);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), background 0.35s, color 0.35s;
}
.ct-info__item:hover .ct-info__ico { transform: scale(1.12); background: var(--acc); color: #001416; }
.ct-info__ico svg { width: 20px; height: 20px; }
.ct-info__item h4 { font-family: 'Dosis', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em; color: #fff; font-size: 14px; margin: 2px 0 4px; }
.ct-info__item p { font-size: 15px; line-height: 1.6; margin: 0; }
.ct-info__item a { color: var(--ink); transition: color 0.3s; }
.ct-info__item a:hover { color: var(--acc); }

/* ---------- 3 · MAP ---------- */
.ct-map { line-height: 0; }
.ct-map iframe {
  width: 100%; height: clamp(320px, 42vw, 460px); border: 0; display: block;
  filter: grayscale(0.85) invert(0.92) hue-rotate(180deg) saturate(0.4) brightness(0.9);
}

/* ---------- 4 · WHY CONTACT ---------- */
.ct-why { padding: clamp(70px, 9vw, 120px) 0 0; text-align: center; }
.ct-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; }
.ct-why__item {
  padding: 26px 18px; border: 1px solid rgba(228,211,192,0.14); border-radius: 8px;
  font-family: 'Dosis', sans-serif; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; font-size: 15px;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), border-color 0.35s;
}
.ct-why__item:hover { transform: translateY(-4px); border-color: rgba(228,211,192,0.4); }
.ct-why__item .ck { display: block; color: var(--acc); font-size: 22px; margin-bottom: 10px; }
@media (max-width: 860px) { .ct-why__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ct-why__grid { grid-template-columns: 1fr; } }

/* ---------- 5 · WHAT HAPPENS NEXT ---------- */
.ct-steps { padding: clamp(70px, 9vw, 120px) 0; text-align: center; }
.ct-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 46px; position: relative; }
.ct-step { position: relative; padding: 30px 18px; }
.ct-step .n {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(228,211,192,0.45); color: var(--acc);
  font-family: 'Dosis', sans-serif; font-weight: 300; font-size: 26px;
  transition: background 0.35s, color 0.35s, transform 0.35s cubic-bezier(.22,1,.36,1);
}
.ct-step:hover .n { background: var(--acc); color: #001416; transform: scale(1.08); }
.ct-step h4 { font-family: 'Dosis', sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; font-size: 16px; margin: 0 0 6px; }
.ct-step p { font-size: 14.5px; margin: 0; }
/* connector line */
.ct-step:not(:last-child)::after {
  content: ""; position: absolute; top: 60px; left: calc(50% + 44px); width: calc(100% - 88px); height: 1px;
  background: linear-gradient(90deg, rgba(228,211,192,0.4), rgba(228,211,192,0.08));
}
@media (max-width: 860px) {
  .ct-steps__grid { grid-template-columns: 1fr 1fr; }
  .ct-step:not(:last-child)::after { display: none; }
}
/* keep the four steps two-up on phones instead of one tall column */
@media (max-width: 480px) { .ct-steps__grid { grid-template-columns: 1fr 1fr; gap: 12px; } .ct-step { padding: 22px 10px; } }

/* ---------- 6 · CTA ---------- */
.ct-cta { text-align: center; overflow: hidden; padding: clamp(80px, 11vw, 150px) 0; }
.ct-cta__bg { position: absolute; inset: 0; z-index: 0; }
.ct-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.ct-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(0,20,22,0.82), rgba(0,20,22,0.9)); }
.ct-cta .wrap { position: relative; z-index: 2; }
.ct-cta p { max-width: 46ch; margin: 0 auto 8px; }