@charset "UTF-8";
/* ==========================================================================
   IRFAN MECHANICAL ELEVATORS — main.css
   The single stylesheet for the whole website.

   01 Tokens  02 Reset  03 Typography  04 Layout  05 Section headings
   06 Buttons  07 Cards  08 Forms  09 Tables  10 Media  11 Primitives
   12 Utilities  13 Header  14 Mobile menu  15 Footer  16 Home
   17 Inner pages  18 Gallery/contact  19 Motion  20 Print

   Colours are declared ONCE, in section 01. No colour value is written
   anywhere else. Gold is never used for small text on a light background
   (2.8:1, fails AA) — only for rules, icons and text on navy (5.1:1).
   Corners are 4px maximum. See README-HANDOVER.md for the full notes.
   ========================================================================== */

/* 01. DESIGN TOKENS — the only place colours are defined */

:root {

  /* Brand colours — THE ONLY PLACE COLOURS ARE DEFINED. Change a value here and it updates */
  --navy:         #16294A;   /* primary — header, footer, headings */
  --navy-deep:    #0E1B33;   /* footer base, image overlays */
  --navy-tint:    #F0F3F8;   /* alternating section backgrounds */
  --gold:         #B78D4E;   /* accent — CTAs, rules, icons */
  --gold-light:   #D4B478;   /* hover states, gradients, text on navy */
  --ivory:        #F7F5F0;   /* page background */
  --steel:        #8A9099;   /* metal accents, borders, muted text on navy */
  --white:        #FFFFFF;
  --text:         #1A1F29;   /* body copy */

  /* Functional colours. Not part of the brand palette — used only to tell a */
  --error:        #A32B1F;

  /* The same colours as raw red/green/blue numbers, so that see-through */
  --navy-rgb:      22, 41, 74;
  --navy-deep-rgb: 14, 27, 51;
  --gold-rgb:     183, 141, 78;
  --text-rgb:      26, 31, 41;
  --white-rgb:    255, 255, 255;
  --error-rgb:    163, 43, 31;

  /* Derived colours */
  --text-muted:      rgba(var(--text-rgb), .72);   /* passes AA on ivory and white */
  --text-on-navy:    rgba(var(--white-rgb), .82);
  --line:            rgba(var(--navy-rgb), .12);   /* default hairline */
  --line-strong:     rgba(var(--navy-rgb), .22);
  --line-on-navy:    rgba(var(--white-rgb), .16);
  --surface:         var(--white);
  --overlay-navy:    linear-gradient(180deg, rgba(var(--navy-deep-rgb), .35) 0%, rgba(var(--navy-deep-rgb), .72) 60%, rgba(var(--navy-deep-rgb), .92) 100%);
  --overlay-navy-side: linear-gradient(90deg, rgba(var(--navy-deep-rgb), .90) 0%, rgba(var(--navy-deep-rgb), .62) 45%, rgba(var(--navy-deep-rgb), .25) 100%);
  --gold-gradient:   linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);

  /* Typography — Barlow Condensed for headings, Inter for body. Both are loaded from */
  --font-head: "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale — grows smoothly between a phone and a large monitor */
  --fs-xs:      0.75rem;
  --fs-sm:      0.8125rem;
  --fs-base:    clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --fs-lg:      clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
  --fs-xl:      clamp(1.1875rem, 1.12rem + 0.34vw, 1.375rem);
  --fs-h4:      clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --fs-h3:      clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --fs-h2:      clamp(1.75rem, 1.42rem + 1.62vw, 2.75rem);
  --fs-h1:      clamp(2.125rem, 1.66rem + 2.30vw, 3.5rem);
  --fs-display: clamp(2.5rem, 1.71rem + 3.90vw, 4.5rem);

  --lh-tight:   1.08;
  --lh-heading: 1.16;
  --lh-body:    1.7;

  --ls-head:    0.045em;   /* letter-spacing on condensed headings */
  --ls-wide:    0.16em;    /* small uppercase labels */

  /* Spacing — a 4px scale */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-11: 6rem;

  /* Layout */
  --container:      1200px;
  --container-wide: 1440px;
  --container-text:  72ch;
  --gutter:         clamp(1.25rem, 4vw, 3rem);
  --section-y:      clamp(3.5rem, 7vw, 7rem);
  --grid-gap:       clamp(1.25rem, 2.4vw, 2rem);

  /* Shape, shadow and motion */
  --radius:    4px;   /* maximum radius anywhere on the site */
  --radius-sm: 2px;

  --shadow-sm: 0 1px 2px rgba(var(--navy-rgb), .06), 0 2px 6px rgba(var(--navy-rgb), .05);
  --shadow-lg: 0 4px 10px rgba(var(--navy-rgb), .07), 0 22px 48px rgba(var(--navy-rgb), .14);

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --dur-fast:  .16s;
  --dur:       .28s;
  --dur-slow:  .5s;

  --header-h:  84px;   /* full height of the sticky header */
  --header-h-condensed: 64px;
  --z-header:  100;
  --z-menu:    200;
  --z-lightbox: 300;
}

