/* Alsper Consultancy — one stylesheet for all four pages.
   Colours, type and spacing are taken as exported from the approved
   Claude Design pages (24 Sep 2026). System fonts only; nothing is fetched. */

:root {
  --paper: oklch(0.972 0.012 85);
  --ink: oklch(0.22 0.012 60);
  --ink-2: oklch(0.32 0.013 60);
  --muted: oklch(0.38 0.014 60);
  --rule: oklch(0.85 0.015 80);
  --blue: oklch(0.36 0.05 235);
  --blue-dark: oklch(0.26 0.05 235);
  --blue-label: oklch(0.42 0.055 235);
  --on-blue: oklch(0.972 0.012 85);
  --on-blue-2: oklch(0.88 0.03 85);
  --gold: oklch(0.82 0.06 78);
  --tint: oklch(0.945 0.016 85);
  --gutter: clamp(20px, 5vw, 80px);
  /* header height: 14px padding top and bottom, 1px rule, logo square */
  --hdr: calc(29px + clamp(46px, 5.6vw, 64px));
}

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

html, body { margin: 0; padding: 0; }

/* keeps a focused link clear of the sticky header */
html { scroll-padding-top: calc(var(--hdr) + 8px); }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

p, h1, h2, ol { margin: 0; }

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- Header (every page) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2vw, 20px);
  padding: 14px clamp(16px, 5vw, 80px);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(9px, 1.1vw, 14px);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.brand:hover { color: inherit; }

.brand-mark {
  width: clamp(46px, 5.6vw, 64px);
  height: clamp(46px, 5.6vw, 64px);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: var(--on-blue);
  font-size: clamp(20px, 2.45vw, 28px);
  letter-spacing: 0.03em;
  line-height: 1;
}

.brand-words {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.12;
  gap: 0.22em;
}
.brand-name {
  font-size: clamp(19px, 2.3vw, 27px);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand-sub {
  font-size: clamp(9.5px, 1.15vw, 13px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
}

.contact {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: clamp(42px, 4.6vw, 50px);
  padding: 0 clamp(13px, 1.8vw, 22px);
  border-radius: 3px;
  background: var(--blue);
  color: var(--on-blue);
  font-size: clamp(12px, 1.3vw, 14.5px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.contact:hover,
.contact:focus-visible { background: var(--blue-dark); color: var(--on-blue); }

/* ---------- Footer (every page) ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 40px) var(--gutter) clamp(36px, 4vw, 52px);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--muted);
}
.site-footer .legal { margin-bottom: 4px; letter-spacing: 0.04em; }
.site-footer .office { margin-bottom: 12px; }

/* ---------- Front page ----------
   The first screen is the header plus <main>; <main> is exactly one screen
   tall (or taller if its content needs it) and the banner row sits at its
   foot, so the footer starts below the fold. */

.home main {
  display: grid;
  min-height: calc(100vh - var(--hdr));
  min-height: calc(100svh - var(--hdr));
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: 'strap strap' 'lead extras' 'nav nav';
  grid-template-rows: auto auto 1fr;
  align-items: start;
  column-gap: clamp(22px, 3vw, 48px);
  row-gap: clamp(12px, 1.6vw, 22px);
  padding: clamp(12px, 2vw, 30px) var(--gutter) clamp(14px, 2vw, 24px);

  --lead: clamp(18px, min(3.5vw, 4.6vh), 44px);
  --sec: clamp(14.5px, min(2.1vw, 2.9vh), 25px);
  --cred: clamp(12.5px, min(1.4vw, 1.95vh), 16.5px);
  --strap: clamp(10.5px, min(1.2vw, 1.7vh), 13px);
  --strappad: 10px;
  --door: clamp(17px, min(2.2vw, 3vh), 26px);
  --doornum: 11px;
  --doorarrow: 15px;
  --doorpad: clamp(9px, min(1.4vw, 1.9vh), 18px);
  --extrasbg: transparent;
  --extraspad: 0;
}

.strap {
  grid-area: strap;
  align-self: start;
  padding-bottom: var(--strappad);
  border-bottom: 1px solid var(--rule);
  font-size: var(--strap);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-label);
}

.lead {
  grid-area: lead;
  font-size: var(--lead);
  line-height: 1.28;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* A photograph, if one is added later, can go inside .extras
   (above or below .second) without changing the grid. */
.extras {
  grid-area: extras;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.6vh, 16px);
  background: var(--extrasbg);
  padding: var(--extraspad);
}

.second {
  font-size: var(--sec);
  line-height: 1.45;
  color: var(--ink-2);
  max-width: 34em;
  text-wrap: pretty;
}

.behind {
  padding-top: clamp(10px, 1.6vh, 16px);
  border-top: 1px solid var(--rule);
  font-size: var(--cred);
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--muted);
  text-wrap: pretty;
}

.banners {
  grid-area: nav;
  align-self: end;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 20px);
  padding-top: clamp(12px, min(2.5vw, 3vh), 32px);
}

.banner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: var(--doorpad) clamp(12px, 1.8vw, 22px);
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--on-blue);
  text-align: left;
  text-decoration: none;
}
.banner:hover,
.banner:focus-visible {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  color: var(--on-blue);
  box-shadow: inset 0 -3px 0 var(--gold);
}
.banner-num {
  flex: 0 0 auto;
  font-size: var(--doornum);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-blue-2);
}
.banner-title {
  flex: 1 1 auto;
  white-space: nowrap;
  font-size: var(--door);
}
.banner-arrow {
  flex: 0 0 auto;
  font-size: var(--doorarrow);
  color: var(--on-blue);
}

