/* Aqua Phase Electrical — site styles.
   The page markup carries the design's inline styles verbatim (design source of truth:
   claude.ai/design "Aqua Phase Website v3"). This file holds base rules, responsive
   behaviour and the interactive states the design expressed as style-hover/style-focus. */

@font-face {
  font-family: Archivo;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('../fonts/material-symbols-outlined.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  font-family: Archivo, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #17181a;
}

a { color: #1e5f9e; text-decoration: none; }
a:hover { color: #0d0f12; }
input, textarea, select, button { font-family: inherit; }

@keyframes apFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

/* Anchor targets clear the sticky header */
#enquiry, #industries, #capability { scroll-margin-top: 114px; }

/* Hover states (from the design's style-hover attributes) */
.hv-fade  { transition: opacity .15s ease; }
.hv-fade:hover  { opacity: .85; }
.hv-tint  { transition: background .15s ease; }
.hv-tint:hover  { background: rgba(0,0,0,.03) !important; }
.hv-row   { transition: background .15s ease; }
.hv-row:hover   { background: #eeeeec !important; }
.hv-ghost { transition: background .15s ease; }
.hv-ghost:hover { background: rgba(255,255,255,.08) !important; }

/* Form focus states (from the design's style-focus attributes) */
#enquiryForm input:focus,
#enquiryForm textarea:focus,
#enquiryForm select:focus {
  border-color: #2b93e6 !important;
  outline: none;
}
#enquiryForm .chip:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid #2b93e6;
  outline-offset: 2px;
}

/* Work-type pills (styles from the design's workOptions logic) */
.chip {
  font: 700 14px Archivo, sans-serif;
  white-space: nowrap;
  height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease;
  border: 1px solid #d8d9db;
  background: #fff;
  color: #17181a;
}
.chip.on {
  border-color: #2b93e6;
  background: #2b93e6;
  color: #fff;
}

/* Responsive behaviour (from the design's 1120px media block) */
[data-mob] { display: none; }
@media (max-width: 1120px) {
  [data-desk] { display: none !important; }
  [data-mob] { display: inline-flex !important; }
  [data-split] { grid-template-columns: 1fr !important; }
  [data-pad] { padding-left: 22px !important; padding-right: 22px !important; }
  [data-herofig] { display: none !important; }
  [data-span2] { grid-column: auto !important; min-width: 0 !important; }
}