/* Contact — page-specific CSS.
   Shared pieces (tokens, reset, buttons, page hero, .pad, footer) are in shell.css.
   Ported verbatim from the approved design, contact.html.

   THE FORM CSS IS THE POINT OF THIS FILE, so it is worth saying what it is doing.
   Every selector below is a REAL Gravity Forms class - .gform_wrapper, .gform_fields,
   .gfield, .gfield_label, .ginput_container, .gfield_required, .gform_footer,
   .gform_button. The design mockup hand-wrote markup carrying those class names as a
   visual spec; the live page hands the same markup to Gravity Forms to generate. So this
   stylesheet styles the real form without a line of change, which is exactly why the
   design was authored against GF's own class names rather than invented ones.

   Consequence: Gravity Forms' OWN stylesheets are dequeued (see inc/gravityforms.php).
   The design was drawn with only this CSS in play, and letting gravity-theme.css load
   underneath it would fight it - GF ships its own field spacing, label sizing and input
   styling, and the result matches neither the design nor GF's defaults cleanly.

   The 12-column grid plus .gfield--width-half mirrors GF 2.5+'s native layout grid, so the
   two-up rows are set in the form editor rather than here. */

/* ---------- OVERRIDE OF A SHELL DEFAULT ---------- */
/* shell.css carries About's hero crop; this banner is framed lower, the same as Projects'. */
.page-hero-bg img{object-position:center 58%}

/* ---------- LEFT-ALIGNED SECTION HEADING ---------- */
/* The 56x3px rule again, but left-aligned rather than centred - only this page needs it,
   which is why it is here and not in shell.css. */
.h-rule{font-size:31px;font-weight:700;line-height:1.22;position:relative;padding-bottom:18px;margin-bottom:20px}
.h-rule::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;background:var(--blue)}

/* ---------- GET IN TOUCH BAND ---------- */
.touch{background:var(--bg-gray)}
.touch-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:52px;align-items:start}

/* Contact detail rows - richer than the footer's .contact-row: icon tile, label, value. */
.cdetail{display:flex;gap:16px;padding:19px 0;border-bottom:1px solid var(--line)}
.cdetail:last-child{border-bottom:0;padding-bottom:0}
.cdetail .ic{
  flex:0 0 auto;width:46px;height:46px;border-radius:var(--radius);background:var(--bg-blue);
  display:flex;align-items:center;justify-content:center;
}
.cdetail .ic svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cdetail .lbl{
  font-family:'Poppins';font-weight:600;font-size:11.5px;letter-spacing:1.3px;
  text-transform:uppercase;color:var(--blue);margin-bottom:4px;
}
.cdetail .val{font-size:15.5px;font-weight:500;color:var(--ink);line-height:1.5}
.cdetail .val a:hover{color:var(--blue)}
.cdetail .sub{font-size:13px;color:var(--slate);margin-top:3px}

/* ---------- THE ENQUIRY FORM ---------- */
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:34px 34px 36px;position:relative;overflow:hidden;
}
.form-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue)}
.form-card h2{font-size:25px;font-weight:700;margin-bottom:26px}

.gform_wrapper .gform_fields{
  display:grid;grid-template-columns:repeat(12,1fr);
  column-gap:20px;row-gap:19px;list-style:none;
}
.gform_wrapper .gfield{grid-column:span 12;min-width:0}
.gform_wrapper .gfield--width-half{grid-column:span 6}
.gform_wrapper .gfield_label{
  display:block;font-family:'Poppins';font-weight:600;font-size:12.5px;letter-spacing:.2px;
  color:var(--navy);margin-bottom:7px;
}
.gform_wrapper .gfield_required_asterisk{color:var(--blue);margin-left:3px}
.gform_wrapper .gfield_description{font-size:12.5px;color:var(--slate);margin-top:6px;line-height:1.5}

.gform_wrapper input[type=text],
.gform_wrapper input[type=email],
.gform_wrapper input[type=tel],
.gform_wrapper select,
.gform_wrapper textarea{
  width:100%;font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 14px;transition:border-color .18s ease,box-shadow .18s ease;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder{color:#93a2b0}
.gform_wrapper input[type=text]:focus,
.gform_wrapper input[type=email]:focus,
.gform_wrapper input[type=tel]:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,111,192,.13);
}
.gform_wrapper textarea{min-height:136px;resize:vertical;line-height:1.6}
/* native select arrow replaced with the site's chevron - inline SVG data URI, no extra request */
.gform_wrapper select{
  appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a6fc0' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px;
}

/* File upload - deliberately minimal so it needs no setup beyond adding GF's standard
   "File Upload" field. GF renders .ginput_container_fileupload with a plain file input and a
   .gform_fileupload_rules line listing the accepted types and size limit, both of which are
   set in the field's own settings rather than here. */
.gform_wrapper input[type=file]{width:100%;font-family:'Inter',sans-serif;font-size:13.5px;color:var(--slate)}
.gform_wrapper input[type=file]::file-selector-button{
  font-family:'Poppins';font-weight:600;font-size:12px;letter-spacing:.4px;text-transform:uppercase;
  background:#fff;color:var(--blue);border:1.5px solid var(--blue);border-radius:6px;
  padding:9px 16px;margin-right:14px;cursor:pointer;
}
.gform_wrapper .gform_fileupload_rules{display:block;font-size:12px;color:var(--slate);margin-top:10px}

