/* ==========================================================================
   MRP Sand Quarry

   Visual direction follows BK Civil: near-black ground, one clean grotesque,
   large faint geometry in the background, generous space, outlined buttons.
   Green is MRP's own and is spent sparingly — small marks only, never fields.
   Values sampled from bkcivil.com.au: ground #1A1919, headings #F2F2F2,
   body #D9D8D9, buttons 2px solid at 10px radius.
   ========================================================================== */

:root{
  /* LIGHT is the default ground. The hero and header opt into the dark set
     with .on-dark, because they sit over video. Every component reads these
     tokens and nothing else, so a section's whole appearance is one class. */
  --ink:        #f2f1ee;
  --ink-deep:   #e8e6e2;

  --paper:      #171717;
  --paper-dim:  #3b3939;
  --paper-soft: rgba(23,23,23,.70);
  --paper-faint:rgba(23,23,23,.45);

  --rule:       rgba(23,23,23,.16);
  --rule-soft:  rgba(23,23,23,.085);

  /* the bright green only works on black — on paper it needs stepping down */
  --green:      #12871a;

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --hdr-h: 88px;
  --ease: cubic-bezier(.4,0,.2,1);

  /* Large faint geometry, dark on the light ground. */
  --geo-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='%23171717'%3E%3Cpath d='M1180 0 L1600 420 L1600 0 Z' opacity='.033'/%3E%3Cpath d='M980 900 L1420 460 L1420 900 Z' opacity='.024'/%3E%3Cpath d='M640 120 L900 380 L640 640 Z' opacity='.018'/%3E%3Cpath d='M0 620 L300 900 L0 900 Z' opacity='.026'/%3E%3C/g%3E%3C/svg%3E");
  --geo-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='%23171717'%3E%3Cpath d='M0 0 L420 0 L0 420 Z' opacity='.028'/%3E%3Cpath d='M1600 900 L1180 900 L1600 480 Z' opacity='.024'/%3E%3Cpath d='M700 900 L1020 580 L1020 900 Z' opacity='.016'/%3E%3C/g%3E%3C/svg%3E");
}

/* The dark set — hero and header only. */
.on-dark{
  --ink:        #1a1919;
  --ink-deep:   #141313;

  --paper:      #f2f2f2;
  --paper-dim:  #d9d8d9;
  --paper-soft: rgba(217,216,217,.72);
  --paper-faint:rgba(217,216,217,.46);

  --rule:       rgba(242,242,242,.12);
  --rule-soft:  rgba(242,242,242,.07);

  --green:      #2BC72B;

  --geo-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M1180 0 L1600 420 L1600 0 Z' opacity='.028'/%3E%3Cpath d='M980 900 L1420 460 L1420 900 Z' opacity='.020'/%3E%3Cpath d='M640 120 L900 380 L640 640 Z' opacity='.016'/%3E%3Cpath d='M0 620 L300 900 L0 900 Z' opacity='.022'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper-dim);
  font-family:var(--font);
  font-size:17px;
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3{
  color:var(--paper);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin:0;
}

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--ink);
  padding:.8rem 1.2rem; font-weight:500;
}
.skip:focus{ left:12px; top:12px; }

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

/* ==========================================================================
   HEADER
   ========================================================================== */

