/* Adapton - home.css
   Loads on the HOME PAGE ONLY, after core.css: the Tuesday-morning figure, the proof strip,
   the four kinds, the offer cards, case-study cards, tool stack, team, contact form.

   No tokens and no font-face here - every colour is a var() from core.css.
   Two rules from the brand that this file must never break:
     ORANGE is only ever what Adapton catches or does. GREY is everything lost or manual.
     Red is not in the palette - agency-site made it load-bearing, this site refuses it. */

/* ── Hero variant ───────────────────────────────────────────── */

.hero--home { align-items: center; }

/* The home h1 is the WORDMARK -- "Adapton — AI automation agency" -- so it is the one headline
   on the site set entirely in the accent. core.css sets steel as the base for every other
   page's h1; the exception lives here, with the page that earns it. */
.hero--home .hero__h1 { color: var(--accent); }

/* ── Proof strip. This is where a normal agency puts testimonials. ──
   Ours carries measured facts about the systems we run on our own operation instead. The
   figures are tabular-nums so they read as counted rather than claimed, and so the digits do
   not jitter while home.js counts them up. */

.proof { padding: clamp(2.2rem, 4vw, 3.2rem) 0; border-block: 1px solid var(--line); }

/* THREE items, so the column count is stated rather than left to auto-fit — auto-fit would pack
   them into the left half of a wide strip and leave a third of it empty. Three does not divide,
   so the only orphan-free choices are 3 across or 1 down; there is no 2-column step. Re-check
   this whenever the item count changes. */
.proof__in {
  display: grid; gap: 1.4rem 1.8rem;
  grid-template-columns: repeat(3, 1fr);
}
/* Centred inside its own third, so the row reads as one balanced band rather than three
   left-aligned blocks with the last one stranded against empty space on the right. */
.proof__item {
  display: flex; flex-direction: column; gap: .3rem;
  align-items: center; text-align: center;
}
.proof__item b {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 640; letter-spacing: -.02em;
  color: var(--text-head); font-variant-numeric: tabular-nums;
}
.proof__item span {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); line-height: 1.5;
}

/* The counted figures are re-rendered by home.js as they climb; inline-block keeps the box from
   resizing the line as digits are added. No entrance animation on the strip — the count IS the
   entrance, and a fade would flash on any screen where the strip is already in view at load. */
.proof__item b[data-count] { display: inline-block; }

.proof__note { margin: 1.6rem auto 0; font-size: .82rem; color: var(--text-faint); }

/* ── Four kinds of system ───────────────────────────────────── */

