/* Harris Thermal — V2 form family (Wave 5).
   /contact-us/, /get-a-quote/, /employment-application/

   NEW SHEET, not extracted from V1. The V1 pages rendered their forms through
   the HappyForms plugin stylesheet (happyforms-upgrade/bundles/css/frontend.css)
   plus ~200 generated CSS custom properties per page. None of that is carried
   forward, so the V2 forms need styling of their own. Nothing here is loaded by
   any other page: this sheet is referenced only by the three form pages via
   `familyCss`, so it cannot affect CP-1/CP-2 parity anywhere else.

   Everything below is built from the existing design tokens (tokens.css) and
   reuses the family conventions the rest of the site already establishes -
   --ht-radius corners, --ht-line borders, the --ht-blue-bright accent, the
   920px/700px breakpoints, and .px-btn button shapes copied from the interior
   family so the submit control matches every other CTA on the site.

   ACCESSIBILITY. Requiredness is carried by the native `required` attribute on
   every control; the red asterisk is presentation ONLY and is announced through
   a visually-hidden "(required)" span, never by colour alone. Focus is always
   visible. Labels are never collapsed into placeholders. */

/* ------------------------------------------------------------- photo hero
   WAVE 6.6, CHANGE 7B. /contact-us/ moved onto layouts/page.njk and the
   established V2 photo hero. base.njk loads exactly ONE family sheet per page,
   so the hero component has to be reachable from the sheet this page already
   loads.

   These rules are the EXISTING component, copied byte-for-byte from
   page-interior.css - same min-height, same overlay gradient, same eyebrow,
   same type scale, same fluid behaviour. Nothing here is a new hero design.
   That is the pattern this project already uses: the identical .px-hero block
   is carried by page-interior, page-product, page-industry, page-nuclear and
   page-industries-served (all five are byte-identical today), because a family
   sheet has to be self-sufficient. Hoisting the component into chrome.css
   instead would put it on all 201 pages and move CP-2's pixel baseline on the
   18 oracle-compared pages - a global hero refactor this change is explicitly
   not permitted to make.

   Only .px-ctas / .px-btn are omitted: this hero declares no buttons, by
   approved instruction, and layouts/page.njk now emits the CTA row only when a
   page declares one.

   NOTHING IS ADDED to the hero system. This sheet carries the shared component
   verbatim and no modifier of any kind: /contact-us/ renders the same hero as
   /capabilities/, at the same height and the same measure. (A `.px-hero.is-compact`
   modifier briefly lived at the end of this file; see the note below it.) */
