/* ==========================================================================
   GARD ASSETS — v2.css

   The redesign, laid over base.css. Signed off by the client on 25.09.2026 and
   now loaded by the live page (and its inner pages) as well as the archived
   home_v1.html's own copy of base.css alone — home_v1 does not load this file,
   so it keeps looking exactly like the version it replaced. Kept as its own
   stylesheet rather than folded into base.css: a file that can still be
   dropped is worth more than a few saved bytes if a future redesign needs to
   peel this look back off.

   What it changes:
     1  the gold, taken from the mark itself
     2  the header bar, 8px lower once the page has moved
     3  Core — a new section, framed like Services
     4  Contact — framed like Services: photograph edge to edge, form on the right
   ========================================================================== */

/* --- 1. The gold is the mark's gold ----------------------------------------
   The old accents (#b49e34 / #cbb64c) were a greener yellow than the hexagon
   beside the wordmark. Both are now read off the mark's own gradient
   (assets/logo/gard-mark.svg): on photographs and on black the accent is the
   gradient's body tone, #d5bd72; on white it is the same hue taken down towards
   the gradient's shadow stop (#8c6a31), far enough to stay legible as thin
   rules and small capitals on paper. */
:root {
  --gold: #a0803c;          /* on white */
  --gold-lite: #d5bd72;     /* on black and on photographs */
}
.rail { background: rgba(213, 189, 114, 0.28); }

/* --- 2. The bar steps down by 8px once the page moves ----------------------
   The same moment it frosts over (.is-stuck, set by site.js at 24px), so the
   two changes read as one. Everything that measures itself against the bar
   (scroll-margin, the first screen's padding) keeps using --head-h: the bar
   only ever gets smaller, so nothing can end up hidden underneath it. */
.site-head { transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease), height 0.35s var(--ease); }
.site-head.is-stuck { height: calc(var(--head-h) - 8px); }
/* With the menu open on a tablet or phone the bar is the menu's own header,
   not a scrolled page's — it keeps its full height. */
body.nav-open .site-head.is-stuck { height: var(--head-h); }

/* Only the bar gets lower. The mark, the wordmark and the menu keep their
   size when the page moves — the client's instruction (24.09), which
   supersedes an attempt to scale the lockup down with the bar. */

/* --- 3. Core — a full-bleed photograph carrying the firm's principles ------
   Built exactly like a service frame: the section heading stays on white
   inside the measure, the frame breaks out to both edges of the window, and
   the words go back inside the measure within it. */
.section--core { padding-block: var(--step) 0; }
.section--core .wrap { padding-inline: 0; max-width: none; }
.section--core .head { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.core-frame {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 86vh, 820px);
  padding-block: clamp(48px, 7vw, 110px);
  padding-inline: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
  color: #fff;
}
.core-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.86) 0 42%, rgba(0,0,0,0.38) 80%, rgba(0,0,0,0.26)),
    linear-gradient(180deg, rgba(0,0,0,0.34), rgba(0,0,0,0.6));
}
.core-body {
  position: relative;
  z-index: 2;
  max-width: 64ch;
  display: grid;
  gap: clamp(22px, 2.6vw, 36px);
}
.core-lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 1.9vw, 29px);
  line-height: 1.36;
  color: #fff;
}
.core-body strong { font-weight: 500; color: var(--gold-lite); }

/* --- 4. Contact — framed like Services -------------------------------------
   The photograph runs under the whole frame with a veil that is heaviest on
   the right, where the form stands; the two paragraphs sit on the left. The
   form is redrawn for a dark ground: white type, white hairlines, the gold on
   focus. */
.section--contact { padding-block: var(--step) 0; }
.section--contact .wrap { padding-inline: 0; max-width: none; }
.section--contact .head { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.contact--cover {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(620px, 88vh, 840px);
  padding-block: clamp(48px, 7vw, 110px);
  padding-inline: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut)));
  color: #fff;
}
.contact--cover::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(270deg, rgba(0,0,0,0.88) 0 40%, rgba(0,0,0,0.5) 72%, rgba(0,0,0,0.4)),
    linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.55));
}
/* Words and form share the right-hand column, the words above the form — as
   on the live page, at the client's request (24.09). The photograph keeps the
   left half to itself. */
