/* Single canonical stylesheet for the Egyeurope Herbs site (index, Products, Certificates,
   Organic, profile, contact, onsubmit/onerror). Replaces the legacy inline-styled table layout
   outright — nothing from the old markup is layered over. Token names and values are kept
   identical to the sister site (portsaid) so the two can be maintained in step. */


/* ---- Design tokens ---------------------------------------------------------------------------
   Shared, verbatim, with portsaid/assets/css/main-style.css. Any change here should be made in
   both repos in the same pass — divergence between the two sites is the failure mode these
   matching names exist to prevent. */

:root {
  --color-bg: #f5f0e6;          /* warm beige page base */
  --color-surface: #fffdf8;     /* near-white card/panel surface, still warm (not pure #fff) */
  --color-primary: #5c6b4f;     /* deep olive/sage — nav, headings, primary buttons */
  --color-primary-dark: #47543d;/* olive hover/active + footer */
  --color-accent: #bb9545;      /* muted gold — highlights, icons, secondary accent */
  --color-accent-dark: #9c7b34; /* gold hover */
  --color-text: #3a362e;        /* warm dark neutral body text (deliberately not pure black) */
  --color-text-soft: #6b6559;   /* muted supporting text */
  --color-border: #e2d9c6;      /* hairline dividers on the beige base */
  --color-on-dark: #f5f0e6;     /* text on olive surfaces */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --space-2xl: 96px;

  --radius: 8px;
  --radius-lg: 16px;
  --max-width: 1120px;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* ---- Base ------------------------------------------------------------------------------------ */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.15;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--space-md); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-primary); }

/* Offset in-page anchor targets so the sticky header never covers a section heading. */
:target { scroll-margin-top: 88px; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background-color: var(--color-accent);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  z-index: 200;
}
.skip-link:focus { left: 0; }


/* ---- Buttons (component with variants, BEM-lite per STANDARDS.md section 3/6) ---------------- */

.button {
  display: inline-block;
  padding: 12px 26px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button--primary {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}
.button--primary:hover { background-color: var(--color-primary-dark); }

.button--accent {
  background-color: var(--color-accent);
  color: #fff;
}
.button--accent:hover { background-color: var(--color-accent-dark); }

.button--ghost {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.button--ghost:hover {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}


/* ---- Site header + nav ----------------------------------------------------------------------
   Egyeurope is a multi-page site (unlike portsaid's single-page locales), so nav links point at
   pages and the current page is marked with aria-current, styled below. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100; /* keeps the nav above hero media, the only positioned content near the top */
  background-color: var(--color-primary);
  color: var(--color-on-dark);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 64px;
  flex-wrap: wrap;
  padding-block: var(--space-sm);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-on-dark);
  text-decoration: none;
}

/* The logo is a dark-green wordmark on a white background, so it needs its own light plate to sit
   legibly on the olive header bar rather than being placed directly on it. */
.site-brand__logo {
  width: 168px;
  background-color: var(--color-surface);
  border-radius: var(--radius);
  padding: 6px var(--space-sm);
}

.site-brand__text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  max-width: 15ch;
  line-height: 1.3;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-block;
  padding: 8px 14px;
  border-radius: var(--radius);
  color: var(--color-on-dark);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.site-nav__link:hover { background-color: var(--color-primary-dark); }
.site-nav__link[aria-current="page"] {
  background-color: var(--color-primary-dark);
  color: var(--color-accent);
}
.site-nav__link--cta {
  background-color: var(--color-accent);
  color: #fff;
}
.site-nav__link--cta:hover { background-color: var(--color-accent-dark); }
.site-nav__link--cta[aria-current="page"] {
  background-color: var(--color-accent-dark);
  color: #fff;
}


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

.hero {
  background-color: var(--color-bg);
  padding-block: var(--space-2xl);
}
/* Sub-pages get a text-only, shallower hero; the two-column media hero is the homepage's. */
.hero--compact { padding-block: var(--space-xl); }

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  color: var(--color-accent-dark);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}
.hero__title-accent { color: var(--color-accent); }

.hero__lead {
  font-size: 1.2rem;
  color: var(--color-text);
  max-width: 46ch;
}

