/* ==========================================================================
   STUDIO — pages/home.css
   Sections that belong to the homepage only. Anything reusable lives in
   components.css.

   TOKEN DISCIPLINE (dark mode depends on it):
   there is not one literal colour in this file, and there must never be. Every
   surface, hairline, text colour and shadow resolves through a token, so the
   whole page re-paints from :root[data-theme="dark"] with no per-section dark
   overrides at all. If you need a colour here and cannot name a token for it,
   the token is missing — do not reach for a hex.

   The two raw --c-white references below are deliberate and are the kit's own
   idiom (see .btn--primary in components.css): white type sitting ON a red or
   ink plate, which stays white in the dark exactly as it is in the light.
   ========================================================================== */

/* ==========================================================================
   HERO — a calm, full-width STATEMENT.
   Not a bento grid. Not a carousel. Not a collage.

   Composition: an asymmetric type block (big tight headline on the
   inline-start, the supporting line + the credibility facts sitting on the
   BASELINE of it on the inline-end), then one full-bleed photograph beneath
   it. Composed and still — the whole thing does not move.
   ========================================================================== */
.hero {
  padding-block-start: clamp(2.5rem, 1.5rem + 4.5vw, 5.5rem);
}

.hero__head {
  display: grid;
  gap: var(--sp-8);
}
@media (min-width: 940px) {
  .hero__head {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    column-gap: var(--sp-12);
    align-items: end;   /* the aside sits on the headline's baseline */
  }
}

.hero__lead { display: grid; gap: var(--sp-6); min-inline-size: 0; }

.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--text);
  max-inline-size: 17ch;
  text-wrap: balance;
}
/* The one word that carries the brand. Not a gradient — a flat red rule
   drawn under the word, the way a printer would mark a proof. */
.hero__mark {
  position: relative;
  white-space: nowrap;
}
.hero__mark::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.06em;
  block-size: 3px;
  background: var(--accent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
}

/* the inline-end column: one supporting line + three hairline facts */
.hero__aside {
  display: grid;
  gap: var(--sp-6);
  min-inline-size: 0;
}
.hero__sub {
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  max-inline-size: 40ch;
}
.hero__facts {
  display: grid;
  gap: 0;
  border-block-start: var(--border-1);
}
.hero__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-block-end: var(--border-1);
  font-size: var(--fs-sm);
}
.hero__fact dt { color: var(--text-muted); }
.hero__fact dd {
  color: var(--text);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* --- the photograph. Full-bleed, anchored, still. ----------------------

   CROP NOTE (deliberate, do not "fix" this back):
   home_14.jpg is the client's own promo banner and has their PHONE NUMBER
   and URL burned into the top ~10% of the pixels, and a red brand watermark
   burned into the bottom ~13%. Rendered raw, a premium minimal hero would
   open with somebody else's ad furniture.

   The source is 1900x820 (2.32:1). Giving the frame a WIDER aspect than the
   source forces `cover` to crop the excess off the top and bottom — which is
   exactly where the burned-in artwork lives. 3.2:1 discards ~13.8% from each
   edge, taking both bands with it. This costs no resolution at all (the
   image is still downscaled at every viewport up to 1920), so the photograph
   stays sharp — an aspect crop, not a zoom.

   Phones can't use a 3.2:1 strip (it would be 112px tall), so below 700px
   the frame goes to 4:3 and a small scale() does the same vertical crop
   instead. At phone sizes the source has resolution to spare, so the modest
   upscale is invisible.
*/
.hero__media {
  position: relative;
  margin-block-start: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  background: var(--bg-surface);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.hero__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.34);   /* phone-only vertical crop */
}
@media (min-width: 560px) {
  .hero__media { aspect-ratio: 16 / 9; }
  .hero__img { transform: scale(1.3); }
}
@media (min-width: 700px) {
  .hero__media { aspect-ratio: 3 / 1; }
  .hero__img {
    transform: none;              /* the aspect now does the cropping */
    /* Bias the crop window UP the image: the burned-in watermark sits low,
       so we spend more of the crop budget on the bottom than the top. */
    object-position: center 45%;
  }
}
@media (min-width: 1100px) {
  .hero__media { aspect-ratio: 3.4 / 1; }
}

/* the caption chip — aligned to the container, not the viewport */
.hero__capwrap {
  position: absolute;
  inset-block-end: var(--sp-5);
  inset-inline: 0;
  pointer-events: none;
}
.hero__cap {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--plate);
  border: var(--border-1);
  border-radius: var(--r);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  pointer-events: auto;
  max-inline-size: 100%;
}
.hero__cap::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
@media (max-width: 559px) {
  .hero__capwrap { display: none; }   /* it would cover the photograph */
}