/* Narrower than a laptop: one column. */
@media (max-width: 899px) {
  .home main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'strap' 'lead' 'extras' 'nav';
    grid-template-rows: auto auto auto 1fr;
  }
}

/* Phone width: banners stack. */
@media (max-width: 767px) {
  .banners { grid-template-columns: minmax(0, 1fr); }
}

/* Short screens (phones in the hand, small laptop windows): one column and
   type scaled to the height, so the banner row still lands on the first screen.
   The design switches here when the space below the header is under 680px. */
@media (max-height: 772px) {
  .home main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'strap' 'lead' 'extras' 'nav';
    grid-template-rows: auto auto auto 1fr;
    --lead: clamp(15px, 3.7svh, 24px);
    --sec: clamp(13.5px, 2.3svh, 14.9px);
    --cred: clamp(12px, 2.07svh, 13.4px);
    --strap: clamp(9.5px, 1.7svh, 11px);
    --door: clamp(16px, 3svh, 21px);
    --doornum: 10px;
    --doorpad: clamp(6px, 1.6svh, 12px);
  }
}

/* Phones in the hand (390 x 664 is an iPhone in Safari with its toolbars).
   The export's own sizes left the last banner below the first screen here,
   so type and gaps are tightened just enough to bring the banner row up. */
@media (max-width: 767px) and (max-height: 772px) {
  .home main {
    row-gap: 10px;
    padding-top: 10px;
    --lead: clamp(15px, 2.94svh, 22px);
    --sec: clamp(13px, 2.08svh, 14.9px);
    --cred: clamp(12px, 1.85svh, 13.4px);
    --door: clamp(16px, 2.56svh, 19px);
    --doorpad: clamp(5px, 1.05svh, 10px);
  }
  .extras { gap: 8px; }
  .behind { padding-top: 8px; }
  .banners { gap: 8px; padding-top: 6px; }
}

/* Wide, tall screens: the opening scales up to fill the first screen,
   the right-hand column takes a tint, and the banners grow with it. */
@media (min-width: 1200px) and (min-height: 773px) {
  .home main {
    --lead: clamp(22px, calc(1.58vw + 4.9svh - 17px), 64px);
    --sec: calc(var(--lead) * 0.58);
    --cred: calc(var(--lead) * 0.4);
    --strap: max(11px, calc(var(--lead) * 0.28));
    --strappad: 14px;
    --door: max(20px, calc(var(--lead) * 0.52));
    --doorarrow: 19px;
    --doorpad: clamp(16px, calc(var(--lead) * 0.5), 30px);
    --extrasbg: var(--tint);
    --extraspad: clamp(18px, 2.2svh, 30px);
  }
}

/* ---------- Section pages (Consultancy, Solutions, Coaching) ----------
   One layout for all three: heading first, all the text below it. */

.section main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 40px) clamp(20px, 5vw, 40px) clamp(48px, 7vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 26px);
}

.home-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: none;
}
.home-link:hover,
.home-link:focus-visible { color: var(--blue-dark); text-decoration: underline; }

.section-head {
  padding-bottom: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--rule);
}
.section-num {
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-label);
}
.section h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.section main p,
.section main ol {
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.6;
  text-wrap: pretty;
}
.section main .section-num { font-size: 11.5px; line-height: 1.6; }

.part {
  padding-top: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--rule);
}
.part-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.2vw, 26px);
}
.section h2 {
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-label);
}
.section ol { padding-left: 1.4em; }
.section li { margin-bottom: 10px; padding-left: 4px; }
.section li:last-child { margin-bottom: 0; }