@import url("/ds/styles.css");

/* Page ground is ALWAYS light. Navy is a block colour only. */
html{ -webkit-text-size-adjust:100% }
body[data-theme="light"]{ background:var(--paper-100) }

.wrap{ max-width:var(--measure-page); margin:0 auto; padding:0 var(--gutter-page) }
@media(min-width:900px){ .wrap{ padding:0 var(--gutter-page-lg) } }
.narrow{ max-width:var(--measure-narrow) }

section{ padding:var(--space-10) 0 }
@media(min-width:900px){ section{ padding:var(--space-11) 0 } }
section[data-theme="dark"]{ background:var(--mid-1000); color:var(--text-body) }
section[data-theme="light"]{ background:var(--paper-100) }
section.sunken{ background:var(--paper-200) }

.sector{ height:2px; width:64px; background:var(--flash-500); margin-bottom:var(--space-6) }
.eyebrow{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; color:var(--text-muted); margin:0 0 var(--space-4) }

/* Display voice — recruiting only */
.display-1,.display-2,.display-3{ font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:var(--display-tracking); line-height:var(--display-leading);
  color:var(--text-display); margin:0; text-wrap:balance }
.display-1{ font-size:var(--display-1) }
.display-2{ font-size:var(--display-2) }
.display-3{ font-size:var(--display-3) }

/* Serif voice — client-facing only */
.serif-1,.serif-2,.serif-3{ font-family:var(--font-serif); font-weight:600;
  letter-spacing:var(--serif-tracking); line-height:var(--serif-leading);
  color:var(--text-heading); margin:0; text-wrap:balance }
.serif-1{ font-size:var(--serif-1) }
.serif-2{ font-size:var(--serif-2) }
.serif-3{ font-size:var(--serif-3) }

p{ text-wrap:pretty; max-width:var(--body-measure) }
.lede{ font-size:var(--body-lg); color:var(--text-body) }
.client p,.client li{ font-size:var(--body-lg) }  /* seniors read light, 16px floor */

.livery{ font-family:var(--font-statement); font-variant-numeric:tabular-nums;
  line-height:.82; color:var(--flash-500) }
.data{ font-family:var(--font-data); font-variant-numeric:tabular-nums;
  letter-spacing:var(--data-tracking) }

/* Buttons — no borders, 2px radius, one flash fill per view */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-3);
  font-family:var(--font-sans); font-weight:600; font-size:var(--body-md); line-height:1.1;
  letter-spacing:.01em; padding:11px 18px; border:0; border-radius:var(--radius-xs);
  text-decoration:none; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard) }
.btn:active{ transform:scale(var(--press-scale)) }
.btn-lg{ padding:15px 26px; font-size:var(--body-lg) }
.btn-primary{ background:var(--flash-500); color:#fff }
.btn-primary:hover{ background:var(--flash-600); color:#fff }
.btn-inverse{ background:var(--surface-inverse); color:var(--text-inverse) }
.btn-inverse:hover{ background:var(--paper-200) }
.btn-ghost{ background:transparent; color:var(--text-accent) }
.btn-ghost:hover{ color:var(--text-heading) }

/* Cards — fill, hairline, 2px, quiet two-layer shadow */
.card{ background:var(--surface-card); border:1px solid var(--line-rule);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-card); padding:var(--space-7) }
.grid{ display:grid; gap:var(--space-5) }
@media(min-width:760px){ .g-2{ grid-template-columns:repeat(2,1fr) } .g-3{ grid-template-columns:repeat(3,1fr) } }

/* Ruled rows, not boxes */
.rows{ border-top:1px solid var(--line-hairline) }
.row{ display:grid; gap:var(--space-4); padding:var(--space-6) 0;
  border-bottom:1px solid var(--line-hairline) }
@media(min-width:760px){ .row{ grid-template-columns:88px 1fr } }

/* Header */
header.bar{ position:sticky; top:0; z-index:20; background:var(--paper-100);
  border-bottom:1px solid var(--line-hairline) }
.bar .inner{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-5); padding-top:var(--space-4); padding-bottom:var(--space-4); min-width:0 }
.bar .inner > *{ min-width:0 }
.bar .btn{ flex:none }
.mark{ display:inline-flex; align-items:center; gap:.6em; text-decoration:none }
.mark .name{ font-family:var(--font-display); font-size:22px; line-height:.86;
  letter-spacing:-.015em; text-transform:uppercase; color:var(--mid-900) }