.hdr{
  position:absolute; inset:0 0 auto 0; z-index:20;
  height:var(--hdr-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 clamp(20px,4vw,56px);
}

.burger{
  justify-self:start;
  position:relative;
  z-index:21;
  width:40px; height:30px;
  background:none; border:0; padding:0; cursor:pointer;
}
.burger span{
  position:absolute; left:6px; width:28px; height:2px;
  background:var(--paper);
  transition:top .3s var(--ease), transform .3s var(--ease), opacity .2s var(--ease), width .3s var(--ease);
}
.burger span:nth-child(1){ top:8px; }
.burger span:nth-child(2){ top:14px; width:20px; }
.burger span:nth-child(3){ top:20px; }
.burger:hover span:nth-child(2){ width:28px; }

/* burger becomes a close cross once the panel is open */
.burger[aria-expanded="true"] span:nth-child(1){ top:14px; transform:rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ top:14px; transform:rotate(-45deg); }

.hdr__contact{
  justify-self:end;
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.95rem; font-weight:500; color:var(--paper);
  transition:opacity .3s var(--ease);
}
.hdr__contact svg{ width:18px; height:18px; }
.hdr__contact:hover{ opacity:.68; }

/* ==========================================================================
   NAV PANEL — the only route to any section other than Contact, so it has
   to work everywhere, not just under 820px.
   ========================================================================== */

html.nav-locked, html.nav-locked body{ overflow:hidden; height:100%; }
html.nav-locked .hdr{ --paper:#171717; }

.navpanel{
  position:fixed; z-index:19;
  inset:0;
  background:#f2f1ee;
  background-image:var(--geo-a);
  background-size:cover; background-position:center;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:calc(var(--hdr-h) + clamp(1.4rem,5vw,2.6rem)) clamp(20px,4vw,56px) clamp(2rem,5vw,3rem);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.navpanel.is-open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s;
}

.navpanel__list{ list-style:none; margin:0; padding:0; }
.navpanel__list li + li{ border-top:1px solid rgba(23,23,23,.12); }
.navpanel__list a{
  display:block; padding:1rem 0;
  font-size:clamp(1.6rem,7vw,2.2rem); font-weight:700;
  letter-spacing:-.01em; color:#171717;
  transition:opacity .25s var(--ease);
}
.navpanel__list a:hover{ opacity:.7; }

.navpanel__phone{
  align-self:flex-start;
  margin-top:2rem;
  font-size:1.15rem; font-weight:600;
  color:#171717;
  letter-spacing:.01em;
}

@media (min-width:640px){
  .navpanel__list{ max-width:420px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  padding-top:var(--hdr-h);
  overflow:hidden;
  isolation:isolate;
}

.hero__video{
  position:absolute; inset:0; z-index:-3;
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
}

/* Even tint. No vignette theatrics — just enough ground for the mark. */
.hero__tint{
  --tint:.20;
  position:absolute; inset:0; z-index:-2;
  background:
    linear-gradient(to bottom,
      rgba(26,25,25,calc(var(--tint) + .22)) 0%,
      rgba(26,25,25,var(--tint))             20%,
      rgba(26,25,25,var(--tint))             58%,
      rgba(26,25,25,calc(var(--tint) + .26)) 100%);
}

.hero__grain{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:.34; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.hero__inner{
  position:relative; flex:1;
  display:grid; place-items:center;
  padding:0 clamp(20px,5vw,60px);
}

.hero__mark{ display:block; }
.hero__mark img{
  /* 476px is the ceiling: the artwork is 953px wide with no vector source,
     so anything larger stops being 2x on a retina screen. */
  width:clamp(240px,32vw,476px);
  height:auto;
  filter:
    drop-shadow(0 0 2px rgba(0,0,0,.9))
    drop-shadow(0 2px 8px rgba(0,0,0,.5));
}

/* ==========================================================================
   PRODUCT TICKER
   ========================================================================== */

.ticker{
  position:relative;
  padding:2.2rem 0 3.4rem;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 11%,#000 89%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 11%,#000 89%,transparent);
}

.ticker__track{
  display:flex; width:max-content;
  animation:marquee 46s linear infinite;
}
@keyframes marquee{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

.tick{
  flex:0 0 auto;
  width:clamp(230px,25vw,330px);
  padding:0 clamp(18px,2.4vw,34px);
  text-align:center;
}

.tick__name{
  margin:0;
  font-size:.82rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-faint);
  text-shadow:0 1px 14px rgba(0,0,0,.85);
  transition:color .45s var(--ease), letter-spacing .45s var(--ease);
}

.tick__bar{
  display:block; height:1px; width:0;
  margin:.8rem auto 0;
  background:var(--green);
  transition:width .45s var(--ease);
}

.tick__desc{
  margin:.6rem auto 0;
  max-width:30ch;
  font-size:.82rem; line-height:1.5;
  color:var(--paper-soft);
  text-shadow:0 1px 12px rgba(0,0,0,.9);
  opacity:0;
  transition:opacity .45s var(--ease);
}

.tick.is-active .tick__name{ color:var(--paper); letter-spacing:.17em; }
.tick.is-active .tick__bar{ width:22px; }
.tick.is-active .tick__desc{ opacity:1; }

/* ==========================================================================
   EYEBROW — small section label
   ========================================================================== */

.eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  margin:0 0 1.5rem;
  font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-faint);
}
.eyebrow__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--green);
}

/* ==========================================================================
   ABOUT
   ========================================================================== */

.about{
  position:relative;
  isolation:isolate;
  background:var(--ink);
  padding:clamp(5rem,11vw,8rem) clamp(20px,5vw,60px);
  border-top:1px solid var(--rule-soft);
}

.about__in{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  gap:3.2rem;
}

.about__media{
  width:100%; max-width:400px;
  aspect-ratio:3 / 4;
  overflow:hidden;
  border:1px solid var(--rule-soft);
  background:var(--ink-deep);
  margin:0;
}
.about__media img{ width:100%; height:100%; object-fit:cover; display:block; }

.about__text{
  max-width:66ch;
  text-align:center;
  display:flex; flex-direction:column; align-items:center;
}

.about__h2{
  font-size:clamp(2rem,4.4vw,3.15rem);
  max-width:20ch;
  margin:0 0 1.6rem;
}

.about__lead{
  margin:0;
  max-width:54ch;
  font-size:clamp(1.1rem,1.7vw,1.35rem);
  line-height:1.5;
  color:var(--paper);
  font-weight:400;
}

.about__body{
  margin-top:2.6rem;
  display:flex; flex-direction:column; gap:1.2rem;
  max-width:60ch;
}
.about__body p{
  margin:0;
  color:var(--paper-soft);
  font-size:1rem;
  line-height:1.7;
}

.about__marks{
  list-style:none; margin:3.6rem 0 0; padding:3rem 0 0;
  width:100%; max-width:58ch;
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem;
}
.about__marks li{ display:flex; flex-direction:column; gap:.5rem; }
.about__marks b{
  font-size:clamp(1.25rem,2.3vw,1.7rem);
  font-weight:700; color:var(--paper);
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.about__marks span{
  font-size:.78rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-faint); line-height:1.4;
}

