/* ==========================================================================
   ELSE AI
   White, black, yellow. Softened: no outlines, no hard shadows, no black
   rules. Separation comes from warm tint and space, the way the Instagram
   slides do it. Black is for type and the mark, not for boxes.
   Single theme on purpose: this is a light brand.
   ========================================================================== */

:root {
  --paper:   #FFFFFF;
  --soft:    #F7F6F2;   /* warm card and section fill */
  --soft-2:  #FBFAF7;
  --ink:     #0A0A0A;
  --grey-d:  #3C3C39;
  --grey:    #6E6E6A;
  --line:    #ECEAE4;   /* hairline, used sparingly */
  --yellow:  #FFE500;

  --r:    1.25rem;
  --r-sm: .75rem;
  --r-pill: 999px;

  --f-d: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-b: "Newsreader", Georgia, "Times New Roman", serif;
  --f-m: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --maxw:   78rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-b); font-size: 1.0625rem; line-height: 1.65;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-family: var(--f-d); line-height: 1.04;
  letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; background: var(--yellow); color: var(--ink);
  padding: .7rem 1.1rem; border-radius: var(--r-pill); font-family: var(--f-m);
  font-size: .8125rem; z-index: 300; }
.skip:focus { left: 1rem; top: 1rem; }


/* --- Logo (stays heavy and expanded: it is the brand) --------------------- */

.logo { display: inline-flex; align-items: center; gap: .6em; text-decoration: none;
  font-family: var(--f-d); font-weight: 800; font-stretch: 118%; letter-spacing: -.045em;
  line-height: 1; font-size: 1.25rem; }
.logo svg { display: block; height: 1.02em; width: auto; flex: none; }
.logo .ai { font-weight: 500; color: var(--grey); }

/* --- Nav ------------------------------------------------------------------ */

.nav { position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px); }
.nav__in { display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 4.75rem; }
.nav__links { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav__links a { font-family: var(--f-m); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--grey);
  padding: .35rem 0; transition: color .18s ease; }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 700px) { .nav__links { display: none; } }

/* --- Hero ----------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; }
.hero__caret { position: absolute; right: clamp(.5rem, 2vw, 3rem); top: 8%;
  width: clamp(10rem, 24vw, 23rem); color: var(--yellow); z-index: 0; pointer-events: none; }
.hero__caret svg { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .hero__caret { display: none; } }
.hero__in { position: relative; z-index: 1;
  padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3.5rem, 7vw, 6.5rem); }

.hero h1 { font-size: clamp(3rem, 1.6rem + 7.4vw, 8rem); font-weight: 800;
  font-stretch: 108%; letter-spacing: -.048em; max-width: 11ch; }

/* A swipe across the lower half of the letters, never a filled box. */
.mark { background-image: linear-gradient(to top,
    transparent 0 .05em, var(--yellow) .05em .5em, transparent .5em);
  padding-inline: .05em; }

.hero__lede { margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.0625rem, .95rem + .55vw, 1.4rem); line-height: 1.55;
  max-width: 46ch; color: var(--grey-d); }

/* --- Sections ------------------------------------------------------------- */

.section { padding-block: clamp(3.5rem, 7.5vw, 6.5rem); }
.section--soft { background: var(--soft); }

.big { font-size: clamp(2.4rem, 1.5rem + 4vw, 5.25rem); font-weight: 700;
  font-stretch: 104%; letter-spacing: -.04em; }
/* A section title that is a sentence rather than a label: a touch smaller, so it
   holds to two lines. */
.big--long { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.5rem); max-width: 16ch; }
/* Small label above a section title. */
.kicker { margin-bottom: .9rem; font-family: var(--f-m); font-size: .75rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }

/* --- What we do: three items, one format -------------------------------- */

/* ---------- what we do: the ladder --------------------------------------- */
/* One box holding three tiers of equal width, climbed from the bottom: league
   one is the base, league three the peak. Step numbers descend as you read down,
   so they ascend as you climb, and every number carries the same yellow so the
   1 to 6 run reads as one sequence across all three leagues. */
.what__lede { margin-top: clamp(1rem, 1.8vw, 1.4rem); max-width: 46rem;
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); line-height: 1.58;
  color: var(--grey-d); }

.ladder { margin-top: clamp(1.75rem, 3.2vw, 2.5rem); max-width: 60rem; }

/* Each league is a group of rows under a small label. */
.league__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
  margin: 0 0 .5rem .2rem; font-family: var(--f-m); font-weight: 500;
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.4; color: var(--grey); }
.league__name span { font-family: var(--f-d); font-weight: 700; font-size: .9375rem;
  letter-spacing: -.01em; text-transform: none; color: var(--ink); }

