/* Newman Mining and Construction. Layout and components. */

/* ---------------------------------------------------------------
   1. Reset and base
   --------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
}

img,
svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 { font-size: var(--step-h1); font-weight: 900; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); letter-spacing: -0.01em; line-height: 1.2; }

p { margin: 0 0 1rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--ochre); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ochre-deep); }

:focus-visible {
  outline: 2px solid var(--ochre-deep);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lead {
  font-size: var(--step-lead);
  line-height: 1.5;
  color: var(--ink);
}

.muted { color: var(--ink-soft); }

.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   2. Skip link
   --------------------------------------------------------------- */

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ochre);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease-out;
}

.skip:focus { top: 0.75rem; color: #fff; }

/* ---------------------------------------------------------------
   3. Navigation
   --------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--nav-h);
}

.wordmark {
  display: flex;
  align-items: baseline;
  min-height: 44px;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark__name {
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.wordmark__tail {
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-left: auto;
}

.nav-links a:not(.btn) {
  display: block;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  font-size: var(--step-nav);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a:not(.btn):hover { border-bottom-color: var(--hairline); }

.nav-links a:not(.btn)[aria-current='page'] {
  border-bottom-color: var(--ochre);
  font-weight: 700;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--ochre);
  background: var(--ochre);
  color: #fff;
  font-family: var(--font);
  font-size: var(--step-nav);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease-out, border-color 0.15s ease-out, transform 0.1s ease-out;
}

.btn:hover {
  background: var(--ochre-deep);
  border-color: var(--ochre-deep);
  color: #fff;
}

.btn:active { transform: translateY(1px); }

.btn--lg { padding: 1rem 1.75rem; font-size: 1rem; }

.btn--ghost {
  background: transparent;
  color: var(--ochre);
}

.btn--ghost:hover { background: var(--ochre-deep); color: #fff; }

.nav-cta { margin-left: 0.4rem; }

.nav-toggle {
  display: none;
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-nav);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Eight links plus a wordmark plus a CTA cannot sit on one line below
   1080px, so the overlay takes over there rather than at 768px. */
@media (max-width: 1079px) {
  .nav-toggle { display: block; }

  .nav-links {
    position: fixed;
    inset: var(--nav-h) 0 0;
    z-index: 45;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 3rem;
    background: var(--paper);
    overflow-y: auto;
  }

  .nav-links.is-open { display: flex; }

  .nav-links a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--hairline);
    font-size: 1.0625rem;
  }

  .nav-links a:not(.btn)[aria-current='page'] {
    border-bottom-color: var(--hairline);
    color: var(--ochre);
  }

  .nav-cta {
    margin: 1.5rem 0 0;
    text-align: center;
    font-size: 1rem;
    padding: 1rem 1.5rem;
  }
}

/* ---------------------------------------------------------------
   4. Image slots (placeholder boxes, not broken images)
   --------------------------------------------------------------- */

.img-slot {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 4 / 3);
  padding: 1rem;
  border: 1px solid var(--ochre);
  background: var(--steel);
}

.img-slot__label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 34ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step-small);
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

.img-slot__label strong {
  color: var(--ink);
  font-weight: 900;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A filled slot: the photograph takes the box the placeholder held. The img
   carries width and height attributes, so height auto is what keeps the
   ratio honest and the layout from shifting as it loads. */
picture[data-slot] { display: block; }
picture[data-slot] img { width: 100%; height: auto; }

/* ---------------------------------------------------------------
   5. Bands
   --------------------------------------------------------------- */

.band { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * 0.65); }
.band--steel { background: var(--steel); }
.band--ruled { border-top: 1px solid var(--hairline); }

.band__head { margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.band__head p { margin-top: 1rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------
   6. Hero (family: full bleed scrim overlay)
   --------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 88dvh;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--ochre);
  background: var(--ink) url('../images/hero-loop-poster.jpg') center / cover no-repeat;
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim lives here, never baked into the footage, so it retunes per breakpoint. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

/* The plume sits centre frame, so the headline side needs the extra lift. */
.hero__media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(20, 16, 14, 0.65) 0%, rgba(20, 16, 14, 0.32) 42%, rgba(20, 16, 14, 0) 72%);
}

/* Portrait crops the frame to its centre third, so the plume sits behind the
   type and the horizontal wash no longer helps. Band it vertically instead. */
