/* ==========================================================================
   Suria Crestway Sdn. Bhd. — Contact page
   Standalone from css/style.css and css/about.css on purpose: this ships as
   its own WordPress plugin, so it carries its own tokens, reset and entrance
   rules rather than depending on either of the others being enqueued.

   Everything is scoped under .sc-contactpage and prefixed .sc- so it can be
   dropped into a shortcode without fighting the active theme.

   IMAGE RULES ARE PREFIXED `.sc-contactpage` ON PURPOSE — don't "simplify"
   them. Page builders ship a blanket image reset at the same specificity as a
   plain component rule. Elementor's is

       .elementor img { border:none; border-radius:0; box-shadow:none;
                        height:auto; max-width:100% }

   which is (0,1,1) — identical to `.sc-cx__media img`. A plugin stylesheet is
   enqueued before the theme's and before Elementor's, so on an equal-
   specificity tie the later sheet wins and the background photograph collapses
   to its intrinsic height. The prefix makes these (0,2,1), which wins on
   specificity and so holds regardless of load order.

   The form is rendered by Formidable Forms, so the field rules below target
   ITS class names (.frm_forms, .frm_form_field, .frm_submit). They are all
   scoped under .sc-cform, so no other Formidable form on the site is touched.
   ========================================================================== */

.sc-contactpage {
  /* Brand */
  --sc-brand:      #262aad;
  --sc-brand-dark: #1c1f8a;
  --sc-brand-tint: #eef0fb;
  --sc-brand-tint2:#e3e7f8;
  --sc-accent:     #f42e39;

  /* Neutrals */
  --sc-navy:  #070a26;
  --sc-ink:   #0e1130;
  --sc-ink-2: #474c6d;
  --sc-ink-3: #7a7f9c;
  --sc-line:  #e3e6f1;
  --sc-paper: #ffffff;

  /* Glass — the homepage recipe (stats bar, header, .sc-why__panel), kept in
     variables here because every panel, card and field on this page uses it. */
  --sc-glass:        rgba(255,255,255,.06);
  --sc-glass-strong: rgba(255,255,255,.1);
  --sc-glass-line:   rgba(255,255,255,.14);

  /* Layout */
  --sc-w: 1340px;

  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.68);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- reset (scoped) ------------------------------------------------------
   Wrapped in :where() so it carries ZERO specificity. Without this the reset
   outranks the component classes below (and would, for example, repaint
   .sc-cx__title with the default heading colour).                          */
.sc-contactpage *,
.sc-contactpage *::before,
.sc-contactpage *::after { box-sizing: border-box; }

:where(.sc-contactpage) :where(h1, h2, h3, p, figure) { margin: 0; }
:where(.sc-contactpage) :where(img) { display: block; max-width: 100%; }
:where(.sc-contactpage) :where(a) { color: inherit; text-decoration: none; }

:where(.sc-contactpage) :where(h1, h2, h3) {
  font-family: "Archivo", "Inter", sans-serif;
  color: #fff;
  font-weight: 600;
}

/* The helpers below (.sc-container, .sc-i, .sc-dot) share their names with
   css/style.css and css/about.css in the sibling plugins. They are PREFIXED
   `.sc-contactpage` on purpose so all three stylesheets can coexist on one
   page: unprefixed, they would be an equal-specificity tie that load order
   decides, and their responsive overrides differ — so whichever loaded last
   would silently restyle another plugin's sections. Don't unprefix them. */

/* 1340px fixed, matching the homepage and the About page. Below that the
   safety inset keeps content off the viewport edge. */
.sc-contactpage .sc-container {
  width: var(--sc-w);
  max-width: 100%;
  margin-inline: auto;
}
@media (max-width: 1379px) {
  .sc-contactpage .sc-container { padding-inline: 24px; }
}

.sc-contactpage .sc-i { width: 1em; height: 1em; fill: none; stroke: currentColor;
        stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
        flex: none; }

.sc-contactpage .sc-dot { color: var(--sc-accent); }


/* ==========================================================================
   SECTION — full-bleed photograph, 100vh, glass on top
   ========================================================================== */
.sc-cx {
  position: relative;
  background: var(--sc-navy);
  min-height: 100vh;
  min-height: 100svh;   /* mobile: discount the browser chrome, no jump on scroll */
  display: flex;
  align-items: center;
  /* Top padding clears the site header, which overlays what follows it. */
  padding: 168px 0 96px;
  isolation: isolate;
}

