/* =============================================================================
   Avielon Studio · home.css
   Homepage-only section styles. Loaded AFTER tokens.css + site.css via the
   view's `@section Styles { ... }` block.

   Rules honoured from the design system (theme-tokens.md §7):
   - Reference semantic tokens only; never a raw hex.
   - Teal is rare: at most the primary CTA + one small mark per section.
   - Elevation by surface (background → surface → surface-elevated), not shadow.
   - Borders are hairlines. Sentence case. Editorial whitespace.
   Sections are direct children of <main>; each carries `.sec` for vertical rhythm.
============================================================================= */

/* ---- Shared section scaffolding ------------------------------------------ */
.sec { padding-block: var(--section-y); }
.sec--band { background: var(--color-surface); }
.sec + .sec.sec--band,
.sec--band { border-top: 1px solid var(--color-border); }
.sec--band + .sec:not(.sec--band) { border-top: 1px solid var(--color-border); }

.sec__head { max-width: 46ch; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.sec__head .eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.sec__head .t-h2 { margin-bottom: 1rem; }
.sec__head .lead { max-width: 52ch; }

/* Arrow link used on cards + section footers */
.arrow-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  color: var(--color-accent);
}
.arrow-link .arw { transition: transform .2s ease; }
.arrow-link:hover { color: var(--color-accent-hover); }
.arrow-link:hover .arw { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .arrow-link:hover .arw { transform: none; } }

/* Mono tag chips (case-study metadata / capability labels) */
.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.tag {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: .3rem .7rem; white-space: nowrap;
}

/* =============================================================================
   1 · HERO
============================================================================= */
.home-hero { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.home-hero__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }

.home-hero .eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.6rem; }

/* Bracketed H1 — thin corner ticks framing the headline (redline vocabulary) */
.home-hero__title { position: relative; display: block; padding: .35em .1em .35em .55em; margin: 0 0 1.5rem; max-width: 15ch; }
.home-hero__title::before,
.home-hero__title::after { content: ""; position: absolute; width: 16px; height: 16px; }
.home-hero__title::before { top: 0; left: 0; border-top: 1.5px solid var(--color-border); border-left: 1.5px solid var(--color-border); }
.home-hero__title::after  { bottom: 0; right: 0; border-bottom: 1.5px solid var(--color-border); border-right: 1.5px solid var(--color-border); }

.home-hero__lead { max-width: 54ch; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.9rem; }
.home-hero__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: 2.2rem;
  padding-top: 1.6rem; border-top: 1px solid var(--color-border);
  list-style: none; padding-left: 0;
}
.home-hero__meta li {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* Hero schematic — thin node/edge diagram, one teal node (design + code → one product) */
.home-hero__figure { display: none; }
.home-hero__schema { width: 100%; height: auto; max-width: 460px; margin-inline: auto; display: block; }
.home-hero__schema .edge { stroke: var(--color-border); stroke-width: 1.25; fill: none; }
.home-hero__schema .node { stroke: var(--color-text-secondary); stroke-width: 1.25; fill: var(--color-surface); }
.home-hero__schema .node--accent { stroke: none; fill: var(--color-accent); }
.home-hero__schema .tick { stroke: var(--color-border); stroke-width: 1.5; }
.home-hero__schema .glabel { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; fill: var(--color-text-secondary); }

@media (min-width: 940px) {
  .home-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .home-hero__figure { display: block; }
}

/* =============================================================================
   2 · TRUST STRIP
============================================================================= */
.home-trust__inner { display: grid; gap: 1.6rem; }
.home-trust__line { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); line-height: 1.35; letter-spacing: -0.01em; margin: 0; max-width: 40ch; color: var(--color-text-primary); }
.home-trust .tags { gap: .5rem .6rem; }
@media (min-width: 860px) {
  .home-trust__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; }
  .home-trust .tags { justify-content: flex-end; }
}

/* =============================================================================
   3 · SERVICES — two pillars (Design / Develop). 3rd slot intentionally empty.
============================================================================= */
.pillar-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 820px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }

.pillar {
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  transition: border-color .25s ease, transform .25s ease;
}
.sec--band .pillar { background: var(--color-surface-elevated); }
.pillar:hover { border-color: var(--color-text-secondary); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .pillar:hover { transform: none; } }

.pillar__mark { width: 40px; height: 40px; margin-bottom: 1.4rem; color: var(--color-accent); }
.pillar__mark svg { width: 100%; height: 100%; display: block; }
.pillar .t-h3 { margin-bottom: .9rem; }
.pillar__body { color: var(--color-text-secondary); margin: 0 0 1.5rem; max-width: 46ch; }
.pillar__subs { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .55rem; border-top: 1px solid var(--color-border); padding-top: 1.4rem; }
.pillar__subs li { font-size: .92rem; color: var(--color-text-secondary); display: flex; gap: .6rem; align-items: baseline; }
.pillar__subs li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .5em; border-radius: 1px; background: var(--color-accent); opacity: .55; }
.pillar__foot { margin-top: auto; }