@media (max-width: 860px) {
  .hero__media::after { background: rgba(34, 28, 24, 0.52); }

  .hero__media::before {
    background: linear-gradient(180deg,
      rgba(20, 16, 14, 0.08) 0%,
      rgba(20, 16, 14, 0.40) 26%,
      rgba(20, 16, 14, 0.40) 76%,
      rgba(20, 16, 14, 0.06) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-block: clamp(3rem, 8vw, 5rem);
}

.hero h1 {
  max-width: 16ch;
  color: var(--paper);
  font-size: var(--step-hero);
}

.hero__line {
  max-width: 40ch;
  margin: 1.5rem 0 2.25rem;
  color: var(--paper);
  font-size: var(--step-lead);
  line-height: 1.45;
}

/* ---------------------------------------------------------------
   7. Statement (family: single measure block)
   --------------------------------------------------------------- */

.statement p {
  max-width: 44ch;
  font-size: clamp(1.375rem, 2.8vw, 2rem);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------
   8. Divisions (family: asymmetric 2fr 1fr over 1fr 2fr)
   --------------------------------------------------------------- */

.divisions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

.divisions > li:nth-child(1),
.divisions > li:nth-child(4) { grid-column: span 2; }

.division h3 { margin-top: 1.25rem; }
.division p { margin: 0.6rem 0 0.9rem; color: var(--ink-soft); max-width: 46ch; }

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: var(--step-small);
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------
   9. Tiles (family: three tiles, varied widths)
   --------------------------------------------------------------- */

.tiles {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  align-items: start;
}

.tile--fill {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--steel);
  border-top: 3px solid var(--ochre);
}

.tile h3 { margin-bottom: 0.75rem; }
.tile p { color: var(--ink-soft); }
.tile--photo h3 { margin-top: 1.25rem; }

.people { margin-top: 1rem; display: grid; gap: 0.75rem; }
.people li { padding-top: 0.75rem; border-top: 1px solid var(--hairline); }
.people b { display: block; font-weight: 700; }
.people span { color: var(--ink-soft); font-size: var(--step-small); }

/* ---------------------------------------------------------------
   10. Quote (family: full width quote)
   --------------------------------------------------------------- */

.quote-band { background: var(--steel); }

/* Measure is set in rem, not ch: the figure inherits the 1rem body size while
   the quote text is far larger, so a ch value here would be badly wrong. */
.quote {
  max-width: 48rem;
  margin: 0;
}

.quote p {
  max-width: none;
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.375rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.02em;
}

.quote figcaption {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 3px solid var(--ochre);
  font-size: var(--step-small);
  line-height: 1.5;
}

.quote figcaption b { display: block; font-weight: 700; }
.quote figcaption span { color: var(--ink-soft); }

/* ---------------------------------------------------------------
   11. Responsibly (family: stat strip over three columns)
   --------------------------------------------------------------- */

.stat {
  display: grid;
  gap: 0.5rem;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--hairline);
}

.stat__figure {
  font-size: var(--step-stat);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ochre);
}

.stat__gloss { max-width: 52ch; color: var(--ink-soft); }

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3vw, 3rem);
}

.cols-3 h3 { margin-bottom: 0.6rem; }
.cols-3 p { color: var(--ink-soft); }

/* ---------------------------------------------------------------
   12. Project trio (family: offset trio)
   --------------------------------------------------------------- */

.trio {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  align-items: start;
}

.trio > li:nth-child(2) { margin-top: clamp(1rem, 3vw, 2.5rem); }
.trio > li:nth-child(3) { margin-top: clamp(2rem, 6vw, 5rem); }

.project h3 { margin-top: 1.25rem; }
.project__client {
  margin: 0.4rem 0 0;
  font-size: var(--step-small);
  font-weight: 700;
  color: var(--ochre);
}
.project p { margin-top: 0.6rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------
   13. Split (family: image and text side by side)
   --------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split--narrow { grid-template-columns: 1.15fr 1fr; }
.split--top { align-items: start; }
.split--flip > :first-child { order: 2; }
.split__body h2 { margin-bottom: 1.25rem; }
.split__body p { color: var(--ink-soft); }
.split__body .btn { margin-top: 1.5rem; }

/* ---------------------------------------------------------------
   14. News (family: one feature plus a stack of two)
   --------------------------------------------------------------- */

.newsgrid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  align-items: start;
}

.newsgrid > li:first-child { grid-row: span 2; }

.story h3 { margin-top: 1rem; }
.story time {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: var(--step-small);
  font-variant-numeric: tabular-nums;
}
.story p { margin-top: 0.6rem; color: var(--ink-soft); }
.story--compact h3 { font-size: 1.0625rem; }

/* ---------------------------------------------------------------
   15. Page head and generic content bands (subpages)
   --------------------------------------------------------------- */

.page-head {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--hairline);
}

.page-head p {
  margin: 1.25rem 0 0;
  max-width: 52ch;
  font-size: var(--step-lead);
  color: var(--ink-soft);
  line-height: 1.5;
}

.prose { max-width: var(--measure); }
.prose h2 { margin-bottom: 1.25rem; }
.prose h3 { margin: 2rem 0 0.6rem; }
.prose p { color: var(--ink-soft); }
.prose p + p { margin-top: 0; }

/* Grouped capability block, two columns, not a bullet dump. */
.groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3vw, 3rem);
}

