@charset "UTF-8";
/* Alternate home page (index-alt.html): big centred statements, square
   uppercase buttons, a scattered image collage and a hover-image project
   list. Loaded after site.css and only on that page. */

/* ---------- Shared pieces ---------- */

.alt .a-label { text-align: center; margin-bottom: clamp(24px, 3vw, 40px); }
.alt .a-center { display: flex; justify-content: center; }

/* Large centred statement, revealed line by line. */
.a-statement {
  margin: 0 auto; max-width: 22ch; text-align: center;
  font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.04em;
}
.a-statement--light { color: var(--white); }
.lines.reveal { opacity: 1; transform: none; }
.ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln > span {
  display: block; transform: translateY(105%);
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.1, 1) calc(var(--i, 0) * 0.09s);
}
.lines.is-in .ln > span { transform: none; }
html:not(.js) .ln > span { transform: none; }
/* On narrow screens the fixed line breaks fall apart, so let the text flow
   and fade the whole statement in instead. */
@media (max-width: 760px) {
  .ln, .ln > span { display: inline; }
  .ln > span { transform: none; }
  .js .lines.reveal:not(.is-in) { opacity: 0; transform: translateY(20px); }
  .js .lines.reveal { transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
}

/* ---------- Centred-logo header (index-alt2.html) ---------- */

/* Logo in the middle column; the nav splits into two groups either side.
   On phones the groups collapse back into the usual Menu panel. */
.site-header--center { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-header--center .brand { grid-column: 2; grid-row: 1; }
@media (min-width: 761px) {
  .site-header--center .nav { display: contents; }
  .site-header--center .nav-group { display: flex; gap: clamp(20px, 2.6vw, 40px); grid-row: 1; }
  .site-header--center .nav-group:first-child { grid-column: 1; justify-self: start; }
  .site-header--center .nav-group:last-child { grid-column: 3; justify-self: end; }
}
@media (max-width: 760px) {
  .site-header--center .nav-group { display: contents; }
  .site-header--center .menu-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* ---------- Stacked header (index-alt3.html) ---------- */

/* A larger logo centred, with the nav centred on a row beneath it. The
   header is taller here, so it carries its own --header-h. On phones it
   falls back to centred logo + Menu, like alt2. */
.site-header--stack { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-header--stack .brand { grid-column: 2; grid-row: 1; }
@media (min-width: 761px) {
  .site-header--stack {
    --header-h: 118px;
    display: flex; flex-direction: column; justify-content: center; gap: 14px;
  }
  .site-header--stack .brand { width: 176px; }
}
@media (max-width: 760px) {
  .site-header--stack .menu-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
}

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

/* Same carousel as the main home page (crossfade, drift, drag, cursor
   label); only the overlay changes: a centred statement and button. */
.alt .hero-inner {
  display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(36px, 5vw, 64px);
}
.alt .hero-meta { position: absolute; left: var(--gutter); bottom: 0; }

/* ---------- Intro ---------- */

/* Dark band right after the hero. */
.a-intro {
  padding-block: var(--section); display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--ink); color: var(--white);
}
.a-intro .label { color: var(--inv-muted); }
/* Flips to light together with What we do (alt.js adds .is-lit to both). */
.a-intro, .a-intro .label, .a-intro-text, .a-intro .btn-sq { transition: background-color 1.2s var(--ease), color 1.2s var(--ease); }
.a-intro.is-lit { background: var(--bg); color: var(--ink); }
.a-intro.is-lit .label, .a-intro.is-lit .a-intro-text { color: var(--muted); }
.a-intro.is-lit .btn-sq--light { background: var(--ink); color: var(--bg); }
.a-intro-text { max-width: 44ch; margin: clamp(28px, 3vw, 40px) 0 clamp(28px, 3vw, 40px); color: var(--inv-soft); font-size: var(--t-large); line-height: 1.4; }

/* ---------- What we do ---------- */

/* Starts dark, continuing the About band, and fades to the light ground
   once its top reaches the middle of the screen (alt.js adds .is-lit). */
.a-collection {
  padding-block: var(--section);
  background: var(--ink); color: var(--white);
  transition: background-color 1.2s var(--ease), color 1.2s var(--ease);
}
.a-collection.is-lit { background: var(--bg); color: var(--ink); }
/* The button inverts with the section: light on dark, dark on light. */
.a-collection .btn-sq { transition: background-color 1.2s var(--ease), color 1.2s var(--ease); }
.a-collection.is-lit .btn-sq--light { background: var(--ink); color: var(--bg); }
@media (prefers-reduced-motion: reduce) { .a-collection { transition: none; } }

.a-collection .label { color: var(--inv-muted); transition: color 1.2s var(--ease); }
.a-collection.is-lit .label { color: var(--ink); }

/* Intro pinned on the left; the services scroll past on the right and rise
   in one by one, alternating wide and narrow images. */
.a-svc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.a-svc-intro {
  /* Pinned at the vertical middle of the space below the header. */
  grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + (100svh - var(--header-h)) / 2); transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.a-svc-intro p { margin: 0; max-width: 30ch; font-size: var(--t-large); line-height: 1.4; letter-spacing: -0.012em; }
.a-svc-intro .btn-sq { margin-top: 8px; }
/* Two staggered columns; the right column sits lower so items interleave. */
.a-svc-list { grid-column: 6 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3vw, 56px); row-gap: clamp(48px, 5vw, 88px); }
.a-svc-list .svc-item:nth-child(even) { margin-top: clamp(100px, 12vw, 220px); }

.svc-item { display: flex; flex-direction: column; gap: 18px; }
.svc-media { display: block; overflow: hidden; background: var(--panel); aspect-ratio: 4 / 5; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.1, 1); }
.svc-item.is-in .svc-media img { transform: none; }
.svc-item:hover .svc-media img { transform: scale(1.03); transition-duration: 1s; }
.svc-text { display: flex; flex-direction: column; gap: 6px; }
.svc-name { font-size: var(--t-lede); line-height: 1.15; letter-spacing: -0.022em; }
.svc-desc { line-height: 1.5; opacity: 0.6; max-width: 34ch; }
/* A longer, softer rise than the site's default reveal. */
.js .svc-item.reveal:not(.is-in) { transform: translateY(64px); }
.js .svc-item.reveal { transition: opacity 1.1s var(--ease), transform 1.3s cubic-bezier(0.2, 0.8, 0.1, 1); }

@media (max-width: 900px) {
  .a-svc-intro { grid-column: 1 / -1; position: static; transform: none; margin-bottom: 56px; }
  .a-svc-list { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-media img { transform: none; }
}

/* ---------- Featured projects ---------- */

/* Uses the main home page's Selected work grid (three projects and the
   View all tile), rendered by site.js. */
.a-projects { padding-block: var(--section); }
.a-projects .a-statement { margin-bottom: clamp(28px, 3vw, 40px); }
.a-selected { margin-top: clamp(56px, 7vw, 112px); }

/* ---------- Closing CTA ---------- */

.a-cta { padding-block: var(--section); }
/* Line drawings above the label that cycle: a house, a chair, a kitchen,
   a table. Each one sketches itself stroke by stroke (--d staggers them),
   holds, erases, and the next begins. alt.js moves .is-in / .is-out along. */
.a-sketch {
  display: block; width: clamp(220px, 24vw, 380px); height: auto; margin: 0 auto clamp(32px, 4vw, 56px);
  fill: none; stroke: currentColor; stroke-width: 0.75; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.7; overflow: visible;
}
.a-sketch path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.a-sketch g.is-in path { animation: a-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--d) * 0.18s) forwards; }
.a-sketch g.is-out path { stroke-dashoffset: 0; animation: a-erase 0.8s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--d) * 0.06s) forwards; }
@keyframes a-draw { to { stroke-dashoffset: 0; } }
@keyframes a-erase { to { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce) {
  .a-sketch g:not(:first-child) { display: none; }
  .a-sketch path { animation: none !important; stroke-dashoffset: 0; }
}
.a-cta .a-statement { margin-bottom: clamp(28px, 3vw, 40px); }

@media (prefers-reduced-motion: reduce) {
  .ln > span { transform: none; transition: none; }
}