.hero__origin {
  color: var(--color-text-soft);
  max-width: 48ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.hero__media { position: relative; }

.hero__image {
  width: 100%;
  /* Source photography ranges from square to very tall (533x800, 456x1029); a fixed ratio keeps
     any of them from dominating the column. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 8px solid var(--color-surface);
  box-shadow: 0 10px 30px rgba(58, 54, 46, 0.14);
}

/* Second, smaller image tucked into the hero's lower corner for depth. Absolute positioning is the
   point here (it deliberately overlaps the main image), so it is dropped back into flow on narrow
   screens in the responsive block below. */
.hero__inset {
  position: absolute;
  right: -16px;
  bottom: -24px;
  width: 148px;
  border-radius: var(--radius);
  border: 6px solid var(--color-surface);
  box-shadow: 0 6px 20px rgba(58, 54, 46, 0.18);
}


/* ---- Hero highlights (icon-led trust strip) -------------------------------------------------- */

.hero-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.hero-highlight {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.hero-highlight__icon {
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--color-accent);
}
.hero-highlight__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin: 0 0 2px;
}
.hero-highlight__text {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-soft);
}


/* ---- Section shell --------------------------------------------------------------------------- */

.section {
  padding-block: var(--space-2xl);
}
.section--alt {
  background-color: var(--color-surface);
}