.px-hero .ht-wrap{width:100%}
.px-hero{position:relative;min-height:520px;display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate}
.px-hero .bg{position:absolute;inset:0;background:var(--px-hero-bg) center/cover no-repeat;z-index:-2;transform:scale(1.04);animation:px-kb 16s ease-in-out infinite alternate}
@keyframes px-kb{from{transform:scale(1.04)}to{transform:scale(1.1)}}
.px-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(2,26,71,.93) 0%,rgba(2,26,71,.74) 45%,rgba(2,26,71,.28) 100%);z-index:-1}
.px-hero-inner{padding:96px 0;max-width:680px}
.px-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9dc1f5;background:rgba(29,111,209,.18);border:1px solid rgba(157,193,245,.35);padding:7px 16px;border-radius:999px;margin-bottom:22px}
.px-hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin-bottom:18px}
.px-hero h1 em{font-style:normal;color:#7db4f7}
.px-hero p.lead{font-size:1.12rem;color:#d5e0f2;max-width:560px;margin-bottom:32px}
@media(prefers-reduced-motion:reduce){.px-hero .bg{animation:none}}

/* WAVE 6.6 OWNER REVIEW, 2026-09-01: the `.px-hero.is-compact` modifier that
   lived here is DELETED, not disabled. It gave /contact-us/ a 320px hero with a
   720px measure; on owner review that shorter treatment made Contact read as a
   different design system beside the standard commercial pages. Contact now uses
   the unmodified shared `.px-hero` above, so the modifier had no remaining user
   and removing it leaves one fewer hero variant to maintain. The only reason a
   copy of the hero component lives in this sheet at all is that base.njk loads
   exactly one family stylesheet per page - see the note above. */

/* ---------------------------------------------------------------- page shell */
.ht-formpage{padding:56px 0 72px;font-family:var(--ht-font);color:var(--ht-ink);line-height:1.65}
.ht-formpage *{box-sizing:border-box}
.ht-formpage .ht-lede{max-width:70ch;margin:0 0 32px;font-size:1.06rem;color:var(--ht-muted)}
.ht-formpage .ht-lede strong{color:var(--ht-navy);font-weight:700}
@media(max-width:700px){.ht-formpage{padding:36px 0 52px}}

/* ------------------------------------------------- contact two-column layout */
.ht-form-layout{display:grid;grid-template-columns:1fr 1.45fr;gap:52px;align-items:start}
@media(max-width:920px){.ht-form-layout{grid-template-columns:1fr;gap:36px}}

.ht-aside{background:var(--ht-bg-soft);border:1px solid var(--ht-line);border-radius:var(--ht-radius);padding:28px 26px}
.ht-aside h2{font-size:1.1rem;font-weight:800;color:var(--ht-navy);margin:0 0 14px;letter-spacing:-.01em}
.ht-aside address{font-style:normal;color:var(--ht-muted);margin:0 0 18px;line-height:1.75}
.ht-aside .ht-contact-line{display:block;color:var(--ht-muted)}
.ht-aside .ht-contact-line b{color:var(--ht-navy);font-weight:700}
.ht-aside a{color:var(--ht-blue);text-decoration:none}
.ht-aside a:hover{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------------------------- the form */
.ht-form{max-width:100%}
.ht-form + .ht-form{margin-top:44px}

/* Field rows. Two columns on desktop where fields naturally pair, one on mobile.
   A field opts out of pairing with .is-full. */
.ht-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.ht-grid .is-full{grid-column:1/-1}
@media(max-width:700px){.ht-grid{grid-template-columns:1fr;gap:18px}.ht-grid .is-full{grid-column:auto}}

.ht-field{display:flex;flex-direction:column;min-width:0}
.ht-field label{font-size:.9rem;font-weight:700;color:var(--ht-navy);margin-bottom:7px;line-height:1.4}
.ht-field .ht-opt{font-weight:500;color:var(--ht-muted)}
/* Presentation only - the accessible name carries "(required)" in .ht-sr. */
.ht-req{color:#c0392b;margin-left:2px}

/* Controls */
.ht-form input[type="text"],
.ht-form input[type="email"],
.ht-form input[type="tel"],
.ht-form input[type="url"],
.ht-form input[type="date"],
.ht-form input[type="file"],
.ht-form select,
.ht-form textarea{
  width:100%;font:inherit;font-size:.97rem;color:var(--ht-ink);background:#fff;
  border:1px solid var(--ht-line);border-radius:9px;padding:12px 14px;
  transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
.ht-form textarea{min-height:150px;resize:vertical;line-height:1.6}
.ht-form select{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%235a6577" d="M7 10l5 5 5-5z"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;padding-right:42px}
.ht-form input::placeholder,.ht-form textarea::placeholder{color:#9aa4b4}
.ht-form input:hover,.ht-form select:hover,.ht-form textarea:hover{border-color:#c3cddd}
.ht-form input:focus-visible,.ht-form select:focus-visible,.ht-form textarea:focus-visible,
.ht-form button:focus-visible,.ht-form a:focus-visible{
  outline:2px solid var(--ht-blue-bright);outline-offset:2px;border-color:var(--ht-blue-bright)}
/* Native validation styling, applied only after the field has been interacted
   with so an untouched form is never shown as an error state. */
.ht-form input:user-invalid,.ht-form select:user-invalid,.ht-form textarea:user-invalid{border-color:#c0392b}

/* File input - the native control, styled to match without hiding it. */
.ht-form input[type="file"]{padding:10px 12px;background:var(--ht-bg-soft);cursor:pointer}
.ht-form input[type="file"]::file-selector-button{
  font:inherit;font-size:.88rem;font-weight:700;color:#fff;background:var(--ht-blue-bright);
  border:0;border-radius:7px;padding:9px 16px;margin-right:14px;cursor:pointer}
.ht-form input[type="file"]::file-selector-button:hover{background:#2b7fe3}

/* Helper text, tied to its control with aria-describedby. */
.ht-help{font-size:.85rem;color:var(--ht-muted);margin-top:7px;line-height:1.5}

/* ------------------------------------------------- grouped radios / checkboxes */
.ht-fieldset{border:0;margin:0;padding:0;min-width:0}
.ht-fieldset legend{font-size:.9rem;font-weight:700;color:var(--ht-navy);padding:0;margin-bottom:9px;line-height:1.4}
.ht-choices{display:flex;flex-wrap:wrap;gap:10px 22px}
.ht-choices.is-stacked{flex-direction:column;gap:10px}
.ht-choice{display:flex;align-items:flex-start;gap:9px;font-size:.95rem;color:var(--ht-ink);line-height:1.45}
.ht-choice input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--ht-blue-bright);cursor:pointer}
.ht-choice label,.ht-choice span{cursor:pointer;font-weight:500;color:var(--ht-ink);margin:0}

/* --------------------------------------------------------- employment sections */
.ht-section{margin:0 0 40px;padding:0 0 4px}
.ht-section > h2{font-size:1.02rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ht-navy);margin:0 0 6px;padding-bottom:12px;border-bottom:2px solid var(--ht-line)}
.ht-section > .ht-section-note{font-size:.92rem;color:var(--ht-muted);margin:14px 0 20px;max-width:78ch}
.ht-section > .ht-grid,.ht-section > .ht-fieldset,.ht-section > .ht-stack{margin-top:20px}
.ht-subsection{margin-top:26px}
.ht-subsection > h3{font-size:.95rem;font-weight:800;color:var(--ht-navy);margin:0 0 14px;letter-spacing:-.01em}
.ht-stack{display:flex;flex-direction:column;gap:20px}

/* EEO / instructional callout */
.ht-notice{background:var(--ht-bg-soft);border-left:3px solid var(--ht-blue-bright);
  border-radius:0 9px 9px 0;padding:18px 22px;margin:0 0 32px;font-size:.92rem;color:var(--ht-muted);line-height:1.6}
.ht-notice strong{color:var(--ht-navy);font-weight:700}

/* Applicant Statement - long legal prose, kept readable. */
.ht-statement{background:#fff;border:1px solid var(--ht-line);border-radius:var(--ht-radius);
  padding:26px 28px;margin:0 0 24px;font-size:.93rem;line-height:1.7;color:var(--ht-muted);max-width:82ch}
.ht-statement p{margin:0}
@media(max-width:700px){.ht-statement{padding:20px 18px}}

/* ------------------------------------------------------------------- actions */
.ht-actions{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.ht-form button[type="submit"]{
  display:inline-block;font:inherit;font-weight:700;font-size:1rem;padding:15px 34px;border:0;
  border-radius:9px;background:var(--ht-blue-bright);color:#fff;cursor:pointer;
  box-shadow:0 6px 20px rgba(29,111,209,.45);transition:transform .15s,background .15s}
.ht-form button[type="submit"]:hover{background:#2b7fe3;transform:translateY(-2px)}
.ht-actions .ht-actions-note{font-size:.86rem;color:var(--ht-muted);max-width:46ch}

/* --------------------------------------------------------- honeypot (spam trap)
   Removed from the accessibility tree AND from tab order, so it is invisible to
   screen readers and keyboard users while remaining a real, fillable input for
   a naive bot. Never display:none - some bots skip hidden fields. */
.ht-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* Visually-hidden text that MUST stay in the accessibility tree. */
.ht-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ------------------------------------------------------- directions (no-JS) */
.ht-directions{margin-top:40px;background:var(--ht-bg-soft);border:1px solid var(--ht-line);
  border-radius:var(--ht-radius);padding:26px 26px 28px}
.ht-directions h2{font-size:1.05rem;font-weight:800;color:var(--ht-navy);margin:0 0 8px;letter-spacing:-.01em}
.ht-directions p{font-size:.92rem;color:var(--ht-muted);margin:0 0 18px;max-width:60ch}
.ht-directions .ht-dir-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.ht-directions .ht-field{flex:1 1 260px}
.ht-directions button{
  font:inherit;font-weight:700;font-size:.95rem;padding:12px 24px;border:0;border-radius:9px;
  background:var(--ht-navy);color:#fff;cursor:pointer;transition:background .15s}
.ht-directions button:hover{background:var(--ht-blue)}
.ht-directions button:focus-visible{outline:2px solid var(--ht-blue-bright);outline-offset:2px}
.ht-directions .ht-dir-alt{margin:16px 0 0;font-size:.9rem}