/* ============================================================
   Keystone Presence
   Warm paper ground, one gold accent taken from the logo,
   black bands only where the logo sits.
   ============================================================ */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("cormorant-garamond-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Sampled from the logo file: its baked-in border is pure black, so the
     bands must be pure black or the image shows a rectangle edge. */
  --band: #000000;

  /* Warm paper, never white. */
  --paper: #f7f2e9;
  --paper-2: #efe7d8;

  --ink: #231f19;
  --ink-soft: #554d41;

  /* Gold sampled from the logo's ring and PRESENCE lettering.
     --gold is legible only on the black bands (8.7:1).
     --gold-ink is the darkened form for the light ground; it is held dark
     enough to clear 4.5:1 on BOTH --paper (5.3:1) and --paper-2 (4.8:1),
     so one accent token covers every light section. */
  --gold: #c8a063;
  --gold-ink: #7e5f16;

  --rule: #ddd2bd;
  --rule-firm: #c2b49a;

  --shell: 46rem;
  --gutter: 1.375rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

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

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-wrap: break-word;
}

/* Browser surfaces theming */
::selection { background: var(--gold); color: #000; }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.band :focus-visible { outline-color: var(--gold); }

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
}
.skip:focus {
  left: 0;
  background: var(--band);
  color: var(--gold);
  padding: 0.75rem 1rem;
  font-weight: 700;
}

/* ---------- Black bands ---------- */

.band {
  background: var(--band);
  text-align: center;
}

/* ---------- Banner: full-bleed masthead, carries the wordmark ----------
   The image has its dark ground baked in, so it sits edge to edge on a
   matching black band with no frame and no radius. Cropped with cover rather
   than shown at its native 2.67:1, which would shrink the wordmark to a
   sliver on a phone; the wordmark sits at x 31-66% / y 19-69% of the source,
   so every crop below keeps it whole. */
.banner {
  background: var(--band);
  line-height: 0;
}

.banner-img {
  display: block;
  width: 100%;
  height: clamp(150px, 30vw, 340px);
  object-fit: cover;
  object-position: center 44%;
}

.band-foot {
  padding-block: 2.25rem 2.5rem;
}

.band-logo-sm {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
}

.foot-id {
  /* Inherits the 68ch paragraph cap, so it needs auto margins or the
     centred text sits off-centre inside a left-aligned box. */
  margin: 0 auto;
  max-width: 34rem;
  color: #b6ab98;
  font-size: 0.8125rem;
  line-height: 1.6;
  padding-inline: var(--gutter);
}

/* ---------- Sections: bands of ground, never cards ---------- */

/* Breathing room is proportional throughout: tighter on a phone where
   vertical space is the scarce resource, opening up to the full editorial
   rhythm once there is room for it. */

/* ---------- Hero: one ground, hierarchy carried by scale ----------
   No colour block. The heading holds the eye because it is large and tightly
   set against small quiet sans, which is the reference's own device — the
   left column earns attention typographically, not chromatically. */
.hero {
  background: var(--paper);
  padding-block: clamp(2.75rem, 8vw, 5.5rem) clamp(3.25rem, 11vw, 7.5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 5vw, 2.5rem) 0;
}

/* min-width:0: grid items default to min-width:auto, so at large text scales
   a long word in the heading sizes the track wider than the viewport and
   pushes the page sideways (WCAG 1.4.4). */
.hero-grid > * { min-width: 0; }

/* The single gold accent on the page's light ground, spent on the one word
   the visitor came to verify. Used once, nowhere else. */
.name { color: var(--gold-ink); }

/* The closing section keeps the larger address; in the hero it steps down so
   the aside stays subordinate to the heading beside it. */
.hero .contact-email { font-size: clamp(1.25rem, 3vw, 1.75rem); }

.entry {
  background: var(--paper);
  padding-block: clamp(2.25rem, 6vw, 4.5rem);
}

.closing {
  padding-block: clamp(2.25rem, 6vw, 4.5rem);
}

.alt { background: var(--paper-2); }

/* Where two same-coloured grounds meet, a hairline keeps the seam readable. */
.entry + .entry:not(.alt),
.hero + .entry:not(.alt) {
  border-top: 1px solid var(--rule);
}

/* ---------- Type ---------- */

/* Used once, for the hero statement. Pushed well past the page's other
   headings: this is the one line the visitor reads before deciding whether to
   keep reading at all. */
.display {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(2.375rem, 5.4vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  margin: 0;
  /* balance gives up past a few lines and this heading runs to six or seven;
     pretty still prevents the one-word last line, which is what hurts here. */
  text-wrap: pretty;
}

.head {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 4.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

/* Deliberately small and quiet: the size gap against the display heading is
   what separates the hero's two columns now that the colour block is gone. */
.lede {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34ch;
  margin: 0;
  text-wrap: pretty;
}

.say {
  font-size: 1.125rem;
  margin: 0 0 1.25rem;
  max-width: 64ch;
  text-wrap: pretty;
}

p { max-width: 68ch; text-wrap: pretty; }

.entry p + p { margin-top: 1.125rem; }

/* ---------- Index row: label, rule, numeral on one baseline ---------- */

.index {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 1.125rem;
  max-width: none;
  /* At 200% text scale the label and numeral can exceed one line; let the row
     wrap rather than push the page sideways (WCAG 1.4.4). */
  flex-wrap: wrap;
}

.index-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  flex: 0 1 auto;
  min-width: 0;
}

.index-rule {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  height: 1px;
  background: var(--rule-firm);
}

.index-num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.6vw, 1.875rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold-ink);
  flex: none;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- Lists ---------- */

.findings {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  max-width: 62ch;
}

.findings li {
  border-top: 1px solid var(--rule);
  padding: 0.5625rem 0 0.5625rem 1.375rem;
  position: relative;
}
.findings li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.5625rem + 0.8em);
  width: 12px;
  height: 2px;
  background: var(--gold-ink);
}
.findings li:last-child { border-bottom: 1px solid var(--rule); }

.delivers {
  margin: 0 0 1.5rem;
  max-width: 62ch;
}

.delivers dt {
  border-top: 1px solid var(--rule);
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  font-weight: 700;
}
.delivers dt:first-of-type { margin-top: 0; }

.delivers dd {
  margin: 0.1875rem 0 0;
  color: var(--ink-soft);
}

.terms {
  margin: 0;
  padding-top: 0.9375rem;
  border-top: 2px solid var(--ink);
  font-weight: 700;
  max-width: 62ch;
}

/* ---------- Contact: the repeated call to action ---------- */

.contact {
  margin-top: clamp(1.5rem, 5vw, 2.25rem);
}

.contact-email {
  position: relative;
  display: inline-block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.6vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 0.1875rem;
  border-bottom: 1px solid var(--rule-firm);
  transition: color 220ms ease-out;
  /* An email address is one unbreakable token; at 200% text scale it must be
     allowed to break rather than force a horizontal scrollbar. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Grows the hit area to 44px without moving the underline or the layout.
   The text box itself is ~32px at mobile sizes. */
.contact-email::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: max(44px, 100%);
}

/* Rest: the hairline above. Hover/focus: gold wipes across it, left to right.
   Drawn as a scaled pseudo-element rather than a background-size animation so
   the move stays on the compositor and the text never sits on a gold fill. */
.contact-email::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--gold-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease);
}

.contact-email:hover,
.contact-email:focus-visible { color: var(--gold-ink); }

.contact-email:hover::after,
.contact-email:focus-visible::after { transform: scaleX(1); }

/* A tap should not leave the wipe stuck on. */
@media not all and (hover: hover) and (pointer: fine) {
  .contact-email:hover { color: var(--ink); }
  .contact-email:hover::after { transform: scaleX(0); }
}

.contact-phone {
  margin: 1.125rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-right: 0.5rem;
}

/* The dashed placeholder slot is retired: the number now exists, so it ships
   as a real dialling link rather than a marked gap. */
.contact-tel {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--gold-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  /* 44px hit area without moving the line, so it is tappable mid-job. */
  display: inline-block;
  padding-block: 0.6875rem;
  margin-block: -0.6875rem;
}
.contact-tel:hover,
.contact-tel:focus-visible { color: var(--gold-ink); }

/* The circular mark, sitting above the "Get in touch" heading. The asset is
   cropped to its gold ring, so border-radius lands on the ring itself and no
   square corner of the baked-in dark ground ever shows. */
.mark {
  display: block;
  width: clamp(52px, 12vw, 64px);
  height: auto;
  border-radius: 50%;
  margin: 0 0 1.125rem;
}

.foot-cta {
  margin: 2.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

/* ---------- Body links ---------- */

main a:not(.contact-email) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
main a:not(.contact-email):hover { color: var(--gold-ink); }

/* ---------- Motion: one move, on section entry ---------- */

.reveal { opacity: 1; transform: none; }

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(20px);
}
.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Wider viewports ---------- */

@media (min-width: 40rem) {
  :root { --gutter: 2rem; }
  body { font-size: 1.125rem; }
  .say { font-size: 1.1875rem; }
  .contact-phone { font-size: 1rem; }
}

/* Two ranks instead of one wall: the heading holds its own column and the
   prose runs beside it. This is where the page gets its length back. */
@media (min-width: 62rem) {
  :root { --shell: 70rem; }

  .split {
    display: grid;
    grid-template-columns: minmax(13rem, 19rem) minmax(0, 1fr);
    gap: 0 clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }

  .col-head { position: sticky; top: 2.5rem; }
  .col-head .head { margin-bottom: 0; }
  .col-body > :first-child { margin-top: 0; }

  .index { margin-bottom: 1.125rem; }

  /* The heading column is narrow, so the display size steps down to fit it
     without hyphenating. */
  .split .head { font-size: clamp(1.95rem, 3vw, 2.625rem); }

  /* Two halves meeting at the viewport centre. Each half's text block is
     capped at half the shell minus the page gutter and the seam gap, and is
     pushed against the seam — so the dark block's left edge and the light
     block's right edge land exactly on the shell that every section below
     uses, while the black itself still bleeds to the viewport edge. */
  /* The heading takes the larger share so it can run big without breaking
     words; the aside stays narrow, which is what makes it read as quiet. */
  .hero-grid {
    grid-template-columns: 1.55fr 1fr;
    gap: 0 clamp(3rem, 6vw, 5.5rem);
    align-items: start;
  }

  /* The aside sits on the heading's first baseline rather than its box top,
     so the two columns start together optically. */
  .hero-aside { padding-top: 0.6em; }

  /* Ruled lists read fine in two columns at this width and save the scroll.
     Multi-column keeps each term welded to its description; a two-track grid
     would interleave them. */
  .findings, .delivers {
    columns: 2;
    column-gap: 2.5rem;
    max-width: none;
  }
  .findings li, .delivers dt, .delivers dd { break-inside: avoid; }
  .findings li:last-child { border-bottom: 0; }
  .delivers dt { break-after: avoid; }
}

@media (min-width: 62rem) and (prefers-reduced-motion: reduce) {
  .col-head { position: static; }
}

@media print {
  .band { background: #fff; }
  .foot-id { color: #000; }
  .js-reveal .reveal { opacity: 1; transform: none; }
}