/* Homepage — what only the homepage needs.
   The shared vocabulary is already in tokens.css, style.css and sections.css:
   the section rhythm, the card, the framed picture, the drawing, the cross
   section and the reveal. This file adds the homepage's own arrangements on top
   of it, and every selector here is scoped to markup only the homepage renders,
   so no other page is touched. */

/* --------------------------- The homepage as the sample for the site pass -- */
/* The visual pass this page is the sample for. Everything it changes is scoped
   to .site-main--home — one custom-property block and a handful of rules — so
   the header, the footer and every interior page keep what tokens.css holds
   until the sample is approved, and the same numbers can then be lifted into
   that file.

   What it changes, and why: the greys lose the blue cast that made every
   surface look tinted, because a neutral ground is what lets the engineering
   blue read as the brand colour instead of as a tint on everything; the corners
   are squared off; the card shadow and the card lift are dropped; the numbered
   section label becomes a quiet grey line, because a yellow bar printed
   thirteen times is decoration and the heading under it is the heading; and the
   section rhythm opens up a little. */
.site-main--home{
  --color-pale:#f4f6f7;
  --color-line:#e1e5e9;
  --color-muted:#5c6673;
  --color-navy:#132f45;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --shadow-card:0 2px 10px rgba(13,34,51,.06);
  --shadow-float:0 1px 3px rgba(13,34,51,.07);
  --section-space:clamp(48px,6.4vw,96px);
}

/* The heading scale, a shade less compressed than the site default, and the
   section head given the room a heading and a line of support need. */
.site-main--home h1,
.site-main--home h2,
.site-main--home h3{letter-spacing:-.02em}
.site-main--home .section__head{margin-bottom:clamp(28px,3.2vw,44px)}
.site-main--home .section__sub{max-width:470px;line-height:1.6}

