/* Tipper Truck Hire SA — shared design system (used by every page) */
:root{
  --color-primary:#0a0f1f;
  --gold:#f5b50a;
  --gold-light:#ffc21f;
}
body{ -webkit-font-smoothing:antialiased; }

/* Offset anchor jumps so headings clear the sticky header */
section[id]{ scroll-margin-top: 5.5rem; }

/* Scroll-in animation */
.scroll-animate{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.scroll-animate.visible{ opacity:1; transform:none; }

/* Eyebrow label */
.eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-size:.72rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); display:inline-block; }

/* Buttons */
.btn-gold{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; background:var(--gold); color:#0a0f1f; font-weight:800; padding:.95rem 1.9rem; border-radius:.65rem; transition:.25s ease; box-shadow:0 14px 34px -14px rgba(245,181,10,.7); }
.btn-gold:hover{ transform:translateY(-2px); background:var(--gold-light,#ffc21f); }
.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; border:1px solid rgba(255,255,255,.28); color:#fff; font-weight:700; padding:.95rem 1.9rem; border-radius:.65rem; transition:.25s ease; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55); transform:translateY(-2px); }
.btn-dark{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; background:#0a0f1f; color:#fff; font-weight:800; padding:.95rem 1.9rem; border-radius:.65rem; transition:.25s ease; }
.btn-dark:hover{ transform:translateY(-2px); background:#16223f; }

/* Hero technical grid + glow */
.hero-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:46px 46px;
}
.hero-glow{ background:radial-gradient(60% 60% at 78% 18%, rgba(245,181,10,.16), transparent 60%); }

/* Dark card */
.card-dark{ background:#0f1830; border:1px solid rgba(255,255,255,.08); transition:.3s ease; }
.card-dark:hover{ border-color:rgba(245,181,10,.55); transform:translateY(-6px); box-shadow:0 24px 50px -24px rgba(0,0,0,.6); }

/* Light card */
.card-light{ background:#fff; border:1px solid #e7ebf2; transition:.3s ease; }
.card-light:hover{ transform:translateY(-6px); box-shadow:0 24px 50px -24px rgba(10,15,31,.25); border-color:#d6deea; }

/* Light sections converted to the dark theme (incl. the technical grid) */
.section-dark{
  background-color:#0a0f1f;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:46px 46px;
}
.section-dark h2{ color:#fff; }
.section-dark .eyebrow{ color:#f5b50a !important; }
.section-dark .text-gray-600{ color:#9fb0d0 !important; }
.section-dark .card-light{ background:#0f1830; border-color:rgba(255,255,255,.08); }
.section-dark .card-light:hover{ border-color:rgba(245,181,10,.45); box-shadow:0 24px 50px -24px rgba(0,0,0,.6); }
.section-dark .card-light h3{ color:#fff; }
.section-dark .card-light p{ color:#9fb0d0; }
.section-dark .card-light i.text-ink{ color:#f5b50a; }
.section-dark .card-light .bg-ink{ background-color:rgba(245,181,10,.12) !important; }
.section-dark .text-gray-100{ color:rgba(255,255,255,.10) !important; }

/* Fleet photos: blend the bottom of the image into the dark card */
.fleet-media::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:38%; background:linear-gradient(to top, #0f1830, transparent); pointer-events:none; }

/* Section eyebrow tag chip */
.chip{ display:inline-flex; align-items:center; gap:.45rem; font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding:.35rem .8rem; border-radius:999px; }

/* ---------- Contact form ---------- */
#contactForm .field-label{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#64748b; margin-bottom:.45rem; }
#contactForm .field{ position:relative; }
#contactForm .field-icon{ position:absolute; left:.95rem; top:50%; transform:translateY(-50%); width:1.2rem; height:1.2rem; color:#94a3b8; pointer-events:none; transition:color .2s ease; }
#contactForm .field--textarea .field-icon{ top:1.05rem; transform:none; }
#contactForm .form-input{
  width:100%; padding:.8rem 1rem .8rem 2.95rem;
  background:#f8fafc; border:1.5px solid #e5e7eb; border-radius:.8rem;
  color:#0a0f1f; font-size:.95rem; line-height:1.4;
  transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
#contactForm .form-input::placeholder{ color:#9ca3af; }
#contactForm .form-input:hover{ border-color:#cbd5e1; }
#contactForm .form-input:focus{ outline:none; background:#fff; border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,181,10,.18); }
#contactForm .field:focus-within .field-icon{ color:var(--gold); }
#contactForm select.form-input{ appearance:none; -webkit-appearance:none; cursor:pointer; font-weight:600; padding-right:2.6rem; }
#contactForm select.form-input:required:invalid{ color:#9ca3af; font-weight:400; }
#contactForm select.form-input option{ color:#0a0f1f; background:#fff; font-weight:500; }
#contactForm select.form-input option[disabled]{ color:#9ca3af; }
#contactForm .select-caret{ position:absolute; right:1rem; top:50%; transform:translateY(-50%); width:1.1rem; height:1.1rem; color:#94a3b8; pointer-events:none; transition:color .2s ease; }
#contactForm .field:focus-within .select-caret{ color:var(--gold); }

/* Floating CTA: hide when the contact section (which has its own buttons) is on screen */
#floating-cta{ transition: opacity .3s ease, transform .3s ease; }
#floating-cta.cta-hidden{ opacity:0; transform: translateY(16px); pointer-events:none; }

/* Mobile menu animations */
@keyframes mm-overlay{ from{opacity:0} to{opacity:1} }
@keyframes mm-panel{ from{transform:translateX(100%)} to{transform:translateX(0)} }
@keyframes mm-item{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
#mobile-menu-overlay{ animation:mm-overlay .3s ease forwards; }
#mobile-menu-panel{ animation:mm-panel .4s cubic-bezier(.22,1,.36,1) forwards; }
.mm-item{ opacity:0; animation:mm-item .5s ease forwards; }
.mm-link{ position:relative; overflow:hidden; }
.mm-link::after{ content:""; position:absolute; left:0; top:0; height:100%; width:3px; background:var(--gold); transform:scaleY(0); transform-origin:bottom; transition:transform .25s ease; }
.mm-link:hover::after, .mm-link:focus::after{ transform:scaleY(1); }

/* Quote equipment line-items */
#contactForm .qty-row{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:#fff; border:1px solid #e8ebf1; border-radius:.65rem; padding:.5rem .6rem; cursor:text; transition:border-color .2s ease; }
#contactForm .qty-row:hover{ border-color:#cbd5e1; }
#contactForm .qty-row:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,181,10,.14); }
#contactForm .qty-info{ display:flex; align-items:center; gap:.7rem; min-width:0; }
#contactForm .qty-icon{ flex:0 0 auto; width:1.85rem; height:1.85rem; display:flex; align-items:center; justify-content:center; border-radius:.5rem; background:#0a0f1f; color:var(--gold); font-size:.78rem; }
#contactForm .qty-name{ display:block; font-size:.82rem; font-weight:700; color:#0a0f1f; line-height:1.15; }
#contactForm .qty-input{ flex:0 0 auto; width:2.9rem; text-align:center; font-weight:700; font-size:.9rem; color:#0a0f1f; background:#f8fafc; border:1.5px solid #e5e7eb; border-radius:.5rem; padding:.45rem .2rem; transition:border-color .2s ease, background-color .2s ease; }
#contactForm .qty-input:focus{ outline:none; border-color:var(--gold); background:#fff; }

/* FAQ accordion (no JS, uses native <details>) */
.faq-item{ transition:border-color .2s ease, box-shadow .2s ease; }
.faq-item:hover{ border-color:#d6deea; }
.faq-item[open]{ border-color:var(--gold); box-shadow:0 10px 30px -18px rgba(10,15,31,.35); }
.faq-item summary{ list-style:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary{ cursor:pointer; }
.faq-item .faq-ico{ transition:transform .25s ease; }
.faq-item[open] summary .faq-ico{ transform:rotate(45deg); }

/* =====================================================================
   iOS-style polish — applied site-wide via shared/utility classes.
   site.css loads AFTER tailwind.css, so these override the utilities.
   ===================================================================== */
html{ -webkit-text-size-adjust:100%; }

/* SF system font (renders San Francisco on Apple devices, Inter elsewhere) */
body.font-sans{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter",system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
  letter-spacing:-0.011em;
}
a,button,summary{ -webkit-tap-highlight-color:transparent; }

/* Continuous, rounder "squircle"-style corners */
.rounded-lg{ border-radius:.7rem; }
.rounded-xl{ border-radius:1rem; }
.rounded-2xl{ border-radius:1.4rem; }

/* Soft, diffuse, low-contrast iOS shadows */
.shadow-lg{ box-shadow:0 10px 30px -14px rgba(10,15,31,.20); }
.shadow-xl{ box-shadow:0 20px 45px -20px rgba(10,15,31,.22); }
.shadow-2xl{ box-shadow:0 28px 60px -24px rgba(10,15,31,.30); }

/* Vibrancy: frosted, saturated blur on the sticky header & overlays */
.backdrop-blur-md{ -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); }

/* Buttons: rounder, springy easing, with a tap-press scale */
.btn-gold,.btn-ghost,.btn-dark{
  border-radius:.95rem;
  transition:transform .32s cubic-bezier(.34,1.56,.64,1), background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.btn-gold:active,.btn-ghost:active,.btn-dark:active{ transform:scale(.96); }

/* Inputs & equipment rows: softer rounded fields */
#contactForm .form-input{ border-radius:1rem; }
#contactForm .qty-row{ border-radius:.85rem; }
#contactForm .qty-input{ border-radius:.7rem; }

/* Cards: gentle spring on the hover lift */
.card-dark,.card-light{ transition:transform .4s cubic-bezier(.34,1.3,.5,1), box-shadow .35s ease, border-color .3s ease; }

/* Scroll-in reveal eased like an iOS spring */
.scroll-animate{ transition:opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1); }

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .scroll-animate{ transition:none; }
  .btn-gold:active,.btn-ghost:active,.btn-dark:active{ transform:none; }
}

/* Headings in San Francisco (SF Pro Display on Apple devices) — fuller iOS look.
   Kept heavy/black so titles stay punchy; Work Sans is the fallback. */
.font-heading{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Work Sans","Inter",system-ui,sans-serif;
}

/* Tap-press feedback on key interactive elements (iOS "press" shrink) */
#floating-cta a{ transition:transform .3s cubic-bezier(.34,1.56,.64,1), background-color .25s ease, box-shadow .25s ease; }
#floating-cta a:active{ transform:scale(.94); }
header nav a{ transition:transform .2s cubic-bezier(.34,1.56,.64,1), color .2s ease, background-color .2s ease; }
header nav a:active{ transform:scale(.94); }
.faq-item summary:active{ opacity:.6; }

/* iOS-style thin, translucent scrollbar (pointer devices) */
@media (pointer:fine){
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background:rgba(120,130,150,.45); border-radius:999px; border:2px solid transparent; background-clip:content-box; }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(120,130,150,.7); background-clip:content-box; }
}

/* Success / error modal — animated card + badge */
#messageModal:not(.hidden){ animation: modalFade .22s ease; }
#messageModal:not(.hidden) #modalCard{ animation: modalPop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes modalFade{ from{opacity:0} to{opacity:1} }
@keyframes modalPop{ from{opacity:0; transform:scale(.92) translateY(14px)} to{opacity:1; transform:none} }
.modal-badge{ display:inline-flex; align-items:center; justify-content:center; width:78px; height:78px; border-radius:9999px; font-size:34px; animation: modalBadge .55s cubic-bezier(.34,1.56,.64,1) .07s both; }
.modal-badge--ok{ background:rgba(16,185,129,.12); color:#10b981; box-shadow:0 0 0 9px rgba(16,185,129,.06); }
.modal-badge--err{ background:rgba(239,68,68,.12); color:#ef4444; box-shadow:0 0 0 9px rgba(239,68,68,.06); }
@keyframes modalBadge{ from{opacity:0; transform:scale(.3)} to{opacity:1; transform:scale(1)} }