/* 02. RESET AND BASE ELEMENTS */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  min-height: 100vh;
  background-color: var(--ivory);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Stop the page shifting sideways when a wide element misbehaves */
body { overflow-x: hidden; }

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; }

p,
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul, ol { padding: 0; list-style: none; }

hr {
  height: 1px;
  border: 0;
  background-color: var(--line);
}

::selection {
  background-color: var(--navy);
  color: var(--white);
}

/* Links — Navy underlined links on light backgrounds; gold on navy backgrounds. */

a {
  color: var(--navy);
  text-decoration-color: rgba(var(--navy-rgb), .35);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}

a:hover { text-decoration-color: var(--gold); }

/* Focus rings — Every interactive element shows a clear, high-contrast ring when reached */

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* On a dark background a navy ring is invisible, so it turns gold */
.on-navy :focus-visible,
.on-navy:focus-visible,
.hero :focus-visible,
.site-header--transparent:not(.is-condensed) :focus-visible {
  outline-color: var(--gold-light);
}

/* Sections placed on a navy background */

.on-navy {
  background-color: var(--navy);
  color: var(--text-on-navy);
}

.on-navy h1,
.on-navy h2,
.on-navy h3,
.on-navy h4 { color: var(--white); }

.on-navy a { color: var(--gold-light); }
.on-navy a:hover { color: var(--white); }

/* 03. TYPOGRAPHY */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--navy);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }
h5 { font-size: var(--fs-lg);  font-weight: 600; }
h6 { font-size: var(--fs-base); font-weight: 600; letter-spacing: var(--ls-wide); }

/* Oversized hero headline */
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 700;
}

p { max-width: var(--container-text); }
p + p { margin-top: var(--space-4); }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--text-muted);
}

strong, b { font-weight: 600; }

small { font-size: var(--fs-sm); }

/* Body copy blocks, used on About and product pages */
.prose > * + * { margin-top: var(--space-4); }
.prose p { color: var(--text-muted); }
.prose h2,
.prose h3 { margin-top: var(--space-7); color: var(--navy); }

/* 04. LAYOUT — container, section, grid */

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

.container--wide { max-width: var(--container-wide); }
.container--text { max-width: calc(var(--container-text) + var(--gutter) * 2); }

.section { padding-block: var(--section-y); }
.section--tint  { background-color: var(--navy-tint); }

/* Grid — Mobile first: everything is a single column until there is room. */

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 600px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Two columns of unequal width — image left, copy right */
.split {
  display: grid;
  gap: var(--grid-gap);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); }
  .split--wide-copy { grid-template-columns: 5fr 6fr; }
}

.stack        { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--tight { gap: var(--space-2); }

/* 05. SECTION HEADINGS, EYEBROWS AND RULES */

/* The small uppercase label that sits above a section heading. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--navy);
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  flex: none;
  background-color: var(--gold);
}

.on-navy .eyebrow { color: var(--gold-light); }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--container-text);
  margin-bottom: var(--space-8);
}

.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.section-head--center .eyebrow { justify-content: center; }

/* The short gold rule under a section heading */
.section-head__title {
  position: relative;
  padding-bottom: var(--space-4);
}

.section-head__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: var(--gold-gradient);
}

.section-head--center .section-head__title::after {
  left: 50%;
  transform: translateX(-50%);
}

/* 06. BUTTONS */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;              /* comfortable tap target on a phone */
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn__icon {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__icon { transform: translateX(3px); }

/* Primary — gold fill with navy lettering. Navy on gold is 5.1:1, which */
.btn--primary {
  background: var(--gold-gradient);
  color: var(--navy);
  box-shadow: 0 2px 10px rgba(var(--gold-rgb), .28);
}

.btn--primary:hover {
  background: var(--gold-light);
  box-shadow: 0 6px 18px rgba(var(--gold-rgb), .38);
}

/* Outlined, for a light background */
.btn--outline {
  border-color: var(--line-strong);
  color: var(--navy);
  background-color: transparent;
}

.btn--outline:hover {
  border-color: var(--navy);
  background-color: var(--navy);
  color: var(--white);
}

/* Outlined, for a dark image or navy band */
.btn--ghost {
  border-color: rgba(var(--white-rgb), .5);
  color: var(--white);
  background-color: rgba(var(--white-rgb), .06);
  backdrop-filter: blur(2px);
}

.btn--ghost:hover {
  border-color: var(--white);
  background-color: var(--white);
  color: var(--navy);
}

.btn--sm    { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.btn--lg    { min-height: 56px; padding: var(--space-4) var(--space-8); font-size: var(--fs-lg); }
.btn--block { display: flex; width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* A text link that acts as a call to action, with a moving arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
}

.link-arrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background-color: var(--gold);
  transition: width var(--dur) var(--ease);
}

.link-arrow:hover::after { width: 34px; }
.on-navy .link-arrow { color: var(--gold-light); }

/* 07. CARDS */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* Cards lift 4px on hover. Also applies on keyboard focus so the effect is */
.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--gold-rgb), .5);
}

.card__media {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-tint);
  aspect-ratio: 4 / 3;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.card:hover .card__media img { transform: scale(1.05); }

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  padding: var(--space-5);
}

.card__title {
  font-size: var(--fs-h4);
  color: var(--navy);
}

.card__text {
  flex: 1;
  font-size: var(--fs-base);
  color: var(--text-muted);
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* Makes the whole card clickable while keeping one real, readable link for */
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* A card with no photograph — values, features, process steps */
.card--plain {
  padding: var(--space-6);
  gap: var(--space-3);
}

.card--plain .card__body { padding: 0; }

/* The gold rule along the top edge of a card on hover */
.card--accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gold-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.card--accent:hover::before,
.card--accent:focus-within::before { transform: scaleX(1); }

/* Icon holder for the Why-choose-us and process blocks */
.icon-box {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: none;
  border: 1px solid rgba(var(--gold-rgb), .4);
  border-radius: var(--radius);
  background-color: rgba(var(--gold-rgb), .08);
  color: var(--gold);
}

.icon-box svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.on-navy .icon-box {
  border-color: rgba(var(--gold-rgb), .55);
  background-color: rgba(var(--white-rgb), .05);
  color: var(--gold-light);
}

/* 08. FORMS */

.form { display: grid; gap: var(--space-5); }

@media (min-width: 700px) {
  .form--2col { grid-template-columns: repeat(2, 1fr); }
  .form--2col .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field__label {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--navy);
}

/* The asterisk on a required field. Screen readers are told "required" */
.field__req {
  color: var(--gold);
  margin-left: 2px;
}

.field__hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 50px;
  padding: var(--space-3) var(--space-4);
  background-color: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.input::placeholder,
.textarea::placeholder { color: var(--steel); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--steel); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb), .14);
}

.textarea {
  min-height: 150px;
  resize: vertical;
  line-height: 1.6;
}

/* Native select with a drawn arrow. The arrow is an inline SVG written as a */
.select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316294A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 18px 18px;
  cursor: pointer;
}

/* Validation — Colour is never the only signal — a written message accompanies every */

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--error);
  background-color: rgba(var(--error-rgb), .04);
}

.input[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(var(--error-rgb), .16);
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--error);
}

.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  border-radius: 50%;
  background-color: var(--error);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Message shown above the form after a failed submission */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel);
  border-radius: var(--radius);
  background-color: var(--white);
  font-size: var(--fs-base);
}

.alert--error   { border-left-color: var(--error);   background-color: rgba(var(--error-rgb), .04); }
.alert__title   { font-weight: 600; color: var(--navy); }

/* The honeypot. A real visitor never sees this field, so anything typed */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Visible only to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 09. TABLES — product specifications */

/* Wrap every table in this so that it scrolls sideways on a phone instead */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.table caption {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
}

.table th,
.table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.table tr:last-child th,
.table tr:last-child td { border-bottom: 0; }

.table th {
  width: 34%;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--navy);
  background-color: var(--navy-tint);
}

.table td { color: var(--text-muted); }

/* 10. MEDIA AND FIGURES */

.media {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--navy-tint);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--4x3  { aspect-ratio: 4 / 3; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--3x4  { aspect-ratio: 3 / 4; }

/* Navy gradient over photographs so white text stays readable */
.media--overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-navy);
}

/* A thin gold frame offset behind an image */
.media-frame {
  position: relative;
  isolation: isolate;
}

.media-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -14px -14px auto;
  width: 55%;
  height: 55%;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  border-radius: 0 0 var(--radius) 0;
}

@media (max-width: 599px) {
  .media-frame::before { inset: auto -8px -8px auto; }
}

figure { margin: 0; }

figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* 11. SMALL PRIMITIVES */

/* Skip link — the first thing a keyboard user reaches */
.skip-link {
  position: fixed;
  top: 0;
  left: var(--space-4);
  z-index: calc(var(--z-header) + 10);
  padding: var(--space-3) var(--space-5);
  background-color: var(--navy);
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transform: translateY(-120%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus { transform: translateY(0); }

/* Badge / pill */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px var(--space-3);
  border: 1px solid rgba(var(--gold-rgb), .45);
  border-radius: var(--radius-sm);
  background-color: rgba(var(--gold-rgb), .1);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--navy);
}

.on-navy .badge {
  color: var(--gold-light);
  background-color: rgba(var(--white-rgb), .06);
}

/* Marks a figure that has not yet been confirmed by the client. It is */
.badge--todo {
  border-color: var(--line-strong);
  background-color: var(--navy-tint);
  color: var(--text-muted);
  letter-spacing: .08em;
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

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

.breadcrumb a:hover { color: var(--navy); text-decoration: underline; }

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--gold);
}

.breadcrumb li { display: flex; align-items: center; }

.breadcrumb [aria-current="page"] { color: var(--navy); font-weight: 500; }

.on-navy .breadcrumb { color: rgba(var(--white-rgb), .75); }
.on-navy .breadcrumb a:hover { color: var(--white); }
.on-navy .breadcrumb [aria-current="page"] { color: var(--white); }

/* Filter chips — used on the gallery */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: var(--white);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--navy);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.chip:hover { border-color: var(--gold); }

.chip[aria-pressed="true"] {
  background-color: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* Numbered step marker */
.step-num {
  font-family: var(--font-head);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-head);
  color: var(--gold);
}

/* 12. UTILITIES */

.mt-4        { margin-top: var(--space-4); }
.mt-6        { margin-top: var(--space-6); }

.list-check { display: grid; gap: var(--space-3); }

.list-check li {
  position: relative;
  padding-left: var(--space-7);
  color: var(--text-muted);
}

/* The gold tick beside each feature in a product feature list */
.list-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.on-navy .list-check li { color: var(--text-on-navy); }
.on-navy .list-check li::before {
  border-left-color: var(--gold-light);
  border-bottom-color: var(--gold-light);
}

/* Horizontal scrolling row — the Recent Installations strip */
.scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 82vw);
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-4);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.scroller > * { scroll-snap-align: start; }

@media (min-width: 700px)  { .scroller { grid-auto-columns: minmax(300px, 42vw); } }
@media (min-width: 1100px) { .scroller { grid-auto-columns: minmax(320px, 30vw); } }

.scroller::-webkit-scrollbar { height: 6px; }
.scroller::-webkit-scrollbar-track { background-color: var(--line); border-radius: var(--radius-sm); }
.scroller::-webkit-scrollbar-thumb { background-color: var(--steel); border-radius: var(--radius-sm); }

/* 13  SITE HEADER AND NAVIGATION — The header is fixed to the top of the window at a constant height, so */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  background-color: var(--white);
  border-bottom: 1px solid var(--line);
  transition: height var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Pages without a hero need room made for the fixed header */
body.page-standard { padding-top: var(--header-h); }

.site-header--transparent {
  background-color: transparent;
  border-bottom-color: transparent;
}

.site-header.is-condensed {
  height: var(--header-h-condensed);
  background-color: var(--white);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  height: 100%;
}

/* ---- Logo lockup ---------------------------------------------------------
   The supplied logo file is a square lockup with the company name printed
   inside the image. At header size that printed name would be about four
   pixels tall and unreadable, so the box below crops the image down to just
   the elevator-and-IME mark, and the company name is set beside it in real
   type instead — crisp at any size, and readable by screen readers.

   THE CROP NUMBERS BELOW ARE MEASURED FROM THE SUPPLIED LOGO FILES. If a
   logo is ever replaced with an image of a different shape, these four
   multipliers need re-checking. See README-HANDOVER.md.                    */

.logo {
  --mark-h: 46px;                 /* height of the visible logo mark */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  text-decoration: none;
}

.site-header.is-condensed .logo { --mark-h: 36px; }

.logo__mark {
  position: relative;
  flex: none;
  width: calc(var(--mark-h) * 1.05);
  height: var(--mark-h);
  overflow: hidden;
}

.logo__img {
  position: absolute;
  width: auto;
  max-width: none;
  transition: opacity var(--dur) var(--ease);
}