/* An <img> rather than a CSS background so it can carry alt text, be sized by
   the browser's own heuristics, and be marked fetchpriority=high — this is the
   page's LCP element. */
.sc-cx__media {
  position: absolute; inset: 0; z-index: -2;
  overflow: hidden;
}
.sc-contactpage .sc-cx__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 62%;   /* holds the crane silhouettes, drops empty sky */
}

/* Two layers, the same recipe as the homepage and About heroes: a directional
   wash that keeps the left-hand type readable, plus a vertical pass so the
   header sits on something dark at the top and the section joint reads at the
   bottom. The photograph is a warm night shot and the site is navy, so the
   wash is deliberately heavy — it pulls the whole frame back towards brand. */
.sc-cx__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(98deg,
      rgba(7,10,38,.92) 0%,
      rgba(7,10,38,.82) 26%,
      rgba(8,14,44,.6)  48%,
      rgba(8,16,48,.44) 70%,
      rgba(8,18,52,.38) 100%),
    linear-gradient(to bottom, rgba(7,10,38,.52) 0%, rgba(7,10,38,.04) 36%, rgba(7,10,38,.36) 100%);
}

.sc-cx__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}


/* ==========================================================================
   LEFT — sub-heading, heading, lede, three info cards
   ========================================================================== */
/* Same recipe as .sc-pagehero__sub on the About page: accent dot, 11px,
   uppercase, tracked. Not a bordered pill — the site's sub-headings are dots. */
.sc-cx__sub {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.sc-cx__sub .sc-dot-mark {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sc-accent);
  flex: none;
}

/* Matches .sc-pagehero__title on the About page exactly. */
.sc-cx__title {
  margin-top: 22px;
  font-size: 50px;
  line-height: 1.12;
  font-weight: 500;
  letter-spacing: -0.028em;
  color: #fff;
}
.sc-cx__title strong { font-weight: 700; }

.sc-cx__lede {
  margin-top: 20px;
  max-width: 460px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255,255,255,.68);
}

.sc-cx__cards {
  margin-top: 42px;
  display: grid;
  gap: 14px;
}

/* Glass exactly as .sc-why__panel and the hero stats bar: barely-there white
   fill, hairline border, blur behind, 8px radius. */
.sc-cxcard {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border-radius: 8px;
  background: var(--sc-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--sc-glass-line);
  transition: background-color .24s ease, border-color .24s ease, transform .24s ease;
}
.sc-cxcard:hover {
  background: var(--sc-glass-strong);
  border-color: rgba(255,255,255,.24);
  transform: translateY(-2px);
}
.sc-cxcard__icon {
  width: 42px; height: 42px;
  border-radius: 8px;
  background: var(--sc-glass-strong);
  border: 1px solid var(--sc-glass-line);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
}
.sc-cxcard__icon .sc-i { font-size: 18px; }