/* The section label is the number and the section's name and nothing else. */
.site-main--home .eyebrow{
  gap:0;
  margin-bottom:14px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  color:var(--color-muted);
}
.site-main--home .eyebrow::before{display:none}
.site-main--home .section--navy .eyebrow{color:#a9bccd}

/* A card is a hairline box that answers the pointer at its edge. The 2px lift
   that came with a drop shadow is what made a row of cards read as a template. */
.site-main--home .lift:hover,
.site-main--home .lift:focus-within{transform:none;box-shadow:var(--shadow-card)}

/* The navy bands and what sits on them: one deep steel blue, and the sun colour
   kept for the places it still earns — the live dot and nothing else. */
.site-main--home .section--navy{background:#132f45}
.site-main--home .role-card--feature{box-shadow:none}
.site-main--home .role-card__badge{background:var(--color-accent);border-radius:var(--radius-sm);color:#fff}

/* The photograph strips: one shape for every tile, so a row of six photographs
   reads as one row rather than as six pictures of six sizes. */
.site-main--home .home-shot,
.site-main--home .home-cert{background:var(--color-surface)}

/* ---------------------------------------------- 01 / Our products (§70) -- */
/* The three lines, and under them the components entry as a row of its own: it
   is a way into the range, not a fourth product line of equal weight. */
/* Each of the three product frames is square, white and slightly inset, so the
   whole unit is shown and the three cards are read at one size whatever the
   proportion of the file behind them. */
.home-product .media-frame{
  aspect-ratio:1/1;
  margin:0 0 20px;
  padding:clamp(10px,1.4vw,18px);
  background:var(--color-surface);
}

/* The one line that says what the system around the product is. The label is
   the shared quiet badge, so it reads like every other chip on the site. */
.home-product__system{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 0;
  font-size:14px;
  font-weight:600;
  color:var(--color-navy);
}

.home-components{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 28px;
  margin:clamp(24px,3vw,34px) 0 0;
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-pale);
}

.home-components__label{display:flex;align-items:center;gap:14px;min-width:0;margin:0}

.home-components__icon{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:var(--radius-md);
  background:var(--color-accent-pale);
  color:var(--color-accent);
}

.home-components__title{display:block;font-size:16px;font-weight:600;color:var(--color-heading)}
.home-components__note{display:block;margin-top:3px;font-size:13px;color:var(--color-muted)}

/* --------------------------------------------- 02 / Water sources (§71) -- */
/* Two columns: each photograph is read at a size where the water source is
   recognisable at a glance. */
.card-grid.home-sources{grid-template-columns:repeat(2,minmax(0,1fr))}

.home-source__tag{
  margin:0 0 16px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-accent);
}

.home-source .media-frame{margin:0 0 20px}
.home-source__lines{margin:0;font-size:15px;line-height:1.55;color:var(--color-text)}
.home-source__links{display:grid;gap:10px;margin:0;padding:0;list-style:none}

/* ------------------------- 03 / The pinned story (keep your pump) -- */
/* The one motion device this page adds. The media column is held in place while
   the three step blocks scroll past it: the column is shorter than the three
   blocks together, so it has room to travel inside its own grid row, and the
   picture, its caption and the 1/3 · 2/3 · 3/3 indicator stay in view while the
   steps are read. Every selector here carries the .home-story prefix, so it
   outranks the shared block in sections.css whichever of the two sheets prints
   first. */
.home-story{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}

.home-story__media{
  position:sticky;
  top:calc(var(--header-height) + var(--space-3));
}

/* The picture stays in the frame it has always been printed in — the same 16:9
   box, the same pale ground — and the caption is written into the bottom of
   that frame, so the picture and the line about it stay one object. */
.home-story .home-story__figure{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  aspect-ratio:auto;
}

.home-story .home-story__figure img{
  display:block;
  flex:none;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  transform:scale(1);
  transition:transform var(--transition-mid);
}

/* Between steps the picture moves by this much and no more. */
.home-story[data-story-active="2"] .home-story__figure img{transform:scale(1.015)}
.home-story[data-story-active="3"] .home-story__figure img{transform:scale(1.03)}

.home-story .home-story__caption{
  margin:0;
  padding:12px 16px;
  border-top:1px solid var(--color-line);
  font-size:12px;
  font-weight:600;
  line-height:1.5;
  color:var(--color-navy);
}

.home-story__indicator{
  display:flex;
  align-items:flex-start;
  gap:var(--space-3);
  margin:var(--space-2) 0 0;
  padding:0;
  list-style:none;
}

.home-story__tick{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  color:var(--color-muted);
  transition:color var(--transition-mid);
}

/* The active part is carried in the markup as aria-current, so it is announced
   as well as seen: the number is what a reader hears and the rule under it is
   what the eye gets. */
.home-story__tick[aria-current="step"]{color:var(--color-accent)}
.home-story__tick[aria-current="step"]::after{
  content:"";
  display:block;
  height:3px;
  margin-top:6px;
  border-radius:var(--radius-sm);
  background:var(--color-accent);
}

.home-story__list{
  margin:clamp(24px,3vw,36px) 0 0;
  padding:0;
  list-style:none;
}

/* Each step is given the room a step needs — at least a fifth of the screen —
   so the column beside it stays pinned while all three are read instead of
   racing past them. */
.home-story__step{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:clamp(150px,22vh,230px);
  padding:var(--space-3) 0;
  border-top:1px solid var(--color-line);
}

.home-story__step:last-child{border-bottom:1px solid var(--color-line)}

.home-story__step-title{
  margin:0;
  font-size:clamp(18px,1.6vw,21px);
  color:var(--color-heading);
  transition:color var(--transition-mid);
}

.home-story__step-line{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--color-muted)}
.home-story__step[aria-current="step"] .home-story__step-title{color:var(--color-accent)}
.home-story__step[aria-current="step"] .home-story__step-line{color:var(--color-text)}