/* What a league asks of you. Pushed to the right of the label. */
.league__req { margin-left: auto; padding: .4rem .7rem; border-radius: var(--r-pill);
  font-style: normal; font-family: var(--f-m); font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; line-height: 1; background: #FFF4A8; color: var(--ink); }
.league__req--eng { background: var(--ink); color: var(--paper); }
@media (max-width: 559px) { .league__req { margin-left: 0; } }

/* The training promise under league two, marked with the caret. */
.league__train { display: flex; align-items: flex-start; gap: .55rem;
  margin: .65rem 0 0 .2rem; font-size: clamp(.9375rem, .92rem + .12vw, 1rem);
  line-height: 1.45; color: var(--grey-d); }
.league__train::before { content: ""; flex: none; width: .8rem;
  height: .8rem; margin-top: .3em; background: var(--ink);
  clip-path: polygon(50% 16%, 96% 82%, 72% 82%, 50% 50%, 28% 82%, 4% 82%); }
.league__train b { font-family: var(--f-d); font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); }

/* Rows: soft cards, number, title, one line of description, tag on the right. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.step { position: relative; display: grid; grid-template-columns: 2.6rem 1fr;
  align-items: center; gap: .25rem .9rem; padding: .7rem 1.1rem .7rem .9rem;
  background: var(--soft); border: 1px solid var(--line); border-radius: .75rem; }
@media (min-width: 640px) { .step { grid-template-columns: 2.6rem 1fr auto; } }
.step__n { grid-row: 1 / span 2; align-self: center; text-align: center;
  font-family: var(--f-d); font-weight: 800; font-stretch: 108%;
  font-size: clamp(1.35rem, 1.2rem + .5vw, 1.65rem); letter-spacing: -.03em;
  line-height: 1; color: var(--ink); }
@media (min-width: 640px) { .step__n { grid-row: 1; } }
.step__body { display: grid; gap: .1rem; min-width: 0; }
.step__label { font-family: var(--f-d); font-weight: 700; letter-spacing: -.015em;
  font-size: clamp(1rem, .96rem + .25vw, 1.125rem); line-height: 1.25; color: var(--ink); }
.step__desc { font-size: clamp(.9375rem, .92rem + .12vw, 1rem); line-height: 1.45;
  color: var(--grey-d); }

/* The agent loop, spelled out under step four. */
.step__loop { margin-top: .3rem; display: flex; flex-wrap: wrap; align-items: center;
  gap: .3rem .45rem; font-family: var(--f-m); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; color: var(--ink); }
.step__loop span { font-weight: 500; color: var(--grey); margin-right: .2rem; }
.step__loop i { font-style: normal; font-weight: 400; color: var(--grey); letter-spacing: 0; }

/* The tag on the right: our offer, or where everyone starts. */
.step__tag, .step__note { grid-column: 2; justify-self: start; white-space: nowrap;
  font-family: var(--f-m); font-size: .625rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; line-height: 1; }
@media (min-width: 640px) { .step__tag, .step__note { grid-column: 3; justify-self: end; } }
.step__note { color: var(--grey); }
.step__tag { padding: .45rem .7rem; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--ink); }

/* Every row carries the same yellow edge, so no step reads as the only one we
   offer. The offers are named by their tags, not by a different fill. */
.step { box-shadow: inset 4px 0 0 var(--yellow); }

/* The league change: a dashed rule with the reason in the middle. */
.brk { display: flex; align-items: center; gap: .9rem; margin: 1.1rem 0 1rem;
  text-align: center; font-size: clamp(.875rem, .86rem + .15vw, .9688rem);
  line-height: 1.4; color: var(--grey-d); }
.brk::before, .brk::after { content: ""; flex: 1 1 2rem; border-top: 1.5px dashed #C9C5BA; }
.brk__t { flex: 0 1 auto; max-width: 32rem; }
.brk b { font-family: var(--f-d); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.brk--big::before, .brk--big::after { border-top-color: var(--ink); }
@media (max-width: 559px) {
  .brk { flex-direction: column; gap: .55rem; }
  .brk::before, .brk::after { flex: none; width: 100%; }
}

/* --- Contact: a soft card, like the post cards. The address is shown as text
   and can be copied, because email links do not open inside some previews. */
/* Sits right under the team, so it does not need a full section gap above. */
.section--contact { padding-top: 0; }
.contact { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center;
  background: var(--soft); border-radius: var(--r);
  padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.5rem); }
@media (min-width: 860px) { .contact { grid-template-columns: 1.15fr 1fr; } }
.contact__title { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.5rem); font-weight: 700;
  font-stretch: 104%; letter-spacing: -.04em; }
.contact__lede { margin-top: .9rem; max-width: 30rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.55; color: var(--grey-d); }
.contact__reach { display: grid; gap: 1rem; justify-items: start; }
.contact__addr { font-family: var(--f-d); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem); line-height: 1.2; color: var(--ink);
  overflow-wrap: anywhere; user-select: all; }
.contact__btns { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn { display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.3rem; border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--paper); color: var(--ink); text-decoration: none;
  font-family: var(--f-m); font-size: .75rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; line-height: 1;
  box-shadow: 0 1px 2px rgba(10, 10, 10, .06); transition: transform .18s ease, box-shadow .18s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -8px rgba(10, 10, 10, .25); }
.btn--yellow { background: var(--yellow); }

/* --- Posts ---------------------------------------------------------------- */

.posts { margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 760px) { .posts { grid-template-columns: 1fr; } }

.post {
  display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.6rem);
  align-items: center; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--paper); border: 0; border-radius: var(--r);
  padding: clamp(1rem, 2vw, 1.4rem);
  box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.05);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
