/* HNRX Studio — website design and development service */

.web-hero {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(360px, 6fr);
  gap: var(--space-4);
  align-items: center;
}

.web-hero__copy .lede { max-width: 58ch; }

.web-showcase {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 48vw, 620px);
  display: grid;
  grid-template-rows: 1fr auto;
  color: #fff;
  text-decoration: none;
  background: #11100f;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.32);
}
.web-showcase__image,
.web-showcase__wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.web-showcase__image { object-fit: cover; object-position: center; transition: transform 1s var(--ease-out); }
.web-showcase__wash { background: linear-gradient(180deg, rgba(5,8,7,.02), rgba(5,8,7,.5)); }
.web-showcase__wordmark {
  position: relative;
  z-index: 1;
  width: min(78%, 520px);
  grid-row: 1;
  place-self: center;
  height: auto;
  margin: 0;
}
.web-showcase__rail {
  position: relative;
  grid-row: 2;
  z-index: 1;
  inset: auto;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--umber);
  color: var(--titanium);
  border-top: var(--line-hair);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.web-showcase__rail b { font-weight: 400; }
.web-showcase__rail i { font-size: 1rem; font-style: normal; transition: transform .25s ease; }
.web-showcase:hover .web-showcase__image { transform: scale(1.035); }
.web-showcase:hover .web-showcase__rail i { transform: translate(3px,-3px); }

.web-principles,
.web-proof-grid,
.web-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.web-principles article,
.web-scope-grid article {
  min-width: 0;
  padding: var(--space-3) var(--space-2);
  border: var(--line-hair);
}

.web-principles article > span,
.web-scope-grid article > span {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum-light);
}

.web-principles h3,
.web-scope-grid h3 { margin-top: var(--space-1); }
.web-principles p,
.web-scope-grid p { margin-top: var(--space-1); color: var(--ash); }

.web-proof-card {
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border: var(--line-hair);
  background: var(--umber);
}

.web-proof-card__visual {
  min-height: clamp(280px, 38vw, 500px);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  background: #efe9df;
  color: #161210;
}

.web-proof-card__visual--wayriot {
  background: radial-gradient(ellipse at 80% 14%, #2865bb, transparent 55%), linear-gradient(155deg, #143974, #08172e);
  color: #fff;
}
.web-proof-card__visual--wayriot>img:first-child { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.web-proof-card__visual--wayriot::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.48)); }
.web-proof-card__visual--wayriot .web-proof-card__mark { position:relative; z-index:2; width:min(72%,440px); height:auto; }
.web-proof-card:hover .web-proof-card__visual--wayriot>img:first-child { transform:scale(1.035); }

.web-proof-card__visual--studio { background: #071c1a; }
.web-proof-card__scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% center; transition: transform .8s var(--ease-out); }
.web-proof-card__visual--studio::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3,17,16,.05), rgba(3,17,16,.18) 35%, rgba(3,17,16,.7)); }
.web-proof-card__studio-mark { position: relative; z-index: 2; display: block; width: 84%; aspect-ratio: 1960 / 526; overflow: hidden; }
.web-proof-card__studio-mark img { position: absolute; left: -14.693878%; top: -181.749049%; width: 122.448980%; max-width: none; height: auto; }
.web-proof-card:hover .web-proof-card__scene { transform: scale(1.035); }
.web-seo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); border-top: var(--line-hair); padding-top: var(--space-3); }
.web-seo__scope { display: grid; gap: var(--space-3); }
.web-seo__scope h3 { margin-top: var(--space-1); }
.web-seo__scope p { margin-top: var(--space-1); color: var(--ash); }
@media (max-width: 760px) { .web-seo { grid-template-columns: 1fr; gap: var(--space-3); } }
@media (prefers-reduced-motion: reduce) { .web-proof-card__scene { transition: none; } .web-proof-card:hover .web-proof-card__scene { transform: none; } }

.web-proof-card__copy { padding: var(--space-2); }
.web-proof-card__copy h3 { margin-top: var(--space-1); }
.web-proof-card__copy p { margin-top: var(--space-1); color: var(--ash); }
.web-proof-card:hover h3 { color: var(--plum-light); }

.web-design-page .process__steps { padding-top: 1.3rem; border-top: 1px solid var(--plum); }
.web-design-page .process__steps::before { display: none; }

.web-price-lock {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
  gap: var(--space-4);
  align-items: end;
  padding-block: var(--space-3);
  border-block: var(--line-hair);
}

.web-price-lock strong {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 400;
  line-height: 0.9;
}

.web-price-lock__note { color: var(--ash); }

.web-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.web-tier {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-2);
  border: var(--line-hair);
}

.web-tier--featured { border-color: var(--plum-light); background: rgba(126, 74, 120, 0.1); }
.web-tier h3 { margin-top: var(--space-1); }
.web-tier__range { margin-top: var(--space-2); color: var(--titanium); font-size: 1.15rem; }
.web-tier p { margin-top: var(--space-1); color: var(--ash); }
.web-tier ul { margin-top: var(--space-2); margin-bottom: clamp(1.5rem, 2vw, 2rem); padding-left: 1.15rem; color: var(--ash); }
.web-tier li + li { margin-top: 0.55rem; }
.web-tier .btn { align-self: flex-start; max-width: 100%; margin-top: auto; margin-left: 0; padding: 1rem 1.5rem; border-radius: 3px; text-align: center; }

@media (max-width: 900px) {
  .web-hero { grid-template-columns: 1fr; }
  .web-showcase { max-width: 680px; }
  .web-tiers { grid-template-columns: 1fr; }
  .web-price-lock { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 620px) {
  .web-showcase { min-height: 420px; }
  .web-showcase__rail { grid-template-columns: 1fr auto; }
  .web-showcase__rail span { display: none; }
  .web-principles,
  .web-proof-grid,
  .web-scope-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .web-showcase__image { transition: none; }
}