/* logo.png — 1303 x 1207, mark occupies x 272-1080, y 32-816 */
.logo__img--navy {
  height: calc(var(--mark-h) * 1.540);
  top:    calc(var(--mark-h) * -0.041);
  left:   calc(var(--mark-h) * -0.347);
}

/* logo-white.png — 1254 x 1254, mark occupies x 228-1060, y 36-830 */
.logo__img--white {
  height: calc(var(--mark-h) * 1.579);
  top:    calc(var(--mark-h) * -0.045);
  left:   calc(var(--mark-h) * -0.287);
  opacity: 0;
}

.site-header--transparent:not(.is-condensed) .logo__img--navy  { opacity: 0; }
.site-header--transparent:not(.is-condensed) .logo__img--white { opacity: 1; }

.logo__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.logo__name {
  font-family: var(--font-head);
  font-size: clamp(0.9375rem, 0.88rem + 0.28vw, 1.125rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
  transition: color var(--dur) var(--ease);
}

.logo__tag {
  font-size: 0.6875rem;
  line-height: 1.3;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}

.site-header.is-condensed .logo__tag { display: none; }

.site-header--transparent:not(.is-condensed) .logo__name { color: var(--white); }
.site-header--transparent:not(.is-condensed) .logo__tag  { color: var(--gold-light); }

@media (max-width: 419px) {
  .logo { --mark-h: 38px; }
  .logo__tag  { display: none; }
  .logo__name { font-size: 0.875rem; white-space: normal; }
}

/* Desktop navigation — Hidden below 1024px, where the mobile menu takes over. */

.nav { display: none; }

@media (min-width: 1024px) { .nav { display: block; } }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
}

.nav__link {
  position: relative;
  display: block;
  padding: var(--space-2) 0;
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--navy);
  transition: color var(--dur-fast) var(--ease);
}

/* Gold underline: wipes in on hover, stays on the current page */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover::after,
.nav__link.is-current::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-header--transparent:not(.is-condensed) .nav__link { color: var(--white); }

/* Header buttons */

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.header__cta { display: none; }

@media (min-width: 1024px) { .header__cta { display: inline-flex; } }

/* Three-line menu button, shown below 1024px */
.burger {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  cursor: pointer;
}

@media (min-width: 1024px) { .burger { display: none; } }

.burger__bars { position: relative; }

.burger__bars,
.burger__bars::before,
.burger__bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--navy);
  transition: background-color var(--dur) var(--ease);
}

.burger__bars::before,
.burger__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.burger__bars::before { top: -7px; }
.burger__bars::after  { top:  7px; }

.site-header--transparent:not(.is-condensed) .burger__bars,
.site-header--transparent:not(.is-condensed) .burger__bars::before,
.site-header--transparent:not(.is-condensed) .burger__bars::after {
  background-color: var(--white);
}

/* 14. MOBILE MENU */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  background-color: var(--navy);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1024px) { .mobile-menu { display: none; } }

/* Stop the page behind the menu from scrolling */
body.menu-is-open { overflow: hidden; }

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding: var(--space-4) var(--gutter) var(--space-8);
  overflow-y: auto;
}

.mobile-menu__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.mobile-menu__logo img { width: 104px; height: auto; }

.mobile-menu__close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--line-on-navy);
  border-radius: var(--radius);
  color: var(--white);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.mobile-menu__close:hover {
  border-color: var(--gold);
  background-color: rgba(var(--gold-rgb), .14);
}

.mobile-menu__close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

.mobile-menu__nav a {
  display: block;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line-on-navy);
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  transition: color var(--dur-fast) var(--ease), padding-left var(--dur) var(--ease);
}

.mobile-menu__nav a:hover { color: var(--gold-light); padding-left: var(--space-3); }

.mobile-menu__nav a.is-current {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

.mobile-menu__foot {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  margin-top: auto;
  padding-top: var(--space-5);
}

.mobile-menu__foot .btn { width: 100%; }

.mobile-menu__phone {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-decoration: none;
  color: var(--gold-light);
}

.mobile-menu__tagline {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(var(--white-rgb), .6);
}

/* 15. SITE FOOTER */

.site-footer {
  background-color: var(--navy-deep);
  padding-top: clamp(3rem, 6vw, 5rem);
}

.footer__grid {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 700px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1.7fr 1fr 1.2fr 1.4fr;
    gap: var(--space-7);
  }
}

.footer__logo { display: inline-block; }
.footer__logo img { width: 128px; height: auto; }

.footer__intro {
  margin-top: var(--space-4);
  max-width: 42ch;
  font-size: var(--fs-base);
  color: rgba(var(--white-rgb), .72);
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.footer__social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-on-navy);
  border-radius: var(--radius);
  color: var(--white);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.footer__social a:hover {
  border-color: var(--gold);
  background-color: rgba(var(--gold-rgb), .14);
  color: var(--gold-light);
}