/* =============================================================================
   4 · SELECTED WORK — featured full-width card + two standard cards
============================================================================= */
.work-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.work-card {
  display: flex; flex-direction: column;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: clamp(1.5rem, 3.2vw, 2.2rem);
  transition: border-color .25s ease, transform .25s ease;
}
.sec--band .work-card { background: var(--color-surface-elevated); }
.work-card:hover { border-color: var(--color-text-secondary); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .work-card:hover { transform: none; } }

.work-card__eyebrow { display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1rem; }
.work-card__eyebrow .mark { color: var(--color-accent); }
.work-card__title { margin-bottom: .8rem; }
.work-card__desc { color: var(--color-text-secondary); margin: 0 0 1.4rem; max-width: 60ch; }
.work-card .tags { margin-top: auto; }

/* Featured spans full width, becomes 2-column at desktop */
.work-card--featured { gap: 0; }
@media (min-width: 820px) {
  .work-card--featured { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
  .work-card--featured .work-card__foot { align-self: end; }
}
.work-sub { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 720px) { .work-sub { grid-template-columns: repeat(2, 1fr); } }

.home-work__foot { margin-top: clamp(1.75rem, 3vw, 2.5rem); }

/* =============================================================================
   5 · WHY — four differentiators (2×2). No sequence → no numbering here.
============================================================================= */
.why-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 760px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
.why-item { border-top: 1px solid var(--color-border); padding-top: 1.4rem; }
.why-item .t-h4 { margin-bottom: .7rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem); letter-spacing: -0.01em; }
.why-item p { color: var(--color-text-secondary); margin: 0; max-width: 48ch; }

/* =============================================================================
   6 · PROCESS — four-step snapshot (horizontal track on desktop). Real sequence.
============================================================================= */
.process-track { display: grid; gap: 1.75rem; }
.process-step { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.1rem; align-items: start; }
.process-step__num {
  flex: none; width: 42px; height: 42px; display: inline-grid; place-items: center;
  border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
  font-family: var(--font-mono); font-size: .8rem; color: var(--color-text-primary);
}
.sec--band .process-step__num { background: var(--color-surface-elevated); }
.process-step__title { font-family: var(--font-body); font-weight: 600; font-size: 1rem; margin: 0 0 .35rem; line-height: 1.35; }
.process-step__body { color: var(--color-text-secondary); margin: 0; font-size: .95rem; max-width: 40ch; }
.process-step__head { grid-column: 1 / -1; display: none; }

@media (min-width: 900px) {
  .process-track { grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); position: relative; }
  .process-track::before { content: ""; position: absolute; top: 21px; left: 0; right: 0; height: 1px; background: var(--color-border); }
  .process-step { display: block; position: relative; }
  .process-step__num { margin-bottom: 1.25rem; }
  .process-step__body { max-width: none; }
}

/* =============================================================================
   7 · PROOF — the site itself as craft evidence
============================================================================= */
.home-proof__panel {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); padding: clamp(2rem, 5vw, 3.5rem);
  display: grid; gap: 1.5rem; max-width: 760px;
}
.home-proof__panel .t-h2 { max-width: 22ch; }
.home-proof__panel p { color: var(--color-text-secondary); margin: 0; max-width: 62ch; }

/* =============================================================================
   8 · TECH — three capability blocks, copy only (no partner badges)
============================================================================= */
.tech-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 820px) { .tech-grid { grid-template-columns: repeat(3, 1fr); } }
.tech-item { border-top: 1px solid var(--color-border); padding-top: 1.4rem; }
.tech-item .t-h4 { margin-bottom: .7rem; }
.tech-item p { color: var(--color-text-secondary); margin: 0; max-width: 42ch; }

/* =============================================================================
   9 · CLOSING CTA BAND — strong via an elevated bordered panel + the single teal CTA
============================================================================= */
.home-cta__panel {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface-elevated);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 5vw, 3.5rem);
  text-align: center; display: grid; gap: 1.4rem; justify-items: center;
}
.home-cta__panel .t-display { max-width: 18ch; }
.home-cta__panel p { color: var(--color-text-secondary); margin: 0; max-width: 56ch; }
.home-cta__panel .cta { margin-top: .5rem; }

/* =============================================================================
   Scroll-reveal (progressive enhancement).
   Elements are visible by default; home.js adds .has-reveal ONLY when motion is
   allowed + IntersectionObserver exists. No-JS and reduced-motion → fully visible.
============================================================================= */
.has-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; will-change: opacity, transform; }
.has-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
.has-reveal [data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
.has-reveal [data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
.has-reveal [data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }