/* ==========================================================================
   INSAME — homepage
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · HERO

   Not a full-bleed 16:9 photograph. The source library is phone capture that
   caps at 1440px wide, so a viewport-width hero would be visibly soft on any
   retina display — the one thing a premium site cannot afford. Instead: an
   editorial split, oversized type on the ivory field against a tall image
   plate that bleeds off the right edge. The plate is ~46vw, which keeps it
   inside the source resolution at 2× while reading as architectural scale.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: end;
  gap: clamp(2rem, 4vw, 4rem);
  padding-top: calc(var(--nav-h) + clamp(2rem, 7vh, 5rem));
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  padding-left: var(--gutter);
  overflow: hidden;
}

.hero__type { position: relative; z-index: 2; padding-bottom: clamp(1rem, 4vh, 3rem); }
.hero__eyebrow { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.hero__eyebrow .rule-fill { width: clamp(40px, 8vw, 96px); height: 1px; background: var(--rule); }

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 7.2vw, 8.2rem);
  line-height: .92;
  letter-spacing: -.03em;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem);
}
.hero h1 em { font-style: italic; color: var(--bronze); }

.hero__lead { max-width: 40ch; margin-bottom: clamp(2rem, 4.5vh, 3rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ---- plate ---- */
.hero__plate {
  position: relative;
  align-self: stretch;
  margin-right: calc(var(--gutter) * -1);
  min-height: 58svh;
}
.hero__stack {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--limestone);
  background-size: cover;
  background-position: center;
}
.hero__stack img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s var(--e-soft), transform 7s linear;
}
.hero__stack img.is-on { opacity: 1; transform: scale(1); }

/* Entrance: the plate opens from the baseline while the photograph inside
   counter-scales, so it settles rather than slides. */
.hero__stack { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s var(--e-io) .15s; }
.is-ready .hero__stack { clip-path: inset(0 0 0 0); }

/* Overlapping secondary plate — deliberate overlap, not decoration: it gives
   the composition a foreground and stops the hero reading as two columns. */
.hero__inset {
  position: absolute;
  left: clamp(-3.5rem, -4vw, -2rem);
  bottom: clamp(2rem, 8vh, 5rem);
  width: clamp(120px, 15vw, 208px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bone);
  box-shadow: 0 26px 60px -24px rgba(19, 18, 16, .45);
  /* Above the main plate, but BELOW .hero__type (z-index 2). The headline
     runs long at some widths and the inset sits right on the seam; the type
     must win that overlap, never the photograph. */
  z-index: 1;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--e-io) .95s;
}
.is-ready .hero__inset { clip-path: inset(0 0 0 0); }
.hero__inset img { width: 100%; height: 100%; object-fit: cover; }

/* Scroll cue */
.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.25rem, 3vh, 2rem);
  display: flex;
  align-items: center;
  gap: .75rem;
  z-index: 4;
  opacity: 0;
  transition: opacity .8s var(--e-out) 1.8s;
}
.is-ready .hero__cue { opacity: 1; }
.hero__cue-line { width: 42px; height: 1px; background: var(--rule); position: relative; overflow: hidden; }
.hero__cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bronze);
  animation: cue 2.6s var(--e-io) infinite;
}
@keyframes cue {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) { .hero__cue-line::after { animation: none; } }

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    align-items: start;
    padding-right: var(--gutter);
    min-height: auto;
    gap: clamp(2rem, 5vh, 3rem);
  }
  .hero__plate { margin-right: calc(var(--gutter) * -1); margin-left: clamp(2rem, 12vw, 5rem); min-height: 0; aspect-ratio: 4 / 5; }
  .hero__stack { position: absolute; }
  .hero__inset { width: clamp(96px, 26vw, 140px); left: clamp(-2rem, -6vw, -1rem); bottom: -1.5rem; }
  .hero__cue { display: none; }
}

/* --------------------------------------------------------------------------
   2 · BRAND PROOF
   Oversized type in a horizontal sequence. No stat cards.
   -------------------------------------------------------------------------- */

.proof { border-top: 1px solid var(--rule); }
.proof__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.proof__i {
  padding: clamp(2rem, 5vh, 3.25rem) clamp(1rem, 2vw, 2rem) clamp(2rem, 5vh, 3.25rem) 0;
  border-right: 1px solid var(--rule);
}
.proof__i:last-child { border-right: 0; }
.proof__i:not(:first-child) { padding-left: clamp(1rem, 2.5vw, 2.5rem); }

.proof__n {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -.03em;
  display: block;
  margin-bottom: .6rem;
}
.proof__l {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--stone);
  line-height: 1.7;
}
.proof__i--accent .proof__n { color: var(--bronze); }

@media (max-width: 820px) {
  .proof__row { grid-template-columns: 1fr 1fr; }
  .proof__i:nth-child(2) { border-right: 0; }
  .proof__i:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .proof__i:nth-child(odd) { padding-left: 0; }
  .proof__i:nth-child(even) { padding-left: clamp(1rem, 5vw, 2rem); }
}

