/* HV Contractor Ltd — project layer over the Modernist design system.
   Only what inline styles cannot express: theme token remap (brand palette),
   scroll-reveal, breakpoint switches. Everything else is inline. */

:root {
  /* Brand remap of the Modernist roles (structure, type and rules unchanged) */
  --color-bg: #F5F5F2;
  --color-surface: #E8E9E6;
  --color-text: #0B1F33;
  --color-accent: #2F6F9F;
  --color-accent-100: #eef4f9;
  --color-accent-200: #d5e4ef;
  --color-accent-300: #a9c6dc;
  --color-accent-400: #6f9ec0;
  --color-accent-500: #2F6F9F;
  --color-accent-600: #275b83;
  --color-accent-700: #1e4864;
  --color-accent-2: #B8A58C;
  --color-divider: color-mix(in srgb, #0B1F33 28%, transparent);

  --color-midnight: #07111D;
  --color-navy: #0B1F33;
  --color-stone: #B8A58C;

  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-40: 160px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(20px, 4vw, 64px);
  --sec-y: clamp(64px, 9vw, 140px);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }

/* — scroll reveal (only active once JS confirms support) — */
html.js-reveal [data-reveal] { opacity: 0; transform: translateY(20px); }
[data-reveal] { transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
html.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
html.js-reveal [data-reveal-img] > * { transform: scale(1.08); transition: transform 1400ms var(--ease); }
html.js-reveal [data-reveal-img].is-in > * { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js-reveal [data-reveal] { opacity: 1; transform: none; }
  html.js-reveal [data-reveal-img] > * { transform: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* — header — */
.site-head { transition: background 450ms var(--ease), border-color 450ms var(--ease), backdrop-filter 450ms var(--ease); }
.site-head[data-stuck="true"] {
  background: color-mix(in srgb, var(--color-midnight) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: color-mix(in srgb, #fff 16%, transparent);
}
.navlink { position: relative; }
.navlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 400ms var(--ease);
}
.navlink:hover::after, .navlink[aria-current="page"]::after { transform: scaleX(1); }

/* — hover micro-interactions — */
.lift { transition: transform 500ms var(--ease), background 500ms var(--ease), border-color 500ms var(--ease); }
.lift:hover { transform: translateY(-6px); }
.zoom > * { transition: transform 900ms var(--ease); }
.lift:hover .zoom > *, .zoom-p:hover .zoom > * { transform: scale(1.05); }
.arrow { display: inline-block; transition: transform 400ms var(--ease); }
.lift:hover .arrow, .arrow-p:hover .arrow { transform: translate(5px, -5px); }
.btn { white-space: nowrap; transition: transform 350ms var(--ease), background 350ms var(--ease), color 350ms var(--ease), border-color 350ms var(--ease); }
.btn:hover { transform: translateY(-2px); }

/* — services alternating rows — */
.svc-row:nth-child(even) .svc-media { order: 2; }

/* — form scale-up (touch targets + editorial labels) — */
.field > label {
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 9px; color: color-mix(in srgb, var(--color-text) 60%, transparent);
}
.input { min-height: 54px; padding: 15px 16px; font-size: 15px; background: transparent; }
select.input { appearance: none; background-image: none; cursor: pointer; }
textarea.input { min-height: 140px; }
.input::placeholder { color: color-mix(in srgb, var(--color-text) 38%, transparent); }

/* — breakpoint switches — */
.desk-nav { display: flex; }
.burger { display: none; }
.mobile-cta { display: none; }
.hide-sm { display: block; }

@media (max-width: 940px) {
  .desk-nav { display: none; }
  .burger { display: inline-flex; }
  .mobile-cta { display: grid; }
  body { padding-bottom: 62px; }
  .hide-sm { display: none; }
  .stack-sm { grid-template-columns: 1fr !important; }
  .svc-row { grid-template-columns: 1fr !important; }
  .svc-row .svc-media { order: 0 !important; }
  .fs-sm { font-size: clamp(38px, 12vw, 64px) !important; }
}
@media (max-width: 620px) {
  .cols-2-sm { grid-template-columns: 1fr 1fr !important; }
}

/* full colour imagery */
.grayscale, .grayscale img, .grayscale image-slot { filter: none !important; -webkit-filter: none !important; }