.footer__social svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer__heading {
  position: relative;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-on-navy);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-wide);
  color: var(--white);
}

.footer__heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 36px;
  height: 1px;
  background-color: var(--gold);
}

.footer__links { display: grid; gap: var(--space-3); }

.footer__links a,
.footer__contact a {
  color: rgba(var(--white-rgb), .72);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

.footer__links a:hover,
.footer__contact a:hover { color: var(--gold-light); }

.footer__contact { display: grid; gap: var(--space-5); }

.footer__contact li {
  display: grid;
  gap: 2px;
  justify-items: start;
  font-size: var(--fs-sm);
}

.footer__city {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--white);
}

.footer__detail {
  font-size: var(--fs-sm);
  color: rgba(var(--white-rgb), .7);
}

/* An unfilled [TODO: ...] value. Deliberately marked so that anybody */
.footer__detail.is-todo {
  color: rgba(var(--white-rgb), .5);
  border-bottom: 1px dashed rgba(var(--white-rgb), .3);
}

.footer__email {
  display: inline-block;
  margin-top: var(--space-5);
  color: var(--gold-light);
  text-decoration: none;
  word-break: break-word;
}

.footer__email:hover { color: var(--white); }

.footer__bar {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--line-on-navy);
}

.footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-5);
}

.footer__copy,
.footer__legal {
  max-width: none;
  font-size: var(--fs-sm);
  color: rgba(var(--white-rgb), .6);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.footer__tagline {
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-light);
}

/* 16. HOME PAGE SECTIONS */

/* 16.1 Hero */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;              /* correct height on mobile browsers */
  padding-top: var(--header-h);
  padding-bottom: var(--space-11);
  background-color: var(--navy-deep);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two overlays stacked: one from the left so the headline stays readable, */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--overlay-navy-side), var(--overlay-navy);
}

.hero__inner { width: 100%; }

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 46rem;
}

.hero__eyebrow { color: var(--gold-light); }

.hero__title { color: var(--white); }

.hero__sub {
  max-width: 54ch;
  font-size: var(--fs-lg);
  color: rgba(var(--white-rgb), .85);
}

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

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(var(--white-rgb), .8);
}

.hero__cue:hover { color: var(--gold-light); }

.hero__cue-line {
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, transparent, var(--gold-light));
  transform-origin: top;
  animation: cue-pulse 2.4s var(--ease) infinite;
}

@keyframes cue-pulse {
  0%, 100% { transform: scaleY(.35); opacity: .35; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* Hidden on a short landscape phone, where it overlaps the buttons */
@media (max-height: 620px) {
  .hero__cue { display: none; }
}

/* 16.2 Trust strip */

.trust {
  background-color: var(--navy-deep);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7) var(--space-4);
}

@media (min-width: 900px) {
  .trust__grid { grid-template-columns: repeat(4, 1fr); }
}

.trust__item {
  position: relative;
  text-align: center;
}

/* Thin dividing lines between the figures on wide screens */
@media (min-width: 900px) {
  .trust__item + .trust__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    width: 1px;
    height: 76%;
    background-color: var(--line-on-navy);
  }
}

.trust__value {
  max-width: none;
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-head);
  color: var(--gold-light);
}

.trust__suffix { color: var(--gold); }

.trust__label {
  max-width: none;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(var(--white-rgb), .75);
}

/* Placeholder marker reads as a warning, not as brand gold */
.on-navy .badge--todo {
  border-color: var(--line-strong);
  background-color: var(--navy-tint);
  color: var(--text-muted);
}

.trust__todo { margin-top: var(--space-3); }

/* 16.3 Why choose us */

.reason { gap: var(--space-4); }

.reason__title {
  font-size: var(--fs-h4);
  color: var(--navy);
}

/* 16.4 Recent installations */

.recent__head {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: none;
}

.recent__all { flex: none; padding-bottom: var(--space-4); }

.recent__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  text-decoration: none;
}

.recent__card img { transition: transform var(--dur-slow) var(--ease); }
.recent__card:hover img { transform: scale(1.06); }

.recent__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-5);
}

.recent__title {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--white);
}

.recent__place {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-light);
}

/* 16.5 Process */

.process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 2px solid var(--line);
}

/* A gold segment on the left of each step's top rule */
.process__step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 42%;
  height: 2px;
  background-color: var(--gold);
}

.process__title {
  font-size: var(--fs-h4);
  color: var(--navy);
}