/* Text and photo side by side once there's room for both. */
@media (min-width:900px){
  .about__in{
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:clamp(3rem,6vw,5.5rem);
  }
  .about__media{
    flex:0 0 clamp(280px,30vw,380px);
    align-self:stretch;
    max-width:none;
    height:auto;
  }
  .about__text{
    text-align:left;
    align-items:flex-start;
  }
  .about__marks{ width:100%; }
}

/* ==========================================================================
   BREAKER — full-bleed photo, no copy
   ========================================================================== */

.breaker{
  position:relative;
  isolation:isolate;
  height:100svh;
  min-height:460px;
  max-height:920px;
  overflow:hidden;
}

.breaker__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
  object-fit:cover; object-position:center 42%;
}

.breaker__tint{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to bottom,
      rgba(26,25,25,.16) 0%,
      rgba(26,25,25,.06) 30%,
      rgba(26,25,25,.10) 70%,
      rgba(26,25,25,.52) 100%);
}

.breaker__mark{
  position:absolute;
  right:clamp(20px,4vw,48px);
  bottom:clamp(20px,4vw,48px);
  display:block;
  line-height:0;
}
.breaker__mark img{
  width:clamp(96px,11vw,150px);
  height:auto;
  display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
}

@media (max-width:640px){
  .breaker{ height:78svh; min-height:400px; }
  /* On a narrow crop the frame crops left/right, not top/bottom, and the
     source image is centred on the ground, not on the dozer itself — cover's
     default 50% keeps the middle of the PHOTO in view, not the middle of the
     machine. Recentring on the dozer's own position pulls it back to the
     middle of the phone screen instead. */
  .breaker__img{ object-position:45% 50%; }
}

/* ==========================================================================
   BUTTONS — BK's proportions: 2px rule, 10px radius, generous padding
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 2.1rem;
  border:2px solid var(--paper);
  border-radius:10px;
  font-size:1rem; font-weight:500;
  color:var(--paper);
  background:transparent;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.btn svg{ width:16px; height:16px; }
.btn:hover{ background:var(--paper); color:var(--ink); }

.btn--solid{
  background:var(--paper); color:var(--ink);
  border-color:var(--paper);
}
.btn--solid:hover{ background:transparent; color:var(--paper); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:820px){
  :root{ --hdr-h:72px; }
  body{ font-size:16px; }
  .hero__mark img{ width:min(74vw,340px); }
  .ticker{ padding:1.8rem 0 2.8rem; }
  .tick{ width:clamp(190px,64vw,260px); }
  .about__body{ margin-top:2.1rem; }
}

@media (max-width:640px){
  .about__marks{
    grid-template-columns:1fr;
    gap:1.6rem; margin-top:3rem; padding-top:2.4rem;
  }
}

/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .ticker__track{ animation:none; }
  *{ transition-duration:.01ms !important; }
  .tick__desc{ opacity:1; }
  .tick__name{ color:var(--paper); }
  .tick__bar{ width:28px; }
}

.about__cta{ margin:2.8rem 0 0; }

/* ==========================================================================
   SHARED SECTION FURNITURE
   ========================================================================== */

.wrap{ width:100%; max-width:1180px; margin:0 auto; }

.sec{ padding:clamp(5rem,11vw,8.5rem) clamp(20px,5vw,60px); }

.sec__head{ max-width:60ch; margin:0 0 clamp(2.8rem,5vw,4rem); }
.sec__h2{
  font-size:clamp(1.9rem,4vw,2.9rem);
  margin:0 0 1.1rem;
  max-width:20ch;
}
.sec__intro{
  margin:0;
  color:var(--paper-soft);
  font-size:clamp(1rem,1.4vw,1.12rem);
  line-height:1.65;
  max-width:58ch;
}

/* ==========================================================================
   SCROLL REVEAL
   Content is visible by default and only hidden once JS confirms it can
   animate — so nothing is ever stranded invisible if the script fails.
   ========================================================================== */

.js-reveal .reveal{
  opacity:0;
  transform:translateY(18px);
}
.js-reveal .reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal{ opacity:1; transform:none; }
}

/* --- mobile: one product at a time, sliding --- */
@media (max-width:820px){
  .ticker{
    display:flex; justify-content:center;
    padding:1.9rem 0 2.9rem;
    -webkit-mask-image:none; mask-image:none;
  }
  .ticker__track{
    display:grid;
    width:100%;
    animation:none;
  }
  /* every slot stacks in one cell; only the shown one is visible */
  .tick{
    grid-area:1 / 1;
    width:100%;
    opacity:0;
    transform:translateX(28px);
    pointer-events:none;
    transition:opacity .55s var(--ease), transform .55s var(--ease);
  }
  .tick.is-shown{ opacity:1; transform:none; }
  .tick.is-out{ opacity:0; transform:translateX(-28px); }
  .tick__desc{ opacity:1; }
  .tick__name{ color:var(--paper); }
  .tick__bar{ width:22px; }
}