/* ==========================================================================
   RAIL SECTION — "browse by structure"
   ========================================================================== */
.railsec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  padding-block-start: var(--sp-7);
  border-block-start: var(--border-1);
  margin-block-end: var(--sp-7);
}
.railsec__title { font-size: var(--fs-h2); }
.railsec__lead { display: grid; gap: var(--sp-4); min-inline-size: 0; }
.railsec__nav { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.railsec__desc {
  font-size: var(--fs-sm);
  max-inline-size: 52ch;
  margin-block-end: var(--sp-7);
}

/* A section head that OPENS a band does not need its own top hairline — the
   band's own edge (.rule--top) has already drawn that line, and two lines
   1px apart read as a printing error. Lives here rather than as an inline
   style so the page holds no style="" attributes for a colour to hide in. */
.band--surface .shead {
  border-block-start: 0;
  padding-block-start: 0;
}

/* let the strip run to the container's edges */
.railsec .rail__track {
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}

/* ==========================================================================
   CAPABILITIES — a spec sheet, not a feature grid.
   Sticky statement on the inline-start; a hairline-ruled list on the end.
   ========================================================================== */
.caps {
  display: grid;
  gap: var(--sp-9);
}
@media (min-width: 940px) {
  .caps {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: var(--sp-12);
    align-items: start;
  }
}
/* justify-items:start — otherwise the grid stretches the "About the
   factory" button to the full column width. */
.caps__lead { display: grid; gap: var(--sp-5); align-content: start; justify-items: start; }
@media (min-width: 940px) {
  .caps__lead { position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-8)); }
}
.caps__title { font-size: var(--fs-h2); max-inline-size: 16ch; }
.caps__text { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-relaxed); max-inline-size: 46ch; }

.caps__list { border-block-start: var(--border-1); }
.cap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-5);
  row-gap: var(--sp-2);
  padding-block: var(--sp-6);
  border-block-end: var(--border-1);
  transition: background-color var(--dur-2) var(--ease);
}
.cap:hover { background: var(--bg-surface); }
.cap__n {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding-block-start: 5px;
  min-inline-size: 2.5ch;
}
.cap:hover .cap__n { color: var(--text-accent); }
.cap__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-head);
  color: var(--text);
}
.cap__desc {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-body);
  max-inline-size: 56ch;
}

/* ==========================================================================
   PROCESS — the 8 steps, as ruled cells.
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  border-radius: var(--r-lg);
  overflow: hidden;
}
.step {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-6);
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border);
  transition: background-color var(--dur-2) var(--ease);
  min-block-size: 190px;
}
.step:hover { background: var(--bg-hover); }
.step__n {
  display: inline-grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--r-xs);
  border: var(--border-1);
  background: var(--bg-surface);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  transition: var(--t-color);
}
.step:hover .step__n {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--c-white);
}
.step__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-head);
}
.step__desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-body); }

/* ==========================================================================
   PROOF — the numbers. Hairline-divided, tabular, quiet.
   ========================================================================== */
.proof {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
@media (min-width: 860px) {
  .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.proof__item {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: 0 0 0 1px var(--border);
}

/* ==========================================================================
   CLOSING CTA — the page's ONE dark moment.
   ========================================================================== */
.cta {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}
@media (min-width: 940px) {
  .cta {
    /* 1.1/1 (not 1.3/1): the action column needs enough room to hold both
       buttons on ONE row. At 1.3/1 they wrapped to a ragged stack. */
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    column-gap: var(--sp-10);
  }
}
.cta__title {
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-display);
  max-inline-size: 18ch;
}
.cta__lead { font-size: var(--fs-lead); color: var(--text-on-ink-mut); line-height: var(--lh-snug); max-inline-size: 46ch; margin-block-start: var(--sp-5); }
.cta__panel { display: grid; gap: var(--sp-5); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cta__note {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid var(--border-on-ink);
  font-size: var(--fs-sm);
  color: var(--text-on-ink-mut);
}
.cta__note svg { inline-size: 18px; block-size: 18px; flex: none; }
.cta__note a { color: var(--text-on-ink); font-weight: var(--fw-semibold); }
.cta__note a:hover { color: var(--c-white); text-decoration: underline; text-underline-offset: 3px; }