/* ================================================================
   Thermojoule Technologies — Main Stylesheet
   File:         Code/css/styles.css
   Requirements: WR-010 (orange accent), WR-011 (modern design),
                 WR-012 (clean & professional), WR-031 (CSS3),
                 WR-040–WR-048 (marketing & aesthetic quality)
================================================================ */


/* ----------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
      All brand values are centralised here so every colour,
      spacing, and type decision is consistent and easily updated.
      — WR-010 (orange accent), WR-042 (typography), WR-044 (cohesive colour)
---------------------------------------------------------------- */
:root {
  /* ---- Accent colour: Orange (WR-010, WR-044) ----------------- */
  --color-orange:        #E8630A;
  --color-orange-light:  #FF8C42;
  --color-orange-dark:   #C4500A;
  --color-orange-glow:   rgba(232, 99, 10, 0.25);

  /* ---- Neutral palette ---------------------------------------- */
  --color-dark:          #141414;   /* main dark background         */
  --color-dark-alt:      #1E1E1E;
  --color-dark-card:     #252525;
  --color-mid:           #3A3A3A;
  --color-text:          #2E2E2E;   /* primary body text            */
  --color-text-muted:    #6B6B6B;   /* secondary / caption text     */
  --color-text-light:    #F0EDE8;   /* text on dark backgrounds     */
  --color-text-dim:      rgba(240, 237, 232, 0.65); /* muted on dark */
  --color-bg:            #FFFFFF;
  --color-bg-alt:        #F7F5F2;   /* warm off-white section bg    */
  --color-border:        rgba(0, 0, 0, 0.08);

  /* ---- Typography (WR-042: max two complementary families) ---- */
  /* Montserrat: headings — authoritative, modern, geometric       */
  /* Inter:      body     — highly legible, neutral, clean         */
  --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter',       -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Type scale --------------------------------------------- */
  --text-xs:   0.75rem;    /*  12px */
  --text-sm:   0.875rem;   /*  14px */
  --text-base: 1rem;       /*  16px */
  --text-lg:   1.125rem;   /*  18px */
  --text-xl:   1.25rem;    /*  20px */
  --text-2xl:  1.5rem;     /*  24px */
  --text-3xl:  2rem;       /*  32px */
  --text-4xl:  2.75rem;    /*  44px */
  --text-5xl:  3.75rem;    /*  60px */

  /* ---- Spacing scale ------------------------------------------ */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* ---- Layout -------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: clamp(1.5rem, 5vw, 3rem);

  /* ---- Decoration ---------------------------------------------- */
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --shadow-sm:      0 2px  8px  rgba(0, 0, 0, 0.06);
  --shadow-md:      0 8px  32px rgba(0, 0, 0, 0.10);
  --shadow-lg:      0 20px 60px rgba(0, 0, 0, 0.16);
  --shadow-orange:  0 8px  32px rgba(232, 99, 10, 0.30);
  --transition:     0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ----------------------------------------------------------------
   2. RESET & BASE
      Opinionated reset for a clean, consistent baseline across
      all browsers. Establishes base typography from the design
      tokens above. — WR-042, WR-043
---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* WR-004: native smooth scrolling for anchor navigation */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  /* Improve font rendering on macOS and Windows */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* Remove list bullets on semantic lists that carry role="list" */
ul[role="list"] {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
}


/* ----------------------------------------------------------------
   3. LAYOUT UTILITIES
      Container, section padding, and shared section variant skins.
---------------------------------------------------------------- */

/* Centred max-width container with responsive inline padding */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Default section vertical breathing room — WR-043 */
.section {
  padding-block: var(--space-3xl);
}

/* Warm off-white — used for alternating light sections */
.section--light {
  background-color: var(--color-bg-alt);
}

/* Dark — innovative, premium character (WR-047) */
.section--dark {
  background-color: var(--color-dark);
  color: var(--color-text-light);
}

/* Orange — used ONLY for the CTA section to preserve impact (WR-044) */
.section--accent {
  background-color: var(--color-orange);
  color: #fff;
}

/* Centred section header block — constrained for readability (WR-042, WR-043) */
.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
}

/* Section headline — fluid type size (WR-041, WR-042) */
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
}