.contact-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  column-gap: clamp(32px, 6vw, 120px);
  row-gap: clamp(24px, 2.8vw, 38px);
  align-items: start;
}
.contact-inner > * { grid-column: 2; }
.contact--cover .contact-words p { color: #fff; max-width: none; }
.contact--cover .contact-words p + p { color: rgba(255, 255, 255, 0.78); }
.contact--cover .field label { color: rgba(255, 255, 255, 0.66); }
.contact--cover .field input,
.contact--cover .field textarea {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.34);
}
.contact--cover .field input:hover,
.contact--cover .field textarea:hover { border-bottom-color: rgba(255, 255, 255, 0.7); }
.contact--cover .field input:focus,
.contact--cover .field textarea:focus {
  border-bottom-color: var(--gold-lite);
  box-shadow: 0 1px 0 0 var(--gold-lite);
}
.contact--cover .submit {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.contact--cover .submit:hover { background: transparent; border-color: var(--gold-lite); color: var(--gold-lite); }
.contact--cover .form-note { color: rgba(255, 255, 255, 0.62); }
.contact--cover .form-note.is-live { color: var(--gold-lite); }
.contact--cover .form-note.is-error { color: #ff9b8f; }
.contact--cover :focus-visible { outline-color: var(--gold-lite); }

@media (max-width: 860px) {
  .contact-inner { grid-template-columns: 1fr; }
  .contact-inner > * { grid-column: 1; }
  .contact--cover::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.62), rgba(0,0,0,0.86));
  }
}
@media (max-width: 720px) {
  .core-frame, .contact--cover { min-height: 0; padding-block: 56px; }
}

/* --- Contact (home): the text+form column stretched left --------------------
   The client asked (24.09) for the words-and-form column to start further
   left, so it reads wider and only takes a slice of the photograph rather
   than half the window. Widening the fixed column pushes its own left edge
   left by exactly that width, while the photograph keeps the rest. +100px at
   the 1440 the client measured against. */
@media (min-width: 861px) {
  .contact--cover .contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 660px); }
}
/* Wider than the burger, the column is exactly as wide as the menu, so its
   words start under HOME (site.js measures the menu into --menu-w). */
@media (min-width: 1201px) {
  .contact--cover .contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, var(--menu-w, 660px)); }
}

/* --- Tiles: click anywhere, and one hover language wherever one links out ---
   The client asked (24.09) for the whole tile — Services, Sectors, and any
   other tile with a Read more — to open the page, and for the same hover
   everywhere: the photograph gaining a little scale, a touch of extra
   darkening, and the Read more rule already extending before the pointer
   reaches the link itself. site.js adds .is-link and does the click; this
   only draws it. A tile with no Read more (Advantages, currently) is left
   exactly as it was — .is-link is never added to it. */
.service.is-link,
.sector.is-link,
.advantage.is-link { cursor: pointer; }

.service { overflow: hidden; } /* sector and advantage already clip */

.service .shot--cover img,
.sector .shot--cover img,
.advantage .shot--cover img {
  transition: transform 0.9s var(--ease), opacity 0.9s var(--ease), filter 0.9s var(--ease);
}
.service:hover .shot--cover img { transform: scale(1.06); filter: brightness(0.92); }
.advantage:hover .shot--cover img { transform: scale(1.06); filter: grayscale(0) contrast(1.05) brightness(0.92); }
/* Sectors keep their own hover — the photograph sinks and the words carry the
   tile, which the client singled out as already right — and gain only the
   same slow move-in of the photograph. */
.sector:hover .shot--cover img { transform: scale(1.06); }

/* The rule under Read more used to lengthen only when the pointer was over
   the link itself; now the whole tile triggers it, since the whole tile is
   the click target. */
.service:hover .more::after,
.sector:hover .more::after,
.advantage:hover .more::after { width: 44px; }

/* --- One text size under a heading, everywhere on the home page ------------
   The client asked (24.09) for no paragraph to read as the "headline" of a
   block — not by colour either. The second lines of About and Contact were
   the places that still did. Core's lead keeps its accent face: the pairing
   of faces stays as it is until the client settles it. Scoped to v2
   only: the live page keeps its own approved treatment. */