.kinds {
  display: grid; gap: 1.1rem; margin-top: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
/* Tried as solid logo-orange panels on 2026-08-19 and reverted the same day: filled, they
   stopped matching every other card on the site and the ink thumbnails read as holes punched
   through them. Orange stays an accent here — it is what the artwork uses to mark the caught
   moment, and it cannot do that job from underneath. */
.kind {
  padding: 1.5rem 1.4rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.kind__h { font-size: 1.14rem; font-weight: 600; color: var(--text-head); margin-bottom: .55rem; }
.kind p { color: var(--text-dim); font-size: .93rem; }
.kind__tech {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint) !important;
}

/* ── Offer cards. Price is the loudest thing in the card, deliberately. ── */

.offers {
  display: grid; gap: 1.1rem; margin-top: 1.8rem;
  /* Fixed 2-up rather than auto-fit: four cards in an auto-fit grid land 3+1 at this
     container width and the fourth reads as an afterthought. */
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) { .offers { grid-template-columns: 1fr; } }
.offer {
  display: flex; flex-direction: column;
  padding: 1.6rem 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.offer__tag {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .7rem;
}
/* An unbuilt offer is grey, never orange. Orange is only what already runs. */
.offer__tag--build { color: var(--text-faint); }
.offer--build { border-style: dashed; }
.offer__h { font-size: 1.2rem; font-weight: 620; color: var(--text-head); margin-bottom: .5rem; }
.offer__price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
  margin-bottom: .85rem; padding-bottom: .85rem; border-bottom: 1px solid var(--line);
}
.offer__price b {
  font-size: 1.6rem; font-weight: 640; letter-spacing: -.02em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.offer__price span { font-size: .85rem; color: var(--text-dim); }
.offer p { color: var(--text-dim); font-size: .93rem; }
.offer__not {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--line);
  font-size: .85rem; color: var(--text-faint) !important;
}
.offer__not b {
  display: block; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: .25rem;
}
.offer__link {
  margin-top: auto; padding-top: 1.1rem;
  font-weight: 600; font-size: .92rem; color: var(--accent); text-decoration: none;
}
.offer__link::after { content: " →"; }
.offer__link:hover { text-decoration: underline; }

/* ── Tool stack ─────────────────────────────────────────────── */

.stack { list-style: none; margin: 1.8rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.stack li {
  display: grid; gap: .2rem 1.2rem; padding: 1.1rem 0;
  grid-template-columns: 8.5rem 1fr auto;
  border-bottom: 1px solid var(--line);
}
.stack__k {
  grid-row: span 2;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-faint); padding-top: .2rem;
}
.stack li b { font-weight: 600; color: var(--text-head); }
.stack__d { grid-column: 2; color: var(--text-dim); font-size: .89rem; }
.stack__own {
  grid-row: span 2; align-self: start;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 999px; padding: .18rem .55rem;
}
.stack__own--ours { color: var(--text-faint); border-color: var(--line-strong); }

/* ── Team ───────────────────────────────────────────────────── */

.team {
  list-style: none; margin: 1.8rem 0 0; padding: 0;
  display: grid; gap: 1rem;
  /* Six people. 3-up divides evenly; auto-fit gives 4+2 and orphans two names. */
  grid-template-columns: repeat(3, 1fr);
}
/* The raise only reads as a raise when there is a row to rise above it. Below three columns
   it becomes a card hanging off the top of the grid, so it is cancelled. */
@media (max-width: 780px) {
  .team { grid-template-columns: repeat(2, 1fr); }
  .member--lead { margin-top: 0; }
}
@media (max-width: 440px) { .team { grid-template-columns: 1fr; } }
.member {
  padding: 1.35rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Mahd sits centre and raised. The lift is a NEGATIVE MARGIN, not a transform: .has-depth
   already owns `transform` for the pointer tilt, and a transform here would be overwritten
   the first time a cursor crossed the card. */
/* The raised card in the middle of the top row. It is the only card that carries the accent as
   a solid edge and a wash, because it is the only one a visitor is being pointed at. */
.member--lead {
  margin-top: -1.75rem;
  padding: 1.8rem 1.5rem;
  border: 1.5px solid var(--orange);
  background:
    linear-gradient(180deg, var(--accent-soft), transparent 62%),
    var(--bg-card);
  box-shadow: 0 18px 44px -22px rgba(248, 152, 64, .55), var(--shadow);
}
.member--lead b { font-size: 1.14rem; }
/* Navy on ink is unreadable, so the badge lifts to the steel-blue end of the same hue. */
.member--lead b { color: var(--text-head); }
.member--lead em { font-size: .88rem; }
.member b {
  display: block; font-size: 1.1rem; font-weight: 640;
  color: var(--text-head); letter-spacing: -.01em; margin-bottom: .5rem;
}
/* The role is a badge, not a caption, and it is NAVY rather than orange. Orange is reserved on
   this site for what the automation catches; using it for a job title spends the accent on
   something that is not the product, and puts six orange lines on one screen. */
.member span {
  display: inline-block;
  font-family: var(--mono); font-size: .76rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  background: color-mix(in srgb, var(--navy) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--navy) 24%, transparent);
  border-radius: 999px; padding: .3rem .65rem;
  margin-bottom: .8rem;
}
.member em {
  display: block; font-style: normal;
  font-size: .92rem; color: var(--text-dim); line-height: 1.6;
}

/* ── Contact form ───────────────────────────────────────────── */

.contact { margin: 1.8rem auto 1.6rem; max-width: 480px; text-align: left; }
.contact__row { display: block; margin-bottom: 1rem; }
.contact__row > span {
  display: block; margin-bottom: .35rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
}
.contact input, .contact textarea, .contact select {
  width: 100%; padding: .7rem .85rem;
  font: inherit; font-size: .95rem; color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.contact textarea { resize: vertical; min-height: 5.5rem; }
.contact input:focus-visible, .contact textarea:focus-visible, .contact select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}
.contact .btn { width: 100%; justify-content: center; margin-top: .4rem; }
.contact .note { margin-top: .8rem; text-align: center; }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .hero--home { grid-template-columns: 1fr; }
  .stack li { grid-template-columns: 1fr auto; }
  .stack__k { grid-row: auto; grid-column: 1 / -1; }
  .stack__d { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .morning__list li { grid-template-columns: 3.4rem 1fr; }
  .morning__by { grid-column: 2; justify-self: start; margin-top: .3rem; }
  .proof__in { grid-template-columns: 1fr; gap: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .case { transition: none; }
  .case:hover { transform: none; }
}

/* ── The living guide ─────────────────────────────────────────
   The insignia already has an eye. The animation is that the eye tracks the pointer and blinks,
   so the mark reads as WATCHING the run below it rather than decorating the corner. That is the
   pitch in one object: the system is looking at the thing, you are not.

   The eye is a separate element positioned over the artwork rather than an SVG rebuild of the
   logo — the mark must stay the approved artwork, pixel for pixel. */

.hero__right {
  display: flex; align-items: center; justify-content: center;
  margin-left: clamp(-5rem, -3.5vw, -1.5rem);
}

.guide {
  position: relative; width: min(340px, 82%); align-self: center; margin-block: 1rem;
  perspective: 900px;
  cursor: grab;
  /* Vertical scroll still belongs to the page; a sideways drag belongs to the mark. */
  touch-action: pan-y;
  /* Without these the browser treats a drag on the mark as selecting an image, and paints its
     blue selection box over the artwork. */
  user-select: none; -webkit-user-select: none;
}
.guide img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.guide:active { cursor: grabbing; }

/* The mark revolves in space -- a full turn about its vertical axis every 24 seconds, with the
   axis itself drifting on X and Z so it reads as an object tumbling slowly rather than a plate
   on a turntable. Slow on purpose: fast enough to notice on the second look, never fast enough
   to compete with the headline beside it.
   
   Y ROTATION, NOT Z. An in-plane spin would swing the arrow through pointing downward, which is
   the one thing the mark is not allowed to say. On Y it stays upright the whole way round.
   
   TWO FACES. A single flat image turned past 90 degrees shows its own mirror image, and a
   mirrored logo is a wrong logo. The back face carries a second copy pre-rotated 180 degrees,
   and both faces hide their own backs, so whichever side is toward the viewer is drawn the
   right way round. The EYE lives on the front face and is hidden with it. */
.guide__orbit {
  position: relative; display: block;
  transform-style: preserve-3d;
  /* js/home.js takes the transform over on load and adds .is-live. The keyframes stay as the
     no-JS fallback, so the mark still turns if the script never arrives. */
  animation: guide-revolve 24s linear infinite;
}
.guide.is-live .guide__orbit { animation: none; }
/* FLAT, not preserve-3d. backface-visibility hides an element's own back, not its children's:
   with preserve-3d the pupil kept its own 3D plane and went on painting after the head it sits
   in had turned away, so the far half of the revolution showed a second eye floating on the
   back of the mark. Flat renders the face and everything in it as one surface, which is what
   an opaque object is. */
.guide__face { backface-visibility: hidden; transform-style: flat; }
.guide__face--back {
  position: absolute; inset: 0;
  /* rotateY(180deg) ONLY. Adding a scaleX(-1) to "un-mirror" it is the obvious-looking fix and
     it is wrong twice over: at the half-turn the parent's 180deg already composes to identity,
     so the extra flip is what mirrors the mark, and a reflection reverses the winding so
     backface-visibility hides the wrong face. */
  transform: rotateY(180deg);
}
.guide__mark { display: block; width: 100%; height: auto; }
@keyframes guide-revolve {
  0%   { transform: rotateX(0deg)  rotateY(0deg)   rotateZ(0deg); }
  25%  { transform: rotateX(9deg)  rotateY(90deg)  rotateZ(-2.5deg); }
  50%  { transform: rotateX(0deg)  rotateY(180deg) rotateZ(0deg); }
  75%  { transform: rotateX(-9deg) rotateY(270deg) rotateZ(2.5deg); }
  100% { transform: rotateX(0deg)  rotateY(360deg) rotateZ(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .guide__orbit { animation: none; }
  .guide { cursor: default; }
}
@media (max-width: 900px) {
  .hero__right { margin-left: 0; }
  .guide { align-self: center; width: 128px; }
}

/* ── Capability cards: equal height, tech as chips ────────── */

.kinds { align-items: stretch; }
.kind { display: flex; flex-direction: column; }

/* The thumbnail is mounted by tools/inject-card-art.mjs and styled in core.css under .card-art.
   All that is needed here is the top padding: the art sits flush to the card's inner edge and
   the default 1.5rem leaves too much air above it. */
.kind:has(.card-art) { padding-top: 1.1rem; }
.kind__tech {
  margin-top: auto; padding-top: 1rem;
  display: flex; flex-wrap: wrap; gap: .35rem;
  border-top: 1px solid var(--line);
}
.kind__tech span {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-faint);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .5rem;
}

/* Team badge, dark theme: same hue, lifted so it clears contrast on the ink background. */
[data-theme="dark"] .member span {
  color: #9CC2EC;
  background: rgba(156, 194, 236, .10);
  border-color: rgba(156, 194, 236, .28);
}