/* 16.6 Closing call-to-action band */

.cta-band {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  overflow: hidden;
}

/* A soft gold glow in the top-right corner */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 18%, rgba(var(--gold-rgb), .20), transparent 55%);
}

.cta-band__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.cta-band__inner .eyebrow { justify-content: center; }

.cta-band__title {
  font-size: var(--fs-h1);
  color: var(--white);
}

.cta-band__text { color: rgba(var(--white-rgb), .8); }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}

/* 17. INNER PAGE SECTIONS */

/* 17.1  Page hero band — The navy band under the header on every page except the home page. */

.page-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 85% 15%, rgba(var(--gold-rgb), .18), transparent 55%);
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 62rem;
}

.page-hero__title {
  font-size: var(--fs-h1);
  color: var(--white);
}

.page-hero__lead {
  max-width: 58ch;
  font-size: var(--fs-lg);
  color: rgba(var(--white-rgb), .82);
}

.page-hero .eyebrow { color: var(--gold-light); }
.page-hero :focus-visible { outline-color: var(--gold-light); }

.page-hero .breadcrumb { color: rgba(var(--white-rgb), .75); }
.page-hero .breadcrumb a:hover,
.page-hero .breadcrumb [aria-current="page"] { color: var(--white); }

/* Photograph behind the band, same overlays as the home hero */
.page-hero--image {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--navy-deep);
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero--image::before {
  background: var(--overlay-navy-side), var(--overlay-navy);
}

/* 17.2 Milestone timeline */

.timeline {
  position: relative;
  display: grid;
  gap: var(--space-7);
  padding-left: var(--space-7);
}

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(var(--gold-rgb), .15));
}

.timeline__item {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--space-2);
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-7) * -1);
  top: 6px;
  width: 15px;
  height: 15px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background-color: var(--navy-tint);
}

.timeline__year {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--ls-head);
  color: var(--navy);
}

.timeline__title { font-size: var(--fs-h4); }

/* 17.3 Standards strip */

.certs {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.certs__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
}

.certs__title { font-size: var(--fs-h4); }

/* 17.4 Team cards */

.team-card__media { aspect-ratio: 3 / 4; }

.team-card__name { font-size: var(--fs-h4); }

.team-card__role {
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* 17.5 Product page */

/* Keeps the feature panel level with a long description */
.split--top { align-items: start; }

.feature-panel {
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
}

.feature-panel__title {
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-h3);
}

/* The two-line spec summary printed on each product card */
.product-card__specs {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.product-card__specs li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--fs-sm);
}

.product-card__spec-label { color: var(--text-muted); }

.product-card__spec-value {
  flex: none;
  max-width: 55%;
  text-align: right;
  font-weight: 500;
  color: var(--navy);
}

/* 17.6 404 page */

.error-page { padding-block: clamp(3rem, 8vw, 6rem); }

.error-page__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.error-code {
  max-width: none;
  font-family: var(--font-head);
  font-size: clamp(6rem, 22vw, 12rem);
  font-weight: 700;
  line-height: .85;
  color: var(--navy);
  opacity: .1;
}

.error-page__head { margin-bottom: 0; }
.error-page__lead { max-width: 52ch; }

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.error-page__links {
  width: 100%;
  margin-top: var(--space-6);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
}

.error-page__links-title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-wide);
}

.error-page__product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-4);
  text-align: left;
}

/* 18. GALLERY, LIGHTBOX, CONTACT AND THANK YOU */

/* 18.1  Gallery grid — A masonry effect without any masonry library: every tile is one grid row */

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.chip__count {
  margin-left: var(--space-2);
  font-size: var(--fs-xs);
  opacity: .65;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  grid-auto-rows: 190px;
  gap: var(--grid-gap);
}

.gallery-item--tall { grid-row: span 2; }

.gallery-item__link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  text-decoration: none;
}

.gallery-item__media { height: 100%; }

.gallery-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.gallery-item__link:hover .gallery-item__media img { transform: scale(1.06); }

.gallery-item__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-4);
}

.gallery-item__title {
  font-family: var(--font-head);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--white);
}

.gallery-item__place {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-light);
}