.section__header {
  max-width: 62ch;
  margin-bottom: var(--space-xl);
}
.section__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-md);
  color: var(--color-accent-dark);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.section__title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
}
.section__lead {
  font-size: 1.2rem;
  color: var(--color-text);
  margin-bottom: 0;
}
.section__footer {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
/* A second heading level inside one section, for a group that belongs to the same subject but
   reads as its own list — used for the supporting documents under the certificates themselves. */
.section__header--tight {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}
.section__subtitle { font-size: 1.5rem; }


/* ---- Short supporting-point cards ------------------------------------------------------------ */

.about__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
.about__points--two { grid-template-columns: repeat(2, 1fr); }
.about__point {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.section--alt .about__point { background-color: var(--color-bg); }
.about__point-title {
  font-size: 1.15rem;
  margin-bottom: var(--space-sm);
}
.about__point-text {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.98rem;
}
.about__point-text + .tag-list { margin-top: var(--space-md); }


/* ---- Icon-led grid (certifications, food-safety and organic claims) --------------------------
   Same component and class names as portsaid's quality grid, reused here for every icon + short
   statement block, so the two sites keep one shared vocabulary rather than parallel near-copies.
   Icons are inline SVG (currentColor, 0 0 24 24, round caps/joins) — no icon library. */

.quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}
.quality-item {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.section--alt .quality-item { background-color: var(--color-bg); }
.quality-item__icon {
  width: 30px;
  height: 30px;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.quality-item__title {
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}
.quality-item__text {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.95rem;
}


/* ---- Credential cards (the certifications themselves, given more weight than a plain list) --- */

.credential-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}
.credential {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
}
.section--alt .credential { background-color: var(--color-bg); }
.credential__icon {
  width: 34px;
  height: 34px;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}
.credential__name {
  font-size: 1.25rem;
  margin-bottom: var(--space-sm);
}
.credential__text {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 0.98rem;
}
.credential__meta {
  margin: 0 0 var(--space-sm);
  color: var(--color-accent-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.credential__text + .document-link { margin-top: var(--space-md); }


/* ---- Certificate documents ------------------------------------------------------------------
   A card per issued certificate: the first page of the PDF as a preview, plus the certificate
   number and validity in text. The text matters more than the preview — a full A4 page is never
   readable at card width, so the preview is a recognition cue and the PDF link is the proof. */

.certificate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.certificate {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.section--alt .certificate { background-color: var(--color-bg); }

.certificate__preview {
  display: block;
  background-color: #fff;
  border-bottom: 1px solid var(--color-border);
}
.certificate__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Anchored to the top edge: a certificate's issuer, title and the certified company name all
     sit in the upper part of the page, so that is the part worth keeping when the card crops. */
  object-position: top center;
}
.certificate__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-lg);
}
.certificate__name {
  font-size: 1.15rem;
  margin-bottom: var(--space-xs);
}
.certificate__meta {
  margin: 0 0 var(--space-sm);
  color: var(--color-accent-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.certificate__text {
  color: var(--color-text-soft);
  font-size: 0.95rem;
}

.document-link {
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.document-link:hover { color: var(--color-accent-dark); }
.document-link__meta {
  color: var(--color-text-soft);
  font-weight: 400;
  font-size: 0.85rem;
}


/* ---- Tags (product forms, sectors, category chips) ------------------------------------------- */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag {
  padding: 7px 14px;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: var(--color-on-dark);
  font-size: 0.9rem;
  font-weight: 500;
}
.tag-list--soft .tag {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  font-weight: 400;
}
.section--alt .tag-list--soft .tag { background-color: var(--color-bg); }


/* ---- Process steps (the production steps done at the facility) ------------------------------- */

.process-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: process;
}
.process-step {
  counter-increment: process;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: 600;
  color: var(--color-primary-dark);
}
.section--alt .process-step { background-color: var(--color-bg); }
.process-step::before {
  content: counter(process);
  display: block;
  color: var(--color-accent-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}


/* ---- Media band (image + text, alternating sides) -------------------------------------------- */

.media-band {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-xl);
  align-items: center;
}
.media-band--reverse .media-band__media { order: 2; }

.media-band__figure {
  margin: 0;
}
.media-band__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 8px solid var(--color-surface);
  box-shadow: 0 10px 30px rgba(58, 54, 46, 0.12);
}
.section--alt .media-band__image { border-color: var(--color-bg); }
/* For portrait originals, where a 4:3 crop would throw most of the picture away. */
.media-band__image--tall { aspect-ratio: 3 / 4; }

.media-band__caption {
  margin-top: var(--space-sm);
  color: var(--color-text-soft);
  font-size: 0.85rem;
}
.media-band__title { font-size: 1.6rem; }
.media-band__text { color: var(--color-text); }


/* ---- Photography placeholder ----------------------------------------------------------------
   Deliberately visible, not a silent grey box: these slots mark where real factory / growing
   operation photography is still needed, and should disappear from the markup once supplied. */

.photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--color-accent);
  background:
    repeating-linear-gradient(135deg,
      rgba(187, 149, 69, 0.08) 0, rgba(187, 149, 69, 0.08) 12px,
      transparent 12px, transparent 24px),
    var(--color-surface);
  color: var(--color-text-soft);
  font-size: 0.95rem;
}
/* Full-width variant: sits under a grid of cards rather than in an image slot, so it takes its
   height from the label instead of an image aspect ratio. */
.photo-placeholder--band {
  aspect-ratio: auto;
  min-height: 140px;
  margin-top: var(--space-lg);
}

.photo-placeholder__label {
  max-width: 34ch;
  margin: 0;
}
.photo-placeholder__label strong {
  display: block;
  color: var(--color-accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  margin-bottom: var(--space-sm);
}


/* ---- Site photography -----------------------------------------------------------------------
   For the company's own facility/laboratory photographs, as distinct from the product shots the
   .product-gallery handles. The sources are 760–1280px phone exports, so these components are
   sized to what that supports: a band that never has to fill more than the content column, and a
   grid whose cells stay well under the full 1120px content column. */

.photo-band {
  margin: 0 0 var(--space-lg);
}
.photo-band__image {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
}
/* Where a section is down to one photograph, the cell is capped instead of filling the content
   column — a 1000px export stretched to 1120px both upscales and reads as an accidental hero. */
.photo-grid--single { grid-template-columns: minmax(0, 560px); }
/* Spacing for photographs that follow other content in a section rather than opening it. */
.process-list + .photo-band,
.quality-grid + .photo-grid { margin-top: var(--space-xl); }
.photo-grid__figure { margin: 0; }
.photo-grid__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.photo-band__caption,
.photo-grid__caption {
  margin-top: var(--space-sm);
  color: var(--color-text-soft);
  font-size: 0.85rem;
}


/* ---- Products -------------------------------------------------------------------------------
   The legacy page was a single 108-row table of SKU + scientific name with nothing else on it.
   It is restructured here as: two led specialty features, an icon-led category scan, and the
   complete original list kept intact inside <details> so no catalogue entry is lost. */

.product-feature {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}
.section--alt .product-feature { background-color: var(--color-bg); }
.product-feature--reverse .product-feature__media { order: 2; }
.product-feature__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}
.product-feature__label {
  display: inline-block;
  margin-bottom: var(--space-sm);
  color: var(--color-accent-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.product-feature__title {
  font-size: 1.6rem;
  margin-bottom: var(--space-md);
}
.product-feature__text {
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.product-feature__scientific {
  font-style: italic;
  color: var(--color-text-soft);
}

.product-range__note {
  color: var(--color-text-soft);
  font-size: 0.98rem;
  max-width: 62ch;
  margin-bottom: var(--space-lg);
}

.product-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.product-category {
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.section--alt .product-category { background-color: var(--color-bg); }
.product-category__icon {
  width: 30px;
  height: 30px;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.product-category__title {
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
}

/* Small supporting product shots. Deliberately a modest three-up row rather than a lightbox
   gallery: these images are lower resolution than the ones led elsewhere on the site. */
.product-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}
.product-gallery__figure { margin: 0; }
.product-gallery__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}
.product-gallery__caption {
  margin-top: var(--space-sm);
  color: var(--color-text-soft);
  font-size: 0.85rem;
}

.product-full {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  padding: 0 var(--space-lg);
  margin-bottom: var(--space-xl);
}
.section--alt .product-full { background-color: var(--color-bg); }
.product-full__summary {
  cursor: pointer;
  padding: var(--space-md) 0;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.product-full__body {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-lg);
}
.product-full__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.product-full__table caption {
  text-align: left;
  color: var(--color-text-soft);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}
.product-full__table th,
.product-full__table td {
  text-align: left;
  padding: 6px var(--space-md) 6px 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.product-full__table th {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.product-full__table td:last-child {
  font-style: italic;
  color: var(--color-text-soft);
}


/* ---- Organic claims: full source text kept behind a disclosure ------------------------------- */

.longform {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-surface);
  padding: 0 var(--space-lg);
}
.section--alt .longform { background-color: var(--color-bg); }
.longform__summary {
  cursor: pointer;
  padding: var(--space-md) 0;
  font-weight: 600;
  color: var(--color-primary-dark);
}
.longform__body {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-lg);
  max-width: 72ch;
}
.longform__body h3 {
  font-size: 1.1rem;
  margin-top: var(--space-lg);
}
.longform__body h3:first-child { margin-top: 0; }
.longform__body p {
  color: var(--color-text-soft);
  font-size: 0.95rem;
}


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

.contact-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.contact-block__label {
  display: inline-block;
  margin-bottom: var(--space-md);
  color: var(--color-accent-dark);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contact-company {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-sm);
}
.contact-address {
  margin: 0;
  font-style: normal;
  color: var(--color-text);
  line-height: 1.7;
}
.contact-note {
  margin: var(--space-md) 0 0;
  color: var(--color-text-soft);
  font-size: 0.95rem;
}
.contact-note + .contact-methods { margin-top: var(--space-lg); }
.contact-methods {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-md);
}
.contact-method {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.contact-method__icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--color-accent);
  margin-top: 3px;
}
.contact-method__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}
.contact-method__value {
  color: var(--color-primary-dark);
  font-weight: 600;
  text-decoration: none;
  font-size: 1.05rem;
}
a.contact-method__value:hover { color: var(--color-accent-dark); }


/* ---- Contact form ---------------------------------------------------------------------------
   Presentation only: the field names, hidden inputs and posting target belong to the third-party
   PSoft form handler and are left exactly as they were. */

.form {
  max-width: 620px;
  padding: var(--space-xl);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.form__field {
  display: block;
  margin-bottom: var(--space-lg);
}
.form__label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 600;
  color: var(--color-primary-dark);
  font-size: 0.95rem;
}
.form__input,
.form__textarea {
  width: 100%;
  padding: 12px var(--space-md);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.form__input:focus,
.form__textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.form__textarea {
  min-height: 160px;
  resize: vertical;
}
.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.form__note {
  margin: var(--space-lg) 0 0;
  color: var(--color-text-soft);
  font-size: 0.9rem;
}


/* ---- Form result pages (onsubmit / onerror) -------------------------------------------------- */

.result {
  max-width: 60ch;
  padding: var(--space-xl);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.result__icon {
  width: 44px;
  height: 44px;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}


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

.site-footer {
  background-color: var(--color-primary-dark);
  color: var(--color-on-dark);
  padding-block: var(--space-xl);
  font-size: 14px;
}
.site-footer a { color: var(--color-accent); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-lg);
}
.site-footer__title {
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.site-footer__tagline {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.9;
}
.site-footer__note {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(245, 240, 230, 0.2);
  opacity: 0.8;
}


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

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 420px; margin-inline: auto; }
  /* The overlapping inset only reads as depth at desktop widths; below this it would crowd the
     main image, so it returns to normal flow. */
  .hero__inset { position: static; width: 120px; margin-top: var(--space-md); }
  .hero-highlights { grid-template-columns: 1fr; gap: var(--space-md); }
  .about__points,
  .about__points--two { grid-template-columns: 1fr; gap: var(--space-md); }
  .product-feature { grid-template-columns: 1fr; gap: var(--space-lg); padding: var(--space-lg); }
  .product-feature--reverse .product-feature__media { order: 0; }
  .product-categories { grid-template-columns: 1fr; gap: var(--space-md); }
  .product-gallery { grid-template-columns: 1fr; gap: var(--space-md); }
  .photo-grid,
  .photo-grid--single { grid-template-columns: 1fr; gap: var(--space-md); }
  /* A 16:7 band is a letterbox slit on a phone; the source photos are 4:3 anyway. */
  .photo-band__image { aspect-ratio: 4 / 3; }
  .media-band { grid-template-columns: 1fr; gap: var(--space-lg); }
  .media-band--reverse .media-band__media { order: 0; }
  .contact-card { grid-template-columns: 1fr; gap: var(--space-lg); padding: var(--space-lg); }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-header__inner { justify-content: center; }
  .form { padding: var(--space-lg); }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .hero { padding-block: var(--space-xl); }
  .section { padding-block: var(--space-xl); }
  .hero__actions .button { flex: 1 1 auto; text-align: center; }
  .site-brand__text { display: none; }
}