.is-v2 .about-copy p + p { color: inherit; }
.contact--cover .contact-words p + p { color: #fff; }

/* ==========================================================================
   Inner pages — one per tile that has text of its own
   ========================================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* "Read more" on a tile or a service frame. */
.more {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-lite);
}
.more::after {
  content: '';
  width: 28px; height: 1px;
  background: currentColor;
  transition: width 0.3s var(--ease);
}
.more:hover::after, .more:focus-visible::after { width: 44px; }
.service-body .more { margin-top: 4px; }
.advantage-body .more, .sector-body .more { margin-top: 12px; }

/* The first screen of an inner page: the tile's photograph, a black veil, the
   section it belongs to and the page's title. Shorter than the home page's —
   this is a chapter opening, not the cover. */
.page-hero {
  min-height: clamp(380px, 58vh, 560px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--head-h) + 40px) max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))) clamp(40px, 6vw, 80px);
}
.page-hero .hero-scrim { background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.78)); }
.page-hero-inner { position: relative; z-index: 1; display: grid; gap: 18px; }
.crumbs { margin: 0; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; }
.crumbs a { color: var(--gold-lite); text-decoration: none; }
.crumbs a::before { content: '← '; }
.page-title {
  margin: 0;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-body { padding-block: clamp(56px, 7vw, 110px) clamp(48px, 6vw, 90px); }
.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.page-copy { max-width: 68ch; }
.page-copy p {
  font-size: clamp(17px, 0.5vw + 15px, 20px);
  line-height: 1.7;
}
/* The opening paragraph carries the page, set in the display face like the
   first paragraph of About on the home page. */
.page-copy p:first-child {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.9vw, 29px);
  line-height: 1.4;
}
/* Sectors only (24.09): the client asked every paragraph on a sector page to
   read at one size — no opening line set apart from the rest. build.js tags
   the inner page's <body> with sec-<section id>, so this is scoped to
   Sectors and leaves Services' and any other section's inner pages as they
   were. */
.is-page.sec-sectors .page-copy p:first-child {
  font-family: inherit;
  font-size: clamp(17px, 0.5vw + 15px, 20px);
  line-height: 1.7;
}
.page-copy strong { font-weight: 500; color: var(--gold); }
.page-list { margin: 0 0 1.15em; padding: 0; list-style: none; }
.page-list li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-top: 1px solid var(--rule);
  font-size: clamp(16px, 0.4vw + 14.5px, 19px);
  line-height: 1.6;
}
.page-list li:last-child { border-bottom: 1px solid var(--rule); }
.page-list li::before {
  content: '';
  position: absolute;
  left: 0; top: calc(12px + 0.8em);
  width: 12px; height: 1px;
  background: var(--gold);
}

.page-aside {
  position: sticky;
  top: calc(var(--head-h) + 24px);
  display: grid;
  gap: 18px;
  padding-left: 28px;
  border-left: 1px solid var(--rule);
}
.aside-head { margin: 0; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-45); }
.aside-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.aside-list a, .aside-list span {
  display: block;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  text-decoration: none;
  color: var(--ink-70);
  transition: color 0.2s var(--ease);
}
.aside-list a:hover { color: var(--gold); }
.aside-list span { color: var(--gold); }
.page-cta { display: inline-block; text-decoration: none; margin-top: 8px; }

.page-pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(48px, 6vw, 90px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.page-pager a {
  display: grid;
  gap: 6px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.5vw, 24px);
  color: var(--ink);
}
.page-pager a:last-child { text-align: right; }
.page-pager span { font-family: var(--font-text); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.page-pager a:hover { color: var(--gold); }

/* The frame's rail and the frosted bar belong to the home page's long read;
   on a page this short the bar starts frosted so it reads over the photograph
   and the white alike once it moves. */
.is-page .rail { display: none; }

@media (max-width: 860px) {
  .page-grid { grid-template-columns: 1fr; }
  .page-aside { position: static; padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 28px; }
}
@media (max-width: 560px) {
  .page-pager { flex-direction: column; }
  .page-pager a:last-child { text-align: left; }
}

/* --- Advantages: a denser veil under the words ------------------------------
   The gold titles did not hold on the brighter photographs (client, 24.09).
   The veil now darkens from the top third down, so the title — which sits
   around the middle of the tile — always stands on near-black. */
.advantage::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0, rgba(0,0,0,0.72) 30%, rgba(0,0,0,0.9) 55%, rgba(0,0,0,0.95));
}