/* ============================================================
   Contact — built from Figma Contact us (1:1139).
   The .ab-* hero rules are repeated here on purpose: each page loads exactly one of these stylesheets,
   so this file must stand alone rather than depend on cm-about.css being present.
   Same 1024px content column as every other page.
   ============================================================ */

.ab-wrap { width: 100%; max-width: 1048px; margin-inline: auto; padding-inline: 12px; }

/* red 67x5 divider (1:1177) */
.ab-rule { display: block; width: 67px; height: 5px; margin: 14px 0 0; background: #c71e30; }

/* buttons 1:1179 / 1:1182 — 173x44 and 175x44 */
.ab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; border-radius: 0;
}
.ab-btn-red { background: #c71e30; color: #fdfdfd; }
.ab-btn-red:hover { background: #a91827; color: #fdfdfd; }
.ab-btn-ghost { border-color: #fefdfd; color: #fefdfd; }
.ab-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fefdfd; }

/* ---------- HERO (1:1174, 1920x455) ---------- */
.ab-hero {
  display: flex; align-items: center; min-height: 455px; padding: 40px 0;
  color: #fefdfd;
  /* NO colour wash. Figma 1:621 (and 1:14 on HOME) is a bare <img> with no fill and no overlay — the
     navy is baked into the photo, which already fades to near-black on the left where the text sits.
     Stacking a gradient on top double-darkened it (user report 2026-09-16). Same trap CLAUDE.md already
     records for the CTA band artwork: the asset IS the treatment, never layer a second one over it. */
  background: url("/front/img/cm/hero-inner.webp") center/cover no-repeat;
}
.ab-hero-eyebrow { margin: 0; font-size: 16px; font-weight: 700; color: #c71e30; }   /* 1:1175 */
.ab-hero-title { margin: 6px 0 0; font-size: clamp(30px, 3.6vw, 43.939px); font-weight: 800; line-height: 1.15; }  /* 1:1176 */
/* 1:1178 — Regular 16px here (the About hero uses 14px; this frame really is bigger) */
.ab-hero-text { max-width: 520px; margin: 16px 0 0; font-size: 16px; line-height: 1.7; }
.ab-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* visually hidden but still read by screen readers and still focusable */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- DETAILS + FORM (left x448 w501 · right x970 w502) ---------- */
/* The frame's ground is #f9f9f9 — the same value as the input boxes, which is why in the design the
   fields read as outlines rather than filled boxes. The rest of the site sits on #fcfcfc, so this is
   set on the page's own sections instead of on body. */
.ct-main, .ct-map { background: #f9f9f9; }
.ct-main { padding: 56px 0 8px; }
.ct-grid { display: grid; grid-template-columns: 501fr 502fr; gap: 48px; align-items: start; }
.ct-details { min-width: 0; }
.ct-form-col { min-width: 0; }

/* 1:1163 — Bold 30px with the navy gradient */
.ct-company {
  margin: 0 0 24px; font-size: 30px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(90deg, #000e27, #0b3d73);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ct-list { margin: 0; padding: 0; list-style: none; }
.ct-list li { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.ct-icon { flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; }
/* 1:1150 / 1:1161 / 1:1159 / 1:1160 — Light 16px #363636 */
.ct-text { font-size: 16px; font-weight: 300; line-height: 1.5; color: #363636; text-decoration: none; }
a.ct-text:hover { color: #c71e30; text-decoration: underline; }
.ct-text-sm { font-size: 14px; }        /* 1:1185 */
/* 1:1159 prints the two numbers on one line, separated by a comma — the separator is not a link */
.ct-sep { font-size: 16px; font-weight: 300; line-height: 1.5; color: #363636; }
/* no value in General Setting yet — shown, dimmed, not a link */
.ct-list .is-off { opacity: .5; cursor: default; }
/* 1:1162 — the rule between the address and the rest */
.ct-divider { height: 1px; margin: 20px 0 22px; border: 0; background: #c71e30; opacity: .75; }

/* form boxes 1:1146–1:1148 — 49px tall, 148px for the textarea */
.ct-field { margin-bottom: 14px; }
.ct-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ct-input {
  display: block; width: 100%; min-height: 49px; padding: 12px 14px;
  font-family: inherit; font-size: 16px; font-weight: 300; color: #363636;
  background: #f9f9f9; border: 1px solid #a3a3a3; border-radius: 6px;   /* 1:1146 exactly */
}
.ct-input::placeholder { color: #a3a3a3; opacity: 1; }   /* 1:1151 etc. Light 16px #a3a3a3 */
.ct-input:focus { outline: 0; border-color: #0b3d73; box-shadow: 0 0 0 3px rgba(11, 61, 115, .12); }
.ct-textarea { min-height: 148px; resize: vertical; }

/* 1:1155 + 1:1188 — the file row looks like an input with a small button inside */
.ct-file {
  display: flex; align-items: center; gap: 12px; min-height: 49px; padding: 6px 6px 6px 14px;
  background: #f9f9f9; border: 1px solid #a3a3a3; border-radius: 6px;   /* same box as the inputs (1:1155) */
}
.ct-file-name {
  flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 300; color: #a3a3a3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 1:1190 — Bold 10.08px #011a36 in a 126x31.68 box */
.ct-file-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 126px; height: 32px; margin: 0; padding: 0 10px;
  font-size: 11px; font-weight: 700; color: #011a36; cursor: pointer;
  background: #fff; border: 1px solid #011a36; border-radius: 5px;   /* 1:1189 — 0.72px border, r5 */
}
.ct-file-btn:hover { background: #011a36; color: #fff; }

/* 1:1164/1:1165 — red 154x44, Medium 16px */
.ct-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.ct-submit {
  min-width: 154px; height: 44px; padding: 0 20px;
  font-family: inherit; font-size: 16px; font-weight: 500; color: #fdfdfd;
  cursor: pointer; background: #c71e30; border: 0; border-radius: 4px;
}
.ct-submit:hover { background: #a91827; }
.ct-submit:disabled { cursor: default; }

/* ---------- MAP (1:1172 — 1024x392, soft shadow) ---------- */
/* A live Google map, so the RATIO lives on the box: an iframe has no intrinsic size to scale from. */
.ct-map { padding: 40px 0 56px; }
.ct-map-box {
  aspect-ratio: 1024 / 392; overflow: hidden; border-radius: 4px;
  background: #e9edf2;                                  /* what shows while the map loads */
  box-shadow: 0 4px 15px rgba(0, 0, 0, .1);
}
.ct-map-box iframe, .ct-map-box img { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* ---------- responsive (no mobile frame in Figma — derived from the desktop one) ---------- */
@media (max-width: 991.98px) {
  .ct-grid { grid-template-columns: 1fr; gap: 36px; }
  .ct-company { font-size: 26px; }
}
@media (max-width: 767.98px) {
  .ab-hero { min-height: 380px; }
  .ab-hero-text { max-width: none; }
  .ct-main { padding: 40px 0 8px; }
  .ct-map { padding: 28px 0 40px; }
  /* a 1024x392 strip is a letterbox slit on a phone — give the map some height back */
  .ct-map-box { aspect-ratio: 16 / 9; }
}
@media (max-width: 575.98px) {
  .ab-hero { min-height: 340px; padding: 32px 0; }
  .ab-hero-btns .ab-btn { width: 100%; }
  .ct-company { font-size: 22px; }
  /* First/Last stack rather than squeeze to ~150px each */
  .ct-row-2 { grid-template-columns: 1fr; gap: 14px; }
  .ct-input { font-size: 16px; }         /* keep 16px: iOS zooms the page on a smaller field */
  .ct-actions { justify-content: stretch; }
  .ct-submit { width: 100%; }
  .ct-file { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .ct-file-name { flex: 1 1 100%; }
  .ct-file-btn { width: 100%; }
}