/* =========================================================
   Utility Vehicles Queensland — Tuatara UTV Dealer
   Shared stylesheet
   ========================================================= */

:root{
  --ink:#14181c;
  --panel:#1c2127;
  --panel-2:#232a31;
  --paper:#f4f5f3;
  --paper-2:#e9ebe6;
  --line:#d7dad3;
  --text:#1c2127;
  --text-soft:#566069;
  --text-invert:#eef1ee;
  --text-invert-soft:#aab3bb;
  --accent:#ff6a1a;          /* outback orange */
  --accent-dark:#e2540a;
  --accent-2:#3f7d31;        /* bush green */
  --accent-2-dark:#2f5f25;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
  --shadow-lg:0 24px 60px rgba(0,0,0,.22);
  --maxw:1200px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --head:'Barlow Condensed','Inter',system-ui,sans-serif;
  --nav-h:72px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--paper);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:var(--head);font-weight:600;line-height:1.05;letter-spacing:.4px;margin:0 0 .4em}
h1{font-size:clamp(2.4rem,6vw,4.4rem);text-transform:uppercase}
h2{font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem);text-transform:uppercase}
p{margin:0 0 1rem}

.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:84px 0}
.section--tight{padding:56px 0}
.section--dark{background:var(--panel);color:var(--text-invert)}
.section--dark h1,.section--dark h2,.section--dark h3{color:#fff}
.section--ink{background:var(--ink);color:var(--text-invert)}
.section--alt{background:var(--paper-2)}
.center{text-align:center}
.lead{font-size:1.18rem;color:var(--text-soft);max-width:62ch}
.section--dark .lead,.section--ink .lead{color:var(--text-invert-soft)}
.center .lead{margin-left:auto;margin-right:auto}

.eyebrow{
  display:inline-block;font-family:var(--head);font-weight:600;
  text-transform:uppercase;letter-spacing:2.5px;font-size:.95rem;
  color:var(--accent);margin-bottom:.6rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--head);font-weight:600;text-transform:uppercase;
  letter-spacing:1px;font-size:1.05rem;
  padding:.85rem 1.6rem;border-radius:var(--radius-sm);
  border:2px solid transparent;cursor:pointer;transition:.18s ease;
  text-decoration:none;line-height:1;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn--dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--dark:hover{background:#000}
.btn--lg{font-size:1.2rem;padding:1rem 2rem}
.btn-ico{width:1.1em;height:1.1em;flex:none}

/* Taller hero on the model pages, content vertically centred, text flush-left with body */
.hero--model{min-height:82vh;display:flex;flex-direction:column;justify-content:center}
.hero--model > .container{width:100%}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background-color:transparent;
  background-image:linear-gradient(180deg,rgba(12,15,18,.82),rgba(12,15,18,0));
  border-bottom:1px solid transparent;
  transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.site-header.is-solid{
  background-color:rgba(20,24,28,.96);
  background-image:none;
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 22px rgba(0,0,0,.28);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand:hover{text-decoration:none}
.brand__mark{flex:none;display:flex;align-items:center}
/* The logo is a wide lockup (462x186) that carries the wordmark itself, so it
   stands alone with no text beside it. Drive it from an absolute height and let
   the width follow — a percentage height can't resolve here, because the
   shrink-wrapped parent is sized by this image in turn. */
.brand__mark img{height:56px;width:auto;display:block}
.site-footer .brand__mark img{height:68px}
/* Home page runs a larger header logo; --nav-h grows with it so the bar still
   contains it and the mobile menu keeps dropping from the right offset. */
.is-home{--nav-h:106px}
.is-home .site-header .brand__mark img{height:90px}

.nav__links{display:flex;align-items:center;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav__links a{
  color:var(--text-invert-soft);font-family:var(--head);font-weight:500;
  text-transform:uppercase;letter-spacing:1px;font-size:1.02rem;
  padding:.4rem 0;border-bottom:2px solid transparent;transition:.15s;
}
.nav__links a:hover,.nav__links a.active{color:#fff;border-color:var(--accent);text-decoration:none}
.nav__cta{margin-left:.5rem}
.nav__cta .btn,.nav__cta .btn:hover{color:#fff}   /* keep the phone number + icon white over the generic nav link colour */

/* dropdown */
.has-dd{position:relative}
.dd-toggle{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer}
.dd-toggle .caret{font-size:.7em;transition:.2s}
.dd{
  position:absolute;top:calc(100% + 10px);left:0;min-width:248px;list-style:none;
  margin:0;padding:8px;background:var(--panel);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;box-shadow:var(--shadow-lg);display:none;flex-direction:column;gap:0;z-index:60;
}
.dd::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.has-dd:hover .dd,.has-dd.open .dd{display:flex}
.has-dd:hover .caret,.has-dd.open .caret{transform:rotate(180deg)}
.dd a{padding:11px 14px;border-bottom:0 !important;white-space:nowrap;border-radius:8px}
.dd a:hover,.dd a.active{background:rgba(255,255,255,.07);color:#fff}
.dd a small{display:block;font-size:.72rem;letter-spacing:1px;color:var(--text-invert-soft);text-transform:none}

.nav__toggle{
  display:none;background:none;border:0;cursor:pointer;padding:8px;
  flex-direction:column;gap:5px;
}
.nav__toggle span{width:26px;height:3px;background:#fff;border-radius:2px;transition:.2s}
.nav__toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav__toggle.open span:nth-child(2){opacity:0}
.nav__toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;isolation:isolate;
  background-color:#1d242b;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  padding:120px 0 96px;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(13,16,19,.74) 0%,rgba(13,16,19,.42) 38%,rgba(13,16,19,.08) 66%,rgba(13,16,19,0) 100%);
}
.hero h1,.hero p,.hero .crumb{text-shadow:0 2px 18px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5)}
.hero--tall{padding:150px 0 130px}
.hero__inner{max-width:680px}
.hero h1{margin-bottom:.3em}
.hero p{font-size:1.25rem;color:#e7eae6;max-width:58ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.hero__badge{
  display:inline-block;background:var(--accent);color:#fff;
  font-family:var(--head);text-transform:uppercase;letter-spacing:1.5px;
  font-size:.85rem;font-weight:600;padding:.35rem .8rem;border-radius:6px;margin-bottom:1rem;
}

/* Home hero: title left, copy right, actions bottom-centre, soft bottom gradient only */
.hero--home::before{
  background:linear-gradient(180deg,rgba(13,16,19,0) 42%,rgba(13,16,19,.32) 72%,rgba(13,16,19,.66) 100%);
}
.hero--home{padding-bottom:40px}
.hero--home .container{
  display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:76vh;
}
.hero-home__lead{
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
}
.hero-home__lead h1{margin:0}
.hero-home__copy p{
  font-size:1.25rem;color:#eef1ee;margin:0;
  text-shadow:0 2px 6px rgba(0,0,0,.95),0 2px 22px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9);
}
.hero-home__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
@media (max-width:820px){
  .hero-home__lead{grid-template-columns:1fr;gap:14px}
  .hero--home .container{min-height:0;gap:32px}
  .hero-home__actions{justify-content:flex-start}
}

/* ---------- Image frame / placeholder system ---------- */
.imgframe{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,#2a3138,#171b1f);
  box-shadow:var(--shadow);aspect-ratio:16/10;
  display:grid;place-items:center;color:var(--text-invert-soft);
}
.imgframe img{width:100%;height:100%;object-fit:cover}
.imgframe[data-empty]::after{
  content:attr(data-empty);
  position:absolute;inset:0;display:grid;place-items:center;
  text-align:center;padding:1.5rem;font-family:var(--head);
  text-transform:uppercase;letter-spacing:1px;font-size:.95rem;
  color:rgba(255,255,255,.45);
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 14px,rgba(255,255,255,.05) 14px 28px);
}
.imgframe[data-empty] img{display:none}

/* ---------- Grids ---------- */
.grid{display:grid;gap:28px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split--wide-text{grid-template-columns:1.1fr .9fr}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.2s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.section--dark .card,.section--ink .card{background:var(--panel-2);border-color:rgba(255,255,255,.08);color:var(--text-invert)}
.card__media{aspect-ratio:16/10;background:linear-gradient(135deg,#2a3138,#171b1f);position:relative}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__body{padding:24px;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card__body h3{margin:0}
.card__body p{color:var(--text-soft);margin:0}
.section--dark .card__body p{color:var(--text-invert-soft)}
.card__foot{margin-top:auto;padding-top:1rem}

/* model card */
.modelcard .card__media{aspect-ratio:16/11}
.modeltag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--head);text-transform:uppercase;letter-spacing:1px;
  font-size:.8rem;font-weight:600;padding:.3rem .7rem;border-radius:6px;color:#fff;
}
.modeltag--petrol{background:var(--accent)}
.modeltag--electric{background:var(--accent-2)}

/* ---------- Feature list ---------- */
.features{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.features li{display:flex;gap:.7rem;align-items:flex-start}
.features li::before{
  content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:5px;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/16px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/16px no-repeat;
}

/* ---------- Spec table ---------- */
.specs{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.specs caption{
  text-align:left;font-family:var(--head);text-transform:uppercase;letter-spacing:1px;
  font-size:1.2rem;font-weight:600;padding:18px 22px;background:var(--panel);color:#fff;
}
.specs th,.specs td{padding:13px 22px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{width:42%;color:var(--text-soft);font-weight:600;background:var(--paper)}
.specs tr:last-child th,.specs tr:last-child td{border-bottom:0}
.specs td{font-weight:500}

/* ---------- Stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat__num{font-family:var(--head);font-weight:700;font-size:clamp(2.1rem,4vw,3rem);color:var(--accent);line-height:1}
.stat__label{font-size:.95rem;color:var(--text-invert-soft);text-transform:uppercase;letter-spacing:1px}

/* ---------- Video ---------- */
.video-wrap{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:#000}
.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.gallery__item{
  display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(135deg,#2a3138,#171b1f);cursor:zoom-in;position:relative;
  border:1px solid var(--line);
}
.section--dark .gallery__item,.section--alt .gallery__item{border-color:rgba(0,0,0,.06)}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.gallery__item:hover img{transform:scale(1.06)}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;z-index:200;display:none;place-items:center;
  background:rgba(8,10,12,.92);padding:24px;cursor:zoom-out;
}
.lightbox.open{display:grid}
.lightbox img{max-width:96vw;max-height:90vh;border-radius:10px;box-shadow:var(--shadow-lg)}
.lightbox__close{
  position:absolute;top:18px;right:24px;font-size:2.4rem;line-height:1;color:#fff;
  background:none;border:0;cursor:pointer;opacity:.85;
}
.lightbox__close:hover{opacity:1}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);font-size:2.6rem;color:#fff;
  background:rgba(0,0,0,.35);border:0;cursor:pointer;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;opacity:.8;
}
.lightbox__nav:hover{opacity:1;background:rgba(0,0,0,.55)}
.lightbox__nav--prev{left:18px}
.lightbox__nav--next{right:18px}
@media (max-width:560px){.lightbox__nav{width:44px;height:44px;font-size:2rem}}

/* ---------- Contact ---------- */
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.contact-row{display:flex;gap:1rem;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.contact-row:last-child{border-bottom:0}
.contact-row .ico{
  flex:none;width:44px;height:44px;border-radius:10px;background:var(--paper-2);
  display:grid;place-items:center;font-size:1.3rem;
}
.contact-row b{font-family:var(--head);text-transform:uppercase;letter-spacing:.5px;font-size:1.05rem;display:block}
.contact-row a{font-weight:600}

.map-wrap{aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,var(--accent),var(--accent-2));
  color:#fff;border-radius:var(--radius);padding:48px;text-align:center;
}
.cta-band h2{color:#fff}
.cta-band .btn--dark{background:#14181c}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--text-invert-soft);padding:64px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.site-footer h4{color:#fff;font-size:1.2rem;margin-bottom:1rem}
.site-footer a{color:var(--text-invert-soft)}
.site-footer a:hover{color:#fff}
.footer-links{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer-bottom{
  margin-top:46px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.88rem;color:#7e8891;
}

/* ---------- Breadcrumb ---------- */
.crumb{font-family:var(--head);text-transform:uppercase;letter-spacing:1px;font-size:.9rem;color:var(--text-invert-soft)}
.crumb a{color:var(--text-invert-soft)}
.crumb a:hover{color:#fff}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.stack>*+*{margin-top:1rem}
.pill{display:inline-block;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:.3rem .9rem;font-size:.9rem;font-weight:600;color:var(--text-soft)}
.section--dark .pill{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:var(--text-invert-soft)}

/* ---------- Transparent cut-out product shots ----------
   These images are cut out with no background of their own. Show them whole
   (never cropped) and clear the frame's dark gradient so the vehicle sits
   straight on the page. Declared last so it beats the section-scoped
   .section--alt/.section--dark frame rules at equal specificity. */
.imgframe img.is-cutout,
.card__media img.is-cutout,
.gallery__item img.is-cutout{object-fit:contain;padding:20px}
.imgframe.has-cutout,
.card__media.has-cutout,
.gallery__item.has-cutout{background:none;box-shadow:none;border-color:transparent}

/* ---------- Cycling image frames ----------
   Accessory shots that alternate between variants (full vs half door, glass vs
   perspex screen). Dots sit inside the frame; the img itself is clickable. */
.imgframe.has-cycle{cursor:pointer}
.cycle-dots{
  position:absolute;left:0;right:0;bottom:10px;z-index:3;
  display:flex;gap:7px;justify-content:center;pointer-events:auto;
}
.cycle-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.85);background:rgba(0,0,0,.35);
  transition:background .2s,transform .2s;
}
.cycle-dots button.is-on{background:var(--accent);transform:scale(1.15)}
.imgframe.has-cutout .cycle-dots button{border-color:rgba(0,0,0,.45);background:rgba(0,0,0,.18)}
.imgframe.has-cutout .cycle-dots button.is-on{background:var(--accent)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--panel);padding:10px 22px 22px;
    border-bottom:1px solid rgba(255,255,255,.08);
    transform:translateY(-130%);transition:.25s ease;box-shadow:var(--shadow-lg);
  }
  .nav__links.open{transform:translateY(0)}
  .nav__links a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav__links a.active{border-color:var(--accent)}
  /* Mobile: always show the Models submenu expanded, no tap needed */
  .dd{
    position:static;display:flex;flex-direction:column;min-width:0;background:rgba(0,0,0,.25);
    box-shadow:none;border:0;border-radius:8px;margin:2px 0 10px;padding:4px 10px;
  }
  .has-dd .caret{display:none}
  .dd-toggle{pointer-events:none;opacity:.7;font-size:.92rem;letter-spacing:1.5px}
  .dd a{padding:12px 6px}
  .nav__cta{margin:14px 0 0}
  .nav__toggle{display:flex}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .split,.split--wide-text{grid-template-columns:1fr;gap:32px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .section{padding:60px 0}
}
@media (max-width:560px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr}
  .cta-band{padding:32px 22px}
  .brand__mark img{height:46px}
  .is-home{--nav-h:84px}
  .is-home .site-header .brand__mark img{height:68px}
}