/* ==========================================================================
   AccessPoint AI — site styles
   Self-hosted type, no third-party CDN, no cookies, no tracking, no JS.
   Palette derived from the existing AccessPoint AI brand: petrol + teal.
   ========================================================================== */

/* --- 1. Type ------------------------------------------------------------ */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Tokens ---------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand-derived palette */
  --paper:     #F7F8F8;
  --ink:       #0A1214;
  --petrol:    #003748;
  --teal:      #0B7D7A;
  --teal-ink:  #08615F;
  --rule:      rgba(0, 55, 72, .14);
  --rule-firm: rgba(0, 55, 72, .28);

  /* Type */
  --sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --claim: clamp(2.35rem, 9vw, 8.5rem);
  --mech:  clamp(1.1rem, 2.4vw, 2.05rem);
  --micro: clamp(.66rem, .78vw, .74rem);

  /* Layout */
  --pad:  clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 84rem;

  /* Route geometry: one tread of the staircase, and the gutter the
     hairline keeps from the type it is pointing at. */
  --step:     clamp(1.75rem, 9vw, 11rem);
  --rgut:     clamp(.45rem, 1.1vw, 1.05rem);
  --mech-gap: clamp(1.6rem, 4.4vh, 3.4rem);
}

/* --- 3. Base ------------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 100%;
  font-synthesis-weight: none;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::selection { background: var(--teal); color: #fff; }

:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
}

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.mono {
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: .75rem 1rem;
  background: var(--ink);
  color: var(--paper);
}
.skip:focus { left: 0; }

/* --- 4. Masthead -------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.1rem, 2.6vh, 1.9rem);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.wordmark__logo {
  display: block;
  width: clamp(9.5rem, 16vw, 15rem);
  height: auto;
}

.masthead__nav {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2.5vw, 2rem);
}

.masthead__nav a {
  color: var(--petrol);
  text-decoration: none;
  padding-bottom: .18em;
  border-bottom: 1px solid var(--rule-firm);
  transition: color .2s ease, border-color .2s ease;
}
.masthead__nav a:hover {
  color: var(--teal-ink);
  border-color: var(--teal);
}

/* --- 5. Hero ------------------------------------------------------------ */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 8rem);
  min-height: calc(100svh - 8rem);
  padding-block: clamp(2.5rem, 8vh, 5.5rem) clamp(2.5rem, 8vh, 5.5rem);
}

/* The staircase. Each line steps one tread further right than the last;
   the hairline route in the left gutter traces the steps. */
.claim {
  margin: 0;
  padding-left: var(--rgut);
  font-size: var(--claim);
  font-weight: 780;
  font-stretch: 112%;
  line-height: .9;
  letter-spacing: -.028em;
  color: var(--ink);
}

.claim__line {
  display: block;
  position: relative;
}
.claim__line:nth-child(2) { margin-left: var(--step); }
.claim__line:nth-child(3) { margin-left: calc(2 * var(--step)); }

.mechanism {
  position: relative;
  margin: var(--mech-gap) 0 0 calc(3 * var(--step) + var(--rgut));
  font-size: var(--mech);
  font-weight: 430;
  line-height: 1.32;
  letter-spacing: -.005em;
  color: var(--petrol);
}

/* -- 5a. The route ------------------------------------------------------- */
/* Every segment is a 1px border on a zero-width/height box, so it tracks the
   layout at any viewport and animates with a single transform. */

.claim__line::before,
.claim__line::after,
.mechanism::before,
.mechanism::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* vertical drops */
.claim__line::before,
.mechanism::before {
  width: 0;
  border-left: 1px solid var(--teal);
  transform-origin: top center;
}
/* horizontal runs */
.claim__line::after,
.mechanism::after {
  height: 0;
  border-bottom: 1px solid var(--teal);
  transform-origin: left center;
}

/* Entry: the line arrives from above and meets the first word. */
.claim__line:nth-child(1)::before {
  right: calc(100% + var(--rgut));
  bottom: calc(50% - .01em);
  height: clamp(2rem, 7vh, 4.5rem);
}
.claim__line:nth-child(1)::after { display: none; }

/* Treads two and three: drop from the previous line, run right into this one. */
.claim__line:nth-child(2)::before,
.claim__line:nth-child(3)::before {
  right: calc(100% + var(--step) + var(--rgut));
  bottom: calc(50% - .01em);
  height: 100%;
}
.claim__line:nth-child(2)::after,
.claim__line:nth-child(3)::after {
  right: calc(100% + var(--rgut));
  top: calc(50% + .01em - 1px);
  width: var(--step);
}

/* Terminus: out of the claim, down, and right into the payoff line. */
.mechanism::before {
  right: calc(100% + var(--step) + var(--rgut));
  bottom: calc(100% - .62em);
  height: calc(.46 * var(--claim) + var(--mech-gap) + .62em);
}
.mechanism::after {
  right: calc(100% + var(--rgut));
  top: calc(.62em - 1px);
  width: var(--step);
}

/* --- 7. Contact --------------------------------------------------------- */

.contact {
  border-top: 1px solid var(--rule-firm);
  padding-block: clamp(3rem, 9vh, 6rem) clamp(3.5rem, 12vh, 8rem);
}

.contact__lead {
  margin: 0 0 clamp(1.5rem, 4vh, 2.75rem);
  max-width: 30ch;
  font-size: clamp(1.1rem, 1.85vw, 1.55rem);
  font-weight: 430;
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--petrol);
  text-wrap: pretty;
}

