/* Ackroyed Group website: public page (body.public) and resources hub (body.hub) */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --navy: #1d3557;
  --navy-deep: #14213d;
  --navy-line: #2c4a73;
  --gold: #c9a227;
  --gold-hover: #d8b445;
  --paper: #f7f8fa;
  --slate: #4a5568;
  --rule: #dde2ea;
  --white: #ffffff;
  --mist: #c9d3e3;

  --font: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --measure: 34rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus { left: var(--gutter); top: 0.75rem; z-index: 10; background: var(--white); color: var(--navy-deep); padding: 0.5rem 0.75rem; }

/* Shared header */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand img { width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; }

.button {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 0.5rem;
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 120ms ease;
}
.button:hover { background: var(--gold-hover); }

/* ---------- Public page ---------- */

body.public {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
  position: relative;
}

/* The one bold element: the monogram, engraved at architectural scale and cropped off the edge */
.seal {
  position: absolute;
  right: -18vmin;
  bottom: -14vmin;
  width: 92vmin;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.seal path {
  fill: none;
  stroke: var(--navy-line);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.seal path.inlay { stroke: var(--gold); stroke-opacity: 0.55; }

body.public .bar,
body.public main,
body.public footer { position: relative; z-index: 1; }

body.public main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem var(--gutter) 4rem;
}

.statement {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(3.25rem, 10.5vw, 8.5rem);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.lede {
  max-width: var(--measure);
  margin: 2rem 0 0;
  font-size: clamp(1.125rem, 1.6vw, 1.3rem);
  line-height: 1.5;
  color: var(--mist);
}

.contact {
  margin: 2.5rem 0 0;
  color: var(--mist);
}
.contact a {
  color: var(--white);
  font-weight: 600;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

body.public footer {
  padding: 1.25rem var(--gutter) 1.5rem;
  font-size: 0.875rem;
  color: var(--mist);
}

/* ---------- Resources hub ---------- */

body.hub {
  background: var(--paper);
  color: var(--navy-deep);
}

body.hub .bar {
  background: var(--navy);
  color: var(--white);
}

.who {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.9375rem;
  color: var(--mist);
}
.who a {
  color: var(--white);
  font-weight: 600;
  text-underline-offset: 4px;
}

body.hub main {
  max-width: 52rem;
  margin: 0 auto;
  padding: 3.5rem var(--gutter) 5rem;
}

.greeting {
  margin: 0;
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.greeting + p {
  margin: 0.75rem 0 0;
  color: var(--slate);
  font-size: 1.125rem;
}

.group { margin-top: 3rem; }

.group h2 {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--navy-deep);
}

.tools {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tools li { border-bottom: 1px solid var(--rule); }

.tool {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.5rem;
  text-decoration: none;
  border-radius: 0.375rem;
}
.tool:hover { background: var(--white); }
.tool:hover .tool-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); }

.tool-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 0.625rem;
  background: var(--navy);
  color: var(--gold);
}
.tool-icon svg { width: 1.375rem; height: 1.375rem; }

.tools.microsoft .tool-icon { background: var(--white); color: var(--navy); box-shadow: inset 0 0 0 1px var(--rule); }

.tool-name { display: block; font-weight: 700; font-size: 1.0625rem; }
.tool-desc { display: block; color: var(--slate); font-size: 0.9375rem; line-height: 1.4; }
.tool-host { color: var(--slate); font-size: 0.875rem; white-space: nowrap; }

body.hub footer {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 var(--gutter) 3rem;
  color: var(--slate);
  font-size: 0.875rem;
}

@media (max-width: 40rem) {
  .tool { grid-template-columns: 2.75rem 1fr; }
  .tool-host { display: none; }
  .who span { display: none; }
  .seal { right: -30vmin; bottom: -6vmin; width: 120vmin; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}