.group { padding-top: 1rem; border-top: 3px solid var(--ochre); }
.group h3 { margin-bottom: 0.75rem; }
.group p { color: var(--ink-soft); margin-bottom: 0.75rem; }
.group ul { display: grid; gap: 0.5rem; }
.group li {
  padding-left: 1.1rem;
  position: relative;
  color: var(--ink-soft);
  font-size: var(--step-small);
  line-height: 1.5;
}
.group li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.5rem; height: 1px;
  background: var(--ochre);
}

/* Roles and project rows */
.rows { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(1.5rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--hairline);
}
.row h3 { margin: 0; }
.row__meta { color: var(--ink-soft); font-size: var(--step-small); margin-top: 0.4rem; }
.row p { color: var(--ink-soft); }

/* Project cards on the projects page */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.project__place {
  margin-top: 0.25rem;
  color: var(--ink-soft);
  font-size: var(--step-small);
}

.project__stat {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* Fleet groups on plant hire */
.fleet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.fleet > li { background: var(--paper); padding: clamp(1.25rem, 2vw, 1.75rem); }
.fleet h3 { margin-bottom: 0.5rem; }
.fleet p { color: var(--ink-soft); font-size: var(--step-small); }

/* ---------------------------------------------------------------
   16. Contact form (shape only, non functional)
   --------------------------------------------------------------- */

.form { display: grid; gap: 1.5rem; max-width: 34rem; }

.field { display: grid; gap: 0.4rem; }

.field label { font-weight: 700; font-size: var(--step-small); }

.field .help { color: var(--ink-soft); font-size: var(--step-small); line-height: 1.4; }

.field input,
.field textarea {
  width: 100%;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--ink-soft);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.4;
}

.field textarea { min-height: 9rem; resize: vertical; }

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--ochre-deep);
  outline-offset: 1px;
  border-color: var(--ochre-deep);
}

.contact-lines { display: grid; gap: 1.5rem; }
.contact-lines dt { font-size: var(--step-small); color: var(--ink-soft); font-weight: 500; }
.contact-lines dd {
  margin: 0.25rem 0 0;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.contact-lines dd a { text-decoration: none; }
.contact-lines dd a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   17. Closing CTA band
   --------------------------------------------------------------- */

.cta-band { border-top: 1px solid var(--hairline); }
.cta-band h2 { margin-bottom: 1rem; max-width: 20ch; }
.cta-band p { color: var(--ink-soft); margin-bottom: 1.75rem; }

/* ---------------------------------------------------------------
   18. Footer
   --------------------------------------------------------------- */

.site-footer {
  background: var(--iron-dark);
  color: var(--paper);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  border-top: 3px solid var(--ochre);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--footer-rule);
}

.footer-col h2 {
  margin-bottom: 1rem;
  font-size: var(--step-small);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.footer-col li + li { margin-top: 0.15rem; }

.footer-col a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0.25rem 0;
  color: var(--footer-soft);
  font-size: var(--step-small);
  text-decoration: none;
}

.footer-col a:hover { color: var(--paper); text-decoration: underline; }

.footer-col .pending { color: var(--footer-soft); font-size: var(--step-small); opacity: 0.7; }

.footer-contact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--footer-rule);
}

.footer-contact dt {
  font-size: var(--step-small);
  color: var(--footer-soft);
}

.footer-contact dd {
  margin: 0.3rem 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.footer-contact dd a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--paper);
  text-decoration: none;
}
.footer-contact dd a:hover { text-decoration: underline; }

.acknowledgement {
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--footer-rule);
}

.acknowledgement p {
  max-width: 68ch;
  margin: 0;
  color: var(--footer-soft);
  font-size: var(--step-small);
  line-height: 1.6;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding-top: 1.75rem;
  color: var(--footer-soft);
  font-size: var(--step-small);
}

.footer-base a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--paper);
}

/* ---------------------------------------------------------------
   19. Reveal on entry
   --------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* ---------------------------------------------------------------
   20. Responsive
   --------------------------------------------------------------- */

@media (max-width: 1000px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .tiles > :first-child { grid-column: span 2; }
  .trio { grid-template-columns: 1fr 1fr; }
  .trio > li:nth-child(2),
  .trio > li:nth-child(3) { margin-top: 0; }
  .trio > li:first-child { grid-column: span 2; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .divisions { grid-template-columns: 1fr; }
  .divisions > li:nth-child(1),
  .divisions > li:nth-child(4) { grid-column: auto; }
  .cols-3 { grid-template-columns: 1fr; }
  .split,
  .split--narrow { grid-template-columns: 1fr; }
  .split--flip > :first-child { order: 0; }
  .newsgrid { grid-template-columns: 1fr; }
  .newsgrid > li:first-child { grid-row: auto; }
  .groups { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 0.75rem; }
  .footer-contact { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .tiles,
  .trio { grid-template-columns: 1fr; }
  .tiles > :first-child,
  .trio > li:first-child { grid-column: auto; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .hero h1 { max-width: none; }
  .hero__line { margin-bottom: 1.75rem; }
}