/* Narrow: the picture sits above the steps and nothing is pinned. */
@media (max-width:980px){
  .home-story{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .home-story__media{position:static}
  .home-story__list{margin-top:var(--space-3)}
  .home-story__step{min-height:0}
}

/* A reader whose browser asks for less motion gets the column in the flow and a
   picture that never changes size. These selectors match the ones above and
   come last, so the pinned state and the scale are both off. */
@media (prefers-reduced-motion:reduce){
  .home-story__media{position:static}
  .home-story[data-story-active] .home-story__figure img{transform:none;transition:none}

  /* Nothing eases either: the picture, the indicator and the step titles change
     without a transition, so the section is a plain stack that swaps text. */
  .home-story__figure img,
  .home-story__tick,
  .home-story__step-title{transition:none}
}

/* ----------------------------------------------- 04 / Applications -- */
.home-app .media-frame{margin:0 0 20px}

.home-app__num{
  margin:0 0 8px;
  font-size:13px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  color:var(--color-muted);
}

/* --------------------------------------------- 05 / B2B partnerships -- */
/* The card is the shared navy panel, raised one step off the navy ground so the
   three routes read as three objects rather than as one block of text. */
.home-b2b .panel--navy{background:#1b3a52;border-color:#31536e}
.home-b2b .panel--navy:hover,
.home-b2b .panel--navy:focus-within{border-color:#7f9db8}

.home-b2b__num{
  margin:0 0 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9fb4c7;
}

/* ------------------------------------------- Shared on this page only -- */
/* One text link, for the places where a card's link is a line of its own rather
   than the full-width footer of a product card. */
.home-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  font-weight:600;
  color:var(--color-accent);
  text-decoration:none;
  transition:color var(--transition-fast);
}

.home-link:hover{color:var(--color-accent-dark);text-decoration:underline;text-underline-offset:4px}
.home-link:focus-visible{border-radius:var(--radius-sm);outline:3px solid var(--color-focus);outline-offset:3px}

.home-b2b .home-link{color:#fff}
.home-b2b .home-link:hover{color:#dce6ef}

/* A link that closes a section sits inside the shared .note-line, so it takes
   that line's own size rather than the size a link in a card has. */
.note-line .home-link{font-size:13px}

/* ------------------------------------------------------------ Narrow -- */
@media (max-width:760px){
  .card-grid.home-sources{grid-template-columns:minmax(0,1fr)}
  .home-components{flex-direction:column;align-items:flex-start}
}

/* ------------------------------- 07 / Project & application proof -- */
/* The field photograph with the line that says what it shows. §08 is built from
   the same block — the workshop areas are photographs of the same kind — so the
   two sections share one name and only the grid's own spacing differs. */
.home-shots{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,26px);
  margin:0;
  padding:0;
  list-style:none;
}

.home-shot{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  margin:0;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}

.home-shot__photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

.home-shot__caption{
  margin:0;
  padding:14px 18px;
  border-top:1px solid var(--color-line);
  font-size:13px;
  font-weight:600;
  line-height:1.45;
  color:var(--color-navy);
}

/* --------------------------------- 08 / Factory & capability -- */
/* The feature sits under the section head, and its picture fills the media
   frame it is given. */
.home-factory{margin-top:clamp(26px,3.4vw,40px)}
.home-factory__photo{width:100%;height:100%;object-fit:cover}

/* --------------------------------- 09 / Certificates & quality -- */
/* The band is navy, so a document sits on a white card: the reader is being
   shown a document, and a document is read on paper. The card shows that the
   certificate exists; it is not a link, and the file is not opened from here,
   so there is no hover or focus state to answer. */
.home-certs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,26px);
  margin:0;
  padding:0;
  list-style:none;
}

.home-cert{
  display:flex;
  flex-direction:column;
  padding:clamp(16px,2vw,22px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}

.home-cert__doc{
  display:block;
  overflow:hidden;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-pale);
}

.home-cert__photo{display:block;width:100%;height:auto;aspect-ratio:4/3;padding:16px;object-fit:contain}
.home-cert__label{margin:16px 0 0;font-size:15px;font-weight:600;color:var(--color-heading)}
.home-cert__note{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--color-muted)}

/* On the navy band the closing line and the link take the band's own colours,
   as they do in the B2B section. */
#certificates .note-line{color:#cbd9e7}
#certificates .home-link{color:#fff}
#certificates .home-link:hover{color:#dce6ef}

/* ------------------------------------------------------------ Narrow -- */
@media (max-width:980px){
  .home-shots,.home-certs{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .home-shots,.home-certs{grid-template-columns:minmax(0,1fr)}
}