/* ==========================================================================
   v2.css — the redesign, laid over base.css and theme-final.css on
   /home_v2.html only. The live page never loads this file, so it stays exactly
   as the client approved it while the next version is looked at beside it.
   When v2 is signed off, these rules move into the theme and this file goes.

   The client's brief (September 2026), modelled on the GARD site:
     · full-screen sections on a darkened photograph — Services, Funding,
       Contact — alternating with white container sections — About, Sectors,
       Projects;
     · tiles are photographs under a gradient, words in white on them;
     · the new octagonal mark, and the gold taken from it;
     · the header bar 8px lower once the page has moved;
     · no opening curtain (the markup simply leaves it out).
   ========================================================================== */

/* --- The gold is the mark's gold -------------------------------------------
   Read off the client's new mark: bronze #937340 at its corners, #c6b975
   across its body, #eeeaa1 in the highlight. On the dark ground the accent is
   the body tone lifted a step towards the highlight (#dccf8e) — the old pale
   #f8f1b4 was lighter than anything in the mark. On white it is taken down
   towards the bronze, far enough to hold as small capitals and thin rules. */
:root {
  /* One size for the copy under every section heading on the redesign, and
     one for the copy of every inner page — the client asked that no paragraph
     read as the lead and another as the footnote. */
  --text-lg:    clamp(1.05rem, 0.98rem + 0.25vw, 1.2rem);
  --gold:       #dccf8e;
  --gold-dim:   rgba(220, 207, 142, 0.62);
  --hairline:   rgba(220, 207, 142, 0.24);
  --hairline-2: rgba(220, 207, 142, 0.12);
  --gold-deep:  #8a6d33;       /* the same gold on white */
  --paper:      #ffffff;
  --ink-70:     rgb(var(--ink-rgb) / 0.74);
  --rule-paper: rgb(var(--ink-rgb) / 0.12);
}

/* --- Header: the new mark, and 8px lower once the page moves ---------------
   The mark carries its own gradient, so it is not coloured through the brand's
   currentColor. The bar steps down at the same moment it darkens (.is-stuck,
   set by site.js), so the two read as one change. */
.v2 .nav { transition: background 0.4s var(--ease), border-color 0.4s var(--ease), height 0.35s var(--ease); }
.v2 .nav.is-stuck { height: calc(var(--nav-h) - 8px); }
body.v2.is-menu-open .nav.is-stuck { height: var(--nav-h); }
.v2 .brand .brand__mark { width: 64px; height: 64px; flex: none; }
@media (max-width: 560px) { .v2 .brand .brand__mark { width: 50px; height: 50px; } }
@media (max-height: 520px) { .v2 .brand .brand__mark { width: 50px; height: 50px; } }
.v2 .footer__brand .brand__mark { width: 30px; height: 30px; flex: none; }

/* The wordmark and the menu one step larger (call of 24.09.2026) — the mark
   and the bar keep their size. On a wide screen the menu is laid out across a
   set width, --menu-w, and the Contact column is measured by the same width,
   so its words start exactly under "Home". */
:root { --menu-w: min(700px, 100vw - 2 * var(--gutter) - 440px); }
.v2 .nav .brand__word { font-size: 1.32rem; }
.v2 .nav__link { font-size: 0.95rem; }
@media (min-width: 1101px) {
  .v2 .nav__links { width: var(--menu-w); justify-content: space-between; gap: 0; }
}
@media (max-width: 560px) { .v2 .nav .brand__word { font-size: 0.92rem; } }
@media (max-width: 900px) { .v2 .nav__link { font-size: 1.2rem; } }

/* --- White container sections: About, Sectors, Projects -------------------- */
.v2 .about, .v2 .sectors, .v2 .projects {
  background: var(--paper);
  color: var(--ink);
}
.v2 .about .h2, .v2 .sectors .h2, .v2 .projects .h2 { color: var(--ink); }
.v2 .about .sec-head__eyebrow,
.v2 .sectors .sec-head__eyebrow,
.v2 .projects .sec-head__eyebrow { color: var(--gold-deep); }
.v2 .about .sec-head__eyebrow::before,
.v2 .sectors .sec-head__eyebrow::before,
.v2 .projects .sec-head__eyebrow::before { background: var(--gold-deep); }
.v2 .projects .sec-head__intro { color: var(--ink); font-size: var(--text-lg); max-width: 60ch; }