.section-title--light {
  color: var(--color-text-light);
}

/* Section supporting copy */
.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 600px;
  margin-inline: auto;
}

.section-subtitle--light {
  color: var(--color-text-dim);
  margin-inline: 0; /* left-aligned in technology section */
}

/* Orange accent text — applied sparingly (WR-010, WR-044) */
.accent {
  color: var(--color-orange);
}

/* ---- Tag / pill label ---------------------------------------- */
/* Used as a section category label above headings (WR-041) */
.tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35em 1em;
  border-radius: 100px;
  background-color: rgba(232, 99, 10, 0.12);
  color: var(--color-orange);
  margin-bottom: var(--space-sm);
}

.tag--dark {
  background-color: var(--color-mid);
  color: var(--color-text-light);
}

.tag--light {
  background-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
}


/* ----------------------------------------------------------------
   4. BUTTONS
      Orange primary button is the key conversion element.
      Used deliberately at a few focal points only (WR-044).
      — WR-024, WR-041
---------------------------------------------------------------- */

/* Primary CTA button — orange fill */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.85em 2em;
  border-radius: var(--radius-sm);
  background-color: var(--color-orange);
  color: #fff;
  box-shadow: var(--shadow-orange);
  transition:
    background-color var(--transition),
    transform        var(--transition),
    box-shadow       var(--transition);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(232, 99, 10, 0.40);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Dark variant — used inside the orange CTA section so the button
   maintains legibility against the orange background (WR-044) */
.btn-primary--dark {
  background-color: var(--color-dark);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  color: #fff;
}

.btn-primary--dark:hover,
.btn-primary--dark:focus-visible {
  background-color: #000;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.40);
}

/* Ghost / text button — secondary CTA on hero */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.70);
  letter-spacing: 0.02em;
  padding: 0.85em 0;
  transition: color var(--transition);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  color: #fff;
}


/* ----------------------------------------------------------------
   5. HEADER / NAVIGATION (WR-020, WR-004)
      Fixed header. Transparent while over the hero, transitions
      to an opaque dark bar when "header--scrolled" is applied
      by JavaScript on scroll past 60 px.
---------------------------------------------------------------- */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition:
    background-color var(--transition),
    box-shadow       var(--transition);
}

/* Default transparent state (over hero section) */
.header:not(.header--scrolled) {
  background-color: transparent;
}

/* Scrolled state — WR-020: opaque, backdrop-blurred dark bar */
.header--scrolled {
  background-color: rgba(20, 20, 20, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Nav flex container */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 72px;
}

/* Logotype — WR-020 */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.nav-logo strong {
  font-weight: 700;
}

.nav-logo-icon {
  width: 28px;
  height: 28px;
  color: var(--color-orange); /* orange flame accent — WR-010, WR-044 */
  flex-shrink: 0;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  margin-left: auto; /* push to the right of the logo */
}

.nav-link {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.70);
  letter-spacing: 0.03em;
  position: relative;
  padding-bottom: 2px;
  transition: color var(--transition);
}

/* Animated underline on hover — WR-044 (orange accent used purposefully) */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-orange);
  border-radius: 1px;
  transition: width var(--transition);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: #fff;
}

.nav-link:hover::after {
  width: 100%;
}

/* Nav CTA button — compact version of btn-primary */
.nav-cta {
  flex-shrink: 0;
  padding: 0.6em 1.4em;
  font-size: var(--text-xs);
}

/* Hamburger — hidden on desktop, shown on mobile (WR-004) */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  margin-left: auto;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #fff;
  border-radius: 2px;
  transition:
    transform var(--transition),
    opacity   var(--transition);
}

/* Animated hamburger → ✕ when open */
.nav-hamburger--open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger--open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger--open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ----------------------------------------------------------------
   6. HERO SECTION (WR-021, WR-040, WR-041, WR-043, WR-047)
      Full-viewport dark section with warm orange background glow.
      The layout immediately answers "what is this company?"
      within the first 3 seconds (WR-040). Headline H1 is the
      typographically dominant element on the page (WR-041).
---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;   /* full viewport height */
  display: flex;
  align-items: center;
  background-color: var(--color-dark);
  overflow: hidden;
  padding-top: 72px; /* offset for fixed header */
}