/* --------------------------------------------------------------------------
   3 · SELECTED PROJECTS
   Alternating full-height layouts. Each project holds enough viewport to
   read as a campaign rather than a card in a grid.
   -------------------------------------------------------------------------- */

.projects { padding-top: var(--sec-y); }

.pj {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(3rem, 9vh, 7rem);
}

/* Odd projects lead with the image, even lead with the type. The counter
   always sits on the outer edge so the eye has a fixed anchor down the page. */
.pj__media { grid-column: 1 / 7; position: relative; }
.pj__body  { grid-column: 8 / 13; }
.pj:nth-child(even) .pj__media { grid-column: 7 / 13; order: 2; }
.pj:nth-child(even) .pj__body  { grid-column: 1 / 6; order: 1; }

/* The first project is given more room — one project should feel important. */
.pj--lead .pj__media { grid-column: 1 / 8; }
.pj--lead .pj__body  { grid-column: 9 / 13; }

.pj__plate { position: relative; overflow: hidden; background: var(--limestone); }
.pj__plate img { width: 100%; height: 100%; object-fit: cover; }

.pj__count {
  position: absolute;
  top: clamp(-.5rem, -1vw, -.25rem);
  left: clamp(-1rem, -2vw, -.5rem);
  z-index: 2;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .2em;
  color: var(--bronze);
  background: var(--ivory);
  padding: .5rem .8rem .5rem 0;
}
.pj:nth-child(even) .pj__count { left: auto; right: clamp(-1rem, -2vw, -.5rem); padding: .5rem 0 .5rem .8rem; }

.pj__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin-bottom: 1.25rem;
}
.pj__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  padding-block: 1rem;
  margin-bottom: 1.25rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pj__meta dt { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.pj__meta dd { margin: 0 1.5rem 0 0; font-size: var(--t-sm); }
.pj__meta .pair { display: flex; flex-direction: column; gap: .3rem; }
.pj__desc { color: var(--stone); margin-bottom: 1.75rem; max-width: 40ch; }

@media (max-width: 900px) {
  .pj, .pj--lead { display: block; padding-block: clamp(2.5rem, 6vh, 4rem); }
  .pj__media, .pj__body,
  .pj:nth-child(even) .pj__media, .pj:nth-child(even) .pj__body { grid-column: auto; }
  .pj__body { margin-top: 1.75rem; }
  .pj__count, .pj:nth-child(even) .pj__count { left: 0; right: auto; top: -.25rem; padding: .4rem .7rem .4rem 0; }
}

.projects__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   5 · HOW INSAME BUILDS DIFFERENTLY
   Five steps, one dominant image each, a progress line that draws as you
   descend. Not five small cards.
   -------------------------------------------------------------------------- */

.method { position: relative; }
.method__list { position: relative; }

/* The rule that runs the length of the section, filled by scroll progress. */
.method__spine {
  position: absolute;
  left: clamp(2.5rem, 6vw, 6rem);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--rule);
}
.method__spine::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--fill, 0) * 100%);
  background: var(--bronze);
  transition: height .1s linear;
}

.step {
  display: grid;
  grid-template-columns: clamp(2.5rem, 6vw, 6rem) minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 7vh, 5rem);
  border-bottom: 1px solid var(--rule);
}
.step:last-child { border-bottom: 0; }

.step__n {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .16em;
  color: var(--stone);
  padding-top: .5rem;
  transition: color .5s var(--e-out);
}
.step.is-in .step__n { color: var(--bronze); }

.step__h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-bottom: .85rem;
}
.step__p { color: var(--stone); max-width: 44ch; }
.step__tag {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  padding: .3rem .65rem;
  border: 1px solid rgba(154, 114, 72, .32);
  border-radius: 999px;
}
.step__plate { overflow: hidden; background: var(--limestone); aspect-ratio: 4 / 3; }
.step__plate img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .method__spine { left: 0; }
  .step { grid-template-columns: 1fr; gap: 1.25rem; padding-left: 1.75rem; }
  .step__plate { aspect-ratio: 16 / 10; order: 3; }
}

/* --------------------------------------------------------------------------
   6 · POSITIONING STATEMENT
   -------------------------------------------------------------------------- */

.stance {
  background: var(--bone);
  text-align: center;
  padding-block: clamp(6rem, 18vh, 13rem);
}
.stance h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-mega);
  line-height: .95;
  letter-spacing: -.03em;
  max-width: 15ch;
  margin-inline: auto;
}
.stance h2 em { font-style: italic; color: var(--bronze); }
.stance__sub { margin: clamp(2rem, 5vh, 3rem) auto 0; max-width: 52ch; color: var(--stone); font-size: var(--t-md); }

/* --------------------------------------------------------------------------
   7 · SERVICES
   Text-led. Hovering a title changes the photograph. No icon cards.
   -------------------------------------------------------------------------- */

.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }

.svc__list { border-top: 1px solid var(--rule); }
.svc__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: clamp(1.5rem, 3.4vh, 2.4rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.svc__row::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s var(--e-out);
}
.svc__row.is-active::after { transform: scaleX(1); }

