/* ==========================================================================
   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));
}

/* ==========================================================================
   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 top padding (up to
   140px) as an empty white band under the header; the client was scrolling
   the rest by hand. Now the heading stops 48px under the bar in its lowered,
   scrolled state (8px shorter than --head-h). */
.section[id] { scroll-margin-top: calc(var(--head-h) - 8px + 48px - var(--step)); }

/* 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. */
.service > a.tile-link, .sector > a.tile-link, .advantage > a.tile-link {
  position: absolute; inset: 0; z-index: 3;
}

/* Phones and tablets: the menu items a step further apart. */
@media (max-width: 1200px) {
  .site-nav ul { gap: 14px; }
}
/* Phones: the bar 84px at rest, 76px once the page moves. */
@media (max-width: 860px) {
  :root { --head-h: 84px; }
}

/* ==========================================================================
   Round of 04.10.2026, second batch
   ========================================================================== */
/* A thin gold rule between two white sections, on the line of the page's
   frame and exactly halfway through the white gap between them. Only where
   white meets white: after a full-bleed frame the photograph already closes
   the section. */
.section--services, .section--core, .section--contact { position: relative; }
.section--services::before, .section--core::before, .section--contact::before {
  content: '';
  position: absolute; left: 0; right: 0;
  width: calc(min(var(--max), 100%) - 2 * var(--gut)); margin-inline: auto;
  /* site.js nudges each rule (--rule-y) so it renders the same on a scaled
     display; see snapRules there. */
  top: var(--rule-y, 0px);
  height: 1px;
  background: rgba(160, 128, 60, 0.85);
}

/* Inner pages: the text starts closer under the photograph. */
.page-body { padding-block-start: clamp(40px, 4.5vw, 72px); }