/* ==========================================================================
   FIRSTPEAK STUDIO, WEBSITES TIERS
   Page-scoped additions for /websites only. Loaded AFTER /css/v2.css and
   /css/websites.css, and never edits either of them.

   Adds: the build floor band, the four-tier ladder (three columns plus a
   separate anchor engagement), the ownership statement, the photo and video
   add-on band, and two small layout modifiers for the process row and the
   recurring plans grid.

   Doctrine matches v2: content is visible by default, gold reads as accent
   only, and nothing here requires motion to be legible.
   ========================================================================== */

/* ---- hero microcopy ------------------------------------------------------ */
.web-hero__note { margin-top: 1rem; font-size: .84rem; line-height: 1.6;
  color: rgba(242,238,230,.62); max-width: 46ch; }

/* ---- the floor: what ships in all four builds ---------------------------- */
.floor { background: var(--bone); color: var(--granite); }
.floor__inner { padding-top: clamp(3.4rem, 7vh, 5.4rem); padding-bottom: clamp(3.4rem, 7vh, 5.4rem); }
.floor__eyebrow { display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-display); font-weight: 600; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .22em; color: var(--gold-deep); }
.floor__eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); flex: none; }
.floor__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.1; margin: .8rem 0 0; max-width: 22ch; }
.floor__lead { font-family: var(--font-serif); font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.62; color: var(--slate); max-width: 58ch; margin-top: 1rem; }
.floor__grid { display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(1.2rem, 2.4vw, 2rem); margin-top: clamp(2.2rem, 5vh, 3.2rem); }
.floor__item { border-top: 2px solid var(--granite); padding-top: .95rem; }
.floor__no { font-family: var(--font-display); font-weight: 700; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.floor__h { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  margin: .45rem 0 .4rem; letter-spacing: -.01em; }
.floor__p { font-size: .88rem; line-height: 1.6; color: var(--slate); }
@media (max-width: 1100px) { .floor__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .floor__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .floor__grid { grid-template-columns: 1fr; } }

/* ---- the ladder: three columns, center stage ---------------------------- */
.web-tiers__grid--ladder { grid-template-columns: 1fr 1.14fr 1fr;
  gap: clamp(1rem, 1.9vw, 1.5rem); align-items: stretch; }
.tier--stage { padding: clamp(1.8rem, 2.7vw, 2.5rem);
  background: rgba(216,154,69,.07); border-color: rgba(216,154,69,.45);
  box-shadow: 0 36px 92px -44px rgba(0,0,0,.75); }
.tier--stage .tier__name { font-size: 1.14rem; }
.tier--stage .tier__price { font-size: clamp(1.9rem, 3.1vw, 2.5rem); }
.tier--stage .tier__list li { font-size: .95rem; }

.tier__pos { font-family: var(--font-serif); font-style: italic;
  font-size: 1rem; line-height: 1.5; color: var(--gold-bright); margin: .7rem 0 0; }
.tier__who { font-size: .92rem; line-height: 1.6; color: rgba(242,238,230,.74); margin: .7rem 0 1.1rem; }
.tier__label { font-family: var(--font-display); font-weight: 700; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright);
  margin: 0 0 .7rem; }
.tier__excl { margin-top: 1.2rem; padding-top: .9rem; border-top: 1px dashed var(--hairline-dark);
  font-size: .86rem; line-height: 1.6; color: rgba(242,238,230,.6); }
.tier__excl b { font-family: var(--font-display); font-weight: 700; color: rgba(242,238,230,.82); }
.tier__terms { margin-top: auto; padding-top: 1.2rem; border-top: 1px solid var(--hairline-dark);
  display: grid; gap: .3rem; }
.tier__terms span { display: flex; gap: .55rem; font-size: .86rem; line-height: 1.5;
  color: rgba(242,238,230,.78); }
.tier__terms b { font-family: var(--font-display); font-weight: 700; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-bright);
  flex: 0 0 5.2rem; padding-top: .25rem; }
.tier__cta { margin-top: 1.2rem; text-align: center; }
.tier__cta .btn { display: block; width: 100%; }

@media (max-width: 1040px) {
  .web-tiers__grid--ladder { grid-template-columns: 1fr; max-width: 32rem; margin-inline: auto; }
  .tier--stage { padding: clamp(1.5rem, 2.2vw, 2rem); }
}

/* ---- the anchor engagement (Flagship) ----------------------------------- */
.anchor { background: var(--granite-deep); color: var(--bone);
  padding-top: clamp(3rem, 7vh, 5rem); padding-bottom: clamp(4rem, 9vh, 6.5rem); }