/* About: text left, photograph right — the photograph in its own colour now
   that it stands on white, and the offset frame drawn in the section's ink. */
/* The text starts level with the top of the photograph, and both paragraphs
   are one voice — no lead and no aside (call of 24.09.2026). */
/* Two columns only where there is room for two; below that the theme's own
   rule stacks them, photograph first. */
.v2 .about__grid { align-items: start; }
.v2 .about__text p { color: var(--ink); font-size: var(--text-lg); }
@media (min-width: 901px) {
  .v2 .about__grid { grid-template-columns: 1fr 1fr; }
  .v2 .about__text p:first-child { margin-block-start: -0.45em; }
}
.v2 .about__media img { filter: none; }
.v2 .about__media::after { border-color: rgb(var(--ink-rgb) / 0.16); }
.v2 .about__pic { aspect-ratio: 4 / 3; }

/* Sectors and Projects: the photograph tiles stand apart on the white rather
   than butting into one dark block — a container of tiles, as in the brief. */
.v2 .sectors__grid, .v2 .projects__grid {
  gap: clamp(0.75rem, 1.2vw, 1.1rem);
  background: none;
}
.v2 .sector, .v2 .project { min-height: clamp(300px, 26vw, 360px); }
/* The tiles are dark photographs, so their words stay white even though the
   section around them is set in ink — otherwise the client's name on a project
   inherits the section's ink and disappears into its own photograph. */
.v2 .sector, .v2 .project { color: var(--white); }
.v2 .sector h3 { color: var(--gold); }

/* --- Services, Funding, Contact: name on white, tiles below ---------------
   After the call of 24.09.2026 these three open like Sectors and Projects —
   the section's name dark on white — and what follows runs edge to edge:
   Services as 2 × 2 tiles, Funding as 2 × 3, Contact as one photograph. */
.v2 .tiles-sec { background: var(--paper); color: var(--ink); padding-block-end: 0; }
.v2 .tiles-sec .h2 { color: var(--ink); }
.v2 .tiles-sec .sec-head__eyebrow { color: var(--gold-deep); }
.v2 .tiles-sec .sec-head__eyebrow::before { background: var(--gold-deep); }

/* The band: a photograph under the whole block, one veil of the page's ink
   over it. Only Contact is built this way now; the inner pages' first screen
   uses the same photograph layer. */
.v2 .band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(5rem, 10vw, 9rem);
  color: var(--white);
}
.v2 .band > .shell { position: relative; z-index: 2; }
.band__bg { position: absolute; inset: -2px; z-index: 0; }
.band__pic { width: 100%; height: 100%; }
.band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(var(--ink-rgb) / 0.86), rgb(var(--ink-rgb) / 0.72) 40%, rgb(var(--ink-rgb) / 0.9)),
    rgb(var(--ink-rgb) / 0.12);
}

/* Edge-to-edge tiles, two to a row. The words inside a tile stay on the line
   of the page's container — the line the mark and every heading stand on —
   so the grid is a container and --edge is the distance from the screen's edge
   to that line: the same arithmetic as --shell in base.css. */
