/* ==========================================================================
   VARA Limited — vara.co.nz

   Palette : #0E0E0E / #FFFFFF only.
   Theme   : black by default, matching the previous live site. Sections that
             need to invert get .section-light, which simply re-points the
             --bg / --fg tokens. Everything inside inherits, so nothing else
             in this file has to know which side it's on.
   Type    : Rubik One (display) + Rubik (body)
   Imagery : greyscale throughout, no hover reveal
   ========================================================================== */

:root {
  --black: #0E0E0E;
  --white: #FFFFFF;
  --font-display: 'Rubik One', 'Rubik', 'Arial Black', Impact, sans-serif;
  --font-body:    'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --measure: 1120px;
}

/* Dark is the default */
body,
.section-dark {
  --bg:      var(--black);
  --fg:      var(--white);
  --fg-70:   rgba(255, 255, 255, 0.86);
  --fg-45:   rgba(255, 255, 255, 0.64);
  --rule:    rgba(255, 255, 255, 0.18);
  --wash:    rgba(255, 255, 255, 0.05);
  --btn-fg:  var(--black);
  --btn-bg:  var(--white);
}

/* Inverted blocks */
.section-light {
  --bg:      var(--white);
  --fg:      var(--black);
  --fg-70:   rgba(14, 14, 14, 0.80);
  --fg-45:   rgba(14, 14, 14, 0.58);
  --rule:    rgba(14, 14, 14, 0.15);
  --wash:    rgba(14, 14, 14, 0.04);
  --btn-fg:  var(--white);
  --btn-bg:  var(--black);
}

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

html { scroll-behavior: smooth; background: var(--black); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  /* 400, not 300. Hairline strokes on a dark background are almost entirely
     subpixel fringe on Windows/ClearType, which reads as an orange cast. */
  font-weight: 400;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.6; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
ul { list-style: none; }

/* --- Typography ----------------------------------------------------------- */

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--fg);
}
h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); margin-bottom: 1.25rem; }

h3, h4 {
  font-family: var(--font-body); font-weight: 500; font-size: 1.05rem;
  margin-bottom: 0.4rem; color: var(--fg);
}

p { color: var(--fg-70); margin-bottom: 1.1rem; }
strong { font-weight: 500; color: var(--fg); }

.eyebrow {
  display: block; font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-45); margin-bottom: 1.2rem;
}
.note { color: var(--fg-45); font-size: 0.92rem; }

/* --- Layout --------------------------------------------------------------- */

.container { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }

.section {
  padding: 6rem 0;
  background: var(--bg);
  color: var(--fg);
}

.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.max-w { max-width: 700px; margin-left: auto; margin-right: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--white); color: var(--black); padding: 0.8rem 1.2rem;
}
.skip-link:focus { left: 0; }

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-block; padding: 0.9rem 2rem;
  font-family: var(--font-body); font-weight: 400; font-size: 0.95rem;
  letter-spacing: 0.02em; border-radius: 0;
  border: 1.5px solid var(--fg); cursor: pointer;
  transition: background 0.2s, color 0.2s;
  text-align: center; background: transparent; color: var(--fg);
}
.btn:hover { background: var(--fg); color: var(--bg); opacity: 1; }

.btn-filled { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.btn-filled:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-filled:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-sm { padding: 0.55rem 1.3rem; font-size: 0.85rem; }

/* --- Header --------------------------------------------------------------- */

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 14, 14, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 92px;
}
.logo img { height: 58px; width: auto; }

.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav a { font-size: 0.9rem; letter-spacing: 0.03em; color: var(--white); }
.nav a.active { color: rgba(255, 255, 255, 0.6); }

/* `.nav a` (0,1,1) out-specifies `.btn-filled` (0,1,0), which made the
   header CTA white text on a white fill. Re-assert the button colours. */
.nav a.btn-filled { color: var(--black); background: var(--white); border-color: var(--white); }
.nav a.btn-filled:hover { color: var(--white); background: transparent; }

.mobile-toggle {
  display: none; background: none; border: none;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: var(--white); padding: 0.3rem 0.4rem;
}

/* --- Media bands ---------------------------------------------------------- */

