/* XOP Australia: design tokens and base styles. Brand from lp.xopaus.au (Barlow, forest green, safety amber). */

@font-face{font-family:"Barlow";src:url("../fonts/barlow-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-800-latin.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --ink:#052a1b;          /* deep forest green: dark sections, footer */
  --green:#00693f;        /* brand green: buttons on light, accents */
  --green-deep:#044d34;   /* logo tile green, hover */
  --amber:#f2a100;        /* safety amber: buttons on dark only (dark text) */
  --amber-deep:#d98f00;
  --pale:#edf5f0;         /* icon circles, light sections */
  --off:#f5f8f6;
  --text:#14201a;
  --text-soft:#46534c;
  --line:#dbe5df;
  --white:#ffffff;
  --gold:#f2a100;
  --font:"Barlow",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --radius:10px;
  --shadow:0 2px 12px rgba(5,42,27,.07);
  --shadow-hover:0 14px 30px rgba(5,42,27,.14);
  --topbar-h:34px;
  --header-h:66px;
}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + var(--header-h) + 12px)}
body{font-family:var(--font);font-size:17px;line-height:1.6;color:var(--text);background:var(--white)}
a{text-decoration:none;color:inherit}
img{height:auto;max-width:100%;display:block}
[hidden]{display:none!important}

h1,h2,h3,h4{font-family:var(--font);line-height:1.12;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
h1{font-size:clamp(2.1rem,4.2vw,3.4rem)}
h2{font-size:clamp(1.65rem,3vw,2.5rem)}
h3{font-size:1.25rem;font-weight:700}
p{max-width:640px}
.label{display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:.7rem}

.container{width:100%;max-width:1180px;margin:0 auto;padding:0 1.5rem}
.container--narrow{max-width:840px}
.section{padding:4.25rem 0}
.section--off{background:var(--off)}
.section--pale{background:var(--pale)}
.section--dark{background:var(--ink);color:var(--white)}
.section--dark h2,.section--dark h3{color:var(--white)}
.section-head{text-align:center;margin:0 auto 2.25rem;max-width:780px}
.section-head p,.section-head h2{max-width:none;margin-left:auto;margin-right:auto}
.section-head h2{margin-bottom:1rem}
.section-head p{color:var(--text-soft)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font);font-weight:700;font-size:1.05rem;line-height:1.2;padding:1rem 1.8rem;border-radius:var(--radius);border:0;cursor:pointer;transition:background-color .2s,transform .2s,box-shadow .2s;text-align:center}
.btn svg{width:19px;height:19px;flex:none}
.btn--primary{background:var(--green);color:var(--white)}
.btn--primary:hover{background:var(--green-deep);transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,105,63,.28)}
.btn--amber{background:var(--amber);color:var(--ink)}
.btn--amber:hover{background:#ffb21a;transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.btn--light{background:var(--white);color:var(--green)}
.btn--light:hover{background:var(--pale);transform:translateY(-1px)}

.stars{display:inline-flex;gap:2px}
.stars svg{width:16px;height:16px;fill:#b97700}

/* Scroll animations */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:none}
.stagger>.fade-up:nth-child(2){transition-delay:.08s}
.stagger>.fade-up:nth-child(3){transition-delay:.16s}
.stagger>.fade-up:nth-child(4){transition-delay:.24s}
.stagger>.fade-up:nth-child(5){transition-delay:.32s}
.stagger>.fade-up:nth-child(6){transition-delay:.40s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade-up{opacity:1;transform:none;transition:none}
}

@media (max-width:900px){.section{padding:3.5rem 0}}
@media (max-width:600px){
  body{font-size:16px}
  .section{padding:2.75rem 0}
  .container{padding:0 1rem}
  .section h2,.section-head h2{font-size:1.5rem}
  .section-head{margin-bottom:1.5rem}
}