.tiles {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: var(--paper);
}
.tiles > * { --edge: max(var(--gutter), (100cqw - 1280px) / 2); --inner: clamp(2rem, 4vw, 4.5rem); }
.svc, .fund2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(2.5rem, 4vw, 3.75rem);
  color: var(--white);
  background: var(--ink);
}
.tiles > :nth-child(odd)  { padding-inline: var(--edge) var(--inner); }
.tiles > :nth-child(even) { padding-inline: var(--inner) var(--edge); }
.svc  { min-height: clamp(520px, 44vw, 680px); }
.fund2 { min-height: clamp(380px, 32vw, 500px); }
.svc__body, .fund2__body {
  position: relative; z-index: 2;
  display: grid; gap: 1rem; align-content: start;
  max-width: 34rem;
}
.svc__img, .fund2__img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  filter: saturate(0.85);
}
.svc::after, .fund2::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgb(var(--ink-rgb) / 0.95) 18%, rgb(var(--ink-rgb) / 0.66) 58%, rgb(var(--ink-rgb) / 0.3));
  transition: background-color 0.5s var(--ease);
}
.svc h3, .fund2 h3 { color: var(--gold); }
.fund2 h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); }
.svc__list li {
  font-size: 0.95rem; line-height: 1.5; color: var(--white);
  padding-block: 0.45rem;
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}
.svc__text, .fund2 p { font-size: 1rem; line-height: 1.65; color: rgba(255, 255, 255, 0.88); }

/* Titles level across a row: every copy block in a set is as tall as the
   longest one, and starts at its top. Released where the tiles stack. */
@media (min-width: 761px) {
  .svc__body { min-height: 18.5rem; }
  .fund2__body { min-height: 11.5rem; }
}
@media (max-width: 760px) {
  .tiles { grid-template-columns: 1fr; }
  .tiles > * { padding-inline: var(--gutter) !important; }
  .svc, .fund2 { min-height: 420px; }
}

/* --- Every tile is one link --------------------------------------------------
   Anywhere on a tile leads where its "Read more" leads (site.js marks the tile
   .is-link and forwards the click); "Read more" itself stays, for the eye and
   for the keyboard. On hover the photograph moves in, the veil deepens and the
   arrow runs ahead — the same answer on every tile of the site. */
.more {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}
.more svg { width: 13px; transition: transform 0.35s var(--ease); }
.is-link { cursor: pointer; }
.is-link:hover .more svg, .more:focus-visible svg { transform: translateX(8px); }
.svc__img img, .fund2__img img, .sector__img img, .project__img img {
  transition: transform 0.9s var(--ease);
}
.is-link:hover .svc__img img, .is-link:hover .fund2__img img,
.is-link:hover .sector__img img, .is-link:hover .project__img img { transform: scale(1.06); }
.svc.is-link:hover::after, .fund2.is-link:hover::after { background-color: rgb(var(--ink-rgb) / 0.28); }
.svc__img, .fund2__img, .sector__img, .project__img { overflow: hidden; }

/* Contact — the photograph across the whole screen; the words and the form
   stand one above the other in a right-hand column that starts exactly where
   the menu starts, both measured by --menu-w. */
.contact-v2 .band__bg::after {
  background:
    linear-gradient(270deg, rgb(var(--ink-rgb) / 0.93) 0 34%, rgb(var(--ink-rgb) / 0.55) 66%, rgb(var(--ink-rgb) / 0.3)),
    linear-gradient(180deg, rgb(var(--ink-rgb) / 0.3), rgb(var(--ink-rgb) / 0.5));
}
.contact-v2__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--menu-w); }
.contact-v2__panel { grid-column: 2; display: grid; gap: clamp(2rem, 3.5vw, 3rem); }
.contact-v2__text p { color: var(--white); line-height: 1.8; font-size: var(--text-lg); }
.contact-v2__text p + p { margin-block-start: 1.2rem; }
@media (max-width: 1100px) {
  .contact-v2__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}
@media (max-width: 760px) {
  .contact-v2__grid { grid-template-columns: 1fr; }
  .contact-v2__panel { grid-column: 1; }
  .contact-v2 .band__bg::after { background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.78), rgb(var(--ink-rgb) / 0.93)); }
}

/* On a phone a band is as tall as its content, not the screen. */
@media (max-width: 640px) { .v2 .band { min-height: 0; } }

/* On white the dark tiles no longer need to sink into a dark page, so the
   photographs are let up a little. The veil over them stays as it was. */
.v2 .sector__img { opacity: 0.86; }
.v2 .project__img { opacity: 0.78; }