/* Decorative warm-orange background glow — WR-047 "warm" tone */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

/* Primary warm glow — top-right */
.hero-bg-glow--1 {
  width: 600px;
  height: 600px;
  top: -100px;
  right: -100px;
  background: radial-gradient(
    circle,
    rgba(232, 99, 10, 0.18) 0%,
    transparent 70%
  );
}

/* Secondary ambient glow — bottom-left */
.hero-bg-glow--2 {
  width: 400px;
  height: 400px;
  bottom: 0;
  left: 10%;
  background: radial-gradient(
    circle,
    rgba(232, 99, 10, 0.08) 0%,
    transparent 70%
  );
}

/* Subtle dot-grid overlay: technical / precision aesthetic (WR-011) */
.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.04) 1px,
    transparent 1px
  );
  background-size: 32px 32px;
}

/* Two-column layout: text | visual (WR-043: generous whitespace) */
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-2xl);
  position: relative;
  z-index: 1; /* above .hero-bg decorations */
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

/* H1 headline — the single most prominent element on the page (WR-041) */
.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-5xl));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-dim);
  max-width: 480px;
  line-height: 1.7;
}

/* Hero CTA row */
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
}

/* Abstract heat-ring visual — placeholder until real assets arrive (WR-045) */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  max-width: 420px;
  margin-inline: auto;
}

/* Concentric ring frames */
.hero-visual-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(232, 99, 10, 0.15);
}

.hero-visual-ring--outer  { inset: 0; }
.hero-visual-ring--middle { inset: 15%; border-color: rgba(232, 99, 10, 0.25); }
.hero-visual-ring--inner  { inset: 30%; border-color: rgba(232, 99, 10, 0.40); }

/* Glowing central orb containing the flame icon */
.hero-visual-core {
  position: relative;
  width: 140px;
  height: 140px;
  background: radial-gradient(
    circle at 40% 35%,
    var(--color-orange-light),
    var(--color-orange-dark)
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0   0  1px rgba(232, 99, 10, 0.50),
    0 0  60px    rgba(232, 99, 10, 0.40),
    0 0 120px    rgba(232, 99, 10, 0.20);
}

.hero-visual-core svg {
  width: 70px;
  height: 70px;
  color: rgba(255, 255, 255, 0.92);
}

/* Animated scroll-down indicator — reinforces downward reading flow */
.hero-scroll-indicator {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.35);
  transition: color var(--transition);
  animation: scroll-bounce 2s ease-in-out infinite;
}

.hero-scroll-indicator svg {
  width: 24px;
  height: 24px;
}

.hero-scroll-indicator:hover {
  color: rgba(255, 255, 255, 0.75);
}

@keyframes scroll-bounce {
  0%,  100% { transform: translateX(-50%) translateY(0);   }
  50%        { transform: translateX(-50%) translateY(6px); }
}


/* ----------------------------------------------------------------
   7. PRODUCTS SECTION (WR-022, WR-046)
      Three product cards in a responsive grid.
      The featured (flagship) card is visually elevated with an
      orange border to draw the eye (WR-044).
---------------------------------------------------------------- */

/* 3-column grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: start;
}

/* Base card */
.product-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform    var(--transition),
    box-shadow   var(--transition);
  position: relative;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Featured card: elevated with orange accent border (WR-044) */
.product-card--featured {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 1px var(--color-orange), var(--shadow-md);
  transform: scale(1.03); /* slightly raised in resting state */
}

.product-card--featured:hover {
  transform: scale(1.03) translateY(-6px);
}

/* "Flagship" pill badge */
.product-card-badge {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--color-orange);
  color: #fff;
  padding: 0.3em 0.8em;
  border-radius: 100px;
}

/* Card visual placeholder area — coloured gradient backgrounds
   replace photography until final assets are ready (WR-045) */