.section--soft .post { background: var(--paper); }
.post:hover { transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(10,10,10,.05), 0 16px 40px rgba(10,10,10,.09); }
.post__shot { display: block; border-radius: var(--r-sm); overflow: hidden; background: var(--soft); }
.post__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.post__meta { display: block; }
.post__n { display: block; font-family: var(--f-m); font-size: .6875rem;
  letter-spacing: .16em; color: var(--grey); }
.post__title { display: block; margin-top: .5rem; font-family: var(--f-d); font-weight: 700;
  font-stretch: 102%; letter-spacing: -.028em; line-height: 1.12;
  font-size: clamp(1.1rem, .98rem + .65vw, 1.5rem); }
.post__count { display: block; margin-top: .75rem; font-family: var(--f-m); font-size: .6875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.post__count::after { content: "  \2192"; }
@media (max-width: 520px) { .post { grid-template-columns: 6.5rem minmax(0, 1fr); } }

/* --- Post viewer ---------------------------------------------------------- */

.viewer[hidden] { display: none; }
.viewer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(20, 19, 16, .72); backdrop-filter: blur(6px);
  padding: clamp(.75rem, 3vw, 2.5rem); }
.viewer__stage { display: grid; gap: 1rem; justify-items: center; max-height: 100%; }
.viewer__img { max-height: min(76vh, 54rem); max-width: 100%; width: auto; display: block;
  border-radius: var(--r-sm); background: var(--paper);
  box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.viewer__bar { display: flex; align-items: center; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.viewer__btn { font-family: var(--f-m); font-size: .8125rem; padding: .62rem 1.15rem;
  cursor: pointer; background: var(--paper); color: var(--ink); border: 0;
  border-radius: var(--r-pill); transition: background .18s ease, opacity .18s ease; }
.viewer__btn:hover:not([disabled]) { background: var(--yellow); }
.viewer__btn[disabled] { opacity: .3; cursor: default; }
.viewer__count { font-family: var(--f-m); font-size: .75rem; letter-spacing: .12em;
  color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums; }
.viewer__title { font-family: var(--f-d); font-weight: 700; font-stretch: 104%;
  color: #fff; font-size: 1.05rem; letter-spacing: -.02em; }
.viewer__close { position: absolute; top: clamp(.75rem, 2vw, 1.75rem);
  right: clamp(.75rem, 2vw, 1.75rem); width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center; cursor: pointer; background: var(--paper);
  color: var(--ink); border: 0; border-radius: var(--r-pill);
  font-family: var(--f-m); font-size: .95rem; line-height: 1; }
.viewer__close:hover { background: var(--yellow); }

/* --- Team ----------------------------------------------------------------- */

.members { margin-top: clamp(2rem, 4vw, 3rem); display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.member { background: var(--paper); border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center;
  box-shadow: 0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.04); }

.member__plate { position: relative; }
.member__plate img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 18%; border-radius: var(--r-sm);
  filter: grayscale(1) contrast(1.03); transition: filter .45s ease; }
/* Color only when the photo itself is hovered, not the whole card. */
.member__plate:hover img { filter: grayscale(0) contrast(1); }

/* The founder's marker: a soft yellow plate offset behind the photo. */
.member--lead .member__plate::after { content: ""; position: absolute; z-index: 0;
  inset: -.7rem .7rem .7rem -.7rem; background: var(--yellow); border-radius: var(--r-sm); }

.member__role { font-family: var(--f-m); font-size: .6875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grey); }
.member h3 { margin-top: .6rem; font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.2rem); font-stretch: 102%; }
.member__bio { margin-top: .85rem; font-size: 1.0625rem; line-height: 1.6;
  color: var(--grey-d); max-width: 50ch; }

@media (max-width: 760px) {
  .member { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
  .member__plate { max-width: 12rem; }
  .member--lead .member__plate::after { inset: -.5rem .5rem .5rem -.5rem; }
}

/* --- Footer --------------------------------------------------------------- */

.foot { padding-block: 2.5rem 3.25rem; background: var(--soft); }
.foot__in { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
  align-items: center; justify-content: space-between; }
.foot__meta { font-family: var(--f-m); font-size: .6875rem; letter-spacing: .08em; color: var(--grey); }

/* --- Load sequence -------------------------------------------------------- */

@keyframes rise { from { opacity: 0; transform: translate3d(0, 1rem, 0); } to { opacity: 1; transform: none; } }
@keyframes drop { 0% { opacity: 0; transform: translate3d(0, -.45em, 0); }
                  55% { opacity: 1; transform: translate3d(0, .06em, 0); }
                  78% { transform: translate3d(0, -.025em, 0); }
                  100% { opacity: 1; transform: none; } }
.hero h1    { animation: drop 820ms cubic-bezier(.33,.9,.3,1) 60ms backwards; }
/* Alena's signature line: bold ink. No yellow here, the headline already has it. */
.sig { font-weight: 600; color: var(--ink); }
.hero__lede { animation: rise 600ms cubic-bezier(.22,1,.36,1) 300ms backwards; }