.sc-cxcard__body { flex: 1; min-width: 0; }
.sc-cxcard__body h3 {
  font-size: 16.5px;
  letter-spacing: -0.012em;
  color: #fff;
}
.sc-cxcard__body p {
  margin-top: 5px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.68);
  word-break: break-word;
}
.sc-cxcard__body a { transition: color .2s ease; }
.sc-cxcard:hover .sc-cxcard__body a { color: #fff; }

/* A plus, not an arrow. The reference layout uses an arrow here, but no arrow
   icons appear on any control anywhere else on this site — card links use the
   plus. Keeping it consistent matters more than matching the reference glyph. */
.sc-cxcard__plus {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--sc-glass-line);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.sc-cxcard__plus .sc-i { font-size: 16px; }
.sc-cxcard:hover .sc-cxcard__plus {
  background: #fff;
  border-color: #fff;
  color: var(--sc-brand);
}


/* ==========================================================================
   RIGHT — the Formidable form, in a glass panel
   --------------------------------------------------------------------------
   Everything below targets Formidable's own markup, all of it scoped under
   .sc-cform, so any other Formidable form elsewhere on the site keeps whatever
   its Formidable style template gives it.

   Formidable's default "Top" label position is what produces the reference
   look: the field group is the glass box, the label sits inside it at the top,
   and the input below is transparent and borderless. Nothing needs to be
   reconfigured in Formidable for this to work.

   THE `.sc-contactpage .sc-cform .frm_forms` PREFIX IS LOAD-BEARING — don't
   shorten it. Formidable's style template writes its own rules against the
   form wrapper, which carries three classes at once:

       <div class="frm_forms with_frm_style frm_style_formidable-style" …>

   so its field rules land at (0,3,1), e.g.

       .frm_style_formidable-style.with_frm_style input[type=text]

   A plain `.sc-cform input[type="text"]` is (0,2,1) and loses; adding the
   wrapper class puts every rule below one class ahead of whatever Formidable
   emits, so this holds no matter which sheet WordPress prints last. This is
   the same failure that hit the homepage plugin under Elementor — see the note
   at the top of this file.

   Belt and braces only. The cleanest setup is still to set this form's style
   to "None" in Formidable (Form Settings → Styling), which stops it emitting
   those rules at all. readme.txt says so.
   ========================================================================== */
.sc-contactpage .sc-cform {
  padding: 26px;
  border-radius: 8px;
  background: var(--sc-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--sc-glass-line);
}

/* Formidable's own wrappers carry margins and a max-width from its style
   template; neutralise them so the panel padding is the only spacing. */
.sc-contactpage .sc-cform .frm_forms,
.sc-contactpage .sc-cform .frm_form_fields,
.sc-contactpage .sc-cform form { margin: 0; padding: 0; max-width: none; }
.sc-contactpage .sc-cform fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.sc-contactpage .sc-cform legend { padding: 0; }

.sc-contactpage .sc-cform .frm_forms .frm_fields_container { display: grid; gap: 14px; }

/* The field group IS the box. */
.sc-contactpage .sc-cform .frm_forms .frm_form_field {
  margin: 0;
  padding: 12px 16px 11px;
  border-radius: 8px;
  background: var(--sc-glass-strong);
  border: 1px solid var(--sc-glass-line);
  transition: border-color .2s ease, background-color .2s ease;
}
.sc-contactpage .sc-cform .frm_forms .frm_form_field:focus-within {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.34);
}

/* The submit button arrives wrapped in a .frm_form_field of its own — that is
   just how Formidable emits a form whose submit sits in the field list rather
   than after it. Unhandled, the rule above paints a second glass box around
   the white button, which is what shipped in 1.0.0.
   `:has()` is the only way to select a parent by its contents; it has been in
   every current browser since 2023. An older one falls back to showing the
   extra box — cosmetic, not broken. */
.sc-contactpage .sc-cform .frm_forms .frm_form_field:has(> .frm_submit) {
  padding: 0;
  background: none;
  border: 0;
}
.sc-contactpage .sc-cform .frm_forms .frm_form_field:has(> .frm_submit):focus-within {
  background: none;
}

