/* =============================================================
   ILES — Integrity Lifting & Engineering Solutions
   Custom design layer (sits on top of Tailwind utility classes)
   Token system:
     --navy-deep   #0F2044  primary dark surface
     --navy-mid    #16305C  secondary dark surface / cards
     --orange      #F4801F  primary accent / CTA
     --orange-dim  #C8620F  hover state for accent
     --signal-red  #C8202F  secondary accent (testing/training bars)
     --steel-100   #F7F8FA  light surface
     --steel-200   #ECEEF1  light surface, muted
     --ink         #10161F  body copy on light
     --slate       #5B6472  muted copy
   Type system:
     --font-display  'Oswald'        headlines, condensed & authoritative
     --font-body     'Inter'         paragraph copy
     --font-mono     'IBM Plex Mono' specs, load figures, data
   ============================================================= */

:root {
  --navy-deep: #0f2044;
  --navy-mid: #16305c;
  --orange: #f4801f;
  --orange-dim: #c8620f;
  --signal-red: #c8202f;
  --steel-100: #f7f8fa;
  --steel-200: #eceef1;
  --ink: #10161f;
  --slate: #5b6472;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--steel-100);
}

h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  letter-spacing: 0.01em;
}

.font-mono-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Visible keyboard focus everywhere — safety-site accessibility floor */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

/* ---------- Diagonal panel cut, echoes the brochure's angled color blocks ---------- */
.diag-cut-b {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.diag-cut-t {
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 768px) {
  .diag-cut-r {
    clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  }
}

/* ---------- Hazard stripe rule, used sparingly as a section marker ---------- */
.hazard-rule {
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    var(--orange),
    var(--orange) 14px,
    var(--navy-deep) 14px,
    var(--navy-deep) 28px
  );
}

/* ---------- Signature element: SWL (Safe Working Load) gauge ---------- */
.swl-gauge {
  filter: drop-shadow(0 8px 24px rgba(244, 128, 31, 0.25));
}
.swl-needle {
  transform-origin: 140px 140px;
  animation: swl-sweep 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes swl-sweep {
  0%   { transform: rotate(-90deg); }
  60%  { transform: rotate(48deg); }
  80%  { transform: rotate(36deg); }
  100% { transform: rotate(42deg); }
}
@media (prefers-reduced-motion: reduce) {
  .swl-needle { animation: none; transform: rotate(42deg); }
}
.swl-tick {
  stroke: rgba(247, 248, 250, 0.35);
  stroke-width: 2;
}
.swl-readout {
  animation: swl-fade-in 0.6s ease-out 1.9s both;
}
@keyframes swl-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Reveal-on-scroll (kept subtle & short) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Staggered reveal timing for card grids / photo grids */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.4s; }
.delay-6 { transition-delay: 0.48s; }

/* ---------- Photography: cards, zoom-on-hover, hero Ken Burns ---------- */
.img-frame {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-mid);
}
.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.img-frame:hover img {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .img-frame img { transition: none; }
  .img-frame:hover img { transform: none; }
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: ken-burns 22s ease-in-out infinite alternate;
}
@keyframes ken-burns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.09) translate(-1%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo img { animation: none; }
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15,32,68,0.97) 30%, rgba(15,32,68,0.75) 60%, rgba(15,32,68,0.4) 100%);
}

/* Caption bar over a photo card */
.photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(15,32,68,0.92), rgba(15,32,68,0));
  padding: 1.25rem 1.1rem 0.9rem;
}

/* ---------- Nav ---------- */
.nav-link {
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--orange);
  transition: width 0.25s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#mobile-menu.open {
  max-height: 640px;
}

/* ---------- Service / spec cards ---------- */
.spec-card {
  border-top: 3px solid var(--orange);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.spec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -12px rgba(15, 32, 68, 0.25);
}

/* ---------- Certification badge ---------- */
.cert-badge {
  border: 1px solid rgba(247, 248, 250, 0.25);
}

/* ---------- Form ---------- */
.field-error {
  color: var(--signal-red);
  font-size: 0.8rem;
  margin-top: 0.25rem;
  display: none;
}
.field-invalid {
  border-color: var(--signal-red) !important;
}
.field-invalid + .field-error,
.field-invalid ~ .field-error {
  display: block;
}

/* ---------- Toast (form submit / brochure download confirmation) ---------- */
#toast {
  transform: translateY(140%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#toast.show {
  transform: translateY(0);
}

/* ---------- Load calculator slider ---------- */
input[type="range"].swl-range {
  accent-color: var(--orange);
}

/* ---------- Back to top ---------- */
#backToTop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
#backToTop.show {
  opacity: 1;
  pointer-events: auto;
}