/* Alveron Group — Industrial Export Design System (Clean)
   Principles: restrained, grid-based, process-driven, audit-ready.
*/

:root {
  /* Colour system */
  --bg: #F5F3EE;              /* neutral stone background for highlighted sections */
  --surface: #ffffff;         /* white surface */
  --band: #eef2f5;            /* very light blue-grey band (kept for future use) */
  --ink: #1f252b;             /* charcoal */
  --muted: #55616b;           /* muted charcoal */
  --blue: #F5F3EE;            /* primary button + accents */
  --accent: #cfe7e3;          /* pale aqua (sparingly) */
  --accent-2: #ead6df;        /* soft powder pink (sparingly) */
  --line: #d8d2c9;            /* stone divider */
  --focus: rgba(47, 85, 111, 0.35);

  /* Layout */
  --maxw: 1200px;
  --gutter: 24px;
  --radius: 10px;

  /* Typography */
  --sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Inter", "Source Sans 3", "IBM Plex Sans", sans-serif;
  --brand: "Chillax", "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "IBM Plex Mono", monospace;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--surface); /* match Section 1 band background */
  line-height: 1.55;
  font-weight: 400;
  /* allow floating fixed header without leaving a visible band */
  padding-top: 86px;
}
@media (max-width: 640px) {
  body { padding-top: 0; }
  /* Default: hide the floating desktop header on mobile (Home included) */
  .header { display: none !important; }

  /* Mobile header enabled on selected pages (Manufacturing + Contact) */
  body.page-manufacturing,
  body.page-contact { padding-top: 64px; }

  body.page-manufacturing .header,
  body.page-contact .header {
    display: block !important;
    top: 10px;
    width: calc(100% - 20px);
    border-radius: 14px;
  }

  body.page-manufacturing .nav,
  body.page-contact .nav {
    height: auto;
    padding: 8px 10px;
  }

  body.page-manufacturing .brand,
  body.page-contact .brand { display: none; }

  body.page-manufacturing .nav-links,
  body.page-contact .nav-links {
    justify-content: center;
    gap: 12px;
  }

  body.page-manufacturing .nav-links a,
  body.page-contact .nav-links a { font-size: 13px; }
}

/* keep the site canvas warm stone while the header clearance area stays white */
main { background: var(--bg); }

/* Match top clearance area to page background (Contact) */
body.page-contact { background: var(--bg); }
body.page-contact .footer { background: var(--surface); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

/* Base layout */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

.header {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - (var(--gutter) * 2));
  max-width: var(--maxw);
  margin: 0;
  /* lighter transparent grey glass */
  background: rgba(160, 165, 170, 0.14);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(31, 37, 43, 0.10);
  border-radius: 16px;
  box-shadow: none;
}

@media (max-width: 640px) {
  .header {
    top: 10px;
    border-radius: 14px;
    width: calc(100% - 20px);
  }
}
.nav {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  height: 56px;
  padding: 0 12px;
}
.brand {
  font-family: var(--brand);
  font-weight: 600;
  letter-spacing: 0.2px;
  justify-self: start;
  color: #000;
  white-space: nowrap;
}
.brand-link { display: inline-block; }