.gallery-item__zoom {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(var(--white-rgb), .4);
  border-radius: var(--radius);
  background-color: rgba(var(--navy-deep-rgb), .5);
  color: var(--white);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.gallery-item__zoom svg { width: 18px; height: 18px; }

.gallery-item__link:hover .gallery-item__zoom,
.gallery-item__link:focus-visible .gallery-item__zoom {
  opacity: 1;
  transform: none;
}

.gallery-empty {
  max-width: none;
  margin-top: var(--space-7);
  text-align: center;
  color: var(--text-muted);
}

/* 18.2 Full-screen photo viewer */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: calc(var(--space-8) + var(--space-4)) var(--space-4) var(--space-6);
  background-color: rgba(var(--navy-deep-rgb), .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox :focus-visible { outline-color: var(--gold-light); }

.lightbox__bar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
}

.lightbox__counter {
  max-width: none;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(var(--white-rgb), .7);
}

.lightbox__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid rgba(var(--white-rgb), .25);
  border-radius: var(--radius);
  background-color: rgba(var(--white-rgb), .06);
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.lightbox__btn:hover {
  border-color: var(--gold);
  background-color: rgba(var(--gold-rgb), .2);
}

.lightbox__btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__btn[hidden] { display: none; }

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.lightbox__img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.lightbox__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.lightbox__title {
  font-family: var(--font-head);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--white);
}

.lightbox__place {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-light);
}

/* On a phone the arrows sit below the photograph */
@media (max-width: 700px) {
  .lightbox {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "figure figure" "prev next";
    align-content: center;
  }
  .lightbox__figure    { grid-area: figure; }
  .lightbox__nav--prev { grid-area: prev; justify-self: end; }
  .lightbox__nav--next { grid-area: next; justify-self: start; }
  .lightbox__img       { max-height: 58vh; }
}

/* 18.3 Contact page */

.office__city  { font-size: var(--fs-h3); }

.office__label {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.office__address {
  font-style: normal;
  color: var(--text-muted);
}

.office__contact { display: grid; gap: var(--space-1); }

.office__contact a {
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
}

.office__contact a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

/* A detail still waiting on the client, marked so it is not missed */
.is-todo {
  color: var(--text-muted);
  border-bottom: 1px dashed var(--line-strong);
}

.map-embed {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: var(--white);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-embed--empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--navy-tint);
}

.map-embed__note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.map-embed__note code {
  padding: 2px 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  font-size: .9em;
  word-break: break-word;
}

.hours__title {
  margin-bottom: var(--space-5);
  font-size: var(--fs-h3);
}

.hours { border-top: 1px solid var(--line); }

.hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.hours__row dt { font-weight: 500; color: var(--navy); }
.hours__row dd { text-align: right; color: var(--text-muted); }

.hours__note {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.hours__emergency {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: none;
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background-color: var(--white);
}

.hours__emergency span {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.hours__emergency strong {
  font-family: var(--font-head);
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-head);
  color: var(--navy);
}

/* 18.4 Floating WhatsApp button */

.whatsapp-float {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  background-color: var(--navy);
  color: var(--white);
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.whatsapp-float:hover {
  background-color: var(--navy-deep);
  color: var(--white);
  transform: translateY(-2px);
}

.whatsapp-float svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.whatsapp-float__label {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
}

@media (max-width: 599px) {
  .whatsapp-float { padding: var(--space-3); }
  .whatsapp-float__label { display: none; }
}

/* 18.5 Thank you page */

.thank-you__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.thank-you__mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(var(--gold-rgb), .45);
  border-radius: 50%;
  background-color: rgba(var(--gold-rgb), .1);
  color: var(--gold);
}

.thank-you__mark svg { width: 38px; height: 38px; }

.thank-you__head { margin-bottom: 0; }

.thank-you__phone a {
  font-family: var(--font-head);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--ls-head);
  color: var(--navy);
  text-decoration: none;
}

.thank-you__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}

.thank-you__next {
  width: 100%;
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
  text-align: left;
}

.thank-you__next-title {
  margin-bottom: var(--space-6);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-wide);
  text-align: center;
}

.thank-you__steps { display: grid; gap: var(--space-5); }

.thank-you__steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  color: var(--text-muted);
}

.thank-you__steps .step-num {
  flex: none;
  min-width: 2.4rem;
  font-size: var(--fs-h4);
}

/* 19  MOTION PREFERENCES — Some people get motion sickness from animation and set their device to */

@media (prefers-reduced-motion: reduce) {

  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .card:hover,
  .card:focus-within { transform: none; }

  .card:hover .card__media img { transform: none; }

  .scroller { scroll-snap-type: none; }

  .hero__cue-line { animation: none; opacity: 1; transform: none; }

  .recent__card:hover img { transform: none; }

  .mobile-menu__nav a:hover { padding-left: 0; }

  .gallery-item__link:hover .gallery-item__media img { transform: none; }

  .gallery-item__zoom { opacity: 1; transform: none; }

  .whatsapp-float:hover { transform: none; }
}