/* Full-bleed greyscale image strip used between sections */
.band {
  position: relative; overflow: hidden;
  background: var(--black);
  height: clamp(220px, 30vw, 380px);
}
.band img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(100%) contrast(0.95);
  opacity: 0.75;
}
.band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14,14,14,0.55), rgba(14,14,14,0.2) 45%, rgba(14,14,14,0.75));
}

.figure {
  border: 1px solid var(--rule);
  background: var(--black);
}
.figure img { width: 100%; filter: grayscale(100%); opacity: 0.85; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative; min-height: 88vh;
  display: flex; align-items: center;
  background: var(--black); color: var(--white);
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(to right, rgba(14,14,14,0.90) 0%, rgba(14,14,14,0.62) 60%, rgba(14,14,14,0.80) 100%),
    url('../images/hero.jpg') center/cover no-repeat;
  filter: grayscale(100%);
}
.hero-content { position: relative; z-index: 1; max-width: 680px; padding: 5rem 0; }
.hero h1 { color: var(--white); margin-bottom: 1.4rem; }
.hero .lead { font-size: 1.15rem; line-height: 1.75; color: rgba(255,255,255,0.90); margin-bottom: 2.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Section with a photographic backdrop */
.section-media { position: relative; overflow: hidden; }
.section-media > .media-bg {
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover;
  filter: grayscale(100%);
  opacity: 0.28;
}
.section-media > .media-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14,14,14,0.55), rgba(14,14,14,0.85));
}
.section-media > .container { position: relative; z-index: 1; }

/* --- Services ------------------------------------------------------------- */

.services-list {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.75rem 3rem; max-width: 840px; margin: 2.5rem auto 0;
}
.services-list li {
  position: relative; padding-left: 1.4rem;
  color: var(--fg-70); font-size: 0.98rem;
}
.services-list li::before { content: "–"; position: absolute; left: 0; color: var(--fg); }

/* --- Portal --------------------------------------------------------------- */

.portal-box {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 3.5rem; align-items: start;
}
.portal-features { display: flex; flex-direction: column; gap: 1.5rem; }
.portal-feature { display: flex; gap: 1rem; align-items: flex-start; }
.portal-feature .num {
  font-family: var(--font-display); font-size: 1.05rem;
  color: var(--fg); min-width: 1.7rem;
}
.portal-feature strong { display: block; margin-bottom: 0.2rem; }
.portal-feature p { margin: 0; font-size: 0.92rem; color: var(--fg-70); }

/* --- Why us --------------------------------------------------------------- */

.why { max-width: 780px; }
.why ul { margin-top: 1.5rem; }
.why li {
  position: relative; padding-left: 1.5rem;
  margin-bottom: 0.7rem; color: var(--fg-70);
}
.why li::before { content: "→"; position: absolute; left: 0; color: var(--fg); }
.why a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Vision --------------------------------------------------------------- */

.vision-grid {
  display: grid; grid-template-columns: 1fr 1.35fr;
  gap: 4rem; align-items: center;
}
.vision-card .quote { font-size: 1.25rem; line-height: 1.7; color: var(--fg); margin-bottom: 2rem; }
.vision-attrib { margin-bottom: 1.6rem; }
.vision-attrib strong { display: block; font-weight: 500; }
.vision-attrib span { font-size: 0.88rem; color: var(--fg-45); }

/* --- Contact -------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 4rem; margin-top: 3rem; }
.contact-item { margin-bottom: 1.6rem; }
.contact-item .label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-45); margin-bottom: 0.25rem;
}

.contact-figure { margin-top: 2.5rem; }

.form-group { margin-bottom: 1.3rem; }
.form-group label {
  display: block; font-size: 0.8rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-45); margin-bottom: 0.45rem;
}

/* Underline fields, as on the previous site */
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%; padding: 0.7rem 0.1rem;
  border: none; border-bottom: 1px solid var(--rule); border-radius: 0;
  font-family: inherit; font-weight: 400; font-size: 0.98rem;
  color: var(--fg); background: transparent;
  transition: border-color 0.2s;
}
.form-group select option { background: var(--black); color: var(--white); }
.section-light .form-group select option { background: var(--white); color: var(--black); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--fg-45); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { outline: none; border-bottom-color: var(--fg); }
.form-group textarea { min-height: 130px; resize: vertical; }
.form-group input[type="file"] {
  border: 1px solid var(--rule); padding: 0.7rem; font-size: 0.85rem;
}
.form-group input[type="file"]::file-selector-button {
  background: transparent; color: var(--fg);
  border: 1px solid var(--rule); padding: 0.35rem 0.9rem;
  margin-right: 0.8rem; font-family: inherit; cursor: pointer;
}
.field-hint { font-size: 0.78rem; color: var(--fg-45); margin-top: 0.4rem; }
.form-note { font-size: 0.8rem; color: var(--fg-45); margin-top: 1rem; }
.form-note a, .contact-item a { text-decoration: underline; text-underline-offset: 3px; }

