/* ==========================================================================
   HOME PAGE — hero, about, contact sections
   ========================================================================== */

/* ---------------- HERO ---------------- */
/* The hero is also a data-fit section: sizes below multiply by --fs */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; padding: calc(var(--nav-height) + 5vh) 0 5vh; overflow: hidden; }

/* Faint vertical "ledger" columns in the background */
.ledger {
  position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / 12) 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 75%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 75%, transparent);
}
/* Content is vertically centred in the screen — no empty gap */
.hero { align-items: center; }
.hero-in { position: relative; display: flex; flex-direction: column; gap: calc(clamp(28px, 5vh, 48px) * var(--fs, 1)); width: 100%; align-self: stretch; }
.hero-top { margin-top: auto; }

/* Top row: eyebrow + headline on the left, drawing logo on the right */
.hero-top { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.hero-top .eyebrow { margin-bottom: calc(clamp(16px, 3vh, 26px) * var(--fs, 1)); }

/* Logo: draws itself on load (CSS) and spins like a globe when clicked (hero.js) */
.mark-box {
  width: calc(clamp(150px, 30vh, 280px) * var(--fs, 1)); aspect-ratio: 1; flex: none;
  padding: 0; border-radius: 50%; cursor: pointer; transition: transform .4s var(--ease);
}
.mark-box:hover { transform: scale(1.03); }
.mark-box:focus-visible { outline-offset: 8px; border-radius: 50%; }
.mark-box svg { width: 100%; height: 100%; overflow: visible; }
.mark-box .d { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.loaded .mark-box .d { stroke-dashoffset: 0; }
.mark-box .d2 { transition-delay: .35s; }
.mark-box .d3 { transition-delay: .7s; }
.mark-box .d4 { transition-delay: 1s; }
.mark-box .d5 { transition-delay: 1.25s; }

/* Headline — words rise in one by one (split into spans by hero.js).
   Size follows both screen width and height so it never crowds the page. */
.hero h1 {
  font-family: var(--serif); font-weight: 330;
  font-size: calc(clamp(40px, min(5.6vw, 11vh), 96px) * var(--fs, 1));
  line-height: 1.02; letter-spacing: -.035em; max-width: 17ch;
}
.hero h1 em { font-weight: 300; color: var(--ink-2); }
/* Each word is masked while it rises. Extra padding on the sides stops
   italic letters (e.g. the final "d" of "engineered") from being clipped. */
.hero h1 .w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0 .14em .1em .04em; margin: 0 -.14em -.1em -.04em;
}
.hero h1 .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.loaded .hero h1 .w > span { transform: none; }

/* Bottom row: one-line intro · Explore button */
.hero-row {
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
  padding-top: calc(26px * var(--fs, 1)); border-top: 1px solid var(--line);
}
.hero-row .lead { font-size: calc(clamp(16px, 1.3vw, 19px) * var(--fs, 1)); color: var(--muted); max-width: 560px; }

/* Service strip — the six services with small line icons at the foot of
   the hero. Each item jumps to its chapter in the services book. */
.hero-strip {
  list-style: none; margin-top: auto; display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero-strip li + li { border-left: 1px solid var(--line); }
.hero-strip button {
  width: 100%; height: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  padding: calc(16px * var(--fs, 1)) 16px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink);
  transition: background .3s, color .3s;
}
.hero-strip li:first-child button { padding-left: 0; }
.hero-strip button:hover { color: var(--blue); }
.hero-strip svg { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.hero-strip svg .ac { stroke: var(--green); }
.hero-strip li:nth-child(even) svg .ac { stroke: var(--blue); }
.hero-strip button:hover svg { transform: translateY(-2px); }

/* ---------------- ABOUT ----------------
   Two equal cards with matching rules, labels and text sizes, so both
   columns start and end on the same lines. */
.about-body { display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(56px * var(--fs, 1)); align-items: stretch; }
.about-card { border-top: 1px solid var(--ink); padding-top: calc(22px * var(--fs, 1)); }
.about-lbl { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: calc(14px * var(--fs, 1)); display: flex; align-items: center; gap: 10px; }
.about-lbl::before { content: ""; width: 7px; height: 7px; border: 1.5px solid var(--green); transform: rotate(45deg); }
.about-card:nth-child(2) .about-lbl::before { border-color: var(--blue); }
.about-lead { font-family: var(--serif); font-weight: 350; font-size: calc(clamp(21px, 1.9vw, 27px) * var(--fs, 1)); line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin-bottom: calc(14px * var(--fs, 1)); }
.about-card p:not(.about-lead) { font-size: calc(16px * var(--fs, 1)); color: var(--muted); max-width: 46ch; }

/* ---------------- CONTACT (navy section, also holds company & legal details) ---------------- */
.contact { background: var(--ink); color: var(--paper); overflow: hidden; }
.contact .sec-label { color: rgba(246, 244, 239, .7); }
.contact .sec-title em { color: var(--sky-light); }
.contact-grid { display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.contact-lead { font-size: calc(17px * var(--fs, 1)); color: rgba(246, 244, 239, .8); max-width: 520px; }
.contact .btn-primary { background: var(--paper); color: var(--ink); margin: calc(26px * var(--fs, 1)) 0 calc(44px * var(--fs, 1)); }
.contact-mark { position: absolute; right: -8%; bottom: -18%; width: min(560px, 55vw); opacity: .07; pointer-events: none; }  /* faint logo watermark */

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px) {
  .about-body, .contact-grid { grid-template-columns: 1fr; gap: 14px; }
  .about-cols { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 1180px) {
  .hero-strip { grid-template-columns: repeat(3, 1fr); }
  .hero-strip li:nth-child(4) { border-left: 0; }
  .hero-strip li:nth-child(4) button { padding-left: 0; }
  .hero-strip li:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .hero-strip { grid-template-columns: 1fr 1fr; }
  .hero-strip li { border-left: 0 !important; border-top: 0 !important; }
  .hero-strip li:nth-child(even) { border-left: 1px solid var(--line) !important; }
  .hero-strip li:nth-child(n+3) { border-top: 1px solid var(--line) !important; }
  .hero-strip li button { padding: 12px 10px; gap: 10px; font-size: 12.5px; }
  .hero-strip li:nth-child(odd) button { padding-left: 0; }
  .hero-strip svg { width: 24px; height: 24px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 110px; min-height: 100svh; }
  .hero-in { gap: 32px; }
  .hero-top { grid-template-columns: 1fr; gap: 20px; }
  .hero-top .mark-box { order: -1; width: 112px; }   /* logo sits above the headline on phones */
  .hero-row { gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .w > span { transform: none; }
  .mark-box .d { stroke-dashoffset: 0; }
}