.product-card-visual {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card-visual--1 {
  background: linear-gradient(135deg, #F7F0E8 0%, #EDE0D0 100%);
}

.product-card-visual--2 {
  background: linear-gradient(135deg, #2A1A0A 0%, #3D2410 100%);
}

.product-card-visual--3 {
  background: linear-gradient(135deg, #F0EBE3 0%, #E8DDD0 100%);
}

/* Inline SVG icon inside each card visual */
.product-icon {
  width: 64px;
  height: 64px;
  color: var(--color-orange);
}

/* Featured card icon is lighter for contrast against dark bg */
.product-card-visual--2 .product-icon {
  color: var(--color-orange-light);
}

.product-icon svg {
  width: 100%;
  height: 100%;
}

/* Card text body */
.product-card-body {
  padding: var(--space-md) var(--space-md) var(--space-lg);
}

.product-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-xs);
  color: var(--color-dark);
}

.product-card-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

/* Inline text link — orange to signal interactivity (WR-044) */
.product-card-link {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-orange);
  display: inline-flex;
  gap: 0.3em;
  transition: color var(--transition);
}

.product-card-link:hover {
  color: var(--color-orange-dark);
}


/* ----------------------------------------------------------------
   8. TECHNOLOGY SECTION (WR-022, WR-011)
      Dark section: two-column layout with feature list on the left
      and an animated pulsing heat-core visual on the right.
      Animation communicates heat propagation — reinforces the brand
      (WR-011, WR-047).
---------------------------------------------------------------- */

.technology-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.technology-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Feature bullet list */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.feature-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

/* Orange tick icon box — WR-044 (purposeful orange accent) */
.feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-color: rgba(232, 99, 10, 0.12);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.feature-icon svg {
  width: 16px;
  height: 16px;
  color: var(--color-orange);
}

.feature-item strong {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-light);
  display: block;
  margin-bottom: 0.3em;
}

.feature-item p {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  line-height: 1.65;
}

/* ---- Animated pulsing heat-core visual ----------------------- */
/* Represents heat propagating outward from the core (WR-011) */

.technology-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

/* Three concentric rings that expand and fade — pulse animation */
.pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(232, 99, 10, 0.25);
  animation: pulse-expand 3s ease-out infinite;
}

.pulse-ring--1 { inset:  0;   animation-delay: 0.0s; }
.pulse-ring--2 { inset: 15%;  animation-delay: 0.8s; }
.pulse-ring--3 { inset: 30%;  animation-delay: 1.6s; }

@keyframes pulse-expand {
  0%   { opacity: 0.6; transform: scale(0.95); }
  50%  { opacity: 0.3; }
  100% { opacity: 0;   transform: scale(1.08); }
}

/* Central glowing core orb */
.pulse-core {
  position: relative;
  width: 140px;
  height: 140px;
  background: radial-gradient(
    circle at 40% 35%,
    var(--color-orange-light),
    var(--color-orange-dark)
  );
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 40px rgba(232, 99, 10, 0.35),
    0 0 80px rgba(232, 99, 10, 0.20);
  color: #fff;
}

.pulse-core span {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.pulse-core small {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  opacity: 0.8;
  margin-top: 2px;
}


/* ----------------------------------------------------------------
   9. MISSION SECTION (WR-023, WR-047)
      Centred mission statement with a decorative orange bar,
      followed by three equal-width value cards.
---------------------------------------------------------------- */

/* Mission statement block */
.mission-statement {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-3xl);
}

/* Large pull-quote typography — WR-041 (visual hierarchy) */
.mission-quote {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-dark);
  letter-spacing: -0.01em;
  font-style: normal;
  position: relative;
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

/* Orange accent bar above the quote (WR-044: purposeful use) */
.mission-quote::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background-color: var(--color-orange);
  border-radius: 2px;
}

.mission-cite {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: normal;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Three values in a row */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.value-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  transition:
    transform    var(--transition),
    box-shadow   var(--transition);
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Orange icon — WR-044 (accent on focal element) */
.value-icon {
  width: 48px;
  height: 48px;
  color: var(--color-orange);
  margin-inline: auto;
  margin-bottom: var(--space-md);
}

.value-icon svg {
  width: 100%;
  height: 100%;
}

.value-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  color: var(--color-dark);
}

.value-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}


/* ----------------------------------------------------------------
   10. CONTACT / CTA SECTION (WR-024, WR-041, WR-044)
       Full orange background used only here — makes this the
       highest-contrast section on the page, directing the
       visitor's eye to the primary conversion action (WR-041).
       Orange background used once at full strength (WR-044).
---------------------------------------------------------------- */