.form-status {
  display: none; margin-top: 1rem; padding: 0.9rem 1.1rem;
  font-size: 0.9rem; border-left: 3px solid var(--fg);
  background: var(--wash); color: var(--fg);
}
.form-status.is-visible { display: block; }
.form-status.is-error { border-left-style: dashed; }

.form-unconfigured {
  display: none; margin-bottom: 1.5rem; padding: 0.95rem 1.1rem;
  font-size: 0.88rem; border: 1px dashed var(--rule); color: var(--fg-70);
}
.form-unconfigured.is-visible { display: block; }
.form-unconfigured a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Footer --------------------------------------------------------------- */

.footer {
  background: var(--black); color: rgba(255,255,255,0.86);
  padding: 4rem 0 2rem; border-top: 1px solid rgba(255,255,255,0.14);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer h4 {
  color: var(--white); font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.2rem;
}
.footer p { color: rgba(255,255,255,0.86); }
.footer li { margin-bottom: 0.55rem; }
.footer-legal { font-size: 0.82rem; color: rgba(255,255,255,0.64); margin-top: 1.4rem; line-height: 1.8; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14); padding-top: 1.5rem;
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.64);
}

/* --- Interior pages ------------------------------------------------------- */

.page-hero {
  position: relative; overflow: hidden;
  background: var(--black); color: var(--white);
  padding: 6rem 0 5rem; text-align: center;
}
.page-hero .media-bg {
  position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover;
  filter: grayscale(100%); opacity: 0.3;
}
.page-hero .media-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(14,14,14,0.7), rgba(14,14,14,0.9));
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); }
.page-hero p { color: rgba(255,255,255,0.7); margin-top: 0.6rem; }

.prose { max-width: 700px; margin: 0 auto; }
.prose p { font-size: 1.05rem; margin-bottom: 1.4rem; }
.prose h2 { margin-top: 3rem; margin-bottom: 1rem; }
.prose ul { margin: 0 0 1.6rem 1.2rem; list-style: disc; color: var(--fg-70); }
.prose li { margin-bottom: 0.5rem; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose hr { border: none; border-top: 1px solid var(--rule); margin: 3rem 0 1.5rem; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .portal-box, .contact-grid, .footer-grid, .vision-grid { grid-template-columns: 1fr; }
  .vision-grid { gap: 2.5rem; }
  .services-list { grid-template-columns: 1fr; }

  .nav { display: none; }
  .mobile-toggle { display: block; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: absolute; top: 92px; left: 0; right: 0;
    background: var(--black); padding: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.14); gap: 1.2rem;
  }
}

@media (max-width: 600px) {
  .section { padding: 4.5rem 0; }
  .header-inner { height: 74px; }
  .nav.is-open { top: 74px; }
  .logo img { height: 46px; }
  .hero { min-height: 80vh; }
  .hero-actions .btn { width: 100%; }
}

/* ==========================================================================
   OPTIONAL — subpixel antialiasing fringe
   --------------------------------------------------------------------------
   On Windows, Chromium and Edge render text with RGB subpixel antialiasing
   (ClearType). On a dark background this puts an orange edge on one side of
   every stroke and a blue edge on the other. At normal zoom it can read as a
   warm/orange cast across the whole page.

   There is no CSS property that turns this off on Windows. The only reliable
   trick is to force each section onto its own compositor layer, which makes
   Chromium fall back to greyscale antialiasing. I measured this at exactly
   zero colour fringing — but it costs GPU memory, and on some setups layered
   text renders slightly softer.

   It is off by default because the tradeoff is real. If you see an orange
   cast on your machine, delete the two comment markers below and reload.
   ========================================================================== */

/*
.section, .hero, .page-hero, .footer, .header { will-change: transform; }
*/