.sc-contactpage .sc-cform .frm_forms .frm_primary_label {
  display: block;
  margin: 0 0 2px;
  padding: 0;
  font-family: "Archivo", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.sc-contactpage .sc-cform .frm_forms .frm_required { color: var(--sc-accent); margin-left: 3px; }

/* Formidable's Name field is two fields: the first keeps the "Name" label, the
   second has its label hidden (`frm_hidden_container`, which Formidable sets to
   visibility:hidden — so the space is reserved and the two inputs stay level).
   The "First" / "Last" captions under each input are `.frm_description`, and
   with the label hidden on the second box they are the only thing telling the
   two apart. So they stay — just quieter, and tight under the input rather
   than floating in the middle of the box. */
.sc-contactpage .sc-cform .frm_forms .frm_description {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(255,255,255,.45);
}

.sc-contactpage .sc-cform .frm_forms input[type="text"],
.sc-contactpage .sc-cform .frm_forms input[type="email"],
.sc-contactpage .sc-cform .frm_forms input[type="tel"],
.sc-contactpage .sc-cform .frm_forms input[type="url"],
.sc-contactpage .sc-cform .frm_forms input[type="number"],
.sc-contactpage .sc-cform .frm_forms select,
.sc-contactpage .sc-cform .frm_forms textarea {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.6;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
}
/* Formidable puts `min-height: var(--field-height)` on every control — 36px on
   its default style. The control is transparent inside the glass box, so those
   36px read as dead space between the label and the text, which is what made
   the boxes look padded out: a plain field measured 78px and one carrying a
   sub-label 100px. Zeroed so the box is sized by its contents. */
.sc-contactpage .sc-cform .frm_forms input,
.sc-contactpage .sc-cform .frm_forms select,
.sc-contactpage .sc-cform .frm_forms textarea { min-height: 0; }

/* The number field's spinner arrows are painted by the browser in its own
   colours and read as a light smudge on the dark panel. */
.sc-contactpage .sc-cform .frm_forms input[type="number"] { -moz-appearance: textfield; }
.sc-contactpage .sc-cform .frm_forms input[type="number"]::-webkit-outer-spin-button,
.sc-contactpage .sc-cform .frm_forms input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   THE ONE PLACE `!important` IS EARNED.

   Formidable's focus rule is

     .frm_style_formidable-style.with_frm_style .form-field
       input:not([type=file]):not([type=range]):not([readonly]):focus

   Each :not() contributes its argument's specificity, so that is three classes
   + three attribute selectors + one pseudo-class + one element = (0,7,1). It
   sets background-color to --bg-color-active, which is #ffffff on the default
   style — so clicking a field painted it solid white, hiding the glass and the
   white-on-white text with it.

   No sane selector reaches (0,8,x). Out-specifying this would mean stacking
   ancestor classes purely to win a number, which is unreadable and breaks the
   moment Formidable adds one of its own. Overriding four declarations with
   !important is the smaller, more honest cost — and it is scoped to
   .sc-cform, so no other form on the site is affected.

   The .frm_focus_field variants are the same rule's non-:focus half, applied
   by Formidable's JS. They need the same treatment or the field flashes white
   while it holds that class.
   -------------------------------------------------------------------------- */
.sc-contactpage .sc-cform .frm_forms input:focus,
.sc-contactpage .sc-cform .frm_forms select:focus,
.sc-contactpage .sc-cform .frm_forms textarea:focus,
.sc-contactpage .sc-cform .frm_forms .frm_focus_field input,
.sc-contactpage .sc-cform .frm_forms .frm_focus_field select,
.sc-contactpage .sc-cform .frm_forms .frm_focus_field textarea {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
  outline: none;
}
.sc-contactpage .sc-cform .frm_forms ::placeholder { color: rgba(255,255,255,.4); opacity: 1; }
/* The dropdown list itself is painted by the OS on a light ground, so the
   option text has to go back to ink or it's white-on-white. */
.sc-contactpage .sc-cform .frm_forms select option { color: var(--sc-ink); }

/* Chrome paints autofilled inputs with an opaque yellow-white background that
   would punch a solid block through the glass. There's no property to disable
   it, so the standard workaround: an inset shadow large enough to cover the
   field, plus text-fill-color for the value. */
.sc-contactpage .sc-cform .frm_forms input:-webkit-autofill,
.sc-contactpage .sc-cform .frm_forms textarea:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 60px rgba(20,26,60,.98) inset;
  caret-color: #fff;
  transition: background-color 9999s;
}

.sc-contactpage .sc-cform .frm_forms textarea { min-height: 190px; resize: vertical; }

/* Submit — the reference's full-width white bar. Matches .sc-btn--light on the
   homepage: white, dark label, 8px radius. */
/* 2px, not 16 — the button's wrapper is a grid item, so the container's 14px
   row gap already sits above it. */
.sc-contactpage .sc-cform .frm_forms .frm_submit { margin: 2px 0 0; }
.sc-contactpage .sc-cform .frm_forms .frm_submit button,
.sc-contactpage .sc-cform .frm_forms .frm_submit input[type="submit"] {
  width: 100%;
  display: block;
  margin: 0;
  padding: 17px 24px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--sc-ink);
  font-family: "Archivo", "Inter", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .2s ease, color .2s ease;
}
.sc-contactpage .sc-cform .frm_forms .frm_submit button:hover,
.sc-contactpage .sc-cform .frm_forms .frm_submit input[type="submit"]:hover {
  background: var(--sc-brand);
  color: #fff;
}

/* Validation and confirmation states. Formidable's defaults are red/green
   panels built for a light page; these keep them legible on the glass. */
.sc-contactpage .sc-cform .frm_forms .frm_error,
.sc-contactpage .sc-cform .frm_forms .frm_error_style {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #ff9aa1;
}
.sc-contactpage .sc-cform .frm_forms .frm_blank_field { border-color: rgba(244,46,57,.6); }
/* The confirmation message replaces the form inside the same wrapper, so it
   needs to look like a panel in its own right rather than bare text. */
.sc-contactpage .sc-cform .frm_message,
.sc-contactpage .sc-cform .frm_forms .frm_message,
.sc-contactpage .sc-cform .frm_forms .frm_success_style {
  margin: 0;
  padding: 20px 22px;
  border-radius: 8px;
  background: var(--sc-glass-strong);
  border: 1px solid var(--sc-glass-line);
  color: #fff;
}
.sc-contactpage .sc-cform .frm_message p { color: rgba(255,255,255,.78); }
/* Formidable's honeypot must stay hidden — a visible one invites bot fills.
   Both the input and the div wrapping it: the anti-spam field ships as an
   input plus a real <label> ("If you are human, leave this field blank"), and
   Formidable's own stylesheet contains no rule for either — hiding just the
   input leaves that sentence sitting under the submit button. */
.sc-contactpage .sc-cform .frm_verify { display: none !important; }
.sc-contactpage .sc-cform .frm_forms div:has(> .frm_verify) { display: none !important; }
.sc-contactpage .sc-cform .frm_screen_reader {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Shown only to logged-in admins, when Formidable is missing or the form ID
   doesn't resolve. Never rendered for visitors. */
.sc-contactpage .sc-cform__notice {
  padding: 22px;
  border-radius: 8px;
  background: rgba(244,46,57,.12);
  border: 1px solid rgba(244,46,57,.4);
  font-size: 13.5px;
  line-height: 1.6;
  color: #fff;
}


/* ==========================================================================
   Responsive — the design width is 1340px; these keep it usable below that
   ========================================================================== */
@media (max-width: 1200px) {
  .sc-cx__title { font-size: 44px; }
  .sc-cx__grid { gap: 40px; }
}

@media (max-width: 980px) {
  /* One column. 100vh is dropped here on purpose: stacked, the content is
     taller than the viewport anyway, so holding a 100vh floor would only add
     dead space below the form. */
  .sc-cx {
    min-height: 0;
    padding: 116px 0 72px;
  }
  .sc-cx__grid { grid-template-columns: 1fr; gap: 44px; }
  .sc-cx__lede { max-width: none; }
  .sc-cx__cards { margin-top: 34px; }
}

@media (max-width: 620px) {
  .sc-cx { padding: 100px 0 60px; }
  .sc-cx__title { font-size: 30px; }
  .sc-cx__cards { gap: 12px; }
  .sc-cxcard { gap: 14px; padding: 15px 16px; }
  /* The plus is decoration — the whole card is the link. At 390px it's the
     first thing to go so the address still fits on two lines. */
  .sc-cxcard__plus { display: none; }
  /* Prefixed to match the base rules above — those carry .sc-contactpage and
     the .frm_forms wrapper for the specificity fight with Formidable, so an
     unprefixed override here would simply never apply. */
  .sc-contactpage .sc-cform { padding: 18px; }
  .sc-contactpage .sc-cform .frm_forms textarea { min-height: 150px; }
}


/* ==========================================================================
   ENTRANCE ANIMATION
   [data-anim] elements rise/fade in as they scroll into view. The resting
   state here is fully VISIBLE — the hidden state only exists under
   .sc-anim-on, which js/contact.js adds. So with JS off, JS broken, or
   IntersectionObserver missing, every element just renders normally.
   Stagger comes from --sc-d, set per element by the same module.

   No `will-change` on any of these: promoting them to their own compositing
   layer stops them painting inside an element that uses backdrop-filter, and
   almost everything on this page is glass. Don't add it.
   ========================================================================== */
.sc-contactpage.sc-anim-on [data-anim] {
  opacity: 0;
}
.sc-contactpage.sc-anim-on [data-anim="up"]    { transform: translateY(22px); }
.sc-contactpage.sc-anim-on [data-anim="left"]  { transform: translateX(-26px); }
.sc-contactpage.sc-anim-on [data-anim="scale"] { transform: scale(.965); }

/* Transition lives on the "in" state only, so applying the hidden state at
   startup can't animate backwards from visible. */
.sc-contactpage.sc-anim-on [data-anim].sc-anim-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .72s cubic-bezier(.22,.61,.36,1) var(--sc-d, 0ms),
    transform .72s cubic-bezier(.22,.61,.36,1) var(--sc-d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .sc-contactpage *, .sc-contactpage *::before, .sc-contactpage *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  /* Never leave anything hidden waiting on a transition that won't run. */
  .sc-contactpage.sc-anim-on [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }
}