/* PDPA consent - GF field type "Consent" renders .ginput_container_consent.
   THE FIELD IS NOT ON THE FORM: it was removed at the client's request, because there is no
   privacy policy page for it to link to yet. This styling is kept deliberately so the field
   can be switched back on in Gravity Forms with no CSS work once that page exists. Do not
   delete it as dead code - it is the thing that makes turning consent on a one-click job. */
.gform_wrapper .gfield--type-consent{
  border-top:1px solid var(--line);padding-top:20px;margin-top:2px;
}
.gform_wrapper .ginput_container_consent{display:flex;gap:11px;align-items:flex-start}
.gform_wrapper .ginput_container_consent input[type=checkbox]{
  flex:0 0 auto;width:17px;height:17px;margin-top:2px;accent-color:var(--blue);cursor:pointer;
}
.gform_wrapper .gfield_consent_label{font-size:13.5px;color:var(--slate);line-height:1.55;cursor:pointer}
.gform_wrapper .gfield_consent_label a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

/* submit - same treatment as .btn-blue */
.gform_wrapper .gform_footer{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.gform_wrapper .gform_button{
  display:inline-flex;align-items:center;font-family:'Poppins';font-weight:600;font-size:13px;
  letter-spacing:.6px;text-transform:uppercase;padding:14px 30px;border-radius:6px;cursor:pointer;
  background:var(--blue);color:#fff;border:2px solid var(--blue);transition:.2s;
}
.gform_wrapper .gform_button:hover{background:var(--blue-dark);border-color:var(--blue-dark)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .touch-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:680px){
  .h-rule{font-size:25px}
  .form-card{padding:26px 22px 28px}
  .form-card h2{font-size:22px}
  /* GF: every field is set to Full width on mobile in the form editor's layout grid too, but
     this makes it true regardless of how the form is configured. */
  .gform_wrapper .gfield--width-half{grid-column:span 12}
}

/* ---------- GRAVITY FORMS COMPENSATION ----------
   NOT IN THE DESIGN FILE, and every rule here exists because inc/gravityforms.php dequeues
   Gravity Forms' own stylesheet. GF's CSS was not only cosmetic - it was also hiding things and
   sizing things - so anything non-visual it was doing has to be done here instead. If a future
   GF version adds another such element, it will appear as visible junk on the page rather than
   as an error: re-check the rendered form after a GF update. */

/* The honeypot. GF renders its anti-spam field as a REAL, fully visible .gfield with the label
   "Phone" and the description "This field is for validation purposes and should be left
   unchanged." - it is GF's own stylesheet that hides it. Without this the form grows a ninth
   field that invites people to fill it in, which both looks broken and defeats the honeypot. */
.gform_wrapper .gform_validation_container{display:none !important}

/* The required-fields legend. GF prints a .gform_heading containing
   '"*" indicates required fields'; the approved design has no such line, and the card's own H2
   is the heading. Hidden rather than filtered out so there is one mechanism, not two.
   Nothing is lost semantically: GF also puts aria-required="true" on each required input,
   which is what assistive technology actually uses. */
.gform_wrapper .gform_heading{display:none}

/* The textarea. GF hard-codes rows='10' in its markup, and rows is a PRESENTATIONAL HINT in the
   UA stylesheet - so it behaves like an author height and beats the design's min-height:136px,
   rendering the Message box around 100px too tall. Same class of trap as width/height on <img>
   defeating aspect-ratio, which is documented in shell.css. An explicit height restores the
   design's box; resize:vertical still works. */
.gform_wrapper textarea{height:136px}

/* Validation and submission errors. The design has no error state drawn - it is a static
   mockup, so nothing in it ever failed validation - but a live form does, and with GF's CSS
   gone these would render as unstyled body text with no indication that anything is wrong.
   Deliberately minimal and in the site's own type scale rather than an invented error style. */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message{
  font-size:12.5px;font-weight:500;color:#b3261e;margin-top:6px;line-height:1.5;
}
.gform_wrapper .gfield_error input[type=text],
.gform_wrapper .gfield_error input[type=email],
.gform_wrapper .gfield_error input[type=tel],
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea{border-color:#b3261e}
.gform_wrapper .gform_submission_error{
  font-family:'Poppins';font-weight:600;font-size:15px;color:#b3261e;margin-bottom:18px;
}
/* GF hides this one itself when the field is valid; with its CSS gone the empty container
   would still occupy its margin under every field that has one. */
.gform_wrapper .validation_message--hidden-on-empty:empty{display:none}

/* Screen-reader-only text. GF emits .gform-visually-hidden and .screen-reader-text for things
   like "Show password" and file-upload instructions; unhidden they print as stray words. */
.gform_wrapper .gform-visually-hidden,
.gform_wrapper .screen-reader-text{
  position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* The upload rules line. GF gives that span BOTH .gfield_description and
   .gform_fileupload_rules; the design's mockup span had only the latter, so it inherited
   body's line-height of 1.6 while GF's picks up 1.5 from the description rule. 12px x 0.1 is
   under a pixel per line, which is exactly the 1px the whole page was out by. Inherit, as the
   design did.

   NOTE ON ITS WORDING, which is the one visible difference left on this page: GF writes
   "Accepted file types: ..., Max. file size: 10 MB." where the design drew
   "Accepted: ... - max 10 MB". GF builds that string inline from the field's own settings with
   no filter on it, and it is left alone deliberately: it cannot drift from what the form
   actually accepts, whereas a hard-coded line matching the mockup would start lying the moment
   anyone edits the allowed extensions. It is two words longer, which is why the page is 17px
   taller at 504px - the line wraps there. */
.gform_wrapper .gform_fileupload_rules{line-height:inherit}