.mark .bar2{ width:2px; height:16px; background:var(--flash-500); flex:none }
.mark .grp{ font-family:var(--font-sans); font-weight:700; font-size:9px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--mid-500) }
nav.links{ display:none; gap:var(--space-6) }
@media(min-width:860px){ nav.links{ display:flex } }
nav.links a{ font-size:var(--body-sm); font-weight:600; color:var(--mid-900); text-decoration:none }
nav.links a:hover{ color:var(--flash-600) }

/* Forms */
.field{ display:block; margin-bottom:var(--space-5) }
.field > label{ display:block; font-weight:600; font-size:var(--body-sm);
  color:var(--text-heading); margin-bottom:var(--space-2) }
.hint{ font-size:var(--body-xs); color:var(--text-muted); margin-top:var(--space-2) }
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; font-family:var(--font-sans); font-size:var(--body-md); color:var(--text-heading);
  background:var(--surface-card); border:1px solid var(--line-rule);
  border-radius:var(--radius-xs); padding:11px 12px }

/* Native select arrows sit flush to the edge. Replace with the Lucide
   chevron-down, inset properly. Two variants because a background-image
   cannot inherit currentColor. */
select{
  appearance:none; -webkit-appearance:none;
  padding-right:40px;
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px 16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") }
[data-theme="dark"] select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F9EBE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") }
select::-ms-expand{ display:none }
textarea{ min-height:110px; resize:vertical }
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px; border-color:var(--line-strong) }
.check,.field > label.check{ display:flex; gap:var(--space-3); align-items:flex-start }
.check input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--flash-500) }
.check span{ font-size:var(--body-sm); color:var(--text-body) }

/* Consent block. The label is a direct child of .field, which would otherwise
   inherit the 600-weight label rule and set the whole disclosure in semibold. */
.check.consent{ display:flex; font-weight:var(--weight-regular);
  align-items:flex-start; gap:var(--space-4);
  background:var(--surface-card); border:1px solid var(--line-hairline);
  border-radius:var(--radius-xs); padding:var(--space-5) var(--space-6) }
.check.consent input{ margin-top:2px }
.consent-lead{ display:block; font-size:var(--body-sm); line-height:1.5;
  color:var(--text-heading); font-weight:var(--weight-regular) }
.consent-fine{ display:block; margin-top:var(--space-3);
  font-size:var(--body-sm); line-height:1.5;
  color:var(--text-muted); font-weight:var(--weight-regular) }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.note{ border-left:3px solid var(--flash-500); background:var(--surface-accent-soft);
  padding:var(--space-5) var(--space-6); border-radius:var(--radius-xs) }
.msg{ margin-top:var(--space-5); font-size:var(--body-sm); display:none }
.msg.on{ display:block }
.msg.ok{ color:var(--text-positive) } .msg.bad{ color:var(--text-alert) }

footer.foot{ background:var(--paper-200); border-top:1px solid var(--line-hairline);
  padding:var(--space-9) 0 var(--space-8) }
footer.foot .fine{ font-size:var(--body-xs); color:var(--text-muted); max-width:78ch }

/* Mobile header: the inline lockup is too wide at 375px and pushes the page
   gutter out, so switch to the brand's stacked lockup. */
@media (max-width:600px){
  header.bar .mark{ flex-direction:column; align-items:flex-start; gap:3px }
  header.bar .mark .name{ font-size:19px }
  header.bar .mark .bar2{ width:auto; align-self:stretch; height:2px }
  header.bar .mark .grp{ font-size:8px; letter-spacing:.3em }
  /* The footer has the full width to itself, so it keeps the inline lockup. */
  footer.foot .mark .grp{ font-size:8.5px; letter-spacing:.28em }
}

/* iOS Safari zooms the viewport when a focused control is under 16px.
   Bump every control to 16px on small screens so tapping a field does not
   jump the page. */
@media (max-width:860px){
  input[type=text],input[type=email],input[type=tel],input[type=password],
  input[type=number],select,textarea{ font-size:16px }
}