.svc__n { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; color: var(--stone); }
.svc__t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  transition: color .5s var(--e-out), transform .6s var(--e-out);
}
.svc__row.is-active .svc__t { color: var(--bronze); transform: translateX(6px); }
.svc__from { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; color: var(--stone); white-space: nowrap; }
.svc__row a { position: absolute; inset: 0; }

.svc__viewer { position: sticky; top: calc(var(--nav-h) + 2rem); aspect-ratio: 3 / 4; overflow: hidden; background: var(--limestone); }
.svc__plate {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .9s var(--e-soft), transform 1.4s var(--e-out);
}
.svc__plate.is-active { opacity: 1; transform: scale(1); }
.svc__plate img { width: 100%; height: 100%; object-fit: cover; }

.svc__secondary { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.svc__secondary li { font-size: var(--t-sm); color: var(--stone); }

@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; }
  .svc__viewer { order: -1; aspect-ratio: 4 / 3; position: relative; top: 0; }
}

/* --------------------------------------------------------------------------
   8 · FEATURED PROJECT STORY
   -------------------------------------------------------------------------- */

.story { background: var(--near-black); color: var(--ivory); }
.story .label { color: var(--stone-dim); }
.story__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; padding-bottom: clamp(2rem, 5vh, 3rem); border-bottom: 1px solid var(--rule-dark); }
.story__title { font-family: var(--serif); font-weight: 400; font-size: var(--t-xxl); line-height: .98; letter-spacing: -.028em; max-width: 16ch; }

.story__hero { margin-block: clamp(2rem, 6vh, 4rem); overflow: hidden; aspect-ratio: 16 / 10; background: var(--graphite); }
.story__hero img { width: 100%; height: 100%; object-fit: cover; }

.story__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); }
.story__col h3 {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze-light);
  font-weight: 400;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule-dark);
}
.story__col p { color: var(--stone-dim); }

.story__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.75rem, 1.5vw, 1.25rem); margin-top: clamp(2rem, 5vh, 3.5rem); }
.story__strip .plate { aspect-ratio: 1 / 1; background: var(--graphite); }

@media (max-width: 780px) {
  .story__cols { grid-template-columns: 1fr; }
  .story__strip { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   9 · TESTIMONIAL
   One at a time, large. Photography alongside.
   -------------------------------------------------------------------------- */

.voice { display: grid; grid-template-columns: minmax(0, .56fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.voice__plate { overflow: hidden; aspect-ratio: 3 / 4; background: var(--limestone); }
.voice__plate img { width: 100%; height: 100%; object-fit: cover; }

.voice__stage { position: relative; min-height: 20rem; display: flex; align-items: center; }
.voice__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .7s var(--e-out), transform .8s var(--e-out);
  pointer-events: none;
}
.voice__slide.is-active { opacity: 1; transform: none; pointer-events: auto; }

.voice__quote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.9rem);
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-bottom: 2rem;
}
.voice__who { display: flex; flex-direction: column; gap: .3rem; }
.voice__who .n { font-size: var(--t-sm); font-weight: 500; }
.voice__who .m { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }

.voice__dots { display: flex; gap: .6rem; margin-top: 2.5rem; }
.voice__dot { width: 26px; height: 2px; background: var(--rule); transition: background .4s var(--e-out); }
.voice__dot.is-active { background: var(--bronze); }

@media (max-width: 860px) {
  .voice { grid-template-columns: 1fr; }
  .voice__plate { aspect-ratio: 16 / 10; }
  .voice__stage { min-height: 16rem; }
}

/* --------------------------------------------------------------------------
   10 · INSAMEVISION REINFORCEMENT
   -------------------------------------------------------------------------- */

.reprise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(4rem, 10vh, 7rem);
  border-block: 1px solid var(--rule);
}
.reprise h2 { font-family: var(--serif); font-weight: 400; font-size: var(--t-lg); line-height: 1.06; letter-spacing: -.02em; margin-bottom: 1.25rem; max-width: 20ch; }
.reprise__plate { overflow: hidden; aspect-ratio: 16 / 10; background: var(--near-black); }
.reprise__plate img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.9); }
@media (max-width: 860px) { .reprise { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   11 · FINAL CTA
   -------------------------------------------------------------------------- */

.close {
  position: relative;
  min-height: 82svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--near-black);
  color: var(--ivory);
}
.close__bg { position: absolute; inset: 0; }
.close__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.close__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(19, 18, 16, .94) 20%, rgba(19, 18, 16, .58) 70%, rgba(19, 18, 16, .8));
}
.close__inner { position: relative; z-index: 2; padding-block: clamp(4rem, 10vh, 7rem); }
.close h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-xxl);
  line-height: .97;
  letter-spacing: -.028em;
  margin-bottom: 1.5rem;
  max-width: 14ch;
}
.close .lead { color: var(--stone-dim); margin-bottom: 2.5rem; }
.close__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.close__aside {
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
}
.close__aside div { display: flex; flex-direction: column; gap: .35rem; }
.close__aside .k { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .16em; text-transform: uppercase; color: var(--stone-dim); }
.close__aside .v { font-size: var(--t-sm); }