/* Round of 28.09.2026: tile names larger, veils darker. The client asked for
   the service names at the size of the section's own name, and for Sectors
   and Funding to follow. A sector tile is a third of the row, so there the
   size is capped where the longest single word ("Infrastructure") still fits
   on one line. The veils gain most at the top: that is where a bright sky or
   a white wall used to sit behind the name. :not(:hover) leaves the deeper
   hover veil of theme-final.css in charge. */
.svc h3 { font-size: clamp(2rem, 4.2vw, 3.6rem); }
.fund2 h3 { font-size: clamp(1.7rem, 3vw, 2.8rem); }
.v2 .sector h3 { font-size: clamp(1.6rem, 2.3vw, 2.3rem); }
@media (min-width: 761px) {
  .svc__body { min-height: 21rem; }
  .fund2__body { min-height: 14rem; }
}
.svc::after, .fund2::after {
  background: linear-gradient(0deg, rgb(var(--ink-rgb) / 0.96) 18%, rgb(var(--ink-rgb) / 0.8) 55%, rgb(var(--ink-rgb) / 0.62));
}
.v2 .sector:not(:hover)::after {
  background: linear-gradient(0deg, rgb(var(--ink-rgb) / 0.94) 10%, rgb(var(--ink-rgb) / 0.72) 55%, rgb(var(--ink-rgb) / 0.6));
}
.v2 .project:not(:hover)::after {
  background: linear-gradient(0deg, rgb(var(--ink-rgb) / 0.95) 14%, rgb(var(--ink-rgb) / 0.72) 55%, rgb(var(--ink-rgb) / 0.6));
}

/* ==========================================================================
   Inner pages — one per Services, Sectors, Funding and Projects tile
   ========================================================================== */
/* "Read more" on the white-section tiles (Sectors, Projects) sits on a dark
   photograph like the rest of the tile's words. */
.sector .more, .project .more { margin-block-start: 0.4rem; }
.sector .more { margin-block-start: 1rem; }

/* The first screen: the tile's own photograph under the page's veil, the
   section it belongs to and the page's title. A chapter opening, not a cover,
   so shorter than the home page's. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(380px, 56svh, 560px);
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--nav-h) + 2.5rem) clamp(2.5rem, 5vw, 4.5rem);
}
.page-hero .band__bg::after {
  background: linear-gradient(180deg, rgb(var(--ink-rgb) / 0.7), rgb(var(--ink-rgb) / 0.45) 45%, rgb(var(--ink-rgb) / 0.92));
}
.page-hero__inner { position: relative; z-index: 2; display: grid; gap: 1rem; }
.crumbs { font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; }
.crumbs a { color: var(--gold); }
.crumbs a::before { content: "← "; }
.page-title { max-width: 30ch; }
.page-kicker { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }

.page-body { background: var(--paper); color: var(--ink); }
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: start;
}
.page-copy { max-width: 68ch; }
.page-copy p { color: var(--ink); line-height: 1.8; }
.page-copy p + p { margin-block-start: 1.1rem; }
/* Every paragraph of an inner page in one size, the opening one included
   (call of 24.09.2026: the enlarged lead read as a different text). */
.page-copy p, .page-list li { font-size: 1.125rem; }
.page-h {
  margin-block: 2.4rem 0.9rem;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.25;
  color: var(--ink);
  display: flex; align-items: center; gap: 0.9rem;
}
.page-h::before { content: ""; width: 28px; height: 1px; background: var(--gold-deep); flex: none; }
/* Everything under a subheading stands on the line of the subheading's words,
   not of its rule, so the text no longer steps in and out down the page; the
   rule hangs in front as a marker. --h-ind = the rule plus its gap. */