.nav-links {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}
.nav-links a { color: var(--ink); font-weight: 500; white-space: nowrap; }
.nav-links a[aria-current="page"] { color: #000; }

@media (max-width: 640px) {
  .nav {
    grid-template-columns: 1fr;
    height: auto;
    padding: 10px 12px;
    row-gap: 10px;
  }
  .nav-links {
    justify-content: flex-start;
    gap: 14px;
  }
}

/* Mobile detection (more reliable on real phones): hide header everywhere by default,
   then allow it on Manufacturing/Contact where we want the mini header.
   Applies to touch devices and smaller viewports.
*/
/* Mobile behaviour: on touch devices, remove the desktop header everywhere by default.
   Then explicitly allow the mini header on Manufacturing/Contact.
*/
@media (pointer: coarse), (hover: none) {
  body:not(.page-manufacturing):not(.page-contact) .header { display: none !important; }
  body.page-manufacturing .header,
  body.page-contact .header { display: block !important; }
}

main { padding: 0; }

/* 12-column grid utilities */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.col-12 { grid-column: span 12; }
.col-10 { grid-column: span 10; }

/* Centered 10-column block (equal left/right whitespace) */
.col-center-10 { grid-column: 2 / span 10; }
.col-9 { grid-column: span 9; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }

@media (max-width: 980px) {
  .grid { gap: 18px; }
  .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2 { grid-column: span 12; }
  .col-center-10 { grid-column: span 12; }
}

/* Product specs: keep 3-up layout on desktop (avoid collapsing col-4 to full width) */
@media (max-width: 980px) {
  .product-specs-grid .col-4 { grid-column: span 12; }
}
@media (min-width: 981px) {
  .product-specs-grid .col-4 { grid-column: span 4; }
}

/* Section rhythm */
.section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Remove the top divider line on the first band (so the white header clearance blends cleanly) */
.band-first { border-top: none; }

/* Surface section without band borders (used for Contact form background) */
.surface-section { background: var(--surface); }

/* Contact page: make the intro band shorter so the form button is visible sooner */
.contact-intro { padding: 32px 0; background: var(--bg); color: var(--ink); }
.contact-intro .kicker, .contact-intro .p { color: var(--muted); }
.contact-intro .h0 { color: var(--ink); }
.contact-intro.band { border-top-color: rgba(31,37,43,0.18); border-bottom-color: rgba(31,37,43,0.18); }
.contact-intro .h0 { font-size: clamp(22px, 4vw, 32px); margin-bottom: 8px; }
.contact-intro .kicker { margin-bottom: 6px; }
.contact-intro .p { font-size: 15px; }
@media (max-width: 640px) {
  .contact-intro { padding: 22px 0; }
  .contact-intro .p { font-size: 14px; }
}

/* Small callout for operational notes */
.note-callout {
  background: rgba(251, 250, 248, 0.9);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
}

.band-bluegrey { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Sections using --bg (light blue): use dark text */
.home-framework { background: var(--bg); color: var(--ink); }
.home-product-bg { background: var(--bg); color: var(--ink); }

.home-framework .kicker,
.home-product-bg .kicker,
.home-framework .mono,
.home-product-bg .mono,
.home-framework .note,
.home-product-bg .note,
.home-framework .p,
.home-product-bg .p { color: var(--muted); }

.home-framework .h1,
.home-product-bg .h1 { color: var(--ink); }

.home-framework .flow-step { border-top-color: rgba(31,37,43,0.18); }
.home-framework .flow-step .n { color: rgba(31,37,43,0.70); }
.home-framework .flow-step .t { color: var(--ink); }

.home-product-bg ul.bullets { color: var(--muted); }
.home-product-bg ul.bullets li::marker { color: rgba(31,37,43,0.45); }

.home-product-bg .spec-subhead { color: #000000; }

/* Generic blue section background */
.blue-section { background: var(--bg); color: var(--ink); }
.blue-section .kicker,
.blue-section .mono,
.blue-section .note,
.blue-section .p,
.blue-section dt,
.blue-section dd { color: var(--muted); }
.blue-section .h0,
.blue-section .h1 { color: var(--ink); }
.blue-section .flow-step { border-top-color: rgba(31,37,43,0.18); }
.blue-section .flow-step .n { color: rgba(31,37,43,0.70); }
.blue-section .flow-step .t { color: var(--ink); }

/* Home sections on blue background */
.home-blue { background: var(--bg); color: var(--ink); }
.home-blue .kicker,
.home-blue dt,
.home-blue dd,
.home-blue .note,
.home-blue .p { color: var(--muted); }
.home-blue a { color: var(--ink); }
.home-blue .spec dd { color: var(--muted); }
.home-blue .spec dt { color: rgba(31,37,43,0.70); }
.home-blue .spec-row { gap: 18px 24px; }
@media (max-width: 640px) {
  .home-blue .spec { border-top-color: rgba(31,37,43,0.18); }
}
.band-accent { background: linear-gradient(180deg, rgba(234,214,223,0.28), rgba(251,250,248,0.0)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.divider { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Type */
.kicker { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.h0 { font-size: clamp(30px, 4.1vw, 44px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 14px; font-weight: 600; }
.h1 { font-size: 20px; letter-spacing: -0.01em; margin: 0 0 10px; font-weight: 600; }
.p { color: var(--muted); margin: 0; max-width: 72ch; }

.link-inline { color: var(--ink); border-bottom: 1px solid rgba(31,37,43,0.25); padding-bottom: 1px; }
.link-inline:hover { border-bottom-color: rgba(31,37,43,0.55); }

/* Spec blocks (no boxes) */
.spec-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.spec { padding: 8px 0; }
.spec dt { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.spec dd { margin: 0; font-weight: 500; color: var(--ink); }
.spec-row-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 980px) { .spec-row-5 { grid-template-columns: 1fr; } }

/* Mobile-only: Company Snapshot (framework-style vertical stack) */
@media (max-width: 640px) {
  .spec-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .spec {
    padding: 14px 0;
    border-top: 1px solid var(--line);
  }
  .spec:first-child { border-top: none; }
  .spec dt {
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: 0.06em;
  }
  .spec dd { line-height: 1.65; font-size: 13px; margin: 0; }
}

/* Divided statements */
.divided { border-top: 1px solid var(--line); }
.divided > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.divided .mono { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* Process flow (default: compact horizontal steps) */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; align-items: start; }
.flow-step { border-top: 1px solid var(--line); padding-top: 24px; padding-bottom: 18px; }
.flow-step .n { font-family: var(--mono); font-size: 15px; color: var(--ink); opacity: 0.70; letter-spacing: 0.06em; }
.flow-step .t { margin-top: 12px; font-weight: 600; }
.flow-step .note { margin-top: 12px; line-height: 1.78; }
@media (max-width: 980px) { .flow { grid-template-columns: 1fr; } }

/* Mobile tuning: Production Framework typography */
@media (max-width: 640px) {
  .home-framework .h1 { font-size: 18px; }
  .home-framework .flow { gap: 14px; }
  .home-framework .flow-step { padding-top: 16px; padding-bottom: 12px; }
  .home-framework .flow-step .n { font-size: 13px; }
  .home-framework .flow-step .t { font-size: 14px; margin-top: 10px; }
  .home-framework .flow-step .note { font-size: 13px; line-height: 1.65; margin-top: 10px; }
}


/* Lists */
ul.clean { list-style: none; padding: 0; margin: 0; }
ul.clean li { margin: 10px 0; }

/* Product specs helpers */
.product-specs-right { padding-left: 18px; }
@media (max-width: 980px) { .product-specs-right { padding-left: 0; } }

.spec-subhead {
  color: #000;
  opacity: 1;
  font-size: 14px;
  letter-spacing: 0.06em;
  /* ensure bullets align even if headings wrap */
  display: flex;
  align-items: flex-end;
  min-height: 2.4em;
}

ul.bullets {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  list-style: disc;
}
ul.bullets li { margin: 10px 0; }

/* Align spec columns neatly */
.product-specs-grid { align-items: start; }
.product-specs-grid .col-4 { padding-top: 0; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { margin: 10px 0; padding-left: 18px; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); opacity: 0.35; }

/* Forms (minimal) */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.label { font-size: 13px; color: var(--muted); letter-spacing: 0.02em; }
.input, .select, .textarea {
  background: rgba(251,250,248,0.9);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
}
.textarea { min-height: 120px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; }

.actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-weight: 500;
}
.btn-primary { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.btn-primary:hover { filter: brightness(0.95); }

@media (max-width: 640px) {
  .btn { padding: 8px 12px; font-size: 14px; }
}

/* Footer */
.footer { padding: 34px 0; border-top: 1px solid var(--line); background: var(--surface); }
.footer .footgrid { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.footer .links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.footer small { display: block; color: var(--muted); margin-top: 10px; }
@media (max-width: 980px) { .footer .footgrid { grid-template-columns: 1fr; } .footer .links { justify-content: flex-start; } }

/* Contact: center the direct contact block within the right column */
.contact-details-col {
  display: flex;
  justify-content: flex-end;
  padding-right: 0;
}
.contact-details-col > .divided {
  width: 100%;
  max-width: 420px;
}
@media (max-width: 980px) {
  .contact-details-col { justify-content: flex-start; }
  .contact-details-col > .divided { max-width: none; }
}

/* Minimal motion (optional fade-in only) */
.fade-in { opacity: 0; transform: translateY(4px); }
.fade-in.visible { opacity: 1; transform: none; transition: opacity 240ms ease, transform 240ms ease; }

/* Small utility */
.mono { font-family: var(--mono); }
.note { color: var(--muted); font-size: 13px; }
.narrow { max-width: 72ch; }