.contact__invite {
  margin: 0 0 clamp(1rem, 2.4vh, 1.8rem);
  font-size: clamp(1.9rem, 5.2vw, 4.25rem);
  font-weight: 740;
  font-stretch: 110%;
  line-height: .96;
  letter-spacing: -.026em;
  color: var(--ink);
}

.contact__mail {
  display: inline-block;
  padding-bottom: .1em;
  font-size: clamp(1.05rem, 2.5vw, 1.9rem);
  font-weight: 480;
  letter-spacing: -.01em;
  color: var(--teal-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--teal), var(--teal));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size .3s cubic-bezier(.2, .7, .3, 1), color .2s ease;
}
.contact__mail:hover {
  color: var(--teal);
  background-size: 100% 2px;
}

/* --- 8. Colophon -------------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--rule-firm);
  padding-block: clamp(1.4rem, 3vh, 2rem) clamp(2rem, 4vh, 3rem);
}

.colophon__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.75rem;
  font-family: var(--mono);
  font-size: var(--micro);
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--petrol);
}

.colophon__links {
  display: flex;
  gap: 1.5rem;
}

.colophon a {
  color: var(--petrol);
  text-decoration: none;
  padding-bottom: .15em;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.colophon a:hover {
  color: var(--teal-ink);
  border-color: var(--teal);
}

/* --- 9. Legal pages ----------------------------------------------------- */

.doc {
  max-width: 46rem;
  padding-block: clamp(2.5rem, 8vh, 5rem) clamp(3.5rem, 11vh, 6rem);
}

.doc__back {
  display: inline-block;
  margin-bottom: clamp(2rem, 5vh, 3.25rem);
  padding-bottom: .18em;
  color: var(--petrol);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-firm);
}
.doc__back:hover {
  color: var(--teal-ink);
  border-color: var(--teal);
}

.doc h1 {
  margin: 0 0 clamp(1.75rem, 4vh, 2.75rem);
  font-size: clamp(1.9rem, 5vw, 3.25rem);
  font-weight: 740;
  font-stretch: 110%;
  line-height: 1;
  letter-spacing: -.026em;
}

.doc h2 {
  margin: clamp(2.25rem, 5vh, 3rem) 0 .85rem;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 640;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.doc h2:first-of-type { margin-top: 0; }

.doc h3 {
  margin: clamp(1.75rem, 4vh, 2.25rem) 0 .6rem;
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--ink);
}

.doc p,
.doc li {
  margin: 0 0 1rem;
  font-size: clamp(.95rem, 1.15vw, 1.02rem);
  line-height: 1.65;
  color: var(--petrol);
}

.doc ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}
.doc li { margin-bottom: .4rem; }

.doc a {
  color: var(--teal-ink);
  text-underline-offset: .18em;
}

.doc address {
  font-style: normal;
  margin-bottom: 1rem;
  color: var(--petrol);
  line-height: 1.65;
}

.doc__note {
  margin-bottom: clamp(2rem, 5vh, 2.75rem);
  padding: 1rem 1.15rem;
  border-left: 2px solid var(--teal);
  background: rgba(11, 125, 122, .05);
}
.doc__note p {
  margin: 0;
  font-size: .95rem;
}

.doc__meta {
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--petrol);
}

/* --- 10. Narrow viewports ----------------------------------------------- */

@media (max-width: 46rem) {
  :root {
    --step: clamp(1rem, 5.5vw, 2.25rem);
  }

  .hero {
    min-height: calc(100vh - 12rem);
    min-height: calc(100svh - 12rem);
  }

  .contact__lead { max-width: none; }

}

/* --- 11. Load sequence -------------------------------------------------- */

@keyframes ap-rise {
  from { opacity: 0; transform: translateY(.28em); }
  to   { opacity: 1; transform: none; }
}
@keyframes ap-draw-y {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes ap-draw-x {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes ap-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.claim__line > span,
.mechanism > span {
  display: block;
  opacity: 0;
  animation: ap-rise .8s cubic-bezier(.16, .84, .3, 1) forwards;
  animation-delay: var(--d, 0s);
}

.claim__line::before,
.claim__line::after,
.mechanism::before,
.mechanism::after {
  transform: scale(0);
  animation-duration: .42s;
  animation-timing-function: cubic-bezier(.5, 0, .2, 1);
  animation-fill-mode: forwards;
  animation-delay: var(--dv, 0s);
}
.claim__line::before,
.mechanism::before { animation-name: ap-draw-y; }
.claim__line::after,
.mechanism::after {
  animation-name: ap-draw-x;
  animation-delay: var(--dh, 0s);
}

.claim__line:nth-child(1) { --dv: .05s; --d: .18s; }
.claim__line:nth-child(2) { --dv: .40s; --dh: .74s; --d: .82s; }
.claim__line:nth-child(3) { --dv: 1.00s; --dh: 1.34s; --d: 1.42s; }
.mechanism                { --dv: 1.60s; --dh: 1.94s; --d: 2.02s; }

.masthead,
.contact,
.colophon {
  opacity: 0;
  animation: ap-fade .7s ease forwards;
}
.masthead { animation-delay: .05s; }
.contact  { animation-delay: .30s; }
.colophon { animation-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .claim__line > span,
  .mechanism > span,
  .masthead, .contact, .colophon { opacity: 1; animation: none; }
  .claim__line::before,
  .claim__line::after,
  .mechanism::before,
  .mechanism::after { display: none; }
  body { background: #fff; }
}