.anchor__frame { position: relative; border: 1px solid rgba(216,154,69,.36); border-radius: 16px;
  padding: clamp(1.9rem, 3.6vw, 3.2rem);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(216,154,69,.1), rgba(26,29,34,0) 60%),
    rgba(242,238,230,.03); }
.anchor__flag { position: absolute; top: -.7rem; left: clamp(1.5rem, 3vw, 3rem);
  font-family: var(--font-display); font-weight: 700; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--granite-deep); background: var(--gold);
  padding: .3rem .85rem; border-radius: 999px; white-space: nowrap; }
.anchor__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(1.8rem, 4vw, 3.4rem); }
.anchor__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: .02em; color: var(--gold-bright); }
.anchor__price { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1; color: var(--bone); margin: .4rem 0 0; }
.anchor__price .num { color: var(--gold); }
.anchor__pos { font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.55; color: rgba(242,238,230,.86);
  margin-top: 1rem; max-width: 34ch; }
.anchor__who { font-size: .94rem; line-height: 1.7; color: rgba(242,238,230,.7);
  margin-top: 1.1rem; max-width: 40ch; }
.anchor__list { list-style: none; margin: .8rem 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem clamp(1.2rem, 2.4vw, 2rem); }
.anchor__list li { position: relative; padding-left: 1.4rem; font-size: .92rem; line-height: 1.5;
  color: rgba(242,238,230,.82); }
.anchor__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold); opacity: .85; }
.anchor__excl { margin-top: 1.3rem; padding-top: .95rem; border-top: 1px dashed var(--hairline-dark);
  font-size: .88rem; line-height: 1.6; color: rgba(242,238,230,.6); }
.anchor__excl b { font-family: var(--font-display); font-weight: 700; color: rgba(242,238,230,.82); }
.anchor__terms { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline-dark);
  display: grid; gap: .35rem; }
.anchor__terms span { display: flex; gap: .6rem; font-size: .88rem; line-height: 1.5; color: rgba(242,238,230,.78); }
.anchor__terms b { font-family: var(--font-display); font-weight: 700; font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold-bright);
  flex: 0 0 5.4rem; padding-top: .25rem; }
.anchor__actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; }
.anchor__note { font-size: .84rem; line-height: 1.6; color: rgba(242,238,230,.58); max-width: 34ch; }
@media (max-width: 860px) {
  .anchor__grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .anchor__list { grid-template-columns: 1fr; }
}

/* ---- the ownership statement -------------------------------------------- */
.ownline { background: var(--bone); color: var(--granite); }
.ownline__inner { text-align: center; max-width: 46ch; margin-inline: auto;
  padding-top: clamp(3rem, 6.5vh, 4.6rem); padding-bottom: clamp(3rem, 6.5vh, 4.6rem); }
.ownline__eyebrow { font-family: var(--font-display); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .24em; color: var(--gold-deep); }
.ownline__quote { font-family: var(--font-serif); font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  line-height: 1.32; letter-spacing: -.01em; margin: 1rem 0 0; color: var(--granite); }
.ownline__quote em { font-style: italic; color: var(--gold-deep); }
.ownline__fine { font-size: .9rem; line-height: 1.65; color: var(--slate); margin-top: 1.1rem; }

/* ---- photo and video, an add-on at every tier --------------------------- */
.addon { background: var(--bone); color: var(--granite); }
.addon__inner { border-top: 1px solid var(--hairline-light);
  padding-top: clamp(2.8rem, 6vh, 4.2rem); padding-bottom: clamp(3.4rem, 7.5vh, 5.4rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3.4rem); }
.addon__eyebrow { font-family: var(--font-display); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .22em; color: var(--gold-deep); }
.addon__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.6rem);
  letter-spacing: -.01em; margin: .7rem 0 .6rem; }
.addon__p { font-size: .95rem; line-height: 1.7; color: var(--slate); max-width: 44ch; }
.addon__p + .addon__p { margin-top: .8rem; }
@media (max-width: 860px) { .addon__inner { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- layout modifiers on existing components ---------------------------- */
.web-process__steps--five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .web-process__steps--five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .web-process__steps--five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .web-process__steps--five { grid-template-columns: 1fr; } }

.svc-plans__grid--two { grid-template-columns: repeat(2, 1fr); max-width: 46rem; margin-inline: auto; }
@media (max-width: 860px) { .svc-plans__grid--two { grid-template-columns: 1fr; max-width: 30rem; } }

.splan__list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .5rem; }
.splan__list li { position: relative; padding-left: 1.35rem; font-size: .89rem; line-height: 1.5;
  color: rgba(242,238,230,.76); }
.splan__list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--gold); opacity: .85; }