.page-copy { --h-ind: calc(28px + 0.9rem); }
.page-h ~ p, .page-h ~ .page-list { margin-inline-start: var(--h-ind); }
.page-h + p, .page-h + .page-list { margin-block-start: 1.1rem; }
@media (max-width: 560px) { .page-copy { --h-ind: 0px; } }
.page-list { margin-block: 0.4rem 1.1rem; }
.page-list li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.6rem;
  border-block-start: 1px solid var(--rule-paper);
  line-height: 1.65;
}
.page-list li:last-child { border-block-end: 1px solid var(--rule-paper); }
.page-list li::before {
  content: ""; position: absolute; left: 0; top: calc(0.7rem + 0.82em);
  width: 10px; height: 1px; background: var(--gold-deep);
}
.page-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 0.5rem;
  background: var(--rule-paper);
  border: 1px solid var(--rule-paper);
}
.page-facts div { background: var(--paper); padding: 1rem 1.2rem; }
.page-facts dt { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-block-end: 0.35rem; }
.page-facts dd { margin: 0; color: var(--ink); }
.page-facts + .page-h { margin-block-start: 2rem; }

.page-aside {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  display: grid;
  gap: 1.1rem;
  padding-inline-start: 1.75rem;
  border-inline-start: 1px solid var(--rule-paper);
}
.page-aside__head { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-deep); }
.page-aside__list { display: grid; gap: 0.15rem; }
.page-aside__list a, .page-aside__list span {
  display: block; padding-block: 0.4rem;
  font-size: 0.95rem; line-height: 1.35; color: var(--ink-70);
  transition: color 0.2s var(--ease);
}
.page-aside__list a:hover { color: var(--gold-deep); }
.page-aside__list span { color: var(--gold-deep); }
.page-aside .btn { border-color: var(--gold-deep); color: var(--gold-deep); margin-block-start: 0.5rem; }
.page-aside .btn:hover { background: var(--gold-deep); color: var(--paper); }

.page-pager {
  display: flex; justify-content: space-between; gap: 1.5rem;
  margin-block-start: clamp(3rem, 6vw, 5rem);
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--rule-paper);
}
.page-pager a { display: grid; gap: 0.4rem; max-width: 45%; color: var(--ink); font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.3; }
.page-pager a:last-child { text-align: right; }
.page-pager span { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); }
.page-pager a:hover { color: var(--gold-deep); }

@media (max-width: 900px) {
  .page-grid { grid-template-columns: 1fr; }
  .page-aside { position: static; padding-inline-start: 0; border-inline-start: 0; border-block-start: 1px solid var(--rule-paper); padding-block-start: 1.75rem; }
}
@media (max-width: 560px) {
  .page-facts { grid-template-columns: 1fr; }
  .page-pager { flex-direction: column; }
  .page-pager a { max-width: none; }
  .page-pager a:last-child { text-align: left; }
}

/* ==========================================================================
   Round of 04.10.2026
   ========================================================================== */
/* A menu item lands its section close under the bar. The landing point used
   to be the section's own top edge, which left the whole of the section's top
   padding (up to 9rem) as an empty white band under the header; the client
   was scrolling the rest by hand. Now the heading stops 3rem under the bar in
   its lowered, scrolled state (8px shorter than --nav-h). html's
   scroll-padding-top still supplies the bar itself; this only takes the
   padding back off. */
.section[id] { scroll-margin-top: calc(3rem - 8px - var(--section-y)); }

/* Services and Funding tiles lower: the copy keeps its place at the foot of
   the tile, and the photograph above it gives up about half of its height. */
.svc  { min-height: clamp(440px, 34vw, 560px); }
.fund2 { min-height: clamp(320px, 25vw, 420px); }

/* The words of the right-hand tile start as far from its left edge as those of
   the left-hand tile do from theirs, so every tile in the band reads the same. */
.tiles > :nth-child(even) { padding-inline: var(--edge) var(--inner); }

/* The whole tile is a real link (site.js lays .tile-link over it), so the
   browser's own "Open in new tab", a middle click and Ctrl/Cmd-click all work
   anywhere on the tile, not only on "Read more". */
.is-link { position: relative; }
.svc > .tile-link, .fund2 > .tile-link,
.sector > a.tile-link, .project > a.tile-link {
  position: absolute; inset: 0; z-index: 3;
}

/* Phones: the bar 76px once the page moves (84px at rest), and the menu items
   a step closer together. */
@media (max-width: 900px) {
  :root { --nav-h: 84px; }
  .nav__links { gap: 1.1rem; }
}