/* Side-by-side: text left, action button right */
.cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
}

/* CTA headline */
.cta-title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--space-sm);
}

.cta-subtitle {
  color: rgba(255, 255, 255, 0.80);
  font-size: var(--text-lg);
  max-width: 520px;
  line-height: 1.7;
}

/* Action group: button + email address */
.cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.cta-email {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}


/* ----------------------------------------------------------------
   11. FOOTER (WR-025)
       Minimal dark footer with brand mark, repeat nav links,
       and copyright notice.
---------------------------------------------------------------- */

.footer {
  background-color: var(--color-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-block: var(--space-xl);
}

/* Three-column footer layout: brand | nav | copyright */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.60);
}

/* Footer nav links */
.footer-links {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
}

.footer-links a {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--transition);
}

.footer-links a:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* Copyright text — WR-025 */
.footer-copy {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  text-align: right;
  font-family: var(--font-heading);
}


/* ----------------------------------------------------------------
   12. RESPONSIVE — TABLET (WR-004)
       Breakpoint: max-width 900px
       Two-column layouts collapse; featured product card goes full
       width; technology visual stacks below the feature list.
---------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Hero: single column, centred */
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content {
    align-items: center;
  }

  .hero-subtitle {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  /* Shrink and reorder hero visual to top */
  .hero-visual {
    max-width: 280px;
    order: -1;
  }

  /* Products: 2-column grid; featured card spans full width */
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-card--featured {
    grid-column: 1 / -1;
    transform: none;
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  .product-card--featured:hover {
    transform: translateY(-6px);
  }

  .product-card--featured .product-card-visual {
    height: auto;
  }

  /* Technology: single column */
  .technology-inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .technology-visual {
    max-width: 300px;
    margin-inline: auto;
    aspect-ratio: 1;
  }

  /* Values: 2 columns */
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CTA: stack vertically, centre-align */
  .cta-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-subtitle {
    margin-inline: auto;
  }

  /* Footer: single column, centred */
  .footer-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-md);
  }

  .footer-brand {
    justify-content: center;
  }

  .footer-copy {
    text-align: center;
  }
}


/* ----------------------------------------------------------------
   13. RESPONSIVE — MOBILE (WR-004)
       Breakpoint: max-width 600px
       The mobile nav is revealed via clip-path animation when the
       hamburger is toggled. All grids reduce to single column.
---------------------------------------------------------------- */
@media (max-width: 600px) {

  /* Reduce large vertical spacing on small screens */
  :root {
    --space-3xl: 5rem;
    --space-2xl: 4rem;
  }

  /* ---- Mobile navigation overlay ----------------------------- */
  /* Show hamburger, hide desktop-only nav CTA */
  .nav-hamburger {
    display: flex;
  }

  .nav-cta {
    display: none;
  }

  /* Nav links panel — hidden by default using clip-path,
     revealed with clip-path animation on "nav-links--open" */
  .nav-links {
    position: fixed;
    top: 72px;       /* below the header bar */
    left: 0;
    right: 0;
    background-color: rgba(20, 20, 20, 0.98);
    backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: var(--space-sm) 0;
    /* Hidden state */
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }

  /* Open state — slides down into view */
  .nav-links.nav-links--open {
    clip-path: inset(0);
    pointer-events: auto;
  }

  /* Full-width tappable nav items */
  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-link {
    display: block;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-base);
  }

  /* Remove underline effect on mobile (not meaningful on touch) */
  .nav-link::after {
    display: none;
  }

  /* Products: single column */
  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-card--featured {
    grid-column: auto;
    display: block;
    transform: none;
  }

  .product-card--featured:hover {
    transform: translateY(-6px);
  }

  /* Values: single column */
  .values-grid {
    grid-template-columns: 1fr;
  }

  /* Footer nav: wrap and centre */
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
  }
}


/* ----------------------------------------------------------------
   14. ACCESSIBILITY
       Keyboard navigation focus ring and reduced-motion support.
---------------------------------------------------------------- */

/* Visible focus ring for keyboard users (uses orange accent — WR-044) */
:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Respect user preference to reduce motion — disables